@justeattakeaway/pie-data-table 0.0.0-snapshot-release-20250807232835 → 0.0.0-snapshot-release-20250811075227

package/custom-elements.json

@@ -11,26 +11,8 @@
     {
       "kind": "javascript-module",
       "path": "src/defs.js",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "defaultProps",
-          "type": {
-            "text": "ComponentDefaultProps<DataTableProps, keyof Omit<DataTableProps, 'columns' | 'data'>>"
-          },
-          "default": "{\n    hasBorder: true,\n    isStriped: false,\n}"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "defaultProps",
-          "declaration": {
-            "name": "defaultProps",
-            "module": "src/defs.js"
-          }
-        }
-      ]
+      "declarations": [],
+      "exports": []
     },
     {
       "kind": "javascript-module",
@@ -40,77 +22,7 @@
           "kind": "class",
           "description": "",
           "name": "PieDataTable",
-          "members": [
-            {
-              "kind": "field",
-              "name": "columns",
-              "type": {
-                "text": "Column[]"
-              },
-              "privacy": "public",
-              "default": "[]",
-              "description": "Array of column definitions"
-            },
-            {
-              "kind": "field",
-              "name": "data",
-              "type": {
-                "text": "Record<string, unknown>[]"
-              },
-              "privacy": "public",
-              "default": "[]",
-              "description": "Array of data objects to display"
-            },
-            {
-              "kind": "method",
-              "name": "renderHeaderCell",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "column",
-                  "type": {
-                    "text": "Column"
-                  },
-                  "description": "The column definition to render"
-                }
-              ],
-              "description": "Renders a header cell for the table"
-            },
-            {
-              "kind": "method",
-              "name": "renderTableHeader",
-              "privacy": "private",
-              "description": "Renders the table header"
-            },
-            {
-              "kind": "method",
-              "name": "renderTableCell",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "column",
-                  "type": {
-                    "text": "Column"
-                  },
-                  "description": "The column definition to render"
-                },
-                {
-                  "name": "row",
-                  "type": {
-                    "text": "Record<string, unknown>"
-                  },
-                  "description": "The data object for the current row"
-                }
-              ],
-              "description": "Renders a table cell for the given column and row"
-            },
-            {
-              "kind": "method",
-              "name": "renderTableRows",
-              "privacy": "private",
-              "description": "Renders the table rows"
-            }
-          ],
+          "members": [],
           "mixins": [
             {
               "name": "RtlMixin",
@@ -143,140 +55,6 @@
           }
         }
       ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/pie-data-table-header/defs-react.js",
-      "declarations": [],
-      "exports": []
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/pie-data-table-header/defs.js",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "dataTableHeaderVariant",
-          "type": {
-            "text": "array"
-          },
-          "default": "['subtle', 'strong']"
-        },
-        {
-          "kind": "variable",
-          "name": "defaultProps",
-          "type": {
-            "text": "ComponentDefaultProps<DataTableHeaderProps, keyof Omit<DataTableHeaderProps, 'title' | 'subtitle'>>"
-          },
-          "default": "{\n    variant: 'subtle',\n}"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "dataTableHeaderVariant",
-          "declaration": {
-            "name": "dataTableHeaderVariant",
-            "module": "src/pie-data-table-header/defs.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "defaultProps",
-          "declaration": {
-            "name": "defaultProps",
-            "module": "src/pie-data-table-header/defs.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/pie-data-table-header/index.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "PieDataTableHeader",
-          "members": [
-            {
-              "kind": "field",
-              "name": "title",
-              "type": {
-                "text": "DataTableHeaderProps['title']"
-              },
-              "privacy": "public",
-              "description": "Title text for the data table header"
-            },
-            {
-              "kind": "field",
-              "name": "subtitle",
-              "type": {
-                "text": "DataTableHeaderProps['subtitle']"
-              },
-              "privacy": "public",
-              "description": "Subtitle text for the data table header"
-            },
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "typeof defaultProps.variant | undefined"
-              },
-              "privacy": "public",
-              "description": "Emphasis level for the header"
-            },
-            {
-              "kind": "field",
-              "name": "hasActionButtons",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
-            },
-            {
-              "kind": "method",
-              "name": "handleSlotChange",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  },
-                  "description": "The slot change event"
-                }
-              ],
-              "description": "Handles the slot change event to determine if there are action buttons."
-            }
-          ],
-          "superclass": {
-            "name": "PieElement",
-            "package": "@justeattakeaway/pie-webc-core/src/internals/PieElement"
-          },
-          "tagName": "pie-data-table-header",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./defs"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "PieDataTableHeader",
-          "declaration": {
-            "name": "PieDataTableHeader",
-            "module": "src/pie-data-table-header/index.js"
-          }
-        }
-      ]
     }
   ]
 }

package/dist/index.d.ts

@@ -1,45 +1,20 @@
-import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
-import { DataTableProps, Column } from './defs';
-export * from './defs';
-declare const componentSelector = "pie-data-table";
-declare const PieDataTable_base: import('@justeattakeaway/pie-webc-core').GenericConstructor<import('@justeattakeaway/pie-webc-core').RTLInterface> & typeof PieElement;
-/**
- * @tagname pie-data-table
- */
-export declare class PieDataTable extends PieDataTable_base implements DataTableProps {
-    /**
-     * Array of column definitions
-     */
-    columns: Column[];
-    /**
-     * Array of data objects to display
-     */
-    data: Record<string, unknown>[];
-    /**
-     * Renders a header cell for the table
-     * @param column - The column definition to render
-     */
-    private renderHeaderCell;
-    /**
-     * Renders the table header
-     */
-    private renderTableHeader;
-    /**
-     * Renders a table cell for the given column and row
-     * @param column - The column definition to render
-     * @param row - The data object for the current row
-     */
-    private renderTableCell;
-    /**
-     * Renders the table rows
-     */
-    private renderTableRows;
-    render(): import('lit-html').TemplateResult<1>;
-    static styles: import('lit').CSSResult;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        [componentSelector]: PieDataTable;
-    }
-}
-//# sourceMappingURL=index.d.ts.map
+import { CSSResult } from 'lit';
+import { GenericConstructor } from '@justeattakeaway/pie-webc-core';
+import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
+import { RTLInterface } from '@justeattakeaway/pie-webc-core';
+import { TemplateResult } from 'lit-html';
+
+export declare interface DataTableProps {
+}
+
+/**
+ * @tagname pie-data-table
+ */
+export declare class PieDataTable extends PieDataTable_base implements DataTableProps {
+    render(): TemplateResult<1>;
+    static styles: CSSResult;
+}
+
+declare const PieDataTable_base: GenericConstructor<RTLInterface> & typeof PieElement;
+
+export { }

package/dist/index.js

@@ -1,107 +1,27 @@
-import { nothing as n, html as d, unsafeCSS as g } from "lit";
-import { property as h } from "lit/decorators.js";
-import { P as p } from "./PieElement-BsEd8lGj.js";
-import { RtlMixin as u, safeCustomElement as f } from "@justeattakeaway/pie-webc-core";
-import { classMap as i } from "lit/directives/class-map.js";
-const x = "*,*: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-header{background-color:transparent;font-weight:var(--dt-font-weight-bold);color:var(--data-table-header-color);text-align:left;padding:var(--dt-spacing-d);border-bottom:1px solid var(--data-table-border-color)}.c-data-table-header-text-align--left{text-align:left}.c-data-table-header-text-align--right{text-align:right}.c-data-table-header-text-align--center{text-align:center}.c-data-table-cell{padding:var(--dt-spacing-d);border-bottom:1px solid var(--data-table-border-color)}.c-data-table-cell-text-align--left{text-align:left}.c-data-table-cell-text-align--right{text-align:right}.c-data-table-cell-text-align--center{text-align:center}", T = {
-  hasBorder: !0,
-  isStriped: !1
+import { LitElement as b, html as d, unsafeCSS as f } from "lit";
+import { RtlMixin as h, safeCustomElement as v } from "@justeattakeaway/pie-webc-core";
+const e = class e extends b {
+  willUpdate() {
+    this.getAttribute("v") || this.setAttribute("v", e.v);
+  }
 };
-var v = Object.defineProperty, m = Object.getOwnPropertyDescriptor, b = (t, e, l, r) => {
-  for (var a = r > 1 ? void 0 : r ? m(e, l) : e, c = t.length - 1, s; c >= 0; c--)
-    (s = t[c]) && (a = (r ? s(e, l, a) : s(a)) || a);
-  return r && a && v(e, l, a), a;
+e.v = "0.1.0";
+let r = e;
+const c = "*,*:after,*:before{box-sizing:inherit}:host{display:block}";
+var u = Object.getOwnPropertyDescriptor, m = (i, l, p, o) => {
+  for (var t = o > 1 ? void 0 : o ? u(l, p) : l, s = i.length - 1, n; s >= 0; s--)
+    (n = i[s]) && (t = n(t) || t);
+  return t;
 };
-let o = class extends u(p) {
-  constructor() {
-    super(...arguments), this.columns = [], this.data = [];
-  }
-  /**
-   * Renders a header cell for the table
-   * @param column - The column definition to render
-   */
-  renderHeaderCell(t) {
-    const { width: e, heading: l, textAlign: r } = t, a = e ? `width: ${e}` : n;
-    return d`
-            <th style="${a}" class="${i({
-      "c-data-table-header": !0,
-      "c-data-table-header-text-align--left": r === "left",
-      "c-data-table-header-text-align--right": r === "right",
-      "c-data-table-header-text-align--center": r === "center"
-    })}">
-                ${l}
-            </th>
-        `;
-  }
-  /**
-   * Renders the table header
-   */
-  renderTableHeader() {
-    return d`
-            <thead>
-                <tr>
-                    ${this.columns.map((t) => this.renderHeaderCell(t))}
-                </tr>
-            </thead>
-        `;
-  }
-  /**
-   * Renders a table cell for the given column and row
-   * @param column - The column definition to render
-   * @param row - The data object for the current row
-   */
-  renderTableCell(t, e) {
-    const l = {
-      "c-data-table-cell": !0,
-      "c-data-table-cell-text-align--left": t.textAlign === "left",
-      "c-data-table-cell-text-align--right": t.textAlign === "right",
-      "c-data-table-cell-text-align--center": t.textAlign === "center"
-    };
-    return d`
-            <td class="${i(l)}">
-                ${t.accessor ? e[t.accessor] : ""}
-            </td>
-        `;
-  }
-  /**
-   * Renders the table rows
-   */
-  renderTableRows() {
-    return d`
-            <tbody>
-                ${this.data.map((t) => d`
-                    <tr class="c-data-table-row">
-                        ${this.columns.map((e) => this.renderTableCell(e, t))}
-                    </tr>
-                `)} 
-            </tbody>
-        `;
-  }
+let a = class extends h(r) {
   render() {
-    return d`
-            <div class="${i({
-      "c-data-table": !0
-    })}">
-                <slot name="table-header"></slot>
-                <table>
-                    ${this.columns.length > 0 ? this.renderTableHeader() : n}
-                    ${this.data.length > 0 ? this.renderTableRows() : n}
-                </table>
-            </div>
-        `;
+    return d`<h1 data-test-id="pie-data-table">Hello world!</h1>`;
   }
 };
-o.styles = g(x);
-b([
-  h({ type: Array })
-], o.prototype, "columns", 2);
-b([
-  h({ type: Array })
-], o.prototype, "data", 2);
-o = b([
-  f("pie-data-table")
-], o);
+a.styles = f(c);
+a = m([
+  v("pie-data-table")
+], a);
 export {
-  o as PieDataTable,
-  T as defaultProps
+  a as PieDataTable
 };

package/dist/react.d.ts

@@ -1,7 +1,25 @@
-import { PieDataTable as PieDataTableLit } from './index';
-import { DataTableProps } from './defs';
-import * as React from 'react';
-export * from './defs';
-type ReactBaseType = React.HTMLAttributes<HTMLElement>;
-export declare const PieDataTable: React.ForwardRefExoticComponent<React.PropsWithoutRef<DataTableProps> & React.RefAttributes<PieDataTableLit> & ReactBaseType>;
-//# sourceMappingURL=react.d.ts.map
+import { CSSResult } from 'lit';
+import { GenericConstructor } from '@justeattakeaway/pie-webc-core';
+import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
+import * as React_2 from 'react';
+import { RTLInterface } from '@justeattakeaway/pie-webc-core';
+import { TemplateResult } from 'lit-html';
+
+export declare interface DataTableProps {
+}
+
+export declare const PieDataTable: React_2.ForwardRefExoticComponent<React_2.PropsWithoutRef<DataTableProps> & React_2.RefAttributes<PieDataTable_2> & ReactBaseType>;
+
+/**
+ * @tagname pie-data-table
+ */
+declare class PieDataTable_2 extends PieDataTable_base implements DataTableProps {
+    render(): TemplateResult<1>;
+    static styles: CSSResult;
+}
+
+declare const PieDataTable_base: GenericConstructor<RTLInterface> & typeof PieElement;
+
+declare type ReactBaseType = React_2.HTMLAttributes<HTMLElement>;
+
+export { }

package/dist/react.js

@@ -1,15 +1,13 @@
 import * as a from "react";
 import { createComponent as e } from "@lit/react";
 import { PieDataTable as t } from "./index.js";
-import { defaultProps as s } from "./index.js";
 const o = e({
   displayName: "PieDataTable",
   elementClass: t,
   react: a,
   tagName: "pie-data-table",
   events: {}
-}), i = o;
+}), l = o;
 export {
-  i as PieDataTable,
-  s as defaultProps
+  l as PieDataTable
 };

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-20250807232835",
+  "version": "0.0.0-snapshot-release-20250811075227",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -39,7 +39,7 @@
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "1.0.0"
+    "@justeattakeaway/pie-webc-core": "0.0.0-snapshot-release-20250811075227"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/data-table.scss

@@ -1,72 +1,7 @@
 @use '@justeattakeaway/pie-css/scss' as p;
 
 :host {
+    // Note: For consistency sake, the recommended display should be either
+    // "block" or "inline-block", otherwise it can be ommited for floating elements
     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;
-  
-  table {
-    border-spacing: 0;
-    width: 100%;
-  }
-
-  tbody {
-    overflow: auto;
-  }
-
-  tbody tr:hover {
-    background-color: var(--data-table-background-hover-or-active);
-  }
-}
-
-.c-data-table-header {
-  background-color: transparent;
-  font-weight: var(--dt-font-weight-bold);
-  color: var(--data-table-header-color);
-  text-align: left;
-  padding: var(--dt-spacing-d);
-  border-bottom: 1px solid var(--data-table-border-color);
-}
-
-.c-data-table-header-text-align--left {
-  text-align: left;
-}
-
-.c-data-table-header-text-align--right {
-  text-align: right;
-}
-
-.c-data-table-header-text-align--center {
-  text-align: center;
-}
-
-.c-data-table-cell {
-  padding: var(--dt-spacing-d);
-  border-bottom: 1px solid var(--data-table-border-color);
-}
-
-.c-data-table-cell-text-align--left {
-  text-align: left;
-}
-
-.c-data-table-cell-text-align--right {
-  text-align: right;
-}
-
-.c-data-table-cell-text-align--center {
-  text-align: center;
-}

package/src/defs.ts

@@ -1,42 +1,3 @@
-import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
-
-export interface Column {
-  /**
-   * Unique identifier for the column
-   * */
-  id: string;
-  /**
-   * Optional property to specify the display name for the column heading
-   * */
-  heading: string;
-  /**
-   * Optional property to specify the text alignment of the column
-   * */
-  textAlign?: 'left' | 'right' | 'center';
-
-  /**
-   * Optional property to specify the width of the column
-   * */
-  width?: string;
-  /**
-   * Optional property to specify the key in the data object to display in this column
-   * */
-  accessor?: string;
-}
-
-export interface DataTableProps {
-  /**
-   * Array of column definitions
-   */
-  columns: Column[];
-
-  /**
-   * Array of data objects to display
-   */
-  data: Record<string, unknown>[];
-}
-
-export const defaultProps: ComponentDefaultProps<DataTableProps, keyof Omit<DataTableProps, 'columns' | 'data'>> = {
-    hasBorder: true,
-    isStriped: false,
-};
+// TODO - please remove the eslint disable comment below when you add props to this interface
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface DataTableProps {}

package/src/index.ts

@@ -1,14 +1,9 @@
-import { html, nothing, unsafeCSS } from 'lit';
-import { property } from 'lit/decorators.js';
+import { html, unsafeCSS } from 'lit';
 import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
 import { RtlMixin, safeCustomElement } from '@justeattakeaway/pie-webc-core';
-import { classMap } from 'lit/directives/class-map.js';
 
 import styles from './data-table.scss?inline';
-import {
-    type DataTableProps,
-    type Column,
-} from './defs';
+import { type DataTableProps } from './defs';
 
 // Valid values available to consumers
 export * from './defs';
@@ -20,101 +15,8 @@ const componentSelector = 'pie-data-table';
  */
 @safeCustomElement('pie-data-table')
 export class PieDataTable extends RtlMixin(PieElement) implements DataTableProps {
-    /**
-     * Array of column definitions
-     */
-    @property({ type: Array })
-    public columns: Column[] = [];
-
-    /**
-     * Array of data objects to display
-     */
-    @property({ type: Array })
-    public data: Record<string, unknown>[] = [];
-
-    /**
-     * Renders a header cell for the table
-     * @param column - The column definition to render
-     */
-    private renderHeaderCell (column: Column) {
-        const { width, heading, textAlign } = column;
-        const style = width ? `width: ${width}` : nothing;
-        const classes = {
-            'c-data-table-header': true,
-            'c-data-table-header-text-align--left': textAlign === 'left',
-            'c-data-table-header-text-align--right': textAlign === 'right',
-            'c-data-table-header-text-align--center': textAlign === 'center',
-        };
-
-        return html`
-            <th style="${style}" class="${classMap(classes)}">
-                ${heading}
-            </th>
-        `;
-    }
-
-    /**
-     * Renders the table header
-     */
-    private renderTableHeader () {
-        return html`
-            <thead>
-                <tr>
-                    ${this.columns.map((column) => this.renderHeaderCell(column))}
-                </tr>
-            </thead>
-        `;
-    }
-
-    /**
-     * Renders a table cell for the given column and row
-     * @param column - The column definition to render
-     * @param row - The data object for the current row
-     */
-    private renderTableCell (column: Column, row: Record<string, unknown>) {
-        const classes = {
-            'c-data-table-cell': true,
-            'c-data-table-cell-text-align--left': column.textAlign === 'left',
-            'c-data-table-cell-text-align--right': column.textAlign === 'right',
-            'c-data-table-cell-text-align--center': column.textAlign === 'center',
-        };
-
-        return html`
-            <td class="${classMap(classes)}">
-                ${column.accessor ? row[column.accessor] : ''}
-            </td>
-        `;
-    }
-
-    /**
-     * Renders the table rows
-     */
-    private renderTableRows () {
-        return html`
-            <tbody>
-                ${this.data.map((row) => html`
-                    <tr class="c-data-table-row">
-                        ${this.columns.map((column) => this.renderTableCell(column, row))}
-                    </tr>
-                `)} 
-            </tbody>
-        `;
-    }
-
     render () {
-        const classes = {
-            'c-data-table': true,
-        };
-
-        return html`
-            <div class="${classMap(classes)}">
-                <slot name="table-header"></slot>
-                <table>
-                    ${this.columns.length > 0 ? this.renderTableHeader() : nothing}
-                    ${this.data.length > 0 ? this.renderTableRows() : nothing}
-                </table>
-            </div>
-        `;
+        return html`<h1 data-test-id="pie-data-table">Hello world!</h1>`;
     }
 
     // Renders a `CSSResult` generated from SCSS by Vite

package/dist/PieElement-BsEd8lGj.js

@@ -1,11 +0,0 @@
-import { LitElement as i } from "lit";
-const t = class t extends i {
-  willUpdate() {
-    this.getAttribute("v") || this.setAttribute("v", t.v);
-  }
-};
-t.v = "0.1.0";
-let s = t;
-export {
-  s as P
-};

package/dist/defs-react.d.ts

@@ -1,9 +0,0 @@
-import { default as React } from 'react';
-/**
- * TODO: Verify if ReactBaseType can be set as a more specific React interface
- * Use the React IntrinsicElements interface to find how to map standard HTML elements to existing React Interfaces
- * Example: an HTML button maps to `React.ButtonHTMLAttributes<HTMLButtonElement>`
- * https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0bb210867d16170c4a08d9ce5d132817651a0f80/types/react/index.d.ts#L2829
- */
-export type ReactBaseType = React.HTMLAttributes<HTMLElement>;
-//# sourceMappingURL=defs-react.d.ts.map

package/dist/defs-react.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"defs-react.d.ts","sourceRoot":"","sources":["../src/defs-react.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B;;;;;GAKG;AACH,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAA"}

package/dist/defs.d.ts

@@ -1,35 +0,0 @@
-import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
-export interface Column {
-    /**
-     * Unique identifier for the column
-     * */
-    id: string;
-    /**
-     * Optional property to specify the display name for the column heading
-     * */
-    heading: string;
-    /**
-     * Optional property to specify the text alignment of the column
-     * */
-    textAlign?: 'left' | 'right' | 'center';
-    /**
-     * Optional property to specify the width of the column
-     * */
-    width?: string;
-    /**
-     * Optional property to specify the key in the data object to display in this column
-     * */
-    accessor?: string;
-}
-export interface DataTableProps {
-    /**
-     * Array of column definitions
-     */
-    columns: Column[];
-    /**
-     * Array of data objects to display
-     */
-    data: Record<string, unknown>[];
-}
-export declare const defaultProps: ComponentDefaultProps<DataTableProps, keyof Omit<DataTableProps, 'columns' | 'data'>>;
-//# sourceMappingURL=defs.d.ts.map

package/dist/defs.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../src/defs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAE5E,MAAM,WAAW,MAAM;IACrB;;SAEK;IACL,EAAE,EAAE,MAAM,CAAC;IACX;;SAEK;IACL,OAAO,EAAE,MAAM,CAAC;IAChB;;SAEK;IACL,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IAExC;;SAEK;IACL,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;SAEK;IACL,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,OAAO,EAAE,MAAM,EAAE,CAAC;IAElB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;CACjC;AAED,eAAO,MAAM,YAAY,EAAE,qBAAqB,CAAC,cAAc,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,SAAS,GAAG,MAAM,CAAC,CAG9G,CAAC"}

package/dist/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,yDAAyD,CAAC;AAKrF,OAAO,EACH,KAAK,cAAc,EACnB,KAAK,MAAM,EACd,MAAM,QAAQ,CAAC;AAGhB,cAAc,QAAQ,CAAC;AAEvB,QAAA,MAAM,iBAAiB,mBAAmB,CAAC;;AAE3C;;GAEG;AACH,qBACa,YAAa,SAAQ,iBAAqB,YAAW,cAAc;IAC5E;;OAEG;IAEI,OAAO,EAAE,MAAM,EAAE,CAAM;IAE9B;;OAEG;IAEI,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAM;IAE5C;;;OAGG;IACH,OAAO,CAAC,gBAAgB;IAiBxB;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAUzB;;;;OAIG;IACH,OAAO,CAAC,eAAe;IAevB;;OAEG;IACH,OAAO,CAAC,eAAe;IAYvB,MAAM;IAiBN,MAAM,CAAC,MAAM,0BAAqB;CACrC;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,YAAY,CAAC;KACrC;CACJ"}

package/dist/pie-data-table-header/defs-react.d.ts

@@ -1,9 +0,0 @@
-import { default as React } from 'react';
-/**
- * TODO: Verify if ReactBaseType can be set as a more specific React interface
- * Use the React IntrinsicElements interface to find how to map standard HTML elements to existing React Interfaces
- * Example: an HTML button maps to `React.ButtonHTMLAttributes<HTMLButtonElement>`
- * https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0bb210867d16170c4a08d9ce5d132817651a0f80/types/react/index.d.ts#L2829
- */
-export type ReactBaseType = React.HTMLAttributes<HTMLElement>;
-//# sourceMappingURL=defs-react.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"defs-react.d.ts","sourceRoot":"","sources":["../../src/pie-data-table-header/defs-react.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B;;;;;GAKG;AACH,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAA"}

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

@@ -1,18 +0,0 @@
-import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
-export declare const dataTableHeaderVariant: string[];
-export interface DataTableHeaderProps {
-    /**
-     * Title text for the data table header
-     */
-    title: string;
-    /**
-     * Subtitle text for the data table header
-     */
-    subtitle?: string;
-    /**
-     * Emphasis level for the header
-     */
-    variant?: typeof dataTableHeaderVariant[number];
-}
-export declare const defaultProps: ComponentDefaultProps<DataTableHeaderProps, keyof Omit<DataTableHeaderProps, 'title' | 'subtitle'>>;
-//# sourceMappingURL=defs.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../src/pie-data-table-header/defs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAE5E,eAAO,MAAM,sBAAsB,UAAuB,CAAC;AAE3D,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,sBAAsB,CAAC,MAAM,CAAC,CAAC;CACjD;AAED,eAAO,MAAM,YAAY,EAAE,qBAAqB,CAAC,oBAAoB,EAAE,MAAM,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,UAAU,CAAC,CAE5H,CAAC"}

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

@@ -1,36 +0,0 @@
-import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
-import { DataTableHeaderProps, defaultProps } from './defs';
-export * from './defs';
-declare const componentSelector = "pie-data-table-header";
-/**
- * @tagname pie-data-table-header
- */
-export declare class PieDataTableHeader extends PieElement implements DataTableHeaderProps {
-    /**
-     * Title text for the data table header
-     */
-    title: DataTableHeaderProps['title'];
-    /**
-     * Subtitle text for the data table header
-     */
-    subtitle: DataTableHeaderProps['subtitle'];
-    /**
-     * Emphasis level for the header
-     */
-    variant?: typeof defaultProps.variant;
-    private hasActionButtons;
-    /**
-     * Handles the slot change event to determine if there are action buttons.
-     *
-     * @param event - The slot change event
-     */
-    private handleSlotChange;
-    render(): import('lit-html').TemplateResult<1>;
-    static styles: import('lit').CSSResult;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        [componentSelector]: PieDataTableHeader;
-    }
-}
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"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"}

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

@@ -1,71 +0,0 @@
-import { unsafeCSS as h, nothing as p, html as n } from "lit";
-import { property as c, state as b } from "lit/decorators.js";
-import { P as g } from "../PieElement-BsEd8lGj.js";
-import { validPropertyValues as u, safeCustomElement as f } from "@justeattakeaway/pie-webc-core";
-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;
-};
-const S = "pie-data-table-header";
-let r = class extends g {
-  constructor() {
-    super(...arguments), this.hasActionButtons = !1;
-  }
-  /**
-   * Handles the slot change event to determine if there are action buttons.
-   *
-   * @param event - The slot change event
-   */
-  handleSlotChange(e) {
-    const t = e.target;
-    this.hasActionButtons = t.assignedElements().length > 0;
-  }
-  render() {
-    const { title: e, subtitle: t, variant: s } = this;
-    return n`
-            <header class="${v({
-      "c-data-table-header": !0,
-      "c-data-table-header--strong": s === "strong"
-    })}">
-                <div class="c-data-table-header-title-wrapper">
-                    ${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`
-                    <div class="c-data-table-action-buttons-wrapper">
-                        <slot name="action-button" @slotchange=${this.handleSlotChange}></slot>
-                    </div>
-                ` : n`
-                    <slot name="action-button" @slotchange=${this.handleSlotChange} style="display: none;"></slot>
-                `}
-            </header>
-        `;
-  }
-};
-r.styles = h(m);
-l([
-  c({ type: String })
-], r.prototype, "title", 2);
-l([
-  c({ type: String })
-], r.prototype, "subtitle", 2);
-l([
-  c({ type: String }),
-  u(S, y, x.variant)
-], r.prototype, "variant", 2);
-l([
-  b()
-], r.prototype, "hasActionButtons", 2);
-r = l([
-  f("pie-data-table-header")
-], r);
-export {
-  r as PieDataTableHeader,
-  y as dataTableHeaderVariant,
-  x as defaultProps
-};

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

@@ -1,7 +0,0 @@
-import { PieDataTableHeader as PieDataTableHeaderLit } from './index';
-import { DataTableHeaderProps } from './defs';
-import * as React from 'react';
-export * from './defs';
-type ReactBaseType = React.HTMLAttributes<HTMLElement>;
-export declare const PieDataTableHeader: React.ForwardRefExoticComponent<React.PropsWithoutRef<DataTableHeaderProps> & React.RefAttributes<PieDataTableHeaderLit> & ReactBaseType>;
-//# sourceMappingURL=react.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../src/pie-data-table-header/react.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,kBAAkB,IAAI,qBAAqB,EAAE,MAAM,SAAS,CAAC;AACtE,OAAO,EAAE,KAAK,oBAAoB,EAAE,MAAM,QAAQ,CAAC;AAEnD,cAAc,QAAQ,CAAC;AAUvB,KAAK,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAA;AAEtD,eAAO,MAAM,kBAAkB,EAA8B,KAAK,CAAC,yBAAyB,CAAC,KAAK,CAAC,eAAe,CAAC,oBAAoB,CAAC,GAClI,KAAK,CAAC,aAAa,CAAC,qBAAqB,CAAC,GAAG,aAAa,CAAC,CAAC"}

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

@@ -1,16 +0,0 @@
-import * as e from "react";
-import { createComponent as a } from "@lit/react";
-import { PieDataTableHeader as t } from "./index.js";
-import { dataTableHeaderVariant as p, defaultProps as s } from "./index.js";
-const r = a({
-  displayName: "PieDataTableHeader",
-  elementClass: t,
-  react: e,
-  tagName: "pie-data-table-header",
-  events: {}
-}), i = r;
-export {
-  i as PieDataTableHeader,
-  p as dataTableHeaderVariant,
-  s as defaultProps
-};

package/dist/react.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../src/react.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,YAAY,IAAI,eAAe,EAAE,MAAM,SAAS,CAAC;AAC1D,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,QAAQ,CAAC;AAE7C,cAAc,QAAQ,CAAC;AAUvB,KAAK,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAA;AAEtD,eAAO,MAAM,YAAY,EAAwB,KAAK,CAAC,yBAAyB,CAAC,KAAK,CAAC,eAAe,CAAC,cAAc,CAAC,GAChH,KAAK,CAAC,aAAa,CAAC,eAAe,CAAC,GAAG,aAAa,CAAC,CAAC"}

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

@@ -1,44 +0,0 @@
-@use '@justeattakeaway/pie-css/scss' as p;
-
-: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: #{p.font-size(--dt-font-size-24)};
-  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: #{p.font-size(--dt-font-size-16)};
-  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);
-}

package/src/pie-data-table-header/defs-react.ts

@@ -1,8 +0,0 @@
-import type React from 'react';
-/**
- * TODO: Verify if ReactBaseType can be set as a more specific React interface
- * Use the React IntrinsicElements interface to find how to map standard HTML elements to existing React Interfaces
- * Example: an HTML button maps to `React.ButtonHTMLAttributes<HTMLButtonElement>`
- * https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0bb210867d16170c4a08d9ce5d132817651a0f80/types/react/index.d.ts#L2829
- */
-export type ReactBaseType = React.HTMLAttributes<HTMLElement>

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

@@ -1,22 +0,0 @@
-import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
-
-export const dataTableHeaderVariant = ['subtle', 'strong'];
-
-export interface DataTableHeaderProps {
-  /**
-   * Title text for the data table header
-   */
-  title: string;
-  /**
-   * Subtitle text for the data table header
-   */
-  subtitle?: string;
-  /**
-   * Emphasis level for the header
-   */
-  variant?: typeof dataTableHeaderVariant[number];
-}
-
-export const defaultProps: ComponentDefaultProps<DataTableHeaderProps, keyof Omit<DataTableHeaderProps, 'title' | 'subtitle'>> = {
-    variant: 'subtle',
-};

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

@@ -1,89 +0,0 @@
-import { html, nothing, unsafeCSS } from 'lit';
-import { property, state } from 'lit/decorators.js';
-import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
-import { safeCustomElement, validPropertyValues } from '@justeattakeaway/pie-webc-core';
-import { classMap } from 'lit/directives/class-map.js';
-
-import styles from './data-table-header.scss?inline';
-import {
-    type DataTableHeaderProps,
-    dataTableHeaderVariant,
-    defaultProps,
-} from './defs';
-
-// Valid values available to consumers
-export * from './defs';
-
-const componentSelector = 'pie-data-table-header';
-
-/**
- * @tagname pie-data-table-header
- */
-@safeCustomElement('pie-data-table-header')
-export class PieDataTableHeader extends PieElement implements DataTableHeaderProps {
-    /**
-     * Title text for the data table header
-     */
-    @property({ type: String })
-    public title!: DataTableHeaderProps['title'];
-
-    /**
-     * Subtitle text for the data table header
-     */
-    @property({ type: String })
-    public subtitle: DataTableHeaderProps['subtitle'];
-
-    /**
-     * Emphasis level for the header
-     */
-    @property({ type: String })
-    @validPropertyValues(componentSelector, dataTableHeaderVariant, defaultProps.variant)
-    public variant?: typeof defaultProps.variant;
-
-    @state()
-    private hasActionButtons = false;
-
-    /**
-     * Handles the slot change event to determine if there are action buttons.
-     *
-     * @param event - The slot change event
-     */
-    private handleSlotChange (event: Event) {
-        const slot = event.target as HTMLSlotElement;
-        this.hasActionButtons = slot.assignedElements().length > 0;
-    }
-
-    render () {
-        const { title, subtitle, variant } = this;
-
-        const classes = {
-            'c-data-table-header': true,
-            'c-data-table-header--strong': variant === 'strong',
-        };
-
-        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} 
-                    ${subtitle ? html`<span class="c-data-table-header-subtitle">${subtitle}</span>` : nothing}
-                </div>
-                ${this.hasActionButtons ? html`
-                    <div class="c-data-table-action-buttons-wrapper">
-                        <slot name="action-button" @slotchange=${this.handleSlotChange}></slot>
-                    </div>
-                ` : html`
-                    <slot name="action-button" @slotchange=${this.handleSlotChange} style="display: none;"></slot>
-                `}
-            </header>
-        `;
-    }
-
-    // Renders a `CSSResult` generated from SCSS by Vite
-    static styles = unsafeCSS(styles);
-}
-
-declare global {
-    interface HTMLElementTagNameMap {
-        [componentSelector]: PieDataTableHeader;
-    }
-}

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

@@ -1,19 +0,0 @@
-import * as React from 'react';
-import { createComponent } from '@lit/react';
-import { PieDataTableHeader as PieDataTableHeaderLit } from './index';
-import { type DataTableHeaderProps } from './defs';
-
-export * from './defs';
-
-const PieDataTableHeaderReact = createComponent({
-    displayName: 'PieDataTableHeader',
-    elementClass: PieDataTableHeaderLit,
-    react: React,
-    tagName: 'pie-data-table-header',
-    events: {},
-});
-
-type ReactBaseType = React.HTMLAttributes<HTMLElement>
-
-export const PieDataTableHeader = PieDataTableHeaderReact as React.ForwardRefExoticComponent<React.PropsWithoutRef<DataTableHeaderProps>
-    & React.RefAttributes<PieDataTableHeaderLit> & ReactBaseType>;