@taon-dev/ui 21.0.28 → 21.0.30

package/lib/taon-detachable-dialog-content/taon-detachable-dialog-content.md

@@ -0,0 +1,429 @@
+# Taon Detachable Dialog Content
+
+`taon-detachable-dialog-content` allows a routed Taon Admin component
+to create a persistent detached copy of itself.
+
+Detached windows are independent Angular component instances and survive
+normal Angular Router navigation.
+
+This allows Taon Admin to behave like a small desktop workspace:
+
+```text
+                    TAON ADMIN
+
+ ┌──── Users ──────────────┐
+ │                         │
+ │                         │
+ └─────────────────────────┘
+
+          ┌──── Posts ──────────────┐
+          │                         │
+          │                         │
+          └─────────────────────────┘
+
+                 ┌──── Post #123 ─────────┐
+                 │                        │
+                 │                        │
+                 └────────────────────────┘
+```
+
+You can detach `/users`, navigate to `/posts`, detach that page,
+open `/cms/posts/123`, detach that page, and then navigate anywhere else.
+
+All three detached components remain alive and can continue communicating
+with the backend.
+
+---
+
+## 1. Add the global detached windows host
+
+The host MUST live outside the routed component tree.
+
+For example, inside the main Taon Admin component:
+
+```ts
+@Component({
+  imports: [
+    RouterOutlet,
+    TaonDetachedWindowsHostComponent,
+  ],
+  template: `
+    <router-outlet />
+
+  `,
+})
+export class TaonAdminComponent {}
+```
+
+Do NOT put `taon-detached-windows-host` inside a component that gets
+destroyed during navigation.
+
+There should normally be only one host.
+
+---
+
+## 2. Make a page detachable
+
+Example users component:
+
+```ts
+@Component({
+  selector: 'app-users',
+  standalone: true,
+  imports: [
+    TaonDetachableDialogContentComponent,
+  ],
+  template: `
+    <taon-detachable-dialog-content
+      title="Users"
+      [component]="UsersComponent">
+
+      <h1>Users</h1>
+
+      <app-users-table />
+
+    </taon-detachable-dialog-content>
+  `,
+})
+export class UsersComponent {
+  readonly UsersComponent = UsersComponent;
+}
+```
+
+The normal page displays:
+
+```text
+┌──────────────────────────────────── ↗ ┐
+│ Users                                 │
+│                                       │
+│ ...                                   │
+└───────────────────────────────────────┘
+```
+
+Clicking `↗` creates another `UsersComponent`.
+
+It does NOT move the existing DOM/component.
+
+---
+
+## 3. Navigate somewhere else
+
+After detaching Users:
+
+```text
+/users
+   ↓
+detach
+   ↓
+[ Users detached window ]
+```
+
+You can navigate to:
+
+```text
+/posts
+```
+
+The original routed `UsersComponent` is destroyed normally.
+
+The detached `UsersComponent` is NOT destroyed because it belongs to:
+
+```text
+TaonAdminComponent
+│
+├── RouterOutlet
+│   └── PostsComponent
+│
+└── TaonDetachedWindowsHostComponent
+    └── UsersComponent
+```
+
+---
+
+## 4. Detach another page
+
+Posts:
+
+```ts
+@Component({
+  selector: 'app-posts',
+  standalone: true,
+  imports: [
+    TaonDetachableDialogContentComponent,
+  ],
+  template: `
+    <taon-detachable-dialog-content
+      title="Posts"
+      [component]="PostsComponent">
+
+      <app-posts-table />
+
+    </taon-detachable-dialog-content>
+  `,
+})
+export class PostsComponent {
+  readonly PostsComponent = PostsComponent;
+}
+```
+
+You can now have:
+
+```text
+┌──── Users ──────────────┐
+
+           ┌──── Posts ──────────────┐
+```
+
+at the same time.
+
+---
+
+## 5. Route parameters are copied
+
+Consider:
+
+```text
+/cms/posts/123
+```
+
+with:
+
+```ts
+const id = inject(ActivatedRoute)
+  .snapshot
+  .params['id'];
+```
+
+When the page is detached, Taon captures the route state.
+
+The detached component receives its own `ActivatedRoute` containing:
+
+```ts
+params = {
+  id: '123',
+};
+```
+
+Therefore the new component can load Post #123 normally.
+
+Navigating afterward to:
+
+```text
+/cms/posts/456
+```
+
+does NOT change the detached window.
+
+You can therefore have:
+
+```text
+┌──── Post #123 ────────┐
+
+          ┌──── Post #456 ────────┐
+```
+
+simultaneously.
+
+---
+
+## 6. Query parameters
+
+Query parameters are also captured.
+
+For example:
+
+```text
+/users?page=5&search=john
+```
+
+creates a detached component with:
+
+```ts
+route.snapshot.queryParams
+```
+
+equivalent to:
+
+```ts
+{
+  page: '5',
+  search: 'john',
+}
+```
+
+The detached route is intentionally independent from subsequent browser
+navigation.
+
+---
+
+## 7. Database operations
+
+A detached component is a REAL Angular component.
+
+It can continue using normal Taon services/controllers:
+
+```ts
+await this.usersController
+  .update(user);
+```
+
+or:
+
+```ts
+this.postsController
+  .getAll();
+```
+
+There is nothing special about backend communication from a detached
+window.
+
+For example:
+
+```text
+Browser route:
+
+/admin/settings
+
+
+Desktop:
+
+┌──── Users ───────────────────┐
+│ John                         │
+│ Kate                         │
+│ Mark                         │
+│                    [delete]  │
+└──────────────────────────────┘
+
+
+       ┌──── Posts ───────────────────┐
+       │ Hello World                 │
+       │ Taon documentation          │
+       │                     [edit]  │
+       └─────────────────────────────┘
+```
+
+Both windows can still modify database data.
+
+---
+
+## 8. Component state
+
+Detaching creates a NEW component instance.
+
+It does not transfer arbitrary local component state.
+
+For example, if the routed component contains:
+
+```ts
+form.patchValue({
+  title: 'unsaved title',
+});
+```
+
+the detached component will initialize normally and usually reload its
+data from the backend.
+
+The unsaved form value is NOT automatically copied.
+
+This is intentional.
+
+Route state is copied.
+
+Component state is not.
+
+State transfer can be implemented separately later if needed.
+
+---
+
+## 9. Multiple instances
+
+`TaonDetachedWindowsService` intentionally stores an array:
+
+```ts
+readonly windows =
+  signal<TaonDetachedWindow[]>([]);
+```
+
+There is no single-dialog restriction.
+
+The following is valid:
+
+```text
+Users
+Users filtered by admin
+Posts
+Post #123
+Post #456
+Permissions
+Database
+```
+
+all open simultaneously.
+
+---
+
+## Architecture
+
+The important ownership model is:
+
+```text
+TaonAdminComponent
+│
+├── RouterOutlet
+│
+│   └── current routed page
+│
+│
+└── TaonDetachedWindowsHostComponent
+    │
+    ├── UsersComponent
+    │
+    ├── PostsComponent
+    │
+    ├── PostComponent (id=123)
+    │
+    └── PostComponent (id=456)
+```
+
+Angular Router controls only the first branch.
+
+Detached windows belong to the second branch.
+
+Therefore:
+
+```text
+router navigation
+      ↓
+destroys routed component
+      ↓
+does NOT destroy detached windows
+```
+
+---
+
+## Future improvements
+
+The detached-window infrastructure can later support:
+
+- minimize
+- maximize
+- fullscreen
+- z-index / bring-to-front
+- remembered window position
+- remembered window size
+- taskbar
+- window titles based on entity data
+- restoring workspace after refresh
+- duplicate prevention
+- multiple instances of the same route
+- synchronization/reload events between windows
+- integration with Taon's existing draggable admin panel
+
+A useful next abstraction would be:
+
+```ts
+TaonWorkspaceWindow
+```
+
+where detachable routed content is only one way of creating a workspace
+window.

package/lib/taon-draggable-button-panel/i18n/taon-draggable-button-panel.component.html.de-DE.i18n.data.d.ts

@@ -2,6 +2,10 @@ export interface DeDeTraslationOverrideSrcLibTaonDraggableButtonPanelTaonDraggab
     "de-DE": {
         "": {
             "Close admin panel"?: string;
+            "Full screen"?: string;
+            "Lock full screen"?: string;
+            "Unlock"?: string;
+            "Window mode"?: string;
         };
     };
 }

package/lib/taon-draggable-button-panel/i18n/taon-draggable-button-panel.component.html.de-DE.i18n.data.js

@@ -5,6 +5,26 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
     "fileRelativePath": "src/lib/taon-draggable-button-panel/taon-draggable-button-panel.component.html",
     "tags": [
+        {
+            "gettextString": "Window mode",
+            "lineNumber": 58,
+            "translation": "Fenstermodus"
+        },
+        {
+            "gettextString": "Full screen",
+            "lineNumber": 68,
+            "translation": "Vollbild"
+        },
+        {
+            "gettextString": "Lock full screen",
+            "lineNumber": 78,
+            "translation": "Vollbild sperren"
+        },
+        {
+            "gettextString": "Unlock",
+            "lineNumber": 86,
+            "translation": "Entsperren"
+        },
         {
             "gettextString": "Close admin panel",
             "lineNumber": 97,

package/lib/taon-draggable-button-panel/i18n/taon-draggable-button-panel.component.html.de-DE.i18n.data.js.map

@@ -1 +1 @@
-{"version":3,"file":"taon-draggable-button-panel.component.html.de-DE.i18n.data.js","sourceRoot":"","sources":[""],"names":[],"mappings":";AAAA,yCAAyC;;AAUzC,yCAAyC;AACzC,kBAAe;IACb,kBAAkB,EAAE,gFAAgF;IACpG,MAAM,EAAE;QACN;YACE,eAAe,EAAE,mBAAmB;YACpC,YAAY,EAAE,EAAE;YAChB,aAAa,EAAE,+BAA+B;SAC/C;KACF;CACF,CAAC;AACF,yCAAyC"}
+{"version":3,"file":"taon-draggable-button-panel.component.html.de-DE.i18n.data.js","sourceRoot":"","sources":[""],"names":[],"mappings":";AAAA,yCAAyC;;AAczC,yCAAyC;AACzC,kBAAe;IACb,kBAAkB,EAAE,gFAAgF;IACpG,MAAM,EAAE;QACN;YACE,eAAe,EAAE,aAAa;YAC9B,YAAY,EAAE,EAAE;YAChB,aAAa,EAAE,cAAc;SAC9B;QACD;YACE,eAAe,EAAE,aAAa;YAC9B,YAAY,EAAE,EAAE;YAChB,aAAa,EAAE,UAAU;SAC1B;QACD;YACE,eAAe,EAAE,kBAAkB;YACnC,YAAY,EAAE,EAAE;YAChB,aAAa,EAAE,kBAAkB;SAClC;QACD;YACE,eAAe,EAAE,QAAQ;YACzB,YAAY,EAAE,EAAE;YAChB,aAAa,EAAE,YAAY;SAC5B;QACD;YACE,eAAe,EAAE,mBAAmB;YACpC,YAAY,EAAE,EAAE;YAChB,aAAa,EAAE,+BAA+B;SAC/C;KACF;CACF,CAAC;AACF,yCAAyC"}

package/lib/taon-draggable-button-panel/i18n/taon-draggable-button-panel.component.html.de-DE.po

@@ -0,0 +1,25 @@
+msgid ""
+msgstr ""
+"Language: de-DE\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+
+#: src/lib/taon-draggable-button-panel/taon-draggable-button-panel.component.html:58
+msgid "Window mode"
+msgstr "Fenstermodus"
+
+#: src/lib/taon-draggable-button-panel/taon-draggable-button-panel.component.html:68
+msgid "Full screen"
+msgstr "Vollbild"
+
+#: src/lib/taon-draggable-button-panel/taon-draggable-button-panel.component.html:78
+msgid "Lock full screen"
+msgstr "Vollbild sperren"
+
+#: src/lib/taon-draggable-button-panel/taon-draggable-button-panel.component.html:86
+msgid "Unlock"
+msgstr "Entsperren"
+
+#: src/lib/taon-draggable-button-panel/taon-draggable-button-panel.component.html:97
+msgid "Close admin panel"
+msgstr "Schließen Sie das Admin-Panel"

package/lib/taon-draggable-button-panel/i18n/taon-draggable-button-panel.component.html.en-US.i18n.data.d.ts

@@ -2,15 +2,23 @@ export interface EnUsTraslationOverrideSrcLibTaonDraggableButtonPanelTaonDraggab
     "en-US": {
         "": {
             "Close admin panel"?: string;
+            "Full screen"?: string;
+            "Lock full screen"?: string;
+            "Unlock"?: string;
+            "Window mode"?: string;
         };
     };
 }
 declare const _default: {
     fileRelativePath: string;
-    tags: {
+    tags: ({
+        gettextString: string;
+        lineNumber: number;
+        translation?: undefined;
+    } | {
         gettextString: string;
         lineNumber: number;
         translation: string;
-    }[];
+    })[];
 };
 export default _default;

package/lib/taon-draggable-button-panel/i18n/taon-draggable-button-panel.component.html.en-US.i18n.data.js

@@ -5,6 +5,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
     "fileRelativePath": "src/lib/taon-draggable-button-panel/taon-draggable-button-panel.component.html",
     "tags": [
+        {
+            "gettextString": "Window mode",
+            "lineNumber": 58
+        },
+        {
+            "gettextString": "Full screen",
+            "lineNumber": 68
+        },
+        {
+            "gettextString": "Lock full screen",
+            "lineNumber": 78
+        },
+        {
+            "gettextString": "Unlock",
+            "lineNumber": 86
+        },
         {
             "gettextString": "Close admin panel",
             "lineNumber": 97,

package/lib/taon-draggable-button-panel/i18n/taon-draggable-button-panel.component.html.en-US.i18n.data.js.map

@@ -1 +1 @@
-{"version":3,"file":"taon-draggable-button-panel.component.html.en-US.i18n.data.js","sourceRoot":"","sources":[""],"names":[],"mappings":";AAAA,yCAAyC;;AAUzC,yCAAyC;AACzC,kBAAe;IACb,kBAAkB,EAAE,gFAAgF;IACpG,MAAM,EAAE;QACN;YACE,eAAe,EAAE,mBAAmB;YACpC,YAAY,EAAE,EAAE;YAChB,aAAa,EAAE,mBAAmB;SACnC;KACF;CACF,CAAC;AACF,yCAAyC"}
+{"version":3,"file":"taon-draggable-button-panel.component.html.en-US.i18n.data.js","sourceRoot":"","sources":[""],"names":[],"mappings":";AAAA,yCAAyC;;AAczC,yCAAyC;AACzC,kBAAe;IACb,kBAAkB,EAAE,gFAAgF;IACpG,MAAM,EAAE;QACN;YACE,eAAe,EAAE,aAAa;YAC9B,YAAY,EAAE,EAAE;SACjB;QACD;YACE,eAAe,EAAE,aAAa;YAC9B,YAAY,EAAE,EAAE;SACjB;QACD;YACE,eAAe,EAAE,kBAAkB;YACnC,YAAY,EAAE,EAAE;SACjB;QACD;YACE,eAAe,EAAE,QAAQ;YACzB,YAAY,EAAE,EAAE;SACjB;QACD;YACE,eAAe,EAAE,mBAAmB;YACpC,YAAY,EAAE,EAAE;YAChB,aAAa,EAAE,mBAAmB;SACnC;KACF;CACF,CAAC;AACF,yCAAyC"}

package/lib/taon-draggable-button-panel/i18n/taon-draggable-button-panel.component.html.en-US.po

@@ -0,0 +1,25 @@
+msgid ""
+msgstr ""
+"Language: en-US\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+
+#: src/lib/taon-draggable-button-panel/taon-draggable-button-panel.component.html:58
+msgid "Window mode"
+msgstr ""
+
+#: src/lib/taon-draggable-button-panel/taon-draggable-button-panel.component.html:68
+msgid "Full screen"
+msgstr ""
+
+#: src/lib/taon-draggable-button-panel/taon-draggable-button-panel.component.html:78
+msgid "Lock full screen"
+msgstr ""
+
+#: src/lib/taon-draggable-button-panel/taon-draggable-button-panel.component.html:86
+msgid "Unlock"
+msgstr ""
+
+#: src/lib/taon-draggable-button-panel/taon-draggable-button-panel.component.html:97
+msgid "Close admin panel"
+msgstr "Close admin panel"

package/lib/taon-draggable-button-panel/i18n/taon-draggable-button-panel.component.html.pl-PL.i18n.data.d.ts

@@ -2,6 +2,10 @@ export interface PlPlTraslationOverrideSrcLibTaonDraggableButtonPanelTaonDraggab
     "pl-PL": {
         "": {
             "Close admin panel"?: string;
+            "Full screen"?: string;
+            "Lock full screen"?: string;
+            "Unlock"?: string;
+            "Window mode"?: string;
         };
     };
 }

package/lib/taon-draggable-button-panel/i18n/taon-draggable-button-panel.component.html.pl-PL.i18n.data.js

@@ -5,6 +5,26 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
     "fileRelativePath": "src/lib/taon-draggable-button-panel/taon-draggable-button-panel.component.html",
     "tags": [
+        {
+            "gettextString": "Window mode",
+            "lineNumber": 58,
+            "translation": "Tryb okna"
+        },
+        {
+            "gettextString": "Full screen",
+            "lineNumber": 68,
+            "translation": "Tryb pełnoekranowy"
+        },
+        {
+            "gettextString": "Lock full screen",
+            "lineNumber": 78,
+            "translation": "Tryb pełnoekranowy zablokowany"
+        },
+        {
+            "gettextString": "Unlock",
+            "lineNumber": 86,
+            "translation": "Odblokuj"
+        },
         {
             "gettextString": "Close admin panel",
             "lineNumber": 97,

package/lib/taon-draggable-button-panel/i18n/taon-draggable-button-panel.component.html.pl-PL.i18n.data.js.map

@@ -1 +1 @@
-{"version":3,"file":"taon-draggable-button-panel.component.html.pl-PL.i18n.data.js","sourceRoot":"","sources":[""],"names":[],"mappings":";AAAA,yCAAyC;;AAUzC,yCAAyC;AACzC,kBAAe;IACb,kBAAkB,EAAE,gFAAgF;IACpG,MAAM,EAAE;QACN;YACE,eAAe,EAAE,mBAAmB;YACpC,YAAY,EAAE,EAAE;YAChB,aAAa,EAAE,uBAAuB;SACvC;KACF;CACF,CAAC;AACF,yCAAyC"}
+{"version":3,"file":"taon-draggable-button-panel.component.html.pl-PL.i18n.data.js","sourceRoot":"","sources":[""],"names":[],"mappings":";AAAA,yCAAyC;;AAczC,yCAAyC;AACzC,kBAAe;IACb,kBAAkB,EAAE,gFAAgF;IACpG,MAAM,EAAE;QACN;YACE,eAAe,EAAE,aAAa;YAC9B,YAAY,EAAE,EAAE;YAChB,aAAa,EAAE,WAAW;SAC3B;QACD;YACE,eAAe,EAAE,aAAa;YAC9B,YAAY,EAAE,EAAE;YAChB,aAAa,EAAE,oBAAoB;SACpC;QACD;YACE,eAAe,EAAE,kBAAkB;YACnC,YAAY,EAAE,EAAE;YAChB,aAAa,EAAE,gCAAgC;SAChD;QACD;YACE,eAAe,EAAE,QAAQ;YACzB,YAAY,EAAE,EAAE;YAChB,aAAa,EAAE,UAAU;SAC1B;QACD;YACE,eAAe,EAAE,mBAAmB;YACpC,YAAY,EAAE,EAAE;YAChB,aAAa,EAAE,uBAAuB;SACvC;KACF;CACF,CAAC;AACF,yCAAyC"}

package/lib/taon-draggable-button-panel/i18n/taon-draggable-button-panel.component.html.pl-PL.po

@@ -0,0 +1,25 @@
+msgid ""
+msgstr ""
+"Language: pl-PL\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+
+#: src/lib/taon-draggable-button-panel/taon-draggable-button-panel.component.html:58
+msgid "Window mode"
+msgstr "Tryb okna"
+
+#: src/lib/taon-draggable-button-panel/taon-draggable-button-panel.component.html:68
+msgid "Full screen"
+msgstr "Tryb pełnoekranowy"
+
+#: src/lib/taon-draggable-button-panel/taon-draggable-button-panel.component.html:78
+msgid "Lock full screen"
+msgstr "Tryb pełnoekranowy zablokowany"
+
+#: src/lib/taon-draggable-button-panel/taon-draggable-button-panel.component.html:86
+msgid "Unlock"
+msgstr "Odblokuj"
+
+#: src/lib/taon-draggable-button-panel/taon-draggable-button-panel.component.html:97
+msgid "Close admin panel"
+msgstr "/ Zamknij panel admin"

package/lib/taon-draggable-button-panel/i18n/taon-draggable-button-panel.component.ts.de-DE.po

@@ -0,0 +1,9 @@
+msgid ""
+msgstr ""
+"Language: de-DE\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+
+#: src/lib/taon-draggable-button-panel/taon-draggable-button-panel.component.ts:74
+msgid "Admin"
+msgstr "Admin"

package/lib/taon-draggable-button-panel/i18n/taon-draggable-button-panel.component.ts.en-US.po

@@ -0,0 +1,9 @@
+msgid ""
+msgstr ""
+"Language: en-US\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+
+#: src/lib/taon-draggable-button-panel/taon-draggable-button-panel.component.ts:74
+msgid "Admin"
+msgstr "Admin"

package/lib/taon-draggable-button-panel/i18n/taon-draggable-button-panel.component.ts.pl-PL.po

@@ -0,0 +1,9 @@
+msgid ""
+msgstr ""
+"Language: pl-PL\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+
+#: src/lib/taon-draggable-button-panel/taon-draggable-button-panel.component.ts:74
+msgid "Admin"
+msgstr "Admin"

package/lib/taon-draggable-button-panel/index.d.ts

@@ -1 +1 @@
-export declare function dummy1793760049585(): void;
+export declare function dummy1794345890747(): void;

package/lib/taon-draggable-button-panel/index.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.dummy1793760049585 = dummy1793760049585;
-function dummy1793760049585() { }
+exports.dummy1794345890747 = dummy1794345890747;
+function dummy1794345890747() { }
 //# sourceMappingURL=index.js.map