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

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

@@ -0,0 +1,664 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, inject, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, Injectable } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
+import * as i1 from 'lucide-angular';
+import { LucideAngularModule } from 'lucide-angular';
+import * as i1$1 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { Observable, map } from 'rxjs';
+
+/**
+ * Componente modale standalone con struttura header/body/footer.
+ *
+ * Da utilizzare come wrapper all'interno di componenti aperti
+ * tramite `UiModalService.open()`. Fornisce la struttura visuale
+ * e gestisce la chiusura programmatica.
+ *
+ * **Content projection:**
+ * - Contenuto di default: va nel body
+ * - `[uiModalHeader]`: sostituisce il titolo nell'header
+ * - `[uiModalFooter]`: azioni nel footer
+ *
+ * @selector ui-modal
+ *
+ * @example
+ * ```html
+ * <ui-modal [config]="{ title: 'Dettagli', size: 'md' }">
+ *   <p>Contenuto del body della modale.</p>
+ *   <div uiModalFooter>
+ *     <ui-button label="Chiudi" variant="ghost" (click)="close()" />
+ *     <ui-button label="Salva" variant="primary" (click)="save()" />
+ *   </div>
+ * </ui-modal>
+ * ```
+ */
+class UiModalComponent {
+    constructor() {
+        /** Configurazione strutturale della modale. */
+        this.config = {};
+        /**
+         * Emesso quando la modale viene chiusa.
+         * Utile se il componente e usato direttamente nel template
+         * senza UiModalService.
+         */
+        this.closed = new EventEmitter();
+        /** @internal Riferimento al dialogo Material per la chiusura. */
+        this.dialogRef = inject(MatDialogRef, { optional: true });
+    }
+    /** Chiude la modale con un risultato opzionale. */
+    close(result) {
+        if (this.dialogRef) {
+            this.dialogRef.close(result);
+        }
+        else {
+            this.closed.emit(result);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: UiModalComponent, isStandalone: true, selector: "ui-modal", inputs: { config: "config" }, outputs: { closed: "closed" }, host: { attributes: { "role": "dialog", "aria-modal": "true" }, properties: { "attr.aria-label": "config.title || null" }, classAttribute: "ui-modal-host" }, ngImport: i0, template: `
+    <!-- Header -->
+    @if (config.title || config.showCloseButton !== false) {
+      <div class="ui-modal__header">
+        <div class="ui-modal__header-content">
+          <ng-content select="[uiModalHeader]">
+            @if (config.title) {
+              <h2 class="ui-modal__title">{{ config.title }}</h2>
+            }
+          </ng-content>
+        </div>
+        @if (config.showCloseButton !== false) {
+          <button
+            class="ui-modal__close"
+            (click)="close()"
+            aria-label="Chiudi modale"
+            type="button"
+          >
+            <lucide-icon name="x" [size]="18" aria-hidden="true" />
+          </button>
+        }
+      </div>
+    }
+
+    <!-- Body -->
+    <div class="ui-modal__body">
+      <ng-content />
+    </div>
+
+    <!-- Footer -->
+    @if (!config.hideFooter) {
+      <div class="ui-modal__footer">
+        <ng-content select="[uiModalFooter]" />
+      </div>
+    }
+  `, isInline: true, styles: [".ui-modal-host{display:flex;flex-direction:column;max-height:90vh;background:var(--ui-color-surface);border-radius:var(--ui-radius-lg);overflow:hidden;box-shadow:var(--ui-shadow-lg)}.ui-modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--ui-spacing-4) var(--ui-spacing-6);border-bottom:1px solid var(--ui-color-border);background:var(--ui-color-bg-subtle);flex-shrink:0;gap:var(--ui-spacing-3)}.ui-modal__header-content{flex:1;min-width:0}.ui-modal__title{margin:0;font-size:var(--ui-font-size-lg);font-weight:var(--ui-font-weight-semibold);color:var(--ui-color-text);line-height:var(--ui-line-height-tight);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-modal__close{appearance:none;border:none;background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--ui-radius-md);color:var(--ui-color-text-secondary);flex-shrink:0;transition:background-color var(--ui-transition-fast),color var(--ui-transition-fast)}.ui-modal__close:focus{outline:none}.ui-modal__close:focus-visible{outline:var(--ui-focus-ring-width) solid var(--ui-focus-ring-color);outline-offset:var(--ui-focus-ring-offset)}.ui-modal__close:hover{background:var(--ui-color-surface-hover);color:var(--ui-color-text)}.ui-modal__close:active{background:var(--ui-color-neutral-200)}.ui-modal__body{flex:1;overflow-y:auto;padding:var(--ui-spacing-6)}.ui-modal__body::-webkit-scrollbar{width:6px}.ui-modal__body::-webkit-scrollbar-track{background:transparent}.ui-modal__body::-webkit-scrollbar-thumb{background:var(--ui-color-neutral-300);border-radius:var(--ui-radius-full)}.ui-modal__body::-webkit-scrollbar-thumb:hover{background:var(--ui-color-neutral-400)}.ui-modal__footer{display:flex;justify-content:flex-end;align-items:center;gap:var(--ui-spacing-2);padding:var(--ui-spacing-4) var(--ui-spacing-6);border-top:1px solid var(--ui-color-border);background:var(--ui-color-bg-subtle);flex-shrink:0}.ui-modal__footer:empty{display:none}.ui-modal-panel .mat-mdc-dialog-container{--mdc-dialog-container-color: transparent;--mdc-dialog-container-shape: var(--ui-radius-lg)}.ui-modal-panel .mat-mdc-dialog-container .mdc-dialog__surface{background:transparent!important;box-shadow:none!important;border-radius:var(--ui-radius-lg)!important;overflow:visible}.ui-modal-panel--sm .mat-mdc-dialog-container{max-width:400px}.ui-modal-panel--md .mat-mdc-dialog-container{max-width:560px}.ui-modal-panel--lg .mat-mdc-dialog-container{max-width:720px}.ui-modal-panel--xl .mat-mdc-dialog-container{max-width:900px}.ui-modal-panel--fullscreen .ui-modal-host{height:95vh;max-height:95vh;border-radius:var(--ui-radius-md)}.ui-modal-backdrop{background:var(--ui-color-backdrop)}.ui-confirm-backdrop--stacked{background:#0000004d}@media (max-width: 768px){.ui-modal__header,.ui-modal__footer{padding-left:var(--ui-spacing-4);padding-right:var(--ui-spacing-4)}.ui-modal__body{padding:var(--ui-spacing-4)}}\n"], dependencies: [{ kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1.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: UiModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-modal', standalone: true, imports: [LucideAngularModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'ui-modal-host',
+                        role: 'dialog',
+                        'aria-modal': 'true',
+                        '[attr.aria-label]': 'config.title || null',
+                    }, template: `
+    <!-- Header -->
+    @if (config.title || config.showCloseButton !== false) {
+      <div class="ui-modal__header">
+        <div class="ui-modal__header-content">
+          <ng-content select="[uiModalHeader]">
+            @if (config.title) {
+              <h2 class="ui-modal__title">{{ config.title }}</h2>
+            }
+          </ng-content>
+        </div>
+        @if (config.showCloseButton !== false) {
+          <button
+            class="ui-modal__close"
+            (click)="close()"
+            aria-label="Chiudi modale"
+            type="button"
+          >
+            <lucide-icon name="x" [size]="18" aria-hidden="true" />
+          </button>
+        }
+      </div>
+    }
+
+    <!-- Body -->
+    <div class="ui-modal__body">
+      <ng-content />
+    </div>
+
+    <!-- Footer -->
+    @if (!config.hideFooter) {
+      <div class="ui-modal__footer">
+        <ng-content select="[uiModalFooter]" />
+      </div>
+    }
+  `, styles: [".ui-modal-host{display:flex;flex-direction:column;max-height:90vh;background:var(--ui-color-surface);border-radius:var(--ui-radius-lg);overflow:hidden;box-shadow:var(--ui-shadow-lg)}.ui-modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--ui-spacing-4) var(--ui-spacing-6);border-bottom:1px solid var(--ui-color-border);background:var(--ui-color-bg-subtle);flex-shrink:0;gap:var(--ui-spacing-3)}.ui-modal__header-content{flex:1;min-width:0}.ui-modal__title{margin:0;font-size:var(--ui-font-size-lg);font-weight:var(--ui-font-weight-semibold);color:var(--ui-color-text);line-height:var(--ui-line-height-tight);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-modal__close{appearance:none;border:none;background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--ui-radius-md);color:var(--ui-color-text-secondary);flex-shrink:0;transition:background-color var(--ui-transition-fast),color var(--ui-transition-fast)}.ui-modal__close:focus{outline:none}.ui-modal__close:focus-visible{outline:var(--ui-focus-ring-width) solid var(--ui-focus-ring-color);outline-offset:var(--ui-focus-ring-offset)}.ui-modal__close:hover{background:var(--ui-color-surface-hover);color:var(--ui-color-text)}.ui-modal__close:active{background:var(--ui-color-neutral-200)}.ui-modal__body{flex:1;overflow-y:auto;padding:var(--ui-spacing-6)}.ui-modal__body::-webkit-scrollbar{width:6px}.ui-modal__body::-webkit-scrollbar-track{background:transparent}.ui-modal__body::-webkit-scrollbar-thumb{background:var(--ui-color-neutral-300);border-radius:var(--ui-radius-full)}.ui-modal__body::-webkit-scrollbar-thumb:hover{background:var(--ui-color-neutral-400)}.ui-modal__footer{display:flex;justify-content:flex-end;align-items:center;gap:var(--ui-spacing-2);padding:var(--ui-spacing-4) var(--ui-spacing-6);border-top:1px solid var(--ui-color-border);background:var(--ui-color-bg-subtle);flex-shrink:0}.ui-modal__footer:empty{display:none}.ui-modal-panel .mat-mdc-dialog-container{--mdc-dialog-container-color: transparent;--mdc-dialog-container-shape: var(--ui-radius-lg)}.ui-modal-panel .mat-mdc-dialog-container .mdc-dialog__surface{background:transparent!important;box-shadow:none!important;border-radius:var(--ui-radius-lg)!important;overflow:visible}.ui-modal-panel--sm .mat-mdc-dialog-container{max-width:400px}.ui-modal-panel--md .mat-mdc-dialog-container{max-width:560px}.ui-modal-panel--lg .mat-mdc-dialog-container{max-width:720px}.ui-modal-panel--xl .mat-mdc-dialog-container{max-width:900px}.ui-modal-panel--fullscreen .ui-modal-host{height:95vh;max-height:95vh;border-radius:var(--ui-radius-md)}.ui-modal-backdrop{background:var(--ui-color-backdrop)}.ui-confirm-backdrop--stacked{background:#0000004d}@media (max-width: 768px){.ui-modal__header,.ui-modal__footer{padding-left:var(--ui-spacing-4);padding-right:var(--ui-spacing-4)}.ui-modal__body{padding:var(--ui-spacing-4)}}\n"] }]
+        }], propDecorators: { config: [{
+                type: Input
+            }], closed: [{
+                type: Output
+            }] } });
+
+/** @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$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1.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
+            }] } });
+
+/** @internal Mappatura variante -> icona Lucide di default. */
+const VARIANT_ICON_MAP = {
+    confirm: 'check-circle',
+    delete: 'trash-2',
+    warn: 'alert-triangle',
+    info: 'info',
+};
+/** @internal Mappatura variante -> colore pulsante di conferma. */
+const VARIANT_BUTTON_MAP = {
+    confirm: 'primary',
+    delete: 'warn',
+    warn: 'warn',
+    info: 'primary',
+};
+/**
+ * Dialogo di conferma leggero per azioni condizionali.
+ *
+ * Non va utilizzato direttamente nel template: viene aperto
+ * programmaticamente tramite `UiModalService.confirm()` e i suoi
+ * metodi scorciatoia (`confirmDelete`, `confirmDiscard`, `confirmSave`).
+ *
+ * Supporta quattro varianti semantiche — confirm, delete, warn, info —
+ * ciascuna con icona e colore preconfigurati.
+ *
+ * @selector ui-confirm-dialog
+ *
+ * @example
+ * ```typescript
+ * // Apertura tramite servizio
+ * this.modalService.confirm({
+ *   title: 'Conferma eliminazione',
+ *   message: 'Questa azione non puo essere annullata.',
+ *   variant: 'delete',
+ * }).subscribe(confirmed => {
+ *   if (confirmed) this.deleteItem();
+ * });
+ * ```
+ */
+class UiConfirmDialogComponent {
+    constructor() {
+        /** @internal Dati iniettati dal servizio modale. */
+        this.data = inject(MAT_DIALOG_DATA);
+        /** @internal Riferimento al dialogo per la chiusura. */
+        this.dialogRef = inject(MatDialogRef);
+    }
+    /** Variante semantica corrente. */
+    get variant() {
+        return this.data.variant || 'confirm';
+    }
+    /** Nome icona Lucide da visualizzare. */
+    get iconName() {
+        return this.data.icon || VARIANT_ICON_MAP[this.variant];
+    }
+    /** Variante del pulsante di conferma. */
+    get confirmButtonVariant() {
+        return VARIANT_BUTTON_MAP[this.variant];
+    }
+    /** Classi CSS per il contenitore icona. */
+    get iconClasses() {
+        return `ui-confirm-dialog__icon ui-confirm-dialog__icon--${this.variant}`;
+    }
+    /** Conferma e chiude il dialogo con `true`. */
+    confirm() {
+        this.dialogRef.close(true);
+    }
+    /** Annulla e chiude il dialogo con `false`. */
+    cancel() {
+        this.dialogRef.close(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiConfirmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: UiConfirmDialogComponent, isStandalone: true, selector: "ui-confirm-dialog", host: { attributes: { "role": "alertdialog", "aria-modal": "true" }, properties: { "attr.aria-labelledby": "\"ui-confirm-title\"", "attr.aria-describedby": "\"ui-confirm-message\"" }, classAttribute: "ui-confirm-dialog-host" }, ngImport: i0, template: `
+    <div class="ui-confirm-dialog">
+      <!-- Icona -->
+      <div [class]="iconClasses">
+        <lucide-icon [name]="iconName" [size]="32" aria-hidden="true" />
+      </div>
+
+      <!-- Contenuto -->
+      <div class="ui-confirm-dialog__content">
+        @if (data.title) {
+          <h3 class="ui-confirm-dialog__title" id="ui-confirm-title">{{ data.title }}</h3>
+        }
+        <p class="ui-confirm-dialog__message" id="ui-confirm-message">{{ data.message }}</p>
+      </div>
+
+      <!-- Azioni -->
+      <div class="ui-confirm-dialog__actions">
+        <ui-button
+          [label]="data.cancelText || 'Annulla'"
+          variant="ghost"
+          size="md"
+          (click)="cancel()"
+        />
+        <ui-button
+          [label]="data.confirmText || 'Conferma'"
+          [variant]="confirmButtonVariant"
+          size="md"
+          (click)="confirm()"
+        />
+      </div>
+    </div>
+  `, isInline: true, styles: [".ui-confirm-dialog-host{display:block}.ui-confirm-dialog{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--ui-spacing-8) var(--ui-spacing-6);background:var(--ui-color-surface);border-radius:var(--ui-radius-lg);box-shadow:var(--ui-shadow-lg)}.ui-confirm-dialog__icon{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:var(--ui-radius-full);margin-bottom:var(--ui-spacing-4)}.ui-confirm-dialog__icon--confirm{background:var(--ui-color-primary-light);color:var(--ui-color-primary)}.ui-confirm-dialog__icon--delete{background:var(--ui-color-warn-light);color:var(--ui-color-warn)}.ui-confirm-dialog__icon--warn{background:var(--ui-color-warning-light);color:var(--ui-color-warning)}.ui-confirm-dialog__icon--info{background:var(--ui-color-info-light);color:var(--ui-color-info)}.ui-confirm-dialog__content{margin-bottom:var(--ui-spacing-6)}.ui-confirm-dialog__title{margin:0 0 var(--ui-spacing-2);font-size:var(--ui-font-size-lg);font-weight:var(--ui-font-weight-semibold);color:var(--ui-color-text);line-height:var(--ui-line-height-tight)}.ui-confirm-dialog__message{margin:0;font-size:var(--ui-font-size-sm);color:var(--ui-color-text-secondary);line-height:var(--ui-line-height-normal);max-width:340px}.ui-confirm-dialog__actions{display:flex;gap:var(--ui-spacing-2);width:100%;justify-content:center}.ui-confirm-panel .mat-mdc-dialog-container{--mdc-dialog-container-color: transparent;--mdc-dialog-container-shape: var(--ui-radius-lg)}.ui-confirm-panel .mat-mdc-dialog-container .mdc-dialog__surface{background:transparent!important;box-shadow:none!important;border-radius:var(--ui-radius-lg)!important;overflow:visible}@media (max-width: 480px){.ui-confirm-dialog{padding:var(--ui-spacing-6) var(--ui-spacing-4)}.ui-confirm-dialog__actions{flex-direction:column-reverse;gap:var(--ui-spacing-2)}.ui-confirm-dialog__actions .ui-button-host{width:100%}}.ui-modal-backdrop{background:var(--ui-color-backdrop)}.ui-confirm-backdrop--stacked{background:#0000004d}\n"], dependencies: [{ kind: "ngmodule", type: LucideAngularModule }, { kind: "component", type: i1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }, { 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: UiConfirmDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-confirm-dialog', standalone: true, imports: [LucideAngularModule, UiButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'ui-confirm-dialog-host',
+                        role: 'alertdialog',
+                        'aria-modal': 'true',
+                        '[attr.aria-labelledby]': '"ui-confirm-title"',
+                        '[attr.aria-describedby]': '"ui-confirm-message"',
+                    }, template: `
+    <div class="ui-confirm-dialog">
+      <!-- Icona -->
+      <div [class]="iconClasses">
+        <lucide-icon [name]="iconName" [size]="32" aria-hidden="true" />
+      </div>
+
+      <!-- Contenuto -->
+      <div class="ui-confirm-dialog__content">
+        @if (data.title) {
+          <h3 class="ui-confirm-dialog__title" id="ui-confirm-title">{{ data.title }}</h3>
+        }
+        <p class="ui-confirm-dialog__message" id="ui-confirm-message">{{ data.message }}</p>
+      </div>
+
+      <!-- Azioni -->
+      <div class="ui-confirm-dialog__actions">
+        <ui-button
+          [label]="data.cancelText || 'Annulla'"
+          variant="ghost"
+          size="md"
+          (click)="cancel()"
+        />
+        <ui-button
+          [label]="data.confirmText || 'Conferma'"
+          [variant]="confirmButtonVariant"
+          size="md"
+          (click)="confirm()"
+        />
+      </div>
+    </div>
+  `, styles: [".ui-confirm-dialog-host{display:block}.ui-confirm-dialog{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--ui-spacing-8) var(--ui-spacing-6);background:var(--ui-color-surface);border-radius:var(--ui-radius-lg);box-shadow:var(--ui-shadow-lg)}.ui-confirm-dialog__icon{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:var(--ui-radius-full);margin-bottom:var(--ui-spacing-4)}.ui-confirm-dialog__icon--confirm{background:var(--ui-color-primary-light);color:var(--ui-color-primary)}.ui-confirm-dialog__icon--delete{background:var(--ui-color-warn-light);color:var(--ui-color-warn)}.ui-confirm-dialog__icon--warn{background:var(--ui-color-warning-light);color:var(--ui-color-warning)}.ui-confirm-dialog__icon--info{background:var(--ui-color-info-light);color:var(--ui-color-info)}.ui-confirm-dialog__content{margin-bottom:var(--ui-spacing-6)}.ui-confirm-dialog__title{margin:0 0 var(--ui-spacing-2);font-size:var(--ui-font-size-lg);font-weight:var(--ui-font-weight-semibold);color:var(--ui-color-text);line-height:var(--ui-line-height-tight)}.ui-confirm-dialog__message{margin:0;font-size:var(--ui-font-size-sm);color:var(--ui-color-text-secondary);line-height:var(--ui-line-height-normal);max-width:340px}.ui-confirm-dialog__actions{display:flex;gap:var(--ui-spacing-2);width:100%;justify-content:center}.ui-confirm-panel .mat-mdc-dialog-container{--mdc-dialog-container-color: transparent;--mdc-dialog-container-shape: var(--ui-radius-lg)}.ui-confirm-panel .mat-mdc-dialog-container .mdc-dialog__surface{background:transparent!important;box-shadow:none!important;border-radius:var(--ui-radius-lg)!important;overflow:visible}@media (max-width: 480px){.ui-confirm-dialog{padding:var(--ui-spacing-6) var(--ui-spacing-4)}.ui-confirm-dialog__actions{flex-direction:column-reverse;gap:var(--ui-spacing-2)}.ui-confirm-dialog__actions .ui-button-host{width:100%}}.ui-modal-backdrop{background:var(--ui-color-backdrop)}.ui-confirm-backdrop--stacked{background:#0000004d}\n"] }]
+        }] });
+
+/** @internal Mappatura dimensione -> larghezza CSS per il pannello overlay. */
+const SIZE_WIDTH_MAP = {
+    sm: '400px',
+    md: '560px',
+    lg: '720px',
+    xl: '900px',
+    fullscreen: '95vw',
+};
+/**
+ * Servizio per aprire modali e dialoghi di conferma.
+ *
+ * Gestisce lo stacking intelligente: una modale regolare puo
+ * ospitare al massimo un dialogo di conferma sopra di se.
+ * Non e possibile stackare due modali regolari.
+ *
+ * @usageNotes
+ *
+ * ### Aprire una modale personalizzata
+ * ```typescript
+ * const ref = this.modalService.open(MyDialogComponent, {
+ *   size: 'lg',
+ *   data: { userId: 123 },
+ * });
+ *
+ * ref.afterClosed().subscribe(result => {
+ *   console.log('Risultato:', result);
+ * });
+ * ```
+ *
+ * ### Conferma rapida
+ * ```typescript
+ * this.modalService.confirm('Confermi questa azione?')
+ *   .subscribe(ok => { if (ok) this.procedi(); });
+ * ```
+ *
+ * ### Preset di conferma
+ * ```typescript
+ * this.modalService.confirmDelete('Progetto Alpha')
+ *   .subscribe(ok => { if (ok) this.elimina(); });
+ * ```
+ */
+class UiModalService {
+    constructor() {
+        /** @internal Istanza MatDialog per la gestione overlay. */
+        this.dialog = inject(MatDialog);
+        /** @internal Stack delle modali regolari aperte. */
+        this._modalStack = [];
+        /** @internal Traccia se un dialogo di conferma e attualmente aperto. */
+        this._confirmOpen = false;
+    }
+    /**
+     * Apre una modale con un componente personalizzato.
+     *
+     * Il componente aperto puo iniettare `MAT_DIALOG_DATA` per accedere
+     * ai dati e `MatDialogRef` per chiudere la modale.
+     *
+     * @param component - Componente standalone da renderizzare nella modale
+     * @param config - Configurazione (dimensione, dati, comportamento)
+     * @returns Riferimento alla modale aperta
+     */
+    open(component, config) {
+        // Regola di stacking: non stackare due modali regolari
+        if (this._modalStack.length > 0) {
+            console.warn('[UiModalService] Una modale e gia aperta. ' +
+                'Usa confirm() per aprire un dialogo di conferma sopra la modale corrente.');
+        }
+        const size = config?.size || 'md';
+        const dialogConfig = {
+            width: SIZE_WIDTH_MAP[size],
+            maxWidth: size === 'fullscreen' ? '95vw' : '90vw',
+            maxHeight: size === 'fullscreen' ? '95vh' : '90vh',
+            height: size === 'fullscreen' ? '95vh' : undefined,
+            disableClose: config?.disableClose ?? false,
+            autoFocus: true,
+            restoreFocus: true,
+            data: config?.data,
+            panelClass: ['ui-modal-panel', `ui-modal-panel--${size}`, ...(config?.panelClass ? [config.panelClass] : [])],
+            hasBackdrop: true,
+            backdropClass: ['cdk-overlay-dark-backdrop', 'ui-modal-backdrop'],
+        };
+        const ref = this.dialog.open(component, dialogConfig);
+        this._modalStack.push(ref);
+        ref.afterClosed().subscribe(() => {
+            this._modalStack = this._modalStack.filter((r) => r !== ref);
+        });
+        return ref;
+    }
+    /**
+     * Apre un dialogo di conferma.
+     *
+     * Accetta una stringa semplice (messaggio) o un oggetto di
+     * configurazione completo. Puo essere aperto sopra una modale
+     * esistente (stacking consentito).
+     *
+     * @param messageOrConfig - Messaggio o configurazione completa
+     * @returns Observable che emette `true` se confermato, `false` se annullato
+     */
+    confirm(messageOrConfig) {
+        const data = typeof messageOrConfig === 'string' ? { message: messageOrConfig } : messageOrConfig;
+        // Un solo dialogo di conferma alla volta
+        if (this._confirmOpen) {
+            console.warn('[UiModalService] Un dialogo di conferma e gia aperto.');
+            return new Observable((subscriber) => {
+                subscriber.next(false);
+                subscriber.complete();
+            });
+        }
+        this._confirmOpen = true;
+        const dialogConfig = {
+            width: '420px',
+            maxWidth: '90vw',
+            disableClose: false,
+            autoFocus: false,
+            restoreFocus: true,
+            data,
+            panelClass: ['ui-confirm-panel'],
+            hasBackdrop: true,
+            backdropClass: this._modalStack.length > 0
+                ? ['cdk-overlay-dark-backdrop', 'ui-confirm-backdrop--stacked']
+                : ['cdk-overlay-dark-backdrop', 'ui-modal-backdrop'],
+        };
+        const ref = this.dialog.open(UiConfirmDialogComponent, dialogConfig);
+        return ref.afterClosed().pipe(map((result) => {
+            this._confirmOpen = false;
+            return !!result;
+        }));
+    }
+    /**
+     * Scorciatoia: conferma eliminazione.
+     * Variante `delete` con icona cestino e pulsante warn.
+     *
+     * @param itemName - Nome opzionale dell'elemento da eliminare
+     */
+    confirmDelete(itemName) {
+        return this.confirm({
+            title: 'Conferma eliminazione',
+            message: itemName
+                ? `Sei sicuro di voler eliminare "${itemName}"? Questa azione non puo essere annullata.`
+                : 'Sei sicuro di voler eliminare questo elemento? Questa azione non puo essere annullata.',
+            confirmText: 'Elimina',
+            cancelText: 'Annulla',
+            variant: 'delete',
+        });
+    }
+    /**
+     * Scorciatoia: conferma abbandono modifiche.
+     * Variante `warn` con icona avviso.
+     */
+    confirmDiscard() {
+        return this.confirm({
+            title: 'Modifiche non salvate',
+            message: 'Ci sono modifiche non salvate. Sei sicuro di voler uscire senza salvare?',
+            confirmText: 'Esci senza salvare',
+            cancelText: 'Rimani',
+            variant: 'warn',
+        });
+    }
+    /**
+     * Scorciatoia: conferma salvataggio.
+     * Variante `confirm` con icona check.
+     */
+    confirmSave() {
+        return this.confirm({
+            title: 'Conferma salvataggio',
+            message: 'Sei sicuro di voler salvare le modifiche?',
+            confirmText: 'Salva',
+            cancelText: 'Annulla',
+            variant: 'confirm',
+        });
+    }
+    /** Chiude tutte le modali e dialoghi aperti. */
+    closeAll() {
+        this.dialog.closeAll();
+        this._modalStack = [];
+        this._confirmOpen = false;
+    }
+    /** Indica se ci sono modali o dialoghi attualmente aperti. */
+    get hasOpenDialogs() {
+        return this.dialog.openDialogs.length > 0;
+    }
+    /** Numero di modali regolari attualmente aperte. */
+    get openModalCount() {
+        return this._modalStack.length;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiModalService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UiModalService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Bootstrap del secondary entry `@gnggln/ng-ui-system/modal`. Modal e Confirm Dialog.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { UiConfirmDialogComponent, UiModalComponent, UiModalService };
+//# sourceMappingURL=gnggln-ng-ui-system-modal.mjs.map