diff --git a/.gitignore b/.gitignore
index 6efa61305..6f7f99e37 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,8 +10,8 @@ client/packages/lowcoder-plugin-demo/.yarn/install-state.gz
client/packages/lowcoder-plugin-demo/yarn.lock
client/packages/lowcoder-plugin-demo/.yarn/cache/@types-node-npm-16.18.68-56f72825c0-094ae9ed80.zip
application-dev.yml
-server/api-service/lowcoder-server/src/main/resources/application-lowcoder.yml
-server/api-service/lowcoder-server/src/main/resources/application-debug.yaml
+application-lowcoder.yml
+application-debug.yaml
+application-dev-localhost.yaml
.vscode/settings.json
-.vscode/launch.json
-server/api-service/lowcoder-server/src/main/resources/application-dev-localhost.yaml
+.vscode/launch.json
\ No newline at end of file
diff --git a/client/VERSION b/client/VERSION
index 58073ef8d..acdc3f1b0 100644
--- a/client/VERSION
+++ b/client/VERSION
@@ -1 +1 @@
-2.4.1
\ No newline at end of file
+2.4.2
\ No newline at end of file
diff --git a/client/package.json b/client/package.json
index 44087ce6a..39da5a410 100644
--- a/client/package.json
+++ b/client/package.json
@@ -80,6 +80,7 @@
"chalk": "4",
"flag-icons": "^7.2.1",
"number-precision": "^1.6.0",
+ "posthog-js": "^1.144.2",
"react-countup": "^6.5.3",
"react-player": "^2.11.0",
"resize-observer-polyfill": "^1.5.1",
diff --git a/client/packages/lowcoder-comps/package.json b/client/packages/lowcoder-comps/package.json
index 7a31785b7..5da1fff1f 100644
--- a/client/packages/lowcoder-comps/package.json
+++ b/client/packages/lowcoder-comps/package.json
@@ -34,30 +34,6 @@
"lowcoder": {
"description": "",
"comps": {
- "meetingController": {
- "name": "Agora Meeting Controller",
- "icon": "./icons/icon-comp-calendar.svg",
- "layoutInfo": {
- "w": 1,
- "h": 1
- }
- },
- "meetingSharing": {
- "name": "Agora Meeting Sharing",
- "icon": "./icons/icon-comp-calendar.svg",
- "layoutInfo": {
- "w": 6,
- "h": 40
- }
- },
- "meetingStream": {
- "name": "Video Stream",
- "icon": "./icons/icon-comp-calendar.svg",
- "layoutInfo": {
- "w": 6,
- "h": 40
- }
- },
"calendar": {
"name": "Calendar",
"icon": "./icons/icon-comp-calendar.svg",
@@ -193,6 +169,30 @@
"w": 19,
"h": 60
}
+ },
+ "meetingController": {
+ "name": "Agora Meeting Controller",
+ "icon": "./icons/icon-comp-calendar.svg",
+ "layoutInfo": {
+ "w": 1,
+ "h": 1
+ }
+ },
+ "meetingSharing": {
+ "name": "Agora Meeting Sharing",
+ "icon": "./icons/icon-comp-calendar.svg",
+ "layoutInfo": {
+ "w": 6,
+ "h": 40
+ }
+ },
+ "meetingStream": {
+ "name": "Video Stream",
+ "icon": "./icons/icon-comp-calendar.svg",
+ "layoutInfo": {
+ "w": 6,
+ "h": 40
+ }
}
}
},
diff --git a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartComp.tsx b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartComp.tsx
index e2eb34577..e2a162810 100644
--- a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartComp.tsx
@@ -25,7 +25,8 @@ import {
ThemeContext,
chartColorPalette,
getPromiseAfterDispatch,
- dropdownControl
+ dropdownControl,
+ useMergeCompStyles,
} from "lowcoder-sdk";
import { getEchartsLocale, trans } from "i18n/comps";
import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig";
@@ -73,6 +74,8 @@ BasicChartTmpComp = withViewFn(BasicChartTmpComp, (comp) => {
log.error('theme chart error: ', error);
}
+ useMergeCompStyles(childrenToProps(comp.children), comp.dispatch);
+
const triggerClickEvent = async (dispatch: any, action: CompAction<JSONValue>) => {
await getPromiseAfterDispatch(
dispatch,
@@ -123,7 +126,8 @@ BasicChartTmpComp = withViewFn(BasicChartTmpComp, (comp) => {
const option = useMemo(() => {
return getEchartsConfig(
childrenToProps(echartsConfigChildren) as ToViewReturn<typeof echartsConfigChildren>,
- chartSize
+ chartSize,
+ theme?.theme?.components?.candleStickChart || {},
);
}, [chartSize, ...Object.values(echartsConfigChildren)]);
diff --git a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConstants.tsx b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConstants.tsx
index d43134234..a216e5a49 100644
--- a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConstants.tsx
+++ b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConstants.tsx
@@ -251,11 +251,11 @@ export const chartUiModeChildren = {
const chartJsonModeChildren = {
echartsOption: jsonControl(toObject, i18nObjs.defaultEchartsJsonOption),
- echartsTitle: withDefault(StringControl, trans("echarts.defaultTitle")),
+ echartsTitle: withDefault(StringControl, trans("echarts.defaultTitle")),
echartsLegendConfig: EchartsLegendConfig,
echartsLabelConfig: EchartsLabelConfig,
echartsConfig: EchartsOptionComp,
- style: styleControl(EchartsStyle),
+ style: styleControl(EchartsStyle, 'style'),
tooltip: withDefault(BoolControl, true),
legendVisibility: withDefault(BoolControl, true),
}
diff --git a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartUtils.ts b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartUtils.ts
index 57b908be5..8bb44e041 100644
--- a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartUtils.ts
@@ -128,7 +128,11 @@ export function getSeriesConfig(props: EchartsConfigProps) {
}
// https://echarts.apache.org/en/option.html
-export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSize): EChartsOptionWithMap {
+export function getEchartsConfig(
+ props: EchartsConfigProps,
+ chartSize?: ChartSize,
+ theme?: any,
+): EChartsOptionWithMap {
if (props.mode === "json") {
let opt={
"title": {
@@ -136,9 +140,9 @@ export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSiz
'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom',
"left":"center"
},
- "backgroundColor": props?.style?.background,
- "color": props.echartsOption.data?.map(data => data.color),
- "tooltip": props.tooltip&&{
+ "backgroundColor": props?.style?.background || theme?.style?.background,
+ "color": props.echartsOption.data?.map(data => data.color),
+ "tooltip": props.tooltip && {
"trigger": "item",
"formatter": "{a} <br/>{b} : {c}%"
},
diff --git a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx
index b6d1b912a..2b512507c 100644
--- a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx
@@ -42,7 +42,8 @@ import {
CustomModal,
jsonValueExposingStateControl,
CalendarDeleteIcon,
- Tooltip
+ Tooltip,
+ useMergeCompStyles,
} from "lowcoder-sdk";
import {
@@ -87,7 +88,7 @@ const childrenMap = {
firstDay: dropdownControl(FirstDayOptions, "1"),
dayMaxEvents: withDefault(NumberControl, 2),
eventMaxStack: withDefault(NumberControl, 0),
- style: styleControl(CalendarStyle),
+ style: styleControl(CalendarStyle, 'style'),
licenseKey: withDefault( StringControl, "" ),
currentFreeView: dropdownControl(DefaultWithFreeViewOptions, "timeGridWeek"),
currentPremiumView: dropdownControl(DefaultWithPremiumViewOptions, "resourceTimelineDay"),
@@ -114,7 +115,7 @@ let CalendarBasicComp = (function () {
licensed?: boolean;
currentFreeView?: string;
currentPremiumView?: string;
- }) => {
+ }, dispatch: any) => {
const theme = useContext(ThemeContext);
const ref = createRef<HTMLDivElement>();
@@ -123,6 +124,8 @@ let CalendarBasicComp = (function () {
const [left, setLeft] = useState<number | undefined>(undefined);
const [licensed, setLicensed] = useState<boolean>(props.licenseKey !== "");
+ useMergeCompStyles(props, dispatch);
+
useEffect(() => {
setLicensed(props.licenseKey !== "");
}, [props.licenseKey]);
@@ -130,8 +133,6 @@ let CalendarBasicComp = (function () {
let currentView = licensed ? props.currentPremiumView : props.currentFreeView;
let currentEvents = currentView == "resourceTimelineDay" || currentView == "resourceTimeGridDay" ? props.resourcesEvents : props.events;
- console.log("currentEvents", currentEvents);
-
// we use one central stack of events for all views
let events = Array.isArray(currentEvents.value) ? currentEvents.value.map((item: EventType) => {
return {
diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartComp.tsx b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartComp.tsx
index 3d1750d9c..2e02f78ce 100644
--- a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartComp.tsx
@@ -24,7 +24,8 @@ import {
ThemeContext,
chartColorPalette,
getPromiseAfterDispatch,
- dropdownControl
+ dropdownControl,
+ useMergeCompStyles,
} from "lowcoder-sdk";
import { getEchartsLocale, trans } from "i18n/comps";
import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig";
@@ -63,7 +64,6 @@ CandleStickChartTmpComp = withViewFn(CandleStickChartTmpComp, (comp) => {
color: chartColorPalette,
backgroundColor: "#fff",
};
-
let themeConfig = defaultChartTheme;
try {
themeConfig = theme?.theme.chart ? JSON.parse(theme?.theme.chart) : defaultChartTheme;
@@ -71,6 +71,8 @@ CandleStickChartTmpComp = withViewFn(CandleStickChartTmpComp, (comp) => {
log.error('theme chart error: ', error);
}
+ useMergeCompStyles(childrenToProps(comp.children), comp.dispatch);
+
const triggerClickEvent = async (dispatch: any, action: CompAction<JSONValue>) => {
await getPromiseAfterDispatch(
dispatch,
@@ -144,7 +146,8 @@ CandleStickChartTmpComp = withViewFn(CandleStickChartTmpComp, (comp) => {
const option = useMemo(() => {
return getEchartsConfig(
childrenToProps(echartsConfigChildren) as ToViewReturn<typeof echartsConfigChildren>,
- chartSize
+ chartSize,
+ theme?.theme?.components?.candleStickChart || {},
);
}, [chartSize, ...Object.values(echartsConfigChildren)]);
diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx
index 1de9ffdb3..cee782aab 100644
--- a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx
+++ b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx
@@ -253,7 +253,7 @@ const chartJsonModeChildren = {
echartsLegendConfig: EchartsLegendConfig,
echartsLabelConfig: EchartsLabelConfig,
echartsConfig: EchartsOptionComp,
- style: styleControl(EchartsStyle),
+ style: styleControl(EchartsStyle, 'style'),
tooltip: withDefault(BoolControl, true),
legendVisibility: withDefault(BoolControl, true),
}
diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts
index 00dcb0d2d..8d94c105f 100644
--- a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts
@@ -12,6 +12,7 @@ import { chartColorPalette, isNumeric, JSONObject, loadScript } from "lowcoder-s
import { calcXYConfig } from "comps/chartComp/chartConfigs/cartesianAxisConfig";
import Big from "big.js";
import { googleMapsApiUrl } from "../chartComp/chartConfigs/chartUrls";
+import { useContext } from "react";
export function transformData(
originData: JSONObject[],
@@ -128,7 +129,11 @@ export function getSeriesConfig(props: EchartsConfigProps) {
}
// https://echarts.apache.org/en/option.html
-export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSize): EChartsOptionWithMap {
+export function getEchartsConfig(
+ props: EchartsConfigProps,
+ chartSize?: ChartSize,
+ theme?: any,
+): EChartsOptionWithMap {
if (props.mode === "json") {
let opt={
"title": {
@@ -136,7 +141,7 @@ export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSiz
'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom',
"left":"center"
},
- "backgroundColor": props?.style?.background,
+ "backgroundColor": props?.style?.background || theme?.style?.background,
"color": props.echartsOption.data?.map(data => data.color),
"tooltip": props.tooltip&&{
"trigger": "axis",
diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts b/client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts
index 5b652ef94..d71dd7f56 100644
--- a/client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts
@@ -128,7 +128,11 @@ export function getSeriesConfig(props: EchartsConfigProps) {
}
// https://echarts.apache.org/en/option.html
-export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSize): EChartsOptionWithMap {
+export function getEchartsConfig(
+ props: EchartsConfigProps,
+ chartSize?: ChartSize,
+ theme?: any,
+): EChartsOptionWithMap {
if (props.mode === "json") {
return props.echartsOption ? props.echartsOption : {};
}
diff --git a/client/packages/lowcoder-comps/src/comps/chartsGeoMapComp/chartsGeoMapComp.tsx b/client/packages/lowcoder-comps/src/comps/chartsGeoMapComp/chartsGeoMapComp.tsx
index 2fa1ddf7e..88da3b89c 100644
--- a/client/packages/lowcoder-comps/src/comps/chartsGeoMapComp/chartsGeoMapComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/chartsGeoMapComp/chartsGeoMapComp.tsx
@@ -25,7 +25,8 @@ import {
ThemeContext,
chartColorPalette,
getPromiseAfterDispatch,
- dropdownControl
+ dropdownControl,
+ useMergeCompStyles,
} from "lowcoder-sdk";
import { getEchartsLocale, trans } from "i18n/comps";
import { ItemColorComp } from "comps/basicChartComp/chartConfigs/lineChartConfig";
@@ -82,6 +83,8 @@ MapTmpComp = withViewFn(MapTmpComp, (comp) => {
log.error('theme chart error: ', error);
}
+ useMergeCompStyles(childrenToProps(comp.children), comp.dispatch);
+
const triggerClickEvent = async (dispatch: any, action: CompAction<JSONValue>) => {
await getPromiseAfterDispatch(
dispatch,
@@ -119,7 +122,8 @@ MapTmpComp = withViewFn(MapTmpComp, (comp) => {
const option = useMemo(() => {
return getEchartsConfig(
childrenToProps(echartsConfigChildren) as ToViewReturn<typeof echartsConfigChildren>,
- chartSize
+ chartSize,
+ theme?.theme?.components?.candleStickChart || {},
);
}, [chartSize, ...Object.values(echartsConfigChildren)]);
diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartComp.tsx b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartComp.tsx
index f26078335..afa7ae13d 100644
--- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartComp.tsx
@@ -24,7 +24,8 @@ import {
ThemeContext,
chartColorPalette,
getPromiseAfterDispatch,
- dropdownControl
+ dropdownControl,
+ useMergeCompStyles,
} from "lowcoder-sdk";
import { getEchartsLocale, trans } from "i18n/comps";
import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig";
@@ -71,6 +72,8 @@ FunnelChartTmpComp = withViewFn(FunnelChartTmpComp, (comp) => {
log.error('theme chart error: ', error);
}
+ useMergeCompStyles(childrenToProps(comp.children), comp.dispatch);
+
const triggerClickEvent = async (dispatch: any, action: CompAction<JSONValue>) => {
await getPromiseAfterDispatch(
dispatch,
@@ -144,7 +147,8 @@ FunnelChartTmpComp = withViewFn(FunnelChartTmpComp, (comp) => {
const option = useMemo(() => {
return getEchartsConfig(
childrenToProps(echartsConfigChildren) as ToViewReturn<typeof echartsConfigChildren>,
- chartSize
+ chartSize,
+ theme?.theme?.components?.candleStickChart || {},
);
}, [chartSize, ...Object.values(echartsConfigChildren)]);
diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx
index 36e55cf52..e668de39a 100644
--- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx
+++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx
@@ -255,7 +255,7 @@ const chartJsonModeChildren = {
echartsLabelConfig: EchartsLabelConfig,
echartsConfig: EchartsOptionComp,
echartsTitleConfig:EchartsTitleConfig,
- style: styleControl(EchartsStyle),
+ style: styleControl(EchartsStyle, 'style'),
tooltip: withDefault(BoolControl, true),
label: withDefault(BoolControl, true),
legendVisibility: withDefault(BoolControl, true),
diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts
index 2f2b33505..2f2b814cc 100644
--- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts
@@ -128,7 +128,11 @@ export function getSeriesConfig(props: EchartsConfigProps) {
}
// https://echarts.apache.org/en/option.html
-export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSize): EChartsOptionWithMap {
+export function getEchartsConfig(
+ props: EchartsConfigProps,
+ chartSize?: ChartSize,
+ theme?: any,
+): EChartsOptionWithMap {
if (props.mode === "json") {
let opt={
"title": {
@@ -136,7 +140,7 @@ export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSiz
'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom',
"left":props.echartsTitleConfig.top
},
- "backgroundColor": props?.style?.background,
+ "backgroundColor": props?.style?.background || theme?.style?.background,
"color": props.echartsOption.data?.map(data => data.color),
"tooltip": props.tooltip&&{
"trigger": "item",
diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartComp.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartComp.tsx
index 3823dd888..1793dd634 100644
--- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartComp.tsx
@@ -25,7 +25,8 @@ import {
chartColorPalette,
getPromiseAfterDispatch,
dropdownControl,
- JSONObject
+ JSONObject,
+ useMergeCompStyles,
} from "lowcoder-sdk";
import { getEchartsLocale, trans } from "i18n/comps";
import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig";
@@ -72,6 +73,8 @@ GaugeChartTmpComp = withViewFn(GaugeChartTmpComp, (comp) => {
log.error('theme chart error: ', error);
}
+ useMergeCompStyles(childrenToProps(comp.children), comp.dispatch);
+
const triggerClickEvent = async (dispatch: any, action: CompAction<JSONValue>) => {
await getPromiseAfterDispatch(
dispatch,
@@ -145,7 +148,8 @@ GaugeChartTmpComp = withViewFn(GaugeChartTmpComp, (comp) => {
const option = useMemo(() => {
return getEchartsConfig(
childrenToProps(echartsConfigChildren) as ToViewReturn<typeof echartsConfigChildren>,
- chartSize
+ chartSize,
+ theme?.theme?.components?.candleStickChart || {},
);
}, [chartSize, ...Object.values(echartsConfigChildren)]);
diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx
index 5f128faec..23f14ce77 100644
--- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx
+++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx
@@ -255,7 +255,7 @@ const chartJsonModeChildren = {
echartsLabelConfig: EchartsLabelConfig,
echartsConfig: EchartsOptionComp,
echartsTitleConfig:EchartsTitleConfig,
- style: styleControl(EchartsStyle),
+ style: styleControl(EchartsStyle, 'style'),
tooltip: withDefault(BoolControl, true),
legendVisibility: withDefault(BoolControl, true),
label: withDefault(BoolControl, true),
diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts
index 4babbe7c7..eb16f1a86 100644
--- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts
@@ -128,7 +128,11 @@ export function getSeriesConfig(props: EchartsConfigProps) {
}
// https://echarts.apache.org/en/option.html
-export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSize): EChartsOptionWithMap {
+export function getEchartsConfig(
+ props: EchartsConfigProps,
+ chartSize?: ChartSize,
+ theme?: any,
+): EChartsOptionWithMap {
if (props.mode === "json") {
let opt={
"title": {
@@ -136,7 +140,7 @@ export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSiz
'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom',
"left":props.echartsTitleConfig.top
},
- "backgroundColor": props?.style?.background,
+ "backgroundColor": props?.style?.background || theme?.style?.background,
"color": props.echartsOption.data?.map(data => data.color),
"tooltip": props.tooltip&&{
"trigger": "item",
diff --git a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartComp.tsx b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartComp.tsx
index 7b395901c..5f68c050c 100644
--- a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartComp.tsx
@@ -25,7 +25,8 @@ import {
chartColorPalette,
getPromiseAfterDispatch,
dropdownControl,
- JSONObject
+ JSONObject,
+ useMergeCompStyles,
} from "lowcoder-sdk";
import { getEchartsLocale, trans } from "i18n/comps";
import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig";
@@ -72,6 +73,8 @@ GraphChartTmpComp = withViewFn(GraphChartTmpComp, (comp) => {
log.error('theme chart error: ', error);
}
+ useMergeCompStyles(childrenToProps(comp.children), comp.dispatch);
+
const triggerClickEvent = async (dispatch: any, action: CompAction<JSONValue>) => {
await getPromiseAfterDispatch(
dispatch,
@@ -145,7 +148,8 @@ GraphChartTmpComp = withViewFn(GraphChartTmpComp, (comp) => {
const option = useMemo(() => {
return getEchartsConfig(
childrenToProps(echartsConfigChildren) as ToViewReturn<typeof echartsConfigChildren>,
- chartSize
+ chartSize,
+ theme?.theme?.components?.candleStickChart || {},
);
}, [chartSize, ...Object.values(echartsConfigChildren)]);
diff --git a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartConstants.tsx
index a3c5c0095..a643affc4 100644
--- a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartConstants.tsx
+++ b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartConstants.tsx
@@ -253,7 +253,7 @@ const chartJsonModeChildren = {
echartsLegendConfig: EchartsLegendConfig,
echartsLabelConfig: EchartsLabelConfig,
echartsConfig: EchartsOptionComp,
- style: styleControl(EchartsStyle),
+ style: styleControl(EchartsStyle, 'style'),
tooltip: withDefault(BoolControl, true),
legendVisibility: withDefault(BoolControl, true),
}
diff --git a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartUtils.ts b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartUtils.ts
index df231bd0d..a75b6a8c2 100644
--- a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartUtils.ts
@@ -128,7 +128,11 @@ export function getSeriesConfig(props: EchartsConfigProps) {
}
// https://echarts.apache.org/en/option.html
-export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSize): EChartsOptionWithMap {
+export function getEchartsConfig(
+ props: EchartsConfigProps,
+ chartSize?: ChartSize,
+ theme?: any,
+): EChartsOptionWithMap {
if (props.mode === "json") {
let opt={
"title": {
@@ -136,7 +140,7 @@ export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSiz
'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom',
"left":"center"
},
- "backgroundColor": props?.style?.background,
+ "backgroundColor": props?.style?.background || theme?.style?.background,
"color": props.echartsOption.data?.map(data => data.color),
"tooltip": props.tooltip&& {
"trigger": "item"
diff --git a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartComp.tsx b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartComp.tsx
index 760b79dca..80b3da4ab 100644
--- a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartComp.tsx
@@ -24,7 +24,8 @@ import {
ThemeContext,
chartColorPalette,
getPromiseAfterDispatch,
- dropdownControl
+ dropdownControl,
+ useMergeCompStyles,
} from "lowcoder-sdk";
import { getEchartsLocale, trans } from "i18n/comps";
import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig";
@@ -71,6 +72,8 @@ HeatmapChartTmpComp = withViewFn(HeatmapChartTmpComp, (comp) => {
log.error('theme chart error: ', error);
}
+ useMergeCompStyles(childrenToProps(comp.children), comp.dispatch);
+
const triggerClickEvent = async (dispatch: any, action: CompAction<JSONValue>) => {
await getPromiseAfterDispatch(
dispatch,
@@ -144,7 +147,8 @@ HeatmapChartTmpComp = withViewFn(HeatmapChartTmpComp, (comp) => {
const option = useMemo(() => {
return getEchartsConfig(
childrenToProps(echartsConfigChildren) as ToViewReturn<typeof echartsConfigChildren>,
- chartSize
+ chartSize,
+ theme?.theme?.components?.candleStickChart || {},
);
}, [chartSize, ...Object.values(echartsConfigChildren)]);
diff --git a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartConstants.tsx
index d4a8a9a29..2ecfd3091 100644
--- a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartConstants.tsx
+++ b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartConstants.tsx
@@ -253,7 +253,7 @@ const chartJsonModeChildren = {
echartsLegendConfig: EchartsLegendConfig,
echartsLabelConfig: EchartsLabelConfig,
echartsConfig: EchartsOptionComp,
- style: styleControl(EchartsStyle),
+ style: styleControl(EchartsStyle, 'style'),
tooltip: withDefault(BoolControl, true),
legendVisibility: withDefault(BoolControl, true),
}
diff --git a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartUtils.ts b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartUtils.ts
index 6d9c0bef9..43bd48e03 100644
--- a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartUtils.ts
@@ -128,7 +128,11 @@ export function getSeriesConfig(props: EchartsConfigProps) {
}
// https://echarts.apache.org/en/option.html
-export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSize): EChartsOptionWithMap {
+export function getEchartsConfig(
+ props: EchartsConfigProps,
+ chartSize?: ChartSize,
+ theme?: any,
+): EChartsOptionWithMap {
if (props.mode === "json") {
let opt={
"title": {
@@ -136,7 +140,7 @@ export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSiz
'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom',
"left":"center"
},
- "backgroundColor": props?.style?.background,
+ "backgroundColor": props?.style?.background || theme?.style?.background,
"color": props.echartsOption.data?.map(data => data.color),
"tooltip": props.tooltip&&{
"position": "top"
diff --git a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartComp.tsx b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartComp.tsx
index b9a9af5be..950f5cad2 100644
--- a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartComp.tsx
@@ -24,7 +24,8 @@ import {
ThemeContext,
chartColorPalette,
getPromiseAfterDispatch,
- dropdownControl
+ dropdownControl,
+ useMergeCompStyles,
} from "lowcoder-sdk";
import { getEchartsLocale, trans } from "i18n/comps";
import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig";
@@ -71,6 +72,8 @@ RadarChartTmpComp = withViewFn(RadarChartTmpComp, (comp) => {
log.error('theme chart error: ', error);
}
+ useMergeCompStyles(childrenToProps(comp.children), comp.dispatch);
+
const triggerClickEvent = async (dispatch: any, action: CompAction<JSONValue>) => {
await getPromiseAfterDispatch(
dispatch,
@@ -144,7 +147,8 @@ RadarChartTmpComp = withViewFn(RadarChartTmpComp, (comp) => {
const option = useMemo(() => {
return getEchartsConfig(
childrenToProps(echartsConfigChildren) as ToViewReturn<typeof echartsConfigChildren>,
- chartSize
+ chartSize,
+ theme?.theme?.components?.candleStickChart || {},
);
}, [chartSize, ...Object.values(echartsConfigChildren)]);
diff --git a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartConstants.tsx
index a96f7a36d..be9ed1ec1 100644
--- a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartConstants.tsx
+++ b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartConstants.tsx
@@ -253,7 +253,7 @@ const chartJsonModeChildren = {
echartsLegendConfig: EchartsLegendConfig,
echartsLabelConfig: EchartsLabelConfig,
echartsConfig: EchartsOptionComp,
- style: styleControl(EchartsStyle),
+ style: styleControl(EchartsStyle, 'style'),
tooltip: withDefault(BoolControl, true),
legendVisibility: withDefault(BoolControl, true),
}
diff --git a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartUtils.ts b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartUtils.ts
index 3ce2d0f7b..904910a35 100644
--- a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartUtils.ts
@@ -128,7 +128,11 @@ export function getSeriesConfig(props: EchartsConfigProps) {
}
// https://echarts.apache.org/en/option.html
-export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSize): EChartsOptionWithMap {
+export function getEchartsConfig(
+ props: EchartsConfigProps,
+ chartSize?: ChartSize,
+ theme?: any,
+): EChartsOptionWithMap {
if (props.mode === "json") {
let opt={
"title": {
@@ -136,7 +140,7 @@ export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSiz
'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom',
"left":"center"
},
- "backgroundColor": props?.style?.background,
+ "backgroundColor": props?.style?.background || theme?.style?.background,
"color": props.echartsOption.data?.map(data => data.color),
"tooltip": {
"trigger": "axis",
diff --git a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartComp.tsx b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartComp.tsx
index 680f47771..45b751926 100644
--- a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartComp.tsx
@@ -24,7 +24,8 @@ import {
ThemeContext,
chartColorPalette,
getPromiseAfterDispatch,
- dropdownControl
+ dropdownControl,
+ useMergeCompStyles,
} from "lowcoder-sdk";
import { getEchartsLocale, trans } from "i18n/comps";
import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig";
@@ -71,6 +72,8 @@ SankeyChartTmpComp = withViewFn(SankeyChartTmpComp, (comp) => {
log.error('theme chart error: ', error);
}
+ useMergeCompStyles(childrenToProps(comp.children), comp.dispatch);
+
const triggerClickEvent = async (dispatch: any, action: CompAction<JSONValue>) => {
await getPromiseAfterDispatch(
dispatch,
@@ -144,7 +147,8 @@ SankeyChartTmpComp = withViewFn(SankeyChartTmpComp, (comp) => {
const option = useMemo(() => {
return getEchartsConfig(
childrenToProps(echartsConfigChildren) as ToViewReturn<typeof echartsConfigChildren>,
- chartSize
+ chartSize,
+ theme?.theme?.components?.candleStickChart || {},
);
}, [chartSize, ...Object.values(echartsConfigChildren)]);
diff --git a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartConstants.tsx
index bc106cebe..7d834e9d7 100644
--- a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartConstants.tsx
+++ b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartConstants.tsx
@@ -253,7 +253,7 @@ const chartJsonModeChildren = {
echartsLegendConfig: EchartsLegendConfig,
echartsLabelConfig: EchartsLabelConfig,
echartsConfig: EchartsOptionComp,
- style: styleControl(EchartsStyle),
+ style: styleControl(EchartsStyle, 'style'),
tooltip: withDefault(BoolControl, true),
legendVisibility: withDefault(BoolControl, true),
}
diff --git a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartUtils.ts b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartUtils.ts
index 819fa4e67..16b3679a1 100644
--- a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartUtils.ts
@@ -128,7 +128,11 @@ export function getSeriesConfig(props: EchartsConfigProps) {
}
// https://echarts.apache.org/en/option.html
-export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSize): EChartsOptionWithMap {
+export function getEchartsConfig(
+ props: EchartsConfigProps,
+ chartSize?: ChartSize,
+ theme?: any,
+): EChartsOptionWithMap {
if (props.mode === "json") {
let opt={
"title": {
@@ -136,7 +140,7 @@ export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSiz
'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom',
"left":"center"
},
- "backgroundColor": props?.style?.background,
+ "backgroundColor": props?.style?.background || theme?.style?.background,
"color": props.echartsOption.data?.map(data => data.color),
"tooltip": props.tooltip&&{
"trigger": "item",
diff --git a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartComp.tsx b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartComp.tsx
index a136b12b6..6cfa5a90c 100644
--- a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartComp.tsx
@@ -24,7 +24,8 @@ import {
ThemeContext,
chartColorPalette,
getPromiseAfterDispatch,
- dropdownControl
+ dropdownControl,
+ useMergeCompStyles,
} from "lowcoder-sdk";
import { getEchartsLocale, trans } from "i18n/comps";
import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig";
@@ -71,6 +72,8 @@ SunburstChartTmpComp = withViewFn(SunburstChartTmpComp, (comp) => {
log.error('theme chart error: ', error);
}
+ useMergeCompStyles(childrenToProps(comp.children), comp.dispatch);
+
const triggerClickEvent = async (dispatch: any, action: CompAction<JSONValue>) => {
await getPromiseAfterDispatch(
dispatch,
@@ -144,7 +147,8 @@ SunburstChartTmpComp = withViewFn(SunburstChartTmpComp, (comp) => {
const option = useMemo(() => {
return getEchartsConfig(
childrenToProps(echartsConfigChildren) as ToViewReturn<typeof echartsConfigChildren>,
- chartSize
+ chartSize,
+ theme?.theme?.components?.candleStickChart || {},
);
}, [chartSize, ...Object.values(echartsConfigChildren)]);
diff --git a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartConstants.tsx
index c4e7aa539..51aa6ae0e 100644
--- a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartConstants.tsx
+++ b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartConstants.tsx
@@ -253,7 +253,7 @@ const chartJsonModeChildren = {
echartsLegendConfig: EchartsLegendConfig,
echartsLabelConfig: EchartsLabelConfig,
echartsConfig: EchartsOptionComp,
- style: styleControl(EchartsStyle),
+ style: styleControl(EchartsStyle, 'style'),
tooltip: withDefault(BoolControl, true),
legendVisibility: withDefault(BoolControl, true),
}
diff --git a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartUtils.ts b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartUtils.ts
index 85bbb9676..dda543eaa 100644
--- a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartUtils.ts
@@ -128,7 +128,11 @@ export function getSeriesConfig(props: EchartsConfigProps) {
}
// https://echarts.apache.org/en/option.html
-export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSize): EChartsOptionWithMap {
+export function getEchartsConfig(
+ props: EchartsConfigProps,
+ chartSize?: ChartSize,
+ theme?: any,
+): EChartsOptionWithMap {
if (props.mode === "json") {
let opt={
"title": {
@@ -136,7 +140,7 @@ export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSiz
'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom',
"left":"center"
},
- "backgroundColor": props?.style?.background,
+ "backgroundColor": props?.style?.background || theme?.style?.background,
"color": props.echartsOption.data?.map(data => data.color),
"tooltip": props.tooltip&&{
"trigger": "item",
diff --git a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartComp.tsx b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartComp.tsx
index 225c65cc6..143286741 100644
--- a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartComp.tsx
@@ -24,7 +24,8 @@ import {
ThemeContext,
chartColorPalette,
getPromiseAfterDispatch,
- dropdownControl
+ dropdownControl,
+ useMergeCompStyles,
} from "lowcoder-sdk";
import { getEchartsLocale, trans } from "i18n/comps";
import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig";
@@ -71,6 +72,8 @@ ThemeriverChartTmpComp = withViewFn(ThemeriverChartTmpComp, (comp) => {
log.error('theme chart error: ', error);
}
+ useMergeCompStyles(childrenToProps(comp.children), comp.dispatch);
+
const triggerClickEvent = async (dispatch: any, action: CompAction<JSONValue>) => {
await getPromiseAfterDispatch(
dispatch,
@@ -144,7 +147,8 @@ ThemeriverChartTmpComp = withViewFn(ThemeriverChartTmpComp, (comp) => {
const option = useMemo(() => {
return getEchartsConfig(
childrenToProps(echartsConfigChildren) as ToViewReturn<typeof echartsConfigChildren>,
- chartSize
+ chartSize,
+ theme?.theme?.components?.candleStickChart || {},
);
}, [chartSize, ...Object.values(echartsConfigChildren)]);
diff --git a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartConstants.tsx
index 589634148..e2f973ea2 100644
--- a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartConstants.tsx
+++ b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartConstants.tsx
@@ -253,7 +253,7 @@ const chartJsonModeChildren = {
echartsLegendConfig: EchartsLegendConfig,
echartsLabelConfig: EchartsLabelConfig,
echartsConfig: EchartsOptionComp,
- style: styleControl(EchartsStyle),
+ style: styleControl(EchartsStyle, 'style'),
tooltip: withDefault(BoolControl, true),
legendVisibility: withDefault(BoolControl, true),
}
diff --git a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartUtils.ts b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartUtils.ts
index 5d9195e3c..8eb9f8629 100644
--- a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartUtils.ts
@@ -128,7 +128,11 @@ export function getSeriesConfig(props: EchartsConfigProps) {
}
// https://echarts.apache.org/en/option.html
-export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSize): EChartsOptionWithMap {
+export function getEchartsConfig(
+ props: EchartsConfigProps,
+ chartSize?: ChartSize,
+ theme?: any,
+): EChartsOptionWithMap {
if (props.mode === "json") {
let opt={
"title": {
@@ -136,7 +140,7 @@ export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSiz
'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom',
"left":"center"
},
- "backgroundColor": props.style.background,
+ "backgroundColor": props?.style?.background || theme?.style?.background,
"tooltip": props.tooltip&&{
"trigger": "axis",
"axisPointer": {
diff --git a/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartConstants.tsx
index 573cc03db..8dfe7f49c 100644
--- a/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartConstants.tsx
+++ b/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartConstants.tsx
@@ -253,7 +253,7 @@ const chartJsonModeChildren = {
echartsLegendConfig: EchartsLegendConfig,
echartsLabelConfig: EchartsLabelConfig,
echartsConfig: EchartsOptionComp,
- style: styleControl(EchartsStyle),
+ style: styleControl(EchartsStyle, 'style'),
tooltip: withDefault(BoolControl, true),
legendVisibility: withDefault(BoolControl, true),
}
diff --git a/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartUtils.ts b/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartUtils.ts
index c7719fdb7..35490fcb1 100644
--- a/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartUtils.ts
@@ -128,7 +128,11 @@ export function getSeriesConfig(props: EchartsConfigProps) {
}
// https://echarts.apache.org/en/option.html
-export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSize): EChartsOptionWithMap {
+export function getEchartsConfig(
+ props: EchartsConfigProps,
+ chartSize?: ChartSize,
+ theme?: any,
+): EChartsOptionWithMap {
if (props.mode === "json") {
let opt={
"title": {
@@ -136,7 +140,7 @@ export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSiz
'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom',
"left":"center"
},
- "backgroundColor": props?.style?.background,
+ "backgroundColor": props?.style?.background || theme?.style?.background,
"color": props.echartsOption.data?.map(data => data.color),
"tooltip": props.tooltip&&{
"trigger": "item",
diff --git a/client/packages/lowcoder-comps/src/comps/treeChartComp/treechartComp.tsx b/client/packages/lowcoder-comps/src/comps/treeChartComp/treechartComp.tsx
index 91bb602e8..193e055ee 100644
--- a/client/packages/lowcoder-comps/src/comps/treeChartComp/treechartComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/treeChartComp/treechartComp.tsx
@@ -24,7 +24,8 @@ import {
ThemeContext,
chartColorPalette,
getPromiseAfterDispatch,
- dropdownControl
+ dropdownControl,
+ useMergeCompStyles,
} from "lowcoder-sdk";
import { getEchartsLocale, trans } from "i18n/comps";
import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig";
@@ -71,6 +72,8 @@ TreeChartTmpComp = withViewFn(TreeChartTmpComp, (comp) => {
log.error('theme chart error: ', error);
}
+ useMergeCompStyles(childrenToProps(comp.children), comp.dispatch);
+
const triggerClickEvent = async (dispatch: any, action: CompAction<JSONValue>) => {
await getPromiseAfterDispatch(
dispatch,
@@ -144,7 +147,8 @@ TreeChartTmpComp = withViewFn(TreeChartTmpComp, (comp) => {
const option = useMemo(() => {
return getEchartsConfig(
childrenToProps(echartsConfigChildren) as ToViewReturn<typeof echartsConfigChildren>,
- chartSize
+ chartSize,
+ theme?.theme?.components?.candleStickChart || {},
);
}, [chartSize, ...Object.values(echartsConfigChildren)]);
diff --git a/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartComp.tsx b/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartComp.tsx
index fa0d6f078..460a538f8 100644
--- a/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartComp.tsx
+++ b/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartComp.tsx
@@ -24,7 +24,8 @@ import {
ThemeContext,
chartColorPalette,
getPromiseAfterDispatch,
- dropdownControl
+ dropdownControl,
+ useMergeCompStyles,
} from "lowcoder-sdk";
import { getEchartsLocale, trans } from "i18n/comps";
import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig";
@@ -71,6 +72,8 @@ TreemapChartTmpComp = withViewFn(TreemapChartTmpComp, (comp) => {
log.error('theme chart error: ', error);
}
+ useMergeCompStyles(childrenToProps(comp.children), comp.dispatch);
+
const triggerClickEvent = async (dispatch: any, action: CompAction<JSONValue>) => {
await getPromiseAfterDispatch(
dispatch,
@@ -144,7 +147,8 @@ TreemapChartTmpComp = withViewFn(TreemapChartTmpComp, (comp) => {
const option = useMemo(() => {
return getEchartsConfig(
childrenToProps(echartsConfigChildren) as ToViewReturn<typeof echartsConfigChildren>,
- chartSize
+ chartSize,
+ theme?.theme?.components?.candleStickChart || {},
);
}, [chartSize, ...Object.values(echartsConfigChildren)]);
diff --git a/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartConstants.tsx
index a5c302b2b..45ff3ad5d 100644
--- a/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartConstants.tsx
+++ b/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartConstants.tsx
@@ -253,7 +253,7 @@ const chartJsonModeChildren = {
echartsLegendConfig: EchartsLegendConfig,
echartsLabelConfig: EchartsLabelConfig,
echartsConfig: EchartsOptionComp,
- style: styleControl(EchartsStyle),
+ style: styleControl(EchartsStyle, 'style'),
tooltip: withDefault(BoolControl, true),
legendVisibility: withDefault(BoolControl, true),
}
diff --git a/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartUtils.ts b/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartUtils.ts
index 81f033597..a323e2803 100644
--- a/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartUtils.ts
+++ b/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartUtils.ts
@@ -128,7 +128,11 @@ export function getSeriesConfig(props: EchartsConfigProps) {
}
// https://echarts.apache.org/en/option.html
-export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSize): EChartsOptionWithMap {
+export function getEchartsConfig(
+ props: EchartsConfigProps,
+ chartSize?: ChartSize,
+ theme?: any,
+): EChartsOptionWithMap {
if (props.mode === "json") {
let opt={
"title": {
@@ -136,7 +140,7 @@ export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSiz
'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom',
"left":"center"
},
- "backgroundColor": props?.style?.background,
+ "backgroundColor": props?.style?.background || theme?.style?.background,
"color": [],
"tooltip": props.tooltip&&{
"trigger": "item",
diff --git a/client/packages/lowcoder-core/lib/index.cjs b/client/packages/lowcoder-core/lib/index.cjs
index 610615a10..d25c8d830 100644
--- a/client/packages/lowcoder-core/lib/index.cjs
+++ b/client/packages/lowcoder-core/lib/index.cjs
@@ -1,5 +1,3 @@
-// this is used in Node.js ??
-
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
@@ -11,118 +9,118 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol */
-
-var extendStatics = function(d, b) {
- extendStatics = Object.setPrototypeOf ||
- ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
- function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
- return extendStatics(d, b);
-};
-
-function __extends(d, b) {
- if (typeof b !== "function" && b !== null)
- throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
- extendStatics(d, b);
- function __() { this.constructor = d; }
- d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-}
-
-var __assign = function() {
- __assign = Object.assign || function __assign(t) {
- for (var s, i = 1, n = arguments.length; i < n; i++) {
- s = arguments[i];
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
- }
- return t;
- };
- return __assign.apply(this, arguments);
-};
-
-function __rest(s, e) {
- var t = {};
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
- t[p] = s[p];
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
- t[p[i]] = s[p[i]];
- }
- return t;
-}
-
-function __decorate(decorators, target, key, desc) {
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
- else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
- return c > 3 && r && Object.defineProperty(target, key, r), r;
-}
-
-function __awaiter(thisArg, _arguments, P, generator) {
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
- return new (P || (P = Promise))(function (resolve, reject) {
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
- step((generator = generator.apply(thisArg, _arguments || [])).next());
- });
-}
-
-function __generator(thisArg, body) {
- var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
- return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
- function verb(n) { return function (v) { return step([n, v]); }; }
- function step(op) {
- if (f) throw new TypeError("Generator is already executing.");
- while (g && (g = 0, op[0] && (_ = 0)), _) try {
- if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
- if (y = 0, t) op = [op[0] & 2, t.value];
- switch (op[0]) {
- case 0: case 1: t = op; break;
- case 4: _.label++; return { value: op[1], done: false };
- case 5: _.label++; y = op[1]; op = [0]; continue;
- case 7: op = _.ops.pop(); _.trys.pop(); continue;
- default:
- if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
- if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
- if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
- if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
- if (t[2]) _.ops.pop();
- _.trys.pop(); continue;
- }
- op = body.call(thisArg, _);
- } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
- if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
- }
-}
-
-function __spreadArray(to, from, pack) {
- if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
- if (ar || !(i in from)) {
- if (!ar) ar = Array.prototype.slice.call(from, 0, i);
- ar[i] = from[i];
- }
- }
- return to.concat(ar || Array.prototype.slice.call(from));
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
- var e = new Error(message);
- return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
+var extendStatics = function(d, b) {
+ extendStatics = Object.setPrototypeOf ||
+ ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+ function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+ return extendStatics(d, b);
+};
+
+function __extends(d, b) {
+ if (typeof b !== "function" && b !== null)
+ throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+ extendStatics(d, b);
+ function __() { this.constructor = d; }
+ d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+}
+
+var __assign = function() {
+ __assign = Object.assign || function __assign(t) {
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
+ s = arguments[i];
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+ }
+ return t;
+ };
+ return __assign.apply(this, arguments);
+};
+
+function __rest(s, e) {
+ var t = {};
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+ t[p] = s[p];
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+ t[p[i]] = s[p[i]];
+ }
+ return t;
+}
+
+function __decorate(decorators, target, key, desc) {
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+ return new (P || (P = Promise))(function (resolve, reject) {
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
+ });
+}
+
+function __generator(thisArg, body) {
+ var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+ return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+ function verb(n) { return function (v) { return step([n, v]); }; }
+ function step(op) {
+ if (f) throw new TypeError("Generator is already executing.");
+ while (g && (g = 0, op[0] && (_ = 0)), _) try {
+ if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+ if (y = 0, t) op = [op[0] & 2, t.value];
+ switch (op[0]) {
+ case 0: case 1: t = op; break;
+ case 4: _.label++; return { value: op[1], done: false };
+ case 5: _.label++; y = op[1]; op = [0]; continue;
+ case 7: op = _.ops.pop(); _.trys.pop(); continue;
+ default:
+ if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+ if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+ if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+ if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+ if (t[2]) _.ops.pop();
+ _.trys.pop(); continue;
+ }
+ op = body.call(thisArg, _);
+ } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+ if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+ }
+}
+
+function __spreadArray(to, from, pack) {
+ if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+ if (ar || !(i in from)) {
+ if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+ ar[i] = from[i];
+ }
+ }
+ return to.concat(ar || Array.prototype.slice.call(from));
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+ var e = new Error(message);
+ return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
};
function isEqualArgs(args, cacheArgs, equals) {
@@ -801,6 +799,9 @@ var loglevel = {
"error"
];
+ var _loggersByName = {};
+ var defaultLogger = null;
+
// Cross-browser bind equivalent that works at least back to IE6
function bindMethod(obj, methodName) {
var method = obj[methodName];
@@ -853,25 +854,33 @@ var loglevel = {
// These private functions always need `this` to be set properly
- function replaceLoggingMethods(level, loggerName) {
+ function replaceLoggingMethods() {
/*jshint validthis:true */
+ var level = this.getLevel();
+
+ // Replace the actual methods.
for (var i = 0; i < logMethods.length; i++) {
var methodName = logMethods[i];
this[methodName] = (i < level) ?
noop :
- this.methodFactory(methodName, level, loggerName);
+ this.methodFactory(methodName, level, this.name);
}
// Define log.log as an alias for log.debug
this.log = this.debug;
+
+ // Return any important warnings.
+ if (typeof console === undefinedType && level < this.levels.SILENT) {
+ return "No console available for logging";
+ }
}
// In old IE versions, the console isn't present until you first open it.
// We build realMethod() replacements here that regenerate logging methods
- function enableLoggingWhenConsoleArrives(methodName, level, loggerName) {
+ function enableLoggingWhenConsoleArrives(methodName) {
return function () {
if (typeof console !== undefinedType) {
- replaceLoggingMethods.call(this, level, loggerName);
+ replaceLoggingMethods.call(this);
this[methodName].apply(this, arguments);
}
};
@@ -879,16 +888,36 @@ var loglevel = {
// By default, we use closely bound real methods wherever possible, and
// otherwise we wait for a console to appear, and then try again.
- function defaultMethodFactory(methodName, level, loggerName) {
+ function defaultMethodFactory(methodName, _level, _loggerName) {
/*jshint validthis:true */
return realMethod(methodName) ||
enableLoggingWhenConsoleArrives.apply(this, arguments);
}
- function Logger(name, defaultLevel, factory) {
+ function Logger(name, factory) {
+ // Private instance variables.
var self = this;
- var currentLevel;
- defaultLevel = defaultLevel == null ? "WARN" : defaultLevel;
+ /**
+ * The level inherited from a parent logger (or a global default). We
+ * cache this here rather than delegating to the parent so that it stays
+ * in sync with the actual logging methods that we have installed (the
+ * parent could change levels but we might not have rebuilt the loggers
+ * in this child yet).
+ * @type {number}
+ */
+ var inheritedLevel;
+ /**
+ * The default level for this logger, if any. If set, this overrides
+ * `inheritedLevel`.
+ * @type {number|null}
+ */
+ var defaultLevel;
+ /**
+ * A user-specific level for this logger. If set, this overrides
+ * `defaultLevel`.
+ * @type {number|null}
+ */
+ var userLevel;
var storageKey = "loglevel";
if (typeof name === "string") {
@@ -928,10 +957,12 @@ var loglevel = {
if (typeof storedLevel === undefinedType) {
try {
var cookie = window.document.cookie;
- var location = cookie.indexOf(
- encodeURIComponent(storageKey) + "=");
+ var cookieName = encodeURIComponent(storageKey);
+ var location = cookie.indexOf(cookieName + "=");
if (location !== -1) {
- storedLevel = /^([^;]+)/.exec(cookie.slice(location))[1];
+ storedLevel = /^([^;]+)/.exec(
+ cookie.slice(location + cookieName.length + 1)
+ )[1];
}
} catch (ignore) {}
}
@@ -950,7 +981,6 @@ var loglevel = {
// Use localStorage if available
try {
window.localStorage.removeItem(storageKey);
- return;
} catch (ignore) {}
// Use session cookie as fallback
@@ -960,6 +990,18 @@ var loglevel = {
} catch (ignore) {}
}
+ function normalizeLevel(input) {
+ var level = input;
+ if (typeof level === "string" && self.levels[level.toUpperCase()] !== undefined) {
+ level = self.levels[level.toUpperCase()];
+ }
+ if (typeof level === "number" && level >= 0 && level <= self.levels.SILENT) {
+ return level;
+ } else {
+ throw new TypeError("log.setLevel() called with invalid level: " + input);
+ }
+ }
+
/*
*
* Public logger API - see https://github.com/pimterry/loglevel for details
@@ -974,37 +1016,36 @@ var loglevel = {
self.methodFactory = factory || defaultMethodFactory;
self.getLevel = function () {
- return currentLevel;
+ if (userLevel != null) {
+ return userLevel;
+ } else if (defaultLevel != null) {
+ return defaultLevel;
+ } else {
+ return inheritedLevel;
+ }
};
self.setLevel = function (level, persist) {
- if (typeof level === "string" && self.levels[level.toUpperCase()] !== undefined) {
- level = self.levels[level.toUpperCase()];
- }
- if (typeof level === "number" && level >= 0 && level <= self.levels.SILENT) {
- currentLevel = level;
- if (persist !== false) { // defaults to true
- persistLevelIfPossible(level);
- }
- replaceLoggingMethods.call(self, level, name);
- if (typeof console === undefinedType && level < self.levels.SILENT) {
- return "No console available for logging";
- }
- } else {
- throw "log.setLevel() called with invalid level: " + level;
+ userLevel = normalizeLevel(level);
+ if (persist !== false) { // defaults to true
+ persistLevelIfPossible(userLevel);
}
+
+ // NOTE: in v2, this should call rebuild(), which updates children.
+ return replaceLoggingMethods.call(self);
};
self.setDefaultLevel = function (level) {
- defaultLevel = level;
+ defaultLevel = normalizeLevel(level);
if (!getPersistedLevel()) {
self.setLevel(level, false);
}
};
self.resetLevel = function () {
- self.setLevel(defaultLevel, false);
+ userLevel = null;
clearPersistedLevel();
+ replaceLoggingMethods.call(self);
};
self.enableAll = function(persist) {
@@ -1015,12 +1056,28 @@ var loglevel = {
self.setLevel(self.levels.SILENT, persist);
};
- // Initialize with the right level
+ self.rebuild = function () {
+ if (defaultLogger !== self) {
+ inheritedLevel = normalizeLevel(defaultLogger.getLevel());
+ }
+ replaceLoggingMethods.call(self);
+
+ if (defaultLogger === self) {
+ for (var childName in _loggersByName) {
+ _loggersByName[childName].rebuild();
+ }
+ }
+ };
+
+ // Initialize all the internal levels.
+ inheritedLevel = normalizeLevel(
+ defaultLogger ? defaultLogger.getLevel() : "WARN"
+ );
var initialLevel = getPersistedLevel();
- if (initialLevel == null) {
- initialLevel = defaultLevel;
+ if (initialLevel != null) {
+ userLevel = normalizeLevel(initialLevel);
}
- self.setLevel(initialLevel, false);
+ replaceLoggingMethods.call(self);
}
/*
@@ -1029,18 +1086,19 @@ var loglevel = {
*
*/
- var defaultLogger = new Logger();
+ defaultLogger = new Logger();
- var _loggersByName = {};
defaultLogger.getLogger = function getLogger(name) {
if ((typeof name !== "symbol" && typeof name !== "string") || name === "") {
- throw new TypeError("You must supply a name when creating a logger.");
+ throw new TypeError("You must supply a name when creating a logger.");
}
var logger = _loggersByName[name];
if (!logger) {
- logger = _loggersByName[name] = new Logger(
- name, defaultLogger.getLevel(), defaultLogger.methodFactory);
+ logger = _loggersByName[name] = new Logger(
+ name,
+ defaultLogger.methodFactory
+ );
}
return logger;
};
@@ -3269,15 +3327,16 @@ function transformWrapper(transformFn, defaultValue) {
function styleNamespace(id) {
return "style-for-".concat(id);
}
-function evalStyle(id, css) {
+function evalStyle(id, css, globalStyle) {
var _a;
var styleId = styleNamespace(id);
+ var prefixId = globalStyle ? id : "#".concat(id);
var compiledCSS = "";
css.forEach(function (i) {
if (!i.trim()) {
return;
}
- compiledCSS += stylis.serialize(stylis.compile("#".concat(id, "{").concat(i, "}")), stylis.middleware([stylis.prefixer, stylis.stringify]));
+ compiledCSS += stylis.serialize(stylis.compile("".concat(prefixId, "{").concat(i, "}")), stylis.middleware([stylis.prefixer, stylis.stringify]));
});
var styleNode = document.querySelector("#".concat(styleId));
if (!styleNode) {
@@ -3847,104 +3906,6 @@ var jsxRuntime = {
var reactJsxRuntime_production_min = {};
-/*
-object-assign
-(c) Sindre Sorhus
-@license MIT
-*/
-
-var objectAssign;
-var hasRequiredObjectAssign;
-
-function requireObjectAssign () {
- if (hasRequiredObjectAssign) return objectAssign;
- hasRequiredObjectAssign = 1;
- /* eslint-disable no-unused-vars */
- var getOwnPropertySymbols = Object.getOwnPropertySymbols;
- var hasOwnProperty = Object.prototype.hasOwnProperty;
- var propIsEnumerable = Object.prototype.propertyIsEnumerable;
-
- function toObject(val) {
- if (val === null || val === undefined) {
- throw new TypeError('Object.assign cannot be called with null or undefined');
- }
-
- return Object(val);
- }
-
- function shouldUseNative() {
- try {
- if (!Object.assign) {
- return false;
- }
-
- // Detect buggy property enumeration order in older V8 versions.
-
- // https://bugs.chromium.org/p/v8/issues/detail?id=4118
- var test1 = new String('abc'); // eslint-disable-line no-new-wrappers
- test1[5] = 'de';
- if (Object.getOwnPropertyNames(test1)[0] === '5') {
- return false;
- }
-
- // https://bugs.chromium.org/p/v8/issues/detail?id=3056
- var test2 = {};
- for (var i = 0; i < 10; i++) {
- test2['_' + String.fromCharCode(i)] = i;
- }
- var order2 = Object.getOwnPropertyNames(test2).map(function (n) {
- return test2[n];
- });
- if (order2.join('') !== '0123456789') {
- return false;
- }
-
- // https://bugs.chromium.org/p/v8/issues/detail?id=3056
- var test3 = {};
- 'abcdefghijklmnopqrst'.split('').forEach(function (letter) {
- test3[letter] = letter;
- });
- if (Object.keys(Object.assign({}, test3)).join('') !==
- 'abcdefghijklmnopqrst') {
- return false;
- }
-
- return true;
- } catch (err) {
- // We don't expect any of the above to throw, but better to be safe.
- return false;
- }
- }
-
- objectAssign = shouldUseNative() ? Object.assign : function (target, source) {
- var from;
- var to = toObject(target);
- var symbols;
-
- for (var s = 1; s < arguments.length; s++) {
- from = Object(arguments[s]);
-
- for (var key in from) {
- if (hasOwnProperty.call(from, key)) {
- to[key] = from[key];
- }
- }
-
- if (getOwnPropertySymbols) {
- symbols = getOwnPropertySymbols(from);
- for (var i = 0; i < symbols.length; i++) {
- if (propIsEnumerable.call(from, symbols[i])) {
- to[symbols[i]] = from[symbols[i]];
- }
- }
- }
- }
-
- return to;
- };
- return objectAssign;
-}
-
var reactExports = {};
var react = {
get exports(){ return reactExports; },
@@ -3953,7 +3914,8 @@ var react = {
var react_production_min = {};
-/** @license React v17.0.2
+/**
+ * @license React
* react.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
@@ -3967,27 +3929,34 @@ var hasRequiredReact_production_min;
function requireReact_production_min () {
if (hasRequiredReact_production_min) return react_production_min;
hasRequiredReact_production_min = 1;
-var l=requireObjectAssign(),n=60103,p=60106;react_production_min.Fragment=60107;react_production_min.StrictMode=60108;react_production_min.Profiler=60114;var q=60109,r=60110,t=60112;react_production_min.Suspense=60113;var u=60115,v=60116;
- if("function"===typeof Symbol&&Symbol.for){var w=Symbol.for;n=w("react.element");p=w("react.portal");react_production_min.Fragment=w("react.fragment");react_production_min.StrictMode=w("react.strict_mode");react_production_min.Profiler=w("react.profiler");q=w("react.provider");r=w("react.context");t=w("react.forward_ref");react_production_min.Suspense=w("react.suspense");u=w("react.memo");v=w("react.lazy");}var x="function"===typeof Symbol&&Symbol.iterator;
- function y(a){if(null===a||"object"!==typeof a)return null;a=x&&a[x]||a["@@iterator"];return "function"===typeof a?a:null}function z(a){for(var b="https://reactjs.org/docs/error-decoder.html?invariant="+a,c=1;c<arguments.length;c++)b+="&args[]="+encodeURIComponent(arguments[c]);return "Minified React error #"+a+"; visit "+b+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings."}
- var A={isMounted:function(){return !1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},B={};function C(a,b,c){this.props=a;this.context=b;this.refs=B;this.updater=c||A;}C.prototype.isReactComponent={};C.prototype.setState=function(a,b){if("object"!==typeof a&&"function"!==typeof a&&null!=a)throw Error(z(85));this.updater.enqueueSetState(this,a,b,"setState");};C.prototype.forceUpdate=function(a){this.updater.enqueueForceUpdate(this,a,"forceUpdate");};
- function D(){}D.prototype=C.prototype;function E(a,b,c){this.props=a;this.context=b;this.refs=B;this.updater=c||A;}var F=E.prototype=new D;F.constructor=E;l(F,C.prototype);F.isPureReactComponent=!0;var G={current:null},H=Object.prototype.hasOwnProperty,I={key:!0,ref:!0,__self:!0,__source:!0};
- function J(a,b,c){var e,d={},k=null,h=null;if(null!=b)for(e in void 0!==b.ref&&(h=b.ref),void 0!==b.key&&(k=""+b.key),b)H.call(b,e)&&!I.hasOwnProperty(e)&&(d[e]=b[e]);var g=arguments.length-2;if(1===g)d.children=c;else if(1<g){for(var f=Array(g),m=0;m<g;m++)f[m]=arguments[m+2];d.children=f;}if(a&&a.defaultProps)for(e in g=a.defaultProps,g)void 0===d[e]&&(d[e]=g[e]);return {$$typeof:n,type:a,key:k,ref:h,props:d,_owner:G.current}}
- function K(a,b){return {$$typeof:n,type:a.type,key:b,ref:a.ref,props:a.props,_owner:a._owner}}function L(a){return "object"===typeof a&&null!==a&&a.$$typeof===n}function escape(a){var b={"=":"=0",":":"=2"};return "$"+a.replace(/[=:]/g,function(a){return b[a]})}var M=/\/+/g;function N(a,b){return "object"===typeof a&&null!==a&&null!=a.key?escape(""+a.key):b.toString(36)}
- function O(a,b,c,e,d){var k=typeof a;if("undefined"===k||"boolean"===k)a=null;var h=!1;if(null===a)h=!0;else switch(k){case "string":case "number":h=!0;break;case "object":switch(a.$$typeof){case n:case p:h=!0;}}if(h)return h=a,d=d(h),a=""===e?"."+N(h,0):e,Array.isArray(d)?(c="",null!=a&&(c=a.replace(M,"$&/")+"/"),O(d,b,c,"",function(a){return a})):null!=d&&(L(d)&&(d=K(d,c+(!d.key||h&&h.key===d.key?"":(""+d.key).replace(M,"$&/")+"/")+a)),b.push(d)),1;h=0;e=""===e?".":e+":";if(Array.isArray(a))for(var g=
- 0;g<a.length;g++){k=a[g];var f=e+N(k,g);h+=O(k,b,c,f,d);}else if(f=y(a),"function"===typeof f)for(a=f.call(a),g=0;!(k=a.next()).done;)k=k.value,f=e+N(k,g++),h+=O(k,b,c,f,d);else if("object"===k)throw b=""+a,Error(z(31,"[object Object]"===b?"object with keys {"+Object.keys(a).join(", ")+"}":b));return h}function P(a,b,c){if(null==a)return a;var e=[],d=0;O(a,e,"","",function(a){return b.call(c,a,d++)});return e}
- function Q(a){if(-1===a._status){var b=a._result;b=b();a._status=0;a._result=b;b.then(function(b){0===a._status&&(b=b.default,a._status=1,a._result=b);},function(b){0===a._status&&(a._status=2,a._result=b);});}if(1===a._status)return a._result;throw a._result;}var R={current:null};function S(){var a=R.current;if(null===a)throw Error(z(321));return a}var T={ReactCurrentDispatcher:R,ReactCurrentBatchConfig:{transition:0},ReactCurrentOwner:G,IsSomeRendererActing:{current:!1},assign:l};
- react_production_min.Children={map:P,forEach:function(a,b,c){P(a,function(){b.apply(this,arguments);},c);},count:function(a){var b=0;P(a,function(){b++;});return b},toArray:function(a){return P(a,function(a){return a})||[]},only:function(a){if(!L(a))throw Error(z(143));return a}};react_production_min.Component=C;react_production_min.PureComponent=E;react_production_min.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=T;
- react_production_min.cloneElement=function(a,b,c){if(null===a||void 0===a)throw Error(z(267,a));var e=l({},a.props),d=a.key,k=a.ref,h=a._owner;if(null!=b){void 0!==b.ref&&(k=b.ref,h=G.current);void 0!==b.key&&(d=""+b.key);if(a.type&&a.type.defaultProps)var g=a.type.defaultProps;for(f in b)H.call(b,f)&&!I.hasOwnProperty(f)&&(e[f]=void 0===b[f]&&void 0!==g?g[f]:b[f]);}var f=arguments.length-2;if(1===f)e.children=c;else if(1<f){g=Array(f);for(var m=0;m<f;m++)g[m]=arguments[m+2];e.children=g;}return {$$typeof:n,type:a.type,
- key:d,ref:k,props:e,_owner:h}};react_production_min.createContext=function(a,b){void 0===b&&(b=null);a={$$typeof:r,_calculateChangedBits:b,_currentValue:a,_currentValue2:a,_threadCount:0,Provider:null,Consumer:null};a.Provider={$$typeof:q,_context:a};return a.Consumer=a};react_production_min.createElement=J;react_production_min.createFactory=function(a){var b=J.bind(null,a);b.type=a;return b};react_production_min.createRef=function(){return {current:null}};react_production_min.forwardRef=function(a){return {$$typeof:t,render:a}};react_production_min.isValidElement=L;
- react_production_min.lazy=function(a){return {$$typeof:v,_payload:{_status:-1,_result:a},_init:Q}};react_production_min.memo=function(a,b){return {$$typeof:u,type:a,compare:void 0===b?null:b}};react_production_min.useCallback=function(a,b){return S().useCallback(a,b)};react_production_min.useContext=function(a,b){return S().useContext(a,b)};react_production_min.useDebugValue=function(){};react_production_min.useEffect=function(a,b){return S().useEffect(a,b)};react_production_min.useImperativeHandle=function(a,b,c){return S().useImperativeHandle(a,b,c)};
- react_production_min.useLayoutEffect=function(a,b){return S().useLayoutEffect(a,b)};react_production_min.useMemo=function(a,b){return S().useMemo(a,b)};react_production_min.useReducer=function(a,b,c){return S().useReducer(a,b,c)};react_production_min.useRef=function(a){return S().useRef(a)};react_production_min.useState=function(a){return S().useState(a)};react_production_min.version="17.0.2";
+var l=Symbol.for("react.element"),n=Symbol.for("react.portal"),p=Symbol.for("react.fragment"),q=Symbol.for("react.strict_mode"),r=Symbol.for("react.profiler"),t=Symbol.for("react.provider"),u=Symbol.for("react.context"),v=Symbol.for("react.forward_ref"),w=Symbol.for("react.suspense"),x=Symbol.for("react.memo"),y=Symbol.for("react.lazy"),z=Symbol.iterator;function A(a){if(null===a||"object"!==typeof a)return null;a=z&&a[z]||a["@@iterator"];return "function"===typeof a?a:null}
+ var B={isMounted:function(){return !1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},C=Object.assign,D={};function E(a,b,e){this.props=a;this.context=b;this.refs=D;this.updater=e||B;}E.prototype.isReactComponent={};
+ E.prototype.setState=function(a,b){if("object"!==typeof a&&"function"!==typeof a&&null!=a)throw Error("setState(...): takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,a,b,"setState");};E.prototype.forceUpdate=function(a){this.updater.enqueueForceUpdate(this,a,"forceUpdate");};function F(){}F.prototype=E.prototype;function G(a,b,e){this.props=a;this.context=b;this.refs=D;this.updater=e||B;}var H=G.prototype=new F;
+ H.constructor=G;C(H,E.prototype);H.isPureReactComponent=!0;var I=Array.isArray,J=Object.prototype.hasOwnProperty,K={current:null},L={key:!0,ref:!0,__self:!0,__source:!0};
+ function M(a,b,e){var d,c={},k=null,h=null;if(null!=b)for(d in void 0!==b.ref&&(h=b.ref),void 0!==b.key&&(k=""+b.key),b)J.call(b,d)&&!L.hasOwnProperty(d)&&(c[d]=b[d]);var g=arguments.length-2;if(1===g)c.children=e;else if(1<g){for(var f=Array(g),m=0;m<g;m++)f[m]=arguments[m+2];c.children=f;}if(a&&a.defaultProps)for(d in g=a.defaultProps,g)void 0===c[d]&&(c[d]=g[d]);return {$$typeof:l,type:a,key:k,ref:h,props:c,_owner:K.current}}
+ function N(a,b){return {$$typeof:l,type:a.type,key:b,ref:a.ref,props:a.props,_owner:a._owner}}function O(a){return "object"===typeof a&&null!==a&&a.$$typeof===l}function escape(a){var b={"=":"=0",":":"=2"};return "$"+a.replace(/[=:]/g,function(a){return b[a]})}var P=/\/+/g;function Q(a,b){return "object"===typeof a&&null!==a&&null!=a.key?escape(""+a.key):b.toString(36)}
+ function R(a,b,e,d,c){var k=typeof a;if("undefined"===k||"boolean"===k)a=null;var h=!1;if(null===a)h=!0;else switch(k){case "string":case "number":h=!0;break;case "object":switch(a.$$typeof){case l:case n:h=!0;}}if(h)return h=a,c=c(h),a=""===d?"."+Q(h,0):d,I(c)?(e="",null!=a&&(e=a.replace(P,"$&/")+"/"),R(c,b,e,"",function(a){return a})):null!=c&&(O(c)&&(c=N(c,e+(!c.key||h&&h.key===c.key?"":(""+c.key).replace(P,"$&/")+"/")+a)),b.push(c)),1;h=0;d=""===d?".":d+":";if(I(a))for(var g=0;g<a.length;g++){k=
+ a[g];var f=d+Q(k,g);h+=R(k,b,e,f,c);}else if(f=A(a),"function"===typeof f)for(a=f.call(a),g=0;!(k=a.next()).done;)k=k.value,f=d+Q(k,g++),h+=R(k,b,e,f,c);else if("object"===k)throw b=String(a),Error("Objects are not valid as a React child (found: "+("[object Object]"===b?"object with keys {"+Object.keys(a).join(", ")+"}":b)+"). If you meant to render a collection of children, use an array instead.");return h}
+ function S(a,b,e){if(null==a)return a;var d=[],c=0;R(a,d,"","",function(a){return b.call(e,a,c++)});return d}function T(a){if(-1===a._status){var b=a._result;b=b();b.then(function(b){if(0===a._status||-1===a._status)a._status=1,a._result=b;},function(b){if(0===a._status||-1===a._status)a._status=2,a._result=b;});-1===a._status&&(a._status=0,a._result=b);}if(1===a._status)return a._result.default;throw a._result;}
+ var U={current:null},V={transition:null},W={ReactCurrentDispatcher:U,ReactCurrentBatchConfig:V,ReactCurrentOwner:K};function X(){throw Error("act(...) is not supported in production builds of React.");}
+ react_production_min.Children={map:S,forEach:function(a,b,e){S(a,function(){b.apply(this,arguments);},e);},count:function(a){var b=0;S(a,function(){b++;});return b},toArray:function(a){return S(a,function(a){return a})||[]},only:function(a){if(!O(a))throw Error("React.Children.only expected to receive a single React element child.");return a}};react_production_min.Component=E;react_production_min.Fragment=p;react_production_min.Profiler=r;react_production_min.PureComponent=G;react_production_min.StrictMode=q;react_production_min.Suspense=w;
+ react_production_min.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=W;react_production_min.act=X;
+ react_production_min.cloneElement=function(a,b,e){if(null===a||void 0===a)throw Error("React.cloneElement(...): The argument must be a React element, but you passed "+a+".");var d=C({},a.props),c=a.key,k=a.ref,h=a._owner;if(null!=b){void 0!==b.ref&&(k=b.ref,h=K.current);void 0!==b.key&&(c=""+b.key);if(a.type&&a.type.defaultProps)var g=a.type.defaultProps;for(f in b)J.call(b,f)&&!L.hasOwnProperty(f)&&(d[f]=void 0===b[f]&&void 0!==g?g[f]:b[f]);}var f=arguments.length-2;if(1===f)d.children=e;else if(1<f){g=Array(f);
+ for(var m=0;m<f;m++)g[m]=arguments[m+2];d.children=g;}return {$$typeof:l,type:a.type,key:c,ref:k,props:d,_owner:h}};react_production_min.createContext=function(a){a={$$typeof:u,_currentValue:a,_currentValue2:a,_threadCount:0,Provider:null,Consumer:null,_defaultValue:null,_globalName:null};a.Provider={$$typeof:t,_context:a};return a.Consumer=a};react_production_min.createElement=M;react_production_min.createFactory=function(a){var b=M.bind(null,a);b.type=a;return b};react_production_min.createRef=function(){return {current:null}};
+ react_production_min.forwardRef=function(a){return {$$typeof:v,render:a}};react_production_min.isValidElement=O;react_production_min.lazy=function(a){return {$$typeof:y,_payload:{_status:-1,_result:a},_init:T}};react_production_min.memo=function(a,b){return {$$typeof:x,type:a,compare:void 0===b?null:b}};react_production_min.startTransition=function(a){var b=V.transition;V.transition={};try{a();}finally{V.transition=b;}};react_production_min.unstable_act=X;react_production_min.useCallback=function(a,b){return U.current.useCallback(a,b)};react_production_min.useContext=function(a){return U.current.useContext(a)};
+ react_production_min.useDebugValue=function(){};react_production_min.useDeferredValue=function(a){return U.current.useDeferredValue(a)};react_production_min.useEffect=function(a,b){return U.current.useEffect(a,b)};react_production_min.useId=function(){return U.current.useId()};react_production_min.useImperativeHandle=function(a,b,e){return U.current.useImperativeHandle(a,b,e)};react_production_min.useInsertionEffect=function(a,b){return U.current.useInsertionEffect(a,b)};react_production_min.useLayoutEffect=function(a,b){return U.current.useLayoutEffect(a,b)};
+ react_production_min.useMemo=function(a,b){return U.current.useMemo(a,b)};react_production_min.useReducer=function(a,b,e){return U.current.useReducer(a,b,e)};react_production_min.useRef=function(a){return U.current.useRef(a)};react_production_min.useState=function(a){return U.current.useState(a)};react_production_min.useSyncExternalStore=function(a,b,e){return U.current.useSyncExternalStore(a,b,e)};react_production_min.useTransition=function(){return U.current.useTransition()};react_production_min.version="18.3.1";
return react_production_min;
}
-var react_development = {};
+var react_developmentExports = {};
+var react_development = {
+ get exports(){ return react_developmentExports; },
+ set exports(v){ react_developmentExports = v; },
+};
-/** @license React v17.0.2
+/**
+ * @license React
* react.development.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
@@ -3999,66 +3968,41 @@ var react_development = {};
var hasRequiredReact_development;
function requireReact_development () {
- if (hasRequiredReact_development) return react_development;
+ if (hasRequiredReact_development) return react_developmentExports;
hasRequiredReact_development = 1;
- (function (exports) {
+ (function (module, exports) {
if (process.env.NODE_ENV !== "production") {
(function() {
- var _assign = requireObjectAssign();
-
- // TODO: this is special because it gets imported during build.
- var ReactVersion = '17.0.2';
+ /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
+ if (
+ typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
+ typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart ===
+ 'function'
+ ) {
+ __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
+ }
+ var ReactVersion = '18.3.1';
// ATTENTION
// When adding new symbols to this file,
// Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
- // The Symbol used to tag the ReactElement-like types. If there is no native Symbol
- // nor polyfill, then a plain number is used for performance.
- var REACT_ELEMENT_TYPE = 0xeac7;
- var REACT_PORTAL_TYPE = 0xeaca;
- exports.Fragment = 0xeacb;
- exports.StrictMode = 0xeacc;
- exports.Profiler = 0xead2;
- var REACT_PROVIDER_TYPE = 0xeacd;
- var REACT_CONTEXT_TYPE = 0xeace;
- var REACT_FORWARD_REF_TYPE = 0xead0;
- exports.Suspense = 0xead1;
- var REACT_SUSPENSE_LIST_TYPE = 0xead8;
- var REACT_MEMO_TYPE = 0xead3;
- var REACT_LAZY_TYPE = 0xead4;
- var REACT_BLOCK_TYPE = 0xead9;
- var REACT_SERVER_BLOCK_TYPE = 0xeada;
- var REACT_FUNDAMENTAL_TYPE = 0xead5;
- var REACT_DEBUG_TRACING_MODE_TYPE = 0xeae1;
- var REACT_LEGACY_HIDDEN_TYPE = 0xeae3;
-
- if (typeof Symbol === 'function' && Symbol.for) {
- var symbolFor = Symbol.for;
- REACT_ELEMENT_TYPE = symbolFor('react.element');
- REACT_PORTAL_TYPE = symbolFor('react.portal');
- exports.Fragment = symbolFor('react.fragment');
- exports.StrictMode = symbolFor('react.strict_mode');
- exports.Profiler = symbolFor('react.profiler');
- REACT_PROVIDER_TYPE = symbolFor('react.provider');
- REACT_CONTEXT_TYPE = symbolFor('react.context');
- REACT_FORWARD_REF_TYPE = symbolFor('react.forward_ref');
- exports.Suspense = symbolFor('react.suspense');
- REACT_SUSPENSE_LIST_TYPE = symbolFor('react.suspense_list');
- REACT_MEMO_TYPE = symbolFor('react.memo');
- REACT_LAZY_TYPE = symbolFor('react.lazy');
- REACT_BLOCK_TYPE = symbolFor('react.block');
- REACT_SERVER_BLOCK_TYPE = symbolFor('react.server.block');
- REACT_FUNDAMENTAL_TYPE = symbolFor('react.fundamental');
- symbolFor('react.scope');
- symbolFor('react.opaque.id');
- REACT_DEBUG_TRACING_MODE_TYPE = symbolFor('react.debug_trace_mode');
- symbolFor('react.offscreen');
- REACT_LEGACY_HIDDEN_TYPE = symbolFor('react.legacy_hidden');
- }
-
- var MAYBE_ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
+ // The Symbol used to tag the ReactElement-like types.
+ var REACT_ELEMENT_TYPE = Symbol.for('react.element');
+ var REACT_PORTAL_TYPE = Symbol.for('react.portal');
+ var REACT_FRAGMENT_TYPE = Symbol.for('react.fragment');
+ var REACT_STRICT_MODE_TYPE = Symbol.for('react.strict_mode');
+ var REACT_PROFILER_TYPE = Symbol.for('react.profiler');
+ var REACT_PROVIDER_TYPE = Symbol.for('react.provider');
+ var REACT_CONTEXT_TYPE = Symbol.for('react.context');
+ var REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref');
+ var REACT_SUSPENSE_TYPE = Symbol.for('react.suspense');
+ var REACT_SUSPENSE_LIST_TYPE = Symbol.for('react.suspense_list');
+ var REACT_MEMO_TYPE = Symbol.for('react.memo');
+ var REACT_LAZY_TYPE = Symbol.for('react.lazy');
+ var REACT_OFFSCREEN_TYPE = Symbol.for('react.offscreen');
+ var MAYBE_ITERATOR_SYMBOL = Symbol.iterator;
var FAUX_ITERATOR_SYMBOL = '@@iterator';
function getIteratorFn(maybeIterable) {
if (maybeIterable === null || typeof maybeIterable !== 'object') {
@@ -4090,7 +4034,14 @@ function requireReact_development () {
* should suspend for if it needs to.
*/
var ReactCurrentBatchConfig = {
- transition: 0
+ transition: null
+ };
+
+ var ReactCurrentActQueue = {
+ current: null,
+ // Used to reproduce behavior of `batchedUpdates` in legacy mode.
+ isBatchingLegacy: false,
+ didScheduleLegacyUpdate: false
};
/**
@@ -4143,24 +4094,27 @@ function requireReact_development () {
};
}
- /**
- * Used by act() to track whether you're inside an act() scope.
- */
- var IsSomeRendererActing = {
- current: false
- };
+ // -----------------------------------------------------------------------------
+
+ var enableScopeAPI = false; // Experimental Create Event Handle API.
+ var enableCacheElement = false;
+ var enableTransitionTracing = false; // No known bugs, but needs performance testing
+
+ var enableLegacyHidden = false; // Enables unstable_avoidThisFallback feature in Fiber
+ // stuff. Intended to enable React core members to more easily debug scheduling
+ // issues in DEV builds.
+
+ var enableDebugTracing = false; // Track which Fiber(s) schedule render work.
var ReactSharedInternals = {
ReactCurrentDispatcher: ReactCurrentDispatcher,
ReactCurrentBatchConfig: ReactCurrentBatchConfig,
- ReactCurrentOwner: ReactCurrentOwner,
- IsSomeRendererActing: IsSomeRendererActing,
- // Used by renderers to avoid bundling object-assign twice in UMD bundles:
- assign: _assign
+ ReactCurrentOwner: ReactCurrentOwner
};
{
ReactSharedInternals.ReactDebugCurrentFrame = ReactDebugCurrentFrame;
+ ReactSharedInternals.ReactCurrentActQueue = ReactCurrentActQueue;
}
// by calls to these methods by a Babel plugin.
@@ -4170,20 +4124,24 @@ function requireReact_development () {
function warn(format) {
{
- for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
- args[_key - 1] = arguments[_key];
- }
+ {
+ for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+ args[_key - 1] = arguments[_key];
+ }
- printWarning('warn', format, args);
+ printWarning('warn', format, args);
+ }
}
}
function error(format) {
{
- for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
- args[_key2 - 1] = arguments[_key2];
- }
+ {
+ for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+ args[_key2 - 1] = arguments[_key2];
+ }
- printWarning('error', format, args);
+ printWarning('error', format, args);
+ }
}
}
@@ -4197,10 +4155,11 @@ function requireReact_development () {
if (stack !== '') {
format += '%s';
args = args.concat([stack]);
- }
+ } // eslint-disable-next-line react-internal/safe-string-coercion
+
var argsWithFormat = args.map(function (item) {
- return '' + item;
+ return String(item);
}); // Careful: RN currently depends on this prefix
argsWithFormat.unshift('Warning: ' + format); // We intentionally don't use spread (or .apply) directly because it
@@ -4298,6 +4257,8 @@ function requireReact_development () {
}
};
+ var assign = Object.assign;
+
var emptyObject = {};
{
@@ -4346,10 +4307,8 @@ function requireReact_development () {
*/
Component.prototype.setState = function (partialState, callback) {
- if (!(typeof partialState === 'object' || typeof partialState === 'function' || partialState == null)) {
- {
- throw Error( "setState(...): takes an object of state variables to update or a function which returns an object of state variables." );
- }
+ if (typeof partialState !== 'object' && typeof partialState !== 'function' && partialState != null) {
+ throw new Error('setState(...): takes an object of state variables to update or a ' + 'function which returns an object of state variables.');
}
this.updater.enqueueSetState(this, partialState, callback, 'setState');
@@ -4421,8 +4380,7 @@ function requireReact_development () {
var pureComponentPrototype = PureComponent.prototype = new ComponentDummy();
pureComponentPrototype.constructor = PureComponent; // Avoid an extra prototype jump for these methods.
- _assign(pureComponentPrototype, Component.prototype);
-
+ assign(pureComponentPrototype, Component.prototype);
pureComponentPrototype.isPureReactComponent = true;
// an immutable object with a single mutable value
@@ -4438,16 +4396,97 @@ function requireReact_development () {
return refObject;
}
+ var isArrayImpl = Array.isArray; // eslint-disable-next-line no-redeclare
+
+ function isArray(a) {
+ return isArrayImpl(a);
+ }
+
+ /*
+ * The `'' + value` pattern (used in in perf-sensitive code) throws for Symbol
+ * and Temporal.* types. See https://github.com/facebook/react/pull/22064.
+ *
+ * The functions in this module will throw an easier-to-understand,
+ * easier-to-debug exception with a clear errors message message explaining the
+ * problem. (Instead of a confusing exception thrown inside the implementation
+ * of the `value` object).
+ */
+ // $FlowFixMe only called in DEV, so void return is not possible.
+ function typeName(value) {
+ {
+ // toStringTag is needed for namespaced types like Temporal.Instant
+ var hasToStringTag = typeof Symbol === 'function' && Symbol.toStringTag;
+ var type = hasToStringTag && value[Symbol.toStringTag] || value.constructor.name || 'Object';
+ return type;
+ }
+ } // $FlowFixMe only called in DEV, so void return is not possible.
+
+
+ function willCoercionThrow(value) {
+ {
+ try {
+ testStringCoercion(value);
+ return false;
+ } catch (e) {
+ return true;
+ }
+ }
+ }
+
+ function testStringCoercion(value) {
+ // If you ended up here by following an exception call stack, here's what's
+ // happened: you supplied an object or symbol value to React (as a prop, key,
+ // DOM attribute, CSS property, string ref, etc.) and when React tried to
+ // coerce it to a string using `'' + value`, an exception was thrown.
+ //
+ // The most common types that will cause this exception are `Symbol` instances
+ // and Temporal objects like `Temporal.Instant`. But any object that has a
+ // `valueOf` or `[Symbol.toPrimitive]` method that throws will also cause this
+ // exception. (Library authors do this to prevent users from using built-in
+ // numeric operators like `+` or comparison operators like `>=` because custom
+ // methods are needed to perform accurate arithmetic or comparison.)
+ //
+ // To fix the problem, coerce this object or symbol value to a string before
+ // passing it to React. The most reliable way is usually `String(value)`.
+ //
+ // To find which value is throwing, check the browser or debugger console.
+ // Before this exception was thrown, there should be `console.error` output
+ // that shows the type (Symbol, Temporal.PlainDate, etc.) that caused the
+ // problem and how that type was used: key, atrribute, input value prop, etc.
+ // In most cases, this console output also shows the component and its
+ // ancestor components where the exception happened.
+ //
+ // eslint-disable-next-line react-internal/safe-string-coercion
+ return '' + value;
+ }
+ function checkKeyStringCoercion(value) {
+ {
+ if (willCoercionThrow(value)) {
+ error('The provided key is an unsupported type %s.' + ' This value must be coerced to a string before before using it here.', typeName(value));
+
+ return testStringCoercion(value); // throw (to help callers find troubleshooting comments)
+ }
+ }
+ }
+
function getWrappedName(outerType, innerType, wrapperName) {
+ var displayName = outerType.displayName;
+
+ if (displayName) {
+ return displayName;
+ }
+
var functionName = innerType.displayName || innerType.name || '';
- return outerType.displayName || (functionName !== '' ? wrapperName + "(" + functionName + ")" : wrapperName);
- }
+ return functionName !== '' ? wrapperName + "(" + functionName + ")" : wrapperName;
+ } // Keep in sync with react-reconciler/getComponentNameFromFiber
+
function getContextName(type) {
return type.displayName || 'Context';
- }
+ } // Note that the reconciler package should generally prefer to use getComponentNameFromFiber() instead.
+
- function getComponentName(type) {
+ function getComponentNameFromType(type) {
if (type == null) {
// Host root, text node or just invalid type.
return null;
@@ -4455,7 +4494,7 @@ function requireReact_development () {
{
if (typeof type.tag === 'number') {
- error('Received an unexpected object in getComponentName(). ' + 'This is likely a bug in React. Please file an issue.');
+ error('Received an unexpected object in getComponentNameFromType(). ' + 'This is likely a bug in React. Please file an issue.');
}
}
@@ -4468,23 +4507,24 @@ function requireReact_development () {
}
switch (type) {
- case exports.Fragment:
+ case REACT_FRAGMENT_TYPE:
return 'Fragment';
case REACT_PORTAL_TYPE:
return 'Portal';
- case exports.Profiler:
+ case REACT_PROFILER_TYPE:
return 'Profiler';
- case exports.StrictMode:
+ case REACT_STRICT_MODE_TYPE:
return 'StrictMode';
- case exports.Suspense:
+ case REACT_SUSPENSE_TYPE:
return 'Suspense';
case REACT_SUSPENSE_LIST_TYPE:
return 'SuspenseList';
+
}
if (typeof type === 'object') {
@@ -4501,10 +4541,13 @@ function requireReact_development () {
return getWrappedName(type, type.render, 'ForwardRef');
case REACT_MEMO_TYPE:
- return getComponentName(type.type);
+ var outerName = type.displayName || null;
+
+ if (outerName !== null) {
+ return outerName;
+ }
- case REACT_BLOCK_TYPE:
- return getComponentName(type._render);
+ return getComponentNameFromType(type.type) || 'Memo';
case REACT_LAZY_TYPE:
{
@@ -4513,11 +4556,13 @@ function requireReact_development () {
var init = lazyComponent._init;
try {
- return getComponentName(init(payload));
+ return getComponentNameFromType(init(payload));
} catch (x) {
return null;
}
}
+
+ // eslint-disable-next-line no-fallthrough
}
}
@@ -4525,6 +4570,7 @@ function requireReact_development () {
}
var hasOwnProperty = Object.prototype.hasOwnProperty;
+
var RESERVED_PROPS = {
key: true,
ref: true,
@@ -4604,7 +4650,7 @@ function requireReact_development () {
function warnIfStringRefCannotBeAutoConverted(config) {
{
if (typeof config.ref === 'string' && ReactCurrentOwner.current && config.__self && ReactCurrentOwner.current.stateNode !== config.__self) {
- var componentName = getComponentName(ReactCurrentOwner.current.type);
+ var componentName = getComponentNameFromType(ReactCurrentOwner.current.type);
if (!didWarnAboutStringRefs[componentName]) {
error('Component "%s" contains the string ref "%s". ' + 'Support for string refs will be removed in a future major release. ' + 'This case cannot be automatically converted to an arrow function. ' + 'We ask you to manually fix this case by using useRef() or createRef() instead. ' + 'Learn more about using refs safely here: ' + 'https://reactjs.org/link/strict-mode-string-ref', componentName, config.ref);
@@ -4713,6 +4759,10 @@ function requireReact_development () {
}
if (hasValidKey(config)) {
+ {
+ checkKeyStringCoercion(config.key);
+ }
+
key = '' + config.key;
}
@@ -4785,16 +4835,13 @@ function requireReact_development () {
*/
function cloneElement(element, config, children) {
- if (!!(element === null || element === undefined)) {
- {
- throw Error( "React.cloneElement(...): The argument must be a React element, but you passed " + element + "." );
- }
+ if (element === null || element === undefined) {
+ throw new Error("React.cloneElement(...): The argument must be a React element, but you passed " + element + ".");
}
var propName; // Original props are copied
- var props = _assign({}, element.props); // Reserved names are extracted
-
+ var props = assign({}, element.props); // Reserved names are extracted
var key = element.key;
var ref = element.ref; // Self is preserved since the owner is preserved.
@@ -4815,6 +4862,10 @@ function requireReact_development () {
}
if (hasValidKey(config)) {
+ {
+ checkKeyStringCoercion(config.key);
+ }
+
key = '' + config.key;
} // Remaining properties override existing props
@@ -4913,6 +4964,10 @@ function requireReact_development () {
// that we don't block potential future ES APIs.
if (typeof element === 'object' && element !== null && element.key != null) {
// Explicit key
+ {
+ checkKeyStringCoercion(element.key);
+ }
+
return escape('' + element.key);
} // Implicit key determined by the index in the set
@@ -4956,7 +5011,7 @@ function requireReact_development () {
var childKey = nameSoFar === '' ? SEPARATOR + getElementKey(_child, 0) : nameSoFar;
- if (Array.isArray(mappedChild)) {
+ if (isArray(mappedChild)) {
var escapedChildKey = '';
if (childKey != null) {
@@ -4968,10 +5023,20 @@ function requireReact_development () {
});
} else if (mappedChild != null) {
if (isValidElement(mappedChild)) {
+ {
+ // The `if` statement here prevents auto-disabling of the safe
+ // coercion ESLint rule, so we must manually disable it below.
+ // $FlowFixMe Flow incorrectly thinks React.Portal doesn't have a key
+ if (mappedChild.key && (!_child || _child.key !== mappedChild.key)) {
+ checkKeyStringCoercion(mappedChild.key);
+ }
+ }
+
mappedChild = cloneAndReplaceKey(mappedChild, // Keep both the (mapped) and old keys if they differ, just as
// traverseAllChildren used to do for objects as children
escapedPrefix + ( // $FlowFixMe Flow incorrectly thinks React.Portal doesn't have a key
mappedChild.key && (!_child || _child.key !== mappedChild.key) ? // $FlowFixMe Flow incorrectly thinks existing element's key can be a number
+ // eslint-disable-next-line react-internal/safe-string-coercion
escapeUserProvidedKey('' + mappedChild.key) + '/' : '') + childKey);
}
@@ -4987,7 +5052,7 @@ function requireReact_development () {
var nextNamePrefix = nameSoFar === '' ? SEPARATOR : nameSoFar + SUBSEPARATOR;
- if (Array.isArray(children)) {
+ if (isArray(children)) {
for (var i = 0; i < children.length; i++) {
child = children[i];
nextName = nextNamePrefix + getElementKey(child, i);
@@ -5020,13 +5085,9 @@ function requireReact_development () {
subtreeCount += mapIntoArray(child, array, escapedPrefix, nextName, callback);
}
} else if (type === 'object') {
- var childrenString = '' + children;
-
- {
- {
- throw Error( "Objects are not valid as a React child (found: " + (childrenString === '[object Object]' ? 'object with keys {' + Object.keys(children).join(', ') + '}' : childrenString) + "). If you meant to render a collection of children, use an array instead." );
- }
- }
+ // eslint-disable-next-line react-internal/safe-string-coercion
+ var childrenString = String(children);
+ throw new Error("Objects are not valid as a React child (found: " + (childrenString === '[object Object]' ? 'object with keys {' + Object.keys(children).join(', ') + '}' : childrenString) + "). " + 'If you meant to render a collection of children, use an array ' + 'instead.');
}
}
@@ -5125,28 +5186,17 @@ function requireReact_development () {
function onlyChild(children) {
if (!isValidElement(children)) {
- {
- throw Error( "React.Children.only expected to receive a single React element child." );
- }
+ throw new Error('React.Children.only expected to receive a single React element child.');
}
return children;
}
- function createContext(defaultValue, calculateChangedBits) {
- if (calculateChangedBits === undefined) {
- calculateChangedBits = null;
- } else {
- {
- if (calculateChangedBits !== null && typeof calculateChangedBits !== 'function') {
- error('createContext: Expected the optional second argument to be a ' + 'function. Instead received: %s', calculateChangedBits);
- }
- }
- }
-
+ function createContext(defaultValue) {
+ // TODO: Second argument used to be an optional `calculateChangedBits`
+ // function. Warn to reserve for future use?
var context = {
$$typeof: REACT_CONTEXT_TYPE,
- _calculateChangedBits: calculateChangedBits,
// As a workaround to support multiple concurrent renderers, we categorize
// some renderers as primary and others as secondary. We only expect
// there to be two concurrent renderers at most: React Native (primary) and
@@ -5159,7 +5209,10 @@ function requireReact_development () {
_threadCount: 0,
// These are circular
Provider: null,
- Consumer: null
+ Consumer: null,
+ // Add these to use same hidden class in VM as ServerContext
+ _defaultValue: null,
+ _globalName: null
};
context.Provider = {
$$typeof: REACT_PROVIDER_TYPE,
@@ -5175,8 +5228,7 @@ function requireReact_development () {
// warn for the incorrect usage of Context as a Consumer.
var Consumer = {
$$typeof: REACT_CONTEXT_TYPE,
- _context: context,
- _calculateChangedBits: context._calculateChangedBits
+ _context: context
}; // $FlowFixMe: Flow complains about not setting a value, which is intentional here
Object.defineProperties(Consumer, {
@@ -5263,38 +5315,54 @@ function requireReact_development () {
if (payload._status === Uninitialized) {
var ctor = payload._result;
var thenable = ctor(); // Transition to the next state.
+ // This might throw either because it's missing or throws. If so, we treat it
+ // as still uninitialized and try again next time. Which is the same as what
+ // happens if the ctor or any wrappers processing the ctor throws. This might
+ // end up fixing it if the resolution was a concurrency bug.
- var pending = payload;
- pending._status = Pending;
- pending._result = thenable;
thenable.then(function (moduleObject) {
- if (payload._status === Pending) {
- var defaultExport = moduleObject.default;
-
- {
- if (defaultExport === undefined) {
- error('lazy: Expected the result of a dynamic import() call. ' + 'Instead received: %s\n\nYour code should look like: \n ' + // Break up imports to avoid accidentally parsing them as dependencies.
- 'const MyComponent = lazy(() => imp' + "ort('./MyComponent'))", moduleObject);
- }
- } // Transition to the next state.
-
-
+ if (payload._status === Pending || payload._status === Uninitialized) {
+ // Transition to the next state.
var resolved = payload;
resolved._status = Resolved;
- resolved._result = defaultExport;
+ resolved._result = moduleObject;
}
}, function (error) {
- if (payload._status === Pending) {
+ if (payload._status === Pending || payload._status === Uninitialized) {
// Transition to the next state.
var rejected = payload;
rejected._status = Rejected;
rejected._result = error;
}
});
+
+ if (payload._status === Uninitialized) {
+ // In case, we're still uninitialized, then we're waiting for the thenable
+ // to resolve. Set it as pending in the meantime.
+ var pending = payload;
+ pending._status = Pending;
+ pending._result = thenable;
+ }
}
if (payload._status === Resolved) {
- return payload._result;
+ var moduleObject = payload._result;
+
+ {
+ if (moduleObject === undefined) {
+ error('lazy: Expected the result of a dynamic imp' + 'ort() call. ' + 'Instead received: %s\n\nYour code should look like: \n ' + // Break up imports to avoid accidentally parsing them as dependencies.
+ 'const MyComponent = lazy(() => imp' + "ort('./MyComponent'))\n\n" + 'Did you accidentally put curly braces around the import?', moduleObject);
+ }
+ }
+
+ {
+ if (!('default' in moduleObject)) {
+ error('lazy: Expected the result of a dynamic imp' + 'ort() call. ' + 'Instead received: %s\n\nYour code should look like: \n ' + // Break up imports to avoid accidentally parsing them as dependencies.
+ 'const MyComponent = lazy(() => imp' + "ort('./MyComponent'))", moduleObject);
+ }
+ }
+
+ return moduleObject.default;
} else {
throw payload._result;
}
@@ -5303,7 +5371,7 @@ function requireReact_development () {
function lazy(ctor) {
var payload = {
// We use these fields to store the result.
- _status: -1,
+ _status: Uninitialized,
_result: ctor
};
var lazyType = {
@@ -5389,9 +5457,15 @@ function requireReact_development () {
return ownName;
},
set: function (name) {
- ownName = name;
-
- if (render.displayName == null) {
+ ownName = name; // The inner component shouldn't inherit this display name in most cases,
+ // because the component may be used elsewhere.
+ // But it's nice for anonymous functions to inherit the name,
+ // so that our component-stack generation logic will display their frames.
+ // An anonymous function generally suggests a pattern like:
+ // React.forwardRef((props, ref) => {...});
+ // This kind of inner function is not used elsewhere so the side effect is okay.
+
+ if (!render.name && !render.displayName) {
render.displayName = name;
}
}
@@ -5401,9 +5475,11 @@ function requireReact_development () {
return elementType;
}
- // Filter certain DOM attributes (e.g. src, href) if their values are empty strings.
+ var REACT_MODULE_REFERENCE;
- var enableScopeAPI = false; // Experimental Create Event Handle API.
+ {
+ REACT_MODULE_REFERENCE = Symbol.for('react.module.reference');
+ }
function isValidElementType(type) {
if (typeof type === 'string' || typeof type === 'function') {
@@ -5411,12 +5487,16 @@ function requireReact_development () {
} // Note: typeof might be other than 'symbol' or 'number' (e.g. if it's a polyfill).
- if (type === exports.Fragment || type === exports.Profiler || type === REACT_DEBUG_TRACING_MODE_TYPE || type === exports.StrictMode || type === exports.Suspense || type === REACT_SUSPENSE_LIST_TYPE || type === REACT_LEGACY_HIDDEN_TYPE || enableScopeAPI ) {
+ if (type === REACT_FRAGMENT_TYPE || type === REACT_PROFILER_TYPE || enableDebugTracing || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || enableLegacyHidden || type === REACT_OFFSCREEN_TYPE || enableScopeAPI || enableCacheElement || enableTransitionTracing ) {
return true;
}
if (typeof type === 'object' && type !== null) {
- if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_BLOCK_TYPE || type[0] === REACT_SERVER_BLOCK_TYPE) {
+ if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || // This needs to include all possible module reference object
+ // types supported by any Flight configuration anywhere since
+ // we don't know which Flight build this will end up being used
+ // with.
+ type.$$typeof === REACT_MODULE_REFERENCE || type.getModuleId !== undefined) {
return true;
}
}
@@ -5446,9 +5526,15 @@ function requireReact_development () {
return ownName;
},
set: function (name) {
- ownName = name;
-
- if (type.displayName == null) {
+ ownName = name; // The inner component shouldn't inherit this display name in most cases,
+ // because the component may be used elsewhere.
+ // But it's nice for anonymous functions to inherit the name,
+ // so that our component-stack generation logic will display their frames.
+ // An anonymous function generally suggests a pattern like:
+ // React.memo((props) => {...});
+ // This kind of inner function is not used elsewhere so the side effect is okay.
+
+ if (!type.name && !type.displayName) {
type.displayName = name;
}
}
@@ -5461,24 +5547,22 @@ function requireReact_development () {
function resolveDispatcher() {
var dispatcher = ReactCurrentDispatcher.current;
- if (!(dispatcher !== null)) {
- {
- throw Error( "Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:\n1. You might have mismatching versions of React and the renderer (such as React DOM)\n2. You might be breaking the Rules of Hooks\n3. You might have more than one copy of React in the same app\nSee https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem." );
+ {
+ if (dispatcher === null) {
+ error('Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' + ' one of the following reasons:\n' + '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' + '2. You might be breaking the Rules of Hooks\n' + '3. You might have more than one copy of React in the same app\n' + 'See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.');
}
- }
+ } // Will result in a null access error if accessed outside render phase. We
+ // intentionally don't throw our own error because this is in a hot path.
+ // Also helps ensure this is inlined.
+
return dispatcher;
}
-
- function useContext(Context, unstable_observedBits) {
+ function useContext(Context) {
var dispatcher = resolveDispatcher();
{
- if (unstable_observedBits !== undefined) {
- error('useContext() second argument is reserved for future ' + 'use in React. Passing it is not supported. ' + 'You passed: %s.%s', unstable_observedBits, typeof unstable_observedBits === 'number' && Array.isArray(arguments[2]) ? '\n\nDid you call array.map(useContext)? ' + 'Calling Hooks inside a loop is not supported. ' + 'Learn more at https://reactjs.org/link/rules-of-hooks' : '');
- } // TODO: add a more generic warning for invalid values.
-
-
+ // TODO: add a more generic warning for invalid values.
if (Context._context !== undefined) {
var realContext = Context._context; // Don't deduplicate because this legitimately causes bugs
// and nobody should be using this in existing code.
@@ -5491,7 +5575,7 @@ function requireReact_development () {
}
}
- return dispatcher.useContext(Context, unstable_observedBits);
+ return dispatcher.useContext(Context);
}
function useState(initialState) {
var dispatcher = resolveDispatcher();
@@ -5509,6 +5593,10 @@ function requireReact_development () {
var dispatcher = resolveDispatcher();
return dispatcher.useEffect(create, deps);
}
+ function useInsertionEffect(create, deps) {
+ var dispatcher = resolveDispatcher();
+ return dispatcher.useInsertionEffect(create, deps);
+ }
function useLayoutEffect(create, deps) {
var dispatcher = resolveDispatcher();
return dispatcher.useLayoutEffect(create, deps);
@@ -5531,6 +5619,22 @@ function requireReact_development () {
return dispatcher.useDebugValue(value, formatterFn);
}
}
+ function useTransition() {
+ var dispatcher = resolveDispatcher();
+ return dispatcher.useTransition();
+ }
+ function useDeferredValue(value) {
+ var dispatcher = resolveDispatcher();
+ return dispatcher.useDeferredValue(value);
+ }
+ function useId() {
+ var dispatcher = resolveDispatcher();
+ return dispatcher.useId();
+ }
+ function useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) {
+ var dispatcher = resolveDispatcher();
+ return dispatcher.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+ }
// Helpers to patch console.logs to avoid logging during side-effect free
// replaying on render function. This currently only patches the object
@@ -5595,25 +5699,25 @@ function requireReact_development () {
}; // $FlowFixMe Flow thinks console is immutable.
Object.defineProperties(console, {
- log: _assign({}, props, {
+ log: assign({}, props, {
value: prevLog
}),
- info: _assign({}, props, {
+ info: assign({}, props, {
value: prevInfo
}),
- warn: _assign({}, props, {
+ warn: assign({}, props, {
value: prevWarn
}),
- error: _assign({}, props, {
+ error: assign({}, props, {
value: prevError
}),
- group: _assign({}, props, {
+ group: assign({}, props, {
value: prevGroup
}),
- groupCollapsed: _assign({}, props, {
+ groupCollapsed: assign({}, props, {
value: prevGroupCollapsed
}),
- groupEnd: _assign({}, props, {
+ groupEnd: assign({}, props, {
value: prevGroupEnd
})
});
@@ -5654,7 +5758,7 @@ function requireReact_development () {
function describeNativeComponentFrame(fn, construct) {
// If something asked for a stack inside a fake render, it should get ignored.
- if (!fn || reentry) {
+ if ( !fn || reentry) {
return '';
}
@@ -5763,7 +5867,14 @@ function requireReact_development () {
if (c < 0 || sampleLines[s] !== controlLines[c]) {
// V8 adds a "new" prefix for native classes. Let's remove it to make it prettier.
- var _frame = '\n' + sampleLines[s].replace(' at new ', ' at ');
+ var _frame = '\n' + sampleLines[s].replace(' at new ', ' at '); // If our component frame is labeled "<anonymous>"
+ // but we have a user-provided "displayName"
+ // splice it in to make the stack more readable.
+
+
+ if (fn.displayName && _frame.includes('<anonymous>')) {
+ _frame = _frame.replace('<anonymous>', fn.displayName);
+ }
{
if (typeof fn === 'function') {
@@ -5832,7 +5943,7 @@ function requireReact_development () {
}
switch (type) {
- case exports.Suspense:
+ case REACT_SUSPENSE_TYPE:
return describeBuiltInComponentFrame('Suspense');
case REACT_SUSPENSE_LIST_TYPE:
@@ -5848,9 +5959,6 @@ function requireReact_development () {
// Memo may contain any component type so we recursively resolve it.
return describeUnknownElementTypeFrameInDEV(type.type, source, ownerFn);
- case REACT_BLOCK_TYPE:
- return describeFunctionComponentFrame(type._render);
-
case REACT_LAZY_TYPE:
{
var lazyComponent = type;
@@ -5886,7 +5994,7 @@ function requireReact_development () {
function checkPropTypes(typeSpecs, values, location, componentName, element) {
{
// $FlowFixMe This is okay but Flow doesn't know it.
- var has = Function.call.bind(Object.prototype.hasOwnProperty);
+ var has = Function.call.bind(hasOwnProperty);
for (var typeSpecName in typeSpecs) {
if (has(typeSpecs, typeSpecName)) {
@@ -5898,6 +6006,7 @@ function requireReact_development () {
// This is intentionally an invariant that gets caught. It's the same
// behavior as without this statement except with a better message.
if (typeof typeSpecs[typeSpecName] !== 'function') {
+ // eslint-disable-next-line react-internal/prod-error-codes
var err = Error((componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' + 'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.' + 'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.');
err.name = 'Invariant Violation';
throw err;
@@ -5951,7 +6060,7 @@ function requireReact_development () {
function getDeclarationErrorAddendum() {
if (ReactCurrentOwner.current) {
- var name = getComponentName(ReactCurrentOwner.current.type);
+ var name = getComponentNameFromType(ReactCurrentOwner.current.type);
if (name) {
return '\n\nCheck the render method of `' + name + '`.';
@@ -6033,7 +6142,7 @@ function requireReact_development () {
if (element && element._owner && element._owner !== ReactCurrentOwner.current) {
// Give the component that originally created this child.
- childOwner = " It was passed a child from " + getComponentName(element._owner.type) + ".";
+ childOwner = " It was passed a child from " + getComponentNameFromType(element._owner.type) + ".";
}
{
@@ -6060,7 +6169,7 @@ function requireReact_development () {
return;
}
- if (Array.isArray(node)) {
+ if (isArray(node)) {
for (var i = 0; i < node.length; i++) {
var child = node[i];
@@ -6122,12 +6231,12 @@ function requireReact_development () {
if (propTypes) {
// Intentionally inside to avoid triggering lazy initializers:
- var name = getComponentName(type);
+ var name = getComponentNameFromType(type);
checkPropTypes(propTypes, element.props, 'prop', name, element);
} else if (type.PropTypes !== undefined && !propTypesMisspellWarningShown) {
propTypesMisspellWarningShown = true; // Intentionally inside to avoid triggering lazy initializers:
- var _name = getComponentName(type);
+ var _name = getComponentNameFromType(type);
error('Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?', _name || 'Unknown');
}
@@ -6192,10 +6301,10 @@ function requireReact_development () {
if (type === null) {
typeString = 'null';
- } else if (Array.isArray(type)) {
+ } else if (isArray(type)) {
typeString = 'array';
} else if (type !== undefined && type.$$typeof === REACT_ELEMENT_TYPE) {
- typeString = "<" + (getComponentName(type.type) || 'Unknown') + " />";
+ typeString = "<" + (getComponentNameFromType(type.type) || 'Unknown') + " />";
info = ' Did you accidentally export a JSX literal instead of a component?';
} else {
typeString = typeof type;
@@ -6224,7 +6333,7 @@ function requireReact_development () {
}
}
- if (type === exports.Fragment) {
+ if (type === REACT_FRAGMENT_TYPE) {
validateFragmentProps(element);
} else {
validatePropTypes(element);
@@ -6271,58 +6380,326 @@ function requireReact_development () {
return newElement;
}
- {
+ function startTransition(scope, options) {
+ var prevTransition = ReactCurrentBatchConfig.transition;
+ ReactCurrentBatchConfig.transition = {};
+ var currentTransition = ReactCurrentBatchConfig.transition;
+
+ {
+ ReactCurrentBatchConfig.transition._updatedFibers = new Set();
+ }
try {
- var frozenObject = Object.freeze({});
- /* eslint-disable no-new */
+ scope();
+ } finally {
+ ReactCurrentBatchConfig.transition = prevTransition;
+
+ {
+ if (prevTransition === null && currentTransition._updatedFibers) {
+ var updatedFibersCount = currentTransition._updatedFibers.size;
+
+ if (updatedFibersCount > 10) {
+ warn('Detected a large number of updates inside startTransition. ' + 'If this is due to a subscription please re-write it to use React provided hooks. ' + 'Otherwise concurrent mode guarantees are off the table.');
+ }
- new Map([[frozenObject, null]]);
- new Set([frozenObject]);
- /* eslint-enable no-new */
- } catch (e) {
+ currentTransition._updatedFibers.clear();
+ }
+ }
}
}
- var createElement$1 = createElementWithValidation ;
- var cloneElement$1 = cloneElementWithValidation ;
- var createFactory = createFactoryWithValidation ;
- var Children = {
- map: mapChildren,
- forEach: forEachChildren,
- count: countChildren,
- toArray: toArray,
- only: onlyChild
- };
+ var didWarnAboutMessageChannel = false;
+ var enqueueTaskImpl = null;
+ function enqueueTask(task) {
+ if (enqueueTaskImpl === null) {
+ try {
+ // read require off the module object to get around the bundlers.
+ // we don't want them to detect a require and bundle a Node polyfill.
+ var requireString = ('require' + Math.random()).slice(0, 7);
+ var nodeRequire = module && module[requireString]; // assuming we're in node, let's try to get node's
+ // version of setImmediate, bypassing fake timers if any.
+
+ enqueueTaskImpl = nodeRequire.call(module, 'timers').setImmediate;
+ } catch (_err) {
+ // we're in a browser
+ // we can't use regular timers because they may still be faked
+ // so we try MessageChannel+postMessage instead
+ enqueueTaskImpl = function (callback) {
+ {
+ if (didWarnAboutMessageChannel === false) {
+ didWarnAboutMessageChannel = true;
- exports.Children = Children;
- exports.Component = Component;
- exports.PureComponent = PureComponent;
- exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = ReactSharedInternals;
- exports.cloneElement = cloneElement$1;
- exports.createContext = createContext;
- exports.createElement = createElement$1;
- exports.createFactory = createFactory;
- exports.createRef = createRef;
- exports.forwardRef = forwardRef;
- exports.isValidElement = isValidElement;
- exports.lazy = lazy;
- exports.memo = memo;
- exports.useCallback = useCallback;
- exports.useContext = useContext;
- exports.useDebugValue = useDebugValue;
+ if (typeof MessageChannel === 'undefined') {
+ error('This browser does not have a MessageChannel implementation, ' + 'so enqueuing tasks via await act(async () => ...) will fail. ' + 'Please file an issue at https://github.com/facebook/react/issues ' + 'if you encounter this warning.');
+ }
+ }
+ }
+
+ var channel = new MessageChannel();
+ channel.port1.onmessage = callback;
+ channel.port2.postMessage(undefined);
+ };
+ }
+ }
+
+ return enqueueTaskImpl(task);
+ }
+
+ var actScopeDepth = 0;
+ var didWarnNoAwaitAct = false;
+ function act(callback) {
+ {
+ // `act` calls can be nested, so we track the depth. This represents the
+ // number of `act` scopes on the stack.
+ var prevActScopeDepth = actScopeDepth;
+ actScopeDepth++;
+
+ if (ReactCurrentActQueue.current === null) {
+ // This is the outermost `act` scope. Initialize the queue. The reconciler
+ // will detect the queue and use it instead of Scheduler.
+ ReactCurrentActQueue.current = [];
+ }
+
+ var prevIsBatchingLegacy = ReactCurrentActQueue.isBatchingLegacy;
+ var result;
+
+ try {
+ // Used to reproduce behavior of `batchedUpdates` in legacy mode. Only
+ // set to `true` while the given callback is executed, not for updates
+ // triggered during an async event, because this is how the legacy
+ // implementation of `act` behaved.
+ ReactCurrentActQueue.isBatchingLegacy = true;
+ result = callback(); // Replicate behavior of original `act` implementation in legacy mode,
+ // which flushed updates immediately after the scope function exits, even
+ // if it's an async function.
+
+ if (!prevIsBatchingLegacy && ReactCurrentActQueue.didScheduleLegacyUpdate) {
+ var queue = ReactCurrentActQueue.current;
+
+ if (queue !== null) {
+ ReactCurrentActQueue.didScheduleLegacyUpdate = false;
+ flushActQueue(queue);
+ }
+ }
+ } catch (error) {
+ popActScope(prevActScopeDepth);
+ throw error;
+ } finally {
+ ReactCurrentActQueue.isBatchingLegacy = prevIsBatchingLegacy;
+ }
+
+ if (result !== null && typeof result === 'object' && typeof result.then === 'function') {
+ var thenableResult = result; // The callback is an async function (i.e. returned a promise). Wait
+ // for it to resolve before exiting the current scope.
+
+ var wasAwaited = false;
+ var thenable = {
+ then: function (resolve, reject) {
+ wasAwaited = true;
+ thenableResult.then(function (returnValue) {
+ popActScope(prevActScopeDepth);
+
+ if (actScopeDepth === 0) {
+ // We've exited the outermost act scope. Recursively flush the
+ // queue until there's no remaining work.
+ recursivelyFlushAsyncActWork(returnValue, resolve, reject);
+ } else {
+ resolve(returnValue);
+ }
+ }, function (error) {
+ // The callback threw an error.
+ popActScope(prevActScopeDepth);
+ reject(error);
+ });
+ }
+ };
+
+ {
+ if (!didWarnNoAwaitAct && typeof Promise !== 'undefined') {
+ // eslint-disable-next-line no-undef
+ Promise.resolve().then(function () {}).then(function () {
+ if (!wasAwaited) {
+ didWarnNoAwaitAct = true;
+
+ error('You called act(async () => ...) without await. ' + 'This could lead to unexpected testing behaviour, ' + 'interleaving multiple act calls and mixing their ' + 'scopes. ' + 'You should - await act(async () => ...);');
+ }
+ });
+ }
+ }
+
+ return thenable;
+ } else {
+ var returnValue = result; // The callback is not an async function. Exit the current scope
+ // immediately, without awaiting.
+
+ popActScope(prevActScopeDepth);
+
+ if (actScopeDepth === 0) {
+ // Exiting the outermost act scope. Flush the queue.
+ var _queue = ReactCurrentActQueue.current;
+
+ if (_queue !== null) {
+ flushActQueue(_queue);
+ ReactCurrentActQueue.current = null;
+ } // Return a thenable. If the user awaits it, we'll flush again in
+ // case additional work was scheduled by a microtask.
+
+
+ var _thenable = {
+ then: function (resolve, reject) {
+ // Confirm we haven't re-entered another `act` scope, in case
+ // the user does something weird like await the thenable
+ // multiple times.
+ if (ReactCurrentActQueue.current === null) {
+ // Recursively flush the queue until there's no remaining work.
+ ReactCurrentActQueue.current = [];
+ recursivelyFlushAsyncActWork(returnValue, resolve, reject);
+ } else {
+ resolve(returnValue);
+ }
+ }
+ };
+ return _thenable;
+ } else {
+ // Since we're inside a nested `act` scope, the returned thenable
+ // immediately resolves. The outer scope will flush the queue.
+ var _thenable2 = {
+ then: function (resolve, reject) {
+ resolve(returnValue);
+ }
+ };
+ return _thenable2;
+ }
+ }
+ }
+ }
+
+ function popActScope(prevActScopeDepth) {
+ {
+ if (prevActScopeDepth !== actScopeDepth - 1) {
+ error('You seem to have overlapping act() calls, this is not supported. ' + 'Be sure to await previous act() calls before making a new one. ');
+ }
+
+ actScopeDepth = prevActScopeDepth;
+ }
+ }
+
+ function recursivelyFlushAsyncActWork(returnValue, resolve, reject) {
+ {
+ var queue = ReactCurrentActQueue.current;
+
+ if (queue !== null) {
+ try {
+ flushActQueue(queue);
+ enqueueTask(function () {
+ if (queue.length === 0) {
+ // No additional work was scheduled. Finish.
+ ReactCurrentActQueue.current = null;
+ resolve(returnValue);
+ } else {
+ // Keep flushing work until there's none left.
+ recursivelyFlushAsyncActWork(returnValue, resolve, reject);
+ }
+ });
+ } catch (error) {
+ reject(error);
+ }
+ } else {
+ resolve(returnValue);
+ }
+ }
+ }
+
+ var isFlushing = false;
+
+ function flushActQueue(queue) {
+ {
+ if (!isFlushing) {
+ // Prevent re-entrance.
+ isFlushing = true;
+ var i = 0;
+
+ try {
+ for (; i < queue.length; i++) {
+ var callback = queue[i];
+
+ do {
+ callback = callback(true);
+ } while (callback !== null);
+ }
+
+ queue.length = 0;
+ } catch (error) {
+ // If something throws, leave the remaining callbacks on the queue.
+ queue = queue.slice(i + 1);
+ throw error;
+ } finally {
+ isFlushing = false;
+ }
+ }
+ }
+ }
+
+ var createElement$1 = createElementWithValidation ;
+ var cloneElement$1 = cloneElementWithValidation ;
+ var createFactory = createFactoryWithValidation ;
+ var Children = {
+ map: mapChildren,
+ forEach: forEachChildren,
+ count: countChildren,
+ toArray: toArray,
+ only: onlyChild
+ };
+
+ exports.Children = Children;
+ exports.Component = Component;
+ exports.Fragment = REACT_FRAGMENT_TYPE;
+ exports.Profiler = REACT_PROFILER_TYPE;
+ exports.PureComponent = PureComponent;
+ exports.StrictMode = REACT_STRICT_MODE_TYPE;
+ exports.Suspense = REACT_SUSPENSE_TYPE;
+ exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = ReactSharedInternals;
+ exports.act = act;
+ exports.cloneElement = cloneElement$1;
+ exports.createContext = createContext;
+ exports.createElement = createElement$1;
+ exports.createFactory = createFactory;
+ exports.createRef = createRef;
+ exports.forwardRef = forwardRef;
+ exports.isValidElement = isValidElement;
+ exports.lazy = lazy;
+ exports.memo = memo;
+ exports.startTransition = startTransition;
+ exports.unstable_act = act;
+ exports.useCallback = useCallback;
+ exports.useContext = useContext;
+ exports.useDebugValue = useDebugValue;
+ exports.useDeferredValue = useDeferredValue;
exports.useEffect = useEffect;
+ exports.useId = useId;
exports.useImperativeHandle = useImperativeHandle;
+ exports.useInsertionEffect = useInsertionEffect;
exports.useLayoutEffect = useLayoutEffect;
exports.useMemo = useMemo;
exports.useReducer = useReducer;
exports.useRef = useRef;
exports.useState = useState;
+ exports.useSyncExternalStore = useSyncExternalStore;
+ exports.useTransition = useTransition;
exports.version = ReactVersion;
+ /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
+ if (
+ typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
+ typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop ===
+ 'function'
+ ) {
+ __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
+ }
+
})();
}
-} (react_development));
- return react_development;
+} (react_development, react_developmentExports));
+ return react_developmentExports;
}
(function (module) {
@@ -6334,7 +6711,8 @@ function requireReact_development () {
}
} (react));
-/** @license React v17.0.2
+/**
+ * @license React
* react-jsx-runtime.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
@@ -6348,14 +6726,15 @@ var hasRequiredReactJsxRuntime_production_min;
function requireReactJsxRuntime_production_min () {
if (hasRequiredReactJsxRuntime_production_min) return reactJsxRuntime_production_min;
hasRequiredReactJsxRuntime_production_min = 1;
-requireObjectAssign();var f=reactExports,g=60103;reactJsxRuntime_production_min.Fragment=60107;if("function"===typeof Symbol&&Symbol.for){var h=Symbol.for;g=h("react.element");reactJsxRuntime_production_min.Fragment=h("react.fragment");}var m=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,n=Object.prototype.hasOwnProperty,p={key:!0,ref:!0,__self:!0,__source:!0};
- function q(c,a,k){var b,d={},e=null,l=null;void 0!==k&&(e=""+k);void 0!==a.key&&(e=""+a.key);void 0!==a.ref&&(l=a.ref);for(b in a)n.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a)void 0===d[b]&&(d[b]=a[b]);return {$$typeof:g,type:c,key:e,ref:l,props:d,_owner:m.current}}reactJsxRuntime_production_min.jsx=q;reactJsxRuntime_production_min.jsxs=q;
+var f=reactExports,k=Symbol.for("react.element"),l=Symbol.for("react.fragment"),m=Object.prototype.hasOwnProperty,n=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,p={key:!0,ref:!0,__self:!0,__source:!0};
+ function q(c,a,g){var b,d={},e=null,h=null;void 0!==g&&(e=""+g);void 0!==a.key&&(e=""+a.key);void 0!==a.ref&&(h=a.ref);for(b in a)m.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a)void 0===d[b]&&(d[b]=a[b]);return {$$typeof:k,type:c,key:e,ref:h,props:d,_owner:n.current}}reactJsxRuntime_production_min.Fragment=l;reactJsxRuntime_production_min.jsx=q;reactJsxRuntime_production_min.jsxs=q;
return reactJsxRuntime_production_min;
}
var reactJsxRuntime_development = {};
-/** @license React v17.0.2
+/**
+ * @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
@@ -6369,1215 +6748,1327 @@ var hasRequiredReactJsxRuntime_development;
function requireReactJsxRuntime_development () {
if (hasRequiredReactJsxRuntime_development) return reactJsxRuntime_development;
hasRequiredReactJsxRuntime_development = 1;
- (function (exports) {
- if (process.env.NODE_ENV !== "production") {
- (function() {
+ if (process.env.NODE_ENV !== "production") {
+ (function() {
+
+ var React = reactExports;
+
+ // ATTENTION
+ // When adding new symbols to this file,
+ // Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
+ // The Symbol used to tag the ReactElement-like types.
+ var REACT_ELEMENT_TYPE = Symbol.for('react.element');
+ var REACT_PORTAL_TYPE = Symbol.for('react.portal');
+ var REACT_FRAGMENT_TYPE = Symbol.for('react.fragment');
+ var REACT_STRICT_MODE_TYPE = Symbol.for('react.strict_mode');
+ var REACT_PROFILER_TYPE = Symbol.for('react.profiler');
+ var REACT_PROVIDER_TYPE = Symbol.for('react.provider');
+ var REACT_CONTEXT_TYPE = Symbol.for('react.context');
+ var REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref');
+ var REACT_SUSPENSE_TYPE = Symbol.for('react.suspense');
+ var REACT_SUSPENSE_LIST_TYPE = Symbol.for('react.suspense_list');
+ var REACT_MEMO_TYPE = Symbol.for('react.memo');
+ var REACT_LAZY_TYPE = Symbol.for('react.lazy');
+ var REACT_OFFSCREEN_TYPE = Symbol.for('react.offscreen');
+ var MAYBE_ITERATOR_SYMBOL = Symbol.iterator;
+ var FAUX_ITERATOR_SYMBOL = '@@iterator';
+ function getIteratorFn(maybeIterable) {
+ if (maybeIterable === null || typeof maybeIterable !== 'object') {
+ return null;
+ }
+
+ var maybeIterator = MAYBE_ITERATOR_SYMBOL && maybeIterable[MAYBE_ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL];
+
+ if (typeof maybeIterator === 'function') {
+ return maybeIterator;
+ }
+
+ return null;
+ }
- var React = reactExports;
- var _assign = requireObjectAssign();
+ var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
- // ATTENTION
- // When adding new symbols to this file,
- // Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
- // The Symbol used to tag the ReactElement-like types. If there is no native Symbol
- // nor polyfill, then a plain number is used for performance.
- var REACT_ELEMENT_TYPE = 0xeac7;
- var REACT_PORTAL_TYPE = 0xeaca;
- exports.Fragment = 0xeacb;
- var REACT_STRICT_MODE_TYPE = 0xeacc;
- var REACT_PROFILER_TYPE = 0xead2;
- var REACT_PROVIDER_TYPE = 0xeacd;
- var REACT_CONTEXT_TYPE = 0xeace;
- var REACT_FORWARD_REF_TYPE = 0xead0;
- var REACT_SUSPENSE_TYPE = 0xead1;
- var REACT_SUSPENSE_LIST_TYPE = 0xead8;
- var REACT_MEMO_TYPE = 0xead3;
- var REACT_LAZY_TYPE = 0xead4;
- var REACT_BLOCK_TYPE = 0xead9;
- var REACT_SERVER_BLOCK_TYPE = 0xeada;
- var REACT_FUNDAMENTAL_TYPE = 0xead5;
- var REACT_DEBUG_TRACING_MODE_TYPE = 0xeae1;
- var REACT_LEGACY_HIDDEN_TYPE = 0xeae3;
-
- if (typeof Symbol === 'function' && Symbol.for) {
- var symbolFor = Symbol.for;
- REACT_ELEMENT_TYPE = symbolFor('react.element');
- REACT_PORTAL_TYPE = symbolFor('react.portal');
- exports.Fragment = symbolFor('react.fragment');
- REACT_STRICT_MODE_TYPE = symbolFor('react.strict_mode');
- REACT_PROFILER_TYPE = symbolFor('react.profiler');
- REACT_PROVIDER_TYPE = symbolFor('react.provider');
- REACT_CONTEXT_TYPE = symbolFor('react.context');
- REACT_FORWARD_REF_TYPE = symbolFor('react.forward_ref');
- REACT_SUSPENSE_TYPE = symbolFor('react.suspense');
- REACT_SUSPENSE_LIST_TYPE = symbolFor('react.suspense_list');
- REACT_MEMO_TYPE = symbolFor('react.memo');
- REACT_LAZY_TYPE = symbolFor('react.lazy');
- REACT_BLOCK_TYPE = symbolFor('react.block');
- REACT_SERVER_BLOCK_TYPE = symbolFor('react.server.block');
- REACT_FUNDAMENTAL_TYPE = symbolFor('react.fundamental');
- symbolFor('react.scope');
- symbolFor('react.opaque.id');
- REACT_DEBUG_TRACING_MODE_TYPE = symbolFor('react.debug_trace_mode');
- symbolFor('react.offscreen');
- REACT_LEGACY_HIDDEN_TYPE = symbolFor('react.legacy_hidden');
- }
+ function error(format) {
+ {
+ {
+ for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+ args[_key2 - 1] = arguments[_key2];
+ }
- var MAYBE_ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
- var FAUX_ITERATOR_SYMBOL = '@@iterator';
- function getIteratorFn(maybeIterable) {
- if (maybeIterable === null || typeof maybeIterable !== 'object') {
- return null;
- }
+ printWarning('error', format, args);
+ }
+ }
+ }
- var maybeIterator = MAYBE_ITERATOR_SYMBOL && maybeIterable[MAYBE_ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL];
+ function printWarning(level, format, args) {
+ // When changing this logic, you might want to also
+ // update consoleWithStackDev.www.js as well.
+ {
+ var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
+ var stack = ReactDebugCurrentFrame.getStackAddendum();
- if (typeof maybeIterator === 'function') {
- return maybeIterator;
- }
+ if (stack !== '') {
+ format += '%s';
+ args = args.concat([stack]);
+ } // eslint-disable-next-line react-internal/safe-string-coercion
- return null;
- }
- var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+ var argsWithFormat = args.map(function (item) {
+ return String(item);
+ }); // Careful: RN currently depends on this prefix
- function error(format) {
- {
- for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
- args[_key2 - 1] = arguments[_key2];
- }
+ argsWithFormat.unshift('Warning: ' + format); // We intentionally don't use spread (or .apply) directly because it
+ // breaks IE9: https://github.com/facebook/react/issues/13610
+ // eslint-disable-next-line react-internal/no-production-logging
- printWarning('error', format, args);
- }
- }
+ Function.prototype.apply.call(console[level], console, argsWithFormat);
+ }
+ }
- function printWarning(level, format, args) {
- // When changing this logic, you might want to also
- // update consoleWithStackDev.www.js as well.
- {
- var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
- var stack = ReactDebugCurrentFrame.getStackAddendum();
+ // -----------------------------------------------------------------------------
- if (stack !== '') {
- format += '%s';
- args = args.concat([stack]);
- }
+ var enableScopeAPI = false; // Experimental Create Event Handle API.
+ var enableCacheElement = false;
+ var enableTransitionTracing = false; // No known bugs, but needs performance testing
- var argsWithFormat = args.map(function (item) {
- return '' + item;
- }); // Careful: RN currently depends on this prefix
+ var enableLegacyHidden = false; // Enables unstable_avoidThisFallback feature in Fiber
+ // stuff. Intended to enable React core members to more easily debug scheduling
+ // issues in DEV builds.
- argsWithFormat.unshift('Warning: ' + format); // We intentionally don't use spread (or .apply) directly because it
- // breaks IE9: https://github.com/facebook/react/issues/13610
- // eslint-disable-next-line react-internal/no-production-logging
+ var enableDebugTracing = false; // Track which Fiber(s) schedule render work.
- Function.prototype.apply.call(console[level], console, argsWithFormat);
- }
- }
+ var REACT_MODULE_REFERENCE;
- // Filter certain DOM attributes (e.g. src, href) if their values are empty strings.
+ {
+ REACT_MODULE_REFERENCE = Symbol.for('react.module.reference');
+ }
- var enableScopeAPI = false; // Experimental Create Event Handle API.
+ function isValidElementType(type) {
+ if (typeof type === 'string' || typeof type === 'function') {
+ return true;
+ } // Note: typeof might be other than 'symbol' or 'number' (e.g. if it's a polyfill).
- function isValidElementType(type) {
- if (typeof type === 'string' || typeof type === 'function') {
- return true;
- } // Note: typeof might be other than 'symbol' or 'number' (e.g. if it's a polyfill).
+ if (type === REACT_FRAGMENT_TYPE || type === REACT_PROFILER_TYPE || enableDebugTracing || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || enableLegacyHidden || type === REACT_OFFSCREEN_TYPE || enableScopeAPI || enableCacheElement || enableTransitionTracing ) {
+ return true;
+ }
- if (type === exports.Fragment || type === REACT_PROFILER_TYPE || type === REACT_DEBUG_TRACING_MODE_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || type === REACT_LEGACY_HIDDEN_TYPE || enableScopeAPI ) {
- return true;
- }
+ if (typeof type === 'object' && type !== null) {
+ if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || // This needs to include all possible module reference object
+ // types supported by any Flight configuration anywhere since
+ // we don't know which Flight build this will end up being used
+ // with.
+ type.$$typeof === REACT_MODULE_REFERENCE || type.getModuleId !== undefined) {
+ return true;
+ }
+ }
- if (typeof type === 'object' && type !== null) {
- if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_BLOCK_TYPE || type[0] === REACT_SERVER_BLOCK_TYPE) {
- return true;
- }
- }
+ return false;
+ }
- return false;
- }
+ function getWrappedName(outerType, innerType, wrapperName) {
+ var displayName = outerType.displayName;
- function getWrappedName(outerType, innerType, wrapperName) {
- var functionName = innerType.displayName || innerType.name || '';
- return outerType.displayName || (functionName !== '' ? wrapperName + "(" + functionName + ")" : wrapperName);
- }
+ if (displayName) {
+ return displayName;
+ }
- function getContextName(type) {
- return type.displayName || 'Context';
- }
+ var functionName = innerType.displayName || innerType.name || '';
+ return functionName !== '' ? wrapperName + "(" + functionName + ")" : wrapperName;
+ } // Keep in sync with react-reconciler/getComponentNameFromFiber
- function getComponentName(type) {
- if (type == null) {
- // Host root, text node or just invalid type.
- return null;
- }
- {
- if (typeof type.tag === 'number') {
- error('Received an unexpected object in getComponentName(). ' + 'This is likely a bug in React. Please file an issue.');
- }
- }
+ function getContextName(type) {
+ return type.displayName || 'Context';
+ } // Note that the reconciler package should generally prefer to use getComponentNameFromFiber() instead.
- if (typeof type === 'function') {
- return type.displayName || type.name || null;
- }
- if (typeof type === 'string') {
- return type;
- }
+ function getComponentNameFromType(type) {
+ if (type == null) {
+ // Host root, text node or just invalid type.
+ return null;
+ }
- switch (type) {
- case exports.Fragment:
- return 'Fragment';
+ {
+ if (typeof type.tag === 'number') {
+ error('Received an unexpected object in getComponentNameFromType(). ' + 'This is likely a bug in React. Please file an issue.');
+ }
+ }
- case REACT_PORTAL_TYPE:
- return 'Portal';
+ if (typeof type === 'function') {
+ return type.displayName || type.name || null;
+ }
- case REACT_PROFILER_TYPE:
- return 'Profiler';
+ if (typeof type === 'string') {
+ return type;
+ }
- case REACT_STRICT_MODE_TYPE:
- return 'StrictMode';
+ switch (type) {
+ case REACT_FRAGMENT_TYPE:
+ return 'Fragment';
- case REACT_SUSPENSE_TYPE:
- return 'Suspense';
+ case REACT_PORTAL_TYPE:
+ return 'Portal';
- case REACT_SUSPENSE_LIST_TYPE:
- return 'SuspenseList';
- }
+ case REACT_PROFILER_TYPE:
+ return 'Profiler';
- if (typeof type === 'object') {
- switch (type.$$typeof) {
- case REACT_CONTEXT_TYPE:
- var context = type;
- return getContextName(context) + '.Consumer';
+ case REACT_STRICT_MODE_TYPE:
+ return 'StrictMode';
- case REACT_PROVIDER_TYPE:
- var provider = type;
- return getContextName(provider._context) + '.Provider';
+ case REACT_SUSPENSE_TYPE:
+ return 'Suspense';
- case REACT_FORWARD_REF_TYPE:
- return getWrappedName(type, type.render, 'ForwardRef');
+ case REACT_SUSPENSE_LIST_TYPE:
+ return 'SuspenseList';
- case REACT_MEMO_TYPE:
- return getComponentName(type.type);
+ }
- case REACT_BLOCK_TYPE:
- return getComponentName(type._render);
+ if (typeof type === 'object') {
+ switch (type.$$typeof) {
+ case REACT_CONTEXT_TYPE:
+ var context = type;
+ return getContextName(context) + '.Consumer';
- case REACT_LAZY_TYPE:
- {
- var lazyComponent = type;
- var payload = lazyComponent._payload;
- var init = lazyComponent._init;
+ case REACT_PROVIDER_TYPE:
+ var provider = type;
+ return getContextName(provider._context) + '.Provider';
- try {
- return getComponentName(init(payload));
- } catch (x) {
- return null;
- }
- }
- }
- }
+ case REACT_FORWARD_REF_TYPE:
+ return getWrappedName(type, type.render, 'ForwardRef');
- return null;
- }
+ case REACT_MEMO_TYPE:
+ var outerName = type.displayName || null;
- // Helpers to patch console.logs to avoid logging during side-effect free
- // replaying on render function. This currently only patches the object
- // lazily which won't cover if the log function was extracted eagerly.
- // We could also eagerly patch the method.
- var disabledDepth = 0;
- var prevLog;
- var prevInfo;
- var prevWarn;
- var prevError;
- var prevGroup;
- var prevGroupCollapsed;
- var prevGroupEnd;
+ if (outerName !== null) {
+ return outerName;
+ }
- function disabledLog() {}
+ return getComponentNameFromType(type.type) || 'Memo';
- disabledLog.__reactDisabledLog = true;
- function disableLogs() {
- {
- if (disabledDepth === 0) {
- /* eslint-disable react-internal/no-production-logging */
- prevLog = console.log;
- prevInfo = console.info;
- prevWarn = console.warn;
- prevError = console.error;
- prevGroup = console.group;
- prevGroupCollapsed = console.groupCollapsed;
- prevGroupEnd = console.groupEnd; // https://github.com/facebook/react/issues/19099
+ case REACT_LAZY_TYPE:
+ {
+ var lazyComponent = type;
+ var payload = lazyComponent._payload;
+ var init = lazyComponent._init;
- var props = {
- configurable: true,
- enumerable: true,
- value: disabledLog,
- writable: true
- }; // $FlowFixMe Flow thinks console is immutable.
+ try {
+ return getComponentNameFromType(init(payload));
+ } catch (x) {
+ return null;
+ }
+ }
- Object.defineProperties(console, {
- info: props,
- log: props,
- warn: props,
- error: props,
- group: props,
- groupCollapsed: props,
- groupEnd: props
- });
- /* eslint-enable react-internal/no-production-logging */
- }
-
- disabledDepth++;
- }
- }
- function reenableLogs() {
- {
- disabledDepth--;
-
- if (disabledDepth === 0) {
- /* eslint-disable react-internal/no-production-logging */
- var props = {
- configurable: true,
- enumerable: true,
- writable: true
- }; // $FlowFixMe Flow thinks console is immutable.
-
- Object.defineProperties(console, {
- log: _assign({}, props, {
- value: prevLog
- }),
- info: _assign({}, props, {
- value: prevInfo
- }),
- warn: _assign({}, props, {
- value: prevWarn
- }),
- error: _assign({}, props, {
- value: prevError
- }),
- group: _assign({}, props, {
- value: prevGroup
- }),
- groupCollapsed: _assign({}, props, {
- value: prevGroupCollapsed
- }),
- groupEnd: _assign({}, props, {
- value: prevGroupEnd
- })
- });
- /* eslint-enable react-internal/no-production-logging */
- }
-
- if (disabledDepth < 0) {
- error('disabledDepth fell below zero. ' + 'This is a bug in React. Please file an issue.');
- }
- }
- }
-
- var ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
- var prefix;
- function describeBuiltInComponentFrame(name, source, ownerFn) {
- {
- if (prefix === undefined) {
- // Extract the VM specific prefix used by each line.
- try {
- throw Error();
- } catch (x) {
- var match = x.stack.trim().match(/\n( *(at )?)/);
- prefix = match && match[1] || '';
- }
- } // We use the prefix to ensure our stacks line up with native stack frames.
-
-
- return '\n' + prefix + name;
- }
- }
- var reentry = false;
- var componentFrameCache;
-
- {
- var PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;
- componentFrameCache = new PossiblyWeakMap();
- }
-
- function describeNativeComponentFrame(fn, construct) {
- // If something asked for a stack inside a fake render, it should get ignored.
- if (!fn || reentry) {
- return '';
- }
-
- {
- var frame = componentFrameCache.get(fn);
-
- if (frame !== undefined) {
- return frame;
- }
- }
-
- var control;
- reentry = true;
- var previousPrepareStackTrace = Error.prepareStackTrace; // $FlowFixMe It does accept undefined.
-
- Error.prepareStackTrace = undefined;
- var previousDispatcher;
-
- {
- previousDispatcher = ReactCurrentDispatcher.current; // Set the dispatcher in DEV because this might be call in the render function
- // for warnings.
-
- ReactCurrentDispatcher.current = null;
- disableLogs();
- }
-
- try {
- // This should throw.
- if (construct) {
- // Something should be setting the props in the constructor.
- var Fake = function () {
- throw Error();
- }; // $FlowFixMe
-
-
- Object.defineProperty(Fake.prototype, 'props', {
- set: function () {
- // We use a throwing setter instead of frozen or non-writable props
- // because that won't throw in a non-strict mode function.
- throw Error();
- }
- });
-
- if (typeof Reflect === 'object' && Reflect.construct) {
- // We construct a different control for this case to include any extra
- // frames added by the construct call.
- try {
- Reflect.construct(Fake, []);
- } catch (x) {
- control = x;
- }
+ // eslint-disable-next-line no-fallthrough
+ }
+ }
- Reflect.construct(fn, [], Fake);
- } else {
- try {
- Fake.call();
- } catch (x) {
- control = x;
- }
+ return null;
+ }
- fn.call(Fake.prototype);
- }
- } else {
- try {
- throw Error();
- } catch (x) {
- control = x;
- }
+ var assign = Object.assign;
+
+ // Helpers to patch console.logs to avoid logging during side-effect free
+ // replaying on render function. This currently only patches the object
+ // lazily which won't cover if the log function was extracted eagerly.
+ // We could also eagerly patch the method.
+ var disabledDepth = 0;
+ var prevLog;
+ var prevInfo;
+ var prevWarn;
+ var prevError;
+ var prevGroup;
+ var prevGroupCollapsed;
+ var prevGroupEnd;
+
+ function disabledLog() {}
+
+ disabledLog.__reactDisabledLog = true;
+ function disableLogs() {
+ {
+ if (disabledDepth === 0) {
+ /* eslint-disable react-internal/no-production-logging */
+ prevLog = console.log;
+ prevInfo = console.info;
+ prevWarn = console.warn;
+ prevError = console.error;
+ prevGroup = console.group;
+ prevGroupCollapsed = console.groupCollapsed;
+ prevGroupEnd = console.groupEnd; // https://github.com/facebook/react/issues/19099
+
+ var props = {
+ configurable: true,
+ enumerable: true,
+ value: disabledLog,
+ writable: true
+ }; // $FlowFixMe Flow thinks console is immutable.
+
+ Object.defineProperties(console, {
+ info: props,
+ log: props,
+ warn: props,
+ error: props,
+ group: props,
+ groupCollapsed: props,
+ groupEnd: props
+ });
+ /* eslint-enable react-internal/no-production-logging */
+ }
- fn();
- }
- } catch (sample) {
- // This is inlined manually because closure doesn't do it for us.
- if (sample && control && typeof sample.stack === 'string') {
- // This extracts the first frame from the sample that isn't also in the control.
- // Skipping one frame that we assume is the frame that calls the two.
- var sampleLines = sample.stack.split('\n');
- var controlLines = control.stack.split('\n');
- var s = sampleLines.length - 1;
- var c = controlLines.length - 1;
+ disabledDepth++;
+ }
+ }
+ function reenableLogs() {
+ {
+ disabledDepth--;
+
+ if (disabledDepth === 0) {
+ /* eslint-disable react-internal/no-production-logging */
+ var props = {
+ configurable: true,
+ enumerable: true,
+ writable: true
+ }; // $FlowFixMe Flow thinks console is immutable.
+
+ Object.defineProperties(console, {
+ log: assign({}, props, {
+ value: prevLog
+ }),
+ info: assign({}, props, {
+ value: prevInfo
+ }),
+ warn: assign({}, props, {
+ value: prevWarn
+ }),
+ error: assign({}, props, {
+ value: prevError
+ }),
+ group: assign({}, props, {
+ value: prevGroup
+ }),
+ groupCollapsed: assign({}, props, {
+ value: prevGroupCollapsed
+ }),
+ groupEnd: assign({}, props, {
+ value: prevGroupEnd
+ })
+ });
+ /* eslint-enable react-internal/no-production-logging */
+ }
- while (s >= 1 && c >= 0 && sampleLines[s] !== controlLines[c]) {
- // We expect at least one stack frame to be shared.
- // Typically this will be the root most one. However, stack frames may be
- // cut off due to maximum stack limits. In this case, one maybe cut off
- // earlier than the other. We assume that the sample is longer or the same
- // and there for cut off earlier. So we should find the root most frame in
- // the sample somewhere in the control.
- c--;
- }
+ if (disabledDepth < 0) {
+ error('disabledDepth fell below zero. ' + 'This is a bug in React. Please file an issue.');
+ }
+ }
+ }
- for (; s >= 1 && c >= 0; s--, c--) {
- // Next we find the first one that isn't the same which should be the
- // frame that called our sample function and the control.
- if (sampleLines[s] !== controlLines[c]) {
- // In V8, the first line is describing the message but other VMs don't.
- // If we're about to return the first line, and the control is also on the same
- // line, that's a pretty good indicator that our sample threw at same line as
- // the control. I.e. before we entered the sample frame. So we ignore this result.
- // This can happen if you passed a class to function component, or non-function.
- if (s !== 1 || c !== 1) {
- do {
- s--;
- c--; // We may still have similar intermediate frames from the construct call.
- // The next one that isn't the same should be our match though.
+ var ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
+ var prefix;
+ function describeBuiltInComponentFrame(name, source, ownerFn) {
+ {
+ if (prefix === undefined) {
+ // Extract the VM specific prefix used by each line.
+ try {
+ throw Error();
+ } catch (x) {
+ var match = x.stack.trim().match(/\n( *(at )?)/);
+ prefix = match && match[1] || '';
+ }
+ } // We use the prefix to ensure our stacks line up with native stack frames.
- if (c < 0 || sampleLines[s] !== controlLines[c]) {
- // V8 adds a "new" prefix for native classes. Let's remove it to make it prettier.
- var _frame = '\n' + sampleLines[s].replace(' at new ', ' at ');
- {
- if (typeof fn === 'function') {
- componentFrameCache.set(fn, _frame);
- }
- } // Return the line we found.
+ return '\n' + prefix + name;
+ }
+ }
+ var reentry = false;
+ var componentFrameCache;
+ {
+ var PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;
+ componentFrameCache = new PossiblyWeakMap();
+ }
- return _frame;
- }
- } while (s >= 1 && c >= 0);
- }
+ function describeNativeComponentFrame(fn, construct) {
+ // If something asked for a stack inside a fake render, it should get ignored.
+ if ( !fn || reentry) {
+ return '';
+ }
- break;
- }
- }
- }
- } finally {
- reentry = false;
+ {
+ var frame = componentFrameCache.get(fn);
- {
- ReactCurrentDispatcher.current = previousDispatcher;
- reenableLogs();
- }
+ if (frame !== undefined) {
+ return frame;
+ }
+ }
- Error.prepareStackTrace = previousPrepareStackTrace;
- } // Fallback to just using the name if we couldn't make it throw.
+ var control;
+ reentry = true;
+ var previousPrepareStackTrace = Error.prepareStackTrace; // $FlowFixMe It does accept undefined.
+ Error.prepareStackTrace = undefined;
+ var previousDispatcher;
- var name = fn ? fn.displayName || fn.name : '';
- var syntheticFrame = name ? describeBuiltInComponentFrame(name) : '';
+ {
+ previousDispatcher = ReactCurrentDispatcher.current; // Set the dispatcher in DEV because this might be call in the render function
+ // for warnings.
- {
- if (typeof fn === 'function') {
- componentFrameCache.set(fn, syntheticFrame);
- }
- }
+ ReactCurrentDispatcher.current = null;
+ disableLogs();
+ }
- return syntheticFrame;
- }
- function describeFunctionComponentFrame(fn, source, ownerFn) {
- {
- return describeNativeComponentFrame(fn, false);
- }
- }
+ try {
+ // This should throw.
+ if (construct) {
+ // Something should be setting the props in the constructor.
+ var Fake = function () {
+ throw Error();
+ }; // $FlowFixMe
- function shouldConstruct(Component) {
- var prototype = Component.prototype;
- return !!(prototype && prototype.isReactComponent);
- }
- function describeUnknownElementTypeFrameInDEV(type, source, ownerFn) {
+ Object.defineProperty(Fake.prototype, 'props', {
+ set: function () {
+ // We use a throwing setter instead of frozen or non-writable props
+ // because that won't throw in a non-strict mode function.
+ throw Error();
+ }
+ });
+
+ if (typeof Reflect === 'object' && Reflect.construct) {
+ // We construct a different control for this case to include any extra
+ // frames added by the construct call.
+ try {
+ Reflect.construct(Fake, []);
+ } catch (x) {
+ control = x;
+ }
- if (type == null) {
- return '';
- }
+ Reflect.construct(fn, [], Fake);
+ } else {
+ try {
+ Fake.call();
+ } catch (x) {
+ control = x;
+ }
- if (typeof type === 'function') {
- {
- return describeNativeComponentFrame(type, shouldConstruct(type));
- }
- }
+ fn.call(Fake.prototype);
+ }
+ } else {
+ try {
+ throw Error();
+ } catch (x) {
+ control = x;
+ }
- if (typeof type === 'string') {
- return describeBuiltInComponentFrame(type);
- }
+ fn();
+ }
+ } catch (sample) {
+ // This is inlined manually because closure doesn't do it for us.
+ if (sample && control && typeof sample.stack === 'string') {
+ // This extracts the first frame from the sample that isn't also in the control.
+ // Skipping one frame that we assume is the frame that calls the two.
+ var sampleLines = sample.stack.split('\n');
+ var controlLines = control.stack.split('\n');
+ var s = sampleLines.length - 1;
+ var c = controlLines.length - 1;
+
+ while (s >= 1 && c >= 0 && sampleLines[s] !== controlLines[c]) {
+ // We expect at least one stack frame to be shared.
+ // Typically this will be the root most one. However, stack frames may be
+ // cut off due to maximum stack limits. In this case, one maybe cut off
+ // earlier than the other. We assume that the sample is longer or the same
+ // and there for cut off earlier. So we should find the root most frame in
+ // the sample somewhere in the control.
+ c--;
+ }
- switch (type) {
- case REACT_SUSPENSE_TYPE:
- return describeBuiltInComponentFrame('Suspense');
+ for (; s >= 1 && c >= 0; s--, c--) {
+ // Next we find the first one that isn't the same which should be the
+ // frame that called our sample function and the control.
+ if (sampleLines[s] !== controlLines[c]) {
+ // In V8, the first line is describing the message but other VMs don't.
+ // If we're about to return the first line, and the control is also on the same
+ // line, that's a pretty good indicator that our sample threw at same line as
+ // the control. I.e. before we entered the sample frame. So we ignore this result.
+ // This can happen if you passed a class to function component, or non-function.
+ if (s !== 1 || c !== 1) {
+ do {
+ s--;
+ c--; // We may still have similar intermediate frames from the construct call.
+ // The next one that isn't the same should be our match though.
+
+ if (c < 0 || sampleLines[s] !== controlLines[c]) {
+ // V8 adds a "new" prefix for native classes. Let's remove it to make it prettier.
+ var _frame = '\n' + sampleLines[s].replace(' at new ', ' at '); // If our component frame is labeled "<anonymous>"
+ // but we have a user-provided "displayName"
+ // splice it in to make the stack more readable.
+
+
+ if (fn.displayName && _frame.includes('<anonymous>')) {
+ _frame = _frame.replace('<anonymous>', fn.displayName);
+ }
+
+ {
+ if (typeof fn === 'function') {
+ componentFrameCache.set(fn, _frame);
+ }
+ } // Return the line we found.
- case REACT_SUSPENSE_LIST_TYPE:
- return describeBuiltInComponentFrame('SuspenseList');
- }
- if (typeof type === 'object') {
- switch (type.$$typeof) {
- case REACT_FORWARD_REF_TYPE:
- return describeFunctionComponentFrame(type.render);
+ return _frame;
+ }
+ } while (s >= 1 && c >= 0);
+ }
- case REACT_MEMO_TYPE:
- // Memo may contain any component type so we recursively resolve it.
- return describeUnknownElementTypeFrameInDEV(type.type, source, ownerFn);
+ break;
+ }
+ }
+ }
+ } finally {
+ reentry = false;
- case REACT_BLOCK_TYPE:
- return describeFunctionComponentFrame(type._render);
+ {
+ ReactCurrentDispatcher.current = previousDispatcher;
+ reenableLogs();
+ }
- case REACT_LAZY_TYPE:
- {
- var lazyComponent = type;
- var payload = lazyComponent._payload;
- var init = lazyComponent._init;
+ Error.prepareStackTrace = previousPrepareStackTrace;
+ } // Fallback to just using the name if we couldn't make it throw.
- try {
- // Lazy may contain any component type so we recursively resolve it.
- return describeUnknownElementTypeFrameInDEV(init(payload), source, ownerFn);
- } catch (x) {}
- }
- }
- }
- return '';
- }
+ var name = fn ? fn.displayName || fn.name : '';
+ var syntheticFrame = name ? describeBuiltInComponentFrame(name) : '';
- var loggedTypeFailures = {};
- var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
+ {
+ if (typeof fn === 'function') {
+ componentFrameCache.set(fn, syntheticFrame);
+ }
+ }
- function setCurrentlyValidatingElement(element) {
- {
- if (element) {
- var owner = element._owner;
- var stack = describeUnknownElementTypeFrameInDEV(element.type, element._source, owner ? owner.type : null);
- ReactDebugCurrentFrame.setExtraStackFrame(stack);
- } else {
- ReactDebugCurrentFrame.setExtraStackFrame(null);
- }
- }
- }
+ return syntheticFrame;
+ }
+ function describeFunctionComponentFrame(fn, source, ownerFn) {
+ {
+ return describeNativeComponentFrame(fn, false);
+ }
+ }
- function checkPropTypes(typeSpecs, values, location, componentName, element) {
- {
- // $FlowFixMe This is okay but Flow doesn't know it.
- var has = Function.call.bind(Object.prototype.hasOwnProperty);
+ function shouldConstruct(Component) {
+ var prototype = Component.prototype;
+ return !!(prototype && prototype.isReactComponent);
+ }
- for (var typeSpecName in typeSpecs) {
- if (has(typeSpecs, typeSpecName)) {
- var error$1 = void 0; // Prop type validation may throw. In case they do, we don't want to
- // fail the render phase where it didn't fail before. So we log it.
- // After these have been cleaned up, we'll let them throw.
+ function describeUnknownElementTypeFrameInDEV(type, source, ownerFn) {
- try {
- // This is intentionally an invariant that gets caught. It's the same
- // behavior as without this statement except with a better message.
- if (typeof typeSpecs[typeSpecName] !== 'function') {
- var err = Error((componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' + 'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.' + 'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.');
- err.name = 'Invariant Violation';
- throw err;
- }
+ if (type == null) {
+ return '';
+ }
- error$1 = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED');
- } catch (ex) {
- error$1 = ex;
- }
+ if (typeof type === 'function') {
+ {
+ return describeNativeComponentFrame(type, shouldConstruct(type));
+ }
+ }
- if (error$1 && !(error$1 instanceof Error)) {
- setCurrentlyValidatingElement(element);
+ if (typeof type === 'string') {
+ return describeBuiltInComponentFrame(type);
+ }
- error('%s: type specification of %s' + ' `%s` is invalid; the type checker ' + 'function must return `null` or an `Error` but returned a %s. ' + 'You may have forgotten to pass an argument to the type checker ' + 'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' + 'shape all require an argument).', componentName || 'React class', location, typeSpecName, typeof error$1);
+ switch (type) {
+ case REACT_SUSPENSE_TYPE:
+ return describeBuiltInComponentFrame('Suspense');
- setCurrentlyValidatingElement(null);
- }
+ case REACT_SUSPENSE_LIST_TYPE:
+ return describeBuiltInComponentFrame('SuspenseList');
+ }
- if (error$1 instanceof Error && !(error$1.message in loggedTypeFailures)) {
- // Only monitor this failure once because there tends to be a lot of the
- // same error.
- loggedTypeFailures[error$1.message] = true;
- setCurrentlyValidatingElement(element);
+ if (typeof type === 'object') {
+ switch (type.$$typeof) {
+ case REACT_FORWARD_REF_TYPE:
+ return describeFunctionComponentFrame(type.render);
- error('Failed %s type: %s', location, error$1.message);
+ case REACT_MEMO_TYPE:
+ // Memo may contain any component type so we recursively resolve it.
+ return describeUnknownElementTypeFrameInDEV(type.type, source, ownerFn);
- setCurrentlyValidatingElement(null);
- }
- }
- }
- }
- }
+ case REACT_LAZY_TYPE:
+ {
+ var lazyComponent = type;
+ var payload = lazyComponent._payload;
+ var init = lazyComponent._init;
- var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
- var hasOwnProperty = Object.prototype.hasOwnProperty;
- var RESERVED_PROPS = {
- key: true,
- ref: true,
- __self: true,
- __source: true
- };
- var specialPropKeyWarningShown;
- var specialPropRefWarningShown;
- var didWarnAboutStringRefs;
+ try {
+ // Lazy may contain any component type so we recursively resolve it.
+ return describeUnknownElementTypeFrameInDEV(init(payload), source, ownerFn);
+ } catch (x) {}
+ }
+ }
+ }
- {
- didWarnAboutStringRefs = {};
- }
+ return '';
+ }
- function hasValidRef(config) {
- {
- if (hasOwnProperty.call(config, 'ref')) {
- var getter = Object.getOwnPropertyDescriptor(config, 'ref').get;
+ var hasOwnProperty = Object.prototype.hasOwnProperty;
- if (getter && getter.isReactWarning) {
- return false;
- }
- }
- }
+ var loggedTypeFailures = {};
+ var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
- return config.ref !== undefined;
- }
+ function setCurrentlyValidatingElement(element) {
+ {
+ if (element) {
+ var owner = element._owner;
+ var stack = describeUnknownElementTypeFrameInDEV(element.type, element._source, owner ? owner.type : null);
+ ReactDebugCurrentFrame.setExtraStackFrame(stack);
+ } else {
+ ReactDebugCurrentFrame.setExtraStackFrame(null);
+ }
+ }
+ }
- function hasValidKey(config) {
- {
- if (hasOwnProperty.call(config, 'key')) {
- var getter = Object.getOwnPropertyDescriptor(config, 'key').get;
+ function checkPropTypes(typeSpecs, values, location, componentName, element) {
+ {
+ // $FlowFixMe This is okay but Flow doesn't know it.
+ var has = Function.call.bind(hasOwnProperty);
+
+ for (var typeSpecName in typeSpecs) {
+ if (has(typeSpecs, typeSpecName)) {
+ var error$1 = void 0; // Prop type validation may throw. In case they do, we don't want to
+ // fail the render phase where it didn't fail before. So we log it.
+ // After these have been cleaned up, we'll let them throw.
+
+ try {
+ // This is intentionally an invariant that gets caught. It's the same
+ // behavior as without this statement except with a better message.
+ if (typeof typeSpecs[typeSpecName] !== 'function') {
+ // eslint-disable-next-line react-internal/prod-error-codes
+ var err = Error((componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' + 'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.' + 'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.');
+ err.name = 'Invariant Violation';
+ throw err;
+ }
- if (getter && getter.isReactWarning) {
- return false;
- }
- }
- }
+ error$1 = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED');
+ } catch (ex) {
+ error$1 = ex;
+ }
- return config.key !== undefined;
- }
+ if (error$1 && !(error$1 instanceof Error)) {
+ setCurrentlyValidatingElement(element);
- function warnIfStringRefCannotBeAutoConverted(config, self) {
- {
- if (typeof config.ref === 'string' && ReactCurrentOwner.current && self && ReactCurrentOwner.current.stateNode !== self) {
- var componentName = getComponentName(ReactCurrentOwner.current.type);
+ error('%s: type specification of %s' + ' `%s` is invalid; the type checker ' + 'function must return `null` or an `Error` but returned a %s. ' + 'You may have forgotten to pass an argument to the type checker ' + 'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' + 'shape all require an argument).', componentName || 'React class', location, typeSpecName, typeof error$1);
- if (!didWarnAboutStringRefs[componentName]) {
- error('Component "%s" contains the string ref "%s". ' + 'Support for string refs will be removed in a future major release. ' + 'This case cannot be automatically converted to an arrow function. ' + 'We ask you to manually fix this case by using useRef() or createRef() instead. ' + 'Learn more about using refs safely here: ' + 'https://reactjs.org/link/strict-mode-string-ref', getComponentName(ReactCurrentOwner.current.type), config.ref);
+ setCurrentlyValidatingElement(null);
+ }
- didWarnAboutStringRefs[componentName] = true;
- }
- }
- }
- }
+ if (error$1 instanceof Error && !(error$1.message in loggedTypeFailures)) {
+ // Only monitor this failure once because there tends to be a lot of the
+ // same error.
+ loggedTypeFailures[error$1.message] = true;
+ setCurrentlyValidatingElement(element);
- function defineKeyPropWarningGetter(props, displayName) {
- {
- var warnAboutAccessingKey = function () {
- if (!specialPropKeyWarningShown) {
- specialPropKeyWarningShown = true;
+ error('Failed %s type: %s', location, error$1.message);
- error('%s: `key` is not a prop. Trying to access it will result ' + 'in `undefined` being returned. If you need to access the same ' + 'value within the child component, you should pass it as a different ' + 'prop. (https://reactjs.org/link/special-props)', displayName);
- }
- };
+ setCurrentlyValidatingElement(null);
+ }
+ }
+ }
+ }
+ }
- warnAboutAccessingKey.isReactWarning = true;
- Object.defineProperty(props, 'key', {
- get: warnAboutAccessingKey,
- configurable: true
- });
- }
- }
+ var isArrayImpl = Array.isArray; // eslint-disable-next-line no-redeclare
- function defineRefPropWarningGetter(props, displayName) {
- {
- var warnAboutAccessingRef = function () {
- if (!specialPropRefWarningShown) {
- specialPropRefWarningShown = true;
+ function isArray(a) {
+ return isArrayImpl(a);
+ }
- error('%s: `ref` is not a prop. Trying to access it will result ' + 'in `undefined` being returned. If you need to access the same ' + 'value within the child component, you should pass it as a different ' + 'prop. (https://reactjs.org/link/special-props)', displayName);
- }
- };
+ /*
+ * The `'' + value` pattern (used in in perf-sensitive code) throws for Symbol
+ * and Temporal.* types. See https://github.com/facebook/react/pull/22064.
+ *
+ * The functions in this module will throw an easier-to-understand,
+ * easier-to-debug exception with a clear errors message message explaining the
+ * problem. (Instead of a confusing exception thrown inside the implementation
+ * of the `value` object).
+ */
+ // $FlowFixMe only called in DEV, so void return is not possible.
+ function typeName(value) {
+ {
+ // toStringTag is needed for namespaced types like Temporal.Instant
+ var hasToStringTag = typeof Symbol === 'function' && Symbol.toStringTag;
+ var type = hasToStringTag && value[Symbol.toStringTag] || value.constructor.name || 'Object';
+ return type;
+ }
+ } // $FlowFixMe only called in DEV, so void return is not possible.
+
+
+ function willCoercionThrow(value) {
+ {
+ try {
+ testStringCoercion(value);
+ return false;
+ } catch (e) {
+ return true;
+ }
+ }
+ }
- warnAboutAccessingRef.isReactWarning = true;
- Object.defineProperty(props, 'ref', {
- get: warnAboutAccessingRef,
- configurable: true
- });
- }
- }
- /**
- * Factory method to create a new React element. This no longer adheres to
- * the class pattern, so do not use new to call it. Also, instanceof check
- * will not work. Instead test $$typeof field against Symbol.for('react.element') to check
- * if something is a React Element.
- *
- * @param {*} type
- * @param {*} props
- * @param {*} key
- * @param {string|object} ref
- * @param {*} owner
- * @param {*} self A *temporary* helper to detect places where `this` is
- * different from the `owner` when React.createElement is called, so that we
- * can warn. We want to get rid of owner and replace string `ref`s with arrow
- * functions, and as long as `this` and owner are the same, there will be no
- * change in behavior.
- * @param {*} source An annotation object (added by a transpiler or otherwise)
- * indicating filename, line number, and/or other information.
- * @internal
- */
+ function testStringCoercion(value) {
+ // If you ended up here by following an exception call stack, here's what's
+ // happened: you supplied an object or symbol value to React (as a prop, key,
+ // DOM attribute, CSS property, string ref, etc.) and when React tried to
+ // coerce it to a string using `'' + value`, an exception was thrown.
+ //
+ // The most common types that will cause this exception are `Symbol` instances
+ // and Temporal objects like `Temporal.Instant`. But any object that has a
+ // `valueOf` or `[Symbol.toPrimitive]` method that throws will also cause this
+ // exception. (Library authors do this to prevent users from using built-in
+ // numeric operators like `+` or comparison operators like `>=` because custom
+ // methods are needed to perform accurate arithmetic or comparison.)
+ //
+ // To fix the problem, coerce this object or symbol value to a string before
+ // passing it to React. The most reliable way is usually `String(value)`.
+ //
+ // To find which value is throwing, check the browser or debugger console.
+ // Before this exception was thrown, there should be `console.error` output
+ // that shows the type (Symbol, Temporal.PlainDate, etc.) that caused the
+ // problem and how that type was used: key, atrribute, input value prop, etc.
+ // In most cases, this console output also shows the component and its
+ // ancestor components where the exception happened.
+ //
+ // eslint-disable-next-line react-internal/safe-string-coercion
+ return '' + value;
+ }
+ function checkKeyStringCoercion(value) {
+ {
+ if (willCoercionThrow(value)) {
+ error('The provided key is an unsupported type %s.' + ' This value must be coerced to a string before before using it here.', typeName(value));
+ return testStringCoercion(value); // throw (to help callers find troubleshooting comments)
+ }
+ }
+ }
- var ReactElement = function (type, key, ref, self, source, owner, props) {
- var element = {
- // This tag allows us to uniquely identify this as a React Element
- $$typeof: REACT_ELEMENT_TYPE,
- // Built-in properties that belong on the element
- type: type,
- key: key,
- ref: ref,
- props: props,
- // Record the component responsible for creating this element.
- _owner: owner
- };
+ var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
+ var RESERVED_PROPS = {
+ key: true,
+ ref: true,
+ __self: true,
+ __source: true
+ };
+ var specialPropKeyWarningShown;
+ var specialPropRefWarningShown;
+ var didWarnAboutStringRefs;
- {
- // The validation flag is currently mutative. We put it on
- // an external backing store so that we can freeze the whole object.
- // This can be replaced with a WeakMap once they are implemented in
- // commonly used development environments.
- element._store = {}; // To make comparing ReactElements easier for testing purposes, we make
- // the validation flag non-enumerable (where possible, which should
- // include every environment we run tests in), so the test framework
- // ignores it.
+ {
+ didWarnAboutStringRefs = {};
+ }
- Object.defineProperty(element._store, 'validated', {
- configurable: false,
- enumerable: false,
- writable: true,
- value: false
- }); // self and source are DEV only properties.
+ function hasValidRef(config) {
+ {
+ if (hasOwnProperty.call(config, 'ref')) {
+ var getter = Object.getOwnPropertyDescriptor(config, 'ref').get;
- Object.defineProperty(element, '_self', {
- configurable: false,
- enumerable: false,
- writable: false,
- value: self
- }); // Two elements created in two different places should be considered
- // equal for testing purposes and therefore we hide it from enumeration.
+ if (getter && getter.isReactWarning) {
+ return false;
+ }
+ }
+ }
- Object.defineProperty(element, '_source', {
- configurable: false,
- enumerable: false,
- writable: false,
- value: source
- });
+ return config.ref !== undefined;
+ }
- if (Object.freeze) {
- Object.freeze(element.props);
- Object.freeze(element);
- }
- }
+ function hasValidKey(config) {
+ {
+ if (hasOwnProperty.call(config, 'key')) {
+ var getter = Object.getOwnPropertyDescriptor(config, 'key').get;
- return element;
- };
- /**
- * https://github.com/reactjs/rfcs/pull/107
- * @param {*} type
- * @param {object} props
- * @param {string} key
- */
+ if (getter && getter.isReactWarning) {
+ return false;
+ }
+ }
+ }
- function jsxDEV(type, config, maybeKey, source, self) {
- {
- var propName; // Reserved names are extracted
-
- var props = {};
- var key = null;
- var ref = null; // Currently, key can be spread in as a prop. This causes a potential
- // issue if key is also explicitly declared (ie. <div {...props} key="Hi" />
- // or <div key="Hi" {...props} /> ). We want to deprecate key spread,
- // but as an intermediary step, we will use jsxDEV for everything except
- // <div {...props} key="Hi" />, because we aren't currently able to tell if
- // key is explicitly declared to be undefined or not.
-
- if (maybeKey !== undefined) {
- key = '' + maybeKey;
- }
+ return config.key !== undefined;
+ }
- if (hasValidKey(config)) {
- key = '' + config.key;
- }
+ function warnIfStringRefCannotBeAutoConverted(config, self) {
+ {
+ if (typeof config.ref === 'string' && ReactCurrentOwner.current && self && ReactCurrentOwner.current.stateNode !== self) {
+ var componentName = getComponentNameFromType(ReactCurrentOwner.current.type);
- if (hasValidRef(config)) {
- ref = config.ref;
- warnIfStringRefCannotBeAutoConverted(config, self);
- } // Remaining properties are added to a new props object
+ if (!didWarnAboutStringRefs[componentName]) {
+ error('Component "%s" contains the string ref "%s". ' + 'Support for string refs will be removed in a future major release. ' + 'This case cannot be automatically converted to an arrow function. ' + 'We ask you to manually fix this case by using useRef() or createRef() instead. ' + 'Learn more about using refs safely here: ' + 'https://reactjs.org/link/strict-mode-string-ref', getComponentNameFromType(ReactCurrentOwner.current.type), config.ref);
+ didWarnAboutStringRefs[componentName] = true;
+ }
+ }
+ }
+ }
- for (propName in config) {
- if (hasOwnProperty.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {
- props[propName] = config[propName];
- }
- } // Resolve default props
+ function defineKeyPropWarningGetter(props, displayName) {
+ {
+ var warnAboutAccessingKey = function () {
+ if (!specialPropKeyWarningShown) {
+ specialPropKeyWarningShown = true;
+ error('%s: `key` is not a prop. Trying to access it will result ' + 'in `undefined` being returned. If you need to access the same ' + 'value within the child component, you should pass it as a different ' + 'prop. (https://reactjs.org/link/special-props)', displayName);
+ }
+ };
- if (type && type.defaultProps) {
- var defaultProps = type.defaultProps;
+ warnAboutAccessingKey.isReactWarning = true;
+ Object.defineProperty(props, 'key', {
+ get: warnAboutAccessingKey,
+ configurable: true
+ });
+ }
+ }
- for (propName in defaultProps) {
- if (props[propName] === undefined) {
- props[propName] = defaultProps[propName];
- }
- }
- }
+ function defineRefPropWarningGetter(props, displayName) {
+ {
+ var warnAboutAccessingRef = function () {
+ if (!specialPropRefWarningShown) {
+ specialPropRefWarningShown = true;
- if (key || ref) {
- var displayName = typeof type === 'function' ? type.displayName || type.name || 'Unknown' : type;
+ error('%s: `ref` is not a prop. Trying to access it will result ' + 'in `undefined` being returned. If you need to access the same ' + 'value within the child component, you should pass it as a different ' + 'prop. (https://reactjs.org/link/special-props)', displayName);
+ }
+ };
- if (key) {
- defineKeyPropWarningGetter(props, displayName);
- }
+ warnAboutAccessingRef.isReactWarning = true;
+ Object.defineProperty(props, 'ref', {
+ get: warnAboutAccessingRef,
+ configurable: true
+ });
+ }
+ }
+ /**
+ * Factory method to create a new React element. This no longer adheres to
+ * the class pattern, so do not use new to call it. Also, instanceof check
+ * will not work. Instead test $$typeof field against Symbol.for('react.element') to check
+ * if something is a React Element.
+ *
+ * @param {*} type
+ * @param {*} props
+ * @param {*} key
+ * @param {string|object} ref
+ * @param {*} owner
+ * @param {*} self A *temporary* helper to detect places where `this` is
+ * different from the `owner` when React.createElement is called, so that we
+ * can warn. We want to get rid of owner and replace string `ref`s with arrow
+ * functions, and as long as `this` and owner are the same, there will be no
+ * change in behavior.
+ * @param {*} source An annotation object (added by a transpiler or otherwise)
+ * indicating filename, line number, and/or other information.
+ * @internal
+ */
+
+
+ var ReactElement = function (type, key, ref, self, source, owner, props) {
+ var element = {
+ // This tag allows us to uniquely identify this as a React Element
+ $$typeof: REACT_ELEMENT_TYPE,
+ // Built-in properties that belong on the element
+ type: type,
+ key: key,
+ ref: ref,
+ props: props,
+ // Record the component responsible for creating this element.
+ _owner: owner
+ };
+
+ {
+ // The validation flag is currently mutative. We put it on
+ // an external backing store so that we can freeze the whole object.
+ // This can be replaced with a WeakMap once they are implemented in
+ // commonly used development environments.
+ element._store = {}; // To make comparing ReactElements easier for testing purposes, we make
+ // the validation flag non-enumerable (where possible, which should
+ // include every environment we run tests in), so the test framework
+ // ignores it.
+
+ Object.defineProperty(element._store, 'validated', {
+ configurable: false,
+ enumerable: false,
+ writable: true,
+ value: false
+ }); // self and source are DEV only properties.
+
+ Object.defineProperty(element, '_self', {
+ configurable: false,
+ enumerable: false,
+ writable: false,
+ value: self
+ }); // Two elements created in two different places should be considered
+ // equal for testing purposes and therefore we hide it from enumeration.
+
+ Object.defineProperty(element, '_source', {
+ configurable: false,
+ enumerable: false,
+ writable: false,
+ value: source
+ });
+
+ if (Object.freeze) {
+ Object.freeze(element.props);
+ Object.freeze(element);
+ }
+ }
- if (ref) {
- defineRefPropWarningGetter(props, displayName);
- }
- }
+ return element;
+ };
+ /**
+ * https://github.com/reactjs/rfcs/pull/107
+ * @param {*} type
+ * @param {object} props
+ * @param {string} key
+ */
+
+ function jsxDEV(type, config, maybeKey, source, self) {
+ {
+ var propName; // Reserved names are extracted
+
+ var props = {};
+ var key = null;
+ var ref = null; // Currently, key can be spread in as a prop. This causes a potential
+ // issue if key is also explicitly declared (ie. <div {...props} key="Hi" />
+ // or <div key="Hi" {...props} /> ). We want to deprecate key spread,
+ // but as an intermediary step, we will use jsxDEV for everything except
+ // <div {...props} key="Hi" />, because we aren't currently able to tell if
+ // key is explicitly declared to be undefined or not.
+
+ if (maybeKey !== undefined) {
+ {
+ checkKeyStringCoercion(maybeKey);
+ }
- return ReactElement(type, key, ref, self, source, ReactCurrentOwner.current, props);
- }
- }
+ key = '' + maybeKey;
+ }
- var ReactCurrentOwner$1 = ReactSharedInternals.ReactCurrentOwner;
- var ReactDebugCurrentFrame$1 = ReactSharedInternals.ReactDebugCurrentFrame;
+ if (hasValidKey(config)) {
+ {
+ checkKeyStringCoercion(config.key);
+ }
- function setCurrentlyValidatingElement$1(element) {
- {
- if (element) {
- var owner = element._owner;
- var stack = describeUnknownElementTypeFrameInDEV(element.type, element._source, owner ? owner.type : null);
- ReactDebugCurrentFrame$1.setExtraStackFrame(stack);
- } else {
- ReactDebugCurrentFrame$1.setExtraStackFrame(null);
- }
- }
- }
+ key = '' + config.key;
+ }
+
+ if (hasValidRef(config)) {
+ ref = config.ref;
+ warnIfStringRefCannotBeAutoConverted(config, self);
+ } // Remaining properties are added to a new props object
+
+
+ for (propName in config) {
+ if (hasOwnProperty.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {
+ props[propName] = config[propName];
+ }
+ } // Resolve default props
+
+
+ if (type && type.defaultProps) {
+ var defaultProps = type.defaultProps;
+
+ for (propName in defaultProps) {
+ if (props[propName] === undefined) {
+ props[propName] = defaultProps[propName];
+ }
+ }
+ }
- var propTypesMisspellWarningShown;
+ if (key || ref) {
+ var displayName = typeof type === 'function' ? type.displayName || type.name || 'Unknown' : type;
- {
- propTypesMisspellWarningShown = false;
- }
- /**
- * Verifies the object is a ReactElement.
- * See https://reactjs.org/docs/react-api.html#isvalidelement
- * @param {?object} object
- * @return {boolean} True if `object` is a ReactElement.
- * @final
- */
+ if (key) {
+ defineKeyPropWarningGetter(props, displayName);
+ }
- function isValidElement(object) {
- {
- return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
- }
- }
+ if (ref) {
+ defineRefPropWarningGetter(props, displayName);
+ }
+ }
- function getDeclarationErrorAddendum() {
- {
- if (ReactCurrentOwner$1.current) {
- var name = getComponentName(ReactCurrentOwner$1.current.type);
+ return ReactElement(type, key, ref, self, source, ReactCurrentOwner.current, props);
+ }
+ }
- if (name) {
- return '\n\nCheck the render method of `' + name + '`.';
- }
- }
+ var ReactCurrentOwner$1 = ReactSharedInternals.ReactCurrentOwner;
+ var ReactDebugCurrentFrame$1 = ReactSharedInternals.ReactDebugCurrentFrame;
- return '';
- }
- }
+ function setCurrentlyValidatingElement$1(element) {
+ {
+ if (element) {
+ var owner = element._owner;
+ var stack = describeUnknownElementTypeFrameInDEV(element.type, element._source, owner ? owner.type : null);
+ ReactDebugCurrentFrame$1.setExtraStackFrame(stack);
+ } else {
+ ReactDebugCurrentFrame$1.setExtraStackFrame(null);
+ }
+ }
+ }
- function getSourceInfoErrorAddendum(source) {
- {
- if (source !== undefined) {
- var fileName = source.fileName.replace(/^.*[\\\/]/, '');
- var lineNumber = source.lineNumber;
- return '\n\nCheck your code at ' + fileName + ':' + lineNumber + '.';
- }
+ var propTypesMisspellWarningShown;
- return '';
- }
- }
- /**
- * Warn if there's no key explicitly set on dynamic arrays of children or
- * object keys are not valid. This allows us to keep track of children between
- * updates.
- */
+ {
+ propTypesMisspellWarningShown = false;
+ }
+ /**
+ * Verifies the object is a ReactElement.
+ * See https://reactjs.org/docs/react-api.html#isvalidelement
+ * @param {?object} object
+ * @return {boolean} True if `object` is a ReactElement.
+ * @final
+ */
+
+
+ function isValidElement(object) {
+ {
+ return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
+ }
+ }
+ function getDeclarationErrorAddendum() {
+ {
+ if (ReactCurrentOwner$1.current) {
+ var name = getComponentNameFromType(ReactCurrentOwner$1.current.type);
- var ownerHasKeyUseWarning = {};
+ if (name) {
+ return '\n\nCheck the render method of `' + name + '`.';
+ }
+ }
- function getCurrentComponentErrorInfo(parentType) {
- {
- var info = getDeclarationErrorAddendum();
+ return '';
+ }
+ }
- if (!info) {
- var parentName = typeof parentType === 'string' ? parentType : parentType.displayName || parentType.name;
+ function getSourceInfoErrorAddendum(source) {
+ {
+ if (source !== undefined) {
+ var fileName = source.fileName.replace(/^.*[\\\/]/, '');
+ var lineNumber = source.lineNumber;
+ return '\n\nCheck your code at ' + fileName + ':' + lineNumber + '.';
+ }
- if (parentName) {
- info = "\n\nCheck the top-level render call using <" + parentName + ">.";
- }
- }
+ return '';
+ }
+ }
+ /**
+ * Warn if there's no key explicitly set on dynamic arrays of children or
+ * object keys are not valid. This allows us to keep track of children between
+ * updates.
+ */
- return info;
- }
- }
- /**
- * Warn if the element doesn't have an explicit key assigned to it.
- * This element is in an array. The array could grow and shrink or be
- * reordered. All children that haven't already been validated are required to
- * have a "key" property assigned to it. Error statuses are cached so a warning
- * will only be shown once.
- *
- * @internal
- * @param {ReactElement} element Element that requires a key.
- * @param {*} parentType element's parent's type.
- */
+ var ownerHasKeyUseWarning = {};
- function validateExplicitKey(element, parentType) {
- {
- if (!element._store || element._store.validated || element.key != null) {
- return;
- }
+ function getCurrentComponentErrorInfo(parentType) {
+ {
+ var info = getDeclarationErrorAddendum();
- element._store.validated = true;
- var currentComponentErrorInfo = getCurrentComponentErrorInfo(parentType);
+ if (!info) {
+ var parentName = typeof parentType === 'string' ? parentType : parentType.displayName || parentType.name;
- if (ownerHasKeyUseWarning[currentComponentErrorInfo]) {
- return;
- }
+ if (parentName) {
+ info = "\n\nCheck the top-level render call using <" + parentName + ">.";
+ }
+ }
- ownerHasKeyUseWarning[currentComponentErrorInfo] = true; // Usually the current owner is the offender, but if it accepts children as a
- // property, it may be the creator of the child that's responsible for
- // assigning it a key.
+ return info;
+ }
+ }
+ /**
+ * Warn if the element doesn't have an explicit key assigned to it.
+ * This element is in an array. The array could grow and shrink or be
+ * reordered. All children that haven't already been validated are required to
+ * have a "key" property assigned to it. Error statuses are cached so a warning
+ * will only be shown once.
+ *
+ * @internal
+ * @param {ReactElement} element Element that requires a key.
+ * @param {*} parentType element's parent's type.
+ */
+
+
+ function validateExplicitKey(element, parentType) {
+ {
+ if (!element._store || element._store.validated || element.key != null) {
+ return;
+ }
- var childOwner = '';
+ element._store.validated = true;
+ var currentComponentErrorInfo = getCurrentComponentErrorInfo(parentType);
- if (element && element._owner && element._owner !== ReactCurrentOwner$1.current) {
- // Give the component that originally created this child.
- childOwner = " It was passed a child from " + getComponentName(element._owner.type) + ".";
- }
+ if (ownerHasKeyUseWarning[currentComponentErrorInfo]) {
+ return;
+ }
- setCurrentlyValidatingElement$1(element);
+ ownerHasKeyUseWarning[currentComponentErrorInfo] = true; // Usually the current owner is the offender, but if it accepts children as a
+ // property, it may be the creator of the child that's responsible for
+ // assigning it a key.
- error('Each child in a list should have a unique "key" prop.' + '%s%s See https://reactjs.org/link/warning-keys for more information.', currentComponentErrorInfo, childOwner);
+ var childOwner = '';
- setCurrentlyValidatingElement$1(null);
- }
- }
- /**
- * Ensure that every element either is passed in a static location, in an
- * array with an explicit keys property defined, or in an object literal
- * with valid key property.
- *
- * @internal
- * @param {ReactNode} node Statically passed child of any type.
- * @param {*} parentType node's parent's type.
- */
+ if (element && element._owner && element._owner !== ReactCurrentOwner$1.current) {
+ // Give the component that originally created this child.
+ childOwner = " It was passed a child from " + getComponentNameFromType(element._owner.type) + ".";
+ }
+ setCurrentlyValidatingElement$1(element);
- function validateChildKeys(node, parentType) {
- {
- if (typeof node !== 'object') {
- return;
- }
+ error('Each child in a list should have a unique "key" prop.' + '%s%s See https://reactjs.org/link/warning-keys for more information.', currentComponentErrorInfo, childOwner);
- if (Array.isArray(node)) {
- for (var i = 0; i < node.length; i++) {
- var child = node[i];
+ setCurrentlyValidatingElement$1(null);
+ }
+ }
+ /**
+ * Ensure that every element either is passed in a static location, in an
+ * array with an explicit keys property defined, or in an object literal
+ * with valid key property.
+ *
+ * @internal
+ * @param {ReactNode} node Statically passed child of any type.
+ * @param {*} parentType node's parent's type.
+ */
+
+
+ function validateChildKeys(node, parentType) {
+ {
+ if (typeof node !== 'object') {
+ return;
+ }
- if (isValidElement(child)) {
- validateExplicitKey(child, parentType);
- }
- }
- } else if (isValidElement(node)) {
- // This element was passed in a valid location.
- if (node._store) {
- node._store.validated = true;
- }
- } else if (node) {
- var iteratorFn = getIteratorFn(node);
-
- if (typeof iteratorFn === 'function') {
- // Entry iterators used to provide implicit keys,
- // but now we print a separate warning for them later.
- if (iteratorFn !== node.entries) {
- var iterator = iteratorFn.call(node);
- var step;
-
- while (!(step = iterator.next()).done) {
- if (isValidElement(step.value)) {
- validateExplicitKey(step.value, parentType);
- }
- }
- }
- }
- }
- }
- }
- /**
- * Given an element, validate that its props follow the propTypes definition,
- * provided by the type.
- *
- * @param {ReactElement} element
- */
+ if (isArray(node)) {
+ for (var i = 0; i < node.length; i++) {
+ var child = node[i];
+ if (isValidElement(child)) {
+ validateExplicitKey(child, parentType);
+ }
+ }
+ } else if (isValidElement(node)) {
+ // This element was passed in a valid location.
+ if (node._store) {
+ node._store.validated = true;
+ }
+ } else if (node) {
+ var iteratorFn = getIteratorFn(node);
+
+ if (typeof iteratorFn === 'function') {
+ // Entry iterators used to provide implicit keys,
+ // but now we print a separate warning for them later.
+ if (iteratorFn !== node.entries) {
+ var iterator = iteratorFn.call(node);
+ var step;
+
+ while (!(step = iterator.next()).done) {
+ if (isValidElement(step.value)) {
+ validateExplicitKey(step.value, parentType);
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ /**
+ * Given an element, validate that its props follow the propTypes definition,
+ * provided by the type.
+ *
+ * @param {ReactElement} element
+ */
- function validatePropTypes(element) {
- {
- var type = element.type;
- if (type === null || type === undefined || typeof type === 'string') {
- return;
- }
+ function validatePropTypes(element) {
+ {
+ var type = element.type;
- var propTypes;
+ if (type === null || type === undefined || typeof type === 'string') {
+ return;
+ }
- if (typeof type === 'function') {
- propTypes = type.propTypes;
- } else if (typeof type === 'object' && (type.$$typeof === REACT_FORWARD_REF_TYPE || // Note: Memo only checks outer props here.
- // Inner props are checked in the reconciler.
- type.$$typeof === REACT_MEMO_TYPE)) {
- propTypes = type.propTypes;
- } else {
- return;
- }
+ var propTypes;
- if (propTypes) {
- // Intentionally inside to avoid triggering lazy initializers:
- var name = getComponentName(type);
- checkPropTypes(propTypes, element.props, 'prop', name, element);
- } else if (type.PropTypes !== undefined && !propTypesMisspellWarningShown) {
- propTypesMisspellWarningShown = true; // Intentionally inside to avoid triggering lazy initializers:
+ if (typeof type === 'function') {
+ propTypes = type.propTypes;
+ } else if (typeof type === 'object' && (type.$$typeof === REACT_FORWARD_REF_TYPE || // Note: Memo only checks outer props here.
+ // Inner props are checked in the reconciler.
+ type.$$typeof === REACT_MEMO_TYPE)) {
+ propTypes = type.propTypes;
+ } else {
+ return;
+ }
- var _name = getComponentName(type);
+ if (propTypes) {
+ // Intentionally inside to avoid triggering lazy initializers:
+ var name = getComponentNameFromType(type);
+ checkPropTypes(propTypes, element.props, 'prop', name, element);
+ } else if (type.PropTypes !== undefined && !propTypesMisspellWarningShown) {
+ propTypesMisspellWarningShown = true; // Intentionally inside to avoid triggering lazy initializers:
- error('Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?', _name || 'Unknown');
- }
+ var _name = getComponentNameFromType(type);
- if (typeof type.getDefaultProps === 'function' && !type.getDefaultProps.isReactClassApproved) {
- error('getDefaultProps is only used on classic React.createClass ' + 'definitions. Use a static property named `defaultProps` instead.');
- }
- }
- }
- /**
- * Given a fragment, validate that it can only be provided with fragment props
- * @param {ReactElement} fragment
- */
+ error('Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?', _name || 'Unknown');
+ }
+ if (typeof type.getDefaultProps === 'function' && !type.getDefaultProps.isReactClassApproved) {
+ error('getDefaultProps is only used on classic React.createClass ' + 'definitions. Use a static property named `defaultProps` instead.');
+ }
+ }
+ }
+ /**
+ * Given a fragment, validate that it can only be provided with fragment props
+ * @param {ReactElement} fragment
+ */
- function validateFragmentProps(fragment) {
- {
- var keys = Object.keys(fragment.props);
- for (var i = 0; i < keys.length; i++) {
- var key = keys[i];
+ function validateFragmentProps(fragment) {
+ {
+ var keys = Object.keys(fragment.props);
- if (key !== 'children' && key !== 'key') {
- setCurrentlyValidatingElement$1(fragment);
+ for (var i = 0; i < keys.length; i++) {
+ var key = keys[i];
- error('Invalid prop `%s` supplied to `React.Fragment`. ' + 'React.Fragment can only have `key` and `children` props.', key);
+ if (key !== 'children' && key !== 'key') {
+ setCurrentlyValidatingElement$1(fragment);
- setCurrentlyValidatingElement$1(null);
- break;
- }
- }
+ error('Invalid prop `%s` supplied to `React.Fragment`. ' + 'React.Fragment can only have `key` and `children` props.', key);
- if (fragment.ref !== null) {
- setCurrentlyValidatingElement$1(fragment);
+ setCurrentlyValidatingElement$1(null);
+ break;
+ }
+ }
- error('Invalid attribute `ref` supplied to `React.Fragment`.');
+ if (fragment.ref !== null) {
+ setCurrentlyValidatingElement$1(fragment);
- setCurrentlyValidatingElement$1(null);
- }
- }
- }
+ error('Invalid attribute `ref` supplied to `React.Fragment`.');
- function jsxWithValidation(type, props, key, isStaticChildren, source, self) {
- {
- var validType = isValidElementType(type); // We warn in this case but don't throw. We expect the element creation to
- // succeed and there will likely be errors in render.
+ setCurrentlyValidatingElement$1(null);
+ }
+ }
+ }
- if (!validType) {
- var info = '';
+ var didWarnAboutKeySpread = {};
+ function jsxWithValidation(type, props, key, isStaticChildren, source, self) {
+ {
+ var validType = isValidElementType(type); // We warn in this case but don't throw. We expect the element creation to
+ // succeed and there will likely be errors in render.
- if (type === undefined || typeof type === 'object' && type !== null && Object.keys(type).length === 0) {
- info += ' You likely forgot to export your component from the file ' + "it's defined in, or you might have mixed up default and named imports.";
- }
+ if (!validType) {
+ var info = '';
- var sourceInfo = getSourceInfoErrorAddendum(source);
+ if (type === undefined || typeof type === 'object' && type !== null && Object.keys(type).length === 0) {
+ info += ' You likely forgot to export your component from the file ' + "it's defined in, or you might have mixed up default and named imports.";
+ }
- if (sourceInfo) {
- info += sourceInfo;
- } else {
- info += getDeclarationErrorAddendum();
- }
+ var sourceInfo = getSourceInfoErrorAddendum(source);
+
+ if (sourceInfo) {
+ info += sourceInfo;
+ } else {
+ info += getDeclarationErrorAddendum();
+ }
- var typeString;
+ var typeString;
+
+ if (type === null) {
+ typeString = 'null';
+ } else if (isArray(type)) {
+ typeString = 'array';
+ } else if (type !== undefined && type.$$typeof === REACT_ELEMENT_TYPE) {
+ typeString = "<" + (getComponentNameFromType(type.type) || 'Unknown') + " />";
+ info = ' Did you accidentally export a JSX literal instead of a component?';
+ } else {
+ typeString = typeof type;
+ }
- if (type === null) {
- typeString = 'null';
- } else if (Array.isArray(type)) {
- typeString = 'array';
- } else if (type !== undefined && type.$$typeof === REACT_ELEMENT_TYPE) {
- typeString = "<" + (getComponentName(type.type) || 'Unknown') + " />";
- info = ' Did you accidentally export a JSX literal instead of a component?';
- } else {
- typeString = typeof type;
- }
+ error('React.jsx: type is invalid -- expected a string (for ' + 'built-in components) or a class/function (for composite ' + 'components) but got: %s.%s', typeString, info);
+ }
- error('React.jsx: type is invalid -- expected a string (for ' + 'built-in components) or a class/function (for composite ' + 'components) but got: %s.%s', typeString, info);
- }
+ var element = jsxDEV(type, props, key, source, self); // The result can be nullish if a mock or a custom function is used.
+ // TODO: Drop this when these are no longer allowed as the type argument.
- var element = jsxDEV(type, props, key, source, self); // The result can be nullish if a mock or a custom function is used.
- // TODO: Drop this when these are no longer allowed as the type argument.
+ if (element == null) {
+ return element;
+ } // Skip key warning if the type isn't valid since our key validation logic
+ // doesn't expect a non-string/function type and can throw confusing errors.
+ // We don't want exception behavior to differ between dev and prod.
+ // (Rendering will throw with a helpful message and as soon as the type is
+ // fixed, the key warnings will appear.)
- if (element == null) {
- return element;
- } // Skip key warning if the type isn't valid since our key validation logic
- // doesn't expect a non-string/function type and can throw confusing errors.
- // We don't want exception behavior to differ between dev and prod.
- // (Rendering will throw with a helpful message and as soon as the type is
- // fixed, the key warnings will appear.)
+ if (validType) {
+ var children = props.children;
- if (validType) {
- var children = props.children;
+ if (children !== undefined) {
+ if (isStaticChildren) {
+ if (isArray(children)) {
+ for (var i = 0; i < children.length; i++) {
+ validateChildKeys(children[i], type);
+ }
- if (children !== undefined) {
- if (isStaticChildren) {
- if (Array.isArray(children)) {
- for (var i = 0; i < children.length; i++) {
- validateChildKeys(children[i], type);
- }
+ if (Object.freeze) {
+ Object.freeze(children);
+ }
+ } else {
+ error('React.jsx: Static children should always be an array. ' + 'You are likely explicitly calling React.jsxs or React.jsxDEV. ' + 'Use the Babel transform instead.');
+ }
+ } else {
+ validateChildKeys(children, type);
+ }
+ }
+ }
- if (Object.freeze) {
- Object.freeze(children);
- }
- } else {
- error('React.jsx: Static children should always be an array. ' + 'You are likely explicitly calling React.jsxs or React.jsxDEV. ' + 'Use the Babel transform instead.');
- }
- } else {
- validateChildKeys(children, type);
- }
- }
- }
+ {
+ if (hasOwnProperty.call(props, 'key')) {
+ var componentName = getComponentNameFromType(type);
+ var keys = Object.keys(props).filter(function (k) {
+ return k !== 'key';
+ });
+ var beforeExample = keys.length > 0 ? '{key: someKey, ' + keys.join(': ..., ') + ': ...}' : '{key: someKey}';
- if (type === exports.Fragment) {
- validateFragmentProps(element);
- } else {
- validatePropTypes(element);
- }
+ if (!didWarnAboutKeySpread[componentName + beforeExample]) {
+ var afterExample = keys.length > 0 ? '{' + keys.join(': ..., ') + ': ...}' : '{}';
- return element;
- }
- } // These two functions exist to still get child warnings in dev
- // even with the prod transform. This means that jsxDEV is purely
- // opt-in behavior for better messages but that we won't stop
- // giving you warnings if you use production apis.
+ error('A props object containing a "key" prop is being spread into JSX:\n' + ' let props = %s;\n' + ' <%s {...props} />\n' + 'React keys must be passed directly to JSX without using spread:\n' + ' let props = %s;\n' + ' <%s key={someKey} {...props} />', beforeExample, componentName, afterExample, componentName);
- function jsxWithValidationStatic(type, props, key) {
- {
- return jsxWithValidation(type, props, key, true);
- }
- }
- function jsxWithValidationDynamic(type, props, key) {
- {
- return jsxWithValidation(type, props, key, false);
- }
- }
+ didWarnAboutKeySpread[componentName + beforeExample] = true;
+ }
+ }
+ }
- var jsx = jsxWithValidationDynamic ; // we may want to special case jsxs internally to take advantage of static children.
- // for now we can ship identical prod functions
+ if (type === REACT_FRAGMENT_TYPE) {
+ validateFragmentProps(element);
+ } else {
+ validatePropTypes(element);
+ }
- var jsxs = jsxWithValidationStatic ;
+ return element;
+ }
+ } // These two functions exist to still get child warnings in dev
+ // even with the prod transform. This means that jsxDEV is purely
+ // opt-in behavior for better messages but that we won't stop
+ // giving you warnings if you use production apis.
+
+ function jsxWithValidationStatic(type, props, key) {
+ {
+ return jsxWithValidation(type, props, key, true);
+ }
+ }
+ function jsxWithValidationDynamic(type, props, key) {
+ {
+ return jsxWithValidation(type, props, key, false);
+ }
+ }
- exports.jsx = jsx;
- exports.jsxs = jsxs;
- })();
- }
-} (reactJsxRuntime_development));
+ var jsx = jsxWithValidationDynamic ; // we may want to special case jsxs internally to take advantage of static children.
+ // for now we can ship identical prod functions
+
+ var jsxs = jsxWithValidationStatic ;
+
+ reactJsxRuntime_development.Fragment = REACT_FRAGMENT_TYPE;
+ reactJsxRuntime_development.jsx = jsx;
+ reactJsxRuntime_development.jsxs = jsxs;
+ })();
+ }
return reactJsxRuntime_development;
}
@@ -7591,30 +8082,11 @@ function requireReactJsxRuntime_development () {
} (jsxRuntime));
var en = {};
+
var zh = {};
+
var de = {};
-var fr = {};
-var es = {};
-var it = {};
-var ar = {};
-var th = {};
-var vi = {};
-var ms = {};
-var id = {};
-var hi = {};
-var ta = {};
-var kn = {};
-var ml = {};
-var ru = {};
-var pl = {};
-var cs = {};
-var uk = {};
-var bg = {};
-var sr = {};
-var hr = {};
-var sk = {};
-var sl = {};
-var mk = {};
+
var pt = {};
// file examples: en, enGB, zh, zhHK
@@ -7624,28 +8096,6 @@ var localeData = /*#__PURE__*/Object.freeze({
en: en,
zh: zh,
de: de,
- fr: fr,
- es: es,
- it: it,
- ar: ar,
- th: th,
- vi: vi,
- ms: ms,
- id: id,
- hi: hi,
- ta: ta,
- kn: kn,
- ml: ml,
- ru: ru,
- pl: pl,
- cs: cs,
- uk: uk,
- bg: bg,
- sr: sr,
- hr: hr,
- sk: sk,
- sl: sl,
- mk: mk,
pt: pt
});
@@ -8139,6 +8589,27 @@ function parseNumberSkeleton(tokens) {
case 'scale':
result.scale = parseFloat(token.options[0]);
continue;
+ case 'rounding-mode-floor':
+ result.roundingMode = 'floor';
+ continue;
+ case 'rounding-mode-ceiling':
+ result.roundingMode = 'ceil';
+ continue;
+ case 'rounding-mode-down':
+ result.roundingMode = 'trunc';
+ continue;
+ case 'rounding-mode-up':
+ result.roundingMode = 'expand';
+ continue;
+ case 'rounding-mode-half-even':
+ result.roundingMode = 'halfEven';
+ continue;
+ case 'rounding-mode-half-down':
+ result.roundingMode = 'halfTrunc';
+ continue;
+ case 'rounding-mode-half-up':
+ result.roundingMode = 'halfExpand';
+ continue;
// https://unicode-org.github.io/icu/userguide/format_parse/numbers/skeletons.html#integer-width
case 'integer-width':
if (token.options.length > 1) {
@@ -11205,14 +11676,8 @@ originalMessage) {
}
var varName = el.value;
// Enforce that all required values are provided by the caller.
- var value = "";
if (!(values && varName in values)) {
- // throw new MissingValueError(varName, originalMessage);
- console.log("No value provided for the variable \"" + varName + "\". " + originalMessage);
- value = varName;
- }
- else {
- value = values[varName];
+ throw new MissingValueError(varName, originalMessage);
}
var value = values[varName];
if (isArgumentElement(el)) {
@@ -11463,8 +11928,7 @@ var IntlMessageFormat$1 = /** @class */ (function () {
this.ast = message;
}
if (!Array.isArray(this.ast)) {
- // throw new TypeError('A message must be provided as a String or AST.');
- console.log('Translator: A message must be provided as a String or AST.', this.ast);
+ throw new TypeError('A message must be provided as a String or AST.');
}
// Creates a new object with the specified `formats` merged with the default
// formats.
@@ -11567,17 +12031,16 @@ See the accompanying LICENSE file for terms.
*/
var IntlMessageFormat = IntlMessageFormat$1;
-var defaultLocale = "en";
+// this is a copy of the translator from ../../lib/index.js
+// TODO: check if this file is used at all
+var defaultLocale = "en";
var locales = [defaultLocale];
-
// Falk - Adapted the central translator to check if a localStorage key is existing.
-
-const uiLanguage = localStorage.getItem('lowcoder_uiLanguage');
-
+var uiLanguage = localStorage.getItem('lowcoder_uiLanguage');
if (globalThis.navigator) {
- if (uiLanguage) {
- locales = [uiLanguage];
- }
+ if (uiLanguage) {
+ locales = [uiLanguage];
+ }
else if (navigator.languages && navigator.languages.length > 0) {
locales = __spreadArray([], navigator.languages, true);
}
@@ -11585,7 +12048,6 @@ if (globalThis.navigator) {
locales = [navigator.language || navigator.userLanguage || defaultLocale];
}
}
-
function parseLocale(s) {
var locale = s.trim();
if (!locale) {
@@ -11646,8 +12108,9 @@ function getDataByLocale(fileData, suffix, filterLocales, targetLocales) {
}
}
console.error("Not found ".concat(names));
- // better to continue the app without crashing
- // throw new Error("Not found ".concat(names));
+ // return fallback data for en language
+ return { data: fileData['en'], language: 'en' };
+ // throw new Error(`Not found ${names}`);
}
var globalMessageKeyPrefix = "@";
var globalMessages = Object.fromEntries(Object.entries(getDataByLocale(localeData, "").data).map(function (_a) {
@@ -11677,11 +12140,19 @@ var Translator = /** @class */ (function () {
return node;
};
Translator.prototype.getMessage = function (key) {
- var value = this.messages[key];
- if (value !== undefined) {
- return value;
+ var message = this.getNestedMessage(this.messages, key);
+ // Fallback to English if the message is not found
+ if (message === undefined) {
+ message = this.getNestedMessage(en, key); // Assuming localeData.en contains English translations
+ }
+ // If still not found, return a default message or the key itself
+ if (message === undefined) {
+ console.warn("Translation missing for key: ".concat(key));
+ message = "oups! ".concat(key);
}
- var obj = this.messages;
+ return message;
+ };
+ Translator.prototype.getNestedMessage = function (obj, key) {
for (var _i = 0, _a = key.split("."); _i < _a.length; _i++) {
var k = _a[_i];
if (obj !== undefined) {
@@ -11693,7 +12164,8 @@ var Translator = /** @class */ (function () {
return Translator;
}());
function getI18nObjects(fileData, filterLocales) {
- return getDataByLocale(fileData, "Obj", filterLocales)?.data;
+ var _a;
+ return (_a = getDataByLocale(fileData, "Obj", filterLocales)) === null || _a === void 0 ? void 0 : _a.data;
}
exports.AbstractComp = AbstractComp;
diff --git a/client/packages/lowcoder-core/lib/index.d.ts b/client/packages/lowcoder-core/lib/index.d.ts
index ea81c29e7..368672adb 100644
--- a/client/packages/lowcoder-core/lib/index.d.ts
+++ b/client/packages/lowcoder-core/lib/index.d.ts
@@ -1,7 +1,7 @@
-// this is the tpyes file next to index.js
-
/// <reference types="react" />
-import React, { ReactNode } from 'react';
+import * as react from 'react';
+import { ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
type EvalMethods = Record<string, Record<string, Function>>;
type CodeType = undefined | "JSON" | "Function" | "PureJSON";
@@ -337,7 +337,7 @@ interface SandBoxOption {
declare function evalScript(script: string, context: any, methods?: EvalMethods): any;
declare function evalFunc(functionBody: string, context: any, methods?: EvalMethods, options?: SandBoxOption, isAsync?: boolean): any;
-declare function evalStyle(id: string, css: string[]): void;
+declare function evalStyle(id: string, css: string[], globalStyle?: boolean): void;
declare function clearStyleEval(id?: string): void;
declare class DefaultParser {
@@ -456,7 +456,7 @@ declare enum CompActionTypes {
* broadcast other actions in comp tree structure.
* used for encapsulate MultiBaseComp
*/
- BROADCAST = "BROADCAST",
+ BROADCAST = "BROADCAST"
}
type ExtraActionType = "layout" | "delete" | "add" | "modify" | "rename" | "recover" | "upgrade";
type ActionExtraInfo = {
@@ -650,9 +650,7 @@ declare const i18n: {
region?: string | undefined;
locales: string[];
};
-
declare function getValueByLocale<T>(defaultValue: T, func: (info: LocaleInfo) => T | undefined): T;
-
type AddDot<T extends string> = T extends "" ? "" : `.${T}`;
type ValidKey<T> = Exclude<keyof T, symbol>;
type NestedKey<T> = (T extends object ? {
@@ -662,18 +660,17 @@ type AddPrefix<T, P extends string> = {
[K in keyof T as K extends string ? `${P}${K}` : never]: T[K];
};
declare const globalMessages: AddPrefix<{}, "@">;
-
type GlobalMessageKey = NestedKey<typeof globalMessages>;
type VariableValue = string | number | boolean | Date | React.ReactNode;
-
declare class Translator<Messages extends object> {
private readonly messages;
readonly language: string;
constructor(fileData: object, filterLocales?: string, locales?: string[]);
trans(key: NestedKey<Messages> | GlobalMessageKey, variables?: Record<string, VariableValue>): string;
- transToNode(key: NestedKey<Messages> | GlobalMessageKey, variables?: Record<string, VariableValue>): ReactNode;
+ transToNode(key: NestedKey<Messages> | GlobalMessageKey, variables?: Record<string, VariableValue>): string | react.ReactElement<any, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | react_jsx_runtime.JSX.Element[];
private getMessage;
+ private getNestedMessage;
}
-declare function getI18nObjects<I18nObjects>(fileData: object, filterLocales?: string): I18nObjects;
+declare function getI18nObjects<I18nObjects>(fileData: object, filterLocales?: string): any;
export { AbstractComp, AbstractNode, ActionContextType, ActionExtraInfo, ActionPriority, BroadcastAction, CachedNode, ChangeValueAction, CodeFunction, CodeNode, CodeNodeOptions, CodeType, Comp, CompAction, CompActionTypes, CompConstructor, CompParams, ConstructorToComp, ConstructorToDataType, ConstructorToNodeType, ConstructorToView, CustomAction, DispatchType, EvalMethods, ExecuteQueryAction, ExtraActionType, ExtraNodeType, FetchCheckNode, FetchInfo, FetchInfoOptions, FunctionNode, MultiBaseComp, MultiChangeAction, MultiCompConstructor, Node, NodeToValue, OptionalComp, OptionalNodeType, RecordConstructorToComp, RecordConstructorToView, RecordNode, RecordNodeToValue, RecordOptionalNodeToValue, RelaxedJsonParser, RenameAction, ReplaceCompAction, RouteByNameAction, SimpleAbstractComp, SimpleComp, SimpleCompAction, SimpleNode, Translator, TriggerModuleEventAction, UpdateActionContextAction, UpdateNodesV2Action, ValueAndMsg, WrapContextFn, WrapContextNodeV2, WrapNode, changeChildAction, changeDependName, changeEditDSLAction, changeValueAction, clearMockWindow, clearStyleEval, customAction, deferAction, deleteCompAction, dependingNodeMapEquals, evalFunc, evalFunctionResult, evalNodeOrMinor, evalPerfUtil, evalScript, evalStyle, executeQueryAction, fromRecord, fromUnevaledValue, fromValue, fromValueWithCache, getDynamicStringSegments, getI18nObjects, getValueByLocale, i18n, isBroadcastAction, isChildAction, isCustomAction, isDynamicSegment, isFetching, isMyCustomAction, mergeExtra, multiChangeAction, nodeIsRecord, onlyEvalAction, relaxedJSONToJSON, renameAction, replaceCompAction, routeByNameAction, transformWrapper, triggerModuleEventAction, unwrapChildAction, updateActionContextAction, updateNodesV2Action, withFunction, wrapActionExtraInfo, wrapChildAction, wrapContext, wrapDispatch };
diff --git a/client/packages/lowcoder-core/lib/index.js b/client/packages/lowcoder-core/lib/index.js
index f2b298d74..942911d32 100644
--- a/client/packages/lowcoder-core/lib/index.js
+++ b/client/packages/lowcoder-core/lib/index.js
@@ -1,118 +1,118 @@
import _ from 'lodash';
import { serialize, compile, middleware, prefixer, stringify } from 'stylis';
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol */
-
-var extendStatics = function(d, b) {
- extendStatics = Object.setPrototypeOf ||
- ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
- function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
- return extendStatics(d, b);
-};
-
-function __extends(d, b) {
- if (typeof b !== "function" && b !== null)
- throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
- extendStatics(d, b);
- function __() { this.constructor = d; }
- d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-}
-
-var __assign = function() {
- __assign = Object.assign || function __assign(t) {
- for (var s, i = 1, n = arguments.length; i < n; i++) {
- s = arguments[i];
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
- }
- return t;
- };
- return __assign.apply(this, arguments);
-};
-
-function __rest(s, e) {
- var t = {};
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
- t[p] = s[p];
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
- t[p[i]] = s[p[i]];
- }
- return t;
-}
-
-function __decorate(decorators, target, key, desc) {
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
- else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
- return c > 3 && r && Object.defineProperty(target, key, r), r;
-}
-
-function __awaiter(thisArg, _arguments, P, generator) {
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
- return new (P || (P = Promise))(function (resolve, reject) {
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
- step((generator = generator.apply(thisArg, _arguments || [])).next());
- });
-}
-
-function __generator(thisArg, body) {
- var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
- return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
- function verb(n) { return function (v) { return step([n, v]); }; }
- function step(op) {
- if (f) throw new TypeError("Generator is already executing.");
- while (g && (g = 0, op[0] && (_ = 0)), _) try {
- if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
- if (y = 0, t) op = [op[0] & 2, t.value];
- switch (op[0]) {
- case 0: case 1: t = op; break;
- case 4: _.label++; return { value: op[1], done: false };
- case 5: _.label++; y = op[1]; op = [0]; continue;
- case 7: op = _.ops.pop(); _.trys.pop(); continue;
- default:
- if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
- if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
- if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
- if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
- if (t[2]) _.ops.pop();
- _.trys.pop(); continue;
- }
- op = body.call(thisArg, _);
- } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
- if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
- }
-}
-
-function __spreadArray(to, from, pack) {
- if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
- if (ar || !(i in from)) {
- if (!ar) ar = Array.prototype.slice.call(from, 0, i);
- ar[i] = from[i];
- }
- }
- return to.concat(ar || Array.prototype.slice.call(from));
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
- var e = new Error(message);
- return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
+var extendStatics = function(d, b) {
+ extendStatics = Object.setPrototypeOf ||
+ ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+ function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+ return extendStatics(d, b);
+};
+
+function __extends(d, b) {
+ if (typeof b !== "function" && b !== null)
+ throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+ extendStatics(d, b);
+ function __() { this.constructor = d; }
+ d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+}
+
+var __assign = function() {
+ __assign = Object.assign || function __assign(t) {
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
+ s = arguments[i];
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+ }
+ return t;
+ };
+ return __assign.apply(this, arguments);
+};
+
+function __rest(s, e) {
+ var t = {};
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+ t[p] = s[p];
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+ t[p[i]] = s[p[i]];
+ }
+ return t;
+}
+
+function __decorate(decorators, target, key, desc) {
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+ return new (P || (P = Promise))(function (resolve, reject) {
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
+ });
+}
+
+function __generator(thisArg, body) {
+ var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+ return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+ function verb(n) { return function (v) { return step([n, v]); }; }
+ function step(op) {
+ if (f) throw new TypeError("Generator is already executing.");
+ while (g && (g = 0, op[0] && (_ = 0)), _) try {
+ if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+ if (y = 0, t) op = [op[0] & 2, t.value];
+ switch (op[0]) {
+ case 0: case 1: t = op; break;
+ case 4: _.label++; return { value: op[1], done: false };
+ case 5: _.label++; y = op[1]; op = [0]; continue;
+ case 7: op = _.ops.pop(); _.trys.pop(); continue;
+ default:
+ if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+ if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+ if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+ if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+ if (t[2]) _.ops.pop();
+ _.trys.pop(); continue;
+ }
+ op = body.call(thisArg, _);
+ } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+ if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+ }
+}
+
+function __spreadArray(to, from, pack) {
+ if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+ if (ar || !(i in from)) {
+ if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+ ar[i] = from[i];
+ }
+ }
+ return to.concat(ar || Array.prototype.slice.call(from));
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+ var e = new Error(message);
+ return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
};
function isEqualArgs(args, cacheArgs, equals) {
@@ -791,6 +791,9 @@ var loglevel = {
"error"
];
+ var _loggersByName = {};
+ var defaultLogger = null;
+
// Cross-browser bind equivalent that works at least back to IE6
function bindMethod(obj, methodName) {
var method = obj[methodName];
@@ -843,25 +846,33 @@ var loglevel = {
// These private functions always need `this` to be set properly
- function replaceLoggingMethods(level, loggerName) {
+ function replaceLoggingMethods() {
/*jshint validthis:true */
+ var level = this.getLevel();
+
+ // Replace the actual methods.
for (var i = 0; i < logMethods.length; i++) {
var methodName = logMethods[i];
this[methodName] = (i < level) ?
noop :
- this.methodFactory(methodName, level, loggerName);
+ this.methodFactory(methodName, level, this.name);
}
// Define log.log as an alias for log.debug
this.log = this.debug;
+
+ // Return any important warnings.
+ if (typeof console === undefinedType && level < this.levels.SILENT) {
+ return "No console available for logging";
+ }
}
// In old IE versions, the console isn't present until you first open it.
// We build realMethod() replacements here that regenerate logging methods
- function enableLoggingWhenConsoleArrives(methodName, level, loggerName) {
+ function enableLoggingWhenConsoleArrives(methodName) {
return function () {
if (typeof console !== undefinedType) {
- replaceLoggingMethods.call(this, level, loggerName);
+ replaceLoggingMethods.call(this);
this[methodName].apply(this, arguments);
}
};
@@ -869,16 +880,36 @@ var loglevel = {
// By default, we use closely bound real methods wherever possible, and
// otherwise we wait for a console to appear, and then try again.
- function defaultMethodFactory(methodName, level, loggerName) {
+ function defaultMethodFactory(methodName, _level, _loggerName) {
/*jshint validthis:true */
return realMethod(methodName) ||
enableLoggingWhenConsoleArrives.apply(this, arguments);
}
- function Logger(name, defaultLevel, factory) {
+ function Logger(name, factory) {
+ // Private instance variables.
var self = this;
- var currentLevel;
- defaultLevel = defaultLevel == null ? "WARN" : defaultLevel;
+ /**
+ * The level inherited from a parent logger (or a global default). We
+ * cache this here rather than delegating to the parent so that it stays
+ * in sync with the actual logging methods that we have installed (the
+ * parent could change levels but we might not have rebuilt the loggers
+ * in this child yet).
+ * @type {number}
+ */
+ var inheritedLevel;
+ /**
+ * The default level for this logger, if any. If set, this overrides
+ * `inheritedLevel`.
+ * @type {number|null}
+ */
+ var defaultLevel;
+ /**
+ * A user-specific level for this logger. If set, this overrides
+ * `defaultLevel`.
+ * @type {number|null}
+ */
+ var userLevel;
var storageKey = "loglevel";
if (typeof name === "string") {
@@ -918,10 +949,12 @@ var loglevel = {
if (typeof storedLevel === undefinedType) {
try {
var cookie = window.document.cookie;
- var location = cookie.indexOf(
- encodeURIComponent(storageKey) + "=");
+ var cookieName = encodeURIComponent(storageKey);
+ var location = cookie.indexOf(cookieName + "=");
if (location !== -1) {
- storedLevel = /^([^;]+)/.exec(cookie.slice(location))[1];
+ storedLevel = /^([^;]+)/.exec(
+ cookie.slice(location + cookieName.length + 1)
+ )[1];
}
} catch (ignore) {}
}
@@ -940,7 +973,6 @@ var loglevel = {
// Use localStorage if available
try {
window.localStorage.removeItem(storageKey);
- return;
} catch (ignore) {}
// Use session cookie as fallback
@@ -950,6 +982,18 @@ var loglevel = {
} catch (ignore) {}
}
+ function normalizeLevel(input) {
+ var level = input;
+ if (typeof level === "string" && self.levels[level.toUpperCase()] !== undefined) {
+ level = self.levels[level.toUpperCase()];
+ }
+ if (typeof level === "number" && level >= 0 && level <= self.levels.SILENT) {
+ return level;
+ } else {
+ throw new TypeError("log.setLevel() called with invalid level: " + input);
+ }
+ }
+
/*
*
* Public logger API - see https://github.com/pimterry/loglevel for details
@@ -964,37 +1008,36 @@ var loglevel = {
self.methodFactory = factory || defaultMethodFactory;
self.getLevel = function () {
- return currentLevel;
+ if (userLevel != null) {
+ return userLevel;
+ } else if (defaultLevel != null) {
+ return defaultLevel;
+ } else {
+ return inheritedLevel;
+ }
};
self.setLevel = function (level, persist) {
- if (typeof level === "string" && self.levels[level.toUpperCase()] !== undefined) {
- level = self.levels[level.toUpperCase()];
- }
- if (typeof level === "number" && level >= 0 && level <= self.levels.SILENT) {
- currentLevel = level;
- if (persist !== false) { // defaults to true
- persistLevelIfPossible(level);
- }
- replaceLoggingMethods.call(self, level, name);
- if (typeof console === undefinedType && level < self.levels.SILENT) {
- return "No console available for logging";
- }
- } else {
- throw "log.setLevel() called with invalid level: " + level;
+ userLevel = normalizeLevel(level);
+ if (persist !== false) { // defaults to true
+ persistLevelIfPossible(userLevel);
}
+
+ // NOTE: in v2, this should call rebuild(), which updates children.
+ return replaceLoggingMethods.call(self);
};
self.setDefaultLevel = function (level) {
- defaultLevel = level;
+ defaultLevel = normalizeLevel(level);
if (!getPersistedLevel()) {
self.setLevel(level, false);
}
};
self.resetLevel = function () {
- self.setLevel(defaultLevel, false);
+ userLevel = null;
clearPersistedLevel();
+ replaceLoggingMethods.call(self);
};
self.enableAll = function(persist) {
@@ -1005,12 +1048,28 @@ var loglevel = {
self.setLevel(self.levels.SILENT, persist);
};
- // Initialize with the right level
+ self.rebuild = function () {
+ if (defaultLogger !== self) {
+ inheritedLevel = normalizeLevel(defaultLogger.getLevel());
+ }
+ replaceLoggingMethods.call(self);
+
+ if (defaultLogger === self) {
+ for (var childName in _loggersByName) {
+ _loggersByName[childName].rebuild();
+ }
+ }
+ };
+
+ // Initialize all the internal levels.
+ inheritedLevel = normalizeLevel(
+ defaultLogger ? defaultLogger.getLevel() : "WARN"
+ );
var initialLevel = getPersistedLevel();
- if (initialLevel == null) {
- initialLevel = defaultLevel;
+ if (initialLevel != null) {
+ userLevel = normalizeLevel(initialLevel);
}
- self.setLevel(initialLevel, false);
+ replaceLoggingMethods.call(self);
}
/*
@@ -1019,18 +1078,19 @@ var loglevel = {
*
*/
- var defaultLogger = new Logger();
+ defaultLogger = new Logger();
- var _loggersByName = {};
defaultLogger.getLogger = function getLogger(name) {
if ((typeof name !== "symbol" && typeof name !== "string") || name === "") {
- throw new TypeError("You must supply a name when creating a logger.");
+ throw new TypeError("You must supply a name when creating a logger.");
}
var logger = _loggersByName[name];
if (!logger) {
- logger = _loggersByName[name] = new Logger(
- name, defaultLogger.getLevel(), defaultLogger.methodFactory);
+ logger = _loggersByName[name] = new Logger(
+ name,
+ defaultLogger.methodFactory
+ );
}
return logger;
};
@@ -3259,15 +3319,16 @@ function transformWrapper(transformFn, defaultValue) {
function styleNamespace(id) {
return "style-for-".concat(id);
}
-function evalStyle(id, css) {
+function evalStyle(id, css, globalStyle) {
var _a;
var styleId = styleNamespace(id);
+ var prefixId = globalStyle ? id : "#".concat(id);
var compiledCSS = "";
css.forEach(function (i) {
if (!i.trim()) {
return;
}
- compiledCSS += serialize(compile("#".concat(id, "{").concat(i, "}")), middleware([prefixer, stringify]));
+ compiledCSS += serialize(compile("".concat(prefixId, "{").concat(i, "}")), middleware([prefixer, stringify]));
});
var styleNode = document.querySelector("#".concat(styleId));
if (!styleNode) {
@@ -3837,104 +3898,6 @@ var jsxRuntime = {
var reactJsxRuntime_production_min = {};
-/*
-object-assign
-(c) Sindre Sorhus
-@license MIT
-*/
-
-var objectAssign;
-var hasRequiredObjectAssign;
-
-function requireObjectAssign () {
- if (hasRequiredObjectAssign) return objectAssign;
- hasRequiredObjectAssign = 1;
- /* eslint-disable no-unused-vars */
- var getOwnPropertySymbols = Object.getOwnPropertySymbols;
- var hasOwnProperty = Object.prototype.hasOwnProperty;
- var propIsEnumerable = Object.prototype.propertyIsEnumerable;
-
- function toObject(val) {
- if (val === null || val === undefined) {
- throw new TypeError('Object.assign cannot be called with null or undefined');
- }
-
- return Object(val);
- }
-
- function shouldUseNative() {
- try {
- if (!Object.assign) {
- return false;
- }
-
- // Detect buggy property enumeration order in older V8 versions.
-
- // https://bugs.chromium.org/p/v8/issues/detail?id=4118
- var test1 = new String('abc'); // eslint-disable-line no-new-wrappers
- test1[5] = 'de';
- if (Object.getOwnPropertyNames(test1)[0] === '5') {
- return false;
- }
-
- // https://bugs.chromium.org/p/v8/issues/detail?id=3056
- var test2 = {};
- for (var i = 0; i < 10; i++) {
- test2['_' + String.fromCharCode(i)] = i;
- }
- var order2 = Object.getOwnPropertyNames(test2).map(function (n) {
- return test2[n];
- });
- if (order2.join('') !== '0123456789') {
- return false;
- }
-
- // https://bugs.chromium.org/p/v8/issues/detail?id=3056
- var test3 = {};
- 'abcdefghijklmnopqrst'.split('').forEach(function (letter) {
- test3[letter] = letter;
- });
- if (Object.keys(Object.assign({}, test3)).join('') !==
- 'abcdefghijklmnopqrst') {
- return false;
- }
-
- return true;
- } catch (err) {
- // We don't expect any of the above to throw, but better to be safe.
- return false;
- }
- }
-
- objectAssign = shouldUseNative() ? Object.assign : function (target, source) {
- var from;
- var to = toObject(target);
- var symbols;
-
- for (var s = 1; s < arguments.length; s++) {
- from = Object(arguments[s]);
-
- for (var key in from) {
- if (hasOwnProperty.call(from, key)) {
- to[key] = from[key];
- }
- }
-
- if (getOwnPropertySymbols) {
- symbols = getOwnPropertySymbols(from);
- for (var i = 0; i < symbols.length; i++) {
- if (propIsEnumerable.call(from, symbols[i])) {
- to[symbols[i]] = from[symbols[i]];
- }
- }
- }
- }
-
- return to;
- };
- return objectAssign;
-}
-
var reactExports = {};
var react = {
get exports(){ return reactExports; },
@@ -3943,7 +3906,8 @@ var react = {
var react_production_min = {};
-/** @license React v17.0.2
+/**
+ * @license React
* react.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
@@ -3957,27 +3921,34 @@ var hasRequiredReact_production_min;
function requireReact_production_min () {
if (hasRequiredReact_production_min) return react_production_min;
hasRequiredReact_production_min = 1;
-var l=requireObjectAssign(),n=60103,p=60106;react_production_min.Fragment=60107;react_production_min.StrictMode=60108;react_production_min.Profiler=60114;var q=60109,r=60110,t=60112;react_production_min.Suspense=60113;var u=60115,v=60116;
- if("function"===typeof Symbol&&Symbol.for){var w=Symbol.for;n=w("react.element");p=w("react.portal");react_production_min.Fragment=w("react.fragment");react_production_min.StrictMode=w("react.strict_mode");react_production_min.Profiler=w("react.profiler");q=w("react.provider");r=w("react.context");t=w("react.forward_ref");react_production_min.Suspense=w("react.suspense");u=w("react.memo");v=w("react.lazy");}var x="function"===typeof Symbol&&Symbol.iterator;
- function y(a){if(null===a||"object"!==typeof a)return null;a=x&&a[x]||a["@@iterator"];return "function"===typeof a?a:null}function z(a){for(var b="https://reactjs.org/docs/error-decoder.html?invariant="+a,c=1;c<arguments.length;c++)b+="&args[]="+encodeURIComponent(arguments[c]);return "Minified React error #"+a+"; visit "+b+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings."}
- var A={isMounted:function(){return !1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},B={};function C(a,b,c){this.props=a;this.context=b;this.refs=B;this.updater=c||A;}C.prototype.isReactComponent={};C.prototype.setState=function(a,b){if("object"!==typeof a&&"function"!==typeof a&&null!=a)throw Error(z(85));this.updater.enqueueSetState(this,a,b,"setState");};C.prototype.forceUpdate=function(a){this.updater.enqueueForceUpdate(this,a,"forceUpdate");};
- function D(){}D.prototype=C.prototype;function E(a,b,c){this.props=a;this.context=b;this.refs=B;this.updater=c||A;}var F=E.prototype=new D;F.constructor=E;l(F,C.prototype);F.isPureReactComponent=!0;var G={current:null},H=Object.prototype.hasOwnProperty,I={key:!0,ref:!0,__self:!0,__source:!0};
- function J(a,b,c){var e,d={},k=null,h=null;if(null!=b)for(e in void 0!==b.ref&&(h=b.ref),void 0!==b.key&&(k=""+b.key),b)H.call(b,e)&&!I.hasOwnProperty(e)&&(d[e]=b[e]);var g=arguments.length-2;if(1===g)d.children=c;else if(1<g){for(var f=Array(g),m=0;m<g;m++)f[m]=arguments[m+2];d.children=f;}if(a&&a.defaultProps)for(e in g=a.defaultProps,g)void 0===d[e]&&(d[e]=g[e]);return {$$typeof:n,type:a,key:k,ref:h,props:d,_owner:G.current}}
- function K(a,b){return {$$typeof:n,type:a.type,key:b,ref:a.ref,props:a.props,_owner:a._owner}}function L(a){return "object"===typeof a&&null!==a&&a.$$typeof===n}function escape(a){var b={"=":"=0",":":"=2"};return "$"+a.replace(/[=:]/g,function(a){return b[a]})}var M=/\/+/g;function N(a,b){return "object"===typeof a&&null!==a&&null!=a.key?escape(""+a.key):b.toString(36)}
- function O(a,b,c,e,d){var k=typeof a;if("undefined"===k||"boolean"===k)a=null;var h=!1;if(null===a)h=!0;else switch(k){case "string":case "number":h=!0;break;case "object":switch(a.$$typeof){case n:case p:h=!0;}}if(h)return h=a,d=d(h),a=""===e?"."+N(h,0):e,Array.isArray(d)?(c="",null!=a&&(c=a.replace(M,"$&/")+"/"),O(d,b,c,"",function(a){return a})):null!=d&&(L(d)&&(d=K(d,c+(!d.key||h&&h.key===d.key?"":(""+d.key).replace(M,"$&/")+"/")+a)),b.push(d)),1;h=0;e=""===e?".":e+":";if(Array.isArray(a))for(var g=
- 0;g<a.length;g++){k=a[g];var f=e+N(k,g);h+=O(k,b,c,f,d);}else if(f=y(a),"function"===typeof f)for(a=f.call(a),g=0;!(k=a.next()).done;)k=k.value,f=e+N(k,g++),h+=O(k,b,c,f,d);else if("object"===k)throw b=""+a,Error(z(31,"[object Object]"===b?"object with keys {"+Object.keys(a).join(", ")+"}":b));return h}function P(a,b,c){if(null==a)return a;var e=[],d=0;O(a,e,"","",function(a){return b.call(c,a,d++)});return e}
- function Q(a){if(-1===a._status){var b=a._result;b=b();a._status=0;a._result=b;b.then(function(b){0===a._status&&(b=b.default,a._status=1,a._result=b);},function(b){0===a._status&&(a._status=2,a._result=b);});}if(1===a._status)return a._result;throw a._result;}var R={current:null};function S(){var a=R.current;if(null===a)throw Error(z(321));return a}var T={ReactCurrentDispatcher:R,ReactCurrentBatchConfig:{transition:0},ReactCurrentOwner:G,IsSomeRendererActing:{current:!1},assign:l};
- react_production_min.Children={map:P,forEach:function(a,b,c){P(a,function(){b.apply(this,arguments);},c);},count:function(a){var b=0;P(a,function(){b++;});return b},toArray:function(a){return P(a,function(a){return a})||[]},only:function(a){if(!L(a))throw Error(z(143));return a}};react_production_min.Component=C;react_production_min.PureComponent=E;react_production_min.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=T;
- react_production_min.cloneElement=function(a,b,c){if(null===a||void 0===a)throw Error(z(267,a));var e=l({},a.props),d=a.key,k=a.ref,h=a._owner;if(null!=b){void 0!==b.ref&&(k=b.ref,h=G.current);void 0!==b.key&&(d=""+b.key);if(a.type&&a.type.defaultProps)var g=a.type.defaultProps;for(f in b)H.call(b,f)&&!I.hasOwnProperty(f)&&(e[f]=void 0===b[f]&&void 0!==g?g[f]:b[f]);}var f=arguments.length-2;if(1===f)e.children=c;else if(1<f){g=Array(f);for(var m=0;m<f;m++)g[m]=arguments[m+2];e.children=g;}return {$$typeof:n,type:a.type,
- key:d,ref:k,props:e,_owner:h}};react_production_min.createContext=function(a,b){void 0===b&&(b=null);a={$$typeof:r,_calculateChangedBits:b,_currentValue:a,_currentValue2:a,_threadCount:0,Provider:null,Consumer:null};a.Provider={$$typeof:q,_context:a};return a.Consumer=a};react_production_min.createElement=J;react_production_min.createFactory=function(a){var b=J.bind(null,a);b.type=a;return b};react_production_min.createRef=function(){return {current:null}};react_production_min.forwardRef=function(a){return {$$typeof:t,render:a}};react_production_min.isValidElement=L;
- react_production_min.lazy=function(a){return {$$typeof:v,_payload:{_status:-1,_result:a},_init:Q}};react_production_min.memo=function(a,b){return {$$typeof:u,type:a,compare:void 0===b?null:b}};react_production_min.useCallback=function(a,b){return S().useCallback(a,b)};react_production_min.useContext=function(a,b){return S().useContext(a,b)};react_production_min.useDebugValue=function(){};react_production_min.useEffect=function(a,b){return S().useEffect(a,b)};react_production_min.useImperativeHandle=function(a,b,c){return S().useImperativeHandle(a,b,c)};
- react_production_min.useLayoutEffect=function(a,b){return S().useLayoutEffect(a,b)};react_production_min.useMemo=function(a,b){return S().useMemo(a,b)};react_production_min.useReducer=function(a,b,c){return S().useReducer(a,b,c)};react_production_min.useRef=function(a){return S().useRef(a)};react_production_min.useState=function(a){return S().useState(a)};react_production_min.version="17.0.2";
+var l=Symbol.for("react.element"),n=Symbol.for("react.portal"),p=Symbol.for("react.fragment"),q=Symbol.for("react.strict_mode"),r=Symbol.for("react.profiler"),t=Symbol.for("react.provider"),u=Symbol.for("react.context"),v=Symbol.for("react.forward_ref"),w=Symbol.for("react.suspense"),x=Symbol.for("react.memo"),y=Symbol.for("react.lazy"),z=Symbol.iterator;function A(a){if(null===a||"object"!==typeof a)return null;a=z&&a[z]||a["@@iterator"];return "function"===typeof a?a:null}
+ var B={isMounted:function(){return !1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},C=Object.assign,D={};function E(a,b,e){this.props=a;this.context=b;this.refs=D;this.updater=e||B;}E.prototype.isReactComponent={};
+ E.prototype.setState=function(a,b){if("object"!==typeof a&&"function"!==typeof a&&null!=a)throw Error("setState(...): takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,a,b,"setState");};E.prototype.forceUpdate=function(a){this.updater.enqueueForceUpdate(this,a,"forceUpdate");};function F(){}F.prototype=E.prototype;function G(a,b,e){this.props=a;this.context=b;this.refs=D;this.updater=e||B;}var H=G.prototype=new F;
+ H.constructor=G;C(H,E.prototype);H.isPureReactComponent=!0;var I=Array.isArray,J=Object.prototype.hasOwnProperty,K={current:null},L={key:!0,ref:!0,__self:!0,__source:!0};
+ function M(a,b,e){var d,c={},k=null,h=null;if(null!=b)for(d in void 0!==b.ref&&(h=b.ref),void 0!==b.key&&(k=""+b.key),b)J.call(b,d)&&!L.hasOwnProperty(d)&&(c[d]=b[d]);var g=arguments.length-2;if(1===g)c.children=e;else if(1<g){for(var f=Array(g),m=0;m<g;m++)f[m]=arguments[m+2];c.children=f;}if(a&&a.defaultProps)for(d in g=a.defaultProps,g)void 0===c[d]&&(c[d]=g[d]);return {$$typeof:l,type:a,key:k,ref:h,props:c,_owner:K.current}}
+ function N(a,b){return {$$typeof:l,type:a.type,key:b,ref:a.ref,props:a.props,_owner:a._owner}}function O(a){return "object"===typeof a&&null!==a&&a.$$typeof===l}function escape(a){var b={"=":"=0",":":"=2"};return "$"+a.replace(/[=:]/g,function(a){return b[a]})}var P=/\/+/g;function Q(a,b){return "object"===typeof a&&null!==a&&null!=a.key?escape(""+a.key):b.toString(36)}
+ function R(a,b,e,d,c){var k=typeof a;if("undefined"===k||"boolean"===k)a=null;var h=!1;if(null===a)h=!0;else switch(k){case "string":case "number":h=!0;break;case "object":switch(a.$$typeof){case l:case n:h=!0;}}if(h)return h=a,c=c(h),a=""===d?"."+Q(h,0):d,I(c)?(e="",null!=a&&(e=a.replace(P,"$&/")+"/"),R(c,b,e,"",function(a){return a})):null!=c&&(O(c)&&(c=N(c,e+(!c.key||h&&h.key===c.key?"":(""+c.key).replace(P,"$&/")+"/")+a)),b.push(c)),1;h=0;d=""===d?".":d+":";if(I(a))for(var g=0;g<a.length;g++){k=
+ a[g];var f=d+Q(k,g);h+=R(k,b,e,f,c);}else if(f=A(a),"function"===typeof f)for(a=f.call(a),g=0;!(k=a.next()).done;)k=k.value,f=d+Q(k,g++),h+=R(k,b,e,f,c);else if("object"===k)throw b=String(a),Error("Objects are not valid as a React child (found: "+("[object Object]"===b?"object with keys {"+Object.keys(a).join(", ")+"}":b)+"). If you meant to render a collection of children, use an array instead.");return h}
+ function S(a,b,e){if(null==a)return a;var d=[],c=0;R(a,d,"","",function(a){return b.call(e,a,c++)});return d}function T(a){if(-1===a._status){var b=a._result;b=b();b.then(function(b){if(0===a._status||-1===a._status)a._status=1,a._result=b;},function(b){if(0===a._status||-1===a._status)a._status=2,a._result=b;});-1===a._status&&(a._status=0,a._result=b);}if(1===a._status)return a._result.default;throw a._result;}
+ var U={current:null},V={transition:null},W={ReactCurrentDispatcher:U,ReactCurrentBatchConfig:V,ReactCurrentOwner:K};function X(){throw Error("act(...) is not supported in production builds of React.");}
+ react_production_min.Children={map:S,forEach:function(a,b,e){S(a,function(){b.apply(this,arguments);},e);},count:function(a){var b=0;S(a,function(){b++;});return b},toArray:function(a){return S(a,function(a){return a})||[]},only:function(a){if(!O(a))throw Error("React.Children.only expected to receive a single React element child.");return a}};react_production_min.Component=E;react_production_min.Fragment=p;react_production_min.Profiler=r;react_production_min.PureComponent=G;react_production_min.StrictMode=q;react_production_min.Suspense=w;
+ react_production_min.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=W;react_production_min.act=X;
+ react_production_min.cloneElement=function(a,b,e){if(null===a||void 0===a)throw Error("React.cloneElement(...): The argument must be a React element, but you passed "+a+".");var d=C({},a.props),c=a.key,k=a.ref,h=a._owner;if(null!=b){void 0!==b.ref&&(k=b.ref,h=K.current);void 0!==b.key&&(c=""+b.key);if(a.type&&a.type.defaultProps)var g=a.type.defaultProps;for(f in b)J.call(b,f)&&!L.hasOwnProperty(f)&&(d[f]=void 0===b[f]&&void 0!==g?g[f]:b[f]);}var f=arguments.length-2;if(1===f)d.children=e;else if(1<f){g=Array(f);
+ for(var m=0;m<f;m++)g[m]=arguments[m+2];d.children=g;}return {$$typeof:l,type:a.type,key:c,ref:k,props:d,_owner:h}};react_production_min.createContext=function(a){a={$$typeof:u,_currentValue:a,_currentValue2:a,_threadCount:0,Provider:null,Consumer:null,_defaultValue:null,_globalName:null};a.Provider={$$typeof:t,_context:a};return a.Consumer=a};react_production_min.createElement=M;react_production_min.createFactory=function(a){var b=M.bind(null,a);b.type=a;return b};react_production_min.createRef=function(){return {current:null}};
+ react_production_min.forwardRef=function(a){return {$$typeof:v,render:a}};react_production_min.isValidElement=O;react_production_min.lazy=function(a){return {$$typeof:y,_payload:{_status:-1,_result:a},_init:T}};react_production_min.memo=function(a,b){return {$$typeof:x,type:a,compare:void 0===b?null:b}};react_production_min.startTransition=function(a){var b=V.transition;V.transition={};try{a();}finally{V.transition=b;}};react_production_min.unstable_act=X;react_production_min.useCallback=function(a,b){return U.current.useCallback(a,b)};react_production_min.useContext=function(a){return U.current.useContext(a)};
+ react_production_min.useDebugValue=function(){};react_production_min.useDeferredValue=function(a){return U.current.useDeferredValue(a)};react_production_min.useEffect=function(a,b){return U.current.useEffect(a,b)};react_production_min.useId=function(){return U.current.useId()};react_production_min.useImperativeHandle=function(a,b,e){return U.current.useImperativeHandle(a,b,e)};react_production_min.useInsertionEffect=function(a,b){return U.current.useInsertionEffect(a,b)};react_production_min.useLayoutEffect=function(a,b){return U.current.useLayoutEffect(a,b)};
+ react_production_min.useMemo=function(a,b){return U.current.useMemo(a,b)};react_production_min.useReducer=function(a,b,e){return U.current.useReducer(a,b,e)};react_production_min.useRef=function(a){return U.current.useRef(a)};react_production_min.useState=function(a){return U.current.useState(a)};react_production_min.useSyncExternalStore=function(a,b,e){return U.current.useSyncExternalStore(a,b,e)};react_production_min.useTransition=function(){return U.current.useTransition()};react_production_min.version="18.3.1";
return react_production_min;
}
-var react_development = {};
+var react_developmentExports = {};
+var react_development = {
+ get exports(){ return react_developmentExports; },
+ set exports(v){ react_developmentExports = v; },
+};
-/** @license React v17.0.2
+/**
+ * @license React
* react.development.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
@@ -3989,66 +3960,41 @@ var react_development = {};
var hasRequiredReact_development;
function requireReact_development () {
- if (hasRequiredReact_development) return react_development;
+ if (hasRequiredReact_development) return react_developmentExports;
hasRequiredReact_development = 1;
- (function (exports) {
+ (function (module, exports) {
if (process.env.NODE_ENV !== "production") {
(function() {
- var _assign = requireObjectAssign();
-
- // TODO: this is special because it gets imported during build.
- var ReactVersion = '17.0.2';
+ /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
+ if (
+ typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
+ typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart ===
+ 'function'
+ ) {
+ __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
+ }
+ var ReactVersion = '18.3.1';
// ATTENTION
// When adding new symbols to this file,
// Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
- // The Symbol used to tag the ReactElement-like types. If there is no native Symbol
- // nor polyfill, then a plain number is used for performance.
- var REACT_ELEMENT_TYPE = 0xeac7;
- var REACT_PORTAL_TYPE = 0xeaca;
- exports.Fragment = 0xeacb;
- exports.StrictMode = 0xeacc;
- exports.Profiler = 0xead2;
- var REACT_PROVIDER_TYPE = 0xeacd;
- var REACT_CONTEXT_TYPE = 0xeace;
- var REACT_FORWARD_REF_TYPE = 0xead0;
- exports.Suspense = 0xead1;
- var REACT_SUSPENSE_LIST_TYPE = 0xead8;
- var REACT_MEMO_TYPE = 0xead3;
- var REACT_LAZY_TYPE = 0xead4;
- var REACT_BLOCK_TYPE = 0xead9;
- var REACT_SERVER_BLOCK_TYPE = 0xeada;
- var REACT_FUNDAMENTAL_TYPE = 0xead5;
- var REACT_DEBUG_TRACING_MODE_TYPE = 0xeae1;
- var REACT_LEGACY_HIDDEN_TYPE = 0xeae3;
-
- if (typeof Symbol === 'function' && Symbol.for) {
- var symbolFor = Symbol.for;
- REACT_ELEMENT_TYPE = symbolFor('react.element');
- REACT_PORTAL_TYPE = symbolFor('react.portal');
- exports.Fragment = symbolFor('react.fragment');
- exports.StrictMode = symbolFor('react.strict_mode');
- exports.Profiler = symbolFor('react.profiler');
- REACT_PROVIDER_TYPE = symbolFor('react.provider');
- REACT_CONTEXT_TYPE = symbolFor('react.context');
- REACT_FORWARD_REF_TYPE = symbolFor('react.forward_ref');
- exports.Suspense = symbolFor('react.suspense');
- REACT_SUSPENSE_LIST_TYPE = symbolFor('react.suspense_list');
- REACT_MEMO_TYPE = symbolFor('react.memo');
- REACT_LAZY_TYPE = symbolFor('react.lazy');
- REACT_BLOCK_TYPE = symbolFor('react.block');
- REACT_SERVER_BLOCK_TYPE = symbolFor('react.server.block');
- REACT_FUNDAMENTAL_TYPE = symbolFor('react.fundamental');
- symbolFor('react.scope');
- symbolFor('react.opaque.id');
- REACT_DEBUG_TRACING_MODE_TYPE = symbolFor('react.debug_trace_mode');
- symbolFor('react.offscreen');
- REACT_LEGACY_HIDDEN_TYPE = symbolFor('react.legacy_hidden');
- }
-
- var MAYBE_ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
+ // The Symbol used to tag the ReactElement-like types.
+ var REACT_ELEMENT_TYPE = Symbol.for('react.element');
+ var REACT_PORTAL_TYPE = Symbol.for('react.portal');
+ var REACT_FRAGMENT_TYPE = Symbol.for('react.fragment');
+ var REACT_STRICT_MODE_TYPE = Symbol.for('react.strict_mode');
+ var REACT_PROFILER_TYPE = Symbol.for('react.profiler');
+ var REACT_PROVIDER_TYPE = Symbol.for('react.provider');
+ var REACT_CONTEXT_TYPE = Symbol.for('react.context');
+ var REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref');
+ var REACT_SUSPENSE_TYPE = Symbol.for('react.suspense');
+ var REACT_SUSPENSE_LIST_TYPE = Symbol.for('react.suspense_list');
+ var REACT_MEMO_TYPE = Symbol.for('react.memo');
+ var REACT_LAZY_TYPE = Symbol.for('react.lazy');
+ var REACT_OFFSCREEN_TYPE = Symbol.for('react.offscreen');
+ var MAYBE_ITERATOR_SYMBOL = Symbol.iterator;
var FAUX_ITERATOR_SYMBOL = '@@iterator';
function getIteratorFn(maybeIterable) {
if (maybeIterable === null || typeof maybeIterable !== 'object') {
@@ -4080,7 +4026,14 @@ function requireReact_development () {
* should suspend for if it needs to.
*/
var ReactCurrentBatchConfig = {
- transition: 0
+ transition: null
+ };
+
+ var ReactCurrentActQueue = {
+ current: null,
+ // Used to reproduce behavior of `batchedUpdates` in legacy mode.
+ isBatchingLegacy: false,
+ didScheduleLegacyUpdate: false
};
/**
@@ -4133,24 +4086,27 @@ function requireReact_development () {
};
}
- /**
- * Used by act() to track whether you're inside an act() scope.
- */
- var IsSomeRendererActing = {
- current: false
- };
+ // -----------------------------------------------------------------------------
+
+ var enableScopeAPI = false; // Experimental Create Event Handle API.
+ var enableCacheElement = false;
+ var enableTransitionTracing = false; // No known bugs, but needs performance testing
+
+ var enableLegacyHidden = false; // Enables unstable_avoidThisFallback feature in Fiber
+ // stuff. Intended to enable React core members to more easily debug scheduling
+ // issues in DEV builds.
+
+ var enableDebugTracing = false; // Track which Fiber(s) schedule render work.
var ReactSharedInternals = {
ReactCurrentDispatcher: ReactCurrentDispatcher,
ReactCurrentBatchConfig: ReactCurrentBatchConfig,
- ReactCurrentOwner: ReactCurrentOwner,
- IsSomeRendererActing: IsSomeRendererActing,
- // Used by renderers to avoid bundling object-assign twice in UMD bundles:
- assign: _assign
+ ReactCurrentOwner: ReactCurrentOwner
};
{
ReactSharedInternals.ReactDebugCurrentFrame = ReactDebugCurrentFrame;
+ ReactSharedInternals.ReactCurrentActQueue = ReactCurrentActQueue;
}
// by calls to these methods by a Babel plugin.
@@ -4160,20 +4116,24 @@ function requireReact_development () {
function warn(format) {
{
- for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
- args[_key - 1] = arguments[_key];
- }
+ {
+ for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+ args[_key - 1] = arguments[_key];
+ }
- printWarning('warn', format, args);
+ printWarning('warn', format, args);
+ }
}
}
function error(format) {
{
- for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
- args[_key2 - 1] = arguments[_key2];
- }
+ {
+ for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+ args[_key2 - 1] = arguments[_key2];
+ }
- printWarning('error', format, args);
+ printWarning('error', format, args);
+ }
}
}
@@ -4187,10 +4147,11 @@ function requireReact_development () {
if (stack !== '') {
format += '%s';
args = args.concat([stack]);
- }
+ } // eslint-disable-next-line react-internal/safe-string-coercion
+
var argsWithFormat = args.map(function (item) {
- return '' + item;
+ return String(item);
}); // Careful: RN currently depends on this prefix
argsWithFormat.unshift('Warning: ' + format); // We intentionally don't use spread (or .apply) directly because it
@@ -4288,6 +4249,8 @@ function requireReact_development () {
}
};
+ var assign = Object.assign;
+
var emptyObject = {};
{
@@ -4336,10 +4299,8 @@ function requireReact_development () {
*/
Component.prototype.setState = function (partialState, callback) {
- if (!(typeof partialState === 'object' || typeof partialState === 'function' || partialState == null)) {
- {
- throw Error( "setState(...): takes an object of state variables to update or a function which returns an object of state variables." );
- }
+ if (typeof partialState !== 'object' && typeof partialState !== 'function' && partialState != null) {
+ throw new Error('setState(...): takes an object of state variables to update or a ' + 'function which returns an object of state variables.');
}
this.updater.enqueueSetState(this, partialState, callback, 'setState');
@@ -4411,8 +4372,7 @@ function requireReact_development () {
var pureComponentPrototype = PureComponent.prototype = new ComponentDummy();
pureComponentPrototype.constructor = PureComponent; // Avoid an extra prototype jump for these methods.
- _assign(pureComponentPrototype, Component.prototype);
-
+ assign(pureComponentPrototype, Component.prototype);
pureComponentPrototype.isPureReactComponent = true;
// an immutable object with a single mutable value
@@ -4428,16 +4388,97 @@ function requireReact_development () {
return refObject;
}
+ var isArrayImpl = Array.isArray; // eslint-disable-next-line no-redeclare
+
+ function isArray(a) {
+ return isArrayImpl(a);
+ }
+
+ /*
+ * The `'' + value` pattern (used in in perf-sensitive code) throws for Symbol
+ * and Temporal.* types. See https://github.com/facebook/react/pull/22064.
+ *
+ * The functions in this module will throw an easier-to-understand,
+ * easier-to-debug exception with a clear errors message message explaining the
+ * problem. (Instead of a confusing exception thrown inside the implementation
+ * of the `value` object).
+ */
+ // $FlowFixMe only called in DEV, so void return is not possible.
+ function typeName(value) {
+ {
+ // toStringTag is needed for namespaced types like Temporal.Instant
+ var hasToStringTag = typeof Symbol === 'function' && Symbol.toStringTag;
+ var type = hasToStringTag && value[Symbol.toStringTag] || value.constructor.name || 'Object';
+ return type;
+ }
+ } // $FlowFixMe only called in DEV, so void return is not possible.
+
+
+ function willCoercionThrow(value) {
+ {
+ try {
+ testStringCoercion(value);
+ return false;
+ } catch (e) {
+ return true;
+ }
+ }
+ }
+
+ function testStringCoercion(value) {
+ // If you ended up here by following an exception call stack, here's what's
+ // happened: you supplied an object or symbol value to React (as a prop, key,
+ // DOM attribute, CSS property, string ref, etc.) and when React tried to
+ // coerce it to a string using `'' + value`, an exception was thrown.
+ //
+ // The most common types that will cause this exception are `Symbol` instances
+ // and Temporal objects like `Temporal.Instant`. But any object that has a
+ // `valueOf` or `[Symbol.toPrimitive]` method that throws will also cause this
+ // exception. (Library authors do this to prevent users from using built-in
+ // numeric operators like `+` or comparison operators like `>=` because custom
+ // methods are needed to perform accurate arithmetic or comparison.)
+ //
+ // To fix the problem, coerce this object or symbol value to a string before
+ // passing it to React. The most reliable way is usually `String(value)`.
+ //
+ // To find which value is throwing, check the browser or debugger console.
+ // Before this exception was thrown, there should be `console.error` output
+ // that shows the type (Symbol, Temporal.PlainDate, etc.) that caused the
+ // problem and how that type was used: key, atrribute, input value prop, etc.
+ // In most cases, this console output also shows the component and its
+ // ancestor components where the exception happened.
+ //
+ // eslint-disable-next-line react-internal/safe-string-coercion
+ return '' + value;
+ }
+ function checkKeyStringCoercion(value) {
+ {
+ if (willCoercionThrow(value)) {
+ error('The provided key is an unsupported type %s.' + ' This value must be coerced to a string before before using it here.', typeName(value));
+
+ return testStringCoercion(value); // throw (to help callers find troubleshooting comments)
+ }
+ }
+ }
+
function getWrappedName(outerType, innerType, wrapperName) {
+ var displayName = outerType.displayName;
+
+ if (displayName) {
+ return displayName;
+ }
+
var functionName = innerType.displayName || innerType.name || '';
- return outerType.displayName || (functionName !== '' ? wrapperName + "(" + functionName + ")" : wrapperName);
- }
+ return functionName !== '' ? wrapperName + "(" + functionName + ")" : wrapperName;
+ } // Keep in sync with react-reconciler/getComponentNameFromFiber
+
function getContextName(type) {
return type.displayName || 'Context';
- }
+ } // Note that the reconciler package should generally prefer to use getComponentNameFromFiber() instead.
- function getComponentName(type) {
+
+ function getComponentNameFromType(type) {
if (type == null) {
// Host root, text node or just invalid type.
return null;
@@ -4445,7 +4486,7 @@ function requireReact_development () {
{
if (typeof type.tag === 'number') {
- error('Received an unexpected object in getComponentName(). ' + 'This is likely a bug in React. Please file an issue.');
+ error('Received an unexpected object in getComponentNameFromType(). ' + 'This is likely a bug in React. Please file an issue.');
}
}
@@ -4458,23 +4499,24 @@ function requireReact_development () {
}
switch (type) {
- case exports.Fragment:
+ case REACT_FRAGMENT_TYPE:
return 'Fragment';
case REACT_PORTAL_TYPE:
return 'Portal';
- case exports.Profiler:
+ case REACT_PROFILER_TYPE:
return 'Profiler';
- case exports.StrictMode:
+ case REACT_STRICT_MODE_TYPE:
return 'StrictMode';
- case exports.Suspense:
+ case REACT_SUSPENSE_TYPE:
return 'Suspense';
case REACT_SUSPENSE_LIST_TYPE:
return 'SuspenseList';
+
}
if (typeof type === 'object') {
@@ -4491,10 +4533,13 @@ function requireReact_development () {
return getWrappedName(type, type.render, 'ForwardRef');
case REACT_MEMO_TYPE:
- return getComponentName(type.type);
+ var outerName = type.displayName || null;
+
+ if (outerName !== null) {
+ return outerName;
+ }
- case REACT_BLOCK_TYPE:
- return getComponentName(type._render);
+ return getComponentNameFromType(type.type) || 'Memo';
case REACT_LAZY_TYPE:
{
@@ -4503,11 +4548,13 @@ function requireReact_development () {
var init = lazyComponent._init;
try {
- return getComponentName(init(payload));
+ return getComponentNameFromType(init(payload));
} catch (x) {
return null;
}
}
+
+ // eslint-disable-next-line no-fallthrough
}
}
@@ -4515,6 +4562,7 @@ function requireReact_development () {
}
var hasOwnProperty = Object.prototype.hasOwnProperty;
+
var RESERVED_PROPS = {
key: true,
ref: true,
@@ -4594,7 +4642,7 @@ function requireReact_development () {
function warnIfStringRefCannotBeAutoConverted(config) {
{
if (typeof config.ref === 'string' && ReactCurrentOwner.current && config.__self && ReactCurrentOwner.current.stateNode !== config.__self) {
- var componentName = getComponentName(ReactCurrentOwner.current.type);
+ var componentName = getComponentNameFromType(ReactCurrentOwner.current.type);
if (!didWarnAboutStringRefs[componentName]) {
error('Component "%s" contains the string ref "%s". ' + 'Support for string refs will be removed in a future major release. ' + 'This case cannot be automatically converted to an arrow function. ' + 'We ask you to manually fix this case by using useRef() or createRef() instead. ' + 'Learn more about using refs safely here: ' + 'https://reactjs.org/link/strict-mode-string-ref', componentName, config.ref);
@@ -4703,6 +4751,10 @@ function requireReact_development () {
}
if (hasValidKey(config)) {
+ {
+ checkKeyStringCoercion(config.key);
+ }
+
key = '' + config.key;
}
@@ -4775,16 +4827,13 @@ function requireReact_development () {
*/
function cloneElement(element, config, children) {
- if (!!(element === null || element === undefined)) {
- {
- throw Error( "React.cloneElement(...): The argument must be a React element, but you passed " + element + "." );
- }
+ if (element === null || element === undefined) {
+ throw new Error("React.cloneElement(...): The argument must be a React element, but you passed " + element + ".");
}
var propName; // Original props are copied
- var props = _assign({}, element.props); // Reserved names are extracted
-
+ var props = assign({}, element.props); // Reserved names are extracted
var key = element.key;
var ref = element.ref; // Self is preserved since the owner is preserved.
@@ -4805,6 +4854,10 @@ function requireReact_development () {
}
if (hasValidKey(config)) {
+ {
+ checkKeyStringCoercion(config.key);
+ }
+
key = '' + config.key;
} // Remaining properties override existing props
@@ -4903,6 +4956,10 @@ function requireReact_development () {
// that we don't block potential future ES APIs.
if (typeof element === 'object' && element !== null && element.key != null) {
// Explicit key
+ {
+ checkKeyStringCoercion(element.key);
+ }
+
return escape('' + element.key);
} // Implicit key determined by the index in the set
@@ -4946,7 +5003,7 @@ function requireReact_development () {
var childKey = nameSoFar === '' ? SEPARATOR + getElementKey(_child, 0) : nameSoFar;
- if (Array.isArray(mappedChild)) {
+ if (isArray(mappedChild)) {
var escapedChildKey = '';
if (childKey != null) {
@@ -4958,10 +5015,20 @@ function requireReact_development () {
});
} else if (mappedChild != null) {
if (isValidElement(mappedChild)) {
+ {
+ // The `if` statement here prevents auto-disabling of the safe
+ // coercion ESLint rule, so we must manually disable it below.
+ // $FlowFixMe Flow incorrectly thinks React.Portal doesn't have a key
+ if (mappedChild.key && (!_child || _child.key !== mappedChild.key)) {
+ checkKeyStringCoercion(mappedChild.key);
+ }
+ }
+
mappedChild = cloneAndReplaceKey(mappedChild, // Keep both the (mapped) and old keys if they differ, just as
// traverseAllChildren used to do for objects as children
escapedPrefix + ( // $FlowFixMe Flow incorrectly thinks React.Portal doesn't have a key
mappedChild.key && (!_child || _child.key !== mappedChild.key) ? // $FlowFixMe Flow incorrectly thinks existing element's key can be a number
+ // eslint-disable-next-line react-internal/safe-string-coercion
escapeUserProvidedKey('' + mappedChild.key) + '/' : '') + childKey);
}
@@ -4977,7 +5044,7 @@ function requireReact_development () {
var nextNamePrefix = nameSoFar === '' ? SEPARATOR : nameSoFar + SUBSEPARATOR;
- if (Array.isArray(children)) {
+ if (isArray(children)) {
for (var i = 0; i < children.length; i++) {
child = children[i];
nextName = nextNamePrefix + getElementKey(child, i);
@@ -5010,13 +5077,9 @@ function requireReact_development () {
subtreeCount += mapIntoArray(child, array, escapedPrefix, nextName, callback);
}
} else if (type === 'object') {
- var childrenString = '' + children;
-
- {
- {
- throw Error( "Objects are not valid as a React child (found: " + (childrenString === '[object Object]' ? 'object with keys {' + Object.keys(children).join(', ') + '}' : childrenString) + "). If you meant to render a collection of children, use an array instead." );
- }
- }
+ // eslint-disable-next-line react-internal/safe-string-coercion
+ var childrenString = String(children);
+ throw new Error("Objects are not valid as a React child (found: " + (childrenString === '[object Object]' ? 'object with keys {' + Object.keys(children).join(', ') + '}' : childrenString) + "). " + 'If you meant to render a collection of children, use an array ' + 'instead.');
}
}
@@ -5115,28 +5178,17 @@ function requireReact_development () {
function onlyChild(children) {
if (!isValidElement(children)) {
- {
- throw Error( "React.Children.only expected to receive a single React element child." );
- }
+ throw new Error('React.Children.only expected to receive a single React element child.');
}
return children;
}
- function createContext(defaultValue, calculateChangedBits) {
- if (calculateChangedBits === undefined) {
- calculateChangedBits = null;
- } else {
- {
- if (calculateChangedBits !== null && typeof calculateChangedBits !== 'function') {
- error('createContext: Expected the optional second argument to be a ' + 'function. Instead received: %s', calculateChangedBits);
- }
- }
- }
-
+ function createContext(defaultValue) {
+ // TODO: Second argument used to be an optional `calculateChangedBits`
+ // function. Warn to reserve for future use?
var context = {
$$typeof: REACT_CONTEXT_TYPE,
- _calculateChangedBits: calculateChangedBits,
// As a workaround to support multiple concurrent renderers, we categorize
// some renderers as primary and others as secondary. We only expect
// there to be two concurrent renderers at most: React Native (primary) and
@@ -5149,7 +5201,10 @@ function requireReact_development () {
_threadCount: 0,
// These are circular
Provider: null,
- Consumer: null
+ Consumer: null,
+ // Add these to use same hidden class in VM as ServerContext
+ _defaultValue: null,
+ _globalName: null
};
context.Provider = {
$$typeof: REACT_PROVIDER_TYPE,
@@ -5165,8 +5220,7 @@ function requireReact_development () {
// warn for the incorrect usage of Context as a Consumer.
var Consumer = {
$$typeof: REACT_CONTEXT_TYPE,
- _context: context,
- _calculateChangedBits: context._calculateChangedBits
+ _context: context
}; // $FlowFixMe: Flow complains about not setting a value, which is intentional here
Object.defineProperties(Consumer, {
@@ -5253,38 +5307,54 @@ function requireReact_development () {
if (payload._status === Uninitialized) {
var ctor = payload._result;
var thenable = ctor(); // Transition to the next state.
+ // This might throw either because it's missing or throws. If so, we treat it
+ // as still uninitialized and try again next time. Which is the same as what
+ // happens if the ctor or any wrappers processing the ctor throws. This might
+ // end up fixing it if the resolution was a concurrency bug.
- var pending = payload;
- pending._status = Pending;
- pending._result = thenable;
thenable.then(function (moduleObject) {
- if (payload._status === Pending) {
- var defaultExport = moduleObject.default;
-
- {
- if (defaultExport === undefined) {
- error('lazy: Expected the result of a dynamic import() call. ' + 'Instead received: %s\n\nYour code should look like: \n ' + // Break up imports to avoid accidentally parsing them as dependencies.
- 'const MyComponent = lazy(() => imp' + "ort('./MyComponent'))", moduleObject);
- }
- } // Transition to the next state.
-
-
+ if (payload._status === Pending || payload._status === Uninitialized) {
+ // Transition to the next state.
var resolved = payload;
resolved._status = Resolved;
- resolved._result = defaultExport;
+ resolved._result = moduleObject;
}
}, function (error) {
- if (payload._status === Pending) {
+ if (payload._status === Pending || payload._status === Uninitialized) {
// Transition to the next state.
var rejected = payload;
rejected._status = Rejected;
rejected._result = error;
}
});
+
+ if (payload._status === Uninitialized) {
+ // In case, we're still uninitialized, then we're waiting for the thenable
+ // to resolve. Set it as pending in the meantime.
+ var pending = payload;
+ pending._status = Pending;
+ pending._result = thenable;
+ }
}
if (payload._status === Resolved) {
- return payload._result;
+ var moduleObject = payload._result;
+
+ {
+ if (moduleObject === undefined) {
+ error('lazy: Expected the result of a dynamic imp' + 'ort() call. ' + 'Instead received: %s\n\nYour code should look like: \n ' + // Break up imports to avoid accidentally parsing them as dependencies.
+ 'const MyComponent = lazy(() => imp' + "ort('./MyComponent'))\n\n" + 'Did you accidentally put curly braces around the import?', moduleObject);
+ }
+ }
+
+ {
+ if (!('default' in moduleObject)) {
+ error('lazy: Expected the result of a dynamic imp' + 'ort() call. ' + 'Instead received: %s\n\nYour code should look like: \n ' + // Break up imports to avoid accidentally parsing them as dependencies.
+ 'const MyComponent = lazy(() => imp' + "ort('./MyComponent'))", moduleObject);
+ }
+ }
+
+ return moduleObject.default;
} else {
throw payload._result;
}
@@ -5293,7 +5363,7 @@ function requireReact_development () {
function lazy(ctor) {
var payload = {
// We use these fields to store the result.
- _status: -1,
+ _status: Uninitialized,
_result: ctor
};
var lazyType = {
@@ -5379,9 +5449,15 @@ function requireReact_development () {
return ownName;
},
set: function (name) {
- ownName = name;
-
- if (render.displayName == null) {
+ ownName = name; // The inner component shouldn't inherit this display name in most cases,
+ // because the component may be used elsewhere.
+ // But it's nice for anonymous functions to inherit the name,
+ // so that our component-stack generation logic will display their frames.
+ // An anonymous function generally suggests a pattern like:
+ // React.forwardRef((props, ref) => {...});
+ // This kind of inner function is not used elsewhere so the side effect is okay.
+
+ if (!render.name && !render.displayName) {
render.displayName = name;
}
}
@@ -5391,9 +5467,11 @@ function requireReact_development () {
return elementType;
}
- // Filter certain DOM attributes (e.g. src, href) if their values are empty strings.
+ var REACT_MODULE_REFERENCE;
- var enableScopeAPI = false; // Experimental Create Event Handle API.
+ {
+ REACT_MODULE_REFERENCE = Symbol.for('react.module.reference');
+ }
function isValidElementType(type) {
if (typeof type === 'string' || typeof type === 'function') {
@@ -5401,12 +5479,16 @@ function requireReact_development () {
} // Note: typeof might be other than 'symbol' or 'number' (e.g. if it's a polyfill).
- if (type === exports.Fragment || type === exports.Profiler || type === REACT_DEBUG_TRACING_MODE_TYPE || type === exports.StrictMode || type === exports.Suspense || type === REACT_SUSPENSE_LIST_TYPE || type === REACT_LEGACY_HIDDEN_TYPE || enableScopeAPI ) {
+ if (type === REACT_FRAGMENT_TYPE || type === REACT_PROFILER_TYPE || enableDebugTracing || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || enableLegacyHidden || type === REACT_OFFSCREEN_TYPE || enableScopeAPI || enableCacheElement || enableTransitionTracing ) {
return true;
}
if (typeof type === 'object' && type !== null) {
- if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_BLOCK_TYPE || type[0] === REACT_SERVER_BLOCK_TYPE) {
+ if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || // This needs to include all possible module reference object
+ // types supported by any Flight configuration anywhere since
+ // we don't know which Flight build this will end up being used
+ // with.
+ type.$$typeof === REACT_MODULE_REFERENCE || type.getModuleId !== undefined) {
return true;
}
}
@@ -5436,9 +5518,15 @@ function requireReact_development () {
return ownName;
},
set: function (name) {
- ownName = name;
-
- if (type.displayName == null) {
+ ownName = name; // The inner component shouldn't inherit this display name in most cases,
+ // because the component may be used elsewhere.
+ // But it's nice for anonymous functions to inherit the name,
+ // so that our component-stack generation logic will display their frames.
+ // An anonymous function generally suggests a pattern like:
+ // React.memo((props) => {...});
+ // This kind of inner function is not used elsewhere so the side effect is okay.
+
+ if (!type.name && !type.displayName) {
type.displayName = name;
}
}
@@ -5451,24 +5539,22 @@ function requireReact_development () {
function resolveDispatcher() {
var dispatcher = ReactCurrentDispatcher.current;
- if (!(dispatcher !== null)) {
- {
- throw Error( "Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:\n1. You might have mismatching versions of React and the renderer (such as React DOM)\n2. You might be breaking the Rules of Hooks\n3. You might have more than one copy of React in the same app\nSee https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem." );
+ {
+ if (dispatcher === null) {
+ error('Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' + ' one of the following reasons:\n' + '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' + '2. You might be breaking the Rules of Hooks\n' + '3. You might have more than one copy of React in the same app\n' + 'See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.');
}
- }
+ } // Will result in a null access error if accessed outside render phase. We
+ // intentionally don't throw our own error because this is in a hot path.
+ // Also helps ensure this is inlined.
+
return dispatcher;
}
-
- function useContext(Context, unstable_observedBits) {
+ function useContext(Context) {
var dispatcher = resolveDispatcher();
{
- if (unstable_observedBits !== undefined) {
- error('useContext() second argument is reserved for future ' + 'use in React. Passing it is not supported. ' + 'You passed: %s.%s', unstable_observedBits, typeof unstable_observedBits === 'number' && Array.isArray(arguments[2]) ? '\n\nDid you call array.map(useContext)? ' + 'Calling Hooks inside a loop is not supported. ' + 'Learn more at https://reactjs.org/link/rules-of-hooks' : '');
- } // TODO: add a more generic warning for invalid values.
-
-
+ // TODO: add a more generic warning for invalid values.
if (Context._context !== undefined) {
var realContext = Context._context; // Don't deduplicate because this legitimately causes bugs
// and nobody should be using this in existing code.
@@ -5481,7 +5567,7 @@ function requireReact_development () {
}
}
- return dispatcher.useContext(Context, unstable_observedBits);
+ return dispatcher.useContext(Context);
}
function useState(initialState) {
var dispatcher = resolveDispatcher();
@@ -5499,6 +5585,10 @@ function requireReact_development () {
var dispatcher = resolveDispatcher();
return dispatcher.useEffect(create, deps);
}
+ function useInsertionEffect(create, deps) {
+ var dispatcher = resolveDispatcher();
+ return dispatcher.useInsertionEffect(create, deps);
+ }
function useLayoutEffect(create, deps) {
var dispatcher = resolveDispatcher();
return dispatcher.useLayoutEffect(create, deps);
@@ -5521,6 +5611,22 @@ function requireReact_development () {
return dispatcher.useDebugValue(value, formatterFn);
}
}
+ function useTransition() {
+ var dispatcher = resolveDispatcher();
+ return dispatcher.useTransition();
+ }
+ function useDeferredValue(value) {
+ var dispatcher = resolveDispatcher();
+ return dispatcher.useDeferredValue(value);
+ }
+ function useId() {
+ var dispatcher = resolveDispatcher();
+ return dispatcher.useId();
+ }
+ function useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) {
+ var dispatcher = resolveDispatcher();
+ return dispatcher.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+ }
// Helpers to patch console.logs to avoid logging during side-effect free
// replaying on render function. This currently only patches the object
@@ -5585,25 +5691,25 @@ function requireReact_development () {
}; // $FlowFixMe Flow thinks console is immutable.
Object.defineProperties(console, {
- log: _assign({}, props, {
+ log: assign({}, props, {
value: prevLog
}),
- info: _assign({}, props, {
+ info: assign({}, props, {
value: prevInfo
}),
- warn: _assign({}, props, {
+ warn: assign({}, props, {
value: prevWarn
}),
- error: _assign({}, props, {
+ error: assign({}, props, {
value: prevError
}),
- group: _assign({}, props, {
+ group: assign({}, props, {
value: prevGroup
}),
- groupCollapsed: _assign({}, props, {
+ groupCollapsed: assign({}, props, {
value: prevGroupCollapsed
}),
- groupEnd: _assign({}, props, {
+ groupEnd: assign({}, props, {
value: prevGroupEnd
})
});
@@ -5644,7 +5750,7 @@ function requireReact_development () {
function describeNativeComponentFrame(fn, construct) {
// If something asked for a stack inside a fake render, it should get ignored.
- if (!fn || reentry) {
+ if ( !fn || reentry) {
return '';
}
@@ -5753,7 +5859,14 @@ function requireReact_development () {
if (c < 0 || sampleLines[s] !== controlLines[c]) {
// V8 adds a "new" prefix for native classes. Let's remove it to make it prettier.
- var _frame = '\n' + sampleLines[s].replace(' at new ', ' at ');
+ var _frame = '\n' + sampleLines[s].replace(' at new ', ' at '); // If our component frame is labeled "<anonymous>"
+ // but we have a user-provided "displayName"
+ // splice it in to make the stack more readable.
+
+
+ if (fn.displayName && _frame.includes('<anonymous>')) {
+ _frame = _frame.replace('<anonymous>', fn.displayName);
+ }
{
if (typeof fn === 'function') {
@@ -5822,7 +5935,7 @@ function requireReact_development () {
}
switch (type) {
- case exports.Suspense:
+ case REACT_SUSPENSE_TYPE:
return describeBuiltInComponentFrame('Suspense');
case REACT_SUSPENSE_LIST_TYPE:
@@ -5838,9 +5951,6 @@ function requireReact_development () {
// Memo may contain any component type so we recursively resolve it.
return describeUnknownElementTypeFrameInDEV(type.type, source, ownerFn);
- case REACT_BLOCK_TYPE:
- return describeFunctionComponentFrame(type._render);
-
case REACT_LAZY_TYPE:
{
var lazyComponent = type;
@@ -5876,7 +5986,7 @@ function requireReact_development () {
function checkPropTypes(typeSpecs, values, location, componentName, element) {
{
// $FlowFixMe This is okay but Flow doesn't know it.
- var has = Function.call.bind(Object.prototype.hasOwnProperty);
+ var has = Function.call.bind(hasOwnProperty);
for (var typeSpecName in typeSpecs) {
if (has(typeSpecs, typeSpecName)) {
@@ -5888,6 +5998,7 @@ function requireReact_development () {
// This is intentionally an invariant that gets caught. It's the same
// behavior as without this statement except with a better message.
if (typeof typeSpecs[typeSpecName] !== 'function') {
+ // eslint-disable-next-line react-internal/prod-error-codes
var err = Error((componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' + 'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.' + 'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.');
err.name = 'Invariant Violation';
throw err;
@@ -5941,7 +6052,7 @@ function requireReact_development () {
function getDeclarationErrorAddendum() {
if (ReactCurrentOwner.current) {
- var name = getComponentName(ReactCurrentOwner.current.type);
+ var name = getComponentNameFromType(ReactCurrentOwner.current.type);
if (name) {
return '\n\nCheck the render method of `' + name + '`.';
@@ -6023,7 +6134,7 @@ function requireReact_development () {
if (element && element._owner && element._owner !== ReactCurrentOwner.current) {
// Give the component that originally created this child.
- childOwner = " It was passed a child from " + getComponentName(element._owner.type) + ".";
+ childOwner = " It was passed a child from " + getComponentNameFromType(element._owner.type) + ".";
}
{
@@ -6050,7 +6161,7 @@ function requireReact_development () {
return;
}
- if (Array.isArray(node)) {
+ if (isArray(node)) {
for (var i = 0; i < node.length; i++) {
var child = node[i];
@@ -6112,12 +6223,12 @@ function requireReact_development () {
if (propTypes) {
// Intentionally inside to avoid triggering lazy initializers:
- var name = getComponentName(type);
+ var name = getComponentNameFromType(type);
checkPropTypes(propTypes, element.props, 'prop', name, element);
} else if (type.PropTypes !== undefined && !propTypesMisspellWarningShown) {
propTypesMisspellWarningShown = true; // Intentionally inside to avoid triggering lazy initializers:
- var _name = getComponentName(type);
+ var _name = getComponentNameFromType(type);
error('Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?', _name || 'Unknown');
}
@@ -6182,10 +6293,10 @@ function requireReact_development () {
if (type === null) {
typeString = 'null';
- } else if (Array.isArray(type)) {
+ } else if (isArray(type)) {
typeString = 'array';
} else if (type !== undefined && type.$$typeof === REACT_ELEMENT_TYPE) {
- typeString = "<" + (getComponentName(type.type) || 'Unknown') + " />";
+ typeString = "<" + (getComponentNameFromType(type.type) || 'Unknown') + " />";
info = ' Did you accidentally export a JSX literal instead of a component?';
} else {
typeString = typeof type;
@@ -6214,7 +6325,7 @@ function requireReact_development () {
}
}
- if (type === exports.Fragment) {
+ if (type === REACT_FRAGMENT_TYPE) {
validateFragmentProps(element);
} else {
validatePropTypes(element);
@@ -6261,58 +6372,326 @@ function requireReact_development () {
return newElement;
}
- {
+ function startTransition(scope, options) {
+ var prevTransition = ReactCurrentBatchConfig.transition;
+ ReactCurrentBatchConfig.transition = {};
+ var currentTransition = ReactCurrentBatchConfig.transition;
+
+ {
+ ReactCurrentBatchConfig.transition._updatedFibers = new Set();
+ }
try {
- var frozenObject = Object.freeze({});
- /* eslint-disable no-new */
+ scope();
+ } finally {
+ ReactCurrentBatchConfig.transition = prevTransition;
+
+ {
+ if (prevTransition === null && currentTransition._updatedFibers) {
+ var updatedFibersCount = currentTransition._updatedFibers.size;
- new Map([[frozenObject, null]]);
- new Set([frozenObject]);
- /* eslint-enable no-new */
- } catch (e) {
+ if (updatedFibersCount > 10) {
+ warn('Detected a large number of updates inside startTransition. ' + 'If this is due to a subscription please re-write it to use React provided hooks. ' + 'Otherwise concurrent mode guarantees are off the table.');
+ }
+
+ currentTransition._updatedFibers.clear();
+ }
+ }
}
}
- var createElement$1 = createElementWithValidation ;
- var cloneElement$1 = cloneElementWithValidation ;
- var createFactory = createFactoryWithValidation ;
- var Children = {
- map: mapChildren,
- forEach: forEachChildren,
- count: countChildren,
- toArray: toArray,
- only: onlyChild
- };
+ var didWarnAboutMessageChannel = false;
+ var enqueueTaskImpl = null;
+ function enqueueTask(task) {
+ if (enqueueTaskImpl === null) {
+ try {
+ // read require off the module object to get around the bundlers.
+ // we don't want them to detect a require and bundle a Node polyfill.
+ var requireString = ('require' + Math.random()).slice(0, 7);
+ var nodeRequire = module && module[requireString]; // assuming we're in node, let's try to get node's
+ // version of setImmediate, bypassing fake timers if any.
+
+ enqueueTaskImpl = nodeRequire.call(module, 'timers').setImmediate;
+ } catch (_err) {
+ // we're in a browser
+ // we can't use regular timers because they may still be faked
+ // so we try MessageChannel+postMessage instead
+ enqueueTaskImpl = function (callback) {
+ {
+ if (didWarnAboutMessageChannel === false) {
+ didWarnAboutMessageChannel = true;
- exports.Children = Children;
- exports.Component = Component;
- exports.PureComponent = PureComponent;
- exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = ReactSharedInternals;
- exports.cloneElement = cloneElement$1;
- exports.createContext = createContext;
- exports.createElement = createElement$1;
- exports.createFactory = createFactory;
- exports.createRef = createRef;
- exports.forwardRef = forwardRef;
- exports.isValidElement = isValidElement;
- exports.lazy = lazy;
- exports.memo = memo;
- exports.useCallback = useCallback;
- exports.useContext = useContext;
- exports.useDebugValue = useDebugValue;
- exports.useEffect = useEffect;
+ if (typeof MessageChannel === 'undefined') {
+ error('This browser does not have a MessageChannel implementation, ' + 'so enqueuing tasks via await act(async () => ...) will fail. ' + 'Please file an issue at https://github.com/facebook/react/issues ' + 'if you encounter this warning.');
+ }
+ }
+ }
+
+ var channel = new MessageChannel();
+ channel.port1.onmessage = callback;
+ channel.port2.postMessage(undefined);
+ };
+ }
+ }
+
+ return enqueueTaskImpl(task);
+ }
+
+ var actScopeDepth = 0;
+ var didWarnNoAwaitAct = false;
+ function act(callback) {
+ {
+ // `act` calls can be nested, so we track the depth. This represents the
+ // number of `act` scopes on the stack.
+ var prevActScopeDepth = actScopeDepth;
+ actScopeDepth++;
+
+ if (ReactCurrentActQueue.current === null) {
+ // This is the outermost `act` scope. Initialize the queue. The reconciler
+ // will detect the queue and use it instead of Scheduler.
+ ReactCurrentActQueue.current = [];
+ }
+
+ var prevIsBatchingLegacy = ReactCurrentActQueue.isBatchingLegacy;
+ var result;
+
+ try {
+ // Used to reproduce behavior of `batchedUpdates` in legacy mode. Only
+ // set to `true` while the given callback is executed, not for updates
+ // triggered during an async event, because this is how the legacy
+ // implementation of `act` behaved.
+ ReactCurrentActQueue.isBatchingLegacy = true;
+ result = callback(); // Replicate behavior of original `act` implementation in legacy mode,
+ // which flushed updates immediately after the scope function exits, even
+ // if it's an async function.
+
+ if (!prevIsBatchingLegacy && ReactCurrentActQueue.didScheduleLegacyUpdate) {
+ var queue = ReactCurrentActQueue.current;
+
+ if (queue !== null) {
+ ReactCurrentActQueue.didScheduleLegacyUpdate = false;
+ flushActQueue(queue);
+ }
+ }
+ } catch (error) {
+ popActScope(prevActScopeDepth);
+ throw error;
+ } finally {
+ ReactCurrentActQueue.isBatchingLegacy = prevIsBatchingLegacy;
+ }
+
+ if (result !== null && typeof result === 'object' && typeof result.then === 'function') {
+ var thenableResult = result; // The callback is an async function (i.e. returned a promise). Wait
+ // for it to resolve before exiting the current scope.
+
+ var wasAwaited = false;
+ var thenable = {
+ then: function (resolve, reject) {
+ wasAwaited = true;
+ thenableResult.then(function (returnValue) {
+ popActScope(prevActScopeDepth);
+
+ if (actScopeDepth === 0) {
+ // We've exited the outermost act scope. Recursively flush the
+ // queue until there's no remaining work.
+ recursivelyFlushAsyncActWork(returnValue, resolve, reject);
+ } else {
+ resolve(returnValue);
+ }
+ }, function (error) {
+ // The callback threw an error.
+ popActScope(prevActScopeDepth);
+ reject(error);
+ });
+ }
+ };
+
+ {
+ if (!didWarnNoAwaitAct && typeof Promise !== 'undefined') {
+ // eslint-disable-next-line no-undef
+ Promise.resolve().then(function () {}).then(function () {
+ if (!wasAwaited) {
+ didWarnNoAwaitAct = true;
+
+ error('You called act(async () => ...) without await. ' + 'This could lead to unexpected testing behaviour, ' + 'interleaving multiple act calls and mixing their ' + 'scopes. ' + 'You should - await act(async () => ...);');
+ }
+ });
+ }
+ }
+
+ return thenable;
+ } else {
+ var returnValue = result; // The callback is not an async function. Exit the current scope
+ // immediately, without awaiting.
+
+ popActScope(prevActScopeDepth);
+
+ if (actScopeDepth === 0) {
+ // Exiting the outermost act scope. Flush the queue.
+ var _queue = ReactCurrentActQueue.current;
+
+ if (_queue !== null) {
+ flushActQueue(_queue);
+ ReactCurrentActQueue.current = null;
+ } // Return a thenable. If the user awaits it, we'll flush again in
+ // case additional work was scheduled by a microtask.
+
+
+ var _thenable = {
+ then: function (resolve, reject) {
+ // Confirm we haven't re-entered another `act` scope, in case
+ // the user does something weird like await the thenable
+ // multiple times.
+ if (ReactCurrentActQueue.current === null) {
+ // Recursively flush the queue until there's no remaining work.
+ ReactCurrentActQueue.current = [];
+ recursivelyFlushAsyncActWork(returnValue, resolve, reject);
+ } else {
+ resolve(returnValue);
+ }
+ }
+ };
+ return _thenable;
+ } else {
+ // Since we're inside a nested `act` scope, the returned thenable
+ // immediately resolves. The outer scope will flush the queue.
+ var _thenable2 = {
+ then: function (resolve, reject) {
+ resolve(returnValue);
+ }
+ };
+ return _thenable2;
+ }
+ }
+ }
+ }
+
+ function popActScope(prevActScopeDepth) {
+ {
+ if (prevActScopeDepth !== actScopeDepth - 1) {
+ error('You seem to have overlapping act() calls, this is not supported. ' + 'Be sure to await previous act() calls before making a new one. ');
+ }
+
+ actScopeDepth = prevActScopeDepth;
+ }
+ }
+
+ function recursivelyFlushAsyncActWork(returnValue, resolve, reject) {
+ {
+ var queue = ReactCurrentActQueue.current;
+
+ if (queue !== null) {
+ try {
+ flushActQueue(queue);
+ enqueueTask(function () {
+ if (queue.length === 0) {
+ // No additional work was scheduled. Finish.
+ ReactCurrentActQueue.current = null;
+ resolve(returnValue);
+ } else {
+ // Keep flushing work until there's none left.
+ recursivelyFlushAsyncActWork(returnValue, resolve, reject);
+ }
+ });
+ } catch (error) {
+ reject(error);
+ }
+ } else {
+ resolve(returnValue);
+ }
+ }
+ }
+
+ var isFlushing = false;
+
+ function flushActQueue(queue) {
+ {
+ if (!isFlushing) {
+ // Prevent re-entrance.
+ isFlushing = true;
+ var i = 0;
+
+ try {
+ for (; i < queue.length; i++) {
+ var callback = queue[i];
+
+ do {
+ callback = callback(true);
+ } while (callback !== null);
+ }
+
+ queue.length = 0;
+ } catch (error) {
+ // If something throws, leave the remaining callbacks on the queue.
+ queue = queue.slice(i + 1);
+ throw error;
+ } finally {
+ isFlushing = false;
+ }
+ }
+ }
+ }
+
+ var createElement$1 = createElementWithValidation ;
+ var cloneElement$1 = cloneElementWithValidation ;
+ var createFactory = createFactoryWithValidation ;
+ var Children = {
+ map: mapChildren,
+ forEach: forEachChildren,
+ count: countChildren,
+ toArray: toArray,
+ only: onlyChild
+ };
+
+ exports.Children = Children;
+ exports.Component = Component;
+ exports.Fragment = REACT_FRAGMENT_TYPE;
+ exports.Profiler = REACT_PROFILER_TYPE;
+ exports.PureComponent = PureComponent;
+ exports.StrictMode = REACT_STRICT_MODE_TYPE;
+ exports.Suspense = REACT_SUSPENSE_TYPE;
+ exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = ReactSharedInternals;
+ exports.act = act;
+ exports.cloneElement = cloneElement$1;
+ exports.createContext = createContext;
+ exports.createElement = createElement$1;
+ exports.createFactory = createFactory;
+ exports.createRef = createRef;
+ exports.forwardRef = forwardRef;
+ exports.isValidElement = isValidElement;
+ exports.lazy = lazy;
+ exports.memo = memo;
+ exports.startTransition = startTransition;
+ exports.unstable_act = act;
+ exports.useCallback = useCallback;
+ exports.useContext = useContext;
+ exports.useDebugValue = useDebugValue;
+ exports.useDeferredValue = useDeferredValue;
+ exports.useEffect = useEffect;
+ exports.useId = useId;
exports.useImperativeHandle = useImperativeHandle;
+ exports.useInsertionEffect = useInsertionEffect;
exports.useLayoutEffect = useLayoutEffect;
exports.useMemo = useMemo;
exports.useReducer = useReducer;
exports.useRef = useRef;
exports.useState = useState;
+ exports.useSyncExternalStore = useSyncExternalStore;
+ exports.useTransition = useTransition;
exports.version = ReactVersion;
+ /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
+ if (
+ typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
+ typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop ===
+ 'function'
+ ) {
+ __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
+ }
+
})();
}
-} (react_development));
- return react_development;
+} (react_development, react_developmentExports));
+ return react_developmentExports;
}
(function (module) {
@@ -6324,7 +6703,8 @@ function requireReact_development () {
}
} (react));
-/** @license React v17.0.2
+/**
+ * @license React
* react-jsx-runtime.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
@@ -6338,14 +6718,15 @@ var hasRequiredReactJsxRuntime_production_min;
function requireReactJsxRuntime_production_min () {
if (hasRequiredReactJsxRuntime_production_min) return reactJsxRuntime_production_min;
hasRequiredReactJsxRuntime_production_min = 1;
-requireObjectAssign();var f=reactExports,g=60103;reactJsxRuntime_production_min.Fragment=60107;if("function"===typeof Symbol&&Symbol.for){var h=Symbol.for;g=h("react.element");reactJsxRuntime_production_min.Fragment=h("react.fragment");}var m=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,n=Object.prototype.hasOwnProperty,p={key:!0,ref:!0,__self:!0,__source:!0};
- function q(c,a,k){var b,d={},e=null,l=null;void 0!==k&&(e=""+k);void 0!==a.key&&(e=""+a.key);void 0!==a.ref&&(l=a.ref);for(b in a)n.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a)void 0===d[b]&&(d[b]=a[b]);return {$$typeof:g,type:c,key:e,ref:l,props:d,_owner:m.current}}reactJsxRuntime_production_min.jsx=q;reactJsxRuntime_production_min.jsxs=q;
+var f=reactExports,k=Symbol.for("react.element"),l=Symbol.for("react.fragment"),m=Object.prototype.hasOwnProperty,n=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,p={key:!0,ref:!0,__self:!0,__source:!0};
+ function q(c,a,g){var b,d={},e=null,h=null;void 0!==g&&(e=""+g);void 0!==a.key&&(e=""+a.key);void 0!==a.ref&&(h=a.ref);for(b in a)m.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a)void 0===d[b]&&(d[b]=a[b]);return {$$typeof:k,type:c,key:e,ref:h,props:d,_owner:n.current}}reactJsxRuntime_production_min.Fragment=l;reactJsxRuntime_production_min.jsx=q;reactJsxRuntime_production_min.jsxs=q;
return reactJsxRuntime_production_min;
}
var reactJsxRuntime_development = {};
-/** @license React v17.0.2
+/**
+ * @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
@@ -6359,1215 +6740,1327 @@ var hasRequiredReactJsxRuntime_development;
function requireReactJsxRuntime_development () {
if (hasRequiredReactJsxRuntime_development) return reactJsxRuntime_development;
hasRequiredReactJsxRuntime_development = 1;
- (function (exports) {
- if (process.env.NODE_ENV !== "production") {
- (function() {
+ if (process.env.NODE_ENV !== "production") {
+ (function() {
+
+ var React = reactExports;
+
+ // ATTENTION
+ // When adding new symbols to this file,
+ // Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
+ // The Symbol used to tag the ReactElement-like types.
+ var REACT_ELEMENT_TYPE = Symbol.for('react.element');
+ var REACT_PORTAL_TYPE = Symbol.for('react.portal');
+ var REACT_FRAGMENT_TYPE = Symbol.for('react.fragment');
+ var REACT_STRICT_MODE_TYPE = Symbol.for('react.strict_mode');
+ var REACT_PROFILER_TYPE = Symbol.for('react.profiler');
+ var REACT_PROVIDER_TYPE = Symbol.for('react.provider');
+ var REACT_CONTEXT_TYPE = Symbol.for('react.context');
+ var REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref');
+ var REACT_SUSPENSE_TYPE = Symbol.for('react.suspense');
+ var REACT_SUSPENSE_LIST_TYPE = Symbol.for('react.suspense_list');
+ var REACT_MEMO_TYPE = Symbol.for('react.memo');
+ var REACT_LAZY_TYPE = Symbol.for('react.lazy');
+ var REACT_OFFSCREEN_TYPE = Symbol.for('react.offscreen');
+ var MAYBE_ITERATOR_SYMBOL = Symbol.iterator;
+ var FAUX_ITERATOR_SYMBOL = '@@iterator';
+ function getIteratorFn(maybeIterable) {
+ if (maybeIterable === null || typeof maybeIterable !== 'object') {
+ return null;
+ }
+
+ var maybeIterator = MAYBE_ITERATOR_SYMBOL && maybeIterable[MAYBE_ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL];
+
+ if (typeof maybeIterator === 'function') {
+ return maybeIterator;
+ }
+
+ return null;
+ }
- var React = reactExports;
- var _assign = requireObjectAssign();
+ var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
- // ATTENTION
- // When adding new symbols to this file,
- // Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
- // The Symbol used to tag the ReactElement-like types. If there is no native Symbol
- // nor polyfill, then a plain number is used for performance.
- var REACT_ELEMENT_TYPE = 0xeac7;
- var REACT_PORTAL_TYPE = 0xeaca;
- exports.Fragment = 0xeacb;
- var REACT_STRICT_MODE_TYPE = 0xeacc;
- var REACT_PROFILER_TYPE = 0xead2;
- var REACT_PROVIDER_TYPE = 0xeacd;
- var REACT_CONTEXT_TYPE = 0xeace;
- var REACT_FORWARD_REF_TYPE = 0xead0;
- var REACT_SUSPENSE_TYPE = 0xead1;
- var REACT_SUSPENSE_LIST_TYPE = 0xead8;
- var REACT_MEMO_TYPE = 0xead3;
- var REACT_LAZY_TYPE = 0xead4;
- var REACT_BLOCK_TYPE = 0xead9;
- var REACT_SERVER_BLOCK_TYPE = 0xeada;
- var REACT_FUNDAMENTAL_TYPE = 0xead5;
- var REACT_DEBUG_TRACING_MODE_TYPE = 0xeae1;
- var REACT_LEGACY_HIDDEN_TYPE = 0xeae3;
-
- if (typeof Symbol === 'function' && Symbol.for) {
- var symbolFor = Symbol.for;
- REACT_ELEMENT_TYPE = symbolFor('react.element');
- REACT_PORTAL_TYPE = symbolFor('react.portal');
- exports.Fragment = symbolFor('react.fragment');
- REACT_STRICT_MODE_TYPE = symbolFor('react.strict_mode');
- REACT_PROFILER_TYPE = symbolFor('react.profiler');
- REACT_PROVIDER_TYPE = symbolFor('react.provider');
- REACT_CONTEXT_TYPE = symbolFor('react.context');
- REACT_FORWARD_REF_TYPE = symbolFor('react.forward_ref');
- REACT_SUSPENSE_TYPE = symbolFor('react.suspense');
- REACT_SUSPENSE_LIST_TYPE = symbolFor('react.suspense_list');
- REACT_MEMO_TYPE = symbolFor('react.memo');
- REACT_LAZY_TYPE = symbolFor('react.lazy');
- REACT_BLOCK_TYPE = symbolFor('react.block');
- REACT_SERVER_BLOCK_TYPE = symbolFor('react.server.block');
- REACT_FUNDAMENTAL_TYPE = symbolFor('react.fundamental');
- symbolFor('react.scope');
- symbolFor('react.opaque.id');
- REACT_DEBUG_TRACING_MODE_TYPE = symbolFor('react.debug_trace_mode');
- symbolFor('react.offscreen');
- REACT_LEGACY_HIDDEN_TYPE = symbolFor('react.legacy_hidden');
- }
+ function error(format) {
+ {
+ {
+ for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+ args[_key2 - 1] = arguments[_key2];
+ }
- var MAYBE_ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
- var FAUX_ITERATOR_SYMBOL = '@@iterator';
- function getIteratorFn(maybeIterable) {
- if (maybeIterable === null || typeof maybeIterable !== 'object') {
- return null;
- }
+ printWarning('error', format, args);
+ }
+ }
+ }
- var maybeIterator = MAYBE_ITERATOR_SYMBOL && maybeIterable[MAYBE_ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL];
+ function printWarning(level, format, args) {
+ // When changing this logic, you might want to also
+ // update consoleWithStackDev.www.js as well.
+ {
+ var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
+ var stack = ReactDebugCurrentFrame.getStackAddendum();
- if (typeof maybeIterator === 'function') {
- return maybeIterator;
- }
+ if (stack !== '') {
+ format += '%s';
+ args = args.concat([stack]);
+ } // eslint-disable-next-line react-internal/safe-string-coercion
- return null;
- }
- var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+ var argsWithFormat = args.map(function (item) {
+ return String(item);
+ }); // Careful: RN currently depends on this prefix
- function error(format) {
- {
- for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
- args[_key2 - 1] = arguments[_key2];
- }
+ argsWithFormat.unshift('Warning: ' + format); // We intentionally don't use spread (or .apply) directly because it
+ // breaks IE9: https://github.com/facebook/react/issues/13610
+ // eslint-disable-next-line react-internal/no-production-logging
- printWarning('error', format, args);
- }
- }
+ Function.prototype.apply.call(console[level], console, argsWithFormat);
+ }
+ }
- function printWarning(level, format, args) {
- // When changing this logic, you might want to also
- // update consoleWithStackDev.www.js as well.
- {
- var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
- var stack = ReactDebugCurrentFrame.getStackAddendum();
+ // -----------------------------------------------------------------------------
- if (stack !== '') {
- format += '%s';
- args = args.concat([stack]);
- }
+ var enableScopeAPI = false; // Experimental Create Event Handle API.
+ var enableCacheElement = false;
+ var enableTransitionTracing = false; // No known bugs, but needs performance testing
- var argsWithFormat = args.map(function (item) {
- return '' + item;
- }); // Careful: RN currently depends on this prefix
+ var enableLegacyHidden = false; // Enables unstable_avoidThisFallback feature in Fiber
+ // stuff. Intended to enable React core members to more easily debug scheduling
+ // issues in DEV builds.
- argsWithFormat.unshift('Warning: ' + format); // We intentionally don't use spread (or .apply) directly because it
- // breaks IE9: https://github.com/facebook/react/issues/13610
- // eslint-disable-next-line react-internal/no-production-logging
+ var enableDebugTracing = false; // Track which Fiber(s) schedule render work.
- Function.prototype.apply.call(console[level], console, argsWithFormat);
- }
- }
+ var REACT_MODULE_REFERENCE;
- // Filter certain DOM attributes (e.g. src, href) if their values are empty strings.
+ {
+ REACT_MODULE_REFERENCE = Symbol.for('react.module.reference');
+ }
- var enableScopeAPI = false; // Experimental Create Event Handle API.
+ function isValidElementType(type) {
+ if (typeof type === 'string' || typeof type === 'function') {
+ return true;
+ } // Note: typeof might be other than 'symbol' or 'number' (e.g. if it's a polyfill).
- function isValidElementType(type) {
- if (typeof type === 'string' || typeof type === 'function') {
- return true;
- } // Note: typeof might be other than 'symbol' or 'number' (e.g. if it's a polyfill).
+ if (type === REACT_FRAGMENT_TYPE || type === REACT_PROFILER_TYPE || enableDebugTracing || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || enableLegacyHidden || type === REACT_OFFSCREEN_TYPE || enableScopeAPI || enableCacheElement || enableTransitionTracing ) {
+ return true;
+ }
- if (type === exports.Fragment || type === REACT_PROFILER_TYPE || type === REACT_DEBUG_TRACING_MODE_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || type === REACT_LEGACY_HIDDEN_TYPE || enableScopeAPI ) {
- return true;
- }
+ if (typeof type === 'object' && type !== null) {
+ if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || // This needs to include all possible module reference object
+ // types supported by any Flight configuration anywhere since
+ // we don't know which Flight build this will end up being used
+ // with.
+ type.$$typeof === REACT_MODULE_REFERENCE || type.getModuleId !== undefined) {
+ return true;
+ }
+ }
- if (typeof type === 'object' && type !== null) {
- if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_BLOCK_TYPE || type[0] === REACT_SERVER_BLOCK_TYPE) {
- return true;
- }
- }
+ return false;
+ }
- return false;
- }
+ function getWrappedName(outerType, innerType, wrapperName) {
+ var displayName = outerType.displayName;
- function getWrappedName(outerType, innerType, wrapperName) {
- var functionName = innerType.displayName || innerType.name || '';
- return outerType.displayName || (functionName !== '' ? wrapperName + "(" + functionName + ")" : wrapperName);
- }
+ if (displayName) {
+ return displayName;
+ }
- function getContextName(type) {
- return type.displayName || 'Context';
- }
+ var functionName = innerType.displayName || innerType.name || '';
+ return functionName !== '' ? wrapperName + "(" + functionName + ")" : wrapperName;
+ } // Keep in sync with react-reconciler/getComponentNameFromFiber
- function getComponentName(type) {
- if (type == null) {
- // Host root, text node or just invalid type.
- return null;
- }
- {
- if (typeof type.tag === 'number') {
- error('Received an unexpected object in getComponentName(). ' + 'This is likely a bug in React. Please file an issue.');
- }
- }
+ function getContextName(type) {
+ return type.displayName || 'Context';
+ } // Note that the reconciler package should generally prefer to use getComponentNameFromFiber() instead.
- if (typeof type === 'function') {
- return type.displayName || type.name || null;
- }
- if (typeof type === 'string') {
- return type;
- }
+ function getComponentNameFromType(type) {
+ if (type == null) {
+ // Host root, text node or just invalid type.
+ return null;
+ }
- switch (type) {
- case exports.Fragment:
- return 'Fragment';
+ {
+ if (typeof type.tag === 'number') {
+ error('Received an unexpected object in getComponentNameFromType(). ' + 'This is likely a bug in React. Please file an issue.');
+ }
+ }
- case REACT_PORTAL_TYPE:
- return 'Portal';
+ if (typeof type === 'function') {
+ return type.displayName || type.name || null;
+ }
- case REACT_PROFILER_TYPE:
- return 'Profiler';
+ if (typeof type === 'string') {
+ return type;
+ }
- case REACT_STRICT_MODE_TYPE:
- return 'StrictMode';
+ switch (type) {
+ case REACT_FRAGMENT_TYPE:
+ return 'Fragment';
- case REACT_SUSPENSE_TYPE:
- return 'Suspense';
+ case REACT_PORTAL_TYPE:
+ return 'Portal';
- case REACT_SUSPENSE_LIST_TYPE:
- return 'SuspenseList';
- }
+ case REACT_PROFILER_TYPE:
+ return 'Profiler';
- if (typeof type === 'object') {
- switch (type.$$typeof) {
- case REACT_CONTEXT_TYPE:
- var context = type;
- return getContextName(context) + '.Consumer';
+ case REACT_STRICT_MODE_TYPE:
+ return 'StrictMode';
- case REACT_PROVIDER_TYPE:
- var provider = type;
- return getContextName(provider._context) + '.Provider';
+ case REACT_SUSPENSE_TYPE:
+ return 'Suspense';
- case REACT_FORWARD_REF_TYPE:
- return getWrappedName(type, type.render, 'ForwardRef');
+ case REACT_SUSPENSE_LIST_TYPE:
+ return 'SuspenseList';
- case REACT_MEMO_TYPE:
- return getComponentName(type.type);
+ }
- case REACT_BLOCK_TYPE:
- return getComponentName(type._render);
+ if (typeof type === 'object') {
+ switch (type.$$typeof) {
+ case REACT_CONTEXT_TYPE:
+ var context = type;
+ return getContextName(context) + '.Consumer';
- case REACT_LAZY_TYPE:
- {
- var lazyComponent = type;
- var payload = lazyComponent._payload;
- var init = lazyComponent._init;
+ case REACT_PROVIDER_TYPE:
+ var provider = type;
+ return getContextName(provider._context) + '.Provider';
- try {
- return getComponentName(init(payload));
- } catch (x) {
- return null;
- }
- }
- }
- }
+ case REACT_FORWARD_REF_TYPE:
+ return getWrappedName(type, type.render, 'ForwardRef');
- return null;
- }
+ case REACT_MEMO_TYPE:
+ var outerName = type.displayName || null;
- // Helpers to patch console.logs to avoid logging during side-effect free
- // replaying on render function. This currently only patches the object
- // lazily which won't cover if the log function was extracted eagerly.
- // We could also eagerly patch the method.
- var disabledDepth = 0;
- var prevLog;
- var prevInfo;
- var prevWarn;
- var prevError;
- var prevGroup;
- var prevGroupCollapsed;
- var prevGroupEnd;
+ if (outerName !== null) {
+ return outerName;
+ }
- function disabledLog() {}
+ return getComponentNameFromType(type.type) || 'Memo';
- disabledLog.__reactDisabledLog = true;
- function disableLogs() {
- {
- if (disabledDepth === 0) {
- /* eslint-disable react-internal/no-production-logging */
- prevLog = console.log;
- prevInfo = console.info;
- prevWarn = console.warn;
- prevError = console.error;
- prevGroup = console.group;
- prevGroupCollapsed = console.groupCollapsed;
- prevGroupEnd = console.groupEnd; // https://github.com/facebook/react/issues/19099
+ case REACT_LAZY_TYPE:
+ {
+ var lazyComponent = type;
+ var payload = lazyComponent._payload;
+ var init = lazyComponent._init;
- var props = {
- configurable: true,
- enumerable: true,
- value: disabledLog,
- writable: true
- }; // $FlowFixMe Flow thinks console is immutable.
+ try {
+ return getComponentNameFromType(init(payload));
+ } catch (x) {
+ return null;
+ }
+ }
- Object.defineProperties(console, {
- info: props,
- log: props,
- warn: props,
- error: props,
- group: props,
- groupCollapsed: props,
- groupEnd: props
- });
- /* eslint-enable react-internal/no-production-logging */
- }
-
- disabledDepth++;
- }
- }
- function reenableLogs() {
- {
- disabledDepth--;
-
- if (disabledDepth === 0) {
- /* eslint-disable react-internal/no-production-logging */
- var props = {
- configurable: true,
- enumerable: true,
- writable: true
- }; // $FlowFixMe Flow thinks console is immutable.
-
- Object.defineProperties(console, {
- log: _assign({}, props, {
- value: prevLog
- }),
- info: _assign({}, props, {
- value: prevInfo
- }),
- warn: _assign({}, props, {
- value: prevWarn
- }),
- error: _assign({}, props, {
- value: prevError
- }),
- group: _assign({}, props, {
- value: prevGroup
- }),
- groupCollapsed: _assign({}, props, {
- value: prevGroupCollapsed
- }),
- groupEnd: _assign({}, props, {
- value: prevGroupEnd
- })
- });
- /* eslint-enable react-internal/no-production-logging */
- }
-
- if (disabledDepth < 0) {
- error('disabledDepth fell below zero. ' + 'This is a bug in React. Please file an issue.');
- }
- }
- }
-
- var ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
- var prefix;
- function describeBuiltInComponentFrame(name, source, ownerFn) {
- {
- if (prefix === undefined) {
- // Extract the VM specific prefix used by each line.
- try {
- throw Error();
- } catch (x) {
- var match = x.stack.trim().match(/\n( *(at )?)/);
- prefix = match && match[1] || '';
- }
- } // We use the prefix to ensure our stacks line up with native stack frames.
-
-
- return '\n' + prefix + name;
- }
- }
- var reentry = false;
- var componentFrameCache;
-
- {
- var PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;
- componentFrameCache = new PossiblyWeakMap();
- }
-
- function describeNativeComponentFrame(fn, construct) {
- // If something asked for a stack inside a fake render, it should get ignored.
- if (!fn || reentry) {
- return '';
- }
-
- {
- var frame = componentFrameCache.get(fn);
-
- if (frame !== undefined) {
- return frame;
- }
- }
-
- var control;
- reentry = true;
- var previousPrepareStackTrace = Error.prepareStackTrace; // $FlowFixMe It does accept undefined.
-
- Error.prepareStackTrace = undefined;
- var previousDispatcher;
-
- {
- previousDispatcher = ReactCurrentDispatcher.current; // Set the dispatcher in DEV because this might be call in the render function
- // for warnings.
-
- ReactCurrentDispatcher.current = null;
- disableLogs();
- }
+ // eslint-disable-next-line no-fallthrough
+ }
+ }
- try {
- // This should throw.
- if (construct) {
- // Something should be setting the props in the constructor.
- var Fake = function () {
- throw Error();
- }; // $FlowFixMe
+ return null;
+ }
+ var assign = Object.assign;
+
+ // Helpers to patch console.logs to avoid logging during side-effect free
+ // replaying on render function. This currently only patches the object
+ // lazily which won't cover if the log function was extracted eagerly.
+ // We could also eagerly patch the method.
+ var disabledDepth = 0;
+ var prevLog;
+ var prevInfo;
+ var prevWarn;
+ var prevError;
+ var prevGroup;
+ var prevGroupCollapsed;
+ var prevGroupEnd;
+
+ function disabledLog() {}
+
+ disabledLog.__reactDisabledLog = true;
+ function disableLogs() {
+ {
+ if (disabledDepth === 0) {
+ /* eslint-disable react-internal/no-production-logging */
+ prevLog = console.log;
+ prevInfo = console.info;
+ prevWarn = console.warn;
+ prevError = console.error;
+ prevGroup = console.group;
+ prevGroupCollapsed = console.groupCollapsed;
+ prevGroupEnd = console.groupEnd; // https://github.com/facebook/react/issues/19099
+
+ var props = {
+ configurable: true,
+ enumerable: true,
+ value: disabledLog,
+ writable: true
+ }; // $FlowFixMe Flow thinks console is immutable.
+
+ Object.defineProperties(console, {
+ info: props,
+ log: props,
+ warn: props,
+ error: props,
+ group: props,
+ groupCollapsed: props,
+ groupEnd: props
+ });
+ /* eslint-enable react-internal/no-production-logging */
+ }
- Object.defineProperty(Fake.prototype, 'props', {
- set: function () {
- // We use a throwing setter instead of frozen or non-writable props
- // because that won't throw in a non-strict mode function.
- throw Error();
- }
- });
+ disabledDepth++;
+ }
+ }
+ function reenableLogs() {
+ {
+ disabledDepth--;
+
+ if (disabledDepth === 0) {
+ /* eslint-disable react-internal/no-production-logging */
+ var props = {
+ configurable: true,
+ enumerable: true,
+ writable: true
+ }; // $FlowFixMe Flow thinks console is immutable.
+
+ Object.defineProperties(console, {
+ log: assign({}, props, {
+ value: prevLog
+ }),
+ info: assign({}, props, {
+ value: prevInfo
+ }),
+ warn: assign({}, props, {
+ value: prevWarn
+ }),
+ error: assign({}, props, {
+ value: prevError
+ }),
+ group: assign({}, props, {
+ value: prevGroup
+ }),
+ groupCollapsed: assign({}, props, {
+ value: prevGroupCollapsed
+ }),
+ groupEnd: assign({}, props, {
+ value: prevGroupEnd
+ })
+ });
+ /* eslint-enable react-internal/no-production-logging */
+ }
- if (typeof Reflect === 'object' && Reflect.construct) {
- // We construct a different control for this case to include any extra
- // frames added by the construct call.
- try {
- Reflect.construct(Fake, []);
- } catch (x) {
- control = x;
- }
+ if (disabledDepth < 0) {
+ error('disabledDepth fell below zero. ' + 'This is a bug in React. Please file an issue.');
+ }
+ }
+ }
- Reflect.construct(fn, [], Fake);
- } else {
- try {
- Fake.call();
- } catch (x) {
- control = x;
- }
+ var ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
+ var prefix;
+ function describeBuiltInComponentFrame(name, source, ownerFn) {
+ {
+ if (prefix === undefined) {
+ // Extract the VM specific prefix used by each line.
+ try {
+ throw Error();
+ } catch (x) {
+ var match = x.stack.trim().match(/\n( *(at )?)/);
+ prefix = match && match[1] || '';
+ }
+ } // We use the prefix to ensure our stacks line up with native stack frames.
- fn.call(Fake.prototype);
- }
- } else {
- try {
- throw Error();
- } catch (x) {
- control = x;
- }
- fn();
- }
- } catch (sample) {
- // This is inlined manually because closure doesn't do it for us.
- if (sample && control && typeof sample.stack === 'string') {
- // This extracts the first frame from the sample that isn't also in the control.
- // Skipping one frame that we assume is the frame that calls the two.
- var sampleLines = sample.stack.split('\n');
- var controlLines = control.stack.split('\n');
- var s = sampleLines.length - 1;
- var c = controlLines.length - 1;
+ return '\n' + prefix + name;
+ }
+ }
+ var reentry = false;
+ var componentFrameCache;
- while (s >= 1 && c >= 0 && sampleLines[s] !== controlLines[c]) {
- // We expect at least one stack frame to be shared.
- // Typically this will be the root most one. However, stack frames may be
- // cut off due to maximum stack limits. In this case, one maybe cut off
- // earlier than the other. We assume that the sample is longer or the same
- // and there for cut off earlier. So we should find the root most frame in
- // the sample somewhere in the control.
- c--;
- }
+ {
+ var PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;
+ componentFrameCache = new PossiblyWeakMap();
+ }
- for (; s >= 1 && c >= 0; s--, c--) {
- // Next we find the first one that isn't the same which should be the
- // frame that called our sample function and the control.
- if (sampleLines[s] !== controlLines[c]) {
- // In V8, the first line is describing the message but other VMs don't.
- // If we're about to return the first line, and the control is also on the same
- // line, that's a pretty good indicator that our sample threw at same line as
- // the control. I.e. before we entered the sample frame. So we ignore this result.
- // This can happen if you passed a class to function component, or non-function.
- if (s !== 1 || c !== 1) {
- do {
- s--;
- c--; // We may still have similar intermediate frames from the construct call.
- // The next one that isn't the same should be our match though.
+ function describeNativeComponentFrame(fn, construct) {
+ // If something asked for a stack inside a fake render, it should get ignored.
+ if ( !fn || reentry) {
+ return '';
+ }
- if (c < 0 || sampleLines[s] !== controlLines[c]) {
- // V8 adds a "new" prefix for native classes. Let's remove it to make it prettier.
- var _frame = '\n' + sampleLines[s].replace(' at new ', ' at ');
+ {
+ var frame = componentFrameCache.get(fn);
- {
- if (typeof fn === 'function') {
- componentFrameCache.set(fn, _frame);
- }
- } // Return the line we found.
+ if (frame !== undefined) {
+ return frame;
+ }
+ }
+ var control;
+ reentry = true;
+ var previousPrepareStackTrace = Error.prepareStackTrace; // $FlowFixMe It does accept undefined.
- return _frame;
- }
- } while (s >= 1 && c >= 0);
- }
+ Error.prepareStackTrace = undefined;
+ var previousDispatcher;
- break;
- }
- }
- }
- } finally {
- reentry = false;
+ {
+ previousDispatcher = ReactCurrentDispatcher.current; // Set the dispatcher in DEV because this might be call in the render function
+ // for warnings.
- {
- ReactCurrentDispatcher.current = previousDispatcher;
- reenableLogs();
- }
+ ReactCurrentDispatcher.current = null;
+ disableLogs();
+ }
- Error.prepareStackTrace = previousPrepareStackTrace;
- } // Fallback to just using the name if we couldn't make it throw.
+ try {
+ // This should throw.
+ if (construct) {
+ // Something should be setting the props in the constructor.
+ var Fake = function () {
+ throw Error();
+ }; // $FlowFixMe
- var name = fn ? fn.displayName || fn.name : '';
- var syntheticFrame = name ? describeBuiltInComponentFrame(name) : '';
-
- {
- if (typeof fn === 'function') {
- componentFrameCache.set(fn, syntheticFrame);
- }
- }
+ Object.defineProperty(Fake.prototype, 'props', {
+ set: function () {
+ // We use a throwing setter instead of frozen or non-writable props
+ // because that won't throw in a non-strict mode function.
+ throw Error();
+ }
+ });
+
+ if (typeof Reflect === 'object' && Reflect.construct) {
+ // We construct a different control for this case to include any extra
+ // frames added by the construct call.
+ try {
+ Reflect.construct(Fake, []);
+ } catch (x) {
+ control = x;
+ }
- return syntheticFrame;
- }
- function describeFunctionComponentFrame(fn, source, ownerFn) {
- {
- return describeNativeComponentFrame(fn, false);
- }
- }
+ Reflect.construct(fn, [], Fake);
+ } else {
+ try {
+ Fake.call();
+ } catch (x) {
+ control = x;
+ }
- function shouldConstruct(Component) {
- var prototype = Component.prototype;
- return !!(prototype && prototype.isReactComponent);
- }
+ fn.call(Fake.prototype);
+ }
+ } else {
+ try {
+ throw Error();
+ } catch (x) {
+ control = x;
+ }
- function describeUnknownElementTypeFrameInDEV(type, source, ownerFn) {
+ fn();
+ }
+ } catch (sample) {
+ // This is inlined manually because closure doesn't do it for us.
+ if (sample && control && typeof sample.stack === 'string') {
+ // This extracts the first frame from the sample that isn't also in the control.
+ // Skipping one frame that we assume is the frame that calls the two.
+ var sampleLines = sample.stack.split('\n');
+ var controlLines = control.stack.split('\n');
+ var s = sampleLines.length - 1;
+ var c = controlLines.length - 1;
+
+ while (s >= 1 && c >= 0 && sampleLines[s] !== controlLines[c]) {
+ // We expect at least one stack frame to be shared.
+ // Typically this will be the root most one. However, stack frames may be
+ // cut off due to maximum stack limits. In this case, one maybe cut off
+ // earlier than the other. We assume that the sample is longer or the same
+ // and there for cut off earlier. So we should find the root most frame in
+ // the sample somewhere in the control.
+ c--;
+ }
- if (type == null) {
- return '';
- }
+ for (; s >= 1 && c >= 0; s--, c--) {
+ // Next we find the first one that isn't the same which should be the
+ // frame that called our sample function and the control.
+ if (sampleLines[s] !== controlLines[c]) {
+ // In V8, the first line is describing the message but other VMs don't.
+ // If we're about to return the first line, and the control is also on the same
+ // line, that's a pretty good indicator that our sample threw at same line as
+ // the control. I.e. before we entered the sample frame. So we ignore this result.
+ // This can happen if you passed a class to function component, or non-function.
+ if (s !== 1 || c !== 1) {
+ do {
+ s--;
+ c--; // We may still have similar intermediate frames from the construct call.
+ // The next one that isn't the same should be our match though.
+
+ if (c < 0 || sampleLines[s] !== controlLines[c]) {
+ // V8 adds a "new" prefix for native classes. Let's remove it to make it prettier.
+ var _frame = '\n' + sampleLines[s].replace(' at new ', ' at '); // If our component frame is labeled "<anonymous>"
+ // but we have a user-provided "displayName"
+ // splice it in to make the stack more readable.
+
+
+ if (fn.displayName && _frame.includes('<anonymous>')) {
+ _frame = _frame.replace('<anonymous>', fn.displayName);
+ }
+
+ {
+ if (typeof fn === 'function') {
+ componentFrameCache.set(fn, _frame);
+ }
+ } // Return the line we found.
- if (typeof type === 'function') {
- {
- return describeNativeComponentFrame(type, shouldConstruct(type));
- }
- }
- if (typeof type === 'string') {
- return describeBuiltInComponentFrame(type);
- }
+ return _frame;
+ }
+ } while (s >= 1 && c >= 0);
+ }
- switch (type) {
- case REACT_SUSPENSE_TYPE:
- return describeBuiltInComponentFrame('Suspense');
+ break;
+ }
+ }
+ }
+ } finally {
+ reentry = false;
- case REACT_SUSPENSE_LIST_TYPE:
- return describeBuiltInComponentFrame('SuspenseList');
- }
+ {
+ ReactCurrentDispatcher.current = previousDispatcher;
+ reenableLogs();
+ }
- if (typeof type === 'object') {
- switch (type.$$typeof) {
- case REACT_FORWARD_REF_TYPE:
- return describeFunctionComponentFrame(type.render);
+ Error.prepareStackTrace = previousPrepareStackTrace;
+ } // Fallback to just using the name if we couldn't make it throw.
- case REACT_MEMO_TYPE:
- // Memo may contain any component type so we recursively resolve it.
- return describeUnknownElementTypeFrameInDEV(type.type, source, ownerFn);
- case REACT_BLOCK_TYPE:
- return describeFunctionComponentFrame(type._render);
+ var name = fn ? fn.displayName || fn.name : '';
+ var syntheticFrame = name ? describeBuiltInComponentFrame(name) : '';
- case REACT_LAZY_TYPE:
- {
- var lazyComponent = type;
- var payload = lazyComponent._payload;
- var init = lazyComponent._init;
+ {
+ if (typeof fn === 'function') {
+ componentFrameCache.set(fn, syntheticFrame);
+ }
+ }
- try {
- // Lazy may contain any component type so we recursively resolve it.
- return describeUnknownElementTypeFrameInDEV(init(payload), source, ownerFn);
- } catch (x) {}
- }
- }
- }
+ return syntheticFrame;
+ }
+ function describeFunctionComponentFrame(fn, source, ownerFn) {
+ {
+ return describeNativeComponentFrame(fn, false);
+ }
+ }
- return '';
- }
+ function shouldConstruct(Component) {
+ var prototype = Component.prototype;
+ return !!(prototype && prototype.isReactComponent);
+ }
- var loggedTypeFailures = {};
- var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
+ function describeUnknownElementTypeFrameInDEV(type, source, ownerFn) {
- function setCurrentlyValidatingElement(element) {
- {
- if (element) {
- var owner = element._owner;
- var stack = describeUnknownElementTypeFrameInDEV(element.type, element._source, owner ? owner.type : null);
- ReactDebugCurrentFrame.setExtraStackFrame(stack);
- } else {
- ReactDebugCurrentFrame.setExtraStackFrame(null);
- }
- }
- }
+ if (type == null) {
+ return '';
+ }
- function checkPropTypes(typeSpecs, values, location, componentName, element) {
- {
- // $FlowFixMe This is okay but Flow doesn't know it.
- var has = Function.call.bind(Object.prototype.hasOwnProperty);
+ if (typeof type === 'function') {
+ {
+ return describeNativeComponentFrame(type, shouldConstruct(type));
+ }
+ }
- for (var typeSpecName in typeSpecs) {
- if (has(typeSpecs, typeSpecName)) {
- var error$1 = void 0; // Prop type validation may throw. In case they do, we don't want to
- // fail the render phase where it didn't fail before. So we log it.
- // After these have been cleaned up, we'll let them throw.
+ if (typeof type === 'string') {
+ return describeBuiltInComponentFrame(type);
+ }
- try {
- // This is intentionally an invariant that gets caught. It's the same
- // behavior as without this statement except with a better message.
- if (typeof typeSpecs[typeSpecName] !== 'function') {
- var err = Error((componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' + 'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.' + 'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.');
- err.name = 'Invariant Violation';
- throw err;
- }
+ switch (type) {
+ case REACT_SUSPENSE_TYPE:
+ return describeBuiltInComponentFrame('Suspense');
- error$1 = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED');
- } catch (ex) {
- error$1 = ex;
- }
+ case REACT_SUSPENSE_LIST_TYPE:
+ return describeBuiltInComponentFrame('SuspenseList');
+ }
- if (error$1 && !(error$1 instanceof Error)) {
- setCurrentlyValidatingElement(element);
+ if (typeof type === 'object') {
+ switch (type.$$typeof) {
+ case REACT_FORWARD_REF_TYPE:
+ return describeFunctionComponentFrame(type.render);
- error('%s: type specification of %s' + ' `%s` is invalid; the type checker ' + 'function must return `null` or an `Error` but returned a %s. ' + 'You may have forgotten to pass an argument to the type checker ' + 'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' + 'shape all require an argument).', componentName || 'React class', location, typeSpecName, typeof error$1);
+ case REACT_MEMO_TYPE:
+ // Memo may contain any component type so we recursively resolve it.
+ return describeUnknownElementTypeFrameInDEV(type.type, source, ownerFn);
- setCurrentlyValidatingElement(null);
- }
+ case REACT_LAZY_TYPE:
+ {
+ var lazyComponent = type;
+ var payload = lazyComponent._payload;
+ var init = lazyComponent._init;
- if (error$1 instanceof Error && !(error$1.message in loggedTypeFailures)) {
- // Only monitor this failure once because there tends to be a lot of the
- // same error.
- loggedTypeFailures[error$1.message] = true;
- setCurrentlyValidatingElement(element);
+ try {
+ // Lazy may contain any component type so we recursively resolve it.
+ return describeUnknownElementTypeFrameInDEV(init(payload), source, ownerFn);
+ } catch (x) {}
+ }
+ }
+ }
- error('Failed %s type: %s', location, error$1.message);
+ return '';
+ }
- setCurrentlyValidatingElement(null);
- }
- }
- }
- }
- }
+ var hasOwnProperty = Object.prototype.hasOwnProperty;
- var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
- var hasOwnProperty = Object.prototype.hasOwnProperty;
- var RESERVED_PROPS = {
- key: true,
- ref: true,
- __self: true,
- __source: true
- };
- var specialPropKeyWarningShown;
- var specialPropRefWarningShown;
- var didWarnAboutStringRefs;
+ var loggedTypeFailures = {};
+ var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
- {
- didWarnAboutStringRefs = {};
- }
+ function setCurrentlyValidatingElement(element) {
+ {
+ if (element) {
+ var owner = element._owner;
+ var stack = describeUnknownElementTypeFrameInDEV(element.type, element._source, owner ? owner.type : null);
+ ReactDebugCurrentFrame.setExtraStackFrame(stack);
+ } else {
+ ReactDebugCurrentFrame.setExtraStackFrame(null);
+ }
+ }
+ }
- function hasValidRef(config) {
- {
- if (hasOwnProperty.call(config, 'ref')) {
- var getter = Object.getOwnPropertyDescriptor(config, 'ref').get;
+ function checkPropTypes(typeSpecs, values, location, componentName, element) {
+ {
+ // $FlowFixMe This is okay but Flow doesn't know it.
+ var has = Function.call.bind(hasOwnProperty);
+
+ for (var typeSpecName in typeSpecs) {
+ if (has(typeSpecs, typeSpecName)) {
+ var error$1 = void 0; // Prop type validation may throw. In case they do, we don't want to
+ // fail the render phase where it didn't fail before. So we log it.
+ // After these have been cleaned up, we'll let them throw.
+
+ try {
+ // This is intentionally an invariant that gets caught. It's the same
+ // behavior as without this statement except with a better message.
+ if (typeof typeSpecs[typeSpecName] !== 'function') {
+ // eslint-disable-next-line react-internal/prod-error-codes
+ var err = Error((componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' + 'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.' + 'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.');
+ err.name = 'Invariant Violation';
+ throw err;
+ }
- if (getter && getter.isReactWarning) {
- return false;
- }
- }
- }
+ error$1 = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED');
+ } catch (ex) {
+ error$1 = ex;
+ }
- return config.ref !== undefined;
- }
+ if (error$1 && !(error$1 instanceof Error)) {
+ setCurrentlyValidatingElement(element);
- function hasValidKey(config) {
- {
- if (hasOwnProperty.call(config, 'key')) {
- var getter = Object.getOwnPropertyDescriptor(config, 'key').get;
+ error('%s: type specification of %s' + ' `%s` is invalid; the type checker ' + 'function must return `null` or an `Error` but returned a %s. ' + 'You may have forgotten to pass an argument to the type checker ' + 'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' + 'shape all require an argument).', componentName || 'React class', location, typeSpecName, typeof error$1);
- if (getter && getter.isReactWarning) {
- return false;
- }
- }
- }
+ setCurrentlyValidatingElement(null);
+ }
- return config.key !== undefined;
- }
+ if (error$1 instanceof Error && !(error$1.message in loggedTypeFailures)) {
+ // Only monitor this failure once because there tends to be a lot of the
+ // same error.
+ loggedTypeFailures[error$1.message] = true;
+ setCurrentlyValidatingElement(element);
- function warnIfStringRefCannotBeAutoConverted(config, self) {
- {
- if (typeof config.ref === 'string' && ReactCurrentOwner.current && self && ReactCurrentOwner.current.stateNode !== self) {
- var componentName = getComponentName(ReactCurrentOwner.current.type);
+ error('Failed %s type: %s', location, error$1.message);
- if (!didWarnAboutStringRefs[componentName]) {
- error('Component "%s" contains the string ref "%s". ' + 'Support for string refs will be removed in a future major release. ' + 'This case cannot be automatically converted to an arrow function. ' + 'We ask you to manually fix this case by using useRef() or createRef() instead. ' + 'Learn more about using refs safely here: ' + 'https://reactjs.org/link/strict-mode-string-ref', getComponentName(ReactCurrentOwner.current.type), config.ref);
+ setCurrentlyValidatingElement(null);
+ }
+ }
+ }
+ }
+ }
- didWarnAboutStringRefs[componentName] = true;
- }
- }
- }
- }
+ var isArrayImpl = Array.isArray; // eslint-disable-next-line no-redeclare
- function defineKeyPropWarningGetter(props, displayName) {
- {
- var warnAboutAccessingKey = function () {
- if (!specialPropKeyWarningShown) {
- specialPropKeyWarningShown = true;
+ function isArray(a) {
+ return isArrayImpl(a);
+ }
- error('%s: `key` is not a prop. Trying to access it will result ' + 'in `undefined` being returned. If you need to access the same ' + 'value within the child component, you should pass it as a different ' + 'prop. (https://reactjs.org/link/special-props)', displayName);
- }
- };
+ /*
+ * The `'' + value` pattern (used in in perf-sensitive code) throws for Symbol
+ * and Temporal.* types. See https://github.com/facebook/react/pull/22064.
+ *
+ * The functions in this module will throw an easier-to-understand,
+ * easier-to-debug exception with a clear errors message message explaining the
+ * problem. (Instead of a confusing exception thrown inside the implementation
+ * of the `value` object).
+ */
+ // $FlowFixMe only called in DEV, so void return is not possible.
+ function typeName(value) {
+ {
+ // toStringTag is needed for namespaced types like Temporal.Instant
+ var hasToStringTag = typeof Symbol === 'function' && Symbol.toStringTag;
+ var type = hasToStringTag && value[Symbol.toStringTag] || value.constructor.name || 'Object';
+ return type;
+ }
+ } // $FlowFixMe only called in DEV, so void return is not possible.
+
+
+ function willCoercionThrow(value) {
+ {
+ try {
+ testStringCoercion(value);
+ return false;
+ } catch (e) {
+ return true;
+ }
+ }
+ }
- warnAboutAccessingKey.isReactWarning = true;
- Object.defineProperty(props, 'key', {
- get: warnAboutAccessingKey,
- configurable: true
- });
- }
- }
+ function testStringCoercion(value) {
+ // If you ended up here by following an exception call stack, here's what's
+ // happened: you supplied an object or symbol value to React (as a prop, key,
+ // DOM attribute, CSS property, string ref, etc.) and when React tried to
+ // coerce it to a string using `'' + value`, an exception was thrown.
+ //
+ // The most common types that will cause this exception are `Symbol` instances
+ // and Temporal objects like `Temporal.Instant`. But any object that has a
+ // `valueOf` or `[Symbol.toPrimitive]` method that throws will also cause this
+ // exception. (Library authors do this to prevent users from using built-in
+ // numeric operators like `+` or comparison operators like `>=` because custom
+ // methods are needed to perform accurate arithmetic or comparison.)
+ //
+ // To fix the problem, coerce this object or symbol value to a string before
+ // passing it to React. The most reliable way is usually `String(value)`.
+ //
+ // To find which value is throwing, check the browser or debugger console.
+ // Before this exception was thrown, there should be `console.error` output
+ // that shows the type (Symbol, Temporal.PlainDate, etc.) that caused the
+ // problem and how that type was used: key, atrribute, input value prop, etc.
+ // In most cases, this console output also shows the component and its
+ // ancestor components where the exception happened.
+ //
+ // eslint-disable-next-line react-internal/safe-string-coercion
+ return '' + value;
+ }
+ function checkKeyStringCoercion(value) {
+ {
+ if (willCoercionThrow(value)) {
+ error('The provided key is an unsupported type %s.' + ' This value must be coerced to a string before before using it here.', typeName(value));
- function defineRefPropWarningGetter(props, displayName) {
- {
- var warnAboutAccessingRef = function () {
- if (!specialPropRefWarningShown) {
- specialPropRefWarningShown = true;
+ return testStringCoercion(value); // throw (to help callers find troubleshooting comments)
+ }
+ }
+ }
- error('%s: `ref` is not a prop. Trying to access it will result ' + 'in `undefined` being returned. If you need to access the same ' + 'value within the child component, you should pass it as a different ' + 'prop. (https://reactjs.org/link/special-props)', displayName);
- }
- };
+ var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
+ var RESERVED_PROPS = {
+ key: true,
+ ref: true,
+ __self: true,
+ __source: true
+ };
+ var specialPropKeyWarningShown;
+ var specialPropRefWarningShown;
+ var didWarnAboutStringRefs;
- warnAboutAccessingRef.isReactWarning = true;
- Object.defineProperty(props, 'ref', {
- get: warnAboutAccessingRef,
- configurable: true
- });
- }
- }
- /**
- * Factory method to create a new React element. This no longer adheres to
- * the class pattern, so do not use new to call it. Also, instanceof check
- * will not work. Instead test $$typeof field against Symbol.for('react.element') to check
- * if something is a React Element.
- *
- * @param {*} type
- * @param {*} props
- * @param {*} key
- * @param {string|object} ref
- * @param {*} owner
- * @param {*} self A *temporary* helper to detect places where `this` is
- * different from the `owner` when React.createElement is called, so that we
- * can warn. We want to get rid of owner and replace string `ref`s with arrow
- * functions, and as long as `this` and owner are the same, there will be no
- * change in behavior.
- * @param {*} source An annotation object (added by a transpiler or otherwise)
- * indicating filename, line number, and/or other information.
- * @internal
- */
+ {
+ didWarnAboutStringRefs = {};
+ }
+ function hasValidRef(config) {
+ {
+ if (hasOwnProperty.call(config, 'ref')) {
+ var getter = Object.getOwnPropertyDescriptor(config, 'ref').get;
- var ReactElement = function (type, key, ref, self, source, owner, props) {
- var element = {
- // This tag allows us to uniquely identify this as a React Element
- $$typeof: REACT_ELEMENT_TYPE,
- // Built-in properties that belong on the element
- type: type,
- key: key,
- ref: ref,
- props: props,
- // Record the component responsible for creating this element.
- _owner: owner
- };
+ if (getter && getter.isReactWarning) {
+ return false;
+ }
+ }
+ }
- {
- // The validation flag is currently mutative. We put it on
- // an external backing store so that we can freeze the whole object.
- // This can be replaced with a WeakMap once they are implemented in
- // commonly used development environments.
- element._store = {}; // To make comparing ReactElements easier for testing purposes, we make
- // the validation flag non-enumerable (where possible, which should
- // include every environment we run tests in), so the test framework
- // ignores it.
+ return config.ref !== undefined;
+ }
- Object.defineProperty(element._store, 'validated', {
- configurable: false,
- enumerable: false,
- writable: true,
- value: false
- }); // self and source are DEV only properties.
+ function hasValidKey(config) {
+ {
+ if (hasOwnProperty.call(config, 'key')) {
+ var getter = Object.getOwnPropertyDescriptor(config, 'key').get;
- Object.defineProperty(element, '_self', {
- configurable: false,
- enumerable: false,
- writable: false,
- value: self
- }); // Two elements created in two different places should be considered
- // equal for testing purposes and therefore we hide it from enumeration.
+ if (getter && getter.isReactWarning) {
+ return false;
+ }
+ }
+ }
- Object.defineProperty(element, '_source', {
- configurable: false,
- enumerable: false,
- writable: false,
- value: source
- });
+ return config.key !== undefined;
+ }
- if (Object.freeze) {
- Object.freeze(element.props);
- Object.freeze(element);
- }
- }
+ function warnIfStringRefCannotBeAutoConverted(config, self) {
+ {
+ if (typeof config.ref === 'string' && ReactCurrentOwner.current && self && ReactCurrentOwner.current.stateNode !== self) {
+ var componentName = getComponentNameFromType(ReactCurrentOwner.current.type);
- return element;
- };
- /**
- * https://github.com/reactjs/rfcs/pull/107
- * @param {*} type
- * @param {object} props
- * @param {string} key
- */
+ if (!didWarnAboutStringRefs[componentName]) {
+ error('Component "%s" contains the string ref "%s". ' + 'Support for string refs will be removed in a future major release. ' + 'This case cannot be automatically converted to an arrow function. ' + 'We ask you to manually fix this case by using useRef() or createRef() instead. ' + 'Learn more about using refs safely here: ' + 'https://reactjs.org/link/strict-mode-string-ref', getComponentNameFromType(ReactCurrentOwner.current.type), config.ref);
- function jsxDEV(type, config, maybeKey, source, self) {
- {
- var propName; // Reserved names are extracted
-
- var props = {};
- var key = null;
- var ref = null; // Currently, key can be spread in as a prop. This causes a potential
- // issue if key is also explicitly declared (ie. <div {...props} key="Hi" />
- // or <div key="Hi" {...props} /> ). We want to deprecate key spread,
- // but as an intermediary step, we will use jsxDEV for everything except
- // <div {...props} key="Hi" />, because we aren't currently able to tell if
- // key is explicitly declared to be undefined or not.
-
- if (maybeKey !== undefined) {
- key = '' + maybeKey;
- }
+ didWarnAboutStringRefs[componentName] = true;
+ }
+ }
+ }
+ }
- if (hasValidKey(config)) {
- key = '' + config.key;
- }
+ function defineKeyPropWarningGetter(props, displayName) {
+ {
+ var warnAboutAccessingKey = function () {
+ if (!specialPropKeyWarningShown) {
+ specialPropKeyWarningShown = true;
- if (hasValidRef(config)) {
- ref = config.ref;
- warnIfStringRefCannotBeAutoConverted(config, self);
- } // Remaining properties are added to a new props object
+ error('%s: `key` is not a prop. Trying to access it will result ' + 'in `undefined` being returned. If you need to access the same ' + 'value within the child component, you should pass it as a different ' + 'prop. (https://reactjs.org/link/special-props)', displayName);
+ }
+ };
+ warnAboutAccessingKey.isReactWarning = true;
+ Object.defineProperty(props, 'key', {
+ get: warnAboutAccessingKey,
+ configurable: true
+ });
+ }
+ }
- for (propName in config) {
- if (hasOwnProperty.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {
- props[propName] = config[propName];
- }
- } // Resolve default props
+ function defineRefPropWarningGetter(props, displayName) {
+ {
+ var warnAboutAccessingRef = function () {
+ if (!specialPropRefWarningShown) {
+ specialPropRefWarningShown = true;
+ error('%s: `ref` is not a prop. Trying to access it will result ' + 'in `undefined` being returned. If you need to access the same ' + 'value within the child component, you should pass it as a different ' + 'prop. (https://reactjs.org/link/special-props)', displayName);
+ }
+ };
- if (type && type.defaultProps) {
- var defaultProps = type.defaultProps;
+ warnAboutAccessingRef.isReactWarning = true;
+ Object.defineProperty(props, 'ref', {
+ get: warnAboutAccessingRef,
+ configurable: true
+ });
+ }
+ }
+ /**
+ * Factory method to create a new React element. This no longer adheres to
+ * the class pattern, so do not use new to call it. Also, instanceof check
+ * will not work. Instead test $$typeof field against Symbol.for('react.element') to check
+ * if something is a React Element.
+ *
+ * @param {*} type
+ * @param {*} props
+ * @param {*} key
+ * @param {string|object} ref
+ * @param {*} owner
+ * @param {*} self A *temporary* helper to detect places where `this` is
+ * different from the `owner` when React.createElement is called, so that we
+ * can warn. We want to get rid of owner and replace string `ref`s with arrow
+ * functions, and as long as `this` and owner are the same, there will be no
+ * change in behavior.
+ * @param {*} source An annotation object (added by a transpiler or otherwise)
+ * indicating filename, line number, and/or other information.
+ * @internal
+ */
+
+
+ var ReactElement = function (type, key, ref, self, source, owner, props) {
+ var element = {
+ // This tag allows us to uniquely identify this as a React Element
+ $$typeof: REACT_ELEMENT_TYPE,
+ // Built-in properties that belong on the element
+ type: type,
+ key: key,
+ ref: ref,
+ props: props,
+ // Record the component responsible for creating this element.
+ _owner: owner
+ };
+
+ {
+ // The validation flag is currently mutative. We put it on
+ // an external backing store so that we can freeze the whole object.
+ // This can be replaced with a WeakMap once they are implemented in
+ // commonly used development environments.
+ element._store = {}; // To make comparing ReactElements easier for testing purposes, we make
+ // the validation flag non-enumerable (where possible, which should
+ // include every environment we run tests in), so the test framework
+ // ignores it.
+
+ Object.defineProperty(element._store, 'validated', {
+ configurable: false,
+ enumerable: false,
+ writable: true,
+ value: false
+ }); // self and source are DEV only properties.
+
+ Object.defineProperty(element, '_self', {
+ configurable: false,
+ enumerable: false,
+ writable: false,
+ value: self
+ }); // Two elements created in two different places should be considered
+ // equal for testing purposes and therefore we hide it from enumeration.
+
+ Object.defineProperty(element, '_source', {
+ configurable: false,
+ enumerable: false,
+ writable: false,
+ value: source
+ });
+
+ if (Object.freeze) {
+ Object.freeze(element.props);
+ Object.freeze(element);
+ }
+ }
- for (propName in defaultProps) {
- if (props[propName] === undefined) {
- props[propName] = defaultProps[propName];
- }
- }
- }
+ return element;
+ };
+ /**
+ * https://github.com/reactjs/rfcs/pull/107
+ * @param {*} type
+ * @param {object} props
+ * @param {string} key
+ */
+
+ function jsxDEV(type, config, maybeKey, source, self) {
+ {
+ var propName; // Reserved names are extracted
+
+ var props = {};
+ var key = null;
+ var ref = null; // Currently, key can be spread in as a prop. This causes a potential
+ // issue if key is also explicitly declared (ie. <div {...props} key="Hi" />
+ // or <div key="Hi" {...props} /> ). We want to deprecate key spread,
+ // but as an intermediary step, we will use jsxDEV for everything except
+ // <div {...props} key="Hi" />, because we aren't currently able to tell if
+ // key is explicitly declared to be undefined or not.
+
+ if (maybeKey !== undefined) {
+ {
+ checkKeyStringCoercion(maybeKey);
+ }
- if (key || ref) {
- var displayName = typeof type === 'function' ? type.displayName || type.name || 'Unknown' : type;
+ key = '' + maybeKey;
+ }
- if (key) {
- defineKeyPropWarningGetter(props, displayName);
- }
+ if (hasValidKey(config)) {
+ {
+ checkKeyStringCoercion(config.key);
+ }
- if (ref) {
- defineRefPropWarningGetter(props, displayName);
- }
- }
+ key = '' + config.key;
+ }
- return ReactElement(type, key, ref, self, source, ReactCurrentOwner.current, props);
- }
- }
+ if (hasValidRef(config)) {
+ ref = config.ref;
+ warnIfStringRefCannotBeAutoConverted(config, self);
+ } // Remaining properties are added to a new props object
- var ReactCurrentOwner$1 = ReactSharedInternals.ReactCurrentOwner;
- var ReactDebugCurrentFrame$1 = ReactSharedInternals.ReactDebugCurrentFrame;
- function setCurrentlyValidatingElement$1(element) {
- {
- if (element) {
- var owner = element._owner;
- var stack = describeUnknownElementTypeFrameInDEV(element.type, element._source, owner ? owner.type : null);
- ReactDebugCurrentFrame$1.setExtraStackFrame(stack);
- } else {
- ReactDebugCurrentFrame$1.setExtraStackFrame(null);
- }
- }
- }
+ for (propName in config) {
+ if (hasOwnProperty.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {
+ props[propName] = config[propName];
+ }
+ } // Resolve default props
- var propTypesMisspellWarningShown;
- {
- propTypesMisspellWarningShown = false;
- }
- /**
- * Verifies the object is a ReactElement.
- * See https://reactjs.org/docs/react-api.html#isvalidelement
- * @param {?object} object
- * @return {boolean} True if `object` is a ReactElement.
- * @final
- */
+ if (type && type.defaultProps) {
+ var defaultProps = type.defaultProps;
- function isValidElement(object) {
- {
- return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
- }
- }
+ for (propName in defaultProps) {
+ if (props[propName] === undefined) {
+ props[propName] = defaultProps[propName];
+ }
+ }
+ }
+
+ if (key || ref) {
+ var displayName = typeof type === 'function' ? type.displayName || type.name || 'Unknown' : type;
+
+ if (key) {
+ defineKeyPropWarningGetter(props, displayName);
+ }
+
+ if (ref) {
+ defineRefPropWarningGetter(props, displayName);
+ }
+ }
+
+ return ReactElement(type, key, ref, self, source, ReactCurrentOwner.current, props);
+ }
+ }
- function getDeclarationErrorAddendum() {
- {
- if (ReactCurrentOwner$1.current) {
- var name = getComponentName(ReactCurrentOwner$1.current.type);
+ var ReactCurrentOwner$1 = ReactSharedInternals.ReactCurrentOwner;
+ var ReactDebugCurrentFrame$1 = ReactSharedInternals.ReactDebugCurrentFrame;
- if (name) {
- return '\n\nCheck the render method of `' + name + '`.';
- }
- }
+ function setCurrentlyValidatingElement$1(element) {
+ {
+ if (element) {
+ var owner = element._owner;
+ var stack = describeUnknownElementTypeFrameInDEV(element.type, element._source, owner ? owner.type : null);
+ ReactDebugCurrentFrame$1.setExtraStackFrame(stack);
+ } else {
+ ReactDebugCurrentFrame$1.setExtraStackFrame(null);
+ }
+ }
+ }
- return '';
- }
- }
+ var propTypesMisspellWarningShown;
- function getSourceInfoErrorAddendum(source) {
- {
- if (source !== undefined) {
- var fileName = source.fileName.replace(/^.*[\\\/]/, '');
- var lineNumber = source.lineNumber;
- return '\n\nCheck your code at ' + fileName + ':' + lineNumber + '.';
- }
+ {
+ propTypesMisspellWarningShown = false;
+ }
+ /**
+ * Verifies the object is a ReactElement.
+ * See https://reactjs.org/docs/react-api.html#isvalidelement
+ * @param {?object} object
+ * @return {boolean} True if `object` is a ReactElement.
+ * @final
+ */
+
+
+ function isValidElement(object) {
+ {
+ return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
+ }
+ }
- return '';
- }
- }
- /**
- * Warn if there's no key explicitly set on dynamic arrays of children or
- * object keys are not valid. This allows us to keep track of children between
- * updates.
- */
+ function getDeclarationErrorAddendum() {
+ {
+ if (ReactCurrentOwner$1.current) {
+ var name = getComponentNameFromType(ReactCurrentOwner$1.current.type);
+ if (name) {
+ return '\n\nCheck the render method of `' + name + '`.';
+ }
+ }
- var ownerHasKeyUseWarning = {};
+ return '';
+ }
+ }
- function getCurrentComponentErrorInfo(parentType) {
- {
- var info = getDeclarationErrorAddendum();
+ function getSourceInfoErrorAddendum(source) {
+ {
+ if (source !== undefined) {
+ var fileName = source.fileName.replace(/^.*[\\\/]/, '');
+ var lineNumber = source.lineNumber;
+ return '\n\nCheck your code at ' + fileName + ':' + lineNumber + '.';
+ }
- if (!info) {
- var parentName = typeof parentType === 'string' ? parentType : parentType.displayName || parentType.name;
+ return '';
+ }
+ }
+ /**
+ * Warn if there's no key explicitly set on dynamic arrays of children or
+ * object keys are not valid. This allows us to keep track of children between
+ * updates.
+ */
- if (parentName) {
- info = "\n\nCheck the top-level render call using <" + parentName + ">.";
- }
- }
- return info;
- }
- }
- /**
- * Warn if the element doesn't have an explicit key assigned to it.
- * This element is in an array. The array could grow and shrink or be
- * reordered. All children that haven't already been validated are required to
- * have a "key" property assigned to it. Error statuses are cached so a warning
- * will only be shown once.
- *
- * @internal
- * @param {ReactElement} element Element that requires a key.
- * @param {*} parentType element's parent's type.
- */
+ var ownerHasKeyUseWarning = {};
+ function getCurrentComponentErrorInfo(parentType) {
+ {
+ var info = getDeclarationErrorAddendum();
- function validateExplicitKey(element, parentType) {
- {
- if (!element._store || element._store.validated || element.key != null) {
- return;
- }
+ if (!info) {
+ var parentName = typeof parentType === 'string' ? parentType : parentType.displayName || parentType.name;
- element._store.validated = true;
- var currentComponentErrorInfo = getCurrentComponentErrorInfo(parentType);
+ if (parentName) {
+ info = "\n\nCheck the top-level render call using <" + parentName + ">.";
+ }
+ }
- if (ownerHasKeyUseWarning[currentComponentErrorInfo]) {
- return;
- }
+ return info;
+ }
+ }
+ /**
+ * Warn if the element doesn't have an explicit key assigned to it.
+ * This element is in an array. The array could grow and shrink or be
+ * reordered. All children that haven't already been validated are required to
+ * have a "key" property assigned to it. Error statuses are cached so a warning
+ * will only be shown once.
+ *
+ * @internal
+ * @param {ReactElement} element Element that requires a key.
+ * @param {*} parentType element's parent's type.
+ */
+
+
+ function validateExplicitKey(element, parentType) {
+ {
+ if (!element._store || element._store.validated || element.key != null) {
+ return;
+ }
- ownerHasKeyUseWarning[currentComponentErrorInfo] = true; // Usually the current owner is the offender, but if it accepts children as a
- // property, it may be the creator of the child that's responsible for
- // assigning it a key.
+ element._store.validated = true;
+ var currentComponentErrorInfo = getCurrentComponentErrorInfo(parentType);
- var childOwner = '';
+ if (ownerHasKeyUseWarning[currentComponentErrorInfo]) {
+ return;
+ }
- if (element && element._owner && element._owner !== ReactCurrentOwner$1.current) {
- // Give the component that originally created this child.
- childOwner = " It was passed a child from " + getComponentName(element._owner.type) + ".";
- }
+ ownerHasKeyUseWarning[currentComponentErrorInfo] = true; // Usually the current owner is the offender, but if it accepts children as a
+ // property, it may be the creator of the child that's responsible for
+ // assigning it a key.
- setCurrentlyValidatingElement$1(element);
+ var childOwner = '';
- error('Each child in a list should have a unique "key" prop.' + '%s%s See https://reactjs.org/link/warning-keys for more information.', currentComponentErrorInfo, childOwner);
+ if (element && element._owner && element._owner !== ReactCurrentOwner$1.current) {
+ // Give the component that originally created this child.
+ childOwner = " It was passed a child from " + getComponentNameFromType(element._owner.type) + ".";
+ }
- setCurrentlyValidatingElement$1(null);
- }
- }
- /**
- * Ensure that every element either is passed in a static location, in an
- * array with an explicit keys property defined, or in an object literal
- * with valid key property.
- *
- * @internal
- * @param {ReactNode} node Statically passed child of any type.
- * @param {*} parentType node's parent's type.
- */
+ setCurrentlyValidatingElement$1(element);
+ error('Each child in a list should have a unique "key" prop.' + '%s%s See https://reactjs.org/link/warning-keys for more information.', currentComponentErrorInfo, childOwner);
- function validateChildKeys(node, parentType) {
- {
- if (typeof node !== 'object') {
- return;
- }
+ setCurrentlyValidatingElement$1(null);
+ }
+ }
+ /**
+ * Ensure that every element either is passed in a static location, in an
+ * array with an explicit keys property defined, or in an object literal
+ * with valid key property.
+ *
+ * @internal
+ * @param {ReactNode} node Statically passed child of any type.
+ * @param {*} parentType node's parent's type.
+ */
+
+
+ function validateChildKeys(node, parentType) {
+ {
+ if (typeof node !== 'object') {
+ return;
+ }
- if (Array.isArray(node)) {
- for (var i = 0; i < node.length; i++) {
- var child = node[i];
+ if (isArray(node)) {
+ for (var i = 0; i < node.length; i++) {
+ var child = node[i];
- if (isValidElement(child)) {
- validateExplicitKey(child, parentType);
- }
- }
- } else if (isValidElement(node)) {
- // This element was passed in a valid location.
- if (node._store) {
- node._store.validated = true;
- }
- } else if (node) {
- var iteratorFn = getIteratorFn(node);
-
- if (typeof iteratorFn === 'function') {
- // Entry iterators used to provide implicit keys,
- // but now we print a separate warning for them later.
- if (iteratorFn !== node.entries) {
- var iterator = iteratorFn.call(node);
- var step;
-
- while (!(step = iterator.next()).done) {
- if (isValidElement(step.value)) {
- validateExplicitKey(step.value, parentType);
- }
- }
- }
- }
- }
- }
- }
- /**
- * Given an element, validate that its props follow the propTypes definition,
- * provided by the type.
- *
- * @param {ReactElement} element
- */
+ if (isValidElement(child)) {
+ validateExplicitKey(child, parentType);
+ }
+ }
+ } else if (isValidElement(node)) {
+ // This element was passed in a valid location.
+ if (node._store) {
+ node._store.validated = true;
+ }
+ } else if (node) {
+ var iteratorFn = getIteratorFn(node);
+
+ if (typeof iteratorFn === 'function') {
+ // Entry iterators used to provide implicit keys,
+ // but now we print a separate warning for them later.
+ if (iteratorFn !== node.entries) {
+ var iterator = iteratorFn.call(node);
+ var step;
+
+ while (!(step = iterator.next()).done) {
+ if (isValidElement(step.value)) {
+ validateExplicitKey(step.value, parentType);
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ /**
+ * Given an element, validate that its props follow the propTypes definition,
+ * provided by the type.
+ *
+ * @param {ReactElement} element
+ */
- function validatePropTypes(element) {
- {
- var type = element.type;
+ function validatePropTypes(element) {
+ {
+ var type = element.type;
- if (type === null || type === undefined || typeof type === 'string') {
- return;
- }
+ if (type === null || type === undefined || typeof type === 'string') {
+ return;
+ }
- var propTypes;
+ var propTypes;
- if (typeof type === 'function') {
- propTypes = type.propTypes;
- } else if (typeof type === 'object' && (type.$$typeof === REACT_FORWARD_REF_TYPE || // Note: Memo only checks outer props here.
- // Inner props are checked in the reconciler.
- type.$$typeof === REACT_MEMO_TYPE)) {
- propTypes = type.propTypes;
- } else {
- return;
- }
+ if (typeof type === 'function') {
+ propTypes = type.propTypes;
+ } else if (typeof type === 'object' && (type.$$typeof === REACT_FORWARD_REF_TYPE || // Note: Memo only checks outer props here.
+ // Inner props are checked in the reconciler.
+ type.$$typeof === REACT_MEMO_TYPE)) {
+ propTypes = type.propTypes;
+ } else {
+ return;
+ }
- if (propTypes) {
- // Intentionally inside to avoid triggering lazy initializers:
- var name = getComponentName(type);
- checkPropTypes(propTypes, element.props, 'prop', name, element);
- } else if (type.PropTypes !== undefined && !propTypesMisspellWarningShown) {
- propTypesMisspellWarningShown = true; // Intentionally inside to avoid triggering lazy initializers:
+ if (propTypes) {
+ // Intentionally inside to avoid triggering lazy initializers:
+ var name = getComponentNameFromType(type);
+ checkPropTypes(propTypes, element.props, 'prop', name, element);
+ } else if (type.PropTypes !== undefined && !propTypesMisspellWarningShown) {
+ propTypesMisspellWarningShown = true; // Intentionally inside to avoid triggering lazy initializers:
- var _name = getComponentName(type);
+ var _name = getComponentNameFromType(type);
- error('Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?', _name || 'Unknown');
- }
+ error('Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?', _name || 'Unknown');
+ }
- if (typeof type.getDefaultProps === 'function' && !type.getDefaultProps.isReactClassApproved) {
- error('getDefaultProps is only used on classic React.createClass ' + 'definitions. Use a static property named `defaultProps` instead.');
- }
- }
- }
- /**
- * Given a fragment, validate that it can only be provided with fragment props
- * @param {ReactElement} fragment
- */
+ if (typeof type.getDefaultProps === 'function' && !type.getDefaultProps.isReactClassApproved) {
+ error('getDefaultProps is only used on classic React.createClass ' + 'definitions. Use a static property named `defaultProps` instead.');
+ }
+ }
+ }
+ /**
+ * Given a fragment, validate that it can only be provided with fragment props
+ * @param {ReactElement} fragment
+ */
- function validateFragmentProps(fragment) {
- {
- var keys = Object.keys(fragment.props);
+ function validateFragmentProps(fragment) {
+ {
+ var keys = Object.keys(fragment.props);
- for (var i = 0; i < keys.length; i++) {
- var key = keys[i];
+ for (var i = 0; i < keys.length; i++) {
+ var key = keys[i];
- if (key !== 'children' && key !== 'key') {
- setCurrentlyValidatingElement$1(fragment);
+ if (key !== 'children' && key !== 'key') {
+ setCurrentlyValidatingElement$1(fragment);
- error('Invalid prop `%s` supplied to `React.Fragment`. ' + 'React.Fragment can only have `key` and `children` props.', key);
+ error('Invalid prop `%s` supplied to `React.Fragment`. ' + 'React.Fragment can only have `key` and `children` props.', key);
- setCurrentlyValidatingElement$1(null);
- break;
- }
- }
+ setCurrentlyValidatingElement$1(null);
+ break;
+ }
+ }
- if (fragment.ref !== null) {
- setCurrentlyValidatingElement$1(fragment);
+ if (fragment.ref !== null) {
+ setCurrentlyValidatingElement$1(fragment);
- error('Invalid attribute `ref` supplied to `React.Fragment`.');
+ error('Invalid attribute `ref` supplied to `React.Fragment`.');
- setCurrentlyValidatingElement$1(null);
- }
- }
- }
+ setCurrentlyValidatingElement$1(null);
+ }
+ }
+ }
- function jsxWithValidation(type, props, key, isStaticChildren, source, self) {
- {
- var validType = isValidElementType(type); // We warn in this case but don't throw. We expect the element creation to
- // succeed and there will likely be errors in render.
+ var didWarnAboutKeySpread = {};
+ function jsxWithValidation(type, props, key, isStaticChildren, source, self) {
+ {
+ var validType = isValidElementType(type); // We warn in this case but don't throw. We expect the element creation to
+ // succeed and there will likely be errors in render.
- if (!validType) {
- var info = '';
+ if (!validType) {
+ var info = '';
- if (type === undefined || typeof type === 'object' && type !== null && Object.keys(type).length === 0) {
- info += ' You likely forgot to export your component from the file ' + "it's defined in, or you might have mixed up default and named imports.";
- }
+ if (type === undefined || typeof type === 'object' && type !== null && Object.keys(type).length === 0) {
+ info += ' You likely forgot to export your component from the file ' + "it's defined in, or you might have mixed up default and named imports.";
+ }
- var sourceInfo = getSourceInfoErrorAddendum(source);
+ var sourceInfo = getSourceInfoErrorAddendum(source);
- if (sourceInfo) {
- info += sourceInfo;
- } else {
- info += getDeclarationErrorAddendum();
- }
+ if (sourceInfo) {
+ info += sourceInfo;
+ } else {
+ info += getDeclarationErrorAddendum();
+ }
- var typeString;
+ var typeString;
+
+ if (type === null) {
+ typeString = 'null';
+ } else if (isArray(type)) {
+ typeString = 'array';
+ } else if (type !== undefined && type.$$typeof === REACT_ELEMENT_TYPE) {
+ typeString = "<" + (getComponentNameFromType(type.type) || 'Unknown') + " />";
+ info = ' Did you accidentally export a JSX literal instead of a component?';
+ } else {
+ typeString = typeof type;
+ }
- if (type === null) {
- typeString = 'null';
- } else if (Array.isArray(type)) {
- typeString = 'array';
- } else if (type !== undefined && type.$$typeof === REACT_ELEMENT_TYPE) {
- typeString = "<" + (getComponentName(type.type) || 'Unknown') + " />";
- info = ' Did you accidentally export a JSX literal instead of a component?';
- } else {
- typeString = typeof type;
- }
+ error('React.jsx: type is invalid -- expected a string (for ' + 'built-in components) or a class/function (for composite ' + 'components) but got: %s.%s', typeString, info);
+ }
- error('React.jsx: type is invalid -- expected a string (for ' + 'built-in components) or a class/function (for composite ' + 'components) but got: %s.%s', typeString, info);
- }
+ var element = jsxDEV(type, props, key, source, self); // The result can be nullish if a mock or a custom function is used.
+ // TODO: Drop this when these are no longer allowed as the type argument.
- var element = jsxDEV(type, props, key, source, self); // The result can be nullish if a mock or a custom function is used.
- // TODO: Drop this when these are no longer allowed as the type argument.
+ if (element == null) {
+ return element;
+ } // Skip key warning if the type isn't valid since our key validation logic
+ // doesn't expect a non-string/function type and can throw confusing errors.
+ // We don't want exception behavior to differ between dev and prod.
+ // (Rendering will throw with a helpful message and as soon as the type is
+ // fixed, the key warnings will appear.)
- if (element == null) {
- return element;
- } // Skip key warning if the type isn't valid since our key validation logic
- // doesn't expect a non-string/function type and can throw confusing errors.
- // We don't want exception behavior to differ between dev and prod.
- // (Rendering will throw with a helpful message and as soon as the type is
- // fixed, the key warnings will appear.)
+ if (validType) {
+ var children = props.children;
- if (validType) {
- var children = props.children;
+ if (children !== undefined) {
+ if (isStaticChildren) {
+ if (isArray(children)) {
+ for (var i = 0; i < children.length; i++) {
+ validateChildKeys(children[i], type);
+ }
- if (children !== undefined) {
- if (isStaticChildren) {
- if (Array.isArray(children)) {
- for (var i = 0; i < children.length; i++) {
- validateChildKeys(children[i], type);
- }
+ if (Object.freeze) {
+ Object.freeze(children);
+ }
+ } else {
+ error('React.jsx: Static children should always be an array. ' + 'You are likely explicitly calling React.jsxs or React.jsxDEV. ' + 'Use the Babel transform instead.');
+ }
+ } else {
+ validateChildKeys(children, type);
+ }
+ }
+ }
- if (Object.freeze) {
- Object.freeze(children);
- }
- } else {
- error('React.jsx: Static children should always be an array. ' + 'You are likely explicitly calling React.jsxs or React.jsxDEV. ' + 'Use the Babel transform instead.');
- }
- } else {
- validateChildKeys(children, type);
- }
- }
- }
+ {
+ if (hasOwnProperty.call(props, 'key')) {
+ var componentName = getComponentNameFromType(type);
+ var keys = Object.keys(props).filter(function (k) {
+ return k !== 'key';
+ });
+ var beforeExample = keys.length > 0 ? '{key: someKey, ' + keys.join(': ..., ') + ': ...}' : '{key: someKey}';
- if (type === exports.Fragment) {
- validateFragmentProps(element);
- } else {
- validatePropTypes(element);
- }
+ if (!didWarnAboutKeySpread[componentName + beforeExample]) {
+ var afterExample = keys.length > 0 ? '{' + keys.join(': ..., ') + ': ...}' : '{}';
- return element;
- }
- } // These two functions exist to still get child warnings in dev
- // even with the prod transform. This means that jsxDEV is purely
- // opt-in behavior for better messages but that we won't stop
- // giving you warnings if you use production apis.
+ error('A props object containing a "key" prop is being spread into JSX:\n' + ' let props = %s;\n' + ' <%s {...props} />\n' + 'React keys must be passed directly to JSX without using spread:\n' + ' let props = %s;\n' + ' <%s key={someKey} {...props} />', beforeExample, componentName, afterExample, componentName);
- function jsxWithValidationStatic(type, props, key) {
- {
- return jsxWithValidation(type, props, key, true);
- }
- }
- function jsxWithValidationDynamic(type, props, key) {
- {
- return jsxWithValidation(type, props, key, false);
- }
- }
+ didWarnAboutKeySpread[componentName + beforeExample] = true;
+ }
+ }
+ }
+
+ if (type === REACT_FRAGMENT_TYPE) {
+ validateFragmentProps(element);
+ } else {
+ validatePropTypes(element);
+ }
- var jsx = jsxWithValidationDynamic ; // we may want to special case jsxs internally to take advantage of static children.
- // for now we can ship identical prod functions
+ return element;
+ }
+ } // These two functions exist to still get child warnings in dev
+ // even with the prod transform. This means that jsxDEV is purely
+ // opt-in behavior for better messages but that we won't stop
+ // giving you warnings if you use production apis.
+
+ function jsxWithValidationStatic(type, props, key) {
+ {
+ return jsxWithValidation(type, props, key, true);
+ }
+ }
+ function jsxWithValidationDynamic(type, props, key) {
+ {
+ return jsxWithValidation(type, props, key, false);
+ }
+ }
- var jsxs = jsxWithValidationStatic ;
+ var jsx = jsxWithValidationDynamic ; // we may want to special case jsxs internally to take advantage of static children.
+ // for now we can ship identical prod functions
- exports.jsx = jsx;
- exports.jsxs = jsxs;
- })();
- }
-} (reactJsxRuntime_development));
+ var jsxs = jsxWithValidationStatic ;
+
+ reactJsxRuntime_development.Fragment = REACT_FRAGMENT_TYPE;
+ reactJsxRuntime_development.jsx = jsx;
+ reactJsxRuntime_development.jsxs = jsxs;
+ })();
+ }
return reactJsxRuntime_development;
}
@@ -7581,30 +8074,11 @@ function requireReactJsxRuntime_development () {
} (jsxRuntime));
var en = {};
+
var zh = {};
+
var de = {};
-var fr = {};
-var es = {};
-var it = {};
-var ar = {};
-var th = {};
-var vi = {};
-var ms = {};
-var id = {};
-var hi = {};
-var ta = {};
-var kn = {};
-var ml = {};
-var ru = {};
-var pl = {};
-var cs = {};
-var uk = {};
-var bg = {};
-var sr = {};
-var hr = {};
-var sk = {};
-var sl = {};
-var mk = {};
+
var pt = {};
// file examples: en, enGB, zh, zhHK
@@ -7614,28 +8088,6 @@ var localeData = /*#__PURE__*/Object.freeze({
en: en,
zh: zh,
de: de,
- fr: fr,
- es: es,
- it: it,
- ar: ar,
- th: th,
- vi: vi,
- ms: ms,
- id: id,
- hi: hi,
- ta: ta,
- kn: kn,
- ml: ml,
- ru: ru,
- pl: pl,
- cs: cs,
- uk: uk,
- bg: bg,
- sr: sr,
- hr: hr,
- sk: sk,
- sl: sl,
- mk: mk,
pt: pt
});
@@ -8129,6 +8581,27 @@ function parseNumberSkeleton(tokens) {
case 'scale':
result.scale = parseFloat(token.options[0]);
continue;
+ case 'rounding-mode-floor':
+ result.roundingMode = 'floor';
+ continue;
+ case 'rounding-mode-ceiling':
+ result.roundingMode = 'ceil';
+ continue;
+ case 'rounding-mode-down':
+ result.roundingMode = 'trunc';
+ continue;
+ case 'rounding-mode-up':
+ result.roundingMode = 'expand';
+ continue;
+ case 'rounding-mode-half-even':
+ result.roundingMode = 'halfEven';
+ continue;
+ case 'rounding-mode-half-down':
+ result.roundingMode = 'halfTrunc';
+ continue;
+ case 'rounding-mode-half-up':
+ result.roundingMode = 'halfExpand';
+ continue;
// https://unicode-org.github.io/icu/userguide/format_parse/numbers/skeletons.html#integer-width
case 'integer-width':
if (token.options.length > 1) {
@@ -11194,16 +11667,11 @@ originalMessage) {
continue;
}
var varName = el.value;
- var value = "";
// Enforce that all required values are provided by the caller.
if (!(values && varName in values)) {
- console.log("No value provided for the variable \"" + varName + "\". " + originalMessage);
- // throw new MissingValueError(varName, originalMessage);
- value = varName;
- }
- else {
- value = values[varName];
+ throw new MissingValueError(varName, originalMessage);
}
+ var value = values[varName];
if (isArgumentElement(el)) {
if (!value || typeof value === 'string' || typeof value === 'number') {
value =
@@ -11452,7 +11920,7 @@ var IntlMessageFormat$1 = /** @class */ (function () {
this.ast = message;
}
if (!Array.isArray(this.ast)) {
- throw new TypeError('A message must be provided as a String or AST. ' + this.ast);
+ throw new TypeError('A message must be provided as a String or AST.');
}
// Creates a new object with the specified `formats` merged with the default
// formats.
@@ -11555,16 +12023,16 @@ See the accompanying LICENSE file for terms.
*/
var IntlMessageFormat = IntlMessageFormat$1;
+// this is a copy of the translator from ../../lib/index.js
+// TODO: check if this file is used at all
var defaultLocale = "en";
var locales = [defaultLocale];
-
// Falk - Adapted the central translator to check if a localStorage key is existing.
-
-const uiLanguage = localStorage.getItem('lowcoder_uiLanguage');
+var uiLanguage = localStorage.getItem('lowcoder_uiLanguage');
if (globalThis.navigator) {
- if (uiLanguage) {
+ if (uiLanguage) {
locales = [uiLanguage];
- }
+ }
else if (navigator.languages && navigator.languages.length > 0) {
locales = __spreadArray([], navigator.languages, true);
}
@@ -11572,7 +12040,6 @@ if (globalThis.navigator) {
locales = [navigator.language || navigator.userLanguage || defaultLocale];
}
}
-
function parseLocale(s) {
var locale = s.trim();
if (!locale) {
@@ -11632,13 +12099,12 @@ function getDataByLocale(fileData, suffix, filterLocales, targetLocales) {
return { data: data, language: name_1.slice(0, 2) };
}
}
- // throw new Error("Not found ".concat(names));
- // better to continue the app without crashing
console.error("Not found ".concat(names));
+ // return fallback data for en language
+ return { data: fileData['en'], language: 'en' };
+ // throw new Error(`Not found ${names}`);
}
-
var globalMessageKeyPrefix = "@";
-
var globalMessages = Object.fromEntries(Object.entries(getDataByLocale(localeData, "").data).map(function (_a) {
var k = _a[0], v = _a[1];
return [
@@ -11647,59 +12113,51 @@ var globalMessages = Object.fromEntries(Object.entries(getDataByLocale(localeDat
];
}));
var Translator = /** @class */ (function () {
- function Translator(fileData, filterLocales, locales) {
- var _a = getDataByLocale(fileData, "", filterLocales, locales), data = _a.data, language = _a.language;
- this.messages = Object.assign({}, data, globalMessages);
- this.language = language;
- this.trans = this.trans.bind(this);
- this.transToNode = this.transToNode.bind(this);
- }
-
- Translator.prototype.trans = function (key, variables) {
- return this.transToNode(key, variables).toString();
- };
-
- Translator.prototype.transToNode = function (key, variables) {
- var message = this.getMessage(key);
- var node = new IntlMessageFormat(message, i18n.locale).format(variables);
- if (Array.isArray(node)) {
- return node.map(function (n, i) { return jsxRuntimeExports.jsx(reactExports.Fragment, { children: n }, i); });
- }
- return node;
- };
-
- Translator.prototype.getMessage = function (key) {
- var value = this.getNestedMessage(this.messages, key);
-
- // Fallback to English if the message is not found
- if (value === undefined) {
- value = this.getNestedMessage(localeData.en, key); // Assuming localeData.en contains English translations
- }
-
- // If still not found, return a default message or the key itself
- if (value === undefined) {
- console.warn(`Translation missing for key: ${key}`);
- return `oups! ${key}`; // or simply return the key
- }
-
- return value;
- };
-
- Translator.prototype.getNestedMessage = function (obj, key) {
- for (var _i = 0, _a = key.split("."); _i < _a.length; _i++) {
- var k = _a[_i];
- if (obj !== undefined) {
- obj = obj[k];
- }
- }
- return obj;
- };
-
- return Translator;
+ function Translator(fileData, filterLocales, locales) {
+ var _a = getDataByLocale(fileData, "", filterLocales, locales), data = _a.data, language = _a.language;
+ this.messages = Object.assign({}, data, globalMessages);
+ this.language = language;
+ this.trans = this.trans.bind(this);
+ this.transToNode = this.transToNode.bind(this);
+ }
+ Translator.prototype.trans = function (key, variables) {
+ return this.transToNode(key, variables).toString();
+ };
+ Translator.prototype.transToNode = function (key, variables) {
+ var message = this.getMessage(key);
+ var node = new IntlMessageFormat(message, i18n.locale).format(variables);
+ if (Array.isArray(node)) {
+ return node.map(function (n, i) { return jsxRuntimeExports.jsx(reactExports.Fragment, { children: n }, i); });
+ }
+ return node;
+ };
+ Translator.prototype.getMessage = function (key) {
+ var message = this.getNestedMessage(this.messages, key);
+ // Fallback to English if the message is not found
+ if (message === undefined) {
+ message = this.getNestedMessage(en, key); // Assuming localeData.en contains English translations
+ }
+ // If still not found, return a default message or the key itself
+ if (message === undefined) {
+ console.warn("Translation missing for key: ".concat(key));
+ message = "oups! ".concat(key);
+ }
+ return message;
+ };
+ Translator.prototype.getNestedMessage = function (obj, key) {
+ for (var _i = 0, _a = key.split("."); _i < _a.length; _i++) {
+ var k = _a[_i];
+ if (obj !== undefined) {
+ obj = obj[k];
+ }
+ }
+ return obj;
+ };
+ return Translator;
}());
-
function getI18nObjects(fileData, filterLocales) {
- return getDataByLocale(fileData, "Obj", filterLocales)?.data;
+ var _a;
+ return (_a = getDataByLocale(fileData, "Obj", filterLocales)) === null || _a === void 0 ? void 0 : _a.data;
}
export { AbstractComp, AbstractNode, CachedNode, CodeNode, CompActionTypes, FetchCheckNode, FunctionNode, MultiBaseComp, RecordNode, RelaxedJsonParser, SimpleAbstractComp, SimpleComp, SimpleNode, Translator, ValueAndMsg, WrapContextNodeV2, WrapNode, changeChildAction, changeDependName, changeEditDSLAction, changeValueAction, clearMockWindow, clearStyleEval, customAction, deferAction, deleteCompAction, dependingNodeMapEquals, evalFunc, evalFunctionResult, evalNodeOrMinor, evalPerfUtil, evalScript, evalStyle, executeQueryAction, fromRecord, fromUnevaledValue, fromValue, fromValueWithCache, getDynamicStringSegments, getI18nObjects, getValueByLocale, i18n, isBroadcastAction, isChildAction, isCustomAction, isDynamicSegment, isFetching, isMyCustomAction, mergeExtra, multiChangeAction, nodeIsRecord, onlyEvalAction, relaxedJSONToJSON, renameAction, replaceCompAction, routeByNameAction, transformWrapper, triggerModuleEventAction, unwrapChildAction, updateActionContextAction, updateNodesV2Action, withFunction, wrapActionExtraInfo, wrapChildAction, wrapContext, wrapDispatch };
diff --git a/client/packages/lowcoder-core/src/eval/utils/evalStyle.ts b/client/packages/lowcoder-core/src/eval/utils/evalStyle.ts
index 55e5728fd..b54322727 100644
--- a/client/packages/lowcoder-core/src/eval/utils/evalStyle.ts
+++ b/client/packages/lowcoder-core/src/eval/utils/evalStyle.ts
@@ -4,15 +4,15 @@ function styleNamespace(id: string) {
return `style-for-${id}`;
}
-export function evalStyle(id: string, css: string[]) {
+export function evalStyle(id: string, css: string[], globalStyle?: boolean) {
const styleId = styleNamespace(id);
-
+ const prefixId = globalStyle ? id : `#${id}`
let compiledCSS = "";
css.forEach((i) => {
if (!i.trim()) {
return;
}
- compiledCSS += serialize(compile(`#${id}{${i}}`), middleware([prefixer, stringify]));
+ compiledCSS += serialize(compile(`${prefixId}{${i}}`), middleware([prefixer, stringify]));
});
let styleNode = document.querySelector(`#${styleId}`);
diff --git a/client/packages/lowcoder-core/src/i18n/index.tsx b/client/packages/lowcoder-core/src/i18n/index.tsx
index 553d25d8d..506370a23 100644
--- a/client/packages/lowcoder-core/src/i18n/index.tsx
+++ b/client/packages/lowcoder-core/src/i18n/index.tsx
@@ -105,7 +105,10 @@ function getDataByLocale<T>(
return { data: data as T, language: name.slice(0, 2) };
}
}
+
console.error(`Not found ${names}`);
+ // return fallback data for en language
+ return { data: fileData['en'], language: 'en'};
// throw new Error(`Not found ${names}`);
}
@@ -178,7 +181,7 @@ export class Translator<Messages extends object> {
// If still not found, return a default message or the key itself
if (message === undefined) {
console.warn(`Translation missing for key: ${key}`);
- `oups! ${key}`;
+ message = `oups! ${key}`;
}
return message;
diff --git a/client/packages/lowcoder-design/src/components/Section.tsx b/client/packages/lowcoder-design/src/components/Section.tsx
index 92fc4f3f3..61d794c6e 100644
--- a/client/packages/lowcoder-design/src/components/Section.tsx
+++ b/client/packages/lowcoder-design/src/components/Section.tsx
@@ -177,6 +177,7 @@ export const sectionNames = {
meetings: trans("prop.meetings"), // added by Falk Wolsky
field: trans("prop.field"),
inputFieldStyle:trans("prop.inputFieldStyle"),
+ childrenInputFieldStyle:trans("prop.childrenInputFieldStyle"),
avatarStyle:trans("prop.avatarStyle"),
captionStyle:trans("prop.captionStyle"),
startButtonStyle:trans("prop.startButtonStyle"),
diff --git a/client/packages/lowcoder-design/src/components/colorSelect/index.tsx b/client/packages/lowcoder-design/src/components/colorSelect/index.tsx
index 7249ff330..24c091256 100644
--- a/client/packages/lowcoder-design/src/components/colorSelect/index.tsx
+++ b/client/packages/lowcoder-design/src/components/colorSelect/index.tsx
@@ -29,7 +29,7 @@ export const ColorSelect = (props: ColorSelectProps) => {
dispatch && dispatch(changeValueAction(toHex(rgbaColor), true));
changeColor && changeColor(toHex(rgbaColor));
}, 200),
- [dispatch]
+ [dispatch,changeColor]
);
return (
<Popover
diff --git a/client/packages/lowcoder-design/src/components/iconSelect/index.tsx b/client/packages/lowcoder-design/src/components/iconSelect/index.tsx
index 85643d344..6eac2f7b6 100644
--- a/client/packages/lowcoder-design/src/components/iconSelect/index.tsx
+++ b/client/packages/lowcoder-design/src/components/iconSelect/index.tsx
@@ -355,6 +355,7 @@ export const IconSelectBase = (props: {
const { setVisible, parent } = props;
return (
<Popover
+ zIndex={4000}
trigger={props.trigger}
placement="left"
align={{ offset: [props.leftOffset ?? 0, 0, 0, 0] }}
diff --git a/client/packages/lowcoder-design/src/i18n/design/locales/en.ts b/client/packages/lowcoder-design/src/i18n/design/locales/en.ts
index 99fd5ceef..0a5631957 100644
--- a/client/packages/lowcoder-design/src/i18n/design/locales/en.ts
+++ b/client/packages/lowcoder-design/src/i18n/design/locales/en.ts
@@ -30,6 +30,7 @@ export const en = {
data: "Data",
field: 'Field',
inputFieldStyle: 'Input Field Style',
+ childrenInputFieldStyle: 'Children Input Field Style',
avatarStyle: 'Avatar Style',
captionStyle: 'Caption Style',
startButtonStyle: 'Start Button Style',
diff --git a/client/packages/lowcoder-sdk/package.json b/client/packages/lowcoder-sdk/package.json
index 2c3ffb289..e776ddc21 100644
--- a/client/packages/lowcoder-sdk/package.json
+++ b/client/packages/lowcoder-sdk/package.json
@@ -1,6 +1,6 @@
{
"name": "lowcoder-sdk",
- "version": "2.4.4",
+ "version": "2.4.5",
"type": "module",
"files": [
"src",
diff --git a/client/packages/lowcoder/package.json b/client/packages/lowcoder/package.json
index 69c5e2817..03c4ace78 100644
--- a/client/packages/lowcoder/package.json
+++ b/client/packages/lowcoder/package.json
@@ -25,10 +25,10 @@
"@fortawesome/free-solid-svg-icons": "^6.5.1",
"@fortawesome/react-fontawesome": "latest",
"@manaflair/redux-batch": "^1.0.0",
- "@rjsf/antd": "^5.15.1",
- "@rjsf/core": "^5.15.1",
- "@rjsf/utils": "^5.15.1",
- "@rjsf/validator-ajv8": "^5.15.1",
+ "@rjsf/antd": "^5.18.6",
+ "@rjsf/core": "^5.18.6",
+ "@rjsf/utils": "^5.18.6",
+ "@rjsf/validator-ajv8": "^5.18.6",
"@types/lodash": "^4.14.194",
"@types/node": "^16.7.13",
"@types/react": "^18.2.45",
@@ -68,6 +68,7 @@
"react-documents": "^1.2.1",
"react-dom": "^18.2.0",
"react-draggable": "^4.4.4",
+ "react-error-boundary": "^4.0.13",
"react-grid-layout": "^1.3.0",
"react-helmet": "^6.1.0",
"react-joyride": "^2.4.0",
diff --git a/client/packages/lowcoder/src/api/commonSettingApi.ts b/client/packages/lowcoder/src/api/commonSettingApi.ts
index 135794440..d199cd9c5 100644
--- a/client/packages/lowcoder/src/api/commonSettingApi.ts
+++ b/client/packages/lowcoder/src/api/commonSettingApi.ts
@@ -2,6 +2,7 @@ import Api from "./api";
import { AxiosPromise } from "axios";
import { ApiResponse, GenericApiResponse } from "./apiResponses";
import { trans } from "i18n";
+import { JSONObject } from "@lowcoder-ee/util/jsonTypes";
export type FetchCommonSettingPayload = {
orgId: string;
@@ -12,6 +13,7 @@ export interface CommonSettingResponseData {
themeList?: ThemeType[];
defaultTheme?: string | null;
preloadCSS?: string | null;
+ preloadGlobalCSS?: string | null;
preloadJavaScript?: string | null;
runJavaScriptInHost?: boolean | null;
preloadLibs?: string[] | null;
@@ -42,12 +44,19 @@ export interface ThemeDetail {
textLight: string;
canvas: string; // app bg-color
primarySurface: string; // comp bg-color
- borderRadius: string;
+ borderRadius?: string; // will be depreceated
+ borderColor?: string; // will be depreceated
+ radius?: string;
+ border?: string;
+ borderWidth?: string;
+ borderStyle?: string;
chart?: string;
margin?: string;
padding?: string;
gridColumns?: string; //Added By Aqib Mirza
+ text?: string;
textSize?: string;
+ fontFamily?: string;
animation?: string;
animationDelay?: string;
animationDuration?: string;
@@ -55,31 +64,25 @@ export interface ThemeDetail {
boxShadow?: string;
boxShadowColor?: string;
animationIterationCount?: string;
+ components?: Record<string, JSONObject>;
}
export function getThemeDetailName(key: keyof ThemeDetail) {
switch (key) {
- case "primary":
- return trans("themeDetail.primary");
- case "textDark":
- return trans("themeDetail.textDark");
- case "textLight":
- return trans("themeDetail.textLight");
- case "canvas":
- return trans("themeDetail.canvas");
- case "primarySurface":
- return trans("themeDetail.primarySurface");
- case "borderRadius":
- return trans("themeDetail.borderRadius");
- case "margin":
- return trans("style.margin");
- case "padding":
- return trans("style.padding");
- //Added By Aqib Mirza
- case "gridColumns":
- return trans("themeDetail.gridColumns");
- case "textSize":
- return trans("style.textSize");
+ case "primary": return trans("themeDetail.primary");
+ case "textDark": return trans("themeDetail.textDark");
+ case "textLight": return trans("themeDetail.textLight");
+ case "canvas": return trans("themeDetail.canvas");
+ case "primarySurface": return trans("themeDetail.primarySurface");
+ case "radius": return trans("themeDetail.borderRadius");
+ case "border": return trans("themeDetail.borderColor");
+ case "borderWidth": return trans("themeDetail.borderWidth");
+ case "borderStyle": return trans("themeDetail.borderStyle");
+ case "fontFamily": return trans("themeDetail.fontFamily");
+ case "margin": return trans("style.margin");
+ case "padding": return trans("style.padding");
+ case "gridColumns": return trans("themeDetail.gridColumns");
+ case "textSize": return trans("style.textSize");
}
return "";
}
@@ -91,9 +94,16 @@ export function isThemeColorKey(key: string) {
case "textLight":
case "canvas":
case "primarySurface":
+ case "borderRadius":
+ case "borderColor":
+ case "radius":
+ case "border":
+ case "borderWidth":
+ case "borderStyle":
+ case "fontFamily":
case "margin":
case "padding":
- case "gridColumns": //Added By Aqib Mirza
+ case "gridColumns":
case "textSize":
return true;
}
diff --git a/client/packages/lowcoder/src/app.tsx b/client/packages/lowcoder/src/app.tsx
index 1e9b5ebb1..cc0aeb95b 100644
--- a/client/packages/lowcoder/src/app.tsx
+++ b/client/packages/lowcoder/src/app.tsx
@@ -49,10 +49,13 @@ import { initApp } from "util/commonUtils";
import { favicon } from "assets/images";
import { hasQueryParam } from "util/urlUtils";
import { isFetchUserFinished } from "redux/selectors/usersSelectors"; // getCurrentUser,
+import { getIsCommonSettingFetched } from "redux/selectors/commonSettingSelectors";
import { SystemWarning } from "./components/SystemWarning";
import { getBrandingConfig } from "./redux/selectors/configSelectors";
import { buildMaterialPreviewURL } from "./util/materialUtils";
import GlobalInstances from 'components/GlobalInstances';
+import posthog from 'posthog-js'
+import { fetchHomeData } from "./redux/reduxActions/applicationActions";
const LazyUserAuthComp = React.lazy(() => import("pages/userAuth"));
const LazyInviteLanding = React.lazy(() => import("pages/common/inviteLanding"));
@@ -78,10 +81,15 @@ const Wrapper = (props: { children: React.ReactNode, language: string }) => (
type AppIndexProps = {
isFetchUserFinished: boolean;
+ getIsCommonSettingFetched: boolean;
currentOrgId?: string;
+ currentUserId: string;
+ currentUserAnonymous: boolean;
orgDev: boolean;
defaultHomePage: string | null | undefined;
+ fetchHomeDataFinished: boolean;
fetchConfig: (orgId?: string) => void;
+ fetchHomeData: (currentUserAnonymous?: boolean | undefined) => void;
getCurrentUser: () => void;
favicon: string;
brandName: string;
@@ -91,23 +99,36 @@ type AppIndexProps = {
class AppIndex extends React.Component<AppIndexProps, any> {
componentDidMount() {
this.props.getCurrentUser();
+ // if (!this.props.currentUserAnonymous) {
+ // this.props.fetchHomeData(this.props.currentUserAnonymous);
+ // }
}
componentDidUpdate(prevProps: AppIndexProps) {
- if(prevProps.currentOrgId !== this.props.currentOrgId && this.props.currentOrgId !== '') {
+ if (
+ prevProps.currentOrgId !== this.props.currentOrgId &&
+ this.props.currentOrgId !== ''
+ ) {
this.props.fetchConfig(this.props.currentOrgId);
+ if (!this.props.currentUserAnonymous) {
+ this.props.fetchHomeData(this.props.currentUserAnonymous);
+ }
}
}
-
render() {
- const isTemplate = hasQueryParam("template");
+ const isTemplate = hasQueryParam('template');
const pathname = history.location.pathname;
// we check if we are on the public cloud
const isLowCoderDomain = window.location.hostname === 'app.lowcoder.cloud';
+ const isLocalhost = window.location.hostname === 'localhost';
+
+ if (isLocalhost || isLowCoderDomain) {
+ posthog.init('phc_lD36OXeppUehLgI33YFhioTpXqThZ5QqR8IWeKvXP7f', { api_host: 'https://eu.i.posthog.com', person_profiles: 'always' });
+ }
// make sure all users in this app have checked login info
- if (!this.props.isFetchUserFinished) {
+ if (!this.props.isFetchUserFinished || (this.props.currentUserId && !this.props.fetchHomeDataFinished)) {
const hideLoadingHeader = isTemplate || isAuthUnRequired(pathname);
return <ProductLoading hideHeader={hideLoadingHeader} />;
}
@@ -115,124 +136,246 @@ class AppIndex extends React.Component<AppIndexProps, any> {
// persisting the language in local storage
localStorage.setItem('lowcoder_uiLanguage', this.props.uiLanguage);
- // console.log("this.props.defaultHomePage: ", this.props.defaultHomePage)
-
return (
<Wrapper language={this.props.uiLanguage}>
<Helmet>
{<title>{this.props.brandName}</title>}
{<link rel="icon" href={this.props.favicon} />}
- <meta name="description" content={trans("productDesc")} />
- <meta name="keywords" content="Lowcoder, Applications, App Builder, Internal Applications, Websites, Dashboards, Data Visualization, Customer Applications, CRM, ERP, eCommerce, VideoMeeting, Rapid Development" />
+ <meta name="description" content={trans('productDesc')} />
+ <meta
+ name="keywords"
+ content="Lowcoder, Applications, App Builder, Internal Applications, Websites, Dashboards, Data Visualization, Customer Applications, CRM, ERP, eCommerce, VideoMeeting, Rapid Development"
+ />
<meta name="author" content="Lowcoder Software LTD" />
<meta name="robots" content="index, follow" />
-
- <meta key="og:title" property="og:title" content={this.props.brandName} />
- <meta key="og:description" property="og:description" content={trans("productDesc")} />
- <meta key="og:image" property="og:image" content="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/main/images/App%20Editor%20%7C%20Main%20Screeen%20clean%20v2.4.0.png" />
+ <meta
+ key="og:title"
+ property="og:title"
+ content={this.props.brandName}
+ />
+ <meta
+ key="og:description"
+ property="og:description"
+ content={trans('productDesc')}
+ />
+ <meta
+ key="og:image"
+ property="og:image"
+ content="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/main/images/App%20Editor%20%7C%20Main%20Screeen%20clean%20v2.4.0.png"
+ />
<meta key="og:url" property="og:url" content={window.location.href} />
<meta key="og:type" property="og:type" content="website" />
- <meta key="twitter:card" name="twitter:card" content="summary_large_image" />
- <meta key="twitter:title" name="twitter:title" content={this.props.brandName} />
- <meta key="twitter:description" name="twitter:description" content={trans("productDesc")} />
- <meta key="twitter:image" name="twitter:image" content="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/main/images/App%20Editor%20%7C%20Main%20Screeen%20clean%20v2.4.0.png" />
+ <meta
+ key="twitter:card"
+ name="twitter:card"
+ content="summary_large_image"
+ />
+ <meta
+ key="twitter:title"
+ name="twitter:title"
+ content={this.props.brandName}
+ />
+ <meta
+ key="twitter:description"
+ name="twitter:description"
+ content={trans('productDesc')}
+ />
+ <meta
+ key="twitter:image"
+ name="twitter:image"
+ content="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/main/images/App%20Editor%20%7C%20Main%20Screeen%20clean%20v2.4.0.png"
+ />
- <meta key="viewport" name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
- <meta key="mobile-web-app-capable" name="mobile-web-app-capable" content="yes" />
+ <meta
+ key="viewport"
+ name="viewport"
+ content="width=device-width, initial-scale=1, shrink-to-fit=no"
+ />
+ <meta
+ key="mobile-web-app-capable"
+ name="mobile-web-app-capable"
+ content="yes"
+ />
<meta key="theme-color" name="theme-color" content="#b480de" />
- <meta key="apple-mobile-web-app-capable" name="apple-mobile-web-app-capable" content="yes" />
- <meta key="apple-mobile-web-app-status-bar-style" name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
- <meta key="apple-mobile-web-app-title" name="apple-mobile-web-app-title" content={this.props.brandName} />
- <link key="apple-touch-icon" rel="apple-touch-icon" href="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/main/images/Lowcoder%20Logo%20512.png" />
- <link key="apple-touch-startup-image" rel="apple-touch-startup-image" href="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/main/images/Lowcoder%20Logo%20512.png" />
+ <meta
+ key="apple-mobile-web-app-capable"
+ name="apple-mobile-web-app-capable"
+ content="yes"
+ />
+ <meta
+ key="apple-mobile-web-app-status-bar-style"
+ name="apple-mobile-web-app-status-bar-style"
+ content="black-translucent"
+ />
+ <meta
+ key="apple-mobile-web-app-title"
+ name="apple-mobile-web-app-title"
+ content={this.props.brandName}
+ />
+ <link
+ key="apple-touch-icon"
+ rel="apple-touch-icon"
+ href="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/main/images/Lowcoder%20Logo%20512.png"
+ />
+ <link
+ key="apple-touch-startup-image"
+ rel="apple-touch-startup-image"
+ href="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/main/images/Lowcoder%20Logo%20512.png"
+ />
- <meta key="application-name" name="application-name" content={this.props.brandName} />
- <meta key="msapplication-TileColor" name="msapplication-TileColor" content="#b480de" />
- <meta key="msapplication-TileImage" name="msapplication-TileImage" content="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/main/images/Lowcoder%20Logo%20150.png" />
+ <meta
+ key="application-name"
+ name="application-name"
+ content={this.props.brandName}
+ />
+ <meta
+ key="msapplication-TileColor"
+ name="msapplication-TileColor"
+ content="#b480de"
+ />
+ <meta
+ key="msapplication-TileImage"
+ name="msapplication-TileImage"
+ content="https://raw.githubusercontent.com/lowcoder-org/lowcoder-media-assets/main/images/Lowcoder%20Logo%20150.png"
+ />
{/* }<meta key="msapplication-config" name="msapplication-config" content="https://www.yourdomain.com/path/to/browserconfig.xml" />, */}
<link rel="canonical" href={window.location.href} />
{isLowCoderDomain && [
// Adding Support for iframely to be able to embedd the component explorer in the docu
- <meta key="iframely:title" property="iframely:title" content={this.props.brandName} />,
- <meta key="iframely:description" property="iframely:description" content={trans("productDesc")} />,
+ <meta
+ key="iframely:title"
+ property="iframely:title"
+ content={this.props.brandName}
+ />,
+ <meta
+ key="iframely:description"
+ property="iframely:description"
+ content={trans('productDesc')}
+ />,
- <link key="preconnect-googleapis" rel="preconnect" href="https://fonts.googleapis.com" />,
- <link key="preconnect-gstatic" rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />,
- <link key="font-ubuntu" href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,700;1,400&display=swap" rel="stylesheet" />,
+ <link
+ key="preconnect-googleapis"
+ rel="preconnect"
+ href="https://fonts.googleapis.com"
+ />,
+ <link
+ key="preconnect-gstatic"
+ rel="preconnect"
+ href="https://fonts.gstatic.com"
+ crossOrigin="anonymous"
+ />,
+ <link
+ key="font-ubuntu"
+ href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,700;1,400&display=swap"
+ rel="stylesheet"
+ />,
// adding Clearbit Support for Analytics
- <script key="clearbit-script" src="https://tag.clearbitscripts.com/v1/pk_dfbc0aeefb28dc63475b67134facf127/tags.js" referrerPolicy="strict-origin-when-cross-origin" type="text/javascript"></script>
+ <script
+ key="clearbit-script"
+ src="https://tag.clearbitscripts.com/v1/pk_dfbc0aeefb28dc63475b67134facf127/tags.js"
+ referrerPolicy="strict-origin-when-cross-origin"
+ type="text/javascript"
+ ></script>,
]}
</Helmet>
<SystemWarning />
- <Router history={history}>
- <Switch>
-
- {/*
- // we decided to show the org homepage in a own navigation page
- {!this.props.orgDev && !!this.props.defaultHomePage ? (
- <Redirect exact from={BASE_URL} to={APPLICATION_VIEW_URL(this.props.defaultHomePage, "view")}
+ <Router history={history}>
+ <Switch>
+ <LazyRoute
+ exact
+ path={IMPORT_APP_FROM_TEMPLATE_URL}
+ component={LazyAppFromTemplate}
+ />
+ <LazyRoute
+ fallback="layout"
+ path={APP_EDITOR_URL}
+ component={LazyAppEditor}
+ />
+ <LazyRoute
+ fallback="layout"
+ path={[
+ USER_PROFILE_URL,
+ NEWS_URL,
+ ORG_HOME_URL,
+ ALL_APPLICATIONS_URL,
+ DATASOURCE_CREATE_URL,
+ DATASOURCE_EDIT_URL,
+ DATASOURCE_URL,
+ QUERY_LIBRARY_URL,
+ FOLDERS_URL,
+ FOLDER_URL,
+ TRASH_URL,
+ SETTING,
+ MARKETPLACE_URL,
+ ADMIN_APP_URL,
+ API_DOCS_URL,
+ ]}
+ // component={ApplicationListPage}
+ component={LazyApplicationHome}
+ />
+ <LazyRoute path={USER_AUTH_URL} component={LazyUserAuthComp} />
+ <LazyRoute
+ path={ORG_AUTH_LOGIN_URL}
+ component={LazyUserAuthComp}
+ />
+ <LazyRoute
+ path={ORG_AUTH_REGISTER_URL}
+ component={LazyUserAuthComp}
+ />
+ <LazyRoute
+ path={ORG_AUTH_FORGOT_PASSWORD_URL}
+ component={LazyUserAuthComp}
/>
- ) : (
- <Redirect exact from={BASE_URL} to={USER_PROFILE_URL} />
- )}
- {!this.props.orgDev && !!this.props.defaultHomePage && (
- <Redirect exact from={ALL_APPLICATIONS_URL} to={APPLICATION_VIEW_URL(this.props.defaultHomePage, "view")}
+ <LazyRoute
+ path={ORG_AUTH_RESET_PASSWORD_URL}
+ component={LazyUserAuthComp}
/>
- )} */}
+ <LazyRoute
+ path={INVITE_LANDING_URL}
+ component={LazyInviteLanding}
+ />
+ <LazyRoute
+ path={`${COMPONENT_DOC_URL}/:name`}
+ component={LazyComponentDoc}
+ />
+ <LazyRoute
+ path={`/playground/:name/:dsl`}
+ component={LazyComponentPlayground}
+ />
+
+ {this.props.isFetchUserFinished && this.props.defaultHomePage? (
+ !this.props.orgDev ? (
+ <Redirect exact from={BASE_URL} to={APPLICATION_VIEW_URL(this.props.defaultHomePage || "", "view")}/>
+ ) : (
+ <Redirect exact from={BASE_URL} to={ORG_HOME_URL} />
+ )
+ ) : (
+ <Redirect exact from={BASE_URL} to={ALL_APPLICATIONS_URL} />
+ )}
- {!this.props.orgDev ? (
- <Redirect exact from={BASE_URL} to={ORG_HOME_URL} />
- ) : (
- <Redirect exact from={BASE_URL} to={ALL_APPLICATIONS_URL} />
- )}
-
- <LazyRoute exact path={IMPORT_APP_FROM_TEMPLATE_URL} component={LazyAppFromTemplate} />
- <LazyRoute fallback="layout" path={APP_EDITOR_URL} component={LazyAppEditor} />
- <LazyRoute
- fallback="layout"
- path={[
- USER_PROFILE_URL,
- NEWS_URL,
- ORG_HOME_URL,
- ALL_APPLICATIONS_URL,
- DATASOURCE_CREATE_URL,
- DATASOURCE_EDIT_URL,
- DATASOURCE_URL,
- QUERY_LIBRARY_URL,
- FOLDERS_URL,
- FOLDER_URL,
- TRASH_URL,
- SETTING,
- MARKETPLACE_URL,
- ADMIN_APP_URL,
- API_DOCS_URL,
- ]}
- // component={ApplicationListPage}
- component={LazyApplicationHome}
- />
- <LazyRoute path={USER_AUTH_URL} component={LazyUserAuthComp} />
- <LazyRoute path={ORG_AUTH_LOGIN_URL} component={LazyUserAuthComp} />
- <LazyRoute path={ORG_AUTH_REGISTER_URL} component={LazyUserAuthComp} />
- <LazyRoute path={ORG_AUTH_FORGOT_PASSWORD_URL} component={LazyUserAuthComp} />
- <LazyRoute path={ORG_AUTH_RESET_PASSWORD_URL} component={LazyUserAuthComp} />
- <LazyRoute path={INVITE_LANDING_URL} component={LazyInviteLanding} />
- <LazyRoute path={`${COMPONENT_DOC_URL}/:name`} component={LazyComponentDoc} />
- <LazyRoute path={`/playground/:name/:dsl`} component={LazyComponentPlayground} />
- <Redirect to={`${COMPONENT_DOC_URL}/input`} path="/components" />
- {developEnv() && (
- <>
- <LazyRoute path="/debug_comp/:name" component={LazyDebugComp} />
- <LazyRoute exact path="/debug_comp" component={LazyDebugComp} />
- <LazyRoute path="/debug_editor" component={LazyAppEditor} />
- <LazyRoute path="/debug_new" component={LazyDebugNewComp} />
- </>
- )}
- </Switch>
- </Router>
+ <Redirect to={`${COMPONENT_DOC_URL}/input`} path="/components" />
+
+ {developEnv() && (
+ <>
+ <LazyRoute
+ path="/debug_comp/:name"
+ component={LazyDebugComp}
+ />
+ <LazyRoute
+ exact
+ path="/debug_comp"
+ component={LazyDebugComp}
+ />
+ <LazyRoute path="/debug_editor" component={LazyAppEditor} />
+ <LazyRoute path="/debug_new" component={LazyDebugNewComp} />
+ </>
+ )}
+ </Switch>
+ </Router>
</Wrapper>
);
}
@@ -240,9 +383,13 @@ class AppIndex extends React.Component<AppIndexProps, any> {
const mapStateToProps = (state: AppState) => ({
isFetchUserFinished: isFetchUserFinished(state),
+ getIsCommonSettingFetched: getIsCommonSettingFetched(state),
orgDev: state.ui.users.user.orgDev,
+ currentUserId: state.ui.users.currentUser.id,
+ currentUserAnonymous: state.ui.users.currentUser.name === "ANONYMOUS",
currentOrgId: state.ui.users.user.currentOrgId,
defaultHomePage: state.ui.application.homeOrg?.commonSettings.defaultHomePage,
+ fetchHomeDataFinished: Boolean(state.ui.application.homeOrg?.commonSettings),
favicon: getBrandingConfig(state)?.favicon
? buildMaterialPreviewURL(getBrandingConfig(state)?.favicon!)
: favicon,
@@ -255,6 +402,15 @@ const mapDispatchToProps = (dispatch: any) => ({
dispatch(fetchUserAction());
},
fetchConfig: (orgId?: string) => dispatch(fetchConfigAction(orgId)),
+ fetchHomeData: (currentUserAnonymous: boolean | undefined) => {
+ // the rule should be that if the user is not logged in and if he want to view an App, we should not fetch the home data
+ if (window.location.pathname == APP_EDITOR_URL && !currentUserAnonymous && !currentUserAnonymous === undefined) {
+ dispatch(fetchHomeData({}));
+ }
+ else {
+ dispatch(fetchHomeData({}));
+ }
+ }
});
const AppIndexWithProps = connect(mapStateToProps, mapDispatchToProps)(AppIndex);
@@ -267,7 +423,7 @@ export function bootstrap() {
const root = createRoot(container!);
root.render(
<Provider store={reduxStore}>
- <AppIndexWithProps />
+ <AppIndexWithProps />
</Provider>
);
}
diff --git a/client/packages/lowcoder/src/components/ColorPicker.tsx b/client/packages/lowcoder/src/components/ColorPicker.tsx
deleted file mode 100644
index b461672e2..000000000
--- a/client/packages/lowcoder/src/components/ColorPicker.tsx
+++ /dev/null
@@ -1,254 +0,0 @@
-import _ from "lodash";
-import { useEffect, useState } from "react";
-import { ConfigItem, Radius, Margin, Padding, GridColumns } from "../pages/setting/theme/styledComponents";
-import { isValidColor, toHex } from "components/colorSelect/colorUtils";
-import { ColorSelect } from "components/colorSelect";
-import { TacoInput } from "components/tacoInput";
-import { TableCellsIcon as GridIcon } from "lowcoder-design/src/icons"; //Added By Aqib Mirza
-
-import { ExpandIcon, CompressIcon } from "lowcoder-design/src/icons";
-
-export type configChangeParams = {
- colorKey: string;
- color?: string;
- radius?: string;
- chart?: string;
- margin?: string;
- padding?: string;
- gridColumns?: string; //Added By Aqib Mirza
-};
-
-type ColorConfigProps = {
- className?: string;
- colorKey: string;
- name?: string;
- desc?: string;
- color?: string;
- radius?: string;
- configChange: (params: configChangeParams) => void;
- showVarName?: boolean;
- margin?: string;
- padding?: string;
- gridColumns?: string; //Added By Aqib Mirza
-};
-
-export default function ColorPicker(props: ColorConfigProps) {
- const {
- colorKey,
- name,
- desc,
- color: defaultColor,
- radius: defaultRadius,
- configChange,
- showVarName = true,
- margin: defaultMargin,
- padding: defaultPadding,
- gridColumns: defaultGridColumns, //Added By Aqib Mirza
- } = props;
- const configChangeWithDebounce = _.debounce(configChange, 0);
- const [color, setColor] = useState(defaultColor);
- const [radius, setRadius] = useState(defaultRadius);
-
- const [margin, setMargin] = useState(defaultMargin);
- const [padding, setPadding] = useState(defaultPadding);
- const [gridColumns, setGridColumns] = useState(defaultGridColumns); //Added By Aqib Mirza
-
- const varName = `(${colorKey})`;
-
- const colorInputBlur = () => {
- if (!color || !isValidColor(color)) {
- setColor(defaultColor);
- } else {
- setColor(toHex(color));
- configChange({ colorKey, color: toHex(color) });
- }
- };
-
- const radiusInputBlur = (radius: string) => {
- let result = "";
- if (!radius || Number(radius) === 0) {
- result = "0";
- } else if (/^[0-9]+$/.test(radius)) {
- result = Number(radius) + "px";
- } else if (/^[0-9]+(px|%)$/.test(radius)) {
- result = radius;
- } else {
- result = "0";
- }
- setRadius(result);
- configChange({ colorKey, radius: result });
- };
-
- const marginInputBlur = (margin: string) => {
- let result = "";
- if (!margin || Number(margin) === 0) {
- result = "0";
- } else if (/^[0-9]+$/.test(margin)) {
- result = Number(margin) + "px";
- } else if (/^[0-9]+(px|%)$/.test(margin)) {
- result = margin;
- } else {
- result = "3px";
- }
- setMargin(result);
- configChange({ colorKey, margin: result });
- };
- const paddingInputBlur = (padding: string) => {
- let result = "";
- if (!padding || Number(padding) === 0) {
- result = "0";
- } else if (/^[0-9]+$/.test(padding)) {
- result = Number(padding) + "px";
- } else if (/^[0-9]+(px|%)$/.test(padding)) {
- result = padding;
- } else {
- result = "3px";
- }
- setPadding(result);
- configChange({ colorKey, padding: result });
- };
-
- //Added By Aqib Mirza
-
- const gridColumnsInputBlur = (gridColumns: string) => {
- let result = "";
- if (!gridColumns) {
- result = "0";
- } else {
- result = gridColumns;
- }
- setGridColumns(result);
- configChange({ colorKey, gridColumns: result });
- };
-
- /////////////////////
-
- useEffect(() => {
- if (color && isValidColor(color)) {
- configChangeWithDebounce({ colorKey, color });
- }
- }, [color]);
-
- // reset
- useEffect(() => {
- setColor(defaultColor);
- }, [defaultColor]);
-
- useEffect(() => {
- setRadius(defaultRadius);
- }, [defaultRadius]);
-
- useEffect(() => {
- setMargin(defaultMargin);
- }, [defaultMargin]);
-
- useEffect(() => {
- setPadding(defaultPadding);
- }, [defaultPadding]);
- // Added By Aqib Mirza
- useEffect(() => {
- setGridColumns(defaultGridColumns);
- }, [defaultGridColumns]);
- //////////////////////
-
- return (
- <ConfigItem className={props.className}>
- <div className="text-desc">
- <div className="name">
- {name} {showVarName && <span>{varName}</span>}
- </div>
- <div className="desc">{desc}</div>
- </div>
- {colorKey !== "borderRadius" &&
- colorKey !== "margin" &&
- colorKey !== "padding" &&
- colorKey !== "gridColumns" && (
- <div className="config-input">
- <ColorSelect
- changeColor={_.debounce(setColor, 500, {
- leading: true,
- trailing: true,
- })}
- color={color!}
- trigger="hover"
- />
- <TacoInput
- value={color}
- onChange={(e) => setColor(e.target.value)}
- onBlur={colorInputBlur}
- onKeyUp={(e) => e.nativeEvent.key === "Enter" && colorInputBlur()}
- />
- </div>
- )}
- {colorKey === "borderRadius" && (
- <div className="config-input">
- <Radius $radius={defaultRadius || "0"}>
- <div>
- <div />
- </div>
- </Radius>
- <TacoInput
- value={radius}
- onChange={(e) => setRadius(e.target.value)}
- onBlur={(e) => radiusInputBlur(e.target.value)}
- onKeyUp={(e) => e.nativeEvent.key === "Enter" && radiusInputBlur(e.currentTarget.value)}
- />
- </div>
- )}
- {colorKey === "margin" && (
- <div className="config-input">
- <Margin $margin={defaultMargin || "4px"}>
- <div>
- <ExpandIcon title="" />
- </div>
- </Margin>
- <TacoInput
- value={margin}
- onChange={(e) => setMargin(e.target.value)}
- onBlur={(e) => marginInputBlur(e.target.value)}
- onKeyUp={(e) =>
- e.nativeEvent.key === "Enter" &&
- marginInputBlur(e.currentTarget.value)
- }
- />
- </div>
- )}
- {colorKey === "padding" && (
- <div className="config-input">
- <Padding $padding={defaultPadding || "4px"}>
- <div>
- <CompressIcon title="" />
- </div>
- </Padding>
- <TacoInput
- value={padding}
- onChange={(e) => setPadding(e.target.value)}
- onBlur={(e) => paddingInputBlur(e.target.value)}
- onKeyUp={(e) =>
- e.nativeEvent.key === "Enter" &&
- paddingInputBlur(e.currentTarget.value)
- }
- />
- </div>
- )}
- {colorKey === "gridColumns" && (
- <div className="config-input">
- <GridColumns $gridColumns={defaultGridColumns || "24"}>
- <div>
- <GridIcon title="" />
- </div>
- </GridColumns>
- <TacoInput
- value={gridColumns}
- onChange={(e) => setGridColumns(e.target.value)}
- onBlur={(e) => gridColumnsInputBlur(e.target.value)}
- onKeyUp={(e) =>
- e.nativeEvent.key === "Enter" &&
- gridColumnsInputBlur(e.currentTarget.value)
- }
- />
- </div>
- )}
- </ConfigItem>
- );
-}
diff --git a/client/packages/lowcoder/src/components/PreviewApp.tsx b/client/packages/lowcoder/src/components/PreviewApp.tsx
index df700f75d..1f5a71f0a 100644
--- a/client/packages/lowcoder/src/components/PreviewApp.tsx
+++ b/client/packages/lowcoder/src/components/PreviewApp.tsx
@@ -56,7 +56,9 @@ export default function PreviewApp(props: {
return (
<Preview style={props.style}>
- <ThemeContext.Provider value={{ previewTheme: theme }}>{view}</ThemeContext.Provider>
+ <ThemeContext.Provider value={{ previewTheme: theme }}>
+ {view}
+ </ThemeContext.Provider>
</Preview>
);
}
diff --git a/client/packages/lowcoder/src/components/ThemeSettingsCompStyles.tsx b/client/packages/lowcoder/src/components/ThemeSettingsCompStyles.tsx
new file mode 100644
index 000000000..9f2b0abe5
--- /dev/null
+++ b/client/packages/lowcoder/src/components/ThemeSettingsCompStyles.tsx
@@ -0,0 +1,450 @@
+import { useEffect, useMemo, useState } from "react";
+import { ConfigItem, Radius, Margin, Padding, GridColumns, BorderWidth, BorderStyle } from "../pages/setting/theme/styledComponents";
+import { isValidColor, toHex } from "components/colorSelect/colorUtils";
+import { ColorSelect } from "components/colorSelect";
+import { TacoInput } from "components/tacoInput";
+import { Slider } from "antd";
+import {
+ ExpandIcon,
+ CompressIcon,
+ BorderRadiusIcon,
+ BorderWidthIcon,
+ BorderStyleIcon,
+ TableCellsIcon,
+ RefreshLineIcon,
+ OpacityIcon,
+ ShadowIcon,
+ StarSmileIcon,
+ TimerFlashIcon,
+ Timer2Icon,
+ TextSizeIcon,
+ TextWeightIcon,
+ FontFamilyIcon,
+ TextTransformationIcon,
+ TextDecorationIcon,
+ TextStyleIcon,
+ ImageCompIconSmall,
+ RotationIcon,
+ } from "lowcoder-design/src/icons";
+import { trans } from "i18n";
+import { debounce } from "lodash";
+
+export type configChangeParams = {
+ themeSettingKey: string;
+ color?: string;
+ radius?: string;
+ chart?: string;
+ margin?: string;
+ padding?: string;
+ gridColumns?: string; // Added By Aqib Mirza
+ borderStyle?: string;
+ borderColor?: string;
+ borderWidth?: string;
+ fontFamily?: string;
+};
+
+type ColorConfigProps = {
+ className?: string;
+ themeSettingKey: string;
+ name?: string;
+ desc?: string;
+ color?: string;
+
+ configChange: (params: configChangeParams) => void;
+ showVarName?: boolean;
+ radius?: string;
+ borderStyle?: string;
+ borderWidth?: string;
+ borderColor?: string;
+ fontFamily?: string;
+ margin?: string;
+ padding?: string;
+ gridColumns?: string; // Added By Aqib Mirza
+};
+
+const isColorStyle = (styleKey: string) => {
+ return styleKey !== 'radius' &&
+ styleKey !== 'borderWidth' &&
+ styleKey !== 'boxShadow' &&
+ styleKey !== 'animationIterationCount' &&
+ styleKey !== 'opacity' &&
+ styleKey !== 'animation' &&
+ styleKey !== 'animationDelay' &&
+ styleKey !== 'animationDuration' &&
+ styleKey !== 'rotation' &&
+ styleKey !== 'cardRadius' &&
+ styleKey !== 'textSize' &&
+ styleKey !== 'textWeight' &&
+ styleKey !== 'textTransform' &&
+ styleKey !== 'textDecoration' &&
+ styleKey !== 'fontFamily' &&
+ styleKey !== 'borderStyle' &&
+ styleKey !== 'fontStyle' &&
+ styleKey !== 'backgroundImage' &&
+ styleKey !== 'backgroundImageRepeat' &&
+ styleKey !== 'backgroundImageSize' &&
+ styleKey !== 'backgroundImagePosition' &&
+ styleKey !== 'backgroundImageOrigin' &&
+ styleKey !== 'headerBackgroundImage' &&
+ styleKey !== 'headerBackgroundImageRepeat' &&
+ styleKey !== 'headerBackgroundImageSize' &&
+ styleKey !== 'headerBackgroundImagePosition' &&
+ styleKey !== 'headerBackgroundImageOrigin' &&
+ styleKey !== 'footerBackgroundImage' &&
+ styleKey !== 'footerBackgroundImageRepeat' &&
+ styleKey !== 'footerBackgroundImageSize' &&
+ styleKey !== 'footerBackgroundImagePosition' &&
+ styleKey !== 'footerBackgroundImageOrigin' &&
+ styleKey !== 'margin' &&
+ styleKey !== 'padding' &&
+ styleKey !== 'containerHeaderPadding' &&
+ styleKey !== 'containerSiderPadding' &&
+ styleKey !== 'containerFooterPadding' &&
+ styleKey !== 'containerBodyPadding';
+}
+
+
+type CompStyleProps = {
+ styleOptions: string[];
+ defaultStyle: Record<string, string>;
+ configChange: (params: any) => void;
+}
+
+export default function ThemeSettingsCompStyles(props: CompStyleProps) {
+ const { defaultStyle, styleOptions, configChange } = props;
+ const [compStyle, setCompStyle] = useState({...defaultStyle});
+
+ const updateThemeWithDebounce = useMemo(() => {
+ return debounce((updateStyles) => {
+ configChange(updateStyles);
+ }, 500);
+ }, [configChange]);
+
+ const handleChange = (styleKey: string, styleValue: string) => {
+ const updateStyles = {
+ ...compStyle,
+ [styleKey]: styleValue,
+ };
+ setCompStyle(updateStyles);
+ updateThemeWithDebounce(updateStyles);
+ }
+
+ const getLabelByStyle = (styleKey: string) => {
+ let label = styleKey;
+ switch(styleKey) {
+ case 'radius':
+ case 'cardRadius':
+ case 'gap': {
+ label = trans("style.borderRadius");
+ break;
+ }
+ // case 'borderWidth':
+ // case 'borderStyle':
+ // case 'margin':
+ // case 'padding':
+ // case 'containerHeaderPadding':
+ // case 'containerSiderPadding':
+ // case 'containerFooterPadding':
+ // case 'containerBodyPadding':
+ // case 'opacity':
+ // case 'boxShadowColor':
+ // case 'boxShadow':
+ // case 'animationIterationCount':
+ // case 'animation':
+ // case 'animationDelay':
+ // case 'animationDuration':
+ // case 'textSize':
+ // case 'textWeight':
+ // case 'fontFamily':
+ // case 'textDecoration':
+ // case 'textTransform':
+ // case 'fontStyle':
+ // case 'backgroundImage':
+ // case 'headerBackgroundImage':
+ // case 'footerBackgroundImage':
+ // case 'backgroundImageRepeat':
+ // case 'headerBackgroundImageRepeat':
+ // case 'footerBackgroundImageRepeat':
+ // case 'rotation': {
+ // label = trans(`style.${styleKey}`);
+ // break;
+ // }
+ default: {
+ label = trans(`style.${styleKey}`);
+ break;
+ }
+ }
+ return label;
+ }
+
+ const getPlaceholderByStyle = (styleKey: string) => {
+ let placeholder = '';
+ switch(styleKey) {
+ case 'radius':
+ case 'cardRadius':
+ case 'gap': {
+ placeholder = '2px';
+ break;
+ }
+ case 'borderWidth': {
+ placeholder = '1px';
+ break;
+ }
+ case 'borderStyle': {
+ placeholder = 'solid';
+ break;
+ }
+ case 'margin': {
+ placeholder = '3px';
+ break;
+ }
+ case 'padding':
+ case 'containerHeaderPadding':
+ case 'containerSiderPadding':
+ case 'containerFooterPadding':
+ case 'containerBodyPadding': {
+ placeholder = '3px';
+ break;
+ }
+ case 'opacity': {
+ placeholder = '1';
+ break;
+ }
+ case 'boxShadowColor': {
+ placeholder = '#FFFFFF';
+ break;
+ }
+ case 'boxShadow': {
+ placeholder = '0px 0px 0px';
+ break;
+ }
+ case 'animationIterationCount': {
+ placeholder = '0';
+ break;
+ }
+ case 'animation': {
+ placeholder = 'none';
+ break;
+ }
+ case 'animationDelay': {
+ placeholder = '0s';
+ break;
+ }
+ case 'animationDuration': {
+ placeholder = '0s';
+ break;
+ }
+ case 'textSize': {
+ placeholder = '14px';
+ break;
+ }
+ case 'textWeight': {
+ placeholder = 'normal';
+ break;
+ }
+ case 'fontFamily': {
+ placeholder = 'sans-serif';
+ break;
+ }
+ case 'textDecoration': {
+ placeholder = 'none';
+ break;
+ }
+ case 'textTransform': {
+ placeholder = 'none';
+ break;
+ }
+ case 'fontStyle': {
+ placeholder = 'normal';
+ break;
+ }
+ case 'backgroundImage':
+ case 'headerBackgroundImage':
+ case 'footerBackgroundImage': {
+ placeholder = '';
+ break;
+ }
+ case 'backgroundImageRepeat':
+ case 'headerBackgroundImageRepeat':
+ case 'footerBackgroundImageRepeat': {
+ placeholder = 'no-repeat';
+ break;
+ }
+ case 'rotation': {
+ placeholder = '0deg';
+ break;
+ }
+ }
+ return placeholder;
+ }
+
+ const getIconByStyle = (styleKey: string) => {
+ let icon = null;
+ switch(styleKey) {
+ case 'radius':
+ case 'cardRadius':
+ case 'gap': {
+ icon = <BorderRadiusIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
+ break;
+ }
+ case 'borderWidth': {
+ icon = <BorderWidthIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
+ break;
+ }
+ case 'borderStyle': {
+ icon = <BorderStyleIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
+ break;
+ }
+ case 'margin': {
+ icon = <ExpandIcon style={{width: "16px", margin: "3px 0 0 5px", padding: "0px"}}/>;
+ break;
+ }
+ case 'padding':
+ case 'containerHeaderPadding':
+ case 'containerSiderPadding':
+ case 'containerFooterPadding':
+ case 'containerBodyPadding': {
+ icon = <CompressIcon style={{width: "16px", margin: "3px 0 0 5px", padding: "0px"}}/>;
+ break;
+ }
+ case 'opacity': {
+ icon = <OpacityIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
+ break;
+ }
+ case 'boxShadowColor': {
+ icon = <BorderWidthIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
+ break;
+ }
+ case 'boxShadow': {
+ icon = <ShadowIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
+ break;
+ }
+ case 'animationIterationCount': {
+ icon = <RefreshLineIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
+ break;
+ }
+ case 'animation': {
+ icon = <StarSmileIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
+ break;
+ }
+ case 'animationDelay': {
+ icon = <TimerFlashIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
+ break;
+ }
+ case 'animationDuration': {
+ icon = <Timer2Icon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
+ break;
+ }
+ case 'textSize': {
+ icon = <TextSizeIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
+ break;
+ }
+ case 'textWeight': {
+ icon = <TextWeightIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
+ break;
+ }
+ case 'fontFamily': {
+ icon = <FontFamilyIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
+ break;
+ }
+ case 'textDecoration': {
+ icon = <TextDecorationIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
+ break;
+ }
+ case 'textTransform': {
+ icon = <TextTransformationIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
+ break;
+ }
+ case 'fontStyle': {
+ icon = <TextStyleIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
+ break;
+ }
+ case 'backgroundImage':
+ case 'headerBackgroundImage':
+ case 'footerBackgroundImage': {
+ icon = <ImageCompIconSmall style={{width: "16px", margin: "1px 0 0 5px", padding: "0px"}}/>;
+ break;
+ }
+ case 'backgroundImageRepeat':
+ case 'headerBackgroundImageRepeat':
+ case 'footerBackgroundImageRepeat': {
+ icon = <ImageCompIconSmall style={{width: "16px", margin: "1px 0 0 5px", padding: "0px"}}/>;
+ break;
+ }
+ case 'rotation': {
+ icon = <RotationIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
+ break;
+ }
+ }
+ return icon;
+ }
+
+ return (
+ <div style={{
+ border: "1px solid lightgray",
+ borderRadius: "4px",
+ marginBottom: "16px",
+ }}>
+ {styleOptions.map((styleKey: string) => (
+ <ConfigItem
+ key={styleKey}
+ style={{
+ flexDirection: "row",
+ alignItems: "center",
+ margin: "0",
+ padding: "6px",
+ borderBottom: "1px solid lightgray",
+ }}
+ >
+ <div className="text-desc" style={{
+ width: "100px",
+ minWidth: "100px",
+ maxWidth: "100px",
+ marginRight: "5px",
+ }}>
+ <div className="name" >
+ { getLabelByStyle(styleKey) }
+ </div>
+ </div>
+ { isColorStyle(styleKey) ? (
+ <div className="config-input" style={{minWidth: "auto", margin: "0"}}>
+ <ColorSelect
+ // changeColor={_.debounce(setColor, 500, {
+ // leading: true,
+ // trailing: true,
+ // })}
+ changeColor={(value) => handleChange(styleKey, value)}
+ color={compStyle[styleKey]!}
+ trigger="hover"
+ />
+ <TacoInput
+ style={{width: "80%", marginLeft: "5px"}}
+ value={compStyle[styleKey]}
+ onChange={(e) => handleChange(styleKey, e.target.value)}
+ // onChange={(e) => setColor(e.target.value)}
+ // onBlur={colorInputBlur}
+ // onKeyUp={(e) => e.nativeEvent.key === "Enter" && colorInputBlur()}
+ />
+ </div>
+ ): (
+ <div className="config-input" style={{minWidth: "auto"}}>
+ {/* <Radius $radius={compStyle[styleKey] || "0"}> */}
+ <div>
+ {getIconByStyle(styleKey)}
+ </div>
+ {/* </Radius> */}
+ <TacoInput
+ style={{width: "80%", marginLeft: "5px"}}
+ placeholder={getPlaceholderByStyle(styleKey)}
+ defaultValue={compStyle[styleKey]}
+ onChange={(e) => handleChange(styleKey, e.target.value)}
+ // onBlur={(e) => radiusInputBlur(e.target.value)}
+ // onKeyUp={(e) => e.nativeEvent.key === "Enter" && radiusInputBlur(e.currentTarget.value)}
+ />
+ </div>
+ )}
+ </ConfigItem>
+ ))}
+ </div>
+ )
+}
diff --git a/client/packages/lowcoder/src/components/ThemeSettingsSelector.tsx b/client/packages/lowcoder/src/components/ThemeSettingsSelector.tsx
new file mode 100644
index 000000000..504b37405
--- /dev/null
+++ b/client/packages/lowcoder/src/components/ThemeSettingsSelector.tsx
@@ -0,0 +1,403 @@
+import _ from "lodash";
+import { useEffect, useState } from "react";
+import { ConfigItem, Radius, Margin, Padding, GridColumns, BorderWidth, BorderStyle } from "../pages/setting/theme/styledComponents";
+import { isValidColor, toHex } from "components/colorSelect/colorUtils";
+import { ColorSelect } from "components/colorSelect";
+import { TacoInput } from "components/tacoInput";
+import { Slider } from "antd";
+import {
+ ExpandIcon,
+ CompressIcon,
+ BorderRadiusIcon,
+ BorderWidthIcon,
+ BorderStyleIcon,
+ TableCellsIcon,
+ } from "lowcoder-design/src/icons";
+
+export type configChangeParams = {
+ themeSettingKey: string;
+ color?: string;
+ radius?: string;
+ chart?: string;
+ margin?: string;
+ padding?: string;
+ gridColumns?: string; // Added By Aqib Mirza
+ borderStyle?: string;
+ borderColor?: string;
+ borderWidth?: string;
+ fontFamily?: string;
+ components?: Record<string, object>,
+};
+
+type ColorConfigProps = {
+ className?: string;
+ themeSettingKey: string;
+ name?: string;
+ desc?: string;
+ color?: string;
+
+ configChange: (params: configChangeParams) => void;
+ showVarName?: boolean;
+ radius?: string;
+ borderStyle?: string;
+ borderWidth?: string;
+ borderColor?: string;
+ fontFamily?: string;
+ margin?: string;
+ padding?: string;
+ gridColumns?: string; // Added By Aqib Mirza
+};
+
+export default function ThemeSettingsSelector(props: ColorConfigProps) {
+ const {
+ themeSettingKey,
+ name,
+ desc,
+ color: defaultColor,
+ radius: defaultRadius,
+ configChange,
+ showVarName = true,
+ margin: defaultMargin,
+ padding: defaultPadding,
+ gridColumns: defaultGridColumns,
+ borderStyle: defaultBorderStyle,
+ borderWidth: defaultBorderWidth,
+ borderColor: defaultBorderColor,
+ fontFamily: defaultFontFamily
+ } = props;
+
+ const configChangeWithDebounce = _.debounce(configChange, 0);
+ const [color, setColor] = useState(defaultColor);
+ const [radius, setRadius] = useState(defaultRadius);
+ const [margin, setMargin] = useState(defaultMargin);
+ const [padding, setPadding] = useState(defaultPadding);
+ const [gridColumns, setGridColumns] = useState(defaultGridColumns);
+ const [borderStyle, setBorderStyle] = useState(defaultBorderStyle);
+ const [borderWidth, setBorderWidth] = useState(defaultBorderWidth);
+ const [borderColor, setBorderColor] = useState(defaultBorderColor);
+ const [fontFamily, setFontFamily] = useState(defaultFontFamily);
+
+ const varName = `(${themeSettingKey})`;
+
+ const colorInputBlur = () => {
+ if (!color || !isValidColor(color)) {
+ setColor(defaultColor);
+ } else {
+ setColor(toHex(color));
+ configChange({ themeSettingKey, color: toHex(color) });
+ }
+ };
+
+ const radiusInputBlur = (radius: string) => {
+ let result = "";
+ if (!radius || Number(radius) === 0) {
+ result = "0";
+ } else if (/^[0-9]+$/.test(radius)) {
+ result = Number(radius) + "px";
+ } else if (/^[0-9]+(px|%)$/.test(radius)) {
+ result = radius;
+ } else {
+ result = "0";
+ }
+ setRadius(result);
+ configChange({ themeSettingKey, radius: result });
+ };
+
+ const marginInputBlur = (margin: string) => {
+ let result = "";
+ if (!margin || Number(margin) === 0) {
+ result = "0";
+ } else if (/^[0-9]+$/.test(margin)) {
+ result = Number(margin) + "px";
+ } else if (/^[0-9]+(px|%)$/.test(margin)) {
+ result = margin;
+ } else {
+ result = "3px";
+ }
+ setMargin(result);
+ configChange({ themeSettingKey, margin: result });
+ };
+
+ const paddingInputBlur = (padding: string) => {
+ let result = "";
+ if (!padding || Number(padding) === 0) {
+ result = "0";
+ } else if (/^[0-9]+$/.test(padding)) {
+ result = Number(padding) + "px";
+ } else if (/^[0-9]+(px|%)$/.test(padding)) {
+ result = padding;
+ } else {
+ result = "3px";
+ }
+ setPadding(result);
+ configChange({ themeSettingKey, padding: result });
+ };
+
+ const gridColumnsInputBlur = (gridColumns: string) => {
+ let result = "";
+ if (!gridColumns) {
+ result = "24";
+ } else {
+ result = gridColumns;
+ }
+ setGridColumns(result);
+ configChange({ themeSettingKey, gridColumns: result });
+ };
+
+ const borderStyleInputBlur = (borderStyle: string) => {
+ let result = "";
+ if (!borderStyle) {
+ result = "solid";
+ } else {
+ result = borderStyle;
+ }
+ setBorderStyle(result);
+ configChange({ themeSettingKey, borderStyle: result });
+ };
+
+ const borderWidthInputBlur = (borderWidth: string) => {
+ let result = "";
+ if (!borderWidth || Number(borderWidth) === 0) {
+ result = "0";
+ } else if (/^[0-9]+$/.test(borderWidth)) {
+ result = Number(borderWidth) + "px";
+ } else if (/^[0-9]+(px|%)$/.test(borderWidth)) {
+ result = borderWidth;
+ } else {
+ result = "1px";
+ }
+ setBorderWidth(borderWidth);
+ configChange({ themeSettingKey, borderWidth: result });
+ };
+
+ const borderColorInputBlur = (borderColor: string) => {
+ setBorderColor(borderColor);
+ configChange({ themeSettingKey, borderColor });
+ };
+
+ const fontFamilyInputBlur = (fontFamily: string) => {
+ let result = "";
+ if (!fontFamily) {
+ result = "Roboto, sans-serif";
+ } else {
+ result = fontFamily;
+ }
+ setFontFamily(result);
+ configChange({ themeSettingKey, fontFamily: result });
+ };
+
+
+ useEffect(() => {
+ if (color && isValidColor(color)) {
+ configChangeWithDebounce({ themeSettingKey, color });
+ }
+ }, [color]);
+
+ useEffect(() => {
+ setColor(defaultColor);
+ }, [defaultColor]);
+
+ useEffect(() => {
+ setRadius(defaultRadius);
+ }, [defaultRadius]);
+
+ useEffect(() => {
+ setMargin(defaultMargin);
+ }, [defaultMargin]);
+
+ useEffect(() => {
+ setPadding(defaultPadding);
+ }, [defaultPadding]);
+
+ useEffect(() => {
+ setGridColumns(defaultGridColumns);
+ }, [defaultGridColumns]);
+
+ useEffect(() => {
+ setBorderStyle(defaultBorderStyle);
+ }, [defaultBorderStyle]);
+
+ useEffect(() => {
+ setBorderWidth(defaultBorderWidth);
+ }, [defaultBorderWidth]);
+
+ useEffect(() => {
+ setBorderColor(defaultBorderColor);
+ }, [defaultBorderColor]);
+
+ useEffect(() => {
+ setFontFamily(defaultFontFamily);
+ }, [defaultFontFamily]);
+
+ return (
+ <ConfigItem className={props.className}>
+ <div className="text-desc">
+ <div className="name">
+ {name} {showVarName && <span>{varName}</span>}
+ </div>
+ <div className="desc">{desc}</div>
+ </div>
+
+ {themeSettingKey !== "radius" &&
+ themeSettingKey !== "margin" &&
+ themeSettingKey !== "padding" &&
+ themeSettingKey !== "gridColumns" &&
+ themeSettingKey !== "borderStyle" &&
+ themeSettingKey !== "borderWidth" &&
+ themeSettingKey !== "fontFamily" && (
+ <div className="config-input">
+ <ColorSelect
+ changeColor={_.debounce(setColor, 500, {
+ leading: true,
+ trailing: true,
+ })}
+ color={color!}
+ trigger="hover"
+ />
+ <TacoInput
+ value={color}
+ onChange={(e) => setColor(e.target.value)}
+ onBlur={colorInputBlur}
+ onKeyUp={(e) => e.nativeEvent.key === "Enter" && colorInputBlur()}
+ />
+ </div>
+ )}
+
+ {/* // border Styles */}
+
+ {/* {themeSettingKey === "borderColor" && (
+ <div className="config-input">
+ <ColorSelect
+ changeColor={_.debounce(setBorderColor, 500, {
+ leading: true,
+ trailing: true,
+ })}
+ color={borderColor!}
+ trigger="hover"
+ />
+ <TacoInput
+ value={borderColor}
+ onChange={(e) => setBorderColor(e.target.value)}
+ onBlur={(e) => borderColorInputBlur(e.target.value)}
+ onKeyUp={(e) => e.nativeEvent.key === "Enter" && borderColorInputBlur(e.currentTarget.value)}
+ />
+ </div>
+ )} */}
+ {themeSettingKey === "radius" && (
+ <div className="config-input">
+ <Radius $radius={defaultRadius || "0"}>
+ <div>
+ <BorderRadiusIcon style={{width: "16px", margin: "-2px 0 2px -2px", padding: "0px"}}/>
+ </div>
+ </Radius>
+ <TacoInput
+ value={radius}
+ onChange={(e) => setRadius(e.target.value)}
+ onBlur={(e) => radiusInputBlur(e.target.value)}
+ onKeyUp={(e) => e.nativeEvent.key === "Enter" && radiusInputBlur(e.currentTarget.value)}
+ />
+ </div>
+ )}
+ {themeSettingKey === "borderStyle" && (
+ <div className="config-input">
+ <BorderStyle $borderStyle={defaultBorderStyle || "solid"}>
+ <div>
+ <BorderStyleIcon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>
+ </div>
+ </BorderStyle>
+ <TacoInput
+ value={borderStyle}
+ onChange={(e) => setBorderStyle(e.target.value)}
+ onBlur={(e) => borderStyleInputBlur(e.target.value)}
+ onKeyUp={(e) => e.nativeEvent.key === "Enter" && borderStyleInputBlur(e.currentTarget.value)}
+ />
+ </div>
+ )}
+ {themeSettingKey === "borderWidth" && (
+ <div className="config-input">
+ <BorderWidth $borderWidth={defaultBorderWidth || "1px"}>
+ <div>
+ <BorderWidthIcon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>
+ </div>
+ </BorderWidth>
+ <TacoInput
+ value={borderWidth}
+ onChange={(e) => setBorderWidth(e.target.value)}
+ onBlur={(e) => borderWidthInputBlur(e.target.value)}
+ onKeyUp={(e) => e.nativeEvent.key === "Enter" && borderWidthInputBlur(e.currentTarget.value)}
+ />
+ </div>
+ )}
+
+ {themeSettingKey === "margin" && (
+ <div className="config-input">
+ <Margin $margin={defaultMargin || "4px"}>
+ <div>
+ <ExpandIcon title="" />
+ </div>
+ </Margin>
+ <TacoInput
+ value={margin}
+ onChange={(e) => setMargin(e.target.value)}
+ onBlur={(e) => marginInputBlur(e.target.value)}
+ onKeyUp={(e) =>
+ e.nativeEvent.key === "Enter" &&
+ marginInputBlur(e.currentTarget.value)
+ }
+ />
+ </div>
+ )}
+
+ {themeSettingKey === "padding" && (
+ <div className="config-input">
+ <Padding $padding={defaultPadding || "4px"}>
+ <div>
+ <CompressIcon title="" />
+ </div>
+ </Padding>
+ <TacoInput
+ value={padding}
+ onChange={(e) => setPadding(e.target.value)}
+ onBlur={(e) => paddingInputBlur(e.target.value)}
+ onKeyUp={(e) =>
+ e.nativeEvent.key === "Enter" &&
+ paddingInputBlur(e.currentTarget.value)
+ }
+ />
+ </div>
+ )}
+
+ {themeSettingKey === "gridColumns" && (
+ <div className="config-input">
+ <GridColumns $gridColumns={defaultGridColumns || "24"}>
+ <div>
+ <TableCellsIcon title="" />
+ </div>
+ </GridColumns>
+
+ <Slider
+ style={{ width: "90%", margin: "8px 5% 0 5%"}}
+ min={8} // Define the minimum value for the slider
+ max={48} // Define the maximum value for the slider
+ value={parseInt(gridColumns || "24")}
+ onChange={(value) => setGridColumns(value.toString())}
+ onAfterChange={(value) => gridColumnsInputBlur(value.toString())}
+ />
+ </div>
+ )}
+
+
+
+ {themeSettingKey === "fontFamily" && (
+ <div className="config-input">
+ <TacoInput
+ value={fontFamily}
+ onChange={(e) => setFontFamily(e.target.value)}
+ onBlur={(e) => fontFamilyInputBlur(e.target.value)}
+ onKeyUp={(e) => e.nativeEvent.key === "Enter" && fontFamilyInputBlur(e.currentTarget.value)}
+ />
+ </div>
+ )}
+ </ConfigItem>
+ );
+}
diff --git a/client/packages/lowcoder/src/components/table/columnTypeView.tsx b/client/packages/lowcoder/src/components/table/columnTypeView.tsx
index 264db7af8..434e71551 100644
--- a/client/packages/lowcoder/src/components/table/columnTypeView.tsx
+++ b/client/packages/lowcoder/src/components/table/columnTypeView.tsx
@@ -5,13 +5,19 @@ const ColumnTypeViewWrapper = styled.div<{
$textOverflow?: boolean
}>`
position: relative;
- ${props => !props.$textOverflow && `
+ ${props => props.$textOverflow == false && `
div {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
word-break: keep-all;
}
+ span {
+ display: inline-block; /* Change display to inline-block for span */
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ word-break: keep-all;
+ }
`}
`;
@@ -71,6 +77,7 @@ export default function ColumnTypeView(props: {
children: React.ReactNode,
textOverflow?: boolean,
}) {
+
const wrapperRef = useRef<HTMLDivElement>(null);
const hoverViewRef = useRef<HTMLDivElement>(null);
const [isHover, setIsHover] = useState(false);
diff --git a/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx b/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx
index f30a951ea..b77c619ef 100644
--- a/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx
@@ -186,6 +186,7 @@ const childrenMap = {
showHeaderInPublic: withDefault(BoolControl, true),
maxWidth: dropdownInputSimpleControl(OPTIONS, USER_DEFINE, "1920"),
themeId: valueComp<string>(DEFAULT_THEMEID),
+ preventAppStylesOverwriting: withDefault(BoolControl, false),
customShortcuts: CustomShortcutsComp,
disableCollision: valueComp<boolean>(false),
};
@@ -205,6 +206,7 @@ function AppSettingsModal(props: ChildrenInstance) {
icon,
category,
showHeaderInPublic,
+ preventAppStylesOverwriting,
} = props;
const THEME_OPTIONS = themeList?.map((theme) => ({
label: theme.name,
@@ -300,6 +302,11 @@ function AppSettingsModal(props: ChildrenInstance) {
);
}}
/>
+ <div style={{ margin: '20px 0'}}>
+ {preventAppStylesOverwriting.propertyView({
+ label: trans("prop.preventOverwriting"),
+ })}
+ </div>
</DivStyled>
{props.customShortcuts.getPropertyView()}
</SettingsStyled>
diff --git a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx
index c310f9d19..207de58d1 100644
--- a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
import { Input, Section, sectionNames } from "lowcoder-design";
import { BoolControl } from "comps/controls/boolControl";
import { styleControl } from "comps/controls/styleControl";
@@ -55,7 +55,7 @@ import {
autocompleteIconColor,
componentSize,
} from "./autoCompleteConstants";
-
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
const InputStyle = styled(Input) <{ $style: InputLikeStyleType }>`
@@ -76,8 +76,8 @@ const childrenMap = {
...textInputChildren,
viewRef: RefControl<InputRef>,
allowClear: BoolControl.DEFAULT_TRUE,
- style: withDefault(styleControl(InputFieldStyle),{background:'transparent'}),
- labelStyle:styleControl(LabelStyle),
+ style: styleControl(InputFieldStyle , 'style'),
+ labelStyle: styleControl(LabelStyle , 'labelStyle'),
prefixIcon: IconControl,
suffixIcon: IconControl,
items: jsonControl(convertAutoCompleteData, autoCompleteDate),
@@ -90,8 +90,8 @@ const childrenMap = {
autocompleteIconColor: dropdownControl(autocompleteIconColor, "blue"),
componentSize: dropdownControl(componentSize, "small"),
valueInItems: booleanExposingStateControl("valueInItems"),
- inputFieldStyle: withDefault(styleControl(InputLikeStyle),{borderWidth:'1px'}),
- animationStyle: styleControl(AnimationStyle),
+ inputFieldStyle: styleControl(InputLikeStyle , 'inputFieldStyle'),
+ animationStyle: styleControl(AnimationStyle , 'animationStyle'),
};
const getValidate = (value: any): "" | "warning" | "error" | undefined => {
@@ -104,7 +104,9 @@ const getValidate = (value: any): "" | "warning" | "error" | undefined => {
};
let AutoCompleteCompBase = (function () {
- return new UICompBuilder(childrenMap, (props) => {
+ return new UICompBuilder(childrenMap, (props, dispatch) => {
+ useMergeCompStyles(props as Record<string, any>, dispatch);
+
const {
items,
onEvent,
diff --git a/client/packages/lowcoder/src/comps/comps/avatar.tsx b/client/packages/lowcoder/src/comps/comps/avatar.tsx
index d97e3fed9..4643e9c5e 100644
--- a/client/packages/lowcoder/src/comps/comps/avatar.tsx
+++ b/client/packages/lowcoder/src/comps/comps/avatar.tsx
@@ -32,8 +32,9 @@ import { stringExposingStateControl } from "../controls/codeStateControl";
import { BoolControl } from "../controls/boolControl";
import { BadgeBasicSection, badgeChildren } from "./badgeComp/badgeConstants";
import { DropdownOptionControl } from "../controls/optionsControl";
-import { ReactElement, useContext } from "react";
+import { ReactElement, useContext, useEffect } from "react";
import { CompNameContext, EditorContext } from "../editorState";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
const AvatarWrapper = styled(Avatar) <AvatarProps & { $cursorPointer?: boolean, $style: AvatarStyleType }>`
background: ${(props) => props.$style.background};
@@ -118,10 +119,10 @@ const sideOptions = [
] as const;
const childrenMap = {
- style: styleControl(avatarContainerStyle),
- avatarStyle: styleControl(AvatarStyle),
- labelStyle: styleControl(avatarLabelStyle),
- captionStyle: styleControl(avatarLabelStyle),
+ style: styleControl(avatarContainerStyle , 'style'),
+ avatarStyle: styleControl(AvatarStyle , 'avatarStyle'),
+ labelStyle: styleControl(avatarLabelStyle , 'labelStyle'),
+ captionStyle: styleControl(avatarLabelStyle , 'captionStyle'),
icon: withDefault(IconControl, "/icon:solid/user"),
iconSize: withDefault(NumberControl, 40),
onEvent: eventHandlerControl(EventOptions),
@@ -197,7 +198,10 @@ const AvatarView = (props: RecordConstructorToView<typeof childrenMap>) => {
};
let AvatarBasicComp = (function () {
- return new UICompBuilder(childrenMap, (props) => <AvatarView {...props} />)
+ return new UICompBuilder(childrenMap, (props , dispatch) => {
+ useMergeCompStyles(props as Record<string, any>, dispatch);
+
+ return(<AvatarView {...props} />)})
.setPropertyViewFn((children) => (
<>
<Section name={sectionNames.basic}>
diff --git a/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx b/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx
index 3e2e5d258..5f3a57d88 100644
--- a/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx
+++ b/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx
@@ -10,7 +10,7 @@ import { NumberControl, StringControl } from "comps/controls/codeControl";
import { Avatar, Tooltip } from "antd";
import { clickEvent, eventHandlerControl, refreshEvent } from "../controls/eventHandlerControl";
import styled from "styled-components";
-import { useContext, ReactElement } from "react";
+import { useContext, ReactElement, useEffect } from "react";
import { MultiCompBuilder, stateComp, withDefault } from "../generators";
import { EditorContext } from "comps/editorState";
import { IconControl } from "../controls/iconControl";
@@ -19,6 +19,7 @@ import { optionsControl } from "../controls/optionsControl";
import { BoolControl } from "../controls/boolControl";
import { dropdownControl } from "../controls/dropdownControl";
import { JSONObject } from "util/jsonTypes";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
const MacaroneList = [
'#fde68a',
@@ -86,8 +87,8 @@ export const alignOptions = [
] as const;
const childrenMap = {
- avatar: styleControl(avatarGroupStyle),
- style: styleControl(avatarContainerStyle),
+ avatar: styleControl(avatarGroupStyle , 'avatar'),
+ style: styleControl(avatarContainerStyle , 'style'),
maxCount: withDefault(NumberControl, 3),
avatarSize: withDefault(NumberControl, 40),
alignment: dropdownControl(alignOptions, "center"),
@@ -142,7 +143,11 @@ const AvatarGroupView = (props: RecordConstructorToView<typeof childrenMap> & {
};
let AvatarGroupBasicComp = (function () {
- return new UICompBuilder(childrenMap, (props, dispatch) => <AvatarGroupView {...props} dispatch={dispatch} />)
+ return new UICompBuilder(childrenMap, (props, dispatch) =>{
+ useMergeCompStyles(props as Record<string, any>, dispatch);
+
+ return( <AvatarGroupView {...props} dispatch={dispatch} />
+)})
.setPropertyViewFn((children) => (
<>
{["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx
index 1511ec66d..9807f27e7 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx
@@ -24,8 +24,10 @@ import {
} from "./buttonCompConstants";
import { RefControl } from "comps/controls/refControl";
-import React, { useContext } from "react";
-import { AnimationStyle, styleControl } from "@lowcoder-ee/index.sdk";
+import React, { useContext, useEffect } from "react";
+import { AnimationStyle } from "@lowcoder-ee/comps/controls/styleControlConstants";
+import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
const FormLabel = styled(CommonBlueLabel)`
font-size: 13px;
@@ -130,35 +132,39 @@ const ButtonTmpComp = (function () {
prefixIcon: IconControl,
suffixIcon: IconControl,
style: ButtonStyleControl,
- animationStyle:styleControl(AnimationStyle),
+ animationStyle: styleControl(AnimationStyle, 'animationStyle'),
viewRef: RefControl<HTMLElement>,
};
- return new UICompBuilder(childrenMap, (props) => (
- <ButtonCompWrapper disabled={props.disabled}>
- <EditorContext.Consumer>
- {(editorState) => (
- <Button100
- ref={props.viewRef}
- $buttonStyle={props.style}
- loading={props.loading}
- disabled={
- props.disabled ||
- (!isDefault(props.type) && getForm(editorState, props.form)?.disableSubmit())
- }
- onClick={() =>
- isDefault(props.type) ? props.onEvent("click") : submitForm(editorState, props.form)
- }
- >
- {props.prefixIcon && <IconWrapper>{props.prefixIcon}</IconWrapper>}
- {
- props.text || (props.prefixIcon || props.suffixIcon ? undefined : " ") // Avoid button disappearing
- }
- {props.suffixIcon && <IconWrapper>{props.suffixIcon}</IconWrapper>}
- </Button100>
- )}
- </EditorContext.Consumer>
- </ButtonCompWrapper>
- ))
+ return new UICompBuilder(childrenMap, (props , dispatch) => {
+ useMergeCompStyles(props as Record<string, any>, dispatch);
+
+ return(
+ <ButtonCompWrapper disabled={props.disabled}>
+ <EditorContext.Consumer>
+ {(editorState) => (
+ <Button100
+ ref={props.viewRef}
+ $buttonStyle={props.style}
+ loading={props.loading}
+ disabled={
+ props.disabled ||
+ (!isDefault(props.type) && getForm(editorState, props.form)?.disableSubmit())
+ }
+ onClick={() =>
+ isDefault(props.type) ? props.onEvent("click") : submitForm(editorState, props.form)
+ }
+ >
+ {props.prefixIcon && <IconWrapper>{props.prefixIcon}</IconWrapper>}
+ {
+ props.text || (props.prefixIcon || props.suffixIcon ? undefined : " ") // Avoid button disappearing
+ }
+ {props.suffixIcon && <IconWrapper>{props.suffixIcon}</IconWrapper>}
+ </Button100>
+ )}
+ </EditorContext.Consumer>
+ </ButtonCompWrapper>
+ );
+ })
.setPropertyViewFn((children) => (
<>
<Section name={sectionNames.basic}>
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx
index c509aeaa9..1fe2f3270 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx
@@ -97,7 +97,7 @@ function fixOldData(oldData: any) {
}
return oldData;
}
-const ButtonTmpStyleControl = styleControl(ButtonStyle);
+const ButtonTmpStyleControl = styleControl(ButtonStyle, 'style');
export const ButtonStyleControl = migrateOldData(ButtonTmpStyleControl, fixOldData);
export const buttonRefMethods = refMethods<HTMLElement>([
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx
index 150eec23a..8e99f5a4c 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx
@@ -9,7 +9,7 @@ import { UICompBuilder } from "comps/generators/uiCompBuilder";
import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
import { Section, sectionNames } from "lowcoder-design";
import { trans } from "i18n";
-import React, { ReactElement, useContext } from "react";
+import React, { ReactElement, useContext, useEffect } from "react";
import { EditorContext } from "comps/editorState";
import styled from "styled-components";
import { ButtonEventHandlerControl } from "../../controls/eventHandlerControl";
@@ -21,8 +21,8 @@ import {
ButtonStyleControl,
getButtonStyle,
} from "./buttonCompConstants";
-import { styleControl } from "@lowcoder-ee/index.sdk";
-
+import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
const StyledDropdownButton = styled(DropdownButton)`
width: 100%;
@@ -38,8 +38,8 @@ const LeftButtonWrapper = styled.div<{ $buttonStyle: DropdownStyleType }>`
${(props) => `margin: ${props.$buttonStyle.margin};`}
margin-right: 0;
.ant-btn span {
- ${(props) => `text-decoration: ${props.$buttonStyle.textDecoration};`}
- ${(props) => `font-family: ${props.$buttonStyle.fontFamily};`}
+ ${(props) => props.$buttonStyle.textDecoration !== undefined ? `text-decoration: ${props.$buttonStyle.textDecoration};` : ''}
+ ${(props) => props.$buttonStyle.fontFamily !== undefined ? `font-family: ${props.$buttonStyle.fontFamily};` : ''}
}
.ant-btn {
@@ -48,6 +48,7 @@ const LeftButtonWrapper = styled.div<{ $buttonStyle: DropdownStyleType }>`
height: 100%;
&.ant-btn-default {
margin: 0 !important;
+
${(props) => `border-radius: ${props.$buttonStyle.radius} 0 0 ${props.$buttonStyle.radius};`}
${(props) => `text-transform: ${props.$buttonStyle.textTransform};`}
${(props) => `font-weight: ${props.$buttonStyle.textWeight};`}
@@ -86,9 +87,11 @@ const DropdownTmpComp = (function () {
options: DropdownOptionControl,
disabled: BoolCodeControl,
onEvent: ButtonEventHandlerControl,
- style: styleControl(DropdownStyle),
+ style: styleControl(DropdownStyle, 'style'),
};
- return new UICompBuilder(childrenMap, (props) => {
+ return new UICompBuilder(childrenMap, (props, dispatch) => {
+ useMergeCompStyles(props as Record<string, any>, dispatch);
+
const hasIcon =
props.options.findIndex((option) => (option.prefixIcon as ReactElement)?.props.value) > -1;
const items = props.options
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/floatButtonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/floatButtonComp.tsx
index 1797dd070..1445edef1 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/floatButtonComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/floatButtonComp.tsx
@@ -16,6 +16,8 @@ import { IconControl } from "comps/controls/iconControl";
import styled from "styled-components";
import { ButtonEventHandlerControl } from "comps/controls/eventHandlerControl";
import { manualOptionsControl } from "comps/controls/optionsControl";
+import { useContext, useEffect } from "react";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
const StyledFloatButton = styled(FloatButton)<{
$animationStyle: AnimationStyleType;
@@ -83,8 +85,8 @@ const childrenMap = {
image: StringControl,
icon: withDefault(IconControl, '/icon:antd/questioncircleoutlined'),
badgeStyle: styleControl(BadgeStyle),
- style: styleControl(FloatButtonStyle),
- animationStyle: styleControl(AnimationStyle),
+ style: styleControl(FloatButtonStyle , 'style'),
+ animationStyle: styleControl(AnimationStyle , 'animationStyle'),
buttons: manualOptionsControl(buttonGroupOption, {
initOptions: [
{ id: 0, label: trans("optionsControl.optionI", { i: '1' }), icon: "/icon:antd/filetextoutlined", badge: '1' },
@@ -131,9 +133,11 @@ const FloatButtonView = (props: RecordConstructorToView<typeof childrenMap>) =>
};
let FloatButtonBasicComp = (function () {
- return new UICompBuilder(childrenMap, (props) => (
- <FloatButtonView {...props} />
- ))
+ return new UICompBuilder(childrenMap, (props , dispatch) => {
+ useMergeCompStyles(props, dispatch);
+ return(
+ <FloatButtonView {...props} />
+ )})
.setPropertyViewFn((children) => (
<>
<Section name={sectionNames.basic}>
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx
index bd3765681..95ec1a5df 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx
@@ -21,7 +21,8 @@ import { hasIcon } from "comps/utils";
import { RefControl } from "comps/controls/refControl";
import { EditorContext } from "comps/editorState";
-import React, { useContext } from "react";
+import React, { useContext, useEffect } from "react";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
const Link = styled(Button)<{
$style: LinkStyleType;
@@ -85,13 +86,16 @@ const LinkTmpComp = (function () {
onEvent: ButtonEventHandlerControl,
disabled: BoolCodeControl,
loading: BoolCodeControl,
- style: migrateOldData(styleControl(LinkStyle), fixOldData),
- animationStyle:styleControl(AnimationStyle),
+ style: migrateOldData(styleControl(LinkStyle, 'style'), fixOldData),
+ animationStyle: styleControl(AnimationStyle, 'animationStyle'),
prefixIcon: IconControl,
suffixIcon: IconControl,
viewRef: RefControl<HTMLElement>,
};
- return new UICompBuilder(childrenMap, (props) => {
+ return new UICompBuilder(childrenMap, (props, dispatch) => {
+ useMergeCompStyles(props as Record<string, any>, dispatch);
+
+
// chrome86 bug: button children should not contain only empty span
const hasChildren = hasIcon(props.prefixIcon) || !!props.text || hasIcon(props.suffixIcon);
return (
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx
index 4f497fb68..97c5124f5 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx
@@ -24,6 +24,7 @@ import { BoolControl } from "comps/controls/boolControl";
import type { ItemType } from "antd/es/menu/hooks/useItems";
import { RefControl } from "comps/controls/refControl";
import { EditorContext } from "comps/editorState";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
const Error = styled.div`
color: #f5222d;
@@ -70,10 +71,12 @@ const ScannerTmpComp = (function () {
maskClosable: withDefault(BoolControl, true),
onEvent: ScannerEventHandlerControl,
disabled: BoolCodeControl,
- style: styleControl(DropdownStyle),
+ style: styleControl(DropdownStyle, 'style'),
viewRef: RefControl<HTMLElement>,
};
- return new UICompBuilder(childrenMap, (props) => {
+ return new UICompBuilder(childrenMap, (props, dispatch) => {
+ useMergeCompStyles(props as Record<string, any>, dispatch);
+
const [showModal, setShowModal] = useState(false);
const [errMessage, setErrMessage] = useState("");
const [videoConstraints, setVideoConstraints] = useState<MediaTrackConstraints>({
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx
index e8238e4c2..c8df0e3e6 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx
@@ -23,8 +23,9 @@ import {
import { styleControl } from "comps/controls/styleControl";
import { BoolControl } from "comps/controls/boolControl";
import { RefControl } from "comps/controls/refControl";
-import React, { useContext } from "react";
+import React, { useContext, useEffect } from "react";
import { EditorContext } from "comps/editorState";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
const IconWrapper = styled.div`
display: flex;
@@ -60,15 +61,17 @@ const ToggleTmpComp = (function () {
falseIcon: withDefault(IconControl, "/icon:solid/AngleDown"),
iconPosition: LeftRightControl,
alignment: AlignWithStretchControl,
- style: styleControl(ToggleButtonStyle),
- animationStyle: styleControl(AnimationStyle),
+ style: styleControl(ToggleButtonStyle , 'style'),
+ animationStyle: styleControl(AnimationStyle , 'animationStyle'),
showBorder: withDefault(BoolControl, true),
viewRef: RefControl<HTMLElement>,
};
- return new UICompBuilder(childrenMap, (props) => {
+ return new UICompBuilder(childrenMap, (props, dispatch) => {
const text = props.showText
? (props.value.value ? props.trueText : props.falseText) || undefined
: undefined;
+ useMergeCompStyles(props as Record<string, any>, dispatch);
+
return (
<ButtonCompWrapperStyled
disabled={props.disabled}
diff --git a/client/packages/lowcoder/src/comps/comps/carouselComp.tsx b/client/packages/lowcoder/src/comps/comps/carouselComp.tsx
index 6ad2edf60..c11b9290d 100644
--- a/client/packages/lowcoder/src/comps/comps/carouselComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/carouselComp.tsx
@@ -9,7 +9,7 @@ import { trans } from "i18n";
import { ChangeEventHandlerControl } from "comps/controls/eventHandlerControl";
import { formDataChildren, FormDataPropertyView } from "./formComp/formDataConstants";
import { PositionControl } from "comps/controls/dropdownControl";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
import ReactResizeDetector from "react-resize-detector";
import { ArrayStringControl } from "comps/controls/codeControl";
import { styleControl } from "comps/controls/styleControl";
@@ -17,6 +17,7 @@ import { AnimationStyle, AnimationStyleType, CarouselStyle } from "comps/control
import { useContext } from "react";
import { EditorContext } from "comps/editorState";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
// TODO: dots at top position needs proper margin (should be the same as bottom position)
@@ -44,11 +45,13 @@ let CarouselBasicComp = (function () {
onEvent: ChangeEventHandlerControl,
showDots: withDefault(BoolControl, true),
dotPosition: withDefault(PositionControl, "bottom"),
- style: styleControl(CarouselStyle),
- animationStyle: styleControl(AnimationStyle),
+ style: styleControl(CarouselStyle , 'style'),
+ animationStyle: styleControl(AnimationStyle , 'animationStyle'),
...formDataChildren,
};
- return new UICompBuilder(childrenMap, (props) => {
+ return new UICompBuilder(childrenMap, (props, dispatch) => {
+ useMergeCompStyles(props as Record<string, any>, dispatch);
+
const containerRef = useRef<HTMLDivElement>(null);
const [height, setHeight] = useState(0);
const onResize = () => {
diff --git a/client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx b/client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx
index 2302d31e5..4db9ab4cf 100644
--- a/client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx
+++ b/client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx
@@ -35,11 +35,12 @@ import { messageInstance } from "lowcoder-design/src/components/GlobalInstances"
import { BoolControl } from "comps/controls/boolControl";
import { BoolCodeControl, NumberControl, StringControl } from "comps/controls/codeControl";
-import { useContext } from "react";
+import { useContext, useEffect } from "react";
import { EditorContext } from "comps/editorState";
import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
import { DisabledContext } from "comps/generators/uiCompBuilder";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
const ContainWrapper = styled.div<{
$style: ContainerStyleType & {
@@ -95,8 +96,8 @@ const childrenMap = {
rowGap: withDefault(StringControl, "20px"),
templateColumns: withDefault(StringControl, "1fr 1fr"),
columnGap: withDefault(StringControl, "20px"),
- style: withDefault(styleControl(ContainerStyle), {}),
- columnStyle: withDefault(styleControl(ResponsiveLayoutColStyle),{borderWidth:'1px'})
+ style: styleControl(ContainerStyle, 'style'),
+ columnStyle: styleControl(ResponsiveLayoutColStyle , 'columnStyle')
};
type ViewProps = RecordConstructorToView<typeof childrenMap>;
@@ -178,6 +179,8 @@ const ColumnLayout = (props: ColumnLayoutProps) => {
export const ResponsiveLayoutBaseComp = (function () {
return new UICompBuilder(childrenMap, (props, dispatch) => {
+ useMergeCompStyles(props as Record<string, any>, dispatch);
+
return (
<ColumnLayout {...props} dispatch={dispatch} />
);
diff --git a/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx b/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx
index d927b6795..2c37ba6dd 100644
--- a/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx
@@ -66,6 +66,10 @@ import dayjs from "dayjs";
// import "dayjs/locale/zh-cn";
import { getInitialsAndColorCode } from "util/stringUtils";
import { default as CloseOutlined } from "@ant-design/icons/CloseOutlined";
+
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
+
+
dayjs.extend(relativeTime);
// dayjs.locale("zh-cn");
@@ -100,8 +104,8 @@ const childrenMap = {
"#": ["123", "456", "789"],
}),
onEvent: eventHandlerControl(EventOptions),
- style: styleControl(CommentStyle),
- animationStyle: styleControl(AnimationStyle),
+ style: styleControl(CommentStyle , 'style'),
+ animationStyle: styleControl(AnimationStyle , 'animationStyle'),
commentList: jsonValueExposingStateControl("commentList", []),
deletedItem: jsonValueExposingStateControl("deletedItem", []),
submitedItem: jsonValueExposingStateControl("submitedItem", []),
@@ -370,9 +374,12 @@ const CommentCompBase = (
};
let CommentBasicComp = (function () {
- return new UICompBuilder(childrenMap, (props, dispatch) => (
+ return new UICompBuilder(childrenMap, (props, dispatch) =>{
+ useMergeCompStyles(props as Record<string, any>, dispatch);
+
+ return (
<CommentCompBase {...props} dispatch={dispatch} />
- ))
+ )})
.setPropertyViewFn((children) => (
<>
<Section name={sectionNames.basic}>
diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx
index 7c8bea425..5791d09fa 100644
--- a/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx
@@ -20,6 +20,7 @@ import { ButtonEventHandlerControl, CardEventHandlerControl, clickEvent, refresh
import { optionsControl } from "comps/controls/optionsControl";
import { dropdownControl } from "comps/controls/dropdownControl";
import { styleControl } from "comps/controls/styleControl";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
const { Meta } = Card;
const Wrapper = styled.div<{
@@ -186,13 +187,15 @@ export const ContainerBaseComp = (function () {
actionOptions: ActionOptionControl,
onEvent: CardEventHandlerControl,
- style: styleControl(CardStyle),
- headerStyle: styleControl(CardHeaderStyle),
- bodyStyle: styleControl(CardHeaderStyle),
- animationStyle: styleControl(AnimationStyle),
+ style: styleControl(CardStyle , 'style'),
+ headerStyle: styleControl(CardHeaderStyle , 'headerStyle'),
+ bodyStyle: styleControl(CardHeaderStyle , 'bodyStyle'),
+ animationStyle: styleControl(AnimationStyle , 'animationStyle'),
};
return new ContainerCompBuilder(childrenMap, (props, dispatch) => {
+ useMergeCompStyles(props as Record<string, any>, dispatch);
+
props.container.showHeader = false;
// 注入容器参数
props.container.style = Object.assign(props.container.style, {
diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx
index 9005d7de2..63d074053 100644
--- a/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx
@@ -16,7 +16,8 @@ import { BoolCodeControl } from "comps/controls/codeControl";
import { DisabledContext } from "comps/generators/uiCompBuilder";
import React, { useContext } from "react";
import { EditorContext } from "comps/editorState";
-import { AnimationStyle, styleControl } from "@lowcoder-ee/index.sdk";
+import { AnimationStyle } from "@lowcoder-ee/comps/controls/styleControlConstants";
+import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
export const ContainerBaseComp = (function () {
const childrenMap = {
diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx
index 3d9d45f93..39d71c630 100644
--- a/client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx
@@ -60,7 +60,7 @@ import { ExternalEditorContext } from "util/context/ExternalEditorContext";
import { selectCompModifierKeyPressed } from "util/keyUtils";
import { defaultLayout, GridItemComp, GridItemDataType } from "../gridItemComp";
import { ThemeContext } from "comps/utils/themeContext";
-import { defaultTheme } from "comps/controls/styleControlConstants";
+import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
const childrenMap = {
layout: valueComp<Layout>({}),
@@ -293,9 +293,10 @@ const getExtraLayout = (
const autoHeight = item.autoHeight;
const name = item.name;
const compType = item.compType;
+ const comp = item.comp;
const isSelected = selectedCompNames.has(name) || dragSelectedNames?.has?.(name);
const hidden = item.hidden;
- return { autoHeight, isSelected, name, hidden, compType };
+ return { autoHeight, isSelected, name, hidden, compType, comp };
});
};
diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/flowContainerView.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/flowContainerView.tsx
index 5dce4e4d5..71bb7b83d 100644
--- a/client/packages/lowcoder/src/comps/comps/containerComp/flowContainerView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/containerComp/flowContainerView.tsx
@@ -6,8 +6,8 @@ import { CompSelectionWrapper } from "layout/compSelectionWrapper";
import { useContext } from "react";
import { EditorContext } from "comps/editorState";
import { ThemeContext } from "comps/utils/themeContext";
-import { defaultTheme } from "comps/controls/styleControlConstants";
import styled from "styled-components";
+import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
const FlowContainerWrapper = styled.div<{ $bgColor: string; $maxWidth?: number; $minHeight: string }>`
background-color: ${(props) => props.$bgColor};
diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx
index 0439d0848..0ca13d652 100644
--- a/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx
@@ -18,17 +18,18 @@ import {
ContainerCompBuilder,
} from "../pageLayoutComp/pageLayoutCompBuilder";
import { PageLayout } from "../pageLayoutComp/pageLayout";
-import { AnimationStyle, styleControl } from "@lowcoder-ee/index.sdk";
+import { AnimationStyle } from "@lowcoder-ee/comps/controls/styleControlConstants";
+import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
export const ContainerBaseComp = (function () {
const childrenMap = {
disabled: BoolCodeControl,
- animationStyle: styleControl(AnimationStyle),
+ animationStyle: styleControl(AnimationStyle , 'animationStyle'),
};
return new ContainerCompBuilder(childrenMap, (props, dispatch) => {
- const [siderCollapsed, setSiderCollapsed] = useState(false);
+ const [siderCollapsed, setSiderCollapsed] = useState(false);
return (
<DisabledContext.Provider value={props.disabled}>
diff --git a/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx b/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx
index ee9d4c754..362b1d1eb 100644
--- a/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx
@@ -12,7 +12,9 @@ import { EventData, EventTypeEnum } from "./types";
import { hiddenPropertyView } from "comps/utils/propertyUtils";
import { trans } from "i18n";
import { EditorContext } from "comps/editorState";
-import { AnimationStyle, AnimationStyleType, CustomStyle, CustomStyleType, styleControl } from "@lowcoder-ee/index.sdk";
+import { AnimationStyle, AnimationStyleType, CustomStyle, CustomStyleType } from "@lowcoder-ee/comps/controls/styleControlConstants";
+import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
// TODO: eventually to embedd in container so we have styling?
// TODO: support different starter templates for different frameworks (react, ANT, Flutter, Angular, etc)
@@ -218,11 +220,13 @@ function InnerCustomComponent(props: IProps) {
const childrenMap = {
model: jsonObjectStateControl(defaultModel),
code: withDefault(StringControl, defaultCode),
- style:styleControl(CustomStyle),
- animationStyle:styleControl(AnimationStyle),
+ style: styleControl(CustomStyle , 'style'),
+ animationStyle:styleControl(AnimationStyle , 'animationStyle'),
};
const CustomCompBase = new UICompBuilder(childrenMap, (props, dispatch) => {
+ useMergeCompStyles(props as Record<string, any>, dispatch);
+
const { code, model } = props;
return (
<InnerCustomComponent
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx
index 8a4d5a0db..08f660086 100644
--- a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx
@@ -37,7 +37,7 @@ import {
} from "comps/utils/propertyUtils";
import { trans } from "i18n";
import { DATE_FORMAT, DATE_TIME_FORMAT, DateParser, PickerMode } from "util/dateTimeUtils";
-import React, { ReactNode, useContext } from "react";
+import React, { ReactNode, useContext, useEffect } from "react";
import { IconControl } from "comps/controls/iconControl";
import { hasIcon } from "comps/utils";
import { Section, sectionNames } from "components/Section";
@@ -47,8 +47,8 @@ import { useIsMobile } from "util/hooks";
import { RefControl } from "comps/controls/refControl";
import { CommonPickerMethods } from "antd/es/date-picker/generatePicker/interface";
import { DateRangeUIView } from "comps/comps/dateComp/dateRangeUIView";
-
import { EditorContext } from "comps/editorState";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
const defaultStyle = {
borderStyle: 'solid',
@@ -76,13 +76,16 @@ const commonChildren = {
hourStep: RangeControl.closed(1, 24, 1),
minuteStep: RangeControl.closed(1, 60, 1),
secondStep: RangeControl.closed(1, 60, 1),
- style: withDefault(styleControl(InputFieldStyle),{background:'transparent'}),
- animationStyle: styleControl(AnimationStyle),
- labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)),
+ style: styleControl(InputFieldStyle, 'style'),
+ animationStyle: styleControl(AnimationStyle, 'animationStyle'),
+ labelStyle: styleControl(
+ LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false),
+ 'labelStyle',
+ ),
suffixIcon: withDefault(IconControl, "/icon:regular/calendar"),
...validationChildren,
viewRef: RefControl<CommonPickerMethods>,
- inputFieldStyle: withDefault(styleControl(DateTimeStyle), defaultStyle),
+ inputFieldStyle: styleControl(DateTimeStyle, 'inputFieldStyle'),
};
type CommonChildrenType = RecordConstructorToComp<typeof commonChildren>;
@@ -165,7 +168,9 @@ export type DateCompViewProps = Pick<
placeholder?: string | [string, string];
};
-export const datePickerControl = new UICompBuilder(childrenMap, (props) => {
+export const datePickerControl = new UICompBuilder(childrenMap, (props, dispatch) => {
+ useMergeCompStyles(props as Record<string, any>, dispatch);
+
let time = null;
if (props.value.value !== '') {
time = dayjs(props.value.value, DateParser);
@@ -284,7 +289,9 @@ export const dateRangeControl = (function () {
...commonChildren,
};
- return new UICompBuilder(childrenMap, (props) => {
+ return new UICompBuilder(childrenMap, (props, dispatch) => {
+ useMergeCompStyles(props as Record<string, any>, dispatch);
+
let start = null;
let end = null;
if (props.start.value !== '') {
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx
index e2c36b659..28875e798 100644
--- a/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx
@@ -25,7 +25,7 @@ import {
} from "../../generators/withExposing";
import { formDataChildren, FormDataPropertyView } from "../formComp/formDataConstants";
import { styleControl } from "comps/controls/styleControl";
-import { DateTimeStyle, DateTimeStyleType } from "comps/controls/styleControlConstants";
+import { AnimationStyle, DateTimeStyle, DateTimeStyleType, InputFieldStyle, LabelStyle } from "comps/controls/styleControlConstants";
import { withMethodExposing } from "../../generators/withMethodExposing";
import {
disabledPropertyView,
@@ -40,7 +40,7 @@ import {
} from "comps/utils/propertyUtils";
import { trans } from "i18n";
import { TIME_FORMAT, TimeParser } from "util/dateTimeUtils";
-import React, { ReactNode, useContext } from "react";
+import React, { ReactNode, useContext, useEffect } from "react";
import { IconControl } from "comps/controls/iconControl";
import { hasIcon } from "comps/utils";
import { Section, sectionNames } from "components/Section";
@@ -52,6 +52,7 @@ import { CommonPickerMethods } from "antd/es/date-picker/generatePicker/interfac
import { TimePickerProps } from "antd/es/time-picker";
import { EditorContext } from "comps/editorState";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
const EventOptions = [changeEvent, focusEvent, blurEvent] as const;
@@ -73,7 +74,13 @@ const commonChildren = {
hourStep: RangeControl.closed(1, 24, 1),
minuteStep: RangeControl.closed(1, 60, 1),
secondStep: RangeControl.closed(1, 60, 1),
- style: withDefault(styleControl(DateTimeStyle),{background:'transparent',borderWidth:'1px'}),
+ style: styleControl(InputFieldStyle, 'style'),
+ animationStyle: styleControl(AnimationStyle, 'animationStyle'),
+ labelStyle: styleControl(
+ LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false),
+ 'labelStyle',
+ ),
+ inputFieldStyle: styleControl(DateTimeStyle, 'inputFieldStyle'),
suffixIcon: withDefault(IconControl, "/icon:regular/clock"),
viewRef: RefControl<CommonPickerMethods>,
...validationChildren,
@@ -136,7 +143,9 @@ export type TimeCompViewProps = Pick<
placeholder?: string | [string, string];
};
-export const timePickerControl = new UICompBuilder(childrenMap, (props) => {
+export const timePickerControl = new UICompBuilder(childrenMap, (props, dispatch) => {
+ useMergeCompStyles(props as Record<string, any>, dispatch);
+
let time = null;
if(props.value.value !== '') {
time = dayjs(props.value.value, TimeParser);
@@ -145,10 +154,13 @@ export const timePickerControl = new UICompBuilder(childrenMap, (props) => {
return props.label({
required: props.required,
style: props.style,
+ labelStyle: props.labelStyle,
+ inputFieldStyle:props.inputFieldStyle,
+ animationStyle:props.animationStyle,
children: (
<TimeUIView
viewRef={props.viewRef}
- $style={props.style}
+ $style={props.inputFieldStyle}
disabled={props.disabled}
value={time?.isValid() ? time : null}
disabledTime={() => disabledTime(props.minTime, props.maxTime)}
@@ -215,9 +227,20 @@ export const timePickerControl = new UICompBuilder(childrenMap, (props) => {
)}
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
- <Section name={sectionNames.style}>
- {children.style.getPropertyView()}
- </Section>
+ <>
+ <Section name={sectionNames.style}>
+ {children.style.getPropertyView()}
+ </Section>
+ <Section name={sectionNames.labelStyle}>
+ {children.labelStyle.getPropertyView()}
+ </Section>
+ <Section name={sectionNames.inputFieldStyle}>
+ {children.inputFieldStyle.getPropertyView()}
+ </Section>
+ <Section name={sectionNames.animationStyle} hasTooltip={true}>
+ {children.animationStyle.getPropertyView()}
+ </Section>
+ </>
)}
</>
))
@@ -231,7 +254,9 @@ export const timeRangeControl = (function () {
...commonChildren,
};
- return new UICompBuilder(childrenMap, (props) => {
+ return new UICompBuilder(childrenMap, (props, dispatch) => {
+ useMergeCompStyles(props as Record<string, any>, dispatch);
+
let start = null;
if(props.start.value !== '') {
start = dayjs(props.start.value, TimeParser);
@@ -244,7 +269,7 @@ export const timeRangeControl = (function () {
const children = (
<TimeRangeUIView
viewRef={props.viewRef}
- $style={props.style}
+ $style={props.inputFieldStyle}
disabled={props.disabled}
start={start?.isValid() ? start : null}
end={end?.isValid() ? end : null}
@@ -271,6 +296,9 @@ export const timeRangeControl = (function () {
return props.label({
required: props.required,
style: props.style,
+ labelStyle: props.labelStyle,
+ inputFieldStyle:props.inputFieldStyle,
+ animationStyle:props.animationStyle,
children: children,
...(startResult.validateStatus !== "success"
? startResult
@@ -323,9 +351,20 @@ export const timeRangeControl = (function () {
)}
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
- <Section name={sectionNames.style}>
- {children.style.getPropertyView()}
- </Section>
+ <>
+ <Section name={sectionNames.style}>
+ {children.style.getPropertyView()}
+ </Section>
+ <Section name={sectionNames.labelStyle}>
+ {children.labelStyle.getPropertyView()}
+ </Section>
+ <Section name={sectionNames.inputFieldStyle}>
+ {children.inputFieldStyle.getPropertyView()}
+ </Section>
+ <Section name={sectionNames.animationStyle} hasTooltip={true}>
+ {children.animationStyle.getPropertyView()}
+ </Section>
+ </>
)}
</>
))
diff --git a/client/packages/lowcoder/src/comps/comps/dividerComp.tsx b/client/packages/lowcoder/src/comps/comps/dividerComp.tsx
index 53f5a3eb9..a01cf9ec4 100644
--- a/client/packages/lowcoder/src/comps/comps/dividerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/dividerComp.tsx
@@ -2,7 +2,7 @@ import { default as Divider, DividerProps } from "antd/es/divider";
import { StringControl } from "comps/controls/codeControl";
import { BoolControl } from "comps/controls/boolControl";
import { alignControl } from "comps/controls/alignControl";
-import { UICompBuilder } from "comps/generators";
+import { UICompBuilder, withDefault } from "comps/generators";
import { NameConfig, NameConfigHidden } from "comps/generators/withExposing";
import { Section, sectionNames } from "lowcoder-design";
import _ from "lodash";
@@ -12,6 +12,8 @@ import { AnimationStyle, AnimationStyleType, DividerStyle, DividerStyleType, hei
import { migrateOldData } from "comps/generators/simpleGenerators";
import { hiddenPropertyView } from "comps/utils/propertyUtils";
import { trans } from "i18n";
+import { AutoHeightControl } from "comps/controls/autoHeightControl";
+
import { useContext } from "react";
import { EditorContext } from "comps/editorState";
@@ -22,12 +24,12 @@ type IProps = DividerProps & {
$animationStyle:AnimationStyleType;
};
-// TODO: find out how to set border style when text is active
// TODO: enable type "vertical" https://ant.design/components/divider
-const StyledDivider = styled(Divider) <IProps>`
+const StyledDivider = styled(Divider)<IProps>`
margin-top: 3.5px;
- rotate:${props=>props.$style.rotation};
+ rotate: ${(props) => props.$style.rotation};
+
.ant-divider-inner-text {
height: 32px;
display: flex;
@@ -35,29 +37,30 @@ const StyledDivider = styled(Divider) <IProps>`
font-size: ${(props) => props.$style.textSize};
font-weight: ${(props) => props.$style.textWeight};
font-family: ${(props) => props.$style.fontFamily};
- text-transform:${(props)=>props.$style.textTransform};
- text-decoration:${(props)=>props.$style.textDecoration};
- font-style:${(props) => props.$style.fontStyle}
+ text-transform: ${(props) => props.$style.textTransform};
+ ${(props) => props.$style.textDecoration !== undefined ? `text-decoration: ${props.$style.textDecoration};` : ''}
+ font-style: ${(props) => props.$style.fontStyle};
}
- ${props=>props.$animationStyle}
- min-width: 0;
- width: ${(props) => {
- return widthCalculator(props.$style.margin);
- }};
- min-height: ${(props) => {
- return heightCalculator(props.$style.margin);
- }};
- margin: ${(props) => {
- return props.$style.margin;
- }};
+
+ ${(props) => props.$animationStyle}
+ min-width: 1px;
+ width: ${(props) => widthCalculator(props.$style.margin)};
+ min-height: ${(props) => heightCalculator(props.$style.margin)};
+ margin: ${(props) => props.$style.margin};
padding: ${(props) => props.$style.padding};
- border-radius:${props=>props.$style.radius};
- border-top: ${(props) => (props.$style.borderWidth && props.$style.borderWidth != "0px" ? props.$style.borderWidth : "1px")} ${(props) => props.$style.borderStyle} ${(props) => props.$style.border};
-""
- .ant-divider-inner-text::before, .ant-divider-inner-text::after {
- border-block-start: ${(props) => (props.$style.borderWidth && props.$style.borderWidth != "0px" ? props.$style.borderWidth : "1px")} ${(props) => (props.dashed ? "dashed" : "solid")} ${(props) => props.$style.border} !important;
+ border-radius: ${(props) => props.$style.radius};
+ border-top: ${(props) => props.$style.borderWidth && props.$style.borderWidth !== "0px" ? props.$style.borderWidth : "1px"}
+ ${(props) => props.$style.borderStyle}
+ ${(props) => props.$style.border};
+
+ .ant-divider-inner-text::before,
+ .ant-divider-inner-text::after {
+ border-block-start: ${(props) => props.$style.borderWidth && props.$style.borderWidth !== "0px" ? props.$style.borderWidth : "1px"}
+ ${(props) => props.dashed ? "dashed" : "solid"}
+ ${(props) => props.$style.border} !important;
border-block-start-color: inherit;
border-block-end: 0;
+ border-block-start-radius: inherit;
}
&.ant-divider-horizontal.ant-divider-with-text {
@@ -65,12 +68,22 @@ const StyledDivider = styled(Divider) <IProps>`
border-top-color: ${(props) => props.$style.color};
color: ${(props) => props.$style.text};
}
+
+ &.ant-divider-horizontal.ant-divider-with-text::before,
+ &.ant-divider-horizontal.ant-divider-with-text::after {
+ border-top-color: ${(props) => props.$style.color};
+ border-radius: ${(props) => props.$style.radius};
+ border-top: ${(props) => props.$style.borderWidth && props.$style.borderWidth !== "0px" ? props.$style.borderWidth : "1px"}
+ ${(props) => props.$style.borderStyle}
+ ${(props) => props.$style.border};
+ }
`;
const childrenMap = {
title: StringControl,
dashed: BoolControl,
align: alignControl(),
+ autoHeight: withDefault(AutoHeightControl, "fixed"),
style: styleControl(DividerStyle),
animationStyle: styleControl(AnimationStyle),
};
@@ -91,7 +104,7 @@ function fixOldStyleData(oldData: any) {
// Compatible with historical style data 2022-8-26
-export const DividerComp = migrateOldData(
+const DividerTempComp = migrateOldData(
new UICompBuilder(childrenMap, (props) => {
return (
<StyledDivider
@@ -125,6 +138,7 @@ export const DividerComp = migrateOldData(
label: trans("divider.align"),
radioButton: true,
})}
+ {children.autoHeight.getPropertyView()}
</Section>
<Section name={sectionNames.style}>
{children.dashed.propertyView({ label: trans("divider.dashed") })}
@@ -147,3 +161,9 @@ export const DividerComp = migrateOldData(
.build(),
fixOldStyleData
);
+
+export const DividerComp = class extends DividerTempComp {
+ override autoHeight(): boolean {
+ return this.children.autoHeight.getView();
+ }
+};
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx b/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx
index a44895642..005edaefc 100644
--- a/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx
@@ -42,6 +42,7 @@ import { messageInstance } from "lowcoder-design/src/components/GlobalInstances"
import React, { useContext } from "react";
import { EditorContext } from "comps/editorState";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
const FileSizeControl = codeControl((value) => {
if (typeof value === "number") {
@@ -100,8 +101,8 @@ const commonChildren = {
showUploadList: BoolControl.DEFAULT_TRUE,
disabled: BoolCodeControl,
onEvent: eventHandlerControl(EventOptions),
- style: styleControl(FileStyle),
- animationStyle: styleControl(AnimationStyle),
+ style: styleControl(FileStyle , 'style'),
+ animationStyle: styleControl(AnimationStyle , 'animationStyle'),
parseFiles: BoolPureControl,
parsedValue: stateComp<Array<JSONValue | null>>([]),
prefixIcon: withDefault(IconControl, "/icon:solid/arrow-up-from-bracket"),
@@ -379,9 +380,11 @@ const childrenMap = {
...formDataChildren,
};
-let FileTmpComp = new UICompBuilder(childrenMap, (props, dispatch) => (
- <Upload {...props} dispatch={dispatch} />
-))
+let FileTmpComp = new UICompBuilder(childrenMap, (props, dispatch) => {
+ useMergeCompStyles(props, dispatch);
+ return(
+ <Upload {...props} dispatch={dispatch} />
+ )})
.setPropertyViewFn((children) => (
<>
<Section name={sectionNames.basic}>
diff --git a/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx b/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx
index 5f4ada67a..b04238f1b 100644
--- a/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx
@@ -1,7 +1,7 @@
import { styleControl } from "comps/controls/styleControl";
import { AnimationStyle, AnimationStyleType, FileViewerStyle, FileViewerStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
import { isEmpty } from "lodash";
-import { useState } from "react";
+import { useEffect, useState } from "react";
import { DocumentViewer } from "react-documents";
import styled, { css } from "styled-components";
import { Section, sectionNames } from "lowcoder-design";
@@ -13,6 +13,7 @@ import { trans } from "i18n";
import { useContext } from "react";
import { EditorContext } from "comps/editorState";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
const getStyle = (style: FileViewerStyleType) => {
return css`
@@ -67,10 +68,12 @@ const DraggableFileViewer = (props: { src: string; style: FileViewerStyleType,an
let FileViewerBasicComp = (function () {
const childrenMap = {
src: StringControl,
- style: styleControl(FileViewerStyle),
- animationStyle: styleControl(AnimationStyle),
+ style: styleControl(FileViewerStyle , 'style'),
+ animationStyle: styleControl(AnimationStyle , 'animationStyle'),
};
- return new UICompBuilder(childrenMap, (props) => {
+ return new UICompBuilder(childrenMap, (props, dispatch) => {
+ useMergeCompStyles(props as Record<string, any>, dispatch);
+
if (isEmpty(props.src)) {
return (
<ErrorWrapper
diff --git a/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx b/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx
index 4851011f9..70949396c 100644
--- a/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx
@@ -58,7 +58,8 @@ import { DisabledContext } from "comps/generators/uiCompBuilder";
import { default as LoadingOutlined } from "@ant-design/icons/LoadingOutlined";
import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
import { styled } from "styled-components";
-import { AnimationStyle, styleControl } from "@lowcoder-ee/index.sdk";
+import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
+import { AnimationStyle } from "@lowcoder-ee/comps/controls/styleControlConstants";
const FormWrapper = styled.div`
height: 100%;
@@ -79,7 +80,7 @@ const childrenMap = {
disableSubmit: BoolCodeControl,
loading: BoolCodeControl,
onEvent: eventHandlerControl(eventOptions),
- animationStyle:styleControl(AnimationStyle)
+ animationStyle: styleControl(AnimationStyle)
};
type FormProps = TriContainerViewProps &
diff --git a/client/packages/lowcoder/src/comps/comps/gridItemComp.tsx b/client/packages/lowcoder/src/comps/comps/gridItemComp.tsx
index 4fb4eb961..2ac4e82eb 100644
--- a/client/packages/lowcoder/src/comps/comps/gridItemComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/gridItemComp.tsx
@@ -39,7 +39,6 @@ const TmpComp = withTypeAndChildren<
>(
(type) => {
const compInfo = parseCompType(type);
-
if (compInfo.isRemote) {
return remoteComp(compInfo);
}
diff --git a/client/packages/lowcoder/src/comps/comps/gridLayoutComp/canvasView.tsx b/client/packages/lowcoder/src/comps/comps/gridLayoutComp/canvasView.tsx
index 1a15ba9d3..35f56dca4 100644
--- a/client/packages/lowcoder/src/comps/comps/gridLayoutComp/canvasView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/gridLayoutComp/canvasView.tsx
@@ -15,11 +15,11 @@ import { ExternalEditorContext } from "util/context/ExternalEditorContext";
import { AppTypeEnum } from "constants/applicationConstants";
import { EditorContainerPadding, TopHeaderHeight } from "constants/style";
import { ThemeContext } from "comps/utils/themeContext";
-import { defaultTheme } from "comps/controls/styleControlConstants";
import { checkIsMobile } from "util/commonUtils";
import { CanvasContainerID } from "constants/domLocators";
import { CNRootContainer } from "constants/styleSelectors";
import { ScrollBar } from "lowcoder-design";
+import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
// min-height: 100vh;
diff --git a/client/packages/lowcoder/src/comps/comps/iconComp.tsx b/client/packages/lowcoder/src/comps/comps/iconComp.tsx
index d0ea40cf5..63b8855a2 100644
--- a/client/packages/lowcoder/src/comps/comps/iconComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/iconComp.tsx
@@ -30,6 +30,7 @@ import {
} from "../controls/eventHandlerControl";
import { useContext } from "react";
import { EditorContext } from "comps/editorState";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
const Container = styled.div<{
$style: IconStyleType | undefined;
@@ -62,8 +63,8 @@ ${props=>props.$animationStyle}
const EventOptions = [clickEvent] as const;
const childrenMap = {
- style: styleControl(IconStyle),
- animationStyle: styleControl(AnimationStyle),
+ style: styleControl(IconStyle,'style'),
+ animationStyle: styleControl(AnimationStyle,'animationStyle'),
icon: withDefault(IconControl, "/icon:antd/homefilled"),
autoHeight: withDefault(AutoHeightControl, "auto"),
iconSize: withDefault(NumberControl, 20),
@@ -112,7 +113,10 @@ const IconView = (props: RecordConstructorToView<typeof childrenMap>) => {
};
let IconBasicComp = (function () {
- return new UICompBuilder(childrenMap, (props) => <IconView {...props} />)
+ return new UICompBuilder(childrenMap, (props, dispatch) => {
+ useMergeCompStyles(props as Record<string, any>, dispatch);
+
+ return(<IconView {...props} />)})
.setPropertyViewFn((children) => (
<>
<Section name={sectionNames.basic}>
diff --git a/client/packages/lowcoder/src/comps/comps/iframeComp.tsx b/client/packages/lowcoder/src/comps/comps/iframeComp.tsx
index db65a1057..187edd993 100644
--- a/client/packages/lowcoder/src/comps/comps/iframeComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/iframeComp.tsx
@@ -12,6 +12,7 @@ import log from "loglevel";
import { useContext } from "react";
import { EditorContext } from "comps/editorState";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
const Wrapper = styled.div<{$style: IframeStyleType; $animationStyle:AnimationStyleType}>`
width: 100%;
@@ -45,10 +46,12 @@ let IFrameCompBase = new UICompBuilder(
allowMicrophone: BoolControl,
allowCamera: BoolControl,
allowPopup: BoolControl,
- style: styleControl(IframeStyle),
- animationStyle: styleControl(AnimationStyle),
+ style: styleControl(IframeStyle , 'style'),
+ animationStyle: styleControl(AnimationStyle , 'animationStyle'),
},
- (props) => {
+ (props, dispatch) => {
+ useMergeCompStyles(props as Record<string, any>, dispatch);
+
const sandbox = ["allow-scripts", "allow-same-origin"];
props.allowSubmitForm && sandbox.push("allow-forms");
props.allowDownload && sandbox.push("allow-downloads");
diff --git a/client/packages/lowcoder/src/comps/comps/imageComp.tsx b/client/packages/lowcoder/src/comps/comps/imageComp.tsx
index 4b571764c..e4a8b8b69 100644
--- a/client/packages/lowcoder/src/comps/comps/imageComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/imageComp.tsx
@@ -34,6 +34,7 @@ import { DEFAULT_IMG_URL } from "util/stringUtils";
import { useContext } from "react";
import { EditorContext } from "comps/editorState";
import { StringControl } from "../controls/codeControl";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
const Container = styled.div<{ $style: ImageStyleType | undefined,$animationStyle:AnimationStyleType }>`
height: 100%;
@@ -166,14 +167,16 @@ const ContainerImg = (props: RecordConstructorToView<typeof childrenMap>) => {
const childrenMap = {
src: withDefault(StringStateControl, "https://temp.im/350x400"),
onEvent: eventHandlerControl(EventOptions),
- style: styleControl(ImageStyle),
- animationStyle: styleControl(AnimationStyle),
+ style: styleControl(ImageStyle , 'style'),
+ animationStyle: styleControl(AnimationStyle , 'animationStyle'),
autoHeight: withDefault(AutoHeightControl, "fixed"),
supportPreview: BoolControl,
restrictPaddingOnRotation:withDefault(StringControl, 'image')
};
-let ImageBasicComp = new UICompBuilder(childrenMap, (props) => {
+let ImageBasicComp = new UICompBuilder(childrenMap, (props, dispatch) => {
+ useMergeCompStyles(props as Record<string, any>, dispatch);
+
return <ContainerImg {...props} />;
})
.setPropertyViewFn((children) => {
diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx
index 9583c449a..b6f3c4a26 100644
--- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx
@@ -20,6 +20,7 @@ import {
} from "base/codeEditor/codeMirror";
import { useExtensions } from "base/codeEditor/extensions";
import { EditorContext } from "comps/editorState";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
/**
* JsonEditor Comp
@@ -65,14 +66,15 @@ const childrenMap = {
value: jsonValueExposingStateControl("value", defaultData),
onEvent: ChangeEventHandlerControl,
label: withDefault(LabelControl, { position: "column" }),
- style: styleControl(JsonEditorStyle),
- animationStyle: styleControl(AnimationStyle),
-
+ style: styleControl(JsonEditorStyle, 'style'),
+ animationStyle: styleControl(AnimationStyle , 'animationStyle'),
...formDataChildren,
};
let JsonEditorTmpComp = (function () {
- return new UICompBuilder(childrenMap, (props) => {
+ return new UICompBuilder(childrenMap, (props, dispatch) => {
+ useMergeCompStyles(props as Record<string, any>, dispatch);
+
const wrapperRef = useRef<HTMLDivElement>(null);
const view = useRef<EditorViewType | null>(null);
const editContent = useRef<string>();
diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx
index da9514c79..ceb6adff2 100644
--- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx
@@ -10,8 +10,10 @@ import { ArrayOrJSONObjectControl, NumberControl } from "comps/controls/codeCont
import { hiddenPropertyView } from "comps/utils/propertyUtils";
import { trans } from "i18n";
import { EditorContext } from "comps/editorState";
-import { useContext } from "react";
-import { AnimationStyle, AnimationStyleType, styleControl } from "@lowcoder-ee/index.sdk";
+import { useContext, useEffect } from "react";
+import { AnimationStyle, AnimationStyleType } from "@lowcoder-ee/comps/controls/styleControlConstants";
+import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
/**
* JsonExplorer Comp
@@ -54,23 +56,27 @@ let JsonExplorerTmpComp = (function () {
indent: withDefault(NumberControl, 4),
expandToggle: BoolControl.DEFAULT_TRUE,
theme: dropdownControl(themeOptions, 'shapeshifter:inverted'),
- animationStyle:styleControl(AnimationStyle),
+ animationStyle:styleControl(AnimationStyle, 'animationStyle'),
};
- return new UICompBuilder(childrenMap, (props) => (
- <JsonExplorerContainer
- $theme={props.theme as keyof typeof bgColorMap}
- $animationStyle={props.animationStyle}
- >
- <ReactJson
- name={false}
- src={props.value}
- theme={props.theme as ThemeKeys}
- collapsed={!props.expandToggle}
- displayDataTypes={false}
- indentWidth={props.indent}
- />
- </JsonExplorerContainer>
- ))
+ return new UICompBuilder(childrenMap, (props, dispatch) => {
+ useMergeCompStyles(props as Record<string, any>, dispatch);
+
+ return (
+ <JsonExplorerContainer
+ $theme={props.theme as keyof typeof bgColorMap}
+ $animationStyle={props.animationStyle}
+ >
+ <ReactJson
+ name={false}
+ src={props.value}
+ theme={props.theme as ThemeKeys}
+ collapsed={!props.expandToggle}
+ displayDataTypes={false}
+ indentWidth={props.indent}
+ />
+ </JsonExplorerContainer>
+ )
+ })
.setPropertyViewFn((children) => {
return (
<>
diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx
index 078228642..6e35d7716 100644
--- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx
@@ -9,7 +9,7 @@ import { styleControl } from "comps/controls/styleControl";
import { AnimationStyle, LottieStyle } from "comps/controls/styleControlConstants";
import { trans } from "i18n";
import { Section, sectionNames } from "lowcoder-design";
-import { useContext, lazy } from "react";
+import { useContext, lazy, useEffect } from "react";
import { UICompBuilder, withDefault } from "../../generators";
import {
NameConfig,
@@ -18,6 +18,7 @@ import {
} from "../../generators/withExposing";
import { defaultLottie } from "./jsonConstants";
import { EditorContext } from "comps/editorState";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
const Player = lazy(
() => import('@lottiefiles/react-lottie-player')
@@ -93,13 +94,15 @@ let JsonLottieTmpComp = (function () {
speed: dropdownControl(speedOptions, "1"),
width: withDefault(NumberControl, 100),
height: withDefault(NumberControl, 100),
- container: styleControl(LottieStyle),
- animationStyle: styleControl(AnimationStyle),
+ container: styleControl(LottieStyle , 'container'),
+ animationStyle: styleControl(AnimationStyle , 'animationStyle'),
animationStart: dropdownControl(animationStartOptions, "auto"),
loop: dropdownControl(loopOptions, "single"),
keepLastFrame: BoolControl.DEFAULT_TRUE,
};
- return new UICompBuilder(childrenMap, (props) => {
+ return new UICompBuilder(childrenMap, (props, dispatch) => {
+ useMergeCompStyles(props as Record<string, any>, dispatch);
+
return (
<div
style={{
diff --git a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx
index d80ee9f23..4c5898e9b 100644
--- a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx
@@ -23,8 +23,9 @@ import ErrorBoundary from "./errorBoundary";
import { Theme } from "@rjsf/antd";
import { hiddenPropertyView } from "comps/utils/propertyUtils";
-import { useContext } from "react";
+import { useContext, useEffect } from "react";
import { EditorContext } from "comps/editorState";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
Theme.widgets.DateWidget = DateWidget(false);
Theme.widgets.DateTimeWidget = DateWidget(true);
@@ -191,10 +192,12 @@ let FormBasicComp = (function () {
uiSchema: jsonObjectControl(i18nObjs.jsonForm.defaultUiSchema),
data: jsonObjectExposingStateControl("data", i18nObjs.jsonForm.defaultFormData),
onEvent: eventHandlerControl(EventOptions),
- style: styleControl(JsonSchemaFormStyle),
- animationStyle: styleControl(AnimationStyle),
+ style: styleControl(JsonSchemaFormStyle , 'style'),
+ animationStyle: styleControl(AnimationStyle , 'animationStyle'),
};
- return new UICompBuilder(childrenMap, (props) => {
+ return new UICompBuilder(childrenMap, (props, dispatch) => {
+ useMergeCompStyles(props as Record<string, any>, dispatch);
+
// rjsf 4.20 supports ui:submitButtonOptions, but if the button is customized, it will not take effect. Here we implement it ourselves
const buttonOptions = props?.uiSchema?.[
"ui:submitButtonOptions"
diff --git a/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx b/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx
index 5d94b3d5e..e76ef8c0b 100644
--- a/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx
+++ b/client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx
@@ -20,7 +20,7 @@ import { hiddenPropertyView } from "comps/utils/propertyUtils";
import { dropdownControl } from "@lowcoder-ee/comps/controls/dropdownControl";
import { DataOption, DataOptionType, ModeOptions, menuItemStyleOptions, mobileNavJsonMenuItems } from "./navLayoutConstants";
import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
-import { NavLayoutItemActiveStyle, NavLayoutItemActiveStyleType, NavLayoutItemHoverStyle, NavLayoutItemHoverStyleType, NavLayoutItemStyle, NavLayoutItemStyleType, NavLayoutStyle, NavLayoutStyleType, defaultTheme } from "@lowcoder-ee/comps/controls/styleControlConstants";
+import { NavLayoutItemActiveStyle, NavLayoutItemActiveStyleType, NavLayoutItemHoverStyle, NavLayoutItemHoverStyleType, NavLayoutItemStyle, NavLayoutItemStyleType, NavLayoutStyle, NavLayoutStyleType } from "@lowcoder-ee/comps/controls/styleControlConstants";
import Segmented from "antd/es/segmented";
import { controlItem } from "components/control";
import { check } from "@lowcoder-ee/util/convertUtils";
@@ -30,6 +30,9 @@ import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
import { AlignCenter } from "lowcoder-design";
import { AlignLeft } from "lowcoder-design";
import { AlignRight } from "lowcoder-design";
+import { LayoutActionComp } from "./layoutActionComp";
+import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
+import { clickEvent, eventHandlerControl } from "@lowcoder-ee/comps/controls/eventHandlerControl";
const TabBar = React.lazy(() => import("antd-mobile/es/components/tab-bar"));
const TabBarItem = React.lazy(() =>
@@ -37,6 +40,7 @@ const TabBarItem = React.lazy(() =>
default: module.TabBarItem,
}))
);
+const EventOptions = [clickEvent] as const;
const AppViewContainer = styled.div`
position: absolute;
@@ -171,6 +175,7 @@ type JsonItemNode = {
}
type TabBarProps = {
+ onEvent:any;
tabs: Array<{
title: string;
icon?: React.ReactNode;
@@ -224,6 +229,7 @@ function TabBarView(props: TabBarProps & {
<StyledTabBar
onChange={(key: string) => {
if (key) {
+ props.onEvent('click')
props.onChange(key);
}
}}
@@ -250,6 +256,7 @@ const TabOptionComp = (function () {
return new MultiCompBuilder(
{
app: AppSelectComp,
+ action: LayoutActionComp,
label: StringControl,
icon: IconControl,
hidden: BoolCodeControl,
@@ -261,12 +268,16 @@ const TabOptionComp = (function () {
.setPropertyViewFn((children, dispatch) => {
return (
<>
- {children.app.propertyView({})}
+ {children.action.propertyView({
+ onAppChange: (label:any) => {
+ label && children.label.dispatchChangeValueAction(label);
+ },
+ })}
{children.label.propertyView({ label: trans("label") })}
{hiddenPropertyView(children)}
{children.icon.propertyView({
- label: trans("icon"),
- tooltip: trans("aggregation.iconTooltip"),
+ label: trans('icon'),
+ tooltip: trans('aggregation.iconTooltip'),
})}
</>
);
@@ -276,8 +287,9 @@ const TabOptionComp = (function () {
let MobileTabLayoutTmp = (function () {
const childrenMap = {
+ onEvent: eventHandlerControl(EventOptions),
dataOptionType: dropdownControl(DataOptionType, DataOption.Manual),
- jsonItems: jsonControl<JsonItemNode[]>(convertTreeData, mobileNavJsonMenuItems),
+ jsonItems: jsonControl<JsonItemNode[]>(convertTreeData, mobileNavJsonMenuItems),
tabs: manualOptionsControl(TabOptionComp, {
initOptions: [
{
@@ -328,6 +340,9 @@ let MobileTabLayoutTmp = (function () {
})
}
</Section>
+ <Section name={trans("eventHandler.eventHandlers")}>
+ { children.onEvent.getPropertyView() }
+ </Section>
<Section name={sectionNames.layout}>
{children.backgroundImage.propertyView({
label: `Background Image`,
@@ -385,6 +400,7 @@ MobileTabLayoutTmp = withViewFn(MobileTabLayoutTmp, (comp) => {
const verticalAlignment = comp.children.verticalAlignment.getView();
const showSeparator = comp.children.showSeparator.getView();
const bgColor = (useContext(ThemeContext)?.theme || defaultTheme).canvas;
+ const onEvent = comp.children.onEvent.getView();
useEffect(() => {
comp.children.jsonTabs.dispatchChangeValueAction({
@@ -428,6 +444,7 @@ MobileTabLayoutTmp = withViewFn(MobileTabLayoutTmp, (comp) => {
const tabBarView = (
<TabBarView
+ onEvent={onEvent}
tabs={tabViews.map((tab, index) => ({
key: index,
title: tab.children.label.getView(),
diff --git a/client/packages/lowcoder/src/comps/comps/layout/navLayout.tsx b/client/packages/lowcoder/src/comps/comps/layout/navLayout.tsx
index 35d13862d..c40870c1f 100644
--- a/client/packages/lowcoder/src/comps/comps/layout/navLayout.tsx
+++ b/client/packages/lowcoder/src/comps/comps/layout/navLayout.tsx
@@ -17,7 +17,7 @@ import { EditorContainer, EmptyContent } from "pages/common/styledComponent";
import { useCallback, useEffect, useMemo, useState } from "react";
import styled from "styled-components";
import { isUserViewMode, useAppPathParam } from "util/hooks";
-import { StringControl, jsonControl } from "comps/controls/codeControl";
+import { BoolCodeControl, StringControl, jsonControl } from "comps/controls/codeControl";
import { styleControl } from "comps/controls/styleControl";
import {
NavLayoutStyle,
@@ -40,9 +40,13 @@ import {
jsonMenuItems,
menuItemStyleOptions
} from "./navLayoutConstants";
+import { clickEvent, eventHandlerControl } from "@lowcoder-ee/comps/controls/eventHandlerControl";
+
+const { Header } = Layout;
const DEFAULT_WIDTH = 240;
type MenuItemStyleOptionValue = "normal" | "hover" | "active";
+const EventOptions = [clickEvent] as const;
const StyledSide = styled(LayoutSider)`
max-height: calc(100vh - ${TopHeaderHeight});
@@ -99,10 +103,12 @@ const StyledMenu = styled(AntdMenu)<{
.ant-menu-submenu {
margin: ${(props) => props.$navItemStyle?.margin};
width: ${(props) => props.$navItemStyle?.width};
+ padding: 0;
.ant-menu-submenu-title {
width: 100%;
height: auto !important;
+ max-height: 100%;
background-color: ${(props) => props.$navItemStyle?.background};
color: ${(props) => props.$navItemStyle?.text};
border-radius: ${(props) => props.$navItemStyle?.radius} !important;
@@ -179,6 +185,7 @@ function convertTreeData(data: any) {
let NavTmpLayout = (function () {
const childrenMap = {
+ onEvent: eventHandlerControl(EventOptions),
dataOptionType: dropdownControl(DataOptionType, DataOption.Manual),
items: withDefault(LayoutMenuItemListComp, [
{
@@ -190,7 +197,8 @@ let NavTmpLayout = (function () {
width: withDefault(StringControl, DEFAULT_WIDTH),
backgroundImage: withDefault(StringControl, ""),
mode: dropdownControl(ModeOptions, "inline"),
- navStyle: withDefault(styleControl(NavLayoutStyle), defaultStyle),
+ collapse: BoolCodeControl,
+ navStyle: withDefault(styleControl(NavLayoutStyle), {...defaultStyle, padding: '1px'}),
navItemStyle: withDefault(styleControl(NavLayoutItemStyle), defaultStyle),
navItemHoverStyle: withDefault(styleControl(NavLayoutItemHoverStyle), {}),
navItemActiveStyle: withDefault(styleControl(NavLayoutItemActiveStyle), {}),
@@ -216,6 +224,9 @@ let NavTmpLayout = (function () {
})
}
</Section>
+ <Section name={trans("eventHandler.eventHandlers")}>
+ { children.onEvent.getPropertyView() }
+ </Section>
<Section name={sectionNames.layout}>
{ children.width.propertyView({
label: trans("navLayout.width"),
@@ -226,6 +237,9 @@ let NavTmpLayout = (function () {
label: trans("labelProp.position"),
radioButton: true
})}
+ { children.collapse.propertyView({
+ label: trans("labelProp.collapse"),
+ })}
{children.backgroundImage.propertyView({
label: `Background Image`,
placeholder: 'https://temp.im/350x400',
@@ -266,6 +280,7 @@ NavTmpLayout = withViewFn(NavTmpLayout, (comp) => {
const items = comp.children.items.getView();
const navWidth = comp.children.width.getView();
const navMode = comp.children.mode.getView();
+ const navCollapse = comp.children.collapse.getView();
const navStyle = comp.children.navStyle.getView();
const navItemStyle = comp.children.navItemStyle.getView();
const navItemHoverStyle = comp.children.navItemHoverStyle.getView();
@@ -273,7 +288,8 @@ NavTmpLayout = withViewFn(NavTmpLayout, (comp) => {
const backgroundImage = comp.children.backgroundImage.getView();
const jsonItems = comp.children.jsonItems.getView();
const dataOptionType = comp.children.dataOptionType.getView();
-
+ const onEvent = comp.children.onEvent.getView();
+
// filter out hidden. unauthorised items filtered by server
const filterItem = useCallback((item: LayoutMenuItemComp): boolean => {
return !item.children.hidden.getView();
@@ -310,7 +326,8 @@ NavTmpLayout = withViewFn(NavTmpLayout, (comp) => {
return generateItemKeyRecord(items)
}, [dataOptionType, jsonItems, items, generateItemKeyRecord]);
- const onMenuItemClick = useCallback(({key}: {key: string}) => {
+ const onMenuItemClick = useCallback(({ key }: { key: string }) => {
+ onEvent('click')
const itemComp = itemKeyRecord[key]
const url = [
@@ -547,32 +564,45 @@ NavTmpLayout = withViewFn(NavTmpLayout, (comp) => {
backgroundStyle = `center / cover url('${backgroundImage}') no-repeat, ${backgroundStyle}`;
}
+ let navMenu = (
+ <StyledMenu
+ items={menuItems}
+ mode={navMode}
+ style={{
+ height: `calc(100% - ${getVerticalMargin(navStyle.margin.split(' '))})`,
+ width: `calc(100% - ${getHorizontalMargin(navStyle.margin.split(' '))})`,
+ borderRight: navMode !== 'horizontal' ? `1px solid ${navStyle.border}` : 'none',
+ borderBottom: navMode === 'horizontal' ? `1px solid ${navStyle.border}` : 'none',
+ borderRadius: navStyle.radius,
+ color: navStyle.text,
+ margin: navStyle.margin,
+ padding: navStyle.padding,
+ background: backgroundStyle,
+ flex: 1,
+ minWidth: 0,
+ }}
+ defaultOpenKeys={defaultOpenKeys}
+ selectedKeys={[selectedKey]}
+ $navItemStyle={{
+ width: navMode === 'horizontal' ? 'auto' : `calc(100% - ${getHorizontalMargin(navItemStyle.margin.split(' '))})`,
+ ...navItemStyle,
+ }}
+ $navItemHoverStyle={navItemHoverStyle}
+ $navItemActiveStyle={navItemActiveStyle}
+ />
+ );
+
let content = (
<Layout>
- <StyledSide theme="light" width={navWidth}>
- <StyledMenu
- items={menuItems}
- mode={navMode}
- style={{
- height: `calc(100% - ${getVerticalMargin(navStyle.margin.split(' '))})`,
- width: `calc(100% - ${getHorizontalMargin(navStyle.margin.split(' '))})`,
- borderRight: `1px solid ${navStyle.border}`,
- borderRadius: navStyle.radius,
- color: navStyle.text,
- margin: navStyle.margin,
- padding: navStyle.padding,
- background: backgroundStyle,
- }}
- defaultOpenKeys={defaultOpenKeys}
- selectedKeys={[selectedKey]}
- $navItemStyle={{
- width: `calc(100% - ${getHorizontalMargin(navItemStyle.margin.split(' '))})`,
- ...navItemStyle,
- }}
- $navItemHoverStyle={navItemHoverStyle}
- $navItemActiveStyle={navItemActiveStyle}
- />
- </StyledSide>
+ {navMode === 'horizontal' ? (
+ <Header style={{ display: 'flex', alignItems: 'center', padding: 0 }}>
+ { navMenu }
+ </Header>
+ ) : (
+ <StyledSide theme="light" width={navWidth} collapsed={navCollapse}>
+ {navMenu}
+ </StyledSide>
+ )}
<MainContent>{pageView}</MainContent>
</Layout>
);
diff --git a/client/packages/lowcoder/src/comps/comps/layout/navLayoutConstants.ts b/client/packages/lowcoder/src/comps/comps/layout/navLayoutConstants.ts
index d102dfdb1..66043303a 100644
--- a/client/packages/lowcoder/src/comps/comps/layout/navLayoutConstants.ts
+++ b/client/packages/lowcoder/src/comps/comps/layout/navLayoutConstants.ts
@@ -3,6 +3,7 @@ import { trans } from "i18n";
export const ModeOptions = [
{ label: trans("navLayout.modeInline"), value: "inline" },
{ label: trans("navLayout.modeVertical"), value: "vertical" },
+ { label: trans("navLayout.modeHorizontal"), value: "horizontal" },
] as const;
export const DataOption = {
diff --git a/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx b/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx
index 42ec653c7..e4ce05d00 100644
--- a/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx
@@ -4,7 +4,7 @@ import { BackgroundColorContext } from "comps/utils/backgroundColorContext";
import _ from "lodash";
import { ConstructorToView, deferAction } from "lowcoder-core";
import { HintPlaceHolder, ScrollBar, pageItemRender } from "lowcoder-design";
-import { RefObject, useContext, createContext, useMemo, useRef } from "react";
+import { RefObject, useContext, createContext, useMemo, useRef, useEffect } from "react";
import ReactResizeDetector from "react-resize-detector";
import styled from "styled-components";
import { checkIsMobile } from "util/commonUtils";
@@ -18,7 +18,9 @@ import {
import { ContextContainerComp } from "./contextContainerComp";
import { ListViewImplComp } from "./listViewComp";
import { getCurrentItemParams, getData } from "./listViewUtils";
-import { AnimationStyleType } from "@lowcoder-ee/index.sdk";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
+import { childrenToProps } from "@lowcoder-ee/comps/generators/multi";
+import { AnimationStyleType } from "@lowcoder-ee/comps/controls/styleControlConstants";
const ListViewWrapper = styled.div<{ $style: any; $paddingWidth: string,$animationStyle:AnimationStyleType }>`
height: 100%;
@@ -274,6 +276,11 @@ export function ListView(props: Props) {
const maxWidth = editorState.getAppSettings().maxWidth;
const isMobile = checkIsMobile(maxWidth);
const paddingWidth = isMobile ? "4px" : "16px";
+
+ const childrenProps = childrenToProps(comp.children);
+
+ useMergeCompStyles(childrenProps, comp.dispatch);
+
// log.debug("renders: ", renders);
return (
<BackgroundColorContext.Provider value={style.background}>
diff --git a/client/packages/lowcoder/src/comps/comps/listViewComp/listViewComp.tsx b/client/packages/lowcoder/src/comps/comps/listViewComp/listViewComp.tsx
index 055e1a113..b018bcbdd 100644
--- a/client/packages/lowcoder/src/comps/comps/listViewComp/listViewComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/listViewComp/listViewComp.tsx
@@ -52,8 +52,8 @@ const childrenMap = {
scrollbars: withDefault(BoolControl, false),
showBorder: BoolControl,
pagination: withDefault(PaginationControl, { pageSize: "6" }),
- style: styleControl(ListViewStyle),
- animationStyle: styleControl(AnimationStyle),
+ style: styleControl(ListViewStyle, 'style'),
+ animationStyle: styleControl(AnimationStyle, 'animationStyle'),
horizontal: withDefault(BoolControl, false),
minHorizontalWidth: withDefault(RadiusControl, '100px'),
};
diff --git a/client/packages/lowcoder/src/comps/comps/mediaComp/audioComp.tsx b/client/packages/lowcoder/src/comps/comps/mediaComp/audioComp.tsx
index 9ed308493..eb725ff44 100644
--- a/client/packages/lowcoder/src/comps/comps/mediaComp/audioComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/mediaComp/audioComp.tsx
@@ -13,8 +13,9 @@ import { withDefault } from "../../generators/simpleGenerators";
import { trans } from "i18n";
import { hiddenPropertyView } from "comps/utils/propertyUtils";
import { mediaCommonChildren, mediaMethods } from "./mediaUtils";
-import { useContext } from "react";
+import { useContext, useEffect } from "react";
import { EditorContext } from "comps/editorState";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
const Container = styled.div<{ $style: any; $animationStyle: AnimationStyleType }>`
${props => props.$style};
@@ -66,15 +67,17 @@ const ContainerAudio = (props: RecordConstructorToView<typeof childrenMap>) => {
const childrenMap = {
src: withDefault(StringStateControl, trans("audio.defaultSrcUrl")),
onEvent: eventHandlerControl(EventOptions),
- style: styleControl(AudioStyle),
- animationStyle: styleControl(AnimationStyle),
+ style: styleControl(AudioStyle , 'style'),
+ animationStyle: styleControl(AnimationStyle , 'animationStyle'),
autoPlay: BoolControl,
loop: BoolControl,
...mediaCommonChildren,
};
let AudioBasicComp = (function () {
- return new UICompBuilder(childrenMap, (props) => {
+ return new UICompBuilder(childrenMap, (props, dispatch) => {
+ useMergeCompStyles(props as Record<string, any>, dispatch);
+
return <ContainerAudio {...props} />;
})
.setPropertyViewFn((children) => {
diff --git a/client/packages/lowcoder/src/comps/comps/mediaComp/colorPickerComp.tsx b/client/packages/lowcoder/src/comps/comps/mediaComp/colorPickerComp.tsx
index cbe6cf749..80b1218d1 100644
--- a/client/packages/lowcoder/src/comps/comps/mediaComp/colorPickerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/mediaComp/colorPickerComp.tsx
@@ -16,6 +16,7 @@ import { changeEvent, eventHandlerControl } from "comps/controls/eventHandlerCon
import { jsonObjectExposingStateControl, stringExposingStateControl } from "comps/controls/codeStateControl";
import { dropdownControl } from "comps/controls/dropdownControl";
import { ArrayOrJSONObjectControl } from "comps/controls/codeControl";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
export function getStyle(style: ColorPickerStyleType) {
return css`
@@ -60,7 +61,7 @@ export const colorPickerEvent = eventHandlerControl([
const childrenMap = {
...textInputChildren,
value: stringExposingStateControl('value', '#3377ff'),
- style: styleControl(ColorPickerStyle),
+ style: styleControl(ColorPickerStyle , 'style'),
color: jsonObjectExposingStateControl('color', {}),
trigger: dropdownControl(colorPickerTriggerOption, 'click'),
disabledAlpha: BoolControl,
@@ -69,7 +70,9 @@ const childrenMap = {
presets: withDefault(ArrayOrJSONObjectControl, JSON.stringify(presets, null, 2)),
};
-export const ColorPickerComp = new UICompBuilder(childrenMap, (props) => {
+export const ColorPickerComp = new UICompBuilder(childrenMap, (props, dispatch) => {
+ useMergeCompStyles(props as Record<string, any>, dispatch);
+
return props.label({
children: (
<ColorPickerWrapper
diff --git a/client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx b/client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx
index 7130c84e0..2091bf20f 100644
--- a/client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx
@@ -4,7 +4,7 @@ import { StringStateControl, numberExposingStateControl } from "../../controls/c
import { UICompBuilder } from "../../generators";
import { NameConfig, NameConfigHidden, withExposingConfigs } from "../../generators/withExposing";
import { RecordConstructorToView } from "lowcoder-core";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
import { styleControl } from "comps/controls/styleControl";
import {
AnimationStyle,
@@ -24,6 +24,7 @@ import { mediaCommonChildren, mediaMethods } from "./mediaUtils";
import { useContext } from "react";
import { EditorContext } from "comps/editorState";
import styled, { css } from "styled-components";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
const EventOptions = [
{ label: trans("video.play"), value: "play", description: trans("video.playDesc") },
@@ -115,8 +116,8 @@ const childrenMap = {
src: withDefault(StringStateControl, trans('video.defaultSrcUrl')),
poster: withDefault(StringStateControl, trans('video.defaultPosterUrl')),
onEvent: eventHandlerControl(EventOptions),
- style: styleControl(VideoStyle),
- animationStyle: styleControl(AnimationStyle),
+ style: styleControl(VideoStyle , 'style'),
+ animationStyle: styleControl(AnimationStyle , 'animationStyle'),
autoPlay: BoolControl,
loop: BoolControl,
controls: BoolControl,
@@ -128,7 +129,9 @@ const childrenMap = {
};
let VideoBasicComp = (function () {
- return new UICompBuilder(childrenMap, (props) => {
+ return new UICompBuilder(childrenMap, (props, dispatch) => {
+ useMergeCompStyles(props as Record<string, any>, dispatch);
+
return <ContainerVideo {...props} />;
})
.setPropertyViewFn((children) => {
@@ -176,9 +179,9 @@ let VideoBasicComp = (function () {
<Section name={sectionNames.style}>
{children.style.getPropertyView()}
</Section>
- <Section name={sectionNames.animationStyle} hasTooltip={true}>
+ {/* <Section name={sectionNames.animationStyle} hasTooltip={true}>
{children.animationStyle.getPropertyView()}
- </Section>
+ </Section> */}
</>
)}
</>
diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx
index 6b5df1cb0..28e318618 100644
--- a/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx
+++ b/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx
@@ -39,7 +39,6 @@ import { useEffect, useRef, useState } from "react";
import ReactResizeDetector from "react-resize-detector";
import { useContext } from "react";
-import { BoolControl } from "@lowcoder-ee/index.sdk";
const Container = styled.div<{ $style: any }>`
height: 100%;
diff --git a/client/packages/lowcoder/src/comps/comps/moduleContainerComp/moduleContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/moduleContainerComp/moduleContainerComp.tsx
index f89cf5cf3..e3dfac6ad 100644
--- a/client/packages/lowcoder/src/comps/comps/moduleContainerComp/moduleContainerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/moduleContainerComp/moduleContainerComp.tsx
@@ -1,4 +1,3 @@
-import { defaultTheme } from "comps/controls/styleControlConstants";
import { ThemeContext } from "comps/utils/themeContext";
import { BorderColor } from "constants/style";
import { HintPlaceHolder } from "lowcoder-design";
@@ -13,6 +12,7 @@ import {
gridItemCompToGridItems,
InnerGrid,
} from "../containerComp/containerView";
+import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
const StyledInnerGrid = styled(InnerGrid)<ContainerBaseProps & { $bordered: boolean }>`
border: ${(props) => (!props.$bordered ? "0px" : `1px solid ${BorderColor}`)};
diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx
index 44a97bd02..ee736cfd2 100644
--- a/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx
@@ -54,6 +54,7 @@ import { useContext } from "react";
import { EditorContext } from "comps/editorState";
import { migrateOldData } from "comps/generators/simpleGenerators";
import { fixOldInputCompData } from "../textInputComp/textInputConstants";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
const getStyle = (style: InputLikeStyleType) => {
return css`
@@ -259,13 +260,12 @@ const childrenMap = {
allowNull: BoolControl,
onEvent: InputEventHandlerControl,
viewRef: RefControl<HTMLInputElement>,
- style: withDefault(styleControl(InputFieldStyle),{background:'transparent'}) ,
- labelStyle:styleControl(LabelStyle),
+ style: styleControl(InputFieldStyle , 'style') ,
+ labelStyle: styleControl(LabelStyle , 'labelStyle'),
prefixText : stringExposingStateControl("defaultValue"),
- animationStyle: styleControl(AnimationStyle),
-
+ animationStyle: styleControl(AnimationStyle , 'animationStyle'),
prefixIcon: IconControl,
- inputFieldStyle: withDefault(styleControl(InputLikeStyle), {borderWidth: '1px'}) ,
+ inputFieldStyle: styleControl(InputLikeStyle , 'inputFieldStyle'),
// validation
required: BoolControl,
min: UndefinedNumberControl,
@@ -381,7 +381,9 @@ const CustomInputNumber = (props: RecordConstructorToView<typeof childrenMap>) =
};
let NumberInputTmpComp = (function () {
- return new UICompBuilder(childrenMap, (props) => {
+ return new UICompBuilder(childrenMap, (props, dispatch) => {
+ useMergeCompStyles(props as Record<string, any>, dispatch);
+
return props.label({
required: props.required,
children: <CustomInputNumber {...props} />,
diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx
index a73b39a47..142290acd 100644
--- a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx
@@ -7,6 +7,7 @@ import { formDataChildren, FormDataPropertyView } from "../formComp/formDataCons
import { SliderChildren, SliderPropertyView, SliderStyled, SliderWrapper } from "./sliderCompConstants";
import { hasIcon } from "comps/utils";
import { BoolControl } from "comps/controls/boolControl";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
const SliderBasicComp = (function () {
/**
@@ -18,7 +19,9 @@ const SliderBasicComp = (function () {
vertical: BoolControl,
...formDataChildren,
};
- return new UICompBuilder(childrenMap, (props) => {
+ return new UICompBuilder(childrenMap, (props, dispatch) => {
+ useMergeCompStyles(props as Record<string, any>, dispatch);
+
return props.label({
style: props.style,
labelStyle: props.labelStyle,
diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx
index 41bc79f6b..90e827919 100644
--- a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx
@@ -71,12 +71,15 @@ export const SliderChildren = {
label: LabelControl,
disabled: BoolCodeControl,
onEvent: ChangeEventHandlerControl,
- style: withDefault(styleControl(InputFieldStyle),{background:'transparent'}) ,
- labelStyle:styleControl(LabelStyle.filter((style)=> ['accent','validate'].includes(style.name) === false)),
+ style: styleControl(InputFieldStyle, 'style'),
+ labelStyle: styleControl(
+ LabelStyle.filter((style)=> ['accent','validate'].includes(style.name) === false),
+ 'labelStyle',
+ ),
prefixIcon: IconControl,
suffixIcon: IconControl,
- inputFieldStyle:styleControl(SliderStyle),
- animationStyle:styleControl(AnimationStyle)
+ inputFieldStyle: styleControl(SliderStyle, 'inputFieldStyle'),
+ animationStyle: styleControl(AnimationStyle, 'animationStyle')
};
export const SliderPropertyView = (
diff --git a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx
index 3d3e2aa72..58299f1f1 100644
--- a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx
+++ b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx
@@ -26,6 +26,7 @@ const getStyle = (style: ContainerStyleType) => {
return css`
border-color: ${style.border};
border-width: ${style.borderWidth};
+ border-style: ${style.borderStyle};
border-radius: ${style.radius};
overflow: hidden;
padding: ${style.padding};
diff --git a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx
index dbe0e6111..271d8c1f3 100644
--- a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx
@@ -10,7 +10,7 @@ import {
ContainerFooterStyle,
} from "comps/controls/styleControlConstants";
import { MultiCompBuilder, sameTypeMap, withDefault } from "comps/generators";
-import { migrateOldData } from "comps/generators/simpleGenerators";
+import { migrateOldData, valueComp } from "comps/generators/simpleGenerators";
import { NameGenerator } from "comps/utils";
import { fromRecord, Node } from "lowcoder-core";
import { nodeIsRecord } from "lowcoder-core";
@@ -28,6 +28,7 @@ import { ContainerBodyChildComp } from "./containerBodyChildComp";
import { trans } from "i18n";
import { ControlNode } from "lowcoder-design";
import { StringControl } from "comps/controls/codeControl";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
const childrenMap = {
header: SimpleContainerComp,
@@ -51,16 +52,19 @@ const childrenMap = {
autoHeight: AutoHeightControl,
siderScrollbars: withDefault(BoolControl, false),
contentScrollbars: withDefault(BoolControl, false),
- style: withDefault(styleControl(ContainerStyle),{borderWidth:'1px'}),
- headerStyle: styleControl(ContainerHeaderStyle),
- siderStyle: styleControl(ContainerSiderStyle),
- bodyStyle: styleControl(ContainerBodyStyle),
- footerStyle: styleControl(ContainerFooterStyle),
+ style: styleControl(ContainerStyle , 'style'),
+ headerStyle: styleControl(ContainerHeaderStyle , 'headerStyle'),
+ siderStyle: styleControl(ContainerSiderStyle , 'siderStyle'),
+ bodyStyle: styleControl(ContainerBodyStyle , 'bodyStyle'),
+ footerStyle: styleControl(ContainerFooterStyle , 'footerStyle'),
+ appliedThemeId: valueComp<string>(''),
};
// Compatible with old style data 2022-8-15
const layoutBaseComp = migrateOldData(
new MultiCompBuilder(childrenMap, (props, dispatch) => {
+ useMergeCompStyles(props, dispatch);
+
return { ...props, dispatch };
}).build(),
fixOldStyleData
diff --git a/client/packages/lowcoder/src/comps/comps/preLoadComp.tsx b/client/packages/lowcoder/src/comps/comps/preLoadComp.tsx
index e8f4902c4..eef0ba0a8 100644
--- a/client/packages/lowcoder/src/comps/comps/preLoadComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/preLoadComp.tsx
@@ -186,10 +186,31 @@ class CSSComp extends CodeTextControl implements RunAndClearable<string> {
}
}
+class GlobalCSSComp extends CodeTextControl implements RunAndClearable<string> {
+ id = "";
+ externalCSS: string = "";
+
+ async applyAllCSS() {
+ const css = this.getView();
+ evalStyle(this.id, [this.externalCSS, css], true);
+ }
+
+ async run(id: string, externalCSS: string = "") {
+ this.id = id;
+ this.externalCSS = externalCSS;
+ return this.applyAllCSS();
+ }
+
+ async clear() {
+ clearStyleEval(this.id);
+ }
+}
+
const childrenMap = {
libs: LibsComp,
script: ScriptComp,
css: CSSComp,
+ globalCSS: GlobalCSSComp,
};
type ChildrenInstance = RecordConstructorToComp<typeof childrenMap>;
@@ -215,7 +236,7 @@ function JavaScriptTabPane(props: { comp: ConstructorToComp<typeof ScriptComp> }
);
}
-function CSSTabPane(props: { comp: CSSComp }) {
+function CSSTabPane(props: { comp: CSSComp, isGlobal?: boolean }) {
useEffect(() => {
props.comp.applyAllCSS();
}, [props.comp]);
@@ -238,6 +259,7 @@ function CSSTabPane(props: { comp: CSSComp }) {
enum TabKey {
JavaScript = "js",
CSS = "css",
+ GLOBAL_CSS = "global_css",
}
function PreloadConfigModal(props: ChildrenInstance) {
@@ -255,6 +277,11 @@ function PreloadConfigModal(props: ChildrenInstance) {
label: 'CSS',
children: <CSSTabPane comp={props.css} />
},
+ {
+ key: TabKey.GLOBAL_CSS,
+ label: 'Global CSS',
+ children: <CSSTabPane comp={props.globalCSS} isGlobal />
+ },
]
return (
<CustomModal
@@ -309,8 +336,9 @@ export class PreloadComp extends PreloadCompBase {
async run(id: string) {
const { orgCommonSettings = {} } = getGlobalSettings();
- const { preloadCSS, preloadJavaScript, preloadLibs, runJavaScriptInHost } = orgCommonSettings;
+ const { preloadCSS,preloadGlobalCSS, preloadJavaScript, preloadLibs, runJavaScriptInHost } = orgCommonSettings;
await this.children.css.run(id, preloadCSS || "");
+ await this.children.globalCSS.run('body', preloadGlobalCSS || "");
await this.children.libs.run(id, preloadLibs || [], !!runJavaScriptInHost);
await this.children.script.run(id, preloadJavaScript || "", !!runJavaScriptInHost);
}
diff --git a/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx b/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx
index a001c7bd2..207feb6c5 100644
--- a/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/progressCircleComp.tsx
@@ -9,8 +9,9 @@ import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators
import { hiddenPropertyView } from "comps/utils/propertyUtils";
import { trans } from "i18n";
-import { useContext } from "react";
+import { useContext, useEffect } from "react";
import { EditorContext } from "comps/editorState";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
// TODO: after Update of ANTd, introduce Size attribute to ProgressCircle
@@ -69,10 +70,12 @@ let ProgressCircleTmpComp = (function () {
const childrenMap = {
value: numberExposingStateControl("value", 60),
// borderRadius property hidden as it's not valid for progress circle
- style: styleControl(CircleProgressStyle),
- animationStyle: styleControl(AnimationStyle),
+ style: styleControl(CircleProgressStyle, 'style'),
+ animationStyle: styleControl(AnimationStyle, 'animationStyle'),
};
- return new UICompBuilder(childrenMap, (props) => {
+ return new UICompBuilder(childrenMap, (props, dispatch) => {
+ useMergeCompStyles(props as Record<string, any>, dispatch);
+
return (
<StyledProgressCircle
$style={props.style}
diff --git a/client/packages/lowcoder/src/comps/comps/progressComp.tsx b/client/packages/lowcoder/src/comps/comps/progressComp.tsx
index 6e5dc49c9..9703c8f64 100644
--- a/client/packages/lowcoder/src/comps/comps/progressComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/progressComp.tsx
@@ -10,8 +10,9 @@ import styled, { css } from "styled-components";
import { hiddenPropertyView } from "comps/utils/propertyUtils";
import { trans } from "i18n";
-import { useContext } from "react";
+import { useContext, useEffect } from "react";
import { EditorContext } from "comps/editorState";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
const getStyle = (style: ProgressStyleType) => {
return css`
@@ -53,10 +54,12 @@ const ProgressBasicComp = (function () {
const childrenMap = {
value: numberExposingStateControl('value', 60),
showInfo: BoolControl,
- style: styleControl(ProgressStyle),
- animationStyle: styleControl(AnimationStyle),
+ style: styleControl(ProgressStyle, 'style'),
+ animationStyle: styleControl(AnimationStyle, 'animationStyle'),
};
- return new UICompBuilder(childrenMap, (props) => {
+ return new UICompBuilder(childrenMap, (props, dispatch) => {
+ useMergeCompStyles(props as Record<string, any>, dispatch);
+
return (
<ProgressStyled
percent={Math.round(props.value.value)}
diff --git a/client/packages/lowcoder/src/comps/comps/qrCodeComp.tsx b/client/packages/lowcoder/src/comps/comps/qrCodeComp.tsx
index 0c4341c2a..099ab1d6d 100644
--- a/client/packages/lowcoder/src/comps/comps/qrCodeComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/qrCodeComp.tsx
@@ -12,9 +12,10 @@ import { hiddenPropertyView } from "comps/utils/propertyUtils";
import { trans } from "i18n";
import { StringControl } from "comps/controls/codeControl";
-import { useContext } from "react";
+import { useContext, useEffect } from "react";
import { EditorContext } from "comps/editorState";
import { withDefault } from "../generators";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
// TODO: add styling for image (size)
// TODO: add styling for bouding box (individual backround)
@@ -31,8 +32,8 @@ const childrenMap = {
level: dropdownControl(levelOptions, 'L'),
includeMargin: BoolControl.DEFAULT_TRUE,
image: StringControl,
- style: withDefault(styleControl(QRCodeStyle),{background:'transparent'}),
- animationStyle: styleControl(AnimationStyle),
+ style: styleControl(QRCodeStyle , 'style'),
+ animationStyle: styleControl(AnimationStyle , 'animationStyle'),
restrictPaddingOnRotation: withDefault(StringControl, 'qrCode'),
};
@@ -78,7 +79,10 @@ const QRCodeView = (props: RecordConstructorToView<typeof childrenMap>) => {
};
let QRCodeBasicComp = (function () {
- return new UICompBuilder(childrenMap, (props) => <QRCodeView {...props} />)
+ return new UICompBuilder(childrenMap, (props, dispatch) => {
+ useMergeCompStyles(props as Record<string, any>, dispatch);
+
+ return( <QRCodeView {...props} />)})
.setPropertyViewFn((children) => (
<>
<Section name={sectionNames.basic}>
diff --git a/client/packages/lowcoder/src/comps/comps/ratingComp.tsx b/client/packages/lowcoder/src/comps/comps/ratingComp.tsx
index 793cf67c2..75a4e2b84 100644
--- a/client/packages/lowcoder/src/comps/comps/ratingComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/ratingComp.tsx
@@ -17,6 +17,8 @@ import { trans } from "i18n";
import { useContext, useEffect, useRef } from "react";
import { EditorContext } from "comps/editorState";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
+
const EventOptions = [changeEvent] as const;
@@ -43,20 +45,22 @@ const RatingBasicComp = (function () {
allowHalf: BoolControl,
disabled: BoolCodeControl,
onEvent: eventHandlerControl(EventOptions),
- style: withDefault(styleControl(InputFieldStyle),{background:'transparent'}) ,
- animationStyle: styleControl(AnimationStyle),
+ style: styleControl(InputFieldStyle, 'style') ,
+ animationStyle: styleControl(AnimationStyle, 'animationStyle'),
labelStyle: styleControl(
LabelStyle.filter(
(style) => ['accent', 'validate'].includes(style.name) === false
- )
+ ),
+ 'labelStyle',
),
- inputFieldStyle: migrateOldData(styleControl(RatingStyle), fixOldData),
+ inputFieldStyle: migrateOldData(styleControl(RatingStyle, 'inputFieldStyle'), fixOldData),
...formDataChildren,
};
- return new UICompBuilder(childrenMap, (props) => {
+ return new UICompBuilder(childrenMap, (props, dispatch) => {
const defaultValue = { ...props.defaultValue }.value;
const value = { ...props.value }.value;
- const changeRef = useRef(false)
+ const changeRef = useRef(false);
+ useMergeCompStyles(props as Record<string, any>, dispatch);
useEffect(() => {
props.value.onChange(defaultValue);
diff --git a/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx b/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx
index fe3509aba..451f47365 100644
--- a/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx
+++ b/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx
@@ -21,7 +21,7 @@ import { NameGenerator } from "comps/utils";
import { Section, controlItem, sectionNames } from "lowcoder-design";
import { HintPlaceHolder } from "lowcoder-design";
import _ from "lodash";
-import React from "react";
+import React, { useEffect } from "react";
import styled from "styled-components";
import { IContainer } from "../containerBase/iContainer";
import { SimpleContainerComp } from "../containerBase/simpleContainerComp";
@@ -42,6 +42,7 @@ import { EditorContext } from "comps/editorState";
import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
import { DisabledContext } from "comps/generators/uiCompBuilder";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
const RowWrapper = styled(Row)<{
$style: ResponsiveLayoutRowStyleType;
@@ -91,9 +92,9 @@ const childrenMap = {
autoHeight: AutoHeightControl,
rowBreak: withDefault(BoolControl, false),
matchColumnsHeight: withDefault(BoolControl, true),
- style: withDefault(styleControl(ResponsiveLayoutRowStyle), {}),
- columnStyle: withDefault(styleControl(ResponsiveLayoutColStyle), {}),
- animationStyle:styleControl(AnimationStyle),
+ style: styleControl(ResponsiveLayoutRowStyle , 'style'),
+ columnStyle: styleControl(ResponsiveLayoutColStyle , 'columnStyle'),
+ animationStyle:styleControl(AnimationStyle , 'animationStyle'),
columnPerRowLG: withDefault(NumberControl, 4),
columnPerRowMD: withDefault(NumberControl, 2),
columnPerRowSM: withDefault(NumberControl, 1),
@@ -185,6 +186,7 @@ const ResponsiveLayout = (props: ResponsiveLayoutProps) => {
export const ResponsiveLayoutBaseComp = (function () {
return new UICompBuilder(childrenMap, (props, dispatch) => {
+ useMergeCompStyles(props as Record<string, any>, dispatch);
return (
<ResponsiveLayout {...props} dispatch={dispatch} />
);
diff --git a/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx b/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx
index f6e040314..92acbe340 100644
--- a/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx
@@ -26,6 +26,7 @@ import { RichTextEditorStyle, RichTextEditorStyleType } from "comps/controls/sty
import { useContext } from "react";
import { EditorContext } from "comps/editorState";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
const localizeStyle = css`
& .ql-snow {
@@ -172,7 +173,7 @@ const childrenMap = {
placeholder: withDefault(StringControl, trans("richTextEditor.placeholder")),
toolbar: withDefault(StringControl, JSON.stringify(toolbarOptions)),
onEvent: ChangeEventHandlerControl,
- style: styleControl(RichTextEditorStyle),
+ style: styleControl(RichTextEditorStyle , 'style'),
...formDataChildren,
};
@@ -290,7 +291,10 @@ function RichTextEditor(props: IProps) {
);
}
-const RichTextEditorCompBase = new UICompBuilder(childrenMap, (props) => {
+const RichTextEditorCompBase = new UICompBuilder(childrenMap, (props, dispatch) => {
+ useMergeCompStyles(props as Record<string, any>, dispatch);
+
+
const handleChange = (v: string) => {
props.value.onChange(v);
props.onEvent("change");
diff --git a/client/packages/lowcoder/src/comps/comps/rootComp.tsx b/client/packages/lowcoder/src/comps/comps/rootComp.tsx
index b0db715ee..4ed578d3b 100644
--- a/client/packages/lowcoder/src/comps/comps/rootComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/rootComp.tsx
@@ -17,7 +17,7 @@ import { TransformerListComp } from "./transformerListComp";
import UIComp from "./uiComp";
import { ThemeContext } from "comps/utils/themeContext";
import { ModuleLayoutCompName } from "constants/compConstants";
-import { defaultTheme as localDefaultTheme } from "comps/controls/styleControlConstants";
+import { defaultTheme as localDefaultTheme } from "constants/themeConstants";
import { ModuleLoading } from "components/ModuleLoading";
import EditorSkeletonView from "pages/editor/editorSkeletonView";
import { getGlobalSettings } from "comps/utils/globalSettings";
@@ -65,11 +65,16 @@ function RootView(props: RootViewProps) {
const appThemeId = comp.children.settings.getView().themeId;
const { orgCommonSettings } = getGlobalSettings();
const themeList = orgCommonSettings?.themeList || [];
+ const selectedTheme = getCurrentTheme(themeList, appThemeId);
const theme =
previewTheme?.previewTheme ||
- getCurrentTheme(themeList, appThemeId)?.theme ||
+ selectedTheme?.theme ||
localDefaultTheme;
+
+ const themeId = selectedTheme ? selectedTheme.id : (
+ previewTheme ? "" : 'default-theme-id'
+ );
useEffect(() => {
const newEditorState = new EditorState(comp, (changeEditorStateFn) => {
@@ -90,6 +95,7 @@ function RootView(props: RootViewProps) {
const themeContextValue = useMemo(
() => ({
theme,
+ themeId,
}),
[theme]
);
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx
index 095e85f74..366264b44 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx
@@ -7,6 +7,7 @@ import { UICompBuilder, withDefault } from "../../generators";
import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generators/withExposing";
import { CascaderChildren, CascaderPropertyView, defaultDataSource } from "./cascaderContants";
import { refMethods } from "comps/generators/withMethodExposing";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
const CascaderStyle = styled(Cascader)<{ $style: CascaderStyleType,$childrenInputFieldStyle:ChildrenMultiSelectStyleType }>`
width: 100%;
@@ -37,7 +38,9 @@ const DropdownRenderStyle = styled.div<{ $childrenInputFieldStyle: ChildrenMulti
let CascaderBasicComp = (function () {
const childrenMap = CascaderChildren;
- return new UICompBuilder(childrenMap, (props) => {
+ return new UICompBuilder(childrenMap, (props , dispatch) => {
+ useMergeCompStyles(props as Record<string, any>, dispatch);
+
return props.label({
style: props.style,
labelStyle: props.labelStyle,
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx
index d0327419c..af7959081 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx
@@ -34,15 +34,15 @@ export const CascaderChildren = {
onEvent: SelectEventHandlerControl,
allowClear: BoolControl,
options: JSONObjectArrayControl,
- style: styleControl(InputFieldStyle),
- labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)),
+ style: styleControl(InputFieldStyle , 'style'),
+ labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false), 'labelStyle'),
showSearch: BoolControl.DEFAULT_TRUE,
viewRef: RefControl<CascaderRef>,
margin: MarginControl,
padding: PaddingControl,
- inputFieldStyle:styleControl(CascaderStyle),
+ inputFieldStyle:styleControl(CascaderStyle , 'inputFieldStyle'),
childrenInputFieldStyle:styleControl(ChildrenMultiSelectStyle),
- animationStyle:styleControl(AnimationStyle)
+ animationStyle:styleControl(AnimationStyle ,'animationStyle')
};
export const CascaderPropertyView = (
@@ -85,7 +85,7 @@ export const CascaderPropertyView = (
<Section name={sectionNames.inputFieldStyle}>
{children.inputFieldStyle.getPropertyView()}
</Section>
- <Section name={'Children Input Field Style'}>
+ <Section name={sectionNames.childrenInputFieldStyle}>
{children.childrenInputFieldStyle.getPropertyView()}
</Section>
<Section name={sectionNames.animationStyle} hasTooltip={true}>
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx
index 985d4dc30..30137c366 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx
@@ -24,6 +24,7 @@ import { trans } from "i18n";
import { RefControl } from "comps/controls/refControl";
import { migrateOldData } from "comps/generators/simpleGenerators";
import { fixOldInputCompData } from "../textInputComp/textInputConstants";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
export const getStyle = (style: CheckboxStyleType) => {
return css`
@@ -146,16 +147,21 @@ let CheckboxBasicComp = (function () {
disabled: BoolCodeControl,
onEvent: ChangeEventHandlerControl,
options: SelectInputOptionControl,
- style: styleControl(InputFieldStyle),
- labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)),
+ style: styleControl(InputFieldStyle , 'style'),
+ labelStyle: styleControl(
+ LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false),
+ 'labelStyle',
+ ),
layout: dropdownControl(RadioLayoutOptions, "horizontal"),
viewRef: RefControl<HTMLDivElement>,
- inputFieldStyle:styleControl(CheckboxStyle),
- animationStyle:styleControl(AnimationStyle),
+ inputFieldStyle: styleControl(CheckboxStyle , 'inputFieldStyle'),
+ animationStyle: styleControl(AnimationStyle , 'animationStyle'),
...SelectInputValidationChildren,
...formDataChildren,
};
- return new UICompBuilder(childrenMap, (props) => {
+ return new UICompBuilder(childrenMap, (props, dispatch) => {
+ useMergeCompStyles(props as Record<string, any>, dispatch);
+
const [
validateState,
handleChange,
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx
index cba0023b9..b71750320 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/multiSelectComp.tsx
@@ -16,20 +16,24 @@ import { PaddingControl } from "../../controls/paddingControl";
import { MarginControl } from "../../controls/marginControl";
import { migrateOldData, withDefault } from "comps/generators/simpleGenerators";
import { fixOldInputCompData } from "../textInputComp/textInputConstants";
+import { useContext, useEffect } from "react";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
let MultiSelectBasicComp = (function () {
const childrenMap = {
...SelectChildrenMap,
defaultValue: arrayStringExposingStateControl("defaultValue", ["1", "2"]),
value: arrayStringExposingStateControl("value"),
- style: withDefault(styleControl(InputFieldStyle),{background:'transparent'}),
- labelStyle:styleControl(LabelStyle),
- inputFieldStyle:withDefault(styleControl(MultiSelectStyle),{borderWidth:'1px'}),
+ style: styleControl(InputFieldStyle , 'style'),
+ labelStyle:styleControl(LabelStyle , 'labelStyle'),
+ inputFieldStyle:styleControl(MultiSelectStyle , 'inputFieldStyle'),
childrenInputFieldStyle:styleControl(ChildrenMultiSelectStyle),
margin: MarginControl,
padding: PaddingControl,
};
return new UICompBuilder(childrenMap, (props, dispatch) => {
+ useMergeCompStyles(props as Record<string, any>, dispatch);
+
const valueSet = new Set<any>(props.options.map((o) => o.value)); // Filter illegal default values entered by the user
const [
validateState,
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx
index d1a2a2daa..5c24ebe3f 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx
@@ -13,6 +13,7 @@ import { EllipsisTextCss, ValueFromOption } from "lowcoder-design";
import { trans } from "i18n";
import { fixOldInputCompData } from "../textInputComp/textInputConstants";
import { migrateOldData } from "comps/generators/simpleGenerators";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
const getStyle = (style: RadioStyleType, inputFieldStyle?:RadioStyleType ) => {
return css`
@@ -97,7 +98,9 @@ const Radio = styled(AntdRadioGroup)<{
`;
let RadioBasicComp = (function () {
- return new UICompBuilder(RadioChildrenMap, (props) => {
+ return new UICompBuilder(RadioChildrenMap, (props, dispatch) => {
+ useMergeCompStyles(props as Record<string, any>, dispatch);
+
const [
validateState,
handleChange,
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx
index 5e3989f6f..ca740c6db 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx
@@ -22,7 +22,7 @@ import { RefControl } from "comps/controls/refControl";
import { useContext } from "react";
import { EditorContext } from "comps/editorState";
-import { withDefault } from "@lowcoder-ee/index.sdk";
+import { withDefault } from "@lowcoder-ee/comps/generators";
export const RadioLayoutOptions = [
{ label: trans("radio.horizontal"), value: "horizontal" },
@@ -37,12 +37,12 @@ export const RadioChildrenMap = {
disabled: BoolCodeControl,
onEvent: ChangeEventHandlerControl,
options: SelectInputOptionControl,
- style: styleControl(InputFieldStyle),
- labelStyle:styleControl(LabelStyle),
+ style: styleControl(InputFieldStyle , 'style'),
+ labelStyle:styleControl(LabelStyle , 'labelStyle'),
layout: dropdownControl(RadioLayoutOptions, "horizontal"),
viewRef: RefControl<HTMLDivElement>,
- inputFieldStyle:withDefault(styleControl(RadioStyle),{borderWidth: '1px'}),
- animationStyle: styleControl(AnimationStyle),
+ inputFieldStyle:styleControl(RadioStyle ,'inputFieldStyle' ),
+ animationStyle: styleControl(AnimationStyle , 'animationStyle'),
...SelectInputValidationChildren,
...formDataChildren,
};
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx
index c8309f4a5..c1061cc66 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx
@@ -23,10 +23,11 @@ import { trans } from "i18n";
import { hasIcon } from "comps/utils";
import { RefControl } from "comps/controls/refControl";
-import { useContext } from "react";
+import { useContext, useEffect } from "react";
import { EditorContext } from "comps/editorState";
import { migrateOldData, withDefault } from "comps/generators/simpleGenerators";
import { fixOldInputCompData } from "../textInputComp/textInputConstants";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
const getStyle = (style: SegmentStyleType) => {
@@ -77,8 +78,8 @@ const SegmentChildrenMap = {
disabled: BoolCodeControl,
onEvent: ChangeEventHandlerControl,
options: SelectOptionControl,
- style: withDefault(styleControl(SegmentStyle), { borderWidth: '1px' }),
- animationStyle:styleControl(AnimationStyle),
+ style: styleControl(SegmentStyle, 'style'),
+ animationStyle: styleControl(AnimationStyle, 'animationStyle'),
viewRef: RefControl<HTMLDivElement>,
...SelectInputValidationChildren,
@@ -86,7 +87,9 @@ const SegmentChildrenMap = {
};
let SegmentedControlBasicComp = (function () {
- return new UICompBuilder(SegmentChildrenMap, (props) => {
+ return new UICompBuilder(SegmentChildrenMap, (props, dispatch) => {
+ useMergeCompStyles(props as Record<string, any>, dispatch);
+
const [
validateState,
handleChange,
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx
index 5fd71ece6..cbb772fb1 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectComp.tsx
@@ -15,22 +15,25 @@ import {
SelectInputInvalidConfig,
useSelectInputValidate,
} from "./selectInputConstants";
-import { useRef } from "react";
+import { useContext, useEffect, useRef } from "react";
import { RecordConstructorToView } from "lowcoder-core";
import { fixOldInputCompData } from "../textInputComp/textInputConstants";
import { migrateOldData, withDefault } from "comps/generators/simpleGenerators";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
let SelectBasicComp = (function () {
const childrenMap = {
...SelectChildrenMap,
defaultValue: stringExposingStateControl("defaultValue"),
value: stringExposingStateControl("value"),
- style: withDefault(styleControl(InputFieldStyle),{background:'transparent'}),
- labelStyle: styleControl(LabelStyle),
- inputFieldStyle: withDefault(styleControl(SelectStyle),{borderWidth:'1px'}),
- childrenInputFieldStyle: styleControl(ChildrenMultiSelectStyle)
+ style: styleControl(InputFieldStyle , 'style'),
+ labelStyle: styleControl(LabelStyle , 'labelStyle'),
+ inputFieldStyle: styleControl(SelectStyle , 'inputFieldStyle'),
+ childrenInputFieldStyle: styleControl(ChildrenMultiSelectStyle, 'childrenInputFieldStyle')
};
return new UICompBuilder(childrenMap, (props, dispatch) => {
+ useMergeCompStyles(props as Record<string, any>, dispatch);
+
const [
validateState,
handleChange,
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx
index 554ef2ce5..77066895b 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx
@@ -363,7 +363,7 @@ export const SelectPropertyView = (
<Section name={sectionNames.inputFieldStyle}>
{children.inputFieldStyle.getPropertyView()}
</Section>
- <Section name={'Children Input Field Styles'}>
+ <Section name={sectionNames.childrenInputFieldStyle}>
{children.childrenInputFieldStyle.getPropertyView()}
</Section>
</>
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx
index ab3a3e95c..72e0f4f2e 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx
@@ -18,7 +18,7 @@ import { RefControl } from "comps/controls/refControl";
import { dropdownControl } from "comps/controls/dropdownControl";
import { useContext, useState, useEffect } from "react";
import { EditorContext } from "comps/editorState";
-
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
const sizeOptions = [
{
@@ -91,13 +91,15 @@ const StepsChildrenMap = {
disabled: BoolCodeControl,
onEvent: ChangeEventHandlerControl,
options: StepOptionControl,
- style: withDefault( styleControl(StepsStyle), {text:'#D7D9E0'}),
+ style: styleControl(StepsStyle , 'style'),
viewRef: RefControl<HTMLDivElement>,
- animationStyle: styleControl(AnimationStyle)
+ animationStyle: styleControl(AnimationStyle ,'animationStyle' )
};
let StepControlBasicComp = (function () {
- return new UICompBuilder(StepsChildrenMap, (props) => {
+ return new UICompBuilder(StepsChildrenMap, (props , dispatch) => {
+ useMergeCompStyles(props as Record<string, any>, dispatch);
+
const StyledWrapper = styled.div<{ style: StepsStyleType, $animationStyle: AnimationStyleType }>`
${props=>props.$animationStyle}
diff --git a/client/packages/lowcoder/src/comps/comps/signatureComp.tsx b/client/packages/lowcoder/src/comps/comps/signatureComp.tsx
index ed7a87dea..b5b3c5131 100644
--- a/client/packages/lowcoder/src/comps/comps/signatureComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/signatureComp.tsx
@@ -19,7 +19,7 @@ import { hiddenPropertyView } from "comps/utils/propertyUtils";
import { trans } from "i18n";
import { changeValueAction, multiChangeAction } from "lowcoder-core";
import { Section, sectionNames, UndoIcon } from "lowcoder-design";
-import React, { Suspense, useState } from "react";
+import React, { Suspense, useEffect, useState } from "react";
import ReactResizeDetector from "react-resize-detector";
import type SignatureCanvasType from "react-signature-canvas";
import styled from "styled-components";
@@ -29,6 +29,7 @@ import { formDataChildren, FormDataPropertyView } from "./formComp/formDataConst
import { useContext } from "react";
import { EditorContext } from "comps/editorState";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
const Wrapper = styled.div<{ $style: SignatureStyleType; $isEmpty: boolean }>`
height: 100%;
@@ -99,12 +100,12 @@ const childrenMap = {
tips: withDefault(StringControl, trans('signature.signHere')),
onEvent: ChangeEventHandlerControl,
label: withDefault(LabelControl, {position: 'column', text: ''}),
- style: styleControl(SignatureContainerStyle),
- labelStyle: styleControl(LabelStyle),
+ style: styleControl(SignatureContainerStyle , 'style'),
+ labelStyle: styleControl(LabelStyle , 'labelStyle'),
showUndo: withDefault(BoolControl, true),
showClear: withDefault(BoolControl, true),
value: stateComp(''),
- inputFieldStyle: styleControl(SignatureStyle),
+ inputFieldStyle: styleControl(SignatureStyle , 'inputFieldStyle'),
...formDataChildren,
};
@@ -112,6 +113,8 @@ const SignatureCanvas = React.lazy(() => import("react-signature-canvas"));
let SignatureTmpComp = (function () {
return new UICompBuilder(childrenMap, (props, dispatch) => {
+ useMergeCompStyles(props as Record<string, any>, dispatch);
+
let canvas: SignatureCanvasType | null = null;
const [isBegin, setIsBegin] = useState(false);
const [canvasSize, setCanvasSize] = useState([0, 0]);
diff --git a/client/packages/lowcoder/src/comps/comps/switchComp.tsx b/client/packages/lowcoder/src/comps/comps/switchComp.tsx
index 687cde5c0..120d4ca25 100644
--- a/client/packages/lowcoder/src/comps/comps/switchComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/switchComp.tsx
@@ -17,8 +17,9 @@ import { RefControl } from "comps/controls/refControl";
import { refMethods } from "comps/generators/withMethodExposing";
import { blurMethod, clickMethod, focusWithOptions } from "comps/utils/methodUtils";
-import { useContext } from "react";
+import { useContext, useEffect } from "react";
import { EditorContext } from "comps/editorState";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
const EventOptions = [
changeEvent,
@@ -89,18 +90,21 @@ let SwitchTmpComp = (function () {
label: LabelControl,
onEvent: eventHandlerControl(EventOptions),
disabled: BoolCodeControl,
- style: styleControl(InputFieldStyle),
- animationStyle: styleControl(AnimationStyle),
+ style: styleControl(InputFieldStyle , 'style'),
+ animationStyle: styleControl(AnimationStyle , 'animationStyle'),
labelStyle: styleControl(
LabelStyle.filter(
(style) => ['accent', 'validate'].includes(style.name) === false
- )
+ ),
+ 'labelStyle'
),
viewRef: RefControl<HTMLElement>,
- inputFieldStyle:migrateOldData(styleControl(SwitchStyle), fixOldData),
+ inputFieldStyle: migrateOldData(styleControl(SwitchStyle, 'inputFieldStyle'), fixOldData),
...formDataChildren,
};
- return new UICompBuilder(childrenMap, (props) => {
+ return new UICompBuilder(childrenMap, (props, dispatch) => {
+ useMergeCompStyles(props as Record<string, any>, dispatch);
+
return props.label({
style: props.style,
labelStyle: props.labelStyle,
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnAvatarsComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnAvatarsComp.tsx
index 82f261a14..59ff4668a 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnAvatarsComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnAvatarsComp.tsx
@@ -10,13 +10,14 @@ import { AlignCenter, AlignLeft, AlignRight } from "lowcoder-design";
import { NumberControl } from "comps/controls/codeControl";
import { Avatar, Tooltip } from "antd";
import { clickEvent, eventHandlerControl, refreshEvent } from "comps/controls/eventHandlerControl";
-import { ReactElement } from "react";
+import { ReactElement, useContext, useEffect } from "react";
import { IconControl } from "comps/controls/iconControl";
import { ColorControl } from "comps/controls/colorControl";
import { optionsControl } from "comps/controls/optionsControl";
import { BoolControl } from "comps/controls/boolControl";
import { dropdownControl } from "comps/controls/dropdownControl";
import { JSONObject } from "util/jsonTypes";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
const MenuLinkWrapper = styled.div`
> a {
@@ -88,7 +89,7 @@ export const alignOptions = [
export const ColumnAvatarsComp = (function () {
const childrenMap = {
- style: styleControl(avatarGroupStyle),
+ style: styleControl(avatarGroupStyle , 'style'),
maxCount: withDefault(NumberControl, 3),
avatarSize: withDefault(NumberControl, 40),
alignment: dropdownControl(alignOptions, "center"),
@@ -107,7 +108,10 @@ export const ColumnAvatarsComp = (function () {
return new ColumnTypeCompBuilder(
childrenMap,
- (props) => {
+ (props , dispatch) => {
+
+ useMergeCompStyles(props, dispatch);
+
return (
<Container
$style={props.style}
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnStatusComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnStatusComp.tsx
index 04678f33b..5579a4cc6 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnStatusComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnStatusComp.tsx
@@ -47,7 +47,9 @@ type StatusEditPropsType = {
const StatusEdit = (props: StatusEditPropsType) => {
const defaultStatus = useContext(StatusContext);
const [status, setStatus] = useState(defaultStatus);
+ const [allOptions, setAllOptions] = useState(BadgeStatusOptions);
const [open, setOpen] = useState(true);
+
return (
<Wrapper>
<CustomSelect
@@ -97,12 +99,12 @@ const StatusEdit = (props: StatusEditPropsType) => {
}}
onClick={() => setOpen(!open)}
>
- {status.map((value, index) => (
- <CustomSelect.Option value={value.text} key={index}>
- {value.status === "none" ? (
- value.text
+ {allOptions.map((value, index) => (
+ <CustomSelect.Option value={value} key={index}>
+ {value === "none" ? (
+ value
) : (
- <Badge status={value.status} text={value.text} />
+ <Badge status={value} text={value} />
)}
</CustomSelect.Option>
))}
@@ -117,7 +119,7 @@ export const BadgeStatusComp = (function () {
(props, dispatch) => {
const text = props.changeValue?.value ?? getBaseValue(props, dispatch).value;
const status = props.changeValue?.status ?? getBaseValue(props, dispatch).status;
- return status === "none" ? text : <Badge status={status} text={text} />;
+ return status === "none" ? text : <Badge status={status} text={text}/>;
},
(nodeValue) => [nodeValue.status.value, nodeValue.text.value].filter((t) => t).join(" "),
getBaseValue
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnTagsComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnTagsComp.tsx
index e8c0fa641..97278acf8 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnTagsComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnTagsComp.tsx
@@ -96,6 +96,7 @@ export const Wrapper = styled.div`
width: 100%;
height: 100%;
}
+
.ant-select {
height: 100%;
.ant-select-selector {
@@ -145,6 +146,9 @@ export const Wrapper = styled.div`
}
}
}
+ .ant-tag {
+ margin-left: 20px;
+ }
.ant-tag svg {
margin-right: 4px;
}
@@ -169,6 +173,7 @@ export const DropdownStyled = styled.div`
`;
export const TagStyled = styled(Tag)`
+ margin-right: 8px;
svg {
margin-right: 4px;
}
@@ -259,9 +264,11 @@ export const ColumnTagsComp = (function () {
// The actual eval value is of type number or boolean
const tagText = String(tag);
return (
- <TagStyled color={getTagColor(tagText, tagOptions)} icon={getTagIcon(tagText, tagOptions)} key={index} >
- {tagText}
- </TagStyled>
+ <div>
+ <TagStyled color={getTagColor(tagText, tagOptions)} icon={getTagIcon(tagText, tagOptions)} key={index} >
+ {tagText}
+ </TagStyled>
+ </div>
);
});
return view;
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/mockTableComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/mockTableComp.tsx
index 54c2fd6ca..2a4f80897 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/mockTableComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/mockTableComp.tsx
@@ -52,7 +52,7 @@ const tableInitValue = {
const tableData = {
...tableInitValue,
data: JSON.stringify(i18nObjs.table.defaultData, null, " "),
- columns: i18nObjs.table.columns.map((t) =>
+ columns: i18nObjs.table.columns.map((t: any) =>
newPrimaryColumn(t.key, calcColumnWidth(t.key, i18nObjs.table.defaultData), t.title, t.isTag)
),
};
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
index c442413d0..7911c889b 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
@@ -13,7 +13,6 @@ import {
supportChildrenTree,
} from "comps/comps/tableComp/tableUtils";
import {
- defaultTheme,
handleToHoverRow,
handleToSelectedRow,
TableColumnLinkStyleType,
@@ -41,6 +40,9 @@ import { EmptyContent } from "pages/common/styledComponent";
import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
import { ReactRef, ResizeHandleAxis } from "layout/gridLayoutPropTypes";
import { CellColorViewType } from "./column/tableColumnComp";
+import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
+import { childrenToProps } from "@lowcoder-ee/comps/generators/multi";
function genLinerGradient(color: string) {
@@ -345,7 +347,6 @@ const TableTd = styled.td<{
background: ${(props) => props.$background} !important;
border-color: ${(props) => props.$style.border} !important;
border-radius: ${(props) => props.$style.radius};
-
padding: 0 !important;
> div {
@@ -387,8 +388,8 @@ const TableTd = styled.td<{
`};
`};
- > div > .ant-badge > .ant-badge-status-text,
- > div > div > .markdown-body {
+ > .ant-badge > .ant-badge-status-text,
+ > div > .markdown-body {
color: ${(props) => props.$style.text};
}
@@ -775,6 +776,10 @@ export function TableCompView(props: {
};
}, [pagination, data]);
+ const childrenProps = childrenToProps(comp.children);
+
+ useMergeCompStyles(childrenProps, comp.dispatch)
+
const handleChangeEvent = useCallback(
(eventName: TableEventOptionValues) => {
if (eventName === "saveChanges" && !compChildren.onEvent.isBind(eventName)) {
@@ -820,7 +825,6 @@ export function TableCompView(props: {
return (
<BackgroundColorContext.Provider value={style.background} >
-
<BackgroundWrapper ref={ref} $style={style} $tableAutoHeight={tableAutoHeight}>
{toolbar.position === "above" && toolbarView}
<TableWrapper
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableToolbarComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableToolbarComp.tsx
index ee68b9b1b..742734052 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tableToolbarComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableToolbarComp.tsx
@@ -7,7 +7,7 @@ import { TableOnEventView } from "comps/comps/tableComp/tableTypes";
import { BoolControl } from "comps/controls/boolControl";
import { StringControl } from "comps/controls/codeControl";
import { dropdownControl } from "comps/controls/dropdownControl";
-import { defaultTheme, TableToolbarStyleType } from "comps/controls/styleControlConstants";
+import { TableToolbarStyleType } from "comps/controls/styleControlConstants";
import { stateComp } from "comps/generators";
import { genRandomKey } from "comps/utils/idGenerator";
import { ThemeContext } from "comps/utils/themeContext";
@@ -38,6 +38,7 @@ import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
import styled, { css } from "styled-components";
import { JSONValue } from "util/jsonTypes";
import { ControlNodeCompBuilder } from "comps/generators/controlCompBuilder";
+import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
const SaveChangeButtons = styled.div`
display: flex;
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx
index 78347b271..bc59934db 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx
@@ -205,12 +205,12 @@ const tableChildrenMap = {
pagination: PaginationControl,
sort: valueComp<Array<SortValue>>([]),
toolbar: TableToolbarComp,
- style: withDefault(styleControl(TableStyle), {borderWidth: '1px'}),
- rowStyle: withDefault(styleControl(TableRowStyle),{ borderWidth: '1px'}),
- toolbarStyle: styleControl(TableToolbarStyle),
- headerStyle:withDefault(styleControl(TableHeaderStyle), {borderWidth: '1px'}),
+ style: styleControl(TableStyle, 'style'),
+ rowStyle: styleControl(TableRowStyle, 'rowStyle'),
+ toolbarStyle: styleControl(TableToolbarStyle, 'toolbarStyle'),
+ headerStyle: styleControl(TableHeaderStyle, 'headerStyle'),
searchText: StringControl,
- columnsStyle: withDefault(styleControl(TableColumnStyle), {radius:'0px'}),
+ columnsStyle: styleControl(TableColumnStyle, 'columnsStyle'),
viewModeResizable: BoolControl,
visibleResizables: BoolControl,
// sample data for regenerating columns
diff --git a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx
index 613032f90..9d77152cb 100644
--- a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx
@@ -15,7 +15,7 @@ import { NameGenerator } from "comps/utils";
import { ScrollBar, Section, sectionNames } from "lowcoder-design";
import { HintPlaceHolder } from "lowcoder-design";
import _ from "lodash";
-import React, { useCallback, useContext } from "react";
+import React, { useCallback, useContext, useEffect } from "react";
import styled, { css } from "styled-components";
import { IContainer } from "../containerBase/iContainer";
import { SimpleContainerComp } from "../containerBase/simpleContainerComp";
@@ -35,6 +35,7 @@ import { checkIsMobile } from "util/commonUtils";
import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
import { BoolControl } from "comps/controls/boolControl";
import { PositionControl } from "comps/controls/dropdownControl";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
const EVENT_OPTIONS = [
{
@@ -57,10 +58,10 @@ const childrenMap = {
onEvent: eventHandlerControl(EVENT_OPTIONS),
disabled: BoolCodeControl,
showHeader: withDefault(BoolControl, true),
- style: withDefault(styleControl(TabContainerStyle),{borderWidth:'1px'}),
- headerStyle: styleControl(ContainerHeaderStyle),
- bodyStyle: styleControl(TabBodyStyle),
- animationStyle: styleControl(AnimationStyle),
+ style: styleControl(TabContainerStyle , 'style'),
+ headerStyle: styleControl(ContainerHeaderStyle , 'headerStyle'),
+ bodyStyle: styleControl(TabBodyStyle , 'bodyStyle'),
+ animationStyle: styleControl(AnimationStyle , 'animationStyle'),
tabsGutter: withDefault(NumberControl, 32),
tabsCentered: withDefault(BoolControl, false),
};
@@ -288,6 +289,8 @@ const TabbedContainer = (props: TabbedContainerProps) => {
export const TabbedContainerBaseComp = (function () {
return new UICompBuilder(childrenMap, (props, dispatch) => {
+ useMergeCompStyles(props as Record<string, any>, dispatch);
+
return (
<DisabledContext.Provider value={props.disabled}>
<TabbedContainer {...props} dispatch={dispatch} />
diff --git a/client/packages/lowcoder/src/comps/comps/textComp.tsx b/client/packages/lowcoder/src/comps/comps/textComp.tsx
index 49838b294..0dd9c11c8 100644
--- a/client/packages/lowcoder/src/comps/comps/textComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textComp.tsx
@@ -6,7 +6,7 @@ import styled, { css } from "styled-components";
import { AlignCenter } from "lowcoder-design";
import { AlignLeft } from "lowcoder-design";
import { AlignRight } from "lowcoder-design";
-import { UICompBuilder } from "../generators";
+import { UICompBuilder, withDefault } from "../generators";
import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators/withExposing";
import { markdownCompCss, TacoMarkDown } from "lowcoder-design";
import { styleControl } from "comps/controls/styleControl";
@@ -18,13 +18,17 @@ import { alignWithJustifyControl } from "comps/controls/alignControl";
import { MarginControl } from "../controls/marginControl";
import { PaddingControl } from "../controls/paddingControl";
-import React, { useContext } from "react";
+import React, { useContext, useEffect } from "react";
import { EditorContext } from "comps/editorState";
+import { clickEvent, eventHandlerControl } from "../controls/eventHandlerControl";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
+
+const EventOptions = [clickEvent] as const;
const getStyle = (style: TextStyleType) => {
return css`
border-radius: ${(style.radius ? style.radius : "4px")};
- border: ${(style.borderWidth ? style.borderWidth : "0px")} solid ${style.border};
+ border: ${(style.borderWidth ? style.borderWidth : "0px")} ${(style.borderStyle ? style.borderStyle : "solid")} ${style.border};
color: ${style.text};
text-transform:${style.textTransform} !important;
text-decoration:${style.textDecoration} !important;
@@ -82,10 +86,18 @@ const TextContainer = styled.div<{
margin: 0;
${props=>props.$animationStyle}
${(props) =>
- props.$type === "text" && "white-space:break-spaces;line-height: 1.9;"};
+ props.$type === "text" && `
+ white-space:break-spaces;
+ line-height: 1.9;
+ font-size: ${props.$styleConfig.textSize};
+ font-weight: ${props.$styleConfig.textWeight};
+ font-style: ${props.$styleConfig.fontStyle};
+ font-family: ${props.$styleConfig.fontFamily};
+ margin: ${props.$styleConfig.margin};
+ padding: ${props.$styleConfig.padding};
+ `};
${(props) => props.$styleConfig && getStyle(props.$styleConfig)}
display: flex;
- font-size: 13px;
${markdownCompCss};
overflow-wrap: anywhere;
.markdown-body {
@@ -112,31 +124,37 @@ const typeOptions = [
value: "text",
},
] as const;
+
const VerticalAlignmentOptions = [
{ label: <AlignTop />, value: "flex-start" },
{ label: <AlignVerticalCenter />, value: "center" },
{ label: <AlignBottom />, value: "flex-end" },
] as const;
-
let TextTmpComp = (function () {
-
const childrenMap = {
text: stringExposingStateControl(
"text",
trans("textShow.text", { name: "{{currentUser.name}}" })
),
+ onEvent: eventHandlerControl(EventOptions),
autoHeight: AutoHeightControl,
type: dropdownControl(typeOptions, "markdown"),
horizontalAlignment: alignWithJustifyControl(),
verticalAlignment: dropdownControl(VerticalAlignmentOptions, "center"),
- style: styleControl(TextStyle),
- animationStyle: styleControl(AnimationStyle),
+ style: styleControl(TextStyle, 'style'),
+ animationStyle: styleControl(AnimationStyle, 'animationStyle'),
margin: MarginControl,
padding: PaddingControl,
};
- return new UICompBuilder(childrenMap, (props) => {
+ return new UICompBuilder(childrenMap, (props, dispatch) => {
const value = props.text.value;
+
+ useMergeCompStyles(
+ props as Record<string, any>,
+ dispatch
+ );
+
return (
<TextContainer
$animationStyle={props.animationStyle}
@@ -148,6 +166,7 @@ let TextTmpComp = (function () {
textAlign: props.horizontalAlignment,
rotate: props.style.rotation
}}
+ onClick={() => props.onEvent("click")}
>
{props.type === "markdown" ? <TacoMarkDown>{value}</TacoMarkDown> : value}
</TextContainer>
@@ -168,6 +187,7 @@ let TextTmpComp = (function () {
{["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
<Section name={sectionNames.interaction}>
{hiddenPropertyView(children)}
+ {children.onEvent.getPropertyView()}
</Section>
)}
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx
index 46092e6d6..eb38451f3 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx
@@ -33,8 +33,9 @@ import { InputRef } from "antd/es/input";
import { RefControl } from "comps/controls/refControl";
import { migrateOldData, withDefault } from "comps/generators/simpleGenerators";
-import React, { useContext } from "react";
+import React, { useContext, useEffect } from "react";
import { EditorContext } from "comps/editorState";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
/**
* Input Comp
@@ -51,16 +52,18 @@ const childrenMap = {
viewRef: RefControl<InputRef>,
showCount: BoolControl,
allowClear: BoolControl,
- style: withDefault(styleControl(InputFieldStyle),{background:'transparent'}) ,
- labelStyle:styleControl(LabelStyle),
+ style: styleControl(InputFieldStyle, 'style'),
+ labelStyle:styleControl(LabelStyle, 'labelStyle'),
prefixIcon: IconControl,
suffixIcon: IconControl,
- inputFieldStyle:withDefault(styleControl(InputLikeStyle),{borderWidth: '1px'}) ,
- animationStyle: styleControl(AnimationStyle),
+ inputFieldStyle: styleControl(InputLikeStyle, 'inputFieldStyle') ,
+ animationStyle: styleControl(AnimationStyle, 'animationStyle'),
};
-let InputBasicComp = new UICompBuilder(childrenMap, (props) => {
+let InputBasicComp = new UICompBuilder(childrenMap, (props, dispatch) => {
const [inputProps, validateState] = useTextInputProps(props);
+ useMergeCompStyles(props as Record<string, any>, dispatch);
+
return props.label({
required: props.required,
children: (
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx
index 18972f975..4796961b9 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx
@@ -57,6 +57,7 @@ import {
import React, { useContext } from "react";
import { EditorContext } from "comps/editorState";
import { migrateOldData } from "comps/generators/simpleGenerators";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
const Wrapper = styled.div<{
$style: InputLikeStyleType;
@@ -96,8 +97,8 @@ let MentionTmpComp = (function () {
viewRef: RefControl<TextAreaRef>,
allowClear: BoolControl,
autoHeight: AutoHeightControl,
- style: styleControl(InputLikeStyle),
- animationStyle: styleControl(AnimationStyle),
+ style: styleControl(InputLikeStyle , 'style'),
+ animationStyle: styleControl(AnimationStyle , 'animationStyle'),
mentionList: jsonControl(checkMentionListData, {
"@": ["Li Lei", "Han Meimei"],
"#": ["123", "456", "789"],
@@ -106,7 +107,9 @@ let MentionTmpComp = (function () {
invalid: booleanExposingStateControl("invalid"),
};
- return new UICompBuilder(childrenMap, (props) => {
+ return new UICompBuilder(childrenMap, (props , dispatch) => {
+ useMergeCompStyles(props as Record<string, any>, dispatch);
+
const { mentionList } = props;
const [validateState, setvalidateState] = useState({});
const [activationFlag, setActivationFlag] = useState(false);
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx
index 127039ab0..238f1e7ec 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/passwordComp.tsx
@@ -39,9 +39,10 @@ import { trans } from "i18n";
import { IconControl } from "comps/controls/iconControl";
import { hasIcon } from "comps/utils";
import { RefControl } from "comps/controls/refControl";
-import React, { useContext } from "react";
+import React, { useContext, useEffect } from "react";
import { EditorContext } from "comps/editorState";
import { migrateOldData } from "comps/generators/simpleGenerators";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
const PasswordStyle = styled(InputPassword)<{
$style: InputLikeStyleType;
@@ -59,13 +60,15 @@ let PasswordTmpComp = (function () {
validationType: dropdownControl(TextInputValidationOptions, "Regex"),
visibilityToggle: BoolControl.DEFAULT_TRUE,
prefixIcon: IconControl,
- style: withDefault(styleControl(InputFieldStyle),{background:'transparent'}) ,
- labelStyle: styleControl(LabelStyle),
- inputFieldStyle: withDefault(styleControl(InputLikeStyle),{borderWidth: '1px'}),
- animationStyle: styleControl(AnimationStyle),
+ style: styleControl(InputFieldStyle ,'style' ) ,
+ labelStyle: styleControl(LabelStyle,'labelStyle'),
+ inputFieldStyle: styleControl(InputLikeStyle , 'inputFieldStyle'),
+ animationStyle: styleControl(AnimationStyle , 'animationStyle'),
};
- return new UICompBuilder(childrenMap, (props) => {
+ return new UICompBuilder(childrenMap, (props, dispatch) => {
const [inputProps, validateState] = useTextInputProps(props);
+ useMergeCompStyles(props as Record<string, any>, dispatch);
+
return props.label({
required: props.required,
children: (
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx
index ba2dd3438..75028b40c 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/textAreaComp.tsx
@@ -34,9 +34,10 @@ import { RefControl } from "comps/controls/refControl";
import { TextAreaRef } from "antd/es/input/TextArea";
import { blurMethod, focusWithOptions } from "comps/utils/methodUtils";
-import React, { useContext } from "react";
+import React, { useContext, useEffect } from "react";
import { EditorContext } from "comps/editorState";
import { migrateOldData } from "comps/generators/simpleGenerators";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
const TextAreaStyled = styled(TextArea)<{
$style: InputLikeStyleType;
@@ -73,13 +74,15 @@ let TextAreaTmpComp = (function () {
viewRef: RefControl<TextAreaRef>,
allowClear: BoolControl,
autoHeight: withDefault(AutoHeightControl, "fixed"),
- style: withDefault(styleControl(InputFieldStyle),{background:'transparent'}) ,
- labelStyle: styleControl(LabelStyle),
- inputFieldStyle: withDefault(styleControl(InputLikeStyle), {borderWidth: '1px'}),
- animationStyle: styleControl(AnimationStyle)
+ style: styleControl(InputFieldStyle, 'style') ,
+ labelStyle: styleControl(LabelStyle ,'labelStyle' ),
+ inputFieldStyle: styleControl(InputLikeStyle , 'inputFieldStyle'),
+ animationStyle: styleControl(AnimationStyle, 'animationStyle')
};
- return new UICompBuilder(childrenMap, (props) => {
+ return new UICompBuilder(childrenMap, (props, dispatch) => {
const [inputProps, validateState] = useTextInputProps(props);
+ useMergeCompStyles(props as Record<string, any>, dispatch);
+
return props.label({
required: props.required,
inputFieldStyle:props.inputFieldStyle,
diff --git a/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx b/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx
index 40e9b0f3f..8f24b2cf8 100644
--- a/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx
@@ -47,6 +47,7 @@ import { timelineDate, timelineNode, TimelineDataTooltip } from "./timelineConst
import { convertTimeLineData } from "./timelineUtils";
import { default as Timeline } from "antd/es/timeline";
import { EditorContext } from "comps/editorState";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
const EventOptions = [
clickEvent,
@@ -64,7 +65,7 @@ const childrenMap = {
reverse: BoolControl,
pending: withDefault(StringControl, trans("timeLine.defaultPending")),
onEvent: eventHandlerControl(EventOptions),
- style: styleControl(TimeLineStyle),
+ style: styleControl(TimeLineStyle, 'style'),
clickedObject: valueComp<timelineNode>({ title: "" }),
clickedIndex: valueComp<number>(0),
};
@@ -89,6 +90,7 @@ const TimelineComp = (
) => {
const { value, dispatch, style, mode, reverse, onEvent } = props;
const [icons, setIcons] = useState<React.ReactNode[]>([]);
+ useMergeCompStyles(props as Record<string, any>, dispatch);
useEffect(() => {
const loadIcons = async () => {
diff --git a/client/packages/lowcoder/src/comps/comps/transferComp.tsx b/client/packages/lowcoder/src/comps/comps/transferComp.tsx
index 1edaff06e..d124e8410 100644
--- a/client/packages/lowcoder/src/comps/comps/transferComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/transferComp.tsx
@@ -13,11 +13,10 @@ import { Transfer } from "antd";
import ReactResizeDetector from "react-resize-detector";
import { changeEvent, eventHandlerControl, searchEvent, selectedChangeEvent } from "../controls/eventHandlerControl";
import styled, { css } from "styled-components";
-import { useEffect, useRef, useState } from "react";
+import { useContext, useEffect, useRef, useState } from "react";
import { valueComp, withDefault } from "../generators";
import type { TransferDirection } from 'antd/es/transfer';
-import { _ } from "core-js";
-
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
const Container = styled.div<{ $style: TransferStyleType }>`
height: 100%;
@@ -57,7 +56,7 @@ const defaultItems = [
const EventOptions = [changeEvent, searchEvent, selectedChangeEvent] as const;
const childrenMap = {
- style: styleControl(TransferStyle),
+ style: styleControl(TransferStyle , 'style'),
onEvent: eventHandlerControl(EventOptions),
sourceTitle: withDefault(StringControl, trans('transfer.sourceTitle')),
targetTitle: withDefault(StringControl, trans('transfer.targetTitle')),
@@ -140,7 +139,11 @@ const TransferView = (props: RecordConstructorToView<typeof childrenMap> & {
};
let TransferBasicComp = (function () {
- return new UICompBuilder(childrenMap, (props, dispatch) => <TransferView {...props} dispatch={dispatch} />)
+ return new UICompBuilder(childrenMap, (props, dispatch) => {
+ useMergeCompStyles(props as Record<string, any>, dispatch);
+
+ return (
+ <TransferView {...props} dispatch={dispatch} />)})
.setPropertyViewFn((children) => (
<>
<Section name={sectionNames.basic}>
diff --git a/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx b/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx
index d6063652f..4e3419ffe 100644
--- a/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx
@@ -33,6 +33,7 @@ import { SelectEventHandlerControl } from "comps/controls/eventHandlerControl";
import { trans } from "i18n";
import { useContext } from "react";
import { EditorContext } from "comps/editorState";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
type TreeStyleType = StyleConfigType<typeof TreeStyle>;
@@ -76,9 +77,9 @@ const childrenMap = {
label: withDefault(LabelControl, { position: "column" }),
// TODO: more event
onEvent: SelectEventHandlerControl,
- style: styleControl(InputFieldStyle),
- labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false)),
- inputFieldStyle:styleControl(TreeStyle)
+ style: styleControl(InputFieldStyle , 'style'),
+ labelStyle: styleControl(LabelStyle.filter((style) => ['accent', 'validate'].includes(style.name) === false), 'labelStyle'),
+ inputFieldStyle:styleControl(TreeStyle, 'inputFieldStyle')
};
const TreeCompView = (props: RecordConstructorToView<typeof childrenMap>) => {
@@ -150,7 +151,11 @@ const TreeCompView = (props: RecordConstructorToView<typeof childrenMap>) => {
};
let TreeBasicComp = (function () {
- return new UICompBuilder(childrenMap, (props) => <TreeCompView {...props} />)
+ return new UICompBuilder(childrenMap, (props, dispatch) => {
+ useMergeCompStyles(props as Record<string, any>, dispatch);
+
+ return(<TreeCompView {...props} />)}
+)
.setPropertyViewFn((children) => (
<>
<Section name={sectionNames.basic}>
diff --git a/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx b/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx
index a9036be7c..5eb322d0a 100644
--- a/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx
@@ -36,6 +36,7 @@ import { BaseSelectRef } from "rc-select";
import { RefControl } from "comps/controls/refControl";
import { useContext } from "react";
import { EditorContext } from "comps/editorState";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
const StyledTreeSelect = styled(TreeSelect)<{ $style: TreeSelectStyleType }>`
width: 100%;
@@ -65,9 +66,9 @@ const childrenMap = {
allowClear: BoolControl,
showSearch: BoolControl.DEFAULT_TRUE,
inputValue: stateComp<string>(""), // search value
- style:styleControl(InputFieldStyle),
- labelStyle:styleControl(LabelStyle),
- inputFieldStyle: withDefault(styleControl(TreeSelectStyle), {borderWidth: '1px'}),
+ style:styleControl(InputFieldStyle , 'style'),
+ labelStyle:styleControl(LabelStyle , 'labelStyle'),
+ inputFieldStyle: styleControl(TreeSelectStyle, 'inputFieldStyle'),
viewRef: RefControl<BaseSelectRef>,
};
@@ -145,9 +146,12 @@ const TreeCompView = (
};
let TreeBasicComp = (function () {
- return new UICompBuilder(childrenMap, (props, dispatch) => (
+ return new UICompBuilder(childrenMap, (props, dispatch) => {
+ useMergeCompStyles(props as Record<string, any>, dispatch);
+
+ return(
<TreeCompView {...props} dispatch={dispatch} />
- ))
+ )})
.setPropertyViewFn((children) => (
<>
<Section name={sectionNames.basic}>
diff --git a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx
index 4f78b5079..f982b2d53 100644
--- a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx
+++ b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx
@@ -36,11 +36,21 @@ const Wrapper = styled.div<{$style: ContainerStyleType; $animationStyle?:Animati
`;
const HeaderInnerGrid = styled(InnerGrid)<{
- $backgroundColor: string
+ $backgroundColor: string,
+ $headerBackgroundImage: string;
+ $headerBackgroundImageRepeat: string;
+ $headerBackgroundImageSize: string;
+ $headerBackgroundImagePosition: string;
+ $headerBackgroundImageOrigin: string;
}>`
overflow: visible;
${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`}
border-radius: 0;
+ ${(props) => props.$headerBackgroundImage && `background-image: url(${props.$headerBackgroundImage});`}
+ ${(props) => props.$headerBackgroundImageRepeat && `background-repeat: ${props.$headerBackgroundImageRepeat};`}
+ ${(props) => props.$headerBackgroundImageSize && `background-size: ${props.$headerBackgroundImageSize};`}
+ ${(props) => props.$headerBackgroundImagePosition && `background-position: ${props.$headerBackgroundImagePosition};`}
+ ${(props) => props.$headerBackgroundImageOrigin && `background-origin: ${props.$headerBackgroundImageOrigin};`}
`;
const BodyInnerGrid = styled(InnerGrid)<{
@@ -48,11 +58,21 @@ const BodyInnerGrid = styled(InnerGrid)<{
$backgroundColor: string;
$borderColor: string;
$borderWidth: string;
+ $backgroundImage: string;
+ $backgroundImageRepeat: string;
+ $backgroundImageSize: string;
+ $backgroundImagePosition: string;
+ $backgroundImageOrigin: string;
}>`
border-top: ${(props) => `${props.$showBorder ? props.$borderWidth : 0} solid ${props.$borderColor}`};
flex: 1;
${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`}
border-radius: 0;
+ ${(props) => props.$backgroundImage && `background-image: url(${props.$backgroundImage});`}
+ ${(props) => props.$backgroundImageRepeat && `background-repeat: ${props.$backgroundImageRepeat};`}
+ ${(props) => props.$backgroundImageSize && `background-size: ${props.$backgroundImageSize};`}
+ ${(props) => props.$backgroundImagePosition && `background-position: ${props.$backgroundImagePosition};`}
+ ${(props) => props.$backgroundImageOrigin && `background-origin: ${props.$backgroundImageOrigin};`}
`;
const FooterInnerGrid = styled(InnerGrid)<{
@@ -118,6 +138,11 @@ export function TriContainer(props: TriContainerProps) {
containerPadding={[paddingWidth, 3]}
showName={{ bottom: showBody || showFooter ? 20 : 0 }}
$backgroundColor={headerStyle?.headerBackground || 'transparent'}
+ $headerBackgroundImage={headerStyle?.headerBackgroundImage}
+ $headerBackgroundImageRepeat={headerStyle?.headerBackgroundImageRepeat}
+ $headerBackgroundImageSize={headerStyle?.headerBackgroundImageSize}
+ $headerBackgroundImagePosition={headerStyle?.headerBackgroundImagePosition}
+ $headerBackgroundImageOrigin={headerStyle?.headerBackgroundImageOrigin}
style={{padding: headerStyle.containerHeaderPadding}}
/>
@@ -140,6 +165,11 @@ export function TriContainer(props: TriContainerProps) {
$backgroundColor={bodyStyle?.background || 'transparent'}
$borderColor={style?.border}
$borderWidth={style?.borderWidth}
+ $backgroundImage={bodyStyle?.backgroundImage}
+ $backgroundImageRepeat={bodyStyle?.backgroundImageRepeat}
+ $backgroundImageSize={bodyStyle?.backgroundImageSize}
+ $backgroundImagePosition={bodyStyle?.backgroundImagePosition}
+ $backgroundImageOrigin={bodyStyle?.backgroundImageOrigin}
style={{padding: bodyStyle.containerBodyPadding}}
/>
</ScrollBar>
diff --git a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainerComp.tsx
index b93e018b4..f11af3464 100644
--- a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainerComp.tsx
@@ -9,12 +9,12 @@ import {
ContainerFooterStyle,
} from "comps/controls/styleControlConstants";
import { MultiCompBuilder, sameTypeMap, withDefault } from "comps/generators";
-import { migrateOldData } from "comps/generators/simpleGenerators";
+import { migrateOldData, valueComp } from "comps/generators/simpleGenerators";
import { NameGenerator } from "comps/utils";
-import { fromRecord, Node } from "lowcoder-core";
+import { changeValueAction, fromRecord, multiChangeAction, Node } from "lowcoder-core";
import { nodeIsRecord } from "lowcoder-core";
import _ from "lodash";
-import { ReactNode } from "react";
+import { ReactNode, useContext, useEffect } from "react";
import { lastValueIfEqual } from "util/objectUtils";
import {
CompTree,
@@ -27,6 +27,7 @@ import { SimpleContainerComp } from "../containerBase/simpleContainerComp";
import { ContainerBodyChildComp } from "./containerBodyChildComp";
import { trans } from "i18n";
import { ControlNode } from "lowcoder-design";
+import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
const childrenMap = {
header: SimpleContainerComp,
@@ -40,15 +41,18 @@ const childrenMap = {
showFooter: BoolControl,
autoHeight: AutoHeightControl,
scrollbars: withDefault(BoolControl, false),
- style: withDefault(styleControl(ContainerStyle),{borderWidth:'1px'}),
- headerStyle: styleControl(ContainerHeaderStyle),
- bodyStyle: styleControl(ContainerBodyStyle),
- footerStyle: styleControl(ContainerFooterStyle),
+ style: withDefault(styleControl(ContainerStyle, 'style'),{borderWidth:'1px'}),
+ headerStyle: styleControl(ContainerHeaderStyle, 'headerStyle'),
+ bodyStyle: styleControl(ContainerBodyStyle, 'bodyStyle'),
+ footerStyle: styleControl(ContainerFooterStyle, 'footerStyle'),
+ appliedThemeId: valueComp<string>(''), // for comp containing container, comps's appliedThemeId will always be empty so maintaining here
};
// Compatible with old style data 2022-8-15
const TriContainerBaseComp = migrateOldData(
new MultiCompBuilder(childrenMap, (props, dispatch) => {
+ useMergeCompStyles(props, dispatch);
+
return { ...props, dispatch };
}).build(),
fixOldStyleData
diff --git a/client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx b/client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx
index d87d9cf64..af76743ad 100644
--- a/client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx
+++ b/client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx
@@ -20,7 +20,7 @@ import { TriContainerViewProps } from "../triContainerComp/triContainerCompBuild
const getStyle = (style: TextContainerStyleType) => {
return css`
border-radius: ${(style.radius ? style.radius : "4px")};
- border: ${(style.borderWidth ? style.borderWidth : "0px")} solid ${style.border};
+ border: ${(style.borderWidth ? style.borderWidth : "0px")} ${(style.borderStyle ? style.borderStyle : "solid")} ${style.border};
color: ${style.text};
font-size: ${style.textSize} !important;
font-weight: ${style.textWeight} !important;
@@ -76,7 +76,7 @@ ${props=>props.$animationStyle&&props.$animationStyle}
display: flex;
flex-flow: column;
height: 100%;
- border: ${(props) => props.$style.borderWidth} solid ${(props) => props.$style.border};
+ border: ${(props) => props.$style.borderWidth} ${(props) => (props.$style.borderStyle ? props.$style.borderStyle : "solid")} ${(props) => props.$style.border};
border-radius: ${(props) => props.$style.radius};
background-color: ${(props) => props.$style.background};
padding: ${(props) => props.$style.padding};
diff --git a/client/packages/lowcoder/src/comps/controls/styleControl.tsx b/client/packages/lowcoder/src/comps/controls/styleControl.tsx
index fd10c7486..7a25595d3 100644
--- a/client/packages/lowcoder/src/comps/controls/styleControl.tsx
+++ b/client/packages/lowcoder/src/comps/controls/styleControl.tsx
@@ -5,7 +5,7 @@ import { childrenToProps, ToConstructor } from "comps/generators/multi";
import { BackgroundColorContext } from "comps/utils/backgroundColorContext";
import { ThemeContext } from "comps/utils/themeContext";
import { trans } from "i18n";
-import _ from "lodash";
+import _, { values } from "lodash";
import {
controlItem,
IconReset,
@@ -36,7 +36,6 @@ import { useIsMobile } from "util/hooks";
import { CSSCodeControl, ObjectControl, RadiusControl, StringControl } from "./codeControl";
import { ColorControl } from "./colorControl";
import {
- defaultTheme,
DepColorConfig,
DEP_TYPE,
RadiusConfig,
@@ -80,6 +79,11 @@ import {
} from "./styleControlConstants";
import { faTextWidth } from "@fortawesome/free-solid-svg-icons";
import appSelectControl from "./appSelectControl";
+import { JSONObject, JSONValue } from "@lowcoder-ee/util/jsonTypes";
+import { CompTypeContext } from "../utils/compTypeContext";
+import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
+import { CompContext } from "../utils/compContext";
+import { EditorContext } from "../editorState";
function isSimpleColorConfig(config: SingleColorConfig): config is SimpleColorConfig {
return config.hasOwnProperty("color");
@@ -350,9 +354,16 @@ function calcColors<ColorMap extends Record<string, string>>(
props: ColorMap,
colorConfigs: readonly SingleColorConfig[],
theme?: ThemeDetail,
- bgColor?: string
+ bgColor?: string,
+ compTheme?: Record<string, string>,
) {
- const themeWithDefault = (theme || defaultTheme) as unknown as Record<string, string>;
+ // let themeWithDefault = (theme || defaultTheme) as unknown as Record<string, string>;
+ let themeWithDefault = {
+ // ...defaultTheme,
+ ...(theme || {}),
+ ...(compTheme || {}),
+ } as unknown as Record<string, string>;
+
// Cover what is not there for the first pass
let res: Record<string, string> = {};
colorConfigs.forEach((config) => {
@@ -515,55 +526,55 @@ function calcColors<ColorMap extends Record<string, string>>(
res[name] = themeWithDefault[config.radius];
}
if (isBorderWidthConfig(config)) {
- res[name] = '0px';
+ res[name] = themeWithDefault[config.borderWidth] || '0px';
}
if (isRotationConfig(config)) {
- res[name] = '0deg';
+ res[name] = themeWithDefault[config.rotation] || '0deg';
}
if (isBackgroundImageConfig(config)) {
- res[name] = '';
+ res[name] = themeWithDefault[config.backgroundImage] || '';
}
if (isBackgroundImageRepeatConfig(config)) {
- res[name] = 'no-repeat';
+ res[name] = themeWithDefault[config.backgroundImageRepeat] || 'no-repeat';
}
if (isBackgroundImageSizeConfig(config)) {
- res[name] = 'cover';
+ res[name] = themeWithDefault[config.backgroundImageSize] || 'cover';
}
if (isBackgroundImagePositionConfig(config)) {
- res[name] = 'center';
+ res[name] = themeWithDefault[config.backgroundImagePosition] || 'center';
}
if (isBackgroundImageOriginConfig(config)) {
- res[name] = 'padding-box';
+ res[name] = themeWithDefault[config.backgroundImageOrigin] || 'padding-box';
}
if (isHeaderBackgroundImageConfig(config)) {
- res[name] = '';
+ res[name] = themeWithDefault[config.headerBackgroundImage] || '';
}
if (isHeaderBackgroundImageRepeatConfig(config)) {
- res[name] = 'no-repeat';
+ res[name] = themeWithDefault[config.headerBackgroundImageRepeat] || 'no-repeat';
}
if (isHeaderBackgroundImageSizeConfig(config)) {
- res[name] = 'cover';
+ res[name] = themeWithDefault[config.headerBackgroundImageSize] || 'cover';
}
if (isHeaderBackgroundImagePositionConfig(config)) {
- res[name] = 'center';
+ res[name] = themeWithDefault[config.headerBackgroundImagePosition] || 'center';
}
if (isHeaderBackgroundImageOriginConfig(config)) {
- res[name] = 'padding-box';
+ res[name] = themeWithDefault[config.headerBackgroundImageOrigin] || 'padding-box';
}
if (isFooterBackgroundImageConfig(config)) {
- res[name] = '';
+ res[name] = themeWithDefault[config.footerBackgroundImage] || '';
}
if (isFooterBackgroundImageRepeatConfig(config)) {
- res[name] = 'no-repeat';
+ res[name] = themeWithDefault[config.footerBackgroundImageRepeat] || 'no-repeat';
}
if (isFooterBackgroundImageSizeConfig(config)) {
- res[name] = 'cover';
+ res[name] = themeWithDefault[config.footerBackgroundImageSize] || 'cover';
}
if (isFooterBackgroundImagePositionConfig(config)) {
- res[name] = 'center';
+ res[name] = themeWithDefault[config.footerBackgroundImagePosition] || 'center';
}
if (isFooterBackgroundImageOriginConfig(config)) {
- res[name] = 'padding-box';
+ res[name] = themeWithDefault[config.footerBackgroundImageOrigin] || 'padding-box';
}
if (isTextSizeConfig(config)) {
// TODO: remove default textSize after added in theme in backend.
@@ -624,6 +635,10 @@ function calcColors<ColorMap extends Record<string, string>>(
}
if (isDepColorConfig(config)) {
if (config.depType && config.depType === DEP_TYPE.CONTRAST_TEXT) {
+ if (compTheme?.[name]) {
+ res[name] = compTheme[name];
+ return;
+ }
// bgColor is the background color of the container component, equivalent to canvas
let depKey = config.depName ? res[config.depName] : themeWithDefault[config.depTheme!];
if (bgColor && config.depTheme === "canvas") {
@@ -636,12 +651,16 @@ function calcColors<ColorMap extends Record<string, string>>(
);
} else if (config?.depType === DEP_TYPE.SELF && config.depTheme === "canvas" && bgColor) {
res[name] = bgColor;
+ } else if ((config?.depType || config?.depName) && compTheme?.[name]) {
+ res[name] = compTheme[name];
} else {
const rest = [];
config.depName && rest.push(res[config.depName]);
config.depTheme && rest.push(themeWithDefault[config.depTheme]);
res[name] = config.transformer(rest[0], rest[1]);
}
+ } else {
+ res[name] = themeWithDefault[config.name]
}
});
return res as ColorMap;
@@ -781,7 +800,10 @@ const ResetIcon = styled(IconReset)`
}
`;
-export function styleControl<T extends readonly SingleColorConfig[]>(colorConfigs: T) {
+export function styleControl<T extends readonly SingleColorConfig[]>(
+ colorConfigs: T,
+ styleKey: string = '',
+) {
type ColorMap = { [K in Names<T>]: string };
const childrenMap: any = {};
colorConfigs.map((config) => {
@@ -836,23 +858,53 @@ export function styleControl<T extends readonly SingleColorConfig[]>(colorConfig
return new ControlItemCompBuilder(
childrenMap as ToConstructor<{ [K in Names<T>]: ColorControl }>,
(props) => {
- // const x = useContext(CompNameContext);
+ // const compType = useContext(CompTypeContext);
+ const editorState = useContext(EditorContext);
+ const {comp, compType} = useContext(CompContext);
const theme = useContext(ThemeContext);
const bgColor = useContext(BackgroundColorContext);
- return calcColors(props as ColorMap, colorConfigs, theme?.theme, bgColor);
+
+ const appSettingsComp = editorState?.getAppSettingsComp();
+ const preventAppStylesOverwriting = appSettingsComp?.getView()?.preventAppStylesOverwriting;
+ const { themeId } = theme || {};
+ const { appliedThemeId, preventStyleOverwriting } = comp?.comp?.container || comp?.comp || {};
+ const appTheme = !preventStyleOverwriting && !preventAppStylesOverwriting
+ ? theme?.theme
+ : undefined;
+ const compTheme = compType && !preventStyleOverwriting && !preventAppStylesOverwriting
+ ? {
+ ...(theme?.theme?.components?.[compType]?.[styleKey] || {}) as unknown as Record<string, string>
+ }
+ : undefined;
+ const styleProps = preventStyleOverwriting || preventAppStylesOverwriting || appliedThemeId === themeId
+ ? props as ColorMap
+ : {} as ColorMap;
+
+ return calcColors(
+ styleProps,
+ colorConfigs,
+ appTheme,
+ bgColor,
+ compTheme as Record<string, string> | undefined,
+ );
}
)
.setControlItemData({ filterText: label, searchChild: true })
.setPropertyViewFn((children) => {
const theme = useContext(ThemeContext);
+ const compType = useContext(CompTypeContext);
const bgColor = useContext(BackgroundColorContext);
const isMobile = useIsMobile();
+ const compTheme = compType
+ ? theme?.theme?.components?.[compType]?.[styleKey]
+ : undefined;
const props = calcColors(
childrenToProps(children) as ColorMap,
colorConfigs,
theme?.theme,
- bgColor
+ bgColor,
+ compTheme as Record<string, string> | undefined,
);
const showReset = Object.values(childrenToProps(children)).findIndex((item) => item) > -1;
return (
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
index 7cecda65b..e32d45ec8 100644
--- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
+++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -2,6 +2,7 @@ import {ThemeDetail} from "api/commonSettingApi";
import {darkenColor, isDarkColor, lightenColor, toHex} from "lowcoder-design";
import {trans} from "i18n";
import {StyleConfigType} from "./styleControl";
+import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
type SupportPlatform = "pc" | "mobile";
@@ -225,26 +226,6 @@ export type SingleColorConfig =
| BoxShadowColorConfig
| AnimationIterationCountConfig;
-export const defaultTheme: ThemeDetail = {
- primary: "#3377FF",
- textDark: "#222222",
- textLight: "#FFFFFF",
- canvas: "#F5F5F6",
- primarySurface: "#FFFFFF",
- borderRadius: "4px",
- margin: "3px",
- padding: "3px",
- gridColumns: "24",
- textSize: "14px",
- animation: "",
- animationDelay: "",
- animationDuration: "",
- opacity: "1",
- boxShadow: "",
- boxShadowColor: "",
- animationIterationCount: "",
-};
-
export const SURFACE_COLOR = "#FFFFFF";
const SECOND_SURFACE_COLOR = "#D7D9E0";
const ERROR_COLOR = "#F5222D";
@@ -260,7 +241,7 @@ export function contrastText(
textDark: string,
textLight: string
) {
- return isDarkColor(color) && color !== "#00000000" ? textLight : textDark;
+ return color && isDarkColor(color) && color !== "#00000000" ? textLight : textDark;
}
// return similar background color
@@ -496,7 +477,7 @@ const BORDER = {
const RADIUS = {
name: "radius",
label: trans("style.borderRadius"),
- radius: "borderRadius",
+ radius: "radius",
} as const;
const BORDER_WIDTH = {
@@ -1243,7 +1224,7 @@ export const TabContainerStyle = [
[
...ContainerStyle.filter(
(style) =>
- ["border", "radius", "f", "margin", "padding"].includes(
+ ["border", "radius", "f", "margin", "padding",'borderWidth','borderStyle'].includes(
style.name
) === false
),
diff --git a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
index 64be29b6e..559f93945 100644
--- a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
+++ b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
@@ -24,12 +24,15 @@ import {
} from "./withMethodExposing";
import { Section } from "lowcoder-design";
import { trans } from "i18n";
+import { BoolControl } from "../controls/boolControl";
+import { valueComp, withDefault } from "./simpleGenerators";
export type NewChildren<ChildrenCompMap extends Record<string, Comp<unknown>>> =
ChildrenCompMap & {
hidden: InstanceType<typeof BoolCodeControl>;
className: InstanceType<typeof StringControl>;
dataTestId: InstanceType<typeof StringControl>;
+ preventStyleOverwriting: InstanceType<typeof BoolControl>;
};
export function HidableView(props: {
@@ -67,6 +70,7 @@ export function ExtendedPropertyView<
<Section name={trans("prop.component")}>
{props.childrenMap.className?.propertyView({ label: trans("prop.className") })}
{props.childrenMap.dataTestId?.propertyView({ label: trans("prop.dataTestId") })}
+ {props.childrenMap.preventStyleOverwriting?.propertyView({ label: trans("prop.preventOverwriting") })}
</Section>
</>
);
@@ -81,7 +85,9 @@ export function uiChildren<
...childrenMap,
hidden: BoolCodeControl,
className: StringControl,
- dataTestId: StringControl
+ dataTestId: StringControl,
+ preventStyleOverwriting: withDefault(BoolControl, false),
+ appliedThemeId: valueComp<string>(''),
} as any;
}
@@ -149,7 +155,7 @@ export class UICompBuilder<
}
build() {
- const reservedProps = ["hidden", "className", "dataTestId"];
+ const reservedProps = ["hidden", "className", "dataTestId", "preventStyleOverwriting", "appliedThemeId"];
for (const reservedProp of reservedProps) {
if (this.childrenMap.hasOwnProperty(reservedProp)) {
throw new Error(`Property »${reservedProp}« is reserved and must not be implemented in components!`);
@@ -235,6 +241,7 @@ function UIView(props: {
}
//END ADD BY FRED
+ // render condition for modal and drawer as we are not getting compType here
if (comp.children.hasOwnProperty('showMask') && comp.children.hasOwnProperty('maskClosable')) {
return (
<HidableView hidden={childrenProps.hidden as boolean}>
diff --git a/client/packages/lowcoder/src/comps/generators/withSelectedMultiContext.tsx b/client/packages/lowcoder/src/comps/generators/withSelectedMultiContext.tsx
index 522c0f9f3..68b41a59b 100644
--- a/client/packages/lowcoder/src/comps/generators/withSelectedMultiContext.tsx
+++ b/client/packages/lowcoder/src/comps/generators/withSelectedMultiContext.tsx
@@ -96,8 +96,10 @@ export function withSelectedMultiContext<TCtor extends MultiCompConstructor>(
comp = comp.reduce(wrapChildAction(COMP_KEY, newAction));
} else if (
!action.editDSL
- && isCustomAction<ModuleReadyAction>(action, "moduleReady")
- && action.path[0] === MAP_KEY
+ && (
+ isCustomAction<ModuleReadyAction>(action, "moduleReady")
+ || isCustomAction<LazyCompReadyAction>(action, "LazyCompReady")
+ ) && action.path[0] === MAP_KEY
) {
comp = super.reduce(action);
}
diff --git a/client/packages/lowcoder/src/comps/queries/queryComp.tsx b/client/packages/lowcoder/src/comps/queries/queryComp.tsx
index 9d894683e..81e4dd439 100644
--- a/client/packages/lowcoder/src/comps/queries/queryComp.tsx
+++ b/client/packages/lowcoder/src/comps/queries/queryComp.tsx
@@ -134,7 +134,7 @@ const childrenMap = {
// advanced
timeout: paramsMillisecondsControl({
left: 0,
- right: 120 * 1000,
+ right: 3200 * 1000,
defaultValue: 10 * 1000,
}),
confirmationModal: QueryConfirmationModal,
diff --git a/client/packages/lowcoder/src/comps/queries/queryComp/queryPropertyView.tsx b/client/packages/lowcoder/src/comps/queries/queryComp/queryPropertyView.tsx
index a17857348..b48b8714e 100644
--- a/client/packages/lowcoder/src/comps/queries/queryComp/queryPropertyView.tsx
+++ b/client/packages/lowcoder/src/comps/queries/queryComp/queryPropertyView.tsx
@@ -94,7 +94,7 @@ export function QueryPropertyView(props: { comp: InstanceType<typeof QueryComp>
{children.timeout.propertyView({
label: trans("query.timeout"),
placeholder: "10s",
- tooltip: trans("query.timeoutTooltip", { maxSeconds: 120, defaultSeconds: 10 }),
+ tooltip: trans("query.timeoutTooltip", { maxSeconds: 3600, defaultSeconds: 10 }),
placement: "bottom",
})}
</QuerySectionWrapper>
diff --git a/client/packages/lowcoder/src/comps/utils/compContext.tsx b/client/packages/lowcoder/src/comps/utils/compContext.tsx
new file mode 100644
index 000000000..5b744b3e3
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/utils/compContext.tsx
@@ -0,0 +1,6 @@
+import React from "react";
+
+export const CompContext = React.createContext<{
+ comp?: any;
+ compType: string;
+}>({ comp: undefined, compType: '' });
diff --git a/client/packages/lowcoder/src/comps/utils/compTypeContext.tsx b/client/packages/lowcoder/src/comps/utils/compTypeContext.tsx
new file mode 100644
index 000000000..a70f83cd6
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/utils/compTypeContext.tsx
@@ -0,0 +1,3 @@
+import React from "react";
+
+export const CompTypeContext = React.createContext<string>('');
diff --git a/client/packages/lowcoder/src/comps/utils/themeContext.tsx b/client/packages/lowcoder/src/comps/utils/themeContext.tsx
index 04bf81048..3f6760ff7 100644
--- a/client/packages/lowcoder/src/comps/utils/themeContext.tsx
+++ b/client/packages/lowcoder/src/comps/utils/themeContext.tsx
@@ -4,5 +4,6 @@ import React from "react";
export class Theme {
readonly theme?: ThemeDetail;
readonly previewTheme?: ThemeDetail;
+ readonly themeId?: string;
}
export const ThemeContext = React.createContext<Theme | undefined>(undefined);
diff --git a/client/packages/lowcoder/src/comps/utils/themeUtil.ts b/client/packages/lowcoder/src/comps/utils/themeUtil.ts
index 75045a03f..f5e574bab 100644
--- a/client/packages/lowcoder/src/comps/utils/themeUtil.ts
+++ b/client/packages/lowcoder/src/comps/utils/themeUtil.ts
@@ -1,6 +1,8 @@
import { ThemeType } from "api/commonSettingApi";
import { getLocalThemeId } from "util/localStorageUtil";
import { getGlobalSettings } from "./globalSettings";
+import { CompAction, multiChangeAction, changeValueAction, deferAction } from "lowcoder-core";
+import { JSONObject, JSONValue } from "@lowcoder-ee/util/jsonTypes";
export const DEFAULT_THEMEID = "default";
@@ -20,3 +22,34 @@ export function getCurrentTheme(themeList: ThemeType[], appThemeId: string) {
: appThemeId
);
}
+
+export function setInitialCompStyles({
+ dispatch,
+ compTheme,
+ styleProps,
+ themeId,
+}: {
+ dispatch: (action: CompAction) => void,
+ compTheme?: JSONObject,
+ styleProps: Record<string, any>,
+ themeId?: string,
+}) {
+ const styleKeys = Object.keys(styleProps);
+ const actions: Record<string, any> = {
+ appliedThemeId: changeValueAction(themeId || '', true),
+ };
+ styleKeys.forEach(styleKey => {
+ actions[styleKey] = changeValueAction({
+ ...(compTheme?.[styleKey] as object || {}),
+ ...styleProps[styleKey],
+ }, true);
+ })
+
+ setTimeout(() => {
+ dispatch(
+ deferAction(
+ multiChangeAction(actions),
+ )
+ );
+ }, 1000)
+}
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/constants/orgConstants.ts b/client/packages/lowcoder/src/constants/orgConstants.ts
index a6aaa56cf..8c4d0da57 100644
--- a/client/packages/lowcoder/src/constants/orgConstants.ts
+++ b/client/packages/lowcoder/src/constants/orgConstants.ts
@@ -1,8 +1,9 @@
import { CommonSettingResponseData } from "api/commonSettingApi";
import { trans } from "i18n";
-export const ADMIN_ROLE = "admin";
+export const ADMIN_ROLE = "admin" || "super_admin";
export const MEMBER_ROLE = "member";
+
export const NEW_ORG_PREFIX = trans("orgSettings.newOrg");
export const TacoRoles = [ADMIN_ROLE, MEMBER_ROLE] as const;
@@ -11,10 +12,7 @@ type RoleInfoType = Record<RoleIdType, { name: string; desc: string }>;
export const GroupRoleInfo: RoleInfoType = {
admin: { name: trans("memberSettings.admin"), desc: trans("memberSettings.adminGroupRoleInfo") },
- member: {
- name: trans("memberSettings.member"),
- desc: trans("memberSettings.memberGroupRoleInfo"),
- },
+ member: { name: trans("memberSettings.member"), desc: trans("memberSettings.memberGroupRoleInfo"), },
};
export const OrgRoleInfo: RoleInfoType = {
diff --git a/client/packages/lowcoder/src/constants/themeConstants.ts b/client/packages/lowcoder/src/constants/themeConstants.ts
new file mode 100644
index 000000000..45fd7a01e
--- /dev/null
+++ b/client/packages/lowcoder/src/constants/themeConstants.ts
@@ -0,0 +1,150 @@
+import { ThemeDetail } from "@lowcoder-ee/api/commonSettingApi";
+
+const text = {
+ style: {
+ borderWidth: 0,
+ }
+};
+
+const input = {
+ style: {
+ borderWidth: '0px',
+ background: 'transparent',
+ },
+ labelStyle: {
+ borderWidth: '0px',
+ },
+ inputFieldStyle: {
+ borderWidth: '1px',
+ border: '#D7D9E0'
+ }
+};
+
+const table = {
+ style: {
+ borderWidth: '1px'
+ },
+ rowStyle: {
+ borderWidth: '1px'
+ },
+ headerStyle: {
+ borderWidth: '1px'
+ },
+ columnsStyle: {
+ radius: '0px'
+ }
+}
+
+const link = {
+ style: {
+ borderWidth: '0px',
+ background: 'transparent',
+ }
+}
+
+const rating = {
+ style: {
+ background: 'transparent',
+ borderWidth: '0px',
+ },
+ labelStyle: {
+ borderWidth: '0px',
+ },
+ inputFieldStyle: {
+ borderWidth: '0px',
+ }
+}
+
+const segmentedControl = {
+ style: {
+ borderWidth: '0px',
+ }
+};
+
+const columnLayout = {
+ columnStyle: {
+ borderWidth: '1px',
+ }
+};
+
+const tabbedContainer = {
+ style: {
+ borderWidth: '1px',
+ }
+};
+
+const step = {
+ style: {text:'#D7D9E0'}
+};
+
+const treeSelect = {
+ inputFieldStyle: {
+ borderWidth: '1px',
+ }
+};
+
+const pageLayout = {
+ style: {
+ borderWidth: '1px',
+ }
+};
+
+const qrCode = {
+ style: {
+ background:'transparent'
+ }
+};
+
+
+export const defaultTheme: ThemeDetail = {
+ primary: "#3377FF",
+ textDark: "#222222",
+ textLight: "#FFFFFF",
+ canvas: "#F5F5F6",
+ primarySurface: "#FFFFFF",
+ border: "#D7D9E0",
+ radius: "4px",
+ borderWidth: "1px",
+ borderStyle: "solid",
+ margin: "3px",
+ padding: "3px",
+ gridColumns: "24",
+ textSize: "14px",
+ text: "#222222",
+ animation: "",
+ animationDelay: "",
+ animationDuration: "",
+ opacity: "1",
+ boxShadow: "",
+ boxShadowColor: "",
+ animationIterationCount: "",
+ components: {
+ text,
+ input,
+ table,
+ link,
+ rating,
+ columnLayout,
+ tabbedContainer,
+ step,
+ qrCode,
+ treeSelect,
+ pageLayout,
+ password: input,
+ numberInput: input,
+ textArea: input,
+ autocomplete: input,
+ switch: input,
+ checkbox: input,
+ radio: input,
+ date: input,
+ dateRange: input,
+ time: input,
+ timeRange: input,
+ slider: input,
+ rangeSlider: input,
+ segmentedControl,
+ select: input,
+ multiSelect: input,
+ },
+};
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
index cc8764c16..3fb351f91 100644
--- a/client/packages/lowcoder/src/i18n/locales/en.ts
+++ b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -216,6 +216,8 @@ export const en = {
"component": "Own Component Identifiers",
"className": "CSS Class name",
"dataTestId": "Individual ID",
+ "preventOverwriting": "Prevent overwriting styles",
+ "color": "Color",
},
"autoHeightProp": {
"auto": "Auto",
@@ -229,6 +231,7 @@ export const en = {
"text": "Label",
"tooltip": "Tooltip",
"position": "Position",
+ "collapse": "Collapse",
"left": "Left",
"right": "Right",
"top": "Top",
@@ -445,31 +448,7 @@ export const en = {
"refresh": "Refresh",
"refreshDesc": "Triggers on Refresh",
},
- "themeDetail": {
- "primary": "Brand Color",
- "primaryDesc": "Default primary color used by most components",
- "textDark": "Dark Text Color",
- "textDarkDesc": "Used when the background color is light",
- "textLight": "Light Text Color",
- "textLightDesc": "Used when the background color is dark",
- "canvas": "Canvas Color",
- "canvasDesc": "Default background color of the app",
- "primarySurface": "Container Color",
- "primarySurfaceDesc": "Default background color for components like tables",
- "borderRadius": "Border Radius",
- "borderRadiusDesc": "Default border radius used by most components",
- "chart": "Chart Style",
- "chartDesc": "Input for Echarts",
- "echartsJson": "Theme JSON",
- "margin": "Margin",
- "marginDesc": "Default margin typically used for most components",
- "padding": "Padding",
- "paddingDesc": "Default padding typically used for most components",
- "containerHeaderPadding": "Header Padding",
- "containerheaderpaddingDesc": "Default header padding typically used for most components",
- "gridColumns": "Grid Columns",
- "gridColumnsDesc": "Default number of columns typically used for most containers"
- },
+
// fourth part
@@ -493,10 +472,10 @@ export const en = {
"borderRadius": "Border Radius",
"borderWidth": "Border Width",
"borderStyle":"Border Style",
- "background": "Background",
- "headerBackground": "Header Background",
- "siderBackground": "Sider Background",
- "footerBackground": "Footer Background",
+ "background": "Background Color",
+ "headerBackground": "Header Background Color",
+ "siderBackground": "Sider Background Color",
+ "footerBackground": "Footer Background Color",
"fill": "Fill",
"track": "Track",
"links": "Links",
@@ -510,20 +489,20 @@ export const en = {
"multiIcon": "Multiselect Icon",
"tabText": "Tab Text",
"tabAccent": "Tab Accent",
- "checkedBackground": "Checked Background",
- "uncheckedBackground": "Unchecked Background",
- "uncheckedBorder": "Unchecked Border",
- "indicatorBackground": "Indicator Background",
+ "checkedBackground": "Checked Background Color",
+ "uncheckedBackground": "Unchecked Background Color",
+ "uncheckedBorder": "Unchecked Border Color",
+ "indicatorBackground": "Indicator Background Color",
"tableCellText": "Cell Text",
- "selectedRowBackground": "Selected Row Background",
- "hoverRowBackground": "Hover Row Background",
- "hoverBackground":"Hover Background",
+ "selectedRowBackground": "Selected Row Background Color",
+ "hoverRowBackground": "Hover Row Background Color",
+ "hoverBackground":"Hover Background Color",
"textTransform":"Text Transform",
"textDecoration":"Text Decoration",
- "alternateRowBackground": "Alternate Row Background",
- "tableHeaderBackground": "Header Background",
+ "alternateRowBackground": "Alternate Row Background Color",
+ "tableHeaderBackground": "Header Background Color",
"tableHeaderText": "Header Text",
- "toolbarBackground": "Toolbar Background",
+ "toolbarBackground": "Toolbar Background Color",
"toolbarText": "Toolbar Text",
"pen": "Pen",
"footerIcon": "Footer Icon",
@@ -540,25 +519,41 @@ export const en = {
"containerBodyPadding": "Body Padding",
"minWidth": "Minimum Width",
"aspectRatio": "Aspect Ratio",
+ "text": "Text",
"textSize": "Text Size",
"textWeight": "Text Weight",
"fontFamily": "Font Family",
"fontStyle":"Font Style",
- "backgroundImage": "BG Image",
- "backgroundImageRepeat": "BG Repeat",
- "backgroundImageSize": "BG Size",
- "backgroundImagePosition": "BG Position",
- "backgroundImageOrigin": "BG Origin",
- "headerBackgroundImage": "BgImage",
- "headerBackgroundImageRepeat": "BgImage Repeat",
- "headerBackgroundImageSize": "BgImage Size",
- "headerBackgroundImagePosition": "BgImage Position",
- "headerBackgroundImageOrigin": "BgImage Origin",
- "footerBackgroundImage": "BgImage",
- "footerBackgroundImageRepeat": "BgImage Repeat",
- "footerBackgroundImageSize": "BgImage Size",
- "footerBackgroundImagePosition": "BgImage Position",
- "footerBackgroundImageOrigin": "BgImage Origin",
+ "backgroundImage": "Background Image",
+ "backgroundImageRepeat": "Background Repeat",
+ "backgroundImageSize": "Background Size",
+ "backgroundImagePosition": "Background Position",
+ "backgroundImageOrigin": "Background Origin",
+ "headerBackgroundImage": "Background Image",
+ "headerBackgroundImageRepeat": "Background Image Repeat",
+ "headerBackgroundImageSize": "Background Image Size",
+ "headerBackgroundImagePosition": "Background Image Position",
+ "headerBackgroundImageOrigin": "Background Image Origin",
+ "footerBackgroundImage": "Background Image",
+ "footerBackgroundImageRepeat": "Background Image Repeat",
+ "footerBackgroundImageSize": "Background Image Size",
+ "footerBackgroundImagePosition": "Background Image Position",
+ "footerBackgroundImageOrigin": "Background Image Origin",
+ "rotation": "Rotation",
+ "alternateBackground": "Alternate Background Color",
+ "headerText": "Header Text Color",
+ "labelColor": "Label Color",
+ "label": "Label Color",
+ "subTitleColor": "SubTitle Color",
+ "titleText": "Title Color",
+ "success": "Success Color",
+ "siderBackgroundImage": "Sider Background Image",
+ "siderBackgroundImageRepeat": "Sider Background Image Repeat",
+ "siderBackgroundImageSize": "Sider Background Image Size",
+ "siderBackgroundImagePosition": "Sider Background Image Position",
+ "siderBackgroundImageOrigin": "Sider Background Image Origin",
+ "activeBackground": "Active Background Color",
+
},
"export": {
"hiddenDesc": "If true, the component is hidden",
@@ -2491,6 +2486,10 @@ export const en = {
"saveBtn": "Save",
"mainColor": "Main Colors",
"text": "Text Colors",
+ "layout" : "Layout Settings",
+ "fonts" : "Font Settings",
+ "components" : "Component Templates",
+ "charts" : "eCharts Definition",
"defaultTheme": "Default",
"yellow": "Yellow",
"green": "Green",
@@ -2529,6 +2528,43 @@ export const en = {
"chartQuery": "Query",
"chartBuy": "Buy"
},
+ "themeDetail": {
+ "primary": "Brand Color",
+ "primaryDesc": "Default primary color used by most components",
+ "textDark": "Dark Text Color",
+ "textDarkDesc": "Used when the background color is light",
+ "textLight": "Light Text Color",
+ "textLightDesc": "Used when the background color is dark",
+ "canvas": "Canvas Color",
+ "canvasDesc": "Default background color of the app",
+ "primarySurface": "Container Color",
+ "primarySurfaceDesc": "Default background color for components like tables",
+ "borders": "Border Styles",
+ "spacing": "Spacing Styles",
+ "font": "Font Styles",
+ "fonts" : "Fonts",
+ "borderRadius": "Border Radius",
+ "borderRadiusDesc": "Default border radius used by most components",
+ "borderColor": "Border Color",
+ "borderColorDesc": "Default border color used by most components",
+ "borderWidth": "Border Width",
+ "borderWidthDesc": "Default border width used by most components",
+ "borderStyle": "Border Style",
+ "borderStyleDesc": "Default border style used by most components",
+ "fontFamily": "Font Family",
+ "fontFamilyDesc": "Default font family used by most components",
+ "chart": "Chart Style",
+ "chartDesc": "Here you can place eCharts Theme JSON to define the style of your charts in all Details.",
+ "echartsJson": "You can use here the Theme JSON Generator. Copy the JSON from the Generator and paste it here.",
+ "margin": "Margin",
+ "marginDesc": "Default margin typically used for most components",
+ "padding": "Padding",
+ "paddingDesc": "Default padding typically used for most components",
+ "containerHeaderPadding": "Header Padding",
+ "containerheaderpaddingDesc": "Default header padding typically used for most components",
+ "gridColumns": "Canvas Grid Columns",
+ "gridColumnsDesc": "Default number of columns typically used for most containers"
+ },
"pluginSetting": {
"title": "Plugins",
"npmPluginTitle": "npm Plugins",
@@ -3332,7 +3368,23 @@ export const en = {
"manualTip": "",
"lockTip": "The Content is Locked. To Make Changes, Please Click the {icon} to Unlock.",
"lockModalContent": "Changing the 'ID Attribute' Field Can Have Significant Impacts on User Identification. Please Confirm That You Understand the Implications of This Change Before Proceeding.",
- "payUserTag": "Premium"
+ "payUserTag": "Premium",
+ "source" : "Source",
+ "sourceName" : "Auth Provider Name",
+ "sourceDescription" : "Auth Provider Description",
+ "sourceIcon" : "Auth Provider Icon",
+ "sourceCategory" : "Auth Provider Category",
+ "souceIssuerURI" : "Auth Provider Issuer URI",
+ "souceAuthorizationEndpoint" : "Auth Provider Authorization Endpoint",
+ "souceTokenEndpoint" : "Auth Provider Token Endpoint",
+ "souceUserInfoEndpoint" : "Auth Provider User Info Endpoint",
+ "userInfoIntrospection" : "Use OpenID User Introspection",
+ "userCanSelectAccounts" : "User Can Select from Accounts",
+ "sourceCategoryEnterprise" : "Enterprise Identity",
+ "sourceCategoryCloud" : "Cloud Services",
+ "sourceCategorySocial" : "Social Media",
+ "sourceCategoryDevelopment" : "Development",
+ "sourceCategoryTools" : "Tools & Productivity",
},
"slotControl": {
"configSlotView": "Configure Slot View"
@@ -3470,6 +3522,7 @@ export const en = {
"mode": "Mode",
"modeInline": "Inline",
"modeVertical": "Vertical",
+ "modeHorizontal": "Horizontal",
"width": "Width",
"widthTooltip": "Pixel or Percentage, e.g. 520, 60%",
"navStyle": "Menu Style",
diff --git a/client/packages/lowcoder/src/i18n/locales/pt.ts b/client/packages/lowcoder/src/i18n/locales/pt.ts
index 8c85ba4ac..63ae85afb 100644
--- a/client/packages/lowcoder/src/i18n/locales/pt.ts
+++ b/client/packages/lowcoder/src/i18n/locales/pt.ts
@@ -554,6 +554,7 @@ export const pt: typeof en = {
"containerBodyPadding": "Preenchimento do Corpo do Contêiner",
"minWidth": "Largura Mínima",
"aspectRatio": "Proporção",
+ "text": "Texto",
"textSize": "Tamanho do Texto",
"textWeight": "Peso do Texto",
"fontFamily": "Família da Fonte",
diff --git a/client/packages/lowcoder/src/i18n/locales/zh.ts b/client/packages/lowcoder/src/i18n/locales/zh.ts
index 0664cd098..b791dfdc0 100644
--- a/client/packages/lowcoder/src/i18n/locales/zh.ts
+++ b/client/packages/lowcoder/src/i18n/locales/zh.ts
@@ -482,6 +482,7 @@ export const zh: typeof en = {
containerBodyPadding: "内边距",
"containerSiderPadding": "Sider 衬垫",
minWidth: "最小宽度",
+ text: "文本",
textSize: "字体大小",
textWeight: "字体粗细",
"fontFamily": "字体",
diff --git a/client/packages/lowcoder/src/layout/compSelectionWrapper.tsx b/client/packages/lowcoder/src/layout/compSelectionWrapper.tsx
index 88de42290..447daa2a0 100644
--- a/client/packages/lowcoder/src/layout/compSelectionWrapper.tsx
+++ b/client/packages/lowcoder/src/layout/compSelectionWrapper.tsx
@@ -89,7 +89,7 @@ function getLineStyle(
return `
border: ${GRID_ITEM_BORDER_WIDTH}px ${borderStyle} ${borderColor};
- padding: ${isHidden && !isSelected ? 0 : padding[1] - GRID_ITEM_BORDER_WIDTH}px;
+ padding: ${isHidden || !isSelected ? 0 : padding[1] - GRID_ITEM_BORDER_WIDTH}px;
padding-left: ${padding[0] - GRID_ITEM_BORDER_WIDTH}px;
padding-right: ${padding[0] - GRID_ITEM_BORDER_WIDTH}px;
`;
diff --git a/client/packages/lowcoder/src/layout/gridItem.tsx b/client/packages/lowcoder/src/layout/gridItem.tsx
index 0e3706f81..6ff2b813e 100644
--- a/client/packages/lowcoder/src/layout/gridItem.tsx
+++ b/client/packages/lowcoder/src/layout/gridItem.tsx
@@ -141,9 +141,7 @@ export function GridItem(props: GridItemProps) {
onDrag={onDrag}
onDragEnd={onDragEnd}
onMouseDown={(e) => {
- if (isDraggable) {
- e.stopPropagation();
- }
+ e.stopPropagation();
const event = new MouseEvent("mousedown");
document.dispatchEvent(event);
}}
@@ -447,6 +445,7 @@ export function GridItem(props: GridItemProps) {
pos,
props.name,
props.autoHeight,
+ props.hidden,
Boolean(draggingUtils.isDragging())
),
opacity: layoutHide ? 0 : undefined,
diff --git a/client/packages/lowcoder/src/layout/gridLayout.tsx b/client/packages/lowcoder/src/layout/gridLayout.tsx
index 9dec97a2d..28e2e6220 100644
--- a/client/packages/lowcoder/src/layout/gridLayout.tsx
+++ b/client/packages/lowcoder/src/layout/gridLayout.tsx
@@ -51,6 +51,8 @@ import {
synchronizeLayoutWithChildren,
updateInCanvasCount,
} from "./utils";
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { CompContext } from "@lowcoder-ee/comps/utils/compContext";
type GridLayoutState = {
layout: Layout;
@@ -442,53 +444,63 @@ class GridLayout extends React.Component<GridLayoutProps, GridLayoutState> {
const selectable = isSelectable;
const positionParams = genPositionParams(this.props);
return (
- <GridItem
- compType={extraItem?.compType}
+ <CompContext.Provider
key={item.i}
- containerWidth={width}
- cols={cols}
- margin={margin}
- containerPadding={positionParams.containerPadding}
- maxRows={maxRows}
- rowHeight={rowHeight}
- onDragStart={this.onDragStart}
- onDrag={this.onDrag}
- onDragEnd={this.onDragEnd}
- onResizeStart={this.onResizeStart}
- onResize={this.onResize}
- onResizeStop={this.onResizeStop}
- onHeightChange={this.onHeightChange}
- isDraggable={isDraggable && isItemDraggable(item)}
- isResizable={isResizable && isItemResizable(item)}
- isSelectable={selectable}
- transformScale={transformScale}
- w={item.w}
- h={extraItem?.hidden && !extraItem?.isSelected ? 0 : item.h}
- x={item.x}
- y={item.y}
- i={item.i}
- minH={item.minH}
- minW={item.minW}
- maxH={item.maxH}
- maxW={item.maxW}
- placeholder={item.placeholder}
- layoutHide={item.hide}
- static={item.static}
- resizeHandles={getItemResizeHandles(item, extraItem)}
- name={extraItem?.name}
- autoHeight={extraItem?.autoHeight}
- isSelected={extraItem?.isSelected}
- hidden={extraItem?.hidden}
- selectedSize={selectedSize}
- clickItem={clickItem}
- showName={{
- top: showName?.top ?? 0,
- bottom: (showName?.bottom ?? 0) + (this.ref.current?.scrollHeight ?? 0),
+ value={{
+ compType: extraItem?.compType,
+ comp: extraItem?.comp?.toJsonValue(),
}}
- zIndex={zIndex}
>
- {child}
- </GridItem>
+ <CompTypeContext.Provider value={extraItem?.compType}>
+ <GridItem
+ compType={extraItem?.compType}
+ key={item.i}
+ containerWidth={width}
+ cols={cols}
+ margin={margin}
+ containerPadding={positionParams.containerPadding}
+ maxRows={maxRows}
+ rowHeight={rowHeight}
+ onDragStart={this.onDragStart}
+ onDrag={this.onDrag}
+ onDragEnd={this.onDragEnd}
+ onResizeStart={this.onResizeStart}
+ onResize={this.onResize}
+ onResizeStop={this.onResizeStop}
+ onHeightChange={this.onHeightChange}
+ isDraggable={isDraggable && isItemDraggable(item)}
+ isResizable={isResizable && isItemResizable(item)}
+ isSelectable={selectable}
+ transformScale={transformScale}
+ w={item.w}
+ h={extraItem?.hidden && !extraItem?.isSelected ? 0 : item.h}
+ x={item.x}
+ y={item.y}
+ i={item.i}
+ minH={item.minH}
+ minW={item.minW}
+ maxH={item.maxH}
+ maxW={item.maxW}
+ placeholder={item.placeholder}
+ layoutHide={item.hide}
+ static={item.static}
+ resizeHandles={getItemResizeHandles(item, extraItem)}
+ name={extraItem?.name}
+ autoHeight={extraItem?.autoHeight}
+ isSelected={extraItem?.isSelected}
+ hidden={extraItem?.hidden}
+ selectedSize={selectedSize}
+ clickItem={clickItem}
+ showName={{
+ top: showName?.top ?? 0,
+ bottom: (showName?.bottom ?? 0) + (this.ref.current?.scrollHeight ?? 0),
+ }}
+ zIndex={zIndex}
+ >
+ {child}
+ </GridItem>
+ </CompTypeContext.Provider>
+ </CompContext.Provider>
);
}
diff --git a/client/packages/lowcoder/src/layout/utils.ts b/client/packages/lowcoder/src/layout/utils.ts
index 97fb38855..44a77d15e 100644
--- a/client/packages/lowcoder/src/layout/utils.ts
+++ b/client/packages/lowcoder/src/layout/utils.ts
@@ -33,6 +33,7 @@ export type LayoutItem = {
};
export type ExtraItem = {
name: string;
+ comp: any;
compType: UICompType;
autoHeight?: boolean;
isSelected?: boolean;
@@ -203,6 +204,7 @@ export function setTransform(
{top, left, width, height }: Position,
name ?: string,
autoHeight?: boolean,
+ hidden?: boolean,
isDragging?: boolean,
): Record<string, any> {
// Replace unitless items with px
@@ -211,7 +213,7 @@ export function setTransform(
return /chart/i.test(str);
}
let updatedHeight = 'auto';
- if (isDragging || !autoHeight || (name && containsChart(name))) {
+ if (isDragging || !autoHeight || hidden || (name && containsChart(name))) {
updatedHeight = `${height}px`;
}
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx
index 863ad0050..b65e78483 100644
--- a/client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx
+++ b/client/packages/lowcoder/src/pages/ApplicationV2/HomeLayout.tsx
@@ -205,8 +205,8 @@ const LayoutSwitcher = styled.div`
right: 36px;
top: 6px;
cursor: pointer;
- width: 24px;
- height: 24px;
+ width: 32px;
+ height: 16px;
border-radius: 4px;
z-index: ${Layers.homeLayoutSwitcher};
display: flex;
@@ -359,8 +359,8 @@ export function HomeLayout(props: HomeLayoutProps) {
const resList: HomeRes[] = displayElements
.filter((e) =>
searchValue
- ? e.name.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()) ||
- e.createBy.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase())
+ ? e.name?.toLocaleLowerCase().includes(searchValue?.toLocaleLowerCase()) ||
+ e.createBy?.toLocaleLowerCase().includes(searchValue?.toLocaleLowerCase())
: true
)
.filter((e) => {
@@ -462,7 +462,6 @@ export function HomeLayout(props: HomeLayoutProps) {
</HeaderWrapper>
{showNewUserGuide(user) && <HomepageTourV2 />}
- {/*<HomepageTourV2 />*/}
<HomeView>
<StyleHomeCover>
@@ -532,7 +531,7 @@ export function HomeLayout(props: HomeLayoutProps) {
) : (
<>
<LayoutSwitcher onClick={() => setLayout(layout === "list" ? "card" : "list")}>
- {layout === "list" ? <HomeCardIcon /> : <HomeListIcon />}
+ {layout === "list" ? <HomeCardIcon style={{marginRight: "-11px"}}/> : <HomeListIcon style={{marginTop: "-30px"}}/>}
</LayoutSwitcher>
{mode === "marketplace" && (
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/components/stoplight.styles.css b/client/packages/lowcoder/src/pages/ApplicationV2/components/stoplight.styles.css
deleted file mode 100644
index 25ed0d694..000000000
--- a/client/packages/lowcoder/src/pages/ApplicationV2/components/stoplight.styles.css
+++ /dev/null
@@ -1 +0,0 @@
-.sl-stack--1{gap:4px}.sl-stack--2{gap:8px}.sl-stack--3{gap:12px}.sl-stack--4{gap:16px}.sl-stack--5{gap:20px}.sl-stack--6{gap:24px}.sl-stack--7{gap:28px}.sl-stack--8{gap:32px}.sl-stack--9{gap:36px}.sl-stack--10{gap:20px}.sl-stack--12{gap:48px}.sl-stack--14{gap:56px}.sl-stack--16{gap:64px}.sl-stack--20{gap:80px}.sl-stack--24{gap:96px}.sl-stack--32{gap:128px}.sl-content-center{align-content:center}.sl-content-start{align-content:flex-start}.sl-content-end{align-content:flex-end}.sl-content-between{align-content:space-between}.sl-content-around{align-content:space-around}.sl-content-evenly{align-content:space-evenly}.sl-items-start{align-items:flex-start}.sl-items-end{align-items:flex-end}.sl-items-center{align-items:center}.sl-items-baseline{align-items:baseline}.sl-items-stretch{align-items:stretch}.sl-self-auto{align-self:auto}.sl-self-start{align-self:flex-start}.sl-self-end{align-self:flex-end}.sl-self-center{align-self:center}.sl-self-stretch{align-self:stretch}.sl-bg-transparent{background-color:transparent}.sl-bg-current{background-color:currentColor}.sl-bg-lighten-100{background-color:var(--color-lighten-100)}.sl-bg-darken-100{background-color:var(--color-darken-100)}.sl-bg-primary{background-color:var(--color-primary)}.sl-bg-primary-tint{background-color:var(--color-primary-tint)}.sl-bg-primary-light{background-color:var(--color-primary-light)}.sl-bg-primary-dark{background-color:var(--color-primary-dark)}.sl-bg-primary-darker{background-color:var(--color-primary-darker)}.sl-bg-success{background-color:var(--color-success)}.sl-bg-success-tint{background-color:var(--color-success-tint)}.sl-bg-success-light{background-color:var(--color-success-light)}.sl-bg-success-dark{background-color:var(--color-success-dark)}.sl-bg-success-darker{background-color:var(--color-success-darker)}.sl-bg-warning{background-color:var(--color-warning)}.sl-bg-warning-tint{background-color:var(--color-warning-tint)}.sl-bg-warning-light{background-color:var(--color-warning-light)}.sl-bg-warning-dark{background-color:var(--color-warning-dark)}.sl-bg-warning-darker{background-color:var(--color-warning-darker)}.sl-bg-danger{background-color:var(--color-danger)}.sl-bg-danger-tint{background-color:var(--color-danger-tint)}.sl-bg-danger-light{background-color:var(--color-danger-light)}.sl-bg-danger-dark{background-color:var(--color-danger-dark)}.sl-bg-danger-darker{background-color:var(--color-danger-darker)}.sl-bg-code{background-color:var(--color-code)}.sl-bg-on-code{background-color:var(--color-on-code)}.sl-bg-on-primary{background-color:var(--color-on-primary)}.sl-bg-on-success{background-color:var(--color-on-success)}.sl-bg-on-warning{background-color:var(--color-on-warning)}.sl-bg-on-danger{background-color:var(--color-on-danger)}.sl-bg-canvas-50{background-color:var(--color-canvas-50)}.sl-bg-canvas-100{background-color:var(--color-canvas-50)}.sl-bg-canvas-200{background-color:var(--color-canvas-200)}.sl-bg-canvas-300{background-color:var(--color-canvas-300)}.sl-bg-canvas-400{background-color:var(--color-canvas-400)}.sl-bg-canvas-500{background-color:var(--color-canvas-500)}.sl-bg-canvas-dark{background-color:var(--color-canvas-dark)}.sl-bg-canvas-pure{background-color:var(--color-canvas-pure)}.sl-bg-canvas{background-color:var(--color-canvas)}.sl-bg-canvas-tint{background-color:var(--color-canvas-tint)}.sl-bg-canvas-dialog{background-color:var(--color-canvas-dialog)}.sl-bg-body{background-color:var(--color-text)}.sl-bg-body-muted{background-color:var(--color-text-muted)}.sl-bg-body-light{background-color:var(--color-text-light)}.hover\:sl-bg-transparent:hover{background-color:transparent}.hover\:sl-bg-current:hover{background-color:currentColor}.hover\:sl-bg-lighten-100:hover{background-color:var(--color-lighten-100)}.hover\:sl-bg-darken-100:hover{background-color:var(--color-darken-100)}.hover\:sl-bg-primary:hover{background-color:var(--color-primary)}.hover\:sl-bg-primary-tint:hover{background-color:var(--color-primary-tint)}.hover\:sl-bg-primary-light:hover{background-color:var(--color-primary-light)}.hover\:sl-bg-primary-dark:hover{background-color:var(--color-primary-dark)}.hover\:sl-bg-primary-darker:hover{background-color:var(--color-primary-darker)}.hover\:sl-bg-success:hover{background-color:var(--color-success)}.hover\:sl-bg-success-tint:hover{background-color:var(--color-success-tint)}.hover\:sl-bg-success-light:hover{background-color:var(--color-success-light)}.hover\:sl-bg-success-dark:hover{background-color:var(--color-success-dark)}.hover\:sl-bg-success-darker:hover{background-color:var(--color-success-darker)}.hover\:sl-bg-warning:hover{background-color:var(--color-warning)}.hover\:sl-bg-warning-tint:hover{background-color:var(--color-warning-tint)}.hover\:sl-bg-warning-light:hover{background-color:var(--color-warning-light)}.hover\:sl-bg-warning-dark:hover{background-color:var(--color-warning-dark)}.hover\:sl-bg-warning-darker:hover{background-color:var(--color-warning-darker)}.hover\:sl-bg-danger:hover{background-color:var(--color-danger)}.hover\:sl-bg-danger-tint:hover{background-color:var(--color-danger-tint)}.hover\:sl-bg-danger-light:hover{background-color:var(--color-danger-light)}.hover\:sl-bg-danger-dark:hover{background-color:var(--color-danger-dark)}.hover\:sl-bg-danger-darker:hover{background-color:var(--color-danger-darker)}.hover\:sl-bg-code:hover{background-color:var(--color-code)}.hover\:sl-bg-on-code:hover{background-color:var(--color-on-code)}.hover\:sl-bg-on-primary:hover{background-color:var(--color-on-primary)}.hover\:sl-bg-on-success:hover{background-color:var(--color-on-success)}.hover\:sl-bg-on-warning:hover{background-color:var(--color-on-warning)}.hover\:sl-bg-on-danger:hover{background-color:var(--color-on-danger)}.hover\:sl-bg-canvas-50:hover{background-color:var(--color-canvas-50)}.hover\:sl-bg-canvas-100:hover{background-color:var(--color-canvas-100)}.hover\:sl-bg-canvas-200:hover{background-color:var(--color-canvas-200)}.hover\:sl-bg-canvas-300:hover{background-color:var(--color-canvas-300)}.hover\:sl-bg-canvas-400:hover{background-color:var(--color-canvas-400)}.hover\:sl-bg-canvas-500:hover{background-color:var(--color-canvas-500)}.hover\:sl-bg-canvas-dark:hover{background-color:var(--color-canvas-dark)}.hover\:sl-bg-canvas-pure:hover{background-color:var(--color-canvas-pure)}.hover\:sl-bg-canvas:hover{background-color:var(--color-canvas)}.hover\:sl-bg-canvas-tint:hover{background-color:var(--color-canvas-tint)}.hover\:sl-bg-canvas-dialog:hover{background-color:var(--color-canvas-dialog)}.hover\:sl-bg-body:hover{background-color:var(--color-text)}.hover\:sl-bg-body-muted:hover{background-color:var(--color-text-muted)}.hover\:sl-bg-body-light:hover{background-color:var(--color-text-light)}.focus\:sl-bg-transparent:focus{background-color:transparent}.focus\:sl-bg-current:focus{background-color:currentColor}.focus\:sl-bg-lighten-100:focus{background-color:var(--color-lighten-100)}.focus\:sl-bg-darken-100:focus{background-color:var(--color-darken-100)}.focus\:sl-bg-primary:focus{background-color:var(--color-primary)}.focus\:sl-bg-primary-tint:focus{background-color:var(--color-primary-tint)}.focus\:sl-bg-primary-light:focus{background-color:var(--color-primary-light)}.focus\:sl-bg-primary-dark:focus{background-color:var(--color-primary-dark)}.focus\:sl-bg-primary-darker:focus{background-color:var(--color-primary-darker)}.focus\:sl-bg-success:focus{background-color:var(--color-success)}.focus\:sl-bg-success-tint:focus{background-color:var(--color-success-tint)}.focus\:sl-bg-success-light:focus{background-color:var(--color-success-light)}.focus\:sl-bg-success-dark:focus{background-color:var(--color-success-dark)}.focus\:sl-bg-success-darker:focus{background-color:var(--color-success-darker)}.focus\:sl-bg-warning:focus{background-color:var(--color-warning)}.focus\:sl-bg-warning-tint:focus{background-color:var(--color-warning-tint)}.focus\:sl-bg-warning-light:focus{background-color:var(--color-warning-light)}.focus\:sl-bg-warning-dark:focus{background-color:var(--color-warning-dark)}.focus\:sl-bg-warning-darker:focus{background-color:var(--color-warning-darker)}.focus\:sl-bg-danger:focus{background-color:var(--color-danger)}.focus\:sl-bg-danger-tint:focus{background-color:var(--color-danger-tint)}.focus\:sl-bg-danger-light:focus{background-color:var(--color-danger-light)}.focus\:sl-bg-danger-dark:focus{background-color:var(--color-danger-dark)}.focus\:sl-bg-danger-darker:focus{background-color:var(--color-danger-darker)}.focus\:sl-bg-code:focus{background-color:var(--color-code)}.focus\:sl-bg-on-code:focus{background-color:var(--color-on-code)}.focus\:sl-bg-on-primary:focus{background-color:var(--color-on-primary)}.focus\:sl-bg-on-success:focus{background-color:var(--color-on-success)}.focus\:sl-bg-on-warning:focus{background-color:var(--color-on-warning)}.focus\:sl-bg-on-danger:focus{background-color:var(--color-on-danger)}.focus\:sl-bg-canvas-50:focus{background-color:var(--color-canvas-50)}.focus\:sl-bg-canvas-100:focus{background-color:var(--color-canvas-100)}.focus\:sl-bg-canvas-200:focus{background-color:var(--color-canvas-200)}.focus\:sl-bg-canvas-300:focus{background-color:var(--color-canvas-300)}.focus\:sl-bg-canvas-400:focus{background-color:var(--color-canvas-400)}.focus\:sl-bg-canvas-500:focus{background-color:var(--color-canvas-500)}.focus\:sl-bg-canvas-dark:focus{background-color:var(--color-canvas-dark)}.focus\:sl-bg-canvas-pure:focus{background-color:var(--color-canvas-pure)}.focus\:sl-bg-canvas:focus{background-color:var(--color-canvas)}.focus\:sl-bg-canvas-tint:focus{background-color:var(--color-canvas-tint)}.focus\:sl-bg-canvas-dialog:focus{background-color:var(--color-canvas-dialog)}.focus\:sl-bg-body:focus{background-color:var(--color-text)}.focus\:sl-bg-body-muted:focus{background-color:var(--color-text-muted)}.focus\:sl-bg-body-light:focus{background-color:var(--color-text-light)}.active\:sl-bg-transparent:active{background-color:transparent}.active\:sl-bg-current:active{background-color:currentColor}.active\:sl-bg-lighten-100:active{background-color:var(--color-lighten-100)}.active\:sl-bg-darken-100:active{background-color:var(--color-darken-100)}.active\:sl-bg-primary:active{background-color:var(--color-primary)}.active\:sl-bg-primary-tint:active{background-color:var(--color-primary-tint)}.active\:sl-bg-primary-light:active{background-color:var(--color-primary-light)}.active\:sl-bg-primary-dark:active{background-color:var(--color-primary-dark)}.active\:sl-bg-primary-darker:active{background-color:var(--color-primary-darker)}.active\:sl-bg-success:active{background-color:var(--color-success)}.active\:sl-bg-success-tint:active{background-color:var(--color-success-tint)}.active\:sl-bg-success-light:active{background-color:var(--color-success-light)}.active\:sl-bg-success-dark:active{background-color:var(--color-success-dark)}.active\:sl-bg-success-darker:active{background-color:var(--color-success-darker)}.active\:sl-bg-warning:active{background-color:var(--color-warning)}.active\:sl-bg-warning-tint:active{background-color:var(--color-warning-tint)}.active\:sl-bg-warning-light:active{background-color:var(--color-warning-light)}.active\:sl-bg-warning-dark:active{background-color:var(--color-warning-dark)}.active\:sl-bg-warning-darker:active{background-color:var(--color-warning-darker)}.active\:sl-bg-danger:active{background-color:var(--color-danger)}.active\:sl-bg-danger-tint:active{background-color:var(--color-danger-tint)}.active\:sl-bg-danger-light:active{background-color:var(--color-danger-light)}.active\:sl-bg-danger-dark:active{background-color:var(--color-danger-dark)}.active\:sl-bg-danger-darker:active{background-color:var(--color-danger-darker)}.active\:sl-bg-code:active{background-color:var(--color-code)}.active\:sl-bg-on-code:active{background-color:var(--color-on-code)}.active\:sl-bg-on-primary:active{background-color:var(--color-on-primary)}.active\:sl-bg-on-success:active{background-color:var(--color-on-success)}.active\:sl-bg-on-warning:active{background-color:var(--color-on-warning)}.active\:sl-bg-on-danger:active{background-color:var(--color-on-danger)}.active\:sl-bg-canvas-50:active{background-color:var(--color-canvas-50)}.active\:sl-bg-canvas-100:active{background-color:var(--color-canvas-100)}.active\:sl-bg-canvas-200:active{background-color:var(--color-canvas-200)}.active\:sl-bg-canvas-300:active{background-color:var(--color-canvas-300)}.active\:sl-bg-canvas-400:active{background-color:var(--color-canvas-400)}.active\:sl-bg-canvas-500:active{background-color:var(--color-canvas-500)}.active\:sl-bg-canvas-dark:active{background-color:var(--color-canvas-dark)}.active\:sl-bg-canvas-pure:active{background-color:var(--color-canvas-pure)}.active\:sl-bg-canvas:active{background-color:var(--color-canvas)}.active\:sl-bg-canvas-tint:active{background-color:var(--color-canvas-tint)}.active\:sl-bg-canvas-dialog:active{background-color:var(--color-canvas-dialog)}.active\:sl-bg-body:active{background-color:var(--color-text)}.active\:sl-bg-body-muted:active{background-color:var(--color-text-muted)}.active\:sl-bg-body-light:active{background-color:var(--color-text-light)}.disabled\:sl-bg-transparent:disabled{background-color:transparent}.disabled\:sl-bg-current:disabled{background-color:currentColor}.disabled\:sl-bg-lighten-100:disabled{background-color:var(--color-lighten-100)}.disabled\:sl-bg-darken-100:disabled{background-color:var(--color-darken-100)}.disabled\:sl-bg-primary:disabled{background-color:var(--color-primary)}.disabled\:sl-bg-primary-tint:disabled{background-color:var(--color-primary-tint)}.disabled\:sl-bg-primary-light:disabled{background-color:var(--color-primary-light)}.disabled\:sl-bg-primary-dark:disabled{background-color:var(--color-primary-dark)}.disabled\:sl-bg-primary-darker:disabled{background-color:var(--color-primary-darker)}.disabled\:sl-bg-success:disabled{background-color:var(--color-success)}.disabled\:sl-bg-success-tint:disabled{background-color:var(--color-success-tint)}.disabled\:sl-bg-success-light:disabled{background-color:var(--color-success-light)}.disabled\:sl-bg-success-dark:disabled{background-color:var(--color-success-dark)}.disabled\:sl-bg-success-darker:disabled{background-color:var(--color-success-darker)}.disabled\:sl-bg-warning:disabled{background-color:var(--color-warning)}.disabled\:sl-bg-warning-tint:disabled{background-color:var(--color-warning-tint)}.disabled\:sl-bg-warning-light:disabled{background-color:var(--color-warning-light)}.disabled\:sl-bg-warning-dark:disabled{background-color:var(--color-warning-dark)}.disabled\:sl-bg-warning-darker:disabled{background-color:var(--color-warning-darker)}.disabled\:sl-bg-danger:disabled{background-color:var(--color-danger)}.disabled\:sl-bg-danger-tint:disabled{background-color:var(--color-danger-tint)}.disabled\:sl-bg-danger-light:disabled{background-color:var(--color-danger-light)}.disabled\:sl-bg-danger-dark:disabled{background-color:var(--color-danger-dark)}.disabled\:sl-bg-danger-darker:disabled{background-color:var(--color-danger-darker)}.disabled\:sl-bg-code:disabled{background-color:var(--color-code)}.disabled\:sl-bg-on-code:disabled{background-color:var(--color-on-code)}.disabled\:sl-bg-on-primary:disabled{background-color:var(--color-on-primary)}.disabled\:sl-bg-on-success:disabled{background-color:var(--color-on-success)}.disabled\:sl-bg-on-warning:disabled{background-color:var(--color-on-warning)}.disabled\:sl-bg-on-danger:disabled{background-color:var(--color-on-danger)}.disabled\:sl-bg-canvas-50:disabled{background-color:var(--color-canvas-50)}.disabled\:sl-bg-canvas-100:disabled{background-color:var(--color-canvas-100)}.disabled\:sl-bg-canvas-200:disabled{background-color:var(--color-canvas-200)}.disabled\:sl-bg-canvas-300:disabled{background-color:var(--color-canvas-300)}.disabled\:sl-bg-canvas-400:disabled{background-color:var(--color-canvas-400)}.disabled\:sl-bg-canvas-500:disabled{background-color:var(--color-canvas-500)}.disabled\:sl-bg-canvas-dark:disabled{background-color:var(--color-canvas-dark)}.disabled\:sl-bg-canvas-pure:disabled{background-color:var(--color-canvas-pure)}.disabled\:sl-bg-canvas:disabled{background-color:var(--color-canvas)}.disabled\:sl-bg-canvas-tint:disabled{background-color:var(--color-canvas-tint)}.disabled\:sl-bg-canvas-dialog:disabled{background-color:var(--color-canvas-dialog)}.disabled\:sl-bg-body:disabled{background-color:var(--color-text)}.disabled\:sl-bg-body-muted:disabled{background-color:var(--color-text-muted)}.disabled\:sl-bg-body-light:disabled{background-color:var(--color-text-light)}.sl-bg-none{background-image:none}.sl-bg-gradient-to-t{background-image:linear-gradient(to top,var(--tw-gradient-stops))}.sl-bg-gradient-to-tr{background-image:linear-gradient(to top right,var(--tw-gradient-stops))}.sl-bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.sl-bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.sl-bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.sl-bg-gradient-to-bl{background-image:linear-gradient(to bottom left,var(--tw-gradient-stops))}.sl-bg-gradient-to-l{background-image:linear-gradient(to left,var(--tw-gradient-stops))}.sl-bg-gradient-to-tl{background-image:linear-gradient(to top left,var(--tw-gradient-stops))}.sl-blur-0,.sl-blur-none{--tw-blur:blur(0)}.sl-blur-sm{--tw-blur:blur(4px)}.sl-blur{--tw-blur:blur(8px)}.sl-blur-md{--tw-blur:blur(12px)}.sl-blur-lg{--tw-blur:blur(16px)}.sl-blur-xl{--tw-blur:blur(24px)}.sl-blur-2xl{--tw-blur:blur(40px)}.sl-blur-3xl{--tw-blur:blur(64px)}.sl-border-transparent{border-color:transparent}.sl-border-current{border-color:currentColor}.sl-border-lighten-100{border-color:var(--color-lighten-100)}.sl-border-darken-100{border-color:var(--color-darken-100)}.sl-border-primary{border-color:var(--color-primary)}.sl-border-primary-tint{border-color:var(--color-primary-tint)}.sl-border-primary-light{border-color:var(--color-primary-light)}.sl-border-primary-dark{border-color:var(--color-primary-dark)}.sl-border-primary-darker{border-color:var(--color-primary-darker)}.sl-border-success{border-color:var(--color-success)}.sl-border-success-tint{border-color:var(--color-success-tint)}.sl-border-success-light{border-color:var(--color-success-light)}.sl-border-success-dark{border-color:var(--color-success-dark)}.sl-border-success-darker{border-color:var(--color-success-darker)}.sl-border-warning{border-color:var(--color-warning)}.sl-border-warning-tint{border-color:var(--color-warning-tint)}.sl-border-warning-light{border-color:var(--color-warning-light)}.sl-border-warning-dark{border-color:var(--color-warning-dark)}.sl-border-warning-darker{border-color:var(--color-warning-darker)}.sl-border-danger{border-color:var(--color-danger)}.sl-border-danger-tint{border-color:var(--color-danger-tint)}.sl-border-danger-light{border-color:var(--color-danger-light)}.sl-border-danger-dark{border-color:var(--color-danger-dark)}.sl-border-danger-darker{border-color:var(--color-danger-darker)}.sl-border-code{border-color:var(--color-code)}.sl-border-on-code{border-color:var(--color-on-code)}.sl-border-on-primary{border-color:var(--color-on-primary)}.sl-border-on-success{border-color:var(--color-on-success)}.sl-border-on-warning{border-color:var(--color-on-warning)}.sl-border-on-danger{border-color:var(--color-on-danger)}.sl-border-light{border-color:var(--color-border-light)}.sl-border-dark{border-color:var(--color-border-dark)}.sl-border-button{border-color:var(--color-border-button)}.sl-border-input{border-color:var(--color-border-input)}.sl-border-body{border-color:var(--color-text)}.hover\:sl-border-transparent:hover{border-color:transparent}.hover\:sl-border-current:hover{border-color:currentColor}.hover\:sl-border-lighten-100:hover{border-color:var(--color-lighten-100)}.hover\:sl-border-darken-100:hover{border-color:var(--color-darken-100)}.hover\:sl-border-primary:hover{border-color:var(--color-primary)}.hover\:sl-border-primary-tint:hover{border-color:var(--color-primary-tint)}.hover\:sl-border-primary-light:hover{border-color:var(--color-primary-light)}.hover\:sl-border-primary-dark:hover{border-color:var(--color-primary-dark)}.hover\:sl-border-primary-darker:hover{border-color:var(--color-primary-darker)}.hover\:sl-border-success:hover{border-color:var(--color-success)}.hover\:sl-border-success-tint:hover{border-color:var(--color-success-tint)}.hover\:sl-border-success-light:hover{border-color:var(--color-success-light)}.hover\:sl-border-success-dark:hover{border-color:var(--color-success-dark)}.hover\:sl-border-success-darker:hover{border-color:var(--color-success-darker)}.hover\:sl-border-warning:hover{border-color:var(--color-warning)}.hover\:sl-border-warning-tint:hover{border-color:var(--color-warning-tint)}.hover\:sl-border-warning-light:hover{border-color:var(--color-warning-light)}.hover\:sl-border-warning-dark:hover{border-color:var(--color-warning-dark)}.hover\:sl-border-warning-darker:hover{border-color:var(--color-warning-darker)}.hover\:sl-border-danger:hover{border-color:var(--color-danger)}.hover\:sl-border-danger-tint:hover{border-color:var(--color-danger-tint)}.hover\:sl-border-danger-light:hover{border-color:var(--color-danger-light)}.hover\:sl-border-danger-dark:hover{border-color:var(--color-danger-dark)}.hover\:sl-border-danger-darker:hover{border-color:var(--color-danger-darker)}.hover\:sl-border-code:hover{border-color:var(--color-code)}.hover\:sl-border-on-code:hover{border-color:var(--color-on-code)}.hover\:sl-border-on-primary:hover{border-color:var(--color-on-primary)}.hover\:sl-border-on-success:hover{border-color:var(--color-on-success)}.hover\:sl-border-on-warning:hover{border-color:var(--color-on-warning)}.hover\:sl-border-on-danger:hover{border-color:var(--color-on-danger)}.hover\:sl-border-light:hover{border-color:var(--color-border-light)}.hover\:sl-border-dark:hover{border-color:var(--color-border-dark)}.hover\:sl-border-button:hover{border-color:var(--color-border-button)}.hover\:sl-border-input:hover{border-color:var(--color-border-input)}.hover\:sl-border-body:hover{border-color:var(--color-text)}.focus\:sl-border-transparent:focus{border-color:transparent}.focus\:sl-border-current:focus{border-color:currentColor}.focus\:sl-border-lighten-100:focus{border-color:var(--color-lighten-100)}.focus\:sl-border-darken-100:focus{border-color:var(--color-darken-100)}.focus\:sl-border-primary:focus{border-color:var(--color-primary)}.focus\:sl-border-primary-tint:focus{border-color:var(--color-primary-tint)}.focus\:sl-border-primary-light:focus{border-color:var(--color-primary-light)}.focus\:sl-border-primary-dark:focus{border-color:var(--color-primary-dark)}.focus\:sl-border-primary-darker:focus{border-color:var(--color-primary-darker)}.focus\:sl-border-success:focus{border-color:var(--color-success)}.focus\:sl-border-success-tint:focus{border-color:var(--color-success-tint)}.focus\:sl-border-success-light:focus{border-color:var(--color-success-light)}.focus\:sl-border-success-dark:focus{border-color:var(--color-success-dark)}.focus\:sl-border-success-darker:focus{border-color:var(--color-success-darker)}.focus\:sl-border-warning:focus{border-color:var(--color-warning)}.focus\:sl-border-warning-tint:focus{border-color:var(--color-warning-tint)}.focus\:sl-border-warning-light:focus{border-color:var(--color-warning-light)}.focus\:sl-border-warning-dark:focus{border-color:var(--color-warning-dark)}.focus\:sl-border-warning-darker:focus{border-color:var(--color-warning-darker)}.focus\:sl-border-danger:focus{border-color:var(--color-danger)}.focus\:sl-border-danger-tint:focus{border-color:var(--color-danger-tint)}.focus\:sl-border-danger-light:focus{border-color:var(--color-danger-light)}.focus\:sl-border-danger-dark:focus{border-color:var(--color-danger-dark)}.focus\:sl-border-danger-darker:focus{border-color:var(--color-danger-darker)}.focus\:sl-border-code:focus{border-color:var(--color-code)}.focus\:sl-border-on-code:focus{border-color:var(--color-on-code)}.focus\:sl-border-on-primary:focus{border-color:var(--color-on-primary)}.focus\:sl-border-on-success:focus{border-color:var(--color-on-success)}.focus\:sl-border-on-warning:focus{border-color:var(--color-on-warning)}.focus\:sl-border-on-danger:focus{border-color:var(--color-on-danger)}.focus\:sl-border-light:focus{border-color:var(--color-border-light)}.focus\:sl-border-dark:focus{border-color:var(--color-border-dark)}.focus\:sl-border-button:focus{border-color:var(--color-border-button)}.focus\:sl-border-input:focus{border-color:var(--color-border-input)}.focus\:sl-border-body:focus{border-color:var(--color-text)}.focus-within\:sl-border-transparent:focus-within{border-color:transparent}.focus-within\:sl-border-current:focus-within{border-color:currentColor}.focus-within\:sl-border-lighten-100:focus-within{border-color:var(--color-lighten-100)}.focus-within\:sl-border-darken-100:focus-within{border-color:var(--color-darken-100)}.focus-within\:sl-border-primary:focus-within{border-color:var(--color-primary)}.focus-within\:sl-border-primary-tint:focus-within{border-color:var(--color-primary-tint)}.focus-within\:sl-border-primary-light:focus-within{border-color:var(--color-primary-light)}.focus-within\:sl-border-primary-dark:focus-within{border-color:var(--color-primary-dark)}.focus-within\:sl-border-primary-darker:focus-within{border-color:var(--color-primary-darker)}.focus-within\:sl-border-success:focus-within{border-color:var(--color-success)}.focus-within\:sl-border-success-tint:focus-within{border-color:var(--color-success-tint)}.focus-within\:sl-border-success-light:focus-within{border-color:var(--color-success-light)}.focus-within\:sl-border-success-dark:focus-within{border-color:var(--color-success-dark)}.focus-within\:sl-border-success-darker:focus-within{border-color:var(--color-success-darker)}.focus-within\:sl-border-warning:focus-within{border-color:var(--color-warning)}.focus-within\:sl-border-warning-tint:focus-within{border-color:var(--color-warning-tint)}.focus-within\:sl-border-warning-light:focus-within{border-color:var(--color-warning-light)}.focus-within\:sl-border-warning-dark:focus-within{border-color:var(--color-warning-dark)}.focus-within\:sl-border-warning-darker:focus-within{border-color:var(--color-warning-darker)}.focus-within\:sl-border-danger:focus-within{border-color:var(--color-danger)}.focus-within\:sl-border-danger-tint:focus-within{border-color:var(--color-danger-tint)}.focus-within\:sl-border-danger-light:focus-within{border-color:var(--color-danger-light)}.focus-within\:sl-border-danger-dark:focus-within{border-color:var(--color-danger-dark)}.focus-within\:sl-border-danger-darker:focus-within{border-color:var(--color-danger-darker)}.focus-within\:sl-border-code:focus-within{border-color:var(--color-code)}.focus-within\:sl-border-on-code:focus-within{border-color:var(--color-on-code)}.focus-within\:sl-border-on-primary:focus-within{border-color:var(--color-on-primary)}.focus-within\:sl-border-on-success:focus-within{border-color:var(--color-on-success)}.focus-within\:sl-border-on-warning:focus-within{border-color:var(--color-on-warning)}.focus-within\:sl-border-on-danger:focus-within{border-color:var(--color-on-danger)}.focus-within\:sl-border-light:focus-within{border-color:var(--color-border-light)}.focus-within\:sl-border-dark:focus-within{border-color:var(--color-border-dark)}.focus-within\:sl-border-button:focus-within{border-color:var(--color-border-button)}.focus-within\:sl-border-input:focus-within{border-color:var(--color-border-input)}.focus-within\:sl-border-body:focus-within{border-color:var(--color-text)}.active\:sl-border-transparent:active{border-color:transparent}.active\:sl-border-current:active{border-color:currentColor}.active\:sl-border-lighten-100:active{border-color:var(--color-lighten-100)}.active\:sl-border-darken-100:active{border-color:var(--color-darken-100)}.active\:sl-border-primary:active{border-color:var(--color-primary)}.active\:sl-border-primary-tint:active{border-color:var(--color-primary-tint)}.active\:sl-border-primary-light:active{border-color:var(--color-primary-light)}.active\:sl-border-primary-dark:active{border-color:var(--color-primary-dark)}.active\:sl-border-primary-darker:active{border-color:var(--color-primary-darker)}.active\:sl-border-success:active{border-color:var(--color-success)}.active\:sl-border-success-tint:active{border-color:var(--color-success-tint)}.active\:sl-border-success-light:active{border-color:var(--color-success-light)}.active\:sl-border-success-dark:active{border-color:var(--color-success-dark)}.active\:sl-border-success-darker:active{border-color:var(--color-success-darker)}.active\:sl-border-warning:active{border-color:var(--color-warning)}.active\:sl-border-warning-tint:active{border-color:var(--color-warning-tint)}.active\:sl-border-warning-light:active{border-color:var(--color-warning-light)}.active\:sl-border-warning-dark:active{border-color:var(--color-warning-dark)}.active\:sl-border-warning-darker:active{border-color:var(--color-warning-darker)}.active\:sl-border-danger:active{border-color:var(--color-danger)}.active\:sl-border-danger-tint:active{border-color:var(--color-danger-tint)}.active\:sl-border-danger-light:active{border-color:var(--color-danger-light)}.active\:sl-border-danger-dark:active{border-color:var(--color-danger-dark)}.active\:sl-border-danger-darker:active{border-color:var(--color-danger-darker)}.active\:sl-border-code:active{border-color:var(--color-code)}.active\:sl-border-on-code:active{border-color:var(--color-on-code)}.active\:sl-border-on-primary:active{border-color:var(--color-on-primary)}.active\:sl-border-on-success:active{border-color:var(--color-on-success)}.active\:sl-border-on-warning:active{border-color:var(--color-on-warning)}.active\:sl-border-on-danger:active{border-color:var(--color-on-danger)}.active\:sl-border-light:active{border-color:var(--color-border-light)}.active\:sl-border-dark:active{border-color:var(--color-border-dark)}.active\:sl-border-button:active{border-color:var(--color-border-button)}.active\:sl-border-input:active{border-color:var(--color-border-input)}.active\:sl-border-body:active{border-color:var(--color-text)}.sl-rounded-none{border-radius:0}.sl-rounded-sm{border-radius:1px}.sl-rounded{border-radius:2px}.sl-rounded-lg{border-radius:5px}.sl-rounded-xl{border-radius:7px}.sl-rounded-full{border-radius:9999px}.sl-rounded-t-none{border-top-left-radius:0;border-top-right-radius:0}.sl-rounded-r-none{border-bottom-right-radius:0;border-top-right-radius:0}.sl-rounded-b-none{border-bottom-left-radius:0;border-bottom-right-radius:0}.sl-rounded-l-none{border-bottom-left-radius:0;border-top-left-radius:0}.sl-rounded-t-sm{border-top-left-radius:1px;border-top-right-radius:1px}.sl-rounded-r-sm{border-bottom-right-radius:1px;border-top-right-radius:1px}.sl-rounded-b-sm{border-bottom-left-radius:1px;border-bottom-right-radius:1px}.sl-rounded-l-sm{border-bottom-left-radius:1px;border-top-left-radius:1px}.sl-rounded-t{border-top-left-radius:2px}.sl-rounded-r,.sl-rounded-t{border-top-right-radius:2px}.sl-rounded-b,.sl-rounded-r{border-bottom-right-radius:2px}.sl-rounded-b,.sl-rounded-l{border-bottom-left-radius:2px}.sl-rounded-l{border-top-left-radius:2px}.sl-rounded-t-lg{border-top-left-radius:5px;border-top-right-radius:5px}.sl-rounded-r-lg{border-bottom-right-radius:5px;border-top-right-radius:5px}.sl-rounded-b-lg{border-bottom-left-radius:5px;border-bottom-right-radius:5px}.sl-rounded-l-lg{border-bottom-left-radius:5px;border-top-left-radius:5px}.sl-rounded-t-xl{border-top-left-radius:7px;border-top-right-radius:7px}.sl-rounded-r-xl{border-bottom-right-radius:7px;border-top-right-radius:7px}.sl-rounded-b-xl{border-bottom-left-radius:7px;border-bottom-right-radius:7px}.sl-rounded-l-xl{border-bottom-left-radius:7px;border-top-left-radius:7px}.sl-rounded-t-full{border-top-left-radius:9999px;border-top-right-radius:9999px}.sl-rounded-r-full{border-bottom-right-radius:9999px;border-top-right-radius:9999px}.sl-rounded-b-full{border-bottom-left-radius:9999px;border-bottom-right-radius:9999px}.sl-rounded-l-full{border-bottom-left-radius:9999px;border-top-left-radius:9999px}.sl-rounded-tl-none{border-top-left-radius:0}.sl-rounded-tr-none{border-top-right-radius:0}.sl-rounded-br-none{border-bottom-right-radius:0}.sl-rounded-bl-none{border-bottom-left-radius:0}.sl-rounded-tl-sm{border-top-left-radius:1px}.sl-rounded-tr-sm{border-top-right-radius:1px}.sl-rounded-br-sm{border-bottom-right-radius:1px}.sl-rounded-bl-sm{border-bottom-left-radius:1px}.sl-rounded-tl{border-top-left-radius:2px}.sl-rounded-tr{border-top-right-radius:2px}.sl-rounded-br{border-bottom-right-radius:2px}.sl-rounded-bl{border-bottom-left-radius:2px}.sl-rounded-tl-lg{border-top-left-radius:5px}.sl-rounded-tr-lg{border-top-right-radius:5px}.sl-rounded-br-lg{border-bottom-right-radius:5px}.sl-rounded-bl-lg{border-bottom-left-radius:5px}.sl-rounded-tl-xl{border-top-left-radius:7px}.sl-rounded-tr-xl{border-top-right-radius:7px}.sl-rounded-br-xl{border-bottom-right-radius:7px}.sl-rounded-bl-xl{border-bottom-left-radius:7px}.sl-rounded-tl-full{border-top-left-radius:9999px}.sl-rounded-tr-full{border-top-right-radius:9999px}.sl-rounded-br-full{border-bottom-right-radius:9999px}.sl-rounded-bl-full{border-bottom-left-radius:9999px}.sl-border-solid{border-style:solid}.sl-border-dashed{border-style:dashed}.sl-border-dotted{border-style:dotted}.sl-border-double{border-style:double}.sl-border-none{border-style:none}.sl-border-0{border-width:0}.sl-border-2{border-width:2px}.sl-border-4{border-width:4px}.sl-border-8{border-width:8px}.sl-border{border-width:1px}.sl-border-t-0{border-top-width:0}.sl-border-r-0{border-right-width:0}.sl-border-b-0{border-bottom-width:0}.sl-border-l-0{border-left-width:0}.sl-border-t-2{border-top-width:2px}.sl-border-r-2{border-right-width:2px}.sl-border-b-2{border-bottom-width:2px}.sl-border-l-2{border-left-width:2px}.sl-border-t-4{border-top-width:4px}.sl-border-r-4{border-right-width:4px}.sl-border-b-4{border-bottom-width:4px}.sl-border-l-4{border-left-width:4px}.sl-border-t-8{border-top-width:8px}.sl-border-r-8{border-right-width:8px}.sl-border-b-8{border-bottom-width:8px}.sl-border-l-8{border-left-width:8px}.sl-border-t{border-top-width:1px}.sl-border-r{border-right-width:1px}.sl-border-b{border-bottom-width:1px}.sl-border-l{border-left-width:1px}*{--tw-shadow:0 0 #0000}.sl-shadow-sm{--tw-shadow:var(--shadow-sm);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.sl-shadow,.sl-shadow-md{--tw-shadow:var(--shadow-md)}.sl-shadow,.sl-shadow-lg,.sl-shadow-md{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.sl-shadow-lg{--tw-shadow:var(--shadow-lg)}.sl-shadow-xl{--tw-shadow:var(--shadow-xl)}.sl-shadow-2xl,.sl-shadow-xl{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.sl-shadow-2xl{--tw-shadow:var(--shadow-2xl)}.hover\:sl-shadow-sm:hover{--tw-shadow:var(--shadow-sm);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:sl-shadow-md:hover,.hover\:sl-shadow:hover{--tw-shadow:var(--shadow-md)}.hover\:sl-shadow-lg:hover,.hover\:sl-shadow-md:hover,.hover\:sl-shadow:hover{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:sl-shadow-lg:hover{--tw-shadow:var(--shadow-lg)}.hover\:sl-shadow-xl:hover{--tw-shadow:var(--shadow-xl)}.hover\:sl-shadow-2xl:hover,.hover\:sl-shadow-xl:hover{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:sl-shadow-2xl:hover{--tw-shadow:var(--shadow-2xl)}.focus\:sl-shadow-sm:focus{--tw-shadow:var(--shadow-sm);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.focus\:sl-shadow-md:focus,.focus\:sl-shadow:focus{--tw-shadow:var(--shadow-md)}.focus\:sl-shadow-lg:focus,.focus\:sl-shadow-md:focus,.focus\:sl-shadow:focus{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.focus\:sl-shadow-lg:focus{--tw-shadow:var(--shadow-lg)}.focus\:sl-shadow-xl:focus{--tw-shadow:var(--shadow-xl)}.focus\:sl-shadow-2xl:focus,.focus\:sl-shadow-xl:focus{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.focus\:sl-shadow-2xl:focus{--tw-shadow:var(--shadow-2xl)}.sl-box-border{box-sizing:border-box}.sl-box-content{box-sizing:content-box}.sl-cursor-auto{cursor:auto}.sl-cursor{cursor:default}.sl-cursor-pointer{cursor:pointer}.sl-cursor-wait{cursor:wait}.sl-cursor-text{cursor:text}.sl-cursor-move{cursor:move}.sl-cursor-not-allowed{cursor:not-allowed}.sl-cursor-zoom-in{cursor:zoom-in}.sl-cursor-zoom-out{cursor:zoom-out}.sl-block{display:block}.sl-inline-block{display:inline-block}.sl-inline{display:inline}.sl-flex{display:flex}.sl-inline-flex{display:inline-flex}.sl-table{display:table}.sl-inline-table{display:inline-table}.sl-table-caption{display:table-caption}.sl-table-cell{display:table-cell}.sl-table-column{display:table-column}.sl-table-column-group{display:table-column-group}.sl-table-footer-group{display:table-footer-group}.sl-table-header-group{display:table-header-group}.sl-table-row-group{display:table-row-group}.sl-table-row{display:table-row}.sl-flow-root{display:flow-root}.sl-grid{display:grid}.sl-inline-grid{display:inline-grid}.sl-contents{display:contents}.sl-list-item{display:list-item}.sl-hidden{display:none}.sl-drop-shadow{--tw-drop-shadow:drop-shadow(var(--drop-shadow-default1)) drop-shadow(var(--drop-shadow-default2))}.sl-filter{--tw-blur:var(--tw-empty,/*!*/ /*!*/);--tw-brightness:var(--tw-empty,/*!*/ /*!*/);--tw-contrast:var(--tw-empty,/*!*/ /*!*/);--tw-grayscale:var(--tw-empty,/*!*/ /*!*/);--tw-hue-rotate:var(--tw-empty,/*!*/ /*!*/);--tw-invert:var(--tw-empty,/*!*/ /*!*/);--tw-saturate:var(--tw-empty,/*!*/ /*!*/);--tw-sepia:var(--tw-empty,/*!*/ /*!*/);--tw-drop-shadow:var(--tw-empty,/*!*/ /*!*/);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.sl-filter-none{filter:none}.sl-flex-1{flex:1 1}.sl-flex-auto{flex:1 1 auto}.sl-flex-initial{flex:0 1 auto}.sl-flex-none{flex:none}.sl-flex-row{flex-direction:row}.sl-flex-row-reverse{flex-direction:row-reverse}.sl-flex-col{flex-direction:column}.sl-flex-col-reverse{flex-direction:column-reverse}.sl-flex-grow-0{flex-grow:0}.sl-flex-grow{flex-grow:1}.sl-flex-shrink-0{flex-shrink:0}.sl-flex-shrink{flex-shrink:1}.sl-flex-wrap{flex-wrap:wrap}.sl-flex-wrap-reverse{flex-wrap:wrap-reverse}.sl-flex-nowrap{flex-wrap:nowrap}.sl-font-sans,.sl-font-ui{font-family:var(--font-ui)}.sl-font-prose{font-family:var(--font-prose)}.sl-font-mono{font-family:var(--font-mono)}.sl-text-2xs{font-size:9px}.sl-text-xs{font-size:10px}.sl-text-sm{font-size:11px}.sl-text-base{font-size:12px}.sl-text-lg{font-size:14px}.sl-text-xl{font-size:16px}.sl-text-2xl{font-size:20px}.sl-text-3xl{font-size:24px}.sl-text-4xl{font-size:28px}.sl-text-5xl{font-size:36px}.sl-text-6xl{font-size:44px}.sl-text-paragraph-leading{font-size:var(--fs-paragraph-leading)}.sl-text-paragraph{font-size:var(--fs-paragraph)}.sl-text-paragraph-small{font-size:var(--fs-paragraph-small)}.sl-text-paragraph-tiny{font-size:var(--fs-paragraph-tiny)}.sl-antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sl-subpixel-antialiased{-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}.sl-italic{font-style:italic}.sl-not-italic{font-style:normal}.sl-font-light{font-weight:300}.sl-font-normal{font-weight:400}.sl-font-medium{font-weight:500}.sl-font-semibold{font-weight:600}.sl-font-bold{font-weight:700}.sl-h-0{height:0}.sl-h-1{height:4px}.sl-h-2{height:8px}.sl-h-3{height:12px}.sl-h-4{height:16px}.sl-h-5{height:20px}.sl-h-6{height:24px}.sl-h-7{height:28px}.sl-h-8{height:32px}.sl-h-9{height:36px}.sl-h-10{height:40px}.sl-h-11{height:44px}.sl-h-12{height:48px}.sl-h-14{height:56px}.sl-h-16{height:64px}.sl-h-20{height:80px}.sl-h-24{height:96px}.sl-h-28{height:112px}.sl-h-32{height:128px}.sl-h-36{height:144px}.sl-h-40{height:160px}.sl-h-44{height:176px}.sl-h-48{height:192px}.sl-h-52{height:208px}.sl-h-56{height:224px}.sl-h-60{height:240px}.sl-h-64{height:256px}.sl-h-72{height:288px}.sl-h-80{height:320px}.sl-h-96{height:384px}.sl-h-auto{height:auto}.sl-h-px{height:1px}.sl-h-0\.5{height:2px}.sl-h-1\.5{height:6px}.sl-h-2\.5{height:10px}.sl-h-3\.5{height:14px}.sl-h-4\.5{height:18px}.sl-h-xs{height:20px}.sl-h-sm{height:24px}.sl-h-md{height:32px}.sl-h-lg{height:36px}.sl-h-xl{height:44px}.sl-h-2xl{height:52px}.sl-h-3xl{height:60px}.sl-h-full{height:100%}.sl-h-screen{height:100vh}.sl-inset-0{bottom:0;left:0;right:0;top:0}.sl-inset-1{bottom:4px;left:4px;right:4px;top:4px}.sl-inset-2{bottom:8px;left:8px;right:8px;top:8px}.sl-inset-3{bottom:12px;left:12px;right:12px;top:12px}.sl-inset-4{bottom:16px;left:16px;right:16px;top:16px}.sl-inset-5{bottom:20px;left:20px;right:20px;top:20px}.sl-inset-6{bottom:24px;left:24px;right:24px;top:24px}.sl-inset-7{bottom:28px;left:28px;right:28px;top:28px}.sl-inset-8{bottom:32px;left:32px;right:32px;top:32px}.sl-inset-9{bottom:36px;left:36px;right:36px;top:36px}.sl-inset-10{bottom:40px;left:40px;right:40px;top:40px}.sl-inset-11{bottom:44px;left:44px;right:44px;top:44px}.sl-inset-12{bottom:48px;left:48px;right:48px;top:48px}.sl-inset-14{bottom:56px;left:56px;right:56px;top:56px}.sl-inset-16{bottom:64px;left:64px;right:64px;top:64px}.sl-inset-20{bottom:80px;left:80px;right:80px;top:80px}.sl-inset-24{bottom:96px;left:96px;right:96px;top:96px}.sl-inset-28{bottom:112px;left:112px;right:112px;top:112px}.sl-inset-32{bottom:128px;left:128px;right:128px;top:128px}.sl-inset-36{bottom:144px;left:144px;right:144px;top:144px}.sl-inset-40{bottom:160px;left:160px;right:160px;top:160px}.sl-inset-44{bottom:176px;left:176px;right:176px;top:176px}.sl-inset-48{bottom:192px;left:192px;right:192px;top:192px}.sl-inset-52{bottom:208px;left:208px;right:208px;top:208px}.sl-inset-56{bottom:224px;left:224px;right:224px;top:224px}.sl-inset-60{bottom:240px;left:240px;right:240px;top:240px}.sl-inset-64{bottom:256px;left:256px;right:256px;top:256px}.sl-inset-72{bottom:288px;left:288px;right:288px;top:288px}.sl-inset-80{bottom:320px;left:320px;right:320px;top:320px}.sl-inset-96{bottom:384px;left:384px;right:384px;top:384px}.sl-inset-auto{bottom:auto;left:auto;right:auto;top:auto}.sl-inset-px{bottom:1px;left:1px;right:1px;top:1px}.sl-inset-0\.5{bottom:2px;left:2px;right:2px;top:2px}.sl-inset-1\.5{bottom:6px;left:6px;right:6px;top:6px}.sl-inset-2\.5{bottom:10px;left:10px;right:10px;top:10px}.sl-inset-3\.5{bottom:14px;left:14px;right:14px;top:14px}.sl-inset-4\.5{bottom:18px;left:18px;right:18px;top:18px}.sl--inset-0{bottom:0;left:0;right:0;top:0}.sl--inset-1{bottom:-4px;left:-4px;right:-4px;top:-4px}.sl--inset-2{bottom:-8px;left:-8px;right:-8px;top:-8px}.sl--inset-3{bottom:-12px;left:-12px;right:-12px;top:-12px}.sl--inset-4{bottom:-16px;left:-16px;right:-16px;top:-16px}.sl--inset-5{bottom:-20px;left:-20px;right:-20px;top:-20px}.sl--inset-6{bottom:-24px;left:-24px;right:-24px;top:-24px}.sl--inset-7{bottom:-28px;left:-28px;right:-28px;top:-28px}.sl--inset-8{bottom:-32px;left:-32px;right:-32px;top:-32px}.sl--inset-9{bottom:-36px;left:-36px;right:-36px;top:-36px}.sl--inset-10{bottom:-40px;left:-40px;right:-40px;top:-40px}.sl--inset-11{bottom:-44px;left:-44px;right:-44px;top:-44px}.sl--inset-12{bottom:-48px;left:-48px;right:-48px;top:-48px}.sl--inset-14{bottom:-56px;left:-56px;right:-56px;top:-56px}.sl--inset-16{bottom:-64px;left:-64px;right:-64px;top:-64px}.sl--inset-20{bottom:-80px;left:-80px;right:-80px;top:-80px}.sl--inset-24{bottom:-96px;left:-96px;right:-96px;top:-96px}.sl--inset-28{bottom:-112px;left:-112px;right:-112px;top:-112px}.sl--inset-32{bottom:-128px;left:-128px;right:-128px;top:-128px}.sl--inset-36{bottom:-144px;left:-144px;right:-144px;top:-144px}.sl--inset-40{bottom:-160px;left:-160px;right:-160px;top:-160px}.sl--inset-44{bottom:-176px;left:-176px;right:-176px;top:-176px}.sl--inset-48{bottom:-192px;left:-192px;right:-192px;top:-192px}.sl--inset-52{bottom:-208px;left:-208px;right:-208px;top:-208px}.sl--inset-56{bottom:-224px;left:-224px;right:-224px;top:-224px}.sl--inset-60{bottom:-240px;left:-240px;right:-240px;top:-240px}.sl--inset-64{bottom:-256px;left:-256px;right:-256px;top:-256px}.sl--inset-72{bottom:-288px;left:-288px;right:-288px;top:-288px}.sl--inset-80{bottom:-320px;left:-320px;right:-320px;top:-320px}.sl--inset-96{bottom:-384px;left:-384px;right:-384px;top:-384px}.sl--inset-px{bottom:-1px;left:-1px;right:-1px;top:-1px}.sl--inset-0\.5{bottom:-2px;left:-2px;right:-2px;top:-2px}.sl--inset-1\.5{bottom:-6px;left:-6px;right:-6px;top:-6px}.sl--inset-2\.5{bottom:-10px;left:-10px;right:-10px;top:-10px}.sl--inset-3\.5{bottom:-14px;left:-14px;right:-14px;top:-14px}.sl--inset-4\.5{bottom:-18px;left:-18px;right:-18px;top:-18px}.sl-inset-y-0{bottom:0;top:0}.sl-inset-x-0{left:0;right:0}.sl-inset-y-1{bottom:4px;top:4px}.sl-inset-x-1{left:4px;right:4px}.sl-inset-y-2{bottom:8px;top:8px}.sl-inset-x-2{left:8px;right:8px}.sl-inset-y-3{bottom:12px;top:12px}.sl-inset-x-3{left:12px;right:12px}.sl-inset-y-4{bottom:16px;top:16px}.sl-inset-x-4{left:16px;right:16px}.sl-inset-y-5{bottom:20px;top:20px}.sl-inset-x-5{left:20px;right:20px}.sl-inset-y-6{bottom:24px;top:24px}.sl-inset-x-6{left:24px;right:24px}.sl-inset-y-7{bottom:28px;top:28px}.sl-inset-x-7{left:28px;right:28px}.sl-inset-y-8{bottom:32px;top:32px}.sl-inset-x-8{left:32px;right:32px}.sl-inset-y-9{bottom:36px;top:36px}.sl-inset-x-9{left:36px;right:36px}.sl-inset-y-10{bottom:40px;top:40px}.sl-inset-x-10{left:40px;right:40px}.sl-inset-y-11{bottom:44px;top:44px}.sl-inset-x-11{left:44px;right:44px}.sl-inset-y-12{bottom:48px;top:48px}.sl-inset-x-12{left:48px;right:48px}.sl-inset-y-14{bottom:56px;top:56px}.sl-inset-x-14{left:56px;right:56px}.sl-inset-y-16{bottom:64px;top:64px}.sl-inset-x-16{left:64px;right:64px}.sl-inset-y-20{bottom:80px;top:80px}.sl-inset-x-20{left:80px;right:80px}.sl-inset-y-24{bottom:96px;top:96px}.sl-inset-x-24{left:96px;right:96px}.sl-inset-y-28{bottom:112px;top:112px}.sl-inset-x-28{left:112px;right:112px}.sl-inset-y-32{bottom:128px;top:128px}.sl-inset-x-32{left:128px;right:128px}.sl-inset-y-36{bottom:144px;top:144px}.sl-inset-x-36{left:144px;right:144px}.sl-inset-y-40{bottom:160px;top:160px}.sl-inset-x-40{left:160px;right:160px}.sl-inset-y-44{bottom:176px;top:176px}.sl-inset-x-44{left:176px;right:176px}.sl-inset-y-48{bottom:192px;top:192px}.sl-inset-x-48{left:192px;right:192px}.sl-inset-y-52{bottom:208px;top:208px}.sl-inset-x-52{left:208px;right:208px}.sl-inset-y-56{bottom:224px;top:224px}.sl-inset-x-56{left:224px;right:224px}.sl-inset-y-60{bottom:240px;top:240px}.sl-inset-x-60{left:240px;right:240px}.sl-inset-y-64{bottom:256px;top:256px}.sl-inset-x-64{left:256px;right:256px}.sl-inset-y-72{bottom:288px;top:288px}.sl-inset-x-72{left:288px;right:288px}.sl-inset-y-80{bottom:320px;top:320px}.sl-inset-x-80{left:320px;right:320px}.sl-inset-y-96{bottom:384px;top:384px}.sl-inset-x-96{left:384px;right:384px}.sl-inset-y-auto{bottom:auto;top:auto}.sl-inset-x-auto{left:auto;right:auto}.sl-inset-y-px{bottom:1px;top:1px}.sl-inset-x-px{left:1px;right:1px}.sl-inset-y-0\.5{bottom:2px;top:2px}.sl-inset-x-0\.5{left:2px;right:2px}.sl-inset-y-1\.5{bottom:6px;top:6px}.sl-inset-x-1\.5{left:6px;right:6px}.sl-inset-y-2\.5{bottom:10px;top:10px}.sl-inset-x-2\.5{left:10px;right:10px}.sl-inset-y-3\.5{bottom:14px;top:14px}.sl-inset-x-3\.5{left:14px;right:14px}.sl-inset-y-4\.5{bottom:18px;top:18px}.sl-inset-x-4\.5{left:18px;right:18px}.sl--inset-y-0{bottom:0;top:0}.sl--inset-x-0{left:0;right:0}.sl--inset-y-1{bottom:-4px;top:-4px}.sl--inset-x-1{left:-4px;right:-4px}.sl--inset-y-2{bottom:-8px;top:-8px}.sl--inset-x-2{left:-8px;right:-8px}.sl--inset-y-3{bottom:-12px;top:-12px}.sl--inset-x-3{left:-12px;right:-12px}.sl--inset-y-4{bottom:-16px;top:-16px}.sl--inset-x-4{left:-16px;right:-16px}.sl--inset-y-5{bottom:-20px;top:-20px}.sl--inset-x-5{left:-20px;right:-20px}.sl--inset-y-6{bottom:-24px;top:-24px}.sl--inset-x-6{left:-24px;right:-24px}.sl--inset-y-7{bottom:-28px;top:-28px}.sl--inset-x-7{left:-28px;right:-28px}.sl--inset-y-8{bottom:-32px;top:-32px}.sl--inset-x-8{left:-32px;right:-32px}.sl--inset-y-9{bottom:-36px;top:-36px}.sl--inset-x-9{left:-36px;right:-36px}.sl--inset-y-10{bottom:-40px;top:-40px}.sl--inset-x-10{left:-40px;right:-40px}.sl--inset-y-11{bottom:-44px;top:-44px}.sl--inset-x-11{left:-44px;right:-44px}.sl--inset-y-12{bottom:-48px;top:-48px}.sl--inset-x-12{left:-48px;right:-48px}.sl--inset-y-14{bottom:-56px;top:-56px}.sl--inset-x-14{left:-56px;right:-56px}.sl--inset-y-16{bottom:-64px;top:-64px}.sl--inset-x-16{left:-64px;right:-64px}.sl--inset-y-20{bottom:-80px;top:-80px}.sl--inset-x-20{left:-80px;right:-80px}.sl--inset-y-24{bottom:-96px;top:-96px}.sl--inset-x-24{left:-96px;right:-96px}.sl--inset-y-28{bottom:-112px;top:-112px}.sl--inset-x-28{left:-112px;right:-112px}.sl--inset-y-32{bottom:-128px;top:-128px}.sl--inset-x-32{left:-128px;right:-128px}.sl--inset-y-36{bottom:-144px;top:-144px}.sl--inset-x-36{left:-144px;right:-144px}.sl--inset-y-40{bottom:-160px;top:-160px}.sl--inset-x-40{left:-160px;right:-160px}.sl--inset-y-44{bottom:-176px;top:-176px}.sl--inset-x-44{left:-176px;right:-176px}.sl--inset-y-48{bottom:-192px;top:-192px}.sl--inset-x-48{left:-192px;right:-192px}.sl--inset-y-52{bottom:-208px;top:-208px}.sl--inset-x-52{left:-208px;right:-208px}.sl--inset-y-56{bottom:-224px;top:-224px}.sl--inset-x-56{left:-224px;right:-224px}.sl--inset-y-60{bottom:-240px;top:-240px}.sl--inset-x-60{left:-240px;right:-240px}.sl--inset-y-64{bottom:-256px;top:-256px}.sl--inset-x-64{left:-256px;right:-256px}.sl--inset-y-72{bottom:-288px;top:-288px}.sl--inset-x-72{left:-288px;right:-288px}.sl--inset-y-80{bottom:-320px;top:-320px}.sl--inset-x-80{left:-320px;right:-320px}.sl--inset-y-96{bottom:-384px;top:-384px}.sl--inset-x-96{left:-384px;right:-384px}.sl--inset-y-px{bottom:-1px;top:-1px}.sl--inset-x-px{left:-1px;right:-1px}.sl--inset-y-0\.5{bottom:-2px;top:-2px}.sl--inset-x-0\.5{left:-2px;right:-2px}.sl--inset-y-1\.5{bottom:-6px;top:-6px}.sl--inset-x-1\.5{left:-6px;right:-6px}.sl--inset-y-2\.5{bottom:-10px;top:-10px}.sl--inset-x-2\.5{left:-10px;right:-10px}.sl--inset-y-3\.5{bottom:-14px;top:-14px}.sl--inset-x-3\.5{left:-14px;right:-14px}.sl--inset-y-4\.5{bottom:-18px;top:-18px}.sl--inset-x-4\.5{left:-18px;right:-18px}.sl-top-0{top:0}.sl-right-0{right:0}.sl-bottom-0{bottom:0}.sl-left-0{left:0}.sl-top-1{top:4px}.sl-right-1{right:4px}.sl-bottom-1{bottom:4px}.sl-left-1{left:4px}.sl-top-2{top:8px}.sl-right-2{right:8px}.sl-bottom-2{bottom:8px}.sl-left-2{left:8px}.sl-top-3{top:12px}.sl-right-3{right:12px}.sl-bottom-3{bottom:12px}.sl-left-3{left:12px}.sl-top-4{top:16px}.sl-right-4{right:16px}.sl-bottom-4{bottom:16px}.sl-left-4{left:16px}.sl-top-5{top:20px}.sl-right-5{right:20px}.sl-bottom-5{bottom:20px}.sl-left-5{left:20px}.sl-top-6{top:24px}.sl-right-6{right:24px}.sl-bottom-6{bottom:24px}.sl-left-6{left:24px}.sl-top-7{top:28px}.sl-right-7{right:28px}.sl-bottom-7{bottom:28px}.sl-left-7{left:28px}.sl-top-8{top:32px}.sl-right-8{right:32px}.sl-bottom-8{bottom:32px}.sl-left-8{left:32px}.sl-top-9{top:36px}.sl-right-9{right:36px}.sl-bottom-9{bottom:36px}.sl-left-9{left:36px}.sl-top-10{top:40px}.sl-right-10{right:40px}.sl-bottom-10{bottom:40px}.sl-left-10{left:40px}.sl-top-11{top:44px}.sl-right-11{right:44px}.sl-bottom-11{bottom:44px}.sl-left-11{left:44px}.sl-top-12{top:48px}.sl-right-12{right:48px}.sl-bottom-12{bottom:48px}.sl-left-12{left:48px}.sl-top-14{top:56px}.sl-right-14{right:56px}.sl-bottom-14{bottom:56px}.sl-left-14{left:56px}.sl-top-16{top:64px}.sl-right-16{right:64px}.sl-bottom-16{bottom:64px}.sl-left-16{left:64px}.sl-top-20{top:80px}.sl-right-20{right:80px}.sl-bottom-20{bottom:80px}.sl-left-20{left:80px}.sl-top-24{top:96px}.sl-right-24{right:96px}.sl-bottom-24{bottom:96px}.sl-left-24{left:96px}.sl-top-28{top:112px}.sl-right-28{right:112px}.sl-bottom-28{bottom:112px}.sl-left-28{left:112px}.sl-top-32{top:128px}.sl-right-32{right:128px}.sl-bottom-32{bottom:128px}.sl-left-32{left:128px}.sl-top-36{top:144px}.sl-right-36{right:144px}.sl-bottom-36{bottom:144px}.sl-left-36{left:144px}.sl-top-40{top:160px}.sl-right-40{right:160px}.sl-bottom-40{bottom:160px}.sl-left-40{left:160px}.sl-top-44{top:176px}.sl-right-44{right:176px}.sl-bottom-44{bottom:176px}.sl-left-44{left:176px}.sl-top-48{top:192px}.sl-right-48{right:192px}.sl-bottom-48{bottom:192px}.sl-left-48{left:192px}.sl-top-52{top:208px}.sl-right-52{right:208px}.sl-bottom-52{bottom:208px}.sl-left-52{left:208px}.sl-top-56{top:224px}.sl-right-56{right:224px}.sl-bottom-56{bottom:224px}.sl-left-56{left:224px}.sl-top-60{top:240px}.sl-right-60{right:240px}.sl-bottom-60{bottom:240px}.sl-left-60{left:240px}.sl-top-64{top:256px}.sl-right-64{right:256px}.sl-bottom-64{bottom:256px}.sl-left-64{left:256px}.sl-top-72{top:288px}.sl-right-72{right:288px}.sl-bottom-72{bottom:288px}.sl-left-72{left:288px}.sl-top-80{top:320px}.sl-right-80{right:320px}.sl-bottom-80{bottom:320px}.sl-left-80{left:320px}.sl-top-96{top:384px}.sl-right-96{right:384px}.sl-bottom-96{bottom:384px}.sl-left-96{left:384px}.sl-top-auto{top:auto}.sl-right-auto{right:auto}.sl-bottom-auto{bottom:auto}.sl-left-auto{left:auto}.sl-top-px{top:1px}.sl-right-px{right:1px}.sl-bottom-px{bottom:1px}.sl-left-px{left:1px}.sl-top-0\.5{top:2px}.sl-right-0\.5{right:2px}.sl-bottom-0\.5{bottom:2px}.sl-left-0\.5{left:2px}.sl-top-1\.5{top:6px}.sl-right-1\.5{right:6px}.sl-bottom-1\.5{bottom:6px}.sl-left-1\.5{left:6px}.sl-top-2\.5{top:10px}.sl-right-2\.5{right:10px}.sl-bottom-2\.5{bottom:10px}.sl-left-2\.5{left:10px}.sl-top-3\.5{top:14px}.sl-right-3\.5{right:14px}.sl-bottom-3\.5{bottom:14px}.sl-left-3\.5{left:14px}.sl-top-4\.5{top:18px}.sl-right-4\.5{right:18px}.sl-bottom-4\.5{bottom:18px}.sl-left-4\.5{left:18px}.sl--top-0{top:0}.sl--right-0{right:0}.sl--bottom-0{bottom:0}.sl--left-0{left:0}.sl--top-1{top:-4px}.sl--right-1{right:-4px}.sl--bottom-1{bottom:-4px}.sl--left-1{left:-4px}.sl--top-2{top:-8px}.sl--right-2{right:-8px}.sl--bottom-2{bottom:-8px}.sl--left-2{left:-8px}.sl--top-3{top:-12px}.sl--right-3{right:-12px}.sl--bottom-3{bottom:-12px}.sl--left-3{left:-12px}.sl--top-4{top:-16px}.sl--right-4{right:-16px}.sl--bottom-4{bottom:-16px}.sl--left-4{left:-16px}.sl--top-5{top:-20px}.sl--right-5{right:-20px}.sl--bottom-5{bottom:-20px}.sl--left-5{left:-20px}.sl--top-6{top:-24px}.sl--right-6{right:-24px}.sl--bottom-6{bottom:-24px}.sl--left-6{left:-24px}.sl--top-7{top:-28px}.sl--right-7{right:-28px}.sl--bottom-7{bottom:-28px}.sl--left-7{left:-28px}.sl--top-8{top:-32px}.sl--right-8{right:-32px}.sl--bottom-8{bottom:-32px}.sl--left-8{left:-32px}.sl--top-9{top:-36px}.sl--right-9{right:-36px}.sl--bottom-9{bottom:-36px}.sl--left-9{left:-36px}.sl--top-10{top:-40px}.sl--right-10{right:-40px}.sl--bottom-10{bottom:-40px}.sl--left-10{left:-40px}.sl--top-11{top:-44px}.sl--right-11{right:-44px}.sl--bottom-11{bottom:-44px}.sl--left-11{left:-44px}.sl--top-12{top:-48px}.sl--right-12{right:-48px}.sl--bottom-12{bottom:-48px}.sl--left-12{left:-48px}.sl--top-14{top:-56px}.sl--right-14{right:-56px}.sl--bottom-14{bottom:-56px}.sl--left-14{left:-56px}.sl--top-16{top:-64px}.sl--right-16{right:-64px}.sl--bottom-16{bottom:-64px}.sl--left-16{left:-64px}.sl--top-20{top:-80px}.sl--right-20{right:-80px}.sl--bottom-20{bottom:-80px}.sl--left-20{left:-80px}.sl--top-24{top:-96px}.sl--right-24{right:-96px}.sl--bottom-24{bottom:-96px}.sl--left-24{left:-96px}.sl--top-28{top:-112px}.sl--right-28{right:-112px}.sl--bottom-28{bottom:-112px}.sl--left-28{left:-112px}.sl--top-32{top:-128px}.sl--right-32{right:-128px}.sl--bottom-32{bottom:-128px}.sl--left-32{left:-128px}.sl--top-36{top:-144px}.sl--right-36{right:-144px}.sl--bottom-36{bottom:-144px}.sl--left-36{left:-144px}.sl--top-40{top:-160px}.sl--right-40{right:-160px}.sl--bottom-40{bottom:-160px}.sl--left-40{left:-160px}.sl--top-44{top:-176px}.sl--right-44{right:-176px}.sl--bottom-44{bottom:-176px}.sl--left-44{left:-176px}.sl--top-48{top:-192px}.sl--right-48{right:-192px}.sl--bottom-48{bottom:-192px}.sl--left-48{left:-192px}.sl--top-52{top:-208px}.sl--right-52{right:-208px}.sl--bottom-52{bottom:-208px}.sl--left-52{left:-208px}.sl--top-56{top:-224px}.sl--right-56{right:-224px}.sl--bottom-56{bottom:-224px}.sl--left-56{left:-224px}.sl--top-60{top:-240px}.sl--right-60{right:-240px}.sl--bottom-60{bottom:-240px}.sl--left-60{left:-240px}.sl--top-64{top:-256px}.sl--right-64{right:-256px}.sl--bottom-64{bottom:-256px}.sl--left-64{left:-256px}.sl--top-72{top:-288px}.sl--right-72{right:-288px}.sl--bottom-72{bottom:-288px}.sl--left-72{left:-288px}.sl--top-80{top:-320px}.sl--right-80{right:-320px}.sl--bottom-80{bottom:-320px}.sl--left-80{left:-320px}.sl--top-96{top:-384px}.sl--right-96{right:-384px}.sl--bottom-96{bottom:-384px}.sl--left-96{left:-384px}.sl--top-px{top:-1px}.sl--right-px{right:-1px}.sl--bottom-px{bottom:-1px}.sl--left-px{left:-1px}.sl--top-0\.5{top:-2px}.sl--right-0\.5{right:-2px}.sl--bottom-0\.5{bottom:-2px}.sl--left-0\.5{left:-2px}.sl--top-1\.5{top:-6px}.sl--right-1\.5{right:-6px}.sl--bottom-1\.5{bottom:-6px}.sl--left-1\.5{left:-6px}.sl--top-2\.5{top:-10px}.sl--right-2\.5{right:-10px}.sl--bottom-2\.5{bottom:-10px}.sl--left-2\.5{left:-10px}.sl--top-3\.5{top:-14px}.sl--right-3\.5{right:-14px}.sl--bottom-3\.5{bottom:-14px}.sl--left-3\.5{left:-14px}.sl--top-4\.5{top:-18px}.sl--right-4\.5{right:-18px}.sl--bottom-4\.5{bottom:-18px}.sl--left-4\.5{left:-18px}.sl-justify-start{justify-content:flex-start}.sl-justify-end{justify-content:flex-end}.sl-justify-center{justify-content:center}.sl-justify-between{justify-content:space-between}.sl-justify-around{justify-content:space-around}.sl-justify-evenly{justify-content:space-evenly}.sl-justify-items-start{justify-items:start}.sl-justify-items-end{justify-items:end}.sl-justify-items-center{justify-items:center}.sl-justify-items-stretch{justify-items:stretch}.sl-justify-self-auto{justify-self:auto}.sl-justify-self-start{justify-self:start}.sl-justify-self-end{justify-self:end}.sl-justify-self-center{justify-self:center}.sl-justify-self-stretch{justify-self:stretch}.sl-tracking-tight{letter-spacing:-.025em}.sl-tracking-normal{letter-spacing:0}.sl-tracking-wide{letter-spacing:.025em}.sl-leading-none{line-height:1}.sl-leading-tight{line-height:1.2}.sl-leading-snug{line-height:1.375}.sl-leading-normal{line-height:1.5}.sl-leading-relaxed{line-height:1.625}.sl-leading-loose{line-height:2}.sl-leading-paragraph-leading{line-height:var(--lh-paragraph-leading)}.sl-leading-paragraph{line-height:var(--lh-paragraph)}.sl-leading-paragraph-small{line-height:var(--lh-paragraph-small)}.sl-leading-paragraph-tiny{line-height:var(--lh-paragraph-tiny)}.sl-m-0{margin:0}.sl-m-1{margin:4px}.sl-m-2{margin:8px}.sl-m-3{margin:12px}.sl-m-4{margin:16px}.sl-m-5{margin:20px}.sl-m-6{margin:24px}.sl-m-7{margin:28px}.sl-m-8{margin:32px}.sl-m-9{margin:36px}.sl-m-10{margin:40px}.sl-m-11{margin:44px}.sl-m-12{margin:48px}.sl-m-14{margin:56px}.sl-m-16{margin:64px}.sl-m-20{margin:80px}.sl-m-24{margin:96px}.sl-m-28{margin:112px}.sl-m-32{margin:128px}.sl-m-36{margin:144px}.sl-m-40{margin:160px}.sl-m-44{margin:176px}.sl-m-48{margin:192px}.sl-m-52{margin:208px}.sl-m-56{margin:224px}.sl-m-60{margin:240px}.sl-m-64{margin:256px}.sl-m-72{margin:288px}.sl-m-80{margin:320px}.sl-m-96{margin:384px}.sl-m-auto{margin:auto}.sl-m-px{margin:1px}.sl-m-0\.5{margin:2px}.sl-m-1\.5{margin:6px}.sl-m-2\.5{margin:10px}.sl-m-3\.5{margin:14px}.sl-m-4\.5{margin:18px}.sl--m-0{margin:0}.sl--m-1{margin:-4px}.sl--m-2{margin:-8px}.sl--m-3{margin:-12px}.sl--m-4{margin:-16px}.sl--m-5{margin:-20px}.sl--m-6{margin:-24px}.sl--m-7{margin:-28px}.sl--m-8{margin:-32px}.sl--m-9{margin:-36px}.sl--m-10{margin:-40px}.sl--m-11{margin:-44px}.sl--m-12{margin:-48px}.sl--m-14{margin:-56px}.sl--m-16{margin:-64px}.sl--m-20{margin:-80px}.sl--m-24{margin:-96px}.sl--m-28{margin:-112px}.sl--m-32{margin:-128px}.sl--m-36{margin:-144px}.sl--m-40{margin:-160px}.sl--m-44{margin:-176px}.sl--m-48{margin:-192px}.sl--m-52{margin:-208px}.sl--m-56{margin:-224px}.sl--m-60{margin:-240px}.sl--m-64{margin:-256px}.sl--m-72{margin:-288px}.sl--m-80{margin:-320px}.sl--m-96{margin:-384px}.sl--m-px{margin:-1px}.sl--m-0\.5{margin:-2px}.sl--m-1\.5{margin:-6px}.sl--m-2\.5{margin:-10px}.sl--m-3\.5{margin:-14px}.sl--m-4\.5{margin:-18px}.sl-my-0{margin-bottom:0;margin-top:0}.sl-mx-0{margin-left:0;margin-right:0}.sl-my-1{margin-bottom:4px;margin-top:4px}.sl-mx-1{margin-left:4px;margin-right:4px}.sl-my-2{margin-bottom:8px;margin-top:8px}.sl-mx-2{margin-left:8px;margin-right:8px}.sl-my-3{margin-bottom:12px;margin-top:12px}.sl-mx-3{margin-left:12px;margin-right:12px}.sl-my-4{margin-bottom:16px;margin-top:16px}.sl-mx-4{margin-left:16px;margin-right:16px}.sl-my-5{margin-bottom:20px;margin-top:20px}.sl-mx-5{margin-left:20px;margin-right:20px}.sl-my-6{margin-bottom:24px;margin-top:24px}.sl-mx-6{margin-left:24px;margin-right:24px}.sl-my-7{margin-bottom:28px;margin-top:28px}.sl-mx-7{margin-left:28px;margin-right:28px}.sl-my-8{margin-bottom:32px;margin-top:32px}.sl-mx-8{margin-left:32px;margin-right:32px}.sl-my-9{margin-bottom:36px;margin-top:36px}.sl-mx-9{margin-left:36px;margin-right:36px}.sl-my-10{margin-bottom:40px;margin-top:40px}.sl-mx-10{margin-left:40px;margin-right:40px}.sl-my-11{margin-bottom:44px;margin-top:44px}.sl-mx-11{margin-left:44px;margin-right:44px}.sl-my-12{margin-bottom:48px;margin-top:48px}.sl-mx-12{margin-left:48px;margin-right:48px}.sl-my-14{margin-bottom:56px;margin-top:56px}.sl-mx-14{margin-left:56px;margin-right:56px}.sl-my-16{margin-bottom:64px;margin-top:64px}.sl-mx-16{margin-left:64px;margin-right:64px}.sl-my-20{margin-bottom:80px;margin-top:80px}.sl-mx-20{margin-left:80px;margin-right:80px}.sl-my-24{margin-bottom:96px;margin-top:96px}.sl-mx-24{margin-left:96px;margin-right:96px}.sl-my-28{margin-bottom:112px;margin-top:112px}.sl-mx-28{margin-left:112px;margin-right:112px}.sl-my-32{margin-bottom:128px;margin-top:128px}.sl-mx-32{margin-left:128px;margin-right:128px}.sl-my-36{margin-bottom:144px;margin-top:144px}.sl-mx-36{margin-left:144px;margin-right:144px}.sl-my-40{margin-bottom:160px;margin-top:160px}.sl-mx-40{margin-left:160px;margin-right:160px}.sl-my-44{margin-bottom:176px;margin-top:176px}.sl-mx-44{margin-left:176px;margin-right:176px}.sl-my-48{margin-bottom:192px;margin-top:192px}.sl-mx-48{margin-left:192px;margin-right:192px}.sl-my-52{margin-bottom:208px;margin-top:208px}.sl-mx-52{margin-left:208px;margin-right:208px}.sl-my-56{margin-bottom:224px;margin-top:224px}.sl-mx-56{margin-left:224px;margin-right:224px}.sl-my-60{margin-bottom:240px;margin-top:240px}.sl-mx-60{margin-left:240px;margin-right:240px}.sl-my-64{margin-bottom:256px;margin-top:256px}.sl-mx-64{margin-left:256px;margin-right:256px}.sl-my-72{margin-bottom:288px;margin-top:288px}.sl-mx-72{margin-left:288px;margin-right:288px}.sl-my-80{margin-bottom:320px;margin-top:320px}.sl-mx-80{margin-left:320px;margin-right:320px}.sl-my-96{margin-bottom:384px;margin-top:384px}.sl-mx-96{margin-left:384px;margin-right:384px}.sl-my-auto{margin-bottom:auto;margin-top:auto}.sl-mx-auto{margin-left:auto;margin-right:auto}.sl-my-px{margin-bottom:1px;margin-top:1px}.sl-mx-px{margin-left:1px;margin-right:1px}.sl-my-0\.5{margin-bottom:2px;margin-top:2px}.sl-mx-0\.5{margin-left:2px;margin-right:2px}.sl-my-1\.5{margin-bottom:6px;margin-top:6px}.sl-mx-1\.5{margin-left:6px;margin-right:6px}.sl-my-2\.5{margin-bottom:10px;margin-top:10px}.sl-mx-2\.5{margin-left:10px;margin-right:10px}.sl-my-3\.5{margin-bottom:14px;margin-top:14px}.sl-mx-3\.5{margin-left:14px;margin-right:14px}.sl-my-4\.5{margin-bottom:18px;margin-top:18px}.sl-mx-4\.5{margin-left:18px;margin-right:18px}.sl--my-0{margin-bottom:0;margin-top:0}.sl--mx-0{margin-left:0;margin-right:0}.sl--my-1{margin-bottom:-4px;margin-top:-4px}.sl--mx-1{margin-left:-4px;margin-right:-4px}.sl--my-2{margin-bottom:-8px;margin-top:-8px}.sl--mx-2{margin-left:-8px;margin-right:-8px}.sl--my-3{margin-bottom:-12px;margin-top:-12px}.sl--mx-3{margin-left:-12px;margin-right:-12px}.sl--my-4{margin-bottom:-16px;margin-top:-16px}.sl--mx-4{margin-left:-16px;margin-right:-16px}.sl--my-5{margin-bottom:-20px;margin-top:-20px}.sl--mx-5{margin-left:-20px;margin-right:-20px}.sl--my-6{margin-bottom:-24px;margin-top:-24px}.sl--mx-6{margin-left:-24px;margin-right:-24px}.sl--my-7{margin-bottom:-28px;margin-top:-28px}.sl--mx-7{margin-left:-28px;margin-right:-28px}.sl--my-8{margin-bottom:-32px;margin-top:-32px}.sl--mx-8{margin-left:-32px;margin-right:-32px}.sl--my-9{margin-bottom:-36px;margin-top:-36px}.sl--mx-9{margin-left:-36px;margin-right:-36px}.sl--my-10{margin-bottom:-40px;margin-top:-40px}.sl--mx-10{margin-left:-40px;margin-right:-40px}.sl--my-11{margin-bottom:-44px;margin-top:-44px}.sl--mx-11{margin-left:-44px;margin-right:-44px}.sl--my-12{margin-bottom:-48px;margin-top:-48px}.sl--mx-12{margin-left:-48px;margin-right:-48px}.sl--my-14{margin-bottom:-56px;margin-top:-56px}.sl--mx-14{margin-left:-56px;margin-right:-56px}.sl--my-16{margin-bottom:-64px;margin-top:-64px}.sl--mx-16{margin-left:-64px;margin-right:-64px}.sl--my-20{margin-bottom:-80px;margin-top:-80px}.sl--mx-20{margin-left:-80px;margin-right:-80px}.sl--my-24{margin-bottom:-96px;margin-top:-96px}.sl--mx-24{margin-left:-96px;margin-right:-96px}.sl--my-28{margin-bottom:-112px;margin-top:-112px}.sl--mx-28{margin-left:-112px;margin-right:-112px}.sl--my-32{margin-bottom:-128px;margin-top:-128px}.sl--mx-32{margin-left:-128px;margin-right:-128px}.sl--my-36{margin-bottom:-144px;margin-top:-144px}.sl--mx-36{margin-left:-144px;margin-right:-144px}.sl--my-40{margin-bottom:-160px;margin-top:-160px}.sl--mx-40{margin-left:-160px;margin-right:-160px}.sl--my-44{margin-bottom:-176px;margin-top:-176px}.sl--mx-44{margin-left:-176px;margin-right:-176px}.sl--my-48{margin-bottom:-192px;margin-top:-192px}.sl--mx-48{margin-left:-192px;margin-right:-192px}.sl--my-52{margin-bottom:-208px;margin-top:-208px}.sl--mx-52{margin-left:-208px;margin-right:-208px}.sl--my-56{margin-bottom:-224px;margin-top:-224px}.sl--mx-56{margin-left:-224px;margin-right:-224px}.sl--my-60{margin-bottom:-240px;margin-top:-240px}.sl--mx-60{margin-left:-240px;margin-right:-240px}.sl--my-64{margin-bottom:-256px;margin-top:-256px}.sl--mx-64{margin-left:-256px;margin-right:-256px}.sl--my-72{margin-bottom:-288px;margin-top:-288px}.sl--mx-72{margin-left:-288px;margin-right:-288px}.sl--my-80{margin-bottom:-320px;margin-top:-320px}.sl--mx-80{margin-left:-320px;margin-right:-320px}.sl--my-96{margin-bottom:-384px;margin-top:-384px}.sl--mx-96{margin-left:-384px;margin-right:-384px}.sl--my-px{margin-bottom:-1px;margin-top:-1px}.sl--mx-px{margin-left:-1px;margin-right:-1px}.sl--my-0\.5{margin-bottom:-2px;margin-top:-2px}.sl--mx-0\.5{margin-left:-2px;margin-right:-2px}.sl--my-1\.5{margin-bottom:-6px;margin-top:-6px}.sl--mx-1\.5{margin-left:-6px;margin-right:-6px}.sl--my-2\.5{margin-bottom:-10px;margin-top:-10px}.sl--mx-2\.5{margin-left:-10px;margin-right:-10px}.sl--my-3\.5{margin-bottom:-14px;margin-top:-14px}.sl--mx-3\.5{margin-left:-14px;margin-right:-14px}.sl--my-4\.5{margin-bottom:-18px;margin-top:-18px}.sl--mx-4\.5{margin-left:-18px;margin-right:-18px}.sl-mt-0{margin-top:0}.sl-mr-0{margin-right:0}.sl-mb-0{margin-bottom:0}.sl-ml-0{margin-left:0}.sl-mt-1{margin-top:4px}.sl-mr-1{margin-right:4px}.sl-mb-1{margin-bottom:4px}.sl-ml-1{margin-left:4px}.sl-mt-2{margin-top:8px}.sl-mr-2{margin-right:8px}.sl-mb-2{margin-bottom:8px}.sl-ml-2{margin-left:8px}.sl-mt-3{margin-top:12px}.sl-mr-3{margin-right:12px}.sl-mb-3{margin-bottom:12px}.sl-ml-3{margin-left:12px}.sl-mt-4{margin-top:16px}.sl-mr-4{margin-right:16px}.sl-mb-4{margin-bottom:16px}.sl-ml-4{margin-left:16px}.sl-mt-5{margin-top:20px}.sl-mr-5{margin-right:20px}.sl-mb-5{margin-bottom:20px}.sl-ml-5{margin-left:20px}.sl-mt-6{margin-top:24px}.sl-mr-6{margin-right:24px}.sl-mb-6{margin-bottom:24px}.sl-ml-6{margin-left:24px}.sl-mt-7{margin-top:28px}.sl-mr-7{margin-right:28px}.sl-mb-7{margin-bottom:28px}.sl-ml-7{margin-left:28px}.sl-mt-8{margin-top:32px}.sl-mr-8{margin-right:32px}.sl-mb-8{margin-bottom:32px}.sl-ml-8{margin-left:32px}.sl-mt-9{margin-top:36px}.sl-mr-9{margin-right:36px}.sl-mb-9{margin-bottom:36px}.sl-ml-9{margin-left:36px}.sl-mt-10{margin-top:40px}.sl-mr-10{margin-right:40px}.sl-mb-10{margin-bottom:40px}.sl-ml-10{margin-left:40px}.sl-mt-11{margin-top:44px}.sl-mr-11{margin-right:44px}.sl-mb-11{margin-bottom:44px}.sl-ml-11{margin-left:44px}.sl-mt-12{margin-top:48px}.sl-mr-12{margin-right:48px}.sl-mb-12{margin-bottom:48px}.sl-ml-12{margin-left:48px}.sl-mt-14{margin-top:56px}.sl-mr-14{margin-right:56px}.sl-mb-14{margin-bottom:56px}.sl-ml-14{margin-left:56px}.sl-mt-16{margin-top:64px}.sl-mr-16{margin-right:64px}.sl-mb-16{margin-bottom:64px}.sl-ml-16{margin-left:20px}.sl-mt-20{margin-top:80px}.sl-mr-20{margin-right:80px}.sl-mb-20{margin-bottom:80px}.sl-ml-20{margin-left:80px}.sl-mt-24{margin-top:96px}.sl-mr-24{margin-right:96px}.sl-mb-24{margin-bottom:96px}.sl-ml-24{margin-left:96px}.sl-mt-28{margin-top:112px}.sl-mr-28{margin-right:112px}.sl-mb-28{margin-bottom:112px}.sl-ml-28{margin-left:112px}.sl-mt-32{margin-top:128px}.sl-mr-32{margin-right:128px}.sl-mb-32{margin-bottom:128px}.sl-ml-32{margin-left:128px}.sl-mt-36{margin-top:144px}.sl-mr-36{margin-right:144px}.sl-mb-36{margin-bottom:144px}.sl-ml-36{margin-left:144px}.sl-mt-40{margin-top:160px}.sl-mr-40{margin-right:160px}.sl-mb-40{margin-bottom:160px}.sl-ml-40{margin-left:160px}.sl-mt-44{margin-top:176px}.sl-mr-44{margin-right:176px}.sl-mb-44{margin-bottom:176px}.sl-ml-44{margin-left:176px}.sl-mt-48{margin-top:192px}.sl-mr-48{margin-right:192px}.sl-mb-48{margin-bottom:192px}.sl-ml-48{margin-left:192px}.sl-mt-52{margin-top:208px}.sl-mr-52{margin-right:208px}.sl-mb-52{margin-bottom:208px}.sl-ml-52{margin-left:208px}.sl-mt-56{margin-top:224px}.sl-mr-56{margin-right:224px}.sl-mb-56{margin-bottom:224px}.sl-ml-56{margin-left:224px}.sl-mt-60{margin-top:240px}.sl-mr-60{margin-right:240px}.sl-mb-60{margin-bottom:240px}.sl-ml-60{margin-left:240px}.sl-mt-64{margin-top:256px}.sl-mr-64{margin-right:256px}.sl-mb-64{margin-bottom:256px}.sl-ml-64{margin-left:256px}.sl-mt-72{margin-top:288px}.sl-mr-72{margin-right:288px}.sl-mb-72{margin-bottom:288px}.sl-ml-72{margin-left:288px}.sl-mt-80{margin-top:320px}.sl-mr-80{margin-right:320px}.sl-mb-80{margin-bottom:320px}.sl-ml-80{margin-left:320px}.sl-mt-96{margin-top:384px}.sl-mr-96{margin-right:384px}.sl-mb-96{margin-bottom:384px}.sl-ml-96{margin-left:384px}.sl-mt-auto{margin-top:auto}.sl-mr-auto{margin-right:auto}.sl-mb-auto{margin-bottom:auto}.sl-ml-auto{margin-left:auto}.sl-mt-px{margin-top:1px}.sl-mr-px{margin-right:1px}.sl-mb-px{margin-bottom:1px}.sl-ml-px{margin-left:1px}.sl-mt-0\.5{margin-top:2px}.sl-mr-0\.5{margin-right:2px}.sl-mb-0\.5{margin-bottom:2px}.sl-ml-0\.5{margin-left:2px}.sl-mt-1\.5{margin-top:6px}.sl-mr-1\.5{margin-right:6px}.sl-mb-1\.5{margin-bottom:6px}.sl-ml-1\.5{margin-left:6px}.sl-mt-2\.5{margin-top:10px}.sl-mr-2\.5{margin-right:10px}.sl-mb-2\.5{margin-bottom:10px}.sl-ml-2\.5{margin-left:10px}.sl-mt-3\.5{margin-top:14px}.sl-mr-3\.5{margin-right:14px}.sl-mb-3\.5{margin-bottom:14px}.sl-ml-3\.5{margin-left:14px}.sl-mt-4\.5{margin-top:18px}.sl-mr-4\.5{margin-right:18px}.sl-mb-4\.5{margin-bottom:18px}.sl-ml-4\.5{margin-left:18px}.sl--mt-0{margin-top:0}.sl--mr-0{margin-right:0}.sl--mb-0{margin-bottom:0}.sl--ml-0{margin-left:0}.sl--mt-1{margin-top:-4px}.sl--mr-1{margin-right:-4px}.sl--mb-1{margin-bottom:-4px}.sl--ml-1{margin-left:-4px}.sl--mt-2{margin-top:-8px}.sl--mr-2{margin-right:-8px}.sl--mb-2{margin-bottom:-8px}.sl--ml-2{margin-left:-8px}.sl--mt-3{margin-top:-12px}.sl--mr-3{margin-right:-12px}.sl--mb-3{margin-bottom:-12px}.sl--ml-3{margin-left:-12px}.sl--mt-4{margin-top:-16px}.sl--mr-4{margin-right:-16px}.sl--mb-4{margin-bottom:-16px}.sl--ml-4{margin-left:-16px}.sl--mt-5{margin-top:-20px}.sl--mr-5{margin-right:-20px}.sl--mb-5{margin-bottom:-20px}.sl--ml-5{margin-left:-20px}.sl--mt-6{margin-top:-24px}.sl--mr-6{margin-right:-24px}.sl--mb-6{margin-bottom:-24px}.sl--ml-6{margin-left:-24px}.sl--mt-7{margin-top:-28px}.sl--mr-7{margin-right:-28px}.sl--mb-7{margin-bottom:-28px}.sl--ml-7{margin-left:-28px}.sl--mt-8{margin-top:-32px}.sl--mr-8{margin-right:-32px}.sl--mb-8{margin-bottom:-32px}.sl--ml-8{margin-left:-32px}.sl--mt-9{margin-top:-36px}.sl--mr-9{margin-right:-36px}.sl--mb-9{margin-bottom:-36px}.sl--ml-9{margin-left:-36px}.sl--mt-10{margin-top:-40px}.sl--mr-10{margin-right:-40px}.sl--mb-10{margin-bottom:-40px}.sl--ml-10{margin-left:-40px}.sl--mt-11{margin-top:-44px}.sl--mr-11{margin-right:-44px}.sl--mb-11{margin-bottom:-44px}.sl--ml-11{margin-left:-44px}.sl--mt-12{margin-top:-48px}.sl--mr-12{margin-right:-48px}.sl--mb-12{margin-bottom:-48px}.sl--ml-12{margin-left:-48px}.sl--mt-14{margin-top:-56px}.sl--mr-14{margin-right:-56px}.sl--mb-14{margin-bottom:-56px}.sl--ml-14{margin-left:-56px}.sl--mt-16{margin-top:-64px}.sl--mr-16{margin-right:-64px}.sl--mb-16{margin-bottom:-64px}.sl--ml-16{margin-left:-64px}.sl--mt-20{margin-top:-80px}.sl--mr-20{margin-right:-80px}.sl--mb-20{margin-bottom:-80px}.sl--ml-20{margin-left:-80px}.sl--mt-24{margin-top:-96px}.sl--mr-24{margin-right:-96px}.sl--mb-24{margin-bottom:-96px}.sl--ml-24{margin-left:-96px}.sl--mt-28{margin-top:-112px}.sl--mr-28{margin-right:-112px}.sl--mb-28{margin-bottom:-112px}.sl--ml-28{margin-left:-112px}.sl--mt-32{margin-top:-128px}.sl--mr-32{margin-right:-128px}.sl--mb-32{margin-bottom:-128px}.sl--ml-32{margin-left:-128px}.sl--mt-36{margin-top:-144px}.sl--mr-36{margin-right:-144px}.sl--mb-36{margin-bottom:-144px}.sl--ml-36{margin-left:-144px}.sl--mt-40{margin-top:-160px}.sl--mr-40{margin-right:-160px}.sl--mb-40{margin-bottom:-160px}.sl--ml-40{margin-left:-160px}.sl--mt-44{margin-top:-176px}.sl--mr-44{margin-right:-176px}.sl--mb-44{margin-bottom:-176px}.sl--ml-44{margin-left:-176px}.sl--mt-48{margin-top:-192px}.sl--mr-48{margin-right:-192px}.sl--mb-48{margin-bottom:-192px}.sl--ml-48{margin-left:-192px}.sl--mt-52{margin-top:-208px}.sl--mr-52{margin-right:-208px}.sl--mb-52{margin-bottom:-208px}.sl--ml-52{margin-left:-208px}.sl--mt-56{margin-top:-224px}.sl--mr-56{margin-right:-224px}.sl--mb-56{margin-bottom:-224px}.sl--ml-56{margin-left:-224px}.sl--mt-60{margin-top:-240px}.sl--mr-60{margin-right:-240px}.sl--mb-60{margin-bottom:-240px}.sl--ml-60{margin-left:-240px}.sl--mt-64{margin-top:-256px}.sl--mr-64{margin-right:-256px}.sl--mb-64{margin-bottom:-256px}.sl--ml-64{margin-left:-256px}.sl--mt-72{margin-top:-288px}.sl--mr-72{margin-right:-288px}.sl--mb-72{margin-bottom:-288px}.sl--ml-72{margin-left:-288px}.sl--mt-80{margin-top:-320px}.sl--mr-80{margin-right:-320px}.sl--mb-80{margin-bottom:-320px}.sl--ml-80{margin-left:-320px}.sl--mt-96{margin-top:-384px}.sl--mr-96{margin-right:-384px}.sl--mb-96{margin-bottom:-384px}.sl--ml-96{margin-left:-384px}.sl--mt-px{margin-top:-1px}.sl--mr-px{margin-right:-1px}.sl--mb-px{margin-bottom:-1px}.sl--ml-px{margin-left:-1px}.sl--mt-0\.5{margin-top:-2px}.sl--mr-0\.5{margin-right:-2px}.sl--mb-0\.5{margin-bottom:-2px}.sl--ml-0\.5{margin-left:-2px}.sl--mt-1\.5{margin-top:-6px}.sl--mr-1\.5{margin-right:-6px}.sl--mb-1\.5{margin-bottom:-6px}.sl--ml-1\.5{margin-left:-6px}.sl--mt-2\.5{margin-top:-10px}.sl--mr-2\.5{margin-right:-10px}.sl--mb-2\.5{margin-bottom:-10px}.sl--ml-2\.5{margin-left:-10px}.sl--mt-3\.5{margin-top:-14px}.sl--mr-3\.5{margin-right:-14px}.sl--mb-3\.5{margin-bottom:-14px}.sl--ml-3\.5{margin-left:-14px}.sl--mt-4\.5{margin-top:-18px}.sl--mr-4\.5{margin-right:-18px}.sl--mb-4\.5{margin-bottom:-18px}.sl--ml-4\.5{margin-left:-18px}.sl-max-h-full{max-height:100%}.sl-max-h-screen{max-height:100vh}.sl-max-w-none{max-width:none}.sl-max-w-full{max-width:100%}.sl-max-w-min{max-width:-moz-min-content;max-width:min-content}.sl-max-w-max{max-width:-moz-max-content;max-width:max-content}.sl-max-w-prose{max-width:65ch}.sl-min-h-full{min-height:100%}.sl-min-h-screen{min-height:100vh}.sl-min-w-full{min-width:100%}.sl-min-w-min{min-width:-moz-min-content;min-width:min-content}.sl-min-w-max{min-width:-moz-max-content;min-width:max-content}.sl-object-contain{object-fit:contain}.sl-object-cover{object-fit:cover}.sl-object-fill{object-fit:fill}.sl-object-none{object-fit:none}.sl-object-scale-down{object-fit:scale-down}.sl-object-bottom{object-position:bottom}.sl-object-center{object-position:center}.sl-object-left{object-position:left}.sl-object-left-bottom{object-position:left bottom}.sl-object-left-top{object-position:left top}.sl-object-right{object-position:right}.sl-object-right-bottom{object-position:right bottom}.sl-object-right-top{object-position:right top}.sl-object-top{object-position:top}.sl-opacity-0{opacity:0}.sl-opacity-5{opacity:.05}.sl-opacity-10{opacity:.1}.sl-opacity-20{opacity:.2}.sl-opacity-30{opacity:.3}.sl-opacity-40{opacity:.4}.sl-opacity-50{opacity:.5}.sl-opacity-60{opacity:.6}.sl-opacity-70{opacity:.7}.sl-opacity-90{opacity:.9}.sl-opacity-100{opacity:1}.hover\:sl-opacity-0:hover{opacity:0}.hover\:sl-opacity-5:hover{opacity:.05}.hover\:sl-opacity-10:hover{opacity:.1}.hover\:sl-opacity-20:hover{opacity:.2}.hover\:sl-opacity-30:hover{opacity:.3}.hover\:sl-opacity-40:hover{opacity:.4}.hover\:sl-opacity-50:hover{opacity:.5}.hover\:sl-opacity-60:hover{opacity:.6}.hover\:sl-opacity-70:hover{opacity:.7}.hover\:sl-opacity-90:hover{opacity:.9}.hover\:sl-opacity-100:hover{opacity:1}.focus\:sl-opacity-0:focus{opacity:0}.focus\:sl-opacity-5:focus{opacity:.05}.focus\:sl-opacity-10:focus{opacity:.1}.focus\:sl-opacity-20:focus{opacity:.2}.focus\:sl-opacity-30:focus{opacity:.3}.focus\:sl-opacity-40:focus{opacity:.4}.focus\:sl-opacity-50:focus{opacity:.5}.focus\:sl-opacity-60:focus{opacity:.6}.focus\:sl-opacity-70:focus{opacity:.7}.focus\:sl-opacity-90:focus{opacity:.9}.focus\:sl-opacity-100:focus{opacity:1}.active\:sl-opacity-0:active{opacity:0}.active\:sl-opacity-5:active{opacity:.05}.active\:sl-opacity-10:active{opacity:.1}.active\:sl-opacity-20:active{opacity:.2}.active\:sl-opacity-30:active{opacity:.3}.active\:sl-opacity-40:active{opacity:.4}.active\:sl-opacity-50:active{opacity:.5}.active\:sl-opacity-60:active{opacity:.6}.active\:sl-opacity-70:active{opacity:.7}.active\:sl-opacity-90:active{opacity:.9}.active\:sl-opacity-100:active{opacity:1}.disabled\:sl-opacity-0:disabled{opacity:0}.disabled\:sl-opacity-5:disabled{opacity:.05}.disabled\:sl-opacity-10:disabled{opacity:.1}.disabled\:sl-opacity-20:disabled{opacity:.2}.disabled\:sl-opacity-30:disabled{opacity:.3}.disabled\:sl-opacity-40:disabled{opacity:.4}.disabled\:sl-opacity-50:disabled{opacity:.5}.disabled\:sl-opacity-60:disabled{opacity:.6}.disabled\:sl-opacity-70:disabled{opacity:.7}.disabled\:sl-opacity-90:disabled{opacity:.9}.disabled\:sl-opacity-100:disabled{opacity:1}.sl-outline-none{outline:2px solid transparent;outline-offset:2px}.sl-overflow-auto{overflow:auto}.sl-overflow-hidden{overflow:hidden}.sl-overflow-visible{overflow:visible}.sl-overflow-scroll{overflow:scroll}.sl-overflow-x-auto{overflow-x:auto}.sl-overflow-y-auto{overflow-y:auto}.sl-overflow-x-hidden{overflow-x:hidden}.sl-overflow-y-hidden{overflow-y:hidden}.sl-overflow-x-visible{overflow-x:visible}.sl-overflow-y-visible{overflow-y:visible}.sl-overflow-x-scroll{overflow-x:scroll}.sl-overflow-y-scroll{overflow-y:scroll}.sl-overscroll-auto{overscroll-behavior:auto}.sl-overscroll-contain{overscroll-behavior:contain}.sl-overscroll-none{overscroll-behavior:none}.sl-overscroll-y-auto{overscroll-behavior-y:auto}.sl-overscroll-y-contain{overscroll-behavior-y:contain}.sl-overscroll-y-none{overscroll-behavior-y:none}.sl-overscroll-x-auto{overscroll-behavior-x:auto}.sl-overscroll-x-contain{overscroll-behavior-x:contain}.sl-overscroll-x-none{overscroll-behavior-x:none}.sl-p-0{padding:0}.sl-p-1{padding:4px}.sl-p-2{padding:8px}.sl-p-3{padding:12px}.sl-p-4{padding:16px}.sl-p-5{padding:20px}.sl-p-6{padding:24px}.sl-p-7{padding:28px}.sl-p-8{padding:32px}.sl-p-9{padding:36px}.sl-p-10{padding:40px}.sl-p-11{padding:44px}.sl-p-12{padding:48px}.sl-p-14{padding:56px}.sl-p-16{padding:64px}.sl-p-20{padding:80px}.sl-p-24{padding:96px}.sl-p-28{padding:112px}.sl-p-32{padding:128px}.sl-p-36{padding:144px}.sl-p-40{padding:160px}.sl-p-44{padding:176px}.sl-p-48{padding:192px}.sl-p-52{padding:208px}.sl-p-56{padding:224px}.sl-p-60{padding:240px}.sl-p-64{padding:256px}.sl-p-72{padding:288px}.sl-p-80{padding:320px}.sl-p-96{padding:384px}.sl-p-px{padding:1px}.sl-p-0\.5{padding:2px}.sl-p-1\.5{padding:6px}.sl-p-2\.5{padding:10px}.sl-p-3\.5{padding:14px}.sl-p-4\.5{padding:18px}.sl-py-0{padding-bottom:0;padding-top:0}.sl-px-0{padding-left:0;padding-right:0}.sl-py-1{padding-bottom:4px;padding-top:4px}.sl-px-1{padding-left:4px;padding-right:4px}.sl-py-2{padding-bottom:8px;padding-top:8px}.sl-px-2{padding-left:8px;padding-right:8px}.sl-py-3{padding-bottom:12px;padding-top:12px}.sl-px-3{padding-left:12px;padding-right:12px}.sl-py-4{padding-bottom:16px;padding-top:16px}.sl-px-4{padding-left:16px;padding-right:16px}.sl-py-5{padding-bottom:20px;padding-top:20px}.sl-px-5{padding-left:20px;padding-right:20px}.sl-py-6{padding-bottom:24px;padding-top:24px}.sl-px-6{padding-left:24px;padding-right:24px}.sl-py-7{padding-bottom:28px;padding-top:28px}.sl-px-7{padding-left:28px;padding-right:28px}.sl-py-8{padding-bottom:32px;padding-top:32px}.sl-px-8{padding-left:32px;padding-right:32px}.sl-py-9{padding-bottom:36px;padding-top:36px}.sl-px-9{padding-left:36px;padding-right:36px}.sl-py-10{padding-bottom:40px;padding-top:40px}.sl-px-10{padding-left:40px;padding-right:40px}.sl-py-11{padding-bottom:44px;padding-top:44px}.sl-px-11{padding-left:44px;padding-right:44px}.sl-py-12{padding-bottom:48px;padding-top:48px}.sl-px-12{padding-left:48px;padding-right:48px}.sl-py-14{padding-bottom:56px;padding-top:56px}.sl-px-14{padding-left:56px;padding-right:56px}.sl-py-16{padding-bottom:64px;padding-top:0px}.sl-px-16{padding-left:64px;padding-right:64px}.sl-py-20{padding-bottom:80px;padding-top:80px}.sl-px-20{padding-left:80px;padding-right:80px}.sl-py-24{padding-bottom:96px;padding-top:96px}.sl-px-24{padding-left:20px;padding-right:20px}.sl-py-28{padding-bottom:112px;padding-top:112px}.sl-px-28{padding-left:112px;padding-right:112px}.sl-py-32{padding-bottom:128px;padding-top:128px}.sl-px-32{padding-left:128px;padding-right:128px}.sl-py-36{padding-bottom:144px;padding-top:144px}.sl-px-36{padding-left:144px;padding-right:144px}.sl-py-40{padding-bottom:160px;padding-top:160px}.sl-px-40{padding-left:160px;padding-right:160px}.sl-py-44{padding-bottom:176px;padding-top:176px}.sl-px-44{padding-left:176px;padding-right:176px}.sl-py-48{padding-bottom:192px;padding-top:192px}.sl-px-48{padding-left:192px;padding-right:192px}.sl-py-52{padding-bottom:208px;padding-top:208px}.sl-px-52{padding-left:208px;padding-right:208px}.sl-py-56{padding-bottom:224px;padding-top:224px}.sl-px-56{padding-left:224px;padding-right:224px}.sl-py-60{padding-bottom:240px;padding-top:240px}.sl-px-60{padding-left:240px;padding-right:240px}.sl-py-64{padding-bottom:256px;padding-top:256px}.sl-px-64{padding-left:256px;padding-right:256px}.sl-py-72{padding-bottom:288px;padding-top:288px}.sl-px-72{padding-left:288px;padding-right:288px}.sl-py-80{padding-bottom:320px;padding-top:320px}.sl-px-80{padding-left:320px;padding-right:320px}.sl-py-96{padding-bottom:384px;padding-top:384px}.sl-px-96{padding-left:384px;padding-right:384px}.sl-py-px{padding-bottom:1px;padding-top:1px}.sl-px-px{padding-left:1px;padding-right:1px}.sl-py-0\.5{padding-bottom:2px;padding-top:2px}.sl-px-0\.5{padding-left:2px;padding-right:2px}.sl-py-1\.5{padding-bottom:6px;padding-top:6px}.sl-px-1\.5{padding-left:6px;padding-right:6px}.sl-py-2\.5{padding-bottom:10px;padding-top:10px}.sl-px-2\.5{padding-left:10px;padding-right:10px}.sl-py-3\.5{padding-bottom:14px;padding-top:14px}.sl-px-3\.5{padding-left:14px;padding-right:14px}.sl-py-4\.5{padding-bottom:18px;padding-top:18px}.sl-px-4\.5{padding-left:18px;padding-right:18px}.sl-pt-0{padding-top:0}.sl-pr-0{padding-right:0}.sl-pb-0{padding-bottom:0}.sl-pl-0{padding-left:0}.sl-pt-1{padding-top:4px}.sl-pr-1{padding-right:4px}.sl-pb-1{padding-bottom:4px}.sl-pl-1{padding-left:4px}.sl-pt-2{padding-top:8px}.sl-pr-2{padding-right:8px}.sl-pb-2{padding-bottom:8px}.sl-pl-2{padding-left:8px}.sl-pt-3{padding-top:12px}.sl-pr-3{padding-right:12px}.sl-pb-3{padding-bottom:12px}.sl-pl-3{padding-left:12px}.sl-pt-4{padding-top:16px}.sl-pr-4{padding-right:16px}.sl-pb-4{padding-bottom:16px}.sl-pl-4{padding-left:16px}.sl-pt-5{padding-top:20px}.sl-pr-5{padding-right:20px}.sl-pb-5{padding-bottom:20px}.sl-pl-5{padding-left:20px}.sl-pt-6{padding-top:24px}.sl-pr-6{padding-right:24px}.sl-pb-6{padding-bottom:24px}.sl-pl-6{padding-left:24px}.sl-pt-7{padding-top:28px}.sl-pr-7{padding-right:28px}.sl-pb-7{padding-bottom:28px}.sl-pl-7{padding-left:28px}.sl-pt-8{padding-top:32px}.sl-pr-8{padding-right:32px}.sl-pb-8{padding-bottom:32px}.sl-pl-8{padding-left:32px}.sl-pt-9{padding-top:36px}.sl-pr-9{padding-right:36px}.sl-pb-9{padding-bottom:36px}.sl-pl-9{padding-left:36px}.sl-pt-10{padding-top:40px}.sl-pr-10{padding-right:40px}.sl-pb-10{padding-bottom:40px}.sl-pl-10{padding-left:40px}.sl-pt-11{padding-top:44px}.sl-pr-11{padding-right:44px}.sl-pb-11{padding-bottom:44px}.sl-pl-11{padding-left:44px}.sl-pt-12{padding-top:48px}.sl-pr-12{padding-right:48px}.sl-pb-12{padding-bottom:48px}.sl-pl-12{padding-left:48px}.sl-pt-14{padding-top:56px}.sl-pr-14{padding-right:56px}.sl-pb-14{padding-bottom:56px}.sl-pl-14{padding-left:56px}.sl-pt-16{padding-top:64px}.sl-pr-16{padding-right:64px}.sl-pb-16{padding-bottom:64px}.sl-pl-16{padding-left:64px}.sl-pt-20{padding-top:80px}.sl-pr-20{padding-right:80px}.sl-pb-20{padding-bottom:80px}.sl-pl-20{padding-left:80px}.sl-pt-24{padding-top:96px}.sl-pr-24{padding-right:96px}.sl-pb-24{padding-bottom:96px}.sl-pl-24{padding-left:96px}.sl-pt-28{padding-top:112px}.sl-pr-28{padding-right:112px}.sl-pb-28{padding-bottom:112px}.sl-pl-28{padding-left:112px}.sl-pt-32{padding-top:128px}.sl-pr-32{padding-right:128px}.sl-pb-32{padding-bottom:128px}.sl-pl-32{padding-left:128px}.sl-pt-36{padding-top:144px}.sl-pr-36{padding-right:144px}.sl-pb-36{padding-bottom:144px}.sl-pl-36{padding-left:144px}.sl-pt-40{padding-top:160px}.sl-pr-40{padding-right:160px}.sl-pb-40{padding-bottom:160px}.sl-pl-40{padding-left:160px}.sl-pt-44{padding-top:176px}.sl-pr-44{padding-right:176px}.sl-pb-44{padding-bottom:176px}.sl-pl-44{padding-left:176px}.sl-pt-48{padding-top:192px}.sl-pr-48{padding-right:192px}.sl-pb-48{padding-bottom:192px}.sl-pl-48{padding-left:192px}.sl-pt-52{padding-top:208px}.sl-pr-52{padding-right:208px}.sl-pb-52{padding-bottom:208px}.sl-pl-52{padding-left:208px}.sl-pt-56{padding-top:224px}.sl-pr-56{padding-right:224px}.sl-pb-56{padding-bottom:224px}.sl-pl-56{padding-left:224px}.sl-pt-60{padding-top:240px}.sl-pr-60{padding-right:240px}.sl-pb-60{padding-bottom:240px}.sl-pl-60{padding-left:240px}.sl-pt-64{padding-top:256px}.sl-pr-64{padding-right:256px}.sl-pb-64{padding-bottom:256px}.sl-pl-64{padding-left:256px}.sl-pt-72{padding-top:288px}.sl-pr-72{padding-right:288px}.sl-pb-72{padding-bottom:288px}.sl-pl-72{padding-left:288px}.sl-pt-80{padding-top:320px}.sl-pr-80{padding-right:320px}.sl-pb-80{padding-bottom:320px}.sl-pl-80{padding-left:320px}.sl-pt-96{padding-top:384px}.sl-pr-96{padding-right:384px}.sl-pb-96{padding-bottom:384px}.sl-pl-96{padding-left:384px}.sl-pt-px{padding-top:1px}.sl-pr-px{padding-right:1px}.sl-pb-px{padding-bottom:1px}.sl-pl-px{padding-left:1px}.sl-pt-0\.5{padding-top:2px}.sl-pr-0\.5{padding-right:2px}.sl-pb-0\.5{padding-bottom:2px}.sl-pl-0\.5{padding-left:2px}.sl-pt-1\.5{padding-top:6px}.sl-pr-1\.5{padding-right:6px}.sl-pb-1\.5{padding-bottom:6px}.sl-pl-1\.5{padding-left:6px}.sl-pt-2\.5{padding-top:10px}.sl-pr-2\.5{padding-right:10px}.sl-pb-2\.5{padding-bottom:10px}.sl-pl-2\.5{padding-left:10px}.sl-pt-3\.5{padding-top:14px}.sl-pr-3\.5{padding-right:14px}.sl-pb-3\.5{padding-bottom:14px}.sl-pl-3\.5{padding-left:14px}.sl-pt-4\.5{padding-top:18px}.sl-pr-4\.5{padding-right:18px}.sl-pb-4\.5{padding-bottom:18px}.sl-pl-4\.5{padding-left:18px}.sl-placeholder::-ms-input-placeholder{color:var(--color-text-light)}.sl-placeholder::placeholder{color:var(--color-text-light)}.sl-placeholder-primary::-ms-input-placeholder{color:#3898ff}.sl-placeholder-primary::placeholder{color:#3898ff}.sl-placeholder-success::-ms-input-placeholder{color:#0ea06f}.sl-placeholder-success::placeholder{color:#0ea06f}.sl-placeholder-warning::-ms-input-placeholder{color:#f3602b}.sl-placeholder-warning::placeholder{color:#f3602b}.sl-placeholder-danger::-ms-input-placeholder{color:#f05151}.sl-placeholder-danger::placeholder{color:#f05151}.sl-pointer-events-none{pointer-events:none}.sl-pointer-events-auto{pointer-events:auto}.sl-static{position:static}.sl-fixed{position:fixed}.sl-absolute{position:absolute}.sl-relative{position:relative}.sl-sticky{position:-webkit-sticky;position:sticky}.sl-resize-none{resize:none}.sl-resize-y{resize:vertical}.sl-resize-x{resize:horizontal}.sl-resize{resize:both}.sl-ring-primary{--tw-ring-color:hsla(var(--primary-h),80%,61%,var(--tw-ring-opacity)) }.sl-ring-success{--tw-ring-color:hsla(var(--success-h),84%,34%,var(--tw-ring-opacity)) }.sl-ring-warning{--tw-ring-color:hsla(var(--warning-h),89%,56%,var(--tw-ring-opacity)) }.sl-ring-danger{--tw-ring-color:hsla(var(--danger-h),84%,63%,var(--tw-ring-opacity)) }.focus\:sl-ring-primary:focus{--tw-ring-color:hsla(var(--primary-h),80%,61%,var(--tw-ring-opacity)) }.focus\:sl-ring-success:focus{--tw-ring-color:hsla(var(--success-h),84%,34%,var(--tw-ring-opacity)) }.focus\:sl-ring-warning:focus{--tw-ring-color:hsla(var(--warning-h),89%,56%,var(--tw-ring-opacity)) }.focus\:sl-ring-danger:focus{--tw-ring-color:hsla(var(--danger-h),84%,63%,var(--tw-ring-opacity)) }.sl-ring-opacity-0{--tw-ring-opacity:0}.sl-ring-opacity-5{--tw-ring-opacity:0.05}.sl-ring-opacity-10{--tw-ring-opacity:0.1}.sl-ring-opacity-20{--tw-ring-opacity:0.2}.sl-ring-opacity-30{--tw-ring-opacity:0.3}.sl-ring-opacity-40{--tw-ring-opacity:0.4}.sl-ring-opacity-50{--tw-ring-opacity:0.5}.sl-ring-opacity-60{--tw-ring-opacity:0.6}.sl-ring-opacity-70{--tw-ring-opacity:0.7}.sl-ring-opacity-90{--tw-ring-opacity:0.9}.sl-ring-opacity-100{--tw-ring-opacity:1}.focus\:sl-ring-opacity-0:focus{--tw-ring-opacity:0}.focus\:sl-ring-opacity-5:focus{--tw-ring-opacity:0.05}.focus\:sl-ring-opacity-10:focus{--tw-ring-opacity:0.1}.focus\:sl-ring-opacity-20:focus{--tw-ring-opacity:0.2}.focus\:sl-ring-opacity-30:focus{--tw-ring-opacity:0.3}.focus\:sl-ring-opacity-40:focus{--tw-ring-opacity:0.4}.focus\:sl-ring-opacity-50:focus{--tw-ring-opacity:0.5}.focus\:sl-ring-opacity-60:focus{--tw-ring-opacity:0.6}.focus\:sl-ring-opacity-70:focus{--tw-ring-opacity:0.7}.focus\:sl-ring-opacity-90:focus{--tw-ring-opacity:0.9}.focus\:sl-ring-opacity-100:focus{--tw-ring-opacity:1}*{--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000}.sl-ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.sl-ring-inset{--tw-ring-inset:inset}.focus\:sl-ring:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:sl-ring-inset:focus{--tw-ring-inset:inset}.sl-stroke-transparent{stroke:transparent}.sl-stroke-current{stroke:currentColor}.sl-stroke-lighten-100{stroke:var(--color-lighten-100)}.sl-stroke-darken-100{stroke:var(--color-darken-100)}.sl-stroke-primary{stroke:var(--color-primary)}.sl-stroke-primary-tint{stroke:var(--color-primary-tint)}.sl-stroke-primary-light{stroke:var(--color-primary-light)}.sl-stroke-primary-dark{stroke:var(--color-primary-dark)}.sl-stroke-primary-darker{stroke:var(--color-primary-darker)}.sl-stroke-success{stroke:var(--color-success)}.sl-stroke-success-tint{stroke:var(--color-success-tint)}.sl-stroke-success-light{stroke:var(--color-success-light)}.sl-stroke-success-dark{stroke:var(--color-success-dark)}.sl-stroke-success-darker{stroke:var(--color-success-darker)}.sl-stroke-warning{stroke:var(--color-warning)}.sl-stroke-warning-tint{stroke:var(--color-warning-tint)}.sl-stroke-warning-light{stroke:var(--color-warning-light)}.sl-stroke-warning-dark{stroke:var(--color-warning-dark)}.sl-stroke-warning-darker{stroke:var(--color-warning-darker)}.sl-stroke-danger{stroke:var(--color-danger)}.sl-stroke-danger-tint{stroke:var(--color-danger-tint)}.sl-stroke-danger-light{stroke:var(--color-danger-light)}.sl-stroke-danger-dark{stroke:var(--color-danger-dark)}.sl-stroke-danger-darker{stroke:var(--color-danger-darker)}.sl-stroke-code{stroke:var(--color-code)}.sl-stroke-on-code{stroke:var(--color-on-code)}.sl-stroke-on-primary{stroke:var(--color-on-primary)}.sl-stroke-on-success{stroke:var(--color-on-success)}.sl-stroke-on-warning{stroke:var(--color-on-warning)}.sl-stroke-on-danger{stroke:var(--color-on-danger)}.sl-stroke-text{stroke:var(--color-text)}.sl-table-auto{table-layout:auto}.sl-table-fixed{table-layout:fixed}.sl-text-left{text-align:left}.sl-text-center{text-align:center}.sl-text-right{text-align:right}.sl-text-justify{text-align:justify}.sl-text-transparent{color:transparent}.sl-text-current{color:currentColor}.sl-text-lighten-100{color:var(--color-lighten-100)}.sl-text-darken-100{color:var(--color-darken-100)}.sl-text-primary{color:var(--color-primary)}.sl-text-primary-tint{color:var(--color-primary-tint)}.sl-text-primary-light{color:var(--color-primary-light)}.sl-text-primary-dark{color:var(--color-primary-dark)}.sl-text-primary-darker{color:var(--color-primary-darker)}.sl-text-success{color:var(--color-success)}.sl-text-success-tint{color:var(--color-success-tint)}.sl-text-success-light{color:var(--color-success-light)}.sl-text-success-dark{color:var(--color-success-dark)}.sl-text-success-darker{color:var(--color-success-darker)}.sl-text-warning{color:var(--color-warning)}.sl-text-warning-tint{color:var(--color-warning-tint)}.sl-text-warning-light{color:var(--color-warning-light)}.sl-text-warning-dark{color:var(--color-warning-dark)}.sl-text-warning-darker{color:var(--color-warning-darker)}.sl-text-danger{color:var(--color-danger)}.sl-text-danger-tint{color:var(--color-danger-tint)}.sl-text-danger-light{color:var(--color-danger-light)}.sl-text-danger-dark{color:var(--color-danger-dark)}.sl-text-danger-darker{color:var(--color-danger-darker)}.sl-text-code{color:var(--color-code)}.sl-text-on-code{color:var(--color-on-code)}.sl-text-on-primary{color:var(--color-on-primary)}.sl-text-on-success{color:var(--color-on-success)}.sl-text-on-warning{color:var(--color-on-warning)}.sl-text-on-danger{color:var(--color-on-danger)}.sl-text-body{color:var(--color-text)}.sl-text-muted{color:var(--color-text-muted)}.sl-text-light{color:var(--color-text-light)}.sl-text-heading{color:var(--color-text-heading)}.sl-text-paragraph{color:var(--color-text-paragraph)}.sl-text-canvas-50{color:var(--color-canvas-50)}.sl-text-canvas-100{color:var(--color-canvas-100)}.sl-text-canvas-200{color:var(--color-canvas-200)}.sl-text-canvas-300{color:var(--color-canvas-300)}.sl-text-canvas-pure{color:var(--color-canvas-pure)}.sl-text-canvas{color:var(--color-canvas)}.sl-text-canvas-dialog{color:var(--color-canvas-dialog)}.sl-text-link{color:var(--color-link)}.sl-text-link-dark{color:var(--color-link-dark)}.hover\:sl-text-transparent:hover{color:transparent}.hover\:sl-text-current:hover{color:currentColor}.hover\:sl-text-lighten-100:hover{color:var(--color-lighten-100)}.hover\:sl-text-darken-100:hover{color:var(--color-darken-100)}.hover\:sl-text-primary:hover{color:var(--color-primary)}.hover\:sl-text-primary-tint:hover{color:var(--color-primary-tint)}.hover\:sl-text-primary-light:hover{color:var(--color-primary-light)}.hover\:sl-text-primary-dark:hover{color:var(--color-primary-dark)}.hover\:sl-text-primary-darker:hover{color:var(--color-primary-darker)}.hover\:sl-text-success:hover{color:var(--color-success)}.hover\:sl-text-success-tint:hover{color:var(--color-success-tint)}.hover\:sl-text-success-light:hover{color:var(--color-success-light)}.hover\:sl-text-success-dark:hover{color:var(--color-success-dark)}.hover\:sl-text-success-darker:hover{color:var(--color-success-darker)}.hover\:sl-text-warning:hover{color:var(--color-warning)}.hover\:sl-text-warning-tint:hover{color:var(--color-warning-tint)}.hover\:sl-text-warning-light:hover{color:var(--color-warning-light)}.hover\:sl-text-warning-dark:hover{color:var(--color-warning-dark)}.hover\:sl-text-warning-darker:hover{color:var(--color-warning-darker)}.hover\:sl-text-danger:hover{color:var(--color-danger)}.hover\:sl-text-danger-tint:hover{color:var(--color-danger-tint)}.hover\:sl-text-danger-light:hover{color:var(--color-danger-light)}.hover\:sl-text-danger-dark:hover{color:var(--color-danger-dark)}.hover\:sl-text-danger-darker:hover{color:var(--color-danger-darker)}.hover\:sl-text-code:hover{color:var(--color-code)}.hover\:sl-text-on-code:hover{color:var(--color-on-code)}.hover\:sl-text-on-primary:hover{color:var(--color-on-primary)}.hover\:sl-text-on-success:hover{color:var(--color-on-success)}.hover\:sl-text-on-warning:hover{color:var(--color-on-warning)}.hover\:sl-text-on-danger:hover{color:var(--color-on-danger)}.hover\:sl-text-body:hover{color:var(--color-text)}.hover\:sl-text-muted:hover{color:var(--color-text-muted)}.hover\:sl-text-light:hover{color:var(--color-text-light)}.hover\:sl-text-heading:hover{color:var(--color-text-heading)}.hover\:sl-text-paragraph:hover{color:var(--color-text-paragraph)}.hover\:sl-text-canvas-50:hover{color:var(--color-canvas-50)}.hover\:sl-text-canvas-100:hover{color:var(--color-canvas-100)}.hover\:sl-text-canvas-200:hover{color:var(--color-canvas-200)}.hover\:sl-text-canvas-300:hover{color:var(--color-canvas-300)}.hover\:sl-text-canvas-pure:hover{color:var(--color-canvas-pure)}.hover\:sl-text-canvas:hover{color:var(--color-canvas)}.hover\:sl-text-canvas-dialog:hover{color:var(--color-canvas-dialog)}.hover\:sl-text-link:hover{color:var(--color-link)}.hover\:sl-text-link-dark:hover{color:var(--color-link-dark)}.focus\:sl-text-transparent:focus{color:transparent}.focus\:sl-text-current:focus{color:currentColor}.focus\:sl-text-lighten-100:focus{color:var(--color-lighten-100)}.focus\:sl-text-darken-100:focus{color:var(--color-darken-100)}.focus\:sl-text-primary:focus{color:var(--color-primary)}.focus\:sl-text-primary-tint:focus{color:var(--color-primary-tint)}.focus\:sl-text-primary-light:focus{color:var(--color-primary-light)}.focus\:sl-text-primary-dark:focus{color:var(--color-primary-dark)}.focus\:sl-text-primary-darker:focus{color:var(--color-primary-darker)}.focus\:sl-text-success:focus{color:var(--color-success)}.focus\:sl-text-success-tint:focus{color:var(--color-success-tint)}.focus\:sl-text-success-light:focus{color:var(--color-success-light)}.focus\:sl-text-success-dark:focus{color:var(--color-success-dark)}.focus\:sl-text-success-darker:focus{color:var(--color-success-darker)}.focus\:sl-text-warning:focus{color:var(--color-warning)}.focus\:sl-text-warning-tint:focus{color:var(--color-warning-tint)}.focus\:sl-text-warning-light:focus{color:var(--color-warning-light)}.focus\:sl-text-warning-dark:focus{color:var(--color-warning-dark)}.focus\:sl-text-warning-darker:focus{color:var(--color-warning-darker)}.focus\:sl-text-danger:focus{color:var(--color-danger)}.focus\:sl-text-danger-tint:focus{color:var(--color-danger-tint)}.focus\:sl-text-danger-light:focus{color:var(--color-danger-light)}.focus\:sl-text-danger-dark:focus{color:var(--color-danger-dark)}.focus\:sl-text-danger-darker:focus{color:var(--color-danger-darker)}.focus\:sl-text-code:focus{color:var(--color-code)}.focus\:sl-text-on-code:focus{color:var(--color-on-code)}.focus\:sl-text-on-primary:focus{color:var(--color-on-primary)}.focus\:sl-text-on-success:focus{color:var(--color-on-success)}.focus\:sl-text-on-warning:focus{color:var(--color-on-warning)}.focus\:sl-text-on-danger:focus{color:var(--color-on-danger)}.focus\:sl-text-body:focus{color:var(--color-text)}.focus\:sl-text-muted:focus{color:var(--color-text-muted)}.focus\:sl-text-light:focus{color:var(--color-text-light)}.focus\:sl-text-heading:focus{color:var(--color-text-heading)}.focus\:sl-text-paragraph:focus{color:var(--color-text-paragraph)}.focus\:sl-text-canvas-50:focus{color:var(--color-canvas-50)}.focus\:sl-text-canvas-100:focus{color:var(--color-canvas-100)}.focus\:sl-text-canvas-200:focus{color:var(--color-canvas-200)}.focus\:sl-text-canvas-300:focus{color:var(--color-canvas-300)}.focus\:sl-text-canvas-pure:focus{color:var(--color-canvas-pure)}.focus\:sl-text-canvas:focus{color:var(--color-canvas)}.focus\:sl-text-canvas-dialog:focus{color:var(--color-canvas-dialog)}.focus\:sl-text-link:focus{color:var(--color-link)}.focus\:sl-text-link-dark:focus{color:var(--color-link-dark)}.disabled\:sl-text-transparent:disabled{color:transparent}.disabled\:sl-text-current:disabled{color:currentColor}.disabled\:sl-text-lighten-100:disabled{color:var(--color-lighten-100)}.disabled\:sl-text-darken-100:disabled{color:var(--color-darken-100)}.disabled\:sl-text-primary:disabled{color:var(--color-primary)}.disabled\:sl-text-primary-tint:disabled{color:var(--color-primary-tint)}.disabled\:sl-text-primary-light:disabled{color:var(--color-primary-light)}.disabled\:sl-text-primary-dark:disabled{color:var(--color-primary-dark)}.disabled\:sl-text-primary-darker:disabled{color:var(--color-primary-darker)}.disabled\:sl-text-success:disabled{color:var(--color-success)}.disabled\:sl-text-success-tint:disabled{color:var(--color-success-tint)}.disabled\:sl-text-success-light:disabled{color:var(--color-success-light)}.disabled\:sl-text-success-dark:disabled{color:var(--color-success-dark)}.disabled\:sl-text-success-darker:disabled{color:var(--color-success-darker)}.disabled\:sl-text-warning:disabled{color:var(--color-warning)}.disabled\:sl-text-warning-tint:disabled{color:var(--color-warning-tint)}.disabled\:sl-text-warning-light:disabled{color:var(--color-warning-light)}.disabled\:sl-text-warning-dark:disabled{color:var(--color-warning-dark)}.disabled\:sl-text-warning-darker:disabled{color:var(--color-warning-darker)}.disabled\:sl-text-danger:disabled{color:var(--color-danger)}.disabled\:sl-text-danger-tint:disabled{color:var(--color-danger-tint)}.disabled\:sl-text-danger-light:disabled{color:var(--color-danger-light)}.disabled\:sl-text-danger-dark:disabled{color:var(--color-danger-dark)}.disabled\:sl-text-danger-darker:disabled{color:var(--color-danger-darker)}.disabled\:sl-text-code:disabled{color:var(--color-code)}.disabled\:sl-text-on-code:disabled{color:var(--color-on-code)}.disabled\:sl-text-on-primary:disabled{color:var(--color-on-primary)}.disabled\:sl-text-on-success:disabled{color:var(--color-on-success)}.disabled\:sl-text-on-warning:disabled{color:var(--color-on-warning)}.disabled\:sl-text-on-danger:disabled{color:var(--color-on-danger)}.disabled\:sl-text-body:disabled{color:var(--color-text)}.disabled\:sl-text-muted:disabled{color:var(--color-text-muted)}.disabled\:sl-text-light:disabled{color:var(--color-text-light)}.disabled\:sl-text-heading:disabled{color:var(--color-text-heading)}.disabled\:sl-text-paragraph:disabled{color:var(--color-text-paragraph)}.disabled\:sl-text-canvas-50:disabled{color:var(--color-canvas-50)}.disabled\:sl-text-canvas-100:disabled{color:var(--color-canvas-100)}.disabled\:sl-text-canvas-200:disabled{color:var(--color-canvas-200)}.disabled\:sl-text-canvas-300:disabled{color:var(--color-canvas-300)}.disabled\:sl-text-canvas-pure:disabled{color:var(--color-canvas-pure)}.disabled\:sl-text-canvas:disabled{color:var(--color-canvas)}.disabled\:sl-text-canvas-dialog:disabled{color:var(--color-canvas-dialog)}.disabled\:sl-text-link:disabled{color:var(--color-link)}.disabled\:sl-text-link-dark:disabled{color:var(--color-link-dark)}.sl-underline{text-decoration:underline}.sl-line-through{text-decoration:line-through}.sl-no-underline{text-decoration:none}.hover\:sl-underline:hover{text-decoration:underline}.hover\:sl-line-through:hover{text-decoration:line-through}.hover\:sl-no-underline:hover{text-decoration:none}.sl-truncate{overflow:hidden;white-space:nowrap}.sl-overflow-ellipsis,.sl-truncate{text-overflow:ellipsis}.sl-overflow-clip{text-overflow:clip}.sl-uppercase{text-transform:uppercase}.sl-lowercase{text-transform:lowercase}.sl-capitalize{text-transform:capitalize}.sl-normal-case{text-transform:none}.sl-transform{transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.sl-transform,.sl-transform-gpu{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1}.sl-transform-gpu{transform:translate3d(var(--tw-translate-x),var(--tw-translate-y),0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.sl-transform-none{transform:none}.sl-delay-75{transition-delay:75ms}.sl-delay-150{transition-delay:.15s}.sl-delay-300{transition-delay:.3s}.sl-delay-500{transition-delay:.5s}.sl-delay-1000{transition-delay:1s}.sl-duration-75{transition-duration:75ms}.sl-duration-150{transition-duration:.15s}.sl-duration-300{transition-duration:.3s}.sl-duration-500{transition-duration:.5s}.sl-duration-1000{transition-duration:1s}.sl-transition{transition-duration:.15s;transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.sl-translate-x-0{--tw-translate-x:0px}.sl-translate-x-1{--tw-translate-x:4px}.sl-translate-x-2{--tw-translate-x:8px}.sl-translate-x-3{--tw-translate-x:12px}.sl-translate-x-4{--tw-translate-x:16px}.sl-translate-x-5{--tw-translate-x:20px}.sl-translate-x-6{--tw-translate-x:24px}.sl-translate-x-7{--tw-translate-x:28px}.sl-translate-x-8{--tw-translate-x:32px}.sl-translate-x-9{--tw-translate-x:36px}.sl-translate-x-10{--tw-translate-x:40px}.sl-translate-x-11{--tw-translate-x:44px}.sl-translate-x-12{--tw-translate-x:48px}.sl-translate-x-14{--tw-translate-x:56px}.sl-translate-x-16{--tw-translate-x:64px}.sl-translate-x-20{--tw-translate-x:80px}.sl-translate-x-24{--tw-translate-x:96px}.sl-translate-x-28{--tw-translate-x:112px}.sl-translate-x-32{--tw-translate-x:128px}.sl-translate-x-36{--tw-translate-x:144px}.sl-translate-x-40{--tw-translate-x:160px}.sl-translate-x-44{--tw-translate-x:176px}.sl-translate-x-48{--tw-translate-x:192px}.sl-translate-x-52{--tw-translate-x:208px}.sl-translate-x-56{--tw-translate-x:224px}.sl-translate-x-60{--tw-translate-x:240px}.sl-translate-x-64{--tw-translate-x:256px}.sl-translate-x-72{--tw-translate-x:288px}.sl-translate-x-80{--tw-translate-x:320px}.sl-translate-x-96{--tw-translate-x:384px}.sl-translate-x-px{--tw-translate-x:1px}.sl-translate-x-0\.5{--tw-translate-x:2px}.sl-translate-x-1\.5{--tw-translate-x:6px}.sl-translate-x-2\.5{--tw-translate-x:10px}.sl-translate-x-3\.5{--tw-translate-x:14px}.sl-translate-x-4\.5{--tw-translate-x:18px}.sl--translate-x-0{--tw-translate-x:0px}.sl--translate-x-1{--tw-translate-x:-4px}.sl--translate-x-2{--tw-translate-x:-8px}.sl--translate-x-3{--tw-translate-x:-12px}.sl--translate-x-4{--tw-translate-x:-16px}.sl--translate-x-5{--tw-translate-x:-20px}.sl--translate-x-6{--tw-translate-x:-24px}.sl--translate-x-7{--tw-translate-x:-28px}.sl--translate-x-8{--tw-translate-x:-32px}.sl--translate-x-9{--tw-translate-x:-36px}.sl--translate-x-10{--tw-translate-x:-40px}.sl--translate-x-11{--tw-translate-x:-44px}.sl--translate-x-12{--tw-translate-x:-48px}.sl--translate-x-14{--tw-translate-x:-56px}.sl--translate-x-16{--tw-translate-x:-64px}.sl--translate-x-20{--tw-translate-x:-80px}.sl--translate-x-24{--tw-translate-x:-96px}.sl--translate-x-28{--tw-translate-x:-112px}.sl--translate-x-32{--tw-translate-x:-128px}.sl--translate-x-36{--tw-translate-x:-144px}.sl--translate-x-40{--tw-translate-x:-160px}.sl--translate-x-44{--tw-translate-x:-176px}.sl--translate-x-48{--tw-translate-x:-192px}.sl--translate-x-52{--tw-translate-x:-208px}.sl--translate-x-56{--tw-translate-x:-224px}.sl--translate-x-60{--tw-translate-x:-240px}.sl--translate-x-64{--tw-translate-x:-256px}.sl--translate-x-72{--tw-translate-x:-288px}.sl--translate-x-80{--tw-translate-x:-320px}.sl--translate-x-96{--tw-translate-x:-384px}.sl--translate-x-px{--tw-translate-x:-1px}.sl--translate-x-0\.5{--tw-translate-x:-2px}.sl--translate-x-1\.5{--tw-translate-x:-6px}.sl--translate-x-2\.5{--tw-translate-x:-10px}.sl--translate-x-3\.5{--tw-translate-x:-14px}.sl--translate-x-4\.5{--tw-translate-x:-18px}.sl-translate-y-0{--tw-translate-y:0px}.sl-translate-y-1{--tw-translate-y:4px}.sl-translate-y-2{--tw-translate-y:8px}.sl-translate-y-3{--tw-translate-y:12px}.sl-translate-y-4{--tw-translate-y:16px}.sl-translate-y-5{--tw-translate-y:20px}.sl-translate-y-6{--tw-translate-y:24px}.sl-translate-y-7{--tw-translate-y:28px}.sl-translate-y-8{--tw-translate-y:32px}.sl-translate-y-9{--tw-translate-y:36px}.sl-translate-y-10{--tw-translate-y:40px}.sl-translate-y-11{--tw-translate-y:44px}.sl-translate-y-12{--tw-translate-y:48px}.sl-translate-y-14{--tw-translate-y:56px}.sl-translate-y-16{--tw-translate-y:64px}.sl-translate-y-20{--tw-translate-y:80px}.sl-translate-y-24{--tw-translate-y:96px}.sl-translate-y-28{--tw-translate-y:112px}.sl-translate-y-32{--tw-translate-y:128px}.sl-translate-y-36{--tw-translate-y:144px}.sl-translate-y-40{--tw-translate-y:160px}.sl-translate-y-44{--tw-translate-y:176px}.sl-translate-y-48{--tw-translate-y:192px}.sl-translate-y-52{--tw-translate-y:208px}.sl-translate-y-56{--tw-translate-y:224px}.sl-translate-y-60{--tw-translate-y:240px}.sl-translate-y-64{--tw-translate-y:256px}.sl-translate-y-72{--tw-translate-y:288px}.sl-translate-y-80{--tw-translate-y:320px}.sl-translate-y-96{--tw-translate-y:384px}.sl-translate-y-px{--tw-translate-y:1px}.sl-translate-y-0\.5{--tw-translate-y:2px}.sl-translate-y-1\.5{--tw-translate-y:6px}.sl-translate-y-2\.5{--tw-translate-y:10px}.sl-translate-y-3\.5{--tw-translate-y:14px}.sl-translate-y-4\.5{--tw-translate-y:18px}.sl--translate-y-0{--tw-translate-y:0px}.sl--translate-y-1{--tw-translate-y:-4px}.sl--translate-y-2{--tw-translate-y:-8px}.sl--translate-y-3{--tw-translate-y:-12px}.sl--translate-y-4{--tw-translate-y:-16px}.sl--translate-y-5{--tw-translate-y:-20px}.sl--translate-y-6{--tw-translate-y:-24px}.sl--translate-y-7{--tw-translate-y:-28px}.sl--translate-y-8{--tw-translate-y:-32px}.sl--translate-y-9{--tw-translate-y:-36px}.sl--translate-y-10{--tw-translate-y:-40px}.sl--translate-y-11{--tw-translate-y:-44px}.sl--translate-y-12{--tw-translate-y:-48px}.sl--translate-y-14{--tw-translate-y:-56px}.sl--translate-y-16{--tw-translate-y:-64px}.sl--translate-y-20{--tw-translate-y:-80px}.sl--translate-y-24{--tw-translate-y:-96px}.sl--translate-y-28{--tw-translate-y:-112px}.sl--translate-y-32{--tw-translate-y:-128px}.sl--translate-y-36{--tw-translate-y:-144px}.sl--translate-y-40{--tw-translate-y:-160px}.sl--translate-y-44{--tw-translate-y:-176px}.sl--translate-y-48{--tw-translate-y:-192px}.sl--translate-y-52{--tw-translate-y:-208px}.sl--translate-y-56{--tw-translate-y:-224px}.sl--translate-y-60{--tw-translate-y:-240px}.sl--translate-y-64{--tw-translate-y:-256px}.sl--translate-y-72{--tw-translate-y:-288px}.sl--translate-y-80{--tw-translate-y:-320px}.sl--translate-y-96{--tw-translate-y:-384px}.sl--translate-y-px{--tw-translate-y:-1px}.sl--translate-y-0\.5{--tw-translate-y:-2px}.sl--translate-y-1\.5{--tw-translate-y:-6px}.sl--translate-y-2\.5{--tw-translate-y:-10px}.sl--translate-y-3\.5{--tw-translate-y:-14px}.sl--translate-y-4\.5{--tw-translate-y:-18px}.hover\:sl-translate-x-0:hover{--tw-translate-x:0px}.hover\:sl-translate-x-1:hover{--tw-translate-x:4px}.hover\:sl-translate-x-2:hover{--tw-translate-x:8px}.hover\:sl-translate-x-3:hover{--tw-translate-x:12px}.hover\:sl-translate-x-4:hover{--tw-translate-x:16px}.hover\:sl-translate-x-5:hover{--tw-translate-x:20px}.hover\:sl-translate-x-6:hover{--tw-translate-x:24px}.hover\:sl-translate-x-7:hover{--tw-translate-x:28px}.hover\:sl-translate-x-8:hover{--tw-translate-x:32px}.hover\:sl-translate-x-9:hover{--tw-translate-x:36px}.hover\:sl-translate-x-10:hover{--tw-translate-x:40px}.hover\:sl-translate-x-11:hover{--tw-translate-x:44px}.hover\:sl-translate-x-12:hover{--tw-translate-x:48px}.hover\:sl-translate-x-14:hover{--tw-translate-x:56px}.hover\:sl-translate-x-16:hover{--tw-translate-x:64px}.hover\:sl-translate-x-20:hover{--tw-translate-x:80px}.hover\:sl-translate-x-24:hover{--tw-translate-x:96px}.hover\:sl-translate-x-28:hover{--tw-translate-x:112px}.hover\:sl-translate-x-32:hover{--tw-translate-x:128px}.hover\:sl-translate-x-36:hover{--tw-translate-x:144px}.hover\:sl-translate-x-40:hover{--tw-translate-x:160px}.hover\:sl-translate-x-44:hover{--tw-translate-x:176px}.hover\:sl-translate-x-48:hover{--tw-translate-x:192px}.hover\:sl-translate-x-52:hover{--tw-translate-x:208px}.hover\:sl-translate-x-56:hover{--tw-translate-x:224px}.hover\:sl-translate-x-60:hover{--tw-translate-x:240px}.hover\:sl-translate-x-64:hover{--tw-translate-x:256px}.hover\:sl-translate-x-72:hover{--tw-translate-x:288px}.hover\:sl-translate-x-80:hover{--tw-translate-x:320px}.hover\:sl-translate-x-96:hover{--tw-translate-x:384px}.hover\:sl-translate-x-px:hover{--tw-translate-x:1px}.hover\:sl-translate-x-0\.5:hover{--tw-translate-x:2px}.hover\:sl-translate-x-1\.5:hover{--tw-translate-x:6px}.hover\:sl-translate-x-2\.5:hover{--tw-translate-x:10px}.hover\:sl-translate-x-3\.5:hover{--tw-translate-x:14px}.hover\:sl-translate-x-4\.5:hover{--tw-translate-x:18px}.hover\:sl--translate-x-0:hover{--tw-translate-x:0px}.hover\:sl--translate-x-1:hover{--tw-translate-x:-4px}.hover\:sl--translate-x-2:hover{--tw-translate-x:-8px}.hover\:sl--translate-x-3:hover{--tw-translate-x:-12px}.hover\:sl--translate-x-4:hover{--tw-translate-x:-16px}.hover\:sl--translate-x-5:hover{--tw-translate-x:-20px}.hover\:sl--translate-x-6:hover{--tw-translate-x:-24px}.hover\:sl--translate-x-7:hover{--tw-translate-x:-28px}.hover\:sl--translate-x-8:hover{--tw-translate-x:-32px}.hover\:sl--translate-x-9:hover{--tw-translate-x:-36px}.hover\:sl--translate-x-10:hover{--tw-translate-x:-40px}.hover\:sl--translate-x-11:hover{--tw-translate-x:-44px}.hover\:sl--translate-x-12:hover{--tw-translate-x:-48px}.hover\:sl--translate-x-14:hover{--tw-translate-x:-56px}.hover\:sl--translate-x-16:hover{--tw-translate-x:-64px}.hover\:sl--translate-x-20:hover{--tw-translate-x:-80px}.hover\:sl--translate-x-24:hover{--tw-translate-x:-96px}.hover\:sl--translate-x-28:hover{--tw-translate-x:-112px}.hover\:sl--translate-x-32:hover{--tw-translate-x:-128px}.hover\:sl--translate-x-36:hover{--tw-translate-x:-144px}.hover\:sl--translate-x-40:hover{--tw-translate-x:-160px}.hover\:sl--translate-x-44:hover{--tw-translate-x:-176px}.hover\:sl--translate-x-48:hover{--tw-translate-x:-192px}.hover\:sl--translate-x-52:hover{--tw-translate-x:-208px}.hover\:sl--translate-x-56:hover{--tw-translate-x:-224px}.hover\:sl--translate-x-60:hover{--tw-translate-x:-240px}.hover\:sl--translate-x-64:hover{--tw-translate-x:-256px}.hover\:sl--translate-x-72:hover{--tw-translate-x:-288px}.hover\:sl--translate-x-80:hover{--tw-translate-x:-320px}.hover\:sl--translate-x-96:hover{--tw-translate-x:-384px}.hover\:sl--translate-x-px:hover{--tw-translate-x:-1px}.hover\:sl--translate-x-0\.5:hover{--tw-translate-x:-2px}.hover\:sl--translate-x-1\.5:hover{--tw-translate-x:-6px}.hover\:sl--translate-x-2\.5:hover{--tw-translate-x:-10px}.hover\:sl--translate-x-3\.5:hover{--tw-translate-x:-14px}.hover\:sl--translate-x-4\.5:hover{--tw-translate-x:-18px}.hover\:sl-translate-y-0:hover{--tw-translate-y:0px}.hover\:sl-translate-y-1:hover{--tw-translate-y:4px}.hover\:sl-translate-y-2:hover{--tw-translate-y:8px}.hover\:sl-translate-y-3:hover{--tw-translate-y:12px}.hover\:sl-translate-y-4:hover{--tw-translate-y:16px}.hover\:sl-translate-y-5:hover{--tw-translate-y:20px}.hover\:sl-translate-y-6:hover{--tw-translate-y:24px}.hover\:sl-translate-y-7:hover{--tw-translate-y:28px}.hover\:sl-translate-y-8:hover{--tw-translate-y:32px}.hover\:sl-translate-y-9:hover{--tw-translate-y:36px}.hover\:sl-translate-y-10:hover{--tw-translate-y:40px}.hover\:sl-translate-y-11:hover{--tw-translate-y:44px}.hover\:sl-translate-y-12:hover{--tw-translate-y:48px}.hover\:sl-translate-y-14:hover{--tw-translate-y:56px}.hover\:sl-translate-y-16:hover{--tw-translate-y:64px}.hover\:sl-translate-y-20:hover{--tw-translate-y:80px}.hover\:sl-translate-y-24:hover{--tw-translate-y:96px}.hover\:sl-translate-y-28:hover{--tw-translate-y:112px}.hover\:sl-translate-y-32:hover{--tw-translate-y:128px}.hover\:sl-translate-y-36:hover{--tw-translate-y:144px}.hover\:sl-translate-y-40:hover{--tw-translate-y:160px}.hover\:sl-translate-y-44:hover{--tw-translate-y:176px}.hover\:sl-translate-y-48:hover{--tw-translate-y:192px}.hover\:sl-translate-y-52:hover{--tw-translate-y:208px}.hover\:sl-translate-y-56:hover{--tw-translate-y:224px}.hover\:sl-translate-y-60:hover{--tw-translate-y:240px}.hover\:sl-translate-y-64:hover{--tw-translate-y:256px}.hover\:sl-translate-y-72:hover{--tw-translate-y:288px}.hover\:sl-translate-y-80:hover{--tw-translate-y:320px}.hover\:sl-translate-y-96:hover{--tw-translate-y:384px}.hover\:sl-translate-y-px:hover{--tw-translate-y:1px}.hover\:sl-translate-y-0\.5:hover{--tw-translate-y:2px}.hover\:sl-translate-y-1\.5:hover{--tw-translate-y:6px}.hover\:sl-translate-y-2\.5:hover{--tw-translate-y:10px}.hover\:sl-translate-y-3\.5:hover{--tw-translate-y:14px}.hover\:sl-translate-y-4\.5:hover{--tw-translate-y:18px}.hover\:sl--translate-y-0:hover{--tw-translate-y:0px}.hover\:sl--translate-y-1:hover{--tw-translate-y:-4px}.hover\:sl--translate-y-2:hover{--tw-translate-y:-8px}.hover\:sl--translate-y-3:hover{--tw-translate-y:-12px}.hover\:sl--translate-y-4:hover{--tw-translate-y:-16px}.hover\:sl--translate-y-5:hover{--tw-translate-y:-20px}.hover\:sl--translate-y-6:hover{--tw-translate-y:-24px}.hover\:sl--translate-y-7:hover{--tw-translate-y:-28px}.hover\:sl--translate-y-8:hover{--tw-translate-y:-32px}.hover\:sl--translate-y-9:hover{--tw-translate-y:-36px}.hover\:sl--translate-y-10:hover{--tw-translate-y:-40px}.hover\:sl--translate-y-11:hover{--tw-translate-y:-44px}.hover\:sl--translate-y-12:hover{--tw-translate-y:-48px}.hover\:sl--translate-y-14:hover{--tw-translate-y:-56px}.hover\:sl--translate-y-16:hover{--tw-translate-y:-64px}.hover\:sl--translate-y-20:hover{--tw-translate-y:-80px}.hover\:sl--translate-y-24:hover{--tw-translate-y:-96px}.hover\:sl--translate-y-28:hover{--tw-translate-y:-112px}.hover\:sl--translate-y-32:hover{--tw-translate-y:-128px}.hover\:sl--translate-y-36:hover{--tw-translate-y:-144px}.hover\:sl--translate-y-40:hover{--tw-translate-y:-160px}.hover\:sl--translate-y-44:hover{--tw-translate-y:-176px}.hover\:sl--translate-y-48:hover{--tw-translate-y:-192px}.hover\:sl--translate-y-52:hover{--tw-translate-y:-208px}.hover\:sl--translate-y-56:hover{--tw-translate-y:-224px}.hover\:sl--translate-y-60:hover{--tw-translate-y:-240px}.hover\:sl--translate-y-64:hover{--tw-translate-y:-256px}.hover\:sl--translate-y-72:hover{--tw-translate-y:-288px}.hover\:sl--translate-y-80:hover{--tw-translate-y:-320px}.hover\:sl--translate-y-96:hover{--tw-translate-y:-384px}.hover\:sl--translate-y-px:hover{--tw-translate-y:-1px}.hover\:sl--translate-y-0\.5:hover{--tw-translate-y:-2px}.hover\:sl--translate-y-1\.5:hover{--tw-translate-y:-6px}.hover\:sl--translate-y-2\.5:hover{--tw-translate-y:-10px}.hover\:sl--translate-y-3\.5:hover{--tw-translate-y:-14px}.hover\:sl--translate-y-4\.5:hover{--tw-translate-y:-18px}.sl-select-none{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sl-select-text{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.sl-select-all{-webkit-user-select:all;-moz-user-select:all;user-select:all}.sl-select-auto{-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto}.sl-align-baseline{vertical-align:baseline}.sl-align-top{vertical-align:top}.sl-align-middle{vertical-align:middle}.sl-align-bottom{vertical-align:bottom}.sl-align-text-top{vertical-align:text-top}.sl-align-text-bottom{vertical-align:text-bottom}.sl-visible{visibility:visible}.sl-invisible{visibility:hidden}.sl-group:hover .group-hover\:sl-visible{visibility:visible}.sl-group:hover .group-hover\:sl-invisible{visibility:hidden}.sl-group:focus .group-focus\:sl-visible{visibility:visible}.sl-group:focus .group-focus\:sl-invisible{visibility:hidden}.sl-whitespace-normal{white-space:normal}.sl-whitespace-nowrap{white-space:nowrap}.sl-whitespace-pre{white-space:pre}.sl-whitespace-pre-line{white-space:pre-line}.sl-whitespace-pre-wrap{white-space:pre-wrap}.sl-w-0{width:0}.sl-w-1{width:4px}.sl-w-2{width:8px}.sl-w-3{width:12px}.sl-w-4{width:16px}.sl-w-5{width:20px}.sl-w-6{width:24px}.sl-w-7{width:28px}.sl-w-8{width:32px}.sl-w-9{width:36px}.sl-w-10{width:40px}.sl-w-11{width:44px}.sl-w-12{width:48px}.sl-w-14{width:56px}.sl-w-16{width:64px}.sl-w-20{width:80px}.sl-w-24{width:96px}.sl-w-28{width:112px}.sl-w-32{width:128px}.sl-w-36{width:144px}.sl-w-40{width:160px}.sl-w-44{width:176px}.sl-w-48{width:192px}.sl-w-52{width:208px}.sl-w-56{width:224px}.sl-w-60{width:240px}.sl-w-64{width:256px}.sl-w-72{width:288px}.sl-w-80{width:320px}.sl-w-96{width:384px}.sl-w-auto{width:auto}.sl-w-px{width:1px}.sl-w-0\.5{width:2px}.sl-w-1\.5{width:6px}.sl-w-2\.5{width:10px}.sl-w-3\.5{width:14px}.sl-w-4\.5{width:18px}.sl-w-xs{width:20px}.sl-w-sm{width:24px}.sl-w-md{width:32px}.sl-w-lg{width:36px}.sl-w-xl{width:44px}.sl-w-2xl{width:52px}.sl-w-3xl{width:60px}.sl-w-1\/2{width:50%}.sl-w-1\/3{width:33.333333%}.sl-w-2\/3{width:66.666667%}.sl-w-1\/4{width:25%}.sl-w-2\/4{width:50%}.sl-w-3\/4{width:75%}.sl-w-1\/5{width:20%}.sl-w-2\/5{width:50%}.sl-w-3\/5{width:60%}.sl-w-4\/5{width:80%}.sl-w-1\/6{width:16.666667%}.sl-w-2\/6{width:33.333333%}.sl-w-3\/6{width:50%}.sl-w-4\/6{width:66.666667%}.sl-w-5\/6{width:83.333333%}.sl-w-full{width:100%}.sl-w-screen{width:100vw}.sl-w-min{width:-moz-min-content;width:min-content}.sl-w-max{width:-moz-max-content;width:max-content}.sl-break-normal{overflow-wrap:normal;word-break:normal}.sl-break-words{overflow-wrap:break-word}.sl-break-all{word-break:break-all}.sl-z-0{z-index:0}.sl-z-10{z-index:10}.sl-z-20{z-index:20}.sl-z-30{z-index:30}.sl-z-40{z-index:40}.sl-z-50{z-index:50}.sl-z-auto{z-index:auto}.focus\:sl-z-0:focus{z-index:0}.focus\:sl-z-10:focus{z-index:10}.focus\:sl-z-20:focus{z-index:20}.focus\:sl-z-30:focus{z-index:30}.focus\:sl-z-40:focus{z-index:40}.focus\:sl-z-50:focus{z-index:50}.focus\:sl-z-auto:focus{z-index:auto}:root{--font-prose:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-ui:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:"SF Mono",ui-monospace,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--font-code:var(--font-mono);--fs-paragraph-leading:22px;--fs-paragraph:16px;--fs-code:14px;--fs-paragraph-small:14px;--fs-paragraph-tiny:12px;--lh-paragraph-leading:1.875;--lh-paragraph:1.625;--lh-code:1.5;--lh-paragraph-small:1.625;--lh-paragraph-tiny:1.625;--color-code:var(--color-canvas-tint);--color-on-code:var(--color-text-heading)}.sl-avatar--with-bg:before{background-color:var(--avatar-bg-color);bottom:0;content:" ";left:0;opacity:var(--avatar-bg-opacity);position:absolute;right:0;top:0}.sl-aspect-ratio:before{content:"";display:block;height:0;padding-bottom:calc(1/var(--ratio)*100%)}.sl-aspect-ratio>:not(style){align-items:center;bottom:0;display:flex;height:100%;justify-content:center;left:0;overflow:hidden;position:absolute;right:0;top:0;width:100%}.sl-aspect-ratio>img,.sl-aspect-ratio>video{object-fit:cover}.sl-badge{align-items:center;border-width:1px;display:inline-flex;outline:2px solid transparent;outline-offset:2px}.sl-form-group.sl-badge{gap:1px}.sl-badge a{color:var(--color-text-muted)}.sl-badge a:hover{color:var(--color-text);cursor:pointer}.sl-button{align-items:center;display:inline-flex;line-height:0;outline:2px solid transparent;outline-offset:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sl-button-group>.sl-button:not(:first-child):not(:last-child){border-radius:0;border-right:0}.sl-button-group>.sl-button:first-child:not(:last-child){border-bottom-right-radius:0;border-right:0;border-top-right-radius:0}.sl-button-group>.sl-button:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.sl-form-group .sl-form-group-border{border-radius:0}.sl-form-group.sl-rounded-lg>:first-child.sl-form-group-border,.sl-form-group.sl-rounded-lg>:first-child .sl-form-group-border{border-bottom-left-radius:5px;border-top-left-radius:5px}.sl-form-group.sl-rounded-xl>:first-child.sl-form-group-border,.sl-form-group.sl-rounded-xl>:first-child .sl-form-group-border{border-bottom-left-radius:7px;border-top-left-radius:7px}.sl-form-group.sl-rounded-lg>:last-child.sl-form-group-border,.sl-form-group.sl-rounded-lg>:last-child .sl-form-group-border{border-bottom-right-radius:5px;border-top-right-radius:5px}.sl-form-group.sl-rounded-xl>:last-child.sl-form-group-border,.sl-form-group.sl-rounded-xl>:last-child .sl-form-group-border{border-bottom-right-radius:7px;border-top-right-radius:7px}.sl-form-group.sl-border{gap:1px}.sl-form-group.sl-border-2{gap:2px}.sl-form-group.sl-border-4{gap:4px}.sl-form-group.sl-border-8{gap:8px}.sl-form-group{background:var(--color-border,currentColor);border-color:transparent}.sl-form-group.sl-border-button{background:var(--color-border-button)}.sl-form-group.sl-border-input{background:var(--color-border-input)}.sl-form-group.sl-border-dark{background:var(--color-border-dark)}.sl-form-group.sl-border-light{background:var(--color-border-light)}.sl-form-group .sl-form-group-border.sl-bg-transparent{background:var(--color-canvas)}.sl-form-group :focus-within{z-index:1}.sl-image--inverted{filter:invert(1) hue-rotate(180deg);mix-blend-mode:screen}.Link,.Link>code{color:var(--color-link)}.Link:hover,.Link:hover>code{color:var(--color-link-dark)}.sl-link-heading:hover .sl-link-heading__icon{opacity:1}.sl-link-heading__icon{opacity:0}.sl-menu{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sl-menu--pointer-interactions .sl-menu-item:not(.sl-menu-item--disabled):hover{background-color:var(--color-primary);color:var(--color-on-primary)}.sl-menu--pointer-interactions .sl-menu-item:not(.sl-menu-item--disabled):hover .sl-menu-item__description{color:var(--color-on-primary)}.sl-menu--pointer-interactions .sl-menu-item:not(.sl-menu-item--disabled):hover .sl-menu-item__icon{color:var(--color-on-primary)!important}.sl-menu-item__link-icon,.sl-menu-item__meta-text{opacity:.6}.sl-menu-item--disabled .sl-menu-item__title-wrapper{cursor:not-allowed;opacity:.5}.sl-menu-item--disabled .sl-menu-item__meta-text{cursor:not-allowed;opacity:.4}.sl-menu-item--focused{background-color:var(--color-primary);color:var(--color-on-primary)}.sl-menu-item--focused .sl-menu-item__link-icon,.sl-menu-item--focused .sl-menu-item__meta-text{opacity:1}.sl-menu-item--focused .sl-menu-item__description{color:var(--color-on-primary)}.sl-menu-item--focused .sl-menu-item__icon{color:var(--color-on-primary)!important}.sl-menu-item--submenu-active{background-color:var(--color-primary-tint)}.sl-menu-item__title-wrapper{max-width:250px}.sl-menu-item__description{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.sl-popover{border-radius:2px}.sl-form-group.sl-popover>:first-child.sl-form-group-border,.sl-form-group.sl-popover>:first-child .sl-form-group-border{border-bottom-left-radius:2px;border-top-left-radius:2px}.sl-form-group.sl-popover>:last-child.sl-form-group-border,.sl-form-group.sl-popover>:last-child .sl-form-group-border{border-bottom-right-radius:2px;border-top-right-radius:2px}.sl-popover{--tw-blur:var(--tw-empty,/*!*/ /*!*/);--tw-brightness:var(--tw-empty,/*!*/ /*!*/);--tw-contrast:var(--tw-empty,/*!*/ /*!*/);--tw-grayscale:var(--tw-empty,/*!*/ /*!*/);--tw-hue-rotate:var(--tw-empty,/*!*/ /*!*/);--tw-invert:var(--tw-empty,/*!*/ /*!*/);--tw-saturate:var(--tw-empty,/*!*/ /*!*/);--tw-sepia:var(--tw-empty,/*!*/ /*!*/);--tw-drop-shadow:var(--tw-empty,/*!*/ /*!*/);--tw-drop-shadow:drop-shadow(var(--drop-shadow-default1)) drop-shadow(var(--drop-shadow-default2));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.sl-popover>:not(.sl-popover__tip){border-radius:2px;position:relative;z-index:10}.sl-popover .sl-form-group.sl-rounded>:first-child.sl-form-group-border,.sl-popover .sl-form-group.sl-rounded>:first-child .sl-form-group-border,.sl-popover .sl-form-group>:not(.sl-popover__tip)>:first-child.sl-form-group-border,.sl-popover .sl-form-group>:not(.sl-popover__tip)>:first-child .sl-form-group-border{border-bottom-left-radius:2px;border-top-left-radius:2px}.sl-popover .sl-form-group.sl-rounded>:last-child.sl-form-group-border,.sl-popover .sl-form-group.sl-rounded>:last-child .sl-form-group-border,.sl-popover .sl-form-group>:not(.sl-popover__tip)>:last-child.sl-form-group-border,.sl-popover .sl-form-group>:not(.sl-popover__tip)>:last-child .sl-form-group-border{border-bottom-right-radius:2px;border-top-right-radius:2px}.sl-prose{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--fs-paragraph:1em;--fs-paragraph-small:0.875em;--fs-code:0.875em;font-family:var(--font-prose);font-size:16px;line-height:var(--lh-paragraph)}.sl-prose>:first-child{margin-top:0}.sl-prose>:last-child{margin-bottom:0}.sl-prose h1{font-size:2.25em}.sl-prose>h1{margin-bottom:1.11em;margin-top:0}.sl-prose h2{font-size:1.75em;line-height:1.3333333}.sl-prose>h2{margin-bottom:1em;margin-top:1.428em}.sl-prose h3{font-size:1.25em}.sl-prose>h3{margin-bottom:.8em;margin-top:2em}.sl-prose h4{font-size:1em}.sl-prose>h4{margin-bottom:.5em;margin-top:2em}.sl-prose h2+*,.sl-prose h3+*,.sl-prose h4+*{margin-top:0}.sl-prose strong{font-weight:600}.sl-prose .sl-text-lg{font-size:.875em}.sl-prose p{color:var(--color-text-paragraph);font-size:var(--fs-paragraph);margin-bottom:1em;margin-top:1em}.sl-prose p:first-child{margin-top:0}.sl-prose p:last-child{margin-bottom:0}.sl-prose p>a>img{display:inline}.sl-prose caption a,.sl-prose figcaption a,.sl-prose li a,.sl-prose p a,.sl-prose table a{color:var(--color-link)}.sl-prose caption a:hover,.sl-prose figcaption a:hover,.sl-prose li a:hover,.sl-prose p a:hover,.sl-prose table a:hover{color:var(--color-link-dark)}.sl-prose caption a,.sl-prose figcaption a,.sl-prose li a,.sl-prose p a,.sl-prose table a{--color-link:var(--color-text-primary);--color-link-dark:var(--color-primary-dark)}.sl-prose hr{margin-bottom:1em;margin-top:1em}.sl-prose .sl-live-code{margin:1.25em -4px;table-layout:auto;width:100%}.sl-prose .sl-live-code__inner>pre{margin-bottom:0;margin-top:0}.sl-prose .sl-callout,.sl-prose ol,.sl-prose ul{margin-bottom:1.5em;margin-top:1.5em}.sl-prose ol,.sl-prose ul{line-height:var(--lh-paragraph)}.sl-prose ol li,.sl-prose ul li{padding-left:2em}.sl-prose ol li{position:relative}.sl-prose ol li:before{content:counter(list-item) ". ";font-variant-numeric:tabular-nums}.sl-prose ul:not(.contains-task-list) li{position:relative}.sl-prose ul:not(.contains-task-list) li:before{background-color:var(--color-text);border-radius:50%;content:"";height:.375em;left:.75em;opacity:.7;position:absolute;top:.625em;width:.375em}.sl-prose li{margin-bottom:4px;margin-top:4px;padding-left:1.75em}.sl-prose li p{display:inline;margin-bottom:.75em;margin-top:.75em}.sl-prose li>:first-child{margin-top:0}.sl-prose>ol p+:last-child,.sl-prose>ul p+:last-child{margin-bottom:.75em}.sl-prose ol ol,.sl-prose ol ul,.sl-prose ul ol,.sl-prose ul ul{margin-bottom:2px;margin-top:2px}.sl-prose ul.contains-task-list input{margin-left:-1.875em;margin-right:.625em;position:relative;top:1px}.sl-prose ul.contains-task-list p{margin-top:0}.sl-prose figure{margin-bottom:1.5em;margin-top:1.5em}.sl-prose figure figure,.sl-prose figure img,.sl-prose figure video{margin-bottom:0;margin-top:0}.sl-prose figure>figcaption,.sl-prose figure>figcaption p{color:var(--color-text-muted);font-size:var(--fs-paragraph-small);line-height:var(--lh-paragraph-small);margin-top:8px;padding-left:16px;padding-right:16px;text-align:center}.sl-prose blockquote p{margin-bottom:.5em;margin-top:.5em}.sl-prose table{font-size:var(--fs-paragraph-small);margin-bottom:1.5em;margin-left:-4px;margin-right:-4px;overflow-x:auto;table-layout:auto;width:100%}.sl-prose thead td,.sl-prose thead th{color:var(--color-text-muted);font-size:.857em;font-weight:500;padding:8px 12px;text-transform:uppercase}.sl-prose thead td:first-child,.sl-prose thead th:first-child{padding-left:4px}.sl-prose tbody{border-radius:5px}.sl-prose .sl-form-group.sl-rounded-lg>:first-child.sl-form-group-border,.sl-prose .sl-form-group.sl-rounded-lg>:first-child .sl-form-group-border,.sl-prose .sl-form-grouptbody>:first-child.sl-form-group-border,.sl-prose .sl-form-grouptbody>:first-child .sl-form-group-border{border-bottom-left-radius:5px;border-top-left-radius:5px}.sl-prose .sl-form-group.sl-rounded-lg>:last-child.sl-form-group-border,.sl-prose .sl-form-group.sl-rounded-lg>:last-child .sl-form-group-border,.sl-prose .sl-form-grouptbody>:last-child.sl-form-group-border,.sl-prose .sl-form-grouptbody>:last-child .sl-form-group-border{border-bottom-right-radius:5px;border-top-right-radius:5px}.sl-prose tbody{box-shadow:0 0 0 1px var(--color-border,currentColor)}.sl-prose tbody tr{border-top-width:1px}.sl-prose tbody tr:first-child{border-top:0}.sl-prose tbody tr:nth-child(2n){background-color:var(--color-canvas-tint)}.sl-prose td{margin:.625em .75em;padding:10px 12px;vertical-align:top}.sl-prose td:not([align=center],[align=right]),.sl-prose th:not([align=center],[align=right]){text-align:left}.sl-prose .mermaid{margin-bottom:1.5em;margin-top:1.5em}.sl-prose .mermaid>svg{border-radius:5px;border-width:1px}.sl-prose .mermaid .sl-form-group.sl-rounded-lg>:first-child.sl-form-group-border,.sl-prose .mermaid .sl-form-group.sl-rounded-lg>:first-child .sl-form-group-border,.sl-prose .mermaid .sl-form-group>svg>:first-child.sl-form-group-border,.sl-prose .mermaid .sl-form-group>svg>:first-child .sl-form-group-border{border-bottom-left-radius:5px;border-top-left-radius:5px}.sl-prose .mermaid .sl-form-group.sl-rounded-lg>:last-child.sl-form-group-border,.sl-prose .mermaid .sl-form-group.sl-rounded-lg>:last-child .sl-form-group-border,.sl-prose .mermaid .sl-form-group>svg>:last-child.sl-form-group-border,.sl-prose .mermaid .sl-form-group>svg>:last-child .sl-form-group-border{border-bottom-right-radius:5px;border-top-right-radius:5px}.sl-prose .mermaid .sl-form-group>svg{gap:1px}.sl-prose .mermaid>svg{height:auto!important;padding:1.25em}.sl-prose .sl-code-group .mermaid,.sl-prose .sl-code-group pre{margin-top:0}.sl-svg-focus{filter:drop-shadow(0 0 1px hsla(var(--primary-h),80%,51%,.9))}.sl-radio-group__radio:hover{cursor:pointer}.sl-radio-group__radio--disabled{opacity:.6}.sl-radio-group__radio--disabled:hover{cursor:not-allowed}.sl-switch .sl-switch__indicator{transition:background-color .1s cubic-bezier(.4,1,.75,.9)}.sl-switch .sl-switch__indicator .sl-switch__icon{visibility:hidden}.sl-switch .sl-switch__indicator:before{background-color:var(--color-canvas);border-radius:50%;content:"";height:calc(100% - 4px);left:0;margin:2px;position:absolute;transition:left .1s cubic-bezier(.4,1,.75,.9);width:calc(50% - 4px)}.sl-switch input:checked:disabled~.sl-switch__indicator{background-color:var(--color-primary-light)}.sl-switch input:checked~.sl-switch__indicator{background-color:var(--color-primary)}.sl-switch input:checked~.sl-switch__indicator .sl-switch__icon{visibility:visible}.sl-switch input:checked~.sl-switch__indicator:before{left:50%}.sl-tooltip{border-radius:2px;font-size:11px;padding:4px 6px}.sl-form-group.sl-tooltip>:first-child.sl-form-group-border,.sl-form-group.sl-tooltip>:first-child .sl-form-group-border{border-bottom-left-radius:2px;border-top-left-radius:2px}.sl-form-group.sl-tooltip>:last-child.sl-form-group-border,.sl-form-group.sl-tooltip>:last-child .sl-form-group-border{border-bottom-right-radius:2px;border-top-right-radius:2px}.sl-tooltip{--tw-blur:var(--tw-empty,/*!*/ /*!*/);--tw-brightness:var(--tw-empty,/*!*/ /*!*/);--tw-contrast:var(--tw-empty,/*!*/ /*!*/);--tw-grayscale:var(--tw-empty,/*!*/ /*!*/);--tw-hue-rotate:var(--tw-empty,/*!*/ /*!*/);--tw-invert:var(--tw-empty,/*!*/ /*!*/);--tw-saturate:var(--tw-empty,/*!*/ /*!*/);--tw-sepia:var(--tw-empty,/*!*/ /*!*/);--tw-drop-shadow:var(--tw-empty,/*!*/ /*!*/);--tw-drop-shadow:drop-shadow(var(--drop-shadow-default1)) drop-shadow(var(--drop-shadow-default2));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);max-width:300px}.sl-tooltip>:not(.sl-tooltip_tip){position:relative;z-index:10}.sl-drawer{overflow:auto;transition-property:transform}.sl-drawer.left{left:0;top:0;transform:translateX(-105%)}.sl-drawer.right{right:0;top:0;transform:translateX(100%)}.sl-drawer.top{left:0;right:0;top:0;transform:translateY(-100%)}.sl-drawer.bottom{bottom:0;left:0;right:0;transform:translateY(100%)}.sl-drawer-container.in.open .left,.sl-drawer-container.in.open .right{transform:translateX(0)}.sl-drawer-container.in.open .bottom,.sl-drawer-container.in.open .top{transform:translateY(0)}input,textarea{background-color:transparent}.sl-focus-ring{--tw-ring-color:hsla(var(--primary-h),80%,61%,var(--tw-ring-opacity)) ;--tw-ring-opacity:0.5;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);border-radius:2px;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.sl-form-group.sl-focus-ring>:first-child.sl-form-group-border,.sl-form-group.sl-focus-ring>:first-child .sl-form-group-border,.sl-form-group.sl-rounded>:first-child.sl-form-group-border,.sl-form-group.sl-rounded>:first-child .sl-form-group-border{border-bottom-left-radius:2px;border-top-left-radius:2px}.sl-form-group.sl-focus-ring>:last-child.sl-form-group-border,.sl-form-group.sl-focus-ring>:last-child .sl-form-group-border,.sl-form-group.sl-rounded>:last-child.sl-form-group-border,.sl-form-group.sl-rounded>:last-child .sl-form-group-border{border-bottom-right-radius:2px;border-top-right-radius:2px}@media (max-width:479px){.sm\:sl-stack--1{gap:4px}.sm\:sl-stack--2{gap:8px}.sm\:sl-stack--3{gap:12px}.sm\:sl-stack--4{gap:16px}.sm\:sl-stack--5{gap:20px}.sm\:sl-stack--6{gap:24px}.sm\:sl-stack--7{gap:28px}.sm\:sl-stack--8{gap:32px}.sm\:sl-stack--9{gap:36px}.sm\:sl-stack--10{gap:40px}.sm\:sl-stack--12{gap:48px}.sm\:sl-stack--14{gap:56px}.sm\:sl-stack--16{gap:64px}.sm\:sl-stack--20{gap:80px}.sm\:sl-stack--24{gap:96px}.sm\:sl-stack--32{gap:128px}.sm\:sl-content-center{align-content:center}.sm\:sl-content-start{align-content:flex-start}.sm\:sl-content-end{align-content:flex-end}.sm\:sl-content-between{align-content:space-between}.sm\:sl-content-around{align-content:space-around}.sm\:sl-content-evenly{align-content:space-evenly}.sm\:sl-items-start{align-items:flex-start}.sm\:sl-items-end{align-items:flex-end}.sm\:sl-items-center{align-items:center}.sm\:sl-items-baseline{align-items:baseline}.sm\:sl-items-stretch{align-items:stretch}.sm\:sl-self-auto{align-self:auto}.sm\:sl-self-start{align-self:flex-start}.sm\:sl-self-end{align-self:flex-end}.sm\:sl-self-center{align-self:center}.sm\:sl-self-stretch{align-self:stretch}.sm\:sl-blur-0,.sm\:sl-blur-none{--tw-blur:blur(0)}.sm\:sl-blur-sm{--tw-blur:blur(4px)}.sm\:sl-blur{--tw-blur:blur(8px)}.sm\:sl-blur-md{--tw-blur:blur(12px)}.sm\:sl-blur-lg{--tw-blur:blur(16px)}.sm\:sl-blur-xl{--tw-blur:blur(24px)}.sm\:sl-blur-2xl{--tw-blur:blur(40px)}.sm\:sl-blur-3xl{--tw-blur:blur(64px)}.sm\:sl-block{display:block}.sm\:sl-inline-block{display:inline-block}.sm\:sl-inline{display:inline}.sm\:sl-flex{display:flex}.sm\:sl-inline-flex{display:inline-flex}.sm\:sl-table{display:table}.sm\:sl-inline-table{display:inline-table}.sm\:sl-table-caption{display:table-caption}.sm\:sl-table-cell{display:table-cell}.sm\:sl-table-column{display:table-column}.sm\:sl-table-column-group{display:table-column-group}.sm\:sl-table-footer-group{display:table-footer-group}.sm\:sl-table-header-group{display:table-header-group}.sm\:sl-table-row-group{display:table-row-group}.sm\:sl-table-row{display:table-row}.sm\:sl-flow-root{display:flow-root}.sm\:sl-grid{display:grid}.sm\:sl-inline-grid{display:inline-grid}.sm\:sl-contents{display:contents}.sm\:sl-list-item{display:list-item}.sm\:sl-hidden{display:none}.sm\:sl-drop-shadow{--tw-drop-shadow:drop-shadow(var(--drop-shadow-default1)) drop-shadow(var(--drop-shadow-default2))}.sm\:sl-flex-1{flex:1 1}.sm\:sl-flex-auto{flex:1 1 auto}.sm\:sl-flex-initial{flex:0 1 auto}.sm\:sl-flex-none{flex:none}.sm\:sl-flex-row{flex-direction:row}.sm\:sl-flex-row-reverse{flex-direction:row-reverse}.sm\:sl-flex-col{flex-direction:column}.sm\:sl-flex-col-reverse{flex-direction:column-reverse}.sm\:sl-flex-grow-0{flex-grow:0}.sm\:sl-flex-grow{flex-grow:1}.sm\:sl-flex-shrink-0{flex-shrink:0}.sm\:sl-flex-shrink{flex-shrink:1}.sm\:sl-flex-wrap{flex-wrap:wrap}.sm\:sl-flex-wrap-reverse{flex-wrap:wrap-reverse}.sm\:sl-flex-nowrap{flex-wrap:nowrap}.sm\:sl-h-0{height:0}.sm\:sl-h-1{height:4px}.sm\:sl-h-2{height:8px}.sm\:sl-h-3{height:12px}.sm\:sl-h-4{height:16px}.sm\:sl-h-5{height:20px}.sm\:sl-h-6{height:24px}.sm\:sl-h-7{height:28px}.sm\:sl-h-8{height:32px}.sm\:sl-h-9{height:36px}.sm\:sl-h-10{height:40px}.sm\:sl-h-11{height:44px}.sm\:sl-h-12{height:48px}.sm\:sl-h-14{height:56px}.sm\:sl-h-16{height:64px}.sm\:sl-h-20{height:80px}.sm\:sl-h-24{height:96px}.sm\:sl-h-28{height:112px}.sm\:sl-h-32{height:128px}.sm\:sl-h-36{height:144px}.sm\:sl-h-40{height:160px}.sm\:sl-h-44{height:176px}.sm\:sl-h-48{height:192px}.sm\:sl-h-52{height:208px}.sm\:sl-h-56{height:224px}.sm\:sl-h-60{height:240px}.sm\:sl-h-64{height:256px}.sm\:sl-h-72{height:288px}.sm\:sl-h-80{height:320px}.sm\:sl-h-96{height:384px}.sm\:sl-h-auto{height:auto}.sm\:sl-h-px{height:1px}.sm\:sl-h-0\.5{height:2px}.sm\:sl-h-1\.5{height:6px}.sm\:sl-h-2\.5{height:10px}.sm\:sl-h-3\.5{height:14px}.sm\:sl-h-4\.5{height:18px}.sm\:sl-h-xs{height:20px}.sm\:sl-h-sm{height:24px}.sm\:sl-h-md{height:32px}.sm\:sl-h-lg{height:36px}.sm\:sl-h-xl{height:44px}.sm\:sl-h-2xl{height:52px}.sm\:sl-h-3xl{height:60px}.sm\:sl-h-full{height:100%}.sm\:sl-h-screen{height:100vh}.sm\:sl-justify-start{justify-content:flex-start}.sm\:sl-justify-end{justify-content:flex-end}.sm\:sl-justify-center{justify-content:center}.sm\:sl-justify-between{justify-content:space-between}.sm\:sl-justify-around{justify-content:space-around}.sm\:sl-justify-evenly{justify-content:space-evenly}.sm\:sl-justify-items-start{justify-items:start}.sm\:sl-justify-items-end{justify-items:end}.sm\:sl-justify-items-center{justify-items:center}.sm\:sl-justify-items-stretch{justify-items:stretch}.sm\:sl-justify-self-auto{justify-self:auto}.sm\:sl-justify-self-start{justify-self:start}.sm\:sl-justify-self-end{justify-self:end}.sm\:sl-justify-self-center{justify-self:center}.sm\:sl-justify-self-stretch{justify-self:stretch}.sm\:sl-m-0{margin:0}.sm\:sl-m-1{margin:4px}.sm\:sl-m-2{margin:8px}.sm\:sl-m-3{margin:12px}.sm\:sl-m-4{margin:16px}.sm\:sl-m-5{margin:20px}.sm\:sl-m-6{margin:24px}.sm\:sl-m-7{margin:28px}.sm\:sl-m-8{margin:32px}.sm\:sl-m-9{margin:36px}.sm\:sl-m-10{margin:40px}.sm\:sl-m-11{margin:44px}.sm\:sl-m-12{margin:48px}.sm\:sl-m-14{margin:56px}.sm\:sl-m-16{margin:64px}.sm\:sl-m-20{margin:80px}.sm\:sl-m-24{margin:96px}.sm\:sl-m-28{margin:112px}.sm\:sl-m-32{margin:128px}.sm\:sl-m-36{margin:144px}.sm\:sl-m-40{margin:160px}.sm\:sl-m-44{margin:176px}.sm\:sl-m-48{margin:192px}.sm\:sl-m-52{margin:208px}.sm\:sl-m-56{margin:224px}.sm\:sl-m-60{margin:240px}.sm\:sl-m-64{margin:256px}.sm\:sl-m-72{margin:288px}.sm\:sl-m-80{margin:320px}.sm\:sl-m-96{margin:384px}.sm\:sl-m-auto{margin:auto}.sm\:sl-m-px{margin:1px}.sm\:sl-m-0\.5{margin:2px}.sm\:sl-m-1\.5{margin:6px}.sm\:sl-m-2\.5{margin:10px}.sm\:sl-m-3\.5{margin:14px}.sm\:sl-m-4\.5{margin:18px}.sm\:sl--m-0{margin:0}.sm\:sl--m-1{margin:-4px}.sm\:sl--m-2{margin:-8px}.sm\:sl--m-3{margin:-12px}.sm\:sl--m-4{margin:-16px}.sm\:sl--m-5{margin:-20px}.sm\:sl--m-6{margin:-24px}.sm\:sl--m-7{margin:-28px}.sm\:sl--m-8{margin:-32px}.sm\:sl--m-9{margin:-36px}.sm\:sl--m-10{margin:-40px}.sm\:sl--m-11{margin:-44px}.sm\:sl--m-12{margin:-48px}.sm\:sl--m-14{margin:-56px}.sm\:sl--m-16{margin:-64px}.sm\:sl--m-20{margin:-80px}.sm\:sl--m-24{margin:-96px}.sm\:sl--m-28{margin:-112px}.sm\:sl--m-32{margin:-128px}.sm\:sl--m-36{margin:-144px}.sm\:sl--m-40{margin:-160px}.sm\:sl--m-44{margin:-176px}.sm\:sl--m-48{margin:-192px}.sm\:sl--m-52{margin:-208px}.sm\:sl--m-56{margin:-224px}.sm\:sl--m-60{margin:-240px}.sm\:sl--m-64{margin:-256px}.sm\:sl--m-72{margin:-288px}.sm\:sl--m-80{margin:-320px}.sm\:sl--m-96{margin:-384px}.sm\:sl--m-px{margin:-1px}.sm\:sl--m-0\.5{margin:-2px}.sm\:sl--m-1\.5{margin:-6px}.sm\:sl--m-2\.5{margin:-10px}.sm\:sl--m-3\.5{margin:-14px}.sm\:sl--m-4\.5{margin:-18px}.sm\:sl-my-0{margin-bottom:0;margin-top:0}.sm\:sl-mx-0{margin-left:0;margin-right:0}.sm\:sl-my-1{margin-bottom:4px;margin-top:4px}.sm\:sl-mx-1{margin-left:4px;margin-right:4px}.sm\:sl-my-2{margin-bottom:8px;margin-top:8px}.sm\:sl-mx-2{margin-left:8px;margin-right:8px}.sm\:sl-my-3{margin-bottom:12px;margin-top:12px}.sm\:sl-mx-3{margin-left:12px;margin-right:12px}.sm\:sl-my-4{margin-bottom:16px;margin-top:16px}.sm\:sl-mx-4{margin-left:16px;margin-right:16px}.sm\:sl-my-5{margin-bottom:20px;margin-top:20px}.sm\:sl-mx-5{margin-left:20px;margin-right:20px}.sm\:sl-my-6{margin-bottom:24px;margin-top:24px}.sm\:sl-mx-6{margin-left:24px;margin-right:24px}.sm\:sl-my-7{margin-bottom:28px;margin-top:28px}.sm\:sl-mx-7{margin-left:28px;margin-right:28px}.sm\:sl-my-8{margin-bottom:32px;margin-top:32px}.sm\:sl-mx-8{margin-left:32px;margin-right:32px}.sm\:sl-my-9{margin-bottom:36px;margin-top:36px}.sm\:sl-mx-9{margin-left:36px;margin-right:36px}.sm\:sl-my-10{margin-bottom:40px;margin-top:40px}.sm\:sl-mx-10{margin-left:40px;margin-right:40px}.sm\:sl-my-11{margin-bottom:44px;margin-top:44px}.sm\:sl-mx-11{margin-left:44px;margin-right:44px}.sm\:sl-my-12{margin-bottom:48px;margin-top:48px}.sm\:sl-mx-12{margin-left:48px;margin-right:48px}.sm\:sl-my-14{margin-bottom:56px;margin-top:56px}.sm\:sl-mx-14{margin-left:56px;margin-right:56px}.sm\:sl-my-16{margin-bottom:64px;margin-top:64px}.sm\:sl-mx-16{margin-left:64px;margin-right:64px}.sm\:sl-my-20{margin-bottom:80px;margin-top:80px}.sm\:sl-mx-20{margin-left:80px;margin-right:80px}.sm\:sl-my-24{margin-bottom:96px;margin-top:96px}.sm\:sl-mx-24{margin-left:96px;margin-right:96px}.sm\:sl-my-28{margin-bottom:112px;margin-top:112px}.sm\:sl-mx-28{margin-left:112px;margin-right:112px}.sm\:sl-my-32{margin-bottom:128px;margin-top:128px}.sm\:sl-mx-32{margin-left:128px;margin-right:128px}.sm\:sl-my-36{margin-bottom:144px;margin-top:144px}.sm\:sl-mx-36{margin-left:144px;margin-right:144px}.sm\:sl-my-40{margin-bottom:160px;margin-top:160px}.sm\:sl-mx-40{margin-left:160px;margin-right:160px}.sm\:sl-my-44{margin-bottom:176px;margin-top:176px}.sm\:sl-mx-44{margin-left:176px;margin-right:176px}.sm\:sl-my-48{margin-bottom:192px;margin-top:192px}.sm\:sl-mx-48{margin-left:192px;margin-right:192px}.sm\:sl-my-52{margin-bottom:208px;margin-top:208px}.sm\:sl-mx-52{margin-left:208px;margin-right:208px}.sm\:sl-my-56{margin-bottom:224px;margin-top:224px}.sm\:sl-mx-56{margin-left:224px;margin-right:224px}.sm\:sl-my-60{margin-bottom:240px;margin-top:240px}.sm\:sl-mx-60{margin-left:240px;margin-right:240px}.sm\:sl-my-64{margin-bottom:256px;margin-top:256px}.sm\:sl-mx-64{margin-left:256px;margin-right:256px}.sm\:sl-my-72{margin-bottom:288px;margin-top:288px}.sm\:sl-mx-72{margin-left:288px;margin-right:288px}.sm\:sl-my-80{margin-bottom:320px;margin-top:320px}.sm\:sl-mx-80{margin-left:320px;margin-right:320px}.sm\:sl-my-96{margin-bottom:384px;margin-top:384px}.sm\:sl-mx-96{margin-left:384px;margin-right:384px}.sm\:sl-my-auto{margin-bottom:auto;margin-top:auto}.sm\:sl-mx-auto{margin-left:auto;margin-right:auto}.sm\:sl-my-px{margin-bottom:1px;margin-top:1px}.sm\:sl-mx-px{margin-left:1px;margin-right:1px}.sm\:sl-my-0\.5{margin-bottom:2px;margin-top:2px}.sm\:sl-mx-0\.5{margin-left:2px;margin-right:2px}.sm\:sl-my-1\.5{margin-bottom:6px;margin-top:6px}.sm\:sl-mx-1\.5{margin-left:6px;margin-right:6px}.sm\:sl-my-2\.5{margin-bottom:10px;margin-top:10px}.sm\:sl-mx-2\.5{margin-left:10px;margin-right:10px}.sm\:sl-my-3\.5{margin-bottom:14px;margin-top:14px}.sm\:sl-mx-3\.5{margin-left:14px;margin-right:14px}.sm\:sl-my-4\.5{margin-bottom:18px;margin-top:18px}.sm\:sl-mx-4\.5{margin-left:18px;margin-right:18px}.sm\:sl--my-0{margin-bottom:0;margin-top:0}.sm\:sl--mx-0{margin-left:0;margin-right:0}.sm\:sl--my-1{margin-bottom:-4px;margin-top:-4px}.sm\:sl--mx-1{margin-left:-4px;margin-right:-4px}.sm\:sl--my-2{margin-bottom:-8px;margin-top:-8px}.sm\:sl--mx-2{margin-left:-8px;margin-right:-8px}.sm\:sl--my-3{margin-bottom:-12px;margin-top:-12px}.sm\:sl--mx-3{margin-left:-12px;margin-right:-12px}.sm\:sl--my-4{margin-bottom:-16px;margin-top:-16px}.sm\:sl--mx-4{margin-left:-16px;margin-right:-16px}.sm\:sl--my-5{margin-bottom:-20px;margin-top:-20px}.sm\:sl--mx-5{margin-left:-20px;margin-right:-20px}.sm\:sl--my-6{margin-bottom:-24px;margin-top:-24px}.sm\:sl--mx-6{margin-left:-24px;margin-right:-24px}.sm\:sl--my-7{margin-bottom:-28px;margin-top:-28px}.sm\:sl--mx-7{margin-left:-28px;margin-right:-28px}.sm\:sl--my-8{margin-bottom:-32px;margin-top:-32px}.sm\:sl--mx-8{margin-left:-32px;margin-right:-32px}.sm\:sl--my-9{margin-bottom:-36px;margin-top:-36px}.sm\:sl--mx-9{margin-left:-36px;margin-right:-36px}.sm\:sl--my-10{margin-bottom:-40px;margin-top:-40px}.sm\:sl--mx-10{margin-left:-40px;margin-right:-40px}.sm\:sl--my-11{margin-bottom:-44px;margin-top:-44px}.sm\:sl--mx-11{margin-left:-44px;margin-right:-44px}.sm\:sl--my-12{margin-bottom:-48px;margin-top:-48px}.sm\:sl--mx-12{margin-left:-48px;margin-right:-48px}.sm\:sl--my-14{margin-bottom:-56px;margin-top:-56px}.sm\:sl--mx-14{margin-left:-56px;margin-right:-56px}.sm\:sl--my-16{margin-bottom:-64px;margin-top:-64px}.sm\:sl--mx-16{margin-left:-64px;margin-right:-64px}.sm\:sl--my-20{margin-bottom:-80px;margin-top:-80px}.sm\:sl--mx-20{margin-left:-80px;margin-right:-80px}.sm\:sl--my-24{margin-bottom:-96px;margin-top:-96px}.sm\:sl--mx-24{margin-left:-96px;margin-right:-96px}.sm\:sl--my-28{margin-bottom:-112px;margin-top:-112px}.sm\:sl--mx-28{margin-left:-112px;margin-right:-112px}.sm\:sl--my-32{margin-bottom:-128px;margin-top:-128px}.sm\:sl--mx-32{margin-left:-128px;margin-right:-128px}.sm\:sl--my-36{margin-bottom:-144px;margin-top:-144px}.sm\:sl--mx-36{margin-left:-144px;margin-right:-144px}.sm\:sl--my-40{margin-bottom:-160px;margin-top:-160px}.sm\:sl--mx-40{margin-left:-160px;margin-right:-160px}.sm\:sl--my-44{margin-bottom:-176px;margin-top:-176px}.sm\:sl--mx-44{margin-left:-176px;margin-right:-176px}.sm\:sl--my-48{margin-bottom:-192px;margin-top:-192px}.sm\:sl--mx-48{margin-left:-192px;margin-right:-192px}.sm\:sl--my-52{margin-bottom:-208px;margin-top:-208px}.sm\:sl--mx-52{margin-left:-208px;margin-right:-208px}.sm\:sl--my-56{margin-bottom:-224px;margin-top:-224px}.sm\:sl--mx-56{margin-left:-224px;margin-right:-224px}.sm\:sl--my-60{margin-bottom:-240px;margin-top:-240px}.sm\:sl--mx-60{margin-left:-240px;margin-right:-240px}.sm\:sl--my-64{margin-bottom:-256px;margin-top:-256px}.sm\:sl--mx-64{margin-left:-256px;margin-right:-256px}.sm\:sl--my-72{margin-bottom:-288px;margin-top:-288px}.sm\:sl--mx-72{margin-left:-288px;margin-right:-288px}.sm\:sl--my-80{margin-bottom:-320px;margin-top:-320px}.sm\:sl--mx-80{margin-left:-320px;margin-right:-320px}.sm\:sl--my-96{margin-bottom:-384px;margin-top:-384px}.sm\:sl--mx-96{margin-left:-384px;margin-right:-384px}.sm\:sl--my-px{margin-bottom:-1px;margin-top:-1px}.sm\:sl--mx-px{margin-left:-1px;margin-right:-1px}.sm\:sl--my-0\.5{margin-bottom:-2px;margin-top:-2px}.sm\:sl--mx-0\.5{margin-left:-2px;margin-right:-2px}.sm\:sl--my-1\.5{margin-bottom:-6px;margin-top:-6px}.sm\:sl--mx-1\.5{margin-left:-6px;margin-right:-6px}.sm\:sl--my-2\.5{margin-bottom:-10px;margin-top:-10px}.sm\:sl--mx-2\.5{margin-left:-10px;margin-right:-10px}.sm\:sl--my-3\.5{margin-bottom:-14px;margin-top:-14px}.sm\:sl--mx-3\.5{margin-left:-14px;margin-right:-14px}.sm\:sl--my-4\.5{margin-bottom:-18px;margin-top:-18px}.sm\:sl--mx-4\.5{margin-left:-18px;margin-right:-18px}.sm\:sl-mt-0{margin-top:0}.sm\:sl-mr-0{margin-right:0}.sm\:sl-mb-0{margin-bottom:0}.sm\:sl-ml-0{margin-left:0}.sm\:sl-mt-1{margin-top:4px}.sm\:sl-mr-1{margin-right:4px}.sm\:sl-mb-1{margin-bottom:4px}.sm\:sl-ml-1{margin-left:4px}.sm\:sl-mt-2{margin-top:8px}.sm\:sl-mr-2{margin-right:8px}.sm\:sl-mb-2{margin-bottom:8px}.sm\:sl-ml-2{margin-left:8px}.sm\:sl-mt-3{margin-top:12px}.sm\:sl-mr-3{margin-right:12px}.sm\:sl-mb-3{margin-bottom:12px}.sm\:sl-ml-3{margin-left:12px}.sm\:sl-mt-4{margin-top:16px}.sm\:sl-mr-4{margin-right:16px}.sm\:sl-mb-4{margin-bottom:16px}.sm\:sl-ml-4{margin-left:16px}.sm\:sl-mt-5{margin-top:20px}.sm\:sl-mr-5{margin-right:20px}.sm\:sl-mb-5{margin-bottom:20px}.sm\:sl-ml-5{margin-left:20px}.sm\:sl-mt-6{margin-top:24px}.sm\:sl-mr-6{margin-right:24px}.sm\:sl-mb-6{margin-bottom:24px}.sm\:sl-ml-6{margin-left:24px}.sm\:sl-mt-7{margin-top:28px}.sm\:sl-mr-7{margin-right:28px}.sm\:sl-mb-7{margin-bottom:28px}.sm\:sl-ml-7{margin-left:28px}.sm\:sl-mt-8{margin-top:32px}.sm\:sl-mr-8{margin-right:32px}.sm\:sl-mb-8{margin-bottom:32px}.sm\:sl-ml-8{margin-left:32px}.sm\:sl-mt-9{margin-top:36px}.sm\:sl-mr-9{margin-right:36px}.sm\:sl-mb-9{margin-bottom:36px}.sm\:sl-ml-9{margin-left:36px}.sm\:sl-mt-10{margin-top:40px}.sm\:sl-mr-10{margin-right:40px}.sm\:sl-mb-10{margin-bottom:40px}.sm\:sl-ml-10{margin-left:40px}.sm\:sl-mt-11{margin-top:44px}.sm\:sl-mr-11{margin-right:44px}.sm\:sl-mb-11{margin-bottom:44px}.sm\:sl-ml-11{margin-left:44px}.sm\:sl-mt-12{margin-top:48px}.sm\:sl-mr-12{margin-right:48px}.sm\:sl-mb-12{margin-bottom:48px}.sm\:sl-ml-12{margin-left:48px}.sm\:sl-mt-14{margin-top:56px}.sm\:sl-mr-14{margin-right:56px}.sm\:sl-mb-14{margin-bottom:56px}.sm\:sl-ml-14{margin-left:56px}.sm\:sl-mt-16{margin-top:64px}.sm\:sl-mr-16{margin-right:64px}.sm\:sl-mb-16{margin-bottom:64px}.sm\:sl-ml-16{margin-left:64px}.sm\:sl-mt-20{margin-top:80px}.sm\:sl-mr-20{margin-right:80px}.sm\:sl-mb-20{margin-bottom:80px}.sm\:sl-ml-20{margin-left:80px}.sm\:sl-mt-24{margin-top:96px}.sm\:sl-mr-24{margin-right:96px}.sm\:sl-mb-24{margin-bottom:96px}.sm\:sl-ml-24{margin-left:96px}.sm\:sl-mt-28{margin-top:112px}.sm\:sl-mr-28{margin-right:112px}.sm\:sl-mb-28{margin-bottom:112px}.sm\:sl-ml-28{margin-left:112px}.sm\:sl-mt-32{margin-top:128px}.sm\:sl-mr-32{margin-right:128px}.sm\:sl-mb-32{margin-bottom:128px}.sm\:sl-ml-32{margin-left:128px}.sm\:sl-mt-36{margin-top:144px}.sm\:sl-mr-36{margin-right:144px}.sm\:sl-mb-36{margin-bottom:144px}.sm\:sl-ml-36{margin-left:144px}.sm\:sl-mt-40{margin-top:160px}.sm\:sl-mr-40{margin-right:160px}.sm\:sl-mb-40{margin-bottom:160px}.sm\:sl-ml-40{margin-left:160px}.sm\:sl-mt-44{margin-top:176px}.sm\:sl-mr-44{margin-right:176px}.sm\:sl-mb-44{margin-bottom:176px}.sm\:sl-ml-44{margin-left:176px}.sm\:sl-mt-48{margin-top:192px}.sm\:sl-mr-48{margin-right:192px}.sm\:sl-mb-48{margin-bottom:192px}.sm\:sl-ml-48{margin-left:192px}.sm\:sl-mt-52{margin-top:208px}.sm\:sl-mr-52{margin-right:208px}.sm\:sl-mb-52{margin-bottom:208px}.sm\:sl-ml-52{margin-left:208px}.sm\:sl-mt-56{margin-top:224px}.sm\:sl-mr-56{margin-right:224px}.sm\:sl-mb-56{margin-bottom:224px}.sm\:sl-ml-56{margin-left:224px}.sm\:sl-mt-60{margin-top:240px}.sm\:sl-mr-60{margin-right:240px}.sm\:sl-mb-60{margin-bottom:240px}.sm\:sl-ml-60{margin-left:240px}.sm\:sl-mt-64{margin-top:256px}.sm\:sl-mr-64{margin-right:256px}.sm\:sl-mb-64{margin-bottom:256px}.sm\:sl-ml-64{margin-left:256px}.sm\:sl-mt-72{margin-top:288px}.sm\:sl-mr-72{margin-right:288px}.sm\:sl-mb-72{margin-bottom:288px}.sm\:sl-ml-72{margin-left:288px}.sm\:sl-mt-80{margin-top:320px}.sm\:sl-mr-80{margin-right:320px}.sm\:sl-mb-80{margin-bottom:320px}.sm\:sl-ml-80{margin-left:320px}.sm\:sl-mt-96{margin-top:384px}.sm\:sl-mr-96{margin-right:384px}.sm\:sl-mb-96{margin-bottom:384px}.sm\:sl-ml-96{margin-left:384px}.sm\:sl-mt-auto{margin-top:auto}.sm\:sl-mr-auto{margin-right:auto}.sm\:sl-mb-auto{margin-bottom:auto}.sm\:sl-ml-auto{margin-left:auto}.sm\:sl-mt-px{margin-top:1px}.sm\:sl-mr-px{margin-right:1px}.sm\:sl-mb-px{margin-bottom:1px}.sm\:sl-ml-px{margin-left:1px}.sm\:sl-mt-0\.5{margin-top:2px}.sm\:sl-mr-0\.5{margin-right:2px}.sm\:sl-mb-0\.5{margin-bottom:2px}.sm\:sl-ml-0\.5{margin-left:2px}.sm\:sl-mt-1\.5{margin-top:6px}.sm\:sl-mr-1\.5{margin-right:6px}.sm\:sl-mb-1\.5{margin-bottom:6px}.sm\:sl-ml-1\.5{margin-left:6px}.sm\:sl-mt-2\.5{margin-top:10px}.sm\:sl-mr-2\.5{margin-right:10px}.sm\:sl-mb-2\.5{margin-bottom:10px}.sm\:sl-ml-2\.5{margin-left:10px}.sm\:sl-mt-3\.5{margin-top:14px}.sm\:sl-mr-3\.5{margin-right:14px}.sm\:sl-mb-3\.5{margin-bottom:14px}.sm\:sl-ml-3\.5{margin-left:14px}.sm\:sl-mt-4\.5{margin-top:18px}.sm\:sl-mr-4\.5{margin-right:18px}.sm\:sl-mb-4\.5{margin-bottom:18px}.sm\:sl-ml-4\.5{margin-left:18px}.sm\:sl--mt-0{margin-top:0}.sm\:sl--mr-0{margin-right:0}.sm\:sl--mb-0{margin-bottom:0}.sm\:sl--ml-0{margin-left:0}.sm\:sl--mt-1{margin-top:-4px}.sm\:sl--mr-1{margin-right:-4px}.sm\:sl--mb-1{margin-bottom:-4px}.sm\:sl--ml-1{margin-left:-4px}.sm\:sl--mt-2{margin-top:-8px}.sm\:sl--mr-2{margin-right:-8px}.sm\:sl--mb-2{margin-bottom:-8px}.sm\:sl--ml-2{margin-left:-8px}.sm\:sl--mt-3{margin-top:-12px}.sm\:sl--mr-3{margin-right:-12px}.sm\:sl--mb-3{margin-bottom:-12px}.sm\:sl--ml-3{margin-left:-12px}.sm\:sl--mt-4{margin-top:-16px}.sm\:sl--mr-4{margin-right:-16px}.sm\:sl--mb-4{margin-bottom:-16px}.sm\:sl--ml-4{margin-left:-16px}.sm\:sl--mt-5{margin-top:-20px}.sm\:sl--mr-5{margin-right:-20px}.sm\:sl--mb-5{margin-bottom:-20px}.sm\:sl--ml-5{margin-left:-20px}.sm\:sl--mt-6{margin-top:-24px}.sm\:sl--mr-6{margin-right:-24px}.sm\:sl--mb-6{margin-bottom:-24px}.sm\:sl--ml-6{margin-left:-24px}.sm\:sl--mt-7{margin-top:-28px}.sm\:sl--mr-7{margin-right:-28px}.sm\:sl--mb-7{margin-bottom:-28px}.sm\:sl--ml-7{margin-left:-28px}.sm\:sl--mt-8{margin-top:-32px}.sm\:sl--mr-8{margin-right:-32px}.sm\:sl--mb-8{margin-bottom:-32px}.sm\:sl--ml-8{margin-left:-32px}.sm\:sl--mt-9{margin-top:-36px}.sm\:sl--mr-9{margin-right:-36px}.sm\:sl--mb-9{margin-bottom:-36px}.sm\:sl--ml-9{margin-left:-36px}.sm\:sl--mt-10{margin-top:-40px}.sm\:sl--mr-10{margin-right:-40px}.sm\:sl--mb-10{margin-bottom:-40px}.sm\:sl--ml-10{margin-left:-40px}.sm\:sl--mt-11{margin-top:-44px}.sm\:sl--mr-11{margin-right:-44px}.sm\:sl--mb-11{margin-bottom:-44px}.sm\:sl--ml-11{margin-left:-44px}.sm\:sl--mt-12{margin-top:-48px}.sm\:sl--mr-12{margin-right:-48px}.sm\:sl--mb-12{margin-bottom:-48px}.sm\:sl--ml-12{margin-left:-48px}.sm\:sl--mt-14{margin-top:-56px}.sm\:sl--mr-14{margin-right:-56px}.sm\:sl--mb-14{margin-bottom:-56px}.sm\:sl--ml-14{margin-left:-56px}.sm\:sl--mt-16{margin-top:-64px}.sm\:sl--mr-16{margin-right:-64px}.sm\:sl--mb-16{margin-bottom:-64px}.sm\:sl--ml-16{margin-left:-64px}.sm\:sl--mt-20{margin-top:-80px}.sm\:sl--mr-20{margin-right:-80px}.sm\:sl--mb-20{margin-bottom:-80px}.sm\:sl--ml-20{margin-left:-80px}.sm\:sl--mt-24{margin-top:-96px}.sm\:sl--mr-24{margin-right:-96px}.sm\:sl--mb-24{margin-bottom:-96px}.sm\:sl--ml-24{margin-left:-96px}.sm\:sl--mt-28{margin-top:-112px}.sm\:sl--mr-28{margin-right:-112px}.sm\:sl--mb-28{margin-bottom:-112px}.sm\:sl--ml-28{margin-left:-112px}.sm\:sl--mt-32{margin-top:-128px}.sm\:sl--mr-32{margin-right:-128px}.sm\:sl--mb-32{margin-bottom:-128px}.sm\:sl--ml-32{margin-left:-128px}.sm\:sl--mt-36{margin-top:-144px}.sm\:sl--mr-36{margin-right:-144px}.sm\:sl--mb-36{margin-bottom:-144px}.sm\:sl--ml-36{margin-left:-144px}.sm\:sl--mt-40{margin-top:-160px}.sm\:sl--mr-40{margin-right:-160px}.sm\:sl--mb-40{margin-bottom:-160px}.sm\:sl--ml-40{margin-left:-160px}.sm\:sl--mt-44{margin-top:-176px}.sm\:sl--mr-44{margin-right:-176px}.sm\:sl--mb-44{margin-bottom:-176px}.sm\:sl--ml-44{margin-left:-176px}.sm\:sl--mt-48{margin-top:-192px}.sm\:sl--mr-48{margin-right:-192px}.sm\:sl--mb-48{margin-bottom:-192px}.sm\:sl--ml-48{margin-left:-192px}.sm\:sl--mt-52{margin-top:-208px}.sm\:sl--mr-52{margin-right:-208px}.sm\:sl--mb-52{margin-bottom:-208px}.sm\:sl--ml-52{margin-left:-208px}.sm\:sl--mt-56{margin-top:-224px}.sm\:sl--mr-56{margin-right:-224px}.sm\:sl--mb-56{margin-bottom:-224px}.sm\:sl--ml-56{margin-left:-224px}.sm\:sl--mt-60{margin-top:-240px}.sm\:sl--mr-60{margin-right:-240px}.sm\:sl--mb-60{margin-bottom:-240px}.sm\:sl--ml-60{margin-left:-240px}.sm\:sl--mt-64{margin-top:-256px}.sm\:sl--mr-64{margin-right:-256px}.sm\:sl--mb-64{margin-bottom:-256px}.sm\:sl--ml-64{margin-left:-256px}.sm\:sl--mt-72{margin-top:-288px}.sm\:sl--mr-72{margin-right:-288px}.sm\:sl--mb-72{margin-bottom:-288px}.sm\:sl--ml-72{margin-left:-288px}.sm\:sl--mt-80{margin-top:-320px}.sm\:sl--mr-80{margin-right:-320px}.sm\:sl--mb-80{margin-bottom:-320px}.sm\:sl--ml-80{margin-left:-320px}.sm\:sl--mt-96{margin-top:-384px}.sm\:sl--mr-96{margin-right:-384px}.sm\:sl--mb-96{margin-bottom:-384px}.sm\:sl--ml-96{margin-left:-384px}.sm\:sl--mt-px{margin-top:-1px}.sm\:sl--mr-px{margin-right:-1px}.sm\:sl--mb-px{margin-bottom:-1px}.sm\:sl--ml-px{margin-left:-1px}.sm\:sl--mt-0\.5{margin-top:-2px}.sm\:sl--mr-0\.5{margin-right:-2px}.sm\:sl--mb-0\.5{margin-bottom:-2px}.sm\:sl--ml-0\.5{margin-left:-2px}.sm\:sl--mt-1\.5{margin-top:-6px}.sm\:sl--mr-1\.5{margin-right:-6px}.sm\:sl--mb-1\.5{margin-bottom:-6px}.sm\:sl--ml-1\.5{margin-left:-6px}.sm\:sl--mt-2\.5{margin-top:-10px}.sm\:sl--mr-2\.5{margin-right:-10px}.sm\:sl--mb-2\.5{margin-bottom:-10px}.sm\:sl--ml-2\.5{margin-left:-10px}.sm\:sl--mt-3\.5{margin-top:-14px}.sm\:sl--mr-3\.5{margin-right:-14px}.sm\:sl--mb-3\.5{margin-bottom:-14px}.sm\:sl--ml-3\.5{margin-left:-14px}.sm\:sl--mt-4\.5{margin-top:-18px}.sm\:sl--mr-4\.5{margin-right:-18px}.sm\:sl--mb-4\.5{margin-bottom:-18px}.sm\:sl--ml-4\.5{margin-left:-18px}.sm\:sl-max-h-full{max-height:100%}.sm\:sl-max-h-screen{max-height:100vh}.sm\:sl-max-w-none{max-width:none}.sm\:sl-max-w-full{max-width:100%}.sm\:sl-max-w-min{max-width:-moz-min-content;max-width:min-content}.sm\:sl-max-w-max{max-width:-moz-max-content;max-width:max-content}.sm\:sl-max-w-prose{max-width:65ch}.sm\:sl-min-h-full{min-height:100%}.sm\:sl-min-h-screen{min-height:100vh}.sm\:sl-min-w-full{min-width:100%}.sm\:sl-min-w-min{min-width:-moz-min-content;min-width:min-content}.sm\:sl-min-w-max{min-width:-moz-max-content;min-width:max-content}.sm\:sl-p-0{padding:0}.sm\:sl-p-1{padding:4px}.sm\:sl-p-2{padding:8px}.sm\:sl-p-3{padding:12px}.sm\:sl-p-4{padding:16px}.sm\:sl-p-5{padding:20px}.sm\:sl-p-6{padding:24px}.sm\:sl-p-7{padding:28px}.sm\:sl-p-8{padding:32px}.sm\:sl-p-9{padding:36px}.sm\:sl-p-10{padding:40px}.sm\:sl-p-11{padding:44px}.sm\:sl-p-12{padding:48px}.sm\:sl-p-14{padding:56px}.sm\:sl-p-16{padding:64px}.sm\:sl-p-20{padding:80px}.sm\:sl-p-24{padding:96px}.sm\:sl-p-28{padding:112px}.sm\:sl-p-32{padding:128px}.sm\:sl-p-36{padding:144px}.sm\:sl-p-40{padding:160px}.sm\:sl-p-44{padding:176px}.sm\:sl-p-48{padding:192px}.sm\:sl-p-52{padding:208px}.sm\:sl-p-56{padding:224px}.sm\:sl-p-60{padding:240px}.sm\:sl-p-64{padding:256px}.sm\:sl-p-72{padding:288px}.sm\:sl-p-80{padding:320px}.sm\:sl-p-96{padding:384px}.sm\:sl-p-px{padding:1px}.sm\:sl-p-0\.5{padding:2px}.sm\:sl-p-1\.5{padding:6px}.sm\:sl-p-2\.5{padding:10px}.sm\:sl-p-3\.5{padding:14px}.sm\:sl-p-4\.5{padding:18px}.sm\:sl-py-0{padding-bottom:0;padding-top:0}.sm\:sl-px-0{padding-left:0;padding-right:0}.sm\:sl-py-1{padding-bottom:4px;padding-top:4px}.sm\:sl-px-1{padding-left:4px;padding-right:4px}.sm\:sl-py-2{padding-bottom:8px;padding-top:8px}.sm\:sl-px-2{padding-left:8px;padding-right:8px}.sm\:sl-py-3{padding-bottom:12px;padding-top:12px}.sm\:sl-px-3{padding-left:12px;padding-right:12px}.sm\:sl-py-4{padding-bottom:16px;padding-top:16px}.sm\:sl-px-4{padding-left:16px;padding-right:16px}.sm\:sl-py-5{padding-bottom:20px;padding-top:20px}.sm\:sl-px-5{padding-left:20px;padding-right:20px}.sm\:sl-py-6{padding-bottom:24px;padding-top:24px}.sm\:sl-px-6{padding-left:24px;padding-right:24px}.sm\:sl-py-7{padding-bottom:28px;padding-top:28px}.sm\:sl-px-7{padding-left:28px;padding-right:28px}.sm\:sl-py-8{padding-bottom:32px;padding-top:32px}.sm\:sl-px-8{padding-left:32px;padding-right:32px}.sm\:sl-py-9{padding-bottom:36px;padding-top:36px}.sm\:sl-px-9{padding-left:36px;padding-right:36px}.sm\:sl-py-10{padding-bottom:40px;padding-top:40px}.sm\:sl-px-10{padding-left:40px;padding-right:40px}.sm\:sl-py-11{padding-bottom:44px;padding-top:44px}.sm\:sl-px-11{padding-left:44px;padding-right:44px}.sm\:sl-py-12{padding-bottom:48px;padding-top:48px}.sm\:sl-px-12{padding-left:48px;padding-right:48px}.sm\:sl-py-14{padding-bottom:56px;padding-top:56px}.sm\:sl-px-14{padding-left:56px;padding-right:56px}.sm\:sl-py-16{padding-bottom:64px;padding-top:64px}.sm\:sl-px-16{padding-left:64px;padding-right:64px}.sm\:sl-py-20{padding-bottom:80px;padding-top:80px}.sm\:sl-px-20{padding-left:80px;padding-right:80px}.sm\:sl-py-24{padding-bottom:96px;padding-top:96px}.sm\:sl-px-24{padding-left:96px;padding-right:96px}.sm\:sl-py-28{padding-bottom:112px;padding-top:112px}.sm\:sl-px-28{padding-left:112px;padding-right:112px}.sm\:sl-py-32{padding-bottom:128px;padding-top:128px}.sm\:sl-px-32{padding-left:128px;padding-right:128px}.sm\:sl-py-36{padding-bottom:144px;padding-top:144px}.sm\:sl-px-36{padding-left:144px;padding-right:144px}.sm\:sl-py-40{padding-bottom:160px;padding-top:160px}.sm\:sl-px-40{padding-left:160px;padding-right:160px}.sm\:sl-py-44{padding-bottom:176px;padding-top:176px}.sm\:sl-px-44{padding-left:176px;padding-right:176px}.sm\:sl-py-48{padding-bottom:192px;padding-top:192px}.sm\:sl-px-48{padding-left:192px;padding-right:192px}.sm\:sl-py-52{padding-bottom:208px;padding-top:208px}.sm\:sl-px-52{padding-left:208px;padding-right:208px}.sm\:sl-py-56{padding-bottom:224px;padding-top:224px}.sm\:sl-px-56{padding-left:224px;padding-right:224px}.sm\:sl-py-60{padding-bottom:240px;padding-top:240px}.sm\:sl-px-60{padding-left:240px;padding-right:240px}.sm\:sl-py-64{padding-bottom:256px;padding-top:256px}.sm\:sl-px-64{padding-left:256px;padding-right:256px}.sm\:sl-py-72{padding-bottom:288px;padding-top:288px}.sm\:sl-px-72{padding-left:288px;padding-right:288px}.sm\:sl-py-80{padding-bottom:320px;padding-top:320px}.sm\:sl-px-80{padding-left:320px;padding-right:320px}.sm\:sl-py-96{padding-bottom:384px;padding-top:384px}.sm\:sl-px-96{padding-left:384px;padding-right:384px}.sm\:sl-py-px{padding-bottom:1px;padding-top:1px}.sm\:sl-px-px{padding-left:1px;padding-right:1px}.sm\:sl-py-0\.5{padding-bottom:2px;padding-top:2px}.sm\:sl-px-0\.5{padding-left:2px;padding-right:2px}.sm\:sl-py-1\.5{padding-bottom:6px;padding-top:6px}.sm\:sl-px-1\.5{padding-left:6px;padding-right:6px}.sm\:sl-py-2\.5{padding-bottom:10px;padding-top:10px}.sm\:sl-px-2\.5{padding-left:10px;padding-right:10px}.sm\:sl-py-3\.5{padding-bottom:14px;padding-top:14px}.sm\:sl-px-3\.5{padding-left:14px;padding-right:14px}.sm\:sl-py-4\.5{padding-bottom:18px;padding-top:18px}.sm\:sl-px-4\.5{padding-left:18px;padding-right:18px}.sm\:sl-pt-0{padding-top:0}.sm\:sl-pr-0{padding-right:0}.sm\:sl-pb-0{padding-bottom:0}.sm\:sl-pl-0{padding-left:0}.sm\:sl-pt-1{padding-top:4px}.sm\:sl-pr-1{padding-right:4px}.sm\:sl-pb-1{padding-bottom:4px}.sm\:sl-pl-1{padding-left:4px}.sm\:sl-pt-2{padding-top:8px}.sm\:sl-pr-2{padding-right:8px}.sm\:sl-pb-2{padding-bottom:8px}.sm\:sl-pl-2{padding-left:8px}.sm\:sl-pt-3{padding-top:12px}.sm\:sl-pr-3{padding-right:12px}.sm\:sl-pb-3{padding-bottom:12px}.sm\:sl-pl-3{padding-left:12px}.sm\:sl-pt-4{padding-top:16px}.sm\:sl-pr-4{padding-right:16px}.sm\:sl-pb-4{padding-bottom:16px}.sm\:sl-pl-4{padding-left:16px}.sm\:sl-pt-5{padding-top:20px}.sm\:sl-pr-5{padding-right:20px}.sm\:sl-pb-5{padding-bottom:20px}.sm\:sl-pl-5{padding-left:20px}.sm\:sl-pt-6{padding-top:24px}.sm\:sl-pr-6{padding-right:24px}.sm\:sl-pb-6{padding-bottom:24px}.sm\:sl-pl-6{padding-left:24px}.sm\:sl-pt-7{padding-top:28px}.sm\:sl-pr-7{padding-right:28px}.sm\:sl-pb-7{padding-bottom:28px}.sm\:sl-pl-7{padding-left:28px}.sm\:sl-pt-8{padding-top:32px}.sm\:sl-pr-8{padding-right:32px}.sm\:sl-pb-8{padding-bottom:32px}.sm\:sl-pl-8{padding-left:32px}.sm\:sl-pt-9{padding-top:36px}.sm\:sl-pr-9{padding-right:36px}.sm\:sl-pb-9{padding-bottom:36px}.sm\:sl-pl-9{padding-left:36px}.sm\:sl-pt-10{padding-top:40px}.sm\:sl-pr-10{padding-right:40px}.sm\:sl-pb-10{padding-bottom:40px}.sm\:sl-pl-10{padding-left:40px}.sm\:sl-pt-11{padding-top:44px}.sm\:sl-pr-11{padding-right:44px}.sm\:sl-pb-11{padding-bottom:44px}.sm\:sl-pl-11{padding-left:44px}.sm\:sl-pt-12{padding-top:48px}.sm\:sl-pr-12{padding-right:48px}.sm\:sl-pb-12{padding-bottom:48px}.sm\:sl-pl-12{padding-left:48px}.sm\:sl-pt-14{padding-top:56px}.sm\:sl-pr-14{padding-right:56px}.sm\:sl-pb-14{padding-bottom:56px}.sm\:sl-pl-14{padding-left:56px}.sm\:sl-pt-16{padding-top:64px}.sm\:sl-pr-16{padding-right:64px}.sm\:sl-pb-16{padding-bottom:64px}.sm\:sl-pl-16{padding-left:64px}.sm\:sl-pt-20{padding-top:80px}.sm\:sl-pr-20{padding-right:80px}.sm\:sl-pb-20{padding-bottom:80px}.sm\:sl-pl-20{padding-left:80px}.sm\:sl-pt-24{padding-top:96px}.sm\:sl-pr-24{padding-right:96px}.sm\:sl-pb-24{padding-bottom:96px}.sm\:sl-pl-24{padding-left:96px}.sm\:sl-pt-28{padding-top:112px}.sm\:sl-pr-28{padding-right:112px}.sm\:sl-pb-28{padding-bottom:112px}.sm\:sl-pl-28{padding-left:112px}.sm\:sl-pt-32{padding-top:128px}.sm\:sl-pr-32{padding-right:128px}.sm\:sl-pb-32{padding-bottom:128px}.sm\:sl-pl-32{padding-left:128px}.sm\:sl-pt-36{padding-top:144px}.sm\:sl-pr-36{padding-right:144px}.sm\:sl-pb-36{padding-bottom:144px}.sm\:sl-pl-36{padding-left:144px}.sm\:sl-pt-40{padding-top:160px}.sm\:sl-pr-40{padding-right:160px}.sm\:sl-pb-40{padding-bottom:160px}.sm\:sl-pl-40{padding-left:160px}.sm\:sl-pt-44{padding-top:176px}.sm\:sl-pr-44{padding-right:176px}.sm\:sl-pb-44{padding-bottom:176px}.sm\:sl-pl-44{padding-left:176px}.sm\:sl-pt-48{padding-top:192px}.sm\:sl-pr-48{padding-right:192px}.sm\:sl-pb-48{padding-bottom:192px}.sm\:sl-pl-48{padding-left:192px}.sm\:sl-pt-52{padding-top:208px}.sm\:sl-pr-52{padding-right:208px}.sm\:sl-pb-52{padding-bottom:208px}.sm\:sl-pl-52{padding-left:208px}.sm\:sl-pt-56{padding-top:224px}.sm\:sl-pr-56{padding-right:224px}.sm\:sl-pb-56{padding-bottom:224px}.sm\:sl-pl-56{padding-left:224px}.sm\:sl-pt-60{padding-top:240px}.sm\:sl-pr-60{padding-right:240px}.sm\:sl-pb-60{padding-bottom:240px}.sm\:sl-pl-60{padding-left:240px}.sm\:sl-pt-64{padding-top:256px}.sm\:sl-pr-64{padding-right:256px}.sm\:sl-pb-64{padding-bottom:256px}.sm\:sl-pl-64{padding-left:256px}.sm\:sl-pt-72{padding-top:288px}.sm\:sl-pr-72{padding-right:288px}.sm\:sl-pb-72{padding-bottom:288px}.sm\:sl-pl-72{padding-left:288px}.sm\:sl-pt-80{padding-top:320px}.sm\:sl-pr-80{padding-right:320px}.sm\:sl-pb-80{padding-bottom:320px}.sm\:sl-pl-80{padding-left:320px}.sm\:sl-pt-96{padding-top:384px}.sm\:sl-pr-96{padding-right:384px}.sm\:sl-pb-96{padding-bottom:384px}.sm\:sl-pl-96{padding-left:384px}.sm\:sl-pt-px{padding-top:1px}.sm\:sl-pr-px{padding-right:1px}.sm\:sl-pb-px{padding-bottom:1px}.sm\:sl-pl-px{padding-left:1px}.sm\:sl-pt-0\.5{padding-top:2px}.sm\:sl-pr-0\.5{padding-right:2px}.sm\:sl-pb-0\.5{padding-bottom:2px}.sm\:sl-pl-0\.5{padding-left:2px}.sm\:sl-pt-1\.5{padding-top:6px}.sm\:sl-pr-1\.5{padding-right:6px}.sm\:sl-pb-1\.5{padding-bottom:6px}.sm\:sl-pl-1\.5{padding-left:6px}.sm\:sl-pt-2\.5{padding-top:10px}.sm\:sl-pr-2\.5{padding-right:10px}.sm\:sl-pb-2\.5{padding-bottom:10px}.sm\:sl-pl-2\.5{padding-left:10px}.sm\:sl-pt-3\.5{padding-top:14px}.sm\:sl-pr-3\.5{padding-right:14px}.sm\:sl-pb-3\.5{padding-bottom:14px}.sm\:sl-pl-3\.5{padding-left:14px}.sm\:sl-pt-4\.5{padding-top:18px}.sm\:sl-pr-4\.5{padding-right:18px}.sm\:sl-pb-4\.5{padding-bottom:18px}.sm\:sl-pl-4\.5{padding-left:18px}.sm\:sl-static{position:static}.sm\:sl-fixed{position:fixed}.sm\:sl-absolute{position:absolute}.sm\:sl-relative{position:relative}.sm\:sl-sticky{position:-webkit-sticky;position:sticky}.sm\:sl-visible{visibility:visible}.sm\:sl-invisible{visibility:hidden}.sl-group:hover .sm\:group-hover\:sl-visible{visibility:visible}.sl-group:hover .sm\:group-hover\:sl-invisible{visibility:hidden}.sl-group:focus .sm\:group-focus\:sl-visible{visibility:visible}.sl-group:focus .sm\:group-focus\:sl-invisible{visibility:hidden}.sm\:sl-w-0{width:0}.sm\:sl-w-1{width:4px}.sm\:sl-w-2{width:8px}.sm\:sl-w-3{width:12px}.sm\:sl-w-4{width:16px}.sm\:sl-w-5{width:20px}.sm\:sl-w-6{width:24px}.sm\:sl-w-7{width:28px}.sm\:sl-w-8{width:32px}.sm\:sl-w-9{width:36px}.sm\:sl-w-10{width:40px}.sm\:sl-w-11{width:44px}.sm\:sl-w-12{width:48px}.sm\:sl-w-14{width:56px}.sm\:sl-w-16{width:64px}.sm\:sl-w-20{width:80px}.sm\:sl-w-24{width:96px}.sm\:sl-w-28{width:112px}.sm\:sl-w-32{width:128px}.sm\:sl-w-36{width:144px}.sm\:sl-w-40{width:160px}.sm\:sl-w-44{width:176px}.sm\:sl-w-48{width:192px}.sm\:sl-w-52{width:208px}.sm\:sl-w-56{width:224px}.sm\:sl-w-60{width:240px}.sm\:sl-w-64{width:256px}.sm\:sl-w-72{width:288px}.sm\:sl-w-80{width:320px}.sm\:sl-w-96{width:384px}.sm\:sl-w-auto{width:auto}.sm\:sl-w-px{width:1px}.sm\:sl-w-0\.5{width:2px}.sm\:sl-w-1\.5{width:6px}.sm\:sl-w-2\.5{width:10px}.sm\:sl-w-3\.5{width:14px}.sm\:sl-w-4\.5{width:18px}.sm\:sl-w-xs{width:20px}.sm\:sl-w-sm{width:24px}.sm\:sl-w-md{width:32px}.sm\:sl-w-lg{width:36px}.sm\:sl-w-xl{width:44px}.sm\:sl-w-2xl{width:52px}.sm\:sl-w-3xl{width:60px}.sm\:sl-w-1\/2{width:50%}.sm\:sl-w-1\/3{width:33.333333%}.sm\:sl-w-2\/3{width:66.666667%}.sm\:sl-w-1\/4{width:25%}.sm\:sl-w-2\/4{width:50%}.sm\:sl-w-3\/4{width:75%}.sm\:sl-w-1\/5{width:20%}.sm\:sl-w-2\/5{width:40%}.sm\:sl-w-3\/5{width:60%}.sm\:sl-w-4\/5{width:80%}.sm\:sl-w-1\/6{width:16.666667%}.sm\:sl-w-2\/6{width:33.333333%}.sm\:sl-w-3\/6{width:50%}.sm\:sl-w-4\/6{width:66.666667%}.sm\:sl-w-5\/6{width:83.333333%}.sm\:sl-w-full{width:100%}.sm\:sl-w-screen{width:100vw}.sm\:sl-w-min{width:-moz-min-content;width:min-content}.sm\:sl-w-max{width:-moz-max-content;width:max-content}}@media (max-width:767px){.md\:sl-stack--1{gap:4px}.md\:sl-stack--2{gap:8px}.md\:sl-stack--3{gap:12px}.md\:sl-stack--4{gap:16px}.md\:sl-stack--5{gap:20px}.md\:sl-stack--6{gap:24px}.md\:sl-stack--7{gap:28px}.md\:sl-stack--8{gap:32px}.md\:sl-stack--9{gap:36px}.md\:sl-stack--10{gap:40px}.md\:sl-stack--12{gap:48px}.md\:sl-stack--14{gap:56px}.md\:sl-stack--16{gap:64px}.md\:sl-stack--20{gap:80px}.md\:sl-stack--24{gap:96px}.md\:sl-stack--32{gap:128px}.md\:sl-content-center{align-content:center}.md\:sl-content-start{align-content:flex-start}.md\:sl-content-end{align-content:flex-end}.md\:sl-content-between{align-content:space-between}.md\:sl-content-around{align-content:space-around}.md\:sl-content-evenly{align-content:space-evenly}.md\:sl-items-start{align-items:flex-start}.md\:sl-items-end{align-items:flex-end}.md\:sl-items-center{align-items:center}.md\:sl-items-baseline{align-items:baseline}.md\:sl-items-stretch{align-items:stretch}.md\:sl-self-auto{align-self:auto}.md\:sl-self-start{align-self:flex-start}.md\:sl-self-end{align-self:flex-end}.md\:sl-self-center{align-self:center}.md\:sl-self-stretch{align-self:stretch}.md\:sl-blur-0,.md\:sl-blur-none{--tw-blur:blur(0)}.md\:sl-blur-sm{--tw-blur:blur(4px)}.md\:sl-blur{--tw-blur:blur(8px)}.md\:sl-blur-md{--tw-blur:blur(12px)}.md\:sl-blur-lg{--tw-blur:blur(16px)}.md\:sl-blur-xl{--tw-blur:blur(24px)}.md\:sl-blur-2xl{--tw-blur:blur(40px)}.md\:sl-blur-3xl{--tw-blur:blur(64px)}.md\:sl-block{display:block}.md\:sl-inline-block{display:inline-block}.md\:sl-inline{display:inline}.md\:sl-flex{display:flex}.md\:sl-inline-flex{display:inline-flex}.md\:sl-table{display:table}.md\:sl-inline-table{display:inline-table}.md\:sl-table-caption{display:table-caption}.md\:sl-table-cell{display:table-cell}.md\:sl-table-column{display:table-column}.md\:sl-table-column-group{display:table-column-group}.md\:sl-table-footer-group{display:table-footer-group}.md\:sl-table-header-group{display:table-header-group}.md\:sl-table-row-group{display:table-row-group}.md\:sl-table-row{display:table-row}.md\:sl-flow-root{display:flow-root}.md\:sl-grid{display:grid}.md\:sl-inline-grid{display:inline-grid}.md\:sl-contents{display:contents}.md\:sl-list-item{display:list-item}.md\:sl-hidden{display:none}.md\:sl-drop-shadow{--tw-drop-shadow:drop-shadow(var(--drop-shadow-default1)) drop-shadow(var(--drop-shadow-default2))}.md\:sl-flex-1{flex:1 1}.md\:sl-flex-auto{flex:1 1 auto}.md\:sl-flex-initial{flex:0 1 auto}.md\:sl-flex-none{flex:none}.md\:sl-flex-row{flex-direction:row}.md\:sl-flex-row-reverse{flex-direction:row-reverse}.md\:sl-flex-col{flex-direction:column}.md\:sl-flex-col-reverse{flex-direction:column-reverse}.md\:sl-flex-grow-0{flex-grow:0}.md\:sl-flex-grow{flex-grow:1}.md\:sl-flex-shrink-0{flex-shrink:0}.md\:sl-flex-shrink{flex-shrink:1}.md\:sl-flex-wrap{flex-wrap:wrap}.md\:sl-flex-wrap-reverse{flex-wrap:wrap-reverse}.md\:sl-flex-nowrap{flex-wrap:nowrap}.md\:sl-h-0{height:0}.md\:sl-h-1{height:4px}.md\:sl-h-2{height:8px}.md\:sl-h-3{height:12px}.md\:sl-h-4{height:16px}.md\:sl-h-5{height:20px}.md\:sl-h-6{height:24px}.md\:sl-h-7{height:28px}.md\:sl-h-8{height:32px}.md\:sl-h-9{height:36px}.md\:sl-h-10{height:40px}.md\:sl-h-11{height:44px}.md\:sl-h-12{height:48px}.md\:sl-h-14{height:56px}.md\:sl-h-16{height:64px}.md\:sl-h-20{height:80px}.md\:sl-h-24{height:96px}.md\:sl-h-28{height:112px}.md\:sl-h-32{height:128px}.md\:sl-h-36{height:144px}.md\:sl-h-40{height:160px}.md\:sl-h-44{height:176px}.md\:sl-h-48{height:192px}.md\:sl-h-52{height:208px}.md\:sl-h-56{height:224px}.md\:sl-h-60{height:240px}.md\:sl-h-64{height:256px}.md\:sl-h-72{height:288px}.md\:sl-h-80{height:320px}.md\:sl-h-96{height:384px}.md\:sl-h-auto{height:auto}.md\:sl-h-px{height:1px}.md\:sl-h-0\.5{height:2px}.md\:sl-h-1\.5{height:6px}.md\:sl-h-2\.5{height:10px}.md\:sl-h-3\.5{height:14px}.md\:sl-h-4\.5{height:18px}.md\:sl-h-xs{height:20px}.md\:sl-h-sm{height:24px}.md\:sl-h-md{height:32px}.md\:sl-h-lg{height:36px}.md\:sl-h-xl{height:44px}.md\:sl-h-2xl{height:52px}.md\:sl-h-3xl{height:60px}.md\:sl-h-full{height:100%}.md\:sl-h-screen{height:100vh}.md\:sl-justify-start{justify-content:flex-start}.md\:sl-justify-end{justify-content:flex-end}.md\:sl-justify-center{justify-content:center}.md\:sl-justify-between{justify-content:space-between}.md\:sl-justify-around{justify-content:space-around}.md\:sl-justify-evenly{justify-content:space-evenly}.md\:sl-justify-items-start{justify-items:start}.md\:sl-justify-items-end{justify-items:end}.md\:sl-justify-items-center{justify-items:center}.md\:sl-justify-items-stretch{justify-items:stretch}.md\:sl-justify-self-auto{justify-self:auto}.md\:sl-justify-self-start{justify-self:start}.md\:sl-justify-self-end{justify-self:end}.md\:sl-justify-self-center{justify-self:center}.md\:sl-justify-self-stretch{justify-self:stretch}.md\:sl-m-0{margin:0}.md\:sl-m-1{margin:4px}.md\:sl-m-2{margin:8px}.md\:sl-m-3{margin:12px}.md\:sl-m-4{margin:16px}.md\:sl-m-5{margin:20px}.md\:sl-m-6{margin:24px}.md\:sl-m-7{margin:28px}.md\:sl-m-8{margin:32px}.md\:sl-m-9{margin:36px}.md\:sl-m-10{margin:40px}.md\:sl-m-11{margin:44px}.md\:sl-m-12{margin:48px}.md\:sl-m-14{margin:56px}.md\:sl-m-16{margin:64px}.md\:sl-m-20{margin:80px}.md\:sl-m-24{margin:96px}.md\:sl-m-28{margin:112px}.md\:sl-m-32{margin:128px}.md\:sl-m-36{margin:144px}.md\:sl-m-40{margin:160px}.md\:sl-m-44{margin:176px}.md\:sl-m-48{margin:192px}.md\:sl-m-52{margin:208px}.md\:sl-m-56{margin:224px}.md\:sl-m-60{margin:240px}.md\:sl-m-64{margin:256px}.md\:sl-m-72{margin:288px}.md\:sl-m-80{margin:320px}.md\:sl-m-96{margin:384px}.md\:sl-m-auto{margin:auto}.md\:sl-m-px{margin:1px}.md\:sl-m-0\.5{margin:2px}.md\:sl-m-1\.5{margin:6px}.md\:sl-m-2\.5{margin:10px}.md\:sl-m-3\.5{margin:14px}.md\:sl-m-4\.5{margin:18px}.md\:sl--m-0{margin:0}.md\:sl--m-1{margin:-4px}.md\:sl--m-2{margin:-8px}.md\:sl--m-3{margin:-12px}.md\:sl--m-4{margin:-16px}.md\:sl--m-5{margin:-20px}.md\:sl--m-6{margin:-24px}.md\:sl--m-7{margin:-28px}.md\:sl--m-8{margin:-32px}.md\:sl--m-9{margin:-36px}.md\:sl--m-10{margin:-40px}.md\:sl--m-11{margin:-44px}.md\:sl--m-12{margin:-48px}.md\:sl--m-14{margin:-56px}.md\:sl--m-16{margin:-64px}.md\:sl--m-20{margin:-80px}.md\:sl--m-24{margin:-96px}.md\:sl--m-28{margin:-112px}.md\:sl--m-32{margin:-128px}.md\:sl--m-36{margin:-144px}.md\:sl--m-40{margin:-160px}.md\:sl--m-44{margin:-176px}.md\:sl--m-48{margin:-192px}.md\:sl--m-52{margin:-208px}.md\:sl--m-56{margin:-224px}.md\:sl--m-60{margin:-240px}.md\:sl--m-64{margin:-256px}.md\:sl--m-72{margin:-288px}.md\:sl--m-80{margin:-320px}.md\:sl--m-96{margin:-384px}.md\:sl--m-px{margin:-1px}.md\:sl--m-0\.5{margin:-2px}.md\:sl--m-1\.5{margin:-6px}.md\:sl--m-2\.5{margin:-10px}.md\:sl--m-3\.5{margin:-14px}.md\:sl--m-4\.5{margin:-18px}.md\:sl-my-0{margin-bottom:0;margin-top:0}.md\:sl-mx-0{margin-left:0;margin-right:0}.md\:sl-my-1{margin-bottom:4px;margin-top:4px}.md\:sl-mx-1{margin-left:4px;margin-right:4px}.md\:sl-my-2{margin-bottom:8px;margin-top:8px}.md\:sl-mx-2{margin-left:8px;margin-right:8px}.md\:sl-my-3{margin-bottom:12px;margin-top:12px}.md\:sl-mx-3{margin-left:12px;margin-right:12px}.md\:sl-my-4{margin-bottom:16px;margin-top:16px}.md\:sl-mx-4{margin-left:16px;margin-right:16px}.md\:sl-my-5{margin-bottom:20px;margin-top:20px}.md\:sl-mx-5{margin-left:20px;margin-right:20px}.md\:sl-my-6{margin-bottom:24px;margin-top:24px}.md\:sl-mx-6{margin-left:24px;margin-right:24px}.md\:sl-my-7{margin-bottom:28px;margin-top:28px}.md\:sl-mx-7{margin-left:28px;margin-right:28px}.md\:sl-my-8{margin-bottom:32px;margin-top:32px}.md\:sl-mx-8{margin-left:32px;margin-right:32px}.md\:sl-my-9{margin-bottom:36px;margin-top:36px}.md\:sl-mx-9{margin-left:36px;margin-right:36px}.md\:sl-my-10{margin-bottom:40px;margin-top:40px}.md\:sl-mx-10{margin-left:40px;margin-right:40px}.md\:sl-my-11{margin-bottom:44px;margin-top:44px}.md\:sl-mx-11{margin-left:44px;margin-right:44px}.md\:sl-my-12{margin-bottom:48px;margin-top:48px}.md\:sl-mx-12{margin-left:48px;margin-right:48px}.md\:sl-my-14{margin-bottom:56px;margin-top:56px}.md\:sl-mx-14{margin-left:56px;margin-right:56px}.md\:sl-my-16{margin-bottom:64px;margin-top:64px}.md\:sl-mx-16{margin-left:64px;margin-right:64px}.md\:sl-my-20{margin-bottom:80px;margin-top:80px}.md\:sl-mx-20{margin-left:80px;margin-right:80px}.md\:sl-my-24{margin-bottom:96px;margin-top:96px}.md\:sl-mx-24{margin-left:96px;margin-right:96px}.md\:sl-my-28{margin-bottom:112px;margin-top:112px}.md\:sl-mx-28{margin-left:112px;margin-right:112px}.md\:sl-my-32{margin-bottom:128px;margin-top:128px}.md\:sl-mx-32{margin-left:128px;margin-right:128px}.md\:sl-my-36{margin-bottom:144px;margin-top:144px}.md\:sl-mx-36{margin-left:144px;margin-right:144px}.md\:sl-my-40{margin-bottom:160px;margin-top:160px}.md\:sl-mx-40{margin-left:160px;margin-right:160px}.md\:sl-my-44{margin-bottom:176px;margin-top:176px}.md\:sl-mx-44{margin-left:176px;margin-right:176px}.md\:sl-my-48{margin-bottom:192px;margin-top:192px}.md\:sl-mx-48{margin-left:192px;margin-right:192px}.md\:sl-my-52{margin-bottom:208px;margin-top:208px}.md\:sl-mx-52{margin-left:208px;margin-right:208px}.md\:sl-my-56{margin-bottom:224px;margin-top:224px}.md\:sl-mx-56{margin-left:224px;margin-right:224px}.md\:sl-my-60{margin-bottom:240px;margin-top:240px}.md\:sl-mx-60{margin-left:240px;margin-right:240px}.md\:sl-my-64{margin-bottom:256px;margin-top:256px}.md\:sl-mx-64{margin-left:256px;margin-right:256px}.md\:sl-my-72{margin-bottom:288px;margin-top:288px}.md\:sl-mx-72{margin-left:288px;margin-right:288px}.md\:sl-my-80{margin-bottom:320px;margin-top:320px}.md\:sl-mx-80{margin-left:320px;margin-right:320px}.md\:sl-my-96{margin-bottom:384px;margin-top:384px}.md\:sl-mx-96{margin-left:384px;margin-right:384px}.md\:sl-my-auto{margin-bottom:auto;margin-top:auto}.md\:sl-mx-auto{margin-left:auto;margin-right:auto}.md\:sl-my-px{margin-bottom:1px;margin-top:1px}.md\:sl-mx-px{margin-left:1px;margin-right:1px}.md\:sl-my-0\.5{margin-bottom:2px;margin-top:2px}.md\:sl-mx-0\.5{margin-left:2px;margin-right:2px}.md\:sl-my-1\.5{margin-bottom:6px;margin-top:6px}.md\:sl-mx-1\.5{margin-left:6px;margin-right:6px}.md\:sl-my-2\.5{margin-bottom:10px;margin-top:10px}.md\:sl-mx-2\.5{margin-left:10px;margin-right:10px}.md\:sl-my-3\.5{margin-bottom:14px;margin-top:14px}.md\:sl-mx-3\.5{margin-left:14px;margin-right:14px}.md\:sl-my-4\.5{margin-bottom:18px;margin-top:18px}.md\:sl-mx-4\.5{margin-left:18px;margin-right:18px}.md\:sl--my-0{margin-bottom:0;margin-top:0}.md\:sl--mx-0{margin-left:0;margin-right:0}.md\:sl--my-1{margin-bottom:-4px;margin-top:-4px}.md\:sl--mx-1{margin-left:-4px;margin-right:-4px}.md\:sl--my-2{margin-bottom:-8px;margin-top:-8px}.md\:sl--mx-2{margin-left:-8px;margin-right:-8px}.md\:sl--my-3{margin-bottom:-12px;margin-top:-12px}.md\:sl--mx-3{margin-left:-12px;margin-right:-12px}.md\:sl--my-4{margin-bottom:-16px;margin-top:-16px}.md\:sl--mx-4{margin-left:-16px;margin-right:-16px}.md\:sl--my-5{margin-bottom:-20px;margin-top:-20px}.md\:sl--mx-5{margin-left:-20px;margin-right:-20px}.md\:sl--my-6{margin-bottom:-24px;margin-top:-24px}.md\:sl--mx-6{margin-left:-24px;margin-right:-24px}.md\:sl--my-7{margin-bottom:-28px;margin-top:-28px}.md\:sl--mx-7{margin-left:-28px;margin-right:-28px}.md\:sl--my-8{margin-bottom:-32px;margin-top:-32px}.md\:sl--mx-8{margin-left:-32px;margin-right:-32px}.md\:sl--my-9{margin-bottom:-36px;margin-top:-36px}.md\:sl--mx-9{margin-left:-36px;margin-right:-36px}.md\:sl--my-10{margin-bottom:-40px;margin-top:-40px}.md\:sl--mx-10{margin-left:-40px;margin-right:-40px}.md\:sl--my-11{margin-bottom:-44px;margin-top:-44px}.md\:sl--mx-11{margin-left:-44px;margin-right:-44px}.md\:sl--my-12{margin-bottom:-48px;margin-top:-48px}.md\:sl--mx-12{margin-left:-48px;margin-right:-48px}.md\:sl--my-14{margin-bottom:-56px;margin-top:-56px}.md\:sl--mx-14{margin-left:-56px;margin-right:-56px}.md\:sl--my-16{margin-bottom:-64px;margin-top:-64px}.md\:sl--mx-16{margin-left:-64px;margin-right:-64px}.md\:sl--my-20{margin-bottom:-80px;margin-top:-80px}.md\:sl--mx-20{margin-left:-80px;margin-right:-80px}.md\:sl--my-24{margin-bottom:-96px;margin-top:-96px}.md\:sl--mx-24{margin-left:-96px;margin-right:-96px}.md\:sl--my-28{margin-bottom:-112px;margin-top:-112px}.md\:sl--mx-28{margin-left:-112px;margin-right:-112px}.md\:sl--my-32{margin-bottom:-128px;margin-top:-128px}.md\:sl--mx-32{margin-left:-128px;margin-right:-128px}.md\:sl--my-36{margin-bottom:-144px;margin-top:-144px}.md\:sl--mx-36{margin-left:-144px;margin-right:-144px}.md\:sl--my-40{margin-bottom:-160px;margin-top:-160px}.md\:sl--mx-40{margin-left:-160px;margin-right:-160px}.md\:sl--my-44{margin-bottom:-176px;margin-top:-176px}.md\:sl--mx-44{margin-left:-176px;margin-right:-176px}.md\:sl--my-48{margin-bottom:-192px;margin-top:-192px}.md\:sl--mx-48{margin-left:-192px;margin-right:-192px}.md\:sl--my-52{margin-bottom:-208px;margin-top:-208px}.md\:sl--mx-52{margin-left:-208px;margin-right:-208px}.md\:sl--my-56{margin-bottom:-224px;margin-top:-224px}.md\:sl--mx-56{margin-left:-224px;margin-right:-224px}.md\:sl--my-60{margin-bottom:-240px;margin-top:-240px}.md\:sl--mx-60{margin-left:-240px;margin-right:-240px}.md\:sl--my-64{margin-bottom:-256px;margin-top:-256px}.md\:sl--mx-64{margin-left:-256px;margin-right:-256px}.md\:sl--my-72{margin-bottom:-288px;margin-top:-288px}.md\:sl--mx-72{margin-left:-288px;margin-right:-288px}.md\:sl--my-80{margin-bottom:-320px;margin-top:-320px}.md\:sl--mx-80{margin-left:-320px;margin-right:-320px}.md\:sl--my-96{margin-bottom:-384px;margin-top:-384px}.md\:sl--mx-96{margin-left:-384px;margin-right:-384px}.md\:sl--my-px{margin-bottom:-1px;margin-top:-1px}.md\:sl--mx-px{margin-left:-1px;margin-right:-1px}.md\:sl--my-0\.5{margin-bottom:-2px;margin-top:-2px}.md\:sl--mx-0\.5{margin-left:-2px;margin-right:-2px}.md\:sl--my-1\.5{margin-bottom:-6px;margin-top:-6px}.md\:sl--mx-1\.5{margin-left:-6px;margin-right:-6px}.md\:sl--my-2\.5{margin-bottom:-10px;margin-top:-10px}.md\:sl--mx-2\.5{margin-left:-10px;margin-right:-10px}.md\:sl--my-3\.5{margin-bottom:-14px;margin-top:-14px}.md\:sl--mx-3\.5{margin-left:-14px;margin-right:-14px}.md\:sl--my-4\.5{margin-bottom:-18px;margin-top:-18px}.md\:sl--mx-4\.5{margin-left:-18px;margin-right:-18px}.md\:sl-mt-0{margin-top:0}.md\:sl-mr-0{margin-right:0}.md\:sl-mb-0{margin-bottom:0}.md\:sl-ml-0{margin-left:0}.md\:sl-mt-1{margin-top:4px}.md\:sl-mr-1{margin-right:4px}.md\:sl-mb-1{margin-bottom:4px}.md\:sl-ml-1{margin-left:4px}.md\:sl-mt-2{margin-top:8px}.md\:sl-mr-2{margin-right:8px}.md\:sl-mb-2{margin-bottom:8px}.md\:sl-ml-2{margin-left:8px}.md\:sl-mt-3{margin-top:12px}.md\:sl-mr-3{margin-right:12px}.md\:sl-mb-3{margin-bottom:12px}.md\:sl-ml-3{margin-left:12px}.md\:sl-mt-4{margin-top:16px}.md\:sl-mr-4{margin-right:16px}.md\:sl-mb-4{margin-bottom:16px}.md\:sl-ml-4{margin-left:16px}.md\:sl-mt-5{margin-top:20px}.md\:sl-mr-5{margin-right:20px}.md\:sl-mb-5{margin-bottom:20px}.md\:sl-ml-5{margin-left:20px}.md\:sl-mt-6{margin-top:24px}.md\:sl-mr-6{margin-right:24px}.md\:sl-mb-6{margin-bottom:24px}.md\:sl-ml-6{margin-left:24px}.md\:sl-mt-7{margin-top:28px}.md\:sl-mr-7{margin-right:28px}.md\:sl-mb-7{margin-bottom:28px}.md\:sl-ml-7{margin-left:28px}.md\:sl-mt-8{margin-top:32px}.md\:sl-mr-8{margin-right:32px}.md\:sl-mb-8{margin-bottom:32px}.md\:sl-ml-8{margin-left:32px}.md\:sl-mt-9{margin-top:36px}.md\:sl-mr-9{margin-right:36px}.md\:sl-mb-9{margin-bottom:36px}.md\:sl-ml-9{margin-left:36px}.md\:sl-mt-10{margin-top:40px}.md\:sl-mr-10{margin-right:40px}.md\:sl-mb-10{margin-bottom:40px}.md\:sl-ml-10{margin-left:40px}.md\:sl-mt-11{margin-top:44px}.md\:sl-mr-11{margin-right:44px}.md\:sl-mb-11{margin-bottom:44px}.md\:sl-ml-11{margin-left:44px}.md\:sl-mt-12{margin-top:48px}.md\:sl-mr-12{margin-right:48px}.md\:sl-mb-12{margin-bottom:48px}.md\:sl-ml-12{margin-left:48px}.md\:sl-mt-14{margin-top:56px}.md\:sl-mr-14{margin-right:56px}.md\:sl-mb-14{margin-bottom:56px}.md\:sl-ml-14{margin-left:56px}.md\:sl-mt-16{margin-top:64px}.md\:sl-mr-16{margin-right:64px}.md\:sl-mb-16{margin-bottom:64px}.md\:sl-ml-16{margin-left:64px}.md\:sl-mt-20{margin-top:80px}.md\:sl-mr-20{margin-right:80px}.md\:sl-mb-20{margin-bottom:80px}.md\:sl-ml-20{margin-left:80px}.md\:sl-mt-24{margin-top:96px}.md\:sl-mr-24{margin-right:96px}.md\:sl-mb-24{margin-bottom:96px}.md\:sl-ml-24{margin-left:96px}.md\:sl-mt-28{margin-top:112px}.md\:sl-mr-28{margin-right:112px}.md\:sl-mb-28{margin-bottom:112px}.md\:sl-ml-28{margin-left:112px}.md\:sl-mt-32{margin-top:128px}.md\:sl-mr-32{margin-right:128px}.md\:sl-mb-32{margin-bottom:128px}.md\:sl-ml-32{margin-left:128px}.md\:sl-mt-36{margin-top:144px}.md\:sl-mr-36{margin-right:144px}.md\:sl-mb-36{margin-bottom:144px}.md\:sl-ml-36{margin-left:144px}.md\:sl-mt-40{margin-top:160px}.md\:sl-mr-40{margin-right:160px}.md\:sl-mb-40{margin-bottom:160px}.md\:sl-ml-40{margin-left:160px}.md\:sl-mt-44{margin-top:176px}.md\:sl-mr-44{margin-right:176px}.md\:sl-mb-44{margin-bottom:176px}.md\:sl-ml-44{margin-left:176px}.md\:sl-mt-48{margin-top:192px}.md\:sl-mr-48{margin-right:192px}.md\:sl-mb-48{margin-bottom:192px}.md\:sl-ml-48{margin-left:192px}.md\:sl-mt-52{margin-top:208px}.md\:sl-mr-52{margin-right:208px}.md\:sl-mb-52{margin-bottom:208px}.md\:sl-ml-52{margin-left:208px}.md\:sl-mt-56{margin-top:224px}.md\:sl-mr-56{margin-right:224px}.md\:sl-mb-56{margin-bottom:224px}.md\:sl-ml-56{margin-left:224px}.md\:sl-mt-60{margin-top:240px}.md\:sl-mr-60{margin-right:240px}.md\:sl-mb-60{margin-bottom:240px}.md\:sl-ml-60{margin-left:240px}.md\:sl-mt-64{margin-top:256px}.md\:sl-mr-64{margin-right:256px}.md\:sl-mb-64{margin-bottom:256px}.md\:sl-ml-64{margin-left:256px}.md\:sl-mt-72{margin-top:288px}.md\:sl-mr-72{margin-right:288px}.md\:sl-mb-72{margin-bottom:288px}.md\:sl-ml-72{margin-left:288px}.md\:sl-mt-80{margin-top:320px}.md\:sl-mr-80{margin-right:320px}.md\:sl-mb-80{margin-bottom:320px}.md\:sl-ml-80{margin-left:320px}.md\:sl-mt-96{margin-top:384px}.md\:sl-mr-96{margin-right:384px}.md\:sl-mb-96{margin-bottom:384px}.md\:sl-ml-96{margin-left:384px}.md\:sl-mt-auto{margin-top:auto}.md\:sl-mr-auto{margin-right:auto}.md\:sl-mb-auto{margin-bottom:auto}.md\:sl-ml-auto{margin-left:auto}.md\:sl-mt-px{margin-top:1px}.md\:sl-mr-px{margin-right:1px}.md\:sl-mb-px{margin-bottom:1px}.md\:sl-ml-px{margin-left:1px}.md\:sl-mt-0\.5{margin-top:2px}.md\:sl-mr-0\.5{margin-right:2px}.md\:sl-mb-0\.5{margin-bottom:2px}.md\:sl-ml-0\.5{margin-left:2px}.md\:sl-mt-1\.5{margin-top:6px}.md\:sl-mr-1\.5{margin-right:6px}.md\:sl-mb-1\.5{margin-bottom:6px}.md\:sl-ml-1\.5{margin-left:6px}.md\:sl-mt-2\.5{margin-top:10px}.md\:sl-mr-2\.5{margin-right:10px}.md\:sl-mb-2\.5{margin-bottom:10px}.md\:sl-ml-2\.5{margin-left:10px}.md\:sl-mt-3\.5{margin-top:14px}.md\:sl-mr-3\.5{margin-right:14px}.md\:sl-mb-3\.5{margin-bottom:14px}.md\:sl-ml-3\.5{margin-left:14px}.md\:sl-mt-4\.5{margin-top:18px}.md\:sl-mr-4\.5{margin-right:18px}.md\:sl-mb-4\.5{margin-bottom:18px}.md\:sl-ml-4\.5{margin-left:18px}.md\:sl--mt-0{margin-top:0}.md\:sl--mr-0{margin-right:0}.md\:sl--mb-0{margin-bottom:0}.md\:sl--ml-0{margin-left:0}.md\:sl--mt-1{margin-top:-4px}.md\:sl--mr-1{margin-right:-4px}.md\:sl--mb-1{margin-bottom:-4px}.md\:sl--ml-1{margin-left:-4px}.md\:sl--mt-2{margin-top:-8px}.md\:sl--mr-2{margin-right:-8px}.md\:sl--mb-2{margin-bottom:-8px}.md\:sl--ml-2{margin-left:-8px}.md\:sl--mt-3{margin-top:-12px}.md\:sl--mr-3{margin-right:-12px}.md\:sl--mb-3{margin-bottom:-12px}.md\:sl--ml-3{margin-left:-12px}.md\:sl--mt-4{margin-top:-16px}.md\:sl--mr-4{margin-right:-16px}.md\:sl--mb-4{margin-bottom:-16px}.md\:sl--ml-4{margin-left:-16px}.md\:sl--mt-5{margin-top:-20px}.md\:sl--mr-5{margin-right:-20px}.md\:sl--mb-5{margin-bottom:-20px}.md\:sl--ml-5{margin-left:-20px}.md\:sl--mt-6{margin-top:-24px}.md\:sl--mr-6{margin-right:-24px}.md\:sl--mb-6{margin-bottom:-24px}.md\:sl--ml-6{margin-left:-24px}.md\:sl--mt-7{margin-top:-28px}.md\:sl--mr-7{margin-right:-28px}.md\:sl--mb-7{margin-bottom:-28px}.md\:sl--ml-7{margin-left:-28px}.md\:sl--mt-8{margin-top:-32px}.md\:sl--mr-8{margin-right:-32px}.md\:sl--mb-8{margin-bottom:-32px}.md\:sl--ml-8{margin-left:-32px}.md\:sl--mt-9{margin-top:-36px}.md\:sl--mr-9{margin-right:-36px}.md\:sl--mb-9{margin-bottom:-36px}.md\:sl--ml-9{margin-left:-36px}.md\:sl--mt-10{margin-top:-40px}.md\:sl--mr-10{margin-right:-40px}.md\:sl--mb-10{margin-bottom:-40px}.md\:sl--ml-10{margin-left:-40px}.md\:sl--mt-11{margin-top:-44px}.md\:sl--mr-11{margin-right:-44px}.md\:sl--mb-11{margin-bottom:-44px}.md\:sl--ml-11{margin-left:-44px}.md\:sl--mt-12{margin-top:-48px}.md\:sl--mr-12{margin-right:-48px}.md\:sl--mb-12{margin-bottom:-48px}.md\:sl--ml-12{margin-left:-48px}.md\:sl--mt-14{margin-top:-56px}.md\:sl--mr-14{margin-right:-56px}.md\:sl--mb-14{margin-bottom:-56px}.md\:sl--ml-14{margin-left:-56px}.md\:sl--mt-16{margin-top:-64px}.md\:sl--mr-16{margin-right:-64px}.md\:sl--mb-16{margin-bottom:-64px}.md\:sl--ml-16{margin-left:-64px}.md\:sl--mt-20{margin-top:-80px}.md\:sl--mr-20{margin-right:-80px}.md\:sl--mb-20{margin-bottom:-80px}.md\:sl--ml-20{margin-left:-80px}.md\:sl--mt-24{margin-top:-96px}.md\:sl--mr-24{margin-right:-96px}.md\:sl--mb-24{margin-bottom:-96px}.md\:sl--ml-24{margin-left:-96px}.md\:sl--mt-28{margin-top:-112px}.md\:sl--mr-28{margin-right:-112px}.md\:sl--mb-28{margin-bottom:-112px}.md\:sl--ml-28{margin-left:-112px}.md\:sl--mt-32{margin-top:-128px}.md\:sl--mr-32{margin-right:-128px}.md\:sl--mb-32{margin-bottom:-128px}.md\:sl--ml-32{margin-left:-128px}.md\:sl--mt-36{margin-top:-144px}.md\:sl--mr-36{margin-right:-144px}.md\:sl--mb-36{margin-bottom:-144px}.md\:sl--ml-36{margin-left:-144px}.md\:sl--mt-40{margin-top:-160px}.md\:sl--mr-40{margin-right:-160px}.md\:sl--mb-40{margin-bottom:-160px}.md\:sl--ml-40{margin-left:-160px}.md\:sl--mt-44{margin-top:-176px}.md\:sl--mr-44{margin-right:-176px}.md\:sl--mb-44{margin-bottom:-176px}.md\:sl--ml-44{margin-left:-176px}.md\:sl--mt-48{margin-top:-192px}.md\:sl--mr-48{margin-right:-192px}.md\:sl--mb-48{margin-bottom:-192px}.md\:sl--ml-48{margin-left:-192px}.md\:sl--mt-52{margin-top:-208px}.md\:sl--mr-52{margin-right:-208px}.md\:sl--mb-52{margin-bottom:-208px}.md\:sl--ml-52{margin-left:-208px}.md\:sl--mt-56{margin-top:-224px}.md\:sl--mr-56{margin-right:-224px}.md\:sl--mb-56{margin-bottom:-224px}.md\:sl--ml-56{margin-left:-224px}.md\:sl--mt-60{margin-top:-240px}.md\:sl--mr-60{margin-right:-240px}.md\:sl--mb-60{margin-bottom:-240px}.md\:sl--ml-60{margin-left:-240px}.md\:sl--mt-64{margin-top:-256px}.md\:sl--mr-64{margin-right:-256px}.md\:sl--mb-64{margin-bottom:-256px}.md\:sl--ml-64{margin-left:-256px}.md\:sl--mt-72{margin-top:-288px}.md\:sl--mr-72{margin-right:-288px}.md\:sl--mb-72{margin-bottom:-288px}.md\:sl--ml-72{margin-left:-288px}.md\:sl--mt-80{margin-top:-320px}.md\:sl--mr-80{margin-right:-320px}.md\:sl--mb-80{margin-bottom:-320px}.md\:sl--ml-80{margin-left:-320px}.md\:sl--mt-96{margin-top:-384px}.md\:sl--mr-96{margin-right:-384px}.md\:sl--mb-96{margin-bottom:-384px}.md\:sl--ml-96{margin-left:-384px}.md\:sl--mt-px{margin-top:-1px}.md\:sl--mr-px{margin-right:-1px}.md\:sl--mb-px{margin-bottom:-1px}.md\:sl--ml-px{margin-left:-1px}.md\:sl--mt-0\.5{margin-top:-2px}.md\:sl--mr-0\.5{margin-right:-2px}.md\:sl--mb-0\.5{margin-bottom:-2px}.md\:sl--ml-0\.5{margin-left:-2px}.md\:sl--mt-1\.5{margin-top:-6px}.md\:sl--mr-1\.5{margin-right:-6px}.md\:sl--mb-1\.5{margin-bottom:-6px}.md\:sl--ml-1\.5{margin-left:-6px}.md\:sl--mt-2\.5{margin-top:-10px}.md\:sl--mr-2\.5{margin-right:-10px}.md\:sl--mb-2\.5{margin-bottom:-10px}.md\:sl--ml-2\.5{margin-left:-10px}.md\:sl--mt-3\.5{margin-top:-14px}.md\:sl--mr-3\.5{margin-right:-14px}.md\:sl--mb-3\.5{margin-bottom:-14px}.md\:sl--ml-3\.5{margin-left:-14px}.md\:sl--mt-4\.5{margin-top:-18px}.md\:sl--mr-4\.5{margin-right:-18px}.md\:sl--mb-4\.5{margin-bottom:-18px}.md\:sl--ml-4\.5{margin-left:-18px}.md\:sl-max-h-full{max-height:100%}.md\:sl-max-h-screen{max-height:100vh}.md\:sl-max-w-none{max-width:none}.md\:sl-max-w-full{max-width:100%}.md\:sl-max-w-min{max-width:-moz-min-content;max-width:min-content}.md\:sl-max-w-max{max-width:-moz-max-content;max-width:max-content}.md\:sl-max-w-prose{max-width:65ch}.md\:sl-min-h-full{min-height:100%}.md\:sl-min-h-screen{min-height:100vh}.md\:sl-min-w-full{min-width:100%}.md\:sl-min-w-min{min-width:-moz-min-content;min-width:min-content}.md\:sl-min-w-max{min-width:-moz-max-content;min-width:max-content}.md\:sl-p-0{padding:0}.md\:sl-p-1{padding:4px}.md\:sl-p-2{padding:8px}.md\:sl-p-3{padding:12px}.md\:sl-p-4{padding:16px}.md\:sl-p-5{padding:20px}.md\:sl-p-6{padding:24px}.md\:sl-p-7{padding:28px}.md\:sl-p-8{padding:32px}.md\:sl-p-9{padding:36px}.md\:sl-p-10{padding:40px}.md\:sl-p-11{padding:44px}.md\:sl-p-12{padding:48px}.md\:sl-p-14{padding:56px}.md\:sl-p-16{padding:64px}.md\:sl-p-20{padding:80px}.md\:sl-p-24{padding:96px}.md\:sl-p-28{padding:112px}.md\:sl-p-32{padding:128px}.md\:sl-p-36{padding:144px}.md\:sl-p-40{padding:160px}.md\:sl-p-44{padding:176px}.md\:sl-p-48{padding:192px}.md\:sl-p-52{padding:208px}.md\:sl-p-56{padding:224px}.md\:sl-p-60{padding:240px}.md\:sl-p-64{padding:256px}.md\:sl-p-72{padding:288px}.md\:sl-p-80{padding:320px}.md\:sl-p-96{padding:384px}.md\:sl-p-px{padding:1px}.md\:sl-p-0\.5{padding:2px}.md\:sl-p-1\.5{padding:6px}.md\:sl-p-2\.5{padding:10px}.md\:sl-p-3\.5{padding:14px}.md\:sl-p-4\.5{padding:18px}.md\:sl-py-0{padding-bottom:0;padding-top:0}.md\:sl-px-0{padding-left:0;padding-right:0}.md\:sl-py-1{padding-bottom:4px;padding-top:4px}.md\:sl-px-1{padding-left:4px;padding-right:4px}.md\:sl-py-2{padding-bottom:8px;padding-top:8px}.md\:sl-px-2{padding-left:8px;padding-right:8px}.md\:sl-py-3{padding-bottom:12px;padding-top:12px}.md\:sl-px-3{padding-left:12px;padding-right:12px}.md\:sl-py-4{padding-bottom:16px;padding-top:16px}.md\:sl-px-4{padding-left:16px;padding-right:16px}.md\:sl-py-5{padding-bottom:20px;padding-top:20px}.md\:sl-px-5{padding-left:20px;padding-right:20px}.md\:sl-py-6{padding-bottom:24px;padding-top:24px}.md\:sl-px-6{padding-left:24px;padding-right:24px}.md\:sl-py-7{padding-bottom:28px;padding-top:28px}.md\:sl-px-7{padding-left:28px;padding-right:28px}.md\:sl-py-8{padding-bottom:32px;padding-top:32px}.md\:sl-px-8{padding-left:32px;padding-right:32px}.md\:sl-py-9{padding-bottom:36px;padding-top:36px}.md\:sl-px-9{padding-left:36px;padding-right:36px}.md\:sl-py-10{padding-bottom:40px;padding-top:40px}.md\:sl-px-10{padding-left:40px;padding-right:40px}.md\:sl-py-11{padding-bottom:44px;padding-top:44px}.md\:sl-px-11{padding-left:44px;padding-right:44px}.md\:sl-py-12{padding-bottom:48px;padding-top:48px}.md\:sl-px-12{padding-left:48px;padding-right:48px}.md\:sl-py-14{padding-bottom:56px;padding-top:56px}.md\:sl-px-14{padding-left:56px;padding-right:56px}.md\:sl-py-16{padding-bottom:64px;padding-top:64px}.md\:sl-px-16{padding-left:64px;padding-right:64px}.md\:sl-py-20{padding-bottom:80px;padding-top:80px}.md\:sl-px-20{padding-left:80px;padding-right:80px}.md\:sl-py-24{padding-bottom:96px;padding-top:96px}.md\:sl-px-24{padding-left:96px;padding-right:96px}.md\:sl-py-28{padding-bottom:112px;padding-top:112px}.md\:sl-px-28{padding-left:112px;padding-right:112px}.md\:sl-py-32{padding-bottom:128px;padding-top:128px}.md\:sl-px-32{padding-left:128px;padding-right:128px}.md\:sl-py-36{padding-bottom:144px;padding-top:144px}.md\:sl-px-36{padding-left:144px;padding-right:144px}.md\:sl-py-40{padding-bottom:160px;padding-top:160px}.md\:sl-px-40{padding-left:160px;padding-right:160px}.md\:sl-py-44{padding-bottom:176px;padding-top:176px}.md\:sl-px-44{padding-left:176px;padding-right:176px}.md\:sl-py-48{padding-bottom:192px;padding-top:192px}.md\:sl-px-48{padding-left:192px;padding-right:192px}.md\:sl-py-52{padding-bottom:208px;padding-top:208px}.md\:sl-px-52{padding-left:208px;padding-right:208px}.md\:sl-py-56{padding-bottom:224px;padding-top:224px}.md\:sl-px-56{padding-left:224px;padding-right:224px}.md\:sl-py-60{padding-bottom:240px;padding-top:240px}.md\:sl-px-60{padding-left:240px;padding-right:240px}.md\:sl-py-64{padding-bottom:256px;padding-top:256px}.md\:sl-px-64{padding-left:256px;padding-right:256px}.md\:sl-py-72{padding-bottom:288px;padding-top:288px}.md\:sl-px-72{padding-left:288px;padding-right:288px}.md\:sl-py-80{padding-bottom:320px;padding-top:320px}.md\:sl-px-80{padding-left:320px;padding-right:320px}.md\:sl-py-96{padding-bottom:384px;padding-top:384px}.md\:sl-px-96{padding-left:384px;padding-right:384px}.md\:sl-py-px{padding-bottom:1px;padding-top:1px}.md\:sl-px-px{padding-left:1px;padding-right:1px}.md\:sl-py-0\.5{padding-bottom:2px;padding-top:2px}.md\:sl-px-0\.5{padding-left:2px;padding-right:2px}.md\:sl-py-1\.5{padding-bottom:6px;padding-top:6px}.md\:sl-px-1\.5{padding-left:6px;padding-right:6px}.md\:sl-py-2\.5{padding-bottom:10px;padding-top:10px}.md\:sl-px-2\.5{padding-left:10px;padding-right:10px}.md\:sl-py-3\.5{padding-bottom:14px;padding-top:14px}.md\:sl-px-3\.5{padding-left:14px;padding-right:14px}.md\:sl-py-4\.5{padding-bottom:18px;padding-top:18px}.md\:sl-px-4\.5{padding-left:18px;padding-right:18px}.md\:sl-pt-0{padding-top:0}.md\:sl-pr-0{padding-right:0}.md\:sl-pb-0{padding-bottom:0}.md\:sl-pl-0{padding-left:0}.md\:sl-pt-1{padding-top:4px}.md\:sl-pr-1{padding-right:4px}.md\:sl-pb-1{padding-bottom:4px}.md\:sl-pl-1{padding-left:4px}.md\:sl-pt-2{padding-top:8px}.md\:sl-pr-2{padding-right:8px}.md\:sl-pb-2{padding-bottom:8px}.md\:sl-pl-2{padding-left:8px}.md\:sl-pt-3{padding-top:12px}.md\:sl-pr-3{padding-right:12px}.md\:sl-pb-3{padding-bottom:12px}.md\:sl-pl-3{padding-left:12px}.md\:sl-pt-4{padding-top:16px}.md\:sl-pr-4{padding-right:16px}.md\:sl-pb-4{padding-bottom:16px}.md\:sl-pl-4{padding-left:16px}.md\:sl-pt-5{padding-top:20px}.md\:sl-pr-5{padding-right:20px}.md\:sl-pb-5{padding-bottom:20px}.md\:sl-pl-5{padding-left:20px}.md\:sl-pt-6{padding-top:24px}.md\:sl-pr-6{padding-right:24px}.md\:sl-pb-6{padding-bottom:24px}.md\:sl-pl-6{padding-left:24px}.md\:sl-pt-7{padding-top:28px}.md\:sl-pr-7{padding-right:28px}.md\:sl-pb-7{padding-bottom:28px}.md\:sl-pl-7{padding-left:28px}.md\:sl-pt-8{padding-top:32px}.md\:sl-pr-8{padding-right:32px}.md\:sl-pb-8{padding-bottom:32px}.md\:sl-pl-8{padding-left:32px}.md\:sl-pt-9{padding-top:36px}.md\:sl-pr-9{padding-right:36px}.md\:sl-pb-9{padding-bottom:36px}.md\:sl-pl-9{padding-left:36px}.md\:sl-pt-10{padding-top:40px}.md\:sl-pr-10{padding-right:40px}.md\:sl-pb-10{padding-bottom:40px}.md\:sl-pl-10{padding-left:40px}.md\:sl-pt-11{padding-top:44px}.md\:sl-pr-11{padding-right:44px}.md\:sl-pb-11{padding-bottom:44px}.md\:sl-pl-11{padding-left:44px}.md\:sl-pt-12{padding-top:48px}.md\:sl-pr-12{padding-right:48px}.md\:sl-pb-12{padding-bottom:48px}.md\:sl-pl-12{padding-left:48px}.md\:sl-pt-14{padding-top:56px}.md\:sl-pr-14{padding-right:56px}.md\:sl-pb-14{padding-bottom:56px}.md\:sl-pl-14{padding-left:56px}.md\:sl-pt-16{padding-top:64px}.md\:sl-pr-16{padding-right:64px}.md\:sl-pb-16{padding-bottom:64px}.md\:sl-pl-16{padding-left:64px}.md\:sl-pt-20{padding-top:80px}.md\:sl-pr-20{padding-right:80px}.md\:sl-pb-20{padding-bottom:80px}.md\:sl-pl-20{padding-left:80px}.md\:sl-pt-24{padding-top:96px}.md\:sl-pr-24{padding-right:96px}.md\:sl-pb-24{padding-bottom:96px}.md\:sl-pl-24{padding-left:96px}.md\:sl-pt-28{padding-top:112px}.md\:sl-pr-28{padding-right:112px}.md\:sl-pb-28{padding-bottom:112px}.md\:sl-pl-28{padding-left:112px}.md\:sl-pt-32{padding-top:128px}.md\:sl-pr-32{padding-right:128px}.md\:sl-pb-32{padding-bottom:128px}.md\:sl-pl-32{padding-left:128px}.md\:sl-pt-36{padding-top:144px}.md\:sl-pr-36{padding-right:144px}.md\:sl-pb-36{padding-bottom:144px}.md\:sl-pl-36{padding-left:144px}.md\:sl-pt-40{padding-top:160px}.md\:sl-pr-40{padding-right:160px}.md\:sl-pb-40{padding-bottom:160px}.md\:sl-pl-40{padding-left:160px}.md\:sl-pt-44{padding-top:176px}.md\:sl-pr-44{padding-right:176px}.md\:sl-pb-44{padding-bottom:176px}.md\:sl-pl-44{padding-left:176px}.md\:sl-pt-48{padding-top:192px}.md\:sl-pr-48{padding-right:192px}.md\:sl-pb-48{padding-bottom:192px}.md\:sl-pl-48{padding-left:192px}.md\:sl-pt-52{padding-top:208px}.md\:sl-pr-52{padding-right:208px}.md\:sl-pb-52{padding-bottom:208px}.md\:sl-pl-52{padding-left:208px}.md\:sl-pt-56{padding-top:224px}.md\:sl-pr-56{padding-right:224px}.md\:sl-pb-56{padding-bottom:224px}.md\:sl-pl-56{padding-left:224px}.md\:sl-pt-60{padding-top:240px}.md\:sl-pr-60{padding-right:240px}.md\:sl-pb-60{padding-bottom:240px}.md\:sl-pl-60{padding-left:240px}.md\:sl-pt-64{padding-top:256px}.md\:sl-pr-64{padding-right:256px}.md\:sl-pb-64{padding-bottom:256px}.md\:sl-pl-64{padding-left:256px}.md\:sl-pt-72{padding-top:288px}.md\:sl-pr-72{padding-right:288px}.md\:sl-pb-72{padding-bottom:288px}.md\:sl-pl-72{padding-left:288px}.md\:sl-pt-80{padding-top:320px}.md\:sl-pr-80{padding-right:320px}.md\:sl-pb-80{padding-bottom:320px}.md\:sl-pl-80{padding-left:320px}.md\:sl-pt-96{padding-top:384px}.md\:sl-pr-96{padding-right:384px}.md\:sl-pb-96{padding-bottom:384px}.md\:sl-pl-96{padding-left:384px}.md\:sl-pt-px{padding-top:1px}.md\:sl-pr-px{padding-right:1px}.md\:sl-pb-px{padding-bottom:1px}.md\:sl-pl-px{padding-left:1px}.md\:sl-pt-0\.5{padding-top:2px}.md\:sl-pr-0\.5{padding-right:2px}.md\:sl-pb-0\.5{padding-bottom:2px}.md\:sl-pl-0\.5{padding-left:2px}.md\:sl-pt-1\.5{padding-top:6px}.md\:sl-pr-1\.5{padding-right:6px}.md\:sl-pb-1\.5{padding-bottom:6px}.md\:sl-pl-1\.5{padding-left:6px}.md\:sl-pt-2\.5{padding-top:10px}.md\:sl-pr-2\.5{padding-right:10px}.md\:sl-pb-2\.5{padding-bottom:10px}.md\:sl-pl-2\.5{padding-left:10px}.md\:sl-pt-3\.5{padding-top:14px}.md\:sl-pr-3\.5{padding-right:14px}.md\:sl-pb-3\.5{padding-bottom:14px}.md\:sl-pl-3\.5{padding-left:14px}.md\:sl-pt-4\.5{padding-top:18px}.md\:sl-pr-4\.5{padding-right:18px}.md\:sl-pb-4\.5{padding-bottom:18px}.md\:sl-pl-4\.5{padding-left:18px}.md\:sl-static{position:static}.md\:sl-fixed{position:fixed}.md\:sl-absolute{position:absolute}.md\:sl-relative{position:relative}.md\:sl-sticky{position:-webkit-sticky;position:sticky}.md\:sl-visible{visibility:visible}.md\:sl-invisible{visibility:hidden}.sl-group:hover .md\:group-hover\:sl-visible{visibility:visible}.sl-group:hover .md\:group-hover\:sl-invisible{visibility:hidden}.sl-group:focus .md\:group-focus\:sl-visible{visibility:visible}.sl-group:focus .md\:group-focus\:sl-invisible{visibility:hidden}.md\:sl-w-0{width:0}.md\:sl-w-1{width:4px}.md\:sl-w-2{width:8px}.md\:sl-w-3{width:12px}.md\:sl-w-4{width:16px}.md\:sl-w-5{width:20px}.md\:sl-w-6{width:24px}.md\:sl-w-7{width:28px}.md\:sl-w-8{width:32px}.md\:sl-w-9{width:36px}.md\:sl-w-10{width:40px}.md\:sl-w-11{width:44px}.md\:sl-w-12{width:48px}.md\:sl-w-14{width:56px}.md\:sl-w-16{width:64px}.md\:sl-w-20{width:80px}.md\:sl-w-24{width:96px}.md\:sl-w-28{width:112px}.md\:sl-w-32{width:128px}.md\:sl-w-36{width:144px}.md\:sl-w-40{width:160px}.md\:sl-w-44{width:176px}.md\:sl-w-48{width:192px}.md\:sl-w-52{width:208px}.md\:sl-w-56{width:224px}.md\:sl-w-60{width:240px}.md\:sl-w-64{width:256px}.md\:sl-w-72{width:288px}.md\:sl-w-80{width:320px}.md\:sl-w-96{width:384px}.md\:sl-w-auto{width:auto}.md\:sl-w-px{width:1px}.md\:sl-w-0\.5{width:2px}.md\:sl-w-1\.5{width:6px}.md\:sl-w-2\.5{width:10px}.md\:sl-w-3\.5{width:14px}.md\:sl-w-4\.5{width:18px}.md\:sl-w-xs{width:20px}.md\:sl-w-sm{width:24px}.md\:sl-w-md{width:32px}.md\:sl-w-lg{width:36px}.md\:sl-w-xl{width:44px}.md\:sl-w-2xl{width:52px}.md\:sl-w-3xl{width:60px}.md\:sl-w-1\/2{width:50%}.md\:sl-w-1\/3{width:33.333333%}.md\:sl-w-2\/3{width:66.666667%}.md\:sl-w-1\/4{width:25%}.md\:sl-w-2\/4{width:50%}.md\:sl-w-3\/4{width:75%}.md\:sl-w-1\/5{width:20%}.md\:sl-w-2\/5{width:40%}.md\:sl-w-3\/5{width:60%}.md\:sl-w-4\/5{width:80%}.md\:sl-w-1\/6{width:16.666667%}.md\:sl-w-2\/6{width:33.333333%}.md\:sl-w-3\/6{width:50%}.md\:sl-w-4\/6{width:66.666667%}.md\:sl-w-5\/6{width:83.333333%}.md\:sl-w-full{width:100%}.md\:sl-w-screen{width:100vw}.md\:sl-w-min{width:-moz-min-content;width:min-content}.md\:sl-w-max{width:-moz-max-content;width:max-content}}@media (max-width:975px){.lg\:sl-stack--1{gap:4px}.lg\:sl-stack--2{gap:8px}.lg\:sl-stack--3{gap:12px}.lg\:sl-stack--4{gap:16px}.lg\:sl-stack--5{gap:20px}.lg\:sl-stack--6{gap:24px}.lg\:sl-stack--7{gap:28px}.lg\:sl-stack--8{gap:32px}.lg\:sl-stack--9{gap:36px}.lg\:sl-stack--10{gap:40px}.lg\:sl-stack--12{gap:48px}.lg\:sl-stack--14{gap:56px}.lg\:sl-stack--16{gap:64px}.lg\:sl-stack--20{gap:80px}.lg\:sl-stack--24{gap:96px}.lg\:sl-stack--32{gap:128px}.lg\:sl-content-center{align-content:center}.lg\:sl-content-start{align-content:flex-start}.lg\:sl-content-end{align-content:flex-end}.lg\:sl-content-between{align-content:space-between}.lg\:sl-content-around{align-content:space-around}.lg\:sl-content-evenly{align-content:space-evenly}.lg\:sl-items-start{align-items:flex-start}.lg\:sl-items-end{align-items:flex-end}.lg\:sl-items-center{align-items:center}.lg\:sl-items-baseline{align-items:baseline}.lg\:sl-items-stretch{align-items:stretch}.lg\:sl-self-auto{align-self:auto}.lg\:sl-self-start{align-self:flex-start}.lg\:sl-self-end{align-self:flex-end}.lg\:sl-self-center{align-self:center}.lg\:sl-self-stretch{align-self:stretch}.lg\:sl-blur-0,.lg\:sl-blur-none{--tw-blur:blur(0)}.lg\:sl-blur-sm{--tw-blur:blur(4px)}.lg\:sl-blur{--tw-blur:blur(8px)}.lg\:sl-blur-md{--tw-blur:blur(12px)}.lg\:sl-blur-lg{--tw-blur:blur(16px)}.lg\:sl-blur-xl{--tw-blur:blur(24px)}.lg\:sl-blur-2xl{--tw-blur:blur(40px)}.lg\:sl-blur-3xl{--tw-blur:blur(64px)}.lg\:sl-block{display:block}.lg\:sl-inline-block{display:inline-block}.lg\:sl-inline{display:inline}.lg\:sl-flex{display:flex}.lg\:sl-inline-flex{display:inline-flex}.lg\:sl-table{display:table}.lg\:sl-inline-table{display:inline-table}.lg\:sl-table-caption{display:table-caption}.lg\:sl-table-cell{display:table-cell}.lg\:sl-table-column{display:table-column}.lg\:sl-table-column-group{display:table-column-group}.lg\:sl-table-footer-group{display:table-footer-group}.lg\:sl-table-header-group{display:table-header-group}.lg\:sl-table-row-group{display:table-row-group}.lg\:sl-table-row{display:table-row}.lg\:sl-flow-root{display:flow-root}.lg\:sl-grid{display:grid}.lg\:sl-inline-grid{display:inline-grid}.lg\:sl-contents{display:contents}.lg\:sl-list-item{display:list-item}.lg\:sl-hidden{display:none}.lg\:sl-drop-shadow{--tw-drop-shadow:drop-shadow(var(--drop-shadow-default1)) drop-shadow(var(--drop-shadow-default2))}.lg\:sl-flex-1{flex:1 1}.lg\:sl-flex-auto{flex:1 1 auto}.lg\:sl-flex-initial{flex:0 1 auto}.lg\:sl-flex-none{flex:none}.lg\:sl-flex-row{flex-direction:row}.lg\:sl-flex-row-reverse{flex-direction:row-reverse}.lg\:sl-flex-col{flex-direction:column}.lg\:sl-flex-col-reverse{flex-direction:column-reverse}.lg\:sl-flex-grow-0{flex-grow:0}.lg\:sl-flex-grow{flex-grow:1}.lg\:sl-flex-shrink-0{flex-shrink:0}.lg\:sl-flex-shrink{flex-shrink:1}.lg\:sl-flex-wrap{flex-wrap:wrap}.lg\:sl-flex-wrap-reverse{flex-wrap:wrap-reverse}.lg\:sl-flex-nowrap{flex-wrap:nowrap}.lg\:sl-h-0{height:0}.lg\:sl-h-1{height:4px}.lg\:sl-h-2{height:8px}.lg\:sl-h-3{height:12px}.lg\:sl-h-4{height:16px}.lg\:sl-h-5{height:20px}.lg\:sl-h-6{height:24px}.lg\:sl-h-7{height:28px}.lg\:sl-h-8{height:32px}.lg\:sl-h-9{height:36px}.lg\:sl-h-10{height:40px}.lg\:sl-h-11{height:44px}.lg\:sl-h-12{height:48px}.lg\:sl-h-14{height:56px}.lg\:sl-h-16{height:64px}.lg\:sl-h-20{height:80px}.lg\:sl-h-24{height:96px}.lg\:sl-h-28{height:112px}.lg\:sl-h-32{height:128px}.lg\:sl-h-36{height:144px}.lg\:sl-h-40{height:160px}.lg\:sl-h-44{height:176px}.lg\:sl-h-48{height:192px}.lg\:sl-h-52{height:208px}.lg\:sl-h-56{height:224px}.lg\:sl-h-60{height:240px}.lg\:sl-h-64{height:256px}.lg\:sl-h-72{height:288px}.lg\:sl-h-80{height:320px}.lg\:sl-h-96{height:384px}.lg\:sl-h-auto{height:auto}.lg\:sl-h-px{height:1px}.lg\:sl-h-0\.5{height:2px}.lg\:sl-h-1\.5{height:6px}.lg\:sl-h-2\.5{height:10px}.lg\:sl-h-3\.5{height:14px}.lg\:sl-h-4\.5{height:18px}.lg\:sl-h-xs{height:20px}.lg\:sl-h-sm{height:24px}.lg\:sl-h-md{height:32px}.lg\:sl-h-lg{height:36px}.lg\:sl-h-xl{height:44px}.lg\:sl-h-2xl{height:52px}.lg\:sl-h-3xl{height:60px}.lg\:sl-h-full{height:100%}.lg\:sl-h-screen{height:100vh}.lg\:sl-justify-start{justify-content:flex-start}.lg\:sl-justify-end{justify-content:flex-end}.lg\:sl-justify-center{justify-content:center}.lg\:sl-justify-between{justify-content:space-between}.lg\:sl-justify-around{justify-content:space-around}.lg\:sl-justify-evenly{justify-content:space-evenly}.lg\:sl-justify-items-start{justify-items:start}.lg\:sl-justify-items-end{justify-items:end}.lg\:sl-justify-items-center{justify-items:center}.lg\:sl-justify-items-stretch{justify-items:stretch}.lg\:sl-justify-self-auto{justify-self:auto}.lg\:sl-justify-self-start{justify-self:start}.lg\:sl-justify-self-end{justify-self:end}.lg\:sl-justify-self-center{justify-self:center}.lg\:sl-justify-self-stretch{justify-self:stretch}.lg\:sl-m-0{margin:0}.lg\:sl-m-1{margin:4px}.lg\:sl-m-2{margin:8px}.lg\:sl-m-3{margin:12px}.lg\:sl-m-4{margin:16px}.lg\:sl-m-5{margin:20px}.lg\:sl-m-6{margin:24px}.lg\:sl-m-7{margin:28px}.lg\:sl-m-8{margin:32px}.lg\:sl-m-9{margin:36px}.lg\:sl-m-10{margin:40px}.lg\:sl-m-11{margin:44px}.lg\:sl-m-12{margin:48px}.lg\:sl-m-14{margin:56px}.lg\:sl-m-16{margin:64px}.lg\:sl-m-20{margin:80px}.lg\:sl-m-24{margin:96px}.lg\:sl-m-28{margin:112px}.lg\:sl-m-32{margin:128px}.lg\:sl-m-36{margin:144px}.lg\:sl-m-40{margin:160px}.lg\:sl-m-44{margin:176px}.lg\:sl-m-48{margin:192px}.lg\:sl-m-52{margin:208px}.lg\:sl-m-56{margin:224px}.lg\:sl-m-60{margin:240px}.lg\:sl-m-64{margin:256px}.lg\:sl-m-72{margin:288px}.lg\:sl-m-80{margin:320px}.lg\:sl-m-96{margin:384px}.lg\:sl-m-auto{margin:auto}.lg\:sl-m-px{margin:1px}.lg\:sl-m-0\.5{margin:2px}.lg\:sl-m-1\.5{margin:6px}.lg\:sl-m-2\.5{margin:10px}.lg\:sl-m-3\.5{margin:14px}.lg\:sl-m-4\.5{margin:18px}.lg\:sl--m-0{margin:0}.lg\:sl--m-1{margin:-4px}.lg\:sl--m-2{margin:-8px}.lg\:sl--m-3{margin:-12px}.lg\:sl--m-4{margin:-16px}.lg\:sl--m-5{margin:-20px}.lg\:sl--m-6{margin:-24px}.lg\:sl--m-7{margin:-28px}.lg\:sl--m-8{margin:-32px}.lg\:sl--m-9{margin:-36px}.lg\:sl--m-10{margin:-40px}.lg\:sl--m-11{margin:-44px}.lg\:sl--m-12{margin:-48px}.lg\:sl--m-14{margin:-56px}.lg\:sl--m-16{margin:-64px}.lg\:sl--m-20{margin:-80px}.lg\:sl--m-24{margin:-96px}.lg\:sl--m-28{margin:-112px}.lg\:sl--m-32{margin:-128px}.lg\:sl--m-36{margin:-144px}.lg\:sl--m-40{margin:-160px}.lg\:sl--m-44{margin:-176px}.lg\:sl--m-48{margin:-192px}.lg\:sl--m-52{margin:-208px}.lg\:sl--m-56{margin:-224px}.lg\:sl--m-60{margin:-240px}.lg\:sl--m-64{margin:-256px}.lg\:sl--m-72{margin:-288px}.lg\:sl--m-80{margin:-320px}.lg\:sl--m-96{margin:-384px}.lg\:sl--m-px{margin:-1px}.lg\:sl--m-0\.5{margin:-2px}.lg\:sl--m-1\.5{margin:-6px}.lg\:sl--m-2\.5{margin:-10px}.lg\:sl--m-3\.5{margin:-14px}.lg\:sl--m-4\.5{margin:-18px}.lg\:sl-my-0{margin-bottom:0;margin-top:0}.lg\:sl-mx-0{margin-left:0;margin-right:0}.lg\:sl-my-1{margin-bottom:4px;margin-top:4px}.lg\:sl-mx-1{margin-left:4px;margin-right:4px}.lg\:sl-my-2{margin-bottom:8px;margin-top:8px}.lg\:sl-mx-2{margin-left:8px;margin-right:8px}.lg\:sl-my-3{margin-bottom:12px;margin-top:12px}.lg\:sl-mx-3{margin-left:12px;margin-right:12px}.lg\:sl-my-4{margin-bottom:16px;margin-top:16px}.lg\:sl-mx-4{margin-left:16px;margin-right:16px}.lg\:sl-my-5{margin-bottom:20px;margin-top:20px}.lg\:sl-mx-5{margin-left:20px;margin-right:20px}.lg\:sl-my-6{margin-bottom:24px;margin-top:24px}.lg\:sl-mx-6{margin-left:24px;margin-right:24px}.lg\:sl-my-7{margin-bottom:28px;margin-top:28px}.lg\:sl-mx-7{margin-left:28px;margin-right:28px}.lg\:sl-my-8{margin-bottom:32px;margin-top:32px}.lg\:sl-mx-8{margin-left:32px;margin-right:32px}.lg\:sl-my-9{margin-bottom:36px;margin-top:36px}.lg\:sl-mx-9{margin-left:36px;margin-right:36px}.lg\:sl-my-10{margin-bottom:40px;margin-top:40px}.lg\:sl-mx-10{margin-left:40px;margin-right:40px}.lg\:sl-my-11{margin-bottom:44px;margin-top:44px}.lg\:sl-mx-11{margin-left:44px;margin-right:44px}.lg\:sl-my-12{margin-bottom:48px;margin-top:48px}.lg\:sl-mx-12{margin-left:48px;margin-right:48px}.lg\:sl-my-14{margin-bottom:56px;margin-top:56px}.lg\:sl-mx-14{margin-left:56px;margin-right:56px}.lg\:sl-my-16{margin-bottom:64px;margin-top:64px}.lg\:sl-mx-16{margin-left:64px;margin-right:64px}.lg\:sl-my-20{margin-bottom:80px;margin-top:80px}.lg\:sl-mx-20{margin-left:80px;margin-right:80px}.lg\:sl-my-24{margin-bottom:96px;margin-top:96px}.lg\:sl-mx-24{margin-left:96px;margin-right:96px}.lg\:sl-my-28{margin-bottom:112px;margin-top:112px}.lg\:sl-mx-28{margin-left:112px;margin-right:112px}.lg\:sl-my-32{margin-bottom:128px;margin-top:128px}.lg\:sl-mx-32{margin-left:128px;margin-right:128px}.lg\:sl-my-36{margin-bottom:144px;margin-top:144px}.lg\:sl-mx-36{margin-left:144px;margin-right:144px}.lg\:sl-my-40{margin-bottom:160px;margin-top:160px}.lg\:sl-mx-40{margin-left:160px;margin-right:160px}.lg\:sl-my-44{margin-bottom:176px;margin-top:176px}.lg\:sl-mx-44{margin-left:176px;margin-right:176px}.lg\:sl-my-48{margin-bottom:192px;margin-top:192px}.lg\:sl-mx-48{margin-left:192px;margin-right:192px}.lg\:sl-my-52{margin-bottom:208px;margin-top:208px}.lg\:sl-mx-52{margin-left:208px;margin-right:208px}.lg\:sl-my-56{margin-bottom:224px;margin-top:224px}.lg\:sl-mx-56{margin-left:224px;margin-right:224px}.lg\:sl-my-60{margin-bottom:240px;margin-top:240px}.lg\:sl-mx-60{margin-left:240px;margin-right:240px}.lg\:sl-my-64{margin-bottom:256px;margin-top:256px}.lg\:sl-mx-64{margin-left:256px;margin-right:256px}.lg\:sl-my-72{margin-bottom:288px;margin-top:288px}.lg\:sl-mx-72{margin-left:288px;margin-right:288px}.lg\:sl-my-80{margin-bottom:320px;margin-top:320px}.lg\:sl-mx-80{margin-left:320px;margin-right:320px}.lg\:sl-my-96{margin-bottom:384px;margin-top:384px}.lg\:sl-mx-96{margin-left:384px;margin-right:384px}.lg\:sl-my-auto{margin-bottom:auto;margin-top:auto}.lg\:sl-mx-auto{margin-left:auto;margin-right:auto}.lg\:sl-my-px{margin-bottom:1px;margin-top:1px}.lg\:sl-mx-px{margin-left:1px;margin-right:1px}.lg\:sl-my-0\.5{margin-bottom:2px;margin-top:2px}.lg\:sl-mx-0\.5{margin-left:2px;margin-right:2px}.lg\:sl-my-1\.5{margin-bottom:6px;margin-top:6px}.lg\:sl-mx-1\.5{margin-left:6px;margin-right:6px}.lg\:sl-my-2\.5{margin-bottom:10px;margin-top:10px}.lg\:sl-mx-2\.5{margin-left:10px;margin-right:10px}.lg\:sl-my-3\.5{margin-bottom:14px;margin-top:14px}.lg\:sl-mx-3\.5{margin-left:14px;margin-right:14px}.lg\:sl-my-4\.5{margin-bottom:18px;margin-top:18px}.lg\:sl-mx-4\.5{margin-left:18px;margin-right:18px}.lg\:sl--my-0{margin-bottom:0;margin-top:0}.lg\:sl--mx-0{margin-left:0;margin-right:0}.lg\:sl--my-1{margin-bottom:-4px;margin-top:-4px}.lg\:sl--mx-1{margin-left:-4px;margin-right:-4px}.lg\:sl--my-2{margin-bottom:-8px;margin-top:-8px}.lg\:sl--mx-2{margin-left:-8px;margin-right:-8px}.lg\:sl--my-3{margin-bottom:-12px;margin-top:-12px}.lg\:sl--mx-3{margin-left:-12px;margin-right:-12px}.lg\:sl--my-4{margin-bottom:-16px;margin-top:-16px}.lg\:sl--mx-4{margin-left:-16px;margin-right:-16px}.lg\:sl--my-5{margin-bottom:-20px;margin-top:-20px}.lg\:sl--mx-5{margin-left:-20px;margin-right:-20px}.lg\:sl--my-6{margin-bottom:-24px;margin-top:-24px}.lg\:sl--mx-6{margin-left:-24px;margin-right:-24px}.lg\:sl--my-7{margin-bottom:-28px;margin-top:-28px}.lg\:sl--mx-7{margin-left:-28px;margin-right:-28px}.lg\:sl--my-8{margin-bottom:-32px;margin-top:-32px}.lg\:sl--mx-8{margin-left:-32px;margin-right:-32px}.lg\:sl--my-9{margin-bottom:-36px;margin-top:-36px}.lg\:sl--mx-9{margin-left:-36px;margin-right:-36px}.lg\:sl--my-10{margin-bottom:-40px;margin-top:-40px}.lg\:sl--mx-10{margin-left:-40px;margin-right:-40px}.lg\:sl--my-11{margin-bottom:-44px;margin-top:-44px}.lg\:sl--mx-11{margin-left:-44px;margin-right:-44px}.lg\:sl--my-12{margin-bottom:-48px;margin-top:-48px}.lg\:sl--mx-12{margin-left:-48px;margin-right:-48px}.lg\:sl--my-14{margin-bottom:-56px;margin-top:-56px}.lg\:sl--mx-14{margin-left:-56px;margin-right:-56px}.lg\:sl--my-16{margin-bottom:-64px;margin-top:-64px}.lg\:sl--mx-16{margin-left:-64px;margin-right:-64px}.lg\:sl--my-20{margin-bottom:-80px;margin-top:-80px}.lg\:sl--mx-20{margin-left:-80px;margin-right:-80px}.lg\:sl--my-24{margin-bottom:-96px;margin-top:-96px}.lg\:sl--mx-24{margin-left:-96px;margin-right:-96px}.lg\:sl--my-28{margin-bottom:-112px;margin-top:-112px}.lg\:sl--mx-28{margin-left:-112px;margin-right:-112px}.lg\:sl--my-32{margin-bottom:-128px;margin-top:-128px}.lg\:sl--mx-32{margin-left:-128px;margin-right:-128px}.lg\:sl--my-36{margin-bottom:-144px;margin-top:-144px}.lg\:sl--mx-36{margin-left:-144px;margin-right:-144px}.lg\:sl--my-40{margin-bottom:-160px;margin-top:-160px}.lg\:sl--mx-40{margin-left:-160px;margin-right:-160px}.lg\:sl--my-44{margin-bottom:-176px;margin-top:-176px}.lg\:sl--mx-44{margin-left:-176px;margin-right:-176px}.lg\:sl--my-48{margin-bottom:-192px;margin-top:-192px}.lg\:sl--mx-48{margin-left:-192px;margin-right:-192px}.lg\:sl--my-52{margin-bottom:-208px;margin-top:-208px}.lg\:sl--mx-52{margin-left:-208px;margin-right:-208px}.lg\:sl--my-56{margin-bottom:-224px;margin-top:-224px}.lg\:sl--mx-56{margin-left:-224px;margin-right:-224px}.lg\:sl--my-60{margin-bottom:-240px;margin-top:-240px}.lg\:sl--mx-60{margin-left:-240px;margin-right:-240px}.lg\:sl--my-64{margin-bottom:-256px;margin-top:-256px}.lg\:sl--mx-64{margin-left:-256px;margin-right:-256px}.lg\:sl--my-72{margin-bottom:-288px;margin-top:-288px}.lg\:sl--mx-72{margin-left:-288px;margin-right:-288px}.lg\:sl--my-80{margin-bottom:-320px;margin-top:-320px}.lg\:sl--mx-80{margin-left:-320px;margin-right:-320px}.lg\:sl--my-96{margin-bottom:-384px;margin-top:-384px}.lg\:sl--mx-96{margin-left:-384px;margin-right:-384px}.lg\:sl--my-px{margin-bottom:-1px;margin-top:-1px}.lg\:sl--mx-px{margin-left:-1px;margin-right:-1px}.lg\:sl--my-0\.5{margin-bottom:-2px;margin-top:-2px}.lg\:sl--mx-0\.5{margin-left:-2px;margin-right:-2px}.lg\:sl--my-1\.5{margin-bottom:-6px;margin-top:-6px}.lg\:sl--mx-1\.5{margin-left:-6px;margin-right:-6px}.lg\:sl--my-2\.5{margin-bottom:-10px;margin-top:-10px}.lg\:sl--mx-2\.5{margin-left:-10px;margin-right:-10px}.lg\:sl--my-3\.5{margin-bottom:-14px;margin-top:-14px}.lg\:sl--mx-3\.5{margin-left:-14px;margin-right:-14px}.lg\:sl--my-4\.5{margin-bottom:-18px;margin-top:-18px}.lg\:sl--mx-4\.5{margin-left:-18px;margin-right:-18px}.lg\:sl-mt-0{margin-top:0}.lg\:sl-mr-0{margin-right:0}.lg\:sl-mb-0{margin-bottom:0}.lg\:sl-ml-0{margin-left:0}.lg\:sl-mt-1{margin-top:4px}.lg\:sl-mr-1{margin-right:4px}.lg\:sl-mb-1{margin-bottom:4px}.lg\:sl-ml-1{margin-left:4px}.lg\:sl-mt-2{margin-top:8px}.lg\:sl-mr-2{margin-right:8px}.lg\:sl-mb-2{margin-bottom:8px}.lg\:sl-ml-2{margin-left:8px}.lg\:sl-mt-3{margin-top:12px}.lg\:sl-mr-3{margin-right:12px}.lg\:sl-mb-3{margin-bottom:12px}.lg\:sl-ml-3{margin-left:12px}.lg\:sl-mt-4{margin-top:16px}.lg\:sl-mr-4{margin-right:16px}.lg\:sl-mb-4{margin-bottom:16px}.lg\:sl-ml-4{margin-left:16px}.lg\:sl-mt-5{margin-top:20px}.lg\:sl-mr-5{margin-right:20px}.lg\:sl-mb-5{margin-bottom:20px}.lg\:sl-ml-5{margin-left:20px}.lg\:sl-mt-6{margin-top:24px}.lg\:sl-mr-6{margin-right:24px}.lg\:sl-mb-6{margin-bottom:24px}.lg\:sl-ml-6{margin-left:24px}.lg\:sl-mt-7{margin-top:28px}.lg\:sl-mr-7{margin-right:28px}.lg\:sl-mb-7{margin-bottom:28px}.lg\:sl-ml-7{margin-left:28px}.lg\:sl-mt-8{margin-top:32px}.lg\:sl-mr-8{margin-right:32px}.lg\:sl-mb-8{margin-bottom:32px}.lg\:sl-ml-8{margin-left:32px}.lg\:sl-mt-9{margin-top:36px}.lg\:sl-mr-9{margin-right:36px}.lg\:sl-mb-9{margin-bottom:36px}.lg\:sl-ml-9{margin-left:36px}.lg\:sl-mt-10{margin-top:40px}.lg\:sl-mr-10{margin-right:40px}.lg\:sl-mb-10{margin-bottom:40px}.lg\:sl-ml-10{margin-left:40px}.lg\:sl-mt-11{margin-top:44px}.lg\:sl-mr-11{margin-right:44px}.lg\:sl-mb-11{margin-bottom:44px}.lg\:sl-ml-11{margin-left:44px}.lg\:sl-mt-12{margin-top:48px}.lg\:sl-mr-12{margin-right:48px}.lg\:sl-mb-12{margin-bottom:48px}.lg\:sl-ml-12{margin-left:48px}.lg\:sl-mt-14{margin-top:56px}.lg\:sl-mr-14{margin-right:56px}.lg\:sl-mb-14{margin-bottom:56px}.lg\:sl-ml-14{margin-left:56px}.lg\:sl-mt-16{margin-top:64px}.lg\:sl-mr-16{margin-right:64px}.lg\:sl-mb-16{margin-bottom:64px}.lg\:sl-ml-16{margin-left:64px}.lg\:sl-mt-20{margin-top:80px}.lg\:sl-mr-20{margin-right:80px}.lg\:sl-mb-20{margin-bottom:80px}.lg\:sl-ml-20{margin-left:80px}.lg\:sl-mt-24{margin-top:96px}.lg\:sl-mr-24{margin-right:96px}.lg\:sl-mb-24{margin-bottom:96px}.lg\:sl-ml-24{margin-left:96px}.lg\:sl-mt-28{margin-top:112px}.lg\:sl-mr-28{margin-right:112px}.lg\:sl-mb-28{margin-bottom:112px}.lg\:sl-ml-28{margin-left:112px}.lg\:sl-mt-32{margin-top:128px}.lg\:sl-mr-32{margin-right:128px}.lg\:sl-mb-32{margin-bottom:128px}.lg\:sl-ml-32{margin-left:128px}.lg\:sl-mt-36{margin-top:144px}.lg\:sl-mr-36{margin-right:144px}.lg\:sl-mb-36{margin-bottom:144px}.lg\:sl-ml-36{margin-left:144px}.lg\:sl-mt-40{margin-top:160px}.lg\:sl-mr-40{margin-right:160px}.lg\:sl-mb-40{margin-bottom:160px}.lg\:sl-ml-40{margin-left:160px}.lg\:sl-mt-44{margin-top:176px}.lg\:sl-mr-44{margin-right:176px}.lg\:sl-mb-44{margin-bottom:176px}.lg\:sl-ml-44{margin-left:176px}.lg\:sl-mt-48{margin-top:192px}.lg\:sl-mr-48{margin-right:192px}.lg\:sl-mb-48{margin-bottom:192px}.lg\:sl-ml-48{margin-left:192px}.lg\:sl-mt-52{margin-top:208px}.lg\:sl-mr-52{margin-right:208px}.lg\:sl-mb-52{margin-bottom:208px}.lg\:sl-ml-52{margin-left:208px}.lg\:sl-mt-56{margin-top:224px}.lg\:sl-mr-56{margin-right:224px}.lg\:sl-mb-56{margin-bottom:224px}.lg\:sl-ml-56{margin-left:224px}.lg\:sl-mt-60{margin-top:240px}.lg\:sl-mr-60{margin-right:240px}.lg\:sl-mb-60{margin-bottom:240px}.lg\:sl-ml-60{margin-left:240px}.lg\:sl-mt-64{margin-top:256px}.lg\:sl-mr-64{margin-right:256px}.lg\:sl-mb-64{margin-bottom:256px}.lg\:sl-ml-64{margin-left:256px}.lg\:sl-mt-72{margin-top:288px}.lg\:sl-mr-72{margin-right:288px}.lg\:sl-mb-72{margin-bottom:288px}.lg\:sl-ml-72{margin-left:288px}.lg\:sl-mt-80{margin-top:320px}.lg\:sl-mr-80{margin-right:320px}.lg\:sl-mb-80{margin-bottom:320px}.lg\:sl-ml-80{margin-left:320px}.lg\:sl-mt-96{margin-top:384px}.lg\:sl-mr-96{margin-right:384px}.lg\:sl-mb-96{margin-bottom:384px}.lg\:sl-ml-96{margin-left:384px}.lg\:sl-mt-auto{margin-top:auto}.lg\:sl-mr-auto{margin-right:auto}.lg\:sl-mb-auto{margin-bottom:auto}.lg\:sl-ml-auto{margin-left:auto}.lg\:sl-mt-px{margin-top:1px}.lg\:sl-mr-px{margin-right:1px}.lg\:sl-mb-px{margin-bottom:1px}.lg\:sl-ml-px{margin-left:1px}.lg\:sl-mt-0\.5{margin-top:2px}.lg\:sl-mr-0\.5{margin-right:2px}.lg\:sl-mb-0\.5{margin-bottom:2px}.lg\:sl-ml-0\.5{margin-left:2px}.lg\:sl-mt-1\.5{margin-top:6px}.lg\:sl-mr-1\.5{margin-right:6px}.lg\:sl-mb-1\.5{margin-bottom:6px}.lg\:sl-ml-1\.5{margin-left:6px}.lg\:sl-mt-2\.5{margin-top:10px}.lg\:sl-mr-2\.5{margin-right:10px}.lg\:sl-mb-2\.5{margin-bottom:10px}.lg\:sl-ml-2\.5{margin-left:10px}.lg\:sl-mt-3\.5{margin-top:14px}.lg\:sl-mr-3\.5{margin-right:14px}.lg\:sl-mb-3\.5{margin-bottom:14px}.lg\:sl-ml-3\.5{margin-left:14px}.lg\:sl-mt-4\.5{margin-top:18px}.lg\:sl-mr-4\.5{margin-right:18px}.lg\:sl-mb-4\.5{margin-bottom:18px}.lg\:sl-ml-4\.5{margin-left:18px}.lg\:sl--mt-0{margin-top:0}.lg\:sl--mr-0{margin-right:0}.lg\:sl--mb-0{margin-bottom:0}.lg\:sl--ml-0{margin-left:0}.lg\:sl--mt-1{margin-top:-4px}.lg\:sl--mr-1{margin-right:-4px}.lg\:sl--mb-1{margin-bottom:-4px}.lg\:sl--ml-1{margin-left:-4px}.lg\:sl--mt-2{margin-top:-8px}.lg\:sl--mr-2{margin-right:-8px}.lg\:sl--mb-2{margin-bottom:-8px}.lg\:sl--ml-2{margin-left:-8px}.lg\:sl--mt-3{margin-top:-12px}.lg\:sl--mr-3{margin-right:-12px}.lg\:sl--mb-3{margin-bottom:-12px}.lg\:sl--ml-3{margin-left:-12px}.lg\:sl--mt-4{margin-top:-16px}.lg\:sl--mr-4{margin-right:-16px}.lg\:sl--mb-4{margin-bottom:-16px}.lg\:sl--ml-4{margin-left:-16px}.lg\:sl--mt-5{margin-top:-20px}.lg\:sl--mr-5{margin-right:-20px}.lg\:sl--mb-5{margin-bottom:-20px}.lg\:sl--ml-5{margin-left:-20px}.lg\:sl--mt-6{margin-top:-24px}.lg\:sl--mr-6{margin-right:-24px}.lg\:sl--mb-6{margin-bottom:-24px}.lg\:sl--ml-6{margin-left:-24px}.lg\:sl--mt-7{margin-top:-28px}.lg\:sl--mr-7{margin-right:-28px}.lg\:sl--mb-7{margin-bottom:-28px}.lg\:sl--ml-7{margin-left:-28px}.lg\:sl--mt-8{margin-top:-32px}.lg\:sl--mr-8{margin-right:-32px}.lg\:sl--mb-8{margin-bottom:-32px}.lg\:sl--ml-8{margin-left:-32px}.lg\:sl--mt-9{margin-top:-36px}.lg\:sl--mr-9{margin-right:-36px}.lg\:sl--mb-9{margin-bottom:-36px}.lg\:sl--ml-9{margin-left:-36px}.lg\:sl--mt-10{margin-top:-40px}.lg\:sl--mr-10{margin-right:-40px}.lg\:sl--mb-10{margin-bottom:-40px}.lg\:sl--ml-10{margin-left:-40px}.lg\:sl--mt-11{margin-top:-44px}.lg\:sl--mr-11{margin-right:-44px}.lg\:sl--mb-11{margin-bottom:-44px}.lg\:sl--ml-11{margin-left:-44px}.lg\:sl--mt-12{margin-top:-48px}.lg\:sl--mr-12{margin-right:-48px}.lg\:sl--mb-12{margin-bottom:-48px}.lg\:sl--ml-12{margin-left:-48px}.lg\:sl--mt-14{margin-top:-56px}.lg\:sl--mr-14{margin-right:-56px}.lg\:sl--mb-14{margin-bottom:-56px}.lg\:sl--ml-14{margin-left:-56px}.lg\:sl--mt-16{margin-top:-64px}.lg\:sl--mr-16{margin-right:-64px}.lg\:sl--mb-16{margin-bottom:-64px}.lg\:sl--ml-16{margin-left:-64px}.lg\:sl--mt-20{margin-top:-80px}.lg\:sl--mr-20{margin-right:-80px}.lg\:sl--mb-20{margin-bottom:-80px}.lg\:sl--ml-20{margin-left:-80px}.lg\:sl--mt-24{margin-top:-96px}.lg\:sl--mr-24{margin-right:-96px}.lg\:sl--mb-24{margin-bottom:-96px}.lg\:sl--ml-24{margin-left:-96px}.lg\:sl--mt-28{margin-top:-112px}.lg\:sl--mr-28{margin-right:-112px}.lg\:sl--mb-28{margin-bottom:-112px}.lg\:sl--ml-28{margin-left:-112px}.lg\:sl--mt-32{margin-top:-128px}.lg\:sl--mr-32{margin-right:-128px}.lg\:sl--mb-32{margin-bottom:-128px}.lg\:sl--ml-32{margin-left:-128px}.lg\:sl--mt-36{margin-top:-144px}.lg\:sl--mr-36{margin-right:-144px}.lg\:sl--mb-36{margin-bottom:-144px}.lg\:sl--ml-36{margin-left:-144px}.lg\:sl--mt-40{margin-top:-160px}.lg\:sl--mr-40{margin-right:-160px}.lg\:sl--mb-40{margin-bottom:-160px}.lg\:sl--ml-40{margin-left:-160px}.lg\:sl--mt-44{margin-top:-176px}.lg\:sl--mr-44{margin-right:-176px}.lg\:sl--mb-44{margin-bottom:-176px}.lg\:sl--ml-44{margin-left:-176px}.lg\:sl--mt-48{margin-top:-192px}.lg\:sl--mr-48{margin-right:-192px}.lg\:sl--mb-48{margin-bottom:-192px}.lg\:sl--ml-48{margin-left:-192px}.lg\:sl--mt-52{margin-top:-208px}.lg\:sl--mr-52{margin-right:-208px}.lg\:sl--mb-52{margin-bottom:-208px}.lg\:sl--ml-52{margin-left:-208px}.lg\:sl--mt-56{margin-top:-224px}.lg\:sl--mr-56{margin-right:-224px}.lg\:sl--mb-56{margin-bottom:-224px}.lg\:sl--ml-56{margin-left:-224px}.lg\:sl--mt-60{margin-top:-240px}.lg\:sl--mr-60{margin-right:-240px}.lg\:sl--mb-60{margin-bottom:-240px}.lg\:sl--ml-60{margin-left:-240px}.lg\:sl--mt-64{margin-top:-256px}.lg\:sl--mr-64{margin-right:-256px}.lg\:sl--mb-64{margin-bottom:-256px}.lg\:sl--ml-64{margin-left:-256px}.lg\:sl--mt-72{margin-top:-288px}.lg\:sl--mr-72{margin-right:-288px}.lg\:sl--mb-72{margin-bottom:-288px}.lg\:sl--ml-72{margin-left:-288px}.lg\:sl--mt-80{margin-top:-320px}.lg\:sl--mr-80{margin-right:-320px}.lg\:sl--mb-80{margin-bottom:-320px}.lg\:sl--ml-80{margin-left:-320px}.lg\:sl--mt-96{margin-top:-384px}.lg\:sl--mr-96{margin-right:-384px}.lg\:sl--mb-96{margin-bottom:-384px}.lg\:sl--ml-96{margin-left:-384px}.lg\:sl--mt-px{margin-top:-1px}.lg\:sl--mr-px{margin-right:-1px}.lg\:sl--mb-px{margin-bottom:-1px}.lg\:sl--ml-px{margin-left:-1px}.lg\:sl--mt-0\.5{margin-top:-2px}.lg\:sl--mr-0\.5{margin-right:-2px}.lg\:sl--mb-0\.5{margin-bottom:-2px}.lg\:sl--ml-0\.5{margin-left:-2px}.lg\:sl--mt-1\.5{margin-top:-6px}.lg\:sl--mr-1\.5{margin-right:-6px}.lg\:sl--mb-1\.5{margin-bottom:-6px}.lg\:sl--ml-1\.5{margin-left:-6px}.lg\:sl--mt-2\.5{margin-top:-10px}.lg\:sl--mr-2\.5{margin-right:-10px}.lg\:sl--mb-2\.5{margin-bottom:-10px}.lg\:sl--ml-2\.5{margin-left:-10px}.lg\:sl--mt-3\.5{margin-top:-14px}.lg\:sl--mr-3\.5{margin-right:-14px}.lg\:sl--mb-3\.5{margin-bottom:-14px}.lg\:sl--ml-3\.5{margin-left:-14px}.lg\:sl--mt-4\.5{margin-top:-18px}.lg\:sl--mr-4\.5{margin-right:-18px}.lg\:sl--mb-4\.5{margin-bottom:-18px}.lg\:sl--ml-4\.5{margin-left:-18px}.lg\:sl-max-h-full{max-height:100%}.lg\:sl-max-h-screen{max-height:100vh}.lg\:sl-max-w-none{max-width:none}.lg\:sl-max-w-full{max-width:100%}.lg\:sl-max-w-min{max-width:-moz-min-content;max-width:min-content}.lg\:sl-max-w-max{max-width:-moz-max-content;max-width:max-content}.lg\:sl-max-w-prose{max-width:65ch}.lg\:sl-min-h-full{min-height:100%}.lg\:sl-min-h-screen{min-height:100vh}.lg\:sl-min-w-full{min-width:100%}.lg\:sl-min-w-min{min-width:-moz-min-content;min-width:min-content}.lg\:sl-min-w-max{min-width:-moz-max-content;min-width:max-content}.lg\:sl-p-0{padding:0}.lg\:sl-p-1{padding:4px}.lg\:sl-p-2{padding:8px}.lg\:sl-p-3{padding:12px}.lg\:sl-p-4{padding:16px}.lg\:sl-p-5{padding:20px}.lg\:sl-p-6{padding:24px}.lg\:sl-p-7{padding:28px}.lg\:sl-p-8{padding:32px}.lg\:sl-p-9{padding:36px}.lg\:sl-p-10{padding:40px}.lg\:sl-p-11{padding:44px}.lg\:sl-p-12{padding:48px}.lg\:sl-p-14{padding:56px}.lg\:sl-p-16{padding:64px}.lg\:sl-p-20{padding:80px}.lg\:sl-p-24{padding:96px}.lg\:sl-p-28{padding:112px}.lg\:sl-p-32{padding:128px}.lg\:sl-p-36{padding:144px}.lg\:sl-p-40{padding:160px}.lg\:sl-p-44{padding:176px}.lg\:sl-p-48{padding:192px}.lg\:sl-p-52{padding:208px}.lg\:sl-p-56{padding:224px}.lg\:sl-p-60{padding:240px}.lg\:sl-p-64{padding:256px}.lg\:sl-p-72{padding:288px}.lg\:sl-p-80{padding:320px}.lg\:sl-p-96{padding:384px}.lg\:sl-p-px{padding:1px}.lg\:sl-p-0\.5{padding:2px}.lg\:sl-p-1\.5{padding:6px}.lg\:sl-p-2\.5{padding:10px}.lg\:sl-p-3\.5{padding:14px}.lg\:sl-p-4\.5{padding:18px}.lg\:sl-py-0{padding-bottom:0;padding-top:0}.lg\:sl-px-0{padding-left:0;padding-right:0}.lg\:sl-py-1{padding-bottom:4px;padding-top:4px}.lg\:sl-px-1{padding-left:4px;padding-right:4px}.lg\:sl-py-2{padding-bottom:8px;padding-top:8px}.lg\:sl-px-2{padding-left:8px;padding-right:8px}.lg\:sl-py-3{padding-bottom:12px;padding-top:12px}.lg\:sl-px-3{padding-left:12px;padding-right:12px}.lg\:sl-py-4{padding-bottom:16px;padding-top:16px}.lg\:sl-px-4{padding-left:16px;padding-right:16px}.lg\:sl-py-5{padding-bottom:20px;padding-top:20px}.lg\:sl-px-5{padding-left:20px;padding-right:20px}.lg\:sl-py-6{padding-bottom:24px;padding-top:24px}.lg\:sl-px-6{padding-left:24px;padding-right:24px}.lg\:sl-py-7{padding-bottom:28px;padding-top:28px}.lg\:sl-px-7{padding-left:28px;padding-right:28px}.lg\:sl-py-8{padding-bottom:32px;padding-top:32px}.lg\:sl-px-8{padding-left:32px;padding-right:32px}.lg\:sl-py-9{padding-bottom:36px;padding-top:36px}.lg\:sl-px-9{padding-left:36px;padding-right:36px}.lg\:sl-py-10{padding-bottom:40px;padding-top:40px}.lg\:sl-px-10{padding-left:40px;padding-right:40px}.lg\:sl-py-11{padding-bottom:44px;padding-top:44px}.lg\:sl-px-11{padding-left:44px;padding-right:44px}.lg\:sl-py-12{padding-bottom:48px;padding-top:48px}.lg\:sl-px-12{padding-left:48px;padding-right:48px}.lg\:sl-py-14{padding-bottom:56px;padding-top:56px}.lg\:sl-px-14{padding-left:56px;padding-right:56px}.lg\:sl-py-16{padding-bottom:64px;padding-top:64px}.lg\:sl-px-16{padding-left:64px;padding-right:64px}.lg\:sl-py-20{padding-bottom:80px;padding-top:80px}.lg\:sl-px-20{padding-left:80px;padding-right:80px}.lg\:sl-py-24{padding-bottom:96px;padding-top:96px}.lg\:sl-px-24{padding-left:96px;padding-right:96px}.lg\:sl-py-28{padding-bottom:112px;padding-top:112px}.lg\:sl-px-28{padding-left:112px;padding-right:112px}.lg\:sl-py-32{padding-bottom:128px;padding-top:128px}.lg\:sl-px-32{padding-left:128px;padding-right:128px}.lg\:sl-py-36{padding-bottom:144px;padding-top:144px}.lg\:sl-px-36{padding-left:144px;padding-right:144px}.lg\:sl-py-40{padding-bottom:160px;padding-top:160px}.lg\:sl-px-40{padding-left:160px;padding-right:160px}.lg\:sl-py-44{padding-bottom:176px;padding-top:176px}.lg\:sl-px-44{padding-left:176px;padding-right:176px}.lg\:sl-py-48{padding-bottom:192px;padding-top:192px}.lg\:sl-px-48{padding-left:192px;padding-right:192px}.lg\:sl-py-52{padding-bottom:208px;padding-top:208px}.lg\:sl-px-52{padding-left:208px;padding-right:208px}.lg\:sl-py-56{padding-bottom:224px;padding-top:224px}.lg\:sl-px-56{padding-left:224px;padding-right:224px}.lg\:sl-py-60{padding-bottom:240px;padding-top:240px}.lg\:sl-px-60{padding-left:240px;padding-right:240px}.lg\:sl-py-64{padding-bottom:256px;padding-top:256px}.lg\:sl-px-64{padding-left:256px;padding-right:256px}.lg\:sl-py-72{padding-bottom:288px;padding-top:288px}.lg\:sl-px-72{padding-left:288px;padding-right:288px}.lg\:sl-py-80{padding-bottom:320px;padding-top:320px}.lg\:sl-px-80{padding-left:320px;padding-right:320px}.lg\:sl-py-96{padding-bottom:384px;padding-top:384px}.lg\:sl-px-96{padding-left:384px;padding-right:384px}.lg\:sl-py-px{padding-bottom:1px;padding-top:1px}.lg\:sl-px-px{padding-left:1px;padding-right:1px}.lg\:sl-py-0\.5{padding-bottom:2px;padding-top:2px}.lg\:sl-px-0\.5{padding-left:2px;padding-right:2px}.lg\:sl-py-1\.5{padding-bottom:6px;padding-top:6px}.lg\:sl-px-1\.5{padding-left:6px;padding-right:6px}.lg\:sl-py-2\.5{padding-bottom:10px;padding-top:10px}.lg\:sl-px-2\.5{padding-left:10px;padding-right:10px}.lg\:sl-py-3\.5{padding-bottom:14px;padding-top:14px}.lg\:sl-px-3\.5{padding-left:14px;padding-right:14px}.lg\:sl-py-4\.5{padding-bottom:18px;padding-top:18px}.lg\:sl-px-4\.5{padding-left:18px;padding-right:18px}.lg\:sl-pt-0{padding-top:0}.lg\:sl-pr-0{padding-right:0}.lg\:sl-pb-0{padding-bottom:0}.lg\:sl-pl-0{padding-left:0}.lg\:sl-pt-1{padding-top:4px}.lg\:sl-pr-1{padding-right:4px}.lg\:sl-pb-1{padding-bottom:4px}.lg\:sl-pl-1{padding-left:4px}.lg\:sl-pt-2{padding-top:8px}.lg\:sl-pr-2{padding-right:8px}.lg\:sl-pb-2{padding-bottom:8px}.lg\:sl-pl-2{padding-left:8px}.lg\:sl-pt-3{padding-top:12px}.lg\:sl-pr-3{padding-right:12px}.lg\:sl-pb-3{padding-bottom:12px}.lg\:sl-pl-3{padding-left:12px}.lg\:sl-pt-4{padding-top:16px}.lg\:sl-pr-4{padding-right:16px}.lg\:sl-pb-4{padding-bottom:16px}.lg\:sl-pl-4{padding-left:16px}.lg\:sl-pt-5{padding-top:20px}.lg\:sl-pr-5{padding-right:20px}.lg\:sl-pb-5{padding-bottom:20px}.lg\:sl-pl-5{padding-left:20px}.lg\:sl-pt-6{padding-top:24px}.lg\:sl-pr-6{padding-right:24px}.lg\:sl-pb-6{padding-bottom:24px}.lg\:sl-pl-6{padding-left:24px}.lg\:sl-pt-7{padding-top:28px}.lg\:sl-pr-7{padding-right:28px}.lg\:sl-pb-7{padding-bottom:28px}.lg\:sl-pl-7{padding-left:28px}.lg\:sl-pt-8{padding-top:32px}.lg\:sl-pr-8{padding-right:32px}.lg\:sl-pb-8{padding-bottom:32px}.lg\:sl-pl-8{padding-left:32px}.lg\:sl-pt-9{padding-top:36px}.lg\:sl-pr-9{padding-right:36px}.lg\:sl-pb-9{padding-bottom:36px}.lg\:sl-pl-9{padding-left:36px}.lg\:sl-pt-10{padding-top:40px}.lg\:sl-pr-10{padding-right:40px}.lg\:sl-pb-10{padding-bottom:40px}.lg\:sl-pl-10{padding-left:40px}.lg\:sl-pt-11{padding-top:44px}.lg\:sl-pr-11{padding-right:44px}.lg\:sl-pb-11{padding-bottom:44px}.lg\:sl-pl-11{padding-left:44px}.lg\:sl-pt-12{padding-top:48px}.lg\:sl-pr-12{padding-right:48px}.lg\:sl-pb-12{padding-bottom:48px}.lg\:sl-pl-12{padding-left:48px}.lg\:sl-pt-14{padding-top:56px}.lg\:sl-pr-14{padding-right:56px}.lg\:sl-pb-14{padding-bottom:56px}.lg\:sl-pl-14{padding-left:56px}.lg\:sl-pt-16{padding-top:64px}.lg\:sl-pr-16{padding-right:64px}.lg\:sl-pb-16{padding-bottom:64px}.lg\:sl-pl-16{padding-left:64px}.lg\:sl-pt-20{padding-top:80px}.lg\:sl-pr-20{padding-right:80px}.lg\:sl-pb-20{padding-bottom:80px}.lg\:sl-pl-20{padding-left:80px}.lg\:sl-pt-24{padding-top:96px}.lg\:sl-pr-24{padding-right:96px}.lg\:sl-pb-24{padding-bottom:96px}.lg\:sl-pl-24{padding-left:96px}.lg\:sl-pt-28{padding-top:112px}.lg\:sl-pr-28{padding-right:112px}.lg\:sl-pb-28{padding-bottom:112px}.lg\:sl-pl-28{padding-left:112px}.lg\:sl-pt-32{padding-top:128px}.lg\:sl-pr-32{padding-right:128px}.lg\:sl-pb-32{padding-bottom:128px}.lg\:sl-pl-32{padding-left:128px}.lg\:sl-pt-36{padding-top:144px}.lg\:sl-pr-36{padding-right:144px}.lg\:sl-pb-36{padding-bottom:144px}.lg\:sl-pl-36{padding-left:144px}.lg\:sl-pt-40{padding-top:160px}.lg\:sl-pr-40{padding-right:160px}.lg\:sl-pb-40{padding-bottom:160px}.lg\:sl-pl-40{padding-left:160px}.lg\:sl-pt-44{padding-top:176px}.lg\:sl-pr-44{padding-right:176px}.lg\:sl-pb-44{padding-bottom:176px}.lg\:sl-pl-44{padding-left:176px}.lg\:sl-pt-48{padding-top:192px}.lg\:sl-pr-48{padding-right:192px}.lg\:sl-pb-48{padding-bottom:192px}.lg\:sl-pl-48{padding-left:192px}.lg\:sl-pt-52{padding-top:208px}.lg\:sl-pr-52{padding-right:208px}.lg\:sl-pb-52{padding-bottom:208px}.lg\:sl-pl-52{padding-left:208px}.lg\:sl-pt-56{padding-top:224px}.lg\:sl-pr-56{padding-right:224px}.lg\:sl-pb-56{padding-bottom:224px}.lg\:sl-pl-56{padding-left:224px}.lg\:sl-pt-60{padding-top:240px}.lg\:sl-pr-60{padding-right:240px}.lg\:sl-pb-60{padding-bottom:240px}.lg\:sl-pl-60{padding-left:240px}.lg\:sl-pt-64{padding-top:256px}.lg\:sl-pr-64{padding-right:256px}.lg\:sl-pb-64{padding-bottom:256px}.lg\:sl-pl-64{padding-left:256px}.lg\:sl-pt-72{padding-top:288px}.lg\:sl-pr-72{padding-right:288px}.lg\:sl-pb-72{padding-bottom:288px}.lg\:sl-pl-72{padding-left:288px}.lg\:sl-pt-80{padding-top:320px}.lg\:sl-pr-80{padding-right:320px}.lg\:sl-pb-80{padding-bottom:320px}.lg\:sl-pl-80{padding-left:320px}.lg\:sl-pt-96{padding-top:384px}.lg\:sl-pr-96{padding-right:384px}.lg\:sl-pb-96{padding-bottom:384px}.lg\:sl-pl-96{padding-left:384px}.lg\:sl-pt-px{padding-top:1px}.lg\:sl-pr-px{padding-right:1px}.lg\:sl-pb-px{padding-bottom:1px}.lg\:sl-pl-px{padding-left:1px}.lg\:sl-pt-0\.5{padding-top:2px}.lg\:sl-pr-0\.5{padding-right:2px}.lg\:sl-pb-0\.5{padding-bottom:2px}.lg\:sl-pl-0\.5{padding-left:2px}.lg\:sl-pt-1\.5{padding-top:6px}.lg\:sl-pr-1\.5{padding-right:6px}.lg\:sl-pb-1\.5{padding-bottom:6px}.lg\:sl-pl-1\.5{padding-left:6px}.lg\:sl-pt-2\.5{padding-top:10px}.lg\:sl-pr-2\.5{padding-right:10px}.lg\:sl-pb-2\.5{padding-bottom:10px}.lg\:sl-pl-2\.5{padding-left:10px}.lg\:sl-pt-3\.5{padding-top:14px}.lg\:sl-pr-3\.5{padding-right:14px}.lg\:sl-pb-3\.5{padding-bottom:14px}.lg\:sl-pl-3\.5{padding-left:14px}.lg\:sl-pt-4\.5{padding-top:18px}.lg\:sl-pr-4\.5{padding-right:18px}.lg\:sl-pb-4\.5{padding-bottom:18px}.lg\:sl-pl-4\.5{padding-left:18px}.lg\:sl-static{position:static}.lg\:sl-fixed{position:fixed}.lg\:sl-absolute{position:absolute}.lg\:sl-relative{position:relative}.lg\:sl-sticky{position:-webkit-sticky;position:sticky}.lg\:sl-visible{visibility:visible}.lg\:sl-invisible{visibility:hidden}.sl-group:hover .lg\:group-hover\:sl-visible{visibility:visible}.sl-group:hover .lg\:group-hover\:sl-invisible{visibility:hidden}.sl-group:focus .lg\:group-focus\:sl-visible{visibility:visible}.sl-group:focus .lg\:group-focus\:sl-invisible{visibility:hidden}.lg\:sl-w-0{width:0}.lg\:sl-w-1{width:4px}.lg\:sl-w-2{width:8px}.lg\:sl-w-3{width:12px}.lg\:sl-w-4{width:16px}.lg\:sl-w-5{width:20px}.lg\:sl-w-6{width:24px}.lg\:sl-w-7{width:28px}.lg\:sl-w-8{width:32px}.lg\:sl-w-9{width:36px}.lg\:sl-w-10{width:40px}.lg\:sl-w-11{width:44px}.lg\:sl-w-12{width:48px}.lg\:sl-w-14{width:56px}.lg\:sl-w-16{width:64px}.lg\:sl-w-20{width:80px}.lg\:sl-w-24{width:96px}.lg\:sl-w-28{width:112px}.lg\:sl-w-32{width:128px}.lg\:sl-w-36{width:144px}.lg\:sl-w-40{width:160px}.lg\:sl-w-44{width:176px}.lg\:sl-w-48{width:192px}.lg\:sl-w-52{width:208px}.lg\:sl-w-56{width:224px}.lg\:sl-w-60{width:240px}.lg\:sl-w-64{width:256px}.lg\:sl-w-72{width:288px}.lg\:sl-w-80{width:320px}.lg\:sl-w-96{width:384px}.lg\:sl-w-auto{width:auto}.lg\:sl-w-px{width:1px}.lg\:sl-w-0\.5{width:2px}.lg\:sl-w-1\.5{width:6px}.lg\:sl-w-2\.5{width:10px}.lg\:sl-w-3\.5{width:14px}.lg\:sl-w-4\.5{width:18px}.lg\:sl-w-xs{width:20px}.lg\:sl-w-sm{width:24px}.lg\:sl-w-md{width:32px}.lg\:sl-w-lg{width:36px}.lg\:sl-w-xl{width:44px}.lg\:sl-w-2xl{width:52px}.lg\:sl-w-3xl{width:60px}.lg\:sl-w-1\/2{width:50%}.lg\:sl-w-1\/3{width:33.333333%}.lg\:sl-w-2\/3{width:66.666667%}.lg\:sl-w-1\/4{width:25%}.lg\:sl-w-2\/4{width:50%}.lg\:sl-w-3\/4{width:75%}.lg\:sl-w-1\/5{width:20%}.lg\:sl-w-2\/5{width:40%}.lg\:sl-w-3\/5{width:60%}.lg\:sl-w-4\/5{width:80%}.lg\:sl-w-1\/6{width:16.666667%}.lg\:sl-w-2\/6{width:33.333333%}.lg\:sl-w-3\/6{width:50%}.lg\:sl-w-4\/6{width:66.666667%}.lg\:sl-w-5\/6{width:83.333333%}.lg\:sl-w-full{width:100%}.lg\:sl-w-screen{width:100vw}.lg\:sl-w-min{width:-moz-min-content;width:min-content}.lg\:sl-w-max{width:-moz-max-content;width:max-content}}@media (max-width:1399px){.xl\:sl-stack--1{gap:4px}.xl\:sl-stack--2{gap:8px}.xl\:sl-stack--3{gap:12px}.xl\:sl-stack--4{gap:16px}.xl\:sl-stack--5{gap:20px}.xl\:sl-stack--6{gap:24px}.xl\:sl-stack--7{gap:28px}.xl\:sl-stack--8{gap:32px}.xl\:sl-stack--9{gap:36px}.xl\:sl-stack--10{gap:40px}.xl\:sl-stack--12{gap:48px}.xl\:sl-stack--14{gap:56px}.xl\:sl-stack--16{gap:64px}.xl\:sl-stack--20{gap:80px}.xl\:sl-stack--24{gap:96px}.xl\:sl-stack--32{gap:128px}.xl\:sl-content-center{align-content:center}.xl\:sl-content-start{align-content:flex-start}.xl\:sl-content-end{align-content:flex-end}.xl\:sl-content-between{align-content:space-between}.xl\:sl-content-around{align-content:space-around}.xl\:sl-content-evenly{align-content:space-evenly}.xl\:sl-items-start{align-items:flex-start}.xl\:sl-items-end{align-items:flex-end}.xl\:sl-items-center{align-items:center}.xl\:sl-items-baseline{align-items:baseline}.xl\:sl-items-stretch{align-items:stretch}.xl\:sl-self-auto{align-self:auto}.xl\:sl-self-start{align-self:flex-start}.xl\:sl-self-end{align-self:flex-end}.xl\:sl-self-center{align-self:center}.xl\:sl-self-stretch{align-self:stretch}.xl\:sl-blur-0,.xl\:sl-blur-none{--tw-blur:blur(0)}.xl\:sl-blur-sm{--tw-blur:blur(4px)}.xl\:sl-blur{--tw-blur:blur(8px)}.xl\:sl-blur-md{--tw-blur:blur(12px)}.xl\:sl-blur-lg{--tw-blur:blur(16px)}.xl\:sl-blur-xl{--tw-blur:blur(24px)}.xl\:sl-blur-2xl{--tw-blur:blur(40px)}.xl\:sl-blur-3xl{--tw-blur:blur(64px)}.xl\:sl-block{display:block}.xl\:sl-inline-block{display:inline-block}.xl\:sl-inline{display:inline}.xl\:sl-flex{display:flex}.xl\:sl-inline-flex{display:inline-flex}.xl\:sl-table{display:table}.xl\:sl-inline-table{display:inline-table}.xl\:sl-table-caption{display:table-caption}.xl\:sl-table-cell{display:table-cell}.xl\:sl-table-column{display:table-column}.xl\:sl-table-column-group{display:table-column-group}.xl\:sl-table-footer-group{display:table-footer-group}.xl\:sl-table-header-group{display:table-header-group}.xl\:sl-table-row-group{display:table-row-group}.xl\:sl-table-row{display:table-row}.xl\:sl-flow-root{display:flow-root}.xl\:sl-grid{display:grid}.xl\:sl-inline-grid{display:inline-grid}.xl\:sl-contents{display:contents}.xl\:sl-list-item{display:list-item}.xl\:sl-hidden{display:none}.xl\:sl-drop-shadow{--tw-drop-shadow:drop-shadow(var(--drop-shadow-default1)) drop-shadow(var(--drop-shadow-default2))}.xl\:sl-flex-1{flex:1 1}.xl\:sl-flex-auto{flex:1 1 auto}.xl\:sl-flex-initial{flex:0 1 auto}.xl\:sl-flex-none{flex:none}.xl\:sl-flex-row{flex-direction:row}.xl\:sl-flex-row-reverse{flex-direction:row-reverse}.xl\:sl-flex-col{flex-direction:column}.xl\:sl-flex-col-reverse{flex-direction:column-reverse}.xl\:sl-flex-grow-0{flex-grow:0}.xl\:sl-flex-grow{flex-grow:1}.xl\:sl-flex-shrink-0{flex-shrink:0}.xl\:sl-flex-shrink{flex-shrink:1}.xl\:sl-flex-wrap{flex-wrap:wrap}.xl\:sl-flex-wrap-reverse{flex-wrap:wrap-reverse}.xl\:sl-flex-nowrap{flex-wrap:nowrap}.xl\:sl-h-0{height:0}.xl\:sl-h-1{height:4px}.xl\:sl-h-2{height:8px}.xl\:sl-h-3{height:12px}.xl\:sl-h-4{height:16px}.xl\:sl-h-5{height:20px}.xl\:sl-h-6{height:24px}.xl\:sl-h-7{height:28px}.xl\:sl-h-8{height:32px}.xl\:sl-h-9{height:36px}.xl\:sl-h-10{height:40px}.xl\:sl-h-11{height:44px}.xl\:sl-h-12{height:48px}.xl\:sl-h-14{height:56px}.xl\:sl-h-16{height:64px}.xl\:sl-h-20{height:80px}.xl\:sl-h-24{height:96px}.xl\:sl-h-28{height:112px}.xl\:sl-h-32{height:128px}.xl\:sl-h-36{height:144px}.xl\:sl-h-40{height:160px}.xl\:sl-h-44{height:176px}.xl\:sl-h-48{height:192px}.xl\:sl-h-52{height:208px}.xl\:sl-h-56{height:224px}.xl\:sl-h-60{height:240px}.xl\:sl-h-64{height:256px}.xl\:sl-h-72{height:288px}.xl\:sl-h-80{height:320px}.xl\:sl-h-96{height:384px}.xl\:sl-h-auto{height:auto}.xl\:sl-h-px{height:1px}.xl\:sl-h-0\.5{height:2px}.xl\:sl-h-1\.5{height:6px}.xl\:sl-h-2\.5{height:10px}.xl\:sl-h-3\.5{height:14px}.xl\:sl-h-4\.5{height:18px}.xl\:sl-h-xs{height:20px}.xl\:sl-h-sm{height:24px}.xl\:sl-h-md{height:32px}.xl\:sl-h-lg{height:36px}.xl\:sl-h-xl{height:44px}.xl\:sl-h-2xl{height:52px}.xl\:sl-h-3xl{height:60px}.xl\:sl-h-full{height:100%}.xl\:sl-h-screen{height:100vh}.xl\:sl-justify-start{justify-content:flex-start}.xl\:sl-justify-end{justify-content:flex-end}.xl\:sl-justify-center{justify-content:center}.xl\:sl-justify-between{justify-content:space-between}.xl\:sl-justify-around{justify-content:space-around}.xl\:sl-justify-evenly{justify-content:space-evenly}.xl\:sl-justify-items-start{justify-items:start}.xl\:sl-justify-items-end{justify-items:end}.xl\:sl-justify-items-center{justify-items:center}.xl\:sl-justify-items-stretch{justify-items:stretch}.xl\:sl-justify-self-auto{justify-self:auto}.xl\:sl-justify-self-start{justify-self:start}.xl\:sl-justify-self-end{justify-self:end}.xl\:sl-justify-self-center{justify-self:center}.xl\:sl-justify-self-stretch{justify-self:stretch}.xl\:sl-m-0{margin:0}.xl\:sl-m-1{margin:4px}.xl\:sl-m-2{margin:8px}.xl\:sl-m-3{margin:12px}.xl\:sl-m-4{margin:16px}.xl\:sl-m-5{margin:20px}.xl\:sl-m-6{margin:24px}.xl\:sl-m-7{margin:28px}.xl\:sl-m-8{margin:32px}.xl\:sl-m-9{margin:36px}.xl\:sl-m-10{margin:40px}.xl\:sl-m-11{margin:44px}.xl\:sl-m-12{margin:48px}.xl\:sl-m-14{margin:56px}.xl\:sl-m-16{margin:64px}.xl\:sl-m-20{margin:80px}.xl\:sl-m-24{margin:96px}.xl\:sl-m-28{margin:112px}.xl\:sl-m-32{margin:128px}.xl\:sl-m-36{margin:144px}.xl\:sl-m-40{margin:160px}.xl\:sl-m-44{margin:176px}.xl\:sl-m-48{margin:192px}.xl\:sl-m-52{margin:208px}.xl\:sl-m-56{margin:224px}.xl\:sl-m-60{margin:240px}.xl\:sl-m-64{margin:256px}.xl\:sl-m-72{margin:288px}.xl\:sl-m-80{margin:320px}.xl\:sl-m-96{margin:384px}.xl\:sl-m-auto{margin:auto}.xl\:sl-m-px{margin:1px}.xl\:sl-m-0\.5{margin:2px}.xl\:sl-m-1\.5{margin:6px}.xl\:sl-m-2\.5{margin:10px}.xl\:sl-m-3\.5{margin:14px}.xl\:sl-m-4\.5{margin:18px}.xl\:sl--m-0{margin:0}.xl\:sl--m-1{margin:-4px}.xl\:sl--m-2{margin:-8px}.xl\:sl--m-3{margin:-12px}.xl\:sl--m-4{margin:-16px}.xl\:sl--m-5{margin:-20px}.xl\:sl--m-6{margin:-24px}.xl\:sl--m-7{margin:-28px}.xl\:sl--m-8{margin:-32px}.xl\:sl--m-9{margin:-36px}.xl\:sl--m-10{margin:-40px}.xl\:sl--m-11{margin:-44px}.xl\:sl--m-12{margin:-48px}.xl\:sl--m-14{margin:-56px}.xl\:sl--m-16{margin:-64px}.xl\:sl--m-20{margin:-80px}.xl\:sl--m-24{margin:-96px}.xl\:sl--m-28{margin:-112px}.xl\:sl--m-32{margin:-128px}.xl\:sl--m-36{margin:-144px}.xl\:sl--m-40{margin:-160px}.xl\:sl--m-44{margin:-176px}.xl\:sl--m-48{margin:-192px}.xl\:sl--m-52{margin:-208px}.xl\:sl--m-56{margin:-224px}.xl\:sl--m-60{margin:-240px}.xl\:sl--m-64{margin:-256px}.xl\:sl--m-72{margin:-288px}.xl\:sl--m-80{margin:-320px}.xl\:sl--m-96{margin:-384px}.xl\:sl--m-px{margin:-1px}.xl\:sl--m-0\.5{margin:-2px}.xl\:sl--m-1\.5{margin:-6px}.xl\:sl--m-2\.5{margin:-10px}.xl\:sl--m-3\.5{margin:-14px}.xl\:sl--m-4\.5{margin:-18px}.xl\:sl-my-0{margin-bottom:0;margin-top:0}.xl\:sl-mx-0{margin-left:0;margin-right:0}.xl\:sl-my-1{margin-bottom:4px;margin-top:4px}.xl\:sl-mx-1{margin-left:4px;margin-right:4px}.xl\:sl-my-2{margin-bottom:8px;margin-top:8px}.xl\:sl-mx-2{margin-left:8px;margin-right:8px}.xl\:sl-my-3{margin-bottom:12px;margin-top:12px}.xl\:sl-mx-3{margin-left:12px;margin-right:12px}.xl\:sl-my-4{margin-bottom:16px;margin-top:16px}.xl\:sl-mx-4{margin-left:16px;margin-right:16px}.xl\:sl-my-5{margin-bottom:20px;margin-top:20px}.xl\:sl-mx-5{margin-left:20px;margin-right:20px}.xl\:sl-my-6{margin-bottom:24px;margin-top:24px}.xl\:sl-mx-6{margin-left:24px;margin-right:24px}.xl\:sl-my-7{margin-bottom:28px;margin-top:28px}.xl\:sl-mx-7{margin-left:28px;margin-right:28px}.xl\:sl-my-8{margin-bottom:32px;margin-top:32px}.xl\:sl-mx-8{margin-left:32px;margin-right:32px}.xl\:sl-my-9{margin-bottom:36px;margin-top:36px}.xl\:sl-mx-9{margin-left:36px;margin-right:36px}.xl\:sl-my-10{margin-bottom:40px;margin-top:40px}.xl\:sl-mx-10{margin-left:40px;margin-right:40px}.xl\:sl-my-11{margin-bottom:44px;margin-top:44px}.xl\:sl-mx-11{margin-left:44px;margin-right:44px}.xl\:sl-my-12{margin-bottom:48px;margin-top:48px}.xl\:sl-mx-12{margin-left:48px;margin-right:48px}.xl\:sl-my-14{margin-bottom:56px;margin-top:56px}.xl\:sl-mx-14{margin-left:56px;margin-right:56px}.xl\:sl-my-16{margin-bottom:64px;margin-top:64px}.xl\:sl-mx-16{margin-left:64px;margin-right:64px}.xl\:sl-my-20{margin-bottom:80px;margin-top:80px}.xl\:sl-mx-20{margin-left:80px;margin-right:80px}.xl\:sl-my-24{margin-bottom:96px;margin-top:96px}.xl\:sl-mx-24{margin-left:96px;margin-right:96px}.xl\:sl-my-28{margin-bottom:112px;margin-top:112px}.xl\:sl-mx-28{margin-left:112px;margin-right:112px}.xl\:sl-my-32{margin-bottom:128px;margin-top:128px}.xl\:sl-mx-32{margin-left:128px;margin-right:128px}.xl\:sl-my-36{margin-bottom:144px;margin-top:144px}.xl\:sl-mx-36{margin-left:144px;margin-right:144px}.xl\:sl-my-40{margin-bottom:160px;margin-top:160px}.xl\:sl-mx-40{margin-left:160px;margin-right:160px}.xl\:sl-my-44{margin-bottom:176px;margin-top:176px}.xl\:sl-mx-44{margin-left:176px;margin-right:176px}.xl\:sl-my-48{margin-bottom:192px;margin-top:192px}.xl\:sl-mx-48{margin-left:192px;margin-right:192px}.xl\:sl-my-52{margin-bottom:208px;margin-top:208px}.xl\:sl-mx-52{margin-left:208px;margin-right:208px}.xl\:sl-my-56{margin-bottom:224px;margin-top:224px}.xl\:sl-mx-56{margin-left:224px;margin-right:224px}.xl\:sl-my-60{margin-bottom:240px;margin-top:240px}.xl\:sl-mx-60{margin-left:240px;margin-right:240px}.xl\:sl-my-64{margin-bottom:256px;margin-top:256px}.xl\:sl-mx-64{margin-left:256px;margin-right:256px}.xl\:sl-my-72{margin-bottom:288px;margin-top:288px}.xl\:sl-mx-72{margin-left:288px;margin-right:288px}.xl\:sl-my-80{margin-bottom:320px;margin-top:320px}.xl\:sl-mx-80{margin-left:320px;margin-right:320px}.xl\:sl-my-96{margin-bottom:384px;margin-top:384px}.xl\:sl-mx-96{margin-left:384px;margin-right:384px}.xl\:sl-my-auto{margin-bottom:auto;margin-top:auto}.xl\:sl-mx-auto{margin-left:auto;margin-right:auto}.xl\:sl-my-px{margin-bottom:1px;margin-top:1px}.xl\:sl-mx-px{margin-left:1px;margin-right:1px}.xl\:sl-my-0\.5{margin-bottom:2px;margin-top:2px}.xl\:sl-mx-0\.5{margin-left:2px;margin-right:2px}.xl\:sl-my-1\.5{margin-bottom:6px;margin-top:6px}.xl\:sl-mx-1\.5{margin-left:6px;margin-right:6px}.xl\:sl-my-2\.5{margin-bottom:10px;margin-top:10px}.xl\:sl-mx-2\.5{margin-left:10px;margin-right:10px}.xl\:sl-my-3\.5{margin-bottom:14px;margin-top:14px}.xl\:sl-mx-3\.5{margin-left:14px;margin-right:14px}.xl\:sl-my-4\.5{margin-bottom:18px;margin-top:18px}.xl\:sl-mx-4\.5{margin-left:18px;margin-right:18px}.xl\:sl--my-0{margin-bottom:0;margin-top:0}.xl\:sl--mx-0{margin-left:0;margin-right:0}.xl\:sl--my-1{margin-bottom:-4px;margin-top:-4px}.xl\:sl--mx-1{margin-left:-4px;margin-right:-4px}.xl\:sl--my-2{margin-bottom:-8px;margin-top:-8px}.xl\:sl--mx-2{margin-left:-8px;margin-right:-8px}.xl\:sl--my-3{margin-bottom:-12px;margin-top:-12px}.xl\:sl--mx-3{margin-left:-12px;margin-right:-12px}.xl\:sl--my-4{margin-bottom:-16px;margin-top:-16px}.xl\:sl--mx-4{margin-left:-16px;margin-right:-16px}.xl\:sl--my-5{margin-bottom:-20px;margin-top:-20px}.xl\:sl--mx-5{margin-left:-20px;margin-right:-20px}.xl\:sl--my-6{margin-bottom:-24px;margin-top:-24px}.xl\:sl--mx-6{margin-left:-24px;margin-right:-24px}.xl\:sl--my-7{margin-bottom:-28px;margin-top:-28px}.xl\:sl--mx-7{margin-left:-28px;margin-right:-28px}.xl\:sl--my-8{margin-bottom:-32px;margin-top:-32px}.xl\:sl--mx-8{margin-left:-32px;margin-right:-32px}.xl\:sl--my-9{margin-bottom:-36px;margin-top:-36px}.xl\:sl--mx-9{margin-left:-36px;margin-right:-36px}.xl\:sl--my-10{margin-bottom:-40px;margin-top:-40px}.xl\:sl--mx-10{margin-left:-40px;margin-right:-40px}.xl\:sl--my-11{margin-bottom:-44px;margin-top:-44px}.xl\:sl--mx-11{margin-left:-44px;margin-right:-44px}.xl\:sl--my-12{margin-bottom:-48px;margin-top:-48px}.xl\:sl--mx-12{margin-left:-48px;margin-right:-48px}.xl\:sl--my-14{margin-bottom:-56px;margin-top:-56px}.xl\:sl--mx-14{margin-left:-56px;margin-right:-56px}.xl\:sl--my-16{margin-bottom:-64px;margin-top:-64px}.xl\:sl--mx-16{margin-left:-64px;margin-right:-64px}.xl\:sl--my-20{margin-bottom:-80px;margin-top:-80px}.xl\:sl--mx-20{margin-left:-80px;margin-right:-80px}.xl\:sl--my-24{margin-bottom:-96px;margin-top:-96px}.xl\:sl--mx-24{margin-left:-96px;margin-right:-96px}.xl\:sl--my-28{margin-bottom:-112px;margin-top:-112px}.xl\:sl--mx-28{margin-left:-112px;margin-right:-112px}.xl\:sl--my-32{margin-bottom:-128px;margin-top:-128px}.xl\:sl--mx-32{margin-left:-128px;margin-right:-128px}.xl\:sl--my-36{margin-bottom:-144px;margin-top:-144px}.xl\:sl--mx-36{margin-left:-144px;margin-right:-144px}.xl\:sl--my-40{margin-bottom:-160px;margin-top:-160px}.xl\:sl--mx-40{margin-left:-160px;margin-right:-160px}.xl\:sl--my-44{margin-bottom:-176px;margin-top:-176px}.xl\:sl--mx-44{margin-left:-176px;margin-right:-176px}.xl\:sl--my-48{margin-bottom:-192px;margin-top:-192px}.xl\:sl--mx-48{margin-left:-192px;margin-right:-192px}.xl\:sl--my-52{margin-bottom:-208px;margin-top:-208px}.xl\:sl--mx-52{margin-left:-208px;margin-right:-208px}.xl\:sl--my-56{margin-bottom:-224px;margin-top:-224px}.xl\:sl--mx-56{margin-left:-224px;margin-right:-224px}.xl\:sl--my-60{margin-bottom:-240px;margin-top:-240px}.xl\:sl--mx-60{margin-left:-240px;margin-right:-240px}.xl\:sl--my-64{margin-bottom:-256px;margin-top:-256px}.xl\:sl--mx-64{margin-left:-256px;margin-right:-256px}.xl\:sl--my-72{margin-bottom:-288px;margin-top:-288px}.xl\:sl--mx-72{margin-left:-288px;margin-right:-288px}.xl\:sl--my-80{margin-bottom:-320px;margin-top:-320px}.xl\:sl--mx-80{margin-left:-320px;margin-right:-320px}.xl\:sl--my-96{margin-bottom:-384px;margin-top:-384px}.xl\:sl--mx-96{margin-left:-384px;margin-right:-384px}.xl\:sl--my-px{margin-bottom:-1px;margin-top:-1px}.xl\:sl--mx-px{margin-left:-1px;margin-right:-1px}.xl\:sl--my-0\.5{margin-bottom:-2px;margin-top:-2px}.xl\:sl--mx-0\.5{margin-left:-2px;margin-right:-2px}.xl\:sl--my-1\.5{margin-bottom:-6px;margin-top:-6px}.xl\:sl--mx-1\.5{margin-left:-6px;margin-right:-6px}.xl\:sl--my-2\.5{margin-bottom:-10px;margin-top:-10px}.xl\:sl--mx-2\.5{margin-left:-10px;margin-right:-10px}.xl\:sl--my-3\.5{margin-bottom:-14px;margin-top:-14px}.xl\:sl--mx-3\.5{margin-left:-14px;margin-right:-14px}.xl\:sl--my-4\.5{margin-bottom:-18px;margin-top:-18px}.xl\:sl--mx-4\.5{margin-left:-18px;margin-right:-18px}.xl\:sl-mt-0{margin-top:0}.xl\:sl-mr-0{margin-right:0}.xl\:sl-mb-0{margin-bottom:0}.xl\:sl-ml-0{margin-left:0}.xl\:sl-mt-1{margin-top:4px}.xl\:sl-mr-1{margin-right:4px}.xl\:sl-mb-1{margin-bottom:4px}.xl\:sl-ml-1{margin-left:4px}.xl\:sl-mt-2{margin-top:8px}.xl\:sl-mr-2{margin-right:8px}.xl\:sl-mb-2{margin-bottom:8px}.xl\:sl-ml-2{margin-left:8px}.xl\:sl-mt-3{margin-top:12px}.xl\:sl-mr-3{margin-right:12px}.xl\:sl-mb-3{margin-bottom:12px}.xl\:sl-ml-3{margin-left:12px}.xl\:sl-mt-4{margin-top:16px}.xl\:sl-mr-4{margin-right:16px}.xl\:sl-mb-4{margin-bottom:16px}.xl\:sl-ml-4{margin-left:16px}.xl\:sl-mt-5{margin-top:20px}.xl\:sl-mr-5{margin-right:20px}.xl\:sl-mb-5{margin-bottom:20px}.xl\:sl-ml-5{margin-left:20px}.xl\:sl-mt-6{margin-top:24px}.xl\:sl-mr-6{margin-right:24px}.xl\:sl-mb-6{margin-bottom:24px}.xl\:sl-ml-6{margin-left:24px}.xl\:sl-mt-7{margin-top:28px}.xl\:sl-mr-7{margin-right:28px}.xl\:sl-mb-7{margin-bottom:28px}.xl\:sl-ml-7{margin-left:28px}.xl\:sl-mt-8{margin-top:32px}.xl\:sl-mr-8{margin-right:32px}.xl\:sl-mb-8{margin-bottom:32px}.xl\:sl-ml-8{margin-left:32px}.xl\:sl-mt-9{margin-top:36px}.xl\:sl-mr-9{margin-right:36px}.xl\:sl-mb-9{margin-bottom:36px}.xl\:sl-ml-9{margin-left:36px}.xl\:sl-mt-10{margin-top:40px}.xl\:sl-mr-10{margin-right:40px}.xl\:sl-mb-10{margin-bottom:40px}.xl\:sl-ml-10{margin-left:40px}.xl\:sl-mt-11{margin-top:44px}.xl\:sl-mr-11{margin-right:44px}.xl\:sl-mb-11{margin-bottom:44px}.xl\:sl-ml-11{margin-left:44px}.xl\:sl-mt-12{margin-top:48px}.xl\:sl-mr-12{margin-right:48px}.xl\:sl-mb-12{margin-bottom:48px}.xl\:sl-ml-12{margin-left:48px}.xl\:sl-mt-14{margin-top:56px}.xl\:sl-mr-14{margin-right:56px}.xl\:sl-mb-14{margin-bottom:56px}.xl\:sl-ml-14{margin-left:56px}.xl\:sl-mt-16{margin-top:64px}.xl\:sl-mr-16{margin-right:64px}.xl\:sl-mb-16{margin-bottom:64px}.xl\:sl-ml-16{margin-left:64px}.xl\:sl-mt-20{margin-top:80px}.xl\:sl-mr-20{margin-right:80px}.xl\:sl-mb-20{margin-bottom:80px}.xl\:sl-ml-20{margin-left:80px}.xl\:sl-mt-24{margin-top:96px}.xl\:sl-mr-24{margin-right:96px}.xl\:sl-mb-24{margin-bottom:96px}.xl\:sl-ml-24{margin-left:96px}.xl\:sl-mt-28{margin-top:112px}.xl\:sl-mr-28{margin-right:112px}.xl\:sl-mb-28{margin-bottom:112px}.xl\:sl-ml-28{margin-left:112px}.xl\:sl-mt-32{margin-top:128px}.xl\:sl-mr-32{margin-right:128px}.xl\:sl-mb-32{margin-bottom:128px}.xl\:sl-ml-32{margin-left:128px}.xl\:sl-mt-36{margin-top:144px}.xl\:sl-mr-36{margin-right:144px}.xl\:sl-mb-36{margin-bottom:144px}.xl\:sl-ml-36{margin-left:144px}.xl\:sl-mt-40{margin-top:160px}.xl\:sl-mr-40{margin-right:160px}.xl\:sl-mb-40{margin-bottom:160px}.xl\:sl-ml-40{margin-left:160px}.xl\:sl-mt-44{margin-top:176px}.xl\:sl-mr-44{margin-right:176px}.xl\:sl-mb-44{margin-bottom:176px}.xl\:sl-ml-44{margin-left:176px}.xl\:sl-mt-48{margin-top:192px}.xl\:sl-mr-48{margin-right:192px}.xl\:sl-mb-48{margin-bottom:192px}.xl\:sl-ml-48{margin-left:192px}.xl\:sl-mt-52{margin-top:208px}.xl\:sl-mr-52{margin-right:208px}.xl\:sl-mb-52{margin-bottom:208px}.xl\:sl-ml-52{margin-left:208px}.xl\:sl-mt-56{margin-top:224px}.xl\:sl-mr-56{margin-right:224px}.xl\:sl-mb-56{margin-bottom:224px}.xl\:sl-ml-56{margin-left:224px}.xl\:sl-mt-60{margin-top:240px}.xl\:sl-mr-60{margin-right:240px}.xl\:sl-mb-60{margin-bottom:240px}.xl\:sl-ml-60{margin-left:240px}.xl\:sl-mt-64{margin-top:256px}.xl\:sl-mr-64{margin-right:256px}.xl\:sl-mb-64{margin-bottom:256px}.xl\:sl-ml-64{margin-left:256px}.xl\:sl-mt-72{margin-top:288px}.xl\:sl-mr-72{margin-right:288px}.xl\:sl-mb-72{margin-bottom:288px}.xl\:sl-ml-72{margin-left:288px}.xl\:sl-mt-80{margin-top:320px}.xl\:sl-mr-80{margin-right:320px}.xl\:sl-mb-80{margin-bottom:320px}.xl\:sl-ml-80{margin-left:320px}.xl\:sl-mt-96{margin-top:384px}.xl\:sl-mr-96{margin-right:384px}.xl\:sl-mb-96{margin-bottom:384px}.xl\:sl-ml-96{margin-left:384px}.xl\:sl-mt-auto{margin-top:auto}.xl\:sl-mr-auto{margin-right:auto}.xl\:sl-mb-auto{margin-bottom:auto}.xl\:sl-ml-auto{margin-left:auto}.xl\:sl-mt-px{margin-top:1px}.xl\:sl-mr-px{margin-right:1px}.xl\:sl-mb-px{margin-bottom:1px}.xl\:sl-ml-px{margin-left:1px}.xl\:sl-mt-0\.5{margin-top:2px}.xl\:sl-mr-0\.5{margin-right:2px}.xl\:sl-mb-0\.5{margin-bottom:2px}.xl\:sl-ml-0\.5{margin-left:2px}.xl\:sl-mt-1\.5{margin-top:6px}.xl\:sl-mr-1\.5{margin-right:6px}.xl\:sl-mb-1\.5{margin-bottom:6px}.xl\:sl-ml-1\.5{margin-left:6px}.xl\:sl-mt-2\.5{margin-top:10px}.xl\:sl-mr-2\.5{margin-right:10px}.xl\:sl-mb-2\.5{margin-bottom:10px}.xl\:sl-ml-2\.5{margin-left:10px}.xl\:sl-mt-3\.5{margin-top:14px}.xl\:sl-mr-3\.5{margin-right:14px}.xl\:sl-mb-3\.5{margin-bottom:14px}.xl\:sl-ml-3\.5{margin-left:14px}.xl\:sl-mt-4\.5{margin-top:18px}.xl\:sl-mr-4\.5{margin-right:18px}.xl\:sl-mb-4\.5{margin-bottom:18px}.xl\:sl-ml-4\.5{margin-left:18px}.xl\:sl--mt-0{margin-top:0}.xl\:sl--mr-0{margin-right:0}.xl\:sl--mb-0{margin-bottom:0}.xl\:sl--ml-0{margin-left:0}.xl\:sl--mt-1{margin-top:-4px}.xl\:sl--mr-1{margin-right:-4px}.xl\:sl--mb-1{margin-bottom:-4px}.xl\:sl--ml-1{margin-left:-4px}.xl\:sl--mt-2{margin-top:-8px}.xl\:sl--mr-2{margin-right:-8px}.xl\:sl--mb-2{margin-bottom:-8px}.xl\:sl--ml-2{margin-left:-8px}.xl\:sl--mt-3{margin-top:-12px}.xl\:sl--mr-3{margin-right:-12px}.xl\:sl--mb-3{margin-bottom:-12px}.xl\:sl--ml-3{margin-left:-12px}.xl\:sl--mt-4{margin-top:-16px}.xl\:sl--mr-4{margin-right:-16px}.xl\:sl--mb-4{margin-bottom:-16px}.xl\:sl--ml-4{margin-left:-16px}.xl\:sl--mt-5{margin-top:-20px}.xl\:sl--mr-5{margin-right:-20px}.xl\:sl--mb-5{margin-bottom:-20px}.xl\:sl--ml-5{margin-left:-20px}.xl\:sl--mt-6{margin-top:-24px}.xl\:sl--mr-6{margin-right:-24px}.xl\:sl--mb-6{margin-bottom:-24px}.xl\:sl--ml-6{margin-left:-24px}.xl\:sl--mt-7{margin-top:-28px}.xl\:sl--mr-7{margin-right:-28px}.xl\:sl--mb-7{margin-bottom:-28px}.xl\:sl--ml-7{margin-left:-28px}.xl\:sl--mt-8{margin-top:-32px}.xl\:sl--mr-8{margin-right:-32px}.xl\:sl--mb-8{margin-bottom:-32px}.xl\:sl--ml-8{margin-left:-32px}.xl\:sl--mt-9{margin-top:-36px}.xl\:sl--mr-9{margin-right:-36px}.xl\:sl--mb-9{margin-bottom:-36px}.xl\:sl--ml-9{margin-left:-36px}.xl\:sl--mt-10{margin-top:-40px}.xl\:sl--mr-10{margin-right:-40px}.xl\:sl--mb-10{margin-bottom:-40px}.xl\:sl--ml-10{margin-left:-40px}.xl\:sl--mt-11{margin-top:-44px}.xl\:sl--mr-11{margin-right:-44px}.xl\:sl--mb-11{margin-bottom:-44px}.xl\:sl--ml-11{margin-left:-44px}.xl\:sl--mt-12{margin-top:-48px}.xl\:sl--mr-12{margin-right:-48px}.xl\:sl--mb-12{margin-bottom:-48px}.xl\:sl--ml-12{margin-left:-48px}.xl\:sl--mt-14{margin-top:-56px}.xl\:sl--mr-14{margin-right:-56px}.xl\:sl--mb-14{margin-bottom:-56px}.xl\:sl--ml-14{margin-left:-56px}.xl\:sl--mt-16{margin-top:-64px}.xl\:sl--mr-16{margin-right:-64px}.xl\:sl--mb-16{margin-bottom:-64px}.xl\:sl--ml-16{margin-left:-64px}.xl\:sl--mt-20{margin-top:-80px}.xl\:sl--mr-20{margin-right:-80px}.xl\:sl--mb-20{margin-bottom:-80px}.xl\:sl--ml-20{margin-left:-80px}.xl\:sl--mt-24{margin-top:-96px}.xl\:sl--mr-24{margin-right:-96px}.xl\:sl--mb-24{margin-bottom:-96px}.xl\:sl--ml-24{margin-left:-96px}.xl\:sl--mt-28{margin-top:-112px}.xl\:sl--mr-28{margin-right:-112px}.xl\:sl--mb-28{margin-bottom:-112px}.xl\:sl--ml-28{margin-left:-112px}.xl\:sl--mt-32{margin-top:-128px}.xl\:sl--mr-32{margin-right:-128px}.xl\:sl--mb-32{margin-bottom:-128px}.xl\:sl--ml-32{margin-left:-128px}.xl\:sl--mt-36{margin-top:-144px}.xl\:sl--mr-36{margin-right:-144px}.xl\:sl--mb-36{margin-bottom:-144px}.xl\:sl--ml-36{margin-left:-144px}.xl\:sl--mt-40{margin-top:-160px}.xl\:sl--mr-40{margin-right:-160px}.xl\:sl--mb-40{margin-bottom:-160px}.xl\:sl--ml-40{margin-left:-160px}.xl\:sl--mt-44{margin-top:-176px}.xl\:sl--mr-44{margin-right:-176px}.xl\:sl--mb-44{margin-bottom:-176px}.xl\:sl--ml-44{margin-left:-176px}.xl\:sl--mt-48{margin-top:-192px}.xl\:sl--mr-48{margin-right:-192px}.xl\:sl--mb-48{margin-bottom:-192px}.xl\:sl--ml-48{margin-left:-192px}.xl\:sl--mt-52{margin-top:-208px}.xl\:sl--mr-52{margin-right:-208px}.xl\:sl--mb-52{margin-bottom:-208px}.xl\:sl--ml-52{margin-left:-208px}.xl\:sl--mt-56{margin-top:-224px}.xl\:sl--mr-56{margin-right:-224px}.xl\:sl--mb-56{margin-bottom:-224px}.xl\:sl--ml-56{margin-left:-224px}.xl\:sl--mt-60{margin-top:-240px}.xl\:sl--mr-60{margin-right:-240px}.xl\:sl--mb-60{margin-bottom:-240px}.xl\:sl--ml-60{margin-left:-240px}.xl\:sl--mt-64{margin-top:-256px}.xl\:sl--mr-64{margin-right:-256px}.xl\:sl--mb-64{margin-bottom:-256px}.xl\:sl--ml-64{margin-left:-256px}.xl\:sl--mt-72{margin-top:-288px}.xl\:sl--mr-72{margin-right:-288px}.xl\:sl--mb-72{margin-bottom:-288px}.xl\:sl--ml-72{margin-left:-288px}.xl\:sl--mt-80{margin-top:-320px}.xl\:sl--mr-80{margin-right:-320px}.xl\:sl--mb-80{margin-bottom:-320px}.xl\:sl--ml-80{margin-left:-320px}.xl\:sl--mt-96{margin-top:-384px}.xl\:sl--mr-96{margin-right:-384px}.xl\:sl--mb-96{margin-bottom:-384px}.xl\:sl--ml-96{margin-left:-384px}.xl\:sl--mt-px{margin-top:-1px}.xl\:sl--mr-px{margin-right:-1px}.xl\:sl--mb-px{margin-bottom:-1px}.xl\:sl--ml-px{margin-left:-1px}.xl\:sl--mt-0\.5{margin-top:-2px}.xl\:sl--mr-0\.5{margin-right:-2px}.xl\:sl--mb-0\.5{margin-bottom:-2px}.xl\:sl--ml-0\.5{margin-left:-2px}.xl\:sl--mt-1\.5{margin-top:-6px}.xl\:sl--mr-1\.5{margin-right:-6px}.xl\:sl--mb-1\.5{margin-bottom:-6px}.xl\:sl--ml-1\.5{margin-left:-6px}.xl\:sl--mt-2\.5{margin-top:-10px}.xl\:sl--mr-2\.5{margin-right:-10px}.xl\:sl--mb-2\.5{margin-bottom:-10px}.xl\:sl--ml-2\.5{margin-left:-10px}.xl\:sl--mt-3\.5{margin-top:-14px}.xl\:sl--mr-3\.5{margin-right:-14px}.xl\:sl--mb-3\.5{margin-bottom:-14px}.xl\:sl--ml-3\.5{margin-left:-14px}.xl\:sl--mt-4\.5{margin-top:-18px}.xl\:sl--mr-4\.5{margin-right:-18px}.xl\:sl--mb-4\.5{margin-bottom:-18px}.xl\:sl--ml-4\.5{margin-left:-18px}.xl\:sl-max-h-full{max-height:100%}.xl\:sl-max-h-screen{max-height:100vh}.xl\:sl-max-w-none{max-width:none}.xl\:sl-max-w-full{max-width:100%}.xl\:sl-max-w-min{max-width:-moz-min-content;max-width:min-content}.xl\:sl-max-w-max{max-width:-moz-max-content;max-width:max-content}.xl\:sl-max-w-prose{max-width:65ch}.xl\:sl-min-h-full{min-height:100%}.xl\:sl-min-h-screen{min-height:100vh}.xl\:sl-min-w-full{min-width:100%}.xl\:sl-min-w-min{min-width:-moz-min-content;min-width:min-content}.xl\:sl-min-w-max{min-width:-moz-max-content;min-width:max-content}.xl\:sl-p-0{padding:0}.xl\:sl-p-1{padding:4px}.xl\:sl-p-2{padding:8px}.xl\:sl-p-3{padding:12px}.xl\:sl-p-4{padding:16px}.xl\:sl-p-5{padding:20px}.xl\:sl-p-6{padding:24px}.xl\:sl-p-7{padding:28px}.xl\:sl-p-8{padding:32px}.xl\:sl-p-9{padding:36px}.xl\:sl-p-10{padding:40px}.xl\:sl-p-11{padding:44px}.xl\:sl-p-12{padding:48px}.xl\:sl-p-14{padding:56px}.xl\:sl-p-16{padding:64px}.xl\:sl-p-20{padding:80px}.xl\:sl-p-24{padding:96px}.xl\:sl-p-28{padding:112px}.xl\:sl-p-32{padding:128px}.xl\:sl-p-36{padding:144px}.xl\:sl-p-40{padding:160px}.xl\:sl-p-44{padding:176px}.xl\:sl-p-48{padding:192px}.xl\:sl-p-52{padding:208px}.xl\:sl-p-56{padding:224px}.xl\:sl-p-60{padding:240px}.xl\:sl-p-64{padding:256px}.xl\:sl-p-72{padding:288px}.xl\:sl-p-80{padding:320px}.xl\:sl-p-96{padding:384px}.xl\:sl-p-px{padding:1px}.xl\:sl-p-0\.5{padding:2px}.xl\:sl-p-1\.5{padding:6px}.xl\:sl-p-2\.5{padding:10px}.xl\:sl-p-3\.5{padding:14px}.xl\:sl-p-4\.5{padding:18px}.xl\:sl-py-0{padding-bottom:0;padding-top:0}.xl\:sl-px-0{padding-left:0;padding-right:0}.xl\:sl-py-1{padding-bottom:4px;padding-top:4px}.xl\:sl-px-1{padding-left:4px;padding-right:4px}.xl\:sl-py-2{padding-bottom:8px;padding-top:8px}.xl\:sl-px-2{padding-left:8px;padding-right:8px}.xl\:sl-py-3{padding-bottom:12px;padding-top:12px}.xl\:sl-px-3{padding-left:12px;padding-right:12px}.xl\:sl-py-4{padding-bottom:16px;padding-top:16px}.xl\:sl-px-4{padding-left:16px;padding-right:16px}.xl\:sl-py-5{padding-bottom:20px;padding-top:20px}.xl\:sl-px-5{padding-left:20px;padding-right:20px}.xl\:sl-py-6{padding-bottom:24px;padding-top:24px}.xl\:sl-px-6{padding-left:24px;padding-right:24px}.xl\:sl-py-7{padding-bottom:28px;padding-top:28px}.xl\:sl-px-7{padding-left:28px;padding-right:28px}.xl\:sl-py-8{padding-bottom:32px;padding-top:32px}.xl\:sl-px-8{padding-left:32px;padding-right:32px}.xl\:sl-py-9{padding-bottom:36px;padding-top:36px}.xl\:sl-px-9{padding-left:36px;padding-right:36px}.xl\:sl-py-10{padding-bottom:40px;padding-top:40px}.xl\:sl-px-10{padding-left:40px;padding-right:40px}.xl\:sl-py-11{padding-bottom:44px;padding-top:44px}.xl\:sl-px-11{padding-left:44px;padding-right:44px}.xl\:sl-py-12{padding-bottom:48px;padding-top:48px}.xl\:sl-px-12{padding-left:48px;padding-right:48px}.xl\:sl-py-14{padding-bottom:56px;padding-top:56px}.xl\:sl-px-14{padding-left:56px;padding-right:56px}.xl\:sl-py-16{padding-bottom:64px;padding-top:64px}.xl\:sl-px-16{padding-left:64px;padding-right:64px}.xl\:sl-py-20{padding-bottom:80px;padding-top:80px}.xl\:sl-px-20{padding-left:80px;padding-right:80px}.xl\:sl-py-24{padding-bottom:96px;padding-top:96px}.xl\:sl-px-24{padding-left:96px;padding-right:96px}.xl\:sl-py-28{padding-bottom:112px;padding-top:112px}.xl\:sl-px-28{padding-left:112px;padding-right:112px}.xl\:sl-py-32{padding-bottom:128px;padding-top:128px}.xl\:sl-px-32{padding-left:128px;padding-right:128px}.xl\:sl-py-36{padding-bottom:144px;padding-top:144px}.xl\:sl-px-36{padding-left:144px;padding-right:144px}.xl\:sl-py-40{padding-bottom:160px;padding-top:160px}.xl\:sl-px-40{padding-left:160px;padding-right:160px}.xl\:sl-py-44{padding-bottom:176px;padding-top:176px}.xl\:sl-px-44{padding-left:176px;padding-right:176px}.xl\:sl-py-48{padding-bottom:192px;padding-top:192px}.xl\:sl-px-48{padding-left:192px;padding-right:192px}.xl\:sl-py-52{padding-bottom:208px;padding-top:208px}.xl\:sl-px-52{padding-left:208px;padding-right:208px}.xl\:sl-py-56{padding-bottom:224px;padding-top:224px}.xl\:sl-px-56{padding-left:224px;padding-right:224px}.xl\:sl-py-60{padding-bottom:240px;padding-top:240px}.xl\:sl-px-60{padding-left:240px;padding-right:240px}.xl\:sl-py-64{padding-bottom:256px;padding-top:256px}.xl\:sl-px-64{padding-left:256px;padding-right:256px}.xl\:sl-py-72{padding-bottom:288px;padding-top:288px}.xl\:sl-px-72{padding-left:288px;padding-right:288px}.xl\:sl-py-80{padding-bottom:320px;padding-top:320px}.xl\:sl-px-80{padding-left:320px;padding-right:320px}.xl\:sl-py-96{padding-bottom:384px;padding-top:384px}.xl\:sl-px-96{padding-left:384px;padding-right:384px}.xl\:sl-py-px{padding-bottom:1px;padding-top:1px}.xl\:sl-px-px{padding-left:1px;padding-right:1px}.xl\:sl-py-0\.5{padding-bottom:2px;padding-top:2px}.xl\:sl-px-0\.5{padding-left:2px;padding-right:2px}.xl\:sl-py-1\.5{padding-bottom:6px;padding-top:6px}.xl\:sl-px-1\.5{padding-left:6px;padding-right:6px}.xl\:sl-py-2\.5{padding-bottom:10px;padding-top:10px}.xl\:sl-px-2\.5{padding-left:10px;padding-right:10px}.xl\:sl-py-3\.5{padding-bottom:14px;padding-top:14px}.xl\:sl-px-3\.5{padding-left:14px;padding-right:14px}.xl\:sl-py-4\.5{padding-bottom:18px;padding-top:18px}.xl\:sl-px-4\.5{padding-left:18px;padding-right:18px}.xl\:sl-pt-0{padding-top:0}.xl\:sl-pr-0{padding-right:0}.xl\:sl-pb-0{padding-bottom:0}.xl\:sl-pl-0{padding-left:0}.xl\:sl-pt-1{padding-top:4px}.xl\:sl-pr-1{padding-right:4px}.xl\:sl-pb-1{padding-bottom:4px}.xl\:sl-pl-1{padding-left:4px}.xl\:sl-pt-2{padding-top:8px}.xl\:sl-pr-2{padding-right:8px}.xl\:sl-pb-2{padding-bottom:8px}.xl\:sl-pl-2{padding-left:8px}.xl\:sl-pt-3{padding-top:12px}.xl\:sl-pr-3{padding-right:12px}.xl\:sl-pb-3{padding-bottom:12px}.xl\:sl-pl-3{padding-left:12px}.xl\:sl-pt-4{padding-top:16px}.xl\:sl-pr-4{padding-right:16px}.xl\:sl-pb-4{padding-bottom:16px}.xl\:sl-pl-4{padding-left:16px}.xl\:sl-pt-5{padding-top:20px}.xl\:sl-pr-5{padding-right:20px}.xl\:sl-pb-5{padding-bottom:20px}.xl\:sl-pl-5{padding-left:20px}.xl\:sl-pt-6{padding-top:24px}.xl\:sl-pr-6{padding-right:24px}.xl\:sl-pb-6{padding-bottom:24px}.xl\:sl-pl-6{padding-left:24px}.xl\:sl-pt-7{padding-top:28px}.xl\:sl-pr-7{padding-right:28px}.xl\:sl-pb-7{padding-bottom:28px}.xl\:sl-pl-7{padding-left:28px}.xl\:sl-pt-8{padding-top:32px}.xl\:sl-pr-8{padding-right:32px}.xl\:sl-pb-8{padding-bottom:32px}.xl\:sl-pl-8{padding-left:32px}.xl\:sl-pt-9{padding-top:36px}.xl\:sl-pr-9{padding-right:36px}.xl\:sl-pb-9{padding-bottom:36px}.xl\:sl-pl-9{padding-left:36px}.xl\:sl-pt-10{padding-top:40px}.xl\:sl-pr-10{padding-right:40px}.xl\:sl-pb-10{padding-bottom:40px}.xl\:sl-pl-10{padding-left:40px}.xl\:sl-pt-11{padding-top:44px}.xl\:sl-pr-11{padding-right:44px}.xl\:sl-pb-11{padding-bottom:44px}.xl\:sl-pl-11{padding-left:44px}.xl\:sl-pt-12{padding-top:48px}.xl\:sl-pr-12{padding-right:48px}.xl\:sl-pb-12{padding-bottom:48px}.xl\:sl-pl-12{padding-left:48px}.xl\:sl-pt-14{padding-top:56px}.xl\:sl-pr-14{padding-right:56px}.xl\:sl-pb-14{padding-bottom:56px}.xl\:sl-pl-14{padding-left:56px}.xl\:sl-pt-16{padding-top:64px}.xl\:sl-pr-16{padding-right:64px}.xl\:sl-pb-16{padding-bottom:64px}.xl\:sl-pl-16{padding-left:64px}.xl\:sl-pt-20{padding-top:80px}.xl\:sl-pr-20{padding-right:80px}.xl\:sl-pb-20{padding-bottom:80px}.xl\:sl-pl-20{padding-left:80px}.xl\:sl-pt-24{padding-top:96px}.xl\:sl-pr-24{padding-right:96px}.xl\:sl-pb-24{padding-bottom:96px}.xl\:sl-pl-24{padding-left:96px}.xl\:sl-pt-28{padding-top:112px}.xl\:sl-pr-28{padding-right:112px}.xl\:sl-pb-28{padding-bottom:112px}.xl\:sl-pl-28{padding-left:112px}.xl\:sl-pt-32{padding-top:128px}.xl\:sl-pr-32{padding-right:128px}.xl\:sl-pb-32{padding-bottom:128px}.xl\:sl-pl-32{padding-left:128px}.xl\:sl-pt-36{padding-top:144px}.xl\:sl-pr-36{padding-right:144px}.xl\:sl-pb-36{padding-bottom:144px}.xl\:sl-pl-36{padding-left:144px}.xl\:sl-pt-40{padding-top:160px}.xl\:sl-pr-40{padding-right:160px}.xl\:sl-pb-40{padding-bottom:160px}.xl\:sl-pl-40{padding-left:160px}.xl\:sl-pt-44{padding-top:176px}.xl\:sl-pr-44{padding-right:176px}.xl\:sl-pb-44{padding-bottom:176px}.xl\:sl-pl-44{padding-left:176px}.xl\:sl-pt-48{padding-top:192px}.xl\:sl-pr-48{padding-right:192px}.xl\:sl-pb-48{padding-bottom:192px}.xl\:sl-pl-48{padding-left:192px}.xl\:sl-pt-52{padding-top:208px}.xl\:sl-pr-52{padding-right:208px}.xl\:sl-pb-52{padding-bottom:208px}.xl\:sl-pl-52{padding-left:208px}.xl\:sl-pt-56{padding-top:224px}.xl\:sl-pr-56{padding-right:224px}.xl\:sl-pb-56{padding-bottom:224px}.xl\:sl-pl-56{padding-left:224px}.xl\:sl-pt-60{padding-top:240px}.xl\:sl-pr-60{padding-right:240px}.xl\:sl-pb-60{padding-bottom:240px}.xl\:sl-pl-60{padding-left:240px}.xl\:sl-pt-64{padding-top:256px}.xl\:sl-pr-64{padding-right:256px}.xl\:sl-pb-64{padding-bottom:256px}.xl\:sl-pl-64{padding-left:256px}.xl\:sl-pt-72{padding-top:288px}.xl\:sl-pr-72{padding-right:288px}.xl\:sl-pb-72{padding-bottom:288px}.xl\:sl-pl-72{padding-left:288px}.xl\:sl-pt-80{padding-top:320px}.xl\:sl-pr-80{padding-right:320px}.xl\:sl-pb-80{padding-bottom:320px}.xl\:sl-pl-80{padding-left:320px}.xl\:sl-pt-96{padding-top:384px}.xl\:sl-pr-96{padding-right:384px}.xl\:sl-pb-96{padding-bottom:384px}.xl\:sl-pl-96{padding-left:384px}.xl\:sl-pt-px{padding-top:1px}.xl\:sl-pr-px{padding-right:1px}.xl\:sl-pb-px{padding-bottom:1px}.xl\:sl-pl-px{padding-left:1px}.xl\:sl-pt-0\.5{padding-top:2px}.xl\:sl-pr-0\.5{padding-right:2px}.xl\:sl-pb-0\.5{padding-bottom:2px}.xl\:sl-pl-0\.5{padding-left:2px}.xl\:sl-pt-1\.5{padding-top:6px}.xl\:sl-pr-1\.5{padding-right:6px}.xl\:sl-pb-1\.5{padding-bottom:6px}.xl\:sl-pl-1\.5{padding-left:6px}.xl\:sl-pt-2\.5{padding-top:10px}.xl\:sl-pr-2\.5{padding-right:10px}.xl\:sl-pb-2\.5{padding-bottom:10px}.xl\:sl-pl-2\.5{padding-left:10px}.xl\:sl-pt-3\.5{padding-top:14px}.xl\:sl-pr-3\.5{padding-right:14px}.xl\:sl-pb-3\.5{padding-bottom:14px}.xl\:sl-pl-3\.5{padding-left:14px}.xl\:sl-pt-4\.5{padding-top:18px}.xl\:sl-pr-4\.5{padding-right:18px}.xl\:sl-pb-4\.5{padding-bottom:18px}.xl\:sl-pl-4\.5{padding-left:18px}.xl\:sl-static{position:static}.xl\:sl-fixed{position:fixed}.xl\:sl-absolute{position:absolute}.xl\:sl-relative{position:relative}.xl\:sl-sticky{position:-webkit-sticky;position:sticky}.xl\:sl-visible{visibility:visible}.xl\:sl-invisible{visibility:hidden}.sl-group:hover .xl\:group-hover\:sl-visible{visibility:visible}.sl-group:hover .xl\:group-hover\:sl-invisible{visibility:hidden}.sl-group:focus .xl\:group-focus\:sl-visible{visibility:visible}.sl-group:focus .xl\:group-focus\:sl-invisible{visibility:hidden}.xl\:sl-w-0{width:0}.xl\:sl-w-1{width:4px}.xl\:sl-w-2{width:8px}.xl\:sl-w-3{width:12px}.xl\:sl-w-4{width:16px}.xl\:sl-w-5{width:20px}.xl\:sl-w-6{width:24px}.xl\:sl-w-7{width:28px}.xl\:sl-w-8{width:32px}.xl\:sl-w-9{width:36px}.xl\:sl-w-10{width:40px}.xl\:sl-w-11{width:44px}.xl\:sl-w-12{width:48px}.xl\:sl-w-14{width:56px}.xl\:sl-w-16{width:64px}.xl\:sl-w-20{width:80px}.xl\:sl-w-24{width:96px}.xl\:sl-w-28{width:112px}.xl\:sl-w-32{width:128px}.xl\:sl-w-36{width:144px}.xl\:sl-w-40{width:160px}.xl\:sl-w-44{width:176px}.xl\:sl-w-48{width:192px}.xl\:sl-w-52{width:208px}.xl\:sl-w-56{width:224px}.xl\:sl-w-60{width:240px}.xl\:sl-w-64{width:256px}.xl\:sl-w-72{width:288px}.xl\:sl-w-80{width:320px}.xl\:sl-w-96{width:384px}.xl\:sl-w-auto{width:auto}.xl\:sl-w-px{width:1px}.xl\:sl-w-0\.5{width:2px}.xl\:sl-w-1\.5{width:6px}.xl\:sl-w-2\.5{width:10px}.xl\:sl-w-3\.5{width:14px}.xl\:sl-w-4\.5{width:18px}.xl\:sl-w-xs{width:20px}.xl\:sl-w-sm{width:24px}.xl\:sl-w-md{width:32px}.xl\:sl-w-lg{width:36px}.xl\:sl-w-xl{width:44px}.xl\:sl-w-2xl{width:52px}.xl\:sl-w-3xl{width:60px}.xl\:sl-w-1\/2{width:50%}.xl\:sl-w-1\/3{width:33.333333%}.xl\:sl-w-2\/3{width:66.666667%}.xl\:sl-w-1\/4{width:25%}.xl\:sl-w-2\/4{width:50%}.xl\:sl-w-3\/4{width:75%}.xl\:sl-w-1\/5{width:20%}.xl\:sl-w-2\/5{width:40%}.xl\:sl-w-3\/5{width:60%}.xl\:sl-w-4\/5{width:80%}.xl\:sl-w-1\/6{width:16.666667%}.xl\:sl-w-2\/6{width:33.333333%}.xl\:sl-w-3\/6{width:50%}.xl\:sl-w-4\/6{width:66.666667%}.xl\:sl-w-5\/6{width:83.333333%}.xl\:sl-w-full{width:100%}.xl\:sl-w-screen{width:100vw}.xl\:sl-w-min{width:-moz-min-content;width:min-content}.xl\:sl-w-max{width:-moz-max-content;width:max-content}}:root,[data-theme=light],[data-theme=light] .sl-inverted .sl-inverted,[data-theme=light] .sl-inverted .sl-inverted .sl-inverted .sl-inverted{--text-h:0;--text-s:0%;--text-l:15%;--shadow-sm:0px 0px 1px rgba(67,90,111,.3);--shadow-md:0px 2px 4px -2px rgba(0,0,0,.25),0px 0px 1px rgba(67,90,111,.3);--shadow-lg:0 4px 17px rgba(67,90,111,.2),0 2px 3px rgba(0,0,0,.1),inset 0 0 0 .5px var(--color-canvas-pure),0 0 0 .5px rgba(0,0,0,.2);--shadow-xl:0px 0px 1px rgba(67,90,111,.3),0px 8px 10px -4px rgba(67,90,111,.45);--shadow-2xl:0px 0px 1px rgba(67,90,111,.3),0px 16px 24px -8px rgba(67,90,111,.45);--drop-shadow-default1:0 0 0.5px rgba(0,0,0,.6);--drop-shadow-default2:0 2px 5px rgba(67,90,111,.3);--color-text-heading:hsla(var(--text-h),var(--text-s),max(3,calc(var(--text-l) - 15)),1);--color-text:hsla(var(--text-h),var(--text-s),var(--text-l),1);--color-text-paragraph:hsla(var(--text-h),var(--text-s),var(--text-l),0.9);--color-text-muted:hsla(var(--text-h),var(--text-s),var(--text-l),0.7);--color-text-light:hsla(var(--text-h),var(--text-s),var(--text-l),0.55);--color-text-disabled:hsla(var(--text-h),var(--text-s),var(--text-l),0.3);--canvas-h:218;--canvas-s:40%;--canvas-l:100%;--color-canvas:hsla(var(--canvas-h),var(--canvas-s),var(--canvas-l),1);--color-canvas-dark:#2d3748;--color-canvas-pure:#fff;--color-canvas-tint:rgba(245,247,250,.5);--color-canvas-50:#f5f7fa;--color-canvas-100:#ebeef5;--color-canvas-200:#e0e6f0;--color-canvas-300:#d5ddeb;--color-canvas-400:#cbd5e7;--color-canvas-500:#c0cde2;--color-canvas-dialog:#fff;--color-border-dark:hsla(var(--canvas-h),30%,72%,0.5);--color-border:hsla(var(--canvas-h),32%,78%,0.5);--color-border-light:hsla(var(--canvas-h),24%,84%,0.5);--color-border-input:hsla(var(--canvas-h),24%,72%,0.8);--color-border-button:hsla(var(--canvas-h),24%,20%,0.65);--primary-h:202;--primary-s:100%;--primary-l:55%;--color-text-primary:#0081cc;--color-primary-dark:#1891d8;--color-primary-darker:#126fa5;--color-primary:#19abff;--color-primary-light:#52bfff;--color-primary-tint:rgba(77,190,255,.25);--color-on-primary:#fff;--success-h:156;--success-s:95%;--success-l:37%;--color-text-success:#05c779;--color-success-dark:#138b5b;--color-success-darker:#0f6c47;--color-success:#05b870;--color-success-light:#06db86;--color-success-tint:rgba(81,251,183,.25);--color-on-success:#fff;--warning-h:20;--warning-s:90%;--warning-l:56%;--color-text-warning:#c2470a;--color-warning-dark:#d35d22;--color-warning-darker:#9e461a;--color-warning:#f46d2a;--color-warning-light:#f7925f;--color-warning-tint:rgba(246,139,85,.25);--color-on-warning:#fff;--danger-h:0;--danger-s:84%;--danger-l:63%;--color-text-danger:#bc1010;--color-danger-dark:#d83b3b;--color-danger-darker:#af2323;--color-danger:#f05151;--color-danger-light:#f58e8e;--color-danger-tint:rgba(241,91,91,.25);--color-on-danger:#fff;color:var(--color-text)}:root .sl-inverted,[data-theme=light] .sl-inverted,[data-theme=light] .sl-inverted .sl-inverted .sl-inverted{--text-h:0;--text-s:0%;--text-l:86%;--shadow-sm:0px 0px 1px rgba(11,13,19,.5);--shadow-md:0px 2px 4px -2px rgba(0,0,0,.35),0px 0px 1px rgba(11,13,19,.4);--shadow-lg:0 2px 14px rgba(0,0,0,.55),0 0 0 0.5px hsla(0,0%,100%,.2);--shadow-xl:0px 0px 1px rgba(11,13,19,.4),0px 8px 10px -4px rgba(11,13,19,.55);--shadow-2xl:0px 0px 1px rgba(11,13,19,.4),0px 16px 24px -8px rgba(11,13,19,.55);--drop-shadow-default1:0 0 0.5px hsla(0,0%,100%,.5);--drop-shadow-default2:0 3px 8px rgba(0,0,0,.6);--color-text-heading:hsla(var(--text-h),var(--text-s),max(3,calc(var(--text-l) - 15)),1);--color-text:hsla(var(--text-h),var(--text-s),var(--text-l),1);--color-text-paragraph:hsla(var(--text-h),var(--text-s),var(--text-l),0.9);--color-text-muted:hsla(var(--text-h),var(--text-s),var(--text-l),0.7);--color-text-light:hsla(var(--text-h),var(--text-s),var(--text-l),0.55);--color-text-disabled:hsla(var(--text-h),var(--text-s),var(--text-l),0.3);--canvas-h:218;--canvas-s:32%;--canvas-l:10%;--color-canvas:hsla(var(--canvas-h),var(--canvas-s),var(--canvas-l),1);--color-canvas-dark:#2d3748;--color-canvas-pure:#0c1018;--color-canvas-tint:rgba(60,76,103,.2);--color-canvas-50:#3c4c67;--color-canvas-100:#2d394e;--color-canvas-200:#212a3b;--color-canvas-300:#19212e;--color-canvas-400:#171e2b;--color-canvas-500:#151c28;--color-canvas-dialog:#2d394e;--color-border-dark:hsla(var(--canvas-h),24%,23%,0.5);--color-border:hsla(var(--canvas-h),26%,28%,0.5);--color-border-light:hsla(var(--canvas-h),19%,34%,0.5);--color-border-input:hsla(var(--canvas-h),19%,30%,0.8);--color-border-button:hsla(var(--canvas-h),19%,80%,0.65);--primary-h:202;--primary-s:90%;--primary-l:51%;--color-text-primary:#66c7ff;--color-primary-dark:#1f83bd;--color-primary-darker:#186491;--color-primary:#12a0f3;--color-primary-light:#42b3f5;--color-primary-tint:rgba(85,187,246,.25);--color-on-primary:#fff;--success-h:156;--success-s:95%;--success-l:67%;--color-text-success:#41f1ab;--color-success-dark:#47dca0;--color-success-darker:#24bc7f;--color-success:#62f3b9;--color-success-light:#a0f8d5;--color-success-tint:rgba(89,243,181,.25);--color-on-success:#fff;--warning-h:20;--warning-s:90%;--warning-l:50%;--color-text-warning:#ec7d46;--color-warning-dark:#b55626;--color-warning-darker:#8b421d;--color-warning:#e75d18;--color-warning-light:#ec7d46;--color-warning-tint:rgba(238,142,93,.25);--color-on-warning:#fff;--danger-h:0;--danger-s:84%;--danger-l:43%;--color-text-danger:#e74b4b;--color-danger-dark:#972626;--color-danger-darker:#721d1d;--color-danger:#c11a1a;--color-danger-light:#e22828;--color-danger-tint:rgba(234,98,98,.25);--color-on-danger:#fff;color:var(--color-text)}[data-theme=dark],[data-theme=dark] .sl-inverted .sl-inverted,[data-theme=dark] .sl-inverted .sl-inverted .sl-inverted .sl-inverted{--text-h:0;--text-s:0%;--text-l:85%;--shadow-sm:0px 0px 1px rgba(11,13,19,.5);--shadow-md:0px 2px 4px -2px rgba(0,0,0,.35),0px 0px 1px rgba(11,13,19,.4);--shadow-lg:0 2px 14px rgba(0,0,0,.55),0 0 0 0.5px hsla(0,0%,100%,.2);--shadow-xl:0px 0px 1px rgba(11,13,19,.4),0px 8px 10px -4px rgba(11,13,19,.55);--shadow-2xl:0px 0px 1px rgba(11,13,19,.4),0px 16px 24px -8px rgba(11,13,19,.55);--drop-shadow-default1:0 0 0.5px hsla(0,0%,100%,.5);--drop-shadow-default2:0 3px 8px rgba(0,0,0,.6);--color-text-heading:hsla(var(--text-h),var(--text-s),max(3,calc(var(--text-l) - 15)),1);--color-text:hsla(var(--text-h),var(--text-s),var(--text-l),1);--color-text-paragraph:hsla(var(--text-h),var(--text-s),var(--text-l),0.9);--color-text-muted:hsla(var(--text-h),var(--text-s),var(--text-l),0.7);--color-text-light:hsla(var(--text-h),var(--text-s),var(--text-l),0.55);--color-text-disabled:hsla(var(--text-h),var(--text-s),var(--text-l),0.3);--canvas-h:218;--canvas-s:32%;--canvas-l:8%;--color-canvas:hsla(var(--canvas-h),var(--canvas-s),var(--canvas-l),1);--color-canvas-dark:#2d3748;--color-canvas-pure:#090c11;--color-canvas-tint:rgba(57,71,96,.2);--color-canvas-50:#262f40;--color-canvas-100:#1a212d;--color-canvas-200:#121821;--color-canvas-300:#0e131a;--color-canvas-400:#0c1017;--color-canvas-500:#0c1017;--color-canvas-dialog:#1a212d;--color-border-dark:hsla(var(--canvas-h),24%,21%,0.5);--color-border:hsla(var(--canvas-h),26%,26%,0.5);--color-border-light:hsla(var(--canvas-h),19%,32%,0.5);--color-border-input:hsla(var(--canvas-h),19%,28%,0.8);--color-border-button:hsla(var(--canvas-h),19%,80%,0.65);--primary-h:202;--primary-s:80%;--primary-l:36%;--color-text-primary:#66c7ff;--color-primary-dark:#1c5a7d;--color-primary-darker:#154560;--color-primary:#126fa5;--color-primary-light:#1685c5;--color-primary-tint:rgba(21,130,193,.25);--color-on-primary:#fff;--success-h:156;--success-s:95%;--success-l:37%;--color-text-success:#4be7a9;--color-success-dark:#145239;--color-success-darker:#10422e;--color-success:#0f6c47;--color-success-light:#128255;--color-success-tint:rgba(26,188,123,.25);--color-on-success:#fff;--warning-h:20;--warning-s:90%;--warning-l:56%;--color-text-warning:#e28150;--color-warning-dark:#7d4021;--color-warning-darker:#61311a;--color-warning:#9e461a;--color-warning-light:#c1551f;--color-warning-tint:rgba(184,81,30,.25);--color-on-warning:#fff;--danger-h:0;--danger-s:84%;--danger-l:63%;--color-text-danger:#d55;--color-danger-dark:#892929;--color-danger-darker:#6a2020;--color-danger:#af2323;--color-danger-light:#d12929;--color-danger-tint:rgba(179,35,35,.25);--color-on-danger:#fff;color:var(--color-text)}[data-theme=dark] .sl-inverted,[data-theme=dark] .sl-inverted .sl-inverted .sl-inverted{--text-h:0;--text-s:0%;--text-l:89%;--shadow-sm:0px 0px 1px rgba(11,13,19,.5);--shadow-md:0px 2px 4px -2px rgba(0,0,0,.35),0px 0px 1px rgba(11,13,19,.4);--shadow-lg:0 2px 14px rgba(0,0,0,.55),0 0 0 0.5px hsla(0,0%,100%,.2);--shadow-xl:0px 0px 1px rgba(11,13,19,.4),0px 8px 10px -4px rgba(11,13,19,.55);--shadow-2xl:0px 0px 1px rgba(11,13,19,.4),0px 16px 24px -8px rgba(11,13,19,.55);--drop-shadow-default1:0 0 0.5px hsla(0,0%,100%,.5);--drop-shadow-default2:0 3px 8px rgba(0,0,0,.6);--color-text-heading:hsla(var(--text-h),var(--text-s),max(3,calc(var(--text-l) - 15)),1);--color-text:hsla(var(--text-h),var(--text-s),var(--text-l),1);--color-text-paragraph:hsla(var(--text-h),var(--text-s),var(--text-l),0.9);--color-text-muted:hsla(var(--text-h),var(--text-s),var(--text-l),0.7);--color-text-light:hsla(var(--text-h),var(--text-s),var(--text-l),0.55);--color-text-disabled:hsla(var(--text-h),var(--text-s),var(--text-l),0.3);--canvas-h:218;--canvas-s:32%;--canvas-l:13%;--color-canvas:hsla(var(--canvas-h),var(--canvas-s),var(--canvas-l),1);--color-canvas-dark:#2d3748;--color-canvas-pure:#111722;--color-canvas-tint:rgba(66,83,112,.2);--color-canvas-50:#2b374a;--color-canvas-100:#222b3a;--color-canvas-200:#1a212e;--color-canvas-300:#141a24;--color-canvas-400:#121721;--color-canvas-500:#121721;--color-canvas-dialog:#222b3a;--color-border-dark:hsla(var(--canvas-h),24%,26%,0.5);--color-border:hsla(var(--canvas-h),26%,31%,0.5);--color-border-light:hsla(var(--canvas-h),19%,37%,0.5);--color-border-input:hsla(var(--canvas-h),19%,33%,0.8);--color-border-button:hsla(var(--canvas-h),19%,80%,0.65);--primary-h:202;--primary-s:80%;--primary-l:33%;--color-text-primary:#66c7ff;--color-primary-dark:#1a5475;--color-primary-darker:#14425c;--color-primary:#116697;--color-primary-light:#147cb8;--color-primary-tint:rgba(21,130,193,.25);--color-on-primary:#fff;--success-h:156;--success-s:95%;--success-l:67%;--color-text-success:#4be7a9;--color-success-dark:#25986a;--color-success-darker:#1c7350;--color-success:#1bc581;--color-success-light:#28e297;--color-success-tint:rgba(26,188,123,.25);--color-on-success:#fff;--warning-h:20;--warning-s:90%;--warning-l:50%;--color-text-warning:#e28150;--color-warning-dark:#713a1e;--color-warning-darker:#552b16;--color-warning:#914018;--color-warning-light:#ab4c1c;--color-warning-tint:rgba(184,81,30,.25);--color-on-warning:#fff;--danger-h:0;--danger-s:84%;--danger-l:43%;--color-text-danger:#d55;--color-danger-dark:#5e1c1c;--color-danger-darker:#471515;--color-danger:#771818;--color-danger-light:#911d1d;--color-danger-tint:rgba(179,35,35,.25);--color-on-danger:#fff;color:var(--color-text)}.sl-elements{font-size:13px}.sl-elements .svg-inline--fa{display:inline-block}.sl-elements .DocsSkeleton{animation:skeleton-glow .5s linear infinite alternate;background:rgba(206,217,224,.2);background-clip:padding-box!important;border-color:rgba(206,217,224,.2)!important;border-radius:2px;box-shadow:none!important;color:transparent!important;cursor:default;pointer-events:none;user-select:none}.sl-elements .Model{--fs-code:12px}.sl-elements .ElementsTableOfContentsItem:hover{color:inherit;text-decoration:none}.sl-elements .ParameterGrid{align-items:center;display:grid;grid-template-columns:fit-content(120px) 20px auto;margin-bottom:16px;padding-bottom:0;row-gap:3px}.sl-elements .TryItPanel>:nth-child(2){overflow:auto}.sl-elements .OperationParametersContent{max-height:162px}.sl-elements .Checkbox{max-width:15px;padding-right:3px}.sl-elements .TextForCheckBox{padding-left:9px;padding-top:6px}.sl-elements .TextRequestBody{margin-bottom:16px;max-height:200px;overflow-y:auto;padding-bottom:0}.sl-elements .HttpOperation .JsonSchemaViewer .sl-markdown-viewer p,.sl-elements .HttpOperation__Parameters .sl-markdown-viewer p,.sl-elements .Model .JsonSchemaViewer .sl-markdown-viewer p{font-size:12px;line-height:1.5em}.sl-elements .HttpOperation div[role=tablist]{overflow-x:auto}.sl-elements .HttpService .ServerInfo .sl-panel__titlebar div{height:100%;min-height:36px}
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/index.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/index.tsx
index 4719d7779..ac7249dab 100644
--- a/client/packages/lowcoder/src/pages/ApplicationV2/index.tsx
+++ b/client/packages/lowcoder/src/pages/ApplicationV2/index.tsx
@@ -267,9 +267,9 @@ export default function ApplicationHome() {
const isOrgAdmin = org?.createdBy == user.id ? true : false;
- useEffect(() => {
- dispatch(fetchHomeData({}));
- }, [user.currentOrgId]);
+ // useEffect(() => {
+ // dispatch(fetchHomeData({}));
+ // }, [user.currentOrgId]);
useEffect(() => {
if (!org) {
@@ -494,7 +494,10 @@ export default function ApplicationHome() {
]}
/>
- {user.orgDev && (
+
+ {/*
+ // we have the invite dialog in the Admin Area, so we don't need it here
+ {user.orgDev && (
<InviteDialog
trigger={
<InviteUser>
@@ -504,7 +507,7 @@ export default function ApplicationHome() {
}
style={{ marginLeft: "auto" }}
/>
- )}
+ )} */}
</DivStyled>
);
}
diff --git a/client/packages/lowcoder/src/pages/editor/AppEditor.tsx b/client/packages/lowcoder/src/pages/editor/AppEditor.tsx
index 25584eccf..805c7af18 100644
--- a/client/packages/lowcoder/src/pages/editor/AppEditor.tsx
+++ b/client/packages/lowcoder/src/pages/editor/AppEditor.tsx
@@ -26,8 +26,10 @@ import { fetchFolderElements } from "redux/reduxActions/folderActions";
import { registryDataSourcePlugin } from "constants/queryConstants";
import { DatasourceApi } from "api/datasourceApi";
import { useRootCompInstance } from "./useRootCompInstance";
-import ErrorBoundary from "antd/es/alert/ErrorBoundary";
import EditorSkeletonView from "./editorSkeletonView";
+import {ErrorBoundary, FallbackProps} from 'react-error-boundary';
+import { ALL_APPLICATIONS_URL } from "@lowcoder-ee/constants/routesURL";
+import history from "util/history";
const AppSnapshot = lazy(() => {
return import("pages/editor/appSnapshot")
@@ -95,9 +97,8 @@ export default function AppEditor() {
dispatch(fetchQueryLibraryDropdown());
}
}, [dispatch, applicationId, paramViewMode]);
-
- useEffect(() => {
- if (!currentUser?.id) return;
+
+ const fetchJSDataSourceByApp = () => {
DatasourceApi.fetchJsDatasourceByApp(applicationId).then((res) => {
res.data.data.forEach((i) => {
registryDataSourcePlugin(i.type, i.id, i.pluginDefinition);
@@ -105,7 +106,7 @@ export default function AppEditor() {
setIsDataSourcePluginRegistered(true);
});
dispatch(setShowAppSnapshot(false));
- }, [applicationId, dispatch, currentUser]);
+ };
useEffect(() => {
if (!fetchOrgGroupsFinished) {
@@ -129,13 +130,19 @@ export default function AppEditor() {
},
});
setAppInfo(info);
+ fetchJSDataSourceByApp();
},
})
);
}, [viewMode, applicationId, dispatch]);
-
+const fallbackUI = (
+ <div style={{display:'flex', height:'100%', width:'100%', alignItems:'center',justifyContent:'center', gap:'8px',marginTop:'10px'}}>
+ <p style={{margin:0}}>Something went wrong while displaying this webpage</p>
+ <button onClick={() => history.push(ALL_APPLICATIONS_URL)} style={{background: '#4965f2',border: '1px solid #4965f2', color: '#ffffff',borderRadius:'6px'}}>Go to Apps</button>
+ </div>
+);
return (
- <ErrorBoundary>
+ <ErrorBoundary fallback={fallbackUI}>
{showAppSnapshot ? (
<Suspense fallback={<EditorSkeletonView />}>
<AppSnapshot
diff --git a/client/packages/lowcoder/src/pages/editor/LeftLayersContent.tsx b/client/packages/lowcoder/src/pages/editor/LeftLayersContent.tsx
index 9b103cd83..29cf7cb1b 100644
--- a/client/packages/lowcoder/src/pages/editor/LeftLayersContent.tsx
+++ b/client/packages/lowcoder/src/pages/editor/LeftLayersContent.tsx
@@ -40,7 +40,7 @@ import {
} from "util/localStorageUtil";
import { default as DownOutlined } from "@ant-design/icons/DownOutlined";
import type { ItemType } from "antd/es/menu/hooks/useItems";
-import ColorPicker from "components/ColorPicker";
+import ThemeSettingsSelector from "components/ThemeSettingsSelector";
export type DisabledCollisionStatus = "true" | "false"; // "true" means collision is not enabled - Layering works, "false" means collision is enabled - Layering does not work
export type ToggleCollisionStatus = (collisionStatus?: DisabledCollisionStatus) => void;
@@ -566,20 +566,20 @@ export const LeftLayersContent = (props: LeftLayersContentProps) => {
Apply Action
</Button>
<br/>
- <ColorPicker
- colorKey={"background"}
+ <ThemeSettingsSelector
+ themeSettingKey={"background"}
name={trans("componentDoc.styleBackgroundColor")}
color={"#ffffff"}
configChange={(params) => handleColorChange(params.color, "style.background")}
/>
- <ColorPicker
- colorKey={"border"}
+ <ThemeSettingsSelector
+ themeSettingKey={"border"}
name={trans("componentDoc.styleBorderColor")}
color={"#ffffff"}
configChange={(params) => handleColorChange(params.color, "style.border")}
/>
- <ColorPicker
- colorKey={"text"}
+ <ThemeSettingsSelector
+ themeSettingKey={"text"}
name={trans("style.textColor")}
color={"#ffffff"}
configChange={(params) => handleColorChange(params.color, "style.text")}
diff --git a/client/packages/lowcoder/src/pages/editor/right/styledComponent.tsx b/client/packages/lowcoder/src/pages/editor/right/styledComponent.tsx
index 536d73470..177ad9cdd 100644
--- a/client/packages/lowcoder/src/pages/editor/right/styledComponent.tsx
+++ b/client/packages/lowcoder/src/pages/editor/right/styledComponent.tsx
@@ -11,7 +11,7 @@ const NoShake = css`
transform-style: preserve-3d;
`;
-export const CompIconDiv = styled.div<{ $h: number; $w: number }>`
+export const CompIconDiv = styled.div<{ $h: number; $w: number, $isSelected?: boolean }>`
${NoShake};
padding: 3px;
background: #ffffff;
@@ -39,6 +39,17 @@ export const CompIconDiv = styled.div<{ $h: number; $w: number }>`
transform-style: preserve-3d;
backface-visibility: hidden;
}
+
+ ${(props) => props.$isSelected && `
+ ${NoShake};
+ padding: 0;
+ transform: scale(1.05);
+ transition: all 0.2s ease;
+ border: 2px solid #b3c4ff;
+ box-shadow: 0 0 5px 0 rgba(51, 119, 255, 0.15);
+ transform-style: preserve-3d;
+ backface-visibility: hidden;
+ `}
`;
export const RightPanelContentWrapper = styled.div`
diff --git a/client/packages/lowcoder/src/pages/setting/idSource/OAuthForms/GenericOAuthForm.tsx b/client/packages/lowcoder/src/pages/setting/idSource/OAuthForms/GenericOAuthForm.tsx
index a9b0c78f8..4dfc0d63a 100644
--- a/client/packages/lowcoder/src/pages/setting/idSource/OAuthForms/GenericOAuthForm.tsx
+++ b/client/packages/lowcoder/src/pages/setting/idSource/OAuthForms/GenericOAuthForm.tsx
@@ -65,6 +65,7 @@ export interface ConfigProvider {
scope: string,
sourceMappings: any,
userInfoIntrospection?: boolean,
+ userCanSelectAccounts?: boolean,
}
type GenericOAuthFormProp = {
diff --git a/client/packages/lowcoder/src/pages/setting/idSource/idSourceConstants.ts b/client/packages/lowcoder/src/pages/setting/idSource/idSourceConstants.ts
index 55ee1ad23..c60940a38 100644
--- a/client/packages/lowcoder/src/pages/setting/idSource/idSourceConstants.ts
+++ b/client/packages/lowcoder/src/pages/setting/idSource/idSourceConstants.ts
@@ -38,6 +38,7 @@ const AuthCategories = Object.keys(AuthCategoriesEnum).map(
}
);
+const GenericProviderCategories = [{label: "Generic OAuth Provider", value: "GENERIC"}];
export const validatorOptions = [];
@@ -88,21 +89,20 @@ export const authConfig = {
sourceName: "Generic",
sourceValue: AuthType.Generic,
form: {
- source: { label: "Source", isRequire: true },
- sourceName: { label: "Source Name", isRequire: true },
- sourceDescription: { label: "Source Description", isRequire: false },
- sourceIcon: { label: "Source Icon", isIcon: true, isRequire: true, },
- sourceCategory: { label: "Source Category", isRequire: true, isList: true, options: AuthCategories },
+ source: { label: trans("idSource.source"), isRequire: true, isList: true, options: GenericProviderCategories},
+ sourceName: { label: trans("idSource.sourceName"), isRequire: true },
+ sourceDescription: { label: trans("idSource.sourceDescription"), isRequire: false },
+ sourceIcon: { label: trans("idSource.sourceIcon"), isIcon: true, isRequire: true, },
+ sourceCategory: { label: trans("idSource.sourceCategory"), isRequire: true, isList: true, options: AuthCategories },
...clientIdandSecretConfig,
- issuerUri: { label: 'Issuer URI', isRequire: true },
- authorizationEndpoint: { label: 'Authorization Endpoint', isRequire: true },
- tokenEndpoint: { label: 'Token Endpoint', isRequire: true },
- userInfoEndpoint: { label: 'UserInfo Endpoint', isRequire: true },
+ issuerUri: { label: trans("idSource.souceIssuerURI"), isRequire: true },
+ authorizationEndpoint: { label: trans("idSource.souceAuthorizationEndpoint"), isRequire: true },
+ tokenEndpoint: { label: trans("idSource.souceTokenEndpoint"), isRequire: true },
+ userInfoEndpoint: { label: trans("idSource.souceUserInfoEndpoint"), isRequire: true },
// jwks: { label: 'Authorize URL', isRequire: true },
scope: "Scope",
- userInfoIntrospection: { label: 'Use OpenID User Introspection', isSwitch: true, isRequire: false},
- // baseUrl: "Base URL",
- // realm: "Realm",
+ userInfoIntrospection: { label: trans("idSource.userInfoIntrospection"), isSwitch: true, isRequire: false},
+ userCanSelectAccounts: { label: trans("idSource.userCanSelectAccounts"), isSwitch: true, isRequire: false},
},
},
} as { [key: string]: { sourceName: string; sourceValue: AuthType, form: FormItemType } };
diff --git a/client/packages/lowcoder/src/pages/setting/permission/permissionList.tsx b/client/packages/lowcoder/src/pages/setting/permission/permissionList.tsx
index 9cdf630c3..c72579a36 100644
--- a/client/packages/lowcoder/src/pages/setting/permission/permissionList.tsx
+++ b/client/packages/lowcoder/src/pages/setting/permission/permissionList.tsx
@@ -9,12 +9,17 @@ import { getUser } from "redux/selectors/usersSelectors";
import { getNextEntityName } from "util/stringUtils";
import { validateResponse } from "api/apiUtils";
import {
+ AddMemberButton,
GroupNameView,
OperationWrapper,
EditBtn,
PopoverIcon,
CreateButton,
} from "./styledComponents";
+import {
+ MembersIcon,
+} from "lowcoder-design";
+import styled from "styled-components";
import { trans } from "i18n";
import { getOrgGroups } from "redux/selectors/orgSelectors";
import { Table } from "components/Table";
@@ -25,9 +30,17 @@ import { timestampToHumanReadable } from "../../../util/dateTimeUtils";
import { usePermissionMenuItems } from "@lowcoder-ee/pages/setting/permission/permissionMenuItems";
import { OrgGroup } from "constants/orgConstants";
import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
+import InviteDialog from "pages/common/inviteDialog";
+import { Flex } from "antd";
const NEW_GROUP_PREFIX = trans("memberSettings.newGroupPrefix");
+const StyledMembersIcon = styled(MembersIcon)`
+ g g {
+ stroke: #ffffff;
+ }
+`;
+
type DataItemInfo = {
key: string;
label: string;
@@ -120,7 +133,8 @@ export default function PermissionSetting() {
<Level1SettingPageTitleWithBtn>
{trans("settings.userGroups")}
{currentOrgAdmin(user) && (
- <CreateButton
+ <Flex gap="middle">
+ <CreateButton
loading={groupCreating}
buttonType={"primary"}
icon={<AddIcon />}
@@ -128,6 +142,12 @@ export default function PermissionSetting() {
>
{trans("memberSettings.createGroup")}
</CreateButton>
+ <InviteDialog
+ trigger={<AddMemberButton buttonType="primary" icon={<StyledMembersIcon />}>
+ {trans("memberSettings.inviteUser")}
+ </AddMemberButton>}
+ style={{ marginLeft: "auto" }} />
+ </Flex>
)}
</Level1SettingPageTitleWithBtn>
<div>
diff --git a/client/packages/lowcoder/src/pages/setting/settingHome.tsx b/client/packages/lowcoder/src/pages/setting/settingHome.tsx
index ebca92a0f..ee8bbc969 100644
--- a/client/packages/lowcoder/src/pages/setting/settingHome.tsx
+++ b/client/packages/lowcoder/src/pages/setting/settingHome.tsx
@@ -26,6 +26,7 @@ import { selectSystemConfig } from "redux/selectors/configSelectors";
import { enableCustomBrand } from "util/featureFlagUtils";
import FreeLimitTag from "pages/common/freeLimitTag";
import { Helmet } from "react-helmet";
+import { Card } from "antd";
// import ApiDocs from "./apiDocs";
enum SettingPageEnum {
@@ -147,6 +148,10 @@ export function SettingHome() {
history.push("/setting/" + value.key);
} }
items={items} />
+
+ <Card style={{marginTop: "40px", color:"#aaa"}}>
+ <div>If you are interested in early access to the upcoming Enterprise Edition, please contact us: <a href="mailto:service@lowcoder.cloud">service@lowcoder.cloud</a></div>
+ </Card>
</SubSideBar>
{selectKey === SettingPageEnum.UserGroups && <PermissionSetting />}
{selectKey === SettingPageEnum.Organization && <Organization />}
diff --git a/client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx b/client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx
new file mode 100644
index 000000000..dd59fa900
--- /dev/null
+++ b/client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx
@@ -0,0 +1,374 @@
+import {
+ uiCompCategoryNames,
+ UICompCategory,
+ UICompManifest,
+ uiCompRegistry,
+} from "comps/uiCompRegistry";
+import { isEmpty } from "lodash";
+import { language } from "i18n";
+import {
+ CompIconDiv,
+ EmptyCompContent,
+ RightPanelContentWrapper,
+} from "pages/editor/right/styledComponent";
+import React, { Fragment, useEffect, useMemo, useState } from "react";
+import styled from "styled-components";
+import {
+ BaseSection,
+ PropertySectionContext,
+ PropertySectionContextType,
+ PropertySectionState,
+ labelCss,
+ sectionNames,
+} from "lowcoder-design";
+import { Card, Divider, Flex, Input, List } from "antd";
+import { genRandomKey } from "comps/utils/idGenerator";
+import dsl from "./detail/previewDsl";
+import { NameGenerator } from "comps/utils";
+import ThemeSettingsCompStyles from "components/ThemeSettingsCompStyles";
+import { JSONObject } from "util/jsonTypes";
+import PreviewApp from "components/PreviewApp";
+import { parseCompType } from "comps/utils/remote";
+import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
+
+const CompDiv = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 64px;
+ margin-top: 4px;
+`;
+
+const CompNameLabel = styled.div`
+ ${labelCss};
+ line-height: 15px;
+ display: table;
+ margin: 3px auto 0;
+ color: #333333;
+ text-align: center;
+ word-break: keep-all;
+`;
+
+const CompEnNameLabel = styled.span`
+ ${labelCss};
+ line-height: 14px;
+ font-size: 12px;
+ display: table;
+ margin: 4px auto auto;
+ color: #8b8fa3;
+ text-align: center;
+ word-spacing: 99px;
+`;
+
+const HovDiv = styled.div`
+ display: inline-block;
+ border-radius: 4px;
+
+ &:hover + ${CompNameLabel} {
+ color: #315efb;
+ }
+
+ &.selected + ${CompNameLabel} {
+ font-weight: 500;
+ color: #315efb;
+ }
+`;
+
+const IconContain = (props: {
+ Icon: React.FunctionComponent<React.SVGProps<SVGSVGElement>>,
+ isSelected: boolean,
+}) => {
+ const { Icon, isSelected } = props;
+ return (
+ <CompIconDiv $w={64} $h={64} $isSelected={isSelected}>
+ <Icon />
+ </CompIconDiv>
+ );
+};
+const InsertContain = styled.div`
+ width: 224px; /* Adjusted width to fit 3 components in a row */
+ display: flex;
+ flex-wrap: wrap;
+ padding: 4px 0 0 0;
+ box-sizing: border-box;
+ gap: 8px;
+ margin: 0 1px;
+`;
+
+const SectionWrapper = styled.div`
+ .section-header {
+ margin-left: 0;
+ }
+ &:not(:last-child){
+ border-bottom: 1px solid #e1e3eb;
+ }
+`;
+
+const stateCompName = 'UICompSections';
+const initialState: PropertySectionState = { [stateCompName]: {}};
+Object.keys(uiCompCategoryNames).forEach((cat) => {
+ const key = uiCompCategoryNames[cat as UICompCategory];
+ initialState[stateCompName][key] = key === uiCompCategoryNames.dashboards
+})
+
+export const ThemeCompPanel = (props: any) => {
+ const { theme } = props;
+ const [searchValue, setSearchValue] = useState("");
+ const [propertySectionState, setPropertySectionState] = useState<PropertySectionState>(initialState);
+ const [searchedPropertySectionState, setSearchedPropertySectionState] = useState<PropertySectionState>({});
+ const [styleChildrens, setStyleChildrens] = useState<Record<string, any>>();
+ const [selectedComp, setSelectedComp] = useState<string>('');
+ const [appDsl, setAppDSL] = useState<JSONObject>();
+
+ const categories = useMemo(() => {
+ const cats: Record<string, [string, UICompManifest][]> = Object.fromEntries(
+ Object.keys(uiCompCategoryNames).map((cat) => [cat, []])
+ );
+ Object.entries(uiCompRegistry).forEach(([name, manifest]) => {
+ manifest.categories.forEach((cat) => {
+ cats[cat].push([name, manifest]);
+ });
+ });
+ return cats;
+ }, []);
+
+ const propertySectionContextValue = useMemo<PropertySectionContextType>(() => {
+ const state = searchValue
+ ? searchedPropertySectionState
+ : propertySectionState;
+ const setStateFn = searchValue
+ ? setSearchedPropertySectionState
+ : setPropertySectionState;
+
+ return {
+ compName: stateCompName,
+ state,
+ toggle: (compName: string, sectionName: string) => {
+ setStateFn((oldState) => {
+ const nextSectionState: PropertySectionState = { ...oldState };
+ const compState = nextSectionState[compName] || {};
+ compState[sectionName] = compState[sectionName] === false;
+ nextSectionState[compName] = compState;
+ return nextSectionState;
+ });
+ },
+ };
+ }, [searchValue, propertySectionState, searchedPropertySectionState]);
+
+ useEffect(() => {
+ if(!searchValue) {
+ setSearchedPropertySectionState({})
+ }
+ }, [searchValue])
+
+ const onCompSelect = async (compMap: [string, UICompManifest]) => {
+ setAppDSL(undefined);
+ setStyleChildrens(undefined);
+
+ setTimeout(async () => {
+
+ const [compType, compInfo] = compMap;
+ setSelectedComp(compType);
+ const compKey = genRandomKey();
+ let { comp, defaultDataFn } = compInfo;
+ let newComp: any;
+
+ if (compInfo.lazyLoad) {
+ comp = (await import(`../../../comps/${compInfo.compPath!}`))[compInfo.compName!];
+ const {
+ defaultDataFnName,
+ defaultDataFnPath,
+ } = compInfo;
+
+ if(defaultDataFnName && defaultDataFnPath) {
+ const module = await import(`../../../comps/${defaultDataFnPath}.tsx`);
+ defaultDataFn = module[defaultDataFnName];
+ }
+ newComp = new comp!({});
+ } else {
+ comp = compInfo.comp;
+ newComp = new comp!({
+ dispatch: (action) => {
+ if (newComp) {
+ newComp = newComp.reduce(action);
+ }
+ },
+ }) as any;
+ await newComp.load();
+ }
+
+ if (newComp) {
+ const compChildrens = newComp.children;
+ let styleChildrenKeys = Object.keys(compChildrens).filter(child => child.toLowerCase().endsWith('style'));
+ let styleChildrens: Record<string, any> = {};
+ styleChildrenKeys.forEach((childKey: string) => {
+ styleChildrens[childKey] = compChildrens[childKey];
+ })
+ if (compChildrens.container) {
+ styleChildrenKeys = Object.keys(compChildrens.container.children).filter(child => child.toLowerCase().endsWith('style'));
+ styleChildrenKeys.forEach((childKey: string) => {
+ styleChildrens[childKey] = compChildrens.container.children[childKey];
+ })
+ }
+ setStyleChildrens(styleChildrens);
+ }
+
+ const ui = {
+ items: {
+ [compKey]: {
+ compType: compType,
+ name: `${compType}1`,
+ comp: defaultDataFn
+ ? defaultDataFn("comp", new NameGenerator())
+ : new comp!({}),
+ }
+ },
+ layout: {
+ [compKey]: {
+ ...compInfo.layoutInfo,
+ w: (compInfo?.layoutInfo?.w || 5) * 2,
+ h: (compInfo?.layoutInfo?.h || 5),
+ i: compKey,
+ x: 1,
+ y: 1,
+ }
+ }
+ }
+ setAppDSL({...dsl as any, ui});
+ }, 0)
+ }
+
+ const compList = useMemo(
+ () =>
+ Object.entries(categories)
+ .map(([key, value], index) => {
+ let infos = value;
+ if (!isEmpty(searchValue)) {
+ const searchString = searchValue.trim().toLocaleLowerCase();
+ infos = infos.filter((info) =>
+ info[1].keywords.toLowerCase().includes(searchString.toLowerCase())
+ );
+ }
+
+ if (isEmpty(infos)) {
+ return null;
+ }
+
+ return (
+ <SectionWrapper key={index}>
+ <BaseSection
+ style={{ whiteSpace: "normal", overflow: "hidden"}}
+ noMargin
+ width={210}
+ name={uiCompCategoryNames[key as UICompCategory]}
+ >
+ <InsertContain>
+ {infos.map((info) => (
+ <CompDiv key={info[0]} onClick={() => onCompSelect(info)}>
+ <HovDiv className={info[0] === selectedComp ? 'selected' : ''}>
+ <IconContain isSelected={info[0] === selectedComp} Icon={info[1].icon}></IconContain>
+ </HovDiv>
+ <CompNameLabel>{info[1].name}</CompNameLabel>
+ {language !== "en" && <CompEnNameLabel>{info[1].enName}</CompEnNameLabel>}
+ </CompDiv>
+ ))}
+ </InsertContain>
+ </BaseSection>
+ </SectionWrapper>
+ );
+ })
+ .filter((t) => t != null),
+ [categories, searchValue, selectedComp]
+ );
+
+ const stylePropertyView = useMemo(() => {
+ return (
+ <>
+ {Object.keys(styleChildrens || {})?.map((styleKey: string) => {
+ return (
+ <Fragment key={styleKey}>
+ <h4>
+ { sectionNames.hasOwnProperty(styleKey)
+ ? sectionNames[styleKey as keyof typeof sectionNames]
+ : styleKey
+ }
+ </h4>
+ <ThemeSettingsCompStyles
+ styleOptions={Object.keys(styleChildrens?.[styleKey].children)}
+ defaultStyle={{...theme.components?.[selectedComp]?.[styleKey] || {}}}
+ configChange={(params) => {
+ props.onCompStyleChange(selectedComp, styleKey, params);
+ }}
+ />
+ </Fragment>
+ )
+ })}
+ </>
+ )
+ }, [styleChildrens]);
+
+ const appPreview = useMemo(() => {
+ if (!appDsl) return null;
+
+ return (
+ <PreviewApp
+ style={{
+ height: "650px",
+ minWidth: "auto",
+ width: "100%",
+ }}
+ theme={{...defaultTheme, ...theme}}
+ dsl={appDsl}
+ />
+ );
+ }, [appDsl, theme]);
+
+ // if(!compList.length) return (
+ // <RightPanelContentWrapper>
+ // <EmptyCompContent />
+ // </RightPanelContentWrapper>
+ // )
+
+ return (
+ <Flex style={{
+ overflow: "hidden",
+ gap: "middle",
+ }}>
+ <List
+ bordered
+ itemLayout="vertical"
+ >
+ <List.Item>
+ <Input.Search
+ placeholder="Search components"
+ value={searchValue}
+ onChange={(e) => setSearchValue(e.target.value)}
+ style={{ marginBottom: 16 }}
+ />
+ </List.Item>
+ <List.Item style={{padding: "0 15px"}}>
+ <div style={{overflow : "auto", width: "230px", height: "540px"}}>
+ <PropertySectionContext.Provider
+ value={propertySectionContextValue}
+ >
+ {compList}
+ </PropertySectionContext.Provider>
+ </div>
+ </List.Item>
+ </List>
+ <Divider type="vertical" style={{height: "630px"}}/>
+ <div style={{flex: "1", height: "600px", borderRadius: "8px"}}>
+ {appPreview}
+ </div>
+ <Divider type="vertical" style={{height: "630px"}}/>
+ <div style={{
+ width: "280px",
+ padding: "12px",
+ overflow: "auto",
+ height: "630px",
+ }}>
+ {stylePropertyView}
+ </div>
+ </Flex>
+ );
+};
diff --git a/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx b/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
index 7c36196cd..6dc0fe1a6 100644
--- a/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
+++ b/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
@@ -1,4 +1,5 @@
import { InputRef } from "antd/es/input";
+import styled from "styled-components";
import {
CommonSettingResponseData,
SetCommonSettingPayload,
@@ -7,8 +8,8 @@ import {
} from "api/commonSettingApi";
import history from "util/history";
import { BASE_URL, THEME_SETTING } from "constants/routesURL";
-import ColorPicker, { configChangeParams } from "../../../../components/ColorPicker";
-import React, { lazy } from "react";
+import ThemeSettingsSelector, { configChangeParams } from "../../../../components/ThemeSettingsSelector";
+import React, { lazy, useState } from "react";
import { connect } from "react-redux";
import { fetchCommonSettings, setCommonSettings } from "redux/reduxActions/commonSettingsActions";
import { AppState } from "redux/reducers";
@@ -25,6 +26,14 @@ import {
Footer,
Header,
} from "../styledComponents";
+import {
+ ColorPickerCompIcon,
+ TextSizeIcon,
+ PageLayoutCompIcon,
+ ShapesCompIcon,
+ ChartCompIcon,
+
+} from "lowcoder-design";
import PreviewApp from "../../../../components/PreviewApp";
import { trans } from "i18n";
import { Prompt } from "react-router";
@@ -32,6 +41,30 @@ import { HeaderBack } from "pages/setting/permission/styledComponents";
import dsl from "./previewDsl";
import chartDsl from "./chartPreviewDsl";
import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
+import { Card, Collapse, CollapseProps, Divider, Flex, List, Tooltip } from 'antd';
+
+import { ThemeCompPanel } from "pages/setting/theme/ThemeCompPanel";
+import { JSONObject } from "@lowcoder-ee/util/jsonTypes";
+import Switch from "antd/es/switch";
+
+const ThemeSettingsView = styled.div`
+ font-size: 14px;
+ color: #8b8fa3;
+ flex-grow: 1;
+ padding-top: 0px;
+ padding-left: 0px;
+ max-width: 100%;
+`;
+
+const StyleThemeSettingsCover = styled.div`
+ display: flex;
+ flex-direction: row;
+ background: rgb(2,0,36);
+background: linear-gradient(34deg, rgba(2,0,36,1) 0%, rgba(102,9,121,1) 35%, rgba(0,255,181,1) 100%);
+ padding: 15px;
+ height: 80px;
+ border-radius:10px 10px 0 0;
+`;
const CodeEditor = lazy(
() => import("base/codeEditor/codeEditor")
@@ -60,6 +93,7 @@ type ThemeDetailPageState = {
name: string;
theme: ThemeDetail;
canLeave: boolean;
+ compDsl?: JSONObject;
};
class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailPageState> {
@@ -92,6 +126,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
theme,
name,
canLeave: false,
+ compDsl: undefined,
};
this.inputRef = React.createRef();
}
@@ -132,7 +167,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
this.setState({
theme: {
...this.state.theme,
- [params.colorKey]: params.color || params.radius || params.chart || params.margin || params.padding || params.gridColumns,
+ [params.themeSettingKey]: params.color || params.radius || params.chart || params.margin || params.padding || params.gridColumns || params.borderWidth || params.borderStyle || params.fontFamily,
},
});
}
@@ -140,7 +175,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
isThemeNotChange() {
return (
JSON.stringify({ ...this.state.theme }) ===
- JSON.stringify({ ...this.state.theme, ...this.themeDefault })
+ JSON.stringify({ ...this.themeDefault })
);
}
@@ -149,6 +184,128 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
};
render() {
+
+ const colorSettings = [
+ {
+ key: 'primary',
+ title: trans('theme.mainColor'),
+ items: [
+ {
+ settingsKey: 'primary',
+ name: trans('themeDetail.primary'),
+ desc: trans('themeDetail.primaryDesc'),
+ color: this.state.theme.primary,
+ },
+ {
+ settingsKey: 'canvas',
+ name: trans('themeDetail.canvas'),
+ desc: trans('themeDetail.canvasDesc'),
+ color: this.state.theme.canvas,
+ },
+ {
+ settingsKey: 'primarySurface',
+ name: trans('themeDetail.primarySurface'),
+ desc: trans('themeDetail.primarySurfaceDesc'),
+ color: this.state.theme.primarySurface,
+ },
+ {
+ settingsKey: 'border',
+ name: trans('themeDetail.borderColor'),
+ desc: trans('themeDetail.borderColorDesc'),
+ color: this.state.theme.border || this.state.theme.borderColor,
+ }
+ ]
+ },
+ {
+ key: 'text',
+ title: trans('theme.text'),
+ items: [
+ {
+ settingsKey: 'textLight',
+ name: trans('themeDetail.textLight'),
+ desc: trans('themeDetail.textLightDesc'),
+ color: this.state.theme.textLight,
+ },
+ {
+ settingsKey: 'textDark',
+ name: trans('themeDetail.textDark'),
+ desc: trans('themeDetail.textDarkDesc'),
+ color: this.state.theme.textDark,
+ }
+ ]
+ }
+ ];
+
+ const fontSettings = [
+ {
+ title: trans('themeDetail.fonts'),
+ items: [
+ {
+ settingsKey: 'fontFamily',
+ name: trans('themeDetail.fontFamily'),
+ desc: trans('themeDetail.fontFamilyDesc'),
+ type: "fontFamily",
+ value: this.state.theme.fontFamily,
+ }
+ ]
+ },
+ ];
+
+ const layoutSettings = [
+ {
+ title: trans('themeDetail.borders'),
+ items: [
+ {
+ settingsKey: 'radius',
+ name: trans('themeDetail.borderRadius'),
+ desc: trans('themeDetail.borderRadiusDesc'),
+ type: "radius",
+ value: this.state.theme.radius || this.state.theme.borderRadius,
+ },
+ {
+ settingsKey: 'borderWidth',
+ name: trans('themeDetail.borderWidth'),
+ desc: trans('themeDetail.borderWidthDesc'),
+ type: "borderWidth",
+ value: this.state.theme.borderWidth,
+ },
+ {
+ settingsKey: 'borderStyle',
+ name: trans('themeDetail.borderStyle'),
+ desc: trans('themeDetail.borderStyleDesc'),
+ type: "borderStyle",
+ value: this.state.theme.borderStyle,
+ }
+ ]
+ },
+ {
+ title: trans('themeDetail.spacing'),
+ items: [
+ {
+ settingsKey: 'margin',
+ name: trans('themeDetail.margin'),
+ desc: trans('themeDetail.marginDesc'),
+ type: "margin",
+ value: this.state.theme.margin,
+ },
+ {
+ settingsKey: 'padding',
+ name: trans('themeDetail.padding'),
+ desc: trans('themeDetail.paddingDesc'),
+ type: "padding",
+ value: this.state.theme.padding,
+ },
+ {
+ settingsKey: 'gridColumns',
+ name: trans('themeDetail.gridColumns'),
+ desc: trans('themeDetail.gridColumnsDesc'),
+ type: "gridColumns",
+ value: this.state.theme.gridColumns,
+ }
+ ]
+ },
+ ];
+
return (
<>
<Prompt
@@ -178,19 +335,8 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
}}
when={!this.isThemeNotChange()}
></Prompt>
- <DetailContainer
- onScroll={(e) => {
- if (
- e.currentTarget.scrollTop + e.currentTarget.clientHeight >=
- e.currentTarget.scrollHeight - 2
- ) {
- // scroll to the bottom
- this.footerRef.current && this.footerRef.current.classList.remove("no-bottom");
- } else {
- this.footerRef.current && this.footerRef.current.classList.add("no-bottom");
- }
- }}
- >
+
+ <DetailContainer>
<Header>
<HeaderBack>
<span onClick={() => this.goList()}>{trans("settings.theme")}</span>
@@ -198,130 +344,254 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
<span>{this.state.name}</span>
</HeaderBack>
</Header>
+
<DetailContent>
- <div className="common">
- <div>
- <DetailTitle>{trans("theme.mainColor")}</DetailTitle>
- <ColorPicker
- colorKey="primary"
- name={trans("themeDetail.primary")}
- desc={trans("themeDetail.primaryDesc")}
- color={this.state.theme.primary}
- configChange={(params) => this.configChange(params)}
- />
- </div>
- <ColorPicker
- colorKey="canvas"
- name={trans("themeDetail.canvas")}
- desc={trans("themeDetail.canvasDesc")}
- color={this.state.theme.canvas}
- configChange={(params) => this.configChange(params)}
- />
- <ColorPicker
- colorKey="primarySurface"
- name={trans("themeDetail.primarySurface")}
- desc={trans("themeDetail.primarySurfaceDesc")}
- color={this.state.theme.primarySurface}
- configChange={(params) => this.configChange(params)}
- />
- <div>
- <DetailTitle>{trans("theme.text")}</DetailTitle>
- <ColorPicker
- colorKey="textLight"
- name={trans("themeDetail.textLight")}
- desc={trans("themeDetail.textLightDesc")}
- color={this.state.theme.textLight}
- configChange={(params) => this.configChange(params)}
- />
- </div>
- <ColorPicker
- colorKey="textDark"
- name={trans("themeDetail.textDark")}
- desc={trans("themeDetail.textDarkDesc")}
- color={this.state.theme.textDark}
- configChange={(params) => this.configChange(params)}
- />
- <div>
- <DetailTitle>{trans("themeDetail.borderRadius")}</DetailTitle>
- <ColorPicker
- colorKey="borderRadius"
- name={trans("themeDetail.borderRadius")}
- desc={trans("themeDetail.borderRadiusDesc")}
- radius={this.state.theme.borderRadius}
- configChange={(params) => this.configChange(params)}
- />
- </div>
- </div>
- <div className="common">
- <div>
- <DetailTitle>{trans("themeDetail.margin")}</DetailTitle>
- <ColorPicker
- colorKey="margin"
- name={trans("themeDetail.margin")}
- desc={trans("themeDetail.marginDesc")}
- margin={this.state.theme.margin}
- configChange={(params) => {
- this.configChange(params);
- }}
- />
- </div>
- <div>
- <DetailTitle>{trans("themeDetail.padding")}</DetailTitle>
- <ColorPicker
- colorKey="padding"
- name={trans("themeDetail.padding")}
- desc={trans("themeDetail.paddingDesc")}
- padding={this.state.theme.padding}
- configChange={(params) => {
- this.configChange(params);
- }}
- />
- </div>
- <div>
- <DetailTitle>{trans("themeDetail.gridColumns")}</DetailTitle>
- <ColorPicker
- colorKey="gridColumns"
- name={trans("themeDetail.gridColumns")}
- desc={trans("themeDetail.gridColumnsDesc")}
- gridColumns={this.state.theme.gridColumns}
- configChange={(params) => {
- this.configChange(params);
+ <ThemeSettingsView>
+ <StyleThemeSettingsCover>
+ <ColorPickerCompIcon width={"36px"} style={{marginRight : "10px"}}/> <h2 style={{color: "#ffffff", marginTop : "8px"}}> {trans("theme.mainColor")}</h2>
+ </StyleThemeSettingsCover>
+ <Card style={{ marginBottom: "20px", minHeight : "200px" }}>
+ <Flex gap={"middle"}>
+ <List
+ bordered
+ dataSource={colorSettings}
+ renderItem={(item) => (
+ <>
+ {item.title && (
+ <List.Item>
+ <DetailTitle>{item.title}</DetailTitle>
+ </List.Item>
+ )}
+ {item.items.map((colorItem) => (
+ <Tooltip title={colorItem.desc} placement="right">
+ <List.Item key={colorItem.settingsKey}>
+ <ThemeSettingsSelector
+ themeSettingKey={colorItem.settingsKey}
+ name={colorItem.name}
+ // desc={colorItem.desc}
+ color={colorItem.color}
+ configChange={(params) => {
+ this.configChange(params);
+ }}
+ />
+ </List.Item>
+ </Tooltip>
+ ))}
+ </>
+ )}
+ />
+ <Divider type="vertical" style={{height: "610px"}}/>
+ <PreviewApp style={{marginTop: '3px', height: "620px", width: "100%"}} theme={this.state.theme} dsl={dsl} />
+ </Flex>
+ </Card>
+ </ThemeSettingsView>
+
+ <ThemeSettingsView>
+ <StyleThemeSettingsCover>
+ <TextSizeIcon width={"36px"} style={{marginRight : "10px"}}/> <h2 style={{color: "#ffffff", marginTop : "8px"}}> {trans("theme.fonts")}</h2>
+ </StyleThemeSettingsCover>
+ <Card style={{ marginBottom: "20px", minHeight : "200px" }}>
+ <Flex gap={"middle"}>
+ <List
+ bordered
+ dataSource={fontSettings}
+ renderItem={(item) => (
+ <>
+ {item.title && (
+ <List.Item>
+ <DetailTitle>{item.title}</DetailTitle>
+ </List.Item>
+ )}
+ {item.items.map((layoutSettingsItem) => (
+ <Tooltip title={layoutSettingsItem.desc} placement="right">
+ <List.Item key={layoutSettingsItem.settingsKey}>
+ {layoutSettingsItem.type == "fontFamily" &&
+ <ThemeSettingsSelector
+ themeSettingKey={layoutSettingsItem.settingsKey}
+ name={layoutSettingsItem.name}
+ fontFamily={layoutSettingsItem.value}
+ configChange={(params) => {
+ this.configChange(params);
+ }}/>
+ }
+ </List.Item>
+ <List.Item>
+ <div style={{ width: "200px", color: "#aaa"}}>Currently, the preview of Font-Family here in the Theme Settings may now show the right font. However, the Font Family Attribute comes into effect in all your apps, which uses this Theme.
+ <br/><br/><a href="https://docs.lowcoder.cloud/lowcoder-documentation/build-applications/themes-and-styling#demo-2-custom-font-family" target="_blank">Remember, you neded to set the CSS inclue at App- or Workspace Level</a></div>
+ </List.Item>
+ </Tooltip>
+ ))}
+ </>
+ )}
+ />
+ <Divider type="vertical" style={{height: "610px"}}/>
+ <PreviewApp style={{marginTop: '3px', height: "620px", width: "100%"}} theme={this.state.theme} dsl={dsl} />
+ </Flex>
+ </Card>
+ </ThemeSettingsView>
+
+ <ThemeSettingsView>
+ <StyleThemeSettingsCover>
+ <PageLayoutCompIcon width={"36px"} style={{marginRight : "10px"}}/> <h2 style={{color: "#ffffff", marginTop : "8px"}}> {trans("theme.layout")}</h2>
+ </StyleThemeSettingsCover>
+ <Card style={{ marginBottom: "20px", minHeight : "200px" }}>
+ <Flex gap={"middle"}>
+ <List
+ bordered
+ dataSource={layoutSettings}
+ renderItem={(item) => (
+ <>
+ {item.title && (
+ <List.Item>
+ <DetailTitle>{item.title}</DetailTitle>
+ </List.Item>
+ )}
+ {item.items.map((layoutSettingsItem) => (
+ <Tooltip title={layoutSettingsItem.desc} placement="right">
+ <List.Item key={layoutSettingsItem.settingsKey}>
+ {layoutSettingsItem.type == "radius" &&
+ <ThemeSettingsSelector
+ themeSettingKey={layoutSettingsItem.settingsKey}
+ name={layoutSettingsItem.name}
+ radius={layoutSettingsItem.value}
+ configChange={(params) => {
+ this.configChange(params);
+ }}
+ />
+ }
+ {layoutSettingsItem.type == "borderWidth" &&
+ <ThemeSettingsSelector
+ themeSettingKey={layoutSettingsItem.settingsKey}
+ name={layoutSettingsItem.name}
+ borderWidth={layoutSettingsItem.value}
+ configChange={(params) => {
+ this.configChange(params);
+ }}
+ />
+ }
+ {layoutSettingsItem.type == "borderStyle" &&
+ <ThemeSettingsSelector
+ themeSettingKey={layoutSettingsItem.settingsKey}
+ name={layoutSettingsItem.name}
+ borderStyle={layoutSettingsItem.value}
+ configChange={(params) => {
+ this.configChange(params);
+ }}
+ />
+ }
+ {layoutSettingsItem.type == "margin" &&
+ <ThemeSettingsSelector
+ themeSettingKey={layoutSettingsItem.settingsKey}
+ name={layoutSettingsItem.name}
+ margin={layoutSettingsItem.value}
+ configChange={(params) => {
+ this.configChange(params);
+ }}
+ />
+ }
+ {layoutSettingsItem.type == "padding" &&
+ <ThemeSettingsSelector
+ themeSettingKey={layoutSettingsItem.settingsKey}
+ name={layoutSettingsItem.name}
+ padding={layoutSettingsItem.value}
+ configChange={(params) => {
+ this.configChange(params);
+ }}
+ />
+ }
+ {layoutSettingsItem.type == "gridColumns" &&
+ <ThemeSettingsSelector
+ themeSettingKey={layoutSettingsItem.settingsKey}
+ name={layoutSettingsItem.name}
+ gridColumns={layoutSettingsItem.value}
+ configChange={(params) => {
+ this.configChange(params);
+ }}
+ />
+ }
+ </List.Item>
+ </Tooltip>
+ ))}
+ </>
+ )}
+ />
+ <Divider type="vertical" style={{height: "610px"}}/>
+ <PreviewApp style={{marginTop: '3px', height: "620px", width: "100%"}} theme={this.state.theme} dsl={dsl} />
+ </Flex>
+ </Card>
+ </ThemeSettingsView>
+
+ <ThemeSettingsView>
+ <StyleThemeSettingsCover>
+ <ShapesCompIcon width={"36px"} style={{marginRight : "10px"}}/> <h2 style={{color: "#ffffff", marginTop : "8px"}}> {trans("theme.components")}</h2>
+ </StyleThemeSettingsCover>
+ <Card style={{ marginBottom: "20px", minHeight : "200px", height: "690px", overflow: "hidden"}}
+ >
+ <ThemeCompPanel
+ theme={this.state.theme}
+ onCompStyleChange={(
+ compName: string,
+ styleKey: string,
+ compStyle: Record<string, string>
+ ) => {
+ this.setState({
+ theme: {
+ ...this.state.theme,
+ components: {
+ ...this.state.theme.components,
+ [compName]: {
+ ...this.state.theme.components?.[compName],
+ [styleKey]: compStyle,
+ }
+ }
+ },
+ });
}}
/>
- </div>
- </div>
- <PreviewApp style={{marginTop: '3px'}} theme={this.state.theme} dsl={dsl} />
- <div className="chart">
- <DetailTitle>{trans("themeDetail.chart")}</DetailTitle>
- <ChartDesc>
- {trans("themeDetail.chartDesc")}
- <a target="_blank" href="https://echarts.apache.org/en/theme-builder.html" rel="noreferrer">
- {" "}
- {trans("themeDetail.echartsJson")}
- </a>
- </ChartDesc>
- <ChartInput>
- <div className="code-editor">
- <CodeEditor
- value={this.state.theme.chart || ""}
- onChange={(value) => this.configChange({
- colorKey: "chart",
- chart: value.doc.toString() ? value.doc.toString() : undefined,
- })}
- styleName="higher"
- codeType="Function"
- showLineNum
- bordered
- />
- </div>
- </ChartInput>
- </div>
- <PreviewApp
- style={{ height: "346px", margin: "20px 0 8px 0" }}
- theme={this.state.theme}
- dsl={chartDsl}
- />
+ </Card>
+ </ThemeSettingsView>
+
+ <ThemeSettingsView>
+ <StyleThemeSettingsCover>
+ <ChartCompIcon width={"36px"} style={{marginRight : "10px"}}/> <h2 style={{color: "#ffffff", marginTop : "8px"}}> {trans("theme.charts")}</h2>
+ </StyleThemeSettingsCover>
+ <Card style={{ marginBottom: "20px", minHeight : "200px" }}>
+ <Flex gap={"middle"}>
+ <ChartInput>
+ <List
+ bordered>
+ <List.Item>
+ <div style={{width: "210px"}}>
+ {trans("themeDetail.chartDesc")}
+ <a target="_blank" href="https://echarts.apache.org/en/theme-builder.html" rel="noreferrer">
+ {" "}
+ {trans("themeDetail.echartsJson")}
+ </a>
+ </div>
+ </List.Item>
+ <List.Item style={{width : "260px", height: "370px", padding:"10px"}}>
+ <CodeEditor
+ value={this.state.theme.chart || ""}
+ onChange={(value) => this.configChange({
+ themeSettingKey: "chart",
+ chart: value.doc.toString() ? value.doc.toString() : undefined,
+ })}
+ styleName="window"
+ codeType="PureJSON"
+ showLineNum={false}
+ bordered
+ />
+ </List.Item>
+ </List>
+ </ChartInput>
+ <Divider type="vertical" style={{height: "370px"}}/>
+ <PreviewApp style={{ height: "380px", width: "100%", margin: "0" }} theme={this.state.theme} dsl={chartDsl} />
+ </Flex>
+ </Card>
+ </ThemeSettingsView>
+
</DetailContent>
+
<Footer ref={this.footerRef} className="no-bottom">
<ResetButton
icon={<ResetIcon />}
diff --git a/client/packages/lowcoder/src/pages/setting/theme/styledComponents.tsx b/client/packages/lowcoder/src/pages/setting/theme/styledComponents.tsx
index 4974c3fee..42513c143 100644
--- a/client/packages/lowcoder/src/pages/setting/theme/styledComponents.tsx
+++ b/client/packages/lowcoder/src/pages/setting/theme/styledComponents.tsx
@@ -82,7 +82,7 @@ export const ColumnName = styled(InlineFlexAlignCenter)`
`;
export const DetailContent = styled.div`
- max-width: 672px;
+ max-width: 95%;
margin-left: 24px;
padding-bottom: 80px;
.common {
@@ -126,7 +126,7 @@ export const Footer = styled.div`
bottom: 0;
width: calc(100vw - 492px);
background-color: #fff;
- z-index: 1;
+ z-index: 1000;
margin-right: 10px;
&.no-bottom {
box-shadow: 0 -6px 10px -6px rgba(0, 0, 0, 0.1);
@@ -134,7 +134,10 @@ export const Footer = styled.div`
`;
export const Header = styled.div`
- margin: 0 0 37px 24px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin: 0 24px 37px 24px;
`;
export const DetailTitle = styled.div`
@@ -676,7 +679,18 @@ export const Padding = styled.div<{ $padding: string }>`
}
}`
// Added By Aqib Mirza
-export const GridColumns = styled.div<{ $gridColumns: string }>`
+export const GridColumns = styled.div<{ $gridColumns: string }>`
+ > div {
+ margin: 3px;
+ overflow: hidden;
+ > svg {
+ fill: currentColor;
+ }
+ }
+ }
+`;
+
+export const BorderStyle = styled.div<{ $borderStyle: string }>`
> div {
margin: 3px;
overflow: hidden;
@@ -686,3 +700,15 @@ export const GridColumns = styled.div<{ $gridColumns: string }>`
}
}
`;
+
+export const BorderWidth = styled.div<{ $borderWidth: string }>`
+ > div {
+ margin: 3px;
+ overflow: hidden;
+ > svg {
+ fill: currentColor;
+ }
+ }
+ }
+`;
+
diff --git a/client/packages/lowcoder/src/pages/setting/theme/themeConstant.tsx b/client/packages/lowcoder/src/pages/setting/theme/themeConstant.tsx
index 729d8b788..a68d453d1 100644
--- a/client/packages/lowcoder/src/pages/setting/theme/themeConstant.tsx
+++ b/client/packages/lowcoder/src/pages/setting/theme/themeConstant.tsx
@@ -27,7 +27,7 @@ export const themeTemplateList = [
textLight: "#FFFFFF",
canvas: "#F5F5F6",
primarySurface: "#FFFFFF",
- borderRadius: "4px",
+ radius: "4px",
chart: JSON.stringify(ChartTheme, null, 2),
gridColumns: "24", //Added By Aqib Mirza
margin: "3px",
@@ -44,7 +44,7 @@ export const themeTemplateList = [
textLight: "#FFFFFF",
canvas: "#29324F",
primarySurface: "#495780",
- borderRadius: "4px",
+ radius: "4px",
chart: JSON.stringify(ChartYellowTheme, null, 2),
gridColumns: "24", //Added By Aqib Mirza
margin: "3px",
@@ -61,7 +61,7 @@ export const themeTemplateList = [
textLight: "#FFFFFF",
canvas: "#F5F5F6",
primarySurface: "#FFFFFF",
- borderRadius: "4px",
+ radius: "4px",
chart: JSON.stringify(ChartGreenTheme, null, 2),
gridColumns: "24", //Added By Aqib Mirza
margin: "3px",
diff --git a/client/packages/lowcoder/src/util/hooks.ts b/client/packages/lowcoder/src/util/hooks.ts
index ca67a902f..4c9227423 100644
--- a/client/packages/lowcoder/src/util/hooks.ts
+++ b/client/packages/lowcoder/src/util/hooks.ts
@@ -17,6 +17,10 @@ import { EditorContext } from "comps/editorState";
import { getDataSourceStructures } from "redux/selectors/datasourceSelectors";
import { DatasourceStructure } from "api/datasourceApi";
import { loadAuthSearchParams } from "pages/userAuth/authUtils";
+import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+import { CompTypeContext } from "@lowcoder-ee/comps/utils/compTypeContext";
+import { setInitialCompStyles } from "@lowcoder-ee/comps/utils/themeUtil";
+import { CompAction, changeChildAction } from "lowcoder-core";
export const ForceViewModeContext = React.createContext<boolean>(false);
@@ -162,3 +166,29 @@ export function useMetaData(datasourceId: string) {
[datasourceStructure, datasourceId]
);
}
+
+
+export function useMergeCompStyles(
+ props: Record<string, any>,
+ dispatch: (action: CompAction) => void
+) {
+ const theme = useContext(ThemeContext);
+ const compType = useContext(CompTypeContext);
+ const compTheme = theme?.theme?.components?.[compType];
+ const themeId = theme?.themeId;
+
+ const styleKeys = Object.keys(props).filter(key => key.toLowerCase().endsWith('style'));
+ const styleProps: Record<string, any> = {};
+ styleKeys.forEach((key: string) => {
+ styleProps[key] = (props as any)[key];
+ });
+
+ useEffect(() => {
+ setInitialCompStyles({
+ dispatch,
+ compTheme,
+ styleProps,
+ themeId,
+ });
+ }, []);
+}
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/util/permissionUtils.ts b/client/packages/lowcoder/src/util/permissionUtils.ts
index 8ae8b0916..dd02745a6 100644
--- a/client/packages/lowcoder/src/util/permissionUtils.ts
+++ b/client/packages/lowcoder/src/util/permissionUtils.ts
@@ -1,8 +1,9 @@
-import { ADMIN_ROLE } from "constants/orgConstants";
+import { ADMIN_ROLE} from "constants/orgConstants";
import { ApplicationMeta } from "constants/applicationConstants";
import { User } from "constants/userConstants";
-export function currentOrgAdmin(user: User) {
+
+export function currentOrgAdmin(user: User) {
return user.orgRoleMap.get(user.currentOrgId) === ADMIN_ROLE;
}
diff --git a/client/packages/lowcoder/tsconfig.json b/client/packages/lowcoder/tsconfig.json
index cf5a20f77..6276f8966 100644
--- a/client/packages/lowcoder/tsconfig.json
+++ b/client/packages/lowcoder/tsconfig.json
@@ -20,4 +20,4 @@
"baseUrl": "./src"
},
"include": ["src"]
-}
+}
\ No newline at end of file
diff --git a/client/packages/lowcoder/vite.config.mts b/client/packages/lowcoder/vite.config.mts
index ab04ca212..002e60741 100644
--- a/client/packages/lowcoder/vite.config.mts
+++ b/client/packages/lowcoder/vite.config.mts
@@ -12,12 +12,12 @@ import dynamicImport from 'vite-plugin-dynamic-import';
import { ensureLastSlash } from "./src/dev-utils/util";
import { buildVars } from "./src/dev-utils/buildVars";
import { globalDepPlugin } from "./src/dev-utils/globalDepPlguin";
-import { nodePolyfills } from 'vite-plugin-node-polyfills'
+// import { nodePolyfills } from 'vite-plugin-node-polyfills'
dotenv.config();
const apiProxyTarget = process.env.LOWCODER_API_SERVICE_URL;
-const nodeServiceApiProxyTarget = process.env.NODE_SERVICE_API_PROXY_TARGET;
+const nodeServiceApiProxyTarget = process.env.LOWCODER_NODE_SERVICE_URL;
const nodeEnv = process.env.NODE_ENV ?? "development";
const isDev = nodeEnv === "development";
const isVisualizerEnabled = !!process.env.ENABLE_VISUALIZER;
@@ -110,6 +110,10 @@ export const viteConfig: UserConfig = {
javascriptEnabled: true,
},
},
+ modules: {
+ // Configuration for CSS modules
+ scopeBehaviour: 'local' // Ensures CSS modules are scoped locally by default
+ }
},
server: {
open: true,
@@ -158,7 +162,7 @@ export const viteConfig: UserConfig = {
}),
isVisualizerEnabled && visualizer(),
dynamicImport(),
- nodePolyfills({ include: ['process'] }),
+ ({ include: ['process'] }),
].filter(Boolean),
};
diff --git a/client/yarn.lock b/client/yarn.lock
index 4a4779423..da01c542b 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -3531,9 +3531,9 @@ __metadata:
languageName: node
linkType: hard
-"@rjsf/antd@npm:^5.15.1":
- version: 5.18.3
- resolution: "@rjsf/antd@npm:5.18.3"
+"@rjsf/antd@npm:^5.18.6":
+ version: 5.18.6
+ resolution: "@rjsf/antd@npm:5.18.6"
dependencies:
classnames: ^2.5.1
lodash: ^4.17.21
@@ -3546,13 +3546,13 @@ __metadata:
antd: ^4.24.0 || ^5.8.5
dayjs: ^1.8.0
react: ^16.14.0 || >=17
- checksum: 874ffe1e5b21a3b997788d63e9e35ae9364b162dfa0d274faedb3f50f7ba4ff4cdb97dd4a4fa8dbe672d705ba3cfd11814e1c1d2832c0f922311ba0c905ba67b
+ checksum: f33ce6a7807f6dd1adf52d4b25040317dc054c76cdb8f96a270f6211c84c1dc196eadd973c8bedadaac4345f3ff6b47e17fe008b6a8f792a6e79040436e545fe
languageName: node
linkType: hard
-"@rjsf/core@npm:^5.15.1":
- version: 5.18.3
- resolution: "@rjsf/core@npm:5.18.3"
+"@rjsf/core@npm:^5.18.6":
+ version: 5.18.6
+ resolution: "@rjsf/core@npm:5.18.6"
dependencies:
lodash: ^4.17.21
lodash-es: ^4.17.21
@@ -3562,13 +3562,13 @@ __metadata:
peerDependencies:
"@rjsf/utils": ^5.18.x
react: ^16.14.0 || >=17
- checksum: 370586a38e6557367281cd3e6292abf4391a24ed3d7c19b02478a45ca5aeb337363f54d841a7077b1403a24014bb1969d568976f12220b3ccd1a076ed4875397
+ checksum: f07b25e34b3f3388fae1fbbf362b191000b3012d223e562699f9b11932d3378c422fc4abe5485c256b5023f8ecb43f071412b7e273af94272a1ee4067c308d44
languageName: node
linkType: hard
-"@rjsf/utils@npm:^5.15.1":
- version: 5.18.3
- resolution: "@rjsf/utils@npm:5.18.3"
+"@rjsf/utils@npm:^5.18.6":
+ version: 5.18.6
+ resolution: "@rjsf/utils@npm:5.18.6"
dependencies:
json-schema-merge-allof: ^0.8.1
jsonpointer: ^5.0.1
@@ -3577,13 +3577,13 @@ __metadata:
react-is: ^18.2.0
peerDependencies:
react: ^16.14.0 || >=17
- checksum: 36f6574836e8ccad27b8215f940cb86b1a02939d325e0223a8d8e70b9ae65245e6649dd4835a40e628153f26d961a5cfbdd6c0bdd7b70a80f7cb1911357f78ff
+ checksum: 02d4590abc9d1ae313d222db48fcb0f6e5bf9558ef5a2e1a2c552e8ec21e44a4f32c9fbbc7539c1158216d6627068fd7b81957b78958b69f49de4b81a03a8cce
languageName: node
linkType: hard
-"@rjsf/validator-ajv8@npm:^5.15.1":
- version: 5.18.3
- resolution: "@rjsf/validator-ajv8@npm:5.18.3"
+"@rjsf/validator-ajv8@npm:^5.18.6":
+ version: 5.18.6
+ resolution: "@rjsf/validator-ajv8@npm:5.18.6"
dependencies:
ajv: ^8.12.0
ajv-formats: ^2.1.1
@@ -3591,7 +3591,7 @@ __metadata:
lodash-es: ^4.17.21
peerDependencies:
"@rjsf/utils": ^5.18.x
- checksum: 628ea27aeab7cc0735be7d7121d66cb2edaa5835a6dbd18f745391722c8e008d00ed771b526881fcd5c0d6ba42f52c8ef691ee1f14698d41fd50595f9595384d
+ checksum: 04856ae0ae6f40748545130b1fb8628f5f4cc0fca60a30aa7b977a01a52150c42a003ea77c6f4d603b346d7fd3cba223f8ffb9c60f4b84063a9c29999ef436fb
languageName: node
linkType: hard
@@ -10298,6 +10298,13 @@ coolshapes-react@lowcoder-org/coolshapes-react:
languageName: node
linkType: hard
+"fflate@npm:^0.4.8":
+ version: 0.4.8
+ resolution: "fflate@npm:0.4.8"
+ checksum: 29d8cbe44d5e7f53e7f5a160ac7f9cc025480c7b3bfd85c5f898cbe20dfa2dad4732daa534982664bf30b35896a90af44ea33ede5d94c5ffd1b8b0c0a0a56ca2
+ languageName: node
+ linkType: hard
+
"file-entry-cache@npm:^6.0.1":
version: 6.0.1
resolution: "file-entry-cache@npm:6.0.1"
@@ -13726,6 +13733,7 @@ coolshapes-react@lowcoder-org/coolshapes-react:
lowcoder-cli: "workspace:^"
mq-polyfill: ^1.1.8
number-precision: ^1.6.0
+ posthog-js: ^1.144.2
prettier: ^3.1.0
react-countup: ^6.5.3
react-player: ^2.11.0
@@ -13822,10 +13830,10 @@ coolshapes-react@lowcoder-org/coolshapes-react:
"@fortawesome/free-solid-svg-icons": ^6.5.1
"@fortawesome/react-fontawesome": latest
"@manaflair/redux-batch": ^1.0.0
- "@rjsf/antd": ^5.15.1
- "@rjsf/core": ^5.15.1
- "@rjsf/utils": ^5.15.1
- "@rjsf/validator-ajv8": ^5.15.1
+ "@rjsf/antd": ^5.18.6
+ "@rjsf/core": ^5.18.6
+ "@rjsf/utils": ^5.18.6
+ "@rjsf/validator-ajv8": ^5.18.6
"@types/core-js": ^2.5.5
"@types/intl": ^1.2.1
"@types/lodash": ^4.14.194
@@ -13876,6 +13884,7 @@ coolshapes-react@lowcoder-org/coolshapes-react:
react-documents: ^1.2.1
react-dom: ^18.2.0
react-draggable: ^4.4.4
+ react-error-boundary: ^4.0.13
react-grid-layout: ^1.3.0
react-helmet: ^6.1.0
react-joyride: ^2.4.0
@@ -16028,6 +16037,24 @@ coolshapes-react@lowcoder-org/coolshapes-react:
languageName: node
linkType: hard
+"posthog-js@npm:^1.144.2":
+ version: 1.144.2
+ resolution: "posthog-js@npm:1.144.2"
+ dependencies:
+ fflate: ^0.4.8
+ preact: ^10.19.3
+ web-vitals: ^4.0.1
+ checksum: c856f49a34b825eb0678b40e137affa4a79a29ff64205f059a9a0ad78ce6ac8b3d8413f955e3fa72b08cf91e923e443aedb7e41b2e40c76c1cab20b88fe1c3d7
+ languageName: node
+ linkType: hard
+
+"preact@npm:^10.19.3":
+ version: 10.22.1
+ resolution: "preact@npm:10.22.1"
+ checksum: 8762645766b1c057eaf9a58ff904b6659ffa7a7d33eb94dc2b96ff1ba08743855c3ade913dfbe9e8da994777aa9f4f5e9f23d39886340f23eaebcd98f5e107e5
+ languageName: node
+ linkType: hard
+
"preact@npm:~10.12.1":
version: 10.12.1
resolution: "preact@npm:10.12.1"
@@ -17032,6 +17059,17 @@ coolshapes-react@lowcoder-org/coolshapes-react:
languageName: node
linkType: hard
+"react-error-boundary@npm:^4.0.13":
+ version: 4.0.13
+ resolution: "react-error-boundary@npm:4.0.13"
+ dependencies:
+ "@babel/runtime": ^7.12.5
+ peerDependencies:
+ react: ">=16.13.1"
+ checksum: 50398d080015d51d22c6f94c56f4ea336d10232d72345b36ee6f15b6b643666d20b072829b02f091a80e5af68fe67f68a62ef0d2b649dbd759ead929304449af
+ languageName: node
+ linkType: hard
+
"react-fast-compare@npm:^3.0.1, react-fast-compare@npm:^3.1.1, react-fast-compare@npm:^3.2.2":
version: 3.2.2
resolution: "react-fast-compare@npm:3.2.2"
@@ -21081,6 +21119,13 @@ coolshapes-react@lowcoder-org/coolshapes-react:
languageName: node
linkType: hard
+"web-vitals@npm:^4.0.1":
+ version: 4.2.1
+ resolution: "web-vitals@npm:4.2.1"
+ checksum: 556989af90814c6a88eaeea57f778414b26e39d8857173a03e240f62e9cf732090acc97fba38f34f760bde086fef5ee90969920ff1ab3a185518176723589cb8
+ languageName: node
+ linkType: hard
+
"web-worker@npm:^1.2.0":
version: 1.3.0
resolution: "web-worker@npm:1.3.0"
diff --git a/deploy/helm/templates/api-service/configMap.yaml b/deploy/helm/templates/api-service/configMap.yaml
index 6cbb38ca2..f48801bc4 100644
--- a/deploy/helm/templates/api-service/configMap.yaml
+++ b/deploy/helm/templates/api-service/configMap.yaml
@@ -1,6 +1,9 @@
{{- $nameSpace := include "lowcoder.namespace" . -}}
{{- $name := include "lowcoder.fullname" . -}}
{{- $lowcoderDatabase := first .Values.mongodb.auth.databases -}}
+{{- $redisSecret := lookup "v1" "Secret" $nameSpace .Values.redis.auth.existingSecret | default dict -}}
+{{- $redisPassword := (index $redisSecret.data .Values.redis.auth.existingSecretPasswordKey | default "" | b64dec) -}}
+
apiVersion: v1
kind: ConfigMap
metadata:
@@ -13,9 +16,17 @@ metadata:
{{- end }}
data:
{{- if .Values.redis.enabled }}
+ {{- if .Values.redis.auth.enabled }}
+ LOWCODER_REDIS_URL: "redis://{{ $redisPassword }}@{{ $name }}-redis-master.{{ $nameSpace }}.svc.cluster.local:6379"
+ {{- else }}
LOWCODER_REDIS_URL: "redis://{{ $name }}-redis-master.{{ $nameSpace }}.svc.cluster.local:6379"
+ {{- end }}
{{- else }}
- LOWCODER_REDIS_URL: {{ .Values.redis.externalUrl | quote }}
+ {{- if .Values.redis.auth.enabled }}
+ LOWCODER_REDIS_URL: "redis://{{ $redisPassword }}@{{ .Values.redis.externalUrl }}"
+ {{- else }}
+ LOWCODER_REDIS_URL: "redis://{{ .Values.redis.externalUrl }}"
+ {{- end }}
{{- end }}
{{- if .Values.global.config.nodeServiceUrl }}
LOWCODER_NODE_SERVICE_URL: {{ .Values.global.config.nodeServiceUrl | quote }}
diff --git a/deploy/helm/templates/api-service/secrets.yaml b/deploy/helm/templates/api-service/secrets.yaml
index d900bd1bf..a68705937 100644
--- a/deploy/helm/templates/api-service/secrets.yaml
+++ b/deploy/helm/templates/api-service/secrets.yaml
@@ -1,8 +1,12 @@
{{- $nameSpace := include "lowcoder.namespace" . -}}
-{{- $mongoUser := first .Values.mongodb.auth.usernames -}}
-{{- $mongoPassword := first .Values.mongodb.auth.passwords -}}
-{{- $mongoServicename := .Values.mongodb.service.nameOverride -}}
+{{- $mongoUser := (and .Values.mongodb.auth.usernames (first .Values.mongodb.auth.usernames)) | default "" -}}
+{{- $mongoPassword := (and .Values.mongodb.auth.passwords (first .Values.mongodb.auth.passwords)) | default "" -}}
{{- $lowcoderDatabase := first .Values.mongodb.auth.databases -}}
+{{- $mongoSecret := lookup "v1" "Secret" $nameSpace .Values.mongodb.auth.existingSecret | default dict -}}
+{{- $mongoSecretPassword := (index $mongoSecret.data "password" | default "" | b64dec) -}}
+{{- $mongoServicename := .Values.mongodb.service.nameOverride | default "" -}}
+{{- $externalUrl := .Values.mongodb.service.externalUrl -}}
+
apiVersion: v1
kind: Secret
type: Opaque
@@ -18,7 +22,7 @@ stringData:
{{- if .Values.mongodb.enabled }}
LOWCODER_MONGODB_URL: "mongodb://{{ $mongoUser }}:{{ $mongoPassword }}@{{ $mongoServicename }}.{{ $nameSpace }}.svc.cluster.local/{{ $lowcoderDatabase }}?retryWrites=true&ssl=false"
{{- else }}
- LOWCODER_MONGODB_URL: {{ .Values.mongodb.externalUrl | quote }}
+ LOWCODER_MONGODB_URL: "mongodb://{{ $mongoUser }}:{{ $mongoSecretPassword }}@{{ $externalUrl }}/{{ $lowcoderDatabase }}?retryWrites=true&ssl=false"
{{- end }}
LOWCODER_DB_ENCRYPTION_PASSWORD: {{ .Values.global.config.encryption.password | default "lowcoder.org" | quote }}
LOWCODER_DB_ENCRYPTION_SALT: {{ .Values.global.config.encryption.salt | default "lowcoder.org" | quote }}
diff --git a/server/api-service/lowcoder-domain/pom.xml b/server/api-service/lowcoder-domain/pom.xml
index 84a6a116e..7b9b3cc6d 100644
--- a/server/api-service/lowcoder-domain/pom.xml
+++ b/server/api-service/lowcoder-domain/pom.xml
@@ -262,6 +262,11 @@
<artifactId>jaxb-runtime</artifactId>
</dependency>
<!-- oss-->
+ <dependency>
+ <groupId>com.github.f4b6a3</groupId>
+ <artifactId>uuid-creator</artifactId>
+ <version>5.2.0</version>
+ </dependency>
</dependencies>
<build>
diff --git a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/application/model/Application.java b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/application/model/Application.java
index 9b95c7190..8754d460f 100644
--- a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/application/model/Application.java
+++ b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/application/model/Application.java
@@ -1,17 +1,10 @@
package org.lowcoder.domain.application.model;
-import static com.google.common.base.Suppliers.memoize;
-import static java.util.Optional.ofNullable;
-import static org.lowcoder.domain.application.ApplicationUtil.getContainerSizeFromDSL;
-import static org.lowcoder.domain.application.ApplicationUtil.getDependentModulesFromDsl;
-
-import java.util.Collections;
-import java.util.Map;
-import java.util.Optional;
-import java.util.Set;
-import java.util.function.Supplier;
-
+import com.fasterxml.jackson.annotation.JsonIgnore;
+import com.fasterxml.jackson.annotation.JsonProperty;
+import com.github.f4b6a3.uuid.UuidCreator;
+import lombok.Getter;
import lombok.NoArgsConstructor;
import lombok.Setter;
import lombok.experimental.SuperBuilder;
@@ -25,19 +18,26 @@
import org.lowcoder.sdk.util.JsonUtils;
import org.springframework.data.annotation.Transient;
import org.springframework.data.mongodb.core.mapping.Document;
+import org.springframework.util.StringUtils;
-import com.fasterxml.jackson.annotation.JsonCreator;
-import com.fasterxml.jackson.annotation.JsonIgnore;
-import com.fasterxml.jackson.annotation.JsonProperty;
+import java.util.Collections;
+import java.util.Map;
+import java.util.Optional;
+import java.util.Set;
+import java.util.function.Supplier;
-import lombok.Builder;
+import static com.google.common.base.Suppliers.memoize;
+import static java.util.Optional.ofNullable;
+import static org.lowcoder.domain.application.ApplicationUtil.getContainerSizeFromDSL;
+import static org.lowcoder.domain.application.ApplicationUtil.getDependentModulesFromDsl;
@Document
@Jacksonized
@SuperBuilder
@NoArgsConstructor
public class Application extends HasIdAndAuditing {
-
+ @Getter
+ private String gid;
private String organizationId;
private String name;
private Integer applicationType;
@@ -55,6 +55,7 @@ public class Application extends HasIdAndAuditing {
public Application(
@JsonProperty("orgId") String organizationId,
+ @JsonProperty("gid") String gid,
@JsonProperty("name") String name,
@JsonProperty("applicationType") Integer applicationType,
@JsonProperty("applicationStatus") ApplicationStatus applicationStatus,
@@ -64,6 +65,7 @@ public Application(
@JsonProperty("publicToMarketplace") Boolean publicToMarketplace,
@JsonProperty("agencyProfile") Boolean agencyProfile
) {
+ this.gid = StringUtils.isEmpty(gid)?UuidCreator.getTimeOrderedEpoch().toString():gid;
this.organizationId = organizationId;
this.name = name;
this.applicationType = applicationType;
@@ -131,7 +133,7 @@ public boolean agencyProfile() {
public ApplicationQuery getQueryByViewModeAndQueryId(boolean isViewMode, String queryId) {
return (isViewMode ? getLiveQueries() : getEditingQueries())
.stream()
- .filter(query -> queryId.equals(query.getId()))
+ .filter(query -> queryId.equals(query.getId()) || queryId.equals(query.getGid()))
.findFirst()
.orElseThrow(() -> new BizException(BizError.QUERY_NOT_FOUND, "LIBRARY_QUERY_NOT_FOUND"));
}
diff --git a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/application/repository/ApplicationRepository.java b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/application/repository/ApplicationRepository.java
index 7c1ad43df..36f6fc96b 100644
--- a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/application/repository/ApplicationRepository.java
+++ b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/application/repository/ApplicationRepository.java
@@ -25,29 +25,37 @@ public interface ApplicationRepository extends ReactiveMongoRepository<Applicati
@Query(fields = "{ publishedApplicationDSL : 0 , editingApplicationDSL : 0 }")
Mono<Application> findById(@Nonnull String id);
+ @Query(fields = "{ publishedApplicationDSL : 0 , editingApplicationDSL : 0 }")
+ Flux<Application> findByGid(@Nonnull String gid);
+
Mono<Long> countByOrganizationIdAndApplicationStatus(String organizationId, ApplicationStatus applicationStatus);
@Query("{$or : [{'publishedApplicationDSL.queries.datasourceId':?0},{'editingApplicationDSL.queries.datasourceId':?0}]}")
Flux<Application> findByDatasourceId(String datasourceId);
Flux<Application> findByIdIn(Collection<String> ids);
+ Flux<Application> findByGidIn(Collection<String> ids);
Flux<Application> findByCreatedByAndIdIn(String userId, Collection<String> ids);
+ Flux<Application> findByCreatedByAndGidIn(String userId, Collection<String> gids);
/**
* Filter public applications from list of supplied IDs
*/
Flux<Application> findByPublicToAllIsTrueAndIdIn(Collection<String> ids);
+ Flux<Application> findByPublicToAllIsTrueAndGidIn(Collection<String> gids);
/**
* Filter marketplace applications from list of supplied IDs
*/
Flux<Application> findByPublicToAllIsTrueAndPublicToMarketplaceIsTrueAndIdIn(Collection<String> ids);
+ Flux<Application> findByPublicToAllIsTrueAndPublicToMarketplaceIsTrueAndGidIn(Collection<String> ids);
/**
* Filter agency applications from list of supplied IDs
*/
Flux<Application> findByPublicToAllIsTrueAndAgencyProfileIsTrueAndIdIn(Collection<String> ids);
+ Flux<Application> findByPublicToAllIsTrueAndAgencyProfileIsTrueAndGidIn(Collection<String> ids);
/**
* Find all marketplace applications
diff --git a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/application/repository/CustomApplicationRepositoryImpl.java b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/application/repository/CustomApplicationRepositoryImpl.java
index e03f3cee1..ee7ddb86b 100644
--- a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/application/repository/CustomApplicationRepositoryImpl.java
+++ b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/application/repository/CustomApplicationRepositoryImpl.java
@@ -1,6 +1,7 @@
package org.lowcoder.domain.application.repository;
import org.lowcoder.domain.application.model.Application;
+import org.lowcoder.sdk.constants.FieldName;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.mongodb.core.ReactiveMongoTemplate;
import org.springframework.data.mongodb.core.query.Criteria;
@@ -25,6 +26,6 @@ public Flux<Application> findByOrganizationIdWithDsl(String organizationId) {
@Override
public Mono<Application> findByIdWithDsl(String applicationId) {
- return reactiveMongoTemplate.findById(applicationId, Application.class);
+ return reactiveMongoTemplate.findOne(new Query(Criteria.where(FieldName.guessFieldNameFromId(applicationId)).is(applicationId)), Application.class);
}
}
diff --git a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/application/service/ApplicationServiceImpl.java b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/application/service/ApplicationServiceImpl.java
index 144b3012a..2475e91ed 100644
--- a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/application/service/ApplicationServiceImpl.java
+++ b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/application/service/ApplicationServiceImpl.java
@@ -61,6 +61,8 @@ public Mono<Application> findByIdWithoutDsl(String id) {
return Mono.error(new BizException(BizError.INVALID_PARAMETER, "INVALID_PARAMETER", FieldName.ID));
}
+ if(FieldName.isGID(id))
+ return Mono.from(repository.findByGid(id)).switchIfEmpty(Mono.error(new BizException(BizError.NO_RESOURCE_FOUND, "CANT_FIND_APPLICATION", id)));
return repository.findById(id)
.switchIfEmpty(Mono.error(new BizException(BizError.NO_RESOURCE_FOUND, "CANT_FIND_APPLICATION", id)));
}
@@ -127,6 +129,8 @@ public Mono<Long> countByOrganizationId(String orgId, ApplicationStatus applicat
@Override
public Flux<Application> findByIdIn(List<String> applicationIds) {
+ if(!applicationIds.isEmpty() && FieldName.isGID(applicationIds.get(0)))
+ return repository.findByGidIn(applicationIds);
return repository.findByIdIn(applicationIds);
}
@@ -256,10 +260,14 @@ public Mono<Set<String>> getFilteredPublicApplicationIds(ApplicationRequestType
@NonEmptyMono
@SuppressWarnings("ReactiveStreamsNullableInLambdaInTransform")
public Mono<Set<String>> getPublicApplicationIds(Collection<String> applicationIds) {
+ if(!applicationIds.isEmpty() && FieldName.isGID(applicationIds.stream().findFirst().get()))
+ return repository.findByPublicToAllIsTrueAndGidIn(applicationIds)
+ .map(Application::getGid)
+ .collect(Collectors.toSet());
return repository.findByPublicToAllIsTrueAndIdIn(applicationIds)
- .map(HasIdAndAuditing::getId)
- .collect(Collectors.toSet());
+ .map(HasIdAndAuditing::getId)
+ .collect(Collectors.toSet());
}
@@ -272,13 +280,14 @@ public Mono<Set<String>> getPublicApplicationIds(Collection<String> applicationI
public Mono<Set<String>> getPrivateApplicationIds(Collection<String> applicationIds, String userId) {
// TODO: in 2.4.0 we need to check whether the app was published or not
- return repository.findByCreatedByAndIdIn(userId, applicationIds)
- .map(HasIdAndAuditing::getId)
- .collect(Collectors.toSet());
+ if(!applicationIds.isEmpty() && FieldName.isGID(applicationIds.stream().findFirst().get()))
+ return repository.findByCreatedByAndGidIn(userId, applicationIds)
+ .map(Application::getGid)
+ .collect(Collectors.toSet());
-// return repository.findByIdIn(applicationIds)
-// .map(HasIdAndAuditing::getId)
-// .collect(Collectors.toSet());
+ return repository.findByCreatedByAndIdIn(userId, applicationIds)
+ .map(HasIdAndAuditing::getId)
+ .collect(Collectors.toSet());
}
@@ -292,6 +301,11 @@ public Mono<Set<String>> getPublicMarketplaceApplicationIds(Collection<String> a
if ((isAnonymous && !isPrivateMarketplace) || !isAnonymous)
{
+ if(!applicationIds.isEmpty() && FieldName.isGID(applicationIds.stream().findFirst().get()))
+ return repository.findByPublicToAllIsTrueAndPublicToMarketplaceIsTrueAndGidIn(applicationIds)
+ .map(Application::getGid)
+ .collect(Collectors.toSet());
+
return repository.findByPublicToAllIsTrueAndPublicToMarketplaceIsTrueAndIdIn(applicationIds)
.map(HasIdAndAuditing::getId)
.collect(Collectors.toSet());
@@ -307,6 +321,11 @@ public Mono<Set<String>> getPublicMarketplaceApplicationIds(Collection<String> a
@SuppressWarnings("ReactiveStreamsNullableInLambdaInTransform")
public Mono<Set<String>> getPublicAgencyApplicationIds(Collection<String> applicationIds) {
+ if(!applicationIds.isEmpty() && FieldName.isGID(applicationIds.stream().findFirst().get()))
+ return repository.findByPublicToAllIsTrueAndAgencyProfileIsTrueAndGidIn(applicationIds)
+ .map(Application::getGid)
+ .collect(Collectors.toSet());
+
return repository.findByPublicToAllIsTrueAndAgencyProfileIsTrueAndIdIn(applicationIds)
.map(HasIdAndAuditing::getId)
.collect(Collectors.toSet());
diff --git a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/bundle/model/Bundle.java b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/bundle/model/Bundle.java
index a11eb134f..cb282f9cf 100644
--- a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/bundle/model/Bundle.java
+++ b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/bundle/model/Bundle.java
@@ -1,14 +1,18 @@
package org.lowcoder.domain.bundle.model;
+import com.github.f4b6a3.uuid.UuidCreator;
import jakarta.annotation.Nullable;
import lombok.Getter;
import lombok.NoArgsConstructor;
import lombok.Setter;
import lombok.experimental.SuperBuilder;
+import org.apache.commons.lang3.BooleanUtils;
import org.lowcoder.sdk.models.HasIdAndAuditing;
import org.springframework.data.mongodb.core.mapping.Document;
+import java.util.UUID;
+
import java.util.Map;
@Getter
@@ -17,6 +21,8 @@
@NoArgsConstructor
@SuperBuilder
public class Bundle extends HasIdAndAuditing {
+ @Getter
+ private String gid;
private String organizationId;
@Nullable
private String name;
@@ -32,4 +38,16 @@ public class Bundle extends HasIdAndAuditing {
private Map<String, Object> editingBundleDSL;
private Map<String, Object> publishedBundleDSL;
+
+ public boolean isPublicToAll() {
+ return BooleanUtils.toBooleanDefaultIfNull(publicToAll, false);
+ }
+
+ public boolean isPublicToMarketplace() {
+ return BooleanUtils.toBooleanDefaultIfNull(publicToMarketplace, false);
+ }
+
+ public boolean agencyProfile() {
+ return BooleanUtils.toBooleanDefaultIfNull(agencyProfile, false);
+ }
}
diff --git a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/bundle/repository/BundleRepository.java b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/bundle/repository/BundleRepository.java
index 862b7468c..70180fb06 100644
--- a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/bundle/repository/BundleRepository.java
+++ b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/bundle/repository/BundleRepository.java
@@ -1,29 +1,37 @@
package org.lowcoder.domain.bundle.repository;
+import jakarta.annotation.Nonnull;
import org.lowcoder.domain.bundle.model.Bundle;
import org.springframework.data.mongodb.repository.ReactiveMongoRepository;
import org.springframework.stereotype.Repository;
import reactor.core.publisher.Flux;
+import reactor.core.publisher.Mono;
import java.util.Collection;
@Repository
public interface BundleRepository extends ReactiveMongoRepository<Bundle, String> {
+ Mono<Void> deleteAllByGid(Collection<String> gids);
+ Flux<Bundle> findByGid(@Nonnull String gid);
Flux<Bundle> findByCreatedBy(String userId);
/**
* Filter marketplace bundles from list of supplied IDs
*/
Flux<Bundle> findByPublicToAllIsTrueAndPublicToMarketplaceIsTrueAndIdIn(Collection<String> ids);
+ Flux<Bundle> findByPublicToAllIsTrueAndPublicToMarketplaceIsTrueAndGidIn(Collection<String> gids);
/**
* Filter public bundles from list of supplied IDs
*/
Flux<Bundle> findByPublicToAllIsTrueAndIdIn(Collection<String> ids);
+ Flux<Bundle> findByPublicToAllIsTrueAndGidIn(Collection<String> gids);
Flux<Bundle> findByCreatedByAndIdIn(String userId, Collection<String> ids);
+ Flux<Bundle> findByCreatedByAndGidIn(String userId, Collection<String> gids);
/**
* Filter agency bundles from list of supplied IDs
*/
Flux<Bundle> findByPublicToAllIsTrueAndAgencyProfileIsTrueAndIdIn(Collection<String> ids);
+ Flux<Bundle> findByPublicToAllIsTrueAndAgencyProfileIsTrueAndGidIn(Collection<String> gids);
Flux<Bundle> findByPublicToAllIsTrueAndPublicToMarketplaceIsTrue();
diff --git a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/bundle/service/BundleService.java b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/bundle/service/BundleService.java
index 024ac041e..646d2eff1 100644
--- a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/bundle/service/BundleService.java
+++ b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/bundle/service/BundleService.java
@@ -9,6 +9,7 @@
import reactor.core.publisher.Mono;
import java.util.Collection;
+import java.util.Map;
import java.util.Set;
public interface BundleService {
@@ -16,6 +17,8 @@ public interface BundleService {
Mono<Bundle> findById(String id);
+ Mono<Bundle> findByIdWithoutDsl(String id);
+
Mono<Bundle> create(Bundle bundle, String userId);
Flux<Bundle> findByUserId(String bundleId);
@@ -23,6 +26,8 @@ public interface BundleService {
Mono<Void> deleteAllById(Collection<String> ids);
Mono<Boolean> exist(String id);
+ Mono<Bundle> publish(String bundleId);
+ Mono<Boolean> updatePublishedBundleDSL(String bundleId, Map<String, Object> bundleDSL);
@NonEmptyMono
@SuppressWarnings("ReactiveStreamsNullableInLambdaInTransform")
diff --git a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/bundle/service/BundleServiceImpl.java b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/bundle/service/BundleServiceImpl.java
index b146bcaca..611f74d4c 100644
--- a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/bundle/service/BundleServiceImpl.java
+++ b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/bundle/service/BundleServiceImpl.java
@@ -2,8 +2,6 @@
import lombok.RequiredArgsConstructor;
import org.apache.commons.lang3.StringUtils;
-import org.lowcoder.domain.application.model.Application;
-import org.lowcoder.domain.application.model.ApplicationRequestType;
import org.lowcoder.domain.bundle.model.Bundle;
import org.lowcoder.domain.bundle.model.BundleRequestType;
import org.lowcoder.domain.bundle.repository.BundleRepository;
@@ -50,10 +48,24 @@ public Mono<Bundle> findById(String id) {
return Mono.error(new BizException(BizError.INVALID_PARAMETER, "INVALID_PARAMETER", FieldName.ID));
}
+ if(FieldName.isGID(id))
+ return Mono.from(repository.findByGid(id))
+ .switchIfEmpty(Mono.error(new BizException(BizError.NO_RESOURCE_FOUND, "BUNDLE_NOT_FOUND", id)));
+
return repository.findById(id)
.switchIfEmpty(Mono.error(new BizException(BizError.NO_RESOURCE_FOUND, "BUNDLE_NOT_FOUND", id)));
}
+ @Override
+ public Mono<Bundle> findByIdWithoutDsl(String id) {
+ if (id == null) {
+ return Mono.error(new BizException(BizError.INVALID_PARAMETER, "INVALID_PARAMETER", FieldName.ID));
+ }
+
+ return repository.findById(id)
+ .switchIfEmpty(Mono.error(new BizException(BizError.NO_RESOURCE_FOUND, "CANT_FIND_BUNDLE", id)));
+ }
+
@Override
public Mono<Bundle> create(Bundle newbundle, String visitorId) {
return repository.save(newbundle)
@@ -67,6 +79,8 @@ public Flux<Bundle> findByUserId(String userId) {
@Override
public Mono<Void> deleteAllById(Collection<String> ids) {
+ if(!ids.isEmpty() && FieldName.isGID(ids.stream().findFirst().get()))
+ return repository.deleteAllByGid(ids);
return repository.deleteAllById(ids);
}
@@ -82,10 +96,24 @@ public Mono<Boolean> exist(String id) {
});
}
+ @Override
+ public Mono<Bundle> publish(String bundleId) {
+ return findById(bundleId)
+ .flatMap(newBundle -> { // copy editingApplicationDSL to publishedApplicationDSL
+ Map<String, Object> editingBundleDSL = newBundle.getEditingBundleDSL();
+ return updatePublishedBundleDSL(bundleId, editingBundleDSL)
+ .thenReturn(newBundle);
+ });
+ }
+
+ @Override
+ public Mono<Boolean> updatePublishedBundleDSL(String bundleId, Map<String, Object> bundleDSL) {
+ Bundle bundle = Bundle.builder().publishedBundleDSL(bundleDSL).build();
+ return mongoUpsertHelper.updateById(bundle, bundleId);
+ }
@Override
@NonEmptyMono
- @SuppressWarnings("ReactiveStreamsNullableInLambdaInTransform")
public Mono<Set<String>> getFilteredPublicBundleIds(BundleRequestType requestType, Collection<String> bundleIds, String userId, Boolean isPrivateMarketplace) {
boolean isAnonymous = StringUtils.isBlank(userId);
switch(requestType)
@@ -116,6 +144,11 @@ public Mono<Set<String>> getFilteredPublicBundleIds(BundleRequestType requestTyp
@SuppressWarnings("ReactiveStreamsNullableInLambdaInTransform")
public Mono<Set<String>> getPublicBundleIds(Collection<String> bundleIds) {
+ if(!bundleIds.isEmpty() && FieldName.isGID(bundleIds.stream().findFirst().get()))
+ return repository.findByPublicToAllIsTrueAndGidIn(bundleIds)
+ .map(Bundle::getGid)
+ .collect(Collectors.toSet());
+
return repository.findByPublicToAllIsTrueAndIdIn(bundleIds)
.map(HasIdAndAuditing::getId)
.collect(Collectors.toSet());
@@ -131,6 +164,10 @@ public Mono<Set<String>> getPublicBundleIds(Collection<String> bundleIds) {
public Mono<Set<String>> getPrivateBundleIds(Collection<String> bundleIds, String userId) {
// TODO: in 2.4.0 we need to check whether the app was published or not
+ if(!bundleIds.isEmpty() && FieldName.isGID(bundleIds.stream().findFirst().get()))
+ return repository.findByCreatedByAndGidIn(userId, bundleIds)
+ .map(Bundle::getGid)
+ .collect(Collectors.toSet());
return repository.findByCreatedByAndIdIn(userId, bundleIds)
.map(HasIdAndAuditing::getId)
.collect(Collectors.toSet());
@@ -149,8 +186,13 @@ public Mono<Set<String>> getPrivateBundleIds(Collection<String> bundleIds, Strin
@SuppressWarnings("ReactiveStreamsNullableInLambdaInTransform")
public Mono<Set<String>> getPublicMarketplaceBundleIds(Collection<String> bundleIds, boolean isAnonymous, boolean isPrivateMarketplace) {
- if ((isAnonymous && !isPrivateMarketplace) || !isAnonymous)
+ if (!isAnonymous || !isPrivateMarketplace)
{
+ if(!bundleIds.isEmpty() && FieldName.isGID(bundleIds.stream().findFirst().get()))
+ return repository.findByPublicToAllIsTrueAndPublicToMarketplaceIsTrueAndGidIn(bundleIds)
+ .map(Bundle::getGid)
+ .collect(Collectors.toSet());
+
return repository.findByPublicToAllIsTrueAndPublicToMarketplaceIsTrueAndIdIn(bundleIds)
.map(HasIdAndAuditing::getId)
.collect(Collectors.toSet());
@@ -166,6 +208,11 @@ public Mono<Set<String>> getPublicMarketplaceBundleIds(Collection<String> bundle
@SuppressWarnings("ReactiveStreamsNullableInLambdaInTransform")
public Mono<Set<String>> getPublicAgencyBundleIds(Collection<String> bundleIds) {
+ if(!bundleIds.isEmpty() && FieldName.isGID(bundleIds.stream().findFirst().get()))
+ return repository.findByPublicToAllIsTrueAndAgencyProfileIsTrueAndGidIn(bundleIds)
+ .map(Bundle::getGid)
+ .collect(Collectors.toSet());
+
return repository.findByPublicToAllIsTrueAndAgencyProfileIsTrueAndIdIn(bundleIds)
.map(HasIdAndAuditing::getId)
.collect(Collectors.toSet());
diff --git a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/datasource/model/Datasource.java b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/datasource/model/Datasource.java
index c5d00b6c8..7bb468f27 100644
--- a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/datasource/model/Datasource.java
+++ b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/datasource/model/Datasource.java
@@ -71,6 +71,7 @@ public class Datasource extends HasIdAndAuditing {
LOWCODER_API.setDetailConfig(LowcoderApiDatasourceConfig.INSTANCE);
}
+ private String gid;
private String name;
private String type;
private String organizationId;
diff --git a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/datasource/model/DatasourceDO.java b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/datasource/model/DatasourceDO.java
index c13e0bace..77e81e761 100644
--- a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/datasource/model/DatasourceDO.java
+++ b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/datasource/model/DatasourceDO.java
@@ -1,19 +1,16 @@
package org.lowcoder.domain.datasource.model;
-import java.util.Map;
-
-import com.fasterxml.jackson.annotation.JsonCreator;
+import com.querydsl.core.annotations.QueryExclude;
import lombok.AllArgsConstructor;
+import lombok.Getter;
import lombok.NoArgsConstructor;
+import lombok.Setter;
import lombok.experimental.SuperBuilder;
import lombok.extern.jackson.Jacksonized;
import org.lowcoder.sdk.models.HasIdAndAuditing;
import org.springframework.data.mongodb.core.mapping.Document;
-import com.querydsl.core.annotations.QueryExclude;
-
-import lombok.Getter;
-import lombok.Setter;
+import java.util.Map;
@QueryExclude
@Document(collection = "datasource")
@@ -24,7 +21,7 @@
@NoArgsConstructor
@AllArgsConstructor
public class DatasourceDO extends HasIdAndAuditing {
-
+ private String gid;
private String name;
private String type;
private String organizationId;
diff --git a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/datasource/repository/DatasourceDORepository.java b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/datasource/repository/DatasourceDORepository.java
index bd40fff27..53dc5a895 100644
--- a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/datasource/repository/DatasourceDORepository.java
+++ b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/datasource/repository/DatasourceDORepository.java
@@ -6,6 +6,8 @@
import reactor.core.publisher.Flux;
import reactor.core.publisher.Mono;
+import java.util.Collection;
+
public interface DatasourceDORepository extends ReactiveMongoRepository<DatasourceDO, String> {
Flux<DatasourceDO> findAllByOrganizationId(String organizationId);
@@ -13,4 +15,6 @@ public interface DatasourceDORepository extends ReactiveMongoRepository<Datasour
Mono<DatasourceDO> findByOrganizationIdAndTypeAndCreationSource(String organizationId, String type, int creationSource);
Mono<Long> countByOrganizationId(String organizationId);
+ Flux<DatasourceDO> findByGid(String gid);
+ Flux<DatasourceDO> findAllByGidIn(Collection<String> gid);
}
diff --git a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/datasource/repository/DatasourceRepository.java b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/datasource/repository/DatasourceRepository.java
index d2f573b80..71e6eca55 100644
--- a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/datasource/repository/DatasourceRepository.java
+++ b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/datasource/repository/DatasourceRepository.java
@@ -3,9 +3,7 @@
import static org.lowcoder.sdk.util.JsonUtils.fromJsonMap;
import static org.lowcoder.sdk.util.JsonUtils.toJson;
-import java.util.Collection;
-import java.util.HashSet;
-import java.util.Set;
+import java.util.*;
import java.util.function.Function;
import org.apache.commons.collections4.CollectionUtils;
@@ -18,6 +16,7 @@
import org.lowcoder.domain.plugin.client.DatasourcePluginClient;
import org.lowcoder.domain.plugin.service.DatasourceMetaInfoService;
import org.lowcoder.infra.mongo.MongoUpsertHelper;
+import org.lowcoder.sdk.constants.FieldName;
import org.lowcoder.sdk.models.DatasourceConnectionConfig;
import org.lowcoder.sdk.models.HasIdAndAuditing;
import org.lowcoder.sdk.models.JsDatasourceConnectionConfig;
@@ -56,6 +55,9 @@ public class DatasourceRepository {
private JsDatasourceHelper jsDatasourceHelper;
public Mono<Datasource> findById(String datasourceId) {
+ if(FieldName.isGID(datasourceId))
+ return Mono.from(repository.findByGid(datasourceId))
+ .flatMap(this::convertToDomainObjectAndDecrypt);
return repository.findById(datasourceId)
.flatMap(this::convertToDomainObjectAndDecrypt);
}
@@ -67,8 +69,24 @@ public Mono<Datasource> findWorkspacePredefinedDatasourceByOrgIdAndType(String o
}
public Flux<Datasource> findAllById(Iterable<String> ids) {
- return repository.findAllById(ids)
+ List<String> idList = new ArrayList<>();
+ List<String> gidList = new ArrayList<>();
+
+ for (String id : ids) {
+ if (FieldName.isGID(id)) {
+ gidList.add(id);
+ } else {
+ idList.add(id);
+ }
+ }
+
+ Flux<Datasource> idFlux = idList.isEmpty() ? Flux.empty() : repository.findAllById(idList)
.flatMap(this::convertToDomainObjectAndDecrypt);
+
+ Flux<Datasource> gidFlux = gidList.isEmpty() ? Flux.empty() : repository.findAllByGidIn(gidList)
+ .flatMap(this::convertToDomainObjectAndDecrypt);
+
+ return Flux.merge(idFlux, gidFlux);
}
public Flux<Datasource> findAllByOrganizationId(String orgId) {
@@ -92,8 +110,12 @@ public Flux<String> retainNoneExistAndNonCurrentOrgDatasourceIds(Collection<Stri
if (CollectionUtils.isEmpty(datasourceIds)) {
return Flux.empty();
}
- return repository.findAllById(new HashSet<>(datasourceIds))
- .collectList()
+ Flux<DatasourceDO> mixedMono;
+ if(FieldName.isGID(datasourceIds.stream().findFirst().orElseThrow()))
+ mixedMono = repository.findAllByGidIn(new HashSet<>(datasourceIds));
+ else
+ mixedMono = repository.findAllById(new HashSet<>(datasourceIds));
+ return mixedMono.collectList()
.map(existDatasources -> {
Set<String> result = new HashSet<>(datasourceIds);
existDatasources.stream()
@@ -114,6 +136,7 @@ private Mono<Datasource> convertToDomainObjectAndDecrypt(DatasourceDO datasource
Mono<Datasource> datasourceMono = Mono.fromSupplier(() -> {
Datasource result = new Datasource();
+ result.setGid(datasourceDO.getGid());
result.setName(datasourceDO.getName());
result.setType(datasourceDO.getType());
result.setOrganizationId(datasourceDO.getOrganizationId());
@@ -156,6 +179,7 @@ private Mono<DatasourceDO> encryptDataAndConvertToDataObject(Datasource datasour
return Mono.fromSupplier(() -> {
DatasourceDO result = new DatasourceDO();
+ result.setGid(datasource.getGid());
result.setName(datasource.getName());
result.setType(datasource.getType());
result.setOrganizationId(datasource.getOrganizationId());
diff --git a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/folder/model/Folder.java b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/folder/model/Folder.java
index a26592fd1..79de869ea 100644
--- a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/folder/model/Folder.java
+++ b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/folder/model/Folder.java
@@ -1,6 +1,7 @@
package org.lowcoder.domain.folder.model;
+import com.github.f4b6a3.uuid.UuidCreator;
import jakarta.annotation.Nullable;
import lombok.Getter;
import lombok.NoArgsConstructor;
@@ -15,8 +16,10 @@
public class Folder extends HasIdAndAuditing {
private String organizationId;
+ private String gid;
@Nullable
private String parentFolderId; // null represents folder in the root folder
+ private String parentFolderGid; // null represents folder in the root folder
private String name;
private String title;
private String description;
diff --git a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/folder/repository/FolderRepository.java b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/folder/repository/FolderRepository.java
index 165fb343d..622b68c05 100644
--- a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/folder/repository/FolderRepository.java
+++ b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/folder/repository/FolderRepository.java
@@ -5,9 +5,14 @@
import org.springframework.stereotype.Repository;
import reactor.core.publisher.Flux;
+import reactor.core.publisher.Mono;
+
+import java.util.Collection;
@Repository
public interface FolderRepository extends ReactiveMongoRepository<Folder, String> {
Flux<Folder> findByOrganizationId(String organizationId);
+ Mono<Folder> findByGid(String organizationGid);
+ Mono<Void> deleteAllByGid(Collection<String> gids);
}
diff --git a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/folder/service/FolderServiceImpl.java b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/folder/service/FolderServiceImpl.java
index 2ad876946..d1052c05a 100644
--- a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/folder/service/FolderServiceImpl.java
+++ b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/folder/service/FolderServiceImpl.java
@@ -39,6 +39,9 @@ public Mono<Folder> findById(String id) {
return Mono.error(new BizException(BizError.INVALID_PARAMETER, "INVALID_PARAMETER", FieldName.ID));
}
+ if(FieldName.isGID(id))
+ return repository.findByGid(id)
+ .switchIfEmpty(Mono.error(new BizException(BizError.NO_RESOURCE_FOUND, "FOLDER_NOT_FOUND", id)));
return repository.findById(id)
.switchIfEmpty(Mono.error(new BizException(BizError.NO_RESOURCE_FOUND, "FOLDER_NOT_FOUND", id)));
}
@@ -55,6 +58,8 @@ public Flux<Folder> findByOrganizationId(String organizationId) {
@Override
public Mono<Void> deleteAllById(Collection<String> ids) {
+ if(!ids.isEmpty() && FieldName.isGID(ids.stream().findFirst().get()))
+ return repository.deleteAllByGid(ids);
return repository.deleteAllById(ids);
}
diff --git a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/organization/model/Organization.java b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/organization/model/Organization.java
index ac0ac7829..18d7d2423 100644
--- a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/organization/model/Organization.java
+++ b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/organization/model/Organization.java
@@ -8,6 +8,7 @@
import com.fasterxml.jackson.annotation.JsonIgnoreProperties;
import com.fasterxml.jackson.annotation.JsonView;
+import com.github.f4b6a3.uuid.UuidCreator;
import lombok.experimental.SuperBuilder;
import lombok.extern.jackson.Jacksonized;
import org.apache.commons.lang3.builder.ToStringBuilder;
@@ -37,6 +38,8 @@
public class Organization extends HasIdAndAuditing implements BeforeMongodbWrite, AfterMongodbRead {
private static final OrganizationCommonSettings EMPTY_SETTINGS = new OrganizationCommonSettings();
+ @Getter
+ private String gid;
private String name;
diff --git a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/organization/repository/OrganizationRepository.java b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/organization/repository/OrganizationRepository.java
index 3f10444ee..b7e211906 100644
--- a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/organization/repository/OrganizationRepository.java
+++ b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/organization/repository/OrganizationRepository.java
@@ -15,8 +15,10 @@ public interface OrganizationRepository extends ReactiveMongoRepository<Organiza
Mono<Organization> findFirstByStateMatches(OrganizationState state);
Flux<Organization> findByIdInAndState(Collection<String> id, OrganizationState state);
+ Flux<Organization> findByGidInAndState(Collection<String> gid, OrganizationState state);
Mono<Organization> findByIdAndState(String id, OrganizationState state);
+ Mono<Organization> findByGidAndState(String gid, OrganizationState state);
Mono<Organization> findBySourceAndThirdPartyCompanyIdAndState(String source, String tpCompanyId, OrganizationState state);
diff --git a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/organization/service/OrganizationServiceImpl.java b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/organization/service/OrganizationServiceImpl.java
index e398caaac..d4185379c 100644
--- a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/organization/service/OrganizationServiceImpl.java
+++ b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/organization/service/OrganizationServiceImpl.java
@@ -1,5 +1,6 @@
package org.lowcoder.domain.organization.service;
+import com.github.f4b6a3.uuid.UuidCreator;
import jakarta.annotation.Nonnull;
import jakarta.annotation.PostConstruct;
import lombok.RequiredArgsConstructor;
@@ -74,6 +75,7 @@ public Mono<Organization> createDefault(User user, boolean isSuperAdmin) {
String userOrgSuffix = getMessage(locale, "USER_ORG_SUFFIX");
Organization organization = new Organization();
+ organization.setGid(UuidCreator.getTimeOrderedEpoch().toString());
organization.setName(user.getName() + userOrgSuffix);
organization.setIsAutoGeneratedOrganization(true);
// saas mode
@@ -96,7 +98,7 @@ public Mono<Organization> createDefault(User user, boolean isSuperAdmin) {
private Mono<Boolean> joinOrganizationInEnterpriseMode(String userId) {
return getOrganizationInEnterpriseMode()
- .flatMap(organization -> orgMemberService.addMember(organization.getId(), userId, MemberRole.MEMBER))
+ .flatMap(organization -> orgMemberService.addMember(organization.getGid(), userId, MemberRole.MEMBER))
.defaultIfEmpty(false);
}
@@ -157,12 +159,19 @@ private Mono<Boolean> setOrgAdmin(String userId, Organization newOrg, boolean is
@Override
public Mono<Organization> getById(String id) {
+ if(FieldName.isGID(id))
+ return repository.findByGidAndState(id, ACTIVE)
+ .switchIfEmpty(deferredError(UNABLE_TO_FIND_VALID_ORG, "INVALID_ORG_ID"));
return repository.findByIdAndState(id, ACTIVE)
.switchIfEmpty(deferredError(UNABLE_TO_FIND_VALID_ORG, "INVALID_ORG_ID"));
}
@Override
public Mono<OrganizationCommonSettings> getOrgCommonSettings(String orgId) {
+ if(FieldName.isGID(orgId))
+ return repository.findByGidAndState(orgId, ACTIVE)
+ .switchIfEmpty(deferredError(UNABLE_TO_FIND_VALID_ORG, "INVALID_ORG_ID"))
+ .map(Organization::getCommonSettings);
return repository.findByIdAndState(orgId, ACTIVE)
.switchIfEmpty(deferredError(UNABLE_TO_FIND_VALID_ORG, "INVALID_ORG_ID"))
.map(Organization::getCommonSettings);
@@ -170,6 +179,8 @@ public Mono<OrganizationCommonSettings> getOrgCommonSettings(String orgId) {
@Override
public Flux<Organization> getByIds(Collection<String> ids) {
+ if(!ids.isEmpty() && FieldName.isGID(ids.stream().findFirst().get()))
+ return repository.findByGidInAndState(ids, ACTIVE);
return repository.findByIdInAndState(ids, ACTIVE);
}
@@ -196,7 +207,10 @@ public Mono<Boolean> uploadLogo(String organizationId, Part filePart) {
@Override
public Mono<Boolean> deleteLogo(String organizationId) {
- return repository.findByIdAndState(organizationId, ACTIVE)
+ Mono<Organization> organizationMono;
+ if(FieldName.isGID(organizationId)) organizationMono = repository.findByGidAndState(organizationId, ACTIVE);
+ else organizationMono = repository.findByIdAndState(organizationId, ACTIVE);
+ return organizationMono
.flatMap(organization -> {
// delete from asset repo.
final String prevAssetId = organization.getLogoAssetId();
diff --git a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/permission/service/ResourcePermissionService.java b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/permission/service/ResourcePermissionService.java
index 008439c92..3e97a4217 100644
--- a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/permission/service/ResourcePermissionService.java
+++ b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/permission/service/ResourcePermissionService.java
@@ -23,6 +23,8 @@ Mono<Map<String, Collection<ResourcePermission>>> getByResourceTypeAndResourceId
@NonEmptyMono
Mono<List<ResourcePermission>> getByApplicationId(String applicationId);
+ @NonEmptyMono
+ Mono<List<ResourcePermission>> getByBundleId(String bundleId);
@NonEmptyMono
Mono<List<ResourcePermission>> getByDataSourceId(String dataSourceId);
diff --git a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/permission/service/ResourcePermissionServiceImpl.java b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/permission/service/ResourcePermissionServiceImpl.java
index f09bba55e..91e0ad468 100644
--- a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/permission/service/ResourcePermissionServiceImpl.java
+++ b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/permission/service/ResourcePermissionServiceImpl.java
@@ -57,6 +57,12 @@ public Mono<List<ResourcePermission>> getByApplicationId(String applicationId) {
return getByResourceTypeAndResourceId(ResourceType.APPLICATION, applicationId);
}
+ @Override
+ @NonEmptyMono
+ public Mono<List<ResourcePermission>> getByBundleId(String bundleId) {
+ return getByResourceTypeAndResourceId(ResourceType.BUNDLE, bundleId);
+ }
+
@Override
@NonEmptyMono
public Mono<List<ResourcePermission>> getByDataSourceId(String dataSourceId) {
diff --git a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/query/model/ApplicationQuery.java b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/query/model/ApplicationQuery.java
index b14879955..8b994ab62 100644
--- a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/query/model/ApplicationQuery.java
+++ b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/query/model/ApplicationQuery.java
@@ -1,22 +1,19 @@
package org.lowcoder.domain.query.model;
-import java.util.Map;
-
-import lombok.Builder;
-import lombok.Value;
-import lombok.extern.jackson.Jacksonized;
-import org.apache.commons.collections4.MapUtils;
-
import com.fasterxml.jackson.annotation.JsonCreator;
import com.fasterxml.jackson.annotation.JsonProperty;
-
import lombok.Getter;
+import org.apache.commons.collections4.MapUtils;
+
+import java.util.Map;
@Getter
public class ApplicationQuery {
private final String id;
+ private final String gid;
+
private final String name;
private final BaseQuery baseQuery;
@@ -27,6 +24,7 @@ public class ApplicationQuery {
@JsonCreator
public ApplicationQuery(@JsonProperty("id") String id,
+ @JsonProperty("gid") String gid,
@JsonProperty("name") String name,
@JsonProperty("datasourceId") String datasourceId,
@JsonProperty("comp") Map<String, Object> queryConfig,
@@ -34,6 +32,7 @@ public ApplicationQuery(@JsonProperty("id") String id,
@JsonProperty("timeout") String timeoutStr,
@JsonProperty("compType") String compType) {
this.id = id;
+ this.gid = gid;
this.name = name;
this.triggerType = triggerType;
this.timeoutStr = timeoutStr;
diff --git a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/query/model/LibraryQuery.java b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/query/model/LibraryQuery.java
index 40fbce6b0..859522aee 100644
--- a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/query/model/LibraryQuery.java
+++ b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/query/model/LibraryQuery.java
@@ -1,11 +1,8 @@
package org.lowcoder.domain.query.model;
-import static com.google.common.base.Suppliers.memoize;
-
-import java.util.Map;
-import java.util.function.Supplier;
-
+import lombok.Getter;
import lombok.NoArgsConstructor;
+import lombok.Setter;
import lombok.experimental.SuperBuilder;
import lombok.extern.jackson.Jacksonized;
import org.lowcoder.sdk.models.HasIdAndAuditing;
@@ -13,19 +10,20 @@
import org.springframework.data.annotation.Transient;
import org.springframework.data.mongodb.core.mapping.Document;
-import com.fasterxml.jackson.annotation.JsonCreator;
-import com.fasterxml.jackson.annotation.JsonProperty;
+import java.util.Map;
+import java.util.function.Supplier;
-import lombok.Builder;
-import lombok.Getter;
+import static com.google.common.base.Suppliers.memoize;
@Document
@Getter
+@Setter
@SuperBuilder
@Jacksonized
@NoArgsConstructor
public class LibraryQuery extends HasIdAndAuditing {
+ private String gid;
private String organizationId;
private String name;
private Map<String, Object> libraryQueryDSL;
diff --git a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/query/repository/LibraryQueryRepository.java b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/query/repository/LibraryQueryRepository.java
index 2e711bea5..a7b4380ff 100644
--- a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/query/repository/LibraryQueryRepository.java
+++ b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/query/repository/LibraryQueryRepository.java
@@ -3,7 +3,6 @@
import org.lowcoder.domain.query.model.LibraryQuery;
import org.springframework.data.mongodb.repository.ReactiveMongoRepository;
import org.springframework.stereotype.Repository;
-
import reactor.core.publisher.Flux;
import reactor.core.publisher.Mono;
@@ -13,4 +12,6 @@ public interface LibraryQueryRepository extends ReactiveMongoRepository<LibraryQ
Flux<LibraryQuery> findByOrganizationId(String organizationId);
Mono<LibraryQuery> findByName(String name);
+ Mono<Void> deleteByGid(String gid);
+ Mono<LibraryQuery> findByGid(String gid);
}
diff --git a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/query/service/LibraryQueryServiceImpl.java b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/query/service/LibraryQueryServiceImpl.java
index 7c25fa562..f90d9d024 100644
--- a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/query/service/LibraryQueryServiceImpl.java
+++ b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/query/service/LibraryQueryServiceImpl.java
@@ -1,22 +1,23 @@
package org.lowcoder.domain.query.service;
-import static org.lowcoder.sdk.exception.BizError.LIBRARY_QUERY_NOT_FOUND;
-import static org.lowcoder.sdk.util.ExceptionUtils.deferredError;
-
-import java.util.Map;
-
+import com.github.f4b6a3.uuid.UuidCreator;
import lombok.RequiredArgsConstructor;
import org.lowcoder.domain.query.model.BaseQuery;
import org.lowcoder.domain.query.model.LibraryQuery;
import org.lowcoder.domain.query.model.LibraryQueryRecord;
import org.lowcoder.domain.query.repository.LibraryQueryRepository;
import org.lowcoder.infra.mongo.MongoUpsertHelper;
-import org.springframework.beans.factory.annotation.Autowired;
+import org.lowcoder.sdk.constants.FieldName;
import org.springframework.stereotype.Service;
-
+import org.springframework.util.StringUtils;
import reactor.core.publisher.Flux;
import reactor.core.publisher.Mono;
+import java.util.Map;
+
+import static org.lowcoder.sdk.exception.BizError.LIBRARY_QUERY_NOT_FOUND;
+import static org.lowcoder.sdk.util.ExceptionUtils.deferredError;
+
@RequiredArgsConstructor
@Service
public class LibraryQueryServiceImpl implements LibraryQueryService {
@@ -27,6 +28,9 @@ public class LibraryQueryServiceImpl implements LibraryQueryService {
@Override
public Mono<LibraryQuery> getById(String libraryQueryId) {
+ if(FieldName.isGID(libraryQueryId))
+ return libraryQueryRepository.findByGid(libraryQueryId)
+ .switchIfEmpty(deferredError(LIBRARY_QUERY_NOT_FOUND, "LIBRARY_QUERY_NOT_FOUND"));
return libraryQueryRepository.findById(libraryQueryId)
.switchIfEmpty(deferredError(LIBRARY_QUERY_NOT_FOUND, "LIBRARY_QUERY_NOT_FOUND"));
}
@@ -44,6 +48,7 @@ public Flux<LibraryQuery> getByOrganizationId(String organizationId) {
@Override
public Mono<LibraryQuery> insert(LibraryQuery libraryQuery) {
+ if(StringUtils.isEmpty(libraryQuery.getGid())) libraryQuery.setGid(UuidCreator.getTimeOrderedEpoch().toString());
return libraryQueryRepository.save(libraryQuery);
}
@@ -54,6 +59,8 @@ public Mono<Boolean> update(String libraryQueryId, LibraryQuery libraryQuery) {
@Override
public Mono<Void> delete(String libraryQueryId) {
+ if(FieldName.isGID(libraryQueryId))
+ return libraryQueryRepository.deleteByGid(libraryQueryId);
return libraryQueryRepository.deleteById(libraryQueryId);
}
diff --git a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/solutions/TemplateSolutionServiceImpl.java b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/solutions/TemplateSolutionServiceImpl.java
index fb55cb173..1d3f5e7ab 100644
--- a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/solutions/TemplateSolutionServiceImpl.java
+++ b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/solutions/TemplateSolutionServiceImpl.java
@@ -132,6 +132,7 @@ private Mono<String> doCopyDatasource(String organizationId, String datasourceId
private Mono<String> createNewDatasourceFrom(String organizationId, String visitorId, Datasource datasource) {
Datasource copyDatasource = new Datasource();
copyDatasource.setName(generateCopyDatasourceName(datasource.getName()));
+ copyDatasource.setGid(datasource.getGid());
copyDatasource.setType(datasource.getType());
copyDatasource.setDetailConfig(datasource.getDetailConfig());
copyDatasource.setCreationSource(DatasourceCreationSource.CLONE_FROM_TEMPLATE.getValue());
diff --git a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/user/model/AuthToken.java b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/user/model/AuthToken.java
index e424447eb..70f71897b 100644
--- a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/user/model/AuthToken.java
+++ b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/user/model/AuthToken.java
@@ -18,6 +18,7 @@ public class AuthToken implements Serializable {
private int expireIn;
private String refreshToken;
private int refreshTokenExpireIn;
+ private String jwt;
private String openId;
private String code;
diff --git a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/user/service/UserServiceImpl.java b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/user/service/UserServiceImpl.java
index e7aa59790..e403cb3e1 100644
--- a/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/user/service/UserServiceImpl.java
+++ b/server/api-service/lowcoder-domain/src/main/java/org/lowcoder/domain/user/service/UserServiceImpl.java
@@ -340,7 +340,7 @@ public Mono<UserDetail> buildUserDetail(User user, boolean withoutDynamicGroups)
List<Map<String, String>> groups = tuple2.getT2();
return UserDetail.builder()
.id(user.getId())
- .name(user.getName())
+ .name(StringUtils.isEmpty(user.getName())?user.getId():user.getName())
.avatarUrl(user.getAvatarUrl())
.uiLanguage(user.getUiLanguage())
.email(convertEmail(user.getConnections()))
diff --git a/server/api-service/lowcoder-infra/src/main/java/org/lowcoder/infra/event/ApplicationCommonEvent.java b/server/api-service/lowcoder-infra/src/main/java/org/lowcoder/infra/event/ApplicationCommonEvent.java
index c7bf02513..e3cae4ac0 100644
--- a/server/api-service/lowcoder-infra/src/main/java/org/lowcoder/infra/event/ApplicationCommonEvent.java
+++ b/server/api-service/lowcoder-infra/src/main/java/org/lowcoder/infra/event/ApplicationCommonEvent.java
@@ -10,6 +10,7 @@
public class ApplicationCommonEvent extends AbstractEvent {
private final String applicationId;
+ private final String applicationGid;
private final String applicationName;
private final EventType type;
@Nullable
diff --git a/server/api-service/lowcoder-infra/src/main/java/org/lowcoder/infra/mongo/MongoUpsertHelper.java b/server/api-service/lowcoder-infra/src/main/java/org/lowcoder/infra/mongo/MongoUpsertHelper.java
index b3d4cf553..070645b1e 100644
--- a/server/api-service/lowcoder-infra/src/main/java/org/lowcoder/infra/mongo/MongoUpsertHelper.java
+++ b/server/api-service/lowcoder-infra/src/main/java/org/lowcoder/infra/mongo/MongoUpsertHelper.java
@@ -39,7 +39,7 @@ public class MongoUpsertHelper {
private ApplicationEventPublisher applicationEventPublisher;
public <T extends HasIdAndAuditing> Mono<Boolean> updateById(T partialResource, String id) {
- return update(partialResource, FieldName.ID, id);
+ return update(partialResource, FieldName.guessFieldNameFromId(id), id);
}
public <T extends HasIdAndAuditing> Mono<Boolean> update(T partialResource, String uniqueKeyName, String uniqueKeyValue) {
@@ -69,7 +69,7 @@ public <T extends HasIdAndAuditing> Mono<Boolean> update(T partialResource, Quer
}
public <T extends HasIdAndAuditing> Mono<Boolean> updatePurely(T partialResource, String id) {
- Query query = new Query(Criteria.where(FieldName.ID).is(id));
+ Query query = new Query(Criteria.where(FieldName.guessFieldNameFromId(id)).is(id));
return updatePurely(partialResource, query);
}
diff --git a/server/api-service/lowcoder-plugins/sqlBasedPlugin/src/main/java/org/lowcoder/plugin/sql/SqlBasedConnector.java b/server/api-service/lowcoder-plugins/sqlBasedPlugin/src/main/java/org/lowcoder/plugin/sql/SqlBasedConnector.java
index 73082f9d2..c94748cf8 100644
--- a/server/api-service/lowcoder-plugins/sqlBasedPlugin/src/main/java/org/lowcoder/plugin/sql/SqlBasedConnector.java
+++ b/server/api-service/lowcoder-plugins/sqlBasedPlugin/src/main/java/org/lowcoder/plugin/sql/SqlBasedConnector.java
@@ -18,7 +18,7 @@
public abstract class SqlBasedConnector<T extends SqlBasedDatasourceConnectionConfig> extends BlockingDatasourceConnector<HikariPerfWrapper, T> {
- private static final long LEAK_DETECTION_THRESHOLD_MS = TimeUnit.SECONDS.toMillis(30);
+ private static final long LEAK_DETECTION_THRESHOLD_MS = TimeUnit.SECONDS.toMillis(600);
private static final long MAX_LIFETIME_MS = TimeUnit.MINUTES.toMillis(30);
private static final long KEEPALIVE_TIME_MS = TimeUnit.MINUTES.toMillis(3);
private static final long CONNECTION_TIMEOUT_MS = TimeUnit.SECONDS.toMillis(5);
diff --git a/server/api-service/lowcoder-sdk/src/main/java/org/lowcoder/sdk/auth/Oauth2GenericAuthConfig.java b/server/api-service/lowcoder-sdk/src/main/java/org/lowcoder/sdk/auth/Oauth2GenericAuthConfig.java
index de6a3c23d..25b5f2abe 100644
--- a/server/api-service/lowcoder-sdk/src/main/java/org/lowcoder/sdk/auth/Oauth2GenericAuthConfig.java
+++ b/server/api-service/lowcoder-sdk/src/main/java/org/lowcoder/sdk/auth/Oauth2GenericAuthConfig.java
@@ -26,13 +26,16 @@ public class Oauth2GenericAuthConfig extends Oauth2SimpleAuthConfig {
private String scope;
private HashMap<String, String> sourceMappings;
private Boolean userInfoIntrospection;
+ private Boolean userCanSelectAccounts;
+ private Boolean postForUserEndpoint;
@Override
public String replaceAuthUrlClientIdPlaceholder(String url)
{
return super.replaceAuthUrlClientIdPlaceholder(url)
.replace(BASE_URL_PLACEHOLDER, authorizationEndpoint)
- .replace(SCOPE_PLACEHOLDER, scope);
+ .replace(SCOPE_PLACEHOLDER, scope)
+ .concat(Boolean.FALSE.equals(userCanSelectAccounts)?"":"&prompt=select_account");
}
diff --git a/server/api-service/lowcoder-sdk/src/main/java/org/lowcoder/sdk/auth/constants/Oauth2Constants.java b/server/api-service/lowcoder-sdk/src/main/java/org/lowcoder/sdk/auth/constants/Oauth2Constants.java
index 88979cd68..3ba925d0d 100644
--- a/server/api-service/lowcoder-sdk/src/main/java/org/lowcoder/sdk/auth/constants/Oauth2Constants.java
+++ b/server/api-service/lowcoder-sdk/src/main/java/org/lowcoder/sdk/auth/constants/Oauth2Constants.java
@@ -48,6 +48,5 @@ public class Oauth2Constants {
+ "&redirect_uri=" + REDIRECT_URL_PLACEHOLDER
+ "&state=" + STATE_PLACEHOLDER
+ "&scope=" + SCOPE_PLACEHOLDER
- + "&access_type=offline"
- + "&prompt=select_account";
+ + "&access_type=offline";
}
diff --git a/server/api-service/lowcoder-sdk/src/main/java/org/lowcoder/sdk/constants/FieldName.java b/server/api-service/lowcoder-sdk/src/main/java/org/lowcoder/sdk/constants/FieldName.java
index 31d86f885..8ea3e143e 100644
--- a/server/api-service/lowcoder-sdk/src/main/java/org/lowcoder/sdk/constants/FieldName.java
+++ b/server/api-service/lowcoder-sdk/src/main/java/org/lowcoder/sdk/constants/FieldName.java
@@ -1,12 +1,25 @@
package org.lowcoder.sdk.constants;
+import io.micrometer.common.util.StringUtils;
+
public class FieldName {
public static final String ORGANIZATION_ID = "organizationId";
public static final String NAME = "name";
public static final String ORGANIZATION = "organization";
public static final String ID = "id";
+ public static final String GID = "gid";
public static final String USER = "user";
public static final String ASSET = "asset";
+ public static String guessFieldNameFromId(String id) {
+ if(StringUtils.isEmpty(id)) return ID;
+ if(id.contains("-")) return GID;
+ return ID;
+ }
+
+ public static Boolean isGID(String id) {
+ return guessFieldNameFromId(id).equals(GID);
+ }
+
}
diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/application/ApplicationApiServiceImpl.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/application/ApplicationApiServiceImpl.java
index 4d25301d6..9d969b55e 100644
--- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/application/ApplicationApiServiceImpl.java
+++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/application/ApplicationApiServiceImpl.java
@@ -49,6 +49,7 @@
import org.springframework.stereotype.Service;
import reactor.core.publisher.Flux;
import reactor.core.publisher.Mono;
+import reactor.core.scheduler.Schedulers;
import java.time.Duration;
import java.time.Instant;
@@ -97,6 +98,7 @@ public class ApplicationApiServiceImpl implements ApplicationApiService {
public Mono<ApplicationView> create(CreateApplicationRequest createApplicationRequest) {
Application application = new Application(createApplicationRequest.organizationId(),
+ createApplicationRequest.gid(),
createApplicationRequest.name(),
createApplicationRequest.applicationType(),
NORMAL,
@@ -246,7 +248,12 @@ private Mono<Boolean> updateApplicationStatus(String applicationId, ApplicationS
@Override
public Mono<ApplicationView> getEditingApplication(String applicationId) {
- return checkPermissionWithReadableErrorMsg(applicationId, EDIT_APPLICATIONS)
+ return applicationService.findById(applicationId).filter(application -> application.isPublicToAll() && application.isPublicToMarketplace())
+ .map(application -> {
+ ResourcePermission permission = ResourcePermission.builder().resourceRole(ResourceRole.VIEWER).build();
+ return permission;
+ })
+ .switchIfEmpty(checkPermissionWithReadableErrorMsg(applicationId, EDIT_APPLICATIONS))
.zipWhen(permission -> applicationService.findById(applicationId)
.delayUntil(application -> checkApplicationStatus(application, NORMAL)))
.zipWhen(tuple -> applicationService.getAllDependentModulesFromApplication(tuple.getT2(), false), TupleUtils::merge)
@@ -474,6 +481,7 @@ public Mono<ResourcePermission> checkPermissionWithReadableErrorMsg(String appli
public Mono<ResourcePermission> checkApplicationPermissionWithReadableErrorMsg(String applicationId, ResourceAction action, ApplicationRequestType requestType) {
return sessionUserService.getVisitorId()
.flatMap(visitorId -> resourcePermissionService.checkUserPermissionStatusOnApplication(visitorId, applicationId, action, requestType))
+ .publishOn(Schedulers.boundedElastic())
.flatMap(permissionStatus -> {
if (!permissionStatus.hasPermission()) {
@@ -482,7 +490,7 @@ public Mono<ResourcePermission> checkApplicationPermissionWithReadableErrorMsg(S
orgId = applicationService.findById(applicationId)
.map(Application::getOrganizationId)
.onErrorReturn("")
- .block(Duration.ofSeconds(2));
+ .block(Duration.ofSeconds(5));
} catch(Throwable cause) {
log.warn("Couldn't get orgId! - {}", cause.getMessage());
}
@@ -519,6 +527,7 @@ private ApplicationInfoView buildView(Application application, String role) {
private ApplicationInfoView buildView(Application application, String role, @Nullable String folderId) {
return ApplicationInfoView.builder()
.applicationId(application.getId())
+ .applicationGid(application.getGid())
.orgId(application.getOrganizationId())
.name(application.getName())
.createBy(application.getCreatedBy())
diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/application/ApplicationEndpoints.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/application/ApplicationEndpoints.java
index 7720a051c..91230e0ad 100644
--- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/application/ApplicationEndpoints.java
+++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/application/ApplicationEndpoints.java
@@ -279,6 +279,7 @@ public record UpdatePermissionRequest(String role) {
}
public record CreateApplicationRequest(@JsonProperty("orgId") String organizationId,
+ String gid,
String name,
Integer applicationType,
Map<String, Object> publishedApplicationDSL,
diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/application/view/ApplicationInfoView.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/application/view/ApplicationInfoView.java
index b72bce8a9..82b9494e8 100644
--- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/application/view/ApplicationInfoView.java
+++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/application/view/ApplicationInfoView.java
@@ -15,6 +15,7 @@
public class ApplicationInfoView {
private final String orgId;
private final String applicationId;
+ private final String applicationGid;
private final String name;
private final long createAt;
private final String createBy;
diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/authentication/request/oauth2/request/GenericAuthRequest.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/authentication/request/oauth2/request/GenericAuthRequest.java
index b67a57463..7375306da 100644
--- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/authentication/request/oauth2/request/GenericAuthRequest.java
+++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/authentication/request/oauth2/request/GenericAuthRequest.java
@@ -4,19 +4,20 @@
import org.lowcoder.api.authentication.request.AuthException;
import org.lowcoder.api.authentication.request.oauth2.GenericOAuthProviderSource;
import org.lowcoder.api.authentication.request.oauth2.OAuth2RequestContext;
+import org.lowcoder.api.authentication.util.JwtDecoderUtil;
import org.lowcoder.domain.user.model.AuthToken;
import org.lowcoder.domain.user.model.AuthUser;
import org.lowcoder.sdk.auth.Oauth2GenericAuthConfig;
import org.lowcoder.sdk.util.JsonUtils;
import org.lowcoder.sdk.webclient.WebClientBuildHelper;
+import org.springframework.http.HttpMethod;
import org.springframework.http.MediaType;
import org.springframework.web.reactive.function.BodyInserters;
import reactor.core.publisher.Mono;
import java.util.Map;
-import static org.lowcoder.api.authentication.util.AuthenticationUtils.mapToAuthToken;
-import static org.lowcoder.api.authentication.util.AuthenticationUtils.mapToAuthUser;
+import static org.lowcoder.api.authentication.util.AuthenticationUtils.*;
import static org.lowcoder.sdk.plugin.common.constant.Constants.HTTP_TIMEOUT;
/**
@@ -42,13 +43,14 @@ protected Mono<AuthToken> getAuthToken(OAuth2RequestContext context) {
.with("client_secret", config.getClientSecret())
.with("grant_type", "authorization_code")
.with("redirect_uri", context.getRedirectUrl()))
+ .accept(MediaType.APPLICATION_JSON)
.retrieve()
.bodyToMono(Map.class)
.flatMap(map -> {
if (map.containsKey("error") || map.containsKey("error_description")) {
return Mono.error(new AuthException(JsonUtils.toJson(map)));
}
- return Mono.just(mapToAuthToken(map));
+ return Mono.just(mapToAuthToken(map, config.getSourceMappings()));
});
}
@@ -70,18 +72,33 @@ protected Mono<AuthToken> refreshAuthToken(String refreshToken) {
if (map.containsKey("error") || map.containsKey("error_description")) {
return Mono.error(new AuthException(JsonUtils.toJson(map)));
}
- return Mono.just(mapToAuthToken(map));
+ return Mono.just(mapToAuthToken(map, config.getSourceMappings()));
});
}
@Override
protected Mono<AuthUser> getAuthUser(AuthToken authToken) {
- if(!Boolean.TRUE.equals(config.getUserInfoIntrospection())) return Mono.just(AuthUser.builder().build());
+ //parse the JWT token
+ String jwt = authToken.getJwt();
+ Map<String, Object> jwtMap = null;
+ if(jwt != null) {
+ try {
+ jwtMap = JwtDecoderUtil.decodeJwtPayload(jwt);
+ } catch (Exception ignored) {
+ }
+ }
+
+ if(!Boolean.TRUE.equals(config.getUserInfoIntrospection())) {
+ if(jwtMap == null) return Mono.error(new AuthException("No JWT token found"));
+ return Mono.just(mapToAuthUser(jwtMap, config.getSourceMappings()));
+ }
+
+ Map<String, Object> finalJwtMap = jwtMap;
return WebClientBuildHelper.builder()
.systemProxy()
.timeoutMs(HTTP_TIMEOUT)
.build()
- .get()
+ .method(Boolean.TRUE.equals(config.getPostForUserEndpoint())? HttpMethod.POST: HttpMethod.GET)
.uri(config.getUserInfoEndpoint())
.headers(headers -> headers.setBearerAuth(authToken.getAccessToken()))
.retrieve()
@@ -90,7 +107,8 @@ protected Mono<AuthUser> getAuthUser(AuthToken authToken) {
if (map.containsKey("error") || map.containsKey("error_description")) {
return Mono.error(new AuthException(JsonUtils.toJson(map)));
}
- return Mono.just(mapToAuthUser(map, config.getSourceMappings()));
+ AuthUser merged = mergeAuthUser(mapToAuthUser(finalJwtMap, config.getSourceMappings()), mapToAuthUser(map, config.getSourceMappings()));
+ return Mono.just(merged);
});
}
}
diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/authentication/service/factory/AuthConfigFactoryImpl.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/authentication/service/factory/AuthConfigFactoryImpl.java
index 448c0de02..e8a871c5c 100644
--- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/authentication/service/factory/AuthConfigFactoryImpl.java
+++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/authentication/service/factory/AuthConfigFactoryImpl.java
@@ -118,6 +118,8 @@ private Oauth2SimpleAuthConfig buildOauth2GenericAuthConfig(AuthConfigRequest au
.scope(authConfigRequest.getScope())
.authType(AuthTypeConstants.GENERIC)
.userInfoIntrospection(MapUtils.getBoolean(authConfigRequest,"userInfoIntrospection", false))
+ .userCanSelectAccounts(MapUtils.getBoolean(authConfigRequest,"userCanSelectAccounts", true))
+ .postForUserEndpoint(MapUtils.getBoolean(authConfigRequest,"postForUserEndpoint", false))
.build();
}
}
diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/authentication/util/AdvancedMapUtils.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/authentication/util/AdvancedMapUtils.java
new file mode 100644
index 000000000..7f2bf4c36
--- /dev/null
+++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/authentication/util/AdvancedMapUtils.java
@@ -0,0 +1,55 @@
+package org.lowcoder.api.authentication.util;
+
+import java.util.Map;
+
+public class AdvancedMapUtils {
+
+ /**
+ * Retrieves a string value from a nested map structure using a key format that supports array indices and nested objects.
+ *
+ * @param map The map from which to retrieve the value.
+ * @param key The key in the format "abc[0].def.hi".
+ * @return The string value if found, otherwise null.
+ */
+ public static String getString(Map<String, Object> map, String key) {
+ if(key == null || key.equals("false")) return null;
+ String[] parts = key.split("\\.");
+ Object current = map;
+
+ for (String part : parts) {
+ if (current == null) {
+ return null;
+ }
+
+ if (part.contains("[")) {
+ int startIdx = part.indexOf('[');
+ int endIdx = part.indexOf(']');
+ String arrayKey = part.substring(0, startIdx);
+ int index = Integer.parseInt(part.substring(startIdx + 1, endIdx));
+
+ if (!(current instanceof Map)) {
+ return null;
+ }
+
+ current = ((Map<String, Object>) current).get(arrayKey);
+
+ if (current instanceof java.util.List) {
+ java.util.List<?> list = (java.util.List<?>) current;
+ if (index < 0 || index >= list.size()) {
+ return null;
+ }
+ current = list.get(index);
+ } else {
+ return null;
+ }
+ } else {
+ if (!(current instanceof Map)) {
+ return null;
+ }
+ current = ((Map<String, Object>) current).get(part);
+ }
+ }
+
+ return current!=null?current.toString():null;
+ }
+}
\ No newline at end of file
diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/authentication/util/AuthenticationUtils.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/authentication/util/AuthenticationUtils.java
index a00d9cae8..c0a6978a3 100644
--- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/authentication/util/AuthenticationUtils.java
+++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/authentication/util/AuthenticationUtils.java
@@ -8,6 +8,7 @@
import java.util.Map;
import org.apache.commons.collections4.MapUtils;
+import org.apache.commons.lang.StringUtils;
import org.lowcoder.domain.user.model.AuthToken;
import org.lowcoder.domain.user.model.AuthUser;
import org.lowcoder.domain.user.model.User;
@@ -64,14 +65,17 @@ public String getName() {
/**
* Utility method to map from Map to AuthToken
- * @param map Object
+ *
+ * @param map Object
+ * @param sourceMappings
* @return AuthToken
*/
- public static AuthToken mapToAuthToken(Map<String, Object> map) {
+ public static AuthToken mapToAuthToken(Map<String, Object> map, HashMap<String, String> sourceMappings) {
return AuthToken.builder()
.accessToken(MapUtils.getString(map, "access_token"))
.expireIn(MapUtils.getIntValue(map, "expires_in"))
.refreshToken(MapUtils.getString(map, "refresh_token"))
+ .jwt(AdvancedMapUtils.getString(map, MapUtils.getString(sourceMappings, "jwt", "access_token")))
.build();
}
@@ -83,11 +87,33 @@ public static AuthToken mapToAuthToken(Map<String, Object> map) {
* @return AuthUser
*/
public static AuthUser mapToAuthUser(Map<String, Object> map, HashMap<String, String> sourceMappings) {
+ String uid = AdvancedMapUtils.getString(map, MapUtils.getString(sourceMappings, "uid"));
+ String email = AdvancedMapUtils.getString(map, MapUtils.getString(sourceMappings, "email"));
+ String username = AdvancedMapUtils.getString(map, MapUtils.getString(sourceMappings, "username"));
+ if(StringUtils.isEmpty(username)) username = email;
+ if(StringUtils.isEmpty(username)) username = uid;
+ String avatar = AdvancedMapUtils.getString(map, MapUtils.getString(sourceMappings, "avatar"));
return AuthUser.builder()
- .uid(MapUtils.getString(map, MapUtils.getString(sourceMappings, "uid")))
- .username(MapUtils.getString(map, MapUtils.getString(sourceMappings, "username")))
- .avatar(MapUtils.getString(map, MapUtils.getString(sourceMappings, "avatar")))
+ .uid(uid)
+ .username(username)
+ .avatar(avatar)
.rawUserInfo(map)
.build();
}
+
+ /**
+ * Merge two AuthUser object - overwrite high into low
+ * @param low base object for merge
+ * @param high overwriting object
+ * @return
+ */
+ public static AuthUser mergeAuthUser(AuthUser low, AuthUser high) {
+ return AuthUser.builder()
+ .uid(high.getUid() != null ? high.getUid() : low.getUid())
+ .username(high.getUsername() != null ? high.getUsername() : low.getUsername())
+ .avatar(high.getAvatar() != null ? high.getAvatar() : low.getAvatar())
+ .rawUserInfo(high.getRawUserInfo() != null ? high.getRawUserInfo() : low.getRawUserInfo())
+ .authToken(high.getAuthToken() != null ? high.getAuthToken() : low.getAuthToken())
+ .build();
+ }
}
diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/authentication/util/JwtDecoderUtil.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/authentication/util/JwtDecoderUtil.java
new file mode 100644
index 000000000..d733d7bd8
--- /dev/null
+++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/authentication/util/JwtDecoderUtil.java
@@ -0,0 +1,35 @@
+package org.lowcoder.api.authentication.util;
+
+import com.fasterxml.jackson.databind.ObjectMapper;
+import java.util.Base64;
+import java.util.Map;
+
+public class JwtDecoderUtil {
+
+ private static final ObjectMapper objectMapper = new ObjectMapper();
+
+ /**
+ * Decodes the payload of a JWT without verifying its signature.
+ *
+ * @param jwt The JWT string.
+ * @return A Map representing the decoded JWT payload.
+ * @throws Exception if there is an error decoding the JWT.
+ */
+ public static Map<String, Object> decodeJwtPayload(String jwt) throws Exception {
+ // Split the JWT into its components
+ String[] parts = jwt.split("\\.");
+ if (parts.length < 2) {
+ throw new IllegalArgumentException("Invalid JWT format.");
+ }
+
+ // Base64-decode the payload
+ String payload = parts[1];
+ byte[] decodedBytes = Base64.getUrlDecoder().decode(payload);
+
+ // Convert the decoded bytes to a JSON string
+ String decodedString = new String(decodedBytes);
+
+ // Convert the JSON string to a Map
+ return objectMapper.readValue(decodedString, Map.class);
+ }
+}
\ No newline at end of file
diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/bundle/BundleApiService.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/bundle/BundleApiService.java
index a03a6c163..3e008e6e2 100644
--- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/bundle/BundleApiService.java
+++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/bundle/BundleApiService.java
@@ -23,6 +23,7 @@ public interface BundleApiService {
Mono<Void> checkBundleCurrentUser(Bundle bundle, String currentOrgId);
Mono<BundleInfoView> getPublishedBundle(String bundleId, BundleRequestType requestType);
+ Mono<BundleInfoView> getEditingBundle(String bundleId);
Mono<Bundle> delete(@Nonnull String bundleId);
@@ -30,8 +31,10 @@ public interface BundleApiService {
Mono<Boolean> restore(String bundleId);
Flux<BundleInfoView> getRecycledBundles();
+ Mono<BundlePermissionView> getBundlePermissions(String bundleId);
Mono<BundleInfoView> update(Bundle bundle);
+ Mono<BundleInfoView> publish(String bundleId);
Mono<Void> moveApp(String applicationId, String fromBundled, String toBundleId);
@@ -41,12 +44,14 @@ public interface BundleApiService {
@Nonnull
Mono<ResourcePermission> checkBundlePermissionWithReadableErrorMsg(String bundleId, ResourceAction action, BundleRequestType requestType);
+ @Nonnull
+ Mono<ResourcePermission> checkPermissionWithReadableErrorMsg(String bundleId, ResourceAction action);
- Mono<Void> grantPermission(String bundleId, Set<String> userIds, Set<String> groupIds, ResourceRole role);
+ Mono<Boolean> grantPermission(String bundleId, Set<String> userIds, Set<String> groupIds, ResourceRole role);
- Mono<Void> updatePermission(String bundleId, String permissionId, ResourceRole role);
+ Mono<Boolean> updatePermission(String bundleId, String permissionId, ResourceRole role);
- Mono<Void> removePermission(String bundleId, String permissionId);
+ Mono<Boolean> removePermission(String bundleId, String permissionId);
Mono<BundlePermissionView> getPermissions(String bundleId);
diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/bundle/BundleApiServiceImpl.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/bundle/BundleApiServiceImpl.java
index 36d78ad1d..e77a06d30 100644
--- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/bundle/BundleApiServiceImpl.java
+++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/bundle/BundleApiServiceImpl.java
@@ -1,13 +1,13 @@
package org.lowcoder.api.bundle;
+import com.github.f4b6a3.uuid.UuidCreator;
import jakarta.annotation.Nonnull;
import jakarta.annotation.Nullable;
import lombok.RequiredArgsConstructor;
-import org.apache.commons.collections4.CollectionUtils;
import org.apache.commons.lang3.StringUtils;
-import org.lowcoder.api.bundle.BundleEndpoints.CreateBundleRequest;
import org.lowcoder.api.application.view.ApplicationInfoView;
import org.lowcoder.api.application.view.ApplicationPermissionView;
+import org.lowcoder.api.bundle.BundleEndpoints.CreateBundleRequest;
import org.lowcoder.api.bundle.view.BundleInfoView;
import org.lowcoder.api.bundle.view.BundlePermissionView;
import org.lowcoder.api.home.FolderApiService;
@@ -17,30 +17,28 @@
import org.lowcoder.api.permission.view.PermissionItemView;
import org.lowcoder.api.usermanagement.OrgDevChecker;
import org.lowcoder.domain.application.model.Application;
-import org.lowcoder.domain.application.model.ApplicationStatus;
import org.lowcoder.domain.application.model.ApplicationType;
import org.lowcoder.domain.application.repository.ApplicationRepository;
import org.lowcoder.domain.application.service.ApplicationServiceImpl;
-import org.lowcoder.domain.bundle.model.*;
+import org.lowcoder.domain.bundle.model.Bundle;
+import org.lowcoder.domain.bundle.model.BundleApplication;
+import org.lowcoder.domain.bundle.model.BundleRequestType;
+import org.lowcoder.domain.bundle.model.BundleStatus;
import org.lowcoder.domain.bundle.repository.BundleRepository;
import org.lowcoder.domain.bundle.service.BundleElementRelationService;
-import org.lowcoder.domain.bundle.service.BundleNode;
import org.lowcoder.domain.bundle.service.BundleService;
-import org.lowcoder.domain.bundle.service.*;
import org.lowcoder.domain.group.service.GroupService;
import org.lowcoder.domain.organization.model.OrgMember;
import org.lowcoder.domain.organization.model.Organization;
+import org.lowcoder.domain.organization.service.OrgMemberService;
import org.lowcoder.domain.organization.service.OrganizationService;
import org.lowcoder.domain.permission.model.*;
import org.lowcoder.domain.permission.service.ResourcePermissionService;
-import org.lowcoder.domain.user.model.User;
import org.lowcoder.domain.user.service.UserService;
-import org.lowcoder.infra.birelation.BiRelation;
import org.lowcoder.infra.birelation.BiRelationBizType;
import org.lowcoder.infra.birelation.BiRelationServiceImpl;
import org.lowcoder.sdk.exception.BizError;
import org.lowcoder.sdk.exception.BizException;
-import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Lazy;
import org.springframework.stereotype.Service;
import reactor.core.publisher.Flux;
@@ -49,14 +47,11 @@
import java.util.*;
import java.util.function.Function;
-import java.util.function.ToLongFunction;
-import java.util.stream.Collectors;
-import static org.apache.commons.collections4.CollectionUtils.isNotEmpty;
import static org.lowcoder.domain.bundle.model.BundleStatus.NORMAL;
import static org.lowcoder.domain.permission.model.ResourceAction.*;
-import static org.lowcoder.infra.util.MonoUtils.emptyIfNull;
import static org.lowcoder.sdk.exception.BizError.*;
+import static org.lowcoder.sdk.util.ExceptionUtils.deferredError;
import static org.lowcoder.sdk.util.ExceptionUtils.ofError;
@RequiredArgsConstructor
@@ -65,6 +60,7 @@ public class BundleApiServiceImpl implements BundleApiService {
private final BiRelationServiceImpl biRelationService;
private final BundleService bundleService;
private final SessionUserService sessionUserService;
+ private final OrgMemberService orgMemberService;
private final OrgDevChecker orgDevChecker;
@Lazy
private final UserHomeApiService userHomeApiService;
@@ -82,6 +78,7 @@ public class BundleApiServiceImpl implements BundleApiService {
@Override
public Mono<BundleInfoView> create(CreateBundleRequest createBundleRequest) {
Bundle bundle = Bundle.builder()
+ .gid(StringUtils.isEmpty(createBundleRequest.gid())?UuidCreator.getTimeOrderedEpoch().toString():createBundleRequest.gid())
.organizationId(createBundleRequest.organizationId())
.name(createBundleRequest.name())
.image(createBundleRequest.image())
@@ -96,8 +93,10 @@ public Mono<BundleInfoView> create(CreateBundleRequest createBundleRequest) {
if (StringUtils.isBlank(bundle.getName())) {
return Mono.error(new BizException(BizError.INVALID_PARAMETER, "BUNDLE_NAME_EMPTY"));
}
- return orgDevChecker.checkCurrentOrgDev()
- .then(sessionUserService.getVisitorOrgMemberCache())
+ return sessionUserService.getVisitorId()
+ .flatMap(userId -> orgMemberService.getOrgMember(bundle.getOrganizationId(), userId))
+ .switchIfEmpty(deferredError(NOT_AUTHORIZED, "NOT_AUTHORIZED"))
+ .delayUntil(orgMember -> orgDevChecker.checkCurrentOrgDev())
.delayUntil(orgMember -> checkBundleNameUnique(bundle.getName(), orgMember.getUserId()))
.delayUntil(orgMember -> {
String folderId = createBundleRequest.folderId();
@@ -202,6 +201,42 @@ public Mono<Boolean> restore(String bundleId) {
public Flux<BundleInfoView> getRecycledBundles() {
return userHomeApiService.getAllAuthorisedBundles4CurrentOrgMember(BundleStatus.RECYCLED);
}
+ @Override
+ public Mono<BundlePermissionView> getBundlePermissions(String bundleId) {
+
+ Mono<List<ResourcePermission>> bundlePermissions = resourcePermissionService.getByBundleId(bundleId).cache();
+
+ Mono<List<PermissionItemView>> groupPermissionPairsMono = bundlePermissions
+ .flatMap(permissionHelper::getGroupPermissions);
+
+ Mono<List<PermissionItemView>> userPermissionPairsMono = bundlePermissions
+ .flatMap(permissionHelper::getUserPermissions);
+
+ return checkCurrentUserBundlePermission(bundleId, READ_BUNDLES)
+ .then(bundleService.findByIdWithoutDsl(bundleId))
+ .delayUntil(bundle -> checkBundleStatus(bundle, BundleStatus.NORMAL))
+ .flatMap(bundle -> {
+ String creatorId = bundle.getCreatedBy();
+ String orgId = bundle.getOrganizationId();
+
+ Mono<Organization> orgMono = organizationService.getById(orgId);
+ return Mono.zip(groupPermissionPairsMono, userPermissionPairsMono, orgMono)
+ .map(tuple -> {
+ List<PermissionItemView> groupPermissionPairs = tuple.getT1();
+ List<PermissionItemView> userPermissionPairs = tuple.getT2();
+ Organization organization = tuple.getT3();
+ return BundlePermissionView.builder()
+ .groupPermissions(groupPermissionPairs)
+ .userPermissions(userPermissionPairs)
+ .creatorId(creatorId)
+ .orgName(organization.getName())
+ .publicToAll(bundle.isPublicToAll())
+ .publicToMarketplace(bundle.isPublicToMarketplace())
+ .agencyProfile(bundle.agencyProfile())
+ .build();
+ });
+ });
+ }
private Mono<Void> checkBundleStatus(String bundleId, BundleStatus expected) {
return bundleService.findById(bundleId)
@@ -251,6 +286,29 @@ public Mono<BundleInfoView> update(Bundle bundle) {
.flatMap(f -> buildBundleInfoView(f, true, true, null));
}
+ @Override
+ public Mono<BundleInfoView> publish(String bundleId) {
+ return checkBundleStatus(bundleId, BundleStatus.NORMAL)
+ .then(sessionUserService.getVisitorId())
+ .flatMap(userId -> resourcePermissionService.checkAndReturnMaxPermission(userId,
+ bundleId, PUBLISH_BUNDLES))
+ .flatMap(permission -> bundleService.publish(bundleId)
+ .map(bundleUpdated -> BundleInfoView.builder()
+ .bundleId(bundleUpdated.getId())
+ .name(bundleUpdated.getName())
+ .editingBundleDSL(bundleUpdated.getEditingBundleDSL())
+ .publishedBundleDSL(bundleUpdated.getPublishedBundleDSL())
+ .title(bundleUpdated.getTitle())
+ .image(bundleUpdated.getImage())
+ .createAt(bundleUpdated.getCreatedAt().toEpochMilli())
+ .category(bundleUpdated.getCategory())
+ .agencyProfile(bundleUpdated.getAgencyProfile())
+ .publicToAll(bundleUpdated.getPublicToAll())
+ .publicToMarketplace(bundleUpdated.getPublicToMarketplace())
+ .createBy(bundleUpdated.getCreatedBy())
+ .build()));
+ }
+
/**
* @param applicationId app id to move
* @param fromBundleId bundle id to remove app from
@@ -381,6 +439,31 @@ public Mono<BundleInfoView> getPublishedBundle(String bundleId, BundleRequestTyp
});
}
+ @Override
+ public Mono<BundleInfoView> getEditingBundle(String bundleId) {
+ return checkPermissionWithReadableErrorMsg(bundleId, READ_BUNDLES)
+ .zipWhen(permission -> bundleService.findById(bundleId)
+ .delayUntil(bundle -> checkBundleStatus(bundle, BundleStatus.NORMAL)))
+ .map(tuple -> {
+ Bundle bundle = tuple.getT2();
+ return BundleInfoView.builder()
+ .bundleId(bundle.getId())
+ .name(bundle.getName())
+ .title(bundle.getTitle())
+ .category(bundle.getCategory())
+ .description(bundle.getDescription())
+ .image(bundle.getImage())
+ .editingBundleDSL(bundle.getEditingBundleDSL())
+ .publicToMarketplace(bundle.getPublicToMarketplace())
+ .publicToAll(bundle.getPublicToAll())
+ .agencyProfile(bundle.getAgencyProfile())
+ .createAt(bundle.getCreatedAt().toEpochMilli())
+ .createTime(bundle.getCreatedAt())
+ .createBy(bundle.getCreatedBy())
+ .build();
+ });
+ }
+
private Mono<Void> checkBundleViewRequest(Bundle bundle, BundleRequestType expected) {
// TODO: check bundle.isPublicToAll() from v2.4.0
@@ -402,6 +485,28 @@ private Mono<Void> checkBundleViewRequest(Bundle bundle, BundleRequestType expec
return Mono.error(new BizException(BizError.UNSUPPORTED_OPERATION, "BAD_REQUEST"));
}
+ @Override
+ @Nonnull
+ public Mono<ResourcePermission> checkPermissionWithReadableErrorMsg(String bundleId, ResourceAction action) {
+ return sessionUserService.getVisitorId()
+ .flatMap(visitorId -> resourcePermissionService.checkUserPermissionStatusOnResource(visitorId, bundleId, action))
+ .flatMap(permissionStatus -> {
+ if (!permissionStatus.hasPermission()) {
+ if (permissionStatus.failByAnonymousUser()) {
+ return ofError(USER_NOT_SIGNED_IN, "USER_NOT_SIGNED_IN");
+ }
+
+ if (permissionStatus.failByNotInOrg()) {
+ return ofError(NO_PERMISSION_TO_REQUEST_APP, "INSUFFICIENT_PERMISSION");
+ }
+
+ String messageKey = action == EDIT_APPLICATIONS ? "NO_PERMISSION_TO_EDIT" : "NO_PERMISSION_TO_VIEW";
+ return ofError(NO_PERMISSION_TO_REQUEST_APP, messageKey);
+ }
+ return Mono.just(permissionStatus.getPermission());
+ });
+ }
+
@Override
@Nonnull
public Mono<ResourcePermission> checkBundlePermissionWithReadableErrorMsg(String bundleId, ResourceAction action, BundleRequestType requestType) {
@@ -442,30 +547,38 @@ private Mono<Boolean> isCreator(String bundleId) {
}
@Override
- public Mono<Void> grantPermission(String bundleId, Set<String> userIds, Set<String> groupIds, ResourceRole role) {
- if (CollectionUtils.isEmpty(userIds) && CollectionUtils.isEmpty(groupIds)) {
- return Mono.empty();
+ public Mono<Boolean> grantPermission(String bundleId, Set<String> userIds, Set<String> groupIds, ResourceRole role) {
+ if (userIds.isEmpty() && groupIds.isEmpty()) {
+ return Mono.just(true);
}
- return Mono.from(checkManagePermission(bundleId))
- .then(checkBundleExist(bundleId))
- .then(Mono.defer(() -> resourcePermissionService.insertBatchPermission(ResourceType.BUNDLE, bundleId, userIds, groupIds, role)))
- .then();
+
+ return checkCurrentUserBundlePermission(bundleId, MANAGE_BUNDLES)
+ .then(bundleService.findByIdWithoutDsl(bundleId))
+ .delayUntil(bundle -> checkBundleStatus(bundle, BundleStatus.NORMAL))
+ .switchIfEmpty(deferredError(BizError.BUNDLE_NOT_EXIST, "BUNDLE_NOT_FOUND", bundleId))
+ .then(resourcePermissionService.insertBatchPermission(ResourceType.BUNDLE, bundleId,
+ userIds, groupIds, role))
+ .thenReturn(true);
}
@Override
- public Mono<Void> updatePermission(String bundleId, String permissionId, ResourceRole role) {
- return Mono.from(checkManagePermission(bundleId))
- .then(checkPermissionResource(permissionId, bundleId))
- .then(resourcePermissionService.updateRoleById(permissionId, role))
- .then();
+ public Mono<Boolean> updatePermission(String bundleId, String permissionId, ResourceRole role) {
+ return checkCurrentUserBundlePermission(bundleId, MANAGE_BUNDLES)
+ .then(checkBundleStatus(bundleId, BundleStatus.NORMAL))
+ .then(resourcePermissionService.getById(permissionId))
+ .filter(permission -> StringUtils.equals(permission.getResourceId(), bundleId))
+ .switchIfEmpty(deferredError(ILLEGAL_BUNDLE_PERMISSION_ID, "ILLEGAL_BUNDLE_PERMISSION_ID"))
+ .then(resourcePermissionService.updateRoleById(permissionId, role));
}
@Override
- public Mono<Void> removePermission(String bundleId, String permissionId) {
- return Mono.from(checkManagePermission(bundleId))
- .then(checkPermissionResource(permissionId, bundleId))
- .then(resourcePermissionService.removeById(permissionId))
- .then();
+ public Mono<Boolean> removePermission(String bundleId, String permissionId) {
+ return checkCurrentUserBundlePermission(bundleId, MANAGE_BUNDLES)
+ .then(checkBundleStatus(bundleId, BundleStatus.NORMAL))
+ .then(resourcePermissionService.getById(permissionId))
+ .filter(permission -> StringUtils.equals(permission.getResourceId(), bundleId))
+ .switchIfEmpty(deferredError(ILLEGAL_BUNDLE_PERMISSION_ID, "ILLEGAL_BUNDLE_PERMISSION_ID"))
+ .then(resourcePermissionService.removeById(permissionId));
}
private Mono<Void> checkPermissionResource(String permissionId, String bundleId) {
@@ -516,6 +629,7 @@ public Mono<BundleInfoView> buildBundleInfoView(Bundle bundle, boolean visible,
.map(user -> BundleInfoView.builder()
.userId(bundle.getCreatedBy())
.bundleId(bundle.getId())
+ .bundleGid(bundle.getGid())
.title(bundle.getTitle())
.name(bundle.getName())
.description(bundle.getDescription())
diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/bundle/BundleController.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/bundle/BundleController.java
index 5d410fdf9..eac0bcd49 100644
--- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/bundle/BundleController.java
+++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/bundle/BundleController.java
@@ -64,6 +64,11 @@ public Mono<ResponseView<BundleInfoView>> update(@RequestBody Bundle bundle) {
.map(tuple2 -> ResponseView.success(tuple2.getT2()));
}
+ @Override
+ public Mono<ResponseView<BundleInfoView>> publish(@PathVariable String bundleId) {
+ return bundleApiService.publish(bundleId).map(ResponseView::success);
+ }
+
@Override
public Mono<ResponseView<Boolean>> recycle(@PathVariable String bundleId) {
return bundleApiService.recycle(bundleId)
diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/bundle/BundleEndpoints.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/bundle/BundleEndpoints.java
index 221939b9a..cb7e4966a 100644
--- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/bundle/BundleEndpoints.java
+++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/bundle/BundleEndpoints.java
@@ -253,6 +253,15 @@ public Mono<ResponseView<Boolean>> setBundlePublicToMarketplace(@PathVariable St
@PutMapping("/{bundleId}/agency-profile")
public Mono<ResponseView<Boolean>> setBundleAsAgencyProfile(@PathVariable String bundleId,
@RequestBody BundleEndpoints.BundleAsAgencyProfileRequest request);
+
+ @Operation(
+ tags = TAG_BUNDLE_MANAGEMENT,
+ operationId = "publicBundle",
+ summary = "Publish Bundle for users",
+ description = "Set a Lowcoder Bundle identified by its ID as available to all selected Users or User-Groups. This is similar to the classic deployment. The Lowcoder Bundle gets published in production mode."
+ )
+ @PostMapping("/{bundleId}/publish")
+ public Mono<ResponseView<BundleInfoView>> publish(@PathVariable String bundleId);
public record BundlePublicToAllRequest(Boolean publicToAll) {
@Override
@@ -283,6 +292,7 @@ public record UpdatePermissionRequest(String role) {
}
public record CreateBundleRequest(@JsonProperty("orgId") String organizationId,
+ String gid,
String name,
String title,
String description,
diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/bundle/view/BundleInfoView.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/bundle/view/BundleInfoView.java
index dbd01f9c9..343c2e7f1 100644
--- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/bundle/view/BundleInfoView.java
+++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/bundle/view/BundleInfoView.java
@@ -18,6 +18,7 @@ public class BundleInfoView {
private final String userId;
private final String bundleId;
+ private final String bundleGid;
private final String name;
private final String title;
private final String description;
diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/datasource/DatasourceApiServiceImpl.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/datasource/DatasourceApiServiceImpl.java
index 86aeecc92..716c22892 100644
--- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/datasource/DatasourceApiServiceImpl.java
+++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/datasource/DatasourceApiServiceImpl.java
@@ -1,5 +1,6 @@
package org.lowcoder.api.datasource;
+import com.github.f4b6a3.uuid.UuidCreator;
import jakarta.annotation.Nullable;
import lombok.RequiredArgsConstructor;
import org.apache.commons.collections4.CollectionUtils;
@@ -73,6 +74,7 @@ public class DatasourceApiServiceImpl implements DatasourceApiService {
@Override
public Mono<Datasource> create(Datasource datasource) {
+ if(StringUtils.isEmpty(datasource.getGid())) datasource.setGid(UuidCreator.getTimeOrderedEpoch().toString());
return sessionUserService.getVisitorId()
.flatMap(userId -> orgMemberService.getOrgMember(datasource.getOrganizationId(), userId))
.switchIfEmpty(deferredError(NOT_AUTHORIZED, "NOT_AUTHORIZED"))
diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/datasource/UpsertDatasourceRequest.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/datasource/UpsertDatasourceRequest.java
index c70f96239..6f099bc10 100644
--- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/datasource/UpsertDatasourceRequest.java
+++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/datasource/UpsertDatasourceRequest.java
@@ -10,6 +10,7 @@
public class UpsertDatasourceRequest {
private String id;
+ private String gid;
private String name;
private String type;
private String organizationId;
diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/datasource/UpsertDatasourceRequestMapper.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/datasource/UpsertDatasourceRequestMapper.java
index cbb0b6ec6..c6913479b 100644
--- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/datasource/UpsertDatasourceRequestMapper.java
+++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/datasource/UpsertDatasourceRequestMapper.java
@@ -3,6 +3,7 @@
import static org.lowcoder.sdk.exception.BizError.INVALID_DATASOURCE_CONFIGURATION;
import static org.lowcoder.sdk.util.ExceptionUtils.ofException;
+import com.github.f4b6a3.uuid.UuidCreator;
import org.apache.commons.lang3.StringUtils;
import org.lowcoder.domain.datasource.model.Datasource;
import org.lowcoder.domain.plugin.service.DatasourceMetaInfoService;
diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/framework/filter/ApiEventFilter.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/framework/filter/ApiEventFilter.java
index 73dbfd0f3..e8b75f8c3 100644
--- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/framework/filter/ApiEventFilter.java
+++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/framework/filter/ApiEventFilter.java
@@ -19,6 +19,7 @@
import reactor.core.scheduler.Schedulers;
import java.nio.charset.StandardCharsets;
+import java.util.Optional;
import static org.lowcoder.sdk.constants.GlobalContext.CURRENT_ORG_MEMBER;
import static org.lowcoder.sdk.constants.GlobalContext.VISITOR_TOKEN;
@@ -53,7 +54,8 @@ public Mono<Void> filter(ServerWebExchange exchange, WebFilterChain chain) {
private void emitEvent(ServerHttpRequest request, String token, OrgMember orgMember) {
MultiValueMap<String, String> headers = writableHttpHeaders(request.getHeaders());
headers.remove("Cookie");
- String ipAddress = headers.remove("X-Real-IP").stream().findFirst().get();
+ Optional<String> ipAddressOptional = headers.remove("X-Real-IP").stream().findFirst();
+ String ipAddress = ipAddressOptional.orElse("");
APICallEvent event = APICallEvent.builder()
.userId(orgMember.getUserId())
diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/framework/security/SecurityConfig.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/framework/security/SecurityConfig.java
index 8d0c16f92..079fb6c25 100644
--- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/framework/security/SecurityConfig.java
+++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/framework/security/SecurityConfig.java
@@ -77,6 +77,11 @@ SecurityWebFilterChain securityWebFilterChain(ServerHttpSecurity http) {
.anonymous(anonymous -> anonymous.principal(createAnonymousUser()))
.httpBasic(Customizer.withDefaults())
.authorizeExchange(customizer -> customizer
+ .matchers(
+ ServerWebExchangeMatchers.pathMatchers(HttpMethod.GET, APPLICATION_URL + "/home"),
+ ServerWebExchangeMatchers.pathMatchers(HttpMethod.GET, NewUrl.APPLICATION_URL + "/home")
+ )
+ .authenticated()
.matchers(
ServerWebExchangeMatchers.pathMatchers(HttpMethod.POST, CUSTOM_AUTH + "/otp/send"), // sms verification
ServerWebExchangeMatchers.pathMatchers(HttpMethod.POST, CUSTOM_AUTH + "/phone/login"),
@@ -91,6 +96,7 @@ SecurityWebFilterChain securityWebFilterChain(ServerHttpSecurity http) {
ServerWebExchangeMatchers.pathMatchers(HttpMethod.GET, CONFIG_URL), // system config
ServerWebExchangeMatchers.pathMatchers(HttpMethod.GET, SERVER_SETTING_URL), // system env
ServerWebExchangeMatchers.pathMatchers(HttpMethod.GET, CONFIG_URL + "/deploymentId"), // system config
+ ServerWebExchangeMatchers.pathMatchers(HttpMethod.GET, APPLICATION_URL + "/*"), // application view
ServerWebExchangeMatchers.pathMatchers(HttpMethod.GET, APPLICATION_URL + "/*/view"), // application view
ServerWebExchangeMatchers.pathMatchers(HttpMethod.GET, APPLICATION_URL + "/*/view_marketplace"), // application view
ServerWebExchangeMatchers.pathMatchers(HttpMethod.GET, APPLICATION_URL + "/marketplace-apps"), // marketplace apps
@@ -121,6 +127,7 @@ SecurityWebFilterChain securityWebFilterChain(ServerHttpSecurity http) {
ServerWebExchangeMatchers.pathMatchers(HttpMethod.GET, NewUrl.CONFIG_URL + "/deploymentId"),
ServerWebExchangeMatchers.pathMatchers(HttpMethod.HEAD, NewUrl.STATE_URL + "/healthCheck"),
ServerWebExchangeMatchers.pathMatchers(HttpMethod.GET, NewUrl.PREFIX + "/status/**"),
+ ServerWebExchangeMatchers.pathMatchers(HttpMethod.GET, NewUrl.APPLICATION_URL + "/*"),
ServerWebExchangeMatchers.pathMatchers(HttpMethod.GET, NewUrl.APPLICATION_URL + "/*/view"),
ServerWebExchangeMatchers.pathMatchers(HttpMethod.GET, NewUrl.APPLICATION_URL + "/*/view_marketplace"),
ServerWebExchangeMatchers.pathMatchers(HttpMethod.GET, NewUrl.APPLICATION_URL + "/marketplace-apps"), // marketplace apps
@@ -172,6 +179,7 @@ private CorsConfigurationSource buildCorsConfigurationSource() {
source.registerCorsConfiguration(CONFIG_URL, skipCheckCorsForAll);
source.registerCorsConfiguration(GROUP_URL + "/list", skipCheckCorsForAll);
source.registerCorsConfiguration(QUERY_URL + "/execute", skipCheckCorsForAll);
+ source.registerCorsConfiguration(APPLICATION_URL + "/*", skipCheckCorsForAll);
source.registerCorsConfiguration(APPLICATION_URL + "/*/view", skipCheckCorsForAll);
source.registerCorsConfiguration(APPLICATION_URL + "/*/view_marketplace", skipCheckCorsForAll);
source.registerCorsConfiguration(APPLICATION_URL + "/marketplace-apps", skipCheckCorsForAll);
@@ -183,6 +191,7 @@ private CorsConfigurationSource buildCorsConfigurationSource() {
source.registerCorsConfiguration(NewUrl.CONFIG_URL, skipCheckCorsForAll);
source.registerCorsConfiguration(NewUrl.GROUP_URL + "/list", skipCheckCorsForAll);
source.registerCorsConfiguration(NewUrl.QUERY_URL + "/execute", skipCheckCorsForAll);
+ source.registerCorsConfiguration(NewUrl.APPLICATION_URL + "/*", skipCheckCorsForAll);
source.registerCorsConfiguration(NewUrl.APPLICATION_URL + "/*/view", skipCheckCorsForAll);
source.registerCorsConfiguration(NewUrl.APPLICATION_URL + "/*/view_marketplace", skipCheckCorsForAll);
source.registerCorsConfiguration(NewUrl.APPLICATION_URL + "/marketplace-apps", skipCheckCorsForAll);
diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/home/FolderApiServiceImpl.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/home/FolderApiServiceImpl.java
index 5a33b3f8f..0517fa935 100644
--- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/home/FolderApiServiceImpl.java
+++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/home/FolderApiServiceImpl.java
@@ -1,5 +1,6 @@
package org.lowcoder.api.home;
+import com.github.f4b6a3.uuid.UuidCreator;
import jakarta.annotation.Nonnull;
import jakarta.annotation.Nullable;
import lombok.RequiredArgsConstructor;
@@ -84,6 +85,7 @@ public Mono<FolderInfoView> create(Folder folder) {
if (StringUtils.isBlank(folder.getName())) {
return Mono.error(new BizException(BizError.INVALID_PARAMETER, "FOLDER_NAME_EMPTY"));
}
+ if(StringUtils.isEmpty(folder.getId())) folder.setGid(UuidCreator.getTimeOrderedEpoch().toString());
return orgDevChecker.checkCurrentOrgDev()
.then(sessionUserService.getVisitorOrgMemberCache())
.delayUntil(orgMember -> {
@@ -315,7 +317,9 @@ private Mono<Tree<ApplicationInfoView, FolderInfoView>> buildApplicationInfoView
return FolderInfoView.builder()
.orgId(orgMember.getOrgId())
.folderId(folder.getId())
+ .folderGid(folder.getGid())
.parentFolderId(folder.getParentFolderId())
+ .parentFolderGid(folder.getParentFolderGid())
.name(folder.getName())
.createAt(folder.getCreatedAt().toEpochMilli())
.createBy(creator == null ? null : creator.getName())
@@ -435,6 +439,7 @@ public Mono<FolderInfoView> buildFolderInfoView(Folder folder, boolean visible,
.map(user -> FolderInfoView.builder()
.orgId(folder.getOrganizationId())
.folderId(folder.getId())
+ .folderGid(folder.getGid())
.parentFolderId(folder.getParentFolderId())
.name(folder.getName())
.description(folder.getDescription())
diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/home/FolderInfoView.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/home/FolderInfoView.java
index 17776f298..5113d04b7 100644
--- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/home/FolderInfoView.java
+++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/home/FolderInfoView.java
@@ -18,7 +18,9 @@ public class FolderInfoView {
private final String orgId;
private final String folderId;
+ private final String folderGid;
private final String parentFolderId;
+ private final String parentFolderGid;
private final String name;
private final String title;
private final String description;
diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/home/UserHomeApiServiceImpl.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/home/UserHomeApiServiceImpl.java
index ed99f9249..02a07ae40 100644
--- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/home/UserHomeApiServiceImpl.java
+++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/home/UserHomeApiServiceImpl.java
@@ -560,6 +560,7 @@ private ApplicationInfoView buildView(Application application, ResourceRole maxR
Long bundlePosition, boolean withContainerSize) {
ApplicationInfoViewBuilder applicationInfoViewBuilder = ApplicationInfoView.builder()
.applicationId(application.getId())
+ .applicationGid(application.getGid())
.orgId(application.getOrganizationId())
.name(application.getName())
.createBy(Optional.ofNullable(userMap.get(application.getCreatedBy()))
diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/query/view/LibraryQueryView.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/query/view/LibraryQueryView.java
index 25332b6a7..d9210fbbd 100644
--- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/query/view/LibraryQueryView.java
+++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/query/view/LibraryQueryView.java
@@ -6,6 +6,7 @@
import org.lowcoder.domain.user.model.User;
public record LibraryQueryView(String id,
+ String gid,
String organizationId,
String name,
Map<String, Object> libraryQueryDSL,
@@ -15,6 +16,7 @@ public record LibraryQueryView(String id,
public static LibraryQueryView from(LibraryQuery libraryQuery, User user) {
return new LibraryQueryView(libraryQuery.getId(),
libraryQuery.getOrganizationId(),
+ libraryQuery.getGid(),
libraryQuery.getName(),
libraryQuery.getLibraryQueryDSL(),
libraryQuery.getCreatedAt().toEpochMilli(),
diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/util/BusinessEventPublisher.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/util/BusinessEventPublisher.java
index b967f65a7..8ce67c774 100644
--- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/util/BusinessEventPublisher.java
+++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/api/util/BusinessEventPublisher.java
@@ -135,6 +135,7 @@ public Mono<Void> publishApplicationCommonEvent(ApplicationView applicationView,
.orgId(orgMember.getOrgId())
.userId(orgMember.getUserId())
.applicationId(applicationInfoView.getApplicationId())
+ .applicationGid(applicationInfoView.getApplicationGid())
.applicationName(applicationInfoView.getName())
.type(eventType)
.folderId(optional.map(Folder::getId).orElse(null))
diff --git a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/runner/migrations/DatabaseChangelog.java b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/runner/migrations/DatabaseChangelog.java
index 9ce6d7d7b..e7b06e5e1 100644
--- a/server/api-service/lowcoder-server/src/main/java/org/lowcoder/runner/migrations/DatabaseChangelog.java
+++ b/server/api-service/lowcoder-server/src/main/java/org/lowcoder/runner/migrations/DatabaseChangelog.java
@@ -3,7 +3,9 @@
import com.github.cloudyrock.mongock.ChangeLog;
import com.github.cloudyrock.mongock.ChangeSet;
import com.github.cloudyrock.mongock.driver.mongodb.springdata.v4.decorator.impl.MongockTemplate;
+import com.github.f4b6a3.uuid.UuidCreator;
import lombok.extern.slf4j.Slf4j;
+import org.bson.Document;
import org.lowcoder.domain.application.model.Application;
import org.lowcoder.domain.datasource.model.Datasource;
import org.lowcoder.domain.datasource.model.DatasourceStructureDO;
@@ -26,9 +28,15 @@
import org.springframework.context.annotation.Profile;
import org.springframework.data.domain.Sort;
import org.springframework.data.mongodb.UncategorizedMongoDbException;
+import org.springframework.data.mongodb.core.DocumentCallbackHandler;
import org.springframework.data.mongodb.core.index.CompoundIndexDefinition;
import org.springframework.data.mongodb.core.index.Index;
import org.springframework.data.mongodb.core.index.IndexOperations;
+import org.springframework.data.mongodb.core.query.Criteria;
+import org.springframework.data.mongodb.core.query.Query;
+import org.springframework.data.mongodb.core.query.Update;
+
+import java.util.Set;
import static org.lowcoder.domain.util.QueryDslUtils.fieldName;
import static org.lowcoder.sdk.util.IDUtils.generate;
@@ -194,6 +202,55 @@ public void addPtmFieldsToApplicatgions(AddPtmFieldsJob addPtmFieldsJob) {
addPtmFieldsJob.migrateApplicationsToInitPtmFields();
}
+ @ChangeSet(order = "022", id = "add-gid", author = "")
+ public void addGidToDBObjects(MongockTemplate mongoTemplate) {
+ // Define an array of collection names
+ String[] collectionNames = {"application", "bundle", "datasource", "libraryQuery", "folder"};
+
+ // Get the list of existing collections
+ Set<String> existingCollections = mongoTemplate.getCollectionNames();
+
+ for (String collectionName : collectionNames) {
+ if (existingCollections.contains(collectionName)) {
+ addGidField(mongoTemplate, collectionName);
+ } else {
+ System.out.println("Collection " + collectionName + " does not exist.");
+ }
+ }
+ }
+
+ private void addGidField(MongockTemplate mongoTemplate, String collectionName) {
+ // Create a query to match all documents
+ Query query = new Query();
+
+ // Use a DocumentCallbackHandler to iterate through each document
+ mongoTemplate.executeQuery(query, collectionName, new DocumentCallbackHandler() {
+ @Override
+ public void processDocument(Document document) {
+ // Generate a random UUID and ensure it is unique within the collection
+ String uniqueGid;
+ do {
+ uniqueGid = UuidCreator.getTimeOrderedEpoch().toString();
+ } while (isGidPresent(mongoTemplate, collectionName, uniqueGid));
+
+ // Create an update object to add the 'gid' field
+ Update update = new Update();
+ update.set("gid", uniqueGid);
+
+ // Create a query to match the current document by its _id
+ Query idQuery = new Query(Criteria.where("_id").is(document.getObjectId("_id")));
+
+ // Update the document with the new 'gid' field
+ mongoTemplate.updateFirst(idQuery, update, collectionName);
+ }
+ });
+ }
+
+ private boolean isGidPresent(MongockTemplate mongoTemplate, String collectionName, String gid) {
+ Query query = new Query(Criteria.where("gid").is(gid));
+ return mongoTemplate.exists(query, collectionName);
+ }
+
public static Index makeIndex(String... fields) {
if (fields.length == 1) {
return new Index(fields[0], Sort.Direction.ASC).named(fields[0]);
diff --git a/server/api-service/lowcoder-server/src/main/resources/application-debug.yaml b/server/api-service/lowcoder-server/src/main/resources/application-debug.yaml
index 2c7c5bbf1..56e6a0e67 100644
--- a/server/api-service/lowcoder-server/src/main/resources/application-debug.yaml
+++ b/server/api-service/lowcoder-server/src/main/resources/application-debug.yaml
@@ -1,17 +1,8 @@
-auth:
- api-key:
- secret: ${LOWCODER_API_KEY_SECRET:5a41b090758b39b226603177ef48d73ae9839dd458ccb7e66f7e7cc028d5a50b}
- email:
- enable: ${LOWCODER_EMAIL_AUTH_ENABLED:true}
- enable-register: ${LOWCODER_EMAIL_SIGNUP_ENABLED:true}
- workspace-creation: ${LOWCODER_CREATE_WORKSPACE_ON_SIGNUP:true}
-
spring:
data:
mongodb:
authentication-database: admin
- auto-index-creation: false
- uri: ${LOWCODER_MONGODB_URL:mongodb://lowcoder:secret123@localhost:27017/lowcoder?retryWrites=true&loadBalanced=false&connectTimeoutMS=10000&authSource=admin&authMechanism=SCRAM-SHA-256}
+ uri: "mongodb://lowcoder:secret123@127.0.0.1:27017/lowcoder?authSource=admin"
redis:
url: ${LOWCODER_REDIS_URL:redis://localhost:6379}
main:
@@ -38,42 +29,11 @@ spring:
transport:
protocol: smtp
server:
- compression:
- enabled: true
- forward-headers-strategy: NATIVE
- http2:
- enabled: true
port: 8080
- shutdown: graceful
-
-default:
- orgs-per-user: ${LOWCODER_MAX_ORGS_PER_USER:100}
- org-member-count: ${LOWCODER_MAX_MEMBERS_PER_ORG:1000}
- org-group-count: ${LOWCODER_MAX_GROUPS_PER_ORG:100}
- org-app-count: ${LOWCODER_MAX_APPS_PER_ORG:1000}
- developer-count: ${LOWCODER_MAX_DEVELOPERS:50}
- api-rate-limit: ${LOWCODER_API_RATE_LIMIT:50}
-
common:
- cookie-name: LOWCODER_CE_SELFHOST_TOKEN
- product: lowcoder
- domain:
- default-value: lowcoder.org
- cloud: false
- version: 2.1.4
- apiVersion: 1.1
- block-hound-enable: false
- encrypt:
- password: ${LOWCODER_DB_ENCRYPTION_PASSWORD:lowcoder.org}
- salt: ${LOWCODER_DB_ENCRYPTION_SALT:lowcoder.org}
- security:
- corsAllowedDomainString: ${LOWCODER_CORS_DOMAINS:*}
+ cookie-name: LOWCODER_DEBUG_TOKEN
js-executor:
- host: ${LOWCODER_NODE_SERVICE_URL:http://127.0.0.1:6060}
- max-query-request-size: ${LOWCODER_MAX_REQUEST_SIZE:20m}
- max-query-response-size: ${LOWCODER_MAX_REQUEST_SIZE:20m}
- max-upload-size: ${LOWCODER_MAX_REQUEST_SIZE:20m}
- max-query-timeout: ${LOWCODER_MAX_QUERY_TIMEOUT:120}
+ host: "http://127.0.0.1:6060"
workspace:
mode: ${LOWCODER_WORKSPACE_MODE:SAAS}
plugin-dirs:
@@ -86,39 +46,9 @@ common:
lowcoder-public-url: ${LOWCODER_PUBLIC_URL:http://localhost:3000}
notifications-email-sender: ${LOWCODER_EMAIL_NOTIFICATIONS_SENDER:info@localhost}
-material:
- mongodb-grid-fs:
- bucket-name: material
+debug: true
-springdoc:
- api-docs:
- path: /api/docs/openapi.json
- swagger-ui:
- path: /api/docs/swagger-ui
- paths-to-exclude: /api/v1/**
-
-management:
- endpoints:
- enabled-by-default: false
- web:
- base-path: "/api/status"
- exposure:
- include: "health,metrics,prometheus"
- endpoint:
- health:
- show-details: never
- show-components: always
- enabled: true
- metrics:
- enabled: true
- prometheus:
- enabled: true
- health:
- mail:
- enabled: false
- db:
- enabled: true
- redis:
- enabled: true
- diskspace:
- enabled: false
+logging:
+ level:
+ root: debug
+ org.lowcoder: debug
diff --git a/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/application/ApplicationApiServiceIntegrationTest.java b/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/application/ApplicationApiServiceIntegrationTest.java
index b2ceb0d4e..652305d3f 100644
--- a/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/application/ApplicationApiServiceIntegrationTest.java
+++ b/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/application/ApplicationApiServiceIntegrationTest.java
@@ -1,15 +1,14 @@
package org.lowcoder.api.application;
-import java.util.Map;
-import java.util.Set;
-
-import org.junit.Assert;
-import org.junit.Ignore;
-import org.junit.Test;
-import org.junit.runner.RunWith;
+import lombok.extern.slf4j.Slf4j;
+import org.junit.jupiter.api.Assertions;
+import org.junit.jupiter.api.BeforeEach;
+import org.junit.jupiter.api.Disabled;
+import org.junit.jupiter.api.Test;
import org.lowcoder.api.application.ApplicationEndpoints.CreateApplicationRequest;
import org.lowcoder.api.application.view.ApplicationView;
+import org.lowcoder.api.common.InitData;
import org.lowcoder.api.common.mockuser.WithMockUser;
import org.lowcoder.api.datasource.DatasourceApiService;
import org.lowcoder.api.datasource.DatasourceApiServiceIntegrationTest;
@@ -19,26 +18,37 @@
import org.lowcoder.domain.application.model.ApplicationType;
import org.lowcoder.domain.datasource.model.Datasource;
import org.lowcoder.domain.permission.model.ResourceRole;
+import org.lowcoder.sdk.constants.FieldName;
import org.lowcoder.sdk.exception.BizError;
import org.lowcoder.sdk.exception.BizException;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;
-import org.springframework.test.context.junit4.SpringRunner;
-
-import lombok.extern.slf4j.Slf4j;
+import org.springframework.test.context.ActiveProfiles;
import reactor.core.publisher.Mono;
import reactor.test.StepVerifier;
+import java.util.Map;
+import java.util.Set;
+
@SuppressWarnings({"OptionalGetWithoutIsPresent"})
@SpringBootTest
-@RunWith(SpringRunner.class)
+@ActiveProfiles("ApplicationApiServiceIntegrationTest")
+//@RunWith(SpringRunner.class)
@Slf4j(topic = "ApplicationApiServiceIntegrationTest")
+@Disabled("Enable after all plugins are loaded in test mode")
public class ApplicationApiServiceIntegrationTest {
@Autowired
private ApplicationApiService applicationApiService;
@Autowired
private DatasourceApiService datasourceApiService;
+ @Autowired
+ private InitData initData;
+
+ @BeforeEach
+ public void beforeEach() {
+ initData.init();
+ }
@SuppressWarnings("ConstantConditions")
@Test
@@ -59,6 +69,7 @@ public void testCreateApplicationSuccess() {
//
Mono<ApplicationView> applicationViewMono = datasourceMono.map(datasource -> new CreateApplicationRequest(
"org01",
+ "",
"app05",
ApplicationType.APPLICATION.getValue(),
Map.of("comp", "table"),
@@ -68,11 +79,13 @@ public void testCreateApplicationSuccess() {
.flatMap(createApplicationRequest -> applicationApiService.create(createApplicationRequest));
StepVerifier.create(applicationViewMono)
- .assertNext(applicationView -> Assert.assertNotNull(applicationView.getApplicationInfoView().getApplicationId()))
+ .assertNext(applicationView -> {
+ Assertions.assertNotNull(applicationView.getApplicationInfoView().getApplicationId());
+ Assertions.assertTrue(FieldName.isGID(applicationView.getApplicationInfoView().getApplicationGid()));
+ })
.verifyComplete();
}
- @Ignore
@SuppressWarnings("ConstantConditions")
@Test
@WithMockUser(id = "user02")
@@ -92,6 +105,7 @@ public void testUpdateApplicationFailedDueToLackOfDatasourcePermissions() {
//
Mono<ApplicationView> applicationViewMono = datasourceMono.map(datasource -> new CreateApplicationRequest(
"org01",
+ "",
"app03",
ApplicationType.APPLICATION.getValue(),
Map.of("comp", "table"),
diff --git a/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/application/ApplicationApiServiceTest.java b/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/application/ApplicationApiServiceTest.java
index 5f1d5c94b..743bc209d 100644
--- a/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/application/ApplicationApiServiceTest.java
+++ b/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/application/ApplicationApiServiceTest.java
@@ -1,17 +1,14 @@
package org.lowcoder.api.application;
-import java.util.List;
-import java.util.Map;
-import java.util.Set;
-
-import org.junit.Assert;
-import org.junit.Ignore;
-import org.junit.Test;
-import org.junit.runner.RunWith;
+import lombok.extern.slf4j.Slf4j;
+import org.junit.jupiter.api.Assertions;
+import org.junit.jupiter.api.BeforeEach;
+import org.junit.jupiter.api.Test;
import org.lowcoder.api.application.ApplicationEndpoints.CreateApplicationRequest;
import org.lowcoder.api.application.view.ApplicationPermissionView;
import org.lowcoder.api.application.view.ApplicationView;
+import org.lowcoder.api.common.InitData;
import org.lowcoder.api.common.mockuser.WithMockUser;
import org.lowcoder.api.datasource.DatasourceApiService;
import org.lowcoder.api.home.FolderApiService;
@@ -23,17 +20,21 @@
import org.lowcoder.domain.application.service.ApplicationService;
import org.lowcoder.domain.permission.model.ResourceHolder;
import org.lowcoder.domain.permission.model.ResourceRole;
+import org.lowcoder.sdk.constants.FieldName;
import org.lowcoder.sdk.exception.BizError;
import org.lowcoder.sdk.exception.BizException;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;
-import org.springframework.test.context.junit4.SpringRunner;
-
-import lombok.extern.slf4j.Slf4j;
+import org.springframework.test.context.ActiveProfiles;
import reactor.core.publisher.Mono;
import reactor.test.StepVerifier;
+
+import java.util.List;
+import java.util.Map;
+import java.util.Set;
@SpringBootTest
-@RunWith(SpringRunner.class)
+//@RunWith(SpringRunner.class)
+@ActiveProfiles("ApplicationApiServiceTest")
@Slf4j(topic = "ApplicationApiServiceTest")
public class ApplicationApiServiceTest {
@@ -45,10 +46,16 @@ public class ApplicationApiServiceTest {
private ApplicationService applicationService;
@Autowired
private DatasourceApiService datasourceApiService;
+ @Autowired
+ private InitData initData;
+
+ @BeforeEach
+ public void beforeEach() {
+ initData.init();
+ }
@Test
@WithMockUser
- @Ignore("Disabled until it is fixed")
public void testAutoInheritFoldersPermissionsOnAppCreate() {
Mono<ApplicationPermissionView> permissionViewMono =
folderApiService.grantPermission("folder01", Set.of("user02"), Set.of("group01"), ResourceRole.EDITOR)
@@ -58,7 +65,7 @@ public void testAutoInheritFoldersPermissionsOnAppCreate() {
StepVerifier.create(permissionViewMono)
.assertNext(applicationPermissionView -> {
- Assert.assertTrue(applicationPermissionView.getPermissions().stream()
+ Assertions.assertTrue(applicationPermissionView.getPermissions().stream()
.anyMatch(permissionItemView ->
equals(permissionItemView, PermissionItemView.builder()
.type(ResourceHolder.GROUP)
@@ -66,7 +73,7 @@ public void testAutoInheritFoldersPermissionsOnAppCreate() {
.role(ResourceRole.EDITOR.getValue())
.build())
));
- Assert.assertTrue(applicationPermissionView.getPermissions().stream()
+ Assertions.assertTrue(applicationPermissionView.getPermissions().stream()
.anyMatch(permissionItemView ->
equals(permissionItemView, PermissionItemView.builder()
.type(ResourceHolder.USER)
@@ -74,7 +81,7 @@ public void testAutoInheritFoldersPermissionsOnAppCreate() {
.role(ResourceRole.OWNER.getValue())
.build())
));
- Assert.assertTrue(applicationPermissionView.getPermissions().stream()
+ Assertions.assertTrue(applicationPermissionView.getPermissions().stream()
.anyMatch(permissionItemView ->
equals(permissionItemView, PermissionItemView.builder()
.type(ResourceHolder.USER)
@@ -94,7 +101,6 @@ private boolean equals(PermissionItemView p1, PermissionItemView p2) {
@Test
@WithMockUser
- @Ignore("Disabled until it is fixed")
public void testRecycleAndDeleteApplicationSuccess() {
Mono<Application> applicationMono = createApplication("app02", null)
@@ -103,13 +109,12 @@ public void testRecycleAndDeleteApplicationSuccess() {
.delayUntil(applicationId -> applicationApiService.delete(applicationId))
.flatMap(applicationId -> applicationService.findById(applicationId));
StepVerifier.create(applicationMono)
- .assertNext(application -> Assert.assertSame(application.getApplicationStatus(), ApplicationStatus.DELETED))
+ .assertNext(application -> Assertions.assertSame(application.getApplicationStatus(), ApplicationStatus.DELETED))
.verifyComplete();
}
@Test
@WithMockUser
- @Ignore("Disabled until it is fixed")
public void testDeleteNormalApplicationWithError() {
StepVerifier.create(applicationApiService.delete("app02"))
@@ -120,14 +125,13 @@ public void testDeleteNormalApplicationWithError() {
private Mono<ApplicationView> createApplication(String name, String folderId) {
CreateApplicationRequest createApplicationRequest =
- new CreateApplicationRequest("org01", name, ApplicationType.APPLICATION.getValue(),
+ new CreateApplicationRequest("org01", "", name, ApplicationType.APPLICATION.getValue(),
Map.of("comp", "table"), Map.of("comp", "list"), folderId);
return applicationApiService.create(createApplicationRequest);
}
@Test
@WithMockUser
- @Ignore("Disabled until it is fixed")
public void testPublishApplication() {
Mono<String> applicationIdMono = createApplication("test", null)
.map(applicationView -> applicationView.getApplicationInfoView().getApplicationId())
@@ -135,12 +139,12 @@ public void testPublishApplication() {
// edit dsl before publish
StepVerifier.create(applicationIdMono.flatMap(id -> applicationApiService.getEditingApplication(id)))
- .assertNext(applicationView -> Assert.assertEquals(Map.of("comp", "list"), applicationView.getApplicationDSL()))
+ .assertNext(applicationView -> Assertions.assertEquals(Map.of("comp", "list"), applicationView.getApplicationDSL()))
.verifyComplete();
// published dsl before publish
StepVerifier.create(applicationIdMono.flatMap(id -> applicationApiService.getPublishedApplication(id, ApplicationRequestType.PUBLIC_TO_ALL)))
- .assertNext(applicationView -> Assert.assertEquals(Map.of("comp", "table"), applicationView.getApplicationDSL()))
+ .assertNext(applicationView -> Assertions.assertEquals(Map.of("comp", "table"), applicationView.getApplicationDSL()))
.verifyComplete();
// publish
@@ -149,18 +153,17 @@ public void testPublishApplication() {
// edit dsl after publish
StepVerifier.create(applicationIdMono.flatMap(id -> applicationApiService.getEditingApplication(id)))
- .assertNext(applicationView -> Assert.assertEquals(Map.of("comp", "list"), applicationView.getApplicationDSL()))
+ .assertNext(applicationView -> Assertions.assertEquals(Map.of("comp", "list"), applicationView.getApplicationDSL()))
.verifyComplete();
// published dsl after publish
StepVerifier.create(applicationIdMono.flatMap(id -> applicationApiService.getPublishedApplication(id, ApplicationRequestType.PUBLIC_TO_ALL)))
- .assertNext(applicationView -> Assert.assertEquals(Map.of("comp", "list"), applicationView.getApplicationDSL()))
+ .assertNext(applicationView -> Assertions.assertEquals(Map.of("comp", "list"), applicationView.getApplicationDSL()))
.verifyComplete();
}
@Test
@WithMockUser
- @Ignore("Disabled until it is fixed")
public void testPermissions() {
// test grant permissions.
Mono<ApplicationPermissionView> applicationPermissionViewMono =
@@ -169,8 +172,8 @@ public void testPermissions() {
StepVerifier.create(applicationPermissionViewMono)
.assertNext(applicationPermissionView -> {
List<PermissionItemView> permissions = applicationPermissionView.getPermissions();
- Assert.assertEquals(2, permissions.size());
- Assert.assertTrue(permissions.stream()
+ Assertions.assertEquals(2, permissions.size());
+ Assertions.assertTrue(permissions.stream()
.anyMatch(permissionItemView -> {
PermissionItemView other = PermissionItemView.builder()
.type(ResourceHolder.USER)
@@ -179,7 +182,7 @@ public void testPermissions() {
.build();
return equals(permissionItemView, other);
}));
- Assert.assertTrue(permissions.stream()
+ Assertions.assertTrue(permissions.stream()
.anyMatch(permissionItemView -> {
PermissionItemView other = PermissionItemView.builder()
.type(ResourceHolder.GROUP)
@@ -205,7 +208,7 @@ public void testPermissions() {
return equals(permissionItemView, other);
})
.toList();
- Assert.assertEquals(1, permissionItemViews.size());
+ Assertions.assertEquals(1, permissionItemViews.size());
String permissionId = permissionItemViews.get(0).getPermissionId();
return applicationApiService.updatePermission("app01", permissionId, ResourceRole.VIEWER);
})
@@ -213,8 +216,8 @@ public void testPermissions() {
StepVerifier.create(applicationPermissionViewMono)
.assertNext(applicationPermissionView -> {
List<PermissionItemView> permissions = applicationPermissionView.getPermissions();
- Assert.assertEquals(2, permissions.size());
- Assert.assertTrue(permissions.stream()
+ Assertions.assertEquals(2, permissions.size());
+ Assertions.assertTrue(permissions.stream()
.anyMatch(permissionItemView -> {
PermissionItemView other = PermissionItemView.builder()
.type(ResourceHolder.USER)
@@ -223,7 +226,7 @@ public void testPermissions() {
.build();
return equals(permissionItemView, other);
}));
- Assert.assertTrue(permissions.stream()
+ Assertions.assertTrue(permissions.stream()
.anyMatch(permissionItemView -> {
PermissionItemView other = PermissionItemView.builder()
.type(ResourceHolder.GROUP)
@@ -249,7 +252,7 @@ public void testPermissions() {
return equals(permissionItemView, other);
})
.toList();
- Assert.assertEquals(1, permissionItemViews.size());
+ Assertions.assertEquals(1, permissionItemViews.size());
String permissionId = permissionItemViews.get(0).getPermissionId();
return applicationApiService.removePermission("app01", permissionId);
})
@@ -258,8 +261,8 @@ public void testPermissions() {
StepVerifier.create(applicationPermissionViewMono)
.assertNext(applicationPermissionView -> {
List<PermissionItemView> permissions = applicationPermissionView.getPermissions();
- Assert.assertEquals(1, permissions.size());
- Assert.assertTrue(permissions.stream()
+ Assertions.assertEquals(1, permissions.size());
+ Assertions.assertTrue(permissions.stream()
.anyMatch(permissionItemView -> {
PermissionItemView other = PermissionItemView.builder()
.type(ResourceHolder.GROUP)
@@ -272,4 +275,21 @@ public void testPermissions() {
.verifyComplete();
}
+ @Test
+ @WithMockUser
+ public void testAppCreateAndRetrievalByGID() {
+
+ Mono<Application> applicationMono = createApplication("test", null)
+ .map(applicationView -> applicationView.getApplicationInfoView().getApplicationGid())
+ .delayUntil(applicationGid -> applicationApiService.recycle(applicationGid))
+ .delayUntil(applicationGid -> applicationApiService.delete(applicationGid))
+ .flatMap(applicationGid -> applicationService.findById(applicationGid));
+ StepVerifier.create(applicationMono)
+ .assertNext(application -> {
+ Assertions.assertSame(application.getApplicationStatus(), ApplicationStatus.DELETED);
+ Assertions.assertNotNull(application.getGid());
+ Assertions.assertTrue(FieldName.isGID(application.getGid()));
+ })
+ .verifyComplete();
+ }
}
\ No newline at end of file
diff --git a/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/application/CompoundApplicationDslFilterTest.java b/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/application/CompoundApplicationDslFilterTest.java
index a19a81611..58cdf6cac 100644
--- a/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/application/CompoundApplicationDslFilterTest.java
+++ b/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/application/CompoundApplicationDslFilterTest.java
@@ -1,52 +1,57 @@
package org.lowcoder.api.application;
import org.apache.commons.collections4.MapUtils;
-import org.junit.Assert;
-import org.junit.Ignore;
-import org.junit.Test;
-import org.junit.runner.RunWith;
+import org.junit.jupiter.api.Assertions;
+import org.junit.jupiter.api.BeforeEach;
+import org.junit.jupiter.api.Test;
+import org.lowcoder.api.common.InitData;
import org.lowcoder.api.common.mockuser.WithMockUser;
import org.lowcoder.sdk.constants.DslConstants.CompoundAppDslConstants;
import org.lowcoder.sdk.test.JsonFileReader;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;
-import org.springframework.test.context.junit4.SpringRunner;
+import org.springframework.test.context.ActiveProfiles;
import java.util.HashMap;
import java.util.Map;
import java.util.Set;
@SpringBootTest
-@RunWith(SpringRunner.class)
+@ActiveProfiles("test")
+//@RunWith(SpringRunner.class)
public class CompoundApplicationDslFilterTest {
@Autowired
private CompoundApplicationDslFilter filter;
+ @Autowired
+ private InitData initData;
+
+ @BeforeEach
+ public void beforeEach() {
+ initData.init();
+ }
@Test
- @Ignore("Disabled until it is fixed")
public void testGetAllSubAppIdsFromCompoundAppDsl() {
Map<String, Object> dsl = JsonFileReader.readMap(CompoundApplicationDslFilterTest.class);
Set<String> ids = filter.getAllSubAppIdsFromCompoundAppDsl(getTargetDsl(dsl));
- Assert.assertEquals(Set.of("app01", "app03", "app04", "app06", "app07"), ids);// only get the leaf's id.
+ Assertions.assertEquals(Set.of("app01", "app03", "app04", "app06", "app07"), ids);// only get the leaf's id.
}
@Test
@WithMockUser
- @Ignore("Disabled until it is fixed")
public void testRemoveSubAppsFromCompoundDslWithAdminUser() {
Map<String, Object> dsl = JsonFileReader.readMap(CompoundApplicationDslFilterTest.class);
filter.removeSubAppsFromCompoundDsl(dsl).block();
Set<String> ids = filter.getAllSubAppIdsFromCompoundAppDsl(getTargetDsl(dsl));
// admin user has all applications' permissions, so will remove nothing.
- Assert.assertEquals(Set.of("app01", "app03", "app04", "app06", "app07"), ids);
+ Assertions.assertEquals(Set.of("app01", "app03", "app04", "app06", "app07"), ids);
}
@Test
@WithMockUser(id = "user02")
- @Ignore("Disabled until it is fixed")
public void testRemoveSubAppsFromCompoundDslWithNormalUser() {
Map<String, Object> dsl = JsonFileReader.readMap(CompoundApplicationDslFilterTest.class);
@@ -54,7 +59,7 @@ public void testRemoveSubAppsFromCompoundDslWithNormalUser() {
Set<String> ids = filter.getAllSubAppIdsFromCompoundAppDsl(getTargetDsl(dsl));
// current user has no permissions, so will remove all, except the applications with the
// "hideWhenNoPermission" value equal to false.
- Assert.assertEquals(Set.of("app03"), ids);
+ Assertions.assertEquals(Set.of("app03"), ids);
}
@SuppressWarnings("unchecked")
diff --git a/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/authentication/AdvancedMapUtilsTest.java b/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/authentication/AdvancedMapUtilsTest.java
new file mode 100644
index 000000000..bba317339
--- /dev/null
+++ b/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/authentication/AdvancedMapUtilsTest.java
@@ -0,0 +1,29 @@
+package org.lowcoder.api.authentication;
+
+import org.junit.jupiter.api.Assertions;
+import org.junit.jupiter.api.Test;
+import org.lowcoder.api.authentication.util.AdvancedMapUtils;
+
+import java.util.Arrays;
+import java.util.Collections;
+import java.util.HashMap;
+import java.util.Map;
+
+public class AdvancedMapUtilsTest {
+ @Test
+ public void testGetStringFromMap() throws Exception {
+ Map<String, Object> nestedMap = new HashMap<>();
+ nestedMap.put("abc", Arrays.asList(
+ Collections.singletonMap("def", Collections.singletonMap("hi", "hello world")),
+ Collections.singletonMap("def", Collections.singletonMap("hi", "another value"))
+ ));
+ nestedMap.put("false", "123");
+
+ String value0 = AdvancedMapUtils.getString(nestedMap, "abc[0].def.hi");
+ String value1 = AdvancedMapUtils.getString(nestedMap, "abc[1].def.hi");
+ String value2 = AdvancedMapUtils.getString(nestedMap, "false");
+ Assertions.assertSame("hello world", value0);
+ Assertions.assertSame("another value", value1);
+ Assertions.assertSame(null, value2);
+ }
+}
diff --git a/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/authentication/AuthenticationControllerTest.java b/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/authentication/AuthenticationControllerTest.java
index 6d792a5ab..3c665b783 100644
--- a/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/authentication/AuthenticationControllerTest.java
+++ b/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/authentication/AuthenticationControllerTest.java
@@ -1,19 +1,7 @@
package org.lowcoder.api.authentication;
-import static org.junit.Assert.assertEquals;
-import static org.junit.Assert.assertFalse;
-import static org.junit.Assert.assertNotNull;
-import static org.junit.Assert.assertNull;
-import static org.junit.Assert.assertTrue;
-import static org.lowcoder.sdk.exception.BizError.INVALID_PASSWORD;
-import static org.lowcoder.sdk.exception.BizError.USER_LOGIN_ID_EXIST;
-
-import java.util.Map;
-import java.util.Objects;
-
-import org.junit.Ignore;
-import org.junit.Test;
-import org.junit.runner.RunWith;
+import com.google.common.collect.Iterables;
+import org.junit.jupiter.api.Test;
import org.lowcoder.api.authentication.AuthenticationEndpoints.FormLoginRequest;
import org.lowcoder.api.framework.view.ResponseView;
import org.lowcoder.domain.authentication.AuthenticationService;
@@ -32,17 +20,20 @@
import org.springframework.mock.http.server.reactive.MockServerHttpRequest;
import org.springframework.mock.web.server.MockServerWebExchange;
import org.springframework.test.context.ActiveProfiles;
-import org.springframework.test.context.junit4.SpringRunner;
import org.springframework.util.MultiValueMap;
-
-import com.google.common.collect.Iterables;
-
import reactor.core.publisher.Mono;
import reactor.test.StepVerifier;
+import java.util.Map;
+import java.util.Objects;
+
+import static org.junit.jupiter.api.Assertions.*;
+import static org.lowcoder.sdk.exception.BizError.INVALID_PASSWORD;
+import static org.lowcoder.sdk.exception.BizError.USER_LOGIN_ID_EXIST;
+
@SpringBootTest
-@RunWith(SpringRunner.class)
-@ActiveProfiles("AuthenticationControllerTest")
+//@RunWith(SpringRunner.class)
+@ActiveProfiles("test")
public class AuthenticationControllerTest {
@Autowired
@@ -55,7 +46,6 @@ public class AuthenticationControllerTest {
private AuthenticationService authenticationService;
@Test
- @Ignore("Disabled until it is fixed")
public void testFormRegisterSuccess() {
String email = "test_register@ob.dev";
String password = "lowcoder";
@@ -102,7 +92,6 @@ public void testFormRegisterSuccess() {
.verifyComplete();
}
@Test
- @Ignore("Disabled until it is fixed")
public void testFormLoginSuccess() {
String email = "test_login@ob.dev";
String password = "lowcoder";
@@ -156,7 +145,6 @@ public void testFormLoginSuccess() {
}
@Test
- @Ignore("Disabled until it is fixed")
public void testRegisterFailByLoginIdExist() {
String email = "test_register_fail@ob.dev";
@@ -179,7 +167,6 @@ public void testRegisterFailByLoginIdExist() {
}
@Test
- @Ignore("Disabled until it is fixed")
public void testLoginFailByLoginIdNotExist() {
String email = "test_login_fail@ob.dev";
String password = "lowcoder";
@@ -207,7 +194,6 @@ private String getEmailAuthConfigId() {
}
@Test
- @Ignore("Disabled until it is fixed")
public void logout() {
}
}
diff --git a/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/authentication/GenericAuthenticateTest.java b/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/authentication/GenericAuthenticateTest.java
index 8ff0b8fd1..86c18ba0f 100644
--- a/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/authentication/GenericAuthenticateTest.java
+++ b/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/authentication/GenericAuthenticateTest.java
@@ -3,8 +3,11 @@
import com.github.tomakehurst.wiremock.junit5.WireMockRuntimeInfo;
import com.github.tomakehurst.wiremock.junit5.WireMockTest;
import lombok.extern.slf4j.Slf4j;
+import org.junit.jupiter.api.BeforeAll;
+import org.junit.jupiter.api.BeforeEach;
import org.junit.jupiter.api.Test;
import org.junit.jupiter.api.extension.ExtendWith;
+import org.lowcoder.api.common.InitData;
import org.lowcoder.api.common.mockuser.WithMockUser;
import org.lowcoder.domain.authentication.AuthenticationService;
import org.lowcoder.domain.authentication.FindAuthConfig;
@@ -28,6 +31,8 @@
import reactor.test.StepVerifier;
import reactor.util.context.Context;
+import java.util.HashMap;
+
import static com.github.tomakehurst.wiremock.client.WireMock.*;
import static org.junit.jupiter.api.Assertions.assertEquals;
import static org.junit.jupiter.api.Assertions.assertTrue;
@@ -35,7 +40,7 @@
/**
* This class is for testing GenericAuth feature
*/
-@ActiveProfiles("test")
+@ActiveProfiles("testGeneric")
@SpringBootTest
//@RunWith(SpringRunner.class)
@WireMockTest
@@ -49,12 +54,22 @@ public class GenericAuthenticateTest {
private UserRepository userRepository;
@Autowired
private AuthenticationService authenticationService;
+ @Autowired
+ private InitData initData;
+ @BeforeEach
+ public void beforeEach() {
+ initData.init();
+ }
@Test
@WithMockUser
public void testGoogleLoginSuccess(WireMockRuntimeInfo wmRuntimeInfo) {
log.info("Running mock server on port: {}", wmRuntimeInfo.getHttpPort());
//Begin mocking services
+ HashMap<String, String> sourceMappings = new HashMap<String, String>();
+ sourceMappings.put("jwt", "id_token");
+ sourceMappings.put("uid", "sub");
+ sourceMappings.put("username", "name");
var authConfig = Oauth2GenericAuthConfig.builder()
.source(AuthSourceConstants.GOOGLE)
.sourceName(AuthSourceConstants.GOOGLE_NAME)
@@ -71,7 +86,9 @@ public void testGoogleLoginSuccess(WireMockRuntimeInfo wmRuntimeInfo) {
.tokenEndpoint(wmRuntimeInfo.getHttpBaseUrl() + "/oauth2/v4/token")
.userInfoEndpoint(wmRuntimeInfo.getHttpBaseUrl() + "/oauth2/v2/userinfo")
.scope("scope")
+ .sourceMappings(sourceMappings)
.userInfoIntrospection(true)
+ .userCanSelectAccounts(true)
.build();
var organization = Organization.builder().build();
@@ -80,7 +97,7 @@ public void testGoogleLoginSuccess(WireMockRuntimeInfo wmRuntimeInfo) {
Mockito.when(authenticationService.findAuthConfigBySource(Mockito.any(), Mockito.any())).thenReturn(Mono.just(mockAuthConfig));
stubFor(post(urlPathEqualTo("/oauth2/v4/token"))
- .willReturn(okJson("{\"access_token\":\"ya29.a0AfH6SMB...\",\"expires_in\":3600,\"token_type\":\"Bearer\",\"scope\":\"https://www.googleapis.com/auth/userinfo.profile\"}")));
+ .willReturn(okJson("{\"access_token\":\"ya29.a0AfH6SMB...\",\"expires_in\":3600,\"token_type\":\"Bearer\",\"scope\":\"https://www.googleapis.com/auth/userinfo.profile\",\"id_token\": \"eyJhbGciOiJSUzI1NiIsImtpZCI6IjNkNTgwZjBhZjdhY2U2OThhMGNlZTdmMjMwYmNhNTk0ZGM2ZGJiNTUiLCJ0eXAiOiJKV1QifQ.eyJpc3MiOiJodHRwczovL2FjY291bnRzLmdvb2dsZS5jb20iLCJhenAiOiIyMjIwMTc1NDgwNzYtcWU1bzBnbWxiMjRtcHRmanE5aGlwazRzNHFvcnN2OGEuYXBwcy5nb29nbGV1c2VyY29udGVudC5jb20iLCJhdWQiOiIyMjIwMTc1NDgwNzYtcWU1bzBnbWxiMjRtcHRmanE5aGlwazRzNHFvcnN2OGEuYXBwcy5nb29nbGV1c2VyY29udGVudC5jb20iLCJzdWIiOiIxMTMyNDk5MjY4NDI2Mzg2NDkzNzEiLCJhdF9oYXNoIjoiblRwVUJzamRXbnlMcDZfM2RsM2MxUSIsIm5hbWUiOiJUZWNoIE5pbmphIiwicGljdHVyZSI6Imh0dHBzOi8vbGgzLmdvb2dsZXVzZXJjb250ZW50LmNvbS9hL0FDZzhvY0xfS3Z5OXI5SVVibVoySmRlSnJwUUpOY2pUbGhqdHpEY2hvVlJabVdrUkxUUEozOTg9czk2LWMiLCJnaXZlbl9uYW1lIjoiVGVjaCIsImZhbWlseV9uYW1lIjoiTmluamEiLCJpYXQiOjE3MTg4MDUwNzQsImV4cCI6MTcxODgwODY3NH0.UiT0D77_jG5cwAHNZFOT-M2tX-ht2EztOSqZKDfEU7P1-Y6cv0CTESvueI7DC6M_5l942UxXnNBE5SCYluQGNNBg6gLU_lpLNoUnfVUE2ocPjKIxSZeTwyCxYbCtOGL7G5BdWAk-dJhyAudzG3_lLSuz8M7XgomWPC1s7Z5uaD8TH5BdNclV-3kYzNV0CtOPxQ00eAtHhi3MUswTCdwb0cFQl_2GXRdLiXjBGzBY4fe_tarihMDjXXXFrxHsIiB-VcLKWBfl8vRvMxR4Rb\"}")));
stubFor(get(urlPathEqualTo("/oauth2/v2/userinfo"))
.willReturn(okJson("{\"sub\":\"user001\",\"email\":\"user001@gmail.com\"}")));
//
@@ -101,12 +118,13 @@ public void testGoogleLoginSuccess(WireMockRuntimeInfo wmRuntimeInfo) {
StepVerifier.create(userMono)
.assertNext(user -> {
- assertEquals("user001@gmail.com", user.getName());
+ assertEquals("Tech Ninja", user.getName());
assertEquals(UserState.ACTIVATED, user.getState());
assertEquals(1, user.getConnections().size());
assertTrue(user.getIsEnabled());
})
.verifyComplete();
+ Mockito.framework().clearInlineMocks();
}
private Mono<String> getGenericAuthConfigId(String orgId) {
diff --git a/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/authentication/GoogleAuthenticateTest.java b/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/authentication/GoogleAuthenticateTest.java
deleted file mode 100644
index c194e10c4..000000000
--- a/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/authentication/GoogleAuthenticateTest.java
+++ /dev/null
@@ -1,105 +0,0 @@
-package org.lowcoder.api.authentication;
-
-import static org.junit.Assert.assertEquals;
-import static org.junit.Assert.assertFalse;
-import static org.junit.Assert.assertNotNull;
-import static org.junit.Assert.assertNull;
-import static org.junit.Assert.assertTrue;
-
-import java.util.Map;
-import java.util.Objects;
-
-import org.junit.Ignore;
-import org.junit.Test;
-import org.junit.runner.RunWith;
-import org.lowcoder.api.authentication.AuthenticationEndpoints.FormLoginRequest;
-import org.lowcoder.domain.authentication.AuthenticationService;
-import org.lowcoder.domain.authentication.FindAuthConfig;
-import org.lowcoder.domain.encryption.EncryptionService;
-import org.lowcoder.domain.user.model.Connection;
-import org.lowcoder.domain.user.model.User;
-import org.lowcoder.domain.user.model.UserState;
-import org.lowcoder.domain.user.repository.UserRepository;
-import org.lowcoder.sdk.auth.AbstractAuthConfig;
-import org.lowcoder.sdk.constants.AuthSourceConstants;
-import org.springframework.beans.factory.annotation.Autowired;
-import org.springframework.boot.test.context.SpringBootTest;
-import org.springframework.http.ResponseCookie;
-import org.springframework.mock.http.server.reactive.MockServerHttpRequest;
-import org.springframework.mock.web.server.MockServerWebExchange;
-import org.springframework.test.context.junit4.SpringRunner;
-import org.springframework.util.MultiValueMap;
-
-import com.google.common.collect.Iterables;
-
-import reactor.core.publisher.Mono;
-import reactor.test.StepVerifier;
-
-@SpringBootTest
-@RunWith(SpringRunner.class)
-public class GoogleAuthenticateTest {
-
- @Autowired
- private AuthenticationController authenticationController;
- @Autowired
- private UserRepository userRepository;
- @Autowired
- private EncryptionService encryptionService;
- @Autowired
- private AuthenticationService authenticationService;
-
- @Ignore
- @Test
- public void testGoogleRegisterSuccess() {
- String email = "test_register@ob.dev";
- String password = "lowcoder";
- String source = AuthSourceConstants.EMAIL;
-
- String authId = getGoogleAuthConfigId();
- FormLoginRequest formLoginRequest = new FormLoginRequest(email, password, true, source, authId);
- MockServerHttpRequest request = MockServerHttpRequest.post("").build();
- MockServerWebExchange exchange = MockServerWebExchange.builder(request).build();
-
- Mono<User> userMono = authenticationController.formLogin(formLoginRequest, null,null, exchange)
- .then(userRepository.findByConnections_SourceAndConnections_RawId(source, email));
-
- StepVerifier.create(userMono)
- .assertNext(user -> {
- assertEquals(email, user.getName());
- assertNull(user.getAvatar());
- assertNull(user.getTpAvatarLink());
- assertEquals(UserState.ACTIVATED, user.getState());
- assertTrue(user.getIsEnabled());
- assertTrue(encryptionService.matchPassword(password, user.getPassword()));
- assertFalse(user.getIsAnonymous());
- assertFalse(user.getIsNewUser());//
- assertFalse(user.isHasSetNickname());
- assertNotNull(user.getId());
- //connections
- assertEquals(1, user.getConnections().size());
- Connection connection = Iterables.getFirst(user.getConnections(), null);
- assertNotNull(connection);
- assertEquals(authId, connection.getAuthId());
- assertEquals(source, connection.getSource());
- assertEquals(email, connection.getRawId());
- assertEquals(email, connection.getName());
- assertNull(connection.getAvatar());
- assertEquals(1, connection.getOrgIds().size());
- assertNull(connection.getAuthConnectionAuthToken());
- assertEquals(Map.of("email", email), connection.getRawUserInfo());
- //exchange
- MultiValueMap<String, ResponseCookie> cookies = exchange.getResponse().getCookies();
- assertEquals(1, cookies.size());
- assertTrue(cookies.containsKey("UT-TACO-TOKEN"));
- assertTrue(connection.getTokens().contains(Objects.requireNonNull(cookies.getFirst("UT-TACO-TOKEN")).getValue()));
- })
- .verifyComplete();
- }
-
- private String getGoogleAuthConfigId() {
- return authenticationService.findAuthConfigBySource(null, AuthSourceConstants.GOOGLE)
- .map(FindAuthConfig::authConfig)
- .map(AbstractAuthConfig::getId)
- .block();
- }
-}
diff --git a/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/authentication/JwtDecoderUtilTest.java b/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/authentication/JwtDecoderUtilTest.java
new file mode 100644
index 000000000..755877d24
--- /dev/null
+++ b/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/authentication/JwtDecoderUtilTest.java
@@ -0,0 +1,60 @@
+package org.lowcoder.api.authentication;
+
+import org.junit.jupiter.api.Test;
+import org.lowcoder.api.authentication.util.JwtDecoderUtil;
+
+import java.util.Map;
+
+import static org.junit.jupiter.api.Assertions.*;
+
+class JwtDecoderUtilTest {
+
+ @Test
+ void testDecodeJwtPayload_ValidJwt() throws Exception {
+ // Example JWT with payload: {"sub":"1234567890","name":"John Doe","iat":1516239022}
+ String jwt = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c";
+
+ Map<String, Object> payload = JwtDecoderUtil.decodeJwtPayload(jwt);
+
+ assertNotNull(payload);
+ assertEquals("1234567890", payload.get("sub"));
+ assertEquals("John Doe", payload.get("name"));
+ assertEquals(1516239022, payload.get("iat"));
+ }
+
+ @Test
+ void testDecodeJwtPayload_InvalidJwtFormat() {
+ // Example of an invalid JWT (missing parts)
+ String jwt = "invalid-jwt";
+
+ Exception exception = assertThrows(IllegalArgumentException.class, () -> {
+ JwtDecoderUtil.decodeJwtPayload(jwt);
+ });
+
+ assertEquals("Invalid JWT format.", exception.getMessage());
+ }
+
+ @Test
+ void testDecodeJwtPayload_InvalidBase64() {
+ // Example of a JWT with an invalid base64 payload part
+ String jwt = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.invalid-base64.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c";
+
+ Exception exception = assertThrows(Exception.class, () -> {
+ JwtDecoderUtil.decodeJwtPayload(jwt);
+ });
+
+ assertTrue(exception instanceof IllegalArgumentException || exception instanceof java.io.IOException);
+ }
+
+ @Test
+ void testDecodeJwtPayload_EmptyPayload() throws Exception {
+ // Example of a JWT with an empty payload
+ String jwt = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c";
+
+ Exception exception = assertThrows(Exception.class, () -> {
+ JwtDecoderUtil.decodeJwtPayload(jwt);
+ });
+
+ assertTrue(exception instanceof java.io.IOException);
+ }
+}
\ No newline at end of file
diff --git a/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/bundle/BundleApiServiceImplTest.java b/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/bundle/BundleApiServiceImplTest.java
index a201fea81..4e04bd79e 100644
--- a/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/bundle/BundleApiServiceImplTest.java
+++ b/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/bundle/BundleApiServiceImplTest.java
@@ -1,37 +1,60 @@
package org.lowcoder.api.bundle;
-import org.junit.Test;
-import org.junit.runner.RunWith;
+import org.junit.jupiter.api.Assertions;
+import org.junit.jupiter.api.BeforeEach;
+import org.junit.jupiter.api.Test;
import org.lowcoder.api.bundle.view.BundleInfoView;
-import org.lowcoder.api.home.SessionUserServiceImpl;
+import org.lowcoder.api.bundle.view.BundlePermissionView;
+import org.lowcoder.api.common.InitData;
+import org.lowcoder.api.common.mockuser.WithMockUser;
+import org.lowcoder.api.home.FolderApiService;
+import org.lowcoder.api.permission.view.PermissionItemView;
+import org.lowcoder.domain.bundle.model.Bundle;
import org.lowcoder.domain.bundle.model.BundleRequestType;
-import org.lowcoder.domain.organization.model.MemberRole;
-import org.lowcoder.domain.organization.model.OrgMember;
+import org.lowcoder.domain.bundle.model.BundleStatus;
+import org.lowcoder.domain.bundle.service.BundleService;
+import org.lowcoder.domain.permission.model.ResourceHolder;
+import org.lowcoder.domain.permission.model.ResourceRole;
+import org.lowcoder.sdk.constants.FieldName;
+import org.lowcoder.sdk.exception.BizError;
+import org.lowcoder.sdk.exception.BizException;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;
-import org.springframework.boot.test.mock.mockito.MockBean;
-import org.springframework.test.context.junit4.SpringRunner;
+import org.springframework.test.context.ActiveProfiles;
+import reactor.core.publisher.Flux;
import reactor.core.publisher.Mono;
import reactor.test.StepVerifier;
+import java.util.List;
+import java.util.Set;
+
import static org.junit.jupiter.api.Assertions.*;
-import static org.mockito.Mockito.when;
@SpringBootTest
-@RunWith(SpringRunner.class)
+//@RunWith(SpringRunner.class)
+@ActiveProfiles("BundleApiServiceImplTest")
public class BundleApiServiceImplTest {
@Autowired
BundleApiServiceImpl bundleApiService;
- @MockBean
- SessionUserServiceImpl sessionUserService;
+ @Autowired
+ private FolderApiService folderApiService;
+ @Autowired
+ private BundleService bundleService;
+ @Autowired
+ private InitData initData;
+
+ @BeforeEach
+ public void beforeEach() {
+ initData.init();
+ }
@Test
- public void createBundleTest() {
+ @WithMockUser
+ public void createBundleTestAdminUser() {
//When org admin user creates bundle it succeed
- when(sessionUserService.getVisitorId()).thenReturn(Mono.just("user01"));
- when(sessionUserService.getVisitorOrgMemberCache()).thenReturn(Mono.just(new OrgMember("org01", "user01", MemberRole.ADMIN, "NORMAL", 0)));
Mono<BundleInfoView> bundleInfoViewMono = bundleApiService.create(new BundleEndpoints.CreateBundleRequest(
"org01",
+ "",
"name1",
"title",
"description",
@@ -50,14 +73,18 @@ public void createBundleTest() {
assertFalse(bundleInfoView.getPublicToMarketplace());
assertFalse(bundleInfoView.getAgencyProfile());
assertNull(bundleInfoView.getFolderId());
+ assertNotNull(bundleInfoView.getBundleGid());
+ assertTrue(FieldName.isGID(bundleInfoView.getBundleGid()));
})
.verifyComplete();
-
+ }
+ @Test
+ @WithMockUser(id="user02")
+ public void createBundleTestDevUser() {
//When org dev user creates bundle it succeed
- when(sessionUserService.getVisitorId()).thenReturn(Mono.just("user02"));
- when(sessionUserService.getVisitorOrgMemberCache()).thenReturn(Mono.just(new OrgMember("org01", "user02", MemberRole.MEMBER, "NORMAL", 0)));
Mono<BundleInfoView> bundleInfoViewMono1 = bundleApiService.create(new BundleEndpoints.CreateBundleRequest(
"org01",
+ "",
"name2",
"title",
"description",
@@ -76,14 +103,18 @@ public void createBundleTest() {
assertFalse(bundleInfoView.getPublicToMarketplace());
assertFalse(bundleInfoView.getAgencyProfile());
assertNull(bundleInfoView.getFolderId());
+ assertNotNull(bundleInfoView.getBundleGid());
+ assertTrue(FieldName.isGID(bundleInfoView.getBundleGid()));
})
.verifyComplete();
-
+ }
+ @Test
+ @WithMockUser(id="user03")
+ public void createBundleTestNonDevUser() {
//When non-dev create bundle throws error
- when(sessionUserService.getVisitorId()).thenReturn(Mono.just("user01"));
- when(sessionUserService.getVisitorOrgMemberCache()).thenReturn(Mono.just(new OrgMember("org01", "user01", MemberRole.MEMBER, "NORMAL", 0)));
Mono<BundleInfoView> bundleInfoViewMono2 = bundleApiService.create(new BundleEndpoints.CreateBundleRequest(
"org01",
+ "",
"name3",
"title",
"description",
@@ -96,12 +127,12 @@ public void createBundleTest() {
}
@Test
- public void moveAddAppTest() {
- when(sessionUserService.getVisitorId()).thenReturn(Mono.just("user01"));
- when(sessionUserService.getVisitorOrgMemberCache()).thenReturn(Mono.just(new OrgMember("org01", "user01", MemberRole.ADMIN, "NORMAL", 0)));
+ @WithMockUser
+ public void moveAddAppTestAdmin() {
//Create bundles
Mono<BundleInfoView> bundleInfoViewMono = bundleApiService.create(new BundleEndpoints.CreateBundleRequest(
"org01",
+ "",
"name4",
"title",
"description",
@@ -111,6 +142,7 @@ public void moveAddAppTest() {
Mono<BundleInfoView> bundleInfoViewMono2 = bundleApiService.create(new BundleEndpoints.CreateBundleRequest(
"org01",
+ "",
"name5",
"title",
"description",
@@ -125,13 +157,6 @@ public void moveAddAppTest() {
return bundleApiService.addApp("app01", bundleInfoView.getBundleId())
.then(bundleApiService.moveApp("app01", bundleInfoView.getBundleId(), bundleInfoView2.getBundleId()))
- .then(Mono.fromRunnable(() -> {
- // Try a no-dev user to add app to bundle
- when(sessionUserService.getVisitorId()).thenReturn(Mono.just("user01"));
- when(sessionUserService.getVisitorOrgMemberCache()).thenReturn(Mono.just(new OrgMember("org01", "user01", MemberRole.MEMBER, "NORMAL", 0)));
- }))
- .then(bundleApiService.addApp("app01", bundleInfoView.getBundleId()).onErrorResume(e -> Mono.empty()))
- .then(bundleApiService.moveApp("app01", bundleInfoView.getBundleId(), bundleInfoView2.getBundleId()).onErrorResume(e -> Mono.empty()))
//Get published bundle
.then(bundleApiService.getPublishedBundle(bundleInfoView2.getBundleId(), BundleRequestType.PUBLIC_TO_ALL))
.doOnNext(bundle -> {
@@ -145,4 +170,267 @@ public void moveAddAppTest() {
StepVerifier.create(testMono)
.verifyComplete();
}
+
+ @Test
+ @WithMockUser(id="user02")
+ public void moveAddAppTestNonDev() {
+ //Create bundles
+ Mono<BundleInfoView> bundleInfoViewMono = bundleApiService.create(new BundleEndpoints.CreateBundleRequest(
+ "org01",
+ "",
+ "name4",
+ "title",
+ "description",
+ "category",
+ "image",
+ null));
+
+ Mono<BundleInfoView> bundleInfoViewMono2 = bundleApiService.create(new BundleEndpoints.CreateBundleRequest(
+ "org01",
+ "",
+ "name5",
+ "title",
+ "description",
+ "category",
+ "image",
+ null));
+
+ Flux<?> testFlux = Flux.zip(bundleInfoViewMono, bundleInfoViewMono2)
+ .flatMap(tuple2 -> {
+ var bundleInfoView = tuple2.getT1();
+ var bundleInfoView2 = tuple2.getT2();
+
+ return Flux.concat(bundleApiService.addApp("app01", bundleInfoView.getBundleId()),
+ bundleApiService.moveApp("app01", bundleInfoView.getBundleId(), bundleInfoView2.getBundleId()));
+ });
+
+ StepVerifier.create(testFlux)
+ .expectError()
+ .verify();
+
+ StepVerifier.create(testFlux)
+ .expectError()
+ .verify();
+ }
+
+ private Mono<BundleInfoView> createBundle(String name, String folderId) {
+ BundleEndpoints.CreateBundleRequest createBundleRequest =
+ new BundleEndpoints.CreateBundleRequest("org01", "" ,name, "title", "desc", "category", "image", folderId);
+ return bundleApiService.create(createBundleRequest);
+ }
+
+ @Test
+ @WithMockUser
+ public void testPublishBundle() {
+ Mono<String> bundleIdMono = createBundle("test", null)
+ .map(BundleInfoView::getBundleId)
+ .delayUntil(id ->bundleApiService.addApp("app01", id))
+ .cache();
+
+ // edit dsl before publish
+ StepVerifier.create(bundleIdMono.flatMap(id -> bundleApiService.getEditingBundle(id)))
+ .assertNext(bundleView -> Assertions.assertNotNull(bundleView.getEditingBundleDSL()))
+ .verifyComplete();
+
+ // published dsl before publish
+ StepVerifier.create(bundleIdMono.flatMap(id -> bundleApiService.getPublishedBundle(id, BundleRequestType.PUBLIC_TO_ALL)))
+ .assertNext(bundleView -> Assertions.assertNull(bundleView.getPublishedBundleDSL()))
+ .verifyComplete();
+
+ // publish
+ bundleIdMono = bundleIdMono
+ .delayUntil(id -> bundleApiService.publish(id));
+
+ // edit dsl after publish
+ StepVerifier.create(bundleIdMono.flatMap(id -> bundleApiService.getEditingBundle(id)))
+ .assertNext(bundleView -> Assertions.assertNotNull(bundleView.getEditingBundleDSL()))
+ .verifyComplete();
+
+ // published dsl after publish
+ StepVerifier.create(bundleIdMono.flatMap(id -> bundleApiService.getPublishedBundle(id, BundleRequestType.PUBLIC_TO_ALL)))
+ .assertNext(bundleView -> Assertions.assertNotNull(bundleView.getPublishedBundleDSL()))
+ .verifyComplete();
+ }
+
+ private boolean equals(PermissionItemView p1, PermissionItemView p2) {
+ return p1.getType() == p2.getType()
+ && p1.getId().equals(p2.getId())
+ && p1.getRole().equals(p2.getRole());
+ }
+
+ @Test
+ @WithMockUser
+ public void testAutoInheritFoldersPermissionsOnBundleCreate() {
+ Mono<BundlePermissionView> permissionViewMono =
+ folderApiService.grantPermission("folder01", Set.of("user02"), Set.of("group01"), ResourceRole.EDITOR)
+ .then(createBundle("test2", "folder01"))
+ .flatMap(bundleView -> bundleApiService.getBundlePermissions(
+ bundleView.getBundleId()));
+
+ StepVerifier.create(permissionViewMono)
+ .assertNext(bundlePermissionView -> {
+ Assertions.assertTrue(bundlePermissionView.getPermissions().stream()
+ .anyMatch(permissionItemView ->
+ equals(permissionItemView, PermissionItemView.builder()
+ .type(ResourceHolder.GROUP)
+ .id("group01")
+ .role(ResourceRole.EDITOR.getValue())
+ .build())
+ ));
+ Assertions.assertTrue(bundlePermissionView.getPermissions().stream()
+ .anyMatch(permissionItemView ->
+ equals(permissionItemView, PermissionItemView.builder()
+ .type(ResourceHolder.USER)
+ .id("user01")
+ .role(ResourceRole.OWNER.getValue())
+ .build())
+ ));
+ Assertions.assertTrue(bundlePermissionView.getPermissions().stream()
+ .anyMatch(permissionItemView ->
+ equals(permissionItemView, PermissionItemView.builder()
+ .type(ResourceHolder.USER)
+ .id("user02")
+ .role(ResourceRole.EDITOR.getValue())
+ .build())
+ ));
+ })
+ .verifyComplete();
+ }
+
+ @Test
+ @WithMockUser
+ public void testRecycleAndDeleteBundleSuccess() {
+
+ Mono<Bundle> bundleMono = createBundle("bundle02", null)
+ .map(BundleInfoView::getBundleId)
+ .delayUntil(bundleId -> bundleApiService.recycle(bundleId))
+ .delayUntil(bundleId -> bundleApiService.delete(bundleId))
+ .flatMap(bundleId -> bundleService.findById(bundleId));
+ StepVerifier.create(bundleMono)
+ .assertNext(bundle -> Assertions.assertSame(bundle.getBundleStatus(), BundleStatus.DELETED))
+ .verifyComplete();
+ }
+
+ @Test
+ @WithMockUser
+ public void testDeleteNormalBundleWithError() {
+
+ StepVerifier.create(bundleApiService.delete("bundle02"))
+ .expectErrorMatches(throwable -> throwable instanceof BizException bizException
+ && bizException.getError() == BizError.UNSUPPORTED_OPERATION)
+ .verify();
+ }
+
+ @Test
+ @WithMockUser
+ public void testPermissions() {
+ // test grant permissions.
+ Mono<BundlePermissionView> bundlePermissionViewMono =
+ bundleApiService.grantPermission("bundle01", Set.of("user02"), Set.of("group01"), ResourceRole.EDITOR)
+ .then(bundleApiService.getBundlePermissions("bundle01"));
+ StepVerifier.create(bundlePermissionViewMono)
+ .assertNext(bundlePermissionView -> {
+ List<PermissionItemView> permissions = bundlePermissionView.getPermissions();
+ Assertions.assertEquals(2, permissions.size());
+ Assertions.assertTrue(permissions.stream()
+ .anyMatch(permissionItemView -> {
+ PermissionItemView other = PermissionItemView.builder()
+ .type(ResourceHolder.USER)
+ .id("user02")
+ .role(ResourceRole.EDITOR.getValue())
+ .build();
+ return equals(permissionItemView, other);
+ }));
+ Assertions.assertTrue(permissions.stream()
+ .anyMatch(permissionItemView -> {
+ PermissionItemView other = PermissionItemView.builder()
+ .type(ResourceHolder.GROUP)
+ .id("group01")
+ .role(ResourceRole.EDITOR.getValue())
+ .build();
+ return equals(permissionItemView, other);
+ }));
+ })
+ .verifyComplete();
+
+ // test update permissions.
+ bundlePermissionViewMono = bundleApiService.getBundlePermissions("bundle01")
+ .flatMap(bundlePermissionView -> {
+ List<PermissionItemView> permissionItemViews = bundlePermissionView.getPermissions()
+ .stream()
+ .filter(permissionItemView -> {
+ PermissionItemView other = PermissionItemView.builder()
+ .type(ResourceHolder.USER)
+ .id("user02")
+ .role(ResourceRole.EDITOR.getValue())
+ .build();
+ return equals(permissionItemView, other);
+ })
+ .toList();
+ Assertions.assertEquals(1, permissionItemViews.size());
+ String permissionId = permissionItemViews.get(0).getPermissionId();
+ return bundleApiService.updatePermission("bundle01", permissionId, ResourceRole.VIEWER);
+ })
+ .then(bundleApiService.getBundlePermissions("bundle01"));
+ StepVerifier.create(bundlePermissionViewMono)
+ .assertNext(bundlePermissionView -> {
+ List<PermissionItemView> permissions = bundlePermissionView.getPermissions();
+ Assertions.assertEquals(2, permissions.size());
+ Assertions.assertTrue(permissions.stream()
+ .anyMatch(permissionItemView -> {
+ PermissionItemView other = PermissionItemView.builder()
+ .type(ResourceHolder.USER)
+ .id("user02")
+ .role(ResourceRole.VIEWER.getValue())// updated
+ .build();
+ return equals(permissionItemView, other);
+ }));
+ Assertions.assertTrue(permissions.stream()
+ .anyMatch(permissionItemView -> {
+ PermissionItemView other = PermissionItemView.builder()
+ .type(ResourceHolder.GROUP)
+ .id("group01")
+ .role(ResourceRole.EDITOR.getValue())
+ .build();
+ return equals(permissionItemView, other);
+ }));
+ })
+ .verifyComplete();
+
+ // test remove permissions.
+ bundlePermissionViewMono = bundleApiService.getBundlePermissions("bundle01")
+ .flatMap(bundlePermissionView -> {
+ List<PermissionItemView> permissionItemViews = bundlePermissionView.getPermissions()
+ .stream()
+ .filter(permissionItemView -> {
+ PermissionItemView other = PermissionItemView.builder()
+ .type(ResourceHolder.USER)
+ .id("user02")
+ .role(ResourceRole.VIEWER.getValue())
+ .build();
+ return equals(permissionItemView, other);
+ })
+ .toList();
+ Assertions.assertEquals(1, permissionItemViews.size());
+ String permissionId = permissionItemViews.get(0).getPermissionId();
+ return bundleApiService.removePermission("bundle01", permissionId);
+ })
+ .then(bundleApiService.getBundlePermissions("bundle01"));
+
+ StepVerifier.create(bundlePermissionViewMono)
+ .assertNext(bundlePermissionView -> {
+ List<PermissionItemView> permissions = bundlePermissionView.getPermissions();
+ Assertions.assertEquals(1, permissions.size());
+ Assertions.assertTrue(permissions.stream()
+ .anyMatch(permissionItemView -> {
+ PermissionItemView other = PermissionItemView.builder()
+ .type(ResourceHolder.GROUP)
+ .id("group01")
+ .role(ResourceRole.EDITOR.getValue())
+ .build();
+ return equals(permissionItemView, other);
+ }));
+ })
+ .verifyComplete();
+ }
}
diff --git a/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/common/InitData.java b/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/common/InitData.java
index d50770ac4..2f0701387 100644
--- a/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/common/InitData.java
+++ b/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/common/InitData.java
@@ -9,8 +9,6 @@
import java.util.concurrent.atomic.AtomicInteger;
import java.util.stream.Stream;
-import jakarta.annotation.PostConstruct;
-
import org.apache.commons.collections4.MapUtils;
import org.apache.commons.io.IOUtils;
import org.lowcoder.sdk.models.HasIdAndAuditing;
@@ -18,6 +16,7 @@
import org.lowcoder.sdk.util.JsonUtils;
import org.lowcoder.sdk.util.MoreMapUtils;
import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.dao.DuplicateKeyException;
import org.springframework.data.mongodb.core.ReactiveMongoTemplate;
import org.springframework.stereotype.Component;
@@ -29,26 +28,11 @@ public class InitData {
@Autowired
private ReactiveMongoTemplate mongoTemplate;
- @PostConstruct
- @SuppressWarnings("BusyWait")
public void init() {
try {
- while (true) {
- if (STATE.compareAndSet(0, 1)) {
- // execute only once.
- execute();
- STATE.set(2);
- }
- if (STATE.get() == 1) {
- // wait for executing success.
- Thread.sleep(50);
- continue;
- }
- if (STATE.get() == 2) {
- // execute end, then break.
- break;
- }
- }
+ execute();
+ } catch (DuplicateKeyException ignored) {
+
} catch (Exception e) {
throw new RuntimeException(e);
}
diff --git a/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/common/json/application.json b/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/common/json/application.json
index ccad36206..b4d6ed647 100644
--- a/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/common/json/application.json
+++ b/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/common/json/application.json
@@ -3,6 +3,7 @@
"data": [
{
"id": "app01",
+ "gid": "019053a0-22be-7bd0-a92e-28f4abb4a8ea",
"name": "app01",
"organizationId": "org01",
"applicationType": 1,
@@ -10,6 +11,7 @@
},
{
"id": "app02",
+ "gid": "019053a0-551c-7bcd-b329-a5926e245d44",
"name": "app02",
"organizationId": "org01",
"applicationType": 1,
@@ -17,6 +19,7 @@
},
{
"id": "app03",
+ "gid": "019053a0-8814-7c5f-a57b-12ce664b66c3",
"name": "app03",
"organizationId": "org01",
"applicationType": 1,
@@ -24,6 +27,7 @@
},
{
"id": "app04",
+ "gid": "019053a0-a790-7617-84d9-efc8b601fc6a",
"name": "app04",
"organizationId": "org01",
"applicationType": 1,
@@ -31,6 +35,7 @@
},
{
"id": "app05",
+ "gid": "019053a0-c978-73a8-abe4-7ad1009ec13e",
"name": "app05",
"organizationId": "org01",
"applicationType": 1,
@@ -38,6 +43,7 @@
},
{
"id": "app06",
+ "gid": "019053a0-ec0e-76e2-8b69-185c5137ca96",
"name": "app06",
"organizationId": "org01",
"applicationType": 1,
@@ -45,6 +51,7 @@
},
{
"id": "app07",
+ "gid": "019053a1-0c40-79ed-882d-e822594b6cfe",
"name": "app07",
"organizationId": "org01",
"applicationType": 1,
@@ -52,6 +59,7 @@
},
{
"id": "app08",
+ "gid": "019053a1-371c-7432-9458-97bbe3018939",
"name": "app08",
"organizationId": "org01",
"applicationType": 1,
@@ -59,6 +67,7 @@
},
{
"id": "app09",
+ "gid": "019053a1-6eda-7472-8dda-7d858ec02f97",
"name": "app09",
"organizationId": "org01",
"applicationType": 1,
@@ -66,6 +75,7 @@
},
{
"id": "app10",
+ "gid": "019053a1-9a04-7a57-8089-b6bc6f429ec6",
"name": "app10",
"organizationId": "org01",
"applicationType": 1,
diff --git a/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/common/json/bundle.json b/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/common/json/bundle.json
new file mode 100644
index 000000000..baa98663a
--- /dev/null
+++ b/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/common/json/bundle.json
@@ -0,0 +1,75 @@
+{
+ "class": "org.lowcoder.domain.bundle.model.Bundle",
+ "data": [
+ {
+ "id": "bundle01",
+ "gid": "019053a1-ce82-7f28-bf17-d2251497a54e",
+ "name": "bundle01",
+ "organizationId": "org01",
+ "bundleStatus": "NORMAL"
+ },
+ {
+ "id": "bundle02",
+ "gid": "019053a1-f771-7c3a-9f33-6f79d50ad5d4",
+ "name": "bundle02",
+ "organizationId": "org01",
+ "bundleStatus": "NORMAL"
+ },
+ {
+ "id": "bundle03",
+ "gid": "019053a2-19e4-72b1-ac58-bf5debe20444",
+ "name": "bundle03",
+ "organizationId": "org01",
+ "bundleStatus": "RECYCLED"
+ },
+ {
+ "id": "bundle04",
+ "gid": "019053a2-3ab7-75a9-b347-49e9a7095e97",
+ "name": "bundle04",
+ "organizationId": "org01",
+ "bundleStatus": "DELETED"
+ },
+ {
+ "id": "bundle05",
+ "gid": "019053a2-83f4-76fb-8f10-47c0420176d6",
+ "name": "bundle05",
+ "organizationId": "org01",
+ "bundleStatus": "NORMAL"
+ },
+ {
+ "id": "bundle06",
+ "gid": "019053a2-a618-7b0f-b54c-e5038d10da71",
+ "name": "bundle06",
+ "organizationId": "org01",
+ "bundleStatus": "NORMAL"
+ },
+ {
+ "id": "bundle07",
+ "gid": "019053a2-c9a8-7a89-8d5c-e3870f3a2d24",
+ "name": "bundle07",
+ "organizationId": "org01",
+ "bundleStatus": "NORMAL"
+ },
+ {
+ "id": "bundle08",
+ "gid": "019053a2-e92f-7985-9cce-ce87ea7121c0",
+ "name": "bundle08",
+ "organizationId": "org01",
+ "bundleStatus": "NORMAL"
+ },
+ {
+ "id": "bundle09",
+ "gid": "019053a3-105b-7d3f-a38c-3dbac7b3c4e6",
+ "name": "bundle09",
+ "organizationId": "org01",
+ "bundleStatus": "NORMAL"
+ },
+ {
+ "id": "bundle10",
+ "gid": "019053a3-3d41-7531-9c50-6da5e4b288c7",
+ "name": "bundle10",
+ "organizationId": "org01",
+ "bundleStatus": "NORMAL"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/common/json/folder.json b/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/common/json/folder.json
index 254093ce0..a0d382506 100644
--- a/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/common/json/folder.json
+++ b/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/common/json/folder.json
@@ -3,17 +3,27 @@
"data": [
{
"id": "folder01",
+ "gid": "019053a3-bc53-7227-bbb1-42a8b5fa0af8",
"organizationId": "org01",
"name": "folder01"
},
{
"id": "folder02",
+ "gid": "019053a3-f968-7a57-91fd-36f50d43713c",
"organizationId": "org01",
"name": "folder02",
"createdBy": "user01"
},
{
"id": "folder03",
+ "gid": "019053a4-08ae-7cd2-83ec-eee51d4835ed",
+ "organizationId": "org01",
+ "name": "folder03",
+ "createdBy": "user01"
+ },
+ {
+ "id": "folder04",
+ "gid": "01905d61-5c7e-788a-b650-82c983f04968",
"organizationId": "org01",
"name": "folder03",
"createdBy": "user01"
diff --git a/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/common/json/organization.json b/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/common/json/organization.json
index 630259cbf..8b789e7f9 100644
--- a/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/common/json/organization.json
+++ b/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/common/json/organization.json
@@ -3,6 +3,7 @@
"data": [
{
"id": "org01",
+ "gid": "019053a4-c5c8-7621-8740-e3a43e1e85d1",
"name": "The Avengers",
"state": "ACTIVE",
"organizationDomain": {
@@ -25,7 +26,13 @@
"authType": "GENERIC",
"userInfoIntrospection": false,
"enable": true,
- "enableRegister": true
+ "enableRegister": true,
+ "sourceMappings": {
+ "uid": "sub",
+ "email": "email",
+ "username": "username",
+ "avatar": "avatar"
+ }
}
]
}
diff --git a/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/configurations/AuthenticactionServiceTestConfiguration.java b/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/configurations/AuthenticactionServiceTestConfiguration.java
index 512f909d3..b55944de2 100644
--- a/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/configurations/AuthenticactionServiceTestConfiguration.java
+++ b/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/configurations/AuthenticactionServiceTestConfiguration.java
@@ -1,5 +1,6 @@
package org.lowcoder.api.configurations;
+import org.lowcoder.api.common.InitData;
import org.lowcoder.domain.authentication.AuthenticationServiceImpl;
import org.mockito.Mockito;
import org.springframework.context.annotation.Bean;
@@ -7,7 +8,7 @@
import org.springframework.context.annotation.Primary;
import org.springframework.context.annotation.Profile;
-@Profile("test")
+@Profile("testGeneric")
@Configuration
public class AuthenticactionServiceTestConfiguration {
@Bean
@@ -15,4 +16,9 @@ public class AuthenticactionServiceTestConfiguration {
public AuthenticationServiceImpl authenticationService() {
return Mockito.mock(AuthenticationServiceImpl.class);
}
+
+ @Bean
+ public InitData initData() {
+ return new InitData();
+ }
}
diff --git a/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/datasource/DatasourceApiServiceIntegrationTest.java b/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/datasource/DatasourceApiServiceIntegrationTest.java
index 2757bc6f7..f11b74c04 100644
--- a/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/datasource/DatasourceApiServiceIntegrationTest.java
+++ b/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/datasource/DatasourceApiServiceIntegrationTest.java
@@ -1,21 +1,23 @@
package org.lowcoder.api.datasource;
-import org.junit.Assert;
-import org.junit.Ignore;
-import org.junit.Test;
-import org.junit.runner.RunWith;
+import org.junit.jupiter.api.Assertions;
+import org.junit.jupiter.api.BeforeEach;
+import org.junit.jupiter.api.Disabled;
+import org.junit.jupiter.api.Test;
+import org.lowcoder.api.common.InitData;
import org.lowcoder.api.common.mockuser.WithMockUser;
import org.lowcoder.api.permission.view.CommonPermissionView;
import org.lowcoder.api.permission.view.PermissionItemView;
import org.lowcoder.domain.datasource.model.Datasource;
import org.lowcoder.domain.datasource.model.DatasourceCreationSource;
import org.lowcoder.domain.datasource.model.DatasourceStatus;
+import org.lowcoder.sdk.constants.FieldName;
import org.lowcoder.sdk.exception.BizError;
import org.lowcoder.sdk.exception.BizException;
import org.lowcoder.sdk.plugin.mysql.MysqlDatasourceConfig;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;
-import org.springframework.test.context.junit4.SpringRunner;
+import org.springframework.test.context.ActiveProfiles;
import reactor.core.publisher.Mono;
import reactor.test.StepVerifier;
@@ -27,10 +29,19 @@
import static org.lowcoder.domain.permission.model.ResourceRole.VIEWER;
@SpringBootTest
-@RunWith(SpringRunner.class)
+@ActiveProfiles("test")
+@Disabled("Enable after all plugins are loaded in test mode")
+//@RunWith(SpringRunner.class)
public class DatasourceApiServiceIntegrationTest {
@Autowired
private DatasourceApiService datasourceApiService;
+ @Autowired
+ private InitData initData;
+
+ @BeforeEach
+ public void beforeEach() {
+ initData.init();
+ }
@Test
@WithMockUser(id = "user02")
@@ -47,8 +58,9 @@ public void testListOrgDatasource() {
StepVerifier.create(datasourceListMono)
.assertNext(datasourceViews -> {
- Assert.assertFalse(findDatasourceView(datasourceViews, "mysql04").edit());
- Assert.assertTrue(findDatasourceView(datasourceViews, "mysql05").edit());
+ Assertions.assertFalse(findDatasourceView(datasourceViews, "mysql04").edit());
+ Assertions.assertTrue(findDatasourceView(datasourceViews, "mysql05").edit());
+ Assertions.assertTrue(FieldName.isGID(findDatasourceView(datasourceViews, "mysql04").datasource().getGid()));
})
.verifyComplete();
}
@@ -70,19 +82,19 @@ public void testGrantPermissionAndGetPermissionSuccess() {
StepVerifier.create(commonPermissionViewMono)
.assertNext(commonPermissionView -> {
- Assert.assertEquals("The Avengers", commonPermissionView.getOrgName());
- Assert.assertEquals("user01", commonPermissionView.getCreatorId());
+ Assertions.assertEquals("The Avengers", commonPermissionView.getOrgName());
+ Assertions.assertEquals("user01", commonPermissionView.getCreatorId());
// assert group
- Assert.assertEquals(1, commonPermissionView.getGroupPermissions().size());
+ Assertions.assertEquals(1, commonPermissionView.getGroupPermissions().size());
PermissionItemView permissionItemView = commonPermissionView.getGroupPermissions().get(0);
- Assert.assertEquals("group01", permissionItemView.getId());
- Assert.assertEquals("owner", permissionItemView.getRole());
+ Assertions.assertEquals("group01", permissionItemView.getId());
+ Assertions.assertEquals("owner", permissionItemView.getRole());
// assert user
- Assert.assertEquals(2, commonPermissionView.getUserPermissions().size());
- Assert.assertEquals("owner", findUserPermission(commonPermissionView, "user01").getRole());
- Assert.assertEquals("owner", findUserPermission(commonPermissionView, "user02").getRole());
+ Assertions.assertEquals(2, commonPermissionView.getUserPermissions().size());
+ Assertions.assertEquals("owner", findUserPermission(commonPermissionView, "user01").getRole());
+ Assertions.assertEquals("owner", findUserPermission(commonPermissionView, "user02").getRole());
})
.verifyComplete();
}
@@ -107,7 +119,7 @@ public void testUpdatePermissionAndDeletePermissionSuccess() {
StepVerifier.create(commonPermissionViewMono)
.assertNext(commonPermissionView -> {
PermissionItemView user02 = findUserPermission(commonPermissionView, "user02");
- Assert.assertEquals("viewer", user02.getRole());
+ Assertions.assertEquals("viewer", user02.getRole());
})
.verifyComplete();
@@ -119,7 +131,7 @@ public void testUpdatePermissionAndDeletePermissionSuccess() {
StepVerifier.create(commonPermissionViewMono)
.assertNext(commonPermissionView -> {
PermissionItemView user02 = findUserPermission(commonPermissionView, "user02");
- Assert.assertNull(user02);
+ Assertions.assertNull(user02);
})
.verifyComplete();
}
diff --git a/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/infra/ServerConfigRepositoryTest.java b/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/infra/ServerConfigRepositoryTest.java
index 460c6df08..c88eb0432 100644
--- a/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/infra/ServerConfigRepositoryTest.java
+++ b/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/infra/ServerConfigRepositoryTest.java
@@ -30,7 +30,6 @@ public class ServerConfigRepositoryTest {
private ConfigInstance configInstance;
@Test
- @Ignore("Disabled until it is fixed")
public void test() throws InterruptedException {
Conf<Integer> test1 = configInstance.ofInteger("key1", 0);
diff --git a/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/query/LibraryQueryApiServiceIntegrationTest.java b/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/query/LibraryQueryApiServiceIntegrationTest.java
index ee3ddf49f..461811478 100644
--- a/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/query/LibraryQueryApiServiceIntegrationTest.java
+++ b/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/query/LibraryQueryApiServiceIntegrationTest.java
@@ -1,17 +1,19 @@
package org.lowcoder.api.query;
-import org.junit.Assert;
-import org.junit.Ignore;
-import org.junit.Test;
-import org.junit.runner.RunWith;
+import org.junit.jupiter.api.Assertions;
+import org.junit.jupiter.api.BeforeEach;
+import org.junit.jupiter.api.Disabled;
+import org.junit.jupiter.api.Test;
+import org.lowcoder.api.common.InitData;
import org.lowcoder.api.common.mockuser.WithMockUser;
import org.lowcoder.api.datasource.DatasourceApiService;
import org.lowcoder.api.datasource.DatasourceApiServiceIntegrationTest;
import org.lowcoder.api.query.view.LibraryQueryView;
import org.lowcoder.domain.query.model.LibraryQuery;
+import org.lowcoder.sdk.constants.FieldName;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;
-import org.springframework.test.context.junit4.SpringRunner;
+import org.springframework.test.context.ActiveProfiles;
import reactor.core.publisher.Mono;
import reactor.test.StepVerifier;
@@ -23,13 +25,22 @@
@SuppressWarnings("SameParameterValue")
@SpringBootTest
-@RunWith(SpringRunner.class)
+@ActiveProfiles("test")
+@Disabled("Enable after all plugins are loaded in test mode")
+//@RunWith(SpringRunner.class)
public class LibraryQueryApiServiceIntegrationTest {
@Autowired
private DatasourceApiService datasourceApiService;
@Autowired
private LibraryQueryApiService libraryQueryApiService;
+ @Autowired
+ private InitData initData;
+
+ @BeforeEach
+ public void beforeEach() {
+ initData.init();
+ }
@Test
@WithMockUser
@@ -39,7 +50,10 @@ public void testListLibraryQueries() {
.then(libraryQueryApiService.listLibraryQueries());
StepVerifier.create(listMono)
- .assertNext(libraryQueryViews -> Assert.assertNotNull(find(libraryQueryViews, "query01")))
+ .assertNext(libraryQueryViews -> {
+ Assertions.assertNotNull(find(libraryQueryViews, "query01"));
+ Assertions.assertTrue(FieldName.isGID(find(libraryQueryViews, "query01").gid()));
+ })
.verifyComplete();
}
diff --git a/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/service/FolderApiServiceTest.java b/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/service/FolderApiServiceTest.java
index 0c1c917bd..a81395ea7 100644
--- a/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/service/FolderApiServiceTest.java
+++ b/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/service/FolderApiServiceTest.java
@@ -1,20 +1,21 @@
package org.lowcoder.api.service;
-import org.junit.Assert;
-import org.junit.Ignore;
-import org.junit.Test;
-import org.junit.runner.RunWith;
+import org.junit.jupiter.api.Assertions;
+import org.junit.jupiter.api.BeforeEach;
+import org.junit.jupiter.api.Test;
import org.lowcoder.api.application.view.ApplicationInfoView;
import org.lowcoder.api.application.view.ApplicationPermissionView;
+import org.lowcoder.api.common.InitData;
import org.lowcoder.api.common.mockuser.WithMockUser;
import org.lowcoder.api.home.FolderApiService;
import org.lowcoder.api.permission.view.PermissionItemView;
import org.lowcoder.domain.folder.model.Folder;
import org.lowcoder.domain.folder.service.FolderService;
import org.lowcoder.domain.permission.model.ResourceRole;
+import org.lowcoder.sdk.constants.FieldName;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;
-import org.springframework.test.context.junit4.SpringRunner;
+import org.springframework.test.context.ActiveProfiles;
import reactor.core.publisher.Mono;
import reactor.test.StepVerifier;
@@ -22,32 +23,42 @@
import java.util.Set;
import java.util.stream.Collectors;
-import static org.junit.Assert.assertEquals;
+import static org.junit.jupiter.api.Assertions.assertNotNull;
+import static org.junit.jupiter.api.Assertions.assertTrue;
@SpringBootTest
-@RunWith(SpringRunner.class)
+@ActiveProfiles("test")
+//@RunWith(SpringRunner.class)
public class FolderApiServiceTest {
@Autowired
private FolderApiService folderApiService;
@Autowired
private FolderService folderService;
+ @Autowired
+ private InitData initData;
+
+ @BeforeEach
+ public void beforeEach() {
+ initData.init();
+ }
@Test
@WithMockUser
- @Ignore("Disabled until it is fixed")
public void create() {
Folder folder = new Folder();
folder.setParentFolderId(null);
folder.setName("root");
StepVerifier.create(folderApiService.create(folder))
- .assertNext(f -> Assert.assertNotNull(f.getFolderId()))
+ .assertNext(f -> {
+ assertNotNull(f.getFolderId());
+ assertTrue(FieldName.isGID(f.getFolderGid()));
+ })
.verifyComplete();
}
@Test
@WithMockUser
- @Ignore("Disabled until it is fixed")
public void delete() {
String id = "folder03";
@@ -57,7 +68,7 @@ public void delete() {
.verifyComplete();
StepVerifier.create(folderApiService.delete(id))
- .assertNext(folder -> Assert.assertEquals(id, folder.getId()))
+ .assertNext(folder -> Assertions.assertEquals(id, folder.getId()))
.verifyComplete();
StepVerifier.create(folderService.exist(id))
@@ -67,29 +78,60 @@ public void delete() {
@Test
@WithMockUser
- @Ignore("Disabled until it is fixed")
+ public void checkExistingByGid() {
+
+ String id = "01905d61-5c7e-788a-b650-82c983f04968";
+ String id2 = "01905d61-5c7e-788a-b650-82c983f04969";
+
+ StepVerifier.create(folderService.exist(id))
+ .expectNext(true)
+ .verifyComplete();
+
+ StepVerifier.create(folderService.exist(id2))
+ .expectNext(false)
+ .verifyComplete();
+ }
+
+ @Test
+ @WithMockUser
public void update() {
String id = "folder02";
StepVerifier.create(folderService.findById(id))
- .assertNext(folder -> assertEquals("folder02", folder.getName()))
+ .assertNext(folder -> Assertions.assertEquals("folder02", folder.getName()))
+ .verifyComplete();
+
+ Folder newFolder = new Folder();
+ newFolder.setId(id);
+ newFolder.setName("test_update");
+ StepVerifier.create(folderApiService.update(newFolder))
+ .assertNext(Assertions::assertNotNull)
+ .verifyComplete();
+
+ StepVerifier.create(folderService.findById(id))
+ .assertNext(folder -> Assertions.assertEquals("test_update", folder.getName()))
.verifyComplete();
+ }
+
+ @Test
+ @WithMockUser
+ public void updateByGid() {
+ String id = "019053a3-f968-7a57-91fd-36f50d43713c";
Folder newFolder = new Folder();
newFolder.setId(id);
newFolder.setName("test_update");
StepVerifier.create(folderApiService.update(newFolder))
- .assertNext(Assert::assertNotNull)
+ .assertNext(Assertions::assertNotNull)
.verifyComplete();
StepVerifier.create(folderService.findById(id))
- .assertNext(folder -> assertEquals("test_update", folder.getName()))
+ .assertNext(folder -> Assertions.assertEquals("test_update", folder.getName()))
.verifyComplete();
}
@Test
@WithMockUser
- @Ignore("Disabled until it is fixed")
public void move() {
Mono<? extends List<?>> mono = folderApiService.move("app01", "folder02")
@@ -97,16 +139,15 @@ public void move() {
StepVerifier.create(mono)
.assertNext(list -> {
- assertEquals(1, list.size());
+ Assertions.assertEquals(1, list.size());
ApplicationInfoView applicationInfoView = (ApplicationInfoView) list.get(0);
- assertEquals("app01", applicationInfoView.getApplicationId());
+ Assertions.assertEquals("app01", applicationInfoView.getApplicationId());
})
.verifyComplete();
}
@Test
@WithMockUser
- @Ignore("Disabled until it is fixed")
public void grantPermission() {
Mono<ApplicationPermissionView> mono =
@@ -115,11 +156,11 @@ public void grantPermission() {
StepVerifier.create(mono)
.assertNext(applicationPermissionView -> {
- assertEquals(2, applicationPermissionView.getPermissions().size());
+ Assertions.assertEquals(2, applicationPermissionView.getPermissions().size());
Set<String> ids = applicationPermissionView.getPermissions().stream()
.map(PermissionItemView::getId)
.collect(Collectors.toSet());
- assertEquals(Set.of("user02", "group01"), ids);
+ Assertions.assertEquals(Set.of("user02", "group01"), ids);
})
.verifyComplete();
}
diff --git a/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/service/impl/ApplicationHistorySnapshotServiceTest.java b/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/service/impl/ApplicationHistorySnapshotServiceTest.java
index 9a8b7bb45..d728dfc54 100644
--- a/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/service/impl/ApplicationHistorySnapshotServiceTest.java
+++ b/server/api-service/lowcoder-server/src/test/java/org/lowcoder/api/service/impl/ApplicationHistorySnapshotServiceTest.java
@@ -26,7 +26,6 @@ public class ApplicationHistorySnapshotServiceTest {
private ApplicationHistorySnapshotService service;
@Test
- @Ignore("Disabled until it is fixed")
public void testServiceMethods() {
String applicationId = "123123";
diff --git a/server/node-service/src/controllers/plugins.ts b/server/node-service/src/controllers/plugins.ts
index e8d757152..287910458 100644
--- a/server/node-service/src/controllers/plugins.ts
+++ b/server/node-service/src/controllers/plugins.ts
@@ -17,6 +17,10 @@ export async function listPlugins(req: Request, res: Response) {
export async function runPluginQuery(req: Request, res: Response) {
const { pluginName, dsl, context, dataSourceConfig } = req.body;
const ctx = pluginServices.getPluginContext(req);
+
+
+ console.log("pluginName: ", pluginName, "dsl: ", dsl, "context: ", context, "dataSourceConfig: ", dataSourceConfig, "ctx: ", ctx);
+
const result = await pluginServices.runPluginQuery(
pluginName,
dsl,
diff --git a/server/node-service/src/plugins/index.ts b/server/node-service/src/plugins/index.ts
index 62738df2a..9e06fe946 100644
--- a/server/node-service/src/plugins/index.ts
+++ b/server/node-service/src/plugins/index.ts
@@ -34,6 +34,7 @@ import didPlugin from "./did";
import bigQueryPlugin from "./bigQuery";
import appConfigPlugin from "./appconfig";
import tursoPlugin from "./turso";
+import postmanEchoPlugin from "./postmanEcho";
let plugins: (DataSourcePlugin | DataSourcePluginFactory)[] = [
s3Plugin,
@@ -71,6 +72,7 @@ let plugins: (DataSourcePlugin | DataSourcePluginFactory)[] = [
bigQueryPlugin,
appConfigPlugin,
tursoPlugin,
+ postmanEchoPlugin,
];
try {
diff --git a/server/node-service/src/plugins/openApi/index.ts b/server/node-service/src/plugins/openApi/index.ts
index a58096b4b..fcc095f13 100644
--- a/server/node-service/src/plugins/openApi/index.ts
+++ b/server/node-service/src/plugins/openApi/index.ts
@@ -82,6 +82,8 @@ export async function runOpenApi(
const { actionName, ...otherActionData } = actionData;
const { serverURL } = dataSourceConfig;
+
+
let operation, realOperationId, definition: OpenAPI.Document | undefined;
for (const {id, def} of await getDefinitions(spec, openApiSpecDereferenced)) {
@@ -114,6 +116,7 @@ export async function runOpenApi(
try {
const { parameters, requestBody } = normalizeParams(otherActionData, operation, isOas3Spec);
let securities = extractSecurityParams(dataSourceConfig, definition);
+
const response = await SwaggerClient.execute({
spec: definition,
operationId: realOperationId,
@@ -122,6 +125,7 @@ export async function runOpenApi(
securities,
responseContentType: "application/json",
userFetch: async (url: string, req: RequestInit) => {
+ console.log("req", req);
return fetch(url, req);
},
requestInterceptor: (req: any) => {
diff --git a/server/node-service/src/plugins/postmanEcho/index.ts b/server/node-service/src/plugins/postmanEcho/index.ts
new file mode 100644
index 000000000..381c86b9e
--- /dev/null
+++ b/server/node-service/src/plugins/postmanEcho/index.ts
@@ -0,0 +1,53 @@
+import { readYaml } from "../../common/util";
+import _ from "lodash";
+import path from "path";
+import { OpenAPIV3, OpenAPI } from "openapi-types";
+import { ConfigToType, DataSourcePlugin } from "lowcoder-sdk/dataSource";
+import { runOpenApi } from "../openApi";
+import { parseOpenApi, ParseOpenApiOptions } from "../openApi/parse";
+
+import spec from './postmanEcho.spec.json';
+
+
+const dataSourceConfig = {
+ type: "dataSource",
+ params: []
+} as const;
+
+const parseOptions: ParseOpenApiOptions = {
+ actionLabel: (method: string, path: string, operation: OpenAPI.Operation) => {
+ return _.upperFirst(operation.summary ? operation.summary : operation.operationId || "");
+ },
+};
+
+type DataSourceConfigType = ConfigToType<typeof dataSourceConfig>;
+
+const postmanEchoPlugin: DataSourcePlugin<any, DataSourceConfigType> = {
+ id: "postmanEcho",
+ name: "Postman Echo",
+ icon: "postmanEcho.svg",
+ category: "api",
+ dataSourceConfig,
+ queryConfig: async () => {
+ const { actions, categories } = await parseOpenApi(spec as unknown as OpenAPI.Document, parseOptions);
+ return {
+ type: "query",
+ label: "Action",
+ categories: {
+ label: "Resources",
+ items: categories,
+ },
+ actions,
+ };
+ },
+ run: function (actionData, dataSourceConfig): Promise<any> {
+ const runApiDsConfig = {
+ url: "",
+ serverURL: "",
+ dynamicParamsConfig: dataSourceConfig,
+ };
+ return runOpenApi(actionData, runApiDsConfig, spec as OpenAPIV3.Document);
+ },
+};
+
+export default postmanEchoPlugin;
diff --git a/server/node-service/src/plugins/postmanEcho/postmanEcho.spec.json b/server/node-service/src/plugins/postmanEcho/postmanEcho.spec.json
new file mode 100644
index 000000000..777beb536
--- /dev/null
+++ b/server/node-service/src/plugins/postmanEcho/postmanEcho.spec.json
@@ -0,0 +1,953 @@
+{
+ "openapi": "3.0.0",
+ "info": {
+ "version": "1.0",
+ "title": "Postman Echo",
+ "description": "Postman Echo is a service you can use to test your REST clients and make sample API calls. It provides endpoints for `GET`, `POST`, `PUT`, various auth mechanisms, and other utility endpoints.\n\nThe documentation for the endpoints as well as example responses can be found at [Postman Echo](https://echo.getpostman.com?source=echo-collection-app-onboarding)."
+ },
+ "servers": [
+ {
+ "url": "https://postman-echo.com",
+ "description": "Public Postman Echo Server"
+ }
+ ],
+ "paths": {
+ "/digest-auth": {
+ "get": {
+ "summary": "DigestAuth Request",
+ "description": "Performing a simple `GET` request to this endpoint returns a status code `401 Unauthorized` with a `WWW-Authenticate` header containing information to successfully authenticate subsequent requests.\nThe `WWW-Authenticate` header must be processed to extract `realm` and `nonce` values to hash subsequent requests.\n\nWhen this request is executed within Postman, the script attached with this request does the hard work of extracting realm and nonce from the header and sets it as [global variables](https://postman-echo.com)",
+ "operationId": "DigestAuthGet",
+ "deprecated": false,
+ "parameters": [],
+ "responses": {
+ "200": {
+ "description": "A successful authentication response.",
+ "content": {
+ "application/json": {
+ "schema": {
+ "$ref": "#/components/schemas/AuthResponse"
+ }
+ }
+ }
+ }
+ },
+ "tags": [
+ "Authentication"
+ ]
+ }
+ },
+ "/basic-auth": {
+ "get": {
+ "summary": "Basic Auth",
+ "description": "This endpoint simulates a **basic-auth** protected endpoint.\nThe endpoint accepts a default username and password and returns a status code of `200 OK` only if the same is provided.\nOtherwise, it will return a status code `401 Unauthorized`.\n\n**Credentials:**\n\n* Username: `postman`\n* Password: `password`\n\nTo use this endpoint, send a request with the header `Authorization: Basic cG9zdG1hbjpwYXNzd29yZA==`.\nThe latter half of the header value is a base64 encoded concatenation of the default username and password.",
+ "operationId": "BasicAuthGet",
+ "deprecated": false,
+ "parameters": [],
+ "responses": {
+ "200": {
+ "description": "A successful authentication response.",
+ "content": {
+ "application/json": {
+ "schema": {
+ "$ref": "#/components/schemas/AuthResponse"
+ }
+ }
+ }
+ }
+ },
+ "tags": [
+ "Authentication"
+ ]
+ }
+ },
+ "/oauth1": {
+ "get": {
+ "summary": "OAuth1.0 Verify Signature",
+ "description": "OAuth1.0a is a specification that defines a protocol that can be used by one\nservice to access \"protected\" resources (endpoints) on another service. A\nmajor part of OAuth1.0 is HTTP Request Signing. This endpoint allows you to\ncheck whether the request calculation works properly in the client.\n\nThe endpoint supports the HTTP `Authorization` header. In case the signature\nverification fails, the endpoint provides the following four debug values:\n\n* `base_uri`\n* `normalized_param_string`\n* `base_str`",
+ "operationId": "Oauth1Get",
+ "deprecated": false,
+ "parameters": [],
+ "responses": {
+ "200": {
+ "description": "A successful OAuth1.0 verification response.",
+ "content": {
+ "application/json": {
+ "schema": {
+ "$ref": "#/components/schemas/OAuth1Response"
+ }
+ }
+ }
+ }
+ },
+ "tags": [
+ "Authentication"
+ ]
+ }
+ },
+ "/auth/hawk": {
+ "get": {
+ "summary": "Hawk Auth",
+ "description": "This endpoint is protected with Hawk Authentication. [Hawk authentication](https://github.com/hueniverse/hawk) is a widely used protocol for protecting API endpoints. One of Hawk's main goals is to enable HTTP authentication for services that do not use TLS (although it can be used in conjunction with TLS as well).\n\nTo use this endpoint, select the \"Hawk Auth\" helper inside Postman, and set the following values:\n\n* Hawk Auth ID: `dh37fgj492je`\n* Hawk Auth Key: `werxhqb98rpaxn39848xru`",
+ "operationId": "AuthHawkGet",
+ "deprecated": false,
+ "parameters": [],
+ "responses": {
+ "200": {
+ "description": "A successful Hawk authentication response.",
+ "content": {
+ "application/json": {
+ "schema": {
+ "$ref": "#/components/schemas/AuthResponse"
+ }
+ }
+ }
+ }
+ },
+ "tags": [
+ "Authentication"
+ ]
+ }
+ },
+ "/cookies/set": {
+ "get": {
+ "summary": "Set Cookies",
+ "description": "The cookie setter endpoint accepts a list of cookies and their values as part of URL parameters of a `GET` request. These cookies are saved and can be subsequently retrieved or deleted. The response of this request returns a JSON with all cookies listed.\n\nTo set your own set of cookies, simply replace the URL parameters \"foo1=bar1&foo2=bar2\" with your own set of key-value pairs.",
+ "operationId": "CookiesSetGet",
+ "deprecated": false,
+ "parameters": [
+ {
+ "name": "foo1",
+ "in": "query",
+ "description": "Value for the cookie `foo1`.",
+ "required": false,
+ "schema": {
+ "type": "string"
+ }
+ },
+ {
+ "name": "foo2",
+ "in": "query",
+ "description": "Value for the cookie `foo2`.",
+ "required": false,
+ "schema": {
+ "type": "string"
+ }
+ }
+ ],
+ "responses": {
+ "200": {
+ "description": "A list of cookies that have been set.",
+ "content": {
+ "application/json": {
+ "schema": {
+ "$ref": "#/components/schemas/CookiesResponse"
+ }
+ }
+ }
+ }
+ },
+ "tags": [
+ "Cookie"
+ ]
+ }
+ },
+ "/cookies/delete": {
+ "get": {
+ "summary": "Delete Cookies",
+ "description": "One or more cookies that have been set for this domain can be deleted by providing the cookie names as part of the URL parameter. The response of this request is a JSON containing the list of currently set cookies.",
+ "operationId": "CookiesDeleteGet",
+ "deprecated": false,
+ "parameters": [
+ {
+ "name": "foo1",
+ "in": "query",
+ "description": "Name of the cookie to delete.",
+ "required": false,
+ "schema": {
+ "type": "string"
+ }
+ }
+ ],
+ "responses": {
+ "200": {
+ "description": "A list of cookies that are still set after the deletion.",
+ "content": {
+ "application/json": {
+ "schema": {
+ "$ref": "#/components/schemas/CookiesResponse"
+ }
+ }
+ }
+ }
+ },
+ "tags": [
+ "Cookie"
+ ]
+ }
+ },
+ "/cookies": {
+ "get": {
+ "summary": "Get Cookies",
+ "description": "Use this endpoint to get a list of all cookies that are stored with respect to this domain. Whatever key-value pairs that have been previously set by calling the \"Set Cookies\" endpoint, will be returned as response JSON.",
+ "operationId": "CookiesGet",
+ "deprecated": false,
+ "parameters": [],
+ "responses": {
+ "200": {
+ "description": "A list of all cookies currently set for the domain.",
+ "content": {
+ "application/json": {
+ "schema": {
+ "$ref": "#/components/schemas/CookiesResponse"
+ }
+ }
+ }
+ }
+ },
+ "tags": [
+ "Cookie"
+ ]
+ }
+ },
+ "/headers": {
+ "get": {
+ "summary": "Request Headers",
+ "description": "A `GET` request to this endpoint returns the list of all request headers as part of the response JSON.\nIn Postman, sending your own set of headers through the [Headers tab](https://www.getpostman.com/docs/requests#headers?source=echo-collection-app-onboarding) will reveal the headers as part of the response.",
+ "operationId": "HeadersGet",
+ "deprecated": false,
+ "parameters": [],
+ "responses": {
+ "200": {
+ "description": "A list of all request headers sent with the request.",
+ "content": {
+ "application/json": {
+ "schema": {
+ "$ref": "#/components/schemas/HeadersResponse"
+ }
+ }
+ }
+ }
+ },
+ "tags": [
+ "Helpers"
+ ]
+ }
+ },
+ "/response-headers": {
+ "get": {
+ "summary": "Response Headers",
+ "description": "This endpoint causes the server to send a custom set of response headers. Providing header values as part of the URL parameters of a `GET` request to this endpoint returns the same as part of the response header.\n\nTo send your own set of headers, simply add or replace the URL parameters with your own set.",
+ "operationId": "ResponseHeadersGet",
+ "deprecated": false,
+ "parameters": [
+ {
+ "name": "Content-Type",
+ "in": "query",
+ "description": "Value for the `Content-Type` header.",
+ "required": false,
+ "schema": {
+ "type": "string"
+ }
+ },
+ {
+ "name": "test",
+ "in": "query",
+ "description": "Value for a custom header `test`.",
+ "required": false,
+ "schema": {
+ "type": "string"
+ }
+ }
+ ],
+ "responses": {
+ "200": {
+ "description": "The custom response headers that were set.",
+ "content": {
+ "application/json": {
+ "schema": {
+ "$ref": "#/components/schemas/ResponseHeaders"
+ }
+ }
+ }
+ }
+ },
+ "tags": [
+ "Helpers"
+ ]
+ }
+ },
+ "/get": {
+ "get": {
+ "summary": "GET Request",
+ "description": "The HTTP `GET` request method is meant to retrieve data from a server. The data is identified by a unique URI (Uniform Resource Identifier).\n\nA `GET` request can pass parameters to the server using \"Query String Parameters\". For example, in the following request:\n\n> http://example.com/hi/there?hand=wave\n\nThe parameter \"hand\" has the value \"wave\".\n\nThis endpoint echoes the HTTP headers, request parameters, and the complete URI requested.",
+ "operationId": "GetGet",
+ "deprecated": false,
+ "parameters": [
+ {
+ "name": "test",
+ "in": "query",
+ "description": "A test query parameter.",
+ "required": false,
+ "schema": {
+ "type": "string"
+ }
+ }
+ ],
+ "responses": {
+ "200": {
+ "description": "The echoed request data.",
+ "content": {
+ "application/json": {
+ "schema": {
+ "$ref": "#/components/schemas/RequestEcho"
+ }
+ }
+ }
+ }
+ },
+ "tags": [
+ "Standard Requests"
+ ]
+ }
+ },
+ "/post": {
+ "post": {
+ "summary": "POST Request",
+ "description": "The HTTP `POST` request method is meant to transfer data to a server and elicit a response. What data is returned depends on the implementation of the server.\n\nA `POST` request can pass parameters to the server using \"Query String Parameters\", as well as the Request Body. For example, in the following request:\n\n> POST /hi/there?hand=wave\n\nThe parameter \"hand\" has the value \"wave\". The request body can be in multiple formats. These formats are defined by the MIME type of the request.",
+ "operationId": "PostPost",
+ "deprecated": false,
+ "parameters": [
+ {
+ "in": "query",
+ "name": "test",
+ "description": "an optional Query Parameter",
+ "schema": {
+ "type": "string"
+ },
+ "required": false
+ }
+ ],
+ "responses": {
+ "200": {
+ "description": "The echoed request data.",
+ "content": {
+ "application/json": {
+ "schema": {
+ "$ref": "#/components/schemas/RequestEcho"
+ }
+ }
+ }
+ }
+ },
+ "tags": [
+ "Standard Requests"
+ ],
+ "requestBody": {
+ "description": "A JSON based Payload",
+ "content": {
+ "application/json": {
+ "schema": {
+ "type": "string"
+ }
+ },
+ "others": {
+ "schema": {
+ "type": "object",
+ "properties": {}
+ },
+ "examples": {
+ "example1": {
+ "value": {
+ "hello": "world"
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ },
+ "/post/file": {
+ "post": {
+ "summary": "POST Request with File Upload (multipart/form-data)",
+ "description": "The HTTP `POST` request method is meant to transfer data to a server and elicit a response. What data is returned depends on the implementation of the server.\n\nA `POST` request can pass parameters to the server using \"Query String Parameters\", as well as the Request Body. For example, in the following request:\n\n> POST /hi/there?hand=wave\n\nThe parameter \"hand\" has the value \"wave\". The request body can be in multiple formats. These formats are defined by the MIME type of the request.",
+ "operationId": "PostFile",
+ "deprecated": false,
+ "parameters": [
+ {
+ "in": "query",
+ "name": "test",
+ "description": "an optional Query Parameter",
+ "schema": {
+ "type": "string"
+ },
+ "required": false
+ }
+ ],
+ "responses": {
+ "200": {
+ "description": "The echoed request data.",
+ "content": {
+ "application/json": {
+ "schema": {
+ "$ref": "#/components/schemas/RequestEcho"
+ }
+ }
+ }
+ }
+ },
+ "tags": [
+ "Standard Requests"
+ ],
+ "requestBody": {
+ "content": {
+ "multipart/form-data": {
+ "schema": {
+ "type": "object",
+ "properties": {
+ "id": {
+ "type": "string",
+ "format": "uuid"
+ },
+ "address": {
+ "type": "object",
+ "properties": {
+ "street": {
+ "type": "string"
+ },
+ "city": {
+ "type": "string"
+ }
+ }
+ },
+ "profileImage": {
+ "type": "string",
+ "format": "binary",
+ "description": "The profile image as base64 from File-Upload. You need to pack it in this JSON Structure, so the Backend-Server will turn it into binary format - {{ {data: file1.value[0], name: file1.files[0].name} }}"
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ },
+ "/post/image": {
+ "post": {
+ "summary": "POST Request with Imnage (Base64 String) Upload (multipart/form-data)",
+ "description": "The HTTP `POST` request method is meant to transfer data to a server and elicit a response. What data is returned depends on the implementation of the server.\n\nA `POST` request can pass parameters to the server using \"Query String Parameters\", as well as the Request Body. For example, in the following request:\n\n> POST /hi/there?hand=wave\n\nThe parameter \"hand\" has the value \"wave\". The request body can be in multiple formats. These formats are defined by the MIME type of the request.",
+ "operationId": "PostImage",
+ "deprecated": false,
+ "parameters": [
+ {
+ "in": "query",
+ "name": "test",
+ "description": "an optional Query Parameter",
+ "schema": {
+ "type": "string"
+ },
+ "required": false
+ }
+ ],
+ "responses": {
+ "200": {
+ "description": "The echoed request data.",
+ "content": {
+ "application/json": {
+ "schema": {
+ "$ref": "#/components/schemas/RequestEcho"
+ }
+ }
+ }
+ }
+ },
+ "tags": [
+ "Standard Requests"
+ ],
+ "requestBody": {
+ "content": {
+ "multipart/form-data": {
+ "schema": {
+ "type": "object",
+ "properties": {
+ "id": {
+ "type": "string",
+ "format": "uuid"
+ },
+ "address": {
+ "type": "object",
+ "properties": {
+ "street": {
+ "type": "string"
+ },
+ "city": {
+ "type": "string"
+ }
+ }
+ },
+ "profileImage": {
+ "type": "string",
+ "format": "base64"
+ }
+ }
+ },
+ "encoding": {
+ "profileImage": {
+ "contentType": "image/png, image/jpeg"
+ }
+ }
+ }
+ }
+ }
+ }
+ },
+ "/put": {
+ "put": {
+ "summary": "PUT Request",
+ "description": "The HTTP `PUT` request method is similar to HTTP `POST`. It is meant to transfer data to a server and elicit a response. What data is returned depends on the implementation of the server.\n\nA `PUT` request can pass parameters to the server using \"Query String Parameters\", as well as the Request Body. For example, in the following raw HTTP request:\n\n> PUT /hi/there?hand=wave",
+ "operationId": "PutPut",
+ "deprecated": false,
+ "parameters": [
+ {
+ "in": "query",
+ "name": "test",
+ "description": "an optional Query Parameter",
+ "schema": {
+ "type": "string"
+ }
+ }
+ ],
+ "responses": {
+ "200": {
+ "description": "The echoed request data.",
+ "content": {
+ "application/json": {
+ "schema": {
+ "$ref": "#/components/schemas/RequestEcho"
+ }
+ }
+ }
+ }
+ },
+ "tags": [
+ "Standard Requests"
+ ],
+ "requestBody": {
+ "description": "",
+ "content": {
+ "application/json": {
+ "schema": {
+ "type": "object",
+ "properties": {}
+ },
+ "examples": {
+ "example1": {
+ "value": {
+ "hello": "world"
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ },
+ "/patch": {
+ "patch": {
+ "summary": "PATCH Request",
+ "description": "The HTTP `PATCH` method is used to update resources on a server. The exact use of `PATCH` requests depends on the server in question. There are a number of server implementations that handle `PATCH` differently. Technically, `PATCH` supports both Query String parameters and a Request Body.\n\nThis endpoint accepts an HTTP `PATCH` request and provides debug information such as the HTTP headers, Query String arguments, and the Request Body.",
+ "operationId": "PatchPatch",
+ "deprecated": false,
+ "parameters": [
+ {
+ "in": "query",
+ "name": "test",
+ "description": "an optional Query Parameter",
+ "schema": {
+ "type": "string"
+ }
+ }
+ ],
+ "responses": {
+ "200": {
+ "description": "The echoed request data.",
+ "content": {
+ "application/json": {
+ "schema": {
+ "$ref": "#/components/schemas/RequestEcho"
+ }
+ }
+ }
+ }
+ },
+ "tags": [
+ "Standard Requests"
+ ],
+ "requestBody": {
+ "description": "",
+ "content": {
+ "application/json": {
+ "schema": {
+ "type": "object",
+ "properties": {}
+ },
+ "examples": {
+ "example1": {
+ "value": {
+ "hello": "world"
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ },
+ "/delete": {
+ "delete": {
+ "summary": "DELETE Request",
+ "description": "The HTTP `DELETE` method is used to delete resources on a server. The exact use of `DELETE` requests depends on the server implementation. In general, `DELETE` requests support both Query String parameters as well as a Request Body.\n\nThis endpoint accepts an HTTP `DELETE` request and provides debug information such as the HTTP headers, Query String arguments, and the Request Body.",
+ "operationId": "DeleteDelete",
+ "deprecated": false,
+ "parameters": [
+ {
+ "in": "query",
+ "name": "test",
+ "description": "an optional Query Parameter",
+ "schema": {
+ "type": "string"
+ }
+ }
+ ],
+ "responses": {
+ "200": {
+ "description": "The echoed request data.",
+ "content": {
+ "application/json": {
+ "schema": {
+ "$ref": "#/components/schemas/RequestEcho"
+ }
+ }
+ }
+ }
+ },
+ "tags": [
+ "Standard Requests"
+ ]
+ }
+ },
+ "/status/200": {
+ "get": {
+ "summary": "Response Status Code",
+ "description": "This endpoint allows one to instruct the server which status code to respond with.\n\nEvery response is accompanied by a status code. The status code provides a summary of the nature of the response sent by the server. For example, a status code of `200` means everything is okay with the response and a code of `404` implies that the requested URL does not exist on the server.\nA list of all valid HTTP status codes can be found at the [List of Status Codes](https://en.wikipedia.org/wiki/List_of_HTTP_status_codes).",
+ "operationId": "Status200Get",
+ "deprecated": false,
+ "parameters": [],
+ "responses": {
+ "200": {
+ "description": "The response with the specified status code.",
+ "content": {
+ "application/json": {
+ "schema": {
+ "$ref": "#/components/schemas/StatusCodeResponse"
+ }
+ }
+ }
+ }
+ },
+ "tags": [
+ "Helpers"
+ ]
+ }
+ },
+ "/stream/10": {
+ "get": {
+ "summary": "Streamed Response",
+ "description": "This endpoint allows one to receive streaming HTTP responses using [chunked transfer encoding](https://en.wikipedia.org/wiki/Chunked_transfer_encoding) of a configurable length.\n\nA streaming response does not wait for the entire response to be generated on the server before flushing it out. This implies that for a fairly large response, parts of it can be streamed to the requestee as and when it is generated on the server. The client can then take actions to process this partially received data.",
+ "operationId": "Stream10Get",
+ "deprecated": false,
+ "parameters": [],
+ "responses": {
+ "200": {
+ "description": "The streamed response data.",
+ "content": {
+ "application/json": {
+ "schema": {
+ "$ref": "#/components/schemas/StreamResponse"
+ }
+ }
+ }
+ }
+ },
+ "tags": [
+ "Helpers"
+ ]
+ }
+ },
+ "/delay/3": {
+ "get": {
+ "summary": "Delay Response",
+ "description": "Using this endpoint one can configure how long it takes for the server to come back with a response. Appending a number to the URL defines the time (in seconds) the server will wait before responding.\n\nNote that a maximum delay of 10 seconds is accepted by the server.",
+ "operationId": "Delay3Get",
+ "deprecated": false,
+ "parameters": [],
+ "responses": {
+ "200": {
+ "description": "The delayed response data.",
+ "content": {
+ "application/json": {
+ "schema": {
+ "$ref": "#/components/schemas/DelayResponse"
+ }
+ }
+ }
+ }
+ },
+ "tags": [
+ "Helpers"
+ ]
+ }
+ },
+ "/encoding/utf8": {
+ "get": {
+ "summary": "Get UTF8 Encoded Response",
+ "description": "If a response of an endpoint requires sending data beyond the basic English / ASCII character set, the `charset` parameter in the `Content-Type` response header defines the character encoding policy.\n\nThis endpoint returns a UTF-8 character encoded response body with text in various languages such as Greek, Latin, East Asian, etc. Postman can interpret the character encoding and use appropriate methods to display the character set in responses.",
+ "operationId": "EncodingUtf8Get",
+ "deprecated": false,
+ "parameters": [],
+ "responses": {
+ "200": {
+ "description": "The UTF-8 encoded response data.",
+ "content": {
+ "application/json": {
+ "schema": {
+ "$ref": "#/components/schemas/Utf8Response"
+ }
+ }
+ }
+ }
+ },
+ "tags": [
+ "Helpers"
+ ]
+ }
+ },
+ "/gzip": {
+ "get": {
+ "summary": "GZip Compressed Response",
+ "description": "This endpoint returns the response using the [gzip compression algorithm](https://en.wikipedia.org/wiki/Gzip).\nThe uncompressed response is a JSON string containing the details of the request sent by the client. For this endpoint to work, one should request with an `Accept-encoding` header containing `gzip` as part of its value. Postman supports gzip, deflate, and SDCH decoding and automatically sends them as part of the request.\n\nHTTP Compression allows the server to send responses in a compressed format, which can reduce the amount of data that needs to be transferred over the network.",
+ "operationId": "GzipGet",
+ "deprecated": false,
+ "parameters": [],
+ "responses": {
+ "200": {
+ "description": "The gzip compressed response data.",
+ "content": {
+ "application/json": {
+ "schema": {
+ "$ref": "#/components/schemas/CompressedResponse"
+ }
+ }
+ }
+ }
+ },
+ "tags": [
+ "Helpers"
+ ]
+ }
+ },
+ "/deflate": {
+ "get": {
+ "summary": "Deflate Compressed Response",
+ "description": "This endpoint returns the response using the [deflate compression algorithm](https://en.wikipedia.org/wiki/DEFLATE).\nThe uncompressed response is a JSON string containing the details of the request sent by the client. For this endpoint to work, one should request with an `Accept-encoding` header containing `deflate` as part of its value. Postman supports gzip, deflate, and SDCH decoding and automatically sends them as part of the request.\n\nHTTP Compression allows the server to send responses in a compressed format, which can reduce the amount of data that needs to be transferred over the network.",
+ "operationId": "DeflateGet",
+ "deprecated": false,
+ "parameters": [],
+ "responses": {
+ "200": {
+ "description": "The deflate compressed response data.",
+ "content": {
+ "application/json": {
+ "schema": {
+ "$ref": "#/components/schemas/CompressedResponse"
+ }
+ }
+ }
+ }
+ },
+ "tags": [
+ "Helpers"
+ ]
+ }
+ }
+ },
+ "components": {
+ "schemas": {
+ "AuthResponse": {
+ "type": "object",
+ "properties": {
+ "authenticated": {
+ "description": "Indicates if the authentication was successful.",
+ "type": "boolean"
+ }
+ }
+ },
+ "OAuth1Response": {
+ "type": "object",
+ "properties": {
+ "base_uri": {
+ "description": "The base URI used in the OAuth1.0 signature.",
+ "type": "string"
+ },
+ "normalized_param_string": {
+ "description": "The normalized parameter string used in the OAuth1.0 signature.",
+ "type": "string"
+ },
+ "base_str": {
+ "description": "The base string used in the OAuth1.0 signature.",
+ "type": "string"
+ }
+ }
+ },
+ "CookiesResponse": {
+ "type": "object",
+ "properties": {
+ "cookies": {
+ "description": "A list of cookies.",
+ "type": "object",
+ "additionalProperties": {
+ "type": "string"
+ }
+ }
+ }
+ },
+ "HeadersResponse": {
+ "type": "object",
+ "properties": {
+ "headers": {
+ "description": "A list of headers.",
+ "type": "object",
+ "additionalProperties": {
+ "type": "string"
+ }
+ }
+ }
+ },
+ "ResponseHeaders": {
+ "type": "object",
+ "properties": {
+ "Content-Type": {
+ "description": "The content type of the response.",
+ "type": "string"
+ },
+ "test": {
+ "description": "A custom test header.",
+ "type": "string"
+ }
+ }
+ },
+ "RequestEcho": {
+ "type": "object",
+ "properties": {
+ "headers": {
+ "description": "The request headers.",
+ "type": "object",
+ "additionalProperties": {
+ "type": "string"
+ }
+ },
+ "args": {
+ "description": "The query parameters.",
+ "type": "object",
+ "additionalProperties": {
+ "type": "string"
+ }
+ },
+ "url": {
+ "description": "The full URL of the request.",
+ "type": "string"
+ }
+ }
+ },
+ "StatusCodeResponse": {
+ "type": "object",
+ "properties": {
+ "status": {
+ "description": "The HTTP status code.",
+ "type": "integer"
+ }
+ }
+ },
+ "StreamResponse": {
+ "type": "object",
+ "properties": {
+ "data": {
+ "description": "The streamed response data.",
+ "type": "string"
+ }
+ }
+ },
+ "DelayResponse": {
+ "type": "object",
+ "properties": {
+ "delay": {
+ "description": "The delay time in seconds.",
+ "type": "string"
+ }
+ }
+ },
+ "Utf8Response": {
+ "type": "object",
+ "properties": {
+ "text": {
+ "description": "The UTF-8 encoded text.",
+ "type": "string"
+ }
+ }
+ },
+ "CompressedResponse": {
+ "type": "object",
+ "properties": {
+ "data": {
+ "description": "The compressed response data.",
+ "type": "string"
+ }
+ }
+ }
+ }
+ },
+ "tags": [
+ {
+ "name": "Standard Requests",
+ "description": "Test GET, POST, PUT, PATCH and DELETE",
+ "externalDocs": {
+ "description": "",
+ "url": ""
+ }
+ },
+ {
+ "name": "Authentication",
+ "description": "Test various Authentication Methods",
+ "externalDocs": {
+ "description": "",
+ "url": ""
+ }
+ },
+ {
+ "name": "Cookie",
+ "description": "Test Requests for Cookie Handling",
+ "externalDocs": {
+ "description": "",
+ "url": ""
+ }
+ },
+ {
+ "name": "Helpers",
+ "description": "",
+ "externalDocs": {
+ "description": "",
+ "url": ""
+ }
+ }
+ ]
+}
\ No newline at end of file
diff --git a/server/node-service/src/static/plugin-icons/postmanEcho.svg b/server/node-service/src/static/plugin-icons/postmanEcho.svg
new file mode 100644
index 000000000..fc842960b
--- /dev/null
+++ b/server/node-service/src/static/plugin-icons/postmanEcho.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 256 256" width="256" height="256" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M254.953 144.253c8.959-70.131-40.569-134.248-110.572-143.206C74.378-7.912 10.005 41.616 1.047 111.619c-8.959 70.003 40.569 134.248 110.572 143.334 70.131 8.959 134.248-40.569 143.334-110.7Z" fill="#FF6C37"/><path d="m174.2 82.184-54.007 54.007-15.229-15.23c53.11-53.11 58.358-48.503 69.236-38.777Z" fill="#FFF"/><path d="M120.193 137.47c-.384 0-.64-.128-.895-.384l-15.358-15.229a1.237 1.237 0 0 1 0-1.792c54.007-54.006 59.638-48.887 71.028-38.649.255.256.383.512.383.896s-.128.64-.383.896l-54.007 53.878c-.128.256-.512.384-.768.384Zm-13.437-16.509 13.437 13.438 52.087-52.087c-9.47-8.446-15.87-11.006-65.524 38.65Z" fill="#FF6C37"/><path d="m135.679 151.676-14.718-14.718 54.007-54.006c14.46 14.59-7.167 38.265-39.29 68.724Z" fill="#FFF"/><path d="M135.679 152.956c-.384 0-.64-.128-.896-.384l-14.718-14.718c-.256-.256-.256-.512-.256-.896s.128-.64.384-.895L174.2 82.056a1.237 1.237 0 0 1 1.791 0 15.58 15.58 0 0 1 4.991 11.902c-.256 14.206-16.38 32.25-44.28 58.614-.383.256-.767.384-1.023.384Zm-12.926-15.998c8.19 8.319 11.646 11.646 12.926 12.926 21.5-20.476 42.36-41.464 42.488-55.926.128-3.327-1.152-6.655-3.327-9.214l-52.087 52.214Z" fill="#FF6C37"/><path d="m105.22 121.345 10.878 10.878c.256.256.256.512 0 .768-.128.128-.128.128-.256.128l-22.524 4.863c-1.152.128-2.175-.64-2.431-1.791-.128-.64.128-1.28.512-1.664l13.053-13.054c.256-.256.64-.384.768-.128Z" fill="#FFF"/><path d="M92.934 139.262c-1.92 0-3.327-1.536-3.327-3.455 0-.896.384-1.792 1.024-2.432l13.053-13.054c.768-.64 1.792-.64 2.56 0l10.878 10.878c.768.64.768 1.792 0 2.56-.256.256-.512.384-.896.512l-22.524 4.863c-.256 0-.512.128-.768.128Zm11.902-16.51-12.542 12.543c-.256.256-.383.64-.128 1.024.128.383.512.511.896.383l21.116-4.607-9.342-9.342Z" fill="#FF6C37"/><path d="M202.739 52.238c-8.191-7.935-21.373-7.679-29.307.64-7.935 8.318-7.679 21.372.64 29.306A20.678 20.678 0 0 0 199.155 85l-14.59-14.59 18.174-18.172Z" fill="#FFF"/><path d="M188.405 89.223c-12.158 0-22.012-9.854-22.012-22.012 0-12.158 9.854-22.012 22.012-22.012 5.631 0 11.134 2.176 15.23 6.143.255.256.383.512.383.896s-.128.64-.384.895L186.357 70.41l13.566 13.566c.512.512.512 1.28 0 1.792l-.256.256c-3.327 2.047-7.295 3.199-11.262 3.199Zm0-41.337c-10.75 0-19.452 8.703-19.324 19.453 0 10.75 8.702 19.452 19.452 19.324 2.944 0 5.887-.64 8.575-2.047l-13.438-13.31c-.256-.256-.384-.512-.384-.896s.128-.64.384-.895l17.149-17.15c-3.456-2.943-7.807-4.479-12.414-4.479Z" fill="#FF6C37"/><path d="m203.122 52.622-.255-.256-18.301 18.044 14.461 14.462c1.408-.896 2.816-1.92 3.967-3.072a20.51 20.51 0 0 0 .128-29.178Z" fill="#FFF"/><path d="M199.155 86.28c-.384 0-.64-.128-.896-.384l-14.589-14.59c-.256-.256-.384-.512-.384-.896s.128-.64.384-.895l18.173-18.173a1.237 1.237 0 0 1 1.791 0l.384.256c8.575 8.574 8.575 22.396.128 31.098-1.28 1.28-2.687 2.432-4.223 3.328-.384.128-.64.256-.768.256Zm-12.798-15.87 12.926 12.926c1.024-.64 2.048-1.536 2.816-2.304 7.294-7.294 7.678-19.196.64-26.875L186.357 70.41Z" fill="#FF6C37"/><path d="M176.375 84.488a7.879 7.879 0 0 0-11.134 0l-48.247 48.247 8.063 8.063 51.062-44.792c3.328-2.816 3.584-7.807.768-11.134-.256-.128-.384-.256-.512-.384Z" fill="#FFF"/><path d="M124.929 142.077c-.384 0-.64-.128-.896-.383l-8.063-8.063a1.237 1.237 0 0 1 0-1.792l48.247-48.247a9.115 9.115 0 0 1 12.926 0 9.115 9.115 0 0 1 0 12.926l-.384.384-51.063 44.792c-.128.255-.384.383-.767.383Zm-6.143-9.342 6.27 6.271 50.167-44.024c2.816-2.304 3.072-6.527.768-9.342-2.303-2.816-6.526-3.072-9.342-.768-.128.128-.256.256-.512.384l-47.351 47.48Z" fill="#FF6C37"/><path d="M80.009 187.637c-.512.256-.768.768-.64 1.28l2.175 9.214c.512 1.28-.256 2.816-1.663 3.2-1.024.384-2.176 0-2.816-.768l-14.077-13.95 45.943-45.943 15.87.256 10.75 10.75c-2.56 2.175-18.045 17.149-55.542 35.961Z" fill="#FFF"/><path d="M78.985 202.61c-1.024 0-2.048-.383-2.688-1.151l-13.95-13.95c-.255-.256-.383-.512-.383-.896 0-.383.128-.64.384-.895l45.944-45.944c.256-.256.64-.384.895-.384l15.87.256c.383 0 .64.128.895.384l10.75 10.75c.256.256.384.64.384 1.024s-.128.64-.512.896l-.895.767c-13.566 11.902-31.995 23.804-54.902 35.194l2.175 9.086c.384 1.664-.384 3.456-1.92 4.352-.767.384-1.407.512-2.047.512Zm-14.078-15.997 13.182 13.054c.384.64 1.152.896 1.792.512.64-.384.896-1.152.512-1.792l-2.176-9.214c-.256-1.152.256-2.176 1.28-2.688 22.652-11.39 40.952-23.163 54.39-34.81l-9.47-9.47-14.718-.256-44.792 44.664Z" fill="#FF6C37"/><path d="m52.11 197.62 11.006-11.007 16.38 16.381-26.107-1.791c-1.151-.128-1.92-1.152-1.791-2.304 0-.512.128-1.024.512-1.28Z" fill="#FFF"/><path d="m79.497 204.146-26.236-1.791c-1.92-.128-3.199-1.792-3.071-3.712.128-.768.384-1.535 1.024-2.047L62.22 185.59a1.237 1.237 0 0 1 1.792 0l16.38 16.38c.385.385.512.897.257 1.408-.256.512-.64.768-1.152.768Zm-16.381-15.74-10.11 10.11c-.384.255-.384.895 0 1.151.127.128.255.256.511.256l22.652 1.536-13.053-13.054ZM104.452 146.557c-.768 0-1.28-.64-1.28-1.28 0-.384.128-.64.384-.896l12.414-12.414a1.237 1.237 0 0 1 1.792 0l8.062 8.063c.384.384.512.768.384 1.28-.128.384-.512.767-1.023.895l-20.477 4.352h-.256Zm12.414-11.902-8.446 8.446 13.821-2.943-5.375-5.503Z" fill="#FF6C37"/><path d="m124.8 140.926-14.077 3.071c-1.024.256-2.048-.384-2.303-1.408-.128-.64 0-1.28.511-1.791l7.807-7.807 8.063 7.935Z" fill="#FFF"/><path d="M110.467 145.277a3.168 3.168 0 0 1-3.2-3.2c0-.895.385-1.663.897-2.303l7.806-7.807a1.237 1.237 0 0 1 1.792 0l8.062 8.063c.384.384.512.768.384 1.28-.128.384-.512.767-1.023.895l-14.078 3.072h-.64Zm6.399-10.622-6.91 6.91c-.257.257-.257.512-.129.768s.384.384.768.384l11.774-2.56-5.503-5.502ZM203.25 64.907c-.256-.767-1.151-1.151-1.92-.895-.767.255-1.151 1.151-.895 1.92 0 .127.128.255.128.383.768 1.536.512 3.455-.512 4.863-.512.64-.384 1.536.128 2.048.64.512 1.536.384 2.048-.256 1.92-2.432 2.303-5.503 1.023-8.063Z" fill="#FF6C37"/></svg>
\ No newline at end of file