@pega/cosmos-react-cs 3.0.0-dev.21.1 → 3.0.0-dev.23.0

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,EACL,SAAS,EACT,eAAe,EACf,qBAAqB,EACrB,4BAA4B,EAC5B,YAAY,EACZ,oBAAoB,EACrB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,eAAe,EACf,qBAAqB,EACrB,4BAA4B,EAC7B,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,YAAY,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/index.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC","sourcesContent":["export {\n  CallProps,\n  CallParticipant,\n  CallControlPanelProps,\n  UserAvailabilityStatusOption,\n  TransferData,\n  TransferReasonOption\n} from './CallControlPanel.types';\nexport { default as ExternalCTI } from './ExternalCTI';\nexport { default } from './CallControlPanel';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/index.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC","sourcesContent":["export {\n  CallProps,\n  CallParticipant,\n  CallControlPanelProps,\n  UserAvailabilityStatusOption\n} from './CallControlPanel.types';\nexport { default as ExternalCTI } from './ExternalCTI';\nexport { default } from './CallControlPanel';\nexport type { TransferData } from './CallHandover/CallHandover.types';\n"]}

package/lib/components/DialPad/DialPad.js

@@ -27,7 +27,7 @@ const DialPad = forwardRef(({ onCallButtonClick, onDialButtonClick: onDialButton
         });
         onDialButtonClickProp?.(charCode);
     }, [onDialButtonClickProp]);
-    return (_jsxs(StyledDialPad, { ref: ref, children: [_jsxs(Flex, { container: { alignItems: 'center', justify: 'center', itemGap: 1 }, children: [_jsx(Input, { value: number, onChange: (e) => setNumber(e.target.value), "aria-label": t('dial_pad_phone_number_input_label'), readOnly: mode === 'DTMF' }), mode !== 'DTMF' && (_jsx(Button, { variant: 'primary', onClick: () => onCallButtonClick?.(number), "aria-label": t('dial_pad_call_button_label', [number]), disabled: number.length === 0, children: t('dial_pad_call_button_label') }))] }), _jsx(DialPadKeyboard, { onDialButtonClick: onDialButtonClick, mode: mode })] }));
+    return (_jsxs(StyledDialPad, { ref: ref, children: [_jsxs(Flex, { container: { alignItems: 'center', justify: 'center', itemGap: 1 }, children: [_jsx(Input, { value: number, onChange: (e) => setNumber(e.target.value), "aria-label": t('dial_pad_phone_number_input_label'), readOnly: mode === 'DTMF' }), mode !== 'DTMF' && onCallButtonClick && (_jsx(Button, { variant: 'primary', onClick: () => onCallButtonClick?.(number), "aria-label": t('dial_pad_call_button_label', [number]), disabled: number.length === 0, children: t('dial_pad_call_button_label') }))] }), _jsx(DialPadKeyboard, { onDialButtonClick: onDialButtonClick, mode: mode })] }));
 });
 export default DialPad;
 //# sourceMappingURL=DialPad.js.map

package/lib/components/DialPad/DialPad.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialPad.js","sourceRoot":"","sources":["../../../src/components/DialPad/DialPad.tsx"],"names":[],"mappings":";AAAA,OAAO,EAEL,UAAU,EAIV,WAAW,EACX,QAAQ,EACT,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAEL,gBAAgB,EAChB,KAAK,EACL,MAAM,EACN,OAAO,EACP,IAAI,EACJ,UAAU,EACV,UAAU,EAEX,MAAM,yBAAyB,CAAC;AAEjC,OAAO,eAAyC,MAAM,mBAAmB,CAAC;AAa1E,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE;IACvD,OAAO,GAAG,CAAA;MACN,UAAU;uBACO,IAAI,CAAC,OAAO;iBAClB,IAAI,CAAC,OAAO;;;MAGvB,UAAU,IAAI,UAAU;eACf,IAAI,CAAC,OAAO,CAAC,WAAW;;GAEpC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,OAAO,GAAmD,UAAU,CACxE,CACE,EACE,iBAAiB,EACjB,iBAAiB,EAAE,qBAAqB,EACxC,IAAI,EAC0B,EAChC,GAAwB,EACxB,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEzC,MAAM,iBAAiB,GAAG,WAAW,CACnC,CAAC,QAAgB,EAAE,EAAE;QACnB,SAAS,CAAC,CAAC,UAAkB,EAAE,EAAE;YAC/B,IAAI,QAAQ,KAAK,GAAG;gBAAE,OAAO,UAAU,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;YACrD,OAAO,UAAU,GAAG,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;QACpD,CAAC,CAAC,CAAC;QACH,qBAAqB,EAAE,CAAC,QAAQ,CAAC,CAAC;IACpC,CAAC,EACD,CAAC,qBAAqB,CAAC,CACxB,CAAC;IAEF,OAAO,CACL,MAAC,aAAa,IAAC,GAAG,EAAE,GAAG,aACrB,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EAAE,aACtE,KAAC,KAAK,IACJ,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,CAAC,CAAgC,EAAE,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,gBAC7D,CAAC,CAAC,mCAAmC,CAAC,EAClD,QAAQ,EAAE,IAAI,KAAK,MAAM,GACzB,EACD,IAAI,KAAK,MAAM,IAAI,CAClB,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,EAAE,CAAC,MAAM,CAAC,gBAC9B,CAAC,CAAC,4BAA4B,EAAE,CAAC,MAAM,CAAC,CAAC,EACrD,QAAQ,EAAE,MAAM,CAAC,MAAM,KAAK,CAAC,YAE5B,CAAC,CAAC,4BAA4B,CAAC,GACzB,CACV,IACI,EACP,KAAC,eAAe,IAAC,iBAAiB,EAAE,iBAAiB,EAAE,IAAI,EAAE,IAAI,GAAI,IACvD,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import {\n  ChangeEvent,\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  useCallback,\n  useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  ForwardProps,\n  defaultThemeProp,\n  Input,\n  Button,\n  useI18n,\n  Flex,\n  StyledIcon,\n  StyledFlex,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\n\nimport DialPadKeyboard, { DialPadKeyboardProps } from './DialPadKeyboard';\n\nexport interface DialPadProps extends NoChildrenProp {\n  /** Callback fired on call button click */\n  onCallButtonClick?: (phoneNumber: string) => void;\n  /** On keypad button press callback */\n  onDialButtonClick?: (charCode: number) => void;\n  /** Keypad mode, regular or DTMF. */\n  mode: DialPadKeyboardProps['mode'];\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledDialPad = styled.div(({ theme: { base } }) => {\n  return css`\n    ${StyledFlex} {\n      margin: 0 auto ${base.spacing} auto;\n      padding: ${base.spacing} 0;\n    }\n\n    ${StyledFlex} ${StyledIcon} {\n      color: ${base.palette.interactive};\n    }\n  `;\n});\n\nStyledDialPad.defaultProps = defaultThemeProp;\n\nconst DialPad: FunctionComponent<DialPadProps & ForwardProps> = forwardRef(\n  (\n    {\n      onCallButtonClick,\n      onDialButtonClick: onDialButtonClickProp,\n      mode\n    }: PropsWithoutRef<DialPadProps>,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    const t = useI18n();\n    const [number, setNumber] = useState('');\n\n    const onDialButtonClick = useCallback(\n      (charCode: number) => {\n        setNumber((prevNumber: string) => {\n          if (charCode === 127) return prevNumber.slice(0, -1);\n          return prevNumber + String.fromCharCode(charCode);\n        });\n        onDialButtonClickProp?.(charCode);\n      },\n      [onDialButtonClickProp]\n    );\n\n    return (\n      <StyledDialPad ref={ref}>\n        <Flex container={{ alignItems: 'center', justify: 'center', itemGap: 1 }}>\n          <Input\n            value={number}\n            onChange={(e: ChangeEvent<HTMLInputElement>) => setNumber(e.target.value)}\n            aria-label={t('dial_pad_phone_number_input_label')}\n            readOnly={mode === 'DTMF'}\n          />\n          {mode !== 'DTMF' && (\n            <Button\n              variant='primary'\n              onClick={() => onCallButtonClick?.(number)}\n              aria-label={t('dial_pad_call_button_label', [number])}\n              disabled={number.length === 0}\n            >\n              {t('dial_pad_call_button_label')}\n            </Button>\n          )}\n        </Flex>\n        <DialPadKeyboard onDialButtonClick={onDialButtonClick} mode={mode} />\n      </StyledDialPad>\n    );\n  }\n);\n\nexport default DialPad;\n"]}
+{"version":3,"file":"DialPad.js","sourceRoot":"","sources":["../../../src/components/DialPad/DialPad.tsx"],"names":[],"mappings":";AAAA,OAAO,EAEL,UAAU,EAIV,WAAW,EACX,QAAQ,EACT,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAEL,gBAAgB,EAChB,KAAK,EACL,MAAM,EACN,OAAO,EACP,IAAI,EACJ,UAAU,EACV,UAAU,EAEX,MAAM,yBAAyB,CAAC;AAEjC,OAAO,eAAyC,MAAM,mBAAmB,CAAC;AAa1E,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE;IACvD,OAAO,GAAG,CAAA;MACN,UAAU;uBACO,IAAI,CAAC,OAAO;iBAClB,IAAI,CAAC,OAAO;;;MAGvB,UAAU,IAAI,UAAU;eACf,IAAI,CAAC,OAAO,CAAC,WAAW;;GAEpC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,OAAO,GAAmD,UAAU,CACxE,CACE,EACE,iBAAiB,EACjB,iBAAiB,EAAE,qBAAqB,EACxC,IAAI,EAC0B,EAChC,GAAwB,EACxB,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEzC,MAAM,iBAAiB,GAAG,WAAW,CACnC,CAAC,QAAgB,EAAE,EAAE;QACnB,SAAS,CAAC,CAAC,UAAkB,EAAE,EAAE;YAC/B,IAAI,QAAQ,KAAK,GAAG;gBAAE,OAAO,UAAU,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;YACrD,OAAO,UAAU,GAAG,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;QACpD,CAAC,CAAC,CAAC;QACH,qBAAqB,EAAE,CAAC,QAAQ,CAAC,CAAC;IACpC,CAAC,EACD,CAAC,qBAAqB,CAAC,CACxB,CAAC;IAEF,OAAO,CACL,MAAC,aAAa,IAAC,GAAG,EAAE,GAAG,aACrB,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EAAE,aACtE,KAAC,KAAK,IACJ,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,CAAC,CAAgC,EAAE,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,gBAC7D,CAAC,CAAC,mCAAmC,CAAC,EAClD,QAAQ,EAAE,IAAI,KAAK,MAAM,GACzB,EACD,IAAI,KAAK,MAAM,IAAI,iBAAiB,IAAI,CACvC,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,EAAE,CAAC,MAAM,CAAC,gBAC9B,CAAC,CAAC,4BAA4B,EAAE,CAAC,MAAM,CAAC,CAAC,EACrD,QAAQ,EAAE,MAAM,CAAC,MAAM,KAAK,CAAC,YAE5B,CAAC,CAAC,4BAA4B,CAAC,GACzB,CACV,IACI,EACP,KAAC,eAAe,IAAC,iBAAiB,EAAE,iBAAiB,EAAE,IAAI,EAAE,IAAI,GAAI,IACvD,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import {\n  ChangeEvent,\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  useCallback,\n  useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  ForwardProps,\n  defaultThemeProp,\n  Input,\n  Button,\n  useI18n,\n  Flex,\n  StyledIcon,\n  StyledFlex,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\n\nimport DialPadKeyboard, { DialPadKeyboardProps } from './DialPadKeyboard';\n\nexport interface DialPadProps extends NoChildrenProp {\n  /** Callback fired on call button click */\n  onCallButtonClick?: (phoneNumber: string) => void;\n  /** On keypad button press callback */\n  onDialButtonClick?: (charCode: number) => void;\n  /** Keypad mode, regular or DTMF. */\n  mode: DialPadKeyboardProps['mode'];\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledDialPad = styled.div(({ theme: { base } }) => {\n  return css`\n    ${StyledFlex} {\n      margin: 0 auto ${base.spacing} auto;\n      padding: ${base.spacing} 0;\n    }\n\n    ${StyledFlex} ${StyledIcon} {\n      color: ${base.palette.interactive};\n    }\n  `;\n});\n\nStyledDialPad.defaultProps = defaultThemeProp;\n\nconst DialPad: FunctionComponent<DialPadProps & ForwardProps> = forwardRef(\n  (\n    {\n      onCallButtonClick,\n      onDialButtonClick: onDialButtonClickProp,\n      mode\n    }: PropsWithoutRef<DialPadProps>,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    const t = useI18n();\n    const [number, setNumber] = useState('');\n\n    const onDialButtonClick = useCallback(\n      (charCode: number) => {\n        setNumber((prevNumber: string) => {\n          if (charCode === 127) return prevNumber.slice(0, -1);\n          return prevNumber + String.fromCharCode(charCode);\n        });\n        onDialButtonClickProp?.(charCode);\n      },\n      [onDialButtonClickProp]\n    );\n\n    return (\n      <StyledDialPad ref={ref}>\n        <Flex container={{ alignItems: 'center', justify: 'center', itemGap: 1 }}>\n          <Input\n            value={number}\n            onChange={(e: ChangeEvent<HTMLInputElement>) => setNumber(e.target.value)}\n            aria-label={t('dial_pad_phone_number_input_label')}\n            readOnly={mode === 'DTMF'}\n          />\n          {mode !== 'DTMF' && onCallButtonClick && (\n            <Button\n              variant='primary'\n              onClick={() => onCallButtonClick?.(number)}\n              aria-label={t('dial_pad_call_button_label', [number])}\n              disabled={number.length === 0}\n            >\n              {t('dial_pad_call_button_label')}\n            </Button>\n          )}\n        </Flex>\n        <DialPadKeyboard onDialButtonClick={onDialButtonClick} mode={mode} />\n      </StyledDialPad>\n    );\n  }\n);\n\nexport default DialPad;\n"]}

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

@@ -0,0 +1,10 @@
+import { FunctionComponent } from 'react';
+import { DialPadProps } from './DialPad';
+interface DialPadDialogProps {
+    target: HTMLElement | null;
+    onClose: () => void;
+    onDialButtonClick: DialPadProps['onDialButtonClick'];
+}
+declare const DialPadDialog: FunctionComponent<DialPadDialogProps>;
+export default DialPadDialog;
+//# sourceMappingURL=DialPadDialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DialPadDialog.d.ts","sourceRoot":"","sources":["../../../src/components/DialPad/DialPadDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAqB,MAAM,OAAO,CAAC;AAiB7D,OAAgB,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAElD,UAAU,kBAAkB;IAC1B,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,iBAAiB,EAAE,YAAY,CAAC,mBAAmB,CAAC,CAAC;CACtD;AAED,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,CAoDxD,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/DialPad/DialPadDialog.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useEffect } from 'react';
+import { Button, Card, CardContent, CardHeader, getFocusables, Icon, Popover, Text, useEscape, useFocusTrap, useI18n, useOuterEvent } from '@pega/cosmos-react-core';
+import DialPad from './DialPad';
+const DialPadDialog = ({ target, onClose: onCloseProp, onDialButtonClick }) => {
+    const t = useI18n();
+    const popoverRef = useRef(null);
+    const onClose = () => {
+        onCloseProp();
+        target?.focus();
+    };
+    useOuterEvent('mousedown', [popoverRef], onClose);
+    useEscape(onClose, popoverRef);
+    useFocusTrap(popoverRef);
+    useEffect(() => {
+        getFocusables(popoverRef)[0]?.focus();
+    }, []);
+    return (_jsx(Popover, { target: target, ref: popoverRef, placement: 'top-end', modifiers: [
+            {
+                name: 'flip',
+                options: {
+                    fallbackPlacements: ['bottom-end', 'left', 'right']
+                }
+            }
+        ], heading: t('call_panel_send_dtmf_heading'), children: _jsxs(Card, { children: [_jsx(CardHeader, { actions: _jsx(Button, { icon: true, variant: 'simple', "aria-label": t('close'), onClick: onClose, children: _jsx(Icon, { name: 'times' }) }), children: _jsx(Text, { variant: 'h3', children: t('call_panel_send_dtmf_heading') }) }), _jsx(CardContent, { children: _jsx(DialPad, { onDialButtonClick: onDialButtonClick, mode: 'DTMF' }) })] }) }));
+};
+export default DialPadDialog;
+//# sourceMappingURL=DialPadDialog.js.map

package/lib/components/DialPad/DialPadDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialPadDialog.js","sourceRoot":"","sources":["../../../src/components/DialPad/DialPadDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EACL,MAAM,EACN,IAAI,EACJ,WAAW,EACX,UAAU,EACV,aAAa,EACb,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,SAAS,EACT,YAAY,EACZ,OAAO,EACP,aAAa,EACd,MAAM,yBAAyB,CAAC;AAEjC,OAAO,OAAyB,MAAM,WAAW,CAAC;AAQlD,MAAM,aAAa,GAA0C,CAAC,EAC5D,MAAM,EACN,OAAO,EAAE,WAAW,EACpB,iBAAiB,EACE,EAAE,EAAE;IACvB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEhD,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,WAAW,EAAE,CAAC;QACd,MAAM,EAAE,KAAK,EAAE,CAAC;IAClB,CAAC,CAAC;IAEF,aAAa,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC,CAAC;IAClD,SAAS,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;IAC/B,YAAY,CAAC,UAAU,CAAC,CAAC;IAEzB,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;IACxC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,KAAC,OAAO,IACN,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,UAAU,EACf,SAAS,EAAC,SAAS,EACnB,SAAS,EAAE;YACT;gBACE,IAAI,EAAE,MAAM;gBACZ,OAAO,EAAE;oBACP,kBAAkB,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,OAAO,CAAC;iBACpD;aACF;SACF,EACD,OAAO,EAAE,CAAC,CAAC,8BAA8B,CAAC,YAE1C,MAAC,IAAI,eACH,KAAC,UAAU,IACT,OAAO,EACL,KAAC,MAAM,IAAC,IAAI,QAAC,OAAO,EAAC,QAAQ,gBAAa,CAAC,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,OAAO,YACpE,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,YAGX,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,8BAA8B,CAAC,GAAQ,GAClD,EACb,KAAC,WAAW,cACV,KAAC,OAAO,IAAC,iBAAiB,EAAE,iBAAiB,EAAE,IAAI,EAAC,MAAM,GAAG,GACjD,IACT,GACC,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { FunctionComponent, useRef, useEffect } from 'react';\n\nimport {\n  Button,\n  Card,\n  CardContent,\n  CardHeader,\n  getFocusables,\n  Icon,\n  Popover,\n  Text,\n  useEscape,\n  useFocusTrap,\n  useI18n,\n  useOuterEvent\n} from '@pega/cosmos-react-core';\n\nimport DialPad, { DialPadProps } from './DialPad';\n\ninterface DialPadDialogProps {\n  target: HTMLElement | null;\n  onClose: () => void;\n  onDialButtonClick: DialPadProps['onDialButtonClick'];\n}\n\nconst DialPadDialog: FunctionComponent<DialPadDialogProps> = ({\n  target,\n  onClose: onCloseProp,\n  onDialButtonClick\n}: DialPadDialogProps) => {\n  const t = useI18n();\n  const popoverRef = useRef<HTMLDivElement>(null);\n\n  const onClose = () => {\n    onCloseProp();\n    target?.focus();\n  };\n\n  useOuterEvent('mousedown', [popoverRef], onClose);\n  useEscape(onClose, popoverRef);\n  useFocusTrap(popoverRef);\n\n  useEffect(() => {\n    getFocusables(popoverRef)[0]?.focus();\n  }, []);\n\n  return (\n    <Popover\n      target={target}\n      ref={popoverRef}\n      placement='top-end'\n      modifiers={[\n        {\n          name: 'flip',\n          options: {\n            fallbackPlacements: ['bottom-end', 'left', 'right']\n          }\n        }\n      ]}\n      heading={t('call_panel_send_dtmf_heading')}\n    >\n      <Card>\n        <CardHeader\n          actions={\n            <Button icon variant='simple' aria-label={t('close')} onClick={onClose}>\n              <Icon name='times' />\n            </Button>\n          }\n        >\n          <Text variant='h3'>{t('call_panel_send_dtmf_heading')}</Text>\n        </CardHeader>\n        <CardContent>\n          <DialPad onDialButtonClick={onDialButtonClick} mode='DTMF' />\n        </CardContent>\n      </Card>\n    </Popover>\n  );\n};\n\nexport default DialPadDialog;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"DialPadKeyboard.d.ts","sourceRoot":"","sources":["../../../src/components/DialPad/DialPadKeyboard.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,YAAY,EAAQ,cAAc,EAAyB,MAAM,yBAAyB,CAAC;AAOpG,oBAAY,mBAAmB,GAAG,SAAS,GAAG,MAAM,CAAC;AAErD,MAAM,WAAW,oBAAqB,SAAQ,cAAc;IAC1D,0CAA0C;IAC1C,iBAAiB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,6BAA6B;IAC7B,IAAI,CAAC,EAAE,mBAAmB,CAAC;CAC5B;AAED,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,GAAG,YAAY,CAgJ3E,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"DialPadKeyboard.d.ts","sourceRoot":"","sources":["../../../src/components/DialPad/DialPadKeyboard.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,YAAY,EAAQ,cAAc,EAAyB,MAAM,yBAAyB,CAAC;AAOpG,oBAAY,mBAAmB,GAAG,SAAS,GAAG,MAAM,CAAC;AAErD,MAAM,WAAW,oBAAqB,SAAQ,cAAc;IAC1D,0CAA0C;IAC1C,iBAAiB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,6BAA6B;IAC7B,IAAI,CAAC,EAAE,mBAAmB,CAAC;CAC5B;AAED,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,GAAG,YAAY,CAiJ3E,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/DialPad/DialPadKeyboard.js

@@ -78,7 +78,7 @@ const DialPadKeyboard = forwardRef(({ onDialButtonClick, mode = 'default' }, ref
             if (mode === 'default' || (mode === 'DTMF' && index < 4)) {
                 return (
                 // eslint-disable-next-line react/no-array-index-key
-                _jsx("div", { role: 'row', children: row.map((dialButton) => dialButton.alt === '+' ? (_jsxs(StyledDialButton, { role: 'gridcell', tabIndex: -1, ref: dialButton.ref, value: dialButton.keyCode, ...zeroButtonLongPress, children: [dialButton.sign && _jsx("span", { children: dialButton.sign }), dialButton.alt && _jsx("span", { children: dialButton.alt })] }, dialButton.keyCode)) : (_jsxs(StyledDialButton, { role: 'gridcell', onClick: () => onDialButtonClick(dialButton.keyCode), onKeyDown: handleEnterEvent, tabIndex: dialButton.sign === '1' ? 0 : -1, "aria-label": dialButton.icon ? dialButton.icon : undefined, ref: dialButton.ref, value: dialButton.keyCode, children: [dialButton.sign && _jsx("span", { children: dialButton.sign }), dialButton.alt && _jsx("span", { children: dialButton.alt }), dialButton.special && _jsx(StyledSpecial, { children: dialButton.special }), dialButton.icon && _jsx(Icon, { name: dialButton.icon })] }, dialButton.keyCode))) }, `row-${index}`));
+                _jsx("div", { role: 'row', children: row.map((dialButton) => dialButton.alt === '+' ? (_jsxs(StyledDialButton, { role: 'gridcell', tabIndex: -1, ref: dialButton.ref, value: dialButton.keyCode, ...zeroButtonLongPress, children: [dialButton.sign && _jsx("span", { children: dialButton.sign }), dialButton.alt && _jsx("span", { children: dialButton.alt })] }, dialButton.keyCode)) : (_jsxs(StyledDialButton, { type: 'button', role: 'gridcell', onClick: () => onDialButtonClick(dialButton.keyCode), onKeyDown: handleEnterEvent, tabIndex: dialButton.sign === '1' ? 0 : -1, "aria-label": dialButton.icon ? dialButton.icon : undefined, ref: dialButton.ref, value: dialButton.keyCode, children: [dialButton.sign && _jsx("span", { children: dialButton.sign }), dialButton.alt && _jsx("span", { children: dialButton.alt }), dialButton.special && _jsx(StyledSpecial, { children: dialButton.special }), dialButton.icon && _jsx(Icon, { name: dialButton.icon })] }, dialButton.keyCode))) }, `row-${index}`));
             }
             return undefined;
         }) }));

package/lib/components/DialPad/DialPadKeyboard.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialPadKeyboard.js","sourceRoot":"","sources":["../../../src/components/DialPad/DialPadKeyboard.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  KeyboardEvent,\n  forwardRef,\n  useRef,\n  useCallback\n} from 'react';\n\nimport { ForwardProps, Icon, NoChildrenProp, useI18n, useLongPress } from '@pega/cosmos-react-core';\n\nimport { StyledDialButton, StyledDialPadKeyboard, StyledSpecial } from './DialPadKeyboard.styles';\nimport { dtmfGraph, defaultGraph, defaultButtonGrid, dtmfButtonGrid } from './KeyboardNavigation';\nimport { Index, NavigationGraphElement } from './DialPad.types';\nimport { getDialButtonIndex, isNavigationEvent } from './utils';\n\nexport type DialPadKeyboardMode = 'default' | 'DTMF';\n\nexport interface DialPadKeyboardProps extends NoChildrenProp {\n  /** Callback fired on dial button click */\n  onDialButtonClick: (charCode: number) => void;\n  /** Dial Pad Keyboard mode */\n  mode?: DialPadKeyboardMode;\n}\n\nconst DialPadKeyboard: FunctionComponent<DialPadKeyboardProps & ForwardProps> = forwardRef(\n  (\n    { onDialButtonClick, mode = 'default' }: PropsWithoutRef<DialPadKeyboardProps>,\n    ref: Ref<HTMLElement>\n  ) => {\n    const buttonNavGraph = mode === 'DTMF' ? dtmfGraph : defaultGraph;\n    const buttonGrid = mode === 'DTMF' ? dtmfButtonGrid : defaultButtonGrid;\n\n    const t = useI18n();\n    const zeroButtonLongPress = useLongPress<HTMLButtonElement>(\n      () => onDialButtonClick(buttonNavGraph[10].altKeyCode || 43),\n      () => onDialButtonClick(buttonNavGraph[10].keyCode)\n    );\n    // This is not a violation of the rules, as the array length is constant and order the always the same.\n    buttonNavGraph.forEach(element => {\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      element.ref = useRef<HTMLButtonElement>(null);\n    });\n\n    const handleDialButtonEvent = (e: React.KeyboardEvent<HTMLButtonElement>, index: number) => {\n      e.preventDefault();\n      e.stopPropagation();\n      const buttonEl = buttonNavGraph[index];\n      if (!buttonEl || (mode === 'DTMF' && index === 12)) return;\n      buttonEl.ref?.current?.focus();\n      onDialButtonClick(buttonEl.keyCode);\n    };\n\n    const handlePlusDialButton = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n      e.preventDefault();\n      e.stopPropagation();\n      const buttonEl = buttonNavGraph[10];\n      if (!buttonEl || !buttonEl.altKeyCode) return;\n      buttonEl.ref?.current?.focus();\n      onDialButtonClick(buttonEl.altKeyCode);\n    };\n\n    const handleEnterEvent = useCallback(\n      (e: React.KeyboardEvent<HTMLButtonElement>) => {\n        if (e.key === 'Enter') {\n          e.preventDefault();\n          onDialButtonClick(Number((e.target as HTMLButtonElement).value));\n        }\n      },\n      [onDialButtonClick]\n    );\n\n    const findButtonInGraph = (e: React.KeyboardEvent<HTMLElement>) => {\n      return buttonNavGraph.find(\n        el => el.keyCode === Number((e.target as HTMLButtonElement).value)\n      );\n    };\n\n    const getTargetIndexOnNavigationEvent = (\n      btnEl: NavigationGraphElement,\n      e: React.KeyboardEvent<HTMLButtonElement>\n    ): Index | undefined => {\n      return {\n        ArrowUp: btnEl.up,\n        ArrowLeft: btnEl.left,\n        ArrowDown: btnEl.down,\n        ArrowRight: btnEl.right\n      }[e.key];\n    };\n\n    const handleNavigationEvent = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n      e.preventDefault();\n      const btnEl = findButtonInGraph(e);\n      if (!btnEl) return;\n      const targetIndex = getTargetIndexOnNavigationEvent(btnEl, e);\n      if (targetIndex !== undefined) buttonNavGraph[targetIndex].ref?.current?.focus();\n    };\n\n    const handleKeyboardNavigation = useCallback(\n      (e: KeyboardEvent<HTMLButtonElement>) => {\n        const index = getDialButtonIndex(e);\n        if (index !== -1) {\n          handleDialButtonEvent(e, index);\n        } else if (e.key === '+') {\n          handlePlusDialButton(e);\n        } else if (isNavigationEvent(e)) {\n          handleNavigationEvent(e);\n        }\n      },\n      [onDialButtonClick]\n    );\n\n    return (\n      <StyledDialPadKeyboard\n        ref={ref}\n        onKeyDown={handleKeyboardNavigation}\n        dir='ltr'\n        role='grid'\n        aria-label={t('dial_pad_keyboard')}\n        container={{\n          cols: '1fr',\n          rowGap: 1,\n          justifyItems: 'center'\n        }}\n      >\n        {buttonGrid.map((row: NavigationGraphElement[], index: number) => {\n          if (mode === 'default' || (mode === 'DTMF' && index < 4)) {\n            return (\n              // eslint-disable-next-line react/no-array-index-key\n              <div role='row' key={`row-${index}`}>\n                {row.map((dialButton: NavigationGraphElement) =>\n                  dialButton.alt === '+' ? (\n                    <StyledDialButton\n                      key={dialButton.keyCode}\n                      role='gridcell'\n                      tabIndex={-1}\n                      ref={dialButton.ref}\n                      value={dialButton.keyCode}\n                      {...zeroButtonLongPress}\n                    >\n                      {dialButton.sign && <span>{dialButton.sign}</span>}\n                      {dialButton.alt && <span>{dialButton.alt}</span>}\n                    </StyledDialButton>\n                  ) : (\n                    <StyledDialButton\n                      key={dialButton.keyCode}\n                      role='gridcell'\n                      onClick={() => onDialButtonClick(dialButton.keyCode)}\n                      onKeyDown={handleEnterEvent}\n                      tabIndex={dialButton.sign === '1' ? 0 : -1}\n                      aria-label={dialButton.icon ? dialButton.icon : undefined}\n                      ref={dialButton.ref}\n                      value={dialButton.keyCode}\n                    >\n                      {dialButton.sign && <span>{dialButton.sign}</span>}\n                      {dialButton.alt && <span>{dialButton.alt}</span>}\n                      {dialButton.special && <StyledSpecial>{dialButton.special}</StyledSpecial>}\n                      {dialButton.icon && <Icon name={dialButton.icon} />}\n                    </StyledDialButton>\n                  )\n                )}\n              </div>\n            );\n          }\n          return undefined;\n        })}\n      </StyledDialPadKeyboard>\n    );\n  }\n);\n\nexport default DialPadKeyboard;\n"]}
+{"version":3,"file":"DialPadKeyboard.js","sourceRoot":"","sources":["../../../src/components/DialPad/DialPadKeyboard.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  KeyboardEvent,\n  forwardRef,\n  useRef,\n  useCallback\n} from 'react';\n\nimport { ForwardProps, Icon, NoChildrenProp, useI18n, useLongPress } from '@pega/cosmos-react-core';\n\nimport { StyledDialButton, StyledDialPadKeyboard, StyledSpecial } from './DialPadKeyboard.styles';\nimport { dtmfGraph, defaultGraph, defaultButtonGrid, dtmfButtonGrid } from './KeyboardNavigation';\nimport { Index, NavigationGraphElement } from './DialPad.types';\nimport { getDialButtonIndex, isNavigationEvent } from './utils';\n\nexport type DialPadKeyboardMode = 'default' | 'DTMF';\n\nexport interface DialPadKeyboardProps extends NoChildrenProp {\n  /** Callback fired on dial button click */\n  onDialButtonClick: (charCode: number) => void;\n  /** Dial Pad Keyboard mode */\n  mode?: DialPadKeyboardMode;\n}\n\nconst DialPadKeyboard: FunctionComponent<DialPadKeyboardProps & ForwardProps> = forwardRef(\n  (\n    { onDialButtonClick, mode = 'default' }: PropsWithoutRef<DialPadKeyboardProps>,\n    ref: Ref<HTMLElement>\n  ) => {\n    const buttonNavGraph = mode === 'DTMF' ? dtmfGraph : defaultGraph;\n    const buttonGrid = mode === 'DTMF' ? dtmfButtonGrid : defaultButtonGrid;\n\n    const t = useI18n();\n    const zeroButtonLongPress = useLongPress<HTMLButtonElement>(\n      () => onDialButtonClick(buttonNavGraph[10].altKeyCode || 43),\n      () => onDialButtonClick(buttonNavGraph[10].keyCode)\n    );\n    // This is not a violation of the rules, as the array length is constant and order the always the same.\n    buttonNavGraph.forEach(element => {\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      element.ref = useRef<HTMLButtonElement>(null);\n    });\n\n    const handleDialButtonEvent = (e: React.KeyboardEvent<HTMLButtonElement>, index: number) => {\n      e.preventDefault();\n      e.stopPropagation();\n      const buttonEl = buttonNavGraph[index];\n      if (!buttonEl || (mode === 'DTMF' && index === 12)) return;\n      buttonEl.ref?.current?.focus();\n      onDialButtonClick(buttonEl.keyCode);\n    };\n\n    const handlePlusDialButton = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n      e.preventDefault();\n      e.stopPropagation();\n      const buttonEl = buttonNavGraph[10];\n      if (!buttonEl || !buttonEl.altKeyCode) return;\n      buttonEl.ref?.current?.focus();\n      onDialButtonClick(buttonEl.altKeyCode);\n    };\n\n    const handleEnterEvent = useCallback(\n      (e: React.KeyboardEvent<HTMLButtonElement>) => {\n        if (e.key === 'Enter') {\n          e.preventDefault();\n          onDialButtonClick(Number((e.target as HTMLButtonElement).value));\n        }\n      },\n      [onDialButtonClick]\n    );\n\n    const findButtonInGraph = (e: React.KeyboardEvent<HTMLElement>) => {\n      return buttonNavGraph.find(\n        el => el.keyCode === Number((e.target as HTMLButtonElement).value)\n      );\n    };\n\n    const getTargetIndexOnNavigationEvent = (\n      btnEl: NavigationGraphElement,\n      e: React.KeyboardEvent<HTMLButtonElement>\n    ): Index | undefined => {\n      return {\n        ArrowUp: btnEl.up,\n        ArrowLeft: btnEl.left,\n        ArrowDown: btnEl.down,\n        ArrowRight: btnEl.right\n      }[e.key];\n    };\n\n    const handleNavigationEvent = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n      e.preventDefault();\n      const btnEl = findButtonInGraph(e);\n      if (!btnEl) return;\n      const targetIndex = getTargetIndexOnNavigationEvent(btnEl, e);\n      if (targetIndex !== undefined) buttonNavGraph[targetIndex].ref?.current?.focus();\n    };\n\n    const handleKeyboardNavigation = useCallback(\n      (e: KeyboardEvent<HTMLButtonElement>) => {\n        const index = getDialButtonIndex(e);\n        if (index !== -1) {\n          handleDialButtonEvent(e, index);\n        } else if (e.key === '+') {\n          handlePlusDialButton(e);\n        } else if (isNavigationEvent(e)) {\n          handleNavigationEvent(e);\n        }\n      },\n      [onDialButtonClick]\n    );\n\n    return (\n      <StyledDialPadKeyboard\n        ref={ref}\n        onKeyDown={handleKeyboardNavigation}\n        dir='ltr'\n        role='grid'\n        aria-label={t('dial_pad_keyboard')}\n        container={{\n          cols: '1fr',\n          rowGap: 1,\n          justifyItems: 'center'\n        }}\n      >\n        {buttonGrid.map((row: NavigationGraphElement[], index: number) => {\n          if (mode === 'default' || (mode === 'DTMF' && index < 4)) {\n            return (\n              // eslint-disable-next-line react/no-array-index-key\n              <div role='row' key={`row-${index}`}>\n                {row.map((dialButton: NavigationGraphElement) =>\n                  dialButton.alt === '+' ? (\n                    <StyledDialButton\n                      key={dialButton.keyCode}\n                      role='gridcell'\n                      tabIndex={-1}\n                      ref={dialButton.ref}\n                      value={dialButton.keyCode}\n                      {...zeroButtonLongPress}\n                    >\n                      {dialButton.sign && <span>{dialButton.sign}</span>}\n                      {dialButton.alt && <span>{dialButton.alt}</span>}\n                    </StyledDialButton>\n                  ) : (\n                    <StyledDialButton\n                      key={dialButton.keyCode}\n                      type='button'\n                      role='gridcell'\n                      onClick={() => onDialButtonClick(dialButton.keyCode)}\n                      onKeyDown={handleEnterEvent}\n                      tabIndex={dialButton.sign === '1' ? 0 : -1}\n                      aria-label={dialButton.icon ? dialButton.icon : undefined}\n                      ref={dialButton.ref}\n                      value={dialButton.keyCode}\n                    >\n                      {dialButton.sign && <span>{dialButton.sign}</span>}\n                      {dialButton.alt && <span>{dialButton.alt}</span>}\n                      {dialButton.special && <StyledSpecial>{dialButton.special}</StyledSpecial>}\n                      {dialButton.icon && <Icon name={dialButton.icon} />}\n                    </StyledDialButton>\n                  )\n                )}\n              </div>\n            );\n          }\n          return undefined;\n        })}\n      </StyledDialPadKeyboard>\n    );\n  }\n);\n\nexport default DialPadKeyboard;\n"]}

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

@@ -1,3 +1,4 @@
 export { default } from './DialPad';
+export { default as DialPadDialog } from './DialPadDialog';
 export { DialPadKeyboardProps } from './DialPadKeyboard';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DialPad/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DialPad/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC"}

package/lib/components/DialPad/index.js

@@ -1,2 +1,3 @@
 export { default } from './DialPad';
+export { default as DialPadDialog } from './DialPadDialog';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/DialPad/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC","sourcesContent":["export { default } from './DialPad';\nexport { DialPadKeyboardProps } from './DialPadKeyboard';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/DialPad/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC","sourcesContent":["export { default } from './DialPad';\nexport { default as DialPadDialog } from './DialPadDialog';\nexport { DialPadKeyboardProps } from './DialPadKeyboard';\n"]}

package/lib/components/IntelligentGuidance/IntelligentGuidance.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IntelligentGuidance.styles.d.ts","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.styles.ts"],"names":[],"mappings":";AAwBA,eAAO,MAAM,6BAA6B,2NA8ExC,CAAC;AAIH,eAAO,MAAM,+BAA+B,qOAiB1C,CAAC;AAaH,MAAM,WAAW,8BAA8B;IAC7C,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,yBAAyB,qIA8BrC,CAAC"}
+{"version":3,"file":"IntelligentGuidance.styles.d.ts","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.styles.ts"],"names":[],"mappings":";AAuBA,eAAO,MAAM,6BAA6B,2NA8ExC,CAAC;AAIH,eAAO,MAAM,+BAA+B,qOAiB1C,CAAC;AAaH,MAAM,WAAW,8BAA8B;IAC7C,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,yBAAyB,qIAgCrC,CAAC"}

package/lib/components/IntelligentGuidance/IntelligentGuidance.styles.js

@@ -4,7 +4,6 @@ import { Button, defaultThemeProp, StyledButton, StyledCard, StyledFlex, StyledI
 import { StyledCount } from '@pega/cosmos-react-core/lib/components/Badges/Count';
 import { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';
 import { StyledSummaryListContent } from '@pega/cosmos-react-core/lib/components/SummaryList/SummaryList';
-const navWidth = '4rem';
 const itemIconSize = '2rem';
 export const StyledIntelligentGuidanceList = styled(SummaryList)(({ theme }) => {
     const borderColor = tryCatch(() => lighten(0.1, theme.components['app-shell'].nav['background-color']));
@@ -112,7 +111,9 @@ const slideIn = keyframes `
 export const StyledIntelligentGuidance = styled.div(({ theme, isCollapsed }) => {
     return css `
       position: fixed;
-      inset-inline-start: calc(2 * ${theme.base.spacing} + ${navWidth});
+      inset-inline-start: calc(2 * ${theme.base.spacing} + var(--appshell-horizontal-offset, 0rem));
+      transition: inset-inline-start ${theme.base.animation.speed}
+        ${theme.base.animation.timing.ease};
       bottom: ${isCollapsed ? `calc(2 * ${theme.base.spacing}) ` : 0};
       @media (min-width: ${theme.base.breakpoints.md}) {
         bottom: 0;

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

@@ -1 +1 @@
-{"version":3,"file":"IntelligentGuidance.styles.js","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css, keyframes } from 'styled-components';\nimport { lighten } from 'polished';\n\nimport {\n  Button,\n  defaultThemeProp,\n  StyledButton,\n  StyledCard,\n  StyledFlex,\n  StyledIcon,\n  StyledEmptyState,\n  SummaryList,\n  StyledText,\n  tryCatch,\n  StyledSummaryItem,\n  StyledVisual\n} from '@pega/cosmos-react-core';\nimport { StyledCount } from '@pega/cosmos-react-core/lib/components/Badges/Count';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledSummaryListContent } from '@pega/cosmos-react-core/lib/components/SummaryList/SummaryList';\n\nconst navWidth = '4rem';\nconst itemIconSize = '2rem';\n\nexport const StyledIntelligentGuidanceList = styled(SummaryList)(({ theme }) => {\n  const borderColor = tryCatch(() =>\n    lighten(0.1, theme.components['app-shell'].nav['background-color'])\n  );\n  const hoverColor = tryCatch(() =>\n    lighten(0.05, theme.components['app-shell'].nav['background-color'])\n  );\n  return css`\n    min-width: 20rem;\n    max-width: 20rem;\n    color: ${theme.base.palette.light};\n    overflow: hidden;\n    box-shadow: ${theme.base.shadow.low};\n    @media (min-width: ${theme.base.breakpoints.lg}) {\n      min-width: 23rem;\n      max-width: 23rem;\n    }\n    &:not(& &) {\n      background-color: ${theme.components['app-shell'].nav['background-color']};\n    }\n    ${StyledCardHeader} {\n      &:not(${StyledCard} ${StyledCard} > &) {\n        padding: ${theme.base.spacing};\n      }\n      ${StyledFlex} > ${StyledIcon} {\n        width: ${itemIconSize};\n        height: ${itemIconSize};\n        padding: calc(0.75 * ${theme.base.spacing});\n        border-radius: calc(3 * ${theme.base['border-radius']});\n        background-color: ${theme.base.palette.success};\n      }\n    }\n    ${StyledSummaryListContent} {\n      &:not(${StyledCard} ${StyledCard} > &) {\n        padding: 0;\n      }\n    }\n    ${StyledButton}:enabled:focus {\n      box-shadow: ${theme.base.shadow['focus-inverted']};\n    }\n    ${StyledSummaryItem} {\n      padding: ${theme.base.spacing};\n      border-top: ${theme.components.button['border-width']} solid ${borderColor};\n      outline: none;\n      ${StyledVisual} ${StyledIcon} {\n        width: ${itemIconSize};\n        height: ${itemIconSize};\n        padding: calc(0.75 * ${theme.base.spacing});\n      }\n      ${StyledButton} {\n        visibility: hidden;\n      }\n      &:not(:last-child) {\n        border-bottom: none;\n      }\n      &:hover {\n        background-color: ${hoverColor};\n        cursor: pointer;\n      }\n      &:hover,\n      &:focus,\n      &:focus-within {\n        ${StyledButton} {\n          visibility: visible;\n        }\n      }\n      &:enabled:focus,\n      &:not([disabled]):focus {\n        box-shadow: inset ${theme.base.shadow['focus-inverted']};\n      }\n    }\n    ${StyledEmptyState} {\n      padding-bottom: ${theme.base.spacing};\n      ${StyledIcon}, ${StyledText} {\n        color: ${theme.base.palette.light};\n      }\n    }\n  `;\n});\n\nStyledIntelligentGuidanceList.defaultProps = defaultThemeProp;\n\nexport const StyledIntelligentGuidanceButton = styled(Button)(({ theme }) => {\n  return css`\n    box-shadow: ${theme.base.shadow.low};\n    color: ${theme.base.palette.light};\n    background-color: ${theme.base.palette.success};\n    width: 4rem;\n    height: 4rem;\n    svg {\n      width: 2.25rem;\n      height: 2.25rem;\n    }\n    ${StyledCount} {\n      position: absolute;\n      right: 0;\n      top: 0;\n    }\n  `;\n});\n\nStyledIntelligentGuidanceButton.defaultProps = defaultThemeProp;\n\nconst slideIn = keyframes`\n  0% {\n    transform: translateY(100%);\n  }\n  100% {\n    transform: translateY(0);\n  }\n`;\n\nexport interface StyledIntelligentGuidanceProps {\n  isCollapsed: boolean;\n  hasItems: boolean;\n}\n\nexport const StyledIntelligentGuidance = styled.div<StyledIntelligentGuidanceProps>(\n  ({ theme, isCollapsed }) => {\n    return css`\n      position: fixed;\n      inset-inline-start: calc(2 * ${theme.base.spacing} + ${navWidth});\n      bottom: ${isCollapsed ? `calc(2 * ${theme.base.spacing}) ` : 0};\n      @media (min-width: ${theme.base.breakpoints.md}) {\n        bottom: 0;\n      }\n      z-index: ${theme.base['z-index'].popover};\n      ${StyledIntelligentGuidanceList}:not(${StyledIntelligentGuidanceList} ${StyledIntelligentGuidanceList}) {\n        border-bottom-left-radius: 0;\n        border-bottom-right-radius: 0;\n        transition: transform calc(4 * ${theme.base.animation.speed})\n          ${theme.base.animation.timing.ease};\n        ${isCollapsed &&\n        css`\n          transform: translateY(calc(100% - var(--headerHeight)));\n        `}\n        ${StyledCardHeader} ${StyledButton} {\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      ${StyledIntelligentGuidanceButton} {\n        animation: ${slideIn} calc(4 * ${theme.base.animation.speed});\n      }\n    `;\n  }\n);\n\nStyledIntelligentGuidance.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"IntelligentGuidance.styles.js","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css, keyframes } from 'styled-components';\nimport { lighten } from 'polished';\n\nimport {\n  Button,\n  defaultThemeProp,\n  StyledButton,\n  StyledCard,\n  StyledFlex,\n  StyledIcon,\n  StyledEmptyState,\n  SummaryList,\n  StyledText,\n  tryCatch,\n  StyledSummaryItem,\n  StyledVisual\n} from '@pega/cosmos-react-core';\nimport { StyledCount } from '@pega/cosmos-react-core/lib/components/Badges/Count';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledSummaryListContent } from '@pega/cosmos-react-core/lib/components/SummaryList/SummaryList';\n\nconst itemIconSize = '2rem';\n\nexport const StyledIntelligentGuidanceList = styled(SummaryList)(({ theme }) => {\n  const borderColor = tryCatch(() =>\n    lighten(0.1, theme.components['app-shell'].nav['background-color'])\n  );\n  const hoverColor = tryCatch(() =>\n    lighten(0.05, theme.components['app-shell'].nav['background-color'])\n  );\n  return css`\n    min-width: 20rem;\n    max-width: 20rem;\n    color: ${theme.base.palette.light};\n    overflow: hidden;\n    box-shadow: ${theme.base.shadow.low};\n    @media (min-width: ${theme.base.breakpoints.lg}) {\n      min-width: 23rem;\n      max-width: 23rem;\n    }\n    &:not(& &) {\n      background-color: ${theme.components['app-shell'].nav['background-color']};\n    }\n    ${StyledCardHeader} {\n      &:not(${StyledCard} ${StyledCard} > &) {\n        padding: ${theme.base.spacing};\n      }\n      ${StyledFlex} > ${StyledIcon} {\n        width: ${itemIconSize};\n        height: ${itemIconSize};\n        padding: calc(0.75 * ${theme.base.spacing});\n        border-radius: calc(3 * ${theme.base['border-radius']});\n        background-color: ${theme.base.palette.success};\n      }\n    }\n    ${StyledSummaryListContent} {\n      &:not(${StyledCard} ${StyledCard} > &) {\n        padding: 0;\n      }\n    }\n    ${StyledButton}:enabled:focus {\n      box-shadow: ${theme.base.shadow['focus-inverted']};\n    }\n    ${StyledSummaryItem} {\n      padding: ${theme.base.spacing};\n      border-top: ${theme.components.button['border-width']} solid ${borderColor};\n      outline: none;\n      ${StyledVisual} ${StyledIcon} {\n        width: ${itemIconSize};\n        height: ${itemIconSize};\n        padding: calc(0.75 * ${theme.base.spacing});\n      }\n      ${StyledButton} {\n        visibility: hidden;\n      }\n      &:not(:last-child) {\n        border-bottom: none;\n      }\n      &:hover {\n        background-color: ${hoverColor};\n        cursor: pointer;\n      }\n      &:hover,\n      &:focus,\n      &:focus-within {\n        ${StyledButton} {\n          visibility: visible;\n        }\n      }\n      &:enabled:focus,\n      &:not([disabled]):focus {\n        box-shadow: inset ${theme.base.shadow['focus-inverted']};\n      }\n    }\n    ${StyledEmptyState} {\n      padding-bottom: ${theme.base.spacing};\n      ${StyledIcon}, ${StyledText} {\n        color: ${theme.base.palette.light};\n      }\n    }\n  `;\n});\n\nStyledIntelligentGuidanceList.defaultProps = defaultThemeProp;\n\nexport const StyledIntelligentGuidanceButton = styled(Button)(({ theme }) => {\n  return css`\n    box-shadow: ${theme.base.shadow.low};\n    color: ${theme.base.palette.light};\n    background-color: ${theme.base.palette.success};\n    width: 4rem;\n    height: 4rem;\n    svg {\n      width: 2.25rem;\n      height: 2.25rem;\n    }\n    ${StyledCount} {\n      position: absolute;\n      right: 0;\n      top: 0;\n    }\n  `;\n});\n\nStyledIntelligentGuidanceButton.defaultProps = defaultThemeProp;\n\nconst slideIn = keyframes`\n  0% {\n    transform: translateY(100%);\n  }\n  100% {\n    transform: translateY(0);\n  }\n`;\n\nexport interface StyledIntelligentGuidanceProps {\n  isCollapsed: boolean;\n  hasItems: boolean;\n}\n\nexport const StyledIntelligentGuidance = styled.div<StyledIntelligentGuidanceProps>(\n  ({ theme, isCollapsed }) => {\n    return css`\n      position: fixed;\n      inset-inline-start: calc(2 * ${theme.base.spacing} + var(--appshell-horizontal-offset, 0rem));\n      transition: inset-inline-start ${theme.base.animation.speed}\n        ${theme.base.animation.timing.ease};\n      bottom: ${isCollapsed ? `calc(2 * ${theme.base.spacing}) ` : 0};\n      @media (min-width: ${theme.base.breakpoints.md}) {\n        bottom: 0;\n      }\n      z-index: ${theme.base['z-index'].popover};\n      ${StyledIntelligentGuidanceList}:not(${StyledIntelligentGuidanceList} ${StyledIntelligentGuidanceList}) {\n        border-bottom-left-radius: 0;\n        border-bottom-right-radius: 0;\n        transition: transform calc(4 * ${theme.base.animation.speed})\n          ${theme.base.animation.timing.ease};\n        ${isCollapsed &&\n        css`\n          transform: translateY(calc(100% - var(--headerHeight)));\n        `}\n        ${StyledCardHeader} ${StyledButton} {\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      ${StyledIntelligentGuidanceButton} {\n        animation: ${slideIn} calc(4 * ${theme.base.animation.speed});\n      }\n    `;\n  }\n);\n\nStyledIntelligentGuidance.defaultProps = defaultThemeProp;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"InteractionNotification.d.ts","sourceRoot":"","sources":["../../../src/components/InteractionNotification/InteractionNotification.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5E,OAAO,EAQL,WAAW,EACX,YAAY,EAWZ,mBAAmB,EAEnB,cAAc,EACf,MAAM,yBAAyB,CAAC;AAKjC,MAAM,WAAW,4BAA6B,SAAQ,cAAc;IAClE,wBAAwB;IACxB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,uCAAuC;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,WAAW,EAAE,MAAM,CAAC;IACpB,wFAAwF;IACxF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oDAAoD;IACpD,MAAM,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1D,iFAAiF;IACjF,MAAM,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACvC,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAqED,QAAA,MAAM,uBAAuB,EAAE,iBAAiB,CAAC,4BAA4B,GAAG,YAAY,CA6CzF,CAAC;AAEJ,eAAe,uBAAuB,CAAC"}
+{"version":3,"file":"InteractionNotification.d.ts","sourceRoot":"","sources":["../../../src/components/InteractionNotification/InteractionNotification.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5E,OAAO,EAQL,WAAW,EACX,YAAY,EAWZ,mBAAmB,EAEnB,cAAc,EACf,MAAM,yBAAyB,CAAC;AAKjC,MAAM,WAAW,4BAA6B,SAAQ,cAAc;IAClE,wBAAwB;IACxB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,uCAAuC;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,WAAW,EAAE,MAAM,CAAC;IACpB,wFAAwF;IACxF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oDAAoD;IACpD,MAAM,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1D,iFAAiF;IACjF,MAAM,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACvC,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAqED,QAAA,MAAM,uBAAuB,EAAE,iBAAiB,CAAC,4BAA4B,GAAG,YAAY,CA+CzF,CAAC;AAEJ,eAAe,uBAAuB,CAAC"}

package/lib/components/InteractionNotification/InteractionNotification.js

@@ -72,7 +72,7 @@ const StyledInteractionNotification = styled(Card)(({ theme: { base } }) => {
 StyledInteractionNotification.defaultProps = defaultThemeProp;
 const InteractionNotification = forwardRef(({ icon, title, primaryText, secondaryText, status, fields, onAccept }, ref) => {
     const t = useI18n();
-    return (_jsxs(StyledInteractionNotification, { ref: ref, children: [_jsx(CardHeader, { actions: _jsx(Button, { variant: 'primary', onClick: onAccept, children: t('accept') }), children: _jsx(SummaryItem, { visual: _jsx(Avatar, { shape: 'circle', size: 'm', name: title, icon: icon }), primary: title }) }), _jsx(CardContent, { children: _jsxs(Flex, { container: { direction: 'column', alignItems: 'center', gap: 1 }, children: [_jsx(Text, { variant: 'h1', children: primaryText }), secondaryText && _jsx(Text, { variant: 'secondary', children: secondaryText }), _jsx(Status, { variant: status.variant, children: status.text })] }) }), fields && fields.length !== 0 && (_jsx(CardFooter, { children: _jsx(FieldValueList, { variant: 'inline', fields: fields }) }))] }));
+    return (_jsxs(StyledInteractionNotification, { ref: ref, children: [_jsx(CardHeader, { actions: onAccept ? (_jsx(Button, { variant: 'primary', onClick: onAccept, children: t('accept') })) : undefined, children: _jsx(SummaryItem, { visual: _jsx(Avatar, { shape: 'circle', size: 'm', name: title, icon: icon }), primary: title }) }), _jsx(CardContent, { children: _jsxs(Flex, { container: { direction: 'column', alignItems: 'center', gap: 1 }, children: [_jsx(Text, { variant: 'h1', children: primaryText }), secondaryText && _jsx(Text, { variant: 'secondary', children: secondaryText }), _jsx(Status, { variant: status.variant, children: status.text })] }) }), fields && fields.length !== 0 && (_jsx(CardFooter, { children: _jsx(FieldValueList, { variant: 'inline', fields: fields }) }))] }));
 });
 export default InteractionNotification;
 //# sourceMappingURL=InteractionNotification.js.map

package/lib/components/InteractionNotification/InteractionNotification.js.map

@@ -1 +1 @@
-{"version":3,"file":"InteractionNotification.js","sourceRoot":"","sources":["../../../src/components/InteractionNotification/InteractionNotification.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Card,\n  CardContent,\n  CardHeader,\n  Status,\n  Text,\n  SummaryItem,\n  StatusProps,\n  ForwardProps,\n  defaultThemeProp,\n  Flex,\n  StyledText,\n  Avatar,\n  FieldValueList,\n  StyledFieldName,\n  CardFooter,\n  StyledFieldValueList,\n  StyledButton,\n  useI18n,\n  FieldValueListProps,\n  useDirection,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledCardFooter } from '@pega/cosmos-react-core/lib/components/Card/CardFooter';\n\nexport interface InteractionNotificationProps extends NoChildrenProp {\n  /** Ref to Component. */\n  ref?: Ref<HTMLDivElement>;\n  /** Name of the icon used in header. */\n  icon: string;\n  /** Interaction title. */\n  title: string;\n  /** Primary information of the notification. For example caller name . */\n  primaryText: string;\n  /** Secondary information of the notification. For example phone number of the caller */\n  secondaryText?: string;\n  /** Represents the current status of interaction. */\n  status: { variant: StatusProps['variant']; text: string };\n  /** Information structured as field values to be displayed below main section. */\n  fields?: FieldValueListProps['fields'];\n  /** Callback when accept button is clicked. */\n  onAccept?: () => void;\n}\n\nconst StyledInteractionNotification = styled(Card)(({ theme: { base } }) => {\n  const { rtl } = useDirection();\n  return css`\n    position: fixed;\n    inset-inline-end: 1rem;\n    inset-block-start: 4rem;\n    width: clamp(21.5rem, calc(100% - 2rem), 25rem);\n    z-index: ${base['z-index'].modal};\n    color: ${base.colors.white};\n    animation: SlideIn calc(4 * ${base.animation.speed});\n    padding: calc(0.75 * ${base.spacing}) 0;\n\n    &:not(& &) {\n      background-color: ${base.colors.slate['extra-dark']};\n    }\n\n    @keyframes SlideIn {\n      0% {\n        ${rtl\n          ? css`\n              transform: translateX(calc(-100% - 1rem));\n            `\n          : css`\n              transform: translateX(calc(100% + 1rem));\n            `}\n      }\n\n      100% {\n        transform: translateX(0);\n      }\n    }\n\n    ${StyledCardHeader} {\n      ${StyledButton} {\n        margin-inline-start: calc(2 * ${base.spacing});\n      }\n    }\n\n    ${StyledCardContent} {\n      margin: calc(2 * ${base.spacing}) 0;\n\n      ${StyledText} {\n        color: ${base.colors.white};\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        width: 100%;\n        text-align: center;\n      }\n    }\n\n    ${StyledCardFooter} {\n      ${StyledFieldValueList} {\n        border-top: solid 0.0625rem ${base.colors.gray.medium};\n        padding-top: calc(2 * ${base.spacing});\n        color: ${base.colors.white};\n\n        ${StyledFieldName} {\n          color: ${base.colors.white};\n        }\n      }\n    }\n  `;\n});\n\nStyledInteractionNotification.defaultProps = defaultThemeProp;\n\nconst InteractionNotification: FunctionComponent<InteractionNotificationProps & ForwardProps> =\n  forwardRef(\n    (\n      {\n        icon,\n        title,\n        primaryText,\n        secondaryText,\n        status,\n        fields,\n        onAccept\n      }: PropsWithoutRef<InteractionNotificationProps>,\n      ref: InteractionNotificationProps['ref']\n    ) => {\n      const t = useI18n();\n\n      return (\n        <StyledInteractionNotification ref={ref}>\n          <CardHeader\n            actions={\n              <Button variant='primary' onClick={onAccept}>\n                {t('accept')}\n              </Button>\n            }\n          >\n            <SummaryItem\n              visual={<Avatar shape='circle' size='m' name={title} icon={icon} />}\n              primary={title}\n            />\n          </CardHeader>\n          <CardContent>\n            <Flex container={{ direction: 'column', alignItems: 'center', gap: 1 }}>\n              <Text variant='h1'>{primaryText}</Text>\n              {secondaryText && <Text variant='secondary'>{secondaryText}</Text>}\n              <Status variant={status.variant}>{status.text}</Status>\n            </Flex>\n          </CardContent>\n          {fields && fields.length !== 0 && (\n            <CardFooter>\n              <FieldValueList variant='inline' fields={fields} />\n            </CardFooter>\n          )}\n        </StyledInteractionNotification>\n      );\n    }\n  );\n\nexport default InteractionNotification;\n"]}
+{"version":3,"file":"InteractionNotification.js","sourceRoot":"","sources":["../../../src/components/InteractionNotification/InteractionNotification.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Card,\n  CardContent,\n  CardHeader,\n  Status,\n  Text,\n  SummaryItem,\n  StatusProps,\n  ForwardProps,\n  defaultThemeProp,\n  Flex,\n  StyledText,\n  Avatar,\n  FieldValueList,\n  StyledFieldName,\n  CardFooter,\n  StyledFieldValueList,\n  StyledButton,\n  useI18n,\n  FieldValueListProps,\n  useDirection,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledCardFooter } from '@pega/cosmos-react-core/lib/components/Card/CardFooter';\n\nexport interface InteractionNotificationProps extends NoChildrenProp {\n  /** Ref to Component. */\n  ref?: Ref<HTMLDivElement>;\n  /** Name of the icon used in header. */\n  icon: string;\n  /** Interaction title. */\n  title: string;\n  /** Primary information of the notification. For example caller name . */\n  primaryText: string;\n  /** Secondary information of the notification. For example phone number of the caller */\n  secondaryText?: string;\n  /** Represents the current status of interaction. */\n  status: { variant: StatusProps['variant']; text: string };\n  /** Information structured as field values to be displayed below main section. */\n  fields?: FieldValueListProps['fields'];\n  /** Callback when accept button is clicked. */\n  onAccept?: () => void;\n}\n\nconst StyledInteractionNotification = styled(Card)(({ theme: { base } }) => {\n  const { rtl } = useDirection();\n  return css`\n    position: fixed;\n    inset-inline-end: 1rem;\n    inset-block-start: 4rem;\n    width: clamp(21.5rem, calc(100% - 2rem), 25rem);\n    z-index: ${base['z-index'].modal};\n    color: ${base.colors.white};\n    animation: SlideIn calc(4 * ${base.animation.speed});\n    padding: calc(0.75 * ${base.spacing}) 0;\n\n    &:not(& &) {\n      background-color: ${base.colors.slate['extra-dark']};\n    }\n\n    @keyframes SlideIn {\n      0% {\n        ${rtl\n          ? css`\n              transform: translateX(calc(-100% - 1rem));\n            `\n          : css`\n              transform: translateX(calc(100% + 1rem));\n            `}\n      }\n\n      100% {\n        transform: translateX(0);\n      }\n    }\n\n    ${StyledCardHeader} {\n      ${StyledButton} {\n        margin-inline-start: calc(2 * ${base.spacing});\n      }\n    }\n\n    ${StyledCardContent} {\n      margin: calc(2 * ${base.spacing}) 0;\n\n      ${StyledText} {\n        color: ${base.colors.white};\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        width: 100%;\n        text-align: center;\n      }\n    }\n\n    ${StyledCardFooter} {\n      ${StyledFieldValueList} {\n        border-top: solid 0.0625rem ${base.colors.gray.medium};\n        padding-top: calc(2 * ${base.spacing});\n        color: ${base.colors.white};\n\n        ${StyledFieldName} {\n          color: ${base.colors.white};\n        }\n      }\n    }\n  `;\n});\n\nStyledInteractionNotification.defaultProps = defaultThemeProp;\n\nconst InteractionNotification: FunctionComponent<InteractionNotificationProps & ForwardProps> =\n  forwardRef(\n    (\n      {\n        icon,\n        title,\n        primaryText,\n        secondaryText,\n        status,\n        fields,\n        onAccept\n      }: PropsWithoutRef<InteractionNotificationProps>,\n      ref: InteractionNotificationProps['ref']\n    ) => {\n      const t = useI18n();\n\n      return (\n        <StyledInteractionNotification ref={ref}>\n          <CardHeader\n            actions={\n              onAccept ? (\n                <Button variant='primary' onClick={onAccept}>\n                  {t('accept')}\n                </Button>\n              ) : undefined\n            }\n          >\n            <SummaryItem\n              visual={<Avatar shape='circle' size='m' name={title} icon={icon} />}\n              primary={title}\n            />\n          </CardHeader>\n          <CardContent>\n            <Flex container={{ direction: 'column', alignItems: 'center', gap: 1 }}>\n              <Text variant='h1'>{primaryText}</Text>\n              {secondaryText && <Text variant='secondary'>{secondaryText}</Text>}\n              <Status variant={status.variant}>{status.text}</Status>\n            </Flex>\n          </CardContent>\n          {fields && fields.length !== 0 && (\n            <CardFooter>\n              <FieldValueList variant='inline' fields={fields} />\n            </CardFooter>\n          )}\n        </StyledInteractionNotification>\n      );\n    }\n  );\n\nexport default InteractionNotification;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-cs",
-  "version": "3.0.0-dev.21.1",
+  "version": "3.0.0-dev.23.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.21.1",
-    "@pega/cosmos-react-dnd": "3.0.0-dev.21.1",
+    "@pega/cosmos-react-core": "3.0.0-dev.23.0",
+    "@pega/cosmos-react-dnd": "3.0.0-dev.23.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/CallHandoverForm.d.ts.map

@@ -1 +0,0 @@
-{"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,CAkI9D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/components/CallControlPanel/CallHandoverForm.js

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

@@ -1 +0,0 @@
-{"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    <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    </StyledCallHandoverForm>\n  );\n};\n\nexport default CallHandoverForm;\n"]}

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

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

package/lib/components/CallControlPanel/CalleePicker.js

@@ -1,61 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useContext, forwardRef, useEffect, useRef, useState } from 'react';
-import styled, { css } from 'styled-components';
-import { Button, CardContent, CardHeader, Flex, Icon, registerIcon, Text, TabPanel, Tabs, Card, defaultThemeProp, useI18n } from '@pega/cosmos-react-core';
-import { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';
-import { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';
-import { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';
-import * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
-import DialPad from '../DialPad/DialPad';
-import ContactsList from './ContactsList';
-registerIcon(timesIcon);
-export const ContactsContext = createContext({
-    contacts: [],
-    onFavoriteToggle: () => { }
-});
-const StyledCalleePicker = styled(Card)(({ theme }) => {
-    return css `
-    ${StyledCardHeader}, ${StyledCardContent} {
-      padding: calc(1.25 * ${theme.base.spacing}) calc(${theme.components.card.padding} * 2);
-    }
-
-    ${StyledTabPanel} {
-      height: 24rem;
-    }
-  `;
-});
-StyledCalleePicker.defaultProps = defaultThemeProp;
-const CalleePicker = forwardRef(({ heading, onClose, onCall }, ref) => {
-    const t = useI18n();
-    const [currentTab, setCurrentTab] = useState('all');
-    const tabsRef = useRef(null);
-    const { contacts, onFavoriteToggle } = useContext(ContactsContext);
-    const favorites = contacts.filter(item => item.favorite);
-    const handleTabChange = (id) => {
-        setCurrentTab(id);
-    };
-    const tabsHeaders = [
-        { id: 'all', name: t('call_panel_contacts_list_heading'), count: contacts.length },
-        {
-            id: 'favorites',
-            name: t('call_panel_contacts_favorites_heading'),
-            count: contacts.filter(item => item.favorite).length
-        },
-        { id: 'dial-pad', name: t('call_panel_contacts_dial_pad_heading') }
-    ];
-    const tabContent = (tabId) => {
-        if (tabId === 'dial-pad')
-            return _jsx(DialPad, { onCallButtonClick: onCall, mode: 'default' });
-        return (_jsx(ContactsList, { contacts: tabId === 'favorites' ? favorites : contacts, onFavoriteToggle: onFavoriteToggle, action: {
-                label: t('call_panel_contacts_call_button_label'),
-                icon: 'phone-solid',
-                callback: onCall
-            } }));
-    };
-    useEffect(() => {
-        tabsRef.current?.firstChild.focus();
-    }, []);
-    return (_jsxs(StyledCalleePicker, { ref: ref, children: [_jsx(CardHeader, { actions: _jsx(Button, { icon: true, variant: 'simple', "aria-label": t('close'), onClick: onClose, children: _jsx(Icon, { name: 'times' }) }), children: _jsx(Flex, { container: { alignItems: 'center', itemGap: 1 }, children: _jsx(Text, { variant: 'h3', children: heading }) }) }), _jsxs(CardContent, { container: { itemGap: 2 }, children: [_jsx(Tabs, { ref: tabsRef, tabs: tabsHeaders, type: 'horizontal', onTabClick: handleTabChange, currentTabId: currentTab }), _jsx(TabPanel, { tabId: currentTab, children: tabContent(currentTab) })] })] }));
-});
-export default CalleePicker;
-//# sourceMappingURL=CalleePicker.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"CalleePicker.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CalleePicker.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,aAAa,EACb,UAAU,EACV,UAAU,EAIV,SAAS,EACT,MAAM,EACN,QAAQ,EACT,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,MAAM,EACN,WAAW,EACX,UAAU,EACV,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,IAAI,EAEJ,gBAAgB,EAChB,OAAO,EACR,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,wDAAwD,CAAC;AAC1F,OAAO,EAAE,iBAAiB,EAAE,MAAM,yDAAyD,CAAC;AAC5F,OAAO,EAAE,cAAc,EAAE,MAAM,sDAAsD,CAAC;AACtF,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAE1F,OAAO,OAAO,MAAM,oBAAoB,CAAC;AAEzC,OAAO,YAAmC,MAAM,gBAAgB,CAAC;AAEjE,YAAY,CAAC,SAAS,CAAC,CAAC;AAgBxB,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAE1C;IACA,QAAQ,EAAE,EAAE;IACZ,gBAAgB,EAAE,GAAG,EAAE,GAAE,CAAC;CAC3B,CAAC,CAAC;AAEH,MAAM,kBAAkB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACpD,OAAO,GAAG,CAAA;MACN,gBAAgB,KAAK,iBAAiB;6BACf,KAAK,CAAC,IAAI,CAAC,OAAO,UAAU,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO;;;MAGhF,cAAc;;;GAGjB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,YAAY,GAAwD,UAAU,CAClF,CACE,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAsC,EAChE,GAA6B,EAC7B,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,OAAO,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAC1C,MAAM,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IACnE,MAAM,SAAS,GAAG,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAEzD,MAAM,eAAe,GAAG,CAAC,EAAU,EAAE,EAAE;QACrC,aAAa,CAAC,EAAE,CAAC,CAAC;IACpB,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG;QAClB,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,kCAAkC,CAAC,EAAE,KAAK,EAAE,QAAQ,CAAC,MAAM,EAAE;QAClF;YACE,EAAE,EAAE,WAAW;YACf,IAAI,EAAE,CAAC,CAAC,uCAAuC,CAAC;YAChD,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,MAAM;SACrD;QACD,EAAE,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC,sCAAsC,CAAC,EAAE;KACpE,CAAC;IAEF,MAAM,UAAU,GAAG,CAAC,KAAa,EAAE,EAAE;QACnC,IAAI,KAAK,KAAK,UAAU;YAAE,OAAO,KAAC,OAAO,IAAC,iBAAiB,EAAE,MAAM,EAAE,IAAI,EAAC,SAAS,GAAG,CAAC;QACvF,OAAO,CACL,KAAC,YAAY,IACX,QAAQ,EAAE,KAAK,KAAK,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,EACtD,gBAAgB,EAAE,gBAAgB,EAClC,MAAM,EAAE;gBACN,KAAK,EAAE,CAAC,CAAC,uCAAuC,CAAC;gBACjD,IAAI,EAAE,aAAa;gBACnB,QAAQ,EAAE,MAAM;aACjB,GACD,CACH,CAAC;IACJ,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACZ,OAAO,CAAC,OAAO,EAAE,UAAgC,CAAC,KAAK,EAAE,CAAC;IAC7D,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,MAAC,kBAAkB,IAAC,GAAG,EAAE,GAAG,aAC1B,KAAC,UAAU,IACT,OAAO,EACL,KAAC,MAAM,IAAC,IAAI,QAAC,OAAO,EAAC,QAAQ,gBAAa,CAAC,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,OAAO,YACpE,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,YAGX,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EAAE,YACnD,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,OAAO,GAAQ,GAC9B,GACI,EACb,MAAC,WAAW,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,aACpC,KAAC,IAAI,IACH,GAAG,EAAE,OAAO,EACZ,IAAI,EAAE,WAAW,EACjB,IAAI,EAAC,YAAY,EACjB,UAAU,EAAE,eAAe,EAC3B,YAAY,EAAE,UAAU,GACxB,EACF,KAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,YAAG,UAAU,CAAC,UAAU,CAAC,GAAY,IACpD,IACK,CACtB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import {\n  createContext,\n  useContext,\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  useEffect,\n  useRef,\n  useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  CardContent,\n  CardHeader,\n  Flex,\n  Icon,\n  registerIcon,\n  Text,\n  TabPanel,\n  Tabs,\n  Card,\n  ForwardProps,\n  defaultThemeProp,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nimport DialPad from '../DialPad/DialPad';\n\nimport ContactsList, { ContactsListProps } from './ContactsList';\n\nregisterIcon(timesIcon);\n\nexport interface CalleePickerProps {\n  /** Heading for the new call. */\n  heading: string;\n  /**\n   * Callback fired on new call made by the user.\n   * @param phoneNumber the number chosen.\n   */\n  onCall: (phoneNumber: string) => void;\n  /** Callback fired on clicking close button. */\n  onClose?: () => void;\n  /** Reference to the root component. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const ContactsContext = createContext<\n  Pick<ContactsListProps, 'contacts' | 'onFavoriteToggle'>\n>({\n  contacts: [],\n  onFavoriteToggle: () => {}\n});\n\nconst StyledCalleePicker = styled(Card)(({ theme }) => {\n  return css`\n    ${StyledCardHeader}, ${StyledCardContent} {\n      padding: calc(1.25 * ${theme.base.spacing}) calc(${theme.components.card.padding} * 2);\n    }\n\n    ${StyledTabPanel} {\n      height: 24rem;\n    }\n  `;\n});\n\nStyledCalleePicker.defaultProps = defaultThemeProp;\n\nconst CalleePicker: FunctionComponent<CalleePickerProps & ForwardProps> = forwardRef(\n  (\n    { heading, onClose, onCall }: PropsWithoutRef<CalleePickerProps>,\n    ref: CalleePickerProps['ref']\n  ) => {\n    const t = useI18n();\n    const [currentTab, setCurrentTab] = useState('all');\n    const tabsRef = useRef<HTMLElement>(null);\n    const { contacts, onFavoriteToggle } = useContext(ContactsContext);\n    const favorites = contacts.filter(item => item.favorite);\n\n    const handleTabChange = (id: string) => {\n      setCurrentTab(id);\n    };\n\n    const tabsHeaders = [\n      { id: 'all', name: t('call_panel_contacts_list_heading'), count: contacts.length },\n      {\n        id: 'favorites',\n        name: t('call_panel_contacts_favorites_heading'),\n        count: contacts.filter(item => item.favorite).length\n      },\n      { id: 'dial-pad', name: t('call_panel_contacts_dial_pad_heading') }\n    ];\n\n    const tabContent = (tabId: string) => {\n      if (tabId === 'dial-pad') return <DialPad onCallButtonClick={onCall} mode='default' />;\n      return (\n        <ContactsList\n          contacts={tabId === 'favorites' ? favorites : contacts}\n          onFavoriteToggle={onFavoriteToggle}\n          action={{\n            label: t('call_panel_contacts_call_button_label'),\n            icon: 'phone-solid',\n            callback: onCall\n          }}\n        />\n      );\n    };\n\n    useEffect(() => {\n      (tabsRef.current?.firstChild as HTMLButtonElement).focus();\n    }, []);\n\n    return (\n      <StyledCalleePicker ref={ref}>\n        <CardHeader\n          actions={\n            <Button icon variant='simple' aria-label={t('close')} onClick={onClose}>\n              <Icon name='times' />\n            </Button>\n          }\n        >\n          <Flex container={{ alignItems: 'center', itemGap: 1 }}>\n            <Text variant='h3'>{heading}</Text>\n          </Flex>\n        </CardHeader>\n        <CardContent container={{ itemGap: 2 }}>\n          <Tabs\n            ref={tabsRef}\n            tabs={tabsHeaders}\n            type='horizontal'\n            onTabClick={handleTabChange}\n            currentTabId={currentTab}\n          />\n          <TabPanel tabId={currentTab}>{tabContent(currentTab)}</TabPanel>\n        </CardContent>\n      </StyledCalleePicker>\n    );\n  }\n);\n\nexport default CalleePicker;\n"]}

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

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

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

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