@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.
@@ -2,4 +2,9 @@ export interface II18nChartBuilderMenuActions {
2
2
  title: string;
3
3
  sorting: string;
4
4
  visualization: string;
5
+ filtering: string;
6
+ column_resizing: string;
7
+ column_arrangement: string;
8
+ column_update: string;
9
+ change_aggregation: string;
5
10
  }
@@ -1,4 +1,7 @@
1
1
  export interface II18nPanelTooltips {
2
2
  fit_panel: string;
3
3
  no_filters: string;
4
+ select_columns: string;
5
+ sort_by: string;
6
+ smart_analyzer: string;
4
7
  }
@@ -104,9 +104,14 @@ exports.I18N_CHART_BUILDER_GENERAL_OPTIONS = {
104
104
  value: "Value",
105
105
  },
106
106
  menu_actions: {
107
- title: "Menu Actions",
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",
@@ -124,6 +124,9 @@ exports.I18N_PANEL = {
124
124
  tooltips: {
125
125
  fit_panel: "Fit to panel",
126
126
  no_filters: "No filters applied",
127
+ select_columns: "Select columns",
128
+ sort_by: "Sort by",
129
+ smart_analyzer: "Smart analyzer",
127
130
  },
128
131
  top: "Top",
129
132
  };
@@ -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]: "#00000020",
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 cssVariables = Object.keys(AUTOMATIC_CSS_VARIABLES_FOR_DARK_1.AUTOMATIC_CSS_VARIABLES_FOR_DARK);
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, cssVariables);
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 = AUTOMATIC_CSS_VARIABLES_FOR_DARK_1.AUTOMATIC_CSS_VARIABLES_FOR_DARK[cssVariable];
35
- if (colorType === COLOR_TYPE_1.COLOR_TYPE.DARK) {
36
- wrapper.style.setProperty(cssVariable, cssProperty);
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.removeProperty(cssVariable);
42
+ wrapper.style.setProperty(cssVariable, cssProperty);
40
43
  }
41
44
  });
42
45
  }
@@ -2,4 +2,9 @@ export interface II18nChartBuilderMenuActions {
2
2
  title: string;
3
3
  sorting: string;
4
4
  visualization: string;
5
+ filtering: string;
6
+ column_resizing: string;
7
+ column_arrangement: string;
8
+ column_update: string;
9
+ change_aggregation: string;
5
10
  }
@@ -1,4 +1,7 @@
1
1
  export interface II18nPanelTooltips {
2
2
  fit_panel: string;
3
3
  no_filters: string;
4
+ select_columns: string;
5
+ sort_by: string;
6
+ smart_analyzer: string;
4
7
  }
@@ -101,9 +101,14 @@ export const I18N_CHART_BUILDER_GENERAL_OPTIONS = {
101
101
  value: "Value",
102
102
  },
103
103
  menu_actions: {
104
- title: "Menu Actions",
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",
@@ -121,6 +121,9 @@ export const I18N_PANEL = {
121
121
  tooltips: {
122
122
  fit_panel: "Fit to panel",
123
123
  no_filters: "No filters applied",
124
+ select_columns: "Select columns",
125
+ sort_by: "Sort by",
126
+ smart_analyzer: "Smart analyzer",
124
127
  },
125
128
  top: "Top",
126
129
  };
@@ -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]: "#00000020",
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 cssVariables = Object.keys(AUTOMATIC_CSS_VARIABLES_FOR_DARK);
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, cssVariables);
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 = AUTOMATIC_CSS_VARIABLES_FOR_DARK[cssVariable];
31
- if (colorType === COLOR_TYPE.DARK) {
32
- wrapper.style.setProperty(cssVariable, cssProperty);
33
+ const cssProperty = cssProperties[cssVariable];
34
+ if (isEmpty(cssProperty)) {
35
+ wrapper.style.removeProperty(cssVariable);
33
36
  }
34
37
  else {
35
- wrapper.style.removeProperty(cssVariable);
38
+ wrapper.style.setProperty(cssVariable, cssProperty);
36
39
  }
37
40
  });
38
41
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@qrvey/utils",
3
- "version": "1.12.0-20",
3
+ "version": "1.12.0-22",
4
4
  "description": "Helper, Utils for all Qrvey Projects",
5
5
  "homepage": "https://bitbucket.org/qrvey/qrvey_utils/wiki/Home",
6
6
  "main": "dist/index.js",