@parksw/sw-ui-components 0.0.2 → 0.0.5

package/dist/index.js

@@ -1,4 +1,801 @@
-export * from './my-element.js';
-export * from './my-button.js';
-export * from './my-calendar.js';
-export * from './my-grid.js';
+import { LitElement, css, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { when } from "lit/directives/when.js";
+import { classMap } from "lit/directives/class-map.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { repeat } from "lit/directives/repeat.js";
+function __decorate(e, c, l, u) {
+	var d = arguments.length, f = d < 3 ? c : u === null ? u = Object.getOwnPropertyDescriptor(c, l) : u, p;
+	if (typeof Reflect == "object" && typeof Reflect.decorate == "function") f = Reflect.decorate(e, c, l, u);
+	else for (var m = e.length - 1; m >= 0; m--) (p = e[m]) && (f = (d < 3 ? p(f) : d > 3 ? p(c, l, f) : p(c, l)) || f);
+	return d > 3 && f && Object.defineProperty(c, l, f), f;
+}
+var MyElement = class extends LitElement {
+	constructor(...e) {
+		super(...e), this.name = "World";
+	}
+	render() {
+		return html`
+      <h1>Hello, ${this.name}!</h1>
+    `;
+	}
+	static #e = this.styles = css`
+    :host {
+      display: block;
+      border: solid 1px gray;
+      padding: 16px;
+      max-width: 800px;
+    }
+  `;
+};
+__decorate([property()], MyElement.prototype, "name", void 0), MyElement = __decorate([customElement("my-element")], MyElement);
+var MyButton = class extends LitElement {
+	constructor(...e) {
+		super(...e), this.label = "Button", this.disabled = !1, this.variant = "primary";
+	}
+	render() {
+		return html`
+      <button
+        class="button ${this.variant}"
+        ?disabled=${this.disabled}
+      >
+        ${this.label}
+      </button>
+    `;
+	}
+	static #e = this.styles = css`
+    .button {
+      border: none;
+      color: white;
+      padding: 12px 24px;
+      text-align: center;
+      text-decoration: none;
+      display: inline-block;
+      font-size: 16px;
+      margin: 4px 2px;
+      cursor: pointer;
+      border-radius: 8px;
+      transition: background-color 0.3s ease;
+    }
+
+    .button:disabled {
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+
+    .primary {
+      background-color: #4CAF50; /* Green */
+    }
+
+    .primary:hover:not(:disabled) {
+      background-color: #45a049;
+    }
+
+    .secondary {
+      background-color: #008CBA; /* Blue */
+    }
+
+    .secondary:hover:not(:disabled) {
+      background-color: #007bb5;
+    }
+  `;
+};
+__decorate([property({ type: String })], MyButton.prototype, "label", void 0), __decorate([property({
+	type: Boolean,
+	reflect: !0
+})], MyButton.prototype, "disabled", void 0), __decorate([property({ type: String })], MyButton.prototype, "variant", void 0), MyButton = __decorate([customElement("my-button")], MyButton);
+var MyCalendar = class extends LitElement {
+	constructor(...e) {
+		super(...e), this.date = /* @__PURE__ */ new Date();
+	}
+	get year() {
+		return this.date.getFullYear();
+	}
+	get month() {
+		return this.date.getMonth();
+	}
+	_changeMonth(e) {
+		this.date = new Date(this.year, this.month + e, 1);
+	}
+	_renderHeader() {
+		return html`
+      <div class="header">
+        <button @click=${() => this._changeMonth(-1)}>‹</button>
+        <div class="month-year">${this.date.toLocaleString("default", { month: "long" })} ${this.year}</div>
+        <button @click=${() => this._changeMonth(1)}>›</button>
+      </div>
+    `;
+	}
+	_renderDaysOfWeek() {
+		return html`
+      <div class="days-of-week">
+        ${[
+			"Sun",
+			"Mon",
+			"Tue",
+			"Wed",
+			"Thu",
+			"Fri",
+			"Sat"
+		].map((e) => html`<div>${e}</div>`)}
+      </div>
+    `;
+	}
+	_renderDates() {
+		let e = /* @__PURE__ */ new Date(), c = new Date(this.year, this.month, 1).getDay(), u = new Date(this.year, this.month + 1, 0).getDate(), d = [];
+		for (let e = 0; e < c; e++) d.push(html`<div class="date-cell empty"></div>`);
+		for (let c = 1; c <= u; c++) {
+			let u = this.year === e.getFullYear() && this.month === e.getMonth() && c === e.getDate();
+			d.push(html`<div class="date-cell ${u ? "today" : ""}">${c}</div>`);
+		}
+		return html`<div class="date-grid">${d}</div>`;
+	}
+	render() {
+		return html`
+      <div class="calendar-container">
+        ${this._renderHeader()}
+        ${this._renderDaysOfWeek()}
+        ${this._renderDates()}
+      </div>
+    `;
+	}
+	static #e = this.styles = css`
+    :host {
+      display: block;
+      max-width: 350px;
+      border: 1px solid #ccc;
+      border-radius: 8px;
+      padding: 16px;
+      font-family: sans-serif;
+      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+    }
+
+    .header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 16px;
+    }
+
+    .header button {
+      background: none;
+      border: 1px solid #ccc;
+      border-radius: 50%;
+      width: 32px;
+      height: 32px;
+      cursor: pointer;
+      font-size: 18px;
+      transition: background-color 0.2s;
+    }
+
+    .header button:hover {
+      background-color: #eee;
+    }
+
+    .month-year {
+      font-size: 1.2em;
+      font-weight: bold;
+    }
+
+    .days-of-week, .date-grid {
+      display: grid;
+      grid-template-columns: repeat(7, 1fr);
+      text-align: center;
+    }
+
+    .days-of-week > div {
+      font-weight: bold;
+      padding-bottom: 8px;
+      font-size: 0.9em;
+      color: #666;
+    }
+
+    .date-cell {
+      padding: 4px 0;
+      cursor: pointer;
+      border-radius: 50%;
+      width: 32px;
+      height: 32px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin: 2px auto;
+      transition: background-color 0.2s;
+    }
+
+    .date-cell:not(.empty):hover {
+      background-color: #eee;
+    }
+
+    .date-cell.today {
+      background-color: #4CAF50;
+      color: white;
+      font-weight: bold;
+    }
+  `;
+};
+__decorate([state()], MyCalendar.prototype, "date", void 0), MyCalendar = __decorate([customElement("my-calendar")], MyCalendar);
+var MyGrid = class extends LitElement {
+	constructor() {
+		super(), this.columns = [], this.data = [], this.itemsPerPage = 10, this.columnReordering = !0, this.height = "auto", this.enableColumnVisibility = !0, this.enableFilter = !0, this._sortKey = null, this._sortDirection = "asc", this._draggedColumnIndex = null, this._dragOverColumnIndex = null, this._selectedRowId = null, this._selectedColumnKey = null, this._filterValues = {}, this._activeFilterColumn = null, this._filterSearchTerm = "", this._currentPage = 1, this._hiddenColumns = /* @__PURE__ */ new Set(), this._showColumnMenu = !1, this._filterMenuSortDirection = "asc", this._resizingColumnIndex = null, this._startX = 0, this._startWidth = 0, this._handleDocumentClick = this._handleDocumentClick.bind(this), this._handleResizeMove = this._handleResizeMove.bind(this), this._handleResizeEnd = this._handleResizeEnd.bind(this);
+	}
+	connectedCallback() {
+		super.connectedCallback(), document.addEventListener("click", this._handleDocumentClick), document.addEventListener("mousemove", this._handleResizeMove), document.addEventListener("mouseup", this._handleResizeEnd);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), document.removeEventListener("click", this._handleDocumentClick), document.removeEventListener("mousemove", this._handleResizeMove), document.removeEventListener("mouseup", this._handleResizeEnd);
+	}
+	updated(e) {
+		super.updated(e), e.has("enableFilter") && (this._filterValues = {}, this._activeFilterColumn = null, this._filterSearchTerm = "", this._resetPage());
+	}
+	_handleDocumentClick(e) {
+		this._showColumnMenu &&= !1, this._activeFilterColumn && (this._activeFilterColumn = null, this._filterSearchTerm = "");
+	}
+	get _visibleColumns() {
+		return this.columns.filter((e) => !this._hiddenColumns.has(e.key));
+	}
+	get _gridColumnTemplate() {
+		let e = "";
+		return this.enableColumnVisibility && (e += "40px "), e += this._visibleColumns.map((e) => e.width || "minmax(150px, 1fr)").join(" "), e;
+	}
+	_resetPage() {
+		this._currentPage = 1;
+	}
+	_toggleColumnMenu(e) {
+		e.stopPropagation(), this._showColumnMenu = !this._showColumnMenu, this._activeFilterColumn = null;
+	}
+	_toggleColumnVisibility(e) {
+		let c = new Set(this._hiddenColumns);
+		c.has(e) ? c.delete(e) : c.add(e), this._hiddenColumns = c;
+	}
+	_handleItemsPerPageChange(e) {
+		let c = e.target;
+		this.itemsPerPage = Number(c.value), this._resetPage();
+	}
+	_handleHeaderClick(e) {
+		this._sortKey === e ? this._sortDirection = this._sortDirection === "asc" ? "desc" : "asc" : (this._sortKey = e, this._sortDirection = "asc"), this._resetPage();
+	}
+	_toggleFilterMenu(e, c) {
+		e.stopPropagation(), this._activeFilterColumn === c ? this._activeFilterColumn = null : (this._activeFilterColumn = c, this._showColumnMenu = !1, this._filterMenuSortDirection = "asc"), this._filterSearchTerm = "";
+	}
+	_toggleFilterMenuSort(e) {
+		e.stopPropagation(), this._filterMenuSortDirection = this._filterMenuSortDirection === "asc" ? "desc" : "asc";
+	}
+	_getUniqueValues(e) {
+		return Array.from(new Set(this.data.map((c) => c[e]))).sort((e, c) => {
+			if (e === c) return 0;
+			if (e == null) return 1;
+			if (c == null) return -1;
+			let l = 0;
+			if (typeof e == "number" && typeof c == "number") l = e - c;
+			else {
+				let u = Date.parse(String(e)), d = Date.parse(String(c));
+				l = !isNaN(u) && !isNaN(d) && String(e).includes("-") && String(c).includes("-") ? u - d : String(e).localeCompare(String(c));
+			}
+			return this._filterMenuSortDirection === "asc" ? l : -l;
+		});
+	}
+	_isFilterActive(e) {
+		return !!this._filterValues[e];
+	}
+	_handleFilterValueChange(e, c, l) {
+		let u = this._filterValues[e];
+		if (u) {
+			let d = new Set(u);
+			l ? d.add(c) : d.delete(c);
+			let f = this._getUniqueValues(e);
+			if (d.size === f.length) {
+				let c = { ...this._filterValues };
+				delete c[e], this._filterValues = c;
+			} else this._filterValues = {
+				...this._filterValues,
+				[e]: d
+			};
+		} else if (!l) {
+			let l = this._getUniqueValues(e);
+			u = new Set(l), u.delete(c), this._filterValues = {
+				...this._filterValues,
+				[e]: u
+			};
+		}
+		this._resetPage();
+	}
+	_handleSelectAll(e, c) {
+		if (c) {
+			let c = { ...this._filterValues };
+			delete c[e], this._filterValues = c;
+		} else this._filterValues = {
+			...this._filterValues,
+			[e]: /* @__PURE__ */ new Set()
+		};
+		this._resetPage();
+	}
+	_handleFilterSearch(e) {
+		this._filterSearchTerm = e.target.value;
+	}
+	_handleResizeStart(e, c) {
+		e.preventDefault(), e.stopPropagation(), this._resizingColumnIndex = c, this._startX = e.pageX;
+		let l = this.shadowRoot?.querySelectorAll(".header-cell"), u = c + (this.enableColumnVisibility ? 1 : 0);
+		l && l[u] ? this._startWidth = l[u].getBoundingClientRect().width : this._startWidth = 150;
+	}
+	_handleResizeMove(e) {
+		if (this._resizingColumnIndex !== null) {
+			let c = e.pageX - this._startX, l = Math.max(50, this._startWidth + c), u = this._visibleColumns[this._resizingColumnIndex], d = this.columns.findIndex((e) => e.key === u.key);
+			if (d !== -1) {
+				let e = [...this.columns];
+				e[d] = {
+					...e[d],
+					width: `${l}px`
+				}, this.columns = e;
+			}
+		}
+	}
+	_handleResizeEnd() {
+		this._resizingColumnIndex = null;
+	}
+	get _filteredData() {
+		if (!this.enableFilter) return this.data;
+		let e = this.data, c = Object.keys(this._filterValues);
+		return c.length > 0 && (e = e.filter((e) => c.every((c) => {
+			let l = this._filterValues[c];
+			return l ? l.size === 0 ? !1 : l.has(e[c]) : !0;
+		}))), e;
+	}
+	get _sortedData() {
+		let e = this._filteredData;
+		return this._sortKey ? [...e].sort((e, c) => {
+			let l = e[this._sortKey], u = c[this._sortKey];
+			if (l === u) return 0;
+			if (l == null) return 1;
+			if (u == null) return -1;
+			let d = 0;
+			return d = typeof l == "string" && typeof u == "string" ? l.localeCompare(u) : typeof l == "number" && typeof u == "number" ? l - u : String(l).localeCompare(String(u)), this._sortDirection === "asc" ? d : -d;
+		}) : e;
+	}
+	get _paginatedData() {
+		let e = (this._currentPage - 1) * this.itemsPerPage, c = e + this.itemsPerPage;
+		return this._sortedData.slice(e, c);
+	}
+	_handleCellClick(e, c) {
+		let l = e.id;
+		this._selectedRowId === l && this._selectedColumnKey === c ? (this._selectedRowId = null, this._selectedColumnKey = null) : (this._selectedRowId = l, this._selectedColumnKey = c);
+	}
+	_handleDragStart(e, c) {
+		if (this._resizingColumnIndex !== null) {
+			e.preventDefault();
+			return;
+		}
+		if (!this.columnReordering) {
+			e.preventDefault();
+			return;
+		}
+		if (this._draggedColumnIndex = c, e.dataTransfer) {
+			e.dataTransfer.effectAllowed = "move", e.dataTransfer.setData("text/plain", c.toString());
+			let l = e.target;
+			e.dataTransfer.setDragImage(l, e.offsetX, e.offsetY);
+		}
+	}
+	_handleDragOver(e, c) {
+		this.columnReordering && (e.preventDefault(), e.dataTransfer && (e.dataTransfer.dropEffect = "move"), this._draggedColumnIndex !== null && this._draggedColumnIndex !== c && (this._dragOverColumnIndex = c));
+	}
+	_handleDragLeave() {
+		this.columnReordering && (this._dragOverColumnIndex = null);
+	}
+	_handleDrop(e, c) {
+		if (this.columnReordering) {
+			if (e.preventDefault(), e.dataTransfer) {
+				let l = parseInt(e.dataTransfer.getData("text/plain"), 10);
+				if (this._draggedColumnIndex !== null && l !== c) {
+					let e = [...this._visibleColumns], [u] = e.splice(l, 1);
+					e.splice(c, 0, u);
+					let d = [], f = 0;
+					for (let c of this.columns) this._hiddenColumns.has(c.key) ? d.push(c) : d.push(e[f++]);
+					this.columns = d;
+				}
+			}
+			this._draggedColumnIndex = null, this._dragOverColumnIndex = null;
+		}
+	}
+	_handleDragEnd() {
+		this.columnReordering && (this._draggedColumnIndex = null, this._dragOverColumnIndex = null);
+	}
+	_formatLink(e, c) {
+		return e.replace(/{(\w+)}/g, (e, l) => c[l] === void 0 ? e : String(c[l]));
+	}
+	_renderCell(e, c) {
+		let u = e[c.key];
+		return c.linkTemplate ? html`<a href="${this._formatLink(c.linkTemplate, e)}">${u}</a>` : u;
+	}
+	_renderColumnMenu() {
+		return this._showColumnMenu ? html`
+      <div class="column-menu" @click=${(e) => e.stopPropagation()}>
+        ${this.columns.map((e) => html`
+          <label>
+            <input
+              type="checkbox"
+              .checked=${!this._hiddenColumns.has(e.key)}
+              @change=${() => this._toggleColumnVisibility(e.key)}
+            />
+            ${e.header}
+          </label>
+        `)}
+      </div>
+    ` : null;
+	}
+	_renderFilterMenu(e, c) {
+		if (this._activeFilterColumn !== e) return null;
+		let u = this._getUniqueValues(e).filter((e) => String(e).toLowerCase().includes(this._filterSearchTerm.toLowerCase())), d = this._filterValues[e], f = !d, p = f || !!d && u.every((e) => d.has(e));
+		return html`
+        <div class="${c > this._visibleColumns.length - 3 ? "filter-menu right-aligned" : "filter-menu"}" @click=${(e) => e.stopPropagation()}>
+            <div class="filter-search-container">
+                <input 
+                    type="text" 
+                    class="filter-search" 
+                    placeholder="Search..." 
+                    .value=${this._filterSearchTerm}
+                    @input=${this._handleFilterSearch}
+                />
+                <button class="filter-sort-btn" @click=${this._toggleFilterMenuSort} title="Sort Values">
+                    ${this._filterMenuSortDirection === "asc" ? "▲" : "▼"}
+                </button>
+            </div>
+            <div class="filter-list">
+                <label>
+                    <input 
+                        type="checkbox" 
+                        .checked=${p}
+                        @change=${(c) => this._handleSelectAll(e, c.target.checked)}
+                    />
+                    (Select All)
+                </label>
+                ${u.map((c) => html`
+                    <label>
+                        <input 
+                            type="checkbox" 
+                            .checked=${f || !!d && d.has(c)}
+                            @change=${(l) => this._handleFilterValueChange(e, c, l.target.checked)}
+                        />
+                        ${String(c)}
+                    </label>
+                `)}
+            </div>
+        </div>
+      `;
+	}
+	_renderHeader(e) {
+		return html`
+      <div class="grid-header">
+        <div class="grid-row" style=${styleMap(e)}>
+          ${when(this.enableColumnVisibility, () => html`
+            <div class="grid-cell header-cell settings-cell" @click=${this._toggleColumnMenu}>
+              ⚙️
+              ${this._renderColumnMenu()}
+            </div>
+          `)}
+          ${this._visibleColumns.map((e, c) => {
+			let u = {
+				"grid-cell": !0,
+				"header-cell": !0,
+				"drag-over": this._dragOverColumnIndex === c,
+				reorderable: this.columnReordering,
+				"align-center": e.align === "center",
+				"align-right": e.align === "right"
+			};
+			return html`
+            <div
+              .draggable=${this.columnReordering}
+              class=${classMap(u)}
+              @click=${() => this._handleHeaderClick(e.key)}
+              @dragstart=${(e) => this._handleDragStart(e, c)}
+              @dragover=${(e) => this._handleDragOver(e, c)}
+              @dragleave=${this._handleDragLeave}
+              @drop=${(e) => this._handleDrop(e, c)}
+              @dragend=${this._handleDragEnd}
+            >
+              <span class="header-text">${e.header}</span>
+              <div class="header-icons">
+                  ${when(this.enableFilter, () => html`
+                    <span class="filter-icon ${this._isFilterActive(e.key) ? "active" : ""}" @click=${(c) => this._toggleFilterMenu(c, e.key)}>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon>
+                        </svg>
+                    </span>
+                  `)}
+                  ${this._sortKey === e.key ? html`<span class="sort-indicator">${this._sortDirection === "asc" ? "▲" : "▼"}</span>` : ""}
+              </div>
+              ${this._renderFilterMenu(e.key, c)}
+              <div class="resize-handle" @mousedown=${(e) => this._handleResizeStart(e, c)} @click=${(e) => e.stopPropagation()}></div>
+            </div>
+          `;
+		})}
+        </div>
+      </div>
+    `;
+	}
+	_renderBody(e) {
+		return html`
+      <div class="grid-body">
+        ${repeat(this._paginatedData, (e) => e.id, (c) => html`
+            <div class="grid-row ${this.rowClass ? this.rowClass(c) : ""}" style=${styleMap(e)}>
+              ${when(this.enableColumnVisibility, () => html`<div class="grid-cell data-cell"></div>`)}
+              ${this._visibleColumns.map((e) => {
+			let u = {
+				"grid-cell": !0,
+				"data-cell": !0,
+				selected: this._selectedRowId === c.id && this._selectedColumnKey === e.key,
+				"align-center": e.align === "center",
+				"align-right": e.align === "right",
+				[`col-${e.key}`]: !0
+			};
+			return html`
+                  <div
+                    title="${String(c[e.key] ?? "")}"
+                    class=${classMap(u)}
+                    @click=${() => this._handleCellClick(c, e.key)}
+                  >
+                    ${this._renderCell(c, e)}
+                  </div>
+                `;
+		})}
+            </div>
+          `)}
+      </div>
+    `;
+	}
+	_renderPaginationControls() {
+		let e = this._sortedData.length, c = Math.ceil(e / this.itemsPerPage);
+		return c <= 1 ? "" : html`
+      <div class="pagination">
+        <div class="pagination-group">
+          <button @click=${() => this._currentPage = 1} ?disabled=${this._currentPage === 1}>&lt;&lt; First</button>
+          <button @click=${() => this._currentPage--} ?disabled=${this._currentPage === 1}>&lt; Previous</button>
+        </div>
+        <div class="pagination-info">
+          <span>Page ${this._currentPage} of ${c}</span>
+        </div>
+        <div class="pagination-group">
+          <button @click=${() => this._currentPage++} ?disabled=${this._currentPage === c}>Next &gt;</button>
+          <button @click=${() => this._currentPage = c} ?disabled=${this._currentPage === c}>Last &gt;&gt;</button>
+        </div>
+      </div>
+    `;
+	}
+	render() {
+		let e = { height: this.height }, c = { "grid-template-columns": this._gridColumnTemplate };
+		return html`
+      <div class="toolbar">
+        <div class="items-per-page">
+          <span>Rows per page:</span>
+          <select @change=${this._handleItemsPerPageChange} .value=${this.itemsPerPage.toString()}>
+            <option value="10">10</option>
+            <option value="20">20</option>
+            <option value="50">50</option>
+          </select>
+        </div>
+      </div>
+      <div class="grid-wrapper" style=${styleMap(e)}>
+        <div class="grid-container">
+          ${this._renderHeader(c)}
+          ${this._renderBody(c)}
+        </div>
+      </div>
+      ${this._renderPaginationControls()}
+    `;
+	}
+	static #e = this.styles = css`
+    :host {
+      display: block;
+      font-family: sans-serif;
+    }
+    /* Default styles for all elements inside the component */
+    * {
+      box-sizing: border-box;
+      color: #000; /* Default text color black */
+    }
+    input, select, button {
+      background-color: #fff; /* Default background white */
+      color: #000; /* Default text color black */
+      border: 1px solid #ccc;
+    }
+
+    .toolbar { 
+      margin-bottom: 8px; 
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+    }
+    .toolbar button { padding: 6px 12px; border-radius: 4px; background-color: #f8f8f8; cursor: pointer; }
+    .toolbar button:hover { background-color: #eee; }
+    
+    .items-per-page {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 0.9em;
+    }
+    .items-per-page select {
+      padding: 4px 8px;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 1em;
+      color: #000;
+    }
+    .items-per-page select:hover {
+      border-color: #888;
+    }
+    
+    .grid-wrapper {
+      overflow: auto;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+    }
+    .grid-container {
+      display: inline-block;
+      min-width: 100%;
+      vertical-align: top;
+    }
+    .grid-header {
+      position: sticky;
+      top: 0;
+      z-index: 2;
+      background-color: #e8e8e8;
+    }
+    .grid-row {
+      display: grid;
+      border-bottom: 1px solid #ddd;
+    }
+    .grid-body .grid-row:last-of-type {
+      border-bottom: none;
+    }
+    .grid-cell {
+      padding: 12px 15px;
+      text-align: left;
+      color: #000;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      border-right: 1px solid #ddd; /* Add right border */
+    }
+    .grid-cell:last-child {
+      border-right: none; /* Remove right border for last cell */
+    }
+    .grid-cell.align-center { justify-content: center; text-align: center; }
+    .grid-cell.align-right { justify-content: flex-end; text-align: right; }
+
+    .header-cell {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-weight: bold;
+      cursor: pointer;
+      user-select: none;
+      position: relative;
+      overflow: visible;
+      border-bottom: 1px solid #ccc; /* Add bottom border to header */
+    }
+    .header-text {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      flex-grow: 1;
+    }
+    .header-icons {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+    }
+    .sort-indicator {
+      flex-shrink: 0;
+    }
+    .filter-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 16px;
+        height: 16px;
+        color: #888; /* Default grey icon */
+        padding: 2px;
+        border-radius: 2px;
+        cursor: pointer;
+    }
+    .filter-icon:hover {
+        color: #000; /* Black icon on hover */
+    }
+    .filter-icon.active {
+        color: #007bff; /* Blue icon when active */
+    }
+
+    .settings-cell {
+      justify-content: center;
+      position: relative;
+      overflow: visible;
+    }
+
+    .column-menu, .filter-menu {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      background-color: white;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      padding: 8px;
+      z-index: 100;
+      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+      min-width: 150px;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      max-height: 250px;
+      overflow-y: auto;
+      text-align: left;
+      font-weight: normal;
+    }
+    .filter-menu.right-aligned {
+        left: auto;
+        right: 0;
+    }
+    .column-menu label, .filter-menu label {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      cursor: pointer;
+      font-weight: normal;
+      white-space: nowrap;
+      padding: 2px 0;
+    }
+    .filter-search-container {
+        display: flex;
+        gap: 4px;
+        margin-bottom: 4px;
+    }
+    .filter-search {
+        width: 100%;
+        padding: 4px;
+        border-radius: 4px;
+        flex-grow: 1;
+    }
+    .filter-sort-btn {
+        padding: 4px 8px;
+        cursor: pointer;
+        font-size: 0.8em;
+    }
+
+    .data-cell { cursor: pointer; }
+    .data-cell.selected { background-color: #aedcff; }
+    .data-cell a { color: #007bff; text-decoration: none; }
+    .data-cell a:hover { text-decoration: underline; }
+    
+    .header-cell.reorderable { cursor: grab; }
+    .header-cell.drag-over { background-color: #cceeff; }
+    
+    .grid-body .grid-row:nth-of-type(even) { background-color: #f2f2f2; }
+    .grid-body .grid-row:hover { background-color: #e0e0e0; }
+    
+    .pagination { 
+      display: flex; 
+      justify-content: space-between; 
+      align-items: center; 
+      padding: 12px 0; 
+      font-size: 0.9em; 
+      color: #000;
+    }
+    .pagination-group { display: flex; gap: 8px; }
+    .pagination button { padding: 6px 12px; border-radius: 4px; background-color: #f8f8f8; cursor: pointer; }
+    .pagination button:disabled { cursor: not-allowed; opacity: 0.5; }
+
+    .resize-handle {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 5px;
+      height: 100%;
+      cursor: col-resize;
+      z-index: 1;
+    }
+    .resize-handle:hover {
+      background-color: #007bff;
+    }
+  `;
+};
+__decorate([property({ type: Array })], MyGrid.prototype, "columns", void 0), __decorate([property({ type: Array })], MyGrid.prototype, "data", void 0), __decorate([property({ type: Number })], MyGrid.prototype, "itemsPerPage", void 0), __decorate([property({ type: Boolean })], MyGrid.prototype, "columnReordering", void 0), __decorate([property({ type: String })], MyGrid.prototype, "height", void 0), __decorate([property({ type: Boolean })], MyGrid.prototype, "enableColumnVisibility", void 0), __decorate([property({ type: Boolean })], MyGrid.prototype, "enableFilter", void 0), __decorate([property()], MyGrid.prototype, "rowClass", void 0), __decorate([state()], MyGrid.prototype, "_sortKey", void 0), __decorate([state()], MyGrid.prototype, "_sortDirection", void 0), __decorate([state()], MyGrid.prototype, "_draggedColumnIndex", void 0), __decorate([state()], MyGrid.prototype, "_dragOverColumnIndex", void 0), __decorate([state()], MyGrid.prototype, "_selectedRowId", void 0), __decorate([state()], MyGrid.prototype, "_selectedColumnKey", void 0), __decorate([state()], MyGrid.prototype, "_filterValues", void 0), __decorate([state()], MyGrid.prototype, "_activeFilterColumn", void 0), __decorate([state()], MyGrid.prototype, "_filterSearchTerm", void 0), __decorate([state()], MyGrid.prototype, "_currentPage", void 0), __decorate([state()], MyGrid.prototype, "_hiddenColumns", void 0), __decorate([state()], MyGrid.prototype, "_showColumnMenu", void 0), __decorate([state()], MyGrid.prototype, "_filterMenuSortDirection", void 0), __decorate([state()], MyGrid.prototype, "_resizingColumnIndex", void 0), MyGrid = __decorate([customElement("my-grid")], MyGrid);
+export { MyButton, MyCalendar, MyElement, MyGrid };