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

package/lib/components/DialPad/KeyboardNavigation.js

@@ -0,0 +1,156 @@
+const baseGraph = [
+    {
+        sign: '1',
+        keyCode: 49,
+        ref: undefined,
+        right: 1,
+        down: 3
+    },
+    {
+        sign: '2',
+        alt: 'ABC',
+        keyCode: 50,
+        ref: undefined,
+        right: 2,
+        down: 4,
+        left: 0
+    },
+    {
+        sign: '3',
+        alt: 'DEF',
+        keyCode: 51,
+        ref: undefined,
+        down: 5,
+        left: 1
+    },
+    {
+        sign: '4',
+        alt: 'GHI',
+        keyCode: 52,
+        ref: undefined,
+        up: 0,
+        right: 4,
+        down: 6
+    },
+    {
+        sign: '5',
+        alt: 'JKL',
+        keyCode: 53,
+        ref: undefined,
+        up: 1,
+        right: 5,
+        down: 7,
+        left: 3
+    },
+    {
+        sign: '6',
+        alt: 'MNO',
+        keyCode: 54,
+        ref: undefined,
+        up: 2,
+        down: 8,
+        left: 4
+    },
+    {
+        sign: '7',
+        alt: 'PQRS',
+        keyCode: 55,
+        ref: undefined,
+        up: 3,
+        right: 7,
+        down: 9
+    },
+    {
+        sign: '8',
+        alt: 'TUV',
+        keyCode: 56,
+        ref: undefined,
+        up: 4,
+        right: 8,
+        down: 10,
+        left: 6
+    },
+    {
+        sign: '9',
+        alt: 'WXYZ',
+        keyCode: 57,
+        ref: undefined,
+        up: 5,
+        down: 11,
+        left: 7
+    },
+    {
+        special: '*',
+        keyCode: 42,
+        ref: undefined,
+        up: 6,
+        right: 10,
+        down: 12
+    }
+];
+export const dtmfGraph = baseGraph.concat([
+    {
+        sign: '0',
+        alt: '+',
+        keyCode: 48,
+        altKeyCode: 43,
+        ref: undefined,
+        up: 7,
+        right: 11,
+        left: 9
+    },
+    {
+        special: '#',
+        keyCode: 35,
+        ref: undefined,
+        up: 8,
+        left: 10
+    },
+    {
+        icon: 'backspace',
+        keyCode: 127,
+        ref: undefined,
+        up: 10
+    }
+]);
+export const defaultGraph = baseGraph.concat([
+    {
+        sign: '0',
+        alt: '+',
+        keyCode: 48,
+        altKeyCode: 43,
+        ref: undefined,
+        up: 7,
+        right: 11,
+        down: 12,
+        left: 9
+    },
+    {
+        special: '#',
+        keyCode: 35,
+        ref: undefined,
+        up: 8,
+        down: 12,
+        left: 10
+    },
+    {
+        icon: 'backspace',
+        keyCode: 127,
+        ref: undefined,
+        up: 10
+    }
+]);
+export const defaultButtonGrid = [
+    [defaultGraph[0], defaultGraph[1], defaultGraph[2]],
+    [defaultGraph[3], defaultGraph[4], defaultGraph[5]],
+    [defaultGraph[6], defaultGraph[7], defaultGraph[8]],
+    [defaultGraph[9], defaultGraph[10], defaultGraph[11]],
+    [defaultGraph[12]]
+];
+export const dtmfButtonGrid = [
+    [dtmfGraph[0], dtmfGraph[1], dtmfGraph[2]],
+    [dtmfGraph[3], dtmfGraph[4], dtmfGraph[5]],
+    [dtmfGraph[6], dtmfGraph[7], dtmfGraph[8]],
+    [dtmfGraph[9], dtmfGraph[10], dtmfGraph[11]]
+];
+//# sourceMappingURL=KeyboardNavigation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"KeyboardNavigation.js","sourceRoot":"","sources":["../../../src/components/DialPad/KeyboardNavigation.ts"],"names":[],"mappings":"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","sourcesContent":["// cspell:words PQRS WXYZ\nimport { NavigationGraphElement } from './DialPad.types';\n\nconst baseGraph: NavigationGraphElement[] = [\n  {\n    sign: '1',\n    keyCode: 49,\n    ref: undefined,\n    right: 1,\n    down: 3\n  },\n  {\n    sign: '2',\n    alt: 'ABC',\n    keyCode: 50,\n    ref: undefined,\n    right: 2,\n    down: 4,\n    left: 0\n  },\n  {\n    sign: '3',\n    alt: 'DEF',\n    keyCode: 51,\n    ref: undefined,\n    down: 5,\n    left: 1\n  },\n  {\n    sign: '4',\n    alt: 'GHI',\n    keyCode: 52,\n    ref: undefined,\n    up: 0,\n    right: 4,\n    down: 6\n  },\n  {\n    sign: '5',\n    alt: 'JKL',\n    keyCode: 53,\n    ref: undefined,\n    up: 1,\n    right: 5,\n    down: 7,\n    left: 3\n  },\n  {\n    sign: '6',\n    alt: 'MNO',\n    keyCode: 54,\n    ref: undefined,\n    up: 2,\n    down: 8,\n    left: 4\n  },\n  {\n    sign: '7',\n    alt: 'PQRS',\n    keyCode: 55,\n    ref: undefined,\n    up: 3,\n    right: 7,\n    down: 9\n  },\n  {\n    sign: '8',\n    alt: 'TUV',\n    keyCode: 56,\n    ref: undefined,\n    up: 4,\n    right: 8,\n    down: 10,\n    left: 6\n  },\n  {\n    sign: '9',\n    alt: 'WXYZ',\n    keyCode: 57,\n    ref: undefined,\n    up: 5,\n    down: 11,\n    left: 7\n  },\n  {\n    special: '*',\n    keyCode: 42,\n    ref: undefined,\n    up: 6,\n    right: 10,\n    down: 12\n  }\n];\n\nexport const dtmfGraph = baseGraph.concat([\n  {\n    sign: '0',\n    alt: '+',\n    keyCode: 48,\n    altKeyCode: 43,\n    ref: undefined,\n    up: 7,\n    right: 11,\n    left: 9\n  },\n  {\n    special: '#',\n    keyCode: 35,\n    ref: undefined,\n    up: 8,\n    left: 10\n  },\n  {\n    icon: 'backspace',\n    keyCode: 127,\n    ref: undefined,\n    up: 10\n  }\n]);\n\nexport const defaultGraph = baseGraph.concat([\n  {\n    sign: '0',\n    alt: '+',\n    keyCode: 48,\n    altKeyCode: 43,\n    ref: undefined,\n    up: 7,\n    right: 11,\n    down: 12,\n    left: 9\n  },\n  {\n    special: '#',\n    keyCode: 35,\n    ref: undefined,\n    up: 8,\n    down: 12,\n    left: 10\n  },\n  {\n    icon: 'backspace',\n    keyCode: 127,\n    ref: undefined,\n    up: 10\n  }\n]);\n\nexport const defaultButtonGrid = [\n  [defaultGraph[0], defaultGraph[1], defaultGraph[2]],\n  [defaultGraph[3], defaultGraph[4], defaultGraph[5]],\n  [defaultGraph[6], defaultGraph[7], defaultGraph[8]],\n  [defaultGraph[9], defaultGraph[10], defaultGraph[11]],\n  [defaultGraph[12]]\n];\n\nexport const dtmfButtonGrid = [\n  [dtmfGraph[0], dtmfGraph[1], dtmfGraph[2]],\n  [dtmfGraph[3], dtmfGraph[4], dtmfGraph[5]],\n  [dtmfGraph[6], dtmfGraph[7], dtmfGraph[8]],\n  [dtmfGraph[9], dtmfGraph[10], dtmfGraph[11]]\n];\n"]}

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

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

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

@@ -0,0 +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,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC"}

package/lib/components/DialPad/index.js

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

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

@@ -0,0 +1 @@
+{"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 type { DialPadKeyboardProps } from './DialPadKeyboard';\n"]}

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

@@ -0,0 +1,4 @@
+import { KeyboardEvent } from 'react';
+export declare const getDialButtonIndex: (e: KeyboardEvent) => number;
+export declare const isNavigationEvent: (e: KeyboardEvent) => boolean;
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/DialPad/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,eAAO,MAAM,kBAAkB,MAAO,aAAa,KAAG,MAIrD,CAAC;AAEF,eAAO,MAAM,iBAAiB,MAAO,aAAa,YAEjD,CAAC"}

package/lib/components/DialPad/utils.js

@@ -0,0 +1,7 @@
+export const getDialButtonIndex = (e) => {
+    return ['1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '0', '#', 'Backspace'].findIndex(key => key === e.key);
+};
+export const isNavigationEvent = (e) => {
+    return ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key);
+};
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/DialPad/utils.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,CAAgB,EAAU,EAAE;IAC7D,OAAO,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,WAAW,CAAC,CAAC,SAAS,CACxF,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,CAAC,GAAG,CACrB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,CAAgB,EAAE,EAAE;IACpD,OAAO,CAAC,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;AAC7E,CAAC,CAAC","sourcesContent":["import { KeyboardEvent } from 'react';\n\nexport const getDialButtonIndex = (e: KeyboardEvent): number => {\n  return ['1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '0', '#', 'Backspace'].findIndex(\n    key => key === e.key\n  );\n};\n\nexport const isNavigationEvent = (e: KeyboardEvent) => {\n  return ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key);\n};\n"]}

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

@@ -0,0 +1,15 @@
+import { FunctionComponent, ReactNode } from 'react';
+import { ButtonProps, ForwardProps } from '@pega/cosmos-react-core';
+export interface CountdownButtonProps extends ButtonProps {
+    /** Text or content for the Button. */
+    children: ReactNode;
+    /** Start time of incoming Interaction. */
+    startTime: Date | number;
+    /** The time the user has to accept the call in seconds. */
+    timeout: number;
+    /** Callback invoked when timeout ends. */
+    onTimerEnd?: () => void;
+}
+declare const CountdownButton: FunctionComponent<CountdownButtonProps & ForwardProps>;
+export default CountdownButton;
+//# sourceMappingURL=CountdownButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CountdownButton.d.ts","sourceRoot":"","sources":["../../../src/components/InteractionNotification/CountdownButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAE,SAAS,EAA4B,MAAM,OAAO,CAAC;AAG3F,OAAO,EAOL,WAAW,EACX,YAAY,EACb,MAAM,yBAAyB,CAAC;AAIjC,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,0CAA0C;IAC1C,SAAS,EAAE,IAAI,GAAG,MAAM,CAAC;IACzB,2DAA2D;IAC3D,OAAO,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAUD,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,GAAG,YAAY,CAqD3E,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/InteractionNotification/CountdownButton.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useEffect, useState } from 'react';
+import styled, { css } from 'styled-components';
+import { useI18n, Text, VisuallyHiddenText, useUID, Button, defaultThemeProp } from '@pega/cosmos-react-core';
+import { formatDuration } from '../CallControlPanel/utils';
+const StyledAcceptButton = styled(Button)(({ theme }) => css `
+    gap: ${theme.base.spacing};
+  `);
+StyledAcceptButton.defaultProps = defaultThemeProp;
+const CountdownButton = forwardRef(function CountdownButton({ startTime, timeout, onTimerEnd, children, ...restProps }, ref) {
+    const timeoutMs = timeout * 1000;
+    const start = Number(startTime);
+    const endTime = start + timeoutMs;
+    const [msRemaining, setMsRemaining] = useState(() => endTime - Date.now());
+    const secondsRemaining = Math.round(msRemaining / 1000);
+    const t = useI18n();
+    const descriptionId = useUID();
+    useEffect(() => {
+        let timeoutId;
+        if (msRemaining > 0) {
+            timeoutId = window.setTimeout(() => {
+                setMsRemaining(endTime - Date.now());
+            }, 1000);
+        }
+        else {
+            onTimerEnd?.();
+        }
+        return () => clearTimeout(timeoutId);
+    }, 
+    // Omitting onTimerEnd as an effect trigger on purpose.
+    // An unstable function definition in the prop causes the effect to run more than necessary.
+    // The proper definition will be captured and used with any changes to msRemaining.
+    [msRemaining]);
+    const timer = msRemaining > 0 ? formatDuration(msRemaining) : '0:00';
+    return (_jsxs(_Fragment, { children: [_jsxs(StyledAcceptButton, { ...restProps, "aria-describedby": descriptionId, ref: ref, children: [children, _jsx(Text, { "aria-hidden": 'true', children: timer })] }), _jsx(VisuallyHiddenText, { "aria-hidden": 'true', id: descriptionId, children: msRemaining > 0
+                    ? t('interaction_time_remaining', [secondsRemaining], {
+                        count: secondsRemaining
+                    })
+                    : t('interaction_time_expired') })] }));
+});
+export default CountdownButton;
+//# sourceMappingURL=CountdownButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CountdownButton.js","sourceRoot":"","sources":["../../../src/components/InteractionNotification/CountdownButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAqC,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3F,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,OAAO,EACP,IAAI,EACJ,kBAAkB,EAClB,MAAM,EACN,MAAM,EACN,gBAAgB,EAGjB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAa3D,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAC,CACvC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;WACT,KAAK,CAAC,IAAI,CAAC,OAAO;GAC1B,CACF,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,eAAe,GAA2D,UAAU,CACxF,SAAS,eAAe,CACtB,EAAE,SAAS,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAuC,EAC/F,GAA2B;IAE3B,MAAM,SAAS,GAAG,OAAO,GAAG,IAAI,CAAC;IACjC,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IAChC,MAAM,OAAO,GAAG,KAAK,GAAG,SAAS,CAAC;IAClC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;IAE3E,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAExD,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,aAAa,GAAG,MAAM,EAAE,CAAC;IAE/B,SAAS,CACP,GAAG,EAAE;QACH,IAAI,SAAiB,CAAC;QAEtB,IAAI,WAAW,GAAG,CAAC,EAAE;YACnB,SAAS,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;gBACjC,cAAc,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;YACvC,CAAC,EAAE,IAAI,CAAC,CAAC;SACV;aAAM;YACL,UAAU,EAAE,EAAE,CAAC;SAChB;QAED,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IACvC,CAAC;IACD,uDAAuD;IACvD,4FAA4F;IAC5F,mFAAmF;IACnF,CAAC,WAAW,CAAC,CACd,CAAC;IAEF,MAAM,KAAK,GAAG,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;IAErE,OAAO,CACL,8BACE,MAAC,kBAAkB,OAAK,SAAS,sBAAoB,aAAa,EAAE,GAAG,EAAE,GAAG,aACzE,QAAQ,EACT,KAAC,IAAI,mBAAa,MAAM,YAAE,KAAK,GAAQ,IACpB,EACrB,KAAC,kBAAkB,mBAAa,MAAM,EAAC,EAAE,EAAE,aAAa,YACrD,WAAW,GAAG,CAAC;oBACd,CAAC,CAAC,CAAC,CAAC,4BAA4B,EAAE,CAAC,gBAAgB,CAAC,EAAE;wBAClD,KAAK,EAAE,gBAAgB;qBACxB,CAAC;oBACJ,CAAC,CAAC,CAAC,CAAC,0BAA0B,CAAC,GACd,IACpB,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, ReactNode, Ref, useEffect, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  useI18n,\n  Text,\n  VisuallyHiddenText,\n  useUID,\n  Button,\n  defaultThemeProp,\n  ButtonProps,\n  ForwardProps\n} from '@pega/cosmos-react-core';\n\nimport { formatDuration } from '../CallControlPanel/utils';\n\nexport interface CountdownButtonProps extends ButtonProps {\n  /** Text or content for the Button. */\n  children: ReactNode;\n  /** Start time of incoming Interaction. */\n  startTime: Date | number;\n  /** The time the user has to accept the call in seconds. */\n  timeout: number;\n  /** Callback invoked when timeout ends. */\n  onTimerEnd?: () => void;\n}\n\nconst StyledAcceptButton = styled(Button)(\n  ({ theme }) => css`\n    gap: ${theme.base.spacing};\n  `\n);\n\nStyledAcceptButton.defaultProps = defaultThemeProp;\n\nconst CountdownButton: FunctionComponent<CountdownButtonProps & ForwardProps> = forwardRef(\n  function CountdownButton(\n    { startTime, timeout, onTimerEnd, children, ...restProps }: CountdownButtonProps & ForwardProps,\n    ref: Ref<HTMLButtonElement>\n  ) {\n    const timeoutMs = timeout * 1000;\n    const start = Number(startTime);\n    const endTime = start + timeoutMs;\n    const [msRemaining, setMsRemaining] = useState(() => endTime - Date.now());\n\n    const secondsRemaining = Math.round(msRemaining / 1000);\n\n    const t = useI18n();\n    const descriptionId = useUID();\n\n    useEffect(\n      () => {\n        let timeoutId: number;\n\n        if (msRemaining > 0) {\n          timeoutId = window.setTimeout(() => {\n            setMsRemaining(endTime - Date.now());\n          }, 1000);\n        } else {\n          onTimerEnd?.();\n        }\n\n        return () => clearTimeout(timeoutId);\n      },\n      // Omitting onTimerEnd as an effect trigger on purpose.\n      // An unstable function definition in the prop causes the effect to run more than necessary.\n      // The proper definition will be captured and used with any changes to msRemaining.\n      [msRemaining]\n    );\n\n    const timer = msRemaining > 0 ? formatDuration(msRemaining) : '0:00';\n\n    return (\n      <>\n        <StyledAcceptButton {...restProps} aria-describedby={descriptionId} ref={ref}>\n          {children}\n          <Text aria-hidden='true'>{timer}</Text>\n        </StyledAcceptButton>\n        <VisuallyHiddenText aria-hidden='true' id={descriptionId}>\n          {msRemaining > 0\n            ? t('interaction_time_remaining', [secondsRemaining], {\n                count: secondsRemaining\n              })\n            : t('interaction_time_expired')}\n        </VisuallyHiddenText>\n      </>\n    );\n  }\n);\n\nexport default CountdownButton;\n"]}

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

@@ -0,0 +1,35 @@
+import { FunctionComponent, Ref } from 'react';
+import { StatusProps, ForwardProps, FieldValueListProps, NoChildrenProp } from '@pega/cosmos-react-core';
+import { CountdownButtonProps } from './CountdownButton';
+export interface InteractionNotificationProps extends NoChildrenProp {
+    /** Ref to Component. */
+    ref?: Ref<HTMLDivElement>;
+    /** Name of the icon used in header. */
+    icon: string;
+    /** Interaction title. */
+    title: string;
+    /** Primary information of the notification. For example caller name . */
+    primaryText: string;
+    /** Secondary information of the notification. For example phone number of the caller */
+    secondaryText?: string;
+    /** Represents the current status of interaction. */
+    status: {
+        variant: StatusProps['variant'];
+        text: string;
+    };
+    /** Information structured as field values to be displayed below main section. */
+    fields?: FieldValueListProps['fields'];
+    /** Timeout definition */
+    incomingNotificationTimeout?: {
+        startTime: CountdownButtonProps['startTime'];
+        answerTimeout: CountdownButtonProps['timeout'];
+        onTimerEnd?: CountdownButtonProps['onTimerEnd'];
+    };
+    /** Callback when accept button is clicked. */
+    onAccept: () => void;
+    /** Callback when decline button is clicked. */
+    onDecline?: () => void;
+}
+declare const InteractionNotification: FunctionComponent<InteractionNotificationProps & ForwardProps>;
+export default InteractionNotification;
+//# sourceMappingURL=InteractionNotification.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InteractionNotification.d.ts","sourceRoot":"","sources":["../../../src/components/InteractionNotification/InteractionNotification.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAqB,MAAM,OAAO,CAAC;AAG/F,OAAO,EAOL,WAAW,EACX,YAAY,EAOZ,mBAAmB,EAEnB,cAAc,EASf,MAAM,yBAAyB,CAAC;AAGjC,OAAwB,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE1E,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,yBAAyB;IACzB,2BAA2B,CAAC,EAAE;QAC5B,SAAS,EAAE,oBAAoB,CAAC,WAAW,CAAC,CAAC;QAC7C,aAAa,EAAE,oBAAoB,CAAC,SAAS,CAAC,CAAC;QAC/C,UAAU,CAAC,EAAE,oBAAoB,CAAC,YAAY,CAAC,CAAC;KACjD,CAAC;IACF,8CAA8C;IAC9C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAgFD,QAAA,MAAM,uBAAuB,EAAE,iBAAiB,CAAC,4BAA4B,GAAG,YAAY,CAmGxF,CAAC;AAEL,eAAe,uBAAuB,CAAC"}

package/lib/components/InteractionNotification/InteractionNotification.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef } from 'react';
+import styled, { css } from 'styled-components';
+import { Button, Card, CardContent, CardHeader, Status, Text, defaultThemeProp, Flex, StyledText, FieldValueList, StyledFieldValueList, useI18n, useDirection, Icon, StyledLabel, useLiveLog, registerAction, useShortcut, useConsolidatedRef, useEscape, CardFooter } from '@pega/cosmos-react-core';
+import { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';
+import CountdownButton from './CountdownButton';
+const StyledInteractionNotification = styled(Card)(({ theme: { base } }) => {
+    const { rtl } = useDirection();
+    return css `
+    position: fixed;
+    inset-block-start: calc(2 * ${base.spacing});
+    inset-inline-end: calc(2 * ${base.spacing});
+    width: min(calc(100% - 2rem), ${base['content-width'].md});
+    max-height: calc(100vh - 2rem);
+    z-index: ${base['z-index'].modal};
+    color: ${base.colors.white};
+    animation: SlideIn calc(4 * ${base.animation.speed});
+    padding: calc(0.75 * ${base.spacing}) 0;
+    box-shadow: ${base.shadow.low};
+
+    &&& {
+      background-color: ${base.colors.slate['extra-dark']};
+    }
+
+    @keyframes SlideIn {
+      0% {
+        ${rtl
+        ? css `
+              transform: translateX(calc(-100% - 1rem));
+            `
+        : css `
+              transform: translateX(calc(100% + 1rem));
+            `}
+      }
+
+      100% {
+        transform: translateX(0);
+      }
+    }
+
+    ${StyledCardContent} {
+      margin: calc(2 * ${base.spacing}) 0;
+      overflow: auto;
+
+      ${StyledText} {
+        color: ${base.colors.white};
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        width: 100%;
+        text-align: center;
+      }
+    }
+
+    ${StyledFieldValueList} {
+      border-block-start: solid 0.0625rem ${base.palette['border-line']};
+      padding-block-start: calc(2 * ${base.spacing});
+      color: ${base.colors.white};
+
+      ${StyledLabel} {
+        color: ${base.colors.white};
+      }
+    }
+
+    @media (min-width: calc(${base.breakpoints.md})) {
+      inset-block-start: calc(8 * ${base.spacing});
+      max-height: initial;
+    }
+  `;
+});
+StyledInteractionNotification.defaultProps = defaultThemeProp;
+registerAction({
+    id: 'GoToIncomingInteraction',
+    defaultKeyBinding: 'Alt+Enter'
+}, {
+    id: 'DismissIncomingInteraction',
+    defaultKeyBinding: 'Alt+Q'
+});
+const InteractionNotification = forwardRef(function InteractionNotification({ icon, title, primaryText, secondaryText, status, fields, incomingNotificationTimeout, onAccept, onDecline }, ref) {
+    const t = useI18n();
+    const { announceAssertive } = useLiveLog();
+    const containerRef = useConsolidatedRef(ref);
+    const returnRef = useRef();
+    const acceptButtonRef = useRef(null);
+    const { binding: goToBinding } = useShortcut('GoToIncomingInteraction', () => {
+        if (containerRef.current) {
+            returnRef.current = document.activeElement ?? undefined;
+            acceptButtonRef.current?.focus();
+        }
+    });
+    const { binding: dismissBinding } = useShortcut('DismissIncomingInteraction', () => {
+        onDecline?.();
+    });
+    useEscape(() => {
+        returnRef.current?.focus();
+        onDecline?.();
+    }, containerRef.current, [onDecline]);
+    useEffect(() => {
+        announceAssertive({
+            message: `${title} ${primaryText} ${t('status')} ${status.text}. ${goToBinding ? t('interaction_shortcut_goto_info', [goToBinding]) : ''}${dismissBinding && onDecline
+                ? t('interaction_shortcut_dismiss_info', [dismissBinding])
+                : ''}`,
+            type: 'alert'
+        });
+    }, []);
+    const acceptButton = incomingNotificationTimeout ? (_jsx(CountdownButton, { variant: 'primary', onClick: onAccept, startTime: incomingNotificationTimeout.startTime, timeout: incomingNotificationTimeout.answerTimeout, onTimerEnd: incomingNotificationTimeout.onTimerEnd ?? onDecline, ref: acceptButtonRef, children: t('accept') })) : (_jsx(Button, { variant: 'primary', onClick: onAccept, ref: acceptButtonRef, children: t('accept') }));
+    return (_jsxs(StyledInteractionNotification, { ref: containerRef, "data-app-region": true, children: [_jsx(CardHeader, { children: _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Icon, { name: icon }), _jsx(Text, { variant: 'h2', children: title })] }) }), _jsxs(CardContent, { container: { gap: 2 }, children: [_jsxs(Flex, { container: { direction: 'column', alignItems: 'center', gap: 1 }, children: [_jsx(Text, { variant: 'h1', as: 'span', children: primaryText }), secondaryText && (_jsx(Text, { variant: 'h5', as: 'span', children: secondaryText })), _jsx(Status, { variant: status.variant, children: status.text })] }), fields && fields.length !== 0 && _jsx(FieldValueList, { variant: 'inline', fields: fields })] }), _jsxs(CardFooter, { justify: onDecline ? 'between' : 'end', children: [onDecline && _jsx(Button, { onClick: onDecline, children: t('decline') }), acceptButton] })] }));
+});
+export default InteractionNotification;
+//# sourceMappingURL=InteractionNotification.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InteractionNotification.js","sourceRoot":"","sources":["../../../src/components/InteractionNotification/InteractionNotification.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC/F,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,MAAM,EACN,IAAI,EACJ,WAAW,EACX,UAAU,EACV,MAAM,EACN,IAAI,EAGJ,gBAAgB,EAChB,IAAI,EACJ,UAAU,EACV,cAAc,EACd,oBAAoB,EACpB,OAAO,EAEP,YAAY,EAEZ,IAAI,EACJ,WAAW,EACX,UAAU,EACV,cAAc,EACd,WAAW,EACX,kBAAkB,EAClB,SAAS,EACT,UAAU,EACX,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,yDAAyD,CAAC;AAE5F,OAAO,eAAyC,MAAM,mBAAmB,CAAC;AA6B1E,MAAM,6BAA6B,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE;IACzE,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAC/B,OAAO,GAAG,CAAA;;kCAEsB,IAAI,CAAC,OAAO;iCACb,IAAI,CAAC,OAAO;oCACT,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;;eAE7C,IAAI,CAAC,SAAS,CAAC,CAAC,KAAK;aACvB,IAAI,CAAC,MAAM,CAAC,KAAK;kCACI,IAAI,CAAC,SAAS,CAAC,KAAK;2BAC3B,IAAI,CAAC,OAAO;kBACrB,IAAI,CAAC,MAAM,CAAC,GAAG;;;0BAGP,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,YAAY,CAAC;;;;;UAK/C,GAAG;QACH,CAAC,CAAC,GAAG,CAAA;;aAEF;QACH,CAAC,CAAC,GAAG,CAAA;;aAEF;;;;;;;;MAQP,iBAAiB;yBACE,IAAI,CAAC,OAAO;;;QAG7B,UAAU;iBACD,IAAI,CAAC,MAAM,CAAC,KAAK;;;;;;;;;MAS5B,oBAAoB;4CACkB,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;sCACjC,IAAI,CAAC,OAAO;eACnC,IAAI,CAAC,MAAM,CAAC,KAAK;;QAExB,WAAW;iBACF,IAAI,CAAC,MAAM,CAAC,KAAK;;;;8BAIJ,IAAI,CAAC,WAAW,CAAC,EAAE;oCACb,IAAI,CAAC,OAAO;;;GAG7C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,6BAA6B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9D,cAAc,CACZ;IACE,EAAE,EAAE,yBAAyB;IAC7B,iBAAiB,EAAE,WAAW;CAC/B,EACD;IACE,EAAE,EAAE,4BAA4B;IAChC,iBAAiB,EAAE,OAAO;CAC3B,CACF,CAAC;AAEF,MAAM,uBAAuB,GAC3B,UAAU,CAAC,SAAS,uBAAuB,CACzC,EACE,IAAI,EACJ,KAAK,EACL,WAAW,EACX,aAAa,EACb,MAAM,EACN,MAAM,EACN,2BAA2B,EAC3B,QAAQ,EACR,SAAS,EACqC,EAChD,GAAwC;IAExC,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,iBAAiB,EAAE,GAAG,UAAU,EAAE,CAAC;IAC3C,MAAM,YAAY,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAC7C,MAAM,SAAS,GAAG,MAAM,EAAe,CAAC;IACxC,MAAM,eAAe,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAExD,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,WAAW,CAAC,yBAAyB,EAAE,GAAG,EAAE;QAC3E,IAAI,YAAY,CAAC,OAAO,EAAE;YACxB,SAAS,CAAC,OAAO,GAAI,QAAQ,CAAC,aAA6B,IAAI,SAAS,CAAC;YACzE,eAAe,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;SAClC;IACH,CAAC,CAAC,CAAC;IACH,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,GAAG,WAAW,CAAC,4BAA4B,EAAE,GAAG,EAAE;QACjF,SAAS,EAAE,EAAE,CAAC;IAChB,CAAC,CAAC,CAAC;IAEH,SAAS,CACP,GAAG,EAAE;QACH,SAAS,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;QAC3B,SAAS,EAAE,EAAE,CAAC;IAChB,CAAC,EACD,YAAY,CAAC,OAAO,EACpB,CAAC,SAAS,CAAC,CACZ,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,iBAAiB,CAAC;YAChB,OAAO,EAAE,GAAG,KAAK,IAAI,WAAW,IAAI,CAAC,CAAC,QAAQ,CAAC,IAAI,MAAM,CAAC,IAAI,KAC5D,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,gCAAgC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,EACrE,GACE,cAAc,IAAI,SAAS;gBACzB,CAAC,CAAC,CAAC,CAAC,mCAAmC,EAAE,CAAC,cAAc,CAAC,CAAC;gBAC1D,CAAC,CAAC,EACN,EAAE;YACF,IAAI,EAAE,OAAO;SACd,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,YAAY,GAAG,2BAA2B,CAAC,CAAC,CAAC,CACjD,KAAC,eAAe,IACd,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,QAAQ,EACjB,SAAS,EAAE,2BAA2B,CAAC,SAAS,EAChD,OAAO,EAAE,2BAA2B,CAAC,aAAa,EAClD,UAAU,EAAE,2BAA2B,CAAC,UAAU,IAAI,SAAS,EAC/D,GAAG,EAAE,eAAe,YAEnB,CAAC,CAAC,QAAQ,CAAC,GACI,CACnB,CAAC,CAAC,CAAC,CACF,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,eAAe,YAC9D,CAAC,CAAC,QAAQ,CAAC,GACL,CACV,CAAC;IAEF,OAAO,CACL,MAAC,6BAA6B,IAAC,GAAG,EAAE,YAAY,sCAC9C,KAAC,UAAU,cACT,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC/C,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,GAAI,EACpB,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,KAAK,GAAQ,IAC5B,GACI,EACb,MAAC,WAAW,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,aAChC,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aACpE,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAC,MAAM,YACzB,WAAW,GACP,EACN,aAAa,IAAI,CAChB,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAC,MAAM,YACzB,aAAa,GACT,CACR,EACD,KAAC,MAAM,IAAC,OAAO,EAAE,MAAM,CAAC,OAAO,YAAG,MAAM,CAAC,IAAI,GAAU,IAClD,EACN,MAAM,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,IAAI,KAAC,cAAc,IAAC,OAAO,EAAC,QAAQ,EAAC,MAAM,EAAE,MAAM,GAAI,IACzE,EAEd,MAAC,UAAU,IAAC,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,aAC/C,SAAS,IAAI,KAAC,MAAM,IAAC,OAAO,EAAE,SAAS,YAAG,CAAC,CAAC,SAAS,CAAC,GAAU,EAChE,YAAY,IACF,IACiB,CACjC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEL,eAAe,uBAAuB,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref, useEffect, useRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Card,\n  CardContent,\n  CardHeader,\n  Status,\n  Text,\n  StatusProps,\n  ForwardProps,\n  defaultThemeProp,\n  Flex,\n  StyledText,\n  FieldValueList,\n  StyledFieldValueList,\n  useI18n,\n  FieldValueListProps,\n  useDirection,\n  NoChildrenProp,\n  Icon,\n  StyledLabel,\n  useLiveLog,\n  registerAction,\n  useShortcut,\n  useConsolidatedRef,\n  useEscape,\n  CardFooter\n} from '@pega/cosmos-react-core';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\n\nimport CountdownButton, { CountdownButtonProps } from './CountdownButton';\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  /** Timeout definition */\n  incomingNotificationTimeout?: {\n    startTime: CountdownButtonProps['startTime'];\n    answerTimeout: CountdownButtonProps['timeout'];\n    onTimerEnd?: CountdownButtonProps['onTimerEnd'];\n  };\n  /** Callback when accept button is clicked. */\n  onAccept: () => void;\n  /** Callback when decline button is clicked. */\n  onDecline?: () => void;\n}\n\nconst StyledInteractionNotification = styled(Card)(({ theme: { base } }) => {\n  const { rtl } = useDirection();\n  return css`\n    position: fixed;\n    inset-block-start: calc(2 * ${base.spacing});\n    inset-inline-end: calc(2 * ${base.spacing});\n    width: min(calc(100% - 2rem), ${base['content-width'].md});\n    max-height: calc(100vh - 2rem);\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    box-shadow: ${base.shadow.low};\n\n    &&& {\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    ${StyledCardContent} {\n      margin: calc(2 * ${base.spacing}) 0;\n      overflow: auto;\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    ${StyledFieldValueList} {\n      border-block-start: solid 0.0625rem ${base.palette['border-line']};\n      padding-block-start: calc(2 * ${base.spacing});\n      color: ${base.colors.white};\n\n      ${StyledLabel} {\n        color: ${base.colors.white};\n      }\n    }\n\n    @media (min-width: calc(${base.breakpoints.md})) {\n      inset-block-start: calc(8 * ${base.spacing});\n      max-height: initial;\n    }\n  `;\n});\n\nStyledInteractionNotification.defaultProps = defaultThemeProp;\n\nregisterAction(\n  {\n    id: 'GoToIncomingInteraction',\n    defaultKeyBinding: 'Alt+Enter'\n  },\n  {\n    id: 'DismissIncomingInteraction',\n    defaultKeyBinding: 'Alt+Q'\n  }\n);\n\nconst InteractionNotification: FunctionComponent<InteractionNotificationProps & ForwardProps> =\n  forwardRef(function InteractionNotification(\n    {\n      icon,\n      title,\n      primaryText,\n      secondaryText,\n      status,\n      fields,\n      incomingNotificationTimeout,\n      onAccept,\n      onDecline\n    }: PropsWithoutRef<InteractionNotificationProps>,\n    ref: InteractionNotificationProps['ref']\n  ) {\n    const t = useI18n();\n    const { announceAssertive } = useLiveLog();\n    const containerRef = useConsolidatedRef(ref);\n    const returnRef = useRef<HTMLElement>();\n    const acceptButtonRef = useRef<HTMLButtonElement>(null);\n\n    const { binding: goToBinding } = useShortcut('GoToIncomingInteraction', () => {\n      if (containerRef.current) {\n        returnRef.current = (document.activeElement as HTMLElement) ?? undefined;\n        acceptButtonRef.current?.focus();\n      }\n    });\n    const { binding: dismissBinding } = useShortcut('DismissIncomingInteraction', () => {\n      onDecline?.();\n    });\n\n    useEscape(\n      () => {\n        returnRef.current?.focus();\n        onDecline?.();\n      },\n      containerRef.current,\n      [onDecline]\n    );\n\n    useEffect(() => {\n      announceAssertive({\n        message: `${title} ${primaryText} ${t('status')} ${status.text}. ${\n          goToBinding ? t('interaction_shortcut_goto_info', [goToBinding]) : ''\n        }${\n          dismissBinding && onDecline\n            ? t('interaction_shortcut_dismiss_info', [dismissBinding])\n            : ''\n        }`,\n        type: 'alert'\n      });\n    }, []);\n\n    const acceptButton = incomingNotificationTimeout ? (\n      <CountdownButton\n        variant='primary'\n        onClick={onAccept}\n        startTime={incomingNotificationTimeout.startTime}\n        timeout={incomingNotificationTimeout.answerTimeout}\n        onTimerEnd={incomingNotificationTimeout.onTimerEnd ?? onDecline}\n        ref={acceptButtonRef}\n      >\n        {t('accept')}\n      </CountdownButton>\n    ) : (\n      <Button variant='primary' onClick={onAccept} ref={acceptButtonRef}>\n        {t('accept')}\n      </Button>\n    );\n\n    return (\n      <StyledInteractionNotification ref={containerRef} data-app-region>\n        <CardHeader>\n          <Flex container={{ alignItems: 'center', gap: 1 }}>\n            <Icon name={icon} />\n            <Text variant='h2'>{title}</Text>\n          </Flex>\n        </CardHeader>\n        <CardContent container={{ gap: 2 }}>\n          <Flex container={{ direction: 'column', alignItems: 'center', gap: 1 }}>\n            <Text variant='h1' as='span'>\n              {primaryText}\n            </Text>\n            {secondaryText && (\n              <Text variant='h5' as='span'>\n                {secondaryText}\n              </Text>\n            )}\n            <Status variant={status.variant}>{status.text}</Status>\n          </Flex>\n          {fields && fields.length !== 0 && <FieldValueList variant='inline' fields={fields} />}\n        </CardContent>\n\n        <CardFooter justify={onDecline ? 'between' : 'end'}>\n          {onDecline && <Button onClick={onDecline}>{t('decline')}</Button>}\n          {acceptButton}\n        </CardFooter>\n      </StyledInteractionNotification>\n    );\n  });\n\nexport default InteractionNotification;\n"]}

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

@@ -0,0 +1,2 @@
+export { default } from './InteractionNotification';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/InteractionNotification/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC"}

package/lib/components/InteractionNotification/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/InteractionNotification/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC","sourcesContent":["export { default } from './InteractionNotification';\n"]}

package/lib/components/InteractionTimer/InteractionTimer.d.ts

@@ -0,0 +1,29 @@
+import { FunctionComponent, Ref } from 'react';
+import { BaseProps, AsProp, ForwardProps, NoChildrenProp } from '@pega/cosmos-react-core';
+export interface InteractionTimerProps extends BaseProps, AsProp, NoChildrenProp {
+    /** Name of the icon */
+    icon: string;
+    /** Ref to Component */
+    ref?: Ref<HTMLDivElement>;
+    /** Current Sla. This is used to display progress ring color. */
+    sla?: 'goal' | 'deadline' | 'past-deadline';
+    /** Progress % of the current stage
+     * @default 0
+     */
+    progress?: number;
+    /** Indicates if there are any unread notifications
+     * @default false
+     */
+    hasNotifications?: boolean;
+    /** Meta info */
+    meta?: string;
+    /** Aria label for screen readers. */
+    ariaLabel?: string;
+}
+export declare const StyledInteractionTimerIconWrapper: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledInteractionTimerIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@pega/cosmos-react-core").IconProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledInteractionTimerMetaText: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledInteractionTimer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<InteractionTimerProps, "progress" | "icon" | "meta" | "children" | "ref" | "as" | "className" | "forwardedAs" | "ariaLabel" | "hasNotifications"> & Required<Pick<InteractionTimerProps, "sla">>, never>;
+declare const InteractionTimer: FunctionComponent<InteractionTimerProps & ForwardProps>;
+export default InteractionTimer;
+//# sourceMappingURL=InteractionTimer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InteractionTimer.d.ts","sourceRoot":"","sources":["../../../src/components/InteractionTimer/InteractionTimer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,GAAG,EAIJ,MAAM,OAAO,CAAC;AAGf,OAAO,EACL,SAAS,EACT,MAAM,EAKN,YAAY,EAIZ,cAAc,EAEf,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,qBAAsB,SAAQ,SAAS,EAAE,MAAM,EAAE,cAAc;IAC9E,uBAAuB;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,uBAAuB;IACvB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,gEAAgE;IAChE,GAAG,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,eAAe,CAAC;IAC5C;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gBAAgB;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,iCAAiC,0GAAgB,CAAC;AAC/D,eAAO,MAAM,0BAA0B,0LAAiB,CAAC;AACzD,eAAO,MAAM,8BAA8B,0GAAgB,CAAC;AAI5D,eAAO,MAAM,sBAAsB,4SAgElC,CAAC;AAIF,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CAmE7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/components/InteractionTimer/InteractionTimer.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef, useState } from 'react';
+import styled, { css } from 'styled-components';
+import { Flex, Icon, Text, Progress, defaultThemeProp, StyledProgressRing, useConsolidatedRef } from '@pega/cosmos-react-core';
+export const StyledInteractionTimerIconWrapper = styled.span ``;
+export const StyledInteractionTimerIcon = styled(Icon) ``;
+export const StyledInteractionTimerMetaText = styled.span ``;
+export const StyledInteractionTimer = styled.div(({ sla, hasNotifications, theme: { components: { 'interaction-timer': InteractionTimerTheme } }, theme }) => {
+    return css `
+      width: calc(8 * ${theme.base.spacing});
+      flex-shrink: 0;
+
+      ${StyledInteractionTimerIconWrapper} {
+        font-size: 2.2rem;
+        position: relative;
+        display: inline-flex;
+        padding: calc(0.3 * ${theme.base.spacing});
+        ${hasNotifications &&
+        css `
+          &::after {
+            position: absolute;
+            background-color: ${InteractionTimerTheme['notification-indicator']};
+            border-radius: 50%;
+            content: '';
+            top: 0;
+            right: 0;
+            width: 0.3rem;
+            height: 0.3rem;
+          }
+        `}
+      }
+
+      ${StyledProgressRing} {
+        circle {
+          stroke-width: 1;
+          stroke: ${sla
+        ? InteractionTimerTheme.sla[sla].progress['secondary-color']
+        : 'currentcolor'};
+        }
+        circle + circle {
+          stroke: ${sla
+        ? InteractionTimerTheme.sla[sla].progress['primary-color']
+        : 'currentcolor'};
+        }
+      }
+      ${StyledInteractionTimerIcon} {
+        font-size: 1.5rem;
+        margin: auto;
+        position: absolute;
+        display: inline-flex;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        width: 100%;
+        align-items: center;
+        justify-content: center;
+      }
+      ${StyledInteractionTimerMetaText} {
+        color: inherit;
+      }
+    `;
+});
+StyledInteractionTimer.defaultProps = defaultThemeProp;
+const InteractionTimer = forwardRef(function InteractionTimer({ icon, progress = 0, hasNotifications = false, meta, sla, ariaLabel, ...restProps }, ref) {
+    const [currentTimeLabel, setCurrentTimeLabel] = useState('');
+    const containerRef = useConsolidatedRef(ref);
+    const labelRef = useRef('');
+    useEffect(() => {
+        if (ariaLabel)
+            labelRef.current = ariaLabel;
+    }, [ariaLabel]);
+    useEffect(() => {
+        const onFocus = () => {
+            if (document.activeElement?.contains(containerRef.current) && labelRef.current) {
+                setCurrentTimeLabel(labelRef.current);
+            }
+        };
+        document.addEventListener('focusin', onFocus);
+        return () => {
+            document.removeEventListener('focusin', onFocus);
+        };
+    }, []);
+    return (_jsxs(Flex, { ...restProps, ref: containerRef, container: {
+            direction: 'column',
+            alignItems: 'center'
+        }, sla: sla, hasNotifications: hasNotifications, as: StyledInteractionTimer, "aria-label": currentTimeLabel, role: 'timer', children: [_jsxs(StyledInteractionTimerIconWrapper, { children: [_jsx(StyledInteractionTimerIcon, { name: icon }), _jsx(Progress, { variant: 'ring', minValue: 0, maxValue: 100, value: progress, placement: 'inline', "aria-hidden": 'true' })] }), meta && (_jsx(Text, { variant: 'secondary', as: StyledInteractionTimerMetaText, "aria-hidden": 'true', children: meta }))] }));
+});
+export default InteractionTimer;
+//# sourceMappingURL=InteractionTimer.js.map

package/lib/components/InteractionTimer/InteractionTimer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InteractionTimer.js","sourceRoot":"","sources":["../../../src/components/InteractionTimer/InteractionTimer.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\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  BaseProps,\n  AsProp,\n  Flex,\n  Icon,\n  Text,\n  Progress,\n  ForwardProps,\n  defaultThemeProp,\n  StyledProgressRing,\n  PropsWithDefaults,\n  NoChildrenProp,\n  useConsolidatedRef\n} from '@pega/cosmos-react-core';\n\nexport interface InteractionTimerProps extends BaseProps, AsProp, NoChildrenProp {\n  /** Name of the icon */\n  icon: string;\n  /** Ref to Component */\n  ref?: Ref<HTMLDivElement>;\n  /** Current Sla. This is used to display progress ring color. */\n  sla?: 'goal' | 'deadline' | 'past-deadline';\n  /** Progress % of the current stage\n   * @default 0\n   */\n  progress?: number;\n  /** Indicates if there are any unread notifications\n   * @default false\n   */\n  hasNotifications?: boolean;\n  /** Meta info */\n  meta?: string;\n  /** Aria label for screen readers. */\n  ariaLabel?: string;\n}\n\nexport const StyledInteractionTimerIconWrapper = styled.span``;\nexport const StyledInteractionTimerIcon = styled(Icon)``;\nexport const StyledInteractionTimerMetaText = styled.span``;\n\ntype InteractionTimerPropsWithDefaults = PropsWithDefaults<InteractionTimerProps, 'sla'>;\n\nexport const StyledInteractionTimer = styled.div<InteractionTimerPropsWithDefaults>(\n  ({\n    sla,\n    hasNotifications,\n    theme: {\n      components: { 'interaction-timer': InteractionTimerTheme }\n    },\n    theme\n  }) => {\n    return css`\n      width: calc(8 * ${theme.base.spacing});\n      flex-shrink: 0;\n\n      ${StyledInteractionTimerIconWrapper} {\n        font-size: 2.2rem;\n        position: relative;\n        display: inline-flex;\n        padding: calc(0.3 * ${theme.base.spacing});\n        ${hasNotifications &&\n        css`\n          &::after {\n            position: absolute;\n            background-color: ${InteractionTimerTheme['notification-indicator']};\n            border-radius: 50%;\n            content: '';\n            top: 0;\n            right: 0;\n            width: 0.3rem;\n            height: 0.3rem;\n          }\n        `}\n      }\n\n      ${StyledProgressRing} {\n        circle {\n          stroke-width: 1;\n          stroke: ${sla\n            ? InteractionTimerTheme.sla[sla].progress['secondary-color']\n            : 'currentcolor'};\n        }\n        circle + circle {\n          stroke: ${sla\n            ? InteractionTimerTheme.sla[sla].progress['primary-color']\n            : 'currentcolor'};\n        }\n      }\n      ${StyledInteractionTimerIcon} {\n        font-size: 1.5rem;\n        margin: auto;\n        position: absolute;\n        display: inline-flex;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        right: 0;\n        width: 100%;\n        align-items: center;\n        justify-content: center;\n      }\n      ${StyledInteractionTimerMetaText} {\n        color: inherit;\n      }\n    `;\n  }\n);\n\nStyledInteractionTimer.defaultProps = defaultThemeProp;\n\nconst InteractionTimer: FunctionComponent<InteractionTimerProps & ForwardProps> = forwardRef(\n  function InteractionTimer(\n    {\n      icon,\n      progress = 0,\n      hasNotifications = false,\n      meta,\n      sla,\n      ariaLabel,\n      ...restProps\n    }: PropsWithoutRef<InteractionTimerProps>,\n    ref: InteractionTimerProps['ref']\n  ) {\n    const [currentTimeLabel, setCurrentTimeLabel] = useState('');\n    const containerRef = useConsolidatedRef(ref);\n    const labelRef = useRef('');\n\n    useEffect(() => {\n      if (ariaLabel) labelRef.current = ariaLabel;\n    }, [ariaLabel]);\n\n    useEffect(() => {\n      const onFocus = () => {\n        if (document.activeElement?.contains(containerRef.current) && labelRef.current) {\n          setCurrentTimeLabel(labelRef.current);\n        }\n      };\n\n      document.addEventListener('focusin', onFocus);\n      return () => {\n        document.removeEventListener('focusin', onFocus);\n      };\n    }, []);\n\n    return (\n      <Flex\n        {...restProps}\n        ref={containerRef}\n        container={{\n          direction: 'column',\n          alignItems: 'center'\n        }}\n        sla={sla}\n        hasNotifications={hasNotifications}\n        as={StyledInteractionTimer}\n        aria-label={currentTimeLabel}\n        role='timer'\n      >\n        <StyledInteractionTimerIconWrapper>\n          <StyledInteractionTimerIcon name={icon} />\n          <Progress\n            variant='ring'\n            minValue={0}\n            maxValue={100}\n            value={progress}\n            placement='inline'\n            aria-hidden='true'\n          />\n        </StyledInteractionTimerIconWrapper>\n        {meta && (\n          <Text variant='secondary' as={StyledInteractionTimerMetaText} aria-hidden='true'>\n            {meta}\n          </Text>\n        )}\n      </Flex>\n    );\n  }\n);\n\nexport default InteractionTimer;\n"]}

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

@@ -0,0 +1,3 @@
+export { default } from './InteractionTimer';
+export type { InteractionTimerProps } from './InteractionTimer';
+//# sourceMappingURL=index.d.ts.map