@kodaris/krubble-components 1.0.24 → 1.0.26

package/dist/krubble.bundled.min.js

@@ -1026,6 +1026,7 @@ const He="important",Be=" !"+He,Ue=xe(class extends ke{constructor(e){if(super(e
       :host {
         display: flex;
         flex-direction: column;
+        overflow: hidden;
       }
 
       .header {
@@ -1161,6 +1162,8 @@ const He="important",Be=" !"+He,Ue=xe(class extends ke{constructor(e){if(super(e
 
       :host([active]) {
         display: block;
+        width: 100%;
+        height: 100%;
       }
     `],Fe([pe({type:String,reflect:!0})],We.prototype,"id",void 0),Fe([pe({type:String})],We.prototype,"title",void 0),Fe([pe({type:String})],We.prototype,"badge",void 0),Fe([pe({type:String,attribute:"badge-background"})],We.prototype,"badgeBackground",void 0),Fe([pe({type:String,attribute:"badge-color"})],We.prototype,"badgeColor",void 0),Fe([pe({type:Boolean})],We.prototype,"disabled",void 0),Fe([pe({type:Boolean})],We.prototype,"dismissible",void 0),Fe([pe({type:Boolean,reflect:!0})],We.prototype,"active",void 0),We=Fe([de("kr-tab")],We);var Ke=function(e,t,i,o){var s,r=arguments.length,n=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,o);else for(var a=e.length-1;a>=0;a--)(s=e[a])&&(n=(r<3?s(n):r>3?s(t,i,n):s(t,i))||n);return r>3&&n&&Object.defineProperty(t,i,n),n};const Ze=['"',"+","-","&&","||","!","(",")","{","}","[","]","^","~","*","?",":"],Qe=['\\"',"\\+","\\-","\\&\\&","\\|\\|","\\!","\\(","\\)","\\{","\\}","\\[","\\]","\\^","\\~","\\*","\\?","\\:"];function Xe(e){let t=e;for(let e=0;e<Ze.length;e++)t=t.split(Ze[e]).join(Qe[e]);return t}let Ye=class extends ne{constructor(){super(...arguments),this._scrollStyle="overlay",this._data=[],this._dataState="idle",this._page=1,this._pageSize=50,this._totalItems=0,this._totalPages=0,this._searchQuery="",this._canScrollLeft=!1,this._canScrollRight=!1,this._canScrollHorizontal=!1,this._columnPickerOpen=!1,this._displayedColumns=[],this._resizing=null,this._resizeObserver=null,this._searchPositionLocked=!1,this._def={columns:[]},this.def={columns:[]},this._handleClickOutsideColumnPicker=e=>{if(!this._columnPickerOpen)return;const t=e.composedPath(),i=this.shadowRoot?.querySelector(".column-picker-wrapper");i&&!t.includes(i)&&(this._columnPickerOpen=!1)},this._handleResizeMove=e=>{if(!this._resizing)return;const t=this._def.columns.find(e=>e.id===this._resizing.columnId);if(t){const i=this._resizing.startWidth+(e.clientX-this._resizing.startX);t.width=`${Math.min(900,Math.max(50,i))}px`,this.requestUpdate()}},this._handleResizeEnd=()=>{this._resizing=null,document.removeEventListener("mousemove",this._handleResizeMove),document.removeEventListener("mouseup",this._handleResizeEnd)}}connectedCallback(){super.connectedCallback(),this.classList.toggle("kr-table--scroll-overlay","overlay"===this._scrollStyle),this.classList.toggle("kr-table--scroll-edge","edge"===this._scrollStyle),this._fetch(),this._initRefresh(),document.addEventListener("click",this._handleClickOutsideColumnPicker),this._resizeObserver=new ResizeObserver(()=>{this._searchPositionLocked=!1,this._updateSearchPosition()}),this._resizeObserver.observe(this)}disconnectedCallback(){super.disconnectedCallback(),clearInterval(this._refreshTimer),document.removeEventListener("click",this._handleClickOutsideColumnPicker),this._resizeObserver?.disconnect()}willUpdate(e){e.has("def")&&(this._def={...this.def,columns:this.def.columns.map(e=>"actions"===e.type?{...e,label:e.label??"",sticky:"right",resizable:!1}:{...e})},this._displayedColumns=this._def.displayedColumns||this._def.columns.map(e=>e.id),this._fetch(),this._initRefresh())}updated(e){this._updateScrollFlags(),this._syncSlottedContent()}_syncSlottedContent(){const e=this.getDisplayedColumns().filter(e=>e.render);e.length&&(this.querySelectorAll('[slot^="cell-"]').forEach(e=>e.remove()),this._data.forEach((t,i)=>{e.forEach(e=>{const o=e.render(t),s="string"==typeof o?o:"";if(s){const t=document.createElement("span");t.slot=`cell-${i}-${e.id}`,"actions"===e.type&&(t.style.display="flex",t.style.gap="8px"),t.innerHTML=s,this.appendChild(t)}})}))}refresh(){this._fetch()}goToPrevPage(){this._page>1&&(this._page--,this._fetch())}goToNextPage(){this._page<this._totalPages&&(this._page++,this._fetch())}goToPage(e){e>=1&&e<=this._totalPages&&(this._page=e,this._fetch())}_fetch(){if(!this._def.dataSource)return;let e;switch(this._dataState="loading",this._def.dataSource.mode){case"opensearch":throw Error("Opensearch not supported yet");case"db":e={page:this._page-1,size:this._pageSize,sorts:[],filterFields:[],queryFields:[],facetFields:[]},this._searchQuery?.trim().length&&this._def.columns.filter(e=>e.searchable).forEach(t=>{e.queryFields.push({name:t.id,operation:"CONTAINS",value:this._searchQuery,and:!1})});break;default:e={page:this._page-1,size:this._pageSize,sorts:[],filterFields:[],queryFields:[],facetFields:[]},this._searchQuery?.trim().length&&e.queryFields.push({name:"_text_",operation:"IS",value:Xe(this._searchQuery)})}this._def.dataSource.fetch(e).then(e=>{switch(this._def.dataSource?.mode){case"opensearch":throw Error("Opensearch not supported yet");case"db":{const t=e;this._data=t.data.content,this._totalItems=t.data.totalElements,this._totalPages=t.data.totalPages,this._pageSize=t.data.size;break}default:{const t=e;this._data=t.data.content,this._totalItems=t.data.totalElements,this._totalPages=t.data.totalPages,this._pageSize=t.data.size}}this._dataState="success",this._updateSearchPosition()}).catch(e=>{this._dataState="error",qe.show({message:e instanceof Error?e.message:"Failed to load data",type:"error"})})}_initRefresh(){clearInterval(this._refreshTimer),this._def.refreshInterval&&this._def.refreshInterval>0&&(this._refreshTimer=window.setInterval(()=>{this._fetch()},this._def.refreshInterval))}_handleSearch(e){const t=e.target;this._searchQuery=t.value,this._page=1,this._fetch()}_getGridTemplateColumns(){return this.getDisplayedColumns().map(e=>e.width?e.width:"actions"===e.type?"max-content":"minmax(80px, auto)").join(" ")}_updateSearchPosition(){if(this._searchPositionLocked)return;const e=this.shadowRoot?.querySelector(".search"),t=e?.querySelector(".search-field");e&&t&&(e.style.justifyContent="center",t.style.marginLeft="",requestAnimationFrame(()=>{const i=e.getBoundingClientRect(),o=t.getBoundingClientRect().left-i.left;e.style.justifyContent="flex-start",t.style.marginLeft=`${o}px`,this._searchPositionLocked=!0}))}_toggleColumnPicker(){this._columnPickerOpen=!this._columnPickerOpen}_toggleColumn(e){this._displayedColumns.includes(e)?this._displayedColumns=this._displayedColumns.filter(t=>t!==e):this._displayedColumns=[...this._displayedColumns,e]}getDisplayedColumns(){return this._displayedColumns.map(e=>this._def.columns.find(t=>t.id===e)).sort((e,t)=>"actions"===e.type&&"actions"!==t.type?1:"actions"!==e.type&&"actions"===t.type?-1:0)}_handleScroll(e){const t=e.target;this._canScrollLeft=t.scrollLeft>0,this._canScrollRight=t.scrollLeft<t.scrollWidth-t.clientWidth-1}_updateScrollFlags(){const e=this.shadowRoot?.querySelector(".content");e&&(this._canScrollLeft=e.scrollLeft>0,this._canScrollRight=e.scrollWidth>e.clientWidth&&e.scrollLeft<e.scrollWidth-e.clientWidth-1,this._canScrollHorizontal=e.scrollWidth>e.clientWidth),this.classList.toggle("kr-table--scroll-left-available",this._canScrollLeft),this.classList.toggle("kr-table--scroll-right-available",this._canScrollRight),this.classList.toggle("kr-table--scroll-horizontal-available",this._canScrollHorizontal),this.classList.toggle("kr-table--sticky-left",this.getDisplayedColumns().some(e=>"left"===e.sticky)),this.classList.toggle("kr-table--sticky-right",this.getDisplayedColumns().some(e=>"right"===e.sticky))}_handleResizeStart(e,t){e.preventDefault();const i=this.shadowRoot?.querySelector(`.header-cell[data-column-id="${t}"]`);this._resizing={columnId:t,startX:e.clientX,startWidth:i?.offsetWidth||200},document.addEventListener("mousemove",this._handleResizeMove),document.addEventListener("mouseup",this._handleResizeEnd)}_handleAction(e){e.href||this.dispatchEvent(new CustomEvent("action",{detail:{action:e.id},bubbles:!0,composed:!0}))}_renderCellContent(e,t,i){const o=t[e.id];if(e.render)return U`<slot name="cell-${i}-${e.id}"></slot>`;if(null==o)return"";switch(e.type){case"number":return"number"==typeof o?o.toLocaleString():String(o);case"currency":return"number"==typeof o?o.toLocaleString("en-US",{style:"currency",currency:"USD"}):String(o);case"date":{let e;if(o instanceof Date)e=o;else if("string"==typeof o&&/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}/.test(o)){const t=o.replace(/(\d{2}:\d{2}:\d{2}):(\d+)$/,"$1.$2").replace(" ","T")+"Z";e=new Date(t)}else e=new Date(o);return e.toLocaleString(void 0,{year:"numeric",month:"short",day:"numeric",hour:"numeric",minute:"2-digit"})}case"boolean":return!0===o?"Yes":!1===o?"No":"";default:return String(o)}}_getHeaderCellClasses(e,t){return{"header-cell":!0,"header-cell--align-center":"center"===e.align,"header-cell--align-right":"right"===e.align,"header-cell--sticky-left":"left"===e.sticky,"header-cell--sticky-left-last":"left"===e.sticky&&!this.getDisplayedColumns().slice(t+1).some(e=>"left"===e.sticky),"header-cell--sticky-right":"right"===e.sticky,"header-cell--sticky-right-first":"right"===e.sticky&&!this.getDisplayedColumns().slice(0,t).some(e=>"right"===e.sticky)}}_getCellClasses(e,t){return{cell:!0,"cell--actions":"actions"===e.type,"cell--align-center":"center"===e.align,"cell--align-right":"right"===e.align,"cell--sticky-left":"left"===e.sticky,"cell--sticky-left-last":"left"===e.sticky&&!this.getDisplayedColumns().slice(t+1).some(e=>"left"===e.sticky),"cell--sticky-right":"right"===e.sticky,"cell--sticky-right-first":"right"===e.sticky&&!this.getDisplayedColumns().slice(0,t).some(e=>"right"===e.sticky)}}_getCellStyle(e,t){const i={};if("left"===e.sticky){let e=0;for(let i=0;i<t;i++){const t=this.getDisplayedColumns()[i];"left"===t.sticky&&(e+=parseInt(t.width||"0",10))}i.left=`${e}px`}if("right"===e.sticky){let e=0;for(let i=t+1;i<this.getDisplayedColumns().length;i++){const t=this.getDisplayedColumns()[i];"right"===t.sticky&&(e+=parseInt(t.width||"0",10))}i.right=`${e}px`}return i}_renderPagination(){const e=(this._page-1)*this._pageSize+1,t=Math.min(this._page*this._pageSize,this._totalItems);return U`
       <div class="pagination">