@echelon-framework/widgets-core

15+ generic UI widgets for Echelon — tables, forms, modals, tabs, sidebars, action bars.

Part of the Echelon Framework — Angular-based, config-driven dashboard & low-code platform.

Installation

npm install @echelon-framework/widgets-core

Usage

import {
  DataTableComponent,
  ValidatedFormComponent,
  ActionsBarComponent,
  // ...
} from '@echelon-framework/widgets-core';

provideEchelon({
  widgets: [DataTableComponent, ValidatedFormComponent, ActionsBarComponent, ...],
});

Widget catalog

| Widget | Type | Description | | -------------- | ----------------- | ------------------------------------------------------------- | | DataTable | data-table | Sortable, filterable data table with row selection | | ValidatedForm | validated-form | Form with field-level validation (required, min/max, pattern) | | ActionsBar | actions-bar | Button bar (primary/secondary/danger variants) | | FilterForm | filter-form | Search + filter inputs with chip display | | EntityHeader | entity-header | Detail page header (name, subtitle, status badge) | | TabStrip | tab-strip | Horizontal tabs with active state | | Pagination | pagination | Page navigation (prev/next/page numbers) | | PageToolbar | page-toolbar | Top bar with title, actions, breadcrumb | | EditableTable | editable-table | Inline-editable data table | | ProfileForm | profile-form | Card-style form for entity details | | EntityList | entity-list | Master list with search + click-to-select | | ContextSidebar | context-sidebar | Collapsible sidebar with sections | | SectionHeader | section-header | Section title with optional description | | KvList | kv-list | Key-value display (dl grid) | | BoolChips | bool-chips | Boolean tag chips (yes/no indicators) | | Modal | modal | Dialog overlay with header/body/footer | | ModalForm | modal-form | Modal with embedded form |

Widget binding

// In PageBuilder
.widget('table', { x: 0, y: 0, w: 12 },
  widget.any('data-table', {
    bind: { rows: 'clientsList' },          // DataBus binding
    options: { columns: [...], sortable: true },  // static config
    when: { path: 'clientsList', exists: true },  // conditional visibility
  }))

ValidatedForm fields

interface FormFieldDef {
  id: string;
  label: string;
  type: FieldType; // text | email | number | password | date | textarea | select | checkbox
  required?: boolean;
  min?: number;
  max?: number;
  minLength?: number;
  maxLength?: number;
  pattern?: string;
  options?: { value: string; label: string }[]; // for select
  section?: string; // group fields into sections
  readonly?: boolean;
  width?: number; // 1-12 grid columns
  defaultValue?: unknown;
}

License

BUSL-1.1