@justeattakeaway/pie-data-table 0.0.0-snapshot-release-20250815153945 → 0.0.0-snapshot-release-20250818121553

package/dist/pie-data-table-header/index.d.ts

@@ -25,6 +25,10 @@ export declare class PieDataTableHeader extends PieElement implements DataTableH
      * @param event - The slot change event
      */
     private handleSlotChange;
+    /**
+     * Lit lifecycle: called after the component's DOM has been rendered the first time.
+     */
+    firstUpdated(): void;
     render(): import('lit-html').TemplateResult<1>;
     static styles: import('lit').CSSResult;
 }

package/dist/pie-data-table-header/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/pie-data-table-header/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,yDAAyD,CAAC;AAKrF,OAAO,EACH,KAAK,oBAAoB,EAEzB,YAAY,EACf,MAAM,QAAQ,CAAC;AAGhB,cAAc,QAAQ,CAAC;AAEvB,QAAA,MAAM,iBAAiB,0BAA0B,CAAC;AAElD;;GAEG;AACH,qBACa,kBAAmB,SAAQ,UAAW,YAAW,oBAAoB;IAC9E;;OAEG;IAEI,KAAK,EAAG,oBAAoB,CAAC,OAAO,CAAC,CAAC;IAE7C;;OAEG;IAEI,QAAQ,EAAE,oBAAoB,CAAC,UAAU,CAAC,CAAC;IAElD;;OAEG;IAGI,OAAO,CAAC,EAAE,OAAO,YAAY,CAAC,OAAO,CAAC;IAG7C,OAAO,CAAC,gBAAgB,CAAS;IAEjC;;;;OAIG;IACH,OAAO,CAAC,gBAAgB;IAKxB,MAAM;IA0BN,MAAM,CAAC,MAAM,0BAAqB;CACrC;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,kBAAkB,CAAC;KAC3C;CACJ"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/pie-data-table-header/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,yDAAyD,CAAC;AAKrF,OAAO,EACH,KAAK,oBAAoB,EAEzB,YAAY,EACf,MAAM,QAAQ,CAAC;AAGhB,cAAc,QAAQ,CAAC;AAEvB,QAAA,MAAM,iBAAiB,0BAA0B,CAAC;AAElD;;GAEG;AACH,qBACa,kBAAmB,SAAQ,UAAW,YAAW,oBAAoB;IAC9E;;OAEG;IAEI,KAAK,EAAG,oBAAoB,CAAC,OAAO,CAAC,CAAC;IAE7C;;OAEG;IAEI,QAAQ,EAAE,oBAAoB,CAAC,UAAU,CAAC,CAAC;IAElD;;OAEG;IAGI,OAAO,CAAC,EAAE,OAAO,YAAY,CAAC,OAAO,CAAC;IAG7C,OAAO,CAAC,gBAAgB,CAAS;IAEjC;;;;OAIG;IACH,OAAO,CAAC,gBAAgB;IAKxB;;OAEG;IACH,YAAY;IAQZ,MAAM;IA0BN,MAAM,CAAC,MAAM,0BAAqB;CACrC;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,kBAAkB,CAAC;KAC3C;CACJ"}

package/dist/pie-data-table-header/index.js

@@ -6,13 +6,13 @@ import { classMap as v } from "lit/directives/class-map.js";
 const m = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-data-table-header{--data-table-header-background: transparent;padding:var(--dt-spacing-d);background-color:var(--data-table-header-background);border-bottom:1px solid var(--data-table-border-color);display:flex;justify-content:space-between;align-items:flex-end}.c-data-table-header-title-wrapper{display:flex;flex-direction:column;gap:var(--dt-spacing-b)}.c-data-table-header-title{font-weight:var(--dt-font-weight-extrabold);font-size:calc(var(--dt-font-size-24) * 1px);line-height:calc(var(--dt-font-size-24-line-height) * 1px)}.c-data-table-header-subtitle{font-weight:var(--dt-font-weight-regular);font-size:calc(var(--dt-font-size-16) * 1px);line-height:calc(var(--dt-font-size-16-line-height) * 1px)}.c-data-table-header--strong{--data-table-header-background: var(--dt-color-support-brand-02)}.c-data-table-action-buttons-wrapper{display:flex;gap:var(--dt-spacing-d)}", y = ["subtle", "strong"], x = {
   variant: "subtle"
 };
-var w = Object.defineProperty, P = Object.getOwnPropertyDescriptor, l = (e, t, s, o) => {
-  for (var a = o > 1 ? void 0 : o ? P(t, s) : t, i = e.length - 1, d; i >= 0; i--)
-    (d = e[i]) && (a = (o ? d(t, s, a) : d(a)) || a);
-  return o && a && w(t, s, a), a;
+var w = Object.defineProperty, S = Object.getOwnPropertyDescriptor, l = (e, t, r, o) => {
+  for (var a = o > 1 ? void 0 : o ? S(t, r) : t, i = e.length - 1, d; i >= 0; i--)
+    (d = e[i]) && (a = (o ? d(t, r, a) : d(a)) || a);
+  return o && a && w(t, r, a), a;
 };
-const S = "pie-data-table-header";
-let r = class extends g {
+const P = "pie-data-table-header";
+let s = class extends g {
   constructor() {
     super(...arguments), this.hasActionButtons = !1;
   }
@@ -25,15 +25,23 @@ let r = class extends g {
     const t = e.target;
     this.hasActionButtons = t.assignedElements().length > 0;
   }
+  /**
+   * Lit lifecycle: called after the component's DOM has been rendered the first time.
+   */
+  firstUpdated() {
+    var t;
+    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector('slot[name="action-button"]');
+    e && (this.hasActionButtons = e.assignedElements().length > 0);
+  }
   render() {
-    const { title: e, subtitle: t, variant: s } = this;
+    const { title: e, subtitle: t, variant: r } = this;
     return n`
             <header class="${v({
       "c-data-table-header": !0,
-      "c-data-table-header--strong": s === "strong"
+      "c-data-table-header--strong": r === "strong"
     })}">
                 <div class="c-data-table-header-title-wrapper">
-                    ${e ? n`<span class="c-data-table-header-title">${e}</span>` : p} 
+                    ${e ? n`<span class="c-data-table-header-title">${e}</span>` : p}
                     ${t ? n`<span class="c-data-table-header-subtitle">${t}</span>` : p}
                 </div>
                 ${this.hasActionButtons ? n`
@@ -47,25 +55,25 @@ let r = class extends g {
         `;
   }
 };
-r.styles = h(m);
+s.styles = h(m);
 l([
   c({ type: String })
-], r.prototype, "title", 2);
+], s.prototype, "title", 2);
 l([
   c({ type: String })
-], r.prototype, "subtitle", 2);
+], s.prototype, "subtitle", 2);
 l([
   c({ type: String }),
-  u(S, y, x.variant)
-], r.prototype, "variant", 2);
+  u(P, y, x.variant)
+], s.prototype, "variant", 2);
 l([
   b()
-], r.prototype, "hasActionButtons", 2);
-r = l([
+], s.prototype, "hasActionButtons", 2);
+s = l([
   f("pie-data-table-header")
-], r);
+], s);
 export {
-  r as PieDataTableHeader,
+  s as PieDataTableHeader,
   y as dataTableHeaderVariant,
   x as defaultProps
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-data-table",
   "description": "PIE Design System Data Table built using Web Components",
-  "version": "0.0.0-snapshot-release-20250815153945",
+  "version": "0.0.0-snapshot-release-20250818121553",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/pie-data-table-header/index.ts

@@ -53,6 +53,17 @@ export class PieDataTableHeader extends PieElement implements DataTableHeaderPro
         this.hasActionButtons = slot.assignedElements().length > 0;
     }
 
+    /**
+     * Lit lifecycle: called after the component's DOM has been rendered the first time.
+     */
+    firstUpdated () {
+        // Get the named slot element after shadowRoot is ready
+        const slot = this.shadowRoot?.querySelector('slot[name="action-button"]') as HTMLSlotElement | null;
+        if (slot) {
+            this.hasActionButtons = slot.assignedElements().length > 0;
+        }
+    }
+
     render () {
         const { title, subtitle, variant } = this;
 
@@ -64,7 +75,7 @@ export class PieDataTableHeader extends PieElement implements DataTableHeaderPro
         return html`
             <header class="${classMap(classes)}">
                 <div class="c-data-table-header-title-wrapper">
-                    ${title ? html`<span class="c-data-table-header-title">${title}</span>` : nothing} 
+                    ${title ? html`<span class="c-data-table-header-title">${title}</span>` : nothing}
                     ${subtitle ? html`<span class="c-data-table-header-subtitle">${subtitle}</span>` : nothing}
                 </div>
                 ${this.hasActionButtons ? html`