@praxisui/list 5.0.0-beta.0 → 7.0.0-beta.0

package/fesm2022/praxisui-list.mjs

@@ -7,7 +7,7 @@ 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 { 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, PraxisJsonLogicService, GlobalActionService, GLOBAL_DIALOG_SERVICE, ComponentMetadataRegistry, API_URL, LocalStorageAsyncAdapter, LocalStorageConfigService } from '@praxisui/core';
+import { resolveValuePresentation, LoggerService, GenericCrudService, toTitleCase, 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, PraxisJsonLogicService, GlobalActionService, GLOBAL_DIALOG_SERVICE, ComponentMetadataRegistry, API_URL, LocalStorageAsyncAdapter, LocalStorageConfigService } from '@praxisui/core';
 import * as i5 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
 import { MatDividerModule } from '@angular/material/divider';
@@ -27,6 +27,7 @@ import * as i2 from '@angular/forms';
 import { FormsModule, FormControl, ReactiveFormsModule, FormGroup } from '@angular/forms';
 import { BehaviorSubject, combineLatest, of, Subject, debounceTime, takeUntil, distinctUntilChanged as distinctUntilChanged$1 } from 'rxjs';
 import { auditTime, switchMap, map, catchError, finalize, shareReplay, debounceTime as debounceTime$1, distinctUntilChanged, tap, take, takeUntil as takeUntil$1 } from 'rxjs/operators';
+import { PraxisRichContent } from '@praxisui/rich-content';
 import { SETTINGS_PANEL_DATA, SettingsPanelService } from '@praxisui/settings-panel';
 import * as i3$3 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
@@ -886,8 +887,7 @@ function clamp(value, min, max) {
  *
  * @example Basic usage
  * ```html
- * <praxis-executive-badge variant="enterprise">
- *   Enterprise
+ * <praxis-executive-badge variant="enterprise" label="Enterprise">
  * </praxis-executive-badge>
  * ```
  *
@@ -895,8 +895,8 @@ function clamp(value, min, max) {
  * ```html
  * <praxis-executive-badge
  *   [variant]="account.segmentType"
+ *   [label]="account.segmentLabel"
  *   [ariaLabel]="'Account segment: ' + account.segmentLabel">
- *   {{ account.segmentLabel }}
  * </praxis-executive-badge>
  * ```
  *
@@ -911,6 +911,7 @@ class ExecutiveBadgeComponent {
      * If not provided, defaults to "Segment badge: {variant}"
      */
     ariaLabel;
+    label;
     _variant = 'enterprise';
     /**
      * Badge variant type with runtime validation.
@@ -947,32 +948,51 @@ class ExecutiveBadgeComponent {
         };
         return labels[this._variant];
     }
+    get contentNodes() {
+        return [
+            {
+                type: 'text',
+                text: this.displayLabel,
+            },
+        ];
+    }
+    get displayLabel() {
+        return String(this.label || '').trim();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ExecutiveBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: ExecutiveBadgeComponent, isStandalone: true, selector: "praxis-executive-badge", inputs: { ariaLabel: "ariaLabel", variant: "variant" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: ExecutiveBadgeComponent, isStandalone: true, selector: "praxis-executive-badge", inputs: { ariaLabel: "ariaLabel", label: "label", variant: "variant" }, ngImport: i0, template: `
     <span
       class="badge"
       [class]="variantClass"
       role="status"
       [attr.aria-label]="computedAriaLabel"
     >
-      <ng-content></ng-content>
+      <praxis-rich-content
+        rootClassName="badge__content"
+        [nodes]="contentNodes"
+      ></praxis-rich-content>
     </span>
-  `, isInline: true, styles: [".badge{display:inline-flex;align-items:center;padding:0 11px;border-radius:999px;font-size:.69rem;font-weight:700;min-height:21px}.badge-enterprise{background:#eaf4f7;color:#1d769b;border:1px solid #d6e8f0}.badge-corporate{background:#f4efe7;color:#9f8a58;border:1px solid #e7dbc4}.badge-middle{background:#ece8e1;color:#635745;border:1px solid #ddd5ca}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".badge{display:inline-flex;align-items:center;padding:0 11px;border-radius:999px;font-size:.69rem;font-weight:700;min-height:21px}.badge__content{display:inline-flex;align-items:center;min-width:0}.badge-enterprise{background:#eaf4f7;color:#1d769b;border:1px solid #d6e8f0}.badge-corporate{background:#f4efe7;color:#9f8a58;border:1px solid #e7dbc4}.badge-middle{background:#ece8e1;color:#635745;border:1px solid #ddd5ca}\n"], dependencies: [{ kind: "component", type: PraxisRichContent, selector: "praxis-rich-content", inputs: ["document", "nodes", "context", "hostCapabilities", "rootClassName"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ExecutiveBadgeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'praxis-executive-badge', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+            args: [{ selector: 'praxis-executive-badge', standalone: true, imports: [PraxisRichContent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <span
       class="badge"
       [class]="variantClass"
       role="status"
       [attr.aria-label]="computedAriaLabel"
     >
-      <ng-content></ng-content>
+      <praxis-rich-content
+        rootClassName="badge__content"
+        [nodes]="contentNodes"
+      ></praxis-rich-content>
     </span>
-  `, styles: [".badge{display:inline-flex;align-items:center;padding:0 11px;border-radius:999px;font-size:.69rem;font-weight:700;min-height:21px}.badge-enterprise{background:#eaf4f7;color:#1d769b;border:1px solid #d6e8f0}.badge-corporate{background:#f4efe7;color:#9f8a58;border:1px solid #e7dbc4}.badge-middle{background:#ece8e1;color:#635745;border:1px solid #ddd5ca}\n"] }]
+  `, styles: [".badge{display:inline-flex;align-items:center;padding:0 11px;border-radius:999px;font-size:.69rem;font-weight:700;min-height:21px}.badge__content{display:inline-flex;align-items:center;min-width:0}.badge-enterprise{background:#eaf4f7;color:#1d769b;border:1px solid #d6e8f0}.badge-corporate{background:#f4efe7;color:#9f8a58;border:1px solid #e7dbc4}.badge-middle{background:#ece8e1;color:#635745;border:1px solid #ddd5ca}\n"] }]
         }], propDecorators: { ariaLabel: [{
                 type: Input
+            }], label: [{
+                type: Input
             }], variant: [{
                 type: Input
             }] } });
@@ -1079,6 +1099,20 @@ class ExecutiveAlertsComponent {
             : 'requiring attention';
         return `${severity}: ${alert.count} ${plural} ${action}`;
     }
+    alertContentNodes(alert) {
+        return [
+            {
+                type: 'text',
+                text: alert.type === 'warning' ? '△' : '●',
+                className: 'alert-icon',
+            },
+            {
+                type: 'text',
+                text: String(alert.count),
+                className: 'alert-count',
+            },
+        ];
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ExecutiveAlertsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: ExecutiveAlertsComponent, isStandalone: true, selector: "praxis-executive-alerts", inputs: { alerts: "alerts" }, usesOnChanges: true, ngImport: i0, template: `
     @if (validAlerts.length > 0) {
@@ -1096,22 +1130,22 @@ class ExecutiveAlertsComponent {
             [attr.aria-label]="getAlertAriaLabel(alert)"
             tabindex="0"
           >
-            <span class="alert-icon" aria-hidden="true">
-              {{ alert.type === 'warning' ? '△' : '●' }}
-            </span>
-            <span class="alert-count" aria-hidden="true">
-              {{ alert.count }}
+            <span class="alert-content" aria-hidden="true">
+              <praxis-rich-content
+                rootClassName="alert-content__nodes"
+                [nodes]="alertContentNodes(alert)"
+              ></praxis-rich-content>
             </span>
             <span class="sr-only">{{ getAlertDescription(alert) }}</span>
           </span>
         }
       </div>
     }
-  `, isInline: true, styles: [".alerts-container{display:inline-flex;gap:6px}.alert{display:inline-flex;align-items:center;gap:4px;padding:0 7px;border-radius:999px;font-size:.72rem;font-weight:700;min-width:28px;height:20px;justify-content:center;cursor:help;transition:all .2s ease}.alert:hover,.alert:focus{transform:scale(1.05);box-shadow:0 2px 4px #0000001a;outline:2px solid currentColor;outline-offset:2px}.alert-warning{background:#fff7e8;color:#bf8422;border:1px solid #f3ddaf}.alert-critical{background:#fff1f1;color:#c65857;border:1px solid #f3c9c7}.alert-icon,.alert-count{line-height:1}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".alerts-container{display:inline-flex;gap:6px}.alert{display:inline-flex;align-items:center;gap:4px;padding:0 7px;border-radius:999px;font-size:.72rem;font-weight:700;min-width:28px;height:20px;justify-content:center;cursor:help;transition:all .2s ease}.alert:hover,.alert:focus{transform:scale(1.05);box-shadow:0 2px 4px #0000001a;outline:2px solid currentColor;outline-offset:2px}.alert-warning{background:#fff7e8;color:#bf8422;border:1px solid #f3ddaf}.alert-critical{background:#fff1f1;color:#c65857;border:1px solid #f3c9c7}.alert-icon,.alert-count{line-height:1}.alert-content,.alert-content__nodes{display:inline-flex;align-items:center;gap:4px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PraxisRichContent, selector: "praxis-rich-content", inputs: ["document", "nodes", "context", "hostCapabilities", "rootClassName"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ExecutiveAlertsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'praxis-executive-alerts', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+            args: [{ selector: 'praxis-executive-alerts', standalone: true, imports: [CommonModule, PraxisRichContent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     @if (validAlerts.length > 0) {
       <div
         class="alerts-container"
@@ -1127,18 +1161,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
             [attr.aria-label]="getAlertAriaLabel(alert)"
             tabindex="0"
           >
-            <span class="alert-icon" aria-hidden="true">
-              {{ alert.type === 'warning' ? '△' : '●' }}
-            </span>
-            <span class="alert-count" aria-hidden="true">
-              {{ alert.count }}
+            <span class="alert-content" aria-hidden="true">
+              <praxis-rich-content
+                rootClassName="alert-content__nodes"
+                [nodes]="alertContentNodes(alert)"
+              ></praxis-rich-content>
             </span>
             <span class="sr-only">{{ getAlertDescription(alert) }}</span>
           </span>
         }
       </div>
     }
-  `, styles: [".alerts-container{display:inline-flex;gap:6px}.alert{display:inline-flex;align-items:center;gap:4px;padding:0 7px;border-radius:999px;font-size:.72rem;font-weight:700;min-width:28px;height:20px;justify-content:center;cursor:help;transition:all .2s ease}.alert:hover,.alert:focus{transform:scale(1.05);box-shadow:0 2px 4px #0000001a;outline:2px solid currentColor;outline-offset:2px}.alert-warning{background:#fff7e8;color:#bf8422;border:1px solid #f3ddaf}.alert-critical{background:#fff1f1;color:#c65857;border:1px solid #f3c9c7}.alert-icon,.alert-count{line-height:1}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
+  `, styles: [".alerts-container{display:inline-flex;gap:6px}.alert{display:inline-flex;align-items:center;gap:4px;padding:0 7px;border-radius:999px;font-size:.72rem;font-weight:700;min-width:28px;height:20px;justify-content:center;cursor:help;transition:all .2s ease}.alert:hover,.alert:focus{transform:scale(1.05);box-shadow:0 2px 4px #0000001a;outline:2px solid currentColor;outline-offset:2px}.alert-warning{background:#fff7e8;color:#bf8422;border:1px solid #f3ddaf}.alert-critical{background:#fff1f1;color:#c65857;border:1px solid #f3c9c7}.alert-icon,.alert-count{line-height:1}.alert-content,.alert-content__nodes{display:inline-flex;align-items:center;gap:4px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
         }], propDecorators: { alerts: [{
                 type: Input
             }] } });
@@ -1147,19 +1181,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
  * Executive owner component displaying account owner with accessible avatar.
  *
  * This component replaces legacy HTML string-based owner displays with a
- * fully accessible, WCAG 2.1 AA compliant solution featuring an inline SVG avatar.
+ * fully accessible, WCAG 2.1 AA compliant solution backed by shared rich content primitives.
  *
  * @remarks
  * **Accessibility Features:**
- * - WCAG 1.1.1: Non-text content has text alternative (SVG with role and aria-label)
- * - SVG includes <title> element for tooltips
+ * - WCAG 1.1.1: Non-text content has text alternative through avatar labeling
  * - Handles empty/undefined names gracefully
  * - Screen reader announces owner information clearly
  *
  * **Performance:**
  * - OnPush change detection strategy
  * - Input validation for name
- * - Lightweight inline SVG (no external dependencies)
+ * - Shared avatar/text rendering through `PraxisRichContent`
  *
  * @example Basic usage
  * ```html
@@ -1203,64 +1236,40 @@ class ExecutiveOwnerComponent {
     get displayName() {
         return this._name || 'Unassigned';
     }
-    /**
-     * ARIA label for SVG avatar.
-     * Provides context for screen readers.
-     */
-    get avatarAriaLabel() {
-        return this._name
-            ? `Avatar for ${this._name}`
-            : 'Unassigned user avatar';
-    }
-    /**
-     * SVG title element content for tooltip.
-     * Shows on hover in most browsers.
-     */
-    get avatarTitle() {
-        return this._name
-            ? `${this._name}'s avatar`
-            : 'User avatar';
+    get ownerNodes() {
+        return [
+            {
+                type: 'avatar',
+                name: this.displayName,
+                className: 'owner__avatar',
+            },
+            {
+                type: 'text',
+                text: this.displayName,
+                className: 'owner__name',
+            },
+        ];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ExecutiveOwnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: ExecutiveOwnerComponent, isStandalone: true, selector: "praxis-executive-owner", inputs: { name: "name" }, ngImport: i0, template: `
     <div class="owner">
-      <svg
-        class="avatar"
-        width="26"
-        height="26"
-        viewBox="0 0 26 26"
-        role="img"
-        [attr.aria-label]="avatarAriaLabel"
-      >
-        <title>{{ avatarTitle }}</title>
-        <circle cx="13" cy="13" r="13" fill="#eef2f6" stroke="#dfe6ed" stroke-width="1.5"/>
-        <circle cx="13" cy="9" r="3.5" fill="#8a9fb5"/>
-        <circle cx="13" cy="20" r="5.5" fill="#8a9fb5"/>
-      </svg>
-      <span class="name">{{ displayName }}</span>
+      <praxis-rich-content
+        rootClassName="owner__content"
+        [nodes]="ownerNodes"
+      ></praxis-rich-content>
     </div>
-  `, isInline: true, styles: [".owner{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;color:#5f7289;font-weight:500}.avatar{flex-shrink:0}.name{white-space:nowrap}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".owner{display:inline-flex;align-items:center;font-size:.82rem;color:#5f7289;font-weight:500}.owner__content{display:inline-flex;align-items:center;gap:8px}.owner__avatar{flex-shrink:0}.owner__name{white-space:nowrap}\n"], dependencies: [{ kind: "component", type: PraxisRichContent, selector: "praxis-rich-content", inputs: ["document", "nodes", "context", "hostCapabilities", "rootClassName"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ExecutiveOwnerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'praxis-executive-owner', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+            args: [{ selector: 'praxis-executive-owner', standalone: true, imports: [PraxisRichContent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <div class="owner">
-      <svg
-        class="avatar"
-        width="26"
-        height="26"
-        viewBox="0 0 26 26"
-        role="img"
-        [attr.aria-label]="avatarAriaLabel"
-      >
-        <title>{{ avatarTitle }}</title>
-        <circle cx="13" cy="13" r="13" fill="#eef2f6" stroke="#dfe6ed" stroke-width="1.5"/>
-        <circle cx="13" cy="9" r="3.5" fill="#8a9fb5"/>
-        <circle cx="13" cy="20" r="5.5" fill="#8a9fb5"/>
-      </svg>
-      <span class="name">{{ displayName }}</span>
+      <praxis-rich-content
+        rootClassName="owner__content"
+        [nodes]="ownerNodes"
+      ></praxis-rich-content>
     </div>
-  `, styles: [".owner{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;color:#5f7289;font-weight:500}.avatar{flex-shrink:0}.name{white-space:nowrap}\n"] }]
+  `, styles: [".owner{display:inline-flex;align-items:center;font-size:.82rem;color:#5f7289;font-weight:500}.owner__content{display:inline-flex;align-items:center;gap:8px}.owner__avatar{flex-shrink:0}.owner__name{white-space:nowrap}\n"] }]
         }], propDecorators: { name: [{
                 type: Input
             }] } });
@@ -1309,6 +1318,97 @@ class PraxisListSkinPreviewComponent {
     secondary = (item) => this.evalSlot('secondary', item);
     meta = (item) => this.evalSlot('meta', item);
     trailing = (item) => this.evalSlot('trailing', item);
+    previewRichContentNodes(node, options) {
+        if (!node || typeof node !== 'object')
+            return null;
+        const type = String(node.type || 'text').trim();
+        switch (type) {
+            case 'icon':
+                if (!String(node.value || '').trim() || this.isThemeColor(node.color)) {
+                    return null;
+                }
+                return [
+                    {
+                        type: 'icon',
+                        icon: String(node.value),
+                        className: node.class,
+                        style: this.mergeStyleRecords(this.parseInlineStyle(node.style), this.parseInlineStyle(this.iconStyle(node.color))),
+                    },
+                ];
+            case 'image':
+                if (!String(node.value || '').trim() || node.badge?.value) {
+                    return null;
+                }
+                return [
+                    {
+                        type: 'image',
+                        src: String(node.value),
+                        alt: String(node.imageAlt || options?.imageAlt || ''),
+                        className: node.class,
+                        style: this.parseInlineStyle(node.style),
+                    },
+                ];
+            case 'chip':
+                if (this.isThemeColor(node.color))
+                    return null;
+                return [
+                    {
+                        type: 'badge',
+                        label: String(node.value ?? ''),
+                        className: [node.class, (node.variant || 'filled') === 'outlined' ? 'chip-outlined' : '']
+                            .filter(Boolean)
+                            .join(' '),
+                        style: this.mergeStyleRecords(this.parseInlineStyle(this.chipStyle(node.color, node.variant)), this.parseInlineStyle(node.style)),
+                    },
+                ];
+            case 'text':
+                if (options?.slot === 'meta' && this.metaPrefixIcon()) {
+                    return null;
+                }
+                return [
+                    {
+                        type: 'text',
+                        text: String(node.value ?? ''),
+                        className: node.class,
+                        style: this.parseInlineStyle(node.style),
+                    },
+                ];
+            default:
+                return null;
+        }
+    }
+    previewFeatureRichContentNodes(item, feature) {
+        if (!feature)
+            return null;
+        const mode = this.featuresMode();
+        const label = this.featureLabel(item, feature.expr).trim();
+        const nodes = [];
+        const icon = String(feature.icon || '').trim();
+        if (icon && mode !== 'labels-only') {
+            nodes.push({
+                type: 'icon',
+                icon,
+            });
+        }
+        if (mode !== 'icons-only' && label) {
+            nodes.push({
+                type: 'text',
+                text: label,
+                className: feature.class,
+                style: this.parseInlineStyle(feature.style),
+            });
+        }
+        if (!nodes.length)
+            return null;
+        if (nodes.length === 1)
+            return [nodes[0]];
+        return [{
+                type: 'compose',
+                direction: 'row',
+                gap: 'sm',
+                items: nodes,
+            }];
+    }
     featureLabel(item, expr) {
         // simple replacement using the same evaluator used internally
         return String(expr || '').replace(/\$\{([^}]+)\}/g, (_, path) => {
@@ -1411,7 +1511,7 @@ class PraxisListSkinPreviewComponent {
                 .toLowerCase();
             if (!t)
                 return '';
-            return t.replace(/\b\w/g, (m) => m.toUpperCase());
+            return toTitleCase(t);
         }
         catch {
             return String(v ?? '');
@@ -1449,6 +1549,31 @@ class PraxisListSkinPreviewComponent {
             return '';
         return `color:${color};`;
     }
+    parseInlineStyle(style) {
+        const cssText = String(style || '').trim();
+        if (!cssText)
+            return undefined;
+        const entries = cssText
+            .split(';')
+            .map((part) => part.trim())
+            .filter(Boolean)
+            .map((part) => {
+            const separatorIndex = part.indexOf(':');
+            if (separatorIndex === -1)
+                return null;
+            const key = part.slice(0, separatorIndex).trim();
+            const value = part.slice(separatorIndex + 1).trim();
+            if (!key || !value)
+                return null;
+            return [key, value];
+        })
+            .filter((entry) => entry != null);
+        return entries.length ? Object.fromEntries(entries) : undefined;
+    }
+    mergeStyleRecords(...records) {
+        const merged = Object.assign({}, ...records.filter(Boolean));
+        return Object.keys(merged).length ? merged : undefined;
+    }
     ratingMax(def) {
         const max = Number(def?.props?.rating?.max ?? 5);
         if (!Number.isFinite(max))
@@ -1477,11 +1602,18 @@ class PraxisListSkinPreviewComponent {
     // trackBy for preview lists
     trackByIndex = (i) => i;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisListSkinPreviewComponent, deps: [{ token: ListSkinService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: PraxisListSkinPreviewComponent, isStandalone: true, selector: "praxis-list-skin-preview", inputs: { config: "config", items: "items", theme: "theme" }, ngImport: i0, template: "<div class=\"preview-root\" [ngClass]=\"skinClasses\" [attr.data-skin-scope]=\"skinScopeId\">\n  @if (inlineCss) { <style [attr.nonce]=\"cspNonce || null\" [textContent]=\"inlineCss\"></style> }\n\n  @if (isList()) {\n    <mat-list>\n      @for (item of items; track trackByIndex($index)) {\n        <mat-list-item>\n        <div class=\"list-item-content\">\n          @if (leading(item); as lead) {\n            @switch (lead.type) {\n              @case ('icon') { <mat-icon [praxisIcon]=\"lead.value\" [ngClass]=\"lead.class\" [color]=\"isThemeColor(lead.color) ? lead.color : undefined\" [style.cssText]=\"(lead.style ? lead.style + ';' : '') + iconStyle(lead.color)\"></mat-icon> }\n              @case ('image') {\n                <div class=\"lead-image\" [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">\n                  <img [src]=\"lead.value\" [alt]=\"config.templating?.leading?.imageAlt || ''\" />\n                  @if (lead.badge?.value) { <mat-chip class=\"lead-badge\"\n                    [color]=\"isThemeColor(lead.badge?.color) ? lead.badge?.color : undefined\"\n                    [ngClass]=\"(((lead.badge?.variant || 'filled') === 'outlined') ? 'chip-outlined' : '')\"\n                    [style.cssText]=\"chipStyle(lead.badge?.color, lead.badge?.variant)\">{{ lead.badge?.value }}</mat-chip> }\n                </div>\n              }\n              @case ('text') { <span [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">{{ lead.value }}</span> }\n              @case ('chip') { <mat-chip [color]=\"isThemeColor(lead.color) ? lead.color : undefined\" [ngClass]=\"((lead.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\" [style.cssText]=\"chipStyle(lead.color, lead.variant)\">{{ lead.value }}</mat-chip> }\n              @case ('rating') { @for (_ of ratingRange(lead); track $index; let idx = $index) { <mat-icon [praxisIcon]=\"starIcon(idx, lead.value)\" [color]=\"ratingThemeColor(lead)\" [style.cssText]=\"ratingIconStyle(lead)\"></mat-icon> } }\n              @case ('html') { <span [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\" [innerHTML]=\"lead.value\"></span> }\n              @default { <span [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">{{ lead.value }}</span> }\n            }\n          }\n          <div>\n            <div class=\"primary\" [ngClass]=\"primary(item)?.class\" [style.cssText]=\"primary(item)?.style\">{{ primary(item)?.value }}</div>\n            @if ((config.layout?.lines || 1) > 1) { <div class=\"secondary\" [ngClass]=\"secondary(item)?.class\" [style.cssText]=\"secondary(item)?.style\">{{ secondary(item)?.value }}</div> }\n            @if (featuresVisible()) {\n              @for (f of (config.templating?.features || []); track $index; let fi = $index) {\n                <span class=\"feature\">\n                  @if (f.icon && featuresMode() !== 'labels-only') { <mat-icon [praxisIcon]=\"f.icon\"></mat-icon> }\n                  @if (featuresMode() !== 'icons-only') { <span [ngClass]=\"f.class\" [style.cssText]=\"f.style\">{{ featureLabel(item, f.expr) }}</span> }\n                </span>\n              }\n            }\n          </div>\n          @if (meta(item); as m) {\n            <div class=\"meta\" [ngClass]=\"m.class\" [style.cssText]=\"m.style\">\n              @if (metaPrefixIcon(); as mpi) { <mat-icon [praxisIcon]=\"mpi\"></mat-icon> }\n              @switch (m.type) {\n                @case ('chip') { <mat-chip [color]=\"isThemeColor(m.color) ? m.color : undefined\" [ngClass]=\"((m.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\" [style.cssText]=\"chipStyle(m.color, m.variant)\">{{ m.value }}</mat-chip> }\n                @case ('rating') { @for (_ of ratingRange(m); track $index; let idx = $index) { <mat-icon [praxisIcon]=\"starIcon(idx, m.value)\" [color]=\"ratingThemeColor(m)\" [style.cssText]=\"ratingIconStyle(m)\"></mat-icon> } }\n                @case ('icon') { <mat-icon [praxisIcon]=\"m.value\" [color]=\"isThemeColor(m.color) ? m.color : undefined\" [style.cssText]=\"iconStyle(m.color)\"></mat-icon> }\n                @case ('image') { <span class=\"inline-image\"><img [src]=\"m.value\" [alt]=\"m.imageAlt || ''\" /></span> }\n                @case ('html') { <span [innerHTML]=\"m.value\"></span> }\n                @default { <span>{{ m.value }}</span> }\n              }\n            </div>\n          }\n          @if (trailing(item); as tr) {\n            <div class=\"trailing\" [ngClass]=\"tr.class\" [style.cssText]=\"tr.style\">\n              @switch (tr.type) {\n                @case ('chip') { <mat-chip [color]=\"isThemeColor(tr.color) ? tr.color : undefined\" [ngClass]=\"((tr.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\" [style.cssText]=\"chipStyle(tr.color, tr.variant)\">{{ tr.value }}</mat-chip> }\n                @case ('icon') { <mat-icon [praxisIcon]=\"tr.value\" [color]=\"isThemeColor(tr.color) ? tr.color : undefined\" [style.cssText]=\"iconStyle(tr.color)\"></mat-icon> }\n                @case ('image') { <span class=\"inline-image\"><img [src]=\"tr.value\" [alt]=\"tr.imageAlt || ''\" /></span> }\n                @case ('rating') { @for (_ of ratingRange(tr); track $index; let idx = $index) { <mat-icon [praxisIcon]=\"starIcon(idx, tr.value)\" [color]=\"ratingThemeColor(tr)\" [style.cssText]=\"ratingIconStyle(tr)\"></mat-icon> } }\n                @case ('html') { <span [innerHTML]=\"tr.value\"></span> }\n                @default { <span>{{ tr.value }}</span> }\n              }\n            </div>\n          }\n        </div>\n        </mat-list-item>\n      }\n    </mat-list>\n  } @else if (isTiles()) {\n    <div class=\"tiles-grid\">\n      @for (it of items; track trackByIndex($index)) {\n        <div class=\"item-tile\">\n          <div class=\"tile-media\">\n            @if (leading(it); as lead) {\n              @switch (lead.type) {\n                @case ('image') {\n                  <img [src]=\"lead.value\" [alt]=\"config.templating?.leading?.imageAlt || ''\" />\n                }\n                @case ('icon') { <mat-icon [praxisIcon]=\"lead.value\" [ngClass]=\"lead.class\" [color]=\"isThemeColor(lead.color) ? lead.color : undefined\" [style.cssText]=\"(lead.style ? lead.style + ';' : '') + iconStyle(lead.color)\"></mat-icon> }\n                @case ('text') { <span [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">{{ lead.value }}</span> }\n                @case ('chip') { <mat-chip [color]=\"isThemeColor(lead.color) ? lead.color : undefined\" [ngClass]=\"((lead.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\" [style.cssText]=\"chipStyle(lead.color, lead.variant)\">{{ lead.value }}</mat-chip> }\n                @case ('rating') { @for (_ of ratingRange(lead); track $index; let idx = $index) { <mat-icon [praxisIcon]=\"starIcon(idx, lead.value)\" [color]=\"ratingThemeColor(lead)\" [style.cssText]=\"ratingIconStyle(lead)\"></mat-icon> } }\n                @case ('html') { <span [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\" [innerHTML]=\"lead.value\"></span> }\n                @default { <span [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">{{ lead.value }}</span> }\n              }\n            }\n          </div>\n          @if (trailing(it); as tr) {\n            @if (statusPosition() === 'top-right' && (tr?.type === 'chip' || tr?.type === 'icon')) {\n              <div class=\"tile-status\">\n                @if (tr?.type === 'chip') { <mat-chip [color]=\"isThemeColor(tr.color) ? tr.color : undefined\" [ngClass]=\"((tr.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\" [style.cssText]=\"chipStyle(tr.color, tr.variant)\">{{ tr.value }}</mat-chip> }\n                @if (tr?.type === 'icon') { <mat-icon [praxisIcon]=\"tr.value\" [color]=\"isThemeColor(tr.color) ? tr.color : undefined\" [style.cssText]=\"iconStyle(tr.color)\"></mat-icon> }\n              </div>\n            }\n          }\n          <div class=\"tile-body\">\n            <div class=\"primary\" [ngClass]=\"primary(it)?.class\" [style.cssText]=\"primary(it)?.style\">{{ primary(it)?.value }}</div>\n            @if ((config.layout?.lines || 1) > 1) { <div class=\"secondary\" [ngClass]=\"secondary(it)?.class\" [style.cssText]=\"secondary(it)?.style\">{{ secondary(it)?.value }}</div> }\n            @if (meta(it); as m) {\n              <div class=\"meta\" [ngClass]=\"m.class\" [style.cssText]=\"m.style\">\n                @if (metaPrefixIcon(); as mpi) { <mat-icon [praxisIcon]=\"mpi\"></mat-icon> }\n                @switch (m.type) {\n                  @case ('chip') { <mat-chip [color]=\"isThemeColor(m.color) ? m.color : undefined\" [ngClass]=\"((m.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\" [style.cssText]=\"chipStyle(m.color, m.variant)\">{{ m.value }}</mat-chip> }\n                  @case ('rating') { @for (_ of ratingRange(m); track $index; let idx = $index) { <mat-icon [praxisIcon]=\"starIcon(idx, m.value)\" [color]=\"ratingThemeColor(m)\" [style.cssText]=\"ratingIconStyle(m)\"></mat-icon> } }\n                  @case ('icon') { <mat-icon [praxisIcon]=\"m.value\" [color]=\"isThemeColor(m.color) ? m.color : undefined\" [style.cssText]=\"iconStyle(m.color)\"></mat-icon> }\n                  @case ('image') { <span class=\"inline-image\"><img [src]=\"m.value\" [alt]=\"m.imageAlt || ''\" /></span> }\n                  @case ('html') { <span [innerHTML]=\"m.value\"></span> }\n                  @default { <span>{{ m.value }}</span> }\n                }\n              </div>\n            }\n            @if (featuresVisible()) {\n              <div class=\"features\">\n                @for (f of (config.templating?.features || []); track $index; let fi = $index) {\n                  <span class=\"feature\">\n                    @if (f.icon && featuresMode() !== 'labels-only') { <mat-icon [praxisIcon]=\"f.icon\"></mat-icon> }\n                    @if (featuresMode() !== 'icons-only') { <span [ngClass]=\"f.class\" [style.cssText]=\"f.style\">{{ featureLabel(it, f.expr) }}</span> }\n                  </span>\n                }\n              </div>\n            }\n            @if (trailing(it); as tr2) {\n              @if (!(statusPosition() === 'top-right' && (tr2?.type === 'chip' || tr2?.type === 'icon'))) {\n                <div class=\"meta\" [ngClass]=\"tr2.class\" [style.cssText]=\"tr2.style\">\n                  @switch (tr2.type) {\n                    @case ('chip') { <mat-chip [color]=\"isThemeColor(tr2.color) ? tr2.color : undefined\" [ngClass]=\"((tr2.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\" [style.cssText]=\"chipStyle(tr2.color, tr2.variant)\">{{ tr2.value }}</mat-chip> }\n                    @case ('rating') { @for (_ of ratingRange(tr2); track $index; let idx = $index) { <mat-icon [praxisIcon]=\"starIcon(idx, tr2.value)\" [color]=\"ratingThemeColor(tr2)\" [style.cssText]=\"ratingIconStyle(tr2)\"></mat-icon> } }\n                    @case ('image') { <span class=\"inline-image\"><img [src]=\"tr2.value\" [alt]=\"tr2.imageAlt || ''\" /></span> }\n                    @case ('html') { <span [innerHTML]=\"tr2.value\"></span> }\n                    @default { <span>{{ tr2.value }}</span> }\n                  }\n                </div>\n              }\n            }\n          </div>\n        </div>\n      }\n    </div>\n  } @else {\n    <div class=\"cards-grid\">\n      @for (it of items; track trackByIndex($index)) {\n        <div class=\"item-card\">\n        <div class=\"list-item-content\">\n          @if (leading(it); as lead) {\n            @switch (lead.type) {\n              @case ('icon') { <mat-icon [praxisIcon]=\"lead.value\" [ngClass]=\"lead.class\" [color]=\"isThemeColor(lead.color) ? lead.color : undefined\" [style.cssText]=\"(lead.style ? lead.style + ';' : '') + iconStyle(lead.color)\"></mat-icon> }\n              @case ('image') {\n                <div class=\"lead-image\" [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">\n                  <img [src]=\"lead.value\" [alt]=\"config.templating?.leading?.imageAlt || ''\" />\n                  @if (lead.badge?.value) { <mat-chip class=\"lead-badge\"\n                    [color]=\"isThemeColor(lead.badge?.color) ? lead.badge?.color : undefined\"\n                    [ngClass]=\"(((lead.badge?.variant || 'filled') === 'outlined') ? 'chip-outlined' : '')\"\n                    [style.cssText]=\"chipStyle(lead.badge?.color, lead.badge?.variant)\">{{ lead.badge?.value }}</mat-chip> }\n                </div>\n              }\n              @case ('text') { <span [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">{{ lead.value }}</span> }\n              @case ('chip') { <mat-chip [color]=\"isThemeColor(lead.color) ? lead.color : undefined\" [ngClass]=\"((lead.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\" [style.cssText]=\"chipStyle(lead.color, lead.variant)\">{{ lead.value }}</mat-chip> }\n              @case ('rating') { @for (_ of ratingRange(lead); track $index; let idx = $index) { <mat-icon [praxisIcon]=\"starIcon(idx, lead.value)\" [color]=\"ratingThemeColor(lead)\" [style.cssText]=\"ratingIconStyle(lead)\"></mat-icon> } }\n              @case ('html') { <span [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\" [innerHTML]=\"lead.value\"></span> }\n              @default { <span [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">{{ lead.value }}</span> }\n            }\n          }\n          <div>\n            <div class=\"primary\" [ngClass]=\"primary(it)?.class\" [style.cssText]=\"primary(it)?.style\">{{ primary(it)?.value }}</div>\n            @if ((config.layout?.lines || 1) > 1) { <div class=\"secondary\" [ngClass]=\"secondary(it)?.class\" [style.cssText]=\"secondary(it)?.style\">{{ secondary(it)?.value }}</div> }\n            @if (featuresVisible()) {\n              @for (f of (config.templating?.features || []); track $index; let fi = $index) {\n                <span class=\"feature\">\n                  @if (f.icon && featuresMode() !== 'labels-only') { <mat-icon [praxisIcon]=\"f.icon\"></mat-icon> }\n                  @if (featuresMode() !== 'icons-only') { <span [ngClass]=\"f.class\" [style.cssText]=\"f.style\">{{ featureLabel(it, f.expr) }}</span> }\n                </span>\n              }\n            }\n          </div>\n          @if (meta(it); as m) {\n            <div class=\"meta\" [ngClass]=\"m.class\" [style.cssText]=\"m.style\">\n              @if (metaPrefixIcon(); as mpi) { <mat-icon [praxisIcon]=\"mpi\"></mat-icon> }\n              @switch (m.type) {\n                @case ('chip') { <mat-chip [color]=\"isThemeColor(m.color) ? m.color : undefined\" [ngClass]=\"((m.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\" [style.cssText]=\"chipStyle(m.color, m.variant)\">{{ m.value }}</mat-chip> }\n                @case ('rating') { @for (_ of ratingRange(m); track $index; let idx = $index) { <mat-icon [praxisIcon]=\"starIcon(idx, m.value)\" [color]=\"ratingThemeColor(m)\" [style.cssText]=\"ratingIconStyle(m)\"></mat-icon> } }\n                @case ('icon') { <mat-icon [praxisIcon]=\"m.value\" [color]=\"isThemeColor(m.color) ? m.color : undefined\" [style.cssText]=\"iconStyle(m.color)\"></mat-icon> }\n                @case ('image') { <span class=\"inline-image\"><img [src]=\"m.value\" [alt]=\"m.imageAlt || ''\" /></span> }\n                @case ('html') { <span [innerHTML]=\"m.value\"></span> }\n                @default { <span>{{ m.value }}</span> }\n              }\n            </div>\n          }\n          @if (trailing(it); as tr) {\n            <div class=\"trailing\" [ngClass]=\"tr.class\" [style.cssText]=\"tr.style\">\n              @switch (tr.type) {\n                @case ('chip') { <mat-chip [color]=\"isThemeColor(tr.color) ? tr.color : undefined\" [ngClass]=\"((tr.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\" [style.cssText]=\"chipStyle(tr.color, tr.variant)\">{{ tr.value }}</mat-chip> }\n                @case ('icon') { <mat-icon [praxisIcon]=\"tr.value\" [color]=\"isThemeColor(tr.color) ? tr.color : undefined\" [style.cssText]=\"iconStyle(tr.color)\"></mat-icon> }\n                @case ('image') { <span class=\"inline-image\"><img [src]=\"tr.value\" [alt]=\"tr.imageAlt || ''\" /></span> }\n                @case ('rating') { @for (_ of ratingRange(tr); track $index; let idx = $index) { <mat-icon [praxisIcon]=\"starIcon(idx, tr.value)\" [color]=\"ratingThemeColor(tr)\" [style.cssText]=\"ratingIconStyle(tr)\"></mat-icon> } }\n                @case ('html') { <span [innerHTML]=\"tr.value\"></span> }\n                @default { <span>{{ tr.value }}</span> }\n              }\n            </div>\n          }\n        </div>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".preview-root{--p-list-radius: var(--md-sys-shape-corner-medium, 16px);--p-list-shadow: var(--md-sys-elevation-level2);--p-list-border: 1px solid var(--md-sys-color-outline-variant);--p-list-blur: 10px;--p-list-foreground: var(--md-sys-color-on-surface);--p-list-foreground-muted: var(--md-sys-color-on-surface-variant);--p-list-grad-foreground: var(--md-sys-color-on-primary);--p-list-grad-foreground-muted: var(--md-sys-color-on-primary);--p-list-surface: var(--md-sys-color-surface-container);--p-list-accent: var(--md-sys-color-primary);--p-list-item-border: 1px solid var(--md-sys-color-outline-variant);--p-list-grad-from: var(--md-sys-color-primary-container);--p-list-grad-to: var(--md-sys-color-tertiary-container);--p-list-grad-angle: 135deg;--p-list-tile-minW: 240px;--p-list-tile-gap: 16px;--p-list-tile-padding: 16px;--p-list-tile-radius: 16px;--p-list-tile-media-radius: 12px;--p-list-tile-media-ratio: 1 / 1;padding:12px}.preview-light{background:var(--md-sys-color-surface-container-low, var(--md-sys-color-surface))}.preview-dark{background:var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface))}.preview-grid{background-color:var(--md-sys-color-surface-variant, var(--md-sys-color-surface));background-image:linear-gradient(var(--md-sys-color-outline-variant, var(--md-sys-color-outline)) 1px,transparent 1px),linear-gradient(90deg,var(--md-sys-color-outline-variant, var(--md-sys-color-outline)) 1px,transparent 1px);background-size:16px 16px}.skin-elevated,.skin-outline,.skin-flat,.skin-neumorphism{--p-list-item-surface: var(--mdc-elevated-card-container-color, var(--p-list-surface));--p-list-item-border: var(--p-list-border)}.skin-elevated .item-card,.skin-outline .item-card,.skin-flat .item-card,.skin-neumorphism .item-card{background:var(--mdc-elevated-card-container-color, var(--p-list-surface));border-radius:var(--p-list-radius);box-shadow:var(--p-list-shadow);border:var(--p-list-border)}.skin-elevated .item-tile,.skin-outline .item-tile,.skin-flat .item-tile,.skin-neumorphism .item-tile{background:var(--mdc-elevated-card-container-color, var(--p-list-surface));box-shadow:var(--p-list-shadow);border:var(--p-list-border)}.skin-elevated .mat-mdc-list-item .list-item-content,.skin-outline .mat-mdc-list-item .list-item-content,.skin-flat .mat-mdc-list-item .list-item-content,.skin-neumorphism .mat-mdc-list-item .list-item-content{background:var(--mdc-elevated-card-container-color, var(--p-list-surface));border-radius:calc(var(--p-list-radius) * .75);box-shadow:var(--p-list-shadow);border:var(--p-list-item-border);color:var(--p-list-foreground)}.skin-outline{--p-list-shadow: none;--p-list-border: 1px solid var(--md-sys-color-outline)}.skin-flat{--p-list-shadow: none;--p-list-border: 1px solid var(--md-sys-color-outline-variant)}.skin-neumorphism{--p-list-shadow: var(--md-sys-elevation-level2);--p-list-border: 1px solid var(--md-sys-color-outline-variant);--p-list-radius: 1.25rem}.skin-pill-soft .item-card,.skin-pill-soft .item-tile{background:var(--mdc-elevated-card-container-color, var(--p-list-surface));border-radius:calc(var(--p-list-radius) * 1.3);box-shadow:var(--md-sys-elevation-level1);border:var(--p-list-border)}.skin-pill-soft .mat-mdc-list-item .list-item-content{background:var(--mdc-elevated-card-container-color, var(--p-list-surface));border-radius:calc(var(--p-list-radius) * 1.3);box-shadow:var(--md-sys-elevation-level1);border:var(--p-list-border);color:var(--p-list-foreground)}.lead-image{position:relative;width:96px;height:72px;border-radius:12px;overflow:hidden}.lead-image img{width:100%;height:100%;object-fit:cover;display:block}.lead-image .lead-badge{position:absolute;left:8px;bottom:8px}.features{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px;color:var(--p-list-foreground-muted)}.feature{display:inline-flex;align-items:center;gap:6px}.model-media .lead-image{width:136px;height:96px;border-radius:16px}.model-hotel .lead-image{width:160px;height:110px;border-radius:18px}.skin-gradient-tile{--p-list-foreground: var(--p-list-grad-foreground);--p-list-foreground-muted: var(--p-list-grad-foreground-muted)}.skin-gradient-tile .item-card,.skin-gradient-tile .item-tile,.skin-gradient-tile .mat-mdc-list-item .list-item-content{background:linear-gradient(var(--p-list-grad-angle),var(--p-list-grad-from),var(--p-list-grad-to));border-radius:var(--p-list-radius);color:var(--p-list-foreground)}.skin-glass .item-card,.skin-glass .item-tile{background:var(--md-sys-color-surface-container-low);border-radius:var(--p-list-radius);border:1px solid var(--md-sys-color-outline-variant);backdrop-filter:blur(var(--p-list-blur));-webkit-backdrop-filter:blur(var(--p-list-blur))}.skin-glass .mat-mdc-list-item .list-item-content{background:var(--md-sys-color-surface-container-low);border-radius:var(--p-list-radius);border:1px solid var(--md-sys-color-outline-variant);backdrop-filter:blur(var(--p-list-blur));-webkit-backdrop-filter:blur(var(--p-list-blur));color:var(--p-list-foreground)}.list-item-content{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:12px 16px}.primary{font-weight:500;color:var(--p-list-foreground)}.secondary,.meta{color:var(--p-list-foreground-muted)}.trailing{color:var(--p-list-foreground-muted);text-align:end}.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--p-list-tile-minW),1fr));gap:var(--p-list-tile-gap)}.item-card{padding:12px}.tiles-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--p-list-tile-minW),1fr));gap:var(--p-list-tile-gap)}.item-tile{padding:var(--p-list-tile-padding);border-radius:var(--p-list-tile-radius);border:var(--p-list-border);background:var(--p-list-surface);display:grid;gap:8px}.tile-media{width:100%;aspect-ratio:var(--p-list-tile-media-ratio);border-radius:var(--p-list-tile-media-radius);background:var(--md-sys-color-surface-container-low, var(--p-list-surface));display:grid;place-items:center;overflow:hidden}.tile-media img{width:100%;height:100%;object-fit:cover}.tile-body{display:grid;gap:4px}.chip-outlined.mat-mdc-chip{background:transparent!important;border:1px solid currentColor}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i3.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i3.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i5.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: PraxisListSkinPreviewComponent, isStandalone: true, selector: "praxis-list-skin-preview", inputs: { config: "config", items: "items", theme: "theme" }, ngImport: i0, template: "<div class=\"preview-root\" [ngClass]=\"skinClasses\" [attr.data-skin-scope]=\"skinScopeId\">\n  @if (inlineCss) { <style [attr.nonce]=\"cspNonce || null\" [textContent]=\"inlineCss\"></style> }\n\n  @if (isList()) {\n    <mat-list>\n      @for (item of items; track trackByIndex($index)) {\n        <mat-list-item>\n        <div class=\"list-item-content\">\n          @if (leading(item); as lead) {\n            @if (previewRichContentNodes(lead, { imageAlt: config.templating?.leading?.imageAlt }); as leadNodes) {\n              <praxis-rich-content [nodes]=\"leadNodes\"></praxis-rich-content>\n            } @else {\n              @switch (lead.type) {\n                @case ('icon') { <mat-icon [praxisIcon]=\"lead.value\" [ngClass]=\"lead.class\" [color]=\"isThemeColor(lead.color) ? lead.color : undefined\" [style.cssText]=\"(lead.style ? lead.style + ';' : '') + iconStyle(lead.color)\"></mat-icon> }\n                @case ('image') {\n                  <div class=\"lead-image\" [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">\n                    <img [src]=\"lead.value\" [alt]=\"config.templating?.leading?.imageAlt || ''\" />\n                    @if (lead.badge?.value) { <mat-chip class=\"lead-badge\"\n                      [color]=\"isThemeColor(lead.badge?.color) ? lead.badge?.color : undefined\"\n                      [ngClass]=\"(((lead.badge?.variant || 'filled') === 'outlined') ? 'chip-outlined' : '')\"\n                      [style.cssText]=\"chipStyle(lead.badge?.color, lead.badge?.variant)\">{{ lead.badge?.value }}</mat-chip> }\n                  </div>\n                }\n                @case ('text') { <span [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">{{ lead.value }}</span> }\n                @case ('chip') { <mat-chip [color]=\"isThemeColor(lead.color) ? lead.color : undefined\" [ngClass]=\"((lead.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\" [style.cssText]=\"chipStyle(lead.color, lead.variant)\">{{ lead.value }}</mat-chip> }\n                @case ('rating') { @for (_ of ratingRange(lead); track $index; let idx = $index) { <mat-icon [praxisIcon]=\"starIcon(idx, lead.value)\" [color]=\"ratingThemeColor(lead)\" [style.cssText]=\"ratingIconStyle(lead)\"></mat-icon> } }\n                @case ('html') { <span [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\" [innerHTML]=\"lead.value\"></span> }\n                @default { <span [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">{{ lead.value }}</span> }\n              }\n            }\n          }\n          <div>\n            <div class=\"primary\" [ngClass]=\"primary(item)?.class\" [style.cssText]=\"primary(item)?.style\">\n              @if (previewRichContentNodes(primary(item)); as primaryNodes) {\n                <praxis-rich-content [nodes]=\"primaryNodes\"></praxis-rich-content>\n              } @else {\n                {{ primary(item)?.value }}\n              }\n            </div>\n            @if ((config.layout?.lines || 1) > 1) {\n              <div class=\"secondary\" [ngClass]=\"secondary(item)?.class\" [style.cssText]=\"secondary(item)?.style\">\n                @if (previewRichContentNodes(secondary(item)); as secondaryNodes) {\n                  <praxis-rich-content [nodes]=\"secondaryNodes\"></praxis-rich-content>\n                } @else {\n                  {{ secondary(item)?.value }}\n                }\n              </div>\n            }\n            @if (featuresVisible()) {\n              @for (f of (config.templating?.features || []); track $index; let fi = $index) {\n                <span class=\"feature\">\n                  @if (previewFeatureRichContentNodes(item, f); as featureNodes) {\n                    <praxis-rich-content [nodes]=\"featureNodes\"></praxis-rich-content>\n                  } @else {\n                    @if (f.icon && featuresMode() !== 'labels-only') { <mat-icon [praxisIcon]=\"f.icon\"></mat-icon> }\n                    @if (featuresMode() !== 'icons-only') { <span [ngClass]=\"f.class\" [style.cssText]=\"f.style\">{{ featureLabel(item, f.expr) }}</span> }\n                  }\n                </span>\n              }\n            }\n          </div>\n          @if (meta(item); as m) {\n            <div class=\"meta\" [ngClass]=\"m.class\" [style.cssText]=\"m.style\">\n              @if (metaPrefixIcon(); as mpi) { <mat-icon [praxisIcon]=\"mpi\"></mat-icon> }\n              @if (previewRichContentNodes(m, { slot: 'meta' }); as metaNodes) {\n                <praxis-rich-content [nodes]=\"metaNodes\"></praxis-rich-content>\n              } @else {\n                @switch (m.type) {\n                  @case ('chip') { <mat-chip [color]=\"isThemeColor(m.color) ? m.color : undefined\" [ngClass]=\"((m.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\" [style.cssText]=\"chipStyle(m.color, m.variant)\">{{ m.value }}</mat-chip> }\n                  @case ('rating') { @for (_ of ratingRange(m); track $index; let idx = $index) { <mat-icon [praxisIcon]=\"starIcon(idx, m.value)\" [color]=\"ratingThemeColor(m)\" [style.cssText]=\"ratingIconStyle(m)\"></mat-icon> } }\n                  @case ('icon') { <mat-icon [praxisIcon]=\"m.value\" [color]=\"isThemeColor(m.color) ? m.color : undefined\" [style.cssText]=\"iconStyle(m.color)\"></mat-icon> }\n                  @case ('image') { <span class=\"inline-image\"><img [src]=\"m.value\" [alt]=\"m.imageAlt || ''\" /></span> }\n                  @case ('html') { <span [innerHTML]=\"m.value\"></span> }\n                  @default { <span>{{ m.value }}</span> }\n                }\n              }\n            </div>\n          }\n          @if (trailing(item); as tr) {\n            <div class=\"trailing\" [ngClass]=\"tr.class\" [style.cssText]=\"tr.style\">\n              @if (previewRichContentNodes(tr); as trailingNodes) {\n                <praxis-rich-content [nodes]=\"trailingNodes\"></praxis-rich-content>\n              } @else {\n                @switch (tr.type) {\n                  @case ('chip') { <mat-chip [color]=\"isThemeColor(tr.color) ? tr.color : undefined\" [ngClass]=\"((tr.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\" [style.cssText]=\"chipStyle(tr.color, tr.variant)\">{{ tr.value }}</mat-chip> }\n                  @case ('icon') { <mat-icon [praxisIcon]=\"tr.value\" [color]=\"isThemeColor(tr.color) ? tr.color : undefined\" [style.cssText]=\"iconStyle(tr.color)\"></mat-icon> }\n                  @case ('image') { <span class=\"inline-image\"><img [src]=\"tr.value\" [alt]=\"tr.imageAlt || ''\" /></span> }\n                  @case ('rating') { @for (_ of ratingRange(tr); track $index; let idx = $index) { <mat-icon [praxisIcon]=\"starIcon(idx, tr.value)\" [color]=\"ratingThemeColor(tr)\" [style.cssText]=\"ratingIconStyle(tr)\"></mat-icon> } }\n                  @case ('html') { <span [innerHTML]=\"tr.value\"></span> }\n                  @default { <span>{{ tr.value }}</span> }\n                }\n              }\n            </div>\n          }\n        </div>\n        </mat-list-item>\n      }\n    </mat-list>\n  } @else if (isTiles()) {\n    <div class=\"tiles-grid\">\n      @for (it of items; track trackByIndex($index)) {\n        <div class=\"item-tile\">\n          <div class=\"tile-media\">\n            @if (leading(it); as lead) {\n              @if (previewRichContentNodes(lead, { imageAlt: config.templating?.leading?.imageAlt }); as leadNodes) {\n                <praxis-rich-content [nodes]=\"leadNodes\"></praxis-rich-content>\n              } @else {\n                @switch (lead.type) {\n                  @case ('image') {\n                    <img [src]=\"lead.value\" [alt]=\"config.templating?.leading?.imageAlt || ''\" />\n                  }\n                  @case ('icon') { <mat-icon [praxisIcon]=\"lead.value\" [ngClass]=\"lead.class\" [color]=\"isThemeColor(lead.color) ? lead.color : undefined\" [style.cssText]=\"(lead.style ? lead.style + ';' : '') + iconStyle(lead.color)\"></mat-icon> }\n                  @case ('text') { <span [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">{{ lead.value }}</span> }\n                  @case ('chip') { <mat-chip [color]=\"isThemeColor(lead.color) ? lead.color : undefined\" [ngClass]=\"((lead.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\" [style.cssText]=\"chipStyle(lead.color, lead.variant)\">{{ lead.value }}</mat-chip> }\n                  @case ('rating') { @for (_ of ratingRange(lead); track $index; let idx = $index) { <mat-icon [praxisIcon]=\"starIcon(idx, lead.value)\" [color]=\"ratingThemeColor(lead)\" [style.cssText]=\"ratingIconStyle(lead)\"></mat-icon> } }\n                  @case ('html') { <span [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\" [innerHTML]=\"lead.value\"></span> }\n                  @default { <span [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">{{ lead.value }}</span> }\n                }\n              }\n            }\n          </div>\n          @if (trailing(it); as tr) {\n            @if (statusPosition() === 'top-right' && (tr?.type === 'chip' || tr?.type === 'icon')) {\n              <div class=\"tile-status\">\n                @if (previewRichContentNodes(tr); as trailingNodes) {\n                  <praxis-rich-content [nodes]=\"trailingNodes\"></praxis-rich-content>\n                } @else {\n                  @if (tr?.type === 'chip') { <mat-chip [color]=\"isThemeColor(tr.color) ? tr.color : undefined\" [ngClass]=\"((tr.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\" [style.cssText]=\"chipStyle(tr.color, tr.variant)\">{{ tr.value }}</mat-chip> }\n                  @if (tr?.type === 'icon') { <mat-icon [praxisIcon]=\"tr.value\" [color]=\"isThemeColor(tr.color) ? tr.color : undefined\" [style.cssText]=\"iconStyle(tr.color)\"></mat-icon> }\n                }\n              </div>\n            }\n          }\n          <div class=\"tile-body\">\n            <div class=\"primary\" [ngClass]=\"primary(it)?.class\" [style.cssText]=\"primary(it)?.style\">\n              @if (previewRichContentNodes(primary(it)); as primaryNodes) {\n                <praxis-rich-content [nodes]=\"primaryNodes\"></praxis-rich-content>\n              } @else {\n                {{ primary(it)?.value }}\n              }\n            </div>\n            @if ((config.layout?.lines || 1) > 1) {\n              <div class=\"secondary\" [ngClass]=\"secondary(it)?.class\" [style.cssText]=\"secondary(it)?.style\">\n                @if (previewRichContentNodes(secondary(it)); as secondaryNodes) {\n                  <praxis-rich-content [nodes]=\"secondaryNodes\"></praxis-rich-content>\n                } @else {\n                  {{ secondary(it)?.value }}\n                }\n              </div>\n            }\n            @if (meta(it); as m) {\n              <div class=\"meta\" [ngClass]=\"m.class\" [style.cssText]=\"m.style\">\n                @if (metaPrefixIcon(); as mpi) { <mat-icon [praxisIcon]=\"mpi\"></mat-icon> }\n                @if (previewRichContentNodes(m, { slot: 'meta' }); as metaNodes) {\n                  <praxis-rich-content [nodes]=\"metaNodes\"></praxis-rich-content>\n                } @else {\n                  @switch (m.type) {\n                    @case ('chip') { <mat-chip [color]=\"isThemeColor(m.color) ? m.color : undefined\" [ngClass]=\"((m.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\" [style.cssText]=\"chipStyle(m.color, m.variant)\">{{ m.value }}</mat-chip> }\n                    @case ('rating') { @for (_ of ratingRange(m); track $index; let idx = $index) { <mat-icon [praxisIcon]=\"starIcon(idx, m.value)\" [color]=\"ratingThemeColor(m)\" [style.cssText]=\"ratingIconStyle(m)\"></mat-icon> } }\n                    @case ('icon') { <mat-icon [praxisIcon]=\"m.value\" [color]=\"isThemeColor(m.color) ? m.color : undefined\" [style.cssText]=\"iconStyle(m.color)\"></mat-icon> }\n                    @case ('image') { <span class=\"inline-image\"><img [src]=\"m.value\" [alt]=\"m.imageAlt || ''\" /></span> }\n                    @case ('html') { <span [innerHTML]=\"m.value\"></span> }\n                    @default { <span>{{ m.value }}</span> }\n                  }\n                }\n              </div>\n            }\n            @if (featuresVisible()) {\n              <div class=\"features\">\n                @for (f of (config.templating?.features || []); track $index; let fi = $index) {\n                  <span class=\"feature\">\n                    @if (previewFeatureRichContentNodes(it, f); as featureNodes) {\n                      <praxis-rich-content [nodes]=\"featureNodes\"></praxis-rich-content>\n                    } @else {\n                      @if (f.icon && featuresMode() !== 'labels-only') { <mat-icon [praxisIcon]=\"f.icon\"></mat-icon> }\n                      @if (featuresMode() !== 'icons-only') { <span [ngClass]=\"f.class\" [style.cssText]=\"f.style\">{{ featureLabel(it, f.expr) }}</span> }\n                    }\n                  </span>\n                }\n              </div>\n            }\n            @if (trailing(it); as tr2) {\n              @if (!(statusPosition() === 'top-right' && (tr2?.type === 'chip' || tr2?.type === 'icon'))) {\n                <div class=\"meta\" [ngClass]=\"tr2.class\" [style.cssText]=\"tr2.style\">\n                  @if (previewRichContentNodes(tr2); as trailingNodes) {\n                    <praxis-rich-content [nodes]=\"trailingNodes\"></praxis-rich-content>\n                  } @else {\n                    @switch (tr2.type) {\n                      @case ('chip') { <mat-chip [color]=\"isThemeColor(tr2.color) ? tr2.color : undefined\" [ngClass]=\"((tr2.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\" [style.cssText]=\"chipStyle(tr2.color, tr2.variant)\">{{ tr2.value }}</mat-chip> }\n                      @case ('rating') { @for (_ of ratingRange(tr2); track $index; let idx = $index) { <mat-icon [praxisIcon]=\"starIcon(idx, tr2.value)\" [color]=\"ratingThemeColor(tr2)\" [style.cssText]=\"ratingIconStyle(tr2)\"></mat-icon> } }\n                      @case ('image') { <span class=\"inline-image\"><img [src]=\"tr2.value\" [alt]=\"tr2.imageAlt || ''\" /></span> }\n                      @case ('html') { <span [innerHTML]=\"tr2.value\"></span> }\n                      @default { <span>{{ tr2.value }}</span> }\n                    }\n                  }\n                </div>\n              }\n            }\n          </div>\n        </div>\n      }\n    </div>\n  } @else {\n    <div class=\"cards-grid\">\n      @for (it of items; track trackByIndex($index)) {\n        <div class=\"item-card\">\n        <div class=\"list-item-content\">\n          @if (leading(it); as lead) {\n            @if (previewRichContentNodes(lead, { imageAlt: config.templating?.leading?.imageAlt }); as leadNodes) {\n              <praxis-rich-content [nodes]=\"leadNodes\"></praxis-rich-content>\n            } @else {\n              @switch (lead.type) {\n                @case ('icon') { <mat-icon [praxisIcon]=\"lead.value\" [ngClass]=\"lead.class\" [color]=\"isThemeColor(lead.color) ? lead.color : undefined\" [style.cssText]=\"(lead.style ? lead.style + ';' : '') + iconStyle(lead.color)\"></mat-icon> }\n                @case ('image') {\n                  <div class=\"lead-image\" [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">\n                    <img [src]=\"lead.value\" [alt]=\"config.templating?.leading?.imageAlt || ''\" />\n                    @if (lead.badge?.value) { <mat-chip class=\"lead-badge\"\n                      [color]=\"isThemeColor(lead.badge?.color) ? lead.badge?.color : undefined\"\n                      [ngClass]=\"(((lead.badge?.variant || 'filled') === 'outlined') ? 'chip-outlined' : '')\"\n                      [style.cssText]=\"chipStyle(lead.badge?.color, lead.badge?.variant)\">{{ lead.badge?.value }}</mat-chip> }\n                  </div>\n                }\n                @case ('text') { <span [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">{{ lead.value }}</span> }\n                @case ('chip') { <mat-chip [color]=\"isThemeColor(lead.color) ? lead.color : undefined\" [ngClass]=\"((lead.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\" [style.cssText]=\"chipStyle(lead.color, lead.variant)\">{{ lead.value }}</mat-chip> }\n                @case ('rating') { @for (_ of ratingRange(lead); track $index; let idx = $index) { <mat-icon [praxisIcon]=\"starIcon(idx, lead.value)\" [color]=\"ratingThemeColor(lead)\" [style.cssText]=\"ratingIconStyle(lead)\"></mat-icon> } }\n                @case ('html') { <span [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\" [innerHTML]=\"lead.value\"></span> }\n                @default { <span [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">{{ lead.value }}</span> }\n              }\n            }\n          }\n          <div>\n            <div class=\"primary\" [ngClass]=\"primary(it)?.class\" [style.cssText]=\"primary(it)?.style\">\n              @if (previewRichContentNodes(primary(it)); as primaryNodes) {\n                <praxis-rich-content [nodes]=\"primaryNodes\"></praxis-rich-content>\n              } @else {\n                {{ primary(it)?.value }}\n              }\n            </div>\n            @if ((config.layout?.lines || 1) > 1) {\n              <div class=\"secondary\" [ngClass]=\"secondary(it)?.class\" [style.cssText]=\"secondary(it)?.style\">\n                @if (previewRichContentNodes(secondary(it)); as secondaryNodes) {\n                  <praxis-rich-content [nodes]=\"secondaryNodes\"></praxis-rich-content>\n                } @else {\n                  {{ secondary(it)?.value }}\n                }\n              </div>\n            }\n            @if (featuresVisible()) {\n              @for (f of (config.templating?.features || []); track $index; let fi = $index) {\n                <span class=\"feature\">\n                  @if (previewFeatureRichContentNodes(it, f); as featureNodes) {\n                    <praxis-rich-content [nodes]=\"featureNodes\"></praxis-rich-content>\n                  } @else {\n                    @if (f.icon && featuresMode() !== 'labels-only') { <mat-icon [praxisIcon]=\"f.icon\"></mat-icon> }\n                    @if (featuresMode() !== 'icons-only') { <span [ngClass]=\"f.class\" [style.cssText]=\"f.style\">{{ featureLabel(it, f.expr) }}</span> }\n                  }\n                </span>\n              }\n            }\n          </div>\n          @if (meta(it); as m) {\n            <div class=\"meta\" [ngClass]=\"m.class\" [style.cssText]=\"m.style\">\n              @if (metaPrefixIcon(); as mpi) { <mat-icon [praxisIcon]=\"mpi\"></mat-icon> }\n              @if (previewRichContentNodes(m, { slot: 'meta' }); as metaNodes) {\n                <praxis-rich-content [nodes]=\"metaNodes\"></praxis-rich-content>\n              } @else {\n                @switch (m.type) {\n                  @case ('chip') { <mat-chip [color]=\"isThemeColor(m.color) ? m.color : undefined\" [ngClass]=\"((m.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\" [style.cssText]=\"chipStyle(m.color, m.variant)\">{{ m.value }}</mat-chip> }\n                  @case ('rating') { @for (_ of ratingRange(m); track $index; let idx = $index) { <mat-icon [praxisIcon]=\"starIcon(idx, m.value)\" [color]=\"ratingThemeColor(m)\" [style.cssText]=\"ratingIconStyle(m)\"></mat-icon> } }\n                  @case ('icon') { <mat-icon [praxisIcon]=\"m.value\" [color]=\"isThemeColor(m.color) ? m.color : undefined\" [style.cssText]=\"iconStyle(m.color)\"></mat-icon> }\n                  @case ('image') { <span class=\"inline-image\"><img [src]=\"m.value\" [alt]=\"m.imageAlt || ''\" /></span> }\n                  @case ('html') { <span [innerHTML]=\"m.value\"></span> }\n                  @default { <span>{{ m.value }}</span> }\n                }\n              }\n            </div>\n          }\n          @if (trailing(it); as tr) {\n            <div class=\"trailing\" [ngClass]=\"tr.class\" [style.cssText]=\"tr.style\">\n              @if (previewRichContentNodes(tr); as trailingNodes) {\n                <praxis-rich-content [nodes]=\"trailingNodes\"></praxis-rich-content>\n              } @else {\n                @switch (tr.type) {\n                  @case ('chip') { <mat-chip [color]=\"isThemeColor(tr.color) ? tr.color : undefined\" [ngClass]=\"((tr.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\" [style.cssText]=\"chipStyle(tr.color, tr.variant)\">{{ tr.value }}</mat-chip> }\n                  @case ('icon') { <mat-icon [praxisIcon]=\"tr.value\" [color]=\"isThemeColor(tr.color) ? tr.color : undefined\" [style.cssText]=\"iconStyle(tr.color)\"></mat-icon> }\n                  @case ('image') { <span class=\"inline-image\"><img [src]=\"tr.value\" [alt]=\"tr.imageAlt || ''\" /></span> }\n                  @case ('rating') { @for (_ of ratingRange(tr); track $index; let idx = $index) { <mat-icon [praxisIcon]=\"starIcon(idx, tr.value)\" [color]=\"ratingThemeColor(tr)\" [style.cssText]=\"ratingIconStyle(tr)\"></mat-icon> } }\n                  @case ('html') { <span [innerHTML]=\"tr.value\"></span> }\n                  @default { <span>{{ tr.value }}</span> }\n                }\n              }\n            </div>\n          }\n        </div>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".preview-root{--p-list-radius: var(--md-sys-shape-corner-medium, 16px);--p-list-shadow: var(--md-sys-elevation-level2);--p-list-border: 1px solid var(--md-sys-color-outline-variant);--p-list-blur: 10px;--p-list-foreground: var(--md-sys-color-on-surface);--p-list-foreground-muted: var(--md-sys-color-on-surface-variant);--p-list-grad-foreground: var(--md-sys-color-on-primary);--p-list-grad-foreground-muted: var(--md-sys-color-on-primary);--p-list-surface: var(--md-sys-color-surface-container);--p-list-accent: var(--md-sys-color-primary);--p-list-item-border: 1px solid var(--md-sys-color-outline-variant);--p-list-grad-from: var(--md-sys-color-primary-container);--p-list-grad-to: var(--md-sys-color-tertiary-container);--p-list-grad-angle: 135deg;--p-list-tile-minW: 240px;--p-list-tile-gap: 16px;--p-list-tile-padding: 16px;--p-list-tile-radius: 16px;--p-list-tile-media-radius: 12px;--p-list-tile-media-ratio: 1 / 1;padding:12px}.preview-light{background:var(--md-sys-color-surface-container-low, var(--md-sys-color-surface))}.preview-dark{background:var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface))}.preview-grid{background-color:var(--md-sys-color-surface-variant, var(--md-sys-color-surface));background-image:linear-gradient(var(--md-sys-color-outline-variant, var(--md-sys-color-outline)) 1px,transparent 1px),linear-gradient(90deg,var(--md-sys-color-outline-variant, var(--md-sys-color-outline)) 1px,transparent 1px);background-size:16px 16px}.skin-elevated,.skin-outline,.skin-flat,.skin-neumorphism{--p-list-item-surface: var(--mdc-elevated-card-container-color, var(--p-list-surface));--p-list-item-border: var(--p-list-border)}.skin-elevated .item-card,.skin-outline .item-card,.skin-flat .item-card,.skin-neumorphism .item-card{background:var(--mdc-elevated-card-container-color, var(--p-list-surface));border-radius:var(--p-list-radius);box-shadow:var(--p-list-shadow);border:var(--p-list-border)}.skin-elevated .item-tile,.skin-outline .item-tile,.skin-flat .item-tile,.skin-neumorphism .item-tile{background:var(--mdc-elevated-card-container-color, var(--p-list-surface));box-shadow:var(--p-list-shadow);border:var(--p-list-border)}.skin-elevated .mat-mdc-list-item .list-item-content,.skin-outline .mat-mdc-list-item .list-item-content,.skin-flat .mat-mdc-list-item .list-item-content,.skin-neumorphism .mat-mdc-list-item .list-item-content{background:var(--mdc-elevated-card-container-color, var(--p-list-surface));border-radius:calc(var(--p-list-radius) * .75);box-shadow:var(--p-list-shadow);border:var(--p-list-item-border);color:var(--p-list-foreground)}.skin-outline{--p-list-shadow: none;--p-list-border: 1px solid var(--md-sys-color-outline)}.skin-flat{--p-list-shadow: none;--p-list-border: 1px solid var(--md-sys-color-outline-variant)}.skin-neumorphism{--p-list-shadow: var(--md-sys-elevation-level2);--p-list-border: 1px solid var(--md-sys-color-outline-variant);--p-list-radius: 1.25rem}.skin-pill-soft .item-card,.skin-pill-soft .item-tile{background:var(--mdc-elevated-card-container-color, var(--p-list-surface));border-radius:calc(var(--p-list-radius) * 1.3);box-shadow:var(--md-sys-elevation-level1);border:var(--p-list-border)}.skin-pill-soft .mat-mdc-list-item .list-item-content{background:var(--mdc-elevated-card-container-color, var(--p-list-surface));border-radius:calc(var(--p-list-radius) * 1.3);box-shadow:var(--md-sys-elevation-level1);border:var(--p-list-border);color:var(--p-list-foreground)}.lead-image{position:relative;width:96px;height:72px;border-radius:12px;overflow:hidden}.lead-image img{width:100%;height:100%;object-fit:cover;display:block}.lead-image .lead-badge{position:absolute;left:8px;bottom:8px}.features{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px;color:var(--p-list-foreground-muted)}.feature{display:inline-flex;align-items:center;gap:6px}.model-media .lead-image{width:136px;height:96px;border-radius:16px}.model-hotel .lead-image{width:160px;height:110px;border-radius:18px}.skin-gradient-tile{--p-list-foreground: var(--p-list-grad-foreground);--p-list-foreground-muted: var(--p-list-grad-foreground-muted)}.skin-gradient-tile .item-card,.skin-gradient-tile .item-tile,.skin-gradient-tile .mat-mdc-list-item .list-item-content{background:linear-gradient(var(--p-list-grad-angle),var(--p-list-grad-from),var(--p-list-grad-to));border-radius:var(--p-list-radius);color:var(--p-list-foreground)}.skin-glass .item-card,.skin-glass .item-tile{background:var(--md-sys-color-surface-container-low);border-radius:var(--p-list-radius);border:1px solid var(--md-sys-color-outline-variant);backdrop-filter:blur(var(--p-list-blur));-webkit-backdrop-filter:blur(var(--p-list-blur))}.skin-glass .mat-mdc-list-item .list-item-content{background:var(--md-sys-color-surface-container-low);border-radius:var(--p-list-radius);border:1px solid var(--md-sys-color-outline-variant);backdrop-filter:blur(var(--p-list-blur));-webkit-backdrop-filter:blur(var(--p-list-blur));color:var(--p-list-foreground)}.list-item-content{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:12px 16px}.primary{font-weight:500;color:var(--p-list-foreground)}.secondary,.meta{color:var(--p-list-foreground-muted)}.trailing{color:var(--p-list-foreground-muted);text-align:end}.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--p-list-tile-minW),1fr));gap:var(--p-list-tile-gap)}.item-card{padding:12px}.tiles-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--p-list-tile-minW),1fr));gap:var(--p-list-tile-gap)}.item-tile{padding:var(--p-list-tile-padding);border-radius:var(--p-list-tile-radius);border:var(--p-list-border);background:var(--p-list-surface);display:grid;gap:8px}.tile-media{width:100%;aspect-ratio:var(--p-list-tile-media-ratio);border-radius:var(--p-list-tile-media-radius);background:var(--md-sys-color-surface-container-low, var(--p-list-surface));display:grid;place-items:center;overflow:hidden}.tile-media img{width:100%;height:100%;object-fit:cover}.tile-body{display:grid;gap:4px}.chip-outlined.mat-mdc-chip{background:transparent!important;border:1px solid currentColor}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i3.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i3.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i5.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "component", type: PraxisRichContent, selector: "praxis-rich-content", inputs: ["document", "nodes", "context", "hostCapabilities", "rootClassName"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisListSkinPreviewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'praxis-list-skin-preview', standalone: true, imports: [CommonModule, MatListModule, MatIconModule, MatChipsModule, PraxisIconDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"preview-root\" [ngClass]=\"skinClasses\" [attr.data-skin-scope]=\"skinScopeId\">\n  @if (inlineCss) { <style [attr.nonce]=\"cspNonce || null\" [textContent]=\"inlineCss\"></style> }\n\n  @if (isList()) {\n    <mat-list>\n      @for (item of items; track trackByIndex($index)) {\n        <mat-list-item>\n        <div class=\"list-item-content\">\n          @if (leading(item); as lead) {\n            @switch (lead.type) {\n              @case ('icon') { <mat-icon [praxisIcon]=\"lead.value\" [ngClass]=\"lead.class\" [color]=\"isThemeColor(lead.color) ? lead.color : undefined\" [style.cssText]=\"(lead.style ? lead.style + ';' : '') + iconStyle(lead.color)\"></mat-icon> }\n              @case ('image') {\n                <div class=\"lead-image\" [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">\n                  <img [src]=\"lead.value\" [alt]=\"config.templating?.leading?.imageAlt || ''\" />\n                  @if (lead.badge?.value) { <mat-chip class=\"lead-badge\"\n                    [color]=\"isThemeColor(lead.badge?.color) ? lead.badge?.color : undefined\"\n                    [ngClass]=\"(((lead.badge?.variant || 'filled') === 'outlined') ? 'chip-outlined' : '')\"\n                    [style.cssText]=\"chipStyle(lead.badge?.color, lead.badge?.variant)\">{{ lead.badge?.value }}</mat-chip> }\n                </div>\n              }\n              @case ('text') { <span [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">{{ lead.value }}</span> }\n              @case ('chip') { <mat-chip [color]=\"isThemeColor(lead.color) ? lead.color : undefined\" [ngClass]=\"((lead.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\" [style.cssText]=\"chipStyle(lead.color, lead.variant)\">{{ lead.value }}</mat-chip> }\n              @case ('rating') { @for (_ of ratingRange(lead); track $index; let idx = $index) { <mat-icon [praxisIcon]=\"starIcon(idx, lead.value)\" [color]=\"ratingThemeColor(lead)\" [style.cssText]=\"ratingIconStyle(lead)\"></mat-icon> } }\n              @case ('html') { <span [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\" [innerHTML]=\"lead.value\"></span> }\n              @default { <span [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">{{ lead.value }}</span> }\n            }\n          }\n          <div>\n            <div class=\"primary\" [ngClass]=\"primary(item)?.class\" [style.cssText]=\"primary(item)?.style\">{{ primary(item)?.value }}</div>\n            @if ((config.layout?.lines || 1) > 1) { <div class=\"secondary\" [ngClass]=\"secondary(item)?.class\" [style.cssText]=\"secondary(item)?.style\">{{ secondary(item)?.value }}</div> }\n            @if (featuresVisible()) {\n              @for (f of (config.templating?.features || []); track $index; let fi = $index) {\n                <span class=\"feature\">\n                  @if (f.icon && featuresMode() !== 'labels-only') { <mat-icon [praxisIcon]=\"f.icon\"></mat-icon> }\n                  @if (featuresMode() !== 'icons-only') { <span [ngClass]=\"f.class\" [style.cssText]=\"f.style\">{{ featureLabel(item, f.expr) }}</span> }\n                </span>\n              }\n            }\n          </div>\n          @if (meta(item); as m) {\n            <div class=\"meta\" [ngClass]=\"m.class\" [style.cssText]=\"m.style\">\n              @if (metaPrefixIcon(); as mpi) { <mat-icon [praxisIcon]=\"mpi\"></mat-icon> }\n              @switch (m.type) {\n                @case ('chip') { <mat-chip [color]=\"isThemeColor(m.color) ? m.color : undefined\" [ngClass]=\"((m.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\" [style.cssText]=\"chipStyle(m.color, m.variant)\">{{ m.value }}</mat-chip> }\n                @case ('rating') { @for (_ of ratingRange(m); track $index; let idx = $index) { <mat-icon [praxisIcon]=\"starIcon(idx, m.value)\" [color]=\"ratingThemeColor(m)\" [style.cssText]=\"ratingIconStyle(m)\"></mat-icon> } }\n                @case ('icon') { <mat-icon [praxisIcon]=\"m.value\" [color]=\"isThemeColor(m.color) ? m.color : undefined\" [style.cssText]=\"iconStyle(m.color)\"></mat-icon> }\n                @case ('image') { <span class=\"inline-image\"><img [src]=\"m.value\" [alt]=\"m.imageAlt || ''\" /></span> }\n                @case ('html') { <span [innerHTML]=\"m.value\"></span> }\n                @default { <span>{{ m.value }}</span> }\n              }\n            </div>\n          }\n          @if (trailing(item); as tr) {\n            <div class=\"trailing\" [ngClass]=\"tr.class\" [style.cssText]=\"tr.style\">\n              @switch (tr.type) {\n                @case ('chip') { <mat-chip [color]=\"isThemeColor(tr.color) ? tr.color : undefined\" [ngClass]=\"((tr.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\" [style.cssText]=\"chipStyle(tr.color, tr.variant)\">{{ tr.value }}</mat-chip> }\n                @case ('icon') { <mat-icon [praxisIcon]=\"tr.value\" [color]=\"isThemeColor(tr.color) ? tr.color : undefined\" [style.cssText]=\"iconStyle(tr.color)\"></mat-icon> }\n                @case ('image') { <span class=\"inline-image\"><img [src]=\"tr.value\" [alt]=\"tr.imageAlt || ''\" /></span> }\n                @case ('rating') { @for (_ of ratingRange(tr); track $index; let idx = $index) { <mat-icon [praxisIcon]=\"starIcon(idx, tr.value)\" [color]=\"ratingThemeColor(tr)\" [style.cssText]=\"ratingIconStyle(tr)\"></mat-icon> } }\n                @case ('html') { <span [innerHTML]=\"tr.value\"></span> }\n                @default { <span>{{ tr.value }}</span> }\n              }\n            </div>\n          }\n        </div>\n        </mat-list-item>\n      }\n    </mat-list>\n  } @else if (isTiles()) {\n    <div class=\"tiles-grid\">\n      @for (it of items; track trackByIndex($index)) {\n        <div class=\"item-tile\">\n          <div class=\"tile-media\">\n            @if (leading(it); as lead) {\n              @switch (lead.type) {\n                @case ('image') {\n                  <img [src]=\"lead.value\" [alt]=\"config.templating?.leading?.imageAlt || ''\" />\n                }\n                @case ('icon') { <mat-icon [praxisIcon]=\"lead.value\" [ngClass]=\"lead.class\" [color]=\"isThemeColor(lead.color) ? lead.color : undefined\" [style.cssText]=\"(lead.style ? lead.style + ';' : '') + iconStyle(lead.color)\"></mat-icon> }\n                @case ('text') { <span [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">{{ lead.value }}</span> }\n                @case ('chip') { <mat-chip [color]=\"isThemeColor(lead.color) ? lead.color : undefined\" [ngClass]=\"((lead.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\" [style.cssText]=\"chipStyle(lead.color, lead.variant)\">{{ lead.value }}</mat-chip> }\n                @case ('rating') { @for (_ of ratingRange(lead); track $index; let idx = $index) { <mat-icon [praxisIcon]=\"starIcon(idx, lead.value)\" [color]=\"ratingThemeColor(lead)\" [style.cssText]=\"ratingIconStyle(lead)\"></mat-icon> } }\n                @case ('html') { <span [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\" [innerHTML]=\"lead.value\"></span> }\n                @default { <span [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">{{ lead.value }}</span> }\n              }\n            }\n          </div>\n          @if (trailing(it); as tr) {\n            @if (statusPosition() === 'top-right' && (tr?.type === 'chip' || tr?.type === 'icon')) {\n              <div class=\"tile-status\">\n                @if (tr?.type === 'chip') { <mat-chip [color]=\"isThemeColor(tr.color) ? tr.color : undefined\" [ngClass]=\"((tr.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\" [style.cssText]=\"chipStyle(tr.color, tr.variant)\">{{ tr.value }}</mat-chip> }\n                @if (tr?.type === 'icon') { <mat-icon [praxisIcon]=\"tr.value\" [color]=\"isThemeColor(tr.color) ? tr.color : undefined\" [style.cssText]=\"iconStyle(tr.color)\"></mat-icon> }\n              </div>\n            }\n          }\n          <div class=\"tile-body\">\n            <div class=\"primary\" [ngClass]=\"primary(it)?.class\" [style.cssText]=\"primary(it)?.style\">{{ primary(it)?.value }}</div>\n            @if ((config.layout?.lines || 1) > 1) { <div class=\"secondary\" [ngClass]=\"secondary(it)?.class\" [style.cssText]=\"secondary(it)?.style\">{{ secondary(it)?.value }}</div> }\n            @if (meta(it); as m) {\n              <div class=\"meta\" [ngClass]=\"m.class\" [style.cssText]=\"m.style\">\n                @if (metaPrefixIcon(); as mpi) { <mat-icon [praxisIcon]=\"mpi\"></mat-icon> }\n                @switch (m.type) {\n                  @case ('chip') { <mat-chip [color]=\"isThemeColor(m.color) ? m.color : undefined\" [ngClass]=\"((m.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\" [style.cssText]=\"chipStyle(m.color, m.variant)\">{{ m.value }}</mat-chip> }\n                  @case ('rating') { @for (_ of ratingRange(m); track $index; let idx = $index) { <mat-icon [praxisIcon]=\"starIcon(idx, m.value)\" [color]=\"ratingThemeColor(m)\" [style.cssText]=\"ratingIconStyle(m)\"></mat-icon> } }\n                  @case ('icon') { <mat-icon [praxisIcon]=\"m.value\" [color]=\"isThemeColor(m.color) ? m.color : undefined\" [style.cssText]=\"iconStyle(m.color)\"></mat-icon> }\n                  @case ('image') { <span class=\"inline-image\"><img [src]=\"m.value\" [alt]=\"m.imageAlt || ''\" /></span> }\n                  @case ('html') { <span [innerHTML]=\"m.value\"></span> }\n                  @default { <span>{{ m.value }}</span> }\n                }\n              </div>\n            }\n            @if (featuresVisible()) {\n              <div class=\"features\">\n                @for (f of (config.templating?.features || []); track $index; let fi = $index) {\n                  <span class=\"feature\">\n                    @if (f.icon && featuresMode() !== 'labels-only') { <mat-icon [praxisIcon]=\"f.icon\"></mat-icon> }\n                    @if (featuresMode() !== 'icons-only') { <span [ngClass]=\"f.class\" [style.cssText]=\"f.style\">{{ featureLabel(it, f.expr) }}</span> }\n                  </span>\n                }\n              </div>\n            }\n            @if (trailing(it); as tr2) {\n              @if (!(statusPosition() === 'top-right' && (tr2?.type === 'chip' || tr2?.type === 'icon'))) {\n                <div class=\"meta\" [ngClass]=\"tr2.class\" [style.cssText]=\"tr2.style\">\n                  @switch (tr2.type) {\n                    @case ('chip') { <mat-chip [color]=\"isThemeColor(tr2.color) ? tr2.color : undefined\" [ngClass]=\"((tr2.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\" [style.cssText]=\"chipStyle(tr2.color, tr2.variant)\">{{ tr2.value }}</mat-chip> }\n                    @case ('rating') { @for (_ of ratingRange(tr2); track $index; let idx = $index) { <mat-icon [praxisIcon]=\"starIcon(idx, tr2.value)\" [color]=\"ratingThemeColor(tr2)\" [style.cssText]=\"ratingIconStyle(tr2)\"></mat-icon> } }\n                    @case ('image') { <span class=\"inline-image\"><img [src]=\"tr2.value\" [alt]=\"tr2.imageAlt || ''\" /></span> }\n                    @case ('html') { <span [innerHTML]=\"tr2.value\"></span> }\n                    @default { <span>{{ tr2.value }}</span> }\n                  }\n                </div>\n              }\n            }\n          </div>\n        </div>\n      }\n    </div>\n  } @else {\n    <div class=\"cards-grid\">\n      @for (it of items; track trackByIndex($index)) {\n        <div class=\"item-card\">\n        <div class=\"list-item-content\">\n          @if (leading(it); as lead) {\n            @switch (lead.type) {\n              @case ('icon') { <mat-icon [praxisIcon]=\"lead.value\" [ngClass]=\"lead.class\" [color]=\"isThemeColor(lead.color) ? lead.color : undefined\" [style.cssText]=\"(lead.style ? lead.style + ';' : '') + iconStyle(lead.color)\"></mat-icon> }\n              @case ('image') {\n                <div class=\"lead-image\" [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">\n                  <img [src]=\"lead.value\" [alt]=\"config.templating?.leading?.imageAlt || ''\" />\n                  @if (lead.badge?.value) { <mat-chip class=\"lead-badge\"\n                    [color]=\"isThemeColor(lead.badge?.color) ? lead.badge?.color : undefined\"\n                    [ngClass]=\"(((lead.badge?.variant || 'filled') === 'outlined') ? 'chip-outlined' : '')\"\n                    [style.cssText]=\"chipStyle(lead.badge?.color, lead.badge?.variant)\">{{ lead.badge?.value }}</mat-chip> }\n                </div>\n              }\n              @case ('text') { <span [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">{{ lead.value }}</span> }\n              @case ('chip') { <mat-chip [color]=\"isThemeColor(lead.color) ? lead.color : undefined\" [ngClass]=\"((lead.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\" [style.cssText]=\"chipStyle(lead.color, lead.variant)\">{{ lead.value }}</mat-chip> }\n              @case ('rating') { @for (_ of ratingRange(lead); track $index; let idx = $index) { <mat-icon [praxisIcon]=\"starIcon(idx, lead.value)\" [color]=\"ratingThemeColor(lead)\" [style.cssText]=\"ratingIconStyle(lead)\"></mat-icon> } }\n              @case ('html') { <span [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\" [innerHTML]=\"lead.value\"></span> }\n              @default { <span [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">{{ lead.value }}</span> }\n            }\n          }\n          <div>\n            <div class=\"primary\" [ngClass]=\"primary(it)?.class\" [style.cssText]=\"primary(it)?.style\">{{ primary(it)?.value }}</div>\n            @if ((config.layout?.lines || 1) > 1) { <div class=\"secondary\" [ngClass]=\"secondary(it)?.class\" [style.cssText]=\"secondary(it)?.style\">{{ secondary(it)?.value }}</div> }\n            @if (featuresVisible()) {\n              @for (f of (config.templating?.features || []); track $index; let fi = $index) {\n                <span class=\"feature\">\n                  @if (f.icon && featuresMode() !== 'labels-only') { <mat-icon [praxisIcon]=\"f.icon\"></mat-icon> }\n                  @if (featuresMode() !== 'icons-only') { <span [ngClass]=\"f.class\" [style.cssText]=\"f.style\">{{ featureLabel(it, f.expr) }}</span> }\n                </span>\n              }\n            }\n          </div>\n          @if (meta(it); as m) {\n            <div class=\"meta\" [ngClass]=\"m.class\" [style.cssText]=\"m.style\">\n              @if (metaPrefixIcon(); as mpi) { <mat-icon [praxisIcon]=\"mpi\"></mat-icon> }\n              @switch (m.type) {\n                @case ('chip') { <mat-chip [color]=\"isThemeColor(m.color) ? m.color : undefined\" [ngClass]=\"((m.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\" [style.cssText]=\"chipStyle(m.color, m.variant)\">{{ m.value }}</mat-chip> }\n                @case ('rating') { @for (_ of ratingRange(m); track $index; let idx = $index) { <mat-icon [praxisIcon]=\"starIcon(idx, m.value)\" [color]=\"ratingThemeColor(m)\" [style.cssText]=\"ratingIconStyle(m)\"></mat-icon> } }\n                @case ('icon') { <mat-icon [praxisIcon]=\"m.value\" [color]=\"isThemeColor(m.color) ? m.color : undefined\" [style.cssText]=\"iconStyle(m.color)\"></mat-icon> }\n                @case ('image') { <span class=\"inline-image\"><img [src]=\"m.value\" [alt]=\"m.imageAlt || ''\" /></span> }\n                @case ('html') { <span [innerHTML]=\"m.value\"></span> }\n                @default { <span>{{ m.value }}</span> }\n              }\n            </div>\n          }\n          @if (trailing(it); as tr) {\n            <div class=\"trailing\" [ngClass]=\"tr.class\" [style.cssText]=\"tr.style\">\n              @switch (tr.type) {\n                @case ('chip') { <mat-chip [color]=\"isThemeColor(tr.color) ? tr.color : undefined\" [ngClass]=\"((tr.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\" [style.cssText]=\"chipStyle(tr.color, tr.variant)\">{{ tr.value }}</mat-chip> }\n                @case ('icon') { <mat-icon [praxisIcon]=\"tr.value\" [color]=\"isThemeColor(tr.color) ? tr.color : undefined\" [style.cssText]=\"iconStyle(tr.color)\"></mat-icon> }\n                @case ('image') { <span class=\"inline-image\"><img [src]=\"tr.value\" [alt]=\"tr.imageAlt || ''\" /></span> }\n                @case ('rating') { @for (_ of ratingRange(tr); track $index; let idx = $index) { <mat-icon [praxisIcon]=\"starIcon(idx, tr.value)\" [color]=\"ratingThemeColor(tr)\" [style.cssText]=\"ratingIconStyle(tr)\"></mat-icon> } }\n                @case ('html') { <span [innerHTML]=\"tr.value\"></span> }\n                @default { <span>{{ tr.value }}</span> }\n              }\n            </div>\n          }\n        </div>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".preview-root{--p-list-radius: var(--md-sys-shape-corner-medium, 16px);--p-list-shadow: var(--md-sys-elevation-level2);--p-list-border: 1px solid var(--md-sys-color-outline-variant);--p-list-blur: 10px;--p-list-foreground: var(--md-sys-color-on-surface);--p-list-foreground-muted: var(--md-sys-color-on-surface-variant);--p-list-grad-foreground: var(--md-sys-color-on-primary);--p-list-grad-foreground-muted: var(--md-sys-color-on-primary);--p-list-surface: var(--md-sys-color-surface-container);--p-list-accent: var(--md-sys-color-primary);--p-list-item-border: 1px solid var(--md-sys-color-outline-variant);--p-list-grad-from: var(--md-sys-color-primary-container);--p-list-grad-to: var(--md-sys-color-tertiary-container);--p-list-grad-angle: 135deg;--p-list-tile-minW: 240px;--p-list-tile-gap: 16px;--p-list-tile-padding: 16px;--p-list-tile-radius: 16px;--p-list-tile-media-radius: 12px;--p-list-tile-media-ratio: 1 / 1;padding:12px}.preview-light{background:var(--md-sys-color-surface-container-low, var(--md-sys-color-surface))}.preview-dark{background:var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface))}.preview-grid{background-color:var(--md-sys-color-surface-variant, var(--md-sys-color-surface));background-image:linear-gradient(var(--md-sys-color-outline-variant, var(--md-sys-color-outline)) 1px,transparent 1px),linear-gradient(90deg,var(--md-sys-color-outline-variant, var(--md-sys-color-outline)) 1px,transparent 1px);background-size:16px 16px}.skin-elevated,.skin-outline,.skin-flat,.skin-neumorphism{--p-list-item-surface: var(--mdc-elevated-card-container-color, var(--p-list-surface));--p-list-item-border: var(--p-list-border)}.skin-elevated .item-card,.skin-outline .item-card,.skin-flat .item-card,.skin-neumorphism .item-card{background:var(--mdc-elevated-card-container-color, var(--p-list-surface));border-radius:var(--p-list-radius);box-shadow:var(--p-list-shadow);border:var(--p-list-border)}.skin-elevated .item-tile,.skin-outline .item-tile,.skin-flat .item-tile,.skin-neumorphism .item-tile{background:var(--mdc-elevated-card-container-color, var(--p-list-surface));box-shadow:var(--p-list-shadow);border:var(--p-list-border)}.skin-elevated .mat-mdc-list-item .list-item-content,.skin-outline .mat-mdc-list-item .list-item-content,.skin-flat .mat-mdc-list-item .list-item-content,.skin-neumorphism .mat-mdc-list-item .list-item-content{background:var(--mdc-elevated-card-container-color, var(--p-list-surface));border-radius:calc(var(--p-list-radius) * .75);box-shadow:var(--p-list-shadow);border:var(--p-list-item-border);color:var(--p-list-foreground)}.skin-outline{--p-list-shadow: none;--p-list-border: 1px solid var(--md-sys-color-outline)}.skin-flat{--p-list-shadow: none;--p-list-border: 1px solid var(--md-sys-color-outline-variant)}.skin-neumorphism{--p-list-shadow: var(--md-sys-elevation-level2);--p-list-border: 1px solid var(--md-sys-color-outline-variant);--p-list-radius: 1.25rem}.skin-pill-soft .item-card,.skin-pill-soft .item-tile{background:var(--mdc-elevated-card-container-color, var(--p-list-surface));border-radius:calc(var(--p-list-radius) * 1.3);box-shadow:var(--md-sys-elevation-level1);border:var(--p-list-border)}.skin-pill-soft .mat-mdc-list-item .list-item-content{background:var(--mdc-elevated-card-container-color, var(--p-list-surface));border-radius:calc(var(--p-list-radius) * 1.3);box-shadow:var(--md-sys-elevation-level1);border:var(--p-list-border);color:var(--p-list-foreground)}.lead-image{position:relative;width:96px;height:72px;border-radius:12px;overflow:hidden}.lead-image img{width:100%;height:100%;object-fit:cover;display:block}.lead-image .lead-badge{position:absolute;left:8px;bottom:8px}.features{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px;color:var(--p-list-foreground-muted)}.feature{display:inline-flex;align-items:center;gap:6px}.model-media .lead-image{width:136px;height:96px;border-radius:16px}.model-hotel .lead-image{width:160px;height:110px;border-radius:18px}.skin-gradient-tile{--p-list-foreground: var(--p-list-grad-foreground);--p-list-foreground-muted: var(--p-list-grad-foreground-muted)}.skin-gradient-tile .item-card,.skin-gradient-tile .item-tile,.skin-gradient-tile .mat-mdc-list-item .list-item-content{background:linear-gradient(var(--p-list-grad-angle),var(--p-list-grad-from),var(--p-list-grad-to));border-radius:var(--p-list-radius);color:var(--p-list-foreground)}.skin-glass .item-card,.skin-glass .item-tile{background:var(--md-sys-color-surface-container-low);border-radius:var(--p-list-radius);border:1px solid var(--md-sys-color-outline-variant);backdrop-filter:blur(var(--p-list-blur));-webkit-backdrop-filter:blur(var(--p-list-blur))}.skin-glass .mat-mdc-list-item .list-item-content{background:var(--md-sys-color-surface-container-low);border-radius:var(--p-list-radius);border:1px solid var(--md-sys-color-outline-variant);backdrop-filter:blur(var(--p-list-blur));-webkit-backdrop-filter:blur(var(--p-list-blur));color:var(--p-list-foreground)}.list-item-content{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:12px 16px}.primary{font-weight:500;color:var(--p-list-foreground)}.secondary,.meta{color:var(--p-list-foreground-muted)}.trailing{color:var(--p-list-foreground-muted);text-align:end}.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--p-list-tile-minW),1fr));gap:var(--p-list-tile-gap)}.item-card{padding:12px}.tiles-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--p-list-tile-minW),1fr));gap:var(--p-list-tile-gap)}.item-tile{padding:var(--p-list-tile-padding);border-radius:var(--p-list-tile-radius);border:var(--p-list-border);background:var(--p-list-surface);display:grid;gap:8px}.tile-media{width:100%;aspect-ratio:var(--p-list-tile-media-ratio);border-radius:var(--p-list-tile-media-radius);background:var(--md-sys-color-surface-container-low, var(--p-list-surface));display:grid;place-items:center;overflow:hidden}.tile-media img{width:100%;height:100%;object-fit:cover}.tile-body{display:grid;gap:4px}.chip-outlined.mat-mdc-chip{background:transparent!important;border:1px solid currentColor}\n"] }]
+            args: [{ selector: 'praxis-list-skin-preview', standalone: true, imports: [
+                        CommonModule,
+                        MatListModule,
+                        MatIconModule,
+                        MatChipsModule,
+                        PraxisIconDirective,
+                        PraxisRichContent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"preview-root\" [ngClass]=\"skinClasses\" [attr.data-skin-scope]=\"skinScopeId\">\n  @if (inlineCss) { <style [attr.nonce]=\"cspNonce || null\" [textContent]=\"inlineCss\"></style> }\n\n  @if (isList()) {\n    <mat-list>\n      @for (item of items; track trackByIndex($index)) {\n        <mat-list-item>\n        <div class=\"list-item-content\">\n          @if (leading(item); as lead) {\n            @if (previewRichContentNodes(lead, { imageAlt: config.templating?.leading?.imageAlt }); as leadNodes) {\n              <praxis-rich-content [nodes]=\"leadNodes\"></praxis-rich-content>\n            } @else {\n              @switch (lead.type) {\n                @case ('icon') { <mat-icon [praxisIcon]=\"lead.value\" [ngClass]=\"lead.class\" [color]=\"isThemeColor(lead.color) ? lead.color : undefined\" [style.cssText]=\"(lead.style ? lead.style + ';' : '') + iconStyle(lead.color)\"></mat-icon> }\n                @case ('image') {\n                  <div class=\"lead-image\" [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">\n                    <img [src]=\"lead.value\" [alt]=\"config.templating?.leading?.imageAlt || ''\" />\n                    @if (lead.badge?.value) { <mat-chip class=\"lead-badge\"\n                      [color]=\"isThemeColor(lead.badge?.color) ? lead.badge?.color : undefined\"\n                      [ngClass]=\"(((lead.badge?.variant || 'filled') === 'outlined') ? 'chip-outlined' : '')\"\n                      [style.cssText]=\"chipStyle(lead.badge?.color, lead.badge?.variant)\">{{ lead.badge?.value }}</mat-chip> }\n                  </div>\n                }\n                @case ('text') { <span [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">{{ lead.value }}</span> }\n                @case ('chip') { <mat-chip [color]=\"isThemeColor(lead.color) ? lead.color : undefined\" [ngClass]=\"((lead.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\" [style.cssText]=\"chipStyle(lead.color, lead.variant)\">{{ lead.value }}</mat-chip> }\n                @case ('rating') { @for (_ of ratingRange(lead); track $index; let idx = $index) { <mat-icon [praxisIcon]=\"starIcon(idx, lead.value)\" [color]=\"ratingThemeColor(lead)\" [style.cssText]=\"ratingIconStyle(lead)\"></mat-icon> } }\n                @case ('html') { <span [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\" [innerHTML]=\"lead.value\"></span> }\n                @default { <span [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">{{ lead.value }}</span> }\n              }\n            }\n          }\n          <div>\n            <div class=\"primary\" [ngClass]=\"primary(item)?.class\" [style.cssText]=\"primary(item)?.style\">\n              @if (previewRichContentNodes(primary(item)); as primaryNodes) {\n                <praxis-rich-content [nodes]=\"primaryNodes\"></praxis-rich-content>\n              } @else {\n                {{ primary(item)?.value }}\n              }\n            </div>\n            @if ((config.layout?.lines || 1) > 1) {\n              <div class=\"secondary\" [ngClass]=\"secondary(item)?.class\" [style.cssText]=\"secondary(item)?.style\">\n                @if (previewRichContentNodes(secondary(item)); as secondaryNodes) {\n                  <praxis-rich-content [nodes]=\"secondaryNodes\"></praxis-rich-content>\n                } @else {\n                  {{ secondary(item)?.value }}\n                }\n              </div>\n            }\n            @if (featuresVisible()) {\n              @for (f of (config.templating?.features || []); track $index; let fi = $index) {\n                <span class=\"feature\">\n                  @if (previewFeatureRichContentNodes(item, f); as featureNodes) {\n                    <praxis-rich-content [nodes]=\"featureNodes\"></praxis-rich-content>\n                  } @else {\n                    @if (f.icon && featuresMode() !== 'labels-only') { <mat-icon [praxisIcon]=\"f.icon\"></mat-icon> }\n                    @if (featuresMode() !== 'icons-only') { <span [ngClass]=\"f.class\" [style.cssText]=\"f.style\">{{ featureLabel(item, f.expr) }}</span> }\n                  }\n                </span>\n              }\n            }\n          </div>\n          @if (meta(item); as m) {\n            <div class=\"meta\" [ngClass]=\"m.class\" [style.cssText]=\"m.style\">\n              @if (metaPrefixIcon(); as mpi) { <mat-icon [praxisIcon]=\"mpi\"></mat-icon> }\n              @if (previewRichContentNodes(m, { slot: 'meta' }); as metaNodes) {\n                <praxis-rich-content [nodes]=\"metaNodes\"></praxis-rich-content>\n              } @else {\n                @switch (m.type) {\n                  @case ('chip') { <mat-chip [color]=\"isThemeColor(m.color) ? m.color : undefined\" [ngClass]=\"((m.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\" [style.cssText]=\"chipStyle(m.color, m.variant)\">{{ m.value }}</mat-chip> }\n                  @case ('rating') { @for (_ of ratingRange(m); track $index; let idx = $index) { <mat-icon [praxisIcon]=\"starIcon(idx, m.value)\" [color]=\"ratingThemeColor(m)\" [style.cssText]=\"ratingIconStyle(m)\"></mat-icon> } }\n                  @case ('icon') { <mat-icon [praxisIcon]=\"m.value\" [color]=\"isThemeColor(m.color) ? m.color : undefined\" [style.cssText]=\"iconStyle(m.color)\"></mat-icon> }\n                  @case ('image') { <span class=\"inline-image\"><img [src]=\"m.value\" [alt]=\"m.imageAlt || ''\" /></span> }\n                  @case ('html') { <span [innerHTML]=\"m.value\"></span> }\n                  @default { <span>{{ m.value }}</span> }\n                }\n              }\n            </div>\n          }\n          @if (trailing(item); as tr) {\n            <div class=\"trailing\" [ngClass]=\"tr.class\" [style.cssText]=\"tr.style\">\n              @if (previewRichContentNodes(tr); as trailingNodes) {\n                <praxis-rich-content [nodes]=\"trailingNodes\"></praxis-rich-content>\n              } @else {\n                @switch (tr.type) {\n                  @case ('chip') { <mat-chip [color]=\"isThemeColor(tr.color) ? tr.color : undefined\" [ngClass]=\"((tr.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\" [style.cssText]=\"chipStyle(tr.color, tr.variant)\">{{ tr.value }}</mat-chip> }\n                  @case ('icon') { <mat-icon [praxisIcon]=\"tr.value\" [color]=\"isThemeColor(tr.color) ? tr.color : undefined\" [style.cssText]=\"iconStyle(tr.color)\"></mat-icon> }\n                  @case ('image') { <span class=\"inline-image\"><img [src]=\"tr.value\" [alt]=\"tr.imageAlt || ''\" /></span> }\n                  @case ('rating') { @for (_ of ratingRange(tr); track $index; let idx = $index) { <mat-icon [praxisIcon]=\"starIcon(idx, tr.value)\" [color]=\"ratingThemeColor(tr)\" [style.cssText]=\"ratingIconStyle(tr)\"></mat-icon> } }\n                  @case ('html') { <span [innerHTML]=\"tr.value\"></span> }\n                  @default { <span>{{ tr.value }}</span> }\n                }\n              }\n            </div>\n          }\n        </div>\n        </mat-list-item>\n      }\n    </mat-list>\n  } @else if (isTiles()) {\n    <div class=\"tiles-grid\">\n      @for (it of items; track trackByIndex($index)) {\n        <div class=\"item-tile\">\n          <div class=\"tile-media\">\n            @if (leading(it); as lead) {\n              @if (previewRichContentNodes(lead, { imageAlt: config.templating?.leading?.imageAlt }); as leadNodes) {\n                <praxis-rich-content [nodes]=\"leadNodes\"></praxis-rich-content>\n              } @else {\n                @switch (lead.type) {\n                  @case ('image') {\n                    <img [src]=\"lead.value\" [alt]=\"config.templating?.leading?.imageAlt || ''\" />\n                  }\n                  @case ('icon') { <mat-icon [praxisIcon]=\"lead.value\" [ngClass]=\"lead.class\" [color]=\"isThemeColor(lead.color) ? lead.color : undefined\" [style.cssText]=\"(lead.style ? lead.style + ';' : '') + iconStyle(lead.color)\"></mat-icon> }\n                  @case ('text') { <span [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">{{ lead.value }}</span> }\n                  @case ('chip') { <mat-chip [color]=\"isThemeColor(lead.color) ? lead.color : undefined\" [ngClass]=\"((lead.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\" [style.cssText]=\"chipStyle(lead.color, lead.variant)\">{{ lead.value }}</mat-chip> }\n                  @case ('rating') { @for (_ of ratingRange(lead); track $index; let idx = $index) { <mat-icon [praxisIcon]=\"starIcon(idx, lead.value)\" [color]=\"ratingThemeColor(lead)\" [style.cssText]=\"ratingIconStyle(lead)\"></mat-icon> } }\n                  @case ('html') { <span [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\" [innerHTML]=\"lead.value\"></span> }\n                  @default { <span [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">{{ lead.value }}</span> }\n                }\n              }\n            }\n          </div>\n          @if (trailing(it); as tr) {\n            @if (statusPosition() === 'top-right' && (tr?.type === 'chip' || tr?.type === 'icon')) {\n              <div class=\"tile-status\">\n                @if (previewRichContentNodes(tr); as trailingNodes) {\n                  <praxis-rich-content [nodes]=\"trailingNodes\"></praxis-rich-content>\n                } @else {\n                  @if (tr?.type === 'chip') { <mat-chip [color]=\"isThemeColor(tr.color) ? tr.color : undefined\" [ngClass]=\"((tr.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\" [style.cssText]=\"chipStyle(tr.color, tr.variant)\">{{ tr.value }}</mat-chip> }\n                  @if (tr?.type === 'icon') { <mat-icon [praxisIcon]=\"tr.value\" [color]=\"isThemeColor(tr.color) ? tr.color : undefined\" [style.cssText]=\"iconStyle(tr.color)\"></mat-icon> }\n                }\n              </div>\n            }\n          }\n          <div class=\"tile-body\">\n            <div class=\"primary\" [ngClass]=\"primary(it)?.class\" [style.cssText]=\"primary(it)?.style\">\n              @if (previewRichContentNodes(primary(it)); as primaryNodes) {\n                <praxis-rich-content [nodes]=\"primaryNodes\"></praxis-rich-content>\n              } @else {\n                {{ primary(it)?.value }}\n              }\n            </div>\n            @if ((config.layout?.lines || 1) > 1) {\n              <div class=\"secondary\" [ngClass]=\"secondary(it)?.class\" [style.cssText]=\"secondary(it)?.style\">\n                @if (previewRichContentNodes(secondary(it)); as secondaryNodes) {\n                  <praxis-rich-content [nodes]=\"secondaryNodes\"></praxis-rich-content>\n                } @else {\n                  {{ secondary(it)?.value }}\n                }\n              </div>\n            }\n            @if (meta(it); as m) {\n              <div class=\"meta\" [ngClass]=\"m.class\" [style.cssText]=\"m.style\">\n                @if (metaPrefixIcon(); as mpi) { <mat-icon [praxisIcon]=\"mpi\"></mat-icon> }\n                @if (previewRichContentNodes(m, { slot: 'meta' }); as metaNodes) {\n                  <praxis-rich-content [nodes]=\"metaNodes\"></praxis-rich-content>\n                } @else {\n                  @switch (m.type) {\n                    @case ('chip') { <mat-chip [color]=\"isThemeColor(m.color) ? m.color : undefined\" [ngClass]=\"((m.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\" [style.cssText]=\"chipStyle(m.color, m.variant)\">{{ m.value }}</mat-chip> }\n                    @case ('rating') { @for (_ of ratingRange(m); track $index; let idx = $index) { <mat-icon [praxisIcon]=\"starIcon(idx, m.value)\" [color]=\"ratingThemeColor(m)\" [style.cssText]=\"ratingIconStyle(m)\"></mat-icon> } }\n                    @case ('icon') { <mat-icon [praxisIcon]=\"m.value\" [color]=\"isThemeColor(m.color) ? m.color : undefined\" [style.cssText]=\"iconStyle(m.color)\"></mat-icon> }\n                    @case ('image') { <span class=\"inline-image\"><img [src]=\"m.value\" [alt]=\"m.imageAlt || ''\" /></span> }\n                    @case ('html') { <span [innerHTML]=\"m.value\"></span> }\n                    @default { <span>{{ m.value }}</span> }\n                  }\n                }\n              </div>\n            }\n            @if (featuresVisible()) {\n              <div class=\"features\">\n                @for (f of (config.templating?.features || []); track $index; let fi = $index) {\n                  <span class=\"feature\">\n                    @if (previewFeatureRichContentNodes(it, f); as featureNodes) {\n                      <praxis-rich-content [nodes]=\"featureNodes\"></praxis-rich-content>\n                    } @else {\n                      @if (f.icon && featuresMode() !== 'labels-only') { <mat-icon [praxisIcon]=\"f.icon\"></mat-icon> }\n                      @if (featuresMode() !== 'icons-only') { <span [ngClass]=\"f.class\" [style.cssText]=\"f.style\">{{ featureLabel(it, f.expr) }}</span> }\n                    }\n                  </span>\n                }\n              </div>\n            }\n            @if (trailing(it); as tr2) {\n              @if (!(statusPosition() === 'top-right' && (tr2?.type === 'chip' || tr2?.type === 'icon'))) {\n                <div class=\"meta\" [ngClass]=\"tr2.class\" [style.cssText]=\"tr2.style\">\n                  @if (previewRichContentNodes(tr2); as trailingNodes) {\n                    <praxis-rich-content [nodes]=\"trailingNodes\"></praxis-rich-content>\n                  } @else {\n                    @switch (tr2.type) {\n                      @case ('chip') { <mat-chip [color]=\"isThemeColor(tr2.color) ? tr2.color : undefined\" [ngClass]=\"((tr2.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\" [style.cssText]=\"chipStyle(tr2.color, tr2.variant)\">{{ tr2.value }}</mat-chip> }\n                      @case ('rating') { @for (_ of ratingRange(tr2); track $index; let idx = $index) { <mat-icon [praxisIcon]=\"starIcon(idx, tr2.value)\" [color]=\"ratingThemeColor(tr2)\" [style.cssText]=\"ratingIconStyle(tr2)\"></mat-icon> } }\n                      @case ('image') { <span class=\"inline-image\"><img [src]=\"tr2.value\" [alt]=\"tr2.imageAlt || ''\" /></span> }\n                      @case ('html') { <span [innerHTML]=\"tr2.value\"></span> }\n                      @default { <span>{{ tr2.value }}</span> }\n                    }\n                  }\n                </div>\n              }\n            }\n          </div>\n        </div>\n      }\n    </div>\n  } @else {\n    <div class=\"cards-grid\">\n      @for (it of items; track trackByIndex($index)) {\n        <div class=\"item-card\">\n        <div class=\"list-item-content\">\n          @if (leading(it); as lead) {\n            @if (previewRichContentNodes(lead, { imageAlt: config.templating?.leading?.imageAlt }); as leadNodes) {\n              <praxis-rich-content [nodes]=\"leadNodes\"></praxis-rich-content>\n            } @else {\n              @switch (lead.type) {\n                @case ('icon') { <mat-icon [praxisIcon]=\"lead.value\" [ngClass]=\"lead.class\" [color]=\"isThemeColor(lead.color) ? lead.color : undefined\" [style.cssText]=\"(lead.style ? lead.style + ';' : '') + iconStyle(lead.color)\"></mat-icon> }\n                @case ('image') {\n                  <div class=\"lead-image\" [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">\n                    <img [src]=\"lead.value\" [alt]=\"config.templating?.leading?.imageAlt || ''\" />\n                    @if (lead.badge?.value) { <mat-chip class=\"lead-badge\"\n                      [color]=\"isThemeColor(lead.badge?.color) ? lead.badge?.color : undefined\"\n                      [ngClass]=\"(((lead.badge?.variant || 'filled') === 'outlined') ? 'chip-outlined' : '')\"\n                      [style.cssText]=\"chipStyle(lead.badge?.color, lead.badge?.variant)\">{{ lead.badge?.value }}</mat-chip> }\n                  </div>\n                }\n                @case ('text') { <span [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">{{ lead.value }}</span> }\n                @case ('chip') { <mat-chip [color]=\"isThemeColor(lead.color) ? lead.color : undefined\" [ngClass]=\"((lead.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\" [style.cssText]=\"chipStyle(lead.color, lead.variant)\">{{ lead.value }}</mat-chip> }\n                @case ('rating') { @for (_ of ratingRange(lead); track $index; let idx = $index) { <mat-icon [praxisIcon]=\"starIcon(idx, lead.value)\" [color]=\"ratingThemeColor(lead)\" [style.cssText]=\"ratingIconStyle(lead)\"></mat-icon> } }\n                @case ('html') { <span [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\" [innerHTML]=\"lead.value\"></span> }\n                @default { <span [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">{{ lead.value }}</span> }\n              }\n            }\n          }\n          <div>\n            <div class=\"primary\" [ngClass]=\"primary(it)?.class\" [style.cssText]=\"primary(it)?.style\">\n              @if (previewRichContentNodes(primary(it)); as primaryNodes) {\n                <praxis-rich-content [nodes]=\"primaryNodes\"></praxis-rich-content>\n              } @else {\n                {{ primary(it)?.value }}\n              }\n            </div>\n            @if ((config.layout?.lines || 1) > 1) {\n              <div class=\"secondary\" [ngClass]=\"secondary(it)?.class\" [style.cssText]=\"secondary(it)?.style\">\n                @if (previewRichContentNodes(secondary(it)); as secondaryNodes) {\n                  <praxis-rich-content [nodes]=\"secondaryNodes\"></praxis-rich-content>\n                } @else {\n                  {{ secondary(it)?.value }}\n                }\n              </div>\n            }\n            @if (featuresVisible()) {\n              @for (f of (config.templating?.features || []); track $index; let fi = $index) {\n                <span class=\"feature\">\n                  @if (previewFeatureRichContentNodes(it, f); as featureNodes) {\n                    <praxis-rich-content [nodes]=\"featureNodes\"></praxis-rich-content>\n                  } @else {\n                    @if (f.icon && featuresMode() !== 'labels-only') { <mat-icon [praxisIcon]=\"f.icon\"></mat-icon> }\n                    @if (featuresMode() !== 'icons-only') { <span [ngClass]=\"f.class\" [style.cssText]=\"f.style\">{{ featureLabel(it, f.expr) }}</span> }\n                  }\n                </span>\n              }\n            }\n          </div>\n          @if (meta(it); as m) {\n            <div class=\"meta\" [ngClass]=\"m.class\" [style.cssText]=\"m.style\">\n              @if (metaPrefixIcon(); as mpi) { <mat-icon [praxisIcon]=\"mpi\"></mat-icon> }\n              @if (previewRichContentNodes(m, { slot: 'meta' }); as metaNodes) {\n                <praxis-rich-content [nodes]=\"metaNodes\"></praxis-rich-content>\n              } @else {\n                @switch (m.type) {\n                  @case ('chip') { <mat-chip [color]=\"isThemeColor(m.color) ? m.color : undefined\" [ngClass]=\"((m.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\" [style.cssText]=\"chipStyle(m.color, m.variant)\">{{ m.value }}</mat-chip> }\n                  @case ('rating') { @for (_ of ratingRange(m); track $index; let idx = $index) { <mat-icon [praxisIcon]=\"starIcon(idx, m.value)\" [color]=\"ratingThemeColor(m)\" [style.cssText]=\"ratingIconStyle(m)\"></mat-icon> } }\n                  @case ('icon') { <mat-icon [praxisIcon]=\"m.value\" [color]=\"isThemeColor(m.color) ? m.color : undefined\" [style.cssText]=\"iconStyle(m.color)\"></mat-icon> }\n                  @case ('image') { <span class=\"inline-image\"><img [src]=\"m.value\" [alt]=\"m.imageAlt || ''\" /></span> }\n                  @case ('html') { <span [innerHTML]=\"m.value\"></span> }\n                  @default { <span>{{ m.value }}</span> }\n                }\n              }\n            </div>\n          }\n          @if (trailing(it); as tr) {\n            <div class=\"trailing\" [ngClass]=\"tr.class\" [style.cssText]=\"tr.style\">\n              @if (previewRichContentNodes(tr); as trailingNodes) {\n                <praxis-rich-content [nodes]=\"trailingNodes\"></praxis-rich-content>\n              } @else {\n                @switch (tr.type) {\n                  @case ('chip') { <mat-chip [color]=\"isThemeColor(tr.color) ? tr.color : undefined\" [ngClass]=\"((tr.variant || 'filled') === 'outlined') ? 'chip-outlined' : ''\" [style.cssText]=\"chipStyle(tr.color, tr.variant)\">{{ tr.value }}</mat-chip> }\n                  @case ('icon') { <mat-icon [praxisIcon]=\"tr.value\" [color]=\"isThemeColor(tr.color) ? tr.color : undefined\" [style.cssText]=\"iconStyle(tr.color)\"></mat-icon> }\n                  @case ('image') { <span class=\"inline-image\"><img [src]=\"tr.value\" [alt]=\"tr.imageAlt || ''\" /></span> }\n                  @case ('rating') { @for (_ of ratingRange(tr); track $index; let idx = $index) { <mat-icon [praxisIcon]=\"starIcon(idx, tr.value)\" [color]=\"ratingThemeColor(tr)\" [style.cssText]=\"ratingIconStyle(tr)\"></mat-icon> } }\n                  @case ('html') { <span [innerHTML]=\"tr.value\"></span> }\n                  @default { <span>{{ tr.value }}</span> }\n                }\n              }\n            </div>\n          }\n        </div>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".preview-root{--p-list-radius: var(--md-sys-shape-corner-medium, 16px);--p-list-shadow: var(--md-sys-elevation-level2);--p-list-border: 1px solid var(--md-sys-color-outline-variant);--p-list-blur: 10px;--p-list-foreground: var(--md-sys-color-on-surface);--p-list-foreground-muted: var(--md-sys-color-on-surface-variant);--p-list-grad-foreground: var(--md-sys-color-on-primary);--p-list-grad-foreground-muted: var(--md-sys-color-on-primary);--p-list-surface: var(--md-sys-color-surface-container);--p-list-accent: var(--md-sys-color-primary);--p-list-item-border: 1px solid var(--md-sys-color-outline-variant);--p-list-grad-from: var(--md-sys-color-primary-container);--p-list-grad-to: var(--md-sys-color-tertiary-container);--p-list-grad-angle: 135deg;--p-list-tile-minW: 240px;--p-list-tile-gap: 16px;--p-list-tile-padding: 16px;--p-list-tile-radius: 16px;--p-list-tile-media-radius: 12px;--p-list-tile-media-ratio: 1 / 1;padding:12px}.preview-light{background:var(--md-sys-color-surface-container-low, var(--md-sys-color-surface))}.preview-dark{background:var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface))}.preview-grid{background-color:var(--md-sys-color-surface-variant, var(--md-sys-color-surface));background-image:linear-gradient(var(--md-sys-color-outline-variant, var(--md-sys-color-outline)) 1px,transparent 1px),linear-gradient(90deg,var(--md-sys-color-outline-variant, var(--md-sys-color-outline)) 1px,transparent 1px);background-size:16px 16px}.skin-elevated,.skin-outline,.skin-flat,.skin-neumorphism{--p-list-item-surface: var(--mdc-elevated-card-container-color, var(--p-list-surface));--p-list-item-border: var(--p-list-border)}.skin-elevated .item-card,.skin-outline .item-card,.skin-flat .item-card,.skin-neumorphism .item-card{background:var(--mdc-elevated-card-container-color, var(--p-list-surface));border-radius:var(--p-list-radius);box-shadow:var(--p-list-shadow);border:var(--p-list-border)}.skin-elevated .item-tile,.skin-outline .item-tile,.skin-flat .item-tile,.skin-neumorphism .item-tile{background:var(--mdc-elevated-card-container-color, var(--p-list-surface));box-shadow:var(--p-list-shadow);border:var(--p-list-border)}.skin-elevated .mat-mdc-list-item .list-item-content,.skin-outline .mat-mdc-list-item .list-item-content,.skin-flat .mat-mdc-list-item .list-item-content,.skin-neumorphism .mat-mdc-list-item .list-item-content{background:var(--mdc-elevated-card-container-color, var(--p-list-surface));border-radius:calc(var(--p-list-radius) * .75);box-shadow:var(--p-list-shadow);border:var(--p-list-item-border);color:var(--p-list-foreground)}.skin-outline{--p-list-shadow: none;--p-list-border: 1px solid var(--md-sys-color-outline)}.skin-flat{--p-list-shadow: none;--p-list-border: 1px solid var(--md-sys-color-outline-variant)}.skin-neumorphism{--p-list-shadow: var(--md-sys-elevation-level2);--p-list-border: 1px solid var(--md-sys-color-outline-variant);--p-list-radius: 1.25rem}.skin-pill-soft .item-card,.skin-pill-soft .item-tile{background:var(--mdc-elevated-card-container-color, var(--p-list-surface));border-radius:calc(var(--p-list-radius) * 1.3);box-shadow:var(--md-sys-elevation-level1);border:var(--p-list-border)}.skin-pill-soft .mat-mdc-list-item .list-item-content{background:var(--mdc-elevated-card-container-color, var(--p-list-surface));border-radius:calc(var(--p-list-radius) * 1.3);box-shadow:var(--md-sys-elevation-level1);border:var(--p-list-border);color:var(--p-list-foreground)}.lead-image{position:relative;width:96px;height:72px;border-radius:12px;overflow:hidden}.lead-image img{width:100%;height:100%;object-fit:cover;display:block}.lead-image .lead-badge{position:absolute;left:8px;bottom:8px}.features{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px;color:var(--p-list-foreground-muted)}.feature{display:inline-flex;align-items:center;gap:6px}.model-media .lead-image{width:136px;height:96px;border-radius:16px}.model-hotel .lead-image{width:160px;height:110px;border-radius:18px}.skin-gradient-tile{--p-list-foreground: var(--p-list-grad-foreground);--p-list-foreground-muted: var(--p-list-grad-foreground-muted)}.skin-gradient-tile .item-card,.skin-gradient-tile .item-tile,.skin-gradient-tile .mat-mdc-list-item .list-item-content{background:linear-gradient(var(--p-list-grad-angle),var(--p-list-grad-from),var(--p-list-grad-to));border-radius:var(--p-list-radius);color:var(--p-list-foreground)}.skin-glass .item-card,.skin-glass .item-tile{background:var(--md-sys-color-surface-container-low);border-radius:var(--p-list-radius);border:1px solid var(--md-sys-color-outline-variant);backdrop-filter:blur(var(--p-list-blur));-webkit-backdrop-filter:blur(var(--p-list-blur))}.skin-glass .mat-mdc-list-item .list-item-content{background:var(--md-sys-color-surface-container-low);border-radius:var(--p-list-radius);border:1px solid var(--md-sys-color-outline-variant);backdrop-filter:blur(var(--p-list-blur));-webkit-backdrop-filter:blur(var(--p-list-blur));color:var(--p-list-foreground)}.list-item-content{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:12px 16px}.primary{font-weight:500;color:var(--p-list-foreground)}.secondary,.meta{color:var(--p-list-foreground-muted)}.trailing{color:var(--p-list-foreground-muted);text-align:end}.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--p-list-tile-minW),1fr));gap:var(--p-list-tile-gap)}.item-card{padding:12px}.tiles-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--p-list-tile-minW),1fr));gap:var(--p-list-tile-gap)}.item-tile{padding:var(--p-list-tile-padding);border-radius:var(--p-list-tile-radius);border:var(--p-list-border);background:var(--p-list-surface);display:grid;gap:8px}.tile-media{width:100%;aspect-ratio:var(--p-list-tile-media-ratio);border-radius:var(--p-list-tile-media-radius);background:var(--md-sys-color-surface-container-low, var(--p-list-surface));display:grid;place-items:center;overflow:hidden}.tile-media img{width:100%;height:100%;object-fit:cover}.tile-body{display:grid;gap:4px}.chip-outlined.mat-mdc-chip{background:transparent!important;border:1px solid currentColor}\n"] }]
         }], ctorParameters: () => [{ type: ListSkinService }], propDecorators: { config: [{
                 type: Input
             }], items: [{
@@ -6717,6 +6849,63 @@ class ListAiAdapter extends BaseAiAdapter {
 
 class PraxisListMetricComponent {
     metric;
+    leftIconNodes() {
+        return this.metric?.icon ? [this.buildIconNode()] : [];
+    }
+    rightIconNodes() {
+        return this.metric?.icon ? [this.buildIconNode()] : [];
+    }
+    valueRowNodes() {
+        const nodes = [
+            {
+                type: 'text',
+                text: String(this.metric?.value ?? ''),
+                className: this.joinClasses('p-list-metric__value', this.metric?.valueClass),
+                style: this.parseInlineStyle(this.metric?.valueStyle),
+            },
+        ];
+        if (this.metric?.layout === 'value+caption' && this.metric?.caption) {
+            nodes.push({
+                type: 'text',
+                text: String(this.metric.caption),
+                className: 'p-list-metric__caption p-list-metric__caption--inline',
+            });
+        }
+        return nodes;
+    }
+    captionNodes() {
+        return this.metric?.caption
+            ? [
+                {
+                    type: 'text',
+                    text: String(this.metric.caption),
+                    className: 'p-list-metric__caption',
+                },
+            ]
+            : [];
+    }
+    belowProgressCaptionNodes() {
+        return this.metric?.caption
+            ? [
+                {
+                    type: 'text',
+                    text: String(this.metric.caption),
+                    className: 'p-list-metric__caption p-list-metric__caption--below-progress',
+                },
+            ]
+            : [];
+    }
+    subcaptionNodes() {
+        return this.metric?.subcaption
+            ? [
+                {
+                    type: 'text',
+                    text: String(this.metric.subcaption),
+                    className: 'p-list-metric__subcaption',
+                },
+            ]
+            : [];
+    }
     metricClasses() {
         const layoutClass = String(this.metric?.layout || 'value-only').replaceAll('+', '-');
         return [
@@ -6739,6 +6928,38 @@ class PraxisListMetricComponent {
             this.metric?.layout !== 'value-only' &&
             this.metric?.layout !== 'value+caption');
     }
+    buildIconNode() {
+        return {
+            type: 'icon',
+            icon: String(this.metric?.icon ?? ''),
+        };
+    }
+    joinClasses(...parts) {
+        const normalized = parts
+            .map((part) => String(part || '').trim())
+            .filter(Boolean);
+        return normalized.length ? normalized.join(' ') : undefined;
+    }
+    parseInlineStyle(inlineStyle) {
+        const source = String(inlineStyle || '').trim();
+        if (!source) {
+            return undefined;
+        }
+        const entries = source
+            .split(';')
+            .map((part) => part.trim())
+            .filter(Boolean)
+            .map((part) => {
+            const separator = part.indexOf(':');
+            if (separator === -1)
+                return null;
+            const key = part.slice(0, separator).trim();
+            const value = part.slice(separator + 1).trim();
+            return key && value ? [key, value] : null;
+        })
+            .filter((entry) => !!entry);
+        return entries.length ? Object.fromEntries(entries) : undefined;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisListMetricComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: PraxisListMetricComponent, isStandalone: true, selector: "praxis-list-metric", inputs: { metric: "metric" }, ngImport: i0, template: `
     <div
@@ -6756,25 +6977,13 @@ class PraxisListMetricComponent {
             class="p-list-metric__icon"
             [style.cssText]="metric?.iconStyle || ''"
           >
-            <mat-icon [praxisIcon]="metric?.icon"></mat-icon>
+            <praxis-rich-content [nodes]="leftIconNodes()"></praxis-rich-content>
           </span>
         }
 
         <div class="p-list-metric__content">
           <div class="p-list-metric__value-row">
-            <span
-              class="p-list-metric__value"
-              [ngClass]="metric?.valueClass"
-              [style.cssText]="metric?.valueStyle || ''"
-            >
-              {{ metric?.value }}
-            </span>
-
-            @if (metric?.layout === 'value+caption' && metric?.caption) {
-              <span class="p-list-metric__caption p-list-metric__caption--inline">
-                {{ metric.caption }}
-              </span>
-            }
+            <praxis-rich-content [nodes]="valueRowNodes()"></praxis-rich-content>
           </div>
 
           @if (
@@ -6782,11 +6991,11 @@ class PraxisListMetricComponent {
             metric?.caption &&
             metric?.captionPosition !== 'below-progress'
           ) {
-            <div class="p-list-metric__caption">{{ metric.caption }}</div>
+            <praxis-rich-content [nodes]="captionNodes()"></praxis-rich-content>
           }
 
           @if (metric?.subcaption) {
-            <div class="p-list-metric__subcaption">{{ metric.subcaption }}</div>
+            <praxis-rich-content [nodes]="subcaptionNodes()"></praxis-rich-content>
           }
         </div>
 
@@ -6795,7 +7004,7 @@ class PraxisListMetricComponent {
             class="p-list-metric__icon p-list-metric__icon--right"
             [style.cssText]="metric?.iconStyle || ''"
           >
-            <mat-icon [praxisIcon]="metric?.icon"></mat-icon>
+            <praxis-rich-content [nodes]="rightIconNodes()"></praxis-rich-content>
           </span>
         }
       </div>
@@ -6826,16 +7035,14 @@ class PraxisListMetricComponent {
         metric?.caption &&
         metric?.captionPosition === 'below-progress'
       ) {
-        <div class="p-list-metric__caption p-list-metric__caption--below-progress">
-          {{ metric.caption }}
-        </div>
+        <praxis-rich-content [nodes]="belowProgressCaptionNodes()"></praxis-rich-content>
       }
     </div>
-  `, isInline: true, styles: [":host{display:block;min-width:0}.p-list-metric{--p-list-metric-tone: currentColor;--p-list-metric-progress-fill: var( --p-list-metric-tone, var(--p-list-accent) );--p-list-metric-progress-track: color-mix( in srgb, var(--p-list-metric-progress-fill) 18%, transparent );display:grid;gap:4px;min-width:0;color:var(--p-list-metric-tone, inherit)}.p-list-metric--align-start{justify-items:start;text-align:start}.p-list-metric--align-center{justify-items:center;text-align:center}.p-list-metric--align-end{justify-items:end;text-align:end}.p-list-metric--tone-positive{--p-list-metric-tone: #2f7d32}.p-list-metric--tone-warning{--p-list-metric-tone: #b26a00}.p-list-metric--tone-negative{--p-list-metric-tone: #b3261e}.p-list-metric--tone-neutral{--p-list-metric-tone: var(--p-list-foreground-muted)}.p-list-metric__label{font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--p-list-foreground-muted)}.p-list-metric__main{display:grid;align-items:center;gap:8px;min-width:0}.p-list-metric--layout-icon-value-caption .p-list-metric__main{grid-template-columns:auto minmax(0,1fr)}.p-list-metric--layout-stacked-center .p-list-metric__main{justify-items:center;text-align:center}.p-list-metric--icon-right .p-list-metric__main{grid-template-columns:minmax(0,1fr) auto}.p-list-metric__icon{display:inline-flex;align-items:center;justify-content:center;color:var(--p-list-metric-tone, inherit)}.p-list-metric__icon--right{order:2}.p-list-metric__icon mat-icon{width:1rem;height:1rem;font-size:1rem}.p-list-metric__content{display:grid;gap:2px;min-width:0}.p-list-metric__value-row{display:flex;align-items:baseline;gap:6px;min-width:0;flex-wrap:wrap}.p-list-metric--layout-stacked-center .p-list-metric__value-row{justify-content:center}.p-list-metric__value{font-size:.95rem;font-weight:700;line-height:1.1;min-width:0}.p-list-metric__caption,.p-list-metric__subcaption{font-size:.72rem;line-height:1.2;color:var(--p-list-foreground-muted)}.p-list-metric__caption--inline{display:inline-flex;align-items:center}.p-list-metric__progress{width:100%;height:4px;border-radius:999px;overflow:hidden;background:var(--p-list-metric-progress-track)}.p-list-metric__progress-value{display:block;height:100%;border-radius:inherit;background:var(--p-list-metric-progress-fill)}.p-list-metric__progress--indeterminate{position:relative}.p-list-metric__progress--indeterminate .p-list-metric__progress-value{width:40%!important;animation:p-list-metric-progress 1.2s ease-in-out infinite}@keyframes p-list-metric-progress{0%{transform:translate(-100%)}to{transform:translate(250%)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }] });
+  `, isInline: true, styles: [":host{display:block;min-width:0}.p-list-metric{--p-list-metric-tone: currentColor;--p-list-metric-progress-fill: var( --p-list-metric-tone, var(--p-list-accent) );--p-list-metric-progress-track: color-mix( in srgb, var(--p-list-metric-progress-fill) 18%, transparent );display:grid;gap:4px;min-width:0;color:var(--p-list-metric-tone, inherit)}.p-list-metric--align-start{justify-items:start;text-align:start}.p-list-metric--align-center{justify-items:center;text-align:center}.p-list-metric--align-end{justify-items:end;text-align:end}.p-list-metric--tone-positive{--p-list-metric-tone: #2f7d32}.p-list-metric--tone-warning{--p-list-metric-tone: #b26a00}.p-list-metric--tone-negative{--p-list-metric-tone: #b3261e}.p-list-metric--tone-neutral{--p-list-metric-tone: var(--p-list-foreground-muted)}.p-list-metric__label{font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--p-list-foreground-muted)}.p-list-metric__main{display:grid;align-items:center;gap:8px;min-width:0}.p-list-metric--layout-icon-value-caption .p-list-metric__main{grid-template-columns:auto minmax(0,1fr)}.p-list-metric--layout-stacked-center .p-list-metric__main{justify-items:center;text-align:center}.p-list-metric--icon-right .p-list-metric__main{grid-template-columns:minmax(0,1fr) auto}.p-list-metric__icon{display:inline-flex;align-items:center;justify-content:center;color:var(--p-list-metric-tone, inherit)}.p-list-metric__icon--right{order:2}.p-list-metric__icon mat-icon{width:1rem;height:1rem;font-size:1rem}.p-list-metric__content{display:grid;gap:2px;min-width:0}.p-list-metric__value-row{display:flex;align-items:baseline;gap:6px;min-width:0;flex-wrap:wrap}.p-list-metric--layout-stacked-center .p-list-metric__value-row{justify-content:center}.p-list-metric__value{font-size:.95rem;font-weight:700;line-height:1.1;min-width:0}.p-list-metric__caption,.p-list-metric__subcaption{font-size:.72rem;line-height:1.2;color:var(--p-list-foreground-muted)}.p-list-metric__caption--inline{display:inline-flex;align-items:center}.p-list-metric__progress{width:100%;height:4px;border-radius:999px;overflow:hidden;background:var(--p-list-metric-progress-track)}.p-list-metric__progress-value{display:block;height:100%;border-radius:inherit;background:var(--p-list-metric-progress-fill)}.p-list-metric__progress--indeterminate{position:relative}.p-list-metric__progress--indeterminate .p-list-metric__progress-value{width:40%!important;animation:p-list-metric-progress 1.2s ease-in-out infinite}@keyframes p-list-metric-progress{0%{transform:translate(-100%)}to{transform:translate(250%)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PraxisRichContent, selector: "praxis-rich-content", inputs: ["document", "nodes", "context", "hostCapabilities", "rootClassName"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisListMetricComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'praxis-list-metric', standalone: true, imports: [CommonModule, MatIconModule, PraxisIconDirective], template: `
+            args: [{ selector: 'praxis-list-metric', standalone: true, imports: [CommonModule, PraxisRichContent], template: `
     <div
       class="p-list-metric"
       [ngClass]="metricClasses()"
@@ -6851,25 +7058,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
             class="p-list-metric__icon"
             [style.cssText]="metric?.iconStyle || ''"
           >
-            <mat-icon [praxisIcon]="metric?.icon"></mat-icon>
+            <praxis-rich-content [nodes]="leftIconNodes()"></praxis-rich-content>
           </span>
         }
 
         <div class="p-list-metric__content">
           <div class="p-list-metric__value-row">
-            <span
-              class="p-list-metric__value"
-              [ngClass]="metric?.valueClass"
-              [style.cssText]="metric?.valueStyle || ''"
-            >
-              {{ metric?.value }}
-            </span>
-
-            @if (metric?.layout === 'value+caption' && metric?.caption) {
-              <span class="p-list-metric__caption p-list-metric__caption--inline">
-                {{ metric.caption }}
-              </span>
-            }
+            <praxis-rich-content [nodes]="valueRowNodes()"></praxis-rich-content>
           </div>
 
           @if (
@@ -6877,11 +7072,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
             metric?.caption &&
             metric?.captionPosition !== 'below-progress'
           ) {
-            <div class="p-list-metric__caption">{{ metric.caption }}</div>
+            <praxis-rich-content [nodes]="captionNodes()"></praxis-rich-content>
           }
 
           @if (metric?.subcaption) {
-            <div class="p-list-metric__subcaption">{{ metric.subcaption }}</div>
+            <praxis-rich-content [nodes]="subcaptionNodes()"></praxis-rich-content>
           }
         </div>
 
@@ -6890,7 +7085,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
             class="p-list-metric__icon p-list-metric__icon--right"
             [style.cssText]="metric?.iconStyle || ''"
           >
-            <mat-icon [praxisIcon]="metric?.icon"></mat-icon>
+            <praxis-rich-content [nodes]="rightIconNodes()"></praxis-rich-content>
           </span>
         }
       </div>
@@ -6921,9 +7116,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
         metric?.caption &&
         metric?.captionPosition === 'below-progress'
       ) {
-        <div class="p-list-metric__caption p-list-metric__caption--below-progress">
-          {{ metric.caption }}
-        </div>
+        <praxis-rich-content [nodes]="belowProgressCaptionNodes()"></praxis-rich-content>
       }
     </div>
   `, styles: [":host{display:block;min-width:0}.p-list-metric{--p-list-metric-tone: currentColor;--p-list-metric-progress-fill: var( --p-list-metric-tone, var(--p-list-accent) );--p-list-metric-progress-track: color-mix( in srgb, var(--p-list-metric-progress-fill) 18%, transparent );display:grid;gap:4px;min-width:0;color:var(--p-list-metric-tone, inherit)}.p-list-metric--align-start{justify-items:start;text-align:start}.p-list-metric--align-center{justify-items:center;text-align:center}.p-list-metric--align-end{justify-items:end;text-align:end}.p-list-metric--tone-positive{--p-list-metric-tone: #2f7d32}.p-list-metric--tone-warning{--p-list-metric-tone: #b26a00}.p-list-metric--tone-negative{--p-list-metric-tone: #b3261e}.p-list-metric--tone-neutral{--p-list-metric-tone: var(--p-list-foreground-muted)}.p-list-metric__label{font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--p-list-foreground-muted)}.p-list-metric__main{display:grid;align-items:center;gap:8px;min-width:0}.p-list-metric--layout-icon-value-caption .p-list-metric__main{grid-template-columns:auto minmax(0,1fr)}.p-list-metric--layout-stacked-center .p-list-metric__main{justify-items:center;text-align:center}.p-list-metric--icon-right .p-list-metric__main{grid-template-columns:minmax(0,1fr) auto}.p-list-metric__icon{display:inline-flex;align-items:center;justify-content:center;color:var(--p-list-metric-tone, inherit)}.p-list-metric__icon--right{order:2}.p-list-metric__icon mat-icon{width:1rem;height:1rem;font-size:1rem}.p-list-metric__content{display:grid;gap:2px;min-width:0}.p-list-metric__value-row{display:flex;align-items:baseline;gap:6px;min-width:0;flex-wrap:wrap}.p-list-metric--layout-stacked-center .p-list-metric__value-row{justify-content:center}.p-list-metric__value{font-size:.95rem;font-weight:700;line-height:1.1;min-width:0}.p-list-metric__caption,.p-list-metric__subcaption{font-size:.72rem;line-height:1.2;color:var(--p-list-foreground-muted)}.p-list-metric__caption--inline{display:inline-flex;align-items:center}.p-list-metric__progress{width:100%;height:4px;border-radius:999px;overflow:hidden;background:var(--p-list-metric-progress-track)}.p-list-metric__progress-value{display:block;height:100%;border-radius:inherit;background:var(--p-list-metric-progress-fill)}.p-list-metric__progress--indeterminate{position:relative}.p-list-metric__progress--indeterminate .p-list-metric__progress-value{width:40%!important;animation:p-list-metric-progress 1.2s ease-in-out infinite}@keyframes p-list-metric-progress{0%{transform:translate(-100%)}to{transform:translate(250%)}}\n"] }]
@@ -6966,30 +7159,41 @@ class ExecutiveAccountIdentityComponent {
             ? `Segmento ${this.displaySegmentLabel}`
             : undefined;
     }
+    get titleNodes() {
+        const nodes = [];
+        if (this.displayTitle) {
+            nodes.push({
+                type: 'text',
+                text: this.displayTitle,
+                className: 'account-identity__title',
+            });
+        }
+        if (this.displayMarkerIcon) {
+            nodes.push({
+                type: 'icon',
+                icon: this.displayMarkerIcon,
+                className: 'account-identity__marker',
+            });
+        }
+        return nodes;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ExecutiveAccountIdentityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: ExecutiveAccountIdentityComponent, isStandalone: true, selector: "praxis-executive-account-identity", inputs: { title: "title", markerIcon: "markerIcon", segmentVariant: "segmentVariant", segmentLabel: "segmentLabel", accountType: "accountType", since: "since" }, ngImport: i0, template: `
     <span class="account-identity">
       <span class="account-identity__title-row">
-        @if (displayTitle) {
-          <span class="account-identity__title">{{ displayTitle }}</span>
-        }
-        @if (displayMarkerIcon) {
-          <mat-icon
-            class="account-identity__marker"
-            [praxisIcon]="displayMarkerIcon"
-            aria-hidden="true"
-          ></mat-icon>
-        }
+        <praxis-rich-content
+          rootClassName="account-identity__title-content"
+          [nodes]="titleNodes"
+        ></praxis-rich-content>
       </span>
       @if (hasSubtitle) {
         <span class="account-identity__subtitle-row">
           @if (displaySegmentLabel) {
             <praxis-executive-badge
               [variant]="segmentVariant"
+              [label]="displaySegmentLabel"
               [ariaLabel]="segmentAriaLabel"
-            >
-              {{ displaySegmentLabel }}
-            </praxis-executive-badge>
+            ></praxis-executive-badge>
           }
           @if (displayAccountType) {
             <span class="account-identity__meta">{{ displayAccountType }}</span>
@@ -7003,38 +7207,30 @@ class ExecutiveAccountIdentityComponent {
         </span>
       }
     </span>
-  `, isInline: true, styles: [":host{display:inline-flex;min-width:0}.account-identity{display:inline-flex;flex-direction:column;gap:4px;min-width:0}.account-identity__title-row{display:inline-flex;align-items:center;gap:8px;min-width:0}.account-identity__title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1.05rem;font-weight:800;letter-spacing:-.016em;color:#183046;line-height:1.16}.account-identity__marker{color:#b89536;font-size:15px;width:15px;height:15px;flex-shrink:0;transform:translateY(1px)}.account-identity__subtitle-row{display:inline-flex;align-items:center;flex-wrap:wrap;gap:7px;min-width:0}.account-identity__meta{display:inline-flex;align-items:center;color:#7f90a4;white-space:nowrap;font-size:.76rem;line-height:1.18}.account-identity__separator{color:#a5b0bc;font-size:.74rem;line-height:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "component", type: ExecutiveBadgeComponent, selector: "praxis-executive-badge", inputs: ["ariaLabel", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:inline-flex;min-width:0}.account-identity{display:inline-flex;flex-direction:column;gap:4px;min-width:0}.account-identity__title-row{display:inline-flex;align-items:center;min-width:0}.account-identity__title-content{display:inline-flex;align-items:center;gap:8px;min-width:0}.account-identity__title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1.05rem;font-weight:800;letter-spacing:-.016em;color:#183046;line-height:1.16}.account-identity__marker{color:#b89536;font-size:15px!important;width:15px!important;height:15px!important;flex-shrink:0;transform:translateY(1px)}.account-identity__subtitle-row{display:inline-flex;align-items:center;flex-wrap:wrap;gap:7px;min-width:0}.account-identity__meta{display:inline-flex;align-items:center;color:#7f90a4;white-space:nowrap;font-size:.76rem;line-height:1.18}.account-identity__separator{color:#a5b0bc;font-size:.74rem;line-height:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PraxisRichContent, selector: "praxis-rich-content", inputs: ["document", "nodes", "context", "hostCapabilities", "rootClassName"] }, { kind: "component", type: ExecutiveBadgeComponent, selector: "praxis-executive-badge", inputs: ["ariaLabel", "label", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ExecutiveAccountIdentityComponent, decorators: [{
             type: Component,
             args: [{ selector: 'praxis-executive-account-identity', standalone: true, imports: [
                         CommonModule,
-                        MatIconModule,
-                        PraxisIconDirective,
+                        PraxisRichContent,
                         ExecutiveBadgeComponent,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <span class="account-identity">
       <span class="account-identity__title-row">
-        @if (displayTitle) {
-          <span class="account-identity__title">{{ displayTitle }}</span>
-        }
-        @if (displayMarkerIcon) {
-          <mat-icon
-            class="account-identity__marker"
-            [praxisIcon]="displayMarkerIcon"
-            aria-hidden="true"
-          ></mat-icon>
-        }
+        <praxis-rich-content
+          rootClassName="account-identity__title-content"
+          [nodes]="titleNodes"
+        ></praxis-rich-content>
       </span>
       @if (hasSubtitle) {
         <span class="account-identity__subtitle-row">
           @if (displaySegmentLabel) {
             <praxis-executive-badge
               [variant]="segmentVariant"
+              [label]="displaySegmentLabel"
               [ariaLabel]="segmentAriaLabel"
-            >
-              {{ displaySegmentLabel }}
-            </praxis-executive-badge>
+            ></praxis-executive-badge>
           }
           @if (displayAccountType) {
             <span class="account-identity__meta">{{ displayAccountType }}</span>
@@ -7048,7 +7244,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
         </span>
       }
     </span>
-  `, styles: [":host{display:inline-flex;min-width:0}.account-identity{display:inline-flex;flex-direction:column;gap:4px;min-width:0}.account-identity__title-row{display:inline-flex;align-items:center;gap:8px;min-width:0}.account-identity__title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1.05rem;font-weight:800;letter-spacing:-.016em;color:#183046;line-height:1.16}.account-identity__marker{color:#b89536;font-size:15px;width:15px;height:15px;flex-shrink:0;transform:translateY(1px)}.account-identity__subtitle-row{display:inline-flex;align-items:center;flex-wrap:wrap;gap:7px;min-width:0}.account-identity__meta{display:inline-flex;align-items:center;color:#7f90a4;white-space:nowrap;font-size:.76rem;line-height:1.18}.account-identity__separator{color:#a5b0bc;font-size:.74rem;line-height:1}\n"] }]
+  `, styles: [":host{display:inline-flex;min-width:0}.account-identity{display:inline-flex;flex-direction:column;gap:4px;min-width:0}.account-identity__title-row{display:inline-flex;align-items:center;min-width:0}.account-identity__title-content{display:inline-flex;align-items:center;gap:8px;min-width:0}.account-identity__title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1.05rem;font-weight:800;letter-spacing:-.016em;color:#183046;line-height:1.16}.account-identity__marker{color:#b89536;font-size:15px!important;width:15px!important;height:15px!important;flex-shrink:0;transform:translateY(1px)}.account-identity__subtitle-row{display:inline-flex;align-items:center;flex-wrap:wrap;gap:7px;min-width:0}.account-identity__meta{display:inline-flex;align-items:center;color:#7f90a4;white-space:nowrap;font-size:.76rem;line-height:1.18}.account-identity__separator{color:#a5b0bc;font-size:.74rem;line-height:1}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], markerIcon: [{
@@ -7099,47 +7295,53 @@ class ExecutiveOwnerSummaryComponent {
     get displayIcon() {
         return String(this.icon || '').trim();
     }
+    get ownerSummaryNodes() {
+        const nodes = [
+            {
+                type: 'icon',
+                icon: this.displayIcon,
+                className: 'owner-summary__icon',
+            },
+        ];
+        if (this.hasName) {
+            nodes.push({
+                type: 'text',
+                text: this.displayName,
+                className: 'owner-summary__name',
+            });
+        }
+        return nodes;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ExecutiveOwnerSummaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: ExecutiveOwnerSummaryComponent, isStandalone: true, selector: "praxis-executive-owner-summary", inputs: { name: "name", icon: "icon" }, ngImport: i0, template: `
     @if (displayIcon) {
-      <span class="owner-summary owner-summary--icon">
-        <mat-icon
-          class="owner-summary__icon"
-          [praxisIcon]="displayIcon"
-          aria-hidden="true"
-        ></mat-icon>
-        @if (hasName) {
-          <span class="owner-summary__name">{{ displayName }}</span>
-        }
-      </span>
+      <praxis-rich-content
+        class="owner-summary owner-summary--icon"
+        rootClassName="owner-summary__content"
+        [nodes]="ownerSummaryNodes"
+      ></praxis-rich-content>
     } @else if (hasName) {
       <praxis-executive-owner [name]="displayName"></praxis-executive-owner>
     }
-  `, isInline: true, styles: [":host{display:inline-flex;min-width:0}.owner-summary{display:inline-flex;align-items:center;gap:9px;min-width:0;font-size:.82rem;color:#5b6f84;font-weight:500}.owner-summary__icon{width:20px;height:20px;font-size:20px;color:#8ea2b6;flex-shrink:0}.owner-summary__name{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.15}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "component", type: ExecutiveOwnerComponent, selector: "praxis-executive-owner", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:inline-flex;min-width:0}.owner-summary{display:inline-flex;align-items:center;min-width:0;font-size:.82rem;color:#5b6f84;font-weight:500}.owner-summary__content{display:inline-flex;align-items:center;gap:9px;min-width:0}.owner-summary__icon{width:20px!important;height:20px!important;font-size:20px!important;color:#8ea2b6;flex-shrink:0}.owner-summary__name{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.15}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PraxisRichContent, selector: "praxis-rich-content", inputs: ["document", "nodes", "context", "hostCapabilities", "rootClassName"] }, { kind: "component", type: ExecutiveOwnerComponent, selector: "praxis-executive-owner", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ExecutiveOwnerSummaryComponent, decorators: [{
             type: Component,
             args: [{ selector: 'praxis-executive-owner-summary', standalone: true, imports: [
                         CommonModule,
-                        MatIconModule,
-                        PraxisIconDirective,
+                        PraxisRichContent,
                         ExecutiveOwnerComponent,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     @if (displayIcon) {
-      <span class="owner-summary owner-summary--icon">
-        <mat-icon
-          class="owner-summary__icon"
-          [praxisIcon]="displayIcon"
-          aria-hidden="true"
-        ></mat-icon>
-        @if (hasName) {
-          <span class="owner-summary__name">{{ displayName }}</span>
-        }
-      </span>
+      <praxis-rich-content
+        class="owner-summary owner-summary--icon"
+        rootClassName="owner-summary__content"
+        [nodes]="ownerSummaryNodes"
+      ></praxis-rich-content>
     } @else if (hasName) {
       <praxis-executive-owner [name]="displayName"></praxis-executive-owner>
     }
-  `, styles: [":host{display:inline-flex;min-width:0}.owner-summary{display:inline-flex;align-items:center;gap:9px;min-width:0;font-size:.82rem;color:#5b6f84;font-weight:500}.owner-summary__icon{width:20px;height:20px;font-size:20px;color:#8ea2b6;flex-shrink:0}.owner-summary__name{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.15}\n"] }]
+  `, styles: [":host{display:inline-flex;min-width:0}.owner-summary{display:inline-flex;align-items:center;min-width:0;font-size:.82rem;color:#5b6f84;font-weight:500}.owner-summary__content{display:inline-flex;align-items:center;gap:9px;min-width:0}.owner-summary__icon{width:20px!important;height:20px!important;font-size:20px!important;color:#8ea2b6;flex-shrink:0}.owner-summary__name{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.15}\n"] }]
         }], propDecorators: { name: [{
                 type: Input
             }], icon: [{
@@ -7229,17 +7431,15 @@ class PraxisListRuntimeComponentComponent {
           <praxis-executive-badge
             [variant]="badgeVariant()"
             [ariaLabel]="stringInput('ariaLabel') || undefined"
-          >
-            {{ badgeLabel() }}
-          </praxis-executive-badge>
+            [label]="badgeLabel()"
+          ></praxis-executive-badge>
         }
         @case ("praxis-executive-badge") {
           <praxis-executive-badge
             [variant]="badgeVariant()"
             [ariaLabel]="stringInput('ariaLabel') || undefined"
-          >
-            {{ badgeLabel() }}
-          </praxis-executive-badge>
+            [label]="badgeLabel()"
+          ></praxis-executive-badge>
         }
         @case ("executive-trailing") {
           <span class="exec-trailing-shell">
@@ -7260,7 +7460,7 @@ class PraxisListRuntimeComponentComponent {
       }
       }
     </span>
-  `, isInline: true, styles: [":host{display:inline-flex;min-width:0}.p-list-runtime-component{display:inline-flex;min-width:0}.p-list-runtime-component__unsupported{display:inline-flex;align-items:center;justify-content:center;width:.75rem;height:.75rem;min-width:.75rem;border:1px dashed var(--md-sys-color-outline-variant);border-radius:999px;overflow:hidden;color:transparent;font-size:0;line-height:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ExecutiveAccountIdentityComponent, selector: "praxis-executive-account-identity", inputs: ["title", "markerIcon", "segmentVariant", "segmentLabel", "accountType", "since"] }, { kind: "component", type: ExecutiveAlertSummaryComponent, selector: "praxis-executive-alert-summary", inputs: ["alerts"] }, { kind: "component", type: ExecutiveAlertsComponent, selector: "praxis-executive-alerts", inputs: ["alerts"] }, { kind: "component", type: ExecutiveBadgeComponent, selector: "praxis-executive-badge", inputs: ["ariaLabel", "variant"] }, { kind: "component", type: ExecutiveOwnerComponent, selector: "praxis-executive-owner", inputs: ["name"] }, { kind: "component", type: ExecutiveOwnerSummaryComponent, selector: "praxis-executive-owner-summary", inputs: ["name", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:inline-flex;min-width:0}.p-list-runtime-component{display:inline-flex;min-width:0}.p-list-runtime-component__unsupported{display:inline-flex;align-items:center;justify-content:center;width:.75rem;height:.75rem;min-width:.75rem;border:1px dashed var(--md-sys-color-outline-variant);border-radius:999px;overflow:hidden;color:transparent;font-size:0;line-height:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ExecutiveAccountIdentityComponent, selector: "praxis-executive-account-identity", inputs: ["title", "markerIcon", "segmentVariant", "segmentLabel", "accountType", "since"] }, { kind: "component", type: ExecutiveAlertSummaryComponent, selector: "praxis-executive-alert-summary", inputs: ["alerts"] }, { kind: "component", type: ExecutiveAlertsComponent, selector: "praxis-executive-alerts", inputs: ["alerts"] }, { kind: "component", type: ExecutiveBadgeComponent, selector: "praxis-executive-badge", inputs: ["ariaLabel", "label", "variant"] }, { kind: "component", type: ExecutiveOwnerComponent, selector: "praxis-executive-owner", inputs: ["name"] }, { kind: "component", type: ExecutiveOwnerSummaryComponent, selector: "praxis-executive-owner-summary", inputs: ["name", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisListRuntimeComponentComponent, decorators: [{
             type: Component,
@@ -7325,17 +7525,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
           <praxis-executive-badge
             [variant]="badgeVariant()"
             [ariaLabel]="stringInput('ariaLabel') || undefined"
-          >
-            {{ badgeLabel() }}
-          </praxis-executive-badge>
+            [label]="badgeLabel()"
+          ></praxis-executive-badge>
         }
         @case ("praxis-executive-badge") {
           <praxis-executive-badge
             [variant]="badgeVariant()"
             [ariaLabel]="stringInput('ariaLabel') || undefined"
-          >
-            {{ badgeLabel() }}
-          </praxis-executive-badge>
+            [label]="badgeLabel()"
+          ></praxis-executive-badge>
         }
         @case ("executive-trailing") {
           <span class="exec-trailing-shell">
@@ -7363,6 +7561,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
 
 class PraxisListComposeComponent {
     compose;
+    composeRichContentNodes(composeNode) {
+        const items = Array.isArray(composeNode?.items) ? composeNode.items : [];
+        const separator = typeof composeNode?.separator === 'string' && composeNode.separator.trim()
+            ? composeNode.separator
+            : null;
+        const richItems = [];
+        for (let index = 0; index < items.length; index += 1) {
+            const richNode = this.mapRuntimeNodeToRichPresenter(items[index]);
+            if (!richNode) {
+                return null;
+            }
+            richItems.push(richNode);
+            if (separator && index < items.length - 1) {
+                richItems.push({
+                    type: 'text',
+                    text: separator,
+                    className: 'p-list-compose__separator',
+                });
+            }
+        }
+        return [
+            {
+                type: 'compose',
+                direction: composeNode?.direction === 'column' ? 'column' : 'row',
+                gap: this.normalizeGap(composeNode?.gap),
+                wrap: composeNode?.wrap === true,
+                items: richItems,
+            },
+        ];
+    }
     composeClasses(composeNode) {
         const direction = composeNode?.direction === 'column' ? 'column' : 'row';
         return [
@@ -7395,6 +7623,98 @@ class PraxisListComposeComponent {
             ? `background:transparent;border:1px solid ${color};color:${color};`
             : `background:${color};color:#fff;`;
     }
+    mapRuntimeNodeToRichPresenter(node) {
+        switch (node?.type) {
+            case 'text':
+            case undefined:
+            case null:
+                return this.mapTextNode(node);
+            case 'icon':
+                return this.mapIconNode(node);
+            case 'image':
+                return this.mapImageNode(node);
+            case 'chip':
+                return this.mapChipNode(node);
+            default:
+                return null;
+        }
+    }
+    mapTextNode(node) {
+        return {
+            type: 'text',
+            text: String(node?.value ?? ''),
+            className: node?.class,
+            style: this.parseInlineStyle(node?.style),
+        };
+    }
+    mapIconNode(node) {
+        return {
+            type: 'icon',
+            icon: String(node?.value ?? ''),
+            className: node?.class,
+            style: this.parseInlineStyle(node?.style),
+        };
+    }
+    mapImageNode(node) {
+        return {
+            type: 'image',
+            src: String(node?.value ?? ''),
+            alt: node?.imageAlt || '',
+            className: node?.class,
+            style: this.parseInlineStyle(node?.style),
+        };
+    }
+    mapChipNode(node) {
+        return {
+            type: 'badge',
+            label: String(node?.value ?? ''),
+            className: node?.class,
+            style: this.parseInlineStyle(node?.style),
+        };
+    }
+    normalizeGap(gap) {
+        switch (String(gap || '').trim()) {
+            case '4px':
+            case '0.25rem':
+            case 'xs':
+                return 'xs';
+            case '8px':
+            case '0.5rem':
+            case 'sm':
+                return 'sm';
+            case '16px':
+            case '1rem':
+            case 'lg':
+                return 'lg';
+            case '20px':
+            case '1.25rem':
+            case 'xl':
+                return 'xl';
+            default:
+                return gap ? 'md' : undefined;
+        }
+    }
+    parseInlineStyle(inlineStyle) {
+        const source = String(inlineStyle || '').trim();
+        if (!source) {
+            return undefined;
+        }
+        const entries = source
+            .split(';')
+            .map((part) => part.trim())
+            .filter(Boolean)
+            .map((part) => {
+            const separator = part.indexOf(':');
+            if (separator === -1) {
+                return null;
+            }
+            const key = part.slice(0, separator).trim();
+            const value = part.slice(separator + 1).trim();
+            return key && value ? [key, value] : null;
+        })
+            .filter((entry) => !!entry);
+        return entries.length ? Object.fromEntries(entries) : undefined;
+    }
     ratingRange(node) {
         const max = Number(node?.props?.rating?.max ?? 5);
         return Array.from({ length: Number.isFinite(max) && max > 0 ? max : 5 });
@@ -7425,14 +7745,18 @@ class PraxisListComposeComponent {
         [ngClass]="composeClasses(composeNode)"
         [style.cssText]="composeStyle(composeNode)"
       >
-        @for (node of composeNode?.items || []; track trackNode($index, node); let isLast = $last) {
-          <ng-container
-            *ngTemplateOutlet="renderNode; context: { $implicit: node }"
-          ></ng-container>
-          @if (!isLast && composeNode?.separator) {
-            <span class="p-list-compose__separator">{{
-              composeNode.separator
-            }}</span>
+        @if (composeRichContentNodes(composeNode); as richNodes) {
+          <praxis-rich-content [nodes]="richNodes"></praxis-rich-content>
+        } @else {
+          @for (node of composeNode?.items || []; track trackNode($index, node); let isLast = $last) {
+            <ng-container
+              *ngTemplateOutlet="renderNode; context: { $implicit: node }"
+            ></ng-container>
+            @if (!isLast && composeNode?.separator) {
+              <span class="p-list-compose__separator">{{
+                composeNode.separator
+              }}</span>
+            }
           }
         }
       </div>
@@ -7544,7 +7868,7 @@ class PraxisListComposeComponent {
         }
       }
     </ng-template>
-  `, isInline: true, styles: [":host{display:block;min-width:0}.p-list-compose{display:flex;min-width:0}.p-list-compose--direction-row{flex-direction:row}.p-list-compose--direction-column{flex-direction:column}.p-list-compose--align-start{align-items:flex-start}.p-list-compose--align-center{align-items:center}.p-list-compose--align-end{align-items:flex-end}.p-list-compose--wrap{flex-wrap:wrap}.p-list-compose--nowrap{flex-wrap:nowrap}.p-list-compose__separator{color:var(--p-list-foreground-muted);white-space:pre-wrap}.p-list-compose__unsupported{display:inline-flex;align-items:center;justify-content:center;width:.75rem;height:.75rem;min-width:.75rem;border:1px dashed var(--md-sys-color-outline-variant);border-radius:999px;overflow:hidden;color:transparent;font-size:0;line-height:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i5.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "component", type: PraxisListMetricComponent, selector: "praxis-list-metric", inputs: ["metric"] }, { kind: "component", type: PraxisListRuntimeComponentComponent, selector: "praxis-list-runtime-component", inputs: ["component"] }] });
+  `, isInline: true, styles: [":host{display:block;min-width:0}.p-list-compose{display:flex;min-width:0}.p-list-compose--direction-row{flex-direction:row}.p-list-compose--direction-column{flex-direction:column}.p-list-compose--align-start{align-items:flex-start}.p-list-compose--align-center{align-items:center}.p-list-compose--align-end{align-items:flex-end}.p-list-compose--wrap{flex-wrap:wrap}.p-list-compose--nowrap{flex-wrap:nowrap}.p-list-compose__separator{color:var(--p-list-foreground-muted);white-space:pre-wrap}.p-list-compose__unsupported{display:inline-flex;align-items:center;justify-content:center;width:.75rem;height:.75rem;min-width:.75rem;border:1px dashed var(--md-sys-color-outline-variant);border-radius:999px;overflow:hidden;color:transparent;font-size:0;line-height:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i5.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "component", type: PraxisRichContent, selector: "praxis-rich-content", inputs: ["document", "nodes", "context", "hostCapabilities", "rootClassName"] }, { kind: "component", type: PraxisListMetricComponent, selector: "praxis-list-metric", inputs: ["metric"] }, { kind: "component", type: PraxisListRuntimeComponentComponent, selector: "praxis-list-runtime-component", inputs: ["component"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisListComposeComponent, decorators: [{
             type: Component,
@@ -7553,6 +7877,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         MatChipsModule,
                         MatIconModule,
                         PraxisIconDirective,
+                        PraxisRichContent,
                         PraxisListMetricComponent,
                         PraxisListRuntimeComponentComponent,
                     ], template: `
@@ -7566,14 +7891,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
         [ngClass]="composeClasses(composeNode)"
         [style.cssText]="composeStyle(composeNode)"
       >
-        @for (node of composeNode?.items || []; track trackNode($index, node); let isLast = $last) {
-          <ng-container
-            *ngTemplateOutlet="renderNode; context: { $implicit: node }"
-          ></ng-container>
-          @if (!isLast && composeNode?.separator) {
-            <span class="p-list-compose__separator">{{
-              composeNode.separator
-            }}</span>
+        @if (composeRichContentNodes(composeNode); as richNodes) {
+          <praxis-rich-content [nodes]="richNodes"></praxis-rich-content>
+        } @else {
+          @for (node of composeNode?.items || []; track trackNode($index, node); let isLast = $last) {
+            <ng-container
+              *ngTemplateOutlet="renderNode; context: { $implicit: node }"
+            ></ng-container>
+            @if (!isLast && composeNode?.separator) {
+              <span class="p-list-compose__separator">{{
+                composeNode.separator
+              }}</span>
+            }
           }
         }
       </div>
@@ -8067,6 +8396,65 @@ class PraxisList {
         const templating = this.config?.templating;
         return String(templating?.[slot]?.imageAlt || '');
     }
+    simpleRichContentNodes(node, options) {
+        if (!node || typeof node !== 'object')
+            return null;
+        const type = String(node.type || 'text').trim();
+        switch (type) {
+            case 'icon':
+                if (!String(node.value || '').trim() || this.isThemeColor(node.color)) {
+                    return null;
+                }
+                return [
+                    {
+                        type: 'icon',
+                        icon: String(node.value),
+                        className: node.class,
+                        style: this.mergeStyleRecords(this.parseInlineStyle(node.style), this.parseInlineStyle(this.iconStyle(node.color))),
+                    },
+                ];
+            case 'image':
+                if (!String(node.value || '').trim() || node.badge?.value) {
+                    return null;
+                }
+                return [
+                    {
+                        type: 'image',
+                        src: String(node.value),
+                        alt: String(node.imageAlt || options?.imageAlt || ''),
+                        className: this.joinClasses('inline-image', node.class),
+                        style: this.parseInlineStyle(node.style),
+                    },
+                ];
+            case 'chip':
+                if (this.isThemeColor(node.color))
+                    return null;
+                return [
+                    {
+                        type: 'badge',
+                        label: String(node.value ?? ''),
+                        className: this.joinClasses(node.class, (node.variant || 'filled') === 'outlined'
+                            ? 'chip-outlined'
+                            : undefined),
+                        style: this.mergeStyleRecords(this.parseInlineStyle(this.joinStyles(this.chipStyle(node.color, node.variant), node.style ? ';' + node.style : undefined))),
+                    },
+                ];
+            case 'text':
+                if (options?.slot === 'meta' && this.config?.templating?.metaPrefixIcon) {
+                    return null;
+                }
+                return [
+                    {
+                        type: 'text',
+                        text: String(node.value ?? ''),
+                        className: node.class,
+                        style: this.parseInlineStyle(node.style),
+                    },
+                ];
+            default:
+                return null;
+        }
+    }
     rowLayoutAlignItems() {
         const rowLayout = this.config?.layout?.rowLayout;
         const alias = rowLayout?.itemAlignY;
@@ -8161,6 +8549,48 @@ class PraxisList {
             .map((line) => line.trim())
             .filter((line) => !!line);
     }
+    featureRichContentNodes(item, feature) {
+        if (!feature)
+            return null;
+        if (this.featureProgressPercent(item, feature.expr, feature.class) != null) {
+            return null;
+        }
+        const lines = this.featureLabelLines(item, feature.expr);
+        if (lines.length > 1) {
+            return null;
+        }
+        const mode = this.featuresMode();
+        const nodes = [];
+        const icon = String(feature.icon || '').trim();
+        if (icon && mode !== 'labels-only') {
+            nodes.push({
+                type: 'icon',
+                icon,
+            });
+        }
+        if (mode !== 'icons-only' && lines[0]) {
+            nodes.push({
+                type: 'text',
+                text: lines[0],
+                className: feature.class,
+                style: this.parseInlineStyle(feature.style),
+            });
+        }
+        if (!nodes.length) {
+            return null;
+        }
+        if (nodes.length === 1) {
+            return [nodes[0]];
+        }
+        return [
+            {
+                type: 'compose',
+                direction: 'row',
+                gap: 'sm',
+                items: nodes,
+            },
+        ];
+    }
     featureSemanticClass(item, expr, featureClass) {
         if (!(featureClass || '').includes('exec-metric--risk'))
             return null;
@@ -8399,6 +8829,31 @@ class PraxisList {
             .join(' ');
         return value || undefined;
     }
+    parseInlineStyle(styleText) {
+        const normalized = String(styleText || '').trim();
+        if (!normalized)
+            return undefined;
+        const entries = normalized
+            .split(';')
+            .map((part) => part.trim())
+            .filter(Boolean)
+            .map((part) => {
+            const separatorIndex = part.indexOf(':');
+            if (separatorIndex <= 0)
+                return null;
+            const property = part.slice(0, separatorIndex).trim();
+            const value = part.slice(separatorIndex + 1).trim();
+            return property && value ? [property, value] : null;
+        })
+            .filter((entry) => Array.isArray(entry));
+        if (!entries.length)
+            return undefined;
+        return Object.fromEntries(entries);
+    }
+    mergeStyleRecords(...styles) {
+        const merged = Object.assign({}, ...styles.filter(Boolean));
+        return Object.keys(merged).length ? merged : undefined;
+    }
     featuresVisible() {
         const t = this.config?.templating;
         const has = (t?.features?.length || 0) > 0;
@@ -9154,7 +9609,7 @@ class PraxisList {
                 .toLowerCase();
             if (!t)
                 return '';
-            return t.replace(/\b\w/g, (m) => m.toUpperCase());
+            return toTitleCase(t);
         }
         catch {
             return String(v ?? '');
@@ -9475,7 +9930,7 @@ class PraxisList {
         return [{ key: '', value: String(value) }];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: PraxisList, isStandalone: true, selector: "praxis-list", inputs: { config: "config", listId: "listId", componentInstanceId: "componentInstanceId", form: "form", enableCustomization: ["enableCustomization", "enableCustomization", booleanAttribute] }, outputs: { itemClick: "itemClick", actionClick: "actionClick", selectionChange: "selectionChange" }, providers: [GenericCrudService, ListDataService, providePraxisListI18n()], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"praxis-list-root\"\n  [ngClass]=\"skinClasses\"\n  [attr.data-skin-scope]=\"skinScopeId\"\n  [attr.aria-label]=\"config.a11y?.ariaLabel || null\"\n  [attr.aria-labelledby]=\"config.a11y?.ariaLabelledBy || null\"\n>\n  @if (inlineCss) {\n    <style [attr.nonce]=\"cspNonce || null\" [textContent]=\"inlineCss\"></style>\n  }\n\n  @if (enableCustomization) {\n    <div class=\"list-assistant\">\n      <button\n        mat-mini-fab\n        type=\"button\"\n        color=\"primary\"\n        (click)=\"openConfigEditor()\"\n        [matTooltip]=\"configEditorLabel()\"\n        [attr.aria-label]=\"configEditorLabel()\"\n        data-testid=\"praxis-list-open-config-editor\"\n      >\n        <mat-icon [praxisIcon]=\"'edit'\"></mat-icon>\n      </button>\n      <praxis-ai-assistant [adapter]=\"aiAdapter\"></praxis-ai-assistant>\n    </div>\n  }\n\n  <!-- Skeleton while loading -->\n  @if ((loading$ | async) && hasSkeleton()) {\n    @if (isListVariant()) {\n      <mat-list>\n        @for (_ of skeletonItems(); track $index; let i = $index) {\n          <mat-list-item>\n            <div class=\"list-item-content\">\n              <div class=\"list-item-leading\">\n                <div class=\"skeleton skeleton-avatar\"></div>\n              </div>\n              <div class=\"list-item-text\">\n                <div class=\"skeleton skeleton-line w-60\"></div>\n                @if (layoutLines > 1) {\n                  <div class=\"skeleton skeleton-line w-40\"></div>\n                }\n              </div>\n              <div class=\"list-item-trailing\">\n                <div class=\"skeleton skeleton-chip\"></div>\n              </div>\n            </div>\n          </mat-list-item>\n        }\n      </mat-list>\n    } @else {\n      <div class=\"cards-grid\">\n        @for (_ of skeletonItems(); track $index; let i = $index) {\n          <div class=\"item-card\">\n            <div class=\"list-item-content\">\n              <div class=\"list-item-leading\">\n                <div class=\"skeleton skeleton-avatar\"></div>\n              </div>\n              <div class=\"list-item-text\">\n                <div class=\"skeleton skeleton-line w-60\"></div>\n                @if (layoutLines > 1) {\n                  <div class=\"skeleton skeleton-line w-40\"></div>\n                }\n              </div>\n              <div class=\"list-item-trailing\">\n                <div class=\"skeleton skeleton-chip\"></div>\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n    }\n  } @else {\n    <ng-container *ngTemplateOutlet=\"notLoading\"></ng-container>\n  }\n\n  <ng-template #notLoading>\n    <!-- Empty state -->\n    @if (items$ | async; as all) {\n      @if (all.length === 0) {\n        <div class=\"section-header\">\n          @if (emptyStateTemplate(); as empty) {\n            @switch (empty.type) {\n              @case (\"icon\") {\n                <mat-icon\n                  [praxisIcon]=\"empty.value\"\n                  [ngClass]=\"empty.class\"\n                  [color]=\"isThemeColor(empty.color) ? empty.color : undefined\"\n                  [style.cssText]=\"\n                    (empty.style ? empty.style + ';' : '') +\n                    iconStyle(empty.color)\n                  \"\n                ></mat-icon>\n              }\n              @case (\"image\") {\n                <span\n                  class=\"inline-image\"\n                  [ngClass]=\"empty.class\"\n                  [style.cssText]=\"empty.style\"\n                >\n                  <img\n                    [src]=\"empty.value\"\n                    [alt]=\"config.templating?.emptyState?.imageAlt || ''\"\n                  />\n                  @if (empty.badge?.value) {\n                    <mat-chip\n                      class=\"inline-badge\"\n                      [color]=\"\n                        isThemeColor(empty.badge?.color)\n                          ? empty.badge?.color\n                          : undefined\n                      \"\n                      [ngClass]=\"\n                        (empty.badge?.variant || 'filled') === 'outlined'\n                          ? 'chip-outlined'\n                          : ''\n                      \"\n                      [style.cssText]=\"\n                        chipStyle(empty.badge?.color, empty.badge?.variant)\n                      \"\n                      >{{ empty.badge?.value }}</mat-chip\n                    >\n                  }\n                </span>\n              }\n              @case (\"chip\") {\n                <mat-chip\n                  [color]=\"isThemeColor(empty.color) ? empty.color : undefined\"\n                  [ngClass]=\"[\n                    empty.class || '',\n                    (empty.variant || 'filled') === 'outlined'\n                      ? 'chip-outlined'\n                      : '',\n                  ]\"\n                  [style.cssText]=\"\n                    chipStyle(empty.color, empty.variant) +\n                    (empty.style ? ';' + empty.style : '')\n                  \"\n                  >{{ empty.value }}</mat-chip\n                >\n              }\n              @case (\"rating\") {\n                <span [ngClass]=\"empty.class\" [style.cssText]=\"empty.style\">\n                  @for (\n                    _ of ratingRange(empty);\n                    track $index;\n                    let idx = $index\n                  ) {\n                    <mat-icon\n                      [praxisIcon]=\"starIcon(idx, empty.value)\"\n                      [color]=\"ratingThemeColor(empty)\"\n                      [style.cssText]=\"ratingIconStyle(empty)\"\n                    ></mat-icon>\n                  }\n                </span>\n              }\n              @case (\"html\") {\n                <span\n                  [ngClass]=\"empty.class\"\n                  [style.cssText]=\"empty.style\"\n                  [innerHTML]=\"empty.value\"\n                ></span>\n              }\n              @case (\"metric\") {\n                <praxis-list-metric [metric]=\"empty\"></praxis-list-metric>\n              }\n              @case (\"compose\") {\n                <praxis-list-compose [compose]=\"empty\"></praxis-list-compose>\n              }\n              @case (\"component\") {\n                <praxis-list-runtime-component\n                  [component]=\"empty\"\n                ></praxis-list-runtime-component>\n              }\n              @default {\n                <span [ngClass]=\"empty.class\" [style.cssText]=\"empty.style\">{{\n                  empty.value\n                }}</span>\n              }\n            }\n          }\n        </div>\n      }\n    }\n\n    <ng-template\n      #rowLayoutNode\n      let-node\n      let-slot=\"slot\"\n      let-imageAlt=\"imageAlt\"\n    >\n      @switch (node?.type) {\n        @case (\"icon\") {\n          <mat-icon\n            [praxisIcon]=\"node?.value\"\n            [ngClass]=\"node?.class\"\n            [color]=\"isThemeColor(node?.color) ? node?.color : undefined\"\n            [style.cssText]=\"\n              ((node?.style || '') ? node.style + ';' : '') +\n              iconStyle(node?.color)\n            \"\n          ></mat-icon>\n        }\n        @case (\"image\") {\n          <span\n            class=\"inline-image\"\n            [ngClass]=\"node?.class\"\n            [style.cssText]=\"node?.style\"\n          >\n            <img [src]=\"node?.value\" [alt]=\"node?.imageAlt || imageAlt || ''\" />\n            @if (node?.badge?.value) {\n              <mat-chip\n                class=\"inline-badge\"\n                [color]=\"\n                  isThemeColor(node?.badge?.color)\n                    ? node?.badge?.color\n                    : undefined\n                \"\n                [ngClass]=\"\n                  (node?.badge?.variant || 'filled') === 'outlined'\n                    ? 'chip-outlined'\n                    : ''\n                \"\n                [style.cssText]=\"\n                  chipStyle(node?.badge?.color, node?.badge?.variant)\n                \"\n              >\n                {{ node?.badge?.value }}\n              </mat-chip>\n            }\n          </span>\n        }\n        @case (\"chip\") {\n          <mat-chip\n            [color]=\"isThemeColor(node?.color) ? node?.color : undefined\"\n            [ngClass]=\"[\n              node?.class || '',\n              (node?.variant || 'filled') === 'outlined' ? 'chip-outlined' : '',\n            ]\"\n            [style.cssText]=\"\n              chipStyle(node?.color, node?.variant) +\n              (node?.style ? ';' + node.style : '')\n            \"\n          >\n            {{ node?.value }}\n          </mat-chip>\n        }\n        @case (\"rating\") {\n          <span [ngClass]=\"node?.class\" [style.cssText]=\"node?.style\">\n            @for (_ of ratingRange(node); track $index; let idx = $index) {\n              <mat-icon\n                [praxisIcon]=\"starIcon(idx, node?.value)\"\n                [color]=\"ratingThemeColor(node)\"\n                [style.cssText]=\"ratingIconStyle(node)\"\n              ></mat-icon>\n            }\n          </span>\n        }\n        @case (\"html\") {\n          <span\n            [ngClass]=\"node?.class\"\n            [style.cssText]=\"node?.style\"\n            [innerHTML]=\"node?.value\"\n          ></span>\n        }\n        @case (\"metric\") {\n          <praxis-list-metric [metric]=\"node\"></praxis-list-metric>\n        }\n        @case (\"compose\") {\n          <praxis-list-compose [compose]=\"node\"></praxis-list-compose>\n        }\n        @case (\"component\") {\n          <praxis-list-runtime-component\n            [component]=\"node\"\n          ></praxis-list-runtime-component>\n        }\n        @default {\n          <span [ngClass]=\"node?.class\" [style.cssText]=\"node?.style\">\n            @if (slot === \"meta\" && config.templating?.metaPrefixIcon; as mpi) {\n              <mat-icon [praxisIcon]=\"mpi\"></mat-icon>\n            }\n            {{ node?.value }}\n          </span>\n        }\n      }\n    </ng-template>\n\n    <ng-template\n      #listRowLayout\n      let-item\n      let-index=\"index\"\n      let-sectionKey=\"sectionKey\"\n      let-clickable=\"clickable\"\n    >\n      <div\n        class=\"list-item-content\"\n        [ngClass]=\"rowLayoutItemClass(item)\"\n        [attr.style]=\"rowLayoutItemStyle(item)\"\n        [attr.role]=\"clickable ? 'button' : null\"\n        [attr.tabindex]=\"clickable ? '0' : null\"\n        [attr.aria-label]=\"clickable ? itemAriaLabel(item) : null\"\n        [attr.aria-expanded]=\"\n          clickable && expansionOwnedByRow() ? isExpanded(item, index) : null\n        \"\n        [attr.aria-controls]=\"\n          clickable && expansionOwnedByRow()\n            ? expandRegionId(item, index)\n            : null\n        \"\n        (click)=\"clickable ? onRowActivate(item, index, sectionKey) : null\"\n        (keydown.enter)=\"clickable ? onRowActivate(item, index, sectionKey) : null\"\n        (keydown.space)=\"\n          onRowSpaceActivate($event, clickable, item, index, sectionKey)\n        \"\n      >\n        @for (column of rowLayoutColumns(); track rowLayoutTrackColumn($index, column)) {\n          <div\n            [attr.data-row-slot]=\"column.slot\"\n            [ngClass]=\"rowLayoutColumnClass(column)\"\n            [attr.style]=\"rowLayoutColumnStyle(column)\"\n          >\n            @if (column.slot === \"leading\") {\n              @if (rowLayoutSlot(item, column.slot); as lead) {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    rowLayoutNode;\n                    context: {\n                      $implicit: lead,\n                      slot: column.slot,\n                      imageAlt: rowLayoutImageAlt(column.slot),\n                    }\n                  \"\n                ></ng-container>\n              } @else {\n                <span class=\"leading-placeholder\"></span>\n              }\n            } @else if (column.slot === \"trailing\") {\n              @if (rowLayoutSlot(item, column.slot); as trailingNode) {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    rowLayoutNode;\n                    context: {\n                      $implicit: trailingNode,\n                      slot: column.slot,\n                      imageAlt: rowLayoutImageAlt(column.slot),\n                    }\n                  \"\n                ></ng-container>\n              }\n              @if (showExpandIcon(\"trailing\")) {\n                <button\n                  mat-icon-button\n                  type=\"button\"\n                  class=\"expand-toggle\"\n                  [attr.aria-label]=\"expandToggleAriaLabel(item, index)\"\n                  [attr.aria-expanded]=\"\n                    expansionOwnedByIcon() ? isExpanded(item, index) : null\n                  \"\n                  [attr.aria-controls]=\"\n                    expansionOwnedByIcon()\n                      ? expandRegionId(item, index)\n                      : null\n                  \"\n                  (click)=\"onExpandToggle($event, item, index)\"\n                >\n                  <mat-icon\n                    [praxisIcon]=\"\n                      isExpanded(item, index) ? 'expand_less' : 'expand_more'\n                    \"\n                  ></mat-icon>\n                </button>\n              }\n              @if ((visibleActions(item, \"trailing\") || []).length) {\n                <div\n                  class=\"list-item-actions\"\n                  (click)=\"$event.stopPropagation()\"\n                  (keydown.enter)=\"onActionKeydown($event)\"\n                  (keydown.space)=\"onActionKeydown($event)\"\n                >\n                  @for (\n                    action of visibleActions(item, \"trailing\");\n                    let aidx = $index;\n                    track action?.id ?? $index\n                  ) {\n                    @if ((action.kind || \"icon\") === \"icon\") {\n                      <button\n                        mat-icon-button\n                        [color]=\"\n                          isThemeColor(action.color) ? action.color : undefined\n                        \"\n                        (click)=\"onActionClick($event, action.id, item, index)\"\n                        [attr.aria-label]=\"action.label || action.id\"\n                        [disabled]=\"isActionLoading(action.id, item, index)\"\n                        [ngClass]=\"{\n                          'action-loading': isActionLoading(\n                            action.id,\n                            item,\n                            index\n                          ),\n                        }\"\n                      >\n                        @if (isActionLoading(action.id, item, index)) {\n                          <mat-progress-spinner\n                            class=\"action-spinner\"\n                            mode=\"indeterminate\"\n                            diameter=\"16\"\n                            strokeWidth=\"3\"\n                          ></mat-progress-spinner>\n                        } @else {\n                          <mat-icon\n                            [praxisIcon]=\"action.icon\"\n                            [style.cssText]=\"iconStyle(action.color)\"\n                          ></mat-icon>\n                        }\n                      </button>\n                    } @else {\n                      @if (action.buttonVariant === \"stroked\") {\n                        <button\n                          mat-stroked-button\n                          [color]=\"\n                            isThemeColor(action.color) ? action.color : undefined\n                          \"\n                          [style.cssText]=\"buttonStyle(action.color, 'stroked')\"\n                          (click)=\"onActionClick($event, action.id, item, index)\"\n                          [attr.aria-label]=\"action.label || action.id\"\n                          [disabled]=\"isActionLoading(action.id, item, index)\"\n                          [ngClass]=\"{\n                            'action-loading': isActionLoading(\n                              action.id,\n                              item,\n                              index\n                            ),\n                          }\"\n                        >\n                          @if (isActionLoading(action.id, item, index)) {\n                            <mat-progress-spinner\n                              class=\"action-spinner\"\n                              mode=\"indeterminate\"\n                              diameter=\"16\"\n                              strokeWidth=\"3\"\n                            ></mat-progress-spinner>\n                          } @else {\n                            {{ action.label || action.id }}\n                          }\n                        </button>\n                      }\n                      @if (action.buttonVariant === \"raised\") {\n                        <button\n                          mat-raised-button\n                          [color]=\"\n                            isThemeColor(action.color) ? action.color : undefined\n                          \"\n                          [style.cssText]=\"buttonStyle(action.color, 'raised')\"\n                          (click)=\"onActionClick($event, action.id, item, index)\"\n                          [attr.aria-label]=\"action.label || action.id\"\n                          [disabled]=\"isActionLoading(action.id, item, index)\"\n                          [ngClass]=\"{\n                            'action-loading': isActionLoading(\n                              action.id,\n                              item,\n                              index\n                            ),\n                          }\"\n                        >\n                          @if (isActionLoading(action.id, item, index)) {\n                            <mat-progress-spinner\n                              class=\"action-spinner\"\n                              mode=\"indeterminate\"\n                              diameter=\"16\"\n                              strokeWidth=\"3\"\n                            ></mat-progress-spinner>\n                          } @else {\n                            {{ action.label || action.id }}\n                          }\n                        </button>\n                      }\n                      @if (!action.buttonVariant || action.buttonVariant === \"flat\") {\n                        <button\n                          mat-flat-button\n                          [color]=\"\n                            isThemeColor(action.color) ? action.color : undefined\n                          \"\n                          [style.cssText]=\"buttonStyle(action.color, 'flat')\"\n                          (click)=\"onActionClick($event, action.id, item, index)\"\n                          [attr.aria-label]=\"action.label || action.id\"\n                          [disabled]=\"isActionLoading(action.id, item, index)\"\n                          [ngClass]=\"{\n                            'action-loading': isActionLoading(\n                              action.id,\n                              item,\n                              index\n                            ),\n                          }\"\n                        >\n                          @if (isActionLoading(action.id, item, index)) {\n                            <mat-progress-spinner\n                              class=\"action-spinner\"\n                              mode=\"indeterminate\"\n                              diameter=\"16\"\n                              strokeWidth=\"3\"\n                            ></mat-progress-spinner>\n                          } @else {\n                            {{ action.label || action.id }}\n                          }\n                        </button>\n                      }\n                    }\n                  }\n                </div>\n              }\n            } @else if (column.slot === \"actions\") {\n              @if ((visibleActions(item, \"actions\") || []).length) {\n                <div\n                  class=\"list-item-actions\"\n                  (click)=\"$event.stopPropagation()\"\n                  (keydown.enter)=\"onActionKeydown($event)\"\n                  (keydown.space)=\"onActionKeydown($event)\"\n                >\n                  @for (\n                    action of visibleActions(item, \"actions\");\n                    let aidx = $index;\n                    track action?.id ?? $index\n                  ) {\n                    @if ((action.kind || \"icon\") === \"icon\") {\n                      <button\n                        mat-icon-button\n                        [color]=\"\n                          isThemeColor(action.color) ? action.color : undefined\n                        \"\n                        (click)=\"onActionClick($event, action.id, item, index)\"\n                        [attr.aria-label]=\"action.label || action.id\"\n                        [disabled]=\"isActionLoading(action.id, item, index)\"\n                        [ngClass]=\"{\n                          'action-loading': isActionLoading(\n                            action.id,\n                            item,\n                            index\n                          ),\n                        }\"\n                      >\n                        @if (isActionLoading(action.id, item, index)) {\n                          <mat-progress-spinner\n                            class=\"action-spinner\"\n                            mode=\"indeterminate\"\n                            diameter=\"16\"\n                            strokeWidth=\"3\"\n                          ></mat-progress-spinner>\n                        } @else {\n                          <mat-icon\n                            [praxisIcon]=\"action.icon\"\n                            [style.cssText]=\"iconStyle(action.color)\"\n                          ></mat-icon>\n                        }\n                      </button>\n                    } @else {\n                      @if (action.buttonVariant === \"stroked\") {\n                        <button\n                          mat-stroked-button\n                          [color]=\"\n                            isThemeColor(action.color) ? action.color : undefined\n                          \"\n                          [style.cssText]=\"buttonStyle(action.color, 'stroked')\"\n                          (click)=\"onActionClick($event, action.id, item, index)\"\n                          [attr.aria-label]=\"action.label || action.id\"\n                          [disabled]=\"isActionLoading(action.id, item, index)\"\n                          [ngClass]=\"{\n                            'action-loading': isActionLoading(\n                              action.id,\n                              item,\n                              index\n                            ),\n                          }\"\n                        >\n                          @if (isActionLoading(action.id, item, index)) {\n                            <mat-progress-spinner\n                              class=\"action-spinner\"\n                              mode=\"indeterminate\"\n                              diameter=\"16\"\n                              strokeWidth=\"3\"\n                            ></mat-progress-spinner>\n                          } @else {\n                            {{ action.label || action.id }}\n                          }\n                        </button>\n                      }\n                      @if (action.buttonVariant === \"raised\") {\n                        <button\n                          mat-raised-button\n                          [color]=\"\n                            isThemeColor(action.color) ? action.color : undefined\n                          \"\n                          [style.cssText]=\"buttonStyle(action.color, 'raised')\"\n                          (click)=\"onActionClick($event, action.id, item, index)\"\n                          [attr.aria-label]=\"action.label || action.id\"\n                          [disabled]=\"isActionLoading(action.id, item, index)\"\n                          [ngClass]=\"{\n                            'action-loading': isActionLoading(\n                              action.id,\n                              item,\n                              index\n                            ),\n                          }\"\n                        >\n                          @if (isActionLoading(action.id, item, index)) {\n                            <mat-progress-spinner\n                              class=\"action-spinner\"\n                              mode=\"indeterminate\"\n                              diameter=\"16\"\n                              strokeWidth=\"3\"\n                            ></mat-progress-spinner>\n                          } @else {\n                            {{ action.label || action.id }}\n                          }\n                        </button>\n                      }\n                      @if (!action.buttonVariant || action.buttonVariant === \"flat\") {\n                        <button\n                          mat-flat-button\n                          [color]=\"\n                            isThemeColor(action.color) ? action.color : undefined\n                          \"\n                          [style.cssText]=\"buttonStyle(action.color, 'flat')\"\n                          (click)=\"onActionClick($event, action.id, item, index)\"\n                          [attr.aria-label]=\"action.label || action.id\"\n                          [disabled]=\"isActionLoading(action.id, item, index)\"\n                          [ngClass]=\"{\n                            'action-loading': isActionLoading(\n                              action.id,\n                              item,\n                              index\n                            ),\n                          }\"\n                        >\n                          @if (isActionLoading(action.id, item, index)) {\n                            <mat-progress-spinner\n                              class=\"action-spinner\"\n                              mode=\"indeterminate\"\n                              diameter=\"16\"\n                              strokeWidth=\"3\"\n                            ></mat-progress-spinner>\n                          } @else {\n                            {{ action.label || action.id }}\n                          }\n                        </button>\n                      }\n                    }\n                  }\n                </div>\n              }\n            } @else if (column.slot === \"expand\") {\n              @if (showExpandIcon(\"expand\")) {\n                <button\n                  mat-icon-button\n                  type=\"button\"\n                  class=\"expand-toggle\"\n                  [attr.aria-label]=\"expandToggleAriaLabel(item, index)\"\n                  [attr.aria-expanded]=\"\n                    expansionOwnedByIcon() ? isExpanded(item, index) : null\n                  \"\n                  [attr.aria-controls]=\"\n                    expansionOwnedByIcon()\n                      ? expandRegionId(item, index)\n                      : null\n                  \"\n                  (click)=\"onExpandToggle($event, item, index)\"\n                >\n                  <mat-icon\n                    [praxisIcon]=\"\n                      isExpanded(item, index) ? 'expand_less' : 'expand_more'\n                    \"\n                  ></mat-icon>\n                </button>\n              }\n            } @else if (rowLayoutSlot(item, column.slot); as slotNode) {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  rowLayoutNode;\n                  context: {\n                    $implicit: slotNode,\n                    slot: column.slot,\n                    imageAlt: rowLayoutImageAlt(column.slot),\n                  }\n                \"\n              ></ng-container>\n            }\n          </div>\n        }\n      </div>\n    </ng-template>\n\n    <!-- List variant -->\n    @if (isListVariant()) {\n      <!-- Selection list -->\n      @if (isSelectionEnabled()) {\n        <mat-selection-list\n          [multiple]=\"config.selection?.mode === 'multiple'\"\n          [formControl]=\"boundControl\"\n          (selectionChange)=\"onSelectionChange($event)\"\n        >\n          @for (\n            section of sections$ | async;\n            track trackBySection($index, section)\n          ) {\n            @if (section.key) {\n              <div class=\"section-header mat-subheader\">\n                @if (sectionHeaderTemplate(section.key); as sh) {\n                  @switch (sh.type) {\n                    @case (\"icon\") {\n                      <mat-icon\n                        [praxisIcon]=\"sh.value\"\n                        [ngClass]=\"sh.class\"\n                        [color]=\"isThemeColor(sh.color) ? sh.color : undefined\"\n                        [style.cssText]=\"\n                          (sh.style ? sh.style + ';' : '') + iconStyle(sh.color)\n                        \"\n                      ></mat-icon>\n                    }\n                    @case (\"image\") {\n                      <span\n                        class=\"inline-image\"\n                        [ngClass]=\"sh.class\"\n                        [style.cssText]=\"sh.style\"\n                      >\n                        <img\n                          [src]=\"sh.value\"\n                          [alt]=\"\n                            config.templating?.sectionHeader?.imageAlt || ''\n                          \"\n                        />\n                        @if (sh.badge?.value) {\n                          <mat-chip\n                            class=\"inline-badge\"\n                            [color]=\"\n                              isThemeColor(sh.badge?.color)\n                                ? sh.badge?.color\n                                : undefined\n                            \"\n                            [ngClass]=\"\n                              (sh.badge?.variant || 'filled') === 'outlined'\n                                ? 'chip-outlined'\n                                : ''\n                            \"\n                            [style.cssText]=\"\n                              chipStyle(sh.badge?.color, sh.badge?.variant)\n                            \"\n                            >{{ sh.badge?.value }}</mat-chip\n                          >\n                        }\n                      </span>\n                    }\n                    @case (\"chip\") {\n                      <mat-chip\n                        [color]=\"isThemeColor(sh.color) ? sh.color : undefined\"\n                        [ngClass]=\"[\n                          sh.class || '',\n                          (sh.variant || 'filled') === 'outlined'\n                            ? 'chip-outlined'\n                            : '',\n                        ]\"\n                        [style.cssText]=\"\n                          chipStyle(sh.color, sh.variant) +\n                          (sh.style ? ';' + sh.style : '')\n                        \"\n                        >{{ sh.value }}</mat-chip\n                      >\n                    }\n                    @case (\"rating\") {\n                      <span [ngClass]=\"sh.class\" [style.cssText]=\"sh.style\">\n                        @for (\n                          _ of ratingRange(sh);\n                          track $index;\n                          let idx = $index\n                        ) {\n                          <mat-icon\n                            [praxisIcon]=\"starIcon(idx, sh.value)\"\n                            [color]=\"ratingThemeColor(sh)\"\n                            [style.cssText]=\"ratingIconStyle(sh)\"\n                          ></mat-icon>\n                        }\n                      </span>\n                    }\n                    @case (\"html\") {\n                      <span\n                        [ngClass]=\"sh.class\"\n                        [style.cssText]=\"sh.style\"\n                        [innerHTML]=\"sh.value\"\n                      ></span>\n                    }\n                    @case (\"metric\") {\n                      <praxis-list-metric [metric]=\"sh\"></praxis-list-metric>\n                    }\n                    @case (\"compose\") {\n                      <praxis-list-compose [compose]=\"sh\"></praxis-list-compose>\n                    }\n                    @case (\"component\") {\n                      <praxis-list-runtime-component\n                        [component]=\"sh\"\n                      ></praxis-list-runtime-component>\n                    }\n                    @default {\n                      <span [ngClass]=\"sh.class\" [style.cssText]=\"sh.style\">{{\n                        sh.value\n                      }}</span>\n                    }\n                  }\n                }\n              </div>\n            }\n            @for (\n              item of section.items;\n              track trackByItem($index, item);\n              let i = $index\n            ) {\n              <mat-list-option\n                [value]=\"item\"\n                [attr.aria-label]=\"itemAriaLabel(item)\"\n              >\n                @if (hasRowLayoutGrid()) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      listRowLayout;\n                      context: {\n                        $implicit: item,\n                        index: i,\n                        sectionKey: section.key || undefined,\n                        clickable: false,\n                      }\n                    \"\n                  ></ng-container>\n                } @else {\n                <div\n                  class=\"list-item-content\"\n                  [ngClass]=\"itemRuleClass(item)\"\n                  [attr.style]=\"itemRuleStyle(item)\"\n                >\n                  <div class=\"list-item-leading\">\n                    @if (leading(item); as lead) {\n                      @switch (lead.type) {\n                        @case (\"icon\") {\n                          <mat-icon\n                            [praxisIcon]=\"lead.value\"\n                            [ngClass]=\"lead.class\"\n                            [color]=\"\n                              isThemeColor(lead.color) ? lead.color : undefined\n                            \"\n                            [style.cssText]=\"\n                              (lead.style ? lead.style + ';' : '') +\n                              iconStyle(lead.color)\n                            \"\n                          ></mat-icon>\n                        }\n                        @case (\"image\") {\n                          <div\n                            class=\"lead-image\"\n                            [ngClass]=\"lead.class\"\n                            [style.cssText]=\"lead.style\"\n                          >\n                            <img\n                              [src]=\"lead.value\"\n                              [alt]=\"config.templating?.leading?.imageAlt || ''\"\n                            />\n                            @if (lead.badge?.value) {\n                              <mat-chip\n                                class=\"lead-badge\"\n                                [color]=\"\n                                  isThemeColor(lead.badge?.color)\n                                    ? lead.badge?.color\n                                    : undefined\n                                \"\n                                [ngClass]=\"\n                                  (lead.badge?.variant || 'filled') ===\n                                  'outlined'\n                                    ? 'chip-outlined'\n                                    : ''\n                                \"\n                                [style.cssText]=\"\n                                  chipStyle(\n                                    lead.badge?.color,\n                                    lead.badge?.variant\n                                  )\n                                \"\n                                >{{ lead.badge?.value }}</mat-chip\n                              >\n                            }\n                          </div>\n                        }\n                        @case (\"text\") {\n                          <span\n                            [ngClass]=\"lead.class\"\n                            [style.cssText]=\"lead.style\"\n                            >{{ lead.value }}</span\n                          >\n                        }\n                        @case (\"chip\") {\n                          <mat-chip\n                            [color]=\"\n                              isThemeColor(lead.color) ? lead.color : undefined\n                            \"\n                            [ngClass]=\"\n                              (lead.variant || 'filled') === 'outlined'\n                                ? 'chip-outlined'\n                                : ''\n                            \"\n                            [style.cssText]=\"\n                              chipStyle(lead.color, lead.variant)\n                            \"\n                            >{{ lead.value }}</mat-chip\n                          >\n                        }\n                        @case (\"rating\") {\n                          <span\n                            [ngClass]=\"lead.class\"\n                            [style.cssText]=\"lead.style\"\n                          >\n                            @for (\n                              _ of ratingRange(lead);\n                              track $index;\n                              let idx = $index\n                            ) {\n                              <mat-icon\n                                [praxisIcon]=\"starIcon(idx, lead.value)\"\n                                [color]=\"ratingThemeColor(lead)\"\n                                [style.cssText]=\"ratingIconStyle(lead)\"\n                              ></mat-icon>\n                            }\n                          </span>\n                        }\n                        @case (\"html\") {\n                          <span\n                            [ngClass]=\"lead.class\"\n                            [style.cssText]=\"lead.style\"\n                            [innerHTML]=\"lead.value\"\n                          ></span>\n                        }\n                        @case (\"metric\") {\n                          <praxis-list-metric [metric]=\"lead\"></praxis-list-metric>\n                        }\n                        @case (\"compose\") {\n                          <praxis-list-compose\n                            [compose]=\"lead\"\n                          ></praxis-list-compose>\n                        }\n                        @case (\"component\") {\n                          <praxis-list-runtime-component\n                            [component]=\"lead\"\n                          ></praxis-list-runtime-component>\n                        }\n                        @default {\n                          <span\n                            [ngClass]=\"lead.class\"\n                            [style.cssText]=\"lead.style\"\n                            >{{ lead.value }}</span\n                          >\n                        }\n                      }\n                    } @else {\n                      <span class=\"leading-placeholder\"></span>\n                    }\n                  </div>\n                  <div class=\"list-item-text\">\n                    <div\n                      class=\"primary\"\n                      [ngClass]=\"primary(item)?.class\"\n                      [style.cssText]=\"primary(item)?.style\"\n                    >\n                      @if (primary(item)?.type === \"metric\") {\n                        <praxis-list-metric\n                          [metric]=\"primary(item)\"\n                        ></praxis-list-metric>\n                      } @else if (primary(item)?.type === \"compose\") {\n                        <praxis-list-compose\n                          [compose]=\"primary(item)\"\n                        ></praxis-list-compose>\n                      } @else if (primary(item)?.type === \"component\") {\n                        <praxis-list-runtime-component\n                          [component]=\"primary(item)\"\n                        ></praxis-list-runtime-component>\n                      } @else {\n                        {{ primary(item)?.value }}\n                      }\n                    </div>\n                    @if (layoutLines > 1) {\n                      <div\n                        class=\"secondary\"\n                        [ngClass]=\"secondary(item)?.class\"\n                        [style.cssText]=\"secondary(item)?.style\"\n                      >\n                        @if (secondary(item)?.type === \"metric\") {\n                          <praxis-list-metric\n                            [metric]=\"secondary(item)\"\n                          ></praxis-list-metric>\n                        } @else if (secondary(item)?.type === \"compose\") {\n                          <praxis-list-compose\n                            [compose]=\"secondary(item)\"\n                          ></praxis-list-compose>\n                        } @else if (secondary(item)?.type === \"component\") {\n                          <praxis-list-runtime-component\n                            [component]=\"secondary(item)\"\n                          ></praxis-list-runtime-component>\n                        } @else {\n                          {{ secondary(item)?.value }}\n                        }\n                      </div>\n                    }\n                    @if (meta(item); as m) {\n                      @if (\n                        (config.templating?.metaPlacement === \"line\" &&\n                          (m?.type === \"text\" ||\n                            m?.type === \"date\" ||\n                            m?.type === \"currency\")) ||\n                        (layoutLines > 2 &&\n                          (m?.type === \"text\" ||\n                            m?.type === \"date\" ||\n                            m?.type === \"currency\"))\n                      ) {\n                        <div\n                          class=\"tertiary\"\n                          [ngClass]=\"m.class\"\n                          [style.cssText]=\"m.style\"\n                        >\n                          @if (config.templating?.metaPrefixIcon; as mpi) {\n                            <mat-icon [praxisIcon]=\"mpi\"></mat-icon>\n                          }\n                          {{ m.value }}\n                        </div>\n                      }\n                    }\n                    @if (featuresVisible()) {\n                      <div class=\"features\">\n                        @for (\n                          f of config.templating?.features || [];\n                          track $index;\n                          let fi = $index\n                        ) {\n                          <span\n                            class=\"feature\"\n                            [ngClass]=\"\n                              featureSemanticClass(item, f.expr, f.class)\n                            \"\n                          >\n                            @if (f.icon && featuresMode() !== \"labels-only\") {\n                              <mat-icon [praxisIcon]=\"f.icon\"></mat-icon>\n                            }\n                            @if (featuresMode() !== \"icons-only\") {\n                              <span\n                                [ngClass]=\"f.class\"\n                                [style.cssText]=\"f.style\"\n                              >\n                                @for (\n                                  line of featureLabelLines(item, f.expr);\n                                  track $index\n                                ) {\n                                  <span class=\"feature-line\">{{ line }}</span>\n                                }\n                              </span>\n                            }\n                            @if (\n                              featureProgressPercent(item, f.expr, f.class);\n                              as progress\n                            ) {\n                              <span class=\"feature-progress\" aria-hidden=\"true\">\n                                <span\n                                  class=\"feature-progress__value\"\n                                  [style.width.%]=\"progress\"\n                                ></span>\n                              </span>\n                            }\n                          </span>\n                        }\n                      </div>\n                    }\n                  </div>\n                  <div class=\"list-item-trailing\">\n                    @if (meta(item); as m) {\n                      @if (\n                        !(\n                          (config.templating?.metaPlacement === \"line\" ||\n                            layoutLines > 2) &&\n                          (m?.type === \"text\" ||\n                            m?.type === \"date\" ||\n                            m?.type === \"currency\")\n                        )\n                      ) {\n                        <div\n                          class=\"meta\"\n                          [ngClass]=\"m.class\"\n                          [style.cssText]=\"m.style\"\n                        >\n                          @switch (m.type) {\n                            @case (\"chip\") {\n                              <mat-chip\n                                [color]=\"\n                                  isThemeColor(m.color) ? m.color : undefined\n                                \"\n                                [ngClass]=\"\n                                  (m.variant || 'filled') === 'outlined'\n                                    ? 'chip-outlined'\n                                    : ''\n                                \"\n                                [style.cssText]=\"chipStyle(m.color, m.variant)\"\n                                >{{ m.value }}</mat-chip\n                              >\n                            }\n                            @case (\"rating\") {\n                              @for (\n                                _ of ratingRange(m);\n                                track $index;\n                                let idx = $index\n                              ) {\n                                <mat-icon\n                                  [praxisIcon]=\"starIcon(idx, m.value)\"\n                                  [color]=\"ratingThemeColor(m)\"\n                                  [style.cssText]=\"ratingIconStyle(m)\"\n                                ></mat-icon>\n                              }\n                            }\n                            @case (\"icon\") {\n                              <mat-icon\n                                [praxisIcon]=\"m.value\"\n                                [color]=\"\n                                  isThemeColor(m.color) ? m.color : undefined\n                                \"\n                                [style.cssText]=\"iconStyle(m.color)\"\n                              ></mat-icon>\n                            }\n                            @case (\"image\") {\n                              <span class=\"inline-image\"\n                                ><img [src]=\"m.value\" [alt]=\"m.imageAlt || ''\"\n                              /></span>\n                            }\n                            @case (\"html\") {\n                              <span [innerHTML]=\"m.value\"></span>\n                            }\n                            @case (\"metric\") {\n                              <praxis-list-metric [metric]=\"m\"></praxis-list-metric>\n                            }\n                            @case (\"compose\") {\n                              <praxis-list-compose\n                                [compose]=\"m\"\n                              ></praxis-list-compose>\n                            }\n                            @case (\"component\") {\n                              <praxis-list-runtime-component\n                                [component]=\"m\"\n                              ></praxis-list-runtime-component>\n                            }\n                            @default {\n                              <span>\n                                @if (\n                                  config.templating?.metaPrefixIcon;\n                                  as mpi2\n                                ) {\n                                  <mat-icon [praxisIcon]=\"mpi2\"></mat-icon>\n                                }\n                                {{ m.value }}</span\n                              >\n                            }\n                          }\n                        </div>\n                      }\n                    }\n                    @if (trailing(item); as tr) {\n                      <div\n                        class=\"trailing\"\n                        [ngClass]=\"tr.class\"\n                        [style.cssText]=\"tr.style\"\n                      >\n                        @switch (tr.type) {\n                          @case (\"chip\") {\n                            <mat-chip\n                              [color]=\"\n                                isThemeColor(tr.color) ? tr.color : undefined\n                              \"\n                              [ngClass]=\"\n                                (tr.variant || 'filled') === 'outlined'\n                                  ? 'chip-outlined'\n                                  : ''\n                              \"\n                              [style.cssText]=\"chipStyle(tr.color, tr.variant)\"\n                              >{{ tr.value }}</mat-chip\n                            >\n                          }\n                          @case (\"icon\") {\n                            <mat-icon\n                              [praxisIcon]=\"tr.value\"\n                              [color]=\"\n                                isThemeColor(tr.color) ? tr.color : undefined\n                              \"\n                              [style.cssText]=\"iconStyle(tr.color)\"\n                            ></mat-icon>\n                          }\n                          @case (\"image\") {\n                            <div\n                              class=\"lead-image\"\n                              [ngClass]=\"tr.class\"\n                              [style.cssText]=\"tr.style\"\n                            >\n                              <img\n                                [src]=\"tr.value\"\n                                [alt]=\"\n                                  config.templating?.trailing?.imageAlt || ''\n                                \"\n                              />\n                              @if (tr.badge?.value) {\n                                <mat-chip\n                                  class=\"lead-badge\"\n                                  [color]=\"\n                                    isThemeColor(tr.badge?.color)\n                                      ? tr.badge?.color\n                                      : undefined\n                                  \"\n                                  [ngClass]=\"\n                                    (tr.badge?.variant || 'filled') ===\n                                    'outlined'\n                                      ? 'chip-outlined'\n                                      : ''\n                                  \"\n                                  [style.cssText]=\"\n                                    chipStyle(\n                                      tr.badge?.color,\n                                      tr.badge?.variant\n                                    )\n                                  \"\n                                  >{{ tr.badge?.value }}</mat-chip\n                                >\n                              }\n                            </div>\n                          }\n                          @case (\"rating\") {\n                            @for (\n                              _ of ratingRange(tr);\n                              track $index;\n                              let idx = $index\n                            ) {\n                              <mat-icon\n                                [praxisIcon]=\"starIcon(idx, tr.value)\"\n                                [color]=\"ratingThemeColor(tr)\"\n                                [style.cssText]=\"ratingIconStyle(tr)\"\n                              ></mat-icon>\n                            }\n                          }\n                          @case (\"html\") {\n                            @if (item.alertsData !== undefined && item.ownerName) {\n                              <!-- Component-based rendering for executive trailing -->\n                              <span class=\"exec-trailing-shell\">\n                                <praxis-executive-alerts [alerts]=\"item.alertsData\"></praxis-executive-alerts>\n                                <praxis-executive-owner [name]=\"item.ownerName\"></praxis-executive-owner>\n                              </span>\n                            } @else {\n                              <span [innerHTML]=\"tr.value\"></span>\n                            }\n                          }\n                          @case (\"metric\") {\n                            <praxis-list-metric [metric]=\"tr\"></praxis-list-metric>\n                          }\n                          @case (\"compose\") {\n                            <praxis-list-compose\n                              [compose]=\"tr\"\n                            ></praxis-list-compose>\n                          }\n                          @case (\"component\") {\n                            <praxis-list-runtime-component\n                              [component]=\"tr\"\n                            ></praxis-list-runtime-component>\n                          }\n                          @default {\n                            <span>{{ tr.value }}</span>\n                          }\n                        }\n                      </div>\n                    }\n                    @if (showExpandIcon(\"trailing\")) {\n                      <button\n                        mat-icon-button\n                        type=\"button\"\n                        class=\"expand-toggle\"\n                        [attr.aria-label]=\"expandToggleAriaLabel(item, i)\"\n                        [attr.aria-expanded]=\"\n                          expansionOwnedByIcon() ? isExpanded(item, i) : null\n                        \"\n                        [attr.aria-controls]=\"\n                          expansionOwnedByIcon()\n                            ? expandRegionId(item, i)\n                            : null\n                        \"\n                        (click)=\"onExpandToggle($event, item, i)\"\n                      >\n                        <mat-icon\n                          [praxisIcon]=\"\n                            isExpanded(item, i) ? 'expand_less' : 'expand_more'\n                          \"\n                        ></mat-icon>\n                      </button>\n                    }\n                    @if ((visibleActions(item, \"trailing\") || []).length) {\n                      <div\n                        class=\"list-item-actions\"\n                        (click)=\"$event.stopPropagation()\"\n                        (keydown.enter)=\"onActionKeydown($event)\"\n                        (keydown.space)=\"onActionKeydown($event)\"\n                      >\n                        @for (\n                          action of visibleActions(item, \"trailing\");\n                          let aidx = $index;\n                          track action?.id ?? $index\n                        ) {\n                          @if ((action.kind || \"icon\") === \"icon\") {\n                            <button\n                              mat-icon-button\n                              [color]=\"\n                                isThemeColor(action.color)\n                                  ? action.color\n                                  : undefined\n                              \"\n                              (click)=\"\n                                onActionClick($event, action.id, item, i)\n                              \"\n                              [attr.aria-label]=\"action.label || action.id\"\n                              [disabled]=\"isActionLoading(action.id, item, i)\"\n                              [ngClass]=\"{\n                                'action-loading': isActionLoading(\n                                  action.id,\n                                  item,\n                                  i\n                                ),\n                              }\"\n                            >\n                              @if (isActionLoading(action.id, item, i)) {\n                                <mat-progress-spinner\n                                  class=\"action-spinner\"\n                                  mode=\"indeterminate\"\n                                  diameter=\"16\"\n                                  strokeWidth=\"3\"\n                                ></mat-progress-spinner>\n                              } @else {\n                                <mat-icon\n                                  [praxisIcon]=\"action.icon\"\n                                  [style.cssText]=\"iconStyle(action.color)\"\n                                ></mat-icon>\n                              }\n                            </button>\n                          } @else {\n                            @if (action.buttonVariant === \"stroked\") {\n                              <button\n                                mat-stroked-button\n                                [color]=\"\n                                  isThemeColor(action.color)\n                                    ? action.color\n                                    : undefined\n                                \"\n                                [style.cssText]=\"\n                                  buttonStyle(action.color, 'stroked')\n                                \"\n                                (click)=\"\n                                  onActionClick($event, action.id, item, i)\n                                \"\n                                [attr.aria-label]=\"action.label || action.id\"\n                                [disabled]=\"isActionLoading(action.id, item, i)\"\n                                [ngClass]=\"{\n                                  'action-loading': isActionLoading(\n                                    action.id,\n                                    item,\n                                    i\n                                  ),\n                                }\"\n                              >\n                                @if (isActionLoading(action.id, item, i)) {\n                                  <mat-progress-spinner\n                                    class=\"action-spinner\"\n                                    mode=\"indeterminate\"\n                                    diameter=\"16\"\n                                    strokeWidth=\"3\"\n                                  ></mat-progress-spinner>\n                                } @else {\n                                  {{ action.label || action.id }}\n                                }\n                              </button>\n                            }\n                            @if (action.buttonVariant === \"raised\") {\n                              <button\n                                mat-raised-button\n                                [color]=\"\n                                  isThemeColor(action.color)\n                                    ? action.color\n                                    : undefined\n                                \"\n                                [style.cssText]=\"\n                                  buttonStyle(action.color, 'raised')\n                                \"\n                                (click)=\"\n                                  onActionClick($event, action.id, item, i)\n                                \"\n                                [attr.aria-label]=\"action.label || action.id\"\n                                [disabled]=\"isActionLoading(action.id, item, i)\"\n                                [ngClass]=\"{\n                                  'action-loading': isActionLoading(\n                                    action.id,\n                                    item,\n                                    i\n                                  ),\n                                }\"\n                              >\n                                @if (isActionLoading(action.id, item, i)) {\n                                  <mat-progress-spinner\n                                    class=\"action-spinner\"\n                                    mode=\"indeterminate\"\n                                    diameter=\"16\"\n                                    strokeWidth=\"3\"\n                                  ></mat-progress-spinner>\n                                } @else {\n                                  {{ action.label || action.id }}\n                                }\n                              </button>\n                            }\n                            @if (\n                              !action.buttonVariant ||\n                              action.buttonVariant === \"flat\"\n                            ) {\n                              <button\n                                mat-flat-button\n                                [color]=\"\n                                  isThemeColor(action.color)\n                                    ? action.color\n                                    : undefined\n                                \"\n                                [style.cssText]=\"\n                                  buttonStyle(action.color, 'flat')\n                                \"\n                                (click)=\"\n                                  onActionClick($event, action.id, item, i)\n                                \"\n                                [attr.aria-label]=\"action.label || action.id\"\n                                [disabled]=\"isActionLoading(action.id, item, i)\"\n                                [ngClass]=\"{\n                                  'action-loading': isActionLoading(\n                                    action.id,\n                                    item,\n                                    i\n                                  ),\n                                }\"\n                              >\n                                @if (isActionLoading(action.id, item, i)) {\n                                  <mat-progress-spinner\n                                    class=\"action-spinner\"\n                                    mode=\"indeterminate\"\n                                    diameter=\"16\"\n                                    strokeWidth=\"3\"\n                                  ></mat-progress-spinner>\n                                } @else {\n                                  {{ action.label || action.id }}\n                                }\n                              </button>\n                            }\n                          }\n                        }\n                      </div>\n                    }\n                  </div>\n                </div>\n                }\n                @if (isExpandable() && isExpanded(item, i)) {\n                  <div\n                    class=\"item-expansion\"\n                    [id]=\"expandRegionId(item, i)\"\n                    role=\"region\"\n                    [attr.aria-label]=\"expansionRegionAriaLabel(item)\"\n                  >\n                    <div class=\"item-expansion-grid\">\n                      @for (\n                        expansionSection of expansionSections(item);\n                        track expansionSection.id\n                      ) {\n                        <section\n                          class=\"expansion-section\"\n                          [attr.data-section-type]=\"expansionSection.type\"\n                        >\n                          @if (expansionSection.title) {\n                            <div class=\"expansion-section-title\">\n                              {{ expansionSection.title }}\n                            </div>\n                          }\n                          @if (\n                            expansionSectionHasContent(\n                              item,\n                              expansionSection,\n                              i\n                            )\n                          ) {\n                            @switch (expansionSection.type) {\n                              @case (\"chip-list\") {\n                                <div class=\"expansion-chip-list\">\n                                  @for (\n                                    expansionEntry of expansionSectionItems(\n                                      item,\n                                      expansionSection,\n                                      i\n                                    );\n                                    track $index\n                                  ) {\n                                    <mat-chip class=\"expansion-chip\">{{\n                                      expansionItemLabel(expansionEntry)\n                                    }}</mat-chip>\n                                  }\n                                </div>\n                              }\n                              @case (\"timeline\") {\n                                <div class=\"expansion-timeline\">\n                                  @for (\n                                    expansionEntry of expansionSectionItems(\n                                      item,\n                                      expansionSection,\n                                      i\n                                    );\n                                    track $index\n                                  ) {\n                                    <div class=\"expansion-timeline-item\">\n                                      <div class=\"expansion-timeline-title\">\n                                        {{\n                                          expansionTimelineTitle(expansionEntry)\n                                        }}\n                                      </div>\n                                      @if (\n                                        expansionTimelineMeta(expansionEntry)\n                                      ) {\n                                        <div class=\"expansion-timeline-meta\">\n                                          {{\n                                            expansionTimelineMeta(\n                                              expansionEntry\n                                            )\n                                          }}\n                                        </div>\n                                      }\n                                      @if (\n                                        expansionTimelineDescription(\n                                          expansionEntry\n                                        )\n                                      ) {\n                                        <div\n                                          class=\"expansion-timeline-description\"\n                                        >\n                                          {{\n                                            expansionTimelineDescription(\n                                              expansionEntry\n                                            )\n                                          }}\n                                        </div>\n                                      }\n                                    </div>\n                                  }\n                                </div>\n                              }\n                              @case (\"key-value\") {\n                                <dl class=\"expansion-key-value\">\n                                  @for (\n                                    expansionEntry of expansionSectionItems(\n                                      item,\n                                      expansionSection,\n                                      i\n                                    );\n                                    track $index\n                                  ) {\n                                    <div class=\"expansion-key-value-row\">\n                                      @if (\n                                        expansionKeyValueKey(expansionEntry)\n                                      ) {\n                                        <dt>\n                                          {{\n                                            expansionKeyValueKey(expansionEntry)\n                                          }}\n                                        </dt>\n                                      }\n                                      <dd>\n                                        {{\n                                          expansionKeyValueValue(expansionEntry)\n                                        }}\n                                      </dd>\n                                    </div>\n                                  }\n                                </dl>\n                              }\n                              @default {\n                                <div class=\"expansion-info-list\">\n                                  @for (\n                                    expansionEntry of expansionSectionItems(\n                                      item,\n                                      expansionSection,\n                                      i\n                                    );\n                                    track $index\n                                  ) {\n                                    <div class=\"expansion-info-item\">\n                                      <div class=\"expansion-info-title\">\n                                        {{ expansionInfoTitle(expansionEntry) }}\n                                      </div>\n                                      @if (expansionInfoValue(expansionEntry)) {\n                                        <div class=\"expansion-info-value\">\n                                          {{\n                                            expansionInfoValue(expansionEntry)\n                                          }}\n                                        </div>\n                                      }\n                                    </div>\n                                  }\n                                </div>\n                              }\n                            }\n                          } @else {\n                            <div class=\"expansion-empty\">\n                              {{\n                                expansionSection.emptyLabel ||\n                                  \"Sem dados dispon\u00EDveis\"\n                              }}\n                            </div>\n                          }\n                        </section>\n                      }\n                    </div>\n                  </div>\n                }\n              </mat-list-option>\n              @if (\n                (config.layout?.dividers === \"all\" ||\n                  config.layout?.dividers === \"between\") &&\n                i < section.items.length - 1\n              ) {\n                <mat-divider></mat-divider>\n              }\n            }\n          }\n        </mat-selection-list>\n      } @else {\n        <ng-container *ngTemplateOutlet=\"readList\"></ng-container>\n      }\n\n      <!-- Read-only list -->\n      <ng-template #readList>\n        <mat-list>\n          @for (\n            section of sections$ | async;\n            track trackBySection($index, section);\n            let sidx = $index\n          ) {\n            @if (section.key) {\n              <div class=\"section-header mat-subheader\">\n                @if (sectionHeaderTemplate(section.key); as sh) {\n                  @switch (sh.type) {\n                    @case (\"icon\") {\n                      <mat-icon\n                        [praxisIcon]=\"sh.value\"\n                        [ngClass]=\"sh.class\"\n                        [color]=\"isThemeColor(sh.color) ? sh.color : undefined\"\n                        [style.cssText]=\"\n                          (sh.style ? sh.style + ';' : '') + iconStyle(sh.color)\n                        \"\n                      ></mat-icon>\n                    }\n                    @case (\"image\") {\n                      <span\n                        class=\"inline-image\"\n                        [ngClass]=\"sh.class\"\n                        [style.cssText]=\"sh.style\"\n                      >\n                        <img\n                          [src]=\"sh.value\"\n                          [alt]=\"\n                            config.templating?.sectionHeader?.imageAlt || ''\n                          \"\n                        />\n                        @if (sh.badge?.value) {\n                          <mat-chip\n                            class=\"inline-badge\"\n                            [color]=\"\n                              isThemeColor(sh.badge?.color)\n                                ? sh.badge?.color\n                                : undefined\n                            \"\n                            [ngClass]=\"\n                              (sh.badge?.variant || 'filled') === 'outlined'\n                                ? 'chip-outlined'\n                                : ''\n                            \"\n                            [style.cssText]=\"\n                              chipStyle(sh.badge?.color, sh.badge?.variant)\n                            \"\n                            >{{ sh.badge?.value }}</mat-chip\n                          >\n                        }\n                      </span>\n                    }\n                    @case (\"chip\") {\n                      <mat-chip\n                        [color]=\"isThemeColor(sh.color) ? sh.color : undefined\"\n                        [ngClass]=\"[\n                          sh.class || '',\n                          (sh.variant || 'filled') === 'outlined'\n                            ? 'chip-outlined'\n                            : '',\n                        ]\"\n                        [style.cssText]=\"\n                          chipStyle(sh.color, sh.variant) +\n                          (sh.style ? ';' + sh.style : '')\n                        \"\n                        >{{ sh.value }}</mat-chip\n                      >\n                    }\n                    @case (\"rating\") {\n                      <span [ngClass]=\"sh.class\" [style.cssText]=\"sh.style\">\n                        @for (\n                          _ of ratingRange(sh);\n                          track $index;\n                          let idx = $index\n                        ) {\n                          <mat-icon\n                            [praxisIcon]=\"starIcon(idx, sh.value)\"\n                            [color]=\"ratingThemeColor(sh)\"\n                            [style.cssText]=\"ratingIconStyle(sh)\"\n                          ></mat-icon>\n                        }\n                      </span>\n                    }\n                    @case (\"html\") {\n                      <span\n                        [ngClass]=\"sh.class\"\n                        [style.cssText]=\"sh.style\"\n                        [innerHTML]=\"sh.value\"\n                      ></span>\n                    }\n                    @case (\"metric\") {\n                      <praxis-list-metric [metric]=\"sh\"></praxis-list-metric>\n                    }\n                    @default {\n                      <span [ngClass]=\"sh.class\" [style.cssText]=\"sh.style\">{{\n                        sh.value\n                      }}</span>\n                    }\n                  }\n                }\n              </div>\n            }\n            @for (\n              item of section.items;\n              track trackByItem($index, item);\n              let i = $index\n            ) {\n              <mat-list-item [attr.data-item-status]=\"item?.status || null\">\n                @if (hasRowLayoutGrid()) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      listRowLayout;\n                      context: {\n                        $implicit: item,\n                        index: i,\n                        sectionKey: section.key || undefined,\n                        clickable: true,\n                      }\n                    \"\n                  ></ng-container>\n                } @else {\n                <div\n                  class=\"list-item-content\"\n                  [ngClass]=\"itemRuleClass(item)\"\n                  [attr.style]=\"itemRuleStyle(item)\"\n                >\n                  <button\n                    type=\"button\"\n                    class=\"list-item-main-action\"\n                    [attr.aria-label]=\"itemAriaLabel(item)\"\n                    [attr.aria-expanded]=\"\n                      expansionOwnedByRow() ? isExpanded(item, i) : null\n                    \"\n                    [attr.aria-controls]=\"\n                      expansionOwnedByRow() ? expandRegionId(item, i) : null\n                    \"\n                    (click)=\"onRowActivate(item, i, section.key || undefined)\"\n                  >\n                    <div class=\"list-item-leading\">\n                      @if (leading(item); as lead) {\n                        @switch (lead.type) {\n                          @case (\"icon\") {\n                            <mat-icon\n                              [praxisIcon]=\"lead.value\"\n                              [ngClass]=\"lead.class\"\n                              [color]=\"\n                                isThemeColor(lead.color)\n                                  ? lead.color\n                                  : undefined\n                              \"\n                              [style.cssText]=\"\n                                (lead.style ? lead.style + ';' : '') +\n                                iconStyle(lead.color)\n                              \"\n                            ></mat-icon>\n                          }\n                          @case (\"image\") {\n                            <div\n                              class=\"lead-image\"\n                              [ngClass]=\"lead.class\"\n                              [style.cssText]=\"lead.style\"\n                            >\n                              <img\n                                [src]=\"lead.value\"\n                                [alt]=\"\n                                  config.templating?.leading?.imageAlt || ''\n                                \"\n                              />\n                              @if (lead.badge?.value) {\n                                <mat-chip\n                                  class=\"lead-badge\"\n                                  [color]=\"\n                                    isThemeColor(lead.badge?.color)\n                                      ? lead.badge?.color\n                                      : undefined\n                                  \"\n                                  [ngClass]=\"\n                                    (lead.badge?.variant || 'filled') ===\n                                    'outlined'\n                                      ? 'chip-outlined'\n                                      : ''\n                                  \"\n                                  [style.cssText]=\"\n                                    chipStyle(\n                                      lead.badge?.color,\n                                      lead.badge?.variant\n                                    )\n                                  \"\n                                  >{{ lead.badge?.value }}</mat-chip\n                                >\n                              }\n                            </div>\n                          }\n                          @case (\"text\") {\n                            <span\n                              [ngClass]=\"lead.class\"\n                              [style.cssText]=\"lead.style\"\n                              >{{ lead.value }}</span\n                            >\n                          }\n                          @case (\"chip\") {\n                            <mat-chip\n                              [color]=\"\n                                isThemeColor(lead.color)\n                                  ? lead.color\n                                  : undefined\n                              \"\n                              [ngClass]=\"\n                                (lead.variant || 'filled') === 'outlined'\n                                  ? 'chip-outlined'\n                                  : ''\n                              \"\n                              [style.cssText]=\"\n                                chipStyle(lead.color, lead.variant)\n                              \"\n                              >{{ lead.value }}</mat-chip\n                            >\n                          }\n                          @case (\"rating\") {\n                            @for (\n                              _ of ratingRange(lead);\n                              track $index;\n                              let idx = $index\n                            ) {\n                              <mat-icon\n                                [praxisIcon]=\"starIcon(idx, lead.value)\"\n                                [color]=\"ratingThemeColor(lead)\"\n                                [style.cssText]=\"ratingIconStyle(lead)\"\n                              ></mat-icon>\n                            }\n                          }\n                          @case (\"html\") {\n                            <span\n                              [ngClass]=\"lead.class\"\n                              [style.cssText]=\"lead.style\"\n                              [innerHTML]=\"lead.value\"\n                            ></span>\n                          }\n                          @case (\"metric\") {\n                            <praxis-list-metric [metric]=\"lead\"></praxis-list-metric>\n                          }\n                          @default {\n                            <span\n                              [ngClass]=\"lead.class\"\n                              [style.cssText]=\"lead.style\"\n                              >{{ lead.value }}</span\n                            >\n                          }\n                        }\n                      } @else {\n                        <span class=\"leading-placeholder\"></span>\n                      }\n                    </div>\n                    <div class=\"list-item-text\">\n                      <div\n                        class=\"primary\"\n                        [ngClass]=\"primary(item)?.class\"\n                        [style.cssText]=\"primary(item)?.style\"\n                      >\n                        @if (primary(item)?.type === \"metric\") {\n                          <praxis-list-metric\n                            [metric]=\"primary(item)\"\n                          ></praxis-list-metric>\n                        } @else if (primary(item)?.type === \"html\") {\n                          <span [innerHTML]=\"primary(item)?.value\"></span>\n                        } @else {\n                          {{ primary(item)?.value }}\n                        }\n                      </div>\n                      @if (layoutLines > 1) {\n                        <div\n                          class=\"secondary\"\n                          [ngClass]=\"secondary(item)?.class\"\n                          [style.cssText]=\"secondary(item)?.style\"\n                        >\n                          @if (item.segmentVariant && item.segmentLabel && item.accountType && item.since) {\n                            <!-- Component-based rendering for executive items -->\n                            <span class=\"exec-subline\">\n                              <praxis-executive-badge [variant]=\"item.segmentVariant\">{{ item.segmentLabel }}</praxis-executive-badge>\n                              <span class=\"exec-subcopy\">{{ item.accountType }}</span>\n                              <span class=\"exec-subseparator\">\u00B7</span>\n                              <span class=\"exec-subcopy\">Desde {{ item.since }}</span>\n                            </span>\n                          } @else if (secondary(item)?.type === \"html\") {\n                            <span [innerHTML]=\"secondary(item)?.value\"></span>\n                          } @else if (secondary(item)?.type === \"metric\") {\n                            <praxis-list-metric\n                              [metric]=\"secondary(item)\"\n                            ></praxis-list-metric>\n                          } @else {\n                            {{ secondary(item)?.value }}\n                          }\n                        </div>\n                      }\n                      @if (meta(item); as m) {\n                        @if (\n                          (config.templating?.metaPlacement === \"line\" &&\n                            (m?.type === \"text\" ||\n                              m?.type === \"date\" ||\n                              m?.type === \"currency\")) ||\n                          (layoutLines > 2 &&\n                            (m?.type === \"text\" ||\n                              m?.type === \"date\" ||\n                              m?.type === \"currency\"))\n                        ) {\n                          <div\n                            class=\"tertiary\"\n                            [ngClass]=\"m.class\"\n                            [style.cssText]=\"m.style\"\n                          >\n                            @if (config.templating?.metaPrefixIcon; as mpi) {\n                              <mat-icon [praxisIcon]=\"mpi\"></mat-icon>\n                            }\n                            {{ m.value }}\n                          </div>\n                        }\n                      }\n                      @if (featuresVisible()) {\n                        <div class=\"features\">\n                          @for (\n                            f of config.templating?.features || [];\n                            track $index;\n                            let fi = $index\n                          ) {\n                            <span\n                              class=\"feature\"\n                              [ngClass]=\"\n                                featureSemanticClass(item, f.expr, f.class)\n                              \"\n                            >\n                              @if (f.icon && featuresMode() !== \"labels-only\") {\n                                <mat-icon [praxisIcon]=\"f.icon\"></mat-icon>\n                              }\n                              @if (featuresMode() !== \"icons-only\") {\n                                <span\n                                  [ngClass]=\"f.class\"\n                                  [style.cssText]=\"f.style\"\n                                >\n                                  @for (\n                                    line of featureLabelLines(item, f.expr);\n                                    track $index\n                                  ) {\n                                    <span class=\"feature-line\">{{ line }}</span>\n                                  }\n                                </span>\n                              }\n                              @if (\n                                featureProgressPercent(item, f.expr, f.class);\n                                as progress\n                              ) {\n                                <span\n                                  class=\"feature-progress\"\n                                  aria-hidden=\"true\"\n                                >\n                                  <span\n                                    class=\"feature-progress__value\"\n                                    [style.width.%]=\"progress\"\n                                  ></span>\n                                </span>\n                              }\n                            </span>\n                          }\n                        </div>\n                      }\n                    </div>\n                  </button>\n                  <div class=\"list-item-trailing\">\n                    @if (meta(item); as m) {\n                      @if (\n                        !(\n                          (config.templating?.metaPlacement === \"line\" ||\n                            layoutLines > 2) &&\n                          (m?.type === \"text\" ||\n                            m?.type === \"date\" ||\n                            m?.type === \"currency\")\n                        )\n                      ) {\n                        <div\n                          class=\"meta\"\n                          [ngClass]=\"m.class\"\n                          [style.cssText]=\"m.style\"\n                        >\n                          @switch (m.type) {\n                            @case (\"chip\") {\n                              <mat-chip\n                                [color]=\"\n                                  isThemeColor(m.color) ? m.color : undefined\n                                \"\n                                [ngClass]=\"\n                                  (m.variant || 'filled') === 'outlined'\n                                    ? 'chip-outlined'\n                                    : ''\n                                \"\n                                [style.cssText]=\"chipStyle(m.color, m.variant)\"\n                                >{{ m.value }}</mat-chip\n                              >\n                            }\n                            @case (\"rating\") {\n                              @for (\n                                _ of ratingRange(m);\n                                track $index;\n                                let idx = $index\n                              ) {\n                                <mat-icon\n                                  [praxisIcon]=\"starIcon(idx, m.value)\"\n                                  [color]=\"ratingThemeColor(m)\"\n                                  [style.cssText]=\"ratingIconStyle(m)\"\n                                ></mat-icon>\n                              }\n                            }\n                            @case (\"icon\") {\n                              <mat-icon\n                                [praxisIcon]=\"m.value\"\n                                [color]=\"\n                                  isThemeColor(m.color) ? m.color : undefined\n                                \"\n                                [style.cssText]=\"iconStyle(m.color)\"\n                              ></mat-icon>\n                            }\n                            @case (\"image\") {\n                              <span class=\"inline-image\"\n                                ><img [src]=\"m.value\" [alt]=\"m.imageAlt || ''\"\n                              /></span>\n                            }\n                            @case (\"html\") {\n                              <span [innerHTML]=\"m.value\"></span>\n                            }\n                            @case (\"metric\") {\n                              <praxis-list-metric [metric]=\"m\"></praxis-list-metric>\n                            }\n                            @default {\n                              <span>\n                                @if (\n                                  config.templating?.metaPrefixIcon;\n                                  as mpi2\n                                ) {\n                                  <mat-icon [praxisIcon]=\"mpi2\"></mat-icon>\n                                }\n                                {{ m.value }}</span\n                              >\n                            }\n                          }\n                        </div>\n                      }\n                    }\n                    @if (trailing(item); as tr) {\n                      <div\n                        class=\"trailing\"\n                        [ngClass]=\"tr.class\"\n                        [style.cssText]=\"tr.style\"\n                      >\n                        @switch (tr.type) {\n                          @case (\"chip\") {\n                            <mat-chip\n                              [color]=\"\n                                isThemeColor(tr.color) ? tr.color : undefined\n                              \"\n                              [ngClass]=\"\n                                (tr.variant || 'filled') === 'outlined'\n                                  ? 'chip-outlined'\n                                  : ''\n                              \"\n                              [style.cssText]=\"chipStyle(tr.color, tr.variant)\"\n                              >{{ tr.value }}</mat-chip\n                            >\n                          }\n                          @case (\"icon\") {\n                            <mat-icon\n                              [praxisIcon]=\"tr.value\"\n                              [color]=\"\n                                isThemeColor(tr.color) ? tr.color : undefined\n                              \"\n                              [style.cssText]=\"iconStyle(tr.color)\"\n                            ></mat-icon>\n                          }\n                          @case (\"image\") {\n                            <div\n                              class=\"lead-image\"\n                              [ngClass]=\"tr.class\"\n                              [style.cssText]=\"tr.style\"\n                            >\n                              <img\n                                [src]=\"tr.value\"\n                                [alt]=\"\n                                  config.templating?.trailing?.imageAlt || ''\n                                \"\n                              />\n                              @if (tr.badge?.value) {\n                                <mat-chip\n                                  class=\"lead-badge\"\n                                  [color]=\"\n                                    isThemeColor(tr.badge?.color)\n                                      ? tr.badge?.color\n                                      : undefined\n                                  \"\n                                  [ngClass]=\"\n                                    (tr.badge?.variant || 'filled') ===\n                                    'outlined'\n                                      ? 'chip-outlined'\n                                      : ''\n                                  \"\n                                  [style.cssText]=\"\n                                    chipStyle(\n                                      tr.badge?.color,\n                                      tr.badge?.variant\n                                    )\n                                  \"\n                                  >{{ tr.badge?.value }}</mat-chip\n                                >\n                              }\n                            </div>\n                          }\n                          @case (\"rating\") {\n                            @for (\n                              _ of ratingRange(tr);\n                              track $index;\n                              let idx = $index\n                            ) {\n                              <mat-icon\n                                [praxisIcon]=\"starIcon(idx, tr.value)\"\n                                [color]=\"ratingThemeColor(tr)\"\n                                [style.cssText]=\"ratingIconStyle(tr)\"\n                              ></mat-icon>\n                            }\n                          }\n                          @case (\"html\") {\n                            @if (item.alertsData !== undefined && item.ownerName) {\n                              <!-- Component-based rendering for executive trailing -->\n                              <span class=\"exec-trailing-shell\">\n                                <praxis-executive-alerts [alerts]=\"item.alertsData\"></praxis-executive-alerts>\n                                <praxis-executive-owner [name]=\"item.ownerName\"></praxis-executive-owner>\n                              </span>\n                            } @else {\n                              <span [innerHTML]=\"tr.value\"></span>\n                            }\n                          }\n                          @case (\"metric\") {\n                            <praxis-list-metric [metric]=\"tr\"></praxis-list-metric>\n                          }\n                          @default {\n                            <span>{{ tr.value }}</span>\n                          }\n                        }\n                      </div>\n                    }\n                    @if (showExpandIcon(\"trailing\")) {\n                      <button\n                        mat-icon-button\n                        type=\"button\"\n                        class=\"expand-toggle\"\n                        [attr.aria-label]=\"expandToggleAriaLabel(item, i)\"\n                        [attr.aria-expanded]=\"\n                          expansionOwnedByIcon() ? isExpanded(item, i) : null\n                        \"\n                        [attr.aria-controls]=\"\n                          expansionOwnedByIcon()\n                            ? expandRegionId(item, i)\n                            : null\n                        \"\n                        (click)=\"onExpandToggle($event, item, i)\"\n                      >\n                        <mat-icon\n                          [praxisIcon]=\"\n                            isExpanded(item, i) ? 'expand_less' : 'expand_more'\n                          \"\n                        ></mat-icon>\n                      </button>\n                    }\n                    @if ((visibleActions(item, \"trailing\") || []).length) {\n                      <div\n                        class=\"list-item-actions\"\n                        (click)=\"$event.stopPropagation()\"\n                        (keydown.enter)=\"onActionKeydown($event)\"\n                        (keydown.space)=\"onActionKeydown($event)\"\n                      >\n                        @for (\n                          action of visibleActions(item, \"trailing\");\n                          let aidx = $index;\n                          track action?.id ?? $index\n                        ) {\n                          @if ((action.kind || \"icon\") === \"icon\") {\n                            <button\n                              mat-icon-button\n                              [color]=\"\n                                isThemeColor(action.color)\n                                  ? action.color\n                                  : undefined\n                              \"\n                              (click)=\"\n                                onActionClick($event, action.id, item, i)\n                              \"\n                              [attr.aria-label]=\"action.label || action.id\"\n                              [disabled]=\"isActionLoading(action.id, item, i)\"\n                              [ngClass]=\"{\n                                'action-loading': isActionLoading(\n                                  action.id,\n                                  item,\n                                  i\n                                ),\n                              }\"\n                            >\n                              @if (isActionLoading(action.id, item, i)) {\n                                <mat-progress-spinner\n                                  class=\"action-spinner\"\n                                  mode=\"indeterminate\"\n                                  diameter=\"16\"\n                                  strokeWidth=\"3\"\n                                ></mat-progress-spinner>\n                              } @else {\n                                <mat-icon\n                                  [praxisIcon]=\"action.icon\"\n                                  [style.cssText]=\"iconStyle(action.color)\"\n                                ></mat-icon>\n                              }\n                            </button>\n                          } @else {\n                            @if (action.buttonVariant === \"stroked\") {\n                              <button\n                                mat-stroked-button\n                                [color]=\"\n                                  isThemeColor(action.color)\n                                    ? action.color\n                                    : undefined\n                                \"\n                                [style.cssText]=\"\n                                  buttonStyle(action.color, 'stroked')\n                                \"\n                                (click)=\"\n                                  onActionClick($event, action.id, item, i)\n                                \"\n                                [attr.aria-label]=\"action.label || action.id\"\n                                [disabled]=\"isActionLoading(action.id, item, i)\"\n                                [ngClass]=\"{\n                                  'action-loading': isActionLoading(\n                                    action.id,\n                                    item,\n                                    i\n                                  ),\n                                }\"\n                              >\n                                @if (isActionLoading(action.id, item, i)) {\n                                  <mat-progress-spinner\n                                    class=\"action-spinner\"\n                                    mode=\"indeterminate\"\n                                    diameter=\"16\"\n                                    strokeWidth=\"3\"\n                                  ></mat-progress-spinner>\n                                } @else {\n                                  {{ action.label || action.id }}\n                                }\n                              </button>\n                            }\n                            @if (action.buttonVariant === \"raised\") {\n                              <button\n                                mat-raised-button\n                                [color]=\"\n                                  isThemeColor(action.color)\n                                    ? action.color\n                                    : undefined\n                                \"\n                                [style.cssText]=\"\n                                  buttonStyle(action.color, 'raised')\n                                \"\n                                (click)=\"\n                                  onActionClick($event, action.id, item, i)\n                                \"\n                                [attr.aria-label]=\"action.label || action.id\"\n                                [disabled]=\"isActionLoading(action.id, item, i)\"\n                                [ngClass]=\"{\n                                  'action-loading': isActionLoading(\n                                    action.id,\n                                    item,\n                                    i\n                                  ),\n                                }\"\n                              >\n                                @if (isActionLoading(action.id, item, i)) {\n                                  <mat-progress-spinner\n                                    class=\"action-spinner\"\n                                    mode=\"indeterminate\"\n                                    diameter=\"16\"\n                                    strokeWidth=\"3\"\n                                  ></mat-progress-spinner>\n                                } @else {\n                                  {{ action.label || action.id }}\n                                }\n                              </button>\n                            }\n                            @if (\n                              !action.buttonVariant ||\n                              action.buttonVariant === \"flat\"\n                            ) {\n                              <button\n                                mat-flat-button\n                                [color]=\"\n                                  isThemeColor(action.color)\n                                    ? action.color\n                                    : undefined\n                                \"\n                                [style.cssText]=\"\n                                  buttonStyle(action.color, 'flat')\n                                \"\n                                (click)=\"\n                                  onActionClick($event, action.id, item, i)\n                                \"\n                                [attr.aria-label]=\"action.label || action.id\"\n                                [disabled]=\"isActionLoading(action.id, item, i)\"\n                                [ngClass]=\"{\n                                  'action-loading': isActionLoading(\n                                    action.id,\n                                    item,\n                                    i\n                                  ),\n                                }\"\n                              >\n                                @if (isActionLoading(action.id, item, i)) {\n                                  <mat-progress-spinner\n                                    class=\"action-spinner\"\n                                    mode=\"indeterminate\"\n                                    diameter=\"16\"\n                                    strokeWidth=\"3\"\n                                  ></mat-progress-spinner>\n                                } @else {\n                                  {{ action.label || action.id }}\n                                }\n                              </button>\n                            }\n                          }\n                        }\n                      </div>\n                    }\n                  </div>\n                </div>\n                }\n                @if (isExpandable() && isExpanded(item, i)) {\n                  <div\n                    class=\"item-expansion\"\n                    [id]=\"expandRegionId(item, i)\"\n                    role=\"region\"\n                    [attr.aria-label]=\"expansionRegionAriaLabel(item)\"\n                  >\n                    <div class=\"item-expansion-grid\">\n                      @for (\n                        expansionSection of expansionSections(item);\n                        track expansionSection.id\n                      ) {\n                        <section\n                          class=\"expansion-section\"\n                          [attr.data-section-type]=\"expansionSection.type\"\n                        >\n                          @if (expansionSection.title) {\n                            <div class=\"expansion-section-title\">\n                              {{ expansionSection.title }}\n                            </div>\n                          }\n                          @if (\n                            expansionSectionHasContent(\n                              item,\n                              expansionSection,\n                              i\n                            )\n                          ) {\n                            @switch (expansionSection.type) {\n                              @case (\"chip-list\") {\n                                <div class=\"expansion-chip-list\">\n                                  @for (\n                                    expansionEntry of expansionSectionItems(\n                                      item,\n                                      expansionSection,\n                                      i\n                                    );\n                                    track $index\n                                  ) {\n                                    <mat-chip class=\"expansion-chip\">{{\n                                      expansionItemLabel(expansionEntry)\n                                    }}</mat-chip>\n                                  }\n                                </div>\n                              }\n                              @case (\"timeline\") {\n                                <div class=\"expansion-timeline\">\n                                  @for (\n                                    expansionEntry of expansionSectionItems(\n                                      item,\n                                      expansionSection,\n                                      i\n                                    );\n                                    track $index\n                                  ) {\n                                    <div class=\"expansion-timeline-item\">\n                                      <div class=\"expansion-timeline-title\">\n                                        {{\n                                          expansionTimelineTitle(expansionEntry)\n                                        }}\n                                      </div>\n                                      @if (\n                                        expansionTimelineMeta(expansionEntry)\n                                      ) {\n                                        <div class=\"expansion-timeline-meta\">\n                                          {{\n                                            expansionTimelineMeta(\n                                              expansionEntry\n                                            )\n                                          }}\n                                        </div>\n                                      }\n                                      @if (\n                                        expansionTimelineDescription(\n                                          expansionEntry\n                                        )\n                                      ) {\n                                        <div\n                                          class=\"expansion-timeline-description\"\n                                        >\n                                          {{\n                                            expansionTimelineDescription(\n                                              expansionEntry\n                                            )\n                                          }}\n                                        </div>\n                                      }\n                                    </div>\n                                  }\n                                </div>\n                              }\n                              @case (\"key-value\") {\n                                <dl class=\"expansion-key-value\">\n                                  @for (\n                                    expansionEntry of expansionSectionItems(\n                                      item,\n                                      expansionSection,\n                                      i\n                                    );\n                                    track $index\n                                  ) {\n                                    <div class=\"expansion-key-value-row\">\n                                      @if (\n                                        expansionKeyValueKey(expansionEntry)\n                                      ) {\n                                        <dt>\n                                          {{\n                                            expansionKeyValueKey(expansionEntry)\n                                          }}\n                                        </dt>\n                                      }\n                                      <dd>\n                                        {{\n                                          expansionKeyValueValue(expansionEntry)\n                                        }}\n                                      </dd>\n                                    </div>\n                                  }\n                                </dl>\n                              }\n                              @default {\n                                <div class=\"expansion-info-list\">\n                                  @for (\n                                    expansionEntry of expansionSectionItems(\n                                      item,\n                                      expansionSection,\n                                      i\n                                    );\n                                    track $index\n                                  ) {\n                                    <div class=\"expansion-info-item\">\n                                      <div class=\"expansion-info-title\">\n                                        {{ expansionInfoTitle(expansionEntry) }}\n                                      </div>\n                                      @if (expansionInfoValue(expansionEntry)) {\n                                        <div class=\"expansion-info-value\">\n                                          {{\n                                            expansionInfoValue(expansionEntry)\n                                          }}\n                                        </div>\n                                      }\n                                    </div>\n                                  }\n                                </div>\n                              }\n                            }\n                          } @else {\n                            <div class=\"expansion-empty\">\n                              {{\n                                expansionSection.emptyLabel ||\n                                  \"Sem dados dispon\u00EDveis\"\n                              }}\n                            </div>\n                          }\n                        </section>\n                      }\n                    </div>\n                  </div>\n                }\n              </mat-list-item>\n              @if (\n                (config.layout?.dividers === \"all\" ||\n                  config.layout?.dividers === \"between\") &&\n                i < section.items.length - 1\n              ) {\n                <mat-divider></mat-divider>\n              }\n            }\n          }\n        </mat-list>\n      </ng-template>\n    } @else if (isTilesVariant()) {\n      <ng-container *ngTemplateOutlet=\"tilesVariant\"></ng-container>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"cardsVariant\"></ng-container>\n    }\n\n    <!-- Cards variant -->\n    <ng-template #cardsVariant>\n      <div class=\"cards-grid\">\n        @for (it of (items$ | async) ?? []; track $index; let i = $index) {\n          <div\n            class=\"item-card\"\n            [ngClass]=\"itemRuleClass(it)\"\n            [attr.style]=\"itemRuleStyle(it)\"\n            role=\"button\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"itemAriaLabel(it)\"\n            (click)=\"onItemClick(it, i)\"\n            (keydown.enter)=\"onItemClick(it, i)\"\n            (keydown.space)=\"$event.preventDefault(); onItemClick(it, i)\"\n          >\n            <div class=\"list-item-content\">\n              <div class=\"list-item-leading\">\n                @if (leading(it); as lead) {\n                  @switch (lead.type) {\n                    @case (\"icon\") {\n                      <mat-icon\n                        [praxisIcon]=\"lead.value\"\n                        [ngClass]=\"lead.class\"\n                        [color]=\"\n                          isThemeColor(lead.color) ? lead.color : undefined\n                        \"\n                        [style.cssText]=\"\n                          (lead.style ? lead.style + ';' : '') +\n                          iconStyle(lead.color)\n                        \"\n                      ></mat-icon>\n                    }\n                    @case (\"image\") {\n                      <div\n                        class=\"lead-image\"\n                        [ngClass]=\"lead.class\"\n                        [style.cssText]=\"lead.style\"\n                      >\n                        <img\n                          [src]=\"lead.value\"\n                          [alt]=\"config.templating?.leading?.imageAlt || ''\"\n                        />\n                        @if (lead.badge?.value) {\n                          <mat-chip\n                            class=\"lead-badge\"\n                            [color]=\"\n                              isThemeColor(lead.badge?.color)\n                                ? lead.badge?.color\n                                : undefined\n                            \"\n                            [ngClass]=\"\n                              (lead.badge?.variant || 'filled') === 'outlined'\n                                ? 'chip-outlined'\n                                : ''\n                            \"\n                            [style.cssText]=\"\n                              chipStyle(lead.badge?.color, lead.badge?.variant)\n                            \"\n                            >{{ lead.badge?.value }}</mat-chip\n                          >\n                        }\n                      </div>\n                    }\n                    @case (\"text\") {\n                      <span\n                        [ngClass]=\"lead.class\"\n                        [style.cssText]=\"lead.style\"\n                        >{{ lead.value }}</span\n                      >\n                    }\n                    @case (\"chip\") {\n                      <mat-chip\n                        [color]=\"\n                          isThemeColor(lead.color) ? lead.color : undefined\n                        \"\n                        [ngClass]=\"\n                          (lead.variant || 'filled') === 'outlined'\n                            ? 'chip-outlined'\n                            : ''\n                        \"\n                        [style.cssText]=\"chipStyle(lead.color, lead.variant)\"\n                        >{{ lead.value }}</mat-chip\n                      >\n                    }\n                    @case (\"rating\") {\n                      @for (\n                        _ of ratingRange(lead);\n                        track $index;\n                        let idx = $index\n                      ) {\n                        <mat-icon\n                          [praxisIcon]=\"starIcon(idx, lead.value)\"\n                          [color]=\"ratingThemeColor(lead)\"\n                          [style.cssText]=\"ratingIconStyle(lead)\"\n                        ></mat-icon>\n                      }\n                    }\n                    @case (\"html\") {\n                      <span\n                        [ngClass]=\"lead.class\"\n                        [style.cssText]=\"lead.style\"\n                        [innerHTML]=\"lead.value\"\n                      ></span>\n                    }\n                    @case (\"metric\") {\n                      <praxis-list-metric [metric]=\"lead\"></praxis-list-metric>\n                    }\n                    @case (\"compose\") {\n                      <praxis-list-compose\n                        [compose]=\"lead\"\n                      ></praxis-list-compose>\n                    }\n                    @case (\"component\") {\n                      <praxis-list-runtime-component\n                        [component]=\"lead\"\n                      ></praxis-list-runtime-component>\n                    }\n                    @default {\n                      <span\n                        [ngClass]=\"lead.class\"\n                        [style.cssText]=\"lead.style\"\n                        >{{ lead.value }}</span\n                      >\n                    }\n                  }\n                } @else {\n                  <span class=\"leading-placeholder\"></span>\n                }\n              </div>\n              <div class=\"list-item-text\">\n                <div\n                  class=\"primary\"\n                  [ngClass]=\"primary(it)?.class\"\n                  [style.cssText]=\"primary(it)?.style\"\n                >\n                  @if (primary(it)?.type === \"metric\") {\n                    <praxis-list-metric [metric]=\"primary(it)\"></praxis-list-metric>\n                  } @else if (primary(it)?.type === \"compose\") {\n                    <praxis-list-compose\n                      [compose]=\"primary(it)\"\n                    ></praxis-list-compose>\n                  } @else if (primary(it)?.type === \"component\") {\n                    <praxis-list-runtime-component\n                      [component]=\"primary(it)\"\n                    ></praxis-list-runtime-component>\n                  } @else {\n                    {{ primary(it)?.value }}\n                  }\n                </div>\n                @if (layoutLines > 1) {\n                  <div\n                    class=\"secondary\"\n                    [ngClass]=\"secondary(it)?.class\"\n                    [style.cssText]=\"secondary(it)?.style\"\n                  >\n                    @if (secondary(it)?.type === \"metric\") {\n                      <praxis-list-metric\n                        [metric]=\"secondary(it)\"\n                      ></praxis-list-metric>\n                    } @else if (secondary(it)?.type === \"compose\") {\n                      <praxis-list-compose\n                        [compose]=\"secondary(it)\"\n                      ></praxis-list-compose>\n                    } @else if (secondary(it)?.type === \"component\") {\n                      <praxis-list-runtime-component\n                        [component]=\"secondary(it)\"\n                      ></praxis-list-runtime-component>\n                    } @else {\n                      {{ secondary(it)?.value }}\n                    }\n                  </div>\n                }\n                @if (meta(it); as m) {\n                  @if (\n                    (config.templating?.metaPlacement === \"line\" &&\n                      (m?.type === \"text\" ||\n                        m?.type === \"date\" ||\n                        m?.type === \"currency\")) ||\n                    (layoutLines > 2 &&\n                      (m?.type === \"text\" ||\n                        m?.type === \"date\" ||\n                        m?.type === \"currency\"))\n                  ) {\n                    <div\n                      class=\"tertiary\"\n                      [ngClass]=\"m.class\"\n                      [style.cssText]=\"m.style\"\n                    >\n                      @if (config.templating?.metaPrefixIcon; as mpi) {\n                        <mat-icon [praxisIcon]=\"mpi\"></mat-icon>\n                      }\n                      {{ m.value }}\n                    </div>\n                  }\n                }\n                @if (featuresVisible()) {\n                  <div class=\"features\">\n                    @for (\n                      f of config.templating?.features || [];\n                      track $index;\n                      let fi = $index\n                    ) {\n                      <span\n                        class=\"feature\"\n                        [ngClass]=\"featureSemanticClass(it, f.expr, f.class)\"\n                      >\n                        @if (f.icon && featuresMode() !== \"labels-only\") {\n                          <mat-icon [praxisIcon]=\"f.icon\"></mat-icon>\n                        }\n                        @if (featuresMode() !== \"icons-only\") {\n                          <span [ngClass]=\"f.class\" [style.cssText]=\"f.style\">\n                            @for (\n                              line of featureLabelLines(it, f.expr);\n                              track $index\n                            ) {\n                              <span class=\"feature-line\">{{ line }}</span>\n                            }\n                          </span>\n                        }\n                        @if (\n                          featureProgressPercent(it, f.expr, f.class);\n                          as progress\n                        ) {\n                          <span class=\"feature-progress\" aria-hidden=\"true\">\n                            <span\n                              class=\"feature-progress__value\"\n                              [style.width.%]=\"progress\"\n                            ></span>\n                          </span>\n                        }\n                      </span>\n                    }\n                  </div>\n                }\n              </div>\n              <div class=\"list-item-trailing\">\n                @if (meta(it); as m) {\n                  @if (\n                    !(\n                      (config.templating?.metaPlacement === \"line\" ||\n                        layoutLines > 2) &&\n                      (m?.type === \"text\" ||\n                        m?.type === \"date\" ||\n                        m?.type === \"currency\")\n                    )\n                  ) {\n                    <div\n                      class=\"meta\"\n                      [ngClass]=\"m.class\"\n                      [style.cssText]=\"m.style\"\n                    >\n                      @switch (m.type) {\n                        @case (\"chip\") {\n                          <mat-chip\n                            [color]=\"\n                              isThemeColor(m.color) ? m.color : undefined\n                            \"\n                            [ngClass]=\"\n                              (m.variant || 'filled') === 'outlined'\n                                ? 'chip-outlined'\n                                : ''\n                            \"\n                            [style.cssText]=\"chipStyle(m.color, m.variant)\"\n                            >{{ m.value }}</mat-chip\n                          >\n                        }\n                        @case (\"rating\") {\n                          @for (\n                            _ of ratingRange(m);\n                            track $index;\n                            let idx = $index\n                          ) {\n                            <mat-icon\n                              [praxisIcon]=\"starIcon(idx, m.value)\"\n                              [color]=\"ratingThemeColor(m)\"\n                              [style.cssText]=\"ratingIconStyle(m)\"\n                            ></mat-icon>\n                          }\n                        }\n                        @case (\"icon\") {\n                          <mat-icon\n                            [praxisIcon]=\"m.value\"\n                            [color]=\"\n                              isThemeColor(m.color) ? m.color : undefined\n                            \"\n                            [style.cssText]=\"iconStyle(m.color)\"\n                          ></mat-icon>\n                        }\n                        @case (\"image\") {\n                          <span class=\"inline-image\"\n                            ><img [src]=\"m.value\" [alt]=\"m.imageAlt || ''\"\n                          /></span>\n                        }\n                        @case (\"html\") {\n                          <span [innerHTML]=\"m.value\"></span>\n                        }\n                        @case (\"metric\") {\n                          <praxis-list-metric [metric]=\"m\"></praxis-list-metric>\n                        }\n                        @case (\"compose\") {\n                          <praxis-list-compose\n                            [compose]=\"m\"\n                          ></praxis-list-compose>\n                        }\n                        @case (\"component\") {\n                          <praxis-list-runtime-component\n                            [component]=\"m\"\n                          ></praxis-list-runtime-component>\n                        }\n                        @default {\n                          <span>\n                            @if (config.templating?.metaPrefixIcon; as mpi2) {\n                              <mat-icon [praxisIcon]=\"mpi2\"></mat-icon>\n                            }\n                            {{ m.value }}</span\n                          >\n                        }\n                      }\n                    </div>\n                  }\n                }\n                @if (trailing(it); as tr) {\n                  @if (\n                    (config.templating?.statusPosition || \"inline\") ===\n                      \"top-right\" &&\n                    (tr?.type === \"chip\" || tr?.type === \"icon\")\n                  ) {\n                    <div class=\"status-overlay\">\n                      @if (tr?.type === \"chip\") {\n                        <mat-chip\n                          [color]=\"\n                            isThemeColor(tr.color) ? tr.color : undefined\n                          \"\n                          [ngClass]=\"\n                            (tr.variant || 'filled') === 'outlined'\n                              ? 'chip-outlined'\n                              : ''\n                          \"\n                          [style.cssText]=\"chipStyle(tr.color, tr.variant)\"\n                          >{{ tr.value }}</mat-chip\n                        >\n                      }\n                      @if (tr?.type === \"icon\") {\n                        <mat-icon\n                          [praxisIcon]=\"tr.value\"\n                          [color]=\"\n                            isThemeColor(tr.color) ? tr.color : undefined\n                          \"\n                          [style.cssText]=\"iconStyle(tr.color)\"\n                        ></mat-icon>\n                      }\n                    </div>\n                  } @else {\n                    <div\n                      class=\"trailing\"\n                      [ngClass]=\"tr.class\"\n                      [style.cssText]=\"tr.style\"\n                    >\n                      @switch (tr.type) {\n                        @case (\"chip\") {\n                          <mat-chip\n                            [color]=\"\n                              isThemeColor(tr.color) ? tr.color : undefined\n                            \"\n                            [ngClass]=\"\n                              (tr.variant || 'filled') === 'outlined'\n                                ? 'chip-outlined'\n                                : ''\n                            \"\n                            [style.cssText]=\"chipStyle(tr.color, tr.variant)\"\n                            >{{ tr.value }}</mat-chip\n                          >\n                        }\n                        @case (\"icon\") {\n                          <mat-icon\n                            [praxisIcon]=\"tr.value\"\n                            [color]=\"\n                              isThemeColor(tr.color) ? tr.color : undefined\n                            \"\n                            [style.cssText]=\"iconStyle(tr.color)\"\n                          ></mat-icon>\n                        }\n                        @case (\"image\") {\n                          <div\n                            class=\"lead-image\"\n                            [ngClass]=\"tr.class\"\n                            [style.cssText]=\"tr.style\"\n                          >\n                            <img\n                              [src]=\"tr.value\"\n                              [alt]=\"\n                                config.templating?.trailing?.imageAlt || ''\n                              \"\n                            />\n                            @if (tr.badge?.value) {\n                              <mat-chip\n                                class=\"lead-badge\"\n                                [color]=\"\n                                  isThemeColor(tr.badge?.color)\n                                    ? tr.badge?.color\n                                    : undefined\n                                \"\n                                [ngClass]=\"\n                                  (tr.badge?.variant || 'filled') === 'outlined'\n                                    ? 'chip-outlined'\n                                    : ''\n                                \"\n                                [style.cssText]=\"\n                                  chipStyle(tr.badge?.color, tr.badge?.variant)\n                                \"\n                                >{{ tr.badge?.value }}</mat-chip\n                              >\n                            }\n                          </div>\n                        }\n                        @case (\"rating\") {\n                          @for (\n                            _ of ratingRange(tr);\n                            track $index;\n                            let idx = $index\n                          ) {\n                            <mat-icon\n                              [praxisIcon]=\"starIcon(idx, tr.value)\"\n                              [color]=\"ratingThemeColor(tr)\"\n                              [style.cssText]=\"ratingIconStyle(tr)\"\n                            ></mat-icon>\n                          }\n                        }\n                        @case (\"html\") {\n                          <span [innerHTML]=\"tr.value\"></span>\n                        }\n                        @case (\"metric\") {\n                          <praxis-list-metric [metric]=\"tr\"></praxis-list-metric>\n                        }\n                        @case (\"compose\") {\n                          <praxis-list-compose\n                            [compose]=\"tr\"\n                          ></praxis-list-compose>\n                        }\n                        @case (\"component\") {\n                          <praxis-list-runtime-component\n                            [component]=\"tr\"\n                          ></praxis-list-runtime-component>\n                        }\n                        @default {\n                          <span>{{ tr.value }}</span>\n                        }\n                      }\n                    </div>\n                  }\n                }\n              </div>\n            </div>\n            <div\n              class=\"card-actions\"\n              (click)=\"$event.stopPropagation()\"\n              (keydown.enter)=\"onActionKeydown($event)\"\n              (keydown.space)=\"onActionKeydown($event)\"\n            >\n              @for (\n                action of visibleActions(it, \"trailing\");\n                let aidx = $index;\n                track action?.id ?? $index\n              ) {\n                @if ((action.kind || \"icon\") === \"icon\") {\n                  <button\n                    mat-icon-button\n                    [color]=\"\n                      isThemeColor(action.color) ? action.color : undefined\n                    \"\n                    (click)=\"onActionClick($event, action.id, it, i)\"\n                    [attr.aria-label]=\"action.label || action.id\"\n                    [disabled]=\"isActionLoading(action.id, it, i)\"\n                    [ngClass]=\"{\n                      'action-loading': isActionLoading(action.id, it, i),\n                    }\"\n                  >\n                    @if (isActionLoading(action.id, it, i)) {\n                      <mat-progress-spinner\n                        class=\"action-spinner\"\n                        mode=\"indeterminate\"\n                        diameter=\"16\"\n                        strokeWidth=\"3\"\n                      ></mat-progress-spinner>\n                    } @else {\n                      <mat-icon\n                        [praxisIcon]=\"action.icon\"\n                        [style.cssText]=\"iconStyle(action.color)\"\n                      ></mat-icon>\n                    }\n                  </button>\n                } @else {\n                  @if (action.buttonVariant === \"stroked\") {\n                    <button\n                      mat-stroked-button\n                      [color]=\"\n                        isThemeColor(action.color) ? action.color : undefined\n                      \"\n                      [style.cssText]=\"buttonStyle(action.color, 'stroked')\"\n                      (click)=\"onActionClick($event, action.id, it, i)\"\n                      [attr.aria-label]=\"action.label || action.id\"\n                      [disabled]=\"isActionLoading(action.id, it, i)\"\n                      [ngClass]=\"{\n                        'action-loading': isActionLoading(action.id, it, i),\n                      }\"\n                    >\n                      @if (isActionLoading(action.id, it, i)) {\n                        <mat-progress-spinner\n                          class=\"action-spinner\"\n                          mode=\"indeterminate\"\n                          diameter=\"16\"\n                          strokeWidth=\"3\"\n                        ></mat-progress-spinner>\n                      } @else {\n                        {{ action.label || action.id }}\n                      }\n                    </button>\n                  }\n                  @if (action.buttonVariant === \"raised\") {\n                    <button\n                      mat-raised-button\n                      [color]=\"\n                        isThemeColor(action.color) ? action.color : undefined\n                      \"\n                      [style.cssText]=\"buttonStyle(action.color, 'raised')\"\n                      (click)=\"onActionClick($event, action.id, it, i)\"\n                      [attr.aria-label]=\"action.label || action.id\"\n                      [disabled]=\"isActionLoading(action.id, it, i)\"\n                      [ngClass]=\"{\n                        'action-loading': isActionLoading(action.id, it, i),\n                      }\"\n                    >\n                      @if (isActionLoading(action.id, it, i)) {\n                        <mat-progress-spinner\n                          class=\"action-spinner\"\n                          mode=\"indeterminate\"\n                          diameter=\"16\"\n                          strokeWidth=\"3\"\n                        ></mat-progress-spinner>\n                      } @else {\n                        {{ action.label || action.id }}\n                      }\n                    </button>\n                  }\n                  @if (\n                    !action.buttonVariant || action.buttonVariant === \"flat\"\n                  ) {\n                    <button\n                      mat-flat-button\n                      [color]=\"\n                        isThemeColor(action.color) ? action.color : undefined\n                      \"\n                      [style.cssText]=\"buttonStyle(action.color, 'flat')\"\n                      (click)=\"onActionClick($event, action.id, it, i)\"\n                      [attr.aria-label]=\"action.label || action.id\"\n                      [disabled]=\"isActionLoading(action.id, it, i)\"\n                      [ngClass]=\"{\n                        'action-loading': isActionLoading(action.id, it, i),\n                      }\"\n                    >\n                      @if (isActionLoading(action.id, it, i)) {\n                        <mat-progress-spinner\n                          class=\"action-spinner\"\n                          mode=\"indeterminate\"\n                          diameter=\"16\"\n                          strokeWidth=\"3\"\n                        ></mat-progress-spinner>\n                      } @else {\n                        {{ action.label || action.id }}\n                      }\n                    </button>\n                  }\n                }\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </ng-template>\n\n    <!-- Tiles variant -->\n    <ng-template #tilesVariant>\n      <div class=\"tiles-grid\">\n        @for (it of (items$ | async) ?? []; track $index; let i = $index) {\n          <div\n            class=\"item-tile\"\n            [ngClass]=\"itemRuleClass(it)\"\n            [attr.style]=\"itemRuleStyle(it)\"\n            role=\"button\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"itemAriaLabel(it)\"\n            (click)=\"onItemClick(it, i)\"\n            (keydown.enter)=\"onItemClick(it, i)\"\n            (keydown.space)=\"$event.preventDefault(); onItemClick(it, i)\"\n          >\n            <div class=\"tile-media\">\n              @if (leading(it); as lead) {\n                @switch (lead.type) {\n                  @case (\"image\") {\n                    <img\n                      [src]=\"lead.value\"\n                      [alt]=\"config.templating?.leading?.imageAlt || ''\"\n                    />\n                  }\n                  @case (\"icon\") {\n                    <mat-icon\n                      [praxisIcon]=\"lead.value\"\n                      [ngClass]=\"lead.class\"\n                      [color]=\"\n                        isThemeColor(lead.color) ? lead.color : undefined\n                      \"\n                      [style.cssText]=\"\n                        (lead.style ? lead.style + ';' : '') +\n                        iconStyle(lead.color)\n                      \"\n                    ></mat-icon>\n                  }\n                  @case (\"text\") {\n                    <span [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">{{\n                      lead.value\n                    }}</span>\n                  }\n                  @case (\"chip\") {\n                    <mat-chip\n                      [color]=\"\n                        isThemeColor(lead.color) ? lead.color : undefined\n                      \"\n                      [ngClass]=\"\n                        (lead.variant || 'filled') === 'outlined'\n                          ? 'chip-outlined'\n                          : ''\n                      \"\n                      [style.cssText]=\"chipStyle(lead.color, lead.variant)\"\n                      >{{ lead.value }}</mat-chip\n                    >\n                  }\n                  @case (\"rating\") {\n                    <span [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">\n                      @for (\n                        _ of ratingRange(lead);\n                        track $index;\n                        let idx = $index\n                      ) {\n                        <mat-icon\n                          [praxisIcon]=\"starIcon(idx, lead.value)\"\n                          [color]=\"ratingThemeColor(lead)\"\n                          [style.cssText]=\"ratingIconStyle(lead)\"\n                        ></mat-icon>\n                      }\n                    </span>\n                  }\n                  @case (\"html\") {\n                    <span\n                      [ngClass]=\"lead.class\"\n                      [style.cssText]=\"lead.style\"\n                      [innerHTML]=\"lead.value\"\n                    ></span>\n                  }\n                  @case (\"metric\") {\n                    <praxis-list-metric [metric]=\"lead\"></praxis-list-metric>\n                  }\n                  @case (\"compose\") {\n                    <praxis-list-compose\n                      [compose]=\"lead\"\n                    ></praxis-list-compose>\n                  }\n                  @case (\"component\") {\n                    <praxis-list-runtime-component\n                      [component]=\"lead\"\n                    ></praxis-list-runtime-component>\n                  }\n                  @default {\n                    <span [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">{{\n                      lead.value\n                    }}</span>\n                  }\n                }\n              }\n            </div>\n\n            @if (trailing(it); as tr) {\n              @if (\n                (config.templating?.statusPosition || \"inline\") ===\n                  \"top-right\" &&\n                (tr?.type === \"chip\" || tr?.type === \"icon\")\n              ) {\n                <div class=\"tile-status\">\n                  @if (tr?.type === \"chip\") {\n                    <mat-chip\n                      [color]=\"isThemeColor(tr.color) ? tr.color : undefined\"\n                      [ngClass]=\"\n                        (tr.variant || 'filled') === 'outlined'\n                          ? 'chip-outlined'\n                          : ''\n                      \"\n                      [style.cssText]=\"chipStyle(tr.color, tr.variant)\"\n                      >{{ tr.value }}</mat-chip\n                    >\n                  }\n                  @if (tr?.type === \"icon\") {\n                    <mat-icon\n                      [praxisIcon]=\"tr.value\"\n                      [color]=\"isThemeColor(tr.color) ? tr.color : undefined\"\n                      [style.cssText]=\"iconStyle(tr.color)\"\n                    ></mat-icon>\n                  }\n                </div>\n              }\n            }\n\n            <div class=\"tile-body\">\n              <div\n                class=\"primary\"\n                [ngClass]=\"primary(it)?.class\"\n                [style.cssText]=\"primary(it)?.style\"\n              >\n                @if (primary(it)?.type === \"metric\") {\n                  <praxis-list-metric [metric]=\"primary(it)\"></praxis-list-metric>\n                } @else if (primary(it)?.type === \"compose\") {\n                  <praxis-list-compose\n                    [compose]=\"primary(it)\"\n                  ></praxis-list-compose>\n                } @else if (primary(it)?.type === \"component\") {\n                  <praxis-list-runtime-component\n                    [component]=\"primary(it)\"\n                  ></praxis-list-runtime-component>\n                } @else {\n                  {{ primary(it)?.value }}\n                }\n              </div>\n              @if (layoutLines > 1) {\n                <div\n                  class=\"secondary\"\n                  [ngClass]=\"secondary(it)?.class\"\n                  [style.cssText]=\"secondary(it)?.style\"\n                >\n                  @if (secondary(it)?.type === \"metric\") {\n                    <praxis-list-metric\n                      [metric]=\"secondary(it)\"\n                    ></praxis-list-metric>\n                  } @else if (secondary(it)?.type === \"compose\") {\n                    <praxis-list-compose\n                      [compose]=\"secondary(it)\"\n                    ></praxis-list-compose>\n                  } @else if (secondary(it)?.type === \"component\") {\n                    <praxis-list-runtime-component\n                      [component]=\"secondary(it)\"\n                    ></praxis-list-runtime-component>\n                  } @else {\n                    {{ secondary(it)?.value }}\n                  }\n                </div>\n              }\n\n              @if (meta(it); as m) {\n                <div\n                  class=\"tile-meta\"\n                  [ngClass]=\"m.class\"\n                  [style.cssText]=\"m.style\"\n                >\n                  @if (config.templating?.metaPrefixIcon; as mpi) {\n                    <mat-icon [praxisIcon]=\"mpi\"></mat-icon>\n                  }\n                  @switch (m.type) {\n                    @case (\"chip\") {\n                      <mat-chip\n                        [color]=\"isThemeColor(m.color) ? m.color : undefined\"\n                        [ngClass]=\"\n                          (m.variant || 'filled') === 'outlined'\n                            ? 'chip-outlined'\n                            : ''\n                        \"\n                        [style.cssText]=\"chipStyle(m.color, m.variant)\"\n                        >{{ m.value }}</mat-chip\n                      >\n                    }\n                    @case (\"rating\") {\n                      @for (\n                        _ of ratingRange(m);\n                        track $index;\n                        let idx = $index\n                      ) {\n                        <mat-icon\n                          [praxisIcon]=\"starIcon(idx, m.value)\"\n                          [color]=\"ratingThemeColor(m)\"\n                          [style.cssText]=\"ratingIconStyle(m)\"\n                        ></mat-icon>\n                      }\n                    }\n                    @case (\"icon\") {\n                      <mat-icon\n                        [praxisIcon]=\"m.value\"\n                        [color]=\"isThemeColor(m.color) ? m.color : undefined\"\n                        [style.cssText]=\"iconStyle(m.color)\"\n                      ></mat-icon>\n                    }\n                    @case (\"image\") {\n                      <span class=\"inline-image\"\n                        ><img [src]=\"m.value\" [alt]=\"m.imageAlt || ''\"\n                      /></span>\n                    }\n                    @case (\"html\") {\n                      <span [innerHTML]=\"m.value\"></span>\n                    }\n                    @case (\"metric\") {\n                      <praxis-list-metric [metric]=\"m\"></praxis-list-metric>\n                    }\n                    @case (\"compose\") {\n                      <praxis-list-compose\n                        [compose]=\"m\"\n                      ></praxis-list-compose>\n                    }\n                    @case (\"component\") {\n                      <praxis-list-runtime-component\n                        [component]=\"m\"\n                      ></praxis-list-runtime-component>\n                    }\n                    @default {\n                      <span>{{ m.value }}</span>\n                    }\n                  }\n                </div>\n              }\n\n              @if (featuresVisible()) {\n                <div class=\"tiles-features\">\n                  @for (\n                    f of config.templating?.features || [];\n                    track $index;\n                    let fi = $index\n                  ) {\n                    <span\n                      class=\"feature\"\n                      [ngClass]=\"featureSemanticClass(it, f.expr, f.class)\"\n                    >\n                      @if (f.icon && featuresMode() !== \"labels-only\") {\n                        <mat-icon [praxisIcon]=\"f.icon\"></mat-icon>\n                      }\n                      @if (featuresMode() !== \"icons-only\") {\n                        <span [ngClass]=\"f.class\" [style.cssText]=\"f.style\">\n                          @for (\n                            line of featureLabelLines(it, f.expr);\n                            track $index\n                          ) {\n                            <span class=\"feature-line\">{{ line }}</span>\n                          }\n                        </span>\n                      }\n                      @if (\n                        featureProgressPercent(it, f.expr, f.class);\n                        as progress\n                      ) {\n                        <span class=\"feature-progress\" aria-hidden=\"true\">\n                          <span\n                            class=\"feature-progress__value\"\n                            [style.width.%]=\"progress\"\n                          ></span>\n                        </span>\n                      }\n                    </span>\n                  }\n                </div>\n              }\n\n              @if (trailing(it); as tr2) {\n                @if (\n                  !(\n                    (config.templating?.statusPosition || \"inline\") ===\n                      \"top-right\" &&\n                    (tr2?.type === \"chip\" || tr2?.type === \"icon\")\n                  )\n                ) {\n                  <div\n                    class=\"tile-trailing\"\n                    [ngClass]=\"tr2.class\"\n                    [style.cssText]=\"tr2.style\"\n                  >\n                    @switch (tr2.type) {\n                      @case (\"chip\") {\n                        <mat-chip\n                          [color]=\"\n                            isThemeColor(tr2.color) ? tr2.color : undefined\n                          \"\n                          [ngClass]=\"\n                            (tr2.variant || 'filled') === 'outlined'\n                              ? 'chip-outlined'\n                              : ''\n                          \"\n                          [style.cssText]=\"chipStyle(tr2.color, tr2.variant)\"\n                          >{{ tr2.value }}</mat-chip\n                        >\n                      }\n                      @case (\"icon\") {\n                        <mat-icon\n                          [praxisIcon]=\"tr2.value\"\n                          [color]=\"\n                            isThemeColor(tr2.color) ? tr2.color : undefined\n                          \"\n                          [style.cssText]=\"iconStyle(tr2.color)\"\n                        ></mat-icon>\n                      }\n                      @case (\"image\") {\n                        <span class=\"inline-image\"\n                          ><img [src]=\"tr2.value\" [alt]=\"tr2.imageAlt || ''\"\n                        /></span>\n                      }\n                      @case (\"rating\") {\n                        @for (\n                          _ of ratingRange(tr2);\n                          track $index;\n                          let idx = $index\n                        ) {\n                          <mat-icon\n                            [praxisIcon]=\"starIcon(idx, tr2.value)\"\n                            [color]=\"ratingThemeColor(tr2)\"\n                            [style.cssText]=\"ratingIconStyle(tr2)\"\n                          ></mat-icon>\n                        }\n                      }\n                      @case (\"html\") {\n                        <span [innerHTML]=\"tr2.value\"></span>\n                      }\n                      @case (\"metric\") {\n                        <praxis-list-metric [metric]=\"tr2\"></praxis-list-metric>\n                      }\n                      @case (\"compose\") {\n                        <praxis-list-compose\n                          [compose]=\"tr2\"\n                        ></praxis-list-compose>\n                      }\n                      @case (\"component\") {\n                        <praxis-list-runtime-component\n                          [component]=\"tr2\"\n                        ></praxis-list-runtime-component>\n                      }\n                      @default {\n                        <span>{{ tr2.value }}</span>\n                      }\n                    }\n                  </div>\n                }\n              }\n            </div>\n\n            @if ((visibleActions(it, \"trailing\") || []).length) {\n              <div\n                class=\"tile-actions\"\n                (click)=\"$event.stopPropagation()\"\n                (keydown.enter)=\"onActionKeydown($event)\"\n                (keydown.space)=\"onActionKeydown($event)\"\n              >\n                @for (\n                  action of visibleActions(it, \"trailing\");\n                  let aidx = $index;\n                  track action?.id ?? $index\n                ) {\n                  @if ((action.kind || \"icon\") === \"icon\") {\n                    <button\n                      mat-icon-button\n                      [color]=\"\n                        isThemeColor(action.color) ? action.color : undefined\n                      \"\n                      (click)=\"onActionClick($event, action.id, it, i)\"\n                      [attr.aria-label]=\"action.label || action.id\"\n                      [disabled]=\"isActionLoading(action.id, it, i)\"\n                      [ngClass]=\"{\n                        'action-loading': isActionLoading(action.id, it, i),\n                      }\"\n                    >\n                      @if (isActionLoading(action.id, it, i)) {\n                        <mat-progress-spinner\n                          class=\"action-spinner\"\n                          mode=\"indeterminate\"\n                          diameter=\"16\"\n                          strokeWidth=\"3\"\n                        ></mat-progress-spinner>\n                      } @else {\n                        <mat-icon\n                          [praxisIcon]=\"action.icon\"\n                          [style.cssText]=\"iconStyle(action.color)\"\n                        ></mat-icon>\n                      }\n                    </button>\n                  } @else {\n                    @if (action.buttonVariant === \"stroked\") {\n                      <button\n                        mat-stroked-button\n                        [color]=\"\n                          isThemeColor(action.color) ? action.color : undefined\n                        \"\n                        [style.cssText]=\"buttonStyle(action.color, 'stroked')\"\n                        (click)=\"onActionClick($event, action.id, it, i)\"\n                        [attr.aria-label]=\"action.label || action.id\"\n                        [disabled]=\"isActionLoading(action.id, it, i)\"\n                        [ngClass]=\"{\n                          'action-loading': isActionLoading(action.id, it, i),\n                        }\"\n                      >\n                        @if (isActionLoading(action.id, it, i)) {\n                          <mat-progress-spinner\n                            class=\"action-spinner\"\n                            mode=\"indeterminate\"\n                            diameter=\"16\"\n                            strokeWidth=\"3\"\n                          ></mat-progress-spinner>\n                        } @else {\n                          {{ action.label || action.id }}\n                        }\n                      </button>\n                    }\n                    @if (action.buttonVariant === \"raised\") {\n                      <button\n                        mat-raised-button\n                        [color]=\"\n                          isThemeColor(action.color) ? action.color : undefined\n                        \"\n                        [style.cssText]=\"buttonStyle(action.color, 'raised')\"\n                        (click)=\"onActionClick($event, action.id, it, i)\"\n                        [attr.aria-label]=\"action.label || action.id\"\n                        [disabled]=\"isActionLoading(action.id, it, i)\"\n                        [ngClass]=\"{\n                          'action-loading': isActionLoading(action.id, it, i),\n                        }\"\n                      >\n                        @if (isActionLoading(action.id, it, i)) {\n                          <mat-progress-spinner\n                            class=\"action-spinner\"\n                            mode=\"indeterminate\"\n                            diameter=\"16\"\n                            strokeWidth=\"3\"\n                          ></mat-progress-spinner>\n                        } @else {\n                          {{ action.label || action.id }}\n                        }\n                      </button>\n                    }\n                    @if (\n                      !action.buttonVariant || action.buttonVariant === \"flat\"\n                    ) {\n                      <button\n                        mat-flat-button\n                        [color]=\"\n                          isThemeColor(action.color) ? action.color : undefined\n                        \"\n                        [style.cssText]=\"buttonStyle(action.color, 'flat')\"\n                        (click)=\"onActionClick($event, action.id, it, i)\"\n                        [attr.aria-label]=\"action.label || action.id\"\n                        [disabled]=\"isActionLoading(action.id, it, i)\"\n                        [ngClass]=\"{\n                          'action-loading': isActionLoading(action.id, it, i),\n                        }\"\n                      >\n                        @if (isActionLoading(action.id, it, i)) {\n                          <mat-progress-spinner\n                            class=\"action-spinner\"\n                            mode=\"indeterminate\"\n                            diameter=\"16\"\n                            strokeWidth=\"3\"\n                          ></mat-progress-spinner>\n                        } @else {\n                          {{ action.label || action.id }}\n                        }\n                      </button>\n                    }\n                  }\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </ng-template>\n\n    <!-- Simple pagination controls for remote data -->\n    @if (config.dataSource?.resourcePath) {\n      <div class=\"paginator\">\n        <div class=\"paginator-controls\">\n          <button mat-stroked-button color=\"primary\" (click)=\"prevPage()\">\n            Anterior\n          </button>\n          <button mat-stroked-button color=\"primary\" (click)=\"nextPage()\">\n            Pr\u00F3ximo\n          </button>\n          <mat-form-field class=\"paginator-page-size\" appearance=\"outline\">\n            <mat-label>Tam. p\u00E1gina</mat-label>\n            <mat-select\n              (selectionChange)=\"setPageSize($event.value)\"\n              [value]=\"config.layout?.pageSize || 10\"\n            >\n              <mat-option [value]=\"6\">6</mat-option>\n              <mat-option [value]=\"8\">8</mat-option>\n              <mat-option [value]=\"12\">12</mat-option>\n              <mat-option [value]=\"24\">24</mat-option>\n            </mat-select>\n          </mat-form-field>\n          @if (config.ui?.showSort) {\n            <mat-form-field class=\"paginator-sort\" appearance=\"outline\">\n              <mat-label>Ordenar</mat-label>\n              <mat-select (selectionChange)=\"onSortChange($event.value)\">\n                @for (op of config.ui?.sortOptions || []; track $index) {\n                  <mat-option [value]=\"sortOptionValue(op)\">{{\n                    sortOptionLabel(op)\n                  }}</mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n          }\n          @if (config.ui?.showSearch && config.ui?.searchField) {\n            <mat-form-field class=\"paginator-search\" appearance=\"outline\">\n              <mat-label>{{\n                config.ui?.searchPlaceholder || \"Buscar\"\n              }}</mat-label>\n              <input\n                matInput\n                type=\"search\"\n                (input)=\"onSearchInput($any($event.target).value)\"\n              />\n            </mat-form-field>\n          }\n        </div>\n        <div class=\"paginator-meta\">\n          @if (config.ui?.showRange ?? true) {\n            @if (page$ | async; as ps) {\n              @if (total$ | async; as total) {\n                @if (items$ | async; as curr) {\n                  <span class=\"muted\"\n                    >{{ (total || 0) > 0 ? rangeStart(ps) : 0 }}\u2013{{\n                      rangeEnd(curr?.length || 0, ps, total || 0)\n                    }}\n                    de {{ total || 0 }}</span\n                  >\n                }\n              }\n            }\n          } @else {\n            @if (total$ | async; as total2) {\n              <span class=\"muted\">Total: {{ total2 }}</span>\n            }\n          }\n        </div>\n      </div>\n    }\n  </ng-template>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.praxis-list-root{--p-list-radius: var(--md-sys-shape-corner-medium, 16px);--p-list-shadow: var(--md-sys-elevation-level2);--p-list-border: 1px solid var(--md-sys-color-outline-variant);--p-list-blur: 10px;--p-list-surface: var(--md-sys-color-surface-container);--p-list-surface-low: var(--md-sys-color-surface);--p-list-surface-high: var( --md-sys-color-surface-container-high, var(--md-sys-color-surface-container) );--p-list-foreground: var(--md-sys-color-on-surface);--p-list-foreground-muted: var(--md-sys-color-on-surface-variant);--p-list-accent: var(--md-sys-color-primary);--p-list-accent-weak: var(--md-sys-color-primary-container);--p-list-item-surface: var( --md-sys-color-surface-container-low, var(--md-sys-color-surface) );--p-list-item-border: 1px solid var(--md-sys-color-outline-variant);--p-list-item-hover-surface: var(--md-sys-color-surface-container-low);--p-list-item-active-surface: var(--md-sys-color-surface-container);--p-list-item-selected-surface: var(--md-sys-color-surface-container);--p-list-grad-from: var(--md-sys-color-primary-container);--p-list-grad-to: var(--md-sys-color-tertiary-container);--p-list-grad-angle: 135deg;--p-list-grad-foreground: var(--md-sys-color-on-primary);--p-list-grad-foreground-muted: var(--md-sys-color-on-primary);--p-list-leading-width: 40px;--p-list-trailing-min-width: 140px;--p-list-item-gap: 12px;--p-list-item-padding-x: 16px;--p-list-item-padding-y: 12px;--p-list-item-stack-gap: 0px;--p-list-meta-size: .95rem;--p-list-meta-weight: 500;--p-list-chip-height: 22px;--p-list-chip-font-size: 12px;--p-list-trailing-padding-right: 12px;--p-list-tile-minW: 240px;--p-list-tile-gap: 16px;--p-list-tile-padding: 16px;--p-list-tile-radius: 16px;--p-list-tile-media-radius: 12px;--p-list-tile-media-ratio: 1 / 1;--p-list-tile-hover-overlay: .04;--p-list-tile-press-overlay: .08;--p-list-tile-press-scale: .99}.list-assistant{display:flex;justify-content:flex-end;gap:8px;padding:4px 4px 8px}.action-loading{opacity:.65}.action-spinner{width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center}.action-loading .mat-mdc-button-touch-target,.action-loading .mdc-button__label{opacity:.7}.skin-elevated,.skin-outline,.skin-flat,.skin-neumorphism{--p-list-item-surface: var( --mdc-elevated-card-container-color, var(--p-list-surface) );--p-list-item-border: var(--p-list-border)}.skin-elevated .item-card,.skin-outline .item-card,.skin-flat .item-card,.skin-neumorphism .item-card{background:var(--mdc-elevated-card-container-color, var(--p-list-surface));border-radius:var(--p-list-radius);box-shadow:var(--p-list-shadow);border:var(--p-list-border)}.skin-elevated .item-tile,.skin-outline .item-tile,.skin-flat .item-tile,.skin-neumorphism .item-tile{background:var(--mdc-elevated-card-container-color, var(--p-list-surface));box-shadow:var(--p-list-shadow);border:var(--p-list-border)}.skin-elevated .mat-mdc-list-item .list-item-content,.skin-outline .mat-mdc-list-item .list-item-content,.skin-flat .mat-mdc-list-item .list-item-content,.skin-neumorphism .mat-mdc-list-item .list-item-content{background:var(--mdc-elevated-card-container-color, var(--p-list-surface));border-radius:calc(var(--p-list-radius) * .75);box-shadow:var(--p-list-shadow);border:var(--p-list-item-border);color:var(--p-list-foreground)}.skin-outline{--p-list-shadow: none;--p-list-border: 1px solid var(--md-sys-color-outline)}.skin-flat{--p-list-shadow: none;--p-list-border: 1px solid var(--md-sys-color-outline-variant)}.skin-neumorphism{--p-list-shadow: var(--md-sys-elevation-level2);--p-list-border: 1px solid var(--md-sys-color-outline-variant);--p-list-radius: 1.25rem}.skin-pill-soft .item-card,.skin-pill-soft .item-tile{background:var(--mdc-elevated-card-container-color, var(--p-list-surface));border-radius:calc(var(--p-list-radius) * 1.3);box-shadow:var(--md-sys-elevation-level1);border:var(--p-list-border)}.skin-pill-soft .mat-mdc-list-item .list-item-content{background:var(--mdc-elevated-card-container-color, var(--p-list-surface));border-radius:calc(var(--p-list-radius) * 1.3);box-shadow:var(--md-sys-elevation-level1);border:var(--p-list-border);color:var(--p-list-foreground)}.skin-gradient-tile{--p-list-foreground: var(--p-list-grad-foreground);--p-list-foreground-muted: var(--p-list-grad-foreground-muted);--p-list-item-hover-surface: linear-gradient( var(--p-list-grad-angle), var(--p-list-grad-from), var(--p-list-grad-to) );--p-list-item-active-surface: linear-gradient( var(--p-list-grad-angle), var(--p-list-grad-from), var(--p-list-grad-to) );--p-list-item-selected-surface: linear-gradient( var(--p-list-grad-angle), var(--p-list-grad-from), var(--p-list-grad-to) )}.skin-gradient-tile .item-card,.skin-gradient-tile .item-tile,.skin-gradient-tile .mat-mdc-list-item .list-item-content{background:linear-gradient(var(--p-list-grad-angle),var(--p-list-grad-from),var(--p-list-grad-to));border-radius:var(--p-list-radius);color:var(--p-list-foreground)}.skin-glass .item-card,.skin-glass .item-tile{background:var(--md-sys-color-surface-container-low);border-radius:var(--p-list-radius);border:1px solid var(--md-sys-color-outline-variant);backdrop-filter:blur(var(--p-list-blur));-webkit-backdrop-filter:blur(var(--p-list-blur))}.skin-glass .mat-mdc-list-item .list-item-content{background:var(--md-sys-color-surface-container-low);border-radius:var(--p-list-radius);border:1px solid var(--md-sys-color-outline-variant);backdrop-filter:blur(var(--p-list-blur));-webkit-backdrop-filter:blur(var(--p-list-blur));color:var(--p-list-foreground)}.density-compact .mat-mdc-list-item,.density-compact .item-card{--p-list-item-padding-y: 8px;--p-list-item-padding-x: 12px;--p-list-item-gap: 10px}.density-comfortable .mat-mdc-list-item,.density-comfortable .item-card{--p-list-item-padding-y: 10px;--p-list-item-padding-x: 14px;--p-list-item-gap: 12px}.praxis-list-root.lines-3 .mat-mdc-list-item,.praxis-list-root.lines-3 .mat-mdc-list-option{min-height:76px}.density-compact{--p-list-tile-gap: 12px;--p-list-tile-padding: 12px;--p-list-tile-minW: 200px}.density-comfortable{--p-list-tile-gap: 16px;--p-list-tile-padding: 16px}.item-spacing-none{--p-list-item-stack-gap: 0px}.item-spacing-tight{--p-list-item-stack-gap: 6px;--p-list-tile-gap: 12px}.item-spacing-default{--p-list-item-stack-gap: 10px;--p-list-tile-gap: 16px}.item-spacing-relaxed{--p-list-item-stack-gap: 14px;--p-list-tile-gap: 20px}.list-item-content{display:grid;grid-template-columns:var(--p-list-leading-width) minmax(0,1fr) minmax(var(--p-list-trailing-min-width),max-content);align-items:center;gap:var(--p-list-item-gap);padding:var(--p-list-item-padding-y) var(--p-list-item-padding-x);width:100%;min-width:0;border-radius:calc(var(--p-list-radius) * .75);overflow:visible}.list-item-content--row-layout{--p-list-row-template-columns: var(--p-list-leading-width) minmax(0, 1fr) minmax(var(--p-list-trailing-min-width), max-content);--p-list-row-gap: var(--p-list-item-gap);--p-list-row-align-items: center;grid-template-columns:var(--p-list-row-template-columns);gap:var(--p-list-row-gap);align-items:var(--p-list-row-align-items)}.list-item-content--row-layout[role=button]{cursor:pointer}.list-item-content--row-layout[role=button]:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}.list-row-slot{min-width:0;display:flex;align-items:center;gap:8px}.list-row-slot--leading{justify-content:center}.list-row-slot--primary,.list-row-slot--secondary{min-width:0}.list-row-slot--meta{color:var(--p-list-foreground);font-variant-numeric:tabular-nums}.list-row-slot--trailing{flex-wrap:wrap;justify-content:flex-end}.list-row-slot .primary,.list-row-slot .secondary,.list-row-slot .meta,.list-row-slot .trailing{min-width:0}.list-item-main-action{grid-column:1/3;display:grid;grid-template-columns:var(--p-list-leading-width) minmax(0,1fr);align-items:center;gap:var(--p-list-item-gap);min-width:0;padding:0;border:0;background:transparent;color:inherit;text-align:start;font:inherit;cursor:pointer}.list-item-main-action:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px;border-radius:12px}.list-item-leading{display:flex;align-items:center;justify-content:center;min-height:100%}.leading-placeholder{width:24px;height:24px;display:inline-block}.list-item-text{min-width:0;display:grid;align-content:center;gap:4px}.list-item-trailing{min-width:0;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:6px;text-align:end;padding-right:var(--p-list-trailing-padding-right)}.list-item-content--row-layout .list-item-actions{justify-content:flex-end}.list-item-actions{display:flex;align-items:center;justify-content:flex-end;gap:4px;flex-wrap:wrap}.expand-toggle{color:var(--p-list-foreground-muted)}.mat-mdc-list-item .list-item-content{background:var(--p-list-item-surface);border:var(--p-list-item-border);transition:background .15s ease,box-shadow .15s ease,transform .15s ease}.mat-mdc-list-item,.mat-mdc-list-option{height:auto;align-items:stretch;overflow:visible}.mat-mdc-list-item.mdc-list-item--with-one-line,.mat-mdc-list-item.mdc-list-item--with-two-lines,.mat-mdc-list-item.mdc-list-item--with-three-lines,.mat-mdc-list-item-single-line,.mat-mdc-list-item-two-line,.mat-mdc-list-item-three-line,.mat-mdc-list-option.mdc-list-item--with-one-line,.mat-mdc-list-option.mdc-list-item--with-two-lines,.mat-mdc-list-option.mdc-list-item--with-three-lines{height:auto!important}.mdc-list-item{overflow:visible}.density-compact .mat-mdc-list-item,.density-compact .mat-mdc-list-option{min-height:44px}.density-comfortable .mat-mdc-list-item,.density-comfortable .mat-mdc-list-option{min-height:52px}.praxis-list-root:not(.density-compact):not(.density-comfortable) .mat-mdc-list-item,.praxis-list-root:not(.density-compact):not(.density-comfortable) .mat-mdc-list-option{min-height:56px}.mat-mdc-list-item .mdc-list-item__content,.mat-mdc-list-option .mdc-list-item__content,.mat-mdc-list-item .mdc-list-item__primary-text,.mat-mdc-list-option .mdc-list-item__primary-text{display:block!important;width:100%!important;height:auto!important;padding:0!important;margin:0!important;overflow:visible!important;box-sizing:border-box}.mat-mdc-list-item,.mat-mdc-list-option{padding:0!important;box-sizing:border-box}.praxis-list-root mat-list>mat-list-item:not(:last-child),.praxis-list-root mat-selection-list>mat-list-option:not(:last-child){margin-bottom:var(--p-list-item-stack-gap)}.mat-mdc-list-item:hover .list-item-content,.mat-mdc-list-option:hover .list-item-content{background:var(--p-list-item-hover-surface)}.mat-mdc-list-item:active .list-item-content,.mat-mdc-list-option:active .list-item-content{background:var(--p-list-item-active-surface)}.mat-mdc-list-option.mdc-list-item--selected .list-item-content{background:var(--p-list-item-selected-surface);border-color:var(--md-sys-color-outline-variant)}.mat-mdc-list-option.cdk-keyboard-focused .list-item-content,.mat-mdc-list-option.cdk-focused .list-item-content{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}.mat-mdc-list-item:focus-visible .list-item-content{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}.executive-inline-skin{--p-list-leading-width: 56px;--p-list-trailing-min-width: 232px;--p-list-item-padding-x: 14px;--p-list-item-padding-y: 8px;--p-list-item-gap: 10px;--p-list-surface: #f8fafb;--p-list-surface-low: #ffffff;--p-list-item-surface: #ffffff;--p-list-item-hover-surface: #f7fafc;--p-list-item-active-surface: #eef4f8;--p-list-item-selected-surface: #eef4f8;--p-list-foreground: #17324d;--p-list-foreground-muted: #72849a}.executive-inline-skin .list-item-content--row-layout.exec-row-layout{min-height:72px;padding:12px 20px;background:linear-gradient(180deg,#fff,#fbfcfd)!important;border:1px solid #dce5ec!important;border-radius:18px;box-shadow:0 1px 2px #0f223a08,0 4px 14px #0f223a08!important;color:#17324d!important}.executive-inline-skin .mat-mdc-list-item:hover .list-item-content--row-layout.exec-row-layout{background:linear-gradient(180deg,#fff,#f7fafc)!important}.executive-inline-skin .list-item-content--row-layout.exec-row-layout+.item-expansion{margin-left:10px;margin-right:10px}.executive-inline-skin .list-item-content--row-layout.exec-row-layout .list-row-slot{min-height:34px}.executive-inline-skin .list-row-slot--leading{justify-content:center}.executive-inline-skin .list-row-slot--identity{align-items:center;padding-right:4px}.executive-inline-skin .list-row-slot--balance,.executive-inline-skin .list-row-slot--limit,.executive-inline-skin .list-row-slot--risk,.executive-inline-skin .list-row-slot--alerts{justify-content:center;padding-inline:2px}.executive-inline-skin .list-row-slot--owner{justify-content:flex-start;padding-left:0}.executive-inline-skin .list-row-slot--actions{justify-content:flex-end;padding-left:0}.executive-inline-skin .list-row-slot--expand{justify-content:center}.executive-inline-skin .docs-expansion-leading{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:15px;background:linear-gradient(180deg,#edf4f9,#e6eef5);color:#1b5f86;font-size:1rem;font-weight:800;letter-spacing:.02em;box-shadow:0 1px 3px #1b5f861f;border:1px solid #dbe7f0}.executive-inline-skin .exec-balance-metric,.executive-inline-skin .exec-limit-metric,.executive-inline-skin .exec-risk-metric{min-width:0}.executive-inline-skin .exec-balance-metric .p-list-metric,.executive-inline-skin .exec-limit-metric .p-list-metric,.executive-inline-skin .exec-risk-metric .p-list-metric{gap:5px}.executive-inline-skin .exec-balance-metric .p-list-metric__label,.executive-inline-skin .exec-limit-metric .p-list-metric__label,.executive-inline-skin .exec-risk-metric .p-list-metric__label{font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8090a1}.executive-inline-skin .exec-balance-metric .p-list-metric__value,.executive-inline-skin .exec-limit-metric .p-list-metric__value{font-size:.96rem;font-weight:800;letter-spacing:-.02em;color:#0d1f34;line-height:1.05}.executive-inline-skin .exec-limit-metric .p-list-metric__caption{font-size:.66rem;font-weight:700;color:#8090a1}.executive-inline-skin .exec-limit-metric .p-list-metric__progress{width:68px;justify-self:center;height:3px}.executive-inline-skin .exec-risk-metric{min-width:84px}.executive-inline-skin .exec-risk-metric .p-list-metric{justify-items:center}.executive-inline-skin .exec-risk-metric .p-list-metric__main{gap:6px}.executive-inline-skin .exec-risk-metric .p-list-metric__value{font-size:1.02rem;font-weight:800;letter-spacing:-.024em;line-height:1}.executive-inline-skin .exec-risk-metric .p-list-metric__progress{width:56px;justify-self:center;height:3px}.executive-inline-skin .exec-risk-metric .p-list-metric__caption{font-size:.7rem;font-weight:700;line-height:1.1}.executive-inline-skin .exec-risk-metric .p-list-metric__caption--below-progress{justify-self:center;margin-top:-1px}.executive-inline-skin .exec-risk-metric .p-list-metric__icon mat-icon{width:15px;height:15px;font-size:15px}.executive-inline-skin .list-item-actions{gap:6px;flex-wrap:nowrap}.executive-inline-skin .list-row-slot--actions .list-item-actions{justify-content:flex-end}.executive-inline-skin .list-item-actions button,.executive-inline-skin .expand-toggle{width:30px;height:30px;min-width:30px;border-radius:12px;color:#6d7f93!important}.executive-inline-skin .list-item-actions button mat-icon,.executive-inline-skin .expand-toggle mat-icon{width:18px;height:18px;font-size:18px}.executive-inline-skin .item-expansion{position:relative;margin-top:-10px;padding:22px 26px;background:linear-gradient(180deg,#fcfdfe,#f5f8fb);border-color:#e4eaf0;border-radius:0 0 22px 22px;box-shadow:inset 0 1px #ffffffdb}.lead-image{position:relative;width:96px;height:72px;border-radius:12px;overflow:hidden}.lead-image img{width:100%;height:100%;object-fit:cover;display:block}.lead-image .lead-badge{position:absolute;left:8px;bottom:8px}.inline-image{position:relative;width:20px;height:20px;border-radius:4px;overflow:hidden;display:inline-block;vertical-align:middle}.inline-image img{width:100%;height:100%;object-fit:cover;display:block}.inline-image .inline-badge{position:absolute;left:2px;bottom:2px}.model-media .lead-image{width:136px;height:96px;border-radius:16px}.model-media .list-item-content{gap:16px}.model-media .item-card{--p-list-leading-width: 136px}.model-hotel .lead-image{width:160px;height:110px;border-radius:18px}.model-hotel .item-card{--p-list-leading-width: 160px}.primary,.secondary{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.primary{-webkit-line-clamp:1;font-weight:600;color:var(--p-list-foreground)}.secondary{-webkit-line-clamp:1;color:var(--p-list-foreground-muted)}.lines-3 .tertiary{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.item-tile .primary{-webkit-line-clamp:2;font-size:.95rem;line-height:1.25rem}.item-tile .secondary{-webkit-line-clamp:2;font-size:.8rem;line-height:1.1rem}.tertiary{color:var(--p-list-foreground-muted)}.features{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px;color:inherit}.feature{display:inline-flex;align-items:center;gap:6px}.feature-line{display:block}.feature-progress{display:block;width:88px;height:4px;margin-top:6px;border-radius:999px;background:#dbe5eb;overflow:hidden}.feature-progress__value{display:block;height:100%;border-radius:inherit;background:#2f9b69}.meta{color:var(--p-list-foreground);font-size:var(--p-list-meta-size);font-weight:var(--p-list-meta-weight);font-variant-numeric:tabular-nums;white-space:nowrap}.trailing{color:var(--p-list-foreground-muted);margin-left:0;white-space:nowrap}.section-header{font-size:.85rem;color:var(--p-list-foreground-muted);padding:8px 12px}.praxis-list-root mat-list,.praxis-list-root mat-selection-list{display:block;padding-bottom:12px}.praxis-list-root .mat-divider{margin-left:var(--p-list-item-padding-x);margin-right:var(--p-list-item-padding-x)}.item-expansion{margin:0 var(--p-list-item-padding-x) var(--p-list-item-stack-gap);padding:14px 16px;background:color-mix(in srgb,var(--p-list-surface) 88%,white 12%);border:1px solid var(--md-sys-color-outline-variant);border-radius:calc(var(--p-list-radius) * .75)}.item-expansion-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}.expansion-section{min-width:0;display:grid;gap:10px;align-content:start}.expansion-section-title{font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--p-list-foreground-muted)}.expansion-info-list,.expansion-timeline,.expansion-key-value{display:grid;gap:10px}.expansion-info-item,.expansion-timeline-item{display:grid;gap:4px;padding:10px 12px;border-radius:14px;background:var(--p-list-item-surface);border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 72%,transparent 28%)}.expansion-info-title,.expansion-timeline-title{font-size:.92rem;font-weight:600;color:var(--p-list-foreground)}.expansion-info-value,.expansion-timeline-meta,.expansion-timeline-description,.expansion-empty{font-size:.82rem;line-height:1.45;color:var(--p-list-foreground-muted)}.expansion-chip-list{display:flex;flex-wrap:wrap;gap:8px}.expansion-chip{background:var(--p-list-item-surface);border:1px solid var(--md-sys-color-outline-variant)}.expansion-key-value{margin:0}.expansion-key-value-row{display:grid;gap:4px;padding:10px 12px;border-radius:14px;background:var(--p-list-item-surface);border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 72%,transparent 28%)}.expansion-key-value-row dt,.expansion-key-value-row dd{margin:0}.expansion-key-value-row dt{font-size:.78rem;font-weight:600;color:var(--p-list-foreground-muted)}.expansion-key-value-row dd{font-size:.9rem;color:var(--p-list-foreground)}.cards-grid,.tiles-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--p-list-tile-minW),1fr));gap:var(--p-list-tile-gap)}.item-tile{position:relative;display:flex;flex-direction:column;gap:10px;padding:var(--p-list-tile-padding);border-radius:var(--p-list-tile-radius);background:var(--p-list-surface);border:var(--p-list-border);color:var(--p-list-foreground);cursor:pointer;min-height:160px;transition:box-shadow .16s ease-out,border-color .16s ease-out,transform .12s ease-out,background .16s ease-out}.item-tile:hover{box-shadow:var(--md-sys-elevation-level2);border-color:var(--md-sys-color-outline-variant);background:var(--p-list-item-hover-surface)}.item-tile:active{transform:scale(var(--p-list-tile-press-scale));background:var(--p-list-item-active-surface)}.item-tile:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}.tile-media{width:100%;aspect-ratio:var(--p-list-tile-media-ratio);border-radius:var(--p-list-tile-media-radius);background:var(--p-list-item-surface);border:1px solid var(--md-sys-color-outline-variant);display:grid;place-items:center;overflow:hidden}.tile-media img{width:100%;height:100%;object-fit:cover;display:block}.tile-media mat-icon{font-size:28px;height:28px;width:28px;color:var(--p-list-foreground-muted)}.tile-body{display:grid;gap:6px;min-width:0}.tile-meta{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;color:var(--p-list-foreground-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tile-trailing{font-size:.75rem;color:var(--p-list-foreground-muted);white-space:nowrap}.tiles-features{display:flex;flex-wrap:wrap;gap:8px;color:inherit}.tile-status{position:absolute;top:10px;right:10px}.tile-actions{position:absolute;top:8px;left:8px;display:flex;gap:4px;opacity:0;pointer-events:none;transform:translateY(-2px);transition:opacity .16s ease-out,transform .16s ease-out}.item-tile:hover .tile-actions,.item-tile:focus-visible .tile-actions,.item-tile:focus-within .tile-actions{opacity:1;pointer-events:auto;transform:translateY(0)}@media(hover:none){.tile-actions{opacity:1;pointer-events:auto;transform:none}}@media(max-width:600px){.tiles-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}@media(prefers-reduced-motion:reduce){.item-tile,.tile-actions{transition:none}.item-tile:active{transform:none}.item-card{transition:none}.item-card:active{transform:none}}.item-card{padding:var(--p-list-tile-padding);display:flex;flex-direction:column;min-height:160px;position:relative;cursor:pointer;background:var(--p-list-surface);border:var(--p-list-border);border-radius:var(--p-list-tile-radius);box-shadow:var(--p-list-shadow);transition:box-shadow .16s ease-out,border-color .16s ease-out,transform .12s ease-out,background .16s ease-out;--p-list-leading-width: 96px;--p-list-trailing-min-width: 0px}.item-card .list-item-trailing{min-width:var(--p-list-trailing-min-width)}.item-card:hover{box-shadow:var(--md-sys-elevation-level3);border-color:var(--md-sys-color-outline-variant);background:var(--p-list-item-hover-surface)}.item-card:active{transform:scale(var(--p-list-tile-press-scale));background:var(--p-list-item-active-surface)}.item-card:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}.card-actions{display:flex;align-items:center;justify-content:flex-end;gap:4px;padding:6px 8px 4px;border-top:1px solid var(--md-sys-color-outline-variant);margin-top:auto}.status-overlay{position:absolute;top:10px;right:10px;pointer-events:none}.status-overlay .mat-mdc-chip{pointer-events:auto}.leading-icon.mat-icon{width:36px;height:36px;line-height:36px;font-size:20px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.mat-mdc-chip{--mdc-chip-container-height: var(--p-list-chip-height);font-size:var(--p-list-chip-font-size)}.meta .mat-icon{font-size:18px;height:18px;width:18px}.features{overflow:hidden}@keyframes shimmer{0%{background-position:-468px 0}to{background-position:468px 0}}.skeleton{animation-duration:1.2s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:shimmer;animation-timing-function:linear;background:linear-gradient(to right,var(--md-sys-color-surface-container-low) 8%,var(--md-sys-color-surface-container) 18%,var(--md-sys-color-surface-container-low) 33%);background-size:800px 104px;position:relative}.skeleton-avatar{width:32px;height:32px;border-radius:50%}.skeleton-line{height:10px;margin:6px 0;border-radius:6px}.skeleton-chip{width:48px;height:18px;border-radius:999px}.chip-outlined.mat-mdc-chip{background:transparent!important;border:1px solid currentColor}.w-60{width:60%}.w-40{width:40%}.paginator{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:14px;padding:14px 4px 8px;border-top:1px solid var(--md-sys-color-outline-variant);position:relative;z-index:1;background:var(--p-list-surface-low);border-radius:calc(var(--p-list-radius) * .75)}.paginator-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.paginator-meta{display:flex;align-items:center;gap:8px;margin-left:auto}.paginator-page-size{width:120px}.paginator-sort{width:180px}.paginator-search{min-width:220px}.muted{color:var(--p-list-foreground-muted)}@media(max-width:720px){.list-item-content{grid-template-columns:var(--p-list-leading-width) minmax(0,1fr)}.list-item-trailing{grid-column:1/-1;padding-right:0;align-items:flex-start;text-align:start}.item-expansion{margin-left:0;margin-right:0}.paginator{align-items:stretch}.paginator-controls{width:100%}.paginator-meta{width:100%;margin-left:0;justify-content:flex-start}.paginator-page-size,.paginator-sort,.paginator-search{width:100%;min-width:0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i3.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i3.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i3.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: i3.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "component", type: i3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i5.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: 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.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", 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: MatProgressSpinnerModule }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { 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: "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: 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: MatTooltipModule }, { kind: "directive", type: i12.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: PraxisAiAssistantComponent, selector: "praxis-ai-assistant", inputs: ["adapter", "riskPolicy", "allowManualPatchEdit"] }, { kind: "component", type: ExecutiveBadgeComponent, selector: "praxis-executive-badge", inputs: ["ariaLabel", "variant"] }, { kind: "component", type: ExecutiveAlertsComponent, selector: "praxis-executive-alerts", inputs: ["alerts"] }, { kind: "component", type: ExecutiveOwnerComponent, selector: "praxis-executive-owner", inputs: ["name"] }, { kind: "component", type: PraxisListMetricComponent, selector: "praxis-list-metric", inputs: ["metric"] }, { kind: "component", type: PraxisListComposeComponent, selector: "praxis-list-compose", inputs: ["compose"] }, { kind: "component", type: PraxisListRuntimeComponentComponent, selector: "praxis-list-runtime-component", inputs: ["component"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: PraxisList, isStandalone: true, selector: "praxis-list", inputs: { config: "config", listId: "listId", componentInstanceId: "componentInstanceId", form: "form", enableCustomization: ["enableCustomization", "enableCustomization", booleanAttribute] }, outputs: { itemClick: "itemClick", actionClick: "actionClick", selectionChange: "selectionChange" }, providers: [GenericCrudService, ListDataService, providePraxisListI18n()], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"praxis-list-root\"\n  [ngClass]=\"skinClasses\"\n  [attr.data-skin-scope]=\"skinScopeId\"\n  [attr.aria-label]=\"config.a11y?.ariaLabel || null\"\n  [attr.aria-labelledby]=\"config.a11y?.ariaLabelledBy || null\"\n>\n  @if (inlineCss) {\n    <style [attr.nonce]=\"cspNonce || null\" [textContent]=\"inlineCss\"></style>\n  }\n\n  @if (enableCustomization) {\n    <div class=\"list-assistant\">\n      <button\n        mat-mini-fab\n        type=\"button\"\n        color=\"primary\"\n        (click)=\"openConfigEditor()\"\n        [matTooltip]=\"configEditorLabel()\"\n        [attr.aria-label]=\"configEditorLabel()\"\n        data-testid=\"praxis-list-open-config-editor\"\n      >\n        <mat-icon [praxisIcon]=\"'edit'\"></mat-icon>\n      </button>\n      <praxis-ai-assistant [adapter]=\"aiAdapter\"></praxis-ai-assistant>\n    </div>\n  }\n\n  <!-- Skeleton while loading -->\n  @if ((loading$ | async) && hasSkeleton()) {\n    @if (isListVariant()) {\n      <mat-list>\n        @for (_ of skeletonItems(); track $index; let i = $index) {\n          <mat-list-item>\n            <div class=\"list-item-content\">\n              <div class=\"list-item-leading\">\n                <div class=\"skeleton skeleton-avatar\"></div>\n              </div>\n              <div class=\"list-item-text\">\n                <div class=\"skeleton skeleton-line w-60\"></div>\n                @if (layoutLines > 1) {\n                  <div class=\"skeleton skeleton-line w-40\"></div>\n                }\n              </div>\n              <div class=\"list-item-trailing\">\n                <div class=\"skeleton skeleton-chip\"></div>\n              </div>\n            </div>\n          </mat-list-item>\n        }\n      </mat-list>\n    } @else {\n      <div class=\"cards-grid\">\n        @for (_ of skeletonItems(); track $index; let i = $index) {\n          <div class=\"item-card\">\n            <div class=\"list-item-content\">\n              <div class=\"list-item-leading\">\n                <div class=\"skeleton skeleton-avatar\"></div>\n              </div>\n              <div class=\"list-item-text\">\n                <div class=\"skeleton skeleton-line w-60\"></div>\n                @if (layoutLines > 1) {\n                  <div class=\"skeleton skeleton-line w-40\"></div>\n                }\n              </div>\n              <div class=\"list-item-trailing\">\n                <div class=\"skeleton skeleton-chip\"></div>\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n    }\n  } @else {\n    <ng-container *ngTemplateOutlet=\"notLoading\"></ng-container>\n  }\n\n  <ng-template #notLoading>\n    <!-- Empty state -->\n    @if (items$ | async; as all) {\n      @if (all.length === 0) {\n        <div class=\"section-header\">\n          @if (emptyStateTemplate(); as empty) {\n            @if (\n              simpleRichContentNodes(empty, {\n                imageAlt: config.templating?.emptyState?.imageAlt || \"\",\n              });\n              as richNodes\n            ) {\n              <praxis-rich-content [nodes]=\"richNodes\"></praxis-rich-content>\n            } @else {\n              @switch (empty.type) {\n                @case (\"icon\") {\n                  <mat-icon\n                    [praxisIcon]=\"empty.value\"\n                    [ngClass]=\"empty.class\"\n                    [color]=\"isThemeColor(empty.color) ? empty.color : undefined\"\n                    [style.cssText]=\"\n                      (empty.style ? empty.style + ';' : '') +\n                      iconStyle(empty.color)\n                    \"\n                  ></mat-icon>\n                }\n                @case (\"image\") {\n                  <span\n                    class=\"inline-image\"\n                    [ngClass]=\"empty.class\"\n                    [style.cssText]=\"empty.style\"\n                  >\n                    <img\n                      [src]=\"empty.value\"\n                      [alt]=\"config.templating?.emptyState?.imageAlt || ''\"\n                    />\n                    @if (empty.badge?.value) {\n                      <mat-chip\n                        class=\"inline-badge\"\n                        [color]=\"\n                          isThemeColor(empty.badge?.color)\n                            ? empty.badge?.color\n                            : undefined\n                        \"\n                        [ngClass]=\"\n                          (empty.badge?.variant || 'filled') === 'outlined'\n                            ? 'chip-outlined'\n                            : ''\n                        \"\n                        [style.cssText]=\"\n                          chipStyle(empty.badge?.color, empty.badge?.variant)\n                        \"\n                        >{{ empty.badge?.value }}</mat-chip\n                      >\n                    }\n                  </span>\n                }\n                @case (\"chip\") {\n                  <mat-chip\n                    [color]=\"isThemeColor(empty.color) ? empty.color : undefined\"\n                    [ngClass]=\"[\n                      empty.class || '',\n                      (empty.variant || 'filled') === 'outlined'\n                        ? 'chip-outlined'\n                        : '',\n                    ]\"\n                    [style.cssText]=\"\n                      chipStyle(empty.color, empty.variant) +\n                      (empty.style ? ';' + empty.style : '')\n                    \"\n                    >{{ empty.value }}</mat-chip\n                  >\n                }\n                @case (\"rating\") {\n                  <span [ngClass]=\"empty.class\" [style.cssText]=\"empty.style\">\n                    @for (\n                      _ of ratingRange(empty);\n                      track $index;\n                      let idx = $index\n                    ) {\n                      <mat-icon\n                        [praxisIcon]=\"starIcon(idx, empty.value)\"\n                        [color]=\"ratingThemeColor(empty)\"\n                        [style.cssText]=\"ratingIconStyle(empty)\"\n                      ></mat-icon>\n                    }\n                  </span>\n                }\n                @case (\"html\") {\n                  <span\n                    [ngClass]=\"empty.class\"\n                    [style.cssText]=\"empty.style\"\n                    [innerHTML]=\"empty.value\"\n                  ></span>\n                }\n                @case (\"metric\") {\n                  <praxis-list-metric [metric]=\"empty\"></praxis-list-metric>\n                }\n                @case (\"compose\") {\n                  <praxis-list-compose [compose]=\"empty\"></praxis-list-compose>\n                }\n                @case (\"component\") {\n                  <praxis-list-runtime-component\n                    [component]=\"empty\"\n                  ></praxis-list-runtime-component>\n                }\n                @default {\n                  <span [ngClass]=\"empty.class\" [style.cssText]=\"empty.style\">{{\n                    empty.value\n                  }}</span>\n                }\n              }\n            }\n          }\n        </div>\n      }\n    }\n\n    <ng-template\n      #rowLayoutNode\n      let-node\n      let-slot=\"slot\"\n      let-imageAlt=\"imageAlt\"\n    >\n      @if (simpleRichContentNodes(node, { slot: slot, imageAlt: imageAlt }); as richNodes) {\n        <praxis-rich-content [nodes]=\"richNodes\"></praxis-rich-content>\n      } @else {\n        @switch (node?.type) {\n          @case (\"icon\") {\n            <mat-icon\n              [praxisIcon]=\"node?.value\"\n              [ngClass]=\"node?.class\"\n              [color]=\"isThemeColor(node?.color) ? node?.color : undefined\"\n              [style.cssText]=\"\n                ((node?.style || '') ? node.style + ';' : '') +\n                iconStyle(node?.color)\n              \"\n            ></mat-icon>\n          }\n          @case (\"image\") {\n            <span\n              class=\"inline-image\"\n              [ngClass]=\"node?.class\"\n              [style.cssText]=\"node?.style\"\n            >\n              <img [src]=\"node?.value\" [alt]=\"node?.imageAlt || imageAlt || ''\" />\n              @if (node?.badge?.value) {\n                <mat-chip\n                  class=\"inline-badge\"\n                  [color]=\"\n                    isThemeColor(node?.badge?.color)\n                      ? node?.badge?.color\n                      : undefined\n                  \"\n                  [ngClass]=\"\n                    (node?.badge?.variant || 'filled') === 'outlined'\n                      ? 'chip-outlined'\n                      : ''\n                  \"\n                  [style.cssText]=\"\n                    chipStyle(node?.badge?.color, node?.badge?.variant)\n                  \"\n                >\n                  {{ node?.badge?.value }}\n                </mat-chip>\n              }\n            </span>\n          }\n          @case (\"chip\") {\n            <mat-chip\n              [color]=\"isThemeColor(node?.color) ? node?.color : undefined\"\n              [ngClass]=\"[\n                node?.class || '',\n                (node?.variant || 'filled') === 'outlined' ? 'chip-outlined' : '',\n              ]\"\n              [style.cssText]=\"\n                chipStyle(node?.color, node?.variant) +\n                (node?.style ? ';' + node.style : '')\n              \"\n            >\n              {{ node?.value }}\n            </mat-chip>\n          }\n          @case (\"rating\") {\n            <span [ngClass]=\"node?.class\" [style.cssText]=\"node?.style\">\n              @for (_ of ratingRange(node); track $index; let idx = $index) {\n                <mat-icon\n                  [praxisIcon]=\"starIcon(idx, node?.value)\"\n                  [color]=\"ratingThemeColor(node)\"\n                  [style.cssText]=\"ratingIconStyle(node)\"\n                ></mat-icon>\n              }\n            </span>\n          }\n          @case (\"html\") {\n            <span\n              [ngClass]=\"node?.class\"\n              [style.cssText]=\"node?.style\"\n              [innerHTML]=\"node?.value\"\n            ></span>\n          }\n          @case (\"metric\") {\n            <praxis-list-metric [metric]=\"node\"></praxis-list-metric>\n          }\n          @case (\"compose\") {\n            <praxis-list-compose [compose]=\"node\"></praxis-list-compose>\n          }\n          @case (\"component\") {\n            <praxis-list-runtime-component\n              [component]=\"node\"\n            ></praxis-list-runtime-component>\n          }\n          @default {\n            <span [ngClass]=\"node?.class\" [style.cssText]=\"node?.style\">\n              @if (slot === \"meta\" && config.templating?.metaPrefixIcon; as mpi) {\n                <mat-icon [praxisIcon]=\"mpi\"></mat-icon>\n              }\n              {{ node?.value }}\n            </span>\n          }\n        }\n      }\n    </ng-template>\n\n    <ng-template\n      #listRowLayout\n      let-item\n      let-index=\"index\"\n      let-sectionKey=\"sectionKey\"\n      let-clickable=\"clickable\"\n    >\n      <div\n        class=\"list-item-content\"\n        [ngClass]=\"rowLayoutItemClass(item)\"\n        [attr.style]=\"rowLayoutItemStyle(item)\"\n        [attr.role]=\"clickable ? 'button' : null\"\n        [attr.tabindex]=\"clickable ? '0' : null\"\n        [attr.aria-label]=\"clickable ? itemAriaLabel(item) : null\"\n        [attr.aria-expanded]=\"\n          clickable && expansionOwnedByRow() ? isExpanded(item, index) : null\n        \"\n        [attr.aria-controls]=\"\n          clickable && expansionOwnedByRow()\n            ? expandRegionId(item, index)\n            : null\n        \"\n        (click)=\"clickable ? onRowActivate(item, index, sectionKey) : null\"\n        (keydown.enter)=\"clickable ? onRowActivate(item, index, sectionKey) : null\"\n        (keydown.space)=\"\n          onRowSpaceActivate($event, clickable, item, index, sectionKey)\n        \"\n      >\n        @for (column of rowLayoutColumns(); track rowLayoutTrackColumn($index, column)) {\n          <div\n            [attr.data-row-slot]=\"column.slot\"\n            [ngClass]=\"rowLayoutColumnClass(column)\"\n            [attr.style]=\"rowLayoutColumnStyle(column)\"\n          >\n            @if (column.slot === \"leading\") {\n              @if (rowLayoutSlot(item, column.slot); as lead) {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    rowLayoutNode;\n                    context: {\n                      $implicit: lead,\n                      slot: column.slot,\n                      imageAlt: rowLayoutImageAlt(column.slot),\n                    }\n                  \"\n                ></ng-container>\n              } @else {\n                <span class=\"leading-placeholder\"></span>\n              }\n            } @else if (column.slot === \"trailing\") {\n              @if (rowLayoutSlot(item, column.slot); as trailingNode) {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    rowLayoutNode;\n                    context: {\n                      $implicit: trailingNode,\n                      slot: column.slot,\n                      imageAlt: rowLayoutImageAlt(column.slot),\n                    }\n                  \"\n                ></ng-container>\n              }\n              @if (showExpandIcon(\"trailing\")) {\n                <button\n                  mat-icon-button\n                  type=\"button\"\n                  class=\"expand-toggle\"\n                  [attr.aria-label]=\"expandToggleAriaLabel(item, index)\"\n                  [attr.aria-expanded]=\"\n                    expansionOwnedByIcon() ? isExpanded(item, index) : null\n                  \"\n                  [attr.aria-controls]=\"\n                    expansionOwnedByIcon()\n                      ? expandRegionId(item, index)\n                      : null\n                  \"\n                  (click)=\"onExpandToggle($event, item, index)\"\n                >\n                  <mat-icon\n                    [praxisIcon]=\"\n                      isExpanded(item, index) ? 'expand_less' : 'expand_more'\n                    \"\n                  ></mat-icon>\n                </button>\n              }\n              @if ((visibleActions(item, \"trailing\") || []).length) {\n                <div\n                  class=\"list-item-actions\"\n                  (click)=\"$event.stopPropagation()\"\n                  (keydown.enter)=\"onActionKeydown($event)\"\n                  (keydown.space)=\"onActionKeydown($event)\"\n                >\n                  @for (\n                    action of visibleActions(item, \"trailing\");\n                    let aidx = $index;\n                    track action?.id ?? $index\n                  ) {\n                    @if ((action.kind || \"icon\") === \"icon\") {\n                      <button\n                        mat-icon-button\n                        [color]=\"\n                          isThemeColor(action.color) ? action.color : undefined\n                        \"\n                        (click)=\"onActionClick($event, action.id, item, index)\"\n                        [attr.aria-label]=\"action.label || action.id\"\n                        [disabled]=\"isActionLoading(action.id, item, index)\"\n                        [ngClass]=\"{\n                          'action-loading': isActionLoading(\n                            action.id,\n                            item,\n                            index\n                          ),\n                        }\"\n                      >\n                        @if (isActionLoading(action.id, item, index)) {\n                          <mat-progress-spinner\n                            class=\"action-spinner\"\n                            mode=\"indeterminate\"\n                            diameter=\"16\"\n                            strokeWidth=\"3\"\n                          ></mat-progress-spinner>\n                        } @else {\n                          <mat-icon\n                            [praxisIcon]=\"action.icon\"\n                            [style.cssText]=\"iconStyle(action.color)\"\n                          ></mat-icon>\n                        }\n                      </button>\n                    } @else {\n                      @if (action.buttonVariant === \"stroked\") {\n                        <button\n                          mat-stroked-button\n                          [color]=\"\n                            isThemeColor(action.color) ? action.color : undefined\n                          \"\n                          [style.cssText]=\"buttonStyle(action.color, 'stroked')\"\n                          (click)=\"onActionClick($event, action.id, item, index)\"\n                          [attr.aria-label]=\"action.label || action.id\"\n                          [disabled]=\"isActionLoading(action.id, item, index)\"\n                          [ngClass]=\"{\n                            'action-loading': isActionLoading(\n                              action.id,\n                              item,\n                              index\n                            ),\n                          }\"\n                        >\n                          @if (isActionLoading(action.id, item, index)) {\n                            <mat-progress-spinner\n                              class=\"action-spinner\"\n                              mode=\"indeterminate\"\n                              diameter=\"16\"\n                              strokeWidth=\"3\"\n                            ></mat-progress-spinner>\n                          } @else {\n                            {{ action.label || action.id }}\n                          }\n                        </button>\n                      }\n                      @if (action.buttonVariant === \"raised\") {\n                        <button\n                          mat-raised-button\n                          [color]=\"\n                            isThemeColor(action.color) ? action.color : undefined\n                          \"\n                          [style.cssText]=\"buttonStyle(action.color, 'raised')\"\n                          (click)=\"onActionClick($event, action.id, item, index)\"\n                          [attr.aria-label]=\"action.label || action.id\"\n                          [disabled]=\"isActionLoading(action.id, item, index)\"\n                          [ngClass]=\"{\n                            'action-loading': isActionLoading(\n                              action.id,\n                              item,\n                              index\n                            ),\n                          }\"\n                        >\n                          @if (isActionLoading(action.id, item, index)) {\n                            <mat-progress-spinner\n                              class=\"action-spinner\"\n                              mode=\"indeterminate\"\n                              diameter=\"16\"\n                              strokeWidth=\"3\"\n                            ></mat-progress-spinner>\n                          } @else {\n                            {{ action.label || action.id }}\n                          }\n                        </button>\n                      }\n                      @if (!action.buttonVariant || action.buttonVariant === \"flat\") {\n                        <button\n                          mat-flat-button\n                          [color]=\"\n                            isThemeColor(action.color) ? action.color : undefined\n                          \"\n                          [style.cssText]=\"buttonStyle(action.color, 'flat')\"\n                          (click)=\"onActionClick($event, action.id, item, index)\"\n                          [attr.aria-label]=\"action.label || action.id\"\n                          [disabled]=\"isActionLoading(action.id, item, index)\"\n                          [ngClass]=\"{\n                            'action-loading': isActionLoading(\n                              action.id,\n                              item,\n                              index\n                            ),\n                          }\"\n                        >\n                          @if (isActionLoading(action.id, item, index)) {\n                            <mat-progress-spinner\n                              class=\"action-spinner\"\n                              mode=\"indeterminate\"\n                              diameter=\"16\"\n                              strokeWidth=\"3\"\n                            ></mat-progress-spinner>\n                          } @else {\n                            {{ action.label || action.id }}\n                          }\n                        </button>\n                      }\n                    }\n                  }\n                </div>\n              }\n            } @else if (column.slot === \"actions\") {\n              @if ((visibleActions(item, \"actions\") || []).length) {\n                <div\n                  class=\"list-item-actions\"\n                  (click)=\"$event.stopPropagation()\"\n                  (keydown.enter)=\"onActionKeydown($event)\"\n                  (keydown.space)=\"onActionKeydown($event)\"\n                >\n                  @for (\n                    action of visibleActions(item, \"actions\");\n                    let aidx = $index;\n                    track action?.id ?? $index\n                  ) {\n                    @if ((action.kind || \"icon\") === \"icon\") {\n                      <button\n                        mat-icon-button\n                        [color]=\"\n                          isThemeColor(action.color) ? action.color : undefined\n                        \"\n                        (click)=\"onActionClick($event, action.id, item, index)\"\n                        [attr.aria-label]=\"action.label || action.id\"\n                        [disabled]=\"isActionLoading(action.id, item, index)\"\n                        [ngClass]=\"{\n                          'action-loading': isActionLoading(\n                            action.id,\n                            item,\n                            index\n                          ),\n                        }\"\n                      >\n                        @if (isActionLoading(action.id, item, index)) {\n                          <mat-progress-spinner\n                            class=\"action-spinner\"\n                            mode=\"indeterminate\"\n                            diameter=\"16\"\n                            strokeWidth=\"3\"\n                          ></mat-progress-spinner>\n                        } @else {\n                          <mat-icon\n                            [praxisIcon]=\"action.icon\"\n                            [style.cssText]=\"iconStyle(action.color)\"\n                          ></mat-icon>\n                        }\n                      </button>\n                    } @else {\n                      @if (action.buttonVariant === \"stroked\") {\n                        <button\n                          mat-stroked-button\n                          [color]=\"\n                            isThemeColor(action.color) ? action.color : undefined\n                          \"\n                          [style.cssText]=\"buttonStyle(action.color, 'stroked')\"\n                          (click)=\"onActionClick($event, action.id, item, index)\"\n                          [attr.aria-label]=\"action.label || action.id\"\n                          [disabled]=\"isActionLoading(action.id, item, index)\"\n                          [ngClass]=\"{\n                            'action-loading': isActionLoading(\n                              action.id,\n                              item,\n                              index\n                            ),\n                          }\"\n                        >\n                          @if (isActionLoading(action.id, item, index)) {\n                            <mat-progress-spinner\n                              class=\"action-spinner\"\n                              mode=\"indeterminate\"\n                              diameter=\"16\"\n                              strokeWidth=\"3\"\n                            ></mat-progress-spinner>\n                          } @else {\n                            {{ action.label || action.id }}\n                          }\n                        </button>\n                      }\n                      @if (action.buttonVariant === \"raised\") {\n                        <button\n                          mat-raised-button\n                          [color]=\"\n                            isThemeColor(action.color) ? action.color : undefined\n                          \"\n                          [style.cssText]=\"buttonStyle(action.color, 'raised')\"\n                          (click)=\"onActionClick($event, action.id, item, index)\"\n                          [attr.aria-label]=\"action.label || action.id\"\n                          [disabled]=\"isActionLoading(action.id, item, index)\"\n                          [ngClass]=\"{\n                            'action-loading': isActionLoading(\n                              action.id,\n                              item,\n                              index\n                            ),\n                          }\"\n                        >\n                          @if (isActionLoading(action.id, item, index)) {\n                            <mat-progress-spinner\n                              class=\"action-spinner\"\n                              mode=\"indeterminate\"\n                              diameter=\"16\"\n                              strokeWidth=\"3\"\n                            ></mat-progress-spinner>\n                          } @else {\n                            {{ action.label || action.id }}\n                          }\n                        </button>\n                      }\n                      @if (!action.buttonVariant || action.buttonVariant === \"flat\") {\n                        <button\n                          mat-flat-button\n                          [color]=\"\n                            isThemeColor(action.color) ? action.color : undefined\n                          \"\n                          [style.cssText]=\"buttonStyle(action.color, 'flat')\"\n                          (click)=\"onActionClick($event, action.id, item, index)\"\n                          [attr.aria-label]=\"action.label || action.id\"\n                          [disabled]=\"isActionLoading(action.id, item, index)\"\n                          [ngClass]=\"{\n                            'action-loading': isActionLoading(\n                              action.id,\n                              item,\n                              index\n                            ),\n                          }\"\n                        >\n                          @if (isActionLoading(action.id, item, index)) {\n                            <mat-progress-spinner\n                              class=\"action-spinner\"\n                              mode=\"indeterminate\"\n                              diameter=\"16\"\n                              strokeWidth=\"3\"\n                            ></mat-progress-spinner>\n                          } @else {\n                            {{ action.label || action.id }}\n                          }\n                        </button>\n                      }\n                    }\n                  }\n                </div>\n              }\n            } @else if (column.slot === \"expand\") {\n              @if (showExpandIcon(\"expand\")) {\n                <button\n                  mat-icon-button\n                  type=\"button\"\n                  class=\"expand-toggle\"\n                  [attr.aria-label]=\"expandToggleAriaLabel(item, index)\"\n                  [attr.aria-expanded]=\"\n                    expansionOwnedByIcon() ? isExpanded(item, index) : null\n                  \"\n                  [attr.aria-controls]=\"\n                    expansionOwnedByIcon()\n                      ? expandRegionId(item, index)\n                      : null\n                  \"\n                  (click)=\"onExpandToggle($event, item, index)\"\n                >\n                  <mat-icon\n                    [praxisIcon]=\"\n                      isExpanded(item, index) ? 'expand_less' : 'expand_more'\n                    \"\n                  ></mat-icon>\n                </button>\n              }\n            } @else if (rowLayoutSlot(item, column.slot); as slotNode) {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  rowLayoutNode;\n                  context: {\n                    $implicit: slotNode,\n                    slot: column.slot,\n                    imageAlt: rowLayoutImageAlt(column.slot),\n                  }\n                \"\n              ></ng-container>\n            }\n          </div>\n        }\n      </div>\n    </ng-template>\n\n    <!-- List variant -->\n    @if (isListVariant()) {\n      <!-- Selection list -->\n      @if (isSelectionEnabled()) {\n        <mat-selection-list\n          [multiple]=\"config.selection?.mode === 'multiple'\"\n          [formControl]=\"boundControl\"\n          (selectionChange)=\"onSelectionChange($event)\"\n        >\n          @for (\n            section of sections$ | async;\n            track trackBySection($index, section)\n          ) {\n            @if (section.key) {\n              <div class=\"section-header mat-subheader\">\n                @if (sectionHeaderTemplate(section.key); as sh) {\n                  @if (\n                    simpleRichContentNodes(sh, {\n                      imageAlt: config.templating?.sectionHeader?.imageAlt || \"\",\n                    });\n                    as richNodes\n                  ) {\n                    <praxis-rich-content [nodes]=\"richNodes\"></praxis-rich-content>\n                  } @else {\n                    @switch (sh.type) {\n                      @case (\"icon\") {\n                        <mat-icon\n                          [praxisIcon]=\"sh.value\"\n                          [ngClass]=\"sh.class\"\n                          [color]=\"isThemeColor(sh.color) ? sh.color : undefined\"\n                          [style.cssText]=\"\n                            (sh.style ? sh.style + ';' : '') + iconStyle(sh.color)\n                          \"\n                        ></mat-icon>\n                      }\n                      @case (\"image\") {\n                        <span\n                          class=\"inline-image\"\n                          [ngClass]=\"sh.class\"\n                          [style.cssText]=\"sh.style\"\n                        >\n                          <img\n                            [src]=\"sh.value\"\n                            [alt]=\"\n                              config.templating?.sectionHeader?.imageAlt || ''\n                            \"\n                          />\n                          @if (sh.badge?.value) {\n                            <mat-chip\n                              class=\"inline-badge\"\n                              [color]=\"\n                                isThemeColor(sh.badge?.color)\n                                  ? sh.badge?.color\n                                  : undefined\n                              \"\n                              [ngClass]=\"\n                                (sh.badge?.variant || 'filled') === 'outlined'\n                                  ? 'chip-outlined'\n                                  : ''\n                              \"\n                              [style.cssText]=\"\n                                chipStyle(sh.badge?.color, sh.badge?.variant)\n                              \"\n                              >{{ sh.badge?.value }}</mat-chip\n                            >\n                          }\n                        </span>\n                      }\n                      @case (\"chip\") {\n                        <mat-chip\n                          [color]=\"isThemeColor(sh.color) ? sh.color : undefined\"\n                          [ngClass]=\"[\n                            sh.class || '',\n                            (sh.variant || 'filled') === 'outlined'\n                              ? 'chip-outlined'\n                              : '',\n                          ]\"\n                          [style.cssText]=\"\n                            chipStyle(sh.color, sh.variant) +\n                            (sh.style ? ';' + sh.style : '')\n                          \"\n                          >{{ sh.value }}</mat-chip\n                        >\n                      }\n                      @case (\"rating\") {\n                        <span [ngClass]=\"sh.class\" [style.cssText]=\"sh.style\">\n                          @for (\n                            _ of ratingRange(sh);\n                            track $index;\n                            let idx = $index\n                          ) {\n                            <mat-icon\n                              [praxisIcon]=\"starIcon(idx, sh.value)\"\n                              [color]=\"ratingThemeColor(sh)\"\n                              [style.cssText]=\"ratingIconStyle(sh)\"\n                            ></mat-icon>\n                          }\n                        </span>\n                      }\n                      @case (\"html\") {\n                        <span\n                          [ngClass]=\"sh.class\"\n                          [style.cssText]=\"sh.style\"\n                          [innerHTML]=\"sh.value\"\n                        ></span>\n                      }\n                      @case (\"metric\") {\n                        <praxis-list-metric [metric]=\"sh\"></praxis-list-metric>\n                      }\n                      @case (\"compose\") {\n                        <praxis-list-compose [compose]=\"sh\"></praxis-list-compose>\n                      }\n                      @case (\"component\") {\n                        <praxis-list-runtime-component\n                          [component]=\"sh\"\n                        ></praxis-list-runtime-component>\n                      }\n                      @default {\n                        <span [ngClass]=\"sh.class\" [style.cssText]=\"sh.style\">{{\n                          sh.value\n                        }}</span>\n                      }\n                    }\n                  }\n                }\n              </div>\n            }\n            @for (\n              item of section.items;\n              track trackByItem($index, item);\n              let i = $index\n            ) {\n              <mat-list-option\n                [value]=\"item\"\n                [attr.aria-label]=\"itemAriaLabel(item)\"\n              >\n                @if (hasRowLayoutGrid()) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      listRowLayout;\n                      context: {\n                        $implicit: item,\n                        index: i,\n                        sectionKey: section.key || undefined,\n                        clickable: false,\n                      }\n                    \"\n                  ></ng-container>\n                } @else {\n                <div\n                  class=\"list-item-content\"\n                  [ngClass]=\"itemRuleClass(item)\"\n                  [attr.style]=\"itemRuleStyle(item)\"\n                >\n                  <div class=\"list-item-leading\">\n                    @if (leading(item); as lead) {\n                      @if (\n                        simpleRichContentNodes(lead, {\n                          imageAlt: config.templating?.leading?.imageAlt || \"\",\n                        });\n                        as richNodes\n                      ) {\n                        <praxis-rich-content [nodes]=\"richNodes\"></praxis-rich-content>\n                      } @else {\n                      @switch (lead.type) {\n                        @case (\"icon\") {\n                          <mat-icon\n                            [praxisIcon]=\"lead.value\"\n                            [ngClass]=\"lead.class\"\n                            [color]=\"\n                              isThemeColor(lead.color) ? lead.color : undefined\n                            \"\n                            [style.cssText]=\"\n                              (lead.style ? lead.style + ';' : '') +\n                              iconStyle(lead.color)\n                            \"\n                          ></mat-icon>\n                        }\n                        @case (\"image\") {\n                          <div\n                            class=\"lead-image\"\n                            [ngClass]=\"lead.class\"\n                            [style.cssText]=\"lead.style\"\n                          >\n                            <img\n                              [src]=\"lead.value\"\n                              [alt]=\"config.templating?.leading?.imageAlt || ''\"\n                            />\n                            @if (lead.badge?.value) {\n                              <mat-chip\n                                class=\"lead-badge\"\n                                [color]=\"\n                                  isThemeColor(lead.badge?.color)\n                                    ? lead.badge?.color\n                                    : undefined\n                                \"\n                                [ngClass]=\"\n                                  (lead.badge?.variant || 'filled') ===\n                                  'outlined'\n                                    ? 'chip-outlined'\n                                    : ''\n                                \"\n                                [style.cssText]=\"\n                                  chipStyle(\n                                    lead.badge?.color,\n                                    lead.badge?.variant\n                                  )\n                                \"\n                                >{{ lead.badge?.value }}</mat-chip\n                              >\n                            }\n                          </div>\n                        }\n                        @case (\"text\") {\n                          <span\n                            [ngClass]=\"lead.class\"\n                            [style.cssText]=\"lead.style\"\n                            >{{ lead.value }}</span\n                          >\n                        }\n                        @case (\"chip\") {\n                          <mat-chip\n                            [color]=\"\n                              isThemeColor(lead.color) ? lead.color : undefined\n                            \"\n                            [ngClass]=\"\n                              (lead.variant || 'filled') === 'outlined'\n                                ? 'chip-outlined'\n                                : ''\n                            \"\n                            [style.cssText]=\"\n                              chipStyle(lead.color, lead.variant)\n                            \"\n                            >{{ lead.value }}</mat-chip\n                          >\n                        }\n                        @case (\"rating\") {\n                          <span\n                            [ngClass]=\"lead.class\"\n                            [style.cssText]=\"lead.style\"\n                          >\n                            @for (\n                              _ of ratingRange(lead);\n                              track $index;\n                              let idx = $index\n                            ) {\n                              <mat-icon\n                                [praxisIcon]=\"starIcon(idx, lead.value)\"\n                                [color]=\"ratingThemeColor(lead)\"\n                                [style.cssText]=\"ratingIconStyle(lead)\"\n                              ></mat-icon>\n                            }\n                          </span>\n                        }\n                        @case (\"html\") {\n                          <span\n                            [ngClass]=\"lead.class\"\n                            [style.cssText]=\"lead.style\"\n                            [innerHTML]=\"lead.value\"\n                          ></span>\n                        }\n                        @case (\"metric\") {\n                          <praxis-list-metric [metric]=\"lead\"></praxis-list-metric>\n                        }\n                        @case (\"compose\") {\n                          <praxis-list-compose\n                            [compose]=\"lead\"\n                          ></praxis-list-compose>\n                        }\n                        @case (\"component\") {\n                          <praxis-list-runtime-component\n                            [component]=\"lead\"\n                          ></praxis-list-runtime-component>\n                        }\n                        @default {\n                          <span\n                            [ngClass]=\"lead.class\"\n                            [style.cssText]=\"lead.style\"\n                            >{{ lead.value }}</span\n                          >\n                        }\n                      }\n                      }\n                    } @else {\n                      <span class=\"leading-placeholder\"></span>\n                    }\n                  </div>\n                  <div class=\"list-item-text\">\n                    <div\n                      class=\"primary\"\n                      [ngClass]=\"primary(item)?.class\"\n                      [style.cssText]=\"primary(item)?.style\"\n                    >\n                      @if (simpleRichContentNodes(primary(item)); as richNodes) {\n                        <praxis-rich-content [nodes]=\"richNodes\"></praxis-rich-content>\n                      } @else if (primary(item)?.type === \"metric\") {\n                        <praxis-list-metric\n                          [metric]=\"primary(item)\"\n                        ></praxis-list-metric>\n                      } @else if (primary(item)?.type === \"compose\") {\n                        <praxis-list-compose\n                          [compose]=\"primary(item)\"\n                        ></praxis-list-compose>\n                      } @else if (primary(item)?.type === \"component\") {\n                        <praxis-list-runtime-component\n                          [component]=\"primary(item)\"\n                        ></praxis-list-runtime-component>\n                      } @else {\n                        {{ primary(item)?.value }}\n                      }\n                    </div>\n                    @if (layoutLines > 1) {\n                      <div\n                        class=\"secondary\"\n                        [ngClass]=\"secondary(item)?.class\"\n                        [style.cssText]=\"secondary(item)?.style\"\n                      >\n                        @if (simpleRichContentNodes(secondary(item)); as richNodes) {\n                          <praxis-rich-content [nodes]=\"richNodes\"></praxis-rich-content>\n                        } @else if (secondary(item)?.type === \"metric\") {\n                          <praxis-list-metric\n                            [metric]=\"secondary(item)\"\n                          ></praxis-list-metric>\n                        } @else if (secondary(item)?.type === \"compose\") {\n                          <praxis-list-compose\n                            [compose]=\"secondary(item)\"\n                          ></praxis-list-compose>\n                        } @else if (secondary(item)?.type === \"component\") {\n                          <praxis-list-runtime-component\n                            [component]=\"secondary(item)\"\n                          ></praxis-list-runtime-component>\n                        } @else {\n                          {{ secondary(item)?.value }}\n                        }\n                      </div>\n                    }\n                    @if (meta(item); as m) {\n                      @if (\n                        (config.templating?.metaPlacement === \"line\" &&\n                          (m?.type === \"text\" ||\n                            m?.type === \"date\" ||\n                            m?.type === \"currency\")) ||\n                        (layoutLines > 2 &&\n                          (m?.type === \"text\" ||\n                            m?.type === \"date\" ||\n                            m?.type === \"currency\"))\n                      ) {\n                        <div\n                          class=\"tertiary\"\n                          [ngClass]=\"m.class\"\n                          [style.cssText]=\"m.style\"\n                        >\n                          @if (config.templating?.metaPrefixIcon; as mpi) {\n                            <mat-icon [praxisIcon]=\"mpi\"></mat-icon>\n                          }\n                          {{ m.value }}\n                        </div>\n                      }\n                    }\n                    @if (featuresVisible()) {\n                      <div class=\"features\">\n                        @for (\n                          f of config.templating?.features || [];\n                          track $index;\n                          let fi = $index\n                        ) {\n                          <span\n                            class=\"feature\"\n                            [ngClass]=\"\n                              featureSemanticClass(item, f.expr, f.class)\n                            \"\n                          >\n                            @if (featureRichContentNodes(item, f); as featureNodes) {\n                              <praxis-rich-content [nodes]=\"featureNodes\"></praxis-rich-content>\n                            } @else {\n                              @if (f.icon && featuresMode() !== \"labels-only\") {\n                                <mat-icon [praxisIcon]=\"f.icon\"></mat-icon>\n                              }\n                              @if (featuresMode() !== \"icons-only\") {\n                                <span\n                                  [ngClass]=\"f.class\"\n                                  [style.cssText]=\"f.style\"\n                                >\n                                  @for (\n                                    line of featureLabelLines(item, f.expr);\n                                    track $index\n                                  ) {\n                                    <span class=\"feature-line\">{{ line }}</span>\n                                  }\n                                </span>\n                              }\n                            }\n                            @if (\n                              featureProgressPercent(item, f.expr, f.class);\n                              as progress\n                            ) {\n                              <span class=\"feature-progress\" aria-hidden=\"true\">\n                                <span\n                                  class=\"feature-progress__value\"\n                                  [style.width.%]=\"progress\"\n                                ></span>\n                              </span>\n                            }\n                          </span>\n                        }\n                      </div>\n                    }\n                  </div>\n                  <div class=\"list-item-trailing\">\n                    @if (meta(item); as m) {\n                      @if (\n                        !(\n                          (config.templating?.metaPlacement === \"line\" ||\n                            layoutLines > 2) &&\n                          (m?.type === \"text\" ||\n                            m?.type === \"date\" ||\n                            m?.type === \"currency\")\n                        )\n                      ) {\n                        <div\n                          class=\"meta\"\n                          [ngClass]=\"m.class\"\n                          [style.cssText]=\"m.style\"\n                        >\n                          @if (simpleRichContentNodes(m, { slot: 'meta' }); as richNodes) {\n                            <praxis-rich-content [nodes]=\"richNodes\"></praxis-rich-content>\n                          } @else {\n                          @switch (m.type) {\n                            @case (\"chip\") {\n                              <mat-chip\n                                [color]=\"\n                                  isThemeColor(m.color) ? m.color : undefined\n                                \"\n                                [ngClass]=\"\n                                  (m.variant || 'filled') === 'outlined'\n                                    ? 'chip-outlined'\n                                    : ''\n                                \"\n                                [style.cssText]=\"chipStyle(m.color, m.variant)\"\n                                >{{ m.value }}</mat-chip\n                              >\n                            }\n                            @case (\"rating\") {\n                              @for (\n                                _ of ratingRange(m);\n                                track $index;\n                                let idx = $index\n                              ) {\n                                <mat-icon\n                                  [praxisIcon]=\"starIcon(idx, m.value)\"\n                                  [color]=\"ratingThemeColor(m)\"\n                                  [style.cssText]=\"ratingIconStyle(m)\"\n                                ></mat-icon>\n                              }\n                            }\n                            @case (\"icon\") {\n                              <mat-icon\n                                [praxisIcon]=\"m.value\"\n                                [color]=\"\n                                  isThemeColor(m.color) ? m.color : undefined\n                                \"\n                                [style.cssText]=\"iconStyle(m.color)\"\n                              ></mat-icon>\n                            }\n                            @case (\"image\") {\n                              <span class=\"inline-image\"\n                                ><img [src]=\"m.value\" [alt]=\"m.imageAlt || ''\"\n                              /></span>\n                            }\n                            @case (\"html\") {\n                              <span [innerHTML]=\"m.value\"></span>\n                            }\n                            @case (\"metric\") {\n                              <praxis-list-metric [metric]=\"m\"></praxis-list-metric>\n                            }\n                            @case (\"compose\") {\n                              <praxis-list-compose\n                                [compose]=\"m\"\n                              ></praxis-list-compose>\n                            }\n                            @case (\"component\") {\n                              <praxis-list-runtime-component\n                                [component]=\"m\"\n                              ></praxis-list-runtime-component>\n                            }\n                            @default {\n                              <span>\n                                @if (\n                                  config.templating?.metaPrefixIcon;\n                                  as mpi2\n                                ) {\n                                  <mat-icon [praxisIcon]=\"mpi2\"></mat-icon>\n                                }\n                                {{ m.value }}</span\n                              >\n                            }\n                          }\n                          }\n                        </div>\n                      }\n                    }\n                    @if (trailing(item); as tr) {\n                      <div\n                        class=\"trailing\"\n                        [ngClass]=\"tr.class\"\n                        [style.cssText]=\"tr.style\"\n                      >\n                        @if (\n                          simpleRichContentNodes(tr, {\n                            imageAlt: config.templating?.trailing?.imageAlt || \"\",\n                          });\n                          as richNodes\n                        ) {\n                          <praxis-rich-content [nodes]=\"richNodes\"></praxis-rich-content>\n                        } @else {\n                        @switch (tr.type) {\n                          @case (\"chip\") {\n                            <mat-chip\n                              [color]=\"\n                                isThemeColor(tr.color) ? tr.color : undefined\n                              \"\n                              [ngClass]=\"\n                                (tr.variant || 'filled') === 'outlined'\n                                  ? 'chip-outlined'\n                                  : ''\n                              \"\n                              [style.cssText]=\"chipStyle(tr.color, tr.variant)\"\n                              >{{ tr.value }}</mat-chip\n                            >\n                          }\n                          @case (\"icon\") {\n                            <mat-icon\n                              [praxisIcon]=\"tr.value\"\n                              [color]=\"\n                                isThemeColor(tr.color) ? tr.color : undefined\n                              \"\n                              [style.cssText]=\"iconStyle(tr.color)\"\n                            ></mat-icon>\n                          }\n                          @case (\"image\") {\n                            <div\n                              class=\"lead-image\"\n                              [ngClass]=\"tr.class\"\n                              [style.cssText]=\"tr.style\"\n                            >\n                              <img\n                                [src]=\"tr.value\"\n                                [alt]=\"\n                                  config.templating?.trailing?.imageAlt || ''\n                                \"\n                              />\n                              @if (tr.badge?.value) {\n                                <mat-chip\n                                  class=\"lead-badge\"\n                                  [color]=\"\n                                    isThemeColor(tr.badge?.color)\n                                      ? tr.badge?.color\n                                      : undefined\n                                  \"\n                                  [ngClass]=\"\n                                    (tr.badge?.variant || 'filled') ===\n                                    'outlined'\n                                      ? 'chip-outlined'\n                                      : ''\n                                  \"\n                                  [style.cssText]=\"\n                                    chipStyle(\n                                      tr.badge?.color,\n                                      tr.badge?.variant\n                                    )\n                                  \"\n                                  >{{ tr.badge?.value }}</mat-chip\n                                >\n                              }\n                            </div>\n                          }\n                          @case (\"rating\") {\n                            @for (\n                              _ of ratingRange(tr);\n                              track $index;\n                              let idx = $index\n                            ) {\n                              <mat-icon\n                                [praxisIcon]=\"starIcon(idx, tr.value)\"\n                                [color]=\"ratingThemeColor(tr)\"\n                                [style.cssText]=\"ratingIconStyle(tr)\"\n                              ></mat-icon>\n                            }\n                          }\n                          @case (\"html\") {\n                            @if (item.alertsData !== undefined && item.ownerName) {\n                              <!-- Component-based rendering for executive trailing -->\n                              <span class=\"exec-trailing-shell\">\n                                <praxis-executive-alerts [alerts]=\"item.alertsData\"></praxis-executive-alerts>\n                                <praxis-executive-owner [name]=\"item.ownerName\"></praxis-executive-owner>\n                              </span>\n                            } @else {\n                              <span [innerHTML]=\"tr.value\"></span>\n                            }\n                          }\n                          @case (\"metric\") {\n                            <praxis-list-metric [metric]=\"tr\"></praxis-list-metric>\n                          }\n                          @case (\"compose\") {\n                            <praxis-list-compose\n                              [compose]=\"tr\"\n                            ></praxis-list-compose>\n                          }\n                          @case (\"component\") {\n                            <praxis-list-runtime-component\n                              [component]=\"tr\"\n                            ></praxis-list-runtime-component>\n                          }\n                          @default {\n                            <span>{{ tr.value }}</span>\n                          }\n                        }\n                        }\n                      </div>\n                    }\n                    @if (showExpandIcon(\"trailing\")) {\n                      <button\n                        mat-icon-button\n                        type=\"button\"\n                        class=\"expand-toggle\"\n                        [attr.aria-label]=\"expandToggleAriaLabel(item, i)\"\n                        [attr.aria-expanded]=\"\n                          expansionOwnedByIcon() ? isExpanded(item, i) : null\n                        \"\n                        [attr.aria-controls]=\"\n                          expansionOwnedByIcon()\n                            ? expandRegionId(item, i)\n                            : null\n                        \"\n                        (click)=\"onExpandToggle($event, item, i)\"\n                      >\n                        <mat-icon\n                          [praxisIcon]=\"\n                            isExpanded(item, i) ? 'expand_less' : 'expand_more'\n                          \"\n                        ></mat-icon>\n                      </button>\n                    }\n                    @if ((visibleActions(item, \"trailing\") || []).length) {\n                      <div\n                        class=\"list-item-actions\"\n                        (click)=\"$event.stopPropagation()\"\n                        (keydown.enter)=\"onActionKeydown($event)\"\n                        (keydown.space)=\"onActionKeydown($event)\"\n                      >\n                        @for (\n                          action of visibleActions(item, \"trailing\");\n                          let aidx = $index;\n                          track action?.id ?? $index\n                        ) {\n                          @if ((action.kind || \"icon\") === \"icon\") {\n                            <button\n                              mat-icon-button\n                              [color]=\"\n                                isThemeColor(action.color)\n                                  ? action.color\n                                  : undefined\n                              \"\n                              (click)=\"\n                                onActionClick($event, action.id, item, i)\n                              \"\n                              [attr.aria-label]=\"action.label || action.id\"\n                              [disabled]=\"isActionLoading(action.id, item, i)\"\n                              [ngClass]=\"{\n                                'action-loading': isActionLoading(\n                                  action.id,\n                                  item,\n                                  i\n                                ),\n                              }\"\n                            >\n                              @if (isActionLoading(action.id, item, i)) {\n                                <mat-progress-spinner\n                                  class=\"action-spinner\"\n                                  mode=\"indeterminate\"\n                                  diameter=\"16\"\n                                  strokeWidth=\"3\"\n                                ></mat-progress-spinner>\n                              } @else {\n                                <mat-icon\n                                  [praxisIcon]=\"action.icon\"\n                                  [style.cssText]=\"iconStyle(action.color)\"\n                                ></mat-icon>\n                              }\n                            </button>\n                          } @else {\n                            @if (action.buttonVariant === \"stroked\") {\n                              <button\n                                mat-stroked-button\n                                [color]=\"\n                                  isThemeColor(action.color)\n                                    ? action.color\n                                    : undefined\n                                \"\n                                [style.cssText]=\"\n                                  buttonStyle(action.color, 'stroked')\n                                \"\n                                (click)=\"\n                                  onActionClick($event, action.id, item, i)\n                                \"\n                                [attr.aria-label]=\"action.label || action.id\"\n                                [disabled]=\"isActionLoading(action.id, item, i)\"\n                                [ngClass]=\"{\n                                  'action-loading': isActionLoading(\n                                    action.id,\n                                    item,\n                                    i\n                                  ),\n                                }\"\n                              >\n                                @if (isActionLoading(action.id, item, i)) {\n                                  <mat-progress-spinner\n                                    class=\"action-spinner\"\n                                    mode=\"indeterminate\"\n                                    diameter=\"16\"\n                                    strokeWidth=\"3\"\n                                  ></mat-progress-spinner>\n                                } @else {\n                                  {{ action.label || action.id }}\n                                }\n                              </button>\n                            }\n                            @if (action.buttonVariant === \"raised\") {\n                              <button\n                                mat-raised-button\n                                [color]=\"\n                                  isThemeColor(action.color)\n                                    ? action.color\n                                    : undefined\n                                \"\n                                [style.cssText]=\"\n                                  buttonStyle(action.color, 'raised')\n                                \"\n                                (click)=\"\n                                  onActionClick($event, action.id, item, i)\n                                \"\n                                [attr.aria-label]=\"action.label || action.id\"\n                                [disabled]=\"isActionLoading(action.id, item, i)\"\n                                [ngClass]=\"{\n                                  'action-loading': isActionLoading(\n                                    action.id,\n                                    item,\n                                    i\n                                  ),\n                                }\"\n                              >\n                                @if (isActionLoading(action.id, item, i)) {\n                                  <mat-progress-spinner\n                                    class=\"action-spinner\"\n                                    mode=\"indeterminate\"\n                                    diameter=\"16\"\n                                    strokeWidth=\"3\"\n                                  ></mat-progress-spinner>\n                                } @else {\n                                  {{ action.label || action.id }}\n                                }\n                              </button>\n                            }\n                            @if (\n                              !action.buttonVariant ||\n                              action.buttonVariant === \"flat\"\n                            ) {\n                              <button\n                                mat-flat-button\n                                [color]=\"\n                                  isThemeColor(action.color)\n                                    ? action.color\n                                    : undefined\n                                \"\n                                [style.cssText]=\"\n                                  buttonStyle(action.color, 'flat')\n                                \"\n                                (click)=\"\n                                  onActionClick($event, action.id, item, i)\n                                \"\n                                [attr.aria-label]=\"action.label || action.id\"\n                                [disabled]=\"isActionLoading(action.id, item, i)\"\n                                [ngClass]=\"{\n                                  'action-loading': isActionLoading(\n                                    action.id,\n                                    item,\n                                    i\n                                  ),\n                                }\"\n                              >\n                                @if (isActionLoading(action.id, item, i)) {\n                                  <mat-progress-spinner\n                                    class=\"action-spinner\"\n                                    mode=\"indeterminate\"\n                                    diameter=\"16\"\n                                    strokeWidth=\"3\"\n                                  ></mat-progress-spinner>\n                                } @else {\n                                  {{ action.label || action.id }}\n                                }\n                              </button>\n                            }\n                          }\n                        }\n                      </div>\n                    }\n                  </div>\n                </div>\n                }\n                @if (isExpandable() && isExpanded(item, i)) {\n                  <div\n                    class=\"item-expansion\"\n                    [id]=\"expandRegionId(item, i)\"\n                    role=\"region\"\n                    [attr.aria-label]=\"expansionRegionAriaLabel(item)\"\n                  >\n                    <div class=\"item-expansion-grid\">\n                      @for (\n                        expansionSection of expansionSections(item);\n                        track expansionSection.id\n                      ) {\n                        <section\n                          class=\"expansion-section\"\n                          [attr.data-section-type]=\"expansionSection.type\"\n                        >\n                          @if (expansionSection.title) {\n                            <div class=\"expansion-section-title\">\n                              {{ expansionSection.title }}\n                            </div>\n                          }\n                          @if (\n                            expansionSectionHasContent(\n                              item,\n                              expansionSection,\n                              i\n                            )\n                          ) {\n                            @switch (expansionSection.type) {\n                              @case (\"chip-list\") {\n                                <div class=\"expansion-chip-list\">\n                                  @for (\n                                    expansionEntry of expansionSectionItems(\n                                      item,\n                                      expansionSection,\n                                      i\n                                    );\n                                    track $index\n                                  ) {\n                                    <mat-chip class=\"expansion-chip\">{{\n                                      expansionItemLabel(expansionEntry)\n                                    }}</mat-chip>\n                                  }\n                                </div>\n                              }\n                              @case (\"timeline\") {\n                                <div class=\"expansion-timeline\">\n                                  @for (\n                                    expansionEntry of expansionSectionItems(\n                                      item,\n                                      expansionSection,\n                                      i\n                                    );\n                                    track $index\n                                  ) {\n                                    <div class=\"expansion-timeline-item\">\n                                      <div class=\"expansion-timeline-title\">\n                                        {{\n                                          expansionTimelineTitle(expansionEntry)\n                                        }}\n                                      </div>\n                                      @if (\n                                        expansionTimelineMeta(expansionEntry)\n                                      ) {\n                                        <div class=\"expansion-timeline-meta\">\n                                          {{\n                                            expansionTimelineMeta(\n                                              expansionEntry\n                                            )\n                                          }}\n                                        </div>\n                                      }\n                                      @if (\n                                        expansionTimelineDescription(\n                                          expansionEntry\n                                        )\n                                      ) {\n                                        <div\n                                          class=\"expansion-timeline-description\"\n                                        >\n                                          {{\n                                            expansionTimelineDescription(\n                                              expansionEntry\n                                            )\n                                          }}\n                                        </div>\n                                      }\n                                    </div>\n                                  }\n                                </div>\n                              }\n                              @case (\"key-value\") {\n                                <dl class=\"expansion-key-value\">\n                                  @for (\n                                    expansionEntry of expansionSectionItems(\n                                      item,\n                                      expansionSection,\n                                      i\n                                    );\n                                    track $index\n                                  ) {\n                                    <div class=\"expansion-key-value-row\">\n                                      @if (\n                                        expansionKeyValueKey(expansionEntry)\n                                      ) {\n                                        <dt>\n                                          {{\n                                            expansionKeyValueKey(expansionEntry)\n                                          }}\n                                        </dt>\n                                      }\n                                      <dd>\n                                        {{\n                                          expansionKeyValueValue(expansionEntry)\n                                        }}\n                                      </dd>\n                                    </div>\n                                  }\n                                </dl>\n                              }\n                              @default {\n                                <div class=\"expansion-info-list\">\n                                  @for (\n                                    expansionEntry of expansionSectionItems(\n                                      item,\n                                      expansionSection,\n                                      i\n                                    );\n                                    track $index\n                                  ) {\n                                    <div class=\"expansion-info-item\">\n                                      <div class=\"expansion-info-title\">\n                                        {{ expansionInfoTitle(expansionEntry) }}\n                                      </div>\n                                      @if (expansionInfoValue(expansionEntry)) {\n                                        <div class=\"expansion-info-value\">\n                                          {{\n                                            expansionInfoValue(expansionEntry)\n                                          }}\n                                        </div>\n                                      }\n                                    </div>\n                                  }\n                                </div>\n                              }\n                            }\n                          } @else {\n                            <div class=\"expansion-empty\">\n                              {{\n                                expansionSection.emptyLabel ||\n                                  \"Sem dados dispon\u00EDveis\"\n                              }}\n                            </div>\n                          }\n                        </section>\n                      }\n                    </div>\n                  </div>\n                }\n              </mat-list-option>\n              @if (\n                (config.layout?.dividers === \"all\" ||\n                  config.layout?.dividers === \"between\") &&\n                i < section.items.length - 1\n              ) {\n                <mat-divider></mat-divider>\n              }\n            }\n          }\n        </mat-selection-list>\n      } @else {\n        <ng-container *ngTemplateOutlet=\"readList\"></ng-container>\n      }\n\n      <!-- Read-only list -->\n      <ng-template #readList>\n        <mat-list>\n          @for (\n            section of sections$ | async;\n            track trackBySection($index, section);\n            let sidx = $index\n          ) {\n            @if (section.key) {\n              <div class=\"section-header mat-subheader\">\n                @if (sectionHeaderTemplate(section.key); as sh) {\n                  @if (\n                    simpleRichContentNodes(sh, {\n                      imageAlt: config.templating?.sectionHeader?.imageAlt || \"\",\n                    });\n                    as richNodes\n                  ) {\n                    <praxis-rich-content [nodes]=\"richNodes\"></praxis-rich-content>\n                  } @else {\n                    @switch (sh.type) {\n                      @case (\"icon\") {\n                        <mat-icon\n                          [praxisIcon]=\"sh.value\"\n                          [ngClass]=\"sh.class\"\n                          [color]=\"isThemeColor(sh.color) ? sh.color : undefined\"\n                          [style.cssText]=\"\n                            (sh.style ? sh.style + ';' : '') + iconStyle(sh.color)\n                          \"\n                        ></mat-icon>\n                      }\n                      @case (\"image\") {\n                        <span\n                          class=\"inline-image\"\n                          [ngClass]=\"sh.class\"\n                          [style.cssText]=\"sh.style\"\n                        >\n                          <img\n                            [src]=\"sh.value\"\n                            [alt]=\"\n                              config.templating?.sectionHeader?.imageAlt || ''\n                            \"\n                          />\n                          @if (sh.badge?.value) {\n                            <mat-chip\n                              class=\"inline-badge\"\n                              [color]=\"\n                                isThemeColor(sh.badge?.color)\n                                  ? sh.badge?.color\n                                  : undefined\n                              \"\n                              [ngClass]=\"\n                                (sh.badge?.variant || 'filled') === 'outlined'\n                                  ? 'chip-outlined'\n                                  : ''\n                              \"\n                              [style.cssText]=\"\n                                chipStyle(sh.badge?.color, sh.badge?.variant)\n                              \"\n                              >{{ sh.badge?.value }}</mat-chip\n                            >\n                          }\n                        </span>\n                      }\n                      @case (\"chip\") {\n                        <mat-chip\n                          [color]=\"isThemeColor(sh.color) ? sh.color : undefined\"\n                          [ngClass]=\"[\n                            sh.class || '',\n                            (sh.variant || 'filled') === 'outlined'\n                              ? 'chip-outlined'\n                              : '',\n                          ]\"\n                          [style.cssText]=\"\n                            chipStyle(sh.color, sh.variant) +\n                            (sh.style ? ';' + sh.style : '')\n                          \"\n                          >{{ sh.value }}</mat-chip\n                        >\n                      }\n                      @case (\"rating\") {\n                        <span [ngClass]=\"sh.class\" [style.cssText]=\"sh.style\">\n                          @for (\n                            _ of ratingRange(sh);\n                            track $index;\n                            let idx = $index\n                          ) {\n                            <mat-icon\n                              [praxisIcon]=\"starIcon(idx, sh.value)\"\n                              [color]=\"ratingThemeColor(sh)\"\n                              [style.cssText]=\"ratingIconStyle(sh)\"\n                            ></mat-icon>\n                          }\n                        </span>\n                      }\n                      @case (\"html\") {\n                        <span\n                          [ngClass]=\"sh.class\"\n                          [style.cssText]=\"sh.style\"\n                          [innerHTML]=\"sh.value\"\n                        ></span>\n                      }\n                      @case (\"metric\") {\n                        <praxis-list-metric [metric]=\"sh\"></praxis-list-metric>\n                      }\n                      @default {\n                        <span [ngClass]=\"sh.class\" [style.cssText]=\"sh.style\">{{\n                          sh.value\n                        }}</span>\n                      }\n                    }\n                  }\n                }\n              </div>\n            }\n            @for (\n              item of section.items;\n              track trackByItem($index, item);\n              let i = $index\n            ) {\n              <mat-list-item [attr.data-item-status]=\"item?.status || null\">\n                @if (hasRowLayoutGrid()) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      listRowLayout;\n                      context: {\n                        $implicit: item,\n                        index: i,\n                        sectionKey: section.key || undefined,\n                        clickable: true,\n                      }\n                    \"\n                  ></ng-container>\n                } @else {\n                <div\n                  class=\"list-item-content\"\n                  [ngClass]=\"itemRuleClass(item)\"\n                  [attr.style]=\"itemRuleStyle(item)\"\n                >\n                  <button\n                    type=\"button\"\n                    class=\"list-item-main-action\"\n                    [attr.aria-label]=\"itemAriaLabel(item)\"\n                    [attr.aria-expanded]=\"\n                      expansionOwnedByRow() ? isExpanded(item, i) : null\n                    \"\n                    [attr.aria-controls]=\"\n                      expansionOwnedByRow() ? expandRegionId(item, i) : null\n                    \"\n                    (click)=\"onRowActivate(item, i, section.key || undefined)\"\n                  >\n                    <div class=\"list-item-leading\">\n                      @if (leading(item); as lead) {\n                        @if (\n                          simpleRichContentNodes(lead, {\n                            imageAlt: config.templating?.leading?.imageAlt || \"\",\n                          });\n                          as richNodes\n                        ) {\n                          <praxis-rich-content [nodes]=\"richNodes\"></praxis-rich-content>\n                        } @else {\n                        @switch (lead.type) {\n                          @case (\"icon\") {\n                            <mat-icon\n                              [praxisIcon]=\"lead.value\"\n                              [ngClass]=\"lead.class\"\n                              [color]=\"\n                                isThemeColor(lead.color)\n                                  ? lead.color\n                                  : undefined\n                              \"\n                              [style.cssText]=\"\n                                (lead.style ? lead.style + ';' : '') +\n                                iconStyle(lead.color)\n                              \"\n                            ></mat-icon>\n                          }\n                          @case (\"image\") {\n                            <div\n                              class=\"lead-image\"\n                              [ngClass]=\"lead.class\"\n                              [style.cssText]=\"lead.style\"\n                            >\n                              <img\n                                [src]=\"lead.value\"\n                                [alt]=\"\n                                  config.templating?.leading?.imageAlt || ''\n                                \"\n                              />\n                              @if (lead.badge?.value) {\n                                <mat-chip\n                                  class=\"lead-badge\"\n                                  [color]=\"\n                                    isThemeColor(lead.badge?.color)\n                                      ? lead.badge?.color\n                                      : undefined\n                                  \"\n                                  [ngClass]=\"\n                                    (lead.badge?.variant || 'filled') ===\n                                    'outlined'\n                                      ? 'chip-outlined'\n                                      : ''\n                                  \"\n                                  [style.cssText]=\"\n                                    chipStyle(\n                                      lead.badge?.color,\n                                      lead.badge?.variant\n                                    )\n                                  \"\n                                  >{{ lead.badge?.value }}</mat-chip\n                                >\n                              }\n                            </div>\n                          }\n                          @case (\"text\") {\n                            <span\n                              [ngClass]=\"lead.class\"\n                              [style.cssText]=\"lead.style\"\n                              >{{ lead.value }}</span\n                            >\n                          }\n                          @case (\"chip\") {\n                            <mat-chip\n                              [color]=\"\n                                isThemeColor(lead.color)\n                                  ? lead.color\n                                  : undefined\n                              \"\n                              [ngClass]=\"\n                                (lead.variant || 'filled') === 'outlined'\n                                  ? 'chip-outlined'\n                                  : ''\n                              \"\n                              [style.cssText]=\"\n                                chipStyle(lead.color, lead.variant)\n                              \"\n                              >{{ lead.value }}</mat-chip\n                            >\n                          }\n                          @case (\"rating\") {\n                            @for (\n                              _ of ratingRange(lead);\n                              track $index;\n                              let idx = $index\n                            ) {\n                              <mat-icon\n                                [praxisIcon]=\"starIcon(idx, lead.value)\"\n                                [color]=\"ratingThemeColor(lead)\"\n                                [style.cssText]=\"ratingIconStyle(lead)\"\n                              ></mat-icon>\n                            }\n                          }\n                          @case (\"html\") {\n                            <span\n                              [ngClass]=\"lead.class\"\n                              [style.cssText]=\"lead.style\"\n                              [innerHTML]=\"lead.value\"\n                            ></span>\n                          }\n                          @case (\"metric\") {\n                            <praxis-list-metric [metric]=\"lead\"></praxis-list-metric>\n                          }\n                          @default {\n                            <span\n                              [ngClass]=\"lead.class\"\n                              [style.cssText]=\"lead.style\"\n                              >{{ lead.value }}</span\n                            >\n                          }\n                        }\n                        }\n                      } @else {\n                        <span class=\"leading-placeholder\"></span>\n                      }\n                    </div>\n                    <div class=\"list-item-text\">\n                      <div\n                        class=\"primary\"\n                        [ngClass]=\"primary(item)?.class\"\n                        [style.cssText]=\"primary(item)?.style\"\n                      >\n                        @if (simpleRichContentNodes(primary(item)); as richNodes) {\n                          <praxis-rich-content [nodes]=\"richNodes\"></praxis-rich-content>\n                        } @else if (primary(item)?.type === \"metric\") {\n                          <praxis-list-metric\n                            [metric]=\"primary(item)\"\n                          ></praxis-list-metric>\n                        } @else if (primary(item)?.type === \"html\") {\n                          <span [innerHTML]=\"primary(item)?.value\"></span>\n                        } @else {\n                          {{ primary(item)?.value }}\n                        }\n                      </div>\n                      @if (layoutLines > 1) {\n                        <div\n                          class=\"secondary\"\n                          [ngClass]=\"secondary(item)?.class\"\n                          [style.cssText]=\"secondary(item)?.style\"\n                        >\n                          @if (simpleRichContentNodes(secondary(item)); as richNodes) {\n                            <praxis-rich-content [nodes]=\"richNodes\"></praxis-rich-content>\n                          } @else if (item.segmentVariant && item.segmentLabel && item.accountType && item.since) {\n                            <!-- Component-based rendering for executive items -->\n                            <span class=\"exec-subline\">\n                                <praxis-executive-badge\n                                  [variant]=\"item.segmentVariant\"\n                                  [label]=\"item.segmentLabel\"\n                                ></praxis-executive-badge>\n                              <span class=\"exec-subcopy\">{{ item.accountType }}</span>\n                              <span class=\"exec-subseparator\">\u00B7</span>\n                              <span class=\"exec-subcopy\">Desde {{ item.since }}</span>\n                            </span>\n                          } @else if (secondary(item)?.type === \"html\") {\n                            <span [innerHTML]=\"secondary(item)?.value\"></span>\n                          } @else if (secondary(item)?.type === \"metric\") {\n                            <praxis-list-metric\n                              [metric]=\"secondary(item)\"\n                            ></praxis-list-metric>\n                          } @else {\n                            {{ secondary(item)?.value }}\n                          }\n                        </div>\n                      }\n                      @if (meta(item); as m) {\n                        @if (\n                          (config.templating?.metaPlacement === \"line\" &&\n                            (m?.type === \"text\" ||\n                              m?.type === \"date\" ||\n                              m?.type === \"currency\")) ||\n                          (layoutLines > 2 &&\n                            (m?.type === \"text\" ||\n                              m?.type === \"date\" ||\n                              m?.type === \"currency\"))\n                        ) {\n                          <div\n                            class=\"tertiary\"\n                            [ngClass]=\"m.class\"\n                            [style.cssText]=\"m.style\"\n                          >\n                            @if (config.templating?.metaPrefixIcon; as mpi) {\n                              <mat-icon [praxisIcon]=\"mpi\"></mat-icon>\n                            }\n                            {{ m.value }}\n                          </div>\n                        }\n                      }\n                      @if (featuresVisible()) {\n                        <div class=\"features\">\n                          @for (\n                            f of config.templating?.features || [];\n                            track $index;\n                            let fi = $index\n                          ) {\n                              <span\n                                class=\"feature\"\n                                [ngClass]=\"\n                                  featureSemanticClass(item, f.expr, f.class)\n                                \"\n                              >\n                              @if (featureRichContentNodes(item, f); as featureNodes) {\n                                <praxis-rich-content [nodes]=\"featureNodes\"></praxis-rich-content>\n                              } @else {\n                                @if (f.icon && featuresMode() !== \"labels-only\") {\n                                  <mat-icon [praxisIcon]=\"f.icon\"></mat-icon>\n                                }\n                                @if (featuresMode() !== \"icons-only\") {\n                                  <span\n                                    [ngClass]=\"f.class\"\n                                    [style.cssText]=\"f.style\"\n                                  >\n                                    @for (\n                                      line of featureLabelLines(item, f.expr);\n                                      track $index\n                                    ) {\n                                      <span class=\"feature-line\">{{ line }}</span>\n                                    }\n                                  </span>\n                                }\n                              }\n                              @if (\n                                featureProgressPercent(item, f.expr, f.class);\n                                as progress\n                              ) {\n                                <span\n                                  class=\"feature-progress\"\n                                  aria-hidden=\"true\"\n                                >\n                                  <span\n                                    class=\"feature-progress__value\"\n                                    [style.width.%]=\"progress\"\n                                  ></span>\n                                </span>\n                              }\n                            </span>\n                          }\n                        </div>\n                      }\n                    </div>\n                  </button>\n                  <div class=\"list-item-trailing\">\n                    @if (meta(item); as m) {\n                      @if (\n                        !(\n                          (config.templating?.metaPlacement === \"line\" ||\n                            layoutLines > 2) &&\n                          (m?.type === \"text\" ||\n                            m?.type === \"date\" ||\n                            m?.type === \"currency\")\n                        )\n                      ) {\n                        <div\n                          class=\"meta\"\n                          [ngClass]=\"m.class\"\n                          [style.cssText]=\"m.style\"\n                        >\n                          @if (simpleRichContentNodes(m, { slot: 'meta' }); as richNodes) {\n                            <praxis-rich-content [nodes]=\"richNodes\"></praxis-rich-content>\n                          } @else {\n                          @switch (m.type) {\n                            @case (\"chip\") {\n                              <mat-chip\n                                [color]=\"\n                                  isThemeColor(m.color) ? m.color : undefined\n                                \"\n                                [ngClass]=\"\n                                  (m.variant || 'filled') === 'outlined'\n                                    ? 'chip-outlined'\n                                    : ''\n                                \"\n                                [style.cssText]=\"chipStyle(m.color, m.variant)\"\n                                >{{ m.value }}</mat-chip\n                              >\n                            }\n                            @case (\"rating\") {\n                              @for (\n                                _ of ratingRange(m);\n                                track $index;\n                                let idx = $index\n                              ) {\n                                <mat-icon\n                                  [praxisIcon]=\"starIcon(idx, m.value)\"\n                                  [color]=\"ratingThemeColor(m)\"\n                                  [style.cssText]=\"ratingIconStyle(m)\"\n                                ></mat-icon>\n                              }\n                            }\n                            @case (\"icon\") {\n                              <mat-icon\n                                [praxisIcon]=\"m.value\"\n                                [color]=\"\n                                  isThemeColor(m.color) ? m.color : undefined\n                                \"\n                                [style.cssText]=\"iconStyle(m.color)\"\n                              ></mat-icon>\n                            }\n                            @case (\"image\") {\n                              <span class=\"inline-image\"\n                                ><img [src]=\"m.value\" [alt]=\"m.imageAlt || ''\"\n                              /></span>\n                            }\n                            @case (\"html\") {\n                              <span [innerHTML]=\"m.value\"></span>\n                            }\n                            @case (\"metric\") {\n                              <praxis-list-metric [metric]=\"m\"></praxis-list-metric>\n                            }\n                            @default {\n                              <span>\n                                @if (\n                                  config.templating?.metaPrefixIcon;\n                                  as mpi2\n                                ) {\n                                  <mat-icon [praxisIcon]=\"mpi2\"></mat-icon>\n                                }\n                                {{ m.value }}</span\n                              >\n                            }\n                          }\n                          }\n                        </div>\n                      }\n                    }\n                    @if (trailing(item); as tr) {\n                      <div\n                        class=\"trailing\"\n                        [ngClass]=\"tr.class\"\n                        [style.cssText]=\"tr.style\"\n                      >\n                        @if (\n                          simpleRichContentNodes(tr, {\n                            imageAlt: config.templating?.trailing?.imageAlt || \"\",\n                          });\n                          as richNodes\n                        ) {\n                          <praxis-rich-content [nodes]=\"richNodes\"></praxis-rich-content>\n                        } @else {\n                        @switch (tr.type) {\n                          @case (\"chip\") {\n                            <mat-chip\n                              [color]=\"\n                                isThemeColor(tr.color) ? tr.color : undefined\n                              \"\n                              [ngClass]=\"\n                                (tr.variant || 'filled') === 'outlined'\n                                  ? 'chip-outlined'\n                                  : ''\n                              \"\n                              [style.cssText]=\"chipStyle(tr.color, tr.variant)\"\n                              >{{ tr.value }}</mat-chip\n                            >\n                          }\n                          @case (\"icon\") {\n                            <mat-icon\n                              [praxisIcon]=\"tr.value\"\n                              [color]=\"\n                                isThemeColor(tr.color) ? tr.color : undefined\n                              \"\n                              [style.cssText]=\"iconStyle(tr.color)\"\n                            ></mat-icon>\n                          }\n                          @case (\"image\") {\n                            <div\n                              class=\"lead-image\"\n                              [ngClass]=\"tr.class\"\n                              [style.cssText]=\"tr.style\"\n                            >\n                              <img\n                                [src]=\"tr.value\"\n                                [alt]=\"\n                                  config.templating?.trailing?.imageAlt || ''\n                                \"\n                              />\n                              @if (tr.badge?.value) {\n                                <mat-chip\n                                  class=\"lead-badge\"\n                                  [color]=\"\n                                    isThemeColor(tr.badge?.color)\n                                      ? tr.badge?.color\n                                      : undefined\n                                  \"\n                                  [ngClass]=\"\n                                    (tr.badge?.variant || 'filled') ===\n                                    'outlined'\n                                      ? 'chip-outlined'\n                                      : ''\n                                  \"\n                                  [style.cssText]=\"\n                                    chipStyle(\n                                      tr.badge?.color,\n                                      tr.badge?.variant\n                                    )\n                                  \"\n                                  >{{ tr.badge?.value }}</mat-chip\n                                >\n                              }\n                            </div>\n                          }\n                          @case (\"rating\") {\n                            @for (\n                              _ of ratingRange(tr);\n                              track $index;\n                              let idx = $index\n                            ) {\n                              <mat-icon\n                                [praxisIcon]=\"starIcon(idx, tr.value)\"\n                                [color]=\"ratingThemeColor(tr)\"\n                                [style.cssText]=\"ratingIconStyle(tr)\"\n                              ></mat-icon>\n                            }\n                          }\n                          @case (\"html\") {\n                            @if (item.alertsData !== undefined && item.ownerName) {\n                              <!-- Component-based rendering for executive trailing -->\n                              <span class=\"exec-trailing-shell\">\n                                <praxis-executive-alerts [alerts]=\"item.alertsData\"></praxis-executive-alerts>\n                                <praxis-executive-owner [name]=\"item.ownerName\"></praxis-executive-owner>\n                              </span>\n                            } @else {\n                              <span [innerHTML]=\"tr.value\"></span>\n                            }\n                          }\n                          @case (\"metric\") {\n                            <praxis-list-metric [metric]=\"tr\"></praxis-list-metric>\n                          }\n                          @default {\n                            <span>{{ tr.value }}</span>\n                          }\n                        }\n                        }\n                      </div>\n                    }\n                    @if (showExpandIcon(\"trailing\")) {\n                      <button\n                        mat-icon-button\n                        type=\"button\"\n                        class=\"expand-toggle\"\n                        [attr.aria-label]=\"expandToggleAriaLabel(item, i)\"\n                        [attr.aria-expanded]=\"\n                          expansionOwnedByIcon() ? isExpanded(item, i) : null\n                        \"\n                        [attr.aria-controls]=\"\n                          expansionOwnedByIcon()\n                            ? expandRegionId(item, i)\n                            : null\n                        \"\n                        (click)=\"onExpandToggle($event, item, i)\"\n                      >\n                        <mat-icon\n                          [praxisIcon]=\"\n                            isExpanded(item, i) ? 'expand_less' : 'expand_more'\n                          \"\n                        ></mat-icon>\n                      </button>\n                    }\n                    @if ((visibleActions(item, \"trailing\") || []).length) {\n                      <div\n                        class=\"list-item-actions\"\n                        (click)=\"$event.stopPropagation()\"\n                        (keydown.enter)=\"onActionKeydown($event)\"\n                        (keydown.space)=\"onActionKeydown($event)\"\n                      >\n                        @for (\n                          action of visibleActions(item, \"trailing\");\n                          let aidx = $index;\n                          track action?.id ?? $index\n                        ) {\n                          @if ((action.kind || \"icon\") === \"icon\") {\n                            <button\n                              mat-icon-button\n                              [color]=\"\n                                isThemeColor(action.color)\n                                  ? action.color\n                                  : undefined\n                              \"\n                              (click)=\"\n                                onActionClick($event, action.id, item, i)\n                              \"\n                              [attr.aria-label]=\"action.label || action.id\"\n                              [disabled]=\"isActionLoading(action.id, item, i)\"\n                              [ngClass]=\"{\n                                'action-loading': isActionLoading(\n                                  action.id,\n                                  item,\n                                  i\n                                ),\n                              }\"\n                            >\n                              @if (isActionLoading(action.id, item, i)) {\n                                <mat-progress-spinner\n                                  class=\"action-spinner\"\n                                  mode=\"indeterminate\"\n                                  diameter=\"16\"\n                                  strokeWidth=\"3\"\n                                ></mat-progress-spinner>\n                              } @else {\n                                <mat-icon\n                                  [praxisIcon]=\"action.icon\"\n                                  [style.cssText]=\"iconStyle(action.color)\"\n                                ></mat-icon>\n                              }\n                            </button>\n                          } @else {\n                            @if (action.buttonVariant === \"stroked\") {\n                              <button\n                                mat-stroked-button\n                                [color]=\"\n                                  isThemeColor(action.color)\n                                    ? action.color\n                                    : undefined\n                                \"\n                                [style.cssText]=\"\n                                  buttonStyle(action.color, 'stroked')\n                                \"\n                                (click)=\"\n                                  onActionClick($event, action.id, item, i)\n                                \"\n                                [attr.aria-label]=\"action.label || action.id\"\n                                [disabled]=\"isActionLoading(action.id, item, i)\"\n                                [ngClass]=\"{\n                                  'action-loading': isActionLoading(\n                                    action.id,\n                                    item,\n                                    i\n                                  ),\n                                }\"\n                              >\n                                @if (isActionLoading(action.id, item, i)) {\n                                  <mat-progress-spinner\n                                    class=\"action-spinner\"\n                                    mode=\"indeterminate\"\n                                    diameter=\"16\"\n                                    strokeWidth=\"3\"\n                                  ></mat-progress-spinner>\n                                } @else {\n                                  {{ action.label || action.id }}\n                                }\n                              </button>\n                            }\n                            @if (action.buttonVariant === \"raised\") {\n                              <button\n                                mat-raised-button\n                                [color]=\"\n                                  isThemeColor(action.color)\n                                    ? action.color\n                                    : undefined\n                                \"\n                                [style.cssText]=\"\n                                  buttonStyle(action.color, 'raised')\n                                \"\n                                (click)=\"\n                                  onActionClick($event, action.id, item, i)\n                                \"\n                                [attr.aria-label]=\"action.label || action.id\"\n                                [disabled]=\"isActionLoading(action.id, item, i)\"\n                                [ngClass]=\"{\n                                  'action-loading': isActionLoading(\n                                    action.id,\n                                    item,\n                                    i\n                                  ),\n                                }\"\n                              >\n                                @if (isActionLoading(action.id, item, i)) {\n                                  <mat-progress-spinner\n                                    class=\"action-spinner\"\n                                    mode=\"indeterminate\"\n                                    diameter=\"16\"\n                                    strokeWidth=\"3\"\n                                  ></mat-progress-spinner>\n                                } @else {\n                                  {{ action.label || action.id }}\n                                }\n                              </button>\n                            }\n                            @if (\n                              !action.buttonVariant ||\n                              action.buttonVariant === \"flat\"\n                            ) {\n                              <button\n                                mat-flat-button\n                                [color]=\"\n                                  isThemeColor(action.color)\n                                    ? action.color\n                                    : undefined\n                                \"\n                                [style.cssText]=\"\n                                  buttonStyle(action.color, 'flat')\n                                \"\n                                (click)=\"\n                                  onActionClick($event, action.id, item, i)\n                                \"\n                                [attr.aria-label]=\"action.label || action.id\"\n                                [disabled]=\"isActionLoading(action.id, item, i)\"\n                                [ngClass]=\"{\n                                  'action-loading': isActionLoading(\n                                    action.id,\n                                    item,\n                                    i\n                                  ),\n                                }\"\n                              >\n                                @if (isActionLoading(action.id, item, i)) {\n                                  <mat-progress-spinner\n                                    class=\"action-spinner\"\n                                    mode=\"indeterminate\"\n                                    diameter=\"16\"\n                                    strokeWidth=\"3\"\n                                  ></mat-progress-spinner>\n                                } @else {\n                                  {{ action.label || action.id }}\n                                }\n                              </button>\n                            }\n                          }\n                        }\n                      </div>\n                    }\n                  </div>\n                </div>\n                }\n                @if (isExpandable() && isExpanded(item, i)) {\n                  <div\n                    class=\"item-expansion\"\n                    [id]=\"expandRegionId(item, i)\"\n                    role=\"region\"\n                    [attr.aria-label]=\"expansionRegionAriaLabel(item)\"\n                  >\n                    <div class=\"item-expansion-grid\">\n                      @for (\n                        expansionSection of expansionSections(item);\n                        track expansionSection.id\n                      ) {\n                        <section\n                          class=\"expansion-section\"\n                          [attr.data-section-type]=\"expansionSection.type\"\n                        >\n                          @if (expansionSection.title) {\n                            <div class=\"expansion-section-title\">\n                              {{ expansionSection.title }}\n                            </div>\n                          }\n                          @if (\n                            expansionSectionHasContent(\n                              item,\n                              expansionSection,\n                              i\n                            )\n                          ) {\n                            @switch (expansionSection.type) {\n                              @case (\"chip-list\") {\n                                <div class=\"expansion-chip-list\">\n                                  @for (\n                                    expansionEntry of expansionSectionItems(\n                                      item,\n                                      expansionSection,\n                                      i\n                                    );\n                                    track $index\n                                  ) {\n                                    <mat-chip class=\"expansion-chip\">{{\n                                      expansionItemLabel(expansionEntry)\n                                    }}</mat-chip>\n                                  }\n                                </div>\n                              }\n                              @case (\"timeline\") {\n                                <div class=\"expansion-timeline\">\n                                  @for (\n                                    expansionEntry of expansionSectionItems(\n                                      item,\n                                      expansionSection,\n                                      i\n                                    );\n                                    track $index\n                                  ) {\n                                    <div class=\"expansion-timeline-item\">\n                                      <div class=\"expansion-timeline-title\">\n                                        {{\n                                          expansionTimelineTitle(expansionEntry)\n                                        }}\n                                      </div>\n                                      @if (\n                                        expansionTimelineMeta(expansionEntry)\n                                      ) {\n                                        <div class=\"expansion-timeline-meta\">\n                                          {{\n                                            expansionTimelineMeta(\n                                              expansionEntry\n                                            )\n                                          }}\n                                        </div>\n                                      }\n                                      @if (\n                                        expansionTimelineDescription(\n                                          expansionEntry\n                                        )\n                                      ) {\n                                        <div\n                                          class=\"expansion-timeline-description\"\n                                        >\n                                          {{\n                                            expansionTimelineDescription(\n                                              expansionEntry\n                                            )\n                                          }}\n                                        </div>\n                                      }\n                                    </div>\n                                  }\n                                </div>\n                              }\n                              @case (\"key-value\") {\n                                <dl class=\"expansion-key-value\">\n                                  @for (\n                                    expansionEntry of expansionSectionItems(\n                                      item,\n                                      expansionSection,\n                                      i\n                                    );\n                                    track $index\n                                  ) {\n                                    <div class=\"expansion-key-value-row\">\n                                      @if (\n                                        expansionKeyValueKey(expansionEntry)\n                                      ) {\n                                        <dt>\n                                          {{\n                                            expansionKeyValueKey(expansionEntry)\n                                          }}\n                                        </dt>\n                                      }\n                                      <dd>\n                                        {{\n                                          expansionKeyValueValue(expansionEntry)\n                                        }}\n                                      </dd>\n                                    </div>\n                                  }\n                                </dl>\n                              }\n                              @default {\n                                <div class=\"expansion-info-list\">\n                                  @for (\n                                    expansionEntry of expansionSectionItems(\n                                      item,\n                                      expansionSection,\n                                      i\n                                    );\n                                    track $index\n                                  ) {\n                                    <div class=\"expansion-info-item\">\n                                      <div class=\"expansion-info-title\">\n                                        {{ expansionInfoTitle(expansionEntry) }}\n                                      </div>\n                                      @if (expansionInfoValue(expansionEntry)) {\n                                        <div class=\"expansion-info-value\">\n                                          {{\n                                            expansionInfoValue(expansionEntry)\n                                          }}\n                                        </div>\n                                      }\n                                    </div>\n                                  }\n                                </div>\n                              }\n                            }\n                          } @else {\n                            <div class=\"expansion-empty\">\n                              {{\n                                expansionSection.emptyLabel ||\n                                  \"Sem dados dispon\u00EDveis\"\n                              }}\n                            </div>\n                          }\n                        </section>\n                      }\n                    </div>\n                  </div>\n                }\n              </mat-list-item>\n              @if (\n                (config.layout?.dividers === \"all\" ||\n                  config.layout?.dividers === \"between\") &&\n                i < section.items.length - 1\n              ) {\n                <mat-divider></mat-divider>\n              }\n            }\n          }\n        </mat-list>\n      </ng-template>\n    } @else if (isTilesVariant()) {\n      <ng-container *ngTemplateOutlet=\"tilesVariant\"></ng-container>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"cardsVariant\"></ng-container>\n    }\n\n    <!-- Cards variant -->\n    <ng-template #cardsVariant>\n      <div class=\"cards-grid\">\n        @for (it of (items$ | async) ?? []; track $index; let i = $index) {\n          <div\n            class=\"item-card\"\n            [ngClass]=\"itemRuleClass(it)\"\n            [attr.style]=\"itemRuleStyle(it)\"\n            role=\"button\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"itemAriaLabel(it)\"\n            (click)=\"onItemClick(it, i)\"\n            (keydown.enter)=\"onItemClick(it, i)\"\n            (keydown.space)=\"$event.preventDefault(); onItemClick(it, i)\"\n          >\n            <div class=\"list-item-content\">\n              <div class=\"list-item-leading\">\n                @if (leading(it); as lead) {\n                  @if (\n                    simpleRichContentNodes(lead, {\n                      imageAlt: config.templating?.leading?.imageAlt || \"\",\n                    });\n                    as richNodes\n                  ) {\n                    <praxis-rich-content [nodes]=\"richNodes\"></praxis-rich-content>\n                  } @else {\n                    @switch (lead.type) {\n                      @case (\"icon\") {\n                        <mat-icon\n                          [praxisIcon]=\"lead.value\"\n                          [ngClass]=\"lead.class\"\n                          [color]=\"\n                            isThemeColor(lead.color) ? lead.color : undefined\n                          \"\n                          [style.cssText]=\"\n                            (lead.style ? lead.style + ';' : '') +\n                            iconStyle(lead.color)\n                          \"\n                        ></mat-icon>\n                      }\n                      @case (\"image\") {\n                        <div\n                          class=\"lead-image\"\n                          [ngClass]=\"lead.class\"\n                          [style.cssText]=\"lead.style\"\n                        >\n                          <img\n                            [src]=\"lead.value\"\n                            [alt]=\"config.templating?.leading?.imageAlt || ''\"\n                          />\n                          @if (lead.badge?.value) {\n                            <mat-chip\n                              class=\"lead-badge\"\n                              [color]=\"\n                                isThemeColor(lead.badge?.color)\n                                  ? lead.badge?.color\n                                  : undefined\n                              \"\n                              [ngClass]=\"\n                                (lead.badge?.variant || 'filled') === 'outlined'\n                                  ? 'chip-outlined'\n                                  : ''\n                              \"\n                              [style.cssText]=\"\n                                chipStyle(\n                                  lead.badge?.color,\n                                  lead.badge?.variant\n                                )\n                              \"\n                              >{{ lead.badge?.value }}</mat-chip\n                            >\n                          }\n                        </div>\n                      }\n                      @case (\"text\") {\n                        <span\n                          [ngClass]=\"lead.class\"\n                          [style.cssText]=\"lead.style\"\n                          >{{ lead.value }}</span\n                        >\n                      }\n                      @case (\"chip\") {\n                        <mat-chip\n                          [color]=\"\n                            isThemeColor(lead.color) ? lead.color : undefined\n                          \"\n                          [ngClass]=\"\n                            (lead.variant || 'filled') === 'outlined'\n                              ? 'chip-outlined'\n                              : ''\n                          \"\n                          [style.cssText]=\"chipStyle(lead.color, lead.variant)\"\n                          >{{ lead.value }}</mat-chip\n                        >\n                      }\n                      @case (\"rating\") {\n                        @for (\n                          _ of ratingRange(lead);\n                          track $index;\n                          let idx = $index\n                        ) {\n                          <mat-icon\n                            [praxisIcon]=\"starIcon(idx, lead.value)\"\n                            [color]=\"ratingThemeColor(lead)\"\n                            [style.cssText]=\"ratingIconStyle(lead)\"\n                          ></mat-icon>\n                        }\n                      }\n                      @case (\"html\") {\n                        <span\n                          [ngClass]=\"lead.class\"\n                          [style.cssText]=\"lead.style\"\n                          [innerHTML]=\"lead.value\"\n                        ></span>\n                      }\n                      @case (\"metric\") {\n                        <praxis-list-metric\n                          [metric]=\"lead\"\n                        ></praxis-list-metric>\n                      }\n                      @case (\"compose\") {\n                        <praxis-list-compose\n                          [compose]=\"lead\"\n                        ></praxis-list-compose>\n                      }\n                      @case (\"component\") {\n                        <praxis-list-runtime-component\n                          [component]=\"lead\"\n                        ></praxis-list-runtime-component>\n                      }\n                      @default {\n                        <span\n                          [ngClass]=\"lead.class\"\n                          [style.cssText]=\"lead.style\"\n                          >{{ lead.value }}</span\n                        >\n                      }\n                    }\n                  }\n                } @else {\n                  <span class=\"leading-placeholder\"></span>\n                }\n              </div>\n              <div class=\"list-item-text\">\n                <div\n                  class=\"primary\"\n                  [ngClass]=\"primary(it)?.class\"\n                  [style.cssText]=\"primary(it)?.style\"\n                >\n                  @if (simpleRichContentNodes(primary(it)); as richNodes) {\n                    <praxis-rich-content [nodes]=\"richNodes\"></praxis-rich-content>\n                  } @else if (primary(it)?.type === \"metric\") {\n                    <praxis-list-metric [metric]=\"primary(it)\"></praxis-list-metric>\n                  } @else if (primary(it)?.type === \"compose\") {\n                    <praxis-list-compose\n                      [compose]=\"primary(it)\"\n                    ></praxis-list-compose>\n                  } @else if (primary(it)?.type === \"component\") {\n                    <praxis-list-runtime-component\n                      [component]=\"primary(it)\"\n                    ></praxis-list-runtime-component>\n                  } @else {\n                    {{ primary(it)?.value }}\n                  }\n                </div>\n                @if (layoutLines > 1) {\n                  <div\n                    class=\"secondary\"\n                    [ngClass]=\"secondary(it)?.class\"\n                    [style.cssText]=\"secondary(it)?.style\"\n                  >\n                    @if (simpleRichContentNodes(secondary(it)); as richNodes) {\n                      <praxis-rich-content [nodes]=\"richNodes\"></praxis-rich-content>\n                    } @else if (secondary(it)?.type === \"metric\") {\n                      <praxis-list-metric\n                        [metric]=\"secondary(it)\"\n                      ></praxis-list-metric>\n                    } @else if (secondary(it)?.type === \"compose\") {\n                      <praxis-list-compose\n                        [compose]=\"secondary(it)\"\n                      ></praxis-list-compose>\n                    } @else if (secondary(it)?.type === \"component\") {\n                      <praxis-list-runtime-component\n                        [component]=\"secondary(it)\"\n                      ></praxis-list-runtime-component>\n                    } @else {\n                      {{ secondary(it)?.value }}\n                    }\n                  </div>\n                }\n                @if (meta(it); as m) {\n                  @if (\n                    (config.templating?.metaPlacement === \"line\" &&\n                      (m?.type === \"text\" ||\n                        m?.type === \"date\" ||\n                        m?.type === \"currency\")) ||\n                    (layoutLines > 2 &&\n                      (m?.type === \"text\" ||\n                        m?.type === \"date\" ||\n                        m?.type === \"currency\"))\n                  ) {\n                    <div\n                      class=\"tertiary\"\n                      [ngClass]=\"m.class\"\n                      [style.cssText]=\"m.style\"\n                    >\n                      @if (config.templating?.metaPrefixIcon; as mpi) {\n                        <mat-icon [praxisIcon]=\"mpi\"></mat-icon>\n                      }\n                      {{ m.value }}\n                    </div>\n                  }\n                }\n                @if (featuresVisible()) {\n                  <div class=\"features\">\n                    @for (\n                      f of config.templating?.features || [];\n                      track $index;\n                      let fi = $index\n                    ) {\n                      <span\n                        class=\"feature\"\n                        [ngClass]=\"featureSemanticClass(it, f.expr, f.class)\"\n                      >\n                        @if (featureRichContentNodes(it, f); as featureNodes) {\n                          <praxis-rich-content [nodes]=\"featureNodes\"></praxis-rich-content>\n                        } @else {\n                          @if (f.icon && featuresMode() !== \"labels-only\") {\n                            <mat-icon [praxisIcon]=\"f.icon\"></mat-icon>\n                          }\n                          @if (featuresMode() !== \"icons-only\") {\n                            <span [ngClass]=\"f.class\" [style.cssText]=\"f.style\">\n                              @for (\n                                line of featureLabelLines(it, f.expr);\n                                track $index\n                              ) {\n                                <span class=\"feature-line\">{{ line }}</span>\n                              }\n                            </span>\n                          }\n                        }\n                        @if (\n                          featureProgressPercent(it, f.expr, f.class);\n                          as progress\n                        ) {\n                          <span class=\"feature-progress\" aria-hidden=\"true\">\n                            <span\n                              class=\"feature-progress__value\"\n                              [style.width.%]=\"progress\"\n                            ></span>\n                          </span>\n                        }\n                      </span>\n                    }\n                  </div>\n                }\n              </div>\n              <div class=\"list-item-trailing\">\n                @if (meta(it); as m) {\n                  @if (\n                    !(\n                      (config.templating?.metaPlacement === \"line\" ||\n                        layoutLines > 2) &&\n                      (m?.type === \"text\" ||\n                        m?.type === \"date\" ||\n                        m?.type === \"currency\")\n                    )\n                  ) {\n                    <div\n                      class=\"meta\"\n                      [ngClass]=\"m.class\"\n                      [style.cssText]=\"m.style\"\n                    >\n                      @if (\n                        simpleRichContentNodes(m, {\n                          slot: \"meta\",\n                          imageAlt: m.imageAlt || \"\",\n                        });\n                        as richNodes\n                      ) {\n                        <praxis-rich-content [nodes]=\"richNodes\"></praxis-rich-content>\n                      } @else {\n                        @switch (m.type) {\n                          @case (\"chip\") {\n                            <mat-chip\n                              [color]=\"\n                                isThemeColor(m.color) ? m.color : undefined\n                              \"\n                              [ngClass]=\"\n                                (m.variant || 'filled') === 'outlined'\n                                  ? 'chip-outlined'\n                                  : ''\n                              \"\n                              [style.cssText]=\"chipStyle(m.color, m.variant)\"\n                              >{{ m.value }}</mat-chip\n                            >\n                          }\n                          @case (\"rating\") {\n                            @for (\n                              _ of ratingRange(m);\n                              track $index;\n                              let idx = $index\n                            ) {\n                              <mat-icon\n                                [praxisIcon]=\"starIcon(idx, m.value)\"\n                                [color]=\"ratingThemeColor(m)\"\n                                [style.cssText]=\"ratingIconStyle(m)\"\n                              ></mat-icon>\n                            }\n                          }\n                          @case (\"icon\") {\n                            <mat-icon\n                              [praxisIcon]=\"m.value\"\n                              [color]=\"\n                                isThemeColor(m.color) ? m.color : undefined\n                              \"\n                              [style.cssText]=\"iconStyle(m.color)\"\n                            ></mat-icon>\n                          }\n                          @case (\"image\") {\n                            <span class=\"inline-image\"\n                              ><img [src]=\"m.value\" [alt]=\"m.imageAlt || ''\"\n                            /></span>\n                          }\n                          @case (\"html\") {\n                            <span [innerHTML]=\"m.value\"></span>\n                          }\n                          @case (\"metric\") {\n                            <praxis-list-metric\n                              [metric]=\"m\"\n                            ></praxis-list-metric>\n                          }\n                          @case (\"compose\") {\n                            <praxis-list-compose\n                              [compose]=\"m\"\n                            ></praxis-list-compose>\n                          }\n                          @case (\"component\") {\n                            <praxis-list-runtime-component\n                              [component]=\"m\"\n                            ></praxis-list-runtime-component>\n                          }\n                          @default {\n                            <span>\n                              @if (config.templating?.metaPrefixIcon; as mpi2) {\n                                <mat-icon [praxisIcon]=\"mpi2\"></mat-icon>\n                              }\n                              {{ m.value }}</span\n                            >\n                          }\n                        }\n                      }\n                    </div>\n                  }\n                }\n                @if (trailing(it); as tr) {\n                  @if (\n                    (config.templating?.statusPosition || \"inline\") ===\n                      \"top-right\" &&\n                    (tr?.type === \"chip\" || tr?.type === \"icon\")\n                  ) {\n                    <div class=\"status-overlay\">\n                      @if (simpleRichContentNodes(tr); as richNodes) {\n                        <praxis-rich-content [nodes]=\"richNodes\"></praxis-rich-content>\n                      } @else {\n                        @if (tr?.type === \"chip\") {\n                          <mat-chip\n                            [color]=\"\n                              isThemeColor(tr.color) ? tr.color : undefined\n                            \"\n                            [ngClass]=\"\n                              (tr.variant || 'filled') === 'outlined'\n                                ? 'chip-outlined'\n                                : ''\n                            \"\n                            [style.cssText]=\"chipStyle(tr.color, tr.variant)\"\n                            >{{ tr.value }}</mat-chip\n                          >\n                        }\n                        @if (tr?.type === \"icon\") {\n                          <mat-icon\n                            [praxisIcon]=\"tr.value\"\n                            [color]=\"\n                              isThemeColor(tr.color) ? tr.color : undefined\n                            \"\n                            [style.cssText]=\"iconStyle(tr.color)\"\n                          ></mat-icon>\n                        }\n                      }\n                    </div>\n                  } @else {\n                    <div\n                      class=\"trailing\"\n                      [ngClass]=\"tr.class\"\n                      [style.cssText]=\"tr.style\"\n                    >\n                      @if (\n                        simpleRichContentNodes(tr, {\n                          imageAlt: config.templating?.trailing?.imageAlt || \"\",\n                        });\n                        as richNodes\n                      ) {\n                        <praxis-rich-content [nodes]=\"richNodes\"></praxis-rich-content>\n                      } @else {\n                        @switch (tr.type) {\n                          @case (\"chip\") {\n                            <mat-chip\n                              [color]=\"\n                                isThemeColor(tr.color) ? tr.color : undefined\n                              \"\n                              [ngClass]=\"\n                                (tr.variant || 'filled') === 'outlined'\n                                  ? 'chip-outlined'\n                                  : ''\n                              \"\n                              [style.cssText]=\"chipStyle(tr.color, tr.variant)\"\n                              >{{ tr.value }}</mat-chip\n                            >\n                          }\n                          @case (\"icon\") {\n                            <mat-icon\n                              [praxisIcon]=\"tr.value\"\n                              [color]=\"\n                                isThemeColor(tr.color) ? tr.color : undefined\n                              \"\n                              [style.cssText]=\"iconStyle(tr.color)\"\n                            ></mat-icon>\n                          }\n                          @case (\"image\") {\n                            <div\n                              class=\"lead-image\"\n                              [ngClass]=\"tr.class\"\n                              [style.cssText]=\"tr.style\"\n                            >\n                              <img\n                                [src]=\"tr.value\"\n                                [alt]=\"\n                                  config.templating?.trailing?.imageAlt || ''\n                                \"\n                              />\n                              @if (tr.badge?.value) {\n                                <mat-chip\n                                  class=\"lead-badge\"\n                                  [color]=\"\n                                    isThemeColor(tr.badge?.color)\n                                      ? tr.badge?.color\n                                      : undefined\n                                  \"\n                                  [ngClass]=\"\n                                    (tr.badge?.variant || 'filled') ===\n                                    'outlined'\n                                      ? 'chip-outlined'\n                                      : ''\n                                  \"\n                                  [style.cssText]=\"\n                                    chipStyle(\n                                      tr.badge?.color,\n                                      tr.badge?.variant\n                                    )\n                                  \"\n                                  >{{ tr.badge?.value }}</mat-chip\n                                >\n                              }\n                            </div>\n                          }\n                          @case (\"rating\") {\n                            @for (\n                              _ of ratingRange(tr);\n                              track $index;\n                              let idx = $index\n                            ) {\n                              <mat-icon\n                                [praxisIcon]=\"starIcon(idx, tr.value)\"\n                                [color]=\"ratingThemeColor(tr)\"\n                                [style.cssText]=\"ratingIconStyle(tr)\"\n                              ></mat-icon>\n                            }\n                          }\n                          @case (\"html\") {\n                            <span [innerHTML]=\"tr.value\"></span>\n                          }\n                          @case (\"metric\") {\n                            <praxis-list-metric\n                              [metric]=\"tr\"\n                            ></praxis-list-metric>\n                          }\n                          @case (\"compose\") {\n                            <praxis-list-compose\n                              [compose]=\"tr\"\n                            ></praxis-list-compose>\n                          }\n                          @case (\"component\") {\n                            <praxis-list-runtime-component\n                              [component]=\"tr\"\n                            ></praxis-list-runtime-component>\n                          }\n                          @default {\n                            <span>{{ tr.value }}</span>\n                          }\n                        }\n                      }\n                    </div>\n                  }\n                }\n              </div>\n            </div>\n            <div\n              class=\"card-actions\"\n              (click)=\"$event.stopPropagation()\"\n              (keydown.enter)=\"onActionKeydown($event)\"\n              (keydown.space)=\"onActionKeydown($event)\"\n            >\n              @for (\n                action of visibleActions(it, \"trailing\");\n                let aidx = $index;\n                track action?.id ?? $index\n              ) {\n                @if ((action.kind || \"icon\") === \"icon\") {\n                  <button\n                    mat-icon-button\n                    [color]=\"\n                      isThemeColor(action.color) ? action.color : undefined\n                    \"\n                    (click)=\"onActionClick($event, action.id, it, i)\"\n                    [attr.aria-label]=\"action.label || action.id\"\n                    [disabled]=\"isActionLoading(action.id, it, i)\"\n                    [ngClass]=\"{\n                      'action-loading': isActionLoading(action.id, it, i),\n                    }\"\n                  >\n                    @if (isActionLoading(action.id, it, i)) {\n                      <mat-progress-spinner\n                        class=\"action-spinner\"\n                        mode=\"indeterminate\"\n                        diameter=\"16\"\n                        strokeWidth=\"3\"\n                      ></mat-progress-spinner>\n                    } @else {\n                      <mat-icon\n                        [praxisIcon]=\"action.icon\"\n                        [style.cssText]=\"iconStyle(action.color)\"\n                      ></mat-icon>\n                    }\n                  </button>\n                } @else {\n                  @if (action.buttonVariant === \"stroked\") {\n                    <button\n                      mat-stroked-button\n                      [color]=\"\n                        isThemeColor(action.color) ? action.color : undefined\n                      \"\n                      [style.cssText]=\"buttonStyle(action.color, 'stroked')\"\n                      (click)=\"onActionClick($event, action.id, it, i)\"\n                      [attr.aria-label]=\"action.label || action.id\"\n                      [disabled]=\"isActionLoading(action.id, it, i)\"\n                      [ngClass]=\"{\n                        'action-loading': isActionLoading(action.id, it, i),\n                      }\"\n                    >\n                      @if (isActionLoading(action.id, it, i)) {\n                        <mat-progress-spinner\n                          class=\"action-spinner\"\n                          mode=\"indeterminate\"\n                          diameter=\"16\"\n                          strokeWidth=\"3\"\n                        ></mat-progress-spinner>\n                      } @else {\n                        {{ action.label || action.id }}\n                      }\n                    </button>\n                  }\n                  @if (action.buttonVariant === \"raised\") {\n                    <button\n                      mat-raised-button\n                      [color]=\"\n                        isThemeColor(action.color) ? action.color : undefined\n                      \"\n                      [style.cssText]=\"buttonStyle(action.color, 'raised')\"\n                      (click)=\"onActionClick($event, action.id, it, i)\"\n                      [attr.aria-label]=\"action.label || action.id\"\n                      [disabled]=\"isActionLoading(action.id, it, i)\"\n                      [ngClass]=\"{\n                        'action-loading': isActionLoading(action.id, it, i),\n                      }\"\n                    >\n                      @if (isActionLoading(action.id, it, i)) {\n                        <mat-progress-spinner\n                          class=\"action-spinner\"\n                          mode=\"indeterminate\"\n                          diameter=\"16\"\n                          strokeWidth=\"3\"\n                        ></mat-progress-spinner>\n                      } @else {\n                        {{ action.label || action.id }}\n                      }\n                    </button>\n                  }\n                  @if (\n                    !action.buttonVariant || action.buttonVariant === \"flat\"\n                  ) {\n                    <button\n                      mat-flat-button\n                      [color]=\"\n                        isThemeColor(action.color) ? action.color : undefined\n                      \"\n                      [style.cssText]=\"buttonStyle(action.color, 'flat')\"\n                      (click)=\"onActionClick($event, action.id, it, i)\"\n                      [attr.aria-label]=\"action.label || action.id\"\n                      [disabled]=\"isActionLoading(action.id, it, i)\"\n                      [ngClass]=\"{\n                        'action-loading': isActionLoading(action.id, it, i),\n                      }\"\n                    >\n                      @if (isActionLoading(action.id, it, i)) {\n                        <mat-progress-spinner\n                          class=\"action-spinner\"\n                          mode=\"indeterminate\"\n                          diameter=\"16\"\n                          strokeWidth=\"3\"\n                        ></mat-progress-spinner>\n                      } @else {\n                        {{ action.label || action.id }}\n                      }\n                    </button>\n                  }\n                }\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </ng-template>\n\n    <!-- Tiles variant -->\n    <ng-template #tilesVariant>\n      <div class=\"tiles-grid\">\n        @for (it of (items$ | async) ?? []; track $index; let i = $index) {\n          <div\n            class=\"item-tile\"\n            [ngClass]=\"itemRuleClass(it)\"\n            [attr.style]=\"itemRuleStyle(it)\"\n            role=\"button\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"itemAriaLabel(it)\"\n            (click)=\"onItemClick(it, i)\"\n            (keydown.enter)=\"onItemClick(it, i)\"\n            (keydown.space)=\"$event.preventDefault(); onItemClick(it, i)\"\n          >\n            <div class=\"tile-media\">\n              @if (leading(it); as lead) {\n                @if (\n                  simpleRichContentNodes(lead, {\n                    imageAlt: config.templating?.leading?.imageAlt || \"\",\n                  });\n                  as richNodes\n                ) {\n                  <praxis-rich-content [nodes]=\"richNodes\"></praxis-rich-content>\n                } @else {\n                  @switch (lead.type) {\n                    @case (\"image\") {\n                      <img\n                        [src]=\"lead.value\"\n                        [alt]=\"config.templating?.leading?.imageAlt || ''\"\n                      />\n                    }\n                    @case (\"icon\") {\n                      <mat-icon\n                        [praxisIcon]=\"lead.value\"\n                        [ngClass]=\"lead.class\"\n                        [color]=\"\n                          isThemeColor(lead.color) ? lead.color : undefined\n                        \"\n                        [style.cssText]=\"\n                          (lead.style ? lead.style + ';' : '') +\n                          iconStyle(lead.color)\n                        \"\n                      ></mat-icon>\n                    }\n                    @case (\"text\") {\n                      <span [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">{{\n                        lead.value\n                      }}</span>\n                    }\n                    @case (\"chip\") {\n                      <mat-chip\n                        [color]=\"\n                          isThemeColor(lead.color) ? lead.color : undefined\n                        \"\n                        [ngClass]=\"\n                          (lead.variant || 'filled') === 'outlined'\n                            ? 'chip-outlined'\n                            : ''\n                        \"\n                        [style.cssText]=\"chipStyle(lead.color, lead.variant)\"\n                        >{{ lead.value }}</mat-chip\n                      >\n                    }\n                    @case (\"rating\") {\n                      <span [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">\n                        @for (\n                          _ of ratingRange(lead);\n                          track $index;\n                          let idx = $index\n                        ) {\n                          <mat-icon\n                            [praxisIcon]=\"starIcon(idx, lead.value)\"\n                            [color]=\"ratingThemeColor(lead)\"\n                            [style.cssText]=\"ratingIconStyle(lead)\"\n                          ></mat-icon>\n                        }\n                      </span>\n                    }\n                    @case (\"html\") {\n                      <span\n                        [ngClass]=\"lead.class\"\n                        [style.cssText]=\"lead.style\"\n                        [innerHTML]=\"lead.value\"\n                      ></span>\n                    }\n                    @case (\"metric\") {\n                      <praxis-list-metric [metric]=\"lead\"></praxis-list-metric>\n                    }\n                    @case (\"compose\") {\n                      <praxis-list-compose\n                        [compose]=\"lead\"\n                      ></praxis-list-compose>\n                    }\n                    @case (\"component\") {\n                      <praxis-list-runtime-component\n                        [component]=\"lead\"\n                      ></praxis-list-runtime-component>\n                    }\n                    @default {\n                      <span [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">{{\n                        lead.value\n                      }}</span>\n                    }\n                  }\n                }\n              }\n            </div>\n\n            @if (trailing(it); as tr) {\n              @if (\n                (config.templating?.statusPosition || \"inline\") ===\n                  \"top-right\" &&\n                (tr?.type === \"chip\" || tr?.type === \"icon\")\n              ) {\n                <div class=\"tile-status\">\n                  @if (simpleRichContentNodes(tr); as richNodes) {\n                    <praxis-rich-content [nodes]=\"richNodes\"></praxis-rich-content>\n                  } @else {\n                    @if (tr?.type === \"chip\") {\n                      <mat-chip\n                        [color]=\"isThemeColor(tr.color) ? tr.color : undefined\"\n                        [ngClass]=\"\n                          (tr.variant || 'filled') === 'outlined'\n                            ? 'chip-outlined'\n                            : ''\n                        \"\n                        [style.cssText]=\"chipStyle(tr.color, tr.variant)\"\n                        >{{ tr.value }}</mat-chip\n                      >\n                    }\n                    @if (tr?.type === \"icon\") {\n                      <mat-icon\n                        [praxisIcon]=\"tr.value\"\n                        [color]=\"isThemeColor(tr.color) ? tr.color : undefined\"\n                        [style.cssText]=\"iconStyle(tr.color)\"\n                      ></mat-icon>\n                    }\n                  }\n                </div>\n              }\n            }\n\n            <div class=\"tile-body\">\n              <div\n                class=\"primary\"\n                [ngClass]=\"primary(it)?.class\"\n                [style.cssText]=\"primary(it)?.style\"\n              >\n                @if (simpleRichContentNodes(primary(it)); as richNodes) {\n                  <praxis-rich-content [nodes]=\"richNodes\"></praxis-rich-content>\n                } @else if (primary(it)?.type === \"metric\") {\n                  <praxis-list-metric [metric]=\"primary(it)\"></praxis-list-metric>\n                } @else if (primary(it)?.type === \"compose\") {\n                  <praxis-list-compose\n                    [compose]=\"primary(it)\"\n                  ></praxis-list-compose>\n                } @else if (primary(it)?.type === \"component\") {\n                  <praxis-list-runtime-component\n                    [component]=\"primary(it)\"\n                  ></praxis-list-runtime-component>\n                } @else {\n                  {{ primary(it)?.value }}\n                }\n              </div>\n              @if (layoutLines > 1) {\n                <div\n                  class=\"secondary\"\n                  [ngClass]=\"secondary(it)?.class\"\n                  [style.cssText]=\"secondary(it)?.style\"\n                >\n                  @if (simpleRichContentNodes(secondary(it)); as richNodes) {\n                    <praxis-rich-content [nodes]=\"richNodes\"></praxis-rich-content>\n                  } @else if (secondary(it)?.type === \"metric\") {\n                    <praxis-list-metric\n                      [metric]=\"secondary(it)\"\n                    ></praxis-list-metric>\n                  } @else if (secondary(it)?.type === \"compose\") {\n                    <praxis-list-compose\n                      [compose]=\"secondary(it)\"\n                    ></praxis-list-compose>\n                  } @else if (secondary(it)?.type === \"component\") {\n                    <praxis-list-runtime-component\n                      [component]=\"secondary(it)\"\n                    ></praxis-list-runtime-component>\n                  } @else {\n                    {{ secondary(it)?.value }}\n                  }\n                </div>\n              }\n\n              @if (meta(it); as m) {\n                <div\n                  class=\"tile-meta\"\n                  [ngClass]=\"m.class\"\n                  [style.cssText]=\"m.style\"\n                >\n                  @if (config.templating?.metaPrefixIcon; as mpi) {\n                    <mat-icon [praxisIcon]=\"mpi\"></mat-icon>\n                  }\n                  @if (\n                    simpleRichContentNodes(m, {\n                      slot: \"meta\",\n                      imageAlt: m.imageAlt || \"\",\n                    });\n                    as richNodes\n                  ) {\n                    <praxis-rich-content [nodes]=\"richNodes\"></praxis-rich-content>\n                  } @else {\n                    @switch (m.type) {\n                      @case (\"chip\") {\n                        <mat-chip\n                          [color]=\"isThemeColor(m.color) ? m.color : undefined\"\n                          [ngClass]=\"\n                            (m.variant || 'filled') === 'outlined'\n                              ? 'chip-outlined'\n                              : ''\n                          \"\n                          [style.cssText]=\"chipStyle(m.color, m.variant)\"\n                          >{{ m.value }}</mat-chip\n                        >\n                      }\n                      @case (\"rating\") {\n                        @for (\n                          _ of ratingRange(m);\n                          track $index;\n                          let idx = $index\n                        ) {\n                          <mat-icon\n                            [praxisIcon]=\"starIcon(idx, m.value)\"\n                            [color]=\"ratingThemeColor(m)\"\n                            [style.cssText]=\"ratingIconStyle(m)\"\n                          ></mat-icon>\n                        }\n                      }\n                      @case (\"icon\") {\n                        <mat-icon\n                          [praxisIcon]=\"m.value\"\n                          [color]=\"isThemeColor(m.color) ? m.color : undefined\"\n                          [style.cssText]=\"iconStyle(m.color)\"\n                        ></mat-icon>\n                      }\n                      @case (\"image\") {\n                        <span class=\"inline-image\"\n                          ><img [src]=\"m.value\" [alt]=\"m.imageAlt || ''\"\n                        /></span>\n                      }\n                      @case (\"html\") {\n                        <span [innerHTML]=\"m.value\"></span>\n                      }\n                      @case (\"metric\") {\n                        <praxis-list-metric [metric]=\"m\"></praxis-list-metric>\n                      }\n                      @case (\"compose\") {\n                        <praxis-list-compose\n                          [compose]=\"m\"\n                        ></praxis-list-compose>\n                      }\n                      @case (\"component\") {\n                        <praxis-list-runtime-component\n                          [component]=\"m\"\n                        ></praxis-list-runtime-component>\n                      }\n                      @default {\n                        <span>{{ m.value }}</span>\n                      }\n                    }\n                  }\n                </div>\n              }\n\n              @if (featuresVisible()) {\n                <div class=\"tiles-features\">\n                  @for (\n                    f of config.templating?.features || [];\n                    track $index;\n                    let fi = $index\n                  ) {\n                    <span\n                      class=\"feature\"\n                      [ngClass]=\"featureSemanticClass(it, f.expr, f.class)\"\n                    >\n                      @if (featureRichContentNodes(it, f); as featureNodes) {\n                        <praxis-rich-content [nodes]=\"featureNodes\"></praxis-rich-content>\n                      } @else {\n                        @if (f.icon && featuresMode() !== \"labels-only\") {\n                          <mat-icon [praxisIcon]=\"f.icon\"></mat-icon>\n                        }\n                        @if (featuresMode() !== \"icons-only\") {\n                          <span [ngClass]=\"f.class\" [style.cssText]=\"f.style\">\n                            @for (\n                              line of featureLabelLines(it, f.expr);\n                              track $index\n                            ) {\n                              <span class=\"feature-line\">{{ line }}</span>\n                            }\n                          </span>\n                        }\n                      }\n                      @if (\n                        featureProgressPercent(it, f.expr, f.class);\n                        as progress\n                      ) {\n                        <span class=\"feature-progress\" aria-hidden=\"true\">\n                          <span\n                            class=\"feature-progress__value\"\n                            [style.width.%]=\"progress\"\n                          ></span>\n                        </span>\n                      }\n                    </span>\n                  }\n                </div>\n              }\n\n              @if (trailing(it); as tr2) {\n                @if (\n                  !(\n                    (config.templating?.statusPosition || \"inline\") ===\n                      \"top-right\" &&\n                    (tr2?.type === \"chip\" || tr2?.type === \"icon\")\n                  )\n                ) {\n                  <div\n                    class=\"tile-trailing\"\n                    [ngClass]=\"tr2.class\"\n                    [style.cssText]=\"tr2.style\"\n                  >\n                    @if (\n                      simpleRichContentNodes(tr2, {\n                        imageAlt: tr2.imageAlt || \"\",\n                      });\n                      as richNodes\n                    ) {\n                      <praxis-rich-content [nodes]=\"richNodes\"></praxis-rich-content>\n                    } @else {\n                      @switch (tr2.type) {\n                        @case (\"chip\") {\n                          <mat-chip\n                            [color]=\"\n                              isThemeColor(tr2.color) ? tr2.color : undefined\n                            \"\n                            [ngClass]=\"\n                              (tr2.variant || 'filled') === 'outlined'\n                                ? 'chip-outlined'\n                                : ''\n                            \"\n                            [style.cssText]=\"chipStyle(tr2.color, tr2.variant)\"\n                            >{{ tr2.value }}</mat-chip\n                          >\n                        }\n                        @case (\"icon\") {\n                          <mat-icon\n                            [praxisIcon]=\"tr2.value\"\n                            [color]=\"\n                              isThemeColor(tr2.color) ? tr2.color : undefined\n                            \"\n                            [style.cssText]=\"iconStyle(tr2.color)\"\n                          ></mat-icon>\n                        }\n                        @case (\"image\") {\n                          <span class=\"inline-image\"\n                            ><img [src]=\"tr2.value\" [alt]=\"tr2.imageAlt || ''\"\n                          /></span>\n                        }\n                        @case (\"rating\") {\n                          @for (\n                            _ of ratingRange(tr2);\n                            track $index;\n                            let idx = $index\n                          ) {\n                            <mat-icon\n                              [praxisIcon]=\"starIcon(idx, tr2.value)\"\n                              [color]=\"ratingThemeColor(tr2)\"\n                              [style.cssText]=\"ratingIconStyle(tr2)\"\n                            ></mat-icon>\n                          }\n                        }\n                        @case (\"html\") {\n                          <span [innerHTML]=\"tr2.value\"></span>\n                        }\n                        @case (\"metric\") {\n                          <praxis-list-metric\n                            [metric]=\"tr2\"\n                          ></praxis-list-metric>\n                        }\n                        @case (\"compose\") {\n                          <praxis-list-compose\n                            [compose]=\"tr2\"\n                          ></praxis-list-compose>\n                        }\n                        @case (\"component\") {\n                          <praxis-list-runtime-component\n                            [component]=\"tr2\"\n                          ></praxis-list-runtime-component>\n                        }\n                        @default {\n                          <span>{{ tr2.value }}</span>\n                        }\n                      }\n                    }\n                  </div>\n                }\n              }\n            </div>\n\n            @if ((visibleActions(it, \"trailing\") || []).length) {\n              <div\n                class=\"tile-actions\"\n                (click)=\"$event.stopPropagation()\"\n                (keydown.enter)=\"onActionKeydown($event)\"\n                (keydown.space)=\"onActionKeydown($event)\"\n              >\n                @for (\n                  action of visibleActions(it, \"trailing\");\n                  let aidx = $index;\n                  track action?.id ?? $index\n                ) {\n                  @if ((action.kind || \"icon\") === \"icon\") {\n                    <button\n                      mat-icon-button\n                      [color]=\"\n                        isThemeColor(action.color) ? action.color : undefined\n                      \"\n                      (click)=\"onActionClick($event, action.id, it, i)\"\n                      [attr.aria-label]=\"action.label || action.id\"\n                      [disabled]=\"isActionLoading(action.id, it, i)\"\n                      [ngClass]=\"{\n                        'action-loading': isActionLoading(action.id, it, i),\n                      }\"\n                    >\n                      @if (isActionLoading(action.id, it, i)) {\n                        <mat-progress-spinner\n                          class=\"action-spinner\"\n                          mode=\"indeterminate\"\n                          diameter=\"16\"\n                          strokeWidth=\"3\"\n                        ></mat-progress-spinner>\n                      } @else {\n                        <mat-icon\n                          [praxisIcon]=\"action.icon\"\n                          [style.cssText]=\"iconStyle(action.color)\"\n                        ></mat-icon>\n                      }\n                    </button>\n                  } @else {\n                    @if (action.buttonVariant === \"stroked\") {\n                      <button\n                        mat-stroked-button\n                        [color]=\"\n                          isThemeColor(action.color) ? action.color : undefined\n                        \"\n                        [style.cssText]=\"buttonStyle(action.color, 'stroked')\"\n                        (click)=\"onActionClick($event, action.id, it, i)\"\n                        [attr.aria-label]=\"action.label || action.id\"\n                        [disabled]=\"isActionLoading(action.id, it, i)\"\n                        [ngClass]=\"{\n                          'action-loading': isActionLoading(action.id, it, i),\n                        }\"\n                      >\n                        @if (isActionLoading(action.id, it, i)) {\n                          <mat-progress-spinner\n                            class=\"action-spinner\"\n                            mode=\"indeterminate\"\n                            diameter=\"16\"\n                            strokeWidth=\"3\"\n                          ></mat-progress-spinner>\n                        } @else {\n                          {{ action.label || action.id }}\n                        }\n                      </button>\n                    }\n                    @if (action.buttonVariant === \"raised\") {\n                      <button\n                        mat-raised-button\n                        [color]=\"\n                          isThemeColor(action.color) ? action.color : undefined\n                        \"\n                        [style.cssText]=\"buttonStyle(action.color, 'raised')\"\n                        (click)=\"onActionClick($event, action.id, it, i)\"\n                        [attr.aria-label]=\"action.label || action.id\"\n                        [disabled]=\"isActionLoading(action.id, it, i)\"\n                        [ngClass]=\"{\n                          'action-loading': isActionLoading(action.id, it, i),\n                        }\"\n                      >\n                        @if (isActionLoading(action.id, it, i)) {\n                          <mat-progress-spinner\n                            class=\"action-spinner\"\n                            mode=\"indeterminate\"\n                            diameter=\"16\"\n                            strokeWidth=\"3\"\n                          ></mat-progress-spinner>\n                        } @else {\n                          {{ action.label || action.id }}\n                        }\n                      </button>\n                    }\n                    @if (\n                      !action.buttonVariant || action.buttonVariant === \"flat\"\n                    ) {\n                      <button\n                        mat-flat-button\n                        [color]=\"\n                          isThemeColor(action.color) ? action.color : undefined\n                        \"\n                        [style.cssText]=\"buttonStyle(action.color, 'flat')\"\n                        (click)=\"onActionClick($event, action.id, it, i)\"\n                        [attr.aria-label]=\"action.label || action.id\"\n                        [disabled]=\"isActionLoading(action.id, it, i)\"\n                        [ngClass]=\"{\n                          'action-loading': isActionLoading(action.id, it, i),\n                        }\"\n                      >\n                        @if (isActionLoading(action.id, it, i)) {\n                          <mat-progress-spinner\n                            class=\"action-spinner\"\n                            mode=\"indeterminate\"\n                            diameter=\"16\"\n                            strokeWidth=\"3\"\n                          ></mat-progress-spinner>\n                        } @else {\n                          {{ action.label || action.id }}\n                        }\n                      </button>\n                    }\n                  }\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </ng-template>\n\n    <!-- Simple pagination controls for remote data -->\n    @if (config.dataSource?.resourcePath) {\n      <div class=\"paginator\">\n        <div class=\"paginator-controls\">\n          <button mat-stroked-button color=\"primary\" (click)=\"prevPage()\">\n            Anterior\n          </button>\n          <button mat-stroked-button color=\"primary\" (click)=\"nextPage()\">\n            Pr\u00F3ximo\n          </button>\n          <mat-form-field class=\"paginator-page-size\" appearance=\"outline\">\n            <mat-label>Tam. p\u00E1gina</mat-label>\n            <mat-select\n              (selectionChange)=\"setPageSize($event.value)\"\n              [value]=\"config.layout?.pageSize || 10\"\n            >\n              <mat-option [value]=\"6\">6</mat-option>\n              <mat-option [value]=\"8\">8</mat-option>\n              <mat-option [value]=\"12\">12</mat-option>\n              <mat-option [value]=\"24\">24</mat-option>\n            </mat-select>\n          </mat-form-field>\n          @if (config.ui?.showSort) {\n            <mat-form-field class=\"paginator-sort\" appearance=\"outline\">\n              <mat-label>Ordenar</mat-label>\n              <mat-select (selectionChange)=\"onSortChange($event.value)\">\n                @for (op of config.ui?.sortOptions || []; track $index) {\n                  <mat-option [value]=\"sortOptionValue(op)\">{{\n                    sortOptionLabel(op)\n                  }}</mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n          }\n          @if (config.ui?.showSearch && config.ui?.searchField) {\n            <mat-form-field class=\"paginator-search\" appearance=\"outline\">\n              <mat-label>{{\n                config.ui?.searchPlaceholder || \"Buscar\"\n              }}</mat-label>\n              <input\n                matInput\n                type=\"search\"\n                (input)=\"onSearchInput($any($event.target).value)\"\n              />\n            </mat-form-field>\n          }\n        </div>\n        <div class=\"paginator-meta\">\n          @if (config.ui?.showRange ?? true) {\n            @if (page$ | async; as ps) {\n              @if (total$ | async; as total) {\n                @if (items$ | async; as curr) {\n                  <span class=\"muted\"\n                    >{{ (total || 0) > 0 ? rangeStart(ps) : 0 }}\u2013{{\n                      rangeEnd(curr?.length || 0, ps, total || 0)\n                    }}\n                    de {{ total || 0 }}</span\n                  >\n                }\n              }\n            }\n          } @else {\n            @if (total$ | async; as total2) {\n              <span class=\"muted\">Total: {{ total2 }}</span>\n            }\n          }\n        </div>\n      </div>\n    }\n  </ng-template>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.praxis-list-root{--p-list-radius: var(--md-sys-shape-corner-medium, 16px);--p-list-shadow: var(--md-sys-elevation-level2);--p-list-border: 1px solid var(--md-sys-color-outline-variant);--p-list-blur: 10px;--p-list-surface: var(--md-sys-color-surface-container);--p-list-surface-low: var(--md-sys-color-surface);--p-list-surface-high: var( --md-sys-color-surface-container-high, var(--md-sys-color-surface-container) );--p-list-foreground: var(--md-sys-color-on-surface);--p-list-foreground-muted: var(--md-sys-color-on-surface-variant);--p-list-accent: var(--md-sys-color-primary);--p-list-accent-weak: var(--md-sys-color-primary-container);--p-list-item-surface: var( --md-sys-color-surface-container-low, var(--md-sys-color-surface) );--p-list-item-border: 1px solid var(--md-sys-color-outline-variant);--p-list-item-hover-surface: var(--md-sys-color-surface-container-low);--p-list-item-active-surface: var(--md-sys-color-surface-container);--p-list-item-selected-surface: var(--md-sys-color-surface-container);--p-list-grad-from: var(--md-sys-color-primary-container);--p-list-grad-to: var(--md-sys-color-tertiary-container);--p-list-grad-angle: 135deg;--p-list-grad-foreground: var(--md-sys-color-on-primary);--p-list-grad-foreground-muted: var(--md-sys-color-on-primary);--p-list-leading-width: 36px;--p-list-trailing-min-width: 140px;--p-list-item-gap: 10px;--p-list-item-padding-x: 14px;--p-list-item-padding-y: 10px;--p-list-item-stack-gap: 0px;--p-list-meta-size: .875rem;--p-list-meta-weight: 500;--p-list-chip-height: 22px;--p-list-chip-font-size: 12px;--p-list-trailing-padding-right: 8px;--p-list-tile-minW: 240px;--p-list-tile-gap: 12px;--p-list-tile-padding: 12px;--p-list-tile-radius: 12px;--p-list-tile-media-radius: 12px;--p-list-tile-media-ratio: 1 / 1;--p-list-tile-hover-overlay: .04;--p-list-tile-press-overlay: .08;--p-list-tile-press-scale: .99}.list-assistant{display:flex;justify-content:flex-end;gap:8px;padding:4px 4px 8px}.action-loading{opacity:.65}.action-spinner{width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center}.action-loading .mat-mdc-button-touch-target,.action-loading .mdc-button__label{opacity:.7}.skin-elevated,.skin-outline,.skin-flat,.skin-neumorphism{--p-list-item-surface: var( --mdc-elevated-card-container-color, var(--p-list-surface) );--p-list-item-border: var(--p-list-border)}.skin-elevated .item-card,.skin-outline .item-card,.skin-flat .item-card,.skin-neumorphism .item-card{background:var(--mdc-elevated-card-container-color, var(--p-list-surface));border-radius:var(--p-list-radius);box-shadow:var(--p-list-shadow);border:var(--p-list-border)}.skin-elevated .item-tile,.skin-outline .item-tile,.skin-flat .item-tile,.skin-neumorphism .item-tile{background:var(--mdc-elevated-card-container-color, var(--p-list-surface));box-shadow:var(--p-list-shadow);border:var(--p-list-border)}.skin-elevated .mat-mdc-list-item .list-item-content,.skin-outline .mat-mdc-list-item .list-item-content,.skin-flat .mat-mdc-list-item .list-item-content,.skin-neumorphism .mat-mdc-list-item .list-item-content{background:var(--mdc-elevated-card-container-color, var(--p-list-surface));border-radius:calc(var(--p-list-radius) * .75);box-shadow:var(--p-list-shadow);border:var(--p-list-item-border);color:var(--p-list-foreground)}.skin-outline{--p-list-shadow: none;--p-list-border: 1px solid var(--md-sys-color-outline)}.skin-flat{--p-list-shadow: none;--p-list-border: 1px solid var(--md-sys-color-outline-variant)}.skin-neumorphism{--p-list-shadow: var(--md-sys-elevation-level2);--p-list-border: 1px solid var(--md-sys-color-outline-variant);--p-list-radius: 1.25rem}.skin-pill-soft .item-card,.skin-pill-soft .item-tile{background:var(--mdc-elevated-card-container-color, var(--p-list-surface));border-radius:calc(var(--p-list-radius) * 1.3);box-shadow:var(--md-sys-elevation-level1);border:var(--p-list-border)}.skin-pill-soft .mat-mdc-list-item .list-item-content{background:var(--mdc-elevated-card-container-color, var(--p-list-surface));border-radius:calc(var(--p-list-radius) * 1.3);box-shadow:var(--md-sys-elevation-level1);border:var(--p-list-border);color:var(--p-list-foreground)}.skin-gradient-tile{--p-list-foreground: var(--p-list-grad-foreground);--p-list-foreground-muted: var(--p-list-grad-foreground-muted);--p-list-item-hover-surface: linear-gradient( var(--p-list-grad-angle), var(--p-list-grad-from), var(--p-list-grad-to) );--p-list-item-active-surface: linear-gradient( var(--p-list-grad-angle), var(--p-list-grad-from), var(--p-list-grad-to) );--p-list-item-selected-surface: linear-gradient( var(--p-list-grad-angle), var(--p-list-grad-from), var(--p-list-grad-to) )}.skin-gradient-tile .item-card,.skin-gradient-tile .item-tile,.skin-gradient-tile .mat-mdc-list-item .list-item-content{background:linear-gradient(var(--p-list-grad-angle),var(--p-list-grad-from),var(--p-list-grad-to));border-radius:var(--p-list-radius);color:var(--p-list-foreground)}.skin-glass .item-card,.skin-glass .item-tile{background:var(--md-sys-color-surface-container-low);border-radius:var(--p-list-radius);border:1px solid var(--md-sys-color-outline-variant);backdrop-filter:blur(var(--p-list-blur));-webkit-backdrop-filter:blur(var(--p-list-blur))}.skin-glass .mat-mdc-list-item .list-item-content{background:var(--md-sys-color-surface-container-low);border-radius:var(--p-list-radius);border:1px solid var(--md-sys-color-outline-variant);backdrop-filter:blur(var(--p-list-blur));-webkit-backdrop-filter:blur(var(--p-list-blur));color:var(--p-list-foreground)}.density-compact .mat-mdc-list-item,.density-compact .item-card{--p-list-item-padding-y: 6px;--p-list-item-padding-x: 10px;--p-list-item-gap: 8px}.density-comfortable .mat-mdc-list-item,.density-comfortable .item-card{--p-list-item-padding-y: 8px;--p-list-item-padding-x: 12px;--p-list-item-gap: 10px}.praxis-list-root.lines-3 .mat-mdc-list-item,.praxis-list-root.lines-3 .mat-mdc-list-option{min-height:68px}.density-compact{--p-list-tile-gap: 10px;--p-list-tile-padding: 10px;--p-list-tile-minW: 188px}.density-comfortable{--p-list-tile-gap: 12px;--p-list-tile-padding: 12px}.item-spacing-none{--p-list-item-stack-gap: 0px}.item-spacing-tight{--p-list-item-stack-gap: 4px;--p-list-tile-gap: 10px}.item-spacing-default{--p-list-item-stack-gap: 6px;--p-list-tile-gap: 12px}.item-spacing-relaxed{--p-list-item-stack-gap: 14px;--p-list-tile-gap: 20px}.list-item-content{display:grid;grid-template-columns:var(--p-list-leading-width) minmax(0,1fr) minmax(var(--p-list-trailing-min-width),max-content);align-items:center;gap:var(--p-list-item-gap);padding:var(--p-list-item-padding-y) var(--p-list-item-padding-x);width:100%;min-width:0;border-radius:calc(var(--p-list-radius) * .75);overflow:visible}.list-item-content--row-layout{--p-list-row-template-columns: var(--p-list-leading-width) minmax(0, 1fr) minmax(var(--p-list-trailing-min-width), max-content);--p-list-row-gap: var(--p-list-item-gap);--p-list-row-align-items: center;grid-template-columns:var(--p-list-row-template-columns);gap:var(--p-list-row-gap);align-items:var(--p-list-row-align-items)}.list-item-content--row-layout[role=button]{cursor:pointer}.list-item-content--row-layout[role=button]:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}.list-row-slot{min-width:0;display:flex;align-items:center;gap:8px}.list-row-slot--leading{justify-content:center}.list-row-slot--primary,.list-row-slot--secondary{min-width:0}.list-row-slot--meta{color:var(--p-list-foreground);font-variant-numeric:tabular-nums}.list-row-slot--trailing{flex-wrap:wrap;justify-content:flex-end}.list-row-slot .primary,.list-row-slot .secondary,.list-row-slot .meta,.list-row-slot .trailing{min-width:0}.list-item-main-action{grid-column:1/3;display:grid;grid-template-columns:var(--p-list-leading-width) minmax(0,1fr);align-items:center;gap:var(--p-list-item-gap);min-width:0;padding:0;border:0;background:transparent;color:inherit;text-align:start;font:inherit;cursor:pointer}.list-item-main-action:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px;border-radius:12px}.list-item-leading{display:flex;align-items:center;justify-content:center;min-height:100%}.leading-placeholder{width:24px;height:24px;display:inline-block}.list-item-text{min-width:0;display:grid;align-content:center;gap:2px}.list-item-trailing{min-width:0;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:4px;text-align:end;padding-right:var(--p-list-trailing-padding-right)}.list-item-content--row-layout .list-item-actions{justify-content:flex-end}.list-item-actions{display:flex;align-items:center;justify-content:flex-end;gap:4px;flex-wrap:wrap}.expand-toggle{color:var(--p-list-foreground-muted)}.mat-mdc-list-item .list-item-content{background:var(--p-list-item-surface);border:var(--p-list-item-border);transition:background .15s ease,box-shadow .15s ease,transform .15s ease}.mat-mdc-list-item,.mat-mdc-list-option{height:auto;align-items:stretch;overflow:visible}.mat-mdc-list-item.mdc-list-item--with-one-line,.mat-mdc-list-item.mdc-list-item--with-two-lines,.mat-mdc-list-item.mdc-list-item--with-three-lines,.mat-mdc-list-item-single-line,.mat-mdc-list-item-two-line,.mat-mdc-list-item-three-line,.mat-mdc-list-option.mdc-list-item--with-one-line,.mat-mdc-list-option.mdc-list-item--with-two-lines,.mat-mdc-list-option.mdc-list-item--with-three-lines{height:auto!important}.mdc-list-item{overflow:visible}.density-compact .mat-mdc-list-item,.density-compact .mat-mdc-list-option{min-height:40px}.density-comfortable .mat-mdc-list-item,.density-comfortable .mat-mdc-list-option{min-height:46px}.praxis-list-root:not(.density-compact):not(.density-comfortable) .mat-mdc-list-item,.praxis-list-root:not(.density-compact):not(.density-comfortable) .mat-mdc-list-option{min-height:48px}.mat-mdc-list-item .mdc-list-item__content,.mat-mdc-list-option .mdc-list-item__content,.mat-mdc-list-item .mdc-list-item__primary-text,.mat-mdc-list-option .mdc-list-item__primary-text{display:block!important;width:100%!important;height:auto!important;padding:0!important;margin:0!important;overflow:visible!important;box-sizing:border-box}.mat-mdc-list-item,.mat-mdc-list-option{padding:0!important;box-sizing:border-box}.praxis-list-root mat-list>mat-list-item:not(:last-child),.praxis-list-root mat-selection-list>mat-list-option:not(:last-child){margin-bottom:var(--p-list-item-stack-gap)}.mat-mdc-list-item:hover .list-item-content,.mat-mdc-list-option:hover .list-item-content{background:var(--p-list-item-hover-surface)}.mat-mdc-list-item:active .list-item-content,.mat-mdc-list-option:active .list-item-content{background:var(--p-list-item-active-surface)}.mat-mdc-list-option.mdc-list-item--selected .list-item-content{background:var(--p-list-item-selected-surface);border-color:var(--md-sys-color-outline-variant)}.mat-mdc-list-option.cdk-keyboard-focused .list-item-content,.mat-mdc-list-option.cdk-focused .list-item-content{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}.mat-mdc-list-item:focus-visible .list-item-content{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}.executive-inline-skin{--p-list-leading-width: 56px;--p-list-trailing-min-width: 232px;--p-list-item-padding-x: 14px;--p-list-item-padding-y: 8px;--p-list-item-gap: 10px;--p-list-surface: #f8fafb;--p-list-surface-low: #ffffff;--p-list-item-surface: #ffffff;--p-list-item-hover-surface: #f7fafc;--p-list-item-active-surface: #eef4f8;--p-list-item-selected-surface: #eef4f8;--p-list-foreground: #17324d;--p-list-foreground-muted: #72849a}.executive-inline-skin .list-item-content--row-layout.exec-row-layout{min-height:72px;padding:12px 20px;background:linear-gradient(180deg,#fff,#fbfcfd)!important;border:1px solid #dce5ec!important;border-radius:18px;box-shadow:0 1px 2px #0f223a08,0 4px 14px #0f223a08!important;color:#17324d!important}.executive-inline-skin .mat-mdc-list-item:hover .list-item-content--row-layout.exec-row-layout{background:linear-gradient(180deg,#fff,#f7fafc)!important}.executive-inline-skin .list-item-content--row-layout.exec-row-layout+.item-expansion{margin-left:10px;margin-right:10px}.executive-inline-skin .list-item-content--row-layout.exec-row-layout .list-row-slot{min-height:34px}.executive-inline-skin .list-row-slot--leading{justify-content:center}.executive-inline-skin .list-row-slot--identity{align-items:center;padding-right:4px}.executive-inline-skin .list-row-slot--balance,.executive-inline-skin .list-row-slot--limit,.executive-inline-skin .list-row-slot--risk,.executive-inline-skin .list-row-slot--alerts{justify-content:center;padding-inline:2px}.executive-inline-skin .list-row-slot--owner{justify-content:flex-start;padding-left:0}.executive-inline-skin .list-row-slot--actions{justify-content:flex-end;padding-left:0}.executive-inline-skin .list-row-slot--expand{justify-content:center}.executive-inline-skin .docs-expansion-leading{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:15px;background:linear-gradient(180deg,#edf4f9,#e6eef5);color:#1b5f86;font-size:1rem;font-weight:800;letter-spacing:.02em;box-shadow:0 1px 3px #1b5f861f;border:1px solid #dbe7f0}.executive-inline-skin .exec-balance-metric,.executive-inline-skin .exec-limit-metric,.executive-inline-skin .exec-risk-metric{min-width:0}.executive-inline-skin .exec-balance-metric .p-list-metric,.executive-inline-skin .exec-limit-metric .p-list-metric,.executive-inline-skin .exec-risk-metric .p-list-metric{gap:5px}.executive-inline-skin .exec-balance-metric .p-list-metric__label,.executive-inline-skin .exec-limit-metric .p-list-metric__label,.executive-inline-skin .exec-risk-metric .p-list-metric__label{font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8090a1}.executive-inline-skin .exec-balance-metric .p-list-metric__value,.executive-inline-skin .exec-limit-metric .p-list-metric__value{font-size:.96rem;font-weight:800;letter-spacing:-.02em;color:#0d1f34;line-height:1.05}.executive-inline-skin .exec-limit-metric .p-list-metric__caption{font-size:.66rem;font-weight:700;color:#8090a1}.executive-inline-skin .exec-limit-metric .p-list-metric__progress{width:68px;justify-self:center;height:3px}.executive-inline-skin .exec-risk-metric{min-width:84px}.executive-inline-skin .exec-risk-metric .p-list-metric{justify-items:center}.executive-inline-skin .exec-risk-metric .p-list-metric__main{gap:6px}.executive-inline-skin .exec-risk-metric .p-list-metric__value{font-size:1.02rem;font-weight:800;letter-spacing:-.024em;line-height:1}.executive-inline-skin .exec-risk-metric .p-list-metric__progress{width:56px;justify-self:center;height:3px}.executive-inline-skin .exec-risk-metric .p-list-metric__caption{font-size:.7rem;font-weight:700;line-height:1.1}.executive-inline-skin .exec-risk-metric .p-list-metric__caption--below-progress{justify-self:center;margin-top:-1px}.executive-inline-skin .exec-risk-metric .p-list-metric__icon mat-icon{width:15px;height:15px;font-size:15px}.executive-inline-skin .list-item-actions{gap:6px;flex-wrap:nowrap}.executive-inline-skin .list-row-slot--actions .list-item-actions{justify-content:flex-end}.executive-inline-skin .list-item-actions button,.executive-inline-skin .expand-toggle{width:30px;height:30px;min-width:30px;border-radius:12px;color:#6d7f93!important}.executive-inline-skin .list-item-actions button mat-icon,.executive-inline-skin .expand-toggle mat-icon{width:18px;height:18px;font-size:18px}.executive-inline-skin .item-expansion{position:relative;margin-top:-10px;padding:22px 26px;background:linear-gradient(180deg,#fcfdfe,#f5f8fb);border-color:#e4eaf0;border-radius:0 0 22px 22px;box-shadow:inset 0 1px #ffffffdb}.lead-image{position:relative;width:96px;height:72px;border-radius:12px;overflow:hidden}.lead-image img{width:100%;height:100%;object-fit:cover;display:block}.lead-image .lead-badge{position:absolute;left:8px;bottom:8px}.inline-image{position:relative;width:20px;height:20px;border-radius:4px;overflow:hidden;display:inline-block;vertical-align:middle}.inline-image img{width:100%;height:100%;object-fit:cover;display:block}.inline-image .inline-badge{position:absolute;left:2px;bottom:2px}.model-media .lead-image{width:136px;height:96px;border-radius:16px}.model-media .list-item-content{gap:16px}.model-media .item-card{--p-list-leading-width: 136px}.model-hotel .lead-image{width:160px;height:110px;border-radius:18px}.model-hotel .item-card{--p-list-leading-width: 160px}.primary,.secondary{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.primary{-webkit-line-clamp:1;font-weight:600;color:var(--p-list-foreground)}.secondary{-webkit-line-clamp:1;color:var(--p-list-foreground-muted)}.lines-3 .tertiary{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.item-tile .primary{-webkit-line-clamp:2;font-size:.95rem;line-height:1.25rem}.item-tile .secondary{-webkit-line-clamp:2;font-size:.8rem;line-height:1.1rem}.tertiary{color:var(--p-list-foreground-muted)}.features{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px;color:inherit}.feature{display:inline-flex;align-items:center;gap:6px}.feature-line{display:block}.feature-progress{display:block;width:88px;height:4px;margin-top:6px;border-radius:999px;background:#dbe5eb;overflow:hidden}.feature-progress__value{display:block;height:100%;border-radius:inherit;background:#2f9b69}.meta{color:var(--p-list-foreground);font-size:var(--p-list-meta-size);font-weight:var(--p-list-meta-weight);font-variant-numeric:tabular-nums;white-space:nowrap}.trailing{color:var(--p-list-foreground-muted);margin-left:0;white-space:nowrap}.section-header{font-size:.85rem;color:var(--p-list-foreground-muted);padding:8px 12px}.praxis-list-root mat-list,.praxis-list-root mat-selection-list{display:block;padding-bottom:12px}.praxis-list-root .mat-divider{margin-left:var(--p-list-item-padding-x);margin-right:var(--p-list-item-padding-x)}.item-expansion{margin:0 var(--p-list-item-padding-x) var(--p-list-item-stack-gap);padding:14px 16px;background:color-mix(in srgb,var(--p-list-surface) 88%,white 12%);border:1px solid var(--md-sys-color-outline-variant);border-radius:calc(var(--p-list-radius) * .75)}.item-expansion-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}.expansion-section{min-width:0;display:grid;gap:10px;align-content:start}.expansion-section-title{font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--p-list-foreground-muted)}.expansion-info-list,.expansion-timeline,.expansion-key-value{display:grid;gap:10px}.expansion-info-item,.expansion-timeline-item{display:grid;gap:4px;padding:10px 12px;border-radius:14px;background:var(--p-list-item-surface);border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 72%,transparent 28%)}.expansion-info-title,.expansion-timeline-title{font-size:.92rem;font-weight:600;color:var(--p-list-foreground)}.expansion-info-value,.expansion-timeline-meta,.expansion-timeline-description,.expansion-empty{font-size:.82rem;line-height:1.45;color:var(--p-list-foreground-muted)}.expansion-chip-list{display:flex;flex-wrap:wrap;gap:8px}.expansion-chip{background:var(--p-list-item-surface);border:1px solid var(--md-sys-color-outline-variant)}.expansion-key-value{margin:0}.expansion-key-value-row{display:grid;gap:4px;padding:10px 12px;border-radius:14px;background:var(--p-list-item-surface);border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 72%,transparent 28%)}.expansion-key-value-row dt,.expansion-key-value-row dd{margin:0}.expansion-key-value-row dt{font-size:.78rem;font-weight:600;color:var(--p-list-foreground-muted)}.expansion-key-value-row dd{font-size:.9rem;color:var(--p-list-foreground)}.cards-grid,.tiles-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--p-list-tile-minW),1fr));gap:var(--p-list-tile-gap)}.item-tile{position:relative;display:flex;flex-direction:column;gap:10px;padding:var(--p-list-tile-padding);border-radius:var(--p-list-tile-radius);background:var(--p-list-surface);border:var(--p-list-border);color:var(--p-list-foreground);cursor:pointer;min-height:160px;transition:box-shadow .16s ease-out,border-color .16s ease-out,transform .12s ease-out,background .16s ease-out}.item-tile:hover{box-shadow:var(--md-sys-elevation-level2);border-color:var(--md-sys-color-outline-variant);background:var(--p-list-item-hover-surface)}.item-tile:active{transform:scale(var(--p-list-tile-press-scale));background:var(--p-list-item-active-surface)}.item-tile:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}.tile-media{width:100%;aspect-ratio:var(--p-list-tile-media-ratio);border-radius:var(--p-list-tile-media-radius);background:var(--p-list-item-surface);border:1px solid var(--md-sys-color-outline-variant);display:grid;place-items:center;overflow:hidden}.tile-media img{width:100%;height:100%;object-fit:cover;display:block}.tile-media mat-icon{font-size:28px;height:28px;width:28px;color:var(--p-list-foreground-muted)}.tile-body{display:grid;gap:6px;min-width:0}.tile-meta{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;color:var(--p-list-foreground-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tile-trailing{font-size:.75rem;color:var(--p-list-foreground-muted);white-space:nowrap}.tiles-features{display:flex;flex-wrap:wrap;gap:8px;color:inherit}.tile-status{position:absolute;top:10px;right:10px}.tile-actions{position:absolute;top:8px;left:8px;display:flex;gap:4px;opacity:0;pointer-events:none;transform:translateY(-2px);transition:opacity .16s ease-out,transform .16s ease-out}.item-tile:hover .tile-actions,.item-tile:focus-visible .tile-actions,.item-tile:focus-within .tile-actions{opacity:1;pointer-events:auto;transform:translateY(0)}@media(hover:none){.tile-actions{opacity:1;pointer-events:auto;transform:none}}@media(max-width:600px){.tiles-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}@media(prefers-reduced-motion:reduce){.item-tile,.tile-actions{transition:none}.item-tile:active{transform:none}.item-card{transition:none}.item-card:active{transform:none}}.item-card{padding:var(--p-list-tile-padding);display:flex;flex-direction:column;min-height:160px;position:relative;cursor:pointer;background:var(--p-list-surface);border:var(--p-list-border);border-radius:var(--p-list-tile-radius);box-shadow:var(--p-list-shadow);transition:box-shadow .16s ease-out,border-color .16s ease-out,transform .12s ease-out,background .16s ease-out;--p-list-leading-width: 96px;--p-list-trailing-min-width: 0px}.item-card .list-item-trailing{min-width:var(--p-list-trailing-min-width)}.item-card:hover{box-shadow:var(--md-sys-elevation-level3);border-color:var(--md-sys-color-outline-variant);background:var(--p-list-item-hover-surface)}.item-card:active{transform:scale(var(--p-list-tile-press-scale));background:var(--p-list-item-active-surface)}.item-card:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}.card-actions{display:flex;align-items:center;justify-content:flex-end;gap:4px;padding:6px 8px 4px;border-top:1px solid var(--md-sys-color-outline-variant);margin-top:auto}.status-overlay{position:absolute;top:10px;right:10px;pointer-events:none}.status-overlay .mat-mdc-chip{pointer-events:auto}.leading-icon.mat-icon{width:36px;height:36px;line-height:36px;font-size:20px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.mat-mdc-chip{--mdc-chip-container-height: var(--p-list-chip-height);font-size:var(--p-list-chip-font-size)}.meta .mat-icon{font-size:18px;height:18px;width:18px}.features{overflow:hidden}@keyframes shimmer{0%{background-position:-468px 0}to{background-position:468px 0}}.skeleton{animation-duration:1.2s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:shimmer;animation-timing-function:linear;background:linear-gradient(to right,var(--md-sys-color-surface-container-low) 8%,var(--md-sys-color-surface-container) 18%,var(--md-sys-color-surface-container-low) 33%);background-size:800px 104px;position:relative}.skeleton-avatar{width:32px;height:32px;border-radius:50%}.skeleton-line{height:10px;margin:6px 0;border-radius:6px}.skeleton-chip{width:48px;height:18px;border-radius:999px}.chip-outlined.mat-mdc-chip{background:transparent!important;border:1px solid currentColor}.w-60{width:60%}.w-40{width:40%}.paginator{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:14px;padding:14px 4px 8px;border-top:1px solid var(--md-sys-color-outline-variant);position:relative;z-index:1;background:var(--p-list-surface-low);border-radius:calc(var(--p-list-radius) * .75)}.paginator-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.paginator-meta{display:flex;align-items:center;gap:8px;margin-left:auto}.paginator-page-size{width:120px}.paginator-sort{width:180px}.paginator-search{min-width:220px}.muted{color:var(--p-list-foreground-muted)}@media(max-width:720px){.list-item-content{grid-template-columns:var(--p-list-leading-width) minmax(0,1fr)}.list-item-trailing{grid-column:1/-1;padding-right:0;align-items:flex-start;text-align:start}.item-expansion{margin-left:0;margin-right:0}.paginator{align-items:stretch}.paginator-controls{width:100%}.paginator-meta{width:100%;margin-left:0;justify-content:flex-start}.paginator-page-size,.paginator-sort,.paginator-search{width:100%;min-width:0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i3.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i3.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i3.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: i3.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "component", type: i3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i5.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: 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.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", 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: MatProgressSpinnerModule }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { 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: "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: 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: MatTooltipModule }, { kind: "directive", type: i12.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: PraxisAiAssistantComponent, selector: "praxis-ai-assistant", inputs: ["adapter", "riskPolicy", "allowManualPatchEdit"] }, { kind: "component", type: ExecutiveBadgeComponent, selector: "praxis-executive-badge", inputs: ["ariaLabel", "label", "variant"] }, { kind: "component", type: ExecutiveAlertsComponent, selector: "praxis-executive-alerts", inputs: ["alerts"] }, { kind: "component", type: ExecutiveOwnerComponent, selector: "praxis-executive-owner", inputs: ["name"] }, { kind: "component", type: PraxisRichContent, selector: "praxis-rich-content", inputs: ["document", "nodes", "context", "hostCapabilities", "rootClassName"] }, { kind: "component", type: PraxisListMetricComponent, selector: "praxis-list-metric", inputs: ["metric"] }, { kind: "component", type: PraxisListComposeComponent, selector: "praxis-list-compose", inputs: ["compose"] }, { kind: "component", type: PraxisListRuntimeComponentComponent, selector: "praxis-list-runtime-component", inputs: ["component"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisList, decorators: [{
             type: Component,
@@ -9497,10 +9952,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         ExecutiveBadgeComponent,
                         ExecutiveAlertsComponent,
                         ExecutiveOwnerComponent,
+                        PraxisRichContent,
                         PraxisListMetricComponent,
                         PraxisListComposeComponent,
                         PraxisListRuntimeComponentComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [GenericCrudService, ListDataService, providePraxisListI18n()], template: "<div\n  class=\"praxis-list-root\"\n  [ngClass]=\"skinClasses\"\n  [attr.data-skin-scope]=\"skinScopeId\"\n  [attr.aria-label]=\"config.a11y?.ariaLabel || null\"\n  [attr.aria-labelledby]=\"config.a11y?.ariaLabelledBy || null\"\n>\n  @if (inlineCss) {\n    <style [attr.nonce]=\"cspNonce || null\" [textContent]=\"inlineCss\"></style>\n  }\n\n  @if (enableCustomization) {\n    <div class=\"list-assistant\">\n      <button\n        mat-mini-fab\n        type=\"button\"\n        color=\"primary\"\n        (click)=\"openConfigEditor()\"\n        [matTooltip]=\"configEditorLabel()\"\n        [attr.aria-label]=\"configEditorLabel()\"\n        data-testid=\"praxis-list-open-config-editor\"\n      >\n        <mat-icon [praxisIcon]=\"'edit'\"></mat-icon>\n      </button>\n      <praxis-ai-assistant [adapter]=\"aiAdapter\"></praxis-ai-assistant>\n    </div>\n  }\n\n  <!-- Skeleton while loading -->\n  @if ((loading$ | async) && hasSkeleton()) {\n    @if (isListVariant()) {\n      <mat-list>\n        @for (_ of skeletonItems(); track $index; let i = $index) {\n          <mat-list-item>\n            <div class=\"list-item-content\">\n              <div class=\"list-item-leading\">\n                <div class=\"skeleton skeleton-avatar\"></div>\n              </div>\n              <div class=\"list-item-text\">\n                <div class=\"skeleton skeleton-line w-60\"></div>\n                @if (layoutLines > 1) {\n                  <div class=\"skeleton skeleton-line w-40\"></div>\n                }\n              </div>\n              <div class=\"list-item-trailing\">\n                <div class=\"skeleton skeleton-chip\"></div>\n              </div>\n            </div>\n          </mat-list-item>\n        }\n      </mat-list>\n    } @else {\n      <div class=\"cards-grid\">\n        @for (_ of skeletonItems(); track $index; let i = $index) {\n          <div class=\"item-card\">\n            <div class=\"list-item-content\">\n              <div class=\"list-item-leading\">\n                <div class=\"skeleton skeleton-avatar\"></div>\n              </div>\n              <div class=\"list-item-text\">\n                <div class=\"skeleton skeleton-line w-60\"></div>\n                @if (layoutLines > 1) {\n                  <div class=\"skeleton skeleton-line w-40\"></div>\n                }\n              </div>\n              <div class=\"list-item-trailing\">\n                <div class=\"skeleton skeleton-chip\"></div>\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n    }\n  } @else {\n    <ng-container *ngTemplateOutlet=\"notLoading\"></ng-container>\n  }\n\n  <ng-template #notLoading>\n    <!-- Empty state -->\n    @if (items$ | async; as all) {\n      @if (all.length === 0) {\n        <div class=\"section-header\">\n          @if (emptyStateTemplate(); as empty) {\n            @switch (empty.type) {\n              @case (\"icon\") {\n                <mat-icon\n                  [praxisIcon]=\"empty.value\"\n                  [ngClass]=\"empty.class\"\n                  [color]=\"isThemeColor(empty.color) ? empty.color : undefined\"\n                  [style.cssText]=\"\n                    (empty.style ? empty.style + ';' : '') +\n                    iconStyle(empty.color)\n                  \"\n                ></mat-icon>\n              }\n              @case (\"image\") {\n                <span\n                  class=\"inline-image\"\n                  [ngClass]=\"empty.class\"\n                  [style.cssText]=\"empty.style\"\n                >\n                  <img\n                    [src]=\"empty.value\"\n                    [alt]=\"config.templating?.emptyState?.imageAlt || ''\"\n                  />\n                  @if (empty.badge?.value) {\n                    <mat-chip\n                      class=\"inline-badge\"\n                      [color]=\"\n                        isThemeColor(empty.badge?.color)\n                          ? empty.badge?.color\n                          : undefined\n                      \"\n                      [ngClass]=\"\n                        (empty.badge?.variant || 'filled') === 'outlined'\n                          ? 'chip-outlined'\n                          : ''\n                      \"\n                      [style.cssText]=\"\n                        chipStyle(empty.badge?.color, empty.badge?.variant)\n                      \"\n                      >{{ empty.badge?.value }}</mat-chip\n                    >\n                  }\n                </span>\n              }\n              @case (\"chip\") {\n                <mat-chip\n                  [color]=\"isThemeColor(empty.color) ? empty.color : undefined\"\n                  [ngClass]=\"[\n                    empty.class || '',\n                    (empty.variant || 'filled') === 'outlined'\n                      ? 'chip-outlined'\n                      : '',\n                  ]\"\n                  [style.cssText]=\"\n                    chipStyle(empty.color, empty.variant) +\n                    (empty.style ? ';' + empty.style : '')\n                  \"\n                  >{{ empty.value }}</mat-chip\n                >\n              }\n              @case (\"rating\") {\n                <span [ngClass]=\"empty.class\" [style.cssText]=\"empty.style\">\n                  @for (\n                    _ of ratingRange(empty);\n                    track $index;\n                    let idx = $index\n                  ) {\n                    <mat-icon\n                      [praxisIcon]=\"starIcon(idx, empty.value)\"\n                      [color]=\"ratingThemeColor(empty)\"\n                      [style.cssText]=\"ratingIconStyle(empty)\"\n                    ></mat-icon>\n                  }\n                </span>\n              }\n              @case (\"html\") {\n                <span\n                  [ngClass]=\"empty.class\"\n                  [style.cssText]=\"empty.style\"\n                  [innerHTML]=\"empty.value\"\n                ></span>\n              }\n              @case (\"metric\") {\n                <praxis-list-metric [metric]=\"empty\"></praxis-list-metric>\n              }\n              @case (\"compose\") {\n                <praxis-list-compose [compose]=\"empty\"></praxis-list-compose>\n              }\n              @case (\"component\") {\n                <praxis-list-runtime-component\n                  [component]=\"empty\"\n                ></praxis-list-runtime-component>\n              }\n              @default {\n                <span [ngClass]=\"empty.class\" [style.cssText]=\"empty.style\">{{\n                  empty.value\n                }}</span>\n              }\n            }\n          }\n        </div>\n      }\n    }\n\n    <ng-template\n      #rowLayoutNode\n      let-node\n      let-slot=\"slot\"\n      let-imageAlt=\"imageAlt\"\n    >\n      @switch (node?.type) {\n        @case (\"icon\") {\n          <mat-icon\n            [praxisIcon]=\"node?.value\"\n            [ngClass]=\"node?.class\"\n            [color]=\"isThemeColor(node?.color) ? node?.color : undefined\"\n            [style.cssText]=\"\n              ((node?.style || '') ? node.style + ';' : '') +\n              iconStyle(node?.color)\n            \"\n          ></mat-icon>\n        }\n        @case (\"image\") {\n          <span\n            class=\"inline-image\"\n            [ngClass]=\"node?.class\"\n            [style.cssText]=\"node?.style\"\n          >\n            <img [src]=\"node?.value\" [alt]=\"node?.imageAlt || imageAlt || ''\" />\n            @if (node?.badge?.value) {\n              <mat-chip\n                class=\"inline-badge\"\n                [color]=\"\n                  isThemeColor(node?.badge?.color)\n                    ? node?.badge?.color\n                    : undefined\n                \"\n                [ngClass]=\"\n                  (node?.badge?.variant || 'filled') === 'outlined'\n                    ? 'chip-outlined'\n                    : ''\n                \"\n                [style.cssText]=\"\n                  chipStyle(node?.badge?.color, node?.badge?.variant)\n                \"\n              >\n                {{ node?.badge?.value }}\n              </mat-chip>\n            }\n          </span>\n        }\n        @case (\"chip\") {\n          <mat-chip\n            [color]=\"isThemeColor(node?.color) ? node?.color : undefined\"\n            [ngClass]=\"[\n              node?.class || '',\n              (node?.variant || 'filled') === 'outlined' ? 'chip-outlined' : '',\n            ]\"\n            [style.cssText]=\"\n              chipStyle(node?.color, node?.variant) +\n              (node?.style ? ';' + node.style : '')\n            \"\n          >\n            {{ node?.value }}\n          </mat-chip>\n        }\n        @case (\"rating\") {\n          <span [ngClass]=\"node?.class\" [style.cssText]=\"node?.style\">\n            @for (_ of ratingRange(node); track $index; let idx = $index) {\n              <mat-icon\n                [praxisIcon]=\"starIcon(idx, node?.value)\"\n                [color]=\"ratingThemeColor(node)\"\n                [style.cssText]=\"ratingIconStyle(node)\"\n              ></mat-icon>\n            }\n          </span>\n        }\n        @case (\"html\") {\n          <span\n            [ngClass]=\"node?.class\"\n            [style.cssText]=\"node?.style\"\n            [innerHTML]=\"node?.value\"\n          ></span>\n        }\n        @case (\"metric\") {\n          <praxis-list-metric [metric]=\"node\"></praxis-list-metric>\n        }\n        @case (\"compose\") {\n          <praxis-list-compose [compose]=\"node\"></praxis-list-compose>\n        }\n        @case (\"component\") {\n          <praxis-list-runtime-component\n            [component]=\"node\"\n          ></praxis-list-runtime-component>\n        }\n        @default {\n          <span [ngClass]=\"node?.class\" [style.cssText]=\"node?.style\">\n            @if (slot === \"meta\" && config.templating?.metaPrefixIcon; as mpi) {\n              <mat-icon [praxisIcon]=\"mpi\"></mat-icon>\n            }\n            {{ node?.value }}\n          </span>\n        }\n      }\n    </ng-template>\n\n    <ng-template\n      #listRowLayout\n      let-item\n      let-index=\"index\"\n      let-sectionKey=\"sectionKey\"\n      let-clickable=\"clickable\"\n    >\n      <div\n        class=\"list-item-content\"\n        [ngClass]=\"rowLayoutItemClass(item)\"\n        [attr.style]=\"rowLayoutItemStyle(item)\"\n        [attr.role]=\"clickable ? 'button' : null\"\n        [attr.tabindex]=\"clickable ? '0' : null\"\n        [attr.aria-label]=\"clickable ? itemAriaLabel(item) : null\"\n        [attr.aria-expanded]=\"\n          clickable && expansionOwnedByRow() ? isExpanded(item, index) : null\n        \"\n        [attr.aria-controls]=\"\n          clickable && expansionOwnedByRow()\n            ? expandRegionId(item, index)\n            : null\n        \"\n        (click)=\"clickable ? onRowActivate(item, index, sectionKey) : null\"\n        (keydown.enter)=\"clickable ? onRowActivate(item, index, sectionKey) : null\"\n        (keydown.space)=\"\n          onRowSpaceActivate($event, clickable, item, index, sectionKey)\n        \"\n      >\n        @for (column of rowLayoutColumns(); track rowLayoutTrackColumn($index, column)) {\n          <div\n            [attr.data-row-slot]=\"column.slot\"\n            [ngClass]=\"rowLayoutColumnClass(column)\"\n            [attr.style]=\"rowLayoutColumnStyle(column)\"\n          >\n            @if (column.slot === \"leading\") {\n              @if (rowLayoutSlot(item, column.slot); as lead) {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    rowLayoutNode;\n                    context: {\n                      $implicit: lead,\n                      slot: column.slot,\n                      imageAlt: rowLayoutImageAlt(column.slot),\n                    }\n                  \"\n                ></ng-container>\n              } @else {\n                <span class=\"leading-placeholder\"></span>\n              }\n            } @else if (column.slot === \"trailing\") {\n              @if (rowLayoutSlot(item, column.slot); as trailingNode) {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    rowLayoutNode;\n                    context: {\n                      $implicit: trailingNode,\n                      slot: column.slot,\n                      imageAlt: rowLayoutImageAlt(column.slot),\n                    }\n                  \"\n                ></ng-container>\n              }\n              @if (showExpandIcon(\"trailing\")) {\n                <button\n                  mat-icon-button\n                  type=\"button\"\n                  class=\"expand-toggle\"\n                  [attr.aria-label]=\"expandToggleAriaLabel(item, index)\"\n                  [attr.aria-expanded]=\"\n                    expansionOwnedByIcon() ? isExpanded(item, index) : null\n                  \"\n                  [attr.aria-controls]=\"\n                    expansionOwnedByIcon()\n                      ? expandRegionId(item, index)\n                      : null\n                  \"\n                  (click)=\"onExpandToggle($event, item, index)\"\n                >\n                  <mat-icon\n                    [praxisIcon]=\"\n                      isExpanded(item, index) ? 'expand_less' : 'expand_more'\n                    \"\n                  ></mat-icon>\n                </button>\n              }\n              @if ((visibleActions(item, \"trailing\") || []).length) {\n                <div\n                  class=\"list-item-actions\"\n                  (click)=\"$event.stopPropagation()\"\n                  (keydown.enter)=\"onActionKeydown($event)\"\n                  (keydown.space)=\"onActionKeydown($event)\"\n                >\n                  @for (\n                    action of visibleActions(item, \"trailing\");\n                    let aidx = $index;\n                    track action?.id ?? $index\n                  ) {\n                    @if ((action.kind || \"icon\") === \"icon\") {\n                      <button\n                        mat-icon-button\n                        [color]=\"\n                          isThemeColor(action.color) ? action.color : undefined\n                        \"\n                        (click)=\"onActionClick($event, action.id, item, index)\"\n                        [attr.aria-label]=\"action.label || action.id\"\n                        [disabled]=\"isActionLoading(action.id, item, index)\"\n                        [ngClass]=\"{\n                          'action-loading': isActionLoading(\n                            action.id,\n                            item,\n                            index\n                          ),\n                        }\"\n                      >\n                        @if (isActionLoading(action.id, item, index)) {\n                          <mat-progress-spinner\n                            class=\"action-spinner\"\n                            mode=\"indeterminate\"\n                            diameter=\"16\"\n                            strokeWidth=\"3\"\n                          ></mat-progress-spinner>\n                        } @else {\n                          <mat-icon\n                            [praxisIcon]=\"action.icon\"\n                            [style.cssText]=\"iconStyle(action.color)\"\n                          ></mat-icon>\n                        }\n                      </button>\n                    } @else {\n                      @if (action.buttonVariant === \"stroked\") {\n                        <button\n                          mat-stroked-button\n                          [color]=\"\n                            isThemeColor(action.color) ? action.color : undefined\n                          \"\n                          [style.cssText]=\"buttonStyle(action.color, 'stroked')\"\n                          (click)=\"onActionClick($event, action.id, item, index)\"\n                          [attr.aria-label]=\"action.label || action.id\"\n                          [disabled]=\"isActionLoading(action.id, item, index)\"\n                          [ngClass]=\"{\n                            'action-loading': isActionLoading(\n                              action.id,\n                              item,\n                              index\n                            ),\n                          }\"\n                        >\n                          @if (isActionLoading(action.id, item, index)) {\n                            <mat-progress-spinner\n                              class=\"action-spinner\"\n                              mode=\"indeterminate\"\n                              diameter=\"16\"\n                              strokeWidth=\"3\"\n                            ></mat-progress-spinner>\n                          } @else {\n                            {{ action.label || action.id }}\n                          }\n                        </button>\n                      }\n                      @if (action.buttonVariant === \"raised\") {\n                        <button\n                          mat-raised-button\n                          [color]=\"\n                            isThemeColor(action.color) ? action.color : undefined\n                          \"\n                          [style.cssText]=\"buttonStyle(action.color, 'raised')\"\n                          (click)=\"onActionClick($event, action.id, item, index)\"\n                          [attr.aria-label]=\"action.label || action.id\"\n                          [disabled]=\"isActionLoading(action.id, item, index)\"\n                          [ngClass]=\"{\n                            'action-loading': isActionLoading(\n                              action.id,\n                              item,\n                              index\n                            ),\n                          }\"\n                        >\n                          @if (isActionLoading(action.id, item, index)) {\n                            <mat-progress-spinner\n                              class=\"action-spinner\"\n                              mode=\"indeterminate\"\n                              diameter=\"16\"\n                              strokeWidth=\"3\"\n                            ></mat-progress-spinner>\n                          } @else {\n                            {{ action.label || action.id }}\n                          }\n                        </button>\n                      }\n                      @if (!action.buttonVariant || action.buttonVariant === \"flat\") {\n                        <button\n                          mat-flat-button\n                          [color]=\"\n                            isThemeColor(action.color) ? action.color : undefined\n                          \"\n                          [style.cssText]=\"buttonStyle(action.color, 'flat')\"\n                          (click)=\"onActionClick($event, action.id, item, index)\"\n                          [attr.aria-label]=\"action.label || action.id\"\n                          [disabled]=\"isActionLoading(action.id, item, index)\"\n                          [ngClass]=\"{\n                            'action-loading': isActionLoading(\n                              action.id,\n                              item,\n                              index\n                            ),\n                          }\"\n                        >\n                          @if (isActionLoading(action.id, item, index)) {\n                            <mat-progress-spinner\n                              class=\"action-spinner\"\n                              mode=\"indeterminate\"\n                              diameter=\"16\"\n                              strokeWidth=\"3\"\n                            ></mat-progress-spinner>\n                          } @else {\n                            {{ action.label || action.id }}\n                          }\n                        </button>\n                      }\n                    }\n                  }\n                </div>\n              }\n            } @else if (column.slot === \"actions\") {\n              @if ((visibleActions(item, \"actions\") || []).length) {\n                <div\n                  class=\"list-item-actions\"\n                  (click)=\"$event.stopPropagation()\"\n                  (keydown.enter)=\"onActionKeydown($event)\"\n                  (keydown.space)=\"onActionKeydown($event)\"\n                >\n                  @for (\n                    action of visibleActions(item, \"actions\");\n                    let aidx = $index;\n                    track action?.id ?? $index\n                  ) {\n                    @if ((action.kind || \"icon\") === \"icon\") {\n                      <button\n                        mat-icon-button\n                        [color]=\"\n                          isThemeColor(action.color) ? action.color : undefined\n                        \"\n                        (click)=\"onActionClick($event, action.id, item, index)\"\n                        [attr.aria-label]=\"action.label || action.id\"\n                        [disabled]=\"isActionLoading(action.id, item, index)\"\n                        [ngClass]=\"{\n                          'action-loading': isActionLoading(\n                            action.id,\n                            item,\n                            index\n                          ),\n                        }\"\n                      >\n                        @if (isActionLoading(action.id, item, index)) {\n                          <mat-progress-spinner\n                            class=\"action-spinner\"\n                            mode=\"indeterminate\"\n                            diameter=\"16\"\n                            strokeWidth=\"3\"\n                          ></mat-progress-spinner>\n                        } @else {\n                          <mat-icon\n                            [praxisIcon]=\"action.icon\"\n                            [style.cssText]=\"iconStyle(action.color)\"\n                          ></mat-icon>\n                        }\n                      </button>\n                    } @else {\n                      @if (action.buttonVariant === \"stroked\") {\n                        <button\n                          mat-stroked-button\n                          [color]=\"\n                            isThemeColor(action.color) ? action.color : undefined\n                          \"\n                          [style.cssText]=\"buttonStyle(action.color, 'stroked')\"\n                          (click)=\"onActionClick($event, action.id, item, index)\"\n                          [attr.aria-label]=\"action.label || action.id\"\n                          [disabled]=\"isActionLoading(action.id, item, index)\"\n                          [ngClass]=\"{\n                            'action-loading': isActionLoading(\n                              action.id,\n                              item,\n                              index\n                            ),\n                          }\"\n                        >\n                          @if (isActionLoading(action.id, item, index)) {\n                            <mat-progress-spinner\n                              class=\"action-spinner\"\n                              mode=\"indeterminate\"\n                              diameter=\"16\"\n                              strokeWidth=\"3\"\n                            ></mat-progress-spinner>\n                          } @else {\n                            {{ action.label || action.id }}\n                          }\n                        </button>\n                      }\n                      @if (action.buttonVariant === \"raised\") {\n                        <button\n                          mat-raised-button\n                          [color]=\"\n                            isThemeColor(action.color) ? action.color : undefined\n                          \"\n                          [style.cssText]=\"buttonStyle(action.color, 'raised')\"\n                          (click)=\"onActionClick($event, action.id, item, index)\"\n                          [attr.aria-label]=\"action.label || action.id\"\n                          [disabled]=\"isActionLoading(action.id, item, index)\"\n                          [ngClass]=\"{\n                            'action-loading': isActionLoading(\n                              action.id,\n                              item,\n                              index\n                            ),\n                          }\"\n                        >\n                          @if (isActionLoading(action.id, item, index)) {\n                            <mat-progress-spinner\n                              class=\"action-spinner\"\n                              mode=\"indeterminate\"\n                              diameter=\"16\"\n                              strokeWidth=\"3\"\n                            ></mat-progress-spinner>\n                          } @else {\n                            {{ action.label || action.id }}\n                          }\n                        </button>\n                      }\n                      @if (!action.buttonVariant || action.buttonVariant === \"flat\") {\n                        <button\n                          mat-flat-button\n                          [color]=\"\n                            isThemeColor(action.color) ? action.color : undefined\n                          \"\n                          [style.cssText]=\"buttonStyle(action.color, 'flat')\"\n                          (click)=\"onActionClick($event, action.id, item, index)\"\n                          [attr.aria-label]=\"action.label || action.id\"\n                          [disabled]=\"isActionLoading(action.id, item, index)\"\n                          [ngClass]=\"{\n                            'action-loading': isActionLoading(\n                              action.id,\n                              item,\n                              index\n                            ),\n                          }\"\n                        >\n                          @if (isActionLoading(action.id, item, index)) {\n                            <mat-progress-spinner\n                              class=\"action-spinner\"\n                              mode=\"indeterminate\"\n                              diameter=\"16\"\n                              strokeWidth=\"3\"\n                            ></mat-progress-spinner>\n                          } @else {\n                            {{ action.label || action.id }}\n                          }\n                        </button>\n                      }\n                    }\n                  }\n                </div>\n              }\n            } @else if (column.slot === \"expand\") {\n              @if (showExpandIcon(\"expand\")) {\n                <button\n                  mat-icon-button\n                  type=\"button\"\n                  class=\"expand-toggle\"\n                  [attr.aria-label]=\"expandToggleAriaLabel(item, index)\"\n                  [attr.aria-expanded]=\"\n                    expansionOwnedByIcon() ? isExpanded(item, index) : null\n                  \"\n                  [attr.aria-controls]=\"\n                    expansionOwnedByIcon()\n                      ? expandRegionId(item, index)\n                      : null\n                  \"\n                  (click)=\"onExpandToggle($event, item, index)\"\n                >\n                  <mat-icon\n                    [praxisIcon]=\"\n                      isExpanded(item, index) ? 'expand_less' : 'expand_more'\n                    \"\n                  ></mat-icon>\n                </button>\n              }\n            } @else if (rowLayoutSlot(item, column.slot); as slotNode) {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  rowLayoutNode;\n                  context: {\n                    $implicit: slotNode,\n                    slot: column.slot,\n                    imageAlt: rowLayoutImageAlt(column.slot),\n                  }\n                \"\n              ></ng-container>\n            }\n          </div>\n        }\n      </div>\n    </ng-template>\n\n    <!-- List variant -->\n    @if (isListVariant()) {\n      <!-- Selection list -->\n      @if (isSelectionEnabled()) {\n        <mat-selection-list\n          [multiple]=\"config.selection?.mode === 'multiple'\"\n          [formControl]=\"boundControl\"\n          (selectionChange)=\"onSelectionChange($event)\"\n        >\n          @for (\n            section of sections$ | async;\n            track trackBySection($index, section)\n          ) {\n            @if (section.key) {\n              <div class=\"section-header mat-subheader\">\n                @if (sectionHeaderTemplate(section.key); as sh) {\n                  @switch (sh.type) {\n                    @case (\"icon\") {\n                      <mat-icon\n                        [praxisIcon]=\"sh.value\"\n                        [ngClass]=\"sh.class\"\n                        [color]=\"isThemeColor(sh.color) ? sh.color : undefined\"\n                        [style.cssText]=\"\n                          (sh.style ? sh.style + ';' : '') + iconStyle(sh.color)\n                        \"\n                      ></mat-icon>\n                    }\n                    @case (\"image\") {\n                      <span\n                        class=\"inline-image\"\n                        [ngClass]=\"sh.class\"\n                        [style.cssText]=\"sh.style\"\n                      >\n                        <img\n                          [src]=\"sh.value\"\n                          [alt]=\"\n                            config.templating?.sectionHeader?.imageAlt || ''\n                          \"\n                        />\n                        @if (sh.badge?.value) {\n                          <mat-chip\n                            class=\"inline-badge\"\n                            [color]=\"\n                              isThemeColor(sh.badge?.color)\n                                ? sh.badge?.color\n                                : undefined\n                            \"\n                            [ngClass]=\"\n                              (sh.badge?.variant || 'filled') === 'outlined'\n                                ? 'chip-outlined'\n                                : ''\n                            \"\n                            [style.cssText]=\"\n                              chipStyle(sh.badge?.color, sh.badge?.variant)\n                            \"\n                            >{{ sh.badge?.value }}</mat-chip\n                          >\n                        }\n                      </span>\n                    }\n                    @case (\"chip\") {\n                      <mat-chip\n                        [color]=\"isThemeColor(sh.color) ? sh.color : undefined\"\n                        [ngClass]=\"[\n                          sh.class || '',\n                          (sh.variant || 'filled') === 'outlined'\n                            ? 'chip-outlined'\n                            : '',\n                        ]\"\n                        [style.cssText]=\"\n                          chipStyle(sh.color, sh.variant) +\n                          (sh.style ? ';' + sh.style : '')\n                        \"\n                        >{{ sh.value }}</mat-chip\n                      >\n                    }\n                    @case (\"rating\") {\n                      <span [ngClass]=\"sh.class\" [style.cssText]=\"sh.style\">\n                        @for (\n                          _ of ratingRange(sh);\n                          track $index;\n                          let idx = $index\n                        ) {\n                          <mat-icon\n                            [praxisIcon]=\"starIcon(idx, sh.value)\"\n                            [color]=\"ratingThemeColor(sh)\"\n                            [style.cssText]=\"ratingIconStyle(sh)\"\n                          ></mat-icon>\n                        }\n                      </span>\n                    }\n                    @case (\"html\") {\n                      <span\n                        [ngClass]=\"sh.class\"\n                        [style.cssText]=\"sh.style\"\n                        [innerHTML]=\"sh.value\"\n                      ></span>\n                    }\n                    @case (\"metric\") {\n                      <praxis-list-metric [metric]=\"sh\"></praxis-list-metric>\n                    }\n                    @case (\"compose\") {\n                      <praxis-list-compose [compose]=\"sh\"></praxis-list-compose>\n                    }\n                    @case (\"component\") {\n                      <praxis-list-runtime-component\n                        [component]=\"sh\"\n                      ></praxis-list-runtime-component>\n                    }\n                    @default {\n                      <span [ngClass]=\"sh.class\" [style.cssText]=\"sh.style\">{{\n                        sh.value\n                      }}</span>\n                    }\n                  }\n                }\n              </div>\n            }\n            @for (\n              item of section.items;\n              track trackByItem($index, item);\n              let i = $index\n            ) {\n              <mat-list-option\n                [value]=\"item\"\n                [attr.aria-label]=\"itemAriaLabel(item)\"\n              >\n                @if (hasRowLayoutGrid()) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      listRowLayout;\n                      context: {\n                        $implicit: item,\n                        index: i,\n                        sectionKey: section.key || undefined,\n                        clickable: false,\n                      }\n                    \"\n                  ></ng-container>\n                } @else {\n                <div\n                  class=\"list-item-content\"\n                  [ngClass]=\"itemRuleClass(item)\"\n                  [attr.style]=\"itemRuleStyle(item)\"\n                >\n                  <div class=\"list-item-leading\">\n                    @if (leading(item); as lead) {\n                      @switch (lead.type) {\n                        @case (\"icon\") {\n                          <mat-icon\n                            [praxisIcon]=\"lead.value\"\n                            [ngClass]=\"lead.class\"\n                            [color]=\"\n                              isThemeColor(lead.color) ? lead.color : undefined\n                            \"\n                            [style.cssText]=\"\n                              (lead.style ? lead.style + ';' : '') +\n                              iconStyle(lead.color)\n                            \"\n                          ></mat-icon>\n                        }\n                        @case (\"image\") {\n                          <div\n                            class=\"lead-image\"\n                            [ngClass]=\"lead.class\"\n                            [style.cssText]=\"lead.style\"\n                          >\n                            <img\n                              [src]=\"lead.value\"\n                              [alt]=\"config.templating?.leading?.imageAlt || ''\"\n                            />\n                            @if (lead.badge?.value) {\n                              <mat-chip\n                                class=\"lead-badge\"\n                                [color]=\"\n                                  isThemeColor(lead.badge?.color)\n                                    ? lead.badge?.color\n                                    : undefined\n                                \"\n                                [ngClass]=\"\n                                  (lead.badge?.variant || 'filled') ===\n                                  'outlined'\n                                    ? 'chip-outlined'\n                                    : ''\n                                \"\n                                [style.cssText]=\"\n                                  chipStyle(\n                                    lead.badge?.color,\n                                    lead.badge?.variant\n                                  )\n                                \"\n                                >{{ lead.badge?.value }}</mat-chip\n                              >\n                            }\n                          </div>\n                        }\n                        @case (\"text\") {\n                          <span\n                            [ngClass]=\"lead.class\"\n                            [style.cssText]=\"lead.style\"\n                            >{{ lead.value }}</span\n                          >\n                        }\n                        @case (\"chip\") {\n                          <mat-chip\n                            [color]=\"\n                              isThemeColor(lead.color) ? lead.color : undefined\n                            \"\n                            [ngClass]=\"\n                              (lead.variant || 'filled') === 'outlined'\n                                ? 'chip-outlined'\n                                : ''\n                            \"\n                            [style.cssText]=\"\n                              chipStyle(lead.color, lead.variant)\n                            \"\n                            >{{ lead.value }}</mat-chip\n                          >\n                        }\n                        @case (\"rating\") {\n                          <span\n                            [ngClass]=\"lead.class\"\n                            [style.cssText]=\"lead.style\"\n                          >\n                            @for (\n                              _ of ratingRange(lead);\n                              track $index;\n                              let idx = $index\n                            ) {\n                              <mat-icon\n                                [praxisIcon]=\"starIcon(idx, lead.value)\"\n                                [color]=\"ratingThemeColor(lead)\"\n                                [style.cssText]=\"ratingIconStyle(lead)\"\n                              ></mat-icon>\n                            }\n                          </span>\n                        }\n                        @case (\"html\") {\n                          <span\n                            [ngClass]=\"lead.class\"\n                            [style.cssText]=\"lead.style\"\n                            [innerHTML]=\"lead.value\"\n                          ></span>\n                        }\n                        @case (\"metric\") {\n                          <praxis-list-metric [metric]=\"lead\"></praxis-list-metric>\n                        }\n                        @case (\"compose\") {\n                          <praxis-list-compose\n                            [compose]=\"lead\"\n                          ></praxis-list-compose>\n                        }\n                        @case (\"component\") {\n                          <praxis-list-runtime-component\n                            [component]=\"lead\"\n                          ></praxis-list-runtime-component>\n                        }\n                        @default {\n                          <span\n                            [ngClass]=\"lead.class\"\n                            [style.cssText]=\"lead.style\"\n                            >{{ lead.value }}</span\n                          >\n                        }\n                      }\n                    } @else {\n                      <span class=\"leading-placeholder\"></span>\n                    }\n                  </div>\n                  <div class=\"list-item-text\">\n                    <div\n                      class=\"primary\"\n                      [ngClass]=\"primary(item)?.class\"\n                      [style.cssText]=\"primary(item)?.style\"\n                    >\n                      @if (primary(item)?.type === \"metric\") {\n                        <praxis-list-metric\n                          [metric]=\"primary(item)\"\n                        ></praxis-list-metric>\n                      } @else if (primary(item)?.type === \"compose\") {\n                        <praxis-list-compose\n                          [compose]=\"primary(item)\"\n                        ></praxis-list-compose>\n                      } @else if (primary(item)?.type === \"component\") {\n                        <praxis-list-runtime-component\n                          [component]=\"primary(item)\"\n                        ></praxis-list-runtime-component>\n                      } @else {\n                        {{ primary(item)?.value }}\n                      }\n                    </div>\n                    @if (layoutLines > 1) {\n                      <div\n                        class=\"secondary\"\n                        [ngClass]=\"secondary(item)?.class\"\n                        [style.cssText]=\"secondary(item)?.style\"\n                      >\n                        @if (secondary(item)?.type === \"metric\") {\n                          <praxis-list-metric\n                            [metric]=\"secondary(item)\"\n                          ></praxis-list-metric>\n                        } @else if (secondary(item)?.type === \"compose\") {\n                          <praxis-list-compose\n                            [compose]=\"secondary(item)\"\n                          ></praxis-list-compose>\n                        } @else if (secondary(item)?.type === \"component\") {\n                          <praxis-list-runtime-component\n                            [component]=\"secondary(item)\"\n                          ></praxis-list-runtime-component>\n                        } @else {\n                          {{ secondary(item)?.value }}\n                        }\n                      </div>\n                    }\n                    @if (meta(item); as m) {\n                      @if (\n                        (config.templating?.metaPlacement === \"line\" &&\n                          (m?.type === \"text\" ||\n                            m?.type === \"date\" ||\n                            m?.type === \"currency\")) ||\n                        (layoutLines > 2 &&\n                          (m?.type === \"text\" ||\n                            m?.type === \"date\" ||\n                            m?.type === \"currency\"))\n                      ) {\n                        <div\n                          class=\"tertiary\"\n                          [ngClass]=\"m.class\"\n                          [style.cssText]=\"m.style\"\n                        >\n                          @if (config.templating?.metaPrefixIcon; as mpi) {\n                            <mat-icon [praxisIcon]=\"mpi\"></mat-icon>\n                          }\n                          {{ m.value }}\n                        </div>\n                      }\n                    }\n                    @if (featuresVisible()) {\n                      <div class=\"features\">\n                        @for (\n                          f of config.templating?.features || [];\n                          track $index;\n                          let fi = $index\n                        ) {\n                          <span\n                            class=\"feature\"\n                            [ngClass]=\"\n                              featureSemanticClass(item, f.expr, f.class)\n                            \"\n                          >\n                            @if (f.icon && featuresMode() !== \"labels-only\") {\n                              <mat-icon [praxisIcon]=\"f.icon\"></mat-icon>\n                            }\n                            @if (featuresMode() !== \"icons-only\") {\n                              <span\n                                [ngClass]=\"f.class\"\n                                [style.cssText]=\"f.style\"\n                              >\n                                @for (\n                                  line of featureLabelLines(item, f.expr);\n                                  track $index\n                                ) {\n                                  <span class=\"feature-line\">{{ line }}</span>\n                                }\n                              </span>\n                            }\n                            @if (\n                              featureProgressPercent(item, f.expr, f.class);\n                              as progress\n                            ) {\n                              <span class=\"feature-progress\" aria-hidden=\"true\">\n                                <span\n                                  class=\"feature-progress__value\"\n                                  [style.width.%]=\"progress\"\n                                ></span>\n                              </span>\n                            }\n                          </span>\n                        }\n                      </div>\n                    }\n                  </div>\n                  <div class=\"list-item-trailing\">\n                    @if (meta(item); as m) {\n                      @if (\n                        !(\n                          (config.templating?.metaPlacement === \"line\" ||\n                            layoutLines > 2) &&\n                          (m?.type === \"text\" ||\n                            m?.type === \"date\" ||\n                            m?.type === \"currency\")\n                        )\n                      ) {\n                        <div\n                          class=\"meta\"\n                          [ngClass]=\"m.class\"\n                          [style.cssText]=\"m.style\"\n                        >\n                          @switch (m.type) {\n                            @case (\"chip\") {\n                              <mat-chip\n                                [color]=\"\n                                  isThemeColor(m.color) ? m.color : undefined\n                                \"\n                                [ngClass]=\"\n                                  (m.variant || 'filled') === 'outlined'\n                                    ? 'chip-outlined'\n                                    : ''\n                                \"\n                                [style.cssText]=\"chipStyle(m.color, m.variant)\"\n                                >{{ m.value }}</mat-chip\n                              >\n                            }\n                            @case (\"rating\") {\n                              @for (\n                                _ of ratingRange(m);\n                                track $index;\n                                let idx = $index\n                              ) {\n                                <mat-icon\n                                  [praxisIcon]=\"starIcon(idx, m.value)\"\n                                  [color]=\"ratingThemeColor(m)\"\n                                  [style.cssText]=\"ratingIconStyle(m)\"\n                                ></mat-icon>\n                              }\n                            }\n                            @case (\"icon\") {\n                              <mat-icon\n                                [praxisIcon]=\"m.value\"\n                                [color]=\"\n                                  isThemeColor(m.color) ? m.color : undefined\n                                \"\n                                [style.cssText]=\"iconStyle(m.color)\"\n                              ></mat-icon>\n                            }\n                            @case (\"image\") {\n                              <span class=\"inline-image\"\n                                ><img [src]=\"m.value\" [alt]=\"m.imageAlt || ''\"\n                              /></span>\n                            }\n                            @case (\"html\") {\n                              <span [innerHTML]=\"m.value\"></span>\n                            }\n                            @case (\"metric\") {\n                              <praxis-list-metric [metric]=\"m\"></praxis-list-metric>\n                            }\n                            @case (\"compose\") {\n                              <praxis-list-compose\n                                [compose]=\"m\"\n                              ></praxis-list-compose>\n                            }\n                            @case (\"component\") {\n                              <praxis-list-runtime-component\n                                [component]=\"m\"\n                              ></praxis-list-runtime-component>\n                            }\n                            @default {\n                              <span>\n                                @if (\n                                  config.templating?.metaPrefixIcon;\n                                  as mpi2\n                                ) {\n                                  <mat-icon [praxisIcon]=\"mpi2\"></mat-icon>\n                                }\n                                {{ m.value }}</span\n                              >\n                            }\n                          }\n                        </div>\n                      }\n                    }\n                    @if (trailing(item); as tr) {\n                      <div\n                        class=\"trailing\"\n                        [ngClass]=\"tr.class\"\n                        [style.cssText]=\"tr.style\"\n                      >\n                        @switch (tr.type) {\n                          @case (\"chip\") {\n                            <mat-chip\n                              [color]=\"\n                                isThemeColor(tr.color) ? tr.color : undefined\n                              \"\n                              [ngClass]=\"\n                                (tr.variant || 'filled') === 'outlined'\n                                  ? 'chip-outlined'\n                                  : ''\n                              \"\n                              [style.cssText]=\"chipStyle(tr.color, tr.variant)\"\n                              >{{ tr.value }}</mat-chip\n                            >\n                          }\n                          @case (\"icon\") {\n                            <mat-icon\n                              [praxisIcon]=\"tr.value\"\n                              [color]=\"\n                                isThemeColor(tr.color) ? tr.color : undefined\n                              \"\n                              [style.cssText]=\"iconStyle(tr.color)\"\n                            ></mat-icon>\n                          }\n                          @case (\"image\") {\n                            <div\n                              class=\"lead-image\"\n                              [ngClass]=\"tr.class\"\n                              [style.cssText]=\"tr.style\"\n                            >\n                              <img\n                                [src]=\"tr.value\"\n                                [alt]=\"\n                                  config.templating?.trailing?.imageAlt || ''\n                                \"\n                              />\n                              @if (tr.badge?.value) {\n                                <mat-chip\n                                  class=\"lead-badge\"\n                                  [color]=\"\n                                    isThemeColor(tr.badge?.color)\n                                      ? tr.badge?.color\n                                      : undefined\n                                  \"\n                                  [ngClass]=\"\n                                    (tr.badge?.variant || 'filled') ===\n                                    'outlined'\n                                      ? 'chip-outlined'\n                                      : ''\n                                  \"\n                                  [style.cssText]=\"\n                                    chipStyle(\n                                      tr.badge?.color,\n                                      tr.badge?.variant\n                                    )\n                                  \"\n                                  >{{ tr.badge?.value }}</mat-chip\n                                >\n                              }\n                            </div>\n                          }\n                          @case (\"rating\") {\n                            @for (\n                              _ of ratingRange(tr);\n                              track $index;\n                              let idx = $index\n                            ) {\n                              <mat-icon\n                                [praxisIcon]=\"starIcon(idx, tr.value)\"\n                                [color]=\"ratingThemeColor(tr)\"\n                                [style.cssText]=\"ratingIconStyle(tr)\"\n                              ></mat-icon>\n                            }\n                          }\n                          @case (\"html\") {\n                            @if (item.alertsData !== undefined && item.ownerName) {\n                              <!-- Component-based rendering for executive trailing -->\n                              <span class=\"exec-trailing-shell\">\n                                <praxis-executive-alerts [alerts]=\"item.alertsData\"></praxis-executive-alerts>\n                                <praxis-executive-owner [name]=\"item.ownerName\"></praxis-executive-owner>\n                              </span>\n                            } @else {\n                              <span [innerHTML]=\"tr.value\"></span>\n                            }\n                          }\n                          @case (\"metric\") {\n                            <praxis-list-metric [metric]=\"tr\"></praxis-list-metric>\n                          }\n                          @case (\"compose\") {\n                            <praxis-list-compose\n                              [compose]=\"tr\"\n                            ></praxis-list-compose>\n                          }\n                          @case (\"component\") {\n                            <praxis-list-runtime-component\n                              [component]=\"tr\"\n                            ></praxis-list-runtime-component>\n                          }\n                          @default {\n                            <span>{{ tr.value }}</span>\n                          }\n                        }\n                      </div>\n                    }\n                    @if (showExpandIcon(\"trailing\")) {\n                      <button\n                        mat-icon-button\n                        type=\"button\"\n                        class=\"expand-toggle\"\n                        [attr.aria-label]=\"expandToggleAriaLabel(item, i)\"\n                        [attr.aria-expanded]=\"\n                          expansionOwnedByIcon() ? isExpanded(item, i) : null\n                        \"\n                        [attr.aria-controls]=\"\n                          expansionOwnedByIcon()\n                            ? expandRegionId(item, i)\n                            : null\n                        \"\n                        (click)=\"onExpandToggle($event, item, i)\"\n                      >\n                        <mat-icon\n                          [praxisIcon]=\"\n                            isExpanded(item, i) ? 'expand_less' : 'expand_more'\n                          \"\n                        ></mat-icon>\n                      </button>\n                    }\n                    @if ((visibleActions(item, \"trailing\") || []).length) {\n                      <div\n                        class=\"list-item-actions\"\n                        (click)=\"$event.stopPropagation()\"\n                        (keydown.enter)=\"onActionKeydown($event)\"\n                        (keydown.space)=\"onActionKeydown($event)\"\n                      >\n                        @for (\n                          action of visibleActions(item, \"trailing\");\n                          let aidx = $index;\n                          track action?.id ?? $index\n                        ) {\n                          @if ((action.kind || \"icon\") === \"icon\") {\n                            <button\n                              mat-icon-button\n                              [color]=\"\n                                isThemeColor(action.color)\n                                  ? action.color\n                                  : undefined\n                              \"\n                              (click)=\"\n                                onActionClick($event, action.id, item, i)\n                              \"\n                              [attr.aria-label]=\"action.label || action.id\"\n                              [disabled]=\"isActionLoading(action.id, item, i)\"\n                              [ngClass]=\"{\n                                'action-loading': isActionLoading(\n                                  action.id,\n                                  item,\n                                  i\n                                ),\n                              }\"\n                            >\n                              @if (isActionLoading(action.id, item, i)) {\n                                <mat-progress-spinner\n                                  class=\"action-spinner\"\n                                  mode=\"indeterminate\"\n                                  diameter=\"16\"\n                                  strokeWidth=\"3\"\n                                ></mat-progress-spinner>\n                              } @else {\n                                <mat-icon\n                                  [praxisIcon]=\"action.icon\"\n                                  [style.cssText]=\"iconStyle(action.color)\"\n                                ></mat-icon>\n                              }\n                            </button>\n                          } @else {\n                            @if (action.buttonVariant === \"stroked\") {\n                              <button\n                                mat-stroked-button\n                                [color]=\"\n                                  isThemeColor(action.color)\n                                    ? action.color\n                                    : undefined\n                                \"\n                                [style.cssText]=\"\n                                  buttonStyle(action.color, 'stroked')\n                                \"\n                                (click)=\"\n                                  onActionClick($event, action.id, item, i)\n                                \"\n                                [attr.aria-label]=\"action.label || action.id\"\n                                [disabled]=\"isActionLoading(action.id, item, i)\"\n                                [ngClass]=\"{\n                                  'action-loading': isActionLoading(\n                                    action.id,\n                                    item,\n                                    i\n                                  ),\n                                }\"\n                              >\n                                @if (isActionLoading(action.id, item, i)) {\n                                  <mat-progress-spinner\n                                    class=\"action-spinner\"\n                                    mode=\"indeterminate\"\n                                    diameter=\"16\"\n                                    strokeWidth=\"3\"\n                                  ></mat-progress-spinner>\n                                } @else {\n                                  {{ action.label || action.id }}\n                                }\n                              </button>\n                            }\n                            @if (action.buttonVariant === \"raised\") {\n                              <button\n                                mat-raised-button\n                                [color]=\"\n                                  isThemeColor(action.color)\n                                    ? action.color\n                                    : undefined\n                                \"\n                                [style.cssText]=\"\n                                  buttonStyle(action.color, 'raised')\n                                \"\n                                (click)=\"\n                                  onActionClick($event, action.id, item, i)\n                                \"\n                                [attr.aria-label]=\"action.label || action.id\"\n                                [disabled]=\"isActionLoading(action.id, item, i)\"\n                                [ngClass]=\"{\n                                  'action-loading': isActionLoading(\n                                    action.id,\n                                    item,\n                                    i\n                                  ),\n                                }\"\n                              >\n                                @if (isActionLoading(action.id, item, i)) {\n                                  <mat-progress-spinner\n                                    class=\"action-spinner\"\n                                    mode=\"indeterminate\"\n                                    diameter=\"16\"\n                                    strokeWidth=\"3\"\n                                  ></mat-progress-spinner>\n                                } @else {\n                                  {{ action.label || action.id }}\n                                }\n                              </button>\n                            }\n                            @if (\n                              !action.buttonVariant ||\n                              action.buttonVariant === \"flat\"\n                            ) {\n                              <button\n                                mat-flat-button\n                                [color]=\"\n                                  isThemeColor(action.color)\n                                    ? action.color\n                                    : undefined\n                                \"\n                                [style.cssText]=\"\n                                  buttonStyle(action.color, 'flat')\n                                \"\n                                (click)=\"\n                                  onActionClick($event, action.id, item, i)\n                                \"\n                                [attr.aria-label]=\"action.label || action.id\"\n                                [disabled]=\"isActionLoading(action.id, item, i)\"\n                                [ngClass]=\"{\n                                  'action-loading': isActionLoading(\n                                    action.id,\n                                    item,\n                                    i\n                                  ),\n                                }\"\n                              >\n                                @if (isActionLoading(action.id, item, i)) {\n                                  <mat-progress-spinner\n                                    class=\"action-spinner\"\n                                    mode=\"indeterminate\"\n                                    diameter=\"16\"\n                                    strokeWidth=\"3\"\n                                  ></mat-progress-spinner>\n                                } @else {\n                                  {{ action.label || action.id }}\n                                }\n                              </button>\n                            }\n                          }\n                        }\n                      </div>\n                    }\n                  </div>\n                </div>\n                }\n                @if (isExpandable() && isExpanded(item, i)) {\n                  <div\n                    class=\"item-expansion\"\n                    [id]=\"expandRegionId(item, i)\"\n                    role=\"region\"\n                    [attr.aria-label]=\"expansionRegionAriaLabel(item)\"\n                  >\n                    <div class=\"item-expansion-grid\">\n                      @for (\n                        expansionSection of expansionSections(item);\n                        track expansionSection.id\n                      ) {\n                        <section\n                          class=\"expansion-section\"\n                          [attr.data-section-type]=\"expansionSection.type\"\n                        >\n                          @if (expansionSection.title) {\n                            <div class=\"expansion-section-title\">\n                              {{ expansionSection.title }}\n                            </div>\n                          }\n                          @if (\n                            expansionSectionHasContent(\n                              item,\n                              expansionSection,\n                              i\n                            )\n                          ) {\n                            @switch (expansionSection.type) {\n                              @case (\"chip-list\") {\n                                <div class=\"expansion-chip-list\">\n                                  @for (\n                                    expansionEntry of expansionSectionItems(\n                                      item,\n                                      expansionSection,\n                                      i\n                                    );\n                                    track $index\n                                  ) {\n                                    <mat-chip class=\"expansion-chip\">{{\n                                      expansionItemLabel(expansionEntry)\n                                    }}</mat-chip>\n                                  }\n                                </div>\n                              }\n                              @case (\"timeline\") {\n                                <div class=\"expansion-timeline\">\n                                  @for (\n                                    expansionEntry of expansionSectionItems(\n                                      item,\n                                      expansionSection,\n                                      i\n                                    );\n                                    track $index\n                                  ) {\n                                    <div class=\"expansion-timeline-item\">\n                                      <div class=\"expansion-timeline-title\">\n                                        {{\n                                          expansionTimelineTitle(expansionEntry)\n                                        }}\n                                      </div>\n                                      @if (\n                                        expansionTimelineMeta(expansionEntry)\n                                      ) {\n                                        <div class=\"expansion-timeline-meta\">\n                                          {{\n                                            expansionTimelineMeta(\n                                              expansionEntry\n                                            )\n                                          }}\n                                        </div>\n                                      }\n                                      @if (\n                                        expansionTimelineDescription(\n                                          expansionEntry\n                                        )\n                                      ) {\n                                        <div\n                                          class=\"expansion-timeline-description\"\n                                        >\n                                          {{\n                                            expansionTimelineDescription(\n                                              expansionEntry\n                                            )\n                                          }}\n                                        </div>\n                                      }\n                                    </div>\n                                  }\n                                </div>\n                              }\n                              @case (\"key-value\") {\n                                <dl class=\"expansion-key-value\">\n                                  @for (\n                                    expansionEntry of expansionSectionItems(\n                                      item,\n                                      expansionSection,\n                                      i\n                                    );\n                                    track $index\n                                  ) {\n                                    <div class=\"expansion-key-value-row\">\n                                      @if (\n                                        expansionKeyValueKey(expansionEntry)\n                                      ) {\n                                        <dt>\n                                          {{\n                                            expansionKeyValueKey(expansionEntry)\n                                          }}\n                                        </dt>\n                                      }\n                                      <dd>\n                                        {{\n                                          expansionKeyValueValue(expansionEntry)\n                                        }}\n                                      </dd>\n                                    </div>\n                                  }\n                                </dl>\n                              }\n                              @default {\n                                <div class=\"expansion-info-list\">\n                                  @for (\n                                    expansionEntry of expansionSectionItems(\n                                      item,\n                                      expansionSection,\n                                      i\n                                    );\n                                    track $index\n                                  ) {\n                                    <div class=\"expansion-info-item\">\n                                      <div class=\"expansion-info-title\">\n                                        {{ expansionInfoTitle(expansionEntry) }}\n                                      </div>\n                                      @if (expansionInfoValue(expansionEntry)) {\n                                        <div class=\"expansion-info-value\">\n                                          {{\n                                            expansionInfoValue(expansionEntry)\n                                          }}\n                                        </div>\n                                      }\n                                    </div>\n                                  }\n                                </div>\n                              }\n                            }\n                          } @else {\n                            <div class=\"expansion-empty\">\n                              {{\n                                expansionSection.emptyLabel ||\n                                  \"Sem dados dispon\u00EDveis\"\n                              }}\n                            </div>\n                          }\n                        </section>\n                      }\n                    </div>\n                  </div>\n                }\n              </mat-list-option>\n              @if (\n                (config.layout?.dividers === \"all\" ||\n                  config.layout?.dividers === \"between\") &&\n                i < section.items.length - 1\n              ) {\n                <mat-divider></mat-divider>\n              }\n            }\n          }\n        </mat-selection-list>\n      } @else {\n        <ng-container *ngTemplateOutlet=\"readList\"></ng-container>\n      }\n\n      <!-- Read-only list -->\n      <ng-template #readList>\n        <mat-list>\n          @for (\n            section of sections$ | async;\n            track trackBySection($index, section);\n            let sidx = $index\n          ) {\n            @if (section.key) {\n              <div class=\"section-header mat-subheader\">\n                @if (sectionHeaderTemplate(section.key); as sh) {\n                  @switch (sh.type) {\n                    @case (\"icon\") {\n                      <mat-icon\n                        [praxisIcon]=\"sh.value\"\n                        [ngClass]=\"sh.class\"\n                        [color]=\"isThemeColor(sh.color) ? sh.color : undefined\"\n                        [style.cssText]=\"\n                          (sh.style ? sh.style + ';' : '') + iconStyle(sh.color)\n                        \"\n                      ></mat-icon>\n                    }\n                    @case (\"image\") {\n                      <span\n                        class=\"inline-image\"\n                        [ngClass]=\"sh.class\"\n                        [style.cssText]=\"sh.style\"\n                      >\n                        <img\n                          [src]=\"sh.value\"\n                          [alt]=\"\n                            config.templating?.sectionHeader?.imageAlt || ''\n                          \"\n                        />\n                        @if (sh.badge?.value) {\n                          <mat-chip\n                            class=\"inline-badge\"\n                            [color]=\"\n                              isThemeColor(sh.badge?.color)\n                                ? sh.badge?.color\n                                : undefined\n                            \"\n                            [ngClass]=\"\n                              (sh.badge?.variant || 'filled') === 'outlined'\n                                ? 'chip-outlined'\n                                : ''\n                            \"\n                            [style.cssText]=\"\n                              chipStyle(sh.badge?.color, sh.badge?.variant)\n                            \"\n                            >{{ sh.badge?.value }}</mat-chip\n                          >\n                        }\n                      </span>\n                    }\n                    @case (\"chip\") {\n                      <mat-chip\n                        [color]=\"isThemeColor(sh.color) ? sh.color : undefined\"\n                        [ngClass]=\"[\n                          sh.class || '',\n                          (sh.variant || 'filled') === 'outlined'\n                            ? 'chip-outlined'\n                            : '',\n                        ]\"\n                        [style.cssText]=\"\n                          chipStyle(sh.color, sh.variant) +\n                          (sh.style ? ';' + sh.style : '')\n                        \"\n                        >{{ sh.value }}</mat-chip\n                      >\n                    }\n                    @case (\"rating\") {\n                      <span [ngClass]=\"sh.class\" [style.cssText]=\"sh.style\">\n                        @for (\n                          _ of ratingRange(sh);\n                          track $index;\n                          let idx = $index\n                        ) {\n                          <mat-icon\n                            [praxisIcon]=\"starIcon(idx, sh.value)\"\n                            [color]=\"ratingThemeColor(sh)\"\n                            [style.cssText]=\"ratingIconStyle(sh)\"\n                          ></mat-icon>\n                        }\n                      </span>\n                    }\n                    @case (\"html\") {\n                      <span\n                        [ngClass]=\"sh.class\"\n                        [style.cssText]=\"sh.style\"\n                        [innerHTML]=\"sh.value\"\n                      ></span>\n                    }\n                    @case (\"metric\") {\n                      <praxis-list-metric [metric]=\"sh\"></praxis-list-metric>\n                    }\n                    @default {\n                      <span [ngClass]=\"sh.class\" [style.cssText]=\"sh.style\">{{\n                        sh.value\n                      }}</span>\n                    }\n                  }\n                }\n              </div>\n            }\n            @for (\n              item of section.items;\n              track trackByItem($index, item);\n              let i = $index\n            ) {\n              <mat-list-item [attr.data-item-status]=\"item?.status || null\">\n                @if (hasRowLayoutGrid()) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      listRowLayout;\n                      context: {\n                        $implicit: item,\n                        index: i,\n                        sectionKey: section.key || undefined,\n                        clickable: true,\n                      }\n                    \"\n                  ></ng-container>\n                } @else {\n                <div\n                  class=\"list-item-content\"\n                  [ngClass]=\"itemRuleClass(item)\"\n                  [attr.style]=\"itemRuleStyle(item)\"\n                >\n                  <button\n                    type=\"button\"\n                    class=\"list-item-main-action\"\n                    [attr.aria-label]=\"itemAriaLabel(item)\"\n                    [attr.aria-expanded]=\"\n                      expansionOwnedByRow() ? isExpanded(item, i) : null\n                    \"\n                    [attr.aria-controls]=\"\n                      expansionOwnedByRow() ? expandRegionId(item, i) : null\n                    \"\n                    (click)=\"onRowActivate(item, i, section.key || undefined)\"\n                  >\n                    <div class=\"list-item-leading\">\n                      @if (leading(item); as lead) {\n                        @switch (lead.type) {\n                          @case (\"icon\") {\n                            <mat-icon\n                              [praxisIcon]=\"lead.value\"\n                              [ngClass]=\"lead.class\"\n                              [color]=\"\n                                isThemeColor(lead.color)\n                                  ? lead.color\n                                  : undefined\n                              \"\n                              [style.cssText]=\"\n                                (lead.style ? lead.style + ';' : '') +\n                                iconStyle(lead.color)\n                              \"\n                            ></mat-icon>\n                          }\n                          @case (\"image\") {\n                            <div\n                              class=\"lead-image\"\n                              [ngClass]=\"lead.class\"\n                              [style.cssText]=\"lead.style\"\n                            >\n                              <img\n                                [src]=\"lead.value\"\n                                [alt]=\"\n                                  config.templating?.leading?.imageAlt || ''\n                                \"\n                              />\n                              @if (lead.badge?.value) {\n                                <mat-chip\n                                  class=\"lead-badge\"\n                                  [color]=\"\n                                    isThemeColor(lead.badge?.color)\n                                      ? lead.badge?.color\n                                      : undefined\n                                  \"\n                                  [ngClass]=\"\n                                    (lead.badge?.variant || 'filled') ===\n                                    'outlined'\n                                      ? 'chip-outlined'\n                                      : ''\n                                  \"\n                                  [style.cssText]=\"\n                                    chipStyle(\n                                      lead.badge?.color,\n                                      lead.badge?.variant\n                                    )\n                                  \"\n                                  >{{ lead.badge?.value }}</mat-chip\n                                >\n                              }\n                            </div>\n                          }\n                          @case (\"text\") {\n                            <span\n                              [ngClass]=\"lead.class\"\n                              [style.cssText]=\"lead.style\"\n                              >{{ lead.value }}</span\n                            >\n                          }\n                          @case (\"chip\") {\n                            <mat-chip\n                              [color]=\"\n                                isThemeColor(lead.color)\n                                  ? lead.color\n                                  : undefined\n                              \"\n                              [ngClass]=\"\n                                (lead.variant || 'filled') === 'outlined'\n                                  ? 'chip-outlined'\n                                  : ''\n                              \"\n                              [style.cssText]=\"\n                                chipStyle(lead.color, lead.variant)\n                              \"\n                              >{{ lead.value }}</mat-chip\n                            >\n                          }\n                          @case (\"rating\") {\n                            @for (\n                              _ of ratingRange(lead);\n                              track $index;\n                              let idx = $index\n                            ) {\n                              <mat-icon\n                                [praxisIcon]=\"starIcon(idx, lead.value)\"\n                                [color]=\"ratingThemeColor(lead)\"\n                                [style.cssText]=\"ratingIconStyle(lead)\"\n                              ></mat-icon>\n                            }\n                          }\n                          @case (\"html\") {\n                            <span\n                              [ngClass]=\"lead.class\"\n                              [style.cssText]=\"lead.style\"\n                              [innerHTML]=\"lead.value\"\n                            ></span>\n                          }\n                          @case (\"metric\") {\n                            <praxis-list-metric [metric]=\"lead\"></praxis-list-metric>\n                          }\n                          @default {\n                            <span\n                              [ngClass]=\"lead.class\"\n                              [style.cssText]=\"lead.style\"\n                              >{{ lead.value }}</span\n                            >\n                          }\n                        }\n                      } @else {\n                        <span class=\"leading-placeholder\"></span>\n                      }\n                    </div>\n                    <div class=\"list-item-text\">\n                      <div\n                        class=\"primary\"\n                        [ngClass]=\"primary(item)?.class\"\n                        [style.cssText]=\"primary(item)?.style\"\n                      >\n                        @if (primary(item)?.type === \"metric\") {\n                          <praxis-list-metric\n                            [metric]=\"primary(item)\"\n                          ></praxis-list-metric>\n                        } @else if (primary(item)?.type === \"html\") {\n                          <span [innerHTML]=\"primary(item)?.value\"></span>\n                        } @else {\n                          {{ primary(item)?.value }}\n                        }\n                      </div>\n                      @if (layoutLines > 1) {\n                        <div\n                          class=\"secondary\"\n                          [ngClass]=\"secondary(item)?.class\"\n                          [style.cssText]=\"secondary(item)?.style\"\n                        >\n                          @if (item.segmentVariant && item.segmentLabel && item.accountType && item.since) {\n                            <!-- Component-based rendering for executive items -->\n                            <span class=\"exec-subline\">\n                              <praxis-executive-badge [variant]=\"item.segmentVariant\">{{ item.segmentLabel }}</praxis-executive-badge>\n                              <span class=\"exec-subcopy\">{{ item.accountType }}</span>\n                              <span class=\"exec-subseparator\">\u00B7</span>\n                              <span class=\"exec-subcopy\">Desde {{ item.since }}</span>\n                            </span>\n                          } @else if (secondary(item)?.type === \"html\") {\n                            <span [innerHTML]=\"secondary(item)?.value\"></span>\n                          } @else if (secondary(item)?.type === \"metric\") {\n                            <praxis-list-metric\n                              [metric]=\"secondary(item)\"\n                            ></praxis-list-metric>\n                          } @else {\n                            {{ secondary(item)?.value }}\n                          }\n                        </div>\n                      }\n                      @if (meta(item); as m) {\n                        @if (\n                          (config.templating?.metaPlacement === \"line\" &&\n                            (m?.type === \"text\" ||\n                              m?.type === \"date\" ||\n                              m?.type === \"currency\")) ||\n                          (layoutLines > 2 &&\n                            (m?.type === \"text\" ||\n                              m?.type === \"date\" ||\n                              m?.type === \"currency\"))\n                        ) {\n                          <div\n                            class=\"tertiary\"\n                            [ngClass]=\"m.class\"\n                            [style.cssText]=\"m.style\"\n                          >\n                            @if (config.templating?.metaPrefixIcon; as mpi) {\n                              <mat-icon [praxisIcon]=\"mpi\"></mat-icon>\n                            }\n                            {{ m.value }}\n                          </div>\n                        }\n                      }\n                      @if (featuresVisible()) {\n                        <div class=\"features\">\n                          @for (\n                            f of config.templating?.features || [];\n                            track $index;\n                            let fi = $index\n                          ) {\n                            <span\n                              class=\"feature\"\n                              [ngClass]=\"\n                                featureSemanticClass(item, f.expr, f.class)\n                              \"\n                            >\n                              @if (f.icon && featuresMode() !== \"labels-only\") {\n                                <mat-icon [praxisIcon]=\"f.icon\"></mat-icon>\n                              }\n                              @if (featuresMode() !== \"icons-only\") {\n                                <span\n                                  [ngClass]=\"f.class\"\n                                  [style.cssText]=\"f.style\"\n                                >\n                                  @for (\n                                    line of featureLabelLines(item, f.expr);\n                                    track $index\n                                  ) {\n                                    <span class=\"feature-line\">{{ line }}</span>\n                                  }\n                                </span>\n                              }\n                              @if (\n                                featureProgressPercent(item, f.expr, f.class);\n                                as progress\n                              ) {\n                                <span\n                                  class=\"feature-progress\"\n                                  aria-hidden=\"true\"\n                                >\n                                  <span\n                                    class=\"feature-progress__value\"\n                                    [style.width.%]=\"progress\"\n                                  ></span>\n                                </span>\n                              }\n                            </span>\n                          }\n                        </div>\n                      }\n                    </div>\n                  </button>\n                  <div class=\"list-item-trailing\">\n                    @if (meta(item); as m) {\n                      @if (\n                        !(\n                          (config.templating?.metaPlacement === \"line\" ||\n                            layoutLines > 2) &&\n                          (m?.type === \"text\" ||\n                            m?.type === \"date\" ||\n                            m?.type === \"currency\")\n                        )\n                      ) {\n                        <div\n                          class=\"meta\"\n                          [ngClass]=\"m.class\"\n                          [style.cssText]=\"m.style\"\n                        >\n                          @switch (m.type) {\n                            @case (\"chip\") {\n                              <mat-chip\n                                [color]=\"\n                                  isThemeColor(m.color) ? m.color : undefined\n                                \"\n                                [ngClass]=\"\n                                  (m.variant || 'filled') === 'outlined'\n                                    ? 'chip-outlined'\n                                    : ''\n                                \"\n                                [style.cssText]=\"chipStyle(m.color, m.variant)\"\n                                >{{ m.value }}</mat-chip\n                              >\n                            }\n                            @case (\"rating\") {\n                              @for (\n                                _ of ratingRange(m);\n                                track $index;\n                                let idx = $index\n                              ) {\n                                <mat-icon\n                                  [praxisIcon]=\"starIcon(idx, m.value)\"\n                                  [color]=\"ratingThemeColor(m)\"\n                                  [style.cssText]=\"ratingIconStyle(m)\"\n                                ></mat-icon>\n                              }\n                            }\n                            @case (\"icon\") {\n                              <mat-icon\n                                [praxisIcon]=\"m.value\"\n                                [color]=\"\n                                  isThemeColor(m.color) ? m.color : undefined\n                                \"\n                                [style.cssText]=\"iconStyle(m.color)\"\n                              ></mat-icon>\n                            }\n                            @case (\"image\") {\n                              <span class=\"inline-image\"\n                                ><img [src]=\"m.value\" [alt]=\"m.imageAlt || ''\"\n                              /></span>\n                            }\n                            @case (\"html\") {\n                              <span [innerHTML]=\"m.value\"></span>\n                            }\n                            @case (\"metric\") {\n                              <praxis-list-metric [metric]=\"m\"></praxis-list-metric>\n                            }\n                            @default {\n                              <span>\n                                @if (\n                                  config.templating?.metaPrefixIcon;\n                                  as mpi2\n                                ) {\n                                  <mat-icon [praxisIcon]=\"mpi2\"></mat-icon>\n                                }\n                                {{ m.value }}</span\n                              >\n                            }\n                          }\n                        </div>\n                      }\n                    }\n                    @if (trailing(item); as tr) {\n                      <div\n                        class=\"trailing\"\n                        [ngClass]=\"tr.class\"\n                        [style.cssText]=\"tr.style\"\n                      >\n                        @switch (tr.type) {\n                          @case (\"chip\") {\n                            <mat-chip\n                              [color]=\"\n                                isThemeColor(tr.color) ? tr.color : undefined\n                              \"\n                              [ngClass]=\"\n                                (tr.variant || 'filled') === 'outlined'\n                                  ? 'chip-outlined'\n                                  : ''\n                              \"\n                              [style.cssText]=\"chipStyle(tr.color, tr.variant)\"\n                              >{{ tr.value }}</mat-chip\n                            >\n                          }\n                          @case (\"icon\") {\n                            <mat-icon\n                              [praxisIcon]=\"tr.value\"\n                              [color]=\"\n                                isThemeColor(tr.color) ? tr.color : undefined\n                              \"\n                              [style.cssText]=\"iconStyle(tr.color)\"\n                            ></mat-icon>\n                          }\n                          @case (\"image\") {\n                            <div\n                              class=\"lead-image\"\n                              [ngClass]=\"tr.class\"\n                              [style.cssText]=\"tr.style\"\n                            >\n                              <img\n                                [src]=\"tr.value\"\n                                [alt]=\"\n                                  config.templating?.trailing?.imageAlt || ''\n                                \"\n                              />\n                              @if (tr.badge?.value) {\n                                <mat-chip\n                                  class=\"lead-badge\"\n                                  [color]=\"\n                                    isThemeColor(tr.badge?.color)\n                                      ? tr.badge?.color\n                                      : undefined\n                                  \"\n                                  [ngClass]=\"\n                                    (tr.badge?.variant || 'filled') ===\n                                    'outlined'\n                                      ? 'chip-outlined'\n                                      : ''\n                                  \"\n                                  [style.cssText]=\"\n                                    chipStyle(\n                                      tr.badge?.color,\n                                      tr.badge?.variant\n                                    )\n                                  \"\n                                  >{{ tr.badge?.value }}</mat-chip\n                                >\n                              }\n                            </div>\n                          }\n                          @case (\"rating\") {\n                            @for (\n                              _ of ratingRange(tr);\n                              track $index;\n                              let idx = $index\n                            ) {\n                              <mat-icon\n                                [praxisIcon]=\"starIcon(idx, tr.value)\"\n                                [color]=\"ratingThemeColor(tr)\"\n                                [style.cssText]=\"ratingIconStyle(tr)\"\n                              ></mat-icon>\n                            }\n                          }\n                          @case (\"html\") {\n                            @if (item.alertsData !== undefined && item.ownerName) {\n                              <!-- Component-based rendering for executive trailing -->\n                              <span class=\"exec-trailing-shell\">\n                                <praxis-executive-alerts [alerts]=\"item.alertsData\"></praxis-executive-alerts>\n                                <praxis-executive-owner [name]=\"item.ownerName\"></praxis-executive-owner>\n                              </span>\n                            } @else {\n                              <span [innerHTML]=\"tr.value\"></span>\n                            }\n                          }\n                          @case (\"metric\") {\n                            <praxis-list-metric [metric]=\"tr\"></praxis-list-metric>\n                          }\n                          @default {\n                            <span>{{ tr.value }}</span>\n                          }\n                        }\n                      </div>\n                    }\n                    @if (showExpandIcon(\"trailing\")) {\n                      <button\n                        mat-icon-button\n                        type=\"button\"\n                        class=\"expand-toggle\"\n                        [attr.aria-label]=\"expandToggleAriaLabel(item, i)\"\n                        [attr.aria-expanded]=\"\n                          expansionOwnedByIcon() ? isExpanded(item, i) : null\n                        \"\n                        [attr.aria-controls]=\"\n                          expansionOwnedByIcon()\n                            ? expandRegionId(item, i)\n                            : null\n                        \"\n                        (click)=\"onExpandToggle($event, item, i)\"\n                      >\n                        <mat-icon\n                          [praxisIcon]=\"\n                            isExpanded(item, i) ? 'expand_less' : 'expand_more'\n                          \"\n                        ></mat-icon>\n                      </button>\n                    }\n                    @if ((visibleActions(item, \"trailing\") || []).length) {\n                      <div\n                        class=\"list-item-actions\"\n                        (click)=\"$event.stopPropagation()\"\n                        (keydown.enter)=\"onActionKeydown($event)\"\n                        (keydown.space)=\"onActionKeydown($event)\"\n                      >\n                        @for (\n                          action of visibleActions(item, \"trailing\");\n                          let aidx = $index;\n                          track action?.id ?? $index\n                        ) {\n                          @if ((action.kind || \"icon\") === \"icon\") {\n                            <button\n                              mat-icon-button\n                              [color]=\"\n                                isThemeColor(action.color)\n                                  ? action.color\n                                  : undefined\n                              \"\n                              (click)=\"\n                                onActionClick($event, action.id, item, i)\n                              \"\n                              [attr.aria-label]=\"action.label || action.id\"\n                              [disabled]=\"isActionLoading(action.id, item, i)\"\n                              [ngClass]=\"{\n                                'action-loading': isActionLoading(\n                                  action.id,\n                                  item,\n                                  i\n                                ),\n                              }\"\n                            >\n                              @if (isActionLoading(action.id, item, i)) {\n                                <mat-progress-spinner\n                                  class=\"action-spinner\"\n                                  mode=\"indeterminate\"\n                                  diameter=\"16\"\n                                  strokeWidth=\"3\"\n                                ></mat-progress-spinner>\n                              } @else {\n                                <mat-icon\n                                  [praxisIcon]=\"action.icon\"\n                                  [style.cssText]=\"iconStyle(action.color)\"\n                                ></mat-icon>\n                              }\n                            </button>\n                          } @else {\n                            @if (action.buttonVariant === \"stroked\") {\n                              <button\n                                mat-stroked-button\n                                [color]=\"\n                                  isThemeColor(action.color)\n                                    ? action.color\n                                    : undefined\n                                \"\n                                [style.cssText]=\"\n                                  buttonStyle(action.color, 'stroked')\n                                \"\n                                (click)=\"\n                                  onActionClick($event, action.id, item, i)\n                                \"\n                                [attr.aria-label]=\"action.label || action.id\"\n                                [disabled]=\"isActionLoading(action.id, item, i)\"\n                                [ngClass]=\"{\n                                  'action-loading': isActionLoading(\n                                    action.id,\n                                    item,\n                                    i\n                                  ),\n                                }\"\n                              >\n                                @if (isActionLoading(action.id, item, i)) {\n                                  <mat-progress-spinner\n                                    class=\"action-spinner\"\n                                    mode=\"indeterminate\"\n                                    diameter=\"16\"\n                                    strokeWidth=\"3\"\n                                  ></mat-progress-spinner>\n                                } @else {\n                                  {{ action.label || action.id }}\n                                }\n                              </button>\n                            }\n                            @if (action.buttonVariant === \"raised\") {\n                              <button\n                                mat-raised-button\n                                [color]=\"\n                                  isThemeColor(action.color)\n                                    ? action.color\n                                    : undefined\n                                \"\n                                [style.cssText]=\"\n                                  buttonStyle(action.color, 'raised')\n                                \"\n                                (click)=\"\n                                  onActionClick($event, action.id, item, i)\n                                \"\n                                [attr.aria-label]=\"action.label || action.id\"\n                                [disabled]=\"isActionLoading(action.id, item, i)\"\n                                [ngClass]=\"{\n                                  'action-loading': isActionLoading(\n                                    action.id,\n                                    item,\n                                    i\n                                  ),\n                                }\"\n                              >\n                                @if (isActionLoading(action.id, item, i)) {\n                                  <mat-progress-spinner\n                                    class=\"action-spinner\"\n                                    mode=\"indeterminate\"\n                                    diameter=\"16\"\n                                    strokeWidth=\"3\"\n                                  ></mat-progress-spinner>\n                                } @else {\n                                  {{ action.label || action.id }}\n                                }\n                              </button>\n                            }\n                            @if (\n                              !action.buttonVariant ||\n                              action.buttonVariant === \"flat\"\n                            ) {\n                              <button\n                                mat-flat-button\n                                [color]=\"\n                                  isThemeColor(action.color)\n                                    ? action.color\n                                    : undefined\n                                \"\n                                [style.cssText]=\"\n                                  buttonStyle(action.color, 'flat')\n                                \"\n                                (click)=\"\n                                  onActionClick($event, action.id, item, i)\n                                \"\n                                [attr.aria-label]=\"action.label || action.id\"\n                                [disabled]=\"isActionLoading(action.id, item, i)\"\n                                [ngClass]=\"{\n                                  'action-loading': isActionLoading(\n                                    action.id,\n                                    item,\n                                    i\n                                  ),\n                                }\"\n                              >\n                                @if (isActionLoading(action.id, item, i)) {\n                                  <mat-progress-spinner\n                                    class=\"action-spinner\"\n                                    mode=\"indeterminate\"\n                                    diameter=\"16\"\n                                    strokeWidth=\"3\"\n                                  ></mat-progress-spinner>\n                                } @else {\n                                  {{ action.label || action.id }}\n                                }\n                              </button>\n                            }\n                          }\n                        }\n                      </div>\n                    }\n                  </div>\n                </div>\n                }\n                @if (isExpandable() && isExpanded(item, i)) {\n                  <div\n                    class=\"item-expansion\"\n                    [id]=\"expandRegionId(item, i)\"\n                    role=\"region\"\n                    [attr.aria-label]=\"expansionRegionAriaLabel(item)\"\n                  >\n                    <div class=\"item-expansion-grid\">\n                      @for (\n                        expansionSection of expansionSections(item);\n                        track expansionSection.id\n                      ) {\n                        <section\n                          class=\"expansion-section\"\n                          [attr.data-section-type]=\"expansionSection.type\"\n                        >\n                          @if (expansionSection.title) {\n                            <div class=\"expansion-section-title\">\n                              {{ expansionSection.title }}\n                            </div>\n                          }\n                          @if (\n                            expansionSectionHasContent(\n                              item,\n                              expansionSection,\n                              i\n                            )\n                          ) {\n                            @switch (expansionSection.type) {\n                              @case (\"chip-list\") {\n                                <div class=\"expansion-chip-list\">\n                                  @for (\n                                    expansionEntry of expansionSectionItems(\n                                      item,\n                                      expansionSection,\n                                      i\n                                    );\n                                    track $index\n                                  ) {\n                                    <mat-chip class=\"expansion-chip\">{{\n                                      expansionItemLabel(expansionEntry)\n                                    }}</mat-chip>\n                                  }\n                                </div>\n                              }\n                              @case (\"timeline\") {\n                                <div class=\"expansion-timeline\">\n                                  @for (\n                                    expansionEntry of expansionSectionItems(\n                                      item,\n                                      expansionSection,\n                                      i\n                                    );\n                                    track $index\n                                  ) {\n                                    <div class=\"expansion-timeline-item\">\n                                      <div class=\"expansion-timeline-title\">\n                                        {{\n                                          expansionTimelineTitle(expansionEntry)\n                                        }}\n                                      </div>\n                                      @if (\n                                        expansionTimelineMeta(expansionEntry)\n                                      ) {\n                                        <div class=\"expansion-timeline-meta\">\n                                          {{\n                                            expansionTimelineMeta(\n                                              expansionEntry\n                                            )\n                                          }}\n                                        </div>\n                                      }\n                                      @if (\n                                        expansionTimelineDescription(\n                                          expansionEntry\n                                        )\n                                      ) {\n                                        <div\n                                          class=\"expansion-timeline-description\"\n                                        >\n                                          {{\n                                            expansionTimelineDescription(\n                                              expansionEntry\n                                            )\n                                          }}\n                                        </div>\n                                      }\n                                    </div>\n                                  }\n                                </div>\n                              }\n                              @case (\"key-value\") {\n                                <dl class=\"expansion-key-value\">\n                                  @for (\n                                    expansionEntry of expansionSectionItems(\n                                      item,\n                                      expansionSection,\n                                      i\n                                    );\n                                    track $index\n                                  ) {\n                                    <div class=\"expansion-key-value-row\">\n                                      @if (\n                                        expansionKeyValueKey(expansionEntry)\n                                      ) {\n                                        <dt>\n                                          {{\n                                            expansionKeyValueKey(expansionEntry)\n                                          }}\n                                        </dt>\n                                      }\n                                      <dd>\n                                        {{\n                                          expansionKeyValueValue(expansionEntry)\n                                        }}\n                                      </dd>\n                                    </div>\n                                  }\n                                </dl>\n                              }\n                              @default {\n                                <div class=\"expansion-info-list\">\n                                  @for (\n                                    expansionEntry of expansionSectionItems(\n                                      item,\n                                      expansionSection,\n                                      i\n                                    );\n                                    track $index\n                                  ) {\n                                    <div class=\"expansion-info-item\">\n                                      <div class=\"expansion-info-title\">\n                                        {{ expansionInfoTitle(expansionEntry) }}\n                                      </div>\n                                      @if (expansionInfoValue(expansionEntry)) {\n                                        <div class=\"expansion-info-value\">\n                                          {{\n                                            expansionInfoValue(expansionEntry)\n                                          }}\n                                        </div>\n                                      }\n                                    </div>\n                                  }\n                                </div>\n                              }\n                            }\n                          } @else {\n                            <div class=\"expansion-empty\">\n                              {{\n                                expansionSection.emptyLabel ||\n                                  \"Sem dados dispon\u00EDveis\"\n                              }}\n                            </div>\n                          }\n                        </section>\n                      }\n                    </div>\n                  </div>\n                }\n              </mat-list-item>\n              @if (\n                (config.layout?.dividers === \"all\" ||\n                  config.layout?.dividers === \"between\") &&\n                i < section.items.length - 1\n              ) {\n                <mat-divider></mat-divider>\n              }\n            }\n          }\n        </mat-list>\n      </ng-template>\n    } @else if (isTilesVariant()) {\n      <ng-container *ngTemplateOutlet=\"tilesVariant\"></ng-container>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"cardsVariant\"></ng-container>\n    }\n\n    <!-- Cards variant -->\n    <ng-template #cardsVariant>\n      <div class=\"cards-grid\">\n        @for (it of (items$ | async) ?? []; track $index; let i = $index) {\n          <div\n            class=\"item-card\"\n            [ngClass]=\"itemRuleClass(it)\"\n            [attr.style]=\"itemRuleStyle(it)\"\n            role=\"button\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"itemAriaLabel(it)\"\n            (click)=\"onItemClick(it, i)\"\n            (keydown.enter)=\"onItemClick(it, i)\"\n            (keydown.space)=\"$event.preventDefault(); onItemClick(it, i)\"\n          >\n            <div class=\"list-item-content\">\n              <div class=\"list-item-leading\">\n                @if (leading(it); as lead) {\n                  @switch (lead.type) {\n                    @case (\"icon\") {\n                      <mat-icon\n                        [praxisIcon]=\"lead.value\"\n                        [ngClass]=\"lead.class\"\n                        [color]=\"\n                          isThemeColor(lead.color) ? lead.color : undefined\n                        \"\n                        [style.cssText]=\"\n                          (lead.style ? lead.style + ';' : '') +\n                          iconStyle(lead.color)\n                        \"\n                      ></mat-icon>\n                    }\n                    @case (\"image\") {\n                      <div\n                        class=\"lead-image\"\n                        [ngClass]=\"lead.class\"\n                        [style.cssText]=\"lead.style\"\n                      >\n                        <img\n                          [src]=\"lead.value\"\n                          [alt]=\"config.templating?.leading?.imageAlt || ''\"\n                        />\n                        @if (lead.badge?.value) {\n                          <mat-chip\n                            class=\"lead-badge\"\n                            [color]=\"\n                              isThemeColor(lead.badge?.color)\n                                ? lead.badge?.color\n                                : undefined\n                            \"\n                            [ngClass]=\"\n                              (lead.badge?.variant || 'filled') === 'outlined'\n                                ? 'chip-outlined'\n                                : ''\n                            \"\n                            [style.cssText]=\"\n                              chipStyle(lead.badge?.color, lead.badge?.variant)\n                            \"\n                            >{{ lead.badge?.value }}</mat-chip\n                          >\n                        }\n                      </div>\n                    }\n                    @case (\"text\") {\n                      <span\n                        [ngClass]=\"lead.class\"\n                        [style.cssText]=\"lead.style\"\n                        >{{ lead.value }}</span\n                      >\n                    }\n                    @case (\"chip\") {\n                      <mat-chip\n                        [color]=\"\n                          isThemeColor(lead.color) ? lead.color : undefined\n                        \"\n                        [ngClass]=\"\n                          (lead.variant || 'filled') === 'outlined'\n                            ? 'chip-outlined'\n                            : ''\n                        \"\n                        [style.cssText]=\"chipStyle(lead.color, lead.variant)\"\n                        >{{ lead.value }}</mat-chip\n                      >\n                    }\n                    @case (\"rating\") {\n                      @for (\n                        _ of ratingRange(lead);\n                        track $index;\n                        let idx = $index\n                      ) {\n                        <mat-icon\n                          [praxisIcon]=\"starIcon(idx, lead.value)\"\n                          [color]=\"ratingThemeColor(lead)\"\n                          [style.cssText]=\"ratingIconStyle(lead)\"\n                        ></mat-icon>\n                      }\n                    }\n                    @case (\"html\") {\n                      <span\n                        [ngClass]=\"lead.class\"\n                        [style.cssText]=\"lead.style\"\n                        [innerHTML]=\"lead.value\"\n                      ></span>\n                    }\n                    @case (\"metric\") {\n                      <praxis-list-metric [metric]=\"lead\"></praxis-list-metric>\n                    }\n                    @case (\"compose\") {\n                      <praxis-list-compose\n                        [compose]=\"lead\"\n                      ></praxis-list-compose>\n                    }\n                    @case (\"component\") {\n                      <praxis-list-runtime-component\n                        [component]=\"lead\"\n                      ></praxis-list-runtime-component>\n                    }\n                    @default {\n                      <span\n                        [ngClass]=\"lead.class\"\n                        [style.cssText]=\"lead.style\"\n                        >{{ lead.value }}</span\n                      >\n                    }\n                  }\n                } @else {\n                  <span class=\"leading-placeholder\"></span>\n                }\n              </div>\n              <div class=\"list-item-text\">\n                <div\n                  class=\"primary\"\n                  [ngClass]=\"primary(it)?.class\"\n                  [style.cssText]=\"primary(it)?.style\"\n                >\n                  @if (primary(it)?.type === \"metric\") {\n                    <praxis-list-metric [metric]=\"primary(it)\"></praxis-list-metric>\n                  } @else if (primary(it)?.type === \"compose\") {\n                    <praxis-list-compose\n                      [compose]=\"primary(it)\"\n                    ></praxis-list-compose>\n                  } @else if (primary(it)?.type === \"component\") {\n                    <praxis-list-runtime-component\n                      [component]=\"primary(it)\"\n                    ></praxis-list-runtime-component>\n                  } @else {\n                    {{ primary(it)?.value }}\n                  }\n                </div>\n                @if (layoutLines > 1) {\n                  <div\n                    class=\"secondary\"\n                    [ngClass]=\"secondary(it)?.class\"\n                    [style.cssText]=\"secondary(it)?.style\"\n                  >\n                    @if (secondary(it)?.type === \"metric\") {\n                      <praxis-list-metric\n                        [metric]=\"secondary(it)\"\n                      ></praxis-list-metric>\n                    } @else if (secondary(it)?.type === \"compose\") {\n                      <praxis-list-compose\n                        [compose]=\"secondary(it)\"\n                      ></praxis-list-compose>\n                    } @else if (secondary(it)?.type === \"component\") {\n                      <praxis-list-runtime-component\n                        [component]=\"secondary(it)\"\n                      ></praxis-list-runtime-component>\n                    } @else {\n                      {{ secondary(it)?.value }}\n                    }\n                  </div>\n                }\n                @if (meta(it); as m) {\n                  @if (\n                    (config.templating?.metaPlacement === \"line\" &&\n                      (m?.type === \"text\" ||\n                        m?.type === \"date\" ||\n                        m?.type === \"currency\")) ||\n                    (layoutLines > 2 &&\n                      (m?.type === \"text\" ||\n                        m?.type === \"date\" ||\n                        m?.type === \"currency\"))\n                  ) {\n                    <div\n                      class=\"tertiary\"\n                      [ngClass]=\"m.class\"\n                      [style.cssText]=\"m.style\"\n                    >\n                      @if (config.templating?.metaPrefixIcon; as mpi) {\n                        <mat-icon [praxisIcon]=\"mpi\"></mat-icon>\n                      }\n                      {{ m.value }}\n                    </div>\n                  }\n                }\n                @if (featuresVisible()) {\n                  <div class=\"features\">\n                    @for (\n                      f of config.templating?.features || [];\n                      track $index;\n                      let fi = $index\n                    ) {\n                      <span\n                        class=\"feature\"\n                        [ngClass]=\"featureSemanticClass(it, f.expr, f.class)\"\n                      >\n                        @if (f.icon && featuresMode() !== \"labels-only\") {\n                          <mat-icon [praxisIcon]=\"f.icon\"></mat-icon>\n                        }\n                        @if (featuresMode() !== \"icons-only\") {\n                          <span [ngClass]=\"f.class\" [style.cssText]=\"f.style\">\n                            @for (\n                              line of featureLabelLines(it, f.expr);\n                              track $index\n                            ) {\n                              <span class=\"feature-line\">{{ line }}</span>\n                            }\n                          </span>\n                        }\n                        @if (\n                          featureProgressPercent(it, f.expr, f.class);\n                          as progress\n                        ) {\n                          <span class=\"feature-progress\" aria-hidden=\"true\">\n                            <span\n                              class=\"feature-progress__value\"\n                              [style.width.%]=\"progress\"\n                            ></span>\n                          </span>\n                        }\n                      </span>\n                    }\n                  </div>\n                }\n              </div>\n              <div class=\"list-item-trailing\">\n                @if (meta(it); as m) {\n                  @if (\n                    !(\n                      (config.templating?.metaPlacement === \"line\" ||\n                        layoutLines > 2) &&\n                      (m?.type === \"text\" ||\n                        m?.type === \"date\" ||\n                        m?.type === \"currency\")\n                    )\n                  ) {\n                    <div\n                      class=\"meta\"\n                      [ngClass]=\"m.class\"\n                      [style.cssText]=\"m.style\"\n                    >\n                      @switch (m.type) {\n                        @case (\"chip\") {\n                          <mat-chip\n                            [color]=\"\n                              isThemeColor(m.color) ? m.color : undefined\n                            \"\n                            [ngClass]=\"\n                              (m.variant || 'filled') === 'outlined'\n                                ? 'chip-outlined'\n                                : ''\n                            \"\n                            [style.cssText]=\"chipStyle(m.color, m.variant)\"\n                            >{{ m.value }}</mat-chip\n                          >\n                        }\n                        @case (\"rating\") {\n                          @for (\n                            _ of ratingRange(m);\n                            track $index;\n                            let idx = $index\n                          ) {\n                            <mat-icon\n                              [praxisIcon]=\"starIcon(idx, m.value)\"\n                              [color]=\"ratingThemeColor(m)\"\n                              [style.cssText]=\"ratingIconStyle(m)\"\n                            ></mat-icon>\n                          }\n                        }\n                        @case (\"icon\") {\n                          <mat-icon\n                            [praxisIcon]=\"m.value\"\n                            [color]=\"\n                              isThemeColor(m.color) ? m.color : undefined\n                            \"\n                            [style.cssText]=\"iconStyle(m.color)\"\n                          ></mat-icon>\n                        }\n                        @case (\"image\") {\n                          <span class=\"inline-image\"\n                            ><img [src]=\"m.value\" [alt]=\"m.imageAlt || ''\"\n                          /></span>\n                        }\n                        @case (\"html\") {\n                          <span [innerHTML]=\"m.value\"></span>\n                        }\n                        @case (\"metric\") {\n                          <praxis-list-metric [metric]=\"m\"></praxis-list-metric>\n                        }\n                        @case (\"compose\") {\n                          <praxis-list-compose\n                            [compose]=\"m\"\n                          ></praxis-list-compose>\n                        }\n                        @case (\"component\") {\n                          <praxis-list-runtime-component\n                            [component]=\"m\"\n                          ></praxis-list-runtime-component>\n                        }\n                        @default {\n                          <span>\n                            @if (config.templating?.metaPrefixIcon; as mpi2) {\n                              <mat-icon [praxisIcon]=\"mpi2\"></mat-icon>\n                            }\n                            {{ m.value }}</span\n                          >\n                        }\n                      }\n                    </div>\n                  }\n                }\n                @if (trailing(it); as tr) {\n                  @if (\n                    (config.templating?.statusPosition || \"inline\") ===\n                      \"top-right\" &&\n                    (tr?.type === \"chip\" || tr?.type === \"icon\")\n                  ) {\n                    <div class=\"status-overlay\">\n                      @if (tr?.type === \"chip\") {\n                        <mat-chip\n                          [color]=\"\n                            isThemeColor(tr.color) ? tr.color : undefined\n                          \"\n                          [ngClass]=\"\n                            (tr.variant || 'filled') === 'outlined'\n                              ? 'chip-outlined'\n                              : ''\n                          \"\n                          [style.cssText]=\"chipStyle(tr.color, tr.variant)\"\n                          >{{ tr.value }}</mat-chip\n                        >\n                      }\n                      @if (tr?.type === \"icon\") {\n                        <mat-icon\n                          [praxisIcon]=\"tr.value\"\n                          [color]=\"\n                            isThemeColor(tr.color) ? tr.color : undefined\n                          \"\n                          [style.cssText]=\"iconStyle(tr.color)\"\n                        ></mat-icon>\n                      }\n                    </div>\n                  } @else {\n                    <div\n                      class=\"trailing\"\n                      [ngClass]=\"tr.class\"\n                      [style.cssText]=\"tr.style\"\n                    >\n                      @switch (tr.type) {\n                        @case (\"chip\") {\n                          <mat-chip\n                            [color]=\"\n                              isThemeColor(tr.color) ? tr.color : undefined\n                            \"\n                            [ngClass]=\"\n                              (tr.variant || 'filled') === 'outlined'\n                                ? 'chip-outlined'\n                                : ''\n                            \"\n                            [style.cssText]=\"chipStyle(tr.color, tr.variant)\"\n                            >{{ tr.value }}</mat-chip\n                          >\n                        }\n                        @case (\"icon\") {\n                          <mat-icon\n                            [praxisIcon]=\"tr.value\"\n                            [color]=\"\n                              isThemeColor(tr.color) ? tr.color : undefined\n                            \"\n                            [style.cssText]=\"iconStyle(tr.color)\"\n                          ></mat-icon>\n                        }\n                        @case (\"image\") {\n                          <div\n                            class=\"lead-image\"\n                            [ngClass]=\"tr.class\"\n                            [style.cssText]=\"tr.style\"\n                          >\n                            <img\n                              [src]=\"tr.value\"\n                              [alt]=\"\n                                config.templating?.trailing?.imageAlt || ''\n                              \"\n                            />\n                            @if (tr.badge?.value) {\n                              <mat-chip\n                                class=\"lead-badge\"\n                                [color]=\"\n                                  isThemeColor(tr.badge?.color)\n                                    ? tr.badge?.color\n                                    : undefined\n                                \"\n                                [ngClass]=\"\n                                  (tr.badge?.variant || 'filled') === 'outlined'\n                                    ? 'chip-outlined'\n                                    : ''\n                                \"\n                                [style.cssText]=\"\n                                  chipStyle(tr.badge?.color, tr.badge?.variant)\n                                \"\n                                >{{ tr.badge?.value }}</mat-chip\n                              >\n                            }\n                          </div>\n                        }\n                        @case (\"rating\") {\n                          @for (\n                            _ of ratingRange(tr);\n                            track $index;\n                            let idx = $index\n                          ) {\n                            <mat-icon\n                              [praxisIcon]=\"starIcon(idx, tr.value)\"\n                              [color]=\"ratingThemeColor(tr)\"\n                              [style.cssText]=\"ratingIconStyle(tr)\"\n                            ></mat-icon>\n                          }\n                        }\n                        @case (\"html\") {\n                          <span [innerHTML]=\"tr.value\"></span>\n                        }\n                        @case (\"metric\") {\n                          <praxis-list-metric [metric]=\"tr\"></praxis-list-metric>\n                        }\n                        @case (\"compose\") {\n                          <praxis-list-compose\n                            [compose]=\"tr\"\n                          ></praxis-list-compose>\n                        }\n                        @case (\"component\") {\n                          <praxis-list-runtime-component\n                            [component]=\"tr\"\n                          ></praxis-list-runtime-component>\n                        }\n                        @default {\n                          <span>{{ tr.value }}</span>\n                        }\n                      }\n                    </div>\n                  }\n                }\n              </div>\n            </div>\n            <div\n              class=\"card-actions\"\n              (click)=\"$event.stopPropagation()\"\n              (keydown.enter)=\"onActionKeydown($event)\"\n              (keydown.space)=\"onActionKeydown($event)\"\n            >\n              @for (\n                action of visibleActions(it, \"trailing\");\n                let aidx = $index;\n                track action?.id ?? $index\n              ) {\n                @if ((action.kind || \"icon\") === \"icon\") {\n                  <button\n                    mat-icon-button\n                    [color]=\"\n                      isThemeColor(action.color) ? action.color : undefined\n                    \"\n                    (click)=\"onActionClick($event, action.id, it, i)\"\n                    [attr.aria-label]=\"action.label || action.id\"\n                    [disabled]=\"isActionLoading(action.id, it, i)\"\n                    [ngClass]=\"{\n                      'action-loading': isActionLoading(action.id, it, i),\n                    }\"\n                  >\n                    @if (isActionLoading(action.id, it, i)) {\n                      <mat-progress-spinner\n                        class=\"action-spinner\"\n                        mode=\"indeterminate\"\n                        diameter=\"16\"\n                        strokeWidth=\"3\"\n                      ></mat-progress-spinner>\n                    } @else {\n                      <mat-icon\n                        [praxisIcon]=\"action.icon\"\n                        [style.cssText]=\"iconStyle(action.color)\"\n                      ></mat-icon>\n                    }\n                  </button>\n                } @else {\n                  @if (action.buttonVariant === \"stroked\") {\n                    <button\n                      mat-stroked-button\n                      [color]=\"\n                        isThemeColor(action.color) ? action.color : undefined\n                      \"\n                      [style.cssText]=\"buttonStyle(action.color, 'stroked')\"\n                      (click)=\"onActionClick($event, action.id, it, i)\"\n                      [attr.aria-label]=\"action.label || action.id\"\n                      [disabled]=\"isActionLoading(action.id, it, i)\"\n                      [ngClass]=\"{\n                        'action-loading': isActionLoading(action.id, it, i),\n                      }\"\n                    >\n                      @if (isActionLoading(action.id, it, i)) {\n                        <mat-progress-spinner\n                          class=\"action-spinner\"\n                          mode=\"indeterminate\"\n                          diameter=\"16\"\n                          strokeWidth=\"3\"\n                        ></mat-progress-spinner>\n                      } @else {\n                        {{ action.label || action.id }}\n                      }\n                    </button>\n                  }\n                  @if (action.buttonVariant === \"raised\") {\n                    <button\n                      mat-raised-button\n                      [color]=\"\n                        isThemeColor(action.color) ? action.color : undefined\n                      \"\n                      [style.cssText]=\"buttonStyle(action.color, 'raised')\"\n                      (click)=\"onActionClick($event, action.id, it, i)\"\n                      [attr.aria-label]=\"action.label || action.id\"\n                      [disabled]=\"isActionLoading(action.id, it, i)\"\n                      [ngClass]=\"{\n                        'action-loading': isActionLoading(action.id, it, i),\n                      }\"\n                    >\n                      @if (isActionLoading(action.id, it, i)) {\n                        <mat-progress-spinner\n                          class=\"action-spinner\"\n                          mode=\"indeterminate\"\n                          diameter=\"16\"\n                          strokeWidth=\"3\"\n                        ></mat-progress-spinner>\n                      } @else {\n                        {{ action.label || action.id }}\n                      }\n                    </button>\n                  }\n                  @if (\n                    !action.buttonVariant || action.buttonVariant === \"flat\"\n                  ) {\n                    <button\n                      mat-flat-button\n                      [color]=\"\n                        isThemeColor(action.color) ? action.color : undefined\n                      \"\n                      [style.cssText]=\"buttonStyle(action.color, 'flat')\"\n                      (click)=\"onActionClick($event, action.id, it, i)\"\n                      [attr.aria-label]=\"action.label || action.id\"\n                      [disabled]=\"isActionLoading(action.id, it, i)\"\n                      [ngClass]=\"{\n                        'action-loading': isActionLoading(action.id, it, i),\n                      }\"\n                    >\n                      @if (isActionLoading(action.id, it, i)) {\n                        <mat-progress-spinner\n                          class=\"action-spinner\"\n                          mode=\"indeterminate\"\n                          diameter=\"16\"\n                          strokeWidth=\"3\"\n                        ></mat-progress-spinner>\n                      } @else {\n                        {{ action.label || action.id }}\n                      }\n                    </button>\n                  }\n                }\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </ng-template>\n\n    <!-- Tiles variant -->\n    <ng-template #tilesVariant>\n      <div class=\"tiles-grid\">\n        @for (it of (items$ | async) ?? []; track $index; let i = $index) {\n          <div\n            class=\"item-tile\"\n            [ngClass]=\"itemRuleClass(it)\"\n            [attr.style]=\"itemRuleStyle(it)\"\n            role=\"button\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"itemAriaLabel(it)\"\n            (click)=\"onItemClick(it, i)\"\n            (keydown.enter)=\"onItemClick(it, i)\"\n            (keydown.space)=\"$event.preventDefault(); onItemClick(it, i)\"\n          >\n            <div class=\"tile-media\">\n              @if (leading(it); as lead) {\n                @switch (lead.type) {\n                  @case (\"image\") {\n                    <img\n                      [src]=\"lead.value\"\n                      [alt]=\"config.templating?.leading?.imageAlt || ''\"\n                    />\n                  }\n                  @case (\"icon\") {\n                    <mat-icon\n                      [praxisIcon]=\"lead.value\"\n                      [ngClass]=\"lead.class\"\n                      [color]=\"\n                        isThemeColor(lead.color) ? lead.color : undefined\n                      \"\n                      [style.cssText]=\"\n                        (lead.style ? lead.style + ';' : '') +\n                        iconStyle(lead.color)\n                      \"\n                    ></mat-icon>\n                  }\n                  @case (\"text\") {\n                    <span [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">{{\n                      lead.value\n                    }}</span>\n                  }\n                  @case (\"chip\") {\n                    <mat-chip\n                      [color]=\"\n                        isThemeColor(lead.color) ? lead.color : undefined\n                      \"\n                      [ngClass]=\"\n                        (lead.variant || 'filled') === 'outlined'\n                          ? 'chip-outlined'\n                          : ''\n                      \"\n                      [style.cssText]=\"chipStyle(lead.color, lead.variant)\"\n                      >{{ lead.value }}</mat-chip\n                    >\n                  }\n                  @case (\"rating\") {\n                    <span [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">\n                      @for (\n                        _ of ratingRange(lead);\n                        track $index;\n                        let idx = $index\n                      ) {\n                        <mat-icon\n                          [praxisIcon]=\"starIcon(idx, lead.value)\"\n                          [color]=\"ratingThemeColor(lead)\"\n                          [style.cssText]=\"ratingIconStyle(lead)\"\n                        ></mat-icon>\n                      }\n                    </span>\n                  }\n                  @case (\"html\") {\n                    <span\n                      [ngClass]=\"lead.class\"\n                      [style.cssText]=\"lead.style\"\n                      [innerHTML]=\"lead.value\"\n                    ></span>\n                  }\n                  @case (\"metric\") {\n                    <praxis-list-metric [metric]=\"lead\"></praxis-list-metric>\n                  }\n                  @case (\"compose\") {\n                    <praxis-list-compose\n                      [compose]=\"lead\"\n                    ></praxis-list-compose>\n                  }\n                  @case (\"component\") {\n                    <praxis-list-runtime-component\n                      [component]=\"lead\"\n                    ></praxis-list-runtime-component>\n                  }\n                  @default {\n                    <span [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">{{\n                      lead.value\n                    }}</span>\n                  }\n                }\n              }\n            </div>\n\n            @if (trailing(it); as tr) {\n              @if (\n                (config.templating?.statusPosition || \"inline\") ===\n                  \"top-right\" &&\n                (tr?.type === \"chip\" || tr?.type === \"icon\")\n              ) {\n                <div class=\"tile-status\">\n                  @if (tr?.type === \"chip\") {\n                    <mat-chip\n                      [color]=\"isThemeColor(tr.color) ? tr.color : undefined\"\n                      [ngClass]=\"\n                        (tr.variant || 'filled') === 'outlined'\n                          ? 'chip-outlined'\n                          : ''\n                      \"\n                      [style.cssText]=\"chipStyle(tr.color, tr.variant)\"\n                      >{{ tr.value }}</mat-chip\n                    >\n                  }\n                  @if (tr?.type === \"icon\") {\n                    <mat-icon\n                      [praxisIcon]=\"tr.value\"\n                      [color]=\"isThemeColor(tr.color) ? tr.color : undefined\"\n                      [style.cssText]=\"iconStyle(tr.color)\"\n                    ></mat-icon>\n                  }\n                </div>\n              }\n            }\n\n            <div class=\"tile-body\">\n              <div\n                class=\"primary\"\n                [ngClass]=\"primary(it)?.class\"\n                [style.cssText]=\"primary(it)?.style\"\n              >\n                @if (primary(it)?.type === \"metric\") {\n                  <praxis-list-metric [metric]=\"primary(it)\"></praxis-list-metric>\n                } @else if (primary(it)?.type === \"compose\") {\n                  <praxis-list-compose\n                    [compose]=\"primary(it)\"\n                  ></praxis-list-compose>\n                } @else if (primary(it)?.type === \"component\") {\n                  <praxis-list-runtime-component\n                    [component]=\"primary(it)\"\n                  ></praxis-list-runtime-component>\n                } @else {\n                  {{ primary(it)?.value }}\n                }\n              </div>\n              @if (layoutLines > 1) {\n                <div\n                  class=\"secondary\"\n                  [ngClass]=\"secondary(it)?.class\"\n                  [style.cssText]=\"secondary(it)?.style\"\n                >\n                  @if (secondary(it)?.type === \"metric\") {\n                    <praxis-list-metric\n                      [metric]=\"secondary(it)\"\n                    ></praxis-list-metric>\n                  } @else if (secondary(it)?.type === \"compose\") {\n                    <praxis-list-compose\n                      [compose]=\"secondary(it)\"\n                    ></praxis-list-compose>\n                  } @else if (secondary(it)?.type === \"component\") {\n                    <praxis-list-runtime-component\n                      [component]=\"secondary(it)\"\n                    ></praxis-list-runtime-component>\n                  } @else {\n                    {{ secondary(it)?.value }}\n                  }\n                </div>\n              }\n\n              @if (meta(it); as m) {\n                <div\n                  class=\"tile-meta\"\n                  [ngClass]=\"m.class\"\n                  [style.cssText]=\"m.style\"\n                >\n                  @if (config.templating?.metaPrefixIcon; as mpi) {\n                    <mat-icon [praxisIcon]=\"mpi\"></mat-icon>\n                  }\n                  @switch (m.type) {\n                    @case (\"chip\") {\n                      <mat-chip\n                        [color]=\"isThemeColor(m.color) ? m.color : undefined\"\n                        [ngClass]=\"\n                          (m.variant || 'filled') === 'outlined'\n                            ? 'chip-outlined'\n                            : ''\n                        \"\n                        [style.cssText]=\"chipStyle(m.color, m.variant)\"\n                        >{{ m.value }}</mat-chip\n                      >\n                    }\n                    @case (\"rating\") {\n                      @for (\n                        _ of ratingRange(m);\n                        track $index;\n                        let idx = $index\n                      ) {\n                        <mat-icon\n                          [praxisIcon]=\"starIcon(idx, m.value)\"\n                          [color]=\"ratingThemeColor(m)\"\n                          [style.cssText]=\"ratingIconStyle(m)\"\n                        ></mat-icon>\n                      }\n                    }\n                    @case (\"icon\") {\n                      <mat-icon\n                        [praxisIcon]=\"m.value\"\n                        [color]=\"isThemeColor(m.color) ? m.color : undefined\"\n                        [style.cssText]=\"iconStyle(m.color)\"\n                      ></mat-icon>\n                    }\n                    @case (\"image\") {\n                      <span class=\"inline-image\"\n                        ><img [src]=\"m.value\" [alt]=\"m.imageAlt || ''\"\n                      /></span>\n                    }\n                    @case (\"html\") {\n                      <span [innerHTML]=\"m.value\"></span>\n                    }\n                    @case (\"metric\") {\n                      <praxis-list-metric [metric]=\"m\"></praxis-list-metric>\n                    }\n                    @case (\"compose\") {\n                      <praxis-list-compose\n                        [compose]=\"m\"\n                      ></praxis-list-compose>\n                    }\n                    @case (\"component\") {\n                      <praxis-list-runtime-component\n                        [component]=\"m\"\n                      ></praxis-list-runtime-component>\n                    }\n                    @default {\n                      <span>{{ m.value }}</span>\n                    }\n                  }\n                </div>\n              }\n\n              @if (featuresVisible()) {\n                <div class=\"tiles-features\">\n                  @for (\n                    f of config.templating?.features || [];\n                    track $index;\n                    let fi = $index\n                  ) {\n                    <span\n                      class=\"feature\"\n                      [ngClass]=\"featureSemanticClass(it, f.expr, f.class)\"\n                    >\n                      @if (f.icon && featuresMode() !== \"labels-only\") {\n                        <mat-icon [praxisIcon]=\"f.icon\"></mat-icon>\n                      }\n                      @if (featuresMode() !== \"icons-only\") {\n                        <span [ngClass]=\"f.class\" [style.cssText]=\"f.style\">\n                          @for (\n                            line of featureLabelLines(it, f.expr);\n                            track $index\n                          ) {\n                            <span class=\"feature-line\">{{ line }}</span>\n                          }\n                        </span>\n                      }\n                      @if (\n                        featureProgressPercent(it, f.expr, f.class);\n                        as progress\n                      ) {\n                        <span class=\"feature-progress\" aria-hidden=\"true\">\n                          <span\n                            class=\"feature-progress__value\"\n                            [style.width.%]=\"progress\"\n                          ></span>\n                        </span>\n                      }\n                    </span>\n                  }\n                </div>\n              }\n\n              @if (trailing(it); as tr2) {\n                @if (\n                  !(\n                    (config.templating?.statusPosition || \"inline\") ===\n                      \"top-right\" &&\n                    (tr2?.type === \"chip\" || tr2?.type === \"icon\")\n                  )\n                ) {\n                  <div\n                    class=\"tile-trailing\"\n                    [ngClass]=\"tr2.class\"\n                    [style.cssText]=\"tr2.style\"\n                  >\n                    @switch (tr2.type) {\n                      @case (\"chip\") {\n                        <mat-chip\n                          [color]=\"\n                            isThemeColor(tr2.color) ? tr2.color : undefined\n                          \"\n                          [ngClass]=\"\n                            (tr2.variant || 'filled') === 'outlined'\n                              ? 'chip-outlined'\n                              : ''\n                          \"\n                          [style.cssText]=\"chipStyle(tr2.color, tr2.variant)\"\n                          >{{ tr2.value }}</mat-chip\n                        >\n                      }\n                      @case (\"icon\") {\n                        <mat-icon\n                          [praxisIcon]=\"tr2.value\"\n                          [color]=\"\n                            isThemeColor(tr2.color) ? tr2.color : undefined\n                          \"\n                          [style.cssText]=\"iconStyle(tr2.color)\"\n                        ></mat-icon>\n                      }\n                      @case (\"image\") {\n                        <span class=\"inline-image\"\n                          ><img [src]=\"tr2.value\" [alt]=\"tr2.imageAlt || ''\"\n                        /></span>\n                      }\n                      @case (\"rating\") {\n                        @for (\n                          _ of ratingRange(tr2);\n                          track $index;\n                          let idx = $index\n                        ) {\n                          <mat-icon\n                            [praxisIcon]=\"starIcon(idx, tr2.value)\"\n                            [color]=\"ratingThemeColor(tr2)\"\n                            [style.cssText]=\"ratingIconStyle(tr2)\"\n                          ></mat-icon>\n                        }\n                      }\n                      @case (\"html\") {\n                        <span [innerHTML]=\"tr2.value\"></span>\n                      }\n                      @case (\"metric\") {\n                        <praxis-list-metric [metric]=\"tr2\"></praxis-list-metric>\n                      }\n                      @case (\"compose\") {\n                        <praxis-list-compose\n                          [compose]=\"tr2\"\n                        ></praxis-list-compose>\n                      }\n                      @case (\"component\") {\n                        <praxis-list-runtime-component\n                          [component]=\"tr2\"\n                        ></praxis-list-runtime-component>\n                      }\n                      @default {\n                        <span>{{ tr2.value }}</span>\n                      }\n                    }\n                  </div>\n                }\n              }\n            </div>\n\n            @if ((visibleActions(it, \"trailing\") || []).length) {\n              <div\n                class=\"tile-actions\"\n                (click)=\"$event.stopPropagation()\"\n                (keydown.enter)=\"onActionKeydown($event)\"\n                (keydown.space)=\"onActionKeydown($event)\"\n              >\n                @for (\n                  action of visibleActions(it, \"trailing\");\n                  let aidx = $index;\n                  track action?.id ?? $index\n                ) {\n                  @if ((action.kind || \"icon\") === \"icon\") {\n                    <button\n                      mat-icon-button\n                      [color]=\"\n                        isThemeColor(action.color) ? action.color : undefined\n                      \"\n                      (click)=\"onActionClick($event, action.id, it, i)\"\n                      [attr.aria-label]=\"action.label || action.id\"\n                      [disabled]=\"isActionLoading(action.id, it, i)\"\n                      [ngClass]=\"{\n                        'action-loading': isActionLoading(action.id, it, i),\n                      }\"\n                    >\n                      @if (isActionLoading(action.id, it, i)) {\n                        <mat-progress-spinner\n                          class=\"action-spinner\"\n                          mode=\"indeterminate\"\n                          diameter=\"16\"\n                          strokeWidth=\"3\"\n                        ></mat-progress-spinner>\n                      } @else {\n                        <mat-icon\n                          [praxisIcon]=\"action.icon\"\n                          [style.cssText]=\"iconStyle(action.color)\"\n                        ></mat-icon>\n                      }\n                    </button>\n                  } @else {\n                    @if (action.buttonVariant === \"stroked\") {\n                      <button\n                        mat-stroked-button\n                        [color]=\"\n                          isThemeColor(action.color) ? action.color : undefined\n                        \"\n                        [style.cssText]=\"buttonStyle(action.color, 'stroked')\"\n                        (click)=\"onActionClick($event, action.id, it, i)\"\n                        [attr.aria-label]=\"action.label || action.id\"\n                        [disabled]=\"isActionLoading(action.id, it, i)\"\n                        [ngClass]=\"{\n                          'action-loading': isActionLoading(action.id, it, i),\n                        }\"\n                      >\n                        @if (isActionLoading(action.id, it, i)) {\n                          <mat-progress-spinner\n                            class=\"action-spinner\"\n                            mode=\"indeterminate\"\n                            diameter=\"16\"\n                            strokeWidth=\"3\"\n                          ></mat-progress-spinner>\n                        } @else {\n                          {{ action.label || action.id }}\n                        }\n                      </button>\n                    }\n                    @if (action.buttonVariant === \"raised\") {\n                      <button\n                        mat-raised-button\n                        [color]=\"\n                          isThemeColor(action.color) ? action.color : undefined\n                        \"\n                        [style.cssText]=\"buttonStyle(action.color, 'raised')\"\n                        (click)=\"onActionClick($event, action.id, it, i)\"\n                        [attr.aria-label]=\"action.label || action.id\"\n                        [disabled]=\"isActionLoading(action.id, it, i)\"\n                        [ngClass]=\"{\n                          'action-loading': isActionLoading(action.id, it, i),\n                        }\"\n                      >\n                        @if (isActionLoading(action.id, it, i)) {\n                          <mat-progress-spinner\n                            class=\"action-spinner\"\n                            mode=\"indeterminate\"\n                            diameter=\"16\"\n                            strokeWidth=\"3\"\n                          ></mat-progress-spinner>\n                        } @else {\n                          {{ action.label || action.id }}\n                        }\n                      </button>\n                    }\n                    @if (\n                      !action.buttonVariant || action.buttonVariant === \"flat\"\n                    ) {\n                      <button\n                        mat-flat-button\n                        [color]=\"\n                          isThemeColor(action.color) ? action.color : undefined\n                        \"\n                        [style.cssText]=\"buttonStyle(action.color, 'flat')\"\n                        (click)=\"onActionClick($event, action.id, it, i)\"\n                        [attr.aria-label]=\"action.label || action.id\"\n                        [disabled]=\"isActionLoading(action.id, it, i)\"\n                        [ngClass]=\"{\n                          'action-loading': isActionLoading(action.id, it, i),\n                        }\"\n                      >\n                        @if (isActionLoading(action.id, it, i)) {\n                          <mat-progress-spinner\n                            class=\"action-spinner\"\n                            mode=\"indeterminate\"\n                            diameter=\"16\"\n                            strokeWidth=\"3\"\n                          ></mat-progress-spinner>\n                        } @else {\n                          {{ action.label || action.id }}\n                        }\n                      </button>\n                    }\n                  }\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </ng-template>\n\n    <!-- Simple pagination controls for remote data -->\n    @if (config.dataSource?.resourcePath) {\n      <div class=\"paginator\">\n        <div class=\"paginator-controls\">\n          <button mat-stroked-button color=\"primary\" (click)=\"prevPage()\">\n            Anterior\n          </button>\n          <button mat-stroked-button color=\"primary\" (click)=\"nextPage()\">\n            Pr\u00F3ximo\n          </button>\n          <mat-form-field class=\"paginator-page-size\" appearance=\"outline\">\n            <mat-label>Tam. p\u00E1gina</mat-label>\n            <mat-select\n              (selectionChange)=\"setPageSize($event.value)\"\n              [value]=\"config.layout?.pageSize || 10\"\n            >\n              <mat-option [value]=\"6\">6</mat-option>\n              <mat-option [value]=\"8\">8</mat-option>\n              <mat-option [value]=\"12\">12</mat-option>\n              <mat-option [value]=\"24\">24</mat-option>\n            </mat-select>\n          </mat-form-field>\n          @if (config.ui?.showSort) {\n            <mat-form-field class=\"paginator-sort\" appearance=\"outline\">\n              <mat-label>Ordenar</mat-label>\n              <mat-select (selectionChange)=\"onSortChange($event.value)\">\n                @for (op of config.ui?.sortOptions || []; track $index) {\n                  <mat-option [value]=\"sortOptionValue(op)\">{{\n                    sortOptionLabel(op)\n                  }}</mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n          }\n          @if (config.ui?.showSearch && config.ui?.searchField) {\n            <mat-form-field class=\"paginator-search\" appearance=\"outline\">\n              <mat-label>{{\n                config.ui?.searchPlaceholder || \"Buscar\"\n              }}</mat-label>\n              <input\n                matInput\n                type=\"search\"\n                (input)=\"onSearchInput($any($event.target).value)\"\n              />\n            </mat-form-field>\n          }\n        </div>\n        <div class=\"paginator-meta\">\n          @if (config.ui?.showRange ?? true) {\n            @if (page$ | async; as ps) {\n              @if (total$ | async; as total) {\n                @if (items$ | async; as curr) {\n                  <span class=\"muted\"\n                    >{{ (total || 0) > 0 ? rangeStart(ps) : 0 }}\u2013{{\n                      rangeEnd(curr?.length || 0, ps, total || 0)\n                    }}\n                    de {{ total || 0 }}</span\n                  >\n                }\n              }\n            }\n          } @else {\n            @if (total$ | async; as total2) {\n              <span class=\"muted\">Total: {{ total2 }}</span>\n            }\n          }\n        </div>\n      </div>\n    }\n  </ng-template>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.praxis-list-root{--p-list-radius: var(--md-sys-shape-corner-medium, 16px);--p-list-shadow: var(--md-sys-elevation-level2);--p-list-border: 1px solid var(--md-sys-color-outline-variant);--p-list-blur: 10px;--p-list-surface: var(--md-sys-color-surface-container);--p-list-surface-low: var(--md-sys-color-surface);--p-list-surface-high: var( --md-sys-color-surface-container-high, var(--md-sys-color-surface-container) );--p-list-foreground: var(--md-sys-color-on-surface);--p-list-foreground-muted: var(--md-sys-color-on-surface-variant);--p-list-accent: var(--md-sys-color-primary);--p-list-accent-weak: var(--md-sys-color-primary-container);--p-list-item-surface: var( --md-sys-color-surface-container-low, var(--md-sys-color-surface) );--p-list-item-border: 1px solid var(--md-sys-color-outline-variant);--p-list-item-hover-surface: var(--md-sys-color-surface-container-low);--p-list-item-active-surface: var(--md-sys-color-surface-container);--p-list-item-selected-surface: var(--md-sys-color-surface-container);--p-list-grad-from: var(--md-sys-color-primary-container);--p-list-grad-to: var(--md-sys-color-tertiary-container);--p-list-grad-angle: 135deg;--p-list-grad-foreground: var(--md-sys-color-on-primary);--p-list-grad-foreground-muted: var(--md-sys-color-on-primary);--p-list-leading-width: 40px;--p-list-trailing-min-width: 140px;--p-list-item-gap: 12px;--p-list-item-padding-x: 16px;--p-list-item-padding-y: 12px;--p-list-item-stack-gap: 0px;--p-list-meta-size: .95rem;--p-list-meta-weight: 500;--p-list-chip-height: 22px;--p-list-chip-font-size: 12px;--p-list-trailing-padding-right: 12px;--p-list-tile-minW: 240px;--p-list-tile-gap: 16px;--p-list-tile-padding: 16px;--p-list-tile-radius: 16px;--p-list-tile-media-radius: 12px;--p-list-tile-media-ratio: 1 / 1;--p-list-tile-hover-overlay: .04;--p-list-tile-press-overlay: .08;--p-list-tile-press-scale: .99}.list-assistant{display:flex;justify-content:flex-end;gap:8px;padding:4px 4px 8px}.action-loading{opacity:.65}.action-spinner{width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center}.action-loading .mat-mdc-button-touch-target,.action-loading .mdc-button__label{opacity:.7}.skin-elevated,.skin-outline,.skin-flat,.skin-neumorphism{--p-list-item-surface: var( --mdc-elevated-card-container-color, var(--p-list-surface) );--p-list-item-border: var(--p-list-border)}.skin-elevated .item-card,.skin-outline .item-card,.skin-flat .item-card,.skin-neumorphism .item-card{background:var(--mdc-elevated-card-container-color, var(--p-list-surface));border-radius:var(--p-list-radius);box-shadow:var(--p-list-shadow);border:var(--p-list-border)}.skin-elevated .item-tile,.skin-outline .item-tile,.skin-flat .item-tile,.skin-neumorphism .item-tile{background:var(--mdc-elevated-card-container-color, var(--p-list-surface));box-shadow:var(--p-list-shadow);border:var(--p-list-border)}.skin-elevated .mat-mdc-list-item .list-item-content,.skin-outline .mat-mdc-list-item .list-item-content,.skin-flat .mat-mdc-list-item .list-item-content,.skin-neumorphism .mat-mdc-list-item .list-item-content{background:var(--mdc-elevated-card-container-color, var(--p-list-surface));border-radius:calc(var(--p-list-radius) * .75);box-shadow:var(--p-list-shadow);border:var(--p-list-item-border);color:var(--p-list-foreground)}.skin-outline{--p-list-shadow: none;--p-list-border: 1px solid var(--md-sys-color-outline)}.skin-flat{--p-list-shadow: none;--p-list-border: 1px solid var(--md-sys-color-outline-variant)}.skin-neumorphism{--p-list-shadow: var(--md-sys-elevation-level2);--p-list-border: 1px solid var(--md-sys-color-outline-variant);--p-list-radius: 1.25rem}.skin-pill-soft .item-card,.skin-pill-soft .item-tile{background:var(--mdc-elevated-card-container-color, var(--p-list-surface));border-radius:calc(var(--p-list-radius) * 1.3);box-shadow:var(--md-sys-elevation-level1);border:var(--p-list-border)}.skin-pill-soft .mat-mdc-list-item .list-item-content{background:var(--mdc-elevated-card-container-color, var(--p-list-surface));border-radius:calc(var(--p-list-radius) * 1.3);box-shadow:var(--md-sys-elevation-level1);border:var(--p-list-border);color:var(--p-list-foreground)}.skin-gradient-tile{--p-list-foreground: var(--p-list-grad-foreground);--p-list-foreground-muted: var(--p-list-grad-foreground-muted);--p-list-item-hover-surface: linear-gradient( var(--p-list-grad-angle), var(--p-list-grad-from), var(--p-list-grad-to) );--p-list-item-active-surface: linear-gradient( var(--p-list-grad-angle), var(--p-list-grad-from), var(--p-list-grad-to) );--p-list-item-selected-surface: linear-gradient( var(--p-list-grad-angle), var(--p-list-grad-from), var(--p-list-grad-to) )}.skin-gradient-tile .item-card,.skin-gradient-tile .item-tile,.skin-gradient-tile .mat-mdc-list-item .list-item-content{background:linear-gradient(var(--p-list-grad-angle),var(--p-list-grad-from),var(--p-list-grad-to));border-radius:var(--p-list-radius);color:var(--p-list-foreground)}.skin-glass .item-card,.skin-glass .item-tile{background:var(--md-sys-color-surface-container-low);border-radius:var(--p-list-radius);border:1px solid var(--md-sys-color-outline-variant);backdrop-filter:blur(var(--p-list-blur));-webkit-backdrop-filter:blur(var(--p-list-blur))}.skin-glass .mat-mdc-list-item .list-item-content{background:var(--md-sys-color-surface-container-low);border-radius:var(--p-list-radius);border:1px solid var(--md-sys-color-outline-variant);backdrop-filter:blur(var(--p-list-blur));-webkit-backdrop-filter:blur(var(--p-list-blur));color:var(--p-list-foreground)}.density-compact .mat-mdc-list-item,.density-compact .item-card{--p-list-item-padding-y: 8px;--p-list-item-padding-x: 12px;--p-list-item-gap: 10px}.density-comfortable .mat-mdc-list-item,.density-comfortable .item-card{--p-list-item-padding-y: 10px;--p-list-item-padding-x: 14px;--p-list-item-gap: 12px}.praxis-list-root.lines-3 .mat-mdc-list-item,.praxis-list-root.lines-3 .mat-mdc-list-option{min-height:76px}.density-compact{--p-list-tile-gap: 12px;--p-list-tile-padding: 12px;--p-list-tile-minW: 200px}.density-comfortable{--p-list-tile-gap: 16px;--p-list-tile-padding: 16px}.item-spacing-none{--p-list-item-stack-gap: 0px}.item-spacing-tight{--p-list-item-stack-gap: 6px;--p-list-tile-gap: 12px}.item-spacing-default{--p-list-item-stack-gap: 10px;--p-list-tile-gap: 16px}.item-spacing-relaxed{--p-list-item-stack-gap: 14px;--p-list-tile-gap: 20px}.list-item-content{display:grid;grid-template-columns:var(--p-list-leading-width) minmax(0,1fr) minmax(var(--p-list-trailing-min-width),max-content);align-items:center;gap:var(--p-list-item-gap);padding:var(--p-list-item-padding-y) var(--p-list-item-padding-x);width:100%;min-width:0;border-radius:calc(var(--p-list-radius) * .75);overflow:visible}.list-item-content--row-layout{--p-list-row-template-columns: var(--p-list-leading-width) minmax(0, 1fr) minmax(var(--p-list-trailing-min-width), max-content);--p-list-row-gap: var(--p-list-item-gap);--p-list-row-align-items: center;grid-template-columns:var(--p-list-row-template-columns);gap:var(--p-list-row-gap);align-items:var(--p-list-row-align-items)}.list-item-content--row-layout[role=button]{cursor:pointer}.list-item-content--row-layout[role=button]:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}.list-row-slot{min-width:0;display:flex;align-items:center;gap:8px}.list-row-slot--leading{justify-content:center}.list-row-slot--primary,.list-row-slot--secondary{min-width:0}.list-row-slot--meta{color:var(--p-list-foreground);font-variant-numeric:tabular-nums}.list-row-slot--trailing{flex-wrap:wrap;justify-content:flex-end}.list-row-slot .primary,.list-row-slot .secondary,.list-row-slot .meta,.list-row-slot .trailing{min-width:0}.list-item-main-action{grid-column:1/3;display:grid;grid-template-columns:var(--p-list-leading-width) minmax(0,1fr);align-items:center;gap:var(--p-list-item-gap);min-width:0;padding:0;border:0;background:transparent;color:inherit;text-align:start;font:inherit;cursor:pointer}.list-item-main-action:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px;border-radius:12px}.list-item-leading{display:flex;align-items:center;justify-content:center;min-height:100%}.leading-placeholder{width:24px;height:24px;display:inline-block}.list-item-text{min-width:0;display:grid;align-content:center;gap:4px}.list-item-trailing{min-width:0;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:6px;text-align:end;padding-right:var(--p-list-trailing-padding-right)}.list-item-content--row-layout .list-item-actions{justify-content:flex-end}.list-item-actions{display:flex;align-items:center;justify-content:flex-end;gap:4px;flex-wrap:wrap}.expand-toggle{color:var(--p-list-foreground-muted)}.mat-mdc-list-item .list-item-content{background:var(--p-list-item-surface);border:var(--p-list-item-border);transition:background .15s ease,box-shadow .15s ease,transform .15s ease}.mat-mdc-list-item,.mat-mdc-list-option{height:auto;align-items:stretch;overflow:visible}.mat-mdc-list-item.mdc-list-item--with-one-line,.mat-mdc-list-item.mdc-list-item--with-two-lines,.mat-mdc-list-item.mdc-list-item--with-three-lines,.mat-mdc-list-item-single-line,.mat-mdc-list-item-two-line,.mat-mdc-list-item-three-line,.mat-mdc-list-option.mdc-list-item--with-one-line,.mat-mdc-list-option.mdc-list-item--with-two-lines,.mat-mdc-list-option.mdc-list-item--with-three-lines{height:auto!important}.mdc-list-item{overflow:visible}.density-compact .mat-mdc-list-item,.density-compact .mat-mdc-list-option{min-height:44px}.density-comfortable .mat-mdc-list-item,.density-comfortable .mat-mdc-list-option{min-height:52px}.praxis-list-root:not(.density-compact):not(.density-comfortable) .mat-mdc-list-item,.praxis-list-root:not(.density-compact):not(.density-comfortable) .mat-mdc-list-option{min-height:56px}.mat-mdc-list-item .mdc-list-item__content,.mat-mdc-list-option .mdc-list-item__content,.mat-mdc-list-item .mdc-list-item__primary-text,.mat-mdc-list-option .mdc-list-item__primary-text{display:block!important;width:100%!important;height:auto!important;padding:0!important;margin:0!important;overflow:visible!important;box-sizing:border-box}.mat-mdc-list-item,.mat-mdc-list-option{padding:0!important;box-sizing:border-box}.praxis-list-root mat-list>mat-list-item:not(:last-child),.praxis-list-root mat-selection-list>mat-list-option:not(:last-child){margin-bottom:var(--p-list-item-stack-gap)}.mat-mdc-list-item:hover .list-item-content,.mat-mdc-list-option:hover .list-item-content{background:var(--p-list-item-hover-surface)}.mat-mdc-list-item:active .list-item-content,.mat-mdc-list-option:active .list-item-content{background:var(--p-list-item-active-surface)}.mat-mdc-list-option.mdc-list-item--selected .list-item-content{background:var(--p-list-item-selected-surface);border-color:var(--md-sys-color-outline-variant)}.mat-mdc-list-option.cdk-keyboard-focused .list-item-content,.mat-mdc-list-option.cdk-focused .list-item-content{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}.mat-mdc-list-item:focus-visible .list-item-content{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}.executive-inline-skin{--p-list-leading-width: 56px;--p-list-trailing-min-width: 232px;--p-list-item-padding-x: 14px;--p-list-item-padding-y: 8px;--p-list-item-gap: 10px;--p-list-surface: #f8fafb;--p-list-surface-low: #ffffff;--p-list-item-surface: #ffffff;--p-list-item-hover-surface: #f7fafc;--p-list-item-active-surface: #eef4f8;--p-list-item-selected-surface: #eef4f8;--p-list-foreground: #17324d;--p-list-foreground-muted: #72849a}.executive-inline-skin .list-item-content--row-layout.exec-row-layout{min-height:72px;padding:12px 20px;background:linear-gradient(180deg,#fff,#fbfcfd)!important;border:1px solid #dce5ec!important;border-radius:18px;box-shadow:0 1px 2px #0f223a08,0 4px 14px #0f223a08!important;color:#17324d!important}.executive-inline-skin .mat-mdc-list-item:hover .list-item-content--row-layout.exec-row-layout{background:linear-gradient(180deg,#fff,#f7fafc)!important}.executive-inline-skin .list-item-content--row-layout.exec-row-layout+.item-expansion{margin-left:10px;margin-right:10px}.executive-inline-skin .list-item-content--row-layout.exec-row-layout .list-row-slot{min-height:34px}.executive-inline-skin .list-row-slot--leading{justify-content:center}.executive-inline-skin .list-row-slot--identity{align-items:center;padding-right:4px}.executive-inline-skin .list-row-slot--balance,.executive-inline-skin .list-row-slot--limit,.executive-inline-skin .list-row-slot--risk,.executive-inline-skin .list-row-slot--alerts{justify-content:center;padding-inline:2px}.executive-inline-skin .list-row-slot--owner{justify-content:flex-start;padding-left:0}.executive-inline-skin .list-row-slot--actions{justify-content:flex-end;padding-left:0}.executive-inline-skin .list-row-slot--expand{justify-content:center}.executive-inline-skin .docs-expansion-leading{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:15px;background:linear-gradient(180deg,#edf4f9,#e6eef5);color:#1b5f86;font-size:1rem;font-weight:800;letter-spacing:.02em;box-shadow:0 1px 3px #1b5f861f;border:1px solid #dbe7f0}.executive-inline-skin .exec-balance-metric,.executive-inline-skin .exec-limit-metric,.executive-inline-skin .exec-risk-metric{min-width:0}.executive-inline-skin .exec-balance-metric .p-list-metric,.executive-inline-skin .exec-limit-metric .p-list-metric,.executive-inline-skin .exec-risk-metric .p-list-metric{gap:5px}.executive-inline-skin .exec-balance-metric .p-list-metric__label,.executive-inline-skin .exec-limit-metric .p-list-metric__label,.executive-inline-skin .exec-risk-metric .p-list-metric__label{font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8090a1}.executive-inline-skin .exec-balance-metric .p-list-metric__value,.executive-inline-skin .exec-limit-metric .p-list-metric__value{font-size:.96rem;font-weight:800;letter-spacing:-.02em;color:#0d1f34;line-height:1.05}.executive-inline-skin .exec-limit-metric .p-list-metric__caption{font-size:.66rem;font-weight:700;color:#8090a1}.executive-inline-skin .exec-limit-metric .p-list-metric__progress{width:68px;justify-self:center;height:3px}.executive-inline-skin .exec-risk-metric{min-width:84px}.executive-inline-skin .exec-risk-metric .p-list-metric{justify-items:center}.executive-inline-skin .exec-risk-metric .p-list-metric__main{gap:6px}.executive-inline-skin .exec-risk-metric .p-list-metric__value{font-size:1.02rem;font-weight:800;letter-spacing:-.024em;line-height:1}.executive-inline-skin .exec-risk-metric .p-list-metric__progress{width:56px;justify-self:center;height:3px}.executive-inline-skin .exec-risk-metric .p-list-metric__caption{font-size:.7rem;font-weight:700;line-height:1.1}.executive-inline-skin .exec-risk-metric .p-list-metric__caption--below-progress{justify-self:center;margin-top:-1px}.executive-inline-skin .exec-risk-metric .p-list-metric__icon mat-icon{width:15px;height:15px;font-size:15px}.executive-inline-skin .list-item-actions{gap:6px;flex-wrap:nowrap}.executive-inline-skin .list-row-slot--actions .list-item-actions{justify-content:flex-end}.executive-inline-skin .list-item-actions button,.executive-inline-skin .expand-toggle{width:30px;height:30px;min-width:30px;border-radius:12px;color:#6d7f93!important}.executive-inline-skin .list-item-actions button mat-icon,.executive-inline-skin .expand-toggle mat-icon{width:18px;height:18px;font-size:18px}.executive-inline-skin .item-expansion{position:relative;margin-top:-10px;padding:22px 26px;background:linear-gradient(180deg,#fcfdfe,#f5f8fb);border-color:#e4eaf0;border-radius:0 0 22px 22px;box-shadow:inset 0 1px #ffffffdb}.lead-image{position:relative;width:96px;height:72px;border-radius:12px;overflow:hidden}.lead-image img{width:100%;height:100%;object-fit:cover;display:block}.lead-image .lead-badge{position:absolute;left:8px;bottom:8px}.inline-image{position:relative;width:20px;height:20px;border-radius:4px;overflow:hidden;display:inline-block;vertical-align:middle}.inline-image img{width:100%;height:100%;object-fit:cover;display:block}.inline-image .inline-badge{position:absolute;left:2px;bottom:2px}.model-media .lead-image{width:136px;height:96px;border-radius:16px}.model-media .list-item-content{gap:16px}.model-media .item-card{--p-list-leading-width: 136px}.model-hotel .lead-image{width:160px;height:110px;border-radius:18px}.model-hotel .item-card{--p-list-leading-width: 160px}.primary,.secondary{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.primary{-webkit-line-clamp:1;font-weight:600;color:var(--p-list-foreground)}.secondary{-webkit-line-clamp:1;color:var(--p-list-foreground-muted)}.lines-3 .tertiary{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.item-tile .primary{-webkit-line-clamp:2;font-size:.95rem;line-height:1.25rem}.item-tile .secondary{-webkit-line-clamp:2;font-size:.8rem;line-height:1.1rem}.tertiary{color:var(--p-list-foreground-muted)}.features{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px;color:inherit}.feature{display:inline-flex;align-items:center;gap:6px}.feature-line{display:block}.feature-progress{display:block;width:88px;height:4px;margin-top:6px;border-radius:999px;background:#dbe5eb;overflow:hidden}.feature-progress__value{display:block;height:100%;border-radius:inherit;background:#2f9b69}.meta{color:var(--p-list-foreground);font-size:var(--p-list-meta-size);font-weight:var(--p-list-meta-weight);font-variant-numeric:tabular-nums;white-space:nowrap}.trailing{color:var(--p-list-foreground-muted);margin-left:0;white-space:nowrap}.section-header{font-size:.85rem;color:var(--p-list-foreground-muted);padding:8px 12px}.praxis-list-root mat-list,.praxis-list-root mat-selection-list{display:block;padding-bottom:12px}.praxis-list-root .mat-divider{margin-left:var(--p-list-item-padding-x);margin-right:var(--p-list-item-padding-x)}.item-expansion{margin:0 var(--p-list-item-padding-x) var(--p-list-item-stack-gap);padding:14px 16px;background:color-mix(in srgb,var(--p-list-surface) 88%,white 12%);border:1px solid var(--md-sys-color-outline-variant);border-radius:calc(var(--p-list-radius) * .75)}.item-expansion-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}.expansion-section{min-width:0;display:grid;gap:10px;align-content:start}.expansion-section-title{font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--p-list-foreground-muted)}.expansion-info-list,.expansion-timeline,.expansion-key-value{display:grid;gap:10px}.expansion-info-item,.expansion-timeline-item{display:grid;gap:4px;padding:10px 12px;border-radius:14px;background:var(--p-list-item-surface);border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 72%,transparent 28%)}.expansion-info-title,.expansion-timeline-title{font-size:.92rem;font-weight:600;color:var(--p-list-foreground)}.expansion-info-value,.expansion-timeline-meta,.expansion-timeline-description,.expansion-empty{font-size:.82rem;line-height:1.45;color:var(--p-list-foreground-muted)}.expansion-chip-list{display:flex;flex-wrap:wrap;gap:8px}.expansion-chip{background:var(--p-list-item-surface);border:1px solid var(--md-sys-color-outline-variant)}.expansion-key-value{margin:0}.expansion-key-value-row{display:grid;gap:4px;padding:10px 12px;border-radius:14px;background:var(--p-list-item-surface);border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 72%,transparent 28%)}.expansion-key-value-row dt,.expansion-key-value-row dd{margin:0}.expansion-key-value-row dt{font-size:.78rem;font-weight:600;color:var(--p-list-foreground-muted)}.expansion-key-value-row dd{font-size:.9rem;color:var(--p-list-foreground)}.cards-grid,.tiles-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--p-list-tile-minW),1fr));gap:var(--p-list-tile-gap)}.item-tile{position:relative;display:flex;flex-direction:column;gap:10px;padding:var(--p-list-tile-padding);border-radius:var(--p-list-tile-radius);background:var(--p-list-surface);border:var(--p-list-border);color:var(--p-list-foreground);cursor:pointer;min-height:160px;transition:box-shadow .16s ease-out,border-color .16s ease-out,transform .12s ease-out,background .16s ease-out}.item-tile:hover{box-shadow:var(--md-sys-elevation-level2);border-color:var(--md-sys-color-outline-variant);background:var(--p-list-item-hover-surface)}.item-tile:active{transform:scale(var(--p-list-tile-press-scale));background:var(--p-list-item-active-surface)}.item-tile:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}.tile-media{width:100%;aspect-ratio:var(--p-list-tile-media-ratio);border-radius:var(--p-list-tile-media-radius);background:var(--p-list-item-surface);border:1px solid var(--md-sys-color-outline-variant);display:grid;place-items:center;overflow:hidden}.tile-media img{width:100%;height:100%;object-fit:cover;display:block}.tile-media mat-icon{font-size:28px;height:28px;width:28px;color:var(--p-list-foreground-muted)}.tile-body{display:grid;gap:6px;min-width:0}.tile-meta{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;color:var(--p-list-foreground-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tile-trailing{font-size:.75rem;color:var(--p-list-foreground-muted);white-space:nowrap}.tiles-features{display:flex;flex-wrap:wrap;gap:8px;color:inherit}.tile-status{position:absolute;top:10px;right:10px}.tile-actions{position:absolute;top:8px;left:8px;display:flex;gap:4px;opacity:0;pointer-events:none;transform:translateY(-2px);transition:opacity .16s ease-out,transform .16s ease-out}.item-tile:hover .tile-actions,.item-tile:focus-visible .tile-actions,.item-tile:focus-within .tile-actions{opacity:1;pointer-events:auto;transform:translateY(0)}@media(hover:none){.tile-actions{opacity:1;pointer-events:auto;transform:none}}@media(max-width:600px){.tiles-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}@media(prefers-reduced-motion:reduce){.item-tile,.tile-actions{transition:none}.item-tile:active{transform:none}.item-card{transition:none}.item-card:active{transform:none}}.item-card{padding:var(--p-list-tile-padding);display:flex;flex-direction:column;min-height:160px;position:relative;cursor:pointer;background:var(--p-list-surface);border:var(--p-list-border);border-radius:var(--p-list-tile-radius);box-shadow:var(--p-list-shadow);transition:box-shadow .16s ease-out,border-color .16s ease-out,transform .12s ease-out,background .16s ease-out;--p-list-leading-width: 96px;--p-list-trailing-min-width: 0px}.item-card .list-item-trailing{min-width:var(--p-list-trailing-min-width)}.item-card:hover{box-shadow:var(--md-sys-elevation-level3);border-color:var(--md-sys-color-outline-variant);background:var(--p-list-item-hover-surface)}.item-card:active{transform:scale(var(--p-list-tile-press-scale));background:var(--p-list-item-active-surface)}.item-card:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}.card-actions{display:flex;align-items:center;justify-content:flex-end;gap:4px;padding:6px 8px 4px;border-top:1px solid var(--md-sys-color-outline-variant);margin-top:auto}.status-overlay{position:absolute;top:10px;right:10px;pointer-events:none}.status-overlay .mat-mdc-chip{pointer-events:auto}.leading-icon.mat-icon{width:36px;height:36px;line-height:36px;font-size:20px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.mat-mdc-chip{--mdc-chip-container-height: var(--p-list-chip-height);font-size:var(--p-list-chip-font-size)}.meta .mat-icon{font-size:18px;height:18px;width:18px}.features{overflow:hidden}@keyframes shimmer{0%{background-position:-468px 0}to{background-position:468px 0}}.skeleton{animation-duration:1.2s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:shimmer;animation-timing-function:linear;background:linear-gradient(to right,var(--md-sys-color-surface-container-low) 8%,var(--md-sys-color-surface-container) 18%,var(--md-sys-color-surface-container-low) 33%);background-size:800px 104px;position:relative}.skeleton-avatar{width:32px;height:32px;border-radius:50%}.skeleton-line{height:10px;margin:6px 0;border-radius:6px}.skeleton-chip{width:48px;height:18px;border-radius:999px}.chip-outlined.mat-mdc-chip{background:transparent!important;border:1px solid currentColor}.w-60{width:60%}.w-40{width:40%}.paginator{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:14px;padding:14px 4px 8px;border-top:1px solid var(--md-sys-color-outline-variant);position:relative;z-index:1;background:var(--p-list-surface-low);border-radius:calc(var(--p-list-radius) * .75)}.paginator-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.paginator-meta{display:flex;align-items:center;gap:8px;margin-left:auto}.paginator-page-size{width:120px}.paginator-sort{width:180px}.paginator-search{min-width:220px}.muted{color:var(--p-list-foreground-muted)}@media(max-width:720px){.list-item-content{grid-template-columns:var(--p-list-leading-width) minmax(0,1fr)}.list-item-trailing{grid-column:1/-1;padding-right:0;align-items:flex-start;text-align:start}.item-expansion{margin-left:0;margin-right:0}.paginator{align-items:stretch}.paginator-controls{width:100%}.paginator-meta{width:100%;margin-left:0;justify-content:flex-start}.paginator-page-size,.paginator-sort,.paginator-search{width:100%;min-width:0}}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [GenericCrudService, ListDataService, providePraxisListI18n()], template: "<div\n  class=\"praxis-list-root\"\n  [ngClass]=\"skinClasses\"\n  [attr.data-skin-scope]=\"skinScopeId\"\n  [attr.aria-label]=\"config.a11y?.ariaLabel || null\"\n  [attr.aria-labelledby]=\"config.a11y?.ariaLabelledBy || null\"\n>\n  @if (inlineCss) {\n    <style [attr.nonce]=\"cspNonce || null\" [textContent]=\"inlineCss\"></style>\n  }\n\n  @if (enableCustomization) {\n    <div class=\"list-assistant\">\n      <button\n        mat-mini-fab\n        type=\"button\"\n        color=\"primary\"\n        (click)=\"openConfigEditor()\"\n        [matTooltip]=\"configEditorLabel()\"\n        [attr.aria-label]=\"configEditorLabel()\"\n        data-testid=\"praxis-list-open-config-editor\"\n      >\n        <mat-icon [praxisIcon]=\"'edit'\"></mat-icon>\n      </button>\n      <praxis-ai-assistant [adapter]=\"aiAdapter\"></praxis-ai-assistant>\n    </div>\n  }\n\n  <!-- Skeleton while loading -->\n  @if ((loading$ | async) && hasSkeleton()) {\n    @if (isListVariant()) {\n      <mat-list>\n        @for (_ of skeletonItems(); track $index; let i = $index) {\n          <mat-list-item>\n            <div class=\"list-item-content\">\n              <div class=\"list-item-leading\">\n                <div class=\"skeleton skeleton-avatar\"></div>\n              </div>\n              <div class=\"list-item-text\">\n                <div class=\"skeleton skeleton-line w-60\"></div>\n                @if (layoutLines > 1) {\n                  <div class=\"skeleton skeleton-line w-40\"></div>\n                }\n              </div>\n              <div class=\"list-item-trailing\">\n                <div class=\"skeleton skeleton-chip\"></div>\n              </div>\n            </div>\n          </mat-list-item>\n        }\n      </mat-list>\n    } @else {\n      <div class=\"cards-grid\">\n        @for (_ of skeletonItems(); track $index; let i = $index) {\n          <div class=\"item-card\">\n            <div class=\"list-item-content\">\n              <div class=\"list-item-leading\">\n                <div class=\"skeleton skeleton-avatar\"></div>\n              </div>\n              <div class=\"list-item-text\">\n                <div class=\"skeleton skeleton-line w-60\"></div>\n                @if (layoutLines > 1) {\n                  <div class=\"skeleton skeleton-line w-40\"></div>\n                }\n              </div>\n              <div class=\"list-item-trailing\">\n                <div class=\"skeleton skeleton-chip\"></div>\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n    }\n  } @else {\n    <ng-container *ngTemplateOutlet=\"notLoading\"></ng-container>\n  }\n\n  <ng-template #notLoading>\n    <!-- Empty state -->\n    @if (items$ | async; as all) {\n      @if (all.length === 0) {\n        <div class=\"section-header\">\n          @if (emptyStateTemplate(); as empty) {\n            @if (\n              simpleRichContentNodes(empty, {\n                imageAlt: config.templating?.emptyState?.imageAlt || \"\",\n              });\n              as richNodes\n            ) {\n              <praxis-rich-content [nodes]=\"richNodes\"></praxis-rich-content>\n            } @else {\n              @switch (empty.type) {\n                @case (\"icon\") {\n                  <mat-icon\n                    [praxisIcon]=\"empty.value\"\n                    [ngClass]=\"empty.class\"\n                    [color]=\"isThemeColor(empty.color) ? empty.color : undefined\"\n                    [style.cssText]=\"\n                      (empty.style ? empty.style + ';' : '') +\n                      iconStyle(empty.color)\n                    \"\n                  ></mat-icon>\n                }\n                @case (\"image\") {\n                  <span\n                    class=\"inline-image\"\n                    [ngClass]=\"empty.class\"\n                    [style.cssText]=\"empty.style\"\n                  >\n                    <img\n                      [src]=\"empty.value\"\n                      [alt]=\"config.templating?.emptyState?.imageAlt || ''\"\n                    />\n                    @if (empty.badge?.value) {\n                      <mat-chip\n                        class=\"inline-badge\"\n                        [color]=\"\n                          isThemeColor(empty.badge?.color)\n                            ? empty.badge?.color\n                            : undefined\n                        \"\n                        [ngClass]=\"\n                          (empty.badge?.variant || 'filled') === 'outlined'\n                            ? 'chip-outlined'\n                            : ''\n                        \"\n                        [style.cssText]=\"\n                          chipStyle(empty.badge?.color, empty.badge?.variant)\n                        \"\n                        >{{ empty.badge?.value }}</mat-chip\n                      >\n                    }\n                  </span>\n                }\n                @case (\"chip\") {\n                  <mat-chip\n                    [color]=\"isThemeColor(empty.color) ? empty.color : undefined\"\n                    [ngClass]=\"[\n                      empty.class || '',\n                      (empty.variant || 'filled') === 'outlined'\n                        ? 'chip-outlined'\n                        : '',\n                    ]\"\n                    [style.cssText]=\"\n                      chipStyle(empty.color, empty.variant) +\n                      (empty.style ? ';' + empty.style : '')\n                    \"\n                    >{{ empty.value }}</mat-chip\n                  >\n                }\n                @case (\"rating\") {\n                  <span [ngClass]=\"empty.class\" [style.cssText]=\"empty.style\">\n                    @for (\n                      _ of ratingRange(empty);\n                      track $index;\n                      let idx = $index\n                    ) {\n                      <mat-icon\n                        [praxisIcon]=\"starIcon(idx, empty.value)\"\n                        [color]=\"ratingThemeColor(empty)\"\n                        [style.cssText]=\"ratingIconStyle(empty)\"\n                      ></mat-icon>\n                    }\n                  </span>\n                }\n                @case (\"html\") {\n                  <span\n                    [ngClass]=\"empty.class\"\n                    [style.cssText]=\"empty.style\"\n                    [innerHTML]=\"empty.value\"\n                  ></span>\n                }\n                @case (\"metric\") {\n                  <praxis-list-metric [metric]=\"empty\"></praxis-list-metric>\n                }\n                @case (\"compose\") {\n                  <praxis-list-compose [compose]=\"empty\"></praxis-list-compose>\n                }\n                @case (\"component\") {\n                  <praxis-list-runtime-component\n                    [component]=\"empty\"\n                  ></praxis-list-runtime-component>\n                }\n                @default {\n                  <span [ngClass]=\"empty.class\" [style.cssText]=\"empty.style\">{{\n                    empty.value\n                  }}</span>\n                }\n              }\n            }\n          }\n        </div>\n      }\n    }\n\n    <ng-template\n      #rowLayoutNode\n      let-node\n      let-slot=\"slot\"\n      let-imageAlt=\"imageAlt\"\n    >\n      @if (simpleRichContentNodes(node, { slot: slot, imageAlt: imageAlt }); as richNodes) {\n        <praxis-rich-content [nodes]=\"richNodes\"></praxis-rich-content>\n      } @else {\n        @switch (node?.type) {\n          @case (\"icon\") {\n            <mat-icon\n              [praxisIcon]=\"node?.value\"\n              [ngClass]=\"node?.class\"\n              [color]=\"isThemeColor(node?.color) ? node?.color : undefined\"\n              [style.cssText]=\"\n                ((node?.style || '') ? node.style + ';' : '') +\n                iconStyle(node?.color)\n              \"\n            ></mat-icon>\n          }\n          @case (\"image\") {\n            <span\n              class=\"inline-image\"\n              [ngClass]=\"node?.class\"\n              [style.cssText]=\"node?.style\"\n            >\n              <img [src]=\"node?.value\" [alt]=\"node?.imageAlt || imageAlt || ''\" />\n              @if (node?.badge?.value) {\n                <mat-chip\n                  class=\"inline-badge\"\n                  [color]=\"\n                    isThemeColor(node?.badge?.color)\n                      ? node?.badge?.color\n                      : undefined\n                  \"\n                  [ngClass]=\"\n                    (node?.badge?.variant || 'filled') === 'outlined'\n                      ? 'chip-outlined'\n                      : ''\n                  \"\n                  [style.cssText]=\"\n                    chipStyle(node?.badge?.color, node?.badge?.variant)\n                  \"\n                >\n                  {{ node?.badge?.value }}\n                </mat-chip>\n              }\n            </span>\n          }\n          @case (\"chip\") {\n            <mat-chip\n              [color]=\"isThemeColor(node?.color) ? node?.color : undefined\"\n              [ngClass]=\"[\n                node?.class || '',\n                (node?.variant || 'filled') === 'outlined' ? 'chip-outlined' : '',\n              ]\"\n              [style.cssText]=\"\n                chipStyle(node?.color, node?.variant) +\n                (node?.style ? ';' + node.style : '')\n              \"\n            >\n              {{ node?.value }}\n            </mat-chip>\n          }\n          @case (\"rating\") {\n            <span [ngClass]=\"node?.class\" [style.cssText]=\"node?.style\">\n              @for (_ of ratingRange(node); track $index; let idx = $index) {\n                <mat-icon\n                  [praxisIcon]=\"starIcon(idx, node?.value)\"\n                  [color]=\"ratingThemeColor(node)\"\n                  [style.cssText]=\"ratingIconStyle(node)\"\n                ></mat-icon>\n              }\n            </span>\n          }\n          @case (\"html\") {\n            <span\n              [ngClass]=\"node?.class\"\n              [style.cssText]=\"node?.style\"\n              [innerHTML]=\"node?.value\"\n            ></span>\n          }\n          @case (\"metric\") {\n            <praxis-list-metric [metric]=\"node\"></praxis-list-metric>\n          }\n          @case (\"compose\") {\n            <praxis-list-compose [compose]=\"node\"></praxis-list-compose>\n          }\n          @case (\"component\") {\n            <praxis-list-runtime-component\n              [component]=\"node\"\n            ></praxis-list-runtime-component>\n          }\n          @default {\n            <span [ngClass]=\"node?.class\" [style.cssText]=\"node?.style\">\n              @if (slot === \"meta\" && config.templating?.metaPrefixIcon; as mpi) {\n                <mat-icon [praxisIcon]=\"mpi\"></mat-icon>\n              }\n              {{ node?.value }}\n            </span>\n          }\n        }\n      }\n    </ng-template>\n\n    <ng-template\n      #listRowLayout\n      let-item\n      let-index=\"index\"\n      let-sectionKey=\"sectionKey\"\n      let-clickable=\"clickable\"\n    >\n      <div\n        class=\"list-item-content\"\n        [ngClass]=\"rowLayoutItemClass(item)\"\n        [attr.style]=\"rowLayoutItemStyle(item)\"\n        [attr.role]=\"clickable ? 'button' : null\"\n        [attr.tabindex]=\"clickable ? '0' : null\"\n        [attr.aria-label]=\"clickable ? itemAriaLabel(item) : null\"\n        [attr.aria-expanded]=\"\n          clickable && expansionOwnedByRow() ? isExpanded(item, index) : null\n        \"\n        [attr.aria-controls]=\"\n          clickable && expansionOwnedByRow()\n            ? expandRegionId(item, index)\n            : null\n        \"\n        (click)=\"clickable ? onRowActivate(item, index, sectionKey) : null\"\n        (keydown.enter)=\"clickable ? onRowActivate(item, index, sectionKey) : null\"\n        (keydown.space)=\"\n          onRowSpaceActivate($event, clickable, item, index, sectionKey)\n        \"\n      >\n        @for (column of rowLayoutColumns(); track rowLayoutTrackColumn($index, column)) {\n          <div\n            [attr.data-row-slot]=\"column.slot\"\n            [ngClass]=\"rowLayoutColumnClass(column)\"\n            [attr.style]=\"rowLayoutColumnStyle(column)\"\n          >\n            @if (column.slot === \"leading\") {\n              @if (rowLayoutSlot(item, column.slot); as lead) {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    rowLayoutNode;\n                    context: {\n                      $implicit: lead,\n                      slot: column.slot,\n                      imageAlt: rowLayoutImageAlt(column.slot),\n                    }\n                  \"\n                ></ng-container>\n              } @else {\n                <span class=\"leading-placeholder\"></span>\n              }\n            } @else if (column.slot === \"trailing\") {\n              @if (rowLayoutSlot(item, column.slot); as trailingNode) {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    rowLayoutNode;\n                    context: {\n                      $implicit: trailingNode,\n                      slot: column.slot,\n                      imageAlt: rowLayoutImageAlt(column.slot),\n                    }\n                  \"\n                ></ng-container>\n              }\n              @if (showExpandIcon(\"trailing\")) {\n                <button\n                  mat-icon-button\n                  type=\"button\"\n                  class=\"expand-toggle\"\n                  [attr.aria-label]=\"expandToggleAriaLabel(item, index)\"\n                  [attr.aria-expanded]=\"\n                    expansionOwnedByIcon() ? isExpanded(item, index) : null\n                  \"\n                  [attr.aria-controls]=\"\n                    expansionOwnedByIcon()\n                      ? expandRegionId(item, index)\n                      : null\n                  \"\n                  (click)=\"onExpandToggle($event, item, index)\"\n                >\n                  <mat-icon\n                    [praxisIcon]=\"\n                      isExpanded(item, index) ? 'expand_less' : 'expand_more'\n                    \"\n                  ></mat-icon>\n                </button>\n              }\n              @if ((visibleActions(item, \"trailing\") || []).length) {\n                <div\n                  class=\"list-item-actions\"\n                  (click)=\"$event.stopPropagation()\"\n                  (keydown.enter)=\"onActionKeydown($event)\"\n                  (keydown.space)=\"onActionKeydown($event)\"\n                >\n                  @for (\n                    action of visibleActions(item, \"trailing\");\n                    let aidx = $index;\n                    track action?.id ?? $index\n                  ) {\n                    @if ((action.kind || \"icon\") === \"icon\") {\n                      <button\n                        mat-icon-button\n                        [color]=\"\n                          isThemeColor(action.color) ? action.color : undefined\n                        \"\n                        (click)=\"onActionClick($event, action.id, item, index)\"\n                        [attr.aria-label]=\"action.label || action.id\"\n                        [disabled]=\"isActionLoading(action.id, item, index)\"\n                        [ngClass]=\"{\n                          'action-loading': isActionLoading(\n                            action.id,\n                            item,\n                            index\n                          ),\n                        }\"\n                      >\n                        @if (isActionLoading(action.id, item, index)) {\n                          <mat-progress-spinner\n                            class=\"action-spinner\"\n                            mode=\"indeterminate\"\n                            diameter=\"16\"\n                            strokeWidth=\"3\"\n                          ></mat-progress-spinner>\n                        } @else {\n                          <mat-icon\n                            [praxisIcon]=\"action.icon\"\n                            [style.cssText]=\"iconStyle(action.color)\"\n                          ></mat-icon>\n                        }\n                      </button>\n                    } @else {\n                      @if (action.buttonVariant === \"stroked\") {\n                        <button\n                          mat-stroked-button\n                          [color]=\"\n                            isThemeColor(action.color) ? action.color : undefined\n                          \"\n                          [style.cssText]=\"buttonStyle(action.color, 'stroked')\"\n                          (click)=\"onActionClick($event, action.id, item, index)\"\n                          [attr.aria-label]=\"action.label || action.id\"\n                          [disabled]=\"isActionLoading(action.id, item, index)\"\n                          [ngClass]=\"{\n                            'action-loading': isActionLoading(\n                              action.id,\n                              item,\n                              index\n                            ),\n                          }\"\n                        >\n                          @if (isActionLoading(action.id, item, index)) {\n                            <mat-progress-spinner\n                              class=\"action-spinner\"\n                              mode=\"indeterminate\"\n                              diameter=\"16\"\n                              strokeWidth=\"3\"\n                            ></mat-progress-spinner>\n                          } @else {\n                            {{ action.label || action.id }}\n                          }\n                        </button>\n                      }\n                      @if (action.buttonVariant === \"raised\") {\n                        <button\n                          mat-raised-button\n                          [color]=\"\n                            isThemeColor(action.color) ? action.color : undefined\n                          \"\n                          [style.cssText]=\"buttonStyle(action.color, 'raised')\"\n                          (click)=\"onActionClick($event, action.id, item, index)\"\n                          [attr.aria-label]=\"action.label || action.id\"\n                          [disabled]=\"isActionLoading(action.id, item, index)\"\n                          [ngClass]=\"{\n                            'action-loading': isActionLoading(\n                              action.id,\n                              item,\n                              index\n                            ),\n                          }\"\n                        >\n                          @if (isActionLoading(action.id, item, index)) {\n                            <mat-progress-spinner\n                              class=\"action-spinner\"\n                              mode=\"indeterminate\"\n                              diameter=\"16\"\n                              strokeWidth=\"3\"\n                            ></mat-progress-spinner>\n                          } @else {\n                            {{ action.label || action.id }}\n                          }\n                        </button>\n                      }\n                      @if (!action.buttonVariant || action.buttonVariant === \"flat\") {\n                        <button\n                          mat-flat-button\n                          [color]=\"\n                            isThemeColor(action.color) ? action.color : undefined\n                          \"\n                          [style.cssText]=\"buttonStyle(action.color, 'flat')\"\n                          (click)=\"onActionClick($event, action.id, item, index)\"\n                          [attr.aria-label]=\"action.label || action.id\"\n                          [disabled]=\"isActionLoading(action.id, item, index)\"\n                          [ngClass]=\"{\n                            'action-loading': isActionLoading(\n                              action.id,\n                              item,\n                              index\n                            ),\n                          }\"\n                        >\n                          @if (isActionLoading(action.id, item, index)) {\n                            <mat-progress-spinner\n                              class=\"action-spinner\"\n                              mode=\"indeterminate\"\n                              diameter=\"16\"\n                              strokeWidth=\"3\"\n                            ></mat-progress-spinner>\n                          } @else {\n                            {{ action.label || action.id }}\n                          }\n                        </button>\n                      }\n                    }\n                  }\n                </div>\n              }\n            } @else if (column.slot === \"actions\") {\n              @if ((visibleActions(item, \"actions\") || []).length) {\n                <div\n                  class=\"list-item-actions\"\n                  (click)=\"$event.stopPropagation()\"\n                  (keydown.enter)=\"onActionKeydown($event)\"\n                  (keydown.space)=\"onActionKeydown($event)\"\n                >\n                  @for (\n                    action of visibleActions(item, \"actions\");\n                    let aidx = $index;\n                    track action?.id ?? $index\n                  ) {\n                    @if ((action.kind || \"icon\") === \"icon\") {\n                      <button\n                        mat-icon-button\n                        [color]=\"\n                          isThemeColor(action.color) ? action.color : undefined\n                        \"\n                        (click)=\"onActionClick($event, action.id, item, index)\"\n                        [attr.aria-label]=\"action.label || action.id\"\n                        [disabled]=\"isActionLoading(action.id, item, index)\"\n                        [ngClass]=\"{\n                          'action-loading': isActionLoading(\n                            action.id,\n                            item,\n                            index\n                          ),\n                        }\"\n                      >\n                        @if (isActionLoading(action.id, item, index)) {\n                          <mat-progress-spinner\n                            class=\"action-spinner\"\n                            mode=\"indeterminate\"\n                            diameter=\"16\"\n                            strokeWidth=\"3\"\n                          ></mat-progress-spinner>\n                        } @else {\n                          <mat-icon\n                            [praxisIcon]=\"action.icon\"\n                            [style.cssText]=\"iconStyle(action.color)\"\n                          ></mat-icon>\n                        }\n                      </button>\n                    } @else {\n                      @if (action.buttonVariant === \"stroked\") {\n                        <button\n                          mat-stroked-button\n                          [color]=\"\n                            isThemeColor(action.color) ? action.color : undefined\n                          \"\n                          [style.cssText]=\"buttonStyle(action.color, 'stroked')\"\n                          (click)=\"onActionClick($event, action.id, item, index)\"\n                          [attr.aria-label]=\"action.label || action.id\"\n                          [disabled]=\"isActionLoading(action.id, item, index)\"\n                          [ngClass]=\"{\n                            'action-loading': isActionLoading(\n                              action.id,\n                              item,\n                              index\n                            ),\n                          }\"\n                        >\n                          @if (isActionLoading(action.id, item, index)) {\n                            <mat-progress-spinner\n                              class=\"action-spinner\"\n                              mode=\"indeterminate\"\n                              diameter=\"16\"\n                              strokeWidth=\"3\"\n                            ></mat-progress-spinner>\n                          } @else {\n                            {{ action.label || action.id }}\n                          }\n                        </button>\n                      }\n                      @if (action.buttonVariant === \"raised\") {\n                        <button\n                          mat-raised-button\n                          [color]=\"\n                            isThemeColor(action.color) ? action.color : undefined\n                          \"\n                          [style.cssText]=\"buttonStyle(action.color, 'raised')\"\n                          (click)=\"onActionClick($event, action.id, item, index)\"\n                          [attr.aria-label]=\"action.label || action.id\"\n                          [disabled]=\"isActionLoading(action.id, item, index)\"\n                          [ngClass]=\"{\n                            'action-loading': isActionLoading(\n                              action.id,\n                              item,\n                              index\n                            ),\n                          }\"\n                        >\n                          @if (isActionLoading(action.id, item, index)) {\n                            <mat-progress-spinner\n                              class=\"action-spinner\"\n                              mode=\"indeterminate\"\n                              diameter=\"16\"\n                              strokeWidth=\"3\"\n                            ></mat-progress-spinner>\n                          } @else {\n                            {{ action.label || action.id }}\n                          }\n                        </button>\n                      }\n                      @if (!action.buttonVariant || action.buttonVariant === \"flat\") {\n                        <button\n                          mat-flat-button\n                          [color]=\"\n                            isThemeColor(action.color) ? action.color : undefined\n                          \"\n                          [style.cssText]=\"buttonStyle(action.color, 'flat')\"\n                          (click)=\"onActionClick($event, action.id, item, index)\"\n                          [attr.aria-label]=\"action.label || action.id\"\n                          [disabled]=\"isActionLoading(action.id, item, index)\"\n                          [ngClass]=\"{\n                            'action-loading': isActionLoading(\n                              action.id,\n                              item,\n                              index\n                            ),\n                          }\"\n                        >\n                          @if (isActionLoading(action.id, item, index)) {\n                            <mat-progress-spinner\n                              class=\"action-spinner\"\n                              mode=\"indeterminate\"\n                              diameter=\"16\"\n                              strokeWidth=\"3\"\n                            ></mat-progress-spinner>\n                          } @else {\n                            {{ action.label || action.id }}\n                          }\n                        </button>\n                      }\n                    }\n                  }\n                </div>\n              }\n            } @else if (column.slot === \"expand\") {\n              @if (showExpandIcon(\"expand\")) {\n                <button\n                  mat-icon-button\n                  type=\"button\"\n                  class=\"expand-toggle\"\n                  [attr.aria-label]=\"expandToggleAriaLabel(item, index)\"\n                  [attr.aria-expanded]=\"\n                    expansionOwnedByIcon() ? isExpanded(item, index) : null\n                  \"\n                  [attr.aria-controls]=\"\n                    expansionOwnedByIcon()\n                      ? expandRegionId(item, index)\n                      : null\n                  \"\n                  (click)=\"onExpandToggle($event, item, index)\"\n                >\n                  <mat-icon\n                    [praxisIcon]=\"\n                      isExpanded(item, index) ? 'expand_less' : 'expand_more'\n                    \"\n                  ></mat-icon>\n                </button>\n              }\n            } @else if (rowLayoutSlot(item, column.slot); as slotNode) {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  rowLayoutNode;\n                  context: {\n                    $implicit: slotNode,\n                    slot: column.slot,\n                    imageAlt: rowLayoutImageAlt(column.slot),\n                  }\n                \"\n              ></ng-container>\n            }\n          </div>\n        }\n      </div>\n    </ng-template>\n\n    <!-- List variant -->\n    @if (isListVariant()) {\n      <!-- Selection list -->\n      @if (isSelectionEnabled()) {\n        <mat-selection-list\n          [multiple]=\"config.selection?.mode === 'multiple'\"\n          [formControl]=\"boundControl\"\n          (selectionChange)=\"onSelectionChange($event)\"\n        >\n          @for (\n            section of sections$ | async;\n            track trackBySection($index, section)\n          ) {\n            @if (section.key) {\n              <div class=\"section-header mat-subheader\">\n                @if (sectionHeaderTemplate(section.key); as sh) {\n                  @if (\n                    simpleRichContentNodes(sh, {\n                      imageAlt: config.templating?.sectionHeader?.imageAlt || \"\",\n                    });\n                    as richNodes\n                  ) {\n                    <praxis-rich-content [nodes]=\"richNodes\"></praxis-rich-content>\n                  } @else {\n                    @switch (sh.type) {\n                      @case (\"icon\") {\n                        <mat-icon\n                          [praxisIcon]=\"sh.value\"\n                          [ngClass]=\"sh.class\"\n                          [color]=\"isThemeColor(sh.color) ? sh.color : undefined\"\n                          [style.cssText]=\"\n                            (sh.style ? sh.style + ';' : '') + iconStyle(sh.color)\n                          \"\n                        ></mat-icon>\n                      }\n                      @case (\"image\") {\n                        <span\n                          class=\"inline-image\"\n                          [ngClass]=\"sh.class\"\n                          [style.cssText]=\"sh.style\"\n                        >\n                          <img\n                            [src]=\"sh.value\"\n                            [alt]=\"\n                              config.templating?.sectionHeader?.imageAlt || ''\n                            \"\n                          />\n                          @if (sh.badge?.value) {\n                            <mat-chip\n                              class=\"inline-badge\"\n                              [color]=\"\n                                isThemeColor(sh.badge?.color)\n                                  ? sh.badge?.color\n                                  : undefined\n                              \"\n                              [ngClass]=\"\n                                (sh.badge?.variant || 'filled') === 'outlined'\n                                  ? 'chip-outlined'\n                                  : ''\n                              \"\n                              [style.cssText]=\"\n                                chipStyle(sh.badge?.color, sh.badge?.variant)\n                              \"\n                              >{{ sh.badge?.value }}</mat-chip\n                            >\n                          }\n                        </span>\n                      }\n                      @case (\"chip\") {\n                        <mat-chip\n                          [color]=\"isThemeColor(sh.color) ? sh.color : undefined\"\n                          [ngClass]=\"[\n                            sh.class || '',\n                            (sh.variant || 'filled') === 'outlined'\n                              ? 'chip-outlined'\n                              : '',\n                          ]\"\n                          [style.cssText]=\"\n                            chipStyle(sh.color, sh.variant) +\n                            (sh.style ? ';' + sh.style : '')\n                          \"\n                          >{{ sh.value }}</mat-chip\n                        >\n                      }\n                      @case (\"rating\") {\n                        <span [ngClass]=\"sh.class\" [style.cssText]=\"sh.style\">\n                          @for (\n                            _ of ratingRange(sh);\n                            track $index;\n                            let idx = $index\n                          ) {\n                            <mat-icon\n                              [praxisIcon]=\"starIcon(idx, sh.value)\"\n                              [color]=\"ratingThemeColor(sh)\"\n                              [style.cssText]=\"ratingIconStyle(sh)\"\n                            ></mat-icon>\n                          }\n                        </span>\n                      }\n                      @case (\"html\") {\n                        <span\n                          [ngClass]=\"sh.class\"\n                          [style.cssText]=\"sh.style\"\n                          [innerHTML]=\"sh.value\"\n                        ></span>\n                      }\n                      @case (\"metric\") {\n                        <praxis-list-metric [metric]=\"sh\"></praxis-list-metric>\n                      }\n                      @case (\"compose\") {\n                        <praxis-list-compose [compose]=\"sh\"></praxis-list-compose>\n                      }\n                      @case (\"component\") {\n                        <praxis-list-runtime-component\n                          [component]=\"sh\"\n                        ></praxis-list-runtime-component>\n                      }\n                      @default {\n                        <span [ngClass]=\"sh.class\" [style.cssText]=\"sh.style\">{{\n                          sh.value\n                        }}</span>\n                      }\n                    }\n                  }\n                }\n              </div>\n            }\n            @for (\n              item of section.items;\n              track trackByItem($index, item);\n              let i = $index\n            ) {\n              <mat-list-option\n                [value]=\"item\"\n                [attr.aria-label]=\"itemAriaLabel(item)\"\n              >\n                @if (hasRowLayoutGrid()) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      listRowLayout;\n                      context: {\n                        $implicit: item,\n                        index: i,\n                        sectionKey: section.key || undefined,\n                        clickable: false,\n                      }\n                    \"\n                  ></ng-container>\n                } @else {\n                <div\n                  class=\"list-item-content\"\n                  [ngClass]=\"itemRuleClass(item)\"\n                  [attr.style]=\"itemRuleStyle(item)\"\n                >\n                  <div class=\"list-item-leading\">\n                    @if (leading(item); as lead) {\n                      @if (\n                        simpleRichContentNodes(lead, {\n                          imageAlt: config.templating?.leading?.imageAlt || \"\",\n                        });\n                        as richNodes\n                      ) {\n                        <praxis-rich-content [nodes]=\"richNodes\"></praxis-rich-content>\n                      } @else {\n                      @switch (lead.type) {\n                        @case (\"icon\") {\n                          <mat-icon\n                            [praxisIcon]=\"lead.value\"\n                            [ngClass]=\"lead.class\"\n                            [color]=\"\n                              isThemeColor(lead.color) ? lead.color : undefined\n                            \"\n                            [style.cssText]=\"\n                              (lead.style ? lead.style + ';' : '') +\n                              iconStyle(lead.color)\n                            \"\n                          ></mat-icon>\n                        }\n                        @case (\"image\") {\n                          <div\n                            class=\"lead-image\"\n                            [ngClass]=\"lead.class\"\n                            [style.cssText]=\"lead.style\"\n                          >\n                            <img\n                              [src]=\"lead.value\"\n                              [alt]=\"config.templating?.leading?.imageAlt || ''\"\n                            />\n                            @if (lead.badge?.value) {\n                              <mat-chip\n                                class=\"lead-badge\"\n                                [color]=\"\n                                  isThemeColor(lead.badge?.color)\n                                    ? lead.badge?.color\n                                    : undefined\n                                \"\n                                [ngClass]=\"\n                                  (lead.badge?.variant || 'filled') ===\n                                  'outlined'\n                                    ? 'chip-outlined'\n                                    : ''\n                                \"\n                                [style.cssText]=\"\n                                  chipStyle(\n                                    lead.badge?.color,\n                                    lead.badge?.variant\n                                  )\n                                \"\n                                >{{ lead.badge?.value }}</mat-chip\n                              >\n                            }\n                          </div>\n                        }\n                        @case (\"text\") {\n                          <span\n                            [ngClass]=\"lead.class\"\n                            [style.cssText]=\"lead.style\"\n                            >{{ lead.value }}</span\n                          >\n                        }\n                        @case (\"chip\") {\n                          <mat-chip\n                            [color]=\"\n                              isThemeColor(lead.color) ? lead.color : undefined\n                            \"\n                            [ngClass]=\"\n                              (lead.variant || 'filled') === 'outlined'\n                                ? 'chip-outlined'\n                                : ''\n                            \"\n                            [style.cssText]=\"\n                              chipStyle(lead.color, lead.variant)\n                            \"\n                            >{{ lead.value }}</mat-chip\n                          >\n                        }\n                        @case (\"rating\") {\n                          <span\n                            [ngClass]=\"lead.class\"\n                            [style.cssText]=\"lead.style\"\n                          >\n                            @for (\n                              _ of ratingRange(lead);\n                              track $index;\n                              let idx = $index\n                            ) {\n                              <mat-icon\n                                [praxisIcon]=\"starIcon(idx, lead.value)\"\n                                [color]=\"ratingThemeColor(lead)\"\n                                [style.cssText]=\"ratingIconStyle(lead)\"\n                              ></mat-icon>\n                            }\n                          </span>\n                        }\n                        @case (\"html\") {\n                          <span\n                            [ngClass]=\"lead.class\"\n                            [style.cssText]=\"lead.style\"\n                            [innerHTML]=\"lead.value\"\n                          ></span>\n                        }\n                        @case (\"metric\") {\n                          <praxis-list-metric [metric]=\"lead\"></praxis-list-metric>\n                        }\n                        @case (\"compose\") {\n                          <praxis-list-compose\n                            [compose]=\"lead\"\n                          ></praxis-list-compose>\n                        }\n                        @case (\"component\") {\n                          <praxis-list-runtime-component\n                            [component]=\"lead\"\n                          ></praxis-list-runtime-component>\n                        }\n                        @default {\n                          <span\n                            [ngClass]=\"lead.class\"\n                            [style.cssText]=\"lead.style\"\n                            >{{ lead.value }}</span\n                          >\n                        }\n                      }\n                      }\n                    } @else {\n                      <span class=\"leading-placeholder\"></span>\n                    }\n                  </div>\n                  <div class=\"list-item-text\">\n                    <div\n                      class=\"primary\"\n                      [ngClass]=\"primary(item)?.class\"\n                      [style.cssText]=\"primary(item)?.style\"\n                    >\n                      @if (simpleRichContentNodes(primary(item)); as richNodes) {\n                        <praxis-rich-content [nodes]=\"richNodes\"></praxis-rich-content>\n                      } @else if (primary(item)?.type === \"metric\") {\n                        <praxis-list-metric\n                          [metric]=\"primary(item)\"\n                        ></praxis-list-metric>\n                      } @else if (primary(item)?.type === \"compose\") {\n                        <praxis-list-compose\n                          [compose]=\"primary(item)\"\n                        ></praxis-list-compose>\n                      } @else if (primary(item)?.type === \"component\") {\n                        <praxis-list-runtime-component\n                          [component]=\"primary(item)\"\n                        ></praxis-list-runtime-component>\n                      } @else {\n                        {{ primary(item)?.value }}\n                      }\n                    </div>\n                    @if (layoutLines > 1) {\n                      <div\n                        class=\"secondary\"\n                        [ngClass]=\"secondary(item)?.class\"\n                        [style.cssText]=\"secondary(item)?.style\"\n                      >\n                        @if (simpleRichContentNodes(secondary(item)); as richNodes) {\n                          <praxis-rich-content [nodes]=\"richNodes\"></praxis-rich-content>\n                        } @else if (secondary(item)?.type === \"metric\") {\n                          <praxis-list-metric\n                            [metric]=\"secondary(item)\"\n                          ></praxis-list-metric>\n                        } @else if (secondary(item)?.type === \"compose\") {\n                          <praxis-list-compose\n                            [compose]=\"secondary(item)\"\n                          ></praxis-list-compose>\n                        } @else if (secondary(item)?.type === \"component\") {\n                          <praxis-list-runtime-component\n                            [component]=\"secondary(item)\"\n                          ></praxis-list-runtime-component>\n                        } @else {\n                          {{ secondary(item)?.value }}\n                        }\n                      </div>\n                    }\n                    @if (meta(item); as m) {\n                      @if (\n                        (config.templating?.metaPlacement === \"line\" &&\n                          (m?.type === \"text\" ||\n                            m?.type === \"date\" ||\n                            m?.type === \"currency\")) ||\n                        (layoutLines > 2 &&\n                          (m?.type === \"text\" ||\n                            m?.type === \"date\" ||\n                            m?.type === \"currency\"))\n                      ) {\n                        <div\n                          class=\"tertiary\"\n                          [ngClass]=\"m.class\"\n                          [style.cssText]=\"m.style\"\n                        >\n                          @if (config.templating?.metaPrefixIcon; as mpi) {\n                            <mat-icon [praxisIcon]=\"mpi\"></mat-icon>\n                          }\n                          {{ m.value }}\n                        </div>\n                      }\n                    }\n                    @if (featuresVisible()) {\n                      <div class=\"features\">\n                        @for (\n                          f of config.templating?.features || [];\n                          track $index;\n                          let fi = $index\n                        ) {\n                          <span\n                            class=\"feature\"\n                            [ngClass]=\"\n                              featureSemanticClass(item, f.expr, f.class)\n                            \"\n                          >\n                            @if (featureRichContentNodes(item, f); as featureNodes) {\n                              <praxis-rich-content [nodes]=\"featureNodes\"></praxis-rich-content>\n                            } @else {\n                              @if (f.icon && featuresMode() !== \"labels-only\") {\n                                <mat-icon [praxisIcon]=\"f.icon\"></mat-icon>\n                              }\n                              @if (featuresMode() !== \"icons-only\") {\n                                <span\n                                  [ngClass]=\"f.class\"\n                                  [style.cssText]=\"f.style\"\n                                >\n                                  @for (\n                                    line of featureLabelLines(item, f.expr);\n                                    track $index\n                                  ) {\n                                    <span class=\"feature-line\">{{ line }}</span>\n                                  }\n                                </span>\n                              }\n                            }\n                            @if (\n                              featureProgressPercent(item, f.expr, f.class);\n                              as progress\n                            ) {\n                              <span class=\"feature-progress\" aria-hidden=\"true\">\n                                <span\n                                  class=\"feature-progress__value\"\n                                  [style.width.%]=\"progress\"\n                                ></span>\n                              </span>\n                            }\n                          </span>\n                        }\n                      </div>\n                    }\n                  </div>\n                  <div class=\"list-item-trailing\">\n                    @if (meta(item); as m) {\n                      @if (\n                        !(\n                          (config.templating?.metaPlacement === \"line\" ||\n                            layoutLines > 2) &&\n                          (m?.type === \"text\" ||\n                            m?.type === \"date\" ||\n                            m?.type === \"currency\")\n                        )\n                      ) {\n                        <div\n                          class=\"meta\"\n                          [ngClass]=\"m.class\"\n                          [style.cssText]=\"m.style\"\n                        >\n                          @if (simpleRichContentNodes(m, { slot: 'meta' }); as richNodes) {\n                            <praxis-rich-content [nodes]=\"richNodes\"></praxis-rich-content>\n                          } @else {\n                          @switch (m.type) {\n                            @case (\"chip\") {\n                              <mat-chip\n                                [color]=\"\n                                  isThemeColor(m.color) ? m.color : undefined\n                                \"\n                                [ngClass]=\"\n                                  (m.variant || 'filled') === 'outlined'\n                                    ? 'chip-outlined'\n                                    : ''\n                                \"\n                                [style.cssText]=\"chipStyle(m.color, m.variant)\"\n                                >{{ m.value }}</mat-chip\n                              >\n                            }\n                            @case (\"rating\") {\n                              @for (\n                                _ of ratingRange(m);\n                                track $index;\n                                let idx = $index\n                              ) {\n                                <mat-icon\n                                  [praxisIcon]=\"starIcon(idx, m.value)\"\n                                  [color]=\"ratingThemeColor(m)\"\n                                  [style.cssText]=\"ratingIconStyle(m)\"\n                                ></mat-icon>\n                              }\n                            }\n                            @case (\"icon\") {\n                              <mat-icon\n                                [praxisIcon]=\"m.value\"\n                                [color]=\"\n                                  isThemeColor(m.color) ? m.color : undefined\n                                \"\n                                [style.cssText]=\"iconStyle(m.color)\"\n                              ></mat-icon>\n                            }\n                            @case (\"image\") {\n                              <span class=\"inline-image\"\n                                ><img [src]=\"m.value\" [alt]=\"m.imageAlt || ''\"\n                              /></span>\n                            }\n                            @case (\"html\") {\n                              <span [innerHTML]=\"m.value\"></span>\n                            }\n                            @case (\"metric\") {\n                              <praxis-list-metric [metric]=\"m\"></praxis-list-metric>\n                            }\n                            @case (\"compose\") {\n                              <praxis-list-compose\n                                [compose]=\"m\"\n                              ></praxis-list-compose>\n                            }\n                            @case (\"component\") {\n                              <praxis-list-runtime-component\n                                [component]=\"m\"\n                              ></praxis-list-runtime-component>\n                            }\n                            @default {\n                              <span>\n                                @if (\n                                  config.templating?.metaPrefixIcon;\n                                  as mpi2\n                                ) {\n                                  <mat-icon [praxisIcon]=\"mpi2\"></mat-icon>\n                                }\n                                {{ m.value }}</span\n                              >\n                            }\n                          }\n                          }\n                        </div>\n                      }\n                    }\n                    @if (trailing(item); as tr) {\n                      <div\n                        class=\"trailing\"\n                        [ngClass]=\"tr.class\"\n                        [style.cssText]=\"tr.style\"\n                      >\n                        @if (\n                          simpleRichContentNodes(tr, {\n                            imageAlt: config.templating?.trailing?.imageAlt || \"\",\n                          });\n                          as richNodes\n                        ) {\n                          <praxis-rich-content [nodes]=\"richNodes\"></praxis-rich-content>\n                        } @else {\n                        @switch (tr.type) {\n                          @case (\"chip\") {\n                            <mat-chip\n                              [color]=\"\n                                isThemeColor(tr.color) ? tr.color : undefined\n                              \"\n                              [ngClass]=\"\n                                (tr.variant || 'filled') === 'outlined'\n                                  ? 'chip-outlined'\n                                  : ''\n                              \"\n                              [style.cssText]=\"chipStyle(tr.color, tr.variant)\"\n                              >{{ tr.value }}</mat-chip\n                            >\n                          }\n                          @case (\"icon\") {\n                            <mat-icon\n                              [praxisIcon]=\"tr.value\"\n                              [color]=\"\n                                isThemeColor(tr.color) ? tr.color : undefined\n                              \"\n                              [style.cssText]=\"iconStyle(tr.color)\"\n                            ></mat-icon>\n                          }\n                          @case (\"image\") {\n                            <div\n                              class=\"lead-image\"\n                              [ngClass]=\"tr.class\"\n                              [style.cssText]=\"tr.style\"\n                            >\n                              <img\n                                [src]=\"tr.value\"\n                                [alt]=\"\n                                  config.templating?.trailing?.imageAlt || ''\n                                \"\n                              />\n                              @if (tr.badge?.value) {\n                                <mat-chip\n                                  class=\"lead-badge\"\n                                  [color]=\"\n                                    isThemeColor(tr.badge?.color)\n                                      ? tr.badge?.color\n                                      : undefined\n                                  \"\n                                  [ngClass]=\"\n                                    (tr.badge?.variant || 'filled') ===\n                                    'outlined'\n                                      ? 'chip-outlined'\n                                      : ''\n                                  \"\n                                  [style.cssText]=\"\n                                    chipStyle(\n                                      tr.badge?.color,\n                                      tr.badge?.variant\n                                    )\n                                  \"\n                                  >{{ tr.badge?.value }}</mat-chip\n                                >\n                              }\n                            </div>\n                          }\n                          @case (\"rating\") {\n                            @for (\n                              _ of ratingRange(tr);\n                              track $index;\n                              let idx = $index\n                            ) {\n                              <mat-icon\n                                [praxisIcon]=\"starIcon(idx, tr.value)\"\n                                [color]=\"ratingThemeColor(tr)\"\n                                [style.cssText]=\"ratingIconStyle(tr)\"\n                              ></mat-icon>\n                            }\n                          }\n                          @case (\"html\") {\n                            @if (item.alertsData !== undefined && item.ownerName) {\n                              <!-- Component-based rendering for executive trailing -->\n                              <span class=\"exec-trailing-shell\">\n                                <praxis-executive-alerts [alerts]=\"item.alertsData\"></praxis-executive-alerts>\n                                <praxis-executive-owner [name]=\"item.ownerName\"></praxis-executive-owner>\n                              </span>\n                            } @else {\n                              <span [innerHTML]=\"tr.value\"></span>\n                            }\n                          }\n                          @case (\"metric\") {\n                            <praxis-list-metric [metric]=\"tr\"></praxis-list-metric>\n                          }\n                          @case (\"compose\") {\n                            <praxis-list-compose\n                              [compose]=\"tr\"\n                            ></praxis-list-compose>\n                          }\n                          @case (\"component\") {\n                            <praxis-list-runtime-component\n                              [component]=\"tr\"\n                            ></praxis-list-runtime-component>\n                          }\n                          @default {\n                            <span>{{ tr.value }}</span>\n                          }\n                        }\n                        }\n                      </div>\n                    }\n                    @if (showExpandIcon(\"trailing\")) {\n                      <button\n                        mat-icon-button\n                        type=\"button\"\n                        class=\"expand-toggle\"\n                        [attr.aria-label]=\"expandToggleAriaLabel(item, i)\"\n                        [attr.aria-expanded]=\"\n                          expansionOwnedByIcon() ? isExpanded(item, i) : null\n                        \"\n                        [attr.aria-controls]=\"\n                          expansionOwnedByIcon()\n                            ? expandRegionId(item, i)\n                            : null\n                        \"\n                        (click)=\"onExpandToggle($event, item, i)\"\n                      >\n                        <mat-icon\n                          [praxisIcon]=\"\n                            isExpanded(item, i) ? 'expand_less' : 'expand_more'\n                          \"\n                        ></mat-icon>\n                      </button>\n                    }\n                    @if ((visibleActions(item, \"trailing\") || []).length) {\n                      <div\n                        class=\"list-item-actions\"\n                        (click)=\"$event.stopPropagation()\"\n                        (keydown.enter)=\"onActionKeydown($event)\"\n                        (keydown.space)=\"onActionKeydown($event)\"\n                      >\n                        @for (\n                          action of visibleActions(item, \"trailing\");\n                          let aidx = $index;\n                          track action?.id ?? $index\n                        ) {\n                          @if ((action.kind || \"icon\") === \"icon\") {\n                            <button\n                              mat-icon-button\n                              [color]=\"\n                                isThemeColor(action.color)\n                                  ? action.color\n                                  : undefined\n                              \"\n                              (click)=\"\n                                onActionClick($event, action.id, item, i)\n                              \"\n                              [attr.aria-label]=\"action.label || action.id\"\n                              [disabled]=\"isActionLoading(action.id, item, i)\"\n                              [ngClass]=\"{\n                                'action-loading': isActionLoading(\n                                  action.id,\n                                  item,\n                                  i\n                                ),\n                              }\"\n                            >\n                              @if (isActionLoading(action.id, item, i)) {\n                                <mat-progress-spinner\n                                  class=\"action-spinner\"\n                                  mode=\"indeterminate\"\n                                  diameter=\"16\"\n                                  strokeWidth=\"3\"\n                                ></mat-progress-spinner>\n                              } @else {\n                                <mat-icon\n                                  [praxisIcon]=\"action.icon\"\n                                  [style.cssText]=\"iconStyle(action.color)\"\n                                ></mat-icon>\n                              }\n                            </button>\n                          } @else {\n                            @if (action.buttonVariant === \"stroked\") {\n                              <button\n                                mat-stroked-button\n                                [color]=\"\n                                  isThemeColor(action.color)\n                                    ? action.color\n                                    : undefined\n                                \"\n                                [style.cssText]=\"\n                                  buttonStyle(action.color, 'stroked')\n                                \"\n                                (click)=\"\n                                  onActionClick($event, action.id, item, i)\n                                \"\n                                [attr.aria-label]=\"action.label || action.id\"\n                                [disabled]=\"isActionLoading(action.id, item, i)\"\n                                [ngClass]=\"{\n                                  'action-loading': isActionLoading(\n                                    action.id,\n                                    item,\n                                    i\n                                  ),\n                                }\"\n                              >\n                                @if (isActionLoading(action.id, item, i)) {\n                                  <mat-progress-spinner\n                                    class=\"action-spinner\"\n                                    mode=\"indeterminate\"\n                                    diameter=\"16\"\n                                    strokeWidth=\"3\"\n                                  ></mat-progress-spinner>\n                                } @else {\n                                  {{ action.label || action.id }}\n                                }\n                              </button>\n                            }\n                            @if (action.buttonVariant === \"raised\") {\n                              <button\n                                mat-raised-button\n                                [color]=\"\n                                  isThemeColor(action.color)\n                                    ? action.color\n                                    : undefined\n                                \"\n                                [style.cssText]=\"\n                                  buttonStyle(action.color, 'raised')\n                                \"\n                                (click)=\"\n                                  onActionClick($event, action.id, item, i)\n                                \"\n                                [attr.aria-label]=\"action.label || action.id\"\n                                [disabled]=\"isActionLoading(action.id, item, i)\"\n                                [ngClass]=\"{\n                                  'action-loading': isActionLoading(\n                                    action.id,\n                                    item,\n                                    i\n                                  ),\n                                }\"\n                              >\n                                @if (isActionLoading(action.id, item, i)) {\n                                  <mat-progress-spinner\n                                    class=\"action-spinner\"\n                                    mode=\"indeterminate\"\n                                    diameter=\"16\"\n                                    strokeWidth=\"3\"\n                                  ></mat-progress-spinner>\n                                } @else {\n                                  {{ action.label || action.id }}\n                                }\n                              </button>\n                            }\n                            @if (\n                              !action.buttonVariant ||\n                              action.buttonVariant === \"flat\"\n                            ) {\n                              <button\n                                mat-flat-button\n                                [color]=\"\n                                  isThemeColor(action.color)\n                                    ? action.color\n                                    : undefined\n                                \"\n                                [style.cssText]=\"\n                                  buttonStyle(action.color, 'flat')\n                                \"\n                                (click)=\"\n                                  onActionClick($event, action.id, item, i)\n                                \"\n                                [attr.aria-label]=\"action.label || action.id\"\n                                [disabled]=\"isActionLoading(action.id, item, i)\"\n                                [ngClass]=\"{\n                                  'action-loading': isActionLoading(\n                                    action.id,\n                                    item,\n                                    i\n                                  ),\n                                }\"\n                              >\n                                @if (isActionLoading(action.id, item, i)) {\n                                  <mat-progress-spinner\n                                    class=\"action-spinner\"\n                                    mode=\"indeterminate\"\n                                    diameter=\"16\"\n                                    strokeWidth=\"3\"\n                                  ></mat-progress-spinner>\n                                } @else {\n                                  {{ action.label || action.id }}\n                                }\n                              </button>\n                            }\n                          }\n                        }\n                      </div>\n                    }\n                  </div>\n                </div>\n                }\n                @if (isExpandable() && isExpanded(item, i)) {\n                  <div\n                    class=\"item-expansion\"\n                    [id]=\"expandRegionId(item, i)\"\n                    role=\"region\"\n                    [attr.aria-label]=\"expansionRegionAriaLabel(item)\"\n                  >\n                    <div class=\"item-expansion-grid\">\n                      @for (\n                        expansionSection of expansionSections(item);\n                        track expansionSection.id\n                      ) {\n                        <section\n                          class=\"expansion-section\"\n                          [attr.data-section-type]=\"expansionSection.type\"\n                        >\n                          @if (expansionSection.title) {\n                            <div class=\"expansion-section-title\">\n                              {{ expansionSection.title }}\n                            </div>\n                          }\n                          @if (\n                            expansionSectionHasContent(\n                              item,\n                              expansionSection,\n                              i\n                            )\n                          ) {\n                            @switch (expansionSection.type) {\n                              @case (\"chip-list\") {\n                                <div class=\"expansion-chip-list\">\n                                  @for (\n                                    expansionEntry of expansionSectionItems(\n                                      item,\n                                      expansionSection,\n                                      i\n                                    );\n                                    track $index\n                                  ) {\n                                    <mat-chip class=\"expansion-chip\">{{\n                                      expansionItemLabel(expansionEntry)\n                                    }}</mat-chip>\n                                  }\n                                </div>\n                              }\n                              @case (\"timeline\") {\n                                <div class=\"expansion-timeline\">\n                                  @for (\n                                    expansionEntry of expansionSectionItems(\n                                      item,\n                                      expansionSection,\n                                      i\n                                    );\n                                    track $index\n                                  ) {\n                                    <div class=\"expansion-timeline-item\">\n                                      <div class=\"expansion-timeline-title\">\n                                        {{\n                                          expansionTimelineTitle(expansionEntry)\n                                        }}\n                                      </div>\n                                      @if (\n                                        expansionTimelineMeta(expansionEntry)\n                                      ) {\n                                        <div class=\"expansion-timeline-meta\">\n                                          {{\n                                            expansionTimelineMeta(\n                                              expansionEntry\n                                            )\n                                          }}\n                                        </div>\n                                      }\n                                      @if (\n                                        expansionTimelineDescription(\n                                          expansionEntry\n                                        )\n                                      ) {\n                                        <div\n                                          class=\"expansion-timeline-description\"\n                                        >\n                                          {{\n                                            expansionTimelineDescription(\n                                              expansionEntry\n                                            )\n                                          }}\n                                        </div>\n                                      }\n                                    </div>\n                                  }\n                                </div>\n                              }\n                              @case (\"key-value\") {\n                                <dl class=\"expansion-key-value\">\n                                  @for (\n                                    expansionEntry of expansionSectionItems(\n                                      item,\n                                      expansionSection,\n                                      i\n                                    );\n                                    track $index\n                                  ) {\n                                    <div class=\"expansion-key-value-row\">\n                                      @if (\n                                        expansionKeyValueKey(expansionEntry)\n                                      ) {\n                                        <dt>\n                                          {{\n                                            expansionKeyValueKey(expansionEntry)\n                                          }}\n                                        </dt>\n                                      }\n                                      <dd>\n                                        {{\n                                          expansionKeyValueValue(expansionEntry)\n                                        }}\n                                      </dd>\n                                    </div>\n                                  }\n                                </dl>\n                              }\n                              @default {\n                                <div class=\"expansion-info-list\">\n                                  @for (\n                                    expansionEntry of expansionSectionItems(\n                                      item,\n                                      expansionSection,\n                                      i\n                                    );\n                                    track $index\n                                  ) {\n                                    <div class=\"expansion-info-item\">\n                                      <div class=\"expansion-info-title\">\n                                        {{ expansionInfoTitle(expansionEntry) }}\n                                      </div>\n                                      @if (expansionInfoValue(expansionEntry)) {\n                                        <div class=\"expansion-info-value\">\n                                          {{\n                                            expansionInfoValue(expansionEntry)\n                                          }}\n                                        </div>\n                                      }\n                                    </div>\n                                  }\n                                </div>\n                              }\n                            }\n                          } @else {\n                            <div class=\"expansion-empty\">\n                              {{\n                                expansionSection.emptyLabel ||\n                                  \"Sem dados dispon\u00EDveis\"\n                              }}\n                            </div>\n                          }\n                        </section>\n                      }\n                    </div>\n                  </div>\n                }\n              </mat-list-option>\n              @if (\n                (config.layout?.dividers === \"all\" ||\n                  config.layout?.dividers === \"between\") &&\n                i < section.items.length - 1\n              ) {\n                <mat-divider></mat-divider>\n              }\n            }\n          }\n        </mat-selection-list>\n      } @else {\n        <ng-container *ngTemplateOutlet=\"readList\"></ng-container>\n      }\n\n      <!-- Read-only list -->\n      <ng-template #readList>\n        <mat-list>\n          @for (\n            section of sections$ | async;\n            track trackBySection($index, section);\n            let sidx = $index\n          ) {\n            @if (section.key) {\n              <div class=\"section-header mat-subheader\">\n                @if (sectionHeaderTemplate(section.key); as sh) {\n                  @if (\n                    simpleRichContentNodes(sh, {\n                      imageAlt: config.templating?.sectionHeader?.imageAlt || \"\",\n                    });\n                    as richNodes\n                  ) {\n                    <praxis-rich-content [nodes]=\"richNodes\"></praxis-rich-content>\n                  } @else {\n                    @switch (sh.type) {\n                      @case (\"icon\") {\n                        <mat-icon\n                          [praxisIcon]=\"sh.value\"\n                          [ngClass]=\"sh.class\"\n                          [color]=\"isThemeColor(sh.color) ? sh.color : undefined\"\n                          [style.cssText]=\"\n                            (sh.style ? sh.style + ';' : '') + iconStyle(sh.color)\n                          \"\n                        ></mat-icon>\n                      }\n                      @case (\"image\") {\n                        <span\n                          class=\"inline-image\"\n                          [ngClass]=\"sh.class\"\n                          [style.cssText]=\"sh.style\"\n                        >\n                          <img\n                            [src]=\"sh.value\"\n                            [alt]=\"\n                              config.templating?.sectionHeader?.imageAlt || ''\n                            \"\n                          />\n                          @if (sh.badge?.value) {\n                            <mat-chip\n                              class=\"inline-badge\"\n                              [color]=\"\n                                isThemeColor(sh.badge?.color)\n                                  ? sh.badge?.color\n                                  : undefined\n                              \"\n                              [ngClass]=\"\n                                (sh.badge?.variant || 'filled') === 'outlined'\n                                  ? 'chip-outlined'\n                                  : ''\n                              \"\n                              [style.cssText]=\"\n                                chipStyle(sh.badge?.color, sh.badge?.variant)\n                              \"\n                              >{{ sh.badge?.value }}</mat-chip\n                            >\n                          }\n                        </span>\n                      }\n                      @case (\"chip\") {\n                        <mat-chip\n                          [color]=\"isThemeColor(sh.color) ? sh.color : undefined\"\n                          [ngClass]=\"[\n                            sh.class || '',\n                            (sh.variant || 'filled') === 'outlined'\n                              ? 'chip-outlined'\n                              : '',\n                          ]\"\n                          [style.cssText]=\"\n                            chipStyle(sh.color, sh.variant) +\n                            (sh.style ? ';' + sh.style : '')\n                          \"\n                          >{{ sh.value }}</mat-chip\n                        >\n                      }\n                      @case (\"rating\") {\n                        <span [ngClass]=\"sh.class\" [style.cssText]=\"sh.style\">\n                          @for (\n                            _ of ratingRange(sh);\n                            track $index;\n                            let idx = $index\n                          ) {\n                            <mat-icon\n                              [praxisIcon]=\"starIcon(idx, sh.value)\"\n                              [color]=\"ratingThemeColor(sh)\"\n                              [style.cssText]=\"ratingIconStyle(sh)\"\n                            ></mat-icon>\n                          }\n                        </span>\n                      }\n                      @case (\"html\") {\n                        <span\n                          [ngClass]=\"sh.class\"\n                          [style.cssText]=\"sh.style\"\n                          [innerHTML]=\"sh.value\"\n                        ></span>\n                      }\n                      @case (\"metric\") {\n                        <praxis-list-metric [metric]=\"sh\"></praxis-list-metric>\n                      }\n                      @default {\n                        <span [ngClass]=\"sh.class\" [style.cssText]=\"sh.style\">{{\n                          sh.value\n                        }}</span>\n                      }\n                    }\n                  }\n                }\n              </div>\n            }\n            @for (\n              item of section.items;\n              track trackByItem($index, item);\n              let i = $index\n            ) {\n              <mat-list-item [attr.data-item-status]=\"item?.status || null\">\n                @if (hasRowLayoutGrid()) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      listRowLayout;\n                      context: {\n                        $implicit: item,\n                        index: i,\n                        sectionKey: section.key || undefined,\n                        clickable: true,\n                      }\n                    \"\n                  ></ng-container>\n                } @else {\n                <div\n                  class=\"list-item-content\"\n                  [ngClass]=\"itemRuleClass(item)\"\n                  [attr.style]=\"itemRuleStyle(item)\"\n                >\n                  <button\n                    type=\"button\"\n                    class=\"list-item-main-action\"\n                    [attr.aria-label]=\"itemAriaLabel(item)\"\n                    [attr.aria-expanded]=\"\n                      expansionOwnedByRow() ? isExpanded(item, i) : null\n                    \"\n                    [attr.aria-controls]=\"\n                      expansionOwnedByRow() ? expandRegionId(item, i) : null\n                    \"\n                    (click)=\"onRowActivate(item, i, section.key || undefined)\"\n                  >\n                    <div class=\"list-item-leading\">\n                      @if (leading(item); as lead) {\n                        @if (\n                          simpleRichContentNodes(lead, {\n                            imageAlt: config.templating?.leading?.imageAlt || \"\",\n                          });\n                          as richNodes\n                        ) {\n                          <praxis-rich-content [nodes]=\"richNodes\"></praxis-rich-content>\n                        } @else {\n                        @switch (lead.type) {\n                          @case (\"icon\") {\n                            <mat-icon\n                              [praxisIcon]=\"lead.value\"\n                              [ngClass]=\"lead.class\"\n                              [color]=\"\n                                isThemeColor(lead.color)\n                                  ? lead.color\n                                  : undefined\n                              \"\n                              [style.cssText]=\"\n                                (lead.style ? lead.style + ';' : '') +\n                                iconStyle(lead.color)\n                              \"\n                            ></mat-icon>\n                          }\n                          @case (\"image\") {\n                            <div\n                              class=\"lead-image\"\n                              [ngClass]=\"lead.class\"\n                              [style.cssText]=\"lead.style\"\n                            >\n                              <img\n                                [src]=\"lead.value\"\n                                [alt]=\"\n                                  config.templating?.leading?.imageAlt || ''\n                                \"\n                              />\n                              @if (lead.badge?.value) {\n                                <mat-chip\n                                  class=\"lead-badge\"\n                                  [color]=\"\n                                    isThemeColor(lead.badge?.color)\n                                      ? lead.badge?.color\n                                      : undefined\n                                  \"\n                                  [ngClass]=\"\n                                    (lead.badge?.variant || 'filled') ===\n                                    'outlined'\n                                      ? 'chip-outlined'\n                                      : ''\n                                  \"\n                                  [style.cssText]=\"\n                                    chipStyle(\n                                      lead.badge?.color,\n                                      lead.badge?.variant\n                                    )\n                                  \"\n                                  >{{ lead.badge?.value }}</mat-chip\n                                >\n                              }\n                            </div>\n                          }\n                          @case (\"text\") {\n                            <span\n                              [ngClass]=\"lead.class\"\n                              [style.cssText]=\"lead.style\"\n                              >{{ lead.value }}</span\n                            >\n                          }\n                          @case (\"chip\") {\n                            <mat-chip\n                              [color]=\"\n                                isThemeColor(lead.color)\n                                  ? lead.color\n                                  : undefined\n                              \"\n                              [ngClass]=\"\n                                (lead.variant || 'filled') === 'outlined'\n                                  ? 'chip-outlined'\n                                  : ''\n                              \"\n                              [style.cssText]=\"\n                                chipStyle(lead.color, lead.variant)\n                              \"\n                              >{{ lead.value }}</mat-chip\n                            >\n                          }\n                          @case (\"rating\") {\n                            @for (\n                              _ of ratingRange(lead);\n                              track $index;\n                              let idx = $index\n                            ) {\n                              <mat-icon\n                                [praxisIcon]=\"starIcon(idx, lead.value)\"\n                                [color]=\"ratingThemeColor(lead)\"\n                                [style.cssText]=\"ratingIconStyle(lead)\"\n                              ></mat-icon>\n                            }\n                          }\n                          @case (\"html\") {\n                            <span\n                              [ngClass]=\"lead.class\"\n                              [style.cssText]=\"lead.style\"\n                              [innerHTML]=\"lead.value\"\n                            ></span>\n                          }\n                          @case (\"metric\") {\n                            <praxis-list-metric [metric]=\"lead\"></praxis-list-metric>\n                          }\n                          @default {\n                            <span\n                              [ngClass]=\"lead.class\"\n                              [style.cssText]=\"lead.style\"\n                              >{{ lead.value }}</span\n                            >\n                          }\n                        }\n                        }\n                      } @else {\n                        <span class=\"leading-placeholder\"></span>\n                      }\n                    </div>\n                    <div class=\"list-item-text\">\n                      <div\n                        class=\"primary\"\n                        [ngClass]=\"primary(item)?.class\"\n                        [style.cssText]=\"primary(item)?.style\"\n                      >\n                        @if (simpleRichContentNodes(primary(item)); as richNodes) {\n                          <praxis-rich-content [nodes]=\"richNodes\"></praxis-rich-content>\n                        } @else if (primary(item)?.type === \"metric\") {\n                          <praxis-list-metric\n                            [metric]=\"primary(item)\"\n                          ></praxis-list-metric>\n                        } @else if (primary(item)?.type === \"html\") {\n                          <span [innerHTML]=\"primary(item)?.value\"></span>\n                        } @else {\n                          {{ primary(item)?.value }}\n                        }\n                      </div>\n                      @if (layoutLines > 1) {\n                        <div\n                          class=\"secondary\"\n                          [ngClass]=\"secondary(item)?.class\"\n                          [style.cssText]=\"secondary(item)?.style\"\n                        >\n                          @if (simpleRichContentNodes(secondary(item)); as richNodes) {\n                            <praxis-rich-content [nodes]=\"richNodes\"></praxis-rich-content>\n                          } @else if (item.segmentVariant && item.segmentLabel && item.accountType && item.since) {\n                            <!-- Component-based rendering for executive items -->\n                            <span class=\"exec-subline\">\n                                <praxis-executive-badge\n                                  [variant]=\"item.segmentVariant\"\n                                  [label]=\"item.segmentLabel\"\n                                ></praxis-executive-badge>\n                              <span class=\"exec-subcopy\">{{ item.accountType }}</span>\n                              <span class=\"exec-subseparator\">\u00B7</span>\n                              <span class=\"exec-subcopy\">Desde {{ item.since }}</span>\n                            </span>\n                          } @else if (secondary(item)?.type === \"html\") {\n                            <span [innerHTML]=\"secondary(item)?.value\"></span>\n                          } @else if (secondary(item)?.type === \"metric\") {\n                            <praxis-list-metric\n                              [metric]=\"secondary(item)\"\n                            ></praxis-list-metric>\n                          } @else {\n                            {{ secondary(item)?.value }}\n                          }\n                        </div>\n                      }\n                      @if (meta(item); as m) {\n                        @if (\n                          (config.templating?.metaPlacement === \"line\" &&\n                            (m?.type === \"text\" ||\n                              m?.type === \"date\" ||\n                              m?.type === \"currency\")) ||\n                          (layoutLines > 2 &&\n                            (m?.type === \"text\" ||\n                              m?.type === \"date\" ||\n                              m?.type === \"currency\"))\n                        ) {\n                          <div\n                            class=\"tertiary\"\n                            [ngClass]=\"m.class\"\n                            [style.cssText]=\"m.style\"\n                          >\n                            @if (config.templating?.metaPrefixIcon; as mpi) {\n                              <mat-icon [praxisIcon]=\"mpi\"></mat-icon>\n                            }\n                            {{ m.value }}\n                          </div>\n                        }\n                      }\n                      @if (featuresVisible()) {\n                        <div class=\"features\">\n                          @for (\n                            f of config.templating?.features || [];\n                            track $index;\n                            let fi = $index\n                          ) {\n                              <span\n                                class=\"feature\"\n                                [ngClass]=\"\n                                  featureSemanticClass(item, f.expr, f.class)\n                                \"\n                              >\n                              @if (featureRichContentNodes(item, f); as featureNodes) {\n                                <praxis-rich-content [nodes]=\"featureNodes\"></praxis-rich-content>\n                              } @else {\n                                @if (f.icon && featuresMode() !== \"labels-only\") {\n                                  <mat-icon [praxisIcon]=\"f.icon\"></mat-icon>\n                                }\n                                @if (featuresMode() !== \"icons-only\") {\n                                  <span\n                                    [ngClass]=\"f.class\"\n                                    [style.cssText]=\"f.style\"\n                                  >\n                                    @for (\n                                      line of featureLabelLines(item, f.expr);\n                                      track $index\n                                    ) {\n                                      <span class=\"feature-line\">{{ line }}</span>\n                                    }\n                                  </span>\n                                }\n                              }\n                              @if (\n                                featureProgressPercent(item, f.expr, f.class);\n                                as progress\n                              ) {\n                                <span\n                                  class=\"feature-progress\"\n                                  aria-hidden=\"true\"\n                                >\n                                  <span\n                                    class=\"feature-progress__value\"\n                                    [style.width.%]=\"progress\"\n                                  ></span>\n                                </span>\n                              }\n                            </span>\n                          }\n                        </div>\n                      }\n                    </div>\n                  </button>\n                  <div class=\"list-item-trailing\">\n                    @if (meta(item); as m) {\n                      @if (\n                        !(\n                          (config.templating?.metaPlacement === \"line\" ||\n                            layoutLines > 2) &&\n                          (m?.type === \"text\" ||\n                            m?.type === \"date\" ||\n                            m?.type === \"currency\")\n                        )\n                      ) {\n                        <div\n                          class=\"meta\"\n                          [ngClass]=\"m.class\"\n                          [style.cssText]=\"m.style\"\n                        >\n                          @if (simpleRichContentNodes(m, { slot: 'meta' }); as richNodes) {\n                            <praxis-rich-content [nodes]=\"richNodes\"></praxis-rich-content>\n                          } @else {\n                          @switch (m.type) {\n                            @case (\"chip\") {\n                              <mat-chip\n                                [color]=\"\n                                  isThemeColor(m.color) ? m.color : undefined\n                                \"\n                                [ngClass]=\"\n                                  (m.variant || 'filled') === 'outlined'\n                                    ? 'chip-outlined'\n                                    : ''\n                                \"\n                                [style.cssText]=\"chipStyle(m.color, m.variant)\"\n                                >{{ m.value }}</mat-chip\n                              >\n                            }\n                            @case (\"rating\") {\n                              @for (\n                                _ of ratingRange(m);\n                                track $index;\n                                let idx = $index\n                              ) {\n                                <mat-icon\n                                  [praxisIcon]=\"starIcon(idx, m.value)\"\n                                  [color]=\"ratingThemeColor(m)\"\n                                  [style.cssText]=\"ratingIconStyle(m)\"\n                                ></mat-icon>\n                              }\n                            }\n                            @case (\"icon\") {\n                              <mat-icon\n                                [praxisIcon]=\"m.value\"\n                                [color]=\"\n                                  isThemeColor(m.color) ? m.color : undefined\n                                \"\n                                [style.cssText]=\"iconStyle(m.color)\"\n                              ></mat-icon>\n                            }\n                            @case (\"image\") {\n                              <span class=\"inline-image\"\n                                ><img [src]=\"m.value\" [alt]=\"m.imageAlt || ''\"\n                              /></span>\n                            }\n                            @case (\"html\") {\n                              <span [innerHTML]=\"m.value\"></span>\n                            }\n                            @case (\"metric\") {\n                              <praxis-list-metric [metric]=\"m\"></praxis-list-metric>\n                            }\n                            @default {\n                              <span>\n                                @if (\n                                  config.templating?.metaPrefixIcon;\n                                  as mpi2\n                                ) {\n                                  <mat-icon [praxisIcon]=\"mpi2\"></mat-icon>\n                                }\n                                {{ m.value }}</span\n                              >\n                            }\n                          }\n                          }\n                        </div>\n                      }\n                    }\n                    @if (trailing(item); as tr) {\n                      <div\n                        class=\"trailing\"\n                        [ngClass]=\"tr.class\"\n                        [style.cssText]=\"tr.style\"\n                      >\n                        @if (\n                          simpleRichContentNodes(tr, {\n                            imageAlt: config.templating?.trailing?.imageAlt || \"\",\n                          });\n                          as richNodes\n                        ) {\n                          <praxis-rich-content [nodes]=\"richNodes\"></praxis-rich-content>\n                        } @else {\n                        @switch (tr.type) {\n                          @case (\"chip\") {\n                            <mat-chip\n                              [color]=\"\n                                isThemeColor(tr.color) ? tr.color : undefined\n                              \"\n                              [ngClass]=\"\n                                (tr.variant || 'filled') === 'outlined'\n                                  ? 'chip-outlined'\n                                  : ''\n                              \"\n                              [style.cssText]=\"chipStyle(tr.color, tr.variant)\"\n                              >{{ tr.value }}</mat-chip\n                            >\n                          }\n                          @case (\"icon\") {\n                            <mat-icon\n                              [praxisIcon]=\"tr.value\"\n                              [color]=\"\n                                isThemeColor(tr.color) ? tr.color : undefined\n                              \"\n                              [style.cssText]=\"iconStyle(tr.color)\"\n                            ></mat-icon>\n                          }\n                          @case (\"image\") {\n                            <div\n                              class=\"lead-image\"\n                              [ngClass]=\"tr.class\"\n                              [style.cssText]=\"tr.style\"\n                            >\n                              <img\n                                [src]=\"tr.value\"\n                                [alt]=\"\n                                  config.templating?.trailing?.imageAlt || ''\n                                \"\n                              />\n                              @if (tr.badge?.value) {\n                                <mat-chip\n                                  class=\"lead-badge\"\n                                  [color]=\"\n                                    isThemeColor(tr.badge?.color)\n                                      ? tr.badge?.color\n                                      : undefined\n                                  \"\n                                  [ngClass]=\"\n                                    (tr.badge?.variant || 'filled') ===\n                                    'outlined'\n                                      ? 'chip-outlined'\n                                      : ''\n                                  \"\n                                  [style.cssText]=\"\n                                    chipStyle(\n                                      tr.badge?.color,\n                                      tr.badge?.variant\n                                    )\n                                  \"\n                                  >{{ tr.badge?.value }}</mat-chip\n                                >\n                              }\n                            </div>\n                          }\n                          @case (\"rating\") {\n                            @for (\n                              _ of ratingRange(tr);\n                              track $index;\n                              let idx = $index\n                            ) {\n                              <mat-icon\n                                [praxisIcon]=\"starIcon(idx, tr.value)\"\n                                [color]=\"ratingThemeColor(tr)\"\n                                [style.cssText]=\"ratingIconStyle(tr)\"\n                              ></mat-icon>\n                            }\n                          }\n                          @case (\"html\") {\n                            @if (item.alertsData !== undefined && item.ownerName) {\n                              <!-- Component-based rendering for executive trailing -->\n                              <span class=\"exec-trailing-shell\">\n                                <praxis-executive-alerts [alerts]=\"item.alertsData\"></praxis-executive-alerts>\n                                <praxis-executive-owner [name]=\"item.ownerName\"></praxis-executive-owner>\n                              </span>\n                            } @else {\n                              <span [innerHTML]=\"tr.value\"></span>\n                            }\n                          }\n                          @case (\"metric\") {\n                            <praxis-list-metric [metric]=\"tr\"></praxis-list-metric>\n                          }\n                          @default {\n                            <span>{{ tr.value }}</span>\n                          }\n                        }\n                        }\n                      </div>\n                    }\n                    @if (showExpandIcon(\"trailing\")) {\n                      <button\n                        mat-icon-button\n                        type=\"button\"\n                        class=\"expand-toggle\"\n                        [attr.aria-label]=\"expandToggleAriaLabel(item, i)\"\n                        [attr.aria-expanded]=\"\n                          expansionOwnedByIcon() ? isExpanded(item, i) : null\n                        \"\n                        [attr.aria-controls]=\"\n                          expansionOwnedByIcon()\n                            ? expandRegionId(item, i)\n                            : null\n                        \"\n                        (click)=\"onExpandToggle($event, item, i)\"\n                      >\n                        <mat-icon\n                          [praxisIcon]=\"\n                            isExpanded(item, i) ? 'expand_less' : 'expand_more'\n                          \"\n                        ></mat-icon>\n                      </button>\n                    }\n                    @if ((visibleActions(item, \"trailing\") || []).length) {\n                      <div\n                        class=\"list-item-actions\"\n                        (click)=\"$event.stopPropagation()\"\n                        (keydown.enter)=\"onActionKeydown($event)\"\n                        (keydown.space)=\"onActionKeydown($event)\"\n                      >\n                        @for (\n                          action of visibleActions(item, \"trailing\");\n                          let aidx = $index;\n                          track action?.id ?? $index\n                        ) {\n                          @if ((action.kind || \"icon\") === \"icon\") {\n                            <button\n                              mat-icon-button\n                              [color]=\"\n                                isThemeColor(action.color)\n                                  ? action.color\n                                  : undefined\n                              \"\n                              (click)=\"\n                                onActionClick($event, action.id, item, i)\n                              \"\n                              [attr.aria-label]=\"action.label || action.id\"\n                              [disabled]=\"isActionLoading(action.id, item, i)\"\n                              [ngClass]=\"{\n                                'action-loading': isActionLoading(\n                                  action.id,\n                                  item,\n                                  i\n                                ),\n                              }\"\n                            >\n                              @if (isActionLoading(action.id, item, i)) {\n                                <mat-progress-spinner\n                                  class=\"action-spinner\"\n                                  mode=\"indeterminate\"\n                                  diameter=\"16\"\n                                  strokeWidth=\"3\"\n                                ></mat-progress-spinner>\n                              } @else {\n                                <mat-icon\n                                  [praxisIcon]=\"action.icon\"\n                                  [style.cssText]=\"iconStyle(action.color)\"\n                                ></mat-icon>\n                              }\n                            </button>\n                          } @else {\n                            @if (action.buttonVariant === \"stroked\") {\n                              <button\n                                mat-stroked-button\n                                [color]=\"\n                                  isThemeColor(action.color)\n                                    ? action.color\n                                    : undefined\n                                \"\n                                [style.cssText]=\"\n                                  buttonStyle(action.color, 'stroked')\n                                \"\n                                (click)=\"\n                                  onActionClick($event, action.id, item, i)\n                                \"\n                                [attr.aria-label]=\"action.label || action.id\"\n                                [disabled]=\"isActionLoading(action.id, item, i)\"\n                                [ngClass]=\"{\n                                  'action-loading': isActionLoading(\n                                    action.id,\n                                    item,\n                                    i\n                                  ),\n                                }\"\n                              >\n                                @if (isActionLoading(action.id, item, i)) {\n                                  <mat-progress-spinner\n                                    class=\"action-spinner\"\n                                    mode=\"indeterminate\"\n                                    diameter=\"16\"\n                                    strokeWidth=\"3\"\n                                  ></mat-progress-spinner>\n                                } @else {\n                                  {{ action.label || action.id }}\n                                }\n                              </button>\n                            }\n                            @if (action.buttonVariant === \"raised\") {\n                              <button\n                                mat-raised-button\n                                [color]=\"\n                                  isThemeColor(action.color)\n                                    ? action.color\n                                    : undefined\n                                \"\n                                [style.cssText]=\"\n                                  buttonStyle(action.color, 'raised')\n                                \"\n                                (click)=\"\n                                  onActionClick($event, action.id, item, i)\n                                \"\n                                [attr.aria-label]=\"action.label || action.id\"\n                                [disabled]=\"isActionLoading(action.id, item, i)\"\n                                [ngClass]=\"{\n                                  'action-loading': isActionLoading(\n                                    action.id,\n                                    item,\n                                    i\n                                  ),\n                                }\"\n                              >\n                                @if (isActionLoading(action.id, item, i)) {\n                                  <mat-progress-spinner\n                                    class=\"action-spinner\"\n                                    mode=\"indeterminate\"\n                                    diameter=\"16\"\n                                    strokeWidth=\"3\"\n                                  ></mat-progress-spinner>\n                                } @else {\n                                  {{ action.label || action.id }}\n                                }\n                              </button>\n                            }\n                            @if (\n                              !action.buttonVariant ||\n                              action.buttonVariant === \"flat\"\n                            ) {\n                              <button\n                                mat-flat-button\n                                [color]=\"\n                                  isThemeColor(action.color)\n                                    ? action.color\n                                    : undefined\n                                \"\n                                [style.cssText]=\"\n                                  buttonStyle(action.color, 'flat')\n                                \"\n                                (click)=\"\n                                  onActionClick($event, action.id, item, i)\n                                \"\n                                [attr.aria-label]=\"action.label || action.id\"\n                                [disabled]=\"isActionLoading(action.id, item, i)\"\n                                [ngClass]=\"{\n                                  'action-loading': isActionLoading(\n                                    action.id,\n                                    item,\n                                    i\n                                  ),\n                                }\"\n                              >\n                                @if (isActionLoading(action.id, item, i)) {\n                                  <mat-progress-spinner\n                                    class=\"action-spinner\"\n                                    mode=\"indeterminate\"\n                                    diameter=\"16\"\n                                    strokeWidth=\"3\"\n                                  ></mat-progress-spinner>\n                                } @else {\n                                  {{ action.label || action.id }}\n                                }\n                              </button>\n                            }\n                          }\n                        }\n                      </div>\n                    }\n                  </div>\n                </div>\n                }\n                @if (isExpandable() && isExpanded(item, i)) {\n                  <div\n                    class=\"item-expansion\"\n                    [id]=\"expandRegionId(item, i)\"\n                    role=\"region\"\n                    [attr.aria-label]=\"expansionRegionAriaLabel(item)\"\n                  >\n                    <div class=\"item-expansion-grid\">\n                      @for (\n                        expansionSection of expansionSections(item);\n                        track expansionSection.id\n                      ) {\n                        <section\n                          class=\"expansion-section\"\n                          [attr.data-section-type]=\"expansionSection.type\"\n                        >\n                          @if (expansionSection.title) {\n                            <div class=\"expansion-section-title\">\n                              {{ expansionSection.title }}\n                            </div>\n                          }\n                          @if (\n                            expansionSectionHasContent(\n                              item,\n                              expansionSection,\n                              i\n                            )\n                          ) {\n                            @switch (expansionSection.type) {\n                              @case (\"chip-list\") {\n                                <div class=\"expansion-chip-list\">\n                                  @for (\n                                    expansionEntry of expansionSectionItems(\n                                      item,\n                                      expansionSection,\n                                      i\n                                    );\n                                    track $index\n                                  ) {\n                                    <mat-chip class=\"expansion-chip\">{{\n                                      expansionItemLabel(expansionEntry)\n                                    }}</mat-chip>\n                                  }\n                                </div>\n                              }\n                              @case (\"timeline\") {\n                                <div class=\"expansion-timeline\">\n                                  @for (\n                                    expansionEntry of expansionSectionItems(\n                                      item,\n                                      expansionSection,\n                                      i\n                                    );\n                                    track $index\n                                  ) {\n                                    <div class=\"expansion-timeline-item\">\n                                      <div class=\"expansion-timeline-title\">\n                                        {{\n                                          expansionTimelineTitle(expansionEntry)\n                                        }}\n                                      </div>\n                                      @if (\n                                        expansionTimelineMeta(expansionEntry)\n                                      ) {\n                                        <div class=\"expansion-timeline-meta\">\n                                          {{\n                                            expansionTimelineMeta(\n                                              expansionEntry\n                                            )\n                                          }}\n                                        </div>\n                                      }\n                                      @if (\n                                        expansionTimelineDescription(\n                                          expansionEntry\n                                        )\n                                      ) {\n                                        <div\n                                          class=\"expansion-timeline-description\"\n                                        >\n                                          {{\n                                            expansionTimelineDescription(\n                                              expansionEntry\n                                            )\n                                          }}\n                                        </div>\n                                      }\n                                    </div>\n                                  }\n                                </div>\n                              }\n                              @case (\"key-value\") {\n                                <dl class=\"expansion-key-value\">\n                                  @for (\n                                    expansionEntry of expansionSectionItems(\n                                      item,\n                                      expansionSection,\n                                      i\n                                    );\n                                    track $index\n                                  ) {\n                                    <div class=\"expansion-key-value-row\">\n                                      @if (\n                                        expansionKeyValueKey(expansionEntry)\n                                      ) {\n                                        <dt>\n                                          {{\n                                            expansionKeyValueKey(expansionEntry)\n                                          }}\n                                        </dt>\n                                      }\n                                      <dd>\n                                        {{\n                                          expansionKeyValueValue(expansionEntry)\n                                        }}\n                                      </dd>\n                                    </div>\n                                  }\n                                </dl>\n                              }\n                              @default {\n                                <div class=\"expansion-info-list\">\n                                  @for (\n                                    expansionEntry of expansionSectionItems(\n                                      item,\n                                      expansionSection,\n                                      i\n                                    );\n                                    track $index\n                                  ) {\n                                    <div class=\"expansion-info-item\">\n                                      <div class=\"expansion-info-title\">\n                                        {{ expansionInfoTitle(expansionEntry) }}\n                                      </div>\n                                      @if (expansionInfoValue(expansionEntry)) {\n                                        <div class=\"expansion-info-value\">\n                                          {{\n                                            expansionInfoValue(expansionEntry)\n                                          }}\n                                        </div>\n                                      }\n                                    </div>\n                                  }\n                                </div>\n                              }\n                            }\n                          } @else {\n                            <div class=\"expansion-empty\">\n                              {{\n                                expansionSection.emptyLabel ||\n                                  \"Sem dados dispon\u00EDveis\"\n                              }}\n                            </div>\n                          }\n                        </section>\n                      }\n                    </div>\n                  </div>\n                }\n              </mat-list-item>\n              @if (\n                (config.layout?.dividers === \"all\" ||\n                  config.layout?.dividers === \"between\") &&\n                i < section.items.length - 1\n              ) {\n                <mat-divider></mat-divider>\n              }\n            }\n          }\n        </mat-list>\n      </ng-template>\n    } @else if (isTilesVariant()) {\n      <ng-container *ngTemplateOutlet=\"tilesVariant\"></ng-container>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"cardsVariant\"></ng-container>\n    }\n\n    <!-- Cards variant -->\n    <ng-template #cardsVariant>\n      <div class=\"cards-grid\">\n        @for (it of (items$ | async) ?? []; track $index; let i = $index) {\n          <div\n            class=\"item-card\"\n            [ngClass]=\"itemRuleClass(it)\"\n            [attr.style]=\"itemRuleStyle(it)\"\n            role=\"button\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"itemAriaLabel(it)\"\n            (click)=\"onItemClick(it, i)\"\n            (keydown.enter)=\"onItemClick(it, i)\"\n            (keydown.space)=\"$event.preventDefault(); onItemClick(it, i)\"\n          >\n            <div class=\"list-item-content\">\n              <div class=\"list-item-leading\">\n                @if (leading(it); as lead) {\n                  @if (\n                    simpleRichContentNodes(lead, {\n                      imageAlt: config.templating?.leading?.imageAlt || \"\",\n                    });\n                    as richNodes\n                  ) {\n                    <praxis-rich-content [nodes]=\"richNodes\"></praxis-rich-content>\n                  } @else {\n                    @switch (lead.type) {\n                      @case (\"icon\") {\n                        <mat-icon\n                          [praxisIcon]=\"lead.value\"\n                          [ngClass]=\"lead.class\"\n                          [color]=\"\n                            isThemeColor(lead.color) ? lead.color : undefined\n                          \"\n                          [style.cssText]=\"\n                            (lead.style ? lead.style + ';' : '') +\n                            iconStyle(lead.color)\n                          \"\n                        ></mat-icon>\n                      }\n                      @case (\"image\") {\n                        <div\n                          class=\"lead-image\"\n                          [ngClass]=\"lead.class\"\n                          [style.cssText]=\"lead.style\"\n                        >\n                          <img\n                            [src]=\"lead.value\"\n                            [alt]=\"config.templating?.leading?.imageAlt || ''\"\n                          />\n                          @if (lead.badge?.value) {\n                            <mat-chip\n                              class=\"lead-badge\"\n                              [color]=\"\n                                isThemeColor(lead.badge?.color)\n                                  ? lead.badge?.color\n                                  : undefined\n                              \"\n                              [ngClass]=\"\n                                (lead.badge?.variant || 'filled') === 'outlined'\n                                  ? 'chip-outlined'\n                                  : ''\n                              \"\n                              [style.cssText]=\"\n                                chipStyle(\n                                  lead.badge?.color,\n                                  lead.badge?.variant\n                                )\n                              \"\n                              >{{ lead.badge?.value }}</mat-chip\n                            >\n                          }\n                        </div>\n                      }\n                      @case (\"text\") {\n                        <span\n                          [ngClass]=\"lead.class\"\n                          [style.cssText]=\"lead.style\"\n                          >{{ lead.value }}</span\n                        >\n                      }\n                      @case (\"chip\") {\n                        <mat-chip\n                          [color]=\"\n                            isThemeColor(lead.color) ? lead.color : undefined\n                          \"\n                          [ngClass]=\"\n                            (lead.variant || 'filled') === 'outlined'\n                              ? 'chip-outlined'\n                              : ''\n                          \"\n                          [style.cssText]=\"chipStyle(lead.color, lead.variant)\"\n                          >{{ lead.value }}</mat-chip\n                        >\n                      }\n                      @case (\"rating\") {\n                        @for (\n                          _ of ratingRange(lead);\n                          track $index;\n                          let idx = $index\n                        ) {\n                          <mat-icon\n                            [praxisIcon]=\"starIcon(idx, lead.value)\"\n                            [color]=\"ratingThemeColor(lead)\"\n                            [style.cssText]=\"ratingIconStyle(lead)\"\n                          ></mat-icon>\n                        }\n                      }\n                      @case (\"html\") {\n                        <span\n                          [ngClass]=\"lead.class\"\n                          [style.cssText]=\"lead.style\"\n                          [innerHTML]=\"lead.value\"\n                        ></span>\n                      }\n                      @case (\"metric\") {\n                        <praxis-list-metric\n                          [metric]=\"lead\"\n                        ></praxis-list-metric>\n                      }\n                      @case (\"compose\") {\n                        <praxis-list-compose\n                          [compose]=\"lead\"\n                        ></praxis-list-compose>\n                      }\n                      @case (\"component\") {\n                        <praxis-list-runtime-component\n                          [component]=\"lead\"\n                        ></praxis-list-runtime-component>\n                      }\n                      @default {\n                        <span\n                          [ngClass]=\"lead.class\"\n                          [style.cssText]=\"lead.style\"\n                          >{{ lead.value }}</span\n                        >\n                      }\n                    }\n                  }\n                } @else {\n                  <span class=\"leading-placeholder\"></span>\n                }\n              </div>\n              <div class=\"list-item-text\">\n                <div\n                  class=\"primary\"\n                  [ngClass]=\"primary(it)?.class\"\n                  [style.cssText]=\"primary(it)?.style\"\n                >\n                  @if (simpleRichContentNodes(primary(it)); as richNodes) {\n                    <praxis-rich-content [nodes]=\"richNodes\"></praxis-rich-content>\n                  } @else if (primary(it)?.type === \"metric\") {\n                    <praxis-list-metric [metric]=\"primary(it)\"></praxis-list-metric>\n                  } @else if (primary(it)?.type === \"compose\") {\n                    <praxis-list-compose\n                      [compose]=\"primary(it)\"\n                    ></praxis-list-compose>\n                  } @else if (primary(it)?.type === \"component\") {\n                    <praxis-list-runtime-component\n                      [component]=\"primary(it)\"\n                    ></praxis-list-runtime-component>\n                  } @else {\n                    {{ primary(it)?.value }}\n                  }\n                </div>\n                @if (layoutLines > 1) {\n                  <div\n                    class=\"secondary\"\n                    [ngClass]=\"secondary(it)?.class\"\n                    [style.cssText]=\"secondary(it)?.style\"\n                  >\n                    @if (simpleRichContentNodes(secondary(it)); as richNodes) {\n                      <praxis-rich-content [nodes]=\"richNodes\"></praxis-rich-content>\n                    } @else if (secondary(it)?.type === \"metric\") {\n                      <praxis-list-metric\n                        [metric]=\"secondary(it)\"\n                      ></praxis-list-metric>\n                    } @else if (secondary(it)?.type === \"compose\") {\n                      <praxis-list-compose\n                        [compose]=\"secondary(it)\"\n                      ></praxis-list-compose>\n                    } @else if (secondary(it)?.type === \"component\") {\n                      <praxis-list-runtime-component\n                        [component]=\"secondary(it)\"\n                      ></praxis-list-runtime-component>\n                    } @else {\n                      {{ secondary(it)?.value }}\n                    }\n                  </div>\n                }\n                @if (meta(it); as m) {\n                  @if (\n                    (config.templating?.metaPlacement === \"line\" &&\n                      (m?.type === \"text\" ||\n                        m?.type === \"date\" ||\n                        m?.type === \"currency\")) ||\n                    (layoutLines > 2 &&\n                      (m?.type === \"text\" ||\n                        m?.type === \"date\" ||\n                        m?.type === \"currency\"))\n                  ) {\n                    <div\n                      class=\"tertiary\"\n                      [ngClass]=\"m.class\"\n                      [style.cssText]=\"m.style\"\n                    >\n                      @if (config.templating?.metaPrefixIcon; as mpi) {\n                        <mat-icon [praxisIcon]=\"mpi\"></mat-icon>\n                      }\n                      {{ m.value }}\n                    </div>\n                  }\n                }\n                @if (featuresVisible()) {\n                  <div class=\"features\">\n                    @for (\n                      f of config.templating?.features || [];\n                      track $index;\n                      let fi = $index\n                    ) {\n                      <span\n                        class=\"feature\"\n                        [ngClass]=\"featureSemanticClass(it, f.expr, f.class)\"\n                      >\n                        @if (featureRichContentNodes(it, f); as featureNodes) {\n                          <praxis-rich-content [nodes]=\"featureNodes\"></praxis-rich-content>\n                        } @else {\n                          @if (f.icon && featuresMode() !== \"labels-only\") {\n                            <mat-icon [praxisIcon]=\"f.icon\"></mat-icon>\n                          }\n                          @if (featuresMode() !== \"icons-only\") {\n                            <span [ngClass]=\"f.class\" [style.cssText]=\"f.style\">\n                              @for (\n                                line of featureLabelLines(it, f.expr);\n                                track $index\n                              ) {\n                                <span class=\"feature-line\">{{ line }}</span>\n                              }\n                            </span>\n                          }\n                        }\n                        @if (\n                          featureProgressPercent(it, f.expr, f.class);\n                          as progress\n                        ) {\n                          <span class=\"feature-progress\" aria-hidden=\"true\">\n                            <span\n                              class=\"feature-progress__value\"\n                              [style.width.%]=\"progress\"\n                            ></span>\n                          </span>\n                        }\n                      </span>\n                    }\n                  </div>\n                }\n              </div>\n              <div class=\"list-item-trailing\">\n                @if (meta(it); as m) {\n                  @if (\n                    !(\n                      (config.templating?.metaPlacement === \"line\" ||\n                        layoutLines > 2) &&\n                      (m?.type === \"text\" ||\n                        m?.type === \"date\" ||\n                        m?.type === \"currency\")\n                    )\n                  ) {\n                    <div\n                      class=\"meta\"\n                      [ngClass]=\"m.class\"\n                      [style.cssText]=\"m.style\"\n                    >\n                      @if (\n                        simpleRichContentNodes(m, {\n                          slot: \"meta\",\n                          imageAlt: m.imageAlt || \"\",\n                        });\n                        as richNodes\n                      ) {\n                        <praxis-rich-content [nodes]=\"richNodes\"></praxis-rich-content>\n                      } @else {\n                        @switch (m.type) {\n                          @case (\"chip\") {\n                            <mat-chip\n                              [color]=\"\n                                isThemeColor(m.color) ? m.color : undefined\n                              \"\n                              [ngClass]=\"\n                                (m.variant || 'filled') === 'outlined'\n                                  ? 'chip-outlined'\n                                  : ''\n                              \"\n                              [style.cssText]=\"chipStyle(m.color, m.variant)\"\n                              >{{ m.value }}</mat-chip\n                            >\n                          }\n                          @case (\"rating\") {\n                            @for (\n                              _ of ratingRange(m);\n                              track $index;\n                              let idx = $index\n                            ) {\n                              <mat-icon\n                                [praxisIcon]=\"starIcon(idx, m.value)\"\n                                [color]=\"ratingThemeColor(m)\"\n                                [style.cssText]=\"ratingIconStyle(m)\"\n                              ></mat-icon>\n                            }\n                          }\n                          @case (\"icon\") {\n                            <mat-icon\n                              [praxisIcon]=\"m.value\"\n                              [color]=\"\n                                isThemeColor(m.color) ? m.color : undefined\n                              \"\n                              [style.cssText]=\"iconStyle(m.color)\"\n                            ></mat-icon>\n                          }\n                          @case (\"image\") {\n                            <span class=\"inline-image\"\n                              ><img [src]=\"m.value\" [alt]=\"m.imageAlt || ''\"\n                            /></span>\n                          }\n                          @case (\"html\") {\n                            <span [innerHTML]=\"m.value\"></span>\n                          }\n                          @case (\"metric\") {\n                            <praxis-list-metric\n                              [metric]=\"m\"\n                            ></praxis-list-metric>\n                          }\n                          @case (\"compose\") {\n                            <praxis-list-compose\n                              [compose]=\"m\"\n                            ></praxis-list-compose>\n                          }\n                          @case (\"component\") {\n                            <praxis-list-runtime-component\n                              [component]=\"m\"\n                            ></praxis-list-runtime-component>\n                          }\n                          @default {\n                            <span>\n                              @if (config.templating?.metaPrefixIcon; as mpi2) {\n                                <mat-icon [praxisIcon]=\"mpi2\"></mat-icon>\n                              }\n                              {{ m.value }}</span\n                            >\n                          }\n                        }\n                      }\n                    </div>\n                  }\n                }\n                @if (trailing(it); as tr) {\n                  @if (\n                    (config.templating?.statusPosition || \"inline\") ===\n                      \"top-right\" &&\n                    (tr?.type === \"chip\" || tr?.type === \"icon\")\n                  ) {\n                    <div class=\"status-overlay\">\n                      @if (simpleRichContentNodes(tr); as richNodes) {\n                        <praxis-rich-content [nodes]=\"richNodes\"></praxis-rich-content>\n                      } @else {\n                        @if (tr?.type === \"chip\") {\n                          <mat-chip\n                            [color]=\"\n                              isThemeColor(tr.color) ? tr.color : undefined\n                            \"\n                            [ngClass]=\"\n                              (tr.variant || 'filled') === 'outlined'\n                                ? 'chip-outlined'\n                                : ''\n                            \"\n                            [style.cssText]=\"chipStyle(tr.color, tr.variant)\"\n                            >{{ tr.value }}</mat-chip\n                          >\n                        }\n                        @if (tr?.type === \"icon\") {\n                          <mat-icon\n                            [praxisIcon]=\"tr.value\"\n                            [color]=\"\n                              isThemeColor(tr.color) ? tr.color : undefined\n                            \"\n                            [style.cssText]=\"iconStyle(tr.color)\"\n                          ></mat-icon>\n                        }\n                      }\n                    </div>\n                  } @else {\n                    <div\n                      class=\"trailing\"\n                      [ngClass]=\"tr.class\"\n                      [style.cssText]=\"tr.style\"\n                    >\n                      @if (\n                        simpleRichContentNodes(tr, {\n                          imageAlt: config.templating?.trailing?.imageAlt || \"\",\n                        });\n                        as richNodes\n                      ) {\n                        <praxis-rich-content [nodes]=\"richNodes\"></praxis-rich-content>\n                      } @else {\n                        @switch (tr.type) {\n                          @case (\"chip\") {\n                            <mat-chip\n                              [color]=\"\n                                isThemeColor(tr.color) ? tr.color : undefined\n                              \"\n                              [ngClass]=\"\n                                (tr.variant || 'filled') === 'outlined'\n                                  ? 'chip-outlined'\n                                  : ''\n                              \"\n                              [style.cssText]=\"chipStyle(tr.color, tr.variant)\"\n                              >{{ tr.value }}</mat-chip\n                            >\n                          }\n                          @case (\"icon\") {\n                            <mat-icon\n                              [praxisIcon]=\"tr.value\"\n                              [color]=\"\n                                isThemeColor(tr.color) ? tr.color : undefined\n                              \"\n                              [style.cssText]=\"iconStyle(tr.color)\"\n                            ></mat-icon>\n                          }\n                          @case (\"image\") {\n                            <div\n                              class=\"lead-image\"\n                              [ngClass]=\"tr.class\"\n                              [style.cssText]=\"tr.style\"\n                            >\n                              <img\n                                [src]=\"tr.value\"\n                                [alt]=\"\n                                  config.templating?.trailing?.imageAlt || ''\n                                \"\n                              />\n                              @if (tr.badge?.value) {\n                                <mat-chip\n                                  class=\"lead-badge\"\n                                  [color]=\"\n                                    isThemeColor(tr.badge?.color)\n                                      ? tr.badge?.color\n                                      : undefined\n                                  \"\n                                  [ngClass]=\"\n                                    (tr.badge?.variant || 'filled') ===\n                                    'outlined'\n                                      ? 'chip-outlined'\n                                      : ''\n                                  \"\n                                  [style.cssText]=\"\n                                    chipStyle(\n                                      tr.badge?.color,\n                                      tr.badge?.variant\n                                    )\n                                  \"\n                                  >{{ tr.badge?.value }}</mat-chip\n                                >\n                              }\n                            </div>\n                          }\n                          @case (\"rating\") {\n                            @for (\n                              _ of ratingRange(tr);\n                              track $index;\n                              let idx = $index\n                            ) {\n                              <mat-icon\n                                [praxisIcon]=\"starIcon(idx, tr.value)\"\n                                [color]=\"ratingThemeColor(tr)\"\n                                [style.cssText]=\"ratingIconStyle(tr)\"\n                              ></mat-icon>\n                            }\n                          }\n                          @case (\"html\") {\n                            <span [innerHTML]=\"tr.value\"></span>\n                          }\n                          @case (\"metric\") {\n                            <praxis-list-metric\n                              [metric]=\"tr\"\n                            ></praxis-list-metric>\n                          }\n                          @case (\"compose\") {\n                            <praxis-list-compose\n                              [compose]=\"tr\"\n                            ></praxis-list-compose>\n                          }\n                          @case (\"component\") {\n                            <praxis-list-runtime-component\n                              [component]=\"tr\"\n                            ></praxis-list-runtime-component>\n                          }\n                          @default {\n                            <span>{{ tr.value }}</span>\n                          }\n                        }\n                      }\n                    </div>\n                  }\n                }\n              </div>\n            </div>\n            <div\n              class=\"card-actions\"\n              (click)=\"$event.stopPropagation()\"\n              (keydown.enter)=\"onActionKeydown($event)\"\n              (keydown.space)=\"onActionKeydown($event)\"\n            >\n              @for (\n                action of visibleActions(it, \"trailing\");\n                let aidx = $index;\n                track action?.id ?? $index\n              ) {\n                @if ((action.kind || \"icon\") === \"icon\") {\n                  <button\n                    mat-icon-button\n                    [color]=\"\n                      isThemeColor(action.color) ? action.color : undefined\n                    \"\n                    (click)=\"onActionClick($event, action.id, it, i)\"\n                    [attr.aria-label]=\"action.label || action.id\"\n                    [disabled]=\"isActionLoading(action.id, it, i)\"\n                    [ngClass]=\"{\n                      'action-loading': isActionLoading(action.id, it, i),\n                    }\"\n                  >\n                    @if (isActionLoading(action.id, it, i)) {\n                      <mat-progress-spinner\n                        class=\"action-spinner\"\n                        mode=\"indeterminate\"\n                        diameter=\"16\"\n                        strokeWidth=\"3\"\n                      ></mat-progress-spinner>\n                    } @else {\n                      <mat-icon\n                        [praxisIcon]=\"action.icon\"\n                        [style.cssText]=\"iconStyle(action.color)\"\n                      ></mat-icon>\n                    }\n                  </button>\n                } @else {\n                  @if (action.buttonVariant === \"stroked\") {\n                    <button\n                      mat-stroked-button\n                      [color]=\"\n                        isThemeColor(action.color) ? action.color : undefined\n                      \"\n                      [style.cssText]=\"buttonStyle(action.color, 'stroked')\"\n                      (click)=\"onActionClick($event, action.id, it, i)\"\n                      [attr.aria-label]=\"action.label || action.id\"\n                      [disabled]=\"isActionLoading(action.id, it, i)\"\n                      [ngClass]=\"{\n                        'action-loading': isActionLoading(action.id, it, i),\n                      }\"\n                    >\n                      @if (isActionLoading(action.id, it, i)) {\n                        <mat-progress-spinner\n                          class=\"action-spinner\"\n                          mode=\"indeterminate\"\n                          diameter=\"16\"\n                          strokeWidth=\"3\"\n                        ></mat-progress-spinner>\n                      } @else {\n                        {{ action.label || action.id }}\n                      }\n                    </button>\n                  }\n                  @if (action.buttonVariant === \"raised\") {\n                    <button\n                      mat-raised-button\n                      [color]=\"\n                        isThemeColor(action.color) ? action.color : undefined\n                      \"\n                      [style.cssText]=\"buttonStyle(action.color, 'raised')\"\n                      (click)=\"onActionClick($event, action.id, it, i)\"\n                      [attr.aria-label]=\"action.label || action.id\"\n                      [disabled]=\"isActionLoading(action.id, it, i)\"\n                      [ngClass]=\"{\n                        'action-loading': isActionLoading(action.id, it, i),\n                      }\"\n                    >\n                      @if (isActionLoading(action.id, it, i)) {\n                        <mat-progress-spinner\n                          class=\"action-spinner\"\n                          mode=\"indeterminate\"\n                          diameter=\"16\"\n                          strokeWidth=\"3\"\n                        ></mat-progress-spinner>\n                      } @else {\n                        {{ action.label || action.id }}\n                      }\n                    </button>\n                  }\n                  @if (\n                    !action.buttonVariant || action.buttonVariant === \"flat\"\n                  ) {\n                    <button\n                      mat-flat-button\n                      [color]=\"\n                        isThemeColor(action.color) ? action.color : undefined\n                      \"\n                      [style.cssText]=\"buttonStyle(action.color, 'flat')\"\n                      (click)=\"onActionClick($event, action.id, it, i)\"\n                      [attr.aria-label]=\"action.label || action.id\"\n                      [disabled]=\"isActionLoading(action.id, it, i)\"\n                      [ngClass]=\"{\n                        'action-loading': isActionLoading(action.id, it, i),\n                      }\"\n                    >\n                      @if (isActionLoading(action.id, it, i)) {\n                        <mat-progress-spinner\n                          class=\"action-spinner\"\n                          mode=\"indeterminate\"\n                          diameter=\"16\"\n                          strokeWidth=\"3\"\n                        ></mat-progress-spinner>\n                      } @else {\n                        {{ action.label || action.id }}\n                      }\n                    </button>\n                  }\n                }\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </ng-template>\n\n    <!-- Tiles variant -->\n    <ng-template #tilesVariant>\n      <div class=\"tiles-grid\">\n        @for (it of (items$ | async) ?? []; track $index; let i = $index) {\n          <div\n            class=\"item-tile\"\n            [ngClass]=\"itemRuleClass(it)\"\n            [attr.style]=\"itemRuleStyle(it)\"\n            role=\"button\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"itemAriaLabel(it)\"\n            (click)=\"onItemClick(it, i)\"\n            (keydown.enter)=\"onItemClick(it, i)\"\n            (keydown.space)=\"$event.preventDefault(); onItemClick(it, i)\"\n          >\n            <div class=\"tile-media\">\n              @if (leading(it); as lead) {\n                @if (\n                  simpleRichContentNodes(lead, {\n                    imageAlt: config.templating?.leading?.imageAlt || \"\",\n                  });\n                  as richNodes\n                ) {\n                  <praxis-rich-content [nodes]=\"richNodes\"></praxis-rich-content>\n                } @else {\n                  @switch (lead.type) {\n                    @case (\"image\") {\n                      <img\n                        [src]=\"lead.value\"\n                        [alt]=\"config.templating?.leading?.imageAlt || ''\"\n                      />\n                    }\n                    @case (\"icon\") {\n                      <mat-icon\n                        [praxisIcon]=\"lead.value\"\n                        [ngClass]=\"lead.class\"\n                        [color]=\"\n                          isThemeColor(lead.color) ? lead.color : undefined\n                        \"\n                        [style.cssText]=\"\n                          (lead.style ? lead.style + ';' : '') +\n                          iconStyle(lead.color)\n                        \"\n                      ></mat-icon>\n                    }\n                    @case (\"text\") {\n                      <span [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">{{\n                        lead.value\n                      }}</span>\n                    }\n                    @case (\"chip\") {\n                      <mat-chip\n                        [color]=\"\n                          isThemeColor(lead.color) ? lead.color : undefined\n                        \"\n                        [ngClass]=\"\n                          (lead.variant || 'filled') === 'outlined'\n                            ? 'chip-outlined'\n                            : ''\n                        \"\n                        [style.cssText]=\"chipStyle(lead.color, lead.variant)\"\n                        >{{ lead.value }}</mat-chip\n                      >\n                    }\n                    @case (\"rating\") {\n                      <span [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">\n                        @for (\n                          _ of ratingRange(lead);\n                          track $index;\n                          let idx = $index\n                        ) {\n                          <mat-icon\n                            [praxisIcon]=\"starIcon(idx, lead.value)\"\n                            [color]=\"ratingThemeColor(lead)\"\n                            [style.cssText]=\"ratingIconStyle(lead)\"\n                          ></mat-icon>\n                        }\n                      </span>\n                    }\n                    @case (\"html\") {\n                      <span\n                        [ngClass]=\"lead.class\"\n                        [style.cssText]=\"lead.style\"\n                        [innerHTML]=\"lead.value\"\n                      ></span>\n                    }\n                    @case (\"metric\") {\n                      <praxis-list-metric [metric]=\"lead\"></praxis-list-metric>\n                    }\n                    @case (\"compose\") {\n                      <praxis-list-compose\n                        [compose]=\"lead\"\n                      ></praxis-list-compose>\n                    }\n                    @case (\"component\") {\n                      <praxis-list-runtime-component\n                        [component]=\"lead\"\n                      ></praxis-list-runtime-component>\n                    }\n                    @default {\n                      <span [ngClass]=\"lead.class\" [style.cssText]=\"lead.style\">{{\n                        lead.value\n                      }}</span>\n                    }\n                  }\n                }\n              }\n            </div>\n\n            @if (trailing(it); as tr) {\n              @if (\n                (config.templating?.statusPosition || \"inline\") ===\n                  \"top-right\" &&\n                (tr?.type === \"chip\" || tr?.type === \"icon\")\n              ) {\n                <div class=\"tile-status\">\n                  @if (simpleRichContentNodes(tr); as richNodes) {\n                    <praxis-rich-content [nodes]=\"richNodes\"></praxis-rich-content>\n                  } @else {\n                    @if (tr?.type === \"chip\") {\n                      <mat-chip\n                        [color]=\"isThemeColor(tr.color) ? tr.color : undefined\"\n                        [ngClass]=\"\n                          (tr.variant || 'filled') === 'outlined'\n                            ? 'chip-outlined'\n                            : ''\n                        \"\n                        [style.cssText]=\"chipStyle(tr.color, tr.variant)\"\n                        >{{ tr.value }}</mat-chip\n                      >\n                    }\n                    @if (tr?.type === \"icon\") {\n                      <mat-icon\n                        [praxisIcon]=\"tr.value\"\n                        [color]=\"isThemeColor(tr.color) ? tr.color : undefined\"\n                        [style.cssText]=\"iconStyle(tr.color)\"\n                      ></mat-icon>\n                    }\n                  }\n                </div>\n              }\n            }\n\n            <div class=\"tile-body\">\n              <div\n                class=\"primary\"\n                [ngClass]=\"primary(it)?.class\"\n                [style.cssText]=\"primary(it)?.style\"\n              >\n                @if (simpleRichContentNodes(primary(it)); as richNodes) {\n                  <praxis-rich-content [nodes]=\"richNodes\"></praxis-rich-content>\n                } @else if (primary(it)?.type === \"metric\") {\n                  <praxis-list-metric [metric]=\"primary(it)\"></praxis-list-metric>\n                } @else if (primary(it)?.type === \"compose\") {\n                  <praxis-list-compose\n                    [compose]=\"primary(it)\"\n                  ></praxis-list-compose>\n                } @else if (primary(it)?.type === \"component\") {\n                  <praxis-list-runtime-component\n                    [component]=\"primary(it)\"\n                  ></praxis-list-runtime-component>\n                } @else {\n                  {{ primary(it)?.value }}\n                }\n              </div>\n              @if (layoutLines > 1) {\n                <div\n                  class=\"secondary\"\n                  [ngClass]=\"secondary(it)?.class\"\n                  [style.cssText]=\"secondary(it)?.style\"\n                >\n                  @if (simpleRichContentNodes(secondary(it)); as richNodes) {\n                    <praxis-rich-content [nodes]=\"richNodes\"></praxis-rich-content>\n                  } @else if (secondary(it)?.type === \"metric\") {\n                    <praxis-list-metric\n                      [metric]=\"secondary(it)\"\n                    ></praxis-list-metric>\n                  } @else if (secondary(it)?.type === \"compose\") {\n                    <praxis-list-compose\n                      [compose]=\"secondary(it)\"\n                    ></praxis-list-compose>\n                  } @else if (secondary(it)?.type === \"component\") {\n                    <praxis-list-runtime-component\n                      [component]=\"secondary(it)\"\n                    ></praxis-list-runtime-component>\n                  } @else {\n                    {{ secondary(it)?.value }}\n                  }\n                </div>\n              }\n\n              @if (meta(it); as m) {\n                <div\n                  class=\"tile-meta\"\n                  [ngClass]=\"m.class\"\n                  [style.cssText]=\"m.style\"\n                >\n                  @if (config.templating?.metaPrefixIcon; as mpi) {\n                    <mat-icon [praxisIcon]=\"mpi\"></mat-icon>\n                  }\n                  @if (\n                    simpleRichContentNodes(m, {\n                      slot: \"meta\",\n                      imageAlt: m.imageAlt || \"\",\n                    });\n                    as richNodes\n                  ) {\n                    <praxis-rich-content [nodes]=\"richNodes\"></praxis-rich-content>\n                  } @else {\n                    @switch (m.type) {\n                      @case (\"chip\") {\n                        <mat-chip\n                          [color]=\"isThemeColor(m.color) ? m.color : undefined\"\n                          [ngClass]=\"\n                            (m.variant || 'filled') === 'outlined'\n                              ? 'chip-outlined'\n                              : ''\n                          \"\n                          [style.cssText]=\"chipStyle(m.color, m.variant)\"\n                          >{{ m.value }}</mat-chip\n                        >\n                      }\n                      @case (\"rating\") {\n                        @for (\n                          _ of ratingRange(m);\n                          track $index;\n                          let idx = $index\n                        ) {\n                          <mat-icon\n                            [praxisIcon]=\"starIcon(idx, m.value)\"\n                            [color]=\"ratingThemeColor(m)\"\n                            [style.cssText]=\"ratingIconStyle(m)\"\n                          ></mat-icon>\n                        }\n                      }\n                      @case (\"icon\") {\n                        <mat-icon\n                          [praxisIcon]=\"m.value\"\n                          [color]=\"isThemeColor(m.color) ? m.color : undefined\"\n                          [style.cssText]=\"iconStyle(m.color)\"\n                        ></mat-icon>\n                      }\n                      @case (\"image\") {\n                        <span class=\"inline-image\"\n                          ><img [src]=\"m.value\" [alt]=\"m.imageAlt || ''\"\n                        /></span>\n                      }\n                      @case (\"html\") {\n                        <span [innerHTML]=\"m.value\"></span>\n                      }\n                      @case (\"metric\") {\n                        <praxis-list-metric [metric]=\"m\"></praxis-list-metric>\n                      }\n                      @case (\"compose\") {\n                        <praxis-list-compose\n                          [compose]=\"m\"\n                        ></praxis-list-compose>\n                      }\n                      @case (\"component\") {\n                        <praxis-list-runtime-component\n                          [component]=\"m\"\n                        ></praxis-list-runtime-component>\n                      }\n                      @default {\n                        <span>{{ m.value }}</span>\n                      }\n                    }\n                  }\n                </div>\n              }\n\n              @if (featuresVisible()) {\n                <div class=\"tiles-features\">\n                  @for (\n                    f of config.templating?.features || [];\n                    track $index;\n                    let fi = $index\n                  ) {\n                    <span\n                      class=\"feature\"\n                      [ngClass]=\"featureSemanticClass(it, f.expr, f.class)\"\n                    >\n                      @if (featureRichContentNodes(it, f); as featureNodes) {\n                        <praxis-rich-content [nodes]=\"featureNodes\"></praxis-rich-content>\n                      } @else {\n                        @if (f.icon && featuresMode() !== \"labels-only\") {\n                          <mat-icon [praxisIcon]=\"f.icon\"></mat-icon>\n                        }\n                        @if (featuresMode() !== \"icons-only\") {\n                          <span [ngClass]=\"f.class\" [style.cssText]=\"f.style\">\n                            @for (\n                              line of featureLabelLines(it, f.expr);\n                              track $index\n                            ) {\n                              <span class=\"feature-line\">{{ line }}</span>\n                            }\n                          </span>\n                        }\n                      }\n                      @if (\n                        featureProgressPercent(it, f.expr, f.class);\n                        as progress\n                      ) {\n                        <span class=\"feature-progress\" aria-hidden=\"true\">\n                          <span\n                            class=\"feature-progress__value\"\n                            [style.width.%]=\"progress\"\n                          ></span>\n                        </span>\n                      }\n                    </span>\n                  }\n                </div>\n              }\n\n              @if (trailing(it); as tr2) {\n                @if (\n                  !(\n                    (config.templating?.statusPosition || \"inline\") ===\n                      \"top-right\" &&\n                    (tr2?.type === \"chip\" || tr2?.type === \"icon\")\n                  )\n                ) {\n                  <div\n                    class=\"tile-trailing\"\n                    [ngClass]=\"tr2.class\"\n                    [style.cssText]=\"tr2.style\"\n                  >\n                    @if (\n                      simpleRichContentNodes(tr2, {\n                        imageAlt: tr2.imageAlt || \"\",\n                      });\n                      as richNodes\n                    ) {\n                      <praxis-rich-content [nodes]=\"richNodes\"></praxis-rich-content>\n                    } @else {\n                      @switch (tr2.type) {\n                        @case (\"chip\") {\n                          <mat-chip\n                            [color]=\"\n                              isThemeColor(tr2.color) ? tr2.color : undefined\n                            \"\n                            [ngClass]=\"\n                              (tr2.variant || 'filled') === 'outlined'\n                                ? 'chip-outlined'\n                                : ''\n                            \"\n                            [style.cssText]=\"chipStyle(tr2.color, tr2.variant)\"\n                            >{{ tr2.value }}</mat-chip\n                          >\n                        }\n                        @case (\"icon\") {\n                          <mat-icon\n                            [praxisIcon]=\"tr2.value\"\n                            [color]=\"\n                              isThemeColor(tr2.color) ? tr2.color : undefined\n                            \"\n                            [style.cssText]=\"iconStyle(tr2.color)\"\n                          ></mat-icon>\n                        }\n                        @case (\"image\") {\n                          <span class=\"inline-image\"\n                            ><img [src]=\"tr2.value\" [alt]=\"tr2.imageAlt || ''\"\n                          /></span>\n                        }\n                        @case (\"rating\") {\n                          @for (\n                            _ of ratingRange(tr2);\n                            track $index;\n                            let idx = $index\n                          ) {\n                            <mat-icon\n                              [praxisIcon]=\"starIcon(idx, tr2.value)\"\n                              [color]=\"ratingThemeColor(tr2)\"\n                              [style.cssText]=\"ratingIconStyle(tr2)\"\n                            ></mat-icon>\n                          }\n                        }\n                        @case (\"html\") {\n                          <span [innerHTML]=\"tr2.value\"></span>\n                        }\n                        @case (\"metric\") {\n                          <praxis-list-metric\n                            [metric]=\"tr2\"\n                          ></praxis-list-metric>\n                        }\n                        @case (\"compose\") {\n                          <praxis-list-compose\n                            [compose]=\"tr2\"\n                          ></praxis-list-compose>\n                        }\n                        @case (\"component\") {\n                          <praxis-list-runtime-component\n                            [component]=\"tr2\"\n                          ></praxis-list-runtime-component>\n                        }\n                        @default {\n                          <span>{{ tr2.value }}</span>\n                        }\n                      }\n                    }\n                  </div>\n                }\n              }\n            </div>\n\n            @if ((visibleActions(it, \"trailing\") || []).length) {\n              <div\n                class=\"tile-actions\"\n                (click)=\"$event.stopPropagation()\"\n                (keydown.enter)=\"onActionKeydown($event)\"\n                (keydown.space)=\"onActionKeydown($event)\"\n              >\n                @for (\n                  action of visibleActions(it, \"trailing\");\n                  let aidx = $index;\n                  track action?.id ?? $index\n                ) {\n                  @if ((action.kind || \"icon\") === \"icon\") {\n                    <button\n                      mat-icon-button\n                      [color]=\"\n                        isThemeColor(action.color) ? action.color : undefined\n                      \"\n                      (click)=\"onActionClick($event, action.id, it, i)\"\n                      [attr.aria-label]=\"action.label || action.id\"\n                      [disabled]=\"isActionLoading(action.id, it, i)\"\n                      [ngClass]=\"{\n                        'action-loading': isActionLoading(action.id, it, i),\n                      }\"\n                    >\n                      @if (isActionLoading(action.id, it, i)) {\n                        <mat-progress-spinner\n                          class=\"action-spinner\"\n                          mode=\"indeterminate\"\n                          diameter=\"16\"\n                          strokeWidth=\"3\"\n                        ></mat-progress-spinner>\n                      } @else {\n                        <mat-icon\n                          [praxisIcon]=\"action.icon\"\n                          [style.cssText]=\"iconStyle(action.color)\"\n                        ></mat-icon>\n                      }\n                    </button>\n                  } @else {\n                    @if (action.buttonVariant === \"stroked\") {\n                      <button\n                        mat-stroked-button\n                        [color]=\"\n                          isThemeColor(action.color) ? action.color : undefined\n                        \"\n                        [style.cssText]=\"buttonStyle(action.color, 'stroked')\"\n                        (click)=\"onActionClick($event, action.id, it, i)\"\n                        [attr.aria-label]=\"action.label || action.id\"\n                        [disabled]=\"isActionLoading(action.id, it, i)\"\n                        [ngClass]=\"{\n                          'action-loading': isActionLoading(action.id, it, i),\n                        }\"\n                      >\n                        @if (isActionLoading(action.id, it, i)) {\n                          <mat-progress-spinner\n                            class=\"action-spinner\"\n                            mode=\"indeterminate\"\n                            diameter=\"16\"\n                            strokeWidth=\"3\"\n                          ></mat-progress-spinner>\n                        } @else {\n                          {{ action.label || action.id }}\n                        }\n                      </button>\n                    }\n                    @if (action.buttonVariant === \"raised\") {\n                      <button\n                        mat-raised-button\n                        [color]=\"\n                          isThemeColor(action.color) ? action.color : undefined\n                        \"\n                        [style.cssText]=\"buttonStyle(action.color, 'raised')\"\n                        (click)=\"onActionClick($event, action.id, it, i)\"\n                        [attr.aria-label]=\"action.label || action.id\"\n                        [disabled]=\"isActionLoading(action.id, it, i)\"\n                        [ngClass]=\"{\n                          'action-loading': isActionLoading(action.id, it, i),\n                        }\"\n                      >\n                        @if (isActionLoading(action.id, it, i)) {\n                          <mat-progress-spinner\n                            class=\"action-spinner\"\n                            mode=\"indeterminate\"\n                            diameter=\"16\"\n                            strokeWidth=\"3\"\n                          ></mat-progress-spinner>\n                        } @else {\n                          {{ action.label || action.id }}\n                        }\n                      </button>\n                    }\n                    @if (\n                      !action.buttonVariant || action.buttonVariant === \"flat\"\n                    ) {\n                      <button\n                        mat-flat-button\n                        [color]=\"\n                          isThemeColor(action.color) ? action.color : undefined\n                        \"\n                        [style.cssText]=\"buttonStyle(action.color, 'flat')\"\n                        (click)=\"onActionClick($event, action.id, it, i)\"\n                        [attr.aria-label]=\"action.label || action.id\"\n                        [disabled]=\"isActionLoading(action.id, it, i)\"\n                        [ngClass]=\"{\n                          'action-loading': isActionLoading(action.id, it, i),\n                        }\"\n                      >\n                        @if (isActionLoading(action.id, it, i)) {\n                          <mat-progress-spinner\n                            class=\"action-spinner\"\n                            mode=\"indeterminate\"\n                            diameter=\"16\"\n                            strokeWidth=\"3\"\n                          ></mat-progress-spinner>\n                        } @else {\n                          {{ action.label || action.id }}\n                        }\n                      </button>\n                    }\n                  }\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </ng-template>\n\n    <!-- Simple pagination controls for remote data -->\n    @if (config.dataSource?.resourcePath) {\n      <div class=\"paginator\">\n        <div class=\"paginator-controls\">\n          <button mat-stroked-button color=\"primary\" (click)=\"prevPage()\">\n            Anterior\n          </button>\n          <button mat-stroked-button color=\"primary\" (click)=\"nextPage()\">\n            Pr\u00F3ximo\n          </button>\n          <mat-form-field class=\"paginator-page-size\" appearance=\"outline\">\n            <mat-label>Tam. p\u00E1gina</mat-label>\n            <mat-select\n              (selectionChange)=\"setPageSize($event.value)\"\n              [value]=\"config.layout?.pageSize || 10\"\n            >\n              <mat-option [value]=\"6\">6</mat-option>\n              <mat-option [value]=\"8\">8</mat-option>\n              <mat-option [value]=\"12\">12</mat-option>\n              <mat-option [value]=\"24\">24</mat-option>\n            </mat-select>\n          </mat-form-field>\n          @if (config.ui?.showSort) {\n            <mat-form-field class=\"paginator-sort\" appearance=\"outline\">\n              <mat-label>Ordenar</mat-label>\n              <mat-select (selectionChange)=\"onSortChange($event.value)\">\n                @for (op of config.ui?.sortOptions || []; track $index) {\n                  <mat-option [value]=\"sortOptionValue(op)\">{{\n                    sortOptionLabel(op)\n                  }}</mat-option>\n                }\n              </mat-select>\n            </mat-form-field>\n          }\n          @if (config.ui?.showSearch && config.ui?.searchField) {\n            <mat-form-field class=\"paginator-search\" appearance=\"outline\">\n              <mat-label>{{\n                config.ui?.searchPlaceholder || \"Buscar\"\n              }}</mat-label>\n              <input\n                matInput\n                type=\"search\"\n                (input)=\"onSearchInput($any($event.target).value)\"\n              />\n            </mat-form-field>\n          }\n        </div>\n        <div class=\"paginator-meta\">\n          @if (config.ui?.showRange ?? true) {\n            @if (page$ | async; as ps) {\n              @if (total$ | async; as total) {\n                @if (items$ | async; as curr) {\n                  <span class=\"muted\"\n                    >{{ (total || 0) > 0 ? rangeStart(ps) : 0 }}\u2013{{\n                      rangeEnd(curr?.length || 0, ps, total || 0)\n                    }}\n                    de {{ total || 0 }}</span\n                  >\n                }\n              }\n            }\n          } @else {\n            @if (total$ | async; as total2) {\n              <span class=\"muted\">Total: {{ total2 }}</span>\n            }\n          }\n        </div>\n      </div>\n    }\n  </ng-template>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.praxis-list-root{--p-list-radius: var(--md-sys-shape-corner-medium, 16px);--p-list-shadow: var(--md-sys-elevation-level2);--p-list-border: 1px solid var(--md-sys-color-outline-variant);--p-list-blur: 10px;--p-list-surface: var(--md-sys-color-surface-container);--p-list-surface-low: var(--md-sys-color-surface);--p-list-surface-high: var( --md-sys-color-surface-container-high, var(--md-sys-color-surface-container) );--p-list-foreground: var(--md-sys-color-on-surface);--p-list-foreground-muted: var(--md-sys-color-on-surface-variant);--p-list-accent: var(--md-sys-color-primary);--p-list-accent-weak: var(--md-sys-color-primary-container);--p-list-item-surface: var( --md-sys-color-surface-container-low, var(--md-sys-color-surface) );--p-list-item-border: 1px solid var(--md-sys-color-outline-variant);--p-list-item-hover-surface: var(--md-sys-color-surface-container-low);--p-list-item-active-surface: var(--md-sys-color-surface-container);--p-list-item-selected-surface: var(--md-sys-color-surface-container);--p-list-grad-from: var(--md-sys-color-primary-container);--p-list-grad-to: var(--md-sys-color-tertiary-container);--p-list-grad-angle: 135deg;--p-list-grad-foreground: var(--md-sys-color-on-primary);--p-list-grad-foreground-muted: var(--md-sys-color-on-primary);--p-list-leading-width: 36px;--p-list-trailing-min-width: 140px;--p-list-item-gap: 10px;--p-list-item-padding-x: 14px;--p-list-item-padding-y: 10px;--p-list-item-stack-gap: 0px;--p-list-meta-size: .875rem;--p-list-meta-weight: 500;--p-list-chip-height: 22px;--p-list-chip-font-size: 12px;--p-list-trailing-padding-right: 8px;--p-list-tile-minW: 240px;--p-list-tile-gap: 12px;--p-list-tile-padding: 12px;--p-list-tile-radius: 12px;--p-list-tile-media-radius: 12px;--p-list-tile-media-ratio: 1 / 1;--p-list-tile-hover-overlay: .04;--p-list-tile-press-overlay: .08;--p-list-tile-press-scale: .99}.list-assistant{display:flex;justify-content:flex-end;gap:8px;padding:4px 4px 8px}.action-loading{opacity:.65}.action-spinner{width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center}.action-loading .mat-mdc-button-touch-target,.action-loading .mdc-button__label{opacity:.7}.skin-elevated,.skin-outline,.skin-flat,.skin-neumorphism{--p-list-item-surface: var( --mdc-elevated-card-container-color, var(--p-list-surface) );--p-list-item-border: var(--p-list-border)}.skin-elevated .item-card,.skin-outline .item-card,.skin-flat .item-card,.skin-neumorphism .item-card{background:var(--mdc-elevated-card-container-color, var(--p-list-surface));border-radius:var(--p-list-radius);box-shadow:var(--p-list-shadow);border:var(--p-list-border)}.skin-elevated .item-tile,.skin-outline .item-tile,.skin-flat .item-tile,.skin-neumorphism .item-tile{background:var(--mdc-elevated-card-container-color, var(--p-list-surface));box-shadow:var(--p-list-shadow);border:var(--p-list-border)}.skin-elevated .mat-mdc-list-item .list-item-content,.skin-outline .mat-mdc-list-item .list-item-content,.skin-flat .mat-mdc-list-item .list-item-content,.skin-neumorphism .mat-mdc-list-item .list-item-content{background:var(--mdc-elevated-card-container-color, var(--p-list-surface));border-radius:calc(var(--p-list-radius) * .75);box-shadow:var(--p-list-shadow);border:var(--p-list-item-border);color:var(--p-list-foreground)}.skin-outline{--p-list-shadow: none;--p-list-border: 1px solid var(--md-sys-color-outline)}.skin-flat{--p-list-shadow: none;--p-list-border: 1px solid var(--md-sys-color-outline-variant)}.skin-neumorphism{--p-list-shadow: var(--md-sys-elevation-level2);--p-list-border: 1px solid var(--md-sys-color-outline-variant);--p-list-radius: 1.25rem}.skin-pill-soft .item-card,.skin-pill-soft .item-tile{background:var(--mdc-elevated-card-container-color, var(--p-list-surface));border-radius:calc(var(--p-list-radius) * 1.3);box-shadow:var(--md-sys-elevation-level1);border:var(--p-list-border)}.skin-pill-soft .mat-mdc-list-item .list-item-content{background:var(--mdc-elevated-card-container-color, var(--p-list-surface));border-radius:calc(var(--p-list-radius) * 1.3);box-shadow:var(--md-sys-elevation-level1);border:var(--p-list-border);color:var(--p-list-foreground)}.skin-gradient-tile{--p-list-foreground: var(--p-list-grad-foreground);--p-list-foreground-muted: var(--p-list-grad-foreground-muted);--p-list-item-hover-surface: linear-gradient( var(--p-list-grad-angle), var(--p-list-grad-from), var(--p-list-grad-to) );--p-list-item-active-surface: linear-gradient( var(--p-list-grad-angle), var(--p-list-grad-from), var(--p-list-grad-to) );--p-list-item-selected-surface: linear-gradient( var(--p-list-grad-angle), var(--p-list-grad-from), var(--p-list-grad-to) )}.skin-gradient-tile .item-card,.skin-gradient-tile .item-tile,.skin-gradient-tile .mat-mdc-list-item .list-item-content{background:linear-gradient(var(--p-list-grad-angle),var(--p-list-grad-from),var(--p-list-grad-to));border-radius:var(--p-list-radius);color:var(--p-list-foreground)}.skin-glass .item-card,.skin-glass .item-tile{background:var(--md-sys-color-surface-container-low);border-radius:var(--p-list-radius);border:1px solid var(--md-sys-color-outline-variant);backdrop-filter:blur(var(--p-list-blur));-webkit-backdrop-filter:blur(var(--p-list-blur))}.skin-glass .mat-mdc-list-item .list-item-content{background:var(--md-sys-color-surface-container-low);border-radius:var(--p-list-radius);border:1px solid var(--md-sys-color-outline-variant);backdrop-filter:blur(var(--p-list-blur));-webkit-backdrop-filter:blur(var(--p-list-blur));color:var(--p-list-foreground)}.density-compact .mat-mdc-list-item,.density-compact .item-card{--p-list-item-padding-y: 6px;--p-list-item-padding-x: 10px;--p-list-item-gap: 8px}.density-comfortable .mat-mdc-list-item,.density-comfortable .item-card{--p-list-item-padding-y: 8px;--p-list-item-padding-x: 12px;--p-list-item-gap: 10px}.praxis-list-root.lines-3 .mat-mdc-list-item,.praxis-list-root.lines-3 .mat-mdc-list-option{min-height:68px}.density-compact{--p-list-tile-gap: 10px;--p-list-tile-padding: 10px;--p-list-tile-minW: 188px}.density-comfortable{--p-list-tile-gap: 12px;--p-list-tile-padding: 12px}.item-spacing-none{--p-list-item-stack-gap: 0px}.item-spacing-tight{--p-list-item-stack-gap: 4px;--p-list-tile-gap: 10px}.item-spacing-default{--p-list-item-stack-gap: 6px;--p-list-tile-gap: 12px}.item-spacing-relaxed{--p-list-item-stack-gap: 14px;--p-list-tile-gap: 20px}.list-item-content{display:grid;grid-template-columns:var(--p-list-leading-width) minmax(0,1fr) minmax(var(--p-list-trailing-min-width),max-content);align-items:center;gap:var(--p-list-item-gap);padding:var(--p-list-item-padding-y) var(--p-list-item-padding-x);width:100%;min-width:0;border-radius:calc(var(--p-list-radius) * .75);overflow:visible}.list-item-content--row-layout{--p-list-row-template-columns: var(--p-list-leading-width) minmax(0, 1fr) minmax(var(--p-list-trailing-min-width), max-content);--p-list-row-gap: var(--p-list-item-gap);--p-list-row-align-items: center;grid-template-columns:var(--p-list-row-template-columns);gap:var(--p-list-row-gap);align-items:var(--p-list-row-align-items)}.list-item-content--row-layout[role=button]{cursor:pointer}.list-item-content--row-layout[role=button]:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}.list-row-slot{min-width:0;display:flex;align-items:center;gap:8px}.list-row-slot--leading{justify-content:center}.list-row-slot--primary,.list-row-slot--secondary{min-width:0}.list-row-slot--meta{color:var(--p-list-foreground);font-variant-numeric:tabular-nums}.list-row-slot--trailing{flex-wrap:wrap;justify-content:flex-end}.list-row-slot .primary,.list-row-slot .secondary,.list-row-slot .meta,.list-row-slot .trailing{min-width:0}.list-item-main-action{grid-column:1/3;display:grid;grid-template-columns:var(--p-list-leading-width) minmax(0,1fr);align-items:center;gap:var(--p-list-item-gap);min-width:0;padding:0;border:0;background:transparent;color:inherit;text-align:start;font:inherit;cursor:pointer}.list-item-main-action:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px;border-radius:12px}.list-item-leading{display:flex;align-items:center;justify-content:center;min-height:100%}.leading-placeholder{width:24px;height:24px;display:inline-block}.list-item-text{min-width:0;display:grid;align-content:center;gap:2px}.list-item-trailing{min-width:0;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:4px;text-align:end;padding-right:var(--p-list-trailing-padding-right)}.list-item-content--row-layout .list-item-actions{justify-content:flex-end}.list-item-actions{display:flex;align-items:center;justify-content:flex-end;gap:4px;flex-wrap:wrap}.expand-toggle{color:var(--p-list-foreground-muted)}.mat-mdc-list-item .list-item-content{background:var(--p-list-item-surface);border:var(--p-list-item-border);transition:background .15s ease,box-shadow .15s ease,transform .15s ease}.mat-mdc-list-item,.mat-mdc-list-option{height:auto;align-items:stretch;overflow:visible}.mat-mdc-list-item.mdc-list-item--with-one-line,.mat-mdc-list-item.mdc-list-item--with-two-lines,.mat-mdc-list-item.mdc-list-item--with-three-lines,.mat-mdc-list-item-single-line,.mat-mdc-list-item-two-line,.mat-mdc-list-item-three-line,.mat-mdc-list-option.mdc-list-item--with-one-line,.mat-mdc-list-option.mdc-list-item--with-two-lines,.mat-mdc-list-option.mdc-list-item--with-three-lines{height:auto!important}.mdc-list-item{overflow:visible}.density-compact .mat-mdc-list-item,.density-compact .mat-mdc-list-option{min-height:40px}.density-comfortable .mat-mdc-list-item,.density-comfortable .mat-mdc-list-option{min-height:46px}.praxis-list-root:not(.density-compact):not(.density-comfortable) .mat-mdc-list-item,.praxis-list-root:not(.density-compact):not(.density-comfortable) .mat-mdc-list-option{min-height:48px}.mat-mdc-list-item .mdc-list-item__content,.mat-mdc-list-option .mdc-list-item__content,.mat-mdc-list-item .mdc-list-item__primary-text,.mat-mdc-list-option .mdc-list-item__primary-text{display:block!important;width:100%!important;height:auto!important;padding:0!important;margin:0!important;overflow:visible!important;box-sizing:border-box}.mat-mdc-list-item,.mat-mdc-list-option{padding:0!important;box-sizing:border-box}.praxis-list-root mat-list>mat-list-item:not(:last-child),.praxis-list-root mat-selection-list>mat-list-option:not(:last-child){margin-bottom:var(--p-list-item-stack-gap)}.mat-mdc-list-item:hover .list-item-content,.mat-mdc-list-option:hover .list-item-content{background:var(--p-list-item-hover-surface)}.mat-mdc-list-item:active .list-item-content,.mat-mdc-list-option:active .list-item-content{background:var(--p-list-item-active-surface)}.mat-mdc-list-option.mdc-list-item--selected .list-item-content{background:var(--p-list-item-selected-surface);border-color:var(--md-sys-color-outline-variant)}.mat-mdc-list-option.cdk-keyboard-focused .list-item-content,.mat-mdc-list-option.cdk-focused .list-item-content{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}.mat-mdc-list-item:focus-visible .list-item-content{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}.executive-inline-skin{--p-list-leading-width: 56px;--p-list-trailing-min-width: 232px;--p-list-item-padding-x: 14px;--p-list-item-padding-y: 8px;--p-list-item-gap: 10px;--p-list-surface: #f8fafb;--p-list-surface-low: #ffffff;--p-list-item-surface: #ffffff;--p-list-item-hover-surface: #f7fafc;--p-list-item-active-surface: #eef4f8;--p-list-item-selected-surface: #eef4f8;--p-list-foreground: #17324d;--p-list-foreground-muted: #72849a}.executive-inline-skin .list-item-content--row-layout.exec-row-layout{min-height:72px;padding:12px 20px;background:linear-gradient(180deg,#fff,#fbfcfd)!important;border:1px solid #dce5ec!important;border-radius:18px;box-shadow:0 1px 2px #0f223a08,0 4px 14px #0f223a08!important;color:#17324d!important}.executive-inline-skin .mat-mdc-list-item:hover .list-item-content--row-layout.exec-row-layout{background:linear-gradient(180deg,#fff,#f7fafc)!important}.executive-inline-skin .list-item-content--row-layout.exec-row-layout+.item-expansion{margin-left:10px;margin-right:10px}.executive-inline-skin .list-item-content--row-layout.exec-row-layout .list-row-slot{min-height:34px}.executive-inline-skin .list-row-slot--leading{justify-content:center}.executive-inline-skin .list-row-slot--identity{align-items:center;padding-right:4px}.executive-inline-skin .list-row-slot--balance,.executive-inline-skin .list-row-slot--limit,.executive-inline-skin .list-row-slot--risk,.executive-inline-skin .list-row-slot--alerts{justify-content:center;padding-inline:2px}.executive-inline-skin .list-row-slot--owner{justify-content:flex-start;padding-left:0}.executive-inline-skin .list-row-slot--actions{justify-content:flex-end;padding-left:0}.executive-inline-skin .list-row-slot--expand{justify-content:center}.executive-inline-skin .docs-expansion-leading{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:15px;background:linear-gradient(180deg,#edf4f9,#e6eef5);color:#1b5f86;font-size:1rem;font-weight:800;letter-spacing:.02em;box-shadow:0 1px 3px #1b5f861f;border:1px solid #dbe7f0}.executive-inline-skin .exec-balance-metric,.executive-inline-skin .exec-limit-metric,.executive-inline-skin .exec-risk-metric{min-width:0}.executive-inline-skin .exec-balance-metric .p-list-metric,.executive-inline-skin .exec-limit-metric .p-list-metric,.executive-inline-skin .exec-risk-metric .p-list-metric{gap:5px}.executive-inline-skin .exec-balance-metric .p-list-metric__label,.executive-inline-skin .exec-limit-metric .p-list-metric__label,.executive-inline-skin .exec-risk-metric .p-list-metric__label{font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8090a1}.executive-inline-skin .exec-balance-metric .p-list-metric__value,.executive-inline-skin .exec-limit-metric .p-list-metric__value{font-size:.96rem;font-weight:800;letter-spacing:-.02em;color:#0d1f34;line-height:1.05}.executive-inline-skin .exec-limit-metric .p-list-metric__caption{font-size:.66rem;font-weight:700;color:#8090a1}.executive-inline-skin .exec-limit-metric .p-list-metric__progress{width:68px;justify-self:center;height:3px}.executive-inline-skin .exec-risk-metric{min-width:84px}.executive-inline-skin .exec-risk-metric .p-list-metric{justify-items:center}.executive-inline-skin .exec-risk-metric .p-list-metric__main{gap:6px}.executive-inline-skin .exec-risk-metric .p-list-metric__value{font-size:1.02rem;font-weight:800;letter-spacing:-.024em;line-height:1}.executive-inline-skin .exec-risk-metric .p-list-metric__progress{width:56px;justify-self:center;height:3px}.executive-inline-skin .exec-risk-metric .p-list-metric__caption{font-size:.7rem;font-weight:700;line-height:1.1}.executive-inline-skin .exec-risk-metric .p-list-metric__caption--below-progress{justify-self:center;margin-top:-1px}.executive-inline-skin .exec-risk-metric .p-list-metric__icon mat-icon{width:15px;height:15px;font-size:15px}.executive-inline-skin .list-item-actions{gap:6px;flex-wrap:nowrap}.executive-inline-skin .list-row-slot--actions .list-item-actions{justify-content:flex-end}.executive-inline-skin .list-item-actions button,.executive-inline-skin .expand-toggle{width:30px;height:30px;min-width:30px;border-radius:12px;color:#6d7f93!important}.executive-inline-skin .list-item-actions button mat-icon,.executive-inline-skin .expand-toggle mat-icon{width:18px;height:18px;font-size:18px}.executive-inline-skin .item-expansion{position:relative;margin-top:-10px;padding:22px 26px;background:linear-gradient(180deg,#fcfdfe,#f5f8fb);border-color:#e4eaf0;border-radius:0 0 22px 22px;box-shadow:inset 0 1px #ffffffdb}.lead-image{position:relative;width:96px;height:72px;border-radius:12px;overflow:hidden}.lead-image img{width:100%;height:100%;object-fit:cover;display:block}.lead-image .lead-badge{position:absolute;left:8px;bottom:8px}.inline-image{position:relative;width:20px;height:20px;border-radius:4px;overflow:hidden;display:inline-block;vertical-align:middle}.inline-image img{width:100%;height:100%;object-fit:cover;display:block}.inline-image .inline-badge{position:absolute;left:2px;bottom:2px}.model-media .lead-image{width:136px;height:96px;border-radius:16px}.model-media .list-item-content{gap:16px}.model-media .item-card{--p-list-leading-width: 136px}.model-hotel .lead-image{width:160px;height:110px;border-radius:18px}.model-hotel .item-card{--p-list-leading-width: 160px}.primary,.secondary{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.primary{-webkit-line-clamp:1;font-weight:600;color:var(--p-list-foreground)}.secondary{-webkit-line-clamp:1;color:var(--p-list-foreground-muted)}.lines-3 .tertiary{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.item-tile .primary{-webkit-line-clamp:2;font-size:.95rem;line-height:1.25rem}.item-tile .secondary{-webkit-line-clamp:2;font-size:.8rem;line-height:1.1rem}.tertiary{color:var(--p-list-foreground-muted)}.features{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px;color:inherit}.feature{display:inline-flex;align-items:center;gap:6px}.feature-line{display:block}.feature-progress{display:block;width:88px;height:4px;margin-top:6px;border-radius:999px;background:#dbe5eb;overflow:hidden}.feature-progress__value{display:block;height:100%;border-radius:inherit;background:#2f9b69}.meta{color:var(--p-list-foreground);font-size:var(--p-list-meta-size);font-weight:var(--p-list-meta-weight);font-variant-numeric:tabular-nums;white-space:nowrap}.trailing{color:var(--p-list-foreground-muted);margin-left:0;white-space:nowrap}.section-header{font-size:.85rem;color:var(--p-list-foreground-muted);padding:8px 12px}.praxis-list-root mat-list,.praxis-list-root mat-selection-list{display:block;padding-bottom:12px}.praxis-list-root .mat-divider{margin-left:var(--p-list-item-padding-x);margin-right:var(--p-list-item-padding-x)}.item-expansion{margin:0 var(--p-list-item-padding-x) var(--p-list-item-stack-gap);padding:14px 16px;background:color-mix(in srgb,var(--p-list-surface) 88%,white 12%);border:1px solid var(--md-sys-color-outline-variant);border-radius:calc(var(--p-list-radius) * .75)}.item-expansion-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}.expansion-section{min-width:0;display:grid;gap:10px;align-content:start}.expansion-section-title{font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--p-list-foreground-muted)}.expansion-info-list,.expansion-timeline,.expansion-key-value{display:grid;gap:10px}.expansion-info-item,.expansion-timeline-item{display:grid;gap:4px;padding:10px 12px;border-radius:14px;background:var(--p-list-item-surface);border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 72%,transparent 28%)}.expansion-info-title,.expansion-timeline-title{font-size:.92rem;font-weight:600;color:var(--p-list-foreground)}.expansion-info-value,.expansion-timeline-meta,.expansion-timeline-description,.expansion-empty{font-size:.82rem;line-height:1.45;color:var(--p-list-foreground-muted)}.expansion-chip-list{display:flex;flex-wrap:wrap;gap:8px}.expansion-chip{background:var(--p-list-item-surface);border:1px solid var(--md-sys-color-outline-variant)}.expansion-key-value{margin:0}.expansion-key-value-row{display:grid;gap:4px;padding:10px 12px;border-radius:14px;background:var(--p-list-item-surface);border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 72%,transparent 28%)}.expansion-key-value-row dt,.expansion-key-value-row dd{margin:0}.expansion-key-value-row dt{font-size:.78rem;font-weight:600;color:var(--p-list-foreground-muted)}.expansion-key-value-row dd{font-size:.9rem;color:var(--p-list-foreground)}.cards-grid,.tiles-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--p-list-tile-minW),1fr));gap:var(--p-list-tile-gap)}.item-tile{position:relative;display:flex;flex-direction:column;gap:10px;padding:var(--p-list-tile-padding);border-radius:var(--p-list-tile-radius);background:var(--p-list-surface);border:var(--p-list-border);color:var(--p-list-foreground);cursor:pointer;min-height:160px;transition:box-shadow .16s ease-out,border-color .16s ease-out,transform .12s ease-out,background .16s ease-out}.item-tile:hover{box-shadow:var(--md-sys-elevation-level2);border-color:var(--md-sys-color-outline-variant);background:var(--p-list-item-hover-surface)}.item-tile:active{transform:scale(var(--p-list-tile-press-scale));background:var(--p-list-item-active-surface)}.item-tile:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}.tile-media{width:100%;aspect-ratio:var(--p-list-tile-media-ratio);border-radius:var(--p-list-tile-media-radius);background:var(--p-list-item-surface);border:1px solid var(--md-sys-color-outline-variant);display:grid;place-items:center;overflow:hidden}.tile-media img{width:100%;height:100%;object-fit:cover;display:block}.tile-media mat-icon{font-size:28px;height:28px;width:28px;color:var(--p-list-foreground-muted)}.tile-body{display:grid;gap:6px;min-width:0}.tile-meta{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;color:var(--p-list-foreground-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tile-trailing{font-size:.75rem;color:var(--p-list-foreground-muted);white-space:nowrap}.tiles-features{display:flex;flex-wrap:wrap;gap:8px;color:inherit}.tile-status{position:absolute;top:10px;right:10px}.tile-actions{position:absolute;top:8px;left:8px;display:flex;gap:4px;opacity:0;pointer-events:none;transform:translateY(-2px);transition:opacity .16s ease-out,transform .16s ease-out}.item-tile:hover .tile-actions,.item-tile:focus-visible .tile-actions,.item-tile:focus-within .tile-actions{opacity:1;pointer-events:auto;transform:translateY(0)}@media(hover:none){.tile-actions{opacity:1;pointer-events:auto;transform:none}}@media(max-width:600px){.tiles-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}@media(prefers-reduced-motion:reduce){.item-tile,.tile-actions{transition:none}.item-tile:active{transform:none}.item-card{transition:none}.item-card:active{transform:none}}.item-card{padding:var(--p-list-tile-padding);display:flex;flex-direction:column;min-height:160px;position:relative;cursor:pointer;background:var(--p-list-surface);border:var(--p-list-border);border-radius:var(--p-list-tile-radius);box-shadow:var(--p-list-shadow);transition:box-shadow .16s ease-out,border-color .16s ease-out,transform .12s ease-out,background .16s ease-out;--p-list-leading-width: 96px;--p-list-trailing-min-width: 0px}.item-card .list-item-trailing{min-width:var(--p-list-trailing-min-width)}.item-card:hover{box-shadow:var(--md-sys-elevation-level3);border-color:var(--md-sys-color-outline-variant);background:var(--p-list-item-hover-surface)}.item-card:active{transform:scale(var(--p-list-tile-press-scale));background:var(--p-list-item-active-surface)}.item-card:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}.card-actions{display:flex;align-items:center;justify-content:flex-end;gap:4px;padding:6px 8px 4px;border-top:1px solid var(--md-sys-color-outline-variant);margin-top:auto}.status-overlay{position:absolute;top:10px;right:10px;pointer-events:none}.status-overlay .mat-mdc-chip{pointer-events:auto}.leading-icon.mat-icon{width:36px;height:36px;line-height:36px;font-size:20px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.mat-mdc-chip{--mdc-chip-container-height: var(--p-list-chip-height);font-size:var(--p-list-chip-font-size)}.meta .mat-icon{font-size:18px;height:18px;width:18px}.features{overflow:hidden}@keyframes shimmer{0%{background-position:-468px 0}to{background-position:468px 0}}.skeleton{animation-duration:1.2s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:shimmer;animation-timing-function:linear;background:linear-gradient(to right,var(--md-sys-color-surface-container-low) 8%,var(--md-sys-color-surface-container) 18%,var(--md-sys-color-surface-container-low) 33%);background-size:800px 104px;position:relative}.skeleton-avatar{width:32px;height:32px;border-radius:50%}.skeleton-line{height:10px;margin:6px 0;border-radius:6px}.skeleton-chip{width:48px;height:18px;border-radius:999px}.chip-outlined.mat-mdc-chip{background:transparent!important;border:1px solid currentColor}.w-60{width:60%}.w-40{width:40%}.paginator{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:14px;padding:14px 4px 8px;border-top:1px solid var(--md-sys-color-outline-variant);position:relative;z-index:1;background:var(--p-list-surface-low);border-radius:calc(var(--p-list-radius) * .75)}.paginator-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.paginator-meta{display:flex;align-items:center;gap:8px;margin-left:auto}.paginator-page-size{width:120px}.paginator-sort{width:180px}.paginator-search{min-width:220px}.muted{color:var(--p-list-foreground-muted)}@media(max-width:720px){.list-item-content{grid-template-columns:var(--p-list-leading-width) minmax(0,1fr)}.list-item-trailing{grid-column:1/-1;padding-right:0;align-items:flex-start;text-align:start}.item-expansion{margin-left:0;margin-right:0}.paginator{align-items:stretch}.paginator-controls{width:100%}.paginator-meta{width:100%;margin-left:0;justify-content:flex-start}.paginator-page-size,.paginator-sort,.paginator-search{width:100%;min-width:0}}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], listId: [{
@@ -9521,6 +9977,149 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 type: Output
             }] } });
 
+function isListTemplateSupportedByRichContentP0(template) {
+    if (!template) {
+        return false;
+    }
+    switch (template.type) {
+        case 'text':
+        case 'icon':
+        case 'image':
+        case 'chip':
+        case 'metric':
+        case 'compose':
+            return true;
+        default:
+            return false;
+    }
+}
+function mapListTemplateToRichContentP0(template) {
+    if (!template) {
+        return null;
+    }
+    switch (template.type) {
+        case 'text':
+            return mapTextTemplate(template);
+        case 'icon':
+            return {
+                type: 'icon',
+                icon: template.expr || '',
+                className: template.class,
+                style: parseInlineStyle(template.style),
+            };
+        case 'image':
+            return mapImageTemplate(template);
+        case 'chip':
+            return mapChipTemplate(template);
+        case 'metric':
+            return mapMetricTemplate(template);
+        case 'compose':
+            return mapComposeTemplate(template);
+        default:
+            return null;
+    }
+}
+function mapTextTemplate(template) {
+    return {
+        type: 'text',
+        textExpr: template.expr,
+        className: template.class,
+        style: parseInlineStyle(template.style),
+    };
+}
+function mapImageTemplate(template) {
+    return {
+        type: 'image',
+        srcExpr: template.expr,
+        alt: template.imageAlt,
+        className: template.class,
+        style: parseInlineStyle(template.style),
+    };
+}
+function mapChipTemplate(template) {
+    return {
+        type: 'badge',
+        labelExpr: template.expr,
+        className: template.class,
+        style: parseInlineStyle(template.style),
+    };
+}
+function mapMetricTemplate(template) {
+    const metric = template.props?.metric;
+    return {
+        type: 'metric',
+        label: metric?.label || '',
+        valueExpr: metric?.valueExpr || template.expr || '',
+        captionExpr: metric?.caption,
+        icon: metric?.icon,
+        className: template.class,
+        style: parseInlineStyle(template.style),
+    };
+}
+function mapComposeTemplate(template) {
+    const compose = template.props?.compose;
+    const childTemplates = compose?.items ?? compose?.nodes ?? [];
+    return {
+        type: 'compose',
+        direction: compose?.direction === 'column' || compose?.orientation === 'vertical'
+            ? 'column'
+            : 'row',
+        gap: normalizeGap(compose?.gap),
+        wrap: compose?.wrap,
+        className: template.class || compose?.class,
+        style: parseInlineStyle(template.style || compose?.style),
+        items: childTemplates
+            .map(child => mapListTemplateToRichContentP0(child))
+            .filter(isRichPresenterNode),
+    };
+}
+function normalizeGap(gap) {
+    switch ((gap || '').trim()) {
+        case '4px':
+        case '0.25rem':
+        case 'xs':
+            return 'xs';
+        case '8px':
+        case '0.5rem':
+        case 'sm':
+            return 'sm';
+        case '16px':
+        case '1rem':
+        case 'lg':
+            return 'lg';
+        case '20px':
+        case '1.25rem':
+        case 'xl':
+            return 'xl';
+        default:
+            return gap ? 'md' : undefined;
+    }
+}
+function isRichPresenterNode(node) {
+    return !!node && node.type !== 'compose';
+}
+function parseInlineStyle(inlineStyle) {
+    const source = (inlineStyle || '').trim();
+    if (!source) {
+        return undefined;
+    }
+    const entries = source
+        .split(';')
+        .map(part => part.trim())
+        .filter(Boolean)
+        .map(part => {
+        const separator = part.indexOf(':');
+        if (separator === -1) {
+            return null;
+        }
+        const key = part.slice(0, separator).trim();
+        const value = part.slice(separator + 1).trim();
+        return key && value ? [key, value] : null;
+    })
+        .filter((entry) => !!entry);
+    return entries.length ? Object.fromEntries(entries) : undefined;
+}
+
 const PRAXIS_LIST_COMPONENT_METADATA = {
     id: 'praxis-list',
     selector: 'praxis-list',
@@ -10887,4 +11486,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ExecutiveAlertsComponent, ExecutiveBadgeComponent, ExecutiveOwnerComponent, LIST_AI_CAPABILITIES, ListDataService, ListSkinService, PRAXIS_LIST_COMPONENT_METADATA, PRAXIS_LIST_EN_US, PRAXIS_LIST_I18N_NAMESPACE, PRAXIS_LIST_PT_BR, PraxisList, PraxisListConfigEditor, PraxisListDocPageComponent, PraxisListJsonConfigEditorComponent, adaptSelection, buildListApplyPlan, createListAuthoringDocument, evalExpr, evaluateTemplate, inferListAuthoringDocument, inferTemplatingFromSchema, normalizeListActionPayloads, normalizeListAuthoringDocument, normalizeListConfig, parseLegacyOrListDocument, projectListAuthoringDocument, providePraxisListI18n, providePraxisListMetadata, serializeListAuthoringDocument, toCanonicalListConfig, validateListAuthoringDocument };
+export { ExecutiveAlertsComponent, ExecutiveBadgeComponent, ExecutiveOwnerComponent, LIST_AI_CAPABILITIES, ListDataService, ListSkinService, PRAXIS_LIST_COMPONENT_METADATA, PRAXIS_LIST_EN_US, PRAXIS_LIST_I18N_NAMESPACE, PRAXIS_LIST_PT_BR, PraxisList, PraxisListConfigEditor, PraxisListDocPageComponent, PraxisListJsonConfigEditorComponent, adaptSelection, buildListApplyPlan, createListAuthoringDocument, evalExpr, evaluateTemplate, inferListAuthoringDocument, inferTemplatingFromSchema, isListTemplateSupportedByRichContentP0, mapListTemplateToRichContentP0, normalizeListActionPayloads, normalizeListAuthoringDocument, normalizeListConfig, parseLegacyOrListDocument, projectListAuthoringDocument, providePraxisListI18n, providePraxisListMetadata, serializeListAuthoringDocument, toCanonicalListConfig, validateListAuthoringDocument };