@pega/cosmos-react-cs 2.1.6 → 2.1.7

package/lib/components/TaskManager/TaskManagerTabs.js

@@ -0,0 +1,159 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useContext, createRef, useMemo, useRef, useEffect, useState, useLayoutEffect } from 'react';
+import { Flex, useDirection } from '@pega/cosmos-react-core';
+import { useI18n } from '@pega/cosmos-react-core/lib/hooks';
+import { StyledTaskManagerTabs, StyleTaskName, StyledTaskStatus, StyledTasksTabList, StyledTaskManagerTab, StyledOverflowTabMenu } from './TaskManager.styles';
+import TaskManagerContext from './TaskManager.context';
+const TaskManagerTabs = forwardRef((props, ref) => {
+    const { wrapUp, tasks = [], onTaskLaunch } = useContext(TaskManagerContext);
+    const t = useI18n();
+    const [isOverflowing, setIsOverflowing] = useState(false);
+    // Used to keep a reference for every tab in order to focus them with key presses
+    const tabRefs = tasks.map(() => createRef());
+    const wrapUpRef = useRef(null);
+    const { rtl } = useDirection();
+    const menuTasksArr = useMemo(() => {
+        const tasksData = tasks.map(task => {
+            return {
+                primary: task.name,
+                secondary: [
+                    _jsx(StyledTaskStatus, { variant: task.status?.variant || 'info', children: task.variant }, void 0)
+                ],
+                id: task.id,
+                selected: !!task.active,
+                onClick: () => {
+                    onTaskLaunch?.(task.id);
+                }
+            };
+        });
+        if (wrapUp?.showTab) {
+            tasksData.push({
+                primary: t('task_manager_wrap_up'),
+                secondary: [],
+                id: '',
+                selected: !!wrapUp.active,
+                onClick: () => {
+                    wrapUp?.onWrapUp();
+                }
+            });
+        }
+        return tasksData;
+    }, [wrapUp?.showTab, wrapUp?.onWrapUp, wrapUp?.active, tasks]);
+    const tabListRef = useRef(null);
+    const checkAndUpdateIsOverflowing = () => {
+        if (tabListRef.current) {
+            const value = tabListRef.current.scrollWidth > tabListRef.current.clientWidth;
+            if (value !== isOverflowing) {
+                setIsOverflowing(value);
+                return value;
+            }
+        }
+        return isOverflowing;
+    };
+    useEffect(() => {
+        const resizeObserver = new ResizeObserver(() => {
+            checkAndUpdateIsOverflowing();
+        });
+        if (tabListRef?.current)
+            resizeObserver.observe(tabListRef?.current);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [checkAndUpdateIsOverflowing]);
+    useLayoutEffect(() => {
+        if (!checkAndUpdateIsOverflowing())
+            return;
+        const activeTabRef = [...tabRefs, wrapUpRef].find(tab => tab?.current?.getAttribute('aria-selected') === 'true');
+        if (activeTabRef && activeTabRef.current && tabListRef.current) {
+            const activeTabRect = activeTabRef.current.getBoundingClientRect();
+            const tabListWidth = tabListRef.current.clientWidth;
+            // Check if it is not in view
+            if (activeTabRect.left <= 0 || activeTabRect.right >= tabListWidth) {
+                tabListRef.current.scrollLeft = rtl
+                    ? -(tabListWidth - (activeTabRef.current.offsetLeft + activeTabRect.width))
+                    : activeTabRef.current.offsetLeft;
+            }
+        }
+    }, [tasks, wrapUp]);
+    const changeTabFocus = (event, index) => {
+        let activeIndex = index;
+        if (tasks.length) {
+            const { key } = event;
+            if (key === 'ArrowRight' || key === 'ArrowDown') {
+                event.preventDefault();
+                let nextIndex;
+                if (wrapUpRef?.current === event.currentTarget) {
+                    nextIndex = 0;
+                }
+                else {
+                    if (index === tasks.length - 1 && wrapUp?.showTab) {
+                        wrapUpRef?.current?.focus();
+                        return;
+                    }
+                    nextIndex = index + 1 < tasks.length ? index + 1 : 0;
+                }
+                activeIndex = nextIndex;
+                const nextTab = tabRefs[nextIndex]?.current;
+                nextTab?.focus();
+            }
+            else if (key === 'ArrowLeft' || key === 'ArrowUp') {
+                event.preventDefault();
+                let prevIndex;
+                if (wrapUpRef?.current === event.currentTarget) {
+                    prevIndex = tasks.length - 1;
+                }
+                else {
+                    if (index === 0 && wrapUp?.showTab) {
+                        wrapUpRef?.current?.focus();
+                        return;
+                    }
+                    prevIndex = index === 0 ? tasks.length - 1 : index - 1;
+                }
+                const prevTab = tabRefs[prevIndex]?.current;
+                activeIndex = prevIndex;
+                prevTab?.focus();
+            }
+            else if (key === 'Enter' || key === ' ') {
+                event.preventDefault();
+                if (wrapUpRef?.current === event.currentTarget) {
+                    wrapUp?.onWrapUp();
+                    return;
+                }
+                onTaskLaunch?.(tasks[activeIndex].id);
+            }
+        }
+    };
+    return (_jsx(Flex, { container: true, as: StyledTaskManagerTabs, ref: ref, children: tasks.length > 0 && (_jsxs(_Fragment, { children: [_jsxs(StyledTasksTabList, { role: 'tablist', ref: tabListRef, children: [tasks.map((task, i) => {
+                            const { id, active = false, variant, status, icon, meta, ...restProps } = task;
+                            return (_createElement(StyledTaskManagerTab, { ...restProps, ref: tabRefs[i], key: id, onClick: () => onTaskLaunch?.(id), "aria-selected": active, role: 'tab', tabIndex: active ? 0 : -1, onKeyUp: (e) => {
+                                    changeTabFocus(e, i);
+                                }, onKeyDown: (e) => {
+                                    const { key } = e;
+                                    if (key === 'ArrowRight' ||
+                                        key === 'ArrowDown' ||
+                                        key === 'ArrowLeft' ||
+                                        key === 'ArrowUp' ||
+                                        key === 'Enter' ||
+                                        key === ' ') {
+                                        e.preventDefault();
+                                    }
+                                }, active: active, variant: variant },
+                                _jsxs(Flex, { container: { justify: 'start', gap: 1, alignItems: 'center' }, children: [_jsx(StyleTaskName, { children: task.name }, void 0), _jsx(StyledTaskStatus, { variant: task.status?.variant || 'info', children: variant }, void 0)] }, void 0)));
+                        }), wrapUp?.showTab && (_jsx(StyledTaskManagerTab, { onClick: wrapUp.onWrapUp, variant: 'wrap-up', "aria-selected": wrapUp.active, role: 'tab', active: wrapUp.active, tabIndex: wrapUp.active ? 0 : -1, onKeyUp: (e) => {
+                                changeTabFocus(e);
+                            }, onKeyDown: (e) => {
+                                const { key } = e;
+                                if (key === 'ArrowRight' ||
+                                    key === 'ArrowDown' ||
+                                    key === 'ArrowLeft' ||
+                                    key === 'ArrowUp') {
+                                    e.preventDefault();
+                                }
+                            }, ref: wrapUpRef, children: _jsx("span", { children: t('task_manager_wrap_up') }, void 0) }, void 0))] }, void 0), isOverflowing && (_jsx(StyledOverflowTabMenu, { menu: {
+                        items: menuTasksArr,
+                        mode: 'single-select'
+                    }, icon: 'caret-down', iconOnly: true, variant: 'text', text: t('task_manager_overflow_menu') }, void 0))] }, void 0)) }, void 0));
+});
+export default TaskManagerTabs;
+//# sourceMappingURL=TaskManagerTabs.js.map

package/lib/components/TaskManager/TaskManagerTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TaskManagerTabs.js","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManagerTabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  forwardRef,\n  useContext,\n  createRef,\n  RefObject,\n  KeyboardEvent,\n  useMemo,\n  PropsWithoutRef,\n  useRef,\n  useEffect,\n  useState,\n  useLayoutEffect\n} from 'react';\n\nimport { Flex, ForwardProps, useDirection } from '@pega/cosmos-react-core';\nimport { useI18n } from '@pega/cosmos-react-core/lib/hooks';\n\nimport {\n  StyledTaskManagerTabs,\n  StyleTaskName,\n  StyledTaskStatus,\n  StyledTasksTabList,\n  StyledTaskManagerTab,\n  StyledOverflowTabMenu\n} from './TaskManager.styles';\nimport TaskManagerContext from './TaskManager.context';\nimport { TaskManagerTabsProps } from './TaskManager.types';\n\nconst TaskManagerTabs: FunctionComponent<TaskManagerTabsProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<TaskManagerTabsProps>, ref: TaskManagerTabsProps['ref']) => {\n    const { wrapUp, tasks = [], onTaskLaunch } = useContext(TaskManagerContext);\n    const t = useI18n();\n    const [isOverflowing, setIsOverflowing] = useState(false);\n\n    // Used to keep a reference for every tab in order to focus them with key presses\n    const tabRefs: RefObject<HTMLLIElement>[] = tasks.map(() => createRef<HTMLLIElement>());\n    const wrapUpRef = useRef<HTMLLIElement>(null);\n    const { rtl } = useDirection();\n    const menuTasksArr = useMemo(() => {\n      const tasksData = tasks.map(task => {\n        return {\n          primary: task.name,\n          secondary: [\n            <StyledTaskStatus variant={task.status?.variant || 'info'}>\n              {task.variant}\n            </StyledTaskStatus>\n          ],\n          id: task.id,\n          selected: !!task.active,\n          onClick: () => {\n            onTaskLaunch?.(task.id);\n          }\n        };\n      });\n\n      if (wrapUp?.showTab) {\n        tasksData.push({\n          primary: t('task_manager_wrap_up'),\n          secondary: [],\n          id: '',\n          selected: !!wrapUp.active,\n          onClick: () => {\n            wrapUp?.onWrapUp();\n          }\n        });\n      }\n\n      return tasksData;\n    }, [wrapUp?.showTab, wrapUp?.onWrapUp, wrapUp?.active, tasks]);\n\n    const tabListRef = useRef<HTMLUListElement>(null);\n\n    const checkAndUpdateIsOverflowing = () => {\n      if (tabListRef.current) {\n        const value = tabListRef.current.scrollWidth > tabListRef.current.clientWidth;\n        if (value !== isOverflowing) {\n          setIsOverflowing(value);\n          return value;\n        }\n      }\n      return isOverflowing;\n    };\n\n    useEffect(() => {\n      const resizeObserver = new ResizeObserver(() => {\n        checkAndUpdateIsOverflowing();\n      });\n      if (tabListRef?.current) resizeObserver.observe(tabListRef?.current as Element);\n      return () => {\n        resizeObserver.disconnect();\n      };\n    }, [checkAndUpdateIsOverflowing]);\n\n    useLayoutEffect(() => {\n      if (!checkAndUpdateIsOverflowing()) return;\n      const activeTabRef = [...tabRefs, wrapUpRef].find(\n        tab => tab?.current?.getAttribute('aria-selected') === 'true'\n      );\n\n      if (activeTabRef && activeTabRef.current && tabListRef.current) {\n        const activeTabRect = activeTabRef.current.getBoundingClientRect();\n        const tabListWidth = tabListRef.current.clientWidth;\n\n        // Check if it is not in view\n        if (activeTabRect.left <= 0 || activeTabRect.right >= tabListWidth) {\n          tabListRef.current.scrollLeft = rtl\n            ? -(tabListWidth - (activeTabRef.current.offsetLeft + activeTabRect.width))\n            : activeTabRef.current.offsetLeft;\n        }\n      }\n    }, [tasks, wrapUp]);\n\n    const changeTabFocus = (event: KeyboardEvent, index?: number): void => {\n      let activeIndex = index;\n      if (tasks.length) {\n        const { key } = event;\n        if (key === 'ArrowRight' || key === 'ArrowDown') {\n          event.preventDefault();\n          let nextIndex;\n          if (wrapUpRef?.current === event.currentTarget) {\n            nextIndex = 0;\n          } else {\n            if (index === tasks.length - 1 && wrapUp?.showTab) {\n              wrapUpRef?.current?.focus();\n              return;\n            }\n            nextIndex = index! + 1 < tasks.length ? index! + 1 : 0;\n          }\n          activeIndex = nextIndex;\n          const nextTab = tabRefs[nextIndex]?.current;\n          nextTab?.focus();\n        } else if (key === 'ArrowLeft' || key === 'ArrowUp') {\n          event.preventDefault();\n          let prevIndex;\n          if (wrapUpRef?.current === event.currentTarget) {\n            prevIndex = tasks.length - 1;\n          } else {\n            if (index === 0 && wrapUp?.showTab) {\n              wrapUpRef?.current?.focus();\n              return;\n            }\n            prevIndex = index === 0 ? tasks.length - 1 : index! - 1;\n          }\n          const prevTab = tabRefs[prevIndex]?.current;\n          activeIndex = prevIndex;\n          prevTab?.focus();\n        } else if (key === 'Enter' || key === ' ') {\n          event.preventDefault();\n          if (wrapUpRef?.current === event.currentTarget) {\n            wrapUp?.onWrapUp();\n            return;\n          }\n          onTaskLaunch?.(tasks[activeIndex!].id);\n        }\n      }\n    };\n\n    return (\n      <Flex container as={StyledTaskManagerTabs} ref={ref}>\n        {tasks.length > 0 && (\n          <>\n            <StyledTasksTabList role='tablist' ref={tabListRef}>\n              {tasks.map((task, i) => {\n                const { id, active = false, variant, status, icon, meta, ...restProps } = task;\n                return (\n                  <StyledTaskManagerTab\n                    {...restProps}\n                    ref={tabRefs[i]}\n                    key={id}\n                    onClick={() => onTaskLaunch?.(id)}\n                    aria-selected={active}\n                    role='tab'\n                    tabIndex={active ? 0 : -1}\n                    onKeyUp={(e: KeyboardEvent) => {\n                      changeTabFocus(e, i);\n                    }}\n                    onKeyDown={(e: KeyboardEvent) => {\n                      const { key } = e;\n                      if (\n                        key === 'ArrowRight' ||\n                        key === 'ArrowDown' ||\n                        key === 'ArrowLeft' ||\n                        key === 'ArrowUp' ||\n                        key === 'Enter' ||\n                        key === ' '\n                      ) {\n                        e.preventDefault();\n                      }\n                    }}\n                    active={active}\n                    variant={variant}\n                  >\n                    <Flex container={{ justify: 'start', gap: 1, alignItems: 'center' }}>\n                      <StyleTaskName>{task.name}</StyleTaskName>\n                      <StyledTaskStatus variant={task.status?.variant || 'info'}>\n                        {variant}\n                      </StyledTaskStatus>\n                    </Flex>\n                  </StyledTaskManagerTab>\n                );\n              })}\n              {wrapUp?.showTab && (\n                <StyledTaskManagerTab\n                  onClick={wrapUp.onWrapUp}\n                  variant='wrap-up'\n                  aria-selected={wrapUp.active}\n                  role='tab'\n                  active={wrapUp.active}\n                  tabIndex={wrapUp.active ? 0 : -1}\n                  onKeyUp={(e: KeyboardEvent) => {\n                    changeTabFocus(e);\n                  }}\n                  onKeyDown={(e: KeyboardEvent) => {\n                    const { key } = e;\n                    if (\n                      key === 'ArrowRight' ||\n                      key === 'ArrowDown' ||\n                      key === 'ArrowLeft' ||\n                      key === 'ArrowUp'\n                    ) {\n                      e.preventDefault();\n                    }\n                  }}\n                  ref={wrapUpRef}\n                >\n                  <span>{t('task_manager_wrap_up')}</span>\n                </StyledTaskManagerTab>\n              )}\n            </StyledTasksTabList>\n            {isOverflowing && (\n              <StyledOverflowTabMenu\n                menu={{\n                  items: menuTasksArr,\n                  mode: 'single-select'\n                }}\n                icon='caret-down'\n                iconOnly\n                variant='text'\n                text={t('task_manager_overflow_menu')}\n              />\n            )}\n          </>\n        )}\n      </Flex>\n    );\n  }\n);\n\nexport default TaskManagerTabs;\n"]}

package/lib/components/TaskManager/TaskView.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"TaskView.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA+B,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAiC,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAEtF,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAGpD,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAa7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/components/TaskManager/TaskView.js

@@ -0,0 +1,10 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Card, CardContent, CardHeader } from '@pega/cosmos-react-core';
+import { StyledStickyCardHeader } from './TaskManager.styles';
+const TaskView = forwardRef((props, ref) => {
+    const { header, actions, children, ...restProps } = props;
+    return (_jsxs(Card, { ...restProps, ref: ref, children: [_jsxs(CardHeader, { as: StyledStickyCardHeader, children: [header, actions] }, void 0), _jsx(CardContent, { children: children }, void 0)] }, void 0));
+});
+export default TaskView;
+//# sourceMappingURL=TaskView.js.map

package/lib/components/TaskManager/TaskView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TaskView.js","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskView.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,UAAU,EAAmB,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAgB,MAAM,yBAAyB,CAAC;AAGtF,OAAO,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAE9D,MAAM,QAAQ,GAAoD,UAAU,CAC1E,CAAC,KAAqC,EAAE,GAAyB,EAAE,EAAE;IACnE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAC1D,OAAO,CACL,MAAC,IAAI,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG,aAC3B,MAAC,UAAU,IAAC,EAAE,EAAE,sBAAsB,aACnC,MAAM,EACN,OAAO,YACG,EACb,KAAC,WAAW,cAAE,QAAQ,WAAe,YAChC,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import { FunctionComponent, forwardRef, PropsWithoutRef } from 'react';\n\nimport { Card, CardContent, CardHeader, ForwardProps } from '@pega/cosmos-react-core';\n\nimport { TaskViewProps } from './TaskManager.types';\nimport { StyledStickyCardHeader } from './TaskManager.styles';\n\nconst TaskView: FunctionComponent<TaskViewProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<TaskViewProps>, ref: TaskViewProps['ref']) => {\n    const { header, actions, children, ...restProps } = props;\n    return (\n      <Card {...restProps} ref={ref}>\n        <CardHeader as={StyledStickyCardHeader}>\n          {header}\n          {actions}\n        </CardHeader>\n        <CardContent>{children}</CardContent>\n      </Card>\n    );\n  }\n);\n\nexport default TaskView;\n"]}

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

@@ -0,0 +1,5 @@
+export { default } from './TaskManager';
+export { default as TaskView } from './TaskView';
+export { TaskManagerProps, TaskProps, TaskManagerTabsProps, TaskViewProps } from './TaskManager.types';
+export { default as Picker } from './Picker/Picker';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EACL,gBAAgB,EAChB,SAAS,EACT,oBAAoB,EACpB,aAAa,EACd,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC"}

package/lib/components/TaskManager/index.js

@@ -0,0 +1,4 @@
+export { default } from './TaskManager';
+export { default as TaskView } from './TaskView';
+export { default as Picker } from './Picker/Picker';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/TaskManager/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AAOjD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC","sourcesContent":["export { default } from './TaskManager';\nexport { default as TaskView } from './TaskView';\nexport {\n  TaskManagerProps,\n  TaskProps,\n  TaskManagerTabsProps,\n  TaskViewProps\n} from './TaskManager.types';\nexport { default as Picker } from './Picker/Picker';\n"]}

package/lib/index.d.ts

@@ -0,0 +1,18 @@
+export { default as Article } from './components/Article';
+export * from './components/Article';
+export { default as ArticleList } from './components/ArticleList';
+export * from './components/ArticleList';
+export { default as CallControlPanel } from './components/CallControlPanel';
+export * from './components/CallControlPanel';
+export { default as CSCaseView } from './components/CSCaseView';
+export * from './components/CSCaseView';
+export { default as DialPad } from './components/DialPad';
+export * from './components/DialPad';
+export { default as IntelligentGuidance } from './components/IntelligentGuidance';
+export * from './components/IntelligentGuidance';
+export { default as InteractionNotification } from './components/InteractionNotification';
+export { default as InteractionTimer } from './components/InteractionTimer';
+export * from './components/InteractionTimer';
+export { default as TaskManager } from './components/TaskManager';
+export * from './components/TaskManager';
+//# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,cAAc,yBAAyB,CAAC;AACxC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAClF,cAAc,kCAAkC,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,sCAAsC,CAAC;AAC1F,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC"}

package/lib/index.js

@@ -0,0 +1,19 @@
+// This file is autogenerated. Any changes will be overwritten.
+export { default as Article } from './components/Article';
+export * from './components/Article';
+export { default as ArticleList } from './components/ArticleList';
+export * from './components/ArticleList';
+export { default as CallControlPanel } from './components/CallControlPanel';
+export * from './components/CallControlPanel';
+export { default as CSCaseView } from './components/CSCaseView';
+export * from './components/CSCaseView';
+export { default as DialPad } from './components/DialPad';
+export * from './components/DialPad';
+export { default as IntelligentGuidance } from './components/IntelligentGuidance';
+export * from './components/IntelligentGuidance';
+export { default as InteractionNotification } from './components/InteractionNotification';
+export { default as InteractionTimer } from './components/InteractionTimer';
+export * from './components/InteractionTimer';
+export { default as TaskManager } from './components/TaskManager';
+export * from './components/TaskManager';
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,cAAc,yBAAyB,CAAC;AACxC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAClF,cAAc,kCAAkC,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,sCAAsC,CAAC;AAC1F,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,0BAA0B,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\nexport { default as Article } from './components/Article';\nexport * from './components/Article';\nexport { default as ArticleList } from './components/ArticleList';\nexport * from './components/ArticleList';\nexport { default as CallControlPanel } from './components/CallControlPanel';\nexport * from './components/CallControlPanel';\nexport { default as CSCaseView } from './components/CSCaseView';\nexport * from './components/CSCaseView';\nexport { default as DialPad } from './components/DialPad';\nexport * from './components/DialPad';\nexport { default as IntelligentGuidance } from './components/IntelligentGuidance';\nexport * from './components/IntelligentGuidance';\nexport { default as InteractionNotification } from './components/InteractionNotification';\nexport { default as InteractionTimer } from './components/InteractionTimer';\nexport * from './components/InteractionTimer';\nexport { default as TaskManager } from './components/TaskManager';\nexport * from './components/TaskManager';\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-cs",
-  "version": "2.1.6",
+  "version": "2.1.7",
   "author": "Pegasystems",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -20,8 +20,8 @@
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "2.1.6",
-    "@pega/cosmos-react-dnd": "2.1.6",
+    "@pega/cosmos-react-core": "2.1.7",
+    "@pega/cosmos-react-dnd": "2.1.7",
     "polished": "^4.1.0",
     "react": "^16.14.0 || ^17.0.0",
     "react-dom": "^16.14.0 || ^17.0.0",