jb-grid 0.4.0 → 0.5.0

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

@@ -1,2 +1,560 @@
-var e=Object.create,t=Object.defineProperty,i=Object.getOwnPropertyDescriptor,n=Object.getOwnPropertyNames,a=Object.getPrototypeOf,s=Object.prototype.hasOwnProperty,o=(o,r,l)=>(l=null!=o?e(a(o)):{},((e,a,o,r)=>{if(a&&"object"==typeof a||"function"==typeof a)for(var l,h=n(a),p=0,d=h.length;p<d;p++)l=h[p],s.call(e,l)||l===o||t(e,l,{get:(e=>a[e]).bind(null,l),enumerable:!(r=i(a,l))||r.enumerable});return e})(!r&&o&&o.__esModule?l:t(l,"default",{value:o,enumerable:!0}),o));const r=o(require("jb-core/theme")),l=o(require("jb-core/i18n")),h=o(require("jb-core"));function p(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 d(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}var c,m,g,f,w,u,b,x,v,y,j,k,E,M,S,L,W,z,C,T,I=class extends HTMLElement{get pageIndex(){return p(this,g,"f")}set pageIndex(e){p(this,c,"m",E).call(this,e,!1)}get max(){return p(this,w,"f")}set max(e){d(this,w,e,"f"),this.pageIndex>e&&p(this,c,"m",W).call(this,e,!1),p(this,m,"f").nav.last.disabled=p(this,w,"f")==1/0}get min(){return p(this,f,"f")}set min(e){d(this,f,e,"f"),p(this,g,"f")<e&&p(this,c,"m",W).call(this,e,!1),p(this,m,"f").nav.first.disabled=p(this,f,"f")==1/0}constructor(){super(),c.add(this),m.set(this,void 0),g.set(this,1),f.set(this,1),w.set(this,1/0),u.set(this,3),this.showPersianNumber="arabext"==l.i18n.locale.numberingSystem,p(this,c,"m",x).call(this)}connectedCallback(){}};m=new WeakMap,g=new WeakMap,f=new WeakMap,w=new WeakMap,u=new WeakMap,c=new WeakSet,b=function(){return p(this,u,"f")+2},x=function(){const e=this.attachShadow({mode:"open",delegatesFocus:!0,clonable:!0,serializable:!0});(0,r.registerDefaultVariables)(),p(this,c,"m",v).call(this),d(this,m,{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"),p(this,c,"m",y).call(this),p(this,c,"m",T).call(this),this.max=1/0,this.min=1},v=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))},y=function(){p(this,m,"f").nav.next.addEventListener("click",()=>p(this,c,"m",j).call(this,!0)),p(this,m,"f").nav.prev.addEventListener("click",()=>p(this,c,"m",k).call(this,!0)),p(this,m,"f").nav.last.addEventListener("click",()=>{p(this,c,"m",E).call(this,p(this,w,"f"),!0)}),p(this,m,"f").nav.first.addEventListener("click",()=>{p(this,c,"m",E).call(this,p(this,f,"f"),!0)})},j=function(e){if(p(this,g,"f")>p(this,w,"f")-1)return;const t=p(this,g,"f")+1,i=p(this,c,"m",S).call(this,t+2);p(this,m,"f").index.list.shift()?.remove(),p(this,m,"f").index.wrapper.append(i),p(this,m,"f").index.list.push(i),p(this,c,"m",W).call(this,t,e)},k=function(e){if(p(this,g,"f")<p(this,f,"f")+1)return;const t=p(this,g,"f")-1,i=p(this,c,"m",S).call(this,t-2);p(this,m,"f").index.list.pop()?.remove(),p(this,m,"f").index.list.unshift(i),p(this,m,"f").index.wrapper.prepend(i),p(this,c,"m",W).call(this,t,e)},E=function(e,t){if(p(this,g,"f")==e)return;const i=e-p(this,g,"f");Math.abs(i)>1?(p(this,c,"m",W).call(this,e,t),p(this,c,"m",T).call(this)):i>0?p(this,c,"m",j).call(this,t):p(this,c,"m",k).call(this,t)},M=function(e){if(p(this,m,"f").index.list.find(t=>t.pageIndex==e.pageIndex))return;let t="end";if(0==p(this,m,"f").index.list.length||p(this,m,"f").index.list[p(this,m,"f").index.list.length-1]?.pageIndex<e.pageIndex)p(this,m,"f").index.list.push(e),p(this,m,"f").index.wrapper.append(e),t="start";else if(p(this,m,"f").index.list[0]?.pageIndex>e.pageIndex)p(this,m,"f").index.list.unshift(e),p(this,m,"f").index.wrapper.prepend(e);else{const t=p(this,m,"f").index.list.findIndex(t=>t?.pageIndex>e.pageIndex);p(this,m,"f").index.wrapper.insertBefore(e,p(this,m,"f").index.list[t]),p(this,m,"f").index.list.splice(t,0,e)}p(this,m,"f").index.list.length>p(this,c,"a",b)&&("end"==t?p(this,m,"f").index.list.pop()?.remove():p(this,m,"f").index.list.shift()?.remove())},S=function(e){const t=p(this,f,"f")>e||p(this,w,"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=>{p(this,c,"m",L).call(this,i)}),t?i.isEmpty=!0:(i.isEmpty=!1,i.innerHTML=`${this.showPersianNumber?(0,h.enToFaDigits)(e):e}`),i},L=function(e){e.isEmpty||p(this,c,"m",E).call(this,e.pageIndex,!0)},W=function(e,t){d(this,g,e,"f"),p(this,c,"m",z).call(this,e),t&&p(this,c,"m",C).call(this)},z=function(e){p(this,m,"f").index.wrapper.querySelector(".current")?.classList.remove("current"),p(this,m,"f").index.list.forEach(t=>{t.pageIndex==e&&t.classList.add("current")})},C=function(){const e=new Event("change",{cancelable:!1,composed:!0,bubbles:!0});this.dispatchEvent(e)},T=function(){p(this,c,"m",M).call(this,p(this,c,"m",S).call(this,p(this,g,"f")-2)),p(this,c,"m",M).call(this,p(this,c,"m",S).call(this,p(this,g,"f")-1)),p(this,c,"m",M).call(this,p(this,c,"m",S).call(this,p(this,g,"f"))),p(this,c,"m",M).call(this,p(this,c,"m",S).call(this,p(this,g,"f")+1)),p(this,c,"m",M).call(this,p(this,c,"m",S).call(this,p(this,g,"f")+2)),p(this,c,"m",z).call(this,p(this,g,"f"))};!customElements.get("jb-pagination")&&window.customElements.define("jb-pagination",I);var O,q,P,B,A,H,R,$;function N(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 p(this,A,"f")}set isOpen(e){d(this,A,e,"f"),e?p(this,q,"f").expandWrapper.classList.remove("--hidden"):p(this,q,"f").expandWrapper.classList.add("--hidden")}get rowTemplate(){return p(this,B,"f")}set rowTemplate(e){d(this,B,e,"f"),N(p(this,P,"f"),e)}constructor(){super(),O.add(this),q.set(this,void 0),P.set(this,new CSSStyleSheet),B.set(this,[]),A.set(this,!1),p(this,O,"m",H).call(this)}connectedCallback(){}};q=new WeakMap,P=new WeakMap,B=new WeakMap,A=new WeakMap,O=new WeakSet,H=function(){const e=this.attachShadow({mode:"open",delegatesFocus:!0,clonable:!0,serializable:!0});e.adoptedStyleSheets=[p(this,P,"f")],(0,r.registerDefaultVariables)(),p(this,O,"m",R).call(this),d(this,q,{expandWrapper:e.querySelector(".expand-wrapper")},"f"),N(p(this,P,"f"),null),p(this,O,"m",$).call(this)},R=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))},$=function(){};!customElements.get("jb-row")&&window.customElements.define("jb-row",D);var F,Y,J,V,_,Z,G=class extends HTMLElement{get name(){return this.getAttribute("name")||""}set name(e){this.setAttribute("name",e),p(this,J,"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),J.set(this,new CSSStyleSheet),p(this,F,"m",V).call(this)}connectedCallback(){}};Y=new WeakMap,J=new WeakMap,F=new WeakSet,V=function(){this.attachShadow({mode:"open",delegatesFocus:!0,clonable:!0,serializable:!0}).adoptedStyleSheets=[p(this,J,"f")],(0,r.registerDefaultVariables)(),p(this,F,"m",_).call(this),d(this,Y,{},"f"),p(this,F,"m",Z).call(this)},_=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",G);var K,Q,U,X,ee,te,ie=class extends HTMLElement{constructor(){super(),K.add(this),X.set(this,null),p(this,K,"m",Q).call(this)}connectedCallback(){d(this,X,p(this,K,"m",ee).call(this,this),"f"),p(this,X,"f")?.isOpen&&this.setAttribute("open","")}toggle(){if(p(this,X,"f")){const e=!p(this,X,"f")?.isOpen;p(this,X,"f").isOpen=e,e?this.setAttribute("open",""):this.removeAttribute("open")}}};X=new WeakMap,K=new WeakSet,Q=function(){this.attachShadow({mode:"open",delegatesFocus:!0,clonable:!0,serializable:!0});(0,r.registerDefaultVariables)(),p(this,K,"m",U).call(this),p(this,K,"m",te).call(this)},U=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))},ee=function e(t){return t&&t.parentElement?t.parentElement instanceof D?t.parentElement:p(this,K,"m",e).call(this,this.parentElement):null},te=function(){this.addEventListener("click",()=>this.toggle(),{passive:!0})};!customElements.get("jb-expand-toggle")&&window.customElements.define("jb-expand-toggle",ie),exports.JBCellWebComponent=G,exports.JBExpandToggleWebComponent=ie,exports.JBPaginationWebComponent=I,exports.JBRowWebComponent=D;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+let e = require("jb-core/i18n"), t = require("jb-core/theme"), n = require("jb-core");
+const i = new e.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 a = 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" == e.i18n.locale.numberingSystem, this.#l();
+	}
+	#l() {
+		const e = this.attachShadow({
+			mode: "open",
+			delegatesFocus: !0,
+			clonable: !0,
+			serializable: !0
+		});
+		(0, t.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 t = `<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="${i.get(e.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="${i.get(e.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="${i.get(e.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="${i.get(e.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 = t, 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.#g(!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.#m(t + 2);
+		this.#e.index.list.shift()?.remove(), this.#e.index.wrapper.append(n), this.#e.index.list.push(n), this.#o(t, e);
+	}
+	#g(e) {
+		if (this.#t < this.#n + 1) return;
+		const t = this.#t - 1, n = this.#m(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.#g(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());
+	}
+	#m(t) {
+		const a = this.#n > t || this.#i < t, r = document.createElement("button");
+		return r.type = "button", r.setAttribute("aria-label", i.get(e.i18n, "page")(t)), r.classList.add("page-index", a ? "empty" : "not-empty"), r.dataset.index = `${t}`, r.pageIndex = t, r.addEventListener("click", (e) => {
+			this.#u(r);
+		}), a ? (r.isEmpty = !0, r.disabled = !0) : (r.isEmpty = !1, r.disabled = !1, r.innerHTML = `${this.showPersianNumber ? (0, n.enToFaDigits)(t) : t}`), 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.#m(this.#t - 2)), this.#b(this.#m(this.#t - 1)), this.#b(this.#m(this.#t)), this.#b(this.#m(this.#t + 1)), this.#b(this.#m(this.#t + 2)), this.#x(this.#t);
+	}
+};
+customElements.get("jb-pagination") || window.customElements.define("jb-pagination", a);
+var r = 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, t.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, n.enToFaDigits)(e) : e;
+	}
+};
+customElements.get("jb-pagination-info") || window.customElements.define("jb-pagination-info", r);
+var s = class extends HTMLElement {
+	#A;
+	#R;
+	#D = null;
+	#N = 400;
+	constructor() {
+		super(), "function" == typeof this.attachInternals && (this.#A = this.attachInternals(), this.#A.role = "img", this.#A.ariaLabel = i.get(e.i18n, "refreshData"), this.#A.ariaBusy = "false"), this.#l();
+	}
+	#l() {
+		const e = this.attachShadow({
+			mode: "open",
+			delegatesFocus: !0,
+			clonable: !0,
+			serializable: !0
+		});
+		(0, t.registerDefaultVariables)(), this.#d(), this.#R = 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.#D ? (this.#D.effect?.updateTiming({ iterations: Infinity }), this.#D.onfinish = null, this.#D.play()) : this.#D = this.#R.animate([{ transform: "rotate(0deg)" }, { transform: "rotate(360deg)" }], {
+			id: "rotate",
+			duration: this.#N,
+			direction: "reverse",
+			iterations: Infinity
+		});
+	}
+	pause() {
+		this.#D?.pause();
+	}
+	stop() {
+		if (!this.#D) return;
+		const e = this.#D, t = "number" == typeof e.currentTime ? e.currentTime : 0, n = Math.max(1, Math.floor(t / this.#N) + 1);
+		e.effect?.updateTiming({ iterations: n }), e.onfinish = () => {
+			this.#D === e && (e.cancel(), this.#D = null, this.#A && (this.#A.ariaBusy = "false"));
+		}, e.play();
+	}
+};
+customElements.get("jb-refresh-icon") || window.customElements.define("jb-refresh-icon", s);
+var o = class extends HTMLElement {
+	#H = "enter";
+	#A;
+	get state() {
+		return this.#H;
+	}
+	set state(t) {
+		this.#H = t, this.#A && (this.#A.ariaLabel = i.get(e.i18n, "exit" === t ? "exitFullscreen" : "enterFullscreen")), this.setAttribute("state", t);
+	}
+	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, t.registerDefaultVariables)(), this.#d(), this.state = this.#B(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(t, n, a) {
+		"state" === t && (this.#H = this.#B(a), this.#A && (this.#A.ariaLabel = i.get(e.i18n, "exit" === this.#H ? "exitFullscreen" : "enterFullscreen")));
+	}
+	#B(e) {
+		return "exit" === e ? "exit" : "enter";
+	}
+};
+customElements.get("jb-fullscreen-icon") || window.customElements.define("jb-fullscreen-icon", o);
+function l(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 d = 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, l(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, t.registerDefaultVariables)(), this.#d(), this.#e = { expandWrapper: e.querySelector(".expand-wrapper") }, l(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", d);
+var h = class extends HTMLElement {
+	#$ = new CSSStyleSheet();
+	#V = [];
+	get headerTemplate() {
+		return this.#V;
+	}
+	set headerTemplate(e) {
+		this.#V = e, l(this.#$, e, { selector: ".table-header-row" });
+	}
+	constructor() {
+		super(), this.#l();
+	}
+	#l() {
+		this.attachShadow({
+			mode: "open",
+			delegatesFocus: !0,
+			clonable: !0,
+			serializable: !0
+		}).adoptedStyleSheets = [this.#$], (0, t.registerDefaultVariables)(), this.#d(), l(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", h);
+var p = class extends HTMLElement {
+	#A;
+	#e;
+	#$ = new CSSStyleSheet();
+	get name() {
+		return this.getAttribute("name") || "";
+	}
+	set name(e) {
+		this.setAttribute("name", e), this.#O(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, t.registerDefaultVariables)(), this.#d(), this.#e = { wrapper: e.querySelector(".column-header") }, this.#O(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.#O(n || "");
+	}
+	#h() {
+		this.#e.wrapper.addEventListener("click", () => this.#W());
+	}
+	#W() {
+		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
+			}
+		}));
+	}
+	#O(e) {
+		this.#$.replace(`\n      :host{ grid-area:${e || "none"}}\n    `);
+	}
+};
+customElements.get("jb-col-header") || window.customElements.define("jb-col-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.#$.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, t.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", c);
+var g = class extends HTMLElement {
+	#J;
+	constructor() {
+		super(), this.#l();
+	}
+	#l() {
+		const e = this.attachShadow({
+			mode: "open",
+			delegatesFocus: !0,
+			clonable: !0,
+			serializable: !0
+		});
+		(0, t.registerDefaultVariables)(), this.#d(), this.#J = e.querySelector(".toggle-button"), this.#h();
+	}
+	#d() {
+		const t = `<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="${i.get(e.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 = t, this.shadowRoot.appendChild(n.content.cloneNode(!0));
+	}
+	#Y = null;
+	connectedCallback() {
+		this.#Y = this.#G(this), this.#Y?.isOpen && (this.setAttribute("open", ""), this.#J.setAttribute("aria-expanded", "true"));
+	}
+	#G(e) {
+		return e && e.parentElement ? e.parentElement instanceof d ? e.parentElement : this.#G(this.parentElement) : null;
+	}
+	#h() {
+		this.#J.addEventListener("click", () => this.toggle());
+	}
+	toggle() {
+		if (this.#Y) {
+			const e = !this.#Y?.isOpen;
+			this.#Y.isOpen = e, e ? this.setAttribute("open", "") : this.removeAttribute("open"), this.#J.setAttribute("aria-expanded", e ? "true" : "false");
+		}
+	}
+};
+customElements.get("jb-expand-toggle") || window.customElements.define("jb-expand-toggle", g), exports.JBCellWebComponent = c, exports.JBColumnHeaderWebComponent = p, exports.JBExpandToggleWebComponent = g, exports.JBFullscreenIconWebComponent = o, exports.JBPaginationInfoWebComponent = r, exports.JBPaginationWebComponent = a, exports.JBRefreshIconWebComponent = s, exports.JBRowWebComponent = d, exports.JBTableHeaderWebComponent = h;
+
 //# sourceMappingURL=index.cjs.js.map