@masterteam/client-components 0.0.81 → 0.0.83

package/fesm2022/masterteam-client-components-client-list.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, signal, computed, input, output, Component, viewChild, effect, untracked, ChangeDetectionStrategy } from '@angular/core';
+import { inject, Injectable, signal, computed, input, output, Component, viewChild, effect, untracked, ChangeDetectionStrategy, ElementRef } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i4 from '@jsverse/transloco';
@@ -8,7 +8,7 @@ import { Button } from '@masterteam/components/button';
 import { RuntimeActionRunner, resolveActionLabel } from '@masterteam/components/runtime-action';
 import { HttpClient } from '@angular/common/http';
 import { switchMap, of, map, Observable, share, take } from 'rxjs';
-import { resolveLocalizedLabel, isSectionKey, EntitiesPreview } from '@masterteam/components/entities';
+import { resolveLocalizedLabel, serializeEntityRawValue, isSectionKey, EntitiesPreview } from '@masterteam/components/entities';
 import { Table, TableExportService, TableGroupingController, TableValueResolver, TableCaption } from '@masterteam/components/table';
 import * as i2 from 'primeng/skeleton';
 import { SkeletonModule } from 'primeng/skeleton';
@@ -22,6 +22,9 @@ import { MTDateFormatPipe, readableTextOn } from '@masterteam/components';
 import * as i3 from 'primeng/popover';
 import { PopoverModule } from 'primeng/popover';
 import { DashboardViewer } from '@masterteam/dashboard-builder';
+import * as i1$1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { TextField } from '@masterteam/components/text-field';
 
 const DEFAULT_INCLUDE_STATE = ['escalation'];
 class ClientListApiService {
@@ -484,9 +487,7 @@ class ClientListStateService {
             key: property?.key ?? projectionKey,
             normalizedKey: property?.normalizedKey ?? projectionKey,
             name: customLabel || label || property?.label || projectionKey,
-            rawValue: cell?.raw === null || cell?.raw === undefined
-                ? undefined
-                : String(cell.raw),
+            rawValue: serializeEntityRawValue(cell?.raw),
             value: (cell?.value ?? ''),
             viewType: resolvedViewType,
             type: property?.source,
@@ -1673,13 +1674,115 @@ class ClientListInformativeView {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ClientListInformativeView, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: ClientListInformativeView, isStandalone: true, selector: "mt-client-list-informative-view", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"grid gap-4\" [style.gridTemplateColumns]=\"gridTemplateColumns\">\r\n  @if (informativeState().config.contentStart) {\r\n    <div\r\n      [style.gridColumn]=\"\r\n        slotGridSpan(informativeState().config.layout.startSpan)\r\n      \"\r\n    >\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"informativeState().config.contentStart\"\r\n        [ngTemplateOutletContext]=\"templateContext(informativeState())\"\r\n      />\r\n    </div>\r\n  }\r\n\r\n  <div\r\n    [style.gridColumn]=\"\r\n      slotGridSpan(informativeState().config.layout.tableSpan)\r\n    \"\r\n  >\r\n    <mt-card>\r\n      @if (\r\n        informativeState().loading &&\r\n        !informativeState().dashboardData?.charts?.length\r\n      ) {\r\n        <div class=\"flex flex-col gap-3 py-3\">\r\n          <p-skeleton height=\"6rem\" />\r\n          <p-skeleton height=\"12rem\" />\r\n          <p-skeleton height=\"12rem\" />\r\n        </div>\r\n      } @else if (informativeState().error) {\r\n        <div\r\n          class=\"rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-700\"\r\n        >\r\n          {{ informativeState().error }}\r\n        </div>\r\n      } @else if (!informativeState().dashboardData?.charts?.length) {\r\n        <div class=\"p-6 text-center text-gray-400\">\r\n          {{\r\n            \"components.clientComponents.list.noInformativeDashboard\"\r\n              | transloco\r\n          }}\r\n        </div>\r\n      } @else {\r\n        <div class=\"min-h-[420px]\">\r\n          <mt-dashboard-viewer\r\n            [isPage]=\"false\"\r\n            [showFilters]=\"false\"\r\n            [dashboardData]=\"informativeState().dashboardData\"\r\n            [extraFilters]=\"dashboardExtraFilters()\"\r\n          />\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  </div>\r\n\r\n  @if (informativeState().config.contentEnd) {\r\n    <div\r\n      [style.gridColumn]=\"\r\n        slotGridSpan(informativeState().config.layout.endSpan)\r\n      \"\r\n    >\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"informativeState().config.contentEnd\"\r\n        [ngTemplateOutletContext]=\"templateContext(informativeState())\"\r\n      />\r\n    </div>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: DashboardViewer, selector: "mt-dashboard-viewer", inputs: ["isPage", "pageTitle", "backButton", "pageId", "dashboardData", "chartsData", "dialogsData", "filtersData", "extraFilters", "lookups", "statuses", "showFilters", "showFilterTrigger", "ignoreQueryFilter"], outputs: ["pageLoaded", "onBack", "chartClick"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i2.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: ClientListInformativeView, isStandalone: true, selector: "mt-client-list-informative-view", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"grid gap-4\" [style.gridTemplateColumns]=\"gridTemplateColumns\">\r\n  @if (informativeState().config.contentStart) {\r\n    <div\r\n      [style.gridColumn]=\"\r\n        slotGridSpan(informativeState().config.layout.startSpan)\r\n      \"\r\n    >\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"informativeState().config.contentStart\"\r\n        [ngTemplateOutletContext]=\"templateContext(informativeState())\"\r\n      />\r\n    </div>\r\n  }\r\n\r\n  <div\r\n    [style.gridColumn]=\"\r\n      slotGridSpan(informativeState().config.layout.tableSpan)\r\n    \"\r\n  >\r\n    <mt-card>\r\n      @if (\r\n        informativeState().loading &&\r\n        !informativeState().dashboardData?.charts?.length\r\n      ) {\r\n        <div class=\"flex flex-col gap-3 py-3\">\r\n          <p-skeleton height=\"6rem\" />\r\n          <p-skeleton height=\"12rem\" />\r\n          <p-skeleton height=\"12rem\" />\r\n        </div>\r\n      } @else if (informativeState().error) {\r\n        <div\r\n          class=\"rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-700\"\r\n        >\r\n          {{ informativeState().error }}\r\n        </div>\r\n      } @else if (!informativeState().dashboardData?.charts?.length) {\r\n        <div class=\"p-6 text-center text-gray-400\">\r\n          {{\r\n            \"components.clientComponents.list.noInformativeDashboard\"\r\n              | transloco\r\n          }}\r\n        </div>\r\n      } @else {\r\n        <div class=\"min-h-[420px]\">\r\n          <mt-dashboard-viewer\r\n            [isPage]=\"false\"\r\n            [showFilters]=\"false\"\r\n            [dashboardData]=\"informativeState().dashboardData\"\r\n            [extraFilters]=\"dashboardExtraFilters()\"\r\n          />\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  </div>\r\n\r\n  @if (informativeState().config.contentEnd) {\r\n    <div\r\n      [style.gridColumn]=\"\r\n        slotGridSpan(informativeState().config.layout.endSpan)\r\n      \"\r\n    >\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"informativeState().config.contentEnd\"\r\n        [ngTemplateOutletContext]=\"templateContext(informativeState())\"\r\n      />\r\n    </div>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: DashboardViewer, selector: "mt-dashboard-viewer", inputs: ["isPage", "pageTitle", "backButton", "pageId", "dashboardData", "chartsData", "dialogsData", "filtersData", "extraFilters", "lookups", "statuses", "levelsSchema", "levelLogsResolver", "showFilters", "showFilterTrigger", "ignoreQueryFilter"], outputs: ["pageLoaded", "onBack", "chartClick"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i2.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ClientListInformativeView, decorators: [{
             type: Component,
             args: [{ selector: 'mt-client-list-informative-view', standalone: true, imports: [CommonModule, Card, DashboardViewer, SkeletonModule, TranslocoPipe], template: "<div class=\"grid gap-4\" [style.gridTemplateColumns]=\"gridTemplateColumns\">\r\n  @if (informativeState().config.contentStart) {\r\n    <div\r\n      [style.gridColumn]=\"\r\n        slotGridSpan(informativeState().config.layout.startSpan)\r\n      \"\r\n    >\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"informativeState().config.contentStart\"\r\n        [ngTemplateOutletContext]=\"templateContext(informativeState())\"\r\n      />\r\n    </div>\r\n  }\r\n\r\n  <div\r\n    [style.gridColumn]=\"\r\n      slotGridSpan(informativeState().config.layout.tableSpan)\r\n    \"\r\n  >\r\n    <mt-card>\r\n      @if (\r\n        informativeState().loading &&\r\n        !informativeState().dashboardData?.charts?.length\r\n      ) {\r\n        <div class=\"flex flex-col gap-3 py-3\">\r\n          <p-skeleton height=\"6rem\" />\r\n          <p-skeleton height=\"12rem\" />\r\n          <p-skeleton height=\"12rem\" />\r\n        </div>\r\n      } @else if (informativeState().error) {\r\n        <div\r\n          class=\"rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-700\"\r\n        >\r\n          {{ informativeState().error }}\r\n        </div>\r\n      } @else if (!informativeState().dashboardData?.charts?.length) {\r\n        <div class=\"p-6 text-center text-gray-400\">\r\n          {{\r\n            \"components.clientComponents.list.noInformativeDashboard\"\r\n              | transloco\r\n          }}\r\n        </div>\r\n      } @else {\r\n        <div class=\"min-h-[420px]\">\r\n          <mt-dashboard-viewer\r\n            [isPage]=\"false\"\r\n            [showFilters]=\"false\"\r\n            [dashboardData]=\"informativeState().dashboardData\"\r\n            [extraFilters]=\"dashboardExtraFilters()\"\r\n          />\r\n        </div>\r\n      }\r\n    </mt-card>\r\n  </div>\r\n\r\n  @if (informativeState().config.contentEnd) {\r\n    <div\r\n      [style.gridColumn]=\"\r\n        slotGridSpan(informativeState().config.layout.endSpan)\r\n      \"\r\n    >\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"informativeState().config.contentEnd\"\r\n        [ngTemplateOutletContext]=\"templateContext(informativeState())\"\r\n      />\r\n    </div>\r\n  }\r\n</div>\r\n" }]
         }], propDecorators: { state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: true }] }] } });
 
+/**
+ * Below this many lists the filter box is noise — the whole rail fits on
+ * screen and scanning it is faster than typing.
+ */
+const FILTER_VISIBLE_FROM = 6;
+/**
+ * The master rail of the client list's master/detail layout: one row per
+ * configured list, with its record count, and the selected row highlighted.
+ *
+ * Purely presentational — it renders the entries it is handed and emits the
+ * key that was picked. Selection, persistence and loading all stay in
+ * `ClientList`.
+ *
+ * Two shapes, picked by `ClientList` from the width it measures on itself and
+ * handed down as `.mt-cl-nav--rail`: the vertical rail when there is room for
+ * a second column, a horizontally scrolling strip of chips above the content
+ * when there is not. Never keyed off the viewport — see the stylesheet.
+ */
+class ClientListNavigator {
+    host = inject((ElementRef));
+    entries = input.required(...(ngDevMode ? [{ debugName: "entries" }] : /* istanbul ignore next */ []));
+    activeKey = input(null, ...(ngDevMode ? [{ debugName: "activeKey" }] : /* istanbul ignore next */ []));
+    /** Id of the content pane, for each tab's `aria-controls`. */
+    panelId = input('', ...(ngDevMode ? [{ debugName: "panelId" }] : /* istanbul ignore next */ []));
+    selected = output();
+    filterTerm = signal('', ...(ngDevMode ? [{ debugName: "filterTerm" }] : /* istanbul ignore next */ []));
+    showFilter = computed(() => this.entries().length >= FILTER_VISIBLE_FROM, ...(ngDevMode ? [{ debugName: "showFilter" }] : /* istanbul ignore next */ []));
+    visibleEntries = computed(() => {
+        const term = this.filterTerm().trim().toLocaleLowerCase();
+        const entries = this.entries();
+        if (!term || !this.showFilter())
+            return entries;
+        return entries.filter((entry) => entry.label.toLocaleLowerCase().includes(term));
+    }, ...(ngDevMode ? [{ debugName: "visibleEntries" }] : /* istanbul ignore next */ []));
+    onFilterChange(value) {
+        this.filterTerm.set(value ?? '');
+    }
+    /**
+     * Roving arrow-key navigation across the rail, per the ARIA tabs pattern.
+     * Up/Down always work; Left/Right too (the rail is horizontal in a narrow
+     * container) and swap meaning under RTL, where "next" is to the left.
+     */
+    onKeydown(event) {
+        const entries = this.visibleEntries();
+        if (entries.length === 0)
+            return;
+        const rtl = this.isRtl();
+        let step;
+        let absolute = null;
+        switch (event.key) {
+            case 'ArrowDown':
+                step = 1;
+                break;
+            case 'ArrowUp':
+                step = -1;
+                break;
+            case 'ArrowRight':
+                step = rtl ? -1 : 1;
+                break;
+            case 'ArrowLeft':
+                step = rtl ? 1 : -1;
+                break;
+            case 'Home':
+                step = 0;
+                absolute = 0;
+                break;
+            case 'End':
+                step = 0;
+                absolute = entries.length - 1;
+                break;
+            default:
+                return;
+        }
+        const current = entries.findIndex((entry) => entry.key === this.activeKey());
+        const from = current === -1 ? 0 : current;
+        const next = absolute ?? (from + step + entries.length) % entries.length;
+        event.preventDefault();
+        this.selected.emit(entries[next].key);
+        this.focusEntry(next);
+    }
+    focusEntry(index) {
+        // The freshly selected row is re-rendered before it can take focus, so
+        // hand the browser one frame to swap the roving tabindex over.
+        requestAnimationFrame(() => {
+            const element = this.host.nativeElement.querySelector(`[data-nav-index="${index}"]`);
+            element?.focus();
+        });
+    }
+    isRtl() {
+        if (typeof getComputedStyle !== 'function')
+            return false;
+        return (getComputedStyle(this.host.nativeElement).direction ===
+            'rtl');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ClientListNavigator, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: ClientListNavigator, isStandalone: true, selector: "mt-client-list-navigator", inputs: { entries: { classPropertyName: "entries", publicName: "entries", isSignal: true, isRequired: true, transformFunction: null }, activeKey: { classPropertyName: "activeKey", publicName: "activeKey", isSignal: true, isRequired: false, transformFunction: null }, panelId: { classPropertyName: "panelId", publicName: "panelId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, ngImport: i0, template: "@if (showFilter()) {\n  <div class=\"mt-cl-nav__filter\">\n    <mt-text-field\n      [field]=\"false\"\n      [ngModel]=\"filterTerm()\"\n      (ngModelChange)=\"onFilterChange($event)\"\n      icon=\"general.search-lg\"\n      [placeholder]=\"\n        'components.clientComponents.list.navigator.filter' | transloco\n      \"\n    />\n  </div>\n}\n\n<div\n  class=\"mt-cl-nav__list\"\n  role=\"tablist\"\n  [attr.aria-label]=\"\n    'components.clientComponents.list.navigator.label' | transloco\n  \"\n  (keydown)=\"onKeydown($event)\"\n>\n  @for (entry of visibleEntries(); track entry.key; let i = $index) {\n    <button\n      type=\"button\"\n      role=\"tab\"\n      class=\"mt-cl-nav__item\"\n      [class.mt-cl-nav__item--active]=\"entry.key === activeKey()\"\n      [attr.aria-selected]=\"entry.key === activeKey()\"\n      [attr.tabindex]=\"entry.key === activeKey() ? 0 : -1\"\n      [attr.aria-controls]=\"panelId() || null\"\n      [attr.data-nav-index]=\"i\"\n      [title]=\"entry.label\"\n      (click)=\"selected.emit(entry.key)\"\n    >\n      <span class=\"mt-cl-nav__label\">{{ entry.label }}</span>\n\n      @if (entry.hasError) {\n        <mt-icon\n          class=\"mt-cl-nav__error\"\n          icon=\"alert.alert-circle\"\n          role=\"img\"\n          [attr.aria-label]=\"\n            'components.clientComponents.list.navigator.loadFailed' | transloco\n          \"\n        />\n      } @else if (entry.loading && entry.count === null) {\n        <span\n          class=\"mt-cl-nav__count mt-cl-nav__count--loading\"\n          aria-hidden=\"true\"\n        ></span>\n      } @else if (entry.count !== null) {\n        <span\n          class=\"mt-cl-nav__count\"\n          [class.mt-cl-nav__count--empty]=\"entry.count === 0\"\n        >\n          {{ entry.count === 0 ? \"\u2013\" : entry.count }}\n        </span>\n      }\n    </button>\n  } @empty {\n    <p class=\"mt-cl-nav__empty\">\n      {{ \"components.clientComponents.list.navigator.noMatches\" | transloco }}\n    </p>\n  }\n</div>\n\n<p class=\"mt-cl-nav__summary\">\n  {{\n    \"components.clientComponents.list.navigator.summary\"\n      | transloco: { count: entries().length }\n  }}\n</p>\n", styles: [":host{display:block;min-width:0}.mt-cl-nav__filter{display:none;margin-block-end:.5rem}.mt-cl-nav__filter mt-text-field{grid-template-columns:minmax(0,1fr)}.mt-cl-nav__list{display:flex;flex-direction:row;gap:.375rem;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin;padding-block-end:.375rem}.mt-cl-nav__item{display:flex;flex:0 0 auto;align-items:center;gap:.5rem;min-width:0;padding:.4375rem .75rem;border:1px solid var(--p-content-border-color, #e5e7eb);border-radius:999px;background:var(--p-content-background, #ffffff);color:var(--p-text-muted-color, #6b7280);font-size:.875rem;font-weight:500;line-height:1.25rem;text-align:start;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease}.mt-cl-nav__item:hover{color:var(--p-text-color, #111827);background:color-mix(in srgb,var(--p-primary-color, #2aaec0) 8%,var(--p-content-background, #ffffff))}.mt-cl-nav__item:focus-visible{outline:2px solid var(--p-primary-color, #2aaec0);outline-offset:2px}.mt-cl-nav__item--active,.mt-cl-nav__item--active:hover{border-color:color-mix(in srgb,var(--p-primary-color, #2aaec0) 45%,transparent);background:color-mix(in srgb,var(--p-primary-color, #2aaec0) 12%,var(--p-content-background, #ffffff));color:var(--p-primary-color, #2aaec0);font-weight:600}.mt-cl-nav__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mt-cl-nav__count{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;min-width:1.75rem;height:1.25rem;padding-inline:.375rem;border-radius:999px;background:var(--p-surface-100, #f3f4f6);color:var(--p-text-muted-color, #6b7280);font-size:.75rem;font-weight:600;font-variant-numeric:tabular-nums}.mt-cl-nav__count--empty{background:transparent;color:var(--p-text-muted-color, #9ca3af);font-weight:500}.mt-cl-nav__count--loading{animation:mt-cl-nav-pulse 1.4s ease-in-out infinite}.mt-cl-nav__item--active .mt-cl-nav__count{background:color-mix(in srgb,var(--p-primary-color, #2aaec0) 20%,transparent);color:var(--p-primary-color, #2aaec0)}.mt-cl-nav__error{flex:0 0 auto;color:var(--p-red-500, #ef4444)}.mt-cl-nav__empty,.mt-cl-nav__summary{margin:0;color:var(--p-text-muted-color, #6b7280);font-size:.75rem}.mt-cl-nav__empty{padding:.75rem .25rem}.mt-cl-nav__summary{display:none}@keyframes mt-cl-nav-pulse{0%,to{opacity:1}50%{opacity:.45}}@media(prefers-reduced-motion:reduce){.mt-cl-nav__item{transition:none}.mt-cl-nav__count--loading{animation:none}}:host(.mt-cl-nav--rail) .mt-cl-nav__filter{display:block}:host(.mt-cl-nav--rail) .mt-cl-nav__list{flex-direction:column;gap:.125rem;overflow-x:visible;overflow-y:auto;max-height:32rem;padding-block-end:0}:host(.mt-cl-nav--rail) .mt-cl-nav__item{flex:0 0 auto;width:100%;padding:.625rem .75rem;border:0;border-inline-start:3px solid transparent;border-radius:0;border-start-end-radius:.375rem;border-end-end-radius:.375rem;background:transparent}:host(.mt-cl-nav--rail) .mt-cl-nav__item:hover{background:color-mix(in srgb,var(--p-primary-color, #2aaec0) 6%,transparent)}:host(.mt-cl-nav--rail) .mt-cl-nav__item--active,:host(.mt-cl-nav--rail) .mt-cl-nav__item--active:hover{border-inline-start-color:var(--p-primary-color, #2aaec0);background:color-mix(in srgb,var(--p-primary-color, #2aaec0) 10%,transparent)}:host(.mt-cl-nav--rail) .mt-cl-nav__label{flex:1 1 auto}:host(.mt-cl-nav--rail) .mt-cl-nav__summary{display:block;margin-block-start:.75rem;padding-block-start:.75rem;padding-inline:.75rem;border-block-start:1px solid var(--p-content-border-color, #e5e7eb)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "maxLength", "icon", "iconPosition"] }, { kind: "pipe", type: i4.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ClientListNavigator, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-client-list-navigator', standalone: true, imports: [FormsModule, TranslocoModule, Icon, TextField], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (showFilter()) {\n  <div class=\"mt-cl-nav__filter\">\n    <mt-text-field\n      [field]=\"false\"\n      [ngModel]=\"filterTerm()\"\n      (ngModelChange)=\"onFilterChange($event)\"\n      icon=\"general.search-lg\"\n      [placeholder]=\"\n        'components.clientComponents.list.navigator.filter' | transloco\n      \"\n    />\n  </div>\n}\n\n<div\n  class=\"mt-cl-nav__list\"\n  role=\"tablist\"\n  [attr.aria-label]=\"\n    'components.clientComponents.list.navigator.label' | transloco\n  \"\n  (keydown)=\"onKeydown($event)\"\n>\n  @for (entry of visibleEntries(); track entry.key; let i = $index) {\n    <button\n      type=\"button\"\n      role=\"tab\"\n      class=\"mt-cl-nav__item\"\n      [class.mt-cl-nav__item--active]=\"entry.key === activeKey()\"\n      [attr.aria-selected]=\"entry.key === activeKey()\"\n      [attr.tabindex]=\"entry.key === activeKey() ? 0 : -1\"\n      [attr.aria-controls]=\"panelId() || null\"\n      [attr.data-nav-index]=\"i\"\n      [title]=\"entry.label\"\n      (click)=\"selected.emit(entry.key)\"\n    >\n      <span class=\"mt-cl-nav__label\">{{ entry.label }}</span>\n\n      @if (entry.hasError) {\n        <mt-icon\n          class=\"mt-cl-nav__error\"\n          icon=\"alert.alert-circle\"\n          role=\"img\"\n          [attr.aria-label]=\"\n            'components.clientComponents.list.navigator.loadFailed' | transloco\n          \"\n        />\n      } @else if (entry.loading && entry.count === null) {\n        <span\n          class=\"mt-cl-nav__count mt-cl-nav__count--loading\"\n          aria-hidden=\"true\"\n        ></span>\n      } @else if (entry.count !== null) {\n        <span\n          class=\"mt-cl-nav__count\"\n          [class.mt-cl-nav__count--empty]=\"entry.count === 0\"\n        >\n          {{ entry.count === 0 ? \"\u2013\" : entry.count }}\n        </span>\n      }\n    </button>\n  } @empty {\n    <p class=\"mt-cl-nav__empty\">\n      {{ \"components.clientComponents.list.navigator.noMatches\" | transloco }}\n    </p>\n  }\n</div>\n\n<p class=\"mt-cl-nav__summary\">\n  {{\n    \"components.clientComponents.list.navigator.summary\"\n      | transloco: { count: entries().length }\n  }}\n</p>\n", styles: [":host{display:block;min-width:0}.mt-cl-nav__filter{display:none;margin-block-end:.5rem}.mt-cl-nav__filter mt-text-field{grid-template-columns:minmax(0,1fr)}.mt-cl-nav__list{display:flex;flex-direction:row;gap:.375rem;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin;padding-block-end:.375rem}.mt-cl-nav__item{display:flex;flex:0 0 auto;align-items:center;gap:.5rem;min-width:0;padding:.4375rem .75rem;border:1px solid var(--p-content-border-color, #e5e7eb);border-radius:999px;background:var(--p-content-background, #ffffff);color:var(--p-text-muted-color, #6b7280);font-size:.875rem;font-weight:500;line-height:1.25rem;text-align:start;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease}.mt-cl-nav__item:hover{color:var(--p-text-color, #111827);background:color-mix(in srgb,var(--p-primary-color, #2aaec0) 8%,var(--p-content-background, #ffffff))}.mt-cl-nav__item:focus-visible{outline:2px solid var(--p-primary-color, #2aaec0);outline-offset:2px}.mt-cl-nav__item--active,.mt-cl-nav__item--active:hover{border-color:color-mix(in srgb,var(--p-primary-color, #2aaec0) 45%,transparent);background:color-mix(in srgb,var(--p-primary-color, #2aaec0) 12%,var(--p-content-background, #ffffff));color:var(--p-primary-color, #2aaec0);font-weight:600}.mt-cl-nav__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mt-cl-nav__count{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;min-width:1.75rem;height:1.25rem;padding-inline:.375rem;border-radius:999px;background:var(--p-surface-100, #f3f4f6);color:var(--p-text-muted-color, #6b7280);font-size:.75rem;font-weight:600;font-variant-numeric:tabular-nums}.mt-cl-nav__count--empty{background:transparent;color:var(--p-text-muted-color, #9ca3af);font-weight:500}.mt-cl-nav__count--loading{animation:mt-cl-nav-pulse 1.4s ease-in-out infinite}.mt-cl-nav__item--active .mt-cl-nav__count{background:color-mix(in srgb,var(--p-primary-color, #2aaec0) 20%,transparent);color:var(--p-primary-color, #2aaec0)}.mt-cl-nav__error{flex:0 0 auto;color:var(--p-red-500, #ef4444)}.mt-cl-nav__empty,.mt-cl-nav__summary{margin:0;color:var(--p-text-muted-color, #6b7280);font-size:.75rem}.mt-cl-nav__empty{padding:.75rem .25rem}.mt-cl-nav__summary{display:none}@keyframes mt-cl-nav-pulse{0%,to{opacity:1}50%{opacity:.45}}@media(prefers-reduced-motion:reduce){.mt-cl-nav__item{transition:none}.mt-cl-nav__count--loading{animation:none}}:host(.mt-cl-nav--rail) .mt-cl-nav__filter{display:block}:host(.mt-cl-nav--rail) .mt-cl-nav__list{flex-direction:column;gap:.125rem;overflow-x:visible;overflow-y:auto;max-height:32rem;padding-block-end:0}:host(.mt-cl-nav--rail) .mt-cl-nav__item{flex:0 0 auto;width:100%;padding:.625rem .75rem;border:0;border-inline-start:3px solid transparent;border-radius:0;border-start-end-radius:.375rem;border-end-end-radius:.375rem;background:transparent}:host(.mt-cl-nav--rail) .mt-cl-nav__item:hover{background:color-mix(in srgb,var(--p-primary-color, #2aaec0) 6%,transparent)}:host(.mt-cl-nav--rail) .mt-cl-nav__item--active,:host(.mt-cl-nav--rail) .mt-cl-nav__item--active:hover{border-inline-start-color:var(--p-primary-color, #2aaec0);background:color-mix(in srgb,var(--p-primary-color, #2aaec0) 10%,transparent)}:host(.mt-cl-nav--rail) .mt-cl-nav__label{flex:1 1 auto}:host(.mt-cl-nav--rail) .mt-cl-nav__summary{display:block;margin-block-start:.75rem;padding-block-start:.75rem;padding-inline:.75rem;border-block-start:1px solid var(--p-content-border-color, #e5e7eb)}\n"] }]
+        }], propDecorators: { entries: [{ type: i0.Input, args: [{ isSignal: true, alias: "entries", required: true }] }], activeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeKey", required: false }] }], panelId: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelId", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
+
 function mergeRuntimeFilters(configured = [], runtime = {}, columns = []) {
     const filters = [...configured];
     for (const [rawKey, rawValue] of Object.entries(runtime)) {
@@ -1774,21 +1877,86 @@ const DEFAULT_COLLAPSE_ICON = 'arrow.chevron-up';
 const DEFAULT_EXPAND_ICON = 'arrow.chevron-down';
 const DEFAULT_SIDE_CONTENT_SPAN = 3;
 const DEFAULT_GRID_COLUMNS = 12;
+/**
+ * Host width, in px, from which the navigator switches from a chip strip
+ * above the content to a rail beside it. Below this a 16.5rem rail plus a
+ * table leaves the table too narrow to be worth the split.
+ */
+const RAIL_LAYOUT_MIN_WIDTH = 896;
+/** localStorage prefix for the per-group remembered selection. */
+const ACTIVE_KEY_STORAGE_PREFIX = 'mt-client-list:active:';
 const ESCALATION_STATE_KEY = 'escalation';
 const VIEW_ESCALATION_ACTION_KEY = 'viewEscalation';
 const VIEW_ESCALATION_OPERATION_KEY = 'ViewEscalation';
+/** Makes each instance's `aria-controls` target unique on the page. */
+let panelIdCounter = 0;
 class ClientList {
     api = inject(ClientListApiService);
     state = inject(ClientListStateService);
     runtimeActions = inject(ClientListRuntimeActionsService);
     runtimeRunner = inject(RuntimeActionRunner);
     transloco = inject(TranslocoService);
+    host = inject(ElementRef);
     configurations = input.required(...(ngDevMode ? [{ debugName: "configurations" }] : /* istanbul ignore next */ []));
     defaultTake = input(DEFAULT_SERVER_PAGE_SIZE, ...(ngDevMode ? [{ debugName: "defaultTake" }] : /* istanbul ignore next */ []));
+    /**
+     * Arrangement for MORE THAN ONE configuration — see
+     * {@link ClientListMultiLayout}. A single configuration ignores it and
+     * renders exactly as it always has.
+     */
+    multiLayout = input('navigator', ...(ngDevMode ? [{ debugName: "multiLayout" }] : /* istanbul ignore next */ []));
     loaded = output();
     errored = output();
     itemClicked = output();
+    /** The list the navigator switched to. Never fires in `stacked`. */
+    activeListChanged = output();
     items = this.state.items;
+    /** Ties each rail tab to the pane it controls, for screen readers. */
+    panelId = `mt-client-list-panel-${++panelIdCounter}`;
+    activeKeyOverride = signal(null, ...(ngDevMode ? [{ debugName: "activeKeyOverride" }] : /* istanbul ignore next */ []));
+    railLayout = signal(false, ...(ngDevMode ? [{ debugName: "railLayout" }] : /* istanbul ignore next */ []));
+    resizeObserver = null;
+    useNavigator = computed(() => this.multiLayout() === 'navigator' && this.items().length > 1, ...(ngDevMode ? [{ debugName: "useNavigator" }] : /* istanbul ignore next */ []));
+    isRailLayout = this.railLayout.asReadonly();
+    /**
+     * The selected list. Falls back to the first one whenever the override is
+     * unset or points at a list the host has since removed — so a config change
+     * can never leave the pane blank.
+     */
+    activeKey = computed(() => {
+        const items = this.items();
+        if (items.length === 0)
+            return null;
+        const override = this.activeKeyOverride();
+        return override && items.some((item) => item.key === override)
+            ? override
+            : items[0].key;
+    }, ...(ngDevMode ? [{ debugName: "activeKey" }] : /* istanbul ignore next */ []));
+    /**
+     * Identity of the current SET of lists. A string so it settles: every load
+     * tick rebuilds the items array, but the signature only changes when the
+     * host adds, removes or re-keys a list.
+     */
+    groupSignature = computed(() => this.items()
+        .map((item) => item.key)
+        .join(''), ...(ngDevMode ? [{ debugName: "groupSignature" }] : /* istanbul ignore next */ []));
+    activeItem = computed(() => {
+        const key = this.activeKey();
+        return key ? (this.state.itemsByKey()[key] ?? null) : null;
+    }, ...(ngDevMode ? [{ debugName: "activeItem" }] : /* istanbul ignore next */ []));
+    navigatorEntries = computed(() => this.items().map((item) => ({
+        key: item.key,
+        label: item.title || item.moduleKey || this.defaultTitle(item),
+        // Informative lists count charts, not records — a number there would
+        // read as a record count next to every other row in the rail. A list
+        // still loading its first page has no count yet either; `0` would
+        // claim it is empty.
+        count: item.type === 'informative' || (item.loading && item.totalCount === 0)
+            ? null
+            : item.totalCount,
+        loading: item.loading,
+        hasError: !!item.error,
+    })), ...(ngDevMode ? [{ debugName: "navigatorEntries" }] : /* istanbul ignore next */ []));
     subscriptions = new Map();
     inFlightRequestSignatures = new Map();
     fulfilledRequestSignatures = new Map();
@@ -1803,6 +1971,122 @@ class ClientList {
                 });
             });
         });
+        effect(() => {
+            // Depends on the signature, not on `items()` itself: every load tick
+            // produces a fresh items array, and re-reading storage on each one
+            // would be pure waste. The string only changes when the set of lists
+            // does, which is exactly when the remembered selection is worth
+            // consulting again.
+            this.groupSignature();
+            untracked(() => this.restoreActiveKey(this.items().map((item) => item.key)));
+        });
+        this.observeHostWidth();
+    }
+    /**
+     * Switches the pane. Remembered per list group, so coming back to a
+     * workspace tab lands on the module you were last reading rather than
+     * resetting to the first one.
+     */
+    setActiveKey(key) {
+        if (key === this.activeKey())
+            return;
+        if (!this.state.itemsByKey()[key])
+            return;
+        this.activeKeyOverride.set(key);
+        this.persistActiveKey(key);
+        this.activeListChanged.emit(key);
+    }
+    /**
+     * Subtitle under the pane title: the load failure if there is one, the
+     * record count once it is known, nothing while the first page is still in
+     * flight (a "0 records" that flips to "12 records" reads as a bug).
+     */
+    paneMeta(item) {
+        if (item.error)
+            return item.error;
+        if (item.type === 'informative')
+            return '';
+        if (item.loading && item.totalCount === 0)
+            return '';
+        if (item.totalCount === 0) {
+            return this.transloco.translate('components.clientComponents.list.navigator.noRecords');
+        }
+        return this.transloco.translate(item.totalCount === 1
+            ? 'components.clientComponents.list.navigator.oneRecord'
+            : 'components.clientComponents.list.navigator.records', { count: item.totalCount });
+    }
+    /**
+     * Both layouts render a list body through one `ng-template`, whose context
+     * is untyped. Re-narrowing here keeps strict template checking on every
+     * binding inside it instead of silently degrading them to `any`.
+     */
+    asItem(value) {
+        return value;
+    }
+    /**
+     * Rail beside the content, or chip strip above it. Measured from the host
+     * rather than the viewport: this component renders inside an app shell, so
+     * viewport width says nothing about the room it actually has.
+     */
+    observeHostWidth() {
+        if (typeof ResizeObserver === 'undefined') {
+            // No measurement available (SSR/tests): the single-column chip strip is
+            // the layout that works at any width.
+            return;
+        }
+        const element = this.host.nativeElement;
+        this.resizeObserver = new ResizeObserver((entries) => {
+            const width = entries[0]?.contentRect.width ?? 0;
+            // Only internal layout changes, so this can't feed its own next
+            // notification — the host's width stays whatever its parent gives it.
+            this.railLayout.set(width >= RAIL_LAYOUT_MIN_WIDTH);
+        });
+        this.resizeObserver.observe(element);
+    }
+    restoreActiveKey(keys) {
+        if (keys.length < 2)
+            return;
+        const override = this.activeKeyOverride();
+        if (override && keys.includes(override))
+            return;
+        const stored = this.readStoredActiveKey(this.groupStorageKey(keys));
+        if (stored && keys.includes(stored)) {
+            this.activeKeyOverride.set(stored);
+        }
+    }
+    /**
+     * Identifies this exact set of lists, so the remembered selection follows
+     * the workspace tab it belongs to and a different tab starts fresh. Hashed
+     * because the keys themselves carry ids and filters and get long.
+     */
+    groupStorageKey(keys) {
+        const source = [...keys].sort().join('|');
+        let hash = 5381;
+        for (let i = 0; i < source.length; i++) {
+            hash = ((hash << 5) + hash + source.charCodeAt(i)) | 0;
+        }
+        return `${ACTIVE_KEY_STORAGE_PREFIX}${(hash >>> 0).toString(36)}`;
+    }
+    readStoredActiveKey(storageKey) {
+        try {
+            return globalThis.localStorage?.getItem(storageKey) ?? null;
+        }
+        catch {
+            // Storage disabled (private mode, blocked cookies) — selection just
+            // won't survive a reload.
+            return null;
+        }
+    }
+    persistActiveKey(key) {
+        const keys = this.items().map((item) => item.key);
+        if (keys.length < 2)
+            return;
+        try {
+            globalThis.localStorage?.setItem(this.groupStorageKey(keys), key);
+        }
+        catch {
+            /* see readStoredActiveKey */
+        }
     }
     onLazyLoad(itemKey, event) {
         const item = this.state.itemsByKey()[itemKey];
@@ -2147,6 +2431,8 @@ class ClientList {
             : 'components.clientComponents.list.table');
     }
     ngOnDestroy() {
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = null;
         this.subscriptions.forEach((sub) => sub.unsubscribe());
         this.subscriptions.clear();
         this.rowActionsLoadingFnCache.clear();
@@ -2669,11 +2955,11 @@ class ClientList {
         return mergeRuntimeFilters(config.filters, this.runtimeFilters.get(key), this.state.itemsByKey()[key]?.columns);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ClientList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: ClientList, isStandalone: true, selector: "mt-client-list", inputs: { configurations: { classPropertyName: "configurations", publicName: "configurations", isSignal: true, isRequired: true, transformFunction: null }, defaultTake: { classPropertyName: "defaultTake", publicName: "defaultTake", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loaded: "loaded", errored: "errored", itemClicked: "itemClicked" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: ClientList, isStandalone: true, selector: "mt-client-list", inputs: { configurations: { classPropertyName: "configurations", publicName: "configurations", isSignal: true, isRequired: true, transformFunction: null }, defaultTake: { classPropertyName: "defaultTake", publicName: "defaultTake", isSignal: true, isRequired: false, transformFunction: null }, multiLayout: { classPropertyName: "multiLayout", publicName: "multiLayout", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loaded: "loaded", errored: "errored", itemClicked: "itemClicked", activeListChanged: "activeListChanged" }, providers: [
             ClientListStateService,
             ClientListRuntimeActionsService,
             ClientListToolbarService,
-        ], ngImport: i0, template: "<div class=\"flex flex-col gap-4\">\r\n  @for (item of items(); track item.key) {\r\n    <section class=\"flex flex-col gap-4\">\r\n      @if (item.config.showHeader) {\r\n        <div class=\"flex w-full items-center gap-2\">\r\n          <div class=\"flex min-w-0 flex-1 items-center gap-2\">\r\n            @if (item.config.collapse.enabled) {\r\n              <mt-button\r\n                variant=\"text\"\r\n                severity=\"secondary\"\r\n                [icon]=\"\r\n                  item.expanded\r\n                    ? item.config.collapse.collapseIcon\r\n                    : item.config.collapse.expandIcon\r\n                \"\r\n                (onClick)=\"toggleExpanded(item.key)\"\r\n              />\r\n            }\r\n            <h3 class=\"m-0 text-lg font-semibold\">\r\n              {{ item.title || item.moduleKey || defaultTitle(item) }}\r\n            </h3>\r\n            @if (item.config.headerStart) {\r\n              <div class=\"flex items-center gap-2\">\r\n                <ng-container\r\n                  [ngTemplateOutlet]=\"item.config.headerStart\"\r\n                  [ngTemplateOutletContext]=\"templateContext(item)\"\r\n                />\r\n              </div>\r\n            }\r\n          </div>\r\n          @if (item.config.headerEnd) {\r\n            <div class=\"ml-auto flex shrink-0 items-center gap-2\">\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"item.config.headerEnd\"\r\n                [ngTemplateOutletContext]=\"templateContext(item)\"\r\n              />\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      @if (item.expanded || !item.config.collapse.enabled) {\r\n        @if (item.config.templateContent) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"item.config.templateContent\"\r\n            [ngTemplateOutletContext]=\"templateContext(item)\"\r\n          />\r\n        } @else if (item.type === \"informative\") {\r\n          <mt-client-list-informative-view [state]=\"item\" />\r\n        } @else if (item.areaType === \"table\") {\r\n          <mt-client-list-table-view\r\n            [state]=\"item\"\r\n            [rowActions]=\"rowActionsFor(item)\"\r\n            [actionShape]=\"item.config.actionShape\"\r\n            [rowActionsLoadingFn]=\"rowActionsLoadingFnFor(item)\"\r\n            (rowActionsRequested)=\"onRowActionsRequested(item, $event)\"\r\n            (lazyLoad)=\"onLazyLoad(item.key, $event)\"\r\n            (rowClick)=\"onTableRowClick(item, $event)\"\r\n          />\r\n        } @else {\r\n          <mt-client-list-cards-view\r\n            [state]=\"item\"\r\n            [rowActions]=\"rowActionsFor(item)\"\r\n            [rowActionsLoadingFn]=\"rowActionsLoadingFnFor(item)\"\r\n            (rowActionsRequested)=\"onRowActionsRequested(item, $event)\"\r\n            (lazyLoad)=\"onLazyLoad(item.key, $event)\"\r\n            (loadMore)=\"loadMoreCards(item.key)\"\r\n            (cardClick)=\"onCardClick(item, $event)\"\r\n          />\r\n        }\r\n      }\r\n    </section>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ClientListTableView, selector: "mt-client-list-table-view", inputs: ["state", "rowActions", "actionShape", "rowActionsLoadingFn"], outputs: ["lazyLoad", "rowClick", "rowActionsRequested"] }, { kind: "component", type: ClientListCardsView, selector: "mt-client-list-cards-view", inputs: ["state", "rowActions", "rowActionsLoadingFn"], outputs: ["lazyLoad", "loadMore", "cardClick", "rowActionsRequested"] }, { kind: "component", type: ClientListInformativeView, selector: "mt-client-list-informative-view", inputs: ["state"] }] });
+        ], ngImport: i0, template: "@if (useNavigator()) {\n  <!--\n    Master/detail: the rail lists every configured module, the pane renders\n    only the selected one. Deliberately NOT a hidden-but-mounted pane per\n    module \u2014 a seven-module workspace tab would otherwise mount seven tables,\n    each with its own virtual scroller and paginator, to show one.\n  -->\n  <div class=\"mt-cl-shell\" [class.mt-cl-shell--rail]=\"isRailLayout()\">\n    <mt-client-list-navigator\n      class=\"mt-cl-shell__rail\"\n      [class.mt-cl-nav--rail]=\"isRailLayout()\"\n      [entries]=\"navigatorEntries()\"\n      [activeKey]=\"activeKey()\"\n      [panelId]=\"panelId\"\n      (selected)=\"setActiveKey($event)\"\n    />\n\n    <div class=\"mt-cl-shell__pane\" role=\"tabpanel\" [id]=\"panelId\">\n      @if (activeItem(); as item) {\n        @if (item.config.showHeader) {\n          <div class=\"mt-cl-pane__header\">\n            <div class=\"mt-cl-pane__heading\">\n              <h3 class=\"mt-cl-pane__title\">\n                {{ item.title || item.moduleKey || defaultTitle(item) }}\n              </h3>\n              @if (paneMeta(item); as meta) {\n                <p\n                  class=\"mt-cl-pane__meta\"\n                  [class.mt-cl-pane__meta--error]=\"!!item.error\"\n                >\n                  {{ meta }}\n                </p>\n              }\n            </div>\n\n            @if (item.config.headerStart) {\n              <div class=\"mt-cl-pane__header-start\">\n                <ng-container\n                  [ngTemplateOutlet]=\"item.config.headerStart\"\n                  [ngTemplateOutletContext]=\"templateContext(item)\"\n                />\n              </div>\n            }\n\n            @if (item.config.headerEnd) {\n              <div class=\"mt-cl-pane__actions\">\n                <ng-container\n                  [ngTemplateOutlet]=\"item.config.headerEnd\"\n                  [ngTemplateOutletContext]=\"templateContext(item)\"\n                />\n              </div>\n            }\n          </div>\n        }\n\n        <ng-container\n          [ngTemplateOutlet]=\"itemContent\"\n          [ngTemplateOutletContext]=\"{ $implicit: item }\"\n        />\n      }\n    </div>\n  </div>\n} @else {\n  <div class=\"flex flex-col gap-4\">\n    @for (item of items(); track item.key) {\n      <section class=\"flex flex-col gap-4\">\n        @if (item.config.showHeader) {\n          <div class=\"flex w-full items-center gap-2\">\n            <div class=\"flex min-w-0 flex-1 items-center gap-2\">\n              @if (item.config.collapse.enabled) {\n                <mt-button\n                  variant=\"text\"\n                  severity=\"secondary\"\n                  [icon]=\"\n                    item.expanded\n                      ? item.config.collapse.collapseIcon\n                      : item.config.collapse.expandIcon\n                  \"\n                  (onClick)=\"toggleExpanded(item.key)\"\n                />\n              }\n              <h3 class=\"m-0 text-lg font-semibold\">\n                {{ item.title || item.moduleKey || defaultTitle(item) }}\n              </h3>\n              @if (item.config.headerStart) {\n                <div class=\"flex items-center gap-2\">\n                  <ng-container\n                    [ngTemplateOutlet]=\"item.config.headerStart\"\n                    [ngTemplateOutletContext]=\"templateContext(item)\"\n                  />\n                </div>\n              }\n            </div>\n            @if (item.config.headerEnd) {\n              <div class=\"ml-auto flex shrink-0 items-center gap-2\">\n                <ng-container\n                  [ngTemplateOutlet]=\"item.config.headerEnd\"\n                  [ngTemplateOutletContext]=\"templateContext(item)\"\n                />\n              </div>\n            }\n          </div>\n        }\n\n        @if (item.expanded || !item.config.collapse.enabled) {\n          <ng-container\n            [ngTemplateOutlet]=\"itemContent\"\n            [ngTemplateOutletContext]=\"{ $implicit: item }\"\n          />\n        }\n      </section>\n    }\n  </div>\n}\n\n<!--\n  The one place a list's body is described. Both layouts render through it so\n  the navigator pane and the stacked sections can never drift apart.\n-->\n<ng-template #itemContent let-rawItem>\n  @let item = asItem(rawItem);\n\n  @if (item.config.templateContent) {\n    <ng-container\n      [ngTemplateOutlet]=\"item.config.templateContent\"\n      [ngTemplateOutletContext]=\"templateContext(item)\"\n    />\n  } @else if (item.type === \"informative\") {\n    <mt-client-list-informative-view [state]=\"item\" />\n  } @else if (item.areaType === \"table\") {\n    <mt-client-list-table-view\n      [state]=\"item\"\n      [rowActions]=\"rowActionsFor(item)\"\n      [actionShape]=\"item.config.actionShape\"\n      [rowActionsLoadingFn]=\"rowActionsLoadingFnFor(item)\"\n      (rowActionsRequested)=\"onRowActionsRequested(item, $event)\"\n      (lazyLoad)=\"onLazyLoad(item.key, $event)\"\n      (rowClick)=\"onTableRowClick(item, $event)\"\n    />\n  } @else {\n    <mt-client-list-cards-view\n      [state]=\"item\"\n      [rowActions]=\"rowActionsFor(item)\"\n      [rowActionsLoadingFn]=\"rowActionsLoadingFnFor(item)\"\n      (rowActionsRequested)=\"onRowActionsRequested(item, $event)\"\n      (lazyLoad)=\"onLazyLoad(item.key, $event)\"\n      (loadMore)=\"loadMoreCards(item.key)\"\n      (cardClick)=\"onCardClick(item, $event)\"\n    />\n  }\n</ng-template>\n", styles: [".mt-cl-shell{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;align-items:start}.mt-cl-shell--rail{grid-template-columns:16.5rem minmax(0,1fr);gap:1.5rem}.mt-cl-shell--rail .mt-cl-shell__rail{padding-inline-end:1.25rem;border-inline-end:1px solid var(--p-content-border-color, #e5e7eb)}.mt-cl-shell__pane{display:flex;flex-direction:column;gap:1rem;min-width:0}.mt-cl-pane__header{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.75rem 1rem}.mt-cl-pane__heading{display:flex;flex-direction:column;gap:.125rem;min-width:0;flex:1 1 auto}.mt-cl-pane__title{margin:0;color:var(--p-text-color, #111827);font-size:1.25rem;font-weight:600;line-height:1.75rem;overflow-wrap:anywhere}.mt-cl-pane__meta{margin:0;color:var(--p-text-muted-color, #6b7280);font-size:.8125rem;line-height:1.25rem}.mt-cl-pane__meta--error{color:var(--p-red-500, #ef4444)}.mt-cl-pane__actions{display:flex;flex:0 0 auto;align-items:center;gap:.5rem;margin-inline-start:auto}.mt-cl-pane__header-start{display:flex;flex:0 0 auto;align-items:center;gap:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ClientListTableView, selector: "mt-client-list-table-view", inputs: ["state", "rowActions", "actionShape", "rowActionsLoadingFn"], outputs: ["lazyLoad", "rowClick", "rowActionsRequested"] }, { kind: "component", type: ClientListCardsView, selector: "mt-client-list-cards-view", inputs: ["state", "rowActions", "rowActionsLoadingFn"], outputs: ["lazyLoad", "loadMore", "cardClick", "rowActionsRequested"] }, { kind: "component", type: ClientListInformativeView, selector: "mt-client-list-informative-view", inputs: ["state"] }, { kind: "component", type: ClientListNavigator, selector: "mt-client-list-navigator", inputs: ["entries", "activeKey", "panelId"], outputs: ["selected"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ClientList, decorators: [{
             type: Component,
@@ -2683,12 +2969,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         ClientListTableView,
                         ClientListCardsView,
                         ClientListInformativeView,
+                        ClientListNavigator,
                     ], providers: [
                         ClientListStateService,
                         ClientListRuntimeActionsService,
                         ClientListToolbarService,
-                    ], template: "<div class=\"flex flex-col gap-4\">\r\n  @for (item of items(); track item.key) {\r\n    <section class=\"flex flex-col gap-4\">\r\n      @if (item.config.showHeader) {\r\n        <div class=\"flex w-full items-center gap-2\">\r\n          <div class=\"flex min-w-0 flex-1 items-center gap-2\">\r\n            @if (item.config.collapse.enabled) {\r\n              <mt-button\r\n                variant=\"text\"\r\n                severity=\"secondary\"\r\n                [icon]=\"\r\n                  item.expanded\r\n                    ? item.config.collapse.collapseIcon\r\n                    : item.config.collapse.expandIcon\r\n                \"\r\n                (onClick)=\"toggleExpanded(item.key)\"\r\n              />\r\n            }\r\n            <h3 class=\"m-0 text-lg font-semibold\">\r\n              {{ item.title || item.moduleKey || defaultTitle(item) }}\r\n            </h3>\r\n            @if (item.config.headerStart) {\r\n              <div class=\"flex items-center gap-2\">\r\n                <ng-container\r\n                  [ngTemplateOutlet]=\"item.config.headerStart\"\r\n                  [ngTemplateOutletContext]=\"templateContext(item)\"\r\n                />\r\n              </div>\r\n            }\r\n          </div>\r\n          @if (item.config.headerEnd) {\r\n            <div class=\"ml-auto flex shrink-0 items-center gap-2\">\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"item.config.headerEnd\"\r\n                [ngTemplateOutletContext]=\"templateContext(item)\"\r\n              />\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      @if (item.expanded || !item.config.collapse.enabled) {\r\n        @if (item.config.templateContent) {\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"item.config.templateContent\"\r\n            [ngTemplateOutletContext]=\"templateContext(item)\"\r\n          />\r\n        } @else if (item.type === \"informative\") {\r\n          <mt-client-list-informative-view [state]=\"item\" />\r\n        } @else if (item.areaType === \"table\") {\r\n          <mt-client-list-table-view\r\n            [state]=\"item\"\r\n            [rowActions]=\"rowActionsFor(item)\"\r\n            [actionShape]=\"item.config.actionShape\"\r\n            [rowActionsLoadingFn]=\"rowActionsLoadingFnFor(item)\"\r\n            (rowActionsRequested)=\"onRowActionsRequested(item, $event)\"\r\n            (lazyLoad)=\"onLazyLoad(item.key, $event)\"\r\n            (rowClick)=\"onTableRowClick(item, $event)\"\r\n          />\r\n        } @else {\r\n          <mt-client-list-cards-view\r\n            [state]=\"item\"\r\n            [rowActions]=\"rowActionsFor(item)\"\r\n            [rowActionsLoadingFn]=\"rowActionsLoadingFnFor(item)\"\r\n            (rowActionsRequested)=\"onRowActionsRequested(item, $event)\"\r\n            (lazyLoad)=\"onLazyLoad(item.key, $event)\"\r\n            (loadMore)=\"loadMoreCards(item.key)\"\r\n            (cardClick)=\"onCardClick(item, $event)\"\r\n          />\r\n        }\r\n      }\r\n    </section>\r\n  }\r\n</div>\r\n" }]
-        }], ctorParameters: () => [], propDecorators: { configurations: [{ type: i0.Input, args: [{ isSignal: true, alias: "configurations", required: true }] }], defaultTake: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultTake", required: false }] }], loaded: [{ type: i0.Output, args: ["loaded"] }], errored: [{ type: i0.Output, args: ["errored"] }], itemClicked: [{ type: i0.Output, args: ["itemClicked"] }] } });
+                    ], template: "@if (useNavigator()) {\n  <!--\n    Master/detail: the rail lists every configured module, the pane renders\n    only the selected one. Deliberately NOT a hidden-but-mounted pane per\n    module \u2014 a seven-module workspace tab would otherwise mount seven tables,\n    each with its own virtual scroller and paginator, to show one.\n  -->\n  <div class=\"mt-cl-shell\" [class.mt-cl-shell--rail]=\"isRailLayout()\">\n    <mt-client-list-navigator\n      class=\"mt-cl-shell__rail\"\n      [class.mt-cl-nav--rail]=\"isRailLayout()\"\n      [entries]=\"navigatorEntries()\"\n      [activeKey]=\"activeKey()\"\n      [panelId]=\"panelId\"\n      (selected)=\"setActiveKey($event)\"\n    />\n\n    <div class=\"mt-cl-shell__pane\" role=\"tabpanel\" [id]=\"panelId\">\n      @if (activeItem(); as item) {\n        @if (item.config.showHeader) {\n          <div class=\"mt-cl-pane__header\">\n            <div class=\"mt-cl-pane__heading\">\n              <h3 class=\"mt-cl-pane__title\">\n                {{ item.title || item.moduleKey || defaultTitle(item) }}\n              </h3>\n              @if (paneMeta(item); as meta) {\n                <p\n                  class=\"mt-cl-pane__meta\"\n                  [class.mt-cl-pane__meta--error]=\"!!item.error\"\n                >\n                  {{ meta }}\n                </p>\n              }\n            </div>\n\n            @if (item.config.headerStart) {\n              <div class=\"mt-cl-pane__header-start\">\n                <ng-container\n                  [ngTemplateOutlet]=\"item.config.headerStart\"\n                  [ngTemplateOutletContext]=\"templateContext(item)\"\n                />\n              </div>\n            }\n\n            @if (item.config.headerEnd) {\n              <div class=\"mt-cl-pane__actions\">\n                <ng-container\n                  [ngTemplateOutlet]=\"item.config.headerEnd\"\n                  [ngTemplateOutletContext]=\"templateContext(item)\"\n                />\n              </div>\n            }\n          </div>\n        }\n\n        <ng-container\n          [ngTemplateOutlet]=\"itemContent\"\n          [ngTemplateOutletContext]=\"{ $implicit: item }\"\n        />\n      }\n    </div>\n  </div>\n} @else {\n  <div class=\"flex flex-col gap-4\">\n    @for (item of items(); track item.key) {\n      <section class=\"flex flex-col gap-4\">\n        @if (item.config.showHeader) {\n          <div class=\"flex w-full items-center gap-2\">\n            <div class=\"flex min-w-0 flex-1 items-center gap-2\">\n              @if (item.config.collapse.enabled) {\n                <mt-button\n                  variant=\"text\"\n                  severity=\"secondary\"\n                  [icon]=\"\n                    item.expanded\n                      ? item.config.collapse.collapseIcon\n                      : item.config.collapse.expandIcon\n                  \"\n                  (onClick)=\"toggleExpanded(item.key)\"\n                />\n              }\n              <h3 class=\"m-0 text-lg font-semibold\">\n                {{ item.title || item.moduleKey || defaultTitle(item) }}\n              </h3>\n              @if (item.config.headerStart) {\n                <div class=\"flex items-center gap-2\">\n                  <ng-container\n                    [ngTemplateOutlet]=\"item.config.headerStart\"\n                    [ngTemplateOutletContext]=\"templateContext(item)\"\n                  />\n                </div>\n              }\n            </div>\n            @if (item.config.headerEnd) {\n              <div class=\"ml-auto flex shrink-0 items-center gap-2\">\n                <ng-container\n                  [ngTemplateOutlet]=\"item.config.headerEnd\"\n                  [ngTemplateOutletContext]=\"templateContext(item)\"\n                />\n              </div>\n            }\n          </div>\n        }\n\n        @if (item.expanded || !item.config.collapse.enabled) {\n          <ng-container\n            [ngTemplateOutlet]=\"itemContent\"\n            [ngTemplateOutletContext]=\"{ $implicit: item }\"\n          />\n        }\n      </section>\n    }\n  </div>\n}\n\n<!--\n  The one place a list's body is described. Both layouts render through it so\n  the navigator pane and the stacked sections can never drift apart.\n-->\n<ng-template #itemContent let-rawItem>\n  @let item = asItem(rawItem);\n\n  @if (item.config.templateContent) {\n    <ng-container\n      [ngTemplateOutlet]=\"item.config.templateContent\"\n      [ngTemplateOutletContext]=\"templateContext(item)\"\n    />\n  } @else if (item.type === \"informative\") {\n    <mt-client-list-informative-view [state]=\"item\" />\n  } @else if (item.areaType === \"table\") {\n    <mt-client-list-table-view\n      [state]=\"item\"\n      [rowActions]=\"rowActionsFor(item)\"\n      [actionShape]=\"item.config.actionShape\"\n      [rowActionsLoadingFn]=\"rowActionsLoadingFnFor(item)\"\n      (rowActionsRequested)=\"onRowActionsRequested(item, $event)\"\n      (lazyLoad)=\"onLazyLoad(item.key, $event)\"\n      (rowClick)=\"onTableRowClick(item, $event)\"\n    />\n  } @else {\n    <mt-client-list-cards-view\n      [state]=\"item\"\n      [rowActions]=\"rowActionsFor(item)\"\n      [rowActionsLoadingFn]=\"rowActionsLoadingFnFor(item)\"\n      (rowActionsRequested)=\"onRowActionsRequested(item, $event)\"\n      (lazyLoad)=\"onLazyLoad(item.key, $event)\"\n      (loadMore)=\"loadMoreCards(item.key)\"\n      (cardClick)=\"onCardClick(item, $event)\"\n    />\n  }\n</ng-template>\n", styles: [".mt-cl-shell{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;align-items:start}.mt-cl-shell--rail{grid-template-columns:16.5rem minmax(0,1fr);gap:1.5rem}.mt-cl-shell--rail .mt-cl-shell__rail{padding-inline-end:1.25rem;border-inline-end:1px solid var(--p-content-border-color, #e5e7eb)}.mt-cl-shell__pane{display:flex;flex-direction:column;gap:1rem;min-width:0}.mt-cl-pane__header{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.75rem 1rem}.mt-cl-pane__heading{display:flex;flex-direction:column;gap:.125rem;min-width:0;flex:1 1 auto}.mt-cl-pane__title{margin:0;color:var(--p-text-color, #111827);font-size:1.25rem;font-weight:600;line-height:1.75rem;overflow-wrap:anywhere}.mt-cl-pane__meta{margin:0;color:var(--p-text-muted-color, #6b7280);font-size:.8125rem;line-height:1.25rem}.mt-cl-pane__meta--error{color:var(--p-red-500, #ef4444)}.mt-cl-pane__actions{display:flex;flex:0 0 auto;align-items:center;gap:.5rem;margin-inline-start:auto}.mt-cl-pane__header-start{display:flex;flex:0 0 auto;align-items:center;gap:.5rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { configurations: [{ type: i0.Input, args: [{ isSignal: true, alias: "configurations", required: true }] }], defaultTake: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultTake", required: false }] }], multiLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiLayout", required: false }] }], loaded: [{ type: i0.Output, args: ["loaded"] }], errored: [{ type: i0.Output, args: ["errored"] }], itemClicked: [{ type: i0.Output, args: ["itemClicked"] }], activeListChanged: [{ type: i0.Output, args: ["activeListChanged"] }] } });
 
 /**
  * Generated bundle index. Do not edit.