@foxeltech/angular-ui 0.2.0 → 0.3.1

package/{index.d.ts → types/foxeltech-angular-ui.d.ts}

@@ -1,46 +1,46 @@
 import * as i0 from '@angular/core';
 import { OnDestroy, Injector, DestroyRef, ApplicationRef, OnInit, AfterViewInit, ChangeDetectorRef, Type, EventEmitter, Provider, ModuleWithProviders, TemplateRef, ViewContainerRef, ElementRef, RendererFactory2, OnChanges, SimpleChanges, AfterContentInit, QueryList, Renderer2, NgZone } from '@angular/core';
 import * as _foxeltech_angular_ui from '@foxeltech/angular-ui';
-import * as i52 from '@angular/material/paginator';
+import * as i53 from '@angular/material/paginator';
 import { MatPaginator } from '@angular/material/paginator';
-import * as i53 from '@angular/material/table';
+import * as i54 from '@angular/material/table';
 import { MatTableDataSource, MatTable } from '@angular/material/table';
 import { HttpClient, HttpEvent, HttpErrorResponse, HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';
 import * as rxjs from 'rxjs';
 import { Observable, Subject } from 'rxjs';
-import * as i39 from '@angular/forms';
+import * as i40 from '@angular/forms';
 import { NgForm, ValidationErrors, NgControl, ControlValueAccessor } from '@angular/forms';
-import * as i55 from '@angular/material/dialog';
+import * as i56 from '@angular/material/dialog';
 import { MatDialogRef, MatDialog } from '@angular/material/dialog';
-import * as i40 from '@angular/router';
+import * as i41 from '@angular/router';
 import { ActivatedRouteSnapshot, RouterStateSnapshot, ResolveFn, CanActivate, Router } from '@angular/router';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import * as i1 from '@ngx-translate/core';
 import { TranslateService } from '@ngx-translate/core';
 import { EChartsOption, ECharts } from 'echarts';
-import * as i46 from 'ngx-vflow';
+import * as i47 from 'ngx-vflow';
 import { Node, Edge, Connection } from 'ngx-vflow';
-import * as i65 from '@angular/cdk/drag-drop';
+import * as i66 from '@angular/cdk/drag-drop';
 import { CdkDragDrop } from '@angular/cdk/drag-drop';
-import * as i38 from '@angular/common';
-import * as i41 from '@danielmoncada/angular-datetime-picker';
-import * as i42 from '@danielmoncada/angular-datetime-picker-moment-adapter';
-import * as i45 from '@dimaslz/ng-heroicons';
-import * as i47 from 'ngx-echarts';
-import * as i48 from '@angular/material/select';
-import * as i49 from '@angular/material/radio';
-import * as i50 from '@angular/material/button';
-import * as i51 from '@angular/material/icon';
-import * as i54 from '@angular/material/snack-bar';
-import * as i56 from '@angular/material/checkbox';
-import * as i57 from '@angular/material/card';
-import * as i58 from '@angular/material/datepicker';
-import * as i59 from '@angular/material/timepicker';
-import * as i60 from '@angular/material/badge';
-import * as i61 from '@angular/material/expansion';
-import * as i62 from '@angular/material/form-field';
-import * as i63 from '@angular/material/menu';
-import * as i64 from '@angular/material/tooltip';
+import * as i39 from '@angular/common';
+import * as i42 from '@danielmoncada/angular-datetime-picker';
+import * as i43 from '@danielmoncada/angular-datetime-picker-moment-adapter';
+import * as i46 from '@dimaslz/ng-heroicons';
+import * as i48 from 'ngx-echarts';
+import * as i49 from '@angular/material/select';
+import * as i50 from '@angular/material/radio';
+import * as i51 from '@angular/material/button';
+import * as i52 from '@angular/material/icon';
+import * as i55 from '@angular/material/snack-bar';
+import * as i57 from '@angular/material/checkbox';
+import * as i58 from '@angular/material/card';
+import * as i59 from '@angular/material/datepicker';
+import * as i60 from '@angular/material/timepicker';
+import * as i61 from '@angular/material/badge';
+import * as i62 from '@angular/material/expansion';
+import * as i63 from '@angular/material/form-field';
+import * as i64 from '@angular/material/menu';
+import * as i65 from '@angular/material/tooltip';
 
 declare abstract class BaseComponent implements OnDestroy {
     protected injector: Injector;
@@ -131,6 +131,7 @@ declare class BaseTableComponent<T = any> extends BaseComponent implements OnIni
         create?: {
             dialog?: Type<{}>;
             size?: string;
+            disableClose?: boolean;
             label?: string;
             title?: string;
             message?: string;
@@ -138,6 +139,7 @@ declare class BaseTableComponent<T = any> extends BaseComponent implements OnIni
         update?: {
             dialog?: Type<{}>;
             size?: string;
+            disableClose?: boolean;
             label?: string;
             title?: string;
             message?: string;
@@ -145,6 +147,7 @@ declare class BaseTableComponent<T = any> extends BaseComponent implements OnIni
         view?: {
             dialog?: Type<{}>;
             size?: string;
+            disableClose?: boolean;
             label?: string;
             title?: string;
             message?: string;
@@ -201,6 +204,40 @@ declare class BaseTableComponent<T = any> extends BaseComponent implements OnIni
     static ɵdir: i0.ɵɵDirectiveDeclaration<BaseTableComponent<any>, never, never, {}, {}, never, never, true, never>;
 }
 
+/**
+ * List + detail-pane counterpart of BaseTableComponent: the page keeps a
+ * selectable row list on one side and a lazily fetched, per-id-cached detail
+ * on the other. Pair it with `<fx-ui-master-detail>` which renders the
+ * two-column shell from this state.
+ *
+ * Subclasses declare where ids and details come from:
+ *   protected override idKey = 'licenseId';
+ *   protected override detailUrl(id: string) { return `/license/${id}`; }
+ * `detailUrl` returning null (the default) means the selected row itself is
+ * the detail and no request is made.
+ */
+declare class BaseMasterDetailComponent<T = any> extends BaseTableComponent<T> {
+    selectedId: string | null;
+    selected: T | null;
+    detailMap: Map<string, any>;
+    detailLoading: Set<string>;
+    constructor(injector: Injector, api: HttpWrapper, modal: any, ref: ChangeDetectorRef);
+    /** Key the row id is read from. Override idOf() instead for composite ids. */
+    protected idKey: string;
+    idOf(row: any): string | null;
+    protected detailUrl(id: string): string | null;
+    /** What the detail pane shows: the fetched detail when cached, else the row. */
+    get detail(): any;
+    get detailBusy(): boolean;
+    setDataSource(result: any): void;
+    /** Keep the previous selection when it survived the new page, else pick row 0. */
+    autoSelectFirst(): void;
+    selectItem(row: T): void;
+    fetchDetail(id: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BaseMasterDetailComponent<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<BaseMasterDetailComponent<any>, never, never, {}, {}, never, never, true, never>;
+}
+
 declare class BaseDialogComponent<T = any> extends BaseComponent implements AfterViewInit, OnInit {
     ref: MatDialogRef<any>;
     bindings: any;
@@ -508,9 +545,9 @@ declare class FxUtils {
  * helpers return `null` for "no meaningful value" and the `toneText` /
  * `toneBg` / `toneBadge` wrappers fall back to a neutral class.
  *
- * The emitted Tailwind utilities are guaranteed by the safelist in the shared
- * tailwind preset (tailwind.config.js) — do not rely on content scanning for
- * these dynamic strings.
+ * Every emitted utility must appear below as a WHOLE literal string — the
+ * Tailwind content scanner (v4 has no safelist) only sees complete class
+ * names. Never rebuild these with string interpolation.
  */
 type Tone = 'critical' | 'danger' | 'warning' | 'success' | 'information';
 /** Severity / risk-level string → tone (Critical & High → danger, Medium → warning, Low → success). */
@@ -784,6 +821,9 @@ declare class InputComponent extends FxComponent<string> implements AfterViewIni
     blurred: EventEmitter<void>;
     focused: EventEmitter<void>;
     suffixClick: EventEmitter<void>;
+    /** Accessible name for the suffix icon button (it renders no text). */
+    suffixAriaLabel: string;
+    readonly fieldId: string;
     showPassword: boolean;
     validateError: ValidationErrors | null;
     constructor(ref: ChangeDetectorRef);
@@ -796,7 +836,7 @@ declare class InputComponent extends FxComponent<string> implements AfterViewIni
     onSuffixClick(): void;
     get displayType(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<InputComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<InputComponent, "fx-ui-input", never, { "label": { "alias": "label"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "type": { "alias": "type"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "errorMessages": { "alias": "errorMessages"; "required": false; }; "required": { "alias": "required"; "required": false; }; "suffixIcon": { "alias": "suffixIcon"; "required": false; }; "class": { "alias": "class"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "validateFn": { "alias": "validateFn"; "required": false; }; }, { "blurred": "blurred"; "focused": "focused"; "suffixClick": "suffixClick"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<InputComponent, "fx-ui-input", never, { "label": { "alias": "label"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "type": { "alias": "type"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "errorMessages": { "alias": "errorMessages"; "required": false; }; "required": { "alias": "required"; "required": false; }; "suffixIcon": { "alias": "suffixIcon"; "required": false; }; "class": { "alias": "class"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "validateFn": { "alias": "validateFn"; "required": false; }; "suffixAriaLabel": { "alias": "suffixAriaLabel"; "required": false; }; }, { "blurred": "blurred"; "focused": "focused"; "suffixClick": "suffixClick"; }, never, never, false, never>;
 }
 
 declare class SelectComponent extends FxComponent<string | string[]> implements AfterViewInit, OnInit, OnChanges {
@@ -819,6 +859,7 @@ declare class SelectComponent extends FxComponent<string | string[]> implements
     }[]>;
     /** Emits the current value when the select panel closes (useful for multiple mode). */
     closed: EventEmitter<string | string[]>;
+    readonly fieldId: string;
     searchTerm: string;
     filteredOptions: {
         label: string;
@@ -848,6 +889,7 @@ interface IRadioButton {
 }
 declare class RadioButtonComponent extends FxComponent<IRadioButton> implements AfterViewInit {
     private ref;
+    readonly groupId: string;
     label?: string;
     tooltip: string;
     required?: boolean;
@@ -926,14 +968,19 @@ declare class ButtonComponent {
     icon?: any;
     class?: any;
     loading: boolean;
+    /** Native button type. Defaults to 'button' so it never implicitly submits a form. */
+    type: 'button' | 'submit' | 'reset';
+    /** Accessible name for icon-only usage (icon set, no label). */
+    ariaLabel: string;
     clicked: EventEmitter<void>;
     onClick(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "fx-ui-button", never, { "label": { "alias": "label"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "buttonVariant": { "alias": "buttonVariant"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "class": { "alias": "class"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; }, { "clicked": "clicked"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "fx-ui-button", never, { "label": { "alias": "label"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "buttonVariant": { "alias": "buttonVariant"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "class": { "alias": "class"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "type": { "alias": "type"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; }, { "clicked": "clicked"; }, never, never, false, never>;
 }
 
 declare class RadioButtonToggleComponent extends FxComponent<any> implements AfterViewInit {
     private ref;
+    readonly groupId: string;
     label?: string;
     required?: boolean;
     options: {
@@ -960,6 +1007,7 @@ declare class DatetimePicker extends FxComponent<any> implements AfterViewInit {
     maxDate?: any;
     errorMessages: ErrorMessages;
     validateFn: (date: string) => ValidationErrors | null;
+    readonly fieldId: string;
     startAt: any;
     constructor(ref: ChangeDetectorRef);
     ngAfterViewInit(): void;
@@ -1014,6 +1062,8 @@ declare class TabGroupComponent implements AfterContentInit {
     constructor(renderer: Renderer2);
     ngAfterContentInit(): void;
     selectTab(index: number): void;
+    /** Roving tablist keyboard nav: arrows move AND activate (selection follows focus). */
+    onTabKeydown(event: KeyboardEvent, index: number): void;
     private updateUnderlinePosition;
     private scrollToActiveTab;
     scroll(direction: 'left' | 'right'): void;
@@ -1157,12 +1207,14 @@ declare class SliderComponent extends FxComponent<any> implements AfterViewInit
 declare class SwitchComponent extends FxComponent<any> implements AfterViewInit {
     private cdr;
     onSwitch: EventEmitter<boolean>;
+    /** Accessible name — the switch renders no visible text of its own. */
+    ariaLabel: string;
     ngAfterViewInit(): void;
     constructor(cdr: ChangeDetectorRef);
     writeValue(value: any): void;
     toggle(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SwitchComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SwitchComponent, "fx-ui-switch", never, {}, { "onSwitch": "onSwitch"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SwitchComponent, "fx-ui-switch", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; }; }, { "onSwitch": "onSwitch"; }, never, never, false, never>;
 }
 
 declare class RichTextAreaComponent extends FxComponent<any> implements AfterViewInit {
@@ -1463,6 +1515,43 @@ declare class SeverityBadgesComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<SeverityBadgesComponent, "fx-ui-severity-badges", never, { "stats": { "alias": "stats"; "required": false; }; "showZero": { "alias": "showZero"; "required": false; }; "suffixed": { "alias": "suffixed"; "required": false; }; }, { "badgeClick": "badgeClick"; }, never, never, false, never>;
 }
 
+/**
+ * Two-column master-detail shell driven by a BaseMasterDetailComponent.
+ * The host page projects its own header/filters and supplies templates for
+ * the parts that vary per entity:
+ *
+ *   <fx-ui-master-detail [table]="this" [emptyMessage]="'noData' | translate">
+ *     <div mdHeader>…title / stat cards…</div>
+ *     <div mdFilters>…search bar / filter chips…</div>
+ *     <ng-template #row let-item let-selected="selected">…row body…</ng-template>
+ *     <ng-template #detail let-detail>…detail pane…</ng-template>
+ *   </fx-ui-master-detail>
+ *
+ * The list behaves as a single-select listbox: the selected option is the
+ * tab stop, ArrowUp/Down/Home/End move the selection.
+ */
+declare class MasterDetailComponent implements AfterViewInit {
+    table: BaseMasterDetailComponent<any>;
+    /** Fixed list-pane width on lg+ viewports (stacked full-width below). */
+    listWidth: string;
+    maxListHeight: string;
+    pageSizeOptions: number[];
+    /** Labels come in via inputs — the lib carries no i18n. */
+    emptyMessage: string;
+    listLabel: string;
+    skeletonCards: number;
+    rowTemplate: TemplateRef<any>;
+    detailTemplate: TemplateRef<any>;
+    paginator: MatPaginator;
+    readonly uid: string;
+    ngAfterViewInit(): void;
+    isSelected(row: any): boolean;
+    optionId(index: number): string;
+    onKeydown(event: KeyboardEvent, index: number): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MasterDetailComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MasterDetailComponent, "fx-ui-master-detail", never, { "table": { "alias": "table"; "required": false; }; "listWidth": { "alias": "listWidth"; "required": false; }; "maxListHeight": { "alias": "maxListHeight"; "required": false; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; }; "listLabel": { "alias": "listLabel"; "required": false; }; "skeletonCards": { "alias": "skeletonCards"; "required": false; }; }, {}, ["rowTemplate", "detailTemplate"], ["[mdHeader]", "[mdFilters]"], false, never>;
+}
+
 declare class ConfirmationDialogComponent {
     private ref;
     bindings: any;
@@ -1489,9 +1578,9 @@ declare const MY_MOMENT_FORMATS: {
 };
 declare class UiModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<UiModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<UiModule, [typeof InputComponent, typeof SelectComponent, typeof RadioButtonComponent, typeof CheckboxComponent, typeof DndUploadComponent, typeof ButtonComponent, typeof RadioButtonToggleComponent, typeof DatetimePicker, typeof LoadingPanel, typeof SearchBarComponent, typeof TabGroupComponent, typeof TabComponent, typeof HeroIconComponent, typeof ToastComponent, typeof ToastContainerComponent, typeof TagComponent, typeof ChartComponent, typeof SliderComponent, typeof SwitchComponent, typeof RichTextAreaComponent, typeof SkeletonTableLoadingComponent, typeof FlowConnection, typeof CircleProgressBar, typeof TreeDiagram, typeof TableCell, typeof KanbanBoardComponent, typeof DrawerComponent, typeof SkeletonListComponent, typeof SkeletonDetailComponent, typeof StatCardsComponent, typeof EmptyStateComponent, typeof FilterChipsComponent, typeof MeterComponent, typeof SectionCardComponent, typeof InfoFieldComponent, typeof SeverityBadgesComponent, typeof ConfirmationDialogComponent], [typeof i38.CommonModule, typeof i39.FormsModule, typeof i39.ReactiveFormsModule, typeof i40.RouterModule, typeof i41.OwlDateTimeModule, typeof i41.OwlNativeDateTimeModule, typeof i42.OwlMomentDateTimeModule, typeof HasPermissionDirective, typeof TrimOnBlurDirective, typeof i45.NgHeroiconsModule, typeof i46.VflowComponent, typeof i46.HandleComponent, typeof i46.ResizableComponent, typeof i46.SelectableDirective, typeof i46.MiniMapComponent, typeof i46.NodeToolbarComponent, typeof i46.CustomTemplateEdgeComponent, typeof i46.DragHandleDirective, typeof i46.ConnectionControllerDirective, typeof i46.NodeHtmlTemplateDirective, typeof i46.NodeSvgTemplateDirective, typeof i46.GroupNodeTemplateDirective, typeof i46.EdgeLabelHtmlTemplateDirective, typeof i46.EdgeTemplateDirective, typeof i46.ConnectionTemplateDirective, typeof i46.HandleTemplateDirective, typeof i47.NgxEchartsModule, typeof i48.MatSelectModule, typeof i49.MatRadioModule, typeof i50.MatButtonModule, typeof i51.MatIconModule, typeof i52.MatPaginatorModule, typeof i53.MatTableModule, typeof i54.MatSnackBarModule, typeof i55.MatDialogModule, typeof i56.MatCheckboxModule, typeof i57.MatCardModule, typeof i58.MatDatepickerModule, typeof i59.MatTimepickerModule, typeof i60.MatBadgeModule, typeof i61.MatExpansionModule, typeof i62.MatFormFieldModule, typeof i63.MatMenuModule, typeof i64.MatTooltipModule, typeof i65.DragDropModule], [typeof InputComponent, typeof SelectComponent, typeof RadioButtonComponent, typeof CheckboxComponent, typeof DndUploadComponent, typeof ButtonComponent, typeof RadioButtonToggleComponent, typeof DatetimePicker, typeof LoadingPanel, typeof SearchBarComponent, typeof TabGroupComponent, typeof TabComponent, typeof HeroIconComponent, typeof ToastComponent, typeof ToastContainerComponent, typeof TagComponent, typeof ChartComponent, typeof SliderComponent, typeof SwitchComponent, typeof RichTextAreaComponent, typeof SkeletonTableLoadingComponent, typeof FlowConnection, typeof CircleProgressBar, typeof TreeDiagram, typeof TableCell, typeof KanbanBoardComponent, typeof DrawerComponent, typeof SkeletonListComponent, typeof SkeletonDetailComponent, typeof StatCardsComponent, typeof EmptyStateComponent, typeof FilterChipsComponent, typeof MeterComponent, typeof SectionCardComponent, typeof InfoFieldComponent, typeof SeverityBadgesComponent, typeof ConfirmationDialogComponent, typeof i39.FormsModule, typeof i39.ReactiveFormsModule, typeof i40.RouterModule, typeof i41.OwlDateTimeModule, typeof i41.OwlNativeDateTimeModule, typeof HasPermissionDirective, typeof i45.NgHeroiconsModule, typeof i48.MatSelectModule, typeof i49.MatRadioModule, typeof i50.MatButtonModule, typeof i51.MatIconModule, typeof i52.MatPaginatorModule, typeof i53.MatTableModule, typeof i54.MatSnackBarModule, typeof i55.MatDialogModule, typeof i56.MatCheckboxModule, typeof i57.MatCardModule, typeof i58.MatDatepickerModule, typeof i59.MatTimepickerModule, typeof i60.MatBadgeModule, typeof i61.MatExpansionModule, typeof i62.MatFormFieldModule, typeof i63.MatMenuModule, typeof i64.MatTooltipModule, typeof i65.DragDropModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<UiModule, [typeof InputComponent, typeof SelectComponent, typeof RadioButtonComponent, typeof CheckboxComponent, typeof DndUploadComponent, typeof ButtonComponent, typeof RadioButtonToggleComponent, typeof DatetimePicker, typeof LoadingPanel, typeof SearchBarComponent, typeof TabGroupComponent, typeof TabComponent, typeof HeroIconComponent, typeof ToastComponent, typeof ToastContainerComponent, typeof TagComponent, typeof ChartComponent, typeof SliderComponent, typeof SwitchComponent, typeof RichTextAreaComponent, typeof SkeletonTableLoadingComponent, typeof FlowConnection, typeof CircleProgressBar, typeof TreeDiagram, typeof TableCell, typeof KanbanBoardComponent, typeof DrawerComponent, typeof SkeletonListComponent, typeof SkeletonDetailComponent, typeof StatCardsComponent, typeof EmptyStateComponent, typeof FilterChipsComponent, typeof MeterComponent, typeof SectionCardComponent, typeof InfoFieldComponent, typeof SeverityBadgesComponent, typeof MasterDetailComponent, typeof ConfirmationDialogComponent], [typeof i39.CommonModule, typeof i40.FormsModule, typeof i40.ReactiveFormsModule, typeof i41.RouterModule, typeof i42.OwlDateTimeModule, typeof i42.OwlNativeDateTimeModule, typeof i43.OwlMomentDateTimeModule, typeof HasPermissionDirective, typeof TrimOnBlurDirective, typeof i46.NgHeroiconsModule, typeof i47.VflowComponent, typeof i47.HandleComponent, typeof i47.ResizableComponent, typeof i47.SelectableDirective, typeof i47.MiniMapComponent, typeof i47.NodeToolbarComponent, typeof i47.CustomTemplateEdgeComponent, typeof i47.DragHandleDirective, typeof i47.ConnectionControllerDirective, typeof i47.NodeHtmlTemplateDirective, typeof i47.NodeSvgTemplateDirective, typeof i47.GroupNodeTemplateDirective, typeof i47.EdgeLabelHtmlTemplateDirective, typeof i47.EdgeTemplateDirective, typeof i47.ConnectionTemplateDirective, typeof i47.HandleTemplateDirective, typeof i48.NgxEchartsModule, typeof i49.MatSelectModule, typeof i50.MatRadioModule, typeof i51.MatButtonModule, typeof i52.MatIconModule, typeof i53.MatPaginatorModule, typeof i54.MatTableModule, typeof i55.MatSnackBarModule, typeof i56.MatDialogModule, typeof i57.MatCheckboxModule, typeof i58.MatCardModule, typeof i59.MatDatepickerModule, typeof i60.MatTimepickerModule, typeof i61.MatBadgeModule, typeof i62.MatExpansionModule, typeof i63.MatFormFieldModule, typeof i64.MatMenuModule, typeof i65.MatTooltipModule, typeof i66.DragDropModule], [typeof InputComponent, typeof SelectComponent, typeof RadioButtonComponent, typeof CheckboxComponent, typeof DndUploadComponent, typeof ButtonComponent, typeof RadioButtonToggleComponent, typeof DatetimePicker, typeof LoadingPanel, typeof SearchBarComponent, typeof TabGroupComponent, typeof TabComponent, typeof HeroIconComponent, typeof ToastComponent, typeof ToastContainerComponent, typeof TagComponent, typeof ChartComponent, typeof SliderComponent, typeof SwitchComponent, typeof RichTextAreaComponent, typeof SkeletonTableLoadingComponent, typeof FlowConnection, typeof CircleProgressBar, typeof TreeDiagram, typeof TableCell, typeof KanbanBoardComponent, typeof DrawerComponent, typeof SkeletonListComponent, typeof SkeletonDetailComponent, typeof StatCardsComponent, typeof EmptyStateComponent, typeof FilterChipsComponent, typeof MeterComponent, typeof SectionCardComponent, typeof InfoFieldComponent, typeof SeverityBadgesComponent, typeof MasterDetailComponent, typeof ConfirmationDialogComponent, typeof i40.FormsModule, typeof i40.ReactiveFormsModule, typeof i41.RouterModule, typeof i42.OwlDateTimeModule, typeof i42.OwlNativeDateTimeModule, typeof HasPermissionDirective, typeof i46.NgHeroiconsModule, typeof i49.MatSelectModule, typeof i50.MatRadioModule, typeof i51.MatButtonModule, typeof i52.MatIconModule, typeof i53.MatPaginatorModule, typeof i54.MatTableModule, typeof i55.MatSnackBarModule, typeof i56.MatDialogModule, typeof i57.MatCheckboxModule, typeof i58.MatCardModule, typeof i59.MatDatepickerModule, typeof i60.MatTimepickerModule, typeof i61.MatBadgeModule, typeof i62.MatExpansionModule, typeof i63.MatFormFieldModule, typeof i64.MatMenuModule, typeof i65.MatTooltipModule, typeof i66.DragDropModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<UiModule>;
 }
 
-export { AuthInterceptor, AuthStateService, BaseComponent, BaseDialogComponent, BaseResolver, BaseTableComponent, BreadcrumbService, ButtonComponent, ChartComponent, CheckboxComponent, CircleProgressBar, ConfirmationDialogComponent, DatetimePicker, DndUploadComponent, DrawerComponent, EmptyStateComponent, FilterChipsComponent, FlowConnection, FxLoadingService, FxStorageService, FxToastrService, FxUtils, FxValidators, HasPermissionDirective, HeroIconComponent, HttpLoaderFactory, HttpWrapper, InfoFieldComponent, InputComponent, KanbanBoardComponent, LoadingPanel, MY_MOMENT_FORMATS, MeterComponent, NotificationService, PermissionGuard, PermissionService, QuillStyleLoaderService, RadioButtonComponent, RadioButtonToggleComponent, RealtimeTableSync, RichTextAreaComponent, SearchBarComponent, SectionCardComponent, SelectComponent, SeverityBadgesComponent, SkeletonDetailComponent, SkeletonListComponent, SkeletonTableLoadingComponent, SliderComponent, StatCardsComponent, SwitchComponent, TabComponent, TabGroupComponent, TableCell, TagComponent, ThemeService, ToastComponent, ToastContainerComponent, TranslationModule, TranslationService, TreeDiagram, TrimOnBlurDirective, UiModule, countTone, createApi, fxListResolver, scoreTone, severityTone, toneBadge, toneBg, toneColor, toneText };
+export { AuthInterceptor, AuthStateService, BaseComponent, BaseDialogComponent, BaseMasterDetailComponent, BaseResolver, BaseTableComponent, BreadcrumbService, ButtonComponent, ChartComponent, CheckboxComponent, CircleProgressBar, ConfirmationDialogComponent, DatetimePicker, DndUploadComponent, DrawerComponent, EmptyStateComponent, FilterChipsComponent, FlowConnection, FxLoadingService, FxStorageService, FxToastrService, FxUtils, FxValidators, HasPermissionDirective, HeroIconComponent, HttpLoaderFactory, HttpWrapper, InfoFieldComponent, InputComponent, KanbanBoardComponent, LoadingPanel, MY_MOMENT_FORMATS, MasterDetailComponent, MeterComponent, NotificationService, PermissionGuard, PermissionService, QuillStyleLoaderService, RadioButtonComponent, RadioButtonToggleComponent, RealtimeTableSync, RichTextAreaComponent, SearchBarComponent, SectionCardComponent, SelectComponent, SeverityBadgesComponent, SkeletonDetailComponent, SkeletonListComponent, SkeletonTableLoadingComponent, SliderComponent, StatCardsComponent, SwitchComponent, TabComponent, TabGroupComponent, TableCell, TagComponent, ThemeService, ToastComponent, ToastContainerComponent, TranslationModule, TranslationService, TreeDiagram, TrimOnBlurDirective, UiModule, countTone, createApi, fxListResolver, scoreTone, severityTone, toneBadge, toneBg, toneColor, toneText };
 export type { Breadcrumb, ColumnChangedEvent, FxApiClass, FxFilterChipOption, FxListRequest, FxListResolverContext, FxSeverityBadge, FxStatCard, IChartType, IRadioButton, KanbanColumn, NotificationCallback, NotificationConnectOptions, RealtimeTableEvent, RealtimeTableSyncOptions, TableResult, TagType, ToastData, Tone, TreeNode, UploadResult };

package/utilities.css

@@ -0,0 +1,24 @@
+/*
+ * Shared composable utilities (v4 @utility) — kept OUT of components.css
+ * because that file is imported inside layer(components) and @utility must
+ * be top-level/unlayered. Usable both in markup and via @apply.
+ */
+@utility txt-tag-common {
+  @apply font-semibold text-xs;
+}
+
+@utility btn-common {
+  @apply flex text-sm h-10 font-semibold px-xl py-normal items-center justify-center rounded-lg shadow-sm transition-all duration-200 disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed;
+}
+
+@utility btn-menu-common {
+  @apply flex flex-row items-center px-semi;
+}
+
+@utility card-common {
+  @apply text-left px-xl py-large border border-border-default rounded-lg shadow-sm transition-colors duration-500 ease-in-out;
+}
+
+@utility tag-common {
+  @apply flex min-w-7 px-[10px] py-[2px] leading-5 hover:opacity-70 items-center justify-center;
+}

package/tailwind-config.d.ts

@@ -1,4 +0,0 @@
-declare module '@fx/ui/tailwind.config' {
-  const config: any;
-  export default config;
-}

package/tailwind.config.js

@@ -1,113 +0,0 @@
-module.exports = {
-  // Tone utilities are built dynamically (`text-${tone}`) by value-tone.util
-  // and fx-ui components, so content scanning can't see them — safelist keeps
-  // them generated in every host app.
-  safelist: [
-    { pattern: /^(text|bg)-(critical|danger|warning|success|information)$/ },
-    ...['critical', 'danger', 'warning', 'success', 'information'].map((t) => `bg-${t}/10`),
-    // Classes emitted from fx-ui component TypeScript (not scannable content):
-    'text-text-secondary',
-    'text-text-primary',
-    'text-text-focus',
-    'bg-bg-hover',
-    'bg-text-primary',
-    'hover:bg-gradient-primary-start/10',
-    'hover:text-gradient-primary-start',
-    'hover:opacity-50',
-    'font-mono',
-    'break-all',
-  ],
-  theme: {
-    extend: {
-      colors: {
-        'gradient-primary-start': 'rgb(var(--gradient-primary-start) / <alpha-value>)',
-        'gradient-primary-end': 'rgb(var(--gradient-primary-end) / <alpha-value>)',
-        'gradient-success-start': 'rgb(var(--gradient-success-start) / <alpha-value>)',
-        'gradient-success-end': 'rgb(var(--gradient-success-end) / <alpha-value>)',
-        primary: 'rgb(var(--primary) / <alpha-value>)',
-        success: 'rgb(var(--success) / <alpha-value>)',
-        danger: 'rgb(var(--danger) / <alpha-value>)',
-        warning: 'rgb(var(--warning) / <alpha-value>)',
-        critical: 'rgb(var(--critical) / <alpha-value>)',
-        discovery: 'rgb(var(--discovery) / <alpha-value>)',
-        information: 'rgb(var(--information) / <alpha-value>)',
-        bg: {
-          primary: 'rgb(var(--bg-primary) / <alpha-value>)',
-          canvas: 'rgb(var(--bg-canvas) / <alpha-value>)',
-          hover: 'rgb(var(--bg-primary-hover) / <alpha-value>)',
-          error: 'rgb(var(--bg-error-bold) / <alpha-value>)',
-          hover2: 'rgb(var(--bg-secondary-hover) / <alpha-value>)',
-        },
-        text: {
-          primary: 'rgb(var(--text-primary) / <alpha-value>)',
-          secondary: 'rgb(var(--text-secondary) / <alpha-value>)',
-          placeholder: 'rgb(var(--text-placeholder) / <alpha-value>)',
-          selected: 'rgb(var(--text-selected-primary) / <alpha-value>)',
-          focus: 'rgb(var(--text-focus) / <alpha-value>)',
-          inverse: 'rgb(var(--text-inverse) / <alpha-value>)',
-          error: 'rgb(var(--text-error) / <alpha-value>)',
-          link: 'rgb(var(--text-link-primary) / <alpha-value>)',
-        },
-        border: {
-          default: 'rgb(var(--border-default) / <alpha-value>)',
-          interactive: 'rgb(var(--border-interactive) / <alpha-value>)',
-          selected: 'rgb(var(--border-selected) / <alpha-value>)',
-          strong: 'rgb(var(--border-strong) / <alpha-value>)',
-          hover2: 'rgb(var(--border-secondary-hover) / <alpha-value>)'
-        },
-        button: {
-          default: 'rgb(var(--button-default) / <alpha-value>)',
-          primary: 'rgb(var(--button-primary) / <alpha-value>)',
-        },
-      },
-      backgroundImage: {
-        'gradient-primary':
-          'linear-gradient(135deg, rgb(var(--gradient-primary-start)) 0%, rgb(var(--gradient-primary-end)) 100%)',
-        'gradient-success':
-          'linear-gradient(135deg, rgb(var(--gradient-success-start)) 0%, rgb(var(--gradient-success-end)) 100%)',
-      },
-      screens: {
-        sm: '480px',
-        md: '720px',
-        lg: '1080px',
-        xl: '1920px'
-      },
-      boxShadow: {
-        sm: '0 1px 2px 0 rgb(var(--shadow-color) / 0.05)',
-        DEFAULT: '0 1px 3px 0 rgb(var(--shadow-color) / 0.1), 0 1px 2px -1px rgb(var(--shadow-color) / 0.1)',
-        md: '0 4px 6px -1px rgb(var(--shadow-color) / 0.1), 0 2px 4px -2px rgb(var(--shadow-color) / 0.1)',
-        lg: '0 10px 15px -3px rgb(var(--shadow-color) / 0.1), 0 4px 6px -4px rgb(var(--shadow-color) / 0.1)',
-        xl: '0 20px 25px -5px rgb(var(--shadow-color) / 0.1), 0 10px 10px -5px rgb(var(--shadow-color) / 0.1)',
-        '2xl': '0 25px 50px -12px rgb(var(--shadow-color) / 0.25)',
-        inner: 'inset 0 2px 4px 0 rgb(var(--shadow-color) / 0.05)',
-      },
-      spacing: {
-        xs: '0.125rem',
-        small: '0.25rem',
-        normal: '0.5rem',
-        semi: '0.75rem',
-        large: '1rem',
-        xl: '1.25rem',
-        '2xl': '1.5rem',
-      },
-      fontFamily:{
-        spmono: ['SpaceMonoRegular', 'monospace'],
-        dmsans: ['DMSans', 'sans-serif'],
-        orbitron: ['Orbitron', 'sans-serif'],
-        bevn: ['BeVietnamPro', 'sans-serif'],
-        roboto: ['Roboto', 'sans-serif'],
-      },
-      fontSize: {
-        xs: '0.75rem',
-        sm: '0.875rem',
-        base: '1rem',
-        xl: '1.25rem',
-        '2xl': '1.625rem',
-        '3xl': '2rem',
-        '4xl': '2.25rem',
-        '5xl': '3rem',
-      }
-    },
-  },
-  plugins: [],
-};