@pega/cosmos-react-build 5.0.0-dev.4.7 → 5.0.0-dev.4.9

package/lib/components/LifeCycle/Stage.js

@@ -1,232 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
-import { readableColor } from 'polished';
-import { Flex, Actions, defaultThemeProp, useDirection, StyledButton, Icon, useI18n } from '@pega/cosmos-react-core';
-export const StyledWrapper = styled.div `
-  overflow: hidden;
-`;
-StyledWrapper.defaultProps = defaultThemeProp;
-export const StyledStageButton = styled.button(({ error, theme }) => {
-    return css `
-    height: ${theme.components.button.height};
-    outline: none;
-    border: none;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    text-align: start;
-    margin-inline-start: ${theme.base.spacing};
-
-    ${error &&
-        css `
-      margin-inline-start: 0;
-    `}
-
-    &:hover {
-      cursor: pointer;
-    }
-
-    &:disabled {
-      cursor: not-allowed;
-    }
-  `;
-});
-StyledStageButton.defaultProps = defaultThemeProp;
-export const StyledStageActions = styled.div `
-  z-index: 2;
-`;
-StyledStageActions.defaultProps = defaultThemeProp;
-export const StyledWarnIcon = styled(Icon)(({ theme }) => {
-    return css `
-    margin-inline: calc(0.5 * ${theme.base.spacing});
-
-    &:hover {
-      cursor: pointer;
-    }
-  `;
-});
-StyledWarnIcon.defaultProps = defaultThemeProp;
-export const StyledStage = styled.div(({ stageInfo, theme, status, error }) => {
-    const { visual: { bgColor, tailPointed, headPointed } } = stageInfo;
-    const { rtl } = useDirection();
-    const contrastColor = readableColor(bgColor);
-    const roundedEndsStyles = css `
-    content: '';
-    position: absolute;
-    display: block;
-    width: calc(3 * ${theme.base.spacing});
-    height: calc(3 * ${theme.base.spacing});
-    top: calc(1 * ${theme.base.spacing});
-    border: 0;
-    border-inline-end: 0.0625rem solid transparent;
-  `;
-    return css `
-    position: relative;
-    padding: calc(0.5 * ${theme.base.spacing});
-    background: ${bgColor};
-    border: 0.0625rem solid transparent;
-    width: 100%;
-
-    &:hover {
-      cursor: pointer;
-    }
-
-    &:focus-within {
-      border: 0.0625rem solid ${theme.base.palette.interactive};
-
-      ${headPointed &&
-        css `
-        &::after {
-          border-inline-end: 0.0625rem solid ${theme.base.palette.interactive};
-          ${rtl
-            ? css `
-                border-block-start: 0.0625rem solid ${theme.base.palette.interactive};
-              `
-            : css `
-                border-block-end: 0.0625rem solid ${theme.base.palette.interactive};
-              `}
-        }
-      `}
-
-      ${tailPointed &&
-        css `
-        &::before {
-          border-inline-end: 0.0625rem solid ${theme.base.palette.interactive};
-          ${rtl
-            ? css `
-                border-block-end: 0.0625rem solid ${theme.base.palette.interactive};
-              `
-            : css `
-                border-block-start: 0.0625rem solid ${theme.base.palette.interactive};
-              `}
-        }
-      `}
-    }
-
-    ${headPointed &&
-        css `
-      &::after {
-        ${roundedEndsStyles}
-        z-index: 1;
-        background: inherit;
-        transform: rotateZ(-45deg) skew(-15deg, -15deg);
-        inset-inline-end: calc(1.6 * ${theme.base.spacing} * -1);
-        border-block-end: 0.0625rem solid transparent;
-        ${rtl
-            ? css `
-              border-radius: calc(0.75 * ${theme.base['border-radius']}) 0.1rem 0.1rem 0.1rem;
-            `
-            : css `
-              border-radius: 0.0625rem 0.075rem calc(0.75 * ${theme.base['border-radius']})
-                0.0625rem;
-            `}
-      }
-    `}
-
-    ${tailPointed &&
-        css `
-      ${!error &&
-            css `
-        ${StyledStageButton} {
-          margin-inline-start: calc(1.5 * ${theme.base.spacing});
-        }
-      `}
-
-      ${error &&
-            css `
-        ${StyledWarnIcon} {
-          margin-inline-start: ${theme.base.spacing};
-        }
-      `}
-
-      &::before {
-        ${roundedEndsStyles}
-        background: ${theme.base.palette['app-background']};
-        transform: rotateZ(45deg) skew(15deg, 15deg);
-        inset-inline-start: calc(-1.6 * ${theme.base.spacing});
-        ${rtl
-            ? css `
-              border-block-end: 0.0625rem solid transparent;
-              border-radius: 0.0625rem 1rem 0.0625rem calc(0.75 * ${theme.base['border-radius']});
-            `
-            : css `
-              border-block-start: 0.0625rem solid transparent;
-              border-radius: 0.0625rem calc(0.75 * ${theme.base['border-radius']}) 0.0625rem 1rem;
-            `}
-      }
-    `}
-
-    ${StyledWarnIcon} {
-      color: ${contrastColor};
-    }
-
-    ${StyledStageActions} {
-      & > ${StyledButton} {
-        color: ${contrastColor};
-      }
-    }
-
-    ${StyledStageButton} {
-      color: ${contrastColor};
-      ${!status &&
-        css `
-        background: ${bgColor};
-      `}
-    }
-  `;
-});
-StyledStage.defaultProps = defaultThemeProp;
-const Stage = forwardRef(function Stage({ value, actions, stageInfo, onClick, id, item, error, ...restProps }, ref) {
-    const t = useI18n();
-    const onStageClick = (e) => {
-        const actionParam = {
-            value,
-            stage: item,
-            type: 'Stage'
-        };
-        onClick?.(actionParam, e);
-    };
-    const onActionItemClick = (actionId, e) => {
-        const param = {
-            stage: item
-        };
-        if (actions) {
-            let actionsList = [];
-            if (Array.isArray(actions)) {
-                actionsList = actions;
-            }
-            else {
-                actionsList = actions[item.type];
-            }
-            actionsList?.forEach((actionItem) => {
-                if (actionItem.id === actionId) {
-                    actionItem.onClick?.(param, e);
-                }
-            });
-        }
-    };
-    // Deep copy of actions object is required to provide consistent callback objects on actions
-    const actionsClone = [];
-    if (actions) {
-        let actionsList = [];
-        if (Array.isArray(actions)) {
-            actionsList = actions;
-        }
-        else {
-            actionsList = actions[item.type];
-        }
-        actionsList.forEach(actionItem => {
-            const actionCloneItem = {};
-            Object.keys(actionItem).forEach((key) => {
-                actionCloneItem[key] = actionItem[key];
-            });
-            actionCloneItem.onClick = onActionItemClick;
-            actionsClone.push(actionCloneItem);
-            return actionItem;
-        });
-    }
-    return (_jsxs(Flex, { ...restProps, container: { inline: true, alignItems: 'center' }, as: StyledStage, ref: ref, error: error, stageInfo: stageInfo, id: item.id, "aria-label": error ? t('stage_name_error', [value]) : undefined, children: [error && _jsx(StyledWarnIcon, { name: 'warn-solid' }), _jsx(Flex, { as: StyledWrapper, container: { inline: true }, item: { grow: 1 }, onClick: onStageClick, children: _jsx(StyledStageButton, { error: error, "aria-label": error ? undefined : t('stage_name', [value]), children: value }) }), _jsx(StyledStageActions, { children: actionsClone && _jsx(Actions, { items: actionsClone, menuAt: 2, iconOnly: true }) })] }));
-});
-export default Stage;
-//# sourceMappingURL=Stage.js.map

package/lib/components/LifeCycle/Stage.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Stage.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/Stage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithChildren, Ref, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n  Flex,\n  BaseProps,\n  ForwardProps,\n  Actions,\n  defaultThemeProp,\n  useDirection,\n  Action,\n  StyledButton,\n  Icon,\n  useI18n\n} from '@pega/cosmos-react-core';\n\nimport {\n  LifeCycleAction,\n  LifeCycleActionParam,\n  StageInfo,\n  StageItemProps,\n  StageProps\n} from './LifeCycle.types';\n\nexport interface StageComponentProps extends BaseProps, StageProps {\n  ref?: Ref<HTMLDivElement>;\n  /** Pass text for the task. */\n  value: string;\n  /** unique id of the component */\n  id: string;\n  /** Controls the styling of the stage. */\n  stageInfo: StageInfo;\n  /** Full data object which can be passed to the callback */\n  item: StageItemProps;\n  /** The status is used to show the input error status and the info on tooltip in case of error */\n  error?: string;\n}\n\nexport const StyledWrapper = styled.div`\n  overflow: hidden;\n`;\n\nStyledWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledStageButton = styled.button<{\n  error: string | undefined;\n}>(({ error, theme }) => {\n  return css`\n    height: ${theme.components.button.height};\n    outline: none;\n    border: none;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    text-align: start;\n    margin-inline-start: ${theme.base.spacing};\n\n    ${error &&\n    css`\n      margin-inline-start: 0;\n    `}\n\n    &:hover {\n      cursor: pointer;\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n  `;\n});\n\nStyledStageButton.defaultProps = defaultThemeProp;\n\nexport const StyledStageActions = styled.div`\n  z-index: 2;\n`;\n\nStyledStageActions.defaultProps = defaultThemeProp;\n\nexport const StyledWarnIcon = styled(Icon)(({ theme }) => {\n  return css`\n    margin-inline: calc(0.5 * ${theme.base.spacing});\n\n    &:hover {\n      cursor: pointer;\n    }\n  `;\n});\n\nStyledWarnIcon.defaultProps = defaultThemeProp;\n\nexport const StyledStage = styled.div<\n  Pick<StageComponentProps, 'stageInfo'> & {\n    status: boolean;\n    error: string;\n  }\n>(({ stageInfo, theme, status, error }) => {\n  const {\n    visual: { bgColor, tailPointed, headPointed }\n  } = stageInfo;\n\n  const { rtl } = useDirection();\n  const contrastColor = readableColor(bgColor);\n  const roundedEndsStyles = css`\n    content: '';\n    position: absolute;\n    display: block;\n    width: calc(3 * ${theme.base.spacing});\n    height: calc(3 * ${theme.base.spacing});\n    top: calc(1 * ${theme.base.spacing});\n    border: 0;\n    border-inline-end: 0.0625rem solid transparent;\n  `;\n\n  return css`\n    position: relative;\n    padding: calc(0.5 * ${theme.base.spacing});\n    background: ${bgColor};\n    border: 0.0625rem solid transparent;\n    width: 100%;\n\n    &:hover {\n      cursor: pointer;\n    }\n\n    &:focus-within {\n      border: 0.0625rem solid ${theme.base.palette.interactive};\n\n      ${headPointed &&\n      css`\n        &::after {\n          border-inline-end: 0.0625rem solid ${theme.base.palette.interactive};\n          ${rtl\n            ? css`\n                border-block-start: 0.0625rem solid ${theme.base.palette.interactive};\n              `\n            : css`\n                border-block-end: 0.0625rem solid ${theme.base.palette.interactive};\n              `}\n        }\n      `}\n\n      ${tailPointed &&\n      css`\n        &::before {\n          border-inline-end: 0.0625rem solid ${theme.base.palette.interactive};\n          ${rtl\n            ? css`\n                border-block-end: 0.0625rem solid ${theme.base.palette.interactive};\n              `\n            : css`\n                border-block-start: 0.0625rem solid ${theme.base.palette.interactive};\n              `}\n        }\n      `}\n    }\n\n    ${headPointed &&\n    css`\n      &::after {\n        ${roundedEndsStyles}\n        z-index: 1;\n        background: inherit;\n        transform: rotateZ(-45deg) skew(-15deg, -15deg);\n        inset-inline-end: calc(1.6 * ${theme.base.spacing} * -1);\n        border-block-end: 0.0625rem solid transparent;\n        ${rtl\n          ? css`\n              border-radius: calc(0.75 * ${theme.base['border-radius']}) 0.1rem 0.1rem 0.1rem;\n            `\n          : css`\n              border-radius: 0.0625rem 0.075rem calc(0.75 * ${theme.base['border-radius']})\n                0.0625rem;\n            `}\n      }\n    `}\n\n    ${tailPointed &&\n    css`\n      ${!error &&\n      css`\n        ${StyledStageButton} {\n          margin-inline-start: calc(1.5 * ${theme.base.spacing});\n        }\n      `}\n\n      ${error &&\n      css`\n        ${StyledWarnIcon} {\n          margin-inline-start: ${theme.base.spacing};\n        }\n      `}\n\n      &::before {\n        ${roundedEndsStyles}\n        background: ${theme.base.palette['app-background']};\n        transform: rotateZ(45deg) skew(15deg, 15deg);\n        inset-inline-start: calc(-1.6 * ${theme.base.spacing});\n        ${rtl\n          ? css`\n              border-block-end: 0.0625rem solid transparent;\n              border-radius: 0.0625rem 1rem 0.0625rem calc(0.75 * ${theme.base['border-radius']});\n            `\n          : css`\n              border-block-start: 0.0625rem solid transparent;\n              border-radius: 0.0625rem calc(0.75 * ${theme.base['border-radius']}) 0.0625rem 1rem;\n            `}\n      }\n    `}\n\n    ${StyledWarnIcon} {\n      color: ${contrastColor};\n    }\n\n    ${StyledStageActions} {\n      & > ${StyledButton} {\n        color: ${contrastColor};\n      }\n    }\n\n    ${StyledStageButton} {\n      color: ${contrastColor};\n      ${!status &&\n      css`\n        background: ${bgColor};\n      `}\n    }\n  `;\n});\n\nStyledStage.defaultProps = defaultThemeProp;\n\nconst Stage: FunctionComponent<StageComponentProps & ForwardProps> = forwardRef(function Stage(\n  {\n    value,\n    actions,\n    stageInfo,\n    onClick,\n    id,\n    item,\n    error,\n    ...restProps\n  }: PropsWithChildren<StageComponentProps>,\n  ref: StageComponentProps['ref']\n) {\n  const t = useI18n();\n\n  const onStageClick = (e: MouseEvent) => {\n    const actionParam: LifeCycleActionParam = {\n      value,\n      stage: item,\n      type: 'Stage'\n    };\n    onClick?.(actionParam, e);\n  };\n\n  const onActionItemClick = (\n    actionId: string,\n    e: MouseEvent<HTMLInputElement | HTMLAnchorElement | HTMLButtonElement>\n  ) => {\n    const param: LifeCycleActionParam = {\n      stage: item\n    };\n\n    if (actions) {\n      let actionsList: LifeCycleAction[] = [];\n\n      if (Array.isArray(actions)) {\n        actionsList = actions;\n      } else {\n        actionsList = actions[item.type];\n      }\n\n      actionsList?.forEach((actionItem: LifeCycleAction) => {\n        if (actionItem.id === actionId) {\n          actionItem.onClick?.(param, e);\n        }\n      });\n    }\n  };\n\n  // Deep copy of actions object is required to provide consistent callback objects on actions\n  const actionsClone: Action[] = [];\n\n  if (actions) {\n    let actionsList: LifeCycleAction[] = [];\n    if (Array.isArray(actions)) {\n      actionsList = actions;\n    } else {\n      actionsList = actions[item.type];\n    }\n\n    actionsList.forEach(actionItem => {\n      const actionCloneItem = {} as Action;\n      Object.keys(actionItem).forEach((key: string) => {\n        actionCloneItem[key] = actionItem[key];\n      });\n      actionCloneItem.onClick = onActionItemClick;\n      actionsClone.push(actionCloneItem);\n      return actionItem;\n    });\n  }\n\n  return (\n    <Flex\n      {...restProps}\n      container={{ inline: true, alignItems: 'center' }}\n      as={StyledStage}\n      ref={ref}\n      error={error}\n      stageInfo={stageInfo}\n      id={item.id}\n      aria-label={error ? t('stage_name_error', [value]) : undefined}\n    >\n      {error && <StyledWarnIcon name='warn-solid' />}\n      <Flex\n        as={StyledWrapper}\n        container={{ inline: true }}\n        item={{ grow: 1 }}\n        onClick={onStageClick}\n      >\n        <StyledStageButton error={error} aria-label={error ? undefined : t('stage_name', [value])}>\n          {value}\n        </StyledStageButton>\n      </Flex>\n      <StyledStageActions>\n        {actionsClone && <Actions items={actionsClone} menuAt={2} iconOnly />}\n      </StyledStageActions>\n    </Flex>\n  );\n});\n\nexport default Stage;\n"]}

package/lib/components/LifeCycle/Step.d.ts

@@ -1,40 +0,0 @@
-import { FunctionComponent } from 'react';
-import { BaseProps, ForwardProps } from '@pega/cosmos-react-core';
-import { ColorName } from '../../utils';
-import { TaskItemProps, StepItemProps, StageItemProps, CategoryItemProps, StepProps } from './LifeCycle.types';
-interface StepComponentProps extends BaseProps, StepProps {
-    /** Pass text for the step. */
-    value: string;
-    /** unique id of step */
-    id: string;
-    /** Determines the visual for icon, color and label to render.
-     * This color is passed as a variant and accessible colors are used to display.
-     * Icon and label are passed as normal string */
-    visual: {
-        imgurl: string;
-        color: ColorName;
-        icon: string;
-        title: string;
-    };
-    /** Determines the variant and label for the badges */
-    badge?: StepItemProps['status'];
-    /** The status is used to show the input error status and the info on tooltip in case of error */
-    error?: string;
-    /** Data of the steps which can be used to send the full info back */
-    item: StepItemProps;
-    stageItem: StageItemProps;
-    taskItem: TaskItemProps;
-    categoryItem: CategoryItemProps;
-}
-export declare const StyledStepType: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<StepComponentProps, "visual">, never>;
-export declare const StyledStepBadge: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledStepWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    hasFocus: boolean;
-    selected: boolean;
-}, never>;
-export declare const StyledStep: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledStepButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledWarnIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@pega/cosmos-react-core").IconProps>, import("styled-components").DefaultTheme, {}, never>;
-declare const Step: FunctionComponent<StepComponentProps & ForwardProps>;
-export default Step;
-//# sourceMappingURL=Step.d.ts.map

package/lib/components/LifeCycle/Step.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/Step.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,iBAAiB,EAA2C,MAAM,OAAO,CAAC;AAI7F,OAAO,EAGL,SAAS,EACT,YAAY,EAUb,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAY,SAAS,EAAE,MAAM,aAAa,CAAC;AAElD,OAAO,EACL,aAAa,EACb,aAAa,EACb,cAAc,EACd,iBAAiB,EAEjB,SAAS,EACV,MAAM,mBAAmB,CAAC;AAG3B,UAAU,kBAAmB,SAAQ,SAAS,EAAE,SAAS;IACvD,8BAA8B;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,wBAAwB;IACxB,EAAE,EAAE,MAAM,CAAC;IACX;;oDAEgD;IAChD,MAAM,EAAE;QACN,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,SAAS,CAAC;QACjB,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,sDAAsD;IACtD,KAAK,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IAChC,iGAAiG;IACjG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qEAAqE;IACrE,IAAI,EAAE,aAAa,CAAC;IACpB,SAAS,EAAE,cAAc,CAAC;IAC1B,QAAQ,EAAE,aAAa,CAAC;IACxB,YAAY,EAAE,iBAAiB,CAAC;CACjC;AAED,eAAO,MAAM,cAAc,yIAkB1B,CAAC;AAIF,eAAO,MAAM,eAAe,yGAa1B,CAAC;AAIH,eAAO,MAAM,iBAAiB;cAClB,OAAO;cACP,OAAO;SAuBjB,CAAC;AAIH,eAAO,MAAM,UAAU,yGAUrB,CAAC;AAYH,eAAO,MAAM,gBAAgB,4GAkB3B,CAAC;AAIH,eAAO,MAAM,cAAc,0LASzB,CAAC;AAIH,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CA6H9D,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/lib/components/LifeCycle/Step.js

@@ -1,170 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useContext } from 'react';
-import styled, { css } from 'styled-components';
-import { readableColor } from 'polished';
-import { Flex, defaultThemeProp, Icon, Status, Actions, useI18n, Avatar, useUID, Tooltip, useElement } from '@pega/cosmos-react-core';
-import { colorMap } from '../../utils';
-import LifeCycleContext from './LifeCycleContext';
-export const StyledStepType = styled.div(({ visual, theme }) => {
-    const bgColor = colorMap[visual.color];
-    const contrastColor = readableColor(bgColor);
-    return visual.imgurl
-        ? css `
-          height: 2rem;
-          padding-inline-end: calc(0.25 * ${theme.base.spacing});
-        `
-        : css `
-          background: ${bgColor};
-          margin: calc(0.5 * ${theme.base.spacing});
-          padding: 0 calc(0.5 * ${theme.base.spacing});
-          color: ${contrastColor};
-          text-align: center;
-          border-radius: calc(0.25 * ${theme.base['border-radius']});
-        `;
-});
-StyledStepType.defaultProps = defaultThemeProp;
-export const StyledStepBadge = styled.div(({ theme }) => {
-    return css `
-    padding: 0 calc(0.5 * ${theme.base.spacing});
-    justify-content: flex-end;
-    width: auto;
-    max-width: calc(50% - ${theme.base.spacing});
-
-    > span {
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
-    }
-  `;
-});
-StyledStepBadge.defaultProps = defaultThemeProp;
-export const StyledStepWrapper = styled.div(({ hasFocus, theme, selected }) => {
-    return css `
-    width: 100%;
-    margin: 0 0 calc(0.5 * ${theme.base.spacing});
-    border: 0.125rem solid transparent;
-    border-radius: calc(0.5 * ${theme.base['border-radius']});
-
-    ${hasFocus &&
-        css `
-      box-shadow: ${theme.base.shadow.focus};
-    `}
-
-    &:hover {
-      cursor: pointer;
-    }
-    ${selected &&
-        css `
-      &[aria-current='step'] {
-        border-color: ${theme.base.palette.interactive};
-      }
-    `}
-  `;
-});
-StyledStepWrapper.defaultProps = defaultThemeProp;
-export const StyledStep = styled.div(({ theme }) => {
-    return css `
-    background: ${theme.base.palette['secondary-background']};
-    border: 0.125rem solid transparent;
-    border-radius: calc(0.5 * ${theme.base['border-radius']});
-
-    &:hover {
-      cursor: pointer;
-    }
-  `;
-});
-StyledStep.defaultProps = defaultThemeProp;
-const StyledStepButtonWrapper = styled.div(({ theme }) => {
-    return css `
-    border-radius: calc(0.5 * ${theme.base['border-radius']});
-  `;
-});
-StyledStepButtonWrapper.defaultProps = defaultThemeProp;
-export const StyledStepButton = styled.button(({ theme }) => {
-    return css `
-    border: none;
-    height: ${theme.components.button.height};
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    text-align: start;
-    background: ${theme.base.palette['secondary-background']};
-
-    &:hover {
-      cursor: pointer;
-    }
-
-    &:focus {
-      outline: none;
-    }
-  `;
-});
-StyledStepButton.defaultProps = defaultThemeProp;
-export const StyledWarnIcon = styled(Icon)(({ theme }) => {
-    return css `
-    color: ${theme.base.palette.urgent};
-    margin-inline: ${theme.base.spacing};
-
-    &:hover {
-      cursor: pointer;
-    }
-  `;
-});
-StyledWarnIcon.defaultProps = defaultThemeProp;
-const Step = ({ value, id, visual, actions, badge, error, categoryItem, item, stageItem, taskItem, onClick, ...restProps }) => {
-    const t = useI18n();
-    const { selectedItemId } = useContext(LifeCycleContext);
-    const [stepHasFocus, setStepHasFocus] = useState(false);
-    // Need to check the value with statusProps
-    const onActionItemClick = (actionId, e) => {
-        e.stopPropagation();
-        const param = {
-            task: taskItem,
-            stage: stageItem,
-            step: item,
-            category: categoryItem
-        };
-        actions?.forEach(actionItem => {
-            if (actionItem.id === actionId) {
-                actionItem.onClick(param, e);
-            }
-        });
-    };
-    // Deep copy of actions is required to provide consistent callback objects on actions
-    const actionsClone = [];
-    const buttonDescriptionId = useUID();
-    if (actions) {
-        actions.forEach(actionItem => {
-            const actionCloneItem = {};
-            Object.keys(actionItem).forEach((key) => {
-                actionCloneItem[key] = actionItem[key];
-            });
-            actionCloneItem.onClick = onActionItemClick;
-            if (error)
-                actionsClone.push(actionCloneItem);
-            else
-                actionsClone.push({ ...actionCloneItem, 'aria-describedby': buttonDescriptionId });
-            return actionItem;
-        });
-    }
-    const onStepClick = (e) => {
-        e.stopPropagation();
-        const actionParam = {
-            value,
-            step: item,
-            task: taskItem,
-            category: categoryItem,
-            stage: stageItem,
-            type: 'Step'
-        };
-        onClick?.(actionParam, e);
-    };
-    const [stepLabelEl, setStepLabelEl] = useElement(null);
-    return (_jsxs(Flex, { as: StyledStepWrapper, id: `${id}-stepWrapper`, container: { inline: true, alignItems: 'center' }, "aria-current": selectedItemId === id ? 'step' : undefined, hasFocus: stepHasFocus && selectedItemId !== id, selected: selectedItemId === id, children: [error && _jsx(StyledWarnIcon, { name: 'warn-solid' }), _jsxs(Flex, { as: StyledStep, container: { inline: true }, id: id, item: { grow: 1 }, onClick: onStepClick, children: [_jsxs(StyledStepType, { visual: visual, children: [visual.imgurl.length > 0 && (_jsx(Avatar, { name: visual.title, imageSrc: visual?.imgurl, shape: 'squircle', size: 'm' })), !visual.imgurl && _jsx(Icon, { name: visual.icon })] }), _jsxs(Flex, { as: StyledStepButtonWrapper, item: { grow: 1 }, container: { inline: true, alignItems: 'center', justify: 'between' }, id: buttonDescriptionId, children: [_jsxs(StyledStepButton, { ...restProps, onFocus: () => {
-                                    setStepHasFocus(true);
-                                }, onBlur: () => {
-                                    setStepHasFocus(false);
-                                }, "aria-label": t(error ? 'step_name_error' : 'step_name', [value]), ref: setStepLabelEl, children: [value, _jsx(Tooltip, { smart: true, target: stepLabelEl, showDelay: 'none', hideDelay: 'none', children: value })] }), badge?.type && (_jsx(Flex, { as: StyledStepBadge, container: { inline: true, alignItems: 'center' }, children: _jsx(Status, { variant: badge?.type || 'success', children: badge?.label }) }))] }), actionsClone && _jsx(Actions, { items: actionsClone, menuAt: 2, iconOnly: true })] })] }));
-};
-export default Step;
-//# sourceMappingURL=Step.js.map

package/lib/components/LifeCycle/Step.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Step.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/Step.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, FunctionComponent, PropsWithoutRef, MouseEvent, useContext } from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n  Flex,\n  defaultThemeProp,\n  BaseProps,\n  ForwardProps,\n  Icon,\n  Status,\n  Actions,\n  useI18n,\n  Avatar,\n  Action,\n  useUID,\n  Tooltip,\n  useElement\n} from '@pega/cosmos-react-core';\n\nimport { colorMap, ColorName } from '../../utils';\n\nimport {\n  TaskItemProps,\n  StepItemProps,\n  StageItemProps,\n  CategoryItemProps,\n  LifeCycleActionParam,\n  StepProps\n} from './LifeCycle.types';\nimport LifeCycleContext from './LifeCycleContext';\n\ninterface StepComponentProps extends BaseProps, StepProps {\n  /** Pass text for the step. */\n  value: string;\n  /** unique id of step */\n  id: string;\n  /** Determines the visual for icon, color and label to render.\n   * This color is passed as a variant and accessible colors are used to display.\n   * Icon and label are passed as normal string */\n  visual: {\n    imgurl: string;\n    color: ColorName;\n    icon: string;\n    title: string;\n  };\n  /** Determines the variant and label for the badges */\n  badge?: StepItemProps['status'];\n  /** The status is used to show the input error status and the info on tooltip in case of error */\n  error?: string;\n  /** Data of the steps which can be used to send the full info back */\n  item: StepItemProps;\n  stageItem: StageItemProps;\n  taskItem: TaskItemProps;\n  categoryItem: CategoryItemProps;\n}\n\nexport const StyledStepType = styled.div<Pick<StepComponentProps, 'visual'>>(\n  ({ visual, theme }) => {\n    const bgColor = colorMap[visual.color];\n    const contrastColor = readableColor(bgColor);\n    return visual.imgurl\n      ? css`\n          height: 2rem;\n          padding-inline-end: calc(0.25 * ${theme.base.spacing});\n        `\n      : css`\n          background: ${bgColor};\n          margin: calc(0.5 * ${theme.base.spacing});\n          padding: 0 calc(0.5 * ${theme.base.spacing});\n          color: ${contrastColor};\n          text-align: center;\n          border-radius: calc(0.25 * ${theme.base['border-radius']});\n        `;\n  }\n);\n\nStyledStepType.defaultProps = defaultThemeProp;\n\nexport const StyledStepBadge = styled.div(({ theme }) => {\n  return css`\n    padding: 0 calc(0.5 * ${theme.base.spacing});\n    justify-content: flex-end;\n    width: auto;\n    max-width: calc(50% - ${theme.base.spacing});\n\n    > span {\n      white-space: nowrap;\n      text-overflow: ellipsis;\n      overflow: hidden;\n    }\n  `;\n});\n\nStyledStepBadge.defaultProps = defaultThemeProp;\n\nexport const StyledStepWrapper = styled.div<{\n  hasFocus: boolean;\n  selected: boolean;\n}>(({ hasFocus, theme, selected }) => {\n  return css`\n    width: 100%;\n    margin: 0 0 calc(0.5 * ${theme.base.spacing});\n    border: 0.125rem solid transparent;\n    border-radius: calc(0.5 * ${theme.base['border-radius']});\n\n    ${hasFocus &&\n    css`\n      box-shadow: ${theme.base.shadow.focus};\n    `}\n\n    &:hover {\n      cursor: pointer;\n    }\n    ${selected &&\n    css`\n      &[aria-current='step'] {\n        border-color: ${theme.base.palette.interactive};\n      }\n    `}\n  `;\n});\n\nStyledStepWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledStep = styled.div(({ theme }) => {\n  return css`\n    background: ${theme.base.palette['secondary-background']};\n    border: 0.125rem solid transparent;\n    border-radius: calc(0.5 * ${theme.base['border-radius']});\n\n    &:hover {\n      cursor: pointer;\n    }\n  `;\n});\n\nStyledStep.defaultProps = defaultThemeProp;\n\nconst StyledStepButtonWrapper = styled.div<{ error: string }>(({ theme }) => {\n  return css`\n    border-radius: calc(0.5 * ${theme.base['border-radius']});\n  `;\n});\n\nStyledStepButtonWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledStepButton = styled.button(({ theme }) => {\n  return css`\n    border: none;\n    height: ${theme.components.button.height};\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    text-align: start;\n    background: ${theme.base.palette['secondary-background']};\n\n    &:hover {\n      cursor: pointer;\n    }\n\n    &:focus {\n      outline: none;\n    }\n  `;\n});\n\nStyledStepButton.defaultProps = defaultThemeProp;\n\nexport const StyledWarnIcon = styled(Icon)(({ theme }) => {\n  return css`\n    color: ${theme.base.palette.urgent};\n    margin-inline: ${theme.base.spacing};\n\n    &:hover {\n      cursor: pointer;\n    }\n  `;\n});\n\nStyledWarnIcon.defaultProps = defaultThemeProp;\n\nconst Step: FunctionComponent<StepComponentProps & ForwardProps> = ({\n  value,\n  id,\n  visual,\n  actions,\n  badge,\n  error,\n  categoryItem,\n  item,\n  stageItem,\n  taskItem,\n  onClick,\n  ...restProps\n}: PropsWithoutRef<StepComponentProps>) => {\n  const t = useI18n();\n  const { selectedItemId } = useContext(LifeCycleContext);\n  const [stepHasFocus, setStepHasFocus] = useState(false);\n\n  // Need to check the value with statusProps\n\n  const onActionItemClick = (\n    actionId: string,\n    e: MouseEvent<HTMLInputElement | HTMLAnchorElement | HTMLButtonElement>\n  ) => {\n    e.stopPropagation();\n    const param: LifeCycleActionParam = {\n      task: taskItem,\n      stage: stageItem,\n      step: item,\n      category: categoryItem\n    };\n    actions?.forEach(actionItem => {\n      if (actionItem.id === actionId) {\n        actionItem.onClick(param, e);\n      }\n    });\n  };\n  // Deep copy of actions is required to provide consistent callback objects on actions\n  const actionsClone: Action[] = [];\n  const buttonDescriptionId: string = useUID();\n\n  if (actions) {\n    actions.forEach(actionItem => {\n      const actionCloneItem = {} as Action;\n      Object.keys(actionItem).forEach((key: string) => {\n        actionCloneItem[key] = actionItem[key];\n      });\n      actionCloneItem.onClick = onActionItemClick;\n      if (error) actionsClone.push(actionCloneItem);\n      else actionsClone.push({ ...actionCloneItem, 'aria-describedby': buttonDescriptionId });\n      return actionItem;\n    });\n  }\n\n  const onStepClick = (e: MouseEvent) => {\n    e.stopPropagation();\n    const actionParam: LifeCycleActionParam = {\n      value,\n      step: item,\n      task: taskItem,\n      category: categoryItem,\n      stage: stageItem,\n      type: 'Step'\n    };\n    onClick?.(actionParam, e);\n  };\n\n  const [stepLabelEl, setStepLabelEl] = useElement<HTMLSpanElement>(null);\n\n  return (\n    <Flex\n      as={StyledStepWrapper}\n      id={`${id}-stepWrapper`}\n      container={{ inline: true, alignItems: 'center' }}\n      aria-current={selectedItemId === id ? 'step' : undefined}\n      hasFocus={stepHasFocus && selectedItemId !== id}\n      selected={selectedItemId === id}\n    >\n      {error && <StyledWarnIcon name='warn-solid' />}\n      <Flex\n        as={StyledStep}\n        container={{ inline: true }}\n        id={id}\n        item={{ grow: 1 }}\n        onClick={onStepClick}\n      >\n        <StyledStepType visual={visual}>\n          {visual.imgurl.length > 0 && (\n            <Avatar name={visual.title} imageSrc={visual?.imgurl} shape='squircle' size='m' />\n          )}\n          {!visual.imgurl && <Icon name={visual.icon} />}\n        </StyledStepType>\n\n        <Flex\n          as={StyledStepButtonWrapper}\n          item={{ grow: 1 }}\n          container={{ inline: true, alignItems: 'center', justify: 'between' }}\n          id={buttonDescriptionId}\n        >\n          <StyledStepButton\n            {...restProps}\n            onFocus={() => {\n              setStepHasFocus(true);\n            }}\n            onBlur={() => {\n              setStepHasFocus(false);\n            }}\n            aria-label={t(error ? 'step_name_error' : 'step_name', [value])}\n            ref={setStepLabelEl}\n          >\n            {value}\n            <Tooltip smart target={stepLabelEl} showDelay='none' hideDelay='none'>\n              {value}\n            </Tooltip>\n          </StyledStepButton>\n          {badge?.type && (\n            <Flex as={StyledStepBadge} container={{ inline: true, alignItems: 'center' }}>\n              <Status variant={badge?.type || 'success'}>{badge?.label}</Status>\n            </Flex>\n          )}\n        </Flex>\n        {actionsClone && <Actions items={actionsClone} menuAt={2} iconOnly />}\n      </Flex>\n    </Flex>\n  );\n};\n\nexport default Step;\n"]}

package/lib/components/LifeCycle/Task.d.ts

@@ -1,34 +0,0 @@
-import { FunctionComponent } from 'react';
-import { BaseProps, ForwardProps } from '@pega/cosmos-react-core';
-import { TaskItemProps, StageItemProps, CategoryItemProps, StepProps, TaskProps } from './LifeCycle.types';
-interface TaskComponentProps extends BaseProps, TaskProps {
-    /** Pass text for the task. */
-    value: string;
-    /** support for an Avatar, Icon, or other supporting visual. */
-    visual: {
-        imgurl: string;
-    };
-    /** Pass task data */
-    item: TaskItemProps;
-    /** The status is used to show the input error status and the info on tooltip in case of error */
-    error?: string;
-    /** Step Props */
-    step?: StepProps;
-    /** Stage data to pass it as callback */
-    stageItem: StageItemProps;
-    /** Category data to pass it as callback */
-    categoryItem: CategoryItemProps;
-    /** unique id of task */
-    id: string;
-}
-export declare const StyledTaskList: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledCardHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledCardContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledTaskButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledTask: import("styled-components").StyledComponent<"article", import("styled-components").DefaultTheme, {
-    hasFocus: boolean;
-}, never>;
-export declare const StyledWarnIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@pega/cosmos-react-core").IconProps>, import("styled-components").DefaultTheme, {}, never>;
-declare const Task: FunctionComponent<TaskComponentProps & ForwardProps>;
-export default Task;
-//# sourceMappingURL=Task.d.ts.map

package/lib/components/LifeCycle/Task.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Task.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/Task.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAKlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAGL,SAAS,EACT,YAAY,EAUb,MAAM,yBAAyB,CAAC;AAKjC,OAAO,EACL,aAAa,EACb,cAAc,EAEd,iBAAiB,EAEjB,SAAS,EACT,SAAS,EACV,MAAM,mBAAmB,CAAC;AAG3B,UAAU,kBAAmB,SAAQ,SAAS,EAAE,SAAS;IACvD,8BAA8B;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,MAAM,EAAE;QACN,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,qBAAqB;IACrB,IAAI,EAAE,aAAa,CAAC;IACpB,iGAAiG;IACjG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wCAAwC;IACxC,SAAS,EAAE,cAAc,CAAC;IAC1B,2CAA2C;IAC3C,YAAY,EAAE,iBAAiB,CAAC;IAChC,wBAAwB;IACxB,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,eAAO,MAAM,cAAc,wGASzB,CAAC;AAIH,eAAO,MAAM,gBAAgB,4GAK3B,CAAC;AAIH,eAAO,MAAM,iBAAiB,yGAI5B,CAAC;AAEH,eAAO,MAAM,gBAAgB,4GAkB3B,CAAC;AAIH,eAAO,MAAM,UAAU;cAA8B,OAAO;SAoB1D,CAAC;AAIH,eAAO,MAAM,cAAc,0LASzB,CAAC;AAIH,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAwK9D,CAAC;AAEF,eAAe,IAAI,CAAC"}