@pega/cosmos-react-cs 3.0.0-dev.2.0 → 3.0.0-dev.21.0

package/lib/components/CallControlPanel/ExternalCTI.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { defaultThemeProp } from '@pega/cosmos-react-core';
+import FloatingPanel from './FloatingPanel';
+const StyledExternalCTIPanel = styled(FloatingPanel)(({ theme: { components: { card: { 'border-radius': borderRadius } } } }) => {
+    return css `
+      width: auto;
+      iframe {
+        border: transparent;
+        display: block;
+        border-end-start-radius: ${borderRadius};
+        border-end-end-radius: ${borderRadius};
+      }
+    `;
+});
+StyledExternalCTIPanel.defaultProps = defaultThemeProp;
+const StyledCTIContainer = styled.div `
+  width: var(--cti-container-width, auto);
+  height: var(--cti-container-height, auto);
+  overflow-y: auto;
+`;
+StyledCTIContainer.defaultProps = defaultThemeProp;
+const ExternalCTI = forwardRef(({ heading, draggable = false, visible = true, size }, ref) => {
+    return (_jsx(StyledExternalCTIPanel, { heading: heading, draggable: draggable, visible: visible, children: _jsx(StyledCTIContainer, { style: size
+                ? {
+                    '--cti-container-width': `${size.width}px`,
+                    '--cti-container-height': `${size.height}px`
+                }
+                : undefined, ref: ref }) }));
+});
+export default ExternalCTI;
+//# sourceMappingURL=ExternalCTI.js.map

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

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

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

@@ -0,0 +1,36 @@
+import { FunctionComponent, ReactNode, Ref } from 'react';
+import { ForwardProps, Action, IconNames } from '@pega/cosmos-react-core';
+export interface FloatingPanelActionProps extends ForwardProps {
+    /** A string to uniquely identify this Action within the onClick handler. */
+    id: Action['id'];
+    /** The text content of the Action. */
+    text: Action['text'];
+    /** Name of the icon from the cosmos set. */
+    icon: IconNames;
+    /** Determines if the Action will be disabled. */
+    disabled?: Action['disabled'];
+    /** Called when the Action is clicked. */
+    onClick: NonNullable<Action['onClick']>;
+}
+export interface FloatingPanelProps {
+    /** The heading rendered. */
+    heading: string;
+    /** Content of the panel */
+    children: ReactNode;
+    /** Action button to be rendered in header */
+    actions?: FloatingPanelActionProps[];
+    /** If true, the component will be draggable */
+    draggable?: boolean;
+    /** If true, the panel is visible. */
+    visible?: boolean;
+    /** Reference to the root component. */
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const StyledFloatingPanel: import("styled-components").StyledComponent<"article", import("styled-components").DefaultTheme, Partial<import("@pega/cosmos-react-core").CardProps> & {
+    isCollapsed: boolean;
+    isDraggable?: boolean | undefined;
+    isVisible?: boolean | undefined;
+}, never>;
+declare const FloatingPanel: FunctionComponent<FloatingPanelProps & ForwardProps>;
+export default FloatingPanel;
+//# sourceMappingURL=FloatingPanel.d.ts.map

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

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

package/lib/components/CallControlPanel/FloatingPanel.js

@@ -0,0 +1,70 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useLayoutEffect, useRef, useState } from 'react';
+import styled, { css } from 'styled-components';
+import { CardHeader, Button, useI18n, Icon, registerIcon, Flex, Text, useConsolidatedRef, useDraggable, defaultThemeProp, StyledButton, StyledCard } from '@pega/cosmos-react-core';
+import * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';
+import * as phoneSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-solid.icon';
+import { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';
+registerIcon(caretDownIcon, phoneSolidIcon);
+const resetPopoverToDefaultPosition = (containerRef) => {
+    if (containerRef && containerRef.current)
+        containerRef.current.style.transform = 'translate(0px, 0px)';
+};
+export const StyledFloatingPanel = styled(StyledCard)(({ theme, isCollapsed, isDraggable, isVisible = true }) => {
+    return css `
+    max-height: calc(100% - 2rem);
+    position: fixed;
+    z-index: ${theme.base['z-index'].modal};
+    width: 25rem;
+    inset-inline-end: calc(2 * ${theme.base.spacing});
+    bottom: calc(2 * ${theme.base.spacing});
+    box-shadow: ${theme.base.shadow.high};
+
+    ${!isVisible &&
+        css `
+      display: none;
+    `}
+
+    ${isCollapsed &&
+        css `
+      transform: translateY(
+        calc(100% - var(--headerHeight) + calc(2 * ${theme.base.spacing}))
+      ) !important;
+    `}
+
+    ${StyledCardHeader} {
+      ${!isCollapsed &&
+        isDraggable &&
+        css `
+        cursor: all-scroll;
+      `}
+    }
+    ${StyledCardHeader} ${StyledButton}:last-child {
+      transition: transform calc(2 * ${theme.base.animation.speed})
+        ${theme.base.animation.timing.ease};
+      transform: ${isCollapsed ? 'rotate(-180deg)' : 'rotate(0)'};
+    }
+  `;
+});
+StyledFloatingPanel.defaultProps = defaultThemeProp;
+const FloatingPanel = forwardRef(({ heading, actions = [], draggable, children, visible = true, ...restProps }, ref) => {
+    const t = useI18n();
+    const [collapsed, setCollapsed] = useState(false);
+    const containerRef = useConsolidatedRef(ref);
+    const dragRef = useRef(null);
+    useDraggable(containerRef, dragRef, !collapsed && draggable);
+    const [headerHeight, setHeaderHeight] = useState(0);
+    useLayoutEffect(() => {
+        if (containerRef.current) {
+            setHeaderHeight(containerRef.current.querySelector('header')?.offsetHeight || 0);
+        }
+    }, [collapsed]);
+    return (_jsxs(StyledFloatingPanel, { ...restProps, ref: containerRef, isCollapsed: collapsed, isDraggable: draggable, isVisible: visible, style: { '--headerHeight': `${headerHeight}px` }, children: [_jsx(CardHeader, { ref: dragRef, actions: _jsxs(_Fragment, { children: [actions.map(({ id, icon, text, ...restAction }) => (_createElement(Button, { ...restAction, icon: true, variant: 'simple', key: id, label: text },
+                            _jsx(Icon, { name: icon })))), _jsx(Button, { icon: true, variant: 'simple', label: t(collapsed ? 'call_panel_expand' : 'call_panel_collapse'), onClick: () => {
+                                resetPopoverToDefaultPosition(containerRef);
+                                setCollapsed(state => !state);
+                            }, children: _jsx(Icon, { name: 'caret-down' }) }, 'expand-collapse')] }), children: _jsxs(Flex, { container: { alignItems: 'center', itemGap: 1 }, children: [_jsx(Icon, { name: 'phone-solid' }), _jsx(Text, { variant: 'h3', children: heading })] }) }), children] }));
+});
+export default FloatingPanel;
+//# sourceMappingURL=FloatingPanel.js.map

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

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

package/lib/components/CallControlPanel/StopWatch.js

@@ -22,7 +22,7 @@ const StopWatch = memo(({ startTime, timeout }) => {
         }, 1000);
         return () => clearInterval(timer);
     }, [startTime, timeoutMillis]);
-    return (_jsxs(Text, { as: StyledStopWatch, ref: clockRef, children: [formatDuration(Date.now() - millis), timeoutMillis && ` / ${formatDuration(timeoutMillis)}`] }, void 0));
+    return (_jsxs(Text, { as: StyledStopWatch, ref: clockRef, children: [formatDuration(Date.now() - millis), timeoutMillis && ` / ${formatDuration(timeoutMillis)}`] }));
 });
 export default StopWatch;
 //# sourceMappingURL=StopWatch.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"StopWatch.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/StopWatch.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,IAAI,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE3D,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAOzC,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC,CAAA;;;CAGhD,CAAC;AAEF,MAAM,SAAS,GAAsC,IAAI,CACvD,CAAC,EAAE,SAAS,EAAE,OAAO,EAAkB,EAAE,EAAE;IACzC,MAAM,QAAQ,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IAC/C,MAAM,MAAM,GAAG,SAAS,YAAY,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,kBAAkB,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;IACtF,MAAM,aAAa,GAAG,OAAO,YAAY,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,kBAAkB,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;IAEvF,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,EAAE;YAC7B,IAAI,QAAQ,CAAC,OAAO,EAAE;gBACpB,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,MAAM,CAAC,CAAC;gBAClD,IAAI,aAAa;oBAAE,OAAO,IAAI,MAAM,cAAc,CAAC,aAAa,CAAC,EAAE,CAAC;gBACpE,QAAQ,CAAC,OAAO,CAAC,WAAW,GAAG,OAAO,CAAC;aACxC;QACH,CAAC,EAAE,IAAI,CAAC,CAAC;QACT,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACpC,CAAC,EAAE,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC;IAE/B,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,eAAe,EAAE,GAAG,EAAE,QAAQ,aACrC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,MAAM,CAAC,EACnC,aAAa,IAAI,MAAM,cAAc,CAAC,aAAa,CAAC,EAAE,YAClD,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { FunctionComponent, memo, useRef, useLayoutEffect } from 'react';\nimport styled from 'styled-components';\n\nimport { StyledText, Text } from '@pega/cosmos-react-core';\n\nimport { formatDuration } from './utils';\n\ninterface StopWatchProps {\n  startTime: number | Date;\n  timeout?: number | Date;\n}\n\nexport const StyledStopWatch = styled(StyledText)`\n  min-width: 8ch;\n  text-align: end;\n`;\n\nconst StopWatch: FunctionComponent<StopWatchProps> = memo(\n  ({ startTime, timeout }: StopWatchProps) => {\n    const clockRef = useRef<HTMLSpanElement>(null);\n    const millis = startTime instanceof Date ? startTime.getUTCMilliseconds() : startTime;\n    const timeoutMillis = timeout instanceof Date ? timeout.getUTCMilliseconds() : timeout;\n\n    useLayoutEffect(() => {\n      const timer = setInterval(() => {\n        if (clockRef.current) {\n          let content = formatDuration(Date.now() - millis);\n          if (timeoutMillis) content += ` / ${formatDuration(timeoutMillis)}`;\n          clockRef.current.textContent = content;\n        }\n      }, 1000);\n      return () => clearInterval(timer);\n    }, [startTime, timeoutMillis]);\n\n    return (\n      <Text as={StyledStopWatch} ref={clockRef}>\n        {formatDuration(Date.now() - millis)}\n        {timeoutMillis && ` / ${formatDuration(timeoutMillis)}`}\n      </Text>\n    );\n  }\n);\n\nexport default StopWatch;\n"]}
+{"version":3,"file":"StopWatch.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/StopWatch.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,IAAI,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE3D,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAOzC,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC,CAAA;;;CAGhD,CAAC;AAEF,MAAM,SAAS,GAAsC,IAAI,CACvD,CAAC,EAAE,SAAS,EAAE,OAAO,EAAkB,EAAE,EAAE;IACzC,MAAM,QAAQ,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IAC/C,MAAM,MAAM,GAAG,SAAS,YAAY,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,kBAAkB,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;IACtF,MAAM,aAAa,GAAG,OAAO,YAAY,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,kBAAkB,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;IAEvF,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,EAAE;YAC7B,IAAI,QAAQ,CAAC,OAAO,EAAE;gBACpB,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,MAAM,CAAC,CAAC;gBAClD,IAAI,aAAa;oBAAE,OAAO,IAAI,MAAM,cAAc,CAAC,aAAa,CAAC,EAAE,CAAC;gBACpE,QAAQ,CAAC,OAAO,CAAC,WAAW,GAAG,OAAO,CAAC;aACxC;QACH,CAAC,EAAE,IAAI,CAAC,CAAC;QACT,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACpC,CAAC,EAAE,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC;IAE/B,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,eAAe,EAAE,GAAG,EAAE,QAAQ,aACrC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,MAAM,CAAC,EACnC,aAAa,IAAI,MAAM,cAAc,CAAC,aAAa,CAAC,EAAE,IAClD,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { FunctionComponent, memo, useRef, useLayoutEffect } from 'react';\nimport styled from 'styled-components';\n\nimport { StyledText, Text } from '@pega/cosmos-react-core';\n\nimport { formatDuration } from './utils';\n\ninterface StopWatchProps {\n  startTime: number | Date;\n  timeout?: number | Date;\n}\n\nexport const StyledStopWatch = styled(StyledText)`\n  min-width: 8ch;\n  text-align: end;\n`;\n\nconst StopWatch: FunctionComponent<StopWatchProps> = memo(\n  ({ startTime, timeout }: StopWatchProps) => {\n    const clockRef = useRef<HTMLSpanElement>(null);\n    const millis = startTime instanceof Date ? startTime.getUTCMilliseconds() : startTime;\n    const timeoutMillis = timeout instanceof Date ? timeout.getUTCMilliseconds() : timeout;\n\n    useLayoutEffect(() => {\n      const timer = setInterval(() => {\n        if (clockRef.current) {\n          let content = formatDuration(Date.now() - millis);\n          if (timeoutMillis) content += ` / ${formatDuration(timeoutMillis)}`;\n          clockRef.current.textContent = content;\n        }\n      }, 1000);\n      return () => clearInterval(timer);\n    }, [startTime, timeoutMillis]);\n\n    return (\n      <Text as={StyledStopWatch} ref={clockRef}>\n        {formatDuration(Date.now() - millis)}\n        {timeoutMillis && ` / ${formatDuration(timeoutMillis)}`}\n      </Text>\n    );\n  }\n);\n\nexport default StopWatch;\n"]}

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

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

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

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

package/lib/components/CallControlPanel/index.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAM7C,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["export { default } from './CallControlPanel';\nexport {\n  CallProps,\n  CallControlPanelProps,\n  UserAvailabilityStatusOption\n} from './CallControlPanel.types';\nexport { default as CallControlPanelIcon } from './CallControlPanelIcon';\nexport { default as CalleePicker } from './CalleePicker';\n"]}
+{"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"]}

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

@@ -1,5 +1,5 @@
 export declare const formatDuration: (millis: number) => string;
-export declare const calculateSla: (callDuration: number, slaConfig?: number[] | undefined) => {
+export declare const calculateSla: (callDuration: number, slaConfig?: number[]) => {
     slaTimeout?: number;
     slaDuration?: number;
     currentSlaLevel?: number;

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

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/utils.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,WAAY,MAAM,KAAG,MAG/C,CAAC;AAEF,eAAO,MAAM,YAAY,iBACT,MAAM,uCAEnB;IACD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;CA6B1B,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/utils.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,WAAY,MAAM,KAAG,MAG/C,CAAC;AAEF,eAAO,MAAM,YAAY,iBACT,MAAM,cACR,MAAM,EAAE,KACnB;IACD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;CA6B1B,CAAC"}

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' }, void 0), 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') }, void 0))] }, void 0), _jsx(DialPadKeyboard, { onDialButtonClick: onDialButtonClick, mode: mode }, void 0)] }, void 0));
+    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 })] }));
 });
 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,WACzB,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,WACzB,CACV,YACI,EACP,KAAC,eAAe,IAAC,iBAAiB,EAAE,iBAAiB,EAAE,IAAI,EAAE,IAAI,WAAI,YACvD,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,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"]}

package/lib/components/DialPad/DialPadKeyboard.js

@@ -78,10 +78,10 @@ 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 }, void 0), dialButton.alt && _jsx("span", { children: dialButton.alt }, void 0)] }, 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 }, void 0), dialButton.alt && _jsx("span", { children: dialButton.alt }, void 0), dialButton.special && _jsx(StyledSpecial, { children: dialButton.special }, void 0), dialButton.icon && _jsx(Icon, { name: dialButton.icon }, void 0)] }, 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, { 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;
-        }) }, void 0));
+        }) }));
 });
 export default DialPadKeyboard;
 //# sourceMappingURL=DialPadKeyboard.js.map

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                      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/IntelligentGuidance/IntelligentGuidance.js

@@ -22,7 +22,7 @@ const IntelligentGuidance = forwardRef(({ items, heading, ...restProps }, ref) =
     const listItems = items.map(item => {
         return {
             id: item.id,
-            visual: _jsx(Icon, { name: item.icon }, void 0),
+            visual: _jsx(Icon, { name: item.icon }),
             primary: item.label,
             secondary: item.type,
             actions: item.onDismiss
@@ -67,9 +67,9 @@ const IntelligentGuidance = forwardRef(({ items, heading, ...restProps }, ref) =
                         setIsCollapsed(prevState => !prevState);
                     }
                 }
-            ], EmptyStateText: t('no_recommendations'), style: { '--headerHeight': `${headerHeight}px` } }, void 0)) : (_jsxs(StyledIntelligentGuidanceButton, { variant: 'simple', "aria-label": t('expand_intelligent_guidance_button_a11y'), icon: true, onClick: () => {
+            ], EmptyStateText: t('no_recommendations'), style: { '--headerHeight': `${headerHeight}px` } })) : (_jsxs(StyledIntelligentGuidanceButton, { variant: 'simple', "aria-label": t('expand_intelligent_guidance_button_a11y'), icon: true, onClick: () => {
                 setIsCollapsed(false);
-            }, children: [_jsx(Icon, { name: 'polaris-solid' }, void 0), _jsx(Count, { children: items.length }, void 0)] }, void 0)) }, void 0));
+            }, children: [_jsx(Icon, { name: 'polaris-solid' }), _jsx(Count, { children: items.length })] })) }));
 });
 export default IntelligentGuidance;
 //# sourceMappingURL=IntelligentGuidance.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"IntelligentGuidance.js","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  KeyboardEvent,\n  PropsWithoutRef,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState\n} from 'react';\n\nimport {\n  ForwardProps,\n  Icon,\n  registerIcon,\n  SummaryListItem,\n  useI18n,\n  Count,\n  useBreakpoint,\n  usePrevious\n} from '@pega/cosmos-react-core';\nimport * as polarisSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/polaris-solid.icon';\n\nimport {\n  StyledIntelligentGuidanceList,\n  StyledIntelligentGuidance,\n  StyledIntelligentGuidanceButton\n} from './IntelligentGuidance.styles';\nimport type IntelligentGuidanceProps from './IntelligentGuidance.types';\n\nregisterIcon(polarisSolidIcon);\n\nconst IntelligentGuidance: FunctionComponent<IntelligentGuidanceProps & ForwardProps> = forwardRef(\n  (\n    { items, heading, ...restProps }: PropsWithoutRef<IntelligentGuidanceProps>,\n    ref: IntelligentGuidanceProps['ref']\n  ) => {\n    const t = useI18n();\n    const isMediumOrAbove = useBreakpoint('md');\n    const [isCollapsed, setIsCollapsed] = useState(true);\n    const previousItems = usePrevious(items);\n    const summaryListRef = useRef<HTMLElement>(null);\n\n    useEffect(() => {\n      const previousItemsCount = previousItems?.length || 0;\n      if (previousItemsCount < items.length) {\n        setIsCollapsed(false);\n      } else if (previousItemsCount && !items.length) {\n        setIsCollapsed(true);\n      }\n    }, [previousItems, items]);\n\n    const listItems: SummaryListItem[] = items.map(item => {\n      return {\n        id: item.id,\n        visual: <Icon name={item.icon} />,\n        primary: item.label,\n        secondary: item.type,\n        actions: item.onDismiss\n          ? [\n              {\n                text: t('dismiss_label_a11y', [item.label]),\n                id: item.id,\n                icon: 'times',\n                onClick: (id, e) => {\n                  e.stopPropagation();\n                  item.onDismiss?.(id, e);\n                }\n              }\n            ]\n          : undefined,\n        container: { colGap: 1 },\n        role: 'button',\n        tabIndex: 0,\n        'aria-label': t('continue_label_a11y', [item.label]),\n        onClick: item.onClick,\n        onKeyDown: (e: KeyboardEvent) => {\n          if (e.key === 'Enter') {\n            item.onClick(e);\n          }\n        }\n      };\n    });\n\n    const [headerHeight, setHeaderHeight] = useState(0);\n\n    useLayoutEffect(() => {\n      if (summaryListRef.current) {\n        setHeaderHeight(summaryListRef.current.querySelector('header')?.offsetHeight || 0);\n      }\n    }, [summaryListRef.current]);\n\n    return (\n      <StyledIntelligentGuidance\n        {...restProps}\n        ref={ref}\n        role='region'\n        aria-live='polite'\n        aria-relevant='all'\n        isCollapsed={isCollapsed}\n        hasItems={!!items.length}\n      >\n        {isMediumOrAbove || !isCollapsed ? (\n          <StyledIntelligentGuidanceList\n            ref={summaryListRef}\n            icon='polaris-solid'\n            name={heading}\n            count={items.length}\n            items={listItems}\n            actions={[\n              {\n                text: t(\n                  isCollapsed\n                    ? 'expand_intelligent_guidance_button_a11y'\n                    : 'collapse_intelligent_guidance_button_a11y'\n                ),\n                id: 'IntelligentGuidanceButton',\n                icon: 'caret-down',\n                onClick() {\n                  setIsCollapsed(prevState => !prevState);\n                }\n              }\n            ]}\n            EmptyStateText={t('no_recommendations')}\n            style={{ '--headerHeight': `${headerHeight}px` }}\n          />\n        ) : (\n          <StyledIntelligentGuidanceButton\n            variant='simple'\n            aria-label={t('expand_intelligent_guidance_button_a11y')}\n            icon\n            onClick={() => {\n              setIsCollapsed(false);\n            }}\n          >\n            <Icon name='polaris-solid' />\n            <Count>{items.length}</Count>\n          </StyledIntelligentGuidanceButton>\n        )}\n      </StyledIntelligentGuidance>\n    );\n  }\n);\n\nexport default IntelligentGuidance;\n"]}
+{"version":3,"file":"IntelligentGuidance.js","sourceRoot":"","sources":["../../../src/components/IntelligentGuidance/IntelligentGuidance.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  KeyboardEvent,\n  PropsWithoutRef,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState\n} from 'react';\n\nimport {\n  ForwardProps,\n  Icon,\n  registerIcon,\n  SummaryListItem,\n  useI18n,\n  Count,\n  useBreakpoint,\n  usePrevious\n} from '@pega/cosmos-react-core';\nimport * as polarisSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/polaris-solid.icon';\n\nimport {\n  StyledIntelligentGuidanceList,\n  StyledIntelligentGuidance,\n  StyledIntelligentGuidanceButton\n} from './IntelligentGuidance.styles';\nimport type IntelligentGuidanceProps from './IntelligentGuidance.types';\n\nregisterIcon(polarisSolidIcon);\n\nconst IntelligentGuidance: FunctionComponent<IntelligentGuidanceProps & ForwardProps> = forwardRef(\n  (\n    { items, heading, ...restProps }: PropsWithoutRef<IntelligentGuidanceProps>,\n    ref: IntelligentGuidanceProps['ref']\n  ) => {\n    const t = useI18n();\n    const isMediumOrAbove = useBreakpoint('md');\n    const [isCollapsed, setIsCollapsed] = useState(true);\n    const previousItems = usePrevious(items);\n    const summaryListRef = useRef<HTMLElement>(null);\n\n    useEffect(() => {\n      const previousItemsCount = previousItems?.length || 0;\n      if (previousItemsCount < items.length) {\n        setIsCollapsed(false);\n      } else if (previousItemsCount && !items.length) {\n        setIsCollapsed(true);\n      }\n    }, [previousItems, items]);\n\n    const listItems: SummaryListItem[] = items.map(item => {\n      return {\n        id: item.id,\n        visual: <Icon name={item.icon} />,\n        primary: item.label,\n        secondary: item.type,\n        actions: item.onDismiss\n          ? [\n              {\n                text: t('dismiss_label_a11y', [item.label]),\n                id: item.id,\n                icon: 'times',\n                onClick: (id, e) => {\n                  e.stopPropagation();\n                  item.onDismiss?.(id, e);\n                }\n              }\n            ]\n          : undefined,\n        container: { colGap: 1 },\n        role: 'button',\n        tabIndex: 0,\n        'aria-label': t('continue_label_a11y', [item.label]),\n        onClick: item.onClick,\n        onKeyDown: (e: KeyboardEvent) => {\n          if (e.key === 'Enter') {\n            item.onClick(e);\n          }\n        }\n      };\n    });\n\n    const [headerHeight, setHeaderHeight] = useState(0);\n\n    useLayoutEffect(() => {\n      if (summaryListRef.current) {\n        setHeaderHeight(summaryListRef.current.querySelector('header')?.offsetHeight || 0);\n      }\n    }, [summaryListRef.current]);\n\n    return (\n      <StyledIntelligentGuidance\n        {...restProps}\n        ref={ref}\n        role='region'\n        aria-live='polite'\n        aria-relevant='all'\n        isCollapsed={isCollapsed}\n        hasItems={!!items.length}\n      >\n        {isMediumOrAbove || !isCollapsed ? (\n          <StyledIntelligentGuidanceList\n            ref={summaryListRef}\n            icon='polaris-solid'\n            name={heading}\n            count={items.length}\n            items={listItems}\n            actions={[\n              {\n                text: t(\n                  isCollapsed\n                    ? 'expand_intelligent_guidance_button_a11y'\n                    : 'collapse_intelligent_guidance_button_a11y'\n                ),\n                id: 'IntelligentGuidanceButton',\n                icon: 'caret-down',\n                onClick() {\n                  setIsCollapsed(prevState => !prevState);\n                }\n              }\n            ]}\n            EmptyStateText={t('no_recommendations')}\n            style={{ '--headerHeight': `${headerHeight}px` }}\n          />\n        ) : (\n          <StyledIntelligentGuidanceButton\n            variant='simple'\n            aria-label={t('expand_intelligent_guidance_button_a11y')}\n            icon\n            onClick={() => {\n              setIsCollapsed(false);\n            }}\n          >\n            <Icon name='polaris-solid' />\n            <Count>{items.length}</Count>\n          </StyledIntelligentGuidanceButton>\n        )}\n      </StyledIntelligentGuidance>\n    );\n  }\n);\n\nexport default IntelligentGuidance;\n"]}

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') }, void 0), children: _jsx(SummaryItem, { visual: _jsx(Avatar, { shape: 'circle', size: 'm', name: title, icon: icon }, void 0), primary: title }, void 0) }, void 0), _jsx(CardContent, { children: _jsxs(Flex, { container: { direction: 'column', alignItems: 'center', gap: 1 }, children: [_jsx(Text, { variant: 'h1', children: primaryText }, void 0), secondaryText && _jsx(Text, { variant: 'secondary', children: secondaryText }, void 0), _jsx(Status, { variant: status.variant, children: status.text }, void 0)] }, void 0) }, void 0), fields && fields.length !== 0 && (_jsx(CardFooter, { children: _jsx(FieldValueList, { variant: 'inline', fields: fields }, void 0) }, void 0))] }, void 0));
+    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 }) }))] }));
 });
 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              <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"]}

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

@@ -1 +1 @@
-{"version":3,"file":"InteractionTimer.d.ts","sourceRoot":"","sources":["../../../src/components/InteractionTimer/InteractionTimer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5E,OAAO,EACL,SAAS,EACT,MAAM,EAKN,YAAY,EAIZ,cAAc,EACf,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,yGAAe,CAAC;AACvD,eAAO,MAAM,8BAA8B,0GAAgB,CAAC;AAI5D,eAAO,MAAM,sBAAsB,gOAgElC,CAAC;AAIF,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CA4C7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"InteractionTimer.d.ts","sourceRoot":"","sources":["../../../src/components/InteractionTimer/InteractionTimer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5E,OAAO,EACL,SAAS,EACT,MAAM,EAKN,YAAY,EAIZ,cAAc,EACf,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,yGAAe,CAAC;AACvD,eAAO,MAAM,8BAA8B,0GAAgB,CAAC;AAI5D,eAAO,MAAM,sBAAsB,gOAgElC,CAAC;AAIF,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CA+C7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/components/InteractionTimer/InteractionTimer.js

@@ -66,7 +66,7 @@ const InteractionTimer = forwardRef(({ icon, progress = 0, hasNotifications = fa
     return (_jsxs(Flex, { ...restProps, ref: ref, container: {
             direction: 'column',
             alignItems: 'center'
-        }, sla: sla, hasNotifications: hasNotifications, as: StyledInteractionTimer, "aria-label": ariaLabel, children: [_jsxs(StyledInteractionTimerIconWrapper, { children: [_jsx(Icon, { name: icon, as: StyledInteractionTimerIcon }, void 0), _jsx(Progress, { variant: 'ring', minValue: 0, maxValue: 100, value: progress, placement: 'inline' }, void 0)] }, void 0), meta && (_jsx(Text, { variant: 'secondary', as: StyledInteractionTimerMetaText, children: meta }, void 0))] }, void 0));
+        }, sla: sla, hasNotifications: hasNotifications, as: StyledInteractionTimer, "aria-label": ariaLabel, "aria-live": 'polite', role: 'timer', children: [_jsxs(StyledInteractionTimerIconWrapper, { children: [_jsx(Icon, { name: icon, as: StyledInteractionTimerIcon }), _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

@@ -1 +1 @@
-{"version":3,"file":"InteractionTimer.js","sourceRoot":"","sources":["../../../src/components/InteractionTimer/InteractionTimer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAGL,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,QAAQ,EAER,gBAAgB,EAChB,kBAAkB,EAGnB,MAAM,yBAAyB,CAAC;AAuBjC,MAAM,CAAC,MAAM,iCAAiC,GAAG,MAAM,CAAC,IAAI,CAAA,EAAE,CAAC;AAC/D,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AACvD,MAAM,CAAC,MAAM,8BAA8B,GAAG,MAAM,CAAC,IAAI,CAAA,EAAE,CAAC;AAI5D,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAC9C,CAAC,EACC,GAAG,EACH,gBAAgB,EAChB,KAAK,EAAE,EACL,UAAU,EAAE,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,EAC3D,EACD,KAAK,EACN,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;wBACU,KAAK,CAAC,IAAI,CAAC,OAAO;;;QAGlC,iCAAiC;;;;8BAIX,KAAK,CAAC,IAAI,CAAC,OAAO;UACtC,gBAAgB;QAClB,GAAG,CAAA;;;gCAGqB,qBAAqB,CAAC,wBAAwB,CAAC;;;;;;;;SAQtE;;;QAGD,kBAAkB;;;oBAGN,GAAG;QACX,CAAC,CAAC,qBAAqB,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,iBAAiB,CAAC;QAC5D,CAAC,CAAC,cAAc;;;oBAGR,GAAG;QACX,CAAC,CAAC,qBAAqB,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,eAAe,CAAC;QAC1D,CAAC,CAAC,cAAc;;;QAGpB,0BAA0B;;;;;;;;;;;;;QAa1B,8BAA8B;;;KAGjC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,gBAAgB,GAA4D,UAAU,CAC1F,CACE,EACE,IAAI,EACJ,QAAQ,GAAG,CAAC,EACZ,gBAAgB,GAAG,KAAK,EACxB,IAAI,EACJ,GAAG,EACH,SAAS,EACT,GAAG,SAAS,EAC2B,EACzC,GAAiC,EACjC,EAAE;IACF,OAAO,CACL,MAAC,IAAI,OACC,SAAS,EACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE;YACT,SAAS,EAAE,QAAQ;YACnB,UAAU,EAAE,QAAQ;SACrB,EACD,GAAG,EAAE,GAAG,EACR,gBAAgB,EAAE,gBAAgB,EAClC,EAAE,EAAE,sBAAsB,gBACd,SAAS,aAErB,MAAC,iCAAiC,eAChC,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,0BAA0B,WAAI,EACpD,KAAC,QAAQ,IACP,OAAO,EAAC,MAAM,EACd,QAAQ,EAAE,CAAC,EACX,QAAQ,EAAE,GAAG,EACb,KAAK,EAAE,QAAQ,EACf,SAAS,EAAC,QAAQ,WAClB,YACgC,EACnC,IAAI,IAAI,CACP,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,EAAC,EAAE,EAAE,8BAA8B,YACzD,IAAI,WACA,CACR,YACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } 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} 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.svg``;\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  (\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    return (\n      <Flex\n        {...restProps}\n        ref={ref}\n        container={{\n          direction: 'column',\n          alignItems: 'center'\n        }}\n        sla={sla}\n        hasNotifications={hasNotifications}\n        as={StyledInteractionTimer}\n        aria-label={ariaLabel}\n      >\n        <StyledInteractionTimerIconWrapper>\n          <Icon name={icon} as={StyledInteractionTimerIcon} />\n          <Progress\n            variant='ring'\n            minValue={0}\n            maxValue={100}\n            value={progress}\n            placement='inline'\n          />\n        </StyledInteractionTimerIconWrapper>\n        {meta && (\n          <Text variant='secondary' as={StyledInteractionTimerMetaText}>\n            {meta}\n          </Text>\n        )}\n      </Flex>\n    );\n  }\n);\n\nexport default InteractionTimer;\n"]}
+{"version":3,"file":"InteractionTimer.js","sourceRoot":"","sources":["../../../src/components/InteractionTimer/InteractionTimer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC5E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAGL,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,QAAQ,EAER,gBAAgB,EAChB,kBAAkB,EAGnB,MAAM,yBAAyB,CAAC;AAuBjC,MAAM,CAAC,MAAM,iCAAiC,GAAG,MAAM,CAAC,IAAI,CAAA,EAAE,CAAC;AAC/D,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AACvD,MAAM,CAAC,MAAM,8BAA8B,GAAG,MAAM,CAAC,IAAI,CAAA,EAAE,CAAC;AAI5D,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAC9C,CAAC,EACC,GAAG,EACH,gBAAgB,EAChB,KAAK,EAAE,EACL,UAAU,EAAE,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,EAC3D,EACD,KAAK,EACN,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;wBACU,KAAK,CAAC,IAAI,CAAC,OAAO;;;QAGlC,iCAAiC;;;;8BAIX,KAAK,CAAC,IAAI,CAAC,OAAO;UACtC,gBAAgB;QAClB,GAAG,CAAA;;;gCAGqB,qBAAqB,CAAC,wBAAwB,CAAC;;;;;;;;SAQtE;;;QAGD,kBAAkB;;;oBAGN,GAAG;QACX,CAAC,CAAC,qBAAqB,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,iBAAiB,CAAC;QAC5D,CAAC,CAAC,cAAc;;;oBAGR,GAAG;QACX,CAAC,CAAC,qBAAqB,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,eAAe,CAAC;QAC1D,CAAC,CAAC,cAAc;;;QAGpB,0BAA0B;;;;;;;;;;;;;QAa1B,8BAA8B;;;KAGjC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,gBAAgB,GAA4D,UAAU,CAC1F,CACE,EACE,IAAI,EACJ,QAAQ,GAAG,CAAC,EACZ,gBAAgB,GAAG,KAAK,EACxB,IAAI,EACJ,GAAG,EACH,SAAS,EACT,GAAG,SAAS,EAC2B,EACzC,GAAiC,EACjC,EAAE;IACF,OAAO,CACL,MAAC,IAAI,OACC,SAAS,EACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE;YACT,SAAS,EAAE,QAAQ;YACnB,UAAU,EAAE,QAAQ;SACrB,EACD,GAAG,EAAE,GAAG,EACR,gBAAgB,EAAE,gBAAgB,EAClC,EAAE,EAAE,sBAAsB,gBACd,SAAS,eACX,QAAQ,EAClB,IAAI,EAAC,OAAO,aAEZ,MAAC,iCAAiC,eAChC,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,0BAA0B,GAAI,EACpD,KAAC,QAAQ,IACP,OAAO,EAAC,MAAM,EACd,QAAQ,EAAE,CAAC,EACX,QAAQ,EAAE,GAAG,EACb,KAAK,EAAE,QAAQ,EACf,SAAS,EAAC,QAAQ,iBACN,MAAM,GAClB,IACgC,EACnC,IAAI,IAAI,CACP,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,EAAC,EAAE,EAAE,8BAA8B,iBAAc,MAAM,YAC7E,IAAI,GACA,CACR,IACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } 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} 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.svg``;\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  (\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    return (\n      <Flex\n        {...restProps}\n        ref={ref}\n        container={{\n          direction: 'column',\n          alignItems: 'center'\n        }}\n        sla={sla}\n        hasNotifications={hasNotifications}\n        as={StyledInteractionTimer}\n        aria-label={ariaLabel}\n        aria-live='polite'\n        role='timer'\n      >\n        <StyledInteractionTimerIconWrapper>\n          <Icon name={icon} as={StyledInteractionTimerIcon} />\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/TaskManager/ConversationAI.d.ts

@@ -0,0 +1,6 @@
+import { FunctionComponent } from 'react';
+import { ForwardProps } from '@pega/cosmos-react-core';
+import { ConversationAIProps } from './TaskManager.types';
+declare const ConversationAI: FunctionComponent<ConversationAIProps & ForwardProps>;
+export default ConversationAI;
+//# sourceMappingURL=ConversationAI.d.ts.map

package/lib/components/TaskManager/ConversationAI.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConversationAI.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/ConversationAI.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAiD,MAAM,OAAO,CAAC;AAEzF,OAAO,EAEL,YAAY,EASb,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAU1D,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAqEzE,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/TaskManager/ConversationAI.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState, useRef } from 'react';
+import { Flex, Button, useOuterEvent, useEscape, Icon, Text, EmptyState, useI18n, registerIcon } from '@pega/cosmos-react-core';
+import * as aiAssistIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/ai-assist.icon';
+import { StyledCountBadge, StyledEntityPopover, StyledContent, StyledHeader } from './TaskManager.styles';
+registerIcon(aiAssistIcon);
+const ConversationAI = forwardRef(({ content, entityCount }, ref) => {
+    const t = useI18n();
+    const [showPopover, setShowPopover] = useState(false);
+    const buttonRef = useRef(null);
+    const popoverRef = useRef(null);
+    useOuterEvent('mousedown', [popoverRef, buttonRef], () => {
+        if (showPopover)
+            setShowPopover(false);
+    });
+    useEscape(() => {
+        setShowPopover(false);
+    });
+    return (_jsxs(Flex, { ref: ref, children: [_jsxs(Button, { variant: 'simple', icon: true, onClick: () => {
+                    setShowPopover(cur => !cur);
+                }, ref: buttonRef, "aria-label": t('show_detected_entities'), children: [_jsx(Icon, { name: 'ai-assist' }), _jsx(StyledCountBadge, { variant: 'default', children: entityCount })] }), _jsxs(StyledEntityPopover, { show: showPopover, target: buttonRef.current, placement: 'bottom-start', ref: popoverRef, arrow: true, children: [_jsxs(Flex, { container: {
+                            justify: 'between',
+                            alignItems: 'center'
+                        }, as: StyledHeader, children: [_jsx(Text, { variant: 'h3', children: t('ai_detected_entities') }), _jsx(Button, { variant: 'simple', onClick: () => {
+                                    setShowPopover(false);
+                                }, icon: true, "aria-label": t('close_conversation'), children: _jsx(Icon, { name: 'times' }) })] }), _jsx(StyledContent, { children: entityCount === 0 || content === null ? (_jsx(EmptyState, { message: t('nothing_detected_yet'), item: { grow: 1 } })) : (content) })] })] }));
+});
+export default ConversationAI;
+//# sourceMappingURL=ConversationAI.js.map