@oscarpalmer/tabela 0.1.0 → 0.3.0

package/dist/components/body.component.cjs

@@ -0,0 +1,49 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const helpers_dom_helpers = require("../helpers/dom.helpers.cjs");
+const managers_virtualization_manager = require("../managers/virtualization.manager.cjs");
+const components_row_component = require("./row.component.cjs");
+function createFaker() {
+  const element = document.createElement("div");
+  element.style.height = "0";
+  element.style.inset = "0 auto auto 0";
+  element.style.opacity = "0";
+  element.style.pointerEvents = "none";
+  element.style.position = "absolute";
+  element.style.width = "1px";
+  return element;
+}
+class BodyComponent {
+  constructor(tabela) {
+    __publicField(this, "faker", createFaker());
+    __publicField(this, "group");
+    __publicField(this, "rows", []);
+    __publicField(this, "virtualization");
+    this.tabela = tabela;
+    this.group = helpers_dom_helpers.createRowGroup(false);
+    this.virtualization = new managers_virtualization_manager.VirtualizationManager(this);
+    this.group.className += " tabela__rowgroup-body";
+    this.group.style.height = "100%";
+    this.group.style.overflow = "auto";
+    this.group.style.position = "relative";
+    this.group.append(this.faker);
+    void this.addData(tabela.options.data).then(() => {
+      this.virtualization.update(true);
+    });
+  }
+  async addData(data) {
+    const { length } = data;
+    for (let index = 0; index < length; index += 1) {
+      this.rows.push(new components_row_component.RowComponent(this.tabela, data[index]));
+    }
+    this.updateVirtualization();
+  }
+  updateVirtualization() {
+    this.faker.style.height = `${this.rows.length * 32}px`;
+    this.virtualization.update(true);
+  }
+}
+exports.BodyComponent = BodyComponent;

package/dist/components/body.component.js

@@ -0,0 +1,49 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { createRowGroup } from "../helpers/dom.helpers.js";
+import { VirtualizationManager } from "../managers/virtualization.manager.js";
+import { RowComponent } from "./row.component.js";
+function createFaker() {
+  const element = document.createElement("div");
+  element.style.height = "0";
+  element.style.inset = "0 auto auto 0";
+  element.style.opacity = "0";
+  element.style.pointerEvents = "none";
+  element.style.position = "absolute";
+  element.style.width = "1px";
+  return element;
+}
+class BodyComponent {
+  constructor(tabela) {
+    __publicField(this, "faker", createFaker());
+    __publicField(this, "group");
+    __publicField(this, "rows", []);
+    __publicField(this, "virtualization");
+    this.tabela = tabela;
+    this.group = createRowGroup(false);
+    this.virtualization = new VirtualizationManager(this);
+    this.group.className += " tabela__rowgroup-body";
+    this.group.style.height = "100%";
+    this.group.style.overflow = "auto";
+    this.group.style.position = "relative";
+    this.group.append(this.faker);
+    void this.addData(tabela.options.data).then(() => {
+      this.virtualization.update(true);
+    });
+  }
+  async addData(data) {
+    const { length } = data;
+    for (let index = 0; index < length; index += 1) {
+      this.rows.push(new RowComponent(this.tabela, data[index]));
+    }
+    this.updateVirtualization();
+  }
+  updateVirtualization() {
+    this.faker.style.height = `${this.rows.length * 32}px`;
+    this.virtualization.update(true);
+  }
+}
+export {
+  BodyComponent
+};

package/dist/components/cell.component.cjs

@@ -0,0 +1,17 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const helpers_dom_helpers = require("../helpers/dom.helpers.cjs");
+class CellComponent {
+  constructor(tabela, column, row) {
+    __publicField(this, "element");
+    this.tabela = tabela;
+    this.column = column;
+    this.row = row;
+    this.element = helpers_dom_helpers.createCell(column.options.width);
+    this.element.textContent = String(this.row.data[column.options.field]);
+  }
+}
+exports.CellComponent = CellComponent;

package/dist/components/cell.component.js

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { createCell } from "../helpers/dom.helpers.js";
+class CellComponent {
+  constructor(tabela, column, row) {
+    __publicField(this, "element");
+    this.tabela = tabela;
+    this.column = column;
+    this.row = row;
+    this.element = createCell(column.options.width);
+    this.element.textContent = String(this.row.data[column.options.field]);
+  }
+}
+export {
+  CellComponent
+};

package/dist/components/column.component.cjs

@@ -0,0 +1,27 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+function createElement(title, width) {
+  const cell = document.createElement("div");
+  cell.className = "tabela__heading";
+  cell.role = "columnheader";
+  cell.style.width = `${width}px`;
+  cell.textContent = title;
+  return cell;
+}
+class ColumnComponent {
+  constructor(tabela, options) {
+    __publicField(this, "element");
+    __publicField(this, "options");
+    this.tabela = tabela;
+    const width = Number.parseInt(getComputedStyle(tabela.element).fontSize, 10) * (options.width ?? options.title.length * 1.5);
+    this.options = {
+      ...options,
+      width
+    };
+    this.element = createElement(options.title, width);
+  }
+}
+exports.ColumnComponent = ColumnComponent;

package/dist/components/column.component.js

@@ -0,0 +1,27 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+function createElement(title, width) {
+  const cell = document.createElement("div");
+  cell.className = "tabela__heading";
+  cell.role = "columnheader";
+  cell.style.width = `${width}px`;
+  cell.textContent = title;
+  return cell;
+}
+class ColumnComponent {
+  constructor(tabela, options) {
+    __publicField(this, "element");
+    __publicField(this, "options");
+    this.tabela = tabela;
+    const width = Number.parseInt(getComputedStyle(tabela.element).fontSize, 10) * (options.width ?? options.title.length * 1.5);
+    this.options = {
+      ...options,
+      width
+    };
+    this.element = createElement(options.title, width);
+  }
+}
+export {
+  ColumnComponent
+};

package/dist/components/footer.component.cjs

@@ -0,0 +1,29 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const helpers_dom_helpers = require("../helpers/dom.helpers.cjs");
+class FooterComponent {
+  constructor(tabela) {
+    __publicField(this, "cells", []);
+    __publicField(this, "group");
+    __publicField(this, "row");
+    this.tabela = tabela;
+    const { group, row } = helpers_dom_helpers.createRowGroup();
+    this.group = group;
+    this.row = row;
+    this.group.className += " tabela__rowgroup-footer";
+    this.row.className += " tabela__row-footer";
+    const { columns } = tabela.header;
+    const { length } = columns;
+    for (let index = 0; index < length; index += 1) {
+      const cell = helpers_dom_helpers.createCell(columns[index].options.width ?? 4);
+      cell.className += " tabela__cell-footer";
+      cell.innerHTML = "&nbsp;";
+      this.cells.push(cell);
+      row.append(cell);
+    }
+  }
+}
+exports.FooterComponent = FooterComponent;

package/dist/components/footer.component.js

@@ -0,0 +1,29 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { createRowGroup, createCell } from "../helpers/dom.helpers.js";
+class FooterComponent {
+  constructor(tabela) {
+    __publicField(this, "cells", []);
+    __publicField(this, "group");
+    __publicField(this, "row");
+    this.tabela = tabela;
+    const { group, row } = createRowGroup();
+    this.group = group;
+    this.row = row;
+    this.group.className += " tabela__rowgroup-footer";
+    this.row.className += " tabela__row-footer";
+    const { columns } = tabela.header;
+    const { length } = columns;
+    for (let index = 0; index < length; index += 1) {
+      const cell = createCell(columns[index].options.width ?? 4);
+      cell.className += " tabela__cell-footer";
+      cell.innerHTML = "&nbsp;";
+      this.cells.push(cell);
+      row.append(cell);
+    }
+  }
+}
+export {
+  FooterComponent
+};

package/dist/components/header.component.cjs

@@ -0,0 +1,25 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const helpers_dom_helpers = require("../helpers/dom.helpers.cjs");
+const components_column_component = require("./column.component.cjs");
+class HeaderComponent {
+  constructor(tabela) {
+    __publicField(this, "columns");
+    __publicField(this, "group");
+    __publicField(this, "row");
+    this.tabela = tabela;
+    this.columns = tabela.options.columns.map(
+      (column) => new components_column_component.ColumnComponent(tabela, column)
+    );
+    const { group, row } = helpers_dom_helpers.createRowGroup();
+    this.group = group;
+    this.row = row;
+    this.group.className += " tabela__rowgroup-header";
+    this.row.className += " tabela__row-header";
+    row.append(...this.columns.map((column) => column.element));
+  }
+}
+exports.HeaderComponent = HeaderComponent;

package/dist/components/header.component.js

@@ -0,0 +1,25 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { createRowGroup } from "../helpers/dom.helpers.js";
+import { ColumnComponent } from "./column.component.js";
+class HeaderComponent {
+  constructor(tabela) {
+    __publicField(this, "columns");
+    __publicField(this, "group");
+    __publicField(this, "row");
+    this.tabela = tabela;
+    this.columns = tabela.options.columns.map(
+      (column) => new ColumnComponent(tabela, column)
+    );
+    const { group, row } = createRowGroup();
+    this.group = group;
+    this.row = row;
+    this.group.className += " tabela__rowgroup-header";
+    this.row.className += " tabela__row-header";
+    row.append(...this.columns.map((column) => column.element));
+  }
+}
+export {
+  HeaderComponent
+};

package/dist/components/row.component.cjs

@@ -0,0 +1,32 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const helpers_dom_helpers = require("../helpers/dom.helpers.cjs");
+const components_cell_component = require("./cell.component.cjs");
+class RowComponent {
+  constructor(tabela, data) {
+    __publicField(this, "cells", []);
+    __publicField(this, "element");
+    this.tabela = tabela;
+    this.data = data;
+    this.element = helpers_dom_helpers.createRow();
+    this.element.className += " tabela__row-body";
+  }
+  render() {
+    if (this.element.innerHTML !== "") {
+      return;
+    }
+    const { tabela } = this;
+    const { columns } = tabela.header;
+    const { length } = columns;
+    for (let index = 0; index < length; index += 1) {
+      const cell = new components_cell_component.CellComponent(tabela, columns[index], this);
+      cell.element.className += " tabela__cell-body";
+      this.cells.push(cell);
+      this.element.append(cell.element);
+    }
+  }
+}
+exports.RowComponent = RowComponent;

package/dist/components/row.component.js

@@ -0,0 +1,32 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { createRow } from "../helpers/dom.helpers.js";
+import { CellComponent } from "./cell.component.js";
+class RowComponent {
+  constructor(tabela, data) {
+    __publicField(this, "cells", []);
+    __publicField(this, "element");
+    this.tabela = tabela;
+    this.data = data;
+    this.element = createRow();
+    this.element.className += " tabela__row-body";
+  }
+  render() {
+    if (this.element.innerHTML !== "") {
+      return;
+    }
+    const { tabela } = this;
+    const { columns } = tabela.header;
+    const { length } = columns;
+    for (let index = 0; index < length; index += 1) {
+      const cell = new CellComponent(tabela, columns[index], this);
+      cell.element.className += " tabela__cell-body";
+      this.cells.push(cell);
+      this.element.append(cell.element);
+    }
+  }
+}
+export {
+  RowComponent
+};

package/dist/helpers/dom.helpers.cjs

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+function createCell(width) {
+  const cell = document.createElement("div");
+  cell.className = "tabela__cell";
+  cell.role = "cell";
+  cell.style.width = `${width}px`;
+  return cell;
+}
+function createRowGroup(withRow) {
+  const group = document.createElement("div");
+  group.className = "tabela__rowgroup";
+  group.role = "rowgroup";
+  if (!(withRow ?? true)) {
+    return group;
+  }
+  const row = createRow();
+  group.append(row);
+  return { group, row };
+}
+function createRow() {
+  const row = document.createElement("div");
+  row.className = "tabela__row";
+  row.role = "row";
+  return row;
+}
+exports.createCell = createCell;
+exports.createRow = createRow;
+exports.createRowGroup = createRowGroup;

package/dist/helpers/dom.helpers.js

@@ -0,0 +1,29 @@
+function createCell(width) {
+  const cell = document.createElement("div");
+  cell.className = "tabela__cell";
+  cell.role = "cell";
+  cell.style.width = `${width}px`;
+  return cell;
+}
+function createRowGroup(withRow) {
+  const group = document.createElement("div");
+  group.className = "tabela__rowgroup";
+  group.role = "rowgroup";
+  if (!(withRow ?? true)) {
+    return group;
+  }
+  const row = createRow();
+  group.append(row);
+  return { group, row };
+}
+function createRow() {
+  const row = document.createElement("div");
+  row.className = "tabela__row";
+  row.role = "row";
+  return row;
+}
+export {
+  createCell,
+  createRow,
+  createRowGroup
+};

package/dist/index.cjs

@@ -1 +1,5 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const tabela = require("./tabela.cjs");
+exports.Tabela = tabela.Tabela;
+exports.tabela = tabela.tabela;

package/dist/index.js

@@ -1 +1,5 @@
-
+import { Tabela, tabela } from "./tabela.js";
+export {
+  Tabela,
+  tabela
+};

package/dist/managers/virtualization.manager.cjs

@@ -0,0 +1,75 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+function getRange(body, down) {
+  const { group, rows } = body;
+  const { clientHeight, scrollTop } = group;
+  const first = Math.floor(scrollTop / 32);
+  const last = Math.min(
+    rows.length - 1,
+    Math.ceil((scrollTop + clientHeight) / 32) - 1
+  );
+  const before = Math.ceil(clientHeight / 32) * (down ? 1 : 2);
+  const after = Math.ceil(clientHeight / 32) * (down ? 2 : 1);
+  const start = Math.max(0, first - before);
+  const end = Math.min(rows.length - 1, last + after);
+  return { end, start };
+}
+class VirtualizationManager {
+  constructor(body) {
+    __publicField(this, "active", false);
+    __publicField(this, "top", 0);
+    __publicField(this, "visible", /* @__PURE__ */ new Map());
+    this.body = body;
+    this.body.group.addEventListener(
+      "scroll",
+      () => {
+        this.onScroll();
+      },
+      {
+        passive: true
+      }
+    );
+  }
+  update(down) {
+    const { body, visible } = this;
+    const indices = /* @__PURE__ */ new Set();
+    const range = getRange(body, down);
+    for (let index = range.start; index <= range.end; index += 1) {
+      indices.add(index);
+    }
+    for (const [index, row] of visible) {
+      if (!indices.has(index)) {
+        visible.delete(index);
+        row.element.remove();
+      }
+    }
+    const fragment = document.createDocumentFragment();
+    for (let index = range.start; index <= range.end; index += 1) {
+      if (!visible.has(index)) {
+        const row = body.rows[index];
+        row.element.style.inset = "0 auto auto 0";
+        row.element.style.position = "absolute";
+        row.element.style.transform = `translateY(${index * 32}px)`;
+        row.render();
+        visible.set(index, row);
+        fragment.append(row.element);
+      }
+      body.group.append(fragment);
+    }
+  }
+  onScroll() {
+    if (!this.active) {
+      requestAnimationFrame(() => {
+        const top = this.body.group.scrollTop;
+        this.update(top > this.top);
+        this.active = false;
+        this.top = top;
+      });
+      this.active = true;
+    }
+  }
+}
+exports.VirtualizationManager = VirtualizationManager;

package/dist/managers/virtualization.manager.js

@@ -0,0 +1,75 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+function getRange(body, down) {
+  const { group, rows } = body;
+  const { clientHeight, scrollTop } = group;
+  const first = Math.floor(scrollTop / 32);
+  const last = Math.min(
+    rows.length - 1,
+    Math.ceil((scrollTop + clientHeight) / 32) - 1
+  );
+  const before = Math.ceil(clientHeight / 32) * (down ? 1 : 2);
+  const after = Math.ceil(clientHeight / 32) * (down ? 2 : 1);
+  const start = Math.max(0, first - before);
+  const end = Math.min(rows.length - 1, last + after);
+  return { end, start };
+}
+class VirtualizationManager {
+  constructor(body) {
+    __publicField(this, "active", false);
+    __publicField(this, "top", 0);
+    __publicField(this, "visible", /* @__PURE__ */ new Map());
+    this.body = body;
+    this.body.group.addEventListener(
+      "scroll",
+      () => {
+        this.onScroll();
+      },
+      {
+        passive: true
+      }
+    );
+  }
+  update(down) {
+    const { body, visible } = this;
+    const indices = /* @__PURE__ */ new Set();
+    const range = getRange(body, down);
+    for (let index = range.start; index <= range.end; index += 1) {
+      indices.add(index);
+    }
+    for (const [index, row] of visible) {
+      if (!indices.has(index)) {
+        visible.delete(index);
+        row.element.remove();
+      }
+    }
+    const fragment = document.createDocumentFragment();
+    for (let index = range.start; index <= range.end; index += 1) {
+      if (!visible.has(index)) {
+        const row = body.rows[index];
+        row.element.style.inset = "0 auto auto 0";
+        row.element.style.position = "absolute";
+        row.element.style.transform = `translateY(${index * 32}px)`;
+        row.render();
+        visible.set(index, row);
+        fragment.append(row.element);
+      }
+      body.group.append(fragment);
+    }
+  }
+  onScroll() {
+    if (!this.active) {
+      requestAnimationFrame(() => {
+        const top = this.body.group.scrollTop;
+        this.update(top > this.top);
+        this.active = false;
+        this.top = top;
+      });
+      this.active = true;
+    }
+  }
+}
+export {
+  VirtualizationManager
+};

package/dist/models/column.model.cjs

@@ -0,0 +1 @@
+"use strict";

package/dist/models/column.model.js

@@ -0,0 +1 @@
+

package/dist/models/tabela.options.cjs

@@ -0,0 +1 @@
+"use strict";

package/dist/models/tabela.options.js

@@ -0,0 +1 @@
+

package/dist/tabela.cjs

@@ -0,0 +1,29 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const components_body_component = require("./components/body.component.cjs");
+const components_footer_component = require("./components/footer.component.cjs");
+const components_header_component = require("./components/header.component.cjs");
+class Tabela {
+  constructor(element, options) {
+    __publicField(this, "body");
+    __publicField(this, "footer");
+    __publicField(this, "header");
+    this.element = element;
+    this.options = options;
+    element.role = "table";
+    element.classList.add("tabela");
+    element.setAttribute("aria-label", options.label);
+    this.header = new components_header_component.HeaderComponent(this);
+    this.body = new components_body_component.BodyComponent(this);
+    this.footer = new components_footer_component.FooterComponent(this);
+    element.append(this.header.group, this.body.group, this.footer.group);
+  }
+}
+function tabela(element, options) {
+  return new Tabela(element, options);
+}
+exports.Tabela = Tabela;
+exports.tabela = tabela;

package/dist/tabela.js

@@ -0,0 +1,29 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { BodyComponent } from "./components/body.component.js";
+import { FooterComponent } from "./components/footer.component.js";
+import { HeaderComponent } from "./components/header.component.js";
+class Tabela {
+  constructor(element, options) {
+    __publicField(this, "body");
+    __publicField(this, "footer");
+    __publicField(this, "header");
+    this.element = element;
+    this.options = options;
+    element.role = "table";
+    element.classList.add("tabela");
+    element.setAttribute("aria-label", options.label);
+    this.header = new HeaderComponent(this);
+    this.body = new BodyComponent(this);
+    this.footer = new FooterComponent(this);
+    element.append(this.header.group, this.body.group, this.footer.group);
+  }
+}
+function tabela(element, options) {
+  return new Tabela(element, options);
+}
+export {
+  Tabela,
+  tabela
+};