🚀 ng-docklayout - Version 2.0.6

Eine moderne Angular-Bibliothek für flexible, dockbare und tabbed Panel-Layouts mit Drag & Drop, Resizing und umfangreichen Anpassungsmöglichkeiten.

✨ Features

• 🎯 Universelle Kompatibilität - Funktioniert in ALLEN Projektumgebungen
• 🔧 Keine Flexbox-Abhängigkeiten - Integriert sich nahtlos in bestehende Layouts
• 📱 Responsive Design - Funktioniert auf allen Bildschirmgrößen
• 🎨 Vollständig anpassbar - CSS-Variablen und Themes
• 📊 Tab-Gruppen - Mehrere Panels in einem Tab-Bereich
• 🔒 Pinning & Maximizing - Panels anheften und maximieren
• 🎭 Auto-Hide - Panels automatisch ausblenden
• 🐛 Debug-Modus - Entwicklung und Fehlerbehebung

🎯 Was ist neu in Version 2.0.0?

Das Modul wurde komplett neu entwickelt für universelle Kompatibilität:

• ✅ Keine Flexbox-Abhängigkeiten mehr
• ✅ Funktioniert in ALLEN Projekten (Flexbox, Grid, Float, Table, etc.)
• ✅ Keine CSS-Konflikte mit bestehenden Frameworks
• ✅ Neue CSS-Architektur mit absoluter Positionierung
• ✅ Responsive Design für alle Bildschirmgrößen

🚀 Installation

1. Modul installieren

npm install @ferdifighter/ng-docklayout@^2.0.8

2. CSS importieren

// In deiner styles.scss oder angular.json
@import "~@ferdifighter/ng-docklayout/styles/universal-layout.scss";

3. Modul importieren

// In deinem app.module.ts oder standalone component
import { NgDockLayoutModule } from '@ferdifighter/ng-docklayout';

@NgModule({
  imports: [NgDockLayoutModule],
  // ...
})
export class AppModule { }

💻 Verwendung

1. Komponente in Template einbinden

<ngdl-dock-layout
  [state]="layoutState"
  [config]="layoutConfig"
  [slotMap]="slotMap"
  (stateChange)="onStateChange($event)">
  
  <!-- Panel-Inhalte mit Template-Referenzen -->
  <ng-template #panel1>
    <div>Inhalt von Panel 1</div>
  </ng-template>
  
  <ng-template #panel2>
    <div>Inhalt von Panel 2</div>
  </ng-template>
</ngdl-dock-layout>

2. Layout-Konfiguration

Höhen-Kontrolle für den Hauptbereich

Du kannst die Höhe des Hauptbereichs (oberer Bereich) flexibel steuern:

layoutConfig: DockLayoutConfig = {
  // ... andere Optionen ...
  mainAreaHeight: '70%'        // Prozent des verfügbaren Platzes
  // ODER
  mainAreaHeight: 400          // Feste Höhe in Pixeln
  // ODER
  mainAreaHeight: '50vh'       // Viewport-Höhe
  // ODER
  mainAreaHeight: 'calc(100% - 100px)' // Berechnete Höhe
};

Verfügbare Höhen-Formate:

• Prozent: "70%" - 70% des verfügbaren Platzes
• Pixel: 400 - Feste Höhe von 400px
• Viewport: "50vh" - 50% der Bildschirmhöhe
• Berechnet: "calc(100% - 100px)" - Dynamische Berechnung

import { DockLayoutConfig, DockLayoutState, DockPanel } from '@ferdifighter/ng-docklayout';

export class AppComponent {
  // Konfiguration
  layoutConfig: DockLayoutConfig = {
    allowPinning: true,        // Panels anheften
    allowMaximizing: true,     // Panels maximieren
    allowTabGroups: true,      // Tab-Gruppen erlauben
    mainAreaHeight: '100%'     // Höhe des Hauptbereichs: Pixel (400) oder Prozent ("70%")
  };

  // Panels definieren
  panel1: DockPanel = { 
    id: 'panel1', 
    title: 'Panel 1',
    contentId: 'panel1',      // WICHTIG: Muss mit Template-Referenz übereinstimmen
    isPinned: true,
    initialColumnIndex: 0 
  };

  panel2: DockPanel = { 
    id: 'panel2', 
    title: 'Panel 2',
    contentId: 'panel2',      // WICHTIG: Muss mit Template-Referenz übereinstimmen
    isMainPanel: true,        // Hauptpanel
    isPinned: true,
    initialColumnIndex: 1 
  };

  // Layout-Zustand
  layoutState: DockLayoutState = {
    columns: [
      {
        size: 300,             // Breite der Spalte
        panels: [this.panel1]
      },
      {
        panels: [this.panel2]  // Hauptspalte (flexibel)
      }
    ],
    bottom: {                  // Bottom-Tabs
      tabGroups: [
        {
          id: 'bottomTabs',
          panels: [
            { id: 'bottom1', title: 'Bottom 1' },
            { id: 'bottom2', title: 'Bottom 2' }
          ],
          activePanelId: 'bottom1'
        }
      ],
      height: 250
    },
    config: this.layoutConfig,
    allPanels: [this.panel1, this.panel2]  // Alle verfügbaren Panels
  };

  // Template-Referenzen
  @ViewChild('panel1') panel1Template!: TemplateRef<any>;
  @ViewChild('panel2') panel2Template!: TemplateRef<any>;

  // Slot-Mapping
  slotMap: { [key: string]: TemplateRef<any> } = {};

  ngAfterViewInit() {
    this.slotMap = {
      panel1: this.panel1Template,
      panel2: this.panel2Template
    };
  }

  onStateChange(newState: DockLayoutState) {
    this.layoutState = newState;
  }
}

🎨 Anpassung der Styles

1. CSS-Variablen überschreiben

:root {
  // Farben
  --ngdl-primary-color: #007bff;
  --ngdl-secondary-color: #6c757d;
  --ngdl-background-color: #ffffff;
  --ngdl-border-color: #dee2e6;
  
  // Abstände
  --ngdl-panel-padding: 16px;
  --ngdl-tab-height: 40px;
  --ngdl-border-radius: 4px;
  
  // Schatten
  --ngdl-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

2. Eigene Styles hinzufügen

// Panel-Inhalte stylen
.ngdl-panel-content {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px;
}

// Tabs anpassen
.ngdl-tab {
  border-radius: 8px 8px 0 0;
  font-weight: 600;
}

🔧 Debug-Modus aktivieren

1. Debug-Klasse hinzufügen

<ngdl-dock-layout class="ngdl-debug" ...>

2. Debug-Styles aktivieren

.ngdl-debug {
  --ngdl-debug-mode: true;
  
  // Alle Elemente sichtbar machen
  .ngdl-dock-layout * {
    outline: 1px solid red !important;
  }
}

📱 Responsive Design

Das Modul passt sich automatisch an verschiedene Bildschirmgrößen an:

• Desktop: Vollständiges Layout mit allen Spalten
• Tablet: Reduzierte Spaltenanzahl
• Mobile: Einspaltiges Layout mit Stacking

⚠️ Wichtige Hinweise

1. Breaking Changes von Version 1.x

• ❌ Alte CSS-Imports funktionieren nicht mehr
• ❌ Flexbox-spezifische Styles wurden entfernt
• ❌ !important Regeln wurden reduziert

2. Neue Features

• ✅ Universelle Kompatibilität mit allen Layout-Systemen
• ✅ Bessere Performance durch neue CSS-Architektur
• ✅ Responsive Design out-of-the-box
• ✅ Debug-Modus für Entwicklung

🚨 Fehlerbehebung

Problem: CSS wird nicht geladen

# Prüfe den Import-Pfad
@import "~@ferdifighter/ng-docklayout/styles/universal-layout.scss";

# Oder verwende den absoluten Pfad
@import "node_modules/@ferdifighter/ng-docklayout/styles/universal-layout.scss";

Problem: Module nicht gefunden

# Modul neu installieren
npm uninstall @ferdifighter/ng-docklayout
npm install @ferdifighter/ng-docklayout@^2.0.2

Problem: Layout funktioniert nicht

// Stelle sicher, dass alle Panels in allPanels aufgeführt sind
allPanels: [this.panel1, this.panel2, this.panel3]

📖 Vollständige Dokumentation

• GitHub: https://github.com/ferdifighter/ng-docklayout
• NPM: https://www.npmjs.com/package/@ferdifighter/ng-docklayout
• Demo: https://ng-docklayout.ferdifighter.com

🎉 Zusammenfassung

Version 2.0.0 ist ein kompletter Neustart mit:

• Universeller Kompatibilität für alle Projekte
• Moderner CSS-Architektur ohne externe Abhängigkeiten
• Besserer Performance und Wartbarkeit
• Responsive Design für alle Geräte

Das Modul funktioniert jetzt in JEDER Projektumgebung! 🚀

📋 Changelog

Version 2.0.2 (Breaking Changes)

• 🔄 Komplett neu entwickelt für universelle Kompatibilität
• 🚫 Flexbox-Abhängigkeiten entfernt
• 🎯 Neue CSS-Architektur mit absoluter Positionierung
• 📱 Responsive Design für alle Bildschirmgrößen
• 🐛 Debug-Modus für Entwicklung
• 🎨 CSS-Variablen für einfache Anpassung
• 📚 Neue Dokumentation und Beispiele

Version 1.0.6

• ✅ Flexbox-Kompatibilität verbessert
• 🔧 CSS-Fixes für Bottom-Tabs
• 📖 Erweiterte Dokumentation

🤝 Support

Bei Fragen oder Problemen:

• Issues: GitHub Issues
• Discussions: GitHub Discussions
• Email: [email protected]

📄 Lizenz

MIT License - siehe LICENSE Datei für Details.