@prioticket/design-system-web 1.4.6 → 1.4.7

package/COMPONENT-DOCUMENTATION.md

@@ -1,6 +1,6 @@
 # @prioticket/design-system-web Components
 
-Version: 1.4.6
+Version: 1.4.7
 
 ### <pd-box> (PdBox)
 

package/component-documentation.json

@@ -1,11 +1,11 @@
 {
   "package": {
     "name": "@prioticket/design-system-web",
-    "version": "1.4.6",
+    "version": "1.4.7",
     "description": "",
     "installation": "npm install @prioticket/design-system-web"
   },
-  "generatedAt": "2026-01-20T11:45:14.392Z",
+  "generatedAt": "2026-01-20T17:04:45.006Z",
   "components": {
     "pd-box": {
       "tagName": "pd-box",

package/dist/components/pd-table.cjs.js

@@ -142,13 +142,26 @@
         </td>
       </tr>
     `}_renderPagination(){if(!this.pagination)return o.nothing;const e=this._totalCount,t=e===0?0:this.pageIndex*this.pageSize+1,a=Math.min((this.pageIndex+1)*this.pageSize,e),r=this.pageIndex===0,n=this.pageIndex>=this._totalPages-1||e===0;return o.html`
-      <nav class="pagination" aria-label="Table pagination">
-        <div class="pagination-info" aria-live="polite" aria-atomic="true">
-          <span class="pagination-range">${t}–${a}</span>
-          <span class="pagination-total">of ${e}</span>
+      <nav class="pagination">
+        <div class="items-per-page">
+          <label id="page-size-label-${this._uniqueId}">Items per page:</label>
+          <div >
+            <pd-select
+              variant="filled"
+              aria-labelledby="page-size-label-${this._uniqueId}"
+              .value=${this.pageSize.toString()}
+              .options=${this.pageSizeOptions.map(i=>({value:String(i),label:String(i)}))}
+              @change=${this._handlePageSizeChange}
+            ></pd-select>
+          </div>
         </div>
-
-        <div class="pagination-controls" role="group" aria-label="Pagination controls">
+        
+        <div class="pagination-info">
+          <span>${t}–${a}</span>
+          <span>of ${e}</span>
+        </div>
+        
+        <div>
           <pd-icon-button
             icon="first_page"
             aria-label="First page"
@@ -175,15 +188,6 @@
           ></pd-icon-button>
         </div>
 
-        <div class="items-per-page">
-          <label id="page-size-label-${this._uniqueId}">Items per page:</label>
-          <pd-select
-            aria-labelledby="page-size-label-${this._uniqueId}"
-            .value=${this.pageSize.toString()}
-            .options=${this.pageSizeOptions.map(i=>({value:String(i),label:String(i)}))}
-            @change=${this._handlePageSizeChange}
-          ></pd-select>
-        </div>
       </nav>
     `}render(){const e=this._displayData,t=e.length===0&&!this.loading;return o.html`
       <div class="table-wrapper">
@@ -485,10 +489,7 @@
       flex-wrap: wrap;
     }
 
-    .pagination-info {
-      flex: 1;
-      min-width: 100px;
-    }
+    
 
     .pagination-range {
       font-weight: 500;

package/dist/components/pd-table.es.js

@@ -1,4 +1,4 @@
-import { css as b, LitElement as y, nothing as h, html as d } from "lit";
+import { css as b, LitElement as y, nothing as g, html as d } from "lit";
 import { property as c, state as u, customElement as _ } from "lit/decorators.js";
 import { repeat as f } from "lit/directives/repeat.js";
 import { classMap as m } from "lit/directives/class-map.js";
@@ -9,11 +9,11 @@ import "./pd-icon-button.es.js";
 import "./pd-select.es.js";
 import "./pd-menu-item.es.js";
 var v = Object.defineProperty, w = Object.getOwnPropertyDescriptor, l = (e, t, a, r) => {
-  for (var o = r > 1 ? void 0 : r ? w(t, a) : t, i = e.length - 1, s; i >= 0; i--)
-    (s = e[i]) && (o = (r ? s(t, a, o) : s(o)) || o);
+  for (var o = r > 1 ? void 0 : r ? w(t, a) : t, n = e.length - 1, s; n >= 0; n--)
+    (s = e[n]) && (o = (r ? s(t, a, o) : s(o)) || o);
   return r && o && v(t, a, o), o;
 };
-let n = class extends y {
+let i = class extends y {
   constructor() {
     super(...arguments), this.columns = [], this.data = [], this.rowKey = (e, t) => {
       const a = e.id;
@@ -70,16 +70,16 @@ let n = class extends y {
   _sortData(e) {
     const t = this._sortColumn, a = this._sortDirection;
     return [...e].sort((r, o) => {
-      const i = r[t], s = o[t];
-      if (i == null && s == null) return 0;
-      if (i == null) return a === "asc" ? 1 : -1;
+      const n = r[t], s = o[t];
+      if (n == null && s == null) return 0;
+      if (n == null) return a === "asc" ? 1 : -1;
       if (s == null) return a === "asc" ? -1 : 1;
-      if (typeof i == "number" && typeof s == "number")
-        return a === "asc" ? i - s : s - i;
-      if (i instanceof Date && s instanceof Date)
-        return a === "asc" ? i.getTime() - s.getTime() : s.getTime() - i.getTime();
-      const p = String(i).toLowerCase(), g = String(s).toLowerCase();
-      return p < g ? a === "asc" ? -1 : 1 : p > g ? a === "asc" ? 1 : -1 : 0;
+      if (typeof n == "number" && typeof s == "number")
+        return a === "asc" ? n - s : s - n;
+      if (n instanceof Date && s instanceof Date)
+        return a === "asc" ? n.getTime() - s.getTime() : s.getTime() - n.getTime();
+      const p = String(n).toLowerCase(), h = String(s).toLowerCase();
+      return p < h ? a === "asc" ? -1 : 1 : p > h ? a === "asc" ? 1 : -1 : 0;
     });
   }
   _getRowKey(e, t) {
@@ -153,7 +153,7 @@ let n = class extends y {
     }));
   }
   _handleCellChange(e, t, a, r) {
-    const o = r.target, i = e[a.id];
+    const o = r.target, n = e[a.id];
     let s = o.value;
     if (a.type === "number" || a.type === "currency") {
       const p = parseFloat(o.value);
@@ -165,7 +165,7 @@ let n = class extends y {
         rowIndex: t,
         columnId: a.id,
         value: s,
-        previousValue: i
+        previousValue: n
       },
       bubbles: !0,
       composed: !0
@@ -303,7 +303,7 @@ let n = class extends y {
             <th class="drag-handle-header" role="columnheader" aria-label="Reorder">
               <span class="visually-hidden">Reorder</span>
             </th>
-          ` : h}
+          ` : g}
 
           ${this.selectable ? d`
             <th class="checkbox-cell" role="columnheader">
@@ -314,7 +314,7 @@ let n = class extends y {
                 @change=${this._handleSelectAll}
               ></pd-checkbox>
             </th>
-          ` : h}
+          ` : g}
 
           ${this.columns.map((a, r) => this._renderHeaderCell(a, r))}
         </tr>
@@ -322,7 +322,7 @@ let n = class extends y {
     `;
   }
   _renderHeaderCell(e, t) {
-    const a = this._isColumnSortable(e), r = this._getColumnAlignment(e), o = this._sortColumn === e.id, i = this._draggedColumnIndex === t, s = this._dragOverColumnIndex === t && !i, p = o ? this._sortDirection === "asc" ? "ascending" : "descending" : "none";
+    const a = this._isColumnSortable(e), r = this._getColumnAlignment(e), o = this._sortColumn === e.id, n = this._draggedColumnIndex === t, s = this._dragOverColumnIndex === t && !n, p = o ? this._sortDirection === "asc" ? "ascending" : "descending" : "none";
     return d`
       <th
         role="columnheader"
@@ -331,21 +331,21 @@ let n = class extends y {
       sorted: o,
       [`align-${r}`]: !0,
       "column-draggable": this.draggableColumns,
-      "column-dragging": i,
+      "column-dragging": n,
       "column-drag-over": s
     })}
         style=${e.width ? `width: ${e.width};` : ""}${e.minWidth ? ` min-width: ${e.minWidth};` : ""}
-        aria-sort=${a ? p : h}
-        tabindex=${a || this.draggableColumns ? "0" : h}
+        aria-sort=${a ? p : g}
+        tabindex=${a || this.draggableColumns ? "0" : g}
         draggable=${this.draggableColumns ? "true" : "false"}
         @click=${() => this._handleSort(e)}
-        @keydown=${(g) => {
-      this._handleHeaderKeyDown(g, e), this._handleColumnHeaderKeyDown(g, t);
+        @keydown=${(h) => {
+      this._handleHeaderKeyDown(h, e), this._handleColumnHeaderKeyDown(h, t);
     }}
-        @dragstart=${(g) => this._onColumnDragStart(g, t)}
-        @dragover=${(g) => this._onColumnDragOver(g, t)}
-        @drop=${(g) => this._onColumnDrop(g, t)}
-        @dragend=${(g) => this._onColumnDragEnd(g)}
+        @dragstart=${(h) => this._onColumnDragStart(h, t)}
+        @dragover=${(h) => this._onColumnDragOver(h, t)}
+        @drop=${(h) => this._onColumnDrop(h, t)}
+        @dragend=${(h) => this._onColumnDragEnd(h)}
       >
         <div class=${m({
       "header-content": !0,
@@ -358,7 +358,7 @@ let n = class extends y {
               size="small"
               aria-hidden="true"
             ></pd-icon>
-          ` : h}
+          ` : g}
           <span class="header-text">${e.header}</span>
           ${a ? d`
             <pd-icon
@@ -371,7 +371,7 @@ let n = class extends y {
               size="small"
               aria-hidden="true"
             ></pd-icon>
-          ` : h}
+          ` : g}
         </div>
       </th>
     `;
@@ -405,8 +405,8 @@ let n = class extends y {
         type=${o}
         .value=${r != null ? String(r) : ""}
         aria-label="${a.header}"
-        @change=${(i) => this._handleCellChange(e, t, a, i)}
-        @click=${(i) => i.stopPropagation()}
+        @change=${(n) => this._handleCellChange(e, t, a, n)}
+        @click=${(n) => n.stopPropagation()}
         style="width: 100%;"
       ></pd-text-field>
     `;
@@ -448,7 +448,7 @@ let n = class extends y {
   // Rendering - Rows
   // ---------------------------------------------------------------------------
   _renderRow(e, t) {
-    const a = this._getRowKey(e, t), r = this._selectedRowKeys.has(a), o = this._draggedRowIndex === t, i = this._dragOverRowIndex === t && !o;
+    const a = this._getRowKey(e, t), r = this._selectedRowKeys.has(a), o = this._draggedRowIndex === t, n = this._dragOverRowIndex === t && !o;
     return d`
       <tr
         role="row"
@@ -456,9 +456,9 @@ let n = class extends y {
       selected: r,
       draggable: this.draggableRows,
       dragging: o,
-      "drag-over": i
+      "drag-over": n
     })}
-        aria-selected=${this.selectable ? String(r) : h}
+        aria-selected=${this.selectable ? String(r) : g}
         draggable=${this.draggableRows ? "true" : "false"}
         @dragstart=${(s) => this._onDragStart(s, t)}
         @dragover=${(s) => this._onDragOver(s, t)}
@@ -480,7 +480,7 @@ let n = class extends y {
               @keydown=${(s) => this._handleDragHandleKeyDown(s, t)}
             ></pd-icon>
           </td>
-        ` : h}
+        ` : g}
 
         ${this.selectable ? d`
           <td class="checkbox-cell" role="cell">
@@ -494,7 +494,7 @@ let n = class extends y {
               @click=${(s) => s.stopPropagation()}
             ></pd-checkbox>
           </td>
-        ` : h}
+        ` : g}
 
         ${this.columns.map((s) => d`
           <td
@@ -544,16 +544,32 @@ let n = class extends y {
   // Rendering - Pagination
   // ---------------------------------------------------------------------------
   _renderPagination() {
-    if (!this.pagination) return h;
+    if (!this.pagination) return g;
     const e = this._totalCount, t = e === 0 ? 0 : this.pageIndex * this.pageSize + 1, a = Math.min((this.pageIndex + 1) * this.pageSize, e), r = this.pageIndex === 0, o = this.pageIndex >= this._totalPages - 1 || e === 0;
     return d`
-      <nav class="pagination" aria-label="Table pagination">
-        <div class="pagination-info" aria-live="polite" aria-atomic="true">
-          <span class="pagination-range">${t}–${a}</span>
-          <span class="pagination-total">of ${e}</span>
+      <nav class="pagination">
+        <div class="items-per-page">
+          <label id="page-size-label-${this._uniqueId}">Items per page:</label>
+          <div >
+            <pd-select
+              variant="filled"
+              aria-labelledby="page-size-label-${this._uniqueId}"
+              .value=${this.pageSize.toString()}
+              .options=${this.pageSizeOptions.map((n) => ({
+      value: String(n),
+      label: String(n)
+    }))}
+              @change=${this._handlePageSizeChange}
+            ></pd-select>
+          </div>
         </div>
-
-        <div class="pagination-controls" role="group" aria-label="Pagination controls">
+        
+        <div class="pagination-info">
+          <span>${t}–${a}</span>
+          <span>of ${e}</span>
+        </div>
+        
+        <div>
           <pd-icon-button
             icon="first_page"
             aria-label="First page"
@@ -580,18 +596,6 @@ let n = class extends y {
           ></pd-icon-button>
         </div>
 
-        <div class="items-per-page">
-          <label id="page-size-label-${this._uniqueId}">Items per page:</label>
-          <pd-select
-            aria-labelledby="page-size-label-${this._uniqueId}"
-            .value=${this.pageSize.toString()}
-            .options=${this.pageSizeOptions.map((i) => ({
-      value: String(i),
-      label: String(i)
-    }))}
-            @change=${this._handlePageSizeChange}
-          ></pd-select>
-        </div>
       </nav>
     `;
   }
@@ -610,9 +614,9 @@ let n = class extends y {
           >
             ${this._renderHeader()}
             <tbody>
-              ${this.loading ? this._renderLoadingState() : h}
-              ${t ? this._renderEmptyState() : h}
-              ${this.loading ? h : f(
+              ${this.loading ? this._renderLoadingState() : g}
+              ${t ? this._renderEmptyState() : g}
+              ${this.loading ? g : f(
       e,
       (a) => {
         const r = this._getActualDataIndex(a);
@@ -673,7 +677,7 @@ let n = class extends y {
     this._displayDataCacheKey = "";
   }
 };
-n.styles = b`
+i.styles = b`
     :host {
       display: block;
 
@@ -955,10 +959,7 @@ n.styles = b`
       flex-wrap: wrap;
     }
 
-    .pagination-info {
-      flex: 1;
-      min-width: 100px;
-    }
+    
 
     .pagination-range {
       font-weight: 500;
@@ -1026,79 +1027,79 @@ n.styles = b`
   `;
 l([
   c({ type: Array })
-], n.prototype, "columns", 2);
+], i.prototype, "columns", 2);
 l([
   c({ type: Array })
-], n.prototype, "data", 2);
+], i.prototype, "data", 2);
 l([
   c({ attribute: !1 })
-], n.prototype, "rowKey", 2);
+], i.prototype, "rowKey", 2);
 l([
   c({ type: Boolean })
-], n.prototype, "selectable", 2);
+], i.prototype, "selectable", 2);
 l([
   c({ type: Boolean })
-], n.prototype, "sortable", 2);
+], i.prototype, "sortable", 2);
 l([
   c({ type: Boolean })
-], n.prototype, "pagination", 2);
+], i.prototype, "pagination", 2);
 l([
   c({ type: Number })
-], n.prototype, "pageSize", 2);
+], i.prototype, "pageSize", 2);
 l([
   c({ type: Number })
-], n.prototype, "pageIndex", 2);
+], i.prototype, "pageIndex", 2);
 l([
   c({ type: Number })
-], n.prototype, "totalItems", 2);
+], i.prototype, "totalItems", 2);
 l([
   c({ type: Boolean, attribute: "draggable-rows" })
-], n.prototype, "draggableRows", 2);
+], i.prototype, "draggableRows", 2);
 l([
   c({ type: Boolean, attribute: "draggable-columns" })
-], n.prototype, "draggableColumns", 2);
+], i.prototype, "draggableColumns", 2);
 l([
   c({ type: Boolean })
-], n.prototype, "loading", 2);
+], i.prototype, "loading", 2);
 l([
   c({ type: Boolean, attribute: "clear-selection-on-data-change" })
-], n.prototype, "clearSelectionOnDataChange", 2);
+], i.prototype, "clearSelectionOnDataChange", 2);
 l([
   c({ type: String, attribute: "currency-code" })
-], n.prototype, "currencyCode", 2);
+], i.prototype, "currencyCode", 2);
 l([
   c({ type: String })
-], n.prototype, "locale", 2);
+], i.prototype, "locale", 2);
 l([
   c({ type: Array, attribute: "page-size-options" })
-], n.prototype, "pageSizeOptions", 2);
+], i.prototype, "pageSizeOptions", 2);
 l([
   u()
-], n.prototype, "_sortColumn", 2);
+], i.prototype, "_sortColumn", 2);
 l([
   u()
-], n.prototype, "_sortDirection", 2);
+], i.prototype, "_sortDirection", 2);
 l([
   u()
-], n.prototype, "_selectedRowKeys", 2);
+], i.prototype, "_selectedRowKeys", 2);
 l([
   u()
-], n.prototype, "_draggedRowIndex", 2);
+], i.prototype, "_draggedRowIndex", 2);
 l([
   u()
-], n.prototype, "_dragOverRowIndex", 2);
+], i.prototype, "_dragOverRowIndex", 2);
 l([
   u()
-], n.prototype, "_isDragHandleGrabbed", 2);
+], i.prototype, "_isDragHandleGrabbed", 2);
 l([
   u()
-], n.prototype, "_draggedColumnIndex", 2);
+], i.prototype, "_draggedColumnIndex", 2);
 l([
   u()
-], n.prototype, "_dragOverColumnIndex", 2);
-n = l([
+], i.prototype, "_dragOverColumnIndex", 2);
+i = l([
   _("pd-table")
-], n);
+], i);
 export {
-  n as PdTable
+  i as PdTable
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prioticket/design-system-web",
-  "version": "1.4.6",
+  "version": "1.4.7",
   "type": "module",
   "packageManager": "yarn@3.6.4",
   "main": "./dist/prioticket-design-system-web.cjs.js",