initial push

src/app/editor/tabs/tab/tab.component.css

@@ -0,0 +1,32 @@
+.tab,
+.title,
+.close-button {
+    color: rgba(255, 255, 255, 0.64);
+}
+
+
+/*
+.tab {
+    float: left;
+    clear: left;
+    display: flow;
+}
+*/
+
+
+.title {
+    margin-left: 2em;
+    margin-right: 2em;
+}
+
+.close-button {
+    background: rgba(116, 0, 0, 0.64);
+    border-style: solid;
+    border-color: rgba(0, 0, 0, 0.64);
+    border-width: 1px;
+    border-radius: 0em 1em 0em 0em;
+}
+
+.close-button:hover {
+    background: rgba(256, 0, 0, 0.64);
+}

src/app/editor/tabs/tab/tab.component.html

@@ -0,0 +1,4 @@
+<span class="tab">
+    <span class="title">{{title}}</span>
+    <button class="close-button">X</button>
+</span>

src/app/editor/tabs/tab/tab.component.ts

@@ -0,0 +1,30 @@
+import { Component } from '@angular/core';
+
+
+
+@Component({
+    selector: 'tab',
+    standalone: true,
+    imports: [
+    ],
+    templateUrl: './tab.component.html',
+    styleUrl: './tab.component.css',
+    host: {
+        'class': 'col'
+//        'class': 'col tab'
+    }
+})
+export class TabComponent {
+
+    title: string;
+
+
+    constructor() {
+        this.title = "[NO TITLE]";
+    }
+
+    ngOnDestroy() {
+    }
+
+
+}

src/app/editor/tabs/tabs.component.html

@@ -0,0 +1,2 @@
+<ng-container #containerRef>
+</ng-container>

src/app/editor/tabs/tabs.component.ts

@@ -0,0 +1,57 @@
+import { Component, ElementRef, ViewChild, TemplateRef, ComponentRef, ViewContainerRef } from '@angular/core';
+import { Subject, takeUntil } from 'rxjs';
+
+import { TabComponent } from './tab/tab.component';
+import { TabsService } from '../../common/services/editor/tabs/tabs.service';
+
+import { ServiceMessage } from '../../common/types/service-message.type';
+
+
+
+@Component({
+    selector: 'tabs',
+    standalone: true,
+    imports: [
+    ],
+    templateUrl: './tabs.component.html',
+    styleUrl: './tabs.component.css',
+    host: {
+        'class': 'tabs scroller'
+    }
+})
+export class TabsComponent {
+    private unsubscribe = new Subject<void>();
+
+    @ViewChild('containerRef', {read: ViewContainerRef}) containerRef!: ViewContainerRef;
+    tabs: Map<string, ComponentRef<TabComponent>>;
+    activeTab!: string;
+
+
+    constructor(private tabsService: TabsService) {
+        this.tabs = new Map<string, ComponentRef<TabComponent>>();
+    }
+
+
+    public ngAfterViewInit(): void {
+        this.tabsService.getData$().pipe(
+            takeUntil(this.unsubscribe)
+        ).subscribe((data: ServiceMessage) => {
+            if (data.action === "create-tab")
+                this.createTab(data.message, data.uuid);
+        });
+    }
+
+    ngOnDestroy() {
+        this.unsubscribe.next();
+        this.unsubscribe.complete();
+    }
+
+    private createTab(title: string, uuid: string) {
+        const component = this.containerRef.createComponent(TabComponent);
+        component.instance.title = title;
+        this.tabs.set(uuid, component)
+
+        return component;
+    }
+
+}