@omnia/velcron 6.100.8-dev

package/parser/VelcronLogger.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VelcronLogger = void 0;
+class VelcronLogger {
+    static logDataError(log) {
+        console.error(log);
+    }
+    static logActionError(log) {
+        console.error(log);
+    }
+    static logError(log) {
+        console.error(log);
+    }
+    static logCustomComponentError(log) {
+        console.error(log);
+    }
+}
+exports.VelcronLogger = VelcronLogger;

package/parser/VelcronRenderers.d.ts

@@ -0,0 +1,41 @@
+import { BuiltInComponentRenderers, DynamicState, ResolvedComponentRenderer, VelcronCustomComponentDefinition, VelcronDefinition, VelcronRenderContext } from "../models";
+export declare class VelcronRenderers {
+    private static components;
+    static registerComponent(type: string, component: any): void;
+    static hasComponents(): boolean;
+    static hasComponent(type: string): any;
+    static registerComponents(components: BuiltInComponentRenderers): void;
+    static getComponent(definition: VelcronDefinition, renderContext: VelcronRenderContext): ResolvedComponentRenderer;
+    static definitionContainsCustomColorSchema(definition: VelcronDefinition): boolean;
+    static createNewRendererContext(currentRenderCtx: VelcronRenderContext, definition: VelcronDefinition, newViewModel?: DynamicState): {
+        rootContext: object;
+        theming: {
+            state: {
+                currentTheme: import("@omnia/fx-models").ThemeDefinitionV2;
+            };
+            get: {
+                colorSchema: (colorSchemaType: string) => import("@omnia/fx-models").ColorSchema;
+                typography: (typographyType: string) => import("@omnia/fx-models").TypographyType;
+                color: (colorSchemaType: string, colorType: string) => string;
+                colorDefinition: (colorSchemaType: string, colorType: string) => import("@omnia/fx-models").ColorDefinition;
+                complementaryColorType: (colorType: string) => string;
+                complementaryColor: (colorSchemaType: string, colorType: string) => string;
+                complementaryColorDefinition: (colorSchemaType: string, colorType: string) => import("@omnia/fx-models").ColorDefinition;
+                currentTheme: () => import("@omnia/fx-models").ThemeDefinitionV2;
+            };
+            actions: {
+                setTheme(newTheme: import("@omnia/fx-models").ThemeDefinitionV2): void;
+            };
+        };
+        currentContext: object;
+        actions: {
+            [name: string]: [];
+        };
+        components: VelcronCustomComponentDefinition[];
+        hooks: import("../models").VelcronRenderContextHooks;
+        computed: {
+            [name: string]: [];
+        };
+    };
+    static ensureRenderContext(rendererInfo: ResolvedComponentRenderer, definition: VelcronDefinition, currentRenderCtx: VelcronRenderContext, newViewModel?: DynamicState): VelcronRenderContext;
+}

package/parser/VelcronRenderers.js

@@ -0,0 +1,125 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VelcronRenderers = void 0;
+const VelcronLogger_1 = require("./VelcronLogger");
+const VelcronData_1 = require("./VelcronData");
+const stores_1 = require("../stores");
+class VelcronRenderers {
+    static registerComponent(type, component) {
+        type = type.toLowerCase();
+        if (!this.components[type]) {
+            this.components[type] = component;
+        }
+        else {
+            throw `Velcron Component of type ${type} is already registered`;
+        }
+    }
+    static hasComponents() {
+        return Object.keys(this.components).length > 0;
+    }
+    static hasComponent(type) {
+        type = type.toLowerCase();
+        return this.components[type];
+    }
+    static registerComponents(components) {
+        Object.keys(components).forEach((key) => {
+            this.registerComponent(key, components[key]);
+        });
+    }
+    static getComponent(definition, renderContext) {
+        let result;
+        let customComponentDefinition;
+        if (renderContext.components && Array.isArray(renderContext.components)) {
+            customComponentDefinition = renderContext.components?.find(p => p.type.toLowerCase() === definition.type.toLowerCase());
+        }
+        if (customComponentDefinition) {
+            if (!this.components["customcomponent"]) {
+                throw "Cant find the custom component renderer";
+            }
+            //Make a new instance of the custom component
+            const customComponentInstance = JSON.parse(JSON.stringify(customComponentDefinition));
+            //Apply styles coming from the usage definition
+            //TODO: If the custom component contains styling we should check which styling properties that
+            //comes from the current instance and override the ones from the original to make style overide work as we want
+            customComponentInstance.style = definition.style;
+            result = {
+                component: this.components["customcomponent"],
+                definition: customComponentInstance,
+                customComponent: true
+            };
+        }
+        else if (this.components[definition.type.toLowerCase()]) {
+            result = {
+                component: this.components[definition.type.toLowerCase()],
+                definition: definition,
+                customComponent: false
+            };
+        }
+        else {
+            throw "Cant find component";
+        }
+        return result;
+    }
+    static definitionContainsCustomColorSchema(definition) {
+        return (definition.colorSchema && definition.colorSchema !== "");
+    }
+    static createNewRendererContext(currentRenderCtx, definition, newViewModel) {
+        const result = {
+            rootContext: currentRenderCtx.rootContext,
+            theming: currentRenderCtx.theming,
+            currentContext: newViewModel ? newViewModel : currentRenderCtx.currentContext,
+            actions: currentRenderCtx.actions,
+            components: currentRenderCtx.components,
+            hooks: currentRenderCtx.hooks,
+            computed: currentRenderCtx.computed,
+        };
+        if (VelcronRenderers.definitionContainsCustomColorSchema(definition)) {
+            const schema = VelcronData_1.VelcronData.dataBind(result, definition.colorSchema);
+            result.colorSchemaType = stores_1.ReactivitySystem.makeReactive(schema);
+            result.colorSchema = result.theming.get.colorSchema(result.colorSchemaType);
+        }
+        else {
+            result.colorSchemaType = currentRenderCtx.colorSchemaType;
+            result.colorSchema = currentRenderCtx.colorSchema;
+        }
+        return result;
+    }
+    static ensureRenderContext(rendererInfo, definition, currentRenderCtx, newViewModel) {
+        //Ensure we have the correct render context passing properties etc to sub components 
+        let result = currentRenderCtx;
+        if (rendererInfo.customComponent
+            || newViewModel ||
+            VelcronRenderers.definitionContainsCustomColorSchema(definition)) {
+            result = VelcronRenderers.createNewRendererContext(currentRenderCtx, definition, newViewModel);
+            if (rendererInfo.customComponent) {
+                //Fetch the custom component definition
+                const customDef = rendererInfo.definition;
+                if (customDef.properties) {
+                    Object.keys(customDef.properties).forEach((propName) => {
+                        const prop = customDef.properties ? customDef.properties[propName] : null;
+                        if (!prop || (prop.required && !definition.hasOwnProperty(propName))) {
+                            VelcronLogger_1.VelcronLogger.logCustomComponentError(`Component of type ${customDef.type} requires property ${propName} but its missing`);
+                        }
+                        result.properties = result.properties || {};
+                        if (definition.hasOwnProperty(propName)) {
+                            if (VelcronData_1.VelcronData.isString(definition[propName])) {
+                                //Properties can be databound so if its a string we try do databind
+                                //this is true for other values such as number / string also
+                                result.properties[propName] = VelcronData_1.VelcronData.dataBind(result, definition[propName]);
+                            }
+                            else {
+                                result.properties[propName] = definition[propName];
+                            }
+                        }
+                        else if (prop.hasOwnProperty("defaultValue")) {
+                            result.properties[propName] = prop.defaultValue;
+                        }
+                    });
+                }
+            }
+        }
+        return result;
+    }
+}
+exports.VelcronRenderers = VelcronRenderers;
+VelcronRenderers.components = {};

package/parser/VelcronStyles.d.ts

@@ -0,0 +1,12 @@
+import { VelcronBorder, VelcronCustomThemeSettings, VelcronDefinition, VelcronDimensions, VelcronRenderContext } from "../models";
+import { VelcronUnitProvider } from "../models/VelcronUnitProvider";
+export declare class VelcronStyles {
+    static styleProvider: (baseStyles: object, definition: VelcronDefinition, renderCtx: VelcronRenderContext) => any;
+    static unitProvider: VelcronUnitProvider;
+    static registerStyleProvider(fn: (styleBase: object, definition: VelcronDefinition, renderCtx: VelcronRenderContext) => object | string, unitProvider: VelcronUnitProvider): void;
+    static insertBackgroundColor(styleBase: any, definition: VelcronCustomThemeSettings, renderCtx: VelcronRenderContext): void;
+    static insertBorderRadiusStyles(styleBase: any, settings: VelcronDimensions): void;
+    static insertBorderStyles(styleBase: any, borderSettings: VelcronBorder, renderCtx: VelcronRenderContext): void;
+    static create(definition: VelcronDefinition, renderCtx: VelcronRenderContext): object | string;
+    static dataBindStyles(styles: object, renderCtx: VelcronRenderContext): object;
+}

package/parser/VelcronStyles.js

@@ -0,0 +1,159 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VelcronStyles = void 0;
+const VelcronData_1 = require("./VelcronData");
+const models_1 = require("../models");
+const VelcronConstants_1 = require("./VelcronConstants");
+const utilities_1 = require("../utilities");
+class VelcronStyles {
+    static registerStyleProvider(fn, unitProvider) {
+        VelcronStyles.styleProvider = fn;
+        VelcronStyles.unitProvider = unitProvider;
+    }
+    static insertBackgroundColor(styleBase, definition, renderCtx) {
+        if (definition.colorSchema && definition.colorSchema != "") {
+            //styleBase["backgroundColor"] = renderCtx.theming.get.activeColorSchema().base.color;
+            styleBase["backgroundColor"] = renderCtx.colorSchema.base.color;
+        }
+        if (definition.opacity || definition.opacity === 0) {
+            if (definition.opacity === 0) {
+                styleBase["backgroundColor"] = undefined;
+            }
+            else {
+                styleBase["backgroundColor"] = (0, utilities_1.useOpacityOnColor)(styleBase["backgroundColor"], definition.opacity / 100);
+            }
+        }
+    }
+    static insertBorderRadiusStyles(styleBase, settings) {
+        if (!settings) {
+            return;
+        }
+        if (settings.top || settings.top === 0) {
+            styleBase["borderTopLeftRadius"] = this.unitProvider.formatDimension(settings.top);
+        }
+        if (settings.right || settings.right === 0) {
+            styleBase["borderTopRightRadius"] = this.unitProvider.formatDimension(settings.right);
+        }
+        if (settings.bottom || settings.bottom === 0) {
+            styleBase["borderBottomRightRadius"] = this.unitProvider.formatDimension(settings.bottom);
+        }
+        if (settings.left || settings.left === 0) {
+            styleBase["borderBottomLeftRadius"] = this.unitProvider.formatDimension(settings.left);
+        }
+    }
+    static insertBorderStyles(styleBase, borderSettings, renderCtx) {
+        if (!borderSettings) {
+            return;
+        }
+        if (borderSettings.top || borderSettings.top === 0) {
+            styleBase["borderTopStyle"] = "solid";
+            styleBase["borderTopColor"] = renderCtx.theming.get.color(renderCtx.colorSchemaType, borderSettings.color);
+        }
+        if (borderSettings.right || borderSettings.right === 0) {
+            styleBase["borderRightStyle"] = "solid";
+            styleBase["borderRightColor"] = renderCtx.theming.get.color(renderCtx.colorSchemaType, borderSettings.color);
+        }
+        if (borderSettings.bottom || borderSettings.bottom === 0) {
+            styleBase["borderBottomStyle"] = "solid";
+            styleBase["borderBottomColor"] = renderCtx.theming.get.color(renderCtx.colorSchemaType, borderSettings.color);
+        }
+        if (borderSettings.left || borderSettings.left === 0) {
+            styleBase["borderLeftStyle"] = "solid";
+            styleBase["borderLeftColor"] = renderCtx.theming.get.color(renderCtx.colorSchemaType, borderSettings.color);
+        }
+    }
+    static create(definition, renderCtx) {
+        const styleBase = { ...definition.style };
+        if (definition.type === VelcronConstants_1.VelcronConstants.components.image) {
+            const imageDefinition = definition;
+            if (renderCtx.theming.state.currentTheme.blueprint?.image?.borderRadius) {
+                const settings = renderCtx.theming.state.currentTheme.blueprint.image.borderRadius;
+                this.insertBorderRadiusStyles(styleBase, settings);
+            }
+            //  if (styleBase.width) {
+            //      styleBase.width = this.unitProvider.formatDimension(200);
+            //  }
+            // if (!styleBase.height) {
+            //     styleBase.height = this.unitProvider.formatDimension(400);
+            // }
+        }
+        if (definition.type === VelcronConstants_1.VelcronConstants.components.card) {
+            const cardDefinition = definition;
+            if (renderCtx.theming.state.currentTheme.blueprint?.card?.borderRadius) {
+                const settings = renderCtx.theming.state.currentTheme.blueprint.card.borderRadius;
+                this.insertBorderRadiusStyles(styleBase, settings);
+            }
+            if (renderCtx.theming.state.currentTheme.blueprint?.card?.border) {
+                const settings = renderCtx.theming.state.currentTheme.blueprint.card.border;
+                this.insertBorderStyles(styleBase, settings, renderCtx);
+            }
+            this.insertBackgroundColor(styleBase, cardDefinition, renderCtx);
+        }
+        else if (definition.type === VelcronConstants_1.VelcronConstants.components.text) {
+            const textDefinition = definition;
+            if (textDefinition.color) {
+                styleBase["color"] = renderCtx.theming.get.color(renderCtx.colorSchemaType, textDefinition.color);
+            }
+            else {
+                styleBase["color"] = renderCtx.colorSchema.onBase.color;
+            }
+        }
+        else if (definition.type === VelcronConstants_1.VelcronConstants.components.view) {
+            const flexViewDefinition = definition;
+            const flexGrow = flexViewDefinition.grow || flexViewDefinition.grow === 0 ? flexViewDefinition.grow : 1;
+            styleBase["flex"] = flexGrow;
+            styleBase["flexDirection"] = flexViewDefinition.column ? "column" : "row";
+            if (flexViewDefinition.width) {
+                styleBase["maxWidth"] = this.unitProvider.formatDimension(flexViewDefinition.width);
+            }
+            if (flexViewDefinition.horizontalAlignment) {
+                const propertyName = flexViewDefinition.column ? "alignItems" : "justifyContent";
+                if (flexViewDefinition.horizontalAlignment === models_1.VelcronHorizontalAlignments.right) {
+                    styleBase[propertyName] = "flex-end";
+                }
+                else if (flexViewDefinition.horizontalAlignment === models_1.VelcronHorizontalAlignments.center) {
+                    styleBase[propertyName] = "center";
+                }
+            }
+            const propertyName = flexViewDefinition.column ? "justifyContent" : "alignItems";
+            if (flexViewDefinition.verticalAlignment) {
+                if (flexViewDefinition.verticalAlignment === models_1.VerticalAlignments.center) {
+                    styleBase[propertyName] = "center";
+                }
+                else if (flexViewDefinition.verticalAlignment === models_1.VerticalAlignments.bottom) {
+                    styleBase[propertyName] = "flex-end";
+                }
+            }
+            else {
+                styleBase[propertyName] = "flex-start";
+            }
+            this.insertBackgroundColor(styleBase, flexViewDefinition, renderCtx);
+        }
+        /**
+         *
+         * Generic styles for all components
+         *
+         */
+        if (definition.border) {
+            const typedDefinition = definition;
+            this.insertBorderStyles(styleBase, typedDefinition.border, renderCtx);
+        }
+        if (definition.borderRadius) {
+            const typedDefinition = definition;
+            if (typedDefinition.borderRadius) {
+                this.insertBorderRadiusStyles(styleBase, typedDefinition.borderRadius);
+            }
+        }
+        return VelcronStyles.styleProvider(styleBase, definition, renderCtx);
+    }
+    static dataBindStyles(styles, renderCtx) {
+        Object.keys(styles).forEach((key) => {
+            const style = styles[key];
+            if (style && VelcronData_1.VelcronData.isString(style)) {
+                styles[key] = VelcronData_1.VelcronData.dataBind(renderCtx, style);
+            }
+        });
+        return styles;
+    }
+}
+exports.VelcronStyles = VelcronStyles;

package/parser/index.d.ts

@@ -0,0 +1,7 @@
+export * from "./VelcronData";
+export * from "./VelcronActions";
+export * from "./VelcronConstants";
+export * from "./VelcronStyles";
+export * from "./VelcronLogger";
+export * from "./VelcronRenderers";
+export * from "./TextValue";

package/parser/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./VelcronData"), exports);
+tslib_1.__exportStar(require("./VelcronActions"), exports);
+tslib_1.__exportStar(require("./VelcronConstants"), exports);
+tslib_1.__exportStar(require("./VelcronStyles"), exports);
+tslib_1.__exportStar(require("./VelcronLogger"), exports);
+tslib_1.__exportStar(require("./VelcronRenderers"), exports);
+tslib_1.__exportStar(require("./TextValue"), exports);

package/stores/ReactivitySystem.d.ts

@@ -0,0 +1,5 @@
+export declare class ReactivitySystem {
+    static makeReactive: (obj: any) => unknown;
+    static hasReactivityProvider: boolean;
+    static registerProvider(fn: (obj: any) => unknown): void;
+}

package/stores/ReactivitySystem.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactivitySystem = void 0;
+class ReactivitySystem {
+    static registerProvider(fn) {
+        ReactivitySystem.makeReactive = fn;
+        ReactivitySystem.hasReactivityProvider = true;
+    }
+}
+exports.ReactivitySystem = ReactivitySystem;
+ReactivitySystem.makeReactive = null;
+ReactivitySystem.hasReactivityProvider = false;

package/stores/VelcronStore.d.ts

@@ -0,0 +1,12 @@
+export declare const defineVelcronStore: <TSetup extends {
+    state: object;
+    privateState?: object;
+}, TGetters, TActions>(name: string, definition: {
+    setup: () => TSetup;
+    getters?: (state: TSetup["state"], privateState?: TSetup["privateState"]) => TGetters;
+    actions?: (state: TSetup["state"], privateState?: TSetup["privateState"]) => TActions;
+}) => (newStateWithName?: string) => {
+    state: TSetup["state"];
+    get: TGetters;
+    actions: TActions;
+};

package/stores/VelcronStore.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defineVelcronStore = void 0;
+const ReactivitySystem_1 = require("./ReactivitySystem");
+const stateMap = new Map();
+const defineVelcronStore = (name, definition) => {
+    const result = (newStateWithName) => {
+        if (newStateWithName && newStateWithName !== "" && newStateWithName !== name) {
+            name = newStateWithName;
+        }
+        if (!stateMap.has(name)) {
+            stateMap.set(name, ReactivitySystem_1.ReactivitySystem.makeReactive(definition.setup()));
+        }
+        const reactiveState = stateMap.get(name);
+        return {
+            state: reactiveState.state,
+            get: definition.getters?.(reactiveState.state, reactiveState.privateState),
+            actions: definition.actions?.(reactiveState.state, reactiveState.privateState)
+        };
+    };
+    return result;
+};
+exports.defineVelcronStore = defineVelcronStore;

package/stores/VelcronTheming.d.ts

@@ -0,0 +1,19 @@
+import { ThemeDefinitionV2 } from "..";
+export declare const useVelcronThemingStore: (newStateWithName?: string) => {
+    state: {
+        currentTheme: ThemeDefinitionV2;
+    };
+    get: {
+        colorSchema: (colorSchemaType: string) => import("..").ColorSchema;
+        typography: (typographyType: string) => import("..").TypographyType;
+        color: (colorSchemaType: string, colorType: string) => string;
+        colorDefinition: (colorSchemaType: string, colorType: string) => import("..").ColorDefinition;
+        complementaryColorType: (colorType: string) => string;
+        complementaryColor: (colorSchemaType: string, colorType: string) => string;
+        complementaryColorDefinition: (colorSchemaType: string, colorType: string) => import("..").ColorDefinition;
+        currentTheme: () => ThemeDefinitionV2;
+    };
+    actions: {
+        setTheme(newTheme: ThemeDefinitionV2): void;
+    };
+};

package/stores/VelcronTheming.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useVelcronThemingStore = void 0;
+const __1 = require("..");
+const VelcronStore_1 = require("./VelcronStore");
+exports.useVelcronThemingStore = (0, VelcronStore_1.defineVelcronStore)("VelcronTheming", {
+    setup() {
+        return {
+            state: {
+                currentTheme: {}
+            }
+        };
+    },
+    getters(state) {
+        return {
+            colorSchema: (colorSchemaType) => {
+                return (0, __1.useThemeMethods)(state.currentTheme).colorSchema(colorSchemaType);
+            },
+            typography: (typographyType) => {
+                return (0, __1.useThemeMethods)(state.currentTheme).typography(typographyType);
+            },
+            color: (colorSchemaType, colorType) => {
+                return (0, __1.useThemeMethods)(state.currentTheme).color(colorSchemaType, colorType);
+            },
+            colorDefinition: (colorSchemaType, colorType) => {
+                return (0, __1.useThemeMethods)(state.currentTheme).colorDefinition(colorSchemaType, colorType);
+            },
+            complementaryColorType: (colorType) => {
+                return (0, __1.useThemeMethods)(state.currentTheme).complementaryColorType(colorType);
+            },
+            complementaryColor: (colorSchemaType, colorType) => {
+                return (0, __1.useThemeMethods)(state.currentTheme).complementaryColor(colorSchemaType, colorType);
+            },
+            complementaryColorDefinition: (colorSchemaType, colorType) => {
+                return (0, __1.useThemeMethods)(state.currentTheme).complementaryColorDefinition(colorSchemaType, colorType);
+            },
+            currentTheme: () => {
+                return this.currentTheme.state;
+            }
+        };
+    },
+    actions(state) {
+        return {
+            setTheme(newTheme) {
+                state.currentTheme = newTheme;
+            }
+        };
+    }
+});

package/stores/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./VelcronStore";
+export * from "./VelcronTheming";
+export * from "./ReactivitySystem";

package/stores/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./VelcronStore"), exports);
+tslib_1.__exportStar(require("./VelcronTheming"), exports);
+tslib_1.__exportStar(require("./ReactivitySystem"), exports);

package/utilities/ColorUtility.d.ts

@@ -0,0 +1 @@
+export declare const useOpacityOnColor: (color: any, opacity: any) => any;

package/utilities/ColorUtility.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOpacityOnColor = void 0;
+const useOpacityOnColor = (color, opacity) => {
+    const getRGBValues = (color) => {
+        const tmpColor = color.replace("rgba", "rgb");
+        return tmpColor.substring(4, tmpColor.length - 1)
+            .replace(/ /g, "")
+            .split(",");
+    };
+    const getRGBValuesFromHex = (color) => {
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
+        if (result) {
+            return [
+                parseInt(result[1], 16),
+                parseInt(result[2], 16),
+                parseInt(result[3], 16)
+            ];
+        }
+    };
+    const isRGBColor = (color) => {
+        if (!color) {
+            return null;
+        }
+        if (color.indexOf("rgb") > -1) {
+            return true;
+        }
+        if (color.indexOf("rgba") > -1) {
+            return true;
+        }
+        return false;
+    };
+    let rgb = null;
+    if (!isRGBColor(color)) {
+        rgb = getRGBValuesFromHex(color);
+    }
+    else {
+        rgb = getRGBValues(color);
+    }
+    if (rgb) {
+        return `rgba(${rgb[0]},${rgb[1]},${rgb[2]},${opacity})`;
+    }
+    return color;
+};
+exports.useOpacityOnColor = useOpacityOnColor;

package/utilities/index.d.ts

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

package/utilities/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./ColorUtility"), exports);