@yoozsoft/yoozsoft-ng 6.2.0 → 7.1.1

package/fesm2022/yoozsoft-yoozsoft-ng-sidebar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"yoozsoft-yoozsoft-ng-sidebar.mjs","sources":["../../../../projects/yoozsoft/yoozsoft-ng/sidebar/src/services/sidebar-service.ts","../../../../projects/yoozsoft/yoozsoft-ng/sidebar/src/ys-sidebar/ys-sidebar.ts","../../../../projects/yoozsoft/yoozsoft-ng/sidebar/src/ys-sidebar/ys-sidebar.html","../../../../projects/yoozsoft/yoozsoft-ng/sidebar/public-api.ts","../../../../projects/yoozsoft/yoozsoft-ng/sidebar/yoozsoft-yoozsoft-ng-sidebar.ts"],"sourcesContent":["import { isPlatformBrowser } from '@angular/common';\nimport { inject, Injectable, PLATFORM_ID, signal } from '@angular/core';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class SidebarService {\n\n  private platformId = inject(PLATFORM_ID);\n\n  private mediaQuery?: MediaQueryList;\n\n  private readonly _isMobile = signal(false);\n  private readonly _isOpen = signal(true);\n\n  readonly isMobile = this._isMobile.asReadonly();\n  readonly isOpen = this._isOpen.asReadonly();\n\n  constructor() {\n\n    if (isPlatformBrowser(this.platformId)) {\n\n      this.mediaQuery = window.matchMedia('(max-width: 992px)');\n\n      this._isMobile.set(this.mediaQuery.matches);\n      this._isOpen.set(!this.mediaQuery.matches);\n\n      this.mediaQuery.addEventListener('change', e => {\n\n        this._isMobile.set(e.matches);\n\n        if (e.matches) {\n          this.close();\n        } else {\n          this.open();\n        }\n\n      });\n\n    }\n\n  }\n\n  toggle() {\n    this._isOpen.update(v => !v);\n  }\n\n  open() {\n    this._isOpen.set(true);\n  }\n\n  close() {\n    this._isOpen.set(false);\n  }\n\n}\n","import { Component, computed, inject, input, output, signal } from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { NavigationEnd, Router, RouterLink, RouterLinkActive } from '@angular/router';\nimport { filter, map } from 'rxjs';\nimport { SidebarItem, UserProfile } from '../models';\n\n@Component({\n  selector: 'ys-sidebar',\n  imports: [\n    RouterLink,\n    RouterLinkActive\n  ],\n  templateUrl: './ys-sidebar.html',\n  styleUrl: './ys-sidebar.scss',\n})\nexport class YsSidebar {\n\n  private router = inject(Router);\n\n  items = input<SidebarItem[]>([]);\n\n  profile = input<UserProfile>();\n  styleClass = input<string>('bg-body');\n\n  showClose = input(false);\n  closeStyleClass = input('btn-close-white');\n  close = output();\n  itemSelected = output<SidebarItem>();\n\n  readonly fullName = computed<string>(() =>\n    [\n      this.profile()?.firstName,\n      this.profile()?.lastName\n    ].filter(Boolean).join(' ')\n  );\n\n  readonly currentUrl = toSignal(\n    this.router.events.pipe(\n      filter(event => event instanceof NavigationEnd),\n      map(() => this.router.url)\n    ),\n    {\n      initialValue: this.router.url\n    }\n  );\n\n  readonly expandedMenu = signal<string | null>(null);\n\n  private getItemKey(item: SidebarItem): string | null {\n    return item.id ?? item.route ?? item.label ?? null;\n  }\n\n  toggle(item: SidebarItem) {\n\n    const key = this.getItemKey(item);\n\n    if (!key) {\n      return;\n    }\n\n    this.expandedMenu.update(current =>\n      current === key ? null : key\n    );\n  }\n\n  isExpanded(item: SidebarItem) {\n    return this.expandedMenu() === this.getItemKey(item);\n  }\n\n  isParentActive(item: SidebarItem): boolean {\n\n    const url = this.currentUrl();\n\n    return item.children?.some(child =>\n      child.route &&\n      (\n        url === child.route ||\n        url.startsWith(child.route + '/')\n      )\n    ) ?? false;\n\n  }\n\n  closeSidebar() {\n    this.close.emit();\n  }\n\n  onSelectItem(item: SidebarItem) {\n    this.itemSelected.emit(item);\n  }\n\n  onItemClick(event: MouseEvent, item: SidebarItem) {\n    // item.disabled ? $event.preventDefault() : toggle(item); onSelectItem(); (item.onClick && item.onClick($event))\n    if (item.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    this.toggle(item);\n    this.onSelectItem(item);\n    item.onClick?.(event);\n\n  }\n\n  onSubItemClick(event: MouseEvent, subItem: SidebarItem) {\n\n    if (subItem.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    this.onSelectItem(subItem);\n    subItem.onClick?.(event);\n\n  }\n\n}\n","<aside class=\"ys-sidebar overflow-auto border-end\" [class]=\"styleClass()\">\n\n    @if(showClose()){\n    <div class=\"d-flex justify-content-end\">\n        <button type=\"button\" (click)=\"closeSidebar()\" class=\"btn-close p-2\" [class]=\"closeStyleClass()\"\n            aria-label=\"Close\"></button>\n    </div>\n    }\n\n    @if (profile()?.image || profile()?.role || fullName()) {\n    <div class=\"sidebar-profile d-flex flex-column justify-content-center border-bottom p-3\" [class.pt-0]=\"showClose()\">\n\n        @if (profile()?.image) {\n        <div class=\"image-wrapper\" [class.mb-3]=\"fullName() || profile()?.role\">\n            <div class=\"user-image rounded-circle m-auto\">\n                <img [src]=\"profile()?.image?.src\" class=\"img-fluid\" [alt]=\"profile()?.image?.alt\">\n            </div>\n        </div>\n        }\n\n        @if (fullName() || profile()?.role) {\n        <div class=\"profile-details d-flex flex-column text-center\">\n\n            @if (fullName()) {\n            <strong class=\"text-uppercase name\">{{fullName()}}</strong>\n            }\n\n            @if (profile()?.role) {\n            <small class=\"text-uppercase role\">{{profile()?.role}}</small>\n            }\n\n        </div>\n        }\n\n    </div>\n    }\n\n    <div class=\"sidebar-menu p-3\">\n        <ul class=\"menu-items nav nav-pills flex-column\">\n\n            @for (item of items(); track item.id ?? item.route ?? $index) {\n\n            @if (item.isDivider) {\n            <hr class=\"sidebar-divider my-2\" />\n            }\n            @else {\n\n            @if (item.children?.length) {\n            <li class=\"nav-item mb-2\">\n\n                <button type=\"button\" class=\"nav-link d-flex align-items-center justify-content-between w-100\"\n                    [class.active]=\"isParentActive(item)\" (click)=\"toggle(item); (item.onClick && item.onClick($event))\"\n                    [disabled]=\"item.disabled\">\n\n                    @if (item.iconClass) {\n                    <i [class]=\"item.iconClass\"></i>\n                    }\n\n                    <span class=\"link-label ms-3 me-auto\">{{item.label}}</span>\n\n                    @if (item.badgeLabel) {\n                    <span class=\"badge bg-info me-1\" [class]=\"item.badgeStyleClass\">{{item.badgeLabel}}</span>\n                    }\n\n                    <i class=\"fa-solid fa-chevron-right transition-icon\" [class.expanded]=\"isExpanded(item)\">\n                    </i>\n\n                </button>\n\n                <ul class=\"menu-sub-items nav nav-pills flex-column ms-3 border-bottom\"\n                    [class.expanded]=\"isExpanded(item)\">\n\n                    @for (subItem of item.children; track subItem.id ?? subItem.route ?? $index) {\n\n                    @if (subItem.isDivider) {\n                    <hr class=\"sidebar-divider my-1\" />\n                    }\n                    @else {\n                    <li class=\"nav-item\">\n                        <a class=\"nav-link d-flex align-items-center\"\n                            [routerLink]=\"subItem.disabled ? null : subItem.route\" routerLinkActive=\"active\"\n                            (click)=\"onSubItemClick($event, subItem)\" [class.disabled]=\"subItem.disabled\">\n\n                            @if (subItem.iconClass) {\n                            <i [class]=\"subItem.iconClass\"></i>\n                            }\n\n                            <span class=\"link-label ms-3 me-auto\">{{subItem.label}}</span>\n\n                            @if (subItem.badgeLabel) {\n                            <span class=\"badge bg-info\" [class]=\"subItem.badgeStyleClass\">{{subItem.badgeLabel}}</span>\n                            }\n\n                        </a>\n                    </li>\n                    }\n\n                    }\n                </ul>\n\n            </li>\n\n            }\n            @else {\n\n            <li class=\"nav-item\">\n                <a class=\"nav-link d-flex align-items-center\" [class.disabled]=\"item.disabled\"\n                    [routerLink]=\"item.disabled ? null : item.route\" routerLinkActive=\"active\"\n                    (click)=\"onItemClick($event,item)\">\n\n                    @if (item.iconClass) {\n                    <i [class]=\"item.iconClass\"></i>\n                    }\n\n                    <span class=\"link-label ms-3 me-auto\">{{ item.label }}</span>\n\n                    @if (item.badgeLabel) {\n                    <span class=\"badge bg-info\" [class]=\"item.badgeStyleClass\"> {{ item.badgeLabel }} </span>\n                    }\n\n                </a>\n            </li>\n\n            }\n\n            }\n\n            }\n        </ul>\n    </div>\n</aside>","/*\r\n * Public API Surface of ys-sidebar\r\n */\r\n\r\nexport * from './src/models';\r\nexport * from './src/services';\r\nexport * from './src/ys-sidebar/ys-sidebar';\r\n\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"yoozsoft-yoozsoft-ng-sidebar.mjs","sources":["../../../../projects/yoozsoft/yoozsoft-ng/sidebar/src/services/sidebar-service.ts","../../../../projects/yoozsoft/yoozsoft-ng/sidebar/src/ys-sidebar/ys-sidebar.ts","../../../../projects/yoozsoft/yoozsoft-ng/sidebar/src/ys-sidebar/ys-sidebar.html","../../../../projects/yoozsoft/yoozsoft-ng/sidebar/public-api.ts","../../../../projects/yoozsoft/yoozsoft-ng/sidebar/yoozsoft-yoozsoft-ng-sidebar.ts"],"sourcesContent":["import { isPlatformBrowser } from '@angular/common';\nimport { inject, Injectable, PLATFORM_ID, signal } from '@angular/core';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class SidebarService {\n\n  private platformId = inject(PLATFORM_ID);\n\n  private mediaQuery?: MediaQueryList;\n\n  private readonly _isMobile = signal(false);\n  private readonly _isOpen = signal(true);\n\n  readonly isMobile = this._isMobile.asReadonly();\n  readonly isOpen = this._isOpen.asReadonly();\n\n  constructor() {\n\n    if (isPlatformBrowser(this.platformId)) {\n\n      this.mediaQuery = window.matchMedia('(max-width: 992px)');\n\n      this._isMobile.set(this.mediaQuery.matches);\n      this._isOpen.set(!this.mediaQuery.matches);\n\n      this.mediaQuery.addEventListener('change', e => {\n\n        this._isMobile.set(e.matches);\n\n        if (e.matches) {\n          this.close();\n        } else {\n          this.open();\n        }\n\n      });\n\n    }\n\n  }\n\n  toggle() {\n    this._isOpen.update(v => !v);\n  }\n\n  open() {\n    this._isOpen.set(true);\n  }\n\n  close() {\n    this._isOpen.set(false);\n  }\n\n}\n","import {\r\n  Component,\r\n  computed,\r\n  inject,\r\n  input,\r\n  output,\r\n  signal,\r\n  ChangeDetectionStrategy,\r\n} from '@angular/core';\r\nimport { toSignal } from '@angular/core/rxjs-interop';\r\nimport { NavigationEnd, Router, RouterLink, RouterLinkActive } from '@angular/router';\r\nimport { filter, map } from 'rxjs';\r\nimport { SidebarItem, UserProfile } from '../models';\r\n\r\n@Component({\r\n  selector: 'ys-sidebar',\r\n  imports: [RouterLink, RouterLinkActive],\r\n  templateUrl: './ys-sidebar.html',\r\n  changeDetection: ChangeDetectionStrategy.Eager,\r\n  styleUrl: './ys-sidebar.scss',\r\n})\r\nexport class YsSidebar {\r\n  private router = inject(Router);\r\n\r\n  items = input<SidebarItem[]>([]);\r\n\r\n  profile = input<UserProfile>();\r\n  styleClass = input<string>('bg-body');\r\n\r\n  showClose = input(false);\r\n  closeStyleClass = input('btn-close-white');\r\n  close = output();\r\n  itemSelected = output<SidebarItem>();\r\n\r\n  readonly fullName = computed<string>(() =>\r\n    [this.profile()?.firstName, this.profile()?.lastName].filter(Boolean).join(' '),\r\n  );\r\n\r\n  readonly currentUrl = toSignal(\r\n    this.router.events.pipe(\r\n      filter((event) => event instanceof NavigationEnd),\r\n      map(() => this.router.url),\r\n    ),\r\n    {\r\n      initialValue: this.router.url,\r\n    },\r\n  );\r\n\r\n  readonly expandedMenu = signal<string | null>(null);\r\n\r\n  private getItemKey(item: SidebarItem): string | null {\r\n    return item.id ?? item.route ?? item.label ?? null;\r\n  }\r\n\r\n  toggle(item: SidebarItem) {\r\n    const key = this.getItemKey(item);\r\n\r\n    if (!key) {\r\n      return;\r\n    }\r\n\r\n    this.expandedMenu.update((current) => (current === key ? null : key));\r\n  }\r\n\r\n  isExpanded(item: SidebarItem) {\r\n    return this.expandedMenu() === this.getItemKey(item);\r\n  }\r\n\r\n  isParentActive(item: SidebarItem): boolean {\r\n    const url = this.currentUrl();\r\n\r\n    return (\r\n      item.children?.some(\r\n        (child) => child.route && (url === child.route || url.startsWith(child.route + '/')),\r\n      ) ?? false\r\n    );\r\n  }\r\n\r\n  closeSidebar() {\r\n    this.close.emit();\r\n  }\r\n\r\n  onSelectItem(item: SidebarItem) {\r\n    this.itemSelected.emit(item);\r\n  }\r\n\r\n  onItemClick(event: MouseEvent, item: SidebarItem) {\r\n    // item.disabled ? $event.preventDefault() : toggle(item); onSelectItem(); (item.onClick && item.onClick($event))\r\n    if (item.disabled) {\r\n      event.preventDefault();\r\n      return;\r\n    }\r\n\r\n    this.toggle(item);\r\n    this.onSelectItem(item);\r\n    item.onClick?.(event);\r\n  }\r\n\r\n  onSubItemClick(event: MouseEvent, subItem: SidebarItem) {\r\n    if (subItem.disabled) {\r\n      event.preventDefault();\r\n      return;\r\n    }\r\n\r\n    this.onSelectItem(subItem);\r\n    subItem.onClick?.(event);\r\n  }\r\n}\r\n","<aside class=\"ys-sidebar overflow-auto border-end\" [class]=\"styleClass()\">\r\n  @if (showClose()) {\r\n  <div class=\"d-flex justify-content-end\">\r\n    <button type=\"button\" (click)=\"closeSidebar()\" class=\"btn-close p-2\" [class]=\"closeStyleClass()\"\r\n      aria-label=\"Close\"></button>\r\n  </div>\r\n  }\r\n\r\n  @if (profile()?.image || profile()?.role || fullName()) {\r\n  <div class=\"sidebar-profile d-flex flex-column justify-content-center border-bottom p-3\" [class.pt-0]=\"showClose()\">\r\n    @if (profile()?.image) {\r\n    <div class=\"image-wrapper\" [class.mb-3]=\"fullName() || profile()?.role\">\r\n      <div class=\"user-image rounded-circle m-auto\">\r\n        <img [src]=\"profile()?.image?.src\" class=\"img-fluid\" [alt]=\"profile()?.image?.alt\" />\r\n      </div>\r\n    </div>\r\n    }\r\n\r\n    @if (fullName() || profile()?.role) {\r\n    <div class=\"profile-details d-flex flex-column text-center\">\r\n      @if (fullName()) {\r\n      <strong class=\"text-uppercase name\">{{ fullName() }}</strong>\r\n      }\r\n\r\n      @if (profile()?.role) {\r\n      <small class=\"text-uppercase role\">{{ profile()?.role }}</small>\r\n      }\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n\r\n  <div class=\"sidebar-menu p-3\">\r\n    <ul class=\"menu-items nav nav-pills flex-column\">\r\n      @for (item of items(); track item.id ?? item.route ?? $index) {\r\n      @if (item.isDivider) {\r\n      <hr class=\"sidebar-divider my-2\" />\r\n      } @else {\r\n      @if (item.children?.length) {\r\n      <li class=\"nav-item mb-2\">\r\n        <button type=\"button\" class=\"nav-link d-flex align-items-center justify-content-between w-100\"\r\n          [class.active]=\"isParentActive(item)\" (click)=\"toggle(item); item.onClick && item.onClick($event)\"\r\n          [disabled]=\"item.disabled\">\r\n          @if (item.iconClass) {\r\n          <i [class]=\"item.iconClass\"></i>\r\n          }\r\n\r\n          <span class=\"link-label ms-3 me-auto\">{{ item.label }}</span>\r\n\r\n          @if (item.badgeLabel) {\r\n          <span class=\"badge bg-info me-1\" [class]=\"item.badgeStyleClass\">{{\r\n            item.badgeLabel\r\n            }}</span>\r\n          }\r\n\r\n          <i class=\"fa-solid fa-chevron-right transition-icon\" [class.expanded]=\"isExpanded(item)\">\r\n          </i>\r\n        </button>\r\n\r\n        <ul class=\"menu-sub-items nav nav-pills flex-column ms-3 border-bottom\" [class.expanded]=\"isExpanded(item)\">\r\n          @for (subItem of item.children; track subItem.id ?? subItem.route ?? $index) {\r\n          @if (subItem.isDivider) {\r\n          <hr class=\"sidebar-divider my-1\" />\r\n          } @else {\r\n          <li class=\"nav-item\">\r\n            <a class=\"nav-link d-flex align-items-center\" [routerLink]=\"subItem.disabled ? null : subItem.route\"\r\n              routerLinkActive=\"active\" (click)=\"onSubItemClick($event, subItem)\" [class.disabled]=\"subItem.disabled\">\r\n              @if (subItem.iconClass) {\r\n              <i [class]=\"subItem.iconClass\"></i>\r\n              }\r\n\r\n              <span class=\"link-label ms-3 me-auto\">{{ subItem.label }}</span>\r\n\r\n              @if (subItem.badgeLabel) {\r\n              <span class=\"badge bg-info\" [class]=\"subItem.badgeStyleClass\">{{\r\n                subItem.badgeLabel\r\n                }}</span>\r\n              }\r\n            </a>\r\n          </li>\r\n          }\r\n          }\r\n        </ul>\r\n      </li>\r\n      } @else {\r\n      <li class=\"nav-item\">\r\n        <a class=\"nav-link d-flex align-items-center\" [class.disabled]=\"item.disabled\"\r\n          [routerLink]=\"item.disabled ? null : item.route\" routerLinkActive=\"active\"\r\n          (click)=\"onItemClick($event, item)\">\r\n          @if (item.iconClass) {\r\n          <i [class]=\"item.iconClass\"></i>\r\n          }\r\n\r\n          <span class=\"link-label ms-3 me-auto\">{{ item.label }}</span>\r\n\r\n          @if (item.badgeLabel) {\r\n          <span class=\"badge bg-info\" [class]=\"item.badgeStyleClass\">\r\n            {{ item.badgeLabel }}\r\n          </span>\r\n          }\r\n        </a>\r\n      </li>\r\n      }\r\n      }\r\n      }\r\n    </ul>\r\n  </div>\r\n</aside>","/*\r\n * Public API Surface of ys-sidebar\r\n */\r\n\r\nexport * from './src/models';\r\nexport * from './src/services';\r\nexport * from './src/ys-sidebar/ys-sidebar';\r\n\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/yoozsoft-yoozsoft-ng-table.mjs

@@ -1,47 +1,72 @@
 import { NgClass, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, model, output, signal, computed, effect, Component } from '@angular/core';
+import { input, model, output, signal, computed, effect, ChangeDetectionStrategy, Component } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { NgbDropdownModule, NgbPagination, NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
 
 class YsTable {
-    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
-    columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
-    actionButtons = input([], ...(ngDevMode ? [{ debugName: "actionButtons" }] : /* istanbul ignore next */ []));
-    toolbarButtons = input([], ...(ngDevMode ? [{ debugName: "toolbarButtons" }] : /* istanbul ignore next */ []));
-    rowStyleClass = input(...(ngDevMode ? [undefined, { debugName: "rowStyleClass" }] : /* istanbul ignore next */ []));
-    rowIndicators = input([], ...(ngDevMode ? [{ debugName: "rowIndicators" }] : /* istanbul ignore next */ []));
-    serverSide = input(false, ...(ngDevMode ? [{ debugName: "serverSide" }] : /* istanbul ignore next */ [])); // <--- حالت سروری
-    isPagination = input(true, ...(ngDevMode ? [{ debugName: "isPagination" }] : /* istanbul ignore next */ []));
-    rowsPerPage = input([10, 25, 50], ...(ngDevMode ? [{ debugName: "rowsPerPage" }] : /* istanbul ignore next */ []));
-    pageReportTemplate = input('Showing {first} to {last} of {totalRecords} items', ...(ngDevMode ? [{ debugName: "pageReportTemplate" }] : /* istanbul ignore next */ []));
-    page = model(1, ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
-    pageSize = model(this.rowsPerPage()[0] || 10, ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
-    collectionSize = model(0, ...(ngDevMode ? [{ debugName: "collectionSize" }] : /* istanbul ignore next */ [])); // <--- از سرور می‌گیریم
-    hasSearch = input(false, ...(ngDevMode ? [{ debugName: "hasSearch" }] : /* istanbul ignore next */ []));
-    searchPlaceholder = input('search...', ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
-    searchStyleClass = input(...(ngDevMode ? [undefined, { debugName: "searchStyleClass" }] : /* istanbul ignore next */ []));
-    styleClass = input(...(ngDevMode ? [undefined, { debugName: "styleClass" }] : /* istanbul ignore next */ []));
-    toolbarStyleClass = input(...(ngDevMode ? [undefined, { debugName: "toolbarStyleClass" }] : /* istanbul ignore next */ []));
-    tableStyleClass = input(...(ngDevMode ? [undefined, { debugName: "tableStyleClass" }] : /* istanbul ignore next */ []));
+    items = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    columns = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    actionButtons = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "actionButtons" }] : /* istanbul ignore next */ []));
+    toolbarButtons = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toolbarButtons" }] : /* istanbul ignore next */ []));
+    rowStyleClass = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "rowStyleClass" }] : /* istanbul ignore next */ []));
+    rowIndicators = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowIndicators" }] : /* istanbul ignore next */ []));
+    serverSide = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "serverSide" }] : /* istanbul ignore next */ [])); // <--- حالت سروری
+    isPagination = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isPagination" }] : /* istanbul ignore next */ []));
+    rowsPerPage = input([10, 25, 50], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowsPerPage" }] : /* istanbul ignore next */ []));
+    pageReportTemplate = input('Showing {first} to {last} of {totalRecords} items', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageReportTemplate" }] : /* istanbul ignore next */ []));
+    page = model(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
+    pageSize = model(this.rowsPerPage()[0] || 10, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+    collectionSize = model(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collectionSize" }] : /* istanbul ignore next */ [])); // <--- از سرور می‌گیریم
+    hasSearch = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasSearch" }] : /* istanbul ignore next */ []));
+    searchPlaceholder = input('search...', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
+    searchStyleClass = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "searchStyleClass" }] : /* istanbul ignore next */ []));
+    styleClass = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "styleClass" }] : /* istanbul ignore next */ []));
+    toolbarStyleClass = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "toolbarStyleClass" }] : /* istanbul ignore next */ []));
+    tableStyleClass = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "tableStyleClass" }] : /* istanbul ignore next */ []));
     /** Selectable rows checkbox */
-    selectableRows = input(false, ...(ngDevMode ? [{ debugName: "selectableRows" }] : /* istanbul ignore next */ []));
+    selectableRows = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectableRows" }] : /* istanbul ignore next */ []));
     /** Condition for each row's checkbox to be active */
-    isRowSelectable = input(...(ngDevMode ? [undefined, { debugName: "isRowSelectable" }] : /* istanbul ignore next */ []));
-    rowKey = input('id', ...(ngDevMode ? [{ debugName: "rowKey" }] : /* istanbul ignore next */ []));
+    isRowSelectable = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "isRowSelectable" }] : /* istanbul ignore next */ []));
+    rowKey = input('id', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowKey" }] : /* istanbul ignore next */ []));
     pageChanged = output();
     search = output();
     /** checkbox */
     selectedItemsChange = output();
-    searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
-    sortedColumn = signal(null, ...(ngDevMode ? [{ debugName: "sortedColumn" }] : /* istanbul ignore next */ []));
-    sortDirection = signal('asc', ...(ngDevMode ? [{ debugName: "sortDirection" }] : /* istanbul ignore next */ []));
+    searchTerm = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
+    sortedColumn = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sortedColumn" }] : /* istanbul ignore next */ []));
+    sortDirection = signal('asc', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sortDirection" }] : /* istanbul ignore next */ []));
     filteredItems = computed(() => {
         let items = [...this.items()];
         const search = this.searchTerm().trim().toLowerCase();
         if (search) {
-            items = items.filter(item => this.columns().some(col => {
+            items = items.filter((item) => this.columns().some((col) => {
                 let value = '';
                 if (col.template) {
                     value = this.applyTemplate(col.template, item);
@@ -67,7 +92,8 @@ class YsTable {
             });
         }
         return items;
-    }, ...(ngDevMode ? [{ debugName: "filteredItems" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filteredItems" }] : /* istanbul ignore next */ []));
     paginatedItems = computed(() => {
         if (this.serverSide()) {
             return this.items();
@@ -77,17 +103,22 @@ class YsTable {
         }
         const start = (this.page() - 1) * this.pageSize();
         return this.filteredItems().slice(start, start + this.pageSize());
-    }, ...(ngDevMode ? [{ debugName: "paginatedItems" }] : /* istanbul ignore next */ []));
-    selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "paginatedItems" }] : /* istanbul ignore next */ []));
+    selectedItems = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedItems" }] : /* istanbul ignore next */ []));
     totalPages = computed(() => {
         return Math.ceil(this.collectionSize() / this.pageSize()) || 1;
-    }, ...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
     firstIndex = computed(() => {
         return (this.page() - 1) * this.pageSize();
-    }, ...(ngDevMode ? [{ debugName: "firstIndex" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "firstIndex" }] : /* istanbul ignore next */ []));
     lastIndex = computed(() => {
         return Math.min(this.firstIndex() + this.pageSize(), this.collectionSize());
-    }, ...(ngDevMode ? [{ debugName: "lastIndex" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lastIndex" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
             this.columns();
@@ -101,7 +132,7 @@ class YsTable {
     }
     onSort(field) {
         if (this.sortedColumn() === field) {
-            this.sortDirection.update(v => v === 'asc' ? 'desc' : 'asc');
+            this.sortDirection.update((v) => (v === 'asc' ? 'desc' : 'asc'));
         }
         else {
             this.sortedColumn.set(field);
@@ -116,7 +147,7 @@ class YsTable {
         if (this.serverSide()) {
             this.pageChanged.emit({
                 page,
-                pageSize: this.pageSize()
+                pageSize: this.pageSize(),
             });
         }
     }
@@ -126,7 +157,7 @@ class YsTable {
         if (this.serverSide()) {
             this.pageChanged.emit({
                 page: 1,
-                pageSize: +size
+                pageSize: +size,
             });
         }
     }
@@ -152,7 +183,7 @@ class YsTable {
     checkUniqueColumnKeys() {
         const seen = new Set();
         const duplicates = [];
-        this.columns().forEach(col => {
+        this.columns().forEach((col) => {
             if (!col.key) {
                 throw new Error(`Column with header "${col.header}" is missing a unique "key"`);
             }
@@ -168,14 +199,12 @@ class YsTable {
         }
     }
     getLabel(action, item) {
-        return typeof action.label === 'function'
-            ? action.label(item)
-            : action.label ?? 'Label';
+        return typeof action.label === 'function' ? action.label(item) : (action.label ?? 'Label');
     }
     getIconClass(action, item) {
         return typeof action.iconClass === 'function'
             ? action.iconClass(item)
-            : action.iconClass ?? '';
+            : (action.iconClass ?? '');
     }
     getTooltipText(tooltip) {
         if (!tooltip)
@@ -192,46 +221,39 @@ class YsTable {
     }
     onSelectionChange(item, checked) {
         if (checked) {
-            this.selectedItems.update(items => [
-                ...items,
-                item
-            ]);
+            this.selectedItems.update((items) => [...items, item]);
         }
         else {
-            this.selectedItems.update(items => items.filter(x => this.itemKey(x) !== this.itemKey(item)));
+            this.selectedItems.update((items) => items.filter((x) => this.itemKey(x) !== this.itemKey(item)));
         }
         this.selectedItemsChange.emit(this.selectedItems());
     }
     isSelected(item) {
-        return this.selectedItems().some(x => this.itemKey(x) === this.itemKey(item));
+        return this.selectedItems().some((x) => this.itemKey(x) === this.itemKey(item));
     }
     toggleSelection(item, event) {
         const checked = event.target.checked;
         if (checked) {
-            this.selectedItems.update(items => [...items, item]);
+            this.selectedItems.update((items) => [...items, item]);
         }
         else {
-            this.selectedItems.update(items => items.filter(x => this.itemKey(x) !== this.itemKey(item)));
+            this.selectedItems.update((items) => items.filter((x) => this.itemKey(x) !== this.itemKey(item)));
         }
         this.selectedItemsChange.emit(this.selectedItems());
     }
     allSelected() {
-        const selectable = this.paginatedItems().filter(i => this.isSelectable(i));
-        return selectable.length > 0 &&
-            selectable.every(i => this.isSelected(i));
+        const selectable = this.paginatedItems().filter((i) => this.isSelectable(i));
+        return selectable.length > 0 && selectable.every((i) => this.isSelected(i));
     }
     toggleSelectAll(event) {
         const checked = event.target.checked;
         if (checked) {
-            const itemsToAdd = this.paginatedItems().filter(item => this.isSelectable(item) &&
-                !this.selectedItems().some(x => this.itemKey(x) === this.itemKey(item)));
-            this.selectedItems.update(items => [
-                ...items,
-                ...itemsToAdd
-            ]);
+            const itemsToAdd = this.paginatedItems().filter((item) => this.isSelectable(item) &&
+                !this.selectedItems().some((x) => this.itemKey(x) === this.itemKey(item)));
+            this.selectedItems.update((items) => [...items, ...itemsToAdd]);
         }
         else {
-            this.selectedItems.update(items => items.filter(item => !this.paginatedItems().some(p => this.itemKey(p) === this.itemKey(item))));
+            this.selectedItems.update((items) => items.filter((item) => !this.paginatedItems().some((p) => this.itemKey(p) === this.itemKey(item))));
         }
         this.selectedItemsChange.emit(this.selectedItems());
     }
@@ -240,16 +262,12 @@ class YsTable {
         if (!styleClass) {
             return '';
         }
-        return typeof styleClass === 'function'
-            ? styleClass(row)
-            : styleClass;
+        return typeof styleClass === 'function' ? styleClass(row) : styleClass;
     }
     getColumnClass(col, row) {
         if (!col.styleClass)
             return '';
-        return typeof col.styleClass === 'function'
-            ? col.styleClass(row)
-            : col.styleClass;
+        return typeof col.styleClass === 'function' ? col.styleClass(row) : col.styleClass;
     }
     isSortable(col) {
         return !!col.sortable && !!col.field;
@@ -262,37 +280,28 @@ class YsTable {
         return predicate ? predicate(row) : true;
     }
     resolveValue(value, row) {
-        return typeof value === 'function'
-            ? value(row)
-            : value;
+        return typeof value === 'function' ? value(row) : value;
     }
     getVisibleIndicators(row) {
-        return this.rowIndicators().filter(ind => {
+        return this.rowIndicators().filter((ind) => {
             if (ind.visible === undefined)
                 return true;
             return this.resolveValue(ind.visible, row);
         });
     }
-    firstRecord = computed(() => this.collectionSize() === 0
-        ? 0
-        : this.firstIndex() + 1, ...(ngDevMode ? [{ debugName: "firstRecord" }] : /* istanbul ignore next */ []));
+    firstRecord = computed(() => (this.collectionSize() === 0 ? 0 : this.firstIndex() + 1), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "firstRecord" }] : /* istanbul ignore next */ []));
     pageReportText = computed(() => this.pageReportTemplate()
         .replace('{first}', this.firstRecord() + '')
         .replace('{last}', this.lastIndex() + '')
-        .replace('{totalRecords}', this.collectionSize() + ''), ...(ngDevMode ? [{ debugName: "pageReportText" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: YsTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: YsTable, isStandalone: true, selector: "ys-table", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, actionButtons: { classPropertyName: "actionButtons", publicName: "actionButtons", isSignal: true, isRequired: false, transformFunction: null }, toolbarButtons: { classPropertyName: "toolbarButtons", publicName: "toolbarButtons", isSignal: true, isRequired: false, transformFunction: null }, rowStyleClass: { classPropertyName: "rowStyleClass", publicName: "rowStyleClass", isSignal: true, isRequired: false, transformFunction: null }, rowIndicators: { classPropertyName: "rowIndicators", publicName: "rowIndicators", isSignal: true, isRequired: false, transformFunction: null }, serverSide: { classPropertyName: "serverSide", publicName: "serverSide", isSignal: true, isRequired: false, transformFunction: null }, isPagination: { classPropertyName: "isPagination", publicName: "isPagination", isSignal: true, isRequired: false, transformFunction: null }, rowsPerPage: { classPropertyName: "rowsPerPage", publicName: "rowsPerPage", isSignal: true, isRequired: false, transformFunction: null }, pageReportTemplate: { classPropertyName: "pageReportTemplate", publicName: "pageReportTemplate", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, collectionSize: { classPropertyName: "collectionSize", publicName: "collectionSize", isSignal: true, isRequired: false, transformFunction: null }, hasSearch: { classPropertyName: "hasSearch", publicName: "hasSearch", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, searchStyleClass: { classPropertyName: "searchStyleClass", publicName: "searchStyleClass", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, toolbarStyleClass: { classPropertyName: "toolbarStyleClass", publicName: "toolbarStyleClass", isSignal: true, isRequired: false, transformFunction: null }, tableStyleClass: { classPropertyName: "tableStyleClass", publicName: "tableStyleClass", isSignal: true, isRequired: false, transformFunction: null }, selectableRows: { classPropertyName: "selectableRows", publicName: "selectableRows", isSignal: true, isRequired: false, transformFunction: null }, isRowSelectable: { classPropertyName: "isRowSelectable", publicName: "isRowSelectable", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", pageSize: "pageSizeChange", collectionSize: "collectionSizeChange", pageChanged: "pageChanged", search: "search", selectedItemsChange: "selectedItemsChange" }, ngImport: i0, template: "<div class=\"ys-table-container card shadow-sm\" [class]=\"styleClass()\">\n    <div class=\"card-body\">\n        <div class=\"table-responsive\">\n            <div class=\"ys-table-toolbar d-flex justify-content-between\" [class]=\"toolbarStyleClass()\">\n\n                @if (toolbarButtons() && toolbarButtons().length) {\n                <div class=\"mb-2 d-flex gap-2 w-100\">\n\n                    @for (btn of toolbarButtons(); track $index) {\n\n                    @if (!btn.visible || btn.visible()) {\n                    <button class=\"btn btn-primary btn-sm\" [class]=\"btn.styleClass\" (click)=\"btn.onClick?.()\"\n                        [disabled]=\"btn.disabled?.()\" [ngbTooltip]=\"getTooltipText(btn.tooltip)\">\n\n                        @if (btn.iconClass) {\n                        <i [class]=\"btn.iconClass\"></i>\n                        }\n\n                        {{ getLabelText(btn.label) }}\n\n                    </button>\n                    }\n\n                    }\n\n                </div>\n                }\n\n                @if (hasSearch()){\n\n                <input type=\"text\" class=\"form-control w-auto mb-2\" [class]=\"searchStyleClass()\"\n                    [placeholder]=\"searchPlaceholder()\" (input)=\"onSearch($event.target)\" />\n\n                }\n            </div>\n\n            <table class=\"ys-table table table-striped table-hover align-middle\" [class]=\"tableStyleClass()\">\n                <thead class=\"table-light\">\n                    <tr>\n                        <th class=\"number-col\">#</th>\n\n                        @if (selectableRows()) {\n                        <th class=\"select-col\">\n                            <input type=\"checkbox\" [checked]=\"allSelected()\" (change)=\"toggleSelectAll($event)\"\n                                id=\"allSelect\" />\n                        </th>\n                        }\n\n                        @if (rowIndicators().length) {\n                        <th class=\"indicator-col\"></th>\n                        }\n\n                        @if(actionButtons().length){\n                        <th></th>\n                        }\n\n                        @for (col of columns(); track col.key) {\n                        <th [class.cursor-pointer]=\"isSortable(col)\" (click)=\"isSortable(col) && onSort(col.field)\"\n                            [class]=\"col.headerStyleClass\">\n                            {{ col.header }}\n\n                            @if (isSortable(col)) {\n                            <i class=\"fa\" [ngClass]=\"{\n                                'fa-sort': sortedColumn() !== col.field,\n                                'fa-sort-up': sortedColumn() === col.field && sortDirection() === 'asc',\n                                'fa-sort-down': sortedColumn() === col.field && sortDirection() === 'desc'\n                                }\"></i>\n                            }\n\n                        </th>\n                        }\n\n                    </tr>\n                </thead>\n\n                <tbody>\n                    @for (item of paginatedItems(); track $index; let i = $index) {\n                    <tr [class]=\"getRowClass(item)\">\n                        <td class=\"number-col\">{{ (page() - 1) * pageSize() + i + 1 }}</td>\n\n                        @if (selectableRows()) {\n                        <td class=\"select-col\">\n                            <input #checkbox type=\"checkbox\" [checked]=\"isSelected(item)\"\n                                (change)=\"toggleSelection(item, $event)\" [disabled]=\"!isSelectable(item)\"\n                                [class.opacity-50]=\"!isSelectable(item)\" id=\"{{'select' + $index}}\" />\n                        </td>\n                        }\n\n                        @if (rowIndicators().length) {\n                        <td class=\"indicator-col text-center\">\n                            <div class=\"d-flex justify-content-center align-items-center gap-1\">\n\n                                @for (ind of getVisibleIndicators(item); track $index) {\n\n                                @if ((ind.type || 'icon') === 'icon') {\n                                <i [class.cursor-pointer]=\"ind.onClick\"\n                                    [class]=\"resolveValue(ind.iconClass, item) + ' ' + (resolveValue(ind.styleClass, item) || '')\"\n                                    [ngbTooltip]=\"resolveValue(ind.tooltip, item)\" (click)=\"ind.onClick?.(item)\">\n                                </i>\n                                }@else if (ind.type === 'badge') {\n\n                                <span class=\"badge rounded-pill position-relative\"\n                                    [class]=\"resolveValue(ind.styleClass, item)\"\n                                    [ngbTooltip]=\"resolveValue(ind.tooltip, item)\" (click)=\"ind.onClick?.(item)\">\n\n                                    @if(resolveValue(ind.iconClass, item)){\n                                    <i [class]=\"resolveValue(ind.iconClass, item)\"></i>\n                                    }\n\n                                    @if(resolveValue(ind.badgeLabel, item)){\n                                    {{ resolveValue(ind.badgeLabel, item) }}\n                                    }\n\n                                    @if(resolveValue(ind.badgeValue, item)){\n                                    <span class=\"position-absolute top-0 start-100 translate-middle badge rounded-pill\"\n                                        [class]=\"resolveValue(ind.badgeValueClass, item)\">\n                                        {{ resolveValue(ind.badgeValue, item) }}\n                                    </span>\n                                    }\n\n                                </span>\n\n                                }\n\n                                }\n\n                            </div>\n                        </td>\n                        }\n\n\n                        @if (actionButtons().length) {\n                        <td>\n                            <div class=\"dropdown\">\n                                <button class=\"btn btn-light btn-sm btn-menu\" type=\"button\" data-bs-toggle=\"dropdown\">\n                                    <i class=\"fa fa-bars\"></i>\n                                </button>\n                                <ul class=\"dropdown-menu\">\n\n                                    @for (action of actionButtons(); track $index) {\n\n                                    @if (!action.visible || action.visible(item)) {\n\n                                    @if (action.isDivider) {\n                                    <li>\n                                        <hr class=\"dropdown-divider\" />\n                                    </li>\n                                    } @else {\n                                    <li>\n                                        <button class=\"dropdown-item d-flex align-items-center gap-2\" type=\"button\"\n                                            [class]=\"action.styleClass\" (click)=\"action.onClick?.(item)\"\n                                            [disabled]=\"action.disabled?.(item)\">\n                                            @if (action.iconClass) {\n                                            <i [class]=\"getIconClass(action, item)\"></i>\n                                            }\n                                            {{ getLabel( action,item) }}\n                                        </button>\n                                    </li>\n                                    }\n\n                                    }\n\n                                    }\n\n                                </ul>\n                            </div>\n                        </td>\n                        }\n\n                        @for (col of columns(); track col.key) {\n                        <td [class]=\"getColumnClass(col, item)\">\n                            @if (!col.visible || col.visible(item)) {\n\n                            @if (col.cellTemplate) {\n\n                            <ng-container [ngTemplateOutlet]=\"col.cellTemplate\"\n                                [ngTemplateOutletContext]=\"{ $implicit: item }\">\n                            </ng-container>\n\n                            }\n                            @else if (col.template) {\n\n                            {{ applyTemplate(col.template, item) }}\n\n                            } @else if (col.field && col.pipe) {\n\n                            {{ applyPipe(col.pipe, resolveFieldPath(item, col.field), col.pipeArgs || []) }}\n\n                            } @else if(col.field) {\n\n                            {{ resolveFieldPath(item, col.field) }}\n\n                            }\n\n                            }\n                        </td>\n                        }\n                    </tr>\n                    }\n                </tbody>\n\n                <caption>\n                    @if (isPagination()) {\n                    <div class=\"ys-table-pagination d-flex flex-wrap justify-content-between align-items-center gap-2\">\n\n                        <!-- \u0635\u0641\u062D\u0647\u200C\u0628\u0646\u062F\u06CC -->\n                        <ngb-pagination [collectionSize]=\"collectionSize()\" [page]=\"page()\" [pageSize]=\"pageSize()\"\n                            [maxSize]=\"5\" [rotate]=\"true\" [ellipses]=\"false\" [boundaryLinks]=\"true\"\n                            (pageChange)=\"changePage($event)\" />\n\n                        <!-- \u0627\u0646\u062A\u062E\u0627\u0628 \u062A\u0639\u062F\u0627\u062F \u062F\u0631 \u0647\u0631 \u0635\u0641\u062D\u0647 -->\n                        <select class=\"pagination-select form-select form-select-sm w-auto\" [(ngModel)]=\"pageSize\"\n                            (change)=\"changePageSize(pageSize())\" id=\"pagination\">\n                            @for (opt of rowsPerPage(); track opt) {\n                            <option [value]=\"opt\">{{ opt }}</option>\n                            }\n                        </select>\n\n                        <!-- \u06AF\u0632\u0627\u0631\u0634 -->\n                        <small class=\"pagination-report text-muted ms-auto\">\n                            {{ pageReportText() }}\n                        </small>\n                    </div>\n                    }\n                </caption>\n\n            </table>\n\n        </div>\n    </div>\n</div>", styles: [".ys-table .number-col,.ys-table .select-col{width:3em;min-width:3em;max-width:3em;word-break:break-all;text-align:center}.ys-table .indicator-col{width:32px;white-space:nowrap}.ys-table .indicator-col i{font-size:.9rem;cursor:default}.btn-menu{width:32px}.cursor-pointer{cursor:pointer!important}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: NgbDropdownModule }, { kind: "component", type: NgbPagination, selector: "ngb-pagination", inputs: ["disabled", "boundaryLinks", "directionLinks", "ellipses", "rotate", "collectionSize", "maxSize", "page", "pageSize", "size"], outputs: ["pageChange"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }] });
+        .replace('{totalRecords}', this.collectionSize() + ''), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageReportText" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: YsTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: YsTable, isStandalone: true, selector: "ys-table", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, actionButtons: { classPropertyName: "actionButtons", publicName: "actionButtons", isSignal: true, isRequired: false, transformFunction: null }, toolbarButtons: { classPropertyName: "toolbarButtons", publicName: "toolbarButtons", isSignal: true, isRequired: false, transformFunction: null }, rowStyleClass: { classPropertyName: "rowStyleClass", publicName: "rowStyleClass", isSignal: true, isRequired: false, transformFunction: null }, rowIndicators: { classPropertyName: "rowIndicators", publicName: "rowIndicators", isSignal: true, isRequired: false, transformFunction: null }, serverSide: { classPropertyName: "serverSide", publicName: "serverSide", isSignal: true, isRequired: false, transformFunction: null }, isPagination: { classPropertyName: "isPagination", publicName: "isPagination", isSignal: true, isRequired: false, transformFunction: null }, rowsPerPage: { classPropertyName: "rowsPerPage", publicName: "rowsPerPage", isSignal: true, isRequired: false, transformFunction: null }, pageReportTemplate: { classPropertyName: "pageReportTemplate", publicName: "pageReportTemplate", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, collectionSize: { classPropertyName: "collectionSize", publicName: "collectionSize", isSignal: true, isRequired: false, transformFunction: null }, hasSearch: { classPropertyName: "hasSearch", publicName: "hasSearch", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, searchStyleClass: { classPropertyName: "searchStyleClass", publicName: "searchStyleClass", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, toolbarStyleClass: { classPropertyName: "toolbarStyleClass", publicName: "toolbarStyleClass", isSignal: true, isRequired: false, transformFunction: null }, tableStyleClass: { classPropertyName: "tableStyleClass", publicName: "tableStyleClass", isSignal: true, isRequired: false, transformFunction: null }, selectableRows: { classPropertyName: "selectableRows", publicName: "selectableRows", isSignal: true, isRequired: false, transformFunction: null }, isRowSelectable: { classPropertyName: "isRowSelectable", publicName: "isRowSelectable", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", pageSize: "pageSizeChange", collectionSize: "collectionSizeChange", pageChanged: "pageChanged", search: "search", selectedItemsChange: "selectedItemsChange" }, ngImport: i0, template: "<div class=\"ys-table-container card shadow-sm\" [class]=\"styleClass()\">\r\n  <div class=\"card-body\">\r\n    <div class=\"table-responsive\">\r\n      <div class=\"ys-table-toolbar d-flex justify-content-between\" [class]=\"toolbarStyleClass()\">\r\n        @if (toolbarButtons() && toolbarButtons().length) {\r\n        <div class=\"mb-2 d-flex gap-2 w-100\">\r\n          @for (btn of toolbarButtons(); track $index) {\r\n          @if (!btn.visible || btn.visible()) {\r\n          <button class=\"btn btn-primary btn-sm\" [class]=\"btn.styleClass\" (click)=\"btn.onClick?.()\"\r\n            [disabled]=\"btn.disabled?.()\" [ngbTooltip]=\"getTooltipText(btn.tooltip)\">\r\n            @if (btn.iconClass) {\r\n            <i [class]=\"btn.iconClass\"></i>\r\n            }\r\n\r\n            {{ getLabelText(btn.label) }}\r\n          </button>\r\n          }\r\n          }\r\n        </div>\r\n        }\r\n\r\n        @if (hasSearch()) {\r\n        <input type=\"text\" class=\"form-control w-auto mb-2 ms-auto\" [class]=\"searchStyleClass()\"\r\n          [placeholder]=\"searchPlaceholder()\" (input)=\"onSearch($event.target)\" />\r\n        }\r\n      </div>\r\n\r\n      <table class=\"ys-table table table-striped table-hover align-middle\" [class]=\"tableStyleClass()\">\r\n        <thead class=\"table-light\">\r\n          <tr>\r\n            <th class=\"number-col\">#</th>\r\n\r\n            @if (selectableRows()) {\r\n            <th class=\"select-col\">\r\n              <input type=\"checkbox\" [checked]=\"allSelected()\" (change)=\"toggleSelectAll($event)\" id=\"allSelect\" />\r\n            </th>\r\n            }\r\n\r\n            @if (rowIndicators().length) {\r\n            <th class=\"indicator-col\"></th>\r\n            }\r\n\r\n            @if (actionButtons().length) {\r\n            <th></th>\r\n            }\r\n\r\n            @for (col of columns(); track col.key) {\r\n            <th [class.cursor-pointer]=\"isSortable(col)\" (click)=\"isSortable(col) && onSort(col.field)\"\r\n              [class]=\"col.headerStyleClass\">\r\n              {{ col.header }}\r\n\r\n              @if (isSortable(col)) {\r\n              <i class=\"fa\" [ngClass]=\"{\r\n                      'fa-sort': sortedColumn() !== col.field,\r\n                      'fa-sort-up': sortedColumn() === col.field && sortDirection() === 'asc',\r\n                      'fa-sort-down': sortedColumn() === col.field && sortDirection() === 'desc',\r\n                    }\"></i>\r\n              }\r\n            </th>\r\n            }\r\n          </tr>\r\n        </thead>\r\n\r\n        <tbody>\r\n          @for (item of paginatedItems(); track $index; let i = $index) {\r\n          <tr [class]=\"getRowClass(item)\">\r\n            <td class=\"number-col\">{{ (page() - 1) * pageSize() + i + 1 }}</td>\r\n\r\n            @if (selectableRows()) {\r\n            <td class=\"select-col\">\r\n              <input #checkbox type=\"checkbox\" [checked]=\"isSelected(item)\" (change)=\"toggleSelection(item, $event)\"\r\n                [disabled]=\"!isSelectable(item)\" [class.opacity-50]=\"!isSelectable(item)\"\r\n                id=\"{{ 'select' + $index }}\" />\r\n            </td>\r\n            }\r\n\r\n            @if (rowIndicators().length) {\r\n            <td class=\"indicator-col text-center\">\r\n              <div class=\"d-flex justify-content-center align-items-center gap-1\">\r\n                @for (ind of getVisibleIndicators(item); track $index) {\r\n                @if ((ind.type || 'icon') === 'icon') {\r\n                <i [class.cursor-pointer]=\"ind.onClick\" [class]=\"\r\n                            resolveValue(ind.iconClass, item) +\r\n                            ' ' +\r\n                            (resolveValue(ind.styleClass, item) || '')\r\n                          \" [ngbTooltip]=\"resolveValue(ind.tooltip, item)\" (click)=\"ind.onClick?.(item)\">\r\n                </i>\r\n                } @else if (ind.type === 'badge') {\r\n                <span class=\"badge rounded-pill position-relative\" [class]=\"resolveValue(ind.styleClass, item)\"\r\n                  [ngbTooltip]=\"resolveValue(ind.tooltip, item)\" (click)=\"ind.onClick?.(item)\">\r\n                  @if (resolveValue(ind.iconClass, item)) {\r\n                  <i [class]=\"resolveValue(ind.iconClass, item)\"></i>\r\n                  }\r\n\r\n                  @if (resolveValue(ind.badgeLabel, item)) {\r\n                  {{ resolveValue(ind.badgeLabel, item) }}\r\n                  }\r\n\r\n                  @if (resolveValue(ind.badgeValue, item)) {\r\n                  <span class=\"position-absolute top-0 start-100 translate-middle badge rounded-pill\"\r\n                    [class]=\"resolveValue(ind.badgeValueClass, item)\">\r\n                    {{ resolveValue(ind.badgeValue, item) }}\r\n                  </span>\r\n                  }\r\n                </span>\r\n                }\r\n                }\r\n              </div>\r\n            </td>\r\n            }\r\n\r\n            @if (actionButtons().length) {\r\n            <td>\r\n              <div class=\"dropdown\">\r\n                <button class=\"btn btn-light btn-sm btn-menu\" type=\"button\" data-bs-toggle=\"dropdown\">\r\n                  <i class=\"fa fa-bars\"></i>\r\n                </button>\r\n                <ul class=\"dropdown-menu\">\r\n                  @for (action of actionButtons(); track $index) {\r\n                  @if (!action.visible || action.visible(item)) {\r\n                  @if (action.isDivider) {\r\n                  <li>\r\n                    <hr class=\"dropdown-divider\" />\r\n                  </li>\r\n                  } @else {\r\n                  <li>\r\n                    <button class=\"dropdown-item d-flex align-items-center gap-2\" type=\"button\"\r\n                      [class]=\"action.styleClass\" (click)=\"action.onClick?.(item)\" [disabled]=\"action.disabled?.(item)\">\r\n                      @if (action.iconClass) {\r\n                      <i [class]=\"getIconClass(action, item)\"></i>\r\n                      }\r\n                      {{ getLabel(action, item) }}\r\n                    </button>\r\n                  </li>\r\n                  }\r\n                  }\r\n                  }\r\n                </ul>\r\n              </div>\r\n            </td>\r\n            }\r\n\r\n            @for (col of columns(); track col.key) {\r\n            <td [class]=\"getColumnClass(col, item)\">\r\n              @if (!col.visible || col.visible(item)) {\r\n              @if (col.cellTemplate) {\r\n              <ng-container [ngTemplateOutlet]=\"col.cellTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\">\r\n              </ng-container>\r\n              } @else if (col.template) {\r\n              {{ applyTemplate(col.template, item) }}\r\n              } @else if (col.field && col.pipe) {\r\n              {{\r\n              applyPipe(col.pipe, resolveFieldPath(item, col.field), col.pipeArgs || [])\r\n              }}\r\n              } @else if (col.field) {\r\n              {{ resolveFieldPath(item, col.field) }}\r\n              }\r\n              }\r\n            </td>\r\n            }\r\n          </tr>\r\n          }\r\n        </tbody>\r\n\r\n        <caption>\r\n          @if (isPagination()) {\r\n          <div class=\"ys-table-pagination d-flex flex-wrap justify-content-between align-items-center gap-2\">\r\n            <!-- \u0635\u0641\u062D\u0647\u200C\u0628\u0646\u062F\u06CC -->\r\n            <ngb-pagination [collectionSize]=\"collectionSize()\" [page]=\"page()\" [pageSize]=\"pageSize()\" [maxSize]=\"5\"\r\n              [rotate]=\"true\" [ellipses]=\"false\" [boundaryLinks]=\"true\" (pageChange)=\"changePage($event)\" />\r\n\r\n            <!-- \u0627\u0646\u062A\u062E\u0627\u0628 \u062A\u0639\u062F\u0627\u062F \u062F\u0631 \u0647\u0631 \u0635\u0641\u062D\u0647 -->\r\n            <select class=\"pagination-select form-select form-select-sm w-auto\" [(ngModel)]=\"pageSize\"\r\n              (change)=\"changePageSize(pageSize())\" id=\"pagination\">\r\n              @for (opt of rowsPerPage(); track opt) {\r\n              <option [value]=\"opt\">{{ opt }}</option>\r\n              }\r\n            </select>\r\n\r\n            <!-- \u06AF\u0632\u0627\u0631\u0634 -->\r\n            <small class=\"pagination-report text-muted ms-auto\">\r\n              {{ pageReportText() }}\r\n            </small>\r\n          </div>\r\n          }\r\n        </caption>\r\n      </table>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".ys-table .number-col,.ys-table .select-col{width:3em;min-width:3em;max-width:3em;word-break:break-all;text-align:center}.ys-table .indicator-col{width:32px;white-space:nowrap}.ys-table .indicator-col i{font-size:.9rem;cursor:default}.btn-menu{width:32px}.cursor-pointer{cursor:pointer!important}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: NgbDropdownModule }, { kind: "component", type: NgbPagination, selector: "ngb-pagination", inputs: ["disabled", "boundaryLinks", "directionLinks", "ellipses", "rotate", "collectionSize", "maxSize", "page", "pageSize", "size"], outputs: ["pageChange"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: YsTable, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: YsTable, decorators: [{
             type: Component,
-            args: [{ selector: 'ys-table', imports: [
-                        NgClass,
-                        FormsModule,
-                        NgTemplateOutlet,
-                        NgbDropdownModule,
-                        NgbPagination,
-                        NgbTooltip
-                    ], template: "<div class=\"ys-table-container card shadow-sm\" [class]=\"styleClass()\">\n    <div class=\"card-body\">\n        <div class=\"table-responsive\">\n            <div class=\"ys-table-toolbar d-flex justify-content-between\" [class]=\"toolbarStyleClass()\">\n\n                @if (toolbarButtons() && toolbarButtons().length) {\n                <div class=\"mb-2 d-flex gap-2 w-100\">\n\n                    @for (btn of toolbarButtons(); track $index) {\n\n                    @if (!btn.visible || btn.visible()) {\n                    <button class=\"btn btn-primary btn-sm\" [class]=\"btn.styleClass\" (click)=\"btn.onClick?.()\"\n                        [disabled]=\"btn.disabled?.()\" [ngbTooltip]=\"getTooltipText(btn.tooltip)\">\n\n                        @if (btn.iconClass) {\n                        <i [class]=\"btn.iconClass\"></i>\n                        }\n\n                        {{ getLabelText(btn.label) }}\n\n                    </button>\n                    }\n\n                    }\n\n                </div>\n                }\n\n                @if (hasSearch()){\n\n                <input type=\"text\" class=\"form-control w-auto mb-2\" [class]=\"searchStyleClass()\"\n                    [placeholder]=\"searchPlaceholder()\" (input)=\"onSearch($event.target)\" />\n\n                }\n            </div>\n\n            <table class=\"ys-table table table-striped table-hover align-middle\" [class]=\"tableStyleClass()\">\n                <thead class=\"table-light\">\n                    <tr>\n                        <th class=\"number-col\">#</th>\n\n                        @if (selectableRows()) {\n                        <th class=\"select-col\">\n                            <input type=\"checkbox\" [checked]=\"allSelected()\" (change)=\"toggleSelectAll($event)\"\n                                id=\"allSelect\" />\n                        </th>\n                        }\n\n                        @if (rowIndicators().length) {\n                        <th class=\"indicator-col\"></th>\n                        }\n\n                        @if(actionButtons().length){\n                        <th></th>\n                        }\n\n                        @for (col of columns(); track col.key) {\n                        <th [class.cursor-pointer]=\"isSortable(col)\" (click)=\"isSortable(col) && onSort(col.field)\"\n                            [class]=\"col.headerStyleClass\">\n                            {{ col.header }}\n\n                            @if (isSortable(col)) {\n                            <i class=\"fa\" [ngClass]=\"{\n                                'fa-sort': sortedColumn() !== col.field,\n                                'fa-sort-up': sortedColumn() === col.field && sortDirection() === 'asc',\n                                'fa-sort-down': sortedColumn() === col.field && sortDirection() === 'desc'\n                                }\"></i>\n                            }\n\n                        </th>\n                        }\n\n                    </tr>\n                </thead>\n\n                <tbody>\n                    @for (item of paginatedItems(); track $index; let i = $index) {\n                    <tr [class]=\"getRowClass(item)\">\n                        <td class=\"number-col\">{{ (page() - 1) * pageSize() + i + 1 }}</td>\n\n                        @if (selectableRows()) {\n                        <td class=\"select-col\">\n                            <input #checkbox type=\"checkbox\" [checked]=\"isSelected(item)\"\n                                (change)=\"toggleSelection(item, $event)\" [disabled]=\"!isSelectable(item)\"\n                                [class.opacity-50]=\"!isSelectable(item)\" id=\"{{'select' + $index}}\" />\n                        </td>\n                        }\n\n                        @if (rowIndicators().length) {\n                        <td class=\"indicator-col text-center\">\n                            <div class=\"d-flex justify-content-center align-items-center gap-1\">\n\n                                @for (ind of getVisibleIndicators(item); track $index) {\n\n                                @if ((ind.type || 'icon') === 'icon') {\n                                <i [class.cursor-pointer]=\"ind.onClick\"\n                                    [class]=\"resolveValue(ind.iconClass, item) + ' ' + (resolveValue(ind.styleClass, item) || '')\"\n                                    [ngbTooltip]=\"resolveValue(ind.tooltip, item)\" (click)=\"ind.onClick?.(item)\">\n                                </i>\n                                }@else if (ind.type === 'badge') {\n\n                                <span class=\"badge rounded-pill position-relative\"\n                                    [class]=\"resolveValue(ind.styleClass, item)\"\n                                    [ngbTooltip]=\"resolveValue(ind.tooltip, item)\" (click)=\"ind.onClick?.(item)\">\n\n                                    @if(resolveValue(ind.iconClass, item)){\n                                    <i [class]=\"resolveValue(ind.iconClass, item)\"></i>\n                                    }\n\n                                    @if(resolveValue(ind.badgeLabel, item)){\n                                    {{ resolveValue(ind.badgeLabel, item) }}\n                                    }\n\n                                    @if(resolveValue(ind.badgeValue, item)){\n                                    <span class=\"position-absolute top-0 start-100 translate-middle badge rounded-pill\"\n                                        [class]=\"resolveValue(ind.badgeValueClass, item)\">\n                                        {{ resolveValue(ind.badgeValue, item) }}\n                                    </span>\n                                    }\n\n                                </span>\n\n                                }\n\n                                }\n\n                            </div>\n                        </td>\n                        }\n\n\n                        @if (actionButtons().length) {\n                        <td>\n                            <div class=\"dropdown\">\n                                <button class=\"btn btn-light btn-sm btn-menu\" type=\"button\" data-bs-toggle=\"dropdown\">\n                                    <i class=\"fa fa-bars\"></i>\n                                </button>\n                                <ul class=\"dropdown-menu\">\n\n                                    @for (action of actionButtons(); track $index) {\n\n                                    @if (!action.visible || action.visible(item)) {\n\n                                    @if (action.isDivider) {\n                                    <li>\n                                        <hr class=\"dropdown-divider\" />\n                                    </li>\n                                    } @else {\n                                    <li>\n                                        <button class=\"dropdown-item d-flex align-items-center gap-2\" type=\"button\"\n                                            [class]=\"action.styleClass\" (click)=\"action.onClick?.(item)\"\n                                            [disabled]=\"action.disabled?.(item)\">\n                                            @if (action.iconClass) {\n                                            <i [class]=\"getIconClass(action, item)\"></i>\n                                            }\n                                            {{ getLabel( action,item) }}\n                                        </button>\n                                    </li>\n                                    }\n\n                                    }\n\n                                    }\n\n                                </ul>\n                            </div>\n                        </td>\n                        }\n\n                        @for (col of columns(); track col.key) {\n                        <td [class]=\"getColumnClass(col, item)\">\n                            @if (!col.visible || col.visible(item)) {\n\n                            @if (col.cellTemplate) {\n\n                            <ng-container [ngTemplateOutlet]=\"col.cellTemplate\"\n                                [ngTemplateOutletContext]=\"{ $implicit: item }\">\n                            </ng-container>\n\n                            }\n                            @else if (col.template) {\n\n                            {{ applyTemplate(col.template, item) }}\n\n                            } @else if (col.field && col.pipe) {\n\n                            {{ applyPipe(col.pipe, resolveFieldPath(item, col.field), col.pipeArgs || []) }}\n\n                            } @else if(col.field) {\n\n                            {{ resolveFieldPath(item, col.field) }}\n\n                            }\n\n                            }\n                        </td>\n                        }\n                    </tr>\n                    }\n                </tbody>\n\n                <caption>\n                    @if (isPagination()) {\n                    <div class=\"ys-table-pagination d-flex flex-wrap justify-content-between align-items-center gap-2\">\n\n                        <!-- \u0635\u0641\u062D\u0647\u200C\u0628\u0646\u062F\u06CC -->\n                        <ngb-pagination [collectionSize]=\"collectionSize()\" [page]=\"page()\" [pageSize]=\"pageSize()\"\n                            [maxSize]=\"5\" [rotate]=\"true\" [ellipses]=\"false\" [boundaryLinks]=\"true\"\n                            (pageChange)=\"changePage($event)\" />\n\n                        <!-- \u0627\u0646\u062A\u062E\u0627\u0628 \u062A\u0639\u062F\u0627\u062F \u062F\u0631 \u0647\u0631 \u0635\u0641\u062D\u0647 -->\n                        <select class=\"pagination-select form-select form-select-sm w-auto\" [(ngModel)]=\"pageSize\"\n                            (change)=\"changePageSize(pageSize())\" id=\"pagination\">\n                            @for (opt of rowsPerPage(); track opt) {\n                            <option [value]=\"opt\">{{ opt }}</option>\n                            }\n                        </select>\n\n                        <!-- \u06AF\u0632\u0627\u0631\u0634 -->\n                        <small class=\"pagination-report text-muted ms-auto\">\n                            {{ pageReportText() }}\n                        </small>\n                    </div>\n                    }\n                </caption>\n\n            </table>\n\n        </div>\n    </div>\n</div>", styles: [".ys-table .number-col,.ys-table .select-col{width:3em;min-width:3em;max-width:3em;word-break:break-all;text-align:center}.ys-table .indicator-col{width:32px;white-space:nowrap}.ys-table .indicator-col i{font-size:.9rem;cursor:default}.btn-menu{width:32px}.cursor-pointer{cursor:pointer!important}\n"] }]
+            args: [{ selector: 'ys-table', imports: [NgClass, FormsModule, NgTemplateOutlet, NgbDropdownModule, NgbPagination, NgbTooltip], changeDetection: ChangeDetectionStrategy.Eager, template: "<div class=\"ys-table-container card shadow-sm\" [class]=\"styleClass()\">\r\n  <div class=\"card-body\">\r\n    <div class=\"table-responsive\">\r\n      <div class=\"ys-table-toolbar d-flex justify-content-between\" [class]=\"toolbarStyleClass()\">\r\n        @if (toolbarButtons() && toolbarButtons().length) {\r\n        <div class=\"mb-2 d-flex gap-2 w-100\">\r\n          @for (btn of toolbarButtons(); track $index) {\r\n          @if (!btn.visible || btn.visible()) {\r\n          <button class=\"btn btn-primary btn-sm\" [class]=\"btn.styleClass\" (click)=\"btn.onClick?.()\"\r\n            [disabled]=\"btn.disabled?.()\" [ngbTooltip]=\"getTooltipText(btn.tooltip)\">\r\n            @if (btn.iconClass) {\r\n            <i [class]=\"btn.iconClass\"></i>\r\n            }\r\n\r\n            {{ getLabelText(btn.label) }}\r\n          </button>\r\n          }\r\n          }\r\n        </div>\r\n        }\r\n\r\n        @if (hasSearch()) {\r\n        <input type=\"text\" class=\"form-control w-auto mb-2 ms-auto\" [class]=\"searchStyleClass()\"\r\n          [placeholder]=\"searchPlaceholder()\" (input)=\"onSearch($event.target)\" />\r\n        }\r\n      </div>\r\n\r\n      <table class=\"ys-table table table-striped table-hover align-middle\" [class]=\"tableStyleClass()\">\r\n        <thead class=\"table-light\">\r\n          <tr>\r\n            <th class=\"number-col\">#</th>\r\n\r\n            @if (selectableRows()) {\r\n            <th class=\"select-col\">\r\n              <input type=\"checkbox\" [checked]=\"allSelected()\" (change)=\"toggleSelectAll($event)\" id=\"allSelect\" />\r\n            </th>\r\n            }\r\n\r\n            @if (rowIndicators().length) {\r\n            <th class=\"indicator-col\"></th>\r\n            }\r\n\r\n            @if (actionButtons().length) {\r\n            <th></th>\r\n            }\r\n\r\n            @for (col of columns(); track col.key) {\r\n            <th [class.cursor-pointer]=\"isSortable(col)\" (click)=\"isSortable(col) && onSort(col.field)\"\r\n              [class]=\"col.headerStyleClass\">\r\n              {{ col.header }}\r\n\r\n              @if (isSortable(col)) {\r\n              <i class=\"fa\" [ngClass]=\"{\r\n                      'fa-sort': sortedColumn() !== col.field,\r\n                      'fa-sort-up': sortedColumn() === col.field && sortDirection() === 'asc',\r\n                      'fa-sort-down': sortedColumn() === col.field && sortDirection() === 'desc',\r\n                    }\"></i>\r\n              }\r\n            </th>\r\n            }\r\n          </tr>\r\n        </thead>\r\n\r\n        <tbody>\r\n          @for (item of paginatedItems(); track $index; let i = $index) {\r\n          <tr [class]=\"getRowClass(item)\">\r\n            <td class=\"number-col\">{{ (page() - 1) * pageSize() + i + 1 }}</td>\r\n\r\n            @if (selectableRows()) {\r\n            <td class=\"select-col\">\r\n              <input #checkbox type=\"checkbox\" [checked]=\"isSelected(item)\" (change)=\"toggleSelection(item, $event)\"\r\n                [disabled]=\"!isSelectable(item)\" [class.opacity-50]=\"!isSelectable(item)\"\r\n                id=\"{{ 'select' + $index }}\" />\r\n            </td>\r\n            }\r\n\r\n            @if (rowIndicators().length) {\r\n            <td class=\"indicator-col text-center\">\r\n              <div class=\"d-flex justify-content-center align-items-center gap-1\">\r\n                @for (ind of getVisibleIndicators(item); track $index) {\r\n                @if ((ind.type || 'icon') === 'icon') {\r\n                <i [class.cursor-pointer]=\"ind.onClick\" [class]=\"\r\n                            resolveValue(ind.iconClass, item) +\r\n                            ' ' +\r\n                            (resolveValue(ind.styleClass, item) || '')\r\n                          \" [ngbTooltip]=\"resolveValue(ind.tooltip, item)\" (click)=\"ind.onClick?.(item)\">\r\n                </i>\r\n                } @else if (ind.type === 'badge') {\r\n                <span class=\"badge rounded-pill position-relative\" [class]=\"resolveValue(ind.styleClass, item)\"\r\n                  [ngbTooltip]=\"resolveValue(ind.tooltip, item)\" (click)=\"ind.onClick?.(item)\">\r\n                  @if (resolveValue(ind.iconClass, item)) {\r\n                  <i [class]=\"resolveValue(ind.iconClass, item)\"></i>\r\n                  }\r\n\r\n                  @if (resolveValue(ind.badgeLabel, item)) {\r\n                  {{ resolveValue(ind.badgeLabel, item) }}\r\n                  }\r\n\r\n                  @if (resolveValue(ind.badgeValue, item)) {\r\n                  <span class=\"position-absolute top-0 start-100 translate-middle badge rounded-pill\"\r\n                    [class]=\"resolveValue(ind.badgeValueClass, item)\">\r\n                    {{ resolveValue(ind.badgeValue, item) }}\r\n                  </span>\r\n                  }\r\n                </span>\r\n                }\r\n                }\r\n              </div>\r\n            </td>\r\n            }\r\n\r\n            @if (actionButtons().length) {\r\n            <td>\r\n              <div class=\"dropdown\">\r\n                <button class=\"btn btn-light btn-sm btn-menu\" type=\"button\" data-bs-toggle=\"dropdown\">\r\n                  <i class=\"fa fa-bars\"></i>\r\n                </button>\r\n                <ul class=\"dropdown-menu\">\r\n                  @for (action of actionButtons(); track $index) {\r\n                  @if (!action.visible || action.visible(item)) {\r\n                  @if (action.isDivider) {\r\n                  <li>\r\n                    <hr class=\"dropdown-divider\" />\r\n                  </li>\r\n                  } @else {\r\n                  <li>\r\n                    <button class=\"dropdown-item d-flex align-items-center gap-2\" type=\"button\"\r\n                      [class]=\"action.styleClass\" (click)=\"action.onClick?.(item)\" [disabled]=\"action.disabled?.(item)\">\r\n                      @if (action.iconClass) {\r\n                      <i [class]=\"getIconClass(action, item)\"></i>\r\n                      }\r\n                      {{ getLabel(action, item) }}\r\n                    </button>\r\n                  </li>\r\n                  }\r\n                  }\r\n                  }\r\n                </ul>\r\n              </div>\r\n            </td>\r\n            }\r\n\r\n            @for (col of columns(); track col.key) {\r\n            <td [class]=\"getColumnClass(col, item)\">\r\n              @if (!col.visible || col.visible(item)) {\r\n              @if (col.cellTemplate) {\r\n              <ng-container [ngTemplateOutlet]=\"col.cellTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\">\r\n              </ng-container>\r\n              } @else if (col.template) {\r\n              {{ applyTemplate(col.template, item) }}\r\n              } @else if (col.field && col.pipe) {\r\n              {{\r\n              applyPipe(col.pipe, resolveFieldPath(item, col.field), col.pipeArgs || [])\r\n              }}\r\n              } @else if (col.field) {\r\n              {{ resolveFieldPath(item, col.field) }}\r\n              }\r\n              }\r\n            </td>\r\n            }\r\n          </tr>\r\n          }\r\n        </tbody>\r\n\r\n        <caption>\r\n          @if (isPagination()) {\r\n          <div class=\"ys-table-pagination d-flex flex-wrap justify-content-between align-items-center gap-2\">\r\n            <!-- \u0635\u0641\u062D\u0647\u200C\u0628\u0646\u062F\u06CC -->\r\n            <ngb-pagination [collectionSize]=\"collectionSize()\" [page]=\"page()\" [pageSize]=\"pageSize()\" [maxSize]=\"5\"\r\n              [rotate]=\"true\" [ellipses]=\"false\" [boundaryLinks]=\"true\" (pageChange)=\"changePage($event)\" />\r\n\r\n            <!-- \u0627\u0646\u062A\u062E\u0627\u0628 \u062A\u0639\u062F\u0627\u062F \u062F\u0631 \u0647\u0631 \u0635\u0641\u062D\u0647 -->\r\n            <select class=\"pagination-select form-select form-select-sm w-auto\" [(ngModel)]=\"pageSize\"\r\n              (change)=\"changePageSize(pageSize())\" id=\"pagination\">\r\n              @for (opt of rowsPerPage(); track opt) {\r\n              <option [value]=\"opt\">{{ opt }}</option>\r\n              }\r\n            </select>\r\n\r\n            <!-- \u06AF\u0632\u0627\u0631\u0634 -->\r\n            <small class=\"pagination-report text-muted ms-auto\">\r\n              {{ pageReportText() }}\r\n            </small>\r\n          </div>\r\n          }\r\n        </caption>\r\n      </table>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".ys-table .number-col,.ys-table .select-col{width:3em;min-width:3em;max-width:3em;word-break:break-all;text-align:center}.ys-table .indicator-col{width:32px;white-space:nowrap}.ys-table .indicator-col i{font-size:.9rem;cursor:default}.btn-menu{width:32px}.cursor-pointer{cursor:pointer!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], actionButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionButtons", required: false }] }], toolbarButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbarButtons", required: false }] }], rowStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowStyleClass", required: false }] }], rowIndicators: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowIndicators", required: false }] }], serverSide: [{ type: i0.Input, args: [{ isSignal: true, alias: "serverSide", required: false }] }], isPagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPagination", required: false }] }], rowsPerPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsPerPage", required: false }] }], pageReportTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageReportTemplate", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], collectionSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "collectionSize", required: false }] }, { type: i0.Output, args: ["collectionSizeChange"] }], hasSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasSearch", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], searchStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchStyleClass", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], toolbarStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbarStyleClass", required: false }] }], tableStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableStyleClass", required: false }] }], selectableRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectableRows", required: false }] }], isRowSelectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRowSelectable", required: false }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: false }] }], pageChanged: [{ type: i0.Output, args: ["pageChanged"] }], search: [{ type: i0.Output, args: ["search"] }], selectedItemsChange: [{ type: i0.Output, args: ["selectedItemsChange"] }] } });
 
 /*