@toolbox-web/grid-angular 0.3.0 → 0.4.0

package/index.d.ts

@@ -15,6 +15,8 @@ export { GridColumnView } from './lib/directives/grid-column-view.directive';
 export type { GridCellContext } from './lib/directives/grid-column-view.directive';
 export { GridDetailView } from './lib/directives/grid-detail-view.directive';
 export type { GridDetailContext } from './lib/directives/grid-detail-view.directive';
+export { GridResponsiveCard } from './lib/directives/grid-responsive-card.directive';
+export type { GridResponsiveCardContext } from './lib/directives/grid-responsive-card.directive';
 export { GridToolPanel } from './lib/directives/grid-tool-panel.directive';
 export type { GridToolPanelContext } from './lib/directives/grid-tool-panel.directive';
 export { Grid } from './lib/directives/grid.directive';

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../libs/grid-angular/src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAGhE,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,YAAY,EACV,iBAAiB,EACjB,mBAAmB,EACnB,mBAAmB,EACnB,iBAAiB,GAClB,MAAM,6BAA6B,CAAC;AAGrC,OAAO,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AACzG,YAAY,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAGnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,+CAA+C,CAAC;AACjF,YAAY,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AACvF,OAAO,EAAE,cAAc,EAAE,MAAM,6CAA6C,CAAC;AAC7E,YAAY,EAAE,eAAe,EAAE,MAAM,6CAA6C,CAAC;AACnF,OAAO,EAAE,cAAc,EAAE,MAAM,6CAA6C,CAAC;AAC7E,YAAY,EAAE,iBAAiB,EAAE,MAAM,6CAA6C,CAAC;AACrF,OAAO,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AAC3E,YAAY,EAAE,oBAAoB,EAAE,MAAM,4CAA4C,CAAC;AACvF,OAAO,EAAE,IAAI,EAAE,MAAM,iCAAiC,CAAC;AACvD,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAGvF,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAChF,YAAY,EAAE,qBAAqB,EAAE,uBAAuB,EAAE,MAAM,wCAAwC,CAAC;AAG7G,OAAO,EAAE,SAAS,IAAI,aAAa,EAAE,WAAW,IAAI,WAAW,EAAE,MAAM,wCAAwC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../libs/grid-angular/src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAGhE,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,YAAY,EACV,iBAAiB,EACjB,mBAAmB,EACnB,mBAAmB,EACnB,iBAAiB,GAClB,MAAM,6BAA6B,CAAC;AAGrC,OAAO,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AACzG,YAAY,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAGnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,+CAA+C,CAAC;AACjF,YAAY,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AACvF,OAAO,EAAE,cAAc,EAAE,MAAM,6CAA6C,CAAC;AAC7E,YAAY,EAAE,eAAe,EAAE,MAAM,6CAA6C,CAAC;AACnF,OAAO,EAAE,cAAc,EAAE,MAAM,6CAA6C,CAAC;AAC7E,YAAY,EAAE,iBAAiB,EAAE,MAAM,6CAA6C,CAAC;AACrF,OAAO,EAAE,kBAAkB,EAAE,MAAM,iDAAiD,CAAC;AACrF,YAAY,EAAE,yBAAyB,EAAE,MAAM,iDAAiD,CAAC;AACjG,OAAO,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AAC3E,YAAY,EAAE,oBAAoB,EAAE,MAAM,4CAA4C,CAAC;AACvF,OAAO,EAAE,IAAI,EAAE,MAAM,iCAAiC,CAAC;AACvD,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAGvF,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAChF,YAAY,EAAE,qBAAqB,EAAE,uBAAuB,EAAE,MAAM,wCAAwC,CAAC;AAG7G,OAAO,EAAE,SAAS,IAAI,aAAa,EAAE,WAAW,IAAI,WAAW,EAAE,MAAM,wCAAwC,CAAC"}

package/index.js

@@ -1,31 +1,31 @@
-var Se = Object.create;
-var P = Object.defineProperty;
-var Ie = Object.getOwnPropertyDescriptor;
-var ne = (n, e) => (e = Symbol[n]) ? e : /* @__PURE__ */ Symbol.for("Symbol." + n), D = (n) => {
+var Oe = Object.create;
+var O = Object.defineProperty;
+var Ne = Object.getOwnPropertyDescriptor;
+var ie = (n, e) => (e = Symbol[n]) ? e : /* @__PURE__ */ Symbol.for("Symbol." + n), D = (n) => {
   throw TypeError(n);
 };
-var je = (n, e, t) => e in n ? P(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
-var Z = (n, e) => P(n, "name", { value: e, configurable: !0 });
-var h = (n) => [, , , Se(n?.[ne("metadata")] ?? null)], ie = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], A = (n) => n !== void 0 && typeof n != "function" ? D("Function expected") : n, Oe = (n, e, t, i, r) => ({ kind: ie[n], name: e, metadata: i, addInitializer: (s) => t._ ? D("Already initialized") : r.push(A(s || null)) }), Pe = (n, e) => je(e, ne("metadata"), n[3]), g = (n, e, t, i) => {
-  for (var r = 0, s = n[e >> 1], a = s && s.length; r < a; r++) e & 1 ? s[r].call(t) : i = s[r].call(t, i);
-  return i;
-}, w = (n, e, t, i, r, s) => {
-  var a, l, y, u, d, o = e & 7, T = !!(e & 8), f = !!(e & 16), I = o > 3 ? n.length + 1 : o ? T ? 1 : 2 : 0, Q = ie[o + 5], X = o > 3 && (n[I - 1] = []), Le = n[I] || (n[I] = []), p = o && (!f && !T && (r = r.prototype), o < 5 && (o > 3 || !f) && Ie(o < 4 ? r : { get [t]() {
-    return ee(this, s);
-  }, set [t](c) {
-    return te(this, s, c);
+var Me = (n, e, t) => e in n ? O(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
+var te = (n, e) => O(n, "name", { value: e, configurable: !0 });
+var h = (n) => [, , , Oe(n?.[ie("metadata")] ?? null)], se = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"], A = (n) => n !== void 0 && typeof n != "function" ? D("Function expected") : n, Ve = (n, e, t, r, i) => ({ kind: se[n], name: e, metadata: r, addInitializer: (s) => t._ ? D("Already initialized") : i.push(A(s || null)) }), _e = (n, e) => Me(e, ie("metadata"), n[3]), g = (n, e, t, r) => {
+  for (var i = 0, s = n[e >> 1], o = s && s.length; i < o; i++) e & 1 ? s[i].call(t) : r = s[i].call(t, r);
+  return r;
+}, v = (n, e, t, r, i, s) => {
+  var o, l, w, u, d, a = e & 7, T = !!(e & 8), f = !!(e & 16), S = a > 3 ? n.length + 1 : a ? T ? 1 : 2 : 0, Z = se[a + 5], ee = a > 3 && (n[S - 1] = []), je = n[S] || (n[S] = []), p = a && (!f && !T && (i = i.prototype), a < 5 && (a > 3 || !f) && Ne(a < 4 ? i : { get [t]() {
+    return ne(this, s);
+  }, set [t](m) {
+    return re(this, s, m);
   } }, t));
-  o ? f && o < 4 && Z(s, (o > 2 ? "set " : o > 1 ? "get " : "") + t) : Z(r, t);
-  for (var j = i.length - 1; j >= 0; j--)
-    u = Oe(o, t, y = {}, n[3], Le), o && (u.static = T, u.private = f, d = u.access = { has: f ? (c) => Ne(r, c) : (c) => t in c }, o ^ 3 && (d.get = f ? (c) => (o ^ 1 ? ee : Me)(c, r, o ^ 4 ? s : p.get) : (c) => c[t]), o > 2 && (d.set = f ? (c, O) => te(c, r, O, o ^ 4 ? s : p.set) : (c, O) => c[t] = O)), l = (0, i[j])(o ? o < 4 ? f ? s : p[Q] : o > 4 ? void 0 : { get: p.get, set: p.set } : r, u), y._ = 1, o ^ 4 || l === void 0 ? A(l) && (o > 4 ? X.unshift(l) : o ? f ? s = l : p[Q] = l : r = l) : typeof l != "object" || l === null ? D("Object expected") : (A(a = l.get) && (p.get = a), A(a = l.set) && (p.set = a), A(a = l.init) && X.unshift(a));
-  return o || Pe(n, r), p && P(r, t, p), f ? o ^ 4 ? s : p : r;
+  a ? f && a < 4 && te(s, (a > 2 ? "set " : a > 1 ? "get " : "") + t) : te(i, t);
+  for (var I = r.length - 1; I >= 0; I--)
+    u = Ve(a, t, w = {}, n[3], je), a && (u.static = T, u.private = f, d = u.access = { has: f ? (m) => xe(i, m) : (m) => t in m }, a ^ 3 && (d.get = f ? (m) => (a ^ 1 ? ne : qe)(m, i, a ^ 4 ? s : p.get) : (m) => m[t]), a > 2 && (d.set = f ? (m, j) => re(m, i, j, a ^ 4 ? s : p.set) : (m, j) => m[t] = j)), l = (0, r[I])(a ? a < 4 ? f ? s : p[Z] : a > 4 ? void 0 : { get: p.get, set: p.set } : i, u), w._ = 1, a ^ 4 || l === void 0 ? A(l) && (a > 4 ? ee.unshift(l) : a ? f ? s = l : p[Z] = l : i = l) : typeof l != "object" || l === null ? D("Object expected") : (A(o = l.get) && (p.get = o), A(o = l.set) && (p.set = o), A(o = l.init) && ee.unshift(o));
+  return a || _e(n, i), p && O(i, t, p), f ? a ^ 4 ? s : p : i;
 };
-var N = (n, e, t) => e.has(n) || D("Cannot " + t), Ne = (n, e) => Object(e) !== e ? D('Cannot use the "in" operator on this value') : n.has(e), ee = (n, e, t) => (N(n, e, "read from private field"), t ? t.call(n) : e.get(n));
-var te = (n, e, t, i) => (N(n, e, "write to private field"), i ? i.call(n, t) : e.set(n, t), t), Me = (n, e, t) => (N(n, e, "access private method"), t);
-import { inject as m, ElementRef as v, contentChild as S, TemplateRef as b, effect as C, Directive as E, input as R, InjectionToken as Ve, Injectable as _e, makeEnvironmentProviders as qe, EventEmitter as re, createComponent as se, EnvironmentInjector as Ge, ApplicationRef as ke, ViewContainerRef as xe, output as oe } from "@angular/core";
-import { DataGridElement as Ue } from "@toolbox-web/grid";
-import { MasterDetailPlugin as ae } from "@toolbox-web/grid/all";
-function le(n) {
+var N = (n, e, t) => e.has(n) || D("Cannot " + t), xe = (n, e) => Object(e) !== e ? D('Cannot use the "in" operator on this value') : n.has(e), ne = (n, e, t) => (N(n, e, "read from private field"), t ? t.call(n) : e.get(n));
+var re = (n, e, t, r) => (N(n, e, "write to private field"), r ? r.call(n, t) : e.set(n, t), t), qe = (n, e, t) => (N(n, e, "access private method"), t);
+import { inject as c, ElementRef as C, contentChild as L, TemplateRef as b, effect as E, Directive as y, input as R, InjectionToken as ke, Injectable as $e, makeEnvironmentProviders as Ge, EventEmitter as oe, createComponent as ae, EnvironmentInjector as Ue, ApplicationRef as We, ViewContainerRef as Fe, output as le } from "@angular/core";
+import { DataGridElement as He } from "@toolbox-web/grid";
+import { MasterDetailPlugin as ce, ResponsivePlugin as Be } from "@toolbox-web/grid/all";
+function me(n) {
   if (typeof n != "function" || n.prototype === void 0)
     return !1;
   if (Object.prototype.hasOwnProperty.call(n, "ɵcmp") || Object.prototype.hasOwnProperty.call(n, "ɵfac"))
@@ -33,22 +33,22 @@ function le(n) {
   const e = Function.prototype.toString.call(n);
   return e.startsWith("class ") || e.startsWith("class{");
 }
-const Ce = /* @__PURE__ */ new Map();
-function Ee(n) {
-  return Ce.get(n);
+const be = /* @__PURE__ */ new Map();
+function Te(n) {
+  return be.get(n);
 }
-var de, U;
-de = [E({ selector: "tbw-grid-column-editor" })];
+var fe, U;
+fe = [y({ selector: "tbw-grid-column-editor" })];
 class M {
-  elementRef = m(v);
+  elementRef = c(C);
   /**
    * Query for the ng-template content child.
    */
-  template = S(b);
+  template = L(b);
   /** Effect that triggers when the template is available */
-  onTemplateReceived = C(() => {
+  onTemplateReceived = E(() => {
     const e = this.template();
-    e && Ce.set(this.elementRef.nativeElement, e);
+    e && be.set(this.elementRef.nativeElement, e);
   });
   /**
    * Static type guard for template context.
@@ -58,23 +58,23 @@ class M {
     return !0;
   }
 }
-U = h(null), M = w(U, 0, "GridColumnEditor", de, M), g(U, 1, M);
-const ye = /* @__PURE__ */ new Map();
-function be(n) {
-  return ye.get(n);
+U = h(null), M = v(U, 0, "GridColumnEditor", fe, M), g(U, 1, M);
+const Ae = /* @__PURE__ */ new Map();
+function De(n) {
+  return Ae.get(n);
 }
-var pe, $;
-pe = [E({ selector: "tbw-grid-column-view" })];
+var he, W;
+he = [y({ selector: "tbw-grid-column-view" })];
 class V {
-  elementRef = m(v);
+  elementRef = c(C);
   /**
    * Query for the ng-template content child.
    */
-  template = S(b);
+  template = L(b);
   /** Effect that triggers when the template is available */
-  onTemplateReceived = C(() => {
+  onTemplateReceived = E(() => {
     const e = this.template();
-    e && ye.set(this.elementRef.nativeElement, e);
+    e && Ae.set(this.elementRef.nativeElement, e);
   });
   /**
    * Static type guard for template context.
@@ -84,17 +84,17 @@ class V {
     return !0;
   }
 }
-$ = h(null), V = w($, 0, "GridColumnView", pe, V), g($, 1, V);
-const Te = /* @__PURE__ */ new Map();
-function ce(n) {
+W = h(null), V = v(W, 0, "GridColumnView", he, V), g(W, 1, V);
+const Le = /* @__PURE__ */ new Map();
+function ue(n) {
   const e = n.querySelector("tbw-grid-detail");
   if (e)
-    return Te.get(e);
+    return Le.get(e);
 }
-var fe, W;
-fe = [E({ selector: "tbw-grid-detail" })];
+var ge, F;
+ge = [y({ selector: "tbw-grid-detail" })];
 class _ {
-  elementRef = m(v);
+  elementRef = c(C);
   /** Whether to show the expand/collapse column. Default: true */
   showExpandColumn = R(!0);
   /** Animation style for expand/collapse. Default: 'slide' */
@@ -102,11 +102,11 @@ class _ {
   /**
    * Query for the ng-template content child.
    */
-  template = S(b);
+  template = L(b);
   /** Effect that triggers when the template is available */
-  onTemplateReceived = C(() => {
+  onTemplateReceived = E(() => {
     const e = this.template();
-    e && Te.set(this.elementRef.nativeElement, e);
+    e && Le.set(this.elementRef.nativeElement, e);
   });
   /**
    * Static type guard for template context.
@@ -116,15 +116,49 @@ class _ {
     return !0;
   }
 }
-W = h(null), _ = w(W, 0, "GridDetailView", fe, _), g(W, 1, _);
-const Ae = /* @__PURE__ */ new Map();
-function $e(n) {
-  return Ae.get(n);
+F = h(null), _ = v(F, 0, "GridDetailView", ge, _), g(F, 1, _);
+const Pe = /* @__PURE__ */ new Map();
+function Ye(n) {
+  const e = n.querySelector("tbw-grid-responsive-card");
+  if (e)
+    return Pe.get(e);
 }
-var he, F;
-he = [E({ selector: "tbw-grid-tool-panel" })];
+var ve, H;
+ve = [y({
+  selector: "tbw-grid-responsive-card"
+})];
+class x {
+  elementRef = c(C);
+  /**
+   * The ng-template containing the card content.
+   */
+  template = L(b);
+  /**
+   * Effect that registers the template when it becomes available.
+   */
+  onTemplateReceived = E(() => {
+    const e = this.template();
+    e && Pe.set(
+      this.elementRef.nativeElement,
+      e
+    );
+  });
+  /**
+   * Type guard for template context inference.
+   */
+  static ngTemplateContextGuard(e, t) {
+    return !0;
+  }
+}
+H = h(null), x = v(H, 0, "GridResponsiveCard", ve, x), g(H, 1, x);
+const Se = /* @__PURE__ */ new Map();
+function ze(n) {
+  return Se.get(n);
+}
+var Re, B;
+Re = [y({ selector: "tbw-grid-tool-panel" })];
 class q {
-  elementRef = m(v);
+  elementRef = c(C);
   /** Unique panel identifier (required) */
   id = R.required({ alias: "id" });
   /** Panel title shown in accordion header (required) */
@@ -138,16 +172,16 @@ class q {
   /**
    * Query for the ng-template content child.
    */
-  template = S(b);
+  template = L(b);
   /** Effect that triggers when the template is available */
-  onTemplateReceived = C(() => {
+  onTemplateReceived = E(() => {
     const e = this.template(), t = this.elementRef.nativeElement;
     if (e) {
       t.setAttribute("id", this.id()), t.setAttribute("title", this.title());
-      const i = this.icon();
-      i && t.setAttribute("icon", i);
-      const r = this.tooltip();
-      r && t.setAttribute("tooltip", r), t.setAttribute("order", String(this.order())), Ae.set(t, e);
+      const r = this.icon();
+      r && t.setAttribute("icon", r);
+      const i = this.tooltip();
+      i && t.setAttribute("tooltip", i), t.setAttribute("order", String(this.order())), Se.set(t, e);
     }
   });
   /**
@@ -158,30 +192,30 @@ class q {
     return !0;
   }
 }
-F = h(null), q = w(F, 0, "GridToolPanel", he, q), g(F, 1, q);
-const J = /* @__PURE__ */ new Map(), K = /* @__PURE__ */ new Map();
-function We(n) {
-  const e = J.get(n);
+B = h(null), q = v(B, 0, "GridToolPanel", Re, q), g(B, 1, q);
+const Q = /* @__PURE__ */ new Map(), X = /* @__PURE__ */ new Map();
+function Je(n) {
+  const e = Q.get(n);
   if (e) return e;
   const t = n.querySelector("tbw-grid-column-view");
   if (t)
-    return be(t);
+    return De(t);
 }
-function Fe(n) {
-  const e = K.get(n);
+function Ke(n) {
+  const e = X.get(n);
   if (e) return e;
   const t = n.querySelector("tbw-grid-column-editor");
   if (t)
-    return Ee(t);
+    return Te(t);
 }
-var ge, H;
-ge = [E({ selector: "[tbwRenderer]" })];
-class G {
-  template = m(b);
-  elementRef = m(v);
+var we, Y;
+we = [y({ selector: "[tbwRenderer]" })];
+class k {
+  template = c(b);
+  elementRef = c(C);
   columnElement = null;
   constructor() {
-    C(() => {
+    E(() => {
       this.registerTemplate();
     });
   }
@@ -189,10 +223,10 @@ class G {
     let e = this.elementRef.nativeElement?.parentElement;
     for (; e && e.tagName !== "TBW-GRID-COLUMN"; )
       e = e.parentElement;
-    e && (this.columnElement = e, J.set(e, this.template));
+    e && (this.columnElement = e, Q.set(e, this.template));
   }
   ngOnDestroy() {
-    this.columnElement && J.delete(this.columnElement);
+    this.columnElement && Q.delete(this.columnElement);
   }
   /**
    * Static type guard for template context.
@@ -202,15 +236,15 @@ class G {
     return !0;
   }
 }
-H = h(null), G = w(H, 0, "TbwRenderer", ge, G), g(H, 1, G);
-var we, B;
-we = [E({ selector: "[tbwEditor]" })];
-class k {
-  template = m(b);
-  elementRef = m(v);
+Y = h(null), k = v(Y, 0, "TbwRenderer", we, k), g(Y, 1, k);
+var Ce, z;
+Ce = [y({ selector: "[tbwEditor]" })];
+class $ {
+  template = c(b);
+  elementRef = c(C);
   columnElement = null;
   constructor() {
-    C(() => {
+    E(() => {
       this.registerTemplate();
     });
   }
@@ -218,10 +252,10 @@ class k {
     let e = this.elementRef.nativeElement?.parentElement;
     for (; e && e.tagName !== "TBW-GRID-COLUMN"; )
       e = e.parentElement;
-    e && (this.columnElement = e, K.set(e, this.template));
+    e && (this.columnElement = e, X.set(e, this.template));
   }
   ngOnDestroy() {
-    this.columnElement && K.delete(this.columnElement);
+    this.columnElement && X.delete(this.columnElement);
   }
   /**
    * Static type guard for template context.
@@ -231,17 +265,17 @@ class k {
     return !0;
   }
 }
-B = h(null), k = w(B, 0, "TbwEditor", we, k), g(B, 1, k);
-const De = new Ve("GRID_TYPE_DEFAULTS");
-var Re, Y;
-Re = [_e({ providedIn: "root" })];
-class L {
+z = h(null), $ = v(z, 0, "TbwEditor", Ce, $), g(z, 1, $);
+const Ie = new ke("GRID_TYPE_DEFAULTS");
+var Ee, J;
+Ee = [$e({ providedIn: "root" })];
+class P {
   defaults = /* @__PURE__ */ new Map();
   constructor() {
-    const e = m(De, { optional: !0 });
+    const e = c(Ie, { optional: !0 });
     if (e)
-      for (const [t, i] of Object.entries(e))
-        this.defaults.set(t, i);
+      for (const [t, r] of Object.entries(e))
+        this.defaults.set(t, r);
   }
   /**
    * Register type-level defaults for a custom type.
@@ -292,23 +326,23 @@ class L {
       };
   }
 }
-Y = h(null), L = w(Y, 0, "GridTypeRegistry", Re, L), g(Y, 1, L);
-function Ke(n) {
-  return qe([{ provide: De, useValue: n }]);
+J = h(null), P = v(J, 0, "GridTypeRegistry", Ee, P), g(J, 1, P);
+function nt(n) {
+  return Ge([{ provide: Ie, useValue: n }]);
 }
-function me(n) {
-  const e = We(n);
-  return e || be(n);
+function de(n) {
+  const e = Je(n);
+  return e || De(n);
 }
-function ue(n) {
-  const e = Fe(n);
-  return e || Ee(n);
+function pe(n) {
+  const e = Ke(n);
+  return e || Te(n);
 }
-class He {
-  constructor(e, t, i) {
-    this.injector = e, this.appRef = t, this.viewContainerRef = i, window.__ANGULAR_GRID_ADAPTER__ = this;
+class Qe {
+  constructor(e, t, r) {
+    this.injector = e, this.appRef = t, this.viewContainerRef = r, window.__ANGULAR_GRID_ADAPTER__ = this;
     try {
-      this.typeRegistry = this.injector.get(L, null);
+      this.typeRegistry = this.injector.get(P, null);
     } catch {
     }
   }
@@ -344,7 +378,7 @@ class He {
   processGridConfig(e) {
     if (!e.columns)
       return e;
-    const t = e.columns.map((i) => this.processColumn(i));
+    const t = e.columns.map((r) => this.processColumn(r));
     return {
       ...e,
       columns: t
@@ -359,14 +393,14 @@ class He {
    */
   processColumn(e) {
     const t = { ...e };
-    return e.renderer && le(e.renderer) && (t.renderer = this.createComponentRenderer(e.renderer)), e.editor && le(e.editor) && (t.editor = this.createComponentEditor(e.editor)), t;
+    return e.renderer && me(e.renderer) && (t.renderer = this.createComponentRenderer(e.renderer)), e.editor && me(e.editor) && (t.editor = this.createComponentEditor(e.editor)), t;
   }
   /**
    * Determines if this adapter can handle the given element.
    * Checks if a template is registered for this element (structural or nested).
    */
   canHandle(e) {
-    return me(e) !== void 0 || ue(e) !== void 0;
+    return de(e) !== void 0 || pe(e) !== void 0;
   }
   /**
    * Creates a view renderer function that creates an embedded view
@@ -376,15 +410,15 @@ class He {
    * allowing the grid to use its default rendering.
    */
   createRenderer(e) {
-    const t = me(e);
+    const t = de(e);
     if (t)
-      return (i) => {
-        const r = {
-          $implicit: i.value,
-          value: i.value,
-          row: i.row,
-          column: i.column
-        }, s = this.viewContainerRef.createEmbeddedView(t, r);
+      return (r) => {
+        const i = {
+          $implicit: r.value,
+          value: r.value,
+          row: r.row,
+          column: r.column
+        }, s = this.viewContainerRef.createEmbeddedView(t, i);
         return this.viewRefs.push(s), s.detectChanges(), s.rootNodes[0];
       };
   }
@@ -407,29 +441,29 @@ class He {
    * As long as the component emits `(commit)` with the new value.
    */
   createEditor(e) {
-    const t = ue(e);
-    return t ? (i) => {
-      const r = (o) => i.commit(o), s = () => i.cancel(), a = new re(), l = new re();
-      a.subscribe((o) => i.commit(o)), l.subscribe(() => i.cancel());
-      const y = {
-        $implicit: i.value,
-        value: i.value,
-        row: i.row,
-        column: i.column,
+    const t = pe(e);
+    return t ? (r) => {
+      const i = (a) => r.commit(a), s = () => r.cancel(), o = new oe(), l = new oe();
+      o.subscribe((a) => r.commit(a)), l.subscribe(() => r.cancel());
+      const w = {
+        $implicit: r.value,
+        value: r.value,
+        row: r.row,
+        column: r.column,
         // Preferred: simple callback functions
-        onCommit: r,
+        onCommit: i,
         onCancel: s,
         // Deprecated: EventEmitters (for backwards compatibility)
-        commit: a,
+        commit: o,
         cancel: l
-      }, u = this.viewContainerRef.createEmbeddedView(t, y);
+      }, u = this.viewContainerRef.createEmbeddedView(t, w);
       this.viewRefs.push(u), u.detectChanges();
       const d = u.rootNodes[0];
-      return d && d.addEventListener && (d.addEventListener("commit", (o) => {
-        const T = o;
-        i.commit(T.detail);
+      return d && d.addEventListener && (d.addEventListener("commit", (a) => {
+        const T = a;
+        r.commit(T.detail);
       }), d.addEventListener("cancel", () => {
-        i.cancel();
+        r.cancel();
       })), d;
     } : (console.warn("[AngularGridAdapter] No editor template registered for element"), () => document.createElement("div"));
   }
@@ -438,16 +472,16 @@ class He {
    * Renders Angular templates for expandable detail rows.
    */
   createDetailRenderer(e) {
-    const t = ce(e);
+    const t = ue(e);
     if (t)
-      return (i) => {
-        const r = {
-          $implicit: i,
-          row: i
-        }, s = this.viewContainerRef.createEmbeddedView(t, r);
+      return (r) => {
+        const i = {
+          $implicit: r,
+          row: r
+        }, s = this.viewContainerRef.createEmbeddedView(t, i);
         this.viewRefs.push(s), s.detectChanges();
-        const a = document.createElement("div");
-        return s.rootNodes.forEach((l) => a.appendChild(l)), a;
+        const o = document.createElement("div");
+        return s.rootNodes.forEach((l) => o.appendChild(l)), o;
       };
   }
   /**
@@ -458,16 +492,37 @@ class He {
    * without manual configuration in the Grid directive.
    */
   parseDetailElement(e) {
-    const t = ce(e.closest("tbw-grid"));
+    const t = ue(e.closest("tbw-grid"));
     if (t)
-      return (i) => {
-        const r = {
-          $implicit: i,
-          row: i
-        }, s = this.viewContainerRef.createEmbeddedView(t, r);
+      return (r) => {
+        const i = {
+          $implicit: r,
+          row: r
+        }, s = this.viewContainerRef.createEmbeddedView(t, i);
         this.viewRefs.push(s), s.detectChanges();
-        const a = document.createElement("div");
-        return s.rootNodes.forEach((l) => a.appendChild(l)), a;
+        const o = document.createElement("div");
+        return s.rootNodes.forEach((l) => o.appendChild(l)), o;
+      };
+  }
+  /**
+   * Creates a responsive card renderer function for ResponsivePlugin.
+   * Renders Angular templates for card layout in responsive mode.
+   *
+   * @param gridElement - The grid element to look up the template for
+   * @returns A card renderer function or undefined if no template is found
+   */
+  createResponsiveCardRenderer(e) {
+    const t = Ye(e);
+    if (t)
+      return (r, i) => {
+        const s = {
+          $implicit: r,
+          row: r,
+          index: i
+        }, o = this.viewContainerRef.createEmbeddedView(t, s);
+        this.viewRefs.push(o), o.detectChanges();
+        const l = document.createElement("div");
+        return o.rootNodes.forEach((w) => l.appendChild(w)), l;
       };
   }
   /**
@@ -475,18 +530,18 @@ class He {
    * The renderer creates an Angular template-based panel content.
    */
   createToolPanelRenderer(e) {
-    const t = $e(e);
+    const t = ze(e);
     if (!t)
       return;
-    const i = e.closest("tbw-grid");
-    return (r) => {
+    const r = e.closest("tbw-grid");
+    return (i) => {
       const s = {
-        $implicit: i ?? r,
-        grid: i ?? r
-      }, a = this.viewContainerRef.createEmbeddedView(t, s);
-      return this.viewRefs.push(a), a.detectChanges(), a.rootNodes.forEach((l) => r.appendChild(l)), () => {
-        const l = this.viewRefs.indexOf(a);
-        l > -1 && this.viewRefs.splice(l, 1), a.destroy();
+        $implicit: r ?? i,
+        grid: r ?? i
+      }, o = this.viewContainerRef.createEmbeddedView(t, s);
+      return this.viewRefs.push(o), o.detectChanges(), o.rootNodes.forEach((l) => i.appendChild(l)), () => {
+        const l = this.viewRefs.indexOf(o);
+        l > -1 && this.viewRefs.splice(l, 1), o.destroy();
       };
     };
   }
@@ -523,10 +578,10 @@ class He {
     const t = this.typeRegistry.get(e);
     if (!t)
       return;
-    const i = {
+    const r = {
       editorParams: t.editorParams
     };
-    return t.renderer && (i.renderer = this.createComponentRenderer(t.renderer)), t.editor && (i.editor = this.createComponentEditor(t.editor)), i;
+    return t.renderer && (r.renderer = this.createComponentRenderer(t.renderer)), t.editor && (r.editor = this.createComponentEditor(t.editor)), r;
   }
   /**
    * Creates a renderer function from an Angular component class.
@@ -534,17 +589,17 @@ class He {
    */
   createComponentRenderer(e) {
     return (t) => {
-      const i = document.createElement("span");
-      i.style.display = "contents";
-      const r = se(e, {
+      const r = document.createElement("span");
+      r.style.display = "contents";
+      const i = ae(e, {
         environmentInjector: this.injector,
-        hostElement: i
+        hostElement: r
       });
-      return this.setComponentInputs(r, {
+      return this.setComponentInputs(i, {
         value: t.value,
         row: t.row,
         column: t.column
-      }), this.appRef.attachView(r.hostView), this.componentRefs.push(r), r.changeDetectorRef.detectChanges(), i;
+      }), this.appRef.attachView(i.hostView), this.componentRefs.push(i), i.changeDetectorRef.detectChanges(), r;
     };
   }
   /**
@@ -553,24 +608,24 @@ class He {
    */
   createComponentEditor(e) {
     return (t) => {
-      const i = document.createElement("span");
-      i.style.display = "contents";
-      const r = se(e, {
+      const r = document.createElement("span");
+      r.style.display = "contents";
+      const i = ae(e, {
         environmentInjector: this.injector,
-        hostElement: i
+        hostElement: r
       });
-      this.setComponentInputs(r, {
+      this.setComponentInputs(i, {
         value: t.value,
         row: t.row,
         column: t.column
-      }), this.appRef.attachView(r.hostView), this.componentRefs.push(r), r.changeDetectorRef.detectChanges();
-      const s = r.instance;
-      return this.subscribeToOutput(s, "commit", (a) => t.commit(a)), this.subscribeToOutput(s, "cancel", () => t.cancel()), i.addEventListener("commit", (a) => {
-        const l = a;
+      }), this.appRef.attachView(i.hostView), this.componentRefs.push(i), i.changeDetectorRef.detectChanges();
+      const s = i.instance;
+      return this.subscribeToOutput(s, "commit", (o) => t.commit(o)), this.subscribeToOutput(s, "cancel", () => t.cancel()), r.addEventListener("commit", (o) => {
+        const l = o;
         t.commit(l.detail);
-      }), i.addEventListener("cancel", () => {
+      }), r.addEventListener("cancel", () => {
         t.cancel();
-      }), i;
+      }), r;
     };
   }
   /**
@@ -578,18 +633,18 @@ class He {
    * Works with both EventEmitter and OutputEmitterRef (signal outputs).
    * @internal
    */
-  subscribeToOutput(e, t, i) {
-    const r = e[t];
-    r && typeof r.subscribe == "function" && r.subscribe(i);
+  subscribeToOutput(e, t, r) {
+    const i = e[t];
+    i && typeof i.subscribe == "function" && i.subscribe(r);
   }
   /**
    * Sets component inputs using Angular's setInput API.
    * @internal
    */
   setComponentInputs(e, t) {
-    for (const [i, r] of Object.entries(t))
+    for (const [r, i] of Object.entries(t))
       try {
-        e.setInput(i, r);
+        e.setInput(r, i);
       } catch {
       }
   }
@@ -601,21 +656,21 @@ class He {
     this.viewRefs.forEach((e) => e.destroy()), this.viewRefs = [], this.componentRefs.forEach((e) => e.destroy()), this.componentRefs = [];
   }
 }
-var ve, z;
-ve = [E({ selector: "tbw-grid" })];
-class x {
-  elementRef = m(v);
-  injector = m(Ge);
-  appRef = m(ke);
-  viewContainerRef = m(xe);
+var ye, K;
+ye = [y({ selector: "tbw-grid" })];
+class G {
+  elementRef = c(C);
+  injector = c(Ue);
+  appRef = c(We);
+  viewContainerRef = c(Fe);
   adapter = null;
   cellCommitListener = null;
   constructor() {
-    C(() => {
+    E(() => {
       const e = this.angularConfig();
       if (!e || !this.adapter) return;
-      const t = this.adapter.processGridConfig(e), i = this.elementRef.nativeElement;
-      i.gridConfig = t;
+      const t = this.adapter.processGridConfig(e), r = this.elementRef.nativeElement;
+      r.gridConfig = t;
     });
   }
   rowCommitListener = null;
@@ -689,7 +744,7 @@ class x {
    * }
    * ```
    */
-  cellCommit = oe();
+  cellCommit = le();
   /**
    * Emitted when a row's values are committed (bulk/row editing).
    * Provides the row data and change tracking information.
@@ -699,22 +754,22 @@ class x {
    * <tbw-grid (rowCommit)="onRowCommit($event)">...</tbw-grid>
    * ```
    */
-  rowCommit = oe();
+  rowCommit = le();
   ngOnInit() {
-    this.adapter = new He(this.injector, this.appRef, this.viewContainerRef), Ue.registerAdapter(this.adapter);
+    this.adapter = new Qe(this.injector, this.appRef, this.viewContainerRef), He.registerAdapter(this.adapter);
     const e = this.elementRef.nativeElement;
     this.cellCommitListener = (t) => {
-      const i = t.detail;
-      this.cellCommit.emit(i);
+      const r = t.detail;
+      this.cellCommit.emit(r);
     }, e.addEventListener("cell-commit", this.cellCommitListener), this.rowCommitListener = (t) => {
-      const i = t.detail;
-      this.rowCommit.emit(i);
+      const r = t.detail;
+      this.rowCommit.emit(r);
     }, e.addEventListener("row-commit", this.rowCommitListener), e.__frameworkAdapter = this.adapter;
   }
   ngAfterContentInit() {
     const e = this.elementRef.nativeElement;
     e && typeof e.refreshColumns == "function" && setTimeout(() => {
-      e.refreshColumns(), this.configureMasterDetail(e), typeof e.refreshShellHeader == "function" && e.refreshShellHeader(), this.registerCustomStyles(e);
+      e.refreshColumns(), this.configureMasterDetail(e), this.configureResponsiveCard(e), typeof e.refreshShellHeader == "function" && e.refreshShellHeader(), this.registerCustomStyles(e);
     }, 0);
   }
   /**
@@ -734,47 +789,72 @@ class x {
    */
   configureMasterDetail(e) {
     if (!this.adapter) return;
-    const t = e.getPlugin?.(ae);
+    const t = e.getPlugin?.(ce);
     if (t && typeof t.refreshDetailRenderer == "function") {
       t.refreshDetailRenderer();
       return;
     }
-    const i = e.querySelector("tbw-grid-detail");
-    if (!i) return;
-    const r = this.adapter.createDetailRenderer(e);
+    const r = e.querySelector("tbw-grid-detail");
     if (!r) return;
-    const s = i.getAttribute("animation");
-    let a = "slide";
-    s === "false" ? a = !1 : s === "fade" && (a = "fade");
-    const l = i.getAttribute("showExpandColumn") !== "false", y = new ae({
-      detailRenderer: r,
+    const i = this.adapter.createDetailRenderer(e);
+    if (!i) return;
+    const s = r.getAttribute("animation");
+    let o = "slide";
+    s === "false" ? o = !1 : s === "fade" && (o = "fade");
+    const l = r.getAttribute("showExpandColumn") !== "false", w = new ce({
+      detailRenderer: i,
       showExpandColumn: l,
-      animation: a
+      animation: o
     }), u = e.gridConfig || {}, d = u.plugins || [];
     e.gridConfig = {
       ...u,
-      plugins: [...d, y]
+      plugins: [...d, w]
     };
   }
+  /**
+   * Configures the ResponsivePlugin with Angular template-based card renderer.
+   * - If plugin exists: updates its cardRenderer configuration
+   * - If plugin doesn't exist but <tbw-grid-responsive-card> is present: logs a warning
+   */
+  configureResponsiveCard(e) {
+    if (!this.adapter || !e.querySelector("tbw-grid-responsive-card")) return;
+    const r = this.adapter.createResponsiveCardRenderer(e);
+    if (!r) return;
+    const i = e.getPlugin?.(Be);
+    if (i) {
+      i.setCardRenderer(r);
+      return;
+    }
+    console.warn(
+      `[tbw-grid-angular] <tbw-grid-responsive-card> found but ResponsivePlugin is not configured.
+Add ResponsivePlugin to your gridConfig.plugins array:
+
+  import { ResponsivePlugin } from "@toolbox-web/grid/all";
+  gridConfig = {
+    plugins: [new ResponsivePlugin({ breakpoint: 600 })]
+  };`
+    );
+  }
   ngOnDestroy() {
     const e = this.elementRef.nativeElement;
     e && (this.cellCommitListener && (e.removeEventListener("cell-commit", this.cellCommitListener), this.cellCommitListener = null), this.rowCommitListener && (e.removeEventListener("row-commit", this.rowCommitListener), this.rowCommitListener = null)), e && this.customStyles() && e.unregisterStyles?.("angular-custom-styles"), this.adapter && (this.adapter.destroy?.(), this.adapter = null);
   }
 }
-z = h(null), x = w(z, 0, "Grid", ve, x), g(z, 1, x);
+K = h(null), G = v(K, 0, "Grid", ye, G), g(K, 1, G);
 export {
-  He as AngularGridAdapter,
-  De as GRID_TYPE_DEFAULTS,
-  x as Grid,
+  Qe as AngularGridAdapter,
+  Ie as GRID_TYPE_DEFAULTS,
+  G as Grid,
   M as GridColumnEditor,
   V as GridColumnView,
   _ as GridDetailView,
+  x as GridResponsiveCard,
   q as GridToolPanel,
-  L as GridTypeRegistry,
-  k as TbwCellEditor,
-  G as TbwCellView,
-  k as TbwEditor,
-  G as TbwRenderer,
-  le as isComponentClass,
-  Ke as provideGridTypeDefaults
+  P as GridTypeRegistry,
+  $ as TbwCellEditor,
+  k as TbwCellView,
+  $ as TbwEditor,
+  k as TbwRenderer,
+  me as isComponentClass,
+  nt as provideGridTypeDefaults
 };

package/lib/angular-grid-adapter.d.ts

@@ -149,6 +149,14 @@ export declare class AngularGridAdapter implements FrameworkAdapter {
      * without manual configuration in the Grid directive.
      */
     parseDetailElement<TRow = unknown>(detailElement: Element): ((row: TRow, rowIndex: number) => HTMLElement | string) | undefined;
+    /**
+     * Creates a responsive card renderer function for ResponsivePlugin.
+     * Renders Angular templates for card layout in responsive mode.
+     *
+     * @param gridElement - The grid element to look up the template for
+     * @returns A card renderer function or undefined if no template is found
+     */
+    createResponsiveCardRenderer<TRow = unknown>(gridElement: HTMLElement): ((row: TRow, rowIndex: number) => HTMLElement) | undefined;
     /**
      * Creates a tool panel renderer from a light DOM element.
      * The renderer creates an Angular template-based panel content.

package/lib/angular-grid-adapter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"angular-grid-adapter.d.ts","sourceRoot":"","sources":["../../../../libs/grid-angular/src/lib/angular-grid-adapter.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EAId,mBAAmB,EAInB,gBAAgB,EACjB,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAEV,YAAY,EAEZ,gBAAgB,EAChB,kBAAkB,EAClB,gBAAgB,EAChB,UAAU,EACV,WAAW,EACZ,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAoB,KAAK,mBAAmB,EAAE,KAAK,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAiC7G;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AACH,qBAAa,kBAAmB,YAAW,gBAAgB;IAMvD,OAAO,CAAC,QAAQ;IAChB,OAAO,CAAC,MAAM;IACd,OAAO,CAAC,gBAAgB;IAP1B,OAAO,CAAC,QAAQ,CAAkC;IAClD,OAAO,CAAC,aAAa,CAA+B;IACpD,OAAO,CAAC,YAAY,CAAiC;gBAG3C,QAAQ,EAAE,mBAAmB,EAC7B,MAAM,EAAE,cAAc,EACtB,gBAAgB,EAAE,gBAAgB;IAa5C;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,iBAAiB,CAAC,IAAI,GAAG,OAAO,EAAE,MAAM,EAAE,iBAAiB,CAAC,IAAI,CAAC,GAAG,UAAU,CAAC,IAAI,CAAC;IAapF;;;;;;OAMG;IACH,aAAa,CAAC,IAAI,GAAG,OAAO,EAAE,MAAM,EAAE,mBAAmB,CAAC,IAAI,CAAC,GAAG,YAAY,CAAC,IAAI,CAAC;IAgBpF;;;OAGG;IACH,SAAS,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO;IAIxC;;;;;;OAMG;IACH,cAAc,CAAC,IAAI,GAAG,OAAO,EAAE,MAAM,GAAG,OAAO,EAAE,OAAO,EAAE,WAAW,GAAG,kBAAkB,CAAC,IAAI,EAAE,MAAM,CAAC;IA+BxG;;;;;;;;;;;;;;;;;OAiBG;IACH,YAAY,CAAC,IAAI,GAAG,OAAO,EAAE,MAAM,GAAG,OAAO,EAAE,OAAO,EAAE,WAAW,GAAG,gBAAgB,CAAC,IAAI,EAAE,MAAM,CAAC;IA4DpG;;;OAGG;IACH,oBAAoB,CAAC,IAAI,GAAG,OAAO,EAAE,WAAW,EAAE,WAAW,GAAG,CAAC,CAAC,GAAG,EAAE,IAAI,KAAK,WAAW,CAAC,GAAG,SAAS;IA4BxG;;;;;;OAMG;IACH,kBAAkB,CAAC,IAAI,GAAG,OAAO,EAC/B,aAAa,EAAE,OAAO,GACrB,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,KAAK,WAAW,GAAG,MAAM,CAAC,GAAG,SAAS;IA4BtE;;;OAGG;IACH,uBAAuB,CAAC,OAAO,EAAE,WAAW,GAAG,CAAC,CAAC,SAAS,EAAE,WAAW,KAAK,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC,CAAC,GAAG,SAAS;IAsC5G;;;;;;;;;;;;;;;;;;;;;;;;;;OA0BG;IACH,cAAc,CAAC,IAAI,GAAG,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,WAAW,CAAC,IAAI,CAAC,GAAG,SAAS;IA2B3E;;;OAGG;IACH,OAAO,CAAC,uBAAuB;IAgC/B;;;OAGG;IACH,OAAO,CAAC,qBAAqB;IA+C7B;;;;OAIG;IACH,OAAO,CAAC,iBAAiB;IAczB;;;OAGG;IACH,OAAO,CAAC,kBAAkB;IAU1B;;;OAGG;IACH,OAAO,IAAI,IAAI;CAMhB"}
+{"version":3,"file":"angular-grid-adapter.d.ts","sourceRoot":"","sources":["../../../../libs/grid-angular/src/lib/angular-grid-adapter.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EAId,mBAAmB,EAInB,gBAAgB,EACjB,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAEV,YAAY,EAEZ,gBAAgB,EAChB,kBAAkB,EAClB,gBAAgB,EAChB,UAAU,EACV,WAAW,EACZ,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAoB,KAAK,mBAAmB,EAAE,KAAK,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAkC7G;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AACH,qBAAa,kBAAmB,YAAW,gBAAgB;IAMvD,OAAO,CAAC,QAAQ;IAChB,OAAO,CAAC,MAAM;IACd,OAAO,CAAC,gBAAgB;IAP1B,OAAO,CAAC,QAAQ,CAAkC;IAClD,OAAO,CAAC,aAAa,CAA+B;IACpD,OAAO,CAAC,YAAY,CAAiC;gBAG3C,QAAQ,EAAE,mBAAmB,EAC7B,MAAM,EAAE,cAAc,EACtB,gBAAgB,EAAE,gBAAgB;IAa5C;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,iBAAiB,CAAC,IAAI,GAAG,OAAO,EAAE,MAAM,EAAE,iBAAiB,CAAC,IAAI,CAAC,GAAG,UAAU,CAAC,IAAI,CAAC;IAapF;;;;;;OAMG;IACH,aAAa,CAAC,IAAI,GAAG,OAAO,EAAE,MAAM,EAAE,mBAAmB,CAAC,IAAI,CAAC,GAAG,YAAY,CAAC,IAAI,CAAC;IAgBpF;;;OAGG;IACH,SAAS,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO;IAIxC;;;;;;OAMG;IACH,cAAc,CAAC,IAAI,GAAG,OAAO,EAAE,MAAM,GAAG,OAAO,EAAE,OAAO,EAAE,WAAW,GAAG,kBAAkB,CAAC,IAAI,EAAE,MAAM,CAAC;IA+BxG;;;;;;;;;;;;;;;;;OAiBG;IACH,YAAY,CAAC,IAAI,GAAG,OAAO,EAAE,MAAM,GAAG,OAAO,EAAE,OAAO,EAAE,WAAW,GAAG,gBAAgB,CAAC,IAAI,EAAE,MAAM,CAAC;IA4DpG;;;OAGG;IACH,oBAAoB,CAAC,IAAI,GAAG,OAAO,EAAE,WAAW,EAAE,WAAW,GAAG,CAAC,CAAC,GAAG,EAAE,IAAI,KAAK,WAAW,CAAC,GAAG,SAAS;IA4BxG;;;;;;OAMG;IACH,kBAAkB,CAAC,IAAI,GAAG,OAAO,EAC/B,aAAa,EAAE,OAAO,GACrB,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,KAAK,WAAW,GAAG,MAAM,CAAC,GAAG,SAAS;IA4BtE;;;;;;OAMG;IACH,4BAA4B,CAAC,IAAI,GAAG,OAAO,EACzC,WAAW,EAAE,WAAW,GACvB,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,KAAK,WAAW,CAAC,GAAG,SAAS;IA6B7D;;;OAGG;IACH,uBAAuB,CAAC,OAAO,EAAE,WAAW,GAAG,CAAC,CAAC,SAAS,EAAE,WAAW,KAAK,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC,CAAC,GAAG,SAAS;IAsC5G;;;;;;;;;;;;;;;;;;;;;;;;;;OA0BG;IACH,cAAc,CAAC,IAAI,GAAG,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,WAAW,CAAC,IAAI,CAAC,GAAG,SAAS;IA2B3E;;;OAGG;IACH,OAAO,CAAC,uBAAuB;IAgC/B;;;OAGG;IACH,OAAO,CAAC,qBAAqB;IA+C7B;;;;OAIG;IACH,OAAO,CAAC,iBAAiB;IAczB;;;OAGG;IACH,OAAO,CAAC,kBAAkB;IAU1B;;;OAGG;IACH,OAAO,IAAI,IAAI;CAMhB"}

package/lib/directives/grid-responsive-card.directive.d.ts

@@ -0,0 +1,92 @@
+import { TemplateRef } from '@angular/core';
+/**
+ * Context object passed to the responsive card template.
+ *
+ * @template TRow - The type of row data
+ *
+ * @example
+ * ```html
+ * <tbw-grid-responsive-card>
+ *   <ng-template let-row let-index="index">
+ *     <div class="card-content">
+ *       <span>{{ row.name }}</span>
+ *       <span>Row #{{ index }}</span>
+ *     </div>
+ *   </ng-template>
+ * </tbw-grid-responsive-card>
+ * ```
+ */
+export interface GridResponsiveCardContext<TRow = unknown> {
+    /**
+     * The row data (available as `let-row` or `let-myVar`).
+     */
+    $implicit: TRow;
+    /**
+     * The row data (explicit access via `let-row="row"`).
+     */
+    row: TRow;
+    /**
+     * The row index (zero-based).
+     */
+    index: number;
+}
+/**
+ * Registry to store responsive card templates by grid element.
+ * Used by AngularGridAdapter to create card renderers.
+ */
+export declare const responsiveCardTemplateRegistry: Map<HTMLElement, TemplateRef<GridResponsiveCardContext<unknown>>>;
+/**
+ * Retrieves the responsive card template for a grid element.
+ *
+ * @param gridElement - The grid element to look up
+ * @returns The template reference or undefined if not found
+ */
+export declare function getResponsiveCardTemplate(gridElement: HTMLElement): TemplateRef<GridResponsiveCardContext> | undefined;
+/**
+ * Directive for providing custom Angular templates for responsive card layout.
+ *
+ * Use this directive to define how each row should render when the grid
+ * is in responsive/mobile mode. The template receives the row data and index.
+ *
+ * ## Usage
+ *
+ * ```html
+ * <tbw-grid [rows]="employees">
+ *   <tbw-grid-responsive-card>
+ *     <ng-template let-employee let-idx="index">
+ *       <div class="employee-card">
+ *         <img [src]="employee.avatar" alt="">
+ *         <div class="info">
+ *           <strong>{{ employee.name }}</strong>
+ *           <span>{{ employee.department }}</span>
+ *         </div>
+ *       </div>
+ *     </ng-template>
+ *   </tbw-grid-responsive-card>
+ * </tbw-grid>
+ * ```
+ *
+ * ## Important Notes
+ *
+ * - The ResponsivePlugin must be added to your grid config
+ * - The Grid directive will automatically configure the plugin's cardRenderer
+ * - Template context provides `$implicit` (row), `row`, and `index`
+ *
+ * @see ResponsivePlugin
+ */
+export declare class GridResponsiveCard<TRow = unknown> {
+    private elementRef;
+    /**
+     * The ng-template containing the card content.
+     */
+    template: import('@angular/core').Signal<TemplateRef<any> | undefined>;
+    /**
+     * Effect that registers the template when it becomes available.
+     */
+    private onTemplateReceived;
+    /**
+     * Type guard for template context inference.
+     */
+    static ngTemplateContextGuard<T>(_directive: GridResponsiveCard<T>, context: unknown): context is GridResponsiveCardContext<T>;
+}
+//# sourceMappingURL=grid-responsive-card.directive.d.ts.map

package/lib/directives/grid-responsive-card.directive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-responsive-card.directive.d.ts","sourceRoot":"","sources":["../../../../../libs/grid-angular/src/lib/directives/grid-responsive-card.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuD,WAAW,EAAE,MAAM,eAAe,CAAC;AAEjG;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,WAAW,yBAAyB,CAAC,IAAI,GAAG,OAAO;IACvD;;OAEG;IACH,SAAS,EAAE,IAAI,CAAC;IAEhB;;OAEG;IACH,GAAG,EAAE,IAAI,CAAC;IAEV;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;GAGG;AACH,eAAO,MAAM,8BAA8B,mEAAiE,CAAC;AAE7G;;;;;GAKG;AACH,wBAAgB,yBAAyB,CACvC,WAAW,EAAE,WAAW,GACvB,WAAW,CAAC,yBAAyB,CAAC,GAAG,SAAS,CAKpD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,qBAGa,kBAAkB,CAAC,IAAI,GAAG,OAAO;IAC5C,OAAO,CAAC,UAAU,CAAmC;IAErD;;OAEG;IACH,QAAQ,+DAA8D;IAEtE;;OAEG;IACH,OAAO,CAAC,kBAAkB,CAQvB;IAEH;;OAEG;IACH,MAAM,CAAC,sBAAsB,CAAC,CAAC,EAC7B,UAAU,EAAE,kBAAkB,CAAC,CAAC,CAAC,EACjC,OAAO,EAAE,OAAO,GACf,OAAO,IAAI,yBAAyB,CAAC,CAAC,CAAC;CAG3C"}

package/lib/directives/grid.directive.d.ts

@@ -171,6 +171,12 @@ export declare class Grid implements OnInit, AfterContentInit, OnDestroy {
      * - If plugin doesn't exist but <tbw-grid-detail> is present: create and add the plugin
      */
     private configureMasterDetail;
+    /**
+     * Configures the ResponsivePlugin with Angular template-based card renderer.
+     * - If plugin exists: updates its cardRenderer configuration
+     * - If plugin doesn't exist but <tbw-grid-responsive-card> is present: logs a warning
+     */
+    private configureResponsiveCard;
     ngOnDestroy(): void;
 }
 //# sourceMappingURL=grid.directive.d.ts.map

package/lib/directives/grid.directive.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"grid.directive.d.ts","sourceRoot":"","sources":["../../../../../libs/grid-angular/src/lib/directives/grid.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAQhB,SAAS,EACT,MAAM,EAGP,MAAM,eAAe,CAAC;AAGvB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAGlE;;GAEG;AACH,MAAM,WAAW,eAAe,CAAC,IAAI,GAAG,OAAO,EAAE,MAAM,GAAG,OAAO;IAC/D,0BAA0B;IAC1B,GAAG,EAAE,IAAI,CAAC;IACV,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,QAAQ,EAAE,MAAM,CAAC;IACjB,gDAAgD;IAChD,WAAW,EAAE,IAAI,EAAE,CAAC;IACpB,iDAAiD;IACjD,iBAAiB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC/B,yDAAyD;IACzD,eAAe,EAAE,OAAO,CAAC;CAC1B;AAED;;GAEG;AACH,MAAM,WAAW,cAAc,CAAC,IAAI,GAAG,OAAO;IAC5C,0BAA0B;IAC1B,GAAG,EAAE,IAAI,CAAC;IACV,sCAAsC;IACtC,QAAQ,EAAE,MAAM,CAAC;IACjB,gDAAgD;IAChD,WAAW,EAAE,IAAI,EAAE,CAAC;IACpB,iDAAiD;IACjD,iBAAiB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC/B,yDAAyD;IACzD,eAAe,EAAE,OAAO,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,qBACa,IAAK,YAAW,MAAM,EAAE,gBAAgB,EAAE,SAAS;IAC9D,OAAO,CAAC,UAAU,CAAmC;IACrD,OAAO,CAAC,QAAQ,CAA+B;IAC/C,OAAO,CAAC,MAAM,CAA0B;IACxC,OAAO,CAAC,gBAAgB,CAA4B;IAEpD,OAAO,CAAC,OAAO,CAAmC;IAClD,OAAO,CAAC,kBAAkB,CAAqC;;IAgB/D,OAAO,CAAC,iBAAiB,CAAqC;IAE9D;;;;;;;;;;;;;;;;OAgBG;IACH,YAAY,0DAAmB;IAE/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAkCG;IAEH,aAAa,0EAAmC;IAEhD;;;;;;;;;;;;;;OAcG;IACH,UAAU,8EAA6B;IAEvC;;;;;;;;OAQG;IACH,SAAS,oEAA4B;IAErC,QAAQ,IAAI,IAAI;IAyBhB,kBAAkB,IAAI,IAAI;IAwB1B;;;OAGG;IACH,OAAO,CAAC,oBAAoB;IAU5B;;;;OAIG;IACH,OAAO,CAAC,qBAAqB;IA4C7B,WAAW,IAAI,IAAI;CAyBpB"}
+{"version":3,"file":"grid.directive.d.ts","sourceRoot":"","sources":["../../../../../libs/grid-angular/src/lib/directives/grid.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAQhB,SAAS,EACT,MAAM,EAGP,MAAM,eAAe,CAAC;AAGvB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAGlE;;GAEG;AACH,MAAM,WAAW,eAAe,CAAC,IAAI,GAAG,OAAO,EAAE,MAAM,GAAG,OAAO;IAC/D,0BAA0B;IAC1B,GAAG,EAAE,IAAI,CAAC;IACV,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,QAAQ,EAAE,MAAM,CAAC;IACjB,gDAAgD;IAChD,WAAW,EAAE,IAAI,EAAE,CAAC;IACpB,iDAAiD;IACjD,iBAAiB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC/B,yDAAyD;IACzD,eAAe,EAAE,OAAO,CAAC;CAC1B;AAED;;GAEG;AACH,MAAM,WAAW,cAAc,CAAC,IAAI,GAAG,OAAO;IAC5C,0BAA0B;IAC1B,GAAG,EAAE,IAAI,CAAC;IACV,sCAAsC;IACtC,QAAQ,EAAE,MAAM,CAAC;IACjB,gDAAgD;IAChD,WAAW,EAAE,IAAI,EAAE,CAAC;IACpB,iDAAiD;IACjD,iBAAiB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC/B,yDAAyD;IACzD,eAAe,EAAE,OAAO,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,qBACa,IAAK,YAAW,MAAM,EAAE,gBAAgB,EAAE,SAAS;IAC9D,OAAO,CAAC,UAAU,CAAmC;IACrD,OAAO,CAAC,QAAQ,CAA+B;IAC/C,OAAO,CAAC,MAAM,CAA0B;IACxC,OAAO,CAAC,gBAAgB,CAA4B;IAEpD,OAAO,CAAC,OAAO,CAAmC;IAClD,OAAO,CAAC,kBAAkB,CAAqC;;IAgB/D,OAAO,CAAC,iBAAiB,CAAqC;IAE9D;;;;;;;;;;;;;;;;OAgBG;IACH,YAAY,0DAAmB;IAE/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAkCG;IAEH,aAAa,0EAAmC;IAEhD;;;;;;;;;;;;;;OAcG;IACH,UAAU,8EAA6B;IAEvC;;;;;;;;OAQG;IACH,SAAS,oEAA4B;IAErC,QAAQ,IAAI,IAAI;IAyBhB,kBAAkB,IAAI,IAAI;IA2B1B;;;OAGG;IACH,OAAO,CAAC,oBAAoB;IAU5B;;;;OAIG;IACH,OAAO,CAAC,qBAAqB;IA4C7B;;;;OAIG;IACH,OAAO,CAAC,uBAAuB;IA6B/B,WAAW,IAAI,IAAI;CAyBpB"}

package/lib/directives/index.d.ts

@@ -1,6 +1,7 @@
 export { GridColumnEditor } from './grid-column-editor.directive';
 export { GridColumnView } from './grid-column-view.directive';
 export { GridDetailView } from './grid-detail-view.directive';
+export { GridResponsiveCard } from './grid-responsive-card.directive';
 export { GridToolPanel } from './grid-tool-panel.directive';
 export { Grid } from './grid.directive';
 //# sourceMappingURL=index.d.ts.map

package/lib/directives/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../libs/grid-angular/src/lib/directives/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../libs/grid-angular/src/lib/directives/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC"}

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@toolbox-web/grid-angular",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Angular adapter for @toolbox-web/grid data grid component",
   "type": "module",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "main": "./index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
   "exports": {
     "./package.json": "./package.json",
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "default": "./dist/index.js"
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "default": "./index.js"
     }
   },
   "keywords": [