From 057ff0ca7e7d0b839b6113d161fcfb550d4dc08a Mon Sep 17 00:00:00 2001
From: Danilo Bassi <danilo-bassi@hotmail.com>
Date: Fri, 20 Feb 2026 16:47:29 -0300
Subject: [PATCH 1/2] feat: add metadata to widgets

---
 projects/angular-grid-layout/src/lib/grid.component.ts          | 1 +
 projects/angular-grid-layout/src/lib/grid.definitions.ts        | 1 +
 projects/angular-grid-layout/src/lib/utils/grid.utils.ts        | 2 +-
 .../src/lib/utils/react-grid-layout.utils.ts                    | 2 ++
 4 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/projects/angular-grid-layout/src/lib/grid.component.ts b/projects/angular-grid-layout/src/lib/grid.component.ts
index e24d5b5..fc655b7 100644
--- a/projects/angular-grid-layout/src/lib/grid.component.ts
+++ b/projects/angular-grid-layout/src/lib/grid.component.ts
@@ -702,6 +702,7 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
                                     minH: item.minH,
                                     maxW: item.maxW,
                                     maxH: item.maxH,
+                                    metadata: item.metadata
                                 })) as KtdGridLayout);
                             } else {
                                 // TODO: Need we really to emit if there is no layout change but drag started and ended?
diff --git a/projects/angular-grid-layout/src/lib/grid.definitions.ts b/projects/angular-grid-layout/src/lib/grid.definitions.ts
index b41131c..1fb2404 100644
--- a/projects/angular-grid-layout/src/lib/grid.definitions.ts
+++ b/projects/angular-grid-layout/src/lib/grid.definitions.ts
@@ -13,6 +13,7 @@ export interface KtdGridLayoutItem {
     minH?: number;
     maxW?: number;
     maxH?: number;
+    metadata?: any;
 }
 
 export type KtdGridCompactType = CompactType;
diff --git a/projects/angular-grid-layout/src/lib/utils/grid.utils.ts b/projects/angular-grid-layout/src/lib/utils/grid.utils.ts
index f4eca5b..02bd8fd 100644
--- a/projects/angular-grid-layout/src/lib/utils/grid.utils.ts
+++ b/projects/angular-grid-layout/src/lib/utils/grid.utils.ts
@@ -29,7 +29,7 @@ export function ktdGetGridItemRowHeight(layout: KtdGridLayout, gridHeight: numbe
 export function ktdGridCompact(layout: KtdGridLayout, compactType: KtdGridCompactType, cols: number): KtdGridLayout {
     return compact(layout, compactType, cols)
         // Prune react-grid-layout compact extra properties.
-        .map(item => ({ id: item.id, x: item.x, y: item.y, w: item.w, h: item.h, minW: item.minW, minH: item.minH, maxW: item.maxW, maxH: item.maxH }));
+        .map(item => ({ id: item.id, x: item.x, y: item.y, w: item.w, h: item.h, minW: item.minW, minH: item.minH, maxW: item.maxW, maxH: item.maxH, metadata: item.metadata }));
 }
 
 /**
diff --git a/projects/angular-grid-layout/src/lib/utils/react-grid-layout.utils.ts b/projects/angular-grid-layout/src/lib/utils/react-grid-layout.utils.ts
index 58bf306..40311ba 100644
--- a/projects/angular-grid-layout/src/lib/utils/react-grid-layout.utils.ts
+++ b/projects/angular-grid-layout/src/lib/utils/react-grid-layout.utils.ts
@@ -20,6 +20,7 @@ export type LayoutItem = {
     static?: boolean;
     isDraggable?: boolean | null | undefined;
     isResizable?: boolean | null | undefined;
+    metadata?: any;
 };
 export type Layout = Array<LayoutItem>;
 export type Position = {
@@ -110,6 +111,7 @@ export function cloneLayoutItem(layoutItem: LayoutItem): LayoutItem {
         id: layoutItem.id,
         moved: !!layoutItem.moved,
         static: !!layoutItem.static,
+        metadata: layoutItem.metadata,
     };
 
     if (layoutItem.minW !== undefined) { clonedLayoutItem.minW = layoutItem.minW;}

From 017e698105ca107eea87558138376bc907eb4923 Mon Sep 17 00:00:00 2001
From: Danilo Bassi <danilo-bassi@hotmail.com>
Date: Fri, 20 Feb 2026 17:38:59 -0300
Subject: [PATCH 2/2] feat(demo-app): updated example to use metadata

---
 .../app/playground/playground.component.html  |  6 ++-
 .../app/playground/playground.component.scss  | 27 +++++++++++++
 .../app/playground/playground.component.ts    | 38 ++++++++++++-------
 3 files changed, 56 insertions(+), 15 deletions(-)

diff --git a/projects/demo-app/src/app/playground/playground.component.html b/projects/demo-app/src/app/playground/playground.component.html
index c1b8aad..9088110 100644
--- a/projects/demo-app/src/app/playground/playground.component.html
+++ b/projects/demo-app/src/app/playground/playground.component.html
@@ -177,7 +177,11 @@
                            [dragStartThreshold]="dragStartThreshold"
                            [draggable]="!disableDrag"
                            [resizable]="!disableResize">
-                <div class="grid-item-content">{{item.id}}</div>
+                <div class="grid-item-content">
+                    <div class="content-wrapper" [style.--indicator-color]="item.metadata?.color">
+                        <div class="metadata-indicator">{{item.id}}</div>
+                    </div>
+                </div>
                 <div class="grid-item-remove-handle"
                      *ngIf="!disableRemove"
                      (mousedown)="stopEventPropagation($event)"
diff --git a/projects/demo-app/src/app/playground/playground.component.scss b/projects/demo-app/src/app/playground/playground.component.scss
index c629d6d..e84024f 100644
--- a/projects/demo-app/src/app/playground/playground.component.scss
+++ b/projects/demo-app/src/app/playground/playground.component.scss
@@ -27,6 +27,33 @@
         border-radius: 2px;
     }
 
+    .metadata-indicator {
+        position: absolute;
+        width: 30px;
+        height: 30px;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        border: 2px solid var(--indicator-color);
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        &:before {
+            content: "";
+            position: absolute;
+            top: -2px;
+            left: -2px;
+            width: calc(100% + 4px);
+            height: calc(100% + 4px);
+            background-color: var(--indicator-color);
+            border-radius: 50%;
+            opacity: 0.2;
+            z-index: -1;
+        }
+    }
+
     ktd-grid-item {
         color: #121212;
     }
diff --git a/projects/demo-app/src/app/playground/playground.component.ts b/projects/demo-app/src/app/playground/playground.component.ts
index 51356b1..c19da17 100644
--- a/projects/demo-app/src/app/playground/playground.component.ts
+++ b/projects/demo-app/src/app/playground/playground.component.ts
@@ -16,6 +16,13 @@ import { MatOptionModule } from '@angular/material/core';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatButtonModule } from '@angular/material/button';
 
+function randomRgbColor(): string {
+  const r = Math.floor(Math.random() * 256);
+  const g = Math.floor(Math.random() * 256);
+  const b = Math.floor(Math.random() * 256);
+  return `rgb(${r}, ${g}, ${b})`;
+}
+
 @Component({
     standalone: true,
     selector: 'ktd-playground',
@@ -33,19 +40,20 @@ export class KtdPlaygroundComponent implements OnInit, OnDestroy {
     gridHeight: null | number = null;
     compactType: 'vertical' | 'horizontal' | null = 'vertical';
     layout: KtdGridLayout = [
-        {id: '0', x: 5, y: 0, w: 2, h: 3},
-        {id: '1', x: 2, y: 2, w: 1, h: 2},
-        {id: '2', x: 3, y: 7, w: 1, h: 2},
-        {id: '3', x: 2, y: 0, w: 3, h: 2},
-        {id: '4', x: 5, y: 3, w: 2, h: 3},
-        {id: '5', x: 0, y: 4, w: 1, h: 3},
-        {id: '6', x: 9, y: 0, w: 2, h: 4},
-        {id: '7', x: 9, y: 4, w: 2, h: 2},
-        {id: '8', x: 3, y: 2, w: 2, h: 5},
-        {id: '9', x: 7, y: 0, w: 1, h: 3},
-        {id: '10', x: 2, y: 4, w: 1, h: 4},
-        {id: '11', x: 0, y: 0, w: 2, h: 4}
+        {id: '0', x: 5, y: 0, w: 2, h: 3, metadata: {color: randomRgbColor()}},
+        {id: '1', x: 2, y: 2, w: 1, h: 2, metadata: {color: randomRgbColor()}},
+        {id: '2', x: 3, y: 7, w: 1, h: 2, metadata: {color: randomRgbColor()}},
+        {id: '3', x: 2, y: 0, w: 3, h: 2, metadata: {color: randomRgbColor()}},
+        {id: '4', x: 5, y: 3, w: 2, h: 3, metadata: {color: randomRgbColor()}},
+        {id: '5', x: 0, y: 4, w: 1, h: 3, metadata: {color: randomRgbColor()}},
+        {id: '6', x: 9, y: 0, w: 2, h: 4, metadata: {color: randomRgbColor()}},
+        {id: '7', x: 9, y: 4, w: 2, h: 2, metadata: {color: randomRgbColor()}},
+        {id: '8', x: 3, y: 2, w: 2, h: 5, metadata: {color: randomRgbColor()}},
+        {id: '9', x: 7, y: 0, w: 1, h: 3, metadata: {color: randomRgbColor()}},
+        {id: '10', x: 2, y: 4, w: 1, h: 4, metadata: {color: randomRgbColor()}},
+        {id: '11', x: 0, y: 0, w: 2, h: 4, metadata: {color: randomRgbColor()}}
     ];
+
     transitions: { name: string, value: string }[] = [
         {name: 'ease', value: 'transform 500ms ease, width 500ms ease, height 500ms ease'},
         {name: 'ease-out', value: 'transform 500ms ease-out, width 500ms ease-out, height 500ms ease-out'},
@@ -211,7 +219,8 @@ export class KtdPlaygroundComponent implements OnInit, OnDestroy {
                 y: Math.floor(i / 6) * y,
                 w: 2,
                 h: y,
-                id: i.toString()
+                id: i.toString(),
+                metadata: {color: randomRgbColor()}
                 // static: Math.random() < 0.05
             });
         }
@@ -229,7 +238,8 @@ export class KtdPlaygroundComponent implements OnInit, OnDestroy {
             x: -1,
             y: -1,
             w: 2,
-            h: 2
+            h: 2,
+            metadata: {color: randomRgbColor()}
         };
 
         // Important: Don't mutate the array, create new instance. This way notifies the Grid component that the layout has changed.