@justeattakeaway/pie-data-table 0.3.8 → 0.3.9

package/dist/{PieElement-D93xzrC3.js → PieElement-XGmHLGoS.js}

@@ -4,7 +4,7 @@ const t = class t extends i {
     this.getAttribute("v") || this.setAttribute("v", t.v);
   }
 };
-t.v = "0.3.8";
+t.v = "0.3.9";
 let s = t;
 export {
   s as P

package/dist/index.js

@@ -1,19 +1,19 @@
 import { nothing as c, html as l, unsafeCSS as g } from "lit";
 import { property as h } from "lit/decorators.js";
-import { P as u } from "./PieElement-D93xzrC3.js";
-import { RtlMixin as p, safeCustomElement as m } from "@justeattakeaway/pie-webc-core";
+import { P as p } from "./PieElement-XGmHLGoS.js";
+import { RtlMixin as u, safeCustomElement as f } from "@justeattakeaway/pie-webc-core";
 import { classMap as n } from "lit/directives/class-map.js";
-const v = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-data-table{--data-table-background-color: var(--dt-color-container-default);--data-table-background-hover-or-active: var(--dt-color-container-subtle);--data-table-border-color: var(--dt-color-border-default);--data-table-border-radius: var(--dt-radius-rounded-c);--data-table-text-color: var(--dt-color-content-default);background-color:var(--data-table-background-color);border:1px solid var(--data-table-border-color);border-radius:var(--data-table-border-radius);color:var(--data-table-text-color);width:100%;overflow:hidden}.c-data-table table{border-spacing:0;width:100%}.c-data-table tbody{overflow:auto}.c-data-table tbody tr:hover{background-color:var(--data-table-background-hover-or-active)}.c-data-table-head-cell{background-color:transparent;font-weight:var(--dt-font-weight-bold);color:var(--data-table-text-color);text-align:left}.c-data-table-head-cell-text-align--left,.c-data-table-cell-text-align--left{text-align:left}.c-data-table-head-cell-text-align--right,.c-data-table-cell-text-align--right{text-align:right}.c-data-table-head-cell-text-align--center,.c-data-table-cell-text-align--center{text-align:center}.c-data-table-cell,.c-data-table-head-cell{padding:var(--dt-spacing-d);border-bottom:1px solid var(--data-table-border-color)}.c-data-table-cell--hidden,.c-data-table-row--hidden{display:none}", f = {
+const v = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-data-table{--data-table-background-color: var(--dt-color-container-default);--data-table-background-hover-or-active: var(--dt-color-container-subtle);--data-table-border-color: var(--dt-color-border-default);--data-table-border-radius: var(--dt-radius-rounded-c);--data-table-text-color: var(--dt-color-content-default);background-color:var(--data-table-background-color);border:1px solid var(--data-table-border-color);border-radius:var(--data-table-border-radius);color:var(--data-table-text-color);width:100%;overflow:hidden}.c-data-table table{border-spacing:0;width:100%}.c-data-table tbody{overflow:auto}.c-data-table tbody tr:hover{background-color:var(--data-table-background-hover-or-active)}.c-data-table-head-cell{background-color:transparent;font-size:calc(var(--dt-font-body-strong-l-size) * 1px);line-height:calc(var(--dt-font-body-strong-l-line-height) * 1px);font-weight:var(--dt-font-body-strong-l-weight);color:var(--data-table-text-color);text-align:left}.c-data-table-head-cell-text-align--left,.c-data-table-cell-text-align--left{text-align:left}.c-data-table-head-cell-text-align--right,.c-data-table-cell-text-align--right{text-align:right}.c-data-table-head-cell-text-align--center,.c-data-table-cell-text-align--center{text-align:center}.c-data-table-cell,.c-data-table-head-cell{padding:var(--dt-spacing-d);border-bottom:1px solid var(--data-table-border-color)}.c-data-table-cell--hidden,.c-data-table-row--hidden{display:none}", m = {
   additionalRows: []
 };
-var w = Object.defineProperty, x = Object.getOwnPropertyDescriptor, i = (t, a, e, d) => {
-  for (var r = d > 1 ? void 0 : d ? x(a, e) : a, s = t.length - 1, b; s >= 0; s--)
-    (b = t[s]) && (r = (d ? b(a, e, r) : b(r)) || r);
-  return d && r && w(a, e, r), r;
+var w = Object.defineProperty, x = Object.getOwnPropertyDescriptor, i = (t, a, e, o) => {
+  for (var r = o > 1 ? void 0 : o ? x(a, e) : a, s = t.length - 1, b; s >= 0; s--)
+    (b = t[s]) && (r = (o ? b(a, e, r) : b(r)) || r);
+  return o && r && w(a, e, r), r;
 };
-let o = class extends p(u) {
+let d = class extends u(p) {
   constructor() {
-    super(...arguments), this.columns = [], this.data = [], this.additionalRows = f.additionalRows;
+    super(...arguments), this.columns = [], this.data = [], this.additionalRows = m.additionalRows;
   }
   /**
    * Maps text alignment values to corresponding CSS classes
@@ -34,9 +34,9 @@ let o = class extends p(u) {
    * @param column - The column definition to render
    */
   renderHeaderCell(t) {
-    const { width: a, heading: e, textAlign: d } = t, r = a ? `width: ${a}` : c, s = {
+    const { width: a, heading: e, textAlign: o } = t, r = a ? `width: ${a}` : c, s = {
       "c-data-table-head-cell": !0,
-      ...this.mapTextAlignClasses("c-data-table-head-cell", d)
+      ...this.mapTextAlignClasses("c-data-table-head-cell", o)
     };
     return l`
             <th style="${String(r)}" class="${n(s)}">
@@ -100,14 +100,14 @@ let o = class extends p(u) {
       return l`
                         <tr class="${n(a)}">
                         ${t.cells.map((e) => {
-        const d = {
+        const o = {
           "c-data-table-cell": !0,
           "c-data-table-cell--hidden": !!e.hideCell,
           ...this.mapTextAlignClasses("c-data-table-cell", e.textAlign)
         };
         return l`
                                 <td
-                                    class="${n(d)}"
+                                    class="${n(o)}"
                                     colspan=${e.colSpan || 1}
                                 >
                                     ${e.content}
@@ -140,20 +140,20 @@ let o = class extends p(u) {
         `;
   }
 };
-o.styles = g(v);
+d.styles = g(v);
 i([
   h({ type: Array })
-], o.prototype, "columns", 2);
+], d.prototype, "columns", 2);
 i([
   h({ type: Array })
-], o.prototype, "data", 2);
+], d.prototype, "data", 2);
 i([
   h({ type: Array })
-], o.prototype, "additionalRows", 2);
-o = i([
-  m("pie-data-table")
-], o);
+], d.prototype, "additionalRows", 2);
+d = i([
+  f("pie-data-table")
+], d);
 export {
-  o as PieDataTable,
-  f as defaultProps
+  d as PieDataTable,
+  m as defaultProps
 };

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

@@ -1,5 +1,5 @@
 import { unsafeCSS as p, html as d } from "lit";
-import { P as i } from "../PieElement-D93xzrC3.js";
+import { P as i } from "../PieElement-XGmHLGoS.js";
 import { safeCustomElement as m } from "@justeattakeaway/pie-webc-core";
 const b = ":host{display:table-row-group}:host ::slotted(pie-data-table-row){--pie-data-table-row-background-hover: var(--dt-color-container-subtle)}";
 var u = Object.getOwnPropertyDescriptor, c = (o, a, n, s) => {

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

@@ -1,6 +1,6 @@
 import { unsafeCSS as c, nothing as d, html as f } from "lit";
 import { property as p } from "lit/decorators.js";
-import { P as g } from "../PieElement-D93xzrC3.js";
+import { P as g } from "../PieElement-XGmHLGoS.js";
 import { validPropertyValues as b, safeCustomElement as h } from "@justeattakeaway/pie-webc-core";
 const m = ":host{padding:var(--dt-spacing-d);border-bottom:1px solid var(--data-table-border-color);display:table-cell}:host([textAlign=right]){text-align:right}:host([textAlign=center]){text-align:center}:host([textAlign=left]){text-align:left}:host([isHidden]){display:none}", x = ["left", "right", "center"], u = {
   textAlign: "left",

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

@@ -1,5 +1,5 @@
 import { unsafeCSS as i, html as c } from "lit";
-import { P as m } from "../PieElement-D93xzrC3.js";
+import { P as m } from "../PieElement-XGmHLGoS.js";
 import { safeCustomElement as p } from "@justeattakeaway/pie-webc-core";
 const b = ":host{inline-size:100%;display:table}";
 var f = Object.getOwnPropertyDescriptor, u = (r, l, o, a) => {

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

@@ -1,23 +1,23 @@
-import { unsafeCSS as d, html as b } from "lit";
-import { P as c } from "../PieElement-D93xzrC3.js";
-import { safeCustomElement as i } from "@justeattakeaway/pie-webc-core";
-const p = ":host{background-color:transparent;font-weight:var(--dt-font-weight-bold);color:var(--data-table-header-color);border-bottom:1px solid var(--data-table-border-color);display:table-header-group}";
-var h = Object.getOwnPropertyDescriptor, m = (o, a, n, l) => {
-  for (var e = l > 1 ? void 0 : l ? h(a, n) : a, t = o.length - 1, s; t >= 0; t--)
-    (s = o[t]) && (e = s(e) || e);
-  return e;
+import { unsafeCSS as d, html as i } from "lit";
+import { P as c } from "../PieElement-XGmHLGoS.js";
+import { safeCustomElement as b } from "@justeattakeaway/pie-webc-core";
+const p = ":host{background-color:transparent;font-size:calc(var(--dt-font-body-strong-l-size) * 1px);line-height:calc(var(--dt-font-body-strong-l-line-height) * 1px);font-weight:var(--dt-font-body-strong-l-weight);color:var(--dt-color-content-default);border-bottom:1px solid var(--data-table-border-color);display:table-header-group}";
+var f = Object.getOwnPropertyDescriptor, h = (o, a, n, l) => {
+  for (var t = l > 1 ? void 0 : l ? f(a, n) : a, e = o.length - 1, s; e >= 0; e--)
+    (s = o[e]) && (t = s(t) || t);
+  return t;
 };
 let r = class extends c {
   connectedCallback() {
     this.hasAttribute("role") || this.setAttribute("role", "rowgroup"), super.connectedCallback();
   }
   render() {
-    return b`<slot></slot>`;
+    return i`<slot></slot>`;
   }
 };
 r.styles = d(p);
-r = m([
-  i("pie-data-table-head")
+r = h([
+  b("pie-data-table-head")
 ], r);
 export {
   r as PieDataTableHead

package/dist/pie-data-table-head-cell/index.js

@@ -1,6 +1,6 @@
 import { unsafeCSS as p, nothing as c, html as f } from "lit";
 import { property as d } from "lit/decorators.js";
-import { P as h } from "../PieElement-D93xzrC3.js";
+import { P as h } from "../PieElement-XGmHLGoS.js";
 import { validPropertyValues as g, safeCustomElement as b } from "@justeattakeaway/pie-webc-core";
 const m = ":host{padding:var(--dt-spacing-d);border-bottom:1px solid var(--data-table-border-color);display:table-cell}:host([textAlign=right]){text-align:right}:host([textAlign=center]){text-align:center}:host([textAlign=left]){text-align:left}:host([isHidden]){display:none}", x = ["left", "right", "center"], u = {
   textAlign: "left",

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

@@ -1,14 +1,14 @@
-import { unsafeCSS as p, nothing as h, html as l } from "lit";
-import { property as c, queryAssignedElements as b, state as g } from "lit/decorators.js";
-import { P as f } from "../PieElement-D93xzrC3.js";
+import { unsafeCSS as p, nothing as h, html as d } from "lit";
+import { property as c, queryAssignedElements as g, state as b } from "lit/decorators.js";
+import { P as f } from "../PieElement-XGmHLGoS.js";
 import { validPropertyValues as u, safeCustomElement as m } from "@justeattakeaway/pie-webc-core";
 import { classMap as v } from "lit/directives/class-map.js";
-const y = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-data-table-header{--data-table-header-background: transparent;--data-table-border-color: var(--dt-color-border-default);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-heading-wrapper{display:flex;flex-direction:column;gap:var(--dt-spacing-b)}.c-data-table-header-heading{font-family:var(--dt-font-body-l-family);font-weight:var(--dt-font-heading-m-weight);font-size:calc(var(--dt-font-heading-m-size--wide) * 1px);line-height:calc(var(--dt-font-heading-m-line-height--wide) * 1px)}.c-data-table-header-sub-heading{font-family:var(--dt-font-body-l-family);font-weight:var(--dt-font-body-l-weight);font-size:calc(var(--dt-font-body-l-size) * 1px);line-height:calc(var(--dt-font-body-l-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)}", w = ["subtle", "strong"], x = {
+const y = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-data-table-header{--data-table-header-background: transparent;--data-table-border-color: var(--dt-color-border-default);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-heading-wrapper{display:flex;flex-direction:column;gap:var(--dt-spacing-b)}.c-data-table-header-heading{font-family:var(--dt-font-heading-m-family);font-weight:var(--dt-font-heading-m-weight);font-size:calc(var(--dt-font-heading-m-size--wide) * 1px);line-height:calc(var(--dt-font-heading-m-line-height--wide) * 1px)}.c-data-table-header-sub-heading{font-family:var(--dt-font-body-l-family);font-weight:var(--dt-font-body-l-weight);font-size:calc(var(--dt-font-body-l-size) * 1px);line-height:calc(var(--dt-font-body-l-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)}", w = ["subtle", "strong"], x = {
   variant: "subtle"
 };
 var S = Object.defineProperty, B = Object.getOwnPropertyDescriptor, o = (e, t, r, s) => {
-  for (var n = s > 1 ? void 0 : s ? B(t, r) : t, d = e.length - 1, i; d >= 0; d--)
-    (i = e[d]) && (n = (s ? i(t, r, n) : i(n)) || n);
+  for (var n = s > 1 ? void 0 : s ? B(t, r) : t, l = e.length - 1, i; l >= 0; l--)
+    (i = e[l]) && (n = (s ? i(t, r, n) : i(n)) || n);
   return s && n && S(t, r, n), n;
 };
 const P = "pie-data-table-header";
@@ -36,21 +36,21 @@ let a = class extends f {
   }
   render() {
     const { heading: e, subHeading: t, variant: r } = this;
-    return l`
+    return d`
             <header class="${v({
       "c-data-table-header": !0,
       "c-data-table-header--strong": r === "strong"
     })}">
                 <div class="c-data-table-header-heading-wrapper">
-                    ${e ? l`<span class="c-data-table-header-heading">${e}</span>` : h}
+                    ${e ? d`<span class="c-data-table-header-heading">${e}</span>` : h}
 
-                    ${t ? l`<span class="c-data-table-header-sub-heading">${t}</span>` : h}
+                    ${t ? d`<span class="c-data-table-header-sub-heading">${t}</span>` : h}
                 </div>
-                ${this.hasActionButtons ? l`
+                ${this.hasActionButtons ? d`
                     <div class="c-data-table-action-buttons-wrapper">
                         <slot name="action-button" @slotchange=${this.handleSlotChange}></slot>
                     </div>
-                ` : l`
+                ` : d`
                     <slot name="action-button" @slotchange=${this.handleSlotChange} style="display: none;"></slot>
                 `}
             </header>
@@ -69,10 +69,10 @@ o([
   u(P, w, x.variant)
 ], a.prototype, "variant", 2);
 o([
-  b({ slot: "action-button", flatten: !0 })
+  g({ slot: "action-button", flatten: !0 })
 ], a.prototype, "_actionButtonSlot", 2);
 o([
-  g()
+  b()
 ], a.prototype, "hasActionButtons", 2);
 a = o([
   m("pie-data-table-header")

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

@@ -1,6 +1,6 @@
 import { unsafeCSS as d, nothing as c, html as f } from "lit";
 import { property as i } from "lit/decorators.js";
-import { P as b } from "../PieElement-D93xzrC3.js";
+import { P as b } from "../PieElement-XGmHLGoS.js";
 import { safeCustomElement as m } from "@justeattakeaway/pie-webc-core";
 const u = ":host{display:table-row;border-bottom:1px solid var(--data-table-border-color)}:host(:hover){background-color:var(--pie-data-table-row-background-hover, transparent)}:host([isSelected]){background-color:var(--dt-color-container-subtle)}", S = {
   isSelected: !1,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-data-table",
   "description": "PIE Design System Data Table built using Web Components",
-  "version": "0.3.8",
+  "version": "0.3.9",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -37,12 +37,12 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
     "@justeattakeaway/pie-components-config": "0.21.0",
-    "@justeattakeaway/pie-css": "0.31.0",
+    "@justeattakeaway/pie-css": "0.31.1",
     "@justeattakeaway/pie-monorepo-utils": "0.7.0",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "11.0.0"
+    "@justeattakeaway/pie-webc-core": "11.0.1"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/data-table.scss

@@ -35,7 +35,9 @@
 
 .c-data-table-head-cell {
   background-color: transparent;
-  font-weight: var(--dt-font-weight-bold);
+  font-size: calc(var(--dt-font-body-strong-l-size) * 1px);
+  line-height: calc(var(--dt-font-body-strong-l-line-height) * 1px);
+  font-weight: var(--dt-font-body-strong-l-weight);
   color: var(--data-table-text-color);
   text-align: left;
 }

package/src/pie-data-table-head/data-table-head.scss

@@ -1,7 +1,9 @@
 :host {
   background-color: transparent;
-  font-weight: var(--dt-font-weight-bold);
-  color: var(--data-table-header-color);
+  font-size: calc(var(--dt-font-body-strong-l-size) * 1px);
+  line-height: calc(var(--dt-font-body-strong-l-line-height) * 1px);
+  font-weight: var(--dt-font-body-strong-l-weight);
+  color: var(--dt-color-content-default);
   border-bottom: 1px solid var(--data-table-border-color);
   display: table-header-group;
 }

package/src/pie-data-table-header/data-table-header.scss

@@ -25,7 +25,7 @@
 }
 
 .c-data-table-header-heading {
-  font-family: var(--dt-font-body-l-family);
+  font-family: var(--dt-font-heading-m-family);
   font-weight: var(--dt-font-heading-m-weight);
   font-size: calc(var(--dt-font-heading-m-size--wide) * 1px);
   line-height: calc(var(--dt-font-heading-m-line-height--wide) * 1px);