@pega/cosmos-react-build 9.0.0-build.2.6 → 9.0.0-build.2.7

package/lib/components/PageTemplates/ConstructPageTemplate/ConstructPageHeader.js

@@ -0,0 +1,158 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useState, useLayoutEffect, useCallback } from 'react';
+import { Text, Flex, useTestIds, withTestIds, useElement, Tooltip, Button, ShowMoreLess, StyledStackedFieldValue, StyledLabel, StyledFieldName, FieldValueList, AdditionalInfo, useI18n, useChToPxConversionFactor } from '@pega/cosmos-react-core';
+import IconTile from '../../IconTile';
+import { getPageHeaderTestIds } from '../PageTemplates.test-ids';
+import HeaderActionButtons from '../HeaderActionButtons';
+import { StyledText, StyledDescription, StyledPrimaryMetaButton, StyledHeader, StyledTitleContainer } from '../PageTemplate.styles';
+export const PrimaryHeaderText = ({ type: { href, onClick, name }, testId }) => {
+    if (href || onClick) {
+        return (_jsx(Button, { variant: 'link', href: href, onClick: onClick, "data-testid": testId, children: name }));
+    }
+    return _jsx(StyledText, { variant: 'secondary', children: name });
+};
+const ConstructPageHeader = ({ testId, title, primaryAction, additionalActions = [], metadata = { additional: [] }, visual, type, description, secondaryAction, progress }) => {
+    // States
+    const [countOfSecondaryMetaToShow, setCountOfSecondaryMetaToShow] = useState(metadata?.secondary?.length ?? 0);
+    const [countOfPrimaryMetaToShow, setCountOfPrimaryMetaToShow] = useState(metadata.primary?.length ?? 0);
+    const [showSecondaryAction, setShowSecondaryAction] = useState(true);
+    const [pageTitleEl, setPageTitleEl] = useElement();
+    const [primaryMetaEl, setPrimaryMetaEl] = useElement();
+    // Hooks
+    const chToPxConversionFactor = useChToPxConversionFactor();
+    const testIds = useTestIds(testId, getPageHeaderTestIds);
+    const t = useI18n();
+    // Refs
+    const headerRef = useRef(null);
+    const pageTitleContainerRef = useRef(null);
+    const actionsContainerRef = useRef(null);
+    const secondaryMetaDataRef = useRef(null);
+    const primaryMetaDataRef = useRef(null);
+    const observerRef = useRef();
+    const primaryMetaLengths = useRef([]);
+    const secondaryMetaLengths = useRef([]);
+    // Memos
+    const secondaryActionWidth = useMemo(() => (secondaryAction ? secondaryAction.primary.length * chToPxConversionFactor + 44 : 0), [secondaryAction]);
+    // Page actions component
+    const actions = useMemo(() => {
+        const additionalActionsData = [...additionalActions];
+        const secondaryActionsData = showSecondaryAction || additionalActionsData.length === 0 ? secondaryAction : undefined;
+        if (additionalActionsData.length > 0 && secondaryAction && !showSecondaryAction) {
+            additionalActionsData.unshift(secondaryAction);
+        }
+        return (_jsx(HeaderActionButtons, { additionalActions: additionalActionsData, primaryAction: primaryAction, secondaryAction: secondaryActionsData, testIds: testIds, progress: progress, animatePrimaryButton: true }));
+    }, [showSecondaryAction, primaryAction, secondaryAction, additionalActions]);
+    // CB to be run on resize observer
+    const showOrHideElements = useCallback(() => {
+        // Logic to show or hide primary metadata
+        const headerWidth = headerRef.current?.offsetWidth ?? 0;
+        const titleWidth = pageTitleContainerRef.current?.offsetWidth ?? 0;
+        let actionsWidth = actionsContainerRef.current?.offsetWidth ?? 0;
+        let newCountOfPrimaryMetaToShow = countOfPrimaryMetaToShow;
+        let newCountOfSecondaryMetaToShow = countOfSecondaryMetaToShow;
+        if (primaryMetaLengths.current.length > 0 && primaryMetaDataRef.current) {
+            if (countOfSecondaryMetaToShow === 0) {
+                const availableSpace = headerWidth - titleWidth - actionsWidth - 48;
+                const closestIndex = primaryMetaLengths.current.findIndex(i => i > availableSpace);
+                newCountOfPrimaryMetaToShow =
+                    closestIndex === -1 ? primaryMetaLengths.current.length : closestIndex;
+            }
+            else {
+                newCountOfPrimaryMetaToShow = primaryMetaLengths.current.length;
+            }
+        }
+        // Logic to show and hide secondary metadata items
+        if (secondaryMetaLengths.current.length !== 0 &&
+            secondaryMetaDataRef.current &&
+            primaryMetaDataRef.current &&
+            primaryMetaLengths.current.length === newCountOfPrimaryMetaToShow) {
+            const availableSpace = primaryMetaDataRef.current.offsetWidth -
+                (primaryMetaLengths.current[primaryMetaLengths.current.length - 1] ?? 0);
+            if (availableSpace > secondaryMetaLengths.current[secondaryMetaLengths.current.length - 1]) {
+                newCountOfSecondaryMetaToShow = secondaryMetaLengths.current.length;
+            }
+            else if (availableSpace < secondaryMetaLengths.current[0]) {
+                newCountOfSecondaryMetaToShow = 0;
+            }
+            else {
+                const closestIndex = secondaryMetaLengths.current.findIndex(i => i > availableSpace);
+                newCountOfSecondaryMetaToShow =
+                    closestIndex === -1 ? secondaryMetaLengths.current.length : closestIndex;
+            }
+        }
+        // Logic to show or hide secondary action
+        actionsWidth =
+            secondaryAction && showSecondaryAction ? actionsWidth : actionsWidth + secondaryActionWidth;
+        setShowSecondaryAction(!!secondaryAction && headerWidth >= titleWidth + actionsWidth + 25);
+        setCountOfPrimaryMetaToShow(newCountOfPrimaryMetaToShow);
+        setCountOfSecondaryMetaToShow(newCountOfSecondaryMetaToShow);
+        if (!headerRef.current?.offsetWidth) {
+            setCountOfPrimaryMetaToShow(primaryMetaLengths.current.length);
+            setShowSecondaryAction(!!secondaryAction);
+            setCountOfSecondaryMetaToShow(secondaryMetaLengths.current.length);
+        }
+    }, [
+        countOfSecondaryMetaToShow,
+        secondaryMetaLengths,
+        showSecondaryAction,
+        primaryMetaLengths,
+        countOfPrimaryMetaToShow
+    ]);
+    useLayoutEffect(() => {
+        primaryMetaLengths.current = [];
+        secondaryMetaLengths.current = [];
+        const primaryMetaDataLength = metadata.primary?.length ?? 0;
+        primaryMetaDataRef.current?.querySelectorAll('div:has(>dt)').forEach((el, index) => {
+            if (index < primaryMetaDataLength) {
+                primaryMetaLengths.current.push((index === 0 ? el.clientWidth : el.clientWidth + primaryMetaLengths.current[index - 1]) +
+                    16);
+            }
+            else {
+                secondaryMetaLengths.current.push((index === primaryMetaDataLength
+                    ? el.clientWidth
+                    : el.clientWidth + secondaryMetaLengths.current[index - primaryMetaDataLength - 1]) + 16);
+            }
+        });
+    }, [metadata.primary, metadata.secondary]);
+    // Resize observer for header
+    useLayoutEffect(() => {
+        if (observerRef.current) {
+            observerRef.current.disconnect();
+        }
+        if (headerRef.current) {
+            observerRef.current = new ResizeObserver(() => showOrHideElements());
+            observerRef.current.observe(headerRef.current);
+        }
+        return () => observerRef.current?.disconnect();
+    }, [showOrHideElements]);
+    // Run CB once on mount incase if component is mounted initially on resized screen
+    useLayoutEffect(() => {
+        showOrHideElements();
+    }, []);
+    return (_jsxs(Flex, { as: StyledHeader, container: {
+            direction: 'column',
+            rowGap: 1
+        }, children: [_jsxs(Flex, { container: {
+                    direction: 'row',
+                    alignItems: 'center',
+                    colGap: countOfPrimaryMetaToShow > 0 ? 3 : 1.5
+                }, ref: headerRef, children: [_jsxs(Flex, { ref: pageTitleContainerRef, container: { direction: 'row', colGap: 1, alignItems: 'center' }, item: { shrink: showSecondaryAction || countOfPrimaryMetaToShow > 0 ? 0 : 1 }, children: [visual && _jsx(IconTile, { testId: testIds.visual, ...visual, size: 'xl' }), _jsxs(Flex, { as: StyledTitleContainer, container: {
+                                    alignItems: 'start',
+                                    direction: 'column',
+                                    wrap: 'wrap'
+                                }, children: [type.name && _jsx(PrimaryHeaderText, { type: type, testId: testIds.type }), _jsx(StyledText, { showEllipsis: !showSecondaryAction && countOfPrimaryMetaToShow === 0, "data-testid": testIds.title, variant: 'h1', ref: setPageTitleEl, children: title }), _jsx(Tooltip, { target: pageTitleEl, smart: true, showDelay: 'none', hideDelay: 'none', children: title })] })] }), _jsxs(Flex, { container: {
+                            direction: 'row',
+                            colGap: countOfSecondaryMetaToShow > 0 || countOfPrimaryMetaToShow > 1 ? 3 : 0,
+                            alignItems: 'center'
+                        }, item: { grow: 1, shrink: 1 }, ref: primaryMetaDataRef, as: 'dl', children: [metadata.primary?.slice(0, countOfPrimaryMetaToShow).map(metaItem => (_jsxs(Flex, { as: StyledStackedFieldValue, container: { direction: 'column' }, item: { shrink: 0 }, "data-testid": testIds.primaryMetaData, children: [_jsx(StyledLabel, { as: StyledFieldName, children: metaItem.name }), metaItem.onClick ? (_jsx("dd", { children: _jsx(StyledPrimaryMetaButton, { ref: setPrimaryMetaEl, variant: 'link', onClick: metaItem.onClick, "data-testid": testId, children: metaItem.value }) })) : (_jsx(StyledText, { ref: setPrimaryMetaEl, variant: 'h1', forwardedAs: 'dd', children: metaItem.value })), _jsx(Tooltip, { target: primaryMetaEl, smart: true, showDelay: 'none', hideDelay: 'none', children: metaItem.value })] }, metaItem.name))), metadata.secondary && (_jsx(Flex, { container: { direction: 'row', colGap: 2, justify: 'end' }, item: { grow: 1, shrink: 1 }, ref: secondaryMetaDataRef, "data-testid": testIds.secondaryMetaData, children: metadata.secondary.slice(0, countOfSecondaryMetaToShow).map(metaItem => (_jsxs(Flex, { as: StyledStackedFieldValue, item: { shrink: 0 }, children: [_jsx(StyledLabel, { as: StyledFieldName, children: metaItem.name }), _jsx(StyledText, { as: 'dd', children: metaItem.value })] }, metaItem.name))) }))] }), _jsxs(Flex, { ref: actionsContainerRef, container: {
+                            direction: 'row',
+                            colGap: 2,
+                            justify: 'center'
+                        }, item: { alignSelf: 'center', shrink: 0 }, children: [metadata.additional.length > 0 && (_jsx(Flex, { container: { direction: 'row', colGap: 2, alignItems: 'center' }, children: _jsx(AdditionalInfo, { "data-testid": testIds.additionalInfoIcon, heading: title, children: _jsxs(Flex, { container: {
+                                            direction: 'column',
+                                            alignItems: 'start',
+                                            gap: 1
+                                        }, item: { grow: 1, alignSelf: 'stretch' }, children: [_jsx(FieldValueList, { fields: metadata.additional, variant: 'inline', testId: testIds.metaData }), description && (_jsxs(StyledStackedFieldValue, { children: [_jsx(StyledLabel, { as: StyledFieldName, children: t('description') }), _jsx(ShowMoreLess, { lines: 3, children: description })] }))] }) }) })), actions] })] }), description && (_jsx(StyledDescription, { children: _jsx(ShowMoreLess, { lines: 1, children: _jsx(Text, { children: description }) }) }))] }));
+};
+export default withTestIds(ConstructPageHeader, getPageHeaderTestIds);
+//# sourceMappingURL=ConstructPageHeader.js.map

package/lib/components/PageTemplates/ConstructPageTemplate/ConstructPageHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConstructPageHeader.js","sourceRoot":"","sources":["../../../../src/components/PageTemplates/ConstructPageTemplate/ConstructPageHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useMemo, useRef, useState, useLayoutEffect, useCallback } from 'react';\n\nimport {\n  Text,\n  Flex,\n  useTestIds,\n  withTestIds,\n  useElement,\n  Tooltip,\n  Button,\n  ShowMoreLess,\n  StyledStackedFieldValue,\n  StyledLabel,\n  StyledFieldName,\n  FieldValueList,\n  AdditionalInfo,\n  useI18n,\n  useChToPxConversionFactor,\n  type TestIdProp\n} from '@pega/cosmos-react-core';\n\nimport IconTile from '../../IconTile';\nimport { getPageHeaderTestIds } from '../PageTemplates.test-ids';\nimport type { ConstructPageTemplateProps, PageTemplateProps } from '../PageTemplate.types';\nimport HeaderActionButtons from '../HeaderActionButtons';\nimport {\n  StyledText,\n  StyledDescription,\n  StyledPrimaryMetaButton,\n  StyledHeader,\n  StyledTitleContainer\n} from '../PageTemplate.styles';\n\ntype ConstructPageHeaderProps = ConstructPageTemplateProps['header'] &\n  Pick<PageTemplateProps, 'progress'> &\n  TestIdProp;\n\nexport const PrimaryHeaderText = ({\n  type: { href, onClick, name },\n  testId\n}: {\n  type: ConstructPageHeaderProps['type'];\n  testId?: TestIdProp['testId'];\n}) => {\n  if (href || onClick) {\n    return (\n      <Button variant='link' href={href} onClick={onClick} data-testid={testId}>\n        {name}\n      </Button>\n    );\n  }\n  return <StyledText variant='secondary'>{name}</StyledText>;\n};\n\nconst ConstructPageHeader = ({\n  testId,\n  title,\n  primaryAction,\n  additionalActions = [],\n  metadata = { additional: [] },\n  visual,\n  type,\n  description,\n  secondaryAction,\n  progress\n}: ConstructPageHeaderProps) => {\n  // States\n  const [countOfSecondaryMetaToShow, setCountOfSecondaryMetaToShow] = useState<number>(\n    metadata?.secondary?.length ?? 0\n  );\n  const [countOfPrimaryMetaToShow, setCountOfPrimaryMetaToShow] = useState<number>(\n    metadata.primary?.length ?? 0\n  );\n  const [showSecondaryAction, setShowSecondaryAction] = useState(true);\n  const [pageTitleEl, setPageTitleEl] = useElement();\n  const [primaryMetaEl, setPrimaryMetaEl] = useElement();\n\n  // Hooks\n  const chToPxConversionFactor = useChToPxConversionFactor();\n  const testIds = useTestIds(testId, getPageHeaderTestIds);\n  const t = useI18n();\n\n  // Refs\n  const headerRef = useRef<HTMLDivElement>(null);\n  const pageTitleContainerRef = useRef<HTMLDivElement>(null);\n  const actionsContainerRef = useRef<HTMLDivElement>(null);\n  const secondaryMetaDataRef = useRef<HTMLDivElement>(null);\n  const primaryMetaDataRef = useRef<HTMLDivElement>(null);\n  const observerRef = useRef<ResizeObserver>();\n  const primaryMetaLengths = useRef<number[]>([]);\n  const secondaryMetaLengths = useRef<number[]>([]);\n\n  // Memos\n  const secondaryActionWidth = useMemo(\n    () => (secondaryAction ? secondaryAction.primary.length * chToPxConversionFactor + 44 : 0),\n    [secondaryAction]\n  );\n\n  // Page actions component\n  const actions = useMemo(() => {\n    const additionalActionsData = [...additionalActions];\n    const secondaryActionsData =\n      showSecondaryAction || additionalActionsData.length === 0 ? secondaryAction : undefined;\n    if (additionalActionsData.length > 0 && secondaryAction && !showSecondaryAction) {\n      additionalActionsData.unshift(secondaryAction);\n    }\n\n    return (\n      <HeaderActionButtons\n        additionalActions={additionalActionsData}\n        primaryAction={primaryAction}\n        secondaryAction={secondaryActionsData}\n        testIds={testIds}\n        progress={progress}\n        animatePrimaryButton\n      />\n    );\n  }, [showSecondaryAction, primaryAction, secondaryAction, additionalActions]);\n\n  // CB to be run on resize observer\n  const showOrHideElements = useCallback(() => {\n    // Logic to show or hide primary metadata\n    const headerWidth = headerRef.current?.offsetWidth ?? 0;\n    const titleWidth = pageTitleContainerRef.current?.offsetWidth ?? 0;\n    let actionsWidth = actionsContainerRef.current?.offsetWidth ?? 0;\n    let newCountOfPrimaryMetaToShow = countOfPrimaryMetaToShow;\n    let newCountOfSecondaryMetaToShow = countOfSecondaryMetaToShow;\n\n    if (primaryMetaLengths.current.length > 0 && primaryMetaDataRef.current) {\n      if (countOfSecondaryMetaToShow === 0) {\n        const availableSpace = headerWidth - titleWidth - actionsWidth - 48;\n        const closestIndex = primaryMetaLengths.current.findIndex(i => i > availableSpace);\n        newCountOfPrimaryMetaToShow =\n          closestIndex === -1 ? primaryMetaLengths.current.length : closestIndex;\n      } else {\n        newCountOfPrimaryMetaToShow = primaryMetaLengths.current.length;\n      }\n    }\n\n    // Logic to show and hide secondary metadata items\n    if (\n      secondaryMetaLengths.current.length !== 0 &&\n      secondaryMetaDataRef.current &&\n      primaryMetaDataRef.current &&\n      primaryMetaLengths.current.length === newCountOfPrimaryMetaToShow\n    ) {\n      const availableSpace =\n        primaryMetaDataRef.current.offsetWidth -\n        (primaryMetaLengths.current[primaryMetaLengths.current.length - 1] ?? 0);\n      if (availableSpace > secondaryMetaLengths.current[secondaryMetaLengths.current.length - 1]) {\n        newCountOfSecondaryMetaToShow = secondaryMetaLengths.current.length;\n      } else if (availableSpace < secondaryMetaLengths.current[0]) {\n        newCountOfSecondaryMetaToShow = 0;\n      } else {\n        const closestIndex = secondaryMetaLengths.current.findIndex(i => i > availableSpace);\n        newCountOfSecondaryMetaToShow =\n          closestIndex === -1 ? secondaryMetaLengths.current.length : closestIndex;\n      }\n    }\n\n    // Logic to show or hide secondary action\n    actionsWidth =\n      secondaryAction && showSecondaryAction ? actionsWidth : actionsWidth + secondaryActionWidth;\n    setShowSecondaryAction(!!secondaryAction && headerWidth >= titleWidth + actionsWidth + 25);\n    setCountOfPrimaryMetaToShow(newCountOfPrimaryMetaToShow);\n    setCountOfSecondaryMetaToShow(newCountOfSecondaryMetaToShow);\n\n    if (!headerRef.current?.offsetWidth) {\n      setCountOfPrimaryMetaToShow(primaryMetaLengths.current.length);\n      setShowSecondaryAction(!!secondaryAction);\n      setCountOfSecondaryMetaToShow(secondaryMetaLengths.current.length);\n    }\n  }, [\n    countOfSecondaryMetaToShow,\n    secondaryMetaLengths,\n    showSecondaryAction,\n    primaryMetaLengths,\n    countOfPrimaryMetaToShow\n  ]);\n\n  useLayoutEffect(() => {\n    primaryMetaLengths.current = [];\n    secondaryMetaLengths.current = [];\n    const primaryMetaDataLength = metadata.primary?.length ?? 0;\n    primaryMetaDataRef.current?.querySelectorAll('div:has(>dt)').forEach((el, index) => {\n      if (index < primaryMetaDataLength) {\n        primaryMetaLengths.current.push(\n          (index === 0 ? el.clientWidth : el.clientWidth + primaryMetaLengths.current[index - 1]) +\n            16\n        );\n      } else {\n        secondaryMetaLengths.current.push(\n          (index === primaryMetaDataLength\n            ? el.clientWidth\n            : el.clientWidth + secondaryMetaLengths.current[index - primaryMetaDataLength - 1]) + 16\n        );\n      }\n    });\n  }, [metadata.primary, metadata.secondary]);\n\n  // Resize observer for header\n  useLayoutEffect(() => {\n    if (observerRef.current) {\n      observerRef.current.disconnect();\n    }\n    if (headerRef.current) {\n      observerRef.current = new ResizeObserver(() => showOrHideElements());\n      observerRef.current.observe(headerRef.current);\n    }\n    return () => observerRef.current?.disconnect();\n  }, [showOrHideElements]);\n\n  // Run CB once on mount incase if component is mounted initially on resized screen\n  useLayoutEffect(() => {\n    showOrHideElements();\n  }, []);\n\n  return (\n    <Flex\n      as={StyledHeader}\n      container={{\n        direction: 'column',\n        rowGap: 1\n      }}\n    >\n      <Flex\n        container={{\n          direction: 'row',\n          alignItems: 'center',\n          colGap: countOfPrimaryMetaToShow > 0 ? 3 : 1.5\n        }}\n        ref={headerRef}\n      >\n        <Flex\n          ref={pageTitleContainerRef}\n          container={{ direction: 'row', colGap: 1, alignItems: 'center' }}\n          item={{ shrink: showSecondaryAction || countOfPrimaryMetaToShow > 0 ? 0 : 1 }}\n        >\n          {visual && <IconTile testId={testIds.visual} {...visual} size='xl' />}\n          <Flex\n            as={StyledTitleContainer}\n            container={{\n              alignItems: 'start',\n              direction: 'column',\n              wrap: 'wrap'\n            }}\n          >\n            {type.name && <PrimaryHeaderText type={type} testId={testIds.type} />}\n            <StyledText\n              showEllipsis={!showSecondaryAction && countOfPrimaryMetaToShow === 0}\n              data-testid={testIds.title}\n              variant='h1'\n              ref={setPageTitleEl}\n            >\n              {title}\n            </StyledText>\n            <Tooltip target={pageTitleEl} smart showDelay='none' hideDelay='none'>\n              {title}\n            </Tooltip>\n          </Flex>\n        </Flex>\n\n        <Flex\n          container={{\n            direction: 'row',\n            colGap: countOfSecondaryMetaToShow > 0 || countOfPrimaryMetaToShow > 1 ? 3 : 0,\n            alignItems: 'center'\n          }}\n          item={{ grow: 1, shrink: 1 }}\n          ref={primaryMetaDataRef}\n          as='dl'\n        >\n          {metadata.primary?.slice(0, countOfPrimaryMetaToShow).map(metaItem => (\n            <Flex\n              key={metaItem.name}\n              as={StyledStackedFieldValue}\n              container={{ direction: 'column' }}\n              item={{ shrink: 0 }}\n              data-testid={testIds.primaryMetaData}\n            >\n              <StyledLabel as={StyledFieldName}>{metaItem.name}</StyledLabel>\n              {metaItem.onClick ? (\n                <dd>\n                  <StyledPrimaryMetaButton\n                    ref={setPrimaryMetaEl}\n                    variant='link'\n                    onClick={metaItem.onClick}\n                    data-testid={testId}\n                  >\n                    {metaItem.value}\n                  </StyledPrimaryMetaButton>\n                </dd>\n              ) : (\n                <StyledText ref={setPrimaryMetaEl} variant='h1' forwardedAs='dd'>\n                  {metaItem.value}\n                </StyledText>\n              )}\n              <Tooltip target={primaryMetaEl} smart showDelay='none' hideDelay='none'>\n                {metaItem.value}\n              </Tooltip>\n            </Flex>\n          ))}\n\n          {metadata.secondary && (\n            <Flex\n              container={{ direction: 'row', colGap: 2, justify: 'end' }}\n              item={{ grow: 1, shrink: 1 }}\n              ref={secondaryMetaDataRef}\n              data-testid={testIds.secondaryMetaData}\n            >\n              {metadata.secondary.slice(0, countOfSecondaryMetaToShow).map(metaItem => (\n                <Flex as={StyledStackedFieldValue} item={{ shrink: 0 }} key={metaItem.name}>\n                  <StyledLabel as={StyledFieldName}>{metaItem.name}</StyledLabel>\n                  <StyledText as='dd'>{metaItem.value}</StyledText>\n                </Flex>\n              ))}\n            </Flex>\n          )}\n        </Flex>\n\n        <Flex\n          ref={actionsContainerRef}\n          container={{\n            direction: 'row',\n            colGap: 2,\n            justify: 'center'\n          }}\n          item={{ alignSelf: 'center', shrink: 0 }}\n        >\n          {metadata.additional.length > 0 && (\n            <Flex container={{ direction: 'row', colGap: 2, alignItems: 'center' }}>\n              <AdditionalInfo data-testid={testIds.additionalInfoIcon} heading={title}>\n                <Flex\n                  container={{\n                    direction: 'column',\n                    alignItems: 'start',\n                    gap: 1\n                  }}\n                  item={{ grow: 1, alignSelf: 'stretch' }}\n                >\n                  <FieldValueList\n                    fields={metadata.additional}\n                    variant='inline'\n                    testId={testIds.metaData}\n                  />\n                  {description && (\n                    <StyledStackedFieldValue>\n                      <StyledLabel as={StyledFieldName}>{t('description')}</StyledLabel>\n                      <ShowMoreLess lines={3}>{description}</ShowMoreLess>\n                    </StyledStackedFieldValue>\n                  )}\n                </Flex>\n              </AdditionalInfo>\n            </Flex>\n          )}\n\n          {actions}\n        </Flex>\n      </Flex>\n\n      {description && (\n        <StyledDescription>\n          <ShowMoreLess lines={1}>\n            <Text>{description}</Text>\n          </ShowMoreLess>\n        </StyledDescription>\n      )}\n    </Flex>\n  );\n};\n\nexport default withTestIds(ConstructPageHeader, getPageHeaderTestIds);\n"]}

package/lib/components/PageTemplates/ConstructPageTemplate/ConstructPageTemplate.d.ts

@@ -0,0 +1,5 @@
+import type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';
+import type { ConstructPageTemplateProps } from '../PageTemplate.types';
+declare const ConstructPageTemplate: ForwardRefForwardPropsComponent<ConstructPageTemplateProps>;
+export default ConstructPageTemplate;
+//# sourceMappingURL=ConstructPageTemplate.d.ts.map

package/lib/components/PageTemplates/ConstructPageTemplate/ConstructPageTemplate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConstructPageTemplate.d.ts","sourceRoot":"","sources":["../../../../src/components/PageTemplates/ConstructPageTemplate/ConstructPageTemplate.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,yBAAyB,CAAC;AAE/E,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAC;AAKxE,QAAA,MAAM,qBAAqB,EAAE,+BAA+B,CAAC,0BAA0B,CA0BpF,CAAC;AAEJ,eAAe,qBAAqB,CAAC"}

package/lib/components/PageTemplates/ConstructPageTemplate/ConstructPageTemplate.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { TabbedPage as CoreTabbedPage, Banner } from '@pega/cosmos-react-core';
+import { StyledPage } from '../PageTemplates';
+import ConstructPageHeader from './ConstructPageHeader';
+const ConstructPageTemplate = forwardRef(({ tabs, errorBanner, header, progress = false, testId, ...restProps }, ref) => {
+    return (_jsx(CoreTabbedPage, { ...restProps, title: header.title, as: StyledPage, header: _jsx(ConstructPageHeader, { ...header, progress: progress, testId: testId }), tabs: tabs, ref: ref, banners: errorBanner && _jsx(Banner, { testId: testId, ...errorBanner }), scrollContent: true }));
+});
+export default ConstructPageTemplate;
+//# sourceMappingURL=ConstructPageTemplate.js.map

package/lib/components/PageTemplates/ConstructPageTemplate/ConstructPageTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConstructPageTemplate.js","sourceRoot":"","sources":["../../../../src/components/PageTemplates/ConstructPageTemplate/ConstructPageTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGnC,OAAO,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAI/E,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AAExD,MAAM,qBAAqB,GACzB,UAAU,CACR,CACE,EACE,IAAI,EACJ,WAAW,EACX,MAAM,EACN,QAAQ,GAAG,KAAK,EAChB,MAAM,EACN,GAAG,SAAS,EACgC,EAC9C,GAAwB,EACxB,EAAE;IACF,OAAO,CACL,KAAC,cAAc,OACT,SAAS,EACb,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,EAAE,EAAE,UAAU,EACd,MAAM,EAAE,KAAC,mBAAmB,OAAK,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,GAAI,EAC/E,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,WAAW,IAAI,KAAC,MAAM,IAAC,MAAM,EAAE,MAAM,KAAM,WAAW,GAAI,EACnE,aAAa,SACb,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEJ,eAAe,qBAAqB,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { Ref, PropsWithoutRef } from 'react';\n\nimport { TabbedPage as CoreTabbedPage, Banner } from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';\n\nimport type { ConstructPageTemplateProps } from '../PageTemplate.types';\nimport { StyledPage } from '../PageTemplates';\n\nimport ConstructPageHeader from './ConstructPageHeader';\n\nconst ConstructPageTemplate: ForwardRefForwardPropsComponent<ConstructPageTemplateProps> =\n  forwardRef(\n    (\n      {\n        tabs,\n        errorBanner,\n        header,\n        progress = false,\n        testId,\n        ...restProps\n      }: PropsWithoutRef<ConstructPageTemplateProps>,\n      ref: Ref<HTMLDivElement>\n    ) => {\n      return (\n        <CoreTabbedPage\n          {...restProps}\n          title={header.title}\n          as={StyledPage}\n          header={<ConstructPageHeader {...header} progress={progress} testId={testId} />}\n          tabs={tabs}\n          ref={ref}\n          banners={errorBanner && <Banner testId={testId} {...errorBanner} />}\n          scrollContent\n        />\n      );\n    }\n  );\n\nexport default ConstructPageTemplate;\n"]}

package/lib/components/PageTemplates/GalleryPage.d.ts

@@ -1,12 +1,12 @@
 import type { Ref, MouseEvent } from 'react';
-import type { NoChildrenProp } from '@pega/cosmos-react-core';
+import type { NoChildrenProp, TestIdProp, ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';
 import type { SummaryCardProps } from '../SummaryCard';
 import type { PageBannerProps } from '../PageBanner';
-interface EmptyStateProps {
+interface EmptyStateProps extends TestIdProp {
     heading: string;
     description?: string;
 }
-export interface GalleryPageProps extends NoChildrenProp, PageBannerProps {
+export interface GalleryPageProps extends NoChildrenProp, PageBannerProps, TestIdProp {
     /** Props to render the empty state content. */
     emptyState: EmptyStateProps;
     /** A list of cards to render as a grid. */
@@ -15,9 +15,19 @@ export interface GalleryPageProps extends NoChildrenProp, PageBannerProps {
     onItemClick: (id: SummaryCardProps['id'], e: MouseEvent<HTMLDivElement>) => void;
     /** Ref for the wrapping element. */
     ref?: Ref<HTMLDivElement>;
+    /** Items which are filtered from list and shouldn't be rendered */
+    filteredItems?: string[];
+    /** Callback function that is fired when filter is applied */
+    onFilterChange?: (selectedItems: string[]) => void;
+    /** Flag to show all items */
+    isShowAllItemsEnabled?: boolean;
+    /** Callback function that is fired when show all toggle is changed */
+    onShowAllItemsToggleChange?: () => void;
+    /** Flag to hide filter options */
+    hideFilterOptions?: boolean;
 }
 export declare const StyledGalleryPage: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-declare const GalleryPage: import("react").ForwardRefExoticComponent<Omit<GalleryPageProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const GalleryPage: ForwardRefForwardPropsComponent<GalleryPageProps>;
 export default GalleryPage;
 //# sourceMappingURL=GalleryPage.d.ts.map

package/lib/components/PageTemplates/GalleryPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GalleryPage.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/GalleryPage.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAuB,GAAG,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAclE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAG9D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAEvD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAErD,UAAU,eAAe;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,gBAAiB,SAAQ,cAAc,EAAE,eAAe;IACvE,+CAA+C;IAC/C,UAAU,EAAE,eAAe,CAAC;IAC5B,2CAA2C;IAC3C,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC3B,+DAA+D;IAC/D,WAAW,EAAE,CAAC,EAAE,EAAE,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACjF,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,iBAAiB,yGAE7B,CAAC;AAEF,eAAO,MAAM,aAAa,yGAMxB,CAAC;AA+CH,QAAA,MAAM,WAAW,0HA+Cf,CAAC;AAEH,eAAe,WAAW,CAAC"}
+{"version":3,"file":"GalleryPage.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/GalleryPage.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,UAAU,EAAuB,MAAM,OAAO,CAAC;AAkBlE,OAAO,KAAK,EACV,cAAc,EACd,UAAU,EAGV,+BAA+B,EAChC,MAAM,yBAAyB,CAAC;AAGjC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAEvD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAIrD,UAAU,eAAgB,SAAQ,UAAU;IAC1C,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,gBAAiB,SAAQ,cAAc,EAAE,eAAe,EAAE,UAAU;IACnF,+CAA+C;IAC/C,UAAU,EAAE,eAAe,CAAC;IAC5B,2CAA2C;IAC3C,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC3B,+DAA+D;IAC/D,WAAW,EAAE,CAAC,EAAE,EAAE,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACjF,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAK1B,mEAAmE;IACnE,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,6DAA6D;IAC7D,cAAc,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACnD,6BAA6B;IAC7B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,sEAAsE;IACtE,0BAA0B,CAAC,EAAE,MAAM,IAAI,CAAC;IACxC,kCAAkC;IAClC,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,iBAAiB,yGAE7B,CAAC;AAEF,eAAO,MAAM,aAAa,yGAIxB,CAAC;AAqDH,QAAA,MAAM,WAAW,EAAE,+BAA+B,CAAC,gBAAgB,CAsIlE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/PageTemplates/GalleryPage.js

@@ -1,17 +1,16 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useEffect, useState, useMemo } from 'react';
 import styled, { css } from 'styled-components';
-import { Flex, Grid, Button, ShowMoreLess, Text, defaultThemeProp, useConfiguration, focusHeadingOrContainer, useConsolidatedRef } from '@pega/cosmos-react-core';
+import { Flex, Grid, Button, ShowMoreLess, Text, defaultThemeProp, useConfiguration, focusHeadingOrContainer, useConsolidatedRef, useTestIds, ComboBox, Switch, menuHelpers } from '@pega/cosmos-react-core';
 import SummaryCard from '../SummaryCard';
 import PageBanner from '../PageBanner';
+import { getGalleryPageEmptyStateTestIds } from './PageTemplates.test-ids';
 export const StyledGalleryPage = styled.div `
   min-height: inherit;
 `;
 export const StyledContent = styled.div(({ theme }) => {
     return css `
-    padding-block: calc(3 * ${theme.base.spacing});
-    padding-inline: calc(4 * ${theme.base.spacing});
-    min-height: 100%;
+    padding: calc(3 * ${theme.base.spacing});
   `;
 });
 StyledContent.defaultProps = defaultThemeProp;
@@ -20,19 +19,57 @@ const SummaryCardList = ({ items, onItemClick }) => {
             cols: 'repeat(auto-fill, minmax(18.75rem, 1fr))',
             autoRows: '10rem',
             gap: 2
-        }, children: items && items.map(item => _jsx(SummaryCard, { ...item, onClick: onItemClick }, item.id)) }));
+        }, children: items?.map(item => _jsx(SummaryCard, { ...item, onClick: onItemClick }, item.id)) }));
 };
-const EmptyState = ({ heading, description, actions }) => {
-    return (_jsxs(Flex, { container: { direction: 'column', alignItems: 'center', justify: 'center', rowGap: 2 }, item: { grow: 1 }, children: [_jsx(Text, { variant: 'h2', children: heading }), description && (_jsx(ShowMoreLess, { lines: 2, children: _jsx(Text, { as: 'p', children: description }) })), !!actions?.length &&
+const EmptyState = ({ testId, heading, description, actions }) => {
+    const testIds = useTestIds(testId, getGalleryPageEmptyStateTestIds);
+    return (_jsxs(Flex, { container: { direction: 'column', alignItems: 'center', justify: 'center', rowGap: 2 }, item: { grow: 1 }, children: [_jsx(Text, { "data-testid": testIds.heading, variant: 'h2', children: heading }), description && (_jsx(ShowMoreLess, { lines: 2, children: _jsx(Text, { "data-testid": testIds.description, as: 'p', children: description }) })), !!actions?.length &&
                 actions.map(action => (_jsx(Button, { variant: 'primary', onClick: action.onClick, children: action.label }, action.label)))] }));
 };
-const GalleryPage = forwardRef(function GalleryPage({ title, description, image, items, onItemClick, emptyState, actions, link }, ref) {
+const GalleryPage = forwardRef(({ testId, title, description, image, items, onItemClick, emptyState, actions, link, 
+/*
+This change is temporary until LASA is completed.
+It will provide the provider success team with a feature to hide apps before demoing to customers.
+*/
+filteredItems = [], onFilterChange, isShowAllItemsEnabled = true, onShowAllItemsToggleChange, hideFilterOptions = true }, ref) => {
     const { loadedRef } = useConfiguration();
     const pageRef = useConsolidatedRef(ref);
+    const list = items?.map(item => ({
+        id: item.id,
+        primary: item.title,
+        secondary: [item.description],
+        selected: filteredItems?.includes(item.id)
+    })) || [];
+    const [comboBoxItems, setComboBoxItems] = useState(menuHelpers.mapTree(list, item => ({
+        id: item.id,
+        primary: item.primary,
+        selected: item.selected
+    })));
+    const selected = useMemo(() => {
+        return menuHelpers.getSelected(comboBoxItems).map(item => ({
+            text: item.primary,
+            id: item.id
+        }));
+    }, [comboBoxItems]);
+    const toggleItem = (id) => {
+        setComboBoxItems(cur => menuHelpers.toggleSelected(cur, id, 'multi-select'));
+    };
+    const itemsToRender = useMemo(() => {
+        const mappedItems = menuHelpers.mapTree(comboBoxItems, item => ({
+            ...item,
+            selected: item.items ? undefined : !!item.selected
+        }));
+        if (items?.length) {
+            const selectedItems = menuHelpers.getSelected(mappedItems).map(item => item.id);
+            onFilterChange?.(selectedItems);
+        }
+        return mappedItems;
+    }, [comboBoxItems]);
     // Focus heading on initial mount
     useEffect(() => {
-        if (!pageRef.current)
+        if (!pageRef.current) {
             return;
+        }
         if (loadedRef.current) {
             focusHeadingOrContainer(pageRef.current, title);
         }
@@ -41,7 +78,15 @@ const GalleryPage = forwardRef(function GalleryPage({ title, description, image,
         }
     }, [title]);
     const noItems = !items || items.length === 0;
-    return (_jsxs(StyledGalleryPage, { ref: pageRef, children: [_jsx(PageBanner, { title: title, description: description, actions: noItems ? undefined : actions, link: link, image: image }), _jsx(StyledContent, { children: noItems ? (_jsx(EmptyState, { ...emptyState, actions: actions })) : (_jsx(SummaryCardList, { items: items, onItemClick: onItemClick })) })] }));
+    return (_jsxs(StyledGalleryPage, { ref: pageRef, children: [_jsx(PageBanner, { testId: testId, title: title, description: description, actions: noItems ? undefined : actions, link: link, image: image }), _jsx(StyledContent, { children: noItems ? (_jsx(EmptyState, { testId: testId, ...emptyState, actions: actions })) : (_jsxs(_Fragment, { children: [!hideFilterOptions && (_jsxs(Flex, { container: { justify: 'between', pad: [0, 0, 2, 0] }, children: [_jsx(ComboBox, { mode: 'multi-select', labelHidden: true, selected: {
+                                        items: selected,
+                                        onRemove: toggleItem
+                                    }, menu: {
+                                        items: itemsToRender,
+                                        onItemClick: toggleItem
+                                    } }), _jsx(Switch, { label: 'Show hidden apps', on: isShowAllItemsEnabled, onChange: onShowAllItemsToggleChange })] })), _jsx(SummaryCardList, { items: isShowAllItemsEnabled
+                                ? items
+                                : items.filter(item => filteredItems.includes(item.id)), onItemClick: onItemClick })] })) })] }));
 });
 export default GalleryPage;
 //# sourceMappingURL=GalleryPage.js.map

package/lib/components/PageTemplates/GalleryPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"GalleryPage.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/GalleryPage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect } from 'react';\nimport type { FC, PropsWithoutRef, Ref, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Flex,\n  Grid,\n  Button,\n  ShowMoreLess,\n  Text,\n  defaultThemeProp,\n  useConfiguration,\n  focusHeadingOrContainer,\n  useConsolidatedRef\n} from '@pega/cosmos-react-core';\nimport type { NoChildrenProp } from '@pega/cosmos-react-core';\n\nimport SummaryCard from '../SummaryCard';\nimport type { SummaryCardProps } from '../SummaryCard';\nimport PageBanner from '../PageBanner';\nimport type { PageBannerProps } from '../PageBanner';\n\ninterface EmptyStateProps {\n  heading: string;\n  description?: string;\n}\n\nexport interface GalleryPageProps extends NoChildrenProp, PageBannerProps {\n  /** Props to render the empty state content. */\n  emptyState: EmptyStateProps;\n  /** A list of cards to render as a grid. */\n  items?: SummaryCardProps[];\n  /** Callback function that is fired when an item is clicked. */\n  onItemClick: (id: SummaryCardProps['id'], e: MouseEvent<HTMLDivElement>) => void;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledGalleryPage = styled.div`\n  min-height: inherit;\n`;\n\nexport const StyledContent = styled.div(({ theme }) => {\n  return css`\n    padding-block: calc(3 * ${theme.base.spacing});\n    padding-inline: calc(4 * ${theme.base.spacing});\n    min-height: 100%;\n  `;\n});\n\nStyledContent.defaultProps = defaultThemeProp;\n\nconst SummaryCardList: FC<{\n  items: GalleryPageProps['items'];\n  onItemClick: GalleryPageProps['onItemClick'];\n}> = ({ items, onItemClick }) => {\n  return (\n    <Grid\n      container={{\n        cols: 'repeat(auto-fill, minmax(18.75rem, 1fr))',\n        autoRows: '10rem',\n        gap: 2\n      }}\n    >\n      {items && items.map(item => <SummaryCard key={item.id} {...item} onClick={onItemClick} />)}\n    </Grid>\n  );\n};\n\nconst EmptyState: FC<EmptyStateProps & Pick<GalleryPageProps, 'actions'>> = ({\n  heading,\n  description,\n  actions\n}) => {\n  return (\n    <Flex\n      container={{ direction: 'column', alignItems: 'center', justify: 'center', rowGap: 2 }}\n      item={{ grow: 1 }}\n    >\n      <Text variant='h2'>{heading}</Text>\n      {description && (\n        <ShowMoreLess lines={2}>\n          <Text as='p'>{description}</Text>\n        </ShowMoreLess>\n      )}\n      {!!actions?.length &&\n        actions.map(action => (\n          <Button key={action.label} variant='primary' onClick={action.onClick}>\n            {action.label}\n          </Button>\n        ))}\n    </Flex>\n  );\n};\n\nconst GalleryPage = forwardRef(function GalleryPage(\n  {\n    title,\n    description,\n    image,\n    items,\n    onItemClick,\n    emptyState,\n    actions,\n    link\n  }: PropsWithoutRef<GalleryPageProps>,\n  ref: GalleryPageProps['ref']\n) {\n  const { loadedRef } = useConfiguration();\n  const pageRef = useConsolidatedRef(ref);\n\n  // Focus heading on initial mount\n  useEffect(() => {\n    if (!pageRef.current) return;\n\n    if (loadedRef.current) {\n      focusHeadingOrContainer(pageRef.current, title);\n    } else {\n      loadedRef.current = true;\n    }\n  }, [title]);\n\n  const noItems = !items || items.length === 0;\n\n  return (\n    <StyledGalleryPage ref={pageRef}>\n      <PageBanner\n        title={title}\n        description={description}\n        actions={noItems ? undefined : actions}\n        link={link}\n        image={image}\n      />\n      <StyledContent>\n        {noItems ? (\n          <EmptyState {...emptyState} actions={actions} />\n        ) : (\n          <SummaryCardList items={items} onItemClick={onItemClick} />\n        )}\n      </StyledContent>\n    </StyledGalleryPage>\n  );\n});\n\nexport default GalleryPage;\n"]}
+{"version":3,"file":"GalleryPage.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/GalleryPage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useState, useMemo } from 'react';\nimport type { Ref, MouseEvent, FC, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Flex,\n  Grid,\n  Button,\n  ShowMoreLess,\n  Text,\n  defaultThemeProp,\n  useConfiguration,\n  focusHeadingOrContainer,\n  useConsolidatedRef,\n  useTestIds,\n  ComboBox,\n  Switch,\n  menuHelpers\n} from '@pega/cosmos-react-core';\nimport type {\n  NoChildrenProp,\n  TestIdProp,\n  MenuProps,\n  MenuItemProps,\n  ForwardRefForwardPropsComponent\n} from '@pega/cosmos-react-core';\n\nimport SummaryCard from '../SummaryCard';\nimport type { SummaryCardProps } from '../SummaryCard';\nimport PageBanner from '../PageBanner';\nimport type { PageBannerProps } from '../PageBanner';\n\nimport { getGalleryPageEmptyStateTestIds } from './PageTemplates.test-ids';\n\ninterface EmptyStateProps extends TestIdProp {\n  heading: string;\n  description?: string;\n}\n\nexport interface GalleryPageProps extends NoChildrenProp, PageBannerProps, TestIdProp {\n  /** Props to render the empty state content. */\n  emptyState: EmptyStateProps;\n  /** A list of cards to render as a grid. */\n  items?: SummaryCardProps[];\n  /** Callback function that is fired when an item is clicked. */\n  onItemClick: (id: SummaryCardProps['id'], e: MouseEvent<HTMLDivElement>) => void;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n  /*\n      This change is temporary until LASA is completed.\n      It will provide the provider success team with a feature to hide apps before demoing to customers.\n  */\n  /** Items which are filtered from list and shouldn't be rendered */\n  filteredItems?: string[];\n  /** Callback function that is fired when filter is applied */\n  onFilterChange?: (selectedItems: string[]) => void;\n  /** Flag to show all items */\n  isShowAllItemsEnabled?: boolean;\n  /** Callback function that is fired when show all toggle is changed */\n  onShowAllItemsToggleChange?: () => void;\n  /** Flag to hide filter options */\n  hideFilterOptions?: boolean;\n}\n\nexport const StyledGalleryPage = styled.div`\n  min-height: inherit;\n`;\n\nexport const StyledContent = styled.div(({ theme }) => {\n  return css`\n    padding: calc(3 * ${theme.base.spacing});\n  `;\n});\n\nStyledContent.defaultProps = defaultThemeProp;\n\nconst SummaryCardList: FC<{\n  items: GalleryPageProps['items'];\n  onItemClick: GalleryPageProps['onItemClick'];\n}> = ({ items, onItemClick }) => {\n  return (\n    <Grid\n      container={{\n        cols: 'repeat(auto-fill, minmax(18.75rem, 1fr))',\n        autoRows: '10rem',\n        gap: 2\n      }}\n    >\n      {items?.map(item => <SummaryCard key={item.id} {...item} onClick={onItemClick} />)}\n    </Grid>\n  );\n};\n\nconst EmptyState: FC<EmptyStateProps & Pick<GalleryPageProps, 'actions'>> = ({\n  testId,\n  heading,\n  description,\n  actions\n}) => {\n  const testIds = useTestIds(testId, getGalleryPageEmptyStateTestIds);\n  return (\n    <Flex\n      container={{ direction: 'column', alignItems: 'center', justify: 'center', rowGap: 2 }}\n      item={{ grow: 1 }}\n    >\n      <Text data-testid={testIds.heading} variant='h2'>\n        {heading}\n      </Text>\n      {description && (\n        <ShowMoreLess lines={2}>\n          <Text data-testid={testIds.description} as='p'>\n            {description}\n          </Text>\n        </ShowMoreLess>\n      )}\n      {!!actions?.length &&\n        actions.map(action => (\n          <Button key={action.label} variant='primary' onClick={action.onClick}>\n            {action.label}\n          </Button>\n        ))}\n    </Flex>\n  );\n};\n\nconst GalleryPage: ForwardRefForwardPropsComponent<GalleryPageProps> = forwardRef(\n  (\n    {\n      testId,\n      title,\n      description,\n      image,\n      items,\n      onItemClick,\n      emptyState,\n      actions,\n      link,\n      /*\n      This change is temporary until LASA is completed.\n      It will provide the provider success team with a feature to hide apps before demoing to customers.\n      */\n      filteredItems = [],\n      onFilterChange,\n      isShowAllItemsEnabled = true,\n      onShowAllItemsToggleChange,\n      hideFilterOptions = true\n    }: PropsWithoutRef<GalleryPageProps>,\n    ref: GalleryPageProps['ref']\n  ) => {\n    const { loadedRef } = useConfiguration();\n    const pageRef = useConsolidatedRef(ref);\n\n    const list: MenuProps['items'] =\n      items?.map(item => ({\n        id: item.id,\n        primary: item.title,\n        secondary: [item.description],\n        selected: filteredItems?.includes(item.id)\n      })) || [];\n\n    const [comboBoxItems, setComboBoxItems] = useState<MenuProps['items']>(\n      menuHelpers.mapTree(list, item => ({\n        id: item.id,\n        primary: item.primary,\n        selected: item.selected\n      }))\n    );\n\n    const selected = useMemo(() => {\n      return menuHelpers.getSelected(comboBoxItems).map(item => ({\n        text: item.primary,\n        id: item.id\n      }));\n    }, [comboBoxItems]);\n\n    const toggleItem = (id: MenuItemProps['id']) => {\n      setComboBoxItems(cur => menuHelpers.toggleSelected(cur, id, 'multi-select'));\n    };\n\n    const itemsToRender = useMemo(() => {\n      const mappedItems = menuHelpers.mapTree(comboBoxItems, item => ({\n        ...item,\n        selected: item.items ? undefined : !!item.selected\n      }));\n      if (items?.length) {\n        const selectedItems = menuHelpers.getSelected(mappedItems).map(item => item.id);\n        onFilterChange?.(selectedItems);\n      }\n      return mappedItems;\n    }, [comboBoxItems]);\n\n    // Focus heading on initial mount\n    useEffect(() => {\n      if (!pageRef.current) {\n        return;\n      }\n\n      if (loadedRef.current) {\n        focusHeadingOrContainer(pageRef.current, title);\n      } else {\n        loadedRef.current = true;\n      }\n    }, [title]);\n\n    const noItems = !items || items.length === 0;\n\n    return (\n      <StyledGalleryPage ref={pageRef}>\n        <PageBanner\n          testId={testId}\n          title={title}\n          description={description}\n          actions={noItems ? undefined : actions}\n          link={link}\n          image={image}\n        />\n        <StyledContent>\n          {noItems ? (\n            <EmptyState testId={testId} {...emptyState} actions={actions} />\n          ) : (\n            <>\n              {/* This change is temporary until LASA is completed.\n              It will provide the provider success team with a feature to hide apps before demoing to customers.\n              This feature is behind a toggle and will not impact anyone who is unaware of how to enable it. */}\n              {!hideFilterOptions && (\n                <Flex container={{ justify: 'between', pad: [0, 0, 2, 0] }}>\n                  <ComboBox\n                    mode='multi-select'\n                    labelHidden\n                    selected={{\n                      items: selected,\n                      onRemove: toggleItem\n                    }}\n                    menu={{\n                      items: itemsToRender,\n                      onItemClick: toggleItem\n                    }}\n                  />\n                  <Switch\n                    label='Show hidden apps'\n                    on={isShowAllItemsEnabled}\n                    onChange={onShowAllItemsToggleChange}\n                  />\n                </Flex>\n              )}\n              <SummaryCardList\n                items={\n                  isShowAllItemsEnabled\n                    ? items\n                    : items.filter(item => filteredItems.includes(item.id))\n                }\n                onItemClick={onItemClick}\n              />\n            </>\n          )}\n        </StyledContent>\n      </StyledGalleryPage>\n    );\n  }\n);\n\nexport default GalleryPage;\n"]}

package/lib/components/PageTemplates/HeaderActionButtons.d.ts

@@ -0,0 +1,5 @@
+import type { FC } from 'react';
+import type { ActionButtonProps } from './PageTemplate.types';
+declare const ActionButtons: FC<ActionButtonProps>;
+export default ActionButtons;
+//# sourceMappingURL=HeaderActionButtons.d.ts.map

package/lib/components/PageTemplates/HeaderActionButtons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderActionButtons.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/HeaderActionButtons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAIhC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAE9D,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,iBAAiB,CA8CxC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/PageTemplates/HeaderActionButtons.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Flex, MenuButton, useI18n } from '@pega/cosmos-react-core';
+const ActionButtons = ({ primaryAction, progress, testIds, secondaryAction, additionalActions, animatePrimaryButton }) => {
+    const t = useI18n();
+    return (_jsxs(Flex, { container: true, children: [primaryAction && (_jsx(Button, { variant: primaryAction.variant, onClick: primaryAction.onClick, disabled: progress || primaryAction.disabled, "data-testid": testIds.primaryAction, animate: animatePrimaryButton, children: primaryAction.primary })), secondaryAction && (_jsx(Button, { variant: 'secondary', onClick: secondaryAction.onClick, disabled: progress || secondaryAction.disabled, "data-testid": testIds.secondaryAction, children: secondaryAction.primary })), additionalActions && additionalActions.length > 0 && (_jsx(MenuButton, { testId: testIds.additionalActions, text: t('actions'), "aria-label": t('actions'), disabled: progress, iconOnly: true, icon: 'more', menu: { items: additionalActions } }))] }));
+};
+export default ActionButtons;
+//# sourceMappingURL=HeaderActionButtons.js.map

package/lib/components/PageTemplates/HeaderActionButtons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderActionButtons.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/HeaderActionButtons.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAI5E,MAAM,aAAa,GAA0B,CAAC,EAC5C,aAAa,EACb,QAAQ,EACR,OAAO,EACP,eAAe,EACf,iBAAiB,EACjB,oBAAoB,EACrB,EAAE,EAAE;IACH,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,mBACZ,aAAa,IAAI,CAChB,KAAC,MAAM,IACL,OAAO,EAAE,aAAa,CAAC,OAAO,EAC9B,OAAO,EAAE,aAAa,CAAC,OAAO,EAC9B,QAAQ,EAAE,QAAQ,IAAI,aAAa,CAAC,QAAQ,iBAC/B,OAAO,CAAC,aAAa,EAClC,OAAO,EAAE,oBAAoB,YAE5B,aAAa,CAAC,OAAO,GACf,CACV,EACA,eAAe,IAAI,CAClB,KAAC,MAAM,IACL,OAAO,EAAC,WAAW,EACnB,OAAO,EAAE,eAAe,CAAC,OAAO,EAChC,QAAQ,EAAE,QAAQ,IAAI,eAAe,CAAC,QAAQ,iBACjC,OAAO,CAAC,eAAe,YAEnC,eAAe,CAAC,OAAO,GACjB,CACV,EACA,iBAAiB,IAAI,iBAAiB,CAAC,MAAM,GAAG,CAAC,IAAI,CACpD,KAAC,UAAU,IACT,MAAM,EAAE,OAAO,CAAC,iBAAiB,EACjC,IAAI,EAAE,CAAC,CAAC,SAAS,CAAC,gBACN,CAAC,CAAC,SAAS,CAAC,EACxB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,QACR,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,EAAE,KAAK,EAAE,iBAAiB,EAAE,GAClC,CACH,IACI,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import type { FC } from 'react';\n\nimport { Button, Flex, MenuButton, useI18n } from '@pega/cosmos-react-core';\n\nimport type { ActionButtonProps } from './PageTemplate.types';\n\nconst ActionButtons: FC<ActionButtonProps> = ({\n  primaryAction,\n  progress,\n  testIds,\n  secondaryAction,\n  additionalActions,\n  animatePrimaryButton\n}) => {\n  const t = useI18n();\n\n  return (\n    <Flex container>\n      {primaryAction && (\n        <Button\n          variant={primaryAction.variant}\n          onClick={primaryAction.onClick}\n          disabled={progress || primaryAction.disabled}\n          data-testid={testIds.primaryAction}\n          animate={animatePrimaryButton}\n        >\n          {primaryAction.primary}\n        </Button>\n      )}\n      {secondaryAction && (\n        <Button\n          variant='secondary'\n          onClick={secondaryAction.onClick}\n          disabled={progress || secondaryAction.disabled}\n          data-testid={testIds.secondaryAction}\n        >\n          {secondaryAction.primary}\n        </Button>\n      )}\n      {additionalActions && additionalActions.length > 0 && (\n        <MenuButton\n          testId={testIds.additionalActions}\n          text={t('actions')}\n          aria-label={t('actions')}\n          disabled={progress}\n          iconOnly\n          icon='more'\n          menu={{ items: additionalActions }}\n        />\n      )}\n    </Flex>\n  );\n};\n\nexport default ActionButtons;\n"]}

package/lib/components/PageTemplates/InventoryPageTemplate/InventoryPageHeader.d.ts

@@ -0,0 +1,8 @@
+import { type TestIdProp } from '@pega/cosmos-react-core';
+import type { InventoryPageTemplateProps, PageTemplateProps } from '../PageTemplate.types';
+type InventoryPageHeaderProps = InventoryPageTemplateProps['header'] & Pick<PageTemplateProps, 'progress'> & TestIdProp;
+declare const _default: (({ testId, title, primaryAction, secondaryAction, additionalActions, description, progress }: InventoryPageHeaderProps) => import("react/jsx-runtime").JSX.Element) & {
+    getTestIds: (testIdProp?: TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["title", "status", "edit-details", "additional-info-icon", "type", "meta-data", "primary-meta-data", "secondary-meta-data", "visual", "primary-action", "secondary-action", "additional-actions", "banner-description", "banner-link", "banner-actions", "banner-image"]>;
+};
+export default _default;
+//# sourceMappingURL=InventoryPageHeader.d.ts.map

package/lib/components/PageTemplates/InventoryPageTemplate/InventoryPageHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InventoryPageHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/PageTemplates/InventoryPageTemplate/InventoryPageHeader.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,KAAK,UAAU,EAOhB,MAAM,yBAAyB,CAAC;AAGjC,OAAO,KAAK,EAAE,0BAA0B,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAQ3F,KAAK,wBAAwB,GAAG,0BAA0B,CAAC,QAAQ,CAAC,GAClE,IAAI,CAAC,iBAAiB,EAAE,UAAU,CAAC,GACnC,UAAU,CAAC;uHAUV,wBAAwB;;;AA8D3B,wBAAsE"}

package/lib/components/PageTemplates/InventoryPageTemplate/InventoryPageHeader.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useRef } from 'react';
+import { Flex, useTestIds, withTestIds, useElement, Tooltip, useBreakpoint, Text, SummaryItem, ShowMoreLess } from '@pega/cosmos-react-core';
+import { getPageHeaderTestIds } from '../PageTemplates.test-ids';
+import { StyledInventoryPageTitleWrapper, StyledDescription, StyledTextWithEllipsis } from '../PageTemplate.styles';
+import HeaderActionButtons from '../HeaderActionButtons';
+const InventoryPageHeader = ({ testId, title, primaryAction, secondaryAction, additionalActions = [], description, progress }) => {
+    const testIds = useTestIds(testId, getPageHeaderTestIds);
+    const headerRef = useRef(null);
+    const isMediumOrAbove = useBreakpoint('md', { breakpointRef: headerRef });
+    const [el, setEl] = useElement();
+    const actions = useMemo(() => {
+        return (_jsx(HeaderActionButtons, { additionalActions: additionalActions, primaryAction: primaryAction, secondaryAction: secondaryAction, testIds: testIds, progress: progress }));
+    }, [primaryAction?.variant, progress, isMediumOrAbove]);
+    return (_jsxs(Flex, { container: {
+            direction: 'column'
+        }, children: [_jsxs(Flex, { container: {
+                    alignItems: 'start',
+                    justify: 'between'
+                }, ref: headerRef, children: [_jsx(Flex, { container: { direction: 'column', rowGap: 1.5 }, as: StyledInventoryPageTitleWrapper, children: _jsx(SummaryItem, { container: { colGap: 1 }, item: { grow: 1, shrink: 1 }, testId: testIds.root, primary: _jsxs(_Fragment, { children: [_jsx(StyledTextWithEllipsis, { "data-testid": testIds.title, variant: 'h1', ref: setEl, children: title }), _jsx(Tooltip, { target: el, smart: true, showDelay: 'none', hideDelay: 'none', children: title })] }) }) }), actions] }), description && (_jsx(StyledDescription, { children: _jsx(ShowMoreLess, { lines: 1, children: _jsx(Text, { children: description }) }) }))] }));
+};
+export default withTestIds(InventoryPageHeader, getPageHeaderTestIds);
+//# sourceMappingURL=InventoryPageHeader.js.map

package/lib/components/PageTemplates/InventoryPageTemplate/InventoryPageHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InventoryPageHeader.js","sourceRoot":"","sources":["../../../../src/components/PageTemplates/InventoryPageTemplate/InventoryPageHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAExC,OAAO,EACL,IAAI,EACJ,UAAU,EACV,WAAW,EAEX,UAAU,EACV,OAAO,EACP,aAAa,EACb,IAAI,EACJ,WAAW,EACX,YAAY,EACb,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAEjE,OAAO,EACL,+BAA+B,EAC/B,iBAAiB,EACjB,sBAAsB,EACvB,MAAM,wBAAwB,CAAC;AAChC,OAAO,mBAAmB,MAAM,wBAAwB,CAAC;AAMzD,MAAM,mBAAmB,GAAG,CAAC,EAC3B,MAAM,EACN,KAAK,EACL,aAAa,EACb,eAAe,EACf,iBAAiB,GAAG,EAAE,EACtB,WAAW,EACX,QAAQ,EACiB,EAAE,EAAE;IAC7B,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,oBAAoB,CAAC,CAAC;IACzD,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,eAAe,GAAG,aAAa,CAAC,IAAI,EAAE,EAAE,aAAa,EAAE,SAAS,EAAE,CAAC,CAAC;IAE1E,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,GAAG,UAAU,EAAE,CAAC;IAEjC,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;QAC3B,OAAO,CACL,KAAC,mBAAmB,IAClB,iBAAiB,EAAE,iBAAiB,EACpC,aAAa,EAAE,aAAa,EAC5B,eAAe,EAAE,eAAe,EAChC,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAC;IACJ,CAAC,EAAE,CAAC,aAAa,EAAE,OAAO,EAAE,QAAQ,EAAE,eAAe,CAAC,CAAC,CAAC;IAExD,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE;YACT,SAAS,EAAE,QAAQ;SACpB,aAED,MAAC,IAAI,IACH,SAAS,EAAE;oBACT,UAAU,EAAE,OAAO;oBACnB,OAAO,EAAE,SAAS;iBACnB,EACD,GAAG,EAAE,SAAS,aAEd,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,+BAA+B,YACxF,KAAC,WAAW,IACV,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EACxB,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,EAC5B,MAAM,EAAE,OAAO,CAAC,IAAI,EACpB,OAAO,EACL,8BACE,KAAC,sBAAsB,mBAAc,OAAO,CAAC,KAAK,EAAE,OAAO,EAAC,IAAI,EAAC,GAAG,EAAE,KAAK,YACxE,KAAK,GACiB,EACzB,KAAC,OAAO,IAAC,MAAM,EAAE,EAAE,EAAE,KAAK,QAAC,SAAS,EAAC,MAAM,EAAC,SAAS,EAAC,MAAM,YACzD,KAAK,GACE,IACT,GAEL,GACG,EACN,OAAO,IACH,EACN,WAAW,IAAI,CACd,KAAC,iBAAiB,cAChB,KAAC,YAAY,IAAC,KAAK,EAAE,CAAC,YACpB,KAAC,IAAI,cAAE,WAAW,GAAQ,GACb,GACG,CACrB,IACI,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC,mBAAmB,EAAE,oBAAoB,CAAC,CAAC","sourcesContent":["import { useMemo, useRef } from 'react';\n\nimport {\n  Flex,\n  useTestIds,\n  withTestIds,\n  type TestIdProp,\n  useElement,\n  Tooltip,\n  useBreakpoint,\n  Text,\n  SummaryItem,\n  ShowMoreLess\n} from '@pega/cosmos-react-core';\n\nimport { getPageHeaderTestIds } from '../PageTemplates.test-ids';\nimport type { InventoryPageTemplateProps, PageTemplateProps } from '../PageTemplate.types';\nimport {\n  StyledInventoryPageTitleWrapper,\n  StyledDescription,\n  StyledTextWithEllipsis\n} from '../PageTemplate.styles';\nimport HeaderActionButtons from '../HeaderActionButtons';\n\ntype InventoryPageHeaderProps = InventoryPageTemplateProps['header'] &\n  Pick<PageTemplateProps, 'progress'> &\n  TestIdProp;\n\nconst InventoryPageHeader = ({\n  testId,\n  title,\n  primaryAction,\n  secondaryAction,\n  additionalActions = [],\n  description,\n  progress\n}: InventoryPageHeaderProps) => {\n  const testIds = useTestIds(testId, getPageHeaderTestIds);\n  const headerRef = useRef<HTMLDivElement>(null);\n  const isMediumOrAbove = useBreakpoint('md', { breakpointRef: headerRef });\n\n  const [el, setEl] = useElement();\n\n  const actions = useMemo(() => {\n    return (\n      <HeaderActionButtons\n        additionalActions={additionalActions}\n        primaryAction={primaryAction}\n        secondaryAction={secondaryAction}\n        testIds={testIds}\n        progress={progress}\n      />\n    );\n  }, [primaryAction?.variant, progress, isMediumOrAbove]);\n\n  return (\n    <Flex\n      container={{\n        direction: 'column'\n      }}\n    >\n      <Flex\n        container={{\n          alignItems: 'start',\n          justify: 'between'\n        }}\n        ref={headerRef}\n      >\n        <Flex container={{ direction: 'column', rowGap: 1.5 }} as={StyledInventoryPageTitleWrapper}>\n          <SummaryItem\n            container={{ colGap: 1 }}\n            item={{ grow: 1, shrink: 1 }}\n            testId={testIds.root}\n            primary={\n              <>\n                <StyledTextWithEllipsis data-testid={testIds.title} variant='h1' ref={setEl}>\n                  {title}\n                </StyledTextWithEllipsis>\n                <Tooltip target={el} smart showDelay='none' hideDelay='none'>\n                  {title}\n                </Tooltip>\n              </>\n            }\n          />\n        </Flex>\n        {actions}\n      </Flex>\n      {description && (\n        <StyledDescription>\n          <ShowMoreLess lines={1}>\n            <Text>{description}</Text>\n          </ShowMoreLess>\n        </StyledDescription>\n      )}\n    </Flex>\n  );\n};\n\nexport default withTestIds(InventoryPageHeader, getPageHeaderTestIds);\n"]}

package/lib/components/PageTemplates/InventoryPageTemplate/InventoryPageTemplate.d.ts

@@ -0,0 +1,5 @@
+import { type ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';
+import type { InventoryPageTemplateProps } from '../PageTemplate.types';
+declare const InventoryPageTemplate: ForwardRefForwardPropsComponent<InventoryPageTemplateProps>;
+export default InventoryPageTemplate;
+//# sourceMappingURL=InventoryPageTemplate.d.ts.map

package/lib/components/PageTemplates/InventoryPageTemplate/InventoryPageTemplate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InventoryPageTemplate.d.ts","sourceRoot":"","sources":["../../../../src/components/PageTemplates/InventoryPageTemplate/InventoryPageTemplate.tsx"],"names":[],"mappings":"AAGA,OAAO,EAGL,KAAK,+BAA+B,EACrC,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAC;AAKxE,QAAA,MAAM,qBAAqB,EAAE,+BAA+B,CAAC,0BAA0B,CAyBpF,CAAC;AAEJ,eAAe,qBAAqB,CAAC"}

package/lib/components/PageTemplates/InventoryPageTemplate/InventoryPageTemplate.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { OneColumnPage as CoreOneColumnPage, Banner } from '@pega/cosmos-react-core';
+import { StyledInventoryPage } from '../PageTemplate.styles';
+import InventoryPageHeader from './InventoryPageHeader';
+const InventoryPageTemplate = forwardRef(({ content, errorBanner, header, testId, ...restProps }, ref) => {
+    return (_jsx(CoreOneColumnPage, { ...restProps, a: content, as: StyledInventoryPage, header: _jsx(InventoryPageHeader, { testId: testId, ...header }), scrollContent: true, title: header.title, banners: errorBanner && _jsx(Banner, { testId: testId, ...errorBanner }), ref: ref }));
+});
+export default InventoryPageTemplate;
+//# sourceMappingURL=InventoryPageTemplate.js.map

package/lib/components/PageTemplates/InventoryPageTemplate/InventoryPageTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InventoryPageTemplate.js","sourceRoot":"","sources":["../../../../src/components/PageTemplates/InventoryPageTemplate/InventoryPageTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGnC,OAAO,EACL,aAAa,IAAI,iBAAiB,EAClC,MAAM,EAEP,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAE7D,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AAExD,MAAM,qBAAqB,GACzB,UAAU,CACR,CACE,EACE,OAAO,EACP,WAAW,EACX,MAAM,EACN,MAAM,EACN,GAAG,SAAS,EACgC,EAC9C,GAAwB,EACxB,EAAE;IACF,OAAO,CACL,KAAC,iBAAiB,OACZ,SAAS,EACb,CAAC,EAAE,OAAO,EACV,EAAE,EAAE,mBAAmB,EACvB,MAAM,EAAE,KAAC,mBAAmB,IAAC,MAAM,EAAE,MAAM,KAAM,MAAM,GAAI,EAC3D,aAAa,QACb,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,OAAO,EAAE,WAAW,IAAI,KAAC,MAAM,IAAC,MAAM,EAAE,MAAM,KAAM,WAAW,GAAI,EACnE,GAAG,EAAE,GAAG,GACR,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEJ,eAAe,qBAAqB,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { Ref, PropsWithoutRef } from 'react';\n\nimport {\n  OneColumnPage as CoreOneColumnPage,\n  Banner,\n  type ForwardRefForwardPropsComponent\n} from '@pega/cosmos-react-core';\n\nimport type { InventoryPageTemplateProps } from '../PageTemplate.types';\nimport { StyledInventoryPage } from '../PageTemplate.styles';\n\nimport InventoryPageHeader from './InventoryPageHeader';\n\nconst InventoryPageTemplate: ForwardRefForwardPropsComponent<InventoryPageTemplateProps> =\n  forwardRef(\n    (\n      {\n        content,\n        errorBanner,\n        header,\n        testId,\n        ...restProps\n      }: PropsWithoutRef<InventoryPageTemplateProps>,\n      ref: Ref<HTMLDivElement>\n    ) => {\n      return (\n        <CoreOneColumnPage\n          {...restProps}\n          a={content}\n          as={StyledInventoryPage}\n          header={<InventoryPageHeader testId={testId} {...header} />}\n          scrollContent\n          title={header.title}\n          banners={errorBanner && <Banner testId={testId} {...errorBanner} />}\n          ref={ref}\n        />\n      );\n    }\n  );\n\nexport default InventoryPageTemplate;\n"]}

package/lib/components/PageTemplates/OverviewPageTemplate/OverviewPageTemplate.d.ts

@@ -0,0 +1,5 @@
+import type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';
+import type { OverviewPageTemplateProps } from '../PageTemplate.types';
+declare const OverviewPageTemplate: ForwardRefForwardPropsComponent<OverviewPageTemplateProps>;
+export default OverviewPageTemplate;
+//# sourceMappingURL=OverviewPageTemplate.d.ts.map

package/lib/components/PageTemplates/OverviewPageTemplate/OverviewPageTemplate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverviewPageTemplate.d.ts","sourceRoot":"","sources":["../../../../src/components/PageTemplates/OverviewPageTemplate/OverviewPageTemplate.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,yBAAyB,CAAC;AAE/E,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAC;AAKvE,QAAA,MAAM,oBAAoB,EAAE,+BAA+B,CAAC,yBAAyB,CAiBpF,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/lib/components/PageTemplates/OverviewPageTemplate/OverviewPageTemplate.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { OneColumnPage as CoreOneColumnPage } from '@pega/cosmos-react-core';
+import { StyledOverviewPage } from '../PageTemplate.styles';
+import PageBanner from './PageBanner';
+const OverviewPageTemplate = forwardRef(function OverviewPageTemplate({ testId, header, content, ...restProps }, ref) {
+    return (_jsx(CoreOneColumnPage, { ...restProps, a: content, as: StyledOverviewPage, header: _jsx(PageBanner, { ...header, testId: testId }), scrollContent: true, title: header.title, ref: ref }));
+});
+export default OverviewPageTemplate;
+//# sourceMappingURL=OverviewPageTemplate.js.map

package/lib/components/PageTemplates/OverviewPageTemplate/OverviewPageTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverviewPageTemplate.js","sourceRoot":"","sources":["../../../../src/components/PageTemplates/OverviewPageTemplate/OverviewPageTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGnC,OAAO,EAAE,aAAa,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAI7E,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE5D,OAAO,UAAU,MAAM,cAAc,CAAC;AAEtC,MAAM,oBAAoB,GAA+D,UAAU,CACjG,SAAS,oBAAoB,CAC3B,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,SAAS,EAA8C,EACrF,GAAqC;IAErC,OAAO,CACL,KAAC,iBAAiB,OACZ,SAAS,EACb,CAAC,EAAE,OAAO,EACV,EAAE,EAAE,kBAAkB,EACtB,MAAM,EAAE,KAAC,UAAU,OAAK,MAAM,EAAE,MAAM,EAAE,MAAM,GAAI,EAClD,aAAa,QACb,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,GAAG,EAAE,GAAG,GACR,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,oBAAoB,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport { OneColumnPage as CoreOneColumnPage } from '@pega/cosmos-react-core';\nimport type { ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';\n\nimport type { OverviewPageTemplateProps } from '../PageTemplate.types';\nimport { StyledOverviewPage } from '../PageTemplate.styles';\n\nimport PageBanner from './PageBanner';\n\nconst OverviewPageTemplate: ForwardRefForwardPropsComponent<OverviewPageTemplateProps> = forwardRef(\n  function OverviewPageTemplate(\n    { testId, header, content, ...restProps }: PropsWithoutRef<OverviewPageTemplateProps>,\n    ref: OverviewPageTemplateProps['ref']\n  ) {\n    return (\n      <CoreOneColumnPage\n        {...restProps}\n        a={content}\n        as={StyledOverviewPage}\n        header={<PageBanner {...header} testId={testId} />}\n        scrollContent\n        title={header.title}\n        ref={ref}\n      />\n    );\n  }\n);\n\nexport default OverviewPageTemplate;\n"]}