@qrvey/utils 1.12.0-20 → 1.12.0-22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/globalization/interfaces/chart_builder/II18nChartBuilderMenuActions.d.ts +5 -0
- package/dist/cjs/globalization/interfaces/panel/II18nPanelTooltips.d.ts +3 -0
- package/dist/cjs/globalization/labels/chart_builder/I18N_CHART_BUILDER_GENERAL_OPTIONS.js +7 -2
- package/dist/cjs/globalization/labels/panel/I18N_PANEL.js +3 -0
- package/dist/cjs/themes/constants/AUTOMATIC_CSS_VARIABLES_FOR_DARK.d.ts +13 -0
- package/dist/cjs/themes/constants/AUTOMATIC_CSS_VARIABLES_FOR_DARK.js +15 -2
- package/dist/cjs/themes/constants/CSS_VARIABLES_FOR_DARK.d.ts +1 -0
- package/dist/cjs/themes/constants/CSS_VARIABLES_FOR_DARK.js +1 -0
- package/dist/cjs/themes/helpers/setAutomaticCSSVariablesForDark.js +10 -7
- package/dist/globalization/interfaces/chart_builder/II18nChartBuilderMenuActions.d.ts +5 -0
- package/dist/globalization/interfaces/panel/II18nPanelTooltips.d.ts +3 -0
- package/dist/globalization/labels/chart_builder/I18N_CHART_BUILDER_GENERAL_OPTIONS.js +7 -2
- package/dist/globalization/labels/panel/I18N_PANEL.js +3 -0
- package/dist/themes/constants/AUTOMATIC_CSS_VARIABLES_FOR_DARK.d.ts +13 -0
- package/dist/themes/constants/AUTOMATIC_CSS_VARIABLES_FOR_DARK.js +14 -1
- package/dist/themes/constants/CSS_VARIABLES_FOR_DARK.d.ts +1 -0
- package/dist/themes/constants/CSS_VARIABLES_FOR_DARK.js +1 -0
- package/dist/themes/helpers/setAutomaticCSSVariablesForDark.js +11 -8
- package/package.json +1 -1
|
@@ -104,9 +104,14 @@ exports.I18N_CHART_BUILDER_GENERAL_OPTIONS = {
|
|
|
104
104
|
value: "Value",
|
|
105
105
|
},
|
|
106
106
|
menu_actions: {
|
|
107
|
-
title: "
|
|
107
|
+
title: "Self-service Options",
|
|
108
108
|
sorting: "Sorting",
|
|
109
|
-
visualization: "Visualization",
|
|
109
|
+
visualization: "Visualization Options",
|
|
110
|
+
filtering: "Filtering",
|
|
111
|
+
column_resizing: "Column Resizing",
|
|
112
|
+
column_arrangement: "Column Arrangement",
|
|
113
|
+
column_update: "Adding/Removing Columns",
|
|
114
|
+
change_aggregation: "Change Column Aggregations",
|
|
110
115
|
},
|
|
111
116
|
totals: {
|
|
112
117
|
title: "Totals",
|
|
@@ -8,7 +8,20 @@ export declare const AUTOMATIC_CSS_VARIABLES_FOR_DARK: {
|
|
|
8
8
|
"--qv-global-divider-color": string;
|
|
9
9
|
"--qv-global-hover-color": string;
|
|
10
10
|
"--qv-global-placeholder-color": string;
|
|
11
|
+
"--qv-pills-background-color": string;
|
|
11
12
|
"--qv-global-text-color": string;
|
|
12
13
|
"--qv-global-text-secondary-color": string;
|
|
13
14
|
"--qv-global-text-tertiary-color": string;
|
|
14
15
|
};
|
|
16
|
+
export declare const AUTOMATIC_CSS_VARIABLES_FOR_LIGHT: {
|
|
17
|
+
"--qv-global-opacity-white-color": string;
|
|
18
|
+
"--qv-global-opacity-black-color": string;
|
|
19
|
+
"--qv-global-border-color": string;
|
|
20
|
+
"--qv-global-divider-color": string;
|
|
21
|
+
"--qv-global-hover-color": string;
|
|
22
|
+
"--qv-global-placeholder-color": string;
|
|
23
|
+
"--qv-pills-background-color": string;
|
|
24
|
+
"--qv-global-text-color": any;
|
|
25
|
+
"--qv-global-text-secondary-color": string;
|
|
26
|
+
"--qv-global-text-tertiary-color": string;
|
|
27
|
+
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.AUTOMATIC_CSS_VARIABLES_FOR_DARK = void 0;
|
|
3
|
+
exports.AUTOMATIC_CSS_VARIABLES_FOR_LIGHT = exports.AUTOMATIC_CSS_VARIABLES_FOR_DARK = void 0;
|
|
4
4
|
const CSS_VARIABLES_FOR_DARK_1 = require("./CSS_VARIABLES_FOR_DARK");
|
|
5
5
|
/**
|
|
6
6
|
* Collection of CSS Variables for Dark Theme and its assigned values.
|
|
@@ -10,9 +10,22 @@ exports.AUTOMATIC_CSS_VARIABLES_FOR_DARK = {
|
|
|
10
10
|
[CSS_VARIABLES_FOR_DARK_1.CSS_VARIABLES_FOR_DARK.BACKGROUND_OPACITY_BLACK_COLOR]: "#00000010",
|
|
11
11
|
[CSS_VARIABLES_FOR_DARK_1.CSS_VARIABLES_FOR_DARK.BORDER]: "#FFFFFF20",
|
|
12
12
|
[CSS_VARIABLES_FOR_DARK_1.CSS_VARIABLES_FOR_DARK.DIVIDER]: "#FFFFFF20",
|
|
13
|
-
[CSS_VARIABLES_FOR_DARK_1.CSS_VARIABLES_FOR_DARK.HOVER]: "#
|
|
13
|
+
[CSS_VARIABLES_FOR_DARK_1.CSS_VARIABLES_FOR_DARK.HOVER]: "#FFFFFF10",
|
|
14
14
|
[CSS_VARIABLES_FOR_DARK_1.CSS_VARIABLES_FOR_DARK.PLACEHOLDER]: "#FFFFFF90",
|
|
15
|
+
[CSS_VARIABLES_FOR_DARK_1.CSS_VARIABLES_FOR_DARK.PILLS]: "#00000020",
|
|
15
16
|
[CSS_VARIABLES_FOR_DARK_1.CSS_VARIABLES_FOR_DARK.TEXT]: "#FFFFFF",
|
|
16
17
|
[CSS_VARIABLES_FOR_DARK_1.CSS_VARIABLES_FOR_DARK.TEXT_SECONDARY]: "#FFFFFF90",
|
|
17
18
|
[CSS_VARIABLES_FOR_DARK_1.CSS_VARIABLES_FOR_DARK.TEXT_TERTIARY]: "#FFFFFF70",
|
|
18
19
|
};
|
|
20
|
+
exports.AUTOMATIC_CSS_VARIABLES_FOR_LIGHT = {
|
|
21
|
+
[CSS_VARIABLES_FOR_DARK_1.CSS_VARIABLES_FOR_DARK.BACKGROUND_OPACITY_WHITE_COLOR]: "#00000020",
|
|
22
|
+
[CSS_VARIABLES_FOR_DARK_1.CSS_VARIABLES_FOR_DARK.BACKGROUND_OPACITY_BLACK_COLOR]: "#FFFFFF10",
|
|
23
|
+
[CSS_VARIABLES_FOR_DARK_1.CSS_VARIABLES_FOR_DARK.BORDER]: "#00000020",
|
|
24
|
+
[CSS_VARIABLES_FOR_DARK_1.CSS_VARIABLES_FOR_DARK.DIVIDER]: "#00000020",
|
|
25
|
+
[CSS_VARIABLES_FOR_DARK_1.CSS_VARIABLES_FOR_DARK.HOVER]: "#00000010",
|
|
26
|
+
[CSS_VARIABLES_FOR_DARK_1.CSS_VARIABLES_FOR_DARK.PLACEHOLDER]: "#00000070",
|
|
27
|
+
[CSS_VARIABLES_FOR_DARK_1.CSS_VARIABLES_FOR_DARK.PILLS]: "#FFFFFF40",
|
|
28
|
+
[CSS_VARIABLES_FOR_DARK_1.CSS_VARIABLES_FOR_DARK.TEXT]: undefined,
|
|
29
|
+
[CSS_VARIABLES_FOR_DARK_1.CSS_VARIABLES_FOR_DARK.TEXT_SECONDARY]: "#00000030",
|
|
30
|
+
[CSS_VARIABLES_FOR_DARK_1.CSS_VARIABLES_FOR_DARK.TEXT_TERTIARY]: "#00000040",
|
|
31
|
+
};
|
|
@@ -8,6 +8,7 @@ export declare enum CSS_VARIABLES_FOR_DARK {
|
|
|
8
8
|
DIVIDER = "--qv-global-divider-color",
|
|
9
9
|
HOVER = "--qv-global-hover-color",
|
|
10
10
|
PLACEHOLDER = "--qv-global-placeholder-color",
|
|
11
|
+
PILLS = "--qv-pills-background-color",
|
|
11
12
|
TEXT = "--qv-global-text-color",
|
|
12
13
|
TEXT_SECONDARY = "--qv-global-text-secondary-color",
|
|
13
14
|
TEXT_TERTIARY = "--qv-global-text-tertiary-color"
|
|
@@ -12,6 +12,7 @@ var CSS_VARIABLES_FOR_DARK;
|
|
|
12
12
|
CSS_VARIABLES_FOR_DARK["DIVIDER"] = "--qv-global-divider-color";
|
|
13
13
|
CSS_VARIABLES_FOR_DARK["HOVER"] = "--qv-global-hover-color";
|
|
14
14
|
CSS_VARIABLES_FOR_DARK["PLACEHOLDER"] = "--qv-global-placeholder-color";
|
|
15
|
+
CSS_VARIABLES_FOR_DARK["PILLS"] = "--qv-pills-background-color";
|
|
15
16
|
CSS_VARIABLES_FOR_DARK["TEXT"] = "--qv-global-text-color";
|
|
16
17
|
CSS_VARIABLES_FOR_DARK["TEXT_SECONDARY"] = "--qv-global-text-secondary-color";
|
|
17
18
|
CSS_VARIABLES_FOR_DARK["TEXT_TERTIARY"] = "--qv-global-text-tertiary-color";
|
|
@@ -13,10 +13,13 @@ const COLOR_TYPE_1 = require("../constants/COLOR_TYPE");
|
|
|
13
13
|
function setAutomaticCSSVariablesForDark(colorType, wrapperTags) {
|
|
14
14
|
if ((0, isEmpty_1.isEmpty)(colorType) || (0, isEmpty_1.isEmpty)(wrapperTags))
|
|
15
15
|
return;
|
|
16
|
-
const
|
|
16
|
+
const cssDarkVariables = Object.keys(AUTOMATIC_CSS_VARIABLES_FOR_DARK_1.AUTOMATIC_CSS_VARIABLES_FOR_DARK);
|
|
17
|
+
const cssLightVariables = Object.keys(AUTOMATIC_CSS_VARIABLES_FOR_DARK_1.AUTOMATIC_CSS_VARIABLES_FOR_LIGHT);
|
|
17
18
|
wrapperTags.forEach((wrapperTag) => {
|
|
18
19
|
const wrapperElement = document.querySelector(wrapperTag);
|
|
19
|
-
setCSSVariable(colorType, wrapperElement,
|
|
20
|
+
setCSSVariable(colorType, wrapperElement, colorType === COLOR_TYPE_1.COLOR_TYPE.DARK ? cssDarkVariables : cssLightVariables, colorType === COLOR_TYPE_1.COLOR_TYPE.DARK
|
|
21
|
+
? AUTOMATIC_CSS_VARIABLES_FOR_DARK_1.AUTOMATIC_CSS_VARIABLES_FOR_DARK
|
|
22
|
+
: AUTOMATIC_CSS_VARIABLES_FOR_DARK_1.AUTOMATIC_CSS_VARIABLES_FOR_LIGHT);
|
|
20
23
|
});
|
|
21
24
|
}
|
|
22
25
|
exports.setAutomaticCSSVariablesForDark = setAutomaticCSSVariablesForDark;
|
|
@@ -27,16 +30,16 @@ exports.setAutomaticCSSVariablesForDark = setAutomaticCSSVariablesForDark;
|
|
|
27
30
|
* @param wrapper the html element to set the CSS variables
|
|
28
31
|
* @param cssVariables the CSS variables name to apply the style property
|
|
29
32
|
*/
|
|
30
|
-
function setCSSVariable(colorType, wrapper, cssVariables) {
|
|
33
|
+
function setCSSVariable(colorType, wrapper, cssVariables, cssProperties) {
|
|
31
34
|
if ((0, isEmpty_1.isEmpty)(wrapper) || (0, isEmpty_1.isEmpty)(cssVariables))
|
|
32
35
|
return;
|
|
33
36
|
cssVariables.forEach((cssVariable) => {
|
|
34
|
-
const cssProperty =
|
|
35
|
-
if (
|
|
36
|
-
wrapper.style.
|
|
37
|
+
const cssProperty = cssProperties[cssVariable];
|
|
38
|
+
if ((0, isEmpty_1.isEmpty)(cssProperty)) {
|
|
39
|
+
wrapper.style.removeProperty(cssVariable);
|
|
37
40
|
}
|
|
38
41
|
else {
|
|
39
|
-
wrapper.style.
|
|
42
|
+
wrapper.style.setProperty(cssVariable, cssProperty);
|
|
40
43
|
}
|
|
41
44
|
});
|
|
42
45
|
}
|
|
@@ -101,9 +101,14 @@ export const I18N_CHART_BUILDER_GENERAL_OPTIONS = {
|
|
|
101
101
|
value: "Value",
|
|
102
102
|
},
|
|
103
103
|
menu_actions: {
|
|
104
|
-
title: "
|
|
104
|
+
title: "Self-service Options",
|
|
105
105
|
sorting: "Sorting",
|
|
106
|
-
visualization: "Visualization",
|
|
106
|
+
visualization: "Visualization Options",
|
|
107
|
+
filtering: "Filtering",
|
|
108
|
+
column_resizing: "Column Resizing",
|
|
109
|
+
column_arrangement: "Column Arrangement",
|
|
110
|
+
column_update: "Adding/Removing Columns",
|
|
111
|
+
change_aggregation: "Change Column Aggregations",
|
|
107
112
|
},
|
|
108
113
|
totals: {
|
|
109
114
|
title: "Totals",
|
|
@@ -8,7 +8,20 @@ export declare const AUTOMATIC_CSS_VARIABLES_FOR_DARK: {
|
|
|
8
8
|
"--qv-global-divider-color": string;
|
|
9
9
|
"--qv-global-hover-color": string;
|
|
10
10
|
"--qv-global-placeholder-color": string;
|
|
11
|
+
"--qv-pills-background-color": string;
|
|
11
12
|
"--qv-global-text-color": string;
|
|
12
13
|
"--qv-global-text-secondary-color": string;
|
|
13
14
|
"--qv-global-text-tertiary-color": string;
|
|
14
15
|
};
|
|
16
|
+
export declare const AUTOMATIC_CSS_VARIABLES_FOR_LIGHT: {
|
|
17
|
+
"--qv-global-opacity-white-color": string;
|
|
18
|
+
"--qv-global-opacity-black-color": string;
|
|
19
|
+
"--qv-global-border-color": string;
|
|
20
|
+
"--qv-global-divider-color": string;
|
|
21
|
+
"--qv-global-hover-color": string;
|
|
22
|
+
"--qv-global-placeholder-color": string;
|
|
23
|
+
"--qv-pills-background-color": string;
|
|
24
|
+
"--qv-global-text-color": any;
|
|
25
|
+
"--qv-global-text-secondary-color": string;
|
|
26
|
+
"--qv-global-text-tertiary-color": string;
|
|
27
|
+
};
|
|
@@ -7,9 +7,22 @@ export const AUTOMATIC_CSS_VARIABLES_FOR_DARK = {
|
|
|
7
7
|
[CSS_VARIABLES_FOR_DARK.BACKGROUND_OPACITY_BLACK_COLOR]: "#00000010",
|
|
8
8
|
[CSS_VARIABLES_FOR_DARK.BORDER]: "#FFFFFF20",
|
|
9
9
|
[CSS_VARIABLES_FOR_DARK.DIVIDER]: "#FFFFFF20",
|
|
10
|
-
[CSS_VARIABLES_FOR_DARK.HOVER]: "#
|
|
10
|
+
[CSS_VARIABLES_FOR_DARK.HOVER]: "#FFFFFF10",
|
|
11
11
|
[CSS_VARIABLES_FOR_DARK.PLACEHOLDER]: "#FFFFFF90",
|
|
12
|
+
[CSS_VARIABLES_FOR_DARK.PILLS]: "#00000020",
|
|
12
13
|
[CSS_VARIABLES_FOR_DARK.TEXT]: "#FFFFFF",
|
|
13
14
|
[CSS_VARIABLES_FOR_DARK.TEXT_SECONDARY]: "#FFFFFF90",
|
|
14
15
|
[CSS_VARIABLES_FOR_DARK.TEXT_TERTIARY]: "#FFFFFF70",
|
|
15
16
|
};
|
|
17
|
+
export const AUTOMATIC_CSS_VARIABLES_FOR_LIGHT = {
|
|
18
|
+
[CSS_VARIABLES_FOR_DARK.BACKGROUND_OPACITY_WHITE_COLOR]: "#00000020",
|
|
19
|
+
[CSS_VARIABLES_FOR_DARK.BACKGROUND_OPACITY_BLACK_COLOR]: "#FFFFFF10",
|
|
20
|
+
[CSS_VARIABLES_FOR_DARK.BORDER]: "#00000020",
|
|
21
|
+
[CSS_VARIABLES_FOR_DARK.DIVIDER]: "#00000020",
|
|
22
|
+
[CSS_VARIABLES_FOR_DARK.HOVER]: "#00000010",
|
|
23
|
+
[CSS_VARIABLES_FOR_DARK.PLACEHOLDER]: "#00000070",
|
|
24
|
+
[CSS_VARIABLES_FOR_DARK.PILLS]: "#FFFFFF40",
|
|
25
|
+
[CSS_VARIABLES_FOR_DARK.TEXT]: undefined,
|
|
26
|
+
[CSS_VARIABLES_FOR_DARK.TEXT_SECONDARY]: "#00000030",
|
|
27
|
+
[CSS_VARIABLES_FOR_DARK.TEXT_TERTIARY]: "#00000040",
|
|
28
|
+
};
|
|
@@ -8,6 +8,7 @@ export declare enum CSS_VARIABLES_FOR_DARK {
|
|
|
8
8
|
DIVIDER = "--qv-global-divider-color",
|
|
9
9
|
HOVER = "--qv-global-hover-color",
|
|
10
10
|
PLACEHOLDER = "--qv-global-placeholder-color",
|
|
11
|
+
PILLS = "--qv-pills-background-color",
|
|
11
12
|
TEXT = "--qv-global-text-color",
|
|
12
13
|
TEXT_SECONDARY = "--qv-global-text-secondary-color",
|
|
13
14
|
TEXT_TERTIARY = "--qv-global-text-tertiary-color"
|
|
@@ -9,6 +9,7 @@ export var CSS_VARIABLES_FOR_DARK;
|
|
|
9
9
|
CSS_VARIABLES_FOR_DARK["DIVIDER"] = "--qv-global-divider-color";
|
|
10
10
|
CSS_VARIABLES_FOR_DARK["HOVER"] = "--qv-global-hover-color";
|
|
11
11
|
CSS_VARIABLES_FOR_DARK["PLACEHOLDER"] = "--qv-global-placeholder-color";
|
|
12
|
+
CSS_VARIABLES_FOR_DARK["PILLS"] = "--qv-pills-background-color";
|
|
12
13
|
CSS_VARIABLES_FOR_DARK["TEXT"] = "--qv-global-text-color";
|
|
13
14
|
CSS_VARIABLES_FOR_DARK["TEXT_SECONDARY"] = "--qv-global-text-secondary-color";
|
|
14
15
|
CSS_VARIABLES_FOR_DARK["TEXT_TERTIARY"] = "--qv-global-text-tertiary-color";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { isEmpty } from "../../general/mix/isEmpty";
|
|
2
|
-
import { AUTOMATIC_CSS_VARIABLES_FOR_DARK } from "../constants/AUTOMATIC_CSS_VARIABLES_FOR_DARK";
|
|
2
|
+
import { AUTOMATIC_CSS_VARIABLES_FOR_DARK, AUTOMATIC_CSS_VARIABLES_FOR_LIGHT, } from "../constants/AUTOMATIC_CSS_VARIABLES_FOR_DARK";
|
|
3
3
|
import { COLOR_TYPE } from "../constants/COLOR_TYPE";
|
|
4
4
|
/**
|
|
5
5
|
* Sets CSS Variables into a given wrapper collection.
|
|
@@ -10,10 +10,13 @@ import { COLOR_TYPE } from "../constants/COLOR_TYPE";
|
|
|
10
10
|
export function setAutomaticCSSVariablesForDark(colorType, wrapperTags) {
|
|
11
11
|
if (isEmpty(colorType) || isEmpty(wrapperTags))
|
|
12
12
|
return;
|
|
13
|
-
const
|
|
13
|
+
const cssDarkVariables = Object.keys(AUTOMATIC_CSS_VARIABLES_FOR_DARK);
|
|
14
|
+
const cssLightVariables = Object.keys(AUTOMATIC_CSS_VARIABLES_FOR_LIGHT);
|
|
14
15
|
wrapperTags.forEach((wrapperTag) => {
|
|
15
16
|
const wrapperElement = document.querySelector(wrapperTag);
|
|
16
|
-
setCSSVariable(colorType, wrapperElement,
|
|
17
|
+
setCSSVariable(colorType, wrapperElement, colorType === COLOR_TYPE.DARK ? cssDarkVariables : cssLightVariables, colorType === COLOR_TYPE.DARK
|
|
18
|
+
? AUTOMATIC_CSS_VARIABLES_FOR_DARK
|
|
19
|
+
: AUTOMATIC_CSS_VARIABLES_FOR_LIGHT);
|
|
17
20
|
});
|
|
18
21
|
}
|
|
19
22
|
/**
|
|
@@ -23,16 +26,16 @@ export function setAutomaticCSSVariablesForDark(colorType, wrapperTags) {
|
|
|
23
26
|
* @param wrapper the html element to set the CSS variables
|
|
24
27
|
* @param cssVariables the CSS variables name to apply the style property
|
|
25
28
|
*/
|
|
26
|
-
function setCSSVariable(colorType, wrapper, cssVariables) {
|
|
29
|
+
function setCSSVariable(colorType, wrapper, cssVariables, cssProperties) {
|
|
27
30
|
if (isEmpty(wrapper) || isEmpty(cssVariables))
|
|
28
31
|
return;
|
|
29
32
|
cssVariables.forEach((cssVariable) => {
|
|
30
|
-
const cssProperty =
|
|
31
|
-
if (
|
|
32
|
-
wrapper.style.
|
|
33
|
+
const cssProperty = cssProperties[cssVariable];
|
|
34
|
+
if (isEmpty(cssProperty)) {
|
|
35
|
+
wrapper.style.removeProperty(cssVariable);
|
|
33
36
|
}
|
|
34
37
|
else {
|
|
35
|
-
wrapper.style.
|
|
38
|
+
wrapper.style.setProperty(cssVariable, cssProperty);
|
|
36
39
|
}
|
|
37
40
|
});
|
|
38
41
|
}
|