@qrvey/utils 1.12.0-2 → 1.12.0-21

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

@@ -0,0 +1,15 @@
+/**
+ * Collection of CSS Variables to apply for Dark Theme
+ */
+export declare enum CSS_VARIABLES_FOR_DARK {
+    BACKGROUND_OPACITY_BLACK_COLOR = "--qv-global-opacity-black-color",
+    BACKGROUND_OPACITY_WHITE_COLOR = "--qv-global-opacity-white-color",
+    BORDER = "--qv-global-border-color",
+    DIVIDER = "--qv-global-divider-color",
+    HOVER = "--qv-global-hover-color",
+    PLACEHOLDER = "--qv-global-placeholder-color",
+    PILLS = "--qv-pills-background-color",
+    TEXT = "--qv-global-text-color",
+    TEXT_SECONDARY = "--qv-global-text-secondary-color",
+    TEXT_TERTIARY = "--qv-global-text-tertiary-color"
+}

package/dist/themes/constants/CSS_VARIABLES_FOR_DARK.js

@@ -0,0 +1,16 @@
+/**
+ * Collection of CSS Variables to apply for Dark Theme
+ */
+export var CSS_VARIABLES_FOR_DARK;
+(function (CSS_VARIABLES_FOR_DARK) {
+    CSS_VARIABLES_FOR_DARK["BACKGROUND_OPACITY_BLACK_COLOR"] = "--qv-global-opacity-black-color";
+    CSS_VARIABLES_FOR_DARK["BACKGROUND_OPACITY_WHITE_COLOR"] = "--qv-global-opacity-white-color";
+    CSS_VARIABLES_FOR_DARK["BORDER"] = "--qv-global-border-color";
+    CSS_VARIABLES_FOR_DARK["DIVIDER"] = "--qv-global-divider-color";
+    CSS_VARIABLES_FOR_DARK["HOVER"] = "--qv-global-hover-color";
+    CSS_VARIABLES_FOR_DARK["PLACEHOLDER"] = "--qv-global-placeholder-color";
+    CSS_VARIABLES_FOR_DARK["PILLS"] = "--qv-pills-background-color";
+    CSS_VARIABLES_FOR_DARK["TEXT"] = "--qv-global-text-color";
+    CSS_VARIABLES_FOR_DARK["TEXT_SECONDARY"] = "--qv-global-text-secondary-color";
+    CSS_VARIABLES_FOR_DARK["TEXT_TERTIARY"] = "--qv-global-text-tertiary-color";
+})(CSS_VARIABLES_FOR_DARK || (CSS_VARIABLES_FOR_DARK = {}));

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,5 @@
+export * from "./AUTOMATIC_CSS_VARIABLES_FOR_DARK";
+export * from "./COLOR_TYPE";
+export * from "./CSS_VARIABLES_FOR_DARK";
+export * from "./HEXADECIMAL_REGULAR_EXPRESSION";
+export * from "./RGBA_REGULAR_EXPRESION";

package/dist/themes/constants/index.js

@@ -0,0 +1,5 @@
+export * from "./AUTOMATIC_CSS_VARIABLES_FOR_DARK";
+export * from "./COLOR_TYPE";
+export * from "./CSS_VARIABLES_FOR_DARK";
+export * from "./HEXADECIMAL_REGULAR_EXPRESSION";
+export * from "./RGBA_REGULAR_EXPRESION";

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

@@ -0,0 +1,6 @@
+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,6 @@
+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.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.match(RGBA_REGULAR_EXPRESSION));
+}

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

@@ -0,0 +1,8 @@
+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
+ * @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,49 @@
+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
+ * @param color the string of the color.
+ * @returns the color type (Dark or Light)
+ */
+export function lightOrDark(color, brightnessThreshold = 127.5, opacityThreshold = 0.5) {
+    const rgbaColor = isRGBAColor(color);
+    const hexadecimalColor = isHexadecimalColor(color);
+    if (isEmpty(color) || (!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,8 @@
+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[]): void;

package/dist/themes/helpers/setAutomaticCSSVariablesForDark.js

@@ -0,0 +1,41 @@
+import { isEmpty } from "../../general/mix/isEmpty";
+import { AUTOMATIC_CSS_VARIABLES_FOR_DARK, AUTOMATIC_CSS_VARIABLES_FOR_LIGHT, } from "../constants/AUTOMATIC_CSS_VARIABLES_FOR_DARK";
+import { COLOR_TYPE } from "../constants/COLOR_TYPE";
+/**
+ * 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) {
+    if (isEmpty(colorType) || isEmpty(wrapperTags))
+        return;
+    const cssDarkVariables = Object.keys(AUTOMATIC_CSS_VARIABLES_FOR_DARK);
+    const cssLightVariables = Object.keys(AUTOMATIC_CSS_VARIABLES_FOR_LIGHT);
+    wrapperTags.forEach((wrapperTag) => {
+        const wrapperElement = document.querySelector(wrapperTag);
+        setCSSVariable(colorType, wrapperElement, colorType === COLOR_TYPE.DARK ? cssDarkVariables : cssLightVariables, colorType === COLOR_TYPE.DARK
+            ? AUTOMATIC_CSS_VARIABLES_FOR_DARK
+            : AUTOMATIC_CSS_VARIABLES_FOR_LIGHT);
+    });
+}
+/**
+ * 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(colorType, 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/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 @@
+export * from "./IColorType";

package/dist/themes/interfaces/index.js

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

package/dist/tokens/getCleanCustomTokens.d.ts

@@ -0,0 +1,9 @@
+import { ICustomTokensComplex } from "../interfaces";
+/**
+ * The function `getCleanCustomTokens` takes an object `customTokens` and returns a new object
+ * `cleanTokens` with filtered values based on certain conditions.
+ * @param {ICustomTokensComplex} customTokens - The `customTokens` parameter is an object of type
+ * `ICustomTokensComplex`.
+ * @returns a cleaned version of the customTokens object.
+ */
+export declare function getCleanCustomTokens(customTokens?: ICustomTokensComplex): ICustomTokensComplex;

package/dist/tokens/getCleanCustomTokens.js

@@ -0,0 +1,18 @@
+import { _hasProperty, isEmpty } from "../general";
+/**
+ * The function `getCleanCustomTokens` takes an object `customTokens` and returns a new object
+ * `cleanTokens` with filtered values based on certain conditions.
+ * @param {ICustomTokensComplex} customTokens - The `customTokens` parameter is an object of type
+ * `ICustomTokensComplex`.
+ * @returns a cleaned version of the customTokens object.
+ */
+export function getCleanCustomTokens(customTokens = {}) {
+    const cleanTokens = {};
+    for (const tokenKey in customTokens) {
+        if (_hasProperty(customTokens, tokenKey)) {
+            const tokensGroup = customTokens[tokenKey];
+            cleanTokens[tokenKey] = tokensGroup.filter((token) => !isEmpty(token.value) && (token.label || token.key));
+        }
+    }
+    return cleanTokens;
+}

package/dist/tokens/getCustomTokenBoxParse.d.ts

@@ -0,0 +1,10 @@
+import { ICustomTokensBox, ICustomTokensComplex } from "../interfaces";
+/**
+ * The function `getCustomTokenBoxParse` takes in an object of custom tokens and returns a formatted
+ * list of tokens with aliases and labels.
+ * @param {ICustomTokensComplex} customTokens - The `customTokens` parameter is an object that contains
+ * custom token groups and their corresponding tokens. Each custom token group is represented by a key
+ * in the object, and the value is an array of tokens within that group.
+ * @returns an object called `tokensList`.
+ */
+export declare function getCustomTokenBoxParse(customTokens: ICustomTokensComplex): ICustomTokensBox;

package/dist/tokens/getCustomTokenBoxParse.js

@@ -0,0 +1,23 @@
+import { CUSTOM_TOKEN_DEFAULT_KEY } from "../constants";
+import { camelize } from "../general";
+/**
+ * The function `getCustomTokenBoxParse` takes in an object of custom tokens and returns a formatted
+ * list of tokens with aliases and labels.
+ * @param {ICustomTokensComplex} customTokens - The `customTokens` parameter is an object that contains
+ * custom token groups and their corresponding tokens. Each custom token group is represented by a key
+ * in the object, and the value is an array of tokens within that group.
+ * @returns an object called `tokensList`.
+ */
+export function getCustomTokenBoxParse(customTokens) {
+    const tokensList = {};
+    for (const tokenKey in customTokens) {
+        if (Object.prototype.hasOwnProperty.call(customTokens, tokenKey)) {
+            const subGroup = tokenKey === CUSTOM_TOKEN_DEFAULT_KEY ? "" : `.${camelize(tokenKey)}`;
+            tokensList[tokenKey] = customTokens[tokenKey].map((token) => ({
+                alias: token.label,
+                label: `{{customTokens${subGroup}.${token.key}}}`,
+            }));
+        }
+    }
+    return tokensList;
+}

package/dist/tokens/getCustomtonTokens.d.ts

@@ -0,0 +1,10 @@
+import { ICustomTokensComplex, ICustomTokensSimple } from "../interfaces";
+/**
+ * The function `getCustomtonTokens` takes a configuration object and returns a parsed version of the
+ * custom tokens, with keys and values appropriately formatted.
+ * @param {ICustomTokensSimple | ICustomTokensComplex} customtonTokensConfig - The
+ * `customtonTokensConfig` parameter is an object that can have two possible types:
+ * `ICustomTokensSimple` or `ICustomTokensComplex`.
+ * @returns an object of type `ICustomTokensComplex`.
+ */
+export declare function getCustomtonTokens(customtonTokensConfig: ICustomTokensSimple | ICustomTokensComplex): ICustomTokensComplex;

package/dist/tokens/getCustomtonTokens.js

@@ -0,0 +1,41 @@
+import { CUSTOM_TOKEN_DEFAULT_KEY } from "../constants";
+import { camelize, isEmpty } from "../general";
+import { getCleanCustomTokens } from "./getCleanCustomTokens";
+import { getCustomtonTokensWithKeys } from "./getCustomtonTokensWithKeys";
+/**
+ * The function `getCustomtonTokens` takes a configuration object and returns a parsed version of the
+ * custom tokens, with keys and values appropriately formatted.
+ * @param {ICustomTokensSimple | ICustomTokensComplex} customtonTokensConfig - The
+ * `customtonTokensConfig` parameter is an object that can have two possible types:
+ * `ICustomTokensSimple` or `ICustomTokensComplex`.
+ * @returns an object of type `ICustomTokensComplex`.
+ */
+export function getCustomtonTokens(customtonTokensConfig) {
+    const customTokensparsed = {
+        [CUSTOM_TOKEN_DEFAULT_KEY]: [],
+    };
+    for (const key in customtonTokensConfig) {
+        if (Object.prototype.hasOwnProperty.call(customtonTokensConfig, key)) {
+            if (typeof customtonTokensConfig[key] === "object") {
+                const tokensFromConfig = getCustomtonTokensWithKeys(customtonTokensConfig[key]);
+                if (key === CUSTOM_TOKEN_DEFAULT_KEY) {
+                    customTokensparsed[key].push(...tokensFromConfig);
+                }
+                else {
+                    customTokensparsed[key] = tokensFromConfig;
+                }
+            }
+            else {
+                const tokensFromConfig = customtonTokensConfig[key];
+                customTokensparsed[CUSTOM_TOKEN_DEFAULT_KEY].push({
+                    label: key,
+                    value: tokensFromConfig,
+                    key: camelize(key),
+                });
+            }
+        }
+    }
+    if (isEmpty(customTokensparsed[CUSTOM_TOKEN_DEFAULT_KEY]))
+        delete customTokensparsed[CUSTOM_TOKEN_DEFAULT_KEY];
+    return getCleanCustomTokens(customTokensparsed);
+}

package/dist/tokens/getCustomtonTokensWithKeys.d.ts

@@ -0,0 +1,12 @@
+import { CustomTokens } from "../interfaces";
+/**
+ * The function `getCustomtonTokensWithKeys` takes an array of `CustomTokens` objects and returns a new
+ * array with each object having a `key` property that is the camelized version of either the `key` or
+ * `label` property.
+ * @param {CustomTokens[]} customTokens - An array of objects representing custom tokens. Each object
+ * should have properties such as "key" and "label".
+ * @returns an array of `CustomTokens` objects. Each object in the array has an additional `key`
+ * property, which is generated by camelizing the `key` or `label` property of the original
+ * `CustomTokens` object.
+ */
+export declare function getCustomtonTokensWithKeys(customTokens: CustomTokens[]): CustomTokens[];

package/dist/tokens/getCustomtonTokensWithKeys.js

@@ -0,0 +1,14 @@
+import { camelize } from "../general";
+/**
+ * The function `getCustomtonTokensWithKeys` takes an array of `CustomTokens` objects and returns a new
+ * array with each object having a `key` property that is the camelized version of either the `key` or
+ * `label` property.
+ * @param {CustomTokens[]} customTokens - An array of objects representing custom tokens. Each object
+ * should have properties such as "key" and "label".
+ * @returns an array of `CustomTokens` objects. Each object in the array has an additional `key`
+ * property, which is generated by camelizing the `key` or `label` property of the original
+ * `CustomTokens` object.
+ */
+export function getCustomtonTokensWithKeys(customTokens) {
+    return customTokens.map((token) => (Object.assign(Object.assign({}, token), { label: token.label || token.key, key: camelize((token === null || token === void 0 ? void 0 : token.key) || token.label) })));
+}

package/dist/tokens/index.d.ts

@@ -1 +1,5 @@
 export * from "./isTokenLabel";
+export * from "./getCustomtonTokensWithKeys";
+export * from "./getCustomtonTokens";
+export * from "./getCustomTokenBoxParse";
+export * from "./getCleanCustomTokens";

package/dist/tokens/index.js

@@ -1 +1,5 @@
 export * from "./isTokenLabel";
+export * from "./getCustomtonTokensWithKeys";
+export * from "./getCustomtonTokens";
+export * from "./getCustomTokenBoxParse";
+export * from "./getCleanCustomTokens";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qrvey/utils",
-  "version": "1.12.0-2",
+  "version": "1.12.0-21",
   "description": "Helper, Utils for all Qrvey Projects",
   "homepage": "https://bitbucket.org/qrvey/qrvey_utils/wiki/Home",
   "main": "dist/index.js",