@pega/lists-react 8.0.0-build.27.14

package/lib/Core/Components/HierarchicalGroupRenderer.js

@@ -0,0 +1,230 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import PropTypes from 'prop-types';
+import { useLayoutEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
+import { Icon } from '@pega/cosmos-react-core';
+import BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';
+import { getGroupFromKey } from 'pega-ui-list-data-apis';
+import { createClassName as cx } from '../Utils';
+import AggregatorCell from './AggregatorCell';
+import RenderingEngine from './RenderingEngine/RenderCell';
+import HierarchicalCell from './HierarchicalCell';
+export const hierarchicalgroupheaderleftdisplacement = headerLevel => `${(headerLevel + 1) * 1.5}rem`;
+let counter = 0;
+export const resetCounter = () => {
+    counter = 0;
+};
+const StyledHierarchicalGroupHeader = styled.div `
+  --group-left: ${props => hierarchicalgroupheaderleftdisplacement(props.groupHeader.level)};
+  --group-bg-color: ${props => {
+    return props.theme.base.palette['primary-background'];
+}};
+  background-color: var(--group-bg-color);
+
+  &.row.sticky-group-header {
+    position: sticky;
+    top: calc(
+      ${props => props.groupHeader.isLeafNode && props.groupHeader.level !== 0
+    ? 'calc(var(--row-height) + var(--group-header-height))'
+    : 'var(--row-height)'}
+    );
+    z-index: ${props => {
+    const zIndex = 5 + props.groupHeader.level + counter;
+    if (props.groupHeader.isLeafNode) {
+        counter += props.groupHeader.level;
+    }
+    return zIndex;
+}};
+    > .cell-action {
+      background-color: var(--group-bg-color);
+    }
+  }
+
+  .group-label {
+    width: 0.437rem;
+    display: inline-block;
+  }
+
+  .group-context-count {
+    font-weight: ${props => props.theme.base['font-weight'].bold};
+  }
+
+  .group-icon-spacer {
+    padding-left: var(--icon-size);
+  }
+
+  .stickyGroupHeader {
+    position: sticky;
+    left: 0;
+    width: 0;
+    z-index: 10;
+    border-bottom: var(--border-style);
+
+    > button {
+      color: currentColor;
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      display: flex;
+      align-items: center;
+      background-color: var(--group-bg-color);
+      padding-left: var(--group-left);
+      z-index: 30;
+      cursor: pointer;
+      white-space: nowrap;
+    }
+    button:focus {
+      box-shadow: ${({ theme }) => theme.base.shadow.focus};
+    }
+  }
+  .group-header.cell {
+    width: ${props => props.groupWidth};
+    left: 0;
+    padding-left: var(--group-left);
+  }
+
+  div.group-header.cell-fixed {
+    background-color: var(--group-bg-color);
+  }
+`;
+const StyledHierarchicalGroupFooter = styled.div `
+  --group-bg-color: ${props => {
+    return props.theme.base.palette['secondary-background'];
+}};
+  background-color: var(--group-bg-color);
+
+  &.row.hierarchical-group-footer-row {
+    position: relative;
+    > .cell-action {
+      background-color: var(--group-bg-color);
+    }
+  }
+
+  & .footer-label-container {
+    position: sticky;
+    top: 0;
+    left: 0;
+    width: 0;
+    z-index: 5;
+    & .label {
+      position: absolute;
+      background-color: var(--group-bg-color);
+      height: calc(100% - var(--border-width));
+      left: ${props => {
+    return `${props.labelLeft}px`;
+}};
+      width: max-content;
+      /* stylelint-disable unit-allowed-list */
+      padding: 0 5px;
+    }
+  }
+`;
+export function HierarchicalGroupHeader({ groupHeader, columns }) {
+    // TODO: This we are adding temporary to show freeze border until we make group header rendering change
+    // when we will pick up aggregation.
+    if (!groupHeader.isVisible)
+        return null;
+    let groupWidth = '';
+    const view = columns[0].parent;
+    let freezeColCount = 0;
+    columns
+        .filter(c => !c.hidden && c.frozen)
+        .forEach(c => {
+        groupWidth += `var(--col-width-${c.field.id}) + `;
+        freezeColCount += 1;
+    });
+    if (freezeColCount > 0)
+        groupWidth = `calc(${groupWidth.substr(0, groupWidth.length - 2)})`;
+    const renderStickyHeader = () => {
+        // If grouping by a regular column (i.e. without a dateFunction), determine props for the rendere
+        const { columnId, dateFunction } = getGroupFromKey(groupHeader.groupBy, view.state.groups) ?? {};
+        // if state.groups is not yet prepared/updated, then getGroupFromKey will return undefined
+        if (!columnId) {
+            return null;
+        }
+        let columnRendererProps;
+        if (!dateFunction) {
+            const column = columns.find(c => c.field.id === columnId);
+            column.setExecutionContext(null); // If null is not set then it will execute on the previous row context and facing issues when cell is edited. Based on column.editMode and current context renderer varies (it can be cellEditRenderer)
+            columnRendererProps = {
+                ...column.getRenderingEngineProps(),
+                context: {
+                    getValue: () => groupHeader.name,
+                    getExecutionContext: () => {
+                        return { getValue: () => groupHeader.data, name: 'groupHeader' };
+                    }
+                }
+            };
+        }
+        const formatter = view.getFormatterByKey('Integer');
+        const { locale } = view.meta;
+        const groupCountFormatted = formatter
+            ? formatter(groupHeader.count, { locale })
+            : groupHeader.count;
+        const expandCollapseIcon = groupHeader.isExpanded ? (_jsx(Icon, { name: 'caret-down' })) : (_jsx(Icon, { name: 'caret-right' }));
+        return (_jsx("div", { className: 'stickyGroupHeader', children: _jsxs(BareButton, { "aria-label": `${groupHeader.label} ${groupCountFormatted} items`, style: {
+                    paddingRight: '3px',
+                    maxWidth: freezeColCount > 0 ? groupWidth : 'auto'
+                }, onClick: () => view.type.toggleGroupExpansion({ groupHeader }), children: [groupHeader.count > 0 ? expandCollapseIcon : _jsx("div", { className: 'group-icon-spacer' }), _jsxs("div", { className: 'group-wrapper', children: [_jsx("div", { className: 'group-label' }), _jsx("span", { className: 'group-context-count', style: { display: 'inline-flex' }, children: _jsx(RenderingEngine, { ...columnRendererProps, highlighter: true }) })] })] }) }));
+    };
+    const getRenderingEnginePropsById = id => {
+        const column = columns.find(c => c.field.id === id);
+        const columnContext = column.getContext();
+        const parentContext = columnContext.getParentContext();
+        return {
+            ...column.getRenderingEngineProps(),
+            context: {
+                getValue: () => {
+                    return groupHeader.info[column.field?.name];
+                },
+                getExecutionContext: () => {
+                    return { getValue: () => groupHeader.info, name: 'groupHeader' };
+                },
+                getParentContext: () => {
+                    return {
+                        ...parentContext,
+                        getRenderingEnginePropsById
+                    };
+                }
+            }
+        };
+    };
+    const renderHierarchicalCells = () => {
+        return columns.map(column => {
+            const columnRendererProps = getRenderingEnginePropsById(column.field.id);
+            return (_jsx(HierarchicalCell, { column: column, columnRendererProps: columnRendererProps }, column.field.id));
+        });
+    };
+    return (_jsxs(StyledHierarchicalGroupHeader, { groupHeader: groupHeader, groupWidth: groupWidth, className: cx('row hierarchical-group-header-row sticky-group-header'), "data-test-id": 'hierarchicalGroupHeader', children: [renderStickyHeader(), renderHierarchicalCells()] }));
+}
+HierarchicalGroupHeader.propTypes = {
+    columns: PropTypes.arrayOf(PropTypes.any).isRequired,
+    groupHeader: PropTypes.objectOf(PropTypes.any).isRequired
+};
+export const HierarchicalGroupFooter = ({ columns, groupHeader }) => {
+    const labelRef = useRef(null);
+    const [labelLeft, setLabelLeft] = useState(0);
+    const view = columns[0].parent;
+    const parentContainer = view.virtualizeElements.rootVirtualiser?.getParentContainer();
+    const footerWidth = parentContainer?.clientWidth;
+    useLayoutEffect(() => {
+        if (labelRef.current) {
+            const { width } = labelRef.current.getBoundingClientRect();
+            setLabelLeft(footerWidth - width - 5);
+        }
+    }, [groupHeader.isVisible, footerWidth]);
+    if (!groupHeader.isVisible)
+        return null;
+    return (_jsxs(StyledHierarchicalGroupFooter, { groupHeader: groupHeader, className: cx('row hierarchical-group-footer-row'), labelLeft: labelLeft, "data-test-id": 'hierarchicalGroupFooter', children: [_jsx("div", { className: 'footer-label-container', children: _jsx("div", { ref: labelRef, className: 'label', children: groupHeader.name }) }), columns.map(c => {
+                const cxt = {
+                    getValue: () => groupHeader?.aggregation?.[c.field.name]?.[c.aggregationType?.toLowerCase()]
+                };
+                return _jsx(AggregatorCell, { column: c, context: cxt }, c.field.id);
+            })] }));
+};
+HierarchicalGroupFooter.propTypes = {
+    columns: PropTypes.arrayOf(PropTypes.any).isRequired,
+    groupHeader: PropTypes.objectOf(PropTypes.any).isRequired
+};
+//# sourceMappingURL=HierarchicalGroupRenderer.js.map

package/lib/Core/Components/HierarchicalGroupRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HierarchicalGroupRenderer.js","sourceRoot":"","sources":["../../../Core/Components/HierarchicalGroupRenderer.jsx"],"names":[],"mappings":"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","sourcesContent":["import PropTypes from 'prop-types';\nimport { useLayoutEffect, useRef, useState } from 'react';\nimport styled from 'styled-components';\n\nimport { Icon } from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport { getGroupFromKey } from 'pega-ui-list-data-apis';\n\nimport { createClassName as cx } from '../Utils';\n\nimport AggregatorCell from './AggregatorCell';\nimport RenderingEngine from './RenderingEngine/RenderCell';\nimport HierarchicalCell from './HierarchicalCell';\n\nexport const hierarchicalgroupheaderleftdisplacement = headerLevel =>\n  `${(headerLevel + 1) * 1.5}rem`;\n\nlet counter = 0;\n\nexport const resetCounter = () => {\n  counter = 0;\n};\n\nconst StyledHierarchicalGroupHeader = styled.div`\n  --group-left: ${props => hierarchicalgroupheaderleftdisplacement(props.groupHeader.level)};\n  --group-bg-color: ${props => {\n    return props.theme.base.palette['primary-background'];\n  }};\n  background-color: var(--group-bg-color);\n\n  &.row.sticky-group-header {\n    position: sticky;\n    top: calc(\n      ${props =>\n        props.groupHeader.isLeafNode && props.groupHeader.level !== 0\n          ? 'calc(var(--row-height) + var(--group-header-height))'\n          : 'var(--row-height)'}\n    );\n    z-index: ${props => {\n      const zIndex = 5 + props.groupHeader.level + counter;\n      if (props.groupHeader.isLeafNode) {\n        counter += props.groupHeader.level;\n      }\n      return zIndex;\n    }};\n    > .cell-action {\n      background-color: var(--group-bg-color);\n    }\n  }\n\n  .group-label {\n    width: 0.437rem;\n    display: inline-block;\n  }\n\n  .group-context-count {\n    font-weight: ${props => props.theme.base['font-weight'].bold};\n  }\n\n  .group-icon-spacer {\n    padding-left: var(--icon-size);\n  }\n\n  .stickyGroupHeader {\n    position: sticky;\n    left: 0;\n    width: 0;\n    z-index: 10;\n    border-bottom: var(--border-style);\n\n    > button {\n      color: currentColor;\n      position: absolute;\n      left: 0;\n      top: 0;\n      bottom: 0;\n      display: flex;\n      align-items: center;\n      background-color: var(--group-bg-color);\n      padding-left: var(--group-left);\n      z-index: 30;\n      cursor: pointer;\n      white-space: nowrap;\n    }\n    button:focus {\n      box-shadow: ${({ theme }) => theme.base.shadow.focus};\n    }\n  }\n  .group-header.cell {\n    width: ${props => props.groupWidth};\n    left: 0;\n    padding-left: var(--group-left);\n  }\n\n  div.group-header.cell-fixed {\n    background-color: var(--group-bg-color);\n  }\n`;\n\nconst StyledHierarchicalGroupFooter = styled.div`\n  --group-bg-color: ${props => {\n    return props.theme.base.palette['secondary-background'];\n  }};\n  background-color: var(--group-bg-color);\n\n  &.row.hierarchical-group-footer-row {\n    position: relative;\n    > .cell-action {\n      background-color: var(--group-bg-color);\n    }\n  }\n\n  & .footer-label-container {\n    position: sticky;\n    top: 0;\n    left: 0;\n    width: 0;\n    z-index: 5;\n    & .label {\n      position: absolute;\n      background-color: var(--group-bg-color);\n      height: calc(100% - var(--border-width));\n      left: ${props => {\n        return `${props.labelLeft}px`;\n      }};\n      width: max-content;\n      /* stylelint-disable unit-allowed-list */\n      padding: 0 5px;\n    }\n  }\n`;\n\nexport function HierarchicalGroupHeader({ groupHeader, columns }) {\n  // TODO: This we are adding temporary to show freeze border until we make group header rendering change\n  // when we will pick up aggregation.\n  if (!groupHeader.isVisible) return null;\n  let groupWidth = '';\n  const view = columns[0].parent;\n  let freezeColCount = 0;\n  columns\n    .filter(c => !c.hidden && c.frozen)\n    .forEach(c => {\n      groupWidth += `var(--col-width-${c.field.id}) + `;\n      freezeColCount += 1;\n    });\n  if (freezeColCount > 0) groupWidth = `calc(${groupWidth.substr(0, groupWidth.length - 2)})`;\n\n  const renderStickyHeader = () => {\n    // If grouping by a regular column (i.e. without a dateFunction), determine props for the rendere\n    const { columnId, dateFunction } =\n      getGroupFromKey(groupHeader.groupBy, view.state.groups) ?? {};\n    // if state.groups is not yet prepared/updated, then getGroupFromKey will return undefined\n    if (!columnId) {\n      return null;\n    }\n    let columnRendererProps;\n    if (!dateFunction) {\n      const column = columns.find(c => c.field.id === columnId);\n      column.setExecutionContext(null); // If null is not set then it will execute on the previous row context and facing issues when cell is edited. Based on column.editMode and current context renderer varies (it can be cellEditRenderer)\n\n      columnRendererProps = {\n        ...column.getRenderingEngineProps(),\n        context: {\n          getValue: () => groupHeader.name,\n          getExecutionContext: () => {\n            return { getValue: () => groupHeader.data, name: 'groupHeader' };\n          }\n        }\n      };\n    }\n\n    const formatter = view.getFormatterByKey('Integer');\n    const { locale } = view.meta;\n    const groupCountFormatted = formatter\n      ? formatter(groupHeader.count, { locale })\n      : groupHeader.count;\n    const expandCollapseIcon = groupHeader.isExpanded ? (\n      <Icon name='caret-down' />\n    ) : (\n      <Icon name='caret-right' />\n    );\n\n    return (\n      <div className='stickyGroupHeader'>\n        <BareButton\n          aria-label={`${groupHeader.label} ${groupCountFormatted} items`}\n          style={{\n            paddingRight: '3px',\n            maxWidth: freezeColCount > 0 ? groupWidth : 'auto'\n          }}\n          onClick={() => view.type.toggleGroupExpansion({ groupHeader })}\n        >\n          {groupHeader.count > 0 ? expandCollapseIcon : <div className='group-icon-spacer' />}\n          <div className='group-wrapper'>\n            <div className='group-label' />\n            <span className='group-context-count' style={{ display: 'inline-flex' }}>\n              <RenderingEngine {...columnRendererProps} highlighter />\n            </span>\n          </div>\n        </BareButton>\n      </div>\n    );\n  };\n\n  const getRenderingEnginePropsById = id => {\n    const column = columns.find(c => c.field.id === id);\n    const columnContext = column.getContext();\n    const parentContext = columnContext.getParentContext();\n\n    return {\n      ...column.getRenderingEngineProps(),\n      context: {\n        getValue: () => {\n          return groupHeader.info[column.field?.name];\n        },\n        getExecutionContext: () => {\n          return { getValue: () => groupHeader.info, name: 'groupHeader' };\n        },\n        getParentContext: () => {\n          return {\n            ...parentContext,\n            getRenderingEnginePropsById\n          };\n        }\n      }\n    };\n  };\n\n  const renderHierarchicalCells = () => {\n    return columns.map(column => {\n      const columnRendererProps = getRenderingEnginePropsById(column.field.id);\n\n      return (\n        <HierarchicalCell\n          key={column.field.id}\n          column={column}\n          columnRendererProps={columnRendererProps}\n        />\n      );\n    });\n  };\n\n  return (\n    <StyledHierarchicalGroupHeader\n      groupHeader={groupHeader}\n      groupWidth={groupWidth}\n      className={cx('row hierarchical-group-header-row sticky-group-header')}\n      data-test-id='hierarchicalGroupHeader'\n    >\n      {renderStickyHeader()}\n      {renderHierarchicalCells()}\n    </StyledHierarchicalGroupHeader>\n  );\n}\n\nHierarchicalGroupHeader.propTypes = {\n  columns: PropTypes.arrayOf(PropTypes.any).isRequired,\n  groupHeader: PropTypes.objectOf(PropTypes.any).isRequired\n};\n\nexport const HierarchicalGroupFooter = ({ columns, groupHeader }) => {\n  const labelRef = useRef(null);\n  const [labelLeft, setLabelLeft] = useState(0);\n  const view = columns[0].parent;\n  const parentContainer = view.virtualizeElements.rootVirtualiser?.getParentContainer();\n  const footerWidth = parentContainer?.clientWidth;\n\n  useLayoutEffect(() => {\n    if (labelRef.current) {\n      const { width } = labelRef.current.getBoundingClientRect();\n      setLabelLeft(footerWidth - width - 5);\n    }\n  }, [groupHeader.isVisible, footerWidth]);\n\n  if (!groupHeader.isVisible) return null;\n\n  return (\n    <StyledHierarchicalGroupFooter\n      groupHeader={groupHeader}\n      className={cx('row hierarchical-group-footer-row')}\n      labelLeft={labelLeft}\n      data-test-id='hierarchicalGroupFooter'\n    >\n      <div className='footer-label-container'>\n        <div ref={labelRef} className='label'>\n          {groupHeader.name}\n        </div>\n      </div>\n      {columns.map(c => {\n        const cxt = {\n          getValue: () =>\n            groupHeader?.aggregation?.[c.field.name]?.[c.aggregationType?.toLowerCase()]\n        };\n        return <AggregatorCell key={c.field.id} column={c} context={cxt} />;\n      })}\n    </StyledHierarchicalGroupFooter>\n  );\n};\n\nHierarchicalGroupFooter.propTypes = {\n  columns: PropTypes.arrayOf(PropTypes.any).isRequired,\n  groupHeader: PropTypes.objectOf(PropTypes.any).isRequired\n};\n"]}

package/lib/Core/Components/LoadingIndicator.d.ts

@@ -0,0 +1,15 @@
+declare function LoadingIndicator({ view, show }: {
+    view: any;
+    show: any;
+}): import("react/jsx-runtime").JSX.Element | null;
+declare namespace LoadingIndicator {
+    namespace propTypes {
+        let view: PropTypes.Validator<{
+            [x: string]: any;
+        }>;
+        let show: PropTypes.Validator<boolean>;
+    }
+}
+export default LoadingIndicator;
+import PropTypes from 'prop-types';
+//# sourceMappingURL=LoadingIndicator.d.ts.map

package/lib/Core/Components/LoadingIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingIndicator.d.ts","sourceRoot":"","sources":["../../../Core/Components/LoadingIndicator.jsx"],"names":[],"mappings":"AAIA;;;mDAMC;;;;;;;;;;sBAVqB,YAAY"}

package/lib/Core/Components/LoadingIndicator.js

@@ -0,0 +1,15 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import PropTypes from 'prop-types';
+import { resolveViewComponent } from './RenderingEngine/ComponentResolverFactory';
+export default function LoadingIndicator({ view, show }) {
+    const { renderFactory, getContext } = view;
+    if (show) {
+        return _jsx(_Fragment, { children: resolveViewComponent('loadingIndicator', renderFactory, getContext()) });
+    }
+    return null;
+}
+LoadingIndicator.propTypes = {
+    view: PropTypes.objectOf(PropTypes.any).isRequired,
+    show: PropTypes.bool.isRequired
+};
+//# sourceMappingURL=LoadingIndicator.js.map

package/lib/Core/Components/LoadingIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingIndicator.js","sourceRoot":"","sources":["../../../Core/Components/LoadingIndicator.jsx"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,oBAAoB,EAAE,MAAM,4CAA4C,CAAC;AAElF,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE;IACrD,MAAM,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;IAC3C,IAAI,IAAI,EAAE,CAAC;QACT,OAAO,4BAAG,oBAAoB,CAAC,kBAAkB,EAAE,aAAa,EAAE,UAAU,EAAE,CAAC,GAAI,CAAC;IACtF,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC;AAED,gBAAgB,CAAC,SAAS,GAAG;IAC3B,IAAI,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,UAAU;IAClD,IAAI,EAAE,SAAS,CAAC,IAAI,CAAC,UAAU;CAChC,CAAC","sourcesContent":["import PropTypes from 'prop-types';\n\nimport { resolveViewComponent } from './RenderingEngine/ComponentResolverFactory';\n\nexport default function LoadingIndicator({ view, show }) {\n  const { renderFactory, getContext } = view;\n  if (show) {\n    return <>{resolveViewComponent('loadingIndicator', renderFactory, getContext())}</>;\n  }\n  return null;\n}\n\nLoadingIndicator.propTypes = {\n  view: PropTypes.objectOf(PropTypes.any).isRequired,\n  show: PropTypes.bool.isRequired\n};\n"]}

package/lib/Core/Components/NotificationManager.d.ts

@@ -0,0 +1,13 @@
+declare function NotificationManager({ view }: {
+    view: any;
+}): null;
+declare namespace NotificationManager {
+    namespace propTypes {
+        let view: PropTypes.Validator<{
+            [x: string]: any;
+        }>;
+    }
+}
+export default NotificationManager;
+import PropTypes from 'prop-types';
+//# sourceMappingURL=NotificationManager.d.ts.map

package/lib/Core/Components/NotificationManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationManager.d.ts","sourceRoot":"","sources":["../../../Core/Components/NotificationManager.js"],"names":[],"mappings":"AAKA;;SAyCC;;;;;;;;;sBA9CqB,YAAY"}

package/lib/Core/Components/NotificationManager.js

@@ -0,0 +1,44 @@
+import PropTypes from 'prop-types';
+import { useEffect, useState } from 'react';
+import { useToaster } from '@pega/cosmos-react-core';
+export default function NotificationManager({ view }) {
+    const { state: { notifications = [] } = {} } = view;
+    const { push } = useToaster();
+    const [activeNotifications, setActiveNotifications] = useState(new Set());
+    const onDismiss = ({ id }) => {
+        view.type.removeNotification(id);
+        // Remove myself once event loop is free to ensure race conditions are not faced
+        setTimeout(() => {
+            setActiveNotifications(msgs => {
+                msgs.delete(id);
+                return new Set(msgs);
+            });
+        });
+    };
+    useEffect(() => {
+        notifications.forEach(notification => {
+            const { content, id } = notification;
+            if (!activeNotifications.has(id)) {
+                const timeoutID = setTimeout(() => {
+                    onDismiss({ id });
+                }, 1 * 3000);
+                push({
+                    content,
+                    id,
+                    onDismiss,
+                    dismissAfter: null,
+                    timeoutID
+                });
+                setActiveNotifications(msgs => {
+                    msgs.add(id);
+                    return new Set(msgs);
+                });
+            }
+        });
+    });
+    return null;
+}
+NotificationManager.propTypes = {
+    view: PropTypes.objectOf(PropTypes.any).isRequired
+};
+//# sourceMappingURL=NotificationManager.js.map

package/lib/Core/Components/NotificationManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationManager.js","sourceRoot":"","sources":["../../../Core/Components/NotificationManager.js"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErD,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAAE,IAAI,EAAE;IAClD,MAAM,EAAE,KAAK,EAAE,EAAE,aAAa,GAAG,EAAE,EAAE,GAAG,EAAE,EAAE,GAAG,IAAI,CAAC;IACpD,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,EAAE,CAAC;IAE9B,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC;IAE1E,MAAM,SAAS,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE;QAC3B,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,EAAE,CAAC,CAAC;QACjC,gFAAgF;QAChF,UAAU,CAAC,GAAG,EAAE;YACd,sBAAsB,CAAC,IAAI,CAAC,EAAE;gBAC5B,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;gBAChB,OAAO,IAAI,GAAG,CAAC,IAAI,CAAC,CAAC;YACvB,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE;YACnC,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,YAAY,CAAC;YAErC,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC;gBACjC,MAAM,SAAS,GAAG,UAAU,CAAC,GAAG,EAAE;oBAChC,SAAS,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;gBACpB,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,CAAC;gBACb,IAAI,CAAC;oBACH,OAAO;oBACP,EAAE;oBACF,SAAS;oBACT,YAAY,EAAE,IAAI;oBAClB,SAAS;iBACV,CAAC,CAAC;gBACH,sBAAsB,CAAC,IAAI,CAAC,EAAE;oBAC5B,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;oBACb,OAAO,IAAI,GAAG,CAAC,IAAI,CAAC,CAAC;gBACvB,CAAC,CAAC,CAAC;YACL,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,OAAO,IAAI,CAAC;AACd,CAAC;AAED,mBAAmB,CAAC,SAAS,GAAG;IAC9B,IAAI,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,UAAU;CACnD,CAAC","sourcesContent":["import PropTypes from 'prop-types';\nimport { useEffect, useState } from 'react';\n\nimport { useToaster } from '@pega/cosmos-react-core';\n\nexport default function NotificationManager({ view }) {\n  const { state: { notifications = [] } = {} } = view;\n  const { push } = useToaster();\n\n  const [activeNotifications, setActiveNotifications] = useState(new Set());\n\n  const onDismiss = ({ id }) => {\n    view.type.removeNotification(id);\n    // Remove myself once event loop is free to ensure race conditions are not faced\n    setTimeout(() => {\n      setActiveNotifications(msgs => {\n        msgs.delete(id);\n        return new Set(msgs);\n      });\n    });\n  };\n\n  useEffect(() => {\n    notifications.forEach(notification => {\n      const { content, id } = notification;\n\n      if (!activeNotifications.has(id)) {\n        const timeoutID = setTimeout(() => {\n          onDismiss({ id });\n        }, 1 * 3000);\n        push({\n          content,\n          id,\n          onDismiss,\n          dismissAfter: null,\n          timeoutID\n        });\n        setActiveNotifications(msgs => {\n          msgs.add(id);\n          return new Set(msgs);\n        });\n      }\n    });\n  });\n\n  return null;\n}\n\nNotificationManager.propTypes = {\n  view: PropTypes.objectOf(PropTypes.any).isRequired\n};\n"]}

package/lib/Core/Components/RFColumnConfigurator.d.ts

@@ -0,0 +1,19 @@
+declare function RFColumnConfigurator({ column, onCancel, onSubmit, finishPopOver }: {
+    column: any;
+    onCancel: any;
+    onSubmit: any;
+    finishPopOver: any;
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace RFColumnConfigurator {
+    namespace propTypes {
+        let column: PropTypes.Validator<{
+            [x: string]: any;
+        }>;
+        let onCancel: PropTypes.Validator<(...args: any[]) => any>;
+        let onSubmit: PropTypes.Validator<(...args: any[]) => any>;
+        let finishPopOver: PropTypes.Validator<(...args: any[]) => any>;
+    }
+}
+export default RFColumnConfigurator;
+import PropTypes from 'prop-types';
+//# sourceMappingURL=RFColumnConfigurator.d.ts.map

package/lib/Core/Components/RFColumnConfigurator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RFColumnConfigurator.d.ts","sourceRoot":"","sources":["../../../Core/Components/RFColumnConfigurator.jsx"],"names":[],"mappings":"AAgKA;;;;;4CAkCC;;;;;;;;;;;;sBAjMqB,YAAY"}

package/lib/Core/Components/RFColumnConfigurator.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useState, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { Input, Button, Select, Option } from '@pega/cosmos-react-core';
+import useTranslate from '../Hooks/useTranslate';
+import { DEFAULT_FORMAT } from '../constants';
+const StyledCustomizeColumn = styled.div `
+  padding: 0.625rem;
+  min-width: 12.5rem;
+
+  footer {
+    display: flex;
+    justify-content: space-between;
+  }
+`;
+const StyledRow = styled.div `
+  margin: 0.625rem 0;
+`;
+// Returns user friendly label from field information
+function getFieldLabel(field) {
+    // Add category information (if applicable)
+    if (field.category && field.category.length) {
+        const combinedCategories = field.category
+            .map(currentCategory => currentCategory.label)
+            .join('.');
+        return `${combinedCategories}.${field.label}`;
+    }
+    return `${field.label}`;
+}
+const Footer = memo(({ cancel, submit }) => {
+    return (_jsxs("footer", { children: [_jsx(Button, { onClick: cancel, "data-test-id": 'cancel', children: "Cancel" }), _jsx(Button, { variant: 'primary', onClick: submit, "data-test-id": 'submit', children: "Submit" })] }));
+});
+Footer.displayName = 'Footer';
+Footer.propTypes = {
+    cancel: PropTypes.func.isRequired,
+    submit: PropTypes.func.isRequired
+};
+const defaultDisplayMode = 'Normal';
+const displayModes = [defaultDisplayMode, 'Hierarchical'];
+const Body = memo(({ column, rfName, columnAlias, displayMode, onRFChange, oncolumnAliasChange, onDisplayModeChange }) => {
+    const renderFormatters = column.getRenderFormatters();
+    const isDefaultFormatterExist = renderFormatters?.find(formatter => formatter.label === DEFAULT_FORMAT);
+    const renderDisplayMode = column.renderDisplayMode();
+    const [translate] = useTranslate();
+    const label = getFieldLabel(column.field);
+    const showFormatter = column.formatterName !== 'UserReference';
+    return (_jsxs(_Fragment, { children: [_jsx(StyledRow, { children: _jsx(Input, { type: 'text', label: translate('Field'), value: label, readOnly: true }) }), _jsx(StyledRow, { children: _jsx(Input, { id: 'customise-label', type: 'text', label: translate('Alias'), onChange: oncolumnAliasChange, placeholder: translate('Enter alias'), value: columnAlias, "data-test-id": 'Customise label' }) }), showFormatter && renderFormatters && (_jsx(StyledRow, { children: _jsxs(Select, { id: 'select-customised-format', label: 'Format', onChange: onRFChange, value: rfName || '', "data-test-id": 'Customise format', children: [!isDefaultFormatterExist && (_jsx(Option, { value: DEFAULT_FORMAT, children: DEFAULT_FORMAT }, DEFAULT_FORMAT)), renderFormatters?.map(v => (_jsx(Option, { value: v.value, children: translate(v.label) }, v.value)))] }) })), renderDisplayMode && (_jsx(StyledRow, { children: _jsx(Select, { id: 'select-customised-display', label: translate('Display'), onChange: onDisplayModeChange, value: displayMode || defaultDisplayMode, "data-test-id": 'Customise display', children: displayModes.map(mode => (_jsx(Option, { value: mode, children: translate(mode) }, mode))) }) }))] }));
+});
+Body.displayName = 'Body';
+Body.propTypes = {
+    column: PropTypes.objectOf(PropTypes.any),
+    rfName: PropTypes.string,
+    columnAlias: PropTypes.string,
+    onRFChange: PropTypes.func,
+    oncolumnAliasChange: PropTypes.func,
+    displayMode: PropTypes.string,
+    onDisplayModeChange: PropTypes.func
+};
+Body.defaultProps = {
+    column: {},
+    rfName: '',
+    columnAlias: '',
+    onRFChange: () => { },
+    oncolumnAliasChange: () => { },
+    displayMode: defaultDisplayMode,
+    onDisplayModeChange: () => { }
+};
+export default function RFColumnConfigurator({ column, onCancel, onSubmit, finishPopOver }) {
+    const [columnAlias, setColumnAlias] = useState(column.alias || '');
+    const [rfName, setRFName] = useState(column.formatterName || DEFAULT_FORMAT);
+    const [displayMode, setDisplayMode] = useState(column.displayMode);
+    const onSubmitChanges = useCallback(() => {
+        const isRFChanged = rfName !== column.formatterName;
+        const isLableChanged = columnAlias.trim() !== column.alias?.trim(); // can be undefined
+        const isDisplayChanged = displayMode !== column.displayMode;
+        if (isRFChanged || isLableChanged || isDisplayChanged) {
+            onSubmit(isRFChanged ? rfName : undefined, columnAlias, isDisplayChanged ? displayMode : undefined);
+        }
+        finishPopOver();
+    }, [column, onSubmit, rfName, columnAlias, finishPopOver, displayMode]);
+    return (_jsxs(StyledCustomizeColumn, { "data-test-id": 'Customise column control', children: [_jsx(Body, { column: column, rfName: rfName, columnAlias: columnAlias, displayMode: displayMode, onRFChange: e => setRFName(e.target.value), oncolumnAliasChange: e => setColumnAlias(e.target.value), onDisplayModeChange: e => setDisplayMode(e.target.value) }), _jsx(Footer, { submit: onSubmitChanges, cancel: onCancel })] }));
+}
+RFColumnConfigurator.propTypes = {
+    column: PropTypes.objectOf(PropTypes.any).isRequired,
+    onCancel: PropTypes.func.isRequired,
+    onSubmit: PropTypes.func.isRequired,
+    finishPopOver: PropTypes.func.isRequired
+};
+//# sourceMappingURL=RFColumnConfigurator.js.map

package/lib/Core/Components/RFColumnConfigurator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RFColumnConfigurator.js","sourceRoot":"","sources":["../../../Core/Components/RFColumnConfigurator.jsx"],"names":[],"mappings":"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","sourcesContent":["import { memo, useState, useCallback } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nimport { Input, Button, Select, Option } from '@pega/cosmos-react-core';\n\nimport useTranslate from '../Hooks/useTranslate';\nimport { DEFAULT_FORMAT } from '../constants';\n\nconst StyledCustomizeColumn = styled.div`\n  padding: 0.625rem;\n  min-width: 12.5rem;\n\n  footer {\n    display: flex;\n    justify-content: space-between;\n  }\n`;\n\nconst StyledRow = styled.div`\n  margin: 0.625rem 0;\n`;\n\n// Returns user friendly label from field information\nfunction getFieldLabel(field) {\n  // Add category information (if applicable)\n  if (field.category && field.category.length) {\n    const combinedCategories = field.category\n      .map(currentCategory => currentCategory.label)\n      .join('.');\n    return `${combinedCategories}.${field.label}`;\n  }\n\n  return `${field.label}`;\n}\n\nconst Footer = memo(({ cancel, submit }) => {\n  return (\n    <footer>\n      <Button onClick={cancel} data-test-id='cancel'>\n        Cancel\n      </Button>\n      <Button variant='primary' onClick={submit} data-test-id='submit'>\n        Submit\n      </Button>\n    </footer>\n  );\n});\n\nFooter.displayName = 'Footer';\n\nFooter.propTypes = {\n  cancel: PropTypes.func.isRequired,\n  submit: PropTypes.func.isRequired\n};\n\nconst defaultDisplayMode = 'Normal';\nconst displayModes = [defaultDisplayMode, 'Hierarchical'];\n\nconst Body = memo(\n  ({\n    column,\n    rfName,\n    columnAlias,\n    displayMode,\n    onRFChange,\n    oncolumnAliasChange,\n    onDisplayModeChange\n  }) => {\n    const renderFormatters = column.getRenderFormatters();\n    const isDefaultFormatterExist = renderFormatters?.find(\n      formatter => formatter.label === DEFAULT_FORMAT\n    );\n    const renderDisplayMode = column.renderDisplayMode();\n    const [translate] = useTranslate();\n    const label = getFieldLabel(column.field);\n    const showFormatter = column.formatterName !== 'UserReference';\n    return (\n      <>\n        <StyledRow>\n          <Input type='text' label={translate('Field')} value={label} readOnly />\n        </StyledRow>\n        <StyledRow>\n          <Input\n            id='customise-label'\n            type='text'\n            label={translate('Alias')}\n            onChange={oncolumnAliasChange}\n            placeholder={translate('Enter alias')}\n            value={columnAlias}\n            data-test-id='Customise label'\n          />\n        </StyledRow>\n\n        {showFormatter && renderFormatters && (\n          <StyledRow>\n            <Select\n              id='select-customised-format'\n              label='Format'\n              onChange={onRFChange}\n              value={rfName || ''}\n              data-test-id='Customise format'\n            >\n              {!isDefaultFormatterExist && (\n                <Option key={DEFAULT_FORMAT} value={DEFAULT_FORMAT}>\n                  {DEFAULT_FORMAT}\n                </Option>\n              )}\n              {renderFormatters?.map(v => (\n                <Option key={v.value} value={v.value}>\n                  {translate(v.label)}\n                </Option>\n              ))}\n            </Select>\n          </StyledRow>\n        )}\n        {renderDisplayMode && (\n          <StyledRow>\n            <Select\n              id='select-customised-display'\n              label={translate('Display')}\n              onChange={onDisplayModeChange}\n              value={displayMode || defaultDisplayMode}\n              data-test-id='Customise display'\n            >\n              {displayModes.map(mode => (\n                <Option key={mode} value={mode}>\n                  {translate(mode)}\n                </Option>\n              ))}\n            </Select>\n          </StyledRow>\n        )}\n      </>\n    );\n  }\n);\n\nBody.displayName = 'Body';\n\nBody.propTypes = {\n  column: PropTypes.objectOf(PropTypes.any),\n  rfName: PropTypes.string,\n  columnAlias: PropTypes.string,\n  onRFChange: PropTypes.func,\n  oncolumnAliasChange: PropTypes.func,\n  displayMode: PropTypes.string,\n  onDisplayModeChange: PropTypes.func\n};\n\nBody.defaultProps = {\n  column: {},\n  rfName: '',\n  columnAlias: '',\n  onRFChange: () => {},\n  oncolumnAliasChange: () => {},\n  displayMode: defaultDisplayMode,\n  onDisplayModeChange: () => {}\n};\n\nexport default function RFColumnConfigurator({ column, onCancel, onSubmit, finishPopOver }) {\n  const [columnAlias, setColumnAlias] = useState(column.alias || '');\n  const [rfName, setRFName] = useState(column.formatterName || DEFAULT_FORMAT);\n  const [displayMode, setDisplayMode] = useState(column.displayMode);\n\n  const onSubmitChanges = useCallback(() => {\n    const isRFChanged = rfName !== column.formatterName;\n    const isLableChanged = columnAlias.trim() !== column.alias?.trim(); // can be undefined\n    const isDisplayChanged = displayMode !== column.displayMode;\n\n    if (isRFChanged || isLableChanged || isDisplayChanged) {\n      onSubmit(\n        isRFChanged ? rfName : undefined,\n        columnAlias,\n        isDisplayChanged ? displayMode : undefined\n      );\n    }\n    finishPopOver();\n  }, [column, onSubmit, rfName, columnAlias, finishPopOver, displayMode]);\n\n  return (\n    <StyledCustomizeColumn data-test-id='Customise column control'>\n      <Body\n        column={column}\n        rfName={rfName}\n        columnAlias={columnAlias}\n        displayMode={displayMode}\n        onRFChange={e => setRFName(e.target.value)}\n        oncolumnAliasChange={e => setColumnAlias(e.target.value)}\n        onDisplayModeChange={e => setDisplayMode(e.target.value)}\n      />\n      <Footer submit={onSubmitChanges} cancel={onCancel} />\n    </StyledCustomizeColumn>\n  );\n}\n\nRFColumnConfigurator.propTypes = {\n  column: PropTypes.objectOf(PropTypes.any).isRequired,\n  onCancel: PropTypes.func.isRequired,\n  onSubmit: PropTypes.func.isRequired,\n  finishPopOver: PropTypes.func.isRequired\n};\n"]}

package/lib/Core/Components/RSWrapper/HeaderBarGadget.d.ts

@@ -0,0 +1,13 @@
+declare function HeaderBarGadget({ view }: {
+    view: any;
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace HeaderBarGadget {
+    namespace propTypes {
+        let view: PropTypes.Validator<{
+            [x: string]: any;
+        }>;
+    }
+}
+export default HeaderBarGadget;
+import PropTypes from 'prop-types';
+//# sourceMappingURL=HeaderBarGadget.d.ts.map

package/lib/Core/Components/RSWrapper/HeaderBarGadget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderBarGadget.d.ts","sourceRoot":"","sources":["../../../../Core/Components/RSWrapper/HeaderBarGadget.jsx"],"names":[],"mappings":"AA+CA;;4CA6BC;;;;;;;;;sBA5EqB,YAAY"}

package/lib/Core/Components/RSWrapper/HeaderBarGadget.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import PropTypes from 'prop-types';
+import styled, { css } from 'styled-components';
+import { Flex, Icon, Text, useTheme, calculateFontSize } from '@pega/cosmos-react-core';
+import ToolbarActions from '../Toolbar/ToolbarActions';
+import Personalization from './Personalization';
+const StyledHeaderBar = styled.div(({ theme }) => {
+    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    return css `
+    .header-bar-icon-container {
+      margin-right: 0.5rem;
+      padding: 0.5rem;
+      background-color: ${theme.base.palette['brand-primary']};
+      border-radius: ${theme.base['border-radius']};
+
+      > .header-bar-icon {
+        margin: 0;
+        height: 1rem;
+        width: 1rem;
+        fill: currentColor;
+        color: white;
+      }
+    }
+    .header-bar-content {
+      max-height: 2.5rem;
+      justify-content: center;
+
+      button > div > span {
+        font-size: ${fontSize.xl};
+        font-weight: ${theme.base['font-weight']['semi-bold']};
+      }
+    }
+
+    .toolbar-actions {
+      align-self: flex-end;
+      font-size: ${fontSize.m};
+    }
+
+    .rs-title {
+      margin: 0 0 calc(${props => props.theme.base.spacing} - 0.875rem);
+    }
+  `;
+});
+export default function HeaderBarGadget({ view }) {
+    const { meta: { icon, title, toolbarActions } } = view;
+    const theme = useTheme();
+    return (_jsxs(Flex, { container: { alignItems: 'center' }, item: { grow: 1 }, className: 'header-bar-gadget', as: StyledHeaderBar, theme: theme, children: [_jsx(Flex, { container: true, className: 'header-bar-icon-container', children: _jsx(Icon, { className: 'header-bar-icon', name: icon }) }), _jsxs(Flex, { container: { direction: 'column' }, item: { grow: 1 }, className: 'header-bar-content', children: [_jsx("div", { className: 'rs-title', children: _jsx(Text, { variant: 'secondary', children: title }) }), _jsx("div", { children: _jsx(Personalization, { view: view }) })] }), _jsx("div", { className: 'toolbar-actions', children: _jsx(ToolbarActions, { toolbarActions: toolbarActions }) })] }));
+}
+HeaderBarGadget.propTypes = {
+    view: PropTypes.objectOf(PropTypes.any).isRequired
+};
+//# sourceMappingURL=HeaderBarGadget.js.map

package/lib/Core/Components/RSWrapper/HeaderBarGadget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderBarGadget.js","sourceRoot":"","sources":["../../../../Core/Components/RSWrapper/HeaderBarGadget.jsx"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAExF,OAAO,cAAc,MAAM,2BAA2B,CAAC;AAEvD,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAEhD,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC/C,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IACtF,OAAO,GAAG,CAAA;;;;0BAIc,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC;uBACtC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;;;;;;;;;;;;;qBAe7B,QAAQ,CAAC,EAAE;uBACT,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC;;;;;;mBAM1C,QAAQ,CAAC,CAAC;;;;yBAIJ,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;;GAEvD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EAAE,IAAI,EAAE;IAC9C,MAAM,EACJ,IAAI,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,cAAc,EAAE,EACtC,GAAG,IAAI,CAAC;IACT,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,EACnC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EACjB,SAAS,EAAC,mBAAmB,EAC7B,EAAE,EAAE,eAAe,EACnB,KAAK,EAAE,KAAK,aAEZ,KAAC,IAAI,IAAC,SAAS,QAAC,SAAS,EAAC,2BAA2B,YACnD,KAAC,IAAI,IAAC,SAAS,EAAC,iBAAiB,EAAC,IAAI,EAAE,IAAI,GAAI,GAC3C,EACP,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,SAAS,EAAC,oBAAoB,aACzF,cAAK,SAAS,EAAC,UAAU,YACvB,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,KAAK,GAAQ,GACpC,EACN,wBACE,KAAC,eAAe,IAAC,IAAI,EAAE,IAAI,GAAI,GAC3B,IACD,EACP,cAAK,SAAS,EAAC,iBAAiB,YAC9B,KAAC,cAAc,IAAC,cAAc,EAAE,cAAc,GAAI,GAC9C,IACD,CACR,CAAC;AACJ,CAAC;AAED,eAAe,CAAC,SAAS,GAAG;IAC1B,IAAI,EAAE,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,UAAU;CACnD,CAAC","sourcesContent":["import PropTypes from 'prop-types';\nimport styled, { css } from 'styled-components';\n\nimport { Flex, Icon, Text, useTheme, calculateFontSize } from '@pega/cosmos-react-core';\n\nimport ToolbarActions from '../Toolbar/ToolbarActions';\n\nimport Personalization from './Personalization';\n\nconst StyledHeaderBar = styled.div(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n  return css`\n    .header-bar-icon-container {\n      margin-right: 0.5rem;\n      padding: 0.5rem;\n      background-color: ${theme.base.palette['brand-primary']};\n      border-radius: ${theme.base['border-radius']};\n\n      > .header-bar-icon {\n        margin: 0;\n        height: 1rem;\n        width: 1rem;\n        fill: currentColor;\n        color: white;\n      }\n    }\n    .header-bar-content {\n      max-height: 2.5rem;\n      justify-content: center;\n\n      button > div > span {\n        font-size: ${fontSize.xl};\n        font-weight: ${theme.base['font-weight']['semi-bold']};\n      }\n    }\n\n    .toolbar-actions {\n      align-self: flex-end;\n      font-size: ${fontSize.m};\n    }\n\n    .rs-title {\n      margin: 0 0 calc(${props => props.theme.base.spacing} - 0.875rem);\n    }\n  `;\n});\n\nexport default function HeaderBarGadget({ view }) {\n  const {\n    meta: { icon, title, toolbarActions }\n  } = view;\n  const theme = useTheme();\n  return (\n    <Flex\n      container={{ alignItems: 'center' }}\n      item={{ grow: 1 }}\n      className='header-bar-gadget'\n      as={StyledHeaderBar}\n      theme={theme}\n    >\n      <Flex container className='header-bar-icon-container'>\n        <Icon className='header-bar-icon' name={icon} />\n      </Flex>\n      <Flex container={{ direction: 'column' }} item={{ grow: 1 }} className='header-bar-content'>\n        <div className='rs-title'>\n          <Text variant='secondary'>{title}</Text>\n        </div>\n        <div>\n          <Personalization view={view} />\n        </div>\n      </Flex>\n      <div className='toolbar-actions'>\n        <ToolbarActions toolbarActions={toolbarActions} />\n      </div>\n    </Flex>\n  );\n}\n\nHeaderBarGadget.propTypes = {\n  view: PropTypes.objectOf(PropTypes.any).isRequired\n};\n"]}

package/lib/Core/Components/RSWrapper/Personalization.d.ts

@@ -0,0 +1,13 @@
+declare function Personalizations({ view }: {
+    view: any;
+}): import("react/jsx-runtime").JSX.Element | null;
+declare namespace Personalizations {
+    namespace propTypes {
+        let view: PropTypes.Validator<{
+            [x: string]: any;
+        }>;
+    }
+}
+export default Personalizations;
+import PropTypes from 'prop-types';
+//# sourceMappingURL=Personalization.d.ts.map

package/lib/Core/Components/RSWrapper/Personalization.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Personalization.d.ts","sourceRoot":"","sources":["../../../../Core/Components/RSWrapper/Personalization.jsx"],"names":[],"mappings":"AA+CA;;mDAwCC;;;;;;;;;sBAvFqB,YAAY"}