@gnggln/ng-ui-system 1.0.0-alpha.2 → 1.0.0-alpha.21

package/lib/components/http/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * ng-ui-system — HTTP Orchestration Service entry point.
+ *
+ * @example
+ * ```typescript
+ * import {
+ *   UiHttpService,
+ *   UiHttpMessageHandler,
+ *   UI_HTTP_CONFIG,
+ *   UI_HEADERS_PROVIDER,
+ * } from '@gnggln/ng-ui-system';
+ * ```
+ */
+export { UiHttpService } from './http.service';
+export { UiHttpMessageHandler } from './http-message.handler';
+export { UI_HTTP_CONFIG, UI_HEADERS_PROVIDER } from './http.tokens';
+export type { UiHttpConfig, UiHeadersProvider } from './http.types';

package/lib/components/page-header/breadcrumb.service.d.ts

@@ -1,5 +1,5 @@
-import { ActivatedRoute } from '@angular/router';
-import { UiBreadcrumbItem } from './page-header.types';
+import { type ActivatedRoute } from '@angular/router';
+import { type UiBreadcrumbItem } from './page-header.types';
 import * as i0 from "@angular/core";
 /**
  * Service that builds a nested breadcrumb trail from Angular route configuration.

package/lib/components/table/table.types.d.ts

@@ -42,6 +42,11 @@ export interface UiTableColumn {
      * ```
      */
     template?: TemplateRef<unknown>;
+    /**
+     * Template personalizzato per l'intestazione.
+     * Il contesto fornisce: `$implicit` (colonna) e `column` (definizione colonna).
+     */
+    headerTemplate?: TemplateRef<unknown>;
     /** Rende la colonna ordinabile con click sull'header. @default false */
     sortable?: boolean;
     /** Tipo di ordinamento per la logica client-side. @default 'text' */

package/lib/components/toast/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * ng-ui-system — Toast Notifications entry point.
+ *
+ * @example
+ * ```typescript
+ * import { UiToastService, UiToastConfig } from '@gnggln/ng-ui-system';
+ *
+ * const toast = inject(UiToastService);
+ * toast.success('Salvato!');
+ * ```
+ */
+export { UiToastService } from './toast.service';
+export { UiToastComponent } from './toast.component';
+export { UiToastContainerComponent } from './toast-container.component';
+export type { UiToastConfig, UiToastRef, UiToastData, } from './toast.types';
+export type { UiToastPosition } from './toast.types';
+export { UI_TOAST_DEFAULTS } from './toast.types';

package/lib/components/toast/toast-container.component.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Toast container — manages stacking and positioning of active toasts.
+ *
+ * Dynamically attached to the DOM by `UiToastService` on first use.
+ * Renders one `ui-toast` per active notification.
+ *
+ * @selector ui-toast-container
+ * @internal Not intended for direct use.
+ */
+import { ChangeDetectorRef } from '@angular/core';
+import type { UiToastData } from './toast.types';
+import * as i0 from "@angular/core";
+export declare class UiToastContainerComponent {
+    readonly cdr: ChangeDetectorRef;
+    /** Active toasts — managed by UiToastService. */
+    toasts: UiToastData[];
+    /** Called by UiToastService to add a toast. */
+    addToast(toast: UiToastData): void;
+    /** Called by UiToastService to remove a toast. */
+    removeToast(id: string): void;
+    /** Update a toast's state (e.g. entering → exiting). */
+    updateToastState(id: string, state: UiToastData['state']): void;
+    /** Dismiss handler from the toast component. */
+    onDismiss(toast: UiToastData): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UiToastContainerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UiToastContainerComponent, "ui-toast-container", never, {}, {}, never, never, true, never>;
+}

package/lib/components/toast/toast.component.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Individual toast notification element.
+ *
+ * Rendered dynamically by `UiToastContainerComponent`.
+ * Handles its own enter/exit CSS animations and auto-dismiss countdown.
+ *
+ * @selector ui-toast
+ * @internal Not intended for direct use — managed by `UiToastService`.
+ */
+import { EventEmitter, OnInit, OnDestroy } from '@angular/core';
+import type { UiToastType } from '../../core/types/index';
+import * as i0 from "@angular/core";
+export declare class UiToastComponent implements OnInit, OnDestroy {
+    /** Toast message text. */
+    message: string;
+    /** Toast type for styling. */
+    type: UiToastType;
+    /** Animation state. */
+    state: 'entering' | 'visible' | 'exiting';
+    /** Whether the close button is shown. */
+    dismissible: boolean;
+    /** Whether HTML rendering is enabled. */
+    enableHtml: boolean;
+    /** Custom Lucide icon override. */
+    icon?: string;
+    /** Additional CSS class. */
+    customClass?: string;
+    /** Emitted when the user clicks the dismiss button. */
+    dismissed: EventEmitter<void>;
+    private enterTimeout?;
+    /** Resolved icon name based on type. */
+    get resolvedIcon(): string;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UiToastComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UiToastComponent, "ui-toast", never, { "message": { "alias": "message"; "required": false; }; "type": { "alias": "type"; "required": false; }; "state": { "alias": "state"; "required": false; }; "dismissible": { "alias": "dismissible"; "required": false; }; "enableHtml": { "alias": "enableHtml"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "customClass": { "alias": "customClass"; "required": false; }; }, { "dismissed": "dismissed"; }, never, never, true, never>;
+}

package/lib/components/toast/toast.service.d.ts

@@ -0,0 +1,39 @@
+import type { UiToastType } from '../../core/types/index';
+import { UiToastConfig, UiToastRef } from './toast.types';
+import * as i0 from "@angular/core";
+/**
+ * Central toast notification service.
+ *
+ * Manages a single `UiToastContainerComponent` in the DOM and provides
+ * convenience methods for showing typed notifications.
+ */
+export declare class UiToastService {
+    private readonly appRef;
+    private readonly injector;
+    private readonly document;
+    /** Reference to the singleton container component. */
+    private containerRef;
+    /** Show a **success** toast. */
+    success(message: string, config?: UiToastConfig): UiToastRef;
+    /** Show an **error** toast. */
+    error(message: string, config?: UiToastConfig): UiToastRef;
+    /** Show a **warning** toast. */
+    warning(message: string, config?: UiToastConfig): UiToastRef;
+    /** Show an **info** toast. */
+    info(message: string, config?: UiToastConfig): UiToastRef;
+    /** Show a toast with explicit type. */
+    show(message: string, type?: UiToastType, config?: UiToastConfig): UiToastRef;
+    /** Dismiss a specific toast by ID. */
+    dismiss(id: string): void;
+    /** Dismiss all active toasts. */
+    dismissAll(): void;
+    /**
+     * Ensures the container component exists in the DOM.
+     * Creates it lazily on first toast call.
+     */
+    private ensureContainer;
+    /** Apply CSS position modifier class to the container element. */
+    private applyPositionClass;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UiToastService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<UiToastService>;
+}

package/lib/components/toast/toast.types.d.ts

@@ -0,0 +1,52 @@
+/**
+ * @module ng-ui-system/toast
+ * Types and interfaces for the proprietary toast notification system.
+ */
+import type { UiToastType } from '../../core/types/index';
+/** Position of the toast container on screen. */
+export type UiToastPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
+/**
+ * Configuration options for a toast notification.
+ *
+ * @usageNotes
+ * ```typescript
+ * toastService.success('Saved!', { duration: 3000, position: 'bottom-right' });
+ * ```
+ */
+export interface UiToastConfig {
+    /** Toast type (overrides the method-level default). */
+    type?: UiToastType;
+    /** Auto-dismiss duration in milliseconds. `0` = persistent. Default: `5000`. */
+    duration?: number;
+    /** Screen position for this toast. Default: `'top-right'`. */
+    position?: UiToastPosition;
+    /** Whether a close button is shown. Default: `true`. */
+    dismissible?: boolean;
+    /** Allow HTML content in the message. Default: `false`. */
+    enableHtml?: boolean;
+    /** Custom Lucide icon name. Defaults to type-specific icon. */
+    icon?: string;
+    /** Additional CSS class appended to the toast element. */
+    customClass?: string;
+}
+/**
+ * Reference to a live toast instance.
+ * Can be used to dismiss the toast programmatically.
+ */
+export interface UiToastRef {
+    /** Unique identifier for this toast instance. */
+    id: string;
+    /** Dismiss this specific toast. */
+    dismiss: () => void;
+}
+/** @internal Data model for a toast managed by the service. */
+export interface UiToastData {
+    id: string;
+    message: string;
+    type: UiToastType;
+    config: Required<Pick<UiToastConfig, 'duration' | 'position' | 'dismissible' | 'enableHtml'>> & UiToastConfig;
+    state: 'entering' | 'visible' | 'exiting';
+    timeoutId?: ReturnType<typeof setTimeout>;
+}
+/** Defaults applied to every toast unless overridden. */
+export declare const UI_TOAST_DEFAULTS: Required<Pick<UiToastConfig, 'duration' | 'position' | 'dismissible' | 'enableHtml'>>;

package/lib/core/logging/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @module ng-ui-system/core/logging
+ * Sistema di logging centralizzato per componenti ng-ui-system.
+ * Pattern omologato a ActionLoggerService del progetto Siform-PAL.
+ */
+export type { UiLogCategory, UiLogLevel, UiLogEntry, UiLogFilter, UiLogSummary, UiLoggerConfig, } from './logger.types';
+export { UI_LOGGER_DEFAULT_TTL_MS, UI_LOGGER_IDB_NAME, UI_LOGGER_IDB_STORE, UI_LOGGER_IDB_VERSION, UI_LOGGER_MAX_ENTRIES, UI_LOGGER_LEVELS, } from './logger.config';
+export { UiLoggerService } from './logger.service';

package/lib/core/logging/logger.config.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @module ng-ui-system/core/logging
+ * Configurazione IndexedDB per UiLoggerService.
+ * Pattern omologato a action-logger.config.ts del progetto Siform-PAL.
+ */
+import type { UiLogLevel } from './logger.types';
+/** Durata default retention log (7 giorni). */
+export declare const UI_LOGGER_DEFAULT_TTL_MS: number;
+/** Nome database IndexedDB. */
+export declare const UI_LOGGER_IDB_NAME = "ng-ui-system-logs";
+/** Versione database (incrementare su schema change). */
+export declare const UI_LOGGER_IDB_VERSION = 1;
+/** Nome object store. */
+export declare const UI_LOGGER_IDB_STORE = "entries";
+/** Max entry totali per cleanup automatico. */
+export declare const UI_LOGGER_MAX_ENTRIES = 10000;
+/** Livelli di log ordinati per severità crescente. */
+export declare const UI_LOGGER_LEVELS: readonly UiLogLevel[];

package/lib/core/logging/logger.service.d.ts

@@ -0,0 +1,75 @@
+import type { UiLogCategory, UiLogEntry, UiLogFilter, UiLogLevel, UiLogSummary, UiLoggerConfig } from './logger.types';
+import * as i0 from "@angular/core";
+/**
+ * Logger centralizzato per componenti ng-ui-system.
+ * Persiste su IndexedDB con cleanup automatico.
+ */
+export declare class UiLoggerService {
+    private readonly platformId;
+    private dbPromise;
+    /** Stato toggle runtime. */
+    readonly enabled: import("@angular/core").WritableSignal<boolean>;
+    /** Configurazione runtime. */
+    private config;
+    /** True se IndexedDB disponibile e siamo in browser. */
+    private idbSupported;
+    /** Rileva se logging attivo (default: true in dev se non production). */
+    private detectEnabled;
+    /** Abilita/disabilita logging runtime. */
+    setEnabled(value: boolean): void;
+    /** Configura il logger. */
+    configure(config: Partial<UiLoggerConfig>): void;
+    /**
+     * Log generico con controllo enabled e livello.
+     */
+    log(category: UiLogCategory, level: UiLogLevel, action: string, payload?: Record<string, unknown>, duration?: number): void;
+    /**
+     * Log azione form (submit, reset, valueChange, etc).
+     */
+    logFormAction(action: 'init' | 'submit' | 'reset' | 'valueChange' | 'validationChange' | 'customEvent' | 'destroy', payload: {
+        schemaId: string;
+        [key: string]: unknown;
+    }): void;
+    /**
+     * Log azione wizard (stepChange, complete, validationFailed, etc).
+     */
+    logWizardAction(action: 'init' | 'stepChange' | 'stepComplete' | 'stepValidationFailed' | 'complete' | 'navigation' | 'save' | 'valueChange' | 'keyboardNavigation' | 'destroy', payload: {
+        wizardId?: string;
+        step?: number;
+        [key: string]: unknown;
+    }): void;
+    /**
+     * Log errore.
+     */
+    logError(error: Error | unknown, context?: Record<string, unknown>): void;
+    /**
+     * Log debug (solo se enabled e minLevel <= debug).
+     */
+    debug(category: UiLogCategory, action: string, payload?: Record<string, unknown>): void;
+    private persist;
+    /** Recupera userId da localStorage se disponibile. */
+    private getUserId;
+    /** Verifica se il livello deve essere loggato in base a minLevel. */
+    private shouldLogLevel;
+    /**
+     * Recupera log con filtri.
+     */
+    query(filter?: UiLogFilter): Promise<UiLogEntry[]>;
+    /**
+     * Riepilogo log per dashboard.
+     */
+    summary(): Promise<UiLogSummary>;
+    /**
+     * Cancella log più vecchi di TTL.
+     */
+    purgeOld(): Promise<number>;
+    /**
+     * Cancella tutti i log.
+     */
+    clear(): Promise<void>;
+    private openDb;
+    private cleanupIfNeeded;
+    private applyFilter;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UiLoggerService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<UiLoggerService>;
+}

package/lib/core/logging/logger.types.d.ts

@@ -0,0 +1,70 @@
+/**
+ * @module ng-ui-system/core/logging
+ * Tipologie per il sistema di logging centralizzato della libreria.
+ * Pattern omologato a ActionLoggerService del progetto Siform-PAL.
+ */
+/**
+ * Categorie di log per filtraggio e organizzazione.
+ */
+export type UiLogCategory = 'form' | 'wizard' | 'navigation' | 'system' | 'error';
+/**
+ * Livelli di severità log.
+ */
+export type UiLogLevel = 'debug' | 'info' | 'warn' | 'error';
+/**
+ * Entry singola nel log. Persistita su IndexedDB.
+ */
+export interface UiLogEntry {
+    /** ID univoco (timestamp + random). */
+    id: string;
+    /** Categoria log. */
+    category: UiLogCategory;
+    /** Livello severità. */
+    level: UiLogLevel;
+    /** Azione/etichetta descrittiva (es. 'form_submit', 'step_change'). */
+    action: string;
+    /** Payload dati (schema id, step, valori, errori). */
+    payload?: Record<string, unknown>;
+    /** Timestamp creazione (ms). */
+    timestamp: number;
+    /** Durata operazione (ms), opzionale. */
+    duration?: number;
+    /** URL corrente al momento del log. */
+    url: string;
+    /** User ID se disponibile. */
+    userId?: string;
+}
+/**
+ * Filtri per query log.
+ */
+export interface UiLogFilter {
+    category?: UiLogCategory;
+    level?: UiLogLevel;
+    action?: string;
+    from?: number;
+    to?: number;
+    limit?: number;
+}
+/**
+ * Riepilogo log per UI admin/debug.
+ */
+export interface UiLogSummary {
+    total: number;
+    byCategory: Record<UiLogCategory, number>;
+    byLevel: Record<UiLogLevel, number>;
+    oldest: number;
+    newest: number;
+}
+/**
+ * Configurazione runtime del logger.
+ */
+export interface UiLoggerConfig {
+    /** Abilita/disabilita logging. Default: true in dev, false in production. */
+    enabled: boolean;
+    /** Livello minimo da loggare. */
+    minLevel: UiLogLevel;
+    /** Durata retention log in ms. Default: 7 giorni. */
+    ttlMs: number;
+    /** Max entry totali per cleanup automatico. */
+    maxEntries: number;
+}

package/lib/core/types/index.d.ts

@@ -55,3 +55,79 @@ export interface UiAsyncState<T = unknown> {
     data: T | null;
     error: string | null;
 }
+/** Toast notification type. */
+export type UiToastType = 'success' | 'error' | 'warning' | 'info';
+/** Messages configuration for an endpoint (inline, no label archive). */
+export interface UiEndpointMessages {
+    /** Success toast message. Supports `${key}` placeholders replaced at runtime. */
+    success?: string;
+    /** Error toast message. Supports `${key}` placeholders replaced at runtime. */
+    error?: string;
+}
+/**
+ * Extracts a custom error message from the HTTP error response.
+ * Return `null` to fall back to the default message.
+ */
+export type UiErrorExtractor = (error: any) => string | null;
+/**
+ * Dynamically resolves a success message at runtime.
+ * Return `null` to fall back to the default message.
+ */
+export type UiSuccessResolver = () => string | null;
+/**
+ * Query parameters for URL building.
+ * Keys map to query param names; values are auto-converted to strings.
+ */
+export type UiQueryParameters = Record<string, string | string[] | number | number[] | boolean>;
+/**
+ * Endpoint configuration for `UiHttpService`.
+ *
+ * Each endpoint defines its URL, optional inline messages, and
+ * toast/error behaviour. All toast flags default to `false` (opt-in).
+ *
+ * @usageNotes
+ * ### Basic endpoint factory
+ * ```typescript
+ * const SAVE_USER = (): UiEndpoint => ({
+ *   url: '/api/users',
+ *   id: 'user_save',
+ *   showSuccess: true,
+ *   messages: { success: 'Utente salvato!' },
+ * });
+ * ```
+ *
+ * ### Dynamic endpoint with replacements
+ * ```typescript
+ * const UPDATE_ITEM = (id: number): UiEndpoint => ({
+ *   url: `/api/items/${id}`,
+ *   id: 'item_update',
+ *   showSuccess: true,
+ *   showError: true,
+ *   messages: {
+ *     success: 'Elemento ${name} aggiornato',
+ *     error: 'Errore aggiornamento elemento',
+ *   },
+ *   replacements: { name: 'Widget' },
+ * });
+ * ```
+ */
+export interface UiEndpoint {
+    /** Relative or absolute URL for the API call. */
+    url: string;
+    /** Unique identifier for the endpoint (used for debounce keying). */
+    id: string;
+    /** Whether to show a success toast on completion. Default: `false`. */
+    showSuccess?: boolean;
+    /** Whether to show an error toast on failure. Default: `false`. */
+    showError?: boolean;
+    /** Inline messages for success/error toasts. */
+    messages?: UiEndpointMessages;
+    /** Placeholder replacements for message strings (`${key}` → value). */
+    replacements?: Record<string, string | number>;
+    /** Custom error message extractor from the HTTP error response. */
+    errorExtractor?: UiErrorExtractor;
+    /** Custom success message resolver (overrides inline message). */
+    successMessageResolver?: UiSuccessResolver;
+    /** Whether this endpoint should be tracked by BlackBox. Default: `true`. */
+    trackable?: boolean;
+}

package/lib/core/utils/index.d.ts

@@ -27,3 +27,34 @@ export declare function uiCoerceBoolean(value: unknown): boolean;
  * @returns The clamped value.
  */
 export declare function uiClamp(value: number, min: number, max: number): number;
+/**
+ * Removes all `null` and `undefined` values from an object.
+ * Returns a new object — the original is not mutated.
+ *
+ * @param obj - The source object.
+ * @returns A shallow copy with nullish entries removed.
+ *
+ * @example
+ * ```typescript
+ * uiFilterNullish({ a: 1, b: null, c: 'x', d: undefined });
+ * // → { a: 1, c: 'x' }
+ * ```
+ */
+export declare function uiFilterNullish<T extends Record<string, unknown>>(obj: T): Partial<T>;
+/**
+ * Converts a key-value object into a URL query string.
+ * Nullish values are filtered out automatically.
+ *
+ * @param params - Query parameter object.
+ * @returns A query string like `?key=value&key2=value2`, or an empty string if no params.
+ *
+ * @example
+ * ```typescript
+ * uiQueryParamsToPath({ search: 'test', page: 1, active: true });
+ * // → '?search=test&page=1&active=true'
+ *
+ * uiQueryParamsToPath(undefined);
+ * // → ''
+ * ```
+ */
+export declare function uiQueryParamsToPath(params?: Record<string, unknown>): string;

package/lib/version/ng-ui-system-version.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Versione del pacchetto `@gnggln/ng-ui-system` (allineata a `packages/ng-ui-system/package.json`).
+ * Non modificare manualmente: eseguire `npm run version:sync` dalla root del workspace.
+ */
+export declare const NG_UI_SYSTEM_VERSION: "1.0.0-alpha.20";
+/**
+ * Etichetta da mostrare in UI (prefisso `v` + SemVer npm).
+ */
+export declare function ngUiSystemVersionLabel(): string;

package/modal/entry-modal.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Bootstrap del secondary entry `@gnggln/ng-ui-system/modal`. Modal e Confirm Dialog.
+ */
+export * from './lib/components/modal/index';

package/modal/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@gnggln/ng-ui-system/modal" />
+export * from './entry-modal';

package/modal/lib/components/button/button.component.d.ts

@@ -0,0 +1,61 @@
+import { UiVariant, UiSize, UiIconName } from '../../core/types';
+import { UiIconPosition } from './button.types';
+import * as i0 from "@angular/core";
+/**
+ * Standalone button component with design-token-driven theming,
+ * variant/size system, Lucide icon support, loading states, and WCAG 2.1 AA accessibility.
+ *
+ * Uses native `<button>` click events — listen with `(click)` on the host element.
+ *
+ * @selector ui-button
+ *
+ * @example
+ * ```html
+ * <!-- Basic -->
+ * <ui-button label="Save" variant="primary" icon="save" (click)="save()" />
+ *
+ * <!-- Loading -->
+ * <ui-button label="Submitting..." variant="primary" [loading]="true" />
+ *
+ * <!-- Icon-only: tooltip o ariaLabel forniscono il nome accessibile -->
+ * <ui-button icon="trash-2" variant="warn" tooltip="Elimina" (click)="delete()" />
+ * ```
+ */
+export declare class UiButtonComponent {
+    /** Button label text. */
+    label: string;
+    /** Tooltip text shown on hover (uses Angular Material tooltip). */
+    tooltip: string;
+    /** Visual style variant. */
+    variant: UiVariant;
+    /** Size variant. */
+    size: UiSize;
+    /** Lucide icon name. @see https://lucide.dev/icons */
+    icon?: UiIconName;
+    /** Icon position relative to the label. */
+    iconPosition: UiIconPosition;
+    /** Whether the button is in a loading state. Disables interaction and shows spinner. */
+    loading: boolean;
+    /** Whether the button is disabled. */
+    disabled: boolean;
+    /** Expand button to full container width. */
+    fullWidth: boolean;
+    /** HTML button type attribute. */
+    type: 'button' | 'submit' | 'reset';
+    /** Accessible label override (required for icon-only buttons). */
+    ariaLabel?: string;
+    /** Additional CSS class for edge cases. */
+    customClass?: string;
+    /**
+     * Nome accessibile risolto per il pulsante nativo.
+     * Usa `ariaLabel` se impostato; per pulsanti solo icona senza testo visibile
+     * ricade sul `tooltip` (il tooltip Material non sostituisce il nome accessibile).
+     */
+    get effectiveAriaLabel(): string | undefined;
+    /** Computed icon pixel size based on button size. */
+    get iconSize(): number;
+    /** Assembled CSS class string for the native button element. */
+    get buttonClasses(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UiButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UiButtonComponent, "ui-button", never, { "label": { "alias": "label"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconPosition": { "alias": "iconPosition"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "fullWidth": { "alias": "fullWidth"; "required": false; }; "type": { "alias": "type"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "customClass": { "alias": "customClass"; "required": false; }; }, {}, never, ["*"], true, never>;
+}

package/modal/lib/components/button/button.types.d.ts

@@ -0,0 +1,75 @@
+/**
+ * @module ng-ui-system/button
+ * Types and interfaces for UiButton and UiButtonArea components.
+ */
+import { UiVariant, UiSize, UiIconName } from '../../core/types';
+export { UiVariant, UiSize, UiIconName };
+/**
+ * Position of the icon relative to the button label.
+ */
+export type UiIconPosition = 'leading' | 'trailing';
+/**
+ * Descriptor for declarative button configuration in UiButtonArea.
+ *
+ * Allows defining button groups as data structures, enabling
+ * dynamic UI updates through configuration manipulation.
+ *
+ * @usageNotes
+ *
+ * ### Basic usage
+ * ```typescript
+ * const actions: UiButtonDescriptor[] = [
+ *   { id: 'save', label: 'Save', variant: 'primary', icon: 'save', action: () => this.save() },
+ *   { id: 'cancel', label: 'Cancel', variant: 'outline', action: () => this.cancel() },
+ * ];
+ * ```
+ *
+ * ### Dynamic loading state
+ * ```typescript
+ * // Toggle loading on a specific button by mutating the descriptor:
+ * this.actions[0].loading = true;
+ *
+ * // Or use loadingIds on the button area:
+ * this.currentLoadingIds = ['save'];
+ * ```
+ */
+export interface UiButtonDescriptor {
+    /** Unique identifier for programmatic state control (loading, disabled). */
+    id?: string;
+    /** Button label text. */
+    label: string;
+    /** Tooltip text shown on hover. */
+    tooltip?: string;
+    /**
+     * Nome accessibile esplicito (override).
+     * Per pulsanti solo icona senza `label`, se omesso si usa `tooltip` come `aria-label`.
+     */
+    ariaLabel?: string;
+    /**
+     * Click handler. Supports both sync and async callbacks.
+     * Receives the native MouseEvent as argument.
+     */
+    action?: (event?: MouseEvent) => void | Promise<void>;
+    /** Lucide icon name. @see https://lucide.dev/icons */
+    icon?: UiIconName;
+    /** Icon position relative to the label. @default 'trailing' */
+    iconPosition?: UiIconPosition;
+    /** Visual variant. @default 'primary' */
+    variant?: UiVariant;
+    /** Size variant. @default 'md' */
+    size?: UiSize;
+    /** Navigation URL (Angular Router navigateByUrl). */
+    href?: string;
+    /** Whether this button is in a loading state. */
+    loading?: boolean;
+    /** Whether this button is disabled. */
+    disabled?: boolean;
+    /** Whether this button is hidden from the UI. */
+    hidden?: boolean;
+    /** Additional CSS class for edge cases. */
+    customClass?: string;
+}
+/**
+ * Alignment options for UiButtonArea.
+ */
+export type UiButtonAreaAlign = 'start' | 'center' | 'end' | 'between';