@pega/cosmos-react-work 2.1.6 → 2.1.7

package/lib/components/Stages/Stages.styles.js

@@ -0,0 +1,280 @@
+import styled, { css } from 'styled-components';
+import { calculateFontSize, defaultThemeProp, StyledIcon, StyledText, useDirection } from '@pega/cosmos-react-core';
+export const StyledStages = styled.div(props => {
+    return css `
+    background-color: ${props.theme.base.palette['primary-background']};
+    border-radius: ${props.theme.base['border-radius']};
+    width: 100%;
+  `;
+});
+StyledStages.defaultProps = defaultThemeProp;
+export const StyledInnerStage = styled.span(props => {
+    return css `
+    display: inline-block;
+    text-align: center;
+    white-space: nowrap;
+    ${props.ellipsis &&
+        css `
+      overflow: hidden;
+      text-overflow: ellipsis;
+    `}
+  `;
+});
+export const StyledStage = styled.button(({ theme: { base: { spacing, palette, 'hit-area': hitArea, shadow, transparency, 'border-radius': borderRadius } } }) => {
+    const activeColor = palette.interactive;
+    const baseBorderColor = palette['border-line'];
+    const thinBorderWidth = '0.0625rem';
+    const thickBorderWidth = '0.125rem';
+    const baseTransparency = transparency['transparent-2'];
+    const { rtl, start, end } = useDirection();
+    return css `
+    /* stylelint-disable no-descending-specificity */
+    background-color: inherit;
+    color: ${palette['foreground-color']};
+    outline: none;
+    border-color: transparent;
+    border-width: ${thinBorderWidth} 0;
+    border-style: solid;
+    position: relative;
+    height: calc(4 * ${spacing});
+    min-width: calc(5.25 * ${spacing});
+    padding-inline-start: calc(2 * ${spacing});
+    padding-inline-end: ${spacing};
+
+    @media (pointer: coarse) {
+      height: ${hitArea['finger-min']};
+      padding-inline-start: calc(2.25 * ${spacing});
+    }
+
+    ${StyledIcon} {
+      margin-inline-end: 0.25rem;
+      color: ${palette.success};
+
+      &:last-child {
+        margin-inline-end: 0;
+      }
+    }
+
+    ${StyledInnerStage} {
+      opacity: ${baseTransparency};
+    }
+
+    &:first-child {
+      border-top-${start}-radius: ${borderRadius};
+      border-bottom-${start}-radius: ${borderRadius};
+      border-inline-start-width: ${thinBorderWidth};
+      padding-inline-start: calc(${spacing});
+    }
+
+    &:last-child {
+      border-top-${end}-radius: ${borderRadius};
+      border-bottom-${end}-radius: ${borderRadius};
+      border-inline-end-width: ${thinBorderWidth};
+      padding-inline-end: calc(${spacing});
+      min-width: calc(6.25 * ${spacing});
+    }
+
+    &:not(:first-child)::before {
+      content: '';
+      position: absolute;
+      display: block;
+      width: calc(2.25 * ${spacing});
+      height: calc(2.25 * ${spacing});
+      left: calc(-1.125 * ${spacing});
+      right: calc(-1.125 * ${spacing});
+      background-color: transparent;
+      border-style: solid;
+      border-color: ${baseBorderColor};
+      border-inline-end-width: ${thinBorderWidth};
+      border-inline-start-width: 0;
+      border-top-width: ${rtl ? 0 : thinBorderWidth};
+      border-bottom-width: ${rtl ? thinBorderWidth : 0};
+      transform: rotateZ(45deg) skew(15deg, 15deg);
+
+      @media (pointer: coarse) {
+        width: calc(2.875 * ${spacing});
+        height: calc(2.875 * ${spacing});
+        left: calc(-1.375 * ${spacing});
+        right: calc(-1.375 * ${spacing});
+        transform: rotateZ(45deg) skew(20deg, 20deg);
+      }
+    }
+
+    &:hover,
+    &:hover::before {
+      border-color: ${baseBorderColor};
+    }
+
+    &:hover {
+      ${StyledInnerStage} {
+        opacity: 1;
+      }
+    }
+
+    &:focus,
+    &:active,
+    &:focus::before,
+    &:active::before,
+    &:focus + &::before,
+    &:active + &::before {
+      border-color: ${activeColor};
+    }
+
+    &:focus {
+      border-width: ${thickBorderWidth} 0;
+    }
+
+    &:focus::before,
+    &:focus + &::before {
+      border-inline-end-width: ${thickBorderWidth};
+      border-top-width: ${rtl ? 0 : thickBorderWidth};
+      border-bottom-width: ${rtl ? thickBorderWidth : 0};
+    }
+
+    &:first-child:focus {
+      border-inline-start-width: ${thickBorderWidth};
+      padding-inline-start: calc(${spacing} - ${thickBorderWidth} + ${thinBorderWidth});
+    }
+
+    &:last-child:focus {
+      border-inline-end-width: ${thickBorderWidth};
+      padding-inline-end: calc(${spacing} - ${thinBorderWidth});
+    }
+
+    &:active {
+      border-width: ${thinBorderWidth} 0;
+
+      ${StyledInnerStage} {
+        opacity: ${transparency['transparent-3']};
+      }
+    }
+
+    &:active::before,
+    &:active + &::before {
+      border-inline-end-width: ${thinBorderWidth};
+      border-top-width: ${rtl ? 0 : thinBorderWidth};
+      border-bottom-width: ${rtl ? thinBorderWidth : 0};
+    }
+
+    &:first-child:active {
+      border-inline-start-width: ${thinBorderWidth};
+      padding-inline-start: calc(${spacing});
+    }
+
+    &:last-child:active {
+      border-inline-end-width: ${thinBorderWidth};
+      padding-inline-end: calc(${spacing});
+    }
+
+    &[aria-current] {
+      z-index: 2;
+
+      ${StyledInnerStage} {
+        font-weight: bold;
+        opacity: 1;
+      }
+
+      &:hover {
+        ${StyledInnerStage} {
+          opacity: ${baseTransparency};
+        }
+      }
+      &:active {
+        ${StyledInnerStage} {
+          opacity: ${transparency['transparent-3']};
+        }
+      }
+    }
+
+    &[aria-current] + &::before {
+      box-shadow: ${shadow.low};
+    }
+
+    &[aria-current] + &:focus::before {
+      box-shadow: none;
+    }
+  `;
+});
+StyledStage.defaultProps = defaultThemeProp;
+export const StyledStagePopover = styled.div(({ theme }) => {
+    return css `
+    padding: calc(2 * ${theme.base.spacing});
+    white-space: pre-line;
+    width: 18rem;
+  `;
+});
+StyledStagePopover.defaultProps = defaultThemeProp;
+export const StyledStepsContainer = styled.ol(({ theme }) => {
+    return css `
+    list-style-type: none;
+    margin-top: calc(1.5 * ${theme.base.spacing});
+    margin-bottom: calc(2.5 * ${theme.base.spacing});
+
+    &:empty {
+      margin-bottom: 0;
+    }
+  `;
+});
+StyledStepsContainer.defaultProps = defaultThemeProp;
+export const StyledStep = styled.li(({ complete, theme }) => {
+    const iconColor = complete ? theme.base.palette.success : theme.base.palette['foreground-color'];
+    const iconWidth = complete ? '1.125rem' : '0.3rem';
+    const iconMargin = complete ? 0 : '0.3rem';
+    const textOpacity = complete ? theme.base.transparency['transparent-3'] : 1;
+    return css `
+    border-radius: 0;
+    margin-bottom: calc(${theme.base.spacing});
+    color: ${theme.base.palette['foreground-color']};
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    ${StyledIcon} {
+      margin-inline-end: calc(${theme.base.spacing});
+      color: ${iconColor};
+      width: ${iconWidth};
+      margin-inline-start: ${iconMargin};
+    }
+
+    ${StyledText} {
+      opacity: ${textOpacity};
+    }
+  `;
+});
+StyledStep.defaultProps = defaultThemeProp;
+export const StyledSteps = styled.div `
+  background-color: ${props => props.theme.components.card.background};
+  position: relative;
+`;
+StyledSteps.defaultProps = defaultThemeProp;
+export const StyledInnerStep = styled.span(({ complete, theme }) => {
+    const textOpacity = complete ? theme.base.transparency['transparent-2'] : 1;
+    return css `
+    display: flex;
+    width: 100%;
+    text-align: start;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+    ${StyledIcon} {
+      color: ${theme.base.palette.success};
+      margin-inline-end: ${theme.base.spacing};
+    }
+
+    ${StyledText} {
+      opacity: ${textOpacity};
+    }
+  `;
+});
+StyledInnerStep.defaultProps = defaultThemeProp;
+export const StyledDateTimeDisplay = styled.span(({ theme }) => {
+    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    return css `
+    font-size: ${fontSize.xs};
+    opacity: ${theme.base.transparency['transparent-2']};
+  `;
+});
+StyledDateTimeDisplay.defaultProps = defaultThemeProp;
+//# sourceMappingURL=Stages.styles.js.map

package/lib/components/Stages/Stages.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stages.styles.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n  calculateFontSize,\n  defaultThemeProp,\n  StyledIcon,\n  StyledText,\n  useDirection\n} from '@pega/cosmos-react-core';\n\nexport const StyledStages = styled.div(props => {\n  return css`\n    background-color: ${props.theme.base.palette['primary-background']};\n    border-radius: ${props.theme.base['border-radius']};\n    width: 100%;\n  `;\n});\n\nStyledStages.defaultProps = defaultThemeProp;\n\nexport const StyledInnerStage = styled.span<{ ellipsis?: boolean }>(props => {\n  return css`\n    display: inline-block;\n    text-align: center;\n    white-space: nowrap;\n    ${props.ellipsis &&\n    css`\n      overflow: hidden;\n      text-overflow: ellipsis;\n    `}\n  `;\n});\n\nexport const StyledStage = styled.button(\n  ({\n    theme: {\n      base: {\n        spacing,\n        palette,\n        'hit-area': hitArea,\n        shadow,\n        transparency,\n        'border-radius': borderRadius\n      }\n    }\n  }) => {\n    const activeColor = palette.interactive;\n    const baseBorderColor = palette['border-line'];\n    const thinBorderWidth = '0.0625rem';\n    const thickBorderWidth = '0.125rem';\n    const baseTransparency = transparency['transparent-2'];\n    const { rtl, start, end } = useDirection();\n\n    return css`\n    /* stylelint-disable no-descending-specificity */\n    background-color: inherit;\n    color: ${palette['foreground-color']};\n    outline: none;\n    border-color: transparent;\n    border-width: ${thinBorderWidth} 0;\n    border-style: solid;\n    position: relative;\n    height: calc(4 * ${spacing});\n    min-width: calc(5.25 * ${spacing});\n    padding-inline-start: calc(2 * ${spacing});\n    padding-inline-end: ${spacing};\n\n    @media (pointer: coarse) {\n      height: ${hitArea['finger-min']};\n      padding-inline-start: calc(2.25 * ${spacing});\n    }\n\n    ${StyledIcon} {\n      margin-inline-end: 0.25rem;\n      color: ${palette.success};\n\n      &:last-child {\n        margin-inline-end: 0;\n      }\n    }\n\n    ${StyledInnerStage} {\n      opacity: ${baseTransparency};\n    }\n\n    &:first-child {\n      border-top-${start}-radius: ${borderRadius};\n      border-bottom-${start}-radius: ${borderRadius};\n      border-inline-start-width: ${thinBorderWidth};\n      padding-inline-start: calc(${spacing});\n    }\n\n    &:last-child {\n      border-top-${end}-radius: ${borderRadius};\n      border-bottom-${end}-radius: ${borderRadius};\n      border-inline-end-width: ${thinBorderWidth};\n      padding-inline-end: calc(${spacing});\n      min-width: calc(6.25 * ${spacing});\n    }\n\n    &:not(:first-child)::before {\n      content: '';\n      position: absolute;\n      display: block;\n      width: calc(2.25 * ${spacing});\n      height: calc(2.25 * ${spacing});\n      left: calc(-1.125 * ${spacing});\n      right: calc(-1.125 * ${spacing});\n      background-color: transparent;\n      border-style: solid;\n      border-color: ${baseBorderColor};\n      border-inline-end-width: ${thinBorderWidth};\n      border-inline-start-width: 0;\n      border-top-width: ${rtl ? 0 : thinBorderWidth};\n      border-bottom-width: ${rtl ? thinBorderWidth : 0};\n      transform: rotateZ(45deg) skew(15deg, 15deg);\n\n      @media (pointer: coarse) {\n        width: calc(2.875 * ${spacing});\n        height: calc(2.875 * ${spacing});\n        left: calc(-1.375 * ${spacing});\n        right: calc(-1.375 * ${spacing});\n        transform: rotateZ(45deg) skew(20deg, 20deg);\n      }\n    }\n\n    &:hover,\n    &:hover::before {\n      border-color: ${baseBorderColor};\n    }\n\n    &:hover {\n      ${StyledInnerStage} {\n        opacity: 1;\n      }\n    }\n\n    &:focus,\n    &:active,\n    &:focus::before,\n    &:active::before,\n    &:focus + &::before,\n    &:active + &::before {\n      border-color: ${activeColor};\n    }\n\n    &:focus {\n      border-width: ${thickBorderWidth} 0;\n    }\n\n    &:focus::before,\n    &:focus + &::before {\n      border-inline-end-width: ${thickBorderWidth};\n      border-top-width: ${rtl ? 0 : thickBorderWidth};\n      border-bottom-width: ${rtl ? thickBorderWidth : 0};\n    }\n\n    &:first-child:focus {\n      border-inline-start-width: ${thickBorderWidth};\n      padding-inline-start: calc(${spacing} - ${thickBorderWidth} + ${thinBorderWidth});\n    }\n\n    &:last-child:focus {\n      border-inline-end-width: ${thickBorderWidth};\n      padding-inline-end: calc(${spacing} - ${thinBorderWidth});\n    }\n\n    &:active {\n      border-width: ${thinBorderWidth} 0;\n\n      ${StyledInnerStage} {\n        opacity: ${transparency['transparent-3']};\n      }\n    }\n\n    &:active::before,\n    &:active + &::before {\n      border-inline-end-width: ${thinBorderWidth};\n      border-top-width: ${rtl ? 0 : thinBorderWidth};\n      border-bottom-width: ${rtl ? thinBorderWidth : 0};\n    }\n\n    &:first-child:active {\n      border-inline-start-width: ${thinBorderWidth};\n      padding-inline-start: calc(${spacing});\n    }\n\n    &:last-child:active {\n      border-inline-end-width: ${thinBorderWidth};\n      padding-inline-end: calc(${spacing});\n    }\n\n    &[aria-current] {\n      z-index: 2;\n\n      ${StyledInnerStage} {\n        font-weight: bold;\n        opacity: 1;\n      }\n\n      &:hover {\n        ${StyledInnerStage} {\n          opacity: ${baseTransparency};\n        }\n      }\n      &:active {\n        ${StyledInnerStage} {\n          opacity: ${transparency['transparent-3']};\n        }\n      }\n    }\n\n    &[aria-current] + &::before {\n      box-shadow: ${shadow.low};\n    }\n\n    &[aria-current] + &:focus::before {\n      box-shadow: none;\n    }\n  `;\n  }\n);\n\nStyledStage.defaultProps = defaultThemeProp;\n\nexport const StyledStagePopover = styled.div(({ theme }) => {\n  return css`\n    padding: calc(2 * ${theme.base.spacing});\n    white-space: pre-line;\n    width: 18rem;\n  `;\n});\n\nStyledStagePopover.defaultProps = defaultThemeProp;\n\nexport const StyledStepsContainer = styled.ol(({ theme }) => {\n  return css`\n    list-style-type: none;\n    margin-top: calc(1.5 * ${theme.base.spacing});\n    margin-bottom: calc(2.5 * ${theme.base.spacing});\n\n    &:empty {\n      margin-bottom: 0;\n    }\n  `;\n});\n\nStyledStepsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledStep = styled.li<{ complete: boolean }>(({ complete, theme }) => {\n  const iconColor = complete ? theme.base.palette.success : theme.base.palette['foreground-color'];\n  const iconWidth = complete ? '1.125rem' : '0.3rem';\n  const iconMargin = complete ? 0 : '0.3rem';\n  const textOpacity = complete ? theme.base.transparency['transparent-3'] : 1;\n\n  return css`\n    border-radius: 0;\n    margin-bottom: calc(${theme.base.spacing});\n    color: ${theme.base.palette['foreground-color']};\n\n    &:last-child {\n      margin-bottom: 0;\n    }\n\n    ${StyledIcon} {\n      margin-inline-end: calc(${theme.base.spacing});\n      color: ${iconColor};\n      width: ${iconWidth};\n      margin-inline-start: ${iconMargin};\n    }\n\n    ${StyledText} {\n      opacity: ${textOpacity};\n    }\n  `;\n});\n\nStyledStep.defaultProps = defaultThemeProp;\n\nexport const StyledSteps = styled.div`\n  background-color: ${props => props.theme.components.card.background};\n  position: relative;\n`;\n\nStyledSteps.defaultProps = defaultThemeProp;\n\nexport const StyledInnerStep = styled.span<{ complete: boolean }>(({ complete, theme }) => {\n  const textOpacity = complete ? theme.base.transparency['transparent-2'] : 1;\n  return css`\n    display: flex;\n    width: 100%;\n    text-align: start;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n\n    ${StyledIcon} {\n      color: ${theme.base.palette.success};\n      margin-inline-end: ${theme.base.spacing};\n    }\n\n    ${StyledText} {\n      opacity: ${textOpacity};\n    }\n  `;\n});\n\nStyledInnerStep.defaultProps = defaultThemeProp;\n\nexport const StyledDateTimeDisplay = styled.span(({ theme }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n  return css`\n    font-size: ${fontSize.xs};\n    opacity: ${theme.base.transparency['transparent-2']};\n  `;\n});\n\nStyledDateTimeDisplay.defaultProps = defaultThemeProp;\n"]}

package/lib/components/Stages/Stages.types.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+import { BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';
+export interface StepProps {
+    name: ReactNode;
+    complete: boolean;
+    id: string;
+}
+export interface StageProps {
+    name: string;
+    id: string;
+    date?: Date | string | number;
+    required: boolean;
+    complete: boolean;
+    steps?: StepProps[];
+}
+export interface StagesProps extends BaseProps, NoChildrenProp {
+    /** List of objects describing each stage and their state. */
+    stages: StageProps[];
+    /** Current stage id. */
+    current: string;
+    caseTitle?: string;
+}
+//# sourceMappingURL=Stages.types.d.ts.map

package/lib/components/Stages/Stages.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stages.types.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Stages.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAEpE,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;CACrB;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,cAAc;IAC5D,6DAA6D;IAC7D,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,wBAAwB;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/lib/components/Stages/Stages.types.js

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

package/lib/components/Stages/Stages.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stages.types.js","sourceRoot":"","sources":["../../../src/components/Stages/Stages.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode } from 'react';\n\nimport { BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';\n\nexport interface StepProps {\n  name: ReactNode;\n  complete: boolean;\n  id: string;\n}\n\nexport interface StageProps {\n  name: string;\n  id: string;\n  date?: Date | string | number;\n  required: boolean;\n  complete: boolean;\n  steps?: StepProps[];\n}\n\nexport interface StagesProps extends BaseProps, NoChildrenProp {\n  /** List of objects describing each stage and their state. */\n  stages: StageProps[];\n  /** Current stage id. */\n  current: string;\n  caseTitle?: string;\n}\n"]}

package/lib/components/Stages/Steps.d.ts

@@ -0,0 +1,8 @@
+import { FunctionComponent } from 'react';
+import { StepProps } from './Stages.types';
+interface StepsProps {
+    steps?: StepProps[];
+}
+declare const Steps: FunctionComponent<StepsProps>;
+export default Steps;
+//# sourceMappingURL=Steps.d.ts.map

package/lib/components/Stages/Steps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Steps.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/Steps.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAM3D,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAK3C,UAAU,UAAU;IAClB,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;CACrB;AAED,QAAA,MAAM,KAAK,EAAE,iBAAiB,CAAC,UAAU,CAcxC,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/lib/components/Stages/Steps.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon, registerIcon, Text, Grid } from '@pega/cosmos-react-core';
+import * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';
+import * as circleSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/circle-solid.icon';
+import { StyledStep, StyledStepsContainer } from './Stages.styles';
+registerIcon(checkIcon, circleSolidIcon);
+const Steps = ({ steps }) => {
+    return (_jsx(StyledStepsContainer, { children: steps &&
+            steps.map(({ id, name, complete }) => (_jsx(StyledStep, { complete: complete, children: _jsxs(Grid, { container: { cols: '1.625rem 1fr' }, children: [_jsx(Icon, { name: complete ? 'check' : 'circle-solid' }, void 0), _jsx(Text, { children: name }, void 0)] }, void 0) }, id))) }, void 0));
+};
+export default Steps;
+//# sourceMappingURL=Steps.js.map

package/lib/components/Stages/Steps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Steps.js","sourceRoot":"","sources":["../../../src/components/Stages/Steps.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACzE,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAC1F,OAAO,KAAK,eAAe,MAAM,qEAAqE,CAAC;AAGvG,OAAO,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAEnE,YAAY,CAAC,SAAS,EAAE,eAAe,CAAC,CAAC;AAMzC,MAAM,KAAK,GAAkC,CAAC,EAAE,KAAK,EAA+B,EAAE,EAAE;IACtF,OAAO,CACL,KAAC,oBAAoB,cAClB,KAAK;YACJ,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CACpC,KAAC,UAAU,IAAU,QAAQ,EAAE,QAAQ,YACrC,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,aACvC,KAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,cAAc,WAAI,EACnD,KAAC,IAAI,cAAE,IAAI,WAAQ,YACd,IAJQ,EAAE,CAKN,CACd,CAAC,WACiB,CACxB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC","sourcesContent":["import { PropsWithoutRef, FunctionComponent } from 'react';\n\nimport { Icon, registerIcon, Text, Grid } from '@pega/cosmos-react-core';\nimport * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';\nimport * as circleSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/circle-solid.icon';\n\nimport { StepProps } from './Stages.types';\nimport { StyledStep, StyledStepsContainer } from './Stages.styles';\n\nregisterIcon(checkIcon, circleSolidIcon);\n\ninterface StepsProps {\n  steps?: StepProps[];\n}\n\nconst Steps: FunctionComponent<StepsProps> = ({ steps }: PropsWithoutRef<StepsProps>) => {\n  return (\n    <StyledStepsContainer>\n      {steps &&\n        steps.map(({ id, name, complete }) => (\n          <StyledStep key={id} complete={complete}>\n            <Grid container={{ cols: '1.625rem 1fr' }}>\n              <Icon name={complete ? 'check' : 'circle-solid'} />\n              <Text>{name}</Text>\n            </Grid>\n          </StyledStep>\n        ))}\n    </StyledStepsContainer>\n  );\n};\n\nexport default Steps;\n"]}

package/lib/components/Stages/StepsContainer.d.ts

@@ -0,0 +1,8 @@
+import { FunctionComponent } from 'react';
+import { StagesProps } from './Stages.types';
+export interface StepsContainerProps {
+    currentStage: StagesProps['stages'];
+}
+declare const StepsContainer: FunctionComponent<StepsContainerProps>;
+export default StepsContainer;
+//# sourceMappingURL=StepsContainer.d.ts.map

package/lib/components/Stages/StepsContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepsContainer.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/StepsContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAmB,MAAM,OAAO,CAAC;AAM3D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAK7C,MAAM,WAAW,mBAAmB;IAClC,YAAY,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;CACrC;AAED,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,CAqB1D,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/Stages/StepsContainer.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, Icon, registerIcon, DateTimeDisplay, Text } from '@pega/cosmos-react-core';
+import * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';
+import Steps from './Steps';
+import { StyledDateTimeDisplay, StyledInnerStep, StyledSteps } from './Stages.styles';
+registerIcon(checkIcon);
+const StepsContainer = ({ currentStage }) => {
+    return (_jsxs(Flex, { as: StyledSteps, container: { direction: 'column' }, item: { grow: 1 }, children: [_jsxs(StyledInnerStep, { complete: currentStage[0]?.complete, children: [currentStage[0]?.complete && _jsx(Icon, { name: 'check' }, void 0), _jsx(Text, { variant: 'h2', children: currentStage[0]?.name }, void 0)] }, void 0), currentStage[0]?.date && (_jsx(DateTimeDisplay, { as: StyledDateTimeDisplay, value: currentStage[0]?.date, variant: 'relative', format: 'short' }, void 0)), _jsx(Steps, { steps: currentStage[0].steps }, void 0)] }, void 0));
+};
+export default StepsContainer;
+//# sourceMappingURL=StepsContainer.js.map

package/lib/components/Stages/StepsContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepsContainer.js","sourceRoot":"","sources":["../../../src/components/Stages/StepsContainer.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,eAAe,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC1F,OAAO,KAAK,SAAS,MAAM,8DAA8D,CAAC;AAE1F,OAAO,KAAK,MAAM,SAAS,CAAC;AAE5B,OAAO,EAAE,qBAAqB,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEtF,YAAY,CAAC,SAAS,CAAC,CAAC;AAMxB,MAAM,cAAc,GAA2C,CAAC,EAC9D,YAAY,EACyB,EAAE,EAAE;IACzC,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,aAC1E,MAAC,eAAe,IAAC,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,QAAQ,aACjD,YAAY,CAAC,CAAC,CAAC,EAAE,QAAQ,IAAI,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,WAAG,EACnD,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,YAAY,CAAC,CAAC,CAAC,EAAE,IAAI,WAAQ,YACjC,EACjB,YAAY,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CACxB,KAAC,eAAe,IACd,EAAE,EAAE,qBAAqB,EACzB,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,IAAI,EAC5B,OAAO,EAAC,UAAU,EAClB,MAAM,EAAC,OAAO,WACd,CACH,EAED,KAAC,KAAK,IAAC,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK,WAAI,YAClC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { FunctionComponent, PropsWithoutRef } from 'react';\n\nimport { Flex, Icon, registerIcon, DateTimeDisplay, Text } from '@pega/cosmos-react-core';\nimport * as checkIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/check.icon';\n\nimport Steps from './Steps';\nimport { StagesProps } from './Stages.types';\nimport { StyledDateTimeDisplay, StyledInnerStep, StyledSteps } from './Stages.styles';\n\nregisterIcon(checkIcon);\n\nexport interface StepsContainerProps {\n  currentStage: StagesProps['stages'];\n}\n\nconst StepsContainer: FunctionComponent<StepsContainerProps> = ({\n  currentStage\n}: PropsWithoutRef<StepsContainerProps>) => {\n  return (\n    <Flex as={StyledSteps} container={{ direction: 'column' }} item={{ grow: 1 }}>\n      <StyledInnerStep complete={currentStage[0]?.complete}>\n        {currentStage[0]?.complete && <Icon name='check' />}\n        <Text variant='h2'>{currentStage[0]?.name}</Text>\n      </StyledInnerStep>\n      {currentStage[0]?.date && (\n        <DateTimeDisplay\n          as={StyledDateTimeDisplay}\n          value={currentStage[0]?.date}\n          variant='relative'\n          format='short'\n        />\n      )}\n\n      <Steps steps={currentStage[0].steps} />\n    </Flex>\n  );\n};\n\nexport default StepsContainer;\n"]}

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

@@ -0,0 +1,3 @@
+export { StagesProps } from './Stages.types';
+export { default } from './Stages';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Stages/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC"}

package/lib/components/Stages/index.js

@@ -0,0 +1,2 @@
+export { default } from './Stages';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Stages/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC","sourcesContent":["export { StagesProps } from './Stages.types';\nexport { default } from './Stages';\n"]}

package/lib/components/Stakeholders/StakeholderForm.d.ts

@@ -0,0 +1,7 @@
+import type { StakeholdersProps } from './Stakeholders.types';
+interface FormProps extends Pick<StakeholdersProps['form'], 'roles' | 'currentRole' | 'renderer' | 'rendererProps'> {
+    setSelectedRoleNameRef: (selectedRoleName?: string | undefined) => void;
+}
+declare const _default: ({ roles, currentRole, renderer: Renderer, rendererProps, setSelectedRoleNameRef }: FormProps) => JSX.Element;
+export default _default;
+//# sourceMappingURL=StakeholderForm.d.ts.map

package/lib/components/Stakeholders/StakeholderForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StakeholderForm.d.ts","sourceRoot":"","sources":["../../../src/components/Stakeholders/StakeholderForm.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAQ,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAEpE,UAAU,SACR,SAAQ,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,EAAE,OAAO,GAAG,aAAa,GAAG,UAAU,GAAG,eAAe,CAAC;IAC/F,sBAAsB,EAAE,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;CACzE;4GAQE,SAAS;AANZ,wBA0FE"}

package/lib/components/Stakeholders/StakeholderForm.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { ComboBox, RadioButtonGroup, RadioButton, Flex, useI18n, Input, getFocusables } from '@pega/cosmos-react-core';
+export default ({ roles, currentRole, renderer: Renderer, rendererProps, setSelectedRoleNameRef }) => {
+    const contentRef = useRef(null);
+    const t = useI18n();
+    const [selectedRoleName, setSelectedRoleName] = useState(() => {
+        if (roles) {
+            return (currentRole ? roles.find(role => role.name === currentRole.name) : roles[0])?.name;
+        }
+    });
+    let control = null;
+    if (roles) {
+        const label = t('stakeholders_role');
+        if (roles.length > 3) {
+            const items = roles.map(role => {
+                return {
+                    id: role.name,
+                    primary: role.name,
+                    selected: role.name === selectedRoleName
+                };
+            });
+            const selected = items.find(item => item.selected);
+            control = (_jsx(ComboBox, { label: label, selected: selected ? { items: { id: selected.id, text: selected.primary } } : undefined, menu: {
+                    mode: 'single-select',
+                    items,
+                    onItemClick: setSelectedRoleName
+                } }, void 0));
+        }
+        else {
+            control = (_jsx(RadioButtonGroup, { label: label, name: 'role', inline: true, onChange: e => {
+                    setSelectedRoleName(e.target.value);
+                }, children: roles.map(role => (_jsx(RadioButton, { label: role.name, value: role.name, checked: role.name === selectedRoleName }, role.name))) }, void 0));
+        }
+    }
+    else if (currentRole) {
+        control = (_jsx(Input, { readOnly: true, label: t('stakeholders_role'), value: currentRole.name, info: currentRole.description }, void 0));
+    }
+    useEffect(() => {
+        getFocusables(contentRef)[0]?.focus();
+    }, []);
+    useEffect(() => {
+        if (!roles)
+            return;
+        setSelectedRoleNameRef(selectedRoleName);
+    }, [selectedRoleName]);
+    return (_jsxs(Flex, { container: { direction: 'column', gap: 2 }, ref: contentRef, children: [control, _jsx(Renderer, { ...rendererProps, selectedRoleName: selectedRoleName }, void 0)] }, void 0));
+};
+//# sourceMappingURL=StakeholderForm.js.map

package/lib/components/Stakeholders/StakeholderForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StakeholderForm.js","sourceRoot":"","sources":["../../../src/components/Stakeholders/StakeholderForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport {\n  ComboBox,\n  RadioButtonGroup,\n  RadioButton,\n  Flex,\n  useI18n,\n  Input,\n  getFocusables\n} from '@pega/cosmos-react-core';\n\nimport type { Role, StakeholdersProps } from './Stakeholders.types';\n\ninterface FormProps\n  extends Pick<StakeholdersProps['form'], 'roles' | 'currentRole' | 'renderer' | 'rendererProps'> {\n  setSelectedRoleNameRef: (selectedRoleName?: string | undefined) => void;\n}\n\nexport default ({\n  roles,\n  currentRole,\n  renderer: Renderer,\n  rendererProps,\n  setSelectedRoleNameRef\n}: FormProps) => {\n  const contentRef = useRef<HTMLElement>(null);\n  const t = useI18n();\n\n  const [selectedRoleName, setSelectedRoleName] = useState<Role['name'] | undefined>(() => {\n    if (roles) {\n      return (currentRole ? roles.find(role => role.name === currentRole.name) : roles[0])?.name;\n    }\n  });\n\n  let control: JSX.Element | null = null;\n\n  if (roles) {\n    const label = t('stakeholders_role');\n\n    if (roles.length > 3) {\n      const items = roles.map(role => {\n        return {\n          id: role.name,\n          primary: role.name,\n          selected: role.name === selectedRoleName\n        };\n      });\n\n      const selected = items.find(item => item.selected);\n\n      control = (\n        <ComboBox\n          label={label}\n          selected={selected ? { items: { id: selected.id, text: selected.primary } } : undefined}\n          menu={{\n            mode: 'single-select',\n            items,\n            onItemClick: setSelectedRoleName\n          }}\n        />\n      );\n    } else {\n      control = (\n        <RadioButtonGroup\n          label={label}\n          name='role'\n          inline\n          onChange={e => {\n            setSelectedRoleName(e.target.value);\n          }}\n        >\n          {roles.map(role => (\n            <RadioButton\n              key={role.name}\n              label={role.name}\n              value={role.name}\n              checked={role.name === selectedRoleName}\n            />\n          ))}\n        </RadioButtonGroup>\n      );\n    }\n  } else if (currentRole) {\n    control = (\n      <Input\n        readOnly\n        label={t('stakeholders_role')}\n        value={currentRole.name}\n        info={currentRole.description}\n      />\n    );\n  }\n\n  useEffect(() => {\n    getFocusables(contentRef)[0]?.focus();\n  }, []);\n\n  useEffect(() => {\n    if (!roles) return;\n    setSelectedRoleNameRef(selectedRoleName);\n  }, [selectedRoleName]);\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }} ref={contentRef}>\n      {control}\n      <Renderer {...rendererProps} selectedRoleName={selectedRoleName} />\n    </Flex>\n  );\n};\n"]}

package/lib/components/Stakeholders/Stakeholders.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stakeholders.d.ts","sourceRoot":"","sources":["../../../src/components/Stakeholders/Stakeholders.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EASlB,MAAM,OAAO,CAAC;AAmBf,OAAO,KAAK,EAAU,YAAY,EAA0B,MAAM,yBAAyB,CAAC;AAE5F,OAAO,KAAK,EAAQ,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAmBpE,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CA8TrE,CAAC;AAEF,eAAe,YAAY,CAAC"}