@praxisui/list 3.0.0-beta.6 → 3.0.0-beta.8

package/fesm2022/praxisui-list.mjs

@@ -1,13 +1,13 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, Input, ChangeDetectionStrategy, Component, CSP_NONCE, EventEmitter, Output, Optional, Inject, ChangeDetectorRef, isDevMode, booleanAttribute, ENVIRONMENT_INITIALIZER, signal, computed } from '@angular/core';
+import { inject, Injectable, Input, ChangeDetectionStrategy, Component, LOCALE_ID, CSP_NONCE, EventEmitter, Output, Optional, Inject, ChangeDetectorRef, isDevMode, booleanAttribute, ENVIRONMENT_INITIALIZER, signal, computed } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { formatDate, CommonModule } from '@angular/common';
 import * as i3 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
 import * as i4 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import { LoggerService, GenericCrudService, PraxisIconDirective, IconPickerService, GLOBAL_ACTION_CATALOG, PRAXIS_GLOBAL_ACTION_CATALOG, getGlobalActionCatalog, deepMerge, providePraxisI18n, ASYNC_CONFIG_STORAGE, ComponentKeyService, PraxisI18nService, GlobalActionService, GLOBAL_DIALOG_SERVICE, ComponentMetadataRegistry, API_URL } from '@praxisui/core';
+import { resolveValuePresentation, LoggerService, GenericCrudService, PraxisIconDirective, providePraxisI18n, PraxisI18nService, IconPickerService, GLOBAL_ACTION_CATALOG, PRAXIS_GLOBAL_ACTION_CATALOG, getGlobalActionCatalog, SURFACE_OPEN_I18N_NAMESPACE, getGlobalActionUiSchema, SurfaceOpenActionEditorComponent, providePraxisI18nConfig, SURFACE_OPEN_I18N_CONFIG, deepMerge, ASYNC_CONFIG_STORAGE, ComponentKeyService, GlobalActionService, GLOBAL_DIALOG_SERVICE, ComponentMetadataRegistry, API_URL } from '@praxisui/core';
 import * as i5 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
 import { MatDividerModule } from '@angular/material/divider';
@@ -49,7 +49,7 @@ import { BaseAiAdapter, PraxisAiAssistantComponent } from '@praxisui/ai';
  * Very small template evaluator that supports `${item.foo}` expressions.
  * For security, only string concatenation is supported; no arbitrary code.
  */
-function evalExpr(expr, ctx) {
+function evalExpr(expr, ctx, options) {
     if (!expr)
         return '';
     // Replace ${...} with values from context (item), supporting simple pipes inside placeholders
@@ -71,8 +71,12 @@ function evalExpr(expr, ctx) {
                     const [localeArg, styleArg] = parseTwoArgs(args);
                     const dt = value ? new Date(value) : null;
                     if (dt && !isNaN(dt.getTime())) {
-                        const fmt = new Intl.DateTimeFormat(localeArg || undefined, mapDateStyle(styleArg)).format(dt);
-                        out = fmt;
+                        const presentation = resolveTemplatePresentation('date', {
+                            localeArg,
+                            styleArg,
+                            options,
+                        });
+                        out = formatDate(dt, presentation.format || 'shortDate', presentation.locale);
                     }
                     else {
                         out = '';
@@ -87,20 +91,33 @@ function evalExpr(expr, ctx) {
                     const [localeArg, styleArg] = parseTwoArgs(args);
                     const num = Number(value);
                     if (isFinite(num)) {
+                        const presentation = resolveTemplatePresentation('number', {
+                            localeArg,
+                            styleArg,
+                            options,
+                        });
                         const opt = {};
                         if ((styleArg || '').toLowerCase() === 'compact')
                             opt.notation = 'compact';
-                        out = new Intl.NumberFormat(localeArg || undefined, opt).format(num);
+                        applyNumberPrecision(opt, presentation.format);
+                        out = new Intl.NumberFormat(presentation.locale || undefined, opt).format(num);
                     }
                 }
                 if (name === 'currency') {
                     const [currencyArg, localeArg] = parseTwoArgs(args);
                     const num = Number(value);
                     if (isFinite(num)) {
-                        out = new Intl.NumberFormat(localeArg || undefined, {
+                        const presentation = resolveTemplatePresentation('currency', {
+                            localeArg,
+                            currencyArg,
+                            options,
+                        });
+                        const opt = {
                             style: 'currency',
-                            currency: currencyArg || 'USD',
-                        }).format(num);
+                            currency: presentation.currency || 'USD',
+                        };
+                        applyCurrencyPrecision(opt, presentation.format);
+                        out = new Intl.NumberFormat(presentation.locale || undefined, opt).format(num);
                     }
                 }
             }
@@ -116,13 +133,19 @@ function evalExpr(expr, ctx) {
  * Supported pipes:
  *  - bool:TrueLabel:FalseLabel  (maps truthy/falsey values to provided labels)
  */
-function evaluateTemplate(def, item) {
+function evaluateTemplate(def, item, options) {
     if (!def)
         return null;
+    if (def.type === 'currency') {
+        return evaluateCurrencyTemplate(def, item, options);
+    }
+    if (def.type === 'date') {
+        return evaluateDateTemplate(def, item, options);
+    }
     // Support a top-level pipe outside of template placeholders,
     // e.g.: "${item.active}|bool:Ativo:Inativo".
     const { baseExpr, pipe } = splitFirstTopLevelPipe(def.expr || '');
-    let value = evalExpr(baseExpr, { item });
+    let value = evalExpr(baseExpr, { item }, options);
     if (pipe) {
         const { name, args } = parsePipe(pipe);
         if (name === 'bool') {
@@ -134,7 +157,7 @@ function evaluateTemplate(def, item) {
     const out = { type: def.type, value, class: def.class, style: def.style, color: def.color, variant: def.variant, props: def.props, imageAlt: def.imageAlt };
     if (def.badge?.expr) {
         const { baseExpr: b2, pipe: p2 } = splitFirstTopLevelPipe(def.badge.expr);
-        let badgeVal = evalExpr(b2, { item });
+        let badgeVal = evalExpr(b2, { item }, options);
         if (p2) {
             const { name, args } = parsePipe(p2);
             if (name === 'bool') {
@@ -151,6 +174,48 @@ function evaluateTemplate(def, item) {
     }
     return out;
 }
+function evaluateCurrencyTemplate(def, item, options) {
+    const { baseExpr, pipe } = splitFirstTopLevelPipe(def.expr || '');
+    const [currencyArg, localeArg] = parseTwoArgs(pipe);
+    const raw = Number(evalExpr(baseExpr, { item }, options));
+    const presentation = resolveTemplatePresentation('currency', {
+        localeArg,
+        currencyArg,
+        options,
+    });
+    const intlOptions = {
+        style: 'currency',
+        currency: presentation.currency || 'USD',
+    };
+    applyCurrencyPrecision(intlOptions, presentation.format);
+    return {
+        type: def.type,
+        value: isFinite(raw)
+            ? new Intl.NumberFormat(presentation.locale || undefined, intlOptions).format(raw)
+            : '',
+        class: def.class,
+        style: def.style,
+    };
+}
+function evaluateDateTemplate(def, item, options) {
+    const { baseExpr, pipe } = splitFirstTopLevelPipe(def.expr || '');
+    const [localeArg, styleArg] = parseTwoArgs(pipe);
+    const raw = evalExpr(baseExpr, { item }, options);
+    const dt = raw ? new Date(raw) : null;
+    const presentation = resolveTemplatePresentation('date', {
+        localeArg,
+        styleArg,
+        options,
+    });
+    return {
+        type: def.type,
+        value: dt && !isNaN(dt.getTime())
+            ? formatDate(dt, presentation.format || 'shortDate', presentation.locale)
+            : '',
+        class: def.class,
+        style: def.style,
+    };
+}
 function splitFirstPipe(expr) {
     const idx = expr.indexOf('|');
     if (idx === -1)
@@ -226,6 +291,87 @@ function parseMap(spec) {
     }
     return out;
 }
+function resolveTemplatePresentation(type, params) {
+    const listI18n = params.options?.i18n;
+    const localization = listI18n?.localization ||
+        (listI18n?.locale || listI18n?.currency
+            ? {
+                locale: listI18n.locale || undefined,
+                direction: 'ltr',
+                currency: listI18n.currency
+                    ? { code: listI18n.currency }
+                    : undefined,
+            }
+            : undefined);
+    const presentation = resolveValuePresentation({
+        type,
+        style: mapValuePresentationStyle(params.styleArg),
+        currency: params.currencyArg
+            ? {
+                code: params.currencyArg,
+            }
+            : undefined,
+    }, {
+        valueLocale: params.localeArg || undefined,
+        localization: localization,
+        surfaceLocale: listI18n?.locale || undefined,
+        appLocale: params.options?.appLocale || undefined,
+    });
+    return {
+        locale: presentation.locale,
+        format: presentation.format,
+        currency: presentation.currency?.code,
+    };
+}
+function mapValuePresentationStyle(style) {
+    switch ((style || '').toLowerCase()) {
+        case 'short':
+            return 'short';
+        case 'medium':
+            return 'medium';
+        case 'long':
+            return 'long';
+        case 'full':
+            return 'full';
+        case 'compact':
+            return 'compact';
+        default:
+            return undefined;
+    }
+}
+function applyNumberPrecision(options, format) {
+    const digits = parseDigitsFormat(format);
+    if (!digits)
+        return;
+    options.minimumIntegerDigits = digits.minimumIntegerDigits;
+    options.minimumFractionDigits = digits.minimumFractionDigits;
+    options.maximumFractionDigits = digits.maximumFractionDigits;
+}
+function applyCurrencyPrecision(options, format) {
+    if (!format)
+        return;
+    const parts = format.split('|').filter(Boolean);
+    const precision = Number(parts[2]);
+    if (Number.isFinite(precision)) {
+        options.minimumFractionDigits = precision;
+        options.maximumFractionDigits = precision;
+    }
+    if ((parts[1] || '').trim() === 'code') {
+        options.currencyDisplay = 'code';
+    }
+}
+function parseDigitsFormat(format) {
+    if (!format)
+        return null;
+    const match = /^(\d+)\.(\d+)-(\d+)$/.exec(format.trim());
+    if (!match)
+        return null;
+    return {
+        minimumIntegerDigits: Number(match[1]),
+        minimumFractionDigits: Number(match[2]),
+        maximumFractionDigits: Number(match[3]),
+    };
+}
 
 function adaptSelection(config, items) {
     const mode = (config?.selection?.mode ?? 'none');
@@ -1122,6 +1268,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
 class PraxisListSkinPreviewComponent {
     skin;
     static nextSkinScopeId = 0;
+    hostLocale = inject(LOCALE_ID, { optional: true }) ?? 'en-US';
     config;
     items = [];
     theme = 'light';
@@ -1196,30 +1343,7 @@ class PraxisListSkinPreviewComponent {
         const def = this.config?.templating?.[slot];
         if (!def)
             return null;
-        if (def.type === 'currency') {
-            const { baseExpr, param } = this.splitPipe(def.expr || '');
-            const [codeFromExpr, localeFromExpr] = this.parseTwoParams(param);
-            const currencyCode = codeFromExpr || this.config?.i18n?.currency || 'USD';
-            const locale = localeFromExpr || this.config?.i18n?.locale || undefined;
-            const rawStr = this.evalString(baseExpr, { item });
-            const raw = Number(rawStr?.replace?.(/[^0-9.,-]/g, '').replace(',', '.') ?? rawStr);
-            const fmt = new Intl.NumberFormat(locale, {
-                style: 'currency',
-                currency: currencyCode,
-            }).format(raw ?? 0);
-            return this.applyMaps({ type: def.type, value: fmt, class: def.class, style: def.style }, item);
-        }
-        if (def.type === 'date') {
-            const { baseExpr, param } = this.splitPipe(def.expr || '');
-            const [localeFromExpr, styleFromExpr] = this.parseTwoParams(param);
-            const locale = localeFromExpr || this.config?.i18n?.locale || undefined;
-            const dateStyle = this.mapDateStyle(styleFromExpr);
-            const raw = this.evalString(baseExpr, { item });
-            const dt = raw ? new Date(raw) : null;
-            const fmt = dt ? new Intl.DateTimeFormat(locale, dateStyle).format(dt) : '';
-            return this.applyMaps({ type: def.type, value: fmt, class: def.class, style: def.style }, item);
-        }
-        const out = evaluateTemplate(def, item);
+        const out = evaluateTemplate(def, item, this.templateEvaluatorOptions());
         return this.applyMaps(out, item);
     }
     applyMaps(out, item) {
@@ -1300,33 +1424,14 @@ class PraxisListSkinPreviewComponent {
         return { baseExpr: expr.slice(0, idx).trim(), param: expr.slice(idx + 1).trim() };
     }
     evalString(expr, ctx) {
-        const res = evaluateTemplate({ type: 'text', expr }, ctx?.item ?? ctx);
+        const res = evaluateTemplate({ type: 'text', expr }, ctx?.item ?? ctx, this.templateEvaluatorOptions());
         return res?.value ?? '';
     }
-    parseTwoParams(param) {
-        if (!param)
-            return [undefined, undefined];
-        const parts = param.split(':');
-        const first = parts[0]?.trim();
-        const second = parts[1]?.trim();
-        if (first === '')
-            return [undefined, second || undefined];
-        if (parts.length === 1)
-            return [first || undefined, undefined];
-        return [first || undefined, second || undefined];
-    }
-    mapDateStyle(style) {
-        switch ((style || '').toLowerCase()) {
-            case 'short':
-                return { dateStyle: 'short' };
-            case 'long':
-                return { dateStyle: 'long' };
-            case 'full':
-                return { dateStyle: 'full' };
-            case 'medium':
-            default:
-                return { dateStyle: 'medium' };
-        }
+    templateEvaluatorOptions() {
+        return {
+            i18n: this.config?.i18n,
+            appLocale: this.hostLocale,
+        };
     }
     isThemeColor(color) {
         return color === 'primary' || color === 'accent' || color === 'warn';
@@ -3087,6 +3192,468 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 type: Output
             }] } });
 
+const PRAXIS_LIST_EN_US = {
+    configEdit: 'Edit configuration',
+    expandDetails: 'Expand details',
+    collapseDetails: 'Collapse details',
+    itemDetails: 'Item details',
+    emptyState: 'No items available',
+    Data: 'Data',
+    Actions: 'Actions',
+    Layout: 'Layout',
+    Content: 'Content',
+    'i18n/A11y': 'i18n/A11y',
+    Selection: 'Selection',
+    Appearance: 'Appearance',
+    'Assistant-applied adjustments replace the entire configuration object.': 'Assistant-applied adjustments replace the entire configuration object.',
+    'applyConfigFromAdapter does not perform a deep merge. Make sure the adapter sends the full config.': 'applyConfigFromAdapter does not perform a deep merge. Make sure the adapter sends the full config.',
+    'Resource (API)': 'Resource (API)',
+    'e.g.: users': 'e.g.: users',
+    'Resource endpoint (resourcePath).': 'Resource endpoint (resourcePath).',
+    'Query (JSON)': 'Query (JSON)',
+    'e.g.: {"status":"active","department":"sales"}': 'e.g.: {"status":"active","department":"sales"}',
+    'Optional. Use valid JSON for initial filters.': 'Optional. Use valid JSON for initial filters.',
+    'Sort by': 'Sort by',
+    'Resource base field.': 'Resource base field.',
+    Direction: 'Direction',
+    Ascending: 'Ascending',
+    Descending: 'Descending',
+    'Configure per-item action buttons (icon, label, color, visibility)': 'Configure per-item action buttons (icon, label, color, visibility)',
+    'Add action': 'Add action',
+    'Global action (Praxis)': 'Global action (Praxis)',
+    '-- Select --': '-- Select --',
+    'No global action registered.': 'No global action registered.',
+    'Select to add with a global `command`.': 'Select to add with a global `command`.',
+    'Action type': 'Action type',
+    Icon: 'Icon',
+    Button: 'Button',
+    'e.g.: edit, delete': 'e.g.: edit, delete',
+    Label: 'Label',
+    Variant: 'Variant',
+    Outlined: 'Outlined',
+    Raised: 'Raised',
+    Filled: 'Filled',
+    'Action color': 'Action color',
+    'Custom color': 'Custom color',
+    'Use custom color': 'Use custom color',
+    'Action payload': 'Action payload',
+    Default: 'Default',
+    "Show when (e.g.: ${item.status} == 'done')": "Show when (e.g.: ${item.status} == 'done')",
+    "Supported syntax: \"${item.field} == 'value'\". Advanced expressions are not evaluated.": "Supported syntax: \"${item.field} == 'value'\". Advanced expressions are not evaluated.",
+    Action: 'Action',
+    Preview: 'Preview',
+    Remove: 'Remove',
+    'Show loading': 'Show loading',
+    Confirmation: 'Confirmation',
+    Type: 'Type',
+    Title: 'Title',
+    Message: 'Message',
+    'Confirm action': 'Confirm action',
+    'Are you sure you want to continue?': 'Are you sure you want to continue?',
+    'Set a title or message for the confirmation.': 'Set a title or message for the confirmation.',
+    'Payload (JSON/Template)': 'Payload (JSON/Template)',
+    'Invalid JSON': 'Invalid JSON',
+    'Insert example': 'Insert example',
+    'Emit local event too': 'Emit local event too',
+    JSON: 'JSON',
+    ID: 'ID',
+    'Command (global)': 'Command (global)',
+    Catalog: 'Catalog',
+    Danger: 'Danger',
+    Warning: 'Warning',
+    Info: 'Info',
+    'Primary (Theme)': 'Primary (Theme)',
+    'Accent (Theme)': 'Accent (Theme)',
+    'Warn (Theme)': 'Warn (Theme)',
+    'M3 Primary': 'M3 Primary',
+    'M3 Secondary': 'M3 Secondary',
+    'M3 Tertiary': 'M3 Tertiary',
+    'M3 Error': 'M3 Error',
+    'M3 On Surface': 'M3 On Surface',
+    'M3 On Surface Variant': 'M3 On Surface Variant',
+    'e.g.: {{currency}}': 'e.g.: {{currency}}',
+    'e.g.: 1.25rem': 'e.g.: 1.25rem',
+    'e.g.: var(--md-sys-elevation-level2)': 'e.g.: var(--md-sys-elevation-level2)',
+    'e.g.: 8px': 'e.g.: 8px',
+    'e.g.: my-list-skin': 'e.g.: my-list-skin',
+    'Example:': 'Example:',
+    Item: 'Item',
+    Value: 'Value',
+    'Payload emitted by the action.': 'Payload emitted by the action.',
+    'Modern tiles preset': 'Modern tiles preset',
+    List: 'List',
+    Lines: 'Lines',
+    'Items per page': 'Items per page',
+    Density: 'Density',
+    Comfortable: 'Comfortable',
+    Compact: 'Compact',
+    'List tools': 'List tools',
+    'Show search': 'Show search',
+    'Show sorting': 'Show sorting',
+    'Show total X-Y range': 'Show total X-Y range',
+    'Field to search': 'Field to search',
+    'Search placeholder': 'Search placeholder',
+    'e.g.: Search by title': 'e.g.: Search by title',
+    'Sorting options (label → field+direction)': 'Sorting options (label → field+direction)',
+    'Add option': 'Add option',
+    Field: 'Field',
+    'Duplicate option (field+direction)': 'Duplicate option (field+direction)',
+    'Primary (Title)': 'Primary (Title)',
+    'Not mapped': 'Not mapped',
+    'Secondary (Summary)': 'Secondary (Summary)',
+    'Meta (Detail/Side)': 'Meta (Detail/Side)',
+    'Composed field ({{count}})': 'Composed field ({{count}})',
+    Features: 'Features',
+    'Enable features': 'Enable features',
+    'Sync with Meta': 'Sync with Meta',
+    'Expression/Text': 'Expression/Text',
+    'Add feature': 'Add feature',
+    'Section header': 'Section header',
+    'Not configured': 'Not configured',
+    'Empty state': 'Empty state',
+    'Apply mapping': 'Apply mapping',
+    'Infer from schema': 'Infer from schema',
+    'Theme preview': 'Theme preview',
+    Light: 'Light',
+    Dark: 'Dark',
+    Grid: 'Grid',
+    'Default locale': 'Default locale',
+    'e.g.: en-US': 'e.g.: en-US',
+    'Default currency': 'Default currency',
+    'Sticky section header': 'Sticky section header',
+    'Virtual scroll': 'Virtual scroll',
+    'aria-label': 'aria-label',
+    'aria-labelledby': 'aria-labelledby',
+    itemClick: 'itemClick',
+    Radius: 'Radius',
+    Shadow: 'Shadow',
+    Blur: 'Blur',
+    'Extra CSS class (skin.class)': 'Extra CSS class (skin.class)',
+    'Inline style (skin.inlineStyle)': 'Inline style (skin.inlineStyle)',
+    'Inline style': 'Inline style',
+    Accessibility: 'Accessibility',
+    'High contrast': 'High contrast',
+    'Reduce motion': 'Reduce motion',
+    Events: 'Events',
+    Mode: 'Mode',
+    'No selection': 'No selection',
+    Single: 'Single',
+    Multiple: 'Multiple',
+    'Form name': 'Form name',
+    'Form path': 'Form path',
+    'Compare by (field)': 'Compare by (field)',
+    'Unique item key.': 'Unique item key.',
+    Return: 'Return',
+    'Composition mode': 'Composition mode',
+    'Fields to compose (multi-select)': 'Fields to compose (multi-select)',
+    Separator: 'Separator',
+    '(Second) in parentheses': '(Second) in parentheses',
+    '-- None --': '-- None --',
+    'Advanced options': 'Advanced options',
+    Position: 'Position',
+    'Side (right)': 'Side (right)',
+    'Inline (below)': 'Inline (below)',
+    'Trailing (right)': 'Trailing (right)',
+    'Status chip': 'Status chip',
+    Price: 'Price',
+    'URL / Expr': 'URL / Expr',
+    'https://... or ${item.imageUrl}': 'https://... or ${item.imageUrl}',
+    'Use an absolute/relative URL or a ${item.field} expression.': 'Use an absolute/relative URL or a ${item.field} expression.',
+    'URL/expr is required': 'URL/expr is required',
+    'Set the URL/expr to render the image.': 'Set the URL/expr to render the image.',
+    Class: 'Class',
+    Style: 'Style',
+    'Leading (left)': 'Leading (left)',
+    'Static icon': 'Static icon',
+    'Static image': 'Static image',
+    'Avatar icon': 'Avatar icon',
+    'Avatar image + badge': 'Avatar image + badge',
+    'Tag chip': 'Tag chip',
+    'Use the `|iconMap` pipe in the extra pipe for dynamic rendering.': 'Use the `|iconMap` pipe in the extra pipe for dynamic rendering.',
+    'Image URL': 'Image URL',
+    'Alt text': 'Alt text',
+    'Badge text': 'Badge text',
+    'Message / Expr': 'Message / Expr',
+    'Default message': 'Default message',
+    'Default image': 'Default image',
+    'No results': 'No results',
+    'Skeleton count': 'Skeleton count',
+    Model: 'Model',
+    'Spacing between items': 'Spacing between items',
+    'No extra space': 'No extra space',
+    Tight: 'Tight',
+    Standard: 'Standard',
+    Relaxed: 'Relaxed',
+    Dividers: 'Dividers',
+    None: 'None',
+    'Between groups': 'Between groups',
+    All: 'All',
+    'Group by': 'Group by',
+    Cards: 'Cards',
+    Tiles: 'Tiles',
+    'Pill Soft': 'Pill Soft',
+    'Gradient Tile': 'Gradient Tile',
+    Glass: 'Glass',
+    Elevated: 'Elevated',
+    Outline: 'Outline',
+    Flat: 'Flat',
+    Neumorphism: 'Neumorphism',
+    Text: 'Text',
+    Chip: 'Chip',
+    Rating: 'Rating',
+    Image: 'Image',
+    HTML: 'HTML',
+    Currency: 'Currency',
+    Date: 'Date',
+    'Default text': 'Default text',
+    'Default chip': 'Default chip',
+    'Fields:': 'Fields:',
+    ' (Required)': ' (Required)',
+    'Example available': 'Example available',
+    'No schema available.': 'No schema available.',
+    'This action may be irreversible. Do you want to continue?': 'This action may be irreversible. Do you want to continue?',
+    'Do you want to proceed with this action?': 'Do you want to proceed with this action?',
+    Attention: 'Attention',
+    'CSS class example (add this to your global styles):': 'CSS class example (add this to your global styles):',
+};
+
+const PRAXIS_LIST_PT_BR = {
+    configEdit: 'Editar configurações',
+    expandDetails: 'Expandir detalhes',
+    collapseDetails: 'Recolher detalhes',
+    itemDetails: 'Detalhes do item',
+    emptyState: 'Nenhum item disponível',
+    Data: 'Dados',
+    Actions: 'Ações',
+    Layout: 'Layout',
+    Content: 'Conteúdo',
+    'i18n/A11y': 'i18n/A11y',
+    Selection: 'Seleção',
+    Appearance: 'Aparência',
+    'Assistant-applied adjustments replace the entire configuration object.': 'Observação: ajustes aplicados pelo assistente substituem o objeto de configuração inteiro.',
+    'applyConfigFromAdapter does not perform a deep merge. Make sure the adapter sends the full config.': 'O applyConfigFromAdapter não faz merge profundo. Garanta que o adapter envie a config completa.',
+    'Resource (API)': 'Recurso (API)',
+    'e.g.: users': 'ex.: users',
+    'Resource endpoint (resourcePath).': 'Endpoint do recurso (resourcePath).',
+    'Query (JSON)': 'Query (JSON)',
+    'e.g.: {"status":"active","department":"sales"}': 'ex.: {"status":"active","department":"sales"}',
+    'Optional. Use valid JSON for initial filters.': 'Opcional. Use JSON válido para filtros iniciais.',
+    'Sort by': 'Ordenar por',
+    'Resource base field.': 'Campo base do recurso.',
+    Direction: 'Direção',
+    Ascending: 'Ascendente',
+    Descending: 'Descendente',
+    'Configure per-item action buttons (icon, label, color, visibility)': 'Configure botões de ação por item (ícone, rótulo, cor, visibilidade)',
+    'Add action': 'Adicionar ação',
+    'Global action (Praxis)': 'Ação global (Praxis)',
+    '-- Select --': '-- Selecionar --',
+    'No global action registered.': 'Nenhuma ação global registrada.',
+    'Select to add with a global `command`.': 'Selecione para adicionar com `command` global.',
+    'Action type': 'Tipo de ação',
+    Icon: 'Ícone',
+    Button: 'Botão',
+    'e.g.: edit, delete': 'ex.: edit, delete',
+    Label: 'Rótulo',
+    Variant: 'Variante',
+    Outlined: 'Contorno',
+    Raised: 'Elevado',
+    Filled: 'Preenchido',
+    'Action color': 'Cor da ação',
+    'Custom color': 'Cor personalizada',
+    'Use custom color': 'Usar cor personalizada',
+    'Action payload': 'Payload da ação',
+    Default: 'Padrão',
+    "Show when (e.g.: ${item.status} == 'done')": "Exibir quando (ex.: ${item.status} == 'done')",
+    "Supported syntax: \"${item.field} == 'value'\". Advanced expressions are not evaluated.": 'Sintaxe suportada: "${item.field} == \'value\'". Expressões avançadas não são avaliadas.',
+    Action: 'Ação',
+    Preview: 'Pré-visualização',
+    Remove: 'Remover',
+    'Show loading': 'Mostrar loading',
+    Confirmation: 'Confirmação',
+    Type: 'Tipo',
+    Title: 'Título',
+    Message: 'Mensagem',
+    'Confirm action': 'Confirmar ação',
+    'Are you sure you want to continue?': 'Tem certeza que deseja continuar?',
+    'Set a title or message for the confirmation.': 'Defina um título ou mensagem para a confirmação.',
+    'Payload (JSON/Template)': 'Payload (JSON/Template)',
+    'Invalid JSON': 'JSON inválido',
+    'Insert example': 'Inserir exemplo',
+    'Emit local event too': 'Emitir evento local também',
+    JSON: 'JSON',
+    ID: 'ID',
+    'Command (global)': 'Comando (global)',
+    Catalog: 'Catalogo',
+    Danger: 'Perigo',
+    Warning: 'Aviso',
+    Info: 'Info',
+    'Primary (Theme)': 'Primario (Tema)',
+    'Accent (Theme)': 'Destaque (Tema)',
+    'Warn (Theme)': 'Aviso (Tema)',
+    'M3 Primary': 'M3 Primario',
+    'M3 Secondary': 'M3 Secundario',
+    'M3 Tertiary': 'M3 Terciario',
+    'M3 Error': 'M3 Erro',
+    'M3 On Surface': 'M3 Na Superficie',
+    'M3 On Surface Variant': 'M3 Variacao Na Superficie',
+    'e.g.: {{currency}}': 'ex.: {{currency}}',
+    'e.g.: 1.25rem': 'ex.: 1.25rem',
+    'e.g.: var(--md-sys-elevation-level2)': 'ex.: var(--md-sys-elevation-level2)',
+    'e.g.: 8px': 'ex.: 8px',
+    'e.g.: my-list-skin': 'ex.: my-list-skin',
+    'Example:': 'Exemplo:',
+    Item: 'Item',
+    Value: 'Valor',
+    'Payload emitted by the action.': 'Payload emitido pela ação.',
+    'Modern tiles preset': 'Preset Tiles Moderno',
+    List: 'Lista',
+    Lines: 'Linhas',
+    'Items per page': 'Itens por página',
+    Density: 'Densidade',
+    Comfortable: 'Confortável',
+    Compact: 'Compacta',
+    'List tools': 'Ferramentas da lista',
+    'Show search': 'Mostrar busca',
+    'Show sorting': 'Mostrar ordenar',
+    'Show total X-Y range': 'Mostrar faixa X-Y de Total',
+    'Field to search': 'Campo para buscar',
+    'Search placeholder': 'Placeholder da busca',
+    'e.g.: Search by title': 'ex.: Buscar por título',
+    'Sorting options (label → field+direction)': 'Opções de ordenação (rótulo → campo+direção)',
+    'Add option': 'Adicionar opção',
+    Field: 'Campo',
+    'Duplicate option (field+direction)': 'Opção duplicada (campo+direção)',
+    'Primary (Title)': 'Primary (Título)',
+    'Not mapped': 'Não mapeado',
+    'Secondary (Summary)': 'Secondary (Resumo)',
+    'Meta (Detail/Side)': 'Meta (Detalhe/Lateral)',
+    'Composed field ({{count}})': 'Campo composto ({{count}})',
+    Features: 'Recursos',
+    'Enable features': 'Ativar recursos',
+    'Sync with Meta': 'Sincronizar com Meta',
+    'Expression/Text': 'Expr/Texto',
+    'Add feature': 'Adicionar recurso',
+    'Section header': 'Cabeçalho de Seção',
+    'Not configured': 'Não configurado',
+    'Empty state': 'Estado Vazio',
+    'Apply mapping': 'Aplicar mapeamento',
+    'Infer from schema': 'Inferir do schema',
+    'Theme preview': 'Prévia de tema',
+    Light: 'Claro',
+    Dark: 'Escuro',
+    Grid: 'Grade',
+    'Default locale': 'Locale padrão',
+    'e.g.: en-US': 'ex.: en-US',
+    'Default currency': 'Moeda padrão',
+    'Sticky section header': 'Cabeçalho da seção fixo',
+    'Virtual scroll': 'Rolagem virtual',
+    'aria-label': 'aria-label',
+    'aria-labelledby': 'aria-labelledby',
+    itemClick: 'itemClick',
+    Radius: 'Raio',
+    Shadow: 'Sombra',
+    Blur: 'Desfoque',
+    'Extra CSS class (skin.class)': 'Classe CSS extra (skin.class)',
+    'Inline style (skin.inlineStyle)': 'Estilo inline (skin.inlineStyle)',
+    'Inline style': 'Estilo inline',
+    Accessibility: 'Acessibilidade',
+    'High contrast': 'Alto contraste',
+    'Reduce motion': 'Reduzir movimento',
+    Events: 'Eventos',
+    Mode: 'Modo',
+    'No selection': 'Sem seleção',
+    Single: 'Única',
+    Multiple: 'Múltipla',
+    'Form name': 'Nome no formulário',
+    'Form path': 'Caminho no formulário',
+    'Compare by (field)': 'Comparar por (campo)',
+    'Unique item key.': 'Chave única do item.',
+    Return: 'Retorno',
+    'Composition mode': 'Modo de composição',
+    'Fields to compose (multi-select)': 'Campos para compor (múltipla seleção)',
+    Separator: 'Separador',
+    '(Second) in parentheses': '(Segundo) entre parênteses',
+    '-- None --': '-- Nenhum --',
+    'Advanced options': 'Opções avançadas',
+    Position: 'Posição',
+    'Side (right)': 'Lateral (direita)',
+    'Inline (below)': 'Na linha (abaixo)',
+    'Trailing (right)': 'Trailing (direita)',
+    'Status chip': 'Chip de status',
+    Price: 'Preço',
+    'URL / Expr': 'URL / Expr',
+    'https://... or ${item.imageUrl}': 'https://... ou ${item.imageUrl}',
+    'Use an absolute/relative URL or a ${item.field} expression.': 'Use uma URL absoluta/relativa ou uma expressão ${item.field}.',
+    'URL/expr is required': 'URL/expr obrigatória',
+    'Set the URL/expr to render the image.': 'Defina a URL/expr para renderizar a imagem.',
+    Class: 'Classe',
+    Style: 'Estilo',
+    'Leading (left)': 'Leading (esquerda)',
+    'Static icon': 'Ícone estático',
+    'Static image': 'Imagem estática',
+    'Avatar icon': 'Avatar com ícone',
+    'Avatar image + badge': 'Avatar com imagem + badge',
+    'Tag chip': 'Chip de tag',
+    'Use the `|iconMap` pipe in the extra pipe for dynamic rendering.': 'Use o pipe `|iconMap` no extra pipe para renderização dinâmica.',
+    'Image URL': 'URL da imagem',
+    'Alt text': 'Texto alternativo',
+    'Badge text': 'Texto do badge',
+    'Message / Expr': 'Mensagem / Expr',
+    'Default message': 'Mensagem padrão',
+    'Default image': 'Imagem padrão',
+    'No results': 'Sem resultados',
+    'Skeleton count': 'Quantidade de skeleton',
+    Model: 'Modelo',
+    'Spacing between items': 'Espaçamento entre itens',
+    'No extra space': 'Sem espaço extra',
+    Tight: 'Ajustado',
+    Standard: 'Padrão',
+    Relaxed: 'Relaxado',
+    Dividers: 'Divisores',
+    None: 'Nenhum',
+    'Between groups': 'Entre grupos',
+    All: 'Todos',
+    'Group by': 'Agrupar por',
+    Cards: 'Cards',
+    Tiles: 'Tiles',
+    'Pill Soft': 'Pill Soft',
+    'Gradient Tile': 'Tile com degradê',
+    Glass: 'Vidro',
+    Elevated: 'Elevado',
+    Outline: 'Contorno',
+    Flat: 'Plano',
+    Neumorphism: 'Neumorfismo',
+    Text: 'Texto',
+    Chip: 'Chip',
+    Rating: 'Rating',
+    Image: 'Imagem',
+    HTML: 'HTML',
+    Currency: 'Moeda',
+    Date: 'Data',
+    'Default text': 'Texto padrão',
+    'Default chip': 'Chip padrão',
+    'Fields:': 'Campos:',
+    ' (Required)': ' (Obrigatório)',
+    'Example available': 'Exemplo disponível',
+    'No schema available.': 'Nenhum schema disponível.',
+    'This action may be irreversible. Do you want to continue?': 'Esta ação pode ser irreversível. Deseja continuar?',
+    'Do you want to proceed with this action?': 'Deseja prosseguir com esta ação?',
+    Attention: 'Atenção',
+    'CSS class example (add this to your global styles):': 'Exemplo de classe CSS (adicione isso aos estilos globais):',
+};
+
+const PRAXIS_LIST_I18N_NAMESPACE = 'praxis-list';
+function providePraxisListI18n() {
+    return providePraxisI18n({
+        namespaces: {
+            [PRAXIS_LIST_I18N_NAMESPACE]: {
+                'pt-BR': PRAXIS_LIST_PT_BR,
+                'en-US': PRAXIS_LIST_EN_US,
+            },
+        },
+    });
+}
+
 const SKIN_PRESETS = [
     'pill-soft',
     'gradient-tile',
@@ -3132,7 +3699,7 @@ class PraxisListConfigEditor {
     mappingTrailing = {};
     mappingLeading = { type: 'icon' };
     mappingSectionHeader = { type: 'text', expr: '${item.key}' };
-    mappingEmptyState = { type: 'text', expr: 'Nenhum item disponível' };
+    mappingEmptyState = { type: 'text', expr: '' };
     mapping = {};
     mappingDirty = false;
     appliedMappingSnapshot = '';
@@ -3146,7 +3713,7 @@ class PraxisListConfigEditor {
     uiSortRows = [];
     // Meta composition (multi-field)
     mappingMetaFields = [];
-    mappingMetaSeparator = ' • ';
+    mappingMetaSeparator = ' • ';
     mappingMetaWrapSecondInParens = false;
     featuresSyncWithMeta = false;
     // Features editor state
@@ -3157,6 +3724,7 @@ class PraxisListConfigEditor {
     queryJson = '';
     queryError = '';
     crud = null;
+    i18n = inject(PraxisI18nService);
     resourcePathChanges = new Subject();
     constructor(injected) {
         // Disable Immer auto-freeze to allow [(ngModel)] mutations on produced state
@@ -3167,6 +3735,9 @@ class PraxisListConfigEditor {
         });
         const incoming = injected?.document ?? injected?.config ?? this.config;
         this.applyIncomingDocument(incoming);
+        if (!this.mappingEmptyState.expr) {
+            this.mappingEmptyState.expr = this.tx('No items available');
+        }
         this.globalActionCatalog = this.resolveGlobalActionCatalog();
         this.appliedMappingSnapshot = this.getMappingSnapshot();
         this.initialJson = this.snapshotCurrentDocument();
@@ -3176,6 +3747,22 @@ class PraxisListConfigEditor {
         this.resourcePathChanges.next(this.working?.dataSource?.resourcePath || '');
     }
     ip = inject(IconPickerService);
+    tx(text, params) {
+        return this.i18n.t(text, params, text, PRAXIS_LIST_I18N_NAMESPACE);
+    }
+    queryPlaceholder() {
+        return this.tx('e.g.: {"status":"active","department":"sales"}');
+    }
+    currencyPlaceholder() {
+        const currency = this.defaultPresetCurrency(this.defaultPresetLocale());
+        return this.tx('e.g.: {{currency}}', { currency });
+    }
+    actionVisibilityLabel() {
+        return this.tx("Show when (e.g.: ${item.status} == 'done')");
+    }
+    actionConditionTooltip() {
+        return this.tx(`Supported syntax: "\${item.field} == 'value'". Advanced expressions are not evaluated.`);
+    }
     async pickLeadingIcon() {
         const chosen = await this.ip.openDialog({
             value: this.mappingLeading?.icon,
@@ -3281,11 +3868,11 @@ class PraxisListConfigEditor {
         this.mappingSectionHeader = { type: 'text', expr: '${item.key}' };
         this.mappingEmptyState = {
             type: 'text',
-            expr: 'Nenhum item disponível',
+            expr: this.tx('No items available'),
         };
         this.mappingMetaPrefixIcon = undefined;
         this.mappingMetaFields = [];
-        this.mappingMetaSeparator = ' • ';
+        this.mappingMetaSeparator = ' • ';
         this.mappingMetaWrapSecondInParens = false;
         this.features = [];
         this.featuresVisible = true;
@@ -3411,6 +3998,8 @@ class PraxisListConfigEditor {
     applyLayoutPreset(preset) {
         if (preset === 'tiles-modern') {
             const currentClass = this.working?.skin?.class;
+            const locale = this.defaultPresetLocale();
+            const currency = this.defaultPresetCurrency(locale);
             this.working = produce(this.working, (draft) => {
                 draft.layout = {
                     ...(draft.layout || {}),
@@ -3433,27 +4022,26 @@ class PraxisListConfigEditor {
                 };
                 draft.i18n = {
                     ...(draft.i18n || {}),
-                    locale: 'pt-BR',
-                    currency: 'BRL',
+                    locale,
+                    currency,
                 };
                 draft.templating = {
                     ...(draft.templating || {}),
                     leading: {
                         type: 'image',
                         expr: '${item.imageUrl}',
-                        imageAlt: 'Catalog',
+                        imageAlt: this.tx('Catalog'),
                     },
                     primary: { type: 'text', expr: '${item.name}' },
                     secondary: { type: 'text', expr: '${item.subtitle}' },
-                    meta: { type: 'currency', expr: '${item.price}|BRL:pt-BR' },
+                    meta: {
+                        type: 'currency',
+                        expr: '${item.price}|' + currency + ':' + locale,
+                    },
                     trailing: { type: 'chip', expr: '${item.status}' },
                     metaPlacement: 'side',
                     statusPosition: 'top-right',
-                    chipColorMap: {
-                        disponível: 'primary',
-                        'últimas vagas': 'accent',
-                        indisponível: 'warn',
-                    },
+                    chipColorMap: this.defaultTilesModernChipColorMap(locale),
                 };
             });
             this.hydrateMappingFromTemplating(this.working.templating);
@@ -3462,6 +4050,67 @@ class PraxisListConfigEditor {
             this.verify();
         }
     }
+    defaultPresetLocale() {
+        const current = this.working?.i18n?.locale?.trim();
+        if (current)
+            return current;
+        const serviceLocale = this.i18n.getLocale()?.trim();
+        return serviceLocale || 'en-US';
+    }
+    defaultPresetCurrency(locale) {
+        const current = this.working?.i18n?.currency?.trim();
+        if (current)
+            return current;
+        return locale.toLowerCase().startsWith('pt') ? 'BRL' : 'USD';
+    }
+    defaultTilesModernChipColorMap(locale) {
+        const normalized = (locale || '').toLowerCase();
+        if (normalized.startsWith('pt')) {
+            return {
+                disponivel: 'primary',
+                'ultimas vagas': 'accent',
+                indisponivel: 'warn',
+            };
+        }
+        return {
+            Available: 'primary',
+            'Last spots': 'accent',
+            Unavailable: 'warn',
+        };
+    }
+    applySalaryPreset() {
+        this.applyCurrencyPreset(this.mappingSecondary, 'salary');
+    }
+    applyPricePreset() {
+        this.applyCurrencyPreset(this.mappingTrailing, 'price');
+    }
+    applyCurrencyPreset(target, field) {
+        const locale = this.defaultPresetLocale();
+        target.type = 'currency';
+        target.field = field;
+        target.currencyCode = this.defaultPresetCurrency(locale);
+        target.locale = locale;
+        this.onMappingChanged();
+    }
+    defaultStatusColorMapEntries() {
+        const locale = this.defaultPresetLocale().toLowerCase();
+        if (locale.startsWith('pt')) {
+            return [
+                { key: 'PLANEJADA', color: 'primary' },
+                { key: 'EM_ANDAMENTO', color: 'accent' },
+                { key: 'PAUSADA', color: 'accent' },
+                { key: 'CONCLUIDA', color: 'primary' },
+                { key: 'FALHOU', color: 'warn' },
+            ];
+        }
+        return [
+            { key: 'PLANNED', color: 'primary' },
+            { key: 'IN_PROGRESS', color: 'accent' },
+            { key: 'PAUSED', color: 'accent' },
+            { key: 'COMPLETED', color: 'primary' },
+            { key: 'FAILED', color: 'warn' },
+        ];
+    }
     previewData = [
         {
             title: 'Maria',
@@ -3471,19 +4120,19 @@ class PraxisListConfigEditor {
             hireDate: '2022-03-01',
             rating: 4.5,
             name: 'Aurora Deluxe',
-            status: 'Disponível',
+            status: 'Available',
             price: 980.0,
             imageUrl: '/list-demo-hotel-1.svg',
         },
         {
-            title: 'João',
+            title: 'João',
             subtitle: 'Frontend Engineer',
             tag: 'B',
             salary: 9876.0,
             hireDate: '2023-01-12',
             rating: 3.8,
             name: 'Skyline Classic',
-            status: 'Últimas vagas',
+            status: 'Last spots',
             price: 640.0,
             imageUrl: '/list-demo-hotel-2.svg',
         },
@@ -3495,14 +4144,14 @@ class PraxisListConfigEditor {
             hireDate: '2021-10-05',
             rating: 4.9,
             name: 'Urban Loft',
-            status: 'Indisponível',
+            status: 'Unavailable',
             price: 520.0,
             imageUrl: '/list-demo-hotel-1.svg',
         },
     ];
     skinPreviewTheme = 'light';
     metaTypeConfigs = [
-        { type: 'text', label: 'Texto', icon: 'text_fields' },
+        { type: 'text', label: 'Text', icon: 'text_fields' },
         {
             type: 'chip',
             label: 'Chip',
@@ -3517,14 +4166,14 @@ class PraxisListConfigEditor {
         },
         {
             type: 'icon',
-            label: 'Ícone',
+            label: 'Icon',
             icon: 'emoji_symbols',
             props: ['iconColor'],
         },
-        { type: 'image', label: 'Imagem', icon: 'image', props: ['imageAlt'] },
+        { type: 'image', label: 'Image', icon: 'image', props: ['imageAlt'] },
         { type: 'html', label: 'HTML', icon: 'code' },
-        { type: 'currency', label: 'Moeda', icon: 'attach_money' },
-        { type: 'date', label: 'Data', icon: 'calendar_today' },
+        { type: 'currency', label: 'Currency', icon: 'attach_money' },
+        { type: 'date', label: 'Date', icon: 'calendar_today' },
     ];
     primaryTypeConfigs = this.metaTypeConfigs.filter((t) => ['text', 'currency', 'date', 'html'].includes(t.type));
     secondaryTypeConfigs = this.primaryTypeConfigs;
@@ -3541,21 +4190,23 @@ class PraxisListConfigEditor {
     ].includes(t.type));
     sectionHeaderTypeConfigs = this.metaTypeConfigs.filter((t) => ['text', 'chip', 'icon', 'image', 'rating', 'html'].includes(t.type));
     emptyStateTypeConfigs = this.metaTypeConfigs.filter((t) => ['text', 'chip', 'icon', 'image', 'rating', 'html'].includes(t.type));
-    paletteOptions = [
-        { value: undefined, label: 'Padrão' },
-        { value: 'primary', label: 'Primary (Theme)' },
-        { value: 'accent', label: 'Accent (Theme)' },
-        { value: 'warn', label: 'Warn (Theme)' },
-        { value: 'var(--md-sys-color-primary)', label: 'M3 Primary' },
-        { value: 'var(--md-sys-color-secondary)', label: 'M3 Secondary' },
-        { value: 'var(--md-sys-color-tertiary)', label: 'M3 Tertiary' },
-        { value: 'var(--md-sys-color-error)', label: 'M3 Error' },
-        { value: 'var(--md-sys-color-on-surface)', label: 'M3 On Surface' },
-        {
-            value: 'var(--md-sys-color-on-surface-variant)',
-            label: 'M3 On Surface Variant',
-        },
-    ];
+    get paletteOptions() {
+        return [
+            { value: undefined, label: this.tx('Default') },
+            { value: 'primary', label: this.tx('Primary (Theme)') },
+            { value: 'accent', label: this.tx('Accent (Theme)') },
+            { value: 'warn', label: this.tx('Warn (Theme)') },
+            { value: 'var(--md-sys-color-primary)', label: this.tx('M3 Primary') },
+            { value: 'var(--md-sys-color-secondary)', label: this.tx('M3 Secondary') },
+            { value: 'var(--md-sys-color-tertiary)', label: this.tx('M3 Tertiary') },
+            { value: 'var(--md-sys-color-error)', label: this.tx('M3 Error') },
+            { value: 'var(--md-sys-color-on-surface)', label: this.tx('M3 On Surface') },
+            {
+                value: 'var(--md-sys-color-on-surface-variant)',
+                label: this.tx('M3 On Surface Variant'),
+            },
+        ];
+    }
     isThemeColor(value) {
         return value === 'primary' || value === 'accent' || value === 'warn';
     }
@@ -3608,7 +4259,7 @@ class PraxisListConfigEditor {
             draft.actions.push({
                 id: 'newAction',
                 icon: 'bolt',
-                label: 'Ação',
+                label: this.tx('Action'),
                 color: undefined,
                 kind: 'icon',
             });
@@ -3649,22 +4300,21 @@ class PraxisListConfigEditor {
         action.confirmation.type = normalized || undefined;
         if (normalized === 'danger') {
             if (!action.confirmation.title)
-                action.confirmation.title = 'Confirmar ação';
+                action.confirmation.title = this.tx('Confirm action');
             if (!action.confirmation.message)
-                action.confirmation.message =
-                    'Esta ação pode ser irreversível. Deseja continuar?';
+                action.confirmation.message = this.tx('This action may be irreversible. Do you want to continue?');
         }
         if (normalized === 'warning') {
             if (!action.confirmation.title)
-                action.confirmation.title = 'Atenção';
+                action.confirmation.title = this.tx('Attention');
             if (!action.confirmation.message)
-                action.confirmation.message = 'Deseja prosseguir com esta ação?';
+                action.confirmation.message = this.tx('Do you want to proceed with this action?');
         }
         if (normalized === 'info') {
             if (!action.confirmation.title)
-                action.confirmation.title = 'Confirmação';
+                action.confirmation.title = this.tx('Confirmation');
             if (!action.confirmation.message)
-                action.confirmation.message = 'Tem certeza que deseja continuar?';
+                action.confirmation.message = this.tx('Are you sure you want to continue?');
         }
         this.onActionsChanged();
     }
@@ -3701,16 +4351,16 @@ class PraxisListConfigEditor {
             return '';
         const cmd = action.command.replace(/^global[:.]/, '').trim();
         const entry = this.globalActionCatalog.find((e) => e.id === cmd);
-        return entry?.payloadSchema?.example ? 'Exemplo disponível' : '';
+        return entry?.payloadSchema?.example ? this.tx('Example available') : '';
     }
     globalPayloadSchemaTooltip(action) {
         if (!action?.command)
-            return 'Sem schema disponível.';
+            return this.tx('No schema available.');
         const cmd = action.command.replace(/^global[:.]/, '').trim();
         const entry = this.globalActionCatalog.find((e) => e.id === cmd);
         const schema = entry?.payloadSchema;
         if (!schema)
-            return 'Sem schema disponível.';
+            return this.tx('No schema available.');
         const lines = [];
         if (entry?.label)
             lines.push(`${entry.label}`);
@@ -3719,11 +4369,11 @@ class PraxisListConfigEditor {
         const required = new Set((schema.required || []).map((r) => String(r)));
         const props = schema.properties ? Object.entries(schema.properties) : [];
         if (props.length) {
-            lines.push('Campos:');
+            lines.push(this.tx('Fields:'));
             for (const [name, meta] of props) {
-                const req = required.has(name) ? ' (OBRIGATÓRIO)' : '';
+                const req = required.has(name) ? this.tx(' (Required)') : '';
                 const type = meta?.type ? `: ${meta.type}` : '';
-                const desc = meta?.description ? ` — ${meta.description}` : '';
+                const desc = meta?.description ? ` — ${meta.description}` : '';
                 lines.push(`- ${name}${type}${req}${desc}`);
             }
         }
@@ -3731,11 +4381,34 @@ class PraxisListConfigEditor {
             const example = typeof schema.example === 'object'
                 ? JSON.stringify(schema.example, null, 2)
                 : String(schema.example);
-            lines.push('Exemplo:');
+            lines.push(this.tx('Example:'));
             lines.push(example);
         }
         return lines.join('\n');
     }
+    isSurfaceOpenCommand(action) {
+        return this.getGlobalActionSchema(action)?.editorMode === 'surface-open';
+    }
+    getSurfaceOpenGlobalPayload(action) {
+        const raw = String(action?.globalPayload || '').trim();
+        if (raw) {
+            try {
+                const parsed = JSON.parse(raw);
+                if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
+                    return this.normalizeSurfaceOpenPayload(parsed);
+                }
+            }
+            catch {
+                // keep default payload while authoring invalid JSON elsewhere
+            }
+        }
+        return this.normalizeSurfaceOpenPayload(undefined);
+    }
+    onSurfaceOpenGlobalPayloadChange(action, payload) {
+        action.command = 'global:surface.open';
+        action.globalPayload = JSON.stringify(this.normalizeSurfaceOpenPayload(payload));
+        this.onActionsChanged();
+    }
     onGlobalActionSelected(id) {
         const action = this.globalActionCatalog.find((a) => a.id === id);
         if (!action)
@@ -3856,7 +4529,7 @@ class PraxisListConfigEditor {
             this.verify();
         }
         catch {
-            this.queryError = 'JSON invalido';
+            this.queryError = this.tx('Invalid JSON');
             this.verify();
         }
     }
@@ -4165,7 +4838,7 @@ class PraxisListConfigEditor {
             t.primary = p;
         if (s) {
             t.secondary = s;
-            // Garantir que a UI tenha espaço para exibir o secondary
+            // Garantir que a UI tenha espaço para exibir o secondary
             const currentLines = Number(this.working.layout.lines) || 1;
             if (currentLines < 2)
                 this.working.layout.lines = 2;
@@ -4564,8 +5237,8 @@ class PraxisListConfigEditor {
             // Try to detect composed text: split by common separators if it contains ${item.
             if (typeof templ.meta?.expr === 'string' &&
                 /\$\{\s*item\./.test(templ.meta.expr)) {
-                const guessSep = / • /.test(templ.meta.expr)
-                    ? ' • '
+                const guessSep = / • /.test(templ.meta.expr)
+                    ? ' • '
                     : /,\s*/.test(templ.meta.expr)
                         ? ', '
                         : ' ';
@@ -4625,13 +5298,7 @@ class PraxisListConfigEditor {
         }));
         if ((this.mappingTrailing?.field || '').toLowerCase() === 'status' &&
             (!this.iconColorMapEntries || this.iconColorMapEntries.length === 0)) {
-            this.iconColorMapEntries = [
-                { key: 'PLANEJADA', color: 'primary' },
-                { key: 'EM_ANDAMENTO', color: 'accent' },
-                { key: 'PAUSADA', color: 'accent' },
-                { key: 'CONCLUIDA', color: 'primary' },
-                { key: 'FALHOU', color: 'warn' },
-            ];
+            this.iconColorMapEntries = this.defaultStatusColorMapEntries();
         }
         if (templ.leading?.type === 'icon' &&
             typeof templ.leading.expr === 'string') {
@@ -4808,7 +5475,51 @@ class PraxisListConfigEditor {
         const injected = inject(GLOBAL_ACTION_CATALOG, { optional: true });
         if (!injected)
             return PRAXIS_GLOBAL_ACTION_CATALOG.slice();
-        return getGlobalActionCatalog(injected);
+        return getGlobalActionCatalog(injected).map((entry) => ({
+            ...entry,
+            label: this.getGlobalActionEntryLabel(entry),
+            description: this.getGlobalActionEntryDescription(entry),
+        }));
+    }
+    getGlobalActionEntryLabel(entry) {
+        if (entry?.id === 'surface.open') {
+            return this.i18n.t('action.surfaceOpen.label', undefined, entry.label || '', SURFACE_OPEN_I18N_NAMESPACE);
+        }
+        return entry?.label || '';
+    }
+    getGlobalActionEntryDescription(entry) {
+        if (entry?.id === 'surface.open') {
+            return this.i18n.t('action.surfaceOpen.description', undefined, entry.description || '', SURFACE_OPEN_I18N_NAMESPACE);
+        }
+        return entry?.description || '';
+    }
+    getGlobalActionSchema(action) {
+        const id = String(action?.command || '').replace(/^global[:.]/, '').trim();
+        return getGlobalActionUiSchema(id);
+    }
+    normalizeSurfaceOpenPayload(payload) {
+        return {
+            presentation: payload?.presentation === 'drawer' ? 'drawer' : 'modal',
+            title: payload?.title,
+            subtitle: payload?.subtitle,
+            icon: payload?.icon,
+            size: payload?.size && Object.keys(payload.size).length
+                ? { ...payload.size }
+                : undefined,
+            widget: {
+                id: String(payload?.widget?.id || ''),
+                inputs: { ...(payload?.widget?.inputs || {}) },
+                bindingOrder: payload?.widget?.bindingOrder?.length
+                    ? [...payload.widget.bindingOrder]
+                    : undefined,
+            },
+            bindings: payload?.bindings?.length
+                ? payload.bindings.map((binding) => ({ ...binding }))
+                : [],
+            context: payload?.context && typeof payload.context === 'object' && !Array.isArray(payload.context)
+                ? { ...payload.context }
+                : undefined,
+        };
     }
     verify() {
         setTimeout(() => {
@@ -4981,11 +5692,17 @@ 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\">\n          Observa\u00E7\u00E3o: ajustes aplicados pelo assistente substituem o objeto de\n          configura\u00E7\u00E3o inteiro.\n        </div>\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"help-icon-button\"\n          matTooltip=\"O applyConfigFromAdapter n\u00E3o faz merge profundo. Garanta que o adapter envie a config completa.\"\n        >\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\n          matInput\n          [(ngModel)]=\"working.dataSource.resourcePath\"\n          (ngModelChange)=\"onResourcePathChange($event)\"\n          placeholder=\"ex.: users\"\n        />\n        <button\n          mat-icon-button\n          matSuffix\n          type=\"button\"\n          class=\"help-icon-button\"\n          matTooltip=\"Endpoint do recurso (resourcePath).\"\n        >\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\n          matInput\n          rows=\"3\"\n          [(ngModel)]=\"queryJson\"\n          (ngModelChange)=\"onQueryChanged($event)\"\n          placeholder='ex.: &#123;\"status\":\"active\",\"department\":\"sales\"&#125;'\n        ></textarea>\n        <button\n          mat-icon-button\n          matSuffix\n          type=\"button\"\n          class=\"help-icon-button\"\n          matTooltip=\"Opcional. Use JSON v\u00E1lido para filtros iniciais.\"\n          *ngIf=\"!queryError\"\n        >\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\n            [(ngModel)]=\"sortField\"\n            (ngModelChange)=\"updateSortConfig()\"\n          >\n            <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n              f\n            }}</mat-option>\n          </mat-select>\n          <button\n            mat-icon-button\n            matSuffix\n            type=\"button\"\n            class=\"help-icon-button\"\n            matTooltip=\"Campo base do recurso.\"\n          >\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\n            [(ngModel)]=\"sortDir\"\n            (ngModelChange)=\"updateSortConfig()\"\n          >\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      >\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\">\n          Configure bot\u00F5es de a\u00E7\u00E3o por item (\u00EDcone, r\u00F3tulo, cor, visibilidade)\n        </div>\n        <button mat-flat-button color=\"primary\" (click)=\"addAction()\">\n          Adicionar a\u00E7\u00E3o\n        </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\n            [(ngModel)]=\"selectedGlobalActionId\"\n            (ngModelChange)=\"onGlobalActionSelected($event)\"\n          >\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\n            *ngIf=\"!globalActionCatalog.length\"\n            class=\"text-caption muted\"\n            >Nenhuma a\u00E7\u00E3o global registrada.</mat-hint\n          >\n        </mat-form-field>\n        <div class=\"muted text-caption\">\n          Selecione para adicionar com `command` global.\n        </div>\n      </div>\n      <div\n        *ngFor=\"let a of working.actions || []; let i = index\"\n        class=\"g g-auto-200 gap-12 ai-end\"\n      >\n        <mat-form-field appearance=\"outline\">\n          <mat-label>ID</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"a.id\"\n            (ngModelChange)=\"onActionsChanged()\"\n          />\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\n            matInput\n            [(ngModel)]=\"a.icon\"\n            (ngModelChange)=\"onActionsChanged()\"\n            placeholder=\"ex.: edit, delete\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Command (global)</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"a.command\"\n            (ngModelChange)=\"onActionsChanged()\"\n            placeholder=\"global:toast.success\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>R\u00F3tulo</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"a.label\"\n            (ngModelChange)=\"onActionsChanged()\"\n          />\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\n              [(ngModel)]=\"a.buttonVariant\"\n              (ngModelChange)=\"onActionsChanged()\"\n            >\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\n            [(ngModel)]=\"a.color\"\n            (ngModelChange)=\"onActionsChanged()\"\n          >\n            <mat-option *ngFor=\"let c of paletteOptions\" [value]=\"c.value\">\n              <span\n                class=\"color-dot\"\n                [style.background]=\"colorDotBackground(c.value)\"\n              ></span\n              >{{ c.label }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n        <div\n          class=\"g gap-8\"\n          *ngIf=\"isCustomColor(a.color); else actionCustomBtn\"\n        >\n          <pdx-color-picker\n            label=\"Cor personalizada\"\n            [format]=\"'hex'\"\n            [(ngModel)]=\"a.color\"\n            (ngModelChange)=\"onActionsChanged()\"\n          ></pdx-color-picker>\n        </div>\n        <ng-template #actionCustomBtn>\n          <button\n            mat-stroked-button\n            type=\"button\"\n            (click)=\"enableCustomActionColor(a)\"\n          >\n            Usar cor personalizada\n          </button>\n        </ng-template>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Payload da a\u00E7\u00E3o</mat-label>\n          <mat-select\n            [(ngModel)]=\"a.emitPayload\"\n            (ngModelChange)=\"onActionsChanged()\"\n          >\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\n            mat-icon-button\n            matSuffix\n            type=\"button\"\n            class=\"help-icon-button\"\n            matTooltip=\"emitPayload\"\n          >\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\n            >Exibir quando (ex.: &#36;&#123;item.status&#125; ==\n            'done')</mat-label\n          >\n          <input\n            matInput\n            [(ngModel)]=\"a.showIf\"\n            (ngModelChange)=\"onActionsChanged()\"\n          />\n          <button\n            mat-icon-button\n            matSuffix\n            type=\"button\"\n            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          >\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\n            *ngIf=\"(a.kind || 'icon') === 'icon'\"\n            mat-icon-button\n            [color]=\"isThemeColor(a.color) ? a.color : undefined\"\n          >\n            <mat-icon\n              [praxisIcon]=\"a.icon || 'bolt'\"\n              [style.cssText]=\"iconStyle(a.color)\"\n            ></mat-icon>\n          </button>\n          <ng-container *ngIf=\"a.kind === 'button'\">\n            <button\n              *ngIf=\"a.buttonVariant === 'stroked'\"\n              mat-stroked-button\n              [color]=\"isThemeColor(a.color) ? a.color : undefined\"\n              [style.cssText]=\"buttonStyle(a.color, 'stroked')\"\n            >\n              {{ a.label || a.id || \"A\u00E7\u00E3o\" }}\n            </button>\n            <button\n              *ngIf=\"a.buttonVariant === 'raised'\"\n              mat-raised-button\n              [color]=\"isThemeColor(a.color) ? a.color : undefined\"\n              [style.cssText]=\"buttonStyle(a.color, 'raised')\"\n            >\n              {{ a.label || a.id || \"A\u00E7\u00E3o\" }}\n            </button>\n            <button\n              *ngIf=\"!a.buttonVariant || a.buttonVariant === 'flat'\"\n              mat-flat-button\n              [color]=\"isThemeColor(a.color) ? a.color : undefined\"\n              [style.cssText]=\"buttonStyle(a.color, 'flat')\"\n            >\n              {{ a.label || a.id || \"A\u00E7\u00E3o\" }}\n            </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)\">\n            Remover\n          </button>\n        </div>\n        <div class=\"g gap-8 col-span-2\" *ngIf=\"a.command\">\n          <mat-slide-toggle\n            [(ngModel)]=\"a.showLoading\"\n            (ngModelChange)=\"onActionsChanged()\"\n            >Mostrar loading</mat-slide-toggle\n          >\n          <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n            <mat-expansion-panel-header\n              ><mat-panel-title\n                >Confirma\u00E7\u00E3o</mat-panel-title\n              ></mat-expansion-panel-header\n            >\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\n                  [value]=\"a.confirmation?.type || ''\"\n                  (change)=\"applyConfirmationPreset(a, $event.value)\"\n                >\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\n                  matInput\n                  [ngModel]=\"a.confirmation?.title\"\n                  (ngModelChange)=\"setConfirmationField(a, 'title', $event)\"\n                />\n              </mat-form-field>\n              <mat-form-field appearance=\"outline\">\n                <mat-label>Mensagem</mat-label>\n                <input\n                  matInput\n                  [ngModel]=\"a.confirmation?.message\"\n                  (ngModelChange)=\"setConfirmationField(a, 'message', $event)\"\n                />\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>{{\n                    a.confirmation?.title || \"Confirmar a\u00E7\u00E3o\"\n                  }}</strong>\n                </div>\n                <div class=\"text-caption muted\">\n                  {{\n                    a.confirmation?.message ||\n                      \"Tem certeza que deseja continuar?\"\n                  }}\n                </div>\n                <div class=\"text-caption\">\n                  <span\n                    class=\"confirm-type\"\n                    [ngClass]=\"a.confirmation?.type || 'default'\"\n                    >Tipo: {{ a.confirmation?.type || \"padr\u00E3o\" }}</span\n                  >\n                </div>\n                <div\n                  class=\"text-caption muted\"\n                  *ngIf=\"!a.confirmation?.title && !a.confirmation?.message\"\n                >\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\n              matInput\n              rows=\"4\"\n              [(ngModel)]=\"a.globalPayload\"\n              (ngModelChange)=\"onActionsChanged()\"\n              placeholder='{\"message\":\"${item.name} favoritado\"}'\n            ></textarea>\n            <button\n              mat-icon-button\n              matSuffix\n              type=\"button\"\n              class=\"help-icon-button\"\n              [matTooltip]=\"globalPayloadSchemaTooltip(a)\"\n            >\n              <mat-icon>help_outline</mat-icon>\n            </button>\n            <mat-error *ngIf=\"isGlobalPayloadInvalid(a.globalPayload)\"\n              >JSON inv\u00E1lido</mat-error\n            >\n          </mat-form-field>\n          <div class=\"g row-flow gap-8 ai-center\">\n            <button\n              mat-stroked-button\n              type=\"button\"\n              (click)=\"applyGlobalPayloadExample(a)\"\n            >\n              Inserir exemplo\n            </button>\n            <span class=\"muted text-caption\">{{\n              globalPayloadExampleHint(a)\n            }}</span>\n          </div>\n          <mat-slide-toggle\n            [(ngModel)]=\"a.emitLocal\"\n            (ngModelChange)=\"onActionsChanged()\"\n            >Emitir evento local tamb\u00E9m</mat-slide-toggle\n          >\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')\">\n          Preset Tiles Moderno\n        </button>\n      </div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Variante</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.layout.variant\"\n          (ngModelChange)=\"onLayoutChanged()\"\n        >\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\n          [(ngModel)]=\"working.layout.model\"\n          (ngModelChange)=\"onLayoutChanged()\"\n        >\n          <ng-container\n            *ngIf=\"working.layout.variant === 'list'; else cardModels\"\n          >\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\n              *ngIf=\"working.layout.variant === 'tiles'; else cardsOnly\"\n            >\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\n          [(ngModel)]=\"working.layout.lines\"\n          (ngModelChange)=\"onLayoutChanged()\"\n        >\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\n          matInput\n          type=\"number\"\n          min=\"1\"\n          [(ngModel)]=\"working.layout.pageSize\"\n          (ngModelChange)=\"onPageSizeChange($event)\"\n        />\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Densidade</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.layout.density\"\n          (ngModelChange)=\"onLayoutChanged()\"\n        >\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\">\n        <mat-label>Espa\u00E7amento entre itens</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.layout.itemSpacing\"\n          (ngModelChange)=\"onLayoutChanged()\"\n        >\n          <mat-option value=\"none\">Sem espa\u00E7o extra</mat-option>\n          <mat-option value=\"tight\">Justo</mat-option>\n          <mat-option value=\"default\">Padr\u00E3o</mat-option>\n          <mat-option value=\"relaxed\">Relaxado</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field\n        appearance=\"outline\"\n        *ngIf=\"working.layout.variant !== 'tiles'\"\n      >\n        <mat-label>Divisores</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.layout.dividers\"\n          (ngModelChange)=\"onLayoutChanged()\"\n        >\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\n            [(ngModel)]=\"working.layout.groupBy\"\n            (ngModelChange)=\"onLayoutChanged()\"\n          >\n            <mat-option [value]=\"\">Nenhum</mat-option>\n            <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n              f\n            }}</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\n            matInput\n            [(ngModel)]=\"working.layout.groupBy\"\n            (ngModelChange)=\"onLayoutChanged()\"\n            placeholder=\"ex.: departamento\"\n          />\n        </mat-form-field>\n      </ng-template>\n      <mat-slide-toggle\n        [(ngModel)]=\"working.layout.stickySectionHeader\"\n        (ngModelChange)=\"onLayoutChanged()\"\n      >\n        Header de se\u00E7\u00E3o fixo\n      </mat-slide-toggle>\n      <mat-slide-toggle\n        [(ngModel)]=\"working.layout.virtualScroll\"\n        (ngModelChange)=\"onLayoutChanged()\"\n      >\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\n          [(ngModel)]=\"working.ui.showSearch\"\n          (ngModelChange)=\"onUiChanged()\"\n          >Mostrar busca</mat-slide-toggle\n        >\n        <mat-slide-toggle\n          [(ngModel)]=\"working.ui.showSort\"\n          (ngModelChange)=\"onUiChanged()\"\n          >Mostrar ordenar</mat-slide-toggle\n        >\n        <mat-slide-toggle\n          [(ngModel)]=\"working.ui.showRange\"\n          (ngModelChange)=\"onUiChanged()\"\n          >Mostrar faixa X\u2013Y de Total</mat-slide-toggle\n        >\n      </div>\n      <div\n        class=\"g g-auto-220 gap-12 ai-end mt-12\"\n        *ngIf=\"working.ui?.showSearch\"\n      >\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Campo para buscar</mat-label>\n          <mat-select\n            [(ngModel)]=\"working.ui.searchField\"\n            (ngModelChange)=\"onUiChanged()\"\n          >\n            <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n              f\n            }}</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\n            matInput\n            [(ngModel)]=\"working.ui.searchPlaceholder\"\n            (ngModelChange)=\"onUiChanged()\"\n            placeholder=\"ex.: Buscar por t\u00EDtulo\"\n          />\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()\">\n            Adicionar op\u00E7\u00E3o\n          </button>\n        </div>\n        <div\n          class=\"g g-auto-220 gap-12 ai-end mt-12\"\n          *ngFor=\"let r of uiSortRows; let i = index\"\n        >\n          <mat-form-field appearance=\"outline\">\n            <mat-label>R\u00F3tulo</mat-label>\n            <input\n              matInput\n              [(ngModel)]=\"r.label\"\n              (ngModelChange)=\"onUiSortRowsChanged()\"\n              placeholder=\"ex.: Mais recentes\"\n            />\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Campo</mat-label>\n            <mat-select\n              [(ngModel)]=\"r.field\"\n              (ngModelChange)=\"onUiSortRowsChanged()\"\n            >\n              <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                f\n              }}</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\n              [(ngModel)]=\"r.dir\"\n              (ngModelChange)=\"onUiSortRowsChanged()\"\n            >\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)\">\n            Op\u00E7\u00E3o duplicada (campo+dire\u00E7\u00E3o)\n          </div>\n          <div class=\"flex-end\">\n            <button mat-button color=\"warn\" (click)=\"removeUiSortRow(i)\">\n              Remover\n            </button>\n          </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>{{\n                mappingPrimary.field || \"N\u00E3o mapeado\"\n              }}</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\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingPrimary.type = 'text';\n                    mappingPrimary.field = 'name';\n                    onMappingChanged()\n                  \"\n                >\n                  Nome\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingPrimary.type = 'text';\n                    mappingPrimary.field = 'title';\n                    onMappingChanged()\n                  \"\n                >\n                  T\u00EDtulo\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingPrimary.type = 'text';\n                    mappingPrimary.field = 'name';\n                    mappingSecondary.type = 'text';\n                    mappingSecondary.field = 'role';\n                    onMappingChanged()\n                  \"\n                >\n                  Nome + Papel\n                </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\n                    [(ngModel)]=\"mappingPrimary.field\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                      f\n                    }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Tipo</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingPrimary.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of primaryTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\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\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingPrimary\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingPrimary\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"currency\") {\n                  <praxis-meta-editor-currency\n                    [model]=\"mappingPrimary\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-currency>\n                }\n                @case (\"date\") {\n                  <praxis-meta-editor-date\n                    [model]=\"mappingPrimary\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-date>\n                }\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\n                    appearance=\"outline\"\n                    *ngIf=\"\n                      mappingPrimary.type === 'text' ||\n                      mappingPrimary.type === 'html'\n                    \"\n                  >\n                    <mat-label>Classe CSS</mat-label>\n                    <input\n                      matInput\n                      [(ngModel)]=\"mappingPrimary.class\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                    />\n                  </mat-form-field>\n                  <mat-form-field\n                    appearance=\"outline\"\n                    *ngIf=\"\n                      mappingPrimary.type === 'text' ||\n                      mappingPrimary.type === 'html'\n                    \"\n                  >\n                    <mat-label>Estilo Inline</mat-label>\n                    <input\n                      matInput\n                      [(ngModel)]=\"mappingPrimary.style\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                    />\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\n                        matInput\n                        [(ngModel)]=\"mappingPrimary.class\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                      />\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>Estilo Inline</mat-label>\n                      <input\n                        matInput\n                        [(ngModel)]=\"mappingPrimary.style\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                      />\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>{{\n                mappingSecondary.field || \"N\u00E3o mapeado\"\n              }}</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\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingSecondary.type = 'text';\n                    mappingSecondary.field = 'subtitle';\n                    onMappingChanged()\n                  \"\n                >\n                  Subt\u00EDtulo\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingSecondary.type = 'date';\n                    mappingSecondary.field = 'hireDate';\n                    mappingSecondary.dateStyle = 'short';\n                    onMappingChanged()\n                  \"\n                >\n                  Data curta\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingSecondary.type = 'currency';\n                    mappingSecondary.field = 'salary';\n                    mappingSecondary.currencyCode = 'BRL';\n                    mappingSecondary.locale = 'pt-BR';\n                    onMappingChanged()\n                  \"\n                >\n                  Sal\u00E1rio\n                </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\n                    [(ngModel)]=\"mappingSecondary.field\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                      f\n                    }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Tipo</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingSecondary.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of secondaryTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\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\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingSecondary\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingSecondary\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"currency\") {\n                  <praxis-meta-editor-currency\n                    [model]=\"mappingSecondary\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-currency>\n                }\n                @case (\"date\") {\n                  <praxis-meta-editor-date\n                    [model]=\"mappingSecondary\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-date>\n                }\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\"\n                      ><mat-label>Classe CSS</mat-label\n                      ><input\n                        matInput\n                        [(ngModel)]=\"mappingSecondary.class\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                    /></mat-form-field>\n                    <mat-form-field appearance=\"outline\"\n                      ><mat-label>Estilo Inline</mat-label\n                      ><input\n                        matInput\n                        [(ngModel)]=\"mappingSecondary.style\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                    /></mat-form-field>\n                  </div>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n\n          <mat-expansion-panel\n            [expanded]=\"!!mappingMeta.field || mappingMetaFields.length > 0\"\n          >\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>{{\n                    getTypeIcon(mappingMeta.type || \"text\")\n                  }}</mat-icon>\n                  <span>Meta (Detalhe/Lateral)</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>\n                {{\n                  mappingMetaFields.length\n                    ? \"Campo composto (\" + mappingMetaFields.length + \")\"\n                    : mappingMeta.field || \"N\u00E3o mapeado\"\n                }}\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\n                    [(ngModel)]=\"mappingMetaFields\"\n                    multiple\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                      f\n                    }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <div\n                  class=\"g g-1-1 ai-center gap-12\"\n                  *ngIf=\"mappingMetaFields.length\"\n                >\n                  <mat-form-field appearance=\"outline\">\n                    <mat-label>Separador</mat-label>\n                    <input\n                      matInput\n                      [(ngModel)]=\"mappingMetaSeparator\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                    />\n                  </mat-form-field>\n                  <mat-slide-toggle\n                    [(ngModel)]=\"mappingMetaWrapSecondInParens\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\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\n                    [(ngModel)]=\"mappingMeta.field\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option [value]=\"undefined\">-- Nenhum --</mat-option>\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                      f\n                    }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Tipo</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingMeta.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of metaTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\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\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingMeta\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingMeta\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"currency\") {\n                  <praxis-meta-editor-currency\n                    [model]=\"mappingMeta\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-currency>\n                }\n                @case (\"date\") {\n                  <praxis-meta-editor-date\n                    [model]=\"mappingMeta\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-date>\n                }\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()\"\n                  ></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()\"\n                  ></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()\"\n                  ></praxis-meta-editor-icon>\n                }\n                @case (\"image\") {\n                  <praxis-meta-editor-image\n                    [model]=\"mappingMeta\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-image>\n                }\n              }\n\n              <!-- Advanced -->\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header\n                  ><mat-panel-title\n                    >Op\u00E7\u00F5es avan\u00E7adas</mat-panel-title\n                  ></mat-expansion-panel-header\n                >\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\n                      [(ngModel)]=\"mappingMeta.placement\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                    >\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\n                      matInput\n                      [(ngModel)]=\"mappingMeta.class\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                    />\n                  </mat-form-field>\n                  <mat-form-field appearance=\"outline\">\n                    <mat-label>Estilo</mat-label>\n                    <input\n                      matInput\n                      [(ngModel)]=\"mappingMeta.style\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                    />\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>{{\n                    getTypeIcon(mappingTrailing.type || \"text\")\n                  }}</mat-icon>\n                  <span>Trailing (Direita)</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{\n                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\n                    [(ngModel)]=\"mappingTrailing.field\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option [value]=\"undefined\">-- Nenhum --</mat-option>\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                      f\n                    }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Tipo</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingTrailing.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of trailingTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\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\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingTrailing.type = 'chip';\n                    mappingTrailing.chipColor = 'primary';\n                    mappingTrailing.chipVariant = 'filled';\n                    mappingTrailing.field = 'status';\n                    onMappingChanged()\n                  \"\n                >\n                  Status Chip\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingTrailing.type = 'icon';\n                    mappingTrailing.field = 'status';\n                    mappingTrailing.iconColor = 'primary';\n                    onMappingChanged()\n                  \"\n                >\n                  Status \u00CDcone\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingTrailing.type = 'currency';\n                    mappingTrailing.field = 'price';\n                    mappingTrailing.currencyCode = 'BRL';\n                    mappingTrailing.locale = 'pt-BR';\n                    onMappingChanged()\n                  \"\n                >\n                  Pre\u00E7o\n                </button>\n              </div>\n\n              @switch (mappingTrailing.type) {\n                @case (\"text\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingTrailing\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingTrailing\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"currency\") {\n                  <praxis-meta-editor-currency\n                    [model]=\"mappingTrailing\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-currency>\n                }\n                @case (\"date\") {\n                  <praxis-meta-editor-date\n                    [model]=\"mappingTrailing\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-date>\n                }\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()\"\n                  ></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()\"\n                  ></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()\"\n                  ></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\n                        matInput\n                        [(ngModel)]=\"mappingTrailing.imageUrl\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                        placeholder=\"https://... ou ${item.imageUrl}\"\n                      />\n                      <button\n                        mat-icon-button\n                        matSuffix\n                        type=\"button\"\n                        class=\"help-icon-button\"\n                        matTooltip=\"Use URL absoluta/relativa ou express\u00E3o ${item.campo}.\"\n                      >\n                        <mat-icon>help_outline</mat-icon>\n                      </button>\n                      <mat-error\n                        *ngIf=\"\n                          isImageUrlRequiredInvalid(mappingTrailing.imageUrl)\n                        \"\n                        >URL/expr obrigat\u00F3ria</mat-error\n                      >\n                    </mat-form-field>\n                  </div>\n                  <praxis-meta-editor-image\n                    [model]=\"mappingTrailing\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-image>\n                  <div\n                    class=\"text-caption muted\"\n                    *ngIf=\"!mappingTrailing.imageUrl\"\n                  >\n                    Defina a URL/expr para renderizar a imagem.\n                  </div>\n                }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header\n                  ><mat-panel-title\n                    >Estilo</mat-panel-title\n                  ></mat-expansion-panel-header\n                >\n                <div class=\"g gap-12 pt-12\">\n                  <div class=\"g g-1-1 gap-12\">\n                    <mat-form-field appearance=\"outline\"\n                      ><mat-label>Classe</mat-label\n                      ><input\n                        matInput\n                        [(ngModel)]=\"mappingTrailing.class\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                    /></mat-form-field>\n                    <mat-form-field appearance=\"outline\"\n                      ><mat-label>Style</mat-label\n                      ><input\n                        matInput\n                        [(ngModel)]=\"mappingTrailing.style\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                    /></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]=\"\n              !!mappingLeading.field ||\n              (mappingLeading.type === 'icon' && !!mappingLeading.icon) ||\n              (mappingLeading.type === 'image' && !!mappingLeading.imageUrl)\n            \"\n          >\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                {{\n                  mappingLeading.type === \"icon\"\n                    ? mappingLeading.icon || \"\u00CDcone est\u00E1tico\"\n                    : mappingLeading.field ||\n                      (mappingLeading.imageUrl\n                        ? \"Imagem est\u00E1tica\"\n                        : \"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\n                    [(ngModel)]=\"mappingLeading.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of leadingTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\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\n                  appearance=\"outline\"\n                  *ngIf=\"\n                    mappingLeading.type !== 'icon' &&\n                    mappingLeading.type !== 'image'\n                  \"\n                >\n                  <mat-label>Campo</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingLeading.field\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                      f\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\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingLeading.type = 'icon';\n                    mappingLeading.icon = 'person';\n                    mappingLeading.iconColor = 'primary';\n                    onMappingChanged()\n                  \"\n                >\n                  Avatar \u00CDcone\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingLeading.type = 'image';\n                    mappingLeading.imageUrl = 'https://placehold.co/64x64';\n                    mappingLeading.imageAlt = 'Avatar';\n                    mappingLeading.badgeText = '${item.status}';\n                    onMappingChanged()\n                  \"\n                >\n                  Avatar Imagem + Badge\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingLeading.type = 'chip';\n                    mappingLeading.field = 'tag';\n                    mappingLeading.chipColor = 'accent';\n                    mappingLeading.chipVariant = 'filled';\n                    onMappingChanged()\n                  \"\n                >\n                  Chip Tag\n                </button>\n              </div>\n\n              <!-- Icon Specific -->\n              <div\n                class=\"g g-1-auto gap-12 ai-center\"\n                *ngIf=\"mappingLeading.type === 'icon'\"\n              >\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>\u00CDcone</mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"mappingLeading.icon\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  />\n                  <button mat-icon-button matSuffix (click)=\"pickLeadingIcon()\">\n                    <mat-icon>search</mat-icon>\n                  </button>\n                </mat-form-field>\n                <div class=\"text-caption muted\">\n                  Use pipe <code>|iconMap</code> no extra pipe para din\u00E2mico\n                </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()\"\n                ></praxis-meta-editor-icon>\n              </div>\n\n              <!-- Image Specific -->\n              <div\n                class=\"g g-1-1 gap-12\"\n                *ngIf=\"mappingLeading.type === 'image'\"\n              >\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>URL da Imagem</mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"mappingLeading.imageUrl\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                    placeholder=\"https://... ou ${item.imageUrl}\"\n                  />\n                  <button\n                    mat-icon-button\n                    matSuffix\n                    type=\"button\"\n                    class=\"help-icon-button\"\n                    matTooltip=\"Use URL absoluta/relativa ou express\u00E3o ${item.campo}.\"\n                  >\n                    <mat-icon>help_outline</mat-icon>\n                  </button>\n                  <mat-error\n                    *ngIf=\"isImageUrlRequiredInvalid(mappingLeading.imageUrl)\"\n                    >URL/expr obrigat\u00F3ria</mat-error\n                  >\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Alt Text</mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"mappingLeading.imageAlt\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  />\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Badge Texto</mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"mappingLeading.badgeText\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  />\n                </mat-form-field>\n              </div>\n\n              @switch (mappingLeading.type) {\n                @case (\"text\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingLeading\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingLeading\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\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()\"\n                  ></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()\"\n                  ></praxis-meta-editor-rating>\n                }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header\n                  ><mat-panel-title\n                    >Estilo</mat-panel-title\n                  ></mat-expansion-panel-header\n                >\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field appearance=\"outline\"\n                    ><mat-label>Classe</mat-label\n                    ><input\n                      matInput\n                      [(ngModel)]=\"mappingLeading.class\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                  /></mat-form-field>\n                  <mat-form-field appearance=\"outline\"\n                    ><mat-label>Style</mat-label\n                    ><input\n                      matInput\n                      [(ngModel)]=\"mappingLeading.style\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                  /></mat-form-field>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n\n          <!-- Features -->\n          <mat-expansion-panel\n            [expanded]=\"featuresVisible && features.length > 0\"\n          >\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\n                >{{ features.length }} item(s)</mat-panel-description\n              >\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\n                  [(ngModel)]=\"featuresVisible\"\n                  (ngModelChange)=\"onFeaturesChanged()\"\n                  >Ativar recursos</mat-slide-toggle\n                >\n                <mat-slide-toggle\n                  [(ngModel)]=\"featuresSyncWithMeta\"\n                  (ngModelChange)=\"onMappingChanged()\"\n                  >Sincronizar com Meta</mat-slide-toggle\n                >\n                <span class=\"flex-1\"></span>\n                <mat-button-toggle-group\n                  [(ngModel)]=\"featuresMode\"\n                  (change)=\"onFeaturesChanged()\"\n                  appearance=\"legacy\"\n                >\n                  <mat-button-toggle value=\"icons+labels\"\n                    ><mat-icon>view_list</mat-icon></mat-button-toggle\n                  >\n                  <mat-button-toggle value=\"icons-only\"\n                    ><mat-icon>more_horiz</mat-icon></mat-button-toggle\n                  >\n                </mat-button-toggle-group>\n              </div>\n\n              <div\n                *ngFor=\"let f of features; let i = index\"\n                class=\"g g-auto-1 gap-8 ai-center p-8 border rounded mb-2\"\n              >\n                <button mat-icon-button (click)=\"pickFeatureIcon(i)\">\n                  <mat-icon>{{ f.icon || \"search\" }}</mat-icon>\n                </button>\n                <mat-form-field\n                  appearance=\"outline\"\n                  class=\"dense-form-field no-sub\"\n                >\n                  <input\n                    matInput\n                    [(ngModel)]=\"f.expr\"\n                    (ngModelChange)=\"onFeaturesChanged()\"\n                    placeholder=\"Expr/Texto\"\n                  />\n                </mat-form-field>\n                <button mat-icon-button color=\"warn\" (click)=\"removeFeature(i)\">\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </div>\n              <button mat-button color=\"primary\" (click)=\"addFeature()\">\n                <mat-icon>add</mat-icon> Adicionar recurso\n              </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>{{\n                    getTypeIcon(mappingSectionHeader.type)\n                  }}</mat-icon>\n                  <span>Cabe\u00E7alho de Se\u00E7\u00E3o</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{\n                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\n                    [(ngModel)]=\"mappingSectionHeader.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of sectionHeaderTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\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\n                    matInput\n                    [(ngModel)]=\"mappingSectionHeader.expr\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                    placeholder=\"item.key\"\n                  />\n                </mat-form-field>\n              </div>\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">Presets</span>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingSectionHeader.type = 'text';\n                    mappingSectionHeader.expr = '${item.key}';\n                    onMappingChanged()\n                  \"\n                >\n                  Texto padr\u00E3o\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingSectionHeader.type = 'chip';\n                    mappingSectionHeader.chipColor = 'primary';\n                    mappingSectionHeader.chipVariant = 'filled';\n                    mappingSectionHeader.expr = '${item.key}';\n                    onMappingChanged()\n                  \"\n                >\n                  Chip padr\u00E3o\n                </button>\n              </div>\n\n              @switch (mappingSectionHeader.type) {\n                @case (\"text\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingSectionHeader\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingSectionHeader\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\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()\"\n                  ></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()\"\n                  ></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()\"\n                  ></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\n                        matInput\n                        [(ngModel)]=\"mappingSectionHeader.imageUrl\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                      />\n                      <mat-error\n                        *ngIf=\"\n                          isImageUrlRequiredInvalid(\n                            mappingSectionHeader.imageUrl\n                          )\n                        \"\n                        >URL/expr obrigat\u00F3ria</mat-error\n                      >\n                    </mat-form-field>\n                  </div>\n                  <div\n                    class=\"text-caption muted\"\n                    *ngIf=\"!mappingSectionHeader.imageUrl\"\n                  >\n                    Defina a URL/expr para renderizar a imagem.\n                  </div>\n                  <praxis-meta-editor-image\n                    [model]=\"mappingSectionHeader\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-image>\n                }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header\n                  ><mat-panel-title\n                    >Estilo</mat-panel-title\n                  ></mat-expansion-panel-header\n                >\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field appearance=\"outline\"\n                    ><mat-label>Classe</mat-label\n                    ><input\n                      matInput\n                      [(ngModel)]=\"mappingSectionHeader.class\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                  /></mat-form-field>\n                  <mat-form-field appearance=\"outline\"\n                    ><mat-label>Style</mat-label\n                    ><input\n                      matInput\n                      [(ngModel)]=\"mappingSectionHeader.style\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                  /></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>{{\n                mappingEmptyState.expr || \"Padr\u00E3o\"\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\n                    [(ngModel)]=\"mappingEmptyState.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of emptyStateTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\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\n                    matInput\n                    [(ngModel)]=\"mappingEmptyState.expr\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  />\n                </mat-form-field>\n              </div>\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">Presets</span>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingEmptyState.type = 'text';\n                    mappingEmptyState.expr = 'Nenhum item dispon\u00EDvel';\n                    onMappingChanged()\n                  \"\n                >\n                  Mensagem padr\u00E3o\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingEmptyState.type = 'image';\n                    mappingEmptyState.imageUrl = '/list-empty-state.svg';\n                    mappingEmptyState.imageAlt = 'Sem resultados';\n                    onMappingChanged()\n                  \"\n                >\n                  Imagem padr\u00E3o\n                </button>\n              </div>\n\n              @switch (mappingEmptyState.type) {\n                @case (\"text\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingEmptyState\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingEmptyState\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\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()\"\n                  ></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()\"\n                  ></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()\"\n                  ></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\n                        matInput\n                        [(ngModel)]=\"mappingEmptyState.imageUrl\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                      />\n                      <mat-error\n                        *ngIf=\"\n                          isImageUrlRequiredInvalid(mappingEmptyState.imageUrl)\n                        \"\n                        >URL/expr obrigat\u00F3ria</mat-error\n                      >\n                    </mat-form-field>\n                  </div>\n                  <div\n                    class=\"text-caption muted\"\n                    *ngIf=\"!mappingEmptyState.imageUrl\"\n                  >\n                    Defina a URL/expr para renderizar a imagem.\n                  </div>\n                  <praxis-meta-editor-image\n                    [model]=\"mappingEmptyState\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-image>\n                }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header\n                  ><mat-panel-title\n                    >Estilo</mat-panel-title\n                  ></mat-expansion-panel-header\n                >\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field appearance=\"outline\"\n                    ><mat-label>Classe</mat-label\n                    ><input\n                      matInput\n                      [(ngModel)]=\"mappingEmptyState.class\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                  /></mat-form-field>\n                  <mat-form-field appearance=\"outline\"\n                    ><mat-label>Style</mat-label\n                    ><input\n                      matInput\n                      [(ngModel)]=\"mappingEmptyState.style\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                  /></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()\">\n          Aplicar mapeamento\n        </button>\n        <button\n          mat-button\n          (click)=\"inferFromFields()\"\n          [disabled]=\"!fields.length\"\n        >\n          Inferir do schema\n        </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\n              matInput\n              type=\"number\"\n              min=\"0\"\n              [(ngModel)]=\"skeletonCountInput\"\n              (ngModelChange)=\"onSkeletonChanged($event)\"\n            />\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\n              [(ngModel)]=\"skinPreviewTheme\"\n              (change)=\"onSkinChanged()\"\n              appearance=\"legacy\"\n            >\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\n              [config]=\"working\"\n              [items]=\"previewData\"\n              [theme]=\"skinPreviewTheme\"\n            ></praxis-list-skin-preview>\n          </div>\n        </div>\n      </div>\n    </div>\n  </mat-tab>\n  <mat-tab label=\"i18n/A11y\">\n    <div\n      class=\"editor-content grid gap-3\"\n      *ngIf=\"working?.a11y && working?.events\"\n    >\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Locale padr\u00E3o</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.i18n.locale\"\n          (ngModelChange)=\"markDirty()\"\n          placeholder=\"ex.: pt-BR\"\n        />\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Moeda padr\u00E3o</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.i18n.currency\"\n          (ngModelChange)=\"markDirty()\"\n          placeholder=\"ex.: BRL\"\n        />\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\n            matInput\n            [(ngModel)]=\"working!.a11y!.ariaLabel\"\n            (ngModelChange)=\"markDirty()\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>aria-labelledby</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working!.a11y!.ariaLabelledBy\"\n            (ngModelChange)=\"markDirty()\"\n          />\n        </mat-form-field>\n      </div>\n      <div class=\"g g-auto-220 gap-12 ai-end\">\n        <mat-slide-toggle\n          [(ngModel)]=\"working!.a11y!.highContrast\"\n          (ngModelChange)=\"markDirty()\"\n          >Alto contraste</mat-slide-toggle\n        >\n        <mat-slide-toggle\n          [(ngModel)]=\"working!.a11y!.reduceMotion\"\n          (ngModelChange)=\"markDirty()\"\n          >Reduzir movimento</mat-slide-toggle\n        >\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\n            matInput\n            [(ngModel)]=\"working!.events!.itemClick\"\n            (ngModelChange)=\"markDirty()\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>actionClick</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working!.events!.actionClick\"\n            (ngModelChange)=\"markDirty()\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>selectionChange</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working!.events!.selectionChange\"\n            (ngModelChange)=\"markDirty()\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>loaded</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working!.events!.loaded\"\n            (ngModelChange)=\"markDirty()\"\n          />\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\n          [(ngModel)]=\"working.selection.mode\"\n          (ngModelChange)=\"onSelectionChanged()\"\n        >\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\n          matInput\n          [(ngModel)]=\"working.selection.formControlName\"\n          (ngModelChange)=\"onSelectionChanged()\"\n        />\n        <button\n          mat-icon-button\n          matSuffix\n          type=\"button\"\n          class=\"help-icon-button\"\n          matTooltip=\"formControlName\"\n        >\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\n          matInput\n          [(ngModel)]=\"working.selection.formControlPath\"\n          (ngModelChange)=\"onSelectionChanged()\"\n        />\n        <button\n          mat-icon-button\n          matSuffix\n          type=\"button\"\n          class=\"help-icon-button\"\n          matTooltip=\"formControlPath\"\n        >\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\n          matInput\n          [(ngModel)]=\"working.selection.compareBy\"\n          (ngModelChange)=\"onSelectionChanged()\"\n        />\n        <button\n          mat-icon-button\n          matSuffix\n          type=\"button\"\n          class=\"help-icon-button\"\n          matTooltip=\"Chave unica do item.\"\n        >\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\n          [(ngModel)]=\"working.selection.return\"\n          (ngModelChange)=\"onSelectionChanged()\"\n        >\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')\">\n          Pill Soft\n        </button>\n        <button mat-button (click)=\"applySkinPreset('gradient-tile')\">\n          Gradient Tile\n        </button>\n        <button mat-button (click)=\"applySkinPreset('glass')\">Glass</button>\n        <button mat-button (click)=\"applySkinPreset('elevated')\">\n          Elevated\n        </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')\">\n          Neumorphism\n        </button>\n      </div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Estilo</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.skin.type\"\n          (ngModelChange)=\"onSkinTypeChanged($event)\"\n        >\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\n          matInput\n          [(ngModel)]=\"working.skin.radius\"\n          (ngModelChange)=\"onSkinChanged()\"\n          placeholder=\"ex.: 1.25rem\"\n        />\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Sombra</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.skin.shadow\"\n          (ngModelChange)=\"onSkinChanged()\"\n          placeholder=\"ex.: var(--md-sys-elevation-level2)\"\n        />\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Borda</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.skin.border\"\n          (ngModelChange)=\"onSkinChanged()\"\n        />\n      </mat-form-field>\n      <mat-form-field\n        *ngIf=\"working.skin.type === 'glass'\"\n        appearance=\"outline\"\n      >\n        <mat-label>Desfoque</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.skin.backdropBlur\"\n          (ngModelChange)=\"onSkinChanged()\"\n          placeholder=\"ex.: 8px\"\n        />\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\n            matInput\n            [ngModel]=\"working.skin.gradient.from || ''\"\n            (ngModelChange)=\"onSkinGradientChanged('from', $event)\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Degrad\u00EA at\u00E9</mat-label>\n          <input\n            matInput\n            [ngModel]=\"working.skin.gradient.to || ''\"\n            (ngModelChange)=\"onSkinGradientChanged('to', $event)\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>\u00C2ngulo</mat-label>\n          <input\n            matInput\n            type=\"number\"\n            [ngModel]=\"working.skin.gradient.angle ?? 135\"\n            (ngModelChange)=\"onSkinGradientChanged('angle', $event)\"\n          />\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\n          matInput\n          [(ngModel)]=\"working.skin.class\"\n          (ngModelChange)=\"onSkinChanged()\"\n          placeholder=\"ex.: my-list-skin\"\n        />\n      </mat-form-field>\n\n      <div\n        *ngIf=\"working.skin.type === 'custom'\"\n        class=\"g g-auto-220 gap-12 ai-end\"\n      >\n        <mat-form-field appearance=\"outline\" class=\"w-full\">\n          <mat-label>Estilo inline (skin.inlineStyle)</mat-label>\n          <textarea\n            matInput\n            rows=\"4\"\n            [(ngModel)]=\"working.skin.inlineStyle\"\n            (ngModelChange)=\"onSkinChanged()\"\n            [attr.placeholder]=\"':host{--p-list-radius: 1rem}'\"\n          ></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\">\n.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          >\n        </div>\n      </div>\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"] }] });
+    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" }, providers: [
+            providePraxisI18nConfig(SURFACE_OPEN_I18N_CONFIG),
+            providePraxisListI18n(),
+        ], ngImport: i0, template: "<mat-tab-group class=\"list-editor-tabs\">\n  <mat-tab [label]=\"tx('Data')\">\n    <div class=\"editor-content\">\n      <div class=\"g g-1-auto gap-8 ai-center\">\n        <div class=\"muted\">\n          {{ tx('Assistant-applied adjustments replace the entire configuration object.') }}\n        </div>\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"help-icon-button\"\n          [matTooltip]=\"tx('applyConfigFromAdapter does not perform a deep merge. Make sure the adapter sends the full config.')\"\n        >\n          <mat-icon>help_outline</mat-icon>\n        </button>\n      </div>\n      <mat-form-field appearance=\"outline\" class=\"w-full\">\n        <mat-label>{{ tx('Resource (API)') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.dataSource.resourcePath\"\n          (ngModelChange)=\"onResourcePathChange($event)\"\n          [placeholder]=\"tx('e.g.: users')\"\n        />\n        <button\n          mat-icon-button\n          matSuffix\n          type=\"button\"\n          class=\"help-icon-button\"\n          [matTooltip]=\"tx('Resource endpoint (resourcePath).')\"\n        >\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>{{ tx('Query (JSON)') }}</mat-label>\n        <textarea\n          matInput\n          rows=\"3\"\n          [(ngModel)]=\"queryJson\"\n          (ngModelChange)=\"onQueryChanged($event)\"\n          [placeholder]=\"queryPlaceholder()\"\n        ></textarea>\n        <button\n          mat-icon-button\n          matSuffix\n          type=\"button\"\n          class=\"help-icon-button\"\n          [matTooltip]=\"tx('Optional. Use valid JSON for initial filters.')\"\n          *ngIf=\"!queryError\"\n        >\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>{{ tx('Sort by') }}</mat-label>\n          <mat-select\n            [(ngModel)]=\"sortField\"\n            (ngModelChange)=\"updateSortConfig()\"\n          >\n            <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n              f\n            }}</mat-option>\n          </mat-select>\n          <button\n            mat-icon-button\n            matSuffix\n            type=\"button\"\n            class=\"help-icon-button\"\n            [matTooltip]=\"tx('Resource base field.')\"\n          >\n            <mat-icon>help_outline</mat-icon>\n          </button>\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Direction') }}</mat-label>\n          <mat-select\n            [(ngModel)]=\"sortDir\"\n            (ngModelChange)=\"updateSortConfig()\"\n          >\n            <mat-option value=\"asc\">{{ tx('Ascending') }}</mat-option>\n            <mat-option value=\"desc\">{{ tx('Descending') }}</mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n    </div>\n  </mat-tab>\n  <mat-tab [label]=\"tx('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      >\n      </praxis-list-json-config-editor>\n    </div>\n  </mat-tab>\n  <mat-tab [label]=\"tx('Actions')\">\n    <div class=\"editor-content g gap-12\">\n      <div class=\"g g-1-auto gap-8 ai-center\">\n        <div class=\"muted\">\n          {{ tx('Configure per-item action buttons (icon, label, color, visibility)') }}\n        </div>\n        <button mat-flat-button color=\"primary\" (click)=\"addAction()\">\n          {{ tx('Add action') }}\n        </button>\n      </div>\n      <div class=\"g g-1-auto gap-8 ai-center\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Global action (Praxis)') }}</mat-label>\n          <mat-select\n            [(ngModel)]=\"selectedGlobalActionId\"\n            (ngModelChange)=\"onGlobalActionSelected($event)\"\n          >\n            <mat-option [value]=\"undefined\">{{ tx('-- Select --') }}</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\n            *ngIf=\"!globalActionCatalog.length\"\n            class=\"text-caption muted\"\n            >{{ tx('No global action registered.') }}</mat-hint\n          >\n        </mat-form-field>\n        <div class=\"muted text-caption\">\n          {{ tx('Select to add with a global `command`.') }}\n        </div>\n      </div>\n      <div\n        *ngFor=\"let a of working.actions || []; let i = index\"\n        class=\"g g-auto-200 gap-12 ai-end\"\n      >\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('ID') }}</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"a.id\"\n            (ngModelChange)=\"onActionsChanged()\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Action type') }}</mat-label>\n          <mat-select [(ngModel)]=\"a.kind\" (ngModelChange)=\"onActionsChanged()\">\n            <mat-option value=\"icon\">{{ tx('Icon') }}</mat-option>\n            <mat-option value=\"button\">{{ tx('Button') }}</mat-option>\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Icon') }}</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"a.icon\"\n            (ngModelChange)=\"onActionsChanged()\"\n            [placeholder]=\"tx('e.g.: edit, delete')\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Command (global)') }}</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"a.command\"\n            (ngModelChange)=\"onActionsChanged()\"\n            placeholder=\"global:toast.success\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Label') }}</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"a.label\"\n            (ngModelChange)=\"onActionsChanged()\"\n          />\n        </mat-form-field>\n        <ng-container *ngIf=\"a.kind === 'button'\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>{{ tx('Variant') }}</mat-label>\n            <mat-select\n              [(ngModel)]=\"a.buttonVariant\"\n              (ngModelChange)=\"onActionsChanged()\"\n            >\n              <mat-option value=\"stroked\">{{ tx('Outlined') }}</mat-option>\n              <mat-option value=\"raised\">{{ tx('Raised') }}</mat-option>\n              <mat-option value=\"flat\">{{ tx('Filled') }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </ng-container>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Action color') }}</mat-label>\n          <mat-select\n            [(ngModel)]=\"a.color\"\n            (ngModelChange)=\"onActionsChanged()\"\n          >\n            <mat-option *ngFor=\"let c of paletteOptions\" [value]=\"c.value\">\n              <span\n                class=\"color-dot\"\n                [style.background]=\"colorDotBackground(c.value)\"\n              ></span\n              >{{ tx(c.label) }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n        <div\n          class=\"g gap-8\"\n          *ngIf=\"isCustomColor(a.color); else actionCustomBtn\"\n        >\n          <pdx-color-picker\n            [label]=\"tx('Custom color')\"\n            [format]=\"'hex'\"\n            [(ngModel)]=\"a.color\"\n            (ngModelChange)=\"onActionsChanged()\"\n          ></pdx-color-picker>\n        </div>\n        <ng-template #actionCustomBtn>\n          <button\n            mat-stroked-button\n            type=\"button\"\n            (click)=\"enableCustomActionColor(a)\"\n          >\n            {{ tx('Use custom color') }}\n          </button>\n        </ng-template>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Action payload') }}</mat-label>\n          <mat-select\n            [(ngModel)]=\"a.emitPayload\"\n            (ngModelChange)=\"onActionsChanged()\"\n          >\n            <mat-option [value]=\"undefined\">{{ tx('Default') }}</mat-option>\n            <mat-option value=\"item\">{{ tx('Item') }}</mat-option>\n            <mat-option value=\"id\">{{ tx('ID') }}</mat-option>\n            <mat-option value=\"value\">{{ tx('Value') }}</mat-option>\n          </mat-select>\n          <button\n            mat-icon-button\n            matSuffix\n            type=\"button\"\n            class=\"help-icon-button\"\n            [matTooltip]=\"tx('Payload emitted by the action.')\"\n          >\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>{{ actionVisibilityLabel() }}</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"a.showIf\"\n            (ngModelChange)=\"onActionsChanged()\"\n          />\n          <button\n            mat-icon-button\n            matSuffix\n            type=\"button\"\n            class=\"help-icon-button\"\n            [matTooltip]=\"actionConditionTooltip()\"\n          >\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\n            *ngIf=\"(a.kind || 'icon') === 'icon'\"\n            mat-icon-button\n            [color]=\"isThemeColor(a.color) ? a.color : undefined\"\n          >\n            <mat-icon\n              [praxisIcon]=\"a.icon || 'bolt'\"\n              [style.cssText]=\"iconStyle(a.color)\"\n            ></mat-icon>\n          </button>\n          <ng-container *ngIf=\"a.kind === 'button'\">\n            <button\n              *ngIf=\"a.buttonVariant === 'stroked'\"\n              mat-stroked-button\n              [color]=\"isThemeColor(a.color) ? a.color : undefined\"\n              [style.cssText]=\"buttonStyle(a.color, 'stroked')\"\n            >\n              {{ a.label || a.id || tx('Action') }}\n            </button>\n            <button\n              *ngIf=\"a.buttonVariant === 'raised'\"\n              mat-raised-button\n              [color]=\"isThemeColor(a.color) ? a.color : undefined\"\n              [style.cssText]=\"buttonStyle(a.color, 'raised')\"\n            >\n              {{ a.label || a.id || tx('Action') }}\n            </button>\n            <button\n              *ngIf=\"!a.buttonVariant || a.buttonVariant === 'flat'\"\n              mat-flat-button\n              [color]=\"isThemeColor(a.color) ? a.color : undefined\"\n              [style.cssText]=\"buttonStyle(a.color, 'flat')\"\n            >\n              {{ a.label || a.id || tx('Action') }}\n            </button>\n          </ng-container>\n          <span class=\"muted\">{{ tx('Preview') }}</span>\n        </div>\n        <div class=\"flex-end\">\n          <button mat-button color=\"warn\" (click)=\"removeAction(i)\">\n            {{ tx('Remove') }}\n          </button>\n        </div>\n        <div class=\"g gap-8 col-span-2\" *ngIf=\"a.command\">\n          <mat-slide-toggle\n            [(ngModel)]=\"a.showLoading\"\n            (ngModelChange)=\"onActionsChanged()\"\n            >{{ tx('Show loading') }}</mat-slide-toggle\n          >\n          <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n            <mat-expansion-panel-header\n              ><mat-panel-title\n                >{{ tx('Confirmation') }}</mat-panel-title\n              ></mat-expansion-panel-header\n            >\n            <div class=\"g gap-12 pt-12\">\n              <div class=\"g row-flow gap-8 ai-center\">\n                <span class=\"text-caption muted\">{{ tx('Type') }}</span>\n                <mat-button-toggle-group\n                  [value]=\"a.confirmation?.type || ''\"\n                  (change)=\"applyConfirmationPreset(a, $event.value)\"\n                >\n                  <mat-button-toggle value=\"\">{{ tx('Default') }}</mat-button-toggle>\n                  <mat-button-toggle value=\"danger\">{{ tx('Danger') }}</mat-button-toggle>\n                  <mat-button-toggle value=\"warning\">{{ tx('Warning') }}</mat-button-toggle>\n                  <mat-button-toggle value=\"info\">{{ tx('Info') }}</mat-button-toggle>\n                </mat-button-toggle-group>\n              </div>\n              <mat-form-field appearance=\"outline\">\n                <mat-label>{{ tx('Title') }}</mat-label>\n                <input\n                  matInput\n                  [ngModel]=\"a.confirmation?.title\"\n                  (ngModelChange)=\"setConfirmationField(a, 'title', $event)\"\n                />\n              </mat-form-field>\n              <mat-form-field appearance=\"outline\">\n                <mat-label>{{ tx('Message') }}</mat-label>\n                <input\n                  matInput\n                  [ngModel]=\"a.confirmation?.message\"\n                  (ngModelChange)=\"setConfirmationField(a, 'message', $event)\"\n                />\n              </mat-form-field>\n              <div class=\"g gap-6\">\n                <div class=\"text-caption muted\">{{ tx('Preview') }}</div>\n                <div class=\"text-caption\">\n                  <strong>{{\n                    a.confirmation?.title || tx('Confirm action')\n                  }}</strong>\n                </div>\n                <div class=\"text-caption muted\">\n                  {{\n                    a.confirmation?.message ||\n                      tx('Are you sure you want to continue?')\n                  }}\n                </div>\n                <div class=\"text-caption\">\n                  <span\n                    class=\"confirm-type\"\n                    [ngClass]=\"a.confirmation?.type || 'default'\"\n                    >{{ tx('Type') }}:\n                    {{ a.confirmation?.type || tx('Default').toLowerCase() }}</span\n                  >\n                </div>\n                <div\n                  class=\"text-caption muted\"\n                  *ngIf=\"!a.confirmation?.title && !a.confirmation?.message\"\n                >\n                  {{ tx('Set a title or message for the confirmation.') }}\n                </div>\n              </div>\n            </div>\n          </mat-expansion-panel>\n          <ng-container *ngIf=\"isSurfaceOpenCommand(a); else defaultGlobalPayloadEditor\">\n            <div class=\"col-span-2\">\n              <praxis-surface-open-action-editor\n                [value]=\"getSurfaceOpenGlobalPayload(a)\"\n                hostKind=\"list\"\n                (valueChange)=\"onSurfaceOpenGlobalPayloadChange(a, $event)\"\n              ></praxis-surface-open-action-editor>\n            </div>\n          </ng-container>\n          <ng-template #defaultGlobalPayloadEditor>\n          <mat-form-field appearance=\"outline\" class=\"col-span-2\">\n            <mat-label>{{ tx('Payload (JSON/Template)') }}</mat-label>\n            <textarea\n              matInput\n              rows=\"4\"\n              [(ngModel)]=\"a.globalPayload\"\n              (ngModelChange)=\"onActionsChanged()\"\n              placeholder='{\"message\":\"${item.name} favoritado\"}'\n            ></textarea>\n            <button\n              mat-icon-button\n              matSuffix\n              type=\"button\"\n              class=\"help-icon-button\"\n              [matTooltip]=\"globalPayloadSchemaTooltip(a)\"\n            >\n              <mat-icon>help_outline</mat-icon>\n            </button>\n            <mat-error *ngIf=\"isGlobalPayloadInvalid(a.globalPayload)\"\n              >{{ tx('Invalid JSON') }}</mat-error\n            >\n          </mat-form-field>\n          <div class=\"g row-flow gap-8 ai-center\">\n            <button\n              mat-stroked-button\n              type=\"button\"\n              (click)=\"applyGlobalPayloadExample(a)\"\n            >\n              {{ tx('Insert example') }}\n            </button>\n            <span class=\"muted text-caption\">{{\n              globalPayloadExampleHint(a)\n            }}</span>\n          </div>\n          </ng-template>\n          <mat-slide-toggle\n            [(ngModel)]=\"a.emitLocal\"\n            (ngModelChange)=\"onActionsChanged()\"\n            >{{ tx('Emit local event too') }}</mat-slide-toggle\n          >\n        </div>\n      </div>\n    </div>\n  </mat-tab>\n  <mat-tab [label]=\"tx('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')\">\n          {{ tx('Modern tiles preset') }}\n        </button>\n      </div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Variant') }}</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.layout.variant\"\n          (ngModelChange)=\"onLayoutChanged()\"\n        >\n          <mat-option value=\"list\">{{ tx('List') }}</mat-option>\n          <mat-option value=\"cards\">{{ tx('Cards') }}</mat-option>\n          <mat-option value=\"tiles\">{{ tx('Tiles') }}</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Model') }}</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.layout.model\"\n          (ngModelChange)=\"onLayoutChanged()\"\n        >\n          <ng-container\n            *ngIf=\"working.layout.variant === 'list'; else cardModels\"\n          >\n            <mat-option value=\"standard\">{{ tx('Standard') }}</mat-option>\n            <mat-option value=\"media\">{{ tx('Media on the left') }}</mat-option>\n            <mat-option value=\"hotel\">{{ tx('Hotel (large media)') }}</mat-option>\n          </ng-container>\n          <ng-template #cardModels>\n            <ng-container\n              *ngIf=\"working.layout.variant === 'tiles'; else cardsOnly\"\n            >\n              <mat-option value=\"standard\">{{ tx('Standard tile') }}</mat-option>\n              <mat-option value=\"media\">{{ tx('Tile with media') }}</mat-option>\n              <mat-option value=\"hotel\">{{ tx('Hotel tile') }}</mat-option>\n            </ng-container>\n            <ng-template #cardsOnly>\n              <mat-option value=\"standard\">{{ tx('Standard') }}</mat-option>\n              <mat-option value=\"media\">{{ tx('Card with media') }}</mat-option>\n              <mat-option value=\"hotel\">{{ tx('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>{{ tx('Lines') }}</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.layout.lines\"\n          (ngModelChange)=\"onLayoutChanged()\"\n        >\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>{{ tx('Items per page') }}</mat-label>\n        <input\n          matInput\n          type=\"number\"\n          min=\"1\"\n          [(ngModel)]=\"working.layout.pageSize\"\n          (ngModelChange)=\"onPageSizeChange($event)\"\n        />\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Density') }}</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.layout.density\"\n          (ngModelChange)=\"onLayoutChanged()\"\n        >\n          <mat-option value=\"default\">{{ tx('Default') }}</mat-option>\n          <mat-option value=\"comfortable\">{{ tx('Comfortable') }}</mat-option>\n          <mat-option value=\"compact\">{{ tx('Compact') }}</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Spacing between items') }}</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.layout.itemSpacing\"\n          (ngModelChange)=\"onLayoutChanged()\"\n        >\n          <mat-option value=\"none\">{{ tx('No extra space') }}</mat-option>\n          <mat-option value=\"tight\">{{ tx('Tight') }}</mat-option>\n          <mat-option value=\"default\">{{ tx('Standard') }}</mat-option>\n          <mat-option value=\"relaxed\">{{ tx('Relaxed') }}</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field\n        appearance=\"outline\"\n        *ngIf=\"working.layout.variant !== 'tiles'\"\n      >\n        <mat-label>{{ tx('Dividers') }}</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.layout.dividers\"\n          (ngModelChange)=\"onLayoutChanged()\"\n        >\n          <mat-option value=\"none\">{{ tx('None') }}</mat-option>\n          <mat-option value=\"between\">{{ tx('Between groups') }}</mat-option>\n          <mat-option value=\"all\">{{ tx('All') }}</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>{{ tx('Group by') }}</mat-label>\n          <mat-select\n            [(ngModel)]=\"working.layout.groupBy\"\n            (ngModelChange)=\"onLayoutChanged()\"\n          >\n            <mat-option [value]=\"\">{{ tx('None') }}</mat-option>\n            <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n              f\n            }}</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>{{ tx('Group by') }}</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working.layout.groupBy\"\n            (ngModelChange)=\"onLayoutChanged()\"\n            [placeholder]=\"tx('e.g.: department')\"\n          />\n        </mat-form-field>\n      </ng-template>\n      <mat-slide-toggle\n        [(ngModel)]=\"working.layout.stickySectionHeader\"\n        (ngModelChange)=\"onLayoutChanged()\"\n      >\n        {{ tx('Sticky section header') }}\n      </mat-slide-toggle>\n      <mat-slide-toggle\n        [(ngModel)]=\"working.layout.virtualScroll\"\n        (ngModelChange)=\"onLayoutChanged()\"\n      >\n        {{ tx('Virtual scroll') }}\n      </mat-slide-toggle>\n      <mat-divider class=\"my-8\"></mat-divider>\n      <div class=\"subtitle\">{{ tx('List tools') }}</div>\n      <div class=\"g g-auto-220 gap-12 ai-end\">\n        <mat-slide-toggle\n          [(ngModel)]=\"working.ui.showSearch\"\n          (ngModelChange)=\"onUiChanged()\"\n          >{{ tx('Show search') }}</mat-slide-toggle\n        >\n        <mat-slide-toggle\n          [(ngModel)]=\"working.ui.showSort\"\n          (ngModelChange)=\"onUiChanged()\"\n          >{{ tx('Show sorting') }}</mat-slide-toggle\n        >\n        <mat-slide-toggle\n          [(ngModel)]=\"working.ui.showRange\"\n          (ngModelChange)=\"onUiChanged()\"\n          >{{ tx('Show total X-Y range') }}</mat-slide-toggle\n        >\n      </div>\n      <div\n        class=\"g g-auto-220 gap-12 ai-end mt-12\"\n        *ngIf=\"working.ui?.showSearch\"\n      >\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Field to search') }}</mat-label>\n          <mat-select\n            [(ngModel)]=\"working.ui.searchField\"\n            (ngModelChange)=\"onUiChanged()\"\n          >\n            <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n              f\n            }}</mat-option>\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Search placeholder') }}</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working.ui.searchPlaceholder\"\n            (ngModelChange)=\"onUiChanged()\"\n            [placeholder]=\"tx('e.g.: Search by title')\"\n          />\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\">\n            {{ tx('Sorting options (label \u2192 field+direction)') }}\n          </div>\n          <button mat-flat-button color=\"primary\" (click)=\"addUiSortRow()\">\n            {{ tx('Add option') }}\n          </button>\n        </div>\n        <div\n          class=\"g g-auto-220 gap-12 ai-end mt-12\"\n          *ngFor=\"let r of uiSortRows; let i = index\"\n        >\n          <mat-form-field appearance=\"outline\">\n            <mat-label>{{ tx('Label') }}</mat-label>\n            <input\n              matInput\n              [(ngModel)]=\"r.label\"\n              (ngModelChange)=\"onUiSortRowsChanged()\"\n              [placeholder]=\"tx('e.g.: Most recent')\"\n            />\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>{{ tx('Field') }}</mat-label>\n            <mat-select\n              [(ngModel)]=\"r.field\"\n              (ngModelChange)=\"onUiSortRowsChanged()\"\n            >\n              <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                f\n              }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>{{ tx('Direction') }}</mat-label>\n            <mat-select\n              [(ngModel)]=\"r.dir\"\n              (ngModelChange)=\"onUiSortRowsChanged()\"\n            >\n              <mat-option value=\"desc\">{{ tx('Descending') }}</mat-option>\n              <mat-option value=\"asc\">{{ tx('Ascending') }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <div class=\"error\" *ngIf=\"isUiSortRowDuplicate(i)\">\n            {{ tx('Duplicate option (field+direction)') }}\n          </div>\n          <div class=\"flex-end\">\n            <button mat-button color=\"warn\" (click)=\"removeUiSortRow(i)\">\n              {{ tx('Remove') }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </mat-tab>\n  <mat-tab [label]=\"tx('Content')\">\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>{{ tx('Primary (Title)') }}</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{\n                mappingPrimary.field || tx('Not mapped')\n              }}</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\">{{ tx('Presets') }}</span>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingPrimary.type = 'text';\n                    mappingPrimary.field = 'name';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Name') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingPrimary.type = 'text';\n                    mappingPrimary.field = 'title';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Title') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingPrimary.type = 'text';\n                    mappingPrimary.field = 'name';\n                    mappingSecondary.type = 'text';\n                    mappingSecondary.field = 'role';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Name + role') }}\n                </button>\n              </div>\n              <div class=\"g g-1-1 gap-12\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Field') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingPrimary.field\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                      f\n                    }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Type') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingPrimary.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of primaryTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ tx(mt.label) }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n\n              @switch (mappingPrimary.type) {\n                @case (\"text\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingPrimary\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingPrimary\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"currency\") {\n                  <praxis-meta-editor-currency\n                    [model]=\"mappingPrimary\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-currency>\n                }\n                @case (\"date\") {\n                  <praxis-meta-editor-date\n                    [model]=\"mappingPrimary\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-date>\n                }\n              }\n\n              <!-- Advanced -->\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header>\n                  <mat-panel-title>{{ tx('Formatting and style') }}</mat-panel-title>\n                </mat-expansion-panel-header>\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field\n                    appearance=\"outline\"\n                    *ngIf=\"\n                      mappingPrimary.type === 'text' ||\n                      mappingPrimary.type === 'html'\n                    \"\n                  >\n                    <mat-label>{{ tx('CSS class') }}</mat-label>\n                    <input\n                      matInput\n                      [(ngModel)]=\"mappingPrimary.class\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                    />\n                  </mat-form-field>\n                  <mat-form-field\n                    appearance=\"outline\"\n                    *ngIf=\"\n                      mappingPrimary.type === 'text' ||\n                      mappingPrimary.type === 'html'\n                    \"\n                  >\n                    <mat-label>{{ tx('Inline style') }}</mat-label>\n                    <input\n                      matInput\n                      [(ngModel)]=\"mappingPrimary.style\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                    />\n                  </mat-form-field>\n                  <div class=\"g g-1-1 gap-12\">\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('CSS class') }}</mat-label>\n                      <input\n                        matInput\n                        [(ngModel)]=\"mappingPrimary.class\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                      />\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('Inline style') }}</mat-label>\n                      <input\n                        matInput\n                        [(ngModel)]=\"mappingPrimary.style\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                      />\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>{{ tx('Secondary (Summary)') }}</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{\n                mappingSecondary.field || tx('Not mapped')\n              }}</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\">{{ tx('Presets') }}</span>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingSecondary.type = 'text';\n                    mappingSecondary.field = 'subtitle';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Subtitle') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingSecondary.type = 'date';\n                    mappingSecondary.field = 'hireDate';\n                    mappingSecondary.dateStyle = 'short';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Short date') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"applySalaryPreset()\"\n                >\n                  {{ tx('Salary') }}\n                </button>\n              </div>\n              <div class=\"g g-1-1 gap-12\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Field') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingSecondary.field\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                      f\n                    }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Type') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingSecondary.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of secondaryTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ tx(mt.label) }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n\n              @switch (mappingSecondary.type) {\n                @case (\"text\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingSecondary\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingSecondary\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"currency\") {\n                  <praxis-meta-editor-currency\n                    [model]=\"mappingSecondary\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-currency>\n                }\n                @case (\"date\") {\n                  <praxis-meta-editor-date\n                    [model]=\"mappingSecondary\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-date>\n                }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header>\n                  <mat-panel-title>{{ tx('Formatting and style') }}</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\"\n                      ><mat-label>{{ tx('CSS class') }}</mat-label\n                      ><input\n                        matInput\n                        [(ngModel)]=\"mappingSecondary.class\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                    /></mat-form-field>\n                    <mat-form-field appearance=\"outline\"\n                      ><mat-label>{{ tx('Inline style') }}</mat-label\n                      ><input\n                        matInput\n                        [(ngModel)]=\"mappingSecondary.style\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                    /></mat-form-field>\n                  </div>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n\n          <mat-expansion-panel\n            [expanded]=\"!!mappingMeta.field || mappingMetaFields.length > 0\"\n          >\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>{{\n                    getTypeIcon(mappingMeta.type || \"text\")\n                  }}</mat-icon>\n                  <span>{{ tx('Meta (Detail/Side)') }}</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>\n                {{\n                  mappingMetaFields.length\n                    ? tx('Composed field ({{count}})', { count: mappingMetaFields.length })\n                    : mappingMeta.field || tx('Not mapped')\n                }}\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\">{{ tx('Composition mode') }}</div>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Fields to compose (multi-select)') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingMetaFields\"\n                    multiple\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                      f\n                    }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <div\n                  class=\"g g-1-1 ai-center gap-12\"\n                  *ngIf=\"mappingMetaFields.length\"\n                >\n                  <mat-form-field appearance=\"outline\">\n                    <mat-label>{{ tx('Separator') }}</mat-label>\n                    <input\n                      matInput\n                      [(ngModel)]=\"mappingMetaSeparator\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                    />\n                  </mat-form-field>\n                  <mat-slide-toggle\n                    [(ngModel)]=\"mappingMetaWrapSecondInParens\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    {{ tx('(Second) in parentheses') }}\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>{{ tx('Single field') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingMeta.field\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option [value]=\"undefined\">{{ tx('-- None --') }}</mat-option>\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                      f\n                    }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Type') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingMeta.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of metaTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ tx(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\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingMeta\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingMeta\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"currency\") {\n                  <praxis-meta-editor-currency\n                    [model]=\"mappingMeta\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-currency>\n                }\n                @case (\"date\") {\n                  <praxis-meta-editor-date\n                    [model]=\"mappingMeta\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-date>\n                }\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()\"\n                  ></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()\"\n                  ></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()\"\n                  ></praxis-meta-editor-icon>\n                }\n                @case (\"image\") {\n                  <praxis-meta-editor-image\n                    [model]=\"mappingMeta\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-image>\n                }\n              }\n\n              <!-- Advanced -->\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header\n                  ><mat-panel-title>{{ tx('Advanced options') }}</mat-panel-title\n                  ></mat-expansion-panel-header\n                >\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field appearance=\"outline\">\n                    <mat-label>{{ tx('Position') }}</mat-label>\n                    <mat-select\n                      [(ngModel)]=\"mappingMeta.placement\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                    >\n                      <mat-option value=\"side\">{{ tx('Side (right)') }}</mat-option>\n                      <mat-option value=\"line\">{{ tx('Inline (below)') }}</mat-option>\n                    </mat-select>\n                  </mat-form-field>\n                  <mat-form-field appearance=\"outline\">\n                    <mat-label>{{ tx('CSS class') }}</mat-label>\n                    <input\n                      matInput\n                      [(ngModel)]=\"mappingMeta.class\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                    />\n                  </mat-form-field>\n                  <mat-form-field appearance=\"outline\">\n                    <mat-label>{{ tx('Style') }}</mat-label>\n                    <input\n                      matInput\n                      [(ngModel)]=\"mappingMeta.style\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                    />\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>{{\n                    getTypeIcon(mappingTrailing.type || \"text\")\n                  }}</mat-icon>\n                  <span>{{ tx('Trailing (right)') }}</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{\n                mappingTrailing.field || tx('Not mapped')\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>{{ tx('Field') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingTrailing.field\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option [value]=\"undefined\">{{ tx('-- None --') }}</mat-option>\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                      f\n                    }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Type') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingTrailing.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of trailingTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ tx(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\">{{ tx('Presets') }}</span>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingTrailing.type = 'chip';\n                    mappingTrailing.chipColor = 'primary';\n                    mappingTrailing.chipVariant = 'filled';\n                    mappingTrailing.field = 'status';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Status chip') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingTrailing.type = 'icon';\n                    mappingTrailing.field = 'status';\n                    mappingTrailing.iconColor = 'primary';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Status icon') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"applyPricePreset()\"\n                >\n                  {{ tx('Price') }}\n                </button>\n              </div>\n\n              @switch (mappingTrailing.type) {\n                @case (\"text\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingTrailing\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingTrailing\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"currency\") {\n                  <praxis-meta-editor-currency\n                    [model]=\"mappingTrailing\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-currency>\n                }\n                @case (\"date\") {\n                  <praxis-meta-editor-date\n                    [model]=\"mappingTrailing\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-date>\n                }\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()\"\n                  ></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()\"\n                  ></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()\"\n                  ></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>{{ tx('URL / Expr') }}</mat-label>\n                      <input\n                        matInput\n                        [(ngModel)]=\"mappingTrailing.imageUrl\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                        [placeholder]=\"tx('https://... or ${item.imageUrl}')\"\n                      />\n                      <button\n                        mat-icon-button\n                        matSuffix\n                        type=\"button\"\n                        class=\"help-icon-button\"\n                        [matTooltip]=\"tx('Use an absolute/relative URL or a ${item.field} expression.')\"\n                      >\n                        <mat-icon>help_outline</mat-icon>\n                      </button>\n                      <mat-error\n                        *ngIf=\"\n                          isImageUrlRequiredInvalid(mappingTrailing.imageUrl)\n                        \"\n                        >{{ tx('URL/expr is required') }}</mat-error\n                      >\n                    </mat-form-field>\n                  </div>\n                  <praxis-meta-editor-image\n                    [model]=\"mappingTrailing\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-image>\n                  <div\n                    class=\"text-caption muted\"\n                    *ngIf=\"!mappingTrailing.imageUrl\"\n                  >\n                    {{ tx('Set the URL/expr to render the image.') }}\n                  </div>\n                }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header\n                  ><mat-panel-title>{{ tx('Style') }}</mat-panel-title\n                  ></mat-expansion-panel-header\n                >\n                <div class=\"g gap-12 pt-12\">\n                  <div class=\"g g-1-1 gap-12\">\n                    <mat-form-field appearance=\"outline\"\n                      ><mat-label>{{ tx('Class') }}</mat-label\n                      ><input\n                        matInput\n                        [(ngModel)]=\"mappingTrailing.class\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                    /></mat-form-field>\n                    <mat-form-field appearance=\"outline\"\n                      ><mat-label>{{ tx('Style') }}</mat-label\n                      ><input\n                        matInput\n                        [(ngModel)]=\"mappingTrailing.style\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                    /></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]=\"\n              !!mappingLeading.field ||\n              (mappingLeading.type === 'icon' && !!mappingLeading.icon) ||\n              (mappingLeading.type === 'image' && !!mappingLeading.imageUrl)\n            \"\n          >\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>{{ tx('Leading (left)') }}</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>\n                {{\n                  mappingLeading.type === \"icon\"\n                    ? mappingLeading.icon || tx('Static icon')\n                    : mappingLeading.field ||\n                      (mappingLeading.imageUrl\n                        ? tx('Static image')\n                        : tx('Not mapped'))\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>{{ tx('Type') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingLeading.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of leadingTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ tx(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\n                  appearance=\"outline\"\n                  *ngIf=\"\n                    mappingLeading.type !== 'icon' &&\n                    mappingLeading.type !== 'image'\n                  \"\n                >\n                  <mat-label>{{ tx('Field') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingLeading.field\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                      f\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\">{{ tx('Presets') }}</span>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingLeading.type = 'icon';\n                    mappingLeading.icon = 'person';\n                    mappingLeading.iconColor = 'primary';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Avatar icon') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingLeading.type = 'image';\n                    mappingLeading.imageUrl = 'https://placehold.co/64x64';\n                    mappingLeading.imageAlt = 'Avatar';\n                    mappingLeading.badgeText = '${item.status}';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Avatar image + badge') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingLeading.type = 'chip';\n                    mappingLeading.field = 'tag';\n                    mappingLeading.chipColor = 'accent';\n                    mappingLeading.chipVariant = 'filled';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Tag chip') }}\n                </button>\n              </div>\n\n              <!-- Icon Specific -->\n              <div\n                class=\"g g-1-auto gap-12 ai-center\"\n                *ngIf=\"mappingLeading.type === 'icon'\"\n              >\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Icon') }}</mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"mappingLeading.icon\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  />\n                  <button mat-icon-button matSuffix (click)=\"pickLeadingIcon()\">\n                    <mat-icon>search</mat-icon>\n                  </button>\n                </mat-form-field>\n                <div class=\"text-caption muted\">\n                  {{ tx('Use the `|iconMap` pipe in the extra pipe for dynamic rendering.') }}\n                </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()\"\n                ></praxis-meta-editor-icon>\n              </div>\n\n              <!-- Image Specific -->\n              <div\n                class=\"g g-1-1 gap-12\"\n                *ngIf=\"mappingLeading.type === 'image'\"\n              >\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Image URL') }}</mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"mappingLeading.imageUrl\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                    [placeholder]=\"tx('https://... or ${item.imageUrl}')\"\n                  />\n                  <button\n                    mat-icon-button\n                    matSuffix\n                    type=\"button\"\n                    class=\"help-icon-button\"\n                    [matTooltip]=\"tx('Use an absolute/relative URL or a ${item.field} expression.')\"\n                  >\n                    <mat-icon>help_outline</mat-icon>\n                  </button>\n                  <mat-error\n                    *ngIf=\"isImageUrlRequiredInvalid(mappingLeading.imageUrl)\"\n                    >{{ tx('URL/expr is required') }}</mat-error\n                  >\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Alt text') }}</mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"mappingLeading.imageAlt\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  />\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Badge text') }}</mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"mappingLeading.badgeText\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  />\n                </mat-form-field>\n              </div>\n\n              @switch (mappingLeading.type) {\n                @case (\"text\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingLeading\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingLeading\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\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()\"\n                  ></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()\"\n                  ></praxis-meta-editor-rating>\n                }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header\n                  ><mat-panel-title>{{ tx('Style') }}</mat-panel-title\n                  ></mat-expansion-panel-header\n                >\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field appearance=\"outline\"\n                    ><mat-label>{{ tx('Class') }}</mat-label\n                    ><input\n                      matInput\n                      [(ngModel)]=\"mappingLeading.class\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                  /></mat-form-field>\n                  <mat-form-field appearance=\"outline\"\n                    ><mat-label>{{ tx('Style') }}</mat-label\n                    ><input\n                      matInput\n                      [(ngModel)]=\"mappingLeading.style\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                  /></mat-form-field>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n\n          <!-- Features -->\n          <mat-expansion-panel\n            [expanded]=\"featuresVisible && features.length > 0\"\n          >\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>{{ tx('Features') }}</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description\n                >{{ features.length }} item(s)</mat-panel-description\n              >\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\n                  [(ngModel)]=\"featuresVisible\"\n                  (ngModelChange)=\"onFeaturesChanged()\"\n                  >{{ tx('Enable features') }}</mat-slide-toggle\n                >\n                <mat-slide-toggle\n                  [(ngModel)]=\"featuresSyncWithMeta\"\n                  (ngModelChange)=\"onMappingChanged()\"\n                  >{{ tx('Sync with Meta') }}</mat-slide-toggle\n                >\n                <span class=\"flex-1\"></span>\n                <mat-button-toggle-group\n                  [(ngModel)]=\"featuresMode\"\n                  (change)=\"onFeaturesChanged()\"\n                  appearance=\"legacy\"\n                >\n                  <mat-button-toggle value=\"icons+labels\"\n                    ><mat-icon>view_list</mat-icon></mat-button-toggle\n                  >\n                  <mat-button-toggle value=\"icons-only\"\n                    ><mat-icon>more_horiz</mat-icon></mat-button-toggle\n                  >\n                </mat-button-toggle-group>\n              </div>\n\n              <div\n                *ngFor=\"let f of features; let i = index\"\n                class=\"g g-auto-1 gap-8 ai-center p-8 border rounded mb-2\"\n              >\n                <button mat-icon-button (click)=\"pickFeatureIcon(i)\">\n                  <mat-icon>{{ f.icon || \"search\" }}</mat-icon>\n                </button>\n                <mat-form-field\n                  appearance=\"outline\"\n                  class=\"dense-form-field no-sub\"\n                >\n                  <input\n                    matInput\n                    [(ngModel)]=\"f.expr\"\n                    (ngModelChange)=\"onFeaturesChanged()\"\n                    [placeholder]=\"tx('Expression/Text')\"\n                  />\n                </mat-form-field>\n                <button mat-icon-button color=\"warn\" (click)=\"removeFeature(i)\">\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </div>\n              <button mat-button color=\"primary\" (click)=\"addFeature()\">\n                <mat-icon>add</mat-icon> {{ tx('Add feature') }}\n              </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>{{\n                    getTypeIcon(mappingSectionHeader.type)\n                  }}</mat-icon>\n                  <span>{{ tx('Section header') }}</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{\n                mappingSectionHeader.expr || tx('Not configured')\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>{{ tx('Type') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingSectionHeader.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of sectionHeaderTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ tx(mt.label) }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Expression (item.key)') }}</mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"mappingSectionHeader.expr\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                    placeholder=\"item.key\"\n                  />\n                </mat-form-field>\n              </div>\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">{{ tx('Presets') }}</span>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingSectionHeader.type = 'text';\n                    mappingSectionHeader.expr = '${item.key}';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Default text') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingSectionHeader.type = 'chip';\n                    mappingSectionHeader.chipColor = 'primary';\n                    mappingSectionHeader.chipVariant = 'filled';\n                    mappingSectionHeader.expr = '${item.key}';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Default chip') }}\n                </button>\n              </div>\n\n              @switch (mappingSectionHeader.type) {\n                @case (\"text\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingSectionHeader\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingSectionHeader\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\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()\"\n                  ></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()\"\n                  ></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()\"\n                  ></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>{{ tx('Image URL') }}</mat-label>\n                      <input\n                        matInput\n                        [(ngModel)]=\"mappingSectionHeader.imageUrl\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                      />\n                      <mat-error\n                        *ngIf=\"\n                          isImageUrlRequiredInvalid(\n                            mappingSectionHeader.imageUrl\n                          )\n                        \"\n                        >{{ tx('URL/expr is required') }}</mat-error\n                      >\n                    </mat-form-field>\n                  </div>\n                  <div\n                    class=\"text-caption muted\"\n                    *ngIf=\"!mappingSectionHeader.imageUrl\"\n                  >\n                    {{ tx('Set the URL/expr to render the image.') }}\n                  </div>\n                  <praxis-meta-editor-image\n                    [model]=\"mappingSectionHeader\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-image>\n                }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header\n                  ><mat-panel-title>{{ tx('Style') }}</mat-panel-title\n                  ></mat-expansion-panel-header\n                >\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field appearance=\"outline\"\n                    ><mat-label>{{ tx('Class') }}</mat-label\n                    ><input\n                      matInput\n                      [(ngModel)]=\"mappingSectionHeader.class\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                  /></mat-form-field>\n                  <mat-form-field appearance=\"outline\"\n                    ><mat-label>{{ tx('Style') }}</mat-label\n                    ><input\n                      matInput\n                      [(ngModel)]=\"mappingSectionHeader.style\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                  /></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>{{ tx('Empty state') }}</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{\n                mappingEmptyState.expr || tx('Default')\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>{{ tx('Type') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingEmptyState.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of emptyStateTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ tx(mt.label) }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Message / Expr') }}</mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"mappingEmptyState.expr\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  />\n                </mat-form-field>\n              </div>\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">{{ tx('Presets') }}</span>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingEmptyState.type = 'text';\n                    mappingEmptyState.expr = tx('No items available');\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Default message') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingEmptyState.type = 'image';\n                    mappingEmptyState.imageUrl = '/list-empty-state.svg';\n                    mappingEmptyState.imageAlt = tx('No results');\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Default image') }}\n                </button>\n              </div>\n\n              @switch (mappingEmptyState.type) {\n                @case (\"text\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingEmptyState\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingEmptyState\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\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()\"\n                  ></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()\"\n                  ></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()\"\n                  ></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>{{ tx('Image URL') }}</mat-label\n                      ><input\n                        matInput\n                        [(ngModel)]=\"mappingEmptyState.imageUrl\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                      />\n                      <mat-error\n                        *ngIf=\"\n                          isImageUrlRequiredInvalid(mappingEmptyState.imageUrl)\n                        \"\n                        >{{ tx('URL/expr is required') }}</mat-error\n                      >\n                    </mat-form-field>\n                  </div>\n                  <div\n                    class=\"text-caption muted\"\n                    *ngIf=\"!mappingEmptyState.imageUrl\"\n                  >\n                    {{ tx('Set the URL/expr to render the image.') }}\n                  </div>\n                  <praxis-meta-editor-image\n                    [model]=\"mappingEmptyState\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-image>\n                }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header\n                    ><mat-panel-title>{{ tx('Style') }}</mat-panel-title\n                  ></mat-expansion-panel-header\n                >\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field appearance=\"outline\"\n                    ><mat-label>{{ tx('Class') }}</mat-label\n                    ><input\n                      matInput\n                      [(ngModel)]=\"mappingEmptyState.class\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                  /></mat-form-field>\n                  <mat-form-field appearance=\"outline\"\n                    ><mat-label>{{ tx('Style') }}</mat-label\n                    ><input\n                      matInput\n                      [(ngModel)]=\"mappingEmptyState.style\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                  /></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()\">\n          {{ tx('Apply mapping') }}\n        </button>\n        <button\n          mat-button\n          (click)=\"inferFromFields()\"\n          [disabled]=\"!fields.length\"\n        >\n          {{ tx('Infer from schema') }}\n        </button>\n        <div class=\"g g-auto-220 gap-12 ai-end mt-12\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>{{ tx('Skeleton count') }}</mat-label>\n            <input\n              matInput\n              type=\"number\"\n              min=\"0\"\n              [(ngModel)]=\"skeletonCountInput\"\n              (ngModelChange)=\"onSkeletonChanged($event)\"\n            />\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\">{{ tx('Theme preview') }}</span>\n            <mat-button-toggle-group\n              [(ngModel)]=\"skinPreviewTheme\"\n              (change)=\"onSkinChanged()\"\n              appearance=\"legacy\"\n            >\n              <mat-button-toggle [value]=\"'light'\">{{ tx('Light') }}</mat-button-toggle>\n              <mat-button-toggle [value]=\"'dark'\">{{ tx('Dark') }}</mat-button-toggle>\n              <mat-button-toggle [value]=\"'grid'\">{{ tx('Grid') }}</mat-button-toggle>\n            </mat-button-toggle-group>\n          </div>\n          <div class=\"skin-preview-wrap\">\n            <praxis-list-skin-preview\n              [config]=\"working\"\n              [items]=\"previewData\"\n              [theme]=\"skinPreviewTheme\"\n            ></praxis-list-skin-preview>\n          </div>\n        </div>\n      </div>\n    </div>\n  </mat-tab>\n  <mat-tab [label]=\"tx('i18n/A11y')\">\n    <div\n      class=\"editor-content grid gap-3\"\n      *ngIf=\"working?.a11y && working?.events\"\n    >\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Default locale') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.i18n.locale\"\n          (ngModelChange)=\"markDirty()\"\n          [placeholder]=\"tx('e.g.: en-US')\"\n        />\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Default currency') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.i18n.currency\"\n          (ngModelChange)=\"markDirty()\"\n          [placeholder]=\"currencyPlaceholder()\"\n        />\n      </mat-form-field>\n      <mat-divider class=\"my-8\"></mat-divider>\n      <div class=\"subtitle\">{{ tx('Accessibility') }}</div>\n      <div class=\"g g-auto-220 gap-12 ai-end\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('aria-label') }}</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working!.a11y!.ariaLabel\"\n            (ngModelChange)=\"markDirty()\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('aria-labelledby') }}</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working!.a11y!.ariaLabelledBy\"\n            (ngModelChange)=\"markDirty()\"\n          />\n        </mat-form-field>\n      </div>\n      <div class=\"g g-auto-220 gap-12 ai-end\">\n        <mat-slide-toggle\n          [(ngModel)]=\"working!.a11y!.highContrast\"\n          (ngModelChange)=\"markDirty()\"\n          >{{ tx('High contrast') }}</mat-slide-toggle\n        >\n        <mat-slide-toggle\n          [(ngModel)]=\"working!.a11y!.reduceMotion\"\n          (ngModelChange)=\"markDirty()\"\n          >{{ tx('Reduce motion') }}</mat-slide-toggle\n        >\n      </div>\n      <mat-divider class=\"my-8\"></mat-divider>\n      <div class=\"subtitle\">{{ tx('Events') }}</div>\n      <div class=\"g g-auto-220 gap-12 ai-end\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('itemClick') }}</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working!.events!.itemClick\"\n            (ngModelChange)=\"markDirty()\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>actionClick</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working!.events!.actionClick\"\n            (ngModelChange)=\"markDirty()\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>selectionChange</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working!.events!.selectionChange\"\n            (ngModelChange)=\"markDirty()\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>loaded</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working!.events!.loaded\"\n            (ngModelChange)=\"markDirty()\"\n          />\n        </mat-form-field>\n      </div>\n    </div>\n  </mat-tab>\n  <mat-tab [label]=\"tx('Selection')\">\n    <div class=\"editor-content grid gap-3\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Mode') }}</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.selection.mode\"\n          (ngModelChange)=\"onSelectionChanged()\"\n        >\n          <mat-option value=\"none\">{{ tx('No selection') }}</mat-option>\n          <mat-option value=\"single\">{{ tx('Single') }}</mat-option>\n          <mat-option value=\"multiple\">{{ tx('Multiple') }}</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Form name') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.selection.formControlName\"\n          (ngModelChange)=\"onSelectionChanged()\"\n        />\n        <button\n          mat-icon-button\n          matSuffix\n          type=\"button\"\n          class=\"help-icon-button\"\n          matTooltip=\"formControlName\"\n        >\n          <mat-icon>help_outline</mat-icon>\n        </button>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Form path') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.selection.formControlPath\"\n          (ngModelChange)=\"onSelectionChanged()\"\n        />\n        <button\n          mat-icon-button\n          matSuffix\n          type=\"button\"\n          class=\"help-icon-button\"\n          matTooltip=\"formControlPath\"\n        >\n          <mat-icon>help_outline</mat-icon>\n        </button>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Compare by (field)') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.selection.compareBy\"\n          (ngModelChange)=\"onSelectionChanged()\"\n        />\n        <button\n          mat-icon-button\n          matSuffix\n          type=\"button\"\n          class=\"help-icon-button\"\n          [matTooltip]=\"tx('Unique item key.')\"\n        >\n          <mat-icon>help_outline</mat-icon>\n        </button>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Return') }}</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.selection.return\"\n          (ngModelChange)=\"onSelectionChanged()\"\n        >\n          <mat-option value=\"value\">{{ tx('Value') }}</mat-option>\n          <mat-option value=\"item\">{{ tx('Item') }}</mat-option>\n          <mat-option value=\"id\">{{ tx('ID') }}</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n  </mat-tab>\n  <mat-tab [label]=\"tx('Appearance')\">\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')\">\n          {{ tx('Pill Soft') }}\n        </button>\n        <button mat-button (click)=\"applySkinPreset('gradient-tile')\">\n          {{ tx('Gradient Tile') }}\n        </button>\n        <button mat-button (click)=\"applySkinPreset('glass')\">\n          {{ tx('Glass') }}\n        </button>\n        <button mat-button (click)=\"applySkinPreset('elevated')\">\n          {{ tx('Elevated') }}\n        </button>\n        <button mat-button (click)=\"applySkinPreset('outline')\">\n          {{ tx('Outline') }}\n        </button>\n        <button mat-button (click)=\"applySkinPreset('flat')\">\n          {{ tx('Flat') }}\n        </button>\n        <button mat-button (click)=\"applySkinPreset('neumorphism')\">\n          {{ tx('Neumorphism') }}\n        </button>\n      </div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Style') }}</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.skin.type\"\n          (ngModelChange)=\"onSkinTypeChanged($event)\"\n        >\n          <mat-option value=\"pill-soft\">{{ tx('Pill Soft') }}</mat-option>\n          <mat-option value=\"gradient-tile\">{{ tx('Gradient Tile') }}</mat-option>\n          <mat-option value=\"glass\">{{ tx('Glass') }}</mat-option>\n          <mat-option value=\"elevated\">{{ tx('Elevated') }}</mat-option>\n          <mat-option value=\"outline\">{{ tx('Outline') }}</mat-option>\n          <mat-option value=\"flat\">{{ tx('Flat') }}</mat-option>\n          <mat-option value=\"neumorphism\">{{ tx('Neumorphism') }}</mat-option>\n          <mat-option value=\"custom\">{{ tx('Custom') }}</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Radius') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.skin.radius\"\n          (ngModelChange)=\"onSkinChanged()\"\n          [placeholder]=\"tx('e.g.: 1.25rem')\"\n        />\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Shadow') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.skin.shadow\"\n          (ngModelChange)=\"onSkinChanged()\"\n          [placeholder]=\"tx('e.g.: var(--md-sys-elevation-level2)')\"\n        />\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Border') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.skin.border\"\n          (ngModelChange)=\"onSkinChanged()\"\n        />\n      </mat-form-field>\n      <mat-form-field\n        *ngIf=\"working.skin.type === 'glass'\"\n        appearance=\"outline\"\n      >\n        <mat-label>{{ tx('Blur') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.skin.backdropBlur\"\n          (ngModelChange)=\"onSkinChanged()\"\n          [placeholder]=\"tx('e.g.: 8px')\"\n        />\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>{{ tx('Gradient from') }}</mat-label>\n          <input\n            matInput\n            [ngModel]=\"working.skin.gradient.from || ''\"\n            (ngModelChange)=\"onSkinGradientChanged('from', $event)\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Gradient to') }}</mat-label>\n          <input\n            matInput\n            [ngModel]=\"working.skin.gradient.to || ''\"\n            (ngModelChange)=\"onSkinGradientChanged('to', $event)\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Angle') }}</mat-label>\n          <input\n            matInput\n            type=\"number\"\n            [ngModel]=\"working.skin.gradient.angle ?? 135\"\n            (ngModelChange)=\"onSkinGradientChanged('angle', $event)\"\n          />\n        </mat-form-field>\n      </div>\n\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Extra CSS class (skin.class)') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.skin.class\"\n          (ngModelChange)=\"onSkinChanged()\"\n          [placeholder]=\"tx('e.g.: my-list-skin')\"\n        />\n      </mat-form-field>\n\n      <div\n        *ngIf=\"working.skin.type === 'custom'\"\n        class=\"g g-auto-220 gap-12 ai-end\"\n      >\n        <mat-form-field appearance=\"outline\" class=\"w-full\">\n          <mat-label>{{ tx('Inline style (skin.inlineStyle)') }}</mat-label>\n          <textarea\n            matInput\n            rows=\"4\"\n            [(ngModel)]=\"working.skin.inlineStyle\"\n            (ngModelChange)=\"onSkinChanged()\"\n            [attr.placeholder]=\"':host{--p-list-radius: 1rem}'\"\n          ></textarea>\n        </mat-form-field>\n        <div class=\"text-caption\">\n          {{ tx('CSS class example (add this to your global styles):') }}\n          <pre class=\"code-block\">\n.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          >\n        </div>\n      </div>\n    </div>\n  </mat-tab>\n</mat-tab-group>\n\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"] }, { kind: "component", type: SurfaceOpenActionEditorComponent, selector: "praxis-surface-open-action-editor", inputs: ["value", "hostKind"], outputs: ["valueChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisListConfigEditor, decorators: [{
             type: Component,
-            args: [{ selector: 'praxis-list-config-editor', standalone: true, imports: [
+            args: [{ selector: 'praxis-list-config-editor', standalone: true, providers: [
+                        providePraxisI18nConfig(SURFACE_OPEN_I18N_CONFIG),
+                        providePraxisListI18n(),
+                    ], imports: [
                         CommonModule,
                         FormsModule,
                         MatTabsModule,
@@ -5012,7 +5729,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         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\">\n          Observa\u00E7\u00E3o: ajustes aplicados pelo assistente substituem o objeto de\n          configura\u00E7\u00E3o inteiro.\n        </div>\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"help-icon-button\"\n          matTooltip=\"O applyConfigFromAdapter n\u00E3o faz merge profundo. Garanta que o adapter envie a config completa.\"\n        >\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\n          matInput\n          [(ngModel)]=\"working.dataSource.resourcePath\"\n          (ngModelChange)=\"onResourcePathChange($event)\"\n          placeholder=\"ex.: users\"\n        />\n        <button\n          mat-icon-button\n          matSuffix\n          type=\"button\"\n          class=\"help-icon-button\"\n          matTooltip=\"Endpoint do recurso (resourcePath).\"\n        >\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\n          matInput\n          rows=\"3\"\n          [(ngModel)]=\"queryJson\"\n          (ngModelChange)=\"onQueryChanged($event)\"\n          placeholder='ex.: &#123;\"status\":\"active\",\"department\":\"sales\"&#125;'\n        ></textarea>\n        <button\n          mat-icon-button\n          matSuffix\n          type=\"button\"\n          class=\"help-icon-button\"\n          matTooltip=\"Opcional. Use JSON v\u00E1lido para filtros iniciais.\"\n          *ngIf=\"!queryError\"\n        >\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\n            [(ngModel)]=\"sortField\"\n            (ngModelChange)=\"updateSortConfig()\"\n          >\n            <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n              f\n            }}</mat-option>\n          </mat-select>\n          <button\n            mat-icon-button\n            matSuffix\n            type=\"button\"\n            class=\"help-icon-button\"\n            matTooltip=\"Campo base do recurso.\"\n          >\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\n            [(ngModel)]=\"sortDir\"\n            (ngModelChange)=\"updateSortConfig()\"\n          >\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      >\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\">\n          Configure bot\u00F5es de a\u00E7\u00E3o por item (\u00EDcone, r\u00F3tulo, cor, visibilidade)\n        </div>\n        <button mat-flat-button color=\"primary\" (click)=\"addAction()\">\n          Adicionar a\u00E7\u00E3o\n        </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\n            [(ngModel)]=\"selectedGlobalActionId\"\n            (ngModelChange)=\"onGlobalActionSelected($event)\"\n          >\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\n            *ngIf=\"!globalActionCatalog.length\"\n            class=\"text-caption muted\"\n            >Nenhuma a\u00E7\u00E3o global registrada.</mat-hint\n          >\n        </mat-form-field>\n        <div class=\"muted text-caption\">\n          Selecione para adicionar com `command` global.\n        </div>\n      </div>\n      <div\n        *ngFor=\"let a of working.actions || []; let i = index\"\n        class=\"g g-auto-200 gap-12 ai-end\"\n      >\n        <mat-form-field appearance=\"outline\">\n          <mat-label>ID</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"a.id\"\n            (ngModelChange)=\"onActionsChanged()\"\n          />\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\n            matInput\n            [(ngModel)]=\"a.icon\"\n            (ngModelChange)=\"onActionsChanged()\"\n            placeholder=\"ex.: edit, delete\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Command (global)</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"a.command\"\n            (ngModelChange)=\"onActionsChanged()\"\n            placeholder=\"global:toast.success\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>R\u00F3tulo</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"a.label\"\n            (ngModelChange)=\"onActionsChanged()\"\n          />\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\n              [(ngModel)]=\"a.buttonVariant\"\n              (ngModelChange)=\"onActionsChanged()\"\n            >\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\n            [(ngModel)]=\"a.color\"\n            (ngModelChange)=\"onActionsChanged()\"\n          >\n            <mat-option *ngFor=\"let c of paletteOptions\" [value]=\"c.value\">\n              <span\n                class=\"color-dot\"\n                [style.background]=\"colorDotBackground(c.value)\"\n              ></span\n              >{{ c.label }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n        <div\n          class=\"g gap-8\"\n          *ngIf=\"isCustomColor(a.color); else actionCustomBtn\"\n        >\n          <pdx-color-picker\n            label=\"Cor personalizada\"\n            [format]=\"'hex'\"\n            [(ngModel)]=\"a.color\"\n            (ngModelChange)=\"onActionsChanged()\"\n          ></pdx-color-picker>\n        </div>\n        <ng-template #actionCustomBtn>\n          <button\n            mat-stroked-button\n            type=\"button\"\n            (click)=\"enableCustomActionColor(a)\"\n          >\n            Usar cor personalizada\n          </button>\n        </ng-template>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Payload da a\u00E7\u00E3o</mat-label>\n          <mat-select\n            [(ngModel)]=\"a.emitPayload\"\n            (ngModelChange)=\"onActionsChanged()\"\n          >\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\n            mat-icon-button\n            matSuffix\n            type=\"button\"\n            class=\"help-icon-button\"\n            matTooltip=\"emitPayload\"\n          >\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\n            >Exibir quando (ex.: &#36;&#123;item.status&#125; ==\n            'done')</mat-label\n          >\n          <input\n            matInput\n            [(ngModel)]=\"a.showIf\"\n            (ngModelChange)=\"onActionsChanged()\"\n          />\n          <button\n            mat-icon-button\n            matSuffix\n            type=\"button\"\n            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          >\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\n            *ngIf=\"(a.kind || 'icon') === 'icon'\"\n            mat-icon-button\n            [color]=\"isThemeColor(a.color) ? a.color : undefined\"\n          >\n            <mat-icon\n              [praxisIcon]=\"a.icon || 'bolt'\"\n              [style.cssText]=\"iconStyle(a.color)\"\n            ></mat-icon>\n          </button>\n          <ng-container *ngIf=\"a.kind === 'button'\">\n            <button\n              *ngIf=\"a.buttonVariant === 'stroked'\"\n              mat-stroked-button\n              [color]=\"isThemeColor(a.color) ? a.color : undefined\"\n              [style.cssText]=\"buttonStyle(a.color, 'stroked')\"\n            >\n              {{ a.label || a.id || \"A\u00E7\u00E3o\" }}\n            </button>\n            <button\n              *ngIf=\"a.buttonVariant === 'raised'\"\n              mat-raised-button\n              [color]=\"isThemeColor(a.color) ? a.color : undefined\"\n              [style.cssText]=\"buttonStyle(a.color, 'raised')\"\n            >\n              {{ a.label || a.id || \"A\u00E7\u00E3o\" }}\n            </button>\n            <button\n              *ngIf=\"!a.buttonVariant || a.buttonVariant === 'flat'\"\n              mat-flat-button\n              [color]=\"isThemeColor(a.color) ? a.color : undefined\"\n              [style.cssText]=\"buttonStyle(a.color, 'flat')\"\n            >\n              {{ a.label || a.id || \"A\u00E7\u00E3o\" }}\n            </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)\">\n            Remover\n          </button>\n        </div>\n        <div class=\"g gap-8 col-span-2\" *ngIf=\"a.command\">\n          <mat-slide-toggle\n            [(ngModel)]=\"a.showLoading\"\n            (ngModelChange)=\"onActionsChanged()\"\n            >Mostrar loading</mat-slide-toggle\n          >\n          <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n            <mat-expansion-panel-header\n              ><mat-panel-title\n                >Confirma\u00E7\u00E3o</mat-panel-title\n              ></mat-expansion-panel-header\n            >\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\n                  [value]=\"a.confirmation?.type || ''\"\n                  (change)=\"applyConfirmationPreset(a, $event.value)\"\n                >\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\n                  matInput\n                  [ngModel]=\"a.confirmation?.title\"\n                  (ngModelChange)=\"setConfirmationField(a, 'title', $event)\"\n                />\n              </mat-form-field>\n              <mat-form-field appearance=\"outline\">\n                <mat-label>Mensagem</mat-label>\n                <input\n                  matInput\n                  [ngModel]=\"a.confirmation?.message\"\n                  (ngModelChange)=\"setConfirmationField(a, 'message', $event)\"\n                />\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>{{\n                    a.confirmation?.title || \"Confirmar a\u00E7\u00E3o\"\n                  }}</strong>\n                </div>\n                <div class=\"text-caption muted\">\n                  {{\n                    a.confirmation?.message ||\n                      \"Tem certeza que deseja continuar?\"\n                  }}\n                </div>\n                <div class=\"text-caption\">\n                  <span\n                    class=\"confirm-type\"\n                    [ngClass]=\"a.confirmation?.type || 'default'\"\n                    >Tipo: {{ a.confirmation?.type || \"padr\u00E3o\" }}</span\n                  >\n                </div>\n                <div\n                  class=\"text-caption muted\"\n                  *ngIf=\"!a.confirmation?.title && !a.confirmation?.message\"\n                >\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\n              matInput\n              rows=\"4\"\n              [(ngModel)]=\"a.globalPayload\"\n              (ngModelChange)=\"onActionsChanged()\"\n              placeholder='{\"message\":\"${item.name} favoritado\"}'\n            ></textarea>\n            <button\n              mat-icon-button\n              matSuffix\n              type=\"button\"\n              class=\"help-icon-button\"\n              [matTooltip]=\"globalPayloadSchemaTooltip(a)\"\n            >\n              <mat-icon>help_outline</mat-icon>\n            </button>\n            <mat-error *ngIf=\"isGlobalPayloadInvalid(a.globalPayload)\"\n              >JSON inv\u00E1lido</mat-error\n            >\n          </mat-form-field>\n          <div class=\"g row-flow gap-8 ai-center\">\n            <button\n              mat-stroked-button\n              type=\"button\"\n              (click)=\"applyGlobalPayloadExample(a)\"\n            >\n              Inserir exemplo\n            </button>\n            <span class=\"muted text-caption\">{{\n              globalPayloadExampleHint(a)\n            }}</span>\n          </div>\n          <mat-slide-toggle\n            [(ngModel)]=\"a.emitLocal\"\n            (ngModelChange)=\"onActionsChanged()\"\n            >Emitir evento local tamb\u00E9m</mat-slide-toggle\n          >\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')\">\n          Preset Tiles Moderno\n        </button>\n      </div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Variante</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.layout.variant\"\n          (ngModelChange)=\"onLayoutChanged()\"\n        >\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\n          [(ngModel)]=\"working.layout.model\"\n          (ngModelChange)=\"onLayoutChanged()\"\n        >\n          <ng-container\n            *ngIf=\"working.layout.variant === 'list'; else cardModels\"\n          >\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\n              *ngIf=\"working.layout.variant === 'tiles'; else cardsOnly\"\n            >\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\n          [(ngModel)]=\"working.layout.lines\"\n          (ngModelChange)=\"onLayoutChanged()\"\n        >\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\n          matInput\n          type=\"number\"\n          min=\"1\"\n          [(ngModel)]=\"working.layout.pageSize\"\n          (ngModelChange)=\"onPageSizeChange($event)\"\n        />\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Densidade</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.layout.density\"\n          (ngModelChange)=\"onLayoutChanged()\"\n        >\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\">\n        <mat-label>Espa\u00E7amento entre itens</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.layout.itemSpacing\"\n          (ngModelChange)=\"onLayoutChanged()\"\n        >\n          <mat-option value=\"none\">Sem espa\u00E7o extra</mat-option>\n          <mat-option value=\"tight\">Justo</mat-option>\n          <mat-option value=\"default\">Padr\u00E3o</mat-option>\n          <mat-option value=\"relaxed\">Relaxado</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field\n        appearance=\"outline\"\n        *ngIf=\"working.layout.variant !== 'tiles'\"\n      >\n        <mat-label>Divisores</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.layout.dividers\"\n          (ngModelChange)=\"onLayoutChanged()\"\n        >\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\n            [(ngModel)]=\"working.layout.groupBy\"\n            (ngModelChange)=\"onLayoutChanged()\"\n          >\n            <mat-option [value]=\"\">Nenhum</mat-option>\n            <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n              f\n            }}</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\n            matInput\n            [(ngModel)]=\"working.layout.groupBy\"\n            (ngModelChange)=\"onLayoutChanged()\"\n            placeholder=\"ex.: departamento\"\n          />\n        </mat-form-field>\n      </ng-template>\n      <mat-slide-toggle\n        [(ngModel)]=\"working.layout.stickySectionHeader\"\n        (ngModelChange)=\"onLayoutChanged()\"\n      >\n        Header de se\u00E7\u00E3o fixo\n      </mat-slide-toggle>\n      <mat-slide-toggle\n        [(ngModel)]=\"working.layout.virtualScroll\"\n        (ngModelChange)=\"onLayoutChanged()\"\n      >\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\n          [(ngModel)]=\"working.ui.showSearch\"\n          (ngModelChange)=\"onUiChanged()\"\n          >Mostrar busca</mat-slide-toggle\n        >\n        <mat-slide-toggle\n          [(ngModel)]=\"working.ui.showSort\"\n          (ngModelChange)=\"onUiChanged()\"\n          >Mostrar ordenar</mat-slide-toggle\n        >\n        <mat-slide-toggle\n          [(ngModel)]=\"working.ui.showRange\"\n          (ngModelChange)=\"onUiChanged()\"\n          >Mostrar faixa X\u2013Y de Total</mat-slide-toggle\n        >\n      </div>\n      <div\n        class=\"g g-auto-220 gap-12 ai-end mt-12\"\n        *ngIf=\"working.ui?.showSearch\"\n      >\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Campo para buscar</mat-label>\n          <mat-select\n            [(ngModel)]=\"working.ui.searchField\"\n            (ngModelChange)=\"onUiChanged()\"\n          >\n            <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n              f\n            }}</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\n            matInput\n            [(ngModel)]=\"working.ui.searchPlaceholder\"\n            (ngModelChange)=\"onUiChanged()\"\n            placeholder=\"ex.: Buscar por t\u00EDtulo\"\n          />\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()\">\n            Adicionar op\u00E7\u00E3o\n          </button>\n        </div>\n        <div\n          class=\"g g-auto-220 gap-12 ai-end mt-12\"\n          *ngFor=\"let r of uiSortRows; let i = index\"\n        >\n          <mat-form-field appearance=\"outline\">\n            <mat-label>R\u00F3tulo</mat-label>\n            <input\n              matInput\n              [(ngModel)]=\"r.label\"\n              (ngModelChange)=\"onUiSortRowsChanged()\"\n              placeholder=\"ex.: Mais recentes\"\n            />\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Campo</mat-label>\n            <mat-select\n              [(ngModel)]=\"r.field\"\n              (ngModelChange)=\"onUiSortRowsChanged()\"\n            >\n              <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                f\n              }}</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\n              [(ngModel)]=\"r.dir\"\n              (ngModelChange)=\"onUiSortRowsChanged()\"\n            >\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)\">\n            Op\u00E7\u00E3o duplicada (campo+dire\u00E7\u00E3o)\n          </div>\n          <div class=\"flex-end\">\n            <button mat-button color=\"warn\" (click)=\"removeUiSortRow(i)\">\n              Remover\n            </button>\n          </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>{{\n                mappingPrimary.field || \"N\u00E3o mapeado\"\n              }}</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\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingPrimary.type = 'text';\n                    mappingPrimary.field = 'name';\n                    onMappingChanged()\n                  \"\n                >\n                  Nome\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingPrimary.type = 'text';\n                    mappingPrimary.field = 'title';\n                    onMappingChanged()\n                  \"\n                >\n                  T\u00EDtulo\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingPrimary.type = 'text';\n                    mappingPrimary.field = 'name';\n                    mappingSecondary.type = 'text';\n                    mappingSecondary.field = 'role';\n                    onMappingChanged()\n                  \"\n                >\n                  Nome + Papel\n                </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\n                    [(ngModel)]=\"mappingPrimary.field\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                      f\n                    }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Tipo</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingPrimary.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of primaryTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\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\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingPrimary\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingPrimary\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"currency\") {\n                  <praxis-meta-editor-currency\n                    [model]=\"mappingPrimary\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-currency>\n                }\n                @case (\"date\") {\n                  <praxis-meta-editor-date\n                    [model]=\"mappingPrimary\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-date>\n                }\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\n                    appearance=\"outline\"\n                    *ngIf=\"\n                      mappingPrimary.type === 'text' ||\n                      mappingPrimary.type === 'html'\n                    \"\n                  >\n                    <mat-label>Classe CSS</mat-label>\n                    <input\n                      matInput\n                      [(ngModel)]=\"mappingPrimary.class\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                    />\n                  </mat-form-field>\n                  <mat-form-field\n                    appearance=\"outline\"\n                    *ngIf=\"\n                      mappingPrimary.type === 'text' ||\n                      mappingPrimary.type === 'html'\n                    \"\n                  >\n                    <mat-label>Estilo Inline</mat-label>\n                    <input\n                      matInput\n                      [(ngModel)]=\"mappingPrimary.style\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                    />\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\n                        matInput\n                        [(ngModel)]=\"mappingPrimary.class\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                      />\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>Estilo Inline</mat-label>\n                      <input\n                        matInput\n                        [(ngModel)]=\"mappingPrimary.style\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                      />\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>{{\n                mappingSecondary.field || \"N\u00E3o mapeado\"\n              }}</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\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingSecondary.type = 'text';\n                    mappingSecondary.field = 'subtitle';\n                    onMappingChanged()\n                  \"\n                >\n                  Subt\u00EDtulo\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingSecondary.type = 'date';\n                    mappingSecondary.field = 'hireDate';\n                    mappingSecondary.dateStyle = 'short';\n                    onMappingChanged()\n                  \"\n                >\n                  Data curta\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingSecondary.type = 'currency';\n                    mappingSecondary.field = 'salary';\n                    mappingSecondary.currencyCode = 'BRL';\n                    mappingSecondary.locale = 'pt-BR';\n                    onMappingChanged()\n                  \"\n                >\n                  Sal\u00E1rio\n                </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\n                    [(ngModel)]=\"mappingSecondary.field\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                      f\n                    }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Tipo</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingSecondary.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of secondaryTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\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\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingSecondary\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingSecondary\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"currency\") {\n                  <praxis-meta-editor-currency\n                    [model]=\"mappingSecondary\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-currency>\n                }\n                @case (\"date\") {\n                  <praxis-meta-editor-date\n                    [model]=\"mappingSecondary\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-date>\n                }\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\"\n                      ><mat-label>Classe CSS</mat-label\n                      ><input\n                        matInput\n                        [(ngModel)]=\"mappingSecondary.class\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                    /></mat-form-field>\n                    <mat-form-field appearance=\"outline\"\n                      ><mat-label>Estilo Inline</mat-label\n                      ><input\n                        matInput\n                        [(ngModel)]=\"mappingSecondary.style\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                    /></mat-form-field>\n                  </div>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n\n          <mat-expansion-panel\n            [expanded]=\"!!mappingMeta.field || mappingMetaFields.length > 0\"\n          >\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>{{\n                    getTypeIcon(mappingMeta.type || \"text\")\n                  }}</mat-icon>\n                  <span>Meta (Detalhe/Lateral)</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>\n                {{\n                  mappingMetaFields.length\n                    ? \"Campo composto (\" + mappingMetaFields.length + \")\"\n                    : mappingMeta.field || \"N\u00E3o mapeado\"\n                }}\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\n                    [(ngModel)]=\"mappingMetaFields\"\n                    multiple\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                      f\n                    }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <div\n                  class=\"g g-1-1 ai-center gap-12\"\n                  *ngIf=\"mappingMetaFields.length\"\n                >\n                  <mat-form-field appearance=\"outline\">\n                    <mat-label>Separador</mat-label>\n                    <input\n                      matInput\n                      [(ngModel)]=\"mappingMetaSeparator\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                    />\n                  </mat-form-field>\n                  <mat-slide-toggle\n                    [(ngModel)]=\"mappingMetaWrapSecondInParens\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\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\n                    [(ngModel)]=\"mappingMeta.field\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option [value]=\"undefined\">-- Nenhum --</mat-option>\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                      f\n                    }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Tipo</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingMeta.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of metaTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\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\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingMeta\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingMeta\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"currency\") {\n                  <praxis-meta-editor-currency\n                    [model]=\"mappingMeta\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-currency>\n                }\n                @case (\"date\") {\n                  <praxis-meta-editor-date\n                    [model]=\"mappingMeta\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-date>\n                }\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()\"\n                  ></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()\"\n                  ></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()\"\n                  ></praxis-meta-editor-icon>\n                }\n                @case (\"image\") {\n                  <praxis-meta-editor-image\n                    [model]=\"mappingMeta\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-image>\n                }\n              }\n\n              <!-- Advanced -->\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header\n                  ><mat-panel-title\n                    >Op\u00E7\u00F5es avan\u00E7adas</mat-panel-title\n                  ></mat-expansion-panel-header\n                >\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\n                      [(ngModel)]=\"mappingMeta.placement\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                    >\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\n                      matInput\n                      [(ngModel)]=\"mappingMeta.class\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                    />\n                  </mat-form-field>\n                  <mat-form-field appearance=\"outline\">\n                    <mat-label>Estilo</mat-label>\n                    <input\n                      matInput\n                      [(ngModel)]=\"mappingMeta.style\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                    />\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>{{\n                    getTypeIcon(mappingTrailing.type || \"text\")\n                  }}</mat-icon>\n                  <span>Trailing (Direita)</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{\n                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\n                    [(ngModel)]=\"mappingTrailing.field\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option [value]=\"undefined\">-- Nenhum --</mat-option>\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                      f\n                    }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Tipo</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingTrailing.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of trailingTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\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\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingTrailing.type = 'chip';\n                    mappingTrailing.chipColor = 'primary';\n                    mappingTrailing.chipVariant = 'filled';\n                    mappingTrailing.field = 'status';\n                    onMappingChanged()\n                  \"\n                >\n                  Status Chip\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingTrailing.type = 'icon';\n                    mappingTrailing.field = 'status';\n                    mappingTrailing.iconColor = 'primary';\n                    onMappingChanged()\n                  \"\n                >\n                  Status \u00CDcone\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingTrailing.type = 'currency';\n                    mappingTrailing.field = 'price';\n                    mappingTrailing.currencyCode = 'BRL';\n                    mappingTrailing.locale = 'pt-BR';\n                    onMappingChanged()\n                  \"\n                >\n                  Pre\u00E7o\n                </button>\n              </div>\n\n              @switch (mappingTrailing.type) {\n                @case (\"text\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingTrailing\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingTrailing\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"currency\") {\n                  <praxis-meta-editor-currency\n                    [model]=\"mappingTrailing\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-currency>\n                }\n                @case (\"date\") {\n                  <praxis-meta-editor-date\n                    [model]=\"mappingTrailing\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-date>\n                }\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()\"\n                  ></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()\"\n                  ></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()\"\n                  ></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\n                        matInput\n                        [(ngModel)]=\"mappingTrailing.imageUrl\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                        placeholder=\"https://... ou ${item.imageUrl}\"\n                      />\n                      <button\n                        mat-icon-button\n                        matSuffix\n                        type=\"button\"\n                        class=\"help-icon-button\"\n                        matTooltip=\"Use URL absoluta/relativa ou express\u00E3o ${item.campo}.\"\n                      >\n                        <mat-icon>help_outline</mat-icon>\n                      </button>\n                      <mat-error\n                        *ngIf=\"\n                          isImageUrlRequiredInvalid(mappingTrailing.imageUrl)\n                        \"\n                        >URL/expr obrigat\u00F3ria</mat-error\n                      >\n                    </mat-form-field>\n                  </div>\n                  <praxis-meta-editor-image\n                    [model]=\"mappingTrailing\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-image>\n                  <div\n                    class=\"text-caption muted\"\n                    *ngIf=\"!mappingTrailing.imageUrl\"\n                  >\n                    Defina a URL/expr para renderizar a imagem.\n                  </div>\n                }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header\n                  ><mat-panel-title\n                    >Estilo</mat-panel-title\n                  ></mat-expansion-panel-header\n                >\n                <div class=\"g gap-12 pt-12\">\n                  <div class=\"g g-1-1 gap-12\">\n                    <mat-form-field appearance=\"outline\"\n                      ><mat-label>Classe</mat-label\n                      ><input\n                        matInput\n                        [(ngModel)]=\"mappingTrailing.class\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                    /></mat-form-field>\n                    <mat-form-field appearance=\"outline\"\n                      ><mat-label>Style</mat-label\n                      ><input\n                        matInput\n                        [(ngModel)]=\"mappingTrailing.style\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                    /></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]=\"\n              !!mappingLeading.field ||\n              (mappingLeading.type === 'icon' && !!mappingLeading.icon) ||\n              (mappingLeading.type === 'image' && !!mappingLeading.imageUrl)\n            \"\n          >\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                {{\n                  mappingLeading.type === \"icon\"\n                    ? mappingLeading.icon || \"\u00CDcone est\u00E1tico\"\n                    : mappingLeading.field ||\n                      (mappingLeading.imageUrl\n                        ? \"Imagem est\u00E1tica\"\n                        : \"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\n                    [(ngModel)]=\"mappingLeading.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of leadingTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\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\n                  appearance=\"outline\"\n                  *ngIf=\"\n                    mappingLeading.type !== 'icon' &&\n                    mappingLeading.type !== 'image'\n                  \"\n                >\n                  <mat-label>Campo</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingLeading.field\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                      f\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\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingLeading.type = 'icon';\n                    mappingLeading.icon = 'person';\n                    mappingLeading.iconColor = 'primary';\n                    onMappingChanged()\n                  \"\n                >\n                  Avatar \u00CDcone\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingLeading.type = 'image';\n                    mappingLeading.imageUrl = 'https://placehold.co/64x64';\n                    mappingLeading.imageAlt = 'Avatar';\n                    mappingLeading.badgeText = '${item.status}';\n                    onMappingChanged()\n                  \"\n                >\n                  Avatar Imagem + Badge\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingLeading.type = 'chip';\n                    mappingLeading.field = 'tag';\n                    mappingLeading.chipColor = 'accent';\n                    mappingLeading.chipVariant = 'filled';\n                    onMappingChanged()\n                  \"\n                >\n                  Chip Tag\n                </button>\n              </div>\n\n              <!-- Icon Specific -->\n              <div\n                class=\"g g-1-auto gap-12 ai-center\"\n                *ngIf=\"mappingLeading.type === 'icon'\"\n              >\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>\u00CDcone</mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"mappingLeading.icon\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  />\n                  <button mat-icon-button matSuffix (click)=\"pickLeadingIcon()\">\n                    <mat-icon>search</mat-icon>\n                  </button>\n                </mat-form-field>\n                <div class=\"text-caption muted\">\n                  Use pipe <code>|iconMap</code> no extra pipe para din\u00E2mico\n                </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()\"\n                ></praxis-meta-editor-icon>\n              </div>\n\n              <!-- Image Specific -->\n              <div\n                class=\"g g-1-1 gap-12\"\n                *ngIf=\"mappingLeading.type === 'image'\"\n              >\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>URL da Imagem</mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"mappingLeading.imageUrl\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                    placeholder=\"https://... ou ${item.imageUrl}\"\n                  />\n                  <button\n                    mat-icon-button\n                    matSuffix\n                    type=\"button\"\n                    class=\"help-icon-button\"\n                    matTooltip=\"Use URL absoluta/relativa ou express\u00E3o ${item.campo}.\"\n                  >\n                    <mat-icon>help_outline</mat-icon>\n                  </button>\n                  <mat-error\n                    *ngIf=\"isImageUrlRequiredInvalid(mappingLeading.imageUrl)\"\n                    >URL/expr obrigat\u00F3ria</mat-error\n                  >\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Alt Text</mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"mappingLeading.imageAlt\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  />\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>Badge Texto</mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"mappingLeading.badgeText\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  />\n                </mat-form-field>\n              </div>\n\n              @switch (mappingLeading.type) {\n                @case (\"text\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingLeading\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingLeading\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\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()\"\n                  ></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()\"\n                  ></praxis-meta-editor-rating>\n                }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header\n                  ><mat-panel-title\n                    >Estilo</mat-panel-title\n                  ></mat-expansion-panel-header\n                >\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field appearance=\"outline\"\n                    ><mat-label>Classe</mat-label\n                    ><input\n                      matInput\n                      [(ngModel)]=\"mappingLeading.class\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                  /></mat-form-field>\n                  <mat-form-field appearance=\"outline\"\n                    ><mat-label>Style</mat-label\n                    ><input\n                      matInput\n                      [(ngModel)]=\"mappingLeading.style\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                  /></mat-form-field>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n\n          <!-- Features -->\n          <mat-expansion-panel\n            [expanded]=\"featuresVisible && features.length > 0\"\n          >\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\n                >{{ features.length }} item(s)</mat-panel-description\n              >\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\n                  [(ngModel)]=\"featuresVisible\"\n                  (ngModelChange)=\"onFeaturesChanged()\"\n                  >Ativar recursos</mat-slide-toggle\n                >\n                <mat-slide-toggle\n                  [(ngModel)]=\"featuresSyncWithMeta\"\n                  (ngModelChange)=\"onMappingChanged()\"\n                  >Sincronizar com Meta</mat-slide-toggle\n                >\n                <span class=\"flex-1\"></span>\n                <mat-button-toggle-group\n                  [(ngModel)]=\"featuresMode\"\n                  (change)=\"onFeaturesChanged()\"\n                  appearance=\"legacy\"\n                >\n                  <mat-button-toggle value=\"icons+labels\"\n                    ><mat-icon>view_list</mat-icon></mat-button-toggle\n                  >\n                  <mat-button-toggle value=\"icons-only\"\n                    ><mat-icon>more_horiz</mat-icon></mat-button-toggle\n                  >\n                </mat-button-toggle-group>\n              </div>\n\n              <div\n                *ngFor=\"let f of features; let i = index\"\n                class=\"g g-auto-1 gap-8 ai-center p-8 border rounded mb-2\"\n              >\n                <button mat-icon-button (click)=\"pickFeatureIcon(i)\">\n                  <mat-icon>{{ f.icon || \"search\" }}</mat-icon>\n                </button>\n                <mat-form-field\n                  appearance=\"outline\"\n                  class=\"dense-form-field no-sub\"\n                >\n                  <input\n                    matInput\n                    [(ngModel)]=\"f.expr\"\n                    (ngModelChange)=\"onFeaturesChanged()\"\n                    placeholder=\"Expr/Texto\"\n                  />\n                </mat-form-field>\n                <button mat-icon-button color=\"warn\" (click)=\"removeFeature(i)\">\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </div>\n              <button mat-button color=\"primary\" (click)=\"addFeature()\">\n                <mat-icon>add</mat-icon> Adicionar recurso\n              </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>{{\n                    getTypeIcon(mappingSectionHeader.type)\n                  }}</mat-icon>\n                  <span>Cabe\u00E7alho de Se\u00E7\u00E3o</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{\n                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\n                    [(ngModel)]=\"mappingSectionHeader.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of sectionHeaderTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\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\n                    matInput\n                    [(ngModel)]=\"mappingSectionHeader.expr\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                    placeholder=\"item.key\"\n                  />\n                </mat-form-field>\n              </div>\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">Presets</span>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingSectionHeader.type = 'text';\n                    mappingSectionHeader.expr = '${item.key}';\n                    onMappingChanged()\n                  \"\n                >\n                  Texto padr\u00E3o\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingSectionHeader.type = 'chip';\n                    mappingSectionHeader.chipColor = 'primary';\n                    mappingSectionHeader.chipVariant = 'filled';\n                    mappingSectionHeader.expr = '${item.key}';\n                    onMappingChanged()\n                  \"\n                >\n                  Chip padr\u00E3o\n                </button>\n              </div>\n\n              @switch (mappingSectionHeader.type) {\n                @case (\"text\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingSectionHeader\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingSectionHeader\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\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()\"\n                  ></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()\"\n                  ></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()\"\n                  ></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\n                        matInput\n                        [(ngModel)]=\"mappingSectionHeader.imageUrl\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                      />\n                      <mat-error\n                        *ngIf=\"\n                          isImageUrlRequiredInvalid(\n                            mappingSectionHeader.imageUrl\n                          )\n                        \"\n                        >URL/expr obrigat\u00F3ria</mat-error\n                      >\n                    </mat-form-field>\n                  </div>\n                  <div\n                    class=\"text-caption muted\"\n                    *ngIf=\"!mappingSectionHeader.imageUrl\"\n                  >\n                    Defina a URL/expr para renderizar a imagem.\n                  </div>\n                  <praxis-meta-editor-image\n                    [model]=\"mappingSectionHeader\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-image>\n                }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header\n                  ><mat-panel-title\n                    >Estilo</mat-panel-title\n                  ></mat-expansion-panel-header\n                >\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field appearance=\"outline\"\n                    ><mat-label>Classe</mat-label\n                    ><input\n                      matInput\n                      [(ngModel)]=\"mappingSectionHeader.class\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                  /></mat-form-field>\n                  <mat-form-field appearance=\"outline\"\n                    ><mat-label>Style</mat-label\n                    ><input\n                      matInput\n                      [(ngModel)]=\"mappingSectionHeader.style\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                  /></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>{{\n                mappingEmptyState.expr || \"Padr\u00E3o\"\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\n                    [(ngModel)]=\"mappingEmptyState.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of emptyStateTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\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\n                    matInput\n                    [(ngModel)]=\"mappingEmptyState.expr\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  />\n                </mat-form-field>\n              </div>\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">Presets</span>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingEmptyState.type = 'text';\n                    mappingEmptyState.expr = 'Nenhum item dispon\u00EDvel';\n                    onMappingChanged()\n                  \"\n                >\n                  Mensagem padr\u00E3o\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingEmptyState.type = 'image';\n                    mappingEmptyState.imageUrl = '/list-empty-state.svg';\n                    mappingEmptyState.imageAlt = 'Sem resultados';\n                    onMappingChanged()\n                  \"\n                >\n                  Imagem padr\u00E3o\n                </button>\n              </div>\n\n              @switch (mappingEmptyState.type) {\n                @case (\"text\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingEmptyState\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingEmptyState\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\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()\"\n                  ></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()\"\n                  ></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()\"\n                  ></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\n                        matInput\n                        [(ngModel)]=\"mappingEmptyState.imageUrl\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                      />\n                      <mat-error\n                        *ngIf=\"\n                          isImageUrlRequiredInvalid(mappingEmptyState.imageUrl)\n                        \"\n                        >URL/expr obrigat\u00F3ria</mat-error\n                      >\n                    </mat-form-field>\n                  </div>\n                  <div\n                    class=\"text-caption muted\"\n                    *ngIf=\"!mappingEmptyState.imageUrl\"\n                  >\n                    Defina a URL/expr para renderizar a imagem.\n                  </div>\n                  <praxis-meta-editor-image\n                    [model]=\"mappingEmptyState\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-image>\n                }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header\n                  ><mat-panel-title\n                    >Estilo</mat-panel-title\n                  ></mat-expansion-panel-header\n                >\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field appearance=\"outline\"\n                    ><mat-label>Classe</mat-label\n                    ><input\n                      matInput\n                      [(ngModel)]=\"mappingEmptyState.class\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                  /></mat-form-field>\n                  <mat-form-field appearance=\"outline\"\n                    ><mat-label>Style</mat-label\n                    ><input\n                      matInput\n                      [(ngModel)]=\"mappingEmptyState.style\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                  /></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()\">\n          Aplicar mapeamento\n        </button>\n        <button\n          mat-button\n          (click)=\"inferFromFields()\"\n          [disabled]=\"!fields.length\"\n        >\n          Inferir do schema\n        </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\n              matInput\n              type=\"number\"\n              min=\"0\"\n              [(ngModel)]=\"skeletonCountInput\"\n              (ngModelChange)=\"onSkeletonChanged($event)\"\n            />\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\n              [(ngModel)]=\"skinPreviewTheme\"\n              (change)=\"onSkinChanged()\"\n              appearance=\"legacy\"\n            >\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\n              [config]=\"working\"\n              [items]=\"previewData\"\n              [theme]=\"skinPreviewTheme\"\n            ></praxis-list-skin-preview>\n          </div>\n        </div>\n      </div>\n    </div>\n  </mat-tab>\n  <mat-tab label=\"i18n/A11y\">\n    <div\n      class=\"editor-content grid gap-3\"\n      *ngIf=\"working?.a11y && working?.events\"\n    >\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Locale padr\u00E3o</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.i18n.locale\"\n          (ngModelChange)=\"markDirty()\"\n          placeholder=\"ex.: pt-BR\"\n        />\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Moeda padr\u00E3o</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.i18n.currency\"\n          (ngModelChange)=\"markDirty()\"\n          placeholder=\"ex.: BRL\"\n        />\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\n            matInput\n            [(ngModel)]=\"working!.a11y!.ariaLabel\"\n            (ngModelChange)=\"markDirty()\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>aria-labelledby</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working!.a11y!.ariaLabelledBy\"\n            (ngModelChange)=\"markDirty()\"\n          />\n        </mat-form-field>\n      </div>\n      <div class=\"g g-auto-220 gap-12 ai-end\">\n        <mat-slide-toggle\n          [(ngModel)]=\"working!.a11y!.highContrast\"\n          (ngModelChange)=\"markDirty()\"\n          >Alto contraste</mat-slide-toggle\n        >\n        <mat-slide-toggle\n          [(ngModel)]=\"working!.a11y!.reduceMotion\"\n          (ngModelChange)=\"markDirty()\"\n          >Reduzir movimento</mat-slide-toggle\n        >\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\n            matInput\n            [(ngModel)]=\"working!.events!.itemClick\"\n            (ngModelChange)=\"markDirty()\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>actionClick</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working!.events!.actionClick\"\n            (ngModelChange)=\"markDirty()\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>selectionChange</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working!.events!.selectionChange\"\n            (ngModelChange)=\"markDirty()\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>loaded</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working!.events!.loaded\"\n            (ngModelChange)=\"markDirty()\"\n          />\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\n          [(ngModel)]=\"working.selection.mode\"\n          (ngModelChange)=\"onSelectionChanged()\"\n        >\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\n          matInput\n          [(ngModel)]=\"working.selection.formControlName\"\n          (ngModelChange)=\"onSelectionChanged()\"\n        />\n        <button\n          mat-icon-button\n          matSuffix\n          type=\"button\"\n          class=\"help-icon-button\"\n          matTooltip=\"formControlName\"\n        >\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\n          matInput\n          [(ngModel)]=\"working.selection.formControlPath\"\n          (ngModelChange)=\"onSelectionChanged()\"\n        />\n        <button\n          mat-icon-button\n          matSuffix\n          type=\"button\"\n          class=\"help-icon-button\"\n          matTooltip=\"formControlPath\"\n        >\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\n          matInput\n          [(ngModel)]=\"working.selection.compareBy\"\n          (ngModelChange)=\"onSelectionChanged()\"\n        />\n        <button\n          mat-icon-button\n          matSuffix\n          type=\"button\"\n          class=\"help-icon-button\"\n          matTooltip=\"Chave unica do item.\"\n        >\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\n          [(ngModel)]=\"working.selection.return\"\n          (ngModelChange)=\"onSelectionChanged()\"\n        >\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')\">\n          Pill Soft\n        </button>\n        <button mat-button (click)=\"applySkinPreset('gradient-tile')\">\n          Gradient Tile\n        </button>\n        <button mat-button (click)=\"applySkinPreset('glass')\">Glass</button>\n        <button mat-button (click)=\"applySkinPreset('elevated')\">\n          Elevated\n        </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')\">\n          Neumorphism\n        </button>\n      </div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Estilo</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.skin.type\"\n          (ngModelChange)=\"onSkinTypeChanged($event)\"\n        >\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\n          matInput\n          [(ngModel)]=\"working.skin.radius\"\n          (ngModelChange)=\"onSkinChanged()\"\n          placeholder=\"ex.: 1.25rem\"\n        />\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Sombra</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.skin.shadow\"\n          (ngModelChange)=\"onSkinChanged()\"\n          placeholder=\"ex.: var(--md-sys-elevation-level2)\"\n        />\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>Borda</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.skin.border\"\n          (ngModelChange)=\"onSkinChanged()\"\n        />\n      </mat-form-field>\n      <mat-form-field\n        *ngIf=\"working.skin.type === 'glass'\"\n        appearance=\"outline\"\n      >\n        <mat-label>Desfoque</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.skin.backdropBlur\"\n          (ngModelChange)=\"onSkinChanged()\"\n          placeholder=\"ex.: 8px\"\n        />\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\n            matInput\n            [ngModel]=\"working.skin.gradient.from || ''\"\n            (ngModelChange)=\"onSkinGradientChanged('from', $event)\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Degrad\u00EA at\u00E9</mat-label>\n          <input\n            matInput\n            [ngModel]=\"working.skin.gradient.to || ''\"\n            (ngModelChange)=\"onSkinGradientChanged('to', $event)\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>\u00C2ngulo</mat-label>\n          <input\n            matInput\n            type=\"number\"\n            [ngModel]=\"working.skin.gradient.angle ?? 135\"\n            (ngModelChange)=\"onSkinGradientChanged('angle', $event)\"\n          />\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\n          matInput\n          [(ngModel)]=\"working.skin.class\"\n          (ngModelChange)=\"onSkinChanged()\"\n          placeholder=\"ex.: my-list-skin\"\n        />\n      </mat-form-field>\n\n      <div\n        *ngIf=\"working.skin.type === 'custom'\"\n        class=\"g g-auto-220 gap-12 ai-end\"\n      >\n        <mat-form-field appearance=\"outline\" class=\"w-full\">\n          <mat-label>Estilo inline (skin.inlineStyle)</mat-label>\n          <textarea\n            matInput\n            rows=\"4\"\n            [(ngModel)]=\"working.skin.inlineStyle\"\n            (ngModelChange)=\"onSkinChanged()\"\n            [attr.placeholder]=\"':host{--p-list-radius: 1rem}'\"\n          ></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\">\n.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          >\n        </div>\n      </div>\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"] }]
+                        SurfaceOpenActionEditorComponent,
+                    ], template: "<mat-tab-group class=\"list-editor-tabs\">\n  <mat-tab [label]=\"tx('Data')\">\n    <div class=\"editor-content\">\n      <div class=\"g g-1-auto gap-8 ai-center\">\n        <div class=\"muted\">\n          {{ tx('Assistant-applied adjustments replace the entire configuration object.') }}\n        </div>\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"help-icon-button\"\n          [matTooltip]=\"tx('applyConfigFromAdapter does not perform a deep merge. Make sure the adapter sends the full config.')\"\n        >\n          <mat-icon>help_outline</mat-icon>\n        </button>\n      </div>\n      <mat-form-field appearance=\"outline\" class=\"w-full\">\n        <mat-label>{{ tx('Resource (API)') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.dataSource.resourcePath\"\n          (ngModelChange)=\"onResourcePathChange($event)\"\n          [placeholder]=\"tx('e.g.: users')\"\n        />\n        <button\n          mat-icon-button\n          matSuffix\n          type=\"button\"\n          class=\"help-icon-button\"\n          [matTooltip]=\"tx('Resource endpoint (resourcePath).')\"\n        >\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>{{ tx('Query (JSON)') }}</mat-label>\n        <textarea\n          matInput\n          rows=\"3\"\n          [(ngModel)]=\"queryJson\"\n          (ngModelChange)=\"onQueryChanged($event)\"\n          [placeholder]=\"queryPlaceholder()\"\n        ></textarea>\n        <button\n          mat-icon-button\n          matSuffix\n          type=\"button\"\n          class=\"help-icon-button\"\n          [matTooltip]=\"tx('Optional. Use valid JSON for initial filters.')\"\n          *ngIf=\"!queryError\"\n        >\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>{{ tx('Sort by') }}</mat-label>\n          <mat-select\n            [(ngModel)]=\"sortField\"\n            (ngModelChange)=\"updateSortConfig()\"\n          >\n            <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n              f\n            }}</mat-option>\n          </mat-select>\n          <button\n            mat-icon-button\n            matSuffix\n            type=\"button\"\n            class=\"help-icon-button\"\n            [matTooltip]=\"tx('Resource base field.')\"\n          >\n            <mat-icon>help_outline</mat-icon>\n          </button>\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Direction') }}</mat-label>\n          <mat-select\n            [(ngModel)]=\"sortDir\"\n            (ngModelChange)=\"updateSortConfig()\"\n          >\n            <mat-option value=\"asc\">{{ tx('Ascending') }}</mat-option>\n            <mat-option value=\"desc\">{{ tx('Descending') }}</mat-option>\n          </mat-select>\n        </mat-form-field>\n      </div>\n    </div>\n  </mat-tab>\n  <mat-tab [label]=\"tx('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      >\n      </praxis-list-json-config-editor>\n    </div>\n  </mat-tab>\n  <mat-tab [label]=\"tx('Actions')\">\n    <div class=\"editor-content g gap-12\">\n      <div class=\"g g-1-auto gap-8 ai-center\">\n        <div class=\"muted\">\n          {{ tx('Configure per-item action buttons (icon, label, color, visibility)') }}\n        </div>\n        <button mat-flat-button color=\"primary\" (click)=\"addAction()\">\n          {{ tx('Add action') }}\n        </button>\n      </div>\n      <div class=\"g g-1-auto gap-8 ai-center\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Global action (Praxis)') }}</mat-label>\n          <mat-select\n            [(ngModel)]=\"selectedGlobalActionId\"\n            (ngModelChange)=\"onGlobalActionSelected($event)\"\n          >\n            <mat-option [value]=\"undefined\">{{ tx('-- Select --') }}</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\n            *ngIf=\"!globalActionCatalog.length\"\n            class=\"text-caption muted\"\n            >{{ tx('No global action registered.') }}</mat-hint\n          >\n        </mat-form-field>\n        <div class=\"muted text-caption\">\n          {{ tx('Select to add with a global `command`.') }}\n        </div>\n      </div>\n      <div\n        *ngFor=\"let a of working.actions || []; let i = index\"\n        class=\"g g-auto-200 gap-12 ai-end\"\n      >\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('ID') }}</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"a.id\"\n            (ngModelChange)=\"onActionsChanged()\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Action type') }}</mat-label>\n          <mat-select [(ngModel)]=\"a.kind\" (ngModelChange)=\"onActionsChanged()\">\n            <mat-option value=\"icon\">{{ tx('Icon') }}</mat-option>\n            <mat-option value=\"button\">{{ tx('Button') }}</mat-option>\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Icon') }}</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"a.icon\"\n            (ngModelChange)=\"onActionsChanged()\"\n            [placeholder]=\"tx('e.g.: edit, delete')\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Command (global)') }}</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"a.command\"\n            (ngModelChange)=\"onActionsChanged()\"\n            placeholder=\"global:toast.success\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Label') }}</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"a.label\"\n            (ngModelChange)=\"onActionsChanged()\"\n          />\n        </mat-form-field>\n        <ng-container *ngIf=\"a.kind === 'button'\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>{{ tx('Variant') }}</mat-label>\n            <mat-select\n              [(ngModel)]=\"a.buttonVariant\"\n              (ngModelChange)=\"onActionsChanged()\"\n            >\n              <mat-option value=\"stroked\">{{ tx('Outlined') }}</mat-option>\n              <mat-option value=\"raised\">{{ tx('Raised') }}</mat-option>\n              <mat-option value=\"flat\">{{ tx('Filled') }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n        </ng-container>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Action color') }}</mat-label>\n          <mat-select\n            [(ngModel)]=\"a.color\"\n            (ngModelChange)=\"onActionsChanged()\"\n          >\n            <mat-option *ngFor=\"let c of paletteOptions\" [value]=\"c.value\">\n              <span\n                class=\"color-dot\"\n                [style.background]=\"colorDotBackground(c.value)\"\n              ></span\n              >{{ tx(c.label) }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n        <div\n          class=\"g gap-8\"\n          *ngIf=\"isCustomColor(a.color); else actionCustomBtn\"\n        >\n          <pdx-color-picker\n            [label]=\"tx('Custom color')\"\n            [format]=\"'hex'\"\n            [(ngModel)]=\"a.color\"\n            (ngModelChange)=\"onActionsChanged()\"\n          ></pdx-color-picker>\n        </div>\n        <ng-template #actionCustomBtn>\n          <button\n            mat-stroked-button\n            type=\"button\"\n            (click)=\"enableCustomActionColor(a)\"\n          >\n            {{ tx('Use custom color') }}\n          </button>\n        </ng-template>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Action payload') }}</mat-label>\n          <mat-select\n            [(ngModel)]=\"a.emitPayload\"\n            (ngModelChange)=\"onActionsChanged()\"\n          >\n            <mat-option [value]=\"undefined\">{{ tx('Default') }}</mat-option>\n            <mat-option value=\"item\">{{ tx('Item') }}</mat-option>\n            <mat-option value=\"id\">{{ tx('ID') }}</mat-option>\n            <mat-option value=\"value\">{{ tx('Value') }}</mat-option>\n          </mat-select>\n          <button\n            mat-icon-button\n            matSuffix\n            type=\"button\"\n            class=\"help-icon-button\"\n            [matTooltip]=\"tx('Payload emitted by the action.')\"\n          >\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>{{ actionVisibilityLabel() }}</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"a.showIf\"\n            (ngModelChange)=\"onActionsChanged()\"\n          />\n          <button\n            mat-icon-button\n            matSuffix\n            type=\"button\"\n            class=\"help-icon-button\"\n            [matTooltip]=\"actionConditionTooltip()\"\n          >\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\n            *ngIf=\"(a.kind || 'icon') === 'icon'\"\n            mat-icon-button\n            [color]=\"isThemeColor(a.color) ? a.color : undefined\"\n          >\n            <mat-icon\n              [praxisIcon]=\"a.icon || 'bolt'\"\n              [style.cssText]=\"iconStyle(a.color)\"\n            ></mat-icon>\n          </button>\n          <ng-container *ngIf=\"a.kind === 'button'\">\n            <button\n              *ngIf=\"a.buttonVariant === 'stroked'\"\n              mat-stroked-button\n              [color]=\"isThemeColor(a.color) ? a.color : undefined\"\n              [style.cssText]=\"buttonStyle(a.color, 'stroked')\"\n            >\n              {{ a.label || a.id || tx('Action') }}\n            </button>\n            <button\n              *ngIf=\"a.buttonVariant === 'raised'\"\n              mat-raised-button\n              [color]=\"isThemeColor(a.color) ? a.color : undefined\"\n              [style.cssText]=\"buttonStyle(a.color, 'raised')\"\n            >\n              {{ a.label || a.id || tx('Action') }}\n            </button>\n            <button\n              *ngIf=\"!a.buttonVariant || a.buttonVariant === 'flat'\"\n              mat-flat-button\n              [color]=\"isThemeColor(a.color) ? a.color : undefined\"\n              [style.cssText]=\"buttonStyle(a.color, 'flat')\"\n            >\n              {{ a.label || a.id || tx('Action') }}\n            </button>\n          </ng-container>\n          <span class=\"muted\">{{ tx('Preview') }}</span>\n        </div>\n        <div class=\"flex-end\">\n          <button mat-button color=\"warn\" (click)=\"removeAction(i)\">\n            {{ tx('Remove') }}\n          </button>\n        </div>\n        <div class=\"g gap-8 col-span-2\" *ngIf=\"a.command\">\n          <mat-slide-toggle\n            [(ngModel)]=\"a.showLoading\"\n            (ngModelChange)=\"onActionsChanged()\"\n            >{{ tx('Show loading') }}</mat-slide-toggle\n          >\n          <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n            <mat-expansion-panel-header\n              ><mat-panel-title\n                >{{ tx('Confirmation') }}</mat-panel-title\n              ></mat-expansion-panel-header\n            >\n            <div class=\"g gap-12 pt-12\">\n              <div class=\"g row-flow gap-8 ai-center\">\n                <span class=\"text-caption muted\">{{ tx('Type') }}</span>\n                <mat-button-toggle-group\n                  [value]=\"a.confirmation?.type || ''\"\n                  (change)=\"applyConfirmationPreset(a, $event.value)\"\n                >\n                  <mat-button-toggle value=\"\">{{ tx('Default') }}</mat-button-toggle>\n                  <mat-button-toggle value=\"danger\">{{ tx('Danger') }}</mat-button-toggle>\n                  <mat-button-toggle value=\"warning\">{{ tx('Warning') }}</mat-button-toggle>\n                  <mat-button-toggle value=\"info\">{{ tx('Info') }}</mat-button-toggle>\n                </mat-button-toggle-group>\n              </div>\n              <mat-form-field appearance=\"outline\">\n                <mat-label>{{ tx('Title') }}</mat-label>\n                <input\n                  matInput\n                  [ngModel]=\"a.confirmation?.title\"\n                  (ngModelChange)=\"setConfirmationField(a, 'title', $event)\"\n                />\n              </mat-form-field>\n              <mat-form-field appearance=\"outline\">\n                <mat-label>{{ tx('Message') }}</mat-label>\n                <input\n                  matInput\n                  [ngModel]=\"a.confirmation?.message\"\n                  (ngModelChange)=\"setConfirmationField(a, 'message', $event)\"\n                />\n              </mat-form-field>\n              <div class=\"g gap-6\">\n                <div class=\"text-caption muted\">{{ tx('Preview') }}</div>\n                <div class=\"text-caption\">\n                  <strong>{{\n                    a.confirmation?.title || tx('Confirm action')\n                  }}</strong>\n                </div>\n                <div class=\"text-caption muted\">\n                  {{\n                    a.confirmation?.message ||\n                      tx('Are you sure you want to continue?')\n                  }}\n                </div>\n                <div class=\"text-caption\">\n                  <span\n                    class=\"confirm-type\"\n                    [ngClass]=\"a.confirmation?.type || 'default'\"\n                    >{{ tx('Type') }}:\n                    {{ a.confirmation?.type || tx('Default').toLowerCase() }}</span\n                  >\n                </div>\n                <div\n                  class=\"text-caption muted\"\n                  *ngIf=\"!a.confirmation?.title && !a.confirmation?.message\"\n                >\n                  {{ tx('Set a title or message for the confirmation.') }}\n                </div>\n              </div>\n            </div>\n          </mat-expansion-panel>\n          <ng-container *ngIf=\"isSurfaceOpenCommand(a); else defaultGlobalPayloadEditor\">\n            <div class=\"col-span-2\">\n              <praxis-surface-open-action-editor\n                [value]=\"getSurfaceOpenGlobalPayload(a)\"\n                hostKind=\"list\"\n                (valueChange)=\"onSurfaceOpenGlobalPayloadChange(a, $event)\"\n              ></praxis-surface-open-action-editor>\n            </div>\n          </ng-container>\n          <ng-template #defaultGlobalPayloadEditor>\n          <mat-form-field appearance=\"outline\" class=\"col-span-2\">\n            <mat-label>{{ tx('Payload (JSON/Template)') }}</mat-label>\n            <textarea\n              matInput\n              rows=\"4\"\n              [(ngModel)]=\"a.globalPayload\"\n              (ngModelChange)=\"onActionsChanged()\"\n              placeholder='{\"message\":\"${item.name} favoritado\"}'\n            ></textarea>\n            <button\n              mat-icon-button\n              matSuffix\n              type=\"button\"\n              class=\"help-icon-button\"\n              [matTooltip]=\"globalPayloadSchemaTooltip(a)\"\n            >\n              <mat-icon>help_outline</mat-icon>\n            </button>\n            <mat-error *ngIf=\"isGlobalPayloadInvalid(a.globalPayload)\"\n              >{{ tx('Invalid JSON') }}</mat-error\n            >\n          </mat-form-field>\n          <div class=\"g row-flow gap-8 ai-center\">\n            <button\n              mat-stroked-button\n              type=\"button\"\n              (click)=\"applyGlobalPayloadExample(a)\"\n            >\n              {{ tx('Insert example') }}\n            </button>\n            <span class=\"muted text-caption\">{{\n              globalPayloadExampleHint(a)\n            }}</span>\n          </div>\n          </ng-template>\n          <mat-slide-toggle\n            [(ngModel)]=\"a.emitLocal\"\n            (ngModelChange)=\"onActionsChanged()\"\n            >{{ tx('Emit local event too') }}</mat-slide-toggle\n          >\n        </div>\n      </div>\n    </div>\n  </mat-tab>\n  <mat-tab [label]=\"tx('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')\">\n          {{ tx('Modern tiles preset') }}\n        </button>\n      </div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Variant') }}</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.layout.variant\"\n          (ngModelChange)=\"onLayoutChanged()\"\n        >\n          <mat-option value=\"list\">{{ tx('List') }}</mat-option>\n          <mat-option value=\"cards\">{{ tx('Cards') }}</mat-option>\n          <mat-option value=\"tiles\">{{ tx('Tiles') }}</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Model') }}</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.layout.model\"\n          (ngModelChange)=\"onLayoutChanged()\"\n        >\n          <ng-container\n            *ngIf=\"working.layout.variant === 'list'; else cardModels\"\n          >\n            <mat-option value=\"standard\">{{ tx('Standard') }}</mat-option>\n            <mat-option value=\"media\">{{ tx('Media on the left') }}</mat-option>\n            <mat-option value=\"hotel\">{{ tx('Hotel (large media)') }}</mat-option>\n          </ng-container>\n          <ng-template #cardModels>\n            <ng-container\n              *ngIf=\"working.layout.variant === 'tiles'; else cardsOnly\"\n            >\n              <mat-option value=\"standard\">{{ tx('Standard tile') }}</mat-option>\n              <mat-option value=\"media\">{{ tx('Tile with media') }}</mat-option>\n              <mat-option value=\"hotel\">{{ tx('Hotel tile') }}</mat-option>\n            </ng-container>\n            <ng-template #cardsOnly>\n              <mat-option value=\"standard\">{{ tx('Standard') }}</mat-option>\n              <mat-option value=\"media\">{{ tx('Card with media') }}</mat-option>\n              <mat-option value=\"hotel\">{{ tx('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>{{ tx('Lines') }}</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.layout.lines\"\n          (ngModelChange)=\"onLayoutChanged()\"\n        >\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>{{ tx('Items per page') }}</mat-label>\n        <input\n          matInput\n          type=\"number\"\n          min=\"1\"\n          [(ngModel)]=\"working.layout.pageSize\"\n          (ngModelChange)=\"onPageSizeChange($event)\"\n        />\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Density') }}</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.layout.density\"\n          (ngModelChange)=\"onLayoutChanged()\"\n        >\n          <mat-option value=\"default\">{{ tx('Default') }}</mat-option>\n          <mat-option value=\"comfortable\">{{ tx('Comfortable') }}</mat-option>\n          <mat-option value=\"compact\">{{ tx('Compact') }}</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Spacing between items') }}</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.layout.itemSpacing\"\n          (ngModelChange)=\"onLayoutChanged()\"\n        >\n          <mat-option value=\"none\">{{ tx('No extra space') }}</mat-option>\n          <mat-option value=\"tight\">{{ tx('Tight') }}</mat-option>\n          <mat-option value=\"default\">{{ tx('Standard') }}</mat-option>\n          <mat-option value=\"relaxed\">{{ tx('Relaxed') }}</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field\n        appearance=\"outline\"\n        *ngIf=\"working.layout.variant !== 'tiles'\"\n      >\n        <mat-label>{{ tx('Dividers') }}</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.layout.dividers\"\n          (ngModelChange)=\"onLayoutChanged()\"\n        >\n          <mat-option value=\"none\">{{ tx('None') }}</mat-option>\n          <mat-option value=\"between\">{{ tx('Between groups') }}</mat-option>\n          <mat-option value=\"all\">{{ tx('All') }}</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>{{ tx('Group by') }}</mat-label>\n          <mat-select\n            [(ngModel)]=\"working.layout.groupBy\"\n            (ngModelChange)=\"onLayoutChanged()\"\n          >\n            <mat-option [value]=\"\">{{ tx('None') }}</mat-option>\n            <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n              f\n            }}</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>{{ tx('Group by') }}</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working.layout.groupBy\"\n            (ngModelChange)=\"onLayoutChanged()\"\n            [placeholder]=\"tx('e.g.: department')\"\n          />\n        </mat-form-field>\n      </ng-template>\n      <mat-slide-toggle\n        [(ngModel)]=\"working.layout.stickySectionHeader\"\n        (ngModelChange)=\"onLayoutChanged()\"\n      >\n        {{ tx('Sticky section header') }}\n      </mat-slide-toggle>\n      <mat-slide-toggle\n        [(ngModel)]=\"working.layout.virtualScroll\"\n        (ngModelChange)=\"onLayoutChanged()\"\n      >\n        {{ tx('Virtual scroll') }}\n      </mat-slide-toggle>\n      <mat-divider class=\"my-8\"></mat-divider>\n      <div class=\"subtitle\">{{ tx('List tools') }}</div>\n      <div class=\"g g-auto-220 gap-12 ai-end\">\n        <mat-slide-toggle\n          [(ngModel)]=\"working.ui.showSearch\"\n          (ngModelChange)=\"onUiChanged()\"\n          >{{ tx('Show search') }}</mat-slide-toggle\n        >\n        <mat-slide-toggle\n          [(ngModel)]=\"working.ui.showSort\"\n          (ngModelChange)=\"onUiChanged()\"\n          >{{ tx('Show sorting') }}</mat-slide-toggle\n        >\n        <mat-slide-toggle\n          [(ngModel)]=\"working.ui.showRange\"\n          (ngModelChange)=\"onUiChanged()\"\n          >{{ tx('Show total X-Y range') }}</mat-slide-toggle\n        >\n      </div>\n      <div\n        class=\"g g-auto-220 gap-12 ai-end mt-12\"\n        *ngIf=\"working.ui?.showSearch\"\n      >\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Field to search') }}</mat-label>\n          <mat-select\n            [(ngModel)]=\"working.ui.searchField\"\n            (ngModelChange)=\"onUiChanged()\"\n          >\n            <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n              f\n            }}</mat-option>\n          </mat-select>\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Search placeholder') }}</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working.ui.searchPlaceholder\"\n            (ngModelChange)=\"onUiChanged()\"\n            [placeholder]=\"tx('e.g.: Search by title')\"\n          />\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\">\n            {{ tx('Sorting options (label \u2192 field+direction)') }}\n          </div>\n          <button mat-flat-button color=\"primary\" (click)=\"addUiSortRow()\">\n            {{ tx('Add option') }}\n          </button>\n        </div>\n        <div\n          class=\"g g-auto-220 gap-12 ai-end mt-12\"\n          *ngFor=\"let r of uiSortRows; let i = index\"\n        >\n          <mat-form-field appearance=\"outline\">\n            <mat-label>{{ tx('Label') }}</mat-label>\n            <input\n              matInput\n              [(ngModel)]=\"r.label\"\n              (ngModelChange)=\"onUiSortRowsChanged()\"\n              [placeholder]=\"tx('e.g.: Most recent')\"\n            />\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>{{ tx('Field') }}</mat-label>\n            <mat-select\n              [(ngModel)]=\"r.field\"\n              (ngModelChange)=\"onUiSortRowsChanged()\"\n            >\n              <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                f\n              }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>{{ tx('Direction') }}</mat-label>\n            <mat-select\n              [(ngModel)]=\"r.dir\"\n              (ngModelChange)=\"onUiSortRowsChanged()\"\n            >\n              <mat-option value=\"desc\">{{ tx('Descending') }}</mat-option>\n              <mat-option value=\"asc\">{{ tx('Ascending') }}</mat-option>\n            </mat-select>\n          </mat-form-field>\n          <div class=\"error\" *ngIf=\"isUiSortRowDuplicate(i)\">\n            {{ tx('Duplicate option (field+direction)') }}\n          </div>\n          <div class=\"flex-end\">\n            <button mat-button color=\"warn\" (click)=\"removeUiSortRow(i)\">\n              {{ tx('Remove') }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </mat-tab>\n  <mat-tab [label]=\"tx('Content')\">\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>{{ tx('Primary (Title)') }}</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{\n                mappingPrimary.field || tx('Not mapped')\n              }}</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\">{{ tx('Presets') }}</span>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingPrimary.type = 'text';\n                    mappingPrimary.field = 'name';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Name') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingPrimary.type = 'text';\n                    mappingPrimary.field = 'title';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Title') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingPrimary.type = 'text';\n                    mappingPrimary.field = 'name';\n                    mappingSecondary.type = 'text';\n                    mappingSecondary.field = 'role';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Name + role') }}\n                </button>\n              </div>\n              <div class=\"g g-1-1 gap-12\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Field') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingPrimary.field\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                      f\n                    }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Type') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingPrimary.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of primaryTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ tx(mt.label) }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n\n              @switch (mappingPrimary.type) {\n                @case (\"text\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingPrimary\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingPrimary\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"currency\") {\n                  <praxis-meta-editor-currency\n                    [model]=\"mappingPrimary\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-currency>\n                }\n                @case (\"date\") {\n                  <praxis-meta-editor-date\n                    [model]=\"mappingPrimary\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-date>\n                }\n              }\n\n              <!-- Advanced -->\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header>\n                  <mat-panel-title>{{ tx('Formatting and style') }}</mat-panel-title>\n                </mat-expansion-panel-header>\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field\n                    appearance=\"outline\"\n                    *ngIf=\"\n                      mappingPrimary.type === 'text' ||\n                      mappingPrimary.type === 'html'\n                    \"\n                  >\n                    <mat-label>{{ tx('CSS class') }}</mat-label>\n                    <input\n                      matInput\n                      [(ngModel)]=\"mappingPrimary.class\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                    />\n                  </mat-form-field>\n                  <mat-form-field\n                    appearance=\"outline\"\n                    *ngIf=\"\n                      mappingPrimary.type === 'text' ||\n                      mappingPrimary.type === 'html'\n                    \"\n                  >\n                    <mat-label>{{ tx('Inline style') }}</mat-label>\n                    <input\n                      matInput\n                      [(ngModel)]=\"mappingPrimary.style\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                    />\n                  </mat-form-field>\n                  <div class=\"g g-1-1 gap-12\">\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('CSS class') }}</mat-label>\n                      <input\n                        matInput\n                        [(ngModel)]=\"mappingPrimary.class\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                      />\n                    </mat-form-field>\n                    <mat-form-field appearance=\"outline\">\n                      <mat-label>{{ tx('Inline style') }}</mat-label>\n                      <input\n                        matInput\n                        [(ngModel)]=\"mappingPrimary.style\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                      />\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>{{ tx('Secondary (Summary)') }}</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{\n                mappingSecondary.field || tx('Not mapped')\n              }}</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\">{{ tx('Presets') }}</span>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingSecondary.type = 'text';\n                    mappingSecondary.field = 'subtitle';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Subtitle') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingSecondary.type = 'date';\n                    mappingSecondary.field = 'hireDate';\n                    mappingSecondary.dateStyle = 'short';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Short date') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"applySalaryPreset()\"\n                >\n                  {{ tx('Salary') }}\n                </button>\n              </div>\n              <div class=\"g g-1-1 gap-12\">\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Field') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingSecondary.field\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                      f\n                    }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Type') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingSecondary.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of secondaryTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ tx(mt.label) }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n              </div>\n\n              @switch (mappingSecondary.type) {\n                @case (\"text\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingSecondary\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingSecondary\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"currency\") {\n                  <praxis-meta-editor-currency\n                    [model]=\"mappingSecondary\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-currency>\n                }\n                @case (\"date\") {\n                  <praxis-meta-editor-date\n                    [model]=\"mappingSecondary\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-date>\n                }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header>\n                  <mat-panel-title>{{ tx('Formatting and style') }}</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\"\n                      ><mat-label>{{ tx('CSS class') }}</mat-label\n                      ><input\n                        matInput\n                        [(ngModel)]=\"mappingSecondary.class\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                    /></mat-form-field>\n                    <mat-form-field appearance=\"outline\"\n                      ><mat-label>{{ tx('Inline style') }}</mat-label\n                      ><input\n                        matInput\n                        [(ngModel)]=\"mappingSecondary.style\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                    /></mat-form-field>\n                  </div>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n\n          <mat-expansion-panel\n            [expanded]=\"!!mappingMeta.field || mappingMetaFields.length > 0\"\n          >\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"g row-flow gap-8 ai-center\">\n                  <mat-icon>{{\n                    getTypeIcon(mappingMeta.type || \"text\")\n                  }}</mat-icon>\n                  <span>{{ tx('Meta (Detail/Side)') }}</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>\n                {{\n                  mappingMetaFields.length\n                    ? tx('Composed field ({{count}})', { count: mappingMetaFields.length })\n                    : mappingMeta.field || tx('Not mapped')\n                }}\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\">{{ tx('Composition mode') }}</div>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Fields to compose (multi-select)') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingMetaFields\"\n                    multiple\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                      f\n                    }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <div\n                  class=\"g g-1-1 ai-center gap-12\"\n                  *ngIf=\"mappingMetaFields.length\"\n                >\n                  <mat-form-field appearance=\"outline\">\n                    <mat-label>{{ tx('Separator') }}</mat-label>\n                    <input\n                      matInput\n                      [(ngModel)]=\"mappingMetaSeparator\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                    />\n                  </mat-form-field>\n                  <mat-slide-toggle\n                    [(ngModel)]=\"mappingMetaWrapSecondInParens\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    {{ tx('(Second) in parentheses') }}\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>{{ tx('Single field') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingMeta.field\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option [value]=\"undefined\">{{ tx('-- None --') }}</mat-option>\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                      f\n                    }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Type') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingMeta.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of metaTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ tx(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\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingMeta\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingMeta\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"currency\") {\n                  <praxis-meta-editor-currency\n                    [model]=\"mappingMeta\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-currency>\n                }\n                @case (\"date\") {\n                  <praxis-meta-editor-date\n                    [model]=\"mappingMeta\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-date>\n                }\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()\"\n                  ></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()\"\n                  ></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()\"\n                  ></praxis-meta-editor-icon>\n                }\n                @case (\"image\") {\n                  <praxis-meta-editor-image\n                    [model]=\"mappingMeta\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-image>\n                }\n              }\n\n              <!-- Advanced -->\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header\n                  ><mat-panel-title>{{ tx('Advanced options') }}</mat-panel-title\n                  ></mat-expansion-panel-header\n                >\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field appearance=\"outline\">\n                    <mat-label>{{ tx('Position') }}</mat-label>\n                    <mat-select\n                      [(ngModel)]=\"mappingMeta.placement\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                    >\n                      <mat-option value=\"side\">{{ tx('Side (right)') }}</mat-option>\n                      <mat-option value=\"line\">{{ tx('Inline (below)') }}</mat-option>\n                    </mat-select>\n                  </mat-form-field>\n                  <mat-form-field appearance=\"outline\">\n                    <mat-label>{{ tx('CSS class') }}</mat-label>\n                    <input\n                      matInput\n                      [(ngModel)]=\"mappingMeta.class\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                    />\n                  </mat-form-field>\n                  <mat-form-field appearance=\"outline\">\n                    <mat-label>{{ tx('Style') }}</mat-label>\n                    <input\n                      matInput\n                      [(ngModel)]=\"mappingMeta.style\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                    />\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>{{\n                    getTypeIcon(mappingTrailing.type || \"text\")\n                  }}</mat-icon>\n                  <span>{{ tx('Trailing (right)') }}</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{\n                mappingTrailing.field || tx('Not mapped')\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>{{ tx('Field') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingTrailing.field\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option [value]=\"undefined\">{{ tx('-- None --') }}</mat-option>\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                      f\n                    }}</mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Type') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingTrailing.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of trailingTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ tx(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\">{{ tx('Presets') }}</span>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingTrailing.type = 'chip';\n                    mappingTrailing.chipColor = 'primary';\n                    mappingTrailing.chipVariant = 'filled';\n                    mappingTrailing.field = 'status';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Status chip') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingTrailing.type = 'icon';\n                    mappingTrailing.field = 'status';\n                    mappingTrailing.iconColor = 'primary';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Status icon') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"applyPricePreset()\"\n                >\n                  {{ tx('Price') }}\n                </button>\n              </div>\n\n              @switch (mappingTrailing.type) {\n                @case (\"text\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingTrailing\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingTrailing\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"currency\") {\n                  <praxis-meta-editor-currency\n                    [model]=\"mappingTrailing\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-currency>\n                }\n                @case (\"date\") {\n                  <praxis-meta-editor-date\n                    [model]=\"mappingTrailing\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-date>\n                }\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()\"\n                  ></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()\"\n                  ></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()\"\n                  ></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>{{ tx('URL / Expr') }}</mat-label>\n                      <input\n                        matInput\n                        [(ngModel)]=\"mappingTrailing.imageUrl\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                        [placeholder]=\"tx('https://... or ${item.imageUrl}')\"\n                      />\n                      <button\n                        mat-icon-button\n                        matSuffix\n                        type=\"button\"\n                        class=\"help-icon-button\"\n                        [matTooltip]=\"tx('Use an absolute/relative URL or a ${item.field} expression.')\"\n                      >\n                        <mat-icon>help_outline</mat-icon>\n                      </button>\n                      <mat-error\n                        *ngIf=\"\n                          isImageUrlRequiredInvalid(mappingTrailing.imageUrl)\n                        \"\n                        >{{ tx('URL/expr is required') }}</mat-error\n                      >\n                    </mat-form-field>\n                  </div>\n                  <praxis-meta-editor-image\n                    [model]=\"mappingTrailing\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-image>\n                  <div\n                    class=\"text-caption muted\"\n                    *ngIf=\"!mappingTrailing.imageUrl\"\n                  >\n                    {{ tx('Set the URL/expr to render the image.') }}\n                  </div>\n                }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header\n                  ><mat-panel-title>{{ tx('Style') }}</mat-panel-title\n                  ></mat-expansion-panel-header\n                >\n                <div class=\"g gap-12 pt-12\">\n                  <div class=\"g g-1-1 gap-12\">\n                    <mat-form-field appearance=\"outline\"\n                      ><mat-label>{{ tx('Class') }}</mat-label\n                      ><input\n                        matInput\n                        [(ngModel)]=\"mappingTrailing.class\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                    /></mat-form-field>\n                    <mat-form-field appearance=\"outline\"\n                      ><mat-label>{{ tx('Style') }}</mat-label\n                      ><input\n                        matInput\n                        [(ngModel)]=\"mappingTrailing.style\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                    /></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]=\"\n              !!mappingLeading.field ||\n              (mappingLeading.type === 'icon' && !!mappingLeading.icon) ||\n              (mappingLeading.type === 'image' && !!mappingLeading.imageUrl)\n            \"\n          >\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>{{ tx('Leading (left)') }}</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>\n                {{\n                  mappingLeading.type === \"icon\"\n                    ? mappingLeading.icon || tx('Static icon')\n                    : mappingLeading.field ||\n                      (mappingLeading.imageUrl\n                        ? tx('Static image')\n                        : tx('Not mapped'))\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>{{ tx('Type') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingLeading.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of leadingTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ tx(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\n                  appearance=\"outline\"\n                  *ngIf=\"\n                    mappingLeading.type !== 'icon' &&\n                    mappingLeading.type !== 'image'\n                  \"\n                >\n                  <mat-label>{{ tx('Field') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingLeading.field\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option *ngFor=\"let f of fields\" [value]=\"f\">{{\n                      f\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\">{{ tx('Presets') }}</span>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingLeading.type = 'icon';\n                    mappingLeading.icon = 'person';\n                    mappingLeading.iconColor = 'primary';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Avatar icon') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingLeading.type = 'image';\n                    mappingLeading.imageUrl = 'https://placehold.co/64x64';\n                    mappingLeading.imageAlt = 'Avatar';\n                    mappingLeading.badgeText = '${item.status}';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Avatar image + badge') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingLeading.type = 'chip';\n                    mappingLeading.field = 'tag';\n                    mappingLeading.chipColor = 'accent';\n                    mappingLeading.chipVariant = 'filled';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Tag chip') }}\n                </button>\n              </div>\n\n              <!-- Icon Specific -->\n              <div\n                class=\"g g-1-auto gap-12 ai-center\"\n                *ngIf=\"mappingLeading.type === 'icon'\"\n              >\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Icon') }}</mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"mappingLeading.icon\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  />\n                  <button mat-icon-button matSuffix (click)=\"pickLeadingIcon()\">\n                    <mat-icon>search</mat-icon>\n                  </button>\n                </mat-form-field>\n                <div class=\"text-caption muted\">\n                  {{ tx('Use the `|iconMap` pipe in the extra pipe for dynamic rendering.') }}\n                </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()\"\n                ></praxis-meta-editor-icon>\n              </div>\n\n              <!-- Image Specific -->\n              <div\n                class=\"g g-1-1 gap-12\"\n                *ngIf=\"mappingLeading.type === 'image'\"\n              >\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Image URL') }}</mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"mappingLeading.imageUrl\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                    [placeholder]=\"tx('https://... or ${item.imageUrl}')\"\n                  />\n                  <button\n                    mat-icon-button\n                    matSuffix\n                    type=\"button\"\n                    class=\"help-icon-button\"\n                    [matTooltip]=\"tx('Use an absolute/relative URL or a ${item.field} expression.')\"\n                  >\n                    <mat-icon>help_outline</mat-icon>\n                  </button>\n                  <mat-error\n                    *ngIf=\"isImageUrlRequiredInvalid(mappingLeading.imageUrl)\"\n                    >{{ tx('URL/expr is required') }}</mat-error\n                  >\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Alt text') }}</mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"mappingLeading.imageAlt\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  />\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Badge text') }}</mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"mappingLeading.badgeText\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  />\n                </mat-form-field>\n              </div>\n\n              @switch (mappingLeading.type) {\n                @case (\"text\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingLeading\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingLeading\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\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()\"\n                  ></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()\"\n                  ></praxis-meta-editor-rating>\n                }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header\n                  ><mat-panel-title>{{ tx('Style') }}</mat-panel-title\n                  ></mat-expansion-panel-header\n                >\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field appearance=\"outline\"\n                    ><mat-label>{{ tx('Class') }}</mat-label\n                    ><input\n                      matInput\n                      [(ngModel)]=\"mappingLeading.class\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                  /></mat-form-field>\n                  <mat-form-field appearance=\"outline\"\n                    ><mat-label>{{ tx('Style') }}</mat-label\n                    ><input\n                      matInput\n                      [(ngModel)]=\"mappingLeading.style\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                  /></mat-form-field>\n                </div>\n              </mat-expansion-panel>\n            </div>\n          </mat-expansion-panel>\n\n          <!-- Features -->\n          <mat-expansion-panel\n            [expanded]=\"featuresVisible && features.length > 0\"\n          >\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>{{ tx('Features') }}</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description\n                >{{ features.length }} item(s)</mat-panel-description\n              >\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\n                  [(ngModel)]=\"featuresVisible\"\n                  (ngModelChange)=\"onFeaturesChanged()\"\n                  >{{ tx('Enable features') }}</mat-slide-toggle\n                >\n                <mat-slide-toggle\n                  [(ngModel)]=\"featuresSyncWithMeta\"\n                  (ngModelChange)=\"onMappingChanged()\"\n                  >{{ tx('Sync with Meta') }}</mat-slide-toggle\n                >\n                <span class=\"flex-1\"></span>\n                <mat-button-toggle-group\n                  [(ngModel)]=\"featuresMode\"\n                  (change)=\"onFeaturesChanged()\"\n                  appearance=\"legacy\"\n                >\n                  <mat-button-toggle value=\"icons+labels\"\n                    ><mat-icon>view_list</mat-icon></mat-button-toggle\n                  >\n                  <mat-button-toggle value=\"icons-only\"\n                    ><mat-icon>more_horiz</mat-icon></mat-button-toggle\n                  >\n                </mat-button-toggle-group>\n              </div>\n\n              <div\n                *ngFor=\"let f of features; let i = index\"\n                class=\"g g-auto-1 gap-8 ai-center p-8 border rounded mb-2\"\n              >\n                <button mat-icon-button (click)=\"pickFeatureIcon(i)\">\n                  <mat-icon>{{ f.icon || \"search\" }}</mat-icon>\n                </button>\n                <mat-form-field\n                  appearance=\"outline\"\n                  class=\"dense-form-field no-sub\"\n                >\n                  <input\n                    matInput\n                    [(ngModel)]=\"f.expr\"\n                    (ngModelChange)=\"onFeaturesChanged()\"\n                    [placeholder]=\"tx('Expression/Text')\"\n                  />\n                </mat-form-field>\n                <button mat-icon-button color=\"warn\" (click)=\"removeFeature(i)\">\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </div>\n              <button mat-button color=\"primary\" (click)=\"addFeature()\">\n                <mat-icon>add</mat-icon> {{ tx('Add feature') }}\n              </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>{{\n                    getTypeIcon(mappingSectionHeader.type)\n                  }}</mat-icon>\n                  <span>{{ tx('Section header') }}</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{\n                mappingSectionHeader.expr || tx('Not configured')\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>{{ tx('Type') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingSectionHeader.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of sectionHeaderTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ tx(mt.label) }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Expression (item.key)') }}</mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"mappingSectionHeader.expr\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                    placeholder=\"item.key\"\n                  />\n                </mat-form-field>\n              </div>\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">{{ tx('Presets') }}</span>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingSectionHeader.type = 'text';\n                    mappingSectionHeader.expr = '${item.key}';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Default text') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingSectionHeader.type = 'chip';\n                    mappingSectionHeader.chipColor = 'primary';\n                    mappingSectionHeader.chipVariant = 'filled';\n                    mappingSectionHeader.expr = '${item.key}';\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Default chip') }}\n                </button>\n              </div>\n\n              @switch (mappingSectionHeader.type) {\n                @case (\"text\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingSectionHeader\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingSectionHeader\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\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()\"\n                  ></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()\"\n                  ></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()\"\n                  ></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>{{ tx('Image URL') }}</mat-label>\n                      <input\n                        matInput\n                        [(ngModel)]=\"mappingSectionHeader.imageUrl\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                      />\n                      <mat-error\n                        *ngIf=\"\n                          isImageUrlRequiredInvalid(\n                            mappingSectionHeader.imageUrl\n                          )\n                        \"\n                        >{{ tx('URL/expr is required') }}</mat-error\n                      >\n                    </mat-form-field>\n                  </div>\n                  <div\n                    class=\"text-caption muted\"\n                    *ngIf=\"!mappingSectionHeader.imageUrl\"\n                  >\n                    {{ tx('Set the URL/expr to render the image.') }}\n                  </div>\n                  <praxis-meta-editor-image\n                    [model]=\"mappingSectionHeader\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-image>\n                }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header\n                  ><mat-panel-title>{{ tx('Style') }}</mat-panel-title\n                  ></mat-expansion-panel-header\n                >\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field appearance=\"outline\"\n                    ><mat-label>{{ tx('Class') }}</mat-label\n                    ><input\n                      matInput\n                      [(ngModel)]=\"mappingSectionHeader.class\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                  /></mat-form-field>\n                  <mat-form-field appearance=\"outline\"\n                    ><mat-label>{{ tx('Style') }}</mat-label\n                    ><input\n                      matInput\n                      [(ngModel)]=\"mappingSectionHeader.style\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                  /></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>{{ tx('Empty state') }}</span>\n                </div>\n              </mat-panel-title>\n              <mat-panel-description>{{\n                mappingEmptyState.expr || tx('Default')\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>{{ tx('Type') }}</mat-label>\n                  <mat-select\n                    [(ngModel)]=\"mappingEmptyState.type\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  >\n                    <mat-option\n                      *ngFor=\"let mt of emptyStateTypeConfigs\"\n                      [value]=\"mt.type\"\n                    >\n                      <mat-icon class=\"option-icon\">{{ mt.icon }}</mat-icon>\n                      {{ tx(mt.label) }}\n                    </mat-option>\n                  </mat-select>\n                </mat-form-field>\n                <mat-form-field appearance=\"outline\">\n                  <mat-label>{{ tx('Message / Expr') }}</mat-label>\n                  <input\n                    matInput\n                    [(ngModel)]=\"mappingEmptyState.expr\"\n                    (ngModelChange)=\"onMappingChanged()\"\n                  />\n                </mat-form-field>\n              </div>\n              <div class=\"g row-flow gap-8\">\n                <span class=\"text-caption muted\">{{ tx('Presets') }}</span>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingEmptyState.type = 'text';\n                    mappingEmptyState.expr = tx('No items available');\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Default message') }}\n                </button>\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  (click)=\"\n                    mappingEmptyState.type = 'image';\n                    mappingEmptyState.imageUrl = '/list-empty-state.svg';\n                    mappingEmptyState.imageAlt = tx('No results');\n                    onMappingChanged()\n                  \"\n                >\n                  {{ tx('Default image') }}\n                </button>\n              </div>\n\n              @switch (mappingEmptyState.type) {\n                @case (\"text\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingEmptyState\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\n                @case (\"html\") {\n                  <praxis-meta-editor-text\n                    [model]=\"mappingEmptyState\"\n                    [setPipe]=\"setPipe.bind(this)\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-text>\n                }\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()\"\n                  ></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()\"\n                  ></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()\"\n                  ></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>{{ tx('Image URL') }}</mat-label\n                      ><input\n                        matInput\n                        [(ngModel)]=\"mappingEmptyState.imageUrl\"\n                        (ngModelChange)=\"onMappingChanged()\"\n                      />\n                      <mat-error\n                        *ngIf=\"\n                          isImageUrlRequiredInvalid(mappingEmptyState.imageUrl)\n                        \"\n                        >{{ tx('URL/expr is required') }}</mat-error\n                      >\n                    </mat-form-field>\n                  </div>\n                  <div\n                    class=\"text-caption muted\"\n                    *ngIf=\"!mappingEmptyState.imageUrl\"\n                  >\n                    {{ tx('Set the URL/expr to render the image.') }}\n                  </div>\n                  <praxis-meta-editor-image\n                    [model]=\"mappingEmptyState\"\n                    (change)=\"onMappingChanged()\"\n                  ></praxis-meta-editor-image>\n                }\n              }\n\n              <mat-expansion-panel class=\"mat-elevation-z0 advanced-panel\">\n                <mat-expansion-panel-header\n                    ><mat-panel-title>{{ tx('Style') }}</mat-panel-title\n                  ></mat-expansion-panel-header\n                >\n                <div class=\"g gap-12 pt-12\">\n                  <mat-form-field appearance=\"outline\"\n                    ><mat-label>{{ tx('Class') }}</mat-label\n                    ><input\n                      matInput\n                      [(ngModel)]=\"mappingEmptyState.class\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                  /></mat-form-field>\n                  <mat-form-field appearance=\"outline\"\n                    ><mat-label>{{ tx('Style') }}</mat-label\n                    ><input\n                      matInput\n                      [(ngModel)]=\"mappingEmptyState.style\"\n                      (ngModelChange)=\"onMappingChanged()\"\n                  /></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()\">\n          {{ tx('Apply mapping') }}\n        </button>\n        <button\n          mat-button\n          (click)=\"inferFromFields()\"\n          [disabled]=\"!fields.length\"\n        >\n          {{ tx('Infer from schema') }}\n        </button>\n        <div class=\"g g-auto-220 gap-12 ai-end mt-12\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>{{ tx('Skeleton count') }}</mat-label>\n            <input\n              matInput\n              type=\"number\"\n              min=\"0\"\n              [(ngModel)]=\"skeletonCountInput\"\n              (ngModelChange)=\"onSkeletonChanged($event)\"\n            />\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\">{{ tx('Theme preview') }}</span>\n            <mat-button-toggle-group\n              [(ngModel)]=\"skinPreviewTheme\"\n              (change)=\"onSkinChanged()\"\n              appearance=\"legacy\"\n            >\n              <mat-button-toggle [value]=\"'light'\">{{ tx('Light') }}</mat-button-toggle>\n              <mat-button-toggle [value]=\"'dark'\">{{ tx('Dark') }}</mat-button-toggle>\n              <mat-button-toggle [value]=\"'grid'\">{{ tx('Grid') }}</mat-button-toggle>\n            </mat-button-toggle-group>\n          </div>\n          <div class=\"skin-preview-wrap\">\n            <praxis-list-skin-preview\n              [config]=\"working\"\n              [items]=\"previewData\"\n              [theme]=\"skinPreviewTheme\"\n            ></praxis-list-skin-preview>\n          </div>\n        </div>\n      </div>\n    </div>\n  </mat-tab>\n  <mat-tab [label]=\"tx('i18n/A11y')\">\n    <div\n      class=\"editor-content grid gap-3\"\n      *ngIf=\"working?.a11y && working?.events\"\n    >\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Default locale') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.i18n.locale\"\n          (ngModelChange)=\"markDirty()\"\n          [placeholder]=\"tx('e.g.: en-US')\"\n        />\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Default currency') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.i18n.currency\"\n          (ngModelChange)=\"markDirty()\"\n          [placeholder]=\"currencyPlaceholder()\"\n        />\n      </mat-form-field>\n      <mat-divider class=\"my-8\"></mat-divider>\n      <div class=\"subtitle\">{{ tx('Accessibility') }}</div>\n      <div class=\"g g-auto-220 gap-12 ai-end\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('aria-label') }}</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working!.a11y!.ariaLabel\"\n            (ngModelChange)=\"markDirty()\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('aria-labelledby') }}</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working!.a11y!.ariaLabelledBy\"\n            (ngModelChange)=\"markDirty()\"\n          />\n        </mat-form-field>\n      </div>\n      <div class=\"g g-auto-220 gap-12 ai-end\">\n        <mat-slide-toggle\n          [(ngModel)]=\"working!.a11y!.highContrast\"\n          (ngModelChange)=\"markDirty()\"\n          >{{ tx('High contrast') }}</mat-slide-toggle\n        >\n        <mat-slide-toggle\n          [(ngModel)]=\"working!.a11y!.reduceMotion\"\n          (ngModelChange)=\"markDirty()\"\n          >{{ tx('Reduce motion') }}</mat-slide-toggle\n        >\n      </div>\n      <mat-divider class=\"my-8\"></mat-divider>\n      <div class=\"subtitle\">{{ tx('Events') }}</div>\n      <div class=\"g g-auto-220 gap-12 ai-end\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('itemClick') }}</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working!.events!.itemClick\"\n            (ngModelChange)=\"markDirty()\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>actionClick</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working!.events!.actionClick\"\n            (ngModelChange)=\"markDirty()\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>selectionChange</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working!.events!.selectionChange\"\n            (ngModelChange)=\"markDirty()\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>loaded</mat-label>\n          <input\n            matInput\n            [(ngModel)]=\"working!.events!.loaded\"\n            (ngModelChange)=\"markDirty()\"\n          />\n        </mat-form-field>\n      </div>\n    </div>\n  </mat-tab>\n  <mat-tab [label]=\"tx('Selection')\">\n    <div class=\"editor-content grid gap-3\">\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Mode') }}</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.selection.mode\"\n          (ngModelChange)=\"onSelectionChanged()\"\n        >\n          <mat-option value=\"none\">{{ tx('No selection') }}</mat-option>\n          <mat-option value=\"single\">{{ tx('Single') }}</mat-option>\n          <mat-option value=\"multiple\">{{ tx('Multiple') }}</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Form name') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.selection.formControlName\"\n          (ngModelChange)=\"onSelectionChanged()\"\n        />\n        <button\n          mat-icon-button\n          matSuffix\n          type=\"button\"\n          class=\"help-icon-button\"\n          matTooltip=\"formControlName\"\n        >\n          <mat-icon>help_outline</mat-icon>\n        </button>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Form path') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.selection.formControlPath\"\n          (ngModelChange)=\"onSelectionChanged()\"\n        />\n        <button\n          mat-icon-button\n          matSuffix\n          type=\"button\"\n          class=\"help-icon-button\"\n          matTooltip=\"formControlPath\"\n        >\n          <mat-icon>help_outline</mat-icon>\n        </button>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Compare by (field)') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.selection.compareBy\"\n          (ngModelChange)=\"onSelectionChanged()\"\n        />\n        <button\n          mat-icon-button\n          matSuffix\n          type=\"button\"\n          class=\"help-icon-button\"\n          [matTooltip]=\"tx('Unique item key.')\"\n        >\n          <mat-icon>help_outline</mat-icon>\n        </button>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Return') }}</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.selection.return\"\n          (ngModelChange)=\"onSelectionChanged()\"\n        >\n          <mat-option value=\"value\">{{ tx('Value') }}</mat-option>\n          <mat-option value=\"item\">{{ tx('Item') }}</mat-option>\n          <mat-option value=\"id\">{{ tx('ID') }}</mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n  </mat-tab>\n  <mat-tab [label]=\"tx('Appearance')\">\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')\">\n          {{ tx('Pill Soft') }}\n        </button>\n        <button mat-button (click)=\"applySkinPreset('gradient-tile')\">\n          {{ tx('Gradient Tile') }}\n        </button>\n        <button mat-button (click)=\"applySkinPreset('glass')\">\n          {{ tx('Glass') }}\n        </button>\n        <button mat-button (click)=\"applySkinPreset('elevated')\">\n          {{ tx('Elevated') }}\n        </button>\n        <button mat-button (click)=\"applySkinPreset('outline')\">\n          {{ tx('Outline') }}\n        </button>\n        <button mat-button (click)=\"applySkinPreset('flat')\">\n          {{ tx('Flat') }}\n        </button>\n        <button mat-button (click)=\"applySkinPreset('neumorphism')\">\n          {{ tx('Neumorphism') }}\n        </button>\n      </div>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Style') }}</mat-label>\n        <mat-select\n          [(ngModel)]=\"working.skin.type\"\n          (ngModelChange)=\"onSkinTypeChanged($event)\"\n        >\n          <mat-option value=\"pill-soft\">{{ tx('Pill Soft') }}</mat-option>\n          <mat-option value=\"gradient-tile\">{{ tx('Gradient Tile') }}</mat-option>\n          <mat-option value=\"glass\">{{ tx('Glass') }}</mat-option>\n          <mat-option value=\"elevated\">{{ tx('Elevated') }}</mat-option>\n          <mat-option value=\"outline\">{{ tx('Outline') }}</mat-option>\n          <mat-option value=\"flat\">{{ tx('Flat') }}</mat-option>\n          <mat-option value=\"neumorphism\">{{ tx('Neumorphism') }}</mat-option>\n          <mat-option value=\"custom\">{{ tx('Custom') }}</mat-option>\n        </mat-select>\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Radius') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.skin.radius\"\n          (ngModelChange)=\"onSkinChanged()\"\n          [placeholder]=\"tx('e.g.: 1.25rem')\"\n        />\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Shadow') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.skin.shadow\"\n          (ngModelChange)=\"onSkinChanged()\"\n          [placeholder]=\"tx('e.g.: var(--md-sys-elevation-level2)')\"\n        />\n      </mat-form-field>\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Border') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.skin.border\"\n          (ngModelChange)=\"onSkinChanged()\"\n        />\n      </mat-form-field>\n      <mat-form-field\n        *ngIf=\"working.skin.type === 'glass'\"\n        appearance=\"outline\"\n      >\n        <mat-label>{{ tx('Blur') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.skin.backdropBlur\"\n          (ngModelChange)=\"onSkinChanged()\"\n          [placeholder]=\"tx('e.g.: 8px')\"\n        />\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>{{ tx('Gradient from') }}</mat-label>\n          <input\n            matInput\n            [ngModel]=\"working.skin.gradient.from || ''\"\n            (ngModelChange)=\"onSkinGradientChanged('from', $event)\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Gradient to') }}</mat-label>\n          <input\n            matInput\n            [ngModel]=\"working.skin.gradient.to || ''\"\n            (ngModelChange)=\"onSkinGradientChanged('to', $event)\"\n          />\n        </mat-form-field>\n        <mat-form-field appearance=\"outline\">\n          <mat-label>{{ tx('Angle') }}</mat-label>\n          <input\n            matInput\n            type=\"number\"\n            [ngModel]=\"working.skin.gradient.angle ?? 135\"\n            (ngModelChange)=\"onSkinGradientChanged('angle', $event)\"\n          />\n        </mat-form-field>\n      </div>\n\n      <mat-form-field appearance=\"outline\">\n        <mat-label>{{ tx('Extra CSS class (skin.class)') }}</mat-label>\n        <input\n          matInput\n          [(ngModel)]=\"working.skin.class\"\n          (ngModelChange)=\"onSkinChanged()\"\n          [placeholder]=\"tx('e.g.: my-list-skin')\"\n        />\n      </mat-form-field>\n\n      <div\n        *ngIf=\"working.skin.type === 'custom'\"\n        class=\"g g-auto-220 gap-12 ai-end\"\n      >\n        <mat-form-field appearance=\"outline\" class=\"w-full\">\n          <mat-label>{{ tx('Inline style (skin.inlineStyle)') }}</mat-label>\n          <textarea\n            matInput\n            rows=\"4\"\n            [(ngModel)]=\"working.skin.inlineStyle\"\n            (ngModelChange)=\"onSkinChanged()\"\n            [attr.placeholder]=\"':host{--p-list-radius: 1rem}'\"\n          ></textarea>\n        </mat-form-field>\n        <div class=\"text-caption\">\n          {{ tx('CSS class example (add this to your global styles):') }}\n          <pre class=\"code-block\">\n.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          >\n        </div>\n      </div>\n    </div>\n  </mat-tab>\n</mat-tab-group>\n\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
                 }, {
@@ -5943,34 +6661,6 @@ class ListAiAdapter extends BaseAiAdapter {
     }
 }
 
-const PRAXIS_LIST_EN_US = {
-    configEdit: 'Edit configuration',
-    expandDetails: 'Expand details',
-    collapseDetails: 'Collapse details',
-    itemDetails: 'Item details',
-    emptyState: 'No items available',
-};
-
-const PRAXIS_LIST_PT_BR = {
-    configEdit: 'Editar configurações',
-    expandDetails: 'Expandir detalhes',
-    collapseDetails: 'Recolher detalhes',
-    itemDetails: 'Detalhes do item',
-    emptyState: 'Nenhum item disponível',
-};
-
-const PRAXIS_LIST_I18N_NAMESPACE = 'praxis-list';
-function providePraxisListI18n() {
-    return providePraxisI18n({
-        namespaces: {
-            [PRAXIS_LIST_I18N_NAMESPACE]: {
-                'pt-BR': PRAXIS_LIST_PT_BR,
-                'en-US': PRAXIS_LIST_EN_US,
-            },
-        },
-    });
-}
-
 class PraxisListMetricComponent {
     metric;
     metricClasses() {
@@ -6964,6 +7654,7 @@ const ROW_LAYOUT_SUPPORTED_SLOTS = [
 class PraxisList {
     static nextSkinScopeId = 0;
     customizationEnabled = false;
+    hostLocale = inject(LOCALE_ID, { optional: true }) ?? 'en-US';
     config;
     listId;
     componentInstanceId;
@@ -7363,7 +8054,7 @@ class PraxisList {
             .replace(/[^a-z0-9_-]+/g, '-');
     }
     featureLabel(item, expr) {
-        const out = evaluateTemplate({ type: 'text', expr: expr || '' }, item);
+        const out = evaluateTemplate({ type: 'text', expr: expr || '' }, item, this.templateEvaluatorOptions());
         return out?.value ?? '';
     }
     plainText(value) {
@@ -8153,7 +8844,7 @@ class PraxisList {
             };
         }
         if (def.type === 'icon') {
-            const out = evaluateTemplate(def, item);
+            const out = evaluateTemplate(def, item, this.templateEvaluatorOptions());
             // Optional color mapping from config.templating.iconColorMap
             try {
                 const map = this.config?.templating?.iconColorMap;
@@ -8178,7 +8869,7 @@ class PraxisList {
             catch { }
             return out;
         }
-        return evaluateTemplate(def, item);
+        return evaluateTemplate(def, item, this.templateEvaluatorOptions());
     }
     buildUnsupportedComposeNode(def) {
         return {
@@ -8366,9 +9057,15 @@ class PraxisList {
         return [spec.slice(0, idx).trim(), spec.slice(idx + 1).trim()];
     }
     evalString(expr, ctx) {
-        const res = evaluateTemplate({ type: 'text', expr }, ctx?.item ?? ctx);
+        const res = evaluateTemplate({ type: 'text', expr }, ctx?.item ?? ctx, this.templateEvaluatorOptions());
         return res?.value ?? '';
     }
+    templateEvaluatorOptions() {
+        return {
+            i18n: this.config?.i18n,
+            appLocale: this.hostLocale,
+        };
+    }
     parseTwoParams(param) {
         if (!param)
             return [undefined, undefined];