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

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 } 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 { Overlay } from '@angular/cdk/overlay';
 import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
 import * as i1 from '@angular/forms';
@@ -7991,9 +7991,1065 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
+/* eslint-disable max-len -- classes Tailwind nos templates */
+/**
+ * Card. Substitui o `p-card` do PrimeNG.
+ * O conteudo padrao vai no corpo; `header`, `title`, `subtitle` e `footer` podem ser strings ou templates.
+ *
+ * <ui-card header="Titulo" subheader="Sub">conteudo<ng-template smzTemplate="footer">...</ng-template></ui-card>
+ */
+class SmzCardComponent {
+    /** Titulo em texto (equivale ao slot `title`). */
+    header = input('', ...(ngDevMode ? [{ debugName: "header" }] : []));
+    /** Subtitulo em texto (equivale ao slot `subtitle`). */
+    subheader = input('', ...(ngDevMode ? [{ debugName: "subheader" }] : []));
+    templates = contentChildren(SmzTemplateDirective, ...(ngDevMode ? [{ debugName: "templates" }] : []));
+    headerTemplate = computed(() => smzFindTemplate(this.templates(), 'header'), ...(ngDevMode ? [{ debugName: "headerTemplate" }] : []));
+    titleTemplate = computed(() => smzFindTemplate(this.templates(), 'title'), ...(ngDevMode ? [{ debugName: "titleTemplate" }] : []));
+    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: `
+    @if (headerTemplate(); as tpl) {
+      <div><ng-container [ngTemplateOutlet]="tpl" /></div>
+    }
+    <div class="flex flex-1 flex-col gap-2 p-5">
+      @if (titleTemplate() || header()) {
+        <div class="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">
+          @if (subtitleTemplate(); as tpl) { <ng-container [ngTemplateOutlet]="tpl" /> } @else { {{ subheader() }} }
+        </div>
+      }
+      <div class="flex-1"><ng-content /></div>
+      @if (footerTemplate(); as tpl) {
+        <div><ng-container [ngTemplateOutlet]="tpl" /></div>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzCardComponent, decorators: [{
+            type: Component,
+            args: [{
+                    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' },
+                    template: `
+    @if (headerTemplate(); as tpl) {
+      <div><ng-container [ngTemplateOutlet]="tpl" /></div>
+    }
+    <div class="flex flex-1 flex-col gap-2 p-5">
+      @if (titleTemplate() || header()) {
+        <div class="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">
+          @if (subtitleTemplate(); as tpl) { <ng-container [ngTemplateOutlet]="tpl" /> } @else { {{ subheader() }} }
+        </div>
+      }
+      <div class="flex-1"><ng-content /></div>
+      @if (footerTemplate(); as tpl) {
+        <div><ng-container [ngTemplateOutlet]="tpl" /></div>
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], subheader: [{ type: i0.Input, args: [{ isSignal: true, alias: "subheader", required: false }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SmzTemplateDirective), { isSignal: true }] }] } });
+
+/* eslint-disable max-len -- classes Tailwind nos templates */
+/**
+ * Painel com cabecalho, recolhimento opcional e rodape. Substitui o `p-panel` do PrimeNG.
+ *
+ * <ui-panel header="Filtros" [toggleable]="true" [(collapsed)]="fechado">conteudo</ui-panel>
+ */
+class SmzPanelComponent {
+    header = input('', ...(ngDevMode ? [{ debugName: "header" }] : []));
+    toggleable = input(false, { ...(ngDevMode ? { debugName: "toggleable" } : {}), transform: booleanAttribute });
+    collapsed = model(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
+    /** Antes de alternar (cancelavel nao: apenas notifica). */
+    beforeToggle = output();
+    afterToggle = output();
+    templates = contentChildren(SmzTemplateDirective, ...(ngDevMode ? [{ debugName: "templates" }] : []));
+    headerTemplate = computed(() => smzFindTemplate(this.templates(), 'header'), ...(ngDevMode ? [{ debugName: "headerTemplate" }] : []));
+    iconsTemplate = computed(() => smzFindTemplate(this.templates(), 'icons'), ...(ngDevMode ? [{ debugName: "iconsTemplate" }] : []));
+    footerTemplate = computed(() => smzFindTemplate(this.templates(), 'footer'), ...(ngDevMode ? [{ debugName: "footerTemplate" }] : []));
+    hasHeader = computed(() => !!this.header() || !!this.headerTemplate() || this.toggleable(), ...(ngDevMode ? [{ debugName: "hasHeader" }] : []));
+    toggle(event) {
+        const next = !this.collapsed();
+        this.beforeToggle.emit({ originalEvent: event, collapsed: next });
+        this.collapsed.set(next);
+        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: `
+    @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="min-w-0 flex-1 font-semibold">
+          @if (headerTemplate(); as tpl) { <ng-container [ngTemplateOutlet]="tpl" /> } @else { {{ header() }} }
+        </div>
+        <div class="flex items-center gap-1">
+          @if (iconsTemplate(); as tpl) { <ng-container [ngTemplateOutlet]="tpl" /> }
+          @if (toggleable()) {
+            <button type="button" class="inline-flex h-8 w-8 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-expanded]="!collapsed()" [attr.aria-label]="collapsed() ? 'Expandir' : 'Recolher'" (click)="toggle($event)">
+              <svg viewBox="0 0 16 16" class="h-4 w-4 transition-transform duration-ui" [class.rotate-180]="!collapsed()" fill="none" aria-hidden="true"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" /></svg>
+            </button>
+          }
+        </div>
+      </div>
+    }
+    @if (!collapsed()) {
+      <div class="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>
+      }
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzPanelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    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' },
+                    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="min-w-0 flex-1 font-semibold">
+          @if (headerTemplate(); as tpl) { <ng-container [ngTemplateOutlet]="tpl" /> } @else { {{ header() }} }
+        </div>
+        <div class="flex items-center gap-1">
+          @if (iconsTemplate(); as tpl) { <ng-container [ngTemplateOutlet]="tpl" /> }
+          @if (toggleable()) {
+            <button type="button" class="inline-flex h-8 w-8 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-expanded]="!collapsed()" [attr.aria-label]="collapsed() ? 'Expandir' : 'Recolher'" (click)="toggle($event)">
+              <svg viewBox="0 0 16 16" class="h-4 w-4 transition-transform duration-ui" [class.rotate-180]="!collapsed()" fill="none" aria-hidden="true"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" /></svg>
+            </button>
+          }
+        </div>
+      </div>
+    }
+    @if (!collapsed()) {
+      <div class="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>
+      }
+    }
+  `,
+                }]
+        }], propDecorators: { header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], toggleable: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleable", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], beforeToggle: [{ type: i0.Output, args: ["beforeToggle"] }], afterToggle: [{ type: i0.Output, args: ["afterToggle"] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SmzTemplateDirective), { isSignal: true }] }] } });
+
+/* eslint-disable max-len -- classes Tailwind nos templates */
+/**
+ * Indicador de carregamento circular. Substitui o `p-progressspinner` do PrimeNG.
+ * O tamanho vem das classes do host (ex.: `class="h-12 w-12"`); a cor, de `text-ui-primary` (herdavel).
+ *
+ * <ui-progress-spinner class="h-12 w-12" strokeWidth="4" />
+ */
+class SmzProgressSpinnerComponent {
+    strokeWidth = input(4, ...(ngDevMode ? [{ debugName: "strokeWidth" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzProgressSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: SmzProgressSpinnerComponent, isStandalone: true, selector: "ui-progress-spinner", inputs: { strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar", "aria-busy": "true" }, classAttribute: "inline-block h-10 w-10 text-ui-primary" }, ngImport: i0, template: `
+    <svg viewBox="0 0 50 50" class="h-full w-full animate-spin" fill="none" aria-hidden="true">
+      <circle cx="25" cy="25" r="20" stroke="currentColor" [attr.stroke-width]="strokeWidth()" stroke-linecap="round" stroke-dasharray="90 150" />
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzProgressSpinnerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-progress-spinner',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'inline-block h-10 w-10 text-ui-primary', role: 'progressbar', 'aria-busy': 'true' },
+                    template: `
+    <svg viewBox="0 0 50 50" class="h-full w-full animate-spin" fill="none" aria-hidden="true">
+      <circle cx="25" cy="25" r="20" stroke="currentColor" [attr.stroke-width]="strokeWidth()" stroke-linecap="round" stroke-dasharray="90 150" />
+    </svg>
+  `,
+                }]
+        }], propDecorators: { strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }] } });
+
+/* eslint-disable max-len -- classes Tailwind nos templates */
+const BASE = 'relative block [&_label]:pointer-events-none [&_label]:absolute [&_label]:left-3 [&_label]:z-10 [&_label]:text-ui-fg-subtle [&_label]:transition-all [&_label]:duration-ui';
+const RESTING = '[&_label]:top-1/2 [&_label]:-translate-y-1/2 [&_label]:text-ui-md';
+const FLOATED = {
+    over: '[&_label]:-top-5 [&_label]:left-0 [&_label]:translate-y-0 [&_label]:text-ui-xs [&_label]:text-ui-fg-muted',
+    on: '[&_label]:top-0 [&_label]:left-2 [&_label]:-translate-y-1/2 [&_label]:bg-ui-surface-1 [&_label]:px-1 [&_label]:text-ui-xs [&_label]:text-ui-fg-muted',
+    in: '[&_label]:top-1.5 [&_label]:translate-y-0 [&_label]:text-ui-xs [&_label]:text-ui-fg-muted',
+};
+const IN_PADDING = '[&_input]:pt-4 [&_textarea]:pt-5 [&_[role=combobox]]:pt-4';
+/**
+ * Rotulo flutuante. Substitui o `p-floatlabel` do PrimeNG.
+ * O `<label>` projetado flutua quando o controle recebe foco ou tem valor
+ * (detectado em `input`/`textarea` e em selects do kit; use `[filled]` para forcar).
+ *
+ * <ui-float-label variant="on"><input smzInputText id="n" /><label for="n">Nome</label></ui-float-label>
+ */
+class SmzFloatLabelComponent {
+    variant = input('over', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    /** Forca o estado "preenchido" quando a deteccao automatica nao se aplica. */
+    filled = input(null, ...(ngDevMode ? [{ debugName: "filled" }] : []));
+    focused = signal(false, ...(ngDevMode ? [{ debugName: "focused" }] : []));
+    detected = signal(false, ...(ngDevMode ? [{ debugName: "detected" }] : []));
+    host = inject(ElementRef);
+    floated = computed(() => this.focused() || (this.filled() ?? this.detected()), ...(ngDevMode ? [{ debugName: "floated" }] : []));
+    classes = computed(() => {
+        const variant = this.variant();
+        return [BASE, this.floated() ? FLOATED[variant] : RESTING, variant === 'in' ? IN_PADDING : ''].join(' ');
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    constructor() {
+        afterEveryRender(() => this.check());
+    }
+    check() {
+        {
+            const root = this.host.nativeElement;
+            const field = root.querySelector('input:not([type=checkbox]):not([type=radio]), textarea');
+            const combo = root.querySelector('[role=combobox]');
+            let filled = false;
+            if (field && field.value !== '')
+                filled = true;
+            else if (combo && !field)
+                filled = !combo.querySelector('.text-ui-fg-subtle') && (combo.textContent ?? '').trim() !== '';
+            if (filled !== this.detected())
+                this.detected.set(filled);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzFloatLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: SmzFloatLabelComponent, isStandalone: true, selector: "ui-float-label", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, filled: { classPropertyName: "filled", publicName: "filled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focusin": "focused.set(true)", "focusout": "focused.set(false); check()", "input": "check()", "change": "check()" }, properties: { "class": "classes()" } }, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzFloatLabelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-float-label',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        '(focusin)': 'focused.set(true)',
+                        '(focusout)': 'focused.set(false); check()',
+                        '(input)': 'check()',
+                        '(change)': 'check()',
+                    },
+                    template: '<ng-content />',
+                }]
+        }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], filled: [{ type: i0.Input, args: [{ isSignal: true, alias: "filled", required: false }] }] } });
+
+/* eslint-disable max-len -- classes Tailwind nos templates */
+/** Painel de um `ui-splitter`. O conteudo e projetado dentro da area do painel. */
+class SmzSplitterPanelComponent {
+    content = viewChild.required(TemplateRef);
+    /** Tamanho inicial em % (sobrescreve `panelSizes` do splitter). */
+    size = input(null, ...(ngDevMode ? [{ debugName: "size" }] : []));
+    minSize = input(null, ...(ngDevMode ? [{ debugName: "minSize" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzSplitterPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.1", type: SmzSplitterPanelComponent, isStandalone: true, selector: "ui-splitter-panel", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, minSize: { classPropertyName: "minSize", publicName: "minSize", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: '<ng-template><ng-content /></ng-template>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzSplitterPanelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-splitter-panel',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: '<ng-template><ng-content /></ng-template>',
+                }]
+        }], propDecorators: { content: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], minSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSize", required: false }] }] } });
+/**
+ * Divisor redimensionavel. Substitui o `p-splitter` / `p-splitterPanel` do PrimeNG.
+ *
+ * <ui-splitter layout="horizontal" [panelSizes]="[30, 70]" [minSizes]="[10, 20]">
+ *   <ui-splitter-panel>A</ui-splitter-panel><ui-splitter-panel>B</ui-splitter-panel>
+ * </ui-splitter>
+ */
+class SmzSplitterComponent {
+    layout = input('horizontal', ...(ngDevMode ? [{ debugName: "layout" }] : []));
+    panelSizes = input(null, ...(ngDevMode ? [{ debugName: "panelSizes" }] : []));
+    minSizes = input(null, ...(ngDevMode ? [{ debugName: "minSizes" }] : []));
+    resizeEnd = output();
+    panels = contentChildren(SmzSplitterPanelComponent, ...(ngDevMode ? [{ debugName: "panels" }] : []));
+    root = viewChild.required('root');
+    overrides = signal(null, ...(ngDevMode ? [{ debugName: "overrides" }] : []));
+    sizes = computed(() => {
+        const override = this.overrides();
+        if (override && override.length === this.panels().length)
+            return override;
+        const panels = this.panels();
+        const base = this.panelSizes() ?? [];
+        const explicit = panels.map((panel, i) => panel.size() ?? base[i] ?? null);
+        const known = explicit.reduce((sum, size) => sum + (size ?? 0), 0);
+        const free = explicit.filter((size) => size === null).length;
+        const share = free > 0 ? Math.max(0, 100 - known) / free : 0;
+        return explicit.map((size) => size ?? share);
+    }, ...(ngDevMode ? [{ debugName: "sizes" }] : []));
+    min(index) {
+        return this.panels()[index]?.minSize() ?? this.minSizes()?.[index] ?? 0;
+    }
+    startDrag(event, index) {
+        event.preventDefault();
+        const rect = this.root().nativeElement.getBoundingClientRect();
+        const total = this.layout() === 'horizontal' ? rect.width : rect.height;
+        const start = this.layout() === 'horizontal' ? event.clientX : event.clientY;
+        const initial = [...this.sizes()];
+        const move = (e) => {
+            const delta = (((this.layout() === 'horizontal' ? e.clientX : e.clientY) - start) / total) * 100;
+            this.resize(initial, index, delta);
+        };
+        const up = () => {
+            document.removeEventListener('pointermove', move);
+            document.removeEventListener('pointerup', up);
+            this.resizeEnd.emit({ sizes: this.sizes() });
+        };
+        document.addEventListener('pointermove', move);
+        document.addEventListener('pointerup', up);
+    }
+    onKey(event, index) {
+        const keys = this.layout() === 'horizontal' ? { dec: 'ArrowLeft', inc: 'ArrowRight' } : { dec: 'ArrowUp', inc: 'ArrowDown' };
+        if (event.key !== keys.dec && event.key !== keys.inc)
+            return;
+        event.preventDefault();
+        this.resize([...this.sizes()], index, event.key === keys.inc ? 2 : -2);
+        this.resizeEnd.emit({ sizes: this.sizes() });
+    }
+    resize(initial, index, delta) {
+        const pair = initial[index] + initial[index + 1];
+        const next = Math.min(Math.max(initial[index] + delta, this.min(index)), pair - this.min(index + 1));
+        const sizes = [...initial];
+        sizes[index] = next;
+        sizes[index + 1] = pair - next;
+        this.overrides.set(sizes);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzSplitterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzSplitterComponent, isStandalone: true, selector: "ui-splitter", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, panelSizes: { classPropertyName: "panelSizes", publicName: "panelSizes", isSignal: true, isRequired: false, transformFunction: null }, minSizes: { classPropertyName: "minSizes", publicName: "minSizes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { resizeEnd: "resizeEnd" }, host: { classAttribute: "block h-full w-full overflow-hidden rounded-control border border-ui-line bg-ui-surface-1 font-ui text-ui-md text-ui-fg" }, queries: [{ propertyName: "panels", predicate: SmzSplitterPanelComponent, isSignal: true }], viewQueries: [{ propertyName: "root", first: true, predicate: ["root"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div #root class="flex h-full w-full" [class.flex-col]="layout() === 'vertical'">
+      @for (panel of panels(); track $index; let i = $index) {
+        <div class="min-h-0 min-w-0 overflow-auto" [style.flex]="'0 0 ' + sizes()[i] + '%'" [style.width]="layout() === 'horizontal' ? sizes()[i] + '%' : null" [style.height]="layout() === 'vertical' ? sizes()[i] + '%' : null">
+          <ng-container [ngTemplateOutlet]="panel.content()" />
+        </div>
+        @if (i < panels().length - 1) {
+          <div
+            role="separator"
+            tabindex="0"
+            class="shrink-0 bg-ui-line transition-colors duration-ui hover:bg-ui-primary focus-visible:bg-ui-primary focus-visible:outline-none"
+            [class]="layout() === 'horizontal' ? 'w-1 cursor-col-resize' : 'h-1 cursor-row-resize'"
+            [attr.aria-orientation]="layout() === 'horizontal' ? 'vertical' : 'horizontal'"
+            (pointerdown)="startDrag($event, i)"
+            (keydown)="onKey($event, i)"
+          ></div>
+        }
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzSplitterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-splitter',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgTemplateOutlet],
+                    host: { class: 'block h-full w-full overflow-hidden rounded-control border border-ui-line bg-ui-surface-1 font-ui text-ui-md text-ui-fg' },
+                    template: `
+    <div #root class="flex h-full w-full" [class.flex-col]="layout() === 'vertical'">
+      @for (panel of panels(); track $index; let i = $index) {
+        <div class="min-h-0 min-w-0 overflow-auto" [style.flex]="'0 0 ' + sizes()[i] + '%'" [style.width]="layout() === 'horizontal' ? sizes()[i] + '%' : null" [style.height]="layout() === 'vertical' ? sizes()[i] + '%' : null">
+          <ng-container [ngTemplateOutlet]="panel.content()" />
+        </div>
+        @if (i < panels().length - 1) {
+          <div
+            role="separator"
+            tabindex="0"
+            class="shrink-0 bg-ui-line transition-colors duration-ui hover:bg-ui-primary focus-visible:bg-ui-primary focus-visible:outline-none"
+            [class]="layout() === 'horizontal' ? 'w-1 cursor-col-resize' : 'h-1 cursor-row-resize'"
+            [attr.aria-orientation]="layout() === 'horizontal' ? 'vertical' : 'horizontal'"
+            (pointerdown)="startDrag($event, i)"
+            (keydown)="onKey($event, i)"
+          ></div>
+        }
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], panelSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelSizes", required: false }] }], minSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSizes", required: false }] }], resizeEnd: [{ type: i0.Output, args: ["resizeEnd"] }], panels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SmzSplitterPanelComponent), { isSignal: true }] }], root: [{ type: i0.ViewChild, args: ['root', { isSignal: true }] }] } });
+
+/* eslint-disable max-len -- classes Tailwind nos templates */
+/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-argument, @typescript-eslint/explicit-module-boundary-types */
+const ROW_BASE = 'border-b border-ui-line transition-colors duration-ui';
+/**
+ * Tabela em arvore. Substitui o `p-treeTable` do PrimeNG.
+ * Os templates `header`, `body`, `caption`, `footer`, `emptymessage` e `summary` usam `smzTemplate`;
+ * o `body` recebe `let-rowNode let-rowData="rowData" let-columns="columns"`.
+ *
+ * <ui-tree-table [value]="nodes" [columns]="cols" selectionMode="checkbox" [(selection)]="sel">
+ *   <ng-template smzTemplate="header" let-columns><tr><th *ngFor="let c of columns">{{ c.header }}</th></tr></ng-template>
+ *   <ng-template smzTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
+ *     <tr [smzTtRow]="rowNode"><td><ui-tree-table-toggler [rowNode]="rowNode" />{{ rowData.name }}</td></tr>
+ *   </ng-template>
+ * </ui-tree-table>
+ */
+class SmzTreeTableComponent {
+    value = input([], ...(ngDevMode ? [{ debugName: "value" }] : []));
+    columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
+    selectionMode = input(null, ...(ngDevMode ? [{ debugName: "selectionMode" }] : []));
+    selection = model(null, ...(ngDevMode ? [{ debugName: "selection" }] : []));
+    propagateSelectionUp = input(true, { ...(ngDevMode ? { debugName: "propagateSelectionUp" } : {}), transform: booleanAttribute });
+    propagateSelectionDown = input(true, { ...(ngDevMode ? { debugName: "propagateSelectionDown" } : {}), transform: booleanAttribute });
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : {}), transform: booleanAttribute });
+    scrollable = input(false, { ...(ngDevMode ? { debugName: "scrollable" } : {}), transform: booleanAttribute });
+    scrollHeight = input(null, ...(ngDevMode ? [{ debugName: "scrollHeight" }] : []));
+    emptyMessage = input('', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : []));
+    tableStyleClass = input('', ...(ngDevMode ? [{ debugName: "tableStyleClass" }] : []));
+    paginator = input(false, { ...(ngDevMode ? { debugName: "paginator" } : {}), transform: booleanAttribute });
+    rows = model(10, ...(ngDevMode ? [{ debugName: "rows" }] : []));
+    first = model(0, ...(ngDevMode ? [{ debugName: "first" }] : []));
+    rowsPerPageOptions = input(null, ...(ngDevMode ? [{ debugName: "rowsPerPageOptions" }] : []));
+    sortField = model(null, ...(ngDevMode ? [{ debugName: "sortField" }] : []));
+    sortOrder = model(1, ...(ngDevMode ? [{ debugName: "sortOrder" }] : []));
+    nodeSelect = output();
+    nodeUnselect = output();
+    nodeExpand = output();
+    nodeCollapse = output();
+    sorted = output();
+    page = output();
+    templates = contentChildren(SmzTemplateDirective, ...(ngDevMode ? [{ debugName: "templates" }] : []));
+    headerTemplate = computed(() => smzFindTemplate(this.templates(), 'header'), ...(ngDevMode ? [{ debugName: "headerTemplate" }] : []));
+    bodyTemplate = computed(() => smzFindTemplate(this.templates(), 'body'), ...(ngDevMode ? [{ debugName: "bodyTemplate" }] : []));
+    captionTemplate = computed(() => smzFindTemplate(this.templates(), 'caption'), ...(ngDevMode ? [{ debugName: "captionTemplate" }] : []));
+    footerTemplate = computed(() => smzFindTemplate(this.templates(), 'footer'), ...(ngDevMode ? [{ debugName: "footerTemplate" }] : []));
+    emptyTemplate = computed(() => smzFindTemplate(this.templates(), 'emptymessage'), ...(ngDevMode ? [{ debugName: "emptyTemplate" }] : []));
+    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" }] : []));
+    flatRows = computed(() => {
+        this.version();
+        const field = this.sortField();
+        const order = this.sortOrder();
+        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)) {
+                out.push({ node, parent, level });
+                if (node.expanded && node.children?.length)
+                    walk(node.children, node, level + 1);
+            }
+        };
+        walk(this.value() ?? [], null, 0);
+        return out;
+    }, ...(ngDevMode ? [{ debugName: "flatRows" }] : []));
+    /** Linhas visiveis; com paginador, a pagina atual e calculada sobre os nos raiz. */
+    pageRows = computed(() => {
+        const all = this.flatRows();
+        if (!this.paginator())
+            return all;
+        const roots = all.filter((row) => row.level === 0);
+        const pageRoots = new Set(roots.slice(this.first(), this.first() + this.rows()).map((row) => row.node));
+        let include = false;
+        return all.filter((row) => {
+            if (row.level === 0)
+                include = pageRoots.has(row.node);
+            return include;
+        });
+    }, ...(ngDevMode ? [{ debugName: "pageRows" }] : []));
+    refresh() {
+        this.version.update((v) => v + 1);
+    }
+    toggleNode(rowNode, event) {
+        const node = rowNode.node;
+        node.expanded = !node.expanded;
+        (node.expanded ? this.nodeExpand : this.nodeCollapse).emit({ node, originalEvent: event });
+        this.refresh();
+    }
+    sortBy(field) {
+        const order = this.sortField() === field && this.sortOrder() === 1 ? -1 : 1;
+        this.sortField.set(field);
+        this.sortOrder.set(order);
+        this.sorted.emit({ field, order });
+    }
+    isSelected(node) {
+        const selection = this.selection();
+        return Array.isArray(selection) ? selection.includes(node) : selection === node;
+    }
+    selectionState(node) {
+        if (this.isSelected(node))
+            return 'checked';
+        return node.partialSelected ? 'partial' : 'unchecked';
+    }
+    onRowClick(rowNode, event) {
+        const mode = this.selectionMode();
+        const node = rowNode.node;
+        if (!mode || node.selectable === false)
+            return;
+        if (mode === 'checkbox')
+            return; // selecao so pelo checkbox
+        const selected = this.isSelected(node);
+        if (mode === 'single') {
+            this.selection.set(selected ? null : node);
+        }
+        else {
+            const current = Array.isArray(this.selection()) ? this.selection() : [];
+            this.selection.set(selected ? current.filter((entry) => entry !== node) : [...current, node]);
+        }
+        (selected ? this.nodeUnselect : this.nodeSelect).emit({ node, originalEvent: event });
+    }
+    toggleCheckbox(rowNode, event) {
+        const node = rowNode.node;
+        const selected = this.isSelected(node);
+        const set = new Set(Array.isArray(this.selection()) ? this.selection() : []);
+        const apply = (target, value) => {
+            if (value)
+                set.add(target);
+            else
+                set.delete(target);
+            target.partialSelected = false;
+            if (this.propagateSelectionDown())
+                target.children?.forEach((child) => apply(child, value));
+        };
+        apply(node, !selected);
+        if (this.propagateSelectionUp()) {
+            for (let parent = rowNode.parent; parent; parent = this.findParent(parent)) {
+                const children = parent.children ?? [];
+                const all = children.every((child) => set.has(child));
+                const some = children.some((child) => set.has(child) || child.partialSelected);
+                if (all)
+                    set.add(parent);
+                else
+                    set.delete(parent);
+                parent.partialSelected = !all && some;
+            }
+        }
+        this.selection.set([...set]);
+        (selected ? this.nodeUnselect : this.nodeSelect).emit({ node, originalEvent: event });
+        this.refresh();
+    }
+    /** Marca/desmarca todos os nos (checkbox do cabecalho). */
+    toggleAll(checked) {
+        const set = new Set();
+        const walk = (nodes) => {
+            for (const node of nodes) {
+                node.partialSelected = false;
+                if (checked && node.selectable !== false)
+                    set.add(node);
+                walk(node.children ?? []);
+            }
+        };
+        walk(this.value() ?? []);
+        this.selection.set([...set]);
+        this.refresh();
+    }
+    allSelected() {
+        const total = this.countNodes(this.value() ?? []);
+        const selection = this.selection();
+        return total > 0 && Array.isArray(selection) && selection.length >= total;
+    }
+    countNodes(nodes) {
+        return nodes.reduce((sum, node) => sum + 1 + this.countNodes(node.children ?? []), 0);
+    }
+    findParent(node) {
+        const search = (nodes, parent) => {
+            for (const candidate of nodes) {
+                if (candidate === node)
+                    return parent;
+                const found = search(candidate.children ?? [], candidate);
+                if (found !== undefined)
+                    return found;
+            }
+            return undefined;
+        };
+        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>
+    }
+  `, 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: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-tree-table',
+                    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>
+    }
+  `,
+                }]
+        }], 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 }] }] } });
+function compareValues(a, b) {
+    if (a == null && b == null)
+        return 0;
+    if (a == null)
+        return -1;
+    if (b == null)
+        return 1;
+    if (typeof a === 'string' && typeof b === 'string')
+        return a.localeCompare(b);
+    return a < b ? -1 : a > b ? 1 : 0;
+}
+/** Linha do corpo: `<tr [smzTtRow]="rowNode">`. Cuida de estilo, aria e selecao por clique. */
+class SmzTreeTableRowDirective {
+    table = inject(SmzTreeTableComponent);
+    rowNode = input.required({ ...(ngDevMode ? { debugName: "rowNode" } : {}), alias: 'smzTtRow' });
+    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';
+        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 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: SmzTreeTableRowDirective, isStandalone: true, selector: "tr[smzTtRow]", inputs: { rowNode: { classPropertyName: "rowNode", publicName: "smzTtRow", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "table.onRowClick(rowNode(), $event)" }, properties: { "class": "classes()", "attr.aria-level": "rowNode().level + 1", "attr.aria-expanded": "rowNode().node.children?.length ? !!rowNode().node.expanded : null", "attr.aria-selected": "table.selectionMode() ? table.isSelected(rowNode().node) : null" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzTreeTableRowDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'tr[smzTtRow]',
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.aria-level]': 'rowNode().level + 1',
+                        '[attr.aria-expanded]': 'rowNode().node.children?.length ? !!rowNode().node.expanded : null',
+                        '[attr.aria-selected]': 'table.selectionMode() ? table.isSelected(rowNode().node) : null',
+                        '(click)': 'table.onRowClick(rowNode(), $event)',
+                    },
+                }]
+        }], propDecorators: { rowNode: [{ type: i0.Input, args: [{ isSignal: true, alias: "smzTtRow", required: true }] }] } });
+/** Seta de expandir/recolher com recuo por nivel: `<ui-tree-table-toggler [rowNode]="rowNode" />`. */
+class SmzTreeTableTogglerComponent {
+    table = inject(SmzTreeTableComponent);
+    rowNode = input.required(...(ngDevMode ? [{ debugName: "rowNode" }] : []));
+    hasChildren() {
+        const node = this.rowNode().node;
+        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>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzTreeTableTogglerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    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>
+  `,
+                }]
+        }], propDecorators: { rowNode: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowNode", required: true }] }] } });
+/** Checkbox de selecao da linha (modo `checkbox`): `<ui-tree-table-checkbox [value]="rowNode" />`. */
+class SmzTreeTableCheckboxComponent {
+    table = inject(SmzTreeTableComponent);
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
+    state() {
+        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>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzTreeTableCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{
+                    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>
+  `,
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] } });
+/** Checkbox do cabecalho: seleciona/limpa todos os nos. */
+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>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzTreeTableHeaderCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{
+                    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>
+  `,
+                }]
+        }] });
+/** Cabecalho ordenavel: `<th [smzTtSortableColumn]="'nome'">Nome <ui-tree-table-sort-icon field="nome" /></th>`. */
+class SmzTreeTableSortableColumnDirective {
+    table = inject(SmzTreeTableComponent);
+    field = input.required({ ...(ngDevMode ? { debugName: "field" } : {}), alias: 'smzTtSortableColumn' });
+    ariaSort() {
+        return this.table.sortField() === this.field() ? (this.table.sortOrder() === 1 ? 'ascending' : 'descending') : 'none';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzTreeTableSortableColumnDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: SmzTreeTableSortableColumnDirective, isStandalone: true, selector: "th[smzTtSortableColumn]", inputs: { field: { classPropertyName: "field", publicName: "smzTtSortableColumn", isSignal: true, isRequired: true, transformFunction: null } }, host: { listeners: { "click": "table.sortBy(field())" }, properties: { "attr.aria-sort": "ariaSort()" }, classAttribute: "cursor-pointer select-none" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzTreeTableSortableColumnDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'th[smzTtSortableColumn]',
+                    host: { class: 'cursor-pointer select-none', '(click)': 'table.sortBy(field())', '[attr.aria-sort]': 'ariaSort()' },
+                }]
+        }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "smzTtSortableColumn", required: true }] }] } });
+class SmzTreeTableSortIconComponent {
+    table = inject(SmzTreeTableComponent);
+    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
+    dir() {
+        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>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzTreeTableSortIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    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>
+  `,
+                }]
+        }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }] } });
+const SMZ_TREE_TABLE = [
+    SmzTreeTableComponent,
+    SmzTreeTableRowDirective,
+    SmzTreeTableTogglerComponent,
+    SmzTreeTableCheckboxComponent,
+    SmzTreeTableHeaderCheckboxComponent,
+    SmzTreeTableSortableColumnDirective,
+    SmzTreeTableSortIconComponent,
+    SmzTemplateDirective,
+];
+
+/* eslint-disable max-len -- classes Tailwind nos templates */
+class SmzConfirmContentComponent {
+    options = inject(SmzDialogConfig).data;
+    ref = inject((SmzDialogRef));
+    close(accepted) {
+        this.ref.close(accepted);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzConfirmContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzConfirmContentComponent, isStandalone: true, selector: "ui-confirm-content", ngImport: i0, template: `
+    <div class="flex items-start gap-3 font-ui text-ui-md text-ui-fg">
+      @if (options.icon) {
+        <i [class]="options.icon + ' mt-0.5 text-ui-xl text-ui-warning'" aria-hidden="true"></i>
+      }
+      <p class="m-0 flex-1">{{ options.message }}</p>
+    </div>
+    <div class="mt-5 flex justify-end gap-2">
+      @if (options.rejectVisible !== false) {
+        <button smzButton type="button" severity="secondary" variant="outlined" [label]="options.rejectLabel ?? 'Não'" (click)="close(false)"></button>
+      }
+      @if (options.acceptVisible !== false) {
+        <button smzButton type="button" [severity]="options.acceptSeverity ?? 'primary'" [label]="options.acceptLabel ?? 'Sim'" (click)="close(true)"></button>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: SmzButtonComponent, selector: "button[smzButton], a[smzButton]", inputs: ["label", "icon", "iconPosition", "severity", "variant", "size", "text", "outlined", "rounded", "loading", "styleClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzConfirmContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-confirm-content',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [SmzButtonComponent],
+                    template: `
+    <div class="flex items-start gap-3 font-ui text-ui-md text-ui-fg">
+      @if (options.icon) {
+        <i [class]="options.icon + ' mt-0.5 text-ui-xl text-ui-warning'" aria-hidden="true"></i>
+      }
+      <p class="m-0 flex-1">{{ options.message }}</p>
+    </div>
+    <div class="mt-5 flex justify-end gap-2">
+      @if (options.rejectVisible !== false) {
+        <button smzButton type="button" severity="secondary" variant="outlined" [label]="options.rejectLabel ?? 'Não'" (click)="close(false)"></button>
+      }
+      @if (options.acceptVisible !== false) {
+        <button smzButton type="button" [severity]="options.acceptSeverity ?? 'primary'" [label]="options.acceptLabel ?? 'Sim'" (click)="close(true)"></button>
+      }
+    </div>
+  `,
+                }]
+        }] });
+/**
+ * Confirmacao modal. Substitui o `ConfirmationService` + `<p-confirmdialog>` do PrimeNG
+ * (nao ha componente a declarar no template).
+ *
+ * confirm.confirm({ message: 'Excluir?', header: 'Confirmacao', icon: 'fa-solid fa-triangle-exclamation', accept: () => ..., reject: () => ... });
+ */
+class SmzConfirmationService {
+    dialogs = inject(SmzDialogService);
+    confirm(confirmation) {
+        const ref = this.dialogs.open(SmzConfirmContentComponent, {
+            header: confirmation.header ?? 'Confirmação',
+            width: confirmation.width ?? '28rem',
+            closeOnEscape: confirmation.closeOnEscape ?? true,
+            data: confirmation,
+        });
+        ref.onClose.subscribe((accepted) => {
+            if (accepted === true)
+                confirmation.accept?.();
+            else
+                confirmation.reject?.();
+        });
+        return ref;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzConfirmationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzConfirmationService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzConfirmationService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/* eslint-disable max-len -- classes Tailwind nos templates */
+/**
+ * Selecao de arquivos com area de arrastar e soltar e lista de escolhidos.
+ * Substitui o `p-fileupload` (modo `basic`/`advanced` sem envio automatico): o envio ao servidor
+ * fica a cargo do app (ex.: `HttpClient` no handler de `(selected)`).
+ *
+ * <ui-file-upload accept="image/*" [multiple]="true" [maxFileSize]="1000000" (selected)="enviar($event.files)" />
+ */
+class SmzFileUploadComponent {
+    accept = input('', ...(ngDevMode ? [{ debugName: "accept" }] : []));
+    multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : {}), transform: booleanAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
+    /** Tamanho maximo por arquivo, em bytes. */
+    maxFileSize = input(null, ...(ngDevMode ? [{ debugName: "maxFileSize" }] : []));
+    chooseLabel = input('Escolher arquivo', ...(ngDevMode ? [{ debugName: "chooseLabel" }] : []));
+    dropLabel = input('ou arraste aqui', ...(ngDevMode ? [{ debugName: "dropLabel" }] : []));
+    selected = output();
+    removed = output();
+    rejected = output();
+    files = signal([], ...(ngDevMode ? [{ debugName: "files" }] : []));
+    dragging = signal(false, ...(ngDevMode ? [{ debugName: "dragging" }] : []));
+    fileInput = viewChild.required('picker');
+    /** Limpa a lista (equivale a `clear()` do `p-fileupload`). */
+    clear() {
+        this.files.set([]);
+        this.fileInput().nativeElement.value = '';
+    }
+    onPick(event) {
+        const target = event.target;
+        this.add(Array.from(target.files ?? []), event);
+        target.value = '';
+    }
+    onDragOver(event) {
+        if (this.disabled())
+            return;
+        event.preventDefault();
+        this.dragging.set(true);
+    }
+    onDrop(event) {
+        event.preventDefault();
+        this.dragging.set(false);
+        if (this.disabled())
+            return;
+        this.add(Array.from(event.dataTransfer?.files ?? []), event);
+    }
+    remove(file) {
+        this.files.update((list) => list.filter((entry) => entry !== file));
+        this.removed.emit({ file });
+    }
+    size(file) {
+        return file.size < 1024 * 1024 ? `${Math.max(1, Math.round(file.size / 1024))} KB` : `${(file.size / 1024 / 1024).toFixed(1)} MB`;
+    }
+    add(incoming, event) {
+        const accepted = [];
+        for (const file of incoming) {
+            if (!this.matchesAccept(file))
+                this.rejected.emit({ file, reason: 'type' });
+            else if (this.maxFileSize() != null && file.size > this.maxFileSize())
+                this.rejected.emit({ file, reason: 'size' });
+            else
+                accepted.push(file);
+        }
+        if (accepted.length === 0)
+            return;
+        const next = this.multiple() ? [...this.files(), ...accepted] : [accepted[0]];
+        this.files.set(next);
+        this.selected.emit({ files: next, originalEvent: event });
+    }
+    matchesAccept(file) {
+        const accept = (this.accept() ?? '').trim();
+        if (!accept)
+            return true;
+        return accept.split(',').map((rule) => rule.trim().toLowerCase()).some((rule) => {
+            if (rule.startsWith('.'))
+                return file.name.toLowerCase().endsWith(rule);
+            if (rule.endsWith('/*'))
+                return file.type.toLowerCase().startsWith(rule.slice(0, -1));
+            return file.type.toLowerCase() === rule;
+        });
+    }
+    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>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzFileUploadComponent, decorators: [{
+            type: Component,
+            args: [{
+                    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>
+    }
+  `,
+                }]
+        }], 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 }] }] } });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { SMZ_DIALOG_CONTENT, SMZ_SOFT_TONE, SMZ_SOLID_TONE, SmzAccordionComponent, SmzAccordionContentComponent, SmzAccordionHeaderComponent, SmzAccordionPanelComponent, SmzAnchoredPanel, SmzAutoCompleteComponent, SmzAutoFocusDirective, SmzBadgeComponent, SmzBadgeDirective, SmzBlockUiComponent, SmzButtonComponent, SmzCheckboxComponent, SmzColorPickerComponent, SmzConnectedOverlayScrollHandler, SmzDataViewComponent, SmzDatePickerComponent, SmzDialogComponent, SmzDialogConfig, SmzDialogFrameComponent, SmzDialogRef, SmzDialogService, SmzDividerComponent, SmzDomHandler, SmzDrawerComponent, SmzFilterMatchMode, SmzFilterOperator, SmzFilterService, SmzIconComponent, SmzIconFieldComponent, SmzInputGroupAddonComponent, SmzInputGroupComponent, SmzInputIconComponent, SmzInputMaskComponent, SmzInputNumberComponent, SmzInputTextDirective, SmzListboxComponent, SmzLocaleService, SmzMenuListComponent, SmzMessageComponent, SmzMessageService, SmzMultiSelectComponent, SmzObjectUtils, SmzPaginatorComponent, SmzPasswordComponent, SmzPickListComponent, SmzPopoverComponent, SmzProgressBarComponent, SmzRadioButtonComponent, SmzRippleDirective, SmzSelectButtonComponent, SmzSelectComponent, SmzSkeletonComponent, SmzStyleClassDirective, SmzTabComponent, SmzTabListComponent, SmzTabPanelComponent, SmzTabPanelsComponent, SmzTabsComponent, SmzTagComponent, SmzTemplateDirective, SmzTextareaDirective, SmzThemeService, SmzToastContainerComponent, SmzToggleSwitchComponent, SmzToolbarComponent, SmzTooltipComponent, SmzTooltipDirective, SmzTranslationKeys, SmzTreeSelectComponent, SmzUiTimelineComponent, SmzUiTreeComponent, SmzValueAccessor, SmzZIndex, filterOptions, optionDisabled, optionLabel, optionValue, sameValue, smzCalendarStart, smzCx, smzFindTemplate, smzFormatDate, smzMergeClasses, smzNormalizeSeverity, smzNormalizeStyleClass, smzParseButtonStyleClass, smzParseDate, smzSameDay, smzStartOfDay, smzStaticHostClass, smzTwoDigits, smzUniqueId, smzVariants };
+export { SMZ_DIALOG_CONTENT, SMZ_SOFT_TONE, SMZ_SOLID_TONE, SMZ_TREE_TABLE, SmzAccordionComponent, SmzAccordionContentComponent, SmzAccordionHeaderComponent, SmzAccordionPanelComponent, SmzAnchoredPanel, SmzAutoCompleteComponent, SmzAutoFocusDirective, SmzBadgeComponent, SmzBadgeDirective, SmzBlockUiComponent, SmzButtonComponent, SmzCardComponent, SmzCheckboxComponent, SmzColorPickerComponent, SmzConfirmContentComponent, SmzConfirmationService, SmzConnectedOverlayScrollHandler, SmzDataViewComponent, SmzDatePickerComponent, SmzDialogComponent, SmzDialogConfig, SmzDialogFrameComponent, SmzDialogRef, SmzDialogService, SmzDividerComponent, SmzDomHandler, SmzDrawerComponent, SmzFileUploadComponent, SmzFilterMatchMode, SmzFilterOperator, SmzFilterService, SmzFloatLabelComponent, SmzIconComponent, SmzIconFieldComponent, SmzInputGroupAddonComponent, SmzInputGroupComponent, SmzInputIconComponent, SmzInputMaskComponent, SmzInputNumberComponent, SmzInputTextDirective, SmzListboxComponent, SmzLocaleService, SmzMenuListComponent, SmzMessageComponent, SmzMessageService, SmzMultiSelectComponent, SmzObjectUtils, SmzPaginatorComponent, SmzPanelComponent, SmzPasswordComponent, SmzPickListComponent, SmzPopoverComponent, SmzProgressBarComponent, SmzProgressSpinnerComponent, SmzRadioButtonComponent, SmzRippleDirective, SmzSelectButtonComponent, SmzSelectComponent, SmzSkeletonComponent, SmzSplitterComponent, SmzSplitterPanelComponent, SmzStyleClassDirective, SmzTabComponent, SmzTabListComponent, SmzTabPanelComponent, SmzTabPanelsComponent, SmzTabsComponent, SmzTagComponent, SmzTemplateDirective, SmzTextareaDirective, SmzThemeService, SmzToastContainerComponent, SmzToggleSwitchComponent, SmzToolbarComponent, SmzTooltipComponent, SmzTooltipDirective, SmzTranslationKeys, SmzTreeSelectComponent, SmzTreeTableCheckboxComponent, SmzTreeTableComponent, SmzTreeTableHeaderCheckboxComponent, SmzTreeTableRowDirective, SmzTreeTableSortIconComponent, SmzTreeTableSortableColumnDirective, SmzTreeTableTogglerComponent, SmzUiTimelineComponent, SmzUiTreeComponent, SmzValueAccessor, SmzZIndex, filterOptions, optionDisabled, optionLabel, optionValue, sameValue, smzCalendarStart, smzCx, smzFindTemplate, smzFormatDate, smzMergeClasses, smzNormalizeSeverity, smzNormalizeStyleClass, smzParseButtonStyleClass, smzParseDate, smzSameDay, smzStartOfDay, smzStaticHostClass, smzTwoDigits, smzUniqueId, smzVariants };
 //# sourceMappingURL=ngx-smz-ui-kit.mjs.map