npm package: @ferdifighter/ng-docklayout
Description: Eine moderne Angular-Bibliothek für flexible, dockbare und tabbed Panel-Layouts mit Drag & Drop, Resizing und umfangreichen Anpassungsmöglichkeiten.
Author: ferdifighter
Latest version: 2.0.8

# 🚀 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
```bash
npm install @ferdifighter/ng-docklayout@^2.0.8
```

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

### 3. Modul importieren
```typescript
// 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
```html
<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:

```typescript
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

```typescript
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
```scss
: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
```scss
// 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
```html
<ngdl-dock-layout class="ngdl-debug" ...>
```

### 2. Debug-Styles aktivieren
```scss
.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
```bash
# 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
```bash
# Modul neu installieren
npm uninstall @ferdifighter/ng-docklayout
npm install @ferdifighter/ng-docklayout@^2.0.2
```

### Problem: Layout funktioniert nicht
```typescript
// 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](https://github.com/ferdifighter/ng-docklayout)
- **NPM**: [https://www.npmjs.com/package/@ferdifighter/ng-docklayout](https://www.npmjs.com/package/@ferdifighter/ng-docklayout)
- **Demo**: [https://ng-docklayout.ferdifighter.com](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](https://github.com/ferdifighter/ng-docklayout/issues)
- **Discussions**: [GitHub Discussions](https://github.com/ferdifighter/ng-docklayout/discussions)
- **Email**: support@ferdifighter.com

---

## 📄 Lizenz

MIT License - siehe [LICENSE](LICENSE) Datei für Details.