@pega/cosmos-react-core 9.0.0-build.14.1 → 9.0.0-build.14.11
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/lib/components/AppShell/AppShell.d.ts.map +1 -1
- package/lib/components/AppShell/AppShell.js +35 -12
- package/lib/components/AppShell/AppShell.js.map +1 -1
- package/lib/components/AppShell/AppShell.styles.d.ts +8 -1
- package/lib/components/AppShell/AppShell.styles.d.ts.map +1 -1
- package/lib/components/AppShell/AppShell.styles.js +134 -23
- package/lib/components/AppShell/AppShell.styles.js.map +1 -1
- package/lib/components/AppShell/AppShell.types.d.ts +5 -0
- package/lib/components/AppShell/AppShell.types.d.ts.map +1 -1
- package/lib/components/AppShell/AppShell.types.js.map +1 -1
- package/lib/components/AppShell/NavigationList.d.ts.map +1 -1
- package/lib/components/AppShell/NavigationList.js +8 -7
- package/lib/components/AppShell/NavigationList.js.map +1 -1
- package/lib/components/AppShell/NavigationListItemWrapper.d.ts.map +1 -1
- package/lib/components/AppShell/NavigationListItemWrapper.js +66 -45
- package/lib/components/AppShell/NavigationListItemWrapper.js.map +1 -1
- package/lib/components/Card/CardHeader.d.ts.map +1 -1
- package/lib/components/Card/CardHeader.js +10 -3
- package/lib/components/Card/CardHeader.js.map +1 -1
- package/lib/components/FieldGroup/FieldGroup.d.ts +3 -0
- package/lib/components/FieldGroup/FieldGroup.d.ts.map +1 -1
- package/lib/components/FieldGroup/FieldGroup.js +7 -1
- package/lib/components/FieldGroup/FieldGroup.js.map +1 -1
- package/lib/components/Menu/Menu.styles.d.ts.map +1 -1
- package/lib/components/Menu/Menu.styles.js +43 -1
- package/lib/components/Menu/Menu.styles.js.map +1 -1
- package/lib/components/Menu/MenuItem.d.ts.map +1 -1
- package/lib/components/Menu/MenuItem.js +4 -3
- package/lib/components/Menu/MenuItem.js.map +1 -1
- package/lib/components/PageTemplates/PageTemplates.js +3 -3
- package/lib/components/PageTemplates/PageTemplates.js.map +1 -1
- package/lib/components/Switch/Switch.d.ts.map +1 -1
- package/lib/components/Switch/Switch.js +1 -0
- package/lib/components/Switch/Switch.js.map +1 -1
- package/lib/components/Tabs/TabPanel.d.ts.map +1 -1
- package/lib/components/Tabs/TabPanel.js +3 -1
- package/lib/components/Tabs/TabPanel.js.map +1 -1
- package/lib/components/Tabs/Tabs.styles.d.ts.map +1 -1
- package/lib/components/Tabs/Tabs.styles.js +24 -4
- package/lib/components/Tabs/Tabs.styles.js.map +1 -1
- package/lib/hooks/useI18n.d.ts +7 -0
- package/lib/hooks/useI18n.d.ts.map +1 -1
- package/lib/i18n/default.d.ts +7 -0
- package/lib/i18n/default.d.ts.map +1 -1
- package/lib/i18n/default.js +10 -2
- package/lib/i18n/default.js.map +1 -1
- package/lib/i18n/i18n.d.ts +7 -0
- package/lib/i18n/i18n.d.ts.map +1 -1
- package/package.json +2 -2
|
@@ -62,6 +62,7 @@ export const StyledTabPanel = styled(Flex)(({ current, tablistType, level, theme
|
|
|
62
62
|
|
|
63
63
|
&&& ${StyledCardContent} {
|
|
64
64
|
padding: 0;
|
|
65
|
+
|
|
65
66
|
${StyledCard} {
|
|
66
67
|
border: 0;
|
|
67
68
|
padding: 0;
|
|
@@ -105,6 +106,7 @@ const StyledButton = styled(Button)(({ theme }) => {
|
|
|
105
106
|
return css `
|
|
106
107
|
padding-inline: calc(${theme.base.spacing});
|
|
107
108
|
opacity: 0;
|
|
109
|
+
|
|
108
110
|
&:focus {
|
|
109
111
|
opacity: 1;
|
|
110
112
|
}
|
|
@@ -134,7 +136,7 @@ const TabPanel = forwardRef(function TabPanel({ tabId, currentTabId, title, tabl
|
|
|
134
136
|
direction: 'column',
|
|
135
137
|
rowGap: 1,
|
|
136
138
|
...(tablistType === 'horizontal' && {
|
|
137
|
-
pad: level > 1 ? [1, 1.5
|
|
139
|
+
pad: level > 1 ? [1, 1.5] : [1, undefined, undefined]
|
|
138
140
|
})
|
|
139
141
|
}, item: { grow: 1 }, current: currentTab, inert: currentTab ? undefined : '', role: 'tabpanel', "aria-labelledby": `${tabId}`, id: `${tabId}-panel`, ref: tabPanelRef, tabIndex: 0, tablistType: tablistType, level: level, children: [title && _jsx(Text, { variant: `h${Math.min(2 + level, 6)}`, children: title }), children, tablistRef?.current && showReturnButton && (_jsx(StyledButton, { variant: 'link', onClick: () => {
|
|
140
142
|
getFocusables(tablistRef)[0]?.focus();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabPanel.js","sourceRoot":"","sources":["../../../src/components/Tabs/TabPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useCallback, useMemo, useContext } from 'react';\nimport type { ReactNode, Ref, PropsWithoutRef, RefObject } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useConsolidatedRef, useI18n, useFocusWithin, useEvent } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport type { ForwardRefForwardPropsComponent, HeadingTag } from '../../types';\nimport Button from '../Button';\nimport { getFocusables } from '../../utils';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport { StyledCardContent } from '../Card/CardContent';\nimport { StyledCard } from '../Card/Card';\nimport { StyledCardHeader } from '../Card/CardHeader';\n\nimport type { TabsProps } from './Tabs.types';\nimport TabsContext from './TabsContext';\nimport { StyledAllTabsWrapper, StyledTabs } from './Tabs.styles';\n\ninterface TabPanelProps {\n /** The id of the Tab that the tab panel is related to. */\n tabId: string;\n /**\n * The current selected value of the tabs. Controls the visibility of the tab panel.\n * The tabsValue must match the tabId in order for the TabPanel to show itself.\n */\n currentTabId?: string;\n /** The title for the tab panel */\n title?: string;\n /** Content of the tab panel. */\n children: ReactNode;\n /** Ref to the tablist element. */\n tablistRef?: RefObject<HTMLElement>;\n /**\n * The tablist type indicates what direction the tabs are rendered in.\n * @default 'horizontal'\n */\n tablistType?: TabsProps['type'];\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLDivElement>;\n}\n\nconst defaultProps: Partial<TabPanelProps> = {\n tabId: ''\n};\n\nexport const StyledTabPanel = styled(Flex)<\n Pick<TabPanelProps, 'tablistType'> & {\n current: boolean;\n level: number;\n }\n>(({ current, tablistType, level, theme }) => {\n return css`\n min-width: 0;\n max-width: 100%;\n\n :focus-visible {\n outline: none;\n box-shadow: ${tablistType === 'horizontal' && level > 1\n ? theme.base.shadow['focus-inset']\n : theme.base.shadow.focus};\n }\n\n ${!current &&\n css`\n display: none;\n `}\n\n ${tablistType === 'horizontal' &&\n level > 1 &&\n css`\n background-color: ${theme.base.palette['primary-background']};\n border: 0.0625rem solid ${theme.base.palette['border-line']};\n border-block-start: none;\n border-end-start-radius: calc(0.5rem * 0.5);\n border-end-end-radius: calc(0.5rem * 0.5);\n `}\n\n ${theme.components.tabs.detached &&\n tablistType === 'horizontal' &&\n css`\n background: ${theme.base.palette['primary-background']};\n border: 0.0625rem solid ${theme.base.palette['border-line']};\n border-block-start: none;\n border-radius: var(--border-radius, ${theme.base['border-radius']});\n border-start-start-radius: 0;\n border-start-end-radius: 0;\n padding: calc(2 * ${theme.base.spacing}) calc(2 * ${theme.base.spacing});\n\n &&& ${StyledCardHeader}:not(${StyledCard} ${StyledCard} > ${StyledCardHeader}) {\n padding: 0;\n @media (width < ${theme.base.breakpoints.sm}) {\n padding: 0;\n }\n }\n\n &&& ${StyledCardContent} {\n padding: 0;\n ${StyledCard} {\n border: 0;\n padding: 0;\n }\n }\n\n &&& ${StyledCard} {\n padding: calc(2 * ${theme.base.spacing});\n padding-block-start: ${theme.base.spacing};\n border: 0.0625rem solid ${theme.base.palette['border-line']};\n border-radius: var(--border-radius, ${theme.base['border-radius']});\n background: ${theme.components.card.background};\n }\n\n &&& > ${StyledCard} {\n padding: 0;\n border: 0;\n }\n\n ${StyledAllTabsWrapper} {\n ${StyledTabs} {\n margin-block-end: 0;\n }\n }\n\n ${level > 1 &&\n css`\n :has(&) {\n ${StyledAllTabsWrapper} {\n ${StyledTabs} {\n margin: 0;\n }\n }\n }\n `}\n `}\n `;\n});\n\nStyledTabPanel.defaultProps = defaultThemeProp;\n\nconst StyledButton = styled(Button)(({ theme }) => {\n return css`\n padding-inline: calc(${theme.base.spacing});\n opacity: 0;\n &:focus {\n opacity: 1;\n }\n `;\n});\n\nStyledButton.defaultProps = defaultThemeProp;\n\nconst TabPanel: ForwardRefForwardPropsComponent<TabPanelProps> = forwardRef(function TabPanel(\n {\n tabId,\n currentTabId,\n title,\n tablistRef,\n tablistType = 'horizontal',\n children,\n ...restProps\n }: PropsWithoutRef<TabPanelProps>,\n ref: TabPanelProps['ref']\n) {\n const t = useI18n();\n const tabPanelRef = useConsolidatedRef(ref);\n const [showReturnButton, setShowReturnButton] = useState(false);\n const { level } = useContext(TabsContext);\n\n const onFocusChange = useCallback((isFocused: boolean) => {\n if (!isFocused) {\n setShowReturnButton(false);\n }\n }, []);\n\n useFocusWithin([tabPanelRef], onFocusChange);\n\n const contextValue = useMemo(\n () => ({ level: tablistType === 'horizontal' ? level + 1 : 1 }),\n [level, tablistType]\n );\n\n const onKeyUp = () => {\n if (tabPanelRef.current?.contains(document.activeElement)) {\n setShowReturnButton(true);\n }\n };\n useEvent('keyup', onKeyUp);\n\n const currentTab = currentTabId && tabId ? currentTabId === tabId : true;\n\n return (\n <TabsContext.Provider value={contextValue}>\n <StyledTabPanel\n {...restProps}\n container={{\n direction: 'column',\n rowGap: 1,\n ...(tablistType === 'horizontal' && {\n pad: level > 1 ? [1, 1.5, undefined] : [1, undefined, undefined]\n })\n }}\n item={{ grow: 1 }}\n current={currentTab}\n inert={currentTab ? undefined : ''}\n role='tabpanel'\n aria-labelledby={`${tabId}`}\n id={`${tabId}-panel`}\n ref={tabPanelRef}\n tabIndex={0}\n tablistType={tablistType}\n level={level}\n >\n {title && <Text variant={`h${Math.min(2 + level, 6)}` as HeadingTag}>{title}</Text>}\n {children}\n {tablistRef?.current && showReturnButton && (\n <StyledButton\n variant='link'\n onClick={() => {\n getFocusables(tablistRef)[0]?.focus();\n }}\n >\n {t('return_to_tab_list')}\n </StyledButton>\n )}\n </StyledTabPanel>\n </TabsContext.Provider>\n );\n});\n\nTabPanel.defaultProps = defaultProps;\n\nexport default TabPanel;\n"]}
|
|
1
|
+
{"version":3,"file":"TabPanel.js","sourceRoot":"","sources":["../../../src/components/Tabs/TabPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useCallback, useMemo, useContext } from 'react';\nimport type { ReactNode, Ref, PropsWithoutRef, RefObject } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { useConsolidatedRef, useI18n, useFocusWithin, useEvent } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport type { ForwardRefForwardPropsComponent, HeadingTag } from '../../types';\nimport Button from '../Button';\nimport { getFocusables } from '../../utils';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport { StyledCardContent } from '../Card/CardContent';\nimport { StyledCard } from '../Card/Card';\nimport { StyledCardHeader } from '../Card/CardHeader';\n\nimport type { TabsProps } from './Tabs.types';\nimport TabsContext from './TabsContext';\nimport { StyledAllTabsWrapper, StyledTabs } from './Tabs.styles';\n\ninterface TabPanelProps {\n /** The id of the Tab that the tab panel is related to. */\n tabId: string;\n /**\n * The current selected value of the tabs. Controls the visibility of the tab panel.\n * The tabsValue must match the tabId in order for the TabPanel to show itself.\n */\n currentTabId?: string;\n /** The title for the tab panel */\n title?: string;\n /** Content of the tab panel. */\n children: ReactNode;\n /** Ref to the tablist element. */\n tablistRef?: RefObject<HTMLElement>;\n /**\n * The tablist type indicates what direction the tabs are rendered in.\n * @default 'horizontal'\n */\n tablistType?: TabsProps['type'];\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLDivElement>;\n}\n\nconst defaultProps: Partial<TabPanelProps> = {\n tabId: ''\n};\n\nexport const StyledTabPanel = styled(Flex)<\n Pick<TabPanelProps, 'tablistType'> & {\n current: boolean;\n level: number;\n }\n>(({ current, tablistType, level, theme }) => {\n return css`\n min-width: 0;\n max-width: 100%;\n\n :focus-visible {\n outline: none;\n box-shadow: ${tablistType === 'horizontal' && level > 1\n ? theme.base.shadow['focus-inset']\n : theme.base.shadow.focus};\n }\n\n ${!current &&\n css`\n display: none;\n `}\n\n ${tablistType === 'horizontal' &&\n level > 1 &&\n css`\n background-color: ${theme.base.palette['primary-background']};\n border: 0.0625rem solid ${theme.base.palette['border-line']};\n border-block-start: none;\n border-end-start-radius: calc(0.5rem * 0.5);\n border-end-end-radius: calc(0.5rem * 0.5);\n `}\n\n ${theme.components.tabs.detached &&\n tablistType === 'horizontal' &&\n css`\n background: ${theme.base.palette['primary-background']};\n border: 0.0625rem solid ${theme.base.palette['border-line']};\n border-block-start: none;\n border-radius: var(--border-radius, ${theme.base['border-radius']});\n border-start-start-radius: 0;\n border-start-end-radius: 0;\n padding: calc(2 * ${theme.base.spacing}) calc(2 * ${theme.base.spacing});\n\n &&& ${StyledCardHeader}:not(${StyledCard} ${StyledCard} > ${StyledCardHeader}) {\n padding: 0;\n @media (width < ${theme.base.breakpoints.sm}) {\n padding: 0;\n }\n }\n\n &&& ${StyledCardContent} {\n padding: 0;\n\n ${StyledCard} {\n border: 0;\n padding: 0;\n }\n }\n\n &&& ${StyledCard} {\n padding: calc(2 * ${theme.base.spacing});\n padding-block-start: ${theme.base.spacing};\n border: 0.0625rem solid ${theme.base.palette['border-line']};\n border-radius: var(--border-radius, ${theme.base['border-radius']});\n background: ${theme.components.card.background};\n }\n\n &&& > ${StyledCard} {\n padding: 0;\n border: 0;\n }\n\n ${StyledAllTabsWrapper} {\n ${StyledTabs} {\n margin-block-end: 0;\n }\n }\n\n ${level > 1 &&\n css`\n :has(&) {\n ${StyledAllTabsWrapper} {\n ${StyledTabs} {\n margin: 0;\n }\n }\n }\n `}\n `}\n `;\n});\n\nStyledTabPanel.defaultProps = defaultThemeProp;\n\nconst StyledButton = styled(Button)(({ theme }) => {\n return css`\n padding-inline: calc(${theme.base.spacing});\n opacity: 0;\n\n &:focus {\n opacity: 1;\n }\n `;\n});\n\nStyledButton.defaultProps = defaultThemeProp;\n\nconst TabPanel: ForwardRefForwardPropsComponent<TabPanelProps> = forwardRef(function TabPanel(\n {\n tabId,\n currentTabId,\n title,\n tablistRef,\n tablistType = 'horizontal',\n children,\n ...restProps\n }: PropsWithoutRef<TabPanelProps>,\n ref: TabPanelProps['ref']\n) {\n const t = useI18n();\n const tabPanelRef = useConsolidatedRef(ref);\n const [showReturnButton, setShowReturnButton] = useState(false);\n const { level } = useContext(TabsContext);\n\n const onFocusChange = useCallback((isFocused: boolean) => {\n if (!isFocused) {\n setShowReturnButton(false);\n }\n }, []);\n\n useFocusWithin([tabPanelRef], onFocusChange);\n\n const contextValue = useMemo(\n () => ({ level: tablistType === 'horizontal' ? level + 1 : 1 }),\n [level, tablistType]\n );\n\n const onKeyUp = () => {\n if (tabPanelRef.current?.contains(document.activeElement)) {\n setShowReturnButton(true);\n }\n };\n useEvent('keyup', onKeyUp);\n\n const currentTab = currentTabId && tabId ? currentTabId === tabId : true;\n\n return (\n <TabsContext.Provider value={contextValue}>\n <StyledTabPanel\n {...restProps}\n container={{\n direction: 'column',\n rowGap: 1,\n ...(tablistType === 'horizontal' && {\n pad: level > 1 ? [1, 1.5] : [1, undefined, undefined]\n })\n }}\n item={{ grow: 1 }}\n current={currentTab}\n inert={currentTab ? undefined : ''}\n role='tabpanel'\n aria-labelledby={`${tabId}`}\n id={`${tabId}-panel`}\n ref={tabPanelRef}\n tabIndex={0}\n tablistType={tablistType}\n level={level}\n >\n {title && <Text variant={`h${Math.min(2 + level, 6)}` as HeadingTag}>{title}</Text>}\n {children}\n {tablistRef?.current && showReturnButton && (\n <StyledButton\n variant='link'\n onClick={() => {\n getFocusables(tablistRef)[0]?.focus();\n }}\n >\n {t('return_to_tab_list')}\n </StyledButton>\n )}\n </StyledTabPanel>\n </TabsContext.Provider>\n );\n});\n\nTabPanel.defaultProps = defaultProps;\n\nexport default TabPanel;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,0BAA0B,yGAmBtC,CAAC;AAIF,eAAO,MAAM,UAAU;kBACP,OAAO;WACd,MAAM;
|
|
1
|
+
{"version":3,"file":"Tabs.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,0BAA0B,yGAmBtC,CAAC;AAIF,eAAO,MAAM,UAAU;kBACP,OAAO;WACd,MAAM;SAqIb,CAAC;AAIH,eAAO,MAAM,mBAAmB;;uDAI/B,CAAC;AAIF,eAAO,MAAM,eAAe,0KAI3B,CAAC;AAIF,eAAO,MAAM,oBAAoB;WACxB,MAAM;SAoCd,CAAC;AAIF,eAAO,MAAM,eAAe;iBAA8B,OAAO;SAOhE,CAAC"}
|
|
@@ -31,16 +31,20 @@ export const StyledTabs = styled.div(({ theme, hasScrollBar, level }) => {
|
|
|
31
31
|
${StyledTab} + ${StyledTab} {
|
|
32
32
|
margin-inline-start: calc(2 * ${theme.base.spacing});
|
|
33
33
|
}
|
|
34
|
+
|
|
34
35
|
&[aria-orientation='horizontal'] {
|
|
35
36
|
background-color: ${theme.base.palette['secondary-background']};
|
|
36
37
|
border-radius: var(--border-radius, ${theme.base['border-radius']});
|
|
37
38
|
border-end-end-radius: 0;
|
|
38
39
|
border-end-start-radius: 0;
|
|
40
|
+
|
|
39
41
|
> ${StyledTab} {
|
|
40
42
|
background-color: ${theme.base.palette['secondary-background']};
|
|
43
|
+
|
|
41
44
|
&[aria-selected='true'] {
|
|
42
45
|
background-color: ${theme.base.palette['primary-background']};
|
|
43
46
|
}
|
|
47
|
+
|
|
44
48
|
${!hasScrollBar &&
|
|
45
49
|
css `
|
|
46
50
|
:first-child {
|
|
@@ -56,7 +60,6 @@ export const StyledTabs = styled.div(({ theme, hasScrollBar, level }) => {
|
|
|
56
60
|
}
|
|
57
61
|
}
|
|
58
62
|
`}
|
|
59
|
-
|
|
60
63
|
&[aria-orientation='horizontal'] {
|
|
61
64
|
height: max-content;
|
|
62
65
|
overflow: auto;
|
|
@@ -68,6 +71,13 @@ export const StyledTabs = styled.div(({ theme, hasScrollBar, level }) => {
|
|
|
68
71
|
${level > 1 ? '0px' : `calc(0.5 * ${theme.base.spacing}) - 0.0625rem `}
|
|
69
72
|
);
|
|
70
73
|
|
|
74
|
+
@media (pointer: coarse) {
|
|
75
|
+
max-width: calc(
|
|
76
|
+
100% - ${theme.base['hit-area']['finger-min']} -
|
|
77
|
+
${level > 1 ? '0px' : `calc(0.5 * ${theme.base.spacing}) - 0.0625rem `}
|
|
78
|
+
);
|
|
79
|
+
}
|
|
80
|
+
|
|
71
81
|
${StyledTab} {
|
|
72
82
|
border-block-end: ${theme.components.tabs.detached
|
|
73
83
|
? 'none'
|
|
@@ -80,6 +90,7 @@ export const StyledTabs = styled.div(({ theme, hasScrollBar, level }) => {
|
|
|
80
90
|
|
|
81
91
|
&:disabled {
|
|
82
92
|
opacity: 1;
|
|
93
|
+
|
|
83
94
|
> * {
|
|
84
95
|
opacity: ${theme.base['disabled-opacity']};
|
|
85
96
|
}
|
|
@@ -115,9 +126,11 @@ export const StyledTabs = styled.div(({ theme, hasScrollBar, level }) => {
|
|
|
115
126
|
${StylesAllTabsButtonWrapper} + & {
|
|
116
127
|
padding-inline-start: calc(0.25 * ${theme.base.spacing});
|
|
117
128
|
}
|
|
129
|
+
|
|
118
130
|
${StyledTab} + ${StyledTab} {
|
|
119
131
|
margin-inline-start: 0;
|
|
120
132
|
}
|
|
133
|
+
|
|
121
134
|
${hasScrollBar &&
|
|
122
135
|
css `
|
|
123
136
|
border: none;
|
|
@@ -157,14 +170,14 @@ export const StyledAllTabsWrapper = styled.div(({ theme, level }) => css `
|
|
|
157
170
|
${level > 1 &&
|
|
158
171
|
css `
|
|
159
172
|
background-color: ${theme.base.palette['secondary-background']};
|
|
173
|
+
border-start-start-radius: var(--border-radius, ${theme.base['border-radius']});
|
|
174
|
+
border-start-end-radius: var(--border-radius, ${theme.base['border-radius']});
|
|
175
|
+
|
|
160
176
|
${!theme.components.tabs.detached &&
|
|
161
177
|
css `
|
|
162
178
|
border-inline: 0.0625rem solid ${theme.base.palette['border-line']};
|
|
163
179
|
border-block-start: 0.0625rem solid ${theme.base.palette['border-line']};
|
|
164
|
-
border-start-start-radius: calc(0.5rem * 0.5);
|
|
165
|
-
border-start-end-radius: calc(0.5rem * 0.5);
|
|
166
180
|
`}
|
|
167
|
-
|
|
168
181
|
${StylesAllTabsButtonWrapper}, ${StyledTab} {
|
|
169
182
|
border-block-end: none;
|
|
170
183
|
border-inline-end: none;
|
|
@@ -174,7 +187,14 @@ export const StyledAllTabsWrapper = styled.div(({ theme, level }) => css `
|
|
|
174
187
|
css `
|
|
175
188
|
background-color: ${theme.base.palette['primary-background']};
|
|
176
189
|
border: 0.0625rem solid ${theme.base.palette['border-line']};
|
|
190
|
+
border-start-start-radius: var(--border-radius, ${theme.base['border-radius']});
|
|
191
|
+
border-start-end-radius: var(--border-radius, ${theme.base['border-radius']});
|
|
177
192
|
border-block-end: none;
|
|
193
|
+
|
|
194
|
+
${StyledTabs}[aria-orientation='horizontal'] {
|
|
195
|
+
border-start-start-radius: 0;
|
|
196
|
+
}
|
|
197
|
+
|
|
178
198
|
${StylesAllTabsButtonWrapper} {
|
|
179
199
|
border-radius: 0;
|
|
180
200
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.styles.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport Icon from '../Icon';\nimport MenuButton from '../MenuButton';\nimport { defaultThemeProp } from '../../theme';\n\nimport { StyledTab } from './Tab';\n\nexport const StylesAllTabsButtonWrapper = styled.div(\n ({ theme }) => css`\n border-block-end: ${theme.components.tabs.detached\n ? 'none'\n : `0.0625rem solid ${theme.base.palette['border-line']}`};\n border-inline-end: ${theme.components.tabs.detached\n ? 'none'\n : `0.0625rem solid ${theme.base.palette['border-line']}`};\n height: calc(${theme.base['hit-area']['mouse-min']} + 0.0625rem);\n\n ${theme.components.tabs.detached &&\n css`\n padding: 0;\n `};\n\n @media (pointer: coarse) {\n height: calc(${theme.base['hit-area']['finger-min']} + 0.0625rem);\n }\n `\n);\n\nStylesAllTabsButtonWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledTabs = styled.div<{\n hasScrollBar: boolean;\n level: number;\n}>(({ theme, hasScrollBar, level }) => {\n return css`\n position: relative;\n\n ${theme.components.tabs.detached &&\n css`\n ${StyledTab} + ${StyledTab} {\n margin-inline-start: calc(2 * ${theme.base.spacing});\n }\n &[aria-orientation='horizontal'] {\n background-color: ${theme.base.palette['secondary-background']};\n border-radius: var(--border-radius, ${theme.base['border-radius']});\n border-end-end-radius: 0;\n border-end-start-radius: 0;\n > ${StyledTab} {\n background-color: ${theme.base.palette['secondary-background']};\n &[aria-selected='true'] {\n background-color: ${theme.base.palette['primary-background']};\n }\n ${!hasScrollBar &&\n css`\n :first-child {\n border-top-left-radius: var(--border-radius, ${theme.base['border-radius']});\n }\n `}\n ${hasScrollBar &&\n css`\n :last-child {\n border-top-right-radius: var(--border-radius, ${theme.base['border-radius']});\n }\n `}\n }\n }\n `}\n\n &[aria-orientation='horizontal'] {\n height: max-content;\n overflow: auto;\n\n ${hasScrollBar\n ? css`\n max-width: calc(\n 100% - ${theme.base['hit-area']['mouse-min']} -\n ${level > 1 ? '0px' : `calc(0.5 * ${theme.base.spacing}) - 0.0625rem `}\n );\n\n ${StyledTab} {\n border-block-end: ${theme.components.tabs.detached\n ? 'none'\n : `0.0625rem solid ${theme.base.palette['border-line']}`};\n height: calc(${theme.base['hit-area']['mouse-min']} + 0.0625rem);\n\n @media (pointer: coarse) {\n height: calc(${theme.base['hit-area']['finger-min']} + 0.0625rem);\n }\n\n &:disabled {\n opacity: 1;\n > * {\n opacity: ${theme.base['disabled-opacity']};\n }\n }\n }\n `\n : css`\n border-block-end: ${theme.components.tabs.detached\n ? 'none'\n : `0.0625rem solid ${theme.base.palette['border-line']}`};\n ${level > 1 &&\n css`\n background-color: ${theme.base.palette['secondary-background']};\n border: ${theme.components.tabs.detached\n ? 'none'\n : `0.0625rem solid ${theme.base.palette['border-line']}`};\n border-block-end: none;\n border-radius: 0;\n border-start-start-radius: ${theme.components.tabs.detached\n ? `var(--border-radius, ${theme.base['border-radius']})`\n : 'calc(0.5rem * 0.5)'};\n border-start-end-radius: ${theme.components.tabs.detached\n ? `var(--border-radius, ${theme.base['border-radius']})`\n : 'calc(0.5rem * 0.5)'};\n `}\n `}\n ${theme.components.tabs.detached &&\n css`\n padding-block: 0;\n border: 0.0625rem solid ${theme.base.palette['border-line']};\n border-block-end: none;\n\n ${StylesAllTabsButtonWrapper} + & {\n padding-inline-start: calc(0.25 * ${theme.base.spacing});\n }\n ${StyledTab} + ${StyledTab} {\n margin-inline-start: 0;\n }\n ${hasScrollBar &&\n css`\n border: none;\n border-inline-start: none;\n max-width: calc(100% - ${theme.base['hit-area']['mouse-min']});\n\n @media (pointer: coarse) {\n max-width: calc(100% - ${theme.base['hit-area']['finger-min']});\n }\n `}\n `}\n }\n\n &:has(:focus-visible) {\n &[aria-orientation='vertical'] {\n box-shadow: ${theme.base.shadow['focus-group-inset']};\n }\n\n &[aria-orientation='horizontal'] {\n box-shadow: ${theme.base.shadow['focus-group']};\n }\n }\n `;\n});\n\nStyledTabs.defaultProps = defaultThemeProp;\n\nexport const StyledAllTabsButton = styled(MenuButton)`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n`;\n\nStyledAllTabsButton.defaultProps = defaultThemeProp;\n\nexport const StyledErrorIcon = styled(Icon)(\n ({ theme }) => css`\n color: ${theme.base.palette.urgent};\n `\n);\n\nStyledErrorIcon.defaultProps = defaultThemeProp;\n\nexport const StyledAllTabsWrapper = styled.div<{\n level: number;\n}>(\n ({ theme, level }) => css`\n ${level > 1 &&\n css`\n background-color: ${theme.base.palette['secondary-background']};\n ${!theme.components.tabs.detached &&\n css`\n border-inline: 0.0625rem solid ${theme.base.palette['border-line']};\n border-block-start: 0.0625rem solid ${theme.base.palette['border-line']};\n border-start-start-radius: calc(0.5rem * 0.5);\n border-start-end-radius: calc(0.5rem * 0.5);\n `}\n\n ${StylesAllTabsButtonWrapper}, ${StyledTab} {\n border-block-end: none;\n border-inline-end: none;\n }\n `}\n ${theme.components.tabs.detached &&\n css`\n background-color: ${theme.base.palette['primary-background']};\n border: 0.0625rem solid ${theme.base.palette['border-line']};\n border-block-end: none;\n ${StylesAllTabsButtonWrapper} {\n border-radius: 0;\n }\n `}\n `\n);\n\nStyledAllTabsWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledSeparator = styled.span<{ transparent: boolean }>(\n ({ theme, transparent }) => css`\n align-self: center;\n height: 1em;\n min-width: 0.0625rem;\n background-color: ${transparent ? 'transparent' : theme.base.palette['border-line']};\n `\n);\n\nStyledSeparator.defaultProps = defaultThemeProp;\n"]}
|
|
1
|
+
{"version":3,"file":"Tabs.styles.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport Icon from '../Icon';\nimport MenuButton from '../MenuButton';\nimport { defaultThemeProp } from '../../theme';\n\nimport { StyledTab } from './Tab';\n\nexport const StylesAllTabsButtonWrapper = styled.div(\n ({ theme }) => css`\n border-block-end: ${theme.components.tabs.detached\n ? 'none'\n : `0.0625rem solid ${theme.base.palette['border-line']}`};\n border-inline-end: ${theme.components.tabs.detached\n ? 'none'\n : `0.0625rem solid ${theme.base.palette['border-line']}`};\n height: calc(${theme.base['hit-area']['mouse-min']} + 0.0625rem);\n\n ${theme.components.tabs.detached &&\n css`\n padding: 0;\n `};\n\n @media (pointer: coarse) {\n height: calc(${theme.base['hit-area']['finger-min']} + 0.0625rem);\n }\n `\n);\n\nStylesAllTabsButtonWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledTabs = styled.div<{\n hasScrollBar: boolean;\n level: number;\n}>(({ theme, hasScrollBar, level }) => {\n return css`\n position: relative;\n\n ${theme.components.tabs.detached &&\n css`\n ${StyledTab} + ${StyledTab} {\n margin-inline-start: calc(2 * ${theme.base.spacing});\n }\n\n &[aria-orientation='horizontal'] {\n background-color: ${theme.base.palette['secondary-background']};\n border-radius: var(--border-radius, ${theme.base['border-radius']});\n border-end-end-radius: 0;\n border-end-start-radius: 0;\n\n > ${StyledTab} {\n background-color: ${theme.base.palette['secondary-background']};\n\n &[aria-selected='true'] {\n background-color: ${theme.base.palette['primary-background']};\n }\n\n ${!hasScrollBar &&\n css`\n :first-child {\n border-top-left-radius: var(--border-radius, ${theme.base['border-radius']});\n }\n `}\n ${hasScrollBar &&\n css`\n :last-child {\n border-top-right-radius: var(--border-radius, ${theme.base['border-radius']});\n }\n `}\n }\n }\n `}\n &[aria-orientation='horizontal'] {\n height: max-content;\n overflow: auto;\n\n ${hasScrollBar\n ? css`\n max-width: calc(\n 100% - ${theme.base['hit-area']['mouse-min']} -\n ${level > 1 ? '0px' : `calc(0.5 * ${theme.base.spacing}) - 0.0625rem `}\n );\n\n @media (pointer: coarse) {\n max-width: calc(\n 100% - ${theme.base['hit-area']['finger-min']} -\n ${level > 1 ? '0px' : `calc(0.5 * ${theme.base.spacing}) - 0.0625rem `}\n );\n }\n\n ${StyledTab} {\n border-block-end: ${theme.components.tabs.detached\n ? 'none'\n : `0.0625rem solid ${theme.base.palette['border-line']}`};\n height: calc(${theme.base['hit-area']['mouse-min']} + 0.0625rem);\n\n @media (pointer: coarse) {\n height: calc(${theme.base['hit-area']['finger-min']} + 0.0625rem);\n }\n\n &:disabled {\n opacity: 1;\n\n > * {\n opacity: ${theme.base['disabled-opacity']};\n }\n }\n }\n `\n : css`\n border-block-end: ${theme.components.tabs.detached\n ? 'none'\n : `0.0625rem solid ${theme.base.palette['border-line']}`};\n ${level > 1 &&\n css`\n background-color: ${theme.base.palette['secondary-background']};\n border: ${theme.components.tabs.detached\n ? 'none'\n : `0.0625rem solid ${theme.base.palette['border-line']}`};\n border-block-end: none;\n border-radius: 0;\n border-start-start-radius: ${theme.components.tabs.detached\n ? `var(--border-radius, ${theme.base['border-radius']})`\n : 'calc(0.5rem * 0.5)'};\n border-start-end-radius: ${theme.components.tabs.detached\n ? `var(--border-radius, ${theme.base['border-radius']})`\n : 'calc(0.5rem * 0.5)'};\n `}\n `}\n ${theme.components.tabs.detached &&\n css`\n padding-block: 0;\n border: 0.0625rem solid ${theme.base.palette['border-line']};\n border-block-end: none;\n\n ${StylesAllTabsButtonWrapper} + & {\n padding-inline-start: calc(0.25 * ${theme.base.spacing});\n }\n\n ${StyledTab} + ${StyledTab} {\n margin-inline-start: 0;\n }\n\n ${hasScrollBar &&\n css`\n border: none;\n border-inline-start: none;\n max-width: calc(100% - ${theme.base['hit-area']['mouse-min']});\n\n @media (pointer: coarse) {\n max-width: calc(100% - ${theme.base['hit-area']['finger-min']});\n }\n `}\n `}\n }\n\n &:has(:focus-visible) {\n &[aria-orientation='vertical'] {\n box-shadow: ${theme.base.shadow['focus-group-inset']};\n }\n\n &[aria-orientation='horizontal'] {\n box-shadow: ${theme.base.shadow['focus-group']};\n }\n }\n `;\n});\n\nStyledTabs.defaultProps = defaultThemeProp;\n\nexport const StyledAllTabsButton = styled(MenuButton)`\n display: inline-flex;\n align-items: center;\n justify-content: center;\n`;\n\nStyledAllTabsButton.defaultProps = defaultThemeProp;\n\nexport const StyledErrorIcon = styled(Icon)(\n ({ theme }) => css`\n color: ${theme.base.palette.urgent};\n `\n);\n\nStyledErrorIcon.defaultProps = defaultThemeProp;\n\nexport const StyledAllTabsWrapper = styled.div<{\n level: number;\n}>(\n ({ theme, level }) => css`\n ${level > 1 &&\n css`\n background-color: ${theme.base.palette['secondary-background']};\n border-start-start-radius: var(--border-radius, ${theme.base['border-radius']});\n border-start-end-radius: var(--border-radius, ${theme.base['border-radius']});\n\n ${!theme.components.tabs.detached &&\n css`\n border-inline: 0.0625rem solid ${theme.base.palette['border-line']};\n border-block-start: 0.0625rem solid ${theme.base.palette['border-line']};\n `}\n ${StylesAllTabsButtonWrapper}, ${StyledTab} {\n border-block-end: none;\n border-inline-end: none;\n }\n `}\n ${theme.components.tabs.detached &&\n css`\n background-color: ${theme.base.palette['primary-background']};\n border: 0.0625rem solid ${theme.base.palette['border-line']};\n border-start-start-radius: var(--border-radius, ${theme.base['border-radius']});\n border-start-end-radius: var(--border-radius, ${theme.base['border-radius']});\n border-block-end: none;\n\n ${StyledTabs}[aria-orientation='horizontal'] {\n border-start-start-radius: 0;\n }\n\n ${StylesAllTabsButtonWrapper} {\n border-radius: 0;\n }\n `}\n `\n);\n\nStyledAllTabsWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledSeparator = styled.span<{ transparent: boolean }>(\n ({ theme, transparent }) => css`\n align-self: center;\n height: 1em;\n min-width: 0.0625rem;\n background-color: ${transparent ? 'transparent' : theme.base.palette['border-line']};\n `\n);\n\nStyledSeparator.defaultProps = defaultThemeProp;\n"]}
|
package/lib/hooks/useI18n.d.ts
CHANGED
|
@@ -198,6 +198,8 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
|
|
|
198
198
|
processing: string;
|
|
199
199
|
copied_to_clipboard: string;
|
|
200
200
|
failed_to_copy: string;
|
|
201
|
+
viewing: string;
|
|
202
|
+
editing: string;
|
|
201
203
|
day_placeholder: string;
|
|
202
204
|
month_placeholder: string;
|
|
203
205
|
year_placeholder: string;
|
|
@@ -269,6 +271,7 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
|
|
|
269
271
|
main_content: string;
|
|
270
272
|
app_shell_create: string;
|
|
271
273
|
app_shell_open_nav: string;
|
|
274
|
+
app_shell_more: string;
|
|
272
275
|
app_shell_main_navigation_label: string;
|
|
273
276
|
shortcut_NextRegion: string;
|
|
274
277
|
shortcut_PrevRegion: string;
|
|
@@ -1485,6 +1488,7 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
|
|
|
1485
1488
|
unsupported_rule_type_label: string;
|
|
1486
1489
|
unsupported_rule_type_description: string;
|
|
1487
1490
|
create_new_record_failed: string;
|
|
1491
|
+
override_parameters: string;
|
|
1488
1492
|
component_not_found_error: string;
|
|
1489
1493
|
component_not_found_error_with_type: string;
|
|
1490
1494
|
component_not_found_error_with_subtype: string;
|
|
@@ -1534,6 +1538,9 @@ declare const useI18n: () => import("../i18n/translate").TranslationFunction<Rea
|
|
|
1534
1538
|
field_does_not_exist_on_the_selected_source: string;
|
|
1535
1539
|
failed_to_validate_source: string;
|
|
1536
1540
|
source_used_for_picklist_values: string;
|
|
1541
|
+
filter_mappings: string;
|
|
1542
|
+
filter_mappings_additional_info: string;
|
|
1543
|
+
add_mapping: string;
|
|
1537
1544
|
private_only: string;
|
|
1538
1545
|
shared_users_with_access: string;
|
|
1539
1546
|
public_all_users: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useI18n.d.ts","sourceRoot":"","sources":["../../src/hooks/useI18n.ts"],"names":[],"mappings":"AAMA;;;GAGG;AACH,QAAA,MAAM,OAAO
|
|
1
|
+
{"version":3,"file":"useI18n.d.ts","sourceRoot":"","sources":["../../src/hooks/useI18n.ts"],"names":[],"mappings":"AAMA;;;GAGG;AACH,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAGZ,CAAC;AAEF,eAAe,OAAO,CAAC"}
|
package/lib/i18n/default.d.ts
CHANGED
|
@@ -194,6 +194,8 @@ declare const _default: {
|
|
|
194
194
|
processing: string;
|
|
195
195
|
copied_to_clipboard: string;
|
|
196
196
|
failed_to_copy: string;
|
|
197
|
+
viewing: string;
|
|
198
|
+
editing: string;
|
|
197
199
|
day_placeholder: string;
|
|
198
200
|
month_placeholder: string;
|
|
199
201
|
year_placeholder: string;
|
|
@@ -265,6 +267,7 @@ declare const _default: {
|
|
|
265
267
|
main_content: string;
|
|
266
268
|
app_shell_create: string;
|
|
267
269
|
app_shell_open_nav: string;
|
|
270
|
+
app_shell_more: string;
|
|
268
271
|
app_shell_main_navigation_label: string;
|
|
269
272
|
shortcut_NextRegion: string;
|
|
270
273
|
shortcut_PrevRegion: string;
|
|
@@ -1482,6 +1485,7 @@ declare const _default: {
|
|
|
1482
1485
|
unsupported_rule_type_label: string;
|
|
1483
1486
|
unsupported_rule_type_description: string;
|
|
1484
1487
|
create_new_record_failed: string;
|
|
1488
|
+
override_parameters: string;
|
|
1485
1489
|
component_not_found_error: string;
|
|
1486
1490
|
component_not_found_error_with_type: string;
|
|
1487
1491
|
component_not_found_error_with_subtype: string;
|
|
@@ -1532,6 +1536,9 @@ declare const _default: {
|
|
|
1532
1536
|
field_does_not_exist_on_the_selected_source: string;
|
|
1533
1537
|
failed_to_validate_source: string;
|
|
1534
1538
|
source_used_for_picklist_values: string;
|
|
1539
|
+
filter_mappings: string;
|
|
1540
|
+
filter_mappings_additional_info: string;
|
|
1541
|
+
add_mapping: string;
|
|
1535
1542
|
/** authoring-ui-view: Runtime Dashboards */
|
|
1536
1543
|
private_only: string;
|
|
1537
1544
|
shared_users_with_access: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../src/i18n/default.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../src/i18n/default.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAkjDE,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAwMxB,6CAA6C;;;;;;;IAS7C,4CAA4C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA2F5C,+BAA+B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA2C/B,uCAAuC;;;;;;;;;;;IAavC,6CAA6C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAt5D/C,wBA28DE"}
|
package/lib/i18n/default.js
CHANGED
|
@@ -203,6 +203,8 @@ export default {
|
|
|
203
203
|
processing: 'Processing',
|
|
204
204
|
copied_to_clipboard: 'Copied to clipboard',
|
|
205
205
|
failed_to_copy: 'Failed to copy',
|
|
206
|
+
viewing: 'Viewing',
|
|
207
|
+
editing: 'Editing',
|
|
206
208
|
/* Date and time */
|
|
207
209
|
day_placeholder: 'DD',
|
|
208
210
|
month_placeholder: 'MM',
|
|
@@ -287,6 +289,7 @@ export default {
|
|
|
287
289
|
/* core:AppShell */
|
|
288
290
|
app_shell_create: 'Create',
|
|
289
291
|
app_shell_open_nav: 'Open navigation menu',
|
|
292
|
+
app_shell_more: 'More',
|
|
290
293
|
app_shell_main_navigation_label: 'Main',
|
|
291
294
|
shortcut_NextRegion: 'Next region',
|
|
292
295
|
shortcut_PrevRegion: 'Previous region',
|
|
@@ -1450,8 +1453,8 @@ export default {
|
|
|
1450
1453
|
constant_label: 'Static ({0})',
|
|
1451
1454
|
expression_label: 'Expression',
|
|
1452
1455
|
rule_label: 'Source from Library',
|
|
1453
|
-
field_reference_label: 'Source from a
|
|
1454
|
-
field_reference_description: 'Set this value by referencing a
|
|
1456
|
+
field_reference_label: 'Source from a Field',
|
|
1457
|
+
field_reference_description: 'Set this value by referencing a Field.',
|
|
1455
1458
|
value_type: 'Value type',
|
|
1456
1459
|
dynamicInput_format_Text: 'Text',
|
|
1457
1460
|
'dynamicInput_format_Text (paragraph)': 'Text (paragraph)',
|
|
@@ -1587,6 +1590,8 @@ export default {
|
|
|
1587
1590
|
unsupported_rule_type_label: 'Unsupported ruleType',
|
|
1588
1591
|
unsupported_rule_type_description: "Unsupported rule type: '{0}'",
|
|
1589
1592
|
create_new_record_failed: 'Create new record failed',
|
|
1593
|
+
/* authoring-ui-views: DataPage format */
|
|
1594
|
+
override_parameters: 'Override parameters',
|
|
1590
1595
|
/* authoring-ui-views: ContentPicker */
|
|
1591
1596
|
component_not_found_error: "The '{0}' component is missing. Check that it is added to the application.",
|
|
1592
1597
|
component_not_found_error_with_type: "No components of type '{0}' were found.",
|
|
@@ -1647,6 +1652,9 @@ export default {
|
|
|
1647
1652
|
field_does_not_exist_on_the_selected_source: "Field doesn't exist on the selected source",
|
|
1648
1653
|
failed_to_validate_source: 'Failed to validate source',
|
|
1649
1654
|
source_used_for_picklist_values: 'Source used for picklist values',
|
|
1655
|
+
filter_mappings: 'Filter mappings',
|
|
1656
|
+
filter_mappings_additional_info: 'Configure how the filter is applied on each Insight. The filter is not applied on Insights for which no mapping is configured.',
|
|
1657
|
+
add_mapping: 'Add mapping',
|
|
1650
1658
|
/** authoring-ui-view: Runtime Dashboards */
|
|
1651
1659
|
private_only: 'Private - Only you',
|
|
1652
1660
|
shared_users_with_access: 'Shared - Users with access',
|