@genexus/mercury 0.3.5 → 0.4.0

package/README.md

@@ -72,3 +72,31 @@ npm i @genexus/mercury
       ]
     });
     ```
+
+  - Using the bundles from this repository.
+
+    1.  Install `sass` dependency to transpile the bundles.
+
+        ```bash
+        npm i -D sass
+        ```
+
+    2.  Add a config file in your project to determine the path to the assets.  
+        Include the following configuration:
+
+        ```scss
+        $icons-path: "assets/custom/path/icons/";
+        $font-face-path: "assets/custom/path/fonts/";
+        ```
+
+    3.  Run the following command to transpile the bundles with the new path for the assets:
+
+        ```bash
+        npx sass --load-path=path/to/config/file/directory --no-source-map --style compressed node_modules/@genexus/mercury/dist/bundles/scss:untracked-folder/bundles
+        ```
+
+        For example:
+
+        ```bash
+        npx sass --load-path=src --no-source-map --style compressed node_modules/@genexus/mercury/dist/bundles/scss:untracked-folder/bundles
+        ```

package/dist/assets-manager.d.ts

@@ -1,3 +1,7 @@
+import { GxImageMultiState, TreeViewImagePathCallback } from "@genexus/chameleon-controls-library";
+import { RegistryGetImagePathCallback } from "@genexus/chameleon-controls-library/dist/types/index";
+export { MercuryBundleBase, MercuryBundleComponent, MercuryBundleComponentForm, MercuryBundleFull, MercuryBundleOptimized, MercuryBundleReset, MercuryBundleUtil, MercuryBundleUtilFormFull, MercuryBundles } from "./bundles.js";
+export { getThemeBundles } from "./bundles.js";
 export type AssetsMetadata = {
     category: string;
     name: string;
@@ -48,13 +52,6 @@ export type AssetsColorType = {
 export interface AssetsIconMetadata {
     name: string;
 }
-export type ImageMultiState = {
-    base: string;
-    hover?: string;
-    active?: string;
-    focus?: string;
-    disabled?: string;
-};
 /**
  * Given a vendor and its assets, it register the assets of the vendor. After
  * the registration, the `getAsset` function can be used to retrieve any assets
@@ -80,11 +77,15 @@ export declare const getIconPath: (iconMetadata: AssetsMetadata, vendorAlias?: s
  * transforms both metadata into a string that contains the given information.
  */
 export declare const getIconPathExpanded: (iconMetadata: AssetsMetadata, iconMetadataExpanded: AssetsMetadata, vendorAlias?: string) => `${string}/${string}/${string}${string}:${string}/${string}/${string}${string}`;
-export declare const getImagePathCallback: (iconPath: string) => ImageMultiState | undefined;
-export declare const getTreeViewImagePathCallback: (item: {
-    startImgSrc?: string;
-    endImgSrc?: string;
-}, direction: "start" | "end") => {
-    default: ImageMultiState;
-    expanded?: ImageMultiState;
-} | undefined;
+export declare const getImagePathCallback: (iconPath: string) => GxImageMultiState | undefined;
+export declare const getTreeViewImagePathCallback: TreeViewImagePathCallback;
+/**
+ * This object is used to register the getImagePathCallback definitions for all
+ * controls in Chameleon.
+ *
+ * @example
+ * ```ts
+ * registryProperty("getImagePathCallback", getImagePathCallbackDefinitions);
+ * ```
+ */
+export declare const getImagePathCallbackDefinitions: RegistryGetImagePathCallback;

package/dist/assets-manager.js

@@ -1,4 +1,5 @@
-import { MERCURY_ASSETS } from "./assets/MERCURY_ASSETS";
+import { MERCURY_ASSETS } from "./assets/MERCURY_ASSETS.js";
+export { getThemeBundles } from "./bundles.js";
 const ASSETS_BY_VENDOR = {};
 const ALIAS_TO_VENDOR_NAME = {};
 const SEPARATOR = "/";
@@ -117,12 +118,12 @@ export const getImagePathCallback = (iconPath) => {
     }
     return result;
 };
-export const getTreeViewImagePathCallback = (item, direction) => {
-    if ((!item.startImgSrc && direction === "start") ||
-        (!item.endImgSrc && direction === "end")) {
+export const getTreeViewImagePathCallback = (item, iconDirection) => {
+    if ((!item.startImgSrc && iconDirection === "start") ||
+        (!item.endImgSrc && iconDirection === "end")) {
         return undefined;
     }
-    const imgSrc = direction === "start" ? item.startImgSrc : item.endImgSrc;
+    const imgSrc = iconDirection === "start" ? item.startImgSrc : item.endImgSrc;
     // Split the path into the collapsed (default) and expanded
     const collapsedAndExpandedSrc = imgSrc.split(EXPANDED_SEPARATOR);
     const defaultPath = getImagePathCallback(collapsedAndExpandedSrc[0]);
@@ -137,5 +138,19 @@ export const getTreeViewImagePathCallback = (item, direction) => {
         }
         : { default: defaultPath };
 };
+/**
+ * This object is used to register the getImagePathCallback definitions for all
+ * controls in Chameleon.
+ *
+ * @example
+ * ```ts
+ * registryProperty("getImagePathCallback", getImagePathCallbackDefinitions);
+ * ```
+ */
+export const getImagePathCallbackDefinitions = {
+    "ch-edit": getImagePathCallback,
+    "ch-image": getImagePathCallback,
+    "ch-tree-view-render": getTreeViewImagePathCallback
+};
 // Initialize Mercury at the start
 registerAssets("Mercury", MERCURY_ALIAS, MERCURY_ASSETS);