@ngx-smz/ui-kit 21.9.0-next.4 → 21.9.0-next.5

package/fesm2022/ngx-smz-ui-kit.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, input, booleanAttribute, computed, Directive, inject, TemplateRef, HostAttributeToken, ChangeDetectionStrategy, Component, ElementRef, output, forwardRef, Injector, DestroyRef, afterNextRender, Renderer2, effect, InjectionToken, viewChild, ViewContainerRef, Injectable, model, contentChildren, contentChild, afterEveryRender } from '@angular/core';
+import { signal, input, booleanAttribute, computed, Directive, inject, TemplateRef, HostAttributeToken, ChangeDetectionStrategy, Component, ElementRef, afterEveryRender, output, forwardRef, Injector, DestroyRef, afterNextRender, Renderer2, effect, InjectionToken, viewChild, ViewContainerRef, Injectable, model, contentChildren, contentChild } from '@angular/core';
 import { Overlay } from '@angular/cdk/overlay';
 import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
 import * as i1 from '@angular/forms';
@@ -644,18 +644,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
 /** Area de texto. Substitui o `pTextarea` / `pInputTextarea` do PrimeNG. */
 class SmzTextareaDirective {
     invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : {}), transform: booleanAttribute });
+    /** Cresce com o conteudo (equivale ao `autoResize` do `pTextarea`). */
+    autoResize = input(false, { ...(ngDevMode ? { debugName: "autoResize" } : {}), transform: booleanAttribute });
+    el = inject(ElementRef);
+    constructor() {
+        afterEveryRender(() => this.resize());
+    }
+    resize() {
+        if (!this.autoResize())
+            return;
+        const textarea = this.el.nativeElement;
+        textarea.style.overflow = 'hidden';
+        textarea.style.height = 'auto';
+        textarea.style.height = `${textarea.scrollHeight}px`;
+    }
     staticClass = smzStaticHostClass();
     classes = computed(() => smzMergeClasses(textareaClasses({ invalid: String(this.invalid()) }), this.staticClass), ...(ngDevMode ? [{ debugName: "classes" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzTextareaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: SmzTextareaDirective, isStandalone: true, selector: "textarea[smzTextarea]", inputs: { invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.aria-invalid": "invalid() || null" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: SmzTextareaDirective, isStandalone: true, selector: "textarea[smzTextarea]", inputs: { invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, autoResize: { classPropertyName: "autoResize", publicName: "autoResize", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "input": "resize()" }, properties: { "class": "classes()", "attr.aria-invalid": "invalid() || null" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzTextareaDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'textarea[smzTextarea]',
-                    host: { '[class]': 'classes()', '[attr.aria-invalid]': 'invalid() || null' },
+                    host: { '[class]': 'classes()', '[attr.aria-invalid]': 'invalid() || null', '(input)': 'resize()' },
                 }]
-        }], propDecorators: { invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], autoResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoResize", required: false }] }] } });
 
 /**
  * Checkbox do ui-kit. Substitui o `p-checkbox` do PrimeNG.
@@ -665,6 +679,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
  */
 class SmzCheckboxComponent extends SmzValueAccessor {
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    inputId = input('', ...(ngDevMode ? [{ debugName: "inputId" }] : []));
     /** Valor deste item quando o modelo e um array (modo grupo). */
     value = input(undefined, ...(ngDevMode ? [{ debugName: "value" }] : []));
     /** Forca o modo booleano mesmo com `value` informado. Mantido por compatibilidade com o Prime. */
@@ -691,7 +706,7 @@ class SmzCheckboxComponent extends SmzValueAccessor {
         this.changed.emit({ checked: this.checked(), value: this.current() });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzCheckboxComponent, isStandalone: true, selector: "ui-checkbox", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, binary: { classPropertyName: "binary", publicName: "binary", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, host: { classAttribute: "inline-flex" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SmzCheckboxComponent), multi: true }], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzCheckboxComponent, isStandalone: true, selector: "ui-checkbox", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, binary: { classPropertyName: "binary", publicName: "binary", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, host: { classAttribute: "inline-flex" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SmzCheckboxComponent), multi: true }], usesInheritance: true, ngImport: i0, template: `
     <label
       class="inline-flex items-center gap-2 font-ui text-ui-md text-ui-fg"
       [class]="isDisabled() ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'"
@@ -699,6 +714,7 @@ class SmzCheckboxComponent extends SmzValueAccessor {
       <input
         type="checkbox"
         class="peer sr-only"
+        [attr.id]="inputId() || null"
         [name]="name()"
         [checked]="checked()"
         [disabled]="isDisabled()"
@@ -737,6 +753,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
       <input
         type="checkbox"
         class="peer sr-only"
+        [attr.id]="inputId() || null"
         [name]="name()"
         [checked]="checked()"
         [disabled]="isDisabled()"
@@ -760,7 +777,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
     </label>
   `,
                 }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], binary: [{ type: i0.Input, args: [{ isSignal: true, alias: "binary", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], binary: [{ type: i0.Input, args: [{ isSignal: true, alias: "binary", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
 
 /**
  * Radio do ui-kit. Substitui o `p-radiobutton` do PrimeNG.
@@ -1857,6 +1874,15 @@ class SmzDialogComponent {
     style = input(null, ...(ngDevMode ? [{ debugName: "style" }] : []));
     styleClass = input('', ...(ngDevMode ? [{ debugName: "styleClass" }] : []));
     baseZIndex = input(0, ...(ngDevMode ? [{ debugName: "baseZIndex" }] : []));
+    /** Permite arrastar pelo cabecalho. */
+    draggable = input(false, { ...(ngDevMode ? { debugName: "draggable" } : {}), transform: booleanAttribute });
+    /** Mostra a alca nativa de redimensionar no canto inferior direito. */
+    resizable = input(false, { ...(ngDevMode ? { debugName: "resizable" } : {}), transform: booleanAttribute });
+    /** Mostra o botao de maximizar no cabecalho padrao (com `smzTemplate="header"` use `maximize()`). */
+    maximizable = input(false, { ...(ngDevMode ? { debugName: "maximizable" } : {}), transform: booleanAttribute });
+    maximized = model(false, ...(ngDevMode ? [{ debugName: "maximized" }] : []));
+    /** Posicao na tela (como o `position` do `p-dialog`). */
+    position = input('center', ...(ngDevMode ? [{ debugName: "position" }] : []));
     shown = output();
     hidden = output();
     panel = viewChild.required('panel');
@@ -1867,6 +1893,8 @@ class SmzDialogComponent {
     viewContainer = inject(ViewContainerRef);
     host = inject(ElementRef);
     overlayRef;
+    dx = signal(0, ...(ngDevMode ? [{ debugName: "dx" }] : []));
+    dy = signal(0, ...(ngDevMode ? [{ debugName: "dy" }] : []));
     constructor() {
         effect(() => {
             if (this.visible())
@@ -1874,6 +1902,51 @@ class SmzDialogComponent {
             else
                 this.dispose();
         });
+        effect(() => {
+            const position = this.position();
+            this.overlayRef?.updatePositionStrategy(this.strategyFor(position));
+        });
+    }
+    /** Alterna entre maximizado e normal. */
+    maximize() {
+        this.maximized.update((value) => !value);
+        this.dx.set(0);
+        this.dy.set(0);
+    }
+    startDrag(event) {
+        if (!this.draggable() || this.maximized() || event.target.closest('button'))
+            return;
+        event.preventDefault();
+        const startX = event.clientX - this.dx();
+        const startY = event.clientY - this.dy();
+        const move = (e) => {
+            this.dx.set(e.clientX - startX);
+            this.dy.set(e.clientY - startY);
+        };
+        const up = () => {
+            document.removeEventListener('pointermove', move);
+            document.removeEventListener('pointerup', up);
+        };
+        document.addEventListener('pointermove', move);
+        document.addEventListener('pointerup', up);
+    }
+    strategyFor(position) {
+        const strategy = this.overlay.position().global();
+        const horizontal = position.includes('left') ? 'left' : position.includes('right') ? 'right' : 'center';
+        const vertical = position.startsWith('top') ? 'top' : position.startsWith('bottom') ? 'bottom' : position === 'left' || position === 'right' || position === 'center' ? 'center' : 'center';
+        if (horizontal === 'left')
+            strategy.left('0');
+        else if (horizontal === 'right')
+            strategy.right('0');
+        else
+            strategy.centerHorizontally();
+        if (vertical === 'top')
+            strategy.top('0');
+        else if (vertical === 'bottom')
+            strategy.bottom('0');
+        else
+            strategy.centerVertically();
+        return strategy;
     }
     close() {
         this.visible.set(false);
@@ -1887,7 +1960,7 @@ class SmzDialogComponent {
         const modal = this.modal();
         this.overlayRef = this.overlay.create({
             hasBackdrop: modal,
-            positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),
+            positionStrategy: this.strategyFor(this.position()),
             scrollStrategy: this.overlay.scrollStrategies.block(),
         });
         SmzZIndex.set('modal', this.overlayRef.hostElement, 1100 + this.baseZIndex());
@@ -1919,24 +1992,33 @@ class SmzDialogComponent {
             this.overlayRef?.overlayElement.querySelector('[role="dialog"]')?.setAttribute('data-testid', testId);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzDialogComponent, isStandalone: true, selector: "ui-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, dismissableMask: { classPropertyName: "dismissableMask", publicName: "dismissableMask", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, baseZIndex: { classPropertyName: "baseZIndex", publicName: "baseZIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", shown: "shown", hidden: "hidden" }, queries: [{ propertyName: "templates", predicate: SmzTemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzDialogComponent, isStandalone: true, selector: "ui-dialog", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, dismissableMask: { classPropertyName: "dismissableMask", publicName: "dismissableMask", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, baseZIndex: { classPropertyName: "baseZIndex", publicName: "baseZIndex", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, maximizable: { classPropertyName: "maximizable", publicName: "maximizable", isSignal: true, isRequired: false, transformFunction: null }, maximized: { classPropertyName: "maximized", publicName: "maximized", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", maximized: "maximizedChange", shown: "shown", hidden: "hidden" }, queries: [{ propertyName: "templates", predicate: SmzTemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <ng-template #panel>
       <div
         role="dialog"
         aria-modal="true"
         [attr.aria-label]="header() || null"
-        class="pointer-events-auto flex max-h-[90vh] max-w-[95vw] flex-col rounded-overlay border border-ui-line bg-ui-surface-2 font-ui text-ui-fg shadow-overlay"
-        [class]="styleClass() ?? ''"
-        [ngStyle]="style()"
+        class="pointer-events-auto flex flex-col border border-ui-line bg-ui-surface-2 font-ui text-ui-fg shadow-overlay"
+        [class]="(maximized() ? 'h-screen w-screen max-h-none max-w-none rounded-none ' : 'max-h-[90vh] max-w-[95vw] rounded-overlay ') + (resizable() && !maximized() ? 'resize overflow-auto ' : '') + (styleClass() ?? '')"
+        [ngStyle]="maximized() ? null : style()"
+        [style.transform]="maximized() || (dx() === 0 && dy() === 0) ? null : 'translate(' + dx() + 'px, ' + dy() + 'px)'"
       >
         @if (headerTemplate(); as headerTpl) {
-          <div class="border-b border-ui-line px-4 py-3">
+          <div class="border-b border-ui-line px-4 py-3" [class.cursor-move]="draggable() && !maximized()" (pointerdown)="startDrag($event)">
             <ng-container [ngTemplateOutlet]="headerTpl" />
           </div>
         }
         @else if (header() || closable()) {
-          <div class="flex items-center justify-between gap-4 border-b border-ui-line px-4 py-3">
+          <div class="flex items-center justify-between gap-4 border-b border-ui-line px-4 py-3" [class.cursor-move]="draggable() && !maximized()" (pointerdown)="startDrag($event)">
             <span class="text-ui-lg font-medium">{{ header() }}</span>
+            <div class="flex items-center gap-1">
+            @if (maximizable()) {
+              <button type="button" class="inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-ui-fg-muted transition-colors duration-ui hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus" [attr.aria-label]="maximized() ? 'Restaurar' : 'Maximizar'" (click)="maximize()">
+                <svg viewBox="0 0 16 16" class="h-4 w-4" fill="none" aria-hidden="true">
+                  @if (maximized()) { <path d="M5 3h8v8M3 5h8v8H3z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" /> } @else { <rect x="3" y="3" width="10" height="10" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" /> }
+                </svg>
+              </button>
+            }
             @if (closable()) {
               <button
                 type="button"
@@ -1949,6 +2031,7 @@ class SmzDialogComponent {
                 </svg>
               </button>
             }
+            </div>
           </div>
         }
         <div class="min-h-0 flex-1 overflow-auto p-4"><ng-content /></div>
@@ -1973,18 +2056,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
         role="dialog"
         aria-modal="true"
         [attr.aria-label]="header() || null"
-        class="pointer-events-auto flex max-h-[90vh] max-w-[95vw] flex-col rounded-overlay border border-ui-line bg-ui-surface-2 font-ui text-ui-fg shadow-overlay"
-        [class]="styleClass() ?? ''"
-        [ngStyle]="style()"
+        class="pointer-events-auto flex flex-col border border-ui-line bg-ui-surface-2 font-ui text-ui-fg shadow-overlay"
+        [class]="(maximized() ? 'h-screen w-screen max-h-none max-w-none rounded-none ' : 'max-h-[90vh] max-w-[95vw] rounded-overlay ') + (resizable() && !maximized() ? 'resize overflow-auto ' : '') + (styleClass() ?? '')"
+        [ngStyle]="maximized() ? null : style()"
+        [style.transform]="maximized() || (dx() === 0 && dy() === 0) ? null : 'translate(' + dx() + 'px, ' + dy() + 'px)'"
       >
         @if (headerTemplate(); as headerTpl) {
-          <div class="border-b border-ui-line px-4 py-3">
+          <div class="border-b border-ui-line px-4 py-3" [class.cursor-move]="draggable() && !maximized()" (pointerdown)="startDrag($event)">
             <ng-container [ngTemplateOutlet]="headerTpl" />
           </div>
         }
         @else if (header() || closable()) {
-          <div class="flex items-center justify-between gap-4 border-b border-ui-line px-4 py-3">
+          <div class="flex items-center justify-between gap-4 border-b border-ui-line px-4 py-3" [class.cursor-move]="draggable() && !maximized()" (pointerdown)="startDrag($event)">
             <span class="text-ui-lg font-medium">{{ header() }}</span>
+            <div class="flex items-center gap-1">
+            @if (maximizable()) {
+              <button type="button" class="inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-ui-fg-muted transition-colors duration-ui hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus" [attr.aria-label]="maximized() ? 'Restaurar' : 'Maximizar'" (click)="maximize()">
+                <svg viewBox="0 0 16 16" class="h-4 w-4" fill="none" aria-hidden="true">
+                  @if (maximized()) { <path d="M5 3h8v8M3 5h8v8H3z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" /> } @else { <rect x="3" y="3" width="10" height="10" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" /> }
+                </svg>
+              </button>
+            }
             @if (closable()) {
               <button
                 type="button"
@@ -1997,6 +2089,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                 </svg>
               </button>
             }
+            </div>
           </div>
         }
         <div class="min-h-0 flex-1 overflow-auto p-4"><ng-content /></div>
@@ -2009,7 +2102,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
     </ng-template>
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], dismissableMask: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissableMask", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], baseZIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseZIndex", required: false }] }], shown: [{ type: i0.Output, args: ["shown"] }], hidden: [{ type: i0.Output, args: ["hidden"] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SmzTemplateDirective), { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], dismissableMask: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissableMask", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], baseZIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseZIndex", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], maximizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "maximizable", required: false }] }], maximized: [{ type: i0.Input, args: [{ isSignal: true, alias: "maximized", required: false }] }, { type: i0.Output, args: ["maximizedChange"] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], shown: [{ type: i0.Output, args: ["shown"] }], hidden: [{ type: i0.Output, args: ["hidden"] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SmzTemplateDirective), { isSignal: true }] }] } });
 
 const POSITIONS$2 = [
     { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 8 },
@@ -3811,9 +3904,11 @@ class SmzSelectButtonComponent extends SmzValueAccessor {
     /** Aceito por compatibilidade com o `p-selectbutton`; sem efeito. */
     appendTo = input(undefined, ...(ngDevMode ? [{ debugName: "appendTo" }] : []));
     changed = output();
+    /** Sem `optionLabel`/`optionValue`, opcoes-objeto com `label`/`value` sao lidas automaticamente (como no PrimeNG). */
+    sample = computed(() => (this.options() ?? [])[0], ...(ngDevMode ? [{ debugName: "sample" }] : []));
     config = computed(() => ({
-        optionLabel: this.optionLabel(),
-        optionValue: this.optionValue(),
+        optionLabel: this.optionLabel() ?? (typeof this.sample() === 'object' && this.sample() !== null && 'label' in this.sample() ? 'label' : null),
+        optionValue: this.optionValue() ?? (typeof this.sample() === 'object' && this.sample() !== null && 'value' in this.sample() ? 'value' : null),
         optionDisabled: this.optionDisabled(),
         dataKey: this.dataKey(),
     }), ...(ngDevMode ? [{ debugName: "config" }] : []));
@@ -5677,6 +5772,8 @@ class SmzInputMaskComponent extends SmzValueAccessor {
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
     readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : {}), transform: booleanAttribute });
     inputId = input('', ...(ngDevMode ? [{ debugName: "inputId" }] : []));
+    /** Tipo do `<input>` nativo (`text`, `tel`, `password`...). */
+    type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : []));
     inputed = output();
     blurred = output();
     completed = output();
@@ -5825,10 +5922,10 @@ class SmzInputMaskComponent extends SmzValueAccessor {
         this.field().nativeElement.setSelectionRange(position, position);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzInputMaskComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.1", type: SmzInputMaskComponent, isStandalone: true, selector: "ui-input-mask", inputs: { mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, slotChar: { classPropertyName: "slotChar", publicName: "slotChar", isSignal: true, isRequired: false, transformFunction: null }, characterPattern: { classPropertyName: "characterPattern", publicName: "characterPattern", isSignal: true, isRequired: false, transformFunction: null }, unmask: { classPropertyName: "unmask", publicName: "unmask", isSignal: true, isRequired: false, transformFunction: null }, autoClear: { classPropertyName: "autoClear", publicName: "autoClear", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputed: "inputed", blurred: "blurred", completed: "completed" }, host: { classAttribute: "flex min-w-0" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SmzInputMaskComponent), multi: true }], viewQueries: [{ propertyName: "field", first: true, predicate: ["field"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.1", type: SmzInputMaskComponent, isStandalone: true, selector: "ui-input-mask", inputs: { mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, slotChar: { classPropertyName: "slotChar", publicName: "slotChar", isSignal: true, isRequired: false, transformFunction: null }, characterPattern: { classPropertyName: "characterPattern", publicName: "characterPattern", isSignal: true, isRequired: false, transformFunction: null }, unmask: { classPropertyName: "unmask", publicName: "unmask", isSignal: true, isRequired: false, transformFunction: null }, autoClear: { classPropertyName: "autoClear", publicName: "autoClear", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputed: "inputed", blurred: "blurred", completed: "completed" }, host: { classAttribute: "flex min-w-0" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SmzInputMaskComponent), multi: true }], viewQueries: [{ propertyName: "field", first: true, predicate: ["field"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     <input
       #field
-      type="text"
+      [attr.type]="type()"
       class="h-control w-full min-w-0 rounded-control border border-ui-line-strong bg-ui-surface-1 px-control-x font-ui text-ui-md text-ui-fg transition-colors duration-ui placeholder:text-ui-fg-subtle focus:outline-none focus:ring-2 focus:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-50 [&.ng-invalid.ng-dirty]:border-ui-danger"
       [attr.id]="inputId() || null"
       [attr.placeholder]="placeholder() || null"
@@ -5853,7 +5950,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                     template: `
     <input
       #field
-      type="text"
+      [attr.type]="type()"
       class="h-control w-full min-w-0 rounded-control border border-ui-line-strong bg-ui-surface-1 px-control-x font-ui text-ui-md text-ui-fg transition-colors duration-ui placeholder:text-ui-fg-subtle focus:outline-none focus:ring-2 focus:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-50 [&.ng-invalid.ng-dirty]:border-ui-danger"
       [attr.id]="inputId() || null"
       [attr.placeholder]="placeholder() || null"
@@ -5868,7 +5965,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
     />
   `,
                 }]
-        }], propDecorators: { mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], slotChar: [{ type: i0.Input, args: [{ isSignal: true, alias: "slotChar", required: false }] }], characterPattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "characterPattern", required: false }] }], unmask: [{ type: i0.Input, args: [{ isSignal: true, alias: "unmask", required: false }] }], autoClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoClear", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], inputed: [{ type: i0.Output, args: ["inputed"] }], blurred: [{ type: i0.Output, args: ["blurred"] }], completed: [{ type: i0.Output, args: ["completed"] }], field: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }] } });
+        }], propDecorators: { mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], slotChar: [{ type: i0.Input, args: [{ isSignal: true, alias: "slotChar", required: false }] }], characterPattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "characterPattern", required: false }] }], unmask: [{ type: i0.Input, args: [{ isSignal: true, alias: "unmask", required: false }] }], autoClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoClear", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], inputed: [{ type: i0.Output, args: ["inputed"] }], blurred: [{ type: i0.Output, args: ["blurred"] }], completed: [{ type: i0.Output, args: ["completed"] }], field: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }] } });
 
 /* eslint-disable max-len -- classes Tailwind nos templates */
 const DEFAULT_MEDIUM = '^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})';
@@ -6028,15 +6125,19 @@ class SmzColorPickerComponent extends SmzValueAccessor {
     inputId = input('', ...(ngDevMode ? [{ debugName: "inputId" }] : []));
     /** Aceito por compatibilidade com o `p-colorpicker`; sem efeito. */
     appendTo = input(undefined, ...(ngDevMode ? [{ debugName: "appendTo" }] : []));
+    /** Emitido quando o usuario escolhe uma cor (equivale ao `onChange` do `p-colorpicker`). */
+    changed = output();
     hex = computed(() => {
         const raw = (this.current() ?? '').replace('#', '');
         return /^[0-9a-fA-F]{6}$/.test(raw) ? `#${raw.toLowerCase()}` : '#000000';
     }, ...(ngDevMode ? [{ debugName: "hex" }] : []));
     onInput(event) {
-        this.commit(event.target.value.replace('#', ''));
+        const value = event.target.value.replace('#', '');
+        this.commit(value);
+        this.changed.emit({ originalEvent: event, value });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzColorPickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: SmzColorPickerComponent, isStandalone: true, selector: "ui-color-picker", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "inline-flex" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SmzColorPickerComponent), multi: true }], usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: SmzColorPickerComponent, isStandalone: true, selector: "ui-color-picker", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, host: { classAttribute: "inline-flex" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SmzColorPickerComponent), multi: true }], usesInheritance: true, ngImport: i0, template: `
     <input
       type="color"
       class="h-control w-12 cursor-pointer rounded-control border border-ui-line-strong bg-ui-surface-1 p-1 focus:outline-none focus:ring-2 focus:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-50"
@@ -6067,7 +6168,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
     />
   `,
                 }]
-        }], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }] } });
+        }], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
 
 /* eslint-disable max-len -- classes Tailwind nos templates */
 /**
@@ -6218,12 +6319,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
 class SmzAccordionComponent {
     value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
     multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : {}), transform: booleanAttribute });
+    /** Um painel foi aberto (equivale ao `onOpen` do `p-accordion`). */
+    opened = output();
+    /** Um painel foi fechado (equivale ao `onClose`). */
+    closed = output();
+    /** Aceito por compatibilidade com o `p-accordion`; sem efeito. */
+    transitionOptions = input(null, ...(ngDevMode ? [{ debugName: "transitionOptions" }] : []));
     isOpen(value) {
         const current = this.value();
         return Array.isArray(current) ? current.includes(value) : current === value;
     }
     toggle(value) {
         const open = this.isOpen(value);
+        (open ? this.closed : this.opened).emit({ value });
         if (this.multiple()) {
             const current = Array.isArray(this.value()) ? this.value() : this.value() === null ? [] : [this.value()];
             this.value.set(open ? current.filter((entry) => entry !== value) : [...current, value]);
@@ -6233,7 +6341,7 @@ class SmzAccordionComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: SmzAccordionComponent, isStandalone: true, selector: "ui-accordion", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "block overflow-hidden rounded-control border border-ui-line font-ui text-ui-fg" }, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: SmzAccordionComponent, isStandalone: true, selector: "ui-accordion", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, transitionOptions: { classPropertyName: "transitionOptions", publicName: "transitionOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", opened: "opened", closed: "closed" }, host: { classAttribute: "block overflow-hidden rounded-control border border-ui-line font-ui text-ui-fg" }, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzAccordionComponent, decorators: [{
             type: Component,
@@ -6243,7 +6351,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                     host: { class: 'block overflow-hidden rounded-control border border-ui-line font-ui text-ui-fg' },
                     template: '<ng-content />',
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], transitionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "transitionOptions", required: false }] }] } });
 class SmzAccordionPanelComponent {
     value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
     accordion = inject(SmzAccordionComponent);
@@ -6597,7 +6705,7 @@ class SmzPaginatorComponent {
         <button type="button" class="inline-flex h-8 min-w-8 cursor-pointer items-center justify-center rounded-control px-2 font-ui text-ui-sm text-ui-fg transition-colors duration-ui hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent" aria-label="Pagina anterior" [disabled]="isFirst()" (click)="goTo(page() - 1)">
           <svg viewBox="0 0 16 16" class="h-4 w-4" fill="none" aria-hidden="true"><path d="M10 4L6 8l4 4" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" /></svg>
         </button>
-        @if (showPageLinks()) {
+        @if (showPageLinks() && totalRecords() > 0) {
           @for (link of links(); track link) {
             <button
               type="button"
@@ -6642,7 +6750,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
         <button type="button" class="inline-flex h-8 min-w-8 cursor-pointer items-center justify-center rounded-control px-2 font-ui text-ui-sm text-ui-fg transition-colors duration-ui hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent" aria-label="Pagina anterior" [disabled]="isFirst()" (click)="goTo(page() - 1)">
           <svg viewBox="0 0 16 16" class="h-4 w-4" fill="none" aria-hidden="true"><path d="M10 4L6 8l4 4" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" /></svg>
         </button>
-        @if (showPageLinks()) {
+        @if (showPageLinks() && totalRecords() > 0) {
           @for (link of links(); track link) {
             <button
               type="button"
@@ -8009,24 +8117,24 @@ class SmzCardComponent {
     subtitleTemplate = computed(() => smzFindTemplate(this.templates(), 'subtitle'), ...(ngDevMode ? [{ debugName: "subtitleTemplate" }] : []));
     footerTemplate = computed(() => smzFindTemplate(this.templates(), 'footer'), ...(ngDevMode ? [{ debugName: "footerTemplate" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzCardComponent, isStandalone: true, selector: "ui-card", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, subheader: { classPropertyName: "subheader", publicName: "subheader", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "flex flex-col overflow-hidden rounded-card border border-ui-line bg-ui-surface-1 font-ui text-ui-md text-ui-fg shadow-card" }, queries: [{ propertyName: "templates", predicate: SmzTemplateDirective, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzCardComponent, isStandalone: true, selector: "ui-card", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, subheader: { classPropertyName: "subheader", publicName: "subheader", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "p-card flex flex-col overflow-hidden rounded-card border border-ui-line bg-ui-surface-1 font-ui text-ui-md text-ui-fg shadow-card" }, queries: [{ propertyName: "templates", predicate: SmzTemplateDirective, isSignal: true }], ngImport: i0, template: `
     @if (headerTemplate(); as tpl) {
-      <div><ng-container [ngTemplateOutlet]="tpl" /></div>
+      <div class="p-card-header"><ng-container [ngTemplateOutlet]="tpl" /></div>
     }
-    <div class="flex flex-1 flex-col gap-2 p-5">
+    <div class="p-card-body flex flex-1 flex-col gap-2 p-5">
       @if (titleTemplate() || header()) {
-        <div class="text-ui-xl font-semibold">
+        <div class="p-card-title text-ui-xl font-semibold">
           @if (titleTemplate(); as tpl) { <ng-container [ngTemplateOutlet]="tpl" /> } @else { {{ header() }} }
         </div>
       }
       @if (subtitleTemplate() || subheader()) {
-        <div class="text-ui-fg-muted">
+        <div class="p-card-subtitle text-ui-fg-muted">
           @if (subtitleTemplate(); as tpl) { <ng-container [ngTemplateOutlet]="tpl" /> } @else { {{ subheader() }} }
         </div>
       }
-      <div class="flex-1"><ng-content /></div>
+      <div class="p-card-content flex-1"><ng-content /></div>
       @if (footerTemplate(); as tpl) {
-        <div><ng-container [ngTemplateOutlet]="tpl" /></div>
+        <div class="p-card-footer"><ng-container [ngTemplateOutlet]="tpl" /></div>
       }
     </div>
   `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -8037,25 +8145,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                     selector: 'ui-card',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [NgTemplateOutlet],
-                    host: { class: 'flex flex-col overflow-hidden rounded-card border border-ui-line bg-ui-surface-1 font-ui text-ui-md text-ui-fg shadow-card' },
+                    host: { class: 'p-card flex flex-col overflow-hidden rounded-card border border-ui-line bg-ui-surface-1 font-ui text-ui-md text-ui-fg shadow-card' },
                     template: `
     @if (headerTemplate(); as tpl) {
-      <div><ng-container [ngTemplateOutlet]="tpl" /></div>
+      <div class="p-card-header"><ng-container [ngTemplateOutlet]="tpl" /></div>
     }
-    <div class="flex flex-1 flex-col gap-2 p-5">
+    <div class="p-card-body flex flex-1 flex-col gap-2 p-5">
       @if (titleTemplate() || header()) {
-        <div class="text-ui-xl font-semibold">
+        <div class="p-card-title text-ui-xl font-semibold">
           @if (titleTemplate(); as tpl) { <ng-container [ngTemplateOutlet]="tpl" /> } @else { {{ header() }} }
         </div>
       }
       @if (subtitleTemplate() || subheader()) {
-        <div class="text-ui-fg-muted">
+        <div class="p-card-subtitle text-ui-fg-muted">
           @if (subtitleTemplate(); as tpl) { <ng-container [ngTemplateOutlet]="tpl" /> } @else { {{ subheader() }} }
         </div>
       }
-      <div class="flex-1"><ng-content /></div>
+      <div class="p-card-content flex-1"><ng-content /></div>
       @if (footerTemplate(); as tpl) {
-        <div><ng-container [ngTemplateOutlet]="tpl" /></div>
+        <div class="p-card-footer"><ng-container [ngTemplateOutlet]="tpl" /></div>
       }
     </div>
   `,
@@ -8087,9 +8195,9 @@ class SmzPanelComponent {
         this.afterToggle.emit({ originalEvent: event, collapsed: next });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzPanelComponent, isStandalone: true, selector: "ui-panel", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", beforeToggle: "beforeToggle", afterToggle: "afterToggle" }, host: { classAttribute: "block overflow-hidden rounded-card border border-ui-line bg-ui-surface-1 font-ui text-ui-md text-ui-fg" }, queries: [{ propertyName: "templates", predicate: SmzTemplateDirective, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzPanelComponent, isStandalone: true, selector: "ui-panel", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", beforeToggle: "beforeToggle", afterToggle: "afterToggle" }, host: { classAttribute: "p-panel block overflow-hidden rounded-card border border-ui-line bg-ui-surface-1 font-ui text-ui-md text-ui-fg" }, queries: [{ propertyName: "templates", predicate: SmzTemplateDirective, isSignal: true }], ngImport: i0, template: `
     @if (hasHeader()) {
-      <div class="flex items-center justify-between gap-2 border-b border-ui-line bg-ui-surface-1 px-4 py-3">
+      <div class="p-panel-header flex items-center justify-between gap-2 border-b border-ui-line bg-ui-surface-1 px-4 py-3">
         <div class="min-w-0 flex-1 font-semibold">
           @if (headerTemplate(); as tpl) { <ng-container [ngTemplateOutlet]="tpl" /> } @else { {{ header() }} }
         </div>
@@ -8104,9 +8212,9 @@ class SmzPanelComponent {
       </div>
     }
     @if (!collapsed()) {
-      <div class="p-4"><ng-content /></div>
+      <div class="p-panel-content p-4"><ng-content /></div>
       @if (footerTemplate(); as tpl) {
-        <div class="border-t border-ui-line px-4 py-3"><ng-container [ngTemplateOutlet]="tpl" /></div>
+        <div class="p-panel-footer border-t border-ui-line px-4 py-3"><ng-container [ngTemplateOutlet]="tpl" /></div>
       }
     }
   `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -8117,10 +8225,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                     selector: 'ui-panel',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [NgTemplateOutlet],
-                    host: { class: 'block overflow-hidden rounded-card border border-ui-line bg-ui-surface-1 font-ui text-ui-md text-ui-fg' },
+                    host: { class: 'p-panel block overflow-hidden rounded-card border border-ui-line bg-ui-surface-1 font-ui text-ui-md text-ui-fg' },
                     template: `
     @if (hasHeader()) {
-      <div class="flex items-center justify-between gap-2 border-b border-ui-line bg-ui-surface-1 px-4 py-3">
+      <div class="p-panel-header flex items-center justify-between gap-2 border-b border-ui-line bg-ui-surface-1 px-4 py-3">
         <div class="min-w-0 flex-1 font-semibold">
           @if (headerTemplate(); as tpl) { <ng-container [ngTemplateOutlet]="tpl" /> } @else { {{ header() }} }
         </div>
@@ -8135,9 +8243,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
       </div>
     }
     @if (!collapsed()) {
-      <div class="p-4"><ng-content /></div>
+      <div class="p-panel-content p-4"><ng-content /></div>
       @if (footerTemplate(); as tpl) {
-        <div class="border-t border-ui-line px-4 py-3"><ng-container [ngTemplateOutlet]="tpl" /></div>
+        <div class="p-panel-footer border-t border-ui-line px-4 py-3"><ng-container [ngTemplateOutlet]="tpl" /></div>
       }
     }
   `,
@@ -8405,6 +8513,14 @@ class SmzTreeTableComponent {
     rowsPerPageOptions = input(null, ...(ngDevMode ? [{ debugName: "rowsPerPageOptions" }] : []));
     sortField = model(null, ...(ngDevMode ? [{ debugName: "sortField" }] : []));
     sortOrder = model(1, ...(ngDevMode ? [{ debugName: "sortOrder" }] : []));
+    /** Destaca a linha sob o cursor (padrao: ligado). */
+    rowHover = input(true, { ...(ngDevMode ? { debugName: "rowHover" } : {}), transform: booleanAttribute });
+    showCurrentPageReport = input(false, { ...(ngDevMode ? { debugName: "showCurrentPageReport" } : {}), transform: booleanAttribute });
+    currentPageReportTemplate = input('Mostrando {first} a {last} de {totalRecords}', ...(ngDevMode ? [{ debugName: "currentPageReportTemplate" }] : []));
+    /** Campos (de `node.data`) consultados pelo filtro global. */
+    globalFilterFields = input(null, ...(ngDevMode ? [{ debugName: "globalFilterFields" }] : []));
+    /** `lenient`: um no que casa mantem toda a sua subarvore; `strict`: so os nos que casam (e seus ancestrais). */
+    filterMode = input('lenient', ...(ngDevMode ? [{ debugName: "filterMode" }] : []));
     nodeSelect = output();
     nodeUnselect = output();
     nodeExpand = output();
@@ -8420,17 +8536,69 @@ class SmzTreeTableComponent {
     summaryTemplate = computed(() => smzFindTemplate(this.templates(), 'summary'), ...(ngDevMode ? [{ debugName: "summaryTemplate" }] : []));
     /** Os nos sao mutaveis (`expanded`, `partialSelected`); este contador forca o recalculo das linhas. */
     version = signal(0, ...(ngDevMode ? [{ debugName: "version" }] : []));
-    rootCount = computed(() => (this.value() ?? []).length, ...(ngDevMode ? [{ debugName: "rootCount" }] : []));
+    filterService = inject(SmzFilterService);
+    globalFilter = signal(null, ...(ngDevMode ? [{ debugName: "globalFilter" }] : []));
+    columnFilters = signal({}, ...(ngDevMode ? [{ debugName: "columnFilters" }] : []));
+    /** Nos raiz que passam nos filtros (global e por coluna), ou `null` quando nao ha filtro ativo. */
+    get filteredNodes() {
+        return this.visibility()?.roots ?? null;
+    }
+    /** Visibilidade calculada dos filtros: quais nos aparecem e quais ancestrais expandir. */
+    visibility = computed(() => {
+        this.version();
+        const global = this.globalFilter();
+        const columns = this.columnFilters();
+        const active = Object.entries(columns).filter(([, filter]) => filter.value !== null && filter.value !== undefined && filter.value !== '');
+        if (!global?.value && active.length === 0)
+            return null;
+        const matches = (node) => {
+            for (const [field, filter] of active) {
+                const test = this.filterService.filters[filter.matchMode] ?? this.filterService.filters['contains'];
+                if (!test(SmzObjectUtils.resolveFieldData(node.data, field), filter.value))
+                    return false;
+            }
+            if (global?.value) {
+                const test = this.filterService.filters[global.matchMode] ?? this.filterService.filters['contains'];
+                const fields = this.globalFilterFields() ?? Object.keys(node.data ?? {});
+                if (!fields.some((field) => test(SmzObjectUtils.resolveFieldData(node.data, field), global.value)))
+                    return false;
+            }
+            return true;
+        };
+        const visible = new Set();
+        const expand = new Set();
+        const lenient = this.filterMode() === 'lenient';
+        const mark = (node, forced) => {
+            const self = matches(node);
+            let anyChild = false;
+            for (const child of node.children ?? []) {
+                if (mark(child, forced || (lenient && self)))
+                    anyChild = true;
+            }
+            const show = self || anyChild || forced;
+            if (show)
+                visible.add(node);
+            if (anyChild && !self)
+                expand.add(node);
+            return self || anyChild;
+        };
+        const roots = (this.value() ?? []).filter((node) => mark(node, false));
+        return { roots, visible, expand };
+    }, ...(ngDevMode ? [{ debugName: "visibility" }] : []));
+    rootCount = computed(() => this.visibility()?.roots.length ?? (this.value() ?? []).length, ...(ngDevMode ? [{ debugName: "rootCount" }] : []));
     flatRows = computed(() => {
         this.version();
         const field = this.sortField();
         const order = this.sortOrder();
+        const filter = this.visibility();
         const out = [];
         const sort = (nodes) => field ? [...nodes].sort((a, b) => order * compareValues(SmzObjectUtils.resolveFieldData(a.data, field), SmzObjectUtils.resolveFieldData(b.data, field))) : nodes;
         const walk = (nodes, parent, level) => {
             for (const node of sort(nodes)) {
+                if (filter && !filter.visible.has(node))
+                    continue;
                 out.push({ node, parent, level });
-                if (node.expanded && node.children?.length)
+                if ((node.expanded || filter?.expand.has(node)) && node.children?.length)
                     walk(node.children, node, level + 1);
             }
         };
@@ -8451,6 +8619,24 @@ class SmzTreeTableComponent {
             return include;
         });
     }, ...(ngDevMode ? [{ debugName: "pageRows" }] : []));
+    /** Filtro global (equivale a `filterGlobal` do `p-treeTable`). */
+    filterGlobal(value, matchMode = 'contains') {
+        this.globalFilter.set(value ? { value, matchMode } : null);
+        this.first.set(0);
+    }
+    /** Filtro de uma coluna (campo de `node.data`). Valor vazio remove o filtro. */
+    filter(value, field, matchMode = 'contains') {
+        this.columnFilters.update((current) => ({ ...current, [field]: { value, matchMode } }));
+        this.first.set(0);
+    }
+    /** Limpa filtros, ordenacao e volta para a primeira pagina (equivale a `clear()` do `p-treeTable`). */
+    clear() {
+        this.globalFilter.set(null);
+        this.columnFilters.set({});
+        this.sortField.set(null);
+        this.sortOrder.set(1);
+        this.first.set(0);
+    }
     refresh() {
         this.version.update((v) => v + 1);
     }
@@ -8559,46 +8745,46 @@ class SmzTreeTableComponent {
         return search(this.value() ?? [], null) ?? null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzTreeTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzTreeTableComponent, isStandalone: true, selector: "ui-tree-table", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, propagateSelectionUp: { classPropertyName: "propagateSelectionUp", publicName: "propagateSelectionUp", isSignal: true, isRequired: false, transformFunction: null }, propagateSelectionDown: { classPropertyName: "propagateSelectionDown", publicName: "propagateSelectionDown", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, tableStyleClass: { classPropertyName: "tableStyleClass", publicName: "tableStyleClass", isSignal: true, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, first: { classPropertyName: "first", publicName: "first", isSignal: true, isRequired: false, transformFunction: null }, rowsPerPageOptions: { classPropertyName: "rowsPerPageOptions", publicName: "rowsPerPageOptions", isSignal: true, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: true, isRequired: false, transformFunction: null }, sortOrder: { classPropertyName: "sortOrder", publicName: "sortOrder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", rows: "rowsChange", first: "firstChange", sortField: "sortFieldChange", sortOrder: "sortOrderChange", nodeSelect: "nodeSelect", nodeUnselect: "nodeUnselect", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", sorted: "sorted", page: "page" }, host: { classAttribute: "block overflow-hidden rounded-control border border-ui-line bg-ui-surface-1 font-ui text-ui-md text-ui-fg" }, queries: [{ propertyName: "templates", predicate: SmzTemplateDirective, isSignal: true }], ngImport: i0, template: `
-    @if (captionTemplate(); as tpl) {
-      <div class="border-b border-ui-line px-4 py-3"><ng-container [ngTemplateOutlet]="tpl" /></div>
-    }
-    <div class="relative overflow-auto" [style.max-height]="scrollable() ? scrollHeight() : null">
-      <table class="w-full border-separate border-spacing-0 text-left [&_td]:border-b [&_td]:border-ui-line [&_td]:px-4 [&_td]:py-3 [&_th]:sticky [&_th]:top-0 [&_th]:border-b [&_th]:border-ui-line [&_th]:bg-ui-surface-1 [&_th]:px-4 [&_th]:py-3 [&_th]:font-semibold" [class]="tableStyleClass() ?? ''">
-        <thead>
-          @if (headerTemplate(); as tpl) {
-            <ng-container [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{ $implicit: columns() }" />
-          }
-        </thead>
-        <tbody>
-          @for (row of pageRows(); track row.node.key ?? row.node) {
-            <ng-container [ngTemplateOutlet]="bodyTemplate() ?? null" [ngTemplateOutletContext]="{ $implicit: row, rowNode: row, node: row.node, rowData: row.node.data, columns: columns() }" />
-          } @empty {
-            @if (!loading()) {
-              <tr>
-                <td [attr.colspan]="columns().length || 1" class="px-4 py-6 text-center text-ui-fg-muted">
-                  @if (emptyTemplate(); as tpl) { <ng-container [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{ $implicit: columns() }" /> } @else { {{ emptyMessage() }} }
-                </td>
-              </tr>
-            }
-          }
-        </tbody>
-        @if (footerTemplate(); as tpl) {
-          <tfoot><ng-container [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{ $implicit: columns() }" /></tfoot>
-        }
-      </table>
-      @if (loading()) {
-        <div class="absolute inset-0 flex items-center justify-center bg-ui-surface-1/60 text-ui-primary" role="status">
-          <svg viewBox="0 0 50 50" class="h-8 w-8 animate-spin" fill="none" aria-hidden="true"><circle cx="25" cy="25" r="20" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-dasharray="90 150" /></svg>
-        </div>
-      }
-    </div>
-    @if (paginator()) {
-      <ui-paginator class="border-t border-ui-line" [first]="first()" [rows]="rows()" [totalRecords]="rootCount()" [rowsPerPageOptions]="rowsPerPageOptions()" (firstChange)="first.set($event)" (rowsChange)="rows.set($event)" (pageChanged)="page.emit($event)" />
-    }
-    @if (summaryTemplate(); as tpl) {
-      <div class="border-t border-ui-line px-4 py-3"><ng-container [ngTemplateOutlet]="tpl" /></div>
-    }
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzTreeTableComponent, isStandalone: true, selector: "ui-tree-table", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, propagateSelectionUp: { classPropertyName: "propagateSelectionUp", publicName: "propagateSelectionUp", isSignal: true, isRequired: false, transformFunction: null }, propagateSelectionDown: { classPropertyName: "propagateSelectionDown", publicName: "propagateSelectionDown", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, tableStyleClass: { classPropertyName: "tableStyleClass", publicName: "tableStyleClass", isSignal: true, isRequired: false, transformFunction: null }, paginator: { classPropertyName: "paginator", publicName: "paginator", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, first: { classPropertyName: "first", publicName: "first", isSignal: true, isRequired: false, transformFunction: null }, rowsPerPageOptions: { classPropertyName: "rowsPerPageOptions", publicName: "rowsPerPageOptions", isSignal: true, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: true, isRequired: false, transformFunction: null }, sortOrder: { classPropertyName: "sortOrder", publicName: "sortOrder", isSignal: true, isRequired: false, transformFunction: null }, rowHover: { classPropertyName: "rowHover", publicName: "rowHover", isSignal: true, isRequired: false, transformFunction: null }, showCurrentPageReport: { classPropertyName: "showCurrentPageReport", publicName: "showCurrentPageReport", isSignal: true, isRequired: false, transformFunction: null }, currentPageReportTemplate: { classPropertyName: "currentPageReportTemplate", publicName: "currentPageReportTemplate", isSignal: true, isRequired: false, transformFunction: null }, globalFilterFields: { classPropertyName: "globalFilterFields", publicName: "globalFilterFields", isSignal: true, isRequired: false, transformFunction: null }, filterMode: { classPropertyName: "filterMode", publicName: "filterMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", rows: "rowsChange", first: "firstChange", sortField: "sortFieldChange", sortOrder: "sortOrderChange", nodeSelect: "nodeSelect", nodeUnselect: "nodeUnselect", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", sorted: "sorted", page: "page" }, host: { classAttribute: "block overflow-hidden rounded-control border border-ui-line bg-ui-surface-1 font-ui text-ui-md text-ui-fg" }, queries: [{ propertyName: "templates", predicate: SmzTemplateDirective, isSignal: true }], ngImport: i0, template: `
+    @if (captionTemplate(); as tpl) {
+      <div class="border-b border-ui-line px-4 py-3"><ng-container [ngTemplateOutlet]="tpl" /></div>
+    }
+    <div class="relative overflow-auto" [style.max-height]="scrollable() ? scrollHeight() : null">
+      <table class="w-full border-separate border-spacing-0 text-left [&_td]:border-b [&_td]:border-ui-line [&_td]:px-4 [&_td]:py-3 [&_th]:sticky [&_th]:top-0 [&_th]:border-b [&_th]:border-ui-line [&_th]:bg-ui-surface-1 [&_th]:px-4 [&_th]:py-3 [&_th]:font-semibold" [class]="tableStyleClass() ?? ''">
+        <thead>
+          @if (headerTemplate(); as tpl) {
+            <ng-container [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{ $implicit: columns() }" />
+          }
+        </thead>
+        <tbody>
+          @for (row of pageRows(); track row.node.key ?? row.node) {
+            <ng-container [ngTemplateOutlet]="bodyTemplate() ?? null" [ngTemplateOutletContext]="{ $implicit: row, rowNode: row, node: row.node, rowData: row.node.data, columns: columns() }" />
+          } @empty {
+            @if (!loading()) {
+              <tr>
+                <td [attr.colspan]="columns().length || 1" class="px-4 py-6 text-center text-ui-fg-muted">
+                  @if (emptyTemplate(); as tpl) { <ng-container [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{ $implicit: columns() }" /> } @else { {{ emptyMessage() }} }
+                </td>
+              </tr>
+            }
+          }
+        </tbody>
+        @if (footerTemplate(); as tpl) {
+          <tfoot><ng-container [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{ $implicit: columns() }" /></tfoot>
+        }
+      </table>
+      @if (loading()) {
+        <div class="absolute inset-0 flex items-center justify-center bg-ui-surface-1/60 text-ui-primary" role="status">
+          <svg viewBox="0 0 50 50" class="h-8 w-8 animate-spin" fill="none" aria-hidden="true"><circle cx="25" cy="25" r="20" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-dasharray="90 150" /></svg>
+        </div>
+      }
+    </div>
+    @if (paginator()) {
+      <ui-paginator class="border-t border-ui-line" [first]="first()" [rows]="rows()" [totalRecords]="rootCount()" [rowsPerPageOptions]="rowsPerPageOptions()" [showCurrentPageReport]="showCurrentPageReport()" [currentPageReportTemplate]="currentPageReportTemplate()" (firstChange)="first.set($event)" (rowsChange)="rows.set($event)" (pageChanged)="page.emit($event)" />
+    }
+    @if (summaryTemplate(); as tpl) {
+      <div class="border-t border-ui-line px-4 py-3"><ng-container [ngTemplateOutlet]="tpl" /></div>
+    }
   `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SmzPaginatorComponent, selector: "ui-paginator", inputs: ["first", "rows", "totalRecords", "pageLinkSize", "rowsPerPageOptions", "showCurrentPageReport", "currentPageReportTemplate", "alwaysShow", "showPageLinks", "styleClass", "dropdownAppendTo", "showFirstLastIcon"], outputs: ["firstChange", "rowsChange", "pageChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzTreeTableComponent, decorators: [{
@@ -8608,49 +8794,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [NgTemplateOutlet, SmzPaginatorComponent],
                     host: { class: 'block overflow-hidden rounded-control border border-ui-line bg-ui-surface-1 font-ui text-ui-md text-ui-fg' },
-                    template: `
-    @if (captionTemplate(); as tpl) {
-      <div class="border-b border-ui-line px-4 py-3"><ng-container [ngTemplateOutlet]="tpl" /></div>
-    }
-    <div class="relative overflow-auto" [style.max-height]="scrollable() ? scrollHeight() : null">
-      <table class="w-full border-separate border-spacing-0 text-left [&_td]:border-b [&_td]:border-ui-line [&_td]:px-4 [&_td]:py-3 [&_th]:sticky [&_th]:top-0 [&_th]:border-b [&_th]:border-ui-line [&_th]:bg-ui-surface-1 [&_th]:px-4 [&_th]:py-3 [&_th]:font-semibold" [class]="tableStyleClass() ?? ''">
-        <thead>
-          @if (headerTemplate(); as tpl) {
-            <ng-container [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{ $implicit: columns() }" />
-          }
-        </thead>
-        <tbody>
-          @for (row of pageRows(); track row.node.key ?? row.node) {
-            <ng-container [ngTemplateOutlet]="bodyTemplate() ?? null" [ngTemplateOutletContext]="{ $implicit: row, rowNode: row, node: row.node, rowData: row.node.data, columns: columns() }" />
-          } @empty {
-            @if (!loading()) {
-              <tr>
-                <td [attr.colspan]="columns().length || 1" class="px-4 py-6 text-center text-ui-fg-muted">
-                  @if (emptyTemplate(); as tpl) { <ng-container [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{ $implicit: columns() }" /> } @else { {{ emptyMessage() }} }
-                </td>
-              </tr>
-            }
-          }
-        </tbody>
-        @if (footerTemplate(); as tpl) {
-          <tfoot><ng-container [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{ $implicit: columns() }" /></tfoot>
-        }
-      </table>
-      @if (loading()) {
-        <div class="absolute inset-0 flex items-center justify-center bg-ui-surface-1/60 text-ui-primary" role="status">
-          <svg viewBox="0 0 50 50" class="h-8 w-8 animate-spin" fill="none" aria-hidden="true"><circle cx="25" cy="25" r="20" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-dasharray="90 150" /></svg>
-        </div>
-      }
-    </div>
-    @if (paginator()) {
-      <ui-paginator class="border-t border-ui-line" [first]="first()" [rows]="rows()" [totalRecords]="rootCount()" [rowsPerPageOptions]="rowsPerPageOptions()" (firstChange)="first.set($event)" (rowsChange)="rows.set($event)" (pageChanged)="page.emit($event)" />
-    }
-    @if (summaryTemplate(); as tpl) {
-      <div class="border-t border-ui-line px-4 py-3"><ng-container [ngTemplateOutlet]="tpl" /></div>
-    }
+                    template: `
+    @if (captionTemplate(); as tpl) {
+      <div class="border-b border-ui-line px-4 py-3"><ng-container [ngTemplateOutlet]="tpl" /></div>
+    }
+    <div class="relative overflow-auto" [style.max-height]="scrollable() ? scrollHeight() : null">
+      <table class="w-full border-separate border-spacing-0 text-left [&_td]:border-b [&_td]:border-ui-line [&_td]:px-4 [&_td]:py-3 [&_th]:sticky [&_th]:top-0 [&_th]:border-b [&_th]:border-ui-line [&_th]:bg-ui-surface-1 [&_th]:px-4 [&_th]:py-3 [&_th]:font-semibold" [class]="tableStyleClass() ?? ''">
+        <thead>
+          @if (headerTemplate(); as tpl) {
+            <ng-container [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{ $implicit: columns() }" />
+          }
+        </thead>
+        <tbody>
+          @for (row of pageRows(); track row.node.key ?? row.node) {
+            <ng-container [ngTemplateOutlet]="bodyTemplate() ?? null" [ngTemplateOutletContext]="{ $implicit: row, rowNode: row, node: row.node, rowData: row.node.data, columns: columns() }" />
+          } @empty {
+            @if (!loading()) {
+              <tr>
+                <td [attr.colspan]="columns().length || 1" class="px-4 py-6 text-center text-ui-fg-muted">
+                  @if (emptyTemplate(); as tpl) { <ng-container [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{ $implicit: columns() }" /> } @else { {{ emptyMessage() }} }
+                </td>
+              </tr>
+            }
+          }
+        </tbody>
+        @if (footerTemplate(); as tpl) {
+          <tfoot><ng-container [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{ $implicit: columns() }" /></tfoot>
+        }
+      </table>
+      @if (loading()) {
+        <div class="absolute inset-0 flex items-center justify-center bg-ui-surface-1/60 text-ui-primary" role="status">
+          <svg viewBox="0 0 50 50" class="h-8 w-8 animate-spin" fill="none" aria-hidden="true"><circle cx="25" cy="25" r="20" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-dasharray="90 150" /></svg>
+        </div>
+      }
+    </div>
+    @if (paginator()) {
+      <ui-paginator class="border-t border-ui-line" [first]="first()" [rows]="rows()" [totalRecords]="rootCount()" [rowsPerPageOptions]="rowsPerPageOptions()" [showCurrentPageReport]="showCurrentPageReport()" [currentPageReportTemplate]="currentPageReportTemplate()" (firstChange)="first.set($event)" (rowsChange)="rows.set($event)" (pageChanged)="page.emit($event)" />
+    }
+    @if (summaryTemplate(); as tpl) {
+      <div class="border-t border-ui-line px-4 py-3"><ng-container [ngTemplateOutlet]="tpl" /></div>
+    }
   `,
                 }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], propagateSelectionUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "propagateSelectionUp", required: false }] }], propagateSelectionDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "propagateSelectionDown", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], scrollable: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollable", required: false }] }], scrollHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollHeight", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], tableStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableStyleClass", required: false }] }], paginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginator", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }, { type: i0.Output, args: ["rowsChange"] }], first: [{ type: i0.Input, args: [{ isSignal: true, alias: "first", required: false }] }, { type: i0.Output, args: ["firstChange"] }], rowsPerPageOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsPerPageOptions", required: false }] }], sortField: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortField", required: false }] }, { type: i0.Output, args: ["sortFieldChange"] }], sortOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortOrder", required: false }] }, { type: i0.Output, args: ["sortOrderChange"] }], nodeSelect: [{ type: i0.Output, args: ["nodeSelect"] }], nodeUnselect: [{ type: i0.Output, args: ["nodeUnselect"] }], nodeExpand: [{ type: i0.Output, args: ["nodeExpand"] }], nodeCollapse: [{ type: i0.Output, args: ["nodeCollapse"] }], sorted: [{ type: i0.Output, args: ["sorted"] }], page: [{ type: i0.Output, args: ["page"] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SmzTemplateDirective), { isSignal: true }] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], propagateSelectionUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "propagateSelectionUp", required: false }] }], propagateSelectionDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "propagateSelectionDown", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], scrollable: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollable", required: false }] }], scrollHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollHeight", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], tableStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableStyleClass", required: false }] }], paginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginator", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }, { type: i0.Output, args: ["rowsChange"] }], first: [{ type: i0.Input, args: [{ isSignal: true, alias: "first", required: false }] }, { type: i0.Output, args: ["firstChange"] }], rowsPerPageOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsPerPageOptions", required: false }] }], sortField: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortField", required: false }] }, { type: i0.Output, args: ["sortFieldChange"] }], sortOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortOrder", required: false }] }, { type: i0.Output, args: ["sortOrderChange"] }], rowHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHover", required: false }] }], showCurrentPageReport: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCurrentPageReport", required: false }] }], currentPageReportTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPageReportTemplate", required: false }] }], globalFilterFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "globalFilterFields", required: false }] }], filterMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterMode", required: false }] }], nodeSelect: [{ type: i0.Output, args: ["nodeSelect"] }], nodeUnselect: [{ type: i0.Output, args: ["nodeUnselect"] }], nodeExpand: [{ type: i0.Output, args: ["nodeExpand"] }], nodeCollapse: [{ type: i0.Output, args: ["nodeCollapse"] }], sorted: [{ type: i0.Output, args: ["sorted"] }], page: [{ type: i0.Output, args: ["page"] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SmzTemplateDirective), { isSignal: true }] }] } });
 function compareValues(a, b) {
     if (a == null && b == null)
         return 0;
@@ -8669,7 +8855,8 @@ class SmzTreeTableRowDirective {
     classes = computed(() => {
         const mode = this.table.selectionMode();
         const selected = this.table.isSelected(this.rowNode().node);
-        const interactive = mode && mode !== 'checkbox' ? 'cursor-pointer hover:bg-ui-surface-3' : 'hover:bg-ui-surface-3';
+        const hover = this.table.rowHover() ? 'hover:bg-ui-surface-3' : '';
+        const interactive = mode && mode !== 'checkbox' ? `cursor-pointer ${hover}` : hover;
         return `${ROW_BASE} ${interactive} ${selected && mode !== 'checkbox' ? 'bg-ui-primary/10' : ''}`;
     }, ...(ngDevMode ? [{ debugName: "classes" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzTreeTableRowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -8697,10 +8884,10 @@ class SmzTreeTableTogglerComponent {
         return !node.leaf && (node.children?.length ?? 0) > 0;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzTreeTableTogglerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: SmzTreeTableTogglerComponent, isStandalone: true, selector: "ui-tree-table-toggler", inputs: { rowNode: { classPropertyName: "rowNode", publicName: "rowNode", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "style.padding-left.rem": "rowNode().level * 1.5" }, classAttribute: "inline-flex items-center align-middle" }, ngImport: i0, template: `
-    <button type="button" class="inline-flex h-6 w-6 items-center justify-center rounded-full text-ui-fg-muted transition-colors duration-ui hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus" [class.invisible]="!hasChildren()" [attr.aria-label]="rowNode().node.expanded ? 'Recolher' : 'Expandir'" (click)="$event.stopPropagation(); table.toggleNode(rowNode(), $event)">
-      <svg viewBox="0 0 16 16" class="h-4 w-4 transition-transform duration-ui" [class.rotate-90]="rowNode().node.expanded" fill="none" aria-hidden="true"><path d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" /></svg>
-    </button>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: SmzTreeTableTogglerComponent, isStandalone: true, selector: "ui-tree-table-toggler", inputs: { rowNode: { classPropertyName: "rowNode", publicName: "rowNode", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "style.padding-left.rem": "rowNode().level * 1.5" }, classAttribute: "inline-flex items-center align-middle" }, ngImport: i0, template: `
+    <button type="button" class="inline-flex h-6 w-6 items-center justify-center rounded-full text-ui-fg-muted transition-colors duration-ui hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus" [class.invisible]="!hasChildren()" [attr.aria-label]="rowNode().node.expanded ? 'Recolher' : 'Expandir'" (click)="$event.stopPropagation(); table.toggleNode(rowNode(), $event)">
+      <svg viewBox="0 0 16 16" class="h-4 w-4 transition-transform duration-ui" [class.rotate-90]="rowNode().node.expanded" fill="none" aria-hidden="true"><path d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" /></svg>
+    </button>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzTreeTableTogglerComponent, decorators: [{
@@ -8709,10 +8896,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                     selector: 'ui-tree-table-toggler',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'inline-flex items-center align-middle', '[style.padding-left.rem]': 'rowNode().level * 1.5' },
-                    template: `
-    <button type="button" class="inline-flex h-6 w-6 items-center justify-center rounded-full text-ui-fg-muted transition-colors duration-ui hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus" [class.invisible]="!hasChildren()" [attr.aria-label]="rowNode().node.expanded ? 'Recolher' : 'Expandir'" (click)="$event.stopPropagation(); table.toggleNode(rowNode(), $event)">
-      <svg viewBox="0 0 16 16" class="h-4 w-4 transition-transform duration-ui" [class.rotate-90]="rowNode().node.expanded" fill="none" aria-hidden="true"><path d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" /></svg>
-    </button>
+                    template: `
+    <button type="button" class="inline-flex h-6 w-6 items-center justify-center rounded-full text-ui-fg-muted transition-colors duration-ui hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus" [class.invisible]="!hasChildren()" [attr.aria-label]="rowNode().node.expanded ? 'Recolher' : 'Expandir'" (click)="$event.stopPropagation(); table.toggleNode(rowNode(), $event)">
+      <svg viewBox="0 0 16 16" class="h-4 w-4 transition-transform duration-ui" [class.rotate-90]="rowNode().node.expanded" fill="none" aria-hidden="true"><path d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" /></svg>
+    </button>
   `,
                 }]
         }], propDecorators: { rowNode: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowNode", required: true }] }] } });
@@ -8724,11 +8911,11 @@ class SmzTreeTableCheckboxComponent {
         return this.table.selectionState(this.value().node);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzTreeTableCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzTreeTableCheckboxComponent, isStandalone: true, selector: "ui-tree-table-checkbox", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "inline-flex align-middle" }, ngImport: i0, template: `
-    <button type="button" role="checkbox" [attr.aria-checked]="state() === 'partial' ? 'mixed' : state() === 'checked'" class="inline-flex h-5 w-5 items-center justify-center rounded border transition-colors duration-ui focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus" [class]="state() === 'unchecked' ? 'border-ui-line-strong bg-ui-surface-1' : 'border-ui-primary bg-ui-primary text-ui-on-primary'" (click)="$event.stopPropagation(); table.toggleCheckbox(value(), $event)">
-      @if (state() === 'checked') { <svg viewBox="0 0 16 16" class="h-3 w-3" fill="none" aria-hidden="true"><path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></svg> }
-      @else if (state() === 'partial') { <svg viewBox="0 0 16 16" class="h-3 w-3" fill="none" aria-hidden="true"><path d="M4 8h8" stroke="currentColor" stroke-width="2" stroke-linecap="round" /></svg> }
-    </button>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzTreeTableCheckboxComponent, isStandalone: true, selector: "ui-tree-table-checkbox", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "inline-flex align-middle" }, ngImport: i0, template: `
+    <button type="button" role="checkbox" [attr.aria-checked]="state() === 'partial' ? 'mixed' : state() === 'checked'" class="inline-flex h-5 w-5 items-center justify-center rounded border transition-colors duration-ui focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus" [class]="state() === 'unchecked' ? 'border-ui-line-strong bg-ui-surface-1' : 'border-ui-primary bg-ui-primary text-ui-on-primary'" (click)="$event.stopPropagation(); table.toggleCheckbox(value(), $event)">
+      @if (state() === 'checked') { <svg viewBox="0 0 16 16" class="h-3 w-3" fill="none" aria-hidden="true"><path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></svg> }
+      @else if (state() === 'partial') { <svg viewBox="0 0 16 16" class="h-3 w-3" fill="none" aria-hidden="true"><path d="M4 8h8" stroke="currentColor" stroke-width="2" stroke-linecap="round" /></svg> }
+    </button>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzTreeTableCheckboxComponent, decorators: [{
@@ -8737,11 +8924,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                     selector: 'ui-tree-table-checkbox',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'inline-flex align-middle' },
-                    template: `
-    <button type="button" role="checkbox" [attr.aria-checked]="state() === 'partial' ? 'mixed' : state() === 'checked'" class="inline-flex h-5 w-5 items-center justify-center rounded border transition-colors duration-ui focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus" [class]="state() === 'unchecked' ? 'border-ui-line-strong bg-ui-surface-1' : 'border-ui-primary bg-ui-primary text-ui-on-primary'" (click)="$event.stopPropagation(); table.toggleCheckbox(value(), $event)">
-      @if (state() === 'checked') { <svg viewBox="0 0 16 16" class="h-3 w-3" fill="none" aria-hidden="true"><path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></svg> }
-      @else if (state() === 'partial') { <svg viewBox="0 0 16 16" class="h-3 w-3" fill="none" aria-hidden="true"><path d="M4 8h8" stroke="currentColor" stroke-width="2" stroke-linecap="round" /></svg> }
-    </button>
+                    template: `
+    <button type="button" role="checkbox" [attr.aria-checked]="state() === 'partial' ? 'mixed' : state() === 'checked'" class="inline-flex h-5 w-5 items-center justify-center rounded border transition-colors duration-ui focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus" [class]="state() === 'unchecked' ? 'border-ui-line-strong bg-ui-surface-1' : 'border-ui-primary bg-ui-primary text-ui-on-primary'" (click)="$event.stopPropagation(); table.toggleCheckbox(value(), $event)">
+      @if (state() === 'checked') { <svg viewBox="0 0 16 16" class="h-3 w-3" fill="none" aria-hidden="true"><path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></svg> }
+      @else if (state() === 'partial') { <svg viewBox="0 0 16 16" class="h-3 w-3" fill="none" aria-hidden="true"><path d="M4 8h8" stroke="currentColor" stroke-width="2" stroke-linecap="round" /></svg> }
+    </button>
   `,
                 }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] } });
@@ -8749,10 +8936,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
 class SmzTreeTableHeaderCheckboxComponent {
     table = inject(SmzTreeTableComponent);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzTreeTableHeaderCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzTreeTableHeaderCheckboxComponent, isStandalone: true, selector: "ui-tree-table-header-checkbox", host: { classAttribute: "inline-flex align-middle" }, ngImport: i0, template: `
-    <button type="button" role="checkbox" [attr.aria-checked]="table.allSelected()" class="inline-flex h-5 w-5 items-center justify-center rounded border transition-colors duration-ui focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus" [class]="table.allSelected() ? 'border-ui-primary bg-ui-primary text-ui-on-primary' : 'border-ui-line-strong bg-ui-surface-1'" (click)="table.toggleAll(!table.allSelected())">
-      @if (table.allSelected()) { <svg viewBox="0 0 16 16" class="h-3 w-3" fill="none" aria-hidden="true"><path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></svg> }
-    </button>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzTreeTableHeaderCheckboxComponent, isStandalone: true, selector: "ui-tree-table-header-checkbox", host: { classAttribute: "inline-flex align-middle" }, ngImport: i0, template: `
+    <button type="button" role="checkbox" [attr.aria-checked]="table.allSelected()" class="inline-flex h-5 w-5 items-center justify-center rounded border transition-colors duration-ui focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus" [class]="table.allSelected() ? 'border-ui-primary bg-ui-primary text-ui-on-primary' : 'border-ui-line-strong bg-ui-surface-1'" (click)="table.toggleAll(!table.allSelected())">
+      @if (table.allSelected()) { <svg viewBox="0 0 16 16" class="h-3 w-3" fill="none" aria-hidden="true"><path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></svg> }
+    </button>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzTreeTableHeaderCheckboxComponent, decorators: [{
@@ -8761,10 +8948,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                     selector: 'ui-tree-table-header-checkbox',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'inline-flex align-middle' },
-                    template: `
-    <button type="button" role="checkbox" [attr.aria-checked]="table.allSelected()" class="inline-flex h-5 w-5 items-center justify-center rounded border transition-colors duration-ui focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus" [class]="table.allSelected() ? 'border-ui-primary bg-ui-primary text-ui-on-primary' : 'border-ui-line-strong bg-ui-surface-1'" (click)="table.toggleAll(!table.allSelected())">
-      @if (table.allSelected()) { <svg viewBox="0 0 16 16" class="h-3 w-3" fill="none" aria-hidden="true"><path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></svg> }
-    </button>
+                    template: `
+    <button type="button" role="checkbox" [attr.aria-checked]="table.allSelected()" class="inline-flex h-5 w-5 items-center justify-center rounded border transition-colors duration-ui focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus" [class]="table.allSelected() ? 'border-ui-primary bg-ui-primary text-ui-on-primary' : 'border-ui-line-strong bg-ui-surface-1'" (click)="table.toggleAll(!table.allSelected())">
+      @if (table.allSelected()) { <svg viewBox="0 0 16 16" class="h-3 w-3" fill="none" aria-hidden="true"><path d="M3.5 8.5l3 3 6-6.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></svg> }
+    </button>
   `,
                 }]
         }] });
@@ -8792,11 +8979,11 @@ class SmzTreeTableSortIconComponent {
         return this.table.sortField() === this.field() ? this.table.sortOrder() : 0;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzTreeTableSortIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: SmzTreeTableSortIconComponent, isStandalone: true, selector: "ui-tree-table-sort-icon", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "ml-1 inline-flex align-middle text-ui-fg-muted" }, ngImport: i0, template: `
-    <svg viewBox="0 0 16 16" class="h-3.5 w-3.5" fill="none" aria-hidden="true">
-      <path d="M5 6l3-3 3 3" [attr.stroke]="dir() === 1 ? 'rgb(var(--smz-color-primary))' : 'currentColor'" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
-      <path d="M5 10l3 3 3-3" [attr.stroke]="dir() === -1 ? 'rgb(var(--smz-color-primary))' : 'currentColor'" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
-    </svg>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: SmzTreeTableSortIconComponent, isStandalone: true, selector: "ui-tree-table-sort-icon", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "ml-1 inline-flex align-middle text-ui-fg-muted" }, ngImport: i0, template: `
+    <svg viewBox="0 0 16 16" class="h-3.5 w-3.5" fill="none" aria-hidden="true">
+      <path d="M5 6l3-3 3 3" [attr.stroke]="dir() === 1 ? 'rgb(var(--smz-color-primary))' : 'currentColor'" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+      <path d="M5 10l3 3 3-3" [attr.stroke]="dir() === -1 ? 'rgb(var(--smz-color-primary))' : 'currentColor'" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+    </svg>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzTreeTableSortIconComponent, decorators: [{
@@ -8805,11 +8992,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                     selector: 'ui-tree-table-sort-icon',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'ml-1 inline-flex align-middle text-ui-fg-muted' },
-                    template: `
-    <svg viewBox="0 0 16 16" class="h-3.5 w-3.5" fill="none" aria-hidden="true">
-      <path d="M5 6l3-3 3 3" [attr.stroke]="dir() === 1 ? 'rgb(var(--smz-color-primary))' : 'currentColor'" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
-      <path d="M5 10l3 3 3-3" [attr.stroke]="dir() === -1 ? 'rgb(var(--smz-color-primary))' : 'currentColor'" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
-    </svg>
+                    template: `
+    <svg viewBox="0 0 16 16" class="h-3.5 w-3.5" fill="none" aria-hidden="true">
+      <path d="M5 6l3-3 3 3" [attr.stroke]="dir() === 1 ? 'rgb(var(--smz-color-primary))' : 'currentColor'" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+      <path d="M5 10l3 3 3-3" [attr.stroke]="dir() === -1 ? 'rgb(var(--smz-color-primary))' : 'currentColor'" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+    </svg>
   `,
                 }]
         }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }] } });
@@ -8985,31 +9172,31 @@ class SmzFileUploadComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzFileUploadComponent, isStandalone: true, selector: "ui-file-upload", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, chooseLabel: { classPropertyName: "chooseLabel", publicName: "chooseLabel", isSignal: true, isRequired: false, transformFunction: null }, dropLabel: { classPropertyName: "dropLabel", publicName: "dropLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected", removed: "removed", rejected: "rejected" }, host: { classAttribute: "block font-ui text-ui-md text-ui-fg" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["picker"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <input #picker type="file" class="sr-only" [accept]="accept() ?? ''" [multiple]="multiple()" [disabled]="disabled()" (change)="onPick($event)" />
-    <div
-      class="flex flex-col items-center justify-center gap-2 rounded-card border-2 border-dashed p-6 text-center transition-colors duration-ui"
-      [class]="dragging() ? 'border-ui-primary bg-ui-primary/10' : 'border-ui-line-strong bg-ui-surface-1'"
-      [class.opacity-50]="disabled()"
-      (dragover)="onDragOver($event)"
-      (dragleave)="dragging.set(false)"
-      (drop)="onDrop($event)"
-    >
-      <button type="button" class="rounded-control border border-ui-line-strong px-control-x py-2 font-medium transition-colors duration-ui hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus disabled:pointer-events-none" [disabled]="disabled()" (click)="picker.click()">{{ chooseLabel() }}</button>
-      <span class="text-ui-sm text-ui-fg-muted">{{ dropLabel() }}</span>
-    </div>
-    @if (files().length > 0) {
-      <ul class="m-0 mt-3 flex list-none flex-col gap-2 p-0">
-        @for (file of files(); track file) {
-          <li class="flex items-center justify-between gap-2 rounded-control border border-ui-line px-3 py-2">
-            <span class="min-w-0 flex-1 truncate">{{ file.name }} <span class="text-ui-sm text-ui-fg-muted">({{ size(file) }})</span></span>
-            <button type="button" class="inline-flex h-6 w-6 items-center justify-center rounded-full text-ui-fg-muted hover:bg-ui-surface-3" aria-label="Remover" (click)="remove(file)">
-              <svg viewBox="0 0 16 16" class="h-3 w-3" fill="none" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" /></svg>
-            </button>
-          </li>
-        }
-      </ul>
-    }
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzFileUploadComponent, isStandalone: true, selector: "ui-file-upload", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, chooseLabel: { classPropertyName: "chooseLabel", publicName: "chooseLabel", isSignal: true, isRequired: false, transformFunction: null }, dropLabel: { classPropertyName: "dropLabel", publicName: "dropLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected", removed: "removed", rejected: "rejected" }, host: { classAttribute: "block font-ui text-ui-md text-ui-fg" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["picker"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <input #picker type="file" class="sr-only" [accept]="accept() ?? ''" [multiple]="multiple()" [disabled]="disabled()" (change)="onPick($event)" />
+    <div
+      class="flex flex-col items-center justify-center gap-2 rounded-card border-2 border-dashed p-6 text-center transition-colors duration-ui"
+      [class]="dragging() ? 'border-ui-primary bg-ui-primary/10' : 'border-ui-line-strong bg-ui-surface-1'"
+      [class.opacity-50]="disabled()"
+      (dragover)="onDragOver($event)"
+      (dragleave)="dragging.set(false)"
+      (drop)="onDrop($event)"
+    >
+      <button type="button" class="rounded-control border border-ui-line-strong px-control-x py-2 font-medium transition-colors duration-ui hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus disabled:pointer-events-none" [disabled]="disabled()" (click)="picker.click()">{{ chooseLabel() }}</button>
+      <span class="text-ui-sm text-ui-fg-muted">{{ dropLabel() }}</span>
+    </div>
+    @if (files().length > 0) {
+      <ul class="m-0 mt-3 flex list-none flex-col gap-2 p-0">
+        @for (file of files(); track file) {
+          <li class="flex items-center justify-between gap-2 rounded-control border border-ui-line px-3 py-2">
+            <span class="min-w-0 flex-1 truncate">{{ file.name }} <span class="text-ui-sm text-ui-fg-muted">({{ size(file) }})</span></span>
+            <button type="button" class="inline-flex h-6 w-6 items-center justify-center rounded-full text-ui-fg-muted hover:bg-ui-surface-3" aria-label="Remover" (click)="remove(file)">
+              <svg viewBox="0 0 16 16" class="h-3 w-3" fill="none" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" /></svg>
+            </button>
+          </li>
+        }
+      </ul>
+    }
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzFileUploadComponent, decorators: [{
@@ -9018,31 +9205,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                     selector: 'ui-file-upload',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'block font-ui text-ui-md text-ui-fg' },
-                    template: `
-    <input #picker type="file" class="sr-only" [accept]="accept() ?? ''" [multiple]="multiple()" [disabled]="disabled()" (change)="onPick($event)" />
-    <div
-      class="flex flex-col items-center justify-center gap-2 rounded-card border-2 border-dashed p-6 text-center transition-colors duration-ui"
-      [class]="dragging() ? 'border-ui-primary bg-ui-primary/10' : 'border-ui-line-strong bg-ui-surface-1'"
-      [class.opacity-50]="disabled()"
-      (dragover)="onDragOver($event)"
-      (dragleave)="dragging.set(false)"
-      (drop)="onDrop($event)"
-    >
-      <button type="button" class="rounded-control border border-ui-line-strong px-control-x py-2 font-medium transition-colors duration-ui hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus disabled:pointer-events-none" [disabled]="disabled()" (click)="picker.click()">{{ chooseLabel() }}</button>
-      <span class="text-ui-sm text-ui-fg-muted">{{ dropLabel() }}</span>
-    </div>
-    @if (files().length > 0) {
-      <ul class="m-0 mt-3 flex list-none flex-col gap-2 p-0">
-        @for (file of files(); track file) {
-          <li class="flex items-center justify-between gap-2 rounded-control border border-ui-line px-3 py-2">
-            <span class="min-w-0 flex-1 truncate">{{ file.name }} <span class="text-ui-sm text-ui-fg-muted">({{ size(file) }})</span></span>
-            <button type="button" class="inline-flex h-6 w-6 items-center justify-center rounded-full text-ui-fg-muted hover:bg-ui-surface-3" aria-label="Remover" (click)="remove(file)">
-              <svg viewBox="0 0 16 16" class="h-3 w-3" fill="none" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" /></svg>
-            </button>
-          </li>
-        }
-      </ul>
-    }
+                    template: `
+    <input #picker type="file" class="sr-only" [accept]="accept() ?? ''" [multiple]="multiple()" [disabled]="disabled()" (change)="onPick($event)" />
+    <div
+      class="flex flex-col items-center justify-center gap-2 rounded-card border-2 border-dashed p-6 text-center transition-colors duration-ui"
+      [class]="dragging() ? 'border-ui-primary bg-ui-primary/10' : 'border-ui-line-strong bg-ui-surface-1'"
+      [class.opacity-50]="disabled()"
+      (dragover)="onDragOver($event)"
+      (dragleave)="dragging.set(false)"
+      (drop)="onDrop($event)"
+    >
+      <button type="button" class="rounded-control border border-ui-line-strong px-control-x py-2 font-medium transition-colors duration-ui hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ui-focus disabled:pointer-events-none" [disabled]="disabled()" (click)="picker.click()">{{ chooseLabel() }}</button>
+      <span class="text-ui-sm text-ui-fg-muted">{{ dropLabel() }}</span>
+    </div>
+    @if (files().length > 0) {
+      <ul class="m-0 mt-3 flex list-none flex-col gap-2 p-0">
+        @for (file of files(); track file) {
+          <li class="flex items-center justify-between gap-2 rounded-control border border-ui-line px-3 py-2">
+            <span class="min-w-0 flex-1 truncate">{{ file.name }} <span class="text-ui-sm text-ui-fg-muted">({{ size(file) }})</span></span>
+            <button type="button" class="inline-flex h-6 w-6 items-center justify-center rounded-full text-ui-fg-muted hover:bg-ui-surface-3" aria-label="Remover" (click)="remove(file)">
+              <svg viewBox="0 0 16 16" class="h-3 w-3" fill="none" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" /></svg>
+            </button>
+          </li>
+        }
+      </ul>
+    }
   `,
                 }]
         }], propDecorators: { accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], chooseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "chooseLabel", required: false }] }], dropLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropLabel", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }], removed: [{ type: i0.Output, args: ["removed"] }], rejected: [{ type: i0.Output, args: ["rejected"] }], fileInput: [{ type: i0.ViewChild, args: ['picker', { isSignal: true }] }] } });