@parksw/sw-ui-components 0.0.1 → 0.0.3

package/dist/decorate-BnP3GfGh.js

@@ -0,0 +1,7 @@
+function __decorate(e, t, n, r) {
+	var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
+	if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
+	else for (var s = e.length - 1; s >= 0; s--) (o = e[s]) && (a = (i < 3 ? o(a) : i > 3 ? o(t, n, a) : o(t, n)) || a);
+	return i > 3 && a && Object.defineProperty(t, n, a), a;
+}
+export { __decorate as t };

package/dist/index.js

@@ -1,3 +1,6 @@
-export * from './my-element.js';
-export * from './my-button.js';
-export * from './my-calendar.js';
+import "./decorate-BnP3GfGh.js";
+import { t as MyElement } from "./my-element-BWehTtOJ.js";
+import { t as MyButton } from "./my-button-BXW2ABd3.js";
+import { t as MyCalendar } from "./my-calendar-ylD4tbTZ.js";
+import { t as MyGrid } from "./my-grid-DduCSbuo.js";
+export { MyButton, MyCalendar, MyElement, MyGrid };

package/dist/my-button-BXW2ABd3.js

@@ -0,0 +1,59 @@
+import { t as __decorate } from "./decorate-BnP3GfGh.js";
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+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);
+export { MyButton as t };

package/dist/my-button.js

@@ -1,75 +1,3 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { LitElement, css, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-let MyButton = class MyButton extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.label = 'Button';
-        this.disabled = false;
-        this.variant = 'primary';
-    }
-    render() {
-        return html `
-      <button
-        class="button ${this.variant}"
-        ?disabled=${this.disabled}
-      >
-        ${this.label}
-      </button>
-    `;
-    }
-    static { 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: true })
-], MyButton.prototype, "disabled", void 0);
-__decorate([
-    property({ type: String })
-], MyButton.prototype, "variant", void 0);
-MyButton = __decorate([
-    customElement('my-button')
-], MyButton);
+import "./decorate-BnP3GfGh.js";
+import { t as MyButton } from "./my-button-BXW2ABd3.js";
 export { MyButton };

package/dist/my-calendar-ylD4tbTZ.js

@@ -0,0 +1,135 @@
+import { t as __decorate } from "./decorate-BnP3GfGh.js";
+import { LitElement, css, html } from "lit";
+import { customElement, state } from "lit/decorators.js";
+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(), i = new Date(this.year, this.month, 1).getDay(), a = new Date(this.year, this.month + 1, 0).getDate(), o = [];
+		for (let e = 0; e < i; e++) o.push(html`<div class="date-cell empty"></div>`);
+		for (let i = 1; i <= a; i++) {
+			let a = this.year === e.getFullYear() && this.month === e.getMonth() && i === e.getDate();
+			o.push(html`<div class="date-cell ${a ? "today" : ""}">${i}</div>`);
+		}
+		return html`<div class="date-grid">${o}</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);
+export { MyCalendar as t };

package/dist/my-calendar.js

@@ -1,147 +1,3 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { LitElement, css, html } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
-let MyCalendar = class MyCalendar extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.date = new Date();
-    }
-    get year() {
-        return this.date.getFullYear();
-    }
-    get month() {
-        return this.date.getMonth();
-    }
-    _changeMonth(offset) {
-        this.date = new Date(this.year, this.month + offset, 1);
-    }
-    _renderHeader() {
-        const monthName = this.date.toLocaleString('default', { month: 'long' });
-        return html `
-      <div class="header">
-        <button @click=${() => this._changeMonth(-1)}>‹</button>
-        <div class="month-year">${monthName} ${this.year}</div>
-        <button @click=${() => this._changeMonth(1)}>›</button>
-      </div>
-    `;
-    }
-    _renderDaysOfWeek() {
-        const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
-        return html `
-      <div class="days-of-week">
-        ${days.map(day => html `<div>${day}</div>`)}
-      </div>
-    `;
-    }
-    _renderDates() {
-        const today = new Date();
-        const firstDayOfMonth = new Date(this.year, this.month, 1).getDay();
-        const daysInMonth = new Date(this.year, this.month + 1, 0).getDate();
-        const dates = [];
-        for (let i = 0; i < firstDayOfMonth; i++) {
-            dates.push(html `<div class="date-cell empty"></div>`);
-        }
-        for (let i = 1; i <= daysInMonth; i++) {
-            const isToday = this.year === today.getFullYear() &&
-                this.month === today.getMonth() &&
-                i === today.getDate();
-            dates.push(html `<div class="date-cell ${isToday ? 'today' : ''}">${i}</div>`);
-        }
-        return html `<div class="date-grid">${dates}</div>`;
-    }
-    render() {
-        return html `
-      <div class="calendar-container">
-        ${this._renderHeader()}
-        ${this._renderDaysOfWeek()}
-        ${this._renderDates()}
-      </div>
-    `;
-    }
-    static { 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);
+import "./decorate-BnP3GfGh.js";
+import { t as MyCalendar } from "./my-calendar-ylD4tbTZ.js";
 export { MyCalendar };

package/dist/my-element-BWehTtOJ.js

@@ -0,0 +1,23 @@
+import { t as __decorate } from "./decorate-BnP3GfGh.js";
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+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);
+export { MyElement as t };

package/dist/my-element.js

@@ -1,34 +1,3 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { LitElement, css, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-let MyElement = class MyElement extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.name = 'World';
-    }
-    render() {
-        return html `
-      <h1>Hello, ${this.name}!</h1>
-    `;
-    }
-    static { 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);
+import "./decorate-BnP3GfGh.js";
+import { t as MyElement } from "./my-element-BWehTtOJ.js";
 export { MyElement };

package/dist/my-grid-DduCSbuo.js

@@ -0,0 +1,592 @@
+import { t as __decorate } from "./decorate-BnP3GfGh.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";
+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 o = new Set(this._hiddenColumns);
+		o.has(e) ? o.delete(e) : o.add(e), this._hiddenColumns = o;
+	}
+	_handleItemsPerPageChange(e) {
+		let o = e.target;
+		this.itemsPerPage = Number(o.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, o) {
+		e.stopPropagation(), this._activeFilterColumn === o ? this._activeFilterColumn = null : (this._activeFilterColumn = o, this._showColumnMenu = !1, this._filterMenuSortDirection = "asc"), this._filterSearchTerm = "";
+	}
+	_toggleFilterMenuSort(e) {
+		e.stopPropagation(), this._filterMenuSortDirection = this._filterMenuSortDirection === "asc" ? "desc" : "asc";
+	}
+	_getUniqueValues(e) {
+		let o = new Set(this.data.map((o) => o[e]));
+		return Array.from(o).sort((e, o) => {
+			if (e === o) return 0;
+			if (e == null) return 1;
+			if (o == null) return -1;
+			let s = 0;
+			if (typeof e == "number" && typeof o == "number") s = e - o;
+			else {
+				let c = Date.parse(String(e)), l = Date.parse(String(o));
+				s = !isNaN(c) && !isNaN(l) && String(e).includes("-") && String(o).includes("-") ? c - l : String(e).localeCompare(String(o));
+			}
+			return this._filterMenuSortDirection === "asc" ? s : -s;
+		});
+	}
+	_isFilterActive(e) {
+		return !!this._filterValues[e];
+	}
+	_handleFilterValueChange(e, o, s) {
+		let c = this._filterValues[e];
+		if (c) {
+			let l = new Set(c);
+			s ? l.add(o) : l.delete(o);
+			let u = this._getUniqueValues(e);
+			if (l.size === u.length) {
+				let o = { ...this._filterValues };
+				delete o[e], this._filterValues = o;
+			} else this._filterValues = {
+				...this._filterValues,
+				[e]: l
+			};
+		} else if (!s) {
+			let s = this._getUniqueValues(e);
+			c = new Set(s), c.delete(o), this._filterValues = {
+				...this._filterValues,
+				[e]: c
+			};
+		}
+		this._resetPage();
+	}
+	_handleSelectAll(e, o) {
+		if (o) {
+			let o = { ...this._filterValues };
+			delete o[e], this._filterValues = o;
+		} else this._filterValues = {
+			...this._filterValues,
+			[e]: /* @__PURE__ */ new Set()
+		};
+		this._resetPage();
+	}
+	_handleFilterSearch(e) {
+		this._filterSearchTerm = e.target.value;
+	}
+	_handleResizeStart(e, o) {
+		e.preventDefault(), e.stopPropagation(), this._resizingColumnIndex = o, this._startX = e.pageX;
+		let s = this.shadowRoot?.querySelectorAll(".header-cell"), c = o + (this.enableColumnVisibility ? 1 : 0);
+		s && s[c] ? this._startWidth = s[c].getBoundingClientRect().width : this._startWidth = 150;
+	}
+	_handleResizeMove(e) {
+		if (this._resizingColumnIndex !== null) {
+			let o = e.pageX - this._startX, s = Math.max(50, this._startWidth + o), c = this._visibleColumns[this._resizingColumnIndex], l = this.columns.findIndex((e) => e.key === c.key);
+			if (l !== -1) {
+				let e = [...this.columns];
+				e[l] = {
+					...e[l],
+					width: `${s}px`
+				}, this.columns = e;
+			}
+		}
+	}
+	_handleResizeEnd() {
+		this._resizingColumnIndex = null;
+	}
+	get _filteredData() {
+		if (!this.enableFilter) return this.data;
+		let e = this.data, o = Object.keys(this._filterValues);
+		return o.length > 0 && (e = e.filter((e) => o.every((o) => {
+			let s = this._filterValues[o];
+			return !s || s.size === 0 ? !1 : s ? s.has(e[o]) : !0;
+		}))), e;
+	}
+	get _sortedData() {
+		let e = this._filteredData;
+		return this._sortKey ? [...e].sort((e, o) => {
+			let s = e[this._sortKey], c = o[this._sortKey];
+			if (s === c) return 0;
+			if (s == null) return 1;
+			if (c == null) return -1;
+			let l = 0;
+			return l = typeof s == "string" && typeof c == "string" ? s.localeCompare(c) : typeof s == "number" && typeof c == "number" ? s - c : String(s).localeCompare(String(c)), this._sortDirection === "asc" ? l : -l;
+		}) : e;
+	}
+	get _paginatedData() {
+		let e = (this._currentPage - 1) * this.itemsPerPage, o = e + this.itemsPerPage;
+		return this._sortedData.slice(e, o);
+	}
+	_handleCellClick(e, o) {
+		let s = e.id;
+		this._selectedRowId === s && this._selectedColumnKey === o ? (this._selectedRowId = null, this._selectedColumnKey = null) : (this._selectedRowId = s, this._selectedColumnKey = o);
+	}
+	_handleDragStart(e, o) {
+		if (this._resizingColumnIndex !== null) {
+			e.preventDefault();
+			return;
+		}
+		if (!this.columnReordering) {
+			e.preventDefault();
+			return;
+		}
+		if (this._draggedColumnIndex = o, e.dataTransfer) {
+			e.dataTransfer.effectAllowed = "move", e.dataTransfer.setData("text/plain", o.toString());
+			let s = e.target;
+			e.dataTransfer.setDragImage(s, e.offsetX, e.offsetY);
+		}
+	}
+	_handleDragOver(e, o) {
+		this.columnReordering && (e.preventDefault(), e.dataTransfer && (e.dataTransfer.dropEffect = "move"), this._draggedColumnIndex !== null && this._draggedColumnIndex !== o && (this._dragOverColumnIndex = o));
+	}
+	_handleDragLeave() {
+		this.columnReordering && (this._dragOverColumnIndex = null);
+	}
+	_handleDrop(e, o) {
+		if (this.columnReordering) {
+			if (e.preventDefault(), e.dataTransfer) {
+				let s = parseInt(e.dataTransfer.getData("text/plain"), 10);
+				if (this._draggedColumnIndex !== null && s !== o) {
+					let e = [...this._visibleColumns], [c] = e.splice(s, 1);
+					e.splice(o, 0, c);
+					let l = [], u = 0;
+					for (let o of this.columns) this._hiddenColumns.has(o.key) ? l.push(o) : l.push(e[u++]);
+					this.columns = l;
+				}
+			}
+			this._draggedColumnIndex = null, this._dragOverColumnIndex = null;
+		}
+	}
+	_handleDragEnd() {
+		this.columnReordering && (this._draggedColumnIndex = null, this._dragOverColumnIndex = null);
+	}
+	_formatLink(e, o) {
+		return e.replace(/{(\w+)}/g, (e, s) => o[s] === void 0 ? e : String(o[s]));
+	}
+	_renderCell(e, o) {
+		let s = e[o.key];
+		return o.linkTemplate ? html`<a href="${this._formatLink(o.linkTemplate, e)}">${s}</a>` : s;
+	}
+	_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, o) {
+		if (this._activeFilterColumn !== e) return null;
+		let s = this._getUniqueValues(e).filter((e) => String(e).toLowerCase().includes(this._filterSearchTerm.toLowerCase())), l = this._filterValues[e], u = !l, d = u || !!l && s.every((e) => l.has(e));
+		return html`
+        <div class="${o > 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=${d}
+                        @change=${(o) => this._handleSelectAll(e, o.target.checked)}
+                    />
+                    (Select All)
+                </label>
+                ${s.map((o) => html`
+                    <label>
+                        <input 
+                            type="checkbox" 
+                            .checked=${u || !!l && l.has(o)}
+                            @change=${(s) => this._handleFilterValueChange(e, o, s.target.checked)}
+                        />
+                        ${String(o)}
+                    </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, o) => {
+			let s = {
+				"grid-cell": !0,
+				"header-cell": !0,
+				"drag-over": this._dragOverColumnIndex === o,
+				reorderable: this.columnReordering,
+				"align-center": e.align === "center",
+				"align-right": e.align === "right"
+			};
+			return html`
+            <div
+              .draggable=${this.columnReordering}
+              class=${classMap(s)}
+              @click=${() => this._handleHeaderClick(e.key)}
+              @dragstart=${(e) => this._handleDragStart(e, o)}
+              @dragover=${(e) => this._handleDragOver(e, o)}
+              @dragleave=${this._handleDragLeave}
+              @drop=${(e) => this._handleDrop(e, o)}
+              @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=${(o) => this._toggleFilterMenu(o, 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, o)}
+              <div class="resize-handle" @mousedown=${(e) => this._handleResizeStart(e, o)} @click=${(e) => e.stopPropagation()}></div>
+            </div>
+          `;
+		})}
+        </div>
+      </div>
+    `;
+	}
+	_renderBody(e) {
+		return html`
+      <div class="grid-body">
+        ${repeat(this._paginatedData, (e) => e.id, (o) => html`
+            <div class="grid-row ${this.rowClass ? this.rowClass(o) : ""}" style=${styleMap(e)}>
+              ${when(this.enableColumnVisibility, () => html`<div class="grid-cell data-cell"></div>`)}
+              ${this._visibleColumns.map((e) => {
+			let s = {
+				"grid-cell": !0,
+				"data-cell": !0,
+				selected: this._selectedRowId === o.id && this._selectedColumnKey === e.key,
+				"align-center": e.align === "center",
+				"align-right": e.align === "right",
+				[`col-${e.key}`]: !0
+			};
+			return html`
+                  <div
+                    title="${String(o[e.key] ?? "")}"
+                    class=${classMap(s)}
+                    @click=${() => this._handleCellClick(o, e.key)}
+                  >
+                    ${this._renderCell(o, e)}
+                  </div>
+                `;
+		})}
+            </div>
+          `)}
+      </div>
+    `;
+	}
+	_renderPaginationControls() {
+		let e = this._sortedData.length, o = Math.ceil(e / this.itemsPerPage);
+		return o <= 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 ${o}</span>
+        </div>
+        <div class="pagination-group">
+          <button @click=${() => this._currentPage++} ?disabled=${this._currentPage === o}>Next &gt;</button>
+          <button @click=${() => this._currentPage = o} ?disabled=${this._currentPage === o}>Last &gt;&gt;</button>
+        </div>
+      </div>
+    `;
+	}
+	render() {
+		let e = { height: this.height }, o = { "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(o)}
+          ${this._renderBody(o)}
+        </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 { MyGrid as t };

package/dist/my-grid.js

@@ -0,0 +1,3 @@
+import "./decorate-BnP3GfGh.js";
+import { t as MyGrid } from "./my-grid-DduCSbuo.js";
+export { MyGrid };

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -1,22 +1,25 @@
 {
   "name": "@parksw/sw-ui-components",
   "private": false,
-  "version": "0.0.1",
+  "version": "0.0.3",
   "type": "module",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "files": [
     "dist"
   ],
   "exports": {
     ".": "./dist/index.js",
-    "./my-button.js": "./dist/my-button.js",
-    "./my-calendar.js": "./dist/my-calendar.js",
-    "./my-element.js": "./dist/my-element.js"
+    "./my-button": "./dist/my-button.js",
+    "./my-calendar": "./dist/my-calendar.js",
+    "./my-element": "./dist/my-element.js",
+    "./my-grid": "./dist/my-grid.js",
+    "./style.css": "./dist/style.css"
   },
   "scripts": {
     "dev": "vite",
-    "build": "tsc",
+    "build": "tsc && vite build",
     "preview": "vite preview"
   },
   "dependencies": {

package/dist/index.d.ts

@@ -1,3 +0,0 @@
-export * from './my-element.js';
-export * from './my-button.js';
-export * from './my-calendar.js';

package/dist/my-button.d.ts

@@ -1,8 +0,0 @@
-import { LitElement } from 'lit';
-export declare class MyButton extends LitElement {
-    label: string;
-    disabled: boolean;
-    variant: 'primary' | 'secondary';
-    render(): import("lit-html").TemplateResult<1>;
-    static styles: import("lit").CSSResult;
-}

package/dist/my-calendar.d.ts

@@ -1,12 +0,0 @@
-import { LitElement } from 'lit';
-export declare class MyCalendar extends LitElement {
-    private date;
-    private get year();
-    private get month();
-    private _changeMonth;
-    private _renderHeader;
-    private _renderDaysOfWeek;
-    private _renderDates;
-    render(): import("lit-html").TemplateResult<1>;
-    static styles: import("lit").CSSResult;
-}

package/dist/my-element.d.ts

@@ -1,6 +0,0 @@
-import { LitElement } from 'lit';
-export declare class MyElement extends LitElement {
-    name: string;
-    render(): import("lit-html").TemplateResult<1>;
-    static styles: import("lit").CSSResult;
-}