newportsite 1.1.3

package/src/lib/home/info/info.component.ts

@@ -0,0 +1,287 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  DestroyRef,
+  inject,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { GlobalService, Languages } from '../../services/global.service';
+import { AppMessageService } from '../../services/message.service';
+import { PACKAGE_VERSION } from '../../version';
+
+const TRANSLATIONS = {
+  IT: {
+    versionLabel: 'Versione',
+    heroBadge: 'Piattaforma Low-Code',
+    desc: "Costruisci applicazioni professionali in modo rapido ed elegante. Frontend Angular 21 con backend ASP.NET Core su .NET 10 — la piattaforma pensata per chi vuole concentrarsi sul business, non sull'infrastruttura.",
+    cta1: 'Inizia il Viaggio',
+    cta2: 'Richiedi una Demo',
+    mailSubj1: 'Richiesta%20informazioni%20aggiuntive',
+    mailBody1:
+      'Salve%2C%0D%0AVorrei%20ricevere%20informazioni%20aggiuntive%20sulla%20piattaforma.%0D%0A%0D%0ASaluti',
+    mailSubj2: 'Richiesta%20demo',
+    mailBody2:
+      'Salve%2C%0D%0AVorrei%20richiedere%20una%20demo%20della%20piattaforma.%0D%0A%0D%0ASaluti',
+    mailSubjCta: 'Richiesta%20informazioni%20aggiuntive',
+    mailBodyCta:
+      'Salve%2C%0D%0AVorrei%20ricevere%20informazioni%20aggiuntive%20sulla%20piattaforma.%0D%0A%0D%0ASaluti',
+    stat1: 'Velocità di sviluppo',
+    stat2: 'Responsive & PWA',
+    stat3: 'Integrazioni',
+    stat4: 'Cloud Ready',
+
+    /* Tech stack */
+    techTag: 'Tech Stack',
+    techTitle: "Tecnologie all'avanguardia",
+    techSubtitle:
+      "Un'architettura moderna full-stack progettata per performance, scalabilità e manutenibilità.",
+    techFe: 'Frontend',
+    techBe: 'Backend',
+    techData: 'Dati & Cache',
+    techOps: 'DevOps & CI/CD',
+    techFeDesc:
+      'Angular 21, TypeScript 5.9, Angular Signals, OnPush Change Detection, AG Grid, FullCalendar, Chart.js, pdfmake',
+    techBeDesc:
+      'ASP.NET Core .NET 10, API Versioning, Swagger / OpenAPI, Rate Limiting, Output Caching',
+    techDataDesc:
+      'SQL Server & MongoDB (duale), FusionCache con Redis e backplane, Serilog su MongoDB & Grafana Loki',
+    techOpsDesc:
+      'Docker + nginx, GitHub Actions, GitVersion SemVer, Azure Container Apps & Static Web Apps',
+
+    /* Architecture */
+    archTag: 'Architettura',
+    archTitle: 'Progettata per scalare',
+    archSubtitle:
+      'Separazione netta tra frontend SPA e backend RESTful, con osservabilità integrata e deploy containerizzato.',
+    archItems: [
+      {
+        label: 'SPA Angular 21',
+        detail:
+          'Rendering dinamico di form SVG, pipeline di validazione a stati, computed field e lookup resolution',
+      },
+      {
+        label: 'REST API .NET 10',
+        detail:
+          'Versioning URL/header/query, autenticazione JWT Bearer, autorizzazione basata su ruoli',
+      },
+      {
+        label: 'Multi-Database',
+        detail:
+          'SQL Server e MongoDB intercambiabili via configurazione, senza modifiche al codice applicativo',
+      },
+      {
+        label: 'Caching multi-livello',
+        detail:
+          'FusionCache in-memory + Redis distribuita con backplane per invalidazione coerente',
+      },
+      {
+        label: 'Observability',
+        detail:
+          'OpenTelemetry end-to-end: traces via OTLP, metriche Prometheus, log strutturati con Serilog verso Loki',
+      },
+      {
+        label: 'Health Checks',
+        detail:
+          'Readiness e liveness probes per applicazione, database e Redis — pronti per Kubernetes',
+      },
+    ],
+
+    /* Features */
+    featTag: 'Funzionalità',
+    featTitle: 'Tutto ciò di cui hai bisogno',
+    featSubtitle:
+      'Una suite completa per creare, gestire e distribuire applicazioni enterprise.',
+    f1Title: 'Form dinamici',
+    f1Desc:
+      'Rendering SVG e standard con pipeline a stati: validazione, lookup, campi calcolati e 10+ tipi di campo (Testo, Numero, Data, Combo, Immagine, Video, Mappa, Grafico…).',
+    f2Title: 'Data Grid avanzata',
+    f2Desc:
+      'AG Grid Community per dataset di grandi dimensioni con editing inline, master-detail e navigazione testata-righe.',
+    f3Title: 'Scheduling',
+    f3Desc:
+      'Modulo di pianificazione risorse basato su FullCalendar con timeline interattiva e gestione eventi server-side.',
+    f4Title: 'Dashboard & Report',
+    f4Desc:
+      'Grafici interattivi con Chart.js / ng2-charts e generazione PDF lato client con pdfmake e file-saver.',
+    f5Title: 'API RESTful',
+    f5Desc:
+      'Backend ASP.NET Core con versioning (URL, header, query string), rate limiting (fixed window, token bucket, concurrency) e output caching configurabile.',
+    f6Title: 'Sicurezza Enterprise',
+    f6Desc:
+      'Autenticazione JWT Bearer con refresh token, autorizzazione role-based, route guard Angular e controllo accessi granulare.',
+    f7Title: 'Multi-Database',
+    f7Desc:
+      'Supporto duale SQL Server e MongoDB selezionabile via configurazione. Cache distribuita FusionCache + Redis con backplane.',
+    f8Title: 'Observability',
+    f8Desc:
+      'OpenTelemetry integrato: traces OTLP (Jaeger/Tempo), metriche Prometheus, log strutturati Serilog verso Console, MongoDB e Grafana Loki.',
+    f9Title: 'Cloud & DevOps',
+    f9Desc:
+      'Docker multi-stage su Alpine Linux, CI/CD con GitHub Actions e GitVersion, deploy su Azure Container Apps e Azure Static Web Apps. Tema chiaro/scuro nativo e PWA con Service Worker.',
+
+    ctaTag: 'Inizia ora',
+    ctaTitle: 'Pronto a navigare verso il futuro?',
+    ctaSubtitle:
+      'Unisciti ai team che usano Newport Project per costruire applicazioni moderne in tempi record.',
+    ctaBtn: 'Contattaci',
+    rights: 'Tutti i diritti riservati',
+  },
+  EN: {
+    versionLabel: 'Version',
+    heroBadge: 'Low-Code Platform',
+    desc: 'Build professional applications quickly and elegantly. Angular 21 frontend with ASP.NET Core on .NET 10 — the platform designed for those who want to focus on business, not infrastructure.',
+    cta1: 'Start the Journey',
+    cta2: 'Request a Demo',
+    mailSubj1: 'Request%20for%20additional%20information',
+    mailBody1:
+      'Hello%2C%0D%0AI%20would%20like%20to%20receive%20additional%20information%20about%20the%20platform.%0D%0A%0D%0ARegards',
+    mailSubj2: 'Demo%20request',
+    mailBody2:
+      'Hello%2C%0D%0AI%20would%20like%20to%20request%20a%20demo%20of%20the%20platform.%0D%0A%0D%0ARegards',
+    mailSubjCta: 'Request%20for%20additional%20information',
+    mailBodyCta:
+      'Hello%2C%0D%0AI%20would%20like%20to%20receive%20additional%20information%20about%20the%20platform.%0D%0A%0D%0ARegards',
+    stat1: 'Development Speed',
+    stat2: 'Responsive & PWA',
+    stat3: 'Integrations',
+    stat4: 'Cloud Ready',
+
+    /* Tech stack */
+    techTag: 'Tech Stack',
+    techTitle: 'Cutting-edge technologies',
+    techSubtitle:
+      'A modern full-stack architecture designed for performance, scalability and maintainability.',
+    techFe: 'Frontend',
+    techBe: 'Backend',
+    techData: 'Data & Cache',
+    techOps: 'DevOps & CI/CD',
+    techFeDesc:
+      'Angular 21, TypeScript 5.9, Angular Signals, OnPush Change Detection, AG Grid, FullCalendar, Chart.js, pdfmake',
+    techBeDesc:
+      'ASP.NET Core .NET 10, API Versioning, Swagger / OpenAPI, Rate Limiting, Output Caching',
+    techDataDesc:
+      'SQL Server & MongoDB (dual), FusionCache with Redis backplane, Serilog to MongoDB & Grafana Loki',
+    techOpsDesc:
+      'Docker + nginx, GitHub Actions, GitVersion SemVer, Azure Container Apps & Static Web Apps',
+
+    /* Architecture */
+    archTag: 'Architecture',
+    archTitle: 'Designed to scale',
+    archSubtitle:
+      'Clean separation between the SPA frontend and the RESTful backend, with built-in observability and containerized deployment.',
+    archItems: [
+      {
+        label: 'Angular 21 SPA',
+        detail:
+          'Dynamic SVG form rendering, field-state validation pipeline, computed fields and lookup resolution',
+      },
+      {
+        label: '.NET 10 REST API',
+        detail:
+          'URL/header/query versioning, JWT Bearer authentication, role-based authorization',
+      },
+      {
+        label: 'Multi-Database',
+        detail:
+          'SQL Server and MongoDB switchable via configuration, with zero application code changes',
+      },
+      {
+        label: 'Multi-layer Caching',
+        detail:
+          'FusionCache in-memory + Redis distributed cache with backplane for coherent invalidation',
+      },
+      {
+        label: 'Observability',
+        detail:
+          'End-to-end OpenTelemetry: OTLP traces, Prometheus metrics, structured Serilog logs to Loki',
+      },
+      {
+        label: 'Health Checks',
+        detail:
+          'Readiness and liveness probes for application, database and Redis — Kubernetes-ready',
+      },
+    ],
+
+    /* Features */
+    featTag: 'Features',
+    featTitle: 'Everything you need',
+    featSubtitle:
+      'A complete suite for creating, managing and distributing enterprise applications.',
+    f1Title: 'Dynamic Forms',
+    f1Desc:
+      'SVG and standard rendering with a field-state pipeline: validation, lookups, computed fields and 10+ field types (Text, Number, Date, Combo, Image, Video, Map, Chart…).',
+    f2Title: 'Advanced Data Grid',
+    f2Desc:
+      'AG Grid Community for large datasets with inline editing, master-detail and header-rows navigation.',
+    f3Title: 'Scheduling',
+    f3Desc:
+      'Resource planning module powered by FullCalendar with interactive timeline and server-side event management.',
+    f4Title: 'Dashboard & Reports',
+    f4Desc:
+      'Interactive charts with Chart.js / ng2-charts and client-side PDF generation via pdfmake and file-saver.',
+    f5Title: 'RESTful API',
+    f5Desc:
+      'ASP.NET Core backend with versioning (URL, header, query string), rate limiting (fixed window, token bucket, concurrency) and configurable output caching.',
+    f6Title: 'Enterprise Security',
+    f6Desc:
+      'JWT Bearer authentication with refresh tokens, role-based authorization, Angular route guards and granular access control.',
+    f7Title: 'Multi-Database',
+    f7Desc:
+      'Dual SQL Server and MongoDB support switchable via configuration. FusionCache + Redis distributed cache with backplane.',
+    f8Title: 'Observability',
+    f8Desc:
+      'Built-in OpenTelemetry: OTLP traces (Jaeger/Tempo), Prometheus metrics, structured Serilog logs to Console, MongoDB and Grafana Loki.',
+    f9Title: 'Cloud & DevOps',
+    f9Desc:
+      'Multi-stage Docker on Alpine Linux, CI/CD with GitHub Actions and GitVersion, deployed to Azure Container Apps and Azure Static Web Apps. Native light/dark theme and PWA with Service Worker.',
+
+    ctaTag: 'Get started',
+    ctaTitle: 'Ready to navigate towards the future?',
+    ctaSubtitle:
+      'Join teams using Newport Project to build modern applications in record time.',
+    ctaBtn: 'Contact Us',
+    rights: 'All rights reserved',
+  },
+};
+
+@Component({
+  selector: 'app-info',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  styleUrls: ['info.component.css'],
+  templateUrl: 'info.component.html',
+})
+export class InfoComponent {
+  gsv = inject(GlobalService);
+  msg = inject(AppMessageService);
+  private cdr = inject(ChangeDetectorRef);
+  private destroyRef = inject(DestroyRef);
+
+  public version: string;
+  public t!: typeof TRANSLATIONS.IT;
+  public mail1!: string;
+  public mail2!: string;
+  public mailCta!: string;
+
+  public constructor() {
+    this.version = PACKAGE_VERSION;
+    this.applyLanguage();
+
+    this.gsv
+      .getStateChanged()
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(() => {
+        this.applyLanguage();
+        this.cdr.markForCheck();
+      });
+  }
+
+  /** Selects the correct translation block and rebuilds mailto links for the current language. */
+  private applyLanguage(): void {
+    const lang = this.gsv.getLng();
+    this.t = lang === Languages.EN ? TRANSLATIONS.EN : TRANSLATIONS.IT;
+    this.mail1 = `mailto:alwacar@gmail.com?subject=${this.t.mailSubj1}&body=${this.t.mailBody1}`;
+    this.mail2 = `mailto:alwacar@gmail.com?subject=${this.t.mailSubj2}&body=${this.t.mailBody2}`;
+    this.mailCta = `mailto:alwacar@gmail.com?subject=${this.t.mailSubjCta}&body=${this.t.mailBodyCta}`;
+  }
+}

package/src/lib/home/model/article.component.html

@@ -0,0 +1,10 @@
+<!-- article.component -->
+<modelselector
+  [currentModel]="model()"
+  [viewList]="viewList()"
+  [currentCommand]="command()"
+  [lookupValue]="lookupValue()"
+  [dialogValue]="dialogValue()"
+  (commandsChanged)="onCommandsChanged($event)"
+  [scale]="scale()"></modelselector>
+<!-- fine article.component -->

package/src/lib/home/model/article.component.ts

@@ -0,0 +1,50 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  effect,
+  inject,
+  input,
+  output,
+} from '@angular/core';
+import {
+  ItemCommandInterface,
+  ItemInterface,
+  ViewListInterface,
+} from '../../interfaces/index';
+import { ModelSelectorComponent } from '../../players/model/model.selector.component';
+
+@Component({
+  selector: 'article',
+  templateUrl: 'article.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [ModelSelectorComponent],
+})
+export class ArticleComponent {
+  private elRef = inject(ElementRef);
+
+  model = input<ItemInterface>();
+  command = input<ItemCommandInterface>();
+  viewList = input<boolean>();
+  lookupValue = input<any>();
+  dialogValue = input<any>();
+  scale = input<number>();
+
+  commandsChanged = output<ItemCommandInterface[]>();
+  viewChanged = output<ViewListInterface>();
+
+  constructor() {
+    effect(() => {
+      if (this.model()) {
+        this.elRef.nativeElement.scrollTo(0, 0);
+      }
+    });
+  }
+
+  /** Forwards non-empty command arrays from the model selector to the parent. */
+  onCommandsChanged(commands: ItemCommandInterface[]) {
+    if (commands?.length > 0) {
+      this.commandsChanged.emit(commands);
+    }
+  }
+}

package/src/lib/home/model/barchart.component.html

@@ -0,0 +1,8 @@
+<canvas
+  baseChart
+  class="chart"
+  [data]="barChartData"
+  [options]="barChartOptions"
+  [plugins]="barChartPlugins"
+  [type]="barChartType">
+</canvas>

package/src/lib/home/model/barchart.component.ts

@@ -0,0 +1,59 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  effect,
+  input,
+  viewChild,
+} from '@angular/core';
+import { ChartConfiguration, ChartData, ChartType, Plugin } from 'chart.js';
+import {
+  BaseChartDirective,
+  provideCharts,
+  withDefaultRegisterables,
+} from 'ng2-charts';
+
+import DataLabelsPlugin from 'chartjs-plugin-datalabels';
+
+@Component({
+  selector: 'barchart',
+  templateUrl: './barchart.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [BaseChartDirective],
+  providers: [provideCharts(withDefaultRegisterables())],
+})
+export class BarChartComponent {
+  chart = viewChild(BaseChartDirective);
+  dataChart = input<string>();
+
+  barChartData!: ChartData<'bar'>;
+
+  public barChartOptions: ChartConfiguration['options'] = {
+    // We use these empty structures as placeholders for dynamic theming.
+    scales: {
+      x: {},
+      y: {
+        min: 10,
+      },
+    },
+    plugins: {
+      legend: {
+        display: true,
+      },
+      datalabels: {
+        anchor: 'end',
+        align: 'end',
+      },
+    },
+  };
+  public barChartType: ChartType = 'bar';
+  public barChartPlugins: Plugin[] = [DataLabelsPlugin];
+
+  constructor() {
+    effect(() => {
+      const data = this.dataChart();
+      if (data !== undefined) {
+        this.barChartData = JSON.parse(data);
+      }
+    });
+  }
+}

package/src/lib/home/model/index.ts

@@ -0,0 +1,7 @@
+export * from './model.component';
+export * from './article.component';
+export * from './navigation.component';
+export * from './modeltoolbar.component';
+export * from './itemtab.component';
+export * from './itemdetail.component';
+export * from './barchart.component';

package/src/lib/home/model/itemdetail.component.html

@@ -0,0 +1,25 @@
+<!-- itemdetail.component -->
+<div [hidden]="!hasDetails" class="itab-bar">
+  @for (item of linkedDetails; track item; let i = $index) {
+    <a
+      class="itab-item"
+      [title]="item.title"
+      (click)="click(item)"
+      [hidden]="!item.visible"
+      [class.disabled]="!item.enabled"
+      [class.itab-active]="active === item">
+      <span
+        class="itab-dot"
+        [ngClass]="{
+          'dot-success': item.state === itemState.Valid,
+          'triangle-error': item.state === itemState.Error,
+          'rectangle-warning': item.state === itemState.Warning,
+          'dot-empty': item.state === itemState.Empty,
+        }"></span>
+      <span class="itab-label truncate">{{
+        msg?.getItemInfo(item, 'title')
+      }}</span>
+    </a>
+  }
+</div>
+<!-- fine itemdetail.component -->

package/src/lib/home/model/itemdetail.component.ts

@@ -0,0 +1,93 @@
+import {
+  Component,
+  input,
+  output,
+  effect,
+  untracked,
+  ChangeDetectionStrategy,
+  inject,
+} from '@angular/core';
+
+import { GlobalService } from '../../services/global.service';
+
+import { AppMessageService } from '../../services/message.service';
+
+import { ItemInterface, ItemState, ItemType } from '../../interfaces/index';
+import { NgClass } from '@angular/common';
+
+@Component({
+  selector: 'itemdetail',
+  templateUrl: 'itemdetail.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [NgClass],
+})
+export class ItemDetailComponent {
+  gsv = inject(GlobalService);
+  msg = inject(AppMessageService);
+
+  readonly model = input<ItemInterface>();
+  readonly insertMode = input<boolean>();
+  readonly disabled = input<boolean>();
+
+  readonly modelChanged = output<ItemInterface>();
+
+  public linkedDetails: ItemInterface[] = [];
+  public hasDetails: boolean = true;
+  public projectId!: string;
+  public itemState = ItemState;
+  public active!: ItemInterface;
+
+  constructor() {
+    effect(() => {
+      const m = this.model();
+      if (!m || m.type === ItemType.Detail) return;
+      const details = m.linkedDetails;
+      this.hasDetails = (details?.[0] ?? '') !== '';
+      this.projectId = this.gsv.getProject().project + '.' + this.gsv.getYear();
+      const projectItems = this.gsv.getProjectItems(this.projectId);
+      if (this.hasDetails) {
+        this.linkedDetails = [];
+        if ((m.linkedDetails?.[0] ?? '') !== '') {
+          m.linkedDetails!.forEach(item => {
+            this.linkedDetails.push(projectItems.find(e => e.name === item)!);
+          });
+        }
+        if (this.active?.id != m?.id) {
+          this.active = m;
+        }
+        const ins = untracked(() => this.insertMode());
+        const dis = untracked(() => this.disabled());
+        for (let i = 1; i < this.linkedDetails.length; i++) {
+          if (this.linkedDetails[i]) this.linkedDetails[i].enabled = !ins;
+        }
+        for (let i = 0; i < this.linkedDetails.length; i++) {
+          if (this.linkedDetails[i]) this.linkedDetails[i].enabled = !dis;
+        }
+      }
+    });
+    effect(() => {
+      const ins = this.insertMode();
+      if (ins !== undefined) {
+        for (let i = 1; i < this.linkedDetails.length; i++) {
+          if (this.linkedDetails[i]) this.linkedDetails[i].enabled = !ins;
+        }
+      }
+    });
+    effect(() => {
+      const dis = this.disabled();
+      if (dis !== undefined) {
+        for (let i = 0; i < this.linkedDetails.length; i++) {
+          if (this.linkedDetails[i]) this.linkedDetails[i].enabled = !dis;
+        }
+      }
+    });
+  }
+
+  /** Activates the selected linked-detail tab and emits modelChanged. */
+  public click(item: ItemInterface) {
+    if (this.active !== item) {
+      this.active = item;
+      this.modelChanged.emit(item);
+    }
+  }
+}

package/src/lib/home/model/itemtab.component.html

@@ -0,0 +1,25 @@
+<!-- itemtab.component -->
+<div [hidden]="!hasLinkeds" class="itab-bar">
+  @for (item of items; track item; let i = $index) {
+    <a
+      class="itab-item"
+      [title]="item.title"
+      (click)="click(item)"
+      [hidden]="!item.visible"
+      [class.disabled]="!item.enabled"
+      [class.itab-active]="active?.id === item?.id">
+      <span
+        class="itab-dot"
+        [ngClass]="{
+          'dot-success': item.state === itemState.Valid,
+          'triangle-error': item.state === itemState.Error,
+          'rectangle-warning': item.state === itemState.Warning,
+          'dot-empty': item.state === itemState.Empty,
+        }"></span>
+      <span class="itab-label truncate">{{
+        msg?.getItemInfo(item, 'title')
+      }}</span>
+    </a>
+  }
+</div>
+<!-- fine itemtab.component -->

package/src/lib/home/model/itemtab.component.ts

@@ -0,0 +1,105 @@
+import {
+  Component,
+  input,
+  output,
+  effect,
+  untracked,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  DestroyRef,
+  inject,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+import { GlobalService } from '../../services/global.service';
+
+import { AppMessageService } from '../../services/message.service';
+
+import { ItemInterface, ItemState, ItemType } from '../../interfaces/index';
+import { NgClass } from '@angular/common';
+
+@Component({
+  selector: 'itemtab',
+  templateUrl: 'itemtab.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [NgClass],
+})
+export class ItemTabComponent {
+  gsv = inject(GlobalService);
+  msg = inject(AppMessageService);
+  private cdr = inject(ChangeDetectorRef);
+  private destroyRef = inject(DestroyRef);
+
+  readonly model = input<ItemInterface>();
+  readonly insertMode = input<boolean>();
+  readonly disabled = input<boolean>();
+
+  readonly modelChanged = output<ItemInterface>();
+
+  public items: ItemInterface[] = [];
+  public hasLinkeds: boolean = true;
+  public projectId!: string;
+  public itemState = ItemState;
+  public active: ItemInterface | null = null;
+
+  constructor() {
+    // Trigger CD whenever updateState() recalculates item validation states
+    this.gsv
+      .getItemState()
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(() => this.cdr.markForCheck());
+
+    effect(() => {
+      const m = this.model();
+      if (!m) return;
+      if (m.type === ItemType.Detail) {
+        this.active = null;
+        return;
+      }
+      const linkedItems =
+        (m.linkedItems?.[0] ?? '') !== '' ? m.linkedItems : m.parentItems;
+      this.hasLinkeds = (linkedItems?.[0] ?? '') !== '';
+      this.projectId = this.gsv.getProject().project + '.' + this.gsv.getYear();
+      const projectItems = this.gsv.getProjectItems(this.projectId);
+      if (this.hasLinkeds) {
+        this.items = [];
+        (linkedItems ?? []).forEach(item => {
+          this.items.push(projectItems.find(e => e.name === item)!);
+        });
+        const ins = untracked(() => this.insertMode());
+        const dis = untracked(() => this.disabled());
+        for (let i = 1; i < this.items.length; i++) {
+          if (this.items[i]) this.items[i].enabled = !ins;
+        }
+        for (let i = 0; i < this.items.length; i++) {
+          if (this.items[i]) this.items[i].enabled = !dis;
+        }
+        this.active = m;
+      }
+    });
+    effect(() => {
+      const ins = this.insertMode();
+      if (ins !== undefined) {
+        for (let i = 1; i < this.items.length; i++) {
+          if (this.items[i]) this.items[i].enabled = !ins;
+        }
+      }
+    });
+    effect(() => {
+      const dis = this.disabled();
+      if (dis !== undefined) {
+        for (let i = 0; i < this.items.length; i++) {
+          if (this.items[i]) this.items[i].enabled = !dis;
+        }
+      }
+    });
+  }
+
+  /** Activates the selected linked-item tab and emits modelChanged. */
+  public click(item: ItemInterface) {
+    if (this.active !== item) {
+      this.active = item;
+      this.modelChanged.emit(item);
+    }
+  }
+}