### Install Node.js Project Dependencies

Source: https://github.com/hcl-tech-software/leap-custom-widgets/blob/main/samples/mui-widgets/README.md

This command installs all required Node.js packages and dependencies listed in the project's `package.json` file. It must be run after navigating into the project directory to set up the development environment.

```bash
npm install
```

--------------------------------

### Navigate to MUI Widgets Sample Directory

Source: https://github.com/hcl-tech-software/leap-custom-widgets/blob/main/samples/mui-widgets/README.md

This command changes the current working directory to the specific `mui-widgets` sample folder within the cloned repository. This is necessary before running `npm install` or other project-specific commands.

```bash
cd leap-custom-widgets/samples/mui-widgets
```

--------------------------------

### Build ChartJS Widget with npm

Source: https://github.com/hcl-tech-software/leap-custom-widgets/blob/main/samples/chartjs-widget/README.md

Instructions for setting up the development environment, cloning the repository, installing dependencies, and building the ChartJS widget using npm commands. This includes commands for a one-time build and continuous building for development.

```Shell
git clone https://github.com/HCL-TECH-SOFTWARE/leap-custom-widgets.git
cd leap-custom-widgets/samples/chart-widget
npm install
npm run build
npm build-watch
```

--------------------------------

### Build Signature Widget using npm

Source: https://github.com/hcl-tech-software/leap-custom-widgets/blob/main/samples/signature-widget/README.md

Sequence of commands to navigate into the signature widget's directory, install necessary Node.js dependencies using npm, and then build the widget for deployment. The `npm run build` command compiles the source code into distributable files. For continuous development, `npm build-watch` can be used.

```bash
cd leap-custom-widgets/samples/signature-widget
npm install
npm run build
```

--------------------------------

### Configure HCL Leap Runtime Resources

Source: https://github.com/hcl-tech-software/leap-custom-widgets/blob/main/samples/signature-widget/README.md

Example configuration for the `Leap_config.properties` file in HCL Leap. This snippet demonstrates how to instruct HCL Leap to load the signature widget's compiled CSS and JavaScript files from a web server, making the custom widget available within Leap applications.

```properties
ibm.nitro.NitroConfig.runtimeResources.1 = \
<link rel='stylesheet' type='text/css' media='screen' href='http://127.0.0.1:5501/samples/signature-widget/dist/signature.css'> \n\
<script type='text/javascript' src='http://127.0.0.1:5501/samples/signature-widget/dist/signature.js'></script>
```

--------------------------------

### Gauge Widget Programmatic API Reference

Source: https://github.com/hcl-tech-software/leap-custom-widgets/blob/main/samples/gauge-widget/README.md

Comprehensive API for programmatically interacting with the Gauge widget, allowing developers to get and set various display and behavior attributes like title, value, label, scale, colors, and selection state.

```APIDOC
Programming APIs:
  - `getTitle()`: Gets the title of the widget.
  - `setTitle(string)`: Sets the title of the widget.
  - `getValue()`: Gets the value currently shown by the widget.
  - `setValue(positive integer)`: Sets the value shown by the widget.
  - `getLabel()`: Gets the value of the Label shown inside the circle of the Gauge widget.
  - `setLabel(string)`: Sets the value of the Label shown inside the circle of the Gauge widget.
  - `getScale()`: Gets the scale of the Gauge.
  - `setScale(positive integer)`: Sets the scale of the Gauge in order to correctly represent the value.
  - `getTextColor()`: Gets the color of the "value" and of the "label" of the widget.
  - `setTextColor(string)`: Sets the color of the "value" and of the "label" of the widget.
  - `getStrokeColor()`: Gets the color of the "stroke" of the widget.
  - `setStrokeColor(string)`: Sets the color of the "stroke" of the widget.
  - `getGapColor()`: Gets the color of the "gap" of the widget.
  - `setGapColor(string)`: Sets the color of the "gap" of the widget.
  - `getFillColor()`: Gets the color of the "background" of the Gauge when it is selected.
  - `setFillColor(string)`: Sets the color of the "background" of the Gauge when it is selected.
  - `getClickable()`: Gets the clickable-state of the widget.
  - `setClickable(boolean)`: Sets the clickable-state of the widget.
  - `selectWidget()`: Programmatically selects the widget. It has the same behavior as clicking on the widget. This operation does not yield any result in case the widget is in a non-clickable state.
  - `unselectWidget()`: Programmatically unselects the widget. It has the same behavior as clicking on the widget. This operation does not yield any result in case the widget is in a non-clickable state.
  - `isWidgetSelected()`: Returns `true` in case the widget is selected or `false` in case the widget is not selected.
  - `toggleSelection()`: Toggles the selection of the widget on or off.
  - `getDebugFlag()`: Gets the Debug flag for the widget instance.
  - `setDebugFlag(boolean)`: Sets the Debug flag for the widget instance.
```

--------------------------------

### Color Picker Widget API Reference

Source: https://github.com/hcl-tech-software/leap-custom-widgets/blob/main/samples/colorPicker-widget/README.md

Defines the programmatic interface for interacting with the Color Picker Widget, allowing developers to get and set various properties and values, and convert color formats. This API enables dynamic control over the widget's appearance and behavior.

```APIDOC
ColorPickerWidget API:
  getDisplayTitle(): string
    Description: Gets the title of the widget.
  setTitle(title: string): void
    Description: Sets the title of the widget.
    Parameters:
      title: The new title string.
  getValue(): string (HEXadecimal)
    Description: Gets the current color value of the widget. Always returns an HEXadecimal string.
  setValue(value: string): void
    Description: Sets the color value of the widget.
    Parameters:
      value: The color value, can be RGB, HEXadecimal, or "Text" string.
  getValueRGB(): string (rgb(int, int, int))
    Description: Gets the RGB representation of the widget's current color value.
  getValueText(): string
    Description: Gets the Text representation of the widget's current color value (e.g., 'red', 'lightblue').
  convertToHex(color: string): string
    Description: Converts an RGB or Text representation of a color to its HEXadecimal counterpart.
    Parameters:
      color: The color string in RGB or Text format.
  getWidth(): string
    Description: Gets the width of the Color-Picker widget.
  setWidth(width: string): void
    Description: Sets the width of the Color-Picker widget.
    Parameters:
      width: The width string, e.g., "100px" or "50%".
  getHeight(): string
    Description: Gets the height of the Color-Picker widget.
  setHeight(height: string): void
    Description: Sets the height of the Color-Picker widget.
    Parameters:
      height: The height string, e.g., "100px".
  getDebugFlag(): boolean
    Description: Gets the Debug flag for the widget instance.
  setDebugFlag(flag: boolean): void
    Description: Sets the Debug flag for the widget instance.
    Parameters:
      flag: Boolean value to enable or disable debug output.
```

--------------------------------

### Clone Leap Custom Widgets Repository

Source: https://github.com/hcl-tech-software/leap-custom-widgets/blob/main/samples/signature-widget/README.md

Command to clone the HCL Leap custom widgets repository from GitHub, which contains the source code for the sample signature widget. This is the first step to obtain the project files.

```bash
git clone https://github.com/HCL-TECH-SOFTWARE/leap-custom-widgets.git
```

--------------------------------

### Clone Leap Custom Widgets Repository

Source: https://github.com/hcl-tech-software/leap-custom-widgets/blob/main/samples/mui-widgets/README.md

This command clones the `leap-custom-widgets` Git repository from GitHub to your local machine. It's the first step to obtain the project source code.

```bash
git clone https://github.com/HCL-TECH-SOFTWARE/leap-custom-widgets.git
```

--------------------------------

### Configure Leap for Production Mode (Vite Build)

Source: https://github.com/hcl-tech-software/leap-custom-widgets/blob/main/samples/mui-widgets/README.md

This configuration snippet for `ibm.nitro.NitroConfig.runtimeResources` allows HCL Leap to load the Material UI widgets from a production build. It references the optimized CSS and JavaScript assets generated by `npm run build`, typically served from `localhost:4173` after running `npm run preview`.

```properties
ibm.nitro.NitroConfig.runtimeResources.1 = \n<link rel='stylesheet' type='text/css' media='screen' href='http://localhost:4173/assets/index-4d2243fc.css'> \n\\n<script type='module' src='http://localhost:4173/assets/index-fa54fabc.js'></script>
```

--------------------------------

### HCL Leap Configuration for Custom Gauge Widget

Source: https://github.com/hcl-tech-software/leap-custom-widgets/blob/main/samples/gauge-widget/README.md

This configuration snippet demonstrates how to include external CSS and JavaScript files for a custom gauge widget into the HCL Leap runtime resources. It specifies the paths to the `gauge.css` stylesheet and `gauge.js` script, which are hosted on a local web server.

```properties
ibm.nitro.NitroConfig.runtimeResources.1 = \
<link rel='stylesheet' type='text/css' media='screen' href='http://127.0.0.1:5501/leap-custom-widgets/samples/gauge-widget/gauge.css'> \
<script type='text/javascript' src='http://127.0.0.1:5501/leap-custom-widgets/samples/gauge-widget/gauge.js'></script>
```

--------------------------------

### Configure Leap for Development Mode (Vite)

Source: https://github.com/hcl-tech-software/leap-custom-widgets/blob/main/samples/mui-widgets/README.md

This configuration snippet for `ibm.nitro.NitroConfig.runtimeResources` allows HCL Leap to load the Material UI widgets in development mode. It points to the CSS and JavaScript assets served by the Vite development server, typically running on `localhost:5173`.

```properties
ibm.nitro.NitroConfig.runtimeResources.1 = \n<link rel='stylesheet' type='text/css' media='screen' href='http://localhost:5173/src/index.css'> \n\\n<script type='module' src='http://localhost:5173/src/main.js'></script>
```

--------------------------------

### Configure Color Picker Widget in HCL Leap

Source: https://github.com/hcl-tech-software/leap-custom-widgets/blob/main/samples/colorPicker-widget/README.md

Instructions for configuring the Color Picker Widget in HCL Leap by adding resource links to the `Leap_config.properties` file. This step ensures that the widget's CSS and JavaScript files are loaded correctly at runtime.

```properties
ibm.nitro.NitroConfig.runtimeResources.1 = \
<link rel='stylesheet' type='text/css' media='screen' href='http://127.0.0.1:5501/leap-custom-widgets/samples/colorPicker-widget/colorPicker.css'> \
<script type='text/javascript' src='http://127.0.0.1:5501/leap-custom-widgets/samples/gauge/colorPicker-widget/colorPicker.css'></script>
```

--------------------------------

### Gauge Widget Properties Reference

Source: https://github.com/hcl-tech-software/leap-custom-widgets/blob/main/samples/gauge-widget/README.md

Detailed list of configurable properties for the Gauge widget, allowing customization of its display settings, initial value, and interactive behaviors.

```APIDOC
Properties:
  - "Enable Debug": When set, verbose output is generated on the browser console.
  - "Gauge Value": Initializes the value shown in the Gauge. Positive integer only.
  - "Label": The text that is displayed at the middle of the widget.
  - "Gauge Scale": The scale relative to which the "Gauge Value" is displayed. Positive integer only.
  - "Stroke color": The color of the "stroke", the part of the widget showing the visualization of the value.
  - "Gap color": The color of the "gap", the part of the widget that completes the "stroke".
  - "Widget Text Color": The color used to display the "Label" and the "Gauge Value".
  - "Selected Widget Fill color": When the widget is clicked, the background color changes to visually represent the fact that the widget has been selected.
  - "Is Clickable": When this property is set, the user can click the widget (triggering a background color change and a "click" event). If not set, the widget will not deliver the "onClick" event nor change background color.
  - "OnHover Description": A string that appears when the user passes the mouse "over" the widget.
```

--------------------------------

### Gauge Widget Events Reference

Source: https://github.com/hcl-tech-software/leap-custom-widgets/blob/main/samples/gauge-widget/README.md

Documentation for events triggered by the Gauge widget, specifically the 'click' event, and how its behavior can be controlled programmatically or via properties.

```APIDOC
Events:
  - "click" event:
    - Description: Triggered when the widget is clicked. The form Author can assign custom behavior via the widget's onClick event handler.
    - Default behavior: The widget changes its "fill color". Clicking twice resets the "fill color" to the default one.
    - Control: Can be statically and/or dynamically blocked by:
      - The "Is Clickable" property (available during widget editing).
      - The `selectWidget()` API.
```

--------------------------------

### Configure HCL Leap for ChartJS Widget Integration

Source: https://github.com/hcl-tech-software/leap-custom-widgets/blob/main/samples/chartjs-widget/README.md

Configuration snippet for the `Leap_config.properties` file to integrate the custom ChartJS widget's CSS and JavaScript files into an HCL Leap application. This ensures the widget's assets are loaded at runtime, making it available for use.

```properties
ibm.nitro.NitroConfig.runtimeResources.1 = \
<link rel='stylesheet' type='text/css' media='screen' href='http://127.0.0.1:5501/leap-custom-widgets/samples/chart-widget/dist/chartJS.css'> \n\
<script type='text/javascript' src='http://127.0.0.1:5501/leap-custom-widgets/samples/chart-widget/dist/chartJS.js'></script>
```

--------------------------------

### ChartJS Widget Events Reference

Source: https://github.com/hcl-tech-software/leap-custom-widgets/blob/main/samples/chartjs-widget/README.md

Describes the events supported by the ChartJS widget that can trigger custom actions when interacted with by the form user.

```APIDOC
ChartJS Widget Events:
  click:
    Description: Triggered when the user clicks on the widget, allowing the form author to assign custom behavior.
```

--------------------------------

### ChartJS Widget API Reference

Source: https://github.com/hcl-tech-software/leap-custom-widgets/blob/main/samples/chartjs-widget/README.md

This section details the programmatic API for interacting with the ChartJS widget, allowing developers to control its display title, data, labels, colors, chart type, dimensions, and debug settings. Each method is described with its purpose, parameters, and return types.

```APIDOC
ChartJS Widget API:
  Method: getDisplayTitle
    Returns: string
  Method: setTitle
    Parameters:
      title: string
    Returns: void
    Description: Gets and sets the title of the widget

  Method: getData
    Returns: string (comma-separated list)
  Method: setData
    Parameters:
      data: string (comma-separated list)
    Returns: void
    Description: Gets and sets the dataset values currently shown by the widget

  Method: getLabels
    Returns: string (comma-separated list)
  Method: setLabels
    Parameters:
      labels: string (comma-separated list)
    Returns: void
    Description: Gets and sets the value of the Labels corresponding to dataset values shown by the widget

  Method: getDatasetLabel
    Returns: string
  Method: setDatasetLabel
    Parameters:
      label: string
    Returns: void
    Description: Gets and sets the Label for the dataset shown by the widget

  Method: getColors
    Returns: string (comma-separated list)
  Method: setColors
    Parameters:
      colors: string (comma-separated list)
    Returns: void
    Description: Gets and sets the names of the Colors corresponding to dataset values shown by the widget

  Method: getChartType
    Returns: string
  Method: setChartType
    Parameters:
      type: string
    Returns: void
    Description: Programmatically gets or sets the current chart type.
    Allowed Values:
      - doughnut (Donut)
      - pie (Pie Chart)
      - bar (Bar Chart)
      - line (Line Chart)
      - polarArea (Polar Chart)

  Method: getChartTypes
    Returns: string (comma-separated list)
    Description: Returns a comma-separated string listing all the available Chart Types.

  Method: getWidth
    Returns: string
  Method: setWidth
    Parameters:
      width: string
    Returns: void
    Description: Gets and sets the width of the chartJS widget.
    Format: "<integer>px" or "<integer>%" (e.g., "100px", "50%", "100%")

  Method: getHeight
    Returns: string
  Method: setHeight
    Parameters:
      height: string
    Returns: void
    Description: Gets and sets the height of the chartJS widget.
    Format: "<integer>px" or "<integer>%" (e.g., "100px", "50%", "100%")

  Method: getDebugFlag
    Returns: boolean
  Method: setDebugFlag
    Parameters:
      flag: boolean
    Returns: void
    Description: Gets and sets the Debug flag for the widget instance
```

--------------------------------

### ChartJS Widget Properties Reference

Source: https://github.com/hcl-tech-software/leap-custom-widgets/blob/main/samples/chartjs-widget/README.md

Defines the configurable attributes of the ChartJS widget, allowing customization of its appearance and behavior. These properties are set by the form author.

```APIDOC
ChartJS Widget Properties:
  Enable Debug:
    Type: boolean
    Description: When set, verbose output is generated on the browser console.
  Width:
    Type: string
    Description: The width of the widget. Can be expressed as pixels or percentage relative to the grid cell.
    Format: <integer>px | <integer>%
    Examples: "100px", "50%"
  Height:
    Type: string
    Description: The height of the widget. Can be expressed as pixels or percentage relative to the grid cell.
    Format: <integer>px | <integer>%
    Examples: "100px", "50%"
  Chart Type:
    Type: enum
    Description: The type of chart to display.
    Values: Pie Chart (default), Donut, Bar Chart, Line Chart, Polar
  Labels:
    Type: string
    Description: A comma-separated list of strings assigned to the dataset.
    Default: "blue, red, orange, yellow, green, purple, grey"
  Colors:
    Type: string
    Description: A comma-separated list of strings used to define the dataset colors. Colors are reused if the dataset has more elements than colors.
    Default: "blue, red, orange, yellow, green, purple, grey"
  Dataset Label:
    Type: string
    Description: The label associated with the data quantity shown in the chart. Visualized on hover and at the top for Line/Bar charts.
  OnHover Description:
    Type: string
    Description: A string that appears when the user hovers over the widget.
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.