jb-grid 0.4.1 → 0.5.0

package/web-component/dist/index.js

@@ -1,2 +1,562 @@
-import{registerDefaultVariables as t}from"jb-core/theme";import{i18n as e}from"jb-core/i18n";import{enToFaDigits as i}from"jb-core";function n(t,e,i,n){if("a"===i&&!n)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof e?t!==e||!n:!e.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===i?n:"a"===i?n.call(t):n?n.value:e.get(t)}function a(t,e,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 e?t!==e||!a:!e.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===n?a.call(t,i):a?a.value=i:e.set(t,i),i}var s,o,r,l,h,p,d,c,m,g,w,f,u,b,x,v,y,j,k,E,M=class extends HTMLElement{get pageIndex(){return n(this,r,"f")}set pageIndex(t){n(this,s,"m",u).call(this,t,!1)}get max(){return n(this,h,"f")}set max(t){a(this,h,t,"f"),this.pageIndex>t&&n(this,s,"m",y).call(this,t,!1),n(this,o,"f").nav.last.disabled=n(this,h,"f")==1/0}get min(){return n(this,l,"f")}set min(t){a(this,l,t,"f"),n(this,r,"f")<t&&n(this,s,"m",y).call(this,t,!1),n(this,o,"f").nav.first.disabled=n(this,l,"f")==1/0}constructor(){super(),s.add(this),o.set(this,void 0),r.set(this,1),l.set(this,1),h.set(this,1/0),p.set(this,3),this.showPersianNumber="arabext"==e.locale.numberingSystem,n(this,s,"m",c).call(this)}connectedCallback(){}};o=new WeakMap,r=new WeakMap,l=new WeakMap,h=new WeakMap,p=new WeakMap,s=new WeakSet,d=function(){return n(this,p,"f")+2},c=function(){const e=this.attachShadow({mode:"open",delegatesFocus:!0,clonable:!0,serializable:!0});t(),n(this,s,"m",m).call(this),a(this,o,{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"),n(this,s,"m",g).call(this),n(this,s,"m",E).call(this),this.max=1/0,this.min=1},m=function(){const t=document.createElement("template");t.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(t.content.cloneNode(!0))},g=function(){n(this,o,"f").nav.next.addEventListener("click",()=>n(this,s,"m",w).call(this,!0)),n(this,o,"f").nav.prev.addEventListener("click",()=>n(this,s,"m",f).call(this,!0)),n(this,o,"f").nav.last.addEventListener("click",()=>{n(this,s,"m",u).call(this,n(this,h,"f"),!0)}),n(this,o,"f").nav.first.addEventListener("click",()=>{n(this,s,"m",u).call(this,n(this,l,"f"),!0)})},w=function(t){if(n(this,r,"f")>n(this,h,"f")-1)return;const e=n(this,r,"f")+1,i=n(this,s,"m",x).call(this,e+2);n(this,o,"f").index.list.shift()?.remove(),n(this,o,"f").index.wrapper.append(i),n(this,o,"f").index.list.push(i),n(this,s,"m",y).call(this,e,t)},f=function(t){if(n(this,r,"f")<n(this,l,"f")+1)return;const e=n(this,r,"f")-1,i=n(this,s,"m",x).call(this,e-2);n(this,o,"f").index.list.pop()?.remove(),n(this,o,"f").index.list.unshift(i),n(this,o,"f").index.wrapper.prepend(i),n(this,s,"m",y).call(this,e,t)},u=function(t,e){if(n(this,r,"f")==t)return;const i=t-n(this,r,"f");Math.abs(i)>1?(n(this,s,"m",y).call(this,t,e),n(this,s,"m",E).call(this)):i>0?n(this,s,"m",w).call(this,e):n(this,s,"m",f).call(this,e)},b=function(t){if(n(this,o,"f").index.list.find(e=>e.pageIndex==t.pageIndex))return;let e="end";if(0==n(this,o,"f").index.list.length||n(this,o,"f").index.list[n(this,o,"f").index.list.length-1]?.pageIndex<t.pageIndex)n(this,o,"f").index.list.push(t),n(this,o,"f").index.wrapper.append(t),e="start";else if(n(this,o,"f").index.list[0]?.pageIndex>t.pageIndex)n(this,o,"f").index.list.unshift(t),n(this,o,"f").index.wrapper.prepend(t);else{const e=n(this,o,"f").index.list.findIndex(e=>e?.pageIndex>t.pageIndex);n(this,o,"f").index.wrapper.insertBefore(t,n(this,o,"f").index.list[e]),n(this,o,"f").index.list.splice(e,0,t)}n(this,o,"f").index.list.length>n(this,s,"a",d)&&("end"==e?n(this,o,"f").index.list.pop()?.remove():n(this,o,"f").index.list.shift()?.remove())},x=function(t){const e=n(this,l,"f")>t||n(this,h,"f")<t,a=document.createElement("div");return a.classList.add("page-index",e?"empty":"not-empty"),a.dataset.index=`${t}`,a.pageIndex=t,a.addEventListener("click",t=>{n(this,s,"m",v).call(this,a)}),e?a.isEmpty=!0:(a.isEmpty=!1,a.innerHTML=`${this.showPersianNumber?i(t):t}`),a},v=function(t){t.isEmpty||n(this,s,"m",u).call(this,t.pageIndex,!0)},y=function(t,e){a(this,r,t,"f"),n(this,s,"m",j).call(this,t),e&&n(this,s,"m",k).call(this)},j=function(t){n(this,o,"f").index.wrapper.querySelector(".current")?.classList.remove("current"),n(this,o,"f").index.list.forEach(e=>{e.pageIndex==t&&e.classList.add("current")})},k=function(){const t=new Event("change",{cancelable:!1,composed:!0,bubbles:!0});this.dispatchEvent(t)},E=function(){n(this,s,"m",b).call(this,n(this,s,"m",x).call(this,n(this,r,"f")-2)),n(this,s,"m",b).call(this,n(this,s,"m",x).call(this,n(this,r,"f")-1)),n(this,s,"m",b).call(this,n(this,s,"m",x).call(this,n(this,r,"f"))),n(this,s,"m",b).call(this,n(this,s,"m",x).call(this,n(this,r,"f")+1)),n(this,s,"m",b).call(this,n(this,s,"m",x).call(this,n(this,r,"f")+2)),n(this,s,"m",j).call(this,n(this,r,"f"))};!customElements.get("jb-pagination")&&window.customElements.define("jb-pagination",M);var S,L,z,W,T,I,C,A;function H(t,e){if(null===e){const e="\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 t.replaceSync(e),t}let i="";const n=e.map(t=>`${t.name}`).join(" ");e.forEach(t=>{null!=t.size||null!=t.size?"number"==typeof t.size?i+=` ${t.size}px`:i+=` ${t.size}`:i+=" 1fr"});const a=`\n    .grid-row{\n      display:grid;\n      grid-template-columns: ${i};\n      grid-template-areas: "${n}"\n    }\n  `;return t.replaceSync(a),t}var q=class extends HTMLElement{get isOpen(){return n(this,T,"f")}set isOpen(t){a(this,T,t,"f"),t?n(this,L,"f").expandWrapper.classList.remove("--hidden"):n(this,L,"f").expandWrapper.classList.add("--hidden")}get rowTemplate(){return n(this,W,"f")}set rowTemplate(t){a(this,W,t,"f"),H(n(this,z,"f"),t)}constructor(){super(),S.add(this),L.set(this,void 0),z.set(this,new CSSStyleSheet),W.set(this,[]),T.set(this,!1),n(this,S,"m",I).call(this)}connectedCallback(){}};L=new WeakMap,z=new WeakMap,W=new WeakMap,T=new WeakMap,S=new WeakSet,I=function(){const e=this.attachShadow({mode:"open",delegatesFocus:!0,clonable:!0,serializable:!0});e.adoptedStyleSheets=[n(this,z,"f")],t(),n(this,S,"m",C).call(this),a(this,L,{expandWrapper:e.querySelector(".expand-wrapper")},"f"),H(n(this,z,"f"),null),n(this,S,"m",A).call(this)},C=function(){const t=document.createElement("template");t.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(t.content.cloneNode(!0))},A=function(){};!customElements.get("jb-row")&&window.customElements.define("jb-row",q);var R,$,B,N,O,P,Y=class extends HTMLElement{get name(){return this.getAttribute("name")||""}set name(t){this.setAttribute("name",t),n(this,B,"f").replace(`\n      :host{ grid-area:${t||"none"}}\n      @container (style(--jb-row-grid-mode: auto)) {\n        :host{ grid-area:auto }\n      }\n    `)}constructor(){super(),R.add(this),$.set(this,void 0),B.set(this,new CSSStyleSheet),n(this,R,"m",N).call(this)}connectedCallback(){}};$=new WeakMap,B=new WeakMap,R=new WeakSet,N=function(){this.attachShadow({mode:"open",delegatesFocus:!0,clonable:!0,serializable:!0}).adoptedStyleSheets=[n(this,B,"f")],t(),n(this,R,"m",O).call(this),a(this,$,{},"f"),n(this,R,"m",P).call(this)},O=function(){const t=document.createElement("template");t.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(t.content.cloneNode(!0))},P=function(){};!customElements.get("jb-cell")&&window.customElements.define("jb-cell",Y);var F,Z,D,G,J,K,Q=class extends HTMLElement{constructor(){super(),F.add(this),G.set(this,null),n(this,F,"m",Z).call(this)}connectedCallback(){a(this,G,n(this,F,"m",J).call(this,this),"f"),n(this,G,"f")?.isOpen&&this.setAttribute("open","")}toggle(){if(n(this,G,"f")){const t=!n(this,G,"f")?.isOpen;n(this,G,"f").isOpen=t,t?this.setAttribute("open",""):this.removeAttribute("open")}}};G=new WeakMap,F=new WeakSet,Z=function(){this.attachShadow({mode:"open",delegatesFocus:!0,clonable:!0,serializable:!0});t(),n(this,F,"m",D).call(this),n(this,F,"m",K).call(this)},D=function(){const t=document.createElement("template");t.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(t.content.cloneNode(!0))},J=function t(e){return e&&e.parentElement?e.parentElement instanceof q?e.parentElement:n(this,F,"m",t).call(this,this.parentElement):null},K=function(){this.addEventListener("click",()=>this.toggle(),{passive:!0})};!customElements.get("jb-expand-toggle")&&window.customElements.define("jb-expand-toggle",Q);export{Y as JBCellWebComponent,Q as JBExpandToggleWebComponent,M as JBPaginationWebComponent,q as JBRowWebComponent};
+import { JBDictionary as e, i18n as t } from "jb-core/i18n";
+import { registerDefaultVariables as n } from "jb-core/theme";
+import { enToFaDigits as i } from "jb-core";
+const a = new e({
+	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.locale.numberingSystem, this.#l();
+	}
+	#l() {
+		const e = this.attachShadow({
+			mode: "open",
+			delegatesFocus: !0,
+			clonable: !0,
+			serializable: !0
+		});
+		n(), 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, "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, "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, "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, "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, "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 ? i(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 = "";
+	#L = !1;
+	get pageSize() {
+		return this.#v;
+	}
+	set pageSize(e) {
+		this.#v = e, this.#P();
+	}
+	get pageSizes() {
+		return this.#f;
+	}
+	set pageSizes(e) {
+		this.#f = e, this.#C();
+	}
+	get startItemIndex() {
+		return this.#I;
+	}
+	set startItemIndex(e) {
+		this.#I = e, this.#M();
+	}
+	get endItemIndex() {
+		return this.#y;
+	}
+	set endItemIndex(e) {
+		this.#y = e, this.#M();
+	}
+	get totalItemsCount() {
+		return this.#S;
+	}
+	set totalItemsCount(e) {
+		this.#S = e, this.#M();
+	}
+	get pageItemCountTitle() {
+		return this.#E;
+	}
+	set pageItemCountTitle(e) {
+		this.#E = e, this.#T();
+	}
+	get fromLabel() {
+		return this.#j;
+	}
+	set fromLabel(e) {
+		this.#j = e, this.#T();
+	}
+	get currentAvailableItemTitle() {
+		return this.#z;
+	}
+	set currentAvailableItemTitle(e) {
+		this.#z = e, this.#T();
+	}
+	get showPersianNumber() {
+		return this.#L;
+	}
+	set showPersianNumber(e) {
+		this.#L = e, this.#C(), this.#M();
+	}
+	constructor() {
+		super(), this.#l();
+	}
+	#l() {
+		const e = this.attachShadow({
+			mode: "open",
+			delegatesFocus: !0,
+			clonable: !0,
+			serializable: !0
+		});
+		n(), 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.#C(), this.#T(), this.#M();
+	}
+	#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 }
+			}));
+		});
+	}
+	#C() {
+		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.#P());
+	}
+	#P() {
+		this.#e && (this.#e.pageSizeSelect.value = this.#v.toString());
+	}
+	#T() {
+		this.#e && (this.#e.pageSizeSection.title = this.#E, this.#e.fromLabel.textContent = ` ${this.#j}`, this.#e.totalItemsCount.title = this.#z);
+	}
+	#M() {
+		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.#L ? i(e) : e;
+	}
+};
+customElements.get("jb-pagination-info") || window.customElements.define("jb-pagination-info", s);
+var o = class extends HTMLElement {
+	#A;
+	#N;
+	#R = null;
+	#H = 400;
+	constructor() {
+		super(), "function" == typeof this.attachInternals && (this.#A = this.attachInternals(), this.#A.role = "img", this.#A.ariaLabel = a.get(t, "refreshData"), this.#A.ariaBusy = "false"), this.#l();
+	}
+	#l() {
+		const e = this.attachShadow({
+			mode: "open",
+			delegatesFocus: !0,
+			clonable: !0,
+			serializable: !0
+		});
+		n(), 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.#H,
+			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.#H) + 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 {
+	#$ = "enter";
+	#A;
+	get state() {
+		return this.#$;
+	}
+	set state(e) {
+		this.#$ = e, this.#A && (this.#A.ariaLabel = a.get(t, "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
+		}), n(), this.#d(), this.state = this.#D(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.#$ = this.#D(i), this.#A && (this.#A.ariaLabel = a.get(t, "exit" === this.#$ ? "exitFullscreen" : "enterFullscreen")));
+	}
+	#D(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;
+	#F = new CSSStyleSheet();
+	#q = [];
+	#B = !1;
+	get isOpen() {
+		return this.#B;
+	}
+	set isOpen(e) {
+		this.#B = 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.#q;
+	}
+	set rowTemplate(e) {
+		this.#q = e, d(this.#F, 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.#F], n(), this.#d(), this.#e = { expandWrapper: e.querySelector(".expand-wrapper") }, d(this.#F, 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 {
+	#F = new CSSStyleSheet();
+	#O = [];
+	get headerTemplate() {
+		return this.#O;
+	}
+	set headerTemplate(e) {
+		this.#O = e, d(this.#F, e, { selector: ".table-header-row" });
+	}
+	constructor() {
+		super(), this.#l();
+	}
+	#l() {
+		this.attachShadow({
+			mode: "open",
+			delegatesFocus: !0,
+			clonable: !0,
+			serializable: !0
+		}).adoptedStyleSheets = [this.#F], n(), this.#d(), d(this.#F, 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;
+	#F = new CSSStyleSheet();
+	get name() {
+		return this.getAttribute("name") || "";
+	}
+	set name(e) {
+		this.setAttribute("name", e), this.#V(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.#F], n(), this.#d(), this.#e = { wrapper: e.querySelector(".column-header") }, this.#V(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.#V(n || "");
+	}
+	#h() {
+		this.#e.wrapper.addEventListener("click", () => this.#Y());
+	}
+	#Y() {
+		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
+			}
+		}));
+	}
+	#V(e) {
+		this.#F.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;
+	#F = new CSSStyleSheet();
+	get name() {
+		return this.getAttribute("name") || "";
+	}
+	set name(e) {
+		this.setAttribute("name", e), this.#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(), "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.#F], n(), 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 {
+	#G;
+	constructor() {
+		super(), this.#l();
+	}
+	#l() {
+		const e = this.attachShadow({
+			mode: "open",
+			delegatesFocus: !0,
+			clonable: !0,
+			serializable: !0
+		});
+		n(), this.#d(), this.#G = 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, "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));
+	}
+	#W = null;
+	connectedCallback() {
+		this.#W = this.#Z(this), this.#W?.isOpen && (this.setAttribute("open", ""), this.#G.setAttribute("aria-expanded", "true"));
+	}
+	#Z(e) {
+		return e && e.parentElement ? e.parentElement instanceof h ? e.parentElement : this.#Z(this.parentElement) : null;
+	}
+	#h() {
+		this.#G.addEventListener("click", () => this.toggle());
+	}
+	toggle() {
+		if (this.#W) {
+			const e = !this.#W?.isOpen;
+			this.#W.isOpen = e, e ? this.setAttribute("open", "") : this.removeAttribute("open"), this.#G.setAttribute("aria-expanded", e ? "true" : "false");
+		}
+	}
+};
+customElements.get("jb-expand-toggle") || window.customElements.define("jb-expand-toggle", g);
+export { m as JBCellWebComponent, c as JBColumnHeaderWebComponent, g as JBExpandToggleWebComponent, l as JBFullscreenIconWebComponent, s as JBPaginationInfoWebComponent, r as JBPaginationWebComponent, o as JBRefreshIconWebComponent, h as JBRowWebComponent, p as JBTableHeaderWebComponent };
+
 //# sourceMappingURL=index.js.map