@pega/cosmos-react-build 2.0.0-dev.17.0 → 2.0.0-dev.21.0

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

@@ -1 +1 @@
-{"version":3,"file":"Step.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/Step.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, FunctionComponent, PropsWithoutRef, ChangeEvent, MouseEvent } 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  Tooltip,\n  useElement,\n  Status,\n  FormControlProps,\n  Actions,\n  useI18n,\n  Avatar,\n  StyledTooltip,\n  Action\n} from '@pega/cosmos-react-core';\n\nimport {\n  TaskItemProps,\n  StepItemProps,\n  StageItemProps,\n  CategoryItemProps,\n  LifeCycleAction,\n  LifeCycleActionParam\n} from './LifeCycle.types';\n\nexport interface StepProps extends Omit<FormControlProps, 'status' | 'id'> {\n  /** Pass an array of Action objects to append button(s) inline with the Input. */\n  actions?: LifeCycleAction[];\n  onChange?: (param: LifeCycleActionParam, e: ChangeEvent<HTMLInputElement>) => void;\n}\n\ninterface StepComponentProps extends BaseProps, StepProps {\n  /** Pass text for the step. */\n  value?: string;\n  /** step data id */\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:\n      | 'magenta'\n      | 'studio'\n      | 'congressBlue'\n      | 'Japaneselaurel'\n      | 'violet'\n      | 'yellow'\n      | 'orange'\n      | 'darkyellow';\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<{ color: string; ref: HTMLDivElement; img: string }>(\n  ({ theme, color, img }) => {\n    let bgColor = '';\n    switch (color) {\n      case 'magenta':\n        bgColor = '#AC1361';\n        break;\n      case 'studio':\n        bgColor = '#684AAE';\n        break;\n      case 'congressBlue':\n        bgColor = '#0076d1';\n        break;\n      case 'Japaneselaurel':\n        bgColor = '#27813E';\n        break;\n      case 'violet':\n        bgColor = '#8C479F';\n        break;\n      case 'yellow':\n        bgColor = '#f7a801';\n        break;\n      case 'darkyellow':\n        bgColor = '#f7951c';\n        break;\n      case 'orange':\n        bgColor = '#f46c22';\n        break;\n\n      default:\n        bgColor = '#27813E';\n    }\n\n    const contrastColor = readableColor(bgColor);\n    return img\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\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    > span {\n      white-space: nowrap;\n      text-overflow: ellipsis;\n      overflow: hidden;\n    }\n  `;\n});\n\nconst StyledStepValue = styled.div<{ error: string }>(({ theme, error }) => {\n  return css`\n    border-radius: calc(0.5 * ${theme.base['border-radius']});\n    ${error &&\n    css`\n      background: ${theme.base.colors.red['extra-light']};\n    `}\n  `;\n});\n\nexport const StyledStepValueInput = styled.input<{ error: string | undefined }>(\n  ({ error, theme }) => {\n    return css`\n      height: ${theme.components.input.height};\n      padding: 0 calc(0.5 * ${theme.base.spacing});\n      border: none;\n      border-inline-start: 0.0625rem solid transparent;\n      border-inline-end: 0.0625rem solid transparent;\n      text-overflow: ellipsis;\n      min-width: 40%;\n      outline: none;\n      &:hover {\n        cursor: pointer;\n      }\n      &:disabled {\n        cursor: not-allowed;\n      }\n      ${error\n        ? css`\n            background: ${theme.base.colors.red['extra-light']};\n            &:focus:enabled {\n              border-color: ${theme.base.colors.red.medium};\n            }\n          `\n        : css`\n            background: ${theme.base.palette['secondary-background']};\n            &&:hover {\n              background: ${theme.base.palette['app-background']};\n            }\n            &&:focus:enabled {\n              background: ${theme.base.palette['primary-background']};\n              border-color: ${theme.base.colors.blue.medium};\n            }\n          `}\n    `;\n  }\n);\n\nexport const StyledStepStatus = styled.div<{\n  badge: string;\n  error: string;\n}>(({ theme, badge, error }) => {\n  return css`\n    border: none;\n    ${badge &&\n    css`\n      display: none;\n    `}\n    visibility: hidden;\n    &:hover {\n      cursor: pointer;\n    }\n    &:focus:not([disabled]) {\n      outline: 0.0625rem solid ${theme.base.colors.blue.medium};\n    }\n    ${error &&\n    !badge &&\n    css`\n      visibility: visible;\n    `}\n  `;\n});\n\nexport const StyledStep = styled.div<{ error: string }>(({ theme, error }) => {\n  return css`\n    background: ${theme.base.palette['secondary-background']};\n    border: 0.0625rem solid transparent;\n    border-radius: calc(0.5 * ${theme.base['border-radius']});\n    margin: 0 0 calc(0.5 * ${theme.base.spacing});\n    width: 100%;\n    ${error &&\n    css`\n      border-color: ${theme.base.colors.red.medium};\n      box-shadow: none;\n    `}\n    &:hover {\n      cursor: pointer;\n      ${StyledStepBadge} {\n        ${css`\n          display: none;\n        `}\n      }\n      ${StyledStepStatus} {\n        ${css`\n          visibility: visible;\n          display: inline-block;\n        `}\n      }\n    }\n    &:focus-within {\n      ${!error &&\n      css`\n        border-color: ${theme.base.colors.blue.medium};\n        box-shadow: ${theme.components['form-control'][':focus']['box-shadow']};\n      `}\n      ${StyledStepBadge} {\n        ${css`\n          display: none;\n        `}\n      }\n      ${StyledStepStatus} {\n        ${css`\n          display: inline-block;\n          visibility: visible;\n        `}\n      }\n      ${StyledTooltip} {\n        ${css`\n          visibility: hidden;\n        `}\n      }\n    }\n  `;\n});\n\nStyledStep.defaultProps = defaultThemeProp;\n\nconst Step: FunctionComponent<StepComponentProps & ForwardProps> = ({\n  value,\n  id,\n  visual,\n  actions,\n  badge,\n  error,\n  onChange,\n  categoryItem,\n  item,\n  stageItem,\n  taskItem,\n  ...restProps\n}: PropsWithoutRef<StepComponentProps>) => {\n  const t = useI18n();\n  const [stepValue, setStepValue] = useState(value);\n  const [iconEl, setIconEl] = useElement();\n  const [actionEl, setActionEl] = useElement();\n  const [inputEl, setInputEl] = useElement();\n  const actionsLabel = t('actions');\n  const singleActionLabel = (actions?.[0]?.text as string) ?? '';\n  const tooltipValue = stepValue || error;\n\n  /* Need to check the value with statusProps */\n\n  const onActionItemClick = (\n    actionId: string,\n    e: MouseEvent<HTMLInputElement | HTMLAnchorElement | HTMLButtonElement>\n  ) => {\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\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      actionsClone.push(actionCloneItem);\n      return actionItem;\n    });\n  }\n\n  const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n    setStepValue(e.target.value);\n    const actionParam: LifeCycleActionParam = {\n      value: e.target.value,\n      step: item,\n      task: taskItem,\n      category: categoryItem,\n      stage: stageItem\n    };\n    onChange?.(actionParam, e);\n  };\n\n  return (\n    <Flex as={StyledStep} container={{ inline: true }} error={error}>\n      <Flex as={StyledStepType} color={visual.color} ref={setIconEl} img={visual.imgurl}>\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      </Flex>\n\n      <Tooltip target={iconEl}>{visual.title}</Tooltip>\n\n      <Flex\n        as={StyledStepValue}\n        item={{ grow: 2 }}\n        error={error}\n        container={{ inline: true, alignItems: 'center' }}\n      >\n        <StyledStepValueInput\n          value={stepValue}\n          type='text'\n          ref={setInputEl}\n          error={error}\n          onChange={onInputChange}\n          aria-label={stepValue}\n          id={item.id}\n          {...restProps}\n        />\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      <Tooltip target={inputEl} hideDelay='none'>\n        {error || tooltipValue || 'test'}\n      </Tooltip>\n      <Flex as={StyledStepStatus} ref={setActionEl} badge={badge?.type} error={error}>\n        {actionsClone && <Actions items={actionsClone} menuAt={2} iconOnly />}\n      </Flex>\n      <Tooltip target={actionEl} aria-hidden='true'>\n        {actions && actions?.length > 1 ? actionsLabel : singleActionLabel}\n      </Tooltip>\n    </Flex>\n  );\n};\n\nexport default Step;\n"]}
+{"version":3,"file":"Step.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/Step.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  useState,\n  FunctionComponent,\n  PropsWithoutRef,\n  ChangeEvent,\n  FocusEvent,\n  MouseEvent\n} 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  Tooltip,\n  useElement,\n  Status,\n  FormControlProps,\n  Actions,\n  useI18n,\n  Avatar,\n  StyledTooltip,\n  Action\n} from '@pega/cosmos-react-core';\n\nimport {\n  TaskItemProps,\n  StepItemProps,\n  StageItemProps,\n  CategoryItemProps,\n  LifeCycleAction,\n  LifeCycleActionParam\n} from './LifeCycle.types';\n\nexport interface StepProps extends Omit<FormControlProps, 'status' | 'id'> {\n  /** Pass an array of Action objects to append button(s) inline with the Input. */\n  actions?: LifeCycleAction[];\n  /** Input Change */\n  onChange?: (param: LifeCycleActionParam, e: ChangeEvent<HTMLInputElement>) => void;\n  /** callback for Focus of input */\n  onFocus?: (param: LifeCycleActionParam, e: FocusEvent<HTMLInputElement>) => void;\n}\n\ninterface StepComponentProps extends BaseProps, StepProps {\n  /** Pass text for the step. */\n  value?: string;\n  /** step data id */\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:\n      | 'magenta'\n      | 'studio'\n      | 'congressBlue'\n      | 'Japaneselaurel'\n      | 'violet'\n      | 'yellow'\n      | 'orange'\n      | 'darkyellow';\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<{ color: string; ref: HTMLDivElement; img: string }>(\n  ({ theme, color, img }) => {\n    let bgColor = '';\n    switch (color) {\n      case 'magenta':\n        bgColor = '#AC1361';\n        break;\n      case 'studio':\n        bgColor = '#684AAE';\n        break;\n      case 'congressBlue':\n        bgColor = '#0076d1';\n        break;\n      case 'Japaneselaurel':\n        bgColor = '#27813E';\n        break;\n      case 'violet':\n        bgColor = '#8C479F';\n        break;\n      case 'yellow':\n        bgColor = '#f7a801';\n        break;\n      case 'darkyellow':\n        bgColor = '#f7951c';\n        break;\n      case 'orange':\n        bgColor = '#f46c22';\n        break;\n\n      default:\n        bgColor = '#27813E';\n    }\n\n    const contrastColor = readableColor(bgColor);\n    return img\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\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    > span {\n      white-space: nowrap;\n      text-overflow: ellipsis;\n      overflow: hidden;\n    }\n  `;\n});\n\nconst StyledStepValue = styled.div<{ error: string }>(({ theme, error }) => {\n  return css`\n    border-radius: calc(0.5 * ${theme.base['border-radius']});\n    ${error &&\n    css`\n      background: ${theme.base.colors.red['extra-light']};\n    `}\n  `;\n});\n\nexport const StyledStepValueInput = styled.input<{ error: string | undefined }>(\n  ({ error, theme }) => {\n    return css`\n      height: ${theme.components.input.height};\n      padding: 0 calc(0.5 * ${theme.base.spacing});\n      border: none;\n      border-inline-start: 0.0625rem solid transparent;\n      border-inline-end: 0.0625rem solid transparent;\n      text-overflow: ellipsis;\n      min-width: 40%;\n      outline: none;\n      &:hover {\n        cursor: pointer;\n      }\n      &:disabled {\n        cursor: not-allowed;\n      }\n      ${error\n        ? css`\n            background: ${theme.base.colors.red['extra-light']};\n            &:focus:enabled {\n              border-color: ${theme.base.colors.red.medium};\n            }\n          `\n        : css`\n            background: ${theme.base.palette['secondary-background']};\n            &&:hover {\n              background: ${theme.base.palette['app-background']};\n            }\n            &&:focus:enabled {\n              background: ${theme.base.palette['primary-background']};\n              border-color: ${theme.base.colors.blue.medium};\n            }\n          `}\n    `;\n  }\n);\n\nexport const StyledStepStatus = styled.div<{\n  badge: string;\n  error: string;\n}>(({ theme, badge, error }) => {\n  return css`\n    border: none;\n    ${badge &&\n    css`\n      display: none;\n    `}\n    visibility: hidden;\n    &:hover {\n      cursor: pointer;\n    }\n    &:focus:not([disabled]) {\n      outline: 0.0625rem solid ${theme.base.colors.blue.medium};\n    }\n    ${error &&\n    !badge &&\n    css`\n      visibility: visible;\n    `}\n  `;\n});\n\nexport const StyledStep = styled.div<{ error: string }>(({ theme, error }) => {\n  return css`\n    background: ${theme.base.palette['secondary-background']};\n    border: 0.0625rem solid transparent;\n    border-radius: calc(0.5 * ${theme.base['border-radius']});\n    margin: 0 0 calc(0.5 * ${theme.base.spacing});\n    width: 100%;\n    ${error &&\n    css`\n      border-color: ${theme.base.colors.red.medium};\n      box-shadow: none;\n    `}\n    &:hover {\n      cursor: pointer;\n      ${StyledStepBadge} {\n        ${css`\n          display: none;\n        `}\n      }\n      ${StyledStepStatus} {\n        ${css`\n          visibility: visible;\n          display: inline-block;\n        `}\n      }\n    }\n    &:focus-within {\n      ${!error &&\n      css`\n        border-color: ${theme.base.colors.blue.medium};\n        box-shadow: ${theme.components['form-control'][':focus']['box-shadow']};\n      `}\n      ${StyledStepBadge} {\n        ${css`\n          display: none;\n        `}\n      }\n      ${StyledStepStatus} {\n        ${css`\n          display: inline-block;\n          visibility: visible;\n        `}\n      }\n      ${StyledTooltip} {\n        ${css`\n          visibility: hidden;\n        `}\n      }\n    }\n  `;\n});\n\nStyledStep.defaultProps = defaultThemeProp;\n\nconst Step: FunctionComponent<StepComponentProps & ForwardProps> = ({\n  value,\n  id,\n  visual,\n  actions,\n  badge,\n  error,\n  onChange,\n  categoryItem,\n  item,\n  stageItem,\n  taskItem,\n  onFocus,\n  ...restProps\n}: PropsWithoutRef<StepComponentProps>) => {\n  const t = useI18n();\n  const [stepValue, setStepValue] = useState(value);\n  const [iconEl, setIconEl] = useElement();\n  const [actionEl, setActionEl] = useElement();\n  const [inputEl, setInputEl] = useElement();\n  const actionsLabel = t('actions');\n  const singleActionLabel = (actions?.[0]?.text as string) ?? '';\n  const tooltipValue = stepValue || error;\n\n  /* Need to check the value with statusProps */\n\n  const onActionItemClick = (\n    actionId: string,\n    e: MouseEvent<HTMLInputElement | HTMLAnchorElement | HTMLButtonElement>\n  ) => {\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\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      actionsClone.push(actionCloneItem);\n      return actionItem;\n    });\n  }\n\n  const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n    setStepValue(e.target.value);\n    const actionParam: LifeCycleActionParam = {\n      value: e.target.value,\n      step: item,\n      task: taskItem,\n      category: categoryItem,\n      stage: stageItem\n    };\n    onChange?.(actionParam, e);\n  };\n\n  const onInputFocus = (e: FocusEvent<HTMLInputElement>) => {\n    const actionParam: LifeCycleActionParam = {\n      value: e.target.value,\n      step: item,\n      task: taskItem,\n      category: categoryItem,\n      stage: stageItem\n    };\n    onFocus?.(actionParam, e);\n  };\n\n  return (\n    <Flex as={StyledStep} container={{ inline: true }} error={error}>\n      <Flex as={StyledStepType} color={visual.color} ref={setIconEl} img={visual.imgurl}>\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      </Flex>\n\n      <Tooltip target={iconEl}>{visual.title}</Tooltip>\n\n      <Flex\n        as={StyledStepValue}\n        item={{ grow: 2 }}\n        error={error}\n        container={{ inline: true, alignItems: 'center' }}\n      >\n        <StyledStepValueInput\n          value={stepValue}\n          type='text'\n          ref={setInputEl}\n          error={error}\n          onChange={onInputChange}\n          aria-label={stepValue}\n          id={item.id}\n          {...restProps}\n          onFocus={onInputFocus}\n        />\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      <Tooltip target={inputEl} hideDelay='none'>\n        {error || tooltipValue || 'test'}\n      </Tooltip>\n      <Flex as={StyledStepStatus} ref={setActionEl} badge={badge?.type} error={error}>\n        {actionsClone && <Actions items={actionsClone} menuAt={2} iconOnly />}\n      </Flex>\n      <Tooltip target={actionEl} aria-hidden='true'>\n        {actions && actions?.length > 1 ? actionsLabel : singleActionLabel}\n      </Tooltip>\n    </Flex>\n  );\n};\n\nexport default Step;\n"]}

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

@@ -1,4 +1,4 @@
-import { FunctionComponent, ChangeEvent } from 'react';
+import { FunctionComponent, ChangeEvent, FocusEvent } from 'react';
 import { BaseProps, ForwardProps, FormControlProps } from '@pega/cosmos-react-core';
 import { StepProps } from './Step';
 import { TaskItemProps, StageItemProps, CategoryItemProps, LifeCycleAction, LifeCycleActionParam } from './LifeCycle.types';
@@ -15,6 +15,8 @@ export interface TaskProps extends Omit<FormControlProps, 'status' | 'id'> {
     };
     onAddStep?: LifeCycleAction['onClick'];
     onChange?: (param: LifeCycleActionParam, e: ChangeEvent<HTMLInputElement>) => void;
+    /** callback for Focus of input */
+    onFocus?: (param: LifeCycleActionParam, e: FocusEvent<HTMLInputElement>) => void;
 }
 interface TaskComponentProps extends BaseProps, TaskProps {
     /** Pass text for the task. */

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

@@ -1 +1 @@
-{"version":3,"file":"Task.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/Task.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,iBAAiB,EAAqB,WAAW,EAAc,MAAM,OAAO,CAAC;AAGhG,OAAO,EAGL,SAAS,EACT,YAAY,EAOZ,gBAAgB,EAIjB,MAAM,yBAAyB,CAAC;AAEjC,OAAa,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EACL,aAAa,EACb,cAAc,EAEd,iBAAiB,EACjB,eAAe,EACf,oBAAoB,EACrB,MAAM,mBAAmB,CAAC;AAE3B,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,gBAAgB,EAAE,QAAQ,GAAG,IAAI,CAAC;IACxE,iFAAiF;IACjF,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAC5B,qDAAqD;IACrD,YAAY,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,OAAO,CAAC;QAClB,SAAS,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;KACxC,CAAC;IACF,SAAS,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACvC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,EAAE,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CACpF;AAED,UAAU,kBAAmB,SAAQ,SAAS,EAAE,SAAS;IACvD,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+DAA+D;IAC/D,MAAM,EAAE;QACN,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,qBAAqB;IACrB,IAAI,EAAE,aAAa,CAAC;IAEpB,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,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,eAAO,MAAM,cAAc,wGAQzB,CAAC;AAEH,eAAO,MAAM,gBAAgB,4GAK3B,CAAC;AAGH,eAAO,MAAM,iBAAiB,yGAI5B,CAAC;AAGH,eAAO,MAAM,WAAW;WAAyB,MAAM,GAAG,SAAS;SA+BjE,CAAC;AAGH,eAAO,MAAM,iBAAiB;SACvB,cAAc;WACZ,MAAM;SAoBb,CAAC;AAGH,eAAO,MAAM,UAAU,6GAoBrB,CAAC;AAGH,eAAO,MAAM,kBAAkB,yGAQ9B,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAwJ9D,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Task.d.ts","sourceRoot":"","sources":["../../../src/components/LifeCycle/Task.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,WAAW,EACX,UAAU,EAEX,MAAM,OAAO,CAAC;AAGf,OAAO,EAGL,SAAS,EACT,YAAY,EAOZ,gBAAgB,EAIjB,MAAM,yBAAyB,CAAC;AAEjC,OAAa,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EACL,aAAa,EACb,cAAc,EAEd,iBAAiB,EACjB,eAAe,EACf,oBAAoB,EACrB,MAAM,mBAAmB,CAAC;AAE3B,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,gBAAgB,EAAE,QAAQ,GAAG,IAAI,CAAC;IACxE,iFAAiF;IACjF,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAC5B,qDAAqD;IACrD,YAAY,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,OAAO,CAAC;QAClB,SAAS,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;KACxC,CAAC;IACF,SAAS,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACvC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,EAAE,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACnF,kCAAkC;IAClC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,EAAE,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAClF;AAED,UAAU,kBAAmB,SAAQ,SAAS,EAAE,SAAS;IACvD,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+DAA+D;IAC/D,MAAM,EAAE;QACN,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,qBAAqB;IACrB,IAAI,EAAE,aAAa,CAAC;IAEpB,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,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,eAAO,MAAM,cAAc,wGAQzB,CAAC;AAEH,eAAO,MAAM,gBAAgB,4GAK3B,CAAC;AAGH,eAAO,MAAM,iBAAiB,yGAI5B,CAAC;AAGH,eAAO,MAAM,WAAW;WAAyB,MAAM,GAAG,SAAS;SA+BjE,CAAC;AAGH,eAAO,MAAM,iBAAiB;SACvB,cAAc;WACZ,MAAM;SAoBb,CAAC;AAGH,eAAO,MAAM,UAAU,6GAoBrB,CAAC;AAGH,eAAO,MAAM,kBAAkB,yGAQ9B,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAqK9D,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/lib/components/LifeCycle/Task.js

@@ -110,7 +110,7 @@ export const StyledInputWrapper = styled.div `
     }
   }
 `;
-const Task = ({ value, visual, actions, item, addStepTitle, addTask, stageItem, error, onAddStep, onChange, categoryItem, id, step: stepProp, ...restProps }) => {
+const Task = ({ value, visual, actions, item, addStepTitle, addTask, stageItem, error, onAddStep, onChange, onFocus, categoryItem, id, step: stepProp, ...restProps }) => {
     const t = useI18n();
     const [taskValue, setTaskValue] = useState(value);
     const [actionEl, setActionEl] = useElement();
@@ -153,6 +153,15 @@ const Task = ({ value, visual, actions, item, addStepTitle, addTask, stageItem,
         };
         onChange?.(param, e);
     };
+    const onInputFocus = (e) => {
+        const param = {
+            value: taskValue,
+            task: item,
+            stage: stageItem,
+            category: categoryItem
+        };
+        onFocus?.(param, e);
+    };
     const onAddStepClick = (e) => {
         const param = {
             task: item,
@@ -161,10 +170,10 @@ const Task = ({ value, visual, actions, item, addStepTitle, addTask, stageItem,
         };
         onAddStep?.(param, e);
     };
-    return (_jsx(Flex, Object.assign({ as: StyledTaskList }, restProps, { children: _jsxs(Flex, Object.assign({ as: StyledTask, container: { direction: 'column' }, role: 'region' }, { children: [_jsxs(Flex, Object.assign({ as: StyledCardHeader, container: { itemGap: 0.4 } }, { children: [visual?.imgurl.length > 0 && _jsx(Avatar, { name: taskValue || '', imageSrc: visual?.imgurl }, void 0), _jsxs(Flex, Object.assign({ item: { grow: 1 }, as: StyledInputWrapper, container: { inline: true, alignItems: 'center' } }, { children: [_jsx(StyledInput, { value: taskValue, type: 'text', onChange: onInputChange, ref: setInputEl, error: error, id: item.id, "aria-labelledby": categoryItem.categoryId }, void 0), taskValue && (_jsx(Tooltip, Object.assign({ target: inputEl, hideDelay: 'none' }, { children: error || taskValue }), void 0))] }), void 0), _jsxs(Flex, Object.assign({ as: StyledTaskActions, ref: setActionEl, error: error }, { children: [actionsClone && _jsx(Actions, { items: actionsClone, menuAt: 2, iconOnly: true }, void 0), _jsx(Tooltip, Object.assign({ target: actionEl, "aria-hidden": 'true' }, { children: actions && actions?.length > 1 ? actionsLabel : singleActionLabel }), void 0)] }), void 0)] }), void 0), _jsxs(Flex, Object.assign({ as: StyledCardContent }, { children: [item?.steps.map((steps) => {
+    return (_jsx(Flex, { as: StyledTaskList, ...restProps, children: _jsxs(Flex, { as: StyledTask, container: { direction: 'column' }, role: 'region', children: [_jsxs(Flex, { as: StyledCardHeader, container: { itemGap: 0.4 }, children: [visual?.imgurl.length > 0 && _jsx(Avatar, { name: taskValue || '', imageSrc: visual?.imgurl }, void 0), _jsxs(Flex, { item: { grow: 1 }, as: StyledInputWrapper, container: { inline: true, alignItems: 'center' }, children: [_jsx(StyledInput, { value: taskValue, type: 'text', onChange: onInputChange, ref: setInputEl, error: error, id: item.id, "aria-labelledby": categoryItem.categoryId, onFocus: onInputFocus }, void 0), taskValue && (_jsx(Tooltip, { target: inputEl, hideDelay: 'none', children: error || taskValue }, void 0))] }, void 0), _jsxs(Flex, { as: StyledTaskActions, ref: setActionEl, error: error, children: [actionsClone && _jsx(Actions, { items: actionsClone, menuAt: 2, iconOnly: true }, void 0), _jsx(Tooltip, { target: actionEl, "aria-hidden": 'true', children: actions && actions?.length > 1 ? actionsLabel : singleActionLabel }, void 0)] }, void 0)] }, void 0), _jsxs(Flex, { as: StyledCardContent, children: [item?.steps.map((steps) => {
                             const badgeStatus = steps?.status?.type ? steps.status.type : '';
                             const badgeLabel = steps?.status?.label ? steps.status.label : '';
-                            return (_jsx(Step, Object.assign({ id: steps.id, value: steps.label, visual: {
+                            return (_jsx(Step, { id: steps.id, value: steps.label, visual: {
                                     imgurl: steps.visual.imgurl,
                                     color: steps.visual.color,
                                     icon: steps.visual.icon,
@@ -172,8 +181,8 @@ const Task = ({ value, visual, actions, item, addStepTitle, addTask, stageItem,
                                 }, item: steps, taskItem: item, stageItem: stageItem, badge: {
                                     type: badgeStatus,
                                     label: badgeLabel
-                                }, error: steps.error, categoryItem: categoryItem }, stepProp), steps.id));
-                        }), _jsxs(Flex, { children: [_jsx(Button, Object.assign({ variant: 'simple', label: addStepTitle, onClick: onAddStepClick, ref: setAddEl, icon: true, "aria-label": `${t('add')} ${addStepTitle}` }, { children: _jsx(Icon, { name: 'plus' }, void 0) }), void 0), _jsx(Tooltip, Object.assign({ target: addEl, "aria-hidden": 'true' }, { children: `${t('add')} ${addStepTitle}` }), void 0)] }, void 0)] }), void 0)] }), void 0) }), void 0));
+                                }, error: steps.error, categoryItem: categoryItem, ...stepProp }, steps.id));
+                        }), _jsxs(Flex, { children: [_jsx(Button, { variant: 'simple', label: addStepTitle, onClick: onAddStepClick, ref: setAddEl, icon: true, "aria-label": `${t('add')} ${addStepTitle}`, children: _jsx(Icon, { name: 'plus' }, void 0) }, void 0), _jsx(Tooltip, { target: addEl, "aria-hidden": 'true', children: `${t('add')} ${addStepTitle}` }, void 0)] }, void 0)] }, void 0)] }, void 0) }, void 0));
 };
 export default Task;
 //# sourceMappingURL=Task.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Task.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/Task.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, FunctionComponent, PropsWithChildren, ChangeEvent, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Flex,\n  defaultThemeProp,\n  BaseProps,\n  ForwardProps,\n  Button,\n  Icon,\n  Action,\n  Tooltip,\n  useElement,\n  Actions,\n  FormControlProps,\n  useI18n,\n  Avatar,\n  StyledTooltip\n} from '@pega/cosmos-react-core';\n\nimport Step, { StepProps } from './Step';\nimport {\n  TaskItemProps,\n  StageItemProps,\n  StepItemProps,\n  CategoryItemProps,\n  LifeCycleAction,\n  LifeCycleActionParam\n} from './LifeCycle.types';\n\nexport interface TaskProps extends Omit<FormControlProps, 'status' | 'id'> {\n  /** Pass an array of Action objects to append button(s) inline with the Input. */\n  actions?: LifeCycleAction[];\n  /** Tooltip for adding items to the task component */\n  addStepTitle: string;\n  /** Region for adding the task component */\n  addTask: {\n    title: string;\n    showOnce: boolean;\n    onAddTask?: LifeCycleAction['onClick'];\n  };\n  onAddStep?: LifeCycleAction['onClick'];\n  onChange?: (param: LifeCycleActionParam, e: ChangeEvent<HTMLInputElement>) => void;\n}\n\ninterface TaskComponentProps extends BaseProps, TaskProps {\n  /** Pass text for the task. */\n  value?: string;\n  /** support for an Avatar, Icon, or other supporting visual. */\n  visual: {\n    imgurl: string;\n  };\n  /** Pass task data */\n  item: TaskItemProps;\n  /* The status is used to show the input error status and the info on tooltip in case of error */\n  error?: string;\n  /** Step Props */\n  step?: StepProps;\n  /** Stage data to pass it as callback */\n  stageItem: StageItemProps;\n  /** Category data to pass it as callback */\n  categoryItem: CategoryItemProps;\n  id: string;\n}\n\nexport const StyledTaskList = styled.li(({ theme }) => {\n  return css`\n    list-style-type: none;\n    margin-block-end: ${theme.base.spacing};\n    &:last-child > article {\n      margin-block-end: 0;\n    }\n  `;\n});\n\nexport const StyledCardHeader = styled.header(({ theme }) => {\n  return css`\n    padding: 0;\n    margin: 0 0 calc(0.5 * ${theme.base.spacing});\n  `;\n});\nStyledCardHeader.defaultProps = defaultThemeProp;\n\nexport const StyledCardContent = styled.div(() => {\n  return css`\n    padding: 0;\n  `;\n});\nStyledCardContent.defaultProps = defaultThemeProp;\n\nexport const StyledInput = styled.input<{ error: string | undefined }>(({ error, theme }) => {\n  return css`\n    height: ${theme.components.input.height};\n    padding: 0 calc(0.5 * ${theme.base.spacing});\n    text-overflow: ellipsis;\n    border: 0.0625rem solid transparent;\n    border-radius: calc(0.5 * ${theme.base['border-radius']});\n    width: 100%;\n    outline: none;\n    &:hover {\n      cursor: pointer;\n    }\n    &:disabled {\n      cursor: not-allowed;\n    }\n    ${error\n      ? css`\n          background: ${theme.base.colors.red['extra-light']};\n          border: 0.0625rem solid ${theme.base.colors.red.medium};\n        `\n      : css`\n          background: ${theme.base.palette['primary-background']};\n          &&:hover {\n            background: ${theme.base.palette['secondary-background']};\n          }\n          &&:focus:enabled {\n            border: 0.0625rem solid ${theme.base.colors.blue.medium};\n            background: ${theme.base.palette['primary-background']};\n          }\n        `}\n  `;\n});\nStyledInput.defaultProps = defaultThemeProp;\n\nexport const StyledTaskActions = styled.div<{\n  ref: HTMLDivElement;\n  error: string;\n}>(({ error }) => {\n  return css`\n    border: none;\n    visibility: hidden;\n    &:hover {\n      cursor: pointer;\n    }\n    ${error &&\n    css`\n      visibility: visible;\n    `}\n    &:focus-within {\n      ${StyledTooltip} {\n        ${css`\n          display: none;\n        `}\n      }\n    }\n  `;\n});\nStyledTaskActions.defaultProps = defaultThemeProp;\n\nexport const StyledTask = styled.article(({ theme }) => {\n  return css`\n    background: ${theme.base.palette['primary-background']};\n    border-radius: calc(0.5 * ${theme.base['border-radius']});\n    padding: ${theme.base.spacing};\n    &:focus-within,\n    &:hover {\n      ${StyledTaskActions} {\n        ${css`\n          visibility: visible;\n        `}\n      }\n    }\n    &:focus-within {\n      box-shadow: 0 0 0.2rem 0.0625rem ${theme.base.colors.blue.medium};\n    }\n    &:hover {\n      cursor: pointer;\n    }\n  `;\n});\nStyledTask.defaultProps = defaultThemeProp;\n\nexport const StyledInputWrapper = styled.div`\n  &:focus-within {\n    ${StyledTooltip} {\n      ${css`\n        display: none;\n      `}\n    }\n  }\n`;\n\nconst Task: FunctionComponent<TaskComponentProps & ForwardProps> = ({\n  value,\n  visual,\n  actions,\n  item,\n  addStepTitle,\n  addTask,\n  stageItem,\n  error,\n  onAddStep,\n  onChange,\n  categoryItem,\n  id,\n  step: stepProp,\n  ...restProps\n}: PropsWithChildren<TaskComponentProps>) => {\n  const t = useI18n();\n  const [taskValue, setTaskValue] = useState(value);\n  const [actionEl, setActionEl] = useElement();\n  const [inputEl, setInputEl] = useElement();\n  const [addEl, setAddEl] = useElement();\n  const actionsLabel = t('actions');\n  const singleActionLabel = (actions?.[0]?.text as string) || '';\n\n  const onActionItemClick = (\n    actionId: string,\n    e: MouseEvent<HTMLInputElement | HTMLAnchorElement | HTMLButtonElement>\n  ) => {\n    const param: LifeCycleActionParam = {\n      task: item,\n      stage: stageItem,\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\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      actionsClone.push(actionCloneItem);\n      return actionItem;\n    });\n  }\n\n  const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n    setTaskValue(e.target.value);\n    const param: LifeCycleActionParam = {\n      value: taskValue,\n      task: item,\n      stage: stageItem,\n      category: categoryItem\n    };\n    onChange?.(param, e);\n  };\n  const onAddStepClick = (e: MouseEvent<HTMLButtonElement>) => {\n    const param: LifeCycleActionParam = {\n      task: item,\n      stage: stageItem,\n      category: categoryItem\n    };\n    onAddStep?.(param, e);\n  };\n\n  return (\n    <Flex as={StyledTaskList} {...restProps}>\n      <Flex as={StyledTask} container={{ direction: 'column' }} role='region'>\n        <Flex as={StyledCardHeader} container={{ itemGap: 0.4 }}>\n          {visual?.imgurl.length > 0 && <Avatar name={taskValue || ''} imageSrc={visual?.imgurl} />}\n          <Flex\n            item={{ grow: 1 }}\n            as={StyledInputWrapper}\n            container={{ inline: true, alignItems: 'center' }}\n          >\n            <StyledInput\n              value={taskValue}\n              type='text'\n              onChange={onInputChange}\n              ref={setInputEl}\n              error={error}\n              id={item.id}\n              aria-labelledby={categoryItem.categoryId}\n            />\n            {taskValue && (\n              <Tooltip target={inputEl} hideDelay='none'>\n                {error || taskValue}\n              </Tooltip>\n            )}\n          </Flex>\n          <Flex as={StyledTaskActions} ref={setActionEl} error={error}>\n            {actionsClone && <Actions items={actionsClone} menuAt={2} iconOnly />}\n            <Tooltip target={actionEl} aria-hidden='true'>\n              {actions && actions?.length > 1 ? actionsLabel : singleActionLabel}\n            </Tooltip>\n          </Flex>\n        </Flex>\n        <Flex as={StyledCardContent}>\n          {item?.steps.map((steps: StepItemProps) => {\n            const badgeStatus = steps?.status?.type ? steps.status.type : '';\n            const badgeLabel = steps?.status?.label ? steps.status.label : '';\n            return (\n              <Step\n                key={steps.id}\n                id={steps.id}\n                value={steps.label}\n                visual={{\n                  imgurl: steps.visual.imgurl,\n                  color: steps.visual.color,\n                  icon: steps.visual.icon,\n                  title: steps.visual.label\n                }}\n                item={steps}\n                taskItem={item}\n                stageItem={stageItem}\n                badge={{\n                  type: badgeStatus,\n                  label: badgeLabel\n                }}\n                error={steps.error}\n                categoryItem={categoryItem}\n                {...stepProp}\n              />\n            );\n          })}\n          <Flex>\n            <Button\n              variant='simple'\n              label={addStepTitle}\n              onClick={onAddStepClick}\n              ref={setAddEl}\n              icon\n              aria-label={`${t('add')} ${addStepTitle}`}\n            >\n              <Icon name='plus' />\n            </Button>\n            <Tooltip target={addEl} aria-hidden='true'>\n              {`${t('add')} ${addStepTitle}`}\n            </Tooltip>\n          </Flex>\n        </Flex>\n      </Flex>\n    </Flex>\n  );\n};\n\nexport default Task;\n"]}
+{"version":3,"file":"Task.js","sourceRoot":"","sources":["../../../src/components/LifeCycle/Task.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  useState,\n  FunctionComponent,\n  PropsWithChildren,\n  ChangeEvent,\n  FocusEvent,\n  MouseEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Flex,\n  defaultThemeProp,\n  BaseProps,\n  ForwardProps,\n  Button,\n  Icon,\n  Action,\n  Tooltip,\n  useElement,\n  Actions,\n  FormControlProps,\n  useI18n,\n  Avatar,\n  StyledTooltip\n} from '@pega/cosmos-react-core';\n\nimport Step, { StepProps } from './Step';\nimport {\n  TaskItemProps,\n  StageItemProps,\n  StepItemProps,\n  CategoryItemProps,\n  LifeCycleAction,\n  LifeCycleActionParam\n} from './LifeCycle.types';\n\nexport interface TaskProps extends Omit<FormControlProps, 'status' | 'id'> {\n  /** Pass an array of Action objects to append button(s) inline with the Input. */\n  actions?: LifeCycleAction[];\n  /** Tooltip for adding items to the task component */\n  addStepTitle: string;\n  /** Region for adding the task component */\n  addTask: {\n    title: string;\n    showOnce: boolean;\n    onAddTask?: LifeCycleAction['onClick'];\n  };\n  onAddStep?: LifeCycleAction['onClick'];\n  onChange?: (param: LifeCycleActionParam, e: ChangeEvent<HTMLInputElement>) => void;\n  /** callback for Focus of input */\n  onFocus?: (param: LifeCycleActionParam, e: FocusEvent<HTMLInputElement>) => void;\n}\n\ninterface TaskComponentProps extends BaseProps, TaskProps {\n  /** Pass text for the task. */\n  value?: string;\n  /** support for an Avatar, Icon, or other supporting visual. */\n  visual: {\n    imgurl: string;\n  };\n  /** Pass task data */\n  item: TaskItemProps;\n  /* The status is used to show the input error status and the info on tooltip in case of error */\n  error?: string;\n  /** Step Props */\n  step?: StepProps;\n  /** Stage data to pass it as callback */\n  stageItem: StageItemProps;\n  /** Category data to pass it as callback */\n  categoryItem: CategoryItemProps;\n  id: string;\n}\n\nexport const StyledTaskList = styled.li(({ theme }) => {\n  return css`\n    list-style-type: none;\n    margin-block-end: ${theme.base.spacing};\n    &:last-child > article {\n      margin-block-end: 0;\n    }\n  `;\n});\n\nexport const StyledCardHeader = styled.header(({ theme }) => {\n  return css`\n    padding: 0;\n    margin: 0 0 calc(0.5 * ${theme.base.spacing});\n  `;\n});\nStyledCardHeader.defaultProps = defaultThemeProp;\n\nexport const StyledCardContent = styled.div(() => {\n  return css`\n    padding: 0;\n  `;\n});\nStyledCardContent.defaultProps = defaultThemeProp;\n\nexport const StyledInput = styled.input<{ error: string | undefined }>(({ error, theme }) => {\n  return css`\n    height: ${theme.components.input.height};\n    padding: 0 calc(0.5 * ${theme.base.spacing});\n    text-overflow: ellipsis;\n    border: 0.0625rem solid transparent;\n    border-radius: calc(0.5 * ${theme.base['border-radius']});\n    width: 100%;\n    outline: none;\n    &:hover {\n      cursor: pointer;\n    }\n    &:disabled {\n      cursor: not-allowed;\n    }\n    ${error\n      ? css`\n          background: ${theme.base.colors.red['extra-light']};\n          border: 0.0625rem solid ${theme.base.colors.red.medium};\n        `\n      : css`\n          background: ${theme.base.palette['primary-background']};\n          &&:hover {\n            background: ${theme.base.palette['secondary-background']};\n          }\n          &&:focus:enabled {\n            border: 0.0625rem solid ${theme.base.colors.blue.medium};\n            background: ${theme.base.palette['primary-background']};\n          }\n        `}\n  `;\n});\nStyledInput.defaultProps = defaultThemeProp;\n\nexport const StyledTaskActions = styled.div<{\n  ref: HTMLDivElement;\n  error: string;\n}>(({ error }) => {\n  return css`\n    border: none;\n    visibility: hidden;\n    &:hover {\n      cursor: pointer;\n    }\n    ${error &&\n    css`\n      visibility: visible;\n    `}\n    &:focus-within {\n      ${StyledTooltip} {\n        ${css`\n          display: none;\n        `}\n      }\n    }\n  `;\n});\nStyledTaskActions.defaultProps = defaultThemeProp;\n\nexport const StyledTask = styled.article(({ theme }) => {\n  return css`\n    background: ${theme.base.palette['primary-background']};\n    border-radius: calc(0.5 * ${theme.base['border-radius']});\n    padding: ${theme.base.spacing};\n    &:focus-within,\n    &:hover {\n      ${StyledTaskActions} {\n        ${css`\n          visibility: visible;\n        `}\n      }\n    }\n    &:focus-within {\n      box-shadow: 0 0 0.2rem 0.0625rem ${theme.base.colors.blue.medium};\n    }\n    &:hover {\n      cursor: pointer;\n    }\n  `;\n});\nStyledTask.defaultProps = defaultThemeProp;\n\nexport const StyledInputWrapper = styled.div`\n  &:focus-within {\n    ${StyledTooltip} {\n      ${css`\n        display: none;\n      `}\n    }\n  }\n`;\n\nconst Task: FunctionComponent<TaskComponentProps & ForwardProps> = ({\n  value,\n  visual,\n  actions,\n  item,\n  addStepTitle,\n  addTask,\n  stageItem,\n  error,\n  onAddStep,\n  onChange,\n  onFocus,\n  categoryItem,\n  id,\n  step: stepProp,\n  ...restProps\n}: PropsWithChildren<TaskComponentProps>) => {\n  const t = useI18n();\n  const [taskValue, setTaskValue] = useState(value);\n  const [actionEl, setActionEl] = useElement();\n  const [inputEl, setInputEl] = useElement();\n  const [addEl, setAddEl] = useElement();\n  const actionsLabel = t('actions');\n  const singleActionLabel = (actions?.[0]?.text as string) || '';\n\n  const onActionItemClick = (\n    actionId: string,\n    e: MouseEvent<HTMLInputElement | HTMLAnchorElement | HTMLButtonElement>\n  ) => {\n    const param: LifeCycleActionParam = {\n      task: item,\n      stage: stageItem,\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\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      actionsClone.push(actionCloneItem);\n      return actionItem;\n    });\n  }\n\n  const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n    setTaskValue(e.target.value);\n    const param: LifeCycleActionParam = {\n      value: taskValue,\n      task: item,\n      stage: stageItem,\n      category: categoryItem\n    };\n    onChange?.(param, e);\n  };\n\n  const onInputFocus = (e: FocusEvent<HTMLInputElement>) => {\n    const param: LifeCycleActionParam = {\n      value: taskValue,\n      task: item,\n      stage: stageItem,\n      category: categoryItem\n    };\n    onFocus?.(param, e);\n  };\n\n  const onAddStepClick = (e: MouseEvent<HTMLButtonElement>) => {\n    const param: LifeCycleActionParam = {\n      task: item,\n      stage: stageItem,\n      category: categoryItem\n    };\n    onAddStep?.(param, e);\n  };\n\n  return (\n    <Flex as={StyledTaskList} {...restProps}>\n      <Flex as={StyledTask} container={{ direction: 'column' }} role='region'>\n        <Flex as={StyledCardHeader} container={{ itemGap: 0.4 }}>\n          {visual?.imgurl.length > 0 && <Avatar name={taskValue || ''} imageSrc={visual?.imgurl} />}\n          <Flex\n            item={{ grow: 1 }}\n            as={StyledInputWrapper}\n            container={{ inline: true, alignItems: 'center' }}\n          >\n            <StyledInput\n              value={taskValue}\n              type='text'\n              onChange={onInputChange}\n              ref={setInputEl}\n              error={error}\n              id={item.id}\n              aria-labelledby={categoryItem.categoryId}\n              onFocus={onInputFocus}\n            />\n            {taskValue && (\n              <Tooltip target={inputEl} hideDelay='none'>\n                {error || taskValue}\n              </Tooltip>\n            )}\n          </Flex>\n          <Flex as={StyledTaskActions} ref={setActionEl} error={error}>\n            {actionsClone && <Actions items={actionsClone} menuAt={2} iconOnly />}\n            <Tooltip target={actionEl} aria-hidden='true'>\n              {actions && actions?.length > 1 ? actionsLabel : singleActionLabel}\n            </Tooltip>\n          </Flex>\n        </Flex>\n        <Flex as={StyledCardContent}>\n          {item?.steps.map((steps: StepItemProps) => {\n            const badgeStatus = steps?.status?.type ? steps.status.type : '';\n            const badgeLabel = steps?.status?.label ? steps.status.label : '';\n            return (\n              <Step\n                key={steps.id}\n                id={steps.id}\n                value={steps.label}\n                visual={{\n                  imgurl: steps.visual.imgurl,\n                  color: steps.visual.color,\n                  icon: steps.visual.icon,\n                  title: steps.visual.label\n                }}\n                item={steps}\n                taskItem={item}\n                stageItem={stageItem}\n                badge={{\n                  type: badgeStatus,\n                  label: badgeLabel\n                }}\n                error={steps.error}\n                categoryItem={categoryItem}\n                {...stepProp}\n              />\n            );\n          })}\n          <Flex>\n            <Button\n              variant='simple'\n              label={addStepTitle}\n              onClick={onAddStepClick}\n              ref={setAddEl}\n              icon\n              aria-label={`${t('add')} ${addStepTitle}`}\n            >\n              <Icon name='plus' />\n            </Button>\n            <Tooltip target={addEl} aria-hidden='true'>\n              {`${t('add')} ${addStepTitle}`}\n            </Tooltip>\n          </Flex>\n        </Flex>\n      </Flex>\n    </Flex>\n  );\n};\n\nexport default Task;\n"]}

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

@@ -0,0 +1,23 @@
+import { FC, Ref, MouseEvent } from 'react';
+import { ForwardProps, ImageProps } from '@pega/cosmos-react-core';
+import { SummaryCardProps } from '../SummaryCard';
+interface EmptyStateProps {
+    heading: string;
+    description?: string;
+}
+export interface GalleryPageProps {
+    heading: string;
+    description?: string;
+    image?: ImageProps;
+    action: {
+        text: string;
+        onClick: (e: MouseEvent<HTMLButtonElement>) => void;
+    };
+    emptyState: EmptyStateProps;
+    items?: SummaryCardProps[];
+    onItemClick: (id: SummaryCardProps['id'], e: MouseEvent<HTMLDivElement>) => void;
+    ref?: Ref<HTMLDivElement>;
+}
+declare const GalleryPage: FC<GalleryPageProps & ForwardProps>;
+export default GalleryPage;
+//# sourceMappingURL=GalleryPage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryPage.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/GalleryPage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA+B,GAAG,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEzE,OAAO,EAAE,YAAY,EAAS,UAAU,EAAsB,MAAM,yBAAyB,CAAC;AAE9F,OAAoB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAY/D,UAAU,eAAe;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,MAAM,EAAE;QACN,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;KACrD,CAAC;IACF,UAAU,EAAE,eAAe,CAAC;IAC5B,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC3B,WAAW,EAAE,CAAC,EAAE,EAAE,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACjF,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAmED,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,GAAG,YAAY,CA+BpD,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/PageTemplates/GalleryPage.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Image, Flex, Grid, Button } from '@pega/cosmos-react-core';
+import SummaryCard from '../SummaryCard';
+import { StyledDescription, StyledHeading, StyledSummaryCardList, StyledBanner, StyledImageContainer, StyledGalleryPage, StyledBannerInfo } from './GalleryPage.styles';
+const Banner = ({ heading, description, image, action }) => {
+    return (_jsxs(Flex, { container: { alignItems: 'center', justify: 'between' }, as: StyledBanner, children: [_jsxs(Flex, { as: StyledBannerInfo, item: { grow: 1 }, children: [_jsx(StyledHeading, { variant: 'h1', children: heading }, void 0), description && _jsx(StyledDescription, { children: description }, void 0), action && (_jsx(Button, { onClick: (e) => action.onClick(e), children: action.text }, void 0))] }, void 0), image && (_jsx(StyledImageContainer, { children: _jsx(Image, { ...image }, void 0) }, void 0))] }, void 0));
+};
+const SummaryCardList = ({ items, onItemClick }) => {
+    return (_jsx(Grid, { container: {
+            cols: 'repeat(auto-fill, minmax(18.75rem, 1fr))',
+            autoRows: '10rem',
+            gap: 2
+        }, as: StyledSummaryCardList, children: items && items.map(item => _jsx(SummaryCard, { ...item, onClick: onItemClick }, item.id)) }, void 0));
+};
+const EmptyState = ({ heading, description, action }) => {
+    return (_jsxs(Flex, { container: { direction: 'column', alignItems: 'center', justify: 'center', rowGap: 2 }, item: { grow: 1 }, children: [_jsx(StyledHeading, { variant: 'h2', children: heading }, void 0), description && _jsx(StyledDescription, { children: description }, void 0), action && (_jsx(Button, { variant: 'primary', onClick: action.onClick, children: action.text }, void 0))] }, void 0));
+};
+const GalleryPage = forwardRef(({ heading, description, image, items, onItemClick, emptyState, action }, ref) => {
+    return (_jsx(StyledGalleryPage, { title: '', ref: ref, header: _jsx(Banner, { heading: heading, description: description, action: action, image: image }, void 0), a: items && items.length > 0 ? (_jsx(SummaryCardList, { items: items, onItemClick: onItemClick }, void 0)) : (_jsx(EmptyState, { ...emptyState, action: action }, void 0)), scrollContent: true }, void 0));
+});
+export default GalleryPage;
+//# sourceMappingURL=GalleryPage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryPage.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/GalleryPage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, PropsWithoutRef, forwardRef, Ref, MouseEvent } from 'react';\n\nimport { ForwardProps, Image, ImageProps, Flex, Grid, Button } from '@pega/cosmos-react-core';\n\nimport SummaryCard, { SummaryCardProps } from '../SummaryCard';\n\nimport {\n  StyledDescription,\n  StyledHeading,\n  StyledSummaryCardList,\n  StyledBanner,\n  StyledImageContainer,\n  StyledGalleryPage,\n  StyledBannerInfo\n} from './GalleryPage.styles';\n\ninterface EmptyStateProps {\n  heading: string;\n  description?: string;\n}\n\nexport interface GalleryPageProps {\n  heading: string;\n  description?: string;\n  image?: ImageProps;\n  action: {\n    text: string;\n    onClick: (e: MouseEvent<HTMLButtonElement>) => void;\n  };\n  emptyState: EmptyStateProps;\n  items?: SummaryCardProps[];\n  onItemClick: (id: SummaryCardProps['id'], e: MouseEvent<HTMLDivElement>) => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst Banner: FC<Pick<GalleryPageProps, 'heading' | 'description' | 'image' | 'action'>> = ({\n  heading,\n  description,\n  image,\n  action\n}) => {\n  return (\n    <Flex container={{ alignItems: 'center', justify: 'between' }} as={StyledBanner}>\n      <Flex as={StyledBannerInfo} item={{ grow: 1 }}>\n        <StyledHeading variant='h1'>{heading}</StyledHeading>\n        {description && <StyledDescription>{description}</StyledDescription>}\n        {action && (\n          <Button onClick={(e: MouseEvent<HTMLButtonElement>) => action.onClick(e)}>\n            {action.text}\n          </Button>\n        )}\n      </Flex>\n      {image && (\n        <StyledImageContainer>\n          <Image {...image} />\n        </StyledImageContainer>\n      )}\n    </Flex>\n  );\n};\n\nconst SummaryCardList: FC<{\n  items: GalleryPageProps['items'];\n  onItemClick: GalleryPageProps['onItemClick'];\n}> = ({ items, onItemClick }) => {\n  return (\n    <Grid\n      container={{\n        cols: 'repeat(auto-fill, minmax(18.75rem, 1fr))',\n        autoRows: '10rem',\n        gap: 2\n      }}\n      as={StyledSummaryCardList}\n    >\n      {items && items.map(item => <SummaryCard key={item.id} {...item} onClick={onItemClick} />)}\n    </Grid>\n  );\n};\n\nconst EmptyState: FC<EmptyStateProps & Pick<GalleryPageProps, 'action'>> = ({\n  heading,\n  description,\n  action\n}) => {\n  return (\n    <Flex\n      container={{ direction: 'column', alignItems: 'center', justify: 'center', rowGap: 2 }}\n      item={{ grow: 1 }}\n    >\n      <StyledHeading variant='h2'>{heading}</StyledHeading>\n      {description && <StyledDescription>{description}</StyledDescription>}\n      {action && (\n        <Button variant='primary' onClick={action.onClick}>\n          {action.text}\n        </Button>\n      )}\n    </Flex>\n  );\n};\n\nconst GalleryPage: FC<GalleryPageProps & ForwardProps> = forwardRef(\n  (\n    {\n      heading,\n      description,\n      image,\n      items,\n      onItemClick,\n      emptyState,\n      action\n    }: PropsWithoutRef<GalleryPageProps>,\n    ref: GalleryPageProps['ref']\n  ) => {\n    return (\n      <StyledGalleryPage\n        title=''\n        ref={ref}\n        header={\n          <Banner heading={heading} description={description} action={action} image={image} />\n        }\n        a={\n          items && items.length > 0 ? (\n            <SummaryCardList items={items} onItemClick={onItemClick} />\n          ) : (\n            <EmptyState {...emptyState} action={action} />\n          )\n        }\n        scrollContent\n      />\n    );\n  }\n);\n\nexport default GalleryPage;\n"]}

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

@@ -0,0 +1,9 @@
+import { Text, Flex, OneColumnPage } from '@pega/cosmos-react-core';
+export declare const StyledBanner: import("styled-components").StyledComponent<"article", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledBannerInfo: typeof Flex;
+export declare const StyledImageContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledSummaryCardList: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledHeading: typeof Text;
+export declare const StyledDescription: typeof Text;
+export declare const StyledGalleryPage: typeof OneColumnPage;
+//# sourceMappingURL=GalleryPage.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryPage.styles.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/GalleryPage.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,IAAI,EAGJ,IAAI,EAEJ,aAAa,EAEd,MAAM,yBAAyB,CAAC;AAEjC,eAAO,MAAM,YAAY,6GAcvB,CAAC;AAIH,eAAO,MAAM,gBAAgB,EAAE,OAAO,IAqBpC,CAAC;AAIH,eAAO,MAAM,oBAAoB,yGAQhC,CAAC;AAEF,eAAO,MAAM,qBAAqB,yGAIhC,CAAC;AAIH,eAAO,MAAM,aAAa,EAAE,OAAO,IAIlC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,OAAO,IAKtC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,OAAO,aAStC,CAAC"}

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

@@ -0,0 +1,70 @@
+import styled, { css } from 'styled-components';
+import { readableColor } from 'polished';
+import { Text, StyledButton, tryCatch, Flex, defaultThemeProp, OneColumnPage, StyledRegion } from '@pega/cosmos-react-core';
+export const StyledBanner = styled.article(({ theme }) => {
+    const { base: { palette: { 'brand-primary': brandBackground } } } = theme;
+    const color = tryCatch(() => readableColor(brandBackground));
+    return css `
+    background: ${brandBackground};
+    color: ${color};
+    height: 11rem;
+  `;
+});
+StyledBanner.defaultProps = defaultThemeProp;
+export const StyledBannerInfo = styled(Flex)(({ theme }) => {
+    const { base: { spacing, shadow } } = theme;
+    return css `
+    padding-inline-start: calc(5 * ${spacing});
+    max-width: 50%;
+
+    ${StyledButton} {
+      margin-block-start: calc(2 * ${spacing});
+      &:enabled:focus,
+      &:not([disabled]):focus {
+        box-shadow: ${shadow['focus-inverted']};
+      }
+    }
+
+    span {
+      margin-block-start: ${spacing};
+    }
+  `;
+});
+StyledBannerInfo.defaultProps = defaultThemeProp;
+export const StyledImageContainer = styled.div `
+  padding: 0;
+  height: 100%;
+  max-width: 50%;
+  img {
+    object-fit: contain;
+    height: 100%;
+  }
+`;
+export const StyledSummaryCardList = styled.div(({ theme }) => {
+    return css `
+    margin-block-start: calc(2 * ${theme.base.spacing});
+  `;
+});
+StyledSummaryCardList.defaultProps = defaultThemeProp;
+export const StyledHeading = styled(Text) `
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+`;
+export const StyledDescription = styled(Text) `
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+`;
+export const StyledGalleryPage = styled(OneColumnPage) `
+  gap: 0;
+  & > header {
+    padding: 0;
+  }
+
+  ${StyledRegion} {
+    height: 100%;
+  }
+`;
+//# sourceMappingURL=GalleryPage.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryPage.styles.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/GalleryPage.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,EACL,IAAI,EACJ,YAAY,EACZ,QAAQ,EACR,IAAI,EACJ,gBAAgB,EAChB,aAAa,EACb,YAAY,EACb,MAAM,yBAAyB,CAAC;AAEjC,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvD,MAAM,EACJ,IAAI,EAAE,EACJ,OAAO,EAAE,EAAE,eAAe,EAAE,eAAe,EAAE,EAC9C,EACF,GAAG,KAAK,CAAC;IAEV,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC,CAAC;IAE7D,OAAO,GAAG,CAAA;kBACM,eAAe;aACpB,KAAK;;GAEf,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,MAAM,CAAC,MAAM,gBAAgB,GAAgB,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACtE,MAAM,EACJ,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAC1B,GAAG,KAAK,CAAC;IAEV,OAAO,GAAG,CAAA;qCACyB,OAAO;;;MAGtC,YAAY;qCACmB,OAAO;;;sBAGtB,MAAM,CAAC,gBAAgB,CAAC;;;;;4BAKlB,OAAO;;GAEhC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;CAQ7C,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC5D,OAAO,GAAG,CAAA;mCACuB,KAAK,CAAC,IAAI,CAAC,OAAO;GAClD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,CAAC,MAAM,aAAa,GAAgB,MAAM,CAAC,IAAI,CAAC,CAAA;;;;CAIrD,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAgB,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;CAKzD,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAyB,MAAM,CAAC,aAAa,CAAC,CAAA;;;;;;IAMxE,YAAY;;;CAGf,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n  Text,\n  StyledButton,\n  tryCatch,\n  Flex,\n  defaultThemeProp,\n  OneColumnPage,\n  StyledRegion\n} from '@pega/cosmos-react-core';\n\nexport const StyledBanner = styled.article(({ theme }) => {\n  const {\n    base: {\n      palette: { 'brand-primary': brandBackground }\n    }\n  } = theme;\n\n  const color = tryCatch(() => readableColor(brandBackground));\n\n  return css`\n    background: ${brandBackground};\n    color: ${color};\n    height: 11rem;\n  `;\n});\n\nStyledBanner.defaultProps = defaultThemeProp;\n\nexport const StyledBannerInfo: typeof Flex = styled(Flex)(({ theme }) => {\n  const {\n    base: { spacing, shadow }\n  } = theme;\n\n  return css`\n    padding-inline-start: calc(5 * ${spacing});\n    max-width: 50%;\n\n    ${StyledButton} {\n      margin-block-start: calc(2 * ${spacing});\n      &:enabled:focus,\n      &:not([disabled]):focus {\n        box-shadow: ${shadow['focus-inverted']};\n      }\n    }\n\n    span {\n      margin-block-start: ${spacing};\n    }\n  `;\n});\n\nStyledBannerInfo.defaultProps = defaultThemeProp;\n\nexport const StyledImageContainer = styled.div`\n  padding: 0;\n  height: 100%;\n  max-width: 50%;\n  img {\n    object-fit: contain;\n    height: 100%;\n  }\n`;\n\nexport const StyledSummaryCardList = styled.div(({ theme }) => {\n  return css`\n    margin-block-start: calc(2 * ${theme.base.spacing});\n  `;\n});\n\nStyledSummaryCardList.defaultProps = defaultThemeProp;\n\nexport const StyledHeading: typeof Text = styled(Text)`\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n`;\n\nexport const StyledDescription: typeof Text = styled(Text)`\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  overflow: hidden;\n`;\n\nexport const StyledGalleryPage: typeof OneColumnPage = styled(OneColumnPage)`\n  gap: 0;\n  & > header {\n    padding: 0;\n  }\n\n  ${StyledRegion} {\n    height: 100%;\n  }\n`;\n"]}

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

@@ -1,11 +1,17 @@
-import { FunctionComponent } from 'react';
-import { OneColumnPageProps as CoreOneColumnPageProps, TabbedPageProps as CoreTabbedPageProps, FieldValueListProps, ForwardProps, PageTemplateProps, OmitStrict } from '@pega/cosmos-react-core';
+import { FunctionComponent, MouseEvent } from 'react';
+import { OneColumnPageProps as CoreOneColumnPageProps, TabbedPageProps as CoreTabbedPageProps, FieldValueListProps, ForwardProps, PageTemplateProps, OmitStrict, StatusProps } from '@pega/cosmos-react-core';
 export interface PageHeaderProps extends Pick<PageTemplateProps, 'title' | 'actions'> {
-    subTitle?: string;
+    metadata?: FieldValueListProps['fields'];
+    branchName?: string;
+    status?: {
+        type?: StatusProps['variant'];
+        label: string;
+    };
     additionalInfo?: {
         title: string;
         description?: string;
         fields: FieldValueListProps['fields'];
+        onEdit?: (e: MouseEvent<HTMLButtonElement>) => void;
     };
 }
 declare type OmittedPageProps = 'header' | 'scrollContent';
@@ -13,6 +19,7 @@ export interface OneColumnPageProps extends OmitStrict<CoreOneColumnPageProps, O
 }
 export interface TabbedPageProps extends OmitStrict<CoreTabbedPageProps, OmittedPageProps>, PageHeaderProps {
 }
+export declare const StyledBranch: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledPage: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const TabbedPage: FunctionComponent<TabbedPageProps & ForwardProps>;
 export declare const OneColumnPage: FunctionComponent<OneColumnPageProps & ForwardProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"PageTemplates.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplates.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwB,iBAAiB,EAAmC,MAAM,OAAO,CAAC;AAGjG,OAAO,EAEL,kBAAkB,IAAI,sBAAsB,EAE5C,eAAe,IAAI,mBAAmB,EACtC,mBAAmB,EAQnB,YAAY,EAKZ,iBAAiB,EACjB,UAAU,EACX,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,iBAAiB,EAAE,OAAO,GAAG,SAAS,CAAC;IACnF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE;QACf,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,MAAM,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;KACvC,CAAC;CACH;AAED,aAAK,gBAAgB,GAAG,QAAQ,GAAG,eAAe,CAAC;AAEnD,MAAM,WAAW,kBACf,SAAQ,UAAU,CAAC,sBAAsB,EAAE,gBAAgB,CAAC,EAC1D,eAAe;CAAG;AAEtB,MAAM,WAAW,eACf,SAAQ,UAAU,CAAC,mBAAmB,EAAE,gBAAgB,CAAC,EACvD,eAAe;CAAG;AAEtB,eAAO,MAAM,UAAU,yGAIrB,CAAC;AAqEH,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAcxE,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAoB9E,CAAC"}
+{"version":3,"file":"PageTemplates.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplates.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAKjB,UAAU,EACX,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,kBAAkB,IAAI,sBAAsB,EAE5C,eAAe,IAAI,mBAAmB,EACtC,mBAAmB,EASnB,YAAY,EAMZ,iBAAiB,EACjB,UAAU,EAEV,WAAW,EAGZ,MAAM,yBAAyB,CAAC;AAMjC,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,iBAAiB,EAAE,OAAO,GAAG,SAAS,CAAC;IACnF,QAAQ,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1D,cAAc,CAAC,EAAE;QACf,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,MAAM,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;QACtC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;KACrD,CAAC;CACH;AAED,aAAK,gBAAgB,GAAG,QAAQ,GAAG,eAAe,CAAC;AAEnD,MAAM,WAAW,kBACf,SAAQ,UAAU,CAAC,sBAAsB,EAAE,gBAAgB,CAAC,EAC1D,eAAe;CAAG;AAEtB,MAAM,WAAW,eACf,SAAQ,UAAU,CAAC,mBAAmB,EAAE,gBAAgB,CAAC,EACvD,eAAe;CAAG;AAoBtB,eAAO,MAAM,YAAY,yGAQvB,CAAC;AAUH,eAAO,MAAM,UAAU,yGAAe,CAAC;AAmIvC,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAcxE,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAoB9E,CAAC"}

package/lib/components/PageTemplates/PageTemplates.js

@@ -1,18 +1,55 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef, useState, useEffect } from 'react';
 import styled, { css } from 'styled-components';
-import { OneColumnPage as CoreOneColumnPage, TabbedPage as CoreTabbedPage, Flex, SummaryItem, Text, Button, Popover, FieldValueList, Icon, defaultThemeProp, useI18n, useElement, useOuterEvent } from '@pega/cosmos-react-core';
-export const StyledPage = styled.div(({ theme }) => {
+import { OneColumnPage as CoreOneColumnPage, TabbedPage as CoreTabbedPage, Flex, Status, SummaryItem, Text, Button, Popover, FieldValueList, Icon, defaultThemeProp, useI18n, useDirection, useElement, useOuterEvent, StyledSummaryItemActions, registerIcon, StyledLabel } from '@pega/cosmos-react-core';
+import * as nodesDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/nodes-down.icon';
+import * as informationIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/information.icon';
+registerIcon(nodesDownIcon, informationIcon);
+const StyledTextWithEllipsis = styled(Text) `
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
+const StyledInfoPopover = styled(Popover) `
+  max-width: 60ch;
+  overflow-wrap: break-word;
+`;
+const StyledMetaFields = styled.dl `
+  dd,
+  dt {
+    display: inline;
+  }
+`;
+export const StyledBranch = styled.div(({ theme }) => {
     return css `
-    background-color: ${theme.base.palette['primary-background']};
+    border: 0.0625rem solid ${theme.base.colors.gray.light};
+    border-radius: calc(0.5 * ${theme.base['border-radius']});
+    padding: calc(0.5 * ${theme.base.spacing});
+    max-width: 100%;
+    overflow: hidden;
   `;
 });
-StyledPage.defaultProps = defaultThemeProp;
-const PageHeader = ({ title, subTitle, additionalInfo, actions }) => {
+StyledBranch.defaultProps = defaultThemeProp;
+const StyledHeaderContent = styled(SummaryItem) `
+  ${StyledSummaryItemActions} {
+    align-self: start;
+  }
+`;
+export const StyledPage = styled.div ``;
+const MetaFields = ({ metadata }) => {
+    return (_jsx(Flex, { container: { wrap: 'wrap', colGap: 1, rowGap: 0.25 }, as: StyledMetaFields, children: metadata.map(meta => {
+            return (_jsxs("div", { children: [_jsxs(StyledLabel, { as: 'dt', children: [meta.name, _jsx("span", { "aria-hidden": 'true', children: ": " }, void 0)] }, void 0), _jsx(Text, { variant: 'secondary', as: 'dd', children: meta.value }, void 0)] }, meta.id));
+        }) }, void 0));
+};
+const Branch = ({ branchName, status }) => {
+    return (_jsxs(Flex, { container: { alignItems: 'center', gap: 0.5 }, as: StyledBranch, children: [status && (_jsx(Flex, { item: { shrink: 0 }, as: Status, variant: status.type, children: status.label }, void 0)), _jsx(Flex, { item: { shrink: 0 }, as: Icon, name: 'nodes-down' }, void 0), branchName && _jsx(StyledTextWithEllipsis, { children: branchName }, void 0)] }, void 0));
+};
+const PageHeader = ({ title, metadata, additionalInfo, actions, branchName, status }) => {
     const [open, setOpen] = useState(false);
     const [popoverEl, setPopoverRef] = useElement();
     const [buttonEl, setButtonEl] = useElement();
     const t = useI18n();
+    const { rtl } = useDirection();
     useOuterEvent('mousedown', [popoverEl, buttonEl], () => {
         if (open)
             setOpen(false);
@@ -35,12 +72,15 @@ const PageHeader = ({ title, subTitle, additionalInfo, actions }) => {
             popoverEl?.removeEventListener('keydown', closePopover);
         };
     }, [popoverEl]);
-    return (_jsx(SummaryItem, { primary: _jsxs(Flex, Object.assign({ container: { alignItems: 'end', gap: 0.5 } }, { children: [_jsx(Text, Object.assign({ variant: 'h1' }, { children: title }), void 0), additionalInfo && (_jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ label: t('additional_info'), variant: 'simple', icon: true, ref: setButtonEl, onClick: () => setOpen(cur => !cur) }, { children: _jsx(Icon, { name: 'information' }, void 0) }), void 0), _jsx(Popover, Object.assign({ ref: setPopoverRef, show: open, target: buttonEl, placement: 'right-end' }, { children: _jsxs(Flex, Object.assign({ container: { direction: 'column', gap: 1, pad: 2 } }, { children: [_jsx(Text, Object.assign({ variant: 'h3' }, { children: additionalInfo.title }), void 0), additionalInfo.description && (_jsx(Text, Object.assign({ variant: 'primary' }, { children: additionalInfo.description }), void 0)), _jsx(FieldValueList, { variant: 'inline', fields: additionalInfo.fields }, void 0)] }), void 0) }), void 0)] }, void 0))] }), void 0), secondary: _jsx(Text, Object.assign({ variant: 'secondary' }, { children: subTitle }), void 0), actions: actions }, void 0));
+    return (_jsx(StyledHeaderContent, { container: { rowGap: 0.5 }, primary: _jsxs(Flex, { container: { alignItems: 'start', gap: 0.5, wrap: 'wrap' }, children: [_jsxs(Flex, { container: { gap: 0.5 }, item: { shrink: 0 }, children: [_jsx(StyledTextWithEllipsis, { variant: 'h1', children: title }, void 0), additionalInfo && (_jsxs(_Fragment, { children: [_jsx(Button, { label: t('additional_info'), variant: 'simple', icon: true, ref: setButtonEl, onClick: () => setOpen(cur => !cur), children: _jsx(Icon, { name: 'information' }, void 0) }, void 0), _jsx(StyledInfoPopover, { ref: setPopoverRef, show: open, target: buttonEl, placement: rtl ? 'bottom-end' : 'bottom-start', children: _jsxs(Flex, { container: { direction: 'column', alignItems: 'start', gap: 2, pad: 2 }, children: [_jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h3', children: additionalInfo.title }, void 0), additionalInfo.description && (_jsx(Text, { as: 'p', children: additionalInfo.description }, void 0)), _jsx(FieldValueList, { variant: 'inline', fields: additionalInfo.fields }, void 0)] }, void 0), additionalInfo.onEdit && (_jsx(Button, { onClick: (e) => {
+                                                    setOpen(false);
+                                                    additionalInfo.onEdit?.(e);
+                                                }, children: t('edit_details') }, void 0))] }, void 0) }, void 0)] }, void 0))] }, void 0), branchName && status && _jsx(Branch, { branchName: branchName, status: status }, void 0)] }, void 0), secondary: metadata && _jsx(MetaFields, { metadata: metadata }, void 0), actions: actions }, void 0));
 };
 export const TabbedPage = forwardRef(({ tabs, a, ...restProps }, ref) => {
-    return (_jsx(CoreTabbedPage, Object.assign({}, restProps, { as: StyledPage, header: _jsx(PageHeader, Object.assign({}, restProps), void 0), tabs: tabs, ref: ref, scrollContent: true, a: a }), void 0));
+    return (_jsx(CoreTabbedPage, { ...restProps, as: StyledPage, header: _jsx(PageHeader, { ...restProps }, void 0), tabs: tabs, ref: ref, scrollContent: true, a: a }, void 0));
 });
 export const OneColumnPage = forwardRef(({ a, ...restProps }, ref) => {
-    return (_jsx(CoreOneColumnPage, Object.assign({}, restProps, { as: StyledPage, header: _jsx(PageHeader, Object.assign({}, restProps), void 0), scrollContent: true, a: a, ref: ref }), void 0));
+    return (_jsx(CoreOneColumnPage, { ...restProps, as: StyledPage, header: _jsx(PageHeader, { ...restProps }, void 0), scrollContent: true, a: a, ref: ref }, void 0));
 });
 //# sourceMappingURL=PageTemplates.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PageTemplates.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplates.tsx"],"names":[],"mappings":"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","sourcesContent":["import { PropsWithoutRef, Ref, FunctionComponent, forwardRef, useState, useEffect } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  OneColumnPage as CoreOneColumnPage,\n  OneColumnPageProps as CoreOneColumnPageProps,\n  TabbedPage as CoreTabbedPage,\n  TabbedPageProps as CoreTabbedPageProps,\n  FieldValueListProps,\n  Flex,\n  SummaryItem,\n  Text,\n  Button,\n  Popover,\n  FieldValueList,\n  Icon,\n  ForwardProps,\n  defaultThemeProp,\n  useI18n,\n  useElement,\n  useOuterEvent,\n  PageTemplateProps,\n  OmitStrict\n} from '@pega/cosmos-react-core';\n\nexport interface PageHeaderProps extends Pick<PageTemplateProps, 'title' | 'actions'> {\n  subTitle?: string;\n  additionalInfo?: {\n    title: string;\n    description?: string;\n    fields: FieldValueListProps['fields'];\n  };\n}\n\ntype OmittedPageProps = 'header' | 'scrollContent';\n\nexport interface OneColumnPageProps\n  extends OmitStrict<CoreOneColumnPageProps, OmittedPageProps>,\n    PageHeaderProps {}\n\nexport interface TabbedPageProps\n  extends OmitStrict<CoreTabbedPageProps, OmittedPageProps>,\n    PageHeaderProps {}\n\nexport const StyledPage = styled.div(({ theme }) => {\n  return css`\n    background-color: ${theme.base.palette['primary-background']};\n  `;\n});\n\nStyledPage.defaultProps = defaultThemeProp;\n\nconst PageHeader = ({ title, subTitle, additionalInfo, actions }: PageHeaderProps) => {\n  const [open, setOpen] = useState(false);\n  const [popoverEl, setPopoverRef] = useElement<HTMLElement>();\n  const [buttonEl, setButtonEl] = useElement<HTMLElement>();\n  const t = useI18n();\n\n  useOuterEvent('mousedown', [popoverEl, buttonEl], () => {\n    if (open) setOpen(false);\n  });\n\n  useEffect(() => {\n    const closePopover = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        setOpen(false);\n        if (e.currentTarget === popoverEl) {\n          e.stopPropagation();\n          buttonEl?.focus();\n        }\n      }\n    };\n    document.addEventListener('keydown', closePopover);\n    popoverEl?.addEventListener('keydown', closePopover);\n\n    return () => {\n      document.removeEventListener('keydown', closePopover);\n      popoverEl?.removeEventListener('keydown', closePopover);\n    };\n  }, [popoverEl]);\n\n  return (\n    <SummaryItem\n      primary={\n        <Flex container={{ alignItems: 'end', gap: 0.5 }}>\n          <Text variant='h1'>{title}</Text>\n          {additionalInfo && (\n            <>\n              <Button\n                label={t('additional_info')}\n                variant='simple'\n                icon\n                ref={setButtonEl}\n                onClick={() => setOpen(cur => !cur)}\n              >\n                <Icon name='information' />\n              </Button>\n              <Popover ref={setPopoverRef} show={open} target={buttonEl} placement='right-end'>\n                <Flex container={{ direction: 'column', gap: 1, pad: 2 }}>\n                  <Text variant='h3'>{additionalInfo.title}</Text>\n                  {additionalInfo.description && (\n                    <Text variant='primary'>{additionalInfo.description}</Text>\n                  )}\n                  <FieldValueList variant='inline' fields={additionalInfo.fields} />\n                </Flex>\n              </Popover>\n            </>\n          )}\n        </Flex>\n      }\n      secondary={<Text variant='secondary'>{subTitle}</Text>}\n      actions={actions}\n    />\n  );\n};\n\nexport const TabbedPage: FunctionComponent<TabbedPageProps & ForwardProps> = forwardRef(\n  ({ tabs, a, ...restProps }: PropsWithoutRef<TabbedPageProps>, ref: Ref<HTMLDivElement>) => {\n    return (\n      <CoreTabbedPage\n        {...restProps}\n        as={StyledPage}\n        header={<PageHeader {...restProps} />}\n        tabs={tabs}\n        ref={ref}\n        scrollContent\n        a={a}\n      />\n    );\n  }\n);\n\nexport const OneColumnPage: FunctionComponent<OneColumnPageProps & ForwardProps> = forwardRef(\n  (\n    {\n      a,\n\n      ...restProps\n    }: PropsWithoutRef<OneColumnPageProps>,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    return (\n      <CoreOneColumnPage\n        {...restProps}\n        as={StyledPage}\n        header={<PageHeader {...restProps} />}\n        scrollContent\n        a={a}\n        ref={ref}\n      />\n    );\n  }\n);\n"]}
+{"version":3,"file":"PageTemplates.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplates.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  PropsWithoutRef,\n  Ref,\n  FunctionComponent,\n  forwardRef,\n  useState,\n  useEffect,\n  FC,\n  MouseEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  OneColumnPage as CoreOneColumnPage,\n  OneColumnPageProps as CoreOneColumnPageProps,\n  TabbedPage as CoreTabbedPage,\n  TabbedPageProps as CoreTabbedPageProps,\n  FieldValueListProps,\n  Flex,\n  Status,\n  SummaryItem,\n  Text,\n  Button,\n  Popover,\n  FieldValueList,\n  Icon,\n  ForwardProps,\n  defaultThemeProp,\n  useI18n,\n  useDirection,\n  useElement,\n  useOuterEvent,\n  PageTemplateProps,\n  OmitStrict,\n  StyledSummaryItemActions,\n  StatusProps,\n  registerIcon,\n  StyledLabel\n} from '@pega/cosmos-react-core';\nimport * as nodesDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/nodes-down.icon';\nimport * as informationIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/information.icon';\n\nregisterIcon(nodesDownIcon, informationIcon);\n\nexport interface PageHeaderProps extends Pick<PageTemplateProps, 'title' | 'actions'> {\n  metadata?: FieldValueListProps['fields'];\n  branchName?: string;\n  status?: { type?: StatusProps['variant']; label: string };\n  additionalInfo?: {\n    title: string;\n    description?: string;\n    fields: FieldValueListProps['fields'];\n    onEdit?: (e: MouseEvent<HTMLButtonElement>) => void;\n  };\n}\n\ntype OmittedPageProps = 'header' | 'scrollContent';\n\nexport interface OneColumnPageProps\n  extends OmitStrict<CoreOneColumnPageProps, OmittedPageProps>,\n    PageHeaderProps {}\n\nexport interface TabbedPageProps\n  extends OmitStrict<CoreTabbedPageProps, OmittedPageProps>,\n    PageHeaderProps {}\n\nconst StyledTextWithEllipsis: typeof Text = styled(Text)`\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n`;\n\nconst StyledInfoPopover: typeof Popover = styled(Popover)`\n  max-width: 60ch;\n  overflow-wrap: break-word;\n`;\n\nconst StyledMetaFields = styled.dl`\n  dd,\n  dt {\n    display: inline;\n  }\n`;\n\nexport const StyledBranch = styled.div(({ theme }) => {\n  return css`\n    border: 0.0625rem solid ${theme.base.colors.gray.light};\n    border-radius: calc(0.5 * ${theme.base['border-radius']});\n    padding: calc(0.5 * ${theme.base.spacing});\n    max-width: 100%;\n    overflow: hidden;\n  `;\n});\n\nStyledBranch.defaultProps = defaultThemeProp;\n\nconst StyledHeaderContent = styled(SummaryItem)`\n  ${StyledSummaryItemActions} {\n    align-self: start;\n  }\n`;\n\nexport const StyledPage = styled.div``;\n\nconst MetaFields: FC<{ metadata: NonNullable<PageHeaderProps['metadata']> }> = ({ metadata }) => {\n  return (\n    <Flex container={{ wrap: 'wrap', colGap: 1, rowGap: 0.25 }} as={StyledMetaFields}>\n      {metadata.map(meta => {\n        return (\n          <div key={meta.id}>\n            <StyledLabel as='dt'>\n              {meta.name}\n              <span aria-hidden='true'>: </span>\n            </StyledLabel>\n            <Text variant='secondary' as='dd'>\n              {meta.value}\n            </Text>\n          </div>\n        );\n      })}\n    </Flex>\n  );\n};\n\nconst Branch: FC<Pick<PageHeaderProps, 'branchName' | 'status'>> = ({ branchName, status }) => {\n  return (\n    <Flex container={{ alignItems: 'center', gap: 0.5 }} as={StyledBranch}>\n      {status && (\n        <Flex item={{ shrink: 0 }} as={Status} variant={status.type}>\n          {status.label}\n        </Flex>\n      )}\n      <Flex item={{ shrink: 0 }} as={Icon} name='nodes-down' />\n      {branchName && <StyledTextWithEllipsis>{branchName}</StyledTextWithEllipsis>}\n    </Flex>\n  );\n};\n\nconst PageHeader = ({\n  title,\n  metadata,\n  additionalInfo,\n  actions,\n  branchName,\n  status\n}: PageHeaderProps) => {\n  const [open, setOpen] = useState(false);\n  const [popoverEl, setPopoverRef] = useElement<HTMLElement>();\n  const [buttonEl, setButtonEl] = useElement<HTMLElement>();\n  const t = useI18n();\n  const { rtl } = useDirection();\n\n  useOuterEvent('mousedown', [popoverEl, buttonEl], () => {\n    if (open) setOpen(false);\n  });\n\n  useEffect(() => {\n    const closePopover = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        setOpen(false);\n        if (e.currentTarget === popoverEl) {\n          e.stopPropagation();\n          buttonEl?.focus();\n        }\n      }\n    };\n\n    document.addEventListener('keydown', closePopover);\n    popoverEl?.addEventListener('keydown', closePopover);\n\n    return () => {\n      document.removeEventListener('keydown', closePopover);\n      popoverEl?.removeEventListener('keydown', closePopover);\n    };\n  }, [popoverEl]);\n\n  return (\n    <StyledHeaderContent\n      container={{ rowGap: 0.5 }}\n      primary={\n        <Flex container={{ alignItems: 'start', gap: 0.5, wrap: 'wrap' }}>\n          <Flex container={{ gap: 0.5 }} item={{ shrink: 0 }}>\n            <StyledTextWithEllipsis variant='h1'>{title}</StyledTextWithEllipsis>\n            {additionalInfo && (\n              <>\n                <Button\n                  label={t('additional_info')}\n                  variant='simple'\n                  icon\n                  ref={setButtonEl}\n                  onClick={() => setOpen(cur => !cur)}\n                >\n                  <Icon name='information' />\n                </Button>\n                <StyledInfoPopover\n                  ref={setPopoverRef}\n                  show={open}\n                  target={buttonEl}\n                  placement={rtl ? 'bottom-end' : 'bottom-start'}\n                >\n                  <Flex container={{ direction: 'column', alignItems: 'start', gap: 2, pad: 2 }}>\n                    <Flex container={{ direction: 'column', gap: 1 }}>\n                      <Text variant='h3'>{additionalInfo.title}</Text>\n                      {additionalInfo.description && (\n                        <Text as='p'>{additionalInfo.description}</Text>\n                      )}\n                      <FieldValueList variant='inline' fields={additionalInfo.fields} />\n                    </Flex>\n                    {additionalInfo.onEdit && (\n                      <Button\n                        onClick={(e: MouseEvent<HTMLButtonElement>) => {\n                          setOpen(false);\n                          additionalInfo.onEdit?.(e);\n                        }}\n                      >\n                        {t('edit_details')}\n                      </Button>\n                    )}\n                  </Flex>\n                </StyledInfoPopover>\n              </>\n            )}\n          </Flex>\n          {branchName && status && <Branch branchName={branchName} status={status} />}\n        </Flex>\n      }\n      secondary={metadata && <MetaFields metadata={metadata} />}\n      actions={actions}\n    />\n  );\n};\n\nexport const TabbedPage: FunctionComponent<TabbedPageProps & ForwardProps> = forwardRef(\n  ({ tabs, a, ...restProps }: PropsWithoutRef<TabbedPageProps>, ref: Ref<HTMLDivElement>) => {\n    return (\n      <CoreTabbedPage\n        {...restProps}\n        as={StyledPage}\n        header={<PageHeader {...restProps} />}\n        tabs={tabs}\n        ref={ref}\n        scrollContent\n        a={a}\n      />\n    );\n  }\n);\n\nexport const OneColumnPage: FunctionComponent<OneColumnPageProps & ForwardProps> = forwardRef(\n  (\n    {\n      a,\n\n      ...restProps\n    }: PropsWithoutRef<OneColumnPageProps>,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    return (\n      <CoreOneColumnPage\n        {...restProps}\n        as={StyledPage}\n        header={<PageHeader {...restProps} />}\n        scrollContent\n        a={a}\n        ref={ref}\n      />\n    );\n  }\n);\n"]}