@flui-cloud/dymmi-ui-element

The dymmi database console, shipped as a framework-agnostic Web Component (<dymmi-database-console>). The package is a single self-contained Angular 22 bundle — its own Angular runtime is inlined — so any host can load it without recompiling and regardless of the host's framework version, including an Angular several majors behind.

Two files:

| file | what it is | | ----------------- | ------------------------------------------------------- | | dist/main.js | the bundle; importing it registers the custom element | | dist/styles.css | global styles (Tailwind base) — the host must load this |

Consume (plain HTML)

<link rel="stylesheet" href="@flui-cloud/dymmi-ui-element/styles.css" />
<dymmi-database-console></dymmi-database-console>
<script type="module">
  import '@flui-cloud/dymmi-ui-element'; // registers customElements.define('dymmi-database-console', …)
  const el = document.querySelector('dymmi-database-console');
  el.config = { apiBaseUrl: 'https://dymmi.internal/api', authToken: jwt, theme: 'dark' };
  el.addEventListener('ready', () => console.log('console mounted'));
</script>

Consume (Angular host, any major)

// 1. side-effect import once at startup → registers the element
import '@flui-cloud/dymmi-ui-element';

// 2. allow unknown elements in the module/component that uses it
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@Component({ schemas: [CUSTOM_ELEMENTS_SCHEMA], /* … */ })

// 3. load the global stylesheet (angular.json "styles" or a global import)
//    node_modules/@flui-cloud/dymmi-ui-element/dist/styles.css

<dymmi-database-console
  [config]="{ apiBaseUrl: apiBase, authToken: token, theme: 'dark' }"
  (ready)="onConsoleReady()">
</dymmi-database-console>

Tip: lazy-load the route that hosts the element and import('@flui-cloud/dymmi-ui-element') dynamically — the bundle is large (it carries its own Angular).

The contract

config (input — property or JSON-string attribute)

| field | type | default | meaning | | ------------ | --------------------- | -------- | ---------------------------------------------------- | | apiBaseUrl | string | /api | base URL of the dymmi server API | | authToken | string | — | bearer token → sent as Authorization: Bearer <t> | | theme | 'dark' \| 'light' | — | UI theme hint (reserved) |

Setting config again at runtime is honoured live (the live data resources re-fetch against the new base/token — no reload).

ready (output — CustomEvent<void>)

Fires once the console has mounted and applied the initial config.

Build / re-pack

pnpm --filter @flui-cloud/dymmi-ui-element build   # runs apps/web build:element, stages dist/
pnpm --filter @flui-cloud/dymmi-ui-element pack --pack-destination ../../dist-packages

Requires Node ≥ 22.22.3 (Angular 22 CLI). See scripts/pack-local.sh.