### Setting up Local Development Environment (npm)

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/README.md

Installs project dependencies and starts the local development server.

```bash
npm i
npm start
```

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

### Logging Initial Value (JavaScript)

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/showcase/pages/code-diff-editor.html

A simple JavaScript snippet that logs the string 'Hello world!' to the browser console. This is likely used for basic testing or demonstration of the initial state.

```javascript
console.log("Hello world!");
```

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

### Installing Chameleon Library via npm

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/README.md

Installs the Chameleon Controls Library package from npm into your project's dependencies.

```bash
npm i @genexus/chameleon-controls-library --save
```

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

### Simple Console Log (JavaScript)

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/showcase/pages/code-editor.html

Outputs the string 'Hello world!' to the browser's developer console. This is a basic example often used for testing or debugging.

```JavaScript
console.log("Hello world!");
```

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

### Example of Direct Model Assignment (Commented) - JavaScript

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/showcase/pages/sidebar.html

A commented-out line demonstrating how the TreeX control's model could be directly assigned with a large eager-loaded model as an alternative to using lazy loading.

```JavaScript
// testTreeX.model = eagerLargeModel;
```

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

### Defining ch-suggest Data Categories (JavaScript)

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/showcase/pages/test-suggest.html

Defines the structured data source for the ch-suggest component, organized into categories like 'attributes', 'object', 'tables', and 'search', each containing items with id, icon, name, and description.

```JavaScript
const selectorCategoryObjects = [
  {
    name: "attributes",
    items: [
      { id: "has-both-id", icon: "general/db2", name: "Has Both", description: "Is Referenced By + Has References To" },
      { id: "has-none-id", icon: "general/db2", name: "Has none", description: "Is not Referenced By + Has no References To" },
      { id: "referenced-by-id", icon: "general/db2", name: "Referenced By", description: "Is Referenced By only" },
      { id: "references-to-id", icon: "general/db2", name: "Has References To", description: "Has References To only" },
      { id: "referenced-by-error-id", icon: "general/db2", name: "Referenced By ERROR", description: "Is Referenced By couldn't be retrieved" },
      { id: "references-to-error-id", icon: "general/db2", name: "References To ERROR", description: "References To couldn't be retrieved" }
    ]
  },
  {
    name: "object",
    items: [
      { id: "golosina-123-id", icon: "general/knowledge-base", name: "Golosina", description: "Golosina description" },
      { id: "countries-with-attractions-id", icon: "general/references", name: "CountriesWithAttractions", description: "CountriesWithAttractions description" }
    ]
  },
  {
    name: "tables",
    items: [
      { id: "country-id", icon: "general/customization", name: "Country", description: "Country description" }
    ]
  },
  {
    name: "search",
    items: [
      { id: "countries-with-attractions-countries-with-attractions-id", icon: "general/launchpad", name: "CountriesWithAttractions - Countries With Attractions", description: "CountriesWithAttractions description" },
      { id: "countryid-coundtryid-id", icon: "general/generator", name: "CountryId - CountryId", description: "CountryId description" }
    ]
  }
];
```

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

### Handling Window Messages for Theme and Design System (JavaScript)

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/showcase/pages/code-diff-editor.html

Sets up a window message listener to update the theme or design system of the page based on received messages ('light', 'dark', 'unanimo', 'mercury'). This allows external control over the component's appearance.

```javascript
import { setDesignSystemInBrowser } from "../models/ds-manager.js";
import { setThemeInBrowser } from "../models/theme-manager.js";

window.addEventListener("message", event => {
  if (event.data === "light" || event.data === "dark") {
    setThemeInBrowser(event.data);
  }
  if (event.data === "unanimo" || event.data === "mercury") {
    setDesignSystemInBrowser(event.data);
  }
});
```

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

### Basic Page and Card Styling (CSS)

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/showcase/pages/code-diff-editor.html

Provides basic CSS styling for the page layout, preventing FOUC for unhydrated custom elements, setting up a grid layout for the body, and styling card and field containers.

```css
html:not(.hydrated) {
  visibility: hidden;
}

body {
  display: grid;
  gap: var(--spacing--l, var(--mer-spacing--md));
  grid-template-columns: 1fr 400px;
  height: 100vh;
  margin: 0;
}

.card {
  display: grid;
  grid-auto-flow: row;
  grid-auto-rows: max-content;
  gap: 16px;
}

.card-editor {
  grid-template-rows: 1fr 1fr;
}

.field {
  display: grid;
  gap: 8px;
}
```

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

### Watching Tests for Changes (npm)

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/README.md

Starts a watcher that automatically re-runs tests when relevant files change. Can be configured to watch specific files or folders.

```bash
npm run test.watch
```

```bash
npm run test.watch -- -- src/components/edit/<path to test file.<spec|e2e>.ts>
```

```bash
npm run test.watch -- -- src/components/edit/tests/edit.e2e.ts
```

```bash
npm run test.watch -- -- <folder path>
```

```bash
npm run test.watch -- -- src/components/edit/tests/
```

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

### Defining a Simple Mermaid Graph

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/components/tree-view/internal/tree-view-item/readme.md

This Mermaid code defines a directed graph (TD - Top Down) showing dependencies between 'ch-tree-view-item', 'ch-checkbox', and 'ch-tree-view-render'. It also applies custom styling to the 'ch-tree-view-item' node.

```mermaid
graph TD;
  ch-tree-view-item --> ch-checkbox
  ch-tree-view-render --> ch-tree-view-item
  style ch-tree-view-item fill:#f9f,stroke:#333,stroke-width:4px
```

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

### Style Chameleon Alert Component (CSS)

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/showcase/pages/alert.html

Provides CSS rules to style the `ch-alert` component, including preventing Flash Of Unstyled Content (FOUC), setting basic presentation styles when presented, and styling the internal 'indicator' part with different heights and background colors for specific classes.

```css
/* Avoid FOUC (Flash Of Unstyled Content) */
html:not(.hydrated) {
  visibility: hidden;
}

ch-alert[presented] {
  border: solid;
  margin: 10px 0;
  border-radius: 4px;
  padding: 15px 10px;
  position: relative;
}

ch-alert::part(indicator) {
  margin: 0 -10px;
  position: absolute;
  bottom: 0;
}

.second::part(indicator) {
  height: 8px;
  background-color: thistle;
}

.last::part(indicator) {
  height: 12px;
  background-color: greenyellow;
}
```

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

### Including Chameleon Library via Node Modules Script Tag

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/README.md

Adds a script tag to the HTML head to load the Chameleon library directly from the installed node_modules directory.

```html
<script src="node_modules/@genexus/chameleon-controls-library/dist/chameleon/chameleon.esm.js"></script>
```

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

### Handle Theme and Design System Messages (JavaScript)

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/showcase/pages/alert.html

Listens for 'message' events on the window to dynamically change the theme ('light', 'dark') or design system ('unanimo', 'mercury') of the application using helper functions based on the event data.

```javascript
import { setDesignSystemInBrowser } from "../models/ds-manager.js";
import { setThemeInBrowser } from "../models/theme-manager.js";

window.addEventListener("message", event => {
  if (event.data === "light" || event.data === "dark") {
    setThemeInBrowser(event.data);
  }
  if (event.data === "unanimo" || event.data === "mercury") {
    setDesignSystemInBrowser(event.data);
  }
});
```

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

### Styling ch-window and its Parts (CSS)

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/showcase/pages/window.html

Defines CSS rules to style the `ch-window` custom element and its shadow DOM parts (`mask`, `window`, `header`, `close`). Includes basic styling for background colors, dimensions, layout, and a media query example.

```CSS
ch-window   /* ch-window { --x-align: outside-start; } @media (max-width: 600px) { ch-window { --x-align: outside-end; } } */ body.styles ch-window::part(mask) { background-color: rgba(0, 0, 0, 0.3); } body.styles ch-window::part(window) { min-width: 20vw; min-height: 30vh; background-color: gray; } body.styles ch-window::part(header) { display: flex; justify-content: space-between; background-color: wheat; } body.styles ch-window::part(close) { width: 10px; height: 20px; background-color: blueviolet; }
```

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

### Assigning ch-suggest Source Callback (JavaScript)

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/showcase/pages/test-suggest.html

Assigns an asynchronous callback function to the selectorSourceCallback property of a ch-suggest element. This function uses the searchAndFilterArray to filter data based on the input prefix and returns a Promise resolving with the filtered results.

```JavaScript
chTestSuggest.selectorSourceCallback = function (prefix) {
  let selectorSourceCallbackPromise = new Promise(function (
    resolve,
    reject
  ) {
    const selectorCategoryFilteredData = searchAndFilterArray(
      selectorCategoryObjects,
      prefix
    );

    if (selectorCategoryFilteredData) {
      resolve(selectorCategoryFilteredData);
    } else {
      //reject(false);
    }
  });

  return selectorSourceCallbackPromise;
};
```

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

### Default Translations Configuration (JavaScript)

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/components/paginator-render/readme.md

Example of the default configuration object for the 'translations' property, specifying the text and accessible names used by the paginator control. This object defines all the literals required for internationalization.

```JavaScript
{
    accessibleName: {
      goToInput: "Go to page",
      itemsPerPageOptions: "Select amount of items to show"
    },
    text: {
      goToButton: "Go",
      itemsPerPage: "Items per page:",
      of: "of ",
      ellipsis: "...",
      first: "First",
      prev: "Prev",
      next: "Next",
      last: "Last",
      unknownPages: "many",
      unknownItems: "many",
      showingItems: `Showing ${FIRST_ITEM_IN_PAGE} - ${LAST_ITEM_IN_PAGE} of ${TOTAL_ITEMS} items`,
      page: "Page:",
      showingPage: `Showing ${ACTUAL_PAGE} of ${TOTAL_PAGES} pages`
    }
  }
```

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

### Defining Minimal Tree View Model in JavaScript

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/showcase/pages/sidebar.html

This snippet defines a very simple JavaScript array, `modelMinimal`, containing a single item. It serves as a basic example of a tree view model with minimal properties.

```JavaScript
const modelMinimal = [ { id: "number-2-2", caption: "number-2-2", startImgSrc: "./assets/icons/knowledge-base.svg" } ];
```

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

### Logging Modified Value (JavaScript)

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/showcase/pages/code-diff-editor.html

A simple JavaScript snippet that logs the string 'Hello world! 2222' to the browser console. This is likely used to represent a modified state or for testing purposes.

```javascript
console.log("Hello world! 2222");
```

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

### Create and Display Custom Alert (JavaScript)

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/showcase/pages/alert.html

Retrieves DOM elements corresponding to alert configuration inputs (timeout, interval, buttons, bar, pause). Defines a `fireAlert` function that dynamically constructs an HTML string for a `ch-alert` element using a template literal, populating its attributes based on the input element values/states, and sets this HTML as the inner content of a wrapper element.

```javascript
const timeoutEl = document.getElementById("timeout_i");
const intervalEl = document.getElementById("interval_i");
const btnEl = document.getElementById("btn_i");
const barEl = document.getElementById("bar_i");
const pauseEl = document.getElementById("pause_i");

function fireAlert() {
  const element = document.getElementById("custom-alert-wrapper");
  const alert = `
    <ch-alert
      class="last"
      presented="true"
      timer-interval=${intervalEl.value}
      dismiss-timeout=${timeoutEl.value}
      show-close-button=${btnEl.checked}
      show-timeout-bar=${barEl.checked}
      pause-on-hover=${pauseEl.checked}
    >
    </ch-alert>
  `;
  element.innerHTML = alert;
}
```

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

### Interacting with ch-code-diff-editor Component (JavaScript)

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/showcase/pages/code-diff-editor.html

Selects various DOM elements, including the `ch-code-diff-editor` component and input/button elements. Adds event listeners to buttons to update or retrieve the component's `value`, `modifiedValue`, `language`, `theme`, and `yamlSchemaUri` properties based on input field values.

```javascript
const editorRef = document.querySelector("ch-code-diff-editor");
const inputValueRef = document.querySelector("#value");
const inputModifiedValueRef = document.querySelector("#modified-value");
const inputLanguageRef = document.querySelector("#language");
const inputThemeRef = document.querySelector("#theme");
const inputYamlSchemaUriRef = document.querySelector("#yaml-schema-uri");
const buttonUpdateValueRef = document.querySelector("#update-value");
const buttonModifiedUpdateValueRef = document.querySelector(
  "#update-modified-value"
);
const buttonGetValueRef = document.querySelector("#get-value");
const buttonGetModifiedValueRef = document.querySelector(
  "#get-modified-value"
);
const buttonUpdateLanguageRef = document.querySelector("#update-language");
const buttonUpdateThemeRef = document.querySelector("#update-theme");
const buttonUpdateYamlSchemaUriRef = document.querySelector(
  "#update-yaml-schema-uri"
);

buttonUpdateValueRef.addEventListener("click", () => {
  editorRef.value = inputValueRef.value;
});

buttonModifiedUpdateValueRef.addEventListener("click", () => {
  editorRef.modifiedValue = inputModifiedValueRef.value;
});

buttonGetValueRef.addEventListener("click", () => {
  inputValueRef.value = editorRef.value;
});

buttonGetModifiedValueRef.addEventListener("click", () => {
  inputModifiedValueRef.value = inputModifiedValueRef.value;
});

buttonUpdateLanguageRef.addEventListener("click", () => {
  editorRef.language = inputLanguageRef.value;
});

buttonUpdateThemeRef.addEventListener("click", () => {
  editorRef.theme = inputThemeRef.value;
});

buttonUpdateYamlSchemaUriRef.addEventListener("click", () => {
  editorRef.yamlSchemaUri = inputYamlSchemaUriRef.value;
});
```

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

### Basic Usage of ch-next-progress-bar in HTML

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/components/next/progress-bar/readme.md

Demonstrates how to include the ch-next-progress-bar component in an HTML document and set its basic properties like caption, description, steps, and current-step. The 'presented' attribute makes the component visible.

```HTML
<ch-next-progress-bar
  caption="Your App is almost ready!"
  description="Defining business entities"
  steps="5"
  current-step="2"
  presented
></ch-next-progress-bar>
```

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

### Interacting with ch-suggest (JavaScript)

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/showcase/pages/suggest.html

Demonstrates how to select the `ch-suggest` web component using `querySelector`. It shows how to set the `cursorEnd` property and how to add event listeners to buttons to call the `selectInputText` and `focus` methods on the component instance.

```javascript
const chSuggest = document.querySelector("ch-suggest");
chSuggest.cursorEnd = true;
/*Select text button*/
const selectTextButton = document.getElementById("select-text-button");
selectTextButton.addEventListener("click", async e => {
  await chSuggest.selectInputText();
});
/*Focus button*/
const focusButton = document.getElementById("focus-button");
focusButton.addEventListener("click", e => {
  chSuggest.focus();
});
```

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

### Fetch Latest Library Version from npm

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/index.html

Uses the Fetch API to retrieve the latest version information for the '@genexus/chameleon-controls-library' package from the npm registry and updates the 'packageVersion' property of the 'ch-showcase' element on the page.

```javascript
fetch(
  `https://registry.npmjs.org/@genexus/chameleon-controls-library/latest`
)
  .then(response => response.json())
  .then(data => {
    document.querySelector("ch-showcase").packageVersion = data.version;
  });
```

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

### Style Dropdown Item Shortcut Part (CSS)

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/showcase/pages/action-group.html

This CSS rule styles the 'shortcut' part within a `dropdown-item`, setting its start margin for alignment.

```CSS
.dropdown-item::part(shortcut) {
  margin-inline-start: 128px;
}
```

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

### Building Project for Production (npm)

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/README.md

Compiles and bundles the project's design assets for deployment in a production environment.

```bash
npm run build
```

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

### Visualizing Component Dependencies with Mermaid

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/components/flexible-layout/readme.md

This snippet defines a Mermaid graph to visualize the dependencies between different components, specifically highlighting the `ch-flexible-layout-render` component and its relationships with other components like `ch-theme`, `ch-flexible-layout`, `ch-showcase`, and `ch-test-flexible-layout`. It also includes styling for the `ch-flexible-layout-render` node.

```mermaid
graph TD;
  ch-flexible-layout-render --> ch-theme
  ch-flexible-layout-render --> ch-flexible-layout
  ch-flexible-layout --> ch-tab-render
  ch-flexible-layout --> ch-layout-splitter
  ch-showcase --> ch-flexible-layout-render
  ch-test-flexible-layout --> ch-flexible-layout-render
  style ch-flexible-layout-render fill:#f9f,stroke:#333,stroke-width:4px
```

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

### Dependency Graph (Mermaid)

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/components/shortcuts/readme.md

This Mermaid graph visualizes the dependencies of the ch-shortcuts component, showing its reliance on ch-window and ch-window-close.

```mermaid
graph TD;
  ch-shortcuts --> ch-window
  ch-window --> ch-window-close
  style ch-shortcuts fill:#f9f,stroke:#333,stroke-width:4px
```

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

### Generating React Wrappers for Chameleon

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/README.md

Runs the Chameleon CLI tool to generate React wrapper components for the web components. An optional output directory can be specified.

```bash
npx chameleon-generate-react <output dir (optional)>
```

```bash
npx chameleon-generate-react ./src/chameleon-components
```

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

### Filtering ch-suggest Data Source (JavaScript)

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/showcase/pages/test-suggest.html

A JavaScript function that filters the selectorCategoryObjects array based on a search value, returning a new array containing only categories with matching items (case-insensitive search on name and description).

```JavaScript
function searchAndFilterArray(objectsArray, searchValue) {
  const results = [];

  objectsArray.filter(category => {
    const filteredItems = category.items.filter(item => {
      const lowerSearchValue = searchValue.toLowerCase();
      const lowerName = item.name.toLowerCase();
      const lowerDescription = item.description ? item.description.toLowerCase() : "";

      return (
        lowerName.includes(lowerSearchValue) ||
        lowerDescription.includes(lowerSearchValue)
      );
    });

    if (filteredItems.length > 0) {
      results.push({
        name: category.name,
        items: filteredItems.map(item => ({
          id: item.id,
          icon: item.icon,
          name: item.name,
          description: item.description || ""
        }))
      });
    }
  });

  return results;
}
```

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

### Styling Chameleon Sidebar Menu Part (CSS)

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/showcase/pages/sidebar-old.html

Applies CSS styles to the internal 'menu' part of the `ch-sidebar-menu` component to control its height and vertical position, ensuring it fits within the viewport below a potential header.

```CSS
ch-sidebar   ch-sidebar-menu::part(menu) { height: calc(100vh - 44px); top: 44px; }
```

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

### Initialize Chameleon Theme Component

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/index.html

Creates a 'ch-theme' custom element, configures its 'model' property with an array of theme objects specifying external CSS URLs, and appends the element to the document body.

```javascript
const themeRef = document.createElement("ch-theme");
themeRef.model = [
  { name: "chameleon/scrollbar", url: "showcase/scrollbar.css", attachStyleSheet: false },
  { name: "unanimo/markdown-viewer", url: "https://unpkg.com/@genexus/unanimo@latest/dist/bundles/css/components/markdown-viewer.css", attachStyleSheet: false },
  { name: "mercury/markdown-viewer", url: "https://unpkg.com/@genexus/mercury@latest/dist/bundles/css/components/markdown-viewer.css", attachStyleSheet: false }
];
document.body.append(themeRef);
```

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

### Dependency Graph - Mermaid

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/components/paginator/paginator-pages/readme.md

Visual representation of the component's dependencies using Mermaid syntax, showing that 'gx-grid-chameleon' uses 'ch-paginator-pages'.

```Mermaid
graph TD;
  gx-grid-chameleon --> ch-paginator-pages
  style ch-paginator-pages fill:#f9f,stroke:#333,stroke-width:4px
```

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

### Styling ch-suggest and Components (CSS)

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/showcase/pages/suggest.html

Provides CSS rules to style the `ch-suggest` component, its internal parts like title, label, input, and dropdown, as well as related components `ch-suggest-list` and `ch-suggest-list-item`. Includes styles for general appearance, layout, focus states, hover effects, and selected items.

```css
/*general*/ :root { --highlight-color: rgb(163, 25, 161); } body { font-family: "Rubik", sans-serif; font-size: 14px; } ul { margin: 0 0 16px 0; padding-inline-start: 16px; } li { margin-bottom: 2px; } code { color: rgb(156, 30, 156); background-color: rgba(255, 193, 203, 0.469); padding: 4px 8px; border-radius: 4px; font-weight: bold; } /*ch-suggest*/ body.styles ch-suggest { display: block; } body.styles ch-suggest::part(title) { display: block; font-weight: bold; } body.styles ch-suggest::part(label) { font-weight: 500; } body.styles ch-suggest[label-position="start"]::part(label) { margin-inline-end: 8px; display: flex; align-items: center; } body.styles ch-suggest[label-position="above"]::part(label) { margin-block-end: 4px; } body.styles ch-suggest::part(close-button) { display: block; width: 16px; height: 16px; } body.styles ch-suggest::part(close-button)::after { content: "✖"; line-height: 8px; height: 100%; display: block; border: 1px solid black; cursor: pointer; text-align: center; line-height: 16px; } body.styles ch-suggest::part(header) { display: flex; justify-content: space-between; align-items: center; margin-block-end: 8px; } body.styles ch-suggest::part(ch-window-close) { width: 10px; height: 10px; } body.styles ch-suggest::part(input) { padding: 4px 8px; border: 1px solid black; } body.styles ch-suggest::part(input):focus { outline: 2px solid var(--highlight-color); border-color: var(--highlight-color); } /*ch-suggest-list*/ body.styles ch-suggest-list { background-color: rgba(234, 234, 234, 0.224); border: 1px solid rgba(128, 128, 128, 0.275); border-radius: 4px; padding: 8px; margin-block-end: 4px; } body.styles ch-suggest-list::part(title) { font-size: 14px; font-weight: bold; text-transform: uppercase; margin: 4px 0 8px 0; } /*ch-suggest-list-item*/ body.styles ch-suggest-list-item::part(button) { padding: 4px 8px; cursor: pointer; gap: 4px; } body.styles ch-suggest-list-item ch-icon { --icon-size: 16px; margin-inline-end: 2px; } body.styles ch-suggest-list-item:hover { background-color: var(--ch-color--violet-100); } body.styles ch-suggest-list-item:focus, body.styles ch-suggest-list-item[selected]:focus { outline: 2px solid var(--highlight-color); } body.styles ch-suggest-list-item[selected] { background-color: rgba(241, 184, 243, 0.42); outline: none; } body.styles ch-suggest-list-item::part(button):focus { outline: 2px solid var(--highlight-color); border-color: var(--highlight-color); } /*content-wrapper*/ body.styles ch-suggest-list-item::part(content-wrapper) { display: flex; gap: 8px; } /*ch-window*/ body.styles ch-suggest::part(dropdown) { margin-block-start: 4px; border: 1px solid black; background-color: white; padding: 8px; } /*focus*/ :focus { outline-style: none !important; }
```

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

### Dependency Graph - ch-chat Component

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/components/chat/readme.md

Visual representation of the dependencies for the `ch-chat` web component, illustrating how it relies on other components like `ch-smart-grid`, `ch-virtual-scroller`, and others.

```Mermaid
graph TD;
  ch-chat --> ch-smart-grid
  ch-chat --> ch-virtual-scroller
  ch-chat --> ch-smart-grid-cell
  ch-chat --> ch-theme
  ch-chat --> ch-edit
  ch-chat --> ch-code
  ch-chat --> ch-markdown-viewer
  ch-smart-grid --> ch-infinite-scroll
  ch-markdown-viewer --> ch-theme
  ch-markdown-viewer --> ch-code
  style ch-chat fill:#f9f,stroke:#333,stroke-width:4px
```

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

### Defining Lazy Loaded Tree View Model 2 in JavaScript

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/showcase/pages/sidebar.html

This snippet defines a JavaScript array, `modelLazyUpdated2`, providing another example of a simple tree structure model. It shows nodes configured with `checkbox` and `dragDisabled` properties.

```JavaScript
const modelLazyUpdated2 = [ { id: "lazy-loaded-3", caption: "Lazy Loaded 3 (drag disabled)", leaf: true, startImgSrc: "assets/icons/patterns.svg", checkbox: true, dragDisabled: true }, { id: "lazy-loaded-4", caption: "Lazy Loaded 4 (drag disabled)", leaf: true, startImgSrc: "assets/icons/patterns.svg", checkbox: true, dragDisabled: true } ];
```

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

### Mermaid Graph for ch-combo-box-render Dependencies

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/components/combo-box/readme.md

Visualizes the dependency relationships for the ch-combo-box-render component, showing which components use it and which it depends on.

```Mermaid
graph TD;
  ch-combo-box-render --> ch-popover
  ch-paginator-render --> ch-combo-box-render
  ch-showcase --> ch-combo-box-render
  style ch-combo-box-render fill:#f9f,stroke:#333,stroke-width:4px
```

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

### Handle Theme and Design System Messages (JavaScript)

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/showcase/pages/tabular-grid.html

This JavaScript snippet imports functions to manage the design system and theme in the browser. It adds an event listener to the `window` object to receive messages. If the message data is "light" or "dark", it sets the theme; if it's "unanimo" or "mercury", it sets the design system.

```JavaScript
import { setDesignSystemInBrowser } from "../models/ds-manager.js"; import { setThemeInBrowser } from "../models/theme-manager.js"; window.addEventListener("message", event => { if (event.data === "light" || event.data === "dark") { setThemeInBrowser(event.data); } if (event.data === "unanimo" || event.data === "mercury") { setDesignSystemInBrowser(event.data); } });
```

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

### Handling Sidebar Menu Item Click Event (JavaScript)

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/showcase/pages/sidebar-old.html

Adds an event listener to the `ch-sidebar-menu` component to react to the `itemClickedEvent`. When an item is clicked, it updates the content of an element with the ID 'selected-menu-item' with the clicked item's ID, applying a temporary 'hidden' class for a visual effect.

```JavaScript
const selectedMenuItem = document.getElementById("selected-menu-item");
const sidebarMenu = document.getElementById("ch-sidebar-menu");
sidebarMenu.addEventListener("itemClickedEvent", function (e) {
  selectedMenuItem.classList.add("hidden");
  setTimeout(function () {
    selectedMenuItem.innerHTML = e.detail["item-id"];
    selectedMenuItem.classList.remove("hidden");
  }, 250);
});
```

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

### Initialize Theme and Design System - JavaScript

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/showcase/pages/paginator.html

Sets up event listeners on the window to receive messages. If the message data is 'light' or 'dark', it sets the theme. If the data is 'unanimo' or 'mercury', it sets the design system.

```JavaScript
import { setDesignSystemInBrowser } from "../models/ds-manager.js";
import { setThemeInBrowser } from "../models/theme-manager.js";

window.addEventListener("message", event => {
  if (event.data === "light" || event.data === "dark") {
    setThemeInBrowser(event.data);
  }
  if (event.data === "unanimo" || event.data === "mercury") {
    setDesignSystemInBrowser(event.data);
  }
});
```

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

### Dependency Graph

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/components/action-group/readme.md

Visualizes the dependencies between components like ch-action-group-render, ch-action-menu-render, ch-action-menu, ch-popover, and ch-test-flexible-layout.

```mermaid
graph TD;
  ch-action-group-render --> ch-action-menu-render
  ch-action-menu-render --> ch-action-menu
  ch-action-menu-render --> ch-popover
  ch-action-menu --> ch-popover
  ch-test-flexible-layout --> ch-action-group-render
  style ch-action-group-render fill:#f9f,stroke:#333,stroke-width:4px
```

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

### Component Dependency Graph - Mermaid

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/components/action-list/readme.md

Visual representation of the ch-action-list-render component's dependencies and how it is used by other components.

```Mermaid
graph TD;
  ch-action-list-render --> ch-action-list-item
  ch-action-list-render --> ch-action-list-group
  ch-action-list-item --> ch-edit
  ch-test-flexible-layout --> ch-action-list-render
  style ch-action-list-render fill:#f9f,stroke:#333,stroke-width:4px
```

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

### Mermaid Dependency Graph

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/components/navigation-list/readme.md

This Mermaid graph visualizes the dependencies between various components related to the ch-navigation-list, showing how ch-navigation-list-render depends on ch-navigation-list-item, which in turn depends on ch-tooltip and ch-popover, and how ch-showcase utilizes ch-navigation-list-render.

```mermaid
graph TD;
  ch-navigation-list-render --> ch-navigation-list-item
  ch-navigation-list-item --> ch-tooltip
  ch-tooltip --> ch-popover
  ch-showcase --> ch-navigation-list-render
  style ch-navigation-list-render fill:#f9f,stroke:#333,stroke-width:4px

```

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

### Importing GXWebModel and Defining Constants - JavaScript

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/showcase/pages/action-group.html

Imports the GXWebModel type from a local file and defines constants used for specifying image types within the data models.

```JavaScript
import { GXWebModel } from "./assets/models/action-group.js";
const START_IMG_TYPE = "background";
const END_IMG_TYPE = "background";
```

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

### Adding Chameleon Wrapper Generation to package.json Scripts

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/README.md

Configures package.json scripts to automatically generate React wrappers before development or production builds. Useful for monorepo environments.

```json
"dev": "npm run build.chameleon && ...",
"build": "npm run build.chameleon && ...",
"build.chameleon": "chameleon-generate-react <output dir (optional)>"
```

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

### Importing Tree View Models

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/showcase/pages/sidebar.html

Imports pre-defined tree view models and related data structures from a local module file.

```javascript
import { fileSystemModel, lazyLoadItemsDictionary, kbExplorerModel, importObjectsModel } from "./assets/models/tree.js";
```

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

### Dependency Graph - Mermaid

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/components/tab/readme.md

Visual representation of the dependency relationship between ch-flexible-layout and ch-tab-render using Mermaid syntax.

```mermaid
graph TD;
  ch-flexible-layout --> ch-tab-render
  style ch-tab-render fill:#f9f,stroke:#333,stroke-width:4px
```

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

### Mermaid Graph for Component Dependencies

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/components/next/data-modeling-item/readme.md

Visualizes the dependency graph for the ch-next-data-modeling-item component, showing its relationship with ch-accordion and ch-next-data-modeling-render.

```mermaid
graph TD;
  ch-next-data-modeling-item --> ch-accordion
  ch-next-data-modeling-render --> ch-next-data-modeling-item
  style ch-next-data-modeling-item fill:#f9f,stroke:#333,stroke-width:4px
```

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

### Dependency Graph - Mermaid

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/components/action-menu/readme.md

This Mermaid code defines a directed graph illustrating the dependencies of the ch-action-menu-render component, showing its relationships with ch-action-menu, ch-popover, and ch-action-group-render.

```Mermaid
graph TD;
  ch-action-menu-render --> ch-action-menu
  ch-action-menu-render --> ch-popover
  ch-action-menu --> ch-popover
  ch-action-group-render --> ch-action-menu-render
  style ch-action-menu-render fill:#f9f,stroke:#333,stroke-width:4px
```

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

### Initializing Tree View Component on App Load in JavaScript

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/showcase/pages/sidebar.html

This snippet adds an event listener to the `appload` event to initialize a tree view component (`ch-tree-view-render`). It prevents duplicate initialization and sets the component's model to `kbExplorerModel`.

```JavaScript
let appLoadFinish = false; window.addEventListener("appload", () => { if (appLoadFinish) { return; } appLoadFinish = true; const testTreeX = document.querySelector("ch-tree-view-render"); testTreeX.model = kbExplorerModel; const multiSelectionCheckbox = document.getElementById("multi-selection"); multiSelection
```

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

### Dependency Graph (Mermaid)

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/components/next/data-modeling-render/readme.md

Visual representation of the ch-next-data-modeling-render component's dependencies using Mermaid syntax.

```mermaid
graph TD;
  ch-next-data-modeling-render --> ch-next-data-modeling
  ch-next-data-modeling-render --> ch-next-data-modeling-item
  ch-next-data-modeling-item --> ch-accordion
  style ch-next-data-modeling-render fill:#f9f,stroke:#333,stroke-width:4px
```

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

### Mermaid Dependency Graph for ch-code

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/components/code/readme.md

This Mermaid graph visualizes the components that depend on the `ch-code` component, showing the relationships between `ch-chat`, `ch-markdown-viewer`, `ch-showcase`, and `ch-code`.

```mermaid
graph TD;
  ch-chat --> ch-code
  ch-markdown-viewer --> ch-code
  ch-showcase --> ch-code
  style ch-code fill:#f9f,stroke:#333,stroke-width:4px
```

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

### Running Specific Spec Tests (npm)

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/README.md

Runs unit tests for a single specified custom element spec file. Replace <path to test file.spec.ts> with the actual file path.

```bash
npm run test.spec src/components/<path to test file.spec.ts>
```

```bash
npm run test.spec src/components/layout-splitter/tests/fixAndUpdateLayoutModel.spec.ts
```

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

### Component Dependency Graph (Mermaid)

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/components/paginator-render/readme.md

Visual representation of the dependencies for the 'ch-paginator-render' component using Mermaid syntax, illustrating its relationship with 'ch-combo-box-render' and 'ch-popover'.

```Mermaid
graph TD;
  ch-paginator-render --> ch-combo-box-render
  ch-combo-box-render --> ch-popover
  style ch-paginator-render fill:#f9f,stroke:#333,stroke-width:4px
```

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

### Visualizing Component Relationships with Mermaid

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/components/tabular-grid/column/readme.md

This Mermaid graph definition visualizes the dependencies and relationships between various components, primarily focusing on the ch-tabular-grid-column and its related settings, resize, and window components. It shows how components like settings and resize relate to the column, and how settings relates to a window component.

```mermaid
graph TD;
  ch-tabular-grid-column --> ch-tabular-grid-column-settings
  ch-tabular-grid-column --> ch-tabular-grid-column-resize
  ch-tabular-grid-column-settings --> ch-window
  ch-window --> ch-window-close
  ch-tabular-grid-render --> ch-tabular-grid-column
  ch-test-flexible-layout --> ch-tabular-grid-column
  style ch-tabular-grid-column fill:#f9f,stroke:#333,stroke-width:4px
```

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

### Mermaid Graph for ch-navigation-list-item Dependencies

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/components/navigation-list/internal/navigation-list-item/readme.md

This Mermaid graph visualizes the dependencies of the ch-navigation-list-item component, showing its relationship with ch-tooltip and how it is used by ch-navigation-list-render. It also highlights the ch-navigation-list-item node with a specific style.

```Mermaid
graph TD;\n  ch-navigation-list-item --> ch-tooltip\n  ch-tooltip --> ch-popover\n  ch-navigation-list-render --> ch-navigation-list-item\n  style ch-navigation-list-item fill:#f9f,stroke:#333,stroke-width:4px
```

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

### Dependency Graph (Mermaid)

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/components/tabular-grid/column/resize/readme.md

Visual representation of the component's dependency on `ch-tabular-grid-column` using Mermaid syntax.

```mermaid
graph TD;
  ch-tabular-grid-column --> ch-tabular-grid-column-resize
  style ch-tabular-grid-column-resize fill:#f9f,stroke:#333,stroke-width:4px
```

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

### Handle KB Explorer Model Button Click in TreeX

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/showcase/pages/sidebar.html

Sets up a click event listener for a button. When clicked, it configures several checkbox-related properties (`checkbox`, `checked`, `toggleCheckboxes`) on `testTreeX` before loading the `kbExplorerModel` data.

```JavaScript
const kbExplorerBtn = document.getElementById("kb-explorer-model-btn");
kbExplorerBtn.addEventListener("click", () => {
  testTreeX.checkbox = false;
  testTreeX.checked = false;
  testTreeX.toggleCheckboxes = true;
  testTreeX.model = kbExplorerModel;
});
```

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

### Dependency Graph using Mermaid

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/components/alert/timer/readme.md

Illustrates the dependency relationship where the 'ch-alert' component uses the 'ch-timer' component.

```mermaid
graph TD;
  ch-alert --> ch-timer
  style ch-timer fill:#f9f,stroke:#333,stroke-width:4px
```

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

### Dependency Graph - ch-alert

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/components/alert/readme.md

This Mermaid graph illustrates the dependencies of the ch-alert component, showing that it depends on the ch-timer component.

```Mermaid
graph TD;
  ch-alert --> ch-timer
  style ch-alert fill:#f9f,stroke:#333,stroke-width:4px
```

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

### Dependency Graph using Mermaid

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/components/tree-view/internal/tree-view/readme.md

This Mermaid code block visualizes the dependencies of the ch-tree-view component, showing that ch-tree-view-render depends on ch-tree-view.

```mermaid
graph TD;\n  ch-tree-view-render --> ch-tree-view\n  style ch-tree-view fill:#f9f,stroke:#333,stroke-width:4px
```

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

### Dependency Graph (Mermaid)

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/components/tabular-grid-render/readme.md

This Mermaid graph visualizes the dependencies of the ch-tabular-grid-render component on other components within the library, showing the relationships and structure of the component tree.

```Mermaid
graph TD;
  ch-tabular-grid-render --> ch-tabular-grid
  ch-tabular-grid-render --> ch-tabular-grid-columnset
  ch-tabular-grid-render --> ch-tabular-grid-column
  ch-tabular-grid-render --> ch-tabular-grid-rowset-legend
  ch-tabular-grid-render --> ch-theme
  ch-tabular-grid --> ch-tabular-grid-settings
  ch-tabular-grid --> ch-tabular-grid-settings-columns
  ch-tabular-grid-settings --> ch-window
  ch-window --> ch-window-close
  ch-tabular-grid-column --> ch-tabular-grid-column-settings
  ch-tabular-grid-column --> ch-tabular-grid-column-resize
  ch-tabular-grid-column-settings --> ch-window
  style ch-tabular-grid-render fill:#f9f,stroke:#333,stroke-width:4px
```

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

### Defining Layout Splitter Mermaid Graph

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/components/layout-splitter/readme.md

Defines a directed graph using Mermaid syntax to visualize the relationship between ch-flexible-layout and ch-layout-splitter, highlighting the splitter component with specific styling.

```mermaid
graph TD;\n  ch-flexible-layout --> ch-layout-splitter\n  style ch-layout-splitter fill:#f9f,stroke:#333,stroke-width:4px
```

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

### Dependency Graph using Mermaid

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/components/tree-view/readme.md

This Mermaid code block visualizes the dependencies of the ch-tree-view-render component, showing which components it depends on and which component uses it.

```Mermaid
graph TD;
  ch-tree-view-render --> ch-tree-view
  ch-tree-view-render --> ch-tree-view-drop
  ch-tree-view-render --> ch-tree-view-item
  ch-tree-view-item --> ch-checkbox
  ch-test-flexible-layout --> ch-tree-view-render
  style ch-tree-view-render fill:#f9f,stroke:#333,stroke-width:4px
```

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

### Handle Browser Messages for Theme and Design System (JavaScript)

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/showcase/pages/shortcuts.html

Listens for 'message' events on the window object to change the theme ('light', 'dark') or design system ('unanimo', 'mercury') in the browser using helper functions imported from local modules.

```JavaScript
import { setDesignSystemInBrowser } from "../models/ds-manager.js";
import { setThemeInBrowser } from "../models/theme-manager.js";

window.addEventListener("message", event => {
  if (event.data === "light" || event.data === "dark") {
    setThemeInBrowser(event.data);
  }
  if (event.data === "unanimo" || event.data === "mercury") {
    setDesignSystemInBrowser(event.data);
  }
});
```

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

### Style Configuration and Button Layouts - CSS

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/showcase/pages/sidebar.html

Defines grid layouts for configuration sections and groups of tree-related buttons.

```CSS
.configuration {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: min-content min-content min-content;
  gap: 12px 24px;
}

.configuration > div {
  display: grid;
  grid-template-columns: max-content max-content;
  gap: 16px;
}

.tree-buttons {
  display: grid;
  grid-auto-rows: max-content;
  row-gap: 8px;
}
```

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

### Dependency Graph - ch-infinite-scroll

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/components/smart-grid/internal/infinite-scroll/readme.md

Illustrates the dependency relationship where the ch-smart-grid component uses the ch-infinite-scroll component, highlighting the infinite scroll component.

```Mermaid
graph TD;
  ch-smart-grid --> ch-infinite-scroll
  style ch-infinite-scroll fill:#f9f,stroke:#333,stroke-width:4px
```

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

### Mermaid Dependency Graph for ch-timer

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/components/timer/readme.md

Visual representation of the ch-timer component's dependencies, showing it is used by ch-notifications-item.

```Mermaid
graph TD;
  ch-notifications-item --> ch-timer
  style ch-timer fill:#f9f,stroke:#333,stroke-width:4px
```

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

### Configuring StencilJS Copy Task for Monaco Assets

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/components/code-editor/readme.md

This configuration snippet for stencil.config.ts demonstrates how to set up copy tasks in a StencilJS project. It ensures that the Monaco editor's Web Worker assets, required by the ch-code-editor component, are copied from the node_modules directory to the build output directories (dist and www).

```TypeScript
// stencil.config.ts
import { Config } from "@stencil/core";

export const config: Config = {
  namespace: "your-name-space",
  outputTargets: [
    {
      type: "dist",
      copy: [
        {
          src: "../node_modules/@genexus/chameleon-controls-library/dist/chameleon/assets",
          dest: "assets"
        }
      ]
    },
    {
      type: "www",
      serviceWorker: null,
      copy: [
        {
          src: "../node_modules/@genexus/chameleon-controls-library/dist/chameleon/assets",
          dest: "assets"
        }
      ]
    }
  ]
};
```

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

### Mermaid Dependency Graph for ch-popover

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/components/popover/readme.md

This Mermaid graph illustrates the components that depend on or use the ch-popover component, showing the relationships within the library.

```Mermaid
graph TD;
  ch-action-menu --> ch-popover
  ch-action-menu-render --> ch-popover
  ch-combo-box-render --> ch-popover
  ch-tooltip --> ch-popover
  style ch-popover fill:#f9f,stroke:#333,stroke-width:4px
```

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

### Handle Update File System Model Button Click in TreeX

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/showcase/pages/sidebar.html

Attaches a click event listener to a button. When clicked, it updates the `testTreeX.model` property with the value of the `fileSystemModel` variable, loading a data structure representing a file system.

```JavaScript
const updateFileSystemBtn = document.getElementById(
  "update-file-system-btn"
);
updateFileSystemBtn.addEventListener("click", () => { testTreeX.model = fileSystemModel; });
```

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

### Handle Theme and Design System Messages - JavaScript

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/showcase/pages/sidebar.html

Sets the theme ('light' or 'dark') or design system ('unanimo' or 'mercury') in the browser based on messages received via the window message event listener.

```JavaScript
import { setDesignSystemInBrowser } from "../models/ds-manager.js";
import { setThemeInBrowser } from "../models/theme-manager.js";

window.addEventListener("message", event => {
  if (event.data === "light" || event.data === "dark") {
    setThemeInBrowser(event.data);
  }
  if (event.data === "unanimo" || event.data === "mercury") {
    setDesignSystemInBrowser(event.data);
  }
});
```

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

### Including Chameleon Library via CDN Script Tag

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/README.md

Adds a script tag to the HTML head to load the Chameleon library directly from a CDN (unpkg).

```html
<script src="https://unpkg.com/@genexus/chameleon-controls-library@latest/dist/chameleon/chameleon.esm.js"></script>
```

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

### Dependency Graph (Mermaid)

Source: https://github.com/genexuslabs/chameleon-controls-library/blob/main/src/components/action-list/internal/action-list-item/readme.md

This Mermaid code block defines a graph visualizing the dependencies of the ch-action-list-item component, showing that it depends on ch-edit and is used by ch-action-list-render.

```mermaid
graph TD;
  ch-action-list-item --> ch-edit
  ch-action-list-render --> ch-action-list-item
  style ch-action-list-item fill:#f9f,stroke:#333,stroke-width:4px
```