jb-grid 0.4.1 → 0.5.0

package/web-component/lib/fullscreen-icon/fullscreen-icon.ts

@@ -0,0 +1,72 @@
+import { renderHTML } from './render.js';
+import CSS from './style.css';
+import { registerDefaultVariables } from 'jb-core/theme';
+import type { JBFullscreenIconState } from './types.js';
+import { i18n } from "jb-core/i18n";
+import { dictionary } from "../i18n";
+
+export * from "./types.js";
+
+export class JBFullscreenIconWebComponent extends HTMLElement {
+  #state: JBFullscreenIconState = "enter";
+  #internals?: ElementInternals;
+
+  /**
+   * Describes the action represented by the icon.
+   *
+   * - `"enter"` means activating the control will enter fullscreen mode.
+   * - `"exit"` means activating the control will exit fullscreen mode.
+   */
+  get state() {
+    return this.#state;
+  }
+
+  set state(value: JBFullscreenIconState) {
+    this.#state = value;
+    if (this.#internals) this.#internals.ariaLabel = dictionary.get(i18n, value === "exit" ? "exitFullscreen" : "enterFullscreen");
+    this.setAttribute("state", value);
+  }
+
+  static get observedAttributes() {
+    return ["state"];
+  }
+
+  constructor() {
+    super();
+    if (typeof this.attachInternals === "function") {
+      this.#internals = this.attachInternals();
+      this.#internals.role = "img";
+    }
+    this.#init();
+  }
+
+  #init() {
+    const shadowRoot = this.attachShadow({ mode: 'open', delegatesFocus: true, clonable: true, serializable: true });
+    registerDefaultVariables();
+    this.#render();
+    this.state = this.#normalizeState(this.getAttribute("state"));
+  }
+
+  #render() {
+    const html = `<style>${CSS}</style>\n${renderHTML()}`;
+    const element = document.createElement("template");
+    element.innerHTML = html;
+    this.shadowRoot!.appendChild(element.content.cloneNode(true));
+  }
+
+  attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
+    if (name === "state") {
+      this.#state = this.#normalizeState(newValue);
+      if (this.#internals) this.#internals.ariaLabel = dictionary.get(i18n, this.#state === "exit" ? "exitFullscreen" : "enterFullscreen");
+    }
+  }
+
+  #normalizeState(value: string | null): JBFullscreenIconState {
+    return value === "exit" ? "exit" : "enter";
+  }
+}
+
+const myElementNotExists = !customElements.get('jb-fullscreen-icon');
+if (myElementNotExists) {
+  window.customElements.define('jb-fullscreen-icon', JBFullscreenIconWebComponent);
+}

package/web-component/lib/fullscreen-icon/render.ts

@@ -0,0 +1,23 @@
+export function renderHTML(): string {
+  return /* html */ `
+    <svg class="fullscreen-icon" x="0px" y="0px" viewBox="0 0 128 128" part="icon">
+      <title>Full Screen Button</title>
+      <g class="arrow arrow-top-start">
+        <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>
+        <path d="M0.755,26.555c0,0,0.024-0.099,0-0.277v-0.004V26.555z"></path>
+      </g>
+      <g class="arrow arrow-top-end">
+        <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>
+        <path d="M104.723,3.294c0,0,0.101,0.024,0.279,0h0.003H104.723z"></path>
+      </g>
+      <g class="arrow arrow-bottom-end">
+        <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>
+        <path d="M127.982,103.617c0,0-0.022,0.098,0,0.276v0.006V103.617z"></path>
+      </g>
+      <g class="arrow arrow-bottom-start">
+        <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>
+        <path d="M28.242,126.876c0,0-0.1-0.024-0.278,0h-0.004H28.242z"></path>
+      </g>
+    </svg>
+      `;
+}

package/web-component/lib/fullscreen-icon/style.css

@@ -0,0 +1,44 @@
+:host {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  color: #7b7b7b;
+}
+
+:host(:hover) {
+  color: #2e3139;
+}
+
+.fullscreen-icon {
+  width: 100%;
+  height: 100%;
+  display: block;
+  fill: currentColor;
+}
+
+.arrow {
+  transition: transform 0.2s ease-out;
+  transform-box: view-box;
+}
+
+:host([state="exit"]) .arrow-top-start {
+  transform: rotate(180deg);
+  transform-origin: 1.875rem 1.875rem;
+}
+
+:host([state="exit"]) .arrow-top-end {
+  transform: rotate(180deg);
+  transform-origin: 6.25rem 1.875rem;
+}
+
+:host([state="exit"]) .arrow-bottom-end {
+  transform: rotate(180deg);
+  transform-origin: 6.25rem 6.25rem;
+}
+
+:host([state="exit"]) .arrow-bottom-start {
+  transform: rotate(180deg);
+  transform-origin: 1.875rem 6.25rem;
+}

package/web-component/lib/fullscreen-icon/types.ts

@@ -0,0 +1 @@
+export type JBFullscreenIconState = "enter" | "exit";

package/web-component/lib/i18n.ts

@@ -0,0 +1,38 @@
+import { JBDictionary } from "jb-core/i18n";
+
+export type JBGridDictionary = {
+  toggleRowDetails: string;
+  refreshData: string;
+  enterFullscreen: string;
+  exitFullscreen: string;
+  firstPage: string;
+  previousPage: string;
+  nextPage: string;
+  lastPage: string;
+  page: (index: number) => string;
+};
+
+export const dictionary = new JBDictionary<JBGridDictionary>({
+  fa: {
+    toggleRowDetails: "نمایش یا پنهان کردن جزئیات ردیف",
+    refreshData: "به‌روزرسانی داده‌ها",
+    enterFullscreen: "ورود به حالت تمام‌صفحه",
+    exitFullscreen: "خروج از حالت تمام‌صفحه",
+    firstPage: "صفحه اول",
+    previousPage: "صفحه قبل",
+    nextPage: "صفحه بعد",
+    lastPage: "صفحه آخر",
+    page: (index) => `صفحه ${index}`,
+  },
+  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: (index) => `Page ${index}`,
+  },
+});

package/web-component/lib/index.ts

@@ -1,4 +1,9 @@
-export * from "./pagination/pagination.js";
-export * from "./row/row.js";
-export * from "./cell/cell.js";
-export * from "./toggle/expand-toggle.js";
+export * from "./pagination/pagination.js";
+export * from "./pagination-info/pagination-info.js";
+export * from "./refresh-icon/refresh-icon.js";
+export * from "./fullscreen-icon/fullscreen-icon.js";
+export * from "./row/row.js";
+export * from "./table-header/table-header.js";
+export * from "./column-header/column-header.js";
+export * from "./cell/cell.js";
+export * from "./toggle/expand-toggle.js";

package/web-component/lib/pagination/README.md

@@ -19,4 +19,8 @@ pagination.max = 10;
 ## CSS Variables
 | CSS variable name | description |
 | --- | --- |
+| --jb-pagination-arrow-button-fill-color | Fill color of pagination arrow buttons. |
+| --jb-pagination-arrow-button-fill-color-disabled | Fill color of disabled pagination arrow buttons. |
 | --jb-pagination-index-width | Width of each page index button. |
+| --jb-pagination-page-index-color | Color of page index buttons. |
+| --jb-pagination-page-index-color-current | Color of the current page index button. |

package/web-component/lib/pagination/pagination.ts

@@ -1,9 +1,11 @@
-import { renderHTML } from './render';
-import CSS from './style.css';
+import { renderHTML } from './render';
+import CSS from './style.css';
+import VariablesCSS from './variables.css';
 import { registerDefaultVariables } from 'jb-core/theme';
 import type { JBPaginationElements, PageIndexDom } from './types.js';
 import { i18n } from "jb-core/i18n";
-import {enToFaDigits} from 'jb-core';
+import {enToFaDigits} from 'jb-core';
+import { dictionary } from "../i18n";
 export class JBPaginationWebComponent extends HTMLElement {
   #elements!: JBPaginationElements;
   #pageIndex: number = 1;
@@ -72,7 +74,7 @@ export class JBPaginationWebComponent extends HTMLElement {
     this.min = 1;
   }
   #render() {
-    const html = `<style>${CSS}</style>\n${renderHTML()}`;
+    const html = `<style>${VariablesCSS} ${CSS}</style>\n${renderHTML()}`;
     const element = document.createElement("template");
     element.innerHTML = html;
     this.shadowRoot!.appendChild(element.content.cloneNode(true));
@@ -154,17 +156,21 @@ export class JBPaginationWebComponent extends HTMLElement {
   #createPageIndexElement(newIndex: number): PageIndexDom {
     //when we are out of bound we create empty page index
     const isEmpty = this.#min > newIndex || this.#max < newIndex;
-    const elem = document.createElement('div') as PageIndexDom;
+    const elem = document.createElement('button') as PageIndexDom;
+    elem.type = "button";
+    elem.setAttribute("aria-label", dictionary.get(i18n, "page")(newIndex));
     elem.classList.add('page-index', isEmpty?'empty':'not-empty');
     elem.dataset.index = `${newIndex}`;
     elem.pageIndex = newIndex;
     elem.addEventListener("click", (e) => {
       this.#onPageIndexClick(elem);
     });
-    if (isEmpty) {
-      elem.isEmpty = true;
-    } else {
-      elem.isEmpty = false;
+    if (isEmpty) {
+      elem.isEmpty = true;
+      elem.disabled = true;
+    } else {
+      elem.isEmpty = false;
+      elem.disabled = false;
       elem.innerHTML = `${this.showPersianNumber?enToFaDigits(newIndex):newIndex}`;
     }
     return elem;
@@ -183,11 +189,15 @@ export class JBPaginationWebComponent extends HTMLElement {
     this.#updateActiveIndex(newIndex);
     shouldDispatch && this.#dispatchChangeEvent();
   }
-  #updateActiveIndex(newIndex: number) {
-    this.#elements.index.wrapper.querySelector(".current")?.classList.remove('current');
-    this.#elements.index.list.forEach(x => {
-      if (x.pageIndex == newIndex) {
-        x.classList.add('current')
+  #updateActiveIndex(newIndex: number) {
+    const previousCurrent = this.#elements.index.wrapper.querySelector(".current");
+    previousCurrent?.classList.remove('current');
+    previousCurrent?.removeAttribute("aria-current");
+    this.#elements.index.list.forEach(x => {
+      x.tabIndex = x.pageIndex === newIndex ? 0 : -1;
+      if (x.pageIndex == newIndex) {
+        x.classList.add('current')
+        x.setAttribute("aria-current", "page");
       }
     })
   }
@@ -208,4 +218,4 @@ export class JBPaginationWebComponent extends HTMLElement {
 const myElementNotExists = !customElements.get('jb-pagination');
 if (myElementNotExists) {
   window.customElements.define('jb-pagination', JBPaginationWebComponent);
-}
+}

package/web-component/lib/pagination/render.ts

@@ -1,22 +1,25 @@
-export function renderHTML(): string {
+import { i18n } from "jb-core/i18n";
+import { dictionary } from "../i18n";
+
+export function renderHTML(): string {
   return /* html */ `
   <div class="jb-pagination-web-component">
     <section class="page-navigator">
-      <button class="first-page arrow-btn">
-        <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>
+      <button class="first-page arrow-btn" type="button" aria-label="${dictionary.get(i18n, "firstPage")}">
+        <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>
         </button>
-        <button class="prev-page arrow-btn">
-        <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>
+        <button class="prev-page arrow-btn" type="button" aria-label="${dictionary.get(i18n, "previousPage")}">
+        <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>
       </button>
       <div class="page-index-wrapper">
       </div>
-      <button class="next-page arrow-btn">
-        <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>
+      <button class="next-page arrow-btn" type="button" aria-label="${dictionary.get(i18n, "nextPage")}">
+        <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>
         </button>
-      <button class="last-page arrow-btn">
-        <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>
+      <button class="last-page arrow-btn" type="button" aria-label="${dictionary.get(i18n, "lastPage")}">
+        <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>
       </button>
     </section>
   </div>
       `;
-}
+}

package/web-component/lib/pagination/style.css

@@ -1,9 +1,4 @@
-:host {
-  /*width of each page index number button*/
-  --jb-pagination-index-width: 3rem;
-}
-
-.jb-pagination-web-component {
+.jb-pagination-web-component {
   display: flex;
   gap: 1rem;
   direction:ltr;
@@ -14,28 +9,36 @@
     justify-items: center;
     align-items: center;
 
-    .arrow-btn {
-      all: unset;
-      cursor: pointer;
-      height: 3rem;
-      width: 3rem;
-      fill: var(--jb-neutral-2);
-      &:disabled {
-        fill: var(--jb-neutral-7);
-      }
-    }
+    .arrow-btn {
+      all: unset;
+      box-sizing: border-box;
+      cursor: pointer;
+      height: 3rem;
+      width: 3rem;
+      fill: var(--arrow-button-fill-color);
+      &:focus-visible {
+        outline: 2px solid var(--jb-grid-focus-ring-color, Highlight);
+        outline-offset: 2px;
+      }
+      &:disabled {
+        fill: var(--arrow-button-fill-color-disabled);
+        cursor: default;
+      }
+    }
 
     .page-index-wrapper {
       position: relative;
-      width: calc(var(--jb-pagination-index-width) * 3);
+      width: calc(var(--index-width) * 3);
       overflow: hidden;
       height: 100%;
 
-      .page-index {
-        font-size: 1rem;
-        color: var(--jb-neutral-6);
+      .page-index {
+        all: unset;
+        box-sizing: border-box;
+        font-size: 1rem;
+        color: var(--page-index-color);
         position: absolute;
-        width: var(--jb-pagination-index-width);
+        width: var(--index-width);
         height: 3rem;
         display: flex;
         justify-content: center;
@@ -43,12 +46,21 @@
         text-box-trim: trim-both;
         text-box-edge: ex alphabetic;
         transition: all 0.3s 0s ease;
-        cursor: pointer;
+        cursor: pointer;
+
+        &:disabled {
+          cursor: default;
+        }
+
+        &:focus-visible {
+          outline: 2px solid var(--jb-grid-focus-ring-color, Highlight);
+          outline-offset: -2px;
+        }
 
-        &.current {
-          color: var(--jb-primary);
-          transform: scale(120%);
-        }
+        &.current {
+          color: var(--page-index-color-current);
+          transform: scale(120%);
+        }
 
         &.empty {
           cursor: default;
@@ -57,7 +69,7 @@
 
       .page-index:nth-child(1) {
         top: 0;
-        left: calc(var(--jb-pagination-index-width) * -1);
+        left: calc(var(--index-width) * -1);
         transform: scale(10%);
       }
 
@@ -68,19 +80,19 @@
 
       .page-index:nth-child(3) {
         top: 0;
-        left: calc(var(--jb-pagination-index-width));
+        left: calc(var(--index-width));
       }
 
       .page-index:nth-child(4) {
         top: 0;
-        left: calc(var(--jb-pagination-index-width) * 2);
+        left: calc(var(--index-width) * 2);
       }
 
       .page-index:nth-child(5) {
         top: 0;
-        left: calc(var(--jb-pagination-index-width) * 3);
+        left: calc(var(--index-width) * 3);
         transform: scale(10%);
       }
     }
   }
-}
+}

package/web-component/lib/pagination/types.ts

@@ -12,4 +12,4 @@ export type JBPaginationElements = {
    }
 }
 
-export type PageIndexDom = HTMLDivElement & {pageIndex:number,isEmpty:boolean};
+export type PageIndexDom = HTMLButtonElement & {pageIndex:number,isEmpty:boolean};

package/web-component/lib/pagination/variables.css

@@ -0,0 +1,10 @@
+:host {
+  /* Theme/Color */
+  --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));
+
+  /* Size */
+  --index-width: var(--jb-pagination-index-width, 3rem);
+}

package/web-component/lib/pagination-info/pagination-info.ts

@@ -0,0 +1,191 @@
+import { renderHTML } from './render.js';
+import CSS from './style.css';
+import { registerDefaultVariables } from 'jb-core/theme';
+import { enToFaDigits } from 'jb-core';
+import type { JBPaginationInfoElements, JBPaginationInfoPageSizeChangeEventDetail } from './types.js';
+
+export * from "./types.js";
+
+export class JBPaginationInfoWebComponent extends HTMLElement {
+  #elements!: JBPaginationInfoElements;
+  #pageSize = 20;
+  #pageSizes = [20, 30, 50, 100];
+  #startItemIndex = 0;
+  #endItemIndex = 0;
+  #totalItemsCount = 0;
+  #pageItemCountTitle = "";
+  #fromLabel = "";
+  #currentAvailableItemTitle = "";
+  #showPersianNumber = false;
+
+  get pageSize() {
+    return this.#pageSize;
+  }
+
+  set pageSize(value: number) {
+    this.#pageSize = value;
+    this.#syncSelectValue();
+  }
+
+  get pageSizes() {
+    return this.#pageSizes;
+  }
+
+  set pageSizes(value: number[]) {
+    this.#pageSizes = value;
+    this.#renderPageSizeOptions();
+  }
+
+  get startItemIndex() {
+    return this.#startItemIndex;
+  }
+
+  set startItemIndex(value: number) {
+    this.#startItemIndex = value;
+    this.#renderMetaData();
+  }
+
+  get endItemIndex() {
+    return this.#endItemIndex;
+  }
+
+  set endItemIndex(value: number) {
+    this.#endItemIndex = value;
+    this.#renderMetaData();
+  }
+
+  get totalItemsCount() {
+    return this.#totalItemsCount;
+  }
+
+  set totalItemsCount(value: number) {
+    this.#totalItemsCount = value;
+    this.#renderMetaData();
+  }
+
+  get pageItemCountTitle() {
+    return this.#pageItemCountTitle;
+  }
+
+  set pageItemCountTitle(value: string) {
+    this.#pageItemCountTitle = value;
+    this.#renderLabels();
+  }
+
+  get fromLabel() {
+    return this.#fromLabel;
+  }
+
+  set fromLabel(value: string) {
+    this.#fromLabel = value;
+    this.#renderLabels();
+  }
+
+  get currentAvailableItemTitle() {
+    return this.#currentAvailableItemTitle;
+  }
+
+  set currentAvailableItemTitle(value: string) {
+    this.#currentAvailableItemTitle = value;
+    this.#renderLabels();
+  }
+
+  get showPersianNumber() {
+    return this.#showPersianNumber;
+  }
+
+  set showPersianNumber(value: boolean) {
+    this.#showPersianNumber = value;
+    this.#renderPageSizeOptions();
+    this.#renderMetaData();
+  }
+
+  constructor() {
+    super();
+    this.#init();
+  }
+
+  #init() {
+    const shadowRoot = this.attachShadow({ mode: 'open', delegatesFocus: true, clonable: true, serializable: true });
+    registerDefaultVariables();
+    this.#render();
+    this.#elements = {
+      pageSizeSelect: shadowRoot.querySelector(".page-size-select")!,
+      pageSizeSection: shadowRoot.querySelector(".page-size-section")!,
+      startItemIndex: shadowRoot.querySelector(".start-item-index")!,
+      endItemIndex: shadowRoot.querySelector(".end-item-index")!,
+      fromLabel: shadowRoot.querySelector(".from-label")!,
+      totalItemsCount: shadowRoot.querySelector(".total-items-count")!,
+    };
+    this.#registerEventListener();
+    this.#renderPageSizeOptions();
+    this.#renderLabels();
+    this.#renderMetaData();
+  }
+
+  #render() {
+    const html = `<style>${CSS}</style>\n${renderHTML()}`;
+    const element = document.createElement("template");
+    element.innerHTML = html;
+    this.shadowRoot!.appendChild(element.content.cloneNode(true));
+  }
+
+  #registerEventListener() {
+    this.#elements.pageSizeSelect.addEventListener("change", () => {
+      const pageSize = Number(this.#elements.pageSizeSelect.value);
+      this.pageSize = pageSize;
+      this.dispatchEvent(new CustomEvent<JBPaginationInfoPageSizeChangeEventDetail>("page-size-change", {
+        bubbles: true,
+        composed: true,
+        detail: { pageSize }
+      }));
+    });
+  }
+
+  #renderPageSizeOptions() {
+    if (!this.#elements) {
+      return;
+    }
+    this.#elements.pageSizeSelect.replaceChildren(...this.#pageSizes.map((pageSize) => {
+      const option = document.createElement("option");
+      option.value = pageSize.toString();
+      option.textContent = this.#formatNumber(pageSize).toString();
+      return option;
+    }));
+    this.#syncSelectValue();
+  }
+
+  #syncSelectValue() {
+    if (!this.#elements) {
+      return;
+    }
+    this.#elements.pageSizeSelect.value = this.#pageSize.toString();
+  }
+
+  #renderLabels() {
+    if (!this.#elements) {
+      return;
+    }
+    this.#elements.pageSizeSection.title = this.#pageItemCountTitle;
+    this.#elements.fromLabel.textContent = ` ${this.#fromLabel}`;
+    this.#elements.totalItemsCount.title = this.#currentAvailableItemTitle;
+  }
+
+  #renderMetaData() {
+    if (!this.#elements) {
+      return;
+    }
+    this.#elements.startItemIndex.textContent = this.#formatNumber(this.#startItemIndex).toString();
+    this.#elements.endItemIndex.textContent = ` ${this.#formatNumber(this.#endItemIndex)} `;
+    this.#elements.totalItemsCount.textContent = ` ${this.#formatNumber(this.#totalItemsCount)} `;
+  }
+
+  #formatNumber(value: number) {
+    return this.#showPersianNumber ? enToFaDigits(value) : value;
+  }
+}
+
+const myElementNotExists = !customElements.get('jb-pagination-info');
+if (myElementNotExists) {
+  window.customElements.define('jb-pagination-info', JBPaginationInfoWebComponent);
+}

package/web-component/lib/pagination-info/render.ts

@@ -0,0 +1,16 @@
+export function renderHTML(): string {
+  return /* html */ `
+    <section class="jb-pagination-info-web-component">
+      <section class="page-size-section">
+        <select class="page-size-select"></select>
+      </section>
+      <section class="items-information-section">
+        <span class="start-item-index"></span>
+        <span>-</span>
+        <span class="end-item-index"></span>
+        <span class="from-label"></span>
+        <span class="total-items-count"></span>
+      </section>
+    </section>
+      `;
+}