@echelon-framework/designer-widgets

9 visual designers + 30 field types + 7 CSS themes for Echelon low-code platform.

Installation

npm install @echelon-framework/designer-widgets

Quick Start

import {
  designerWidgets,
  designerPages,
  designerMenuItems,
} from '@echelon-framework/designer-widgets';

// Register widgets
provideEchelon({ widgets: [...myWidgets, ...designerWidgets()] });

// Add routes (developer controls basePath + guard)
const routes = [
  ...appRoutes,
  ...designerPages({
    basePath: '/admin/designer',
    guard: AdminGuard,
    component: EchelonPageRouterComponent,
  }),
];

// Add menu items (developer controls placement)
defineMenu([{ id: 'admin', label: 'Admin', children: [...designerMenuItems()] }]);

9 Designers

| Designer | Route | Description | | --------------- | ------------------------ | ----------------------------------------------------------- | | 🎨 Pages | /designer | Page layout, widgets, bindings, handlers | | 🧩 Models | /designer/models | Data models — fields, types, relations, serverManaged, i18n | | 📦 DataSources | /designer/datasources | DS config — kind, output model, cardinality, params, mock | | 📋 Forms | /designer/forms | Forms — intent, typed contracts, 30 field types, lookup | | 🔄 Processes | /designer/processes | Multi-step wizards — DAG, session state, commit | | 🧭 Menu | /menu-editor | Navigation tree — drag, reorder, route binding | | 🌐 Translations | /designer/translations | i18n keys — languages, missing translations | | 🎨 Themes | /designer/themes | 7 CSS themes (incl. BNP Paribas Light/Dark) | | 📤 Export | /designer/export | JSON/TS export + JSON import |

30 Field Types

Basic: string, text, number, decimal, integer, boolean, checkbox, select, textarea, date, datetime, email, password, url

Extended: file, range, time, color, rating, toggle

Composite: money (amount+currency), date-range (from-to), address (4 sub-fields), phone (prefix+number)

Collections: lookup (search entity picker), repeater (repeatable section), inline-table (editable table)

Rich: rich-text (WYSIWYG), code (monospace), json (with validation), signature (canvas)

7 CSS Themes

All components use --ech-* CSS custom properties. Zero hardcoded colors.

| Theme | Category | Description | | ----------------- | -------- | ---------------------------------- | | Dark Default | dark | Blue accents | | Dark Midnight | dark | Deep navy + purple | | Light Clean | light | White + blue | | Light Corporate | light | Professional + teal | | High Contrast | contrast | WCAG AAA — black + yellow | | BNP Paribas Light | light | Brand green #00965E, white panels | | BNP Paribas Dark | dark | Brand green on dark (dealing room) |

FormIntent

Forms are intent-aware — create omits serverManaged/PK fields, edit shows them readonly:

| Intent | PK | serverManaged | required | | ------ | -------- | ------------- | ------------------- | | create | excluded | excluded | model.required - PK | | edit | readonly | excluded | model.required | | view | readonly | shown | none | | filter | optional | excluded | none | | patch | optional | excluded | none |

Mock DataSources

DS Designer kind: mock — 3 behaviors:

• static — return JSON immediately
• http — simulate delay + error rate
• stream — simulate WebSocket (fx-random-walk, sine, random-int, cycle)

Export / Import

• Export JSON — { models, forms, datasources, pages } bundle
• Export TypeScript — generated interfaces + configs
• Import JSON — load bundle → drafts

License

BUSL-1.1