@qrvey/utils 1.12.0-8 → 1.12.0

package/dist/globalization/service/i18nextBuilder.js

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import i18next from "i18next";
-import { _get } from "../../general";
+import { isEmpty } from "../../general";
 import { mergeDeep } from "../../general/object/mergeDeep";
 export class I18nServiceBuilder {
     static buildI18n(i18nResource, i18nDefault) {
@@ -16,9 +16,8 @@ export class I18nServiceBuilder {
     }
     static _initI18n(i18nResource = {}, i18nDefault = {}) {
         return __awaiter(this, void 0, void 0, function* () {
-            if (!i18next.isInitialized ||
-                _get(i18next, "store.data.en.translation.common.aggregates") !==
-                    _get(i18nResource, "common.aggregates")) {
+            //Temporarily we meed to review this code
+            if (!i18next.isInitialized || !isEmpty(i18nResource)) {
                 yield this.getI18nInstance(i18nResource, i18nDefault, i18next);
             }
             return new I18nServiceConcrete(i18next);

package/dist/index.d.ts

@@ -14,3 +14,4 @@ export * from "./services/index";
 export * from "./typescript/index";
 export * from "./tokens/index";
 export * from "./column_format/index";
+export * from "./themes";

package/dist/index.js

@@ -14,3 +14,4 @@ export * from "./services/index";
 export * from "./typescript/index";
 export * from "./tokens/index";
 export * from "./column_format/index";
+export * from "./themes";

package/dist/interfaces/CustomTokens.interface.d.ts

@@ -9,3 +9,10 @@ export interface ICustomTokensSimple {
 export interface ICustomTokensComplex {
     [key: string]: CustomTokens[];
 }
+export interface ICustomTokensBoxDetail {
+    alias: string;
+    label: string;
+}
+export interface ICustomTokensBox {
+    [key: string]: ICustomTokensBoxDetail[];
+}

package/dist/services/helpers/Request.js

@@ -107,9 +107,12 @@ export class Request {
     static resolveRequest(reqData) {
         const url = this.makeUrl(reqData.config, reqData.url, reqData.params);
         const config = this.requestConfig(reqData);
-        return fetch(url, config)
+        const controller = new AbortController();
+        const { signal } = controller;
+        return fetch(url, Object.assign(Object.assign({}, config), { signal }))
             .then((res) => this.checkStatus(res))
-            .then((res) => res.json());
+            .then((res) => res.json())
+            .finally(() => signal.aborted && controller.abort());
     }
     static get(config, url = "", params) {
         return this.resolveRequest({ config, url, type: "GET", params });

package/dist/themes/constants/AUTOMATIC_CANVAS_CSS_VARIABLES_FOR_DARK.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Collection of CSS Variables for Dark Theme and its assigned values. Canvas porpuses
+ */
+export declare const AUTOMATIC_CANVAS_CSS_VARIABLES_FOR_DARK: {
+    "--qv-canvas-border-color": string;
+};

package/dist/themes/constants/AUTOMATIC_CANVAS_CSS_VARIABLES_FOR_DARK.js

@@ -0,0 +1,7 @@
+import { CANVAS_CSS_VARIABLES } from "./CANVAS_CSS_VARIABLES";
+/**
+ * Collection of CSS Variables for Dark Theme and its assigned values. Canvas porpuses
+ */
+export const AUTOMATIC_CANVAS_CSS_VARIABLES_FOR_DARK = {
+    [CANVAS_CSS_VARIABLES.BORDER]: "#FFFFFF20",
+};

package/dist/themes/constants/AUTOMATIC_CANVAS_CSS_VARIABLES_FOR_LIGHT.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Collection of CSS Variables for Light Theme and its assigned values. Canvas porpuses
+ */
+export declare const AUTOMATIC_CANVAS_CSS_VARIABLES_FOR_LIGHT: {
+    "--qv-canvas-border-color": string;
+};

package/dist/themes/constants/AUTOMATIC_CANVAS_CSS_VARIABLES_FOR_LIGHT.js

@@ -0,0 +1,7 @@
+import { CANVAS_CSS_VARIABLES } from "./CANVAS_CSS_VARIABLES";
+/**
+ * Collection of CSS Variables for Light Theme and its assigned values. Canvas porpuses
+ */
+export const AUTOMATIC_CANVAS_CSS_VARIABLES_FOR_LIGHT = {
+    [CANVAS_CSS_VARIABLES.BORDER]: "#00000010",
+};

package/dist/themes/constants/AUTOMATIC_CSS_VARIABLES.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Collection of CSS Variables for the theme and its assigned values.
+ */
+export declare const AUTOMATIC_CANVAS_CSS_VARIABLES: {
+    GLOBAL: {
+        DARK: {
+            "--qv-global-header-background-color": string;
+            "--qv-global-opacity-black-color": string;
+            "--qv-global-border-color": string;
+            "--qv-global-divider-color": string;
+            "--qv-global-hover-color": string;
+            "--qv-global-placeholder-color": string;
+            "--qv-pills-background-color": string;
+            "--qv-global-text-color": string;
+            "--qv-global-text-secondary-color": string;
+            "--qv-global-text-tertiary-color": string;
+        };
+        LIGHT: {
+            "--qv-global-header-background-color": string;
+            "--qv-global-opacity-black-color": string;
+            "--qv-global-border-color": string;
+            "--qv-global-divider-color": string;
+            "--qv-global-hover-color": string;
+            "--qv-global-placeholder-color": string;
+            "--qv-pills-background-color": string;
+            "--qv-global-text-color": any;
+            "--qv-global-text-secondary-color": string;
+            "--qv-global-text-tertiary-color": string;
+        };
+    };
+    CANVAS: {
+        DARK: {
+            "--qv-canvas-border-color": string;
+        };
+        LIGHT: {
+            "--qv-canvas-border-color": string;
+        };
+    };
+};

package/dist/themes/constants/AUTOMATIC_CSS_VARIABLES.js

@@ -0,0 +1,19 @@
+import { AUTOMATIC_CANVAS_CSS_VARIABLES_FOR_DARK } from "./AUTOMATIC_CANVAS_CSS_VARIABLES_FOR_DARK";
+import { AUTOMATIC_CANVAS_CSS_VARIABLES_FOR_LIGHT } from "./AUTOMATIC_CANVAS_CSS_VARIABLES_FOR_LIGHT";
+import { AUTOMATIC_GLOBAL_CSS_VARIABLES_FOR_DARK } from "./AUTOMATIC_GLOBAL_CSS_VARIABLES_FOR_DARK";
+import { AUTOMATIC_GLOBAL_CSS_VARIABLES_FOR_LIGHT } from "./AUTOMATIC_GLOBAL_CSS_VARIABLES_FOR_LIGHT";
+import { COLOR_TYPE } from "./COLOR_TYPE";
+import { CSS_VARIABLE_DESTINATION } from "./CSS_VARIABLE_DESTINATION";
+/**
+ * Collection of CSS Variables for the theme and its assigned values.
+ */
+export const AUTOMATIC_CANVAS_CSS_VARIABLES = {
+    [CSS_VARIABLE_DESTINATION.GLOBAL]: {
+        [COLOR_TYPE.DARK]: AUTOMATIC_GLOBAL_CSS_VARIABLES_FOR_DARK,
+        [COLOR_TYPE.LIGHT]: AUTOMATIC_GLOBAL_CSS_VARIABLES_FOR_LIGHT,
+    },
+    [CSS_VARIABLE_DESTINATION.CANVAS]: {
+        [COLOR_TYPE.DARK]: AUTOMATIC_CANVAS_CSS_VARIABLES_FOR_DARK,
+        [COLOR_TYPE.LIGHT]: AUTOMATIC_CANVAS_CSS_VARIABLES_FOR_LIGHT,
+    },
+};

package/dist/themes/constants/AUTOMATIC_GLOBAL_CSS_VARIABLES_FOR_DARK.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Collection of CSS Variables for Dark Theme and its assigned values.
+ */
+export declare const AUTOMATIC_GLOBAL_CSS_VARIABLES_FOR_DARK: {
+    "--qv-global-header-background-color": string;
+    "--qv-global-opacity-black-color": string;
+    "--qv-global-border-color": string;
+    "--qv-global-divider-color": string;
+    "--qv-global-hover-color": string;
+    "--qv-global-placeholder-color": string;
+    "--qv-pills-background-color": string;
+    "--qv-global-text-color": string;
+    "--qv-global-text-secondary-color": string;
+    "--qv-global-text-tertiary-color": string;
+};

package/dist/themes/constants/AUTOMATIC_GLOBAL_CSS_VARIABLES_FOR_DARK.js

@@ -0,0 +1,16 @@
+import { GLOBAL_CSS_VARIABLES } from "./GLOBAL_CSS_VARIABLES";
+/**
+ * Collection of CSS Variables for Dark Theme and its assigned values.
+ */
+export const AUTOMATIC_GLOBAL_CSS_VARIABLES_FOR_DARK = {
+    [GLOBAL_CSS_VARIABLES.HEADER_BACKGROUND_COLOR]: "#FFFFFF20",
+    [GLOBAL_CSS_VARIABLES.BACKGROUND_OPACITY_BLACK_COLOR]: "#00000010",
+    [GLOBAL_CSS_VARIABLES.BORDER_COLOR]: "#FFFFFF20",
+    [GLOBAL_CSS_VARIABLES.DIVIDER_COLOR]: "#FFFFFF20",
+    [GLOBAL_CSS_VARIABLES.HOVER_COLOR]: "#FFFFFF10",
+    [GLOBAL_CSS_VARIABLES.PLACEHOLDER_COLOR]: "#FFFFFF90",
+    [GLOBAL_CSS_VARIABLES.PILLS_BACKGROUND_COLOR]: "#00000020",
+    [GLOBAL_CSS_VARIABLES.TEXT_COLOR]: "#FFFFFF",
+    [GLOBAL_CSS_VARIABLES.TEXT_SECONDARY_COLOR]: "#FFFFFF90",
+    [GLOBAL_CSS_VARIABLES.TEXT_TERTIARY_COLOR]: "#FFFFFF80",
+};

package/dist/themes/constants/AUTOMATIC_GLOBAL_CSS_VARIABLES_FOR_LIGHT.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Collection of CSS Variables for Light Themes and its assigned values.
+ */
+export declare const AUTOMATIC_GLOBAL_CSS_VARIABLES_FOR_LIGHT: {
+    "--qv-global-header-background-color": string;
+    "--qv-global-opacity-black-color": string;
+    "--qv-global-border-color": string;
+    "--qv-global-divider-color": string;
+    "--qv-global-hover-color": string;
+    "--qv-global-placeholder-color": string;
+    "--qv-pills-background-color": string;
+    "--qv-global-text-color": any;
+    "--qv-global-text-secondary-color": string;
+    "--qv-global-text-tertiary-color": string;
+};

package/dist/themes/constants/AUTOMATIC_GLOBAL_CSS_VARIABLES_FOR_LIGHT.js

@@ -0,0 +1,16 @@
+import { GLOBAL_CSS_VARIABLES } from "./GLOBAL_CSS_VARIABLES";
+/**
+ * Collection of CSS Variables for Light Themes and its assigned values.
+ */
+export const AUTOMATIC_GLOBAL_CSS_VARIABLES_FOR_LIGHT = {
+    [GLOBAL_CSS_VARIABLES.HEADER_BACKGROUND_COLOR]: "#00000009",
+    [GLOBAL_CSS_VARIABLES.BACKGROUND_OPACITY_BLACK_COLOR]: "#FFFFFF10",
+    [GLOBAL_CSS_VARIABLES.BORDER_COLOR]: "#00000020",
+    [GLOBAL_CSS_VARIABLES.DIVIDER_COLOR]: "#00000020",
+    [GLOBAL_CSS_VARIABLES.HOVER_COLOR]: "#00000010",
+    [GLOBAL_CSS_VARIABLES.PLACEHOLDER_COLOR]: "#00000070",
+    [GLOBAL_CSS_VARIABLES.PILLS_BACKGROUND_COLOR]: "#FFFFFF40",
+    [GLOBAL_CSS_VARIABLES.TEXT_COLOR]: undefined,
+    [GLOBAL_CSS_VARIABLES.TEXT_SECONDARY_COLOR]: "#00000080",
+    [GLOBAL_CSS_VARIABLES.TEXT_TERTIARY_COLOR]: "#00000070",
+};

package/dist/themes/constants/CANVAS_CSS_VARIABLES.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Collection of CSS Variables to apply for Dark Theme
+ */
+export declare enum CANVAS_CSS_VARIABLES {
+    BORDER = "--qv-canvas-border-color"
+}

package/dist/themes/constants/CANVAS_CSS_VARIABLES.js

@@ -0,0 +1,7 @@
+/**
+ * Collection of CSS Variables to apply for Dark Theme
+ */
+export var CANVAS_CSS_VARIABLES;
+(function (CANVAS_CSS_VARIABLES) {
+    CANVAS_CSS_VARIABLES["BORDER"] = "--qv-canvas-border-color";
+})(CANVAS_CSS_VARIABLES || (CANVAS_CSS_VARIABLES = {}));

package/dist/themes/constants/COLOR_TYPE.d.ts

@@ -0,0 +1,4 @@
+export declare enum COLOR_TYPE {
+    DARK = "DARK",
+    LIGHT = "LIGHT"
+}

package/dist/themes/constants/COLOR_TYPE.js

@@ -0,0 +1,5 @@
+export var COLOR_TYPE;
+(function (COLOR_TYPE) {
+    COLOR_TYPE["DARK"] = "DARK";
+    COLOR_TYPE["LIGHT"] = "LIGHT";
+})(COLOR_TYPE || (COLOR_TYPE = {}));

package/dist/themes/constants/CSS_VARIABLE_DESTINATION.d.ts

@@ -0,0 +1,4 @@
+export declare enum CSS_VARIABLE_DESTINATION {
+    CANVAS = "CANVAS",
+    GLOBAL = "GLOBAL"
+}

package/dist/themes/constants/CSS_VARIABLE_DESTINATION.js

@@ -0,0 +1,5 @@
+export var CSS_VARIABLE_DESTINATION;
+(function (CSS_VARIABLE_DESTINATION) {
+    CSS_VARIABLE_DESTINATION["CANVAS"] = "CANVAS";
+    CSS_VARIABLE_DESTINATION["GLOBAL"] = "GLOBAL";
+})(CSS_VARIABLE_DESTINATION || (CSS_VARIABLE_DESTINATION = {}));

package/dist/themes/constants/GLOBAL_CSS_VARIABLES.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Collection of CSS Variables to apply for Dark Theme
+ */
+export declare enum GLOBAL_CSS_VARIABLES {
+    BACKGROUND_OPACITY_BLACK_COLOR = "--qv-global-opacity-black-color",
+    HEADER_BACKGROUND_COLOR = "--qv-global-header-background-color",
+    BORDER_COLOR = "--qv-global-border-color",
+    DIVIDER_COLOR = "--qv-global-divider-color",
+    HOVER_COLOR = "--qv-global-hover-color",
+    PLACEHOLDER_COLOR = "--qv-global-placeholder-color",
+    PILLS_BACKGROUND_COLOR = "--qv-pills-background-color",
+    TEXT_COLOR = "--qv-global-text-color",
+    TEXT_SECONDARY_COLOR = "--qv-global-text-secondary-color",
+    TEXT_TERTIARY_COLOR = "--qv-global-text-tertiary-color"
+}

package/dist/themes/constants/GLOBAL_CSS_VARIABLES.js

@@ -0,0 +1,16 @@
+/**
+ * Collection of CSS Variables to apply for Dark Theme
+ */
+export var GLOBAL_CSS_VARIABLES;
+(function (GLOBAL_CSS_VARIABLES) {
+    GLOBAL_CSS_VARIABLES["BACKGROUND_OPACITY_BLACK_COLOR"] = "--qv-global-opacity-black-color";
+    GLOBAL_CSS_VARIABLES["HEADER_BACKGROUND_COLOR"] = "--qv-global-header-background-color";
+    GLOBAL_CSS_VARIABLES["BORDER_COLOR"] = "--qv-global-border-color";
+    GLOBAL_CSS_VARIABLES["DIVIDER_COLOR"] = "--qv-global-divider-color";
+    GLOBAL_CSS_VARIABLES["HOVER_COLOR"] = "--qv-global-hover-color";
+    GLOBAL_CSS_VARIABLES["PLACEHOLDER_COLOR"] = "--qv-global-placeholder-color";
+    GLOBAL_CSS_VARIABLES["PILLS_BACKGROUND_COLOR"] = "--qv-pills-background-color";
+    GLOBAL_CSS_VARIABLES["TEXT_COLOR"] = "--qv-global-text-color";
+    GLOBAL_CSS_VARIABLES["TEXT_SECONDARY_COLOR"] = "--qv-global-text-secondary-color";
+    GLOBAL_CSS_VARIABLES["TEXT_TERTIARY_COLOR"] = "--qv-global-text-tertiary-color";
+})(GLOBAL_CSS_VARIABLES || (GLOBAL_CSS_VARIABLES = {}));

package/dist/themes/constants/HEXADECIMAL_REGULAR_EXPRESSION.d.ts

@@ -0,0 +1 @@
+export declare const HEXADECIMAL_REGULAR_EXPRESSION: RegExp;

package/dist/themes/constants/HEXADECIMAL_REGULAR_EXPRESSION.js

@@ -0,0 +1 @@
+export const HEXADECIMAL_REGULAR_EXPRESSION = /^#([0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/;

package/dist/themes/constants/RGBA_REGULAR_EXPRESION.d.ts

@@ -0,0 +1 @@
+export declare const RGBA_REGULAR_EXPRESSION: RegExp;

package/dist/themes/constants/RGBA_REGULAR_EXPRESION.js

@@ -0,0 +1 @@
+export const RGBA_REGULAR_EXPRESSION = /^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/;

package/dist/themes/constants/index.d.ts

@@ -0,0 +1,10 @@
+export * from "./AUTOMATIC_CANVAS_CSS_VARIABLES_FOR_DARK";
+export * from "./AUTOMATIC_CANVAS_CSS_VARIABLES_FOR_LIGHT";
+export * from "./AUTOMATIC_CSS_VARIABLES";
+export * from "./AUTOMATIC_GLOBAL_CSS_VARIABLES_FOR_DARK";
+export * from "./AUTOMATIC_GLOBAL_CSS_VARIABLES_FOR_LIGHT";
+export * from "./COLOR_TYPE";
+export * from "./CSS_VARIABLE_DESTINATION";
+export * from "./GLOBAL_CSS_VARIABLES";
+export * from "./HEXADECIMAL_REGULAR_EXPRESSION";
+export * from "./RGBA_REGULAR_EXPRESION";

package/dist/themes/constants/index.js

@@ -0,0 +1,10 @@
+export * from "./AUTOMATIC_CANVAS_CSS_VARIABLES_FOR_DARK";
+export * from "./AUTOMATIC_CANVAS_CSS_VARIABLES_FOR_LIGHT";
+export * from "./AUTOMATIC_CSS_VARIABLES";
+export * from "./AUTOMATIC_GLOBAL_CSS_VARIABLES_FOR_DARK";
+export * from "./AUTOMATIC_GLOBAL_CSS_VARIABLES_FOR_LIGHT";
+export * from "./COLOR_TYPE";
+export * from "./CSS_VARIABLE_DESTINATION";
+export * from "./GLOBAL_CSS_VARIABLES";
+export * from "./HEXADECIMAL_REGULAR_EXPRESSION";
+export * from "./RGBA_REGULAR_EXPRESION";

package/dist/themes/helpers/getCSSVariablesByDestination.d.ts

@@ -0,0 +1,45 @@
+import { IColorCSSVariableDestination } from "../interfaces/IColorCSSVariableDestination";
+/**
+ * Gets CSS variables depending on the destination of them.
+ * - Destination is the place where the CSS variables are going to be applied. With this, the right CSS variables are searched and set.
+ * @param destination the string of the destination.
+ * @returns the CSS variables and their values.
+ */
+export declare function getCSSVariablesByDestination(destination?: IColorCSSVariableDestination): {
+    DARK: {
+        "--qv-global-header-background-color": string; /**
+         * Gets CSS variables depending on the destination of them.
+         * - Destination is the place where the CSS variables are going to be applied. With this, the right CSS variables are searched and set.
+         * @param destination the string of the destination.
+         * @returns the CSS variables and their values.
+         */
+        "--qv-global-opacity-black-color": string;
+        "--qv-global-border-color": string;
+        "--qv-global-divider-color": string;
+        "--qv-global-hover-color": string;
+        "--qv-global-placeholder-color": string;
+        "--qv-pills-background-color": string;
+        "--qv-global-text-color": string;
+        "--qv-global-text-secondary-color": string;
+        "--qv-global-text-tertiary-color": string;
+    };
+    LIGHT: {
+        "--qv-global-header-background-color": string;
+        "--qv-global-opacity-black-color": string;
+        "--qv-global-border-color": string;
+        "--qv-global-divider-color": string;
+        "--qv-global-hover-color": string;
+        "--qv-global-placeholder-color": string;
+        "--qv-pills-background-color": string;
+        "--qv-global-text-color": any;
+        "--qv-global-text-secondary-color": string;
+        "--qv-global-text-tertiary-color": string;
+    };
+} | {
+    DARK: {
+        "--qv-canvas-border-color": string;
+    };
+    LIGHT: {
+        "--qv-canvas-border-color": string;
+    };
+};

package/dist/themes/helpers/getCSSVariablesByDestination.js

@@ -0,0 +1,11 @@
+import { AUTOMATIC_CANVAS_CSS_VARIABLES } from "../constants/AUTOMATIC_CSS_VARIABLES";
+import { CSS_VARIABLE_DESTINATION } from "../constants/CSS_VARIABLE_DESTINATION";
+/**
+ * Gets CSS variables depending on the destination of them.
+ * - Destination is the place where the CSS variables are going to be applied. With this, the right CSS variables are searched and set.
+ * @param destination the string of the destination.
+ * @returns the CSS variables and their values.
+ */
+export function getCSSVariablesByDestination(destination = CSS_VARIABLE_DESTINATION.GLOBAL) {
+    return AUTOMATIC_CANVAS_CSS_VARIABLES[destination];
+}

package/dist/themes/helpers/index.d.ts

@@ -0,0 +1,7 @@
+export * from "./getCSSVariablesByDestination";
+export * from "./lightOrDark";
+export * from "./isDarkColor";
+export * from "./isHexadecimalColor";
+export * from "./isRGBAColor";
+export * from "./lightOrDark";
+export * from "./setAutomaticCSSVariablesForDark";

package/dist/themes/helpers/index.js

@@ -0,0 +1,7 @@
+export * from "./getCSSVariablesByDestination";
+export * from "./lightOrDark";
+export * from "./isDarkColor";
+export * from "./isHexadecimalColor";
+export * from "./isRGBAColor";
+export * from "./lightOrDark";
+export * from "./setAutomaticCSSVariablesForDark";

package/dist/themes/helpers/isDarkColor.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Determines if the Color is dark or light.
+ * Uses the lightOrDark module.
+ * @param color the string of the color (RGBA, or Hexadecimal)
+ * @returns true: the color is dark.
+ */
+export declare function isDarkColor(color: string, brightnessThreshold?: number): boolean;

package/dist/themes/helpers/isDarkColor.js

@@ -0,0 +1,11 @@
+import { COLOR_TYPE } from "../constants/COLOR_TYPE";
+import { lightOrDark } from "./lightOrDark";
+/**
+ * Determines if the Color is dark or light.
+ * Uses the lightOrDark module.
+ * @param color the string of the color (RGBA, or Hexadecimal)
+ * @returns true: the color is dark.
+ */
+export function isDarkColor(color, brightnessThreshold = 127.5) {
+    return lightOrDark(color, brightnessThreshold) === COLOR_TYPE.DARK;
+}

package/dist/themes/helpers/isHexadecimalColor.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Validates if the given color is an hexadecimal structure
+ * @param color the string of the color
+ * @returns true: the color is an hexadecimal type
+ */
+export declare function isHexadecimalColor(color?: string): boolean;

package/dist/themes/helpers/isHexadecimalColor.js

@@ -0,0 +1,10 @@
+import { isEmpty } from "../../general/mix/isEmpty";
+import { HEXADECIMAL_REGULAR_EXPRESSION } from "../constants/HEXADECIMAL_REGULAR_EXPRESSION";
+/**
+ * Validates if the given color is an hexadecimal structure
+ * @param color the string of the color
+ * @returns true: the color is an hexadecimal type
+ */
+export function isHexadecimalColor(color = "") {
+    return !isEmpty(color === null || color === void 0 ? void 0 : color.match(HEXADECIMAL_REGULAR_EXPRESSION));
+}

package/dist/themes/helpers/isRGBAColor.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Validates if the given color is an RGBA structure
+ * @param color the string of the color
+ * @returns true: the color is an RGBA type
+ */
+export declare function isRGBAColor(color?: string): boolean;

package/dist/themes/helpers/isRGBAColor.js

@@ -0,0 +1,10 @@
+import { isEmpty } from "../../general/mix/isEmpty";
+import { RGBA_REGULAR_EXPRESSION } from "../constants/RGBA_REGULAR_EXPRESION";
+/**
+ * Validates if the given color is an RGBA structure
+ * @param color the string of the color
+ * @returns true: the color is an RGBA type
+ */
+export function isRGBAColor(color = "") {
+    return !isEmpty(color === null || color === void 0 ? void 0 : color.match(RGBA_REGULAR_EXPRESSION));
+}

package/dist/themes/helpers/lightOrDark.d.ts

@@ -0,0 +1,9 @@
+import { IColorType } from "../interfaces/IColorType";
+/**
+ * Validates if the given color is light or dark
+ * The module extracts the rgba channels and calculate the brightness or darkness by a threshold
+ * - If there is not color provided, the returning will be Light
+ * @param color the string of the color.
+ * @returns the color type (Dark or Light)
+ */
+export declare function lightOrDark(color: string, brightnessThreshold?: number, opacityThreshold?: number): IColorType;

package/dist/themes/helpers/lightOrDark.js

@@ -0,0 +1,52 @@
+import { isEmpty } from "../../general/mix/isEmpty";
+import { COLOR_TYPE } from "../constants/COLOR_TYPE";
+import { RGBA_REGULAR_EXPRESSION } from "../constants/RGBA_REGULAR_EXPRESION";
+import { isHexadecimalColor } from "./isHexadecimalColor";
+import { isRGBAColor } from "./isRGBAColor";
+/**
+ * Validates if the given color is light or dark
+ * The module extracts the rgba channels and calculate the brightness or darkness by a threshold
+ * - If there is not color provided, the returning will be Light
+ * @param color the string of the color.
+ * @returns the color type (Dark or Light)
+ */
+export function lightOrDark(color, brightnessThreshold = 127.5, opacityThreshold = 0.5) {
+    if (isEmpty(color))
+        return COLOR_TYPE.LIGHT;
+    const rgbaColor = isRGBAColor(color);
+    const hexadecimalColor = isHexadecimalColor(color);
+    if (!rgbaColor && !hexadecimalColor)
+        return;
+    let r, g, b, a;
+    if (rgbaColor) {
+        const colors = color.match(RGBA_REGULAR_EXPRESSION);
+        r = Number(colors[1]);
+        g = Number(colors[2]);
+        b = Number(colors[3]);
+        a = rgbaOpacity(color);
+    }
+    if (hexadecimalColor) {
+        const colorCode = +`0x${color
+            .slice(1)
+            .replace(color.length < 5 && /./g, "$&$&")}`;
+        r = colorCode >> 16;
+        g = (colorCode >> 8) & 255;
+        b = colorCode & 255;
+        a = hexadecimalOpacity(color);
+    }
+    // HSP equation from http://alienryderflex.com/hsp.html
+    const hsp = Math.sqrt(0.299 * (r * r) + 0.587 * (g * g) + 0.114 * (b * b));
+    if (hsp > brightnessThreshold || a < opacityThreshold) {
+        return COLOR_TYPE.LIGHT;
+    }
+    return COLOR_TYPE.DARK;
+}
+function hexadecimalOpacity(hexadecimal) {
+    const opacityHexa = hexadecimal.slice(7) || "FF";
+    return parseInt(opacityHexa, 16) / 255;
+}
+function rgbaOpacity(rgba) {
+    var _a;
+    const colors = rgba.match(RGBA_REGULAR_EXPRESSION);
+    return (_a = Number(colors[4])) !== null && _a !== void 0 ? _a : 1;
+}

package/dist/themes/helpers/setAutomaticCSSVariablesForDark.d.ts

@@ -0,0 +1,9 @@
+import { IColorCSSVariableDestination } from "../interfaces/IColorCSSVariableDestination";
+import { IColorType } from "../interfaces/IColorType";
+/**
+ * Sets CSS Variables into a given wrapper collection.
+ * For the Dark Theme feature.
+ * @param colorType the color type
+ * @param wrapperTags the html elements to set the CSS variables
+ */
+export declare function setAutomaticCSSVariablesForDark(colorType: IColorType, wrapperTags: string[], destination?: IColorCSSVariableDestination): void;

package/dist/themes/helpers/setAutomaticCSSVariablesForDark.js

@@ -0,0 +1,39 @@
+import { isEmpty } from "../../general/mix/isEmpty";
+import { CSS_VARIABLE_DESTINATION } from "../constants/CSS_VARIABLE_DESTINATION";
+import { getCSSVariablesByDestination } from "./getCSSVariablesByDestination";
+/**
+ * Sets CSS Variables into a given wrapper collection.
+ * For the Dark Theme feature.
+ * @param colorType the color type
+ * @param wrapperTags the html elements to set the CSS variables
+ */
+export function setAutomaticCSSVariablesForDark(colorType, wrapperTags, destination = CSS_VARIABLE_DESTINATION.GLOBAL) {
+    if (isEmpty(colorType) || isEmpty(wrapperTags))
+        return;
+    const cssVariables = getCSSVariablesByDestination(destination);
+    const cssVariablesKeys = Object.keys(cssVariables[colorType] || {});
+    wrapperTags.forEach((wrapperTag) => {
+        const wrapperElement = document.querySelector(wrapperTag);
+        setCSSVariable(wrapperElement, cssVariablesKeys, cssVariables[colorType]);
+    });
+}
+/**
+ * Sets CSS Variables into a given wrapper collection.
+ * For the Dark Theme feature.
+ * @param colorType the color type
+ * @param wrapper the html element to set the CSS variables
+ * @param cssVariables the CSS variables name to apply the style property
+ */
+function setCSSVariable(wrapper, cssVariables, cssProperties) {
+    if (isEmpty(wrapper) || isEmpty(cssVariables))
+        return;
+    cssVariables.forEach((cssVariable) => {
+        const cssProperty = cssProperties[cssVariable];
+        if (isEmpty(cssProperty)) {
+            wrapper.style.removeProperty(cssVariable);
+        }
+        else {
+            wrapper.style.setProperty(cssVariable, cssProperty);
+        }
+    });
+}

package/dist/themes/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./constants";
+export * from "./interfaces";
+export * from "./helpers";

package/dist/themes/index.js

@@ -0,0 +1,3 @@
+export * from "./constants";
+export * from "./interfaces";
+export * from "./helpers";

package/dist/themes/interfaces/IColorCSSVariableDestination.d.ts

@@ -0,0 +1,2 @@
+import { CSS_VARIABLE_DESTINATION } from "../constants/CSS_VARIABLE_DESTINATION";
+export type IColorCSSVariableDestination = CSS_VARIABLE_DESTINATION;

package/dist/themes/interfaces/IColorCSSVariableDestination.js

@@ -0,0 +1 @@
+export {};

package/dist/themes/interfaces/IColorType.d.ts

@@ -0,0 +1,2 @@
+import { COLOR_TYPE } from "../constants/COLOR_TYPE";
+export type IColorType = COLOR_TYPE;

package/dist/themes/interfaces/IColorType.js

@@ -0,0 +1 @@
+export {};

package/dist/themes/interfaces/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./IColorCSSVariableDestination";
+export * from "./IColorType";

package/dist/themes/interfaces/index.js

@@ -0,0 +1,2 @@
+export * from "./IColorCSSVariableDestination";
+export * from "./IColorType";