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

package/fesm2022/gnggln-ng-ui-system-button.mjs

@@ -0,0 +1,1148 @@
+import * as i0 from '@angular/core';
+import { Component, ChangeDetectionStrategy, ViewEncapsulation, Input, inject, PLATFORM_ID, Injectable, NgZone } from '@angular/core';
+import * as i1 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i2 from 'lucide-angular';
+import { LucideAngularModule } from 'lucide-angular';
+import { Router, NavigationEnd } from '@angular/router';
+import { isPlatformBrowser } from '@angular/common';
+import { Subject } from 'rxjs';
+import { filter, takeUntil } from 'rxjs/operators';
+
+/** @internal Size-to-icon-pixel mapping for consistent icon sizing. */
+const ICON_SIZE_MAP = {
+    xs: 14,
+    sm: 16,
+    md: 18,
+    lg: 20,
+    xl: 22,
+};
+/**
+ * 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()" />
+ * ```
+ */
+class UiButtonComponent {
+    constructor() {
+        /** Button label text. */
+        this.label = '';
+        /** Tooltip text shown on hover (uses Angular Material tooltip). */
+        this.tooltip = '';
+        /** Visual style variant. */
+        this.variant = 'primary';
+        /** Size variant. */
+        this.size = 'md';
+        /** Icon position relative to the label. */
+        this.iconPosition = 'trailing';
+        /** Whether the button is in a loading state. Disables interaction and shows spinner. */
+        this.loading = false;
+        /** Whether the button is disabled. */
+        this.disabled = false;
+        /** Expand button to full container width. */
+        this.fullWidth = false;
+        /** HTML button type attribute. */
+        this.type = 'button';
+    }
+    /**
+     * 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() {
+        const explicit = this.ariaLabel?.trim();
+        if (explicit)
+            return explicit;
+        if (this.label?.trim())
+            return undefined;
+        const tip = this.tooltip?.trim();
+        if (this.icon && tip)
+            return tip;
+        return undefined;
+    }
+    /** Computed icon pixel size based on button size. */
+    get iconSize() {
+        return ICON_SIZE_MAP[this.size] ?? 18;
+    }
+    /** Assembled CSS class string for the native button element. */
+    get buttonClasses() {
+        return [
+            'ui-button',
+            `ui-button--${this.variant}`,
+            `ui-button--${this.size}`,
+            this.loading ? 'ui-button--loading' : '',
+            this.fullWidth ? 'ui-button--full-width' : '',
+            !this.label && this.icon ? 'ui-button--icon-only' : '',
+            this.customClass ?? '',
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: UiButtonComponent, isStandalone: true, selector: "ui-button", inputs: { label: "label", tooltip: "tooltip", variant: "variant", size: "size", icon: "icon", iconPosition: "iconPosition", loading: "loading", disabled: "disabled", fullWidth: "fullWidth", type: "type", ariaLabel: "ariaLabel", customClass: "customClass" }, host: { properties: { "class.ui-button-host--full-width": "fullWidth" }, classAttribute: "ui-button-host" }, ngImport: i0, template: `
+    <button
+      [type]="type"
+      [class]="buttonClasses"
+      [disabled]="disabled || loading"
+      [attr.aria-label]="effectiveAriaLabel || null"
+      [attr.aria-busy]="loading || null"
+      [matTooltip]="tooltip"
+    >
+      <span class="ui-button__content" [class.ui-button__content--hidden]="loading">
+        @if (icon && iconPosition === 'leading') {
+          <lucide-icon [name]="icon!" [size]="iconSize" aria-hidden="true" />
+        }
+        @if (label) {
+          <span class="ui-button__label">{{ label }}</span>
+        }
+        <ng-content />
+        @if (icon && iconPosition === 'trailing') {
+          <lucide-icon [name]="icon!" [size]="iconSize" aria-hidden="true" />
+        }
+      </span>
+      @if (loading) {
+        <span class="ui-button__spinner-overlay">
+          <span class="ui-button__spinner" aria-hidden="true"></span>
+          <span class="ui-button__sr-only">Loading</span>
+        </span>
+      }
+    </button>
+  `, isInline: true, styles: [".ui-button-host{display:inline-flex}.ui-button-host--full-width{display:flex;width:100%}.ui-button{appearance:none;border:none;cursor:pointer;font-family:var(--ui-font-family);font-weight:var(--ui-font-weight-medium);letter-spacing:.01em;position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--ui-radius-md);white-space:nowrap;text-decoration:none;overflow:hidden;transition:background-color var(--ui-transition-fast),color var(--ui-transition-fast),border-color var(--ui-transition-fast),box-shadow var(--ui-transition-fast),opacity var(--ui-transition-fast)}.ui-button:focus{outline:none}.ui-button:focus-visible{outline:var(--ui-focus-ring-width) solid var(--ui-focus-ring-color);outline-offset:var(--ui-focus-ring-offset)}.ui-button:disabled{opacity:.5;cursor:not-allowed}.ui-button--full-width{width:100%}.ui-button--xs{height:28px;padding:0 var(--ui-spacing-2);font-size:var(--ui-font-size-xs);border-radius:var(--ui-radius-sm);gap:var(--ui-spacing-1)}.ui-button--sm{height:32px;padding:0 var(--ui-spacing-3);font-size:var(--ui-font-size-xs);gap:6px}.ui-button--md{height:36px;padding:0 var(--ui-spacing-4);font-size:var(--ui-font-size-sm);gap:var(--ui-spacing-2)}.ui-button--lg{height:40px;padding:0 var(--ui-spacing-5);font-size:var(--ui-font-size-sm);gap:var(--ui-spacing-2)}.ui-button--xl{height:48px;padding:0 var(--ui-spacing-6);font-size:var(--ui-font-size-md);gap:var(--ui-spacing-3)}.ui-button--icon-only.ui-button--xs{width:28px;padding:0}.ui-button--icon-only.ui-button--sm{width:32px;padding:0}.ui-button--icon-only.ui-button--md{width:36px;padding:0}.ui-button--icon-only.ui-button--lg{width:40px;padding:0}.ui-button--icon-only.ui-button--xl{width:48px;padding:0}.ui-button--primary{background:var(--ui-color-primary);color:var(--ui-color-primary-contrast)}.ui-button--primary:hover:not(:disabled){background:var(--ui-color-primary-hover)}.ui-button--primary:active:not(:disabled){background:var(--ui-color-primary-active)}.ui-button--accent{background:var(--ui-color-accent);color:var(--ui-color-accent-contrast)}.ui-button--accent:hover:not(:disabled){background:var(--ui-color-accent-hover)}.ui-button--accent:active:not(:disabled){background:var(--ui-color-accent-active)}.ui-button--warn{background:var(--ui-color-warn);color:var(--ui-color-warn-contrast)}.ui-button--warn:hover:not(:disabled){background:var(--ui-color-warn-hover)}.ui-button--warn:active:not(:disabled){background:var(--ui-color-warn-active)}.ui-button--neutral{background:var(--ui-color-neutral-200);color:var(--ui-color-text)}.ui-button--neutral:hover:not(:disabled){background:var(--ui-color-neutral-300)}.ui-button--neutral:active:not(:disabled){background:var(--ui-color-neutral-400);color:var(--ui-color-text-inverse)}.ui-button--ghost{background:transparent;color:var(--ui-color-text-secondary)}.ui-button--ghost:hover:not(:disabled){background:var(--ui-color-surface-hover);color:var(--ui-color-text)}.ui-button--ghost:active:not(:disabled){background:var(--ui-color-neutral-200)}.ui-button--outline{background:transparent;color:var(--ui-color-primary);border:1.5px solid var(--ui-color-border-strong)}.ui-button--outline:hover:not(:disabled){background:var(--ui-color-primary-light);border-color:var(--ui-color-primary)}.ui-button--outline:active:not(:disabled){background:var(--ui-color-primary-light);border-color:var(--ui-color-primary-hover)}.ui-button--loading{cursor:wait;pointer-events:none}.ui-button__content{display:inline-flex;align-items:center;gap:inherit;transition:visibility var(--ui-transition-fast)}.ui-button__content--hidden{visibility:hidden}.ui-button__label{line-height:1;background-color:transparent!important}.ui-button__spinner-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.ui-button__spinner{width:1.1em;height:1.1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:ui-button-spin .6s linear infinite}@keyframes ui-button-spin{to{transform:rotate(360deg)}}.ui-button__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i2.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-button', standalone: true, imports: [MatTooltipModule, LucideAngularModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'ui-button-host',
+                        '[class.ui-button-host--full-width]': 'fullWidth',
+                    }, template: `
+    <button
+      [type]="type"
+      [class]="buttonClasses"
+      [disabled]="disabled || loading"
+      [attr.aria-label]="effectiveAriaLabel || null"
+      [attr.aria-busy]="loading || null"
+      [matTooltip]="tooltip"
+    >
+      <span class="ui-button__content" [class.ui-button__content--hidden]="loading">
+        @if (icon && iconPosition === 'leading') {
+          <lucide-icon [name]="icon!" [size]="iconSize" aria-hidden="true" />
+        }
+        @if (label) {
+          <span class="ui-button__label">{{ label }}</span>
+        }
+        <ng-content />
+        @if (icon && iconPosition === 'trailing') {
+          <lucide-icon [name]="icon!" [size]="iconSize" aria-hidden="true" />
+        }
+      </span>
+      @if (loading) {
+        <span class="ui-button__spinner-overlay">
+          <span class="ui-button__spinner" aria-hidden="true"></span>
+          <span class="ui-button__sr-only">Loading</span>
+        </span>
+      }
+    </button>
+  `, styles: [".ui-button-host{display:inline-flex}.ui-button-host--full-width{display:flex;width:100%}.ui-button{appearance:none;border:none;cursor:pointer;font-family:var(--ui-font-family);font-weight:var(--ui-font-weight-medium);letter-spacing:.01em;position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--ui-radius-md);white-space:nowrap;text-decoration:none;overflow:hidden;transition:background-color var(--ui-transition-fast),color var(--ui-transition-fast),border-color var(--ui-transition-fast),box-shadow var(--ui-transition-fast),opacity var(--ui-transition-fast)}.ui-button:focus{outline:none}.ui-button:focus-visible{outline:var(--ui-focus-ring-width) solid var(--ui-focus-ring-color);outline-offset:var(--ui-focus-ring-offset)}.ui-button:disabled{opacity:.5;cursor:not-allowed}.ui-button--full-width{width:100%}.ui-button--xs{height:28px;padding:0 var(--ui-spacing-2);font-size:var(--ui-font-size-xs);border-radius:var(--ui-radius-sm);gap:var(--ui-spacing-1)}.ui-button--sm{height:32px;padding:0 var(--ui-spacing-3);font-size:var(--ui-font-size-xs);gap:6px}.ui-button--md{height:36px;padding:0 var(--ui-spacing-4);font-size:var(--ui-font-size-sm);gap:var(--ui-spacing-2)}.ui-button--lg{height:40px;padding:0 var(--ui-spacing-5);font-size:var(--ui-font-size-sm);gap:var(--ui-spacing-2)}.ui-button--xl{height:48px;padding:0 var(--ui-spacing-6);font-size:var(--ui-font-size-md);gap:var(--ui-spacing-3)}.ui-button--icon-only.ui-button--xs{width:28px;padding:0}.ui-button--icon-only.ui-button--sm{width:32px;padding:0}.ui-button--icon-only.ui-button--md{width:36px;padding:0}.ui-button--icon-only.ui-button--lg{width:40px;padding:0}.ui-button--icon-only.ui-button--xl{width:48px;padding:0}.ui-button--primary{background:var(--ui-color-primary);color:var(--ui-color-primary-contrast)}.ui-button--primary:hover:not(:disabled){background:var(--ui-color-primary-hover)}.ui-button--primary:active:not(:disabled){background:var(--ui-color-primary-active)}.ui-button--accent{background:var(--ui-color-accent);color:var(--ui-color-accent-contrast)}.ui-button--accent:hover:not(:disabled){background:var(--ui-color-accent-hover)}.ui-button--accent:active:not(:disabled){background:var(--ui-color-accent-active)}.ui-button--warn{background:var(--ui-color-warn);color:var(--ui-color-warn-contrast)}.ui-button--warn:hover:not(:disabled){background:var(--ui-color-warn-hover)}.ui-button--warn:active:not(:disabled){background:var(--ui-color-warn-active)}.ui-button--neutral{background:var(--ui-color-neutral-200);color:var(--ui-color-text)}.ui-button--neutral:hover:not(:disabled){background:var(--ui-color-neutral-300)}.ui-button--neutral:active:not(:disabled){background:var(--ui-color-neutral-400);color:var(--ui-color-text-inverse)}.ui-button--ghost{background:transparent;color:var(--ui-color-text-secondary)}.ui-button--ghost:hover:not(:disabled){background:var(--ui-color-surface-hover);color:var(--ui-color-text)}.ui-button--ghost:active:not(:disabled){background:var(--ui-color-neutral-200)}.ui-button--outline{background:transparent;color:var(--ui-color-primary);border:1.5px solid var(--ui-color-border-strong)}.ui-button--outline:hover:not(:disabled){background:var(--ui-color-primary-light);border-color:var(--ui-color-primary)}.ui-button--outline:active:not(:disabled){background:var(--ui-color-primary-light);border-color:var(--ui-color-primary-hover)}.ui-button--loading{cursor:wait;pointer-events:none}.ui-button__content{display:inline-flex;align-items:center;gap:inherit;transition:visibility var(--ui-transition-fast)}.ui-button__content--hidden{visibility:hidden}.ui-button__label{line-height:1;background-color:transparent!important}.ui-button__spinner-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.ui-button__spinner{width:1.1em;height:1.1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:ui-button-spin .6s linear infinite}@keyframes ui-button-spin{to{transform:rotate(360deg)}}.ui-button__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], tooltip: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], iconPosition: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], fullWidth: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], customClass: [{
+                type: Input
+            }] } });
+
+/**
+ * @module ng-ui-system/blackbox
+ * Types and interfaces for the BlackBox observability service.
+ *
+ * The BlackBox service acts as a "black box recorder" for user sessions,
+ * capturing navigation, UI interactions, form events and HTTP calls
+ * in a compressed, opaque format stored in IndexedDB.
+ */
+// ─── Defaults ────────────────────────────────────────────────────────
+/** Default configuration values. */
+const UI_BLACKBOX_DEFAULTS = {
+    maxStorageMb: 50,
+    flushIntervalMs: 5000,
+    flushThreshold: 20,
+    bufferDebounceMs: 500,
+    formTracking: {
+        trackValues: false,
+        trackFocus: true,
+        trackBlur: true,
+        trackValueChanges: true,
+        trackValidation: true,
+        debounceMs: 500,
+    },
+};
+
+/**
+ * @module ng-ui-system/blackbox
+ * Fingerprint service — generates a stable device/browser hash
+ * using the open-source FingerprintJS library (MIT, no API key required).
+ *
+ * The fingerprint is computed once and cached in `localStorage` under
+ * the key `__ui_bb_fp` to avoid redundant recalculations.
+ */
+/** localStorage key for the cached fingerprint. */
+const FP_CACHE_KEY = '__ui_bb_fp';
+/**
+ * Generates and caches a stable browser/device fingerprint.
+ *
+ * Uses `@fingerprintjs/fingerprintjs` (open-source, MIT) which analyses
+ * canvas rendering, WebGL, audio context, screen properties, timezone,
+ * user-agent, and other browser signals to produce a stable hash.
+ *
+ * @usageNotes
+ * ```typescript
+ * const fp = inject(UiBlackboxFingerprintService);
+ * const hash = await fp.getFingerprint();
+ * // => "a1b2c3d4e5f6..." (stable across sessions)
+ * ```
+ */
+class UiBlackboxFingerprintService {
+    constructor() {
+        this.platformId = inject(PLATFORM_ID);
+        this.cached = null;
+    }
+    /**
+     * Returns the stable fingerprint for this device/browser.
+     *
+     * On first call, loads FingerprintJS dynamically, computes the hash,
+     * and caches it in both memory and `localStorage`.
+     * Subsequent calls return the cached value immediately.
+     */
+    async getFingerprint() {
+        // Return cached value if available
+        if (this.cached) {
+            return this.cached;
+        }
+        // SSR guard
+        if (!isPlatformBrowser(this.platformId)) {
+            return 'ssr-placeholder';
+        }
+        // Try localStorage cache first
+        try {
+            const stored = localStorage.getItem(FP_CACHE_KEY);
+            if (stored) {
+                this.cached = stored;
+                return stored;
+            }
+        }
+        catch {
+            // localStorage may be unavailable (privacy mode, quota exceeded)
+        }
+        // Compute fingerprint via FingerprintJS
+        try {
+            const FingerprintJS = await import('@fingerprintjs/fingerprintjs');
+            const agent = await FingerprintJS.load();
+            const result = await agent.get();
+            this.cached = result.visitorId;
+            // Persist to localStorage
+            try {
+                localStorage.setItem(FP_CACHE_KEY, this.cached);
+            }
+            catch {
+                // Silently ignore storage errors
+            }
+            return this.cached;
+        }
+        catch {
+            // Fallback: generate a pseudo-fingerprint from available signals
+            const fallback = this.generateFallbackFingerprint();
+            this.cached = fallback;
+            try {
+                localStorage.setItem(FP_CACHE_KEY, fallback);
+            }
+            catch {
+                // Silently ignore
+            }
+            return fallback;
+        }
+    }
+    /**
+     * Fallback fingerprint when FingerprintJS is unavailable.
+     * Combines basic browser signals into a hash.
+     * @internal
+     */
+    generateFallbackFingerprint() {
+        const signals = [
+            navigator.userAgent,
+            navigator.language,
+            screen.width + 'x' + screen.height,
+            screen.colorDepth?.toString() ?? '',
+            Intl.DateTimeFormat().resolvedOptions().timeZone,
+            navigator.hardwareConcurrency?.toString() ?? '',
+        ].join('|');
+        // Simple string hash (djb2)
+        let hash = 5381;
+        for (let i = 0; i < signals.length; i++) {
+            hash = ((hash << 5) + hash + signals.charCodeAt(i)) >>> 0;
+        }
+        return hash.toString(36).padStart(12, '0');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiBlackboxFingerprintService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiBlackboxFingerprintService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiBlackboxFingerprintService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * @module ng-ui-system/blackbox
+ * IndexedDB storage adapter for BlackBox sessions.
+ *
+ * Handles persistence, compression (via native CompressionStream gzip),
+ * quota enforcement, and JSONL export.
+ *
+ * Design notes:
+ * - DB name: `ui-blackbox`, object store: `sessions`
+ * - Each session is gzip-compressed before storage for both size
+ *   reduction and inherent obfuscation
+ * - Quota enforced by total stored size; oldest sessions are pruned first
+ */
+const DB_NAME = 'ui-blackbox';
+const DB_VERSION = 1;
+const STORE_NAME = 'sessions';
+/**
+ * Low-level IndexedDB adapter for reading/writing compressed BlackBox sessions.
+ *
+ * @usageNotes
+ * This service is used internally by `UiBlackboxService`.
+ * Consumers should interact with the higher-level `UiBlackboxService` API.
+ */
+class UiBlackboxStorageService {
+    constructor() {
+        this.platformId = inject(PLATFORM_ID);
+        this.db = null;
+        this.maxStorageMb = UI_BLACKBOX_DEFAULTS.maxStorageMb;
+    }
+    // ─── Configuration ─────────────────────────────────────────────────
+    /** Update the storage quota from the parent service config. */
+    setMaxStorageMb(mb) {
+        this.maxStorageMb = mb;
+    }
+    // ─── Database lifecycle ────────────────────────────────────────────
+    /** Open (or create) the IndexedDB database. */
+    async openDb() {
+        if (this.db)
+            return this.db;
+        if (!isPlatformBrowser(this.platformId)) {
+            throw new Error('IndexedDB is not available in SSR');
+        }
+        return new Promise((resolve, reject) => {
+            const request = indexedDB.open(DB_NAME, DB_VERSION);
+            request.onupgradeneeded = () => {
+                const db = request.result;
+                if (!db.objectStoreNames.contains(STORE_NAME)) {
+                    const store = db.createObjectStore(STORE_NAME, { keyPath: 'sessionId' });
+                    store.createIndex('fingerprint', 'fingerprint', { unique: false });
+                    store.createIndex('startedAt', 'startedAt', { unique: false });
+                }
+            };
+            request.onsuccess = () => {
+                this.db = request.result;
+                resolve(this.db);
+            };
+            request.onerror = () => reject(request.error);
+        });
+    }
+    // ─── Compression helpers ───────────────────────────────────────────
+    /** Compress a string to a gzip Uint8Array using native CompressionStream. */
+    async compress(data) {
+        const encoder = new TextEncoder();
+        const stream = new Blob([encoder.encode(data)])
+            .stream()
+            .pipeThrough(new CompressionStream('gzip'));
+        const reader = stream.getReader();
+        const chunks = [];
+        let done = false;
+        while (!done) {
+            const result = await reader.read();
+            done = result.done;
+            if (result.value) {
+                chunks.push(result.value);
+            }
+        }
+        // Merge chunks into a single ArrayBuffer-backed Uint8Array
+        const totalLength = chunks.reduce((sum, c) => sum + c.length, 0);
+        const buffer = new ArrayBuffer(totalLength);
+        const merged = new Uint8Array(buffer);
+        let offset = 0;
+        for (const chunk of chunks) {
+            merged.set(chunk, offset);
+            offset += chunk.length;
+        }
+        return merged;
+    }
+    /** Decompress a gzip Uint8Array back to a string. */
+    async decompress(data) {
+        const stream = new Blob([data])
+            .stream()
+            .pipeThrough(new DecompressionStream('gzip'));
+        const reader = stream.getReader();
+        const decoder = new TextDecoder();
+        let result = '';
+        let done = false;
+        while (!done) {
+            const chunk = await reader.read();
+            done = chunk.done;
+            if (chunk.value) {
+                result += decoder.decode(chunk.value, { stream: !done });
+            }
+        }
+        return result;
+    }
+    // ─── CRUD ──────────────────────────────────────────────────────────
+    /**
+     * Persist a session to IndexedDB (gzip-compressed).
+     * Enforces quota after saving.
+     */
+    async saveSession(session) {
+        const db = await this.openDb();
+        const json = JSON.stringify(session);
+        const compressed = await this.compress(json);
+        return new Promise((resolve, reject) => {
+            const tx = db.transaction(STORE_NAME, 'readwrite');
+            const store = tx.objectStore(STORE_NAME);
+            // Store as { sessionId, fingerprint, startedAt, data: Uint8Array }
+            store.put({
+                sessionId: session.sessionId,
+                fingerprint: session.fingerprint,
+                startedAt: session.startedAt,
+                sizeBytes: compressed.byteLength,
+                data: compressed,
+            });
+            tx.oncomplete = () => {
+                this.enforceQuota().then(resolve).catch(resolve);
+            };
+            tx.onerror = () => reject(tx.error);
+        });
+    }
+    /**
+     * Read and decompress a single session by ID.
+     */
+    async getSession(sessionId) {
+        const db = await this.openDb();
+        return new Promise((resolve, reject) => {
+            const tx = db.transaction(STORE_NAME, 'readonly');
+            const store = tx.objectStore(STORE_NAME);
+            const req = store.get(sessionId);
+            req.onsuccess = async () => {
+                if (!req.result) {
+                    resolve(null);
+                    return;
+                }
+                try {
+                    const json = await this.decompress(req.result.data);
+                    resolve(JSON.parse(json));
+                }
+                catch (e) {
+                    reject(e);
+                }
+            };
+            req.onerror = () => reject(req.error);
+        });
+    }
+    /**
+     * Get all stored sessions (decompressed).
+     */
+    async getAllSessions() {
+        const db = await this.openDb();
+        return new Promise((resolve, reject) => {
+            const tx = db.transaction(STORE_NAME, 'readonly');
+            const store = tx.objectStore(STORE_NAME);
+            const req = store.getAll();
+            req.onsuccess = async () => {
+                try {
+                    const sessions = [];
+                    for (const record of req.result) {
+                        const json = await this.decompress(record.data);
+                        sessions.push(JSON.parse(json));
+                    }
+                    resolve(sessions);
+                }
+                catch (e) {
+                    reject(e);
+                }
+            };
+            req.onerror = () => reject(req.error);
+        });
+    }
+    /**
+     * Get all sessions for a given fingerprint.
+     */
+    async getSessionsByFingerprint(fingerprint) {
+        const db = await this.openDb();
+        return new Promise((resolve, reject) => {
+            const tx = db.transaction(STORE_NAME, 'readonly');
+            const store = tx.objectStore(STORE_NAME);
+            const index = store.index('fingerprint');
+            const req = index.getAll(fingerprint);
+            req.onsuccess = async () => {
+                try {
+                    const sessions = [];
+                    for (const record of req.result) {
+                        const json = await this.decompress(record.data);
+                        sessions.push(JSON.parse(json));
+                    }
+                    resolve(sessions);
+                }
+                catch (e) {
+                    reject(e);
+                }
+            };
+            req.onerror = () => reject(req.error);
+        });
+    }
+    /**
+     * Generate a downloadable JSONL Blob of all sessions.
+     * Each line is one JSON-serialised session (decompressed).
+     */
+    async exportDump() {
+        const sessions = await this.getAllSessions();
+        const lines = sessions.map((s) => JSON.stringify(s)).join('\n');
+        return new Blob([lines], { type: 'application/x-ndjson' });
+    }
+    /**
+     * Delete all stored sessions.
+     */
+    async clearAll() {
+        const db = await this.openDb();
+        return new Promise((resolve, reject) => {
+            const tx = db.transaction(STORE_NAME, 'readwrite');
+            const store = tx.objectStore(STORE_NAME);
+            store.clear();
+            tx.oncomplete = () => resolve();
+            tx.onerror = () => reject(tx.error);
+        });
+    }
+    // ─── Quota enforcement ─────────────────────────────────────────────
+    /**
+     * Prune oldest sessions until total stored size is under `maxStorageMb`.
+     * @internal
+     */
+    async enforceQuota() {
+        const db = await this.openDb();
+        const maxBytes = this.maxStorageMb * 1024 * 1024;
+        return new Promise((resolve, reject) => {
+            const tx = db.transaction(STORE_NAME, 'readwrite');
+            const store = tx.objectStore(STORE_NAME);
+            const index = store.index('startedAt');
+            // Collect all records sorted by startedAt (ascending = oldest first)
+            const cursorReq = index.openCursor();
+            const records = [];
+            let totalSize = 0;
+            cursorReq.onsuccess = () => {
+                const cursor = cursorReq.result;
+                if (cursor) {
+                    const size = cursor.value.sizeBytes || 0;
+                    totalSize += size;
+                    records.push({ key: cursor.primaryKey, size });
+                    cursor.continue();
+                }
+                else {
+                    // Cursor exhausted — prune if over quota
+                    if (totalSize <= maxBytes) {
+                        resolve();
+                        return;
+                    }
+                    let freed = 0;
+                    const target = totalSize - maxBytes;
+                    for (const record of records) {
+                        if (freed >= target)
+                            break;
+                        store.delete(record.key);
+                        freed += record.size;
+                    }
+                    resolve();
+                }
+            };
+            cursorReq.onerror = () => reject(cursorReq.error);
+            tx.onerror = () => reject(tx.error);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiBlackboxStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiBlackboxStorageService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiBlackboxStorageService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * @module ng-ui-system/blackbox
+ * Core BlackBox observability service — the main entry point for session
+ * recording, event buffering, and export.
+ *
+ * Architecture:
+ * - Root singleton (`providedIn: 'root'`)
+ * - On first inject: generates fingerprint, creates session, subscribes to Router events
+ * - Centralised in-memory buffer with periodic/threshold-based flush to IndexedDB
+ * - `window:beforeunload` triggers a final best-effort async flush
+ */
+/**
+ * Central BlackBox observability service.
+ *
+ * Records navigation, UI interactions, form events, and HTTP calls
+ * into compressed sessions stored in IndexedDB.
+ *
+ * @usageNotes
+ * The service activates automatically when injected. Provide it at root level
+ * and it will start recording immediately.
+ *
+ * ```typescript
+ * // app.config.ts — just importing the service is enough
+ * import { UiBlackboxService } from '@gnggln/ng-ui-system';
+ *
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     // The service is providedIn: 'root', so it's auto-provided.
+ *     // To force eager initialisation:
+ *     { provide: APP_INITIALIZER, useFactory: () => () => inject(UiBlackboxService), multi: true },
+ *   ],
+ * };
+ * ```
+ */
+class UiBlackboxService {
+    constructor() {
+        this.platformId = inject(PLATFORM_ID);
+        this.router = inject(Router);
+        this.zone = inject(NgZone);
+        this.fingerprint = inject(UiBlackboxFingerprintService);
+        this.storage = inject(UiBlackboxStorageService);
+        this.destroy$ = new Subject();
+        this.config = { ...UI_BLACKBOX_DEFAULTS };
+        this.currentStep = null;
+        this.initialised = false;
+        // ─── Centralised event buffer ──────────────────────────────────────
+        this.buffer = [];
+        this.flushTimerId = null;
+        this.beforeUnloadHandler = null;
+        if (isPlatformBrowser(this.platformId)) {
+            this.init();
+        }
+    }
+    // ─── Initialisation ────────────────────────────────────────────────
+    async init() {
+        // Generate session ID
+        const sessionId = this.generateUuid();
+        const fp = await this.fingerprint.getFingerprint();
+        this.session = {
+            sessionId,
+            fingerprint: fp,
+            startedAt: Date.now(),
+            userAgent: navigator.userAgent,
+            steps: [],
+            formEvents: [],
+            calls: [],
+        };
+        // Create initial step from current URL
+        this.currentStep = {
+            timestamp: Date.now(),
+            route: this.router.url,
+            actions: [],
+        };
+        this.session.steps.push(this.currentStep);
+        // Subscribe to router navigation
+        this.router.events
+            .pipe(filter((e) => e instanceof NavigationEnd), takeUntil(this.destroy$))
+            .subscribe((event) => {
+            const previousRoute = this.currentStep?.route;
+            this.currentStep = {
+                timestamp: Date.now(),
+                route: event.urlAfterRedirects,
+                previousRoute,
+                actions: [],
+            };
+            this.pushBufferEvent({ kind: 'step', payload: this.currentStep });
+        });
+        // Setup periodic flush (outside Angular zone to avoid triggering CD)
+        this.zone.runOutsideAngular(() => {
+            this.flushTimerId = setInterval(() => this.flush(), this.config.flushIntervalMs);
+            // Best-effort flush on tab close (IndexedDB is async, no sync fallback)
+            this.beforeUnloadHandler = () => {
+                this.session.endedAt = Date.now();
+                void this.flush();
+            };
+            window.addEventListener('beforeunload', this.beforeUnloadHandler);
+        });
+        this.initialised = true;
+    }
+    // ─── Public API: Configuration ─────────────────────────────────────
+    /**
+     * Update the BlackBox configuration.
+     * Can be called at any time; changes take effect immediately.
+     */
+    configure(config) {
+        this.config = {
+            ...this.config,
+            ...config,
+            formTracking: {
+                ...this.config.formTracking,
+                ...(config.formTracking ?? {}),
+            },
+        };
+        this.storage.setMaxStorageMb(this.config.maxStorageMb);
+        // Restart flush timer with new interval
+        if (this.flushTimerId !== null) {
+            clearInterval(this.flushTimerId);
+            this.zone.runOutsideAngular(() => {
+                this.flushTimerId = setInterval(() => this.flush(), this.config.flushIntervalMs);
+            });
+        }
+    }
+    /** Returns the current configuration (readonly snapshot). */
+    getConfig() {
+        return { ...this.config };
+    }
+    // ─── Public API: Tracking ──────────────────────────────────────────
+    /**
+     * Manually track a UI action (click).
+     *
+     * Called automatically by `UiButtonAreaComponent` and the `[uiTrack]` directive.
+     * Can also be called programmatically for custom interactions.
+     *
+     * @param trackId - Identifier for the action (e.g. button id, link name).
+     * @param meta - Optional metadata: `tag`, `text`, `id` of the element.
+     */
+    trackAction(trackId, meta) {
+        if (!this.initialised)
+            return;
+        const action = {
+            timestamp: Date.now(),
+            type: 'click',
+            target: {
+                tag: meta?.tag ?? 'unknown',
+                id: meta?.id,
+                trackId,
+                text: meta?.text?.substring(0, 50),
+            },
+        };
+        // Add to current step immediately (for in-memory session access)
+        this.currentStep?.actions.push(action);
+        // Also push to buffer for persistence
+        this.pushBufferEvent({
+            kind: 'action',
+            payload: { ...action, route: this.currentStep?.route ?? this.router.url },
+        });
+    }
+    /**
+     * Track a form interaction event.
+     *
+     * Called automatically by `UiFormBuilderComponent` when the BlackBox
+     * service is available.
+     */
+    trackFormEvent(event) {
+        if (!this.initialised)
+            return;
+        this.session.formEvents.push(event);
+        this.pushBufferEvent({ kind: 'formEvent', payload: event });
+    }
+    /**
+     * Track an intercepted HTTP call.
+     * Called by `UiBlackboxInterceptor`.
+     * @internal
+     */
+    trackHttpCall(call) {
+        if (!this.initialised)
+            return;
+        this.session.calls.push(call);
+        this.pushBufferEvent({ kind: 'httpCall', payload: call });
+    }
+    // ─── Public API: Session access ────────────────────────────────────
+    /**
+     * Returns the current in-memory session (live, not yet flushed).
+     * Useful for debugging or real-time inspection.
+     */
+    getCurrentSession() {
+        return this.session;
+    }
+    /**
+     * Retrieve all sessions stored in IndexedDB (decompressed).
+     */
+    async getSessionHistory() {
+        return this.storage.getAllSessions();
+    }
+    /**
+     * Retrieve sessions for the current device fingerprint.
+     */
+    async getSessionsForDevice() {
+        const fp = await this.fingerprint.getFingerprint();
+        return this.storage.getSessionsByFingerprint(fp);
+    }
+    // ─── Public API: Export ────────────────────────────────────────────
+    /**
+     * Export all sessions as a downloadable JSONL Blob.
+     *
+     * @returns A Blob containing JSONL data (one session per line).
+     *
+     * @example
+     * ```typescript
+     * const blob = await blackbox.exportSessions();
+     * const url = URL.createObjectURL(blob);
+     * const a = document.createElement('a');
+     * a.href = url;
+     * a.download = 'blackbox-sessions.jsonl';
+     * a.click();
+     * ```
+     */
+    async exportSessions() {
+        // Flush current session first
+        await this.flush();
+        return this.storage.exportDump();
+    }
+    // ─── Public API: Lifecycle ─────────────────────────────────────────
+    /**
+     * Explicitly end the current session.
+     * Flushes all buffered events and marks the session as ended.
+     */
+    async endSession() {
+        if (!this.initialised)
+            return;
+        this.session.endedAt = Date.now();
+        await this.flush();
+    }
+    /**
+     * Clear all stored sessions from IndexedDB.
+     */
+    async clearHistory() {
+        return this.storage.clearAll();
+    }
+    // ─── Buffer management ─────────────────────────────────────────────
+    /**
+     * Push an event into the centralised buffer.
+     * Triggers an immediate flush if the buffer exceeds the threshold.
+     * @internal
+     */
+    pushBufferEvent(event) {
+        this.buffer.push(event);
+        if (this.buffer.length >= this.config.flushThreshold) {
+            this.flush();
+        }
+    }
+    /**
+     * Flush buffered events to IndexedDB asynchronously.
+     * @internal
+     */
+    async flush() {
+        if (!this.initialised || this.buffer.length === 0)
+            return;
+        // Drain buffer
+        const events = this.buffer.splice(0);
+        // Apply step events to the session
+        for (const event of events) {
+            if (event.kind === 'step') {
+                // Steps are already pushed in real-time; ensure they're in the session
+                if (!this.session.steps.includes(event.payload)) {
+                    this.session.steps.push(event.payload);
+                }
+            }
+            // Actions, formEvents, httpCalls are already pushed in real-time
+            // to the in-memory session by trackAction/trackFormEvent/trackHttpCall
+        }
+        // Save the full session snapshot
+        try {
+            await this.storage.saveSession(this.session);
+        }
+        catch (e) {
+            // storage error — re-enqueue events for next flush
+            console.warn('[UiBlackbox] Storage flush failed:', e);
+        }
+    }
+    // ─── Utilities ─────────────────────────────────────────────────────
+    /** Generate a UUID v4. */
+    generateUuid() {
+        if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+            return crypto.randomUUID();
+        }
+        // Fallback for older browsers
+        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+            const r = (Math.random() * 16) | 0;
+            const v = c === 'x' ? r : (r & 0x3) | 0x8;
+            return v.toString(16);
+        });
+    }
+    // ─── Cleanup ───────────────────────────────────────────────────────
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        if (this.flushTimerId !== null) {
+            clearInterval(this.flushTimerId);
+        }
+        if (this.beforeUnloadHandler) {
+            window.removeEventListener('beforeunload', this.beforeUnloadHandler);
+        }
+        // Final flush
+        void this.flush();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiBlackboxService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiBlackboxService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiBlackboxService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Standalone button-group component driven by a `UiButtonDescriptor[]` configuration.
+ *
+ * Renders a group of `UiButton` instances from declarative descriptors.
+ * Supports per-button loading/disabled states, dynamic visibility,
+ * alignment control, and optional navigation via Angular Router.
+ *
+ * When the `UiBlackboxService` is provided, button clicks are
+ * automatically tracked in the active session.
+ *
+ * @selector ui-button-area
+ *
+ * @example
+ * ```html
+ * <ui-button-area
+ *   [buttons]="actions"
+ *   align="end"
+ *   gap="sm"
+ *   [loadingIds]="currentlyLoading"
+ * />
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Dynamic configuration
+ * actions: UiButtonDescriptor[] = [
+ *   { id: 'export', label: 'Export Excel', icon: 'file-spreadsheet', variant: 'primary',
+ *     action: () => this.exportExcel() },
+ *   { id: 'delete', label: 'Delete', icon: 'trash-2', variant: 'warn',
+ *     action: () => this.deleteSelected(), hidden: !this.hasSelection },
+ * ];
+ *
+ * // Set loading state from outside:
+ * currentlyLoading: string | string[] | null = 'export';
+ * ```
+ */
+class UiButtonAreaComponent {
+    constructor() {
+        /**
+         * Array of button descriptors to render.
+         * Buttons with `hidden: true` are filtered out.
+         */
+        this.buttons = [];
+        /** Horizontal alignment of the button group. */
+        this.align = 'end';
+        /** Accessible group label for screen readers. */
+        this.ariaLabel = 'Actions';
+        /** Gap between buttons (maps to design token spacing). */
+        this.gap = 'sm';
+        /** Stack buttons vertically on mobile viewports (<600px). */
+        this.stackOnMobile = true;
+        /**
+         * When `true`, all buttons are disabled while any button is in a loading state.
+         * Useful to prevent double-actions during async operations.
+         */
+        this.disableWhileLoading = false;
+        /** @internal */
+        this._loadingIds = new Set();
+        /** @internal Optional router for href navigation. */
+        this.router = inject(Router, { optional: true });
+        /** @internal Optional BlackBox service — auto-tracks button clicks when available. */
+        this.blackbox = inject(UiBlackboxService, { optional: true });
+    }
+    /**
+     * Set one or more buttons to a loading state by their `id`.
+     * Accepts a single string, an array of strings, or `null` to clear.
+     *
+     * @example
+     * ```html
+     * <!-- Single -->
+     * <ui-button-area [loadingIds]="'save'" />
+     *
+     * <!-- Multiple -->
+     * <ui-button-area [loadingIds]="['save', 'export']" />
+     * ```
+     */
+    set loadingIds(value) {
+        if (value === null || value === undefined) {
+            this._loadingIds = new Set();
+        }
+        else if (Array.isArray(value)) {
+            this._loadingIds = new Set(value);
+        }
+        else {
+            this._loadingIds = new Set([value]);
+        }
+    }
+    /** Buttons filtered to visible (non-hidden) entries. */
+    get visibleButtons() {
+        return this.buttons.filter((b) => !b.hidden);
+    }
+    /** Assembled CSS class string for the button area container. */
+    get areaClasses() {
+        return [
+            'ui-button-area',
+            `ui-button-area--align-${this.align}`,
+            `ui-button-area--gap-${this.gap}`,
+            this.stackOnMobile ? 'ui-button-area--stack-mobile' : '',
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    /** @internal Track function for @for loop. */
+    trackButton(index, button) {
+        return button.id ?? `idx-${index}`;
+    }
+    /** Whether a specific button is in a loading state. */
+    isButtonLoading(button) {
+        return !!button.loading || (!!button.id && this._loadingIds.has(button.id));
+    }
+    /** Whether a specific button is disabled (includes loading logic). */
+    isButtonDisabled(button) {
+        if (button.disabled)
+            return true;
+        if (this.isButtonLoading(button))
+            return true;
+        if (this.disableWhileLoading && this._loadingIds.size > 0)
+            return true;
+        return false;
+    }
+    /** @internal Handles button click: tracks action, calls callback and/or navigates. */
+    handleButtonClick(button, event) {
+        // BlackBox auto-tracking (no-op if service is not provided)
+        this.blackbox?.trackAction(button.id ?? button.label, {
+            tag: 'ui-button',
+            id: button.id,
+            text: button.label,
+        });
+        if (button.action) {
+            button.action(event);
+        }
+        if (button.href && this.router) {
+            this.router.navigateByUrl(button.href);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiButtonAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: UiButtonAreaComponent, isStandalone: true, selector: "ui-button-area", inputs: { buttons: "buttons", align: "align", ariaLabel: "ariaLabel", gap: "gap", stackOnMobile: "stackOnMobile", disableWhileLoading: "disableWhileLoading", loadingIds: "loadingIds" }, host: { classAttribute: "ui-button-area-host" }, ngImport: i0, template: `
+    <div
+      [class]="areaClasses"
+      role="group"
+      [attr.aria-label]="ariaLabel"
+    >
+      @for (button of visibleButtons; track trackButton($index, button)) {
+        <ui-button
+          [attr.data-button-id]="button.id || null"
+          [label]="button.label"
+          [tooltip]="button.tooltip ?? ''"
+          [ariaLabel]="button.ariaLabel"
+          [icon]="button.icon"
+          [iconPosition]="button.iconPosition ?? 'trailing'"
+          [variant]="button.variant ?? 'primary'"
+          [size]="button.size ?? 'md'"
+          [loading]="isButtonLoading(button)"
+          [disabled]="isButtonDisabled(button)"
+          [customClass]="button.customClass"
+          (click)="handleButtonClick(button, $event)"
+        />
+      }
+    </div>
+  `, isInline: true, styles: [".ui-button-area-host{display:block}@media (max-width: 767.98px){.ui-button-area-host{width:100%}}.ui-button-area{display:flex;flex-wrap:wrap;align-items:center}.ui-button-area--gap-xs{gap:var(--ui-spacing-1)}.ui-button-area--gap-sm{gap:var(--ui-spacing-2)}.ui-button-area--gap-md{gap:var(--ui-spacing-3)}.ui-button-area--gap-lg{gap:var(--ui-spacing-4)}.ui-button-area--gap-xl{gap:var(--ui-spacing-5)}.ui-button-area--align-start{justify-content:flex-start}.ui-button-area--align-center{justify-content:center}.ui-button-area--align-end{justify-content:flex-end}.ui-button-area--align-between{justify-content:space-between}@media (max-width: 767.98px){.ui-button-area--stack-mobile{flex-direction:column;width:100%}.ui-button-area--stack-mobile .ui-button-host{display:flex;width:100%}.ui-button-area--stack-mobile .ui-button{width:100%}}\n"], dependencies: [{ kind: "component", type: UiButtonComponent, selector: "ui-button", inputs: ["label", "tooltip", "variant", "size", "icon", "iconPosition", "loading", "disabled", "fullWidth", "type", "ariaLabel", "customClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiButtonAreaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-button-area', standalone: true, imports: [UiButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'ui-button-area-host',
+                    }, template: `
+    <div
+      [class]="areaClasses"
+      role="group"
+      [attr.aria-label]="ariaLabel"
+    >
+      @for (button of visibleButtons; track trackButton($index, button)) {
+        <ui-button
+          [attr.data-button-id]="button.id || null"
+          [label]="button.label"
+          [tooltip]="button.tooltip ?? ''"
+          [ariaLabel]="button.ariaLabel"
+          [icon]="button.icon"
+          [iconPosition]="button.iconPosition ?? 'trailing'"
+          [variant]="button.variant ?? 'primary'"
+          [size]="button.size ?? 'md'"
+          [loading]="isButtonLoading(button)"
+          [disabled]="isButtonDisabled(button)"
+          [customClass]="button.customClass"
+          (click)="handleButtonClick(button, $event)"
+        />
+      }
+    </div>
+  `, styles: [".ui-button-area-host{display:block}@media (max-width: 767.98px){.ui-button-area-host{width:100%}}.ui-button-area{display:flex;flex-wrap:wrap;align-items:center}.ui-button-area--gap-xs{gap:var(--ui-spacing-1)}.ui-button-area--gap-sm{gap:var(--ui-spacing-2)}.ui-button-area--gap-md{gap:var(--ui-spacing-3)}.ui-button-area--gap-lg{gap:var(--ui-spacing-4)}.ui-button-area--gap-xl{gap:var(--ui-spacing-5)}.ui-button-area--align-start{justify-content:flex-start}.ui-button-area--align-center{justify-content:center}.ui-button-area--align-end{justify-content:flex-end}.ui-button-area--align-between{justify-content:space-between}@media (max-width: 767.98px){.ui-button-area--stack-mobile{flex-direction:column;width:100%}.ui-button-area--stack-mobile .ui-button-host{display:flex;width:100%}.ui-button-area--stack-mobile .ui-button{width:100%}}\n"] }]
+        }], propDecorators: { buttons: [{
+                type: Input
+            }], align: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], gap: [{
+                type: Input
+            }], stackOnMobile: [{
+                type: Input
+            }], disableWhileLoading: [{
+                type: Input
+            }], loadingIds: [{
+                type: Input
+            }] } });
+
+/**
+ * ng-ui-system — Button entry point.
+ *
+ * @example
+ * ```typescript
+ * import {
+ *   UiButtonComponent,
+ *   UiButtonAreaComponent,
+ *   UiButtonDescriptor,
+ * } from 'ng-ui-system';
+ * ```
+ */
+// Components
+
+/**
+ * Bootstrap del secondary entry `@gnggln/ng-ui-system/button`. Button e Button Area.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { UiButtonAreaComponent, UiButtonComponent };
+//# sourceMappingURL=gnggln-ng-ui-system-button.mjs.map