npm - @pega/cosmos-react-work - Versions diffs - 2.0.0-dev.2.1 → 2.0.0-dev.20.0 - Mend

@pega/cosmos-react-work 2.0.0-dev.2.1 → 2.0.0-dev.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (180) hide show

package/lib/components/CaseView/CaseView.styles.js ADDED Viewed

@@ -0,0 +1,111 @@
+import styled, { css } from 'styled-components';
+import { defaultThemeProp, Tabs } from '@pega/cosmos-react-core';
+export const StyledCaseViewContent = styled.div(({ theme, forceMobile, isMediumOrAbove, persistentUtility }) => {
+    return css `
+    padding: calc(2 * ${theme.base.spacing});
+    ${persistentUtility &&
+        isMediumOrAbove &&
+        css `
+      margin-inline-start: calc(2 * ${theme.base.spacing});
+    `}
+    ${!forceMobile &&
+        isMediumOrAbove &&
+        css `
+      padding: calc(2 * ${theme.base.spacing}) 0;
+    `}
+  `;
+});
+export const StyledMobileTabs = styled(Tabs)(({ theme }) => {
+    return css `
+    border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
+  `;
+});
+StyledMobileTabs.defaultProps = defaultThemeProp;
+export const StyledUtilToggle = styled.button(({ theme }) => {
+    return css `
+    align-self: flex-end;
+    color: ${theme.base.palette['foreground-color']};
+    margin-inline-end: 0.375rem;
+  `;
+});
+StyledUtilToggle.defaultProps = defaultThemeProp;
+export const StyledCaseViewUtilities = styled.div(({ utilitiesShown, theme }) => {
+    return css `
+      width: ${utilitiesShown ? '25rem' : 'auto'};
+      height: max-content;
+      padding: calc(2 * ${theme.base.spacing}) 0 calc(2 * ${theme.base.spacing});
+    `;
+});
+StyledCaseViewUtilities.defaultProps = defaultThemeProp;
+export const StyledCaseView = styled.div(({ theme, forceMobile, isMediumOrAbove, stickyOffset }) => {
+    return css `
+    --case-view-header-offset: ${stickyOffset}px;
+    --case-view-content-height: calc(100vh - var(--case-view-header-offset, 0rem));
+    min-height: calc(100vh - var(--appshell-offset, 0rem));
+    position: relative;
+    background-color: ${theme.base.palette['app-background']};
+    > :last-child {
+      ${!forceMobile &&
+        isMediumOrAbove &&
+        css `
+        margin-inline-end: calc(2 * ${theme.base.spacing});
+      `}
+    }
+  `;
+});
+StyledCaseView.defaultProps = defaultThemeProp;
+export const StyledSummaryRegion = styled.div(({ theme, forceMobile, desktop }) => {
+    return css `
+    position: sticky;
+    top: var(--appshell-offset, 0);
+    width: 100%;
+    background-color: ${theme.base.palette['primary-background']};
+    z-index: ${theme.base['z-index'].popover};
+    ${!forceMobile &&
+        desktop &&
+        css `
+      height: var(--case-view-content-height);
+    `}
+  `;
+});
+StyledSummaryRegion.defaultProps = defaultThemeProp;
+export const StyledCaseDrawer = styled.div(({ theme }) => {
+    return css `
+    min-width: 21.875rem;
+    max-width: 31.25rem;
+    width: calc((100vw - 31.25rem) / 10 + 21.875rem);
+    background-color: ${theme.base.palette['primary-background']};
+    height: var(--case-view-content-height);
+    top: var(--case-view-header-offset);
+    z-index: ${theme.base['z-index'].drawer - 1};
+  `;
+});
+StyledCaseDrawer.defaultProps = defaultThemeProp;
+export const StyledCaseDrawerContent = styled.div(({ theme }) => {
+    return css `
+    background-color: ${theme.base.palette['app-background']};
+    padding: calc(2 * ${theme.base.spacing});
+    height: 100%;
+    overflow: auto;
+  `;
+});
+StyledCaseDrawerContent.defaultProps = defaultThemeProp;
+export const StyledPersistentUtility = styled.div(() => {
+    return css `
+    max-width: 60ch;
+    overflow: auto;
+    position: sticky;
+    height: var(--case-view-content-height);
+    top: var(--case-view-header-offset);
+  `;
+});
+StyledPersistentUtility.defaultProps = defaultThemeProp;
+export const ScrollStick = styled.div `
+  position: sticky;
+  top: 0;
+`;
+//# sourceMappingURL=CaseView.styles.js.map

package/lib/components/CaseView/CaseView.styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"CaseView.styles.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, Tabs } from '@pega/cosmos-react-core';\n\nexport const StyledCaseViewContent = styled.div<{\n forceMobile?: boolean;\n isMediumOrAbove?: boolean;\n persistentUtility?: boolean;\n}>(({ theme, forceMobile, isMediumOrAbove, persistentUtility }) => {\n return css`\n padding: calc(2 * ${theme.base.spacing});\n\n ${persistentUtility &&\n isMediumOrAbove &&\n css`\n margin-inline-start: calc(2 * ${theme.base.spacing});\n `}\n\n ${!forceMobile &&\n isMediumOrAbove &&\n css`\n padding: calc(2 * ${theme.base.spacing}) 0;\n `}\n `;\n});\n\nexport const StyledMobileTabs = styled(Tabs)(({ theme }) => {\n return css`\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n `;\n});\n\nStyledMobileTabs.defaultProps = defaultThemeProp;\n\nexport const StyledUtilToggle = styled.button(({ theme }) => {\n return css`\n align-self: flex-end;\n color: ${theme.base.palette['foreground-color']};\n margin-inline-end: 0.375rem;\n `;\n});\n\nStyledUtilToggle.defaultProps = defaultThemeProp;\n\nexport const StyledCaseViewUtilities = styled.div<{ utilitiesShown: boolean }>(\n ({ utilitiesShown, theme }) => {\n return css`\n width: ${utilitiesShown ? '25rem' : 'auto'};\n height: max-content;\n padding: calc(2 * ${theme.base.spacing}) 0 calc(2 * ${theme.base.spacing});\n `;\n }\n);\n\nStyledCaseViewUtilities.defaultProps = defaultThemeProp;\n\nexport const StyledCaseView = styled.div<{\n forceMobile?: boolean;\n isMediumOrAbove?: boolean;\n stickyOffset: number;\n}>(({ theme, forceMobile, isMediumOrAbove, stickyOffset }) => {\n return css`\n --case-view-header-offset: ${stickyOffset}px;\n --case-view-content-height: calc(100vh - var(--case-view-header-offset, 0rem));\n min-height: calc(100vh - var(--appshell-offset, 0rem));\n position: relative;\n background-color: ${theme.base.palette['app-background']};\n\n > :last-child {\n ${!forceMobile &&\n isMediumOrAbove &&\n css`\n margin-inline-end: calc(2 * ${theme.base.spacing});\n `}\n }\n `;\n});\n\nStyledCaseView.defaultProps = defaultThemeProp;\n\nexport const StyledSummaryRegion = styled.div<{\n forceMobile?: boolean;\n desktop?: boolean;\n}>(({ theme, forceMobile, desktop }) => {\n return css`\n position: sticky;\n top: var(--appshell-offset, 0);\n width: 100%;\n background-color: ${theme.base.palette['primary-background']};\n z-index: ${theme.base['z-index'].popover};\n\n ${!forceMobile &&\n desktop &&\n css`\n height: var(--case-view-content-height);\n `}\n `;\n});\n\nStyledSummaryRegion.defaultProps = defaultThemeProp;\n\nexport const StyledCaseDrawer = styled.div(({ theme }) => {\n return css`\n min-width: 21.875rem;\n max-width: 31.25rem;\n width: calc((100vw - 31.25rem) / 10 + 21.875rem);\n background-color: ${theme.base.palette['primary-background']};\n height: var(--case-view-content-height);\n top: var(--case-view-header-offset);\n z-index: ${theme.base['z-index'].drawer - 1};\n `;\n});\n\nStyledCaseDrawer.defaultProps = defaultThemeProp;\n\nexport const StyledCaseDrawerContent = styled.div(({ theme }) => {\n return css`\n background-color: ${theme.base.palette['app-background']};\n padding: calc(2 * ${theme.base.spacing});\n height: 100%;\n overflow: auto;\n `;\n});\n\nStyledCaseDrawerContent.defaultProps = defaultThemeProp;\n\nexport const StyledPersistentUtility = styled.div(() => {\n return css`\n max-width: 60ch;\n overflow: auto;\n position: sticky;\n height: var(--case-view-content-height);\n top: var(--case-view-header-offset);\n `;\n});\n\nStyledPersistentUtility.defaultProps = defaultThemeProp;\n\nexport const ScrollStick = styled.div`\n position: sticky;\n top: 0;\n`;\n"]}

package/lib/components/CaseView/MobileCaseView.d.ts CHANGED Viewed

@@ -7,6 +7,7 @@ export interface MobileCaseViewProps {
 }
 export declare const StyledMobileCaseView: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledMobileCaseViewHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {}, never>;
+/** @deprecated */
 declare const MobileCaseView: FC<ForwardProps & MobileCaseViewProps>;
 export default MobileCaseView;
 //# sourceMappingURL=MobileCaseView.d.ts.map

package/lib/components/CaseView/MobileCaseView.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MobileCaseView.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/MobileCaseView.tsx"],"names":[],"mappings":"AAAA,~~OAAc~~,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;~~AAG7C~~,OAAO,EAGL,SAAS,EAGT,YAAY,EACb,MAAM,yBAAyB,CAAC;AAGjC,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,UAAU,EAAE,SAAS,CAAC;CACvB;AAED,eAAO,MAAM,oBAAoB,yGAGhC,CAAC;AAEF,eAAO,MAAM,0BAA0B,4GAOtC,CAAC;AAKF,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,YAAY,GAAG,mBAAmB,CAgB1D,CAAC;AAEF,eAAe,cAAc,CAAC"}
1	+ {"version":3,"file":"MobileCaseView.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/MobileCaseView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGtC,OAAO,EAGL,SAAS,EAGT,YAAY,EACb,MAAM,yBAAyB,CAAC;AAGjC,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,UAAU,EAAE,SAAS,CAAC;CACvB;AAED,eAAO,MAAM,oBAAoB,yGAGhC,CAAC;AAEF,eAAO,MAAM,0BAA0B,4GAOtC,CAAC;AAKF,kBAAkB;AAClB,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,YAAY,GAAG,mBAAmB,CAgB1D,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/CaseView/MobileCaseView.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from 'styled-components';
 import { Flex, Tabs, Text, defaultThemeProp } from '@pega/cosmos-react-core';
 import { StyledText } from '@pega/cosmos-react-core/lib/components/Text/Text';
@@ -16,13 +16,10 @@ export const StyledMobileCaseViewHeader = styled.header `
 `;
 StyledMobileCaseView.defaultProps = defaultThemeProp;
 StyledMobileCaseViewHeader.defaultProps = defaultThemeProp;
+/** @deprecated */
 const MobileCaseView = (props) => {
     const { tabs, tabContent, title, ...restProps } = props;
-    return (React.createElement(Flex, { container: { direction: 'column' }, as: StyledMobileCaseView, ...restProps },
-        React.createElement(Flex, { container: { direction: 'column' }, item: { shrink: 0 }, as: StyledMobileCaseViewHeader },
-            React.createElement(Text, { as: 'h1' }, title),
-            React.createElement(Tabs, { ...tabs, type: 'horizontal', inverted: true })),
-        tabContent));
+    return (_jsxs(Flex, { container: { direction: 'column' }, as: StyledMobileCaseView, ...restProps, children: [_jsxs(Flex, { container: { direction: 'column' }, item: { shrink: 0 }, as: StyledMobileCaseViewHeader, children: [_jsx(Text, { as: 'h1', children: title }, void 0), _jsx(Tabs, { ...tabs, type: 'horizontal', inverted: true }, void 0)] }, void 0), tabContent] }, void 0));
 };
 export default MobileCaseView;
 //# sourceMappingURL=MobileCaseView.js.map

package/lib/components/CaseView/MobileCaseView.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MobileCaseView.js","sourceRoot":"","sources":["../../../src/components/CaseView/MobileCaseView.tsx"],"names":[],"mappings":"~~AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC~~;~~AAC7C~~,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,IAAI,EACJ,IAAI,EAEJ,IAAI,EACJ,gBAAgB,EAEjB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,kDAAkD,CAAC;AAQ9E,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAG7C,CAAC;AAEF,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,MAAM,CAAA;WAC5C,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK;sBAC5B,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW;;IAE/D,UAAU;eACC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;;CAE/C,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AACrD,0BAA0B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3D,MAAM,cAAc,GAA2C,CAAC,KAA0B,EAAE,EAAE;IAC5F,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAExD,OAAO,CACL,~~oBAAC~~,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,oBAAoB,KAAM,SAAS~~;QAC~~/E,~~oBAAC~~,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAClC,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EACnB,EAAE,EAAE,0BAA0B~~;YAE9B~~,~~oBAAC~~,IAAI,IAAC,EAAE,EAAC,IAAI,~~IAAE~~,KAAK,~~CAAQ;YAC5B~~,~~oBAAC~~,IAAI,OAAK,IAAI,EAAE,IAAI,EAAC,YAAY,EAAC,QAAQ,~~SAAG~~,~~CACxC;QACN~~,UAAU,~~CACN~~,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import ~~React,~~ { FC, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport {\n Flex,\n Tabs,\n TabsProps,\n Text,\n defaultThemeProp,\n ForwardProps\n} from '@pega/cosmos-react-core';\nimport { StyledText } from '@pega/cosmos-react-core/lib/components/Text/Text';\n\nexport interface MobileCaseViewProps {\n title: string;\n tabs: TabsProps;\n tabContent: ReactNode;\n}\n\nexport const StyledMobileCaseView = styled.div`\n min-height: 100vh;\n background-color: #e9eef3;\n`;\n\nexport const StyledMobileCaseViewHeader = styled.header`\n color: ${props => props.theme.base.palette.light};\n background-color: ${props => props.theme.base.palette.interactive};\n\n ${StyledText} {\n padding: ${props => props.theme.base.spacing};\n }\n`;\n\nStyledMobileCaseView.defaultProps = defaultThemeProp;\nStyledMobileCaseViewHeader.defaultProps = defaultThemeProp;\n\nconst MobileCaseView: FC<ForwardProps & MobileCaseViewProps> = (props: MobileCaseViewProps) => {\n const { tabs, tabContent, title, ...restProps } = props;\n\n return (\n <Flex container={{ direction: 'column' }} as={StyledMobileCaseView} {...restProps}>\n <Flex\n container={{ direction: 'column' }}\n item={{ shrink: 0 }}\n as={StyledMobileCaseViewHeader}\n >\n <Text as='h1'>{title}</Text>\n <Tabs {...tabs} type='horizontal' inverted />\n </Flex>\n {tabContent}\n </Flex>\n );\n};\n\nexport default MobileCaseView;\n"]}
1	+ {"version":3,"file":"MobileCaseView.js","sourceRoot":"","sources":["../../../src/components/CaseView/MobileCaseView.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACL,IAAI,EACJ,IAAI,EAEJ,IAAI,EACJ,gBAAgB,EAEjB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,kDAAkD,CAAC;AAQ9E,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAG7C,CAAC;AAEF,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,MAAM,CAAA;WAC5C,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK;sBAC5B,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW;;IAE/D,UAAU;eACC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;;CAE/C,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AACrD,0BAA0B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3D,kBAAkB;AAClB,MAAM,cAAc,GAA2C,CAAC,KAA0B,EAAE,EAAE;IAC5F,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAExD,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,oBAAoB,KAAM,SAAS,aAC/E,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAClC,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EACnB,EAAE,EAAE,0BAA0B,aAE9B,KAAC,IAAI,IAAC,EAAE,EAAC,IAAI,YAAE,KAAK,WAAQ,EAC5B,KAAC,IAAI,OAAK,IAAI,EAAE,IAAI,EAAC,YAAY,EAAC,QAAQ,iBAAG,YACxC,EACN,UAAU,YACN,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { FC, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nimport {\n Flex,\n Tabs,\n TabsProps,\n Text,\n defaultThemeProp,\n ForwardProps\n} from '@pega/cosmos-react-core';\nimport { StyledText } from '@pega/cosmos-react-core/lib/components/Text/Text';\n\nexport interface MobileCaseViewProps {\n title: string;\n tabs: TabsProps;\n tabContent: ReactNode;\n}\n\nexport const StyledMobileCaseView = styled.div`\n min-height: 100vh;\n background-color: #e9eef3;\n`;\n\nexport const StyledMobileCaseViewHeader = styled.header`\n color: ${props => props.theme.base.palette.light};\n background-color: ${props => props.theme.base.palette.interactive};\n\n ${StyledText} {\n padding: ${props => props.theme.base.spacing};\n }\n`;\n\nStyledMobileCaseView.defaultProps = defaultThemeProp;\nStyledMobileCaseViewHeader.defaultProps = defaultThemeProp;\n\n/** @deprecated */\nconst MobileCaseView: FC<ForwardProps & MobileCaseViewProps> = (props: MobileCaseViewProps) => {\n const { tabs, tabContent, title, ...restProps } = props;\n\n return (\n <Flex container={{ direction: 'column' }} as={StyledMobileCaseView} {...restProps}>\n <Flex\n container={{ direction: 'column' }}\n item={{ shrink: 0 }}\n as={StyledMobileCaseViewHeader}\n >\n <Text as='h1'>{title}</Text>\n <Tabs {...tabs} type='horizontal' inverted />\n </Flex>\n {tabContent}\n </Flex>\n );\n};\n\nexport default MobileCaseView;\n"]}

package/lib/components/CaseView/UtilitiesSummary.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"UtilitiesSummary.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/UtilitiesSummary.tsx"],"names":[],"mappings":"AAAA,~~OAAc~~,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;~~AAGjD~~,OAAO,EAA2B,YAAY,EAAW,MAAM,yBAAyB,CAAC;AAEzF,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CAC/C;AAED,eAAO,MAAM,sBAAsB,yGAKjC,CAAC;AAEH,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CAiC7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
1	+ {"version":3,"file":"UtilitiesSummary.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/UtilitiesSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,EAA2B,YAAY,EAAW,MAAM,yBAAyB,CAAC;AAEzF,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CAC/C;AAED,eAAO,MAAM,sBAAsB,yGAKjC,CAAC;AAEH,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CAiC7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/components/CaseView/UtilitiesSummary.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled, { css } from 'styled-components';
 import { Card, Count, Flex, Icon, useI18n } from '@pega/cosmos-react-core';
 export const StyledUtilitiesSummary = styled.div(({ theme }) => {
@@ -9,15 +9,13 @@ export const StyledUtilitiesSummary = styled.div(({ theme }) => {
 });
 const UtilitiesSummary = ({ items = [], ...restProps }) => {
     const t = useI18n();
-    return items.length ? (React.createElement(Card, { ...restProps, interactive: true, tabIndex: 0, role: 'button', container: { direction: 'column', alignItems: 'center', itemGap: 3 }, "aria-label": `${t('utilities_summary')} ${t('expand_noun', t('utilities_panel'))}`, as: StyledUtilitiesSummary }, items.map(item => {
-        return (React.createElement(Flex, { container: {
-                direction: 'column',
-                alignItems: 'center',
-                itemGap: 0.5
-            }, item: { grow: 1 }, key: item.iconName },
-            React.createElement(Icon, { name: item.iconName }),
-            item.count !== undefined && React.createElement(Count, { variant: 'default' }, item.count)));
-    }))) : null;
+    return items.length ? (_jsx(Card, { ...restProps, interactive: true, tabIndex: 0, role: 'button', container: { direction: 'column', alignItems: 'center', gap: 3 }, "aria-label": `${t('utilities_summary')}, ${t('expand_noun', [t('utilities_panel')])}`, as: StyledUtilitiesSummary, children: items.map(item => {
+            return (_jsxs(Flex, { container: {
+                    direction: 'column',
+                    alignItems: 'center',
+                    gap: 0.5
+                }, item: { grow: 1 }, children: [_jsx(Icon, { name: item.iconName }, void 0), item.count !== undefined && _jsx(Count, { variant: 'default', children: item.count }, void 0)] }, item.iconName));
+        }) }, void 0)) : null;
 };
 export default UtilitiesSummary;
 //# sourceMappingURL=UtilitiesSummary.js.map

package/lib/components/CaseView/UtilitiesSummary.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"UtilitiesSummary.js","sourceRoot":"","sources":["../../../src/components/CaseView/UtilitiesSummary.tsx"],"names":[],"mappings":"~~AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC~~;~~AACjD~~,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAgB,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAMzF,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7D,OAAO,GAAG,CAAA;;eAEG,KAAK,CAAC,IAAI,CAAC,OAAO;GAC9B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,gBAAgB,GAA4D,CAAC,EACjF,KAAK,GAAG,EAAE,EACV,GAAG,SAAS,EACU,EAAE,EAAE;IAC1B,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CACpB,~~oBAAC~~,IAAI,OACC,SAAS,EACb,WAAW,QACX,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,~~OAAO~~,EAAE,CAAC,EAAE,~~gBACxD~~,GAAG,CAAC,CAAC,mBAAmB,CAAC,~~IAAI~~,CAAC,CAAC,aAAa,EAAE,CAAC,CAAC,iBAAiB,CAAC,CAAC,EAAE,~~EACjF~~,EAAE,EAAE,sBAAsB,~~IAEzB~~,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;~~QAChB~~,OAAO,CACL,~~oBAAC~~,IAAI,IACH,SAAS,EAAE;~~gBACT~~,SAAS,EAAE,QAAQ;~~gBACnB~~,UAAU,EAAE,QAAQ;~~gBACpB~~,~~OAAO~~,EAAE,GAAG;~~aACb~~,EACD,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,~~EACjB~~,~~GAAG~~,~~EAAE,~~IAAI,~~CAAC,QAAQ;YAElB,oBAAC,IAAI,~~IAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,~~GAAI;YAC5B~~,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,~~oBAAC~~,KAAK,IAAC,OAAO,EAAC,SAAS,~~IAAE~~,IAAI,CAAC,KAAK,~~CAAS~~,~~CACrE~~,CACR,CAAC;~~IACJ~~,CAAC,CAAC,~~CACG~~,CACR,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import ~~React,~~ { FunctionComponent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Card, Count, Flex, Icon, ForwardProps, useI18n } from '@pega/cosmos-react-core';\n\nexport interface UtilitiesSummaryProps {\n items: { iconName: string; count?: number }[];\n}\n\nexport const StyledUtilitiesSummary = styled.div(({ theme }) => {\n return css`\n width: 2.75rem;\n padding: ${theme.base.spacing} 0;\n `;\n});\n\nconst UtilitiesSummary: FunctionComponent<UtilitiesSummaryProps & ForwardProps> = ({\n items = [],\n ...restProps\n}: UtilitiesSummaryProps) => {\n const t = useI18n();\n return items.length ? (\n <Card\n {...restProps}\n interactive\n tabIndex={0}\n role='button'\n container={{ direction: 'column', alignItems: 'center', ~~itemGap~~: 3 }}\n aria-label={`${t('utilities_summary')} ${t('expand_noun', t('utilities_panel'))}`}\n as={StyledUtilitiesSummary}\n >\n {items.map(item => {\n return (\n <Flex\n container={{\n direction: 'column',\n alignItems: 'center',\n ~~itemGap~~: 0.5\n }}\n item={{ grow: 1 }}\n key={item.iconName}\n >\n <Icon name={item.iconName} />\n {item.count !== undefined && <Count variant='default'>{item.count}</Count>}\n </Flex>\n );\n })}\n </Card>\n ) : null;\n};\n\nexport default UtilitiesSummary;\n"]}
1	+ {"version":3,"file":"UtilitiesSummary.js","sourceRoot":"","sources":["../../../src/components/CaseView/UtilitiesSummary.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAgB,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAMzF,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7D,OAAO,GAAG,CAAA;;eAEG,KAAK,CAAC,IAAI,CAAC,OAAO;GAC9B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,gBAAgB,GAA4D,CAAC,EACjF,KAAK,GAAG,EAAE,EACV,GAAG,SAAS,EACU,EAAE,EAAE;IAC1B,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CACpB,KAAC,IAAI,OACC,SAAS,EACb,WAAW,QACX,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,gBACpD,GAAG,CAAC,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,EACpF,EAAE,EAAE,sBAAsB,YAEzB,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAChB,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE;oBACT,SAAS,EAAE,QAAQ;oBACnB,UAAU,EAAE,QAAQ;oBACpB,GAAG,EAAE,GAAG;iBACT,EACD,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,aAGjB,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,WAAI,EAC5B,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,KAAC,KAAK,IAAC,OAAO,EAAC,SAAS,YAAE,IAAI,CAAC,KAAK,WAAS,KAHrE,IAAI,CAAC,QAAQ,CAIb,CACR,CAAC;QACJ,CAAC,CAAC,WACG,CACR,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import { FunctionComponent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Card, Count, Flex, Icon, ForwardProps, useI18n } from '@pega/cosmos-react-core';\n\nexport interface UtilitiesSummaryProps {\n items: { iconName: string; count?: number }[];\n}\n\nexport const StyledUtilitiesSummary = styled.div(({ theme }) => {\n return css`\n width: 2.75rem;\n padding: ${theme.base.spacing} 0;\n `;\n});\n\nconst UtilitiesSummary: FunctionComponent<UtilitiesSummaryProps & ForwardProps> = ({\n items = [],\n ...restProps\n}: UtilitiesSummaryProps) => {\n const t = useI18n();\n return items.length ? (\n <Card\n {...restProps}\n interactive\n tabIndex={0}\n role='button'\n container={{ direction: 'column', alignItems: 'center', gap: 3 }}\n aria-label={`${t('utilities_summary')}, ${t('expand_noun', [t('utilities_panel')])}`}\n as={StyledUtilitiesSummary}\n >\n {items.map(item => {\n return (\n <Flex\n container={{\n direction: 'column',\n alignItems: 'center',\n gap: 0.5\n }}\n item={{ grow: 1 }}\n key={item.iconName}\n >\n <Icon name={item.iconName} />\n {item.count !== undefined && <Count variant='default'>{item.count}</Count>}\n </Flex>\n );\n })}\n </Card>\n ) : null;\n};\n\nexport default UtilitiesSummary;\n"]}

package/lib/components/CaseView/index.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 export { default } from './CaseView';
-export { CaseViewProps, StyledCaseView, StyledCaseViewContent, StyledCaseDrawer, StyledCaseDrawerContent, StyledSummaryRegion } from './CaseView';
+export { CaseViewProps } from './CaseView';
+export { StyledCaseView, StyledCaseViewContent, StyledCaseDrawer, StyledCaseDrawerContent, StyledSummaryRegion } from './CaseView.styles';
 export { default as MobileCaseView } from './MobileCaseView';
 export { MobileCaseViewProps } from './MobileCaseView';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/CaseView/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,~~EACL~~,aAAa,~~EACb~~,cAAc,EACd,qBAAqB,EACrB,gBAAgB,EAChB,uBAAuB,EACvB,mBAAmB,EACpB,MAAM,~~YAAY~~,CAAC;~~AACpB~~,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EACL,cAAc,EACd,qBAAqB,EACrB,gBAAgB,EAChB,uBAAuB,EACvB,mBAAmB,EACpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC"}

package/lib/components/CaseView/index.js CHANGED Viewed

@@ -1,4 +1,4 @@
 export { default } from './CaseView';
-export { StyledCaseView, StyledCaseViewContent, StyledCaseDrawer, StyledCaseDrawerContent, StyledSummaryRegion } from './CaseView';
+export { StyledCaseView, StyledCaseViewContent, StyledCaseDrawer, StyledCaseDrawerContent, StyledSummaryRegion } from './CaseView.styles';
 export { default as MobileCaseView } from './MobileCaseView';
 //# sourceMappingURL=index.js.map

package/lib/components/CaseView/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CaseView/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;~~AACrC~~,OAAO,~~EAEL~~,cAAc,EACd,qBAAqB,EACrB,gBAAgB,EAChB,uBAAuB,EACvB,mBAAmB,EACpB,MAAM,~~YAAY~~,CAAC;~~AACpB~~,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC","sourcesContent":["export { default } from './CaseView';\nexport {\n ~~CaseViewProps,\n~~ StyledCaseView,\n StyledCaseViewContent,\n StyledCaseDrawer,\n StyledCaseDrawerContent,\n StyledSummaryRegion\n} from './CaseView';\nexport { default as MobileCaseView } from './MobileCaseView';\nexport { MobileCaseViewProps } from './MobileCaseView';\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CaseView/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAErC,OAAO,EACL,cAAc,EACd,qBAAqB,EACrB,gBAAgB,EAChB,uBAAuB,EACvB,mBAAmB,EACpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC","sourcesContent":["export { default } from './CaseView';\nexport { CaseViewProps } from './CaseView';\nexport {\n StyledCaseView,\n StyledCaseViewContent,\n StyledCaseDrawer,\n StyledCaseDrawerContent,\n StyledSummaryRegion\n} from './CaseView.styles';\nexport { default as MobileCaseView } from './MobileCaseView';\nexport { MobileCaseViewProps } from './MobileCaseView';\n"]}

package/lib/components/ConfigurableLayout/ConfigurableLayout.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import type { ConfigurableLayoutProps } from './ConfigurableLayout.types';
+declare const ConfigurableLayout: import("react").ForwardRefExoticComponent<ConfigurableLayoutProps & import("react").RefAttributes<HTMLElement>>;
+export default ConfigurableLayout;
+//# sourceMappingURL=ConfigurableLayout.d.ts.map

package/lib/components/ConfigurableLayout/ConfigurableLayout.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"ConfigurableLayout.d.ts","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/ConfigurableLayout.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AA+B1E,QAAA,MAAM,kBAAkB,iHAsFvB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/lib/components/ConfigurableLayout/ConfigurableLayout.js ADDED Viewed

@@ -0,0 +1,93 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState, useEffect, useRef, useMemo } from 'react';
+import styled, { css } from 'styled-components';
+import { Flex, defaultThemeProp } from '@pega/cosmos-react-core';
+import { containerMinWidth, cellGap } from './defaults';
+import LayoutCell from './LayoutCell';
+const StyledConfigurableLayout = styled.div(() => {
+    return css `
+    overflow: hidden;
+  `;
+});
+const StyledCellGrid = styled.div(({ theme }) => {
+    return css `
+    /* Note: inset position used to negate "column" inline margin on items */
+    position: relative;
+    width: calc(100% + ${cellGap * 2} * ${theme.base.spacing});
+    max-width: calc(100% + ${cellGap * 2} * ${theme.base.spacing});
+    inset-inline: calc(-${cellGap} * ${theme.base.spacing});
+    margin-block-end: calc(-2 * ${cellGap} * ${theme.base.spacing});
+  `;
+});
+StyledCellGrid.defaultProps = defaultThemeProp;
+const StyledContainerRuler = styled.div(({ theme }) => {
+    return css `
+    margin-inline: calc(${cellGap} * ${theme.base.spacing});
+    width: calc(100% - ${cellGap * 2} * ${theme.base.spacing});
+  `;
+});
+StyledContainerRuler.defaultProps = defaultThemeProp;
+const ConfigurableLayout = forwardRef(({ items, arrangement }, ref) => {
+    const [renderMode, setRenderMode] = useState('direct');
+    const containerRulerRef = useRef(null);
+    // Update render mode when arrangement wraps
+    useEffect(() => {
+        const activeArrangement = arrangement?.hasWrapped !== undefined && !arrangement.hasWrapped;
+        if (activeArrangement) {
+            switch (arrangement.size) {
+                case 'main':
+                    setRenderMode('direct');
+                    break;
+                case 'half':
+                    setRenderMode('double');
+                    break;
+                case 'narrow':
+                    setRenderMode('full');
+                    break;
+                default:
+                    setRenderMode('direct');
+                    break;
+            }
+            return;
+        }
+        // Use direct by default
+        setRenderMode('direct');
+    }, [arrangement?.hasWrapped]);
+    const content = useMemo(() => {
+        if (items && !!items.length) {
+            return items.map(itemConfig => {
+                const config = {
+                    ...itemConfig,
+                    layoutConfig: { ...itemConfig.layoutConfig }
+                };
+                if (renderMode !== 'direct') {
+                    switch (renderMode) {
+                        case 'double': {
+                            const doubleWidth = {
+                                '1/4': '1/2',
+                                '1/3': '2/3',
+                                '1/2': 'full',
+                                '2/3': 'full',
+                                '3/4': 'full',
+                                full: 'full'
+                            };
+                            config.layoutConfig.width = doubleWidth[config.layoutConfig.width];
+                            break;
+                        }
+                        case 'full':
+                            config.layoutConfig.width = 'full';
+                            break;
+                        default:
+                            config.layoutConfig.width = 'full';
+                            break;
+                    }
+                }
+                return _jsx(LayoutCell, { config: config }, `${itemConfig.id}--${renderMode}`);
+            });
+        }
+        return null;
+    }, [items, renderMode]);
+    return (_jsx(StyledConfigurableLayout, { children: _jsxs(Flex, { as: StyledCellGrid, container: { wrap: 'wrap', justify: 'stretch', alignItems: 'stretch' }, item: { basis: containerMinWidth, grow: 1 }, ref: ref, children: [_jsx(StyledContainerRuler, { ref: containerRulerRef }, void 0), content] }, void 0) }, void 0));
+});
+export default ConfigurableLayout;
+//# sourceMappingURL=ConfigurableLayout.js.map

package/lib/components/ConfigurableLayout/ConfigurableLayout.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ConfigurableLayout.js","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/ConfigurableLayout.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, PropsWithoutRef, Ref, useState, useEffect, useRef, useMemo } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Flex, defaultThemeProp } from '@pega/cosmos-react-core';\n\nimport type { ConfigurableLayoutProps } from './ConfigurableLayout.types';\nimport { containerMinWidth, cellGap } from './defaults';\nimport widthConfigOptions from './options';\nimport LayoutCell from './LayoutCell';\n\nconst StyledConfigurableLayout = styled.div(() => {\n return css`\n overflow: hidden;\n `;\n});\n\nconst StyledCellGrid = styled.div(({ theme }) => {\n return css`\n /* Note: inset position used to negate \"column\" inline margin on items */\n position: relative;\n width: calc(100% + ${cellGap * 2} * ${theme.base.spacing});\n max-width: calc(100% + ${cellGap * 2} * ${theme.base.spacing});\n inset-inline: calc(-${cellGap} * ${theme.base.spacing});\n margin-block-end: calc(-2 * ${cellGap} * ${theme.base.spacing});\n `;\n});\nStyledCellGrid.defaultProps = defaultThemeProp;\n\nconst StyledContainerRuler = styled.div(({ theme }) => {\n return css`\n margin-inline: calc(${cellGap} * ${theme.base.spacing});\n width: calc(100% - ${cellGap * 2} * ${theme.base.spacing});\n `;\n});\nStyledContainerRuler.defaultProps = defaultThemeProp;\n\nconst ConfigurableLayout = forwardRef(\n ({ items, arrangement }: PropsWithoutRef<ConfigurableLayoutProps>, ref: Ref<HTMLElement>) => {\n const [renderMode, setRenderMode] = useState<'direct' | 'double' | 'full'>('direct');\n const containerRulerRef = useRef<HTMLDivElement>(null);\n\n // Update render mode when arrangement wraps\n useEffect(() => {\n const activeArrangement = arrangement?.hasWrapped !== undefined && !arrangement.hasWrapped;\n\n if (activeArrangement) {\n switch (arrangement.size) {\n case 'main':\n setRenderMode('direct');\n break;\n case 'half':\n setRenderMode('double');\n break;\n case 'narrow':\n setRenderMode('full');\n break;\n default:\n setRenderMode('direct');\n break;\n }\n\n return;\n }\n\n // Use direct by default\n setRenderMode('direct');\n }, [arrangement?.hasWrapped]);\n\n const content = useMemo(() => {\n if (items && !!items.length) {\n return items.map(itemConfig => {\n const config = {\n ...itemConfig,\n layoutConfig: { ...itemConfig.layoutConfig }\n };\n\n if (renderMode !== 'direct') {\n switch (renderMode) {\n case 'double': {\n const doubleWidth: { [key: string]: keyof typeof widthConfigOptions } = {\n '1/4': '1/2',\n '1/3': '2/3',\n '1/2': 'full',\n '2/3': 'full',\n '3/4': 'full',\n full: 'full'\n };\n\n config.layoutConfig.width = doubleWidth[config.layoutConfig.width];\n\n break;\n }\n case 'full':\n config.layoutConfig.width = 'full';\n break;\n default:\n config.layoutConfig.width = 'full';\n break;\n }\n }\n\n return <LayoutCell key={`${itemConfig.id}--${renderMode}`} config={config} />;\n });\n }\n\n return null;\n }, [items, renderMode]);\n\n return (\n <StyledConfigurableLayout>\n <Flex\n as={StyledCellGrid}\n container={{ wrap: 'wrap', justify: 'stretch', alignItems: 'stretch' }}\n item={{ basis: containerMinWidth, grow: 1 }}\n ref={ref}\n >\n <StyledContainerRuler ref={containerRulerRef} />\n {content}\n </Flex>\n </StyledConfigurableLayout>\n );\n }\n);\n\nexport default ConfigurableLayout;\n"]}

package/lib/components/ConfigurableLayout/ConfigurableLayout.types.d.ts ADDED Viewed

@@ -0,0 +1,43 @@
+import type widthConfigOptions from './options';
+/**
+ * Type for config of a single ConfigurableLayout item.
+ */
+export interface Config {
+    /** Unique identifier in render region */
+    id: string;
+    /** Element to render */
+    content: JSX.Element;
+    /** Config for element */
+    layoutConfig: {
+        /** Responsive width option */
+        width: keyof typeof widthConfigOptions;
+        /**
+         * Fills remaining space if true, else does not grow beyond `width` value.
+         * @default true
+         */
+        fillAvailable?: boolean;
+        /** Flex basis (minimum fixed width) of element as:
+         *  - a numeric value to be applied in __pixels__
+         *  - a tuple of a numeric value and string unit
+         */
+        minWidth?: number | [number, 'px' | 'ch' | 'rem' | 'em'];
+    };
+}
+export interface ConfigurableLayoutProps {
+    /** Array of configs for individual layout cells */
+    items: Config[];
+    /** Arrangement properties */
+    arrangement?: {
+        /** Defines the arrangement size of the given ConfigurableLayout.
+         * Used to determine what width to apply to the given item when the arrangement is applied,
+         * with the following mapping:
+         * - 'narrow' --> applies 'full' width
+         * - 'main' --> applies configured width
+         * - 'half' --> applies double the configured width, or 'full' width (whichever is smaller)
+         */
+        size: 'narrow' | 'main' | 'half';
+        /** Indicates when the ConfigurableLayout has wrapped to the full width of it's container */
+        hasWrapped: boolean;
+    };
+}
+//# sourceMappingURL=ConfigurableLayout.types.d.ts.map

package/lib/components/ConfigurableLayout/ConfigurableLayout.types.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ConfigurableLayout.types.d.ts","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/ConfigurableLayout.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,kBAAkB,MAAM,WAAW,CAAC;AAEhD;;GAEG;AACH,MAAM,WAAW,MAAM;IACrB,yCAAyC;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,wBAAwB;IACxB,OAAO,EAAE,GAAG,CAAC,OAAO,CAAC;IACrB,yBAAyB;IACzB,YAAY,EAAE;QACZ,8BAA8B;QAC9B,KAAK,EAAE,MAAM,OAAO,kBAAkB,CAAC;QACvC;;;WAGG;QACH,aAAa,CAAC,EAAE,OAAO,CAAC;QACxB;;;WAGG;QACH,QAAQ,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC;KAC1D,CAAC;CACH;AAED,MAAM,WAAW,uBAAuB;IACtC,mDAAmD;IACnD,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,6BAA6B;IAC7B,WAAW,CAAC,EAAE;QACZ;;;;;;WAMG;QACH,IAAI,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;QACjC,4FAA4F;QAC5F,UAAU,EAAE,OAAO,CAAC;KACrB,CAAC;CACH"}

package/lib/components/ConfigurableLayout/ConfigurableLayout.types.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export {};
2	+ //# sourceMappingURL=ConfigurableLayout.types.js.map

package/lib/components/ConfigurableLayout/ConfigurableLayout.types.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ConfigurableLayout.types.js","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/ConfigurableLayout.types.ts"],"names":[],"mappings":"","sourcesContent":["import type widthConfigOptions from './options';\n\n/**\n * Type for config of a single ConfigurableLayout item.\n */\nexport interface Config {\n /** Unique identifier in render region */\n id: string;\n /** Element to render */\n content: JSX.Element;\n /** Config for element */\n layoutConfig: {\n /** Responsive width option */\n width: keyof typeof widthConfigOptions;\n /**\n * Fills remaining space if true, else does not grow beyond `width` value.\n * @default true\n */\n fillAvailable?: boolean;\n /** Flex basis (minimum fixed width) of element as:\n * - a numeric value to be applied in __pixels__\n * - a tuple of a numeric value and string unit\n */\n minWidth?: number | [number, 'px' | 'ch' | 'rem' | 'em'];\n };\n}\n\nexport interface ConfigurableLayoutProps {\n /** Array of configs for individual layout cells */\n items: Config[];\n /** Arrangement properties */\n arrangement?: {\n /** Defines the arrangement size of the given ConfigurableLayout.\n * Used to determine what width to apply to the given item when the arrangement is applied,\n * with the following mapping:\n * - 'narrow' --> applies 'full' width\n * - 'main' --> applies configured width\n * - 'half' --> applies double the configured width, or 'full' width (whichever is smaller)\n */\n size: 'narrow' | 'main' | 'half';\n /** Indicates when the ConfigurableLayout has wrapped to the full width of it's container */\n hasWrapped: boolean;\n };\n}\n"]}

package/lib/components/ConfigurableLayout/LayoutCell.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import type { Config } from './ConfigurableLayout.types';
+declare const LayoutCell: ({ config }: {
+    config: Config;
+}) => JSX.Element | null;
+export default LayoutCell;
+//# sourceMappingURL=LayoutCell.d.ts.map

package/lib/components/ConfigurableLayout/LayoutCell.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"LayoutCell.d.ts","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/LayoutCell.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAoDzD,QAAA,MAAM,UAAU;YAA0B,MAAM;wBAoC/C,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/ConfigurableLayout/LayoutCell.js ADDED Viewed

@@ -0,0 +1,64 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import styled, { css } from 'styled-components';
+import { Flex, defaultThemeProp } from '@pega/cosmos-react-core';
+import { StyledAppAnnouncement } from '../AppAnnouncement/AppAnnouncement';
+import widthConfigOptions from './options';
+import { itemMinWidth, cellGap } from './defaults';
+const StyledCell = styled.div(({ fillAvailable = true, percentageWidth, minWidth, theme }) => {
+    return css `
+      /* variables */
+      --marginGap: calc(${cellGap} * ${theme.base.spacing});
+      --totalMargin: calc(2 * var(--marginGap));
+      --percentageBasis: calc(${percentageWidth} - var(--totalMargin));
+      --maxWidth: calc(100% - var(--totalMargin));
+      /* styles */
+      flex-wrap: wrap;
+      flex-basis: var(--percentageBasis);
+      min-width: min(var(--maxWidth), ${minWidth || itemMinWidth});
+      max-width: var(--maxWidth);
+      margin-block-end: var(--totalMargin);
+      margin-inline: var(--marginGap);
+      ${!fillAvailable &&
+        css `
+        flex-grow: 0;
+      `}
+      ${StyledAppAnnouncement} {
+        align-self: stretch;
+      }
+      > * {
+        width: 100%;
+        height: auto;
+        overflow-x: auto;
+      }
+    `;
+});
+StyledCell.defaultProps = defaultThemeProp;
+const validWidthUnits = ['px', 'ch', 'rem', 'em'];
+const LayoutCell = ({ config }) => {
+    const layoutConfig = useMemo(() => config.layoutConfig, [config]);
+    const percentageWidth = useMemo(() => {
+        return widthConfigOptions[layoutConfig.width] || '100%';
+    }, [layoutConfig.width]);
+    const minWidth = useMemo(() => {
+        const value = layoutConfig.minWidth;
+        if (typeof value === 'number') {
+            return `${value}px`;
+        }
+        if (Array.isArray(value) &&
+            value.length >= 2 &&
+            typeof value[0] === 'number' &&
+            validWidthUnits.includes(value[1])) {
+            return `${value[0]}${value[1]}`;
+        }
+    }, [layoutConfig.minWidth]);
+    return config?.content ? (_jsx(Flex, { as: StyledCell, item: {
+            grow: 1
+        }, container: { justify: 'stretch', alignItems: 'start' }, fillAvailable: layoutConfig.fillAvailable, percentageWidth: percentageWidth, minWidth: minWidth, children: config.content }, void 0)) : null;
+};
+export default LayoutCell;
+//# sourceMappingURL=LayoutCell.js.map

package/lib/components/ConfigurableLayout/LayoutCell.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"LayoutCell.js","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/LayoutCell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAgB,MAAM,mBAAmB,CAAC;AAE9D,OAAO,EAAE,IAAI,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAG3E,OAAO,kBAAkB,MAAM,WAAW,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAEnD,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAC3B,CAAC,EACC,aAAa,GAAG,IAAI,EACpB,eAAe,EACf,QAAQ,EACR,KAAK,EAMN,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;0BAEY,OAAO,MAAM,KAAK,CAAC,IAAI,CAAC,OAAO;;gCAEzB,eAAe;;;;;;wCAMP,QAAQ,IAAI,YAAY;;;;;QAKxD,CAAC,aAAa;QAChB,GAAG,CAAA;;OAEF;;QAEC,qBAAqB;;;;;;;;;KASxB,CAAC;AACJ,CAAC,CACF,CAAC;AACF,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,eAAe,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;AAElD,MAAM,UAAU,GAAG,CAAC,EAAE,MAAM,EAAsB,EAAE,EAAE;IACpD,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,YAAY,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAClE,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,OAAO,kBAAkB,CAAC,YAAY,CAAC,KAAwC,CAAC,IAAI,MAAM,CAAC;IAC7F,CAAC,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;IACzB,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC5B,MAAM,KAAK,GAAG,YAAY,CAAC,QAAQ,CAAC;QAEpC,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;YAC7B,OAAO,GAAG,KAAK,IAAI,CAAC;SACrB;QAED,IACE,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC;YACpB,KAAK,CAAC,MAAM,IAAI,CAAC;YACjB,OAAO,KAAK,CAAC,CAAC,CAAC,KAAK,QAAQ;YAC5B,eAAe,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAClC;YACA,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;SACjC;IACH,CAAC,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC;IAE5B,OAAO,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CACvB,KAAC,IAAI,IACH,EAAE,EAAE,UAAU,EACd,IAAI,EAAE;YACJ,IAAI,EAAE,CAAC;SACR,EACD,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,EACtD,aAAa,EAAE,YAAY,CAAC,aAAa,EACzC,eAAe,EAAE,eAAe,EAChC,QAAQ,EAAE,QAAQ,YAEjB,MAAM,CAAC,OAAO,WACV,CACR,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import { useMemo } from 'react';\nimport styled, { css, DefaultTheme } from 'styled-components';\n\nimport { Flex, defaultThemeProp } from '@pega/cosmos-react-core';\n\nimport { StyledAppAnnouncement } from '../AppAnnouncement/AppAnnouncement';\n\nimport type { Config } from './ConfigurableLayout.types';\nimport widthConfigOptions from './options';\nimport { itemMinWidth, cellGap } from './defaults';\n\nconst StyledCell = styled.div(\n ({\n fillAvailable = true,\n percentageWidth,\n minWidth,\n theme\n }: {\n fillAvailable: boolean;\n percentageWidth?: string;\n minWidth?: string | undefined;\n theme: DefaultTheme;\n }) => {\n return css`\n /* variables */\n --marginGap: calc(${cellGap} * ${theme.base.spacing});\n --totalMargin: calc(2 * var(--marginGap));\n --percentageBasis: calc(${percentageWidth} - var(--totalMargin));\n --maxWidth: calc(100% - var(--totalMargin));\n\n /* styles */\n flex-wrap: wrap;\n flex-basis: var(--percentageBasis);\n min-width: min(var(--maxWidth), ${minWidth || itemMinWidth});\n max-width: var(--maxWidth);\n margin-block-end: var(--totalMargin);\n margin-inline: var(--marginGap);\n\n ${!fillAvailable &&\n css`\n flex-grow: 0;\n `}\n\n ${StyledAppAnnouncement} {\n align-self: stretch;\n }\n\n > * {\n width: 100%;\n height: auto;\n overflow-x: auto;\n }\n `;\n }\n);\nStyledCell.defaultProps = defaultThemeProp;\n\nconst validWidthUnits = ['px', 'ch', 'rem', 'em'];\n\nconst LayoutCell = ({ config }: { config: Config }) => {\n const layoutConfig = useMemo(() => config.layoutConfig, [config]);\n const percentageWidth = useMemo(() => {\n return widthConfigOptions[layoutConfig.width as keyof typeof widthConfigOptions] || '100%';\n }, [layoutConfig.width]);\n const minWidth = useMemo(() => {\n const value = layoutConfig.minWidth;\n\n if (typeof value === 'number') {\n return `${value}px`;\n }\n\n if (\n Array.isArray(value) &&\n value.length >= 2 &&\n typeof value[0] === 'number' &&\n validWidthUnits.includes(value[1])\n ) {\n return `${value[0]}${value[1]}`;\n }\n }, [layoutConfig.minWidth]);\n\n return config?.content ? (\n <Flex\n as={StyledCell}\n item={{\n grow: 1\n }}\n container={{ justify: 'stretch', alignItems: 'start' }}\n fillAvailable={layoutConfig.fillAvailable}\n percentageWidth={percentageWidth}\n minWidth={minWidth}\n >\n {config.content}\n </Flex>\n ) : null;\n};\n\nexport default LayoutCell;\n"]}

package/lib/components/ConfigurableLayout/defaults.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+export declare const cellGap = 1;
+export declare const containerMinWidth = "450px";
+export declare const itemMinWidth = "225px";
+//# sourceMappingURL=defaults.d.ts.map

package/lib/components/ConfigurableLayout/defaults.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/defaults.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,IAAI,CAAC;AACzB,eAAO,MAAM,iBAAiB,UAAU,CAAC;AACzC,eAAO,MAAM,YAAY,UAAU,CAAC"}

package/lib/components/ConfigurableLayout/defaults.js ADDED Viewed

@@ -0,0 +1,4 @@
+export const cellGap = 1;
+export const containerMinWidth = '450px';
+export const itemMinWidth = '225px';
+//# sourceMappingURL=defaults.js.map

package/lib/components/ConfigurableLayout/defaults.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"defaults.js","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/defaults.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,CAAC;AACzB,MAAM,CAAC,MAAM,iBAAiB,GAAG,OAAO,CAAC;AACzC,MAAM,CAAC,MAAM,YAAY,GAAG,OAAO,CAAC","sourcesContent":["export const cellGap = 1;\nexport const containerMinWidth = '450px';\nexport const itemMinWidth = '225px';\n"]}

package/lib/components/ConfigurableLayout/index.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export { default } from './ConfigurableLayout';
+export { default as useTrackWrappedRegions } from './useTrackWrappedRegions';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/ConfigurableLayout/index.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,0BAA0B,CAAC"}

package/lib/components/ConfigurableLayout/index.js ADDED Viewed

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

package/lib/components/ConfigurableLayout/index.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,0BAA0B,CAAC","sourcesContent":["export { default } from './ConfigurableLayout';\nexport { default as useTrackWrappedRegions } from './useTrackWrappedRegions';\n"]}

package/lib/components/ConfigurableLayout/options.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+declare const widthConfigOptions: {
+    readonly '1/4': "25%";
+    readonly '1/3': "33.3%";
+    readonly '1/2': "50%";
+    readonly '2/3': "66.6%";
+    readonly '3/4': "75%";
+    readonly full: "100%";
+};
+export default widthConfigOptions;
+//# sourceMappingURL=options.d.ts.map

package/lib/components/ConfigurableLayout/options.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"options.d.ts","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/options.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,kBAAkB;;;;;;;CAOd,CAAC;AAEX,eAAe,kBAAkB,CAAC"}

package/lib/components/ConfigurableLayout/options.js ADDED Viewed

@@ -0,0 +1,10 @@
+const widthConfigOptions = {
+    '1/4': '25%',
+    '1/3': '33.3%',
+    '1/2': '50%',
+    '2/3': '66.6%',
+    '3/4': '75%',
+    full: '100%'
+};
+export default widthConfigOptions;
+//# sourceMappingURL=options.js.map

package/lib/components/ConfigurableLayout/options.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"options.js","sourceRoot":"","sources":["../../../src/components/ConfigurableLayout/options.ts"],"names":[],"mappings":"AAAA,MAAM,kBAAkB,GAAG;IACzB,KAAK,EAAE,KAAK;IACZ,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,KAAK;IACZ,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,KAAK;IACZ,IAAI,EAAE,MAAM;CACJ,CAAC;AAEX,eAAe,kBAAkB,CAAC","sourcesContent":["const widthConfigOptions = {\n '1/4': '25%',\n '1/3': '33.3%',\n '1/2': '50%',\n '2/3': '66.6%',\n '3/4': '75%',\n full: '100%'\n} as const;\n\nexport default widthConfigOptions;\n"]}