@praxisui/list 1.0.0-beta.29 → 1.0.0-beta.30

package/fesm2022/praxisui-list.mjs

@@ -16,21 +16,23 @@ import * as i4$1 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i6 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
+import * as i5 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
 import * as i2 from '@angular/forms';
 import { FormsModule, FormControl, ReactiveFormsModule } from '@angular/forms';
-import { BehaviorSubject, combineLatest, of, Subject } from 'rxjs';
+import { BehaviorSubject, combineLatest, of, Subject, debounceTime as debounceTime$1, distinctUntilChanged as distinctUntilChanged$1 } from 'rxjs';
 import { auditTime, switchMap, map, catchError, finalize, shareReplay, debounceTime, distinctUntilChanged, tap } from 'rxjs/operators';
 import { SETTINGS_PANEL_DATA, SettingsPanelService } from '@praxisui/settings-panel';
 import * as i3$1 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
-import * as i5 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
 import * as i8 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import * as i11 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import * as i12 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i15 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
 import * as i10 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -100,7 +102,9 @@ function evalExpr(expr, ctx) {
 function evaluateTemplate(def, item) {
     if (!def)
         return null;
-    const { baseExpr, pipe } = splitFirstPipe(def.expr);
+    // Support a top-level pipe outside of template placeholders,
+    // e.g.: "${item.active}|bool:Ativo:Inativo".
+    const { baseExpr, pipe } = splitFirstTopLevelPipe(def.expr);
     let value = evalExpr(baseExpr, { item });
     if (pipe) {
         const { name, args } = parsePipe(pipe);
@@ -112,7 +116,7 @@ function evaluateTemplate(def, item) {
     }
     const out = { type: def.type, value, class: def.class, style: def.style, color: def.color, variant: def.variant };
     if (def.badge?.expr) {
-        const { baseExpr: b2, pipe: p2 } = splitFirstPipe(def.badge.expr);
+        const { baseExpr: b2, pipe: p2 } = splitFirstTopLevelPipe(def.badge.expr);
         let badgeVal = evalExpr(b2, { item });
         if (p2) {
             const { name, args } = parsePipe(p2);
@@ -136,6 +140,26 @@ function splitFirstPipe(expr) {
         return { baseExpr: expr.trim() };
     return { baseExpr: expr.slice(0, idx).trim(), pipe: expr.slice(idx + 1).trim() };
 }
+// Find first '|' that is NOT inside a "${...}" placeholder
+function splitFirstTopLevelPipe(expr) {
+    let inTpl = 0;
+    for (let i = 0; i < expr.length; i++) {
+        const c = expr[i];
+        if (c === '$' && expr[i + 1] === '{') {
+            inTpl++;
+            i++;
+            continue;
+        }
+        if (c === '}' && inTpl > 0) {
+            inTpl--;
+            continue;
+        }
+        if (c === '|' && inTpl === 0) {
+            return { baseExpr: expr.slice(0, i).trim(), pipe: expr.slice(i + 1).trim() };
+        }
+    }
+    return { baseExpr: expr.trim() };
+}
 function parsePipe(pipeSpec) {
     const idx = pipeSpec.indexOf(':');
     if (idx === -1)
@@ -214,6 +238,7 @@ class ListDataService {
     query$ = new BehaviorSubject({});
     loading$ = new BehaviorSubject(false);
     total$ = new BehaviorSubject(0);
+    pageState$ = this.pageable$.asObservable();
     lastSig = '';
     crud = inject(GenericCrudService, {
         optional: true,
@@ -314,6 +339,9 @@ class ListDataService {
     }
     setQuery(q) {
         this.query$.next(q || {});
+        // Reset to first page when query changes
+        const p = this.pageable$.value;
+        this.pageable$.next({ ...p, pageNumber: 0 });
     }
     groupedStream() {
         return this.stream().pipe(switchMap((items) => this.config$.pipe(map((cfg) => cfg?.layout?.groupBy), map((groupBy) => {
@@ -515,6 +543,7 @@ class PraxisListConfigEditor {
         selection: { mode: 'none', return: 'value' },
         skin: { type: 'elevated', gradient: { from: '', to: '', angle: 135 } },
         i18n: { locale: 'en-US', currency: 'USD' },
+        ui: {},
     };
     isDirty$ = new BehaviorSubject(false);
     isValid$ = new BehaviorSubject(true);
@@ -533,6 +562,10 @@ class PraxisListConfigEditor {
     mappingLeading = { type: 'icon' };
     mapping = {};
     mappingDirty = false;
+    statusPosition = undefined;
+    iconColorMapEntries = [];
+    // UI (search/sort/range) editor state
+    uiSortRows = [];
     // Meta composition (multi-field)
     mappingMetaFields = [];
     mappingMetaSeparator = ' • ';
@@ -552,6 +585,7 @@ class PraxisListConfigEditor {
             this.working = this.normalize(structuredClone(cfg));
             // Initialize mapping UI from existing templating
             this.hydrateMappingFromTemplating(this.working.templating);
+            this.hydrateUiEditorFromConfig();
         }
         this.initialJson = JSON.stringify(this.working);
         this.lastJson = this.initialJson;
@@ -632,6 +666,7 @@ class PraxisListConfigEditor {
                 class: cfg.skin?.class,
             },
             i18n: cfg.i18n || {},
+            ui: cfg.ui || {},
         };
         return out;
     }
@@ -807,6 +842,72 @@ class PraxisListConfigEditor {
         this.markDirty();
         this.verify();
     }
+    onUiChanged() {
+        this.markDirty();
+        this.verify();
+    }
+    addUiSortRow() {
+        this.uiSortRows = [...(this.uiSortRows || []), { label: '', field: '', dir: 'desc' }];
+        this.onUiSortRowsChanged();
+    }
+    removeUiSortRow(i) {
+        const arr = [...(this.uiSortRows || [])];
+        arr.splice(i, 1);
+        this.uiSortRows = arr;
+        this.onUiSortRowsChanged();
+    }
+    onUiSortRowsChanged() {
+        // Map rows to config.ui.sortOptions
+        const opts = (this.uiSortRows || [])
+            .filter(r => (r.field || '').trim())
+            .map(r => ({ label: (r.label || '').trim() || `${r.field},${r.dir || 'desc'}`, value: `${r.field},${r.dir || 'desc'}` }));
+        this.working = produce(this.working, (draft) => {
+            (draft.ui ||= {}).sortOptions = opts;
+        });
+        this.onUiChanged();
+    }
+    isUiSortRowDuplicate(index) {
+        const rows = this.uiSortRows || [];
+        const key = `${rows[index]?.field || ''},${rows[index]?.dir || 'desc'}`.trim();
+        if (!key || !rows[index]?.field)
+            return false;
+        let count = 0;
+        for (const r of rows) {
+            const k = `${r?.field || ''},${r?.dir || 'desc'}`.trim();
+            if (k === key)
+                count++;
+        }
+        return count > 1;
+    }
+    isIconColorDuplicate(index) {
+        const arr = this.iconColorMapEntries || [];
+        const key = (arr[index]?.key || '').trim();
+        if (!key)
+            return false;
+        let count = 0;
+        for (const e of arr) {
+            if ((e?.key || '').trim() === key)
+                count++;
+        }
+        return count > 1;
+    }
+    hydrateUiEditorFromConfig() {
+        const ui = (this.working.ui ||= {});
+        const arr = ui.sortOptions || [];
+        const rows = [];
+        for (const op of arr) {
+            if (typeof op === 'string') {
+                const [f, d] = op.split(',');
+                rows.push({ label: op, field: f, dir: d || 'asc' });
+            }
+            else if (op && typeof op === 'object') {
+                const v = String(op.value || '');
+                const [f, d] = v.split(',');
+                rows.push({ label: op.label, field: f, dir: d || 'asc' });
+            }
+        }
+        this.uiSortRows = rows;
+    }
     // Legacy method retained to avoid breaking references; no-op now.
     loadFieldsIfNeeded() { }
     updateSortConfig() {
@@ -828,8 +929,10 @@ class PraxisListConfigEditor {
             if (!slot?.field)
                 return undefined;
             const base = '${item.' + slot.field + '}';
-            if (slot.type === 'text')
-                return { type: 'text', expr: base, class: slot.class, style: slot.style };
+            if (slot.type === 'text') {
+                const pipe = (slot.extraPipe || '').trim();
+                return { type: 'text', expr: pipe ? base + '|' + pipe : base, class: slot.class, style: slot.style };
+            }
             if (slot.type === 'chip')
                 return { type: 'chip', expr: base, class: slot.class, style: slot.style, color: slot.chipColor, variant: slot.chipVariant };
             if (slot.type === 'rating')
@@ -852,6 +955,11 @@ class PraxisListConfigEditor {
                     param = ':' + style;
                 return { type: 'date', expr: param ? base + '|' + param : base, class: slot.class, style: slot.style };
             }
+            if (slot.type === 'icon') {
+                const pipe = (slot.extraPipe || '').trim();
+                const expr = pipe ? base + '|' + pipe : base;
+                return { type: 'icon', expr, class: slot.class, style: slot.style };
+            }
             return undefined;
         };
         const p = build(this.mappingPrimary);
@@ -900,6 +1008,22 @@ class PraxisListConfigEditor {
             t.metaPlacement = this.mappingMeta.placement;
         }
         t.metaPrefixIcon = (this.mappingMetaPrefixIcon || '').trim() || undefined;
+        // Status overlay and icon color map
+        t.statusPosition = this.statusPosition || undefined;
+        if (this.iconColorMapEntries && this.iconColorMapEntries.length) {
+            const map = {};
+            for (const e of this.iconColorMapEntries) {
+                const k = (e.key || '').trim();
+                if (!k)
+                    continue;
+                if (e.color)
+                    map[k] = e.color;
+            }
+            t.iconColorMap = Object.keys(map).length ? map : undefined;
+        }
+        else {
+            t.iconColorMap = undefined;
+        }
         // Apply features
         if (this.features && this.features.length) {
             t.features = this.features
@@ -945,6 +1069,37 @@ class PraxisListConfigEditor {
         this.mappingDirty = true;
         this.isDirty$.next(true);
     }
+    // Icon color map editor helpers
+    addIconColorEntry() {
+        this.iconColorMapEntries = [...(this.iconColorMapEntries || []), { key: '', color: undefined }];
+        this.onIconColorMapChanged();
+    }
+    removeIconColorEntry(i) {
+        const arr = [...(this.iconColorMapEntries || [])];
+        arr.splice(i, 1);
+        this.iconColorMapEntries = arr;
+        this.onIconColorMapChanged();
+    }
+    onIconColorMapChanged() {
+        // Normalize: last value wins, remove vazios
+        const map = new Map();
+        for (const e of (this.iconColorMapEntries || [])) {
+            const k = (e?.key || '').trim();
+            if (!k)
+                continue;
+            map.set(k, e?.color || undefined);
+        }
+        this.iconColorMapEntries = Array.from(map.entries()).map(([key, color]) => ({ key, color }));
+        this.mappingDirty = true;
+        this.isDirty$.next(true);
+    }
+    // Pipe assistant helper: sets extraPipe for a given mapping and marks dirty
+    setPipe(target, spec) {
+        if (!target)
+            return;
+        target.extraPipe = spec;
+        this.onMappingChanged();
+    }
     // ===============
     // Expr helpers (Features): click-to-insert fields and literals
     // ===============
@@ -1023,6 +1178,8 @@ class PraxisListConfigEditor {
                 Object.assign(base, parseCurrency(param));
             if (templ.primary.type === 'date')
                 Object.assign(base, parseDate(param));
+            if (templ.primary.type === 'text')
+                base.extraPipe = param;
             this.mappingPrimary = base;
         }
         if (templ.secondary) {
@@ -1032,6 +1189,8 @@ class PraxisListConfigEditor {
                 Object.assign(base, parseCurrency(param));
             if (templ.secondary.type === 'date')
                 Object.assign(base, parseDate(param));
+            if (templ.secondary.type === 'text')
+                base.extraPipe = param;
             this.mappingSecondary = base;
         }
         if (templ.meta) {
@@ -1041,6 +1200,8 @@ class PraxisListConfigEditor {
                 Object.assign(base, parseCurrency(param));
             if (templ.meta.type === 'date')
                 Object.assign(base, parseDate(param));
+            if (templ.meta.type === 'text')
+                base.extraPipe = param;
             this.mappingMeta = base;
             if (templ.metaPlacement)
                 this.mappingMeta.placement = templ.metaPlacement;
@@ -1068,12 +1229,27 @@ class PraxisListConfigEditor {
                 Object.assign(base, parseCurrency(param));
             if (templ.trailing.type === 'date')
                 Object.assign(base, parseDate(param));
+            if (templ.trailing.type === 'icon' || templ.trailing.type === 'text')
+                base.extraPipe = param;
             this.mappingTrailing = base;
             if (templ.trailing?.color)
                 this.mappingTrailing.chipColor = templ.trailing.color;
             if (templ.trailing?.variant)
                 this.mappingTrailing.chipVariant = templ.trailing.variant;
         }
+        // Overlay position and icon colors
+        this.statusPosition = templ?.statusPosition;
+        const icm = templ?.iconColorMap;
+        this.iconColorMapEntries = Object.entries(icm || {}).map(([k, v]) => ({ key: k, color: v }));
+        if ((this.mappingTrailing?.field || '').toLowerCase() === 'status' && (!this.iconColorMapEntries || this.iconColorMapEntries.length === 0)) {
+            this.iconColorMapEntries = [
+                { key: 'PLANEJADA', color: 'primary' },
+                { key: 'EM_ANDAMENTO', color: 'accent' },
+                { key: 'PAUSADA', color: 'accent' },
+                { key: 'CONCLUIDA', color: 'primary' },
+                { key: 'FALHOU', color: 'warn' },
+            ];
+        }
         if (templ.leading?.type === 'icon' && typeof templ.leading.expr === 'string') {
             this.mappingLeading = { type: 'icon', icon: templ.leading.expr };
         }
@@ -1117,8 +1293,27 @@ class PraxisListConfigEditor {
         const compareBy = (this.working?.selection?.compareBy || '').trim();
         if (compareBy && this.fields.length && !this.fields.includes(compareBy))
             valid = false;
+        // Duplicatas em opções de ordenação (UI) tornam inválido
+        if (valid && this.working?.ui?.showSort) {
+            const rows = this.uiSortRows || [];
+            const seen = new Map();
+            for (const r of rows) {
+                const k = `${(r?.field || '').trim()},${(r?.dir || 'desc').trim()}`;
+                if (!r?.field)
+                    continue;
+                seen.set(k, (seen.get(k) || 0) + 1);
+            }
+            for (const [, count] of seen) {
+                if (count > 1) {
+                    valid = false;
+                    break;
+                }
+            }
+        }
         this.isValid$.next(valid);
     }
+    // UI editor hydration already called in ctor
+    // Ensure UI.sortOptions are kept when saving via Settings Panel
     inferFromFields() {
         if (!this.fields?.length)
             return;
@@ -1216,6 +1411,52 @@ class PraxisListConfigEditor {
               </mat-select>
             </mat-form-field>
           </div>
+          <mat-divider class="my-8"></mat-divider>
+          <div class="subtitle">UI (Buscar / Ordenar / Rodapé)</div>
+          <div class="g g-auto-220 gap-12 ai-end">
+            <mat-slide-toggle [(ngModel)]="working.ui.showSearch" (ngModelChange)="onUiChanged()">Mostrar busca</mat-slide-toggle>
+            <mat-slide-toggle [(ngModel)]="working.ui.showSort" (ngModelChange)="onUiChanged()">Mostrar ordenar</mat-slide-toggle>
+            <mat-slide-toggle [(ngModel)]="working.ui.showRange" (ngModelChange)="onUiChanged()">Mostrar faixa X–Y de Total</mat-slide-toggle>
+          </div>
+          <div class="g g-auto-220 gap-12 ai-end mt-12" *ngIf="working.ui?.showSearch">
+            <mat-form-field appearance="outline">
+              <mat-label>Campo para buscar</mat-label>
+              <mat-select [(ngModel)]="working.ui.searchField" (ngModelChange)="onUiChanged()">
+                <mat-option *ngFor="let f of fields" [value]="f">{{ f }}</mat-option>
+              </mat-select>
+            </mat-form-field>
+            <mat-form-field appearance="outline">
+              <mat-label>Placeholder</mat-label>
+              <input matInput [(ngModel)]="working.ui.searchPlaceholder" (ngModelChange)="onUiChanged()" placeholder="ex.: Buscar por título" />
+            </mat-form-field>
+          </div>
+          <div class="mt-12" *ngIf="working.ui?.showSort">
+            <div class="g g-1-auto ai-center gap-8">
+              <div class="muted">Opções de ordenação (rótulo → campo+direção)</div>
+              <button mat-flat-button color="primary" (click)="addUiSortRow()">Adicionar opção</button>
+            </div>
+            <div class="g g-auto-220 gap-12 ai-end mt-12" *ngFor="let r of uiSortRows; let i = index">
+              <mat-form-field appearance="outline">
+                <mat-label>Rótulo</mat-label>
+                <input matInput [(ngModel)]="r.label" (ngModelChange)="onUiSortRowsChanged()" placeholder="ex.: Mais recentes" />
+              </mat-form-field>
+              <mat-form-field appearance="outline">
+                <mat-label>Campo</mat-label>
+                <mat-select [(ngModel)]="r.field" (ngModelChange)="onUiSortRowsChanged()">
+                  <mat-option *ngFor="let f of fields" [value]="f">{{ f }}</mat-option>
+                </mat-select>
+              </mat-form-field>
+              <mat-form-field appearance="outline">
+                <mat-label>Direção</mat-label>
+                <mat-select [(ngModel)]="r.dir" (ngModelChange)="onUiSortRowsChanged()">
+                  <mat-option value="desc">Descendente</mat-option>
+                  <mat-option value="asc">Ascendente</mat-option>
+                </mat-select>
+              </mat-form-field>
+              <div class="error" *ngIf="isUiSortRowDuplicate(i)">Opção duplicada (campo+direção)</div>
+              <div class="flex-end"><button mat-button color="warn" (click)="removeUiSortRow(i)">Remover</button></div>
+            </div>
+          </div>
         </div>
       </mat-tab>
       <mat-tab label="Ações">
@@ -1381,6 +1622,18 @@ class PraxisListConfigEditor {
                 </mat-select>
               </mat-form-field>
             </ng-container>
+            <mat-form-field appearance="outline" *ngIf="mappingPrimary.type==='text'">
+              <mat-label>Pipe extra (ex.: map:K=V)</mat-label>
+              <input matInput [(ngModel)]="mappingPrimary.extraPipe" (ngModelChange)="onMappingChanged()" placeholder="ex.: map:PLANEJADA=Planejada" />
+              <button mat-icon-button matSuffix [matMenuTriggerFor]="pipeMenuPrimary" aria-label="Assistente de pipes" matTooltip="Assistente de pipes"><mat-icon>build</mat-icon></button>
+            </mat-form-field>
+            <mat-menu #pipeMenuPrimary="matMenu">
+              <button mat-menu-item (click)="setPipe(mappingPrimary, 'map:KEY=VALUE,KEY2=VALUE2')"><mat-icon>tune</mat-icon><span>Map: KEY=VALUE…</span></button>
+              <button mat-menu-item (click)="setPipe(mappingPrimary, 'number:pt-BR')"><mat-icon>push_pin</mat-icon><span>Número: pt-BR</span></button>
+              <button mat-menu-item (click)="setPipe(mappingPrimary, 'number:pt-BR:compact')"><mat-icon>format_list_numbered</mat-icon><span>Número: compacto</span></button>
+              <button mat-menu-item (click)="setPipe(mappingPrimary, 'bool:Sim:Não')"><mat-icon>check_circle</mat-icon><span>Bool: Sim/Não</span></button>
+              <button mat-menu-item (click)="setPipe(mappingPrimary, 'date:pt-BR:short')"><mat-icon>schedule</mat-icon><span>Data: curto</span></button>
+            </mat-menu>
             <mat-form-field appearance="outline">
               <mat-label>Classe CSS</mat-label>
               <input matInput [(ngModel)]="mappingPrimary.class" (ngModelChange)="onMappingChanged()" />
@@ -1436,6 +1689,18 @@ class PraxisListConfigEditor {
                 </mat-select>
               </mat-form-field>
             </ng-container>
+            <mat-form-field appearance="outline" *ngIf="mappingSecondary.type==='text'">
+              <mat-label>Pipe extra (ex.: number:pt-BR:compact)</mat-label>
+              <input matInput [(ngModel)]="mappingSecondary.extraPipe" (ngModelChange)="onMappingChanged()" placeholder="ex.: number:pt-BR:compact" />
+              <button mat-icon-button matSuffix [matMenuTriggerFor]="pipeMenuSecondary" aria-label="Assistente de pipes" matTooltip="Assistente de pipes"><mat-icon>build</mat-icon></button>
+            </mat-form-field>
+            <mat-menu #pipeMenuSecondary="matMenu">
+              <button mat-menu-item (click)="setPipe(mappingSecondary, 'map:KEY=VALUE,KEY2=VALUE2')"><mat-icon>tune</mat-icon><span>Map: KEY=VALUE…</span></button>
+              <button mat-menu-item (click)="setPipe(mappingSecondary, 'number:pt-BR')"><mat-icon>push_pin</mat-icon><span>Número: pt-BR</span></button>
+              <button mat-menu-item (click)="setPipe(mappingSecondary, 'number:pt-BR:compact')"><mat-icon>format_list_numbered</mat-icon><span>Número: compacto</span></button>
+              <button mat-menu-item (click)="setPipe(mappingSecondary, 'bool:Sim:Não')"><mat-icon>check_circle</mat-icon><span>Bool: Sim/Não</span></button>
+              <button mat-menu-item (click)="setPipe(mappingSecondary, 'date:pt-BR:short')"><mat-icon>schedule</mat-icon><span>Data: curto</span></button>
+            </mat-menu>
             <mat-form-field appearance="outline">
               <mat-label>Classe CSS</mat-label>
               <input matInput [(ngModel)]="mappingSecondary.class" (ngModelChange)="onMappingChanged()" />
@@ -1530,6 +1795,18 @@ class PraxisListConfigEditor {
                 </mat-select>
               </mat-form-field>
             </ng-container>
+            <mat-form-field appearance="outline" *ngIf="mappingMeta.type==='text'">
+              <mat-label>Pipe extra (ex.: map:K=V)</mat-label>
+              <input matInput [(ngModel)]="mappingMeta.extraPipe" (ngModelChange)="onMappingChanged()" placeholder="ex.: map:ABERTO=Aberto,FECHADO=Fechado" />
+              <button mat-icon-button matSuffix [matMenuTriggerFor]="pipeMenuMeta" aria-label="Assistente de pipes" matTooltip="Assistente de pipes"><mat-icon>build</mat-icon></button>
+            </mat-form-field>
+            <mat-menu #pipeMenuMeta="matMenu">
+              <button mat-menu-item (click)="setPipe(mappingMeta, 'map:KEY=VALUE,KEY2=VALUE2')"><mat-icon>tune</mat-icon><span>Map: KEY=VALUE…</span></button>
+              <button mat-menu-item (click)="setPipe(mappingMeta, 'number:pt-BR')"><mat-icon>push_pin</mat-icon><span>Número: pt-BR</span></button>
+              <button mat-menu-item (click)="setPipe(mappingMeta, 'number:pt-BR:compact')"><mat-icon>format_list_numbered</mat-icon><span>Número: compacto</span></button>
+              <button mat-menu-item (click)="setPipe(mappingMeta, 'bool:Sim:Não')"><mat-icon>check_circle</mat-icon><span>Bool: Sim/Não</span></button>
+              <button mat-menu-item (click)="setPipe(mappingMeta, 'date:pt-BR:short')"><mat-icon>schedule</mat-icon><span>Data: curto</span></button>
+            </mat-menu>
               </div>
             </mat-expansion-panel>
             <mat-expansion-panel>
@@ -1550,8 +1827,19 @@ class PraxisListConfigEditor {
                 <mat-option value="chip">Chip</mat-option>
                 <mat-option value="currency">Moeda</mat-option>
                 <mat-option value="date">Data</mat-option>
+                <mat-option value="icon">Ícone</mat-option>
               </mat-select>
             </mat-form-field>
+            <mat-form-field appearance="outline" *ngIf="mappingTrailing.type==='text' || mappingTrailing.type==='icon'">
+              <mat-label>Pipe extra (ex.: map:KEY=icon,...)</mat-label>
+              <input matInput [(ngModel)]="mappingTrailing.extraPipe" (ngModelChange)="onMappingChanged()" placeholder="ex.: map:PLANEJADA=event,EM_ANDAMENTO=play_circle" />
+              <button mat-icon-button matSuffix [matMenuTriggerFor]="pipeMenuTrailing" aria-label="Assistente de pipes" matTooltip="Assistente de pipes"><mat-icon>build</mat-icon></button>
+            </mat-form-field>
+            <mat-menu #pipeMenuTrailing="matMenu">
+              <button mat-menu-item (click)="setPipe(mappingTrailing, 'map:PLANEJADA=event,EM_ANDAMENTO=play_circle,PAUSADA=pause_circle,CONCLUIDA=check_circle,FALHOU=error')"><mat-icon>tune</mat-icon><span>Map: status→ícone</span></button>
+              <button mat-menu-item (click)="setPipe(mappingTrailing, 'date:pt-BR:short')"><mat-icon>schedule</mat-icon><span>Data: curto</span></button>
+              <button mat-menu-item (click)="setPipe(mappingTrailing, 'number:pt-BR')"><mat-icon>push_pin</mat-icon><span>Número: pt-BR</span></button>
+            </mat-menu>
             <ng-container *ngIf="mappingTrailing.type==='chip'">
               <mat-form-field appearance="outline">
                 <mat-label>Cor do chip</mat-label>
@@ -1603,6 +1891,44 @@ class PraxisListConfigEditor {
               <mat-label>Style inline</mat-label>
               <input matInput [(ngModel)]="mappingTrailing.style" (ngModelChange)="onMappingChanged()" />
             </mat-form-field>
+            <mat-form-field appearance="outline">
+              <mat-label>Posição do status (cards)</mat-label>
+              <mat-select [(ngModel)]="statusPosition" (ngModelChange)="onMappingChanged()">
+                <mat-option [value]="undefined">Inline</mat-option>
+                <mat-option value="inline">Inline</mat-option>
+                <mat-option value="top-right">Canto superior direito</mat-option>
+              </mat-select>
+            </mat-form-field>
+            <div class="subtitle">Cores por status (ícone)</div>
+            <div class="chips-row" *ngIf="(mappingTrailing?.field || '').toLowerCase()==='status'">
+              <span class="muted">Sugestões:</span>
+              <button mat-stroked-button type="button" (click)="iconColorMapEntries = iconColorMapEntries.concat([{key:'PLANEJADA', color:'primary'}]); onIconColorMapChanged()">PLANEJADA</button>
+              <button mat-stroked-button type="button" (click)="iconColorMapEntries = iconColorMapEntries.concat([{key:'EM_ANDAMENTO', color:'accent'}]); onIconColorMapChanged()">EM_ANDAMENTO</button>
+              <button mat-stroked-button type="button" (click)="iconColorMapEntries = iconColorMapEntries.concat([{key:'PAUSADA', color:'accent'}]); onIconColorMapChanged()">PAUSADA</button>
+              <button mat-stroked-button type="button" (click)="iconColorMapEntries = iconColorMapEntries.concat([{key:'CONCLUIDA', color:'primary'}]); onIconColorMapChanged()">CONCLUIDA</button>
+              <button mat-stroked-button type="button" (click)="iconColorMapEntries = iconColorMapEntries.concat([{key:'FALHOU', color:'warn'}]); onIconColorMapChanged()">FALHOU</button>
+            </div>
+            <div class="g g-auto-220 gap-12 ai-end">
+              <ng-container *ngFor="let ent of iconColorMapEntries; let i = index">
+                <mat-form-field appearance="outline">
+                  <mat-label>Chave</mat-label>
+                  <input matInput [(ngModel)]="ent.key" (ngModelChange)="onIconColorMapChanged()" placeholder="ex.: EM_ANDAMENTO ou play_circle" />
+                </mat-form-field>
+                <mat-form-field appearance="outline">
+                  <mat-label>Cor</mat-label>
+                  <mat-select [(ngModel)]="ent.color" (ngModelChange)="onIconColorMapChanged()">
+                    <mat-option [value]="undefined">Default</mat-option>
+                    <mat-option value="primary">Primary</mat-option>
+                    <mat-option value="accent">Accent</mat-option>
+                    <mat-option value="warn">Warn</mat-option>
+                  </mat-select>
+                </mat-form-field>
+                <div class="error" *ngIf="isIconColorDuplicate(i)">Chave duplicada (consolidada)</div>
+                <div class="flex-end"><button mat-button color="warn" (click)="removeIconColorEntry(i)">Remover</button></div>
+              </ng-container>
+              <div><button mat-flat-button color="primary" (click)="addIconColorEntry()">Adicionar cor</button></div>
+            </div>
+            <div class="muted">Entradas vazias são ignoradas e chaves repetidas são mescladas (última vence).</div>
               </div>
             </mat-expansion-panel>
             <mat-expansion-panel>
@@ -1863,7 +2189,7 @@ class PraxisListConfigEditor {
         </div>
       </mat-tab>
     </mat-tab-group>
-  `, isInline: true, styles: [".g{display:grid}.g-auto-220{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.g-auto-200{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.g-1-auto{grid-template-columns:1fr auto}.row-flow{grid-auto-flow:column}.gap-6{gap:6px}.gap-8{gap:8px}.gap-12{gap:12px}.ai-center{align-items:center}.ai-end{align-items:end}.mt-12{margin-top:12px}.mb-8{margin-bottom:8px}.mb-6{margin-bottom:6px}.my-8{margin:8px 0}.subtitle{margin:8px 0 4px;opacity:.82}.chips-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i3$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i3$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i8.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i10.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i10.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i10.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i10.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i11.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i11.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i12.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i14.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i14.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "component", type: PraxisListSkinPreviewComponent, selector: "praxis-list-skin-preview", inputs: ["config", "items", "theme"] }] });
+  `, isInline: true, styles: [".g{display:grid}.g-auto-220{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.g-auto-200{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.g-1-auto{grid-template-columns:1fr auto}.row-flow{grid-auto-flow:column}.gap-6{gap:6px}.gap-8{gap:8px}.gap-12{gap:12px}.ai-center{align-items:center}.ai-end{align-items:end}.mt-12{margin-top:12px}.mb-8{margin-bottom:8px}.mb-6{margin-bottom:6px}.my-8{margin:8px 0}.subtitle{margin:8px 0 4px;opacity:.82}.chips-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.error{color:var(--mdc-theme-error,#b00020);font-size:.85rem}.muted{opacity:.7}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i3$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i3$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i8.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i10.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i10.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i10.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i10.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i11.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i11.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i12.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i14.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i14.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i15.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i15.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i15.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "component", type: PraxisListSkinPreviewComponent, selector: "praxis-list-skin-preview", inputs: ["config", "items", "theme"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PraxisListConfigEditor, decorators: [{
             type: Component,
@@ -1882,6 +2208,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                         MatTooltipModule,
                         MatDividerModule,
                         MatChipsModule,
+                        MatMenuModule,
                         PraxisIconDirective,
                         PraxisListSkinPreviewComponent,
                     ], template: `
@@ -1911,6 +2238,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
               </mat-select>
             </mat-form-field>
           </div>
+          <mat-divider class="my-8"></mat-divider>
+          <div class="subtitle">UI (Buscar / Ordenar / Rodapé)</div>
+          <div class="g g-auto-220 gap-12 ai-end">
+            <mat-slide-toggle [(ngModel)]="working.ui.showSearch" (ngModelChange)="onUiChanged()">Mostrar busca</mat-slide-toggle>
+            <mat-slide-toggle [(ngModel)]="working.ui.showSort" (ngModelChange)="onUiChanged()">Mostrar ordenar</mat-slide-toggle>
+            <mat-slide-toggle [(ngModel)]="working.ui.showRange" (ngModelChange)="onUiChanged()">Mostrar faixa X–Y de Total</mat-slide-toggle>
+          </div>
+          <div class="g g-auto-220 gap-12 ai-end mt-12" *ngIf="working.ui?.showSearch">
+            <mat-form-field appearance="outline">
+              <mat-label>Campo para buscar</mat-label>
+              <mat-select [(ngModel)]="working.ui.searchField" (ngModelChange)="onUiChanged()">
+                <mat-option *ngFor="let f of fields" [value]="f">{{ f }}</mat-option>
+              </mat-select>
+            </mat-form-field>
+            <mat-form-field appearance="outline">
+              <mat-label>Placeholder</mat-label>
+              <input matInput [(ngModel)]="working.ui.searchPlaceholder" (ngModelChange)="onUiChanged()" placeholder="ex.: Buscar por título" />
+            </mat-form-field>
+          </div>
+          <div class="mt-12" *ngIf="working.ui?.showSort">
+            <div class="g g-1-auto ai-center gap-8">
+              <div class="muted">Opções de ordenação (rótulo → campo+direção)</div>
+              <button mat-flat-button color="primary" (click)="addUiSortRow()">Adicionar opção</button>
+            </div>
+            <div class="g g-auto-220 gap-12 ai-end mt-12" *ngFor="let r of uiSortRows; let i = index">
+              <mat-form-field appearance="outline">
+                <mat-label>Rótulo</mat-label>
+                <input matInput [(ngModel)]="r.label" (ngModelChange)="onUiSortRowsChanged()" placeholder="ex.: Mais recentes" />
+              </mat-form-field>
+              <mat-form-field appearance="outline">
+                <mat-label>Campo</mat-label>
+                <mat-select [(ngModel)]="r.field" (ngModelChange)="onUiSortRowsChanged()">
+                  <mat-option *ngFor="let f of fields" [value]="f">{{ f }}</mat-option>
+                </mat-select>
+              </mat-form-field>
+              <mat-form-field appearance="outline">
+                <mat-label>Direção</mat-label>
+                <mat-select [(ngModel)]="r.dir" (ngModelChange)="onUiSortRowsChanged()">
+                  <mat-option value="desc">Descendente</mat-option>
+                  <mat-option value="asc">Ascendente</mat-option>
+                </mat-select>
+              </mat-form-field>
+              <div class="error" *ngIf="isUiSortRowDuplicate(i)">Opção duplicada (campo+direção)</div>
+              <div class="flex-end"><button mat-button color="warn" (click)="removeUiSortRow(i)">Remover</button></div>
+            </div>
+          </div>
         </div>
       </mat-tab>
       <mat-tab label="Ações">
@@ -2076,6 +2449,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                 </mat-select>
               </mat-form-field>
             </ng-container>
+            <mat-form-field appearance="outline" *ngIf="mappingPrimary.type==='text'">
+              <mat-label>Pipe extra (ex.: map:K=V)</mat-label>
+              <input matInput [(ngModel)]="mappingPrimary.extraPipe" (ngModelChange)="onMappingChanged()" placeholder="ex.: map:PLANEJADA=Planejada" />
+              <button mat-icon-button matSuffix [matMenuTriggerFor]="pipeMenuPrimary" aria-label="Assistente de pipes" matTooltip="Assistente de pipes"><mat-icon>build</mat-icon></button>
+            </mat-form-field>
+            <mat-menu #pipeMenuPrimary="matMenu">
+              <button mat-menu-item (click)="setPipe(mappingPrimary, 'map:KEY=VALUE,KEY2=VALUE2')"><mat-icon>tune</mat-icon><span>Map: KEY=VALUE…</span></button>
+              <button mat-menu-item (click)="setPipe(mappingPrimary, 'number:pt-BR')"><mat-icon>push_pin</mat-icon><span>Número: pt-BR</span></button>
+              <button mat-menu-item (click)="setPipe(mappingPrimary, 'number:pt-BR:compact')"><mat-icon>format_list_numbered</mat-icon><span>Número: compacto</span></button>
+              <button mat-menu-item (click)="setPipe(mappingPrimary, 'bool:Sim:Não')"><mat-icon>check_circle</mat-icon><span>Bool: Sim/Não</span></button>
+              <button mat-menu-item (click)="setPipe(mappingPrimary, 'date:pt-BR:short')"><mat-icon>schedule</mat-icon><span>Data: curto</span></button>
+            </mat-menu>
             <mat-form-field appearance="outline">
               <mat-label>Classe CSS</mat-label>
               <input matInput [(ngModel)]="mappingPrimary.class" (ngModelChange)="onMappingChanged()" />
@@ -2131,6 +2516,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                 </mat-select>
               </mat-form-field>
             </ng-container>
+            <mat-form-field appearance="outline" *ngIf="mappingSecondary.type==='text'">
+              <mat-label>Pipe extra (ex.: number:pt-BR:compact)</mat-label>
+              <input matInput [(ngModel)]="mappingSecondary.extraPipe" (ngModelChange)="onMappingChanged()" placeholder="ex.: number:pt-BR:compact" />
+              <button mat-icon-button matSuffix [matMenuTriggerFor]="pipeMenuSecondary" aria-label="Assistente de pipes" matTooltip="Assistente de pipes"><mat-icon>build</mat-icon></button>
+            </mat-form-field>
+            <mat-menu #pipeMenuSecondary="matMenu">
+              <button mat-menu-item (click)="setPipe(mappingSecondary, 'map:KEY=VALUE,KEY2=VALUE2')"><mat-icon>tune</mat-icon><span>Map: KEY=VALUE…</span></button>
+              <button mat-menu-item (click)="setPipe(mappingSecondary, 'number:pt-BR')"><mat-icon>push_pin</mat-icon><span>Número: pt-BR</span></button>
+              <button mat-menu-item (click)="setPipe(mappingSecondary, 'number:pt-BR:compact')"><mat-icon>format_list_numbered</mat-icon><span>Número: compacto</span></button>
+              <button mat-menu-item (click)="setPipe(mappingSecondary, 'bool:Sim:Não')"><mat-icon>check_circle</mat-icon><span>Bool: Sim/Não</span></button>
+              <button mat-menu-item (click)="setPipe(mappingSecondary, 'date:pt-BR:short')"><mat-icon>schedule</mat-icon><span>Data: curto</span></button>
+            </mat-menu>
             <mat-form-field appearance="outline">
               <mat-label>Classe CSS</mat-label>
               <input matInput [(ngModel)]="mappingSecondary.class" (ngModelChange)="onMappingChanged()" />
@@ -2225,6 +2622,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                 </mat-select>
               </mat-form-field>
             </ng-container>
+            <mat-form-field appearance="outline" *ngIf="mappingMeta.type==='text'">
+              <mat-label>Pipe extra (ex.: map:K=V)</mat-label>
+              <input matInput [(ngModel)]="mappingMeta.extraPipe" (ngModelChange)="onMappingChanged()" placeholder="ex.: map:ABERTO=Aberto,FECHADO=Fechado" />
+              <button mat-icon-button matSuffix [matMenuTriggerFor]="pipeMenuMeta" aria-label="Assistente de pipes" matTooltip="Assistente de pipes"><mat-icon>build</mat-icon></button>
+            </mat-form-field>
+            <mat-menu #pipeMenuMeta="matMenu">
+              <button mat-menu-item (click)="setPipe(mappingMeta, 'map:KEY=VALUE,KEY2=VALUE2')"><mat-icon>tune</mat-icon><span>Map: KEY=VALUE…</span></button>
+              <button mat-menu-item (click)="setPipe(mappingMeta, 'number:pt-BR')"><mat-icon>push_pin</mat-icon><span>Número: pt-BR</span></button>
+              <button mat-menu-item (click)="setPipe(mappingMeta, 'number:pt-BR:compact')"><mat-icon>format_list_numbered</mat-icon><span>Número: compacto</span></button>
+              <button mat-menu-item (click)="setPipe(mappingMeta, 'bool:Sim:Não')"><mat-icon>check_circle</mat-icon><span>Bool: Sim/Não</span></button>
+              <button mat-menu-item (click)="setPipe(mappingMeta, 'date:pt-BR:short')"><mat-icon>schedule</mat-icon><span>Data: curto</span></button>
+            </mat-menu>
               </div>
             </mat-expansion-panel>
             <mat-expansion-panel>
@@ -2245,8 +2654,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                 <mat-option value="chip">Chip</mat-option>
                 <mat-option value="currency">Moeda</mat-option>
                 <mat-option value="date">Data</mat-option>
+                <mat-option value="icon">Ícone</mat-option>
               </mat-select>
             </mat-form-field>
+            <mat-form-field appearance="outline" *ngIf="mappingTrailing.type==='text' || mappingTrailing.type==='icon'">
+              <mat-label>Pipe extra (ex.: map:KEY=icon,...)</mat-label>
+              <input matInput [(ngModel)]="mappingTrailing.extraPipe" (ngModelChange)="onMappingChanged()" placeholder="ex.: map:PLANEJADA=event,EM_ANDAMENTO=play_circle" />
+              <button mat-icon-button matSuffix [matMenuTriggerFor]="pipeMenuTrailing" aria-label="Assistente de pipes" matTooltip="Assistente de pipes"><mat-icon>build</mat-icon></button>
+            </mat-form-field>
+            <mat-menu #pipeMenuTrailing="matMenu">
+              <button mat-menu-item (click)="setPipe(mappingTrailing, 'map:PLANEJADA=event,EM_ANDAMENTO=play_circle,PAUSADA=pause_circle,CONCLUIDA=check_circle,FALHOU=error')"><mat-icon>tune</mat-icon><span>Map: status→ícone</span></button>
+              <button mat-menu-item (click)="setPipe(mappingTrailing, 'date:pt-BR:short')"><mat-icon>schedule</mat-icon><span>Data: curto</span></button>
+              <button mat-menu-item (click)="setPipe(mappingTrailing, 'number:pt-BR')"><mat-icon>push_pin</mat-icon><span>Número: pt-BR</span></button>
+            </mat-menu>
             <ng-container *ngIf="mappingTrailing.type==='chip'">
               <mat-form-field appearance="outline">
                 <mat-label>Cor do chip</mat-label>
@@ -2298,6 +2718,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
               <mat-label>Style inline</mat-label>
               <input matInput [(ngModel)]="mappingTrailing.style" (ngModelChange)="onMappingChanged()" />
             </mat-form-field>
+            <mat-form-field appearance="outline">
+              <mat-label>Posição do status (cards)</mat-label>
+              <mat-select [(ngModel)]="statusPosition" (ngModelChange)="onMappingChanged()">
+                <mat-option [value]="undefined">Inline</mat-option>
+                <mat-option value="inline">Inline</mat-option>
+                <mat-option value="top-right">Canto superior direito</mat-option>
+              </mat-select>
+            </mat-form-field>
+            <div class="subtitle">Cores por status (ícone)</div>
+            <div class="chips-row" *ngIf="(mappingTrailing?.field || '').toLowerCase()==='status'">
+              <span class="muted">Sugestões:</span>
+              <button mat-stroked-button type="button" (click)="iconColorMapEntries = iconColorMapEntries.concat([{key:'PLANEJADA', color:'primary'}]); onIconColorMapChanged()">PLANEJADA</button>
+              <button mat-stroked-button type="button" (click)="iconColorMapEntries = iconColorMapEntries.concat([{key:'EM_ANDAMENTO', color:'accent'}]); onIconColorMapChanged()">EM_ANDAMENTO</button>
+              <button mat-stroked-button type="button" (click)="iconColorMapEntries = iconColorMapEntries.concat([{key:'PAUSADA', color:'accent'}]); onIconColorMapChanged()">PAUSADA</button>
+              <button mat-stroked-button type="button" (click)="iconColorMapEntries = iconColorMapEntries.concat([{key:'CONCLUIDA', color:'primary'}]); onIconColorMapChanged()">CONCLUIDA</button>
+              <button mat-stroked-button type="button" (click)="iconColorMapEntries = iconColorMapEntries.concat([{key:'FALHOU', color:'warn'}]); onIconColorMapChanged()">FALHOU</button>
+            </div>
+            <div class="g g-auto-220 gap-12 ai-end">
+              <ng-container *ngFor="let ent of iconColorMapEntries; let i = index">
+                <mat-form-field appearance="outline">
+                  <mat-label>Chave</mat-label>
+                  <input matInput [(ngModel)]="ent.key" (ngModelChange)="onIconColorMapChanged()" placeholder="ex.: EM_ANDAMENTO ou play_circle" />
+                </mat-form-field>
+                <mat-form-field appearance="outline">
+                  <mat-label>Cor</mat-label>
+                  <mat-select [(ngModel)]="ent.color" (ngModelChange)="onIconColorMapChanged()">
+                    <mat-option [value]="undefined">Default</mat-option>
+                    <mat-option value="primary">Primary</mat-option>
+                    <mat-option value="accent">Accent</mat-option>
+                    <mat-option value="warn">Warn</mat-option>
+                  </mat-select>
+                </mat-form-field>
+                <div class="error" *ngIf="isIconColorDuplicate(i)">Chave duplicada (consolidada)</div>
+                <div class="flex-end"><button mat-button color="warn" (click)="removeIconColorEntry(i)">Remover</button></div>
+              </ng-container>
+              <div><button mat-flat-button color="primary" (click)="addIconColorEntry()">Adicionar cor</button></div>
+            </div>
+            <div class="muted">Entradas vazias são ignoradas e chaves repetidas são mescladas (última vence).</div>
               </div>
             </mat-expansion-panel>
             <mat-expansion-panel>
@@ -2558,7 +3016,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
         </div>
       </mat-tab>
     </mat-tab-group>
-  `, styles: [".g{display:grid}.g-auto-220{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.g-auto-200{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.g-1-auto{grid-template-columns:1fr auto}.row-flow{grid-auto-flow:column}.gap-6{gap:6px}.gap-8{gap:8px}.gap-12{gap:12px}.ai-center{align-items:center}.ai-end{align-items:end}.mt-12{margin-top:12px}.mb-8{margin-bottom:8px}.mb-6{margin-bottom:6px}.my-8{margin:8px 0}.subtitle{margin:8px 0 4px;opacity:.82}.chips-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}\n"] }]
+  `, styles: [".g{display:grid}.g-auto-220{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.g-auto-200{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.g-1-auto{grid-template-columns:1fr auto}.row-flow{grid-auto-flow:column}.gap-6{gap:6px}.gap-8{gap:8px}.gap-12{gap:12px}.ai-center{align-items:center}.ai-end{align-items:end}.mt-12{margin-top:12px}.mb-8{margin-bottom:8px}.mb-6{margin-bottom:6px}.my-8{margin:8px 0}.subtitle{margin:8px 0 4px;opacity:.82}.chips-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.error{color:var(--mdc-theme-error,#b00020);font-size:.85rem}.muted{opacity:.7}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [SETTINGS_PANEL_DATA]
@@ -2578,6 +3036,9 @@ class PraxisList {
     sections$;
     loading$;
     total$;
+    page$;
+    lastQuery = {};
+    search$ = new Subject();
     get layoutLines() {
         return this.config?.layout?.lines ?? 2;
     }
@@ -2599,8 +3060,18 @@ class PraxisList {
         this.sections$ = this.data.groupedStream();
         this.loading$ = this.data.loading$;
         this.total$ = this.data.total$;
+        this.page$ = this.data.pageState$;
         this.setupSelectionBinding();
         this.applySkins();
+        this.lastQuery = this.config?.dataSource?.query || {};
+        this.search$.pipe(debounceTime$1(300), distinctUntilChanged$1()).subscribe((term) => {
+            const field = this.config?.ui?.searchField;
+            if (!field)
+                return;
+            const q = { ...(this.lastQuery || {}), [field]: term };
+            this.lastQuery = q;
+            this.data.setQuery(q);
+        });
     }
     ngOnChanges(changes) {
         if (changes['config']) {
@@ -2615,8 +3086,10 @@ class PraxisList {
             this.sections$ = this.data.groupedStream();
             this.loading$ = this.data.loading$;
             this.total$ = this.data.total$;
+            this.page$ = this.data.pageState$;
             this.setupSelectionBinding();
             this.applySkins();
+            this.lastQuery = this.config?.dataSource?.query || {};
         }
     }
     applyPersistence() {
@@ -2664,7 +3137,8 @@ class PraxisList {
     trailing = (item) => this.evalSlot('trailing', item);
     sectionHeader = (key) => evaluateTemplate(this.config?.templating?.sectionHeader, { key })?.value || key;
     featureLabel(item, expr) {
-        return this.evalString(expr || '', { item });
+        const out = evaluateTemplate({ type: 'text', expr: expr || '' }, item);
+        return out?.value ?? '';
     }
     featuresVisible() {
         const t = this.config?.templating;
@@ -2755,6 +3229,31 @@ class PraxisList {
         if (isFinite(size) && size > 0)
             this.data.setPageSize(size);
     }
+    onSortChange(val) {
+        if (!val)
+            return;
+        this.data.setSort([val]);
+    }
+    onSearchInput(val) {
+        this.search$.next(val || '');
+    }
+    sortOptionValue(op) {
+        return typeof op === 'string' ? op : ((op && op.value) ? String(op.value) : '');
+    }
+    sortOptionLabel(op) {
+        if (op && typeof op === 'object' && op.label)
+            return String(op.label);
+        const v = this.sortOptionValue(op);
+        return v;
+    }
+    rangeStart(ps) {
+        return (ps?.pageNumber || 0) * (ps?.pageSize || 0) + 1;
+    }
+    rangeEnd(currLen, ps, total) {
+        const startIndex = (ps?.pageNumber || 0) * (ps?.pageSize || 0);
+        const to = startIndex + (currLen || 0);
+        return Math.min(to, total || 0);
+    }
     onEditorApplied(newCfg) {
         this.config = newCfg;
         // Optionally infer templates from backend schema if not defined
@@ -2922,17 +3421,8 @@ class PraxisList {
         return [spec.slice(0, idx).trim(), spec.slice(idx + 1).trim()];
     }
     evalString(expr, ctx) {
-        return expr.replace(/\$\{([^}]+)\}/g, (_, path) => {
-            try {
-                const value = path
-                    .split('.')
-                    .reduce((acc, k) => (acc == null ? undefined : acc[k]), ctx);
-                return value == null ? '' : String(value);
-            }
-            catch {
-                return '';
-            }
-        });
+        const res = evaluateTemplate({ type: 'text', expr }, ctx?.item ?? ctx);
+        return res?.value ?? '';
     }
     parseTwoParams(param) {
         if (!param)
@@ -2994,7 +3484,7 @@ class PraxisList {
     trackBySection = (_, s) => s?.key ?? _;
     trackByItem = (i, it) => this.config?.selection?.compareBy ? (it?.[this.config.selection.compareBy] ?? i) : (it?.id ?? i);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PraxisList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: PraxisList, isStandalone: true, selector: "praxis-list", inputs: { config: "config", form: "form" }, outputs: { itemClick: "itemClick", actionClick: "actionClick", selectionChange: "selectionChange" }, providers: [GenericCrudService, ListDataService], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"praxis-list-root\"\n  [ngClass]=\"skinClasses\"\n  [attr.aria-label]=\"config.a11y?.ariaLabel || null\"\n  [attr.aria-labelledby]=\"config.a11y?.ariaLabelledBy || null\"\n>\n  @if (inlineCss) {\n    <style [innerHTML]=\"inlineCss\"></style>\n  }\n\n  <!-- Skeleton while loading -->\n  @if ((loading$ | async) && hasSkeleton()) {\n    @if (isListVariant()) {\n      <mat-list>\n        @for (_ of skeletonItems(); track $index; let i = $index) {\n          <mat-list-item>\n            <div class=\"list-item-content\">\n              <div class=\"skeleton skeleton-avatar\"></div>\n              <div style=\"width:100%\">\n                <div class=\"skeleton skeleton-line w-60\"></div>\n                @if (layoutLines > 1) { <div class=\"skeleton skeleton-line w-40\"></div> }\n              </div>\n              <div class=\"skeleton skeleton-chip\"></div>\n            </div>\n          </mat-list-item>\n        }\n      </mat-list>\n    } @else {\n      <div class=\"cards-grid\">\n        @for (_ of skeletonItems(); track $index; let i = $index) {\n          <div class=\"item-card\">\n            <div class=\"list-item-content\">\n              <div class=\"skeleton skeleton-avatar\"></div>\n              <div style=\"width:100%\">\n                <div class=\"skeleton skeleton-line w-60\"></div>\n                @if (layoutLines > 1) { <div class=\"skeleton skeleton-line w-40\"></div> }\n              </div>\n              <div class=\"skeleton skeleton-chip\"></div>\n            </div>\n          </div>\n        }\n      </div>\n    }\n  } @else {\n    <ng-container *ngTemplateOutlet=\"notLoading\"></ng-container>\n  }\n\n  <ng-template #notLoading>\n    <!-- Empty state -->\n    @if (items$ | async; as all) {\n      @if (all.length === 0) {\n        <div class=\"section-header\">\n          {{ (config.templating?.emptyState?.expr || 'Nenhum item dispon\u00EDvel') }}\n        </div>\n      }\n    }\n\n  <!-- List variant -->\n  @if (isListVariant()) {\n    <!-- Selection list -->\n    @if (isSelectionEnabled()) {\n      <mat-selection-list\n        [multiple]=\"config.selection?.mode === 'multiple'\"\n        [formControl]=\"boundControl\"\n        (selectionChange)=\"onSelectionChange($event)\"\n      >\n      @for (section of sections$ | async; track trackBySection($index, section)) {\n        @if (section.key) {\n          <div class=\"section-header mat-subheader\">\n            {{ sectionHeader(section.key) }}\n          </div>\n        }\n        @for (item of section.items; track trackByItem($index, item); let i = $index) {\n        <mat-list-option\n          [value]=\"item\"\n          (click)=\"onItemClick(item, i, section.key || undefined)\"\n        >\n          <div class=\"list-item-content\">\n            @if (leading(item); as lead) {\n              @switch (lead.type) {\n                @case ('icon') {\n                  <mat-icon [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">{{ lead.value }}</mat-icon>\n                }\n                @case ('image') {\n                  <div class=\"lead-image\" [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">\n                    <img [src]=\"lead.value\" [alt]=\"config.templating?.leading?.imageAlt || ''\" />\n                    @if (lead.badge?.value) {\n                      <mat-chip class=\"lead-badge\" [color]=\"lead.badge?.color || undefined\" [ngClass]=\"(((lead.badge?.variant || 'filled') === 'outlined') ? 'chip-outlined' : '')\">{{ lead.badge?.value }}</mat-chip>\n                    }\n                  </div>\n                }\n              }\n            }\n            @if (meta(item); as m) {\n            <div>\n              <div class=\"primary\" [ngClass]=\"primary(item)?.class\" [style.cssText]=\"primary(item)?.style\">{{ primary(item)?.value }}</div>\n              @if (layoutLines > 1) { <div class=\"secondary\" [ngClass]=\"secondary(item)?.class\" [style.cssText]=\"secondary(item)?.style\">{{ secondary(item)?.value }}</div> }\n              @if ((config.templating?.metaPlacement === 'line' && (m?.type === 'text' || m?.type === 'date')) || (layoutLines > 2 && (m?.type === 'text' || m?.type === 'date'))) {\n                <div class=\"tertiary\" [ngClass]=\"m.class\" [style.cssText]=\"m.style\">\n                  @if (config.templating?.metaPrefixIcon; as mpi) { <mat-icon [praxisIcon]=\"mpi\"></mat-icon> }\n                  {{ m.value }}\n                </div>\n              }\n              @if (featuresVisible()) {\n                @for (f of (config.templating?.features || []); track $index; let fi = $index) {\n                  <span class=\"feature\">\n                    @if (f.icon && featuresMode() !== 'labels-only') { <mat-icon [praxisIcon]=\"f.icon\"></mat-icon> }\n                    @if (featuresMode() !== 'icons-only') { <span [ngClass]=\"f.class\" [style.cssText]=\"f.style\">{{ featureLabel(item, f.expr) }}</span> }\n                  </span>\n                }\n              }\n            </div>\n            @if (!(((config.templating?.metaPlacement === 'line') || (layoutLines > 2)) && (m?.type === 'text' || m?.type === 'date'))) {\n              <div class=\"meta\" [ngClass]=\"m.class\" [style.cssText]=\"m.style\">\n                @switch (m.type) {\n                  @case ('chip') { <mat-chip [color]=\"m.color || undefined\" [ngClass]=\"((m.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\">{{ m.value }}</mat-chip> }\n                  @case ('rating') { @for (_ of [0,1,2,3,4]; track $index; let idx = $index) { <mat-icon [praxisIcon]=\"starIcon(idx, m.value)\"></mat-icon> } }\n                  @default { <span>@if (config.templating?.metaPrefixIcon; as mpi2) { <mat-icon>{{ mpi2 }}</mat-icon> }{{ m.value }}</span> }\n                }\n              </div>\n            }\n            @if (trailing(item); as tr) {\n              <div class=\"trailing\" [ngClass]=\"tr.class\" [style.cssText]=\"tr.style\">\n                @switch (tr.type) {\n                  @case ('chip') { <mat-chip [color]=\"tr.color || undefined\" [ngClass]=\"((tr.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\">{{ tr.value }}</mat-chip> }\n                  @case ('icon') { <mat-icon [praxisIcon]=\"tr.value\" [color]=\"tr.color || undefined\"></mat-icon> }\n                  @default { <span>{{ tr.value }}</span> }\n                }\n              </div>\n            }\n            }\n            @for (action of visibleActions(item); let aidx = $index; track action?.id ?? $index) {\n              @if ((action.kind || 'icon') === 'icon') {\n                <button mat-icon-button [color]=\"action.color || undefined\" (click)=\"onActionClick($event, action.id, item, i)\" [attr.aria-label]=\"action.label || action.id\">\n                  <mat-icon [praxisIcon]=\"action.icon\"></mat-icon>\n                </button>\n              } @else {\n                @if (action.buttonVariant === 'stroked') { <button mat-stroked-button [color]=\"action.color || undefined\" (click)=\"onActionClick($event, action.id, item, i)\" [attr.aria-label]=\"action.label || action.id\">{{ action.label || action.id }}</button> }\n                @if (action.buttonVariant === 'raised') { <button mat-raised-button [color]=\"action.color || undefined\" (click)=\"onActionClick($event, action.id, item, i)\" [attr.aria-label]=\"action.label || action.id\">{{ action.label || action.id }}</button> }\n                @if (!action.buttonVariant || action.buttonVariant === 'flat') { <button mat-flat-button [color]=\"action.color || undefined\" (click)=\"onActionClick($event, action.id, item, i)\" [attr.aria-label]=\"action.label || action.id\">{{ action.label || action.id }}</button> }\n              }\n            }\n          </div>\n        </mat-list-option>\n        }\n      }\n      </mat-selection-list>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"readList\"></ng-container>\n    }\n\n    <!-- Read-only list -->\n    <ng-template #readList>\n      <mat-list>\n        @for (section of sections$ | async; track trackBySection($index, section); let sidx = $index) {\n          @if (section.key) {\n            <div class=\"section-header mat-subheader\">\n              {{ sectionHeader(section.key) }}\n            </div>\n          }\n          @for (item of section.items; track trackByItem($index, item); let i = $index) {\n            <mat-list-item (click)=\"onItemClick(item, i, section.key || undefined)\">\n              <div class=\"list-item-content\">\n                @if (leading(item); as lead) { <mat-icon [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">{{ lead.value }}</mat-icon> }\n                @if (meta(item); as m) {\n                <div>\n                  <div class=\"primary\" [ngClass]=\"primary(item)?.class\" [style.cssText]=\"primary(item)?.style\">{{ primary(item)?.value }}</div>\n                  @if (layoutLines > 1) { <div class=\"secondary\" [ngClass]=\"secondary(item)?.class\" [style.cssText]=\"secondary(item)?.style\">{{ secondary(item)?.value }}</div> }\n                  @if ((config.templating?.metaPlacement === 'line' && (m?.type === 'text' || m?.type === 'date')) || (layoutLines > 2 && (m?.type === 'text' || m?.type === 'date'))) { <div class=\"tertiary\" [ngClass]=\"m.class\" [style.cssText]=\"m.style\">{{ m.value }}</div> }\n                </div>\n                @if (!(((config.templating?.metaPlacement === 'line') || (layoutLines > 2)) && (m?.type === 'text' || m?.type === 'date'))) {\n                  <div class=\"meta\" [ngClass]=\"m.class\" [style.cssText]=\"m.style\">\n                    @switch (m.type) {\n                      @case ('chip') { <mat-chip>{{ m.value }}</mat-chip> }\n                      @case ('rating') { @for (_ of [0,1,2,3,4]; track $index; let idx = $index) { <mat-icon>{{ starIcon(idx, m.value) }}</mat-icon> } }\n                      @default { <span>{{ m.value }}</span> }\n                    }\n                  </div>\n                }\n                @if (trailing(item); as tr) {\n                  <div class=\"trailing\" [ngClass]=\"tr.class\" [style.cssText]=\"tr.style\">\n                    @switch (tr.type) {\n                      @case ('chip') { <mat-chip>{{ tr.value }}</mat-chip> }\n                      @case ('icon') { <mat-icon [praxisIcon]=\"tr.value\" [color]=\"tr.color || undefined\"></mat-icon> }\n                      @default { <span>{{ tr.value }}</span> }\n                    }\n                  </div>\n                }\n                }\n                @for (action of visibleActions(item); let aidx = $index; track action?.id ?? $index) {\n                  <button mat-icon-button [color]=\"action.color || undefined\" (click)=\"onActionClick($event, action.id, item, i)\" [attr.aria-label]=\"action.label || action.id\">\n                    <mat-icon>{{ action.icon }}</mat-icon>\n                  </button>\n                }\n              </div>\n            </mat-list-item>\n          }\n          @if (config.layout?.dividers === 'between') { <mat-divider></mat-divider> }\n        }\n      </mat-list>\n    </ng-template>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"cardsVariant\"></ng-container>\n  }\n\n  <!-- Cards variant -->\n  <ng-template #cardsVariant>\n    <div class=\"cards-grid\">\n      @for (it of (items$ | async) ?? []; track $index; let i = $index) {\n        <div class=\"item-card\" (click)=\"onItemClick(it, i)\">\n          <div class=\"list-item-content\">\n            @if (leading(it); as lead) {\n              @switch (lead.type) {\n                @case ('icon') { <mat-icon [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">{{ lead.value }}</mat-icon> }\n                @case ('image') {\n                  <div class=\"lead-image\" [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">\n                    <img [src]=\"lead.value\" [alt]=\"config.templating?.leading?.imageAlt || ''\" />\n                    @if (lead.badge?.value) { <mat-chip class=\"lead-badge\" [color]=\"lead.badge?.color || undefined\" [ngClass]=\"(((lead.badge?.variant || 'filled') === 'outlined') ? 'chip-outlined' : '')\">{{ lead.badge?.value }}</mat-chip> }\n                  </div>\n                }\n              }\n            }\n            @if (meta(it); as m) {\n            <div>\n              <div class=\"primary\" [ngClass]=\"primary(it)?.class\" [style.cssText]=\"primary(it)?.style\">{{ primary(it)?.value }}</div>\n              @if (layoutLines > 1) { <div class=\"secondary\" [ngClass]=\"secondary(it)?.class\" [style.cssText]=\"secondary(it)?.style\">{{ secondary(it)?.value }}</div> }\n              @if ((config.templating?.metaPlacement === 'line' && (m?.type === 'text' || m?.type === 'date')) || (layoutLines > 2 && (m?.type === 'text' || m?.type === 'date'))) { <div class=\"tertiary\" [ngClass]=\"m.class\" [style.cssText]=\"m.style\">{{ m.value }}</div> }\n              @if (featuresVisible()) {\n                @for (f of (config.templating?.features || []); track $index; let fi = $index) {\n                  <span class=\"feature\">\n                    @if (f.icon && featuresMode() !== 'labels-only') { <mat-icon>{{ f.icon }}</mat-icon> }\n                    @if (featuresMode() !== 'icons-only') { <span [ngClass]=\"f.class\" [style.cssText]=\"f.style\">{{ featureLabel(it, f.expr) }}</span> }\n                  </span>\n                }\n              }\n            </div>\n            @if (!(((config.templating?.metaPlacement === 'line') || (layoutLines > 2)) && (m?.type === 'text' || m?.type === 'date'))) {\n              <div class=\"meta\" [ngClass]=\"m.class\" [style.cssText]=\"m.style\">\n                @switch (m.type) {\n                  @case ('chip') { <mat-chip [color]=\"m.color || undefined\" [ngClass]=\"((m.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\">{{ m.value }}</mat-chip> }\n                  @case ('rating') { @for (_ of [0,1,2,3,4]; track $index; let idx = $index) { <mat-icon>{{ starIcon(idx, m.value) }}</mat-icon> } }\n                  @default { <span>{{ m.value }}</span> }\n                }\n              </div>\n            }\n            @if (trailing(it); as tr) {\n              @if ((config.templating?.statusPosition || 'inline') === 'top-right' && (tr?.type === 'chip' || tr?.type === 'icon')) {\n                <div class=\"status-overlay\">\n                  @if (tr?.type === 'chip') { <mat-chip [color]=\"tr.color || undefined\" [ngClass]=\"((tr.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\">{{ tr.value }}</mat-chip> }\n                  @if (tr?.type === 'icon') { <mat-icon [praxisIcon]=\"tr.value\" [color]=\"tr.color || undefined\"></mat-icon> }\n                </div>\n              } @else {\n                <div class=\"trailing\" [ngClass]=\"tr.class\" [style.cssText]=\"tr.style\">\n                  @switch (tr.type) {\n                    @case ('chip') { <mat-chip [color]=\"tr.color || undefined\" [ngClass]=\"((tr.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\">{{ tr.value }}</mat-chip> }\n                    @case ('icon') { <mat-icon [praxisIcon]=\"tr.value\" [color]=\"tr.color || undefined\"></mat-icon> }\n                    @default { <span>{{ tr.value }}</span> }\n                  }\n                </div>\n              }\n            }\n            }\n          </div>\n          <div class=\"card-actions\" (click)=\"$event.stopPropagation()\">\n            @for (action of visibleActions(it); let aidx = $index; track action?.id ?? $index) {\n              @if ((action.kind || 'icon') === 'icon') {\n                <button mat-icon-button [color]=\"action.color || undefined\" (click)=\"onActionClick($event, action.id, it, i)\" [attr.aria-label]=\"action.label || action.id\">\n                  <mat-icon>{{ action.icon }}</mat-icon>\n                </button>\n              } @else {\n                @if (action.buttonVariant === 'stroked') { <button mat-stroked-button [color]=\"action.color || undefined\" (click)=\"onActionClick($event, action.id, it, i)\" [attr.aria-label]=\"action.label || action.id\">{{ action.label || action.id }}</button> }\n                @if (action.buttonVariant === 'raised') { <button mat-raised-button [color]=\"action.color || undefined\" (click)=\"onActionClick($event, action.id, it, i)\" [attr.aria-label]=\"action.label || action.id\">{{ action.label || action.id }}</button> }\n                @if (!action.buttonVariant || action.buttonVariant === 'flat') { <button mat-flat-button [color]=\"action.color || undefined\" (click)=\"onActionClick($event, action.id, it, i)\" [attr.aria-label]=\"action.label || action.id\">{{ action.label || action.id }}</button> }\n              }\n            }\n          </div>\n        </div>\n      }\n    </div>\n  </ng-template>\n  \n  <!-- Simple pagination controls for remote data -->\n  @if (config.dataSource?.resourcePath) {\n    <div class=\"paginator\">\n      <button mat-stroked-button color=\"primary\" (click)=\"prevPage()\">Anterior</button>\n      <button mat-stroked-button color=\"primary\" (click)=\"nextPage()\">Pr\u00F3ximo</button>\n      <mat-form-field style=\"width: 120px; margin-left: 8px;\" appearance=\"outline\">\n        <mat-label>Tam. p\u00E1gina</mat-label>\n        <mat-select (selectionChange)=\"setPageSize($event.value)\" [value]=\"config.layout?.pageSize || 10\">\n          <mat-option [value]=\"6\">6</mat-option>\n          <mat-option [value]=\"8\">8</mat-option>\n          <mat-option [value]=\"12\">12</mat-option>\n          <mat-option [value]=\"24\">24</mat-option>\n        </mat-select>\n      </mat-form-field>\n      @if (total$ | async; as total) { <span class=\"muted\">Total: {{ total }}</span> }\n    </div>\n  }\n  </ng-template>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.praxis-list-root{--p-list-radius: 1rem;--p-list-shadow: 0 6px 20px rgba(0, 0, 0, .08);--p-list-border: 1px solid rgba(0, 0, 0, .08);--p-list-blur: 8px;--p-list-grad-from: #8e72ff;--p-list-grad-to: #ffaa70;--p-list-grad-angle: 135deg}.skin-elevated .item-card{background:var(--mdc-elevated-card-container-color, var(--md-sys-color-surface));border-radius:var(--p-list-radius);box-shadow:var(--p-list-shadow);border:var(--p-list-border)}.skin-pill-soft .item-card{background:var(--mdc-elevated-card-container-color, var(--md-sys-color-surface));border-radius:calc(var(--p-list-radius) * 1.3);box-shadow:0 4px 16px #00000014;border:var(--p-list-border)}.skin-pill-soft .mat-mdc-list-item .list-item-content{background:var(--mdc-elevated-card-container-color, var(--md-sys-color-surface));border-radius:calc(var(--p-list-radius) * 1.3);box-shadow:0 4px 16px #00000014;border:var(--p-list-border);color:var(--p-list-foreground, #1f2937)}.skin-gradient-tile .item-card,.skin-gradient-tile .mat-mdc-list-item .list-item-content{background:linear-gradient(var(--p-list-grad-angle),var(--p-list-grad-from),var(--p-list-grad-to));border-radius:var(--p-list-radius);color:#fff}.skin-glass .item-card{background:#ffffff2e;border-radius:var(--p-list-radius);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(var(--p-list-blur));-webkit-backdrop-filter:blur(var(--p-list-blur))}.skin-glass .mat-mdc-list-item .list-item-content{background:#ffffff2e;border-radius:var(--p-list-radius);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(var(--p-list-blur));-webkit-backdrop-filter:blur(var(--p-list-blur));color:var(--p-list-foreground, #111)}.density-compact .mat-mdc-list-item,.density-compact .item-card{--_item-padding: 4px 8px}.density-comfortable .mat-mdc-list-item,.density-comfortable .item-card{--_item-padding: 8px 12px}.list-item-content{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:var(--_item-padding, 12px 16px)}.lead-image{position:relative;width:96px;height:72px;border-radius:12px;overflow:hidden}.lead-image img{width:100%;height:100%;object-fit:cover;display:block}.lead-image .lead-badge{position:absolute;left:8px;bottom:8px}.model-media .lead-image{width:136px;height:96px;border-radius:16px}.model-media .list-item-content{gap:16px}.model-hotel .lead-image{width:160px;height:110px;border-radius:18px}.primary{font-weight:600;color:var(--sicoob-tertiary-default, #001E24)}.secondary{opacity:.8}.tertiary{opacity:.68}.features{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px;color:inherit}.feature{display:inline-flex;align-items:center;gap:6px}.meta{opacity:.9}.trailing{opacity:.9;margin-left:8px}.section-header{font-size:.85rem;opacity:.7;padding:8px 12px}.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}.item-card{padding:12px;display:flex;flex-direction:column;min-height:160px;position:relative;cursor:pointer}.item-card:hover{box-shadow:0 10px 24px var(--sicoob-shadow-medium, rgba(0, 0, 0, .12));transform:translateY(-1px);transition:box-shadow .15s ease,transform .15s ease}.card-actions{display:flex;align-items:center;justify-content:flex-end;gap:4px;padding:6px 8px 4px;border-top:1px solid var(--sicoob-stroke-medium, rgba(0, 0, 0, .08));margin-top:auto}.status-overlay{position:absolute;top:10px;right:10px;pointer-events:none}.status-overlay .mat-mdc-chip{pointer-events:auto}.leading-icon.mat-icon{width:36px;height:36px;line-height:36px;font-size:20px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:color-mix(in srgb,var(--sicoob-info-lightest, #f0f9ff),transparent 30%);color:var(--sicoob-info-default, #0090e0)}.mat-mdc-chip{--mdc-chip-container-height: 22px;font-size:12px}.meta .mat-icon{font-size:18px;height:18px;width:18px}.primary,.secondary{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.primary,.secondary{-webkit-line-clamp:1}.features{overflow:hidden}@keyframes shimmer{0%{background-position:-468px 0}to{background-position:468px 0}}.skeleton{animation-duration:1.2s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:shimmer;animation-timing-function:linear;background:#f6f7f8;background:linear-gradient(to right,#eee 8%,#ddd 18%,#eee 33%);background-size:800px 104px;position:relative}.skeleton-avatar{width:32px;height:32px;border-radius:50%}.skeleton-line{height:10px;margin:6px 0;border-radius:6px}.skeleton-chip{width:48px;height:18px;border-radius:999px}.chip-outlined.mat-mdc-chip{background:transparent!important;border:1px solid currentColor}.w-60{width:60%}.w-40{width:40%}.paginator{display:flex;align-items:center;gap:8px;padding:8px 4px}.muted{opacity:.7}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i3.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i3.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i3.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: i3.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "component", type: i3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i14.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: PraxisList, isStandalone: true, selector: "praxis-list", inputs: { config: "config", form: "form" }, outputs: { itemClick: "itemClick", actionClick: "actionClick", selectionChange: "selectionChange" }, providers: [GenericCrudService, ListDataService], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"praxis-list-root\"\n  [ngClass]=\"skinClasses\"\n  [attr.aria-label]=\"config.a11y?.ariaLabel || null\"\n  [attr.aria-labelledby]=\"config.a11y?.ariaLabelledBy || null\"\n>\n  @if (inlineCss) {\n    <style [innerHTML]=\"inlineCss\"></style>\n  }\n\n  <!-- Skeleton while loading -->\n  @if ((loading$ | async) && hasSkeleton()) {\n    @if (isListVariant()) {\n      <mat-list>\n        @for (_ of skeletonItems(); track $index; let i = $index) {\n          <mat-list-item>\n            <div class=\"list-item-content\">\n              <div class=\"skeleton skeleton-avatar\"></div>\n              <div style=\"width:100%\">\n                <div class=\"skeleton skeleton-line w-60\"></div>\n                @if (layoutLines > 1) { <div class=\"skeleton skeleton-line w-40\"></div> }\n              </div>\n              <div class=\"skeleton skeleton-chip\"></div>\n            </div>\n          </mat-list-item>\n        }\n      </mat-list>\n    } @else {\n      <div class=\"cards-grid\">\n        @for (_ of skeletonItems(); track $index; let i = $index) {\n          <div class=\"item-card\">\n            <div class=\"list-item-content\">\n              <div class=\"skeleton skeleton-avatar\"></div>\n              <div style=\"width:100%\">\n                <div class=\"skeleton skeleton-line w-60\"></div>\n                @if (layoutLines > 1) { <div class=\"skeleton skeleton-line w-40\"></div> }\n              </div>\n              <div class=\"skeleton skeleton-chip\"></div>\n            </div>\n          </div>\n        }\n      </div>\n    }\n  } @else {\n    <ng-container *ngTemplateOutlet=\"notLoading\"></ng-container>\n  }\n\n  <ng-template #notLoading>\n    <!-- Empty state -->\n    @if (items$ | async; as all) {\n      @if (all.length === 0) {\n        <div class=\"section-header\">\n          {{ (config.templating?.emptyState?.expr || 'Nenhum item dispon\u00EDvel') }}\n        </div>\n      }\n    }\n\n  <!-- List variant -->\n  @if (isListVariant()) {\n    <!-- Selection list -->\n    @if (isSelectionEnabled()) {\n      <mat-selection-list\n        [multiple]=\"config.selection?.mode === 'multiple'\"\n        [formControl]=\"boundControl\"\n        (selectionChange)=\"onSelectionChange($event)\"\n      >\n      @for (section of sections$ | async; track trackBySection($index, section)) {\n        @if (section.key) {\n          <div class=\"section-header mat-subheader\">\n            {{ sectionHeader(section.key) }}\n          </div>\n        }\n        @for (item of section.items; track trackByItem($index, item); let i = $index) {\n        <mat-list-option\n          [value]=\"item\"\n          (click)=\"onItemClick(item, i, section.key || undefined)\"\n        >\n          <div class=\"list-item-content\">\n            @if (leading(item); as lead) {\n              @switch (lead.type) {\n                @case ('icon') {\n                  <mat-icon [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">{{ lead.value }}</mat-icon>\n                }\n                @case ('image') {\n                  <div class=\"lead-image\" [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">\n                    <img [src]=\"lead.value\" [alt]=\"config.templating?.leading?.imageAlt || ''\" />\n                    @if (lead.badge?.value) {\n                      <mat-chip class=\"lead-badge\" [color]=\"lead.badge?.color || undefined\" [ngClass]=\"(((lead.badge?.variant || 'filled') === 'outlined') ? 'chip-outlined' : '')\">{{ lead.badge?.value }}</mat-chip>\n                    }\n                  </div>\n                }\n              }\n            }\n            @if (meta(item); as m) {\n            <div>\n              <div class=\"primary\" [ngClass]=\"primary(item)?.class\" [style.cssText]=\"primary(item)?.style\">{{ primary(item)?.value }}</div>\n              @if (layoutLines > 1) { <div class=\"secondary\" [ngClass]=\"secondary(item)?.class\" [style.cssText]=\"secondary(item)?.style\">{{ secondary(item)?.value }}</div> }\n              @if ((config.templating?.metaPlacement === 'line' && (m?.type === 'text' || m?.type === 'date')) || (layoutLines > 2 && (m?.type === 'text' || m?.type === 'date'))) {\n                <div class=\"tertiary\" [ngClass]=\"m.class\" [style.cssText]=\"m.style\">\n                  @if (config.templating?.metaPrefixIcon; as mpi) { <mat-icon [praxisIcon]=\"mpi\"></mat-icon> }\n                  {{ m.value }}\n                </div>\n              }\n              @if (featuresVisible()) {\n                @for (f of (config.templating?.features || []); track $index; let fi = $index) {\n                  <span class=\"feature\">\n                    @if (f.icon && featuresMode() !== 'labels-only') { <mat-icon [praxisIcon]=\"f.icon\"></mat-icon> }\n                    @if (featuresMode() !== 'icons-only') { <span [ngClass]=\"f.class\" [style.cssText]=\"f.style\">{{ featureLabel(item, f.expr) }}</span> }\n                  </span>\n                }\n              }\n            </div>\n            @if (!(((config.templating?.metaPlacement === 'line') || (layoutLines > 2)) && (m?.type === 'text' || m?.type === 'date'))) {\n              <div class=\"meta\" [ngClass]=\"m.class\" [style.cssText]=\"m.style\">\n                @switch (m.type) {\n                  @case ('chip') { <mat-chip [color]=\"m.color || undefined\" [ngClass]=\"((m.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\">{{ m.value }}</mat-chip> }\n                  @case ('rating') { @for (_ of [0,1,2,3,4]; track $index; let idx = $index) { <mat-icon [praxisIcon]=\"starIcon(idx, m.value)\"></mat-icon> } }\n                  @default { <span>@if (config.templating?.metaPrefixIcon; as mpi2) { <mat-icon>{{ mpi2 }}</mat-icon> }{{ m.value }}</span> }\n                }\n              </div>\n            }\n            @if (trailing(item); as tr) {\n              <div class=\"trailing\" [ngClass]=\"tr.class\" [style.cssText]=\"tr.style\">\n                @switch (tr.type) {\n                  @case ('chip') { <mat-chip [color]=\"tr.color || undefined\" [ngClass]=\"((tr.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\">{{ tr.value }}</mat-chip> }\n                  @case ('icon') { <mat-icon [praxisIcon]=\"tr.value\" [color]=\"tr.color || undefined\"></mat-icon> }\n                  @default { <span>{{ tr.value }}</span> }\n                }\n              </div>\n            }\n            }\n            @for (action of visibleActions(item); let aidx = $index; track action?.id ?? $index) {\n              @if ((action.kind || 'icon') === 'icon') {\n                <button mat-icon-button [color]=\"action.color || undefined\" (click)=\"onActionClick($event, action.id, item, i)\" [attr.aria-label]=\"action.label || action.id\">\n                  <mat-icon [praxisIcon]=\"action.icon\"></mat-icon>\n                </button>\n              } @else {\n                @if (action.buttonVariant === 'stroked') { <button mat-stroked-button [color]=\"action.color || undefined\" (click)=\"onActionClick($event, action.id, item, i)\" [attr.aria-label]=\"action.label || action.id\">{{ action.label || action.id }}</button> }\n                @if (action.buttonVariant === 'raised') { <button mat-raised-button [color]=\"action.color || undefined\" (click)=\"onActionClick($event, action.id, item, i)\" [attr.aria-label]=\"action.label || action.id\">{{ action.label || action.id }}</button> }\n                @if (!action.buttonVariant || action.buttonVariant === 'flat') { <button mat-flat-button [color]=\"action.color || undefined\" (click)=\"onActionClick($event, action.id, item, i)\" [attr.aria-label]=\"action.label || action.id\">{{ action.label || action.id }}</button> }\n              }\n            }\n          </div>\n        </mat-list-option>\n        }\n      }\n      </mat-selection-list>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"readList\"></ng-container>\n    }\n\n    <!-- Read-only list -->\n    <ng-template #readList>\n      <mat-list>\n        @for (section of sections$ | async; track trackBySection($index, section); let sidx = $index) {\n          @if (section.key) {\n            <div class=\"section-header mat-subheader\">\n              {{ sectionHeader(section.key) }}\n            </div>\n          }\n          @for (item of section.items; track trackByItem($index, item); let i = $index) {\n            <mat-list-item (click)=\"onItemClick(item, i, section.key || undefined)\">\n              <div class=\"list-item-content\">\n                @if (leading(item); as lead) { <mat-icon [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">{{ lead.value }}</mat-icon> }\n                @if (meta(item); as m) {\n                <div>\n                  <div class=\"primary\" [ngClass]=\"primary(item)?.class\" [style.cssText]=\"primary(item)?.style\">{{ primary(item)?.value }}</div>\n                  @if (layoutLines > 1) { <div class=\"secondary\" [ngClass]=\"secondary(item)?.class\" [style.cssText]=\"secondary(item)?.style\">{{ secondary(item)?.value }}</div> }\n                  @if ((config.templating?.metaPlacement === 'line' && (m?.type === 'text' || m?.type === 'date')) || (layoutLines > 2 && (m?.type === 'text' || m?.type === 'date'))) { <div class=\"tertiary\" [ngClass]=\"m.class\" [style.cssText]=\"m.style\">{{ m.value }}</div> }\n                </div>\n                @if (!(((config.templating?.metaPlacement === 'line') || (layoutLines > 2)) && (m?.type === 'text' || m?.type === 'date'))) {\n                  <div class=\"meta\" [ngClass]=\"m.class\" [style.cssText]=\"m.style\">\n                    @switch (m.type) {\n                      @case ('chip') { <mat-chip>{{ m.value }}</mat-chip> }\n                      @case ('rating') { @for (_ of [0,1,2,3,4]; track $index; let idx = $index) { <mat-icon>{{ starIcon(idx, m.value) }}</mat-icon> } }\n                      @default { <span>{{ m.value }}</span> }\n                    }\n                  </div>\n                }\n                @if (trailing(item); as tr) {\n                  <div class=\"trailing\" [ngClass]=\"tr.class\" [style.cssText]=\"tr.style\">\n                    @switch (tr.type) {\n                      @case ('chip') { <mat-chip>{{ tr.value }}</mat-chip> }\n                      @case ('icon') { <mat-icon [praxisIcon]=\"tr.value\" [color]=\"tr.color || undefined\"></mat-icon> }\n                      @default { <span>{{ tr.value }}</span> }\n                    }\n                  </div>\n                }\n                }\n                @for (action of visibleActions(item); let aidx = $index; track action?.id ?? $index) {\n                  <button mat-icon-button [color]=\"action.color || undefined\" (click)=\"onActionClick($event, action.id, item, i)\" [attr.aria-label]=\"action.label || action.id\">\n                    <mat-icon>{{ action.icon }}</mat-icon>\n                  </button>\n                }\n              </div>\n            </mat-list-item>\n          }\n          @if (config.layout?.dividers === 'between') { <mat-divider></mat-divider> }\n        }\n      </mat-list>\n    </ng-template>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"cardsVariant\"></ng-container>\n  }\n\n  <!-- Cards variant -->\n  <ng-template #cardsVariant>\n    <div class=\"cards-grid\">\n      @for (it of (items$ | async) ?? []; track $index; let i = $index) {\n        <div class=\"item-card\" (click)=\"onItemClick(it, i)\">\n          <div class=\"list-item-content\">\n            @if (leading(it); as lead) {\n              @switch (lead.type) {\n                @case ('icon') { <mat-icon [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">{{ lead.value }}</mat-icon> }\n                @case ('image') {\n                  <div class=\"lead-image\" [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">\n                    <img [src]=\"lead.value\" [alt]=\"config.templating?.leading?.imageAlt || ''\" />\n                    @if (lead.badge?.value) { <mat-chip class=\"lead-badge\" [color]=\"lead.badge?.color || undefined\" [ngClass]=\"(((lead.badge?.variant || 'filled') === 'outlined') ? 'chip-outlined' : '')\">{{ lead.badge?.value }}</mat-chip> }\n                  </div>\n                }\n              }\n            }\n            @if (meta(it); as m) {\n            <div>\n              <div class=\"primary\" [ngClass]=\"primary(it)?.class\" [style.cssText]=\"primary(it)?.style\">{{ primary(it)?.value }}</div>\n              @if (layoutLines > 1) { <div class=\"secondary\" [ngClass]=\"secondary(it)?.class\" [style.cssText]=\"secondary(it)?.style\">{{ secondary(it)?.value }}</div> }\n              @if ((config.templating?.metaPlacement === 'line' && (m?.type === 'text' || m?.type === 'date')) || (layoutLines > 2 && (m?.type === 'text' || m?.type === 'date'))) { <div class=\"tertiary\" [ngClass]=\"m.class\" [style.cssText]=\"m.style\">{{ m.value }}</div> }\n              @if (featuresVisible()) {\n                @for (f of (config.templating?.features || []); track $index; let fi = $index) {\n                  <span class=\"feature\">\n                    @if (f.icon && featuresMode() !== 'labels-only') { <mat-icon>{{ f.icon }}</mat-icon> }\n                    @if (featuresMode() !== 'icons-only') { <span [ngClass]=\"f.class\" [style.cssText]=\"f.style\">{{ featureLabel(it, f.expr) }}</span> }\n                  </span>\n                }\n              }\n            </div>\n            @if (!(((config.templating?.metaPlacement === 'line') || (layoutLines > 2)) && (m?.type === 'text' || m?.type === 'date'))) {\n              <div class=\"meta\" [ngClass]=\"m.class\" [style.cssText]=\"m.style\">\n                @switch (m.type) {\n                  @case ('chip') { <mat-chip [color]=\"m.color || undefined\" [ngClass]=\"((m.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\">{{ m.value }}</mat-chip> }\n                  @case ('rating') { @for (_ of [0,1,2,3,4]; track $index; let idx = $index) { <mat-icon>{{ starIcon(idx, m.value) }}</mat-icon> } }\n                  @default { <span>{{ m.value }}</span> }\n                }\n              </div>\n            }\n            @if (trailing(it); as tr) {\n              @if ((config.templating?.statusPosition || 'inline') === 'top-right' && (tr?.type === 'chip' || tr?.type === 'icon')) {\n                <div class=\"status-overlay\">\n                  @if (tr?.type === 'chip') { <mat-chip [color]=\"tr.color || undefined\" [ngClass]=\"((tr.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\">{{ tr.value }}</mat-chip> }\n                  @if (tr?.type === 'icon') { <mat-icon [praxisIcon]=\"tr.value\" [color]=\"tr.color || undefined\"></mat-icon> }\n                </div>\n              } @else {\n                <div class=\"trailing\" [ngClass]=\"tr.class\" [style.cssText]=\"tr.style\">\n                  @switch (tr.type) {\n                    @case ('chip') { <mat-chip [color]=\"tr.color || undefined\" [ngClass]=\"((tr.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\">{{ tr.value }}</mat-chip> }\n                    @case ('icon') { <mat-icon [praxisIcon]=\"tr.value\" [color]=\"tr.color || undefined\"></mat-icon> }\n                    @default { <span>{{ tr.value }}</span> }\n                  }\n                </div>\n              }\n            }\n            }\n          </div>\n          <div class=\"card-actions\" (click)=\"$event.stopPropagation()\">\n            @for (action of visibleActions(it); let aidx = $index; track action?.id ?? $index) {\n              @if ((action.kind || 'icon') === 'icon') {\n                <button mat-icon-button [color]=\"action.color || undefined\" (click)=\"onActionClick($event, action.id, it, i)\" [attr.aria-label]=\"action.label || action.id\">\n                  <mat-icon>{{ action.icon }}</mat-icon>\n                </button>\n              } @else {\n                @if (action.buttonVariant === 'stroked') { <button mat-stroked-button [color]=\"action.color || undefined\" (click)=\"onActionClick($event, action.id, it, i)\" [attr.aria-label]=\"action.label || action.id\">{{ action.label || action.id }}</button> }\n                @if (action.buttonVariant === 'raised') { <button mat-raised-button [color]=\"action.color || undefined\" (click)=\"onActionClick($event, action.id, it, i)\" [attr.aria-label]=\"action.label || action.id\">{{ action.label || action.id }}</button> }\n                @if (!action.buttonVariant || action.buttonVariant === 'flat') { <button mat-flat-button [color]=\"action.color || undefined\" (click)=\"onActionClick($event, action.id, it, i)\" [attr.aria-label]=\"action.label || action.id\">{{ action.label || action.id }}</button> }\n              }\n            }\n          </div>\n        </div>\n      }\n    </div>\n  </ng-template>\n  \n  <!-- Simple pagination controls for remote data -->\n  @if (config.dataSource?.resourcePath) {\n    <div class=\"paginator\" style=\"flex-wrap: wrap; gap: 8px;\">\n      <div style=\"display:flex; align-items:center; gap:8px; flex-wrap: wrap;\">\n        <button mat-stroked-button color=\"primary\" (click)=\"prevPage()\">Anterior</button>\n        <button mat-stroked-button color=\"primary\" (click)=\"nextPage()\">Pr\u00F3ximo</button>\n        <mat-form-field style=\"width: 120px;\" appearance=\"outline\">\n          <mat-label>Tam. p\u00E1gina</mat-label>\n          <mat-select (selectionChange)=\"setPageSize($event.value)\" [value]=\"config.layout?.pageSize || 10\">\n            <mat-option [value]=\"6\">6</mat-option>\n            <mat-option [value]=\"8\">8</mat-option>\n            <mat-option [value]=\"12\">12</mat-option>\n            <mat-option [value]=\"24\">24</mat-option>\n          </mat-select>\n        </mat-form-field>\n        @if (config.ui?.showSort) {\n        <mat-form-field style=\"width: 180px;\" appearance=\"outline\">\n          <mat-label>Ordenar</mat-label>\n          <mat-select (selectionChange)=\"onSortChange($event.value)\">\n            @for (op of (config.ui?.sortOptions || []); track $index) {\n              <mat-option [value]=\"sortOptionValue(op)\">{{ sortOptionLabel(op) }}</mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        }\n        @if (config.ui?.showSearch && config.ui?.searchField) {\n          <mat-form-field style=\"min-width: 220px;\" appearance=\"outline\">\n            <mat-label>{{ config.ui?.searchPlaceholder || 'Buscar' }}</mat-label>\n            <input matInput type=\"search\" (input)=\"onSearchInput($any($event.target).value)\" />\n          </mat-form-field>\n        }\n      </div>\n      <div style=\"display:flex; align-items:center; gap:8px; margin-left:auto;\">\n        @if ((config.ui?.showRange ?? true)) {\n          @if (page$ | async; as ps) {\n            @if (total$ | async; as total) {\n              @if (items$ | async; as curr) {\n                <span class=\"muted\">{{ rangeStart(ps) }}\u2013{{ rangeEnd(curr?.length || 0, ps, total || 0) }} de {{ total || 0 }}</span>\n              }\n            }\n          }\n        } @else {\n          @if (total$ | async; as total2) { <span class=\"muted\">Total: {{ total2 }}</span> }\n        }\n      </div>\n    </div>\n  }\n  </ng-template>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.praxis-list-root{--p-list-radius: 1rem;--p-list-shadow: 0 6px 20px rgba(0, 0, 0, .08);--p-list-border: 1px solid rgba(0, 0, 0, .08);--p-list-blur: 8px;--p-list-grad-from: #8e72ff;--p-list-grad-to: #ffaa70;--p-list-grad-angle: 135deg}.skin-elevated .item-card{background:var(--mdc-elevated-card-container-color, var(--md-sys-color-surface));border-radius:var(--p-list-radius);box-shadow:var(--p-list-shadow);border:var(--p-list-border)}.skin-pill-soft .item-card{background:var(--mdc-elevated-card-container-color, var(--md-sys-color-surface));border-radius:calc(var(--p-list-radius) * 1.3);box-shadow:0 4px 16px #00000014;border:var(--p-list-border)}.skin-pill-soft .mat-mdc-list-item .list-item-content{background:var(--mdc-elevated-card-container-color, var(--md-sys-color-surface));border-radius:calc(var(--p-list-radius) * 1.3);box-shadow:0 4px 16px #00000014;border:var(--p-list-border);color:var(--p-list-foreground, #1f2937)}.skin-gradient-tile .item-card,.skin-gradient-tile .mat-mdc-list-item .list-item-content{background:linear-gradient(var(--p-list-grad-angle),var(--p-list-grad-from),var(--p-list-grad-to));border-radius:var(--p-list-radius);color:#fff}.skin-glass .item-card{background:#ffffff2e;border-radius:var(--p-list-radius);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(var(--p-list-blur));-webkit-backdrop-filter:blur(var(--p-list-blur))}.skin-glass .mat-mdc-list-item .list-item-content{background:#ffffff2e;border-radius:var(--p-list-radius);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(var(--p-list-blur));-webkit-backdrop-filter:blur(var(--p-list-blur));color:var(--p-list-foreground, #111)}.density-compact .mat-mdc-list-item,.density-compact .item-card{--_item-padding: 4px 8px}.density-comfortable .mat-mdc-list-item,.density-comfortable .item-card{--_item-padding: 8px 12px}.list-item-content{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:var(--_item-padding, 12px 16px)}.lead-image{position:relative;width:96px;height:72px;border-radius:12px;overflow:hidden}.lead-image img{width:100%;height:100%;object-fit:cover;display:block}.lead-image .lead-badge{position:absolute;left:8px;bottom:8px}.model-media .lead-image{width:136px;height:96px;border-radius:16px}.model-media .list-item-content{gap:16px}.model-hotel .lead-image{width:160px;height:110px;border-radius:18px}.primary{font-weight:600;color:var(--sicoob-tertiary-default, #001E24)}.secondary{opacity:.8}.tertiary{opacity:.68}.features{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px;color:inherit}.feature{display:inline-flex;align-items:center;gap:6px}.meta{opacity:.9}.trailing{opacity:.9;margin-left:8px}.section-header{font-size:.85rem;opacity:.7;padding:8px 12px}.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}.item-card{padding:12px;display:flex;flex-direction:column;min-height:160px;position:relative;cursor:pointer}.item-card:hover{box-shadow:0 10px 24px var(--sicoob-shadow-medium, rgba(0, 0, 0, .12));transform:translateY(-1px);transition:box-shadow .15s ease,transform .15s ease}.card-actions{display:flex;align-items:center;justify-content:flex-end;gap:4px;padding:6px 8px 4px;border-top:1px solid var(--sicoob-stroke-medium, rgba(0, 0, 0, .08));margin-top:auto}.status-overlay{position:absolute;top:10px;right:10px;pointer-events:none}.status-overlay .mat-mdc-chip{pointer-events:auto}.leading-icon.mat-icon{width:36px;height:36px;line-height:36px;font-size:20px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:color-mix(in srgb,var(--sicoob-info-lightest, #f0f9ff),transparent 30%);color:var(--sicoob-info-default, #0090e0)}.mat-mdc-chip{--mdc-chip-container-height: 22px;font-size:12px}.meta .mat-icon{font-size:18px;height:18px;width:18px}.primary,.secondary{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.primary,.secondary{-webkit-line-clamp:1}.features{overflow:hidden}@keyframes shimmer{0%{background-position:-468px 0}to{background-position:468px 0}}.skeleton{animation-duration:1.2s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:shimmer;animation-timing-function:linear;background:#f6f7f8;background:linear-gradient(to right,#eee 8%,#ddd 18%,#eee 33%);background-size:800px 104px;position:relative}.skeleton-avatar{width:32px;height:32px;border-radius:50%}.skeleton-line{height:10px;margin:6px 0;border-radius:6px}.skeleton-chip{width:48px;height:18px;border-radius:999px}.chip-outlined.mat-mdc-chip{background:transparent!important;border:1px solid currentColor}.w-60{width:60%}.w-40{width:40%}.paginator{display:flex;align-items:center;gap:8px;padding:8px 4px}.muted{opacity:.7}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i3.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i3.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i3.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: i3.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "component", type: i3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i14.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PraxisList, decorators: [{
             type: Component,
@@ -3009,7 +3499,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                         MatButtonModule,
                         MatFormFieldModule,
                         MatSelectModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [GenericCrudService, ListDataService], template: "<div\n  class=\"praxis-list-root\"\n  [ngClass]=\"skinClasses\"\n  [attr.aria-label]=\"config.a11y?.ariaLabel || null\"\n  [attr.aria-labelledby]=\"config.a11y?.ariaLabelledBy || null\"\n>\n  @if (inlineCss) {\n    <style [innerHTML]=\"inlineCss\"></style>\n  }\n\n  <!-- Skeleton while loading -->\n  @if ((loading$ | async) && hasSkeleton()) {\n    @if (isListVariant()) {\n      <mat-list>\n        @for (_ of skeletonItems(); track $index; let i = $index) {\n          <mat-list-item>\n            <div class=\"list-item-content\">\n              <div class=\"skeleton skeleton-avatar\"></div>\n              <div style=\"width:100%\">\n                <div class=\"skeleton skeleton-line w-60\"></div>\n                @if (layoutLines > 1) { <div class=\"skeleton skeleton-line w-40\"></div> }\n              </div>\n              <div class=\"skeleton skeleton-chip\"></div>\n            </div>\n          </mat-list-item>\n        }\n      </mat-list>\n    } @else {\n      <div class=\"cards-grid\">\n        @for (_ of skeletonItems(); track $index; let i = $index) {\n          <div class=\"item-card\">\n            <div class=\"list-item-content\">\n              <div class=\"skeleton skeleton-avatar\"></div>\n              <div style=\"width:100%\">\n                <div class=\"skeleton skeleton-line w-60\"></div>\n                @if (layoutLines > 1) { <div class=\"skeleton skeleton-line w-40\"></div> }\n              </div>\n              <div class=\"skeleton skeleton-chip\"></div>\n            </div>\n          </div>\n        }\n      </div>\n    }\n  } @else {\n    <ng-container *ngTemplateOutlet=\"notLoading\"></ng-container>\n  }\n\n  <ng-template #notLoading>\n    <!-- Empty state -->\n    @if (items$ | async; as all) {\n      @if (all.length === 0) {\n        <div class=\"section-header\">\n          {{ (config.templating?.emptyState?.expr || 'Nenhum item dispon\u00EDvel') }}\n        </div>\n      }\n    }\n\n  <!-- List variant -->\n  @if (isListVariant()) {\n    <!-- Selection list -->\n    @if (isSelectionEnabled()) {\n      <mat-selection-list\n        [multiple]=\"config.selection?.mode === 'multiple'\"\n        [formControl]=\"boundControl\"\n        (selectionChange)=\"onSelectionChange($event)\"\n      >\n      @for (section of sections$ | async; track trackBySection($index, section)) {\n        @if (section.key) {\n          <div class=\"section-header mat-subheader\">\n            {{ sectionHeader(section.key) }}\n          </div>\n        }\n        @for (item of section.items; track trackByItem($index, item); let i = $index) {\n        <mat-list-option\n          [value]=\"item\"\n          (click)=\"onItemClick(item, i, section.key || undefined)\"\n        >\n          <div class=\"list-item-content\">\n            @if (leading(item); as lead) {\n              @switch (lead.type) {\n                @case ('icon') {\n                  <mat-icon [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">{{ lead.value }}</mat-icon>\n                }\n                @case ('image') {\n                  <div class=\"lead-image\" [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">\n                    <img [src]=\"lead.value\" [alt]=\"config.templating?.leading?.imageAlt || ''\" />\n                    @if (lead.badge?.value) {\n                      <mat-chip class=\"lead-badge\" [color]=\"lead.badge?.color || undefined\" [ngClass]=\"(((lead.badge?.variant || 'filled') === 'outlined') ? 'chip-outlined' : '')\">{{ lead.badge?.value }}</mat-chip>\n                    }\n                  </div>\n                }\n              }\n            }\n            @if (meta(item); as m) {\n            <div>\n              <div class=\"primary\" [ngClass]=\"primary(item)?.class\" [style.cssText]=\"primary(item)?.style\">{{ primary(item)?.value }}</div>\n              @if (layoutLines > 1) { <div class=\"secondary\" [ngClass]=\"secondary(item)?.class\" [style.cssText]=\"secondary(item)?.style\">{{ secondary(item)?.value }}</div> }\n              @if ((config.templating?.metaPlacement === 'line' && (m?.type === 'text' || m?.type === 'date')) || (layoutLines > 2 && (m?.type === 'text' || m?.type === 'date'))) {\n                <div class=\"tertiary\" [ngClass]=\"m.class\" [style.cssText]=\"m.style\">\n                  @if (config.templating?.metaPrefixIcon; as mpi) { <mat-icon [praxisIcon]=\"mpi\"></mat-icon> }\n                  {{ m.value }}\n                </div>\n              }\n              @if (featuresVisible()) {\n                @for (f of (config.templating?.features || []); track $index; let fi = $index) {\n                  <span class=\"feature\">\n                    @if (f.icon && featuresMode() !== 'labels-only') { <mat-icon [praxisIcon]=\"f.icon\"></mat-icon> }\n                    @if (featuresMode() !== 'icons-only') { <span [ngClass]=\"f.class\" [style.cssText]=\"f.style\">{{ featureLabel(item, f.expr) }}</span> }\n                  </span>\n                }\n              }\n            </div>\n            @if (!(((config.templating?.metaPlacement === 'line') || (layoutLines > 2)) && (m?.type === 'text' || m?.type === 'date'))) {\n              <div class=\"meta\" [ngClass]=\"m.class\" [style.cssText]=\"m.style\">\n                @switch (m.type) {\n                  @case ('chip') { <mat-chip [color]=\"m.color || undefined\" [ngClass]=\"((m.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\">{{ m.value }}</mat-chip> }\n                  @case ('rating') { @for (_ of [0,1,2,3,4]; track $index; let idx = $index) { <mat-icon [praxisIcon]=\"starIcon(idx, m.value)\"></mat-icon> } }\n                  @default { <span>@if (config.templating?.metaPrefixIcon; as mpi2) { <mat-icon>{{ mpi2 }}</mat-icon> }{{ m.value }}</span> }\n                }\n              </div>\n            }\n            @if (trailing(item); as tr) {\n              <div class=\"trailing\" [ngClass]=\"tr.class\" [style.cssText]=\"tr.style\">\n                @switch (tr.type) {\n                  @case ('chip') { <mat-chip [color]=\"tr.color || undefined\" [ngClass]=\"((tr.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\">{{ tr.value }}</mat-chip> }\n                  @case ('icon') { <mat-icon [praxisIcon]=\"tr.value\" [color]=\"tr.color || undefined\"></mat-icon> }\n                  @default { <span>{{ tr.value }}</span> }\n                }\n              </div>\n            }\n            }\n            @for (action of visibleActions(item); let aidx = $index; track action?.id ?? $index) {\n              @if ((action.kind || 'icon') === 'icon') {\n                <button mat-icon-button [color]=\"action.color || undefined\" (click)=\"onActionClick($event, action.id, item, i)\" [attr.aria-label]=\"action.label || action.id\">\n                  <mat-icon [praxisIcon]=\"action.icon\"></mat-icon>\n                </button>\n              } @else {\n                @if (action.buttonVariant === 'stroked') { <button mat-stroked-button [color]=\"action.color || undefined\" (click)=\"onActionClick($event, action.id, item, i)\" [attr.aria-label]=\"action.label || action.id\">{{ action.label || action.id }}</button> }\n                @if (action.buttonVariant === 'raised') { <button mat-raised-button [color]=\"action.color || undefined\" (click)=\"onActionClick($event, action.id, item, i)\" [attr.aria-label]=\"action.label || action.id\">{{ action.label || action.id }}</button> }\n                @if (!action.buttonVariant || action.buttonVariant === 'flat') { <button mat-flat-button [color]=\"action.color || undefined\" (click)=\"onActionClick($event, action.id, item, i)\" [attr.aria-label]=\"action.label || action.id\">{{ action.label || action.id }}</button> }\n              }\n            }\n          </div>\n        </mat-list-option>\n        }\n      }\n      </mat-selection-list>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"readList\"></ng-container>\n    }\n\n    <!-- Read-only list -->\n    <ng-template #readList>\n      <mat-list>\n        @for (section of sections$ | async; track trackBySection($index, section); let sidx = $index) {\n          @if (section.key) {\n            <div class=\"section-header mat-subheader\">\n              {{ sectionHeader(section.key) }}\n            </div>\n          }\n          @for (item of section.items; track trackByItem($index, item); let i = $index) {\n            <mat-list-item (click)=\"onItemClick(item, i, section.key || undefined)\">\n              <div class=\"list-item-content\">\n                @if (leading(item); as lead) { <mat-icon [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">{{ lead.value }}</mat-icon> }\n                @if (meta(item); as m) {\n                <div>\n                  <div class=\"primary\" [ngClass]=\"primary(item)?.class\" [style.cssText]=\"primary(item)?.style\">{{ primary(item)?.value }}</div>\n                  @if (layoutLines > 1) { <div class=\"secondary\" [ngClass]=\"secondary(item)?.class\" [style.cssText]=\"secondary(item)?.style\">{{ secondary(item)?.value }}</div> }\n                  @if ((config.templating?.metaPlacement === 'line' && (m?.type === 'text' || m?.type === 'date')) || (layoutLines > 2 && (m?.type === 'text' || m?.type === 'date'))) { <div class=\"tertiary\" [ngClass]=\"m.class\" [style.cssText]=\"m.style\">{{ m.value }}</div> }\n                </div>\n                @if (!(((config.templating?.metaPlacement === 'line') || (layoutLines > 2)) && (m?.type === 'text' || m?.type === 'date'))) {\n                  <div class=\"meta\" [ngClass]=\"m.class\" [style.cssText]=\"m.style\">\n                    @switch (m.type) {\n                      @case ('chip') { <mat-chip>{{ m.value }}</mat-chip> }\n                      @case ('rating') { @for (_ of [0,1,2,3,4]; track $index; let idx = $index) { <mat-icon>{{ starIcon(idx, m.value) }}</mat-icon> } }\n                      @default { <span>{{ m.value }}</span> }\n                    }\n                  </div>\n                }\n                @if (trailing(item); as tr) {\n                  <div class=\"trailing\" [ngClass]=\"tr.class\" [style.cssText]=\"tr.style\">\n                    @switch (tr.type) {\n                      @case ('chip') { <mat-chip>{{ tr.value }}</mat-chip> }\n                      @case ('icon') { <mat-icon [praxisIcon]=\"tr.value\" [color]=\"tr.color || undefined\"></mat-icon> }\n                      @default { <span>{{ tr.value }}</span> }\n                    }\n                  </div>\n                }\n                }\n                @for (action of visibleActions(item); let aidx = $index; track action?.id ?? $index) {\n                  <button mat-icon-button [color]=\"action.color || undefined\" (click)=\"onActionClick($event, action.id, item, i)\" [attr.aria-label]=\"action.label || action.id\">\n                    <mat-icon>{{ action.icon }}</mat-icon>\n                  </button>\n                }\n              </div>\n            </mat-list-item>\n          }\n          @if (config.layout?.dividers === 'between') { <mat-divider></mat-divider> }\n        }\n      </mat-list>\n    </ng-template>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"cardsVariant\"></ng-container>\n  }\n\n  <!-- Cards variant -->\n  <ng-template #cardsVariant>\n    <div class=\"cards-grid\">\n      @for (it of (items$ | async) ?? []; track $index; let i = $index) {\n        <div class=\"item-card\" (click)=\"onItemClick(it, i)\">\n          <div class=\"list-item-content\">\n            @if (leading(it); as lead) {\n              @switch (lead.type) {\n                @case ('icon') { <mat-icon [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">{{ lead.value }}</mat-icon> }\n                @case ('image') {\n                  <div class=\"lead-image\" [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">\n                    <img [src]=\"lead.value\" [alt]=\"config.templating?.leading?.imageAlt || ''\" />\n                    @if (lead.badge?.value) { <mat-chip class=\"lead-badge\" [color]=\"lead.badge?.color || undefined\" [ngClass]=\"(((lead.badge?.variant || 'filled') === 'outlined') ? 'chip-outlined' : '')\">{{ lead.badge?.value }}</mat-chip> }\n                  </div>\n                }\n              }\n            }\n            @if (meta(it); as m) {\n            <div>\n              <div class=\"primary\" [ngClass]=\"primary(it)?.class\" [style.cssText]=\"primary(it)?.style\">{{ primary(it)?.value }}</div>\n              @if (layoutLines > 1) { <div class=\"secondary\" [ngClass]=\"secondary(it)?.class\" [style.cssText]=\"secondary(it)?.style\">{{ secondary(it)?.value }}</div> }\n              @if ((config.templating?.metaPlacement === 'line' && (m?.type === 'text' || m?.type === 'date')) || (layoutLines > 2 && (m?.type === 'text' || m?.type === 'date'))) { <div class=\"tertiary\" [ngClass]=\"m.class\" [style.cssText]=\"m.style\">{{ m.value }}</div> }\n              @if (featuresVisible()) {\n                @for (f of (config.templating?.features || []); track $index; let fi = $index) {\n                  <span class=\"feature\">\n                    @if (f.icon && featuresMode() !== 'labels-only') { <mat-icon>{{ f.icon }}</mat-icon> }\n                    @if (featuresMode() !== 'icons-only') { <span [ngClass]=\"f.class\" [style.cssText]=\"f.style\">{{ featureLabel(it, f.expr) }}</span> }\n                  </span>\n                }\n              }\n            </div>\n            @if (!(((config.templating?.metaPlacement === 'line') || (layoutLines > 2)) && (m?.type === 'text' || m?.type === 'date'))) {\n              <div class=\"meta\" [ngClass]=\"m.class\" [style.cssText]=\"m.style\">\n                @switch (m.type) {\n                  @case ('chip') { <mat-chip [color]=\"m.color || undefined\" [ngClass]=\"((m.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\">{{ m.value }}</mat-chip> }\n                  @case ('rating') { @for (_ of [0,1,2,3,4]; track $index; let idx = $index) { <mat-icon>{{ starIcon(idx, m.value) }}</mat-icon> } }\n                  @default { <span>{{ m.value }}</span> }\n                }\n              </div>\n            }\n            @if (trailing(it); as tr) {\n              @if ((config.templating?.statusPosition || 'inline') === 'top-right' && (tr?.type === 'chip' || tr?.type === 'icon')) {\n                <div class=\"status-overlay\">\n                  @if (tr?.type === 'chip') { <mat-chip [color]=\"tr.color || undefined\" [ngClass]=\"((tr.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\">{{ tr.value }}</mat-chip> }\n                  @if (tr?.type === 'icon') { <mat-icon [praxisIcon]=\"tr.value\" [color]=\"tr.color || undefined\"></mat-icon> }\n                </div>\n              } @else {\n                <div class=\"trailing\" [ngClass]=\"tr.class\" [style.cssText]=\"tr.style\">\n                  @switch (tr.type) {\n                    @case ('chip') { <mat-chip [color]=\"tr.color || undefined\" [ngClass]=\"((tr.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\">{{ tr.value }}</mat-chip> }\n                    @case ('icon') { <mat-icon [praxisIcon]=\"tr.value\" [color]=\"tr.color || undefined\"></mat-icon> }\n                    @default { <span>{{ tr.value }}</span> }\n                  }\n                </div>\n              }\n            }\n            }\n          </div>\n          <div class=\"card-actions\" (click)=\"$event.stopPropagation()\">\n            @for (action of visibleActions(it); let aidx = $index; track action?.id ?? $index) {\n              @if ((action.kind || 'icon') === 'icon') {\n                <button mat-icon-button [color]=\"action.color || undefined\" (click)=\"onActionClick($event, action.id, it, i)\" [attr.aria-label]=\"action.label || action.id\">\n                  <mat-icon>{{ action.icon }}</mat-icon>\n                </button>\n              } @else {\n                @if (action.buttonVariant === 'stroked') { <button mat-stroked-button [color]=\"action.color || undefined\" (click)=\"onActionClick($event, action.id, it, i)\" [attr.aria-label]=\"action.label || action.id\">{{ action.label || action.id }}</button> }\n                @if (action.buttonVariant === 'raised') { <button mat-raised-button [color]=\"action.color || undefined\" (click)=\"onActionClick($event, action.id, it, i)\" [attr.aria-label]=\"action.label || action.id\">{{ action.label || action.id }}</button> }\n                @if (!action.buttonVariant || action.buttonVariant === 'flat') { <button mat-flat-button [color]=\"action.color || undefined\" (click)=\"onActionClick($event, action.id, it, i)\" [attr.aria-label]=\"action.label || action.id\">{{ action.label || action.id }}</button> }\n              }\n            }\n          </div>\n        </div>\n      }\n    </div>\n  </ng-template>\n  \n  <!-- Simple pagination controls for remote data -->\n  @if (config.dataSource?.resourcePath) {\n    <div class=\"paginator\">\n      <button mat-stroked-button color=\"primary\" (click)=\"prevPage()\">Anterior</button>\n      <button mat-stroked-button color=\"primary\" (click)=\"nextPage()\">Pr\u00F3ximo</button>\n      <mat-form-field style=\"width: 120px; margin-left: 8px;\" appearance=\"outline\">\n        <mat-label>Tam. p\u00E1gina</mat-label>\n        <mat-select (selectionChange)=\"setPageSize($event.value)\" [value]=\"config.layout?.pageSize || 10\">\n          <mat-option [value]=\"6\">6</mat-option>\n          <mat-option [value]=\"8\">8</mat-option>\n          <mat-option [value]=\"12\">12</mat-option>\n          <mat-option [value]=\"24\">24</mat-option>\n        </mat-select>\n      </mat-form-field>\n      @if (total$ | async; as total) { <span class=\"muted\">Total: {{ total }}</span> }\n    </div>\n  }\n  </ng-template>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.praxis-list-root{--p-list-radius: 1rem;--p-list-shadow: 0 6px 20px rgba(0, 0, 0, .08);--p-list-border: 1px solid rgba(0, 0, 0, .08);--p-list-blur: 8px;--p-list-grad-from: #8e72ff;--p-list-grad-to: #ffaa70;--p-list-grad-angle: 135deg}.skin-elevated .item-card{background:var(--mdc-elevated-card-container-color, var(--md-sys-color-surface));border-radius:var(--p-list-radius);box-shadow:var(--p-list-shadow);border:var(--p-list-border)}.skin-pill-soft .item-card{background:var(--mdc-elevated-card-container-color, var(--md-sys-color-surface));border-radius:calc(var(--p-list-radius) * 1.3);box-shadow:0 4px 16px #00000014;border:var(--p-list-border)}.skin-pill-soft .mat-mdc-list-item .list-item-content{background:var(--mdc-elevated-card-container-color, var(--md-sys-color-surface));border-radius:calc(var(--p-list-radius) * 1.3);box-shadow:0 4px 16px #00000014;border:var(--p-list-border);color:var(--p-list-foreground, #1f2937)}.skin-gradient-tile .item-card,.skin-gradient-tile .mat-mdc-list-item .list-item-content{background:linear-gradient(var(--p-list-grad-angle),var(--p-list-grad-from),var(--p-list-grad-to));border-radius:var(--p-list-radius);color:#fff}.skin-glass .item-card{background:#ffffff2e;border-radius:var(--p-list-radius);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(var(--p-list-blur));-webkit-backdrop-filter:blur(var(--p-list-blur))}.skin-glass .mat-mdc-list-item .list-item-content{background:#ffffff2e;border-radius:var(--p-list-radius);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(var(--p-list-blur));-webkit-backdrop-filter:blur(var(--p-list-blur));color:var(--p-list-foreground, #111)}.density-compact .mat-mdc-list-item,.density-compact .item-card{--_item-padding: 4px 8px}.density-comfortable .mat-mdc-list-item,.density-comfortable .item-card{--_item-padding: 8px 12px}.list-item-content{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:var(--_item-padding, 12px 16px)}.lead-image{position:relative;width:96px;height:72px;border-radius:12px;overflow:hidden}.lead-image img{width:100%;height:100%;object-fit:cover;display:block}.lead-image .lead-badge{position:absolute;left:8px;bottom:8px}.model-media .lead-image{width:136px;height:96px;border-radius:16px}.model-media .list-item-content{gap:16px}.model-hotel .lead-image{width:160px;height:110px;border-radius:18px}.primary{font-weight:600;color:var(--sicoob-tertiary-default, #001E24)}.secondary{opacity:.8}.tertiary{opacity:.68}.features{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px;color:inherit}.feature{display:inline-flex;align-items:center;gap:6px}.meta{opacity:.9}.trailing{opacity:.9;margin-left:8px}.section-header{font-size:.85rem;opacity:.7;padding:8px 12px}.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}.item-card{padding:12px;display:flex;flex-direction:column;min-height:160px;position:relative;cursor:pointer}.item-card:hover{box-shadow:0 10px 24px var(--sicoob-shadow-medium, rgba(0, 0, 0, .12));transform:translateY(-1px);transition:box-shadow .15s ease,transform .15s ease}.card-actions{display:flex;align-items:center;justify-content:flex-end;gap:4px;padding:6px 8px 4px;border-top:1px solid var(--sicoob-stroke-medium, rgba(0, 0, 0, .08));margin-top:auto}.status-overlay{position:absolute;top:10px;right:10px;pointer-events:none}.status-overlay .mat-mdc-chip{pointer-events:auto}.leading-icon.mat-icon{width:36px;height:36px;line-height:36px;font-size:20px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:color-mix(in srgb,var(--sicoob-info-lightest, #f0f9ff),transparent 30%);color:var(--sicoob-info-default, #0090e0)}.mat-mdc-chip{--mdc-chip-container-height: 22px;font-size:12px}.meta .mat-icon{font-size:18px;height:18px;width:18px}.primary,.secondary{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.primary,.secondary{-webkit-line-clamp:1}.features{overflow:hidden}@keyframes shimmer{0%{background-position:-468px 0}to{background-position:468px 0}}.skeleton{animation-duration:1.2s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:shimmer;animation-timing-function:linear;background:#f6f7f8;background:linear-gradient(to right,#eee 8%,#ddd 18%,#eee 33%);background-size:800px 104px;position:relative}.skeleton-avatar{width:32px;height:32px;border-radius:50%}.skeleton-line{height:10px;margin:6px 0;border-radius:6px}.skeleton-chip{width:48px;height:18px;border-radius:999px}.chip-outlined.mat-mdc-chip{background:transparent!important;border:1px solid currentColor}.w-60{width:60%}.w-40{width:40%}.paginator{display:flex;align-items:center;gap:8px;padding:8px 4px}.muted{opacity:.7}\n"] }]
+                        MatInputModule,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [GenericCrudService, ListDataService], template: "<div\n  class=\"praxis-list-root\"\n  [ngClass]=\"skinClasses\"\n  [attr.aria-label]=\"config.a11y?.ariaLabel || null\"\n  [attr.aria-labelledby]=\"config.a11y?.ariaLabelledBy || null\"\n>\n  @if (inlineCss) {\n    <style [innerHTML]=\"inlineCss\"></style>\n  }\n\n  <!-- Skeleton while loading -->\n  @if ((loading$ | async) && hasSkeleton()) {\n    @if (isListVariant()) {\n      <mat-list>\n        @for (_ of skeletonItems(); track $index; let i = $index) {\n          <mat-list-item>\n            <div class=\"list-item-content\">\n              <div class=\"skeleton skeleton-avatar\"></div>\n              <div style=\"width:100%\">\n                <div class=\"skeleton skeleton-line w-60\"></div>\n                @if (layoutLines > 1) { <div class=\"skeleton skeleton-line w-40\"></div> }\n              </div>\n              <div class=\"skeleton skeleton-chip\"></div>\n            </div>\n          </mat-list-item>\n        }\n      </mat-list>\n    } @else {\n      <div class=\"cards-grid\">\n        @for (_ of skeletonItems(); track $index; let i = $index) {\n          <div class=\"item-card\">\n            <div class=\"list-item-content\">\n              <div class=\"skeleton skeleton-avatar\"></div>\n              <div style=\"width:100%\">\n                <div class=\"skeleton skeleton-line w-60\"></div>\n                @if (layoutLines > 1) { <div class=\"skeleton skeleton-line w-40\"></div> }\n              </div>\n              <div class=\"skeleton skeleton-chip\"></div>\n            </div>\n          </div>\n        }\n      </div>\n    }\n  } @else {\n    <ng-container *ngTemplateOutlet=\"notLoading\"></ng-container>\n  }\n\n  <ng-template #notLoading>\n    <!-- Empty state -->\n    @if (items$ | async; as all) {\n      @if (all.length === 0) {\n        <div class=\"section-header\">\n          {{ (config.templating?.emptyState?.expr || 'Nenhum item dispon\u00EDvel') }}\n        </div>\n      }\n    }\n\n  <!-- List variant -->\n  @if (isListVariant()) {\n    <!-- Selection list -->\n    @if (isSelectionEnabled()) {\n      <mat-selection-list\n        [multiple]=\"config.selection?.mode === 'multiple'\"\n        [formControl]=\"boundControl\"\n        (selectionChange)=\"onSelectionChange($event)\"\n      >\n      @for (section of sections$ | async; track trackBySection($index, section)) {\n        @if (section.key) {\n          <div class=\"section-header mat-subheader\">\n            {{ sectionHeader(section.key) }}\n          </div>\n        }\n        @for (item of section.items; track trackByItem($index, item); let i = $index) {\n        <mat-list-option\n          [value]=\"item\"\n          (click)=\"onItemClick(item, i, section.key || undefined)\"\n        >\n          <div class=\"list-item-content\">\n            @if (leading(item); as lead) {\n              @switch (lead.type) {\n                @case ('icon') {\n                  <mat-icon [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">{{ lead.value }}</mat-icon>\n                }\n                @case ('image') {\n                  <div class=\"lead-image\" [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">\n                    <img [src]=\"lead.value\" [alt]=\"config.templating?.leading?.imageAlt || ''\" />\n                    @if (lead.badge?.value) {\n                      <mat-chip class=\"lead-badge\" [color]=\"lead.badge?.color || undefined\" [ngClass]=\"(((lead.badge?.variant || 'filled') === 'outlined') ? 'chip-outlined' : '')\">{{ lead.badge?.value }}</mat-chip>\n                    }\n                  </div>\n                }\n              }\n            }\n            @if (meta(item); as m) {\n            <div>\n              <div class=\"primary\" [ngClass]=\"primary(item)?.class\" [style.cssText]=\"primary(item)?.style\">{{ primary(item)?.value }}</div>\n              @if (layoutLines > 1) { <div class=\"secondary\" [ngClass]=\"secondary(item)?.class\" [style.cssText]=\"secondary(item)?.style\">{{ secondary(item)?.value }}</div> }\n              @if ((config.templating?.metaPlacement === 'line' && (m?.type === 'text' || m?.type === 'date')) || (layoutLines > 2 && (m?.type === 'text' || m?.type === 'date'))) {\n                <div class=\"tertiary\" [ngClass]=\"m.class\" [style.cssText]=\"m.style\">\n                  @if (config.templating?.metaPrefixIcon; as mpi) { <mat-icon [praxisIcon]=\"mpi\"></mat-icon> }\n                  {{ m.value }}\n                </div>\n              }\n              @if (featuresVisible()) {\n                @for (f of (config.templating?.features || []); track $index; let fi = $index) {\n                  <span class=\"feature\">\n                    @if (f.icon && featuresMode() !== 'labels-only') { <mat-icon [praxisIcon]=\"f.icon\"></mat-icon> }\n                    @if (featuresMode() !== 'icons-only') { <span [ngClass]=\"f.class\" [style.cssText]=\"f.style\">{{ featureLabel(item, f.expr) }}</span> }\n                  </span>\n                }\n              }\n            </div>\n            @if (!(((config.templating?.metaPlacement === 'line') || (layoutLines > 2)) && (m?.type === 'text' || m?.type === 'date'))) {\n              <div class=\"meta\" [ngClass]=\"m.class\" [style.cssText]=\"m.style\">\n                @switch (m.type) {\n                  @case ('chip') { <mat-chip [color]=\"m.color || undefined\" [ngClass]=\"((m.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\">{{ m.value }}</mat-chip> }\n                  @case ('rating') { @for (_ of [0,1,2,3,4]; track $index; let idx = $index) { <mat-icon [praxisIcon]=\"starIcon(idx, m.value)\"></mat-icon> } }\n                  @default { <span>@if (config.templating?.metaPrefixIcon; as mpi2) { <mat-icon>{{ mpi2 }}</mat-icon> }{{ m.value }}</span> }\n                }\n              </div>\n            }\n            @if (trailing(item); as tr) {\n              <div class=\"trailing\" [ngClass]=\"tr.class\" [style.cssText]=\"tr.style\">\n                @switch (tr.type) {\n                  @case ('chip') { <mat-chip [color]=\"tr.color || undefined\" [ngClass]=\"((tr.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\">{{ tr.value }}</mat-chip> }\n                  @case ('icon') { <mat-icon [praxisIcon]=\"tr.value\" [color]=\"tr.color || undefined\"></mat-icon> }\n                  @default { <span>{{ tr.value }}</span> }\n                }\n              </div>\n            }\n            }\n            @for (action of visibleActions(item); let aidx = $index; track action?.id ?? $index) {\n              @if ((action.kind || 'icon') === 'icon') {\n                <button mat-icon-button [color]=\"action.color || undefined\" (click)=\"onActionClick($event, action.id, item, i)\" [attr.aria-label]=\"action.label || action.id\">\n                  <mat-icon [praxisIcon]=\"action.icon\"></mat-icon>\n                </button>\n              } @else {\n                @if (action.buttonVariant === 'stroked') { <button mat-stroked-button [color]=\"action.color || undefined\" (click)=\"onActionClick($event, action.id, item, i)\" [attr.aria-label]=\"action.label || action.id\">{{ action.label || action.id }}</button> }\n                @if (action.buttonVariant === 'raised') { <button mat-raised-button [color]=\"action.color || undefined\" (click)=\"onActionClick($event, action.id, item, i)\" [attr.aria-label]=\"action.label || action.id\">{{ action.label || action.id }}</button> }\n                @if (!action.buttonVariant || action.buttonVariant === 'flat') { <button mat-flat-button [color]=\"action.color || undefined\" (click)=\"onActionClick($event, action.id, item, i)\" [attr.aria-label]=\"action.label || action.id\">{{ action.label || action.id }}</button> }\n              }\n            }\n          </div>\n        </mat-list-option>\n        }\n      }\n      </mat-selection-list>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"readList\"></ng-container>\n    }\n\n    <!-- Read-only list -->\n    <ng-template #readList>\n      <mat-list>\n        @for (section of sections$ | async; track trackBySection($index, section); let sidx = $index) {\n          @if (section.key) {\n            <div class=\"section-header mat-subheader\">\n              {{ sectionHeader(section.key) }}\n            </div>\n          }\n          @for (item of section.items; track trackByItem($index, item); let i = $index) {\n            <mat-list-item (click)=\"onItemClick(item, i, section.key || undefined)\">\n              <div class=\"list-item-content\">\n                @if (leading(item); as lead) { <mat-icon [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">{{ lead.value }}</mat-icon> }\n                @if (meta(item); as m) {\n                <div>\n                  <div class=\"primary\" [ngClass]=\"primary(item)?.class\" [style.cssText]=\"primary(item)?.style\">{{ primary(item)?.value }}</div>\n                  @if (layoutLines > 1) { <div class=\"secondary\" [ngClass]=\"secondary(item)?.class\" [style.cssText]=\"secondary(item)?.style\">{{ secondary(item)?.value }}</div> }\n                  @if ((config.templating?.metaPlacement === 'line' && (m?.type === 'text' || m?.type === 'date')) || (layoutLines > 2 && (m?.type === 'text' || m?.type === 'date'))) { <div class=\"tertiary\" [ngClass]=\"m.class\" [style.cssText]=\"m.style\">{{ m.value }}</div> }\n                </div>\n                @if (!(((config.templating?.metaPlacement === 'line') || (layoutLines > 2)) && (m?.type === 'text' || m?.type === 'date'))) {\n                  <div class=\"meta\" [ngClass]=\"m.class\" [style.cssText]=\"m.style\">\n                    @switch (m.type) {\n                      @case ('chip') { <mat-chip>{{ m.value }}</mat-chip> }\n                      @case ('rating') { @for (_ of [0,1,2,3,4]; track $index; let idx = $index) { <mat-icon>{{ starIcon(idx, m.value) }}</mat-icon> } }\n                      @default { <span>{{ m.value }}</span> }\n                    }\n                  </div>\n                }\n                @if (trailing(item); as tr) {\n                  <div class=\"trailing\" [ngClass]=\"tr.class\" [style.cssText]=\"tr.style\">\n                    @switch (tr.type) {\n                      @case ('chip') { <mat-chip>{{ tr.value }}</mat-chip> }\n                      @case ('icon') { <mat-icon [praxisIcon]=\"tr.value\" [color]=\"tr.color || undefined\"></mat-icon> }\n                      @default { <span>{{ tr.value }}</span> }\n                    }\n                  </div>\n                }\n                }\n                @for (action of visibleActions(item); let aidx = $index; track action?.id ?? $index) {\n                  <button mat-icon-button [color]=\"action.color || undefined\" (click)=\"onActionClick($event, action.id, item, i)\" [attr.aria-label]=\"action.label || action.id\">\n                    <mat-icon>{{ action.icon }}</mat-icon>\n                  </button>\n                }\n              </div>\n            </mat-list-item>\n          }\n          @if (config.layout?.dividers === 'between') { <mat-divider></mat-divider> }\n        }\n      </mat-list>\n    </ng-template>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"cardsVariant\"></ng-container>\n  }\n\n  <!-- Cards variant -->\n  <ng-template #cardsVariant>\n    <div class=\"cards-grid\">\n      @for (it of (items$ | async) ?? []; track $index; let i = $index) {\n        <div class=\"item-card\" (click)=\"onItemClick(it, i)\">\n          <div class=\"list-item-content\">\n            @if (leading(it); as lead) {\n              @switch (lead.type) {\n                @case ('icon') { <mat-icon [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">{{ lead.value }}</mat-icon> }\n                @case ('image') {\n                  <div class=\"lead-image\" [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">\n                    <img [src]=\"lead.value\" [alt]=\"config.templating?.leading?.imageAlt || ''\" />\n                    @if (lead.badge?.value) { <mat-chip class=\"lead-badge\" [color]=\"lead.badge?.color || undefined\" [ngClass]=\"(((lead.badge?.variant || 'filled') === 'outlined') ? 'chip-outlined' : '')\">{{ lead.badge?.value }}</mat-chip> }\n                  </div>\n                }\n              }\n            }\n            @if (meta(it); as m) {\n            <div>\n              <div class=\"primary\" [ngClass]=\"primary(it)?.class\" [style.cssText]=\"primary(it)?.style\">{{ primary(it)?.value }}</div>\n              @if (layoutLines > 1) { <div class=\"secondary\" [ngClass]=\"secondary(it)?.class\" [style.cssText]=\"secondary(it)?.style\">{{ secondary(it)?.value }}</div> }\n              @if ((config.templating?.metaPlacement === 'line' && (m?.type === 'text' || m?.type === 'date')) || (layoutLines > 2 && (m?.type === 'text' || m?.type === 'date'))) { <div class=\"tertiary\" [ngClass]=\"m.class\" [style.cssText]=\"m.style\">{{ m.value }}</div> }\n              @if (featuresVisible()) {\n                @for (f of (config.templating?.features || []); track $index; let fi = $index) {\n                  <span class=\"feature\">\n                    @if (f.icon && featuresMode() !== 'labels-only') { <mat-icon>{{ f.icon }}</mat-icon> }\n                    @if (featuresMode() !== 'icons-only') { <span [ngClass]=\"f.class\" [style.cssText]=\"f.style\">{{ featureLabel(it, f.expr) }}</span> }\n                  </span>\n                }\n              }\n            </div>\n            @if (!(((config.templating?.metaPlacement === 'line') || (layoutLines > 2)) && (m?.type === 'text' || m?.type === 'date'))) {\n              <div class=\"meta\" [ngClass]=\"m.class\" [style.cssText]=\"m.style\">\n                @switch (m.type) {\n                  @case ('chip') { <mat-chip [color]=\"m.color || undefined\" [ngClass]=\"((m.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\">{{ m.value }}</mat-chip> }\n                  @case ('rating') { @for (_ of [0,1,2,3,4]; track $index; let idx = $index) { <mat-icon>{{ starIcon(idx, m.value) }}</mat-icon> } }\n                  @default { <span>{{ m.value }}</span> }\n                }\n              </div>\n            }\n            @if (trailing(it); as tr) {\n              @if ((config.templating?.statusPosition || 'inline') === 'top-right' && (tr?.type === 'chip' || tr?.type === 'icon')) {\n                <div class=\"status-overlay\">\n                  @if (tr?.type === 'chip') { <mat-chip [color]=\"tr.color || undefined\" [ngClass]=\"((tr.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\">{{ tr.value }}</mat-chip> }\n                  @if (tr?.type === 'icon') { <mat-icon [praxisIcon]=\"tr.value\" [color]=\"tr.color || undefined\"></mat-icon> }\n                </div>\n              } @else {\n                <div class=\"trailing\" [ngClass]=\"tr.class\" [style.cssText]=\"tr.style\">\n                  @switch (tr.type) {\n                    @case ('chip') { <mat-chip [color]=\"tr.color || undefined\" [ngClass]=\"((tr.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\">{{ tr.value }}</mat-chip> }\n                    @case ('icon') { <mat-icon [praxisIcon]=\"tr.value\" [color]=\"tr.color || undefined\"></mat-icon> }\n                    @default { <span>{{ tr.value }}</span> }\n                  }\n                </div>\n              }\n            }\n            }\n          </div>\n          <div class=\"card-actions\" (click)=\"$event.stopPropagation()\">\n            @for (action of visibleActions(it); let aidx = $index; track action?.id ?? $index) {\n              @if ((action.kind || 'icon') === 'icon') {\n                <button mat-icon-button [color]=\"action.color || undefined\" (click)=\"onActionClick($event, action.id, it, i)\" [attr.aria-label]=\"action.label || action.id\">\n                  <mat-icon>{{ action.icon }}</mat-icon>\n                </button>\n              } @else {\n                @if (action.buttonVariant === 'stroked') { <button mat-stroked-button [color]=\"action.color || undefined\" (click)=\"onActionClick($event, action.id, it, i)\" [attr.aria-label]=\"action.label || action.id\">{{ action.label || action.id }}</button> }\n                @if (action.buttonVariant === 'raised') { <button mat-raised-button [color]=\"action.color || undefined\" (click)=\"onActionClick($event, action.id, it, i)\" [attr.aria-label]=\"action.label || action.id\">{{ action.label || action.id }}</button> }\n                @if (!action.buttonVariant || action.buttonVariant === 'flat') { <button mat-flat-button [color]=\"action.color || undefined\" (click)=\"onActionClick($event, action.id, it, i)\" [attr.aria-label]=\"action.label || action.id\">{{ action.label || action.id }}</button> }\n              }\n            }\n          </div>\n        </div>\n      }\n    </div>\n  </ng-template>\n  \n  <!-- Simple pagination controls for remote data -->\n  @if (config.dataSource?.resourcePath) {\n    <div class=\"paginator\" style=\"flex-wrap: wrap; gap: 8px;\">\n      <div style=\"display:flex; align-items:center; gap:8px; flex-wrap: wrap;\">\n        <button mat-stroked-button color=\"primary\" (click)=\"prevPage()\">Anterior</button>\n        <button mat-stroked-button color=\"primary\" (click)=\"nextPage()\">Pr\u00F3ximo</button>\n        <mat-form-field style=\"width: 120px;\" appearance=\"outline\">\n          <mat-label>Tam. p\u00E1gina</mat-label>\n          <mat-select (selectionChange)=\"setPageSize($event.value)\" [value]=\"config.layout?.pageSize || 10\">\n            <mat-option [value]=\"6\">6</mat-option>\n            <mat-option [value]=\"8\">8</mat-option>\n            <mat-option [value]=\"12\">12</mat-option>\n            <mat-option [value]=\"24\">24</mat-option>\n          </mat-select>\n        </mat-form-field>\n        @if (config.ui?.showSort) {\n        <mat-form-field style=\"width: 180px;\" appearance=\"outline\">\n          <mat-label>Ordenar</mat-label>\n          <mat-select (selectionChange)=\"onSortChange($event.value)\">\n            @for (op of (config.ui?.sortOptions || []); track $index) {\n              <mat-option [value]=\"sortOptionValue(op)\">{{ sortOptionLabel(op) }}</mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        }\n        @if (config.ui?.showSearch && config.ui?.searchField) {\n          <mat-form-field style=\"min-width: 220px;\" appearance=\"outline\">\n            <mat-label>{{ config.ui?.searchPlaceholder || 'Buscar' }}</mat-label>\n            <input matInput type=\"search\" (input)=\"onSearchInput($any($event.target).value)\" />\n          </mat-form-field>\n        }\n      </div>\n      <div style=\"display:flex; align-items:center; gap:8px; margin-left:auto;\">\n        @if ((config.ui?.showRange ?? true)) {\n          @if (page$ | async; as ps) {\n            @if (total$ | async; as total) {\n              @if (items$ | async; as curr) {\n                <span class=\"muted\">{{ rangeStart(ps) }}\u2013{{ rangeEnd(curr?.length || 0, ps, total || 0) }} de {{ total || 0 }}</span>\n              }\n            }\n          }\n        } @else {\n          @if (total$ | async; as total2) { <span class=\"muted\">Total: {{ total2 }}</span> }\n        }\n      </div>\n    </div>\n  }\n  </ng-template>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.praxis-list-root{--p-list-radius: 1rem;--p-list-shadow: 0 6px 20px rgba(0, 0, 0, .08);--p-list-border: 1px solid rgba(0, 0, 0, .08);--p-list-blur: 8px;--p-list-grad-from: #8e72ff;--p-list-grad-to: #ffaa70;--p-list-grad-angle: 135deg}.skin-elevated .item-card{background:var(--mdc-elevated-card-container-color, var(--md-sys-color-surface));border-radius:var(--p-list-radius);box-shadow:var(--p-list-shadow);border:var(--p-list-border)}.skin-pill-soft .item-card{background:var(--mdc-elevated-card-container-color, var(--md-sys-color-surface));border-radius:calc(var(--p-list-radius) * 1.3);box-shadow:0 4px 16px #00000014;border:var(--p-list-border)}.skin-pill-soft .mat-mdc-list-item .list-item-content{background:var(--mdc-elevated-card-container-color, var(--md-sys-color-surface));border-radius:calc(var(--p-list-radius) * 1.3);box-shadow:0 4px 16px #00000014;border:var(--p-list-border);color:var(--p-list-foreground, #1f2937)}.skin-gradient-tile .item-card,.skin-gradient-tile .mat-mdc-list-item .list-item-content{background:linear-gradient(var(--p-list-grad-angle),var(--p-list-grad-from),var(--p-list-grad-to));border-radius:var(--p-list-radius);color:#fff}.skin-glass .item-card{background:#ffffff2e;border-radius:var(--p-list-radius);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(var(--p-list-blur));-webkit-backdrop-filter:blur(var(--p-list-blur))}.skin-glass .mat-mdc-list-item .list-item-content{background:#ffffff2e;border-radius:var(--p-list-radius);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(var(--p-list-blur));-webkit-backdrop-filter:blur(var(--p-list-blur));color:var(--p-list-foreground, #111)}.density-compact .mat-mdc-list-item,.density-compact .item-card{--_item-padding: 4px 8px}.density-comfortable .mat-mdc-list-item,.density-comfortable .item-card{--_item-padding: 8px 12px}.list-item-content{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:var(--_item-padding, 12px 16px)}.lead-image{position:relative;width:96px;height:72px;border-radius:12px;overflow:hidden}.lead-image img{width:100%;height:100%;object-fit:cover;display:block}.lead-image .lead-badge{position:absolute;left:8px;bottom:8px}.model-media .lead-image{width:136px;height:96px;border-radius:16px}.model-media .list-item-content{gap:16px}.model-hotel .lead-image{width:160px;height:110px;border-radius:18px}.primary{font-weight:600;color:var(--sicoob-tertiary-default, #001E24)}.secondary{opacity:.8}.tertiary{opacity:.68}.features{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px;color:inherit}.feature{display:inline-flex;align-items:center;gap:6px}.meta{opacity:.9}.trailing{opacity:.9;margin-left:8px}.section-header{font-size:.85rem;opacity:.7;padding:8px 12px}.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}.item-card{padding:12px;display:flex;flex-direction:column;min-height:160px;position:relative;cursor:pointer}.item-card:hover{box-shadow:0 10px 24px var(--sicoob-shadow-medium, rgba(0, 0, 0, .12));transform:translateY(-1px);transition:box-shadow .15s ease,transform .15s ease}.card-actions{display:flex;align-items:center;justify-content:flex-end;gap:4px;padding:6px 8px 4px;border-top:1px solid var(--sicoob-stroke-medium, rgba(0, 0, 0, .08));margin-top:auto}.status-overlay{position:absolute;top:10px;right:10px;pointer-events:none}.status-overlay .mat-mdc-chip{pointer-events:auto}.leading-icon.mat-icon{width:36px;height:36px;line-height:36px;font-size:20px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:color-mix(in srgb,var(--sicoob-info-lightest, #f0f9ff),transparent 30%);color:var(--sicoob-info-default, #0090e0)}.mat-mdc-chip{--mdc-chip-container-height: 22px;font-size:12px}.meta .mat-icon{font-size:18px;height:18px;width:18px}.primary,.secondary{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.primary,.secondary{-webkit-line-clamp:1}.features{overflow:hidden}@keyframes shimmer{0%{background-position:-468px 0}to{background-position:468px 0}}.skeleton{animation-duration:1.2s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:shimmer;animation-timing-function:linear;background:#f6f7f8;background:linear-gradient(to right,#eee 8%,#ddd 18%,#eee 33%);background-size:800px 104px;position:relative}.skeleton-avatar{width:32px;height:32px;border-radius:50%}.skeleton-line{height:10px;margin:6px 0;border-radius:6px}.skeleton-chip{width:48px;height:18px;border-radius:999px}.chip-outlined.mat-mdc-chip{background:transparent!important;border:1px solid currentColor}.w-60{width:60%}.w-40{width:40%}.paginator{display:flex;align-items:center;gap:8px;padding:8px 4px}.muted{opacity:.7}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], form: [{