@ngx-smz/ui-kit 21.9.0-next.10 → 21.9.0-next.11

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

@@ -1707,6 +1707,44 @@ class SmzDialogRef {
     }
 }
 
+const KEYS = {
+    width: 'width',
+    height: 'height',
+    minWidth: 'minWidth',
+    'min-width': 'minWidth',
+    maxWidth: 'maxWidth',
+    'max-width': 'maxWidth',
+    minHeight: 'minHeight',
+    'min-height': 'minHeight',
+    maxHeight: 'maxHeight',
+    'max-height': 'maxHeight',
+};
+/**
+ * Separa os estilos de tamanho (`width`, `height`, `min-*`, `max-*`) do resto do `style`.
+ *
+ * Porcentagens so significam "porcentagem da tela" quando aplicadas ao painel do overlay (cujo pai ocupa a viewport);
+ * dentro do frame elas seriam relativas ao painel, que tem largura "shrink-to-fit" (ex.: 60% de 531px).
+ * O painel recebe o tamanho; o frame passa a ocupar 100% dele.
+ */
+function smzSplitDialogSize(style, extra) {
+    const pane = { ...(extra ?? {}) };
+    const rest = {};
+    for (const [key, value] of Object.entries(style ?? {})) {
+        if (value === null || value === undefined || value === '')
+            continue;
+        const target = KEYS[key];
+        if (target)
+            pane[target] = String(value);
+        else
+            rest[key] = value;
+    }
+    for (const key of Object.keys(pane)) {
+        if (!pane[key])
+            delete pane[key];
+    }
+    return { pane, rest };
+}
+
 /* eslint-disable max-len -- classes Tailwind nos templates */
 /** Componente que sera criado dentro do dialog. */
 const SMZ_DIALOG_CONTENT = new InjectionToken('SMZ_DIALOG_CONTENT');
@@ -1714,6 +1752,8 @@ const SMZ_DIALOG_CONTENT = new InjectionToken('SMZ_DIALOG_CONTENT');
 class SmzDialogFrameComponent {
     config = inject(SmzDialogConfig);
     ref = inject(SmzDialogRef);
+    /** Tamanho vai para o painel do overlay (ver `smzSplitDialogSize`); o frame ocupa 100% dele. */
+    size = smzSplitDialogSize(this.config.style, { width: this.config.width, height: this.config.height });
     injector = inject(Injector);
     contentType = inject(SMZ_DIALOG_CONTENT);
     host = viewChild.required('content', { read: ViewContainerRef });
@@ -1723,16 +1763,16 @@ class SmzDialogFrameComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzDialogFrameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzDialogFrameComponent, isStandalone: true, selector: "ui-dialog-frame", host: { classAttribute: "pointer-events-auto block" }, viewQueries: [{ propertyName: "host", first: true, predicate: ["content"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzDialogFrameComponent, isStandalone: true, selector: "ui-dialog-frame", host: { properties: { "class.w-full": "!!size.pane.width", "class.h-full": "!!size.pane.height" }, classAttribute: "pointer-events-auto block" }, viewQueries: [{ propertyName: "host", first: true, predicate: ["content"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: `
     <div
       role="dialog"
       aria-modal="true"
       [attr.aria-label]="config.header || null"
       class="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]="config.styleClass ?? ''"
-      [style.width]="config.width ?? null"
-      [style.height]="config.height ?? null"
-      [ngStyle]="config.style"
+      [style.width]="size.pane.width ? '100%' : null"
+      [style.height]="size.pane.height ? '100%' : null"
+      [ngStyle]="size.rest"
     >
       @if (config.showHeader !== false) {
         <div class="flex items-center justify-between gap-4 border-b border-ui-line px-4 py-3">
@@ -1763,7 +1803,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                     selector: 'ui-dialog-frame',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [NgStyle],
-                    host: { class: 'pointer-events-auto block' },
+                    // O painel do CDK e `display:flex`: o host e item flex e so ocupa o painel dimensionado se tiver largura/altura 100%.
+                    host: { class: 'pointer-events-auto block', '[class.w-full]': '!!size.pane.width', '[class.h-full]': '!!size.pane.height' },
                     template: `
     <div
       role="dialog"
@@ -1771,9 +1812,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
       [attr.aria-label]="config.header || null"
       class="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]="config.styleClass ?? ''"
-      [style.width]="config.width ?? null"
-      [style.height]="config.height ?? null"
-      [ngStyle]="config.style"
+      [style.width]="size.pane.width ? '100%' : null"
+      [style.height]="size.pane.height ? '100%' : null"
+      [ngStyle]="size.rest"
     >
       @if (config.showHeader !== false) {
         <div class="flex items-center justify-between gap-4 border-b border-ui-line px-4 py-3">
@@ -1814,10 +1855,14 @@ class SmzDialogService {
         const resolved = Object.assign(new SmzDialogConfig(), config);
         const ref = new SmzDialogRef();
         const modal = resolved.modal !== false;
+        // Porcentagens (ex.: `width: '60%'`) sao relativas a viewport quando aplicadas ao painel do overlay.
+        const pane = smzSplitDialogSize(resolved.style, { width: resolved.width, height: resolved.height }).pane;
         const overlayRef = this.overlay.create({
             hasBackdrop: modal,
             positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),
             scrollStrategy: this.overlay.scrollStrategies.block(),
+            ...pane,
+            maxWidth: pane.maxWidth ?? '95vw',
         });
         if (resolved.baseZIndex != null) {
             overlayRef.hostElement.style.zIndex = String(resolved.baseZIndex + 1);
@@ -1896,6 +1941,8 @@ class SmzDialogComponent {
     viewContainer = inject(ViewContainerRef);
     host = inject(ElementRef);
     overlayRef;
+    /** `width`/`height`/`min-*`/`max-*` de `style` vao para o painel do overlay (relativos a viewport); o frame ocupa 100% dele. */
+    sizing = computed(() => smzSplitDialogSize(this.style()), ...(ngDevMode ? [{ debugName: "sizing" }] : []));
     dx = signal(0, ...(ngDevMode ? [{ debugName: "dx" }] : []));
     dy = signal(0, ...(ngDevMode ? [{ debugName: "dy" }] : []));
     constructor() {
@@ -1905,6 +1952,11 @@ class SmzDialogComponent {
             else
                 this.dispose();
         });
+        effect(() => {
+            const maximized = this.maximized();
+            const pane = this.sizing().pane;
+            this.overlayRef?.updateSize(maximized ? { width: '100vw', height: '100vh', maxWidth: '100vw', maxHeight: '100vh', minWidth: '0', minHeight: '0' } : { ...pane, maxWidth: pane.maxWidth ?? '95vw' });
+        });
         effect(() => {
             const position = this.position();
             this.overlayRef?.updatePositionStrategy(this.strategyFor(position));
@@ -1965,6 +2017,7 @@ class SmzDialogComponent {
             hasBackdrop: modal,
             positionStrategy: this.strategyFor(this.position()),
             scrollStrategy: this.overlay.scrollStrategies.block(),
+            ...(this.maximized() ? { width: '100vw', height: '100vh', maxWidth: '100vw', maxHeight: '100vh' } : { ...this.sizing().pane, maxWidth: this.sizing().pane.maxWidth ?? '95vw' }),
         });
         SmzZIndex.set('modal', this.overlayRef.hostElement, 1100 + this.baseZIndex());
         if (this.overlayRef.backdropElement) {
@@ -2003,7 +2056,9 @@ class SmzDialogComponent {
         [attr.aria-label]="header() || null"
         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()"
+        [ngStyle]="maximized() ? null : sizing().rest"
+        [style.width]="!maximized() && sizing().pane.width ? '100%' : null"
+        [style.height]="!maximized() && sizing().pane.height ? '100%' : null"
         [style.transform]="maximized() || (dx() === 0 && dy() === 0) ? null : 'translate(' + dx() + 'px, ' + dy() + 'px)'"
       >
         @if (headerTemplate(); as headerTpl) {
@@ -2061,7 +2116,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
         [attr.aria-label]="header() || null"
         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()"
+        [ngStyle]="maximized() ? null : sizing().rest"
+        [style.width]="!maximized() && sizing().pane.width ? '100%' : null"
+        [style.height]="!maximized() && sizing().pane.height ? '100%' : null"
         [style.transform]="maximized() || (dx() === 0 && dy() === 0) ? null : 'translate(' + dx() + 'px, ' + dy() + 'px)'"
       >
         @if (headerTemplate(); as headerTpl) {
@@ -6536,6 +6593,11 @@ class SmzUiTimelineComponent {
     contentTemplate = computed(() => smzFindTemplate(this.templates(), 'content'), ...(ngDevMode ? [{ debugName: "contentTemplate" }] : []));
     oppositeTemplate = computed(() => smzFindTemplate(this.templates(), 'opposite'), ...(ngDevMode ? [{ debugName: "oppositeTemplate" }] : []));
     horizontal = computed(() => this.layout() === 'horizontal' || this.align() === 'top' || this.align() === 'bottom', ...(ngDevMode ? [{ debugName: "horizontal" }] : []));
+    /** No layout horizontal, o conteudo fica acima da linha em `top` e nos itens impares de `alternate`/`right`. */
+    contentOnTop(index) {
+        const align = this.align();
+        return align === 'top' || align === 'right' || (align === 'alternate' && index % 2 === 1);
+    }
     rowReverse(index) {
         const align = this.align();
         return align === 'right' || (align === 'alternate' && index % 2 === 1);
@@ -6552,7 +6614,45 @@ class SmzUiTimelineComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SmzUiTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SmzUiTimelineComponent, isStandalone: true, selector: "ui-timeline", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block font-ui text-ui-fg" }, queries: [{ propertyName: "templates", predicate: SmzTemplateDirective, isSignal: true }], ngImport: i0, template: `
-    <div class="flex" [class]="horizontal() ? 'flex-row' : 'flex-col'" [ngClass]="styleClass()">
+    @if (horizontal()) {
+      <!-- Nao usar a classe grid do Tailwind: o CSS legado do core (.grid, PrimeFlex) a sobrescreve com display:flex !important.
+           Grade de 3 linhas (conteudo de cima / marcadores / conteudo de baixo) com subgrade por item: todos os marcadores ficam na mesma linha. -->
+      <div style="display: grid; grid-template-rows: auto auto auto" [style.grid-template-columns]="'repeat(' + (value() ?? []).length + ', minmax(0, 1fr))'" [ngClass]="styleClass()">
+        @for (event of value() ?? []; track $index; let index = $index; let first = $first; let last = $last) {
+          <div class="tl-item min-w-0" style="display: grid; grid-row: span 3; grid-template-rows: subgrid">
+            <div class="flex min-w-0 flex-col justify-end px-2 pb-2 text-center" style="grid-row: 1">
+              @if (contentOnTop(index)) {
+                @if (contentTemplate(); as content) {
+                  <ng-container [ngTemplateOutlet]="content" [ngTemplateOutletContext]="{ $implicit: event, index: index }" />
+                }
+              } @else if (oppositeTemplate(); as opposite) {
+                <ng-container [ngTemplateOutlet]="opposite" [ngTemplateOutletContext]="{ $implicit: event, index: index }" />
+              }
+            </div>
+            <div class="flex items-center" style="grid-row: 2">
+              <span class="h-0.5 flex-1" [class]="first ? 'bg-transparent' : 'bg-ui-line'"></span>
+              @if (markerTemplate(); as marker) {
+                <ng-container [ngTemplateOutlet]="marker" [ngTemplateOutletContext]="{ $implicit: event, index: index }" />
+              }
+              @else {
+                <span class="block h-4 w-4 shrink-0 rounded-full border-2 border-ui-primary bg-ui-surface-1"></span>
+              }
+              <span class="h-0.5 flex-1" [class]="last ? 'bg-transparent' : 'bg-ui-line'"></span>
+            </div>
+            <div class="flex min-w-0 flex-col px-2 pt-2 text-center" style="grid-row: 3">
+              @if (!contentOnTop(index)) {
+                @if (contentTemplate(); as content) {
+                  <ng-container [ngTemplateOutlet]="content" [ngTemplateOutletContext]="{ $implicit: event, index: index }" />
+                }
+              } @else if (oppositeTemplate(); as opposite) {
+                <ng-container [ngTemplateOutlet]="opposite" [ngTemplateOutletContext]="{ $implicit: event, index: index }" />
+              }
+            </div>
+          </div>
+        }
+      </div>
+    } @else {
+    <div class="flex flex-col" [ngClass]="styleClass()">
       @for (event of value() ?? []; track $index; let index = $index; let last = $last) {
         <div class="flex min-w-0 flex-1" [class]="horizontal() ? 'flex-col' : (rowReverse(index) ? 'flex-row-reverse' : 'flex-row')">
           <div class="flex-1" [class]="oppositeClass(index)">
@@ -6579,6 +6679,7 @@ class SmzUiTimelineComponent {
         </div>
       }
     </div>
+    }
   `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: SmzUiTimelineComponent, decorators: [{
@@ -6589,7 +6690,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                     imports: [NgClass, NgTemplateOutlet],
                     host: { class: 'block font-ui text-ui-fg' },
                     template: `
-    <div class="flex" [class]="horizontal() ? 'flex-row' : 'flex-col'" [ngClass]="styleClass()">
+    @if (horizontal()) {
+      <!-- Nao usar a classe grid do Tailwind: o CSS legado do core (.grid, PrimeFlex) a sobrescreve com display:flex !important.
+           Grade de 3 linhas (conteudo de cima / marcadores / conteudo de baixo) com subgrade por item: todos os marcadores ficam na mesma linha. -->
+      <div style="display: grid; grid-template-rows: auto auto auto" [style.grid-template-columns]="'repeat(' + (value() ?? []).length + ', minmax(0, 1fr))'" [ngClass]="styleClass()">
+        @for (event of value() ?? []; track $index; let index = $index; let first = $first; let last = $last) {
+          <div class="tl-item min-w-0" style="display: grid; grid-row: span 3; grid-template-rows: subgrid">
+            <div class="flex min-w-0 flex-col justify-end px-2 pb-2 text-center" style="grid-row: 1">
+              @if (contentOnTop(index)) {
+                @if (contentTemplate(); as content) {
+                  <ng-container [ngTemplateOutlet]="content" [ngTemplateOutletContext]="{ $implicit: event, index: index }" />
+                }
+              } @else if (oppositeTemplate(); as opposite) {
+                <ng-container [ngTemplateOutlet]="opposite" [ngTemplateOutletContext]="{ $implicit: event, index: index }" />
+              }
+            </div>
+            <div class="flex items-center" style="grid-row: 2">
+              <span class="h-0.5 flex-1" [class]="first ? 'bg-transparent' : 'bg-ui-line'"></span>
+              @if (markerTemplate(); as marker) {
+                <ng-container [ngTemplateOutlet]="marker" [ngTemplateOutletContext]="{ $implicit: event, index: index }" />
+              }
+              @else {
+                <span class="block h-4 w-4 shrink-0 rounded-full border-2 border-ui-primary bg-ui-surface-1"></span>
+              }
+              <span class="h-0.5 flex-1" [class]="last ? 'bg-transparent' : 'bg-ui-line'"></span>
+            </div>
+            <div class="flex min-w-0 flex-col px-2 pt-2 text-center" style="grid-row: 3">
+              @if (!contentOnTop(index)) {
+                @if (contentTemplate(); as content) {
+                  <ng-container [ngTemplateOutlet]="content" [ngTemplateOutletContext]="{ $implicit: event, index: index }" />
+                }
+              } @else if (oppositeTemplate(); as opposite) {
+                <ng-container [ngTemplateOutlet]="opposite" [ngTemplateOutletContext]="{ $implicit: event, index: index }" />
+              }
+            </div>
+          </div>
+        }
+      </div>
+    } @else {
+    <div class="flex flex-col" [ngClass]="styleClass()">
       @for (event of value() ?? []; track $index; let index = $index; let last = $last) {
         <div class="flex min-w-0 flex-1" [class]="horizontal() ? 'flex-col' : (rowReverse(index) ? 'flex-row-reverse' : 'flex-row')">
           <div class="flex-1" [class]="oppositeClass(index)">
@@ -6616,6 +6755,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
         </div>
       }
     </div>
+    }
   `,
                 }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SmzTemplateDirective), { isSignal: true }] }] } });
@@ -8280,6 +8420,11 @@ class SmzPanelComponent {
     header = input('', ...(ngDevMode ? [{ debugName: "header" }] : []));
     toggleable = input(false, { ...(ngDevMode ? { debugName: "toggleable" } : {}), transform: booleanAttribute });
     collapsed = model(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
+    /**
+     * O que alterna o painel: `icon` (padrao; so o botao) ou `header` (o cabecalho inteiro, exceto elementos
+     * interativos dentro dele, como botoes do template `icons`). Equivale ao `toggler` do `p-panel`.
+     */
+    toggler = input('icon', ...(ngDevMode ? [{ debugName: "toggler" }] : []));
     /** Antes de alternar (cancelavel nao: apenas notifica). */
     beforeToggle = output();
     afterToggle = output();
@@ -8288,6 +8433,28 @@ class SmzPanelComponent {
     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" }] : []));
+    headerToggles = computed(() => this.toggleable() && this.toggler() === 'header', ...(ngDevMode ? [{ debugName: "headerToggles" }] : []));
+    onIconClick(event) {
+        // No modo `header` o clique no botao sobe ate o cabecalho, que ja alterna.
+        if (!this.headerToggles())
+            this.toggle(event);
+    }
+    onHeaderClick(event) {
+        if (!this.headerToggles())
+            return;
+        const target = event.target;
+        const interactive = target.closest('button, a, input, select, textarea, label, [role="button"], [role="menuitem"]');
+        // Ignora controles do template `icons`; o botao-seta do proprio painel (e o cabecalho) alternam.
+        if (interactive && !interactive.classList.contains('p-panel-header') && !interactive.hasAttribute('data-panel-toggle'))
+            return;
+        this.toggle(event);
+    }
+    onHeaderKey(event) {
+        if (!this.headerToggles() || event.target !== event.currentTarget)
+            return;
+        event.preventDefault();
+        this.toggle(event);
+    }
     toggle(event) {
         const next = !this.collapsed();
         this.beforeToggle.emit({ originalEvent: event, collapsed: next });
@@ -8295,16 +8462,25 @@ 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: "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: `
+    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 }, toggler: { classPropertyName: "toggler", publicName: "toggler", 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="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="p-panel-header flex items-center justify-between gap-2 border-b border-ui-line bg-ui-surface-1 px-4 py-3"
+        [class]="headerToggles() ? 'cursor-pointer select-none hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ui-focus' : ''"
+        [attr.role]="headerToggles() ? 'button' : null"
+        [attr.tabindex]="headerToggles() ? 0 : null"
+        [attr.aria-expanded]="headerToggles() ? !collapsed() : null"
+        (click)="onHeaderClick($event)"
+        (keydown.enter)="onHeaderKey($event)"
+        (keydown.space)="onHeaderKey($event)"
+      >
         <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)">
+            <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" data-panel-toggle [attr.aria-expanded]="!collapsed()" [attr.aria-label]="collapsed() ? 'Expandir' : 'Recolher'" [attr.tabindex]="headerToggles() ? -1 : null" (click)="onIconClick($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>
           }
@@ -8328,14 +8504,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                     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="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="p-panel-header flex items-center justify-between gap-2 border-b border-ui-line bg-ui-surface-1 px-4 py-3"
+        [class]="headerToggles() ? 'cursor-pointer select-none hover:bg-ui-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ui-focus' : ''"
+        [attr.role]="headerToggles() ? 'button' : null"
+        [attr.tabindex]="headerToggles() ? 0 : null"
+        [attr.aria-expanded]="headerToggles() ? !collapsed() : null"
+        (click)="onHeaderClick($event)"
+        (keydown.enter)="onHeaderKey($event)"
+        (keydown.space)="onHeaderKey($event)"
+      >
         <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)">
+            <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" data-panel-toggle [attr.aria-expanded]="!collapsed()" [attr.aria-label]="collapsed() ? 'Expandir' : 'Recolher'" [attr.tabindex]="headerToggles() ? -1 : null" (click)="onIconClick($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>
           }
@@ -8350,7 +8535,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
     }
   `,
                 }]
-        }], 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 }] }] } });
+        }], 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"] }], toggler: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggler", required: false }] }], 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 */
 /**
@@ -8585,7 +8770,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
 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`;
+ * Os templates `colgroup`, `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">
@@ -8629,6 +8814,8 @@ class SmzTreeTableComponent {
     page = output();
     templates = contentChildren(SmzTemplateDirective, ...(ngDevMode ? [{ debugName: "templates" }] : []));
     headerTemplate = computed(() => smzFindTemplate(this.templates(), 'header'), ...(ngDevMode ? [{ debugName: "headerTemplate" }] : []));
+    /** `<colgroup>` com as larguras das colunas (como no `p-treeTable`); quando existe, a tabela usa `table-layout: fixed`. */
+    colgroupTemplate = computed(() => smzFindTemplate(this.templates(), 'colgroup'), ...(ngDevMode ? [{ debugName: "colgroupTemplate" }] : []));
     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" }] : []));
@@ -8850,7 +9037,10 @@ class SmzTreeTableComponent {
       <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() ?? ''">
+      <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]="(colgroupTemplate() ? 'table-fixed ' : '') + (tableStyleClass() ?? '')">
+        @if (colgroupTemplate(); as tpl) {
+          <ng-container [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{ $implicit: columns() }" />
+        }
         <thead>
           @if (headerTemplate(); as tpl) {
             <ng-container [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{ $implicit: columns() }" />
@@ -8899,7 +9089,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
       <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() ?? ''">
+      <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]="(colgroupTemplate() ? 'table-fixed ' : '') + (tableStyleClass() ?? '')">
+        @if (colgroupTemplate(); as tpl) {
+          <ng-container [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{ $implicit: columns() }" />
+        }
         <thead>
           @if (headerTemplate(); as tpl) {
             <ng-container [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{ $implicit: columns() }" />