@sondor-technology/sondor-components 1.0.5 → 1.0.6

package/dist/components/table/data-table.js

@@ -4,85 +4,63 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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, html, css } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { resetStyles } from '../../styles/reset.js';
+import { LitElement, html, css } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { resetStyles } from "../../styles/reset.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 let StDataTable = class StDataTable extends LitElement {
     constructor() {
         super(...arguments);
-        /**
-         * Array defining table headers, keys, and sortability.
-         */
         this.columns = [];
-        /**
-         * Array of row data objects rendered in the table.
-         */
         this.data = [];
-        /**
-         * Total number of rows available on the server (used for pagination).
-         */
         this.totalRows = 0;
-        /**
-         * Current page number (1-indexed).
-         */
         this.page = 1;
-        /**
-         * Number of rows per page.
-         */
         this.pageSize = 10;
-        /**
-         * Enables holding 'Shift' to sort by multiple columns sequentially.
-         */
         this.multiSort = false;
-        /**
-         * Displays loading skeleton rows and locks controls.
-         */
         this.loading = false;
-        // --- Internal State ---
         this.internalColumns = [];
         this.sortState = [];
-        this.searchQuery = '';
+        this.searchQuery = "";
         this.showColumnMenu = false;
         this.draggedColumnKey = null;
         this.handleOutsideClick = (e) => {
-            const target = e.target;
-            if (!target.closest('.columns-toggle-wrapper')) {
+            const path = e.composedPath();
+            const toggleWrapper = this.shadowRoot?.querySelector(".columns-toggle-wrapper");
+            // 🚀 THE FIX: Use composedPath() to pierce the Shadow DOM and check if
+            // the click originated from inside the wrapper element.
+            if (toggleWrapper && !path.includes(toggleWrapper)) {
                 this.showColumnMenu = false;
             }
         };
     }
     willUpdate(changedProperties) {
-        if (changedProperties.has('columns') && this.columns.length > 0) {
-            if (this.internalColumns.length === 0) {
-                this.internalColumns = [...this.columns];
-            }
-        }
-    }
-    firstUpdated() {
-        if (this.internalColumns.length === 0 && this.columns.length > 0) {
-            this.internalColumns = [...this.columns];
+        // 🚀 FIX: Properly sync dynamically updated columns while preserving user visibility states
+        if (changedProperties.has("columns") && this.columns) {
+            this.internalColumns = this.columns.map((newCol) => {
+                const existing = this.internalColumns.find((ic) => ic.key === newCol.key);
+                return { ...newCol, hidden: existing ? existing.hidden : newCol.hidden };
+            });
         }
-        this.emitChange();
     }
     connectedCallback() {
         super.connectedCallback();
-        document.addEventListener('click', this.handleOutsideClick);
+        document.addEventListener("click", this.handleOutsideClick);
     }
     disconnectedCallback() {
-        document.removeEventListener('click', this.handleOutsideClick);
+        document.removeEventListener("click", this.handleOutsideClick);
         super.disconnectedCallback();
     }
     emitChange() {
-        this.dispatchEvent(new CustomEvent('st-data-change', {
+        this.dispatchEvent(new CustomEvent("st-data-change", {
             detail: {
                 page: this.page,
                 pageSize: this.pageSize,
                 search: this.searchQuery,
-                sort: this.sortState
+                sort: this.sortState,
             },
             bubbles: true,
-            composed: true
+            composed: true,
         }));
     }
     handleSearchInput(e) {
@@ -100,10 +78,10 @@ let StDataTable = class StDataTable extends LitElement {
         if (this.loading)
             return;
         const isShift = e.shiftKey && this.multiSort;
-        const existingIndex = this.sortState.findIndex(s => s.key === key);
-        let newDirection = 'asc';
+        const existingIndex = this.sortState.findIndex((s) => s.key === key);
+        let newDirection = "asc";
         if (existingIndex !== -1) {
-            newDirection = this.sortState[existingIndex].direction === 'asc' ? 'desc' : null;
+            newDirection = this.sortState[existingIndex].direction === "asc" ? "desc" : null;
         }
         let newSortState = [...this.sortState];
         if (isShift) {
@@ -147,169 +125,255 @@ let StDataTable = class StDataTable extends LitElement {
         }
     }
     toggleColumnVisibility(key) {
-        this.internalColumns = this.internalColumns.map(col => col.key === key ? { ...col, hidden: !col.hidden } : col);
+        this.internalColumns = this.internalColumns.map((col) => col.key === key ? { ...col, hidden: !col.hidden } : col);
     }
     handleDragStart(e, key) {
         this.draggedColumnKey = key;
         if (e.dataTransfer) {
-            e.dataTransfer.effectAllowed = 'move';
-            e.dataTransfer.setData('text/plain', key);
+            e.dataTransfer.effectAllowed = "move";
+            e.dataTransfer.setData("text/plain", key);
         }
     }
     handleDragOver(e) {
         e.preventDefault();
         if (e.dataTransfer)
-            e.dataTransfer.dropEffect = 'move';
-        const target = e.target.closest('th');
+            e.dataTransfer.dropEffect = "move";
+        const target = e.target.closest("th");
         if (target)
-            target.classList.add('drag-over');
+            target.classList.add("drag-over");
     }
     handleDragLeave(e) {
-        const target = e.target.closest('th');
+        const target = e.target.closest("th");
         if (target)
-            target.classList.remove('drag-over');
+            target.classList.remove("drag-over");
     }
     handleDrop(e, targetKey) {
         e.preventDefault();
-        const targetEl = e.target.closest('th');
+        const targetEl = e.target.closest("th");
         if (targetEl)
-            targetEl.classList.remove('drag-over');
+            targetEl.classList.remove("drag-over");
         if (!this.draggedColumnKey || this.draggedColumnKey === targetKey)
             return;
         const newCols = [...this.internalColumns];
-        const fromIndex = newCols.findIndex(c => c.key === this.draggedColumnKey);
-        const toIndex = newCols.findIndex(c => c.key === targetKey);
+        const fromIndex = newCols.findIndex((c) => c.key === this.draggedColumnKey);
+        const toIndex = newCols.findIndex((c) => c.key === targetKey);
         const [movedCol] = newCols.splice(fromIndex, 1);
         newCols.splice(toIndex, 0, movedCol);
         this.internalColumns = newCols;
         this.draggedColumnKey = null;
     }
     renderSortIcon(key) {
-        const sortIndex = this.sortState.findIndex(s => s.key === key);
+        const sortIndex = this.sortState.findIndex((s) => s.key === key);
         if (sortIndex === -1) {
-            return html `<svg class="sort-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>`;
+            return html `<svg
+        class="sort-icon"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="m7 15 5 5 5-5" />
+        <path d="m7 9 5-5 5 5" />
+      </svg>`;
         }
         const sortConfig = this.sortState[sortIndex];
-        const icon = sortConfig.direction === 'asc'
-            ? html `<svg class="sort-icon active" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>`
-            : html `<svg class="sort-icon active" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>`;
+        const icon = sortConfig.direction === "asc"
+            ? html `<svg
+            class="sort-icon active"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="m18 15-6-6-6 6" />
+          </svg>`
+            : html `<svg
+            class="sort-icon active"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="m6 9 6 6 6-6" />
+          </svg>`;
         const priority = this.sortState.length > 1 && this.multiSort
             ? html `<span class="sort-priority">${sortIndex + 1}</span>`
-            : '';
+            : "";
         return html `${icon}${priority}`;
     }
     render() {
-        const visibleColumns = this.internalColumns.filter(c => !c.hidden);
+        const visibleColumns = this.internalColumns.filter((c) => !c.hidden);
         const skeletonRowsCount = Math.min(this.pageSize, 5);
         return html `
-      <!-- Toolbar -->
       <div class="toolbar">
         <div class="search-wrapper">
-          <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
-          <input 
-            type="text" 
-            class="search-input" 
-            placeholder="Search..." 
+          <svg
+            class="search-icon"
+            aria-hidden="true"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <circle cx="11" cy="11" r="8"></circle>
+            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+          </svg>
+          <input
+            type="text"
+            class="search-input"
+            placeholder="Search..."
+            aria-label="Search data table"
+            spellcheck="false"
+            autocapitalize="none"
             ?disabled=${this.loading}
             @input=${this.handleSearchInput}
-          >
+          />
         </div>
 
         <div class="columns-toggle-wrapper">
-          <st-button 
-            variant="secondary" 
-            size="sm" 
-            @click=${() => this.showColumnMenu = !this.showColumnMenu}
+          <st-button
+            variant="secondary"
+            size="sm"
+            aria-haspopup="menu"
+            aria-expanded=${this.showColumnMenu}
+            @click=${() => (this.showColumnMenu = !this.showColumnMenu)}
           >
             Columns
           </st-button>
-          
-          ${this.showColumnMenu ? html `
-            <div class="columns-menu">
-              ${this.internalColumns.map(col => html `
-                <label class="column-option">
-                  <input 
-                    type="checkbox" 
-                    .checked=${!col.hidden} 
-                    @change=${() => this.toggleColumnVisibility(col.key)}
-                  >
-                  ${col.header}
-                </label>
-              `)}
-            </div>
-          ` : ''}
+
+          ${this.showColumnMenu
+            ? html `
+                <div class="columns-menu" role="menu">
+                  ${this.internalColumns.map((col) => html `
+                      <label
+                        class="column-option"
+                        role="menuitemcheckbox"
+                        aria-checked=${!col.hidden}
+                      >
+                        <input
+                          type="checkbox"
+                          .checked=${!col.hidden}
+                          @change=${() => this.toggleColumnVisibility(col.key)}
+                        />
+                        ${col.header}
+                      </label>
+                    `)}
+                </div>
+              `
+            : ""}
         </div>
       </div>
 
-      <!-- Table -->
       <div class="table-wrapper">
-        <table>
+        <table aria-busy=${this.loading}>
           <thead>
             <tr>
-              ${visibleColumns.map(col => html `
-                <th 
-                  draggable="true"
-                  @dragstart=${(e) => this.handleDragStart(e, col.key)}
-                  @dragover=${this.handleDragOver}
-                  @dragleave=${this.handleDragLeave}
-                  @drop=${(e) => this.handleDrop(e, col.key)}
-                >
-                  <div class="th-content">
-                    <svg class="drag-handle" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="12" r="1"/><circle cx="9" cy="5" r="1"/><circle cx="9" cy="19" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="5" r="1"/><circle cx="15" cy="19" r="1"/></svg>
-                    
-                    <div 
-                      class=${classMap({ 'sortable-header': !!col.sortable })} 
-                      @click=${(e) => col.sortable && this.handleSort(col.key, e)}
-                    >
-                      ${col.header}
-                      ${col.sortable ? this.renderSortIcon(col.key) : ''}
+              ${visibleColumns.map((col) => {
+            const sortItem = this.sortState.find((s) => s.key === col.key);
+            const ariaSort = sortItem
+                ? sortItem.direction === "asc"
+                    ? "ascending"
+                    : "descending"
+                : "none";
+            return html `
+                  <th
+                    scope="col"
+                    aria-sort=${ifDefined(col.sortable ? ariaSort : undefined)}
+                    draggable="true"
+                    @dragstart=${(e) => this.handleDragStart(e, col.key)}
+                    @dragover=${this.handleDragOver}
+                    @dragleave=${this.handleDragLeave}
+                    @drop=${(e) => this.handleDrop(e, col.key)}
+                  >
+                    <div class="th-content">
+                      <svg
+                        class="drag-handle"
+                        aria-hidden="true"
+                        width="12"
+                        height="12"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      >
+                        <circle cx="9" cy="12" r="1" />
+                        <circle cx="9" cy="5" r="1" />
+                        <circle cx="9" cy="19" r="1" />
+                        <circle cx="15" cy="12" r="1" />
+                        <circle cx="15" cy="5" r="1" />
+                        <circle cx="15" cy="19" r="1" />
+                      </svg>
+
+                      <div
+                        class=${classMap({ "sortable-header": !!col.sortable })}
+                        @click=${(e) => col.sortable && this.handleSort(col.key, e)}
+                      >
+                        ${col.header} ${col.sortable ? this.renderSortIcon(col.key) : ""}
+                      </div>
                     </div>
-                  </div>
-                </th>
-              `)}
+                  </th>
+                `;
+        })}
             </tr>
           </thead>
-          <tbody>
-            ${this.loading ? html `
-              ${Array.from({ length: skeletonRowsCount }).map(() => html `
-                <tr>
-                  ${visibleColumns.map(() => html `
-                    <td><st-skeleton variant="text" width="75%"></st-skeleton></td>
-                  `)}
-                </tr>
-              `)}
-            ` : this.data.length === 0 ? html `
-              <tr>
-                <td colspan=${visibleColumns.length} style="text-align: center; padding: 2rem;">No results found.</td>
-              </tr>
-            ` : this.data.map(row => html `
-              <tr>
-                ${visibleColumns.map(col => html `
-                  <td>${row[col.key]}</td>
-                `)}
-              </tr>
-            `)}
+
+          <tbody aria-live="polite">
+            ${this.loading
+            ? html `
+                  ${Array.from({ length: skeletonRowsCount }).map(() => html `
+                      <tr>
+                        ${visibleColumns.map(() => html `
+                            <td><st-skeleton variant="text" width="75%"></st-skeleton></td>
+                          `)}
+                      </tr>
+                    `)}
+                `
+            : this.data.length === 0
+                ? html `
+                    <tr>
+                      <td
+                        colspan=${visibleColumns.length}
+                        style="text-align: center; padding: 2rem;"
+                      >
+                        No results found.
+                      </td>
+                    </tr>
+                  `
+                : this.data.map((row) => html `
+                      <tr>
+                        ${visibleColumns.map((col) => html `<td>${row[col.key] ?? ""}</td>`)}
+                      </tr>
+                    `)}
           </tbody>
         </table>
       </div>
 
-      <!-- Pagination -->
       <div class="pagination">
         <div class="pagination-info">
           Page ${this.page} of ${this.totalPages} (${this.totalRows} total items)
         </div>
         <div class="pagination-controls">
-          <st-button 
-            variant="secondary" 
-            size="sm" 
+          <st-button
+            variant="secondary"
+            size="sm"
             ?disabled=${this.loading || this.page === 1}
             @click=${this.prevPage}
           >
             Prev
           </st-button>
-          <st-button 
-            variant="secondary" 
-            size="sm" 
+          <st-button
+            variant="secondary"
+            size="sm"
             ?disabled=${this.loading || this.page === this.totalPages}
             @click=${this.nextPage}
           >
@@ -510,7 +574,7 @@ StDataTable.styles = [
       .drag-handle:hover {
         opacity: 0.7;
       }
-    `
+    `,
 ];
 __decorate([
     property({ type: Array })
@@ -519,16 +583,16 @@ __decorate([
     property({ type: Array })
 ], StDataTable.prototype, "data", void 0);
 __decorate([
-    property({ type: Number, attribute: 'total-rows' })
+    property({ type: Number, attribute: "total-rows" })
 ], StDataTable.prototype, "totalRows", void 0);
 __decorate([
     property({ type: Number })
 ], StDataTable.prototype, "page", void 0);
 __decorate([
-    property({ type: Number, attribute: 'page-size' })
+    property({ type: Number, attribute: "page-size" })
 ], StDataTable.prototype, "pageSize", void 0);
 __decorate([
-    property({ type: Boolean, attribute: 'multi-sort' })
+    property({ type: Boolean, attribute: "multi-sort" })
 ], StDataTable.prototype, "multiSort", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
@@ -546,6 +610,7 @@ __decorate([
     state()
 ], StDataTable.prototype, "showColumnMenu", void 0);
 StDataTable = __decorate([
-    customElement('st-data-table')
+    customElement("st-data-table")
 ], StDataTable);
 export { StDataTable };
+//# sourceMappingURL=data-table.js.map

package/dist/components/table/data-table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table.js","sourceRoot":"","sources":["../../../src/components/table/data-table.ts"],"names":[],"mappings":"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"}

package/dist/components/table/table.d.ts

@@ -1,5 +1,5 @@
-import { LitElement } from 'lit';
-export type TableMode = 'horizontal' | 'vertical';
+import { LitElement } from "lit";
+export type TableMode = "horizontal" | "vertical";
 export interface TableColumn {
     header: string;
     key: string;
@@ -16,7 +16,7 @@ export declare class StTable extends LitElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'st-table': StTable;
+        "st-table": StTable;
     }
 }
 //# sourceMappingURL=table.d.ts.map

package/dist/components/table/table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/components/table/table.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,MAAM,MAAM,SAAS,GAAG,YAAY,GAAG,UAAU,CAAC;AAElD,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,EAAE,MAAM,CAAC;CACb;AAED,qBACa,OAAQ,SAAQ,UAAU;IACV,OAAO,EAAE,WAAW,EAAE,CAAM;IAC5B,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CAAM;IAEjB,IAAI,EAAE,SAAS,CAAgB;IAC9B,OAAO,UAAS;IAChB,SAAS,UAAS;IAClB,KAAK,UAAS;IAE1D,MAAM,CAAC,MAAM,4BAsGX;IAEF,MAAM,yCAqBL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/components/table/table.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAI1C,MAAM,MAAM,SAAS,GAAG,YAAY,GAAG,UAAU,CAAC;AAElD,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,EAAE,MAAM,CAAC;CACb;AAED,qBACa,OAAQ,SAAQ,UAAU;IACZ,OAAO,EAAE,WAAW,EAAE,CAAM;IAC5B,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CAAM;IAEjB,IAAI,EAAE,SAAS,CAAgB;IAC9B,OAAO,UAAS;IAChB,SAAS,UAAS;IAClB,KAAK,UAAS;IAExD,MAAM,CAAC,MAAM,4BA6GX;IAEF,MAAM,yCAqCL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}