@praxisui/list 1.0.0-beta.61 → 1.0.0-beta.63

package/fesm2022/praxisui-list.mjs

@@ -25,10 +25,10 @@ import * as i12 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i2 from '@angular/forms';
 import { FormsModule, FormControl, ReactiveFormsModule, FormGroup } from '@angular/forms';
-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, take, takeUntil } from 'rxjs/operators';
+import { BehaviorSubject, combineLatest, of, Subject, debounceTime, takeUntil, distinctUntilChanged as distinctUntilChanged$1 } from 'rxjs';
+import { auditTime, switchMap, map, catchError, finalize, shareReplay, debounceTime as debounceTime$1, distinctUntilChanged, tap, take, takeUntil as takeUntil$1 } from 'rxjs/operators';
 import { SETTINGS_PANEL_DATA, SettingsPanelService } from '@praxisui/settings-panel';
-import * as i3$2 from '@angular/material/tabs';
+import * as i3$3 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
 import * as i8 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
@@ -41,6 +41,8 @@ import { MatExpansionModule } from '@angular/material/expansion';
 import { PdxColorPickerComponent } from '@praxisui/dynamic-fields';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { produce, setAutoFreeze } from 'immer';
+import * as i3$2 from '@angular/material/card';
+import { MatCardModule } from '@angular/material/card';
 import { BaseAiAdapter, PraxisAiAssistantComponent } from '@praxisui/ai';
 
 /**
@@ -414,7 +416,7 @@ class ListDataService {
     }
     safeSerialize(value) {
         try {
-            return stableSerialize(value);
+            return stableSerialize$1(value);
         }
         catch {
             return String(value);
@@ -442,7 +444,7 @@ class ListDataService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ListDataService, decorators: [{
             type: Injectable
         }] });
-function stableSerialize(value) {
+function stableSerialize$1(value) {
     if (value === null || value === undefined)
         return String(value);
     if (typeof value === 'number' ||
@@ -455,10 +457,10 @@ function stableSerialize(value) {
     if (value instanceof Date)
         return JSON.stringify(value.toISOString());
     if (Array.isArray(value))
-        return `[${value.map((entry) => stableSerialize(entry)).join(',')}]`;
+        return `[${value.map((entry) => stableSerialize$1(entry)).join(',')}]`;
     if (typeof value === 'object') {
         const keys = Object.keys(value).sort();
-        const entries = keys.map((key) => `${JSON.stringify(key)}:${stableSerialize(value[key])}`);
+        const entries = keys.map((key) => `${JSON.stringify(key)}:${stableSerialize$1(value[key])}`);
         return `{${entries.join(',')}}`;
     }
     return JSON.stringify(String(value));
@@ -1162,6 +1164,885 @@ function makeChip(field) {
     return { type: 'chip', expr: '${item.' + field + '}' };
 }
 
+const DOCUMENT_KIND = 'praxis.list.editor';
+const DOCUMENT_VERSION = 1;
+const LAYOUT_VARIANTS = ['list', 'cards', 'tiles'];
+const LAYOUT_DENSITIES = ['default', 'comfortable', 'compact'];
+const LAYOUT_DIVIDERS = ['none', 'between', 'all'];
+const LAYOUT_MODELS = ['standard', 'media', 'hotel'];
+const SELECTION_MODES = ['none', 'single', 'multiple'];
+const SELECTION_RETURNS = ['value', 'item', 'id'];
+const SKIN_TYPES = [
+    'pill-soft',
+    'gradient-tile',
+    'glass',
+    'elevated',
+    'outline',
+    'flat',
+    'neumorphism',
+    'custom',
+];
+const FEATURES_MODES = ['icons+labels', 'icons-only', 'labels-only'];
+function createListAuthoringDocument(source) {
+    return normalizeListAuthoringDocument({
+        kind: DOCUMENT_KIND,
+        version: DOCUMENT_VERSION,
+        config: asListConfig(source?.config),
+    });
+}
+function parseLegacyOrListDocument(raw) {
+    const obj = asRecord(raw);
+    if ('document' in obj) {
+        return parseLegacyOrListDocument(obj.document);
+    }
+    if (obj.kind === DOCUMENT_KIND && obj.version === DOCUMENT_VERSION) {
+        return normalizeListAuthoringDocument({
+            kind: DOCUMENT_KIND,
+            version: DOCUMENT_VERSION,
+            config: asListConfig(obj.config),
+        });
+    }
+    if (looksLikeLegacySettingsPayload(obj)) {
+        return createListAuthoringDocument({ config: obj.config });
+    }
+    return createListAuthoringDocument({ config: raw });
+}
+function normalizeListAuthoringDocument(doc) {
+    return {
+        kind: DOCUMENT_KIND,
+        version: DOCUMENT_VERSION,
+        config: normalizeListConfig(doc?.config),
+    };
+}
+function projectListAuthoringDocument(doc, context) {
+    return inferListAuthoringDocument(normalizeListAuthoringDocument(doc), context);
+}
+function inferListAuthoringDocument(doc, context) {
+    const normalized = normalizeListAuthoringDocument(doc);
+    if (normalized.config.dataSource?.resourcePath &&
+        !normalized.config.templating?.primary &&
+        (context?.schemaFieldNames || []).length) {
+        return normalizeListAuthoringDocument({
+            ...normalized,
+            config: inferTemplatingFromSchema(normalized.config, context?.schemaFieldNames || []),
+        });
+    }
+    return normalized;
+}
+function normalizeListConfig(config) {
+    const normalized = cloneJson(config || {});
+    const out = {
+        ...normalized,
+        dataSource: {
+            data: Array.isArray(normalized.dataSource?.data)
+                ? normalized.dataSource?.data
+                : undefined,
+            resourcePath: trimToUndefined(normalized.dataSource?.resourcePath),
+            query: normalizeQuery(normalized.dataSource?.query),
+            sort: normalizeSort(normalized.dataSource?.sort),
+        },
+        layout: {
+            variant: oneOf(normalized.layout?.variant, LAYOUT_VARIANTS, 'list'),
+            density: oneOf(normalized.layout?.density, LAYOUT_DENSITIES, 'default'),
+            lines: normalizeLines(normalized.layout?.lines),
+            dividers: oneOf(normalized.layout?.dividers, LAYOUT_DIVIDERS, 'between'),
+            model: oneOf(normalized.layout?.model, LAYOUT_MODELS, 'standard'),
+            groupBy: trimToUndefined(normalized.layout?.groupBy),
+            stickySectionHeader: readBoolean(normalized.layout?.stickySectionHeader),
+            virtualScroll: readBoolean(normalized.layout?.virtualScroll),
+            pageSize: normalizePositiveNumber(normalized.layout?.pageSize),
+        },
+        selection: {
+            mode: oneOf(normalized.selection?.mode, SELECTION_MODES, 'none'),
+            formControlName: trimToUndefined(normalized.selection?.formControlName),
+            formControlPath: trimToUndefined(normalized.selection?.formControlPath),
+            compareBy: trimToUndefined(normalized.selection?.compareBy),
+            return: oneOf(normalized.selection?.return, SELECTION_RETURNS, 'value'),
+        },
+        skin: {
+            type: oneOf(normalized.skin?.type, SKIN_TYPES, 'elevated'),
+            gradient: {
+                from: trimToEmpty(normalized.skin?.gradient?.from),
+                to: trimToEmpty(normalized.skin?.gradient?.to),
+                angle: normalizeAngle(normalized.skin?.gradient?.angle),
+            },
+            radius: trimToUndefined(normalized.skin?.radius),
+            shadow: trimToUndefined(normalized.skin?.shadow),
+            border: trimToUndefined(normalized.skin?.border),
+            backdropBlur: trimToUndefined(normalized.skin?.backdropBlur),
+            class: trimToUndefined(normalized.skin?.class),
+            inlineStyle: trimToUndefined(normalized.skin?.inlineStyle),
+        },
+        templating: normalizeTemplating(normalized.templating),
+        actions: normalizeListActionPayloads(normalized.actions),
+        i18n: normalizeRecord(normalized.i18n),
+        ui: normalizeUi(normalized.ui),
+        a11y: normalizeA11y(normalized.a11y),
+        events: normalizeRecord(normalized.events),
+    };
+    return stripUndefinedDeep(out);
+}
+function normalizeListActionPayloads(actions) {
+    if (!Array.isArray(actions))
+        return undefined;
+    return actions.map((action) => {
+        if (!action || typeof action !== 'object')
+            return action;
+        const next = cloneJson(action);
+        if (typeof next.globalPayload === 'string') {
+            const trimmed = next.globalPayload.trim();
+            if (!trimmed) {
+                next.globalPayload = undefined;
+            }
+            else if (looksLikeJsonPayload(trimmed)) {
+                try {
+                    next.globalPayload = JSON.parse(trimmed);
+                }
+                catch {
+                    next.globalPayload = trimmed;
+                }
+            }
+            else {
+                next.globalPayload = trimmed;
+            }
+        }
+        return stripUndefinedDeep(next);
+    });
+}
+function validateListAuthoringDocument(doc, context) {
+    const diagnostics = [];
+    const raw = asRecord(doc);
+    const rawConfig = asRecord(raw.config);
+    const normalized = normalizeListAuthoringDocument(doc);
+    const config = normalized.config;
+    const rawLayout = asRecord(rawConfig.layout);
+    const rawSelection = asRecord(rawConfig.selection);
+    const rawSkin = asRecord(rawConfig.skin);
+    if ('actions' in rawConfig && !Array.isArray(rawConfig.actions)) {
+        diagnostics.push(errorDiagnostic('list.config.actions.invalid', 'config.actions must be an array', 'config.actions'));
+    }
+    validateRawEnum(diagnostics, rawLayout.variant, LAYOUT_VARIANTS, 'list.layout.variant.invalid', 'config.layout.variant must be list, cards or tiles', 'config.layout.variant');
+    validateRawEnum(diagnostics, rawLayout.density, LAYOUT_DENSITIES, 'list.layout.density.invalid', 'config.layout.density must be default, comfortable or compact', 'config.layout.density');
+    validateRawEnum(diagnostics, rawLayout.dividers, LAYOUT_DIVIDERS, 'list.layout.dividers.invalid', 'config.layout.dividers must be none, between or all', 'config.layout.dividers');
+    validateRawEnum(diagnostics, rawLayout.model, LAYOUT_MODELS, 'list.layout.model.invalid', 'config.layout.model must be standard, media or hotel', 'config.layout.model');
+    validateRawEnum(diagnostics, rawSelection.mode, SELECTION_MODES, 'list.selection.mode.invalid', 'config.selection.mode must be none, single or multiple', 'config.selection.mode');
+    validateRawEnum(diagnostics, rawSelection.return, SELECTION_RETURNS, 'list.selection.return.invalid', 'config.selection.return must be value, item or id', 'config.selection.return');
+    validateRawEnum(diagnostics, rawSkin.type, SKIN_TYPES, 'list.skin.type.invalid', 'config.skin.type is invalid', 'config.skin.type');
+    if ('dataSource' in rawConfig) {
+        const rawDataSource = asRecord(rawConfig.dataSource);
+        if ('query' in rawDataSource &&
+            rawDataSource.query !== undefined &&
+            (rawDataSource.query === null ||
+                typeof rawDataSource.query !== 'object' ||
+                Array.isArray(rawDataSource.query))) {
+            diagnostics.push(errorDiagnostic('list.dataSource.query.invalid', 'config.dataSource.query must be an object', 'config.dataSource.query'));
+        }
+    }
+    if ('lines' in rawLayout && ![1, 2, 3].includes(Number(rawLayout.lines))) {
+        diagnostics.push(errorDiagnostic('list.layout.lines.invalid', 'config.layout.lines must be 1, 2 or 3', 'config.layout.lines'));
+    }
+    if ('pageSize' in rawLayout &&
+        rawLayout.pageSize !== undefined &&
+        (!Number.isFinite(Number(rawLayout.pageSize)) ||
+            Number(rawLayout.pageSize) < 1)) {
+        diagnostics.push(errorDiagnostic('list.layout.pageSize.invalid', 'config.layout.pageSize must be a positive number', 'config.layout.pageSize'));
+    }
+    const schemaFields = new Set(context?.schemaFieldNames || []);
+    const sort = config.dataSource?.sort?.[0];
+    const sortField = trimToUndefined(sort?.split(',')[0]);
+    if (sortField && schemaFields.size && !schemaFields.has(sortField)) {
+        diagnostics.push(errorDiagnostic('list.dataSource.sort.field.unknown', 'config.dataSource.sort references an unknown schema field', 'config.dataSource.sort[0]'));
+    }
+    const compareBy = trimToUndefined(config.selection?.compareBy);
+    if (compareBy && schemaFields.size && !schemaFields.has(compareBy)) {
+        diagnostics.push(errorDiagnostic('list.selection.compareBy.unknown', 'config.selection.compareBy references an unknown schema field', 'config.selection.compareBy'));
+    }
+    const sortOptions = config.ui?.sortOptions || [];
+    const seenSortOptions = new Set();
+    sortOptions.forEach((option, index) => {
+        const value = typeof option === 'string' ? option : trimToUndefined(option?.value);
+        if (!value)
+            return;
+        if (seenSortOptions.has(value)) {
+            diagnostics.push(errorDiagnostic('list.ui.sortOptions.duplicate', 'config.ui.sortOptions contains duplicated values', `config.ui.sortOptions[${index}]`));
+        }
+        seenSortOptions.add(value);
+    });
+    rawConfig.actions?.forEach((action, index) => {
+        const rawAction = asRecord(action);
+        const id = trimToUndefined(rawAction.id);
+        if (!id) {
+            diagnostics.push(errorDiagnostic('list.actions.id.required', 'Action id is required', `config.actions[${index}].id`));
+        }
+        const payload = rawAction.globalPayload;
+        if (typeof payload === 'string' && looksLikeJsonPayload(payload.trim())) {
+            try {
+                JSON.parse(payload);
+            }
+            catch {
+                diagnostics.push(errorDiagnostic('list.actions.globalPayload.invalid-json', 'Action globalPayload contains invalid JSON', `config.actions[${index}].globalPayload`));
+            }
+        }
+    });
+    validateRawTemplating(diagnostics, asRecord(rawConfig.templating), 'config.templating');
+    if (config.dataSource?.resourcePath &&
+        !config.templating?.primary &&
+        !(context?.schemaFieldNames || []).length) {
+        diagnostics.push(infoDiagnostic('list.templating.schema-inference.pending', 'Schema inference is pending because no schema fields were provided in context', 'config.templating.primary'));
+    }
+    return diagnostics;
+}
+function toCanonicalListConfig(doc, context) {
+    const projected = projectListAuthoringDocument(doc, context);
+    return normalizeListConfig(projected.config);
+}
+function buildListApplyPlan(doc, runtime, options) {
+    const normalized = normalizeListAuthoringDocument(doc);
+    const diagnostics = validateListAuthoringDocument(normalized, {
+        schemaFieldNames: runtime?.schemaFieldNames,
+    });
+    const canonicalDocument = projectListAuthoringDocument(normalized, {
+        schemaFieldNames: runtime?.schemaFieldNames,
+    });
+    const canonicalConfig = toCanonicalListConfig(canonicalDocument, {
+        schemaFieldNames: runtime?.schemaFieldNames,
+    });
+    const diff = deriveConfigDiff(canonicalConfig, runtime?.currentConfig) || {};
+    const schemaInference = buildSchemaInferencePlan(normalized, canonicalDocument, diff, runtime);
+    return {
+        canonicalDocument,
+        canonicalConfig,
+        persistence: {
+            saveConfig: options?.saveConfig === true,
+        },
+        runtime: {
+            applyConfig: true,
+            rebindSelection: diff.selectionChanged || !runtime?.currentConfig,
+            reapplySkin: diff.skinChanged || !runtime?.currentConfig,
+            schemaInference,
+            markForCheck: true,
+        },
+        diff,
+        diagnostics,
+    };
+}
+function serializeListAuthoringDocument(doc) {
+    const normalized = normalizeListAuthoringDocument(doc);
+    return stripUndefinedDeep({
+        kind: DOCUMENT_KIND,
+        version: DOCUMENT_VERSION,
+        config: normalized.config,
+    });
+}
+function buildSchemaInferencePlan(sourceDocument, canonicalDocument, diff, runtime) {
+    if (!diff.schemaInferenceRequested ||
+        (runtime?.schemaFieldNames || []).length) {
+        return undefined;
+    }
+    const resourcePath = canonicalDocument.config.dataSource?.resourcePath;
+    if (!resourcePath)
+        return undefined;
+    return {
+        resourcePath,
+        sourceDocument,
+        targetDocument: canonicalDocument,
+    };
+}
+function validateRawTemplating(diagnostics, templating, basePath) {
+    if (!Object.keys(templating).length)
+        return;
+    validateRawEnum(diagnostics, templating.metaPlacement, ['side', 'line'], 'list.templating.metaPlacement.invalid', 'config.templating.metaPlacement must be side or line', `${basePath}.metaPlacement`);
+    validateRawEnum(diagnostics, templating.statusPosition, ['inline', 'top-right'], 'list.templating.statusPosition.invalid', 'config.templating.statusPosition must be inline or top-right', `${basePath}.statusPosition`);
+    validateRawEnum(diagnostics, templating.featuresMode, FEATURES_MODES, 'list.templating.featuresMode.invalid', 'config.templating.featuresMode must be icons+labels, icons-only or labels-only', `${basePath}.featuresMode`);
+    [
+        'leading',
+        'primary',
+        'secondary',
+        'meta',
+        'trailing',
+        'sectionHeader',
+        'emptyState',
+    ].forEach((slot) => {
+        validateRawTemplateDef(diagnostics, asRecord(templating[slot]), `${basePath}.${slot}`);
+    });
+}
+function validateRawTemplateDef(diagnostics, template, path) {
+    if (!Object.keys(template).length)
+        return;
+    validateRawEnum(diagnostics, template.variant, ['filled', 'outlined'], 'list.templating.template.variant.invalid', `${path}.variant must be filled or outlined`, `${path}.variant`);
+    if ('type' in template && trimToUndefined(template.type) === 'image') {
+        const expr = trimToUndefined(template.expr);
+        if (expr && !isAcceptedImageUrl(expr)) {
+            diagnostics.push(errorDiagnostic('list.templating.template.image.expr.invalid', `${path}.expr must be a URL, asset path or template expression when type is image`, `${path}.expr`));
+        }
+    }
+    const badge = asRecord(template.badge);
+    if (Object.keys(badge).length) {
+        validateRawEnum(diagnostics, badge.variant, ['filled', 'outlined'], 'list.templating.template.badge.variant.invalid', `${path}.badge.variant must be filled or outlined`, `${path}.badge.variant`);
+    }
+    const rating = asRecord(asRecord(template.props).rating);
+    if ('size' in rating && rating.size !== undefined) {
+        const size = Number(rating.size);
+        if (!Number.isFinite(size) || size < 10 || size > 32) {
+            diagnostics.push(errorDiagnostic('list.templating.template.rating.size.invalid', `${path}.props.rating.size must be between 10 and 32`, `${path}.props.rating.size`));
+        }
+    }
+    if ('max' in rating && rating.max !== undefined) {
+        const max = Number(rating.max);
+        if (!Number.isFinite(max) || max < 1 || max > 10) {
+            diagnostics.push(errorDiagnostic('list.templating.template.rating.max.invalid', `${path}.props.rating.max must be between 1 and 10`, `${path}.props.rating.max`));
+        }
+    }
+}
+function normalizeTemplating(templating) {
+    if (!templating || typeof templating !== 'object') {
+        return {
+            skeleton: { count: 3 },
+        };
+    }
+    return stripUndefinedDeep({
+        ...templating,
+        leading: normalizeTemplateDef(templating.leading),
+        primary: normalizeTemplateDef(templating.primary),
+        secondary: normalizeTemplateDef(templating.secondary),
+        meta: normalizeTemplateDef(templating.meta),
+        trailing: normalizeTemplateDef(templating.trailing),
+        sectionHeader: normalizeTemplateDef(templating.sectionHeader),
+        emptyState: normalizeTemplateDef(templating.emptyState),
+        metaPlacement: oneOf(templating.metaPlacement, ['side', 'line'], undefined),
+        metaPrefixIcon: trimToUndefined(templating.metaPrefixIcon),
+        statusPosition: oneOf(templating.statusPosition, ['inline', 'top-right'], undefined),
+        chipColorMap: normalizeRecord(templating.chipColorMap),
+        chipLabelMap: normalizeRecord(templating.chipLabelMap),
+        iconColorMap: normalizeRecord(templating.iconColorMap),
+        features: Array.isArray(templating.features)
+            ? templating.features.map((feature) => stripUndefinedDeep({
+                ...feature,
+                icon: trimToUndefined(feature?.icon),
+                expr: trimToEmpty(feature?.expr),
+                class: trimToUndefined(feature?.class),
+                style: trimToUndefined(feature?.style),
+            }))
+            : undefined,
+        featuresVisible: readBoolean(templating.featuresVisible),
+        featuresMode: oneOf(templating.featuresMode, FEATURES_MODES, templating.features?.length ? 'icons+labels' : undefined),
+        skeleton: {
+            count: normalizePositiveNumber(templating.skeleton?.count) ?? 3,
+        },
+    });
+}
+function normalizeTemplateDef(template) {
+    if (!template || typeof template !== 'object')
+        return undefined;
+    return stripUndefinedDeep({
+        ...template,
+        expr: trimToEmpty(template.expr),
+        class: trimToUndefined(template.class),
+        style: trimToUndefined(template.style),
+        color: trimToUndefined(template.color),
+        variant: oneOf(template.variant, ['filled', 'outlined'], undefined),
+        imageAlt: trimToUndefined(template.imageAlt),
+        badge: template.badge
+            ? stripUndefinedDeep({
+                expr: trimToEmpty(template.badge.expr),
+                color: trimToUndefined(template.badge.color),
+                variant: oneOf(template.badge.variant, ['filled', 'outlined'], undefined),
+            })
+            : undefined,
+        props: template.props
+            ? stripUndefinedDeep({
+                rating: template.props.rating
+                    ? stripUndefinedDeep({
+                        max: normalizePositiveNumber(template.props.rating.max),
+                        size: normalizePositiveNumber(template.props.rating.size),
+                        color: trimToUndefined(template.props.rating.color),
+                    })
+                    : undefined,
+            })
+            : undefined,
+    });
+}
+function normalizeUi(ui) {
+    return stripUndefinedDeep({
+        showSearch: readBoolean(ui?.showSearch),
+        searchField: trimToUndefined(ui?.searchField),
+        searchPlaceholder: trimToUndefined(ui?.searchPlaceholder),
+        showSort: readBoolean(ui?.showSort),
+        sortOptions: Array.isArray(ui?.sortOptions)
+            ? ui?.sortOptions
+                .map((option) => typeof option === 'string'
+                ? trimToUndefined(option)
+                : stripUndefinedDeep({
+                    label: trimToUndefined(option?.label),
+                    value: trimToUndefined(option?.value),
+                }))
+                .filter((option) => typeof option === 'string' ||
+                (!!option &&
+                    typeof option.label === 'string' &&
+                    typeof option.value === 'string'))
+            : undefined,
+        showRange: readBoolean(ui?.showRange),
+    });
+}
+function normalizeA11y(a11y) {
+    return stripUndefinedDeep({
+        ariaLabel: trimToUndefined(a11y?.ariaLabel),
+        ariaLabelledBy: trimToUndefined(a11y?.ariaLabelledBy),
+        highContrast: readBoolean(a11y?.highContrast),
+        reduceMotion: readBoolean(a11y?.reduceMotion),
+    });
+}
+function normalizeRecord(value) {
+    if (!value || typeof value !== 'object' || Array.isArray(value)) {
+        return undefined;
+    }
+    return stripUndefinedDeep(cloneJson(value));
+}
+function normalizeQuery(value) {
+    if (!value || typeof value !== 'object' || Array.isArray(value)) {
+        return undefined;
+    }
+    return stripUndefinedDeep(cloneJson(value));
+}
+function normalizeSort(value) {
+    if (!Array.isArray(value))
+        return undefined;
+    const normalized = value
+        .map((entry) => trimToUndefined(entry))
+        .filter((entry) => !!entry);
+    return normalized.length ? normalized : undefined;
+}
+function deriveConfigDiff(next, current) {
+    const normalizedCurrent = current ? normalizeListConfig(current) : undefined;
+    const configChanged = stableSerialize(next) !== stableSerialize(normalizedCurrent);
+    const dataSourceChanged = stableSerialize(next.dataSource) !== stableSerialize(normalizedCurrent?.dataSource) ||
+        stableSerialize(next.layout) !== stableSerialize(normalizedCurrent?.layout) ||
+        stableSerialize(next.ui) !== stableSerialize(normalizedCurrent?.ui);
+    const selectionChanged = stableSerialize(next.selection) !== stableSerialize(normalizedCurrent?.selection);
+    const skinChanged = stableSerialize(next.skin) !== stableSerialize(normalizedCurrent?.skin) ||
+        stableSerialize(next.layout) !== stableSerialize(normalizedCurrent?.layout);
+    const templatingChanged = stableSerialize(next.templating) !== stableSerialize(normalizedCurrent?.templating);
+    const schemaInferenceRequested = !!(next.dataSource?.resourcePath && !next.templating?.primary);
+    return {
+        configChanged,
+        dataSourceChanged,
+        selectionChanged,
+        skinChanged,
+        templatingChanged,
+        schemaInferenceRequested,
+    };
+}
+function looksLikeLegacySettingsPayload(obj) {
+    return 'config' in obj && !('kind' in obj);
+}
+function asListConfig(value) {
+    if (value && typeof value === 'object') {
+        return value;
+    }
+    return {};
+}
+function asRecord(value) {
+    return value && typeof value === 'object'
+        ? value
+        : {};
+}
+function oneOf(value, allowed, fallback) {
+    const candidate = trimToUndefined(value);
+    if (!candidate)
+        return fallback;
+    return allowed.includes(candidate) ? candidate : fallback;
+}
+function validateRawEnum(diagnostics, value, allowed, code, message, path) {
+    if (value === undefined || value === null || value === '')
+        return;
+    const candidate = trimToUndefined(value);
+    if (!candidate || !allowed.includes(candidate)) {
+        diagnostics.push(errorDiagnostic(code, message, path));
+    }
+}
+function trimToEmpty(value) {
+    return typeof value === 'string' ? value.trim() : '';
+}
+function trimToUndefined(value) {
+    const trimmed = trimToEmpty(value);
+    return trimmed || undefined;
+}
+function normalizeLines(value) {
+    const num = Number(value);
+    return num === 1 || num === 3 ? num : 2;
+}
+function normalizePositiveNumber(value) {
+    if (value === undefined || value === null || value === '')
+        return undefined;
+    const num = Number(value);
+    if (!Number.isFinite(num) || num < 1)
+        return undefined;
+    return num;
+}
+function normalizeAngle(value) {
+    const num = Number(value);
+    return Number.isFinite(num) ? num : 135;
+}
+function readBoolean(value) {
+    if (value === true || value === false)
+        return value;
+    return undefined;
+}
+function looksLikeJsonPayload(value) {
+    return (value.startsWith('{') ||
+        value.startsWith('[') ||
+        value.endsWith('}') ||
+        value.endsWith(']'));
+}
+function isAcceptedImageUrl(value) {
+    return ((value.startsWith('${') && value.endsWith('}')) ||
+        value.startsWith('http://') ||
+        value.startsWith('https://') ||
+        value.startsWith('data:') ||
+        value.startsWith('./') ||
+        value.startsWith('../') ||
+        value.startsWith('assets/') ||
+        value.startsWith('/'));
+}
+function cloneJson(value) {
+    return JSON.parse(JSON.stringify(value ?? null));
+}
+function stripUndefinedDeep(value) {
+    return JSON.parse(JSON.stringify(value));
+}
+function stableSerialize(value) {
+    if (value === undefined)
+        return 'undefined';
+    if (value === null)
+        return 'null';
+    if (typeof value === 'number' ||
+        typeof value === 'boolean' ||
+        typeof value === 'bigint') {
+        return String(value);
+    }
+    if (typeof value === 'string')
+        return JSON.stringify(value);
+    if (Array.isArray(value)) {
+        return `[${value.map((entry) => stableSerialize(entry)).join(',')}]`;
+    }
+    if (typeof value === 'object') {
+        const record = value;
+        const keys = Object.keys(record).sort();
+        return `{${keys
+            .map((key) => `${JSON.stringify(key)}:${stableSerialize(record[key])}`)
+            .join(',')}}`;
+    }
+    return JSON.stringify(String(value));
+}
+function errorDiagnostic(code, message, path) {
+    return { level: 'error', code, message, path };
+}
+function infoDiagnostic(code, message, path) {
+    return { level: 'info', code, message, path };
+}
+
+class PraxisListJsonConfigEditorComponent {
+    cdr;
+    document = null;
+    documentChange = new EventEmitter();
+    validationChange = new EventEmitter();
+    editorEvent = new EventEmitter();
+    jsonText = '';
+    isValidJson = true;
+    jsonError = '';
+    unknownTopKeys = [];
+    hasPendingExternalUpdate = false;
+    destroy$ = new Subject();
+    jsonTextChanges$ = new Subject();
+    lastSyncedJsonText = '';
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.jsonTextChanges$
+            .pipe(debounceTime(300), takeUntil(this.destroy$))
+            .subscribe((text) => this.validateJson(text));
+    }
+    ngOnInit() {
+        if (this.document) {
+            this.updateJsonFromDocument(this.document, true);
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes['document'] && this.document) {
+            this.updateJsonFromDocument(this.document);
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    onJsonTextChange(text) {
+        this.jsonTextChanges$.next(text);
+    }
+    applyJsonChanges() {
+        if (!this.isValidJson)
+            return;
+        try {
+            const document = parseLegacyOrListDocument(JSON.parse(this.jsonText));
+            const diagnostics = validateListAuthoringDocument(document);
+            this.lastSyncedJsonText = this.jsonText;
+            this.hasPendingExternalUpdate = false;
+            this.documentChange.emit(document);
+            this.editorEvent.emit({
+                type: 'apply',
+                payload: {
+                    isValid: !diagnostics.some((item) => item.level === 'error'),
+                    document,
+                    diagnostics,
+                },
+            });
+        }
+        catch {
+            this.editorEvent.emit({
+                type: 'apply',
+                payload: {
+                    isValid: false,
+                    error: 'Erro ao aplicar documento JSON',
+                },
+            });
+        }
+    }
+    formatJson() {
+        if (!this.isValidJson)
+            return;
+        try {
+            const document = parseLegacyOrListDocument(JSON.parse(this.jsonText));
+            const diagnostics = validateListAuthoringDocument(document);
+            this.syncJsonText(JSON.stringify(serializeListAuthoringDocument(document), null, 2));
+            this.editorEvent.emit({
+                type: 'format',
+                payload: {
+                    isValid: !diagnostics.some((item) => item.level === 'error'),
+                    document,
+                    diagnostics,
+                },
+            });
+            this.cdr.markForCheck();
+        }
+        catch {
+            this.editorEvent.emit({
+                type: 'format',
+                payload: {
+                    isValid: false,
+                    error: 'Erro ao formatar JSON',
+                },
+            });
+        }
+    }
+    updateJsonFromDocument(document, force = false) {
+        const nextJsonText = JSON.stringify(serializeListAuthoringDocument(document), null, 2);
+        if (!force && this.hasUnsavedLocalChanges()) {
+            this.hasPendingExternalUpdate = true;
+            this.cdr.markForCheck();
+            return;
+        }
+        this.syncJsonText(nextJsonText);
+    }
+    reloadFromDocument() {
+        if (!this.document)
+            return;
+        this.updateJsonFromDocument(this.document, true);
+    }
+    validateJson(text) {
+        const result = {
+            isValid: false,
+            diagnostics: [],
+        };
+        if (!text.trim()) {
+            result.error = 'JSON não pode estar vazio';
+            this.updateValidationState(result);
+            return;
+        }
+        try {
+            const parsed = JSON.parse(text);
+            const document = parseLegacyOrListDocument(parsed);
+            const diagnostics = validateListAuthoringDocument(document);
+            const hasErrors = diagnostics.some((item) => item.level === 'error');
+            const allowed = ['kind', 'version', 'config', 'bindings'];
+            result.isValid = !hasErrors;
+            result.document = document;
+            result.diagnostics = diagnostics;
+            this.unknownTopKeys = Object.keys(parsed || {}).filter((key) => !allowed.includes(key));
+            if (hasErrors) {
+                result.error =
+                    diagnostics.find((item) => item.level === 'error')?.message ||
+                        'Documento de autoria inválido';
+            }
+            this.updateValidationState(result);
+        }
+        catch (error) {
+            result.error =
+                error instanceof Error ? error.message : 'Erro de sintaxe JSON';
+            this.updateValidationState(result);
+        }
+    }
+    updateValidationState(result) {
+        this.isValidJson = result.isValid;
+        this.jsonError = result.error || '';
+        this.validationChange.emit(result);
+        this.editorEvent.emit({
+            type: 'validation',
+            payload: result,
+        });
+        this.cdr.markForCheck();
+    }
+    syncJsonText(text) {
+        this.jsonText = text;
+        this.lastSyncedJsonText = text;
+        this.hasPendingExternalUpdate = false;
+        this.validateJson(this.jsonText);
+    }
+    hasUnsavedLocalChanges() {
+        return this.jsonText.trim() !== this.lastSyncedJsonText.trim();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisListJsonConfigEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: PraxisListJsonConfigEditorComponent, isStandalone: true, selector: "praxis-list-json-config-editor", inputs: { document: "document" }, outputs: { documentChange: "documentChange", validationChange: "validationChange", editorEvent: "editorEvent" }, usesOnChanges: true, ngImport: i0, template: `
+    <div class="json-config-editor">
+      <mat-card class="educational-card">
+        <mat-card-header>
+          <mat-icon mat-card-avatar class="card-icon">data_object</mat-icon>
+          <mat-card-title>Edição Avançada JSON</mat-card-title>
+        </mat-card-header>
+        <mat-card-content>
+          <p>O contrato oficial de autoria da lista é <strong>ListAuthoringDocument</strong>. Esta aba edita esse documento diretamente.</p>
+        </mat-card-content>
+      </mat-card>
+
+      <div class="json-editor-section">
+        <div class="json-editor-toolbar">
+          <button mat-button (click)="formatJson()" [disabled]="!isValidJson">
+            <mat-icon>format_align_left</mat-icon>
+            Formatar JSON
+          </button>
+          <button mat-button color="primary" (click)="applyJsonChanges()" [disabled]="!isValidJson">
+            <mat-icon>check</mat-icon>
+            Aplicar JSON
+          </button>
+          @if (hasPendingExternalUpdate) {
+            <button mat-button type="button" (click)="reloadFromDocument()">
+              <mat-icon>refresh</mat-icon>
+              Recarregar documento
+            </button>
+          }
+        </div>
+        @if (hasPendingExternalUpdate) {
+          <p class="pending-update-note">
+            O documento externo mudou enquanto havia edições locais não aplicadas. Revise e recarregue quando quiser substituir o texto atual.
+          </p>
+        }
+
+        <mat-form-field appearance="outline" class="json-textarea-field">
+          <mat-label>Documento JSON</mat-label>
+          <textarea
+            matInput
+            [(ngModel)]="jsonText"
+            (ngModelChange)="onJsonTextChange($event)"
+            rows="20"
+            spellcheck="false"
+            class="json-textarea"
+            placeholder="Edite o documento canônico da lista aqui...">
+          </textarea>
+          @if (isValidJson) {
+            <mat-hint class="valid-hint">JSON válido</mat-hint>
+          }
+          @if (isValidJson && unknownTopKeys.length) {
+            <mat-hint align="end" class="valid-hint warning-hint">
+              Aviso: chaves desconhecidas no topo — {{ unknownTopKeys.join(', ') }}
+            </mat-hint>
+          }
+          @if (!isValidJson && jsonText) {
+            <mat-error>JSON inválido: {{ jsonError }}</mat-error>
+          }
+        </mat-form-field>
+      </div>
+    </div>
+  `, isInline: true, styles: [".json-config-editor{display:flex;flex-direction:column;gap:16px}.educational-card{background-color:var(--md-sys-color-surface-container-low);border-left:4px solid var(--md-sys-color-primary)}.card-icon{background-color:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container);font-size:20px;width:40px;height:40px;display:flex;align-items:center;justify-content:center}.json-editor-section{display:flex;flex-direction:column;gap:16px}.json-editor-toolbar{display:flex;gap:12px;padding:12px;background-color:var(--md-sys-color-surface-container-low);border-radius:8px;border:1px solid var(--md-sys-color-outline-variant)}.json-textarea-field{width:100%}.pending-update-note{margin:0;color:var(--md-sys-color-secondary);font-size:.875rem}.json-textarea{font-family:Monaco,Menlo,Ubuntu Mono,Consolas,monospace!important;font-size:13px!important;line-height:1.4!important;min-height:320px!important;white-space:pre!important;overflow-wrap:normal!important;overflow-x:auto!important;resize:none!important}.valid-hint{color:var(--md-sys-color-primary)!important}.warning-hint{color:var(--md-sys-color-secondary)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.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: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$2.MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { kind: "directive", type: i3$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$2.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisListJsonConfigEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'praxis-list-json-config-editor', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        FormsModule,
+                        MatButtonModule,
+                        MatCardModule,
+                        MatFormFieldModule,
+                        MatIconModule,
+                        MatInputModule,
+                    ], template: `
+    <div class="json-config-editor">
+      <mat-card class="educational-card">
+        <mat-card-header>
+          <mat-icon mat-card-avatar class="card-icon">data_object</mat-icon>
+          <mat-card-title>Edição Avançada JSON</mat-card-title>
+        </mat-card-header>
+        <mat-card-content>
+          <p>O contrato oficial de autoria da lista é <strong>ListAuthoringDocument</strong>. Esta aba edita esse documento diretamente.</p>
+        </mat-card-content>
+      </mat-card>
+
+      <div class="json-editor-section">
+        <div class="json-editor-toolbar">
+          <button mat-button (click)="formatJson()" [disabled]="!isValidJson">
+            <mat-icon>format_align_left</mat-icon>
+            Formatar JSON
+          </button>
+          <button mat-button color="primary" (click)="applyJsonChanges()" [disabled]="!isValidJson">
+            <mat-icon>check</mat-icon>
+            Aplicar JSON
+          </button>
+          @if (hasPendingExternalUpdate) {
+            <button mat-button type="button" (click)="reloadFromDocument()">
+              <mat-icon>refresh</mat-icon>
+              Recarregar documento
+            </button>
+          }
+        </div>
+        @if (hasPendingExternalUpdate) {
+          <p class="pending-update-note">
+            O documento externo mudou enquanto havia edições locais não aplicadas. Revise e recarregue quando quiser substituir o texto atual.
+          </p>
+        }
+
+        <mat-form-field appearance="outline" class="json-textarea-field">
+          <mat-label>Documento JSON</mat-label>
+          <textarea
+            matInput
+            [(ngModel)]="jsonText"
+            (ngModelChange)="onJsonTextChange($event)"
+            rows="20"
+            spellcheck="false"
+            class="json-textarea"
+            placeholder="Edite o documento canônico da lista aqui...">
+          </textarea>
+          @if (isValidJson) {
+            <mat-hint class="valid-hint">JSON válido</mat-hint>
+          }
+          @if (isValidJson && unknownTopKeys.length) {
+            <mat-hint align="end" class="valid-hint warning-hint">
+              Aviso: chaves desconhecidas no topo — {{ unknownTopKeys.join(', ') }}
+            </mat-hint>
+          }
+          @if (!isValidJson && jsonText) {
+            <mat-error>JSON inválido: {{ jsonError }}</mat-error>
+          }
+        </mat-form-field>
+      </div>
+    </div>
+  `, styles: [".json-config-editor{display:flex;flex-direction:column;gap:16px}.educational-card{background-color:var(--md-sys-color-surface-container-low);border-left:4px solid var(--md-sys-color-primary)}.card-icon{background-color:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container);font-size:20px;width:40px;height:40px;display:flex;align-items:center;justify-content:center}.json-editor-section{display:flex;flex-direction:column;gap:16px}.json-editor-toolbar{display:flex;gap:12px;padding:12px;background-color:var(--md-sys-color-surface-container-low);border-radius:8px;border:1px solid var(--md-sys-color-outline-variant)}.json-textarea-field{width:100%}.pending-update-note{margin:0;color:var(--md-sys-color-secondary);font-size:.875rem}.json-textarea{font-family:Monaco,Menlo,Ubuntu Mono,Consolas,monospace!important;font-size:13px!important;line-height:1.4!important;min-height:320px!important;white-space:pre!important;overflow-wrap:normal!important;overflow-x:auto!important;resize:none!important}.valid-hint{color:var(--md-sys-color-primary)!important}.warning-hint{color:var(--md-sys-color-secondary)!important}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { document: [{
+                type: Input
+            }], documentChange: [{
+                type: Output
+            }], validationChange: [{
+                type: Output
+            }], editorEvent: [{
+                type: Output
+            }] } });
+
 const SKIN_PRESETS = [
     'pill-soft',
     'gradient-tile',
@@ -1174,6 +2055,7 @@ const SKIN_PRESETS = [
 class PraxisListConfigEditor {
     config;
     listId;
+    document = createListAuthoringDocument({ config: {} });
     working = {
         dataSource: {},
         layout: { variant: 'list', lines: 2, density: 'default', dividers: 'between' },
@@ -1231,29 +2113,15 @@ class PraxisListConfigEditor {
         setAutoFreeze(false);
         // optional inject
         this.crud = inject(GenericCrudService, { optional: true });
-        const cfg = injected?.config || this.config;
-        if (cfg) {
-            this.working = this.normalize(structuredClone(cfg));
-            // Initialize mapping UI from existing templating
-            this.hydrateMappingFromTemplating(this.working.templating);
-            this.hydrateUiEditorFromConfig();
-        }
+        const incoming = injected?.document ?? injected?.config ?? this.config;
+        this.applyIncomingDocument(incoming);
         this.globalActionCatalog = this.resolveGlobalActionCatalog();
         this.appliedMappingSnapshot = this.getMappingSnapshot();
-        this.initialJson = JSON.stringify(this.working);
+        this.initialJson = this.snapshotCurrentDocument();
         this.lastJson = this.initialJson;
-        this.queryJson = this.working?.dataSource?.query ? JSON.stringify(this.working.dataSource.query, null, 2) : '';
-        this.skeletonCountInput = this.working?.templating?.skeleton?.count ?? this.skeletonCountInput;
         // Start schema watcher and emit initial value
         this.setupSchemaWatcher();
         this.resourcePathChanges.next(this.working?.dataSource?.resourcePath || '');
-        // Hydrate sort controls from existing config
-        const sort = this.working.dataSource?.sort?.[0];
-        if (sort && typeof sort === 'string') {
-            const [field, dir] = sort.split(',');
-            this.sortField = field;
-            this.sortDir = (dir === 'desc' ? 'desc' : 'asc');
-        }
     }
     ip = inject(IconPickerService);
     async pickLeadingIcon() {
@@ -1282,58 +2150,95 @@ class PraxisListConfigEditor {
         this.onMappingChanged();
     }
     getSettingsValue() {
-        // Ensure pending template mapping is applied before returning
-        this.ensureMappingApplied();
-        this.normalizeActionPayloads();
-        return { config: this.working, id: this.listId };
+        const document = this.buildCurrentDocument();
+        return { document, config: document.config, id: this.listId };
     }
     onSave() {
-        this.ensureMappingApplied();
-        this.normalizeActionPayloads();
-        return { config: this.working, id: this.listId };
-    }
-    normalize(cfg) {
-        const out = {
-            ...cfg,
-            dataSource: cfg.dataSource || {},
-            layout: {
-                variant: cfg.layout?.variant || 'list',
-                lines: cfg.layout?.lines || 2,
-                density: cfg.layout?.density || 'default',
-                dividers: cfg.layout?.dividers || 'between',
-                model: cfg.layout?.model || 'standard',
-                groupBy: cfg.layout?.groupBy,
-                stickySectionHeader: cfg.layout?.stickySectionHeader,
-                virtualScroll: cfg.layout?.virtualScroll,
-            },
-            selection: {
-                mode: cfg.selection?.mode || 'none',
-                formControlName: cfg.selection?.formControlName,
-                formControlPath: cfg.selection?.formControlPath,
-                compareBy: cfg.selection?.compareBy,
-                return: cfg.selection?.return || 'value',
-            },
-            skin: {
-                type: cfg.skin?.type || 'elevated',
-                gradient: cfg.skin?.gradient || { from: '', to: '', angle: 135 },
-                radius: cfg.skin?.radius,
-                shadow: cfg.skin?.shadow,
-                border: cfg.skin?.border,
-                backdropBlur: cfg.skin?.backdropBlur,
-                class: cfg.skin?.class,
-                inlineStyle: cfg.skin?.inlineStyle,
-            },
-            i18n: cfg.i18n || {},
-            ui: cfg.ui || {},
-            a11y: cfg.a11y || {},
-            events: cfg.events || {},
+        const document = this.buildCurrentDocument();
+        return { document, config: document.config, id: this.listId };
+    }
+    onJsonConfigChange(newValue) {
+        this.applyIncomingDocument(newValue);
+        this.markDirty();
+        this.verify();
+    }
+    onJsonValidationChange(result) {
+        this.isValid$.next(result.isValid);
+    }
+    onJsonEditorEvent(event) {
+        if (event.type === 'validation')
+            return;
+    }
+    buildJsonAuthoringDocument() {
+        return this.buildCurrentDocument();
+    }
+    applyIncomingDocument(raw) {
+        const document = projectListAuthoringDocument(parseLegacyOrListDocument(raw), {
+            schemaFieldNames: this.fields,
+        });
+        this.document = document;
+        this.working = document.config;
+        this.resetVisualMappingState();
+        this.hydrateMappingFromTemplating(this.working.templating);
+        this.hydrateUiEditorFromConfig();
+        this.queryJson = this.working?.dataSource?.query
+            ? JSON.stringify(this.working.dataSource.query, null, 2)
+            : '';
+        this.queryError = '';
+        this.skeletonCountInput =
+            this.working?.templating?.skeleton?.count ?? this.skeletonCountInput;
+        this.syncSortStateFromWorking();
+    }
+    buildCurrentDocument() {
+        const config = this.mappingDirty
+            ? this.composeWorkingFromVisualState()
+            : this.working;
+        const document = createListAuthoringDocument({
+            config,
+        });
+        this.document = document;
+        return document;
+    }
+    snapshotCurrentDocument() {
+        return JSON.stringify(serializeListAuthoringDocument(this.buildCurrentDocument()));
+    }
+    syncSortStateFromWorking() {
+        this.sortField = undefined;
+        this.sortDir = 'asc';
+        const sort = this.working.dataSource?.sort?.[0];
+        if (sort && typeof sort === 'string') {
+            const [field, dir] = sort.split(',');
+            this.sortField = field;
+            this.sortDir = dir === 'desc' ? 'desc' : 'asc';
+        }
+    }
+    resetVisualMappingState() {
+        this.mappingPrimary = { type: 'text' };
+        this.mappingSecondary = { type: 'text' };
+        this.mappingMeta = { type: 'text' };
+        this.mappingTrailing = {};
+        this.mappingLeading = { type: 'icon' };
+        this.mappingSectionHeader = { type: 'text', expr: '${item.key}' };
+        this.mappingEmptyState = {
+            type: 'text',
+            expr: 'Nenhum item disponível',
         };
-        return out;
+        this.mappingMetaPrefixIcon = undefined;
+        this.mappingMetaFields = [];
+        this.mappingMetaSeparator = ' • ';
+        this.mappingMetaWrapSecondInParens = false;
+        this.features = [];
+        this.featuresVisible = true;
+        this.featuresMode = 'icons+labels';
+        this.statusPosition = undefined;
+        this.iconColorMapEntries = [];
+        this.chipColorMapEntries = [];
+        this.chipLabelMapEntries = [];
     }
     // Debounced schema loader for resourcePath
     setupSchemaWatcher() {
         this.resourcePathChanges
-            .pipe(debounceTime(300), distinctUntilChanged(), tap(() => this.isBusy$.next(true)), switchMap((rp) => {
+            .pipe(debounceTime$1(300), distinctUntilChanged(), tap(() => this.isBusy$.next(true)), switchMap((rp) => {
             const path = (rp || '').trim();
             if (!path || !this.crud) {
                 this.fields = [];
@@ -1733,14 +2638,11 @@ class PraxisListConfigEditor {
     reset() {
         try {
             this.isBusy$.next(true);
-            const parsed = JSON.parse(this.initialJson);
-            this.working = parsed;
+            const parsed = parseLegacyOrListDocument(JSON.parse(this.initialJson));
+            this.applyIncomingDocument(parsed);
             this.lastJson = this.initialJson;
             this.mappingDirty = false;
             this.appliedMappingSnapshot = this.getMappingSnapshot();
-            this.queryJson = this.working?.dataSource?.query ? JSON.stringify(this.working.dataSource.query, null, 2) : '';
-            this.queryError = '';
-            this.skeletonCountInput = this.working?.templating?.skeleton?.count ?? this.skeletonCountInput;
             this.isDirty$.next(false);
             this.isValid$.next(true);
         }
@@ -1820,10 +2722,10 @@ class PraxisListConfigEditor {
         }
     }
     onPageSizeChange(value) {
-        const n = Number(value);
-        const fixed = !Number.isFinite(n) || n < 1 ? 1 : Math.floor(n);
+        const raw = value === '' || value === null ? undefined : Number(value);
+        const nextValue = raw === undefined || !Number.isFinite(raw) ? raw : Math.trunc(raw);
         this.working = produce(this.working, (draft) => {
-            draft.layout.pageSize = fixed;
+            draft.layout.pageSize = nextValue;
         });
         this.markDirty();
         this.verify();
@@ -1917,19 +2819,14 @@ class PraxisListConfigEditor {
         this.verify();
     }
     applyTemplate() {
+        this.working = this.composeWorkingFromVisualState();
+        this.mappingDirty = false;
+        this.appliedMappingSnapshot = this.getMappingSnapshot();
+        this.markDirty();
+        this.verify();
+    }
+    composeWorkingFromVisualState() {
         const t = { ...this.working.templating };
-        const normalizeRating = (slot) => {
-            if (!slot)
-                return;
-            if (slot.ratingSize != null) {
-                const s = Number(slot.ratingSize);
-                slot.ratingSize = Number.isFinite(s) ? Math.min(32, Math.max(10, Math.round(s))) : undefined;
-            }
-            if (slot.ratingMax != null) {
-                const m = Number(slot.ratingMax);
-                slot.ratingMax = Number.isFinite(m) ? Math.min(10, Math.max(1, Math.round(m))) : undefined;
-            }
-        };
         const build = (slot) => {
             if (!slot?.field)
                 return undefined;
@@ -2021,11 +2918,6 @@ class PraxisListConfigEditor {
             }
             return { type: slot.type, expr, class: slot.class, style: slot.style };
         };
-        normalizeRating(this.mappingMeta);
-        normalizeRating(this.mappingTrailing);
-        normalizeRating(this.mappingLeading);
-        normalizeRating(this.mappingSectionHeader);
-        normalizeRating(this.mappingEmptyState);
         const p = build(this.mappingPrimary);
         const s = build(this.mappingSecondary);
         const m = build(this.mappingMeta);
@@ -2148,17 +3040,15 @@ class PraxisListConfigEditor {
         t.featuresVisible = this.featuresVisible;
         t.featuresMode = this.featuresMode;
         t.skeleton = this.skeletonCountInput > 0 ? { count: this.skeletonCountInput } : undefined;
-        this.working = produce(this.working, (draft) => {
+        return produce(this.working, (draft) => {
             draft.templating = t;
         });
-        this.markDirty();
-        this.verify();
-        this.mappingDirty = false;
-        this.appliedMappingSnapshot = this.getMappingSnapshot();
     }
     ensureMappingApplied() {
         if (this.mappingDirty) {
-            this.applyTemplate();
+            this.working = this.composeWorkingFromVisualState();
+            this.mappingDirty = false;
+            this.appliedMappingSnapshot = this.getMappingSnapshot();
         }
     }
     onMappingChanged() {
@@ -2542,11 +3432,12 @@ class PraxisListConfigEditor {
     }
     markDirty() {
         setTimeout(() => {
+            this.document = this.buildCurrentDocument();
             if (this.mappingDirty) {
                 this.isDirty$.next(true);
                 return;
             }
-            const current = JSON.stringify(this.working);
+            const current = JSON.stringify(serializeListAuthoringDocument(this.document));
             this.lastJson = current;
             this.isDirty$.next(current !== this.initialJson);
         });
@@ -2577,106 +3468,19 @@ class PraxisListConfigEditor {
     updateMappingDirty() {
         this.mappingDirty = this.getMappingSnapshot() !== this.appliedMappingSnapshot;
     }
-    isJsonLike(value) {
-        const trimmed = value.trim();
-        return (trimmed.startsWith('{') && trimmed.endsWith('}')) || (trimmed.startsWith('[') && trimmed.endsWith(']'));
-    }
     resolveGlobalActionCatalog() {
         const injected = inject(GLOBAL_ACTION_CATALOG, { optional: true });
         if (!injected)
             return PRAXIS_GLOBAL_ACTION_CATALOG.slice();
         return getGlobalActionCatalog(injected);
     }
-    normalizeActionPayloads() {
-        const actions = this.working?.actions || [];
-        if (!Array.isArray(actions))
-            return;
-        for (const a of actions) {
-            if (!a)
-                continue;
-            const v = a.globalPayload;
-            if (typeof v !== 'string')
-                continue;
-            const trimmed = v.trim();
-            if (!trimmed) {
-                a.globalPayload = undefined;
-                continue;
-            }
-            if ((trimmed.startsWith('{') && trimmed.endsWith('}')) || (trimmed.startsWith('[') && trimmed.endsWith(']'))) {
-                try {
-                    a.globalPayload = JSON.parse(trimmed);
-                }
-                catch {
-                    // keep as string
-                }
-            }
-        }
-    }
     verify() {
         setTimeout(() => {
-            // Basic constraints
-            const rp = (this.working?.dataSource?.resourcePath || '').trim();
-            const pageSizeRaw = this.working?.layout?.pageSize;
-            const pageSizeNum = pageSizeRaw == null ? undefined : Number(pageSizeRaw);
-            const lines = this.working?.layout?.lines;
-            const sortField = (this.sortField || '').trim();
-            let valid = true;
-            // Allow configs without resourcePath (local data or template-only editing)
-            if (pageSizeNum != null && (!Number.isFinite(pageSizeNum) || pageSizeNum < 1))
-                valid = false;
-            if (![1, 2, 3].includes(Number(lines)))
-                valid = false;
-            if (sortField && this.fields.length && !this.fields.includes(sortField))
-                valid = false;
-            // selection.compareBy should exist when fields are loaded
-            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;
-                    }
-                }
-            }
-            if (this.queryError)
-                valid = false;
-            if ((this.mappingLeading?.type === 'image' && !this.validateImageUrl(this.mappingLeading.imageUrl)) ||
-                (this.mappingTrailing?.type === 'image' && !this.validateImageUrl(this.mappingTrailing.imageUrl)) ||
-                (this.mappingSectionHeader?.type === 'image' && !this.validateImageUrl(this.mappingSectionHeader.imageUrl)) ||
-                (this.mappingEmptyState?.type === 'image' && !this.validateImageUrl(this.mappingEmptyState.imageUrl))) {
-                valid = false;
-            }
-            if ((this.mappingMeta?.type === 'rating' && (this.isRatingSizeInvalid(this.mappingMeta.ratingSize) || this.isRatingMaxInvalid(this.mappingMeta.ratingMax))) ||
-                (this.mappingLeading?.type === 'rating' && (this.isRatingSizeInvalid(this.mappingLeading.ratingSize) || this.isRatingMaxInvalid(this.mappingLeading.ratingMax))) ||
-                (this.mappingTrailing?.type === 'rating' && (this.isRatingSizeInvalid(this.mappingTrailing.ratingSize) || this.isRatingMaxInvalid(this.mappingTrailing.ratingMax))) ||
-                (this.mappingSectionHeader?.type === 'rating' && (this.isRatingSizeInvalid(this.mappingSectionHeader.ratingSize) || this.isRatingMaxInvalid(this.mappingSectionHeader.ratingMax))) ||
-                (this.mappingEmptyState?.type === 'rating' && (this.isRatingSizeInvalid(this.mappingEmptyState.ratingSize) || this.isRatingMaxInvalid(this.mappingEmptyState.ratingMax)))) {
-                valid = false;
-            }
-            // Validação de JSON nas Actions
-            if (this.working?.actions?.some(a => this.isGlobalPayloadInvalid(a.globalPayload))) {
-                valid = false;
-            }
-            if (valid && Array.isArray(this.working?.actions)) {
-                for (const a of this.working.actions) {
-                    if (this.isGlobalPayloadInvalid(a?.globalPayload)) {
-                        valid = false;
-                        break;
-                    }
-                }
-            }
-            this.isValid$.next(valid);
+            const diagnostics = validateListAuthoringDocument(this.buildCurrentDocument(), {
+                schemaFieldNames: this.fields,
+            });
+            const hasErrors = diagnostics.some((item) => item.level === 'error');
+            this.isValid$.next(!hasErrors && !this.queryError);
         });
     }
     // UI editor hydration already called in ctor
@@ -2684,10 +3488,10 @@ class PraxisListConfigEditor {
     inferFromFields() {
         if (!this.fields?.length)
             return;
-        const updated = inferTemplatingFromSchema(this.working, this.fields);
-        this.working = updated;
-        // Keep mapping controls in sync with new templating
-        this.hydrateMappingFromTemplating(this.working.templating);
+        const inferred = inferListAuthoringDocument(this.buildCurrentDocument(), {
+            schemaFieldNames: this.fields,
+        });
+        this.applyIncomingDocument(inferred);
         this.markDirty();
         this.verify();
     }
@@ -2826,7 +3630,7 @@ class PraxisListConfigEditor {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisListConfigEditor, deps: [{ token: SETTINGS_PANEL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: PraxisListConfigEditor, isStandalone: true, selector: "praxis-list-config-editor", inputs: { config: "config", listId: "listId" }, ngImport: i0, template: "<mat-tab-group class=\"list-editor-tabs\">\n  <mat-tab label=\"Dados\">\n    <div class=\"editor-content\">\n      <div class=\"g g-1-auto gap-8 ai-center\">\n        <div class=\"muted\">Observa\u00E7\u00E3o: ajustes aplicados pelo assistente substituem o objeto de configura\u00E7\u00E3o inteiro.\n        </div>\n        <button mat-icon-button type=\"button\" class=\"help-icon-button\"\n          matTooltip=\"O applyConfigFromAdapter n\u00E3o faz merge profundo. Garanta que o adapter envie a config completa.\">\n          <mat-icon>help_outline</mat-icon>\n        </button>\n      </div>\n      <mat-form-field appearance=\"outline\" class=\"w-full\">\n        <mat-label>Recurso (API)</mat-label>\n        <input matInput [(ngModel)]=\"working.dataSource.resourcePath\" (ngModelChange)=\"onResourcePathChange($event)\"\n          placeholder=\"ex.: users\" />\n        <button mat-icon-button matSuffix type=\"button\" class=\"help-icon-button\"\n          matTooltip=\"Endpoint do recurso (resourcePath).\">\n          <mat-icon>help_outline</mat-icon>\n        </button>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\" class=\"w-full\">\n        <mat-label>Query (JSON)</mat-label>\n        <textarea matInput rows=\"3\" [(ngModel)]=\"queryJson\" (ngModelChange)=\"onQueryChanged($event)\"\n          placeholder='ex.: &#123;\"status\":\"active\",\"department\":\"sales\"&#125;'></textarea>\n        <button mat-icon-button matSuffix type=\"button\" class=\"help-icon-button\"\n          matTooltip=\"Opcional. Use JSON v\u00E1lido para filtros iniciais.\" *ngIf=\"!queryError\">\n          <mat-icon>help_outline</mat-icon>\n        </button>\n        <mat-error *ngIf=\"queryError\">{{ queryError }}</mat-error>\n      </mat-form-field>\n      <div class=\"g g-auto-220 gap-12 ai-end mt-12\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Ordenar por</mat-label>\n          <mat-select [(ngModel)]=\"sortField\" (ngModelChange)=\"updateSortConfig()\">\n            <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{ f }}</mat-option>\n          </mat-select>\n          <button mat-icon-button matSuffix type=\"button\" class=\"help-icon-button\" matTooltip=\"Campo base do recurso.\">\n            <mat-icon>help_outline</mat-icon>\n          </button>\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Dire\u00E7\u00E3o</mat-label>\n          <mat-select [(ngModel)]=\"sortDir\" (ngModelChange)=\"updateSortConfig()\">\n            <mat-option value=\"asc\">Ascendente</mat-option>\n            <mat-option value=\"desc\">Descendente</mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n    </div>\n  </mat-tab>\n  <mat-tab label=\"A\u00E7\u00F5es\">\n    <div class=\"editor-content g gap-12\">\n      <div class=\"g g-1-auto gap-8 ai-center\">\n        <div class=\"muted\">Configure bot\u00F5es de a\u00E7\u00E3o por item (\u00EDcone, r\u00F3tulo, cor, visibilidade)</div>\n        <button mat-flat-button color=\"primary\" (click)=\"addAction()\">Adicionar a\u00E7\u00E3o</button>\n      </div>\n      <div class=\"g g-1-auto gap-8 ai-center\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>A\u00E7\u00E3o global (Praxis)</mat-label>\n          <mat-select [(ngModel)]=\"selectedGlobalActionId\" (ngModelChange)=\"onGlobalActionSelected($event)\">\n            <mat-option [value]=\"undefined\">-- Selecionar --</mat-option>\n            <mat-option *ngFor=\"let ga of globalActionCatalog\" [value]=\"ga.id\">\n              <mat-icon class=\"option-icon\">{{ ga.icon || 'bolt' }}</mat-icon>\n              {{ ga.label }}\n            </mat-option>\n          </mat-select>\n          <mat-hint *ngIf=\"!globalActionCatalog.length\" class=\"text-caption muted\">Nenhuma a\u00E7\u00E3o global registrada.</mat-hint>\n        </mat-form-field>\n        <div class=\"muted text-caption\">Selecione para adicionar com `command` global.</div>\n      </div>\n      <div *ngFor=\"let a of (working.actions || []); let i = index\" class=\"g g-auto-200 gap-12 ai-end\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>ID</mat-label>\n          <input matInput [(ngModel)]=\"a.id\" (ngModelChange)=\"onActionsChanged()\" />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Tipo de a\u00E7\u00E3o</mat-label>\n          <mat-select [(ngModel)]=\"a.kind\" (ngModelChange)=\"onActionsChanged()\">\n            <mat-option value=\"icon\">\u00CDcone</mat-option>\n            <mat-option value=\"button\">Bot\u00E3o</mat-option>\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>\u00CDcone</mat-label>\n          <input matInput [(ngModel)]=\"a.icon\" (ngModelChange)=\"onActionsChanged()\" placeholder=\"ex.: edit, delete\" />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Command (global)</mat-label>\n          <input matInput [(ngModel)]=\"a.command\" (ngModelChange)=\"onActionsChanged()\" placeholder=\"global:toast.success\" />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>R\u00F3tulo</mat-label>\n          <input matInput [(ngModel)]=\"a.label\" (ngModelChange)=\"onActionsChanged()\" />\n        </mat-form-field>\n        <ng-container *ngIf=\"a.kind === 'button'\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Variante</mat-label>\n            <mat-select [(ngModel)]=\"a.buttonVariant\" (ngModelChange)=\"onActionsChanged()\">\n              <mat-option value=\"stroked\">Contorno</mat-option>\n              <mat-option value=\"raised\">Elevado</mat-option>\n              <mat-option value=\"flat\">Preenchido</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </ng-container>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Cor da a\u00E7\u00E3o</mat-label>\n          <mat-select [(ngModel)]=\"a.color\" (ngModelChange)=\"onActionsChanged()\">\n            <mat-option *ngFor=\"let c of paletteOptions\" [value]=\"c.value\">\n              <span class=\"color-dot\" [style.background]=\"colorDotBackground(c.value)\"></span>{{ c.label }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n        <div class=\"g gap-8\" *ngIf=\"isCustomColor(a.color); else actionCustomBtn\">\n          <pdx-color-picker label=\"Cor personalizada\" [format]=\"'hex'\" [(ngModel)]=\"a.color\"\n            (ngModelChange)=\"onActionsChanged()\"></pdx-color-picker>\n        </div>\n        <ng-template #actionCustomBtn>\n          <button mat-stroked-button type=\"button\" (click)=\"enableCustomActionColor(a)\">Usar cor personalizada</button>\n        </ng-template>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Payload da a\u00E7\u00E3o</mat-label>\n          <mat-select [(ngModel)]=\"a.emitPayload\" (ngModelChange)=\"onActionsChanged()\">\n            <mat-option [value]=\"undefined\">Padr\u00E3o</mat-option>\n            <mat-option value=\"item\">item</mat-option>\n            <mat-option value=\"id\">id</mat-option>\n            <mat-option value=\"value\">value</mat-option>\n          </mat-select>\n          <button mat-icon-button matSuffix type=\"button\" class=\"help-icon-button\" matTooltip=\"emitPayload\">\n            <mat-icon>help_outline</mat-icon>\n          </button>\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\" class=\"col-span-2\">\n          <mat-label>Exibir quando (ex.: &#36;&#123;item.status&#125; == 'done')</mat-label>\n          <input matInput [(ngModel)]=\"a.showIf\" (ngModelChange)=\"onActionsChanged()\" />\n          <button mat-icon-button matSuffix type=\"button\" class=\"help-icon-button\"\n            matTooltip=\"Sintaxe suportada: &#34;&#36;{item.campo} == &#39;valor&#39;&#34;. Express\u00F5es avan\u00E7adas n\u00E3o s\u00E3o avaliadas.\">\n            <mat-icon>help_outline</mat-icon>\n          </button>\n        </mat-form-field>\n        <div class=\"g row-flow gap-8 ai-center\">\n          <button *ngIf=\"(a.kind || 'icon') === 'icon'\" mat-icon-button\n            [color]=\"isThemeColor(a.color) ? a.color : undefined\"><mat-icon\n              [praxisIcon]=\"a.icon || 'bolt'\" [style.cssText]=\"iconStyle(a.color)\"></mat-icon></button>\n          <ng-container *ngIf=\"a.kind === 'button'\">\n            <button *ngIf=\"a.buttonVariant === 'stroked'\" mat-stroked-button\n              [color]=\"isThemeColor(a.color) ? a.color : undefined\" [style.cssText]=\"buttonStyle(a.color, 'stroked')\">{{ a.label\n              || a.id || 'A\u00E7\u00E3o' }}</button>\n            <button *ngIf=\"a.buttonVariant === 'raised'\" mat-raised-button\n              [color]=\"isThemeColor(a.color) ? a.color : undefined\" [style.cssText]=\"buttonStyle(a.color, 'raised')\">{{ a.label ||\n              a.id || 'A\u00E7\u00E3o' }}</button>\n            <button *ngIf=\"!a.buttonVariant || a.buttonVariant === 'flat'\" mat-flat-button\n              [color]=\"isThemeColor(a.color) ? a.color : undefined\" [style.cssText]=\"buttonStyle(a.color, 'flat')\">{{ a.label || a.id || 'A\u00E7\u00E3o' }}</button>\n          </ng-container>\n          <span class=\"muted\">Pr\u00E9-visualiza\u00E7\u00E3o</span>\n        </div>\n        <div class=\"flex-end\">\n          <button mat-button color=\"warn\" (click)=\"removeAction(i)\">Remover</button>\n        </div>\n        <div class=\"g gap-8 col-span-2\" *ngIf=\"a.command\">\n          <mat-slide-toggle [(ngModel)]=\"a.showLoading\" (ngModelChange)=\"onActionsChanged()\">Mostrar loading</mat-slide-toggle>\n          <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n            <mat-expansion-panel-header><mat-panel-title>Confirma\u00E7\u00E3o</mat-panel-title></mat-expansion-panel-header>\n            <div class=\"g gap-12 pt-12\">\n              <div class=\"g row-flow gap-8 ai-center\">\n                <span class=\"text-caption muted\">Tipo</span>\n                <mat-button-toggle-group [value]=\"a.confirmation?.type || ''\" (change)=\"applyConfirmationPreset(a, $event.value)\">\n                  <mat-button-toggle value=\"\">Padr\u00E3o</mat-button-toggle>\n                  <mat-button-toggle value=\"danger\">Danger</mat-button-toggle>\n                  <mat-button-toggle value=\"warning\">Warning</mat-button-toggle>\n                  <mat-button-toggle value=\"info\">Info</mat-button-toggle>\n                </mat-button-toggle-group>\n              </div>\n              <mat-form-field appearance=\"outline\">\n                <mat-label>T\u00EDtulo</mat-label>\n                <input matInput [ngModel]=\"a.confirmation?.title\" (ngModelChange)=\"setConfirmationField(a, 'title', $event)\" />\n              </mat-form-field>\n              <mat-form-field appearance=\"outline\">\n                <mat-label>Mensagem</mat-label>\n                <input matInput [ngModel]=\"a.confirmation?.message\" (ngModelChange)=\"setConfirmationField(a, 'message', $event)\" />\n              </mat-form-field>\n              <div class=\"g gap-6\">\n                <div class=\"text-caption muted\">Pr\u00E9via</div>\n                <div class=\"text-caption\">\n                  <strong>{{ a.confirmation?.title || 'Confirmar a\u00E7\u00E3o' }}</strong>\n                </div>\n                <div class=\"text-caption muted\">{{ a.confirmation?.message || 'Tem certeza que deseja continuar?' }}</div>\n                <div class=\"text-caption\">\n                  <span class=\"confirm-type\" [ngClass]=\"(a.confirmation?.type || 'default')\">Tipo: {{ a.confirmation?.type || 'padr\u00E3o' }}</span>\n                </div>\n                <div class=\"text-caption muted\" *ngIf=\"!a.confirmation?.title && !a.confirmation?.message\">\n                  Defina um t\u00EDtulo ou mensagem para a confirma\u00E7\u00E3o.\n                </div>\n              </div>\n            </div>\n          </mat-expansion-panel>\n          <mat-form-field appearance=\"outline\" class=\"col-span-2\">\n            <mat-label>Payload (JSON/Template)</mat-label>\n            <textarea matInput rows=\"4\" [(ngModel)]=\"a.globalPayload\" (ngModelChange)=\"onActionsChanged()\"\n              placeholder='{\"message\":\"${item.name} favoritado\"}'></textarea>\n            <button mat-icon-button matSuffix type=\"button\" class=\"help-icon-button\"\n              [matTooltip]=\"globalPayloadSchemaTooltip(a)\">\n              <mat-icon>help_outline</mat-icon>\n            </button>\n            <mat-error *ngIf=\"isGlobalPayloadInvalid(a.globalPayload)\">JSON inv\u00E1lido</mat-error>\n          </mat-form-field>\n          <div class=\"g row-flow gap-8 ai-center\">\n            <button mat-stroked-button type=\"button\" (click)=\"applyGlobalPayloadExample(a)\">Inserir exemplo</button>\n            <span class=\"muted text-caption\">{{ globalPayloadExampleHint(a) }}</span>\n          </div>\n          <mat-slide-toggle [(ngModel)]=\"a.emitLocal\" (ngModelChange)=\"onActionsChanged()\">Emitir evento local tamb\u00E9m</mat-slide-toggle>\n        </div>\n      </div>\n    </div>\n  </mat-tab>\n  <mat-tab label=\"Layout\">\n    <div class=\"editor-content grid gap-3\">\n      <div class=\"preset-row g row-flow gap-8\">\n        <button mat-stroked-button (click)=\"applyLayoutPreset('tiles-modern')\">Preset Tiles Moderno</button>\n      </div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Variante</mat-label>\n        <mat-select [(ngModel)]=\"working.layout.variant\" (ngModelChange)=\"onLayoutChanged()\">\n          <mat-option value=\"list\">Lista</mat-option>\n          <mat-option value=\"cards\">Cards</mat-option>\n          <mat-option value=\"tiles\">Tiles</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Modelo</mat-label>\n        <mat-select [(ngModel)]=\"working.layout.model\" (ngModelChange)=\"onLayoutChanged()\">\n          <ng-container *ngIf=\"working.layout.variant === 'list'; else cardModels\">\n            <mat-option value=\"standard\">Padr\u00E3o</mat-option>\n            <mat-option value=\"media\">M\u00EDdia \u00E0 esquerda</mat-option>\n            <mat-option value=\"hotel\">Hotel (m\u00EDdia grande)</mat-option>\n          </ng-container>\n          <ng-template #cardModels>\n            <ng-container *ngIf=\"working.layout.variant === 'tiles'; else cardsOnly\">\n              <mat-option value=\"standard\">Tile padr\u00E3o</mat-option>\n              <mat-option value=\"media\">Tile com m\u00EDdia</mat-option>\n              <mat-option value=\"hotel\">Tile hotel</mat-option>\n            </ng-container>\n            <ng-template #cardsOnly>\n              <mat-option value=\"standard\">Padr\u00E3o</mat-option>\n              <mat-option value=\"media\">Card com m\u00EDdia</mat-option>\n              <mat-option value=\"hotel\">Hotel</mat-option>\n            </ng-template>\n          </ng-template>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Linhas</mat-label>\n        <mat-select [(ngModel)]=\"working.layout.lines\" (ngModelChange)=\"onLayoutChanged()\">\n          <mat-option [value]=\"1\">1</mat-option>\n          <mat-option [value]=\"2\">2</mat-option>\n          <mat-option [value]=\"3\">3</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Itens por p\u00E1gina</mat-label>\n        <input matInput type=\"number\" min=\"1\" [(ngModel)]=\"working.layout.pageSize\"\n          (ngModelChange)=\"onPageSizeChange($event)\" />\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Densidade</mat-label>\n        <mat-select [(ngModel)]=\"working.layout.density\" (ngModelChange)=\"onLayoutChanged()\">\n          <mat-option value=\"default\">Padr\u00E3o</mat-option>\n          <mat-option value=\"comfortable\">Confort\u00E1vel</mat-option>\n          <mat-option value=\"compact\">Compacta</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\" *ngIf=\"working.layout.variant !== 'tiles'\">\n        <mat-label>Divisores</mat-label>\n        <mat-select [(ngModel)]=\"working.layout.dividers\" (ngModelChange)=\"onLayoutChanged()\">\n          <mat-option value=\"none\">Sem</mat-option>\n          <mat-option value=\"between\">Entre grupos</mat-option>\n          <mat-option value=\"all\">Todos</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <ng-container *ngIf=\"fields.length > 0; else groupByText\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Agrupar por</mat-label>\n          <mat-select [(ngModel)]=\"working.layout.groupBy\" (ngModelChange)=\"onLayoutChanged()\">\n            <mat-option [value]=\"\">Nenhum</mat-option>\n            <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{ f }}</mat-option>\n          </mat-select>\n        </mat-form-field>\n      </ng-container>\n      <ng-template #groupByText>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Agrupar por</mat-label>\n          <input matInput [(ngModel)]=\"working.layout.groupBy\" (ngModelChange)=\"onLayoutChanged()\"\n            placeholder=\"ex.: departamento\" />\n        </mat-form-field>\n      </ng-template>\n      <mat-slide-toggle [(ngModel)]=\"working.layout.stickySectionHeader\" (ngModelChange)=\"onLayoutChanged()\">\n        Header de se\u00E7\u00E3o fixo\n      </mat-slide-toggle>\n      <mat-slide-toggle [(ngModel)]=\"working.layout.virtualScroll\" (ngModelChange)=\"onLayoutChanged()\">\n        Scroll virtual\n      </mat-slide-toggle>\n      <mat-divider class=\"my-8\"></mat-divider>\n      <div class=\"subtitle\">Ferramentas da lista</div>\n      <div class=\"g g-auto-220 gap-12 ai-end\">\n        <mat-slide-toggle [(ngModel)]=\"working.ui.showSearch\" (ngModelChange)=\"onUiChanged()\">Mostrar\n          busca</mat-slide-toggle>\n        <mat-slide-toggle [(ngModel)]=\"working.ui.showSort\" (ngModelChange)=\"onUiChanged()\">Mostrar\n          ordenar</mat-slide-toggle>\n        <mat-slide-toggle [(ngModel)]=\"working.ui.showRange\" (ngModelChange)=\"onUiChanged()\">Mostrar faixa X\u2013Y de\n          Total</mat-slide-toggle>\n      </div>\n      <div class=\"g g-auto-220 gap-12 ai-end mt-12\" *ngIf=\"working.ui?.showSearch\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Campo para buscar</mat-label>\n          <mat-select [(ngModel)]=\"working.ui.searchField\" (ngModelChange)=\"onUiChanged()\">\n            <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{ f }}</mat-option>\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Placeholder da busca</mat-label>\n          <input matInput [(ngModel)]=\"working.ui.searchPlaceholder\" (ngModelChange)=\"onUiChanged()\"\n            placeholder=\"ex.: Buscar por t\u00EDtulo\" />\n        </mat-form-field>\n      </div>\n      <div class=\"mt-12\" *ngIf=\"working.ui?.showSort\">\n        <div class=\"g g-1-auto ai-center gap-8\">\n          <div class=\"muted\">Op\u00E7\u00F5es de ordena\u00E7\u00E3o (r\u00F3tulo \u2192 campo+dire\u00E7\u00E3o)</div>\n          <button mat-flat-button color=\"primary\" (click)=\"addUiSortRow()\">Adicionar op\u00E7\u00E3o</button>\n        </div>\n        <div class=\"g g-auto-220 gap-12 ai-end mt-12\" *ngFor=\"let r of uiSortRows; let i = index\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>R\u00F3tulo</mat-label>\n            <input matInput [(ngModel)]=\"r.label\" (ngModelChange)=\"onUiSortRowsChanged()\"\n              placeholder=\"ex.: Mais recentes\" />\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Campo</mat-label>\n            <mat-select [(ngModel)]=\"r.field\" (ngModelChange)=\"onUiSortRowsChanged()\">\n              <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{ f }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Dire\u00E7\u00E3o</mat-label>\n            <mat-select [(ngModel)]=\"r.dir\" (ngModelChange)=\"onUiSortRowsChanged()\">\n              <mat-option value=\"desc\">Descendente</mat-option>\n              <mat-option value=\"asc\">Ascendente</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <div class=\"error\" *ngIf=\"isUiSortRowDuplicate(i)\">Op\u00E7\u00E3o duplicada (campo+dire\u00E7\u00E3o)</div>\n          <div class=\"flex-end\"><button mat-button color=\"warn\" (click)=\"removeUiSortRow(i)\">Remover</button></div>\n        </div>\n      </div>\n    </div>\n  </mat-tab>\n  <mat-tab label=\"Conte\u00FAdo\">\n    <div class=\"editor-content\">\n      <div class=\"editor-main\">\n        <mat-accordion multi>\n          <!-- Primary -->\n          <mat-expansion-panel [expanded]=\"true\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>{{ getTypeIcon(mappingPrimary.type) }}</mat-icon>\n                  <span>Primary (T\u00EDtulo)</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{ mappingPrimary.field || 'N\u00E3o mapeado' }}</mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"g gap-12\">\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">Presets</span>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingPrimary.type='text'; mappingPrimary.field='name'; onMappingChanged()\">Nome</button>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingPrimary.type='text'; mappingPrimary.field='title'; onMappingChanged()\">T\u00EDtulo</button>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingPrimary.type='text'; mappingPrimary.field='name'; mappingSecondary.type='text'; mappingSecondary.field='role'; onMappingChanged()\">Nome + Papel</button>\n              </div>\n              <div class=\"g g-1-1 gap-12\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Campo</mat-label>\n                  <mat-select [(ngModel)]=\"mappingPrimary.field\" (ngModelChange)=\"onMappingChanged()\">\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{ f }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Tipo</mat-label>\n                  <mat-select [(ngModel)]=\"mappingPrimary.type\" (ngModelChange)=\"onMappingChanged()\">\n                    <mat-option *ngFor=\"let mt of primaryTypeConfigs\" [value]=\"mt.type\">\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ mt.label }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n\n              @switch (mappingPrimary.type) {\n                @case ('text') { <praxis-meta-editor-text [model]=\"mappingPrimary\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('html') { <praxis-meta-editor-text [model]=\"mappingPrimary\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('currency') { <praxis-meta-editor-currency [model]=\"mappingPrimary\" (change)=\"onMappingChanged()\"></praxis-meta-editor-currency> }\n                @case ('date') { <praxis-meta-editor-date [model]=\"mappingPrimary\" (change)=\"onMappingChanged()\"></praxis-meta-editor-date> }\n              }\n\n              <!-- Advanced -->\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header>\n                  <mat-panel-title>Formata\u00E7\u00E3o e Estilo</mat-panel-title>\n                </mat-expansion-panel-header>\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field appearance=\"outline\" *ngIf=\"mappingPrimary.type==='text' || mappingPrimary.type==='html'\">\n                    <mat-label>Classe CSS</mat-label>\n                    <input matInput [(ngModel)]=\"mappingPrimary.class\" (ngModelChange)=\"onMappingChanged()\" />\n                  </mat-form-field>\n                  <mat-form-field appearance=\"outline\" *ngIf=\"mappingPrimary.type==='text' || mappingPrimary.type==='html'\">\n                    <mat-label>Estilo Inline</mat-label>\n                    <input matInput [(ngModel)]=\"mappingPrimary.style\" (ngModelChange)=\"onMappingChanged()\" />\n                  </mat-form-field>\n                  <div class=\"g g-1-1 gap-12\">\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>Classe CSS</mat-label>\n                      <input matInput [(ngModel)]=\"mappingPrimary.class\" (ngModelChange)=\"onMappingChanged()\" />\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>Estilo Inline</mat-label>\n                      <input matInput [(ngModel)]=\"mappingPrimary.style\" (ngModelChange)=\"onMappingChanged()\" />\n                    </mat-form-field>\n                  </div>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n\n          <!-- Secondary -->\n          <mat-expansion-panel [expanded]=\"!!mappingSecondary.field\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>{{ getTypeIcon(mappingSecondary.type) }}</mat-icon>\n                  <span>Secondary (Resumo)</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{ mappingSecondary.field || 'N\u00E3o mapeado' }}</mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"g gap-12\">\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">Presets</span>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingSecondary.type='text'; mappingSecondary.field='subtitle'; onMappingChanged()\">Subt\u00EDtulo</button>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingSecondary.type='date'; mappingSecondary.field='hireDate'; mappingSecondary.dateStyle='short'; onMappingChanged()\">Data curta</button>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingSecondary.type='currency'; mappingSecondary.field='salary'; mappingSecondary.currencyCode='BRL'; mappingSecondary.locale='pt-BR'; onMappingChanged()\">Sal\u00E1rio</button>\n              </div>\n              <div class=\"g g-1-1 gap-12\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Campo</mat-label>\n                  <mat-select [(ngModel)]=\"mappingSecondary.field\" (ngModelChange)=\"onMappingChanged()\">\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{ f }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Tipo</mat-label>\n                  <mat-select [(ngModel)]=\"mappingSecondary.type\" (ngModelChange)=\"onMappingChanged()\">\n                    <mat-option *ngFor=\"let mt of secondaryTypeConfigs\" [value]=\"mt.type\">\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ mt.label }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n\n              @switch (mappingSecondary.type) {\n                @case ('text') { <praxis-meta-editor-text [model]=\"mappingSecondary\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('html') { <praxis-meta-editor-text [model]=\"mappingSecondary\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('currency') { <praxis-meta-editor-currency [model]=\"mappingSecondary\" (change)=\"onMappingChanged()\"></praxis-meta-editor-currency> }\n                @case ('date') { <praxis-meta-editor-date [model]=\"mappingSecondary\" (change)=\"onMappingChanged()\"></praxis-meta-editor-date> }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header>\n                  <mat-panel-title>Formata\u00E7\u00E3o e Estilo</mat-panel-title>\n                </mat-expansion-panel-header>\n                <div class=\"g gap-12 pt-12\">\n                  <div class=\"g g-1-1 gap-12\">\n                    <mat-form-field appearance=\"outline\"><mat-label>Classe CSS</mat-label><input matInput\n                        [(ngModel)]=\"mappingSecondary.class\" (ngModelChange)=\"onMappingChanged()\" /></mat-form-field>\n                    <mat-form-field appearance=\"outline\"><mat-label>Estilo Inline</mat-label><input matInput\n                        [(ngModel)]=\"mappingSecondary.style\" (ngModelChange)=\"onMappingChanged()\" /></mat-form-field>\n                  </div>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n\n          <mat-expansion-panel [expanded]=\"!!mappingMeta.field || mappingMetaFields.length > 0\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>{{ getTypeIcon(mappingMeta.type || 'text') }}</mat-icon>\n                  <span>Meta (Detalhe/Lateral)</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>\n                {{ mappingMetaFields.length ? 'Campo composto (' + mappingMetaFields.length + ')' :\n                (mappingMeta.field || 'N\u00E3o mapeado') }}\n              </mat-panel-description>\n            </mat-expansion-panel-header>\n\n            <div class=\"g gap-12\">\n              <!-- Composition Mode Toggle -->\n              <div class=\"g g-1-1 gap-12 p-12 bg-subtle rounded\">\n                <div class=\"text-caption muted\">Modo de composi\u00E7\u00E3o</div>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Campos para compor (Multi-select)</mat-label>\n                  <mat-select [(ngModel)]=\"mappingMetaFields\" multiple (ngModelChange)=\"onMappingChanged()\">\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{ f }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <div class=\"g g-1-1 ai-center gap-12\" *ngIf=\"mappingMetaFields.length\">\n                  <mat-form-field appearance=\"outline\">\n                    <mat-label>Separador</mat-label>\n                    <input matInput [(ngModel)]=\"mappingMetaSeparator\" (ngModelChange)=\"onMappingChanged()\" />\n                  </mat-form-field>\n                  <mat-slide-toggle [(ngModel)]=\"mappingMetaWrapSecondInParens\" (ngModelChange)=\"onMappingChanged()\">\n                    (Seg) entre par\u00EAnteses\n                  </mat-slide-toggle>\n                </div>\n              </div>\n\n              <!-- Single Field Mode (if no composition) -->\n              <div class=\"g g-1-1 gap-12\" *ngIf=\"!mappingMetaFields.length\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Campo \u00DAnico</mat-label>\n                  <mat-select [(ngModel)]=\"mappingMeta.field\" (ngModelChange)=\"onMappingChanged()\">\n                    <mat-option [value]=\"undefined\">-- Nenhum --</mat-option>\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{ f }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Tipo</mat-label>\n                  <mat-select [(ngModel)]=\"mappingMeta.type\" (ngModelChange)=\"onMappingChanged()\">\n                    <mat-option *ngFor=\"let mt of metaTypeConfigs\" [value]=\"mt.type\">\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ mt.label }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n\n              <!-- Type configuration (pluggable editors) -->\n              @switch (mappingMeta.type) {\n                @case ('text') { <praxis-meta-editor-text [model]=\"mappingMeta\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('html') { <praxis-meta-editor-text [model]=\"mappingMeta\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('currency') { <praxis-meta-editor-currency [model]=\"mappingMeta\" (change)=\"onMappingChanged()\"></praxis-meta-editor-currency> }\n                @case ('date') { <praxis-meta-editor-date [model]=\"mappingMeta\" (change)=\"onMappingChanged()\"></praxis-meta-editor-date> }\n                @case ('chip') {\n                  <praxis-meta-editor-chip\n                    [model]=\"mappingMeta\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-chip>\n                }\n                @case ('rating') {\n                  <praxis-meta-editor-rating\n                    [model]=\"mappingMeta\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-rating>\n                }\n                @case ('icon') {\n                  <praxis-meta-editor-icon\n                    [model]=\"mappingMeta\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-icon>\n                }\n                @case ('image') { <praxis-meta-editor-image [model]=\"mappingMeta\" (change)=\"onMappingChanged()\"></praxis-meta-editor-image> }\n              }\n\n              <!-- Advanced -->\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header><mat-panel-title>Op\u00E7\u00F5es\n                    avan\u00E7adas</mat-panel-title></mat-expansion-panel-header>\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field appearance=\"outline\">\n                    <mat-label>Posi\u00E7\u00E3o</mat-label>\n                    <mat-select [(ngModel)]=\"mappingMeta.placement\" (ngModelChange)=\"onMappingChanged()\">\n                      <mat-option value=\"side\">Lateral (Direita)</mat-option>\n                      <mat-option value=\"line\">Na linha (Abaixo)</mat-option>\n                    </mat-select>\n                  </mat-form-field>\n                  <mat-form-field appearance=\"outline\">\n                    <mat-label>Classe CSS</mat-label>\n                    <input matInput [(ngModel)]=\"mappingMeta.class\" (ngModelChange)=\"onMappingChanged()\" />\n                  </mat-form-field>\n                  <mat-form-field appearance=\"outline\">\n                    <mat-label>Estilo</mat-label>\n                    <input matInput [(ngModel)]=\"mappingMeta.style\" (ngModelChange)=\"onMappingChanged()\" />\n                  </mat-form-field>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n          <!-- Trailing -->\n          <mat-expansion-panel [expanded]=\"!!mappingTrailing.field\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>{{ getTypeIcon(mappingTrailing.type || 'text') }}</mat-icon>\n                  <span>Trailing (Direita)</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{ mappingTrailing.field || 'N\u00E3o mapeado'\n                }}</mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"g gap-12\">\n              <div class=\"g g-1-1 gap-12\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Campo</mat-label>\n                  <mat-select [(ngModel)]=\"mappingTrailing.field\" (ngModelChange)=\"onMappingChanged()\">\n                    <mat-option [value]=\"undefined\">-- Nenhum --</mat-option>\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{ f }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Tipo</mat-label>\n                  <mat-select [(ngModel)]=\"mappingTrailing.type\" (ngModelChange)=\"onMappingChanged()\">\n                    <mat-option *ngFor=\"let mt of trailingTypeConfigs\" [value]=\"mt.type\">\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ mt.label }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">Presets</span>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingTrailing.type='chip'; mappingTrailing.chipColor='primary'; mappingTrailing.chipVariant='filled'; mappingTrailing.field='status'; onMappingChanged()\">Status Chip</button>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingTrailing.type='icon'; mappingTrailing.field='status'; mappingTrailing.iconColor='primary'; onMappingChanged()\">Status \u00CDcone</button>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingTrailing.type='currency'; mappingTrailing.field='price'; mappingTrailing.currencyCode='BRL'; mappingTrailing.locale='pt-BR'; onMappingChanged()\">Pre\u00E7o</button>\n              </div>\n\n              @switch (mappingTrailing.type) {\n                @case ('text') { <praxis-meta-editor-text [model]=\"mappingTrailing\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('html') { <praxis-meta-editor-text [model]=\"mappingTrailing\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('currency') { <praxis-meta-editor-currency [model]=\"mappingTrailing\" (change)=\"onMappingChanged()\"></praxis-meta-editor-currency> }\n                @case ('date') { <praxis-meta-editor-date [model]=\"mappingTrailing\" (change)=\"onMappingChanged()\"></praxis-meta-editor-date> }\n                @case ('chip') {\n                  <praxis-meta-editor-chip\n                    [model]=\"mappingTrailing\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-chip>\n                }\n                @case ('rating') {\n                  <praxis-meta-editor-rating\n                    [model]=\"mappingTrailing\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-rating>\n                }\n                @case ('icon') {\n                  <praxis-meta-editor-icon\n                    [model]=\"mappingTrailing\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-icon>\n                }\n                @case ('image') {\n                  <div class=\"g g-1-1 gap-12\">\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>URL / Expr</mat-label>\n                      <input matInput [(ngModel)]=\"mappingTrailing.imageUrl\" (ngModelChange)=\"onMappingChanged()\"\n                        placeholder=\"https://... ou ${item.imageUrl}\" />\n                      <button mat-icon-button matSuffix type=\"button\" class=\"help-icon-button\"\n                        matTooltip=\"Use URL absoluta/relativa ou express\u00E3o ${item.campo}.\">\n                        <mat-icon>help_outline</mat-icon>\n                      </button>\n                      <mat-error *ngIf=\"isImageUrlRequiredInvalid(mappingTrailing.imageUrl)\">URL/expr obrigat\u00F3ria</mat-error>\n                    </mat-form-field>\n                  </div>\n                  <praxis-meta-editor-image [model]=\"mappingTrailing\" (change)=\"onMappingChanged()\"></praxis-meta-editor-image>\n                  <div class=\"text-caption muted\" *ngIf=\"!mappingTrailing.imageUrl\">Defina a URL/expr para renderizar a imagem.</div>\n                }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header><mat-panel-title>Estilo</mat-panel-title></mat-expansion-panel-header>\n                <div class=\"g gap-12 pt-12\">\n                  <div class=\"g g-1-1 gap-12\">\n                    <mat-form-field appearance=\"outline\"><mat-label>Classe</mat-label><input matInput\n                        [(ngModel)]=\"mappingTrailing.class\" (ngModelChange)=\"onMappingChanged()\" /></mat-form-field>\n                    <mat-form-field appearance=\"outline\"><mat-label>Style</mat-label><input matInput\n                        [(ngModel)]=\"mappingTrailing.style\" (ngModelChange)=\"onMappingChanged()\" /></mat-form-field>\n                  </div>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n\n          <!-- Leading -->\n          <mat-expansion-panel\n            [expanded]=\"!!mappingLeading.field || (mappingLeading.type === 'icon' && !!mappingLeading.icon) || (mappingLeading.type === 'image' && !!mappingLeading.imageUrl)\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>{{ getTypeIcon(mappingLeading.type) }}</mat-icon>\n                  <span>Leading (Esquerda)</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>\n                {{ mappingLeading.type === 'icon' ? (mappingLeading.icon || '\u00CDcone est\u00E1tico') :\n                (mappingLeading.field || (mappingLeading.imageUrl ? 'Imagem est\u00E1tica' : 'N\u00E3o mapeado'))\n                }}\n              </mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"g gap-12\">\n              <div class=\"g g-1-1 gap-12\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Tipo</mat-label>\n                  <mat-select [(ngModel)]=\"mappingLeading.type\" (ngModelChange)=\"onMappingChanged()\">\n                    <mat-option *ngFor=\"let mt of leadingTypeConfigs\" [value]=\"mt.type\">\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ mt.label }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <!-- Field (only if not static icon/image, though user might want dynamic) -->\n                <mat-form-field appearance=\"outline\"\n                  *ngIf=\"mappingLeading.type !== 'icon' && mappingLeading.type !== 'image'\">\n                  <mat-label>Campo</mat-label>\n                  <mat-select [(ngModel)]=\"mappingLeading.field\" (ngModelChange)=\"onMappingChanged()\">\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{ f }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">Presets</span>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingLeading.type='icon'; mappingLeading.icon='person'; mappingLeading.iconColor='primary'; onMappingChanged()\">Avatar \u00CDcone</button>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingLeading.type='image'; mappingLeading.imageUrl='https://placehold.co/64x64'; mappingLeading.imageAlt='Avatar'; mappingLeading.badgeText='${item.status}'; onMappingChanged()\">Avatar Imagem + Badge</button>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingLeading.type='chip'; mappingLeading.field='tag'; mappingLeading.chipColor='accent'; mappingLeading.chipVariant='filled'; onMappingChanged()\">Chip Tag</button>\n              </div>\n\n              <!-- Icon Specific -->\n              <div class=\"g g-1-auto gap-12 ai-center\" *ngIf=\"mappingLeading.type === 'icon'\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>\u00CDcone</mat-label>\n                  <input matInput [(ngModel)]=\"mappingLeading.icon\" (ngModelChange)=\"onMappingChanged()\" />\n                  <button mat-icon-button matSuffix (click)=\"pickLeadingIcon()\"><mat-icon>search</mat-icon></button>\n                </mat-form-field>\n                <div class=\"text-caption muted\">Use pipe <code>|iconMap</code> no extra pipe para\n                  din\u00E2mico</div>\n              </div>\n              <div *ngIf=\"mappingLeading.type === 'icon'\">\n                <praxis-meta-editor-icon\n                  [model]=\"mappingLeading\"\n                  [paletteOptions]=\"paletteOptions\"\n                  [colorDotBackground]=\"colorDotBackground\"\n                  [isCustomColor]=\"isCustomColor\"\n                  [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                  (change)=\"onMappingChanged()\"></praxis-meta-editor-icon>\n              </div>\n\n              <!-- Image Specific -->\n              <div class=\"g g-1-1 gap-12\" *ngIf=\"mappingLeading.type === 'image'\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>URL da Imagem</mat-label>\n                  <input matInput [(ngModel)]=\"mappingLeading.imageUrl\" (ngModelChange)=\"onMappingChanged()\"\n                    placeholder=\"https://... ou ${item.imageUrl}\" />\n                  <button mat-icon-button matSuffix type=\"button\" class=\"help-icon-button\"\n                    matTooltip=\"Use URL absoluta/relativa ou express\u00E3o ${item.campo}.\">\n                    <mat-icon>help_outline</mat-icon>\n                  </button>\n                  <mat-error *ngIf=\"isImageUrlRequiredInvalid(mappingLeading.imageUrl)\">URL/expr obrigat\u00F3ria</mat-error>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Alt Text</mat-label>\n                  <input matInput [(ngModel)]=\"mappingLeading.imageAlt\" (ngModelChange)=\"onMappingChanged()\" />\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Badge Texto</mat-label>\n                  <input matInput [(ngModel)]=\"mappingLeading.badgeText\" (ngModelChange)=\"onMappingChanged()\" />\n                </mat-form-field>\n              </div>\n\n              @switch (mappingLeading.type) {\n                @case ('text') { <praxis-meta-editor-text [model]=\"mappingLeading\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('html') { <praxis-meta-editor-text [model]=\"mappingLeading\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('chip') {\n                  <praxis-meta-editor-chip\n                    [model]=\"mappingLeading\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-chip>\n                }\n                @case ('rating') {\n                  <praxis-meta-editor-rating\n                    [model]=\"mappingLeading\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-rating>\n                }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header><mat-panel-title>Estilo</mat-panel-title></mat-expansion-panel-header>\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field appearance=\"outline\"><mat-label>Classe</mat-label><input matInput\n                      [(ngModel)]=\"mappingLeading.class\" (ngModelChange)=\"onMappingChanged()\" /></mat-form-field>\n                  <mat-form-field appearance=\"outline\"><mat-label>Style</mat-label><input matInput\n                      [(ngModel)]=\"mappingLeading.style\" (ngModelChange)=\"onMappingChanged()\" /></mat-form-field>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n\n          <!-- Features -->\n          <mat-expansion-panel [expanded]=\"featuresVisible && features.length > 0\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>view_list</mat-icon>\n                  <span>Recursos (Features)</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{ features.length }} item(s)</mat-panel-description>\n            </mat-expansion-panel-header>\n\n            <div class=\"g gap-12\">\n              <div class=\"g row-flow gap-12 ai-center\">\n                <mat-slide-toggle [(ngModel)]=\"featuresVisible\" (ngModelChange)=\"onFeaturesChanged()\">Ativar\n                  recursos</mat-slide-toggle>\n                <mat-slide-toggle [(ngModel)]=\"featuresSyncWithMeta\" (ngModelChange)=\"onMappingChanged()\">Sincronizar\n                  com Meta</mat-slide-toggle>\n                <span class=\"flex-1\"></span>\n                <mat-button-toggle-group [(ngModel)]=\"featuresMode\" (change)=\"onFeaturesChanged()\" appearance=\"legacy\">\n                  <mat-button-toggle value=\"icons+labels\"><mat-icon>view_list</mat-icon></mat-button-toggle>\n                  <mat-button-toggle value=\"icons-only\"><mat-icon>more_horiz</mat-icon></mat-button-toggle>\n                </mat-button-toggle-group>\n              </div>\n\n              <div *ngFor=\"let f of features; let i = index\" class=\"g g-auto-1 gap-8 ai-center p-8 border rounded mb-2\">\n                <button mat-icon-button (click)=\"pickFeatureIcon(i)\"><mat-icon>{{ f.icon || 'search'\n                    }}</mat-icon></button>\n                <mat-form-field appearance=\"outline\" class=\"dense-form-field no-sub\">\n                  <input matInput [(ngModel)]=\"f.expr\" (ngModelChange)=\"onFeaturesChanged()\" placeholder=\"Expr/Texto\" />\n                </mat-form-field>\n                <button mat-icon-button color=\"warn\" (click)=\"removeFeature(i)\"><mat-icon>delete</mat-icon></button>\n              </div>\n              <button mat-button color=\"primary\" (click)=\"addFeature()\"><mat-icon>add</mat-icon>\n                Adicionar recurso</button>\n            </div>\n          </mat-expansion-panel>\n          <!-- Section Header -->\n          <mat-expansion-panel [expanded]=\"!!mappingSectionHeader.expr\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>{{ getTypeIcon(mappingSectionHeader.type) }}</mat-icon>\n                  <span>Cabe\u00E7alho de Se\u00E7\u00E3o</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{ mappingSectionHeader.expr || 'N\u00E3o configurado'\n                }}</mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"g gap-12\">\n              <div class=\"g g-1-1 gap-12\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Tipo</mat-label>\n                  <mat-select [(ngModel)]=\"mappingSectionHeader.type\" (ngModelChange)=\"onMappingChanged()\">\n                    <mat-option *ngFor=\"let mt of sectionHeaderTypeConfigs\" [value]=\"mt.type\">\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ mt.label }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Express\u00E3o (item.key)</mat-label>\n                  <input matInput [(ngModel)]=\"mappingSectionHeader.expr\" (ngModelChange)=\"onMappingChanged()\"\n                    placeholder=\"item.key\" />\n                </mat-form-field>\n              </div>\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">Presets</span>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingSectionHeader.type='text'; mappingSectionHeader.expr='${item.key}'; onMappingChanged()\">Texto padr\u00E3o</button>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingSectionHeader.type='chip'; mappingSectionHeader.chipColor='primary'; mappingSectionHeader.chipVariant='filled'; mappingSectionHeader.expr='${item.key}'; onMappingChanged()\">Chip padr\u00E3o</button>\n              </div>\n\n              @switch (mappingSectionHeader.type) {\n                @case ('text') { <praxis-meta-editor-text [model]=\"mappingSectionHeader\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('html') { <praxis-meta-editor-text [model]=\"mappingSectionHeader\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('chip') {\n                  <praxis-meta-editor-chip\n                    [model]=\"mappingSectionHeader\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-chip>\n                }\n                @case ('rating') {\n                  <praxis-meta-editor-rating\n                    [model]=\"mappingSectionHeader\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-rating>\n                }\n                @case ('icon') {\n                  <praxis-meta-editor-icon\n                    [model]=\"mappingSectionHeader\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-icon>\n                }\n                @case ('image') {\n                  <div class=\"g g-1-1 gap-12\">\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>URL Imagem</mat-label>\n                      <input matInput [(ngModel)]=\"mappingSectionHeader.imageUrl\" (ngModelChange)=\"onMappingChanged()\" />\n                      <mat-error *ngIf=\"isImageUrlRequiredInvalid(mappingSectionHeader.imageUrl)\">URL/expr obrigat\u00F3ria</mat-error>\n                    </mat-form-field>\n                  </div>\n                  <div class=\"text-caption muted\" *ngIf=\"!mappingSectionHeader.imageUrl\">Defina a URL/expr para renderizar a imagem.</div>\n                  <praxis-meta-editor-image [model]=\"mappingSectionHeader\" (change)=\"onMappingChanged()\"></praxis-meta-editor-image>\n                }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header><mat-panel-title>Estilo</mat-panel-title></mat-expansion-panel-header>\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field appearance=\"outline\"><mat-label>Classe</mat-label><input matInput\n                      [(ngModel)]=\"mappingSectionHeader.class\" (ngModelChange)=\"onMappingChanged()\" /></mat-form-field>\n                  <mat-form-field appearance=\"outline\"><mat-label>Style</mat-label><input matInput\n                      [(ngModel)]=\"mappingSectionHeader.style\" (ngModelChange)=\"onMappingChanged()\" /></mat-form-field>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n\n          <!-- Empty State -->\n          <mat-expansion-panel [expanded]=\"!!mappingEmptyState.expr\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>inbox</mat-icon>\n                  <span>Estado Vazio</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{ mappingEmptyState.expr || 'Padr\u00E3o' }}</mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"g gap-12\">\n              <div class=\"g g-1-1 gap-12\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Tipo</mat-label>\n                  <mat-select [(ngModel)]=\"mappingEmptyState.type\" (ngModelChange)=\"onMappingChanged()\">\n                    <mat-option *ngFor=\"let mt of emptyStateTypeConfigs\" [value]=\"mt.type\">\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ mt.label }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Mensagem / Expr</mat-label>\n                  <input matInput [(ngModel)]=\"mappingEmptyState.expr\" (ngModelChange)=\"onMappingChanged()\" />\n                </mat-form-field>\n              </div>\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">Presets</span>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingEmptyState.type='text'; mappingEmptyState.expr='Nenhum item dispon\u00EDvel'; onMappingChanged()\">Mensagem padr\u00E3o</button>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingEmptyState.type='image'; mappingEmptyState.imageUrl='/list-empty-state.svg'; mappingEmptyState.imageAlt='Sem resultados'; onMappingChanged()\">Imagem padr\u00E3o</button>\n              </div>\n\n              @switch (mappingEmptyState.type) {\n                @case ('text') { <praxis-meta-editor-text [model]=\"mappingEmptyState\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('html') { <praxis-meta-editor-text [model]=\"mappingEmptyState\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('chip') {\n                  <praxis-meta-editor-chip\n                    [model]=\"mappingEmptyState\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-chip>\n                }\n                @case ('rating') {\n                  <praxis-meta-editor-rating\n                    [model]=\"mappingEmptyState\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-rating>\n                }\n                @case ('icon') {\n                  <praxis-meta-editor-icon\n                    [model]=\"mappingEmptyState\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-icon>\n                }\n                @case ('image') {\n                  <div class=\"g g-1-1 gap-12\">\n                    <mat-form-field appearance=\"outline\"><mat-label>URL Imagem</mat-label><input matInput\n                        [(ngModel)]=\"mappingEmptyState.imageUrl\" (ngModelChange)=\"onMappingChanged()\" />\n                        <mat-error *ngIf=\"isImageUrlRequiredInvalid(mappingEmptyState.imageUrl)\">URL/expr obrigat\u00F3ria</mat-error>\n                      </mat-form-field>\n                  </div>\n                  <div class=\"text-caption muted\" *ngIf=\"!mappingEmptyState.imageUrl\">Defina a URL/expr para renderizar a imagem.</div>\n                  <praxis-meta-editor-image [model]=\"mappingEmptyState\" (change)=\"onMappingChanged()\"></praxis-meta-editor-image>\n                }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header><mat-panel-title>Estilo</mat-panel-title></mat-expansion-panel-header>\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field appearance=\"outline\"><mat-label>Classe</mat-label><input matInput\n                      [(ngModel)]=\"mappingEmptyState.class\" (ngModelChange)=\"onMappingChanged()\" /></mat-form-field>\n                  <mat-form-field appearance=\"outline\"><mat-label>Style</mat-label><input matInput\n                      [(ngModel)]=\"mappingEmptyState.style\" (ngModelChange)=\"onMappingChanged()\" /></mat-form-field>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n        </mat-accordion>\n\n        <button mat-flat-button color=\"primary\" (click)=\"applyTemplate()\">Aplicar mapeamento</button>\n        <button mat-button (click)=\"inferFromFields()\" [disabled]=\"!fields.length\">Inferir do schema</button>\n        <div class=\"g g-auto-220 gap-12 ai-end mt-12\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Skeleton (quantidade)</mat-label>\n            <input matInput type=\"number\" min=\"0\" [(ngModel)]=\"skeletonCountInput\"\n              (ngModelChange)=\"onSkeletonChanged($event)\" />\n          </mat-form-field>\n        </div>\n\n        <div class=\"g gap-12 mt-12\">\n          <div class=\"g row-flow gap-8 ai-center\">\n            <span class=\"section-title mat-subtitle-1\">Pr\u00E9via de tema</span>\n            <mat-button-toggle-group [(ngModel)]=\"skinPreviewTheme\" (change)=\"onSkinChanged()\" appearance=\"legacy\">\n              <mat-button-toggle [value]=\"'light'\">Claro</mat-button-toggle>\n              <mat-button-toggle [value]=\"'dark'\">Escuro</mat-button-toggle>\n              <mat-button-toggle [value]=\"'grid'\">Grade</mat-button-toggle>\n            </mat-button-toggle-group>\n          </div>\n          <div class=\"skin-preview-wrap\">\n            <praxis-list-skin-preview [config]=\"working\" [items]=\"previewData\"\n              [theme]=\"skinPreviewTheme\"></praxis-list-skin-preview>\n          </div>\n        </div>\n      </div>\n    </div>\n\n  </mat-tab>\n  <mat-tab label=\"i18n/A11y\">\n    <div class=\"editor-content grid gap-3\" *ngIf=\"working?.a11y && working?.events\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Locale padr\u00E3o</mat-label>\n        <input matInput [(ngModel)]=\"working.i18n.locale\" (ngModelChange)=\"markDirty()\" placeholder=\"ex.: pt-BR\" />\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Moeda padr\u00E3o</mat-label>\n        <input matInput [(ngModel)]=\"working.i18n.currency\" (ngModelChange)=\"markDirty()\" placeholder=\"ex.: BRL\" />\n      </mat-form-field>\n      <mat-divider class=\"my-8\"></mat-divider>\n      <div class=\"subtitle\">Acessibilidade</div>\n      <div class=\"g g-auto-220 gap-12 ai-end\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>aria-label</mat-label>\n          <input matInput [(ngModel)]=\"working!.a11y!.ariaLabel\" (ngModelChange)=\"markDirty()\" />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>aria-labelledby</mat-label>\n          <input matInput [(ngModel)]=\"working!.a11y!.ariaLabelledBy\" (ngModelChange)=\"markDirty()\" />\n        </mat-form-field>\n      </div>\n      <div class=\"g g-auto-220 gap-12 ai-end\">\n        <mat-slide-toggle [(ngModel)]=\"working!.a11y!.highContrast\" (ngModelChange)=\"markDirty()\">Alto\n          contraste</mat-slide-toggle>\n        <mat-slide-toggle [(ngModel)]=\"working!.a11y!.reduceMotion\" (ngModelChange)=\"markDirty()\">Reduzir\n          movimento</mat-slide-toggle>\n      </div>\n      <mat-divider class=\"my-8\"></mat-divider>\n      <div class=\"subtitle\">Eventos</div>\n      <div class=\"g g-auto-220 gap-12 ai-end\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>itemClick</mat-label>\n          <input matInput [(ngModel)]=\"working!.events!.itemClick\" (ngModelChange)=\"markDirty()\" />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>actionClick</mat-label>\n          <input matInput [(ngModel)]=\"working!.events!.actionClick\" (ngModelChange)=\"markDirty()\" />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>selectionChange</mat-label>\n          <input matInput [(ngModel)]=\"working!.events!.selectionChange\" (ngModelChange)=\"markDirty()\" />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>loaded</mat-label>\n          <input matInput [(ngModel)]=\"working!.events!.loaded\" (ngModelChange)=\"markDirty()\" />\n        </mat-form-field>\n      </div>\n    </div>\n  </mat-tab>\n  <mat-tab label=\"Sele\u00E7\u00E3o\">\n    <div class=\"editor-content grid gap-3\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Modo</mat-label>\n        <mat-select [(ngModel)]=\"working.selection.mode\" (ngModelChange)=\"onSelectionChanged()\">\n          <mat-option value=\"none\">Sem sele\u00E7\u00E3o</mat-option>\n          <mat-option value=\"single\">\u00DAnica</mat-option>\n          <mat-option value=\"multiple\">M\u00FAltipla</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Nome no formul\u00E1rio</mat-label>\n        <input matInput [(ngModel)]=\"working.selection.formControlName\" (ngModelChange)=\"onSelectionChanged()\" />\n        <button mat-icon-button matSuffix type=\"button\" class=\"help-icon-button\" matTooltip=\"formControlName\">\n          <mat-icon>help_outline</mat-icon>\n        </button>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Caminho no formul\u00E1rio</mat-label>\n        <input matInput [(ngModel)]=\"working.selection.formControlPath\" (ngModelChange)=\"onSelectionChanged()\" />\n        <button mat-icon-button matSuffix type=\"button\" class=\"help-icon-button\" matTooltip=\"formControlPath\">\n          <mat-icon>help_outline</mat-icon>\n        </button>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Comparar por (campo)</mat-label>\n        <input matInput [(ngModel)]=\"working.selection.compareBy\" (ngModelChange)=\"onSelectionChanged()\" />\n        <button mat-icon-button matSuffix type=\"button\" class=\"help-icon-button\" matTooltip=\"Chave unica do item.\">\n          <mat-icon>help_outline</mat-icon>\n        </button>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Retorno</mat-label>\n        <mat-select [(ngModel)]=\"working.selection.return\" (ngModelChange)=\"onSelectionChanged()\">\n          <mat-option value=\"value\">value</mat-option>\n          <mat-option value=\"item\">item</mat-option>\n          <mat-option value=\"id\">id</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n  </mat-tab>\n  <mat-tab label=\"Apar\u00EAncia\">\n    <div class=\"editor-content grid gap-3\">\n      <div class=\"preset-row g row-flow gap-8\">\n        <button mat-button (click)=\"applySkinPreset('pill-soft')\">Pill Soft</button>\n        <button mat-button (click)=\"applySkinPreset('gradient-tile')\">Gradient Tile</button>\n        <button mat-button (click)=\"applySkinPreset('glass')\">Glass</button>\n        <button mat-button (click)=\"applySkinPreset('elevated')\">Elevated</button>\n        <button mat-button (click)=\"applySkinPreset('outline')\">Outline</button>\n        <button mat-button (click)=\"applySkinPreset('flat')\">Flat</button>\n        <button mat-button (click)=\"applySkinPreset('neumorphism')\">Neumorphism</button>\n      </div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Estilo</mat-label>\n        <mat-select [(ngModel)]=\"working.skin.type\" (ngModelChange)=\"onSkinTypeChanged($event)\">\n          <mat-option value=\"pill-soft\">Pill Soft</mat-option>\n          <mat-option value=\"gradient-tile\">Gradient Tile</mat-option>\n          <mat-option value=\"glass\">Glass</mat-option>\n          <mat-option value=\"elevated\">Elevated</mat-option>\n          <mat-option value=\"outline\">Outline</mat-option>\n          <mat-option value=\"flat\">Flat</mat-option>\n          <mat-option value=\"neumorphism\">Neumorphism</mat-option>\n          <mat-option value=\"custom\">Custom</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Raio</mat-label>\n        <input matInput [(ngModel)]=\"working.skin.radius\" (ngModelChange)=\"onSkinChanged()\"\n          placeholder=\"ex.: 1.25rem\" />\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Sombra</mat-label>\n        <input matInput [(ngModel)]=\"working.skin.shadow\" (ngModelChange)=\"onSkinChanged()\"\n          placeholder=\"ex.: var(--md-sys-elevation-level2)\" />\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Borda</mat-label>\n        <input matInput [(ngModel)]=\"working.skin.border\" (ngModelChange)=\"onSkinChanged()\" />\n      </mat-form-field>\n      <mat-form-field *ngIf=\"working.skin.type==='glass'\" appearance=\"outline\">\n        <mat-label>Desfoque</mat-label>\n        <input matInput [(ngModel)]=\"working.skin.backdropBlur\" (ngModelChange)=\"onSkinChanged()\"\n          placeholder=\"ex.: 8px\" />\n      </mat-form-field>\n      <div *ngIf=\"working.skin.type==='gradient-tile'\" class=\"g gap-12\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Degrad\u00EA de</mat-label>\n          <input matInput [ngModel]=\"working.skin.gradient.from || ''\"\n            (ngModelChange)=\"onSkinGradientChanged('from', $event)\" />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Degrad\u00EA at\u00E9</mat-label>\n          <input matInput [ngModel]=\"working.skin.gradient.to || ''\"\n            (ngModelChange)=\"onSkinGradientChanged('to', $event)\" />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>\u00C2ngulo</mat-label>\n          <input matInput type=\"number\" [ngModel]=\"working.skin.gradient.angle ?? 135\"\n            (ngModelChange)=\"onSkinGradientChanged('angle', $event)\" />\n        </mat-form-field>\n      </div>\n\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Classe CSS extra (skin.class)</mat-label>\n        <input matInput [(ngModel)]=\"working.skin.class\" (ngModelChange)=\"onSkinChanged()\"\n          placeholder=\"ex.: my-list-skin\" />\n      </mat-form-field>\n\n      <div *ngIf=\"working.skin.type==='custom'\" class=\"g g-auto-220 gap-12 ai-end\">\n        <mat-form-field appearance=\"outline\" class=\"w-full\">\n          <mat-label>Estilo inline (skin.inlineStyle)</mat-label>\n          <textarea matInput rows=\"4\" [(ngModel)]=\"working.skin.inlineStyle\" (ngModelChange)=\"onSkinChanged()\"\n            [attr.placeholder]=\"':host{--p-list-radius: 1rem}'\"></textarea>\n        </mat-form-field>\n        <div class=\"text-caption\">\n          Exemplo de CSS por classe (adicione no seu styles global):\n          <pre class=\"code-block\">.my-list-skin .item-card &#123;\n  border-radius: 14px;\n  border: 1px solid var(--md-sys-color-outline-variant);\n  box-shadow: var(--md-sys-elevation-level2);\n&#125;\n.my-list-skin .mat-mdc-list-item .list-item-content &#123;\n  backdrop-filter: blur(6px);\n&#125;</pre>\n        </div>\n      </div>\n\n\n    </div>\n  </mat-tab>\n</mat-tab-group>\n", styles: [".confirm-type{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;font-size:11px;line-height:16px;background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface-variant)}.confirm-type.danger{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container)}.confirm-type.warning{background:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container)}.confirm-type.info{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}:host{display:block;color:var(--md-sys-color-on-surface)}.list-editor-tabs{--editor-surface: var(--md-sys-color-surface-container-lowest);--editor-border: 1px solid var(--md-sys-color-outline-variant);--editor-radius: var(--md-sys-shape-corner-large, 16px);--editor-muted: var(--md-sys-color-on-surface-variant);--editor-accent: var(--md-sys-color-primary)}.editor-content{padding:16px;background:var(--editor-surface);border:var(--editor-border);border-radius:var(--editor-radius);display:grid;gap:12px}.editor-content .mat-mdc-form-field{width:100%;max-width:none;--mdc-outlined-text-field-container-height: 48px;--mdc-outlined-text-field-outline-color: var(--md-sys-color-outline-variant);--mdc-outlined-text-field-hover-outline-color: var(--md-sys-color-outline);--mdc-outlined-text-field-focus-outline-color: var(--md-sys-color-primary);--mdc-outlined-text-field-error-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-error-focus-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-error-hover-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-label-text-color: var(--md-sys-color-on-surface-variant);--mdc-outlined-text-field-input-text-color: var(--md-sys-color-on-surface);--mdc-outlined-text-field-supporting-text-color: var(--md-sys-color-on-surface-variant)}.editor-content .mat-mdc-form-field.w-full{max-width:none}.help-icon-button{--mdc-icon-button-state-layer-size: 28px;--mdc-icon-button-icon-size: 18px;width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}.help-icon-button mat-icon{font-size:18px;line-height:18px;width:18px;height:18px}.editor-split{grid-template-columns:minmax(0,1fr);align-items:start}.editor-main,.editor-aside{display:grid;gap:12px}.skin-preview-wrap{border-radius:calc(var(--editor-radius) - 4px);border:var(--editor-border);background:var(--md-sys-color-surface-container);padding:12px}.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;color:var(--editor-muted);font-weight:500}.section-title{color:var(--editor-muted);font-weight:600}.chips-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.error{color:var(--md-sys-color-error);font-size:.85rem}.muted{color:var(--editor-muted)}.text-caption{color:var(--editor-muted);font-size:.8rem}:host ::ng-deep .mat-mdc-select-panel .option-icon{font-size:18px;margin-right:6px;vertical-align:middle}:host ::ng-deep .mat-mdc-select-panel .color-dot{width:10px;height:10px;border-radius:999px;display:inline-block;margin-right:6px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-outline)}:host ::ng-deep .mat-mdc-select-panel .color-primary{background:var(--md-sys-color-primary)}:host ::ng-deep .mat-mdc-select-panel .color-accent{background:var(--md-sys-color-tertiary)}:host ::ng-deep .mat-mdc-select-panel .color-warn{background:var(--md-sys-color-error)}:host ::ng-deep .mat-mdc-select-panel .color-default{background:var(--md-sys-color-outline)}@media(max-width:1024px){.editor-split{grid-template-columns:minmax(0,1fr)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i3$2.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: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.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: i4$1.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: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.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: i6.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: "directive", type: i10.MatExpansionPanelDescription, selector: "mat-panel-description" }, { 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: "ngmodule", type: MatMenuModule }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "component", type: PraxisListSkinPreviewComponent, selector: "praxis-list-skin-preview", inputs: ["config", "items", "theme"] }, { kind: "component", type: PraxisMetaEditorTextComponent, selector: "praxis-meta-editor-text", inputs: ["model", "setPipe"], outputs: ["change"] }, { kind: "component", type: PraxisMetaEditorChipComponent, selector: "praxis-meta-editor-chip", inputs: ["model", "paletteOptions", "colorDotBackground", "isCustomColor", "enableCustomColor"], outputs: ["change"] }, { kind: "component", type: PraxisMetaEditorRatingComponent, selector: "praxis-meta-editor-rating", inputs: ["model", "paletteOptions", "colorDotBackground", "isCustomColor", "enableCustomColor"], outputs: ["change"] }, { kind: "component", type: PraxisMetaEditorCurrencyComponent, selector: "praxis-meta-editor-currency", inputs: ["model"], outputs: ["change"] }, { kind: "component", type: PraxisMetaEditorDateComponent, selector: "praxis-meta-editor-date", inputs: ["model"], outputs: ["change"] }, { kind: "component", type: PraxisMetaEditorIconComponent, selector: "praxis-meta-editor-icon", inputs: ["model", "paletteOptions", "colorDotBackground", "isCustomColor", "enableCustomColor"], outputs: ["change"] }, { kind: "component", type: PraxisMetaEditorImageComponent, selector: "praxis-meta-editor-image", inputs: ["model"], outputs: ["change"] }, { kind: "component", type: PdxColorPickerComponent, selector: "pdx-color-picker", inputs: ["actionsLayout", "activeView", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "clearButton", "disabledMode", "readonlyMode", "visible", "presentationMode", "fillMode", "format", "gradientSettings", "icon", "iconClass", "svgIcon", "paletteSettings", "popupSettings", "preview", "rounded", "size", "tabindex", "views", "maxRecent", "showRecent"], outputs: ["valueChange", "open", "close", "cancel", "activeViewChange", "activeColorClick", "focusEvent", "blurEvent"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: PraxisListConfigEditor, isStandalone: true, selector: "praxis-list-config-editor", inputs: { config: "config", listId: "listId" }, ngImport: i0, template: "<mat-tab-group class=\"list-editor-tabs\">\n  <mat-tab label=\"Dados\">\n    <div class=\"editor-content\">\n      <div class=\"g g-1-auto gap-8 ai-center\">\n        <div class=\"muted\">Observa\u00E7\u00E3o: ajustes aplicados pelo assistente substituem o objeto de configura\u00E7\u00E3o inteiro.\n        </div>\n        <button mat-icon-button type=\"button\" class=\"help-icon-button\"\n          matTooltip=\"O applyConfigFromAdapter n\u00E3o faz merge profundo. Garanta que o adapter envie a config completa.\">\n          <mat-icon>help_outline</mat-icon>\n        </button>\n      </div>\n      <mat-form-field appearance=\"outline\" class=\"w-full\">\n        <mat-label>Recurso (API)</mat-label>\n        <input matInput [(ngModel)]=\"working.dataSource.resourcePath\" (ngModelChange)=\"onResourcePathChange($event)\"\n          placeholder=\"ex.: users\" />\n        <button mat-icon-button matSuffix type=\"button\" class=\"help-icon-button\"\n          matTooltip=\"Endpoint do recurso (resourcePath).\">\n          <mat-icon>help_outline</mat-icon>\n        </button>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\" class=\"w-full\">\n        <mat-label>Query (JSON)</mat-label>\n        <textarea matInput rows=\"3\" [(ngModel)]=\"queryJson\" (ngModelChange)=\"onQueryChanged($event)\"\n          placeholder='ex.: &#123;\"status\":\"active\",\"department\":\"sales\"&#125;'></textarea>\n        <button mat-icon-button matSuffix type=\"button\" class=\"help-icon-button\"\n          matTooltip=\"Opcional. Use JSON v\u00E1lido para filtros iniciais.\" *ngIf=\"!queryError\">\n          <mat-icon>help_outline</mat-icon>\n        </button>\n        <mat-error *ngIf=\"queryError\">{{ queryError }}</mat-error>\n      </mat-form-field>\n      <div class=\"g g-auto-220 gap-12 ai-end mt-12\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Ordenar por</mat-label>\n          <mat-select [(ngModel)]=\"sortField\" (ngModelChange)=\"updateSortConfig()\">\n            <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{ f }}</mat-option>\n          </mat-select>\n          <button mat-icon-button matSuffix type=\"button\" class=\"help-icon-button\" matTooltip=\"Campo base do recurso.\">\n            <mat-icon>help_outline</mat-icon>\n          </button>\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Dire\u00E7\u00E3o</mat-label>\n          <mat-select [(ngModel)]=\"sortDir\" (ngModelChange)=\"updateSortConfig()\">\n            <mat-option value=\"asc\">Ascendente</mat-option>\n            <mat-option value=\"desc\">Descendente</mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n    </div>\n  </mat-tab>\n  <mat-tab label=\"JSON\">\n    <div class=\"editor-content\">\n      <praxis-list-json-config-editor\n        [document]=\"document\"\n        (documentChange)=\"onJsonConfigChange($event)\"\n        (validationChange)=\"onJsonValidationChange($event)\"\n        (editorEvent)=\"onJsonEditorEvent($event)\">\n      </praxis-list-json-config-editor>\n    </div>\n  </mat-tab>\n  <mat-tab label=\"A\u00E7\u00F5es\">\n    <div class=\"editor-content g gap-12\">\n      <div class=\"g g-1-auto gap-8 ai-center\">\n        <div class=\"muted\">Configure bot\u00F5es de a\u00E7\u00E3o por item (\u00EDcone, r\u00F3tulo, cor, visibilidade)</div>\n        <button mat-flat-button color=\"primary\" (click)=\"addAction()\">Adicionar a\u00E7\u00E3o</button>\n      </div>\n      <div class=\"g g-1-auto gap-8 ai-center\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>A\u00E7\u00E3o global (Praxis)</mat-label>\n          <mat-select [(ngModel)]=\"selectedGlobalActionId\" (ngModelChange)=\"onGlobalActionSelected($event)\">\n            <mat-option [value]=\"undefined\">-- Selecionar --</mat-option>\n            <mat-option *ngFor=\"let ga of globalActionCatalog\" [value]=\"ga.id\">\n              <mat-icon class=\"option-icon\">{{ ga.icon || 'bolt' }}</mat-icon>\n              {{ ga.label }}\n            </mat-option>\n          </mat-select>\n          <mat-hint *ngIf=\"!globalActionCatalog.length\" class=\"text-caption muted\">Nenhuma a\u00E7\u00E3o global registrada.</mat-hint>\n        </mat-form-field>\n        <div class=\"muted text-caption\">Selecione para adicionar com `command` global.</div>\n      </div>\n      <div *ngFor=\"let a of (working.actions || []); let i = index\" class=\"g g-auto-200 gap-12 ai-end\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>ID</mat-label>\n          <input matInput [(ngModel)]=\"a.id\" (ngModelChange)=\"onActionsChanged()\" />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Tipo de a\u00E7\u00E3o</mat-label>\n          <mat-select [(ngModel)]=\"a.kind\" (ngModelChange)=\"onActionsChanged()\">\n            <mat-option value=\"icon\">\u00CDcone</mat-option>\n            <mat-option value=\"button\">Bot\u00E3o</mat-option>\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>\u00CDcone</mat-label>\n          <input matInput [(ngModel)]=\"a.icon\" (ngModelChange)=\"onActionsChanged()\" placeholder=\"ex.: edit, delete\" />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Command (global)</mat-label>\n          <input matInput [(ngModel)]=\"a.command\" (ngModelChange)=\"onActionsChanged()\" placeholder=\"global:toast.success\" />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>R\u00F3tulo</mat-label>\n          <input matInput [(ngModel)]=\"a.label\" (ngModelChange)=\"onActionsChanged()\" />\n        </mat-form-field>\n        <ng-container *ngIf=\"a.kind === 'button'\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Variante</mat-label>\n            <mat-select [(ngModel)]=\"a.buttonVariant\" (ngModelChange)=\"onActionsChanged()\">\n              <mat-option value=\"stroked\">Contorno</mat-option>\n              <mat-option value=\"raised\">Elevado</mat-option>\n              <mat-option value=\"flat\">Preenchido</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </ng-container>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Cor da a\u00E7\u00E3o</mat-label>\n          <mat-select [(ngModel)]=\"a.color\" (ngModelChange)=\"onActionsChanged()\">\n            <mat-option *ngFor=\"let c of paletteOptions\" [value]=\"c.value\">\n              <span class=\"color-dot\" [style.background]=\"colorDotBackground(c.value)\"></span>{{ c.label }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n        <div class=\"g gap-8\" *ngIf=\"isCustomColor(a.color); else actionCustomBtn\">\n          <pdx-color-picker label=\"Cor personalizada\" [format]=\"'hex'\" [(ngModel)]=\"a.color\"\n            (ngModelChange)=\"onActionsChanged()\"></pdx-color-picker>\n        </div>\n        <ng-template #actionCustomBtn>\n          <button mat-stroked-button type=\"button\" (click)=\"enableCustomActionColor(a)\">Usar cor personalizada</button>\n        </ng-template>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Payload da a\u00E7\u00E3o</mat-label>\n          <mat-select [(ngModel)]=\"a.emitPayload\" (ngModelChange)=\"onActionsChanged()\">\n            <mat-option [value]=\"undefined\">Padr\u00E3o</mat-option>\n            <mat-option value=\"item\">item</mat-option>\n            <mat-option value=\"id\">id</mat-option>\n            <mat-option value=\"value\">value</mat-option>\n          </mat-select>\n          <button mat-icon-button matSuffix type=\"button\" class=\"help-icon-button\" matTooltip=\"emitPayload\">\n            <mat-icon>help_outline</mat-icon>\n          </button>\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\" class=\"col-span-2\">\n          <mat-label>Exibir quando (ex.: &#36;&#123;item.status&#125; == 'done')</mat-label>\n          <input matInput [(ngModel)]=\"a.showIf\" (ngModelChange)=\"onActionsChanged()\" />\n          <button mat-icon-button matSuffix type=\"button\" class=\"help-icon-button\"\n            matTooltip=\"Sintaxe suportada: &#34;&#36;{item.campo} == &#39;valor&#39;&#34;. Express\u00F5es avan\u00E7adas n\u00E3o s\u00E3o avaliadas.\">\n            <mat-icon>help_outline</mat-icon>\n          </button>\n        </mat-form-field>\n        <div class=\"g row-flow gap-8 ai-center\">\n          <button *ngIf=\"(a.kind || 'icon') === 'icon'\" mat-icon-button\n            [color]=\"isThemeColor(a.color) ? a.color : undefined\"><mat-icon\n              [praxisIcon]=\"a.icon || 'bolt'\" [style.cssText]=\"iconStyle(a.color)\"></mat-icon></button>\n          <ng-container *ngIf=\"a.kind === 'button'\">\n            <button *ngIf=\"a.buttonVariant === 'stroked'\" mat-stroked-button\n              [color]=\"isThemeColor(a.color) ? a.color : undefined\" [style.cssText]=\"buttonStyle(a.color, 'stroked')\">{{ a.label\n              || a.id || 'A\u00E7\u00E3o' }}</button>\n            <button *ngIf=\"a.buttonVariant === 'raised'\" mat-raised-button\n              [color]=\"isThemeColor(a.color) ? a.color : undefined\" [style.cssText]=\"buttonStyle(a.color, 'raised')\">{{ a.label ||\n              a.id || 'A\u00E7\u00E3o' }}</button>\n            <button *ngIf=\"!a.buttonVariant || a.buttonVariant === 'flat'\" mat-flat-button\n              [color]=\"isThemeColor(a.color) ? a.color : undefined\" [style.cssText]=\"buttonStyle(a.color, 'flat')\">{{ a.label || a.id || 'A\u00E7\u00E3o' }}</button>\n          </ng-container>\n          <span class=\"muted\">Pr\u00E9-visualiza\u00E7\u00E3o</span>\n        </div>\n        <div class=\"flex-end\">\n          <button mat-button color=\"warn\" (click)=\"removeAction(i)\">Remover</button>\n        </div>\n        <div class=\"g gap-8 col-span-2\" *ngIf=\"a.command\">\n          <mat-slide-toggle [(ngModel)]=\"a.showLoading\" (ngModelChange)=\"onActionsChanged()\">Mostrar loading</mat-slide-toggle>\n          <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n            <mat-expansion-panel-header><mat-panel-title>Confirma\u00E7\u00E3o</mat-panel-title></mat-expansion-panel-header>\n            <div class=\"g gap-12 pt-12\">\n              <div class=\"g row-flow gap-8 ai-center\">\n                <span class=\"text-caption muted\">Tipo</span>\n                <mat-button-toggle-group [value]=\"a.confirmation?.type || ''\" (change)=\"applyConfirmationPreset(a, $event.value)\">\n                  <mat-button-toggle value=\"\">Padr\u00E3o</mat-button-toggle>\n                  <mat-button-toggle value=\"danger\">Danger</mat-button-toggle>\n                  <mat-button-toggle value=\"warning\">Warning</mat-button-toggle>\n                  <mat-button-toggle value=\"info\">Info</mat-button-toggle>\n                </mat-button-toggle-group>\n              </div>\n              <mat-form-field appearance=\"outline\">\n                <mat-label>T\u00EDtulo</mat-label>\n                <input matInput [ngModel]=\"a.confirmation?.title\" (ngModelChange)=\"setConfirmationField(a, 'title', $event)\" />\n              </mat-form-field>\n              <mat-form-field appearance=\"outline\">\n                <mat-label>Mensagem</mat-label>\n                <input matInput [ngModel]=\"a.confirmation?.message\" (ngModelChange)=\"setConfirmationField(a, 'message', $event)\" />\n              </mat-form-field>\n              <div class=\"g gap-6\">\n                <div class=\"text-caption muted\">Pr\u00E9via</div>\n                <div class=\"text-caption\">\n                  <strong>{{ a.confirmation?.title || 'Confirmar a\u00E7\u00E3o' }}</strong>\n                </div>\n                <div class=\"text-caption muted\">{{ a.confirmation?.message || 'Tem certeza que deseja continuar?' }}</div>\n                <div class=\"text-caption\">\n                  <span class=\"confirm-type\" [ngClass]=\"(a.confirmation?.type || 'default')\">Tipo: {{ a.confirmation?.type || 'padr\u00E3o' }}</span>\n                </div>\n                <div class=\"text-caption muted\" *ngIf=\"!a.confirmation?.title && !a.confirmation?.message\">\n                  Defina um t\u00EDtulo ou mensagem para a confirma\u00E7\u00E3o.\n                </div>\n              </div>\n            </div>\n          </mat-expansion-panel>\n          <mat-form-field appearance=\"outline\" class=\"col-span-2\">\n            <mat-label>Payload (JSON/Template)</mat-label>\n            <textarea matInput rows=\"4\" [(ngModel)]=\"a.globalPayload\" (ngModelChange)=\"onActionsChanged()\"\n              placeholder='{\"message\":\"${item.name} favoritado\"}'></textarea>\n            <button mat-icon-button matSuffix type=\"button\" class=\"help-icon-button\"\n              [matTooltip]=\"globalPayloadSchemaTooltip(a)\">\n              <mat-icon>help_outline</mat-icon>\n            </button>\n            <mat-error *ngIf=\"isGlobalPayloadInvalid(a.globalPayload)\">JSON inv\u00E1lido</mat-error>\n          </mat-form-field>\n          <div class=\"g row-flow gap-8 ai-center\">\n            <button mat-stroked-button type=\"button\" (click)=\"applyGlobalPayloadExample(a)\">Inserir exemplo</button>\n            <span class=\"muted text-caption\">{{ globalPayloadExampleHint(a) }}</span>\n          </div>\n          <mat-slide-toggle [(ngModel)]=\"a.emitLocal\" (ngModelChange)=\"onActionsChanged()\">Emitir evento local tamb\u00E9m</mat-slide-toggle>\n        </div>\n      </div>\n    </div>\n  </mat-tab>\n  <mat-tab label=\"Layout\">\n    <div class=\"editor-content grid gap-3\">\n      <div class=\"preset-row g row-flow gap-8\">\n        <button mat-stroked-button (click)=\"applyLayoutPreset('tiles-modern')\">Preset Tiles Moderno</button>\n      </div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Variante</mat-label>\n        <mat-select [(ngModel)]=\"working.layout.variant\" (ngModelChange)=\"onLayoutChanged()\">\n          <mat-option value=\"list\">Lista</mat-option>\n          <mat-option value=\"cards\">Cards</mat-option>\n          <mat-option value=\"tiles\">Tiles</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Modelo</mat-label>\n        <mat-select [(ngModel)]=\"working.layout.model\" (ngModelChange)=\"onLayoutChanged()\">\n          <ng-container *ngIf=\"working.layout.variant === 'list'; else cardModels\">\n            <mat-option value=\"standard\">Padr\u00E3o</mat-option>\n            <mat-option value=\"media\">M\u00EDdia \u00E0 esquerda</mat-option>\n            <mat-option value=\"hotel\">Hotel (m\u00EDdia grande)</mat-option>\n          </ng-container>\n          <ng-template #cardModels>\n            <ng-container *ngIf=\"working.layout.variant === 'tiles'; else cardsOnly\">\n              <mat-option value=\"standard\">Tile padr\u00E3o</mat-option>\n              <mat-option value=\"media\">Tile com m\u00EDdia</mat-option>\n              <mat-option value=\"hotel\">Tile hotel</mat-option>\n            </ng-container>\n            <ng-template #cardsOnly>\n              <mat-option value=\"standard\">Padr\u00E3o</mat-option>\n              <mat-option value=\"media\">Card com m\u00EDdia</mat-option>\n              <mat-option value=\"hotel\">Hotel</mat-option>\n            </ng-template>\n          </ng-template>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Linhas</mat-label>\n        <mat-select [(ngModel)]=\"working.layout.lines\" (ngModelChange)=\"onLayoutChanged()\">\n          <mat-option [value]=\"1\">1</mat-option>\n          <mat-option [value]=\"2\">2</mat-option>\n          <mat-option [value]=\"3\">3</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Itens por p\u00E1gina</mat-label>\n        <input matInput type=\"number\" min=\"1\" [(ngModel)]=\"working.layout.pageSize\"\n          (ngModelChange)=\"onPageSizeChange($event)\" />\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Densidade</mat-label>\n        <mat-select [(ngModel)]=\"working.layout.density\" (ngModelChange)=\"onLayoutChanged()\">\n          <mat-option value=\"default\">Padr\u00E3o</mat-option>\n          <mat-option value=\"comfortable\">Confort\u00E1vel</mat-option>\n          <mat-option value=\"compact\">Compacta</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\" *ngIf=\"working.layout.variant !== 'tiles'\">\n        <mat-label>Divisores</mat-label>\n        <mat-select [(ngModel)]=\"working.layout.dividers\" (ngModelChange)=\"onLayoutChanged()\">\n          <mat-option value=\"none\">Sem</mat-option>\n          <mat-option value=\"between\">Entre grupos</mat-option>\n          <mat-option value=\"all\">Todos</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <ng-container *ngIf=\"fields.length > 0; else groupByText\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Agrupar por</mat-label>\n          <mat-select [(ngModel)]=\"working.layout.groupBy\" (ngModelChange)=\"onLayoutChanged()\">\n            <mat-option [value]=\"\">Nenhum</mat-option>\n            <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{ f }}</mat-option>\n          </mat-select>\n        </mat-form-field>\n      </ng-container>\n      <ng-template #groupByText>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Agrupar por</mat-label>\n          <input matInput [(ngModel)]=\"working.layout.groupBy\" (ngModelChange)=\"onLayoutChanged()\"\n            placeholder=\"ex.: departamento\" />\n        </mat-form-field>\n      </ng-template>\n      <mat-slide-toggle [(ngModel)]=\"working.layout.stickySectionHeader\" (ngModelChange)=\"onLayoutChanged()\">\n        Header de se\u00E7\u00E3o fixo\n      </mat-slide-toggle>\n      <mat-slide-toggle [(ngModel)]=\"working.layout.virtualScroll\" (ngModelChange)=\"onLayoutChanged()\">\n        Scroll virtual\n      </mat-slide-toggle>\n      <mat-divider class=\"my-8\"></mat-divider>\n      <div class=\"subtitle\">Ferramentas da lista</div>\n      <div class=\"g g-auto-220 gap-12 ai-end\">\n        <mat-slide-toggle [(ngModel)]=\"working.ui.showSearch\" (ngModelChange)=\"onUiChanged()\">Mostrar\n          busca</mat-slide-toggle>\n        <mat-slide-toggle [(ngModel)]=\"working.ui.showSort\" (ngModelChange)=\"onUiChanged()\">Mostrar\n          ordenar</mat-slide-toggle>\n        <mat-slide-toggle [(ngModel)]=\"working.ui.showRange\" (ngModelChange)=\"onUiChanged()\">Mostrar faixa X\u2013Y de\n          Total</mat-slide-toggle>\n      </div>\n      <div class=\"g g-auto-220 gap-12 ai-end mt-12\" *ngIf=\"working.ui?.showSearch\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Campo para buscar</mat-label>\n          <mat-select [(ngModel)]=\"working.ui.searchField\" (ngModelChange)=\"onUiChanged()\">\n            <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{ f }}</mat-option>\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Placeholder da busca</mat-label>\n          <input matInput [(ngModel)]=\"working.ui.searchPlaceholder\" (ngModelChange)=\"onUiChanged()\"\n            placeholder=\"ex.: Buscar por t\u00EDtulo\" />\n        </mat-form-field>\n      </div>\n      <div class=\"mt-12\" *ngIf=\"working.ui?.showSort\">\n        <div class=\"g g-1-auto ai-center gap-8\">\n          <div class=\"muted\">Op\u00E7\u00F5es de ordena\u00E7\u00E3o (r\u00F3tulo \u2192 campo+dire\u00E7\u00E3o)</div>\n          <button mat-flat-button color=\"primary\" (click)=\"addUiSortRow()\">Adicionar op\u00E7\u00E3o</button>\n        </div>\n        <div class=\"g g-auto-220 gap-12 ai-end mt-12\" *ngFor=\"let r of uiSortRows; let i = index\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>R\u00F3tulo</mat-label>\n            <input matInput [(ngModel)]=\"r.label\" (ngModelChange)=\"onUiSortRowsChanged()\"\n              placeholder=\"ex.: Mais recentes\" />\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Campo</mat-label>\n            <mat-select [(ngModel)]=\"r.field\" (ngModelChange)=\"onUiSortRowsChanged()\">\n              <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{ f }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Dire\u00E7\u00E3o</mat-label>\n            <mat-select [(ngModel)]=\"r.dir\" (ngModelChange)=\"onUiSortRowsChanged()\">\n              <mat-option value=\"desc\">Descendente</mat-option>\n              <mat-option value=\"asc\">Ascendente</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <div class=\"error\" *ngIf=\"isUiSortRowDuplicate(i)\">Op\u00E7\u00E3o duplicada (campo+dire\u00E7\u00E3o)</div>\n          <div class=\"flex-end\"><button mat-button color=\"warn\" (click)=\"removeUiSortRow(i)\">Remover</button></div>\n        </div>\n      </div>\n    </div>\n  </mat-tab>\n  <mat-tab label=\"Conte\u00FAdo\">\n    <div class=\"editor-content\">\n      <div class=\"editor-main\">\n        <mat-accordion multi>\n          <!-- Primary -->\n          <mat-expansion-panel [expanded]=\"true\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>{{ getTypeIcon(mappingPrimary.type) }}</mat-icon>\n                  <span>Primary (T\u00EDtulo)</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{ mappingPrimary.field || 'N\u00E3o mapeado' }}</mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"g gap-12\">\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">Presets</span>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingPrimary.type='text'; mappingPrimary.field='name'; onMappingChanged()\">Nome</button>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingPrimary.type='text'; mappingPrimary.field='title'; onMappingChanged()\">T\u00EDtulo</button>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingPrimary.type='text'; mappingPrimary.field='name'; mappingSecondary.type='text'; mappingSecondary.field='role'; onMappingChanged()\">Nome + Papel</button>\n              </div>\n              <div class=\"g g-1-1 gap-12\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Campo</mat-label>\n                  <mat-select [(ngModel)]=\"mappingPrimary.field\" (ngModelChange)=\"onMappingChanged()\">\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{ f }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Tipo</mat-label>\n                  <mat-select [(ngModel)]=\"mappingPrimary.type\" (ngModelChange)=\"onMappingChanged()\">\n                    <mat-option *ngFor=\"let mt of primaryTypeConfigs\" [value]=\"mt.type\">\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ mt.label }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n\n              @switch (mappingPrimary.type) {\n                @case ('text') { <praxis-meta-editor-text [model]=\"mappingPrimary\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('html') { <praxis-meta-editor-text [model]=\"mappingPrimary\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('currency') { <praxis-meta-editor-currency [model]=\"mappingPrimary\" (change)=\"onMappingChanged()\"></praxis-meta-editor-currency> }\n                @case ('date') { <praxis-meta-editor-date [model]=\"mappingPrimary\" (change)=\"onMappingChanged()\"></praxis-meta-editor-date> }\n              }\n\n              <!-- Advanced -->\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header>\n                  <mat-panel-title>Formata\u00E7\u00E3o e Estilo</mat-panel-title>\n                </mat-expansion-panel-header>\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field appearance=\"outline\" *ngIf=\"mappingPrimary.type==='text' || mappingPrimary.type==='html'\">\n                    <mat-label>Classe CSS</mat-label>\n                    <input matInput [(ngModel)]=\"mappingPrimary.class\" (ngModelChange)=\"onMappingChanged()\" />\n                  </mat-form-field>\n                  <mat-form-field appearance=\"outline\" *ngIf=\"mappingPrimary.type==='text' || mappingPrimary.type==='html'\">\n                    <mat-label>Estilo Inline</mat-label>\n                    <input matInput [(ngModel)]=\"mappingPrimary.style\" (ngModelChange)=\"onMappingChanged()\" />\n                  </mat-form-field>\n                  <div class=\"g g-1-1 gap-12\">\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>Classe CSS</mat-label>\n                      <input matInput [(ngModel)]=\"mappingPrimary.class\" (ngModelChange)=\"onMappingChanged()\" />\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>Estilo Inline</mat-label>\n                      <input matInput [(ngModel)]=\"mappingPrimary.style\" (ngModelChange)=\"onMappingChanged()\" />\n                    </mat-form-field>\n                  </div>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n\n          <!-- Secondary -->\n          <mat-expansion-panel [expanded]=\"!!mappingSecondary.field\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>{{ getTypeIcon(mappingSecondary.type) }}</mat-icon>\n                  <span>Secondary (Resumo)</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{ mappingSecondary.field || 'N\u00E3o mapeado' }}</mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"g gap-12\">\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">Presets</span>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingSecondary.type='text'; mappingSecondary.field='subtitle'; onMappingChanged()\">Subt\u00EDtulo</button>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingSecondary.type='date'; mappingSecondary.field='hireDate'; mappingSecondary.dateStyle='short'; onMappingChanged()\">Data curta</button>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingSecondary.type='currency'; mappingSecondary.field='salary'; mappingSecondary.currencyCode='BRL'; mappingSecondary.locale='pt-BR'; onMappingChanged()\">Sal\u00E1rio</button>\n              </div>\n              <div class=\"g g-1-1 gap-12\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Campo</mat-label>\n                  <mat-select [(ngModel)]=\"mappingSecondary.field\" (ngModelChange)=\"onMappingChanged()\">\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{ f }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Tipo</mat-label>\n                  <mat-select [(ngModel)]=\"mappingSecondary.type\" (ngModelChange)=\"onMappingChanged()\">\n                    <mat-option *ngFor=\"let mt of secondaryTypeConfigs\" [value]=\"mt.type\">\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ mt.label }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n\n              @switch (mappingSecondary.type) {\n                @case ('text') { <praxis-meta-editor-text [model]=\"mappingSecondary\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('html') { <praxis-meta-editor-text [model]=\"mappingSecondary\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('currency') { <praxis-meta-editor-currency [model]=\"mappingSecondary\" (change)=\"onMappingChanged()\"></praxis-meta-editor-currency> }\n                @case ('date') { <praxis-meta-editor-date [model]=\"mappingSecondary\" (change)=\"onMappingChanged()\"></praxis-meta-editor-date> }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header>\n                  <mat-panel-title>Formata\u00E7\u00E3o e Estilo</mat-panel-title>\n                </mat-expansion-panel-header>\n                <div class=\"g gap-12 pt-12\">\n                  <div class=\"g g-1-1 gap-12\">\n                    <mat-form-field appearance=\"outline\"><mat-label>Classe CSS</mat-label><input matInput\n                        [(ngModel)]=\"mappingSecondary.class\" (ngModelChange)=\"onMappingChanged()\" /></mat-form-field>\n                    <mat-form-field appearance=\"outline\"><mat-label>Estilo Inline</mat-label><input matInput\n                        [(ngModel)]=\"mappingSecondary.style\" (ngModelChange)=\"onMappingChanged()\" /></mat-form-field>\n                  </div>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n\n          <mat-expansion-panel [expanded]=\"!!mappingMeta.field || mappingMetaFields.length > 0\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>{{ getTypeIcon(mappingMeta.type || 'text') }}</mat-icon>\n                  <span>Meta (Detalhe/Lateral)</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>\n                {{ mappingMetaFields.length ? 'Campo composto (' + mappingMetaFields.length + ')' :\n                (mappingMeta.field || 'N\u00E3o mapeado') }}\n              </mat-panel-description>\n            </mat-expansion-panel-header>\n\n            <div class=\"g gap-12\">\n              <!-- Composition Mode Toggle -->\n              <div class=\"g g-1-1 gap-12 p-12 bg-subtle rounded\">\n                <div class=\"text-caption muted\">Modo de composi\u00E7\u00E3o</div>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Campos para compor (Multi-select)</mat-label>\n                  <mat-select [(ngModel)]=\"mappingMetaFields\" multiple (ngModelChange)=\"onMappingChanged()\">\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{ f }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <div class=\"g g-1-1 ai-center gap-12\" *ngIf=\"mappingMetaFields.length\">\n                  <mat-form-field appearance=\"outline\">\n                    <mat-label>Separador</mat-label>\n                    <input matInput [(ngModel)]=\"mappingMetaSeparator\" (ngModelChange)=\"onMappingChanged()\" />\n                  </mat-form-field>\n                  <mat-slide-toggle [(ngModel)]=\"mappingMetaWrapSecondInParens\" (ngModelChange)=\"onMappingChanged()\">\n                    (Seg) entre par\u00EAnteses\n                  </mat-slide-toggle>\n                </div>\n              </div>\n\n              <!-- Single Field Mode (if no composition) -->\n              <div class=\"g g-1-1 gap-12\" *ngIf=\"!mappingMetaFields.length\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Campo \u00DAnico</mat-label>\n                  <mat-select [(ngModel)]=\"mappingMeta.field\" (ngModelChange)=\"onMappingChanged()\">\n                    <mat-option [value]=\"undefined\">-- Nenhum --</mat-option>\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{ f }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Tipo</mat-label>\n                  <mat-select [(ngModel)]=\"mappingMeta.type\" (ngModelChange)=\"onMappingChanged()\">\n                    <mat-option *ngFor=\"let mt of metaTypeConfigs\" [value]=\"mt.type\">\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ mt.label }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n\n              <!-- Type configuration (pluggable editors) -->\n              @switch (mappingMeta.type) {\n                @case ('text') { <praxis-meta-editor-text [model]=\"mappingMeta\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('html') { <praxis-meta-editor-text [model]=\"mappingMeta\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('currency') { <praxis-meta-editor-currency [model]=\"mappingMeta\" (change)=\"onMappingChanged()\"></praxis-meta-editor-currency> }\n                @case ('date') { <praxis-meta-editor-date [model]=\"mappingMeta\" (change)=\"onMappingChanged()\"></praxis-meta-editor-date> }\n                @case ('chip') {\n                  <praxis-meta-editor-chip\n                    [model]=\"mappingMeta\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-chip>\n                }\n                @case ('rating') {\n                  <praxis-meta-editor-rating\n                    [model]=\"mappingMeta\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-rating>\n                }\n                @case ('icon') {\n                  <praxis-meta-editor-icon\n                    [model]=\"mappingMeta\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-icon>\n                }\n                @case ('image') { <praxis-meta-editor-image [model]=\"mappingMeta\" (change)=\"onMappingChanged()\"></praxis-meta-editor-image> }\n              }\n\n              <!-- Advanced -->\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header><mat-panel-title>Op\u00E7\u00F5es\n                    avan\u00E7adas</mat-panel-title></mat-expansion-panel-header>\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field appearance=\"outline\">\n                    <mat-label>Posi\u00E7\u00E3o</mat-label>\n                    <mat-select [(ngModel)]=\"mappingMeta.placement\" (ngModelChange)=\"onMappingChanged()\">\n                      <mat-option value=\"side\">Lateral (Direita)</mat-option>\n                      <mat-option value=\"line\">Na linha (Abaixo)</mat-option>\n                    </mat-select>\n                  </mat-form-field>\n                  <mat-form-field appearance=\"outline\">\n                    <mat-label>Classe CSS</mat-label>\n                    <input matInput [(ngModel)]=\"mappingMeta.class\" (ngModelChange)=\"onMappingChanged()\" />\n                  </mat-form-field>\n                  <mat-form-field appearance=\"outline\">\n                    <mat-label>Estilo</mat-label>\n                    <input matInput [(ngModel)]=\"mappingMeta.style\" (ngModelChange)=\"onMappingChanged()\" />\n                  </mat-form-field>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n          <!-- Trailing -->\n          <mat-expansion-panel [expanded]=\"!!mappingTrailing.field\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>{{ getTypeIcon(mappingTrailing.type || 'text') }}</mat-icon>\n                  <span>Trailing (Direita)</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{ mappingTrailing.field || 'N\u00E3o mapeado'\n                }}</mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"g gap-12\">\n              <div class=\"g g-1-1 gap-12\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Campo</mat-label>\n                  <mat-select [(ngModel)]=\"mappingTrailing.field\" (ngModelChange)=\"onMappingChanged()\">\n                    <mat-option [value]=\"undefined\">-- Nenhum --</mat-option>\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{ f }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Tipo</mat-label>\n                  <mat-select [(ngModel)]=\"mappingTrailing.type\" (ngModelChange)=\"onMappingChanged()\">\n                    <mat-option *ngFor=\"let mt of trailingTypeConfigs\" [value]=\"mt.type\">\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ mt.label }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">Presets</span>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingTrailing.type='chip'; mappingTrailing.chipColor='primary'; mappingTrailing.chipVariant='filled'; mappingTrailing.field='status'; onMappingChanged()\">Status Chip</button>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingTrailing.type='icon'; mappingTrailing.field='status'; mappingTrailing.iconColor='primary'; onMappingChanged()\">Status \u00CDcone</button>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingTrailing.type='currency'; mappingTrailing.field='price'; mappingTrailing.currencyCode='BRL'; mappingTrailing.locale='pt-BR'; onMappingChanged()\">Pre\u00E7o</button>\n              </div>\n\n              @switch (mappingTrailing.type) {\n                @case ('text') { <praxis-meta-editor-text [model]=\"mappingTrailing\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('html') { <praxis-meta-editor-text [model]=\"mappingTrailing\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('currency') { <praxis-meta-editor-currency [model]=\"mappingTrailing\" (change)=\"onMappingChanged()\"></praxis-meta-editor-currency> }\n                @case ('date') { <praxis-meta-editor-date [model]=\"mappingTrailing\" (change)=\"onMappingChanged()\"></praxis-meta-editor-date> }\n                @case ('chip') {\n                  <praxis-meta-editor-chip\n                    [model]=\"mappingTrailing\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-chip>\n                }\n                @case ('rating') {\n                  <praxis-meta-editor-rating\n                    [model]=\"mappingTrailing\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-rating>\n                }\n                @case ('icon') {\n                  <praxis-meta-editor-icon\n                    [model]=\"mappingTrailing\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-icon>\n                }\n                @case ('image') {\n                  <div class=\"g g-1-1 gap-12\">\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>URL / Expr</mat-label>\n                      <input matInput [(ngModel)]=\"mappingTrailing.imageUrl\" (ngModelChange)=\"onMappingChanged()\"\n                        placeholder=\"https://... ou ${item.imageUrl}\" />\n                      <button mat-icon-button matSuffix type=\"button\" class=\"help-icon-button\"\n                        matTooltip=\"Use URL absoluta/relativa ou express\u00E3o ${item.campo}.\">\n                        <mat-icon>help_outline</mat-icon>\n                      </button>\n                      <mat-error *ngIf=\"isImageUrlRequiredInvalid(mappingTrailing.imageUrl)\">URL/expr obrigat\u00F3ria</mat-error>\n                    </mat-form-field>\n                  </div>\n                  <praxis-meta-editor-image [model]=\"mappingTrailing\" (change)=\"onMappingChanged()\"></praxis-meta-editor-image>\n                  <div class=\"text-caption muted\" *ngIf=\"!mappingTrailing.imageUrl\">Defina a URL/expr para renderizar a imagem.</div>\n                }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header><mat-panel-title>Estilo</mat-panel-title></mat-expansion-panel-header>\n                <div class=\"g gap-12 pt-12\">\n                  <div class=\"g g-1-1 gap-12\">\n                    <mat-form-field appearance=\"outline\"><mat-label>Classe</mat-label><input matInput\n                        [(ngModel)]=\"mappingTrailing.class\" (ngModelChange)=\"onMappingChanged()\" /></mat-form-field>\n                    <mat-form-field appearance=\"outline\"><mat-label>Style</mat-label><input matInput\n                        [(ngModel)]=\"mappingTrailing.style\" (ngModelChange)=\"onMappingChanged()\" /></mat-form-field>\n                  </div>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n\n          <!-- Leading -->\n          <mat-expansion-panel\n            [expanded]=\"!!mappingLeading.field || (mappingLeading.type === 'icon' && !!mappingLeading.icon) || (mappingLeading.type === 'image' && !!mappingLeading.imageUrl)\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>{{ getTypeIcon(mappingLeading.type) }}</mat-icon>\n                  <span>Leading (Esquerda)</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>\n                {{ mappingLeading.type === 'icon' ? (mappingLeading.icon || '\u00CDcone est\u00E1tico') :\n                (mappingLeading.field || (mappingLeading.imageUrl ? 'Imagem est\u00E1tica' : 'N\u00E3o mapeado'))\n                }}\n              </mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"g gap-12\">\n              <div class=\"g g-1-1 gap-12\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Tipo</mat-label>\n                  <mat-select [(ngModel)]=\"mappingLeading.type\" (ngModelChange)=\"onMappingChanged()\">\n                    <mat-option *ngFor=\"let mt of leadingTypeConfigs\" [value]=\"mt.type\">\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ mt.label }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <!-- Field (only if not static icon/image, though user might want dynamic) -->\n                <mat-form-field appearance=\"outline\"\n                  *ngIf=\"mappingLeading.type !== 'icon' && mappingLeading.type !== 'image'\">\n                  <mat-label>Campo</mat-label>\n                  <mat-select [(ngModel)]=\"mappingLeading.field\" (ngModelChange)=\"onMappingChanged()\">\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{ f }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">Presets</span>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingLeading.type='icon'; mappingLeading.icon='person'; mappingLeading.iconColor='primary'; onMappingChanged()\">Avatar \u00CDcone</button>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingLeading.type='image'; mappingLeading.imageUrl='https://placehold.co/64x64'; mappingLeading.imageAlt='Avatar'; mappingLeading.badgeText='${item.status}'; onMappingChanged()\">Avatar Imagem + Badge</button>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingLeading.type='chip'; mappingLeading.field='tag'; mappingLeading.chipColor='accent'; mappingLeading.chipVariant='filled'; onMappingChanged()\">Chip Tag</button>\n              </div>\n\n              <!-- Icon Specific -->\n              <div class=\"g g-1-auto gap-12 ai-center\" *ngIf=\"mappingLeading.type === 'icon'\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>\u00CDcone</mat-label>\n                  <input matInput [(ngModel)]=\"mappingLeading.icon\" (ngModelChange)=\"onMappingChanged()\" />\n                  <button mat-icon-button matSuffix (click)=\"pickLeadingIcon()\"><mat-icon>search</mat-icon></button>\n                </mat-form-field>\n                <div class=\"text-caption muted\">Use pipe <code>|iconMap</code> no extra pipe para\n                  din\u00E2mico</div>\n              </div>\n              <div *ngIf=\"mappingLeading.type === 'icon'\">\n                <praxis-meta-editor-icon\n                  [model]=\"mappingLeading\"\n                  [paletteOptions]=\"paletteOptions\"\n                  [colorDotBackground]=\"colorDotBackground\"\n                  [isCustomColor]=\"isCustomColor\"\n                  [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                  (change)=\"onMappingChanged()\"></praxis-meta-editor-icon>\n              </div>\n\n              <!-- Image Specific -->\n              <div class=\"g g-1-1 gap-12\" *ngIf=\"mappingLeading.type === 'image'\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>URL da Imagem</mat-label>\n                  <input matInput [(ngModel)]=\"mappingLeading.imageUrl\" (ngModelChange)=\"onMappingChanged()\"\n                    placeholder=\"https://... ou ${item.imageUrl}\" />\n                  <button mat-icon-button matSuffix type=\"button\" class=\"help-icon-button\"\n                    matTooltip=\"Use URL absoluta/relativa ou express\u00E3o ${item.campo}.\">\n                    <mat-icon>help_outline</mat-icon>\n                  </button>\n                  <mat-error *ngIf=\"isImageUrlRequiredInvalid(mappingLeading.imageUrl)\">URL/expr obrigat\u00F3ria</mat-error>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Alt Text</mat-label>\n                  <input matInput [(ngModel)]=\"mappingLeading.imageAlt\" (ngModelChange)=\"onMappingChanged()\" />\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Badge Texto</mat-label>\n                  <input matInput [(ngModel)]=\"mappingLeading.badgeText\" (ngModelChange)=\"onMappingChanged()\" />\n                </mat-form-field>\n              </div>\n\n              @switch (mappingLeading.type) {\n                @case ('text') { <praxis-meta-editor-text [model]=\"mappingLeading\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('html') { <praxis-meta-editor-text [model]=\"mappingLeading\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('chip') {\n                  <praxis-meta-editor-chip\n                    [model]=\"mappingLeading\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-chip>\n                }\n                @case ('rating') {\n                  <praxis-meta-editor-rating\n                    [model]=\"mappingLeading\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-rating>\n                }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header><mat-panel-title>Estilo</mat-panel-title></mat-expansion-panel-header>\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field appearance=\"outline\"><mat-label>Classe</mat-label><input matInput\n                      [(ngModel)]=\"mappingLeading.class\" (ngModelChange)=\"onMappingChanged()\" /></mat-form-field>\n                  <mat-form-field appearance=\"outline\"><mat-label>Style</mat-label><input matInput\n                      [(ngModel)]=\"mappingLeading.style\" (ngModelChange)=\"onMappingChanged()\" /></mat-form-field>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n\n          <!-- Features -->\n          <mat-expansion-panel [expanded]=\"featuresVisible && features.length > 0\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>view_list</mat-icon>\n                  <span>Recursos (Features)</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{ features.length }} item(s)</mat-panel-description>\n            </mat-expansion-panel-header>\n\n            <div class=\"g gap-12\">\n              <div class=\"g row-flow gap-12 ai-center\">\n                <mat-slide-toggle [(ngModel)]=\"featuresVisible\" (ngModelChange)=\"onFeaturesChanged()\">Ativar\n                  recursos</mat-slide-toggle>\n                <mat-slide-toggle [(ngModel)]=\"featuresSyncWithMeta\" (ngModelChange)=\"onMappingChanged()\">Sincronizar\n                  com Meta</mat-slide-toggle>\n                <span class=\"flex-1\"></span>\n                <mat-button-toggle-group [(ngModel)]=\"featuresMode\" (change)=\"onFeaturesChanged()\" appearance=\"legacy\">\n                  <mat-button-toggle value=\"icons+labels\"><mat-icon>view_list</mat-icon></mat-button-toggle>\n                  <mat-button-toggle value=\"icons-only\"><mat-icon>more_horiz</mat-icon></mat-button-toggle>\n                </mat-button-toggle-group>\n              </div>\n\n              <div *ngFor=\"let f of features; let i = index\" class=\"g g-auto-1 gap-8 ai-center p-8 border rounded mb-2\">\n                <button mat-icon-button (click)=\"pickFeatureIcon(i)\"><mat-icon>{{ f.icon || 'search'\n                    }}</mat-icon></button>\n                <mat-form-field appearance=\"outline\" class=\"dense-form-field no-sub\">\n                  <input matInput [(ngModel)]=\"f.expr\" (ngModelChange)=\"onFeaturesChanged()\" placeholder=\"Expr/Texto\" />\n                </mat-form-field>\n                <button mat-icon-button color=\"warn\" (click)=\"removeFeature(i)\"><mat-icon>delete</mat-icon></button>\n              </div>\n              <button mat-button color=\"primary\" (click)=\"addFeature()\"><mat-icon>add</mat-icon>\n                Adicionar recurso</button>\n            </div>\n          </mat-expansion-panel>\n          <!-- Section Header -->\n          <mat-expansion-panel [expanded]=\"!!mappingSectionHeader.expr\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>{{ getTypeIcon(mappingSectionHeader.type) }}</mat-icon>\n                  <span>Cabe\u00E7alho de Se\u00E7\u00E3o</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{ mappingSectionHeader.expr || 'N\u00E3o configurado'\n                }}</mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"g gap-12\">\n              <div class=\"g g-1-1 gap-12\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Tipo</mat-label>\n                  <mat-select [(ngModel)]=\"mappingSectionHeader.type\" (ngModelChange)=\"onMappingChanged()\">\n                    <mat-option *ngFor=\"let mt of sectionHeaderTypeConfigs\" [value]=\"mt.type\">\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ mt.label }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Express\u00E3o (item.key)</mat-label>\n                  <input matInput [(ngModel)]=\"mappingSectionHeader.expr\" (ngModelChange)=\"onMappingChanged()\"\n                    placeholder=\"item.key\" />\n                </mat-form-field>\n              </div>\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">Presets</span>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingSectionHeader.type='text'; mappingSectionHeader.expr='${item.key}'; onMappingChanged()\">Texto padr\u00E3o</button>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingSectionHeader.type='chip'; mappingSectionHeader.chipColor='primary'; mappingSectionHeader.chipVariant='filled'; mappingSectionHeader.expr='${item.key}'; onMappingChanged()\">Chip padr\u00E3o</button>\n              </div>\n\n              @switch (mappingSectionHeader.type) {\n                @case ('text') { <praxis-meta-editor-text [model]=\"mappingSectionHeader\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('html') { <praxis-meta-editor-text [model]=\"mappingSectionHeader\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('chip') {\n                  <praxis-meta-editor-chip\n                    [model]=\"mappingSectionHeader\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-chip>\n                }\n                @case ('rating') {\n                  <praxis-meta-editor-rating\n                    [model]=\"mappingSectionHeader\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-rating>\n                }\n                @case ('icon') {\n                  <praxis-meta-editor-icon\n                    [model]=\"mappingSectionHeader\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-icon>\n                }\n                @case ('image') {\n                  <div class=\"g g-1-1 gap-12\">\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>URL Imagem</mat-label>\n                      <input matInput [(ngModel)]=\"mappingSectionHeader.imageUrl\" (ngModelChange)=\"onMappingChanged()\" />\n                      <mat-error *ngIf=\"isImageUrlRequiredInvalid(mappingSectionHeader.imageUrl)\">URL/expr obrigat\u00F3ria</mat-error>\n                    </mat-form-field>\n                  </div>\n                  <div class=\"text-caption muted\" *ngIf=\"!mappingSectionHeader.imageUrl\">Defina a URL/expr para renderizar a imagem.</div>\n                  <praxis-meta-editor-image [model]=\"mappingSectionHeader\" (change)=\"onMappingChanged()\"></praxis-meta-editor-image>\n                }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header><mat-panel-title>Estilo</mat-panel-title></mat-expansion-panel-header>\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field appearance=\"outline\"><mat-label>Classe</mat-label><input matInput\n                      [(ngModel)]=\"mappingSectionHeader.class\" (ngModelChange)=\"onMappingChanged()\" /></mat-form-field>\n                  <mat-form-field appearance=\"outline\"><mat-label>Style</mat-label><input matInput\n                      [(ngModel)]=\"mappingSectionHeader.style\" (ngModelChange)=\"onMappingChanged()\" /></mat-form-field>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n\n          <!-- Empty State -->\n          <mat-expansion-panel [expanded]=\"!!mappingEmptyState.expr\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>inbox</mat-icon>\n                  <span>Estado Vazio</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{ mappingEmptyState.expr || 'Padr\u00E3o' }}</mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"g gap-12\">\n              <div class=\"g g-1-1 gap-12\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Tipo</mat-label>\n                  <mat-select [(ngModel)]=\"mappingEmptyState.type\" (ngModelChange)=\"onMappingChanged()\">\n                    <mat-option *ngFor=\"let mt of emptyStateTypeConfigs\" [value]=\"mt.type\">\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ mt.label }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Mensagem / Expr</mat-label>\n                  <input matInput [(ngModel)]=\"mappingEmptyState.expr\" (ngModelChange)=\"onMappingChanged()\" />\n                </mat-form-field>\n              </div>\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">Presets</span>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingEmptyState.type='text'; mappingEmptyState.expr='Nenhum item dispon\u00EDvel'; onMappingChanged()\">Mensagem padr\u00E3o</button>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingEmptyState.type='image'; mappingEmptyState.imageUrl='/list-empty-state.svg'; mappingEmptyState.imageAlt='Sem resultados'; onMappingChanged()\">Imagem padr\u00E3o</button>\n              </div>\n\n              @switch (mappingEmptyState.type) {\n                @case ('text') { <praxis-meta-editor-text [model]=\"mappingEmptyState\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('html') { <praxis-meta-editor-text [model]=\"mappingEmptyState\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('chip') {\n                  <praxis-meta-editor-chip\n                    [model]=\"mappingEmptyState\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-chip>\n                }\n                @case ('rating') {\n                  <praxis-meta-editor-rating\n                    [model]=\"mappingEmptyState\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-rating>\n                }\n                @case ('icon') {\n                  <praxis-meta-editor-icon\n                    [model]=\"mappingEmptyState\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-icon>\n                }\n                @case ('image') {\n                  <div class=\"g g-1-1 gap-12\">\n                    <mat-form-field appearance=\"outline\"><mat-label>URL Imagem</mat-label><input matInput\n                        [(ngModel)]=\"mappingEmptyState.imageUrl\" (ngModelChange)=\"onMappingChanged()\" />\n                        <mat-error *ngIf=\"isImageUrlRequiredInvalid(mappingEmptyState.imageUrl)\">URL/expr obrigat\u00F3ria</mat-error>\n                      </mat-form-field>\n                  </div>\n                  <div class=\"text-caption muted\" *ngIf=\"!mappingEmptyState.imageUrl\">Defina a URL/expr para renderizar a imagem.</div>\n                  <praxis-meta-editor-image [model]=\"mappingEmptyState\" (change)=\"onMappingChanged()\"></praxis-meta-editor-image>\n                }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header><mat-panel-title>Estilo</mat-panel-title></mat-expansion-panel-header>\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field appearance=\"outline\"><mat-label>Classe</mat-label><input matInput\n                      [(ngModel)]=\"mappingEmptyState.class\" (ngModelChange)=\"onMappingChanged()\" /></mat-form-field>\n                  <mat-form-field appearance=\"outline\"><mat-label>Style</mat-label><input matInput\n                      [(ngModel)]=\"mappingEmptyState.style\" (ngModelChange)=\"onMappingChanged()\" /></mat-form-field>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n        </mat-accordion>\n\n        <button mat-flat-button color=\"primary\" (click)=\"applyTemplate()\">Aplicar mapeamento</button>\n        <button mat-button (click)=\"inferFromFields()\" [disabled]=\"!fields.length\">Inferir do schema</button>\n        <div class=\"g g-auto-220 gap-12 ai-end mt-12\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Skeleton (quantidade)</mat-label>\n            <input matInput type=\"number\" min=\"0\" [(ngModel)]=\"skeletonCountInput\"\n              (ngModelChange)=\"onSkeletonChanged($event)\" />\n          </mat-form-field>\n        </div>\n\n        <div class=\"g gap-12 mt-12\">\n          <div class=\"g row-flow gap-8 ai-center\">\n            <span class=\"section-title mat-subtitle-1\">Pr\u00E9via de tema</span>\n            <mat-button-toggle-group [(ngModel)]=\"skinPreviewTheme\" (change)=\"onSkinChanged()\" appearance=\"legacy\">\n              <mat-button-toggle [value]=\"'light'\">Claro</mat-button-toggle>\n              <mat-button-toggle [value]=\"'dark'\">Escuro</mat-button-toggle>\n              <mat-button-toggle [value]=\"'grid'\">Grade</mat-button-toggle>\n            </mat-button-toggle-group>\n          </div>\n          <div class=\"skin-preview-wrap\">\n            <praxis-list-skin-preview [config]=\"working\" [items]=\"previewData\"\n              [theme]=\"skinPreviewTheme\"></praxis-list-skin-preview>\n          </div>\n        </div>\n      </div>\n    </div>\n\n  </mat-tab>\n  <mat-tab label=\"i18n/A11y\">\n    <div class=\"editor-content grid gap-3\" *ngIf=\"working?.a11y && working?.events\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Locale padr\u00E3o</mat-label>\n        <input matInput [(ngModel)]=\"working.i18n.locale\" (ngModelChange)=\"markDirty()\" placeholder=\"ex.: pt-BR\" />\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Moeda padr\u00E3o</mat-label>\n        <input matInput [(ngModel)]=\"working.i18n.currency\" (ngModelChange)=\"markDirty()\" placeholder=\"ex.: BRL\" />\n      </mat-form-field>\n      <mat-divider class=\"my-8\"></mat-divider>\n      <div class=\"subtitle\">Acessibilidade</div>\n      <div class=\"g g-auto-220 gap-12 ai-end\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>aria-label</mat-label>\n          <input matInput [(ngModel)]=\"working!.a11y!.ariaLabel\" (ngModelChange)=\"markDirty()\" />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>aria-labelledby</mat-label>\n          <input matInput [(ngModel)]=\"working!.a11y!.ariaLabelledBy\" (ngModelChange)=\"markDirty()\" />\n        </mat-form-field>\n      </div>\n      <div class=\"g g-auto-220 gap-12 ai-end\">\n        <mat-slide-toggle [(ngModel)]=\"working!.a11y!.highContrast\" (ngModelChange)=\"markDirty()\">Alto\n          contraste</mat-slide-toggle>\n        <mat-slide-toggle [(ngModel)]=\"working!.a11y!.reduceMotion\" (ngModelChange)=\"markDirty()\">Reduzir\n          movimento</mat-slide-toggle>\n      </div>\n      <mat-divider class=\"my-8\"></mat-divider>\n      <div class=\"subtitle\">Eventos</div>\n      <div class=\"g g-auto-220 gap-12 ai-end\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>itemClick</mat-label>\n          <input matInput [(ngModel)]=\"working!.events!.itemClick\" (ngModelChange)=\"markDirty()\" />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>actionClick</mat-label>\n          <input matInput [(ngModel)]=\"working!.events!.actionClick\" (ngModelChange)=\"markDirty()\" />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>selectionChange</mat-label>\n          <input matInput [(ngModel)]=\"working!.events!.selectionChange\" (ngModelChange)=\"markDirty()\" />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>loaded</mat-label>\n          <input matInput [(ngModel)]=\"working!.events!.loaded\" (ngModelChange)=\"markDirty()\" />\n        </mat-form-field>\n      </div>\n    </div>\n  </mat-tab>\n  <mat-tab label=\"Sele\u00E7\u00E3o\">\n    <div class=\"editor-content grid gap-3\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Modo</mat-label>\n        <mat-select [(ngModel)]=\"working.selection.mode\" (ngModelChange)=\"onSelectionChanged()\">\n          <mat-option value=\"none\">Sem sele\u00E7\u00E3o</mat-option>\n          <mat-option value=\"single\">\u00DAnica</mat-option>\n          <mat-option value=\"multiple\">M\u00FAltipla</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Nome no formul\u00E1rio</mat-label>\n        <input matInput [(ngModel)]=\"working.selection.formControlName\" (ngModelChange)=\"onSelectionChanged()\" />\n        <button mat-icon-button matSuffix type=\"button\" class=\"help-icon-button\" matTooltip=\"formControlName\">\n          <mat-icon>help_outline</mat-icon>\n        </button>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Caminho no formul\u00E1rio</mat-label>\n        <input matInput [(ngModel)]=\"working.selection.formControlPath\" (ngModelChange)=\"onSelectionChanged()\" />\n        <button mat-icon-button matSuffix type=\"button\" class=\"help-icon-button\" matTooltip=\"formControlPath\">\n          <mat-icon>help_outline</mat-icon>\n        </button>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Comparar por (campo)</mat-label>\n        <input matInput [(ngModel)]=\"working.selection.compareBy\" (ngModelChange)=\"onSelectionChanged()\" />\n        <button mat-icon-button matSuffix type=\"button\" class=\"help-icon-button\" matTooltip=\"Chave unica do item.\">\n          <mat-icon>help_outline</mat-icon>\n        </button>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Retorno</mat-label>\n        <mat-select [(ngModel)]=\"working.selection.return\" (ngModelChange)=\"onSelectionChanged()\">\n          <mat-option value=\"value\">value</mat-option>\n          <mat-option value=\"item\">item</mat-option>\n          <mat-option value=\"id\">id</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n  </mat-tab>\n  <mat-tab label=\"Apar\u00EAncia\">\n    <div class=\"editor-content grid gap-3\">\n      <div class=\"preset-row g row-flow gap-8\">\n        <button mat-button (click)=\"applySkinPreset('pill-soft')\">Pill Soft</button>\n        <button mat-button (click)=\"applySkinPreset('gradient-tile')\">Gradient Tile</button>\n        <button mat-button (click)=\"applySkinPreset('glass')\">Glass</button>\n        <button mat-button (click)=\"applySkinPreset('elevated')\">Elevated</button>\n        <button mat-button (click)=\"applySkinPreset('outline')\">Outline</button>\n        <button mat-button (click)=\"applySkinPreset('flat')\">Flat</button>\n        <button mat-button (click)=\"applySkinPreset('neumorphism')\">Neumorphism</button>\n      </div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Estilo</mat-label>\n        <mat-select [(ngModel)]=\"working.skin.type\" (ngModelChange)=\"onSkinTypeChanged($event)\">\n          <mat-option value=\"pill-soft\">Pill Soft</mat-option>\n          <mat-option value=\"gradient-tile\">Gradient Tile</mat-option>\n          <mat-option value=\"glass\">Glass</mat-option>\n          <mat-option value=\"elevated\">Elevated</mat-option>\n          <mat-option value=\"outline\">Outline</mat-option>\n          <mat-option value=\"flat\">Flat</mat-option>\n          <mat-option value=\"neumorphism\">Neumorphism</mat-option>\n          <mat-option value=\"custom\">Custom</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Raio</mat-label>\n        <input matInput [(ngModel)]=\"working.skin.radius\" (ngModelChange)=\"onSkinChanged()\"\n          placeholder=\"ex.: 1.25rem\" />\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Sombra</mat-label>\n        <input matInput [(ngModel)]=\"working.skin.shadow\" (ngModelChange)=\"onSkinChanged()\"\n          placeholder=\"ex.: var(--md-sys-elevation-level2)\" />\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Borda</mat-label>\n        <input matInput [(ngModel)]=\"working.skin.border\" (ngModelChange)=\"onSkinChanged()\" />\n      </mat-form-field>\n      <mat-form-field *ngIf=\"working.skin.type==='glass'\" appearance=\"outline\">\n        <mat-label>Desfoque</mat-label>\n        <input matInput [(ngModel)]=\"working.skin.backdropBlur\" (ngModelChange)=\"onSkinChanged()\"\n          placeholder=\"ex.: 8px\" />\n      </mat-form-field>\n      <div *ngIf=\"working.skin.type==='gradient-tile'\" class=\"g gap-12\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Degrad\u00EA de</mat-label>\n          <input matInput [ngModel]=\"working.skin.gradient.from || ''\"\n            (ngModelChange)=\"onSkinGradientChanged('from', $event)\" />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Degrad\u00EA at\u00E9</mat-label>\n          <input matInput [ngModel]=\"working.skin.gradient.to || ''\"\n            (ngModelChange)=\"onSkinGradientChanged('to', $event)\" />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>\u00C2ngulo</mat-label>\n          <input matInput type=\"number\" [ngModel]=\"working.skin.gradient.angle ?? 135\"\n            (ngModelChange)=\"onSkinGradientChanged('angle', $event)\" />\n        </mat-form-field>\n      </div>\n\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Classe CSS extra (skin.class)</mat-label>\n        <input matInput [(ngModel)]=\"working.skin.class\" (ngModelChange)=\"onSkinChanged()\"\n          placeholder=\"ex.: my-list-skin\" />\n      </mat-form-field>\n\n      <div *ngIf=\"working.skin.type==='custom'\" class=\"g g-auto-220 gap-12 ai-end\">\n        <mat-form-field appearance=\"outline\" class=\"w-full\">\n          <mat-label>Estilo inline (skin.inlineStyle)</mat-label>\n          <textarea matInput rows=\"4\" [(ngModel)]=\"working.skin.inlineStyle\" (ngModelChange)=\"onSkinChanged()\"\n            [attr.placeholder]=\"':host{--p-list-radius: 1rem}'\"></textarea>\n        </mat-form-field>\n        <div class=\"text-caption\">\n          Exemplo de CSS por classe (adicione no seu styles global):\n          <pre class=\"code-block\">.my-list-skin .item-card &#123;\n  border-radius: 14px;\n  border: 1px solid var(--md-sys-color-outline-variant);\n  box-shadow: var(--md-sys-elevation-level2);\n&#125;\n.my-list-skin .mat-mdc-list-item .list-item-content &#123;\n  backdrop-filter: blur(6px);\n&#125;</pre>\n        </div>\n      </div>\n\n\n    </div>\n  </mat-tab>\n</mat-tab-group>\n", styles: [".confirm-type{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;font-size:11px;line-height:16px;background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface-variant)}.confirm-type.danger{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container)}.confirm-type.warning{background:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container)}.confirm-type.info{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}:host{display:block;color:var(--md-sys-color-on-surface)}.list-editor-tabs{--editor-surface: var(--md-sys-color-surface-container-lowest);--editor-border: 1px solid var(--md-sys-color-outline-variant);--editor-radius: var(--md-sys-shape-corner-large, 16px);--editor-muted: var(--md-sys-color-on-surface-variant);--editor-accent: var(--md-sys-color-primary)}.editor-content{padding:16px;background:var(--editor-surface);border:var(--editor-border);border-radius:var(--editor-radius);display:grid;gap:12px}.editor-content .mat-mdc-form-field{width:100%;max-width:none;--mdc-outlined-text-field-container-height: 48px;--mdc-outlined-text-field-outline-color: var(--md-sys-color-outline-variant);--mdc-outlined-text-field-hover-outline-color: var(--md-sys-color-outline);--mdc-outlined-text-field-focus-outline-color: var(--md-sys-color-primary);--mdc-outlined-text-field-error-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-error-focus-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-error-hover-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-label-text-color: var(--md-sys-color-on-surface-variant);--mdc-outlined-text-field-input-text-color: var(--md-sys-color-on-surface);--mdc-outlined-text-field-supporting-text-color: var(--md-sys-color-on-surface-variant)}.editor-content .mat-mdc-form-field.w-full{max-width:none}.help-icon-button{--mdc-icon-button-state-layer-size: 28px;--mdc-icon-button-icon-size: 18px;width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}.help-icon-button mat-icon{font-size:18px;line-height:18px;width:18px;height:18px}.editor-split{grid-template-columns:minmax(0,1fr);align-items:start}.editor-main,.editor-aside{display:grid;gap:12px}.skin-preview-wrap{border-radius:calc(var(--editor-radius) - 4px);border:var(--editor-border);background:var(--md-sys-color-surface-container);padding:12px}.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;color:var(--editor-muted);font-weight:500}.section-title{color:var(--editor-muted);font-weight:600}.chips-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.error{color:var(--md-sys-color-error);font-size:.85rem}.muted{color:var(--editor-muted)}.text-caption{color:var(--editor-muted);font-size:.8rem}:host ::ng-deep .mat-mdc-select-panel .option-icon{font-size:18px;margin-right:6px;vertical-align:middle}:host ::ng-deep .mat-mdc-select-panel .color-dot{width:10px;height:10px;border-radius:999px;display:inline-block;margin-right:6px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-outline)}:host ::ng-deep .mat-mdc-select-panel .color-primary{background:var(--md-sys-color-primary)}:host ::ng-deep .mat-mdc-select-panel .color-accent{background:var(--md-sys-color-tertiary)}:host ::ng-deep .mat-mdc-select-panel .color-warn{background:var(--md-sys-color-error)}:host ::ng-deep .mat-mdc-select-panel .color-default{background:var(--md-sys-color-outline)}@media(max-width:1024px){.editor-split{grid-template-columns:minmax(0,1fr)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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$3.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i3$3.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: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.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: i4$1.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: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.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: i6.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: "directive", type: i10.MatExpansionPanelDescription, selector: "mat-panel-description" }, { 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: "ngmodule", type: MatMenuModule }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "component", type: PraxisListSkinPreviewComponent, selector: "praxis-list-skin-preview", inputs: ["config", "items", "theme"] }, { kind: "component", type: PraxisMetaEditorTextComponent, selector: "praxis-meta-editor-text", inputs: ["model", "setPipe"], outputs: ["change"] }, { kind: "component", type: PraxisMetaEditorChipComponent, selector: "praxis-meta-editor-chip", inputs: ["model", "paletteOptions", "colorDotBackground", "isCustomColor", "enableCustomColor"], outputs: ["change"] }, { kind: "component", type: PraxisMetaEditorRatingComponent, selector: "praxis-meta-editor-rating", inputs: ["model", "paletteOptions", "colorDotBackground", "isCustomColor", "enableCustomColor"], outputs: ["change"] }, { kind: "component", type: PraxisMetaEditorCurrencyComponent, selector: "praxis-meta-editor-currency", inputs: ["model"], outputs: ["change"] }, { kind: "component", type: PraxisMetaEditorDateComponent, selector: "praxis-meta-editor-date", inputs: ["model"], outputs: ["change"] }, { kind: "component", type: PraxisMetaEditorIconComponent, selector: "praxis-meta-editor-icon", inputs: ["model", "paletteOptions", "colorDotBackground", "isCustomColor", "enableCustomColor"], outputs: ["change"] }, { kind: "component", type: PraxisMetaEditorImageComponent, selector: "praxis-meta-editor-image", inputs: ["model"], outputs: ["change"] }, { kind: "component", type: PraxisListJsonConfigEditorComponent, selector: "praxis-list-json-config-editor", inputs: ["document"], outputs: ["documentChange", "validationChange", "editorEvent"] }, { kind: "component", type: PdxColorPickerComponent, selector: "pdx-color-picker", inputs: ["actionsLayout", "activeView", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "clearButton", "disabledMode", "readonlyMode", "visible", "presentationMode", "fillMode", "format", "gradientSettings", "icon", "iconClass", "svgIcon", "paletteSettings", "popupSettings", "preview", "rounded", "size", "tabindex", "views", "maxRecent", "showRecent"], outputs: ["valueChange", "open", "close", "cancel", "activeViewChange", "activeColorClick", "focusEvent", "blurEvent"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisListConfigEditor, decorators: [{
             type: Component,
@@ -2855,8 +3659,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         PraxisMetaEditorDateComponent,
                         PraxisMetaEditorIconComponent,
                         PraxisMetaEditorImageComponent,
+                        PraxisListJsonConfigEditorComponent,
                         PdxColorPickerComponent,
-                    ], template: "<mat-tab-group class=\"list-editor-tabs\">\n  <mat-tab label=\"Dados\">\n    <div class=\"editor-content\">\n      <div class=\"g g-1-auto gap-8 ai-center\">\n        <div class=\"muted\">Observa\u00E7\u00E3o: ajustes aplicados pelo assistente substituem o objeto de configura\u00E7\u00E3o inteiro.\n        </div>\n        <button mat-icon-button type=\"button\" class=\"help-icon-button\"\n          matTooltip=\"O applyConfigFromAdapter n\u00E3o faz merge profundo. Garanta que o adapter envie a config completa.\">\n          <mat-icon>help_outline</mat-icon>\n        </button>\n      </div>\n      <mat-form-field appearance=\"outline\" class=\"w-full\">\n        <mat-label>Recurso (API)</mat-label>\n        <input matInput [(ngModel)]=\"working.dataSource.resourcePath\" (ngModelChange)=\"onResourcePathChange($event)\"\n          placeholder=\"ex.: users\" />\n        <button mat-icon-button matSuffix type=\"button\" class=\"help-icon-button\"\n          matTooltip=\"Endpoint do recurso (resourcePath).\">\n          <mat-icon>help_outline</mat-icon>\n        </button>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\" class=\"w-full\">\n        <mat-label>Query (JSON)</mat-label>\n        <textarea matInput rows=\"3\" [(ngModel)]=\"queryJson\" (ngModelChange)=\"onQueryChanged($event)\"\n          placeholder='ex.: &#123;\"status\":\"active\",\"department\":\"sales\"&#125;'></textarea>\n        <button mat-icon-button matSuffix type=\"button\" class=\"help-icon-button\"\n          matTooltip=\"Opcional. Use JSON v\u00E1lido para filtros iniciais.\" *ngIf=\"!queryError\">\n          <mat-icon>help_outline</mat-icon>\n        </button>\n        <mat-error *ngIf=\"queryError\">{{ queryError }}</mat-error>\n      </mat-form-field>\n      <div class=\"g g-auto-220 gap-12 ai-end mt-12\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Ordenar por</mat-label>\n          <mat-select [(ngModel)]=\"sortField\" (ngModelChange)=\"updateSortConfig()\">\n            <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{ f }}</mat-option>\n          </mat-select>\n          <button mat-icon-button matSuffix type=\"button\" class=\"help-icon-button\" matTooltip=\"Campo base do recurso.\">\n            <mat-icon>help_outline</mat-icon>\n          </button>\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Dire\u00E7\u00E3o</mat-label>\n          <mat-select [(ngModel)]=\"sortDir\" (ngModelChange)=\"updateSortConfig()\">\n            <mat-option value=\"asc\">Ascendente</mat-option>\n            <mat-option value=\"desc\">Descendente</mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n    </div>\n  </mat-tab>\n  <mat-tab label=\"A\u00E7\u00F5es\">\n    <div class=\"editor-content g gap-12\">\n      <div class=\"g g-1-auto gap-8 ai-center\">\n        <div class=\"muted\">Configure bot\u00F5es de a\u00E7\u00E3o por item (\u00EDcone, r\u00F3tulo, cor, visibilidade)</div>\n        <button mat-flat-button color=\"primary\" (click)=\"addAction()\">Adicionar a\u00E7\u00E3o</button>\n      </div>\n      <div class=\"g g-1-auto gap-8 ai-center\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>A\u00E7\u00E3o global (Praxis)</mat-label>\n          <mat-select [(ngModel)]=\"selectedGlobalActionId\" (ngModelChange)=\"onGlobalActionSelected($event)\">\n            <mat-option [value]=\"undefined\">-- Selecionar --</mat-option>\n            <mat-option *ngFor=\"let ga of globalActionCatalog\" [value]=\"ga.id\">\n              <mat-icon class=\"option-icon\">{{ ga.icon || 'bolt' }}</mat-icon>\n              {{ ga.label }}\n            </mat-option>\n          </mat-select>\n          <mat-hint *ngIf=\"!globalActionCatalog.length\" class=\"text-caption muted\">Nenhuma a\u00E7\u00E3o global registrada.</mat-hint>\n        </mat-form-field>\n        <div class=\"muted text-caption\">Selecione para adicionar com `command` global.</div>\n      </div>\n      <div *ngFor=\"let a of (working.actions || []); let i = index\" class=\"g g-auto-200 gap-12 ai-end\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>ID</mat-label>\n          <input matInput [(ngModel)]=\"a.id\" (ngModelChange)=\"onActionsChanged()\" />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Tipo de a\u00E7\u00E3o</mat-label>\n          <mat-select [(ngModel)]=\"a.kind\" (ngModelChange)=\"onActionsChanged()\">\n            <mat-option value=\"icon\">\u00CDcone</mat-option>\n            <mat-option value=\"button\">Bot\u00E3o</mat-option>\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>\u00CDcone</mat-label>\n          <input matInput [(ngModel)]=\"a.icon\" (ngModelChange)=\"onActionsChanged()\" placeholder=\"ex.: edit, delete\" />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Command (global)</mat-label>\n          <input matInput [(ngModel)]=\"a.command\" (ngModelChange)=\"onActionsChanged()\" placeholder=\"global:toast.success\" />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>R\u00F3tulo</mat-label>\n          <input matInput [(ngModel)]=\"a.label\" (ngModelChange)=\"onActionsChanged()\" />\n        </mat-form-field>\n        <ng-container *ngIf=\"a.kind === 'button'\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Variante</mat-label>\n            <mat-select [(ngModel)]=\"a.buttonVariant\" (ngModelChange)=\"onActionsChanged()\">\n              <mat-option value=\"stroked\">Contorno</mat-option>\n              <mat-option value=\"raised\">Elevado</mat-option>\n              <mat-option value=\"flat\">Preenchido</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </ng-container>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Cor da a\u00E7\u00E3o</mat-label>\n          <mat-select [(ngModel)]=\"a.color\" (ngModelChange)=\"onActionsChanged()\">\n            <mat-option *ngFor=\"let c of paletteOptions\" [value]=\"c.value\">\n              <span class=\"color-dot\" [style.background]=\"colorDotBackground(c.value)\"></span>{{ c.label }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n        <div class=\"g gap-8\" *ngIf=\"isCustomColor(a.color); else actionCustomBtn\">\n          <pdx-color-picker label=\"Cor personalizada\" [format]=\"'hex'\" [(ngModel)]=\"a.color\"\n            (ngModelChange)=\"onActionsChanged()\"></pdx-color-picker>\n        </div>\n        <ng-template #actionCustomBtn>\n          <button mat-stroked-button type=\"button\" (click)=\"enableCustomActionColor(a)\">Usar cor personalizada</button>\n        </ng-template>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Payload da a\u00E7\u00E3o</mat-label>\n          <mat-select [(ngModel)]=\"a.emitPayload\" (ngModelChange)=\"onActionsChanged()\">\n            <mat-option [value]=\"undefined\">Padr\u00E3o</mat-option>\n            <mat-option value=\"item\">item</mat-option>\n            <mat-option value=\"id\">id</mat-option>\n            <mat-option value=\"value\">value</mat-option>\n          </mat-select>\n          <button mat-icon-button matSuffix type=\"button\" class=\"help-icon-button\" matTooltip=\"emitPayload\">\n            <mat-icon>help_outline</mat-icon>\n          </button>\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\" class=\"col-span-2\">\n          <mat-label>Exibir quando (ex.: &#36;&#123;item.status&#125; == 'done')</mat-label>\n          <input matInput [(ngModel)]=\"a.showIf\" (ngModelChange)=\"onActionsChanged()\" />\n          <button mat-icon-button matSuffix type=\"button\" class=\"help-icon-button\"\n            matTooltip=\"Sintaxe suportada: &#34;&#36;{item.campo} == &#39;valor&#39;&#34;. Express\u00F5es avan\u00E7adas n\u00E3o s\u00E3o avaliadas.\">\n            <mat-icon>help_outline</mat-icon>\n          </button>\n        </mat-form-field>\n        <div class=\"g row-flow gap-8 ai-center\">\n          <button *ngIf=\"(a.kind || 'icon') === 'icon'\" mat-icon-button\n            [color]=\"isThemeColor(a.color) ? a.color : undefined\"><mat-icon\n              [praxisIcon]=\"a.icon || 'bolt'\" [style.cssText]=\"iconStyle(a.color)\"></mat-icon></button>\n          <ng-container *ngIf=\"a.kind === 'button'\">\n            <button *ngIf=\"a.buttonVariant === 'stroked'\" mat-stroked-button\n              [color]=\"isThemeColor(a.color) ? a.color : undefined\" [style.cssText]=\"buttonStyle(a.color, 'stroked')\">{{ a.label\n              || a.id || 'A\u00E7\u00E3o' }}</button>\n            <button *ngIf=\"a.buttonVariant === 'raised'\" mat-raised-button\n              [color]=\"isThemeColor(a.color) ? a.color : undefined\" [style.cssText]=\"buttonStyle(a.color, 'raised')\">{{ a.label ||\n              a.id || 'A\u00E7\u00E3o' }}</button>\n            <button *ngIf=\"!a.buttonVariant || a.buttonVariant === 'flat'\" mat-flat-button\n              [color]=\"isThemeColor(a.color) ? a.color : undefined\" [style.cssText]=\"buttonStyle(a.color, 'flat')\">{{ a.label || a.id || 'A\u00E7\u00E3o' }}</button>\n          </ng-container>\n          <span class=\"muted\">Pr\u00E9-visualiza\u00E7\u00E3o</span>\n        </div>\n        <div class=\"flex-end\">\n          <button mat-button color=\"warn\" (click)=\"removeAction(i)\">Remover</button>\n        </div>\n        <div class=\"g gap-8 col-span-2\" *ngIf=\"a.command\">\n          <mat-slide-toggle [(ngModel)]=\"a.showLoading\" (ngModelChange)=\"onActionsChanged()\">Mostrar loading</mat-slide-toggle>\n          <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n            <mat-expansion-panel-header><mat-panel-title>Confirma\u00E7\u00E3o</mat-panel-title></mat-expansion-panel-header>\n            <div class=\"g gap-12 pt-12\">\n              <div class=\"g row-flow gap-8 ai-center\">\n                <span class=\"text-caption muted\">Tipo</span>\n                <mat-button-toggle-group [value]=\"a.confirmation?.type || ''\" (change)=\"applyConfirmationPreset(a, $event.value)\">\n                  <mat-button-toggle value=\"\">Padr\u00E3o</mat-button-toggle>\n                  <mat-button-toggle value=\"danger\">Danger</mat-button-toggle>\n                  <mat-button-toggle value=\"warning\">Warning</mat-button-toggle>\n                  <mat-button-toggle value=\"info\">Info</mat-button-toggle>\n                </mat-button-toggle-group>\n              </div>\n              <mat-form-field appearance=\"outline\">\n                <mat-label>T\u00EDtulo</mat-label>\n                <input matInput [ngModel]=\"a.confirmation?.title\" (ngModelChange)=\"setConfirmationField(a, 'title', $event)\" />\n              </mat-form-field>\n              <mat-form-field appearance=\"outline\">\n                <mat-label>Mensagem</mat-label>\n                <input matInput [ngModel]=\"a.confirmation?.message\" (ngModelChange)=\"setConfirmationField(a, 'message', $event)\" />\n              </mat-form-field>\n              <div class=\"g gap-6\">\n                <div class=\"text-caption muted\">Pr\u00E9via</div>\n                <div class=\"text-caption\">\n                  <strong>{{ a.confirmation?.title || 'Confirmar a\u00E7\u00E3o' }}</strong>\n                </div>\n                <div class=\"text-caption muted\">{{ a.confirmation?.message || 'Tem certeza que deseja continuar?' }}</div>\n                <div class=\"text-caption\">\n                  <span class=\"confirm-type\" [ngClass]=\"(a.confirmation?.type || 'default')\">Tipo: {{ a.confirmation?.type || 'padr\u00E3o' }}</span>\n                </div>\n                <div class=\"text-caption muted\" *ngIf=\"!a.confirmation?.title && !a.confirmation?.message\">\n                  Defina um t\u00EDtulo ou mensagem para a confirma\u00E7\u00E3o.\n                </div>\n              </div>\n            </div>\n          </mat-expansion-panel>\n          <mat-form-field appearance=\"outline\" class=\"col-span-2\">\n            <mat-label>Payload (JSON/Template)</mat-label>\n            <textarea matInput rows=\"4\" [(ngModel)]=\"a.globalPayload\" (ngModelChange)=\"onActionsChanged()\"\n              placeholder='{\"message\":\"${item.name} favoritado\"}'></textarea>\n            <button mat-icon-button matSuffix type=\"button\" class=\"help-icon-button\"\n              [matTooltip]=\"globalPayloadSchemaTooltip(a)\">\n              <mat-icon>help_outline</mat-icon>\n            </button>\n            <mat-error *ngIf=\"isGlobalPayloadInvalid(a.globalPayload)\">JSON inv\u00E1lido</mat-error>\n          </mat-form-field>\n          <div class=\"g row-flow gap-8 ai-center\">\n            <button mat-stroked-button type=\"button\" (click)=\"applyGlobalPayloadExample(a)\">Inserir exemplo</button>\n            <span class=\"muted text-caption\">{{ globalPayloadExampleHint(a) }}</span>\n          </div>\n          <mat-slide-toggle [(ngModel)]=\"a.emitLocal\" (ngModelChange)=\"onActionsChanged()\">Emitir evento local tamb\u00E9m</mat-slide-toggle>\n        </div>\n      </div>\n    </div>\n  </mat-tab>\n  <mat-tab label=\"Layout\">\n    <div class=\"editor-content grid gap-3\">\n      <div class=\"preset-row g row-flow gap-8\">\n        <button mat-stroked-button (click)=\"applyLayoutPreset('tiles-modern')\">Preset Tiles Moderno</button>\n      </div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Variante</mat-label>\n        <mat-select [(ngModel)]=\"working.layout.variant\" (ngModelChange)=\"onLayoutChanged()\">\n          <mat-option value=\"list\">Lista</mat-option>\n          <mat-option value=\"cards\">Cards</mat-option>\n          <mat-option value=\"tiles\">Tiles</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Modelo</mat-label>\n        <mat-select [(ngModel)]=\"working.layout.model\" (ngModelChange)=\"onLayoutChanged()\">\n          <ng-container *ngIf=\"working.layout.variant === 'list'; else cardModels\">\n            <mat-option value=\"standard\">Padr\u00E3o</mat-option>\n            <mat-option value=\"media\">M\u00EDdia \u00E0 esquerda</mat-option>\n            <mat-option value=\"hotel\">Hotel (m\u00EDdia grande)</mat-option>\n          </ng-container>\n          <ng-template #cardModels>\n            <ng-container *ngIf=\"working.layout.variant === 'tiles'; else cardsOnly\">\n              <mat-option value=\"standard\">Tile padr\u00E3o</mat-option>\n              <mat-option value=\"media\">Tile com m\u00EDdia</mat-option>\n              <mat-option value=\"hotel\">Tile hotel</mat-option>\n            </ng-container>\n            <ng-template #cardsOnly>\n              <mat-option value=\"standard\">Padr\u00E3o</mat-option>\n              <mat-option value=\"media\">Card com m\u00EDdia</mat-option>\n              <mat-option value=\"hotel\">Hotel</mat-option>\n            </ng-template>\n          </ng-template>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Linhas</mat-label>\n        <mat-select [(ngModel)]=\"working.layout.lines\" (ngModelChange)=\"onLayoutChanged()\">\n          <mat-option [value]=\"1\">1</mat-option>\n          <mat-option [value]=\"2\">2</mat-option>\n          <mat-option [value]=\"3\">3</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Itens por p\u00E1gina</mat-label>\n        <input matInput type=\"number\" min=\"1\" [(ngModel)]=\"working.layout.pageSize\"\n          (ngModelChange)=\"onPageSizeChange($event)\" />\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Densidade</mat-label>\n        <mat-select [(ngModel)]=\"working.layout.density\" (ngModelChange)=\"onLayoutChanged()\">\n          <mat-option value=\"default\">Padr\u00E3o</mat-option>\n          <mat-option value=\"comfortable\">Confort\u00E1vel</mat-option>\n          <mat-option value=\"compact\">Compacta</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\" *ngIf=\"working.layout.variant !== 'tiles'\">\n        <mat-label>Divisores</mat-label>\n        <mat-select [(ngModel)]=\"working.layout.dividers\" (ngModelChange)=\"onLayoutChanged()\">\n          <mat-option value=\"none\">Sem</mat-option>\n          <mat-option value=\"between\">Entre grupos</mat-option>\n          <mat-option value=\"all\">Todos</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <ng-container *ngIf=\"fields.length > 0; else groupByText\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Agrupar por</mat-label>\n          <mat-select [(ngModel)]=\"working.layout.groupBy\" (ngModelChange)=\"onLayoutChanged()\">\n            <mat-option [value]=\"\">Nenhum</mat-option>\n            <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{ f }}</mat-option>\n          </mat-select>\n        </mat-form-field>\n      </ng-container>\n      <ng-template #groupByText>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Agrupar por</mat-label>\n          <input matInput [(ngModel)]=\"working.layout.groupBy\" (ngModelChange)=\"onLayoutChanged()\"\n            placeholder=\"ex.: departamento\" />\n        </mat-form-field>\n      </ng-template>\n      <mat-slide-toggle [(ngModel)]=\"working.layout.stickySectionHeader\" (ngModelChange)=\"onLayoutChanged()\">\n        Header de se\u00E7\u00E3o fixo\n      </mat-slide-toggle>\n      <mat-slide-toggle [(ngModel)]=\"working.layout.virtualScroll\" (ngModelChange)=\"onLayoutChanged()\">\n        Scroll virtual\n      </mat-slide-toggle>\n      <mat-divider class=\"my-8\"></mat-divider>\n      <div class=\"subtitle\">Ferramentas da lista</div>\n      <div class=\"g g-auto-220 gap-12 ai-end\">\n        <mat-slide-toggle [(ngModel)]=\"working.ui.showSearch\" (ngModelChange)=\"onUiChanged()\">Mostrar\n          busca</mat-slide-toggle>\n        <mat-slide-toggle [(ngModel)]=\"working.ui.showSort\" (ngModelChange)=\"onUiChanged()\">Mostrar\n          ordenar</mat-slide-toggle>\n        <mat-slide-toggle [(ngModel)]=\"working.ui.showRange\" (ngModelChange)=\"onUiChanged()\">Mostrar faixa X\u2013Y de\n          Total</mat-slide-toggle>\n      </div>\n      <div class=\"g g-auto-220 gap-12 ai-end mt-12\" *ngIf=\"working.ui?.showSearch\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Campo para buscar</mat-label>\n          <mat-select [(ngModel)]=\"working.ui.searchField\" (ngModelChange)=\"onUiChanged()\">\n            <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{ f }}</mat-option>\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Placeholder da busca</mat-label>\n          <input matInput [(ngModel)]=\"working.ui.searchPlaceholder\" (ngModelChange)=\"onUiChanged()\"\n            placeholder=\"ex.: Buscar por t\u00EDtulo\" />\n        </mat-form-field>\n      </div>\n      <div class=\"mt-12\" *ngIf=\"working.ui?.showSort\">\n        <div class=\"g g-1-auto ai-center gap-8\">\n          <div class=\"muted\">Op\u00E7\u00F5es de ordena\u00E7\u00E3o (r\u00F3tulo \u2192 campo+dire\u00E7\u00E3o)</div>\n          <button mat-flat-button color=\"primary\" (click)=\"addUiSortRow()\">Adicionar op\u00E7\u00E3o</button>\n        </div>\n        <div class=\"g g-auto-220 gap-12 ai-end mt-12\" *ngFor=\"let r of uiSortRows; let i = index\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>R\u00F3tulo</mat-label>\n            <input matInput [(ngModel)]=\"r.label\" (ngModelChange)=\"onUiSortRowsChanged()\"\n              placeholder=\"ex.: Mais recentes\" />\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Campo</mat-label>\n            <mat-select [(ngModel)]=\"r.field\" (ngModelChange)=\"onUiSortRowsChanged()\">\n              <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{ f }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Dire\u00E7\u00E3o</mat-label>\n            <mat-select [(ngModel)]=\"r.dir\" (ngModelChange)=\"onUiSortRowsChanged()\">\n              <mat-option value=\"desc\">Descendente</mat-option>\n              <mat-option value=\"asc\">Ascendente</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <div class=\"error\" *ngIf=\"isUiSortRowDuplicate(i)\">Op\u00E7\u00E3o duplicada (campo+dire\u00E7\u00E3o)</div>\n          <div class=\"flex-end\"><button mat-button color=\"warn\" (click)=\"removeUiSortRow(i)\">Remover</button></div>\n        </div>\n      </div>\n    </div>\n  </mat-tab>\n  <mat-tab label=\"Conte\u00FAdo\">\n    <div class=\"editor-content\">\n      <div class=\"editor-main\">\n        <mat-accordion multi>\n          <!-- Primary -->\n          <mat-expansion-panel [expanded]=\"true\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>{{ getTypeIcon(mappingPrimary.type) }}</mat-icon>\n                  <span>Primary (T\u00EDtulo)</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{ mappingPrimary.field || 'N\u00E3o mapeado' }}</mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"g gap-12\">\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">Presets</span>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingPrimary.type='text'; mappingPrimary.field='name'; onMappingChanged()\">Nome</button>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingPrimary.type='text'; mappingPrimary.field='title'; onMappingChanged()\">T\u00EDtulo</button>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingPrimary.type='text'; mappingPrimary.field='name'; mappingSecondary.type='text'; mappingSecondary.field='role'; onMappingChanged()\">Nome + Papel</button>\n              </div>\n              <div class=\"g g-1-1 gap-12\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Campo</mat-label>\n                  <mat-select [(ngModel)]=\"mappingPrimary.field\" (ngModelChange)=\"onMappingChanged()\">\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{ f }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Tipo</mat-label>\n                  <mat-select [(ngModel)]=\"mappingPrimary.type\" (ngModelChange)=\"onMappingChanged()\">\n                    <mat-option *ngFor=\"let mt of primaryTypeConfigs\" [value]=\"mt.type\">\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ mt.label }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n\n              @switch (mappingPrimary.type) {\n                @case ('text') { <praxis-meta-editor-text [model]=\"mappingPrimary\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('html') { <praxis-meta-editor-text [model]=\"mappingPrimary\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('currency') { <praxis-meta-editor-currency [model]=\"mappingPrimary\" (change)=\"onMappingChanged()\"></praxis-meta-editor-currency> }\n                @case ('date') { <praxis-meta-editor-date [model]=\"mappingPrimary\" (change)=\"onMappingChanged()\"></praxis-meta-editor-date> }\n              }\n\n              <!-- Advanced -->\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header>\n                  <mat-panel-title>Formata\u00E7\u00E3o e Estilo</mat-panel-title>\n                </mat-expansion-panel-header>\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field appearance=\"outline\" *ngIf=\"mappingPrimary.type==='text' || mappingPrimary.type==='html'\">\n                    <mat-label>Classe CSS</mat-label>\n                    <input matInput [(ngModel)]=\"mappingPrimary.class\" (ngModelChange)=\"onMappingChanged()\" />\n                  </mat-form-field>\n                  <mat-form-field appearance=\"outline\" *ngIf=\"mappingPrimary.type==='text' || mappingPrimary.type==='html'\">\n                    <mat-label>Estilo Inline</mat-label>\n                    <input matInput [(ngModel)]=\"mappingPrimary.style\" (ngModelChange)=\"onMappingChanged()\" />\n                  </mat-form-field>\n                  <div class=\"g g-1-1 gap-12\">\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>Classe CSS</mat-label>\n                      <input matInput [(ngModel)]=\"mappingPrimary.class\" (ngModelChange)=\"onMappingChanged()\" />\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>Estilo Inline</mat-label>\n                      <input matInput [(ngModel)]=\"mappingPrimary.style\" (ngModelChange)=\"onMappingChanged()\" />\n                    </mat-form-field>\n                  </div>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n\n          <!-- Secondary -->\n          <mat-expansion-panel [expanded]=\"!!mappingSecondary.field\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>{{ getTypeIcon(mappingSecondary.type) }}</mat-icon>\n                  <span>Secondary (Resumo)</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{ mappingSecondary.field || 'N\u00E3o mapeado' }}</mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"g gap-12\">\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">Presets</span>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingSecondary.type='text'; mappingSecondary.field='subtitle'; onMappingChanged()\">Subt\u00EDtulo</button>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingSecondary.type='date'; mappingSecondary.field='hireDate'; mappingSecondary.dateStyle='short'; onMappingChanged()\">Data curta</button>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingSecondary.type='currency'; mappingSecondary.field='salary'; mappingSecondary.currencyCode='BRL'; mappingSecondary.locale='pt-BR'; onMappingChanged()\">Sal\u00E1rio</button>\n              </div>\n              <div class=\"g g-1-1 gap-12\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Campo</mat-label>\n                  <mat-select [(ngModel)]=\"mappingSecondary.field\" (ngModelChange)=\"onMappingChanged()\">\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{ f }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Tipo</mat-label>\n                  <mat-select [(ngModel)]=\"mappingSecondary.type\" (ngModelChange)=\"onMappingChanged()\">\n                    <mat-option *ngFor=\"let mt of secondaryTypeConfigs\" [value]=\"mt.type\">\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ mt.label }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n\n              @switch (mappingSecondary.type) {\n                @case ('text') { <praxis-meta-editor-text [model]=\"mappingSecondary\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('html') { <praxis-meta-editor-text [model]=\"mappingSecondary\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('currency') { <praxis-meta-editor-currency [model]=\"mappingSecondary\" (change)=\"onMappingChanged()\"></praxis-meta-editor-currency> }\n                @case ('date') { <praxis-meta-editor-date [model]=\"mappingSecondary\" (change)=\"onMappingChanged()\"></praxis-meta-editor-date> }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header>\n                  <mat-panel-title>Formata\u00E7\u00E3o e Estilo</mat-panel-title>\n                </mat-expansion-panel-header>\n                <div class=\"g gap-12 pt-12\">\n                  <div class=\"g g-1-1 gap-12\">\n                    <mat-form-field appearance=\"outline\"><mat-label>Classe CSS</mat-label><input matInput\n                        [(ngModel)]=\"mappingSecondary.class\" (ngModelChange)=\"onMappingChanged()\" /></mat-form-field>\n                    <mat-form-field appearance=\"outline\"><mat-label>Estilo Inline</mat-label><input matInput\n                        [(ngModel)]=\"mappingSecondary.style\" (ngModelChange)=\"onMappingChanged()\" /></mat-form-field>\n                  </div>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n\n          <mat-expansion-panel [expanded]=\"!!mappingMeta.field || mappingMetaFields.length > 0\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>{{ getTypeIcon(mappingMeta.type || 'text') }}</mat-icon>\n                  <span>Meta (Detalhe/Lateral)</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>\n                {{ mappingMetaFields.length ? 'Campo composto (' + mappingMetaFields.length + ')' :\n                (mappingMeta.field || 'N\u00E3o mapeado') }}\n              </mat-panel-description>\n            </mat-expansion-panel-header>\n\n            <div class=\"g gap-12\">\n              <!-- Composition Mode Toggle -->\n              <div class=\"g g-1-1 gap-12 p-12 bg-subtle rounded\">\n                <div class=\"text-caption muted\">Modo de composi\u00E7\u00E3o</div>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Campos para compor (Multi-select)</mat-label>\n                  <mat-select [(ngModel)]=\"mappingMetaFields\" multiple (ngModelChange)=\"onMappingChanged()\">\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{ f }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <div class=\"g g-1-1 ai-center gap-12\" *ngIf=\"mappingMetaFields.length\">\n                  <mat-form-field appearance=\"outline\">\n                    <mat-label>Separador</mat-label>\n                    <input matInput [(ngModel)]=\"mappingMetaSeparator\" (ngModelChange)=\"onMappingChanged()\" />\n                  </mat-form-field>\n                  <mat-slide-toggle [(ngModel)]=\"mappingMetaWrapSecondInParens\" (ngModelChange)=\"onMappingChanged()\">\n                    (Seg) entre par\u00EAnteses\n                  </mat-slide-toggle>\n                </div>\n              </div>\n\n              <!-- Single Field Mode (if no composition) -->\n              <div class=\"g g-1-1 gap-12\" *ngIf=\"!mappingMetaFields.length\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Campo \u00DAnico</mat-label>\n                  <mat-select [(ngModel)]=\"mappingMeta.field\" (ngModelChange)=\"onMappingChanged()\">\n                    <mat-option [value]=\"undefined\">-- Nenhum --</mat-option>\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{ f }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Tipo</mat-label>\n                  <mat-select [(ngModel)]=\"mappingMeta.type\" (ngModelChange)=\"onMappingChanged()\">\n                    <mat-option *ngFor=\"let mt of metaTypeConfigs\" [value]=\"mt.type\">\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ mt.label }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n\n              <!-- Type configuration (pluggable editors) -->\n              @switch (mappingMeta.type) {\n                @case ('text') { <praxis-meta-editor-text [model]=\"mappingMeta\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('html') { <praxis-meta-editor-text [model]=\"mappingMeta\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('currency') { <praxis-meta-editor-currency [model]=\"mappingMeta\" (change)=\"onMappingChanged()\"></praxis-meta-editor-currency> }\n                @case ('date') { <praxis-meta-editor-date [model]=\"mappingMeta\" (change)=\"onMappingChanged()\"></praxis-meta-editor-date> }\n                @case ('chip') {\n                  <praxis-meta-editor-chip\n                    [model]=\"mappingMeta\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-chip>\n                }\n                @case ('rating') {\n                  <praxis-meta-editor-rating\n                    [model]=\"mappingMeta\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-rating>\n                }\n                @case ('icon') {\n                  <praxis-meta-editor-icon\n                    [model]=\"mappingMeta\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-icon>\n                }\n                @case ('image') { <praxis-meta-editor-image [model]=\"mappingMeta\" (change)=\"onMappingChanged()\"></praxis-meta-editor-image> }\n              }\n\n              <!-- Advanced -->\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header><mat-panel-title>Op\u00E7\u00F5es\n                    avan\u00E7adas</mat-panel-title></mat-expansion-panel-header>\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field appearance=\"outline\">\n                    <mat-label>Posi\u00E7\u00E3o</mat-label>\n                    <mat-select [(ngModel)]=\"mappingMeta.placement\" (ngModelChange)=\"onMappingChanged()\">\n                      <mat-option value=\"side\">Lateral (Direita)</mat-option>\n                      <mat-option value=\"line\">Na linha (Abaixo)</mat-option>\n                    </mat-select>\n                  </mat-form-field>\n                  <mat-form-field appearance=\"outline\">\n                    <mat-label>Classe CSS</mat-label>\n                    <input matInput [(ngModel)]=\"mappingMeta.class\" (ngModelChange)=\"onMappingChanged()\" />\n                  </mat-form-field>\n                  <mat-form-field appearance=\"outline\">\n                    <mat-label>Estilo</mat-label>\n                    <input matInput [(ngModel)]=\"mappingMeta.style\" (ngModelChange)=\"onMappingChanged()\" />\n                  </mat-form-field>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n          <!-- Trailing -->\n          <mat-expansion-panel [expanded]=\"!!mappingTrailing.field\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>{{ getTypeIcon(mappingTrailing.type || 'text') }}</mat-icon>\n                  <span>Trailing (Direita)</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{ mappingTrailing.field || 'N\u00E3o mapeado'\n                }}</mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"g gap-12\">\n              <div class=\"g g-1-1 gap-12\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Campo</mat-label>\n                  <mat-select [(ngModel)]=\"mappingTrailing.field\" (ngModelChange)=\"onMappingChanged()\">\n                    <mat-option [value]=\"undefined\">-- Nenhum --</mat-option>\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{ f }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Tipo</mat-label>\n                  <mat-select [(ngModel)]=\"mappingTrailing.type\" (ngModelChange)=\"onMappingChanged()\">\n                    <mat-option *ngFor=\"let mt of trailingTypeConfigs\" [value]=\"mt.type\">\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ mt.label }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">Presets</span>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingTrailing.type='chip'; mappingTrailing.chipColor='primary'; mappingTrailing.chipVariant='filled'; mappingTrailing.field='status'; onMappingChanged()\">Status Chip</button>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingTrailing.type='icon'; mappingTrailing.field='status'; mappingTrailing.iconColor='primary'; onMappingChanged()\">Status \u00CDcone</button>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingTrailing.type='currency'; mappingTrailing.field='price'; mappingTrailing.currencyCode='BRL'; mappingTrailing.locale='pt-BR'; onMappingChanged()\">Pre\u00E7o</button>\n              </div>\n\n              @switch (mappingTrailing.type) {\n                @case ('text') { <praxis-meta-editor-text [model]=\"mappingTrailing\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('html') { <praxis-meta-editor-text [model]=\"mappingTrailing\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('currency') { <praxis-meta-editor-currency [model]=\"mappingTrailing\" (change)=\"onMappingChanged()\"></praxis-meta-editor-currency> }\n                @case ('date') { <praxis-meta-editor-date [model]=\"mappingTrailing\" (change)=\"onMappingChanged()\"></praxis-meta-editor-date> }\n                @case ('chip') {\n                  <praxis-meta-editor-chip\n                    [model]=\"mappingTrailing\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-chip>\n                }\n                @case ('rating') {\n                  <praxis-meta-editor-rating\n                    [model]=\"mappingTrailing\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-rating>\n                }\n                @case ('icon') {\n                  <praxis-meta-editor-icon\n                    [model]=\"mappingTrailing\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-icon>\n                }\n                @case ('image') {\n                  <div class=\"g g-1-1 gap-12\">\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>URL / Expr</mat-label>\n                      <input matInput [(ngModel)]=\"mappingTrailing.imageUrl\" (ngModelChange)=\"onMappingChanged()\"\n                        placeholder=\"https://... ou ${item.imageUrl}\" />\n                      <button mat-icon-button matSuffix type=\"button\" class=\"help-icon-button\"\n                        matTooltip=\"Use URL absoluta/relativa ou express\u00E3o ${item.campo}.\">\n                        <mat-icon>help_outline</mat-icon>\n                      </button>\n                      <mat-error *ngIf=\"isImageUrlRequiredInvalid(mappingTrailing.imageUrl)\">URL/expr obrigat\u00F3ria</mat-error>\n                    </mat-form-field>\n                  </div>\n                  <praxis-meta-editor-image [model]=\"mappingTrailing\" (change)=\"onMappingChanged()\"></praxis-meta-editor-image>\n                  <div class=\"text-caption muted\" *ngIf=\"!mappingTrailing.imageUrl\">Defina a URL/expr para renderizar a imagem.</div>\n                }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header><mat-panel-title>Estilo</mat-panel-title></mat-expansion-panel-header>\n                <div class=\"g gap-12 pt-12\">\n                  <div class=\"g g-1-1 gap-12\">\n                    <mat-form-field appearance=\"outline\"><mat-label>Classe</mat-label><input matInput\n                        [(ngModel)]=\"mappingTrailing.class\" (ngModelChange)=\"onMappingChanged()\" /></mat-form-field>\n                    <mat-form-field appearance=\"outline\"><mat-label>Style</mat-label><input matInput\n                        [(ngModel)]=\"mappingTrailing.style\" (ngModelChange)=\"onMappingChanged()\" /></mat-form-field>\n                  </div>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n\n          <!-- Leading -->\n          <mat-expansion-panel\n            [expanded]=\"!!mappingLeading.field || (mappingLeading.type === 'icon' && !!mappingLeading.icon) || (mappingLeading.type === 'image' && !!mappingLeading.imageUrl)\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>{{ getTypeIcon(mappingLeading.type) }}</mat-icon>\n                  <span>Leading (Esquerda)</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>\n                {{ mappingLeading.type === 'icon' ? (mappingLeading.icon || '\u00CDcone est\u00E1tico') :\n                (mappingLeading.field || (mappingLeading.imageUrl ? 'Imagem est\u00E1tica' : 'N\u00E3o mapeado'))\n                }}\n              </mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"g gap-12\">\n              <div class=\"g g-1-1 gap-12\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Tipo</mat-label>\n                  <mat-select [(ngModel)]=\"mappingLeading.type\" (ngModelChange)=\"onMappingChanged()\">\n                    <mat-option *ngFor=\"let mt of leadingTypeConfigs\" [value]=\"mt.type\">\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ mt.label }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <!-- Field (only if not static icon/image, though user might want dynamic) -->\n                <mat-form-field appearance=\"outline\"\n                  *ngIf=\"mappingLeading.type !== 'icon' && mappingLeading.type !== 'image'\">\n                  <mat-label>Campo</mat-label>\n                  <mat-select [(ngModel)]=\"mappingLeading.field\" (ngModelChange)=\"onMappingChanged()\">\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{ f }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">Presets</span>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingLeading.type='icon'; mappingLeading.icon='person'; mappingLeading.iconColor='primary'; onMappingChanged()\">Avatar \u00CDcone</button>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingLeading.type='image'; mappingLeading.imageUrl='https://placehold.co/64x64'; mappingLeading.imageAlt='Avatar'; mappingLeading.badgeText='${item.status}'; onMappingChanged()\">Avatar Imagem + Badge</button>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingLeading.type='chip'; mappingLeading.field='tag'; mappingLeading.chipColor='accent'; mappingLeading.chipVariant='filled'; onMappingChanged()\">Chip Tag</button>\n              </div>\n\n              <!-- Icon Specific -->\n              <div class=\"g g-1-auto gap-12 ai-center\" *ngIf=\"mappingLeading.type === 'icon'\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>\u00CDcone</mat-label>\n                  <input matInput [(ngModel)]=\"mappingLeading.icon\" (ngModelChange)=\"onMappingChanged()\" />\n                  <button mat-icon-button matSuffix (click)=\"pickLeadingIcon()\"><mat-icon>search</mat-icon></button>\n                </mat-form-field>\n                <div class=\"text-caption muted\">Use pipe <code>|iconMap</code> no extra pipe para\n                  din\u00E2mico</div>\n              </div>\n              <div *ngIf=\"mappingLeading.type === 'icon'\">\n                <praxis-meta-editor-icon\n                  [model]=\"mappingLeading\"\n                  [paletteOptions]=\"paletteOptions\"\n                  [colorDotBackground]=\"colorDotBackground\"\n                  [isCustomColor]=\"isCustomColor\"\n                  [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                  (change)=\"onMappingChanged()\"></praxis-meta-editor-icon>\n              </div>\n\n              <!-- Image Specific -->\n              <div class=\"g g-1-1 gap-12\" *ngIf=\"mappingLeading.type === 'image'\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>URL da Imagem</mat-label>\n                  <input matInput [(ngModel)]=\"mappingLeading.imageUrl\" (ngModelChange)=\"onMappingChanged()\"\n                    placeholder=\"https://... ou ${item.imageUrl}\" />\n                  <button mat-icon-button matSuffix type=\"button\" class=\"help-icon-button\"\n                    matTooltip=\"Use URL absoluta/relativa ou express\u00E3o ${item.campo}.\">\n                    <mat-icon>help_outline</mat-icon>\n                  </button>\n                  <mat-error *ngIf=\"isImageUrlRequiredInvalid(mappingLeading.imageUrl)\">URL/expr obrigat\u00F3ria</mat-error>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Alt Text</mat-label>\n                  <input matInput [(ngModel)]=\"mappingLeading.imageAlt\" (ngModelChange)=\"onMappingChanged()\" />\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Badge Texto</mat-label>\n                  <input matInput [(ngModel)]=\"mappingLeading.badgeText\" (ngModelChange)=\"onMappingChanged()\" />\n                </mat-form-field>\n              </div>\n\n              @switch (mappingLeading.type) {\n                @case ('text') { <praxis-meta-editor-text [model]=\"mappingLeading\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('html') { <praxis-meta-editor-text [model]=\"mappingLeading\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('chip') {\n                  <praxis-meta-editor-chip\n                    [model]=\"mappingLeading\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-chip>\n                }\n                @case ('rating') {\n                  <praxis-meta-editor-rating\n                    [model]=\"mappingLeading\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-rating>\n                }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header><mat-panel-title>Estilo</mat-panel-title></mat-expansion-panel-header>\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field appearance=\"outline\"><mat-label>Classe</mat-label><input matInput\n                      [(ngModel)]=\"mappingLeading.class\" (ngModelChange)=\"onMappingChanged()\" /></mat-form-field>\n                  <mat-form-field appearance=\"outline\"><mat-label>Style</mat-label><input matInput\n                      [(ngModel)]=\"mappingLeading.style\" (ngModelChange)=\"onMappingChanged()\" /></mat-form-field>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n\n          <!-- Features -->\n          <mat-expansion-panel [expanded]=\"featuresVisible && features.length > 0\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>view_list</mat-icon>\n                  <span>Recursos (Features)</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{ features.length }} item(s)</mat-panel-description>\n            </mat-expansion-panel-header>\n\n            <div class=\"g gap-12\">\n              <div class=\"g row-flow gap-12 ai-center\">\n                <mat-slide-toggle [(ngModel)]=\"featuresVisible\" (ngModelChange)=\"onFeaturesChanged()\">Ativar\n                  recursos</mat-slide-toggle>\n                <mat-slide-toggle [(ngModel)]=\"featuresSyncWithMeta\" (ngModelChange)=\"onMappingChanged()\">Sincronizar\n                  com Meta</mat-slide-toggle>\n                <span class=\"flex-1\"></span>\n                <mat-button-toggle-group [(ngModel)]=\"featuresMode\" (change)=\"onFeaturesChanged()\" appearance=\"legacy\">\n                  <mat-button-toggle value=\"icons+labels\"><mat-icon>view_list</mat-icon></mat-button-toggle>\n                  <mat-button-toggle value=\"icons-only\"><mat-icon>more_horiz</mat-icon></mat-button-toggle>\n                </mat-button-toggle-group>\n              </div>\n\n              <div *ngFor=\"let f of features; let i = index\" class=\"g g-auto-1 gap-8 ai-center p-8 border rounded mb-2\">\n                <button mat-icon-button (click)=\"pickFeatureIcon(i)\"><mat-icon>{{ f.icon || 'search'\n                    }}</mat-icon></button>\n                <mat-form-field appearance=\"outline\" class=\"dense-form-field no-sub\">\n                  <input matInput [(ngModel)]=\"f.expr\" (ngModelChange)=\"onFeaturesChanged()\" placeholder=\"Expr/Texto\" />\n                </mat-form-field>\n                <button mat-icon-button color=\"warn\" (click)=\"removeFeature(i)\"><mat-icon>delete</mat-icon></button>\n              </div>\n              <button mat-button color=\"primary\" (click)=\"addFeature()\"><mat-icon>add</mat-icon>\n                Adicionar recurso</button>\n            </div>\n          </mat-expansion-panel>\n          <!-- Section Header -->\n          <mat-expansion-panel [expanded]=\"!!mappingSectionHeader.expr\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>{{ getTypeIcon(mappingSectionHeader.type) }}</mat-icon>\n                  <span>Cabe\u00E7alho de Se\u00E7\u00E3o</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{ mappingSectionHeader.expr || 'N\u00E3o configurado'\n                }}</mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"g gap-12\">\n              <div class=\"g g-1-1 gap-12\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Tipo</mat-label>\n                  <mat-select [(ngModel)]=\"mappingSectionHeader.type\" (ngModelChange)=\"onMappingChanged()\">\n                    <mat-option *ngFor=\"let mt of sectionHeaderTypeConfigs\" [value]=\"mt.type\">\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ mt.label }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Express\u00E3o (item.key)</mat-label>\n                  <input matInput [(ngModel)]=\"mappingSectionHeader.expr\" (ngModelChange)=\"onMappingChanged()\"\n                    placeholder=\"item.key\" />\n                </mat-form-field>\n              </div>\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">Presets</span>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingSectionHeader.type='text'; mappingSectionHeader.expr='${item.key}'; onMappingChanged()\">Texto padr\u00E3o</button>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingSectionHeader.type='chip'; mappingSectionHeader.chipColor='primary'; mappingSectionHeader.chipVariant='filled'; mappingSectionHeader.expr='${item.key}'; onMappingChanged()\">Chip padr\u00E3o</button>\n              </div>\n\n              @switch (mappingSectionHeader.type) {\n                @case ('text') { <praxis-meta-editor-text [model]=\"mappingSectionHeader\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('html') { <praxis-meta-editor-text [model]=\"mappingSectionHeader\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('chip') {\n                  <praxis-meta-editor-chip\n                    [model]=\"mappingSectionHeader\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-chip>\n                }\n                @case ('rating') {\n                  <praxis-meta-editor-rating\n                    [model]=\"mappingSectionHeader\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-rating>\n                }\n                @case ('icon') {\n                  <praxis-meta-editor-icon\n                    [model]=\"mappingSectionHeader\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-icon>\n                }\n                @case ('image') {\n                  <div class=\"g g-1-1 gap-12\">\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>URL Imagem</mat-label>\n                      <input matInput [(ngModel)]=\"mappingSectionHeader.imageUrl\" (ngModelChange)=\"onMappingChanged()\" />\n                      <mat-error *ngIf=\"isImageUrlRequiredInvalid(mappingSectionHeader.imageUrl)\">URL/expr obrigat\u00F3ria</mat-error>\n                    </mat-form-field>\n                  </div>\n                  <div class=\"text-caption muted\" *ngIf=\"!mappingSectionHeader.imageUrl\">Defina a URL/expr para renderizar a imagem.</div>\n                  <praxis-meta-editor-image [model]=\"mappingSectionHeader\" (change)=\"onMappingChanged()\"></praxis-meta-editor-image>\n                }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header><mat-panel-title>Estilo</mat-panel-title></mat-expansion-panel-header>\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field appearance=\"outline\"><mat-label>Classe</mat-label><input matInput\n                      [(ngModel)]=\"mappingSectionHeader.class\" (ngModelChange)=\"onMappingChanged()\" /></mat-form-field>\n                  <mat-form-field appearance=\"outline\"><mat-label>Style</mat-label><input matInput\n                      [(ngModel)]=\"mappingSectionHeader.style\" (ngModelChange)=\"onMappingChanged()\" /></mat-form-field>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n\n          <!-- Empty State -->\n          <mat-expansion-panel [expanded]=\"!!mappingEmptyState.expr\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>inbox</mat-icon>\n                  <span>Estado Vazio</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{ mappingEmptyState.expr || 'Padr\u00E3o' }}</mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"g gap-12\">\n              <div class=\"g g-1-1 gap-12\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Tipo</mat-label>\n                  <mat-select [(ngModel)]=\"mappingEmptyState.type\" (ngModelChange)=\"onMappingChanged()\">\n                    <mat-option *ngFor=\"let mt of emptyStateTypeConfigs\" [value]=\"mt.type\">\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ mt.label }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Mensagem / Expr</mat-label>\n                  <input matInput [(ngModel)]=\"mappingEmptyState.expr\" (ngModelChange)=\"onMappingChanged()\" />\n                </mat-form-field>\n              </div>\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">Presets</span>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingEmptyState.type='text'; mappingEmptyState.expr='Nenhum item dispon\u00EDvel'; onMappingChanged()\">Mensagem padr\u00E3o</button>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingEmptyState.type='image'; mappingEmptyState.imageUrl='/list-empty-state.svg'; mappingEmptyState.imageAlt='Sem resultados'; onMappingChanged()\">Imagem padr\u00E3o</button>\n              </div>\n\n              @switch (mappingEmptyState.type) {\n                @case ('text') { <praxis-meta-editor-text [model]=\"mappingEmptyState\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('html') { <praxis-meta-editor-text [model]=\"mappingEmptyState\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('chip') {\n                  <praxis-meta-editor-chip\n                    [model]=\"mappingEmptyState\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-chip>\n                }\n                @case ('rating') {\n                  <praxis-meta-editor-rating\n                    [model]=\"mappingEmptyState\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-rating>\n                }\n                @case ('icon') {\n                  <praxis-meta-editor-icon\n                    [model]=\"mappingEmptyState\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-icon>\n                }\n                @case ('image') {\n                  <div class=\"g g-1-1 gap-12\">\n                    <mat-form-field appearance=\"outline\"><mat-label>URL Imagem</mat-label><input matInput\n                        [(ngModel)]=\"mappingEmptyState.imageUrl\" (ngModelChange)=\"onMappingChanged()\" />\n                        <mat-error *ngIf=\"isImageUrlRequiredInvalid(mappingEmptyState.imageUrl)\">URL/expr obrigat\u00F3ria</mat-error>\n                      </mat-form-field>\n                  </div>\n                  <div class=\"text-caption muted\" *ngIf=\"!mappingEmptyState.imageUrl\">Defina a URL/expr para renderizar a imagem.</div>\n                  <praxis-meta-editor-image [model]=\"mappingEmptyState\" (change)=\"onMappingChanged()\"></praxis-meta-editor-image>\n                }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header><mat-panel-title>Estilo</mat-panel-title></mat-expansion-panel-header>\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field appearance=\"outline\"><mat-label>Classe</mat-label><input matInput\n                      [(ngModel)]=\"mappingEmptyState.class\" (ngModelChange)=\"onMappingChanged()\" /></mat-form-field>\n                  <mat-form-field appearance=\"outline\"><mat-label>Style</mat-label><input matInput\n                      [(ngModel)]=\"mappingEmptyState.style\" (ngModelChange)=\"onMappingChanged()\" /></mat-form-field>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n        </mat-accordion>\n\n        <button mat-flat-button color=\"primary\" (click)=\"applyTemplate()\">Aplicar mapeamento</button>\n        <button mat-button (click)=\"inferFromFields()\" [disabled]=\"!fields.length\">Inferir do schema</button>\n        <div class=\"g g-auto-220 gap-12 ai-end mt-12\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Skeleton (quantidade)</mat-label>\n            <input matInput type=\"number\" min=\"0\" [(ngModel)]=\"skeletonCountInput\"\n              (ngModelChange)=\"onSkeletonChanged($event)\" />\n          </mat-form-field>\n        </div>\n\n        <div class=\"g gap-12 mt-12\">\n          <div class=\"g row-flow gap-8 ai-center\">\n            <span class=\"section-title mat-subtitle-1\">Pr\u00E9via de tema</span>\n            <mat-button-toggle-group [(ngModel)]=\"skinPreviewTheme\" (change)=\"onSkinChanged()\" appearance=\"legacy\">\n              <mat-button-toggle [value]=\"'light'\">Claro</mat-button-toggle>\n              <mat-button-toggle [value]=\"'dark'\">Escuro</mat-button-toggle>\n              <mat-button-toggle [value]=\"'grid'\">Grade</mat-button-toggle>\n            </mat-button-toggle-group>\n          </div>\n          <div class=\"skin-preview-wrap\">\n            <praxis-list-skin-preview [config]=\"working\" [items]=\"previewData\"\n              [theme]=\"skinPreviewTheme\"></praxis-list-skin-preview>\n          </div>\n        </div>\n      </div>\n    </div>\n\n  </mat-tab>\n  <mat-tab label=\"i18n/A11y\">\n    <div class=\"editor-content grid gap-3\" *ngIf=\"working?.a11y && working?.events\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Locale padr\u00E3o</mat-label>\n        <input matInput [(ngModel)]=\"working.i18n.locale\" (ngModelChange)=\"markDirty()\" placeholder=\"ex.: pt-BR\" />\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Moeda padr\u00E3o</mat-label>\n        <input matInput [(ngModel)]=\"working.i18n.currency\" (ngModelChange)=\"markDirty()\" placeholder=\"ex.: BRL\" />\n      </mat-form-field>\n      <mat-divider class=\"my-8\"></mat-divider>\n      <div class=\"subtitle\">Acessibilidade</div>\n      <div class=\"g g-auto-220 gap-12 ai-end\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>aria-label</mat-label>\n          <input matInput [(ngModel)]=\"working!.a11y!.ariaLabel\" (ngModelChange)=\"markDirty()\" />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>aria-labelledby</mat-label>\n          <input matInput [(ngModel)]=\"working!.a11y!.ariaLabelledBy\" (ngModelChange)=\"markDirty()\" />\n        </mat-form-field>\n      </div>\n      <div class=\"g g-auto-220 gap-12 ai-end\">\n        <mat-slide-toggle [(ngModel)]=\"working!.a11y!.highContrast\" (ngModelChange)=\"markDirty()\">Alto\n          contraste</mat-slide-toggle>\n        <mat-slide-toggle [(ngModel)]=\"working!.a11y!.reduceMotion\" (ngModelChange)=\"markDirty()\">Reduzir\n          movimento</mat-slide-toggle>\n      </div>\n      <mat-divider class=\"my-8\"></mat-divider>\n      <div class=\"subtitle\">Eventos</div>\n      <div class=\"g g-auto-220 gap-12 ai-end\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>itemClick</mat-label>\n          <input matInput [(ngModel)]=\"working!.events!.itemClick\" (ngModelChange)=\"markDirty()\" />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>actionClick</mat-label>\n          <input matInput [(ngModel)]=\"working!.events!.actionClick\" (ngModelChange)=\"markDirty()\" />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>selectionChange</mat-label>\n          <input matInput [(ngModel)]=\"working!.events!.selectionChange\" (ngModelChange)=\"markDirty()\" />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>loaded</mat-label>\n          <input matInput [(ngModel)]=\"working!.events!.loaded\" (ngModelChange)=\"markDirty()\" />\n        </mat-form-field>\n      </div>\n    </div>\n  </mat-tab>\n  <mat-tab label=\"Sele\u00E7\u00E3o\">\n    <div class=\"editor-content grid gap-3\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Modo</mat-label>\n        <mat-select [(ngModel)]=\"working.selection.mode\" (ngModelChange)=\"onSelectionChanged()\">\n          <mat-option value=\"none\">Sem sele\u00E7\u00E3o</mat-option>\n          <mat-option value=\"single\">\u00DAnica</mat-option>\n          <mat-option value=\"multiple\">M\u00FAltipla</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Nome no formul\u00E1rio</mat-label>\n        <input matInput [(ngModel)]=\"working.selection.formControlName\" (ngModelChange)=\"onSelectionChanged()\" />\n        <button mat-icon-button matSuffix type=\"button\" class=\"help-icon-button\" matTooltip=\"formControlName\">\n          <mat-icon>help_outline</mat-icon>\n        </button>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Caminho no formul\u00E1rio</mat-label>\n        <input matInput [(ngModel)]=\"working.selection.formControlPath\" (ngModelChange)=\"onSelectionChanged()\" />\n        <button mat-icon-button matSuffix type=\"button\" class=\"help-icon-button\" matTooltip=\"formControlPath\">\n          <mat-icon>help_outline</mat-icon>\n        </button>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Comparar por (campo)</mat-label>\n        <input matInput [(ngModel)]=\"working.selection.compareBy\" (ngModelChange)=\"onSelectionChanged()\" />\n        <button mat-icon-button matSuffix type=\"button\" class=\"help-icon-button\" matTooltip=\"Chave unica do item.\">\n          <mat-icon>help_outline</mat-icon>\n        </button>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Retorno</mat-label>\n        <mat-select [(ngModel)]=\"working.selection.return\" (ngModelChange)=\"onSelectionChanged()\">\n          <mat-option value=\"value\">value</mat-option>\n          <mat-option value=\"item\">item</mat-option>\n          <mat-option value=\"id\">id</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n  </mat-tab>\n  <mat-tab label=\"Apar\u00EAncia\">\n    <div class=\"editor-content grid gap-3\">\n      <div class=\"preset-row g row-flow gap-8\">\n        <button mat-button (click)=\"applySkinPreset('pill-soft')\">Pill Soft</button>\n        <button mat-button (click)=\"applySkinPreset('gradient-tile')\">Gradient Tile</button>\n        <button mat-button (click)=\"applySkinPreset('glass')\">Glass</button>\n        <button mat-button (click)=\"applySkinPreset('elevated')\">Elevated</button>\n        <button mat-button (click)=\"applySkinPreset('outline')\">Outline</button>\n        <button mat-button (click)=\"applySkinPreset('flat')\">Flat</button>\n        <button mat-button (click)=\"applySkinPreset('neumorphism')\">Neumorphism</button>\n      </div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Estilo</mat-label>\n        <mat-select [(ngModel)]=\"working.skin.type\" (ngModelChange)=\"onSkinTypeChanged($event)\">\n          <mat-option value=\"pill-soft\">Pill Soft</mat-option>\n          <mat-option value=\"gradient-tile\">Gradient Tile</mat-option>\n          <mat-option value=\"glass\">Glass</mat-option>\n          <mat-option value=\"elevated\">Elevated</mat-option>\n          <mat-option value=\"outline\">Outline</mat-option>\n          <mat-option value=\"flat\">Flat</mat-option>\n          <mat-option value=\"neumorphism\">Neumorphism</mat-option>\n          <mat-option value=\"custom\">Custom</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Raio</mat-label>\n        <input matInput [(ngModel)]=\"working.skin.radius\" (ngModelChange)=\"onSkinChanged()\"\n          placeholder=\"ex.: 1.25rem\" />\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Sombra</mat-label>\n        <input matInput [(ngModel)]=\"working.skin.shadow\" (ngModelChange)=\"onSkinChanged()\"\n          placeholder=\"ex.: var(--md-sys-elevation-level2)\" />\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Borda</mat-label>\n        <input matInput [(ngModel)]=\"working.skin.border\" (ngModelChange)=\"onSkinChanged()\" />\n      </mat-form-field>\n      <mat-form-field *ngIf=\"working.skin.type==='glass'\" appearance=\"outline\">\n        <mat-label>Desfoque</mat-label>\n        <input matInput [(ngModel)]=\"working.skin.backdropBlur\" (ngModelChange)=\"onSkinChanged()\"\n          placeholder=\"ex.: 8px\" />\n      </mat-form-field>\n      <div *ngIf=\"working.skin.type==='gradient-tile'\" class=\"g gap-12\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Degrad\u00EA de</mat-label>\n          <input matInput [ngModel]=\"working.skin.gradient.from || ''\"\n            (ngModelChange)=\"onSkinGradientChanged('from', $event)\" />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Degrad\u00EA at\u00E9</mat-label>\n          <input matInput [ngModel]=\"working.skin.gradient.to || ''\"\n            (ngModelChange)=\"onSkinGradientChanged('to', $event)\" />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>\u00C2ngulo</mat-label>\n          <input matInput type=\"number\" [ngModel]=\"working.skin.gradient.angle ?? 135\"\n            (ngModelChange)=\"onSkinGradientChanged('angle', $event)\" />\n        </mat-form-field>\n      </div>\n\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Classe CSS extra (skin.class)</mat-label>\n        <input matInput [(ngModel)]=\"working.skin.class\" (ngModelChange)=\"onSkinChanged()\"\n          placeholder=\"ex.: my-list-skin\" />\n      </mat-form-field>\n\n      <div *ngIf=\"working.skin.type==='custom'\" class=\"g g-auto-220 gap-12 ai-end\">\n        <mat-form-field appearance=\"outline\" class=\"w-full\">\n          <mat-label>Estilo inline (skin.inlineStyle)</mat-label>\n          <textarea matInput rows=\"4\" [(ngModel)]=\"working.skin.inlineStyle\" (ngModelChange)=\"onSkinChanged()\"\n            [attr.placeholder]=\"':host{--p-list-radius: 1rem}'\"></textarea>\n        </mat-form-field>\n        <div class=\"text-caption\">\n          Exemplo de CSS por classe (adicione no seu styles global):\n          <pre class=\"code-block\">.my-list-skin .item-card &#123;\n  border-radius: 14px;\n  border: 1px solid var(--md-sys-color-outline-variant);\n  box-shadow: var(--md-sys-elevation-level2);\n&#125;\n.my-list-skin .mat-mdc-list-item .list-item-content &#123;\n  backdrop-filter: blur(6px);\n&#125;</pre>\n        </div>\n      </div>\n\n\n    </div>\n  </mat-tab>\n</mat-tab-group>\n", styles: [".confirm-type{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;font-size:11px;line-height:16px;background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface-variant)}.confirm-type.danger{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container)}.confirm-type.warning{background:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container)}.confirm-type.info{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}:host{display:block;color:var(--md-sys-color-on-surface)}.list-editor-tabs{--editor-surface: var(--md-sys-color-surface-container-lowest);--editor-border: 1px solid var(--md-sys-color-outline-variant);--editor-radius: var(--md-sys-shape-corner-large, 16px);--editor-muted: var(--md-sys-color-on-surface-variant);--editor-accent: var(--md-sys-color-primary)}.editor-content{padding:16px;background:var(--editor-surface);border:var(--editor-border);border-radius:var(--editor-radius);display:grid;gap:12px}.editor-content .mat-mdc-form-field{width:100%;max-width:none;--mdc-outlined-text-field-container-height: 48px;--mdc-outlined-text-field-outline-color: var(--md-sys-color-outline-variant);--mdc-outlined-text-field-hover-outline-color: var(--md-sys-color-outline);--mdc-outlined-text-field-focus-outline-color: var(--md-sys-color-primary);--mdc-outlined-text-field-error-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-error-focus-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-error-hover-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-label-text-color: var(--md-sys-color-on-surface-variant);--mdc-outlined-text-field-input-text-color: var(--md-sys-color-on-surface);--mdc-outlined-text-field-supporting-text-color: var(--md-sys-color-on-surface-variant)}.editor-content .mat-mdc-form-field.w-full{max-width:none}.help-icon-button{--mdc-icon-button-state-layer-size: 28px;--mdc-icon-button-icon-size: 18px;width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}.help-icon-button mat-icon{font-size:18px;line-height:18px;width:18px;height:18px}.editor-split{grid-template-columns:minmax(0,1fr);align-items:start}.editor-main,.editor-aside{display:grid;gap:12px}.skin-preview-wrap{border-radius:calc(var(--editor-radius) - 4px);border:var(--editor-border);background:var(--md-sys-color-surface-container);padding:12px}.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;color:var(--editor-muted);font-weight:500}.section-title{color:var(--editor-muted);font-weight:600}.chips-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.error{color:var(--md-sys-color-error);font-size:.85rem}.muted{color:var(--editor-muted)}.text-caption{color:var(--editor-muted);font-size:.8rem}:host ::ng-deep .mat-mdc-select-panel .option-icon{font-size:18px;margin-right:6px;vertical-align:middle}:host ::ng-deep .mat-mdc-select-panel .color-dot{width:10px;height:10px;border-radius:999px;display:inline-block;margin-right:6px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-outline)}:host ::ng-deep .mat-mdc-select-panel .color-primary{background:var(--md-sys-color-primary)}:host ::ng-deep .mat-mdc-select-panel .color-accent{background:var(--md-sys-color-tertiary)}:host ::ng-deep .mat-mdc-select-panel .color-warn{background:var(--md-sys-color-error)}:host ::ng-deep .mat-mdc-select-panel .color-default{background:var(--md-sys-color-outline)}@media(max-width:1024px){.editor-split{grid-template-columns:minmax(0,1fr)}}\n"] }]
+                    ], template: "<mat-tab-group class=\"list-editor-tabs\">\n  <mat-tab label=\"Dados\">\n    <div class=\"editor-content\">\n      <div class=\"g g-1-auto gap-8 ai-center\">\n        <div class=\"muted\">Observa\u00E7\u00E3o: ajustes aplicados pelo assistente substituem o objeto de configura\u00E7\u00E3o inteiro.\n        </div>\n        <button mat-icon-button type=\"button\" class=\"help-icon-button\"\n          matTooltip=\"O applyConfigFromAdapter n\u00E3o faz merge profundo. Garanta que o adapter envie a config completa.\">\n          <mat-icon>help_outline</mat-icon>\n        </button>\n      </div>\n      <mat-form-field appearance=\"outline\" class=\"w-full\">\n        <mat-label>Recurso (API)</mat-label>\n        <input matInput [(ngModel)]=\"working.dataSource.resourcePath\" (ngModelChange)=\"onResourcePathChange($event)\"\n          placeholder=\"ex.: users\" />\n        <button mat-icon-button matSuffix type=\"button\" class=\"help-icon-button\"\n          matTooltip=\"Endpoint do recurso (resourcePath).\">\n          <mat-icon>help_outline</mat-icon>\n        </button>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\" class=\"w-full\">\n        <mat-label>Query (JSON)</mat-label>\n        <textarea matInput rows=\"3\" [(ngModel)]=\"queryJson\" (ngModelChange)=\"onQueryChanged($event)\"\n          placeholder='ex.: &#123;\"status\":\"active\",\"department\":\"sales\"&#125;'></textarea>\n        <button mat-icon-button matSuffix type=\"button\" class=\"help-icon-button\"\n          matTooltip=\"Opcional. Use JSON v\u00E1lido para filtros iniciais.\" *ngIf=\"!queryError\">\n          <mat-icon>help_outline</mat-icon>\n        </button>\n        <mat-error *ngIf=\"queryError\">{{ queryError }}</mat-error>\n      </mat-form-field>\n      <div class=\"g g-auto-220 gap-12 ai-end mt-12\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Ordenar por</mat-label>\n          <mat-select [(ngModel)]=\"sortField\" (ngModelChange)=\"updateSortConfig()\">\n            <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{ f }}</mat-option>\n          </mat-select>\n          <button mat-icon-button matSuffix type=\"button\" class=\"help-icon-button\" matTooltip=\"Campo base do recurso.\">\n            <mat-icon>help_outline</mat-icon>\n          </button>\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Dire\u00E7\u00E3o</mat-label>\n          <mat-select [(ngModel)]=\"sortDir\" (ngModelChange)=\"updateSortConfig()\">\n            <mat-option value=\"asc\">Ascendente</mat-option>\n            <mat-option value=\"desc\">Descendente</mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n    </div>\n  </mat-tab>\n  <mat-tab label=\"JSON\">\n    <div class=\"editor-content\">\n      <praxis-list-json-config-editor\n        [document]=\"document\"\n        (documentChange)=\"onJsonConfigChange($event)\"\n        (validationChange)=\"onJsonValidationChange($event)\"\n        (editorEvent)=\"onJsonEditorEvent($event)\">\n      </praxis-list-json-config-editor>\n    </div>\n  </mat-tab>\n  <mat-tab label=\"A\u00E7\u00F5es\">\n    <div class=\"editor-content g gap-12\">\n      <div class=\"g g-1-auto gap-8 ai-center\">\n        <div class=\"muted\">Configure bot\u00F5es de a\u00E7\u00E3o por item (\u00EDcone, r\u00F3tulo, cor, visibilidade)</div>\n        <button mat-flat-button color=\"primary\" (click)=\"addAction()\">Adicionar a\u00E7\u00E3o</button>\n      </div>\n      <div class=\"g g-1-auto gap-8 ai-center\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>A\u00E7\u00E3o global (Praxis)</mat-label>\n          <mat-select [(ngModel)]=\"selectedGlobalActionId\" (ngModelChange)=\"onGlobalActionSelected($event)\">\n            <mat-option [value]=\"undefined\">-- Selecionar --</mat-option>\n            <mat-option *ngFor=\"let ga of globalActionCatalog\" [value]=\"ga.id\">\n              <mat-icon class=\"option-icon\">{{ ga.icon || 'bolt' }}</mat-icon>\n              {{ ga.label }}\n            </mat-option>\n          </mat-select>\n          <mat-hint *ngIf=\"!globalActionCatalog.length\" class=\"text-caption muted\">Nenhuma a\u00E7\u00E3o global registrada.</mat-hint>\n        </mat-form-field>\n        <div class=\"muted text-caption\">Selecione para adicionar com `command` global.</div>\n      </div>\n      <div *ngFor=\"let a of (working.actions || []); let i = index\" class=\"g g-auto-200 gap-12 ai-end\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>ID</mat-label>\n          <input matInput [(ngModel)]=\"a.id\" (ngModelChange)=\"onActionsChanged()\" />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Tipo de a\u00E7\u00E3o</mat-label>\n          <mat-select [(ngModel)]=\"a.kind\" (ngModelChange)=\"onActionsChanged()\">\n            <mat-option value=\"icon\">\u00CDcone</mat-option>\n            <mat-option value=\"button\">Bot\u00E3o</mat-option>\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>\u00CDcone</mat-label>\n          <input matInput [(ngModel)]=\"a.icon\" (ngModelChange)=\"onActionsChanged()\" placeholder=\"ex.: edit, delete\" />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Command (global)</mat-label>\n          <input matInput [(ngModel)]=\"a.command\" (ngModelChange)=\"onActionsChanged()\" placeholder=\"global:toast.success\" />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>R\u00F3tulo</mat-label>\n          <input matInput [(ngModel)]=\"a.label\" (ngModelChange)=\"onActionsChanged()\" />\n        </mat-form-field>\n        <ng-container *ngIf=\"a.kind === 'button'\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Variante</mat-label>\n            <mat-select [(ngModel)]=\"a.buttonVariant\" (ngModelChange)=\"onActionsChanged()\">\n              <mat-option value=\"stroked\">Contorno</mat-option>\n              <mat-option value=\"raised\">Elevado</mat-option>\n              <mat-option value=\"flat\">Preenchido</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </ng-container>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Cor da a\u00E7\u00E3o</mat-label>\n          <mat-select [(ngModel)]=\"a.color\" (ngModelChange)=\"onActionsChanged()\">\n            <mat-option *ngFor=\"let c of paletteOptions\" [value]=\"c.value\">\n              <span class=\"color-dot\" [style.background]=\"colorDotBackground(c.value)\"></span>{{ c.label }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n        <div class=\"g gap-8\" *ngIf=\"isCustomColor(a.color); else actionCustomBtn\">\n          <pdx-color-picker label=\"Cor personalizada\" [format]=\"'hex'\" [(ngModel)]=\"a.color\"\n            (ngModelChange)=\"onActionsChanged()\"></pdx-color-picker>\n        </div>\n        <ng-template #actionCustomBtn>\n          <button mat-stroked-button type=\"button\" (click)=\"enableCustomActionColor(a)\">Usar cor personalizada</button>\n        </ng-template>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Payload da a\u00E7\u00E3o</mat-label>\n          <mat-select [(ngModel)]=\"a.emitPayload\" (ngModelChange)=\"onActionsChanged()\">\n            <mat-option [value]=\"undefined\">Padr\u00E3o</mat-option>\n            <mat-option value=\"item\">item</mat-option>\n            <mat-option value=\"id\">id</mat-option>\n            <mat-option value=\"value\">value</mat-option>\n          </mat-select>\n          <button mat-icon-button matSuffix type=\"button\" class=\"help-icon-button\" matTooltip=\"emitPayload\">\n            <mat-icon>help_outline</mat-icon>\n          </button>\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\" class=\"col-span-2\">\n          <mat-label>Exibir quando (ex.: &#36;&#123;item.status&#125; == 'done')</mat-label>\n          <input matInput [(ngModel)]=\"a.showIf\" (ngModelChange)=\"onActionsChanged()\" />\n          <button mat-icon-button matSuffix type=\"button\" class=\"help-icon-button\"\n            matTooltip=\"Sintaxe suportada: &#34;&#36;{item.campo} == &#39;valor&#39;&#34;. Express\u00F5es avan\u00E7adas n\u00E3o s\u00E3o avaliadas.\">\n            <mat-icon>help_outline</mat-icon>\n          </button>\n        </mat-form-field>\n        <div class=\"g row-flow gap-8 ai-center\">\n          <button *ngIf=\"(a.kind || 'icon') === 'icon'\" mat-icon-button\n            [color]=\"isThemeColor(a.color) ? a.color : undefined\"><mat-icon\n              [praxisIcon]=\"a.icon || 'bolt'\" [style.cssText]=\"iconStyle(a.color)\"></mat-icon></button>\n          <ng-container *ngIf=\"a.kind === 'button'\">\n            <button *ngIf=\"a.buttonVariant === 'stroked'\" mat-stroked-button\n              [color]=\"isThemeColor(a.color) ? a.color : undefined\" [style.cssText]=\"buttonStyle(a.color, 'stroked')\">{{ a.label\n              || a.id || 'A\u00E7\u00E3o' }}</button>\n            <button *ngIf=\"a.buttonVariant === 'raised'\" mat-raised-button\n              [color]=\"isThemeColor(a.color) ? a.color : undefined\" [style.cssText]=\"buttonStyle(a.color, 'raised')\">{{ a.label ||\n              a.id || 'A\u00E7\u00E3o' }}</button>\n            <button *ngIf=\"!a.buttonVariant || a.buttonVariant === 'flat'\" mat-flat-button\n              [color]=\"isThemeColor(a.color) ? a.color : undefined\" [style.cssText]=\"buttonStyle(a.color, 'flat')\">{{ a.label || a.id || 'A\u00E7\u00E3o' }}</button>\n          </ng-container>\n          <span class=\"muted\">Pr\u00E9-visualiza\u00E7\u00E3o</span>\n        </div>\n        <div class=\"flex-end\">\n          <button mat-button color=\"warn\" (click)=\"removeAction(i)\">Remover</button>\n        </div>\n        <div class=\"g gap-8 col-span-2\" *ngIf=\"a.command\">\n          <mat-slide-toggle [(ngModel)]=\"a.showLoading\" (ngModelChange)=\"onActionsChanged()\">Mostrar loading</mat-slide-toggle>\n          <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n            <mat-expansion-panel-header><mat-panel-title>Confirma\u00E7\u00E3o</mat-panel-title></mat-expansion-panel-header>\n            <div class=\"g gap-12 pt-12\">\n              <div class=\"g row-flow gap-8 ai-center\">\n                <span class=\"text-caption muted\">Tipo</span>\n                <mat-button-toggle-group [value]=\"a.confirmation?.type || ''\" (change)=\"applyConfirmationPreset(a, $event.value)\">\n                  <mat-button-toggle value=\"\">Padr\u00E3o</mat-button-toggle>\n                  <mat-button-toggle value=\"danger\">Danger</mat-button-toggle>\n                  <mat-button-toggle value=\"warning\">Warning</mat-button-toggle>\n                  <mat-button-toggle value=\"info\">Info</mat-button-toggle>\n                </mat-button-toggle-group>\n              </div>\n              <mat-form-field appearance=\"outline\">\n                <mat-label>T\u00EDtulo</mat-label>\n                <input matInput [ngModel]=\"a.confirmation?.title\" (ngModelChange)=\"setConfirmationField(a, 'title', $event)\" />\n              </mat-form-field>\n              <mat-form-field appearance=\"outline\">\n                <mat-label>Mensagem</mat-label>\n                <input matInput [ngModel]=\"a.confirmation?.message\" (ngModelChange)=\"setConfirmationField(a, 'message', $event)\" />\n              </mat-form-field>\n              <div class=\"g gap-6\">\n                <div class=\"text-caption muted\">Pr\u00E9via</div>\n                <div class=\"text-caption\">\n                  <strong>{{ a.confirmation?.title || 'Confirmar a\u00E7\u00E3o' }}</strong>\n                </div>\n                <div class=\"text-caption muted\">{{ a.confirmation?.message || 'Tem certeza que deseja continuar?' }}</div>\n                <div class=\"text-caption\">\n                  <span class=\"confirm-type\" [ngClass]=\"(a.confirmation?.type || 'default')\">Tipo: {{ a.confirmation?.type || 'padr\u00E3o' }}</span>\n                </div>\n                <div class=\"text-caption muted\" *ngIf=\"!a.confirmation?.title && !a.confirmation?.message\">\n                  Defina um t\u00EDtulo ou mensagem para a confirma\u00E7\u00E3o.\n                </div>\n              </div>\n            </div>\n          </mat-expansion-panel>\n          <mat-form-field appearance=\"outline\" class=\"col-span-2\">\n            <mat-label>Payload (JSON/Template)</mat-label>\n            <textarea matInput rows=\"4\" [(ngModel)]=\"a.globalPayload\" (ngModelChange)=\"onActionsChanged()\"\n              placeholder='{\"message\":\"${item.name} favoritado\"}'></textarea>\n            <button mat-icon-button matSuffix type=\"button\" class=\"help-icon-button\"\n              [matTooltip]=\"globalPayloadSchemaTooltip(a)\">\n              <mat-icon>help_outline</mat-icon>\n            </button>\n            <mat-error *ngIf=\"isGlobalPayloadInvalid(a.globalPayload)\">JSON inv\u00E1lido</mat-error>\n          </mat-form-field>\n          <div class=\"g row-flow gap-8 ai-center\">\n            <button mat-stroked-button type=\"button\" (click)=\"applyGlobalPayloadExample(a)\">Inserir exemplo</button>\n            <span class=\"muted text-caption\">{{ globalPayloadExampleHint(a) }}</span>\n          </div>\n          <mat-slide-toggle [(ngModel)]=\"a.emitLocal\" (ngModelChange)=\"onActionsChanged()\">Emitir evento local tamb\u00E9m</mat-slide-toggle>\n        </div>\n      </div>\n    </div>\n  </mat-tab>\n  <mat-tab label=\"Layout\">\n    <div class=\"editor-content grid gap-3\">\n      <div class=\"preset-row g row-flow gap-8\">\n        <button mat-stroked-button (click)=\"applyLayoutPreset('tiles-modern')\">Preset Tiles Moderno</button>\n      </div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Variante</mat-label>\n        <mat-select [(ngModel)]=\"working.layout.variant\" (ngModelChange)=\"onLayoutChanged()\">\n          <mat-option value=\"list\">Lista</mat-option>\n          <mat-option value=\"cards\">Cards</mat-option>\n          <mat-option value=\"tiles\">Tiles</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Modelo</mat-label>\n        <mat-select [(ngModel)]=\"working.layout.model\" (ngModelChange)=\"onLayoutChanged()\">\n          <ng-container *ngIf=\"working.layout.variant === 'list'; else cardModels\">\n            <mat-option value=\"standard\">Padr\u00E3o</mat-option>\n            <mat-option value=\"media\">M\u00EDdia \u00E0 esquerda</mat-option>\n            <mat-option value=\"hotel\">Hotel (m\u00EDdia grande)</mat-option>\n          </ng-container>\n          <ng-template #cardModels>\n            <ng-container *ngIf=\"working.layout.variant === 'tiles'; else cardsOnly\">\n              <mat-option value=\"standard\">Tile padr\u00E3o</mat-option>\n              <mat-option value=\"media\">Tile com m\u00EDdia</mat-option>\n              <mat-option value=\"hotel\">Tile hotel</mat-option>\n            </ng-container>\n            <ng-template #cardsOnly>\n              <mat-option value=\"standard\">Padr\u00E3o</mat-option>\n              <mat-option value=\"media\">Card com m\u00EDdia</mat-option>\n              <mat-option value=\"hotel\">Hotel</mat-option>\n            </ng-template>\n          </ng-template>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Linhas</mat-label>\n        <mat-select [(ngModel)]=\"working.layout.lines\" (ngModelChange)=\"onLayoutChanged()\">\n          <mat-option [value]=\"1\">1</mat-option>\n          <mat-option [value]=\"2\">2</mat-option>\n          <mat-option [value]=\"3\">3</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Itens por p\u00E1gina</mat-label>\n        <input matInput type=\"number\" min=\"1\" [(ngModel)]=\"working.layout.pageSize\"\n          (ngModelChange)=\"onPageSizeChange($event)\" />\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Densidade</mat-label>\n        <mat-select [(ngModel)]=\"working.layout.density\" (ngModelChange)=\"onLayoutChanged()\">\n          <mat-option value=\"default\">Padr\u00E3o</mat-option>\n          <mat-option value=\"comfortable\">Confort\u00E1vel</mat-option>\n          <mat-option value=\"compact\">Compacta</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\" *ngIf=\"working.layout.variant !== 'tiles'\">\n        <mat-label>Divisores</mat-label>\n        <mat-select [(ngModel)]=\"working.layout.dividers\" (ngModelChange)=\"onLayoutChanged()\">\n          <mat-option value=\"none\">Sem</mat-option>\n          <mat-option value=\"between\">Entre grupos</mat-option>\n          <mat-option value=\"all\">Todos</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <ng-container *ngIf=\"fields.length > 0; else groupByText\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Agrupar por</mat-label>\n          <mat-select [(ngModel)]=\"working.layout.groupBy\" (ngModelChange)=\"onLayoutChanged()\">\n            <mat-option [value]=\"\">Nenhum</mat-option>\n            <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{ f }}</mat-option>\n          </mat-select>\n        </mat-form-field>\n      </ng-container>\n      <ng-template #groupByText>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Agrupar por</mat-label>\n          <input matInput [(ngModel)]=\"working.layout.groupBy\" (ngModelChange)=\"onLayoutChanged()\"\n            placeholder=\"ex.: departamento\" />\n        </mat-form-field>\n      </ng-template>\n      <mat-slide-toggle [(ngModel)]=\"working.layout.stickySectionHeader\" (ngModelChange)=\"onLayoutChanged()\">\n        Header de se\u00E7\u00E3o fixo\n      </mat-slide-toggle>\n      <mat-slide-toggle [(ngModel)]=\"working.layout.virtualScroll\" (ngModelChange)=\"onLayoutChanged()\">\n        Scroll virtual\n      </mat-slide-toggle>\n      <mat-divider class=\"my-8\"></mat-divider>\n      <div class=\"subtitle\">Ferramentas da lista</div>\n      <div class=\"g g-auto-220 gap-12 ai-end\">\n        <mat-slide-toggle [(ngModel)]=\"working.ui.showSearch\" (ngModelChange)=\"onUiChanged()\">Mostrar\n          busca</mat-slide-toggle>\n        <mat-slide-toggle [(ngModel)]=\"working.ui.showSort\" (ngModelChange)=\"onUiChanged()\">Mostrar\n          ordenar</mat-slide-toggle>\n        <mat-slide-toggle [(ngModel)]=\"working.ui.showRange\" (ngModelChange)=\"onUiChanged()\">Mostrar faixa X\u2013Y de\n          Total</mat-slide-toggle>\n      </div>\n      <div class=\"g g-auto-220 gap-12 ai-end mt-12\" *ngIf=\"working.ui?.showSearch\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Campo para buscar</mat-label>\n          <mat-select [(ngModel)]=\"working.ui.searchField\" (ngModelChange)=\"onUiChanged()\">\n            <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{ f }}</mat-option>\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Placeholder da busca</mat-label>\n          <input matInput [(ngModel)]=\"working.ui.searchPlaceholder\" (ngModelChange)=\"onUiChanged()\"\n            placeholder=\"ex.: Buscar por t\u00EDtulo\" />\n        </mat-form-field>\n      </div>\n      <div class=\"mt-12\" *ngIf=\"working.ui?.showSort\">\n        <div class=\"g g-1-auto ai-center gap-8\">\n          <div class=\"muted\">Op\u00E7\u00F5es de ordena\u00E7\u00E3o (r\u00F3tulo \u2192 campo+dire\u00E7\u00E3o)</div>\n          <button mat-flat-button color=\"primary\" (click)=\"addUiSortRow()\">Adicionar op\u00E7\u00E3o</button>\n        </div>\n        <div class=\"g g-auto-220 gap-12 ai-end mt-12\" *ngFor=\"let r of uiSortRows; let i = index\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>R\u00F3tulo</mat-label>\n            <input matInput [(ngModel)]=\"r.label\" (ngModelChange)=\"onUiSortRowsChanged()\"\n              placeholder=\"ex.: Mais recentes\" />\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Campo</mat-label>\n            <mat-select [(ngModel)]=\"r.field\" (ngModelChange)=\"onUiSortRowsChanged()\">\n              <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{ f }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Dire\u00E7\u00E3o</mat-label>\n            <mat-select [(ngModel)]=\"r.dir\" (ngModelChange)=\"onUiSortRowsChanged()\">\n              <mat-option value=\"desc\">Descendente</mat-option>\n              <mat-option value=\"asc\">Ascendente</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <div class=\"error\" *ngIf=\"isUiSortRowDuplicate(i)\">Op\u00E7\u00E3o duplicada (campo+dire\u00E7\u00E3o)</div>\n          <div class=\"flex-end\"><button mat-button color=\"warn\" (click)=\"removeUiSortRow(i)\">Remover</button></div>\n        </div>\n      </div>\n    </div>\n  </mat-tab>\n  <mat-tab label=\"Conte\u00FAdo\">\n    <div class=\"editor-content\">\n      <div class=\"editor-main\">\n        <mat-accordion multi>\n          <!-- Primary -->\n          <mat-expansion-panel [expanded]=\"true\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>{{ getTypeIcon(mappingPrimary.type) }}</mat-icon>\n                  <span>Primary (T\u00EDtulo)</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{ mappingPrimary.field || 'N\u00E3o mapeado' }}</mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"g gap-12\">\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">Presets</span>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingPrimary.type='text'; mappingPrimary.field='name'; onMappingChanged()\">Nome</button>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingPrimary.type='text'; mappingPrimary.field='title'; onMappingChanged()\">T\u00EDtulo</button>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingPrimary.type='text'; mappingPrimary.field='name'; mappingSecondary.type='text'; mappingSecondary.field='role'; onMappingChanged()\">Nome + Papel</button>\n              </div>\n              <div class=\"g g-1-1 gap-12\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Campo</mat-label>\n                  <mat-select [(ngModel)]=\"mappingPrimary.field\" (ngModelChange)=\"onMappingChanged()\">\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{ f }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Tipo</mat-label>\n                  <mat-select [(ngModel)]=\"mappingPrimary.type\" (ngModelChange)=\"onMappingChanged()\">\n                    <mat-option *ngFor=\"let mt of primaryTypeConfigs\" [value]=\"mt.type\">\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ mt.label }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n\n              @switch (mappingPrimary.type) {\n                @case ('text') { <praxis-meta-editor-text [model]=\"mappingPrimary\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('html') { <praxis-meta-editor-text [model]=\"mappingPrimary\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('currency') { <praxis-meta-editor-currency [model]=\"mappingPrimary\" (change)=\"onMappingChanged()\"></praxis-meta-editor-currency> }\n                @case ('date') { <praxis-meta-editor-date [model]=\"mappingPrimary\" (change)=\"onMappingChanged()\"></praxis-meta-editor-date> }\n              }\n\n              <!-- Advanced -->\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header>\n                  <mat-panel-title>Formata\u00E7\u00E3o e Estilo</mat-panel-title>\n                </mat-expansion-panel-header>\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field appearance=\"outline\" *ngIf=\"mappingPrimary.type==='text' || mappingPrimary.type==='html'\">\n                    <mat-label>Classe CSS</mat-label>\n                    <input matInput [(ngModel)]=\"mappingPrimary.class\" (ngModelChange)=\"onMappingChanged()\" />\n                  </mat-form-field>\n                  <mat-form-field appearance=\"outline\" *ngIf=\"mappingPrimary.type==='text' || mappingPrimary.type==='html'\">\n                    <mat-label>Estilo Inline</mat-label>\n                    <input matInput [(ngModel)]=\"mappingPrimary.style\" (ngModelChange)=\"onMappingChanged()\" />\n                  </mat-form-field>\n                  <div class=\"g g-1-1 gap-12\">\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>Classe CSS</mat-label>\n                      <input matInput [(ngModel)]=\"mappingPrimary.class\" (ngModelChange)=\"onMappingChanged()\" />\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>Estilo Inline</mat-label>\n                      <input matInput [(ngModel)]=\"mappingPrimary.style\" (ngModelChange)=\"onMappingChanged()\" />\n                    </mat-form-field>\n                  </div>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n\n          <!-- Secondary -->\n          <mat-expansion-panel [expanded]=\"!!mappingSecondary.field\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>{{ getTypeIcon(mappingSecondary.type) }}</mat-icon>\n                  <span>Secondary (Resumo)</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{ mappingSecondary.field || 'N\u00E3o mapeado' }}</mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"g gap-12\">\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">Presets</span>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingSecondary.type='text'; mappingSecondary.field='subtitle'; onMappingChanged()\">Subt\u00EDtulo</button>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingSecondary.type='date'; mappingSecondary.field='hireDate'; mappingSecondary.dateStyle='short'; onMappingChanged()\">Data curta</button>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingSecondary.type='currency'; mappingSecondary.field='salary'; mappingSecondary.currencyCode='BRL'; mappingSecondary.locale='pt-BR'; onMappingChanged()\">Sal\u00E1rio</button>\n              </div>\n              <div class=\"g g-1-1 gap-12\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Campo</mat-label>\n                  <mat-select [(ngModel)]=\"mappingSecondary.field\" (ngModelChange)=\"onMappingChanged()\">\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{ f }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Tipo</mat-label>\n                  <mat-select [(ngModel)]=\"mappingSecondary.type\" (ngModelChange)=\"onMappingChanged()\">\n                    <mat-option *ngFor=\"let mt of secondaryTypeConfigs\" [value]=\"mt.type\">\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ mt.label }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n\n              @switch (mappingSecondary.type) {\n                @case ('text') { <praxis-meta-editor-text [model]=\"mappingSecondary\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('html') { <praxis-meta-editor-text [model]=\"mappingSecondary\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('currency') { <praxis-meta-editor-currency [model]=\"mappingSecondary\" (change)=\"onMappingChanged()\"></praxis-meta-editor-currency> }\n                @case ('date') { <praxis-meta-editor-date [model]=\"mappingSecondary\" (change)=\"onMappingChanged()\"></praxis-meta-editor-date> }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header>\n                  <mat-panel-title>Formata\u00E7\u00E3o e Estilo</mat-panel-title>\n                </mat-expansion-panel-header>\n                <div class=\"g gap-12 pt-12\">\n                  <div class=\"g g-1-1 gap-12\">\n                    <mat-form-field appearance=\"outline\"><mat-label>Classe CSS</mat-label><input matInput\n                        [(ngModel)]=\"mappingSecondary.class\" (ngModelChange)=\"onMappingChanged()\" /></mat-form-field>\n                    <mat-form-field appearance=\"outline\"><mat-label>Estilo Inline</mat-label><input matInput\n                        [(ngModel)]=\"mappingSecondary.style\" (ngModelChange)=\"onMappingChanged()\" /></mat-form-field>\n                  </div>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n\n          <mat-expansion-panel [expanded]=\"!!mappingMeta.field || mappingMetaFields.length > 0\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>{{ getTypeIcon(mappingMeta.type || 'text') }}</mat-icon>\n                  <span>Meta (Detalhe/Lateral)</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>\n                {{ mappingMetaFields.length ? 'Campo composto (' + mappingMetaFields.length + ')' :\n                (mappingMeta.field || 'N\u00E3o mapeado') }}\n              </mat-panel-description>\n            </mat-expansion-panel-header>\n\n            <div class=\"g gap-12\">\n              <!-- Composition Mode Toggle -->\n              <div class=\"g g-1-1 gap-12 p-12 bg-subtle rounded\">\n                <div class=\"text-caption muted\">Modo de composi\u00E7\u00E3o</div>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Campos para compor (Multi-select)</mat-label>\n                  <mat-select [(ngModel)]=\"mappingMetaFields\" multiple (ngModelChange)=\"onMappingChanged()\">\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{ f }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <div class=\"g g-1-1 ai-center gap-12\" *ngIf=\"mappingMetaFields.length\">\n                  <mat-form-field appearance=\"outline\">\n                    <mat-label>Separador</mat-label>\n                    <input matInput [(ngModel)]=\"mappingMetaSeparator\" (ngModelChange)=\"onMappingChanged()\" />\n                  </mat-form-field>\n                  <mat-slide-toggle [(ngModel)]=\"mappingMetaWrapSecondInParens\" (ngModelChange)=\"onMappingChanged()\">\n                    (Seg) entre par\u00EAnteses\n                  </mat-slide-toggle>\n                </div>\n              </div>\n\n              <!-- Single Field Mode (if no composition) -->\n              <div class=\"g g-1-1 gap-12\" *ngIf=\"!mappingMetaFields.length\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Campo \u00DAnico</mat-label>\n                  <mat-select [(ngModel)]=\"mappingMeta.field\" (ngModelChange)=\"onMappingChanged()\">\n                    <mat-option [value]=\"undefined\">-- Nenhum --</mat-option>\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{ f }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Tipo</mat-label>\n                  <mat-select [(ngModel)]=\"mappingMeta.type\" (ngModelChange)=\"onMappingChanged()\">\n                    <mat-option *ngFor=\"let mt of metaTypeConfigs\" [value]=\"mt.type\">\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ mt.label }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n\n              <!-- Type configuration (pluggable editors) -->\n              @switch (mappingMeta.type) {\n                @case ('text') { <praxis-meta-editor-text [model]=\"mappingMeta\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('html') { <praxis-meta-editor-text [model]=\"mappingMeta\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('currency') { <praxis-meta-editor-currency [model]=\"mappingMeta\" (change)=\"onMappingChanged()\"></praxis-meta-editor-currency> }\n                @case ('date') { <praxis-meta-editor-date [model]=\"mappingMeta\" (change)=\"onMappingChanged()\"></praxis-meta-editor-date> }\n                @case ('chip') {\n                  <praxis-meta-editor-chip\n                    [model]=\"mappingMeta\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-chip>\n                }\n                @case ('rating') {\n                  <praxis-meta-editor-rating\n                    [model]=\"mappingMeta\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-rating>\n                }\n                @case ('icon') {\n                  <praxis-meta-editor-icon\n                    [model]=\"mappingMeta\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-icon>\n                }\n                @case ('image') { <praxis-meta-editor-image [model]=\"mappingMeta\" (change)=\"onMappingChanged()\"></praxis-meta-editor-image> }\n              }\n\n              <!-- Advanced -->\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header><mat-panel-title>Op\u00E7\u00F5es\n                    avan\u00E7adas</mat-panel-title></mat-expansion-panel-header>\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field appearance=\"outline\">\n                    <mat-label>Posi\u00E7\u00E3o</mat-label>\n                    <mat-select [(ngModel)]=\"mappingMeta.placement\" (ngModelChange)=\"onMappingChanged()\">\n                      <mat-option value=\"side\">Lateral (Direita)</mat-option>\n                      <mat-option value=\"line\">Na linha (Abaixo)</mat-option>\n                    </mat-select>\n                  </mat-form-field>\n                  <mat-form-field appearance=\"outline\">\n                    <mat-label>Classe CSS</mat-label>\n                    <input matInput [(ngModel)]=\"mappingMeta.class\" (ngModelChange)=\"onMappingChanged()\" />\n                  </mat-form-field>\n                  <mat-form-field appearance=\"outline\">\n                    <mat-label>Estilo</mat-label>\n                    <input matInput [(ngModel)]=\"mappingMeta.style\" (ngModelChange)=\"onMappingChanged()\" />\n                  </mat-form-field>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n          <!-- Trailing -->\n          <mat-expansion-panel [expanded]=\"!!mappingTrailing.field\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>{{ getTypeIcon(mappingTrailing.type || 'text') }}</mat-icon>\n                  <span>Trailing (Direita)</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{ mappingTrailing.field || 'N\u00E3o mapeado'\n                }}</mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"g gap-12\">\n              <div class=\"g g-1-1 gap-12\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Campo</mat-label>\n                  <mat-select [(ngModel)]=\"mappingTrailing.field\" (ngModelChange)=\"onMappingChanged()\">\n                    <mat-option [value]=\"undefined\">-- Nenhum --</mat-option>\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{ f }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Tipo</mat-label>\n                  <mat-select [(ngModel)]=\"mappingTrailing.type\" (ngModelChange)=\"onMappingChanged()\">\n                    <mat-option *ngFor=\"let mt of trailingTypeConfigs\" [value]=\"mt.type\">\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ mt.label }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">Presets</span>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingTrailing.type='chip'; mappingTrailing.chipColor='primary'; mappingTrailing.chipVariant='filled'; mappingTrailing.field='status'; onMappingChanged()\">Status Chip</button>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingTrailing.type='icon'; mappingTrailing.field='status'; mappingTrailing.iconColor='primary'; onMappingChanged()\">Status \u00CDcone</button>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingTrailing.type='currency'; mappingTrailing.field='price'; mappingTrailing.currencyCode='BRL'; mappingTrailing.locale='pt-BR'; onMappingChanged()\">Pre\u00E7o</button>\n              </div>\n\n              @switch (mappingTrailing.type) {\n                @case ('text') { <praxis-meta-editor-text [model]=\"mappingTrailing\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('html') { <praxis-meta-editor-text [model]=\"mappingTrailing\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('currency') { <praxis-meta-editor-currency [model]=\"mappingTrailing\" (change)=\"onMappingChanged()\"></praxis-meta-editor-currency> }\n                @case ('date') { <praxis-meta-editor-date [model]=\"mappingTrailing\" (change)=\"onMappingChanged()\"></praxis-meta-editor-date> }\n                @case ('chip') {\n                  <praxis-meta-editor-chip\n                    [model]=\"mappingTrailing\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-chip>\n                }\n                @case ('rating') {\n                  <praxis-meta-editor-rating\n                    [model]=\"mappingTrailing\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-rating>\n                }\n                @case ('icon') {\n                  <praxis-meta-editor-icon\n                    [model]=\"mappingTrailing\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-icon>\n                }\n                @case ('image') {\n                  <div class=\"g g-1-1 gap-12\">\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>URL / Expr</mat-label>\n                      <input matInput [(ngModel)]=\"mappingTrailing.imageUrl\" (ngModelChange)=\"onMappingChanged()\"\n                        placeholder=\"https://... ou ${item.imageUrl}\" />\n                      <button mat-icon-button matSuffix type=\"button\" class=\"help-icon-button\"\n                        matTooltip=\"Use URL absoluta/relativa ou express\u00E3o ${item.campo}.\">\n                        <mat-icon>help_outline</mat-icon>\n                      </button>\n                      <mat-error *ngIf=\"isImageUrlRequiredInvalid(mappingTrailing.imageUrl)\">URL/expr obrigat\u00F3ria</mat-error>\n                    </mat-form-field>\n                  </div>\n                  <praxis-meta-editor-image [model]=\"mappingTrailing\" (change)=\"onMappingChanged()\"></praxis-meta-editor-image>\n                  <div class=\"text-caption muted\" *ngIf=\"!mappingTrailing.imageUrl\">Defina a URL/expr para renderizar a imagem.</div>\n                }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header><mat-panel-title>Estilo</mat-panel-title></mat-expansion-panel-header>\n                <div class=\"g gap-12 pt-12\">\n                  <div class=\"g g-1-1 gap-12\">\n                    <mat-form-field appearance=\"outline\"><mat-label>Classe</mat-label><input matInput\n                        [(ngModel)]=\"mappingTrailing.class\" (ngModelChange)=\"onMappingChanged()\" /></mat-form-field>\n                    <mat-form-field appearance=\"outline\"><mat-label>Style</mat-label><input matInput\n                        [(ngModel)]=\"mappingTrailing.style\" (ngModelChange)=\"onMappingChanged()\" /></mat-form-field>\n                  </div>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n\n          <!-- Leading -->\n          <mat-expansion-panel\n            [expanded]=\"!!mappingLeading.field || (mappingLeading.type === 'icon' && !!mappingLeading.icon) || (mappingLeading.type === 'image' && !!mappingLeading.imageUrl)\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>{{ getTypeIcon(mappingLeading.type) }}</mat-icon>\n                  <span>Leading (Esquerda)</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>\n                {{ mappingLeading.type === 'icon' ? (mappingLeading.icon || '\u00CDcone est\u00E1tico') :\n                (mappingLeading.field || (mappingLeading.imageUrl ? 'Imagem est\u00E1tica' : 'N\u00E3o mapeado'))\n                }}\n              </mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"g gap-12\">\n              <div class=\"g g-1-1 gap-12\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Tipo</mat-label>\n                  <mat-select [(ngModel)]=\"mappingLeading.type\" (ngModelChange)=\"onMappingChanged()\">\n                    <mat-option *ngFor=\"let mt of leadingTypeConfigs\" [value]=\"mt.type\">\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ mt.label }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <!-- Field (only if not static icon/image, though user might want dynamic) -->\n                <mat-form-field appearance=\"outline\"\n                  *ngIf=\"mappingLeading.type !== 'icon' && mappingLeading.type !== 'image'\">\n                  <mat-label>Campo</mat-label>\n                  <mat-select [(ngModel)]=\"mappingLeading.field\" (ngModelChange)=\"onMappingChanged()\">\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{ f }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">Presets</span>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingLeading.type='icon'; mappingLeading.icon='person'; mappingLeading.iconColor='primary'; onMappingChanged()\">Avatar \u00CDcone</button>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingLeading.type='image'; mappingLeading.imageUrl='https://placehold.co/64x64'; mappingLeading.imageAlt='Avatar'; mappingLeading.badgeText='${item.status}'; onMappingChanged()\">Avatar Imagem + Badge</button>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingLeading.type='chip'; mappingLeading.field='tag'; mappingLeading.chipColor='accent'; mappingLeading.chipVariant='filled'; onMappingChanged()\">Chip Tag</button>\n              </div>\n\n              <!-- Icon Specific -->\n              <div class=\"g g-1-auto gap-12 ai-center\" *ngIf=\"mappingLeading.type === 'icon'\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>\u00CDcone</mat-label>\n                  <input matInput [(ngModel)]=\"mappingLeading.icon\" (ngModelChange)=\"onMappingChanged()\" />\n                  <button mat-icon-button matSuffix (click)=\"pickLeadingIcon()\"><mat-icon>search</mat-icon></button>\n                </mat-form-field>\n                <div class=\"text-caption muted\">Use pipe <code>|iconMap</code> no extra pipe para\n                  din\u00E2mico</div>\n              </div>\n              <div *ngIf=\"mappingLeading.type === 'icon'\">\n                <praxis-meta-editor-icon\n                  [model]=\"mappingLeading\"\n                  [paletteOptions]=\"paletteOptions\"\n                  [colorDotBackground]=\"colorDotBackground\"\n                  [isCustomColor]=\"isCustomColor\"\n                  [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                  (change)=\"onMappingChanged()\"></praxis-meta-editor-icon>\n              </div>\n\n              <!-- Image Specific -->\n              <div class=\"g g-1-1 gap-12\" *ngIf=\"mappingLeading.type === 'image'\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>URL da Imagem</mat-label>\n                  <input matInput [(ngModel)]=\"mappingLeading.imageUrl\" (ngModelChange)=\"onMappingChanged()\"\n                    placeholder=\"https://... ou ${item.imageUrl}\" />\n                  <button mat-icon-button matSuffix type=\"button\" class=\"help-icon-button\"\n                    matTooltip=\"Use URL absoluta/relativa ou express\u00E3o ${item.campo}.\">\n                    <mat-icon>help_outline</mat-icon>\n                  </button>\n                  <mat-error *ngIf=\"isImageUrlRequiredInvalid(mappingLeading.imageUrl)\">URL/expr obrigat\u00F3ria</mat-error>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Alt Text</mat-label>\n                  <input matInput [(ngModel)]=\"mappingLeading.imageAlt\" (ngModelChange)=\"onMappingChanged()\" />\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Badge Texto</mat-label>\n                  <input matInput [(ngModel)]=\"mappingLeading.badgeText\" (ngModelChange)=\"onMappingChanged()\" />\n                </mat-form-field>\n              </div>\n\n              @switch (mappingLeading.type) {\n                @case ('text') { <praxis-meta-editor-text [model]=\"mappingLeading\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('html') { <praxis-meta-editor-text [model]=\"mappingLeading\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('chip') {\n                  <praxis-meta-editor-chip\n                    [model]=\"mappingLeading\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-chip>\n                }\n                @case ('rating') {\n                  <praxis-meta-editor-rating\n                    [model]=\"mappingLeading\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-rating>\n                }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header><mat-panel-title>Estilo</mat-panel-title></mat-expansion-panel-header>\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field appearance=\"outline\"><mat-label>Classe</mat-label><input matInput\n                      [(ngModel)]=\"mappingLeading.class\" (ngModelChange)=\"onMappingChanged()\" /></mat-form-field>\n                  <mat-form-field appearance=\"outline\"><mat-label>Style</mat-label><input matInput\n                      [(ngModel)]=\"mappingLeading.style\" (ngModelChange)=\"onMappingChanged()\" /></mat-form-field>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n\n          <!-- Features -->\n          <mat-expansion-panel [expanded]=\"featuresVisible && features.length > 0\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>view_list</mat-icon>\n                  <span>Recursos (Features)</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{ features.length }} item(s)</mat-panel-description>\n            </mat-expansion-panel-header>\n\n            <div class=\"g gap-12\">\n              <div class=\"g row-flow gap-12 ai-center\">\n                <mat-slide-toggle [(ngModel)]=\"featuresVisible\" (ngModelChange)=\"onFeaturesChanged()\">Ativar\n                  recursos</mat-slide-toggle>\n                <mat-slide-toggle [(ngModel)]=\"featuresSyncWithMeta\" (ngModelChange)=\"onMappingChanged()\">Sincronizar\n                  com Meta</mat-slide-toggle>\n                <span class=\"flex-1\"></span>\n                <mat-button-toggle-group [(ngModel)]=\"featuresMode\" (change)=\"onFeaturesChanged()\" appearance=\"legacy\">\n                  <mat-button-toggle value=\"icons+labels\"><mat-icon>view_list</mat-icon></mat-button-toggle>\n                  <mat-button-toggle value=\"icons-only\"><mat-icon>more_horiz</mat-icon></mat-button-toggle>\n                </mat-button-toggle-group>\n              </div>\n\n              <div *ngFor=\"let f of features; let i = index\" class=\"g g-auto-1 gap-8 ai-center p-8 border rounded mb-2\">\n                <button mat-icon-button (click)=\"pickFeatureIcon(i)\"><mat-icon>{{ f.icon || 'search'\n                    }}</mat-icon></button>\n                <mat-form-field appearance=\"outline\" class=\"dense-form-field no-sub\">\n                  <input matInput [(ngModel)]=\"f.expr\" (ngModelChange)=\"onFeaturesChanged()\" placeholder=\"Expr/Texto\" />\n                </mat-form-field>\n                <button mat-icon-button color=\"warn\" (click)=\"removeFeature(i)\"><mat-icon>delete</mat-icon></button>\n              </div>\n              <button mat-button color=\"primary\" (click)=\"addFeature()\"><mat-icon>add</mat-icon>\n                Adicionar recurso</button>\n            </div>\n          </mat-expansion-panel>\n          <!-- Section Header -->\n          <mat-expansion-panel [expanded]=\"!!mappingSectionHeader.expr\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>{{ getTypeIcon(mappingSectionHeader.type) }}</mat-icon>\n                  <span>Cabe\u00E7alho de Se\u00E7\u00E3o</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{ mappingSectionHeader.expr || 'N\u00E3o configurado'\n                }}</mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"g gap-12\">\n              <div class=\"g g-1-1 gap-12\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Tipo</mat-label>\n                  <mat-select [(ngModel)]=\"mappingSectionHeader.type\" (ngModelChange)=\"onMappingChanged()\">\n                    <mat-option *ngFor=\"let mt of sectionHeaderTypeConfigs\" [value]=\"mt.type\">\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ mt.label }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Express\u00E3o (item.key)</mat-label>\n                  <input matInput [(ngModel)]=\"mappingSectionHeader.expr\" (ngModelChange)=\"onMappingChanged()\"\n                    placeholder=\"item.key\" />\n                </mat-form-field>\n              </div>\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">Presets</span>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingSectionHeader.type='text'; mappingSectionHeader.expr='${item.key}'; onMappingChanged()\">Texto padr\u00E3o</button>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingSectionHeader.type='chip'; mappingSectionHeader.chipColor='primary'; mappingSectionHeader.chipVariant='filled'; mappingSectionHeader.expr='${item.key}'; onMappingChanged()\">Chip padr\u00E3o</button>\n              </div>\n\n              @switch (mappingSectionHeader.type) {\n                @case ('text') { <praxis-meta-editor-text [model]=\"mappingSectionHeader\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('html') { <praxis-meta-editor-text [model]=\"mappingSectionHeader\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('chip') {\n                  <praxis-meta-editor-chip\n                    [model]=\"mappingSectionHeader\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-chip>\n                }\n                @case ('rating') {\n                  <praxis-meta-editor-rating\n                    [model]=\"mappingSectionHeader\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-rating>\n                }\n                @case ('icon') {\n                  <praxis-meta-editor-icon\n                    [model]=\"mappingSectionHeader\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-icon>\n                }\n                @case ('image') {\n                  <div class=\"g g-1-1 gap-12\">\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>URL Imagem</mat-label>\n                      <input matInput [(ngModel)]=\"mappingSectionHeader.imageUrl\" (ngModelChange)=\"onMappingChanged()\" />\n                      <mat-error *ngIf=\"isImageUrlRequiredInvalid(mappingSectionHeader.imageUrl)\">URL/expr obrigat\u00F3ria</mat-error>\n                    </mat-form-field>\n                  </div>\n                  <div class=\"text-caption muted\" *ngIf=\"!mappingSectionHeader.imageUrl\">Defina a URL/expr para renderizar a imagem.</div>\n                  <praxis-meta-editor-image [model]=\"mappingSectionHeader\" (change)=\"onMappingChanged()\"></praxis-meta-editor-image>\n                }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header><mat-panel-title>Estilo</mat-panel-title></mat-expansion-panel-header>\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field appearance=\"outline\"><mat-label>Classe</mat-label><input matInput\n                      [(ngModel)]=\"mappingSectionHeader.class\" (ngModelChange)=\"onMappingChanged()\" /></mat-form-field>\n                  <mat-form-field appearance=\"outline\"><mat-label>Style</mat-label><input matInput\n                      [(ngModel)]=\"mappingSectionHeader.style\" (ngModelChange)=\"onMappingChanged()\" /></mat-form-field>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n\n          <!-- Empty State -->\n          <mat-expansion-panel [expanded]=\"!!mappingEmptyState.expr\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>inbox</mat-icon>\n                  <span>Estado Vazio</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{ mappingEmptyState.expr || 'Padr\u00E3o' }}</mat-panel-description>\n            </mat-expansion-panel-header>\n            <div class=\"g gap-12\">\n              <div class=\"g g-1-1 gap-12\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Tipo</mat-label>\n                  <mat-select [(ngModel)]=\"mappingEmptyState.type\" (ngModelChange)=\"onMappingChanged()\">\n                    <mat-option *ngFor=\"let mt of emptyStateTypeConfigs\" [value]=\"mt.type\">\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ mt.label }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Mensagem / Expr</mat-label>\n                  <input matInput [(ngModel)]=\"mappingEmptyState.expr\" (ngModelChange)=\"onMappingChanged()\" />\n                </mat-form-field>\n              </div>\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">Presets</span>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingEmptyState.type='text'; mappingEmptyState.expr='Nenhum item dispon\u00EDvel'; onMappingChanged()\">Mensagem padr\u00E3o</button>\n                <button mat-stroked-button type=\"button\" (click)=\"mappingEmptyState.type='image'; mappingEmptyState.imageUrl='/list-empty-state.svg'; mappingEmptyState.imageAlt='Sem resultados'; onMappingChanged()\">Imagem padr\u00E3o</button>\n              </div>\n\n              @switch (mappingEmptyState.type) {\n                @case ('text') { <praxis-meta-editor-text [model]=\"mappingEmptyState\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('html') { <praxis-meta-editor-text [model]=\"mappingEmptyState\" [setPipe]=\"setPipe.bind(this)\" (change)=\"onMappingChanged()\"></praxis-meta-editor-text> }\n                @case ('chip') {\n                  <praxis-meta-editor-chip\n                    [model]=\"mappingEmptyState\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-chip>\n                }\n                @case ('rating') {\n                  <praxis-meta-editor-rating\n                    [model]=\"mappingEmptyState\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-rating>\n                }\n                @case ('icon') {\n                  <praxis-meta-editor-icon\n                    [model]=\"mappingEmptyState\"\n                    [paletteOptions]=\"paletteOptions\"\n                    [colorDotBackground]=\"colorDotBackground\"\n                    [isCustomColor]=\"isCustomColor\"\n                    [enableCustomColor]=\"enableCustomColor.bind(this)\"\n                    (change)=\"onMappingChanged()\"></praxis-meta-editor-icon>\n                }\n                @case ('image') {\n                  <div class=\"g g-1-1 gap-12\">\n                    <mat-form-field appearance=\"outline\"><mat-label>URL Imagem</mat-label><input matInput\n                        [(ngModel)]=\"mappingEmptyState.imageUrl\" (ngModelChange)=\"onMappingChanged()\" />\n                        <mat-error *ngIf=\"isImageUrlRequiredInvalid(mappingEmptyState.imageUrl)\">URL/expr obrigat\u00F3ria</mat-error>\n                      </mat-form-field>\n                  </div>\n                  <div class=\"text-caption muted\" *ngIf=\"!mappingEmptyState.imageUrl\">Defina a URL/expr para renderizar a imagem.</div>\n                  <praxis-meta-editor-image [model]=\"mappingEmptyState\" (change)=\"onMappingChanged()\"></praxis-meta-editor-image>\n                }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header><mat-panel-title>Estilo</mat-panel-title></mat-expansion-panel-header>\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field appearance=\"outline\"><mat-label>Classe</mat-label><input matInput\n                      [(ngModel)]=\"mappingEmptyState.class\" (ngModelChange)=\"onMappingChanged()\" /></mat-form-field>\n                  <mat-form-field appearance=\"outline\"><mat-label>Style</mat-label><input matInput\n                      [(ngModel)]=\"mappingEmptyState.style\" (ngModelChange)=\"onMappingChanged()\" /></mat-form-field>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n        </mat-accordion>\n\n        <button mat-flat-button color=\"primary\" (click)=\"applyTemplate()\">Aplicar mapeamento</button>\n        <button mat-button (click)=\"inferFromFields()\" [disabled]=\"!fields.length\">Inferir do schema</button>\n        <div class=\"g g-auto-220 gap-12 ai-end mt-12\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Skeleton (quantidade)</mat-label>\n            <input matInput type=\"number\" min=\"0\" [(ngModel)]=\"skeletonCountInput\"\n              (ngModelChange)=\"onSkeletonChanged($event)\" />\n          </mat-form-field>\n        </div>\n\n        <div class=\"g gap-12 mt-12\">\n          <div class=\"g row-flow gap-8 ai-center\">\n            <span class=\"section-title mat-subtitle-1\">Pr\u00E9via de tema</span>\n            <mat-button-toggle-group [(ngModel)]=\"skinPreviewTheme\" (change)=\"onSkinChanged()\" appearance=\"legacy\">\n              <mat-button-toggle [value]=\"'light'\">Claro</mat-button-toggle>\n              <mat-button-toggle [value]=\"'dark'\">Escuro</mat-button-toggle>\n              <mat-button-toggle [value]=\"'grid'\">Grade</mat-button-toggle>\n            </mat-button-toggle-group>\n          </div>\n          <div class=\"skin-preview-wrap\">\n            <praxis-list-skin-preview [config]=\"working\" [items]=\"previewData\"\n              [theme]=\"skinPreviewTheme\"></praxis-list-skin-preview>\n          </div>\n        </div>\n      </div>\n    </div>\n\n  </mat-tab>\n  <mat-tab label=\"i18n/A11y\">\n    <div class=\"editor-content grid gap-3\" *ngIf=\"working?.a11y && working?.events\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Locale padr\u00E3o</mat-label>\n        <input matInput [(ngModel)]=\"working.i18n.locale\" (ngModelChange)=\"markDirty()\" placeholder=\"ex.: pt-BR\" />\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Moeda padr\u00E3o</mat-label>\n        <input matInput [(ngModel)]=\"working.i18n.currency\" (ngModelChange)=\"markDirty()\" placeholder=\"ex.: BRL\" />\n      </mat-form-field>\n      <mat-divider class=\"my-8\"></mat-divider>\n      <div class=\"subtitle\">Acessibilidade</div>\n      <div class=\"g g-auto-220 gap-12 ai-end\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>aria-label</mat-label>\n          <input matInput [(ngModel)]=\"working!.a11y!.ariaLabel\" (ngModelChange)=\"markDirty()\" />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>aria-labelledby</mat-label>\n          <input matInput [(ngModel)]=\"working!.a11y!.ariaLabelledBy\" (ngModelChange)=\"markDirty()\" />\n        </mat-form-field>\n      </div>\n      <div class=\"g g-auto-220 gap-12 ai-end\">\n        <mat-slide-toggle [(ngModel)]=\"working!.a11y!.highContrast\" (ngModelChange)=\"markDirty()\">Alto\n          contraste</mat-slide-toggle>\n        <mat-slide-toggle [(ngModel)]=\"working!.a11y!.reduceMotion\" (ngModelChange)=\"markDirty()\">Reduzir\n          movimento</mat-slide-toggle>\n      </div>\n      <mat-divider class=\"my-8\"></mat-divider>\n      <div class=\"subtitle\">Eventos</div>\n      <div class=\"g g-auto-220 gap-12 ai-end\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>itemClick</mat-label>\n          <input matInput [(ngModel)]=\"working!.events!.itemClick\" (ngModelChange)=\"markDirty()\" />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>actionClick</mat-label>\n          <input matInput [(ngModel)]=\"working!.events!.actionClick\" (ngModelChange)=\"markDirty()\" />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>selectionChange</mat-label>\n          <input matInput [(ngModel)]=\"working!.events!.selectionChange\" (ngModelChange)=\"markDirty()\" />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>loaded</mat-label>\n          <input matInput [(ngModel)]=\"working!.events!.loaded\" (ngModelChange)=\"markDirty()\" />\n        </mat-form-field>\n      </div>\n    </div>\n  </mat-tab>\n  <mat-tab label=\"Sele\u00E7\u00E3o\">\n    <div class=\"editor-content grid gap-3\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Modo</mat-label>\n        <mat-select [(ngModel)]=\"working.selection.mode\" (ngModelChange)=\"onSelectionChanged()\">\n          <mat-option value=\"none\">Sem sele\u00E7\u00E3o</mat-option>\n          <mat-option value=\"single\">\u00DAnica</mat-option>\n          <mat-option value=\"multiple\">M\u00FAltipla</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Nome no formul\u00E1rio</mat-label>\n        <input matInput [(ngModel)]=\"working.selection.formControlName\" (ngModelChange)=\"onSelectionChanged()\" />\n        <button mat-icon-button matSuffix type=\"button\" class=\"help-icon-button\" matTooltip=\"formControlName\">\n          <mat-icon>help_outline</mat-icon>\n        </button>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Caminho no formul\u00E1rio</mat-label>\n        <input matInput [(ngModel)]=\"working.selection.formControlPath\" (ngModelChange)=\"onSelectionChanged()\" />\n        <button mat-icon-button matSuffix type=\"button\" class=\"help-icon-button\" matTooltip=\"formControlPath\">\n          <mat-icon>help_outline</mat-icon>\n        </button>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Comparar por (campo)</mat-label>\n        <input matInput [(ngModel)]=\"working.selection.compareBy\" (ngModelChange)=\"onSelectionChanged()\" />\n        <button mat-icon-button matSuffix type=\"button\" class=\"help-icon-button\" matTooltip=\"Chave unica do item.\">\n          <mat-icon>help_outline</mat-icon>\n        </button>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Retorno</mat-label>\n        <mat-select [(ngModel)]=\"working.selection.return\" (ngModelChange)=\"onSelectionChanged()\">\n          <mat-option value=\"value\">value</mat-option>\n          <mat-option value=\"item\">item</mat-option>\n          <mat-option value=\"id\">id</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n  </mat-tab>\n  <mat-tab label=\"Apar\u00EAncia\">\n    <div class=\"editor-content grid gap-3\">\n      <div class=\"preset-row g row-flow gap-8\">\n        <button mat-button (click)=\"applySkinPreset('pill-soft')\">Pill Soft</button>\n        <button mat-button (click)=\"applySkinPreset('gradient-tile')\">Gradient Tile</button>\n        <button mat-button (click)=\"applySkinPreset('glass')\">Glass</button>\n        <button mat-button (click)=\"applySkinPreset('elevated')\">Elevated</button>\n        <button mat-button (click)=\"applySkinPreset('outline')\">Outline</button>\n        <button mat-button (click)=\"applySkinPreset('flat')\">Flat</button>\n        <button mat-button (click)=\"applySkinPreset('neumorphism')\">Neumorphism</button>\n      </div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Estilo</mat-label>\n        <mat-select [(ngModel)]=\"working.skin.type\" (ngModelChange)=\"onSkinTypeChanged($event)\">\n          <mat-option value=\"pill-soft\">Pill Soft</mat-option>\n          <mat-option value=\"gradient-tile\">Gradient Tile</mat-option>\n          <mat-option value=\"glass\">Glass</mat-option>\n          <mat-option value=\"elevated\">Elevated</mat-option>\n          <mat-option value=\"outline\">Outline</mat-option>\n          <mat-option value=\"flat\">Flat</mat-option>\n          <mat-option value=\"neumorphism\">Neumorphism</mat-option>\n          <mat-option value=\"custom\">Custom</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Raio</mat-label>\n        <input matInput [(ngModel)]=\"working.skin.radius\" (ngModelChange)=\"onSkinChanged()\"\n          placeholder=\"ex.: 1.25rem\" />\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Sombra</mat-label>\n        <input matInput [(ngModel)]=\"working.skin.shadow\" (ngModelChange)=\"onSkinChanged()\"\n          placeholder=\"ex.: var(--md-sys-elevation-level2)\" />\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Borda</mat-label>\n        <input matInput [(ngModel)]=\"working.skin.border\" (ngModelChange)=\"onSkinChanged()\" />\n      </mat-form-field>\n      <mat-form-field *ngIf=\"working.skin.type==='glass'\" appearance=\"outline\">\n        <mat-label>Desfoque</mat-label>\n        <input matInput [(ngModel)]=\"working.skin.backdropBlur\" (ngModelChange)=\"onSkinChanged()\"\n          placeholder=\"ex.: 8px\" />\n      </mat-form-field>\n      <div *ngIf=\"working.skin.type==='gradient-tile'\" class=\"g gap-12\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Degrad\u00EA de</mat-label>\n          <input matInput [ngModel]=\"working.skin.gradient.from || ''\"\n            (ngModelChange)=\"onSkinGradientChanged('from', $event)\" />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Degrad\u00EA at\u00E9</mat-label>\n          <input matInput [ngModel]=\"working.skin.gradient.to || ''\"\n            (ngModelChange)=\"onSkinGradientChanged('to', $event)\" />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>\u00C2ngulo</mat-label>\n          <input matInput type=\"number\" [ngModel]=\"working.skin.gradient.angle ?? 135\"\n            (ngModelChange)=\"onSkinGradientChanged('angle', $event)\" />\n        </mat-form-field>\n      </div>\n\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Classe CSS extra (skin.class)</mat-label>\n        <input matInput [(ngModel)]=\"working.skin.class\" (ngModelChange)=\"onSkinChanged()\"\n          placeholder=\"ex.: my-list-skin\" />\n      </mat-form-field>\n\n      <div *ngIf=\"working.skin.type==='custom'\" class=\"g g-auto-220 gap-12 ai-end\">\n        <mat-form-field appearance=\"outline\" class=\"w-full\">\n          <mat-label>Estilo inline (skin.inlineStyle)</mat-label>\n          <textarea matInput rows=\"4\" [(ngModel)]=\"working.skin.inlineStyle\" (ngModelChange)=\"onSkinChanged()\"\n            [attr.placeholder]=\"':host{--p-list-radius: 1rem}'\"></textarea>\n        </mat-form-field>\n        <div class=\"text-caption\">\n          Exemplo de CSS por classe (adicione no seu styles global):\n          <pre class=\"code-block\">.my-list-skin .item-card &#123;\n  border-radius: 14px;\n  border: 1px solid var(--md-sys-color-outline-variant);\n  box-shadow: var(--md-sys-elevation-level2);\n&#125;\n.my-list-skin .mat-mdc-list-item .list-item-content &#123;\n  backdrop-filter: blur(6px);\n&#125;</pre>\n        </div>\n      </div>\n\n\n    </div>\n  </mat-tab>\n</mat-tab-group>\n", styles: [".confirm-type{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;font-size:11px;line-height:16px;background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface-variant)}.confirm-type.danger{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container)}.confirm-type.warning{background:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container)}.confirm-type.info{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}:host{display:block;color:var(--md-sys-color-on-surface)}.list-editor-tabs{--editor-surface: var(--md-sys-color-surface-container-lowest);--editor-border: 1px solid var(--md-sys-color-outline-variant);--editor-radius: var(--md-sys-shape-corner-large, 16px);--editor-muted: var(--md-sys-color-on-surface-variant);--editor-accent: var(--md-sys-color-primary)}.editor-content{padding:16px;background:var(--editor-surface);border:var(--editor-border);border-radius:var(--editor-radius);display:grid;gap:12px}.editor-content .mat-mdc-form-field{width:100%;max-width:none;--mdc-outlined-text-field-container-height: 48px;--mdc-outlined-text-field-outline-color: var(--md-sys-color-outline-variant);--mdc-outlined-text-field-hover-outline-color: var(--md-sys-color-outline);--mdc-outlined-text-field-focus-outline-color: var(--md-sys-color-primary);--mdc-outlined-text-field-error-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-error-focus-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-error-hover-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-label-text-color: var(--md-sys-color-on-surface-variant);--mdc-outlined-text-field-input-text-color: var(--md-sys-color-on-surface);--mdc-outlined-text-field-supporting-text-color: var(--md-sys-color-on-surface-variant)}.editor-content .mat-mdc-form-field.w-full{max-width:none}.help-icon-button{--mdc-icon-button-state-layer-size: 28px;--mdc-icon-button-icon-size: 18px;width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}.help-icon-button mat-icon{font-size:18px;line-height:18px;width:18px;height:18px}.editor-split{grid-template-columns:minmax(0,1fr);align-items:start}.editor-main,.editor-aside{display:grid;gap:12px}.skin-preview-wrap{border-radius:calc(var(--editor-radius) - 4px);border:var(--editor-border);background:var(--md-sys-color-surface-container);padding:12px}.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;color:var(--editor-muted);font-weight:500}.section-title{color:var(--editor-muted);font-weight:600}.chips-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.error{color:var(--md-sys-color-error);font-size:.85rem}.muted{color:var(--editor-muted)}.text-caption{color:var(--editor-muted);font-size:.8rem}:host ::ng-deep .mat-mdc-select-panel .option-icon{font-size:18px;margin-right:6px;vertical-align:middle}:host ::ng-deep .mat-mdc-select-panel .color-dot{width:10px;height:10px;border-radius:999px;display:inline-block;margin-right:6px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-outline)}:host ::ng-deep .mat-mdc-select-panel .color-primary{background:var(--md-sys-color-primary)}:host ::ng-deep .mat-mdc-select-panel .color-accent{background:var(--md-sys-color-tertiary)}:host ::ng-deep .mat-mdc-select-panel .color-warn{background:var(--md-sys-color-error)}:host ::ng-deep .mat-mdc-select-panel .color-default{background:var(--md-sys-color-outline)}@media(max-width:1024px){.editor-split{grid-template-columns:minmax(0,1fr)}}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -3242,6 +4047,9 @@ class PraxisList {
     storage = inject(ASYNC_CONFIG_STORAGE);
     skin = inject(ListSkinService);
     inferredForPath = new Set();
+    schemaInferenceInFlight = new Set();
+    schemaFieldsByPath = new Map();
+    appliedRuntimeConfig;
     data = inject(ListDataService);
     settings = inject(SettingsPanelService);
     cdr = inject(ChangeDetectorRef);
@@ -3279,7 +4087,8 @@ class PraxisList {
     destroy$ = new Subject();
     actionLoadingState = {};
     ngOnInit() {
-        this.applyConfigChange();
+        this.initializeDataStreams();
+        this.applyAuthoringPayload(this.config, 'external-input');
         this.setupSearch();
         this.applyPersistence();
     }
@@ -3303,7 +4112,7 @@ class PraxisList {
             // We already perform the initial setup in ngOnInit, so skip the first change here.
             if (!changes['config'].firstChange) {
                 this.externalConfigRevision += 1;
-                this.applyConfigChange();
+                this.applyAuthoringPayload(changes['config'].currentValue, 'external-input');
             }
         }
         if (shouldApplyPersistence) {
@@ -3334,8 +4143,8 @@ class PraxisList {
                     if (revisionAtLoadStart !== this.externalConfigRevision)
                         return;
                     const currentId = this.config?.id;
-                    this.config = currentId ? { ...saved, id: currentId } : { ...saved };
-                    this.applyConfigChange();
+                    const persisted = currentId ? { ...saved, id: currentId } : { ...saved };
+                    this.applyAuthoringPayload(persisted, 'persistence');
                 }
             },
             error: () => {
@@ -3354,22 +4163,18 @@ class PraxisList {
             },
         });
     }
-    applyConfigChange() {
-        // Try infer templating upfront when using remote resource
-        this.tryInferTemplatingFromSchema(this.config);
-        this.data.setConfig(this.config);
+    initializeDataStreams() {
+        if (this.items$)
+            return;
         this.items$ = this.data.stream();
         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 || {};
     }
     setupSearch() {
         this.search$
-            .pipe(debounceTime$1(300), distinctUntilChanged$1(), takeUntil(this.destroy$))
+            .pipe(debounceTime(300), distinctUntilChanged$1(), takeUntil$1(this.destroy$))
             .subscribe((term) => {
             const field = this.config?.ui?.searchField;
             if (!field)
@@ -3578,19 +4383,18 @@ class PraxisList {
             title: 'Lista – Configurações',
             content: {
                 component: PraxisListConfigEditor,
-                inputs: { config: this.config, listId: this.listId },
+                inputs: {
+                    config: this.config,
+                    document: createListAuthoringDocument({ config: this.config }),
+                    listId: this.listId,
+                },
             },
         });
-        ref.applied$.pipe(takeUntil(this.destroy$)).subscribe((applied) => {
-            const newCfg = applied?.config || applied;
-            this.onEditorApplied(newCfg);
+        ref.applied$.pipe(takeUntil$1(this.destroy$)).subscribe((applied) => {
+            this.applyAuthoringPayload(applied, 'settings-applied');
         });
-        ref.saved$.pipe(takeUntil(this.destroy$)).subscribe((saved) => {
-            const newCfg = saved?.config || saved;
-            if (key) {
-                this.persistConfig(key, newCfg);
-            }
-            this.onEditorApplied(newCfg);
+        ref.saved$.pipe(takeUntil$1(this.destroy$)).subscribe((saved) => {
+            this.applyAuthoringPayload(saved, 'settings-saved');
         });
     }
     nextPage() {
@@ -3630,17 +4434,54 @@ class PraxisList {
         return Math.min(to, total || 0);
     }
     applyConfigFromAdapter(newCfg) {
-        this.config = newCfg;
-        // Optionally infer templates from backend schema if not defined
-        this.tryInferTemplatingFromSchema(newCfg);
-        // Re-apply runtime wiring
-        this.data.setConfig(this.config);
-        this.setupSelectionBinding();
-        this.applySkins();
-        this.cdr.markForCheck();
+        this.applyAuthoringPayload(newCfg, 'adapter');
     }
-    onEditorApplied(newCfg) {
-        this.applyConfigFromAdapter(newCfg);
+    applyAuthoringPayload(raw, trigger) {
+        const doc = parseLegacyOrListDocument(raw);
+        const plan = buildListApplyPlan(doc, this.buildListEditorRuntimeContext(doc), {
+            saveConfig: trigger === 'settings-saved',
+        });
+        this.executeListEditorApplyPlan(plan, doc, trigger);
+    }
+    buildListEditorRuntimeContext(doc) {
+        const resourcePath = doc?.config?.dataSource?.resourcePath ||
+            this.appliedRuntimeConfig?.dataSource?.resourcePath;
+        return {
+            currentConfig: this.appliedRuntimeConfig,
+            schemaFieldNames: resourcePath
+                ? this.schemaFieldsByPath.get(resourcePath)
+                : undefined,
+        };
+    }
+    executeListEditorApplyPlan(plan, _doc, trigger) {
+        if (plan.diagnostics.some((item) => item.level === 'error')) {
+            return;
+        }
+        this.initializeDataStreams();
+        this.config = normalizeListConfig(plan.canonicalConfig);
+        this.appliedRuntimeConfig = this.config;
+        if (plan.runtime?.applyConfig) {
+            this.data.setConfig(this.config);
+            this.lastQuery = this.config?.dataSource?.query || {};
+        }
+        if (plan.runtime?.rebindSelection) {
+            this.setupSelectionBinding();
+        }
+        if (plan.runtime?.reapplySkin) {
+            this.applySkins();
+        }
+        if (plan.persistence?.saveConfig) {
+            const key = this.storageKey();
+            if (key) {
+                this.persistConfig(key, this.config);
+            }
+        }
+        if (plan.runtime?.schemaInference) {
+            this.executeSchemaInferenceForPlan(plan.runtime.schemaInference, plan.persistence?.saveConfig === true);
+        }
+        if (plan.runtime?.markForCheck) {
+            this.cdr.markForCheck();
+        }
     }
     storageKey() {
         const id = this.componentKeyId();
@@ -3673,44 +4514,48 @@ class PraxisList {
         }
     }
     crud = inject(GenericCrudService, { optional: true });
-    tryInferTemplatingFromSchema(cfg) {
-        const rp = cfg.dataSource?.resourcePath;
-        if (!rp || !this.crud)
+    executeSchemaInferenceForPlan(inferencePlan, saveAfterInference = false) {
+        const resourcePath = inferencePlan.resourcePath;
+        if (!resourcePath || !this.crud)
+            return;
+        if (this.inferredForPath.has(resourcePath))
             return;
-        const templ = cfg.templating || {};
-        const needsPrimary = !templ.primary;
-        if (!needsPrimary)
-            return; // do not override when user already defined
-        if (this.inferredForPath.has(rp))
-            return; // avoid repeated schema calls for the same path
+        if (this.schemaInferenceInFlight.has(resourcePath))
+            return;
+        if (inferencePlan.targetDocument.config?.templating?.primary)
+            return;
+        this.schemaInferenceInFlight.add(resourcePath);
         try {
-            this.crud.configure(rp);
+            this.crud.configure(resourcePath);
             this.crud
                 .getSchema()
                 .pipe(take(1))
                 .subscribe({
                 next: (fields) => {
-                    this.inferredForPath.add(rp);
                     const names = (fields || [])
-                        .map((f) => f.name || f.field || f.key)
+                        .map((field) => field?.name || field?.field || field?.key)
                         .filter(Boolean);
                     if (!names.length)
                         return;
-                    const updated = inferTemplatingFromSchema(cfg, names);
-                    // Assign back to current config reference
-                    // Only assign if primary is still not defined to avoid loops
-                    if (!this.config?.templating?.primary) {
-                        this.config = updated;
-                    }
+                    this.inferredForPath.add(resourcePath);
+                    this.schemaFieldsByPath.set(resourcePath, names);
+                    const inferredDocument = inferListAuthoringDocument(inferencePlan.sourceDocument, {
+                        schemaFieldNames: names,
+                    });
+                    this.applyAuthoringPayload(inferredDocument, saveAfterInference ? 'settings-saved' : 'schema-inference');
                 },
                 error: () => {
-                    // ignore schema errors; keep config as-is
-                    this.inferredForPath.add(rp);
+                    this.schemaInferenceInFlight.delete(resourcePath);
+                    this.schemaFieldsByPath.delete(resourcePath);
+                },
+                complete: () => {
+                    this.schemaInferenceInFlight.delete(resourcePath);
                 },
             });
         }
         catch {
-            // ignore
+            this.schemaInferenceInFlight.delete(resourcePath);
+            this.schemaFieldsByPath.delete(resourcePath);
         }
     }
     evalSlot(slot, item) {
@@ -4908,5 +5753,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { LIST_AI_CAPABILITIES, ListDataService, ListSkinService, PRAXIS_LIST_COMPONENT_METADATA, PraxisList, PraxisListConfigEditor, PraxisListDocPageComponent, adaptSelection, evalExpr, evaluateTemplate, inferTemplatingFromSchema, providePraxisListMetadata };
+export { LIST_AI_CAPABILITIES, ListDataService, ListSkinService, PRAXIS_LIST_COMPONENT_METADATA, PraxisList, PraxisListConfigEditor, PraxisListDocPageComponent, PraxisListJsonConfigEditorComponent, adaptSelection, buildListApplyPlan, createListAuthoringDocument, evalExpr, evaluateTemplate, inferListAuthoringDocument, inferTemplatingFromSchema, normalizeListActionPayloads, normalizeListAuthoringDocument, normalizeListConfig, parseLegacyOrListDocument, projectListAuthoringDocument, providePraxisListMetadata, serializeListAuthoringDocument, toCanonicalListConfig, validateListAuthoringDocument };
 //# sourceMappingURL=praxisui-list.mjs.map