@pega/cosmos-react-tools 3.0.0-dev.21.0

package/lib/components/Clipboard/Clipboard.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Clipboard.d.ts","sourceRoot":"","sources":["../../../src/components/Clipboard/Clipboard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA4C,MAAM,OAAO,CAAC;AAEpF,OAAO,EAIL,YAAY,EASb,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,cAAc,EAAS,MAAM,mBAAmB,CAAC;AAuB1D,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAmD/D,CAAC;AACF,eAAe,SAAS,CAAC"}

package/lib/components/Clipboard/Clipboard.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo } from 'react';
+import { Button, Flex, MetaList, Progress, StandardTree, SummaryItem, Table, Text, useI18n, EmptyState } from '@pega/cosmos-react-core';
+import { StyledClipboardFooter, StyledContainer, StyledContent, StyledMain, StyledTreeContainer } from './Clipboard.styles';
+const FieldRenderer = (cell) => {
+    return (_jsx(_Fragment, { children: cell.onClick ? (_jsx(Button, { variant: 'link', onClick: (e) => cell.onClick?.(cell.id, e), children: cell.name })) : (cell.name) }));
+};
+const Clipboard = forwardRef(({ navigation, content, lastUpdated }, ref) => {
+    const t = useI18n();
+    const columns = [
+        {
+            renderer: FieldRenderer,
+            label: t('condition_builder_field_label')
+        },
+        { renderer: 'value', label: t('condition_builder_value_label') }
+    ];
+    const navContent = useMemo(() => _jsx(StandardTree, { ...navigation }), [navigation]);
+    const mainContent = useMemo(() => {
+        if (content) {
+            const metaListItems = content.secondary?.map(({ name, value }) => `${name}: ${value}`);
+            return content.loading ? (_jsx(Progress, { placement: 'local', message: t('loading') })) : (_jsxs(_Fragment, { children: [_jsx(SummaryItem, { primary: _jsx(Text, { variant: 'h3', children: content.primary }), secondary: metaListItems && _jsx(MetaList, { items: metaListItems }), actions: content.actions }), _jsx(Table, { columns: columns, data: content.fields })] }));
+        }
+        return _jsx(EmptyState, {});
+    }, [content]);
+    return (_jsxs(Flex, { as: StyledContainer, container: { direction: 'column' }, ref: ref, children: [_jsxs(Flex, { as: StyledMain, container: true, children: [_jsx(StyledTreeContainer, { children: navContent }), _jsx(Flex, { container: { direction: 'column', pad: 1, gap: 1 }, as: StyledContent, ref: ref, children: mainContent })] }), _jsx(StyledClipboardFooter, { children: lastUpdated && _jsx(Text, { variant: 'secondary', children: lastUpdated }) })] }));
+});
+export default Clipboard;
+//# sourceMappingURL=Clipboard.js.map

package/lib/components/Clipboard/Clipboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Clipboard.js","sourceRoot":"","sources":["../../../src/components/Clipboard/Clipboard.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, PropsWithoutRef, forwardRef, useMemo, FC } from 'react';\n\nimport {\n  Button,\n  ColumnProps,\n  Flex,\n  ForwardProps,\n  MetaList,\n  Progress,\n  StandardTree,\n  SummaryItem,\n  Table,\n  Text,\n  useI18n,\n  EmptyState\n} from '@pega/cosmos-react-core';\n\nimport { ClipboardProps, Field } from './Clipboard.types';\nimport {\n  StyledClipboardFooter,\n  StyledContainer,\n  StyledContent,\n  StyledMain,\n  StyledTreeContainer\n} from './Clipboard.styles';\n\nconst FieldRenderer: FC<Field> = (cell: Field) => {\n  return (\n    <>\n      {cell.onClick ? (\n        <Button variant='link' onClick={(e: MouseEvent) => cell.onClick?.(cell.id, e)}>\n          {cell.name}\n        </Button>\n      ) : (\n        cell.name\n      )}\n    </>\n  );\n};\n\nconst Clipboard: FunctionComponent<ClipboardProps & ForwardProps> = forwardRef(\n  (\n    { navigation, content, lastUpdated }: PropsWithoutRef<ClipboardProps>,\n    ref: ClipboardProps['ref']\n  ) => {\n    const t = useI18n();\n\n    const columns: ColumnProps<Field>[] = [\n      {\n        renderer: FieldRenderer,\n        label: t('condition_builder_field_label')\n      },\n      { renderer: 'value', label: t('condition_builder_value_label') }\n    ];\n\n    const navContent = useMemo(() => <StandardTree {...navigation} />, [navigation]);\n\n    const mainContent = useMemo(() => {\n      if (content) {\n        const metaListItems = content.secondary?.map(({ name, value }) => `${name}: ${value}`);\n        return content.loading ? (\n          <Progress placement='local' message={t('loading')} />\n        ) : (\n          <>\n            <SummaryItem\n              primary={<Text variant='h3'>{content.primary}</Text>}\n              secondary={metaListItems && <MetaList items={metaListItems} />}\n              actions={content.actions}\n            />\n            <Table columns={columns} data={content.fields} />\n          </>\n        );\n      }\n      return <EmptyState />;\n    }, [content]);\n\n    return (\n      <Flex as={StyledContainer} container={{ direction: 'column' }} ref={ref}>\n        <Flex as={StyledMain} container>\n          <StyledTreeContainer>{navContent}</StyledTreeContainer>\n          <Flex container={{ direction: 'column', pad: 1, gap: 1 }} as={StyledContent} ref={ref}>\n            {mainContent}\n          </Flex>\n        </Flex>\n\n        <StyledClipboardFooter>\n          {lastUpdated && <Text variant='secondary'>{lastUpdated}</Text>}\n        </StyledClipboardFooter>\n      </Flex>\n    );\n  }\n);\nexport default Clipboard;\n"]}

package/lib/components/Clipboard/Clipboard.styles.d.ts

@@ -0,0 +1,6 @@
+export declare const StyledContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledTreeContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledMain: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledClipboardFooter: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=Clipboard.styles.d.ts.map

package/lib/components/Clipboard/Clipboard.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Clipboard.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Clipboard/Clipboard.styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,eAAe,yGAE3B,CAAC;AAEF,eAAO,MAAM,mBAAmB,yGAc/B,CAAC;AAIF,eAAO,MAAM,UAAU,yGAgBtB,CAAC;AAIF,eAAO,MAAM,qBAAqB,yGAgBjC,CAAC;AAIF,eAAO,MAAM,aAAa,yGAYxB,CAAC"}

package/lib/components/Clipboard/Clipboard.styles.js

@@ -0,0 +1,55 @@
+import styled, { css } from 'styled-components';
+import { defaultThemeProp, StyledCard } from '@pega/cosmos-react-core';
+import { StyledNodeInteraction } from '@pega/cosmos-react-core/lib/components/Tree/StandardTree.styles';
+import { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';
+export const StyledContainer = styled.div `
+  height: 100%;
+`;
+export const StyledTreeContainer = styled.div(({ theme: { base, base: { palette } } }) => {
+    return css `
+      width: ${base['content-width'].sm};
+      border-inline-end: 0.0625rem solid ${palette['border-line']};
+      overflow: auto;
+      background-color: ${palette['primary-background']};
+    `;
+});
+StyledTreeContainer.defaultProps = defaultThemeProp;
+export const StyledMain = styled.div(({ theme: { base: { shadow } } }) => {
+    return css `
+      height: 100%;
+      overflow: hidden;
+
+      ${StyledNodeInteraction}:focus,
+      ${StyledNodeInteraction}:focus-within {
+        box-shadow: inset ${shadow.focus};
+      }
+    `;
+});
+StyledMain.defaultProps = defaultThemeProp;
+export const StyledClipboardFooter = styled.div(({ theme: { base: { shadow, spacing, palette } } }) => {
+    return css `
+      height: 1.75rem;
+      box-shadow: ${shadow.low};
+      padding-inline: calc(2 * ${spacing});
+      border-top: 0.0625rem solid ${palette['border-line']};
+      background-color: ${palette['primary-background']};
+      overflow: hidden;
+      width: 100%;
+    `;
+});
+StyledClipboardFooter.defaultProps = defaultThemeProp;
+export const StyledContent = styled.div(({ theme }) => {
+    return css `
+    overflow: auto;
+    position: relative;
+    margin: ${theme.base.spacing};
+    background-color: ${theme.base.palette['primary-background']};
+    width: calc(100% - ${theme.base['content-width'].sm});
+
+    && ${StyledCard} ${StyledCardContent} {
+      padding: 0;
+    }
+  `;
+});
+StyledContent.defaultProps = defaultThemeProp;
+//# sourceMappingURL=Clipboard.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Clipboard.styles.js","sourceRoot":"","sources":["../../../src/components/Clipboard/Clipboard.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACvE,OAAO,EAAE,qBAAqB,EAAE,MAAM,iEAAiE,CAAC;AACxG,OAAO,EAAE,iBAAiB,EAAE,MAAM,yDAAyD,CAAC;AAE5F,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;CAExC,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAC3C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EACJ,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;eACC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;2CACI,OAAO,CAAC,aAAa,CAAC;;0BAEvC,OAAO,CAAC,oBAAoB,CAAC;KAClD,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAClC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,MAAM,EAAE,EACjB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;;QAIN,qBAAqB;QACrB,qBAAqB;4BACD,MAAM,CAAC,KAAK;;KAEnC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAC7C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,EACnC,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;oBAEM,MAAM,CAAC,GAAG;iCACG,OAAO;oCACJ,OAAO,CAAC,aAAa,CAAC;0BAChC,OAAO,CAAC,oBAAoB,CAAC;;;KAGlD,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACpD,OAAO,GAAG,CAAA;;;cAGE,KAAK,CAAC,IAAI,CAAC,OAAO;wBACR,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;yBACvC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;;SAE9C,UAAU,IAAI,iBAAiB;;;GAGrC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, StyledCard } from '@pega/cosmos-react-core';\nimport { StyledNodeInteraction } from '@pega/cosmos-react-core/lib/components/Tree/StandardTree.styles';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\n\nexport const StyledContainer = styled.div`\n  height: 100%;\n`;\n\nexport const StyledTreeContainer = styled.div(\n  ({\n    theme: {\n      base,\n      base: { palette }\n    }\n  }) => {\n    return css`\n      width: ${base['content-width'].sm};\n      border-inline-end: 0.0625rem solid ${palette['border-line']};\n      overflow: auto;\n      background-color: ${palette['primary-background']};\n    `;\n  }\n);\n\nStyledTreeContainer.defaultProps = defaultThemeProp;\n\nexport const StyledMain = styled.div(\n  ({\n    theme: {\n      base: { shadow }\n    }\n  }) => {\n    return css`\n      height: 100%;\n      overflow: hidden;\n\n      ${StyledNodeInteraction}:focus,\n      ${StyledNodeInteraction}:focus-within {\n        box-shadow: inset ${shadow.focus};\n      }\n    `;\n  }\n);\n\nStyledMain.defaultProps = defaultThemeProp;\n\nexport const StyledClipboardFooter = styled.div(\n  ({\n    theme: {\n      base: { shadow, spacing, palette }\n    }\n  }) => {\n    return css`\n      height: 1.75rem;\n      box-shadow: ${shadow.low};\n      padding-inline: calc(2 * ${spacing});\n      border-top: 0.0625rem solid ${palette['border-line']};\n      background-color: ${palette['primary-background']};\n      overflow: hidden;\n      width: 100%;\n    `;\n  }\n);\n\nStyledClipboardFooter.defaultProps = defaultThemeProp;\n\nexport const StyledContent = styled.div(({ theme }) => {\n  return css`\n    overflow: auto;\n    position: relative;\n    margin: ${theme.base.spacing};\n    background-color: ${theme.base.palette['primary-background']};\n    width: calc(100% - ${theme.base['content-width'].sm});\n\n    && ${StyledCard} ${StyledCardContent} {\n      padding: 0;\n    }\n  `;\n});\n\nStyledContent.defaultProps = defaultThemeProp;\n"]}

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

@@ -0,0 +1,38 @@
+import { Ref } from 'react';
+import { StandardTreeProps, BaseProps, SummaryItemProps, FieldValueListProps, DateTimeDisplayProps } from '@pega/cosmos-react-core';
+export interface Field {
+    /** Unique id for the field */
+    id: string;
+    /** label for the field */
+    name: string;
+    /** value for the field */
+    value?: string;
+    /**
+     * callback to be invoked on click of the field name
+     * if passed, field name will be rendered as a simple button
+     */
+    onClick?: (id: string, e: MouseEvent) => void;
+}
+export interface ContentProps {
+    /** Title the field list */
+    primary: SummaryItemProps['primary'];
+    /** Metadata for field list */
+    secondary?: FieldValueListProps['fields'];
+    /** Action buttons for field list */
+    actions?: SummaryItemProps['actions'];
+    /** content for the Field list */
+    fields: Field[];
+    /** Boolean to show loading indicator in field list */
+    loading?: boolean;
+}
+export interface ClipboardProps extends BaseProps {
+    /** content for tree navigation */
+    navigation: StandardTreeProps;
+    /** content for the field list */
+    content?: ContentProps;
+    /** content for footer info */
+    lastUpdated?: DateTimeDisplayProps['value'];
+    /** Ref for the component */
+    ref?: Ref<HTMLUListElement>;
+}
+//# sourceMappingURL=Clipboard.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Clipboard.types.d.ts","sourceRoot":"","sources":["../../../src/components/Clipboard/Clipboard.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EACL,iBAAiB,EACjB,SAAS,EACT,gBAAgB,EAChB,mBAAmB,EACnB,oBAAoB,EACrB,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,KAAK;IACpB,8BAA8B;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,0BAA0B;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CAC/C;AAED,MAAM,WAAW,YAAY;IAC3B,2BAA2B;IAC3B,OAAO,EAAE,gBAAgB,CAAC,SAAS,CAAC,CAAC;IACrC,8BAA8B;IAC9B,SAAS,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IAC1C,oCAAoC;IACpC,OAAO,CAAC,EAAE,gBAAgB,CAAC,SAAS,CAAC,CAAC;IACtC,iCAAiC;IACjC,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,sDAAsD;IACtD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C,kCAAkC;IAClC,UAAU,EAAE,iBAAiB,CAAC;IAC9B,iCAAiC;IACjC,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB,8BAA8B;IAC9B,WAAW,CAAC,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;IAC5C,4BAA4B;IAC5B,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B"}

package/lib/components/Clipboard/Clipboard.types.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Clipboard.types.js","sourceRoot":"","sources":["../../../src/components/Clipboard/Clipboard.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Ref } from 'react';\n\nimport {\n  StandardTreeProps,\n  BaseProps,\n  SummaryItemProps,\n  FieldValueListProps,\n  DateTimeDisplayProps\n} from '@pega/cosmos-react-core';\n\nexport interface Field {\n  /** Unique id for the field */\n  id: string;\n  /** label for the field */\n  name: string;\n  /** value for the field */\n  value?: string;\n  /**\n   * callback to be invoked on click of the field name\n   * if passed, field name will be rendered as a simple button\n   */\n  onClick?: (id: string, e: MouseEvent) => void;\n}\n\nexport interface ContentProps {\n  /** Title the field list */\n  primary: SummaryItemProps['primary'];\n  /** Metadata for field list */\n  secondary?: FieldValueListProps['fields'];\n  /** Action buttons for field list */\n  actions?: SummaryItemProps['actions'];\n  /** content for the Field list */\n  fields: Field[];\n  /** Boolean to show loading indicator in field list */\n  loading?: boolean;\n}\n\nexport interface ClipboardProps extends BaseProps {\n  /** content for tree navigation */\n  navigation: StandardTreeProps;\n  /** content for the field list */\n  content?: ContentProps;\n  // TODO: Make it a separate component and accept timestamp or standard date format\n  /** content for footer info */\n  lastUpdated?: DateTimeDisplayProps['value'];\n  /** Ref for the component */\n  ref?: Ref<HTMLUListElement>;\n}\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Clipboard/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC"}

package/lib/components/Clipboard/index.js

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

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

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

package/lib/components/PreviewShell/Footer.d.ts

@@ -0,0 +1,6 @@
+import { FC, PropsWithoutRef } from 'react';
+import { ForwardProps } from '@pega/cosmos-react-core';
+import { FooterProps } from './PreviewShell.types';
+declare const Footer: FC<ForwardProps & PropsWithoutRef<FooterProps>>;
+export default Footer;
+//# sourceMappingURL=Footer.d.ts.map

package/lib/components/PreviewShell/Footer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.d.ts","sourceRoot":"","sources":["../../../src/components/PreviewShell/Footer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA0B,eAAe,EAAwB,MAAM,OAAO,CAAC;AAE1F,OAAO,EAIL,YAAY,EAKb,MAAM,yBAAyB,CAAC;AAMjC,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,YAAY,GAAG,eAAe,CAAC,WAAW,CAAC,CAgF3D,CAAC;AACF,eAAe,MAAM,CAAC"}

package/lib/components/PreviewShell/Footer.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useContext, useState } from 'react';
+import { TabPanel, Tabs, Flex, Button, Icon, MenuButton, useI18n } from '@pega/cosmos-react-core';
+import { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';
+import { StyledTabContainer, StyledToolsContainer, StyledFooter } from './PreviewShell.styles';
+import { footerExpanded } from './utils';
+import PreviewShellContext from './PreviewShellContext';
+const Footer = forwardRef(({ tabs, tabContent, onTabClick, newTabHref, menu }, ref) => {
+    const { footerState, toggleFooter } = useContext(PreviewShellContext);
+    const [currentTabId, setCurrentTabId] = useState(tabs[0].id);
+    const t = useI18n();
+    const toggleButtonLabel = t(footerExpanded(footerState) ? 'collapse' : 'expand');
+    const toggleButtonA11y = t(footerExpanded(footerState) ? 'collapse_debug_tools' : 'expand_debug_tools');
+    const handleTabChange = (id, e) => {
+        setCurrentTabId(id);
+        onTabClick(id, e);
+    };
+    return (_jsxs(Flex, { as: StyledFooter, container: { direction: 'column' }, children: [_jsxs(Flex, { as: StyledTabContainer, container: { justify: 'between' }, children: [_jsx(Flex, { item: { grow: 1 }, as: Tabs, tabs: tabs, currentTabId: currentTabId, onTabClick: handleTabChange }), _jsxs(Flex, { container: { alignItems: 'center', pad: [0, 2] }, children: [menu && (_jsx(MenuButton, { text: t('more_options'), variant: 'simple', icon: 'more', iconOnly: true, menu: menu })), newTabHref && (_jsx(Button, { variant: 'simple', href: newTabHref, target: '_blank', label: t('open_in_new_window_text'), icon: true, children: _jsx(Icon, { name: 'open' }) })), _jsx(Button, { variant: 'simple', icon: true, "aria-expanded": footerExpanded(footerState), label: footerState === expandCollapseStates.high ||
+                                    footerState === expandCollapseStates.low
+                                    ? toggleButtonLabel
+                                    : undefined, "aria-label": toggleButtonA11y, onClick: toggleFooter, children: _jsx(Icon, { name: footerExpanded(footerState) ? 'caret-down' : 'caret-up' }) })] })] }), _jsx(Flex, { as: StyledToolsContainer, ref: ref, "aria-hidden": !footerExpanded(footerState), container: { pad: [1, 2] }, item: { grow: 1 }, children: footerState !== expandCollapseStates.low && (_jsx(TabPanel, { tabId: currentTabId, currentTabId: currentTabId, children: tabContent })) })] }));
+});
+export default Footer;
+//# sourceMappingURL=Footer.js.map

package/lib/components/PreviewShell/Footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.js","sourceRoot":"","sources":["../../../src/components/PreviewShell/Footer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, forwardRef, MouseEvent, PropsWithoutRef, useContext, useState } from 'react';\n\nimport {\n  TabPanel,\n  Tabs,\n  Flex,\n  ForwardProps,\n  Button,\n  Icon,\n  MenuButton,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';\n\nimport { StyledTabContainer, StyledToolsContainer, StyledFooter } from './PreviewShell.styles';\nimport { footerExpanded } from './utils';\nimport PreviewShellContext from './PreviewShellContext';\nimport { FooterProps } from './PreviewShell.types';\n\nconst Footer: FC<ForwardProps & PropsWithoutRef<FooterProps>> = forwardRef(\n  ({ tabs, tabContent, onTabClick, newTabHref, menu }, ref: FooterProps['ref']) => {\n    const { footerState, toggleFooter } = useContext(PreviewShellContext);\n    const [currentTabId, setCurrentTabId] = useState(tabs[0].id);\n    const t = useI18n();\n\n    const toggleButtonLabel = t(footerExpanded(footerState) ? 'collapse' : 'expand');\n    const toggleButtonA11y = t(\n      footerExpanded(footerState) ? 'collapse_debug_tools' : 'expand_debug_tools'\n    );\n\n    const handleTabChange = (id: string, e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n      setCurrentTabId(id);\n      onTabClick(id, e);\n    };\n\n    return (\n      <Flex as={StyledFooter} container={{ direction: 'column' }}>\n        <Flex as={StyledTabContainer} container={{ justify: 'between' }}>\n          <Flex\n            item={{ grow: 1 }}\n            as={Tabs}\n            tabs={tabs}\n            currentTabId={currentTabId}\n            onTabClick={handleTabChange}\n          />\n          <Flex container={{ alignItems: 'center', pad: [0, 2] }}>\n            {menu && (\n              <MenuButton\n                text={t('more_options')}\n                variant='simple'\n                icon='more'\n                iconOnly\n                menu={menu}\n              />\n            )}\n            {newTabHref && (\n              <Button\n                variant='simple'\n                href={newTabHref}\n                target='_blank'\n                label={t('open_in_new_window_text')}\n                icon\n              >\n                <Icon name='open' />\n              </Button>\n            )}\n            <Button\n              variant='simple'\n              icon\n              aria-expanded={footerExpanded(footerState)}\n              label={\n                footerState === expandCollapseStates.high ||\n                footerState === expandCollapseStates.low\n                  ? toggleButtonLabel\n                  : undefined\n              }\n              aria-label={toggleButtonA11y}\n              onClick={toggleFooter}\n            >\n              <Icon name={footerExpanded(footerState) ? 'caret-down' : 'caret-up'} />\n            </Button>\n          </Flex>\n        </Flex>\n        <Flex\n          as={StyledToolsContainer}\n          ref={ref}\n          aria-hidden={!footerExpanded(footerState)}\n          container={{ pad: [1, 2] }}\n          item={{ grow: 1 }}\n        >\n          {footerState !== expandCollapseStates.low && (\n            <TabPanel tabId={currentTabId} currentTabId={currentTabId}>\n              {tabContent}\n            </TabPanel>\n          )}\n        </Flex>\n      </Flex>\n    );\n  }\n);\nexport default Footer;\n"]}

package/lib/components/PreviewShell/Header.d.ts

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

package/lib/components/PreviewShell/Header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/components/PreviewShell/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,EAAE,EAAmB,MAAM,OAAO,CAAC;AAExD,OAAO,EAAQ,YAAY,EAAwB,MAAM,yBAAyB,CAAC;AAInF,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,GAAG,YAAY,CA2B1C,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/components/PreviewShell/Header.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Flex, Status, Avatar, Text } from '@pega/cosmos-react-core';
+import Operator from '@pega/cosmos-react-core/lib/components/AppShell/Operator';
+import { StyledHeader, StyledBareButton, StyledOperator, StyledTitle } from './PreviewShell.styles';
+const Header = forwardRef(({ appName, onClick, href, status, operator }, ref) => {
+    return (_jsxs(Flex, { as: StyledHeader, container: { justify: 'between', alignItems: 'center' }, ref: ref, children: [_jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(StyledTitle, { onClick: onClick, href: href, forwardedAs: onClick || href ? StyledBareButton : Text, children: appName }), status && _jsx(Status, { variant: status.variant, children: status.children })] }), _jsx(Operator, { as: StyledOperator, actions: operator.actions, popover: { placement: 'bottom-start' }, children: _jsx(Avatar, { ...operator.avatar }) })] }));
+});
+export default Header;
+//# sourceMappingURL=Header.js.map

package/lib/components/PreviewShell/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../src/components/PreviewShell/Header.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAuB,MAAM,OAAO,CAAC;AAExD,OAAO,EAAE,IAAI,EAAgB,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACnF,OAAO,QAAQ,MAAM,0DAA0D,CAAC;AAEhF,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAGpG,MAAM,MAAM,GAAmC,UAAU,CACvD,CACE,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAgC,EAC1E,GAAuB,EACvB,EAAE;IACF,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAE,GAAG,aACvF,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC/C,KAAC,WAAW,IACV,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,OAAO,IAAI,IAAI,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,YAErD,OAAO,GACI,EACb,MAAM,IAAI,KAAC,MAAM,IAAC,OAAO,EAAE,MAAM,CAAC,OAAO,YAAG,MAAM,CAAC,QAAQ,GAAU,IACjE,EACP,KAAC,QAAQ,IACP,EAAE,EAAE,cAAc,EAClB,OAAO,EAAE,QAAQ,CAAC,OAAO,EACzB,OAAO,EAAE,EAAE,SAAS,EAAE,cAAc,EAAE,YAEtC,KAAC,MAAM,OAAK,QAAQ,CAAC,MAAM,GAAI,GACtB,IACN,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import { forwardRef, FC, PropsWithoutRef } from 'react';\n\nimport { Flex, ForwardProps, Status, Avatar, Text } from '@pega/cosmos-react-core';\nimport Operator from '@pega/cosmos-react-core/lib/components/AppShell/Operator';\n\nimport { StyledHeader, StyledBareButton, StyledOperator, StyledTitle } from './PreviewShell.styles';\nimport { HeaderProps } from './PreviewShell.types';\n\nconst Header: FC<HeaderProps & ForwardProps> = forwardRef(\n  (\n    { appName, onClick, href, status, operator }: PropsWithoutRef<HeaderProps>,\n    ref: HeaderProps['ref']\n  ) => {\n    return (\n      <Flex as={StyledHeader} container={{ justify: 'between', alignItems: 'center' }} ref={ref}>\n        <Flex container={{ alignItems: 'center', gap: 1 }}>\n          <StyledTitle\n            onClick={onClick}\n            href={href}\n            forwardedAs={onClick || href ? StyledBareButton : Text}\n          >\n            {appName}\n          </StyledTitle>\n          {status && <Status variant={status.variant}>{status.children}</Status>}\n        </Flex>\n        <Operator\n          as={StyledOperator}\n          actions={operator.actions}\n          popover={{ placement: 'bottom-start' }}\n        >\n          <Avatar {...operator.avatar} />\n        </Operator>\n      </Flex>\n    );\n  }\n);\n\nexport default Header;\n"]}

package/lib/components/PreviewShell/PreviewShell.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewShell.d.ts","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,iBAAiB,EAA8B,MAAM,OAAO,CAAC;AAEnG,OAAO,EAAE,YAAY,EAA+B,MAAM,yBAAyB,CAAC;AAOpF,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAEzD,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CA2ErE,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/PreviewShell/PreviewShell.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef, useEffect, useMemo } from 'react';
+import { useI18n, useTransitionState } from '@pega/cosmos-react-core';
+import { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';
+import { StyledIframe, StyledMain } from './PreviewShell.styles';
+import Footer from './Footer';
+import PreviewShellContext from './PreviewShellContext';
+import Header from './Header';
+const PreviewShell = forwardRef(({ header, frameurl, footer: { tabs, tabContent, onTabClick, newTabHref, menu, expanded, onBeforeExpand, onAfterExpand, onBeforeCollapse, onAfterCollapse } }, ref) => {
+    const footerEl = useRef(null);
+    const t = useI18n();
+    const { state: footerState, toggle: toggleFooter, set: setFooterState } = useTransitionState({
+        ref: footerEl,
+        property: 'height',
+        states: expandCollapseStates,
+        defaultState: expanded ? expandCollapseStates.high : expandCollapseStates.low
+    });
+    useEffect(() => {
+        setFooterState(expanded ? expandCollapseStates.high : expandCollapseStates.low);
+    }, [expanded]);
+    useEffect(() => {
+        if (footerState === expandCollapseStates.rising) {
+            onBeforeExpand?.();
+        }
+        else if (footerState === expandCollapseStates.falling) {
+            onBeforeCollapse?.();
+        }
+        else if (footerState === expandCollapseStates.low) {
+            onAfterCollapse?.();
+        }
+        else {
+            onAfterExpand?.();
+        }
+    }, [footerState]);
+    return (_jsxs(PreviewShellContext.Provider, { value: useMemo(() => ({
+            footerState,
+            toggleFooter
+        }), [footerState, toggleFooter]), children: [_jsx(Header, { ...header }), _jsx(StyledMain, { ref: ref, children: _jsx(StyledIframe, { src: frameurl, title: t('preview') }) }), _jsx(Footer, { tabs: tabs, newTabHref: newTabHref, menu: menu, tabContent: tabContent, onTabClick: onTabClick, ref: footerEl })] }));
+});
+export default PreviewShell;
+//# sourceMappingURL=PreviewShell.js.map

package/lib/components/PreviewShell/PreviewShell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewShell.js","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsC,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEnG,OAAO,EAAgB,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AACpF,OAAO,EAAE,oBAAoB,EAAE,MAAM,sDAAsD,CAAC;AAE5F,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AACxD,OAAO,MAAM,MAAM,UAAU,CAAC;AAG9B,MAAM,YAAY,GAAwD,UAAU,CAClF,CACE,EACE,MAAM,EACN,QAAQ,EACR,MAAM,EAAE,EACN,IAAI,EACJ,UAAU,EACV,UAAU,EACV,UAAU,EACV,IAAI,EACJ,QAAQ,EACR,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,eAAe,EAChB,EACkC,EACrC,GAA6B,EAC7B,EAAE;IACF,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC9C,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,EACJ,KAAK,EAAE,WAAW,EAClB,MAAM,EAAE,YAAY,EACpB,GAAG,EAAE,cAAc,EACpB,GAAG,kBAAkB,CAAC;QACrB,GAAG,EAAE,QAAQ;QACb,QAAQ,EAAE,QAAQ;QAClB,MAAM,EAAE,oBAAoB;QAC5B,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAC,CAAC,oBAAoB,CAAC,GAAG;KAC9E,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAC,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAC;IAClF,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,WAAW,KAAK,oBAAoB,CAAC,MAAM,EAAE;YAC/C,cAAc,EAAE,EAAE,CAAC;SACpB;aAAM,IAAI,WAAW,KAAK,oBAAoB,CAAC,OAAO,EAAE;YACvD,gBAAgB,EAAE,EAAE,CAAC;SACtB;aAAM,IAAI,WAAW,KAAK,oBAAoB,CAAC,GAAG,EAAE;YACnD,eAAe,EAAE,EAAE,CAAC;SACrB;aAAM;YACL,aAAa,EAAE,EAAE,CAAC;SACnB;IACH,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,OAAO,CACL,MAAC,mBAAmB,CAAC,QAAQ,IAC3B,KAAK,EAAE,OAAO,CACZ,GAAG,EAAE,CAAC,CAAC;YACL,WAAW;YACX,YAAY;SACb,CAAC,EACF,CAAC,WAAW,EAAE,YAAY,CAAC,CAC5B,aAED,KAAC,MAAM,OAAK,MAAM,GAAI,EACtB,KAAC,UAAU,IAAC,GAAG,EAAE,GAAG,YAClB,KAAC,YAAY,IAAC,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC,SAAS,CAAC,GAAI,GACzC,EACb,KAAC,MAAM,IACL,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,GAAG,EAAE,QAAQ,GACb,IAC2B,CAChC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { forwardRef, PropsWithoutRef, FunctionComponent, useRef, useEffect, useMemo } from 'react';\n\nimport { ForwardProps, useI18n, useTransitionState } from '@pega/cosmos-react-core';\nimport { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';\n\nimport { StyledIframe, StyledMain } from './PreviewShell.styles';\nimport Footer from './Footer';\nimport PreviewShellContext from './PreviewShellContext';\nimport Header from './Header';\nimport { PreviewShellProps } from './PreviewShell.types';\n\nconst PreviewShell: FunctionComponent<PreviewShellProps & ForwardProps> = forwardRef(\n  (\n    {\n      header,\n      frameurl,\n      footer: {\n        tabs,\n        tabContent,\n        onTabClick,\n        newTabHref,\n        menu,\n        expanded,\n        onBeforeExpand,\n        onAfterExpand,\n        onBeforeCollapse,\n        onAfterCollapse\n      }\n    }: PropsWithoutRef<PreviewShellProps>,\n    ref: PreviewShellProps['ref']\n  ) => {\n    const footerEl = useRef<HTMLDivElement>(null);\n    const t = useI18n();\n\n    const {\n      state: footerState,\n      toggle: toggleFooter,\n      set: setFooterState\n    } = useTransitionState({\n      ref: footerEl,\n      property: 'height',\n      states: expandCollapseStates,\n      defaultState: expanded ? expandCollapseStates.high : expandCollapseStates.low\n    });\n\n    useEffect(() => {\n      setFooterState(expanded ? expandCollapseStates.high : expandCollapseStates.low);\n    }, [expanded]);\n\n    useEffect(() => {\n      if (footerState === expandCollapseStates.rising) {\n        onBeforeExpand?.();\n      } else if (footerState === expandCollapseStates.falling) {\n        onBeforeCollapse?.();\n      } else if (footerState === expandCollapseStates.low) {\n        onAfterCollapse?.();\n      } else {\n        onAfterExpand?.();\n      }\n    }, [footerState]);\n\n    return (\n      <PreviewShellContext.Provider\n        value={useMemo(\n          () => ({\n            footerState,\n            toggleFooter\n          }),\n          [footerState, toggleFooter]\n        )}\n      >\n        <Header {...header} />\n        <StyledMain ref={ref}>\n          <StyledIframe src={frameurl} title={t('preview')} />\n        </StyledMain>\n        <Footer\n          tabs={tabs}\n          newTabHref={newTabHref}\n          menu={menu}\n          tabContent={tabContent}\n          onTabClick={onTabClick}\n          ref={footerEl}\n        />\n      </PreviewShellContext.Provider>\n    );\n  }\n);\n\nexport default PreviewShell;\n"]}

package/lib/components/PreviewShell/PreviewShell.styles.d.ts

@@ -0,0 +1,11 @@
+import { Text } from '@pega/cosmos-react-core';
+export declare const StyledHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledTitle: typeof Text;
+export declare const StyledBareButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core/lib/components/Button/BareButton").BareButtonProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledOperator: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledMain: import("styled-components").StyledComponent<"main", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledIframe: import("styled-components").StyledComponent<"iframe", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledFooter: import("styled-components").StyledComponent<"footer", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledTabContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledToolsContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=PreviewShell.styles.d.ts.map

package/lib/components/PreviewShell/PreviewShell.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewShell.styles.d.ts","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShell.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAoB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAYjE,eAAO,MAAM,YAAY,4GAOvB,CAAC;AAIH,eAAO,MAAM,WAAW,EAAE,OAAO,IAS/B,CAAC;AAIH,eAAO,MAAM,gBAAgB,0QAM3B,CAAC;AAIH,eAAO,MAAM,cAAc,4GAQ1B,CAAC;AAIF,eAAO,MAAM,UAAU,0GAcrB,CAAC;AAIH,eAAO,MAAM,YAAY,4GAIxB,CAAC;AAEF,eAAO,MAAM,YAAY,4GAKvB,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAgB7B,CAAC;AAIH,eAAO,MAAM,oBAAoB,yGAsBhC,CAAC"}

package/lib/components/PreviewShell/PreviewShell.styles.js

@@ -0,0 +1,110 @@
+import styled, { css } from 'styled-components';
+import { useContext } from 'react';
+import { defaultThemeProp, Text } from '@pega/cosmos-react-core';
+import { StyledTabs } from '@pega/cosmos-react-core/lib/components/Tabs/Tabs';
+import BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';
+import { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';
+import PreviewShellContext from './PreviewShellContext';
+import footerexpanded from './utils';
+const footerExpandedHeight = '50vh';
+const footerOffset = '2.5rem';
+const headerHeight = '3rem';
+export const StyledHeader = styled.header(({ theme }) => {
+    return css `
+    height: ${headerHeight};
+    padding: 0 calc(2 * ${theme.base.spacing});
+    border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
+    background-color: ${theme.base.palette['primary-background']};
+  `;
+});
+StyledHeader.defaultProps = defaultThemeProp;
+export const StyledTitle = styled(Text)(({ theme }) => {
+    return css `
+    max-width: ${theme.base['content-width'].xs};
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    color: ${theme.base.palette['foreground-color']};
+    font-weight: ${theme.base['font-weight']['semi-bold']};
+  `;
+});
+StyledTitle.defaultProps = defaultThemeProp;
+export const StyledBareButton = styled(BareButton)(({ theme }) => {
+    return css `
+    &:not([disabled]):focus {
+      box-shadow: ${theme.base.shadow.focus};
+    }
+  `;
+});
+StyledBareButton.defaultProps = defaultThemeProp;
+export const StyledOperator = styled.button(({ theme }) => css `
+    border-radius: 50%;
+
+    :focus {
+      box-shadow: ${theme.base.shadow.focus};
+    }
+  `);
+StyledOperator.defaultProps = defaultThemeProp;
+export const StyledMain = styled.main(({ theme }) => {
+    const { footerState } = useContext(PreviewShellContext);
+    const heightDelta = footerexpanded(footerState)
+        ? `${footerExpandedHeight} - ${headerHeight}`
+        : `${footerOffset} - ${headerHeight}`;
+    return css `
+    height: calc(100vh - ${heightDelta});
+    transition: height ${theme.base.animation.speed} ${theme.base.animation.timing.ease};
+    width: 100%;
+    padding: calc(2 * ${theme.base.spacing});
+    background-color: ${theme.base.colors.slate.medium};
+    overflow: hidden;
+  `;
+});
+StyledMain.defaultProps = defaultThemeProp;
+export const StyledIframe = styled.iframe `
+  width: 100%;
+  height: 100%;
+  border: none;
+`;
+export const StyledFooter = styled.footer(({ theme }) => {
+    return css `
+    background-color: ${theme.base.palette['primary-background']};
+    overflow: hidden;
+  `;
+});
+StyledFooter.defaultProps = defaultThemeProp;
+export const StyledTabContainer = styled.div(({ theme }) => {
+    return css `
+    height: ${footerOffset};
+    border-top: 0.0625rem solid ${theme.base.palette['border-line']};
+    border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
+    text-decoration: none;
+
+    & ${StyledTabs} {
+      height: 100%;
+      border-bottom: none;
+
+      button {
+        height: 100%;
+      }
+    }
+  `;
+});
+StyledTabContainer.defaultProps = defaultThemeProp;
+export const StyledToolsContainer = styled.div(({ theme: { base: { animation } } }) => {
+    const { footerState } = useContext(PreviewShellContext);
+    const containerHeight = footerexpanded(footerState)
+        ? `calc(${footerExpandedHeight} - ${footerOffset})`
+        : 0;
+    return css `
+      height: ${containerHeight};
+      padding: 0;
+      transition: height ${animation.speed} ${animation.timing.ease};
+      overflow: auto;
+
+      ${StyledTabPanel} {
+        width: 100%;
+      }
+    `;
+});
+StyledToolsContainer.defaultProps = defaultThemeProp;
+//# sourceMappingURL=PreviewShell.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewShell.styles.js","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShell.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { useContext } from 'react';\n\nimport { defaultThemeProp, Text } from '@pega/cosmos-react-core';\nimport { StyledTabs } from '@pega/cosmos-react-core/lib/components/Tabs/Tabs';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';\n\nimport PreviewShellContext from './PreviewShellContext';\nimport footerexpanded from './utils';\n\nconst footerExpandedHeight = '50vh';\nconst footerOffset = '2.5rem';\nconst headerHeight = '3rem';\n\nexport const StyledHeader = styled.header(({ theme }) => {\n  return css`\n    height: ${headerHeight};\n    padding: 0 calc(2 * ${theme.base.spacing});\n    border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n    background-color: ${theme.base.palette['primary-background']};\n  `;\n});\n\nStyledHeader.defaultProps = defaultThemeProp;\n\nexport const StyledTitle: typeof Text = styled(Text)(({ theme }) => {\n  return css`\n    max-width: ${theme.base['content-width'].xs};\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n    color: ${theme.base.palette['foreground-color']};\n    font-weight: ${theme.base['font-weight']['semi-bold']};\n  `;\n});\n\nStyledTitle.defaultProps = defaultThemeProp;\n\nexport const StyledBareButton = styled(BareButton)(({ theme }) => {\n  return css`\n    &:not([disabled]):focus {\n      box-shadow: ${theme.base.shadow.focus};\n    }\n  `;\n});\n\nStyledBareButton.defaultProps = defaultThemeProp;\n\nexport const StyledOperator = styled.button(\n  ({ theme }) => css`\n    border-radius: 50%;\n\n    :focus {\n      box-shadow: ${theme.base.shadow.focus};\n    }\n  `\n);\n\nStyledOperator.defaultProps = defaultThemeProp;\n\nexport const StyledMain = styled.main(({ theme }) => {\n  const { footerState } = useContext(PreviewShellContext);\n  const heightDelta = footerexpanded(footerState)\n    ? `${footerExpandedHeight} - ${headerHeight}`\n    : `${footerOffset} - ${headerHeight}`;\n\n  return css`\n    height: calc(100vh - ${heightDelta});\n    transition: height ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n    width: 100%;\n    padding: calc(2 * ${theme.base.spacing});\n    background-color: ${theme.base.colors.slate.medium};\n    overflow: hidden;\n  `;\n});\n\nStyledMain.defaultProps = defaultThemeProp;\n\nexport const StyledIframe = styled.iframe`\n  width: 100%;\n  height: 100%;\n  border: none;\n`;\n\nexport const StyledFooter = styled.footer(({ theme }) => {\n  return css`\n    background-color: ${theme.base.palette['primary-background']};\n    overflow: hidden;\n  `;\n});\n\nStyledFooter.defaultProps = defaultThemeProp;\n\nexport const StyledTabContainer = styled.div(({ theme }) => {\n  return css`\n    height: ${footerOffset};\n    border-top: 0.0625rem solid ${theme.base.palette['border-line']};\n    border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n    text-decoration: none;\n\n    & ${StyledTabs} {\n      height: 100%;\n      border-bottom: none;\n\n      button {\n        height: 100%;\n      }\n    }\n  `;\n});\n\nStyledTabContainer.defaultProps = defaultThemeProp;\n\nexport const StyledToolsContainer = styled.div(\n  ({\n    theme: {\n      base: { animation }\n    }\n  }) => {\n    const { footerState } = useContext(PreviewShellContext);\n    const containerHeight = footerexpanded(footerState)\n      ? `calc(${footerExpandedHeight} - ${footerOffset})`\n      : 0;\n\n    return css`\n      height: ${containerHeight};\n      padding: 0;\n      transition: height ${animation.speed} ${animation.timing.ease};\n      overflow: auto;\n\n      ${StyledTabPanel} {\n        width: 100%;\n      }\n    `;\n  }\n);\n\nStyledToolsContainer.defaultProps = defaultThemeProp;\n"]}

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

@@ -0,0 +1,55 @@
+import { MouseEvent, ReactNode, Ref } from 'react';
+import { AppShellProps, AvatarProps, BaseProps, LinkProps, MenuProps, NoChildrenProp, OmitStrict, StatusProps, Tab } from '@pega/cosmos-react-core';
+import { AppInfoProps } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.types';
+interface OperatorProps extends OmitStrict<AppShellProps['operator'], 'avatar'> {
+    avatar: AvatarProps;
+}
+export interface HeaderProps extends BaseProps, NoChildrenProp, Pick<AppInfoProps, 'appName' | 'href' | 'onClick'> {
+    /** Represents the current status of the application */
+    status?: StatusProps;
+    /** The active user of the application. */
+    operator: OperatorProps;
+    /** Ref for the header */
+    ref?: Ref<HTMLDivElement>;
+}
+export interface FooterProps {
+    /**
+     * If true, the footer will be expanded.
+     * @default false
+     */
+    expanded?: boolean;
+    /** An array of Tab data used to render the individual footer tabs.
+     * @default []
+     */
+    tabs: Tab[];
+    /**  Content for the tabs.  */
+    tabContent: ReactNode;
+    /** Callback triggered every time a new tab is clicked and returns an id as well as the click event. */
+    onTabClick: (id: string, event?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+    /** URL to open footer in a new window. */
+    newTabHref?: LinkProps['href'];
+    /** Menu items to be shown on more options button */
+    menu?: MenuProps;
+    /**  Callback fired before footer expands.  */
+    onBeforeExpand?: () => void;
+    /**  Callback fired after footer expands.  */
+    onAfterExpand?: () => void;
+    /** Callback fired before footer collapses.  */
+    onBeforeCollapse?: () => void;
+    /** Callback fired after footer collapses.  */
+    onAfterCollapse?: () => void;
+    /** Ref for the footer */
+    ref?: Ref<HTMLDivElement>;
+}
+export interface PreviewShellProps {
+    /** Header of the shell */
+    header: HeaderProps;
+    /** src for the main content iframe */
+    frameurl: string;
+    /** Footer of the shell */
+    footer: FooterProps;
+    /** Ref for the shell */
+    ref?: Ref<HTMLElement>;
+}
+export {};
+//# sourceMappingURL=PreviewShell.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewShell.types.d.ts","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShell.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,EACL,aAAa,EACb,WAAW,EACX,SAAS,EACT,SAAS,EACT,SAAS,EACT,cAAc,EACd,UAAU,EACV,WAAW,EACX,GAAG,EACJ,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,gEAAgE,CAAC;AAE9F,UAAU,aAAc,SAAQ,UAAU,CAAC,aAAa,CAAC,UAAU,CAAC,EAAE,QAAQ,CAAC;IAC7E,MAAM,EAAE,WAAW,CAAC;CACrB;AAED,MAAM,WAAW,WACf,SAAQ,SAAS,EACf,cAAc,EACd,IAAI,CAAC,YAAY,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC;IACpD,uDAAuD;IACvD,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,0CAA0C;IAC1C,QAAQ,EAAE,aAAa,CAAC;IACxB,yBAAyB;IACzB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,MAAM,WAAW,WAAW;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,8BAA8B;IAC9B,UAAU,EAAE,SAAS,CAAC;IACtB,uGAAuG;IACvG,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC5F,0CAA0C;IAC1C,UAAU,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAC/B,oDAAoD;IACpD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,8CAA8C;IAC9C,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,6CAA6C;IAC7C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,8CAA8C;IAC9C,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,yBAAyB;IACzB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,MAAM,WAAW,iBAAiB;IAChC,0BAA0B;IAC1B,MAAM,EAAE,WAAW,CAAC;IACpB,sCAAsC;IACtC,QAAQ,EAAE,MAAM,CAAC;IACjB,0BAA0B;IAC1B,MAAM,EAAE,WAAW,CAAC;IACpB,wBAAwB;IACxB,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB"}

package/lib/components/PreviewShell/PreviewShell.types.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewShell.types.js","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShell.types.ts"],"names":[],"mappings":"","sourcesContent":["import { MouseEvent, ReactNode, Ref } from 'react';\n\nimport {\n  AppShellProps,\n  AvatarProps,\n  BaseProps,\n  LinkProps,\n  MenuProps,\n  NoChildrenProp,\n  OmitStrict,\n  StatusProps,\n  Tab\n} from '@pega/cosmos-react-core';\nimport { AppInfoProps } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.types';\n\ninterface OperatorProps extends OmitStrict<AppShellProps['operator'], 'avatar'> {\n  avatar: AvatarProps;\n}\n\nexport interface HeaderProps\n  extends BaseProps,\n    NoChildrenProp,\n    Pick<AppInfoProps, 'appName' | 'href' | 'onClick'> {\n  /** Represents the current status of the application */\n  status?: StatusProps;\n  /** The active user of the application. */\n  operator: OperatorProps;\n  /** Ref for the header */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface FooterProps {\n  /**\n   * If true, the footer will be expanded.\n   * @default false\n   */\n  expanded?: boolean;\n  /** An array of Tab data used to render the individual footer tabs.\n   * @default []\n   */\n  tabs: Tab[];\n  /**  Content for the tabs.  */\n  tabContent: ReactNode;\n  /** Callback triggered every time a new tab is clicked and returns an id as well as the click event. */\n  onTabClick: (id: string, event?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n  /** URL to open footer in a new window. */\n  newTabHref?: LinkProps['href'];\n  /** Menu items to be shown on more options button */\n  menu?: MenuProps;\n  /**  Callback fired before footer expands.  */\n  onBeforeExpand?: () => void;\n  /**  Callback fired after footer expands.  */\n  onAfterExpand?: () => void;\n  /** Callback fired before footer collapses.  */\n  onBeforeCollapse?: () => void;\n  /** Callback fired after footer collapses.  */\n  onAfterCollapse?: () => void;\n  /** Ref for the footer */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface PreviewShellProps {\n  /** Header of the shell */\n  header: HeaderProps;\n  /** src for the main content iframe */\n  frameurl: string;\n  /** Footer of the shell */\n  footer: FooterProps;\n  /** Ref for the shell */\n  ref?: Ref<HTMLElement>;\n}\n"]}

package/lib/components/PreviewShell/PreviewShellContext.d.ts

@@ -0,0 +1,8 @@
+import { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';
+export interface PreviewShellContextValue {
+    footerState: typeof expandCollapseStates[keyof typeof expandCollapseStates];
+    toggleFooter: () => void;
+}
+declare const PreviewShellContext: import("react").Context<PreviewShellContextValue>;
+export default PreviewShellContext;
+//# sourceMappingURL=PreviewShellContext.d.ts.map

package/lib/components/PreviewShell/PreviewShellContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewShellContext.d.ts","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShellContext.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,sDAAsD,CAAC;AAE5F,MAAM,WAAW,wBAAwB;IACvC,WAAW,EAAE,OAAO,oBAAoB,CAAC,MAAM,OAAO,oBAAoB,CAAC,CAAC;IAC5E,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED,QAAA,MAAM,mBAAmB,mDAGvB,CAAC;AAEH,eAAe,mBAAmB,CAAC"}

package/lib/components/PreviewShell/PreviewShellContext.js

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+import { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';
+const PreviewShellContext = createContext({
+    footerState: expandCollapseStates.low,
+    toggleFooter: () => { }
+});
+export default PreviewShellContext;
+//# sourceMappingURL=PreviewShellContext.js.map

package/lib/components/PreviewShell/PreviewShellContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewShellContext.js","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShellContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,OAAO,EAAE,oBAAoB,EAAE,MAAM,sDAAsD,CAAC;AAO5F,MAAM,mBAAmB,GAAG,aAAa,CAA2B;IAClE,WAAW,EAAE,oBAAoB,CAAC,GAAG;IACrC,YAAY,EAAE,GAAG,EAAE,GAAE,CAAC;CACvB,CAAC,CAAC;AAEH,eAAe,mBAAmB,CAAC","sourcesContent":["import { createContext } from 'react';\n\nimport { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';\n\nexport interface PreviewShellContextValue {\n  footerState: typeof expandCollapseStates[keyof typeof expandCollapseStates];\n  toggleFooter: () => void;\n}\n\nconst PreviewShellContext = createContext<PreviewShellContextValue>({\n  footerState: expandCollapseStates.low,\n  toggleFooter: () => {}\n});\n\nexport default PreviewShellContext;\n"]}

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

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

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

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

package/lib/components/PreviewShell/index.js

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

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

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

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

@@ -0,0 +1,4 @@
+import { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';
+export declare const footerExpanded: (transitionState: (typeof expandCollapseStates)[keyof typeof expandCollapseStates]) => boolean;
+export default footerExpanded;
+//# sourceMappingURL=utils.d.ts.map

package/lib/components/PreviewShell/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/PreviewShell/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,sDAAsD,CAAC;AAE5F,eAAO,MAAM,cAAc,oBACR,CAAA,2BAA2B,EAAC,MAAM,2BAA2B,CAAC,YAEiB,CAAC;AAEnG,eAAe,cAAc,CAAC"}

package/lib/components/PreviewShell/utils.js

@@ -0,0 +1,4 @@
+import { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';
+export const footerExpanded = (transitionState) => transitionState === expandCollapseStates.rising || transitionState === expandCollapseStates.high;
+export default footerExpanded;
+//# sourceMappingURL=utils.js.map

package/lib/components/PreviewShell/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/PreviewShell/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,sDAAsD,CAAC;AAE5F,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,eAA+E,EAC/E,EAAE,CACF,eAAe,KAAK,oBAAoB,CAAC,MAAM,IAAI,eAAe,KAAK,oBAAoB,CAAC,IAAI,CAAC;AAEnG,eAAe,cAAc,CAAC","sourcesContent":["import { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';\n\nexport const footerExpanded = (\n  transitionState: typeof expandCollapseStates[keyof typeof expandCollapseStates]\n) =>\n  transitionState === expandCollapseStates.rising || transitionState === expandCollapseStates.high;\n\nexport default footerExpanded;\n"]}

package/lib/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Clipboard } from './components/Clipboard';
+export * from './components/Clipboard';
+export { default as PreviewShell } from './components/PreviewShell';
+export * from './components/PreviewShell';
+//# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC"}

package/lib/index.js

@@ -0,0 +1,6 @@
+// This file is autogenerated. Any changes will be overwritten.
+export { default as Clipboard } from './components/Clipboard';
+export * from './components/Clipboard';
+export { default as PreviewShell } from './components/PreviewShell';
+export * from './components/PreviewShell';
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\nexport { default as Clipboard } from './components/Clipboard';\nexport * from './components/Clipboard';\nexport { default as PreviewShell } from './components/PreviewShell';\nexport * from './components/PreviewShell';\n"]}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@pega/cosmos-react-tools",
+  "version": "3.0.0-dev.21.0",
+  "author": "Pegasystems",
+  "license": "SEE LICENSE IN LICENSE",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/pegasystems/cosmos-react.git",
+    "directory": "packages/cosmos-tools"
+  },
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "files": [
+    "LICENSE",
+    "README.md",
+    "lib"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsc -b"
+  },
+  "dependencies": {
+    "@pega/cosmos-react-core": "3.0.0-dev.21.0",
+    "@types/react": "^16.14.24 || ^17.0.38",
+    "@types/react-dom": "^16.9.14 || ^17.0.11",
+    "@types/styled-components": "^5.1.7",
+    "polished": "^4.1.0",
+    "react": "^16.14.0 || ^17.0.0",
+    "react-dom": "^16.14.0 || ^17.0.0",
+    "styled-components": "^5.2.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-a11y": "^6.4.19",
+    "@storybook/addon-actions": "^6.4.19",
+    "@storybook/addon-storysource": "^6.4.19",
+    "@storybook/addon-toolbars": "^6.4.19",
+    "@storybook/addons": "^6.4.19",
+    "@storybook/react": "^6.4.19",
+    "@storybook/testing-react": "^1.2.4",
+    "@storybook/theming": "^6.4.19",
+    "@testing-library/jest-dom": "^5.16.2",
+    "@testing-library/react": "^12.1.3",
+    "@testing-library/user-event": "^13.5.0",
+    "typescript": "~4.7.2"
+  }
+}