jb-grid 0.4.1 → 0.5.0

package/web-component/dist/index.umd.js

@@ -1,2 +1,568 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("jb-core/theme"),require("jb-core/i18n"),require("jb-core")):"function"==typeof define&&define.amd?define(["exports","jb-core/theme","jb-core/i18n","jb-core"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).JBGrid={},e.JBCoreTheme,e.JBCoreI18N,e.JBCore)}(this,function(e,t,i,n){var a=Object.create,s=Object.defineProperty,o=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,l=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty,p=(e,t,i)=>(i=null!=e?a(l(e)):{},((e,t,i,n)=>{if(t&&"object"==typeof t||"function"==typeof t)for(var a,l=r(t),p=0,d=l.length;p<d;p++)a=l[p],h.call(e,a)||a===i||s(e,a,{get:(e=>t[e]).bind(null,a),enumerable:!(n=o(t,a))||n.enumerable});return e})(!t&&e&&e.__esModule?i:s(i,"default",{value:e,enumerable:!0}),e));function d(e,t,i,n){if("a"===i&&!n)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!n:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===i?n:"a"===i?n.call(e):n?n.value:t.get(e)}function c(e,t,i,n,a){if("m"===n)throw new TypeError("Private method is not writable");if("a"===n&&!a)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!a:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===n?a.call(e,i):a?a.value=i:t.set(e,i),i}t=p(t),i=p(i),n=p(n);var m,g,f,w,u,b,x,v,y,j,k,E,M,S,L,W,C,T,z,I,O=class extends HTMLElement{get pageIndex(){return d(this,f,"f")}set pageIndex(e){d(this,m,"m",M).call(this,e,!1)}get max(){return d(this,u,"f")}set max(e){c(this,u,e,"f"),this.pageIndex>e&&d(this,m,"m",C).call(this,e,!1),d(this,g,"f").nav.last.disabled=d(this,u,"f")==1/0}get min(){return d(this,w,"f")}set min(e){c(this,w,e,"f"),d(this,f,"f")<e&&d(this,m,"m",C).call(this,e,!1),d(this,g,"f").nav.first.disabled=d(this,w,"f")==1/0}constructor(){super(),m.add(this),g.set(this,void 0),f.set(this,1),w.set(this,1),u.set(this,1/0),b.set(this,3),this.showPersianNumber="arabext"==i.i18n.locale.numberingSystem,d(this,m,"m",v).call(this)}connectedCallback(){}};g=new WeakMap,f=new WeakMap,w=new WeakMap,u=new WeakMap,b=new WeakMap,m=new WeakSet,x=function(){return d(this,b,"f")+2},v=function(){const e=this.attachShadow({mode:"open",delegatesFocus:!0,clonable:!0,serializable:!0});(0,t.registerDefaultVariables)(),d(this,m,"m",y).call(this),c(this,g,{nav:{wrapper:e.querySelector(".page-navigator"),first:e.querySelector(".first-page"),last:e.querySelector(".last-page"),next:e.querySelector(".next-page"),prev:e.querySelector(".prev-page")},index:{wrapper:e.querySelector(".page-index-wrapper"),list:[]}},"f"),d(this,m,"m",j).call(this),d(this,m,"m",I).call(this),this.max=1/0,this.min=1},y=function(){const e=document.createElement("template");e.innerHTML='<style>:host{--jb-pagination-index-width:3rem}.jb-pagination-web-component{direction:ltr;gap:1rem;display:flex}.jb-pagination-web-component .page-navigator{grid-template-rows:3rem;grid-template-columns:4rem 4rem max-content 4rem 4rem;place-items:center;display:grid}.jb-pagination-web-component .page-navigator .arrow-btn{all:unset;cursor:pointer;width:3rem;height:3rem;fill:var(--jb-neutral-2)}.jb-pagination-web-component .page-navigator .arrow-btn:disabled{fill:var(--jb-neutral-7)}.jb-pagination-web-component .page-navigator .page-index-wrapper{width:calc(var(--jb-pagination-index-width) * 3);height:100%;position:relative;overflow:hidden}.jb-pagination-web-component .page-navigator .page-index-wrapper .page-index{color:var(--jb-neutral-6);width:var(--jb-pagination-index-width);text-box-trim:trim-both;text-box-edge:ex alphabetic;cursor:pointer;justify-content:center;align-items:center;height:3rem;font-size:1rem;transition:all .3s;display:flex;position:absolute}.jb-pagination-web-component .page-navigator .page-index-wrapper .page-index.current{color:var(--jb-primary);transform:scale(1.2)}.jb-pagination-web-component .page-navigator .page-index-wrapper .page-index.empty{cursor:default}.jb-pagination-web-component .page-navigator .page-index-wrapper .page-index:first-child{top:0;left:calc(var(--jb-pagination-index-width) * -1);transform:scale(.1)}.jb-pagination-web-component .page-navigator .page-index-wrapper .page-index:nth-child(2){top:0;left:0}.jb-pagination-web-component .page-navigator .page-index-wrapper .page-index:nth-child(3){top:0;left:calc(var(--jb-pagination-index-width))}.jb-pagination-web-component .page-navigator .page-index-wrapper .page-index:nth-child(4){top:0;left:calc(var(--jb-pagination-index-width) * 2)}.jb-pagination-web-component .page-navigator .page-index-wrapper .page-index:nth-child(5){top:0;left:calc(var(--jb-pagination-index-width) * 3);transform:scale(.1)}</style>\n\n  <div class="jb-pagination-web-component">\n    <section class="page-navigator">\n      <button class="first-page arrow-btn">\n        <svg width="100%" height="100%" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet"><title>first page</title><path d="M7 6 v12 h2 v-12 h-2z M17.41 7.41L16 6l-6 6 6 6 1.41-1.41L12.83 12z"></path></svg>\n        </button>\n        <button class="prev-page arrow-btn">\n        <svg width="100%" height="100%" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet"><title>prev page</title><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"></path></svg>\n      </button>\n      <div class="page-index-wrapper">\n      </div>\n      <button class="next-page arrow-btn">\n        <svg width="100%" height="100%" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet"><title>previous page</title><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path></svg>\n        </button>\n      <button class="last-page arrow-btn">\n        <svg width="100%" height="100%" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet"><title>last page</title><path d="M15 6 v12 h2 v-12 h-2z M8 6L6.59 7.41 11.17 12l-4.58 4.59L8 18l6-6z"></path></svg>\n      </button>\n    </section>\n  </div>\n      ',this.shadowRoot.appendChild(e.content.cloneNode(!0))},j=function(){d(this,g,"f").nav.next.addEventListener("click",()=>d(this,m,"m",k).call(this,!0)),d(this,g,"f").nav.prev.addEventListener("click",()=>d(this,m,"m",E).call(this,!0)),d(this,g,"f").nav.last.addEventListener("click",()=>{d(this,m,"m",M).call(this,d(this,u,"f"),!0)}),d(this,g,"f").nav.first.addEventListener("click",()=>{d(this,m,"m",M).call(this,d(this,w,"f"),!0)})},k=function(e){if(d(this,f,"f")>d(this,u,"f")-1)return;const t=d(this,f,"f")+1,i=d(this,m,"m",L).call(this,t+2);d(this,g,"f").index.list.shift()?.remove(),d(this,g,"f").index.wrapper.append(i),d(this,g,"f").index.list.push(i),d(this,m,"m",C).call(this,t,e)},E=function(e){if(d(this,f,"f")<d(this,w,"f")+1)return;const t=d(this,f,"f")-1,i=d(this,m,"m",L).call(this,t-2);d(this,g,"f").index.list.pop()?.remove(),d(this,g,"f").index.list.unshift(i),d(this,g,"f").index.wrapper.prepend(i),d(this,m,"m",C).call(this,t,e)},M=function(e,t){if(d(this,f,"f")==e)return;const i=e-d(this,f,"f");Math.abs(i)>1?(d(this,m,"m",C).call(this,e,t),d(this,m,"m",I).call(this)):i>0?d(this,m,"m",k).call(this,t):d(this,m,"m",E).call(this,t)},S=function(e){if(d(this,g,"f").index.list.find(t=>t.pageIndex==e.pageIndex))return;let t="end";if(0==d(this,g,"f").index.list.length||d(this,g,"f").index.list[d(this,g,"f").index.list.length-1]?.pageIndex<e.pageIndex)d(this,g,"f").index.list.push(e),d(this,g,"f").index.wrapper.append(e),t="start";else if(d(this,g,"f").index.list[0]?.pageIndex>e.pageIndex)d(this,g,"f").index.list.unshift(e),d(this,g,"f").index.wrapper.prepend(e);else{const t=d(this,g,"f").index.list.findIndex(t=>t?.pageIndex>e.pageIndex);d(this,g,"f").index.wrapper.insertBefore(e,d(this,g,"f").index.list[t]),d(this,g,"f").index.list.splice(t,0,e)}d(this,g,"f").index.list.length>d(this,m,"a",x)&&("end"==t?d(this,g,"f").index.list.pop()?.remove():d(this,g,"f").index.list.shift()?.remove())},L=function(e){const t=d(this,w,"f")>e||d(this,u,"f")<e,i=document.createElement("div");return i.classList.add("page-index",t?"empty":"not-empty"),i.dataset.index=`${e}`,i.pageIndex=e,i.addEventListener("click",e=>{d(this,m,"m",W).call(this,i)}),t?i.isEmpty=!0:(i.isEmpty=!1,i.innerHTML=`${this.showPersianNumber?(0,n.enToFaDigits)(e):e}`),i},W=function(e){e.isEmpty||d(this,m,"m",M).call(this,e.pageIndex,!0)},C=function(e,t){c(this,f,e,"f"),d(this,m,"m",T).call(this,e),t&&d(this,m,"m",z).call(this)},T=function(e){d(this,g,"f").index.wrapper.querySelector(".current")?.classList.remove("current"),d(this,g,"f").index.list.forEach(t=>{t.pageIndex==e&&t.classList.add("current")})},z=function(){const e=new Event("change",{cancelable:!1,composed:!0,bubbles:!0});this.dispatchEvent(e)},I=function(){d(this,m,"m",S).call(this,d(this,m,"m",L).call(this,d(this,f,"f")-2)),d(this,m,"m",S).call(this,d(this,m,"m",L).call(this,d(this,f,"f")-1)),d(this,m,"m",S).call(this,d(this,m,"m",L).call(this,d(this,f,"f"))),d(this,m,"m",S).call(this,d(this,m,"m",L).call(this,d(this,f,"f")+1)),d(this,m,"m",S).call(this,d(this,m,"m",L).call(this,d(this,f,"f")+2)),d(this,m,"m",T).call(this,d(this,f,"f"))};!customElements.get("jb-pagination")&&window.customElements.define("jb-pagination",O);var B,q,P,A,H,R,J,N;function $(e,t){if(null===t){const t="\n    .grid-row{\n      display:grid;\n      grid-auto-columns: 1fr;\n      grid-auto-flow: column;\n      grid-template-rows: 1fr;\n      --jb-row-grid-mode: auto;\n    }\n  ";return e.replaceSync(t),e}let i="";const n=t.map(e=>`${e.name}`).join(" ");t.forEach(e=>{null!=e.size||null!=e.size?"number"==typeof e.size?i+=` ${e.size}px`:i+=` ${e.size}`:i+=" 1fr"});const a=`\n    .grid-row{\n      display:grid;\n      grid-template-columns: ${i};\n      grid-template-areas: "${n}"\n    }\n  `;return e.replaceSync(a),e}var D=class extends HTMLElement{get isOpen(){return d(this,H,"f")}set isOpen(e){c(this,H,e,"f"),e?d(this,q,"f").expandWrapper.classList.remove("--hidden"):d(this,q,"f").expandWrapper.classList.add("--hidden")}get rowTemplate(){return d(this,A,"f")}set rowTemplate(e){c(this,A,e,"f"),$(d(this,P,"f"),e)}constructor(){super(),B.add(this),q.set(this,void 0),P.set(this,new CSSStyleSheet),A.set(this,[]),H.set(this,!1),d(this,B,"m",R).call(this)}connectedCallback(){}};q=new WeakMap,P=new WeakMap,A=new WeakMap,H=new WeakMap,B=new WeakSet,R=function(){const e=this.attachShadow({mode:"open",delegatesFocus:!0,clonable:!0,serializable:!0});e.adoptedStyleSheets=[d(this,P,"f")],(0,t.registerDefaultVariables)(),d(this,B,"m",J).call(this),c(this,q,{expandWrapper:e.querySelector(".expand-wrapper")},"f"),$(d(this,P,"f"),null),d(this,B,"m",N).call(this)},J=function(){const e=document.createElement("template");e.innerHTML='<style>:host{background-color:var(--jb-white);width:100%;display:block}:host(:nth-of-type(2n)){background:var(--jb-neutral-10)}@media (max-width:768px){:host(:nth-of-type(2n)){background:var(--jb-white)}}.jb-row-web-component .grid-row{box-sizing:border-box;grid-auto-rows:minmax(3rem,auto);width:100%}@media (max-width:768px){.jb-row-web-component .grid-row{border-radius:var(--jb-radius);grid-template-rows:auto;box-shadow:0 0 1px #d8d8d8;grid-template-columns:auto!important}}.jb-row-web-component .expand-wrapper{interpolate-size:allow-keywords;opacity:1;height:auto;transition:all .3s;overflow:clip}.jb-row-web-component .expand-wrapper.--hidden{opacity:0;height:0;min-height:0;padding-block:0}.jb-row-web-component .expand-wrapper slot[name=expand]::slotted(*){box-sizing:border-box;border-bottom:1px solid #ebebeb;width:100%;min-height:4rem;padding-block:1rem;padding-inline:2rem;overflow:auto}</style>\n\n  <div class="jb-row-web-component">\n    <div class="grid-row" part="row">\n      <slot name="cell"></slot>\n    </div>\n    <div class="expand-wrapper --hidden">\n      <slot name="expand"></slot>\n    </div>\n  </div>\n      ',this.shadowRoot.appendChild(e.content.cloneNode(!0))},N=function(){};!customElements.get("jb-row")&&window.customElements.define("jb-row",D);var F,Y,V,_,G,Z,K=class extends HTMLElement{get name(){return this.getAttribute("name")||""}set name(e){this.setAttribute("name",e),d(this,V,"f").replace(`\n      :host{ grid-area:${e||"none"}}\n      @container (style(--jb-row-grid-mode: auto)) {\n        :host{ grid-area:auto }\n      }\n    `)}constructor(){super(),F.add(this),Y.set(this,void 0),V.set(this,new CSSStyleSheet),d(this,F,"m",_).call(this)}connectedCallback(){}};Y=new WeakMap,V=new WeakMap,F=new WeakSet,_=function(){this.attachShadow({mode:"open",delegatesFocus:!0,clonable:!0,serializable:!0}).adoptedStyleSheets=[d(this,V,"f")],(0,t.registerDefaultVariables)(),d(this,F,"m",G).call(this),c(this,Y,{},"f"),d(this,F,"m",Z).call(this)},G=function(){const e=document.createElement("template");e.innerHTML='<style>:host{box-sizing:border-box;grid-template-rows:minmax(0,auto);grid-template-columns:auto;grid-auto-columns:max-content;grid-auto-flow:column;justify-content:start;align-items:center;gap:.5rem;width:100%;max-width:100%;height:100%;padding:.25rem 1rem;display:grid}:host([ellipsis]:not([ellipsis="1"]):not([ellipsis=""])){-webkit-line-clamp:attr(max-line type(<integer>), 1);line-clamp:attr(max-line type(<integer>), 1);box-orient:vertical;-webkit-box-orient:vertical;align-content:center;height:fit-content;display:-webkit-box;overflow:hidden}:host(:where([ellipsis=""],[ellipsis="1"])){text-overflow:ellipsis;white-space:nowrap;align-content:center;display:block;overflow:hidden}</style>\n\n    <slot></slot>\n      ',this.shadowRoot.appendChild(e.content.cloneNode(!0))},Z=function(){};!customElements.get("jb-cell")&&window.customElements.define("jb-cell",K);var Q,U,X,ee,te,ie,ne=class extends HTMLElement{constructor(){super(),Q.add(this),ee.set(this,null),d(this,Q,"m",U).call(this)}connectedCallback(){c(this,ee,d(this,Q,"m",te).call(this,this),"f"),d(this,ee,"f")?.isOpen&&this.setAttribute("open","")}toggle(){if(d(this,ee,"f")){const e=!d(this,ee,"f")?.isOpen;d(this,ee,"f").isOpen=e,e?this.setAttribute("open",""):this.removeAttribute("open")}}};ee=new WeakMap,Q=new WeakSet,U=function(){this.attachShadow({mode:"open",delegatesFocus:!0,clonable:!0,serializable:!0});(0,t.registerDefaultVariables)(),d(this,Q,"m",X).call(this),d(this,Q,"m",ie).call(this)},X=function(){const e=document.createElement("template");e.innerHTML='<style>:host{cursor:pointer;width:1.5rem;height:1.5rem;display:block}:host([open]) .arrow-icon{rotate:-90deg}:host([open]) .arrow-icon:dir(ltr){rotate:90deg}.arrow-icon{width:100%;height:100%;transition:all .3s}.arrow-icon:dir(ltr){transform:rotateY(180deg)}</style>\n\n    <slot>\n      <svg class="arrow-icon" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">\n         <path d="M35,10 L15,25 L35,40 Z" \n        fill="currentColor" \n        stroke="currentColor" \n        stroke-width="6" \n        stroke-linejoin="round" />\n      </svg>\n    </slot>\n      ',this.shadowRoot.appendChild(e.content.cloneNode(!0))},te=function e(t){return t&&t.parentElement?t.parentElement instanceof D?t.parentElement:d(this,Q,"m",e).call(this,this.parentElement):null},ie=function(){this.addEventListener("click",()=>this.toggle(),{passive:!0})};!customElements.get("jb-expand-toggle")&&window.customElements.define("jb-expand-toggle",ne),e.JBCellWebComponent=K,e.JBExpandToggleWebComponent=ne,e.JBPaginationWebComponent=O,e.JBRowWebComponent=D});
+(function(e, t) {
+	"object" == typeof exports && "undefined" != typeof module ? t(exports, require("jb-core/i18n"), require("jb-core/theme"), require("jb-core")) : "function" == typeof define && define.amd ? define([
+		"exports",
+		"jb-core/i18n",
+		"jb-core/theme",
+		"jb-core"
+	], t) : t((e = "undefined" != typeof globalThis ? globalThis : e || self).JBGrid = {}, e.JBCoreI18N, e.JBCoreTheme, e.JBCore);
+})(this, function(e, t, n, i) {
+	Object.defineProperty(e, Symbol.toStringTag, { value: "Module" });
+	const a = new t.JBDictionary({
+		fa: {
+			toggleRowDetails: "نمایش یا پنهان کردن جزئیات ردیف",
+			refreshData: "به‌روزرسانی داده‌ها",
+			enterFullscreen: "ورود به حالت تمام‌صفحه",
+			exitFullscreen: "خروج از حالت تمام‌صفحه",
+			firstPage: "صفحه اول",
+			previousPage: "صفحه قبل",
+			nextPage: "صفحه بعد",
+			lastPage: "صفحه آخر",
+			page: (e) => `صفحه ${e}`
+		},
+		en: {
+			toggleRowDetails: "Toggle row details",
+			refreshData: "Refresh data",
+			enterFullscreen: "Enter fullscreen",
+			exitFullscreen: "Exit fullscreen",
+			firstPage: "First page",
+			previousPage: "Previous page",
+			nextPage: "Next page",
+			lastPage: "Last page",
+			page: (e) => `Page ${e}`
+		}
+	});
+	var r = class extends HTMLElement {
+		#e;
+		#t;
+		#n;
+		#i;
+		#a;
+		get #r() {
+			return this.#a + 2;
+		}
+		get pageIndex() {
+			return this.#t;
+		}
+		set pageIndex(e) {
+			this.#s(e, !1);
+		}
+		get max() {
+			return this.#i;
+		}
+		set max(e) {
+			this.#i = e, this.pageIndex > e && this.#o(e, !1), this.#e.nav.last.disabled = this.#i == Infinity;
+		}
+		get min() {
+			return this.#n;
+		}
+		set min(e) {
+			this.#n = e, this.#t < e && this.#o(e, !1), this.#e.nav.first.disabled = this.#n == Infinity;
+		}
+		constructor() {
+			super(), this.#t = 1, this.#n = 1, this.#i = Infinity, this.#a = 3, this.showPersianNumber = "arabext" == t.i18n.locale.numberingSystem, this.#l();
+		}
+		#l() {
+			const e = this.attachShadow({
+				mode: "open",
+				delegatesFocus: !0,
+				clonable: !0,
+				serializable: !0
+			});
+			(0, n.registerDefaultVariables)(), this.#d(), this.#e = {
+				nav: {
+					wrapper: e.querySelector(".page-navigator"),
+					first: e.querySelector(".first-page"),
+					last: e.querySelector(".last-page"),
+					next: e.querySelector(".next-page"),
+					prev: e.querySelector(".prev-page")
+				},
+				index: {
+					wrapper: e.querySelector(".page-index-wrapper"),
+					list: []
+				}
+			}, this.#h(), this.#p(), this.max = Infinity, this.min = 1;
+		}
+		#d() {
+			const e = `<style>:host{--arrow-button-fill-color:var(--jb-pagination-arrow-button-fill-color,var(--jb-neutral-2));--arrow-button-fill-color-disabled:var(--jb-pagination-arrow-button-fill-color-disabled,var(--jb-neutral-7));--page-index-color:var(--jb-pagination-page-index-color,var(--jb-neutral-6));--page-index-color-current:var(--jb-pagination-page-index-color-current,var(--jb-primary));--index-width:var(--jb-pagination-index-width,3rem)} .jb-pagination-web-component{direction:ltr;gap:1rem;display:flex}.jb-pagination-web-component .page-navigator{grid-template-rows:3rem;grid-template-columns:4rem 4rem max-content 4rem 4rem;place-items:center;display:grid}.jb-pagination-web-component .page-navigator .arrow-btn{all:unset;box-sizing:border-box;cursor:pointer;width:3rem;height:3rem;fill:var(--arrow-button-fill-color)}.jb-pagination-web-component .page-navigator .arrow-btn:focus-visible{outline:2px solid var(--jb-grid-focus-ring-color,Highlight);outline-offset:2px}.jb-pagination-web-component .page-navigator .arrow-btn:disabled{fill:var(--arrow-button-fill-color-disabled);cursor:default}.jb-pagination-web-component .page-navigator .page-index-wrapper{width:calc(var(--index-width) * 3);height:100%;position:relative;overflow:hidden}.jb-pagination-web-component .page-navigator .page-index-wrapper .page-index{all:unset;box-sizing:border-box;color:var(--page-index-color);width:var(--index-width);text-box-trim:trim-both;text-box-edge:ex alphabetic;cursor:pointer;justify-content:center;align-items:center;height:3rem;font-size:1rem;transition:all .3s;display:flex;position:absolute}.jb-pagination-web-component .page-navigator .page-index-wrapper .page-index:disabled{cursor:default}.jb-pagination-web-component .page-navigator .page-index-wrapper .page-index:focus-visible{outline:2px solid var(--jb-grid-focus-ring-color,Highlight);outline-offset:-2px}.jb-pagination-web-component .page-navigator .page-index-wrapper .page-index.current{color:var(--page-index-color-current);transform:scale(1.2)}.jb-pagination-web-component .page-navigator .page-index-wrapper .page-index.empty{cursor:default}.jb-pagination-web-component .page-navigator .page-index-wrapper .page-index:first-child{top:0;left:calc(var(--index-width) * -1);transform:scale(.1)}.jb-pagination-web-component .page-navigator .page-index-wrapper .page-index:nth-child(2){top:0;left:0}.jb-pagination-web-component .page-navigator .page-index-wrapper .page-index:nth-child(3){top:0;left:calc(var(--index-width))}.jb-pagination-web-component .page-navigator .page-index-wrapper .page-index:nth-child(4){top:0;left:calc(var(--index-width) * 2)}.jb-pagination-web-component .page-navigator .page-index-wrapper .page-index:nth-child(5){top:0;left:calc(var(--index-width) * 3);transform:scale(.1)}</style>\n\n  <div class="jb-pagination-web-component">\n    <section class="page-navigator">\n      <button class="first-page arrow-btn" type="button" aria-label="${a.get(t.i18n, "firstPage")}">\n        <svg width="100%" height="100%" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" aria-hidden="true"><path d="M7 6 v12 h2 v-12 h-2z M17.41 7.41L16 6l-6 6 6 6 1.41-1.41L12.83 12z"></path></svg>\n        </button>\n        <button class="prev-page arrow-btn" type="button" aria-label="${a.get(t.i18n, "previousPage")}">\n        <svg width="100%" height="100%" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" aria-hidden="true"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"></path></svg>\n      </button>\n      <div class="page-index-wrapper">\n      </div>\n      <button class="next-page arrow-btn" type="button" aria-label="${a.get(t.i18n, "nextPage")}">\n        <svg width="100%" height="100%" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" aria-hidden="true"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path></svg>\n        </button>\n      <button class="last-page arrow-btn" type="button" aria-label="${a.get(t.i18n, "lastPage")}">\n        <svg width="100%" height="100%" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" aria-hidden="true"><path d="M15 6 v12 h2 v-12 h-2z M8 6L6.59 7.41 11.17 12l-4.58 4.59L8 18l6-6z"></path></svg>\n      </button>\n    </section>\n  </div>\n      `, n = document.createElement("template");
+			n.innerHTML = e, this.shadowRoot.appendChild(n.content.cloneNode(!0));
+		}
+		connectedCallback() {}
+		#h() {
+			this.#e.nav.next.addEventListener("click", () => this.#c(!0)), this.#e.nav.prev.addEventListener("click", () => this.#m(!0)), this.#e.nav.last.addEventListener("click", () => {
+				this.#s(this.#i, !0);
+			}), this.#e.nav.first.addEventListener("click", () => {
+				this.#s(this.#n, !0);
+			});
+		}
+		#c(e) {
+			if (this.#t > this.#i - 1) return;
+			const t = this.#t + 1, n = this.#g(t + 2);
+			this.#e.index.list.shift()?.remove(), this.#e.index.wrapper.append(n), this.#e.index.list.push(n), this.#o(t, e);
+		}
+		#m(e) {
+			if (this.#t < this.#n + 1) return;
+			const t = this.#t - 1, n = this.#g(t - 2);
+			this.#e.index.list.pop()?.remove(), this.#e.index.list.unshift(n), this.#e.index.wrapper.prepend(n), this.#o(t, e);
+		}
+		#s(e, t) {
+			if (this.#t == e) return;
+			const n = e - this.#t;
+			Math.abs(n) > 1 ? (this.#o(e, t), this.#p()) : n > 0 ? this.#c(t) : this.#m(t);
+		}
+		#b(e) {
+			if (this.#e.index.list.find((t) => t.pageIndex == e.pageIndex)) return;
+			let t = "end";
+			if (0 == this.#e.index.list.length || this.#e.index.list[this.#e.index.list.length - 1]?.pageIndex < e.pageIndex) this.#e.index.list.push(e), this.#e.index.wrapper.append(e), t = "start";
+			else if (this.#e.index.list[0]?.pageIndex > e.pageIndex) this.#e.index.list.unshift(e), this.#e.index.wrapper.prepend(e);
+			else {
+				const t = this.#e.index.list.findIndex((t) => t?.pageIndex > e.pageIndex);
+				this.#e.index.wrapper.insertBefore(e, this.#e.index.list[t]), this.#e.index.list.splice(t, 0, e);
+			}
+			this.#e.index.list.length > this.#r && ("end" == t ? this.#e.index.list.pop()?.remove() : this.#e.index.list.shift()?.remove());
+		}
+		#g(e) {
+			const n = this.#n > e || this.#i < e, r = document.createElement("button");
+			return r.type = "button", r.setAttribute("aria-label", a.get(t.i18n, "page")(e)), r.classList.add("page-index", n ? "empty" : "not-empty"), r.dataset.index = `${e}`, r.pageIndex = e, r.addEventListener("click", (e) => {
+				this.#u(r);
+			}), n ? (r.isEmpty = !0, r.disabled = !0) : (r.isEmpty = !1, r.disabled = !1, r.innerHTML = `${this.showPersianNumber ? (0, i.enToFaDigits)(e) : e}`), r;
+		}
+		#u(e) {
+			e.isEmpty || this.#s(e.pageIndex, !0);
+		}
+		#o(e, t) {
+			this.#t = e, this.#x(e), t && this.#w();
+		}
+		#x(e) {
+			const t = this.#e.index.wrapper.querySelector(".current");
+			t?.classList.remove("current"), t?.removeAttribute("aria-current"), this.#e.index.list.forEach((t) => {
+				t.tabIndex = t.pageIndex === e ? 0 : -1, t.pageIndex == e && (t.classList.add("current"), t.setAttribute("aria-current", "page"));
+			});
+		}
+		#w() {
+			const e = new Event("change", {
+				cancelable: !1,
+				composed: !0,
+				bubbles: !0
+			});
+			this.dispatchEvent(e);
+		}
+		#p() {
+			this.#b(this.#g(this.#t - 2)), this.#b(this.#g(this.#t - 1)), this.#b(this.#g(this.#t)), this.#b(this.#g(this.#t + 1)), this.#b(this.#g(this.#t + 2)), this.#x(this.#t);
+		}
+	};
+	customElements.get("jb-pagination") || window.customElements.define("jb-pagination", r);
+	var s = class extends HTMLElement {
+		#e;
+		#v = 20;
+		#f = [
+			20,
+			30,
+			50,
+			100
+		];
+		#I = 0;
+		#y = 0;
+		#S = 0;
+		#E = "";
+		#j = "";
+		#z = "";
+		#C = !1;
+		get pageSize() {
+			return this.#v;
+		}
+		set pageSize(e) {
+			this.#v = e, this.#L();
+		}
+		get pageSizes() {
+			return this.#f;
+		}
+		set pageSizes(e) {
+			this.#f = e, this.#P();
+		}
+		get startItemIndex() {
+			return this.#I;
+		}
+		set startItemIndex(e) {
+			this.#I = e, this.#T();
+		}
+		get endItemIndex() {
+			return this.#y;
+		}
+		set endItemIndex(e) {
+			this.#y = e, this.#T();
+		}
+		get totalItemsCount() {
+			return this.#S;
+		}
+		set totalItemsCount(e) {
+			this.#S = e, this.#T();
+		}
+		get pageItemCountTitle() {
+			return this.#E;
+		}
+		set pageItemCountTitle(e) {
+			this.#E = e, this.#M();
+		}
+		get fromLabel() {
+			return this.#j;
+		}
+		set fromLabel(e) {
+			this.#j = e, this.#M();
+		}
+		get currentAvailableItemTitle() {
+			return this.#z;
+		}
+		set currentAvailableItemTitle(e) {
+			this.#z = e, this.#M();
+		}
+		get showPersianNumber() {
+			return this.#C;
+		}
+		set showPersianNumber(e) {
+			this.#C = e, this.#P(), this.#T();
+		}
+		constructor() {
+			super(), this.#l();
+		}
+		#l() {
+			const e = this.attachShadow({
+				mode: "open",
+				delegatesFocus: !0,
+				clonable: !0,
+				serializable: !0
+			});
+			(0, n.registerDefaultVariables)(), this.#d(), this.#e = {
+				pageSizeSelect: e.querySelector(".page-size-select"),
+				pageSizeSection: e.querySelector(".page-size-section"),
+				startItemIndex: e.querySelector(".start-item-index"),
+				endItemIndex: e.querySelector(".end-item-index"),
+				fromLabel: e.querySelector(".from-label"),
+				totalItemsCount: e.querySelector(".total-items-count")
+			}, this.#h(), this.#P(), this.#M(), this.#T();
+		}
+		#d() {
+			const e = document.createElement("template");
+			e.innerHTML = "<style>:host{color:#7b7b7b;height:100%;font-size:1rem;display:block;container-type:inline-size}.jb-pagination-info-web-component{align-items:center;height:100%;display:flex}.page-size-section{align-items:center;height:100%;padding:0 1rem;display:flex}.page-size-select{color:inherit;font-family:inherit;font-size:inherit;background-color:#0000;border:none}.items-information-section{white-space:nowrap;align-items:center;height:100%;display:flex}@container (max-width:16.25rem){.page-size-section{display:none}}@container (max-width:10rem){.items-information-section{display:none}}</style>\n\n    <section class=\"jb-pagination-info-web-component\">\n      <section class=\"page-size-section\">\n        <select class=\"page-size-select\"></select>\n      </section>\n      <section class=\"items-information-section\">\n        <span class=\"start-item-index\"></span>\n        <span>-</span>\n        <span class=\"end-item-index\"></span>\n        <span class=\"from-label\"></span>\n        <span class=\"total-items-count\"></span>\n      </section>\n    </section>\n      ", this.shadowRoot.appendChild(e.content.cloneNode(!0));
+		}
+		#h() {
+			this.#e.pageSizeSelect.addEventListener("change", () => {
+				const e = Number(this.#e.pageSizeSelect.value);
+				this.pageSize = e, this.dispatchEvent(new CustomEvent("page-size-change", {
+					bubbles: !0,
+					composed: !0,
+					detail: { pageSize: e }
+				}));
+			});
+		}
+		#P() {
+			this.#e && (this.#e.pageSizeSelect.replaceChildren(...this.#f.map((e) => {
+				const t = document.createElement("option");
+				return t.value = e.toString(), t.textContent = this.#k(e).toString(), t;
+			})), this.#L());
+		}
+		#L() {
+			this.#e && (this.#e.pageSizeSelect.value = this.#v.toString());
+		}
+		#M() {
+			this.#e && (this.#e.pageSizeSection.title = this.#E, this.#e.fromLabel.textContent = ` ${this.#j}`, this.#e.totalItemsCount.title = this.#z);
+		}
+		#T() {
+			this.#e && (this.#e.startItemIndex.textContent = this.#k(this.#I).toString(), this.#e.endItemIndex.textContent = ` ${this.#k(this.#y)} `, this.#e.totalItemsCount.textContent = ` ${this.#k(this.#S)} `);
+		}
+		#k(e) {
+			return this.#C ? (0, i.enToFaDigits)(e) : e;
+		}
+	};
+	customElements.get("jb-pagination-info") || window.customElements.define("jb-pagination-info", s);
+	var o = class extends HTMLElement {
+		#A;
+		#N;
+		#R = null;
+		#D = 400;
+		constructor() {
+			super(), "function" == typeof this.attachInternals && (this.#A = this.attachInternals(), this.#A.role = "img", this.#A.ariaLabel = a.get(t.i18n, "refreshData"), this.#A.ariaBusy = "false"), this.#l();
+		}
+		#l() {
+			const e = this.attachShadow({
+				mode: "open",
+				delegatesFocus: !0,
+				clonable: !0,
+				serializable: !0
+			});
+			(0, n.registerDefaultVariables)(), this.#d(), this.#N = e.querySelector(".refresh-icon");
+		}
+		#d() {
+			const e = document.createElement("template");
+			e.innerHTML = "<style>:host{color:#7b7b7b;justify-content:center;align-items:center;width:1.5rem;height:1.5rem;display:inline-flex}:host(:hover){color:#2e3139}.refresh-icon{fill:currentColor;transform-box:fill-box;transform-origin:50%;width:100%;height:100%;display:block}</style>\n\n    <svg class=\"refresh-icon\" x=\"0px\" y=\"0px\" viewBox=\"0 0 305.836 305.836\" part=\"icon\">\n      <title>Refresh Data</title>\n      <g>\n        <path d=\"M152.924,300.748c84.319,0,152.912-68.6,152.912-152.918c0-39.476-15.312-77.231-42.346-105.564   c0,0,3.938-8.857,8.814-19.783c4.864-10.926-2.138-18.636-15.648-17.228l-79.125,8.289c-13.511,1.411-17.999,11.467-10.021,22.461   l46.741,64.393c7.986,10.992,17.834,12.31,22.008,2.937l7.56-16.964c12.172,18.012,18.976,39.329,18.976,61.459   c0,60.594-49.288,109.875-109.87,109.875c-60.591,0-109.882-49.287-109.882-109.875c0-19.086,4.96-37.878,14.357-54.337   c5.891-10.325,2.3-23.467-8.025-29.357c-10.328-5.896-23.464-2.3-29.36,8.031C6.923,95.107,0,121.27,0,147.829   C0,232.148,68.602,300.748,152.924,300.748z\" />\n      </g>\n    </svg>\n      ", this.shadowRoot.appendChild(e.content.cloneNode(!0));
+		}
+		play() {
+			this.#A && (this.#A.ariaBusy = "true"), this.#R ? (this.#R.effect?.updateTiming({ iterations: Infinity }), this.#R.onfinish = null, this.#R.play()) : this.#R = this.#N.animate([{ transform: "rotate(0deg)" }, { transform: "rotate(360deg)" }], {
+				id: "rotate",
+				duration: this.#D,
+				direction: "reverse",
+				iterations: Infinity
+			});
+		}
+		pause() {
+			this.#R?.pause();
+		}
+		stop() {
+			if (!this.#R) return;
+			const e = this.#R, t = "number" == typeof e.currentTime ? e.currentTime : 0, n = Math.max(1, Math.floor(t / this.#D) + 1);
+			e.effect?.updateTiming({ iterations: n }), e.onfinish = () => {
+				this.#R === e && (e.cancel(), this.#R = null, this.#A && (this.#A.ariaBusy = "false"));
+			}, e.play();
+		}
+	};
+	customElements.get("jb-refresh-icon") || window.customElements.define("jb-refresh-icon", o);
+	var l = class extends HTMLElement {
+		#B = "enter";
+		#A;
+		get state() {
+			return this.#B;
+		}
+		set state(e) {
+			this.#B = e, this.#A && (this.#A.ariaLabel = a.get(t.i18n, "exit" === e ? "exitFullscreen" : "enterFullscreen")), this.setAttribute("state", e);
+		}
+		static get observedAttributes() {
+			return ["state"];
+		}
+		constructor() {
+			super(), "function" == typeof this.attachInternals && (this.#A = this.attachInternals(), this.#A.role = "img"), this.#l();
+		}
+		#l() {
+			this.attachShadow({
+				mode: "open",
+				delegatesFocus: !0,
+				clonable: !0,
+				serializable: !0
+			}), (0, n.registerDefaultVariables)(), this.#d(), this.state = this.#H(this.getAttribute("state"));
+		}
+		#d() {
+			const e = document.createElement("template");
+			e.innerHTML = "<style>:host{color:#7b7b7b;justify-content:center;align-items:center;width:1.5rem;height:1.5rem;display:inline-flex}:host(:hover){color:#2e3139}.fullscreen-icon{fill:currentColor;width:100%;height:100%;display:block}.arrow{transform-box:view-box;transition:transform .2s ease-out}:host([state=exit]) .arrow-top-start{transform-origin:1.875rem 1.875rem;transform:rotate(180deg)}:host([state=exit]) .arrow-top-end{transform-origin:6.25rem 1.875rem;transform:rotate(180deg)}:host([state=exit]) .arrow-bottom-end{transform-origin:6.25rem 6.25rem;transform:rotate(180deg)}:host([state=exit]) .arrow-bottom-start{transform-origin:1.875rem 6.25rem;transform:rotate(180deg)}</style>\n\n    <svg class=\"fullscreen-icon\" x=\"0px\" y=\"0px\" viewBox=\"0 0 128 128\" part=\"icon\">\n      <title>Full Screen Button</title>\n      <g class=\"arrow arrow-top-start\">\n        <path d=\"M47.979,41.795L26.466,20.292c-3.995-6.034,6.546-6.069,6.546-6.069h6.385c4.054-0.105,6.282-2.363,6.24-5.229   c-0.041-2.866-1.591-5.216-5.167-5.151H23.679C-0.4,2.575,0.342,20.363,0.755,24.486c0.02,0.208-0.015,0.375,0,0.502v0.025   l0.011,15.21c-0.029,2.556,1.211,5.834,4.501,6.265c3.329,0.434,6.025-2.22,6.06-4.774v-9.788v0.084   c-0.062-7.879,5.311-3.858,5.311-3.858l23.346,22.95c1.842,1.843,6.8,3.308,9.362,0.711C53.583,47.516,49.821,43.637,47.979,41.795   z\"></path>\n        <path d=\"M0.755,26.555c0,0,0.024-0.099,0-0.277v-0.004V26.555z\"></path>\n      </g>\n      <g class=\"arrow arrow-top-end\">\n        <path d=\"M89.483,50.518l21.504-21.512c6.034-3.995,6.07,6.546,6.07,6.546v6.385c0.104,4.055,2.361,6.281,5.228,6.24   c2.867-0.04,5.217-1.59,5.152-5.167V26.219c1.266-24.08-16.521-23.337-20.645-22.924c-0.206,0.02-0.374-0.015-0.503,0h-0.024   l-15.21,0.011c-2.557-0.029-5.834,1.211-6.265,4.501c-0.436,3.329,2.219,6.025,4.773,6.06h9.789H99.27   c7.879-0.062,3.858,5.311,3.858,5.311L80.177,42.524c-1.842,1.842-3.309,6.801-0.711,9.363   C83.764,56.123,87.642,52.362,89.483,50.518z\"></path>\n        <path d=\"M104.723,3.294c0,0,0.101,0.024,0.279,0h0.003H104.723z\"></path>\n      </g>\n      <g class=\"arrow arrow-bottom-end\">\n        <path d=\"M80.759,88.376l21.514,21.505c3.995,6.035-6.546,6.068-6.546,6.068H89.34c-4.054,0.106-6.282,2.364-6.24,5.23   c0.041,2.863,1.591,5.214,5.167,5.149h16.792c24.08,1.269,23.337-16.521,22.924-20.642c-0.02-0.21,0.017-0.377,0-0.503v-0.025   l-0.012-15.21c0.031-2.557-1.209-5.834-4.501-6.265c-3.327-0.436-6.023,2.219-6.06,4.772v9.79v-0.084   c0.062,7.879-5.312,3.856-5.312,3.856L88.753,79.068c-1.843-1.841-6.8-3.308-9.362-0.709   C75.153,82.656,78.916,86.534,80.759,88.376z\"></path>\n        <path d=\"M127.982,103.617c0,0-0.022,0.098,0,0.276v0.006V103.617z\"></path>\n      </g>\n      <g class=\"arrow arrow-bottom-start\">\n        <path d=\"M43.481,79.65l-21.503,21.514c-6.035,3.995-6.07-6.547-6.07-6.547v-6.384c-0.104-4.054-2.362-6.283-5.229-6.241   c-2.865,0.041-5.215,1.592-5.151,5.168v16.792c-1.267,24.078,16.521,23.338,20.643,22.924c0.208-0.02,0.375,0.015,0.503,0h0.025   l15.21-0.011c2.557,0.028,5.833-1.213,6.264-4.501c0.436-3.33-2.219-6.026-4.773-6.06h-9.789h0.084   c-7.879,0.062-3.857-5.312-3.857-5.312l22.949-23.347c1.843-1.844,3.31-6.8,0.711-9.363C49.201,74.045,45.323,77.809,43.481,79.65z\"></path>\n        <path d=\"M28.242,126.876c0,0-0.1-0.024-0.278,0h-0.004H28.242z\"></path>\n      </g>\n    </svg>\n      ", this.shadowRoot.appendChild(e.content.cloneNode(!0));
+		}
+		attributeChangedCallback(e, n, i) {
+			"state" === e && (this.#B = this.#H(i), this.#A && (this.#A.ariaLabel = a.get(t.i18n, "exit" === this.#B ? "exitFullscreen" : "enterFullscreen")));
+		}
+		#H(e) {
+			return "exit" === e ? "exit" : "enter";
+		}
+	};
+	customElements.get("jb-fullscreen-icon") || window.customElements.define("jb-fullscreen-icon", l);
+	function d(e, t, n) {
+		const i = n.autoModeVariableName ? `${n.autoModeVariableName}: auto;` : "";
+		if (null === t) {
+			const t = `\n    ${n.selector}{\n      display:grid;\n      grid-auto-columns: 1fr;\n      grid-auto-flow: column;\n      grid-template-rows: 1fr;\n      ${i}\n    }\n  `;
+			return e.replaceSync(t), e;
+		}
+		let a = "";
+		const r = t.map((e) => `${e.name}`).join(" ");
+		t.forEach((e) => {
+			null != e.size || null != e.size ? "number" == typeof e.size ? a += ` ${e.size}px` : a += ` ${e.size}` : a += " 1fr";
+		});
+		const s = `\n    ${n.selector}{\n      display:grid;\n      grid-template-columns: ${a};\n      grid-template-areas: "${r}"\n    }\n  `;
+		return e.replaceSync(s), e;
+	}
+	var h = class extends HTMLElement {
+		#A;
+		#e;
+		#$ = new CSSStyleSheet();
+		#F = [];
+		#q = !1;
+		get isOpen() {
+			return this.#q;
+		}
+		set isOpen(e) {
+			this.#q = e, this.#A && (this.#A.ariaExpanded = e ? "true" : "false"), this.#e.expandWrapper.setAttribute("aria-hidden", e ? "false" : "true"), e ? this.#e.expandWrapper.classList.remove("--hidden") : this.#e.expandWrapper.classList.add("--hidden");
+		}
+		get rowTemplate() {
+			return this.#F;
+		}
+		set rowTemplate(e) {
+			this.#F = e, d(this.#$, e, {
+				selector: ".grid-row",
+				autoModeVariableName: "--jb-row-grid-mode"
+			});
+		}
+		constructor() {
+			super(), "function" == typeof this.attachInternals && (this.#A = this.attachInternals(), this.#A.role = "row"), this.#l();
+		}
+		#l() {
+			const e = this.attachShadow({
+				mode: "open",
+				delegatesFocus: !0,
+				clonable: !0,
+				serializable: !0
+			});
+			e.adoptedStyleSheets = [this.#$], (0, n.registerDefaultVariables)(), this.#d(), this.#e = { expandWrapper: e.querySelector(".expand-wrapper") }, d(this.#$, null, {
+				selector: ".grid-row",
+				autoModeVariableName: "--jb-row-grid-mode"
+			}), this.#h();
+		}
+		#d() {
+			const e = document.createElement("template");
+			e.innerHTML = "<style>:host{--bg-color:var(--jb-row-bg-color,var(--jb-white));--bg-color-even:var(--jb-row-bg-color-even,var(--jb-neutral-10));--bg-color-even-tablet:var(--jb-row-bg-color-even-tablet,var(--bg-color));--expand-border-color:var(--jb-row-expand-border-color,#ebebeb);--shadow-color:var(--jb-row-shadow-color,#d8d8d8);--border-radius:var(--jb-row-border-radius,var(--jb-radius));--expand-padding-block:var(--jb-row-expand-padding-block,1rem);--expand-padding-inline:var(--jb-row-expand-padding-inline,2rem)} :host{background-color:var(--bg-color);width:100%;display:block}:host(:nth-of-type(2n)){background:var(--bg-color-even)}@media (max-width:48rem){:host(:nth-of-type(2n)){background:var(--bg-color-even-tablet)}}.jb-row-web-component .grid-row{box-sizing:border-box;grid-auto-rows:minmax(3rem,auto);width:100%}@media (max-width:48rem){.jb-row-web-component .grid-row{border-radius:var(--border-radius);box-shadow:0px 0px 1px 0px var(--shadow-color);grid-template-rows:auto;grid-template-columns:auto!important}}.jb-row-web-component .expand-wrapper{interpolate-size:allow-keywords;opacity:1;height:auto;transition:all .3s;overflow:clip}.jb-row-web-component .expand-wrapper.--hidden{opacity:0;height:0;min-height:0;padding-block:0}.jb-row-web-component .expand-wrapper slot[name=expand]::slotted(*){width:100%;min-height:4rem;padding-block:var(--expand-padding-block);padding-inline:var(--expand-padding-inline);border-bottom:1px solid var(--expand-border-color);box-sizing:border-box;overflow:auto}</style>\n\n  <div class=\"jb-row-web-component\">\n    <div class=\"grid-row\" part=\"row\">\n      <slot name=\"cell\"></slot>\n    </div>\n    <div class=\"expand-wrapper --hidden\" role=\"region\" aria-hidden=\"true\">\n      <slot name=\"expand\"></slot>\n    </div>\n  </div>\n      ", this.shadowRoot.appendChild(e.content.cloneNode(!0));
+		}
+		connectedCallback() {}
+		#h() {}
+	};
+	customElements.get("jb-row") || window.customElements.define("jb-row", h);
+	var p = class extends HTMLElement {
+		#$ = new CSSStyleSheet();
+		#V = [];
+		get headerTemplate() {
+			return this.#V;
+		}
+		set headerTemplate(e) {
+			this.#V = e, d(this.#$, e, { selector: ".table-header-row" });
+		}
+		constructor() {
+			super(), this.#l();
+		}
+		#l() {
+			this.attachShadow({
+				mode: "open",
+				delegatesFocus: !0,
+				clonable: !0,
+				serializable: !0
+			}).adoptedStyleSheets = [this.#$], (0, n.registerDefaultVariables)(), this.#d(), d(this.#$, null, { selector: ".table-header-row" });
+		}
+		#d() {
+			const e = document.createElement("template");
+			e.innerHTML = "<style>:host{box-sizing:border-box;width:100%;height:100%;display:block}.jb-table-header-web-component{width:100%;height:100%}.jb-table-header-web-component .table-header-row{box-sizing:border-box;width:100%;height:100%;line-height:2rem}@media (max-width:48rem){.jb-table-header-web-component .table-header-row{display:none}}.jb-table-header-web-component .table-header-row ::slotted(*){box-sizing:border-box;min-width:0}</style>\n\n  <div class=\"jb-table-header-web-component\">\n    <div class=\"table-header-row\" part=\"row\" role=\"row\">\n      <slot></slot>\n    </div>\n  </div>\n      ", this.shadowRoot.appendChild(e.content.cloneNode(!0));
+		}
+	};
+	customElements.get("jb-table-header") || window.customElements.define("jb-table-header", p);
+	var c = class extends HTMLElement {
+		#A;
+		#e;
+		#$ = new CSSStyleSheet();
+		get name() {
+			return this.getAttribute("name") || "";
+		}
+		set name(e) {
+			this.setAttribute("name", e), this.#J(e);
+		}
+		get sortable() {
+			return this.hasAttribute("sortable");
+		}
+		set sortable(e) {
+			e ? this.setAttribute("sortable", "") : this.removeAttribute("sortable");
+		}
+		get sort() {
+			return this.getAttribute("sort");
+		}
+		set sort(e) {
+			e ? (this.setAttribute("sort", e), this.#A && (this.#A.ariaSort = "asc" === e ? "ascending" : "descending")) : (this.removeAttribute("sort"), this.#A && (this.#A.ariaSort = "none"));
+		}
+		static get observedAttributes() {
+			return ["name"];
+		}
+		constructor() {
+			super(), "function" == typeof this.attachInternals && (this.#A = this.attachInternals(), this.#A.role = "columnheader", this.#A.ariaSort = "none"), this.#l();
+		}
+		#l() {
+			const e = this.attachShadow({
+				mode: "open",
+				delegatesFocus: !0,
+				clonable: !0,
+				serializable: !0
+			});
+			e.adoptedStyleSheets = [this.#$], (0, n.registerDefaultVariables)(), this.#d(), this.#e = { wrapper: e.querySelector(".column-header") }, this.#J(this.name), this.#h();
+		}
+		#d() {
+			const e = document.createElement("template");
+			e.innerHTML = "<style>:host{box-sizing:border-box;width:100%;max-width:100%;height:100%;display:block}.column-header{all:unset;box-sizing:border-box;width:100%;height:100%;min-height:2rem;color:inherit;font:inherit;align-items:center;padding:0 1rem;display:flex;overflow:hidden}:host([sortable]) .column-header{cursor:pointer}.caption-wrapper{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.sort-icon-wrapper{flex:none;height:1rem;margin-inline-start:4px;display:none}:host([sort]) .sort-icon-wrapper{display:inline-flex}.sort-icon-wrapper svg{fill:#1e201d;width:1rem;height:1rem;margin-top:1px}:host([sort=asc]) .sort-icon-wrapper svg{transition:all .2s ease-out;transform:rotate(0)}:host([sort=desc]) .sort-icon-wrapper svg{transition:all .2s ease-out;transform:rotate(180deg)}</style>\n\n    <button class=\"column-header\" part=\"button\" type=\"button\">\n      <span class=\"caption-wrapper\" part=\"caption\">\n        <slot name=\"title\"></slot>\n      </span>\n      <span class=\"sort-icon-wrapper\" part=\"sort-icon\" aria-hidden=\"true\">\n        <svg version=\"1.1\" x=\"0px\" y=\"0px\" viewBox=\"0 0 31.479 31.479\">\n          <path d=\"M26.477,10.274c0.444,0.444,0.444,1.143,0,1.587c-0.429,0.429-1.143,0.429-1.571,0l-8.047-8.047  v26.555c0,0.619-0.492,1.111-1.111,1.111c-0.619,0-1.127-0.492-1.127-1.111V3.813l-8.031,8.047c-0.444,0.429-1.159,0.429-1.587,0  c-0.444-0.444-0.444-1.143,0-1.587l9.952-9.952c0.429-0.429,1.143-0.429,1.571,0L26.477,10.274z\" />\n        </svg>\n      </span>\n    </button>\n      ", this.shadowRoot.appendChild(e.content.cloneNode(!0));
+		}
+		attributeChangedCallback(e, t, n) {
+			"name" === e && this.#J(n || "");
+		}
+		#h() {
+			this.#e.wrapper.addEventListener("click", () => this.#O());
+		}
+		#O() {
+			if (!this.sortable) return;
+			const e = "asc" === this.sort ? "desc" : "asc";
+			this.sort = e, this.dispatchEvent(new CustomEvent("sort", {
+				bubbles: !0,
+				composed: !0,
+				detail: {
+					name: this.name,
+					sort: e
+				}
+			}));
+		}
+		#J(e) {
+			this.#$.replace(`\n      :host{ grid-area:${e || "none"}}\n    `);
+		}
+	};
+	customElements.get("jb-col-header") || window.customElements.define("jb-col-header", c);
+	var m = class extends HTMLElement {
+		#A;
+		#e;
+		#$ = new CSSStyleSheet();
+		get name() {
+			return this.getAttribute("name") || "";
+		}
+		set name(e) {
+			this.setAttribute("name", e), this.#$.replace(`\n      :host{ grid-area:${e || "none"}}\n      @container (style(--jb-row-grid-mode: auto)) {\n        :host{ grid-area:auto }\n      }\n    `);
+		}
+		constructor() {
+			super(), "function" == typeof this.attachInternals && (this.#A = this.attachInternals(), this.#A.role = "cell"), this.#l();
+		}
+		#l() {
+			this.attachShadow({
+				mode: "open",
+				delegatesFocus: !0,
+				clonable: !0,
+				serializable: !0
+			}).adoptedStyleSheets = [this.#$], (0, n.registerDefaultVariables)(), this.#d(), this.#e = {}, this.#h();
+		}
+		#d() {
+			const e = document.createElement("template");
+			e.innerHTML = "<style>:host{box-sizing:border-box;grid-template-rows:minmax(0,auto);grid-template-columns:auto;grid-auto-columns:max-content;grid-auto-flow:column;justify-content:start;align-items:center;gap:.5rem;width:100%;max-width:100%;height:100%;padding:.25rem 1rem;display:grid;overflow-x:hidden}:host([ellipsis]:not([ellipsis=\"1\"]):not([ellipsis=\"\"])){-webkit-line-clamp:attr(max-line type(<integer>), 1);line-clamp:attr(max-line type(<integer>), 1);box-orient:vertical;-webkit-box-orient:vertical;align-content:center;height:fit-content;display:-webkit-box;overflow:hidden}:host(:where([ellipsis=\"\"],[ellipsis=\"1\"])){text-overflow:ellipsis;white-space:nowrap;align-content:center;display:block;overflow:hidden}</style>\n\n    <slot></slot>\n      ", this.shadowRoot.appendChild(e.content.cloneNode(!0));
+		}
+		connectedCallback() {}
+		#h() {}
+	};
+	customElements.get("jb-cell") || window.customElements.define("jb-cell", m);
+	var g = class extends HTMLElement {
+		#W;
+		constructor() {
+			super(), this.#l();
+		}
+		#l() {
+			const e = this.attachShadow({
+				mode: "open",
+				delegatesFocus: !0,
+				clonable: !0,
+				serializable: !0
+			});
+			(0, n.registerDefaultVariables)(), this.#d(), this.#W = e.querySelector(".toggle-button"), this.#h();
+		}
+		#d() {
+			const e = `<style>:host{width:1.5rem;height:1.5rem;display:block}.toggle-button{all:unset;box-sizing:border-box;cursor:pointer;width:100%;height:100%;display:block}.toggle-button:focus-visible{outline:2px solid var(--jb-grid-focus-ring-color,Highlight);outline-offset:2px}:host([open]) .arrow-icon{rotate:-90deg}:host([open]) .arrow-icon:dir(ltr){rotate:90deg}.arrow-icon{width:100%;height:100%;transition:all .3s}.arrow-icon:dir(ltr){transform:rotateY(180deg)}</style>\n\n    <button class="toggle-button" type="button" aria-label="${a.get(t.i18n, "toggleRowDetails")}" aria-expanded="false">\n      <slot>\n        <svg class="arrow-icon" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">\n          <path d="M35,10 L15,25 L35,40 Z"\n          fill="currentColor"\n          stroke="currentColor"\n          stroke-width="6"\n          stroke-linejoin="round" />\n        </svg>\n      </slot>\n    </button>\n      `, n = document.createElement("template");
+			n.innerHTML = e, this.shadowRoot.appendChild(n.content.cloneNode(!0));
+		}
+		#G = null;
+		connectedCallback() {
+			this.#G = this.#Y(this), this.#G?.isOpen && (this.setAttribute("open", ""), this.#W.setAttribute("aria-expanded", "true"));
+		}
+		#Y(e) {
+			return e && e.parentElement ? e.parentElement instanceof h ? e.parentElement : this.#Y(this.parentElement) : null;
+		}
+		#h() {
+			this.#W.addEventListener("click", () => this.toggle());
+		}
+		toggle() {
+			if (this.#G) {
+				const e = !this.#G?.isOpen;
+				this.#G.isOpen = e, e ? this.setAttribute("open", "") : this.removeAttribute("open"), this.#W.setAttribute("aria-expanded", e ? "true" : "false");
+			}
+		}
+	};
+	customElements.get("jb-expand-toggle") || window.customElements.define("jb-expand-toggle", g), e.JBCellWebComponent = m, e.JBColumnHeaderWebComponent = c, e.JBExpandToggleWebComponent = g, e.JBFullscreenIconWebComponent = l, e.JBPaginationInfoWebComponent = s, e.JBPaginationWebComponent = r, e.JBRefreshIconWebComponent = o, e.JBRowWebComponent = h, e.JBTableHeaderWebComponent = p;
+});
+
 //# sourceMappingURL=index.umd.js.map