@pega/cosmos-react-build 2.1.3 → 2.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +3 -3
- package/lib/components/AppHeader/AppHeader.d.ts +0 -29
- package/lib/components/AppHeader/AppHeader.d.ts.map +0 -1
- package/lib/components/AppHeader/AppHeader.js +0 -32
- package/lib/components/AppHeader/AppHeader.js.map +0 -1
- package/lib/components/AppHeader/AppHeader.styles.d.ts +0 -12
- package/lib/components/AppHeader/AppHeader.styles.d.ts.map +0 -1
- package/lib/components/AppHeader/AppHeader.styles.js +0 -123
- package/lib/components/AppHeader/AppHeader.styles.js.map +0 -1
- package/lib/components/AppHeader/index.d.ts +0 -3
- package/lib/components/AppHeader/index.d.ts.map +0 -1
- package/lib/components/AppHeader/index.js +0 -2
- package/lib/components/AppHeader/index.js.map +0 -1
- package/lib/components/AppShell/AppShell.d.ts +0 -4
- package/lib/components/AppShell/AppShell.d.ts.map +0 -1
- package/lib/components/AppShell/AppShell.js +0 -84
- package/lib/components/AppShell/AppShell.js.map +0 -1
- package/lib/components/AppShell/AppShell.styles.d.ts +0 -20
- package/lib/components/AppShell/AppShell.styles.d.ts.map +0 -1
- package/lib/components/AppShell/AppShell.styles.js +0 -331
- package/lib/components/AppShell/AppShell.styles.js.map +0 -1
- package/lib/components/AppShell/AppShell.types.d.ts +0 -43
- package/lib/components/AppShell/AppShell.types.d.ts.map +0 -1
- package/lib/components/AppShell/AppShell.types.js +0 -2
- package/lib/components/AppShell/AppShell.types.js.map +0 -1
- package/lib/components/AppShell/AppShellContext.d.ts +0 -4
- package/lib/components/AppShell/AppShellContext.d.ts.map +0 -1
- package/lib/components/AppShell/AppShellContext.js +0 -10
- package/lib/components/AppShell/AppShellContext.js.map +0 -1
- package/lib/components/AppShell/index.d.ts +0 -3
- package/lib/components/AppShell/index.d.ts.map +0 -1
- package/lib/components/AppShell/index.js +0 -2
- package/lib/components/AppShell/index.js.map +0 -1
- package/lib/components/FlowModeller/AddNode.d.ts +0 -16
- package/lib/components/FlowModeller/AddNode.d.ts.map +0 -1
- package/lib/components/FlowModeller/AddNode.js +0 -62
- package/lib/components/FlowModeller/AddNode.js.map +0 -1
- package/lib/components/FlowModeller/FlowModeller.d.ts +0 -21
- package/lib/components/FlowModeller/FlowModeller.d.ts.map +0 -1
- package/lib/components/FlowModeller/FlowModeller.js +0 -190
- package/lib/components/FlowModeller/FlowModeller.js.map +0 -1
- package/lib/components/FlowModeller/Node/Node.types.d.ts +0 -54
- package/lib/components/FlowModeller/Node/Node.types.d.ts.map +0 -1
- package/lib/components/FlowModeller/Node/Node.types.js +0 -28
- package/lib/components/FlowModeller/Node/Node.types.js.map +0 -1
- package/lib/components/FlowModeller/Node/NodeTemplate.styles.d.ts +0 -15
- package/lib/components/FlowModeller/Node/NodeTemplate.styles.d.ts.map +0 -1
- package/lib/components/FlowModeller/Node/NodeTemplate.styles.js +0 -128
- package/lib/components/FlowModeller/Node/NodeTemplate.styles.js.map +0 -1
- package/lib/components/FlowModeller/Node/NodeTemplates.d.ts +0 -6
- package/lib/components/FlowModeller/Node/NodeTemplates.d.ts.map +0 -1
- package/lib/components/FlowModeller/Node/NodeTemplates.js +0 -64
- package/lib/components/FlowModeller/Node/NodeTemplates.js.map +0 -1
- package/lib/components/FlowModeller/NodeLibrary.d.ts +0 -13
- package/lib/components/FlowModeller/NodeLibrary.d.ts.map +0 -1
- package/lib/components/FlowModeller/NodeLibrary.js +0 -51
- package/lib/components/FlowModeller/NodeLibrary.js.map +0 -1
- package/lib/components/FlowModeller/Renderer/Connectors.d.ts +0 -13
- package/lib/components/FlowModeller/Renderer/Connectors.d.ts.map +0 -1
- package/lib/components/FlowModeller/Renderer/Connectors.js +0 -47
- package/lib/components/FlowModeller/Renderer/Connectors.js.map +0 -1
- package/lib/components/FlowModeller/Renderer/Nodes.d.ts +0 -9
- package/lib/components/FlowModeller/Renderer/Nodes.d.ts.map +0 -1
- package/lib/components/FlowModeller/Renderer/Nodes.js +0 -25
- package/lib/components/FlowModeller/Renderer/Nodes.js.map +0 -1
- package/lib/components/FlowModeller/Renderer/Renderer.d.ts +0 -5
- package/lib/components/FlowModeller/Renderer/Renderer.d.ts.map +0 -1
- package/lib/components/FlowModeller/Renderer/Renderer.js +0 -17
- package/lib/components/FlowModeller/Renderer/Renderer.js.map +0 -1
- package/lib/components/FlowModeller/Renderer/Renderer.types.d.ts +0 -18
- package/lib/components/FlowModeller/Renderer/Renderer.types.d.ts.map +0 -1
- package/lib/components/FlowModeller/Renderer/Renderer.types.js +0 -2
- package/lib/components/FlowModeller/Renderer/Renderer.types.js.map +0 -1
- package/lib/components/FlowModeller/Renderer/Utils/Graph.d.ts +0 -54
- package/lib/components/FlowModeller/Renderer/Utils/Graph.d.ts.map +0 -1
- package/lib/components/FlowModeller/Renderer/Utils/Graph.js +0 -302
- package/lib/components/FlowModeller/Renderer/Utils/Graph.js.map +0 -1
- package/lib/components/FlowModeller/Renderer/Utils/GraphLayout.d.ts +0 -35
- package/lib/components/FlowModeller/Renderer/Utils/GraphLayout.d.ts.map +0 -1
- package/lib/components/FlowModeller/Renderer/Utils/GraphLayout.js +0 -107
- package/lib/components/FlowModeller/Renderer/Utils/GraphLayout.js.map +0 -1
- package/lib/components/FlowModeller/Renderer/Utils/GraphTraversal.d.ts +0 -24
- package/lib/components/FlowModeller/Renderer/Utils/GraphTraversal.d.ts.map +0 -1
- package/lib/components/FlowModeller/Renderer/Utils/GraphTraversal.js +0 -152
- package/lib/components/FlowModeller/Renderer/Utils/GraphTraversal.js.map +0 -1
- package/lib/components/FlowModeller/Utils/AddNodeUtils.d.ts +0 -16
- package/lib/components/FlowModeller/Utils/AddNodeUtils.d.ts.map +0 -1
- package/lib/components/FlowModeller/Utils/AddNodeUtils.js +0 -118
- package/lib/components/FlowModeller/Utils/AddNodeUtils.js.map +0 -1
- package/lib/components/FlowModeller/helper.d.ts +0 -23
- package/lib/components/FlowModeller/helper.d.ts.map +0 -1
- package/lib/components/FlowModeller/helper.js +0 -128
- package/lib/components/FlowModeller/helper.js.map +0 -1
- package/lib/components/FlowModeller/index.d.ts +0 -10
- package/lib/components/FlowModeller/index.d.ts.map +0 -1
- package/lib/components/FlowModeller/index.js +0 -8
- package/lib/components/FlowModeller/index.js.map +0 -1
- package/lib/components/LifeCycle/Category.d.ts +0 -32
- package/lib/components/LifeCycle/Category.d.ts.map +0 -1
- package/lib/components/LifeCycle/Category.js +0 -98
- package/lib/components/LifeCycle/Category.js.map +0 -1
- package/lib/components/LifeCycle/LifeCycle.d.ts +0 -22
- package/lib/components/LifeCycle/LifeCycle.d.ts.map +0 -1
- package/lib/components/LifeCycle/LifeCycle.js +0 -73
- package/lib/components/LifeCycle/LifeCycle.js.map +0 -1
- package/lib/components/LifeCycle/LifeCycle.types.d.ts +0 -56
- package/lib/components/LifeCycle/LifeCycle.types.d.ts.map +0 -1
- package/lib/components/LifeCycle/LifeCycle.types.js +0 -2
- package/lib/components/LifeCycle/LifeCycle.types.js.map +0 -1
- package/lib/components/LifeCycle/LifeCycleList.d.ts +0 -22
- package/lib/components/LifeCycle/LifeCycleList.d.ts.map +0 -1
- package/lib/components/LifeCycle/LifeCycleList.js +0 -65
- package/lib/components/LifeCycle/LifeCycleList.js.map +0 -1
- package/lib/components/LifeCycle/Stage.d.ts +0 -49
- package/lib/components/LifeCycle/Stage.d.ts.map +0 -1
- package/lib/components/LifeCycle/Stage.js +0 -293
- package/lib/components/LifeCycle/Stage.js.map +0 -1
- package/lib/components/LifeCycle/Step.d.ts +0 -51
- package/lib/components/LifeCycle/Step.d.ts.map +0 -1
- package/lib/components/LifeCycle/Step.js +0 -241
- package/lib/components/LifeCycle/Step.js.map +0 -1
- package/lib/components/LifeCycle/Task.d.ts +0 -53
- package/lib/components/LifeCycle/Task.d.ts.map +0 -1
- package/lib/components/LifeCycle/Task.js +0 -188
- package/lib/components/LifeCycle/Task.js.map +0 -1
- package/lib/components/LifeCycle/index.d.ts +0 -4
- package/lib/components/LifeCycle/index.d.ts.map +0 -1
- package/lib/components/LifeCycle/index.js +0 -2
- package/lib/components/LifeCycle/index.js.map +0 -1
- package/lib/components/PageTemplates/GalleryPage.d.ts +0 -23
- package/lib/components/PageTemplates/GalleryPage.d.ts.map +0 -1
- package/lib/components/PageTemplates/GalleryPage.js +0 -23
- package/lib/components/PageTemplates/GalleryPage.js.map +0 -1
- package/lib/components/PageTemplates/GalleryPage.styles.d.ts +0 -9
- package/lib/components/PageTemplates/GalleryPage.styles.d.ts.map +0 -1
- package/lib/components/PageTemplates/GalleryPage.styles.js +0 -70
- package/lib/components/PageTemplates/GalleryPage.styles.js.map +0 -1
- package/lib/components/PageTemplates/PageTemplates.d.ts +0 -27
- package/lib/components/PageTemplates/PageTemplates.d.ts.map +0 -1
- package/lib/components/PageTemplates/PageTemplates.js +0 -105
- package/lib/components/PageTemplates/PageTemplates.js.map +0 -1
- package/lib/components/PageTemplates/index.d.ts +0 -5
- package/lib/components/PageTemplates/index.d.ts.map +0 -1
- package/lib/components/PageTemplates/index.js +0 -4
- package/lib/components/PageTemplates/index.js.map +0 -1
- package/lib/components/SummaryCard/SummaryCard.d.ts +0 -16
- package/lib/components/SummaryCard/SummaryCard.d.ts.map +0 -1
- package/lib/components/SummaryCard/SummaryCard.js +0 -31
- package/lib/components/SummaryCard/SummaryCard.js.map +0 -1
- package/lib/components/SummaryCard/index.d.ts +0 -3
- package/lib/components/SummaryCard/index.d.ts.map +0 -1
- package/lib/components/SummaryCard/index.js +0 -3
- package/lib/components/SummaryCard/index.js.map +0 -1
- package/lib/components/Visual/Visual.d.ts +0 -17
- package/lib/components/Visual/Visual.d.ts.map +0 -1
- package/lib/components/Visual/Visual.js +0 -28
- package/lib/components/Visual/Visual.js.map +0 -1
- package/lib/components/Visual/index.d.ts +0 -3
- package/lib/components/Visual/index.d.ts.map +0 -1
- package/lib/components/Visual/index.js +0 -3
- package/lib/components/Visual/index.js.map +0 -1
- package/lib/components/Workbench/ConfigurationPanel.d.ts +0 -5
- package/lib/components/Workbench/ConfigurationPanel.d.ts.map +0 -1
- package/lib/components/Workbench/ConfigurationPanel.js +0 -21
- package/lib/components/Workbench/ConfigurationPanel.js.map +0 -1
- package/lib/components/Workbench/Toolbar.d.ts +0 -14
- package/lib/components/Workbench/Toolbar.d.ts.map +0 -1
- package/lib/components/Workbench/Toolbar.js +0 -14
- package/lib/components/Workbench/Toolbar.js.map +0 -1
- package/lib/components/Workbench/UtilityPanel.d.ts +0 -7
- package/lib/components/Workbench/UtilityPanel.d.ts.map +0 -1
- package/lib/components/Workbench/UtilityPanel.js +0 -12
- package/lib/components/Workbench/UtilityPanel.js.map +0 -1
- package/lib/components/Workbench/Workbench.d.ts +0 -6
- package/lib/components/Workbench/Workbench.d.ts.map +0 -1
- package/lib/components/Workbench/Workbench.js +0 -24
- package/lib/components/Workbench/Workbench.js.map +0 -1
- package/lib/components/Workbench/Workbench.styles.d.ts +0 -10
- package/lib/components/Workbench/Workbench.styles.d.ts.map +0 -1
- package/lib/components/Workbench/Workbench.styles.js +0 -71
- package/lib/components/Workbench/Workbench.styles.js.map +0 -1
- package/lib/components/Workbench/Workbench.types.d.ts +0 -49
- package/lib/components/Workbench/Workbench.types.d.ts.map +0 -1
- package/lib/components/Workbench/Workbench.types.js +0 -2
- package/lib/components/Workbench/Workbench.types.js.map +0 -1
- package/lib/components/Workbench/index.d.ts +0 -2
- package/lib/components/Workbench/index.d.ts.map +0 -1
- package/lib/components/Workbench/index.js +0 -2
- package/lib/components/Workbench/index.js.map +0 -1
- package/lib/index.d.ts +0 -13
- package/lib/index.d.ts.map +0 -1
- package/lib/index.js +0 -14
- package/lib/index.js.map +0 -1
|
@@ -1,331 +0,0 @@
|
|
|
1
|
-
import styled, { css } from 'styled-components';
|
|
2
|
-
import { lighten, hideVisually } from 'polished';
|
|
3
|
-
import { useContext } from 'react';
|
|
4
|
-
import { Icon, Text, tryCatch, defaultThemeProp, Button, useDirection, StyledIcon } from '@pega/cosmos-react-core';
|
|
5
|
-
import { StyledSwitch, SwitchLabel } from '@pega/cosmos-react-core/lib/components/Switch/Switch';
|
|
6
|
-
import { StyledBareButton } from '@pega/cosmos-react-core/lib/components/Button/BareButton';
|
|
7
|
-
import { StyledNodeIcon, StyledNodeText, StyledNodeInteraction, StyledStandardTree } from '@pega/cosmos-react-core/lib/components/Tree/StandardTree.styles';
|
|
8
|
-
import AppShellContext from './AppShellContext';
|
|
9
|
-
const hoverBg = 'rgba(0, 0, 0, 0.4)';
|
|
10
|
-
export const StyledNavToggle = styled(Button)(({ theme }) => {
|
|
11
|
-
const { ltr } = useDirection();
|
|
12
|
-
return css `
|
|
13
|
-
position: absolute;
|
|
14
|
-
z-index: 1;
|
|
15
|
-
inset-block-start: calc(2 * ${theme.base.spacing});
|
|
16
|
-
inset-inline-end: 0;
|
|
17
|
-
min-width: 1.5rem;
|
|
18
|
-
min-height: 1.5rem;
|
|
19
|
-
border: none;
|
|
20
|
-
color: ${theme.base.palette['foreground-color']};
|
|
21
|
-
box-shadow: ${theme.base.shadow.low};
|
|
22
|
-
border-radius: 50%;
|
|
23
|
-
transition-property: background-color;
|
|
24
|
-
transform: translateX(${ltr ? '50%' : '-50%'});
|
|
25
|
-
|
|
26
|
-
${StyledIcon} {
|
|
27
|
-
width: 1.5rem;
|
|
28
|
-
height: 1.5rem;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
&[aria-expanded='${ltr ? 'true' : 'false'}'] {
|
|
32
|
-
${StyledIcon} {
|
|
33
|
-
transform: rotateY(180deg);
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
`;
|
|
37
|
-
});
|
|
38
|
-
StyledNavToggle.defaultProps = defaultThemeProp;
|
|
39
|
-
export const StyledHeader = styled.div(({ theme }) => {
|
|
40
|
-
const borderColor = tryCatch(() => lighten(0.1, theme.components['app-shell'].nav['background-color']));
|
|
41
|
-
return css `
|
|
42
|
-
width: 100%;
|
|
43
|
-
min-height: 4rem;
|
|
44
|
-
border-bottom: 0.0625rem solid ${borderColor};
|
|
45
|
-
`;
|
|
46
|
-
});
|
|
47
|
-
StyledHeader.defaultProps = defaultThemeProp;
|
|
48
|
-
export const StyledDrawerHeader = styled(StyledHeader)(({ theme }) => {
|
|
49
|
-
return css `
|
|
50
|
-
padding-inline-start: ${theme.base.spacing};
|
|
51
|
-
`;
|
|
52
|
-
});
|
|
53
|
-
StyledDrawerHeader.defaultProps = defaultThemeProp;
|
|
54
|
-
export const StyledNavHeaderIcon = styled(Icon)(({ theme }) => {
|
|
55
|
-
return css `
|
|
56
|
-
color: ${theme.base.colors.white};
|
|
57
|
-
`;
|
|
58
|
-
});
|
|
59
|
-
StyledNavHeaderIcon.defaultProps = defaultThemeProp;
|
|
60
|
-
export const StyledNavTitle = styled(Text)(({ theme }) => {
|
|
61
|
-
return css `
|
|
62
|
-
color: ${theme.base.colors.white};
|
|
63
|
-
text-overflow: ellipsis;
|
|
64
|
-
white-space: nowrap;
|
|
65
|
-
overflow-x: hidden;
|
|
66
|
-
`;
|
|
67
|
-
});
|
|
68
|
-
StyledNavTitle.defaultProps = defaultThemeProp;
|
|
69
|
-
export const StyledUtils = styled.div(({ theme, showDevMode }) => {
|
|
70
|
-
const borderColor = tryCatch(() => lighten(0.1, theme.components['app-shell'].nav['background-color']));
|
|
71
|
-
return css `
|
|
72
|
-
padding-bottom: calc(${showDevMode ? 2 : 0} * ${theme.base.spacing});
|
|
73
|
-
border-top: 0.0625rem solid ${borderColor};
|
|
74
|
-
${StyledSwitch} {
|
|
75
|
-
&:hover {
|
|
76
|
-
background-color: ${hoverBg};
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
${SwitchLabel} {
|
|
80
|
-
height: calc(2rem + 4 * ${theme.base.spacing});
|
|
81
|
-
padding: calc(2 * ${theme.base.spacing});
|
|
82
|
-
text-transform: capitalize;
|
|
83
|
-
color: ${theme.base.colors.gray.light};
|
|
84
|
-
font-weight: ${theme.base['font-weight'].bold};
|
|
85
|
-
|
|
86
|
-
&::before,
|
|
87
|
-
&::after {
|
|
88
|
-
margin-inline-end: calc(2 * ${theme.base.spacing});
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
& > ul {
|
|
93
|
-
list-style: none;
|
|
94
|
-
}
|
|
95
|
-
`;
|
|
96
|
-
});
|
|
97
|
-
StyledUtils.defaultProps = defaultThemeProp;
|
|
98
|
-
export const StyledUtilItem = styled.li(({ theme }) => {
|
|
99
|
-
return css `
|
|
100
|
-
&[aria-current='true'] {
|
|
101
|
-
background-color: rgba(0, 0, 0, 0.4);
|
|
102
|
-
|
|
103
|
-
& > ${StyledBareButton} {
|
|
104
|
-
color: ${theme.base.colors.blue.light};
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
${StyledBareButton} {
|
|
109
|
-
font-weight: ${theme.base['font-weight']['semi-bold']};
|
|
110
|
-
color: ${theme.base.colors.white};
|
|
111
|
-
width: 100%;
|
|
112
|
-
height: 100%;
|
|
113
|
-
text-align: start;
|
|
114
|
-
padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});
|
|
115
|
-
|
|
116
|
-
&:hover {
|
|
117
|
-
background-color: rgba(0, 0, 0, 0.4);
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
&:focus {
|
|
121
|
-
box-shadow: inset ${theme.base.shadow['focus-inverted']};
|
|
122
|
-
}
|
|
123
|
-
}
|
|
124
|
-
`;
|
|
125
|
-
});
|
|
126
|
-
StyledUtilItem.defaultProps = defaultThemeProp;
|
|
127
|
-
export const StyledScrollWrap = styled.div(() => {
|
|
128
|
-
const { drawerOpen } = useContext(AppShellContext);
|
|
129
|
-
return css `
|
|
130
|
-
height: ${drawerOpen ? 'calc(100% - 4rem)' : '100%'};
|
|
131
|
-
overflow-y: auto;
|
|
132
|
-
`;
|
|
133
|
-
});
|
|
134
|
-
StyledScrollWrap.defaultProps = defaultThemeProp;
|
|
135
|
-
export const StyledNavContent = styled.div(({ theme }) => {
|
|
136
|
-
const { navState } = useContext(AppShellContext);
|
|
137
|
-
return css `
|
|
138
|
-
width: 14rem;
|
|
139
|
-
height: 100%;
|
|
140
|
-
opacity: 0;
|
|
141
|
-
transition: opacity ${theme.base.animation.speed} ${theme.base.animation.timing.ease};
|
|
142
|
-
|
|
143
|
-
${navState === 'collapsed' &&
|
|
144
|
-
css `
|
|
145
|
-
display: none;
|
|
146
|
-
`}
|
|
147
|
-
|
|
148
|
-
${(navState === 'expanding' || navState === 'expanded') &&
|
|
149
|
-
css `
|
|
150
|
-
opacity: 1;
|
|
151
|
-
`}
|
|
152
|
-
`;
|
|
153
|
-
});
|
|
154
|
-
StyledNavContent.defaultProps = defaultThemeProp;
|
|
155
|
-
export const StyledMain = styled.main(({ theme }) => {
|
|
156
|
-
return css `
|
|
157
|
-
position: relative;
|
|
158
|
-
min-height: calc(100vh - 3rem);
|
|
159
|
-
background-color: ${theme.base.palette['app-background']};
|
|
160
|
-
transition: margin ${theme.base.animation.speed} ${theme.base.animation.timing.ease};
|
|
161
|
-
`;
|
|
162
|
-
});
|
|
163
|
-
StyledMain.defaultProps = defaultThemeProp;
|
|
164
|
-
export const StyledDrawerWrapper = styled.div(() => {
|
|
165
|
-
const { drawerOpen } = useContext(AppShellContext);
|
|
166
|
-
return css `
|
|
167
|
-
position: relative;
|
|
168
|
-
z-index: 1;
|
|
169
|
-
height: ${drawerOpen ? '100%' : 'auto'};
|
|
170
|
-
`;
|
|
171
|
-
});
|
|
172
|
-
StyledDrawerWrapper.defaultProps = defaultThemeProp;
|
|
173
|
-
export const StyledNavHeaderVisual = styled.div(({ theme, bgColor }) => {
|
|
174
|
-
return css `
|
|
175
|
-
min-width: 2rem;
|
|
176
|
-
min-height: 2rem;
|
|
177
|
-
border-radius: 0.4rem;
|
|
178
|
-
background-color: ${bgColor};
|
|
179
|
-
margin-inline-end: ${theme.base.spacing};
|
|
180
|
-
color: ${theme.base.colors.white};
|
|
181
|
-
& svg {
|
|
182
|
-
color: ${theme.base.colors.white};
|
|
183
|
-
}
|
|
184
|
-
`;
|
|
185
|
-
});
|
|
186
|
-
StyledNavHeaderVisual.defaultProps = defaultThemeProp;
|
|
187
|
-
export const StyledDrawerCloseButton = styled(Button)(({ theme }) => {
|
|
188
|
-
return css `
|
|
189
|
-
margin-inline-end: ${theme.base.spacing};
|
|
190
|
-
min-width: 1.5rem;
|
|
191
|
-
min-height: 1.5rem;
|
|
192
|
-
color: ${theme.base.colors.white};
|
|
193
|
-
|
|
194
|
-
${StyledIcon} {
|
|
195
|
-
width: 1em;
|
|
196
|
-
height: 1em;
|
|
197
|
-
}
|
|
198
|
-
`;
|
|
199
|
-
});
|
|
200
|
-
StyledDrawerCloseButton.defaultProps = defaultThemeProp;
|
|
201
|
-
export const StyledInnerNav = styled.div(() => {
|
|
202
|
-
const { navState } = useContext(AppShellContext);
|
|
203
|
-
return css `
|
|
204
|
-
height: 100%;
|
|
205
|
-
${(navState === 'collapsing' || navState === 'expanding') &&
|
|
206
|
-
css `
|
|
207
|
-
overflow: hidden;
|
|
208
|
-
`}
|
|
209
|
-
`;
|
|
210
|
-
});
|
|
211
|
-
StyledInnerNav.defaultProps = defaultThemeProp;
|
|
212
|
-
export const StyledNav = styled.nav(({ theme }) => {
|
|
213
|
-
const { navState } = useContext(AppShellContext);
|
|
214
|
-
return css `
|
|
215
|
-
position: fixed;
|
|
216
|
-
z-index: 1;
|
|
217
|
-
height: calc(100vh - 3rem);
|
|
218
|
-
background: ${theme.components['app-shell'].nav['background-color']};
|
|
219
|
-
|
|
220
|
-
&,
|
|
221
|
-
${StyledInnerNav} {
|
|
222
|
-
width: ${navState === 'expanding' || navState === 'expanded' ? '14' : '1.5'}rem;
|
|
223
|
-
transition: width ${theme.base.animation.speed} ${theme.base.animation.timing.ease};
|
|
224
|
-
}
|
|
225
|
-
|
|
226
|
-
${theme.base['custom-scrollbar'] &&
|
|
227
|
-
css `
|
|
228
|
-
* {
|
|
229
|
-
scrollbar-color: rgba(255, 255, 255, 0.6) rgba(0, 0, 0, 0.2);
|
|
230
|
-
scrollbar-width: thin;
|
|
231
|
-
}
|
|
232
|
-
|
|
233
|
-
@supports not ((scrollbar-width: thin) or (scrollbar-color: black white)) {
|
|
234
|
-
/* stylelint-disable unit-allowed-list */
|
|
235
|
-
|
|
236
|
-
*::-webkit-scrollbar {
|
|
237
|
-
width: 12px;
|
|
238
|
-
height: 12px;
|
|
239
|
-
}
|
|
240
|
-
|
|
241
|
-
*::-webkit-scrollbar-track {
|
|
242
|
-
background-color: rgba(0, 0, 0, 0.2);
|
|
243
|
-
}
|
|
244
|
-
|
|
245
|
-
*::-webkit-scrollbar-corner {
|
|
246
|
-
background-color: rgba(0, 0, 0, 0.2);
|
|
247
|
-
border-bottom-right-radius: inherit;
|
|
248
|
-
}
|
|
249
|
-
|
|
250
|
-
*::-webkit-scrollbar-thumb {
|
|
251
|
-
background-color: transparent;
|
|
252
|
-
border: 3px solid transparent;
|
|
253
|
-
border-radius: calc(1.125 * ${theme.base['border-radius']});
|
|
254
|
-
box-shadow: inset 0 0 2px 4px rgba(255, 255, 255, 0.6);
|
|
255
|
-
}
|
|
256
|
-
|
|
257
|
-
*::-webkit-scrollbar-thumb:hover {
|
|
258
|
-
box-shadow: inset 0 0 2px 4px rgba(255, 255, 255, 0.7);
|
|
259
|
-
}
|
|
260
|
-
|
|
261
|
-
*::-webkit-scrollbar-track:horizontal {
|
|
262
|
-
border-bottom-left-radius: inherit;
|
|
263
|
-
}
|
|
264
|
-
|
|
265
|
-
*::-webkit-scrollbar-track:vertical {
|
|
266
|
-
border-top-right-radius: inherit;
|
|
267
|
-
}
|
|
268
|
-
|
|
269
|
-
/* stylelint-disable-next-line selector-pseudo-class-no-unknown */
|
|
270
|
-
*::-webkit-scrollbar-track:not(:corner-present) {
|
|
271
|
-
border-bottom-right-radius: inherit;
|
|
272
|
-
}
|
|
273
|
-
|
|
274
|
-
/* stylelint-enable unit-allowed-list */
|
|
275
|
-
}
|
|
276
|
-
`}
|
|
277
|
-
|
|
278
|
-
&:not(:hover) {
|
|
279
|
-
${StyledNavToggle}[aria-expanded='true']:not(:focus) {
|
|
280
|
-
${hideVisually}
|
|
281
|
-
}
|
|
282
|
-
}
|
|
283
|
-
|
|
284
|
-
/*
|
|
285
|
-
* A hoverable area just outside the nav for easier mouse interaction with the collapse button.
|
|
286
|
-
* As the collpase button straddles the nav boundary, so maybe too should the hoverable area.
|
|
287
|
-
*/
|
|
288
|
-
&::after {
|
|
289
|
-
content: '';
|
|
290
|
-
display: block;
|
|
291
|
-
position: absolute;
|
|
292
|
-
inset-block-start: 0;
|
|
293
|
-
inset-inline-start: 100%;
|
|
294
|
-
width: calc(2 * ${theme.base.spacing});
|
|
295
|
-
height: 100%;
|
|
296
|
-
}
|
|
297
|
-
|
|
298
|
-
${StyledStandardTree} {
|
|
299
|
-
color: ${theme.base.colors.white};
|
|
300
|
-
|
|
301
|
-
${StyledNodeText} {
|
|
302
|
-
font-weight: ${theme.base['font-weight']['semi-bold']};
|
|
303
|
-
}
|
|
304
|
-
|
|
305
|
-
${StyledNodeInteraction} {
|
|
306
|
-
padding-block-start: calc(0.5 * ${theme.base.spacing});
|
|
307
|
-
padding-block-end: calc(0.5 * ${theme.base.spacing});
|
|
308
|
-
&:hover,
|
|
309
|
-
&[aria-current='true'] {
|
|
310
|
-
background-color: ${hoverBg};
|
|
311
|
-
}
|
|
312
|
-
|
|
313
|
-
&[aria-current='true'] {
|
|
314
|
-
${StyledNodeIcon},
|
|
315
|
-
${StyledNodeText} {
|
|
316
|
-
color: ${theme.base.colors.blue.light};
|
|
317
|
-
}
|
|
318
|
-
}
|
|
319
|
-
}
|
|
320
|
-
}
|
|
321
|
-
|
|
322
|
-
/* Style for main is here since nav(the "&") may be conditionally rendered. */
|
|
323
|
-
& + ${StyledMain} {
|
|
324
|
-
margin-inline-start: ${navState === 'expanding' || navState === 'expanded'
|
|
325
|
-
? '14rem'
|
|
326
|
-
: '1.5rem'};
|
|
327
|
-
}
|
|
328
|
-
`;
|
|
329
|
-
});
|
|
330
|
-
StyledNav.defaultProps = defaultThemeProp;
|
|
331
|
-
//# sourceMappingURL=AppShell.styles.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AppShell.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,EACL,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,gBAAgB,EAChB,MAAM,EACN,YAAY,EACZ,UAAU,EACX,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AACjG,OAAO,EAAE,gBAAgB,EAAE,MAAM,0DAA0D,CAAC;AAC5F,OAAO,EACL,cAAc,EACd,cAAc,EACd,qBAAqB,EACrB,kBAAkB,EACnB,MAAM,iEAAiE,CAAC;AAEzE,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAEhD,MAAM,OAAO,GAAG,oBAAoB,CAAC;AAErC,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC1D,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAE/B,OAAO,GAAG,CAAA;;;kCAGsB,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;aAKvC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;kBACjC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG;;;4BAGX,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM;;MAE1C,UAAU;;;;;uBAKO,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;QACrC,UAAU;;;;GAIf,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACnD,MAAM,WAAW,GAAG,QAAQ,CAAC,GAAG,EAAE,CAChC,OAAO,CAAC,GAAG,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC,CACpE,CAAC;IAEF,OAAO,GAAG,CAAA;;;qCAGyB,WAAW;GAC7C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACnE,OAAO,GAAG,CAAA;4BACgB,KAAK,CAAC,IAAI,CAAC,OAAO;GAC3C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC5D,OAAO,GAAG,CAAA;aACC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;GACjC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvD,OAAO,GAAG,CAAA;aACC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;;;GAIjC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAA2B,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,EAAE;IACzF,MAAM,WAAW,GAAG,QAAQ,CAAC,GAAG,EAAE,CAChC,OAAO,CAAC,GAAG,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC,CACpE,CAAC;IAEF,OAAO,GAAG,CAAA;2BACe,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,OAAO;kCACpC,WAAW;MACvC,YAAY;;4BAEU,OAAO;;;QAG3B,WAAW;kCACe,KAAK,CAAC,IAAI,CAAC,OAAO;4BACxB,KAAK,CAAC,IAAI,CAAC,OAAO;;iBAE7B,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK;uBACtB,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,IAAI;;;;wCAIb,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;;;GAOvD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACpD,OAAO,GAAG,CAAA;;;;YAIA,gBAAgB;iBACX,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK;;;;MAIvC,gBAAgB;qBACD,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC;eAC5C,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;;;iBAIrB,KAAK,CAAC,IAAI,CAAC,OAAO,aAAa,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;;;4BAOtC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC;;;GAG5D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE;IAC9C,MAAM,EAAE,UAAU,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAEnD,OAAO,GAAG,CAAA;cACE,UAAU,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,MAAM;;GAEpD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvD,MAAM,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAEjD,OAAO,GAAG,CAAA;;;;0BAIc,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;MAElF,QAAQ,KAAK,WAAW;QAC1B,GAAG,CAAA;;KAEF;;MAEC,CAAC,QAAQ,KAAK,WAAW,IAAI,QAAQ,KAAK,UAAU,CAAC;QACvD,GAAG,CAAA;;KAEF;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAClD,OAAO,GAAG,CAAA;;;wBAGY,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC;yBACnC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;GACpF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE;IACjD,MAAM,EAAE,UAAU,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAEnD,OAAO,GAAG,CAAA;;;cAGE,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;GACvC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAsB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE;IAC1F,OAAO,GAAG,CAAA;;;;wBAIY,OAAO;yBACN,KAAK,CAAC,IAAI,CAAC,OAAO;aAC9B,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;eAErB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;GAEnC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAClE,OAAO,GAAG,CAAA;yBACa,KAAK,CAAC,IAAI,CAAC,OAAO;;;aAG9B,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;MAE9B,UAAU;;;;GAIb,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE;IAC5C,MAAM,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAEjD,OAAO,GAAG,CAAA;;MAEN,CAAC,QAAQ,KAAK,YAAY,IAAI,QAAQ,KAAK,WAAW,CAAC;QACzD,GAAG,CAAA;;KAEF;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAChD,MAAM,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAEjD,OAAO,GAAG,CAAA;;;;kBAIM,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,kBAAkB,CAAC;;;MAGjE,cAAc;eACL,QAAQ,KAAK,WAAW,IAAI,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK;0BACvD,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;;MAGlF,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC;QAChC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;wCA0BiC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;;;;;;;;;;;;;;;;;;;;;KAuB9D;;;QAGG,eAAe;UACb,YAAY;;;;;;;;;;;;;;wBAcE,KAAK,CAAC,IAAI,CAAC,OAAO;;;;MAIpC,kBAAkB;eACT,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;QAE9B,cAAc;uBACC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC;;;QAGrD,qBAAqB;0CACa,KAAK,CAAC,IAAI,CAAC,OAAO;wCACpB,KAAK,CAAC,IAAI,CAAC,OAAO;;;8BAG5B,OAAO;;;;YAIzB,cAAc;YACd,cAAc;qBACL,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK;;;;;;;UAOvC,UAAU;6BACS,QAAQ,KAAK,WAAW,IAAI,QAAQ,KAAK,UAAU;QACxE,CAAC,CAAC,OAAO;QACT,CAAC,CAAC,QAAQ;;GAEf,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,SAAS,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\nimport { lighten, hideVisually } from 'polished';\nimport { useContext } from 'react';\n\nimport {\n Icon,\n Text,\n tryCatch,\n defaultThemeProp,\n Button,\n useDirection,\n StyledIcon\n} from '@pega/cosmos-react-core';\nimport { StyledSwitch, SwitchLabel } from '@pega/cosmos-react-core/lib/components/Switch/Switch';\nimport { StyledBareButton } from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport {\n StyledNodeIcon,\n StyledNodeText,\n StyledNodeInteraction,\n StyledStandardTree\n} from '@pega/cosmos-react-core/lib/components/Tree/StandardTree.styles';\n\nimport AppShellContext from './AppShellContext';\n\nconst hoverBg = 'rgba(0, 0, 0, 0.4)';\n\nexport const StyledNavToggle = styled(Button)(({ theme }) => {\n const { ltr } = useDirection();\n\n return css`\n position: absolute;\n z-index: 1;\n inset-block-start: calc(2 * ${theme.base.spacing});\n inset-inline-end: 0;\n min-width: 1.5rem;\n min-height: 1.5rem;\n border: none;\n color: ${theme.base.palette['foreground-color']};\n box-shadow: ${theme.base.shadow.low};\n border-radius: 50%;\n transition-property: background-color;\n transform: translateX(${ltr ? '50%' : '-50%'});\n\n ${StyledIcon} {\n width: 1.5rem;\n height: 1.5rem;\n }\n\n &[aria-expanded='${ltr ? 'true' : 'false'}'] {\n ${StyledIcon} {\n transform: rotateY(180deg);\n }\n }\n `;\n});\n\nStyledNavToggle.defaultProps = defaultThemeProp;\n\nexport const StyledHeader = styled.div(({ theme }) => {\n const borderColor = tryCatch(() =>\n lighten(0.1, theme.components['app-shell'].nav['background-color'])\n );\n\n return css`\n width: 100%;\n min-height: 4rem;\n border-bottom: 0.0625rem solid ${borderColor};\n `;\n});\n\nStyledHeader.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerHeader = styled(StyledHeader)(({ theme }) => {\n return css`\n padding-inline-start: ${theme.base.spacing};\n `;\n});\n\nStyledDrawerHeader.defaultProps = defaultThemeProp;\n\nexport const StyledNavHeaderIcon = styled(Icon)(({ theme }) => {\n return css`\n color: ${theme.base.colors.white};\n `;\n});\n\nStyledNavHeaderIcon.defaultProps = defaultThemeProp;\n\nexport const StyledNavTitle = styled(Text)(({ theme }) => {\n return css`\n color: ${theme.base.colors.white};\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow-x: hidden;\n `;\n});\n\nStyledNavTitle.defaultProps = defaultThemeProp;\n\nexport const StyledUtils = styled.div<{ showDevMode: boolean }>(({ theme, showDevMode }) => {\n const borderColor = tryCatch(() =>\n lighten(0.1, theme.components['app-shell'].nav['background-color'])\n );\n\n return css`\n padding-bottom: calc(${showDevMode ? 2 : 0} * ${theme.base.spacing});\n border-top: 0.0625rem solid ${borderColor};\n ${StyledSwitch} {\n &:hover {\n background-color: ${hoverBg};\n }\n\n ${SwitchLabel} {\n height: calc(2rem + 4 * ${theme.base.spacing});\n padding: calc(2 * ${theme.base.spacing});\n text-transform: capitalize;\n color: ${theme.base.colors.gray.light};\n font-weight: ${theme.base['font-weight'].bold};\n\n &::before,\n &::after {\n margin-inline-end: calc(2 * ${theme.base.spacing});\n }\n }\n }\n & > ul {\n list-style: none;\n }\n `;\n});\n\nStyledUtils.defaultProps = defaultThemeProp;\n\nexport const StyledUtilItem = styled.li(({ theme }) => {\n return css`\n &[aria-current='true'] {\n background-color: rgba(0, 0, 0, 0.4);\n\n & > ${StyledBareButton} {\n color: ${theme.base.colors.blue.light};\n }\n }\n\n ${StyledBareButton} {\n font-weight: ${theme.base['font-weight']['semi-bold']};\n color: ${theme.base.colors.white};\n width: 100%;\n height: 100%;\n text-align: start;\n padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n\n &:hover {\n background-color: rgba(0, 0, 0, 0.4);\n }\n\n &:focus {\n box-shadow: inset ${theme.base.shadow['focus-inverted']};\n }\n }\n `;\n});\n\nStyledUtilItem.defaultProps = defaultThemeProp;\n\nexport const StyledScrollWrap = styled.div(() => {\n const { drawerOpen } = useContext(AppShellContext);\n\n return css`\n height: ${drawerOpen ? 'calc(100% - 4rem)' : '100%'};\n overflow-y: auto;\n `;\n});\n\nStyledScrollWrap.defaultProps = defaultThemeProp;\n\nexport const StyledNavContent = styled.div(({ theme }) => {\n const { navState } = useContext(AppShellContext);\n\n return css`\n width: 14rem;\n height: 100%;\n opacity: 0;\n transition: opacity ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n\n ${navState === 'collapsed' &&\n css`\n display: none;\n `}\n\n ${(navState === 'expanding' || navState === 'expanded') &&\n css`\n opacity: 1;\n `}\n `;\n});\n\nStyledNavContent.defaultProps = defaultThemeProp;\n\nexport const StyledMain = styled.main(({ theme }) => {\n return css`\n position: relative;\n min-height: calc(100vh - 3rem);\n background-color: ${theme.base.palette['app-background']};\n transition: margin ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n `;\n});\n\nStyledMain.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerWrapper = styled.div(() => {\n const { drawerOpen } = useContext(AppShellContext);\n\n return css`\n position: relative;\n z-index: 1;\n height: ${drawerOpen ? '100%' : 'auto'};\n `;\n});\n\nStyledDrawerWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledNavHeaderVisual = styled.div<{ bgColor: string }>(({ theme, bgColor }) => {\n return css`\n min-width: 2rem;\n min-height: 2rem;\n border-radius: 0.4rem;\n background-color: ${bgColor};\n margin-inline-end: ${theme.base.spacing};\n color: ${theme.base.colors.white};\n & svg {\n color: ${theme.base.colors.white};\n }\n `;\n});\n\nStyledNavHeaderVisual.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerCloseButton = styled(Button)(({ theme }) => {\n return css`\n margin-inline-end: ${theme.base.spacing};\n min-width: 1.5rem;\n min-height: 1.5rem;\n color: ${theme.base.colors.white};\n\n ${StyledIcon} {\n width: 1em;\n height: 1em;\n }\n `;\n});\n\nStyledDrawerCloseButton.defaultProps = defaultThemeProp;\n\nexport const StyledInnerNav = styled.div(() => {\n const { navState } = useContext(AppShellContext);\n\n return css`\n height: 100%;\n ${(navState === 'collapsing' || navState === 'expanding') &&\n css`\n overflow: hidden;\n `}\n `;\n});\n\nStyledInnerNav.defaultProps = defaultThemeProp;\n\nexport const StyledNav = styled.nav(({ theme }) => {\n const { navState } = useContext(AppShellContext);\n\n return css`\n position: fixed;\n z-index: 1;\n height: calc(100vh - 3rem);\n background: ${theme.components['app-shell'].nav['background-color']};\n\n &,\n ${StyledInnerNav} {\n width: ${navState === 'expanding' || navState === 'expanded' ? '14' : '1.5'}rem;\n transition: width ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n }\n\n ${theme.base['custom-scrollbar'] &&\n css`\n * {\n scrollbar-color: rgba(255, 255, 255, 0.6) rgba(0, 0, 0, 0.2);\n scrollbar-width: thin;\n }\n\n @supports not ((scrollbar-width: thin) or (scrollbar-color: black white)) {\n /* stylelint-disable unit-allowed-list */\n\n *::-webkit-scrollbar {\n width: 12px;\n height: 12px;\n }\n\n *::-webkit-scrollbar-track {\n background-color: rgba(0, 0, 0, 0.2);\n }\n\n *::-webkit-scrollbar-corner {\n background-color: rgba(0, 0, 0, 0.2);\n border-bottom-right-radius: inherit;\n }\n\n *::-webkit-scrollbar-thumb {\n background-color: transparent;\n border: 3px solid transparent;\n border-radius: calc(1.125 * ${theme.base['border-radius']});\n box-shadow: inset 0 0 2px 4px rgba(255, 255, 255, 0.6);\n }\n\n *::-webkit-scrollbar-thumb:hover {\n box-shadow: inset 0 0 2px 4px rgba(255, 255, 255, 0.7);\n }\n\n *::-webkit-scrollbar-track:horizontal {\n border-bottom-left-radius: inherit;\n }\n\n *::-webkit-scrollbar-track:vertical {\n border-top-right-radius: inherit;\n }\n\n /* stylelint-disable-next-line selector-pseudo-class-no-unknown */\n *::-webkit-scrollbar-track:not(:corner-present) {\n border-bottom-right-radius: inherit;\n }\n\n /* stylelint-enable unit-allowed-list */\n }\n `}\n\n &:not(:hover) {\n ${StyledNavToggle}[aria-expanded='true']:not(:focus) {\n ${hideVisually}\n }\n }\n\n /*\n * A hoverable area just outside the nav for easier mouse interaction with the collapse button.\n * As the collpase button straddles the nav boundary, so maybe too should the hoverable area.\n */\n &::after {\n content: '';\n display: block;\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: 100%;\n width: calc(2 * ${theme.base.spacing});\n height: 100%;\n }\n\n ${StyledStandardTree} {\n color: ${theme.base.colors.white};\n\n ${StyledNodeText} {\n font-weight: ${theme.base['font-weight']['semi-bold']};\n }\n\n ${StyledNodeInteraction} {\n padding-block-start: calc(0.5 * ${theme.base.spacing});\n padding-block-end: calc(0.5 * ${theme.base.spacing});\n &:hover,\n &[aria-current='true'] {\n background-color: ${hoverBg};\n }\n\n &[aria-current='true'] {\n ${StyledNodeIcon},\n ${StyledNodeText} {\n color: ${theme.base.colors.blue.light};\n }\n }\n }\n }\n\n /* Style for main is here since nav(the \"&\") may be conditionally rendered. */\n & + ${StyledMain} {\n margin-inline-start: ${navState === 'expanding' || navState === 'expanded'\n ? '14rem'\n : '1.5rem'};\n }\n `;\n});\n\nStyledNav.defaultProps = defaultThemeProp;\n"]}
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
import { ReactNode, Ref } from 'react';
|
|
2
|
-
import { StandardTreeProps, DrawerProps, NoChildrenProp } from '@pega/cosmos-react-core';
|
|
3
|
-
import { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';
|
|
4
|
-
import { AppBarProps } from '../AppHeader';
|
|
5
|
-
import { VisualProps } from '../Visual';
|
|
6
|
-
export interface AppShellProps extends NoChildrenProp {
|
|
7
|
-
main: ReactNode;
|
|
8
|
-
appInfo: AppInfoProps;
|
|
9
|
-
appHeader: AppBarProps;
|
|
10
|
-
navigation: StandardTreeProps;
|
|
11
|
-
hideNav?: boolean;
|
|
12
|
-
utils?: UtilsProps;
|
|
13
|
-
ref?: Ref<HTMLElement>;
|
|
14
|
-
}
|
|
15
|
-
export interface UtilsProps {
|
|
16
|
-
items: UtilItem[];
|
|
17
|
-
currentItemId?: UtilItem['id'];
|
|
18
|
-
onItemClick: (id: UtilItem['id']) => void;
|
|
19
|
-
drawer?: Pick<DrawerProps, 'onBeforeOpen' | 'onAfterOpen' | 'onBeforeClose' | 'onAfterClose'>;
|
|
20
|
-
devMode?: boolean;
|
|
21
|
-
}
|
|
22
|
-
export interface UtilItem {
|
|
23
|
-
id: string;
|
|
24
|
-
label: string;
|
|
25
|
-
}
|
|
26
|
-
export interface AppInfoProps {
|
|
27
|
-
text: string;
|
|
28
|
-
visual: VisualProps;
|
|
29
|
-
}
|
|
30
|
-
export interface AppShellContextValue {
|
|
31
|
-
drawerOpen: boolean;
|
|
32
|
-
setDrawerOpen: (open: boolean) => void;
|
|
33
|
-
setDrawerData: (data: {
|
|
34
|
-
label: string;
|
|
35
|
-
id: string;
|
|
36
|
-
}) => void;
|
|
37
|
-
drawerData?: {
|
|
38
|
-
label: string;
|
|
39
|
-
id: string;
|
|
40
|
-
};
|
|
41
|
-
navState: typeof expandCollapseStates[keyof typeof expandCollapseStates];
|
|
42
|
-
}
|
|
43
|
-
//# sourceMappingURL=AppShell.types.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AppShell.types.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzF,OAAO,EAAE,oBAAoB,EAAE,MAAM,sDAAsD,CAAC;AAE5F,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAExC,MAAM,WAAW,aAAc,SAAQ,cAAc;IACnD,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,EAAE,YAAY,CAAC;IACtB,SAAS,EAAE,WAAW,CAAC;IACvB,UAAU,EAAE,iBAAiB,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,aAAa,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC/B,WAAW,EAAE,CAAC,EAAE,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,cAAc,GAAG,aAAa,GAAG,eAAe,GAAG,cAAc,CAAC,CAAC;IAC9F,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,WAAW,CAAC;CACrB;AAED,MAAM,WAAW,oBAAoB;IACnC,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,aAAa,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC7D,UAAU,CAAC,EAAE;QACX,KAAK,EAAE,MAAM,CAAC;QACd,EAAE,EAAE,MAAM,CAAC;KACZ,CAAC;IACF,QAAQ,EAAE,OAAO,oBAAoB,CAAC,MAAM,OAAO,oBAAoB,CAAC,CAAC;CAC1E"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AppShell.types.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode, Ref } from 'react';\n\nimport { StandardTreeProps, DrawerProps, NoChildrenProp } from '@pega/cosmos-react-core';\nimport { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';\n\nimport { AppBarProps } from '../AppHeader';\nimport { VisualProps } from '../Visual';\n\nexport interface AppShellProps extends NoChildrenProp {\n main: ReactNode;\n appInfo: AppInfoProps;\n appHeader: AppBarProps;\n navigation: StandardTreeProps;\n hideNav?: boolean;\n utils?: UtilsProps;\n ref?: Ref<HTMLElement>;\n}\n\nexport interface UtilsProps {\n items: UtilItem[];\n currentItemId?: UtilItem['id'];\n onItemClick: (id: UtilItem['id']) => void;\n drawer?: Pick<DrawerProps, 'onBeforeOpen' | 'onAfterOpen' | 'onBeforeClose' | 'onAfterClose'>;\n devMode?: boolean;\n}\n\nexport interface UtilItem {\n id: string;\n label: string;\n}\n\nexport interface AppInfoProps {\n text: string;\n visual: VisualProps;\n}\n\nexport interface AppShellContextValue {\n drawerOpen: boolean;\n setDrawerOpen: (open: boolean) => void;\n setDrawerData: (data: { label: string; id: string }) => void;\n drawerData?: {\n label: string;\n id: string;\n };\n navState: typeof expandCollapseStates[keyof typeof expandCollapseStates];\n}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AppShellContext.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellContext.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAExD,QAAA,MAAM,eAAe,+CAMnB,CAAC;AAEH,eAAe,eAAe,CAAC"}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { createContext } from 'react';
|
|
2
|
-
const AppShellContext = createContext({
|
|
3
|
-
drawerOpen: false,
|
|
4
|
-
setDrawerOpen: () => { },
|
|
5
|
-
drawerData: undefined,
|
|
6
|
-
setDrawerData: () => { },
|
|
7
|
-
navState: 'expanded'
|
|
8
|
-
});
|
|
9
|
-
export default AppShellContext;
|
|
10
|
-
//# sourceMappingURL=AppShellContext.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AppShellContext.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAItC,MAAM,eAAe,GAAG,aAAa,CAAuB;IAC1D,UAAU,EAAE,KAAK;IACjB,aAAa,EAAE,GAAG,EAAE,GAAE,CAAC;IACvB,UAAU,EAAE,SAAS;IACrB,aAAa,EAAE,GAAG,EAAE,GAAE,CAAC;IACvB,QAAQ,EAAE,UAAU;CACrB,CAAC,CAAC;AAEH,eAAe,eAAe,CAAC","sourcesContent":["import { createContext } from 'react';\n\nimport { AppShellContextValue } from './AppShell.types';\n\nconst AppShellContext = createContext<AppShellContextValue>({\n drawerOpen: false,\n setDrawerOpen: () => {},\n drawerData: undefined,\n setDrawerData: () => {},\n navState: 'expanded'\n});\n\nexport default AppShellContext;\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/AppShell/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export { default } from './AppShell';\nexport { AppShellProps } from './AppShell.types';\n"]}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { FC, MouseEvent } from 'react';
|
|
2
|
-
import { RendererNodeProps } from './Renderer/Renderer.types';
|
|
3
|
-
export declare const StyledDot: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").IconProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
|
|
4
|
-
export declare const StyledPlus: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").IconProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
|
|
5
|
-
export declare const StyledWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
6
|
-
export declare const StyledButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").ButtonProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
|
|
7
|
-
interface AddBtnProps {
|
|
8
|
-
addNodeHandler: (e: MouseEvent<HTMLButtonElement>) => void;
|
|
9
|
-
}
|
|
10
|
-
export interface AddNodeProps extends RendererNodeProps {
|
|
11
|
-
onClick?: (ev: Event) => void;
|
|
12
|
-
}
|
|
13
|
-
export declare const StyledConnectorLabel: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").TextProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
|
|
14
|
-
export declare const AddButton: FC<AddBtnProps>;
|
|
15
|
-
export {};
|
|
16
|
-
//# sourceMappingURL=AddNode.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AddNode.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/AddNode.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAYvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAE9D,eAAO,MAAM,SAAS,mOAKpB,CAAC;AAIH,eAAO,MAAM,UAAU,mOAAiB,CAAC;AACzC,eAAO,MAAM,aAAa,yGAUxB,CAAC;AAIH,eAAO,MAAM,YAAY,qOAsBvB,CAAC;AAIH,UAAU,WAAW;IACnB,cAAc,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC5D;AAED,MAAM,WAAW,YAAa,SAAQ,iBAAiB;IACrD,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,KAAK,KAAK,IAAI,CAAC;CAC/B;AAED,eAAO,MAAM,oBAAoB,mOAQ/B,CAAC;AAIH,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,WAAW,CAWrC,CAAC"}
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import styled, { css } from 'styled-components';
|
|
3
|
-
import { Button, defaultThemeProp, Flex, Icon, useI18n, StyledTooltip, Text } from '@pega/cosmos-react-core';
|
|
4
|
-
export const StyledDot = styled(Icon)(({ theme }) => {
|
|
5
|
-
return css `
|
|
6
|
-
position: absolute;
|
|
7
|
-
color: ${theme.base.colors.slate.dark};
|
|
8
|
-
`;
|
|
9
|
-
});
|
|
10
|
-
StyledDot.defaultProps = defaultThemeProp;
|
|
11
|
-
export const StyledPlus = styled(Icon) ``;
|
|
12
|
-
export const StyledWrapper = styled.div(({ theme }) => {
|
|
13
|
-
return css `
|
|
14
|
-
margin-block-start: ${theme.base.spacing};
|
|
15
|
-
${StyledTooltip} {
|
|
16
|
-
${css `
|
|
17
|
-
min-width: 12ch;
|
|
18
|
-
text-align: center;
|
|
19
|
-
`}
|
|
20
|
-
}
|
|
21
|
-
`;
|
|
22
|
-
});
|
|
23
|
-
StyledWrapper.defaultProps = defaultThemeProp;
|
|
24
|
-
export const StyledButton = styled(Button)(({ theme }) => {
|
|
25
|
-
return css `
|
|
26
|
-
top: -0.25rem;
|
|
27
|
-
border: 0;
|
|
28
|
-
background: transparent;
|
|
29
|
-
color: ${theme.base.colors.black};
|
|
30
|
-
${StyledPlus} {
|
|
31
|
-
opacity: 0;
|
|
32
|
-
}
|
|
33
|
-
&:hover,
|
|
34
|
-
&:active,
|
|
35
|
-
&:focus {
|
|
36
|
-
opacity: 1;
|
|
37
|
-
background: ${theme.base.colors.white};
|
|
38
|
-
${StyledDot} {
|
|
39
|
-
opacity: 0;
|
|
40
|
-
}
|
|
41
|
-
${StyledPlus} {
|
|
42
|
-
opacity: 1;
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
`;
|
|
46
|
-
});
|
|
47
|
-
StyledButton.defaultProps = defaultThemeProp;
|
|
48
|
-
export const StyledConnectorLabel = styled(Text)(({ theme }) => {
|
|
49
|
-
return css `
|
|
50
|
-
border-radius: ${theme.base['border-radius']};
|
|
51
|
-
background: ${theme.base.colors.slate.dark};
|
|
52
|
-
color: ${theme.base.colors.white};
|
|
53
|
-
text-align: center;
|
|
54
|
-
padding: calc(0.5 * ${theme.base.spacing});
|
|
55
|
-
`;
|
|
56
|
-
});
|
|
57
|
-
StyledConnectorLabel.defaultProps = defaultThemeProp;
|
|
58
|
-
export const AddButton = ({ addNodeHandler }) => {
|
|
59
|
-
const t = useI18n();
|
|
60
|
-
return (_jsx(Flex, { container: { justify: 'center' }, as: StyledWrapper, children: _jsxs(StyledButton, { label: t('add_node'), icon: true, onClick: addNodeHandler, children: [_jsx(StyledDot, { name: 'circle-solid' }, void 0), _jsx(StyledPlus, { name: 'plus' }, void 0)] }, void 0) }, void 0));
|
|
61
|
-
};
|
|
62
|
-
//# sourceMappingURL=AddNode.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AddNode.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/AddNode.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EACL,MAAM,EACN,gBAAgB,EAChB,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,aAAa,EACb,IAAI,EACL,MAAM,yBAAyB,CAAC;AAIjC,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAClD,OAAO,GAAG,CAAA;;aAEC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI;GACtC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,SAAS,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE1C,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA,EAAE,CAAC;AACzC,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACpD,OAAO,GAAG,CAAA;0BACc,KAAK,CAAC,IAAI,CAAC,OAAO;MACtC,aAAa;QACX,GAAG,CAAA;;;OAGJ;;GAEJ,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvD,OAAO,GAAG,CAAA;;;;aAIC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;MAC9B,UAAU;;;;;;;oBAOI,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;QACnC,SAAS;;;QAGT,UAAU;;;;GAIf,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAU7C,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7D,OAAO,GAAG,CAAA;qBACS,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;kBAC9B,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI;aACjC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;0BAEV,KAAK,CAAC,IAAI,CAAC,OAAO;GACzC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,SAAS,GAAoB,CAAC,EAAE,cAAc,EAAE,EAAE,EAAE;IAC/D,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,aAAa,YACvD,MAAC,YAAY,IAAC,KAAK,EAAE,CAAC,CAAC,UAAU,CAAC,EAAE,IAAI,QAAC,OAAO,EAAE,cAAc,aAC9D,KAAC,SAAS,IAAC,IAAI,EAAC,cAAc,WAAG,EACjC,KAAC,UAAU,IAAC,IAAI,EAAC,MAAM,WAAG,YACb,WACV,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\nimport { FC, MouseEvent } from 'react';\n\nimport {\n Button,\n defaultThemeProp,\n Flex,\n Icon,\n useI18n,\n StyledTooltip,\n Text\n} from '@pega/cosmos-react-core';\n\nimport { RendererNodeProps } from './Renderer/Renderer.types';\n\nexport const StyledDot = styled(Icon)(({ theme }) => {\n return css`\n position: absolute;\n color: ${theme.base.colors.slate.dark};\n `;\n});\n\nStyledDot.defaultProps = defaultThemeProp;\n\nexport const StyledPlus = styled(Icon)``;\nexport const StyledWrapper = styled.div(({ theme }) => {\n return css`\n margin-block-start: ${theme.base.spacing};\n ${StyledTooltip} {\n ${css`\n min-width: 12ch;\n text-align: center;\n `}\n }\n `;\n});\n\nStyledWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledButton = styled(Button)(({ theme }) => {\n return css`\n top: -0.25rem;\n border: 0;\n background: transparent;\n color: ${theme.base.colors.black};\n ${StyledPlus} {\n opacity: 0;\n }\n &:hover,\n &:active,\n &:focus {\n opacity: 1;\n background: ${theme.base.colors.white};\n ${StyledDot} {\n opacity: 0;\n }\n ${StyledPlus} {\n opacity: 1;\n }\n }\n `;\n});\n\nStyledButton.defaultProps = defaultThemeProp;\n\ninterface AddBtnProps {\n addNodeHandler: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\nexport interface AddNodeProps extends RendererNodeProps {\n onClick?: (ev: Event) => void;\n}\n\nexport const StyledConnectorLabel = styled(Text)(({ theme }) => {\n return css`\n border-radius: ${theme.base['border-radius']};\n background: ${theme.base.colors.slate.dark};\n color: ${theme.base.colors.white};\n text-align: center;\n padding: calc(0.5 * ${theme.base.spacing});\n `;\n});\n\nStyledConnectorLabel.defaultProps = defaultThemeProp;\n\nexport const AddButton: FC<AddBtnProps> = ({ addNodeHandler }) => {\n const t = useI18n();\n\n return (\n <Flex container={{ justify: 'center' }} as={StyledWrapper}>\n <StyledButton label={t('add_node')} icon onClick={addNodeHandler}>\n <StyledDot name='circle-solid' />\n <StyledPlus name='plus' />\n </StyledButton>\n </Flex>\n );\n};\n"]}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { PropsWithoutRef, MouseEvent } from 'react';
|
|
2
|
-
import { Action } from '@pega/cosmos-react-core';
|
|
3
|
-
import { GraphData, ConnectorProps } from './Renderer/Utils/Graph';
|
|
4
|
-
import { AddNodeHandlerParams } from './Renderer/Renderer.types';
|
|
5
|
-
import { ActionParams, NodeProps, NodeLibraryItem, NodeType } from './Node/Node.types';
|
|
6
|
-
export interface FlowModellerProps {
|
|
7
|
-
graphData: GraphData<NodeProps, ConnectorProps>;
|
|
8
|
-
/** Node actions */
|
|
9
|
-
actions?: Action[];
|
|
10
|
-
/** Callback to add node from connector */
|
|
11
|
-
onNodeAdd: (nodeType: NodeType, params: AddNodeHandlerParams) => void;
|
|
12
|
-
/** Callback for handling the click on the node */
|
|
13
|
-
onNodeClick?: (nodeId: string) => void;
|
|
14
|
-
/** Callback for actions on Node */
|
|
15
|
-
onNodeActionClick?: (param: ActionParams, e: MouseEvent) => void;
|
|
16
|
-
/** Types of nodes */
|
|
17
|
-
nodeLibrary: NodeLibraryItem[];
|
|
18
|
-
}
|
|
19
|
-
declare const FlowModeller: ({ graphData, onNodeActionClick, onNodeClick, onNodeAdd, nodeLibrary, actions }: PropsWithoutRef<FlowModellerProps>) => JSX.Element;
|
|
20
|
-
export default FlowModeller;
|
|
21
|
-
//# sourceMappingURL=FlowModeller.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"FlowModeller.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/FlowModeller.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EAEf,UAAU,EAMX,MAAM,OAAO,CAAC;AAGf,OAAO,EACL,MAAM,EAOP,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EACL,oBAAoB,EAGrB,MAAM,2BAA2B,CAAC;AAGnC,OAAO,EACL,YAAY,EACZ,SAAS,EACT,eAAe,EAGf,QAAQ,EACT,MAAM,mBAAmB,CAAC;AAQ3B,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,SAAS,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;IAChD,mBAAmB;IACnB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,0CAA0C;IAC1C,SAAS,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACtE,kDAAkD;IAClD,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,mCAAmC;IACnC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACjE,qBAAqB;IACrB,WAAW,EAAE,eAAe,EAAE,CAAC;CAChC;AAsED,QAAA,MAAM,YAAY,mFAOf,gBAAgB,iBAAiB,CAAC,gBAuMpC,CAAC;AAEF,eAAe,YAAY,CAAC"}
|