@pega/cosmos-react-build 8.0.0-build.9.0 → 8.0.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"BackgroundPicker.styles.js","sourceRoot":"","sources":["../../../src/components/BackgroundPicker/BackgroundPicker.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css, type DefaultTheme } from 'styled-components';\nimport { hideVisually, parseToRgb } from 'polished';\nimport type { RgbaColor } from 'polished/lib/types/color';\n\nimport {\n  calculateFontSize,\n  StyledFormControl,\n  defaultThemeProp,\n  Flex,\n  StyledCard,\n  Text,\n  StyledIcon,\n  tryCatch\n} from '@pega/cosmos-react-core';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport StyledInput from '@pega/cosmos-react-core/lib/components/Input/Input.styles';\nimport { ellipsisOverflow } from '@pega/cosmos-react-core/lib/styles/mixins';\n\nimport type { BackgroundPickerPropsWithDefaults } from './BackgroundPicker.types';\n\nexport const StyledBackgroundPicker = styled.div<\n  Pick<BackgroundPickerPropsWithDefaults, 'swatchOnly' | 'value'>\n>(\n  ({\n    theme: {\n      base: {\n        spacing,\n        colors: { purple },\n        shadow: { focus },\n        'font-family': fontFamily,\n        'font-size': fontSize,\n        'font-scale': fontScale\n      },\n      components: {\n        input: { height },\n        'form-control': { 'border-width': borderWidth, 'border-color': borderColor }\n      }\n    },\n    swatchOnly,\n    value\n  }) => {\n    const fontSizes = calculateFontSize(fontSize, fontScale);\n\n    return css`\n      ${StyledFormControl} {\n        overflow: hidden;\n        border-width: ${value === 'auto' ? `calc(1.5 * ${borderWidth})` : borderWidth};\n        border-style: ${value === 'auto' ? 'dotted' : 'solid'};\n\n        ${value === 'auto' &&\n        css`\n          border-color: ${purple.medium};\n        `}\n\n        ${!swatchOnly &&\n        css`\n          min-width: calc(16 * ${spacing});\n        `}\n\n        ${!swatchOnly &&\n        css`\n          padding-inline-end: ${spacing};\n        `}\n\n        &:focus-within {\n          box-shadow: ${focus};\n          border: none;\n        }\n\n        &:hover:not([readonly]):not([disabled]):not(:focus, :focus-within) {\n          ${value === 'auto' &&\n          css`\n            border-color: ${purple.dark};\n          `}\n        }\n\n        & > input {\n          ${hideVisually}\n\n          & + div {\n            height: calc(${height} - (2 * ${borderWidth}));\n\n            ${swatchOnly\n              ? css`\n                  width: calc(${height} - (2 * ${borderWidth}));\n                `\n              : css`\n                  min-width: calc(${height} - ${borderWidth});\n                  margin-inline-end: ${spacing};\n                  border-inline-end: ${borderWidth} solid ${borderColor};\n                `}\n          }\n\n          &:focus + div {\n            width: ${height};\n            height: ${height};\n          }\n        }\n\n        & input {\n          height: 2rem;\n          min-height: 2rem;\n          color: #000000;\n          background-color: #ffffff;\n          font-size: ${fontSizes.s};\n          font-family: ${fontFamily};\n\n          & + label {\n            font-weight: 600;\n            color: rgba(0, 0, 0, 0.6);\n            font-size: ${fontSizes.s};\n            font-family: ${fontFamily};\n          }\n        }\n      }\n    `;\n  }\n);\n\nStyledBackgroundPicker.defaultProps = defaultThemeProp;\n\nexport const ColorSwatchPreview = styled.div(\n  ({\n    value,\n    theme: {\n      base: {\n        colors: { purple }\n      }\n    }\n  }: {\n    value: string;\n    theme: DefaultTheme;\n  }) => {\n    const rgb = tryCatch(() => parseToRgb(value));\n\n    let background = value;\n    if (value === 'auto') {\n      background = 'transparent';\n    } else if (value === 'transparent' || (rgb && (rgb as RgbaColor).alpha === 0)) {\n      // Red slash to denote transparent or no color\n      background =\n        'linear-gradient(137deg,#ffffff 0%,#ffffff 50%,#ff0000 54%,#ffffff 58%,#ffffff 100%)';\n    }\n\n    return css`\n      background: repeating-conic-gradient(#dddddd 0% 25%, transparent 0% 50%) 0 0 / 0.5rem 0.5rem;\n      position: relative;\n\n      & ${StyledIcon} {\n        width: 50%;\n        height: 50%;\n        z-index: 1;\n        fill: ${purple.dark};\n      }\n\n      &::after {\n        content: '';\n        position: absolute;\n        width: 100%;\n        height: 100%;\n        background: ${background};\n      }\n    `;\n  }\n);\n\nColorSwatchPreview.defaultProps = defaultThemeProp;\n\nexport const StyledPreviewContainer = styled.div(({ theme }) => {\n  return css`\n    background: repeating-conic-gradient(#dddddd 0% 25%, transparent 0% 50%) 0 0 / 0.5rem 0.5rem;\n    height: ${theme.base['content-width'].xs};\n    border: 0.0625rem solid ${theme.base.palette['border-line']};\n    position: relative;\n  `;\n});\n\nStyledPreviewContainer.defaultProps = defaultThemeProp;\n\nexport const StyledPreview = styled.div<{ background: string }>(({ background }) => {\n  return css`\n    background: ${background};\n    width: 100%;\n    height: 100%;\n  `;\n});\n\nexport const StyledFlex = styled(Flex)`\n  ${StyledCard} {\n    width: 100%;\n  }\n\n  &&& ${StyledCardContent} {\n    padding: 0;\n  }\n`;\n\nexport const StyledTableWrapper = styled(Flex)(({\n  theme: {\n    base: { spacing }\n  }\n}) => {\n  return css`\n    ${StyledInput} {\n      width: calc(6 * ${spacing});\n    }\n  `;\n});\n\nStyledTableWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledText = styled(Text)`\n  ${ellipsisOverflow}\n`;\n"]}

package/lib/components/BackgroundPicker/BackgroundPicker.test-ids.d.ts

@@ -0,0 +1,5 @@
+export declare const getBackgroundPickerTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["control", "overlay", "swatch-preview", "style", "label", "info", "additional-info", "suggestion-accept", "suggestion-reject"]>;
+export declare const getSolidColorConfigTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["color", "opacity", "color-preview"]>;
+export declare const getImageConfigTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["file-url", "opacity", "size", "position", "repeat", "image-preview"]>;
+export declare const getGradientConfigTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["direction", "position", "color-stops", "add-steps", "gradient-preview"]>;
+//# sourceMappingURL=BackgroundPicker.test-ids.d.ts.map

package/lib/components/BackgroundPicker/BackgroundPicker.test-ids.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackgroundPicker.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/BackgroundPicker/BackgroundPicker.test-ids.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,0BAA0B,oQAM5B,CAAC;AAEZ,eAAO,MAAM,0BAA0B,0KAI5B,CAAC;AAEZ,eAAO,MAAM,qBAAqB,2MAOvB,CAAC;AAEZ,eAAO,MAAM,wBAAwB,8MAM1B,CAAC"}

package/lib/components/BackgroundPicker/BackgroundPicker.test-ids.js

@@ -0,0 +1,30 @@
+import { createTestIds } from '@pega/cosmos-react-core';
+import { elements } from '@pega/cosmos-react-core/lib/components/FormField/FormField.test-ids';
+export const getBackgroundPickerTestIds = createTestIds('background-picker', [
+    'control',
+    'overlay',
+    'swatch-preview',
+    'style',
+    ...elements
+]);
+export const getSolidColorConfigTestIds = createTestIds('solid-color-config', [
+    'color',
+    'opacity',
+    'color-preview'
+]);
+export const getImageConfigTestIds = createTestIds('image-config', [
+    'file-url',
+    'opacity',
+    'size',
+    'position',
+    'repeat',
+    'image-preview'
+]);
+export const getGradientConfigTestIds = createTestIds('gradient-config', [
+    'direction',
+    'position',
+    'color-stops',
+    'add-steps',
+    'gradient-preview'
+]);
+//# sourceMappingURL=BackgroundPicker.test-ids.js.map

package/lib/components/BackgroundPicker/BackgroundPicker.test-ids.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackgroundPicker.test-ids.js","sourceRoot":"","sources":["../../../src/components/BackgroundPicker/BackgroundPicker.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,qEAAqE,CAAC;AAE/F,MAAM,CAAC,MAAM,0BAA0B,GAAG,aAAa,CAAC,mBAAmB,EAAE;IAC3E,SAAS;IACT,SAAS;IACT,gBAAgB;IAChB,OAAO;IACP,GAAG,QAAQ;CACH,CAAC,CAAC;AAEZ,MAAM,CAAC,MAAM,0BAA0B,GAAG,aAAa,CAAC,oBAAoB,EAAE;IAC5E,OAAO;IACP,SAAS;IACT,eAAe;CACP,CAAC,CAAC;AAEZ,MAAM,CAAC,MAAM,qBAAqB,GAAG,aAAa,CAAC,cAAc,EAAE;IACjE,UAAU;IACV,SAAS;IACT,MAAM;IACN,UAAU;IACV,QAAQ;IACR,eAAe;CACP,CAAC,CAAC;AAEZ,MAAM,CAAC,MAAM,wBAAwB,GAAG,aAAa,CAAC,iBAAiB,EAAE;IACvE,WAAW;IACX,UAAU;IACV,aAAa;IACb,WAAW;IACX,kBAAkB;CACV,CAAC,CAAC","sourcesContent":["import { createTestIds } from '@pega/cosmos-react-core';\nimport { elements } from '@pega/cosmos-react-core/lib/components/FormField/FormField.test-ids';\n\nexport const getBackgroundPickerTestIds = createTestIds('background-picker', [\n  'control',\n  'overlay',\n  'swatch-preview',\n  'style',\n  ...elements\n] as const);\n\nexport const getSolidColorConfigTestIds = createTestIds('solid-color-config', [\n  'color',\n  'opacity',\n  'color-preview'\n] as const);\n\nexport const getImageConfigTestIds = createTestIds('image-config', [\n  'file-url',\n  'opacity',\n  'size',\n  'position',\n  'repeat',\n  'image-preview'\n] as const);\n\nexport const getGradientConfigTestIds = createTestIds('gradient-config', [\n  'direction',\n  'position',\n  'color-stops',\n  'add-steps',\n  'gradient-preview'\n] as const);\n"]}

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

@@ -0,0 +1,98 @@
+import type { ColorStop } from 'css-gradient-parser';
+import type { WithAttributes, TestIdProp, NoChildrenProp, FormControlProps, FormFieldProps, PropsWithDefaults } from '@pega/cosmos-react-core';
+export type BackgroundPickerProps = WithAttributes<'input', TestIdProp & NoChildrenProp & {
+    /** label for the color picker control */
+    label: FormControlProps['label'];
+    /**
+     * Color picker value in hex
+     * @default '#000000'
+     */
+    value: string;
+    /** List of options to render as background type */
+    backgroundOptions?: BackgroundType[];
+    /**
+     * Show color swatch without hex value display.
+     * @default false
+     */
+    swatchOnly?: boolean;
+    /** Visually hides the label region. */
+    labelHidden?: FormControlProps['labelHidden'];
+    /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */
+    info?: FormControlProps['info'];
+    /** Set visual state based on a validation state. */
+    status?: FormControlProps['status'];
+    /** Layout field elements inline in a row. */
+    inline?: FormFieldProps['inline'];
+    /** Button when clicked will show additional information on the color picker */
+    additionalInfo?: FormFieldProps['additionalInfo'];
+    /** event handler that gets called on submit of picker. */
+    onSubmit: (background: string) => void;
+    /** onBeforeClose of the color picker */
+    onBeforeClose?: () => void;
+}>;
+export type BackgroundPickerPropsWithDefaults = PropsWithDefaults<BackgroundPickerProps, 'value' | 'swatchOnly'>;
+export type BackgroundType = 'automatic' | 'transparent' | 'solid-color' | 'image' | 'linear-gradient' | 'radial-gradient' | 'conic-gradient';
+export declare const backgroundTypeTranslationKeyMap: {
+    automatic: "automatic";
+    transparent: "transparent";
+    'solid-color': "solid_color";
+    image: "image";
+    'linear-gradient': "linear_gradient";
+    'radial-gradient': "radial_gradient";
+    'conic-gradient': "conic_gradient";
+};
+export interface SolidColorConfigProps extends Pick<BackgroundPickerProps, 'value'>, TestIdProp {
+    disableOpacity?: boolean;
+}
+export type Size = 'auto' | 'cover' | 'contain';
+export type Position = 'center' | 'top' | 'right' | 'bottom' | 'left' | 'top left' | 'top right' | 'bottom right' | 'bottom left';
+export declare const positionTranslationKeyMap: {
+    center: "center";
+    top: "top";
+    right: "right";
+    bottom: "bottom";
+    left: "left";
+    'top left': "top_left";
+    'top right': "top_right";
+    'bottom right': "bottom_right";
+    'bottom left': "bottom_left";
+};
+export type Repeat = 'no-repeat' | 'repeat' | 'repeat-x' | 'repeat-y' | 'space' | 'round';
+export declare const repeatTranslationKeyMap: {
+    'no-repeat': "no_repeat";
+    repeat: "repeat";
+    'repeat-x': "repeat_x";
+    'repeat-y': "repeat_y";
+    space: "space";
+    round: "round";
+};
+export interface BackgroundImage {
+    url: string;
+    backgroundSize: Size;
+    backgroundPosition: Position;
+    backgroundRepeat: Repeat;
+}
+export interface ImageConfigProps extends Pick<BackgroundPickerProps, 'value'>, TestIdProp {
+}
+export interface ConicGradient {
+    angle: string;
+    repeating: boolean;
+    position: string;
+    stops: ColorStop[];
+}
+export interface GradientConfigProps extends Pick<BackgroundPickerProps, 'value'>, TestIdProp {
+    type: BackgroundType;
+}
+export type TableData = {
+    id: string;
+    color: string;
+    location: string;
+};
+export interface GradientInputProps {
+    data: TableData;
+    onChange: (id: string, type: keyof TableData, value: string) => void;
+}
+export interface ComputedBackgroundRef {
+    getValue: () => string;
+}
+//# sourceMappingURL=BackgroundPicker.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BackgroundPicker.types.d.ts","sourceRoot":"","sources":["../../../src/components/BackgroundPicker/BackgroundPicker.types.ts"],"names":[],"mappings":"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"}

package/lib/components/BackgroundPicker/BackgroundPicker.types.js

@@ -0,0 +1,29 @@
+export const backgroundTypeTranslationKeyMap = {
+    automatic: 'automatic',
+    transparent: 'transparent',
+    'solid-color': 'solid_color',
+    image: 'image',
+    'linear-gradient': 'linear_gradient',
+    'radial-gradient': 'radial_gradient',
+    'conic-gradient': 'conic_gradient'
+};
+export const positionTranslationKeyMap = {
+    center: 'center',
+    top: 'top',
+    right: 'right',
+    bottom: 'bottom',
+    left: 'left',
+    'top left': 'top_left',
+    'top right': 'top_right',
+    'bottom right': 'bottom_right',
+    'bottom left': 'bottom_left'
+};
+export const repeatTranslationKeyMap = {
+    'no-repeat': 'no_repeat',
+    repeat: 'repeat',
+    'repeat-x': 'repeat_x',
+    'repeat-y': 'repeat_y',
+    space: 'space',
+    round: 'round'
+};
+//# sourceMappingURL=BackgroundPicker.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BackgroundPicker.types.js","sourceRoot":"","sources":["../../../src/components/BackgroundPicker/BackgroundPicker.types.ts"],"names":[],"mappings":"AA6DA,MAAM,CAAC,MAAM,+BAA+B,GAAG;IAC7C,SAAS,EAAE,WAAW;IACtB,WAAW,EAAE,aAAa;IAC1B,aAAa,EAAE,aAAa;IAC5B,KAAK,EAAE,OAAO;IACd,iBAAiB,EAAE,iBAAiB;IACpC,iBAAiB,EAAE,iBAAiB;IACpC,gBAAgB,EAAE,gBAAgB;CAC6B,CAAC;AAmBlE,MAAM,CAAC,MAAM,yBAAyB,GAAG;IACvC,MAAM,EAAE,QAAQ;IAChB,GAAG,EAAE,KAAK;IACV,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,IAAI,EAAE,MAAM;IACZ,UAAU,EAAE,UAAU;IACtB,WAAW,EAAE,WAAW;IACxB,cAAc,EAAE,cAAc;IAC9B,aAAa,EAAE,aAAa;CAG7B,CAAC;AAIF,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACrC,WAAW,EAAE,WAAW;IACxB,MAAM,EAAE,QAAQ;IAChB,UAAU,EAAE,UAAU;IACtB,UAAU,EAAE,UAAU;IACtB,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,OAAO;CAGf,CAAC","sourcesContent":["import type { ColorStop } from 'css-gradient-parser';\n\nimport type {\n  WithAttributes,\n  TestIdProp,\n  NoChildrenProp,\n  FormControlProps,\n  FormFieldProps,\n  PropsWithDefaults,\n  ReplaceString\n} from '@pega/cosmos-react-core';\n\nexport type BackgroundPickerProps = WithAttributes<\n  'input',\n  TestIdProp &\n    NoChildrenProp & {\n      /** label for the color picker control */\n      label: FormControlProps['label'];\n      /**\n       * Color picker value in hex\n       * @default '#000000'\n       */\n      value: string;\n      /** List of options to render as background type */\n      backgroundOptions?: BackgroundType[];\n      /**\n       * Show color swatch without hex value display.\n       * @default false\n       */\n      swatchOnly?: boolean;\n      /** Visually hides the label region. */\n      labelHidden?: FormControlProps['labelHidden'];\n      /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n      info?: FormControlProps['info'];\n      /** Set visual state based on a validation state. */\n      status?: FormControlProps['status'];\n      /** Layout field elements inline in a row. */\n      inline?: FormFieldProps['inline'];\n      /** Button when clicked will show additional information on the color picker */\n      additionalInfo?: FormFieldProps['additionalInfo'];\n      /** event handler that gets called on submit of picker. */\n      onSubmit: (background: string) => void;\n      /** onBeforeClose of the color picker */\n      onBeforeClose?: () => void;\n    }\n>;\n\nexport type BackgroundPickerPropsWithDefaults = PropsWithDefaults<\n  BackgroundPickerProps,\n  'value' | 'swatchOnly'\n>;\n\nexport type BackgroundType =\n  | 'automatic'\n  | 'transparent'\n  | 'solid-color'\n  | 'image'\n  | 'linear-gradient'\n  | 'radial-gradient'\n  | 'conic-gradient';\n\nexport const backgroundTypeTranslationKeyMap = {\n  automatic: 'automatic',\n  transparent: 'transparent',\n  'solid-color': 'solid_color',\n  image: 'image',\n  'linear-gradient': 'linear_gradient',\n  'radial-gradient': 'radial_gradient',\n  'conic-gradient': 'conic_gradient'\n} satisfies { [K in BackgroundType]: ReplaceString<K, '-', '_'> };\n\nexport interface SolidColorConfigProps extends Pick<BackgroundPickerProps, 'value'>, TestIdProp {\n  disableOpacity?: boolean;\n}\n\nexport type Size = 'auto' | 'cover' | 'contain';\n\nexport type Position =\n  | 'center'\n  | 'top'\n  | 'right'\n  | 'bottom'\n  | 'left'\n  | 'top left'\n  | 'top right'\n  | 'bottom right'\n  | 'bottom left';\n\nexport const positionTranslationKeyMap = {\n  center: 'center',\n  top: 'top',\n  right: 'right',\n  bottom: 'bottom',\n  left: 'left',\n  'top left': 'top_left',\n  'top right': 'top_right',\n  'bottom right': 'bottom_right',\n  'bottom left': 'bottom_left'\n} satisfies {\n  [K in Position]: ReplaceString<K, ' ', '_'>;\n};\n\nexport type Repeat = 'no-repeat' | 'repeat' | 'repeat-x' | 'repeat-y' | 'space' | 'round';\n\nexport const repeatTranslationKeyMap = {\n  'no-repeat': 'no_repeat',\n  repeat: 'repeat',\n  'repeat-x': 'repeat_x',\n  'repeat-y': 'repeat_y',\n  space: 'space',\n  round: 'round'\n} satisfies {\n  [K in Repeat]: ReplaceString<K, '-', '_'>;\n};\n\nexport interface BackgroundImage {\n  url: string;\n  backgroundSize: Size;\n  backgroundPosition: Position;\n  backgroundRepeat: Repeat;\n}\n\nexport interface ImageConfigProps extends Pick<BackgroundPickerProps, 'value'>, TestIdProp {}\n\nexport interface ConicGradient {\n  angle: string;\n  repeating: boolean;\n  position: string;\n  stops: ColorStop[];\n}\n\nexport interface GradientConfigProps extends Pick<BackgroundPickerProps, 'value'>, TestIdProp {\n  type: BackgroundType;\n}\n\nexport type TableData = {\n  id: string;\n  color: string;\n  location: string;\n};\n\nexport interface GradientInputProps {\n  data: TableData;\n  onChange: (id: string, type: keyof TableData, value: string) => void;\n}\n\nexport interface ComputedBackgroundRef {\n  getValue: () => string;\n}\n"]}

package/lib/components/BackgroundPicker/GradientConfig.d.ts

@@ -0,0 +1,6 @@
+import type { GradientConfigProps, ComputedBackgroundRef } from './BackgroundPicker.types';
+declare const _default: import("react").ForwardRefExoticComponent<GradientConfigProps & import("react").RefAttributes<ComputedBackgroundRef>> & {
+    getTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["direction", "position", "color-stops", "add-steps", "gradient-preview"]>;
+};
+export default _default;
+//# sourceMappingURL=GradientConfig.d.ts.map

package/lib/components/BackgroundPicker/GradientConfig.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GradientConfig.d.ts","sourceRoot":"","sources":["../../../src/components/BackgroundPicker/GradientConfig.tsx"],"names":[],"mappings":"AAiCA,OAAO,KAAK,EAGV,mBAAmB,EAEnB,qBAAqB,EAEtB,MAAM,0BAA0B,CAAC;;;;AAuQlC,wBAAqE"}

package/lib/components/BackgroundPicker/GradientConfig.js

@@ -0,0 +1,149 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from 'react';
+import { registerIcon, useI18n, usePrevious, NumberInput, ColorPicker, createUID, useTestIds, Button, Icon, Select, Table, Flex, withTestIds, Text, Option } from '@pega/cosmos-react-core';
+import * as trashIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/trash.icon';
+import * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';
+import { positionTranslationKeyMap } from './BackgroundPicker.types';
+import { getGradientConfigTestIds } from './BackgroundPicker.test-ids';
+import { StyledPreview, StyledTableWrapper, StyledFlex, StyledPreviewContainer } from './BackgroundPicker.styles';
+import { getParsedGradientDetails } from './utils';
+registerIcon(trashIcon, plusIcon);
+const radialGradientPositions = [
+    'center',
+    'top',
+    'right',
+    'bottom',
+    'left',
+    'top left',
+    'top right',
+    'bottom right',
+    'bottom left'
+];
+const GradientLocationInput = ({ data: { id, location }, onChange }) => {
+    const [value, setValue] = useState(location);
+    const t = useI18n();
+    const prev = usePrevious(location);
+    useEffect(() => {
+        if (prev !== location)
+            setValue(location === undefined ? undefined : `${location}`);
+    }, [prev, location]);
+    return (_jsx(NumberInput, { label: t('location'), labelHidden: true, value: value, onChange: inputValue => {
+            setValue(inputValue);
+            onChange(id, 'location', inputValue);
+        }, unit: '%', maxLength: 4, max: 99 }));
+};
+const GradientColorPicker = ({ data: { id, color }, onChange }) => {
+    const [value, setValue] = useState(color);
+    return (_jsx(ColorPicker, { value: value, label: '', labelHidden: true, onChange: e => {
+            setValue(e.hex);
+            onChange(id, 'color', e.hex);
+        } }));
+};
+const GradientConfig = forwardRef(function GradientConfig({ testId, type, value }, ref) {
+    const gradientObj = getParsedGradientDetails(type, value);
+    const [gradients, setGradients] = useState(() => {
+        return gradientObj.stops.map((item, index) => {
+            return {
+                id: index === gradientObj.stops.length - 1 ? 'end' : createUID(),
+                color: item.color,
+                location: item.offset?.value
+            };
+        });
+    });
+    const [gradientDirection, setGradientDirection] = useState(() => {
+        if (type === 'linear-gradient') {
+            if (gradientObj.orientation.type === 'directional') {
+                switch (gradientObj.orientation.value) {
+                    case 'bottom':
+                        return '180';
+                    case 'left':
+                        return '270';
+                    case 'top':
+                        return '0';
+                    case 'right':
+                    default:
+                        return '90';
+                }
+            }
+            else {
+                return gradientObj.orientation.value.value;
+            }
+        }
+        if (type === 'conic-gradient') {
+            return gradientObj.angle.split('deg')[0];
+        }
+        return '90';
+    });
+    const [radialGradientPosition, setRadialGradientPosition] = useState(() => {
+        if (type === 'radial-gradient') {
+            if (['left', 'right'].includes(gradientObj.position.y.value)) {
+                return `${gradientObj.position.x.value} ${gradientObj.position.y.value}`;
+            }
+            return `${gradientObj.position.x.value}`;
+        }
+        return 'center';
+    });
+    const testIds = useTestIds(testId, getGradientConfigTestIds);
+    const t = useI18n();
+    const onGradientChange = (id, key, updatedValue) => {
+        setGradients((x) => {
+            const y = [...x];
+            const el = y.find(z => z.id === id);
+            el[key] = updatedValue;
+            return y;
+        });
+    };
+    const onGradientDirectionChange = (updatedValue) => {
+        setGradientDirection(updatedValue);
+    };
+    const columns = useMemo(() => [
+        {
+            renderer: data => _jsx(GradientColorPicker, { data: data, onChange: onGradientChange }),
+            label: t('color')
+        },
+        {
+            renderer: data => {
+                return data.id !== 'end' ? (_jsx(GradientLocationInput, { data: data, onChange: onGradientChange })) : (_jsxs(Text, { children: [data.location, "%"] }));
+            },
+            label: t('location')
+        },
+        {
+            renderer: data => {
+                return data.id !== 'end' ? (_jsx(Button, { variant: 'text', label: t('delete_stop'), icon: true, compact: true, onClick: () => setGradients(x => x.filter(y => y.id !== data.id)), children: _jsx(Icon, { name: 'trash' }) })) : null;
+            },
+            label: '',
+            noWrap: true
+        }
+    ], []);
+    const addSteps = () => {
+        const newStep = {
+            id: createUID(),
+            color: '#ffffff',
+            location: '10'
+        };
+        setGradients(x => {
+            const y = [...x];
+            y.splice(y.length - 1, 0, newStep);
+            return y;
+        });
+    };
+    const computedGradient = useMemo(() => {
+        if (type === 'linear-gradient') {
+            return `linear-gradient(${gradientDirection}deg, ${gradients.map(x => `${x.color} ${x.location}%`).join(', ')})`;
+        }
+        if (type === 'conic-gradient') {
+            return `conic-gradient(from ${gradientDirection}deg, ${gradients.map(x => `${x.color} ${x.location}%`).join(', ')})`;
+        }
+        return `radial-gradient(at ${radialGradientPosition}, ${gradients.map(x => `${x.color} ${x.location}%`).join(', ')})`;
+    }, [type, gradientDirection, gradients, radialGradientPosition]);
+    useImperativeHandle(ref, () => ({
+        getValue: () => computedGradient
+    }));
+    return (_jsxs(StyledFlex, { container: { direction: 'column', gap: 1 }, children: [type === 'radial-gradient' ? (_jsx(Select, { testId: testIds.position, value: radialGradientPosition, label: t('position'), onChange: e => {
+                    setRadialGradientPosition(e.target.value);
+                }, children: radialGradientPositions.map(position => {
+                    return (_jsx(Option, { value: position, children: t(positionTranslationKeyMap[position]) }, position));
+                }) })) : (_jsx(NumberInput, { testId: testIds.direction, label: t('direction'), variant: 'stepper', value: gradientDirection, unit: 'degree', max: 360, min: 0, step: 1, onChange: onGradientDirectionChange })), _jsxs(StyledTableWrapper, { container: { direction: 'column', gap: 1, alignItems: 'start' }, children: [_jsx(Table, { "data-testid": testIds.colorStops, title: t('color_stops'), columns: columns, data: gradients }), _jsxs(Flex, { "data-testid": testIds.addSteps, container: { gap: 1 }, as: Button, variant: 'simple', onClick: addSteps, children: [_jsx(Icon, { name: 'plus' }), " ", t('add_stops')] })] }), _jsxs(Flex, { "data-testid": testIds.gradientPreview, container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h3', children: t('gradient_preview') }), _jsx(StyledPreviewContainer, { children: _jsx(StyledPreview, { "aria-label": t('gradient_preview'), background: computedGradient }) })] })] }));
+});
+export default withTestIds(GradientConfig, getGradientConfigTestIds);
+//# sourceMappingURL=GradientConfig.js.map

package/lib/components/BackgroundPicker/GradientConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GradientConfig.js","sourceRoot":"","sources":["../../../src/components/BackgroundPicker/GradientConfig.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useState,\n  type PropsWithoutRef,\n  type Ref\n} from 'react';\nimport type { LinearResult, RadialResult } from 'css-gradient-parser';\n\nimport {\n  registerIcon,\n  useI18n,\n  usePrevious,\n  NumberInput,\n  ColorPicker,\n  createUID,\n  useTestIds,\n  type ColumnProps,\n  Button,\n  Icon,\n  Select,\n  Table,\n  Flex,\n  withTestIds,\n  Text,\n  Option\n} from '@pega/cosmos-react-core';\nimport * as trashIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/trash.icon';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\n\nimport { positionTranslationKeyMap } from './BackgroundPicker.types';\nimport type {\n  ConicGradient,\n  GradientInputProps,\n  GradientConfigProps,\n  TableData,\n  ComputedBackgroundRef,\n  Position\n} from './BackgroundPicker.types';\nimport { getGradientConfigTestIds } from './BackgroundPicker.test-ids';\nimport {\n  StyledPreview,\n  StyledTableWrapper,\n  StyledFlex,\n  StyledPreviewContainer\n} from './BackgroundPicker.styles';\nimport { getParsedGradientDetails } from './utils';\n\nregisterIcon(trashIcon, plusIcon);\n\nconst radialGradientPositions = [\n  'center',\n  'top',\n  'right',\n  'bottom',\n  'left',\n  'top left',\n  'top right',\n  'bottom right',\n  'bottom left'\n] as const satisfies Position[];\n\nconst GradientLocationInput = ({ data: { id, location }, onChange }: GradientInputProps) => {\n  const [value, setValue] = useState<string | undefined>(location);\n  const t = useI18n();\n\n  const prev = usePrevious(location);\n  useEffect(() => {\n    if (prev !== location) setValue(location === undefined ? undefined : `${location}`);\n  }, [prev, location]);\n\n  return (\n    <NumberInput\n      label={t('location')}\n      labelHidden\n      value={value}\n      onChange={inputValue => {\n        setValue(inputValue);\n        onChange(id, 'location', inputValue);\n      }}\n      unit='%'\n      maxLength={4}\n      max={99}\n    />\n  );\n};\n\nconst GradientColorPicker = ({ data: { id, color }, onChange }: GradientInputProps) => {\n  const [value, setValue] = useState(color);\n\n  return (\n    <ColorPicker\n      value={value}\n      label=''\n      labelHidden\n      onChange={e => {\n        setValue(e.hex);\n        onChange(id, 'color', e.hex);\n      }}\n    />\n  );\n};\n\nconst GradientConfig = forwardRef(function GradientConfig(\n  { testId, type, value }: PropsWithoutRef<GradientConfigProps>,\n  ref: Ref<ComputedBackgroundRef>\n) {\n  const gradientObj: LinearResult | ConicGradient | RadialResult = getParsedGradientDetails(\n    type,\n    value\n  );\n  const [gradients, setGradients] = useState<TableData[]>(() => {\n    return gradientObj.stops.map((item, index) => {\n      return {\n        id: index === gradientObj.stops.length - 1 ? 'end' : createUID(),\n        color: item.color,\n        location: item.offset?.value\n      } as TableData;\n    });\n  });\n  const [gradientDirection, setGradientDirection] = useState(() => {\n    if (type === 'linear-gradient') {\n      if ((gradientObj as LinearResult).orientation.type === 'directional') {\n        switch ((gradientObj as LinearResult).orientation.value) {\n          case 'bottom':\n            return '180';\n          case 'left':\n            return '270';\n          case 'top':\n            return '0';\n          case 'right':\n          default:\n            return '90';\n        }\n      } else {\n        return (\n          (gradientObj as LinearResult).orientation.value as {\n            unit: string;\n            value: string;\n          }\n        ).value;\n      }\n    }\n    if (type === 'conic-gradient') {\n      return (gradientObj as ConicGradient).angle.split('deg')[0];\n    }\n    return '90';\n  });\n\n  const [radialGradientPosition, setRadialGradientPosition] = useState<Position>(() => {\n    if (type === 'radial-gradient') {\n      if (['left', 'right'].includes((gradientObj as RadialResult).position.y.value as string)) {\n        return `${(gradientObj as RadialResult).position.x.value as string} ${(gradientObj as RadialResult).position.y.value as string}` as Position;\n      }\n      return `${(gradientObj as RadialResult).position.x.value as string}` as Position;\n    }\n    return 'center';\n  });\n\n  const testIds = useTestIds(testId, getGradientConfigTestIds);\n  const t = useI18n();\n\n  const onGradientChange = (id: string, key: keyof TableData, updatedValue: string) => {\n    setGradients((x: TableData[]) => {\n      const y = [...x];\n      const el = y.find(z => z.id === id)!;\n      el[key] = updatedValue;\n      return y;\n    });\n  };\n\n  const onGradientDirectionChange = (updatedValue: string) => {\n    setGradientDirection(updatedValue);\n  };\n\n  const columns: ColumnProps<TableData>[] = useMemo(\n    () => [\n      {\n        renderer: data => <GradientColorPicker data={data} onChange={onGradientChange} />,\n        label: t('color')\n      },\n      {\n        renderer: data => {\n          return data.id !== 'end' ? (\n            <GradientLocationInput data={data} onChange={onGradientChange} />\n          ) : (\n            <Text>{data.location}%</Text>\n          );\n        },\n        label: t('location')\n      },\n      {\n        renderer: data => {\n          return data.id !== 'end' ? (\n            <Button\n              variant='text'\n              label={t('delete_stop')}\n              icon\n              compact\n              onClick={() => setGradients(x => x.filter(y => y.id !== data.id))}\n            >\n              <Icon name='trash' />\n            </Button>\n          ) : null;\n        },\n        label: '',\n        noWrap: true\n      }\n    ],\n    []\n  );\n\n  const addSteps = () => {\n    const newStep: TableData = {\n      id: createUID(),\n      color: '#ffffff',\n      location: '10'\n    };\n\n    setGradients(x => {\n      const y = [...x];\n      y.splice(y.length - 1, 0, newStep);\n      return y;\n    });\n  };\n\n  const computedGradient = useMemo(() => {\n    if (type === 'linear-gradient') {\n      return `linear-gradient(${gradientDirection}deg, ${gradients.map(x => `${x.color} ${x.location}%`).join(', ')})`;\n    }\n    if (type === 'conic-gradient') {\n      return `conic-gradient(from ${gradientDirection}deg, ${gradients.map(x => `${x.color} ${x.location}%`).join(', ')})`;\n    }\n\n    return `radial-gradient(at ${radialGradientPosition}, ${gradients.map(x => `${x.color} ${x.location}%`).join(', ')})`;\n  }, [type, gradientDirection, gradients, radialGradientPosition]);\n\n  useImperativeHandle(ref, () => ({\n    getValue: () => computedGradient\n  }));\n\n  return (\n    <StyledFlex container={{ direction: 'column', gap: 1 }}>\n      {type === 'radial-gradient' ? (\n        <Select\n          testId={testIds.position}\n          value={radialGradientPosition}\n          label={t('position')}\n          onChange={e => {\n            setRadialGradientPosition(e.target.value as Position);\n          }}\n        >\n          {radialGradientPositions.map(position => {\n            return (\n              <Option key={position} value={position}>\n                {t(positionTranslationKeyMap[position])}\n              </Option>\n            );\n          })}\n        </Select>\n      ) : (\n        <NumberInput\n          testId={testIds.direction}\n          label={t('direction')}\n          variant='stepper'\n          value={gradientDirection}\n          unit='degree'\n          max={360}\n          min={0}\n          step={1}\n          onChange={onGradientDirectionChange}\n        />\n      )}\n\n      <StyledTableWrapper container={{ direction: 'column', gap: 1, alignItems: 'start' }}>\n        <Table\n          data-testid={testIds.colorStops}\n          title={t('color_stops')}\n          columns={columns}\n          data={gradients}\n        />\n        <Flex\n          data-testid={testIds.addSteps}\n          container={{ gap: 1 }}\n          as={Button}\n          variant='simple'\n          onClick={addSteps}\n        >\n          <Icon name='plus' /> {t('add_stops')}\n        </Flex>\n      </StyledTableWrapper>\n      <Flex data-testid={testIds.gradientPreview} container={{ direction: 'column', gap: 1 }}>\n        <Text variant='h3'>{t('gradient_preview')}</Text>\n        <StyledPreviewContainer>\n          <StyledPreview aria-label={t('gradient_preview')} background={computedGradient} />\n        </StyledPreviewContainer>\n      </Flex>\n    </StyledFlex>\n  );\n});\n\nexport default withTestIds(GradientConfig, getGradientConfigTestIds);\n"]}

package/lib/components/BackgroundPicker/ImageConfig.d.ts

@@ -0,0 +1,6 @@
+import type { ImageConfigProps, ComputedBackgroundRef } from './BackgroundPicker.types';
+declare const _default: import("react").ForwardRefExoticComponent<ImageConfigProps & import("react").RefAttributes<ComputedBackgroundRef>> & {
+    getTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["file-url", "opacity", "size", "position", "repeat", "image-preview"]>;
+};
+export default _default;
+//# sourceMappingURL=ImageConfig.d.ts.map

package/lib/components/BackgroundPicker/ImageConfig.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageConfig.d.ts","sourceRoot":"","sources":["../../../src/components/BackgroundPicker/ImageConfig.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAKV,gBAAgB,EAChB,qBAAqB,EACtB,MAAM,0BAA0B,CAAC;;;;AAyHlC,wBAA+D"}

package/lib/components/BackgroundPicker/ImageConfig.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useMemo, useState } from 'react';
+import { useTestIds, useI18n, Flex, Input, Select, Option, withTestIds, Text } from '@pega/cosmos-react-core';
+import { getImageConfigTestIds } from './BackgroundPicker.test-ids';
+import { repeatTranslationKeyMap, positionTranslationKeyMap } from './BackgroundPicker.types';
+import { StyledPreview, StyledPreviewContainer } from './BackgroundPicker.styles';
+import { getBackgroundImageDetails } from './utils';
+const sizeOptions = ['auto', 'cover', 'contain'];
+const positionOptions = [
+    'center',
+    'top',
+    'right',
+    'bottom',
+    'left',
+    'top left',
+    'top right',
+    'bottom right',
+    'bottom left'
+];
+const repeatOptions = [
+    'no-repeat',
+    'repeat',
+    'repeat-x',
+    'repeat-y',
+    'space',
+    'round'
+];
+const ImageConfig = forwardRef(function ImageConfig({ testId, value }, ref) {
+    const backgroundObj = getBackgroundImageDetails(value);
+    const [imageURL, setImageURL] = useState(backgroundObj.url);
+    const [backgroundSize, setBackgroundSize] = useState(backgroundObj.backgroundSize);
+    const [backgroundPosition, setBackgroundPosition] = useState(backgroundObj.backgroundPosition);
+    const [backgroundRepeat, setBackgroundRepeat] = useState(backgroundObj.backgroundRepeat);
+    const [invalidURL, setInvalidURL] = useState(false);
+    const [showError, setShowError] = useState(false);
+    const testIds = useTestIds(testId, getImageConfigTestIds);
+    const t = useI18n();
+    const background = useMemo(() => {
+        return `url(${invalidURL ? '' : imageURL}) ${backgroundPosition} / ${backgroundSize} ${backgroundRepeat}`;
+    }, [imageURL, backgroundPosition, backgroundRepeat, backgroundSize]);
+    useImperativeHandle(ref, () => ({
+        getValue: () => background
+    }));
+    return (_jsxs(Flex, { container: { direction: 'column', gap: 0.5 }, children: [_jsx(Input, { testId: testIds.fileUrl, type: 'url', value: imageURL, label: t('file_url'), info: showError ? t('file_url_error') : undefined, status: showError ? 'error' : undefined, onChange: e => {
+                    setShowError(false);
+                    setImageURL(e.target.value);
+                    try {
+                        const newUrl = new URL(e.target.value);
+                        if (['http:', 'https:'].includes(newUrl.protocol)) {
+                            setInvalidURL(false);
+                        }
+                        else {
+                            setInvalidURL(true);
+                        }
+                    }
+                    catch {
+                        setInvalidURL(true);
+                    }
+                }, onBlur: () => {
+                    setShowError(invalidURL);
+                } }), _jsx(Select, { testId: testIds.size, label: t('size'), value: backgroundSize, onChange: e => setBackgroundSize(e.target.value), children: sizeOptions.map(option => (_jsx(Option, { value: option, children: t(option) }, option))) }), _jsx(Select, { testId: testIds.position, label: t('position'), value: backgroundPosition, onChange: e => setBackgroundPosition(e.target.value), children: positionOptions.map(option => (_jsx(Option, { value: option, children: t(positionTranslationKeyMap[option]) }, option))) }), _jsx(Select, { testId: testIds.repeat, label: t('repeat'), value: backgroundRepeat, onChange: e => setBackgroundRepeat(e.target.value), children: repeatOptions.map(option => (_jsx(Option, { value: option, children: t(repeatTranslationKeyMap[option]) }, option))) }), _jsxs(Flex, { "data-testid": testIds.imagePreview, container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h3', children: t('image_preview') }), _jsx(StyledPreviewContainer, { children: _jsx(StyledPreview, { background: background, "aria-label": t('image_preview') }) })] })] }));
+});
+export default withTestIds(ImageConfig, getImageConfigTestIds);
+//# sourceMappingURL=ImageConfig.js.map

package/lib/components/BackgroundPicker/ImageConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageConfig.js","sourceRoot":"","sources":["../../../src/components/BackgroundPicker/ImageConfig.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  forwardRef,\n  useImperativeHandle,\n  useMemo,\n  useState,\n  type PropsWithoutRef,\n  type Ref\n} from 'react';\n\nimport {\n  useTestIds,\n  useI18n,\n  Flex,\n  Input,\n  Select,\n  Option,\n  withTestIds,\n  Text\n} from '@pega/cosmos-react-core';\n\nimport { getImageConfigTestIds } from './BackgroundPicker.test-ids';\nimport { repeatTranslationKeyMap, positionTranslationKeyMap } from './BackgroundPicker.types';\nimport type {\n  BackgroundImage,\n  Size,\n  Repeat,\n  Position,\n  ImageConfigProps,\n  ComputedBackgroundRef\n} from './BackgroundPicker.types';\nimport { StyledPreview, StyledPreviewContainer } from './BackgroundPicker.styles';\nimport { getBackgroundImageDetails } from './utils';\n\nconst sizeOptions = ['auto', 'cover', 'contain'] as const satisfies Size[];\nconst positionOptions = [\n  'center',\n  'top',\n  'right',\n  'bottom',\n  'left',\n  'top left',\n  'top right',\n  'bottom right',\n  'bottom left'\n] as const satisfies Position[];\nconst repeatOptions = [\n  'no-repeat',\n  'repeat',\n  'repeat-x',\n  'repeat-y',\n  'space',\n  'round'\n] as const satisfies Repeat[];\n\nconst ImageConfig = forwardRef(function ImageConfig(\n  { testId, value }: PropsWithoutRef<ImageConfigProps>,\n  ref: Ref<ComputedBackgroundRef>\n) {\n  const backgroundObj: BackgroundImage = getBackgroundImageDetails(value);\n\n  const [imageURL, setImageURL] = useState(backgroundObj.url);\n  const [backgroundSize, setBackgroundSize] = useState(backgroundObj.backgroundSize);\n  const [backgroundPosition, setBackgroundPosition] = useState(backgroundObj.backgroundPosition);\n  const [backgroundRepeat, setBackgroundRepeat] = useState(backgroundObj.backgroundRepeat);\n  const [invalidURL, setInvalidURL] = useState(false);\n  const [showError, setShowError] = useState(false);\n  const testIds = useTestIds(testId, getImageConfigTestIds);\n  const t = useI18n();\n\n  const background = useMemo(() => {\n    return `url(${invalidURL ? '' : imageURL}) ${backgroundPosition} / ${backgroundSize} ${backgroundRepeat}`;\n  }, [imageURL, backgroundPosition, backgroundRepeat, backgroundSize]);\n\n  useImperativeHandle(ref, () => ({\n    getValue: () => background\n  }));\n\n  return (\n    <Flex container={{ direction: 'column', gap: 0.5 }}>\n      <Input\n        testId={testIds.fileUrl}\n        type='url'\n        value={imageURL}\n        label={t('file_url')}\n        info={showError ? t('file_url_error') : undefined}\n        status={showError ? 'error' : undefined}\n        onChange={e => {\n          setShowError(false);\n          setImageURL(e.target.value);\n          try {\n            const newUrl = new URL(e.target.value);\n            if (['http:', 'https:'].includes(newUrl.protocol)) {\n              setInvalidURL(false);\n            } else {\n              setInvalidURL(true);\n            }\n          } catch {\n            setInvalidURL(true);\n          }\n        }}\n        onBlur={() => {\n          setShowError(invalidURL);\n        }}\n      />\n      <Select\n        testId={testIds.size}\n        label={t('size')}\n        value={backgroundSize}\n        onChange={e => setBackgroundSize(e.target.value as Size)}\n      >\n        {sizeOptions.map(option => (\n          <Option key={option} value={option}>\n            {t(option)}\n          </Option>\n        ))}\n      </Select>\n      <Select\n        testId={testIds.position}\n        label={t('position')}\n        value={backgroundPosition}\n        onChange={e => setBackgroundPosition(e.target.value as Position)}\n      >\n        {positionOptions.map(option => (\n          <Option key={option} value={option}>\n            {t(positionTranslationKeyMap[option])}\n          </Option>\n        ))}\n      </Select>\n      <Select\n        testId={testIds.repeat}\n        label={t('repeat')}\n        value={backgroundRepeat}\n        onChange={e => setBackgroundRepeat(e.target.value as Repeat)}\n      >\n        {repeatOptions.map(option => (\n          <Option key={option} value={option}>\n            {t(repeatTranslationKeyMap[option])}\n          </Option>\n        ))}\n      </Select>\n      <Flex data-testid={testIds.imagePreview} container={{ direction: 'column', gap: 1 }}>\n        <Text variant='h3'>{t('image_preview')}</Text>\n        <StyledPreviewContainer>\n          <StyledPreview background={background} aria-label={t('image_preview')} />\n        </StyledPreviewContainer>\n      </Flex>\n    </Flex>\n  );\n});\n\nexport default withTestIds(ImageConfig, getImageConfigTestIds);\n"]}

package/lib/components/BackgroundPicker/SolidColorConfig.d.ts

@@ -0,0 +1,6 @@
+import type { ComputedBackgroundRef, SolidColorConfigProps } from './BackgroundPicker.types';
+declare const _default: import("react").ForwardRefExoticComponent<SolidColorConfigProps & import("react").RefAttributes<ComputedBackgroundRef>> & {
+    getTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["color", "opacity", "color-preview"]>;
+};
+export default _default;
+//# sourceMappingURL=SolidColorConfig.d.ts.map

package/lib/components/BackgroundPicker/SolidColorConfig.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidColorConfig.d.ts","sourceRoot":"","sources":["../../../src/components/BackgroundPicker/SolidColorConfig.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;;;;AAwD7F,wBAAyE"}

package/lib/components/BackgroundPicker/SolidColorConfig.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useMemo, useState } from 'react';
+import { parseToRgb, rgb, transparentize } from 'polished';
+import { tryCatch, useTestIds, useI18n, Flex, ColorPicker, Slider, withTestIds, Text } from '@pega/cosmos-react-core';
+import { getSolidColorConfigTestIds } from './BackgroundPicker.test-ids';
+import { StyledPreviewContainer, StyledPreview } from './BackgroundPicker.styles';
+const SolidColorConfig = forwardRef(function SolidColorConfig({ testId, value, disableOpacity }, ref) {
+    const { alpha, ...rgbSpectrum } = tryCatch(() => parseToRgb(value), () => parseToRgb('#fff'));
+    const [color, setColor] = useState(rgb(rgbSpectrum));
+    const [opacity, setOpacity] = useState((alpha ?? 1) * 100);
+    const testIds = useTestIds(testId, getSolidColorConfigTestIds);
+    const t = useI18n();
+    const background = useMemo(() => {
+        return transparentize(1 - opacity / 100, color);
+    }, [opacity, color]);
+    useImperativeHandle(ref, () => ({
+        getValue: () => background
+    }));
+    return (_jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(ColorPicker, { testId: testIds.color, label: t('color'), value: color, onChange: e => {
+                    setColor(e.hex);
+                } }), !disableOpacity && (_jsxs(_Fragment, { children: [_jsx(Slider, { testId: testIds.opacity, label: t('opacity'), value: opacity, onChange: val => setOpacity(val), showProgress: true }), _jsxs(Flex, { "data-testid": testIds.colorPreview, container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h3', children: t('color_preview') }), _jsx(StyledPreviewContainer, { children: _jsx(StyledPreview, { "aria-label": t('color_preview'), background: background }) })] })] }))] }));
+});
+export default withTestIds(SolidColorConfig, getSolidColorConfigTestIds);
+//# sourceMappingURL=SolidColorConfig.js.map

package/lib/components/BackgroundPicker/SolidColorConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidColorConfig.js","sourceRoot":"","sources":["../../../src/components/BackgroundPicker/SolidColorConfig.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,mBAAmB,EACnB,OAAO,EACP,QAAQ,EAGT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAG3D,OAAO,EACL,QAAQ,EACR,UAAU,EACV,OAAO,EACP,IAAI,EACJ,WAAW,EACX,MAAM,EACN,WAAW,EACX,IAAI,EACL,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,0BAA0B,EAAE,MAAM,6BAA6B,CAAC;AAEzE,OAAO,EAAE,sBAAsB,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAElF,MAAM,gBAAgB,GAAG,UAAU,CAAC,SAAS,gBAAgB,CAC3D,EAAE,MAAM,EAAE,KAAK,EAAE,cAAc,EAA0C,EACzE,GAA+B;IAE/B,MAAM,EAAE,KAAK,EAAE,GAAG,WAAW,EAAE,GAAG,QAAQ,CACxC,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAc,EACpC,GAAG,EAAE,CAAC,UAAU,CAAC,MAAM,CAAc,CACtC,CAAC;IAEF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC;IACrD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC;IAC3D,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,0BAA0B,CAAC,CAAC;IAC/D,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE;QAC9B,OAAO,cAAc,CAAC,CAAC,GAAG,OAAO,GAAG,GAAG,EAAE,KAAK,CAAC,CAAC;IAClD,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC;IAErB,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;QAC9B,QAAQ,EAAE,GAAG,EAAE,CAAC,UAAU;KAC3B,CAAC,CAAC,CAAC;IAEJ,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC9C,KAAC,WAAW,IACV,MAAM,EAAE,OAAO,CAAC,KAAK,EACrB,KAAK,EAAE,CAAC,CAAC,OAAO,CAAC,EACjB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAC,EAAE;oBACZ,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;gBAClB,CAAC,GACD,EACD,CAAC,cAAc,IAAI,CAClB,8BACE,KAAC,MAAM,IACL,MAAM,EAAE,OAAO,CAAC,OAAO,EACvB,KAAK,EAAE,CAAC,CAAC,SAAS,CAAC,EACnB,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,GAAG,CAAC,EAAE,CAAC,UAAU,CAAC,GAAG,CAAC,EAChC,YAAY,SACZ,EACF,MAAC,IAAI,mBAAc,OAAO,CAAC,YAAY,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aACjF,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,eAAe,CAAC,GAAQ,EAC9C,KAAC,sBAAsB,cACrB,KAAC,aAAa,kBAAa,CAAC,CAAC,eAAe,CAAC,EAAE,UAAU,EAAE,UAAU,GAAI,GAClD,IACpB,IACN,CACJ,IACI,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC,gBAAgB,EAAE,0BAA0B,CAAC,CAAC","sourcesContent":["import {\n  forwardRef,\n  useImperativeHandle,\n  useMemo,\n  useState,\n  type PropsWithoutRef,\n  type Ref\n} from 'react';\nimport { parseToRgb, rgb, transparentize } from 'polished';\nimport type { RgbaColor } from 'polished/lib/types/color';\n\nimport {\n  tryCatch,\n  useTestIds,\n  useI18n,\n  Flex,\n  ColorPicker,\n  Slider,\n  withTestIds,\n  Text\n} from '@pega/cosmos-react-core';\n\nimport { getSolidColorConfigTestIds } from './BackgroundPicker.test-ids';\nimport type { ComputedBackgroundRef, SolidColorConfigProps } from './BackgroundPicker.types';\nimport { StyledPreviewContainer, StyledPreview } from './BackgroundPicker.styles';\n\nconst SolidColorConfig = forwardRef(function SolidColorConfig(\n  { testId, value, disableOpacity }: PropsWithoutRef<SolidColorConfigProps>,\n  ref: Ref<ComputedBackgroundRef>\n) {\n  const { alpha, ...rgbSpectrum } = tryCatch(\n    () => parseToRgb(value) as RgbaColor,\n    () => parseToRgb('#fff') as RgbaColor\n  );\n\n  const [color, setColor] = useState(rgb(rgbSpectrum));\n  const [opacity, setOpacity] = useState((alpha ?? 1) * 100);\n  const testIds = useTestIds(testId, getSolidColorConfigTestIds);\n  const t = useI18n();\n\n  const background = useMemo(() => {\n    return transparentize(1 - opacity / 100, color);\n  }, [opacity, color]);\n\n  useImperativeHandle(ref, () => ({\n    getValue: () => background\n  }));\n\n  return (\n    <Flex container={{ direction: 'column', gap: 1 }}>\n      <ColorPicker\n        testId={testIds.color}\n        label={t('color')}\n        value={color}\n        onChange={e => {\n          setColor(e.hex);\n        }}\n      />\n      {!disableOpacity && (\n        <>\n          <Slider\n            testId={testIds.opacity}\n            label={t('opacity')}\n            value={opacity}\n            onChange={val => setOpacity(val)}\n            showProgress\n          />\n          <Flex data-testid={testIds.colorPreview} container={{ direction: 'column', gap: 1 }}>\n            <Text variant='h3'>{t('color_preview')}</Text>\n            <StyledPreviewContainer>\n              <StyledPreview aria-label={t('color_preview')} background={background} />\n            </StyledPreviewContainer>\n          </Flex>\n        </>\n      )}\n    </Flex>\n  );\n});\n\nexport default withTestIds(SolidColorConfig, getSolidColorConfigTestIds);\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/BackgroundPicker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,YAAY,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC"}

package/lib/components/BackgroundPicker/index.js

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

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

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

package/lib/components/BackgroundPicker/utils.d.ts

@@ -0,0 +1,24 @@
+import { type LinearResult, type RadialResult } from 'css-gradient-parser';
+import type { BackgroundImage, BackgroundType, ConicGradient, GradientConfigProps } from './BackgroundPicker.types';
+/**
+ * Returns appropriate background type based on value.
+ * @param value - CSS background value string.
+ * @param supportedBackgrounds - List of supported backgrounds.
+ * @returns Appropriate background type based on value.
+ */
+export declare const getBackgroundType: (value: string, supportedBackgrounds: BackgroundType[]) => BackgroundType | undefined;
+/**
+ * Returns appropriate background image data based on value.
+ * @param value - CSS background string.
+ * @returns Appropriate background image data based on value.
+ */
+export declare const getBackgroundImageDetails: (value?: string) => BackgroundImage;
+/**
+ * Returns appropriate gradient data based on gradient type and value.
+ * @param type - Gradient type.
+ * @param value - CSS background value
+ * @returns Appropriate gradient data based on gradient type and value.
+ */
+export declare const getParsedGradientDetails: (type: GradientConfigProps["type"], value: string) => LinearResult | RadialResult | ConicGradient;
+export declare const supportedBackgroundOptions: BackgroundType[];
+//# sourceMappingURL=utils.d.ts.map