@prioticket/design-system-web 1.3.1 → 1.3.2

package/COMPONENT-DOCUMENTATION.md

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

package/component-documentation.json

@@ -1,11 +1,11 @@
 {
   "package": {
     "name": "@prioticket/design-system-web",
-    "version": "1.3.1",
+    "version": "1.3.2",
     "description": "",
     "installation": "npm install @prioticket/design-system-web"
   },
-  "generatedAt": "2025-12-05T13:17:53.148Z",
+  "generatedAt": "2025-12-15T12:09:38.959Z",
   "components": {
     "pd-box": {
       "tagName": "pd-box",

package/custom-elements.json

@@ -6565,7 +6565,7 @@
                 {
                   "name": "e",
                   "type": {
-                    "text": "Event"
+                    "text": "CustomEvent<{ value: string }>"
                   }
                 }
               ]

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

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("lit"),l=require("lit/decorators.js"),u=require("lit/directives/repeat.js"),g=require("lit/directives/class-map.js");require("./pd-icon.cjs.js");require("./pd-checkbox.cjs.js");require("./pd-text-field.cjs.js");require("./pd-icon-button.cjs.js");require("./pd-select.cjs.js");require("./pd-menu-item.cjs.js");var b=Object.defineProperty,m=Object.getOwnPropertyDescriptor,d=(p,e,t,a)=>{for(var r=a>1?void 0:a?m(e,t):e,n=p.length-1,i;n>=0;n--)(i=p[n])&&(r=(a?i(e,t,r):i(r))||r);return a&&r&&b(e,t,r),r};exports.PdTable=class extends o.LitElement{constructor(){super(...arguments),this.columns=[],this.data=[],this.rowKey=(e,t)=>{const a=e.id;return a!=null?String(a):`__idx_${t}`},this.selectable=!1,this.sortable=!1,this.pagination=!1,this.pageSize=10,this.pageIndex=0,this.totalItems=0,this.draggableRows=!1,this.draggableColumns=!1,this.loading=!1,this.clearSelectionOnDataChange=!1,this.currencyCode="EUR",this.pageSizeOptions=[5,10,25,50,100],this._sortColumn=null,this._sortDirection="asc",this._selectedRowKeys=new Set,this._draggedRowIndex=null,this._dragOverRowIndex=null,this._isDragHandleGrabbed=!1,this._draggedColumnIndex=null,this._dragOverColumnIndex=null,this._displayDataCache=[],this._displayDataCacheKey="",this._uniqueId=Math.random().toString(36).substring(2,9)}get _isServerSidePagination(){return this.totalItems>0}get _totalCount(){return this._isServerSidePagination?this.totalItems:this.data.length}get _totalPages(){return Math.ceil(this._totalCount/this.pageSize)}get _displayData(){const e=this._computeCacheKey();if(e===this._displayDataCacheKey)return this._displayDataCache;let t=[...this.data];if(this.sortable&&this._sortColumn&&(t=this._sortData(t)),this.pagination&&!this._isServerSidePagination&&this.data.length>this.pageSize){const a=this.pageIndex*this.pageSize,r=a+this.pageSize;t=t.slice(a,r)}return this._displayDataCacheKey=e,this._displayDataCache=t,t}willUpdate(e){super.willUpdate(e),e.has("data")&&this.clearSelectionOnDataChange&&(this._selectedRowKeys=new Set),(e.has("data")||e.has("pageSize"))&&this.pageIndex>=this._totalPages&&this._totalPages>0&&(this.pageIndex=this._totalPages-1)}_computeCacheKey(){let e="empty";if(this.data.length>0){const t=this.rowKey(this.data[0],0),a=this.rowKey(this.data[this.data.length-1],this.data.length-1),r=this.data.length>2?this.rowKey(this.data[Math.floor(this.data.length/2)],Math.floor(this.data.length/2)):"";e=`${this.data.length}-${t}-${r}-${a}`}return`${e}|${this._sortColumn}|${this._sortDirection}|${this.pageIndex}|${this.pageSize}|${this.totalItems}`}_sortData(e){const t=this._sortColumn,a=this._sortDirection;return[...e].sort((r,n)=>{const i=r[t],s=n[t];if(i==null&&s==null)return 0;if(i==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 h=String(i).toLowerCase(),c=String(s).toLowerCase();return h<c?a==="asc"?-1:1:h>c?a==="asc"?1:-1:0})}_getRowKey(e,t){return this.rowKey(e,t)}_getActualDataIndex(e){return this.data.indexOf(e)}_isColumnSortable(e){return e.sortable!==void 0?e.sortable:this.sortable}_getColumnAlignment(e){return e.align?e.align:e.type==="number"||e.type==="currency"?"right":e.type==="boolean"?"center":"left"}_getColspan(){return this.columns.length+(this.selectable?1:0)+(this.draggableRows?1:0)}_handleSort(e){if(!this._isColumnSortable(e))return;const t=this._sortColumn===e.id&&this._sortDirection==="asc"?"desc":"asc";this._sortColumn=e.id,this._sortDirection=t,this.dispatchEvent(new CustomEvent("pd-table-sort",{detail:{columnId:e.id,direction:t},bubbles:!0,composed:!0}))}_handleHeaderKeyDown(e,t){(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this._handleSort(t))}_handleSelectAll(e){const t=e.target,a=new Set;t.checked&&this.data.forEach((r,n)=>{a.add(this._getRowKey(r,n))}),this._selectedRowKeys=a,this._emitSelectionChange()}_handleSelectRow(e,t,a){const r=this._getRowKey(e,t),n=new Set(this._selectedRowKeys);a?n.add(r):n.delete(r),this._selectedRowKeys=n,this._emitSelectionChange()}_emitSelectionChange(){const e=this.data.filter((t,a)=>this._selectedRowKeys.has(this._getRowKey(t,a)));this.dispatchEvent(new CustomEvent("pd-table-selection-change",{detail:{selectedKeys:Array.from(this._selectedRowKeys),selectedRows:e},bubbles:!0,composed:!0}))}_handleRowClick(e,t){this.dispatchEvent(new CustomEvent("pd-table-row-click",{detail:{row:e,index:t},bubbles:!0,composed:!0}))}_handleCellChange(e,t,a,r){const n=r.target,i=e[a.id];let s=n.value;if(a.type==="number"||a.type==="currency"){const h=parseFloat(n.value);s=isNaN(h)?null:h}this.dispatchEvent(new CustomEvent("pd-table-cell-change",{detail:{row:e,rowIndex:t,columnId:a.id,value:s,previousValue:i},bubbles:!0,composed:!0}))}_onDragStart(e,t){if(!this.draggableRows||!this._isDragHandleGrabbed){e.preventDefault();return}this._draggedRowIndex=t,e.dataTransfer&&(e.dataTransfer.effectAllowed="move",e.dataTransfer.setData("text/plain",String(t))),requestAnimationFrame(()=>{e.target.classList.add("dragging")})}_onDragOver(e,t){!this.draggableRows||this._draggedRowIndex===null||(e.preventDefault(),e.dataTransfer&&(e.dataTransfer.dropEffect="move"),this._dragOverRowIndex!==t&&(this._dragOverRowIndex=t))}_onDragEnd(e){this._resetDragState(),e.target.classList.remove("dragging")}_onDrop(e,t){if(e.preventDefault(),!this.draggableRows||this._draggedRowIndex===null)return;const a=this._draggedRowIndex;a!==t&&(this._sortColumn=null,this._sortDirection="asc",this.dispatchEvent(new CustomEvent("pd-table-row-reorder",{detail:{fromIndex:a,toIndex:t,item:this.data[a]},bubbles:!0,composed:!0}))),this._resetDragState()}_resetDragState(){this._draggedRowIndex=null,this._dragOverRowIndex=null,this._isDragHandleGrabbed=!1}_handleDragHandleMouseDown(){this._isDragHandleGrabbed=!0}_handleDragHandleMouseUp(){this._isDragHandleGrabbed=!1}_handleDragHandleKeyDown(e,t){e.key==="ArrowUp"&&t>0?(e.preventDefault(),this._emitReorder(t,t-1)):e.key==="ArrowDown"&&t<this.data.length-1&&(e.preventDefault(),this._emitReorder(t,t+1))}_emitReorder(e,t){this._sortColumn=null,this._sortDirection="asc",this.dispatchEvent(new CustomEvent("pd-table-row-reorder",{detail:{fromIndex:e,toIndex:t,item:this.data[e]},bubbles:!0,composed:!0}))}_onColumnDragStart(e,t){if(!this.draggableColumns){e.preventDefault();return}this._draggedColumnIndex=t,e.dataTransfer&&(e.dataTransfer.effectAllowed="move",e.dataTransfer.setData("text/plain",`column:${t}`)),requestAnimationFrame(()=>{e.target.classList.add("column-dragging")})}_onColumnDragOver(e,t){!this.draggableColumns||this._draggedColumnIndex===null||(e.preventDefault(),e.dataTransfer&&(e.dataTransfer.dropEffect="move"),this._dragOverColumnIndex!==t&&(this._dragOverColumnIndex=t))}_onColumnDragEnd(e){this._resetColumnDragState(),e.target.classList.remove("column-dragging")}_onColumnDrop(e,t){if(e.preventDefault(),!this.draggableColumns||this._draggedColumnIndex===null)return;const a=this._draggedColumnIndex;a!==t&&this.dispatchEvent(new CustomEvent("pd-table-column-reorder",{detail:{fromIndex:a,toIndex:t,column:this.columns[a]},bubbles:!0,composed:!0})),this._resetColumnDragState()}_resetColumnDragState(){this._draggedColumnIndex=null,this._dragOverColumnIndex=null}_handleColumnHeaderKeyDown(e,t){this.draggableColumns&&(e.key==="ArrowLeft"&&t>0?(e.preventDefault(),this._emitColumnReorder(t,t-1)):e.key==="ArrowRight"&&t<this.columns.length-1&&(e.preventDefault(),this._emitColumnReorder(t,t+1)))}_emitColumnReorder(e,t){this.dispatchEvent(new CustomEvent("pd-table-column-reorder",{detail:{fromIndex:e,toIndex:t,column:this.columns[e]},bubbles:!0,composed:!0}))}_handlePageChange(e){e<0||e>=this._totalPages||(this.pageIndex=e,this.dispatchEvent(new CustomEvent("pd-table-page-change",{detail:{pageIndex:e,pageSize:this.pageSize},bubbles:!0,composed:!0})))}_handlePageSizeChange(e){const t=e.target,a=parseInt(t.value,10);this.pageSize=a,this.pageIndex=0,this.dispatchEvent(new CustomEvent("pd-table-page-change",{detail:{pageIndex:0,pageSize:a},bubbles:!0,composed:!0}))}_renderHeader(){const e=this.data.length>0&&this._selectedRowKeys.size===this.data.length,t=this._selectedRowKeys.size>0&&this._selectedRowKeys.size<this.data.length;return o.html`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("lit"),l=require("lit/decorators.js"),u=require("lit/directives/repeat.js"),g=require("lit/directives/class-map.js");require("./pd-icon.cjs.js");require("./pd-checkbox.cjs.js");require("./pd-text-field.cjs.js");require("./pd-icon-button.cjs.js");require("./pd-select.cjs.js");require("./pd-menu-item.cjs.js");var b=Object.defineProperty,m=Object.getOwnPropertyDescriptor,d=(p,e,t,a)=>{for(var r=a>1?void 0:a?m(e,t):e,n=p.length-1,i;n>=0;n--)(i=p[n])&&(r=(a?i(e,t,r):i(r))||r);return a&&r&&b(e,t,r),r};exports.PdTable=class extends o.LitElement{constructor(){super(...arguments),this.columns=[],this.data=[],this.rowKey=(e,t)=>{const a=e.id;return a!=null?String(a):`__idx_${t}`},this.selectable=!1,this.sortable=!1,this.pagination=!1,this.pageSize=10,this.pageIndex=0,this.totalItems=0,this.draggableRows=!1,this.draggableColumns=!1,this.loading=!1,this.clearSelectionOnDataChange=!1,this.currencyCode="EUR",this.pageSizeOptions=[5,10,25,50,100],this._sortColumn=null,this._sortDirection="asc",this._selectedRowKeys=new Set,this._draggedRowIndex=null,this._dragOverRowIndex=null,this._isDragHandleGrabbed=!1,this._draggedColumnIndex=null,this._dragOverColumnIndex=null,this._displayDataCache=[],this._displayDataCacheKey="",this._uniqueId=Math.random().toString(36).substring(2,9)}get _isServerSidePagination(){return this.totalItems>0}get _totalCount(){return this._isServerSidePagination?this.totalItems:this.data.length}get _totalPages(){return Math.ceil(this._totalCount/this.pageSize)}get _displayData(){const e=this._computeCacheKey();if(e===this._displayDataCacheKey)return this._displayDataCache;let t=[...this.data];if(this.sortable&&this._sortColumn&&(t=this._sortData(t)),this.pagination&&!this._isServerSidePagination&&this.data.length>this.pageSize){const a=this.pageIndex*this.pageSize,r=a+this.pageSize;t=t.slice(a,r)}return this._displayDataCacheKey=e,this._displayDataCache=t,t}willUpdate(e){super.willUpdate(e),e.has("data")&&this.clearSelectionOnDataChange&&(this._selectedRowKeys=new Set),(e.has("data")||e.has("pageSize"))&&this.pageIndex>=this._totalPages&&this._totalPages>0&&(this.pageIndex=this._totalPages-1)}_computeCacheKey(){let e="empty";if(this.data.length>0){const t=this.rowKey(this.data[0],0),a=this.rowKey(this.data[this.data.length-1],this.data.length-1),r=this.data.length>2?this.rowKey(this.data[Math.floor(this.data.length/2)],Math.floor(this.data.length/2)):"";e=`${this.data.length}-${t}-${r}-${a}`}return`${e}|${this._sortColumn}|${this._sortDirection}|${this.pageIndex}|${this.pageSize}|${this.totalItems}`}_sortData(e){const t=this._sortColumn,a=this._sortDirection;return[...e].sort((r,n)=>{const i=r[t],s=n[t];if(i==null&&s==null)return 0;if(i==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 h=String(i).toLowerCase(),c=String(s).toLowerCase();return h<c?a==="asc"?-1:1:h>c?a==="asc"?1:-1:0})}_getRowKey(e,t){return this.rowKey(e,t)}_getActualDataIndex(e){return this.data.indexOf(e)}_isColumnSortable(e){return e.sortable!==void 0?e.sortable:this.sortable}_getColumnAlignment(e){return e.align?e.align:e.type==="number"||e.type==="currency"?"right":e.type==="boolean"?"center":"left"}_getColspan(){return this.columns.length+(this.selectable?1:0)+(this.draggableRows?1:0)}_handleSort(e){if(!this._isColumnSortable(e))return;const t=this._sortColumn===e.id&&this._sortDirection==="asc"?"desc":"asc";this._sortColumn=e.id,this._sortDirection=t,this.dispatchEvent(new CustomEvent("pd-table-sort",{detail:{columnId:e.id,direction:t},bubbles:!0,composed:!0}))}_handleHeaderKeyDown(e,t){(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this._handleSort(t))}_handleSelectAll(e){const t=e.target,a=new Set;t.checked&&this.data.forEach((r,n)=>{a.add(this._getRowKey(r,n))}),this._selectedRowKeys=a,this._emitSelectionChange()}_handleSelectRow(e,t,a){const r=this._getRowKey(e,t),n=new Set(this._selectedRowKeys);a?n.add(r):n.delete(r),this._selectedRowKeys=n,this._emitSelectionChange()}_emitSelectionChange(){const e=this.data.filter((t,a)=>this._selectedRowKeys.has(this._getRowKey(t,a)));this.dispatchEvent(new CustomEvent("pd-table-selection-change",{detail:{selectedKeys:Array.from(this._selectedRowKeys),selectedRows:e},bubbles:!0,composed:!0}))}_handleRowClick(e,t){this.dispatchEvent(new CustomEvent("pd-table-row-click",{detail:{row:e,index:t},bubbles:!0,composed:!0}))}_handleCellChange(e,t,a,r){const n=r.target,i=e[a.id];let s=n.value;if(a.type==="number"||a.type==="currency"){const h=parseFloat(n.value);s=isNaN(h)?null:h}this.dispatchEvent(new CustomEvent("pd-table-cell-change",{detail:{row:e,rowIndex:t,columnId:a.id,value:s,previousValue:i},bubbles:!0,composed:!0}))}_onDragStart(e,t){if(!this.draggableRows||!this._isDragHandleGrabbed){e.preventDefault();return}this._draggedRowIndex=t,e.dataTransfer&&(e.dataTransfer.effectAllowed="move",e.dataTransfer.setData("text/plain",String(t))),requestAnimationFrame(()=>{e.target.classList.add("dragging")})}_onDragOver(e,t){!this.draggableRows||this._draggedRowIndex===null||(e.preventDefault(),e.dataTransfer&&(e.dataTransfer.dropEffect="move"),this._dragOverRowIndex!==t&&(this._dragOverRowIndex=t))}_onDragEnd(e){this._resetDragState(),e.target.classList.remove("dragging")}_onDrop(e,t){if(e.preventDefault(),!this.draggableRows||this._draggedRowIndex===null)return;const a=this._draggedRowIndex;a!==t&&(this._sortColumn=null,this._sortDirection="asc",this.dispatchEvent(new CustomEvent("pd-table-row-reorder",{detail:{fromIndex:a,toIndex:t,item:this.data[a]},bubbles:!0,composed:!0}))),this._resetDragState()}_resetDragState(){this._draggedRowIndex=null,this._dragOverRowIndex=null,this._isDragHandleGrabbed=!1}_handleDragHandleMouseDown(){this._isDragHandleGrabbed=!0}_handleDragHandleMouseUp(){this._isDragHandleGrabbed=!1}_handleDragHandleKeyDown(e,t){e.key==="ArrowUp"&&t>0?(e.preventDefault(),this._emitReorder(t,t-1)):e.key==="ArrowDown"&&t<this.data.length-1&&(e.preventDefault(),this._emitReorder(t,t+1))}_emitReorder(e,t){this._sortColumn=null,this._sortDirection="asc",this.dispatchEvent(new CustomEvent("pd-table-row-reorder",{detail:{fromIndex:e,toIndex:t,item:this.data[e]},bubbles:!0,composed:!0}))}_onColumnDragStart(e,t){if(!this.draggableColumns){e.preventDefault();return}this._draggedColumnIndex=t,e.dataTransfer&&(e.dataTransfer.effectAllowed="move",e.dataTransfer.setData("text/plain",`column:${t}`)),requestAnimationFrame(()=>{e.target.classList.add("column-dragging")})}_onColumnDragOver(e,t){!this.draggableColumns||this._draggedColumnIndex===null||(e.preventDefault(),e.dataTransfer&&(e.dataTransfer.dropEffect="move"),this._dragOverColumnIndex!==t&&(this._dragOverColumnIndex=t))}_onColumnDragEnd(e){this._resetColumnDragState(),e.target.classList.remove("column-dragging")}_onColumnDrop(e,t){if(e.preventDefault(),!this.draggableColumns||this._draggedColumnIndex===null)return;const a=this._draggedColumnIndex;a!==t&&this.dispatchEvent(new CustomEvent("pd-table-column-reorder",{detail:{fromIndex:a,toIndex:t,column:this.columns[a]},bubbles:!0,composed:!0})),this._resetColumnDragState()}_resetColumnDragState(){this._draggedColumnIndex=null,this._dragOverColumnIndex=null}_handleColumnHeaderKeyDown(e,t){this.draggableColumns&&(e.key==="ArrowLeft"&&t>0?(e.preventDefault(),this._emitColumnReorder(t,t-1)):e.key==="ArrowRight"&&t<this.columns.length-1&&(e.preventDefault(),this._emitColumnReorder(t,t+1)))}_emitColumnReorder(e,t){this.dispatchEvent(new CustomEvent("pd-table-column-reorder",{detail:{fromIndex:e,toIndex:t,column:this.columns[e]},bubbles:!0,composed:!0}))}_handlePageChange(e){e<0||e>=this._totalPages||(this.pageIndex=e,this.dispatchEvent(new CustomEvent("pd-table-page-change",{detail:{pageIndex:e,pageSize:this.pageSize},bubbles:!0,composed:!0})))}_handlePageSizeChange(e){const t=parseInt(e.detail.value,10);this.pageSize=t,this.pageIndex=0,this.dispatchEvent(new CustomEvent("pd-table-page-change",{detail:{pageIndex:0,pageSize:t},bubbles:!0,composed:!0}))}_renderHeader(){const e=this.data.length>0&&this._selectedRowKeys.size===this.data.length,t=this._selectedRowKeys.size>0&&this._selectedRowKeys.size<this.data.length;return o.html`
       <thead>
         <tr role="row">
           ${this.draggableRows?o.html`
@@ -180,12 +180,9 @@
           <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}
-          >
-            ${this.pageSizeOptions.map(i=>o.html`
-              <pd-menu-item value=${String(i)}>${i}</pd-menu-item>
-            `)}
-          </pd-select>
+          ></pd-select>
         </div>
       </nav>
     `}render(){const e=this._displayData,t=e.length===0&&!this.loading;return o.html`

package/dist/components/pd-table.es.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, n = e.length - 1, s; n >= 0; n--)
-    (s = e[n]) && (o = (r ? s(t, a, o) : s(o)) || o);
+  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);
   return r && o && v(t, a, o), o;
 };
-let i = class extends y {
+let n = class extends y {
   constructor() {
     super(...arguments), this.columns = [], this.data = [], this.rowKey = (e, t) => {
       const a = e.id;
@@ -70,15 +70,15 @@ let i = class extends y {
   _sortData(e) {
     const t = this._sortColumn, a = this._sortDirection;
     return [...e].sort((r, o) => {
-      const n = r[t], s = o[t];
-      if (n == null && s == null) return 0;
-      if (n == null) return a === "asc" ? 1 : -1;
+      const i = r[t], s = o[t];
+      if (i == null && s == null) return 0;
+      if (i == null) return a === "asc" ? 1 : -1;
       if (s == null) return a === "asc" ? -1 : 1;
-      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(), g = String(s).toLowerCase();
+      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;
     });
   }
@@ -153,7 +153,7 @@ let i = class extends y {
     }));
   }
   _handleCellChange(e, t, a, r) {
-    const o = r.target, n = e[a.id];
+    const o = r.target, i = e[a.id];
     let s = o.value;
     if (a.type === "number" || a.type === "currency") {
       const p = parseFloat(o.value);
@@ -165,7 +165,7 @@ let i = class extends y {
         rowIndex: t,
         columnId: a.id,
         value: s,
-        previousValue: n
+        previousValue: i
       },
       bubbles: !0,
       composed: !0
@@ -284,9 +284,9 @@ let i = class extends y {
     })));
   }
   _handlePageSizeChange(e) {
-    const t = e.target, a = parseInt(t.value, 10);
-    this.pageSize = a, this.pageIndex = 0, this.dispatchEvent(new CustomEvent("pd-table-page-change", {
-      detail: { pageIndex: 0, pageSize: a },
+    const t = parseInt(e.detail.value, 10);
+    this.pageSize = t, this.pageIndex = 0, this.dispatchEvent(new CustomEvent("pd-table-page-change", {
+      detail: { pageIndex: 0, pageSize: t },
       bubbles: !0,
       composed: !0
     }));
@@ -322,7 +322,7 @@ let i = class extends y {
     `;
   }
   _renderHeaderCell(e, t) {
-    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";
+    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";
     return d`
       <th
         role="columnheader"
@@ -331,7 +331,7 @@ let i = class extends y {
       sorted: o,
       [`align-${r}`]: !0,
       "column-draggable": this.draggableColumns,
-      "column-dragging": n,
+      "column-dragging": i,
       "column-drag-over": s
     })}
         style=${e.width ? `width: ${e.width};` : ""}${e.minWidth ? ` min-width: ${e.minWidth};` : ""}
@@ -405,8 +405,8 @@ let i = class extends y {
         type=${o}
         .value=${r != null ? String(r) : ""}
         aria-label="${a.header}"
-        @change=${(n) => this._handleCellChange(e, t, a, n)}
-        @click=${(n) => n.stopPropagation()}
+        @change=${(i) => this._handleCellChange(e, t, a, i)}
+        @click=${(i) => i.stopPropagation()}
         style="width: 100%;"
       ></pd-text-field>
     `;
@@ -448,7 +448,7 @@ let i = class extends y {
   // Rendering - Rows
   // ---------------------------------------------------------------------------
   _renderRow(e, t) {
-    const a = this._getRowKey(e, t), r = this._selectedRowKeys.has(a), o = this._draggedRowIndex === t, n = this._dragOverRowIndex === t && !o;
+    const a = this._getRowKey(e, t), r = this._selectedRowKeys.has(a), o = this._draggedRowIndex === t, i = this._dragOverRowIndex === t && !o;
     return d`
       <tr
         role="row"
@@ -456,7 +456,7 @@ let i = class extends y {
       selected: r,
       draggable: this.draggableRows,
       dragging: o,
-      "drag-over": n
+      "drag-over": i
     })}
         aria-selected=${this.selectable ? String(r) : h}
         draggable=${this.draggableRows ? "true" : "false"}
@@ -585,12 +585,12 @@ let i = class extends y {
           <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}
-          >
-            ${this.pageSizeOptions.map((n) => d`
-              <pd-menu-item value=${String(n)}>${n}</pd-menu-item>
-            `)}
-          </pd-select>
+          ></pd-select>
         </div>
       </nav>
     `;
@@ -673,7 +673,7 @@ let i = class extends y {
     this._displayDataCacheKey = "";
   }
 };
-i.styles = b`
+n.styles = b`
     :host {
       display: block;
 
@@ -1026,79 +1026,79 @@ i.styles = b`
   `;
 l([
   c({ type: Array })
-], i.prototype, "columns", 2);
+], n.prototype, "columns", 2);
 l([
   c({ type: Array })
-], i.prototype, "data", 2);
+], n.prototype, "data", 2);
 l([
   c({ attribute: !1 })
-], i.prototype, "rowKey", 2);
+], n.prototype, "rowKey", 2);
 l([
   c({ type: Boolean })
-], i.prototype, "selectable", 2);
+], n.prototype, "selectable", 2);
 l([
   c({ type: Boolean })
-], i.prototype, "sortable", 2);
+], n.prototype, "sortable", 2);
 l([
   c({ type: Boolean })
-], i.prototype, "pagination", 2);
+], n.prototype, "pagination", 2);
 l([
   c({ type: Number })
-], i.prototype, "pageSize", 2);
+], n.prototype, "pageSize", 2);
 l([
   c({ type: Number })
-], i.prototype, "pageIndex", 2);
+], n.prototype, "pageIndex", 2);
 l([
   c({ type: Number })
-], i.prototype, "totalItems", 2);
+], n.prototype, "totalItems", 2);
 l([
   c({ type: Boolean, attribute: "draggable-rows" })
-], i.prototype, "draggableRows", 2);
+], n.prototype, "draggableRows", 2);
 l([
   c({ type: Boolean, attribute: "draggable-columns" })
-], i.prototype, "draggableColumns", 2);
+], n.prototype, "draggableColumns", 2);
 l([
   c({ type: Boolean })
-], i.prototype, "loading", 2);
+], n.prototype, "loading", 2);
 l([
   c({ type: Boolean, attribute: "clear-selection-on-data-change" })
-], i.prototype, "clearSelectionOnDataChange", 2);
+], n.prototype, "clearSelectionOnDataChange", 2);
 l([
   c({ type: String, attribute: "currency-code" })
-], i.prototype, "currencyCode", 2);
+], n.prototype, "currencyCode", 2);
 l([
   c({ type: String })
-], i.prototype, "locale", 2);
+], n.prototype, "locale", 2);
 l([
   c({ type: Array, attribute: "page-size-options" })
-], i.prototype, "pageSizeOptions", 2);
+], n.prototype, "pageSizeOptions", 2);
 l([
   u()
-], i.prototype, "_sortColumn", 2);
+], n.prototype, "_sortColumn", 2);
 l([
   u()
-], i.prototype, "_sortDirection", 2);
+], n.prototype, "_sortDirection", 2);
 l([
   u()
-], i.prototype, "_selectedRowKeys", 2);
+], n.prototype, "_selectedRowKeys", 2);
 l([
   u()
-], i.prototype, "_draggedRowIndex", 2);
+], n.prototype, "_draggedRowIndex", 2);
 l([
   u()
-], i.prototype, "_dragOverRowIndex", 2);
+], n.prototype, "_dragOverRowIndex", 2);
 l([
   u()
-], i.prototype, "_isDragHandleGrabbed", 2);
+], n.prototype, "_isDragHandleGrabbed", 2);
 l([
   u()
-], i.prototype, "_draggedColumnIndex", 2);
+], n.prototype, "_draggedColumnIndex", 2);
 l([
   u()
-], i.prototype, "_dragOverColumnIndex", 2);
-i = l([
+], n.prototype, "_dragOverColumnIndex", 2);
+n = l([
   _("pd-table")
-], i);
+], n);
 export {
-  i as PdTable
+  n as PdTable
 };

package/package.json

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