@eduboxpro/studio 0.1.25 → 0.1.26

package/fesm2022/eduboxpro-studio.mjs

@@ -5372,6 +5372,371 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
  * Switch component
  */
 
+/**
+ * Pagination component for navigating through pages of data
+ *
+ * @example
+ * <studio-pagination
+ *   [(page)]="currentPage"
+ *   [(pageSize)]="pageSize"
+ *   [totalItems]="100"
+ *   [pageSizeOptions]="[10, 25, 50]"
+ *   (pageChange)="onPageChange($event)"
+ * />
+ */
+class PaginationComponent {
+    // Two-way bindings
+    page = model(1, ...(ngDevMode ? [{ debugName: "page" }] : []));
+    pageSize = model(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+    // Inputs
+    totalItems = input(0, ...(ngDevMode ? [{ debugName: "totalItems" }] : []));
+    pageSizeOptions = input([10, 25, 50, 100], ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    maxVisiblePages = input(5, ...(ngDevMode ? [{ debugName: "maxVisiblePages" }] : []));
+    // Display options
+    showPageSizeSelector = input(true, ...(ngDevMode ? [{ debugName: "showPageSizeSelector" }] : []));
+    showPageNumbers = input(true, ...(ngDevMode ? [{ debugName: "showPageNumbers" }] : []));
+    showInfo = input(true, ...(ngDevMode ? [{ debugName: "showInfo" }] : []));
+    showFirstLast = input(false, ...(ngDevMode ? [{ debugName: "showFirstLast" }] : []));
+    // Labels
+    pageSizeLabel = input('Показать:', ...(ngDevMode ? [{ debugName: "pageSizeLabel" }] : []));
+    previousLabel = input('Предыдущая', ...(ngDevMode ? [{ debugName: "previousLabel" }] : []));
+    nextLabel = input('Следующая', ...(ngDevMode ? [{ debugName: "nextLabel" }] : []));
+    firstLabel = input('Первая', ...(ngDevMode ? [{ debugName: "firstLabel" }] : []));
+    lastLabel = input('Последняя', ...(ngDevMode ? [{ debugName: "lastLabel" }] : []));
+    infoTemplate = input('Показано {from}-{to} из {total}', ...(ngDevMode ? [{ debugName: "infoTemplate" }] : []));
+    // Outputs
+    pageChange = output();
+    pageSizeChange = output();
+    // Computed values
+    totalPages = computed(() => {
+        const total = this.totalItems();
+        const size = this.pageSize();
+        return Math.max(1, Math.ceil(total / size));
+    }, ...(ngDevMode ? [{ debugName: "totalPages" }] : []));
+    isFirstPage = computed(() => this.page() <= 1, ...(ngDevMode ? [{ debugName: "isFirstPage" }] : []));
+    isLastPage = computed(() => this.page() >= this.totalPages(), ...(ngDevMode ? [{ debugName: "isLastPage" }] : []));
+    iconSize = computed(() => {
+        const sizeMap = { sm: 14, md: 16, lg: 20 };
+        return sizeMap[this.size()];
+    }, ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
+    hostClasses = computed(() => classNames('studio-pagination', `pagination--${this.size()}`, `pagination--${this.variant()}`), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    infoText = computed(() => {
+        const currentPage = this.page();
+        const size = this.pageSize();
+        const total = this.totalItems();
+        const from = total === 0 ? 0 : (currentPage - 1) * size + 1;
+        const to = Math.min(currentPage * size, total);
+        return this.infoTemplate()
+            .replace('{from}', from.toString())
+            .replace('{to}', to.toString())
+            .replace('{total}', total.toString());
+    }, ...(ngDevMode ? [{ debugName: "infoText" }] : []));
+    visiblePages = computed(() => {
+        const totalPages = this.totalPages();
+        const currentPage = this.page();
+        const maxVisible = this.maxVisiblePages();
+        if (totalPages <= maxVisible) {
+            return Array.from({ length: totalPages }, (_, i) => i + 1);
+        }
+        const pages = [];
+        const half = Math.floor(maxVisible / 2);
+        let start = Math.max(1, currentPage - half);
+        let end = Math.min(totalPages, start + maxVisible - 1);
+        if (end - start < maxVisible - 1) {
+            start = Math.max(1, end - maxVisible + 1);
+        }
+        // Always show first page
+        if (start > 1) {
+            pages.push(1);
+            if (start > 2) {
+                pages.push(-1); // Ellipsis
+            }
+        }
+        // Middle pages
+        for (let i = start; i <= end; i++) {
+            if (!pages.includes(i)) {
+                pages.push(i);
+            }
+        }
+        // Always show last page
+        if (end < totalPages) {
+            if (end < totalPages - 1) {
+                pages.push(-1); // Ellipsis
+            }
+            pages.push(totalPages);
+        }
+        return pages;
+    }, ...(ngDevMode ? [{ debugName: "visiblePages" }] : []));
+    // Methods
+    goToPage(pageNum) {
+        if (pageNum < 1 || pageNum > this.totalPages() || pageNum === this.page()) {
+            return;
+        }
+        this.page.set(pageNum);
+        this.emitPageChange();
+    }
+    goToFirst() {
+        this.goToPage(1);
+    }
+    goToLast() {
+        this.goToPage(this.totalPages());
+    }
+    goToPrevious() {
+        this.goToPage(this.page() - 1);
+    }
+    goToNext() {
+        this.goToPage(this.page() + 1);
+    }
+    onPageSizeChange(newSize) {
+        const previousSize = this.pageSize();
+        const newSizeNum = Number(newSize);
+        if (newSizeNum === previousSize)
+            return;
+        // Calculate new page to keep similar position
+        const currentFirstItem = (this.page() - 1) * previousSize + 1;
+        const newPage = Math.ceil(currentFirstItem / newSizeNum);
+        this.pageSize.set(newSizeNum);
+        this.page.set(Math.max(1, Math.min(newPage, Math.ceil(this.totalItems() / newSizeNum))));
+        this.pageSizeChange.emit({
+            pageSize: newSizeNum,
+            previousPageSize: previousSize,
+        });
+        this.emitPageChange();
+    }
+    emitPageChange() {
+        this.pageChange.emit({
+            page: this.page(),
+            pageSize: this.pageSize(),
+            totalItems: this.totalItems(),
+            totalPages: this.totalPages(),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: PaginationComponent, isStandalone: true, selector: "studio-pagination", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, maxVisiblePages: { classPropertyName: "maxVisiblePages", publicName: "maxVisiblePages", isSignal: true, isRequired: false, transformFunction: null }, showPageSizeSelector: { classPropertyName: "showPageSizeSelector", publicName: "showPageSizeSelector", isSignal: true, isRequired: false, transformFunction: null }, showPageNumbers: { classPropertyName: "showPageNumbers", publicName: "showPageNumbers", isSignal: true, isRequired: false, transformFunction: null }, showInfo: { classPropertyName: "showInfo", publicName: "showInfo", isSignal: true, isRequired: false, transformFunction: null }, showFirstLast: { classPropertyName: "showFirstLast", publicName: "showFirstLast", isSignal: true, isRequired: false, transformFunction: null }, pageSizeLabel: { classPropertyName: "pageSizeLabel", publicName: "pageSizeLabel", isSignal: true, isRequired: false, transformFunction: null }, previousLabel: { classPropertyName: "previousLabel", publicName: "previousLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, firstLabel: { classPropertyName: "firstLabel", publicName: "firstLabel", isSignal: true, isRequired: false, transformFunction: null }, lastLabel: { classPropertyName: "lastLabel", publicName: "lastLabel", isSignal: true, isRequired: false, transformFunction: null }, infoTemplate: { classPropertyName: "infoTemplate", publicName: "infoTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", pageSize: "pageSizeChange", pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
+    <div class="studio-pagination__container">
+      <!-- Page size selector -->
+      @if (showPageSizeSelector()) {
+        <div class="studio-pagination__page-size">
+          <span class="studio-pagination__label">{{ pageSizeLabel() }}</span>
+          <select
+            class="studio-pagination__select"
+            [ngModel]="pageSize()"
+            (ngModelChange)="onPageSizeChange($event)"
+          >
+            @for (option of pageSizeOptions(); track option) {
+              <option [value]="option">{{ option }}</option>
+            }
+          </select>
+        </div>
+      }
+
+      <!-- Info text -->
+      @if (showInfo()) {
+        <div class="studio-pagination__info">
+          {{ infoText() }}
+        </div>
+      }
+
+      <!-- Navigation -->
+      <div class="studio-pagination__nav">
+        <!-- First page button -->
+        @if (showFirstLast()) {
+          <button
+            type="button"
+            class="studio-pagination__btn studio-pagination__btn--nav"
+            [disabled]="isFirstPage()"
+            (click)="goToFirst()"
+            [attr.aria-label]="firstLabel()"
+          >
+            <studio-icon name="chevrons-left" [size]="iconSize()" />
+          </button>
+        }
+
+        <!-- Previous button -->
+        <button
+          type="button"
+          class="studio-pagination__btn studio-pagination__btn--nav"
+          [disabled]="isFirstPage()"
+          (click)="goToPrevious()"
+          [attr.aria-label]="previousLabel()"
+        >
+          <studio-icon name="chevron-left" [size]="iconSize()" />
+        </button>
+
+        <!-- Page numbers -->
+        @if (showPageNumbers()) {
+          <div class="studio-pagination__pages">
+            @for (pageNum of visiblePages(); track pageNum) {
+              @if (pageNum === -1) {
+                <span class="studio-pagination__ellipsis">...</span>
+              } @else {
+                <button
+                  type="button"
+                  class="studio-pagination__btn studio-pagination__btn--page"
+                  [class.studio-pagination__btn--active]="pageNum === page()"
+                  (click)="goToPage(pageNum)"
+                  [attr.aria-label]="'Page ' + pageNum"
+                  [attr.aria-current]="pageNum === page() ? 'page' : null"
+                >
+                  {{ pageNum }}
+                </button>
+              }
+            }
+          </div>
+        } @else {
+          <!-- Simple page indicator -->
+          <span class="studio-pagination__indicator">
+            {{ page() }} / {{ totalPages() }}
+          </span>
+        }
+
+        <!-- Next button -->
+        <button
+          type="button"
+          class="studio-pagination__btn studio-pagination__btn--nav"
+          [disabled]="isLastPage()"
+          (click)="goToNext()"
+          [attr.aria-label]="nextLabel()"
+        >
+          <studio-icon name="chevron-right" [size]="iconSize()" />
+        </button>
+
+        <!-- Last page button -->
+        @if (showFirstLast()) {
+          <button
+            type="button"
+            class="studio-pagination__btn studio-pagination__btn--nav"
+            [disabled]="isLastPage()"
+            (click)="goToLast()"
+            [attr.aria-label]="lastLabel()"
+          >
+            <studio-icon name="chevrons-right" [size]="iconSize()" />
+          </button>
+        }
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:block;font-family:var(--studio-font-family)}.studio-pagination__container{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}.studio-pagination__page-size{display:flex;align-items:center;gap:.5rem}.studio-pagination__label{font-size:.875rem;color:var(--studio-text-secondary);white-space:nowrap}.studio-pagination__select{padding:.375rem .75rem;font-size:.875rem;border:1px solid var(--studio-border-primary);border-radius:var(--studio-radius-md);background:var(--studio-bg-primary);color:var(--studio-text-primary);cursor:pointer;outline:none;transition:border-color var(--studio-transition-fast)}.studio-pagination__select:hover{border-color:var(--studio-border-hover, var(--studio-border-primary))}.studio-pagination__select:focus{border-color:var(--studio-color-primary);box-shadow:0 0 0 2px var(--studio-color-primary-alpha, rgba(59, 130, 246, .2))}.studio-pagination__info{font-size:.875rem;color:var(--studio-text-secondary);white-space:nowrap}.studio-pagination__nav{display:flex;align-items:center;gap:.25rem}.studio-pagination__btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--studio-border-primary);border-radius:var(--studio-radius-md);background:var(--studio-bg-primary);color:var(--studio-text-primary);cursor:pointer;transition:all var(--studio-transition-fast)}.studio-pagination__btn:hover:not(:disabled){background:var(--studio-bg-secondary);border-color:var(--studio-border-hover, var(--studio-border-primary))}.studio-pagination__btn:active:not(:disabled){transform:scale(.95)}.studio-pagination__btn:disabled{opacity:.5;cursor:not-allowed}.studio-pagination__btn--nav{padding:.375rem}.studio-pagination__btn--page{min-width:2rem;padding:.375rem .5rem;font-size:.875rem}.studio-pagination__btn--active{background:var(--studio-color-primary);border-color:var(--studio-color-primary);color:#fff}.studio-pagination__btn--active:hover:not(:disabled){background:var(--studio-color-primary-hover, var(--studio-color-primary));border-color:var(--studio-color-primary-hover, var(--studio-color-primary))}.studio-pagination__pages{display:flex;align-items:center;gap:.25rem}.studio-pagination__ellipsis{padding:0 .5rem;color:var(--studio-text-secondary)}.studio-pagination__indicator{padding:0 .75rem;font-size:.875rem;color:var(--studio-text-secondary);white-space:nowrap}:host(.pagination--sm) .studio-pagination__label,:host(.pagination--sm) .studio-pagination__info,:host(.pagination--sm) .studio-pagination__indicator{font-size:.75rem}:host(.pagination--sm) .studio-pagination__select{padding:.25rem .5rem;font-size:.75rem}:host(.pagination--sm) .studio-pagination__btn--nav{padding:.25rem}:host(.pagination--sm) .studio-pagination__btn--page{min-width:1.75rem;padding:.25rem .375rem;font-size:.75rem}:host(.pagination--lg) .studio-pagination__label,:host(.pagination--lg) .studio-pagination__info,:host(.pagination--lg) .studio-pagination__indicator{font-size:1rem}:host(.pagination--lg) .studio-pagination__select{padding:.5rem 1rem;font-size:1rem}:host(.pagination--lg) .studio-pagination__btn--nav{padding:.5rem}:host(.pagination--lg) .studio-pagination__btn--page{min-width:2.5rem;padding:.5rem .75rem;font-size:1rem}:host(.pagination--minimal) .studio-pagination__btn{border:none;background:transparent}:host(.pagination--minimal) .studio-pagination__btn:hover:not(:disabled){background:var(--studio-bg-secondary)}:host(.pagination--minimal) .studio-pagination__btn--active{background:var(--studio-color-primary);color:#fff}:host(.pagination--compact) .studio-pagination__container{gap:.5rem}:host(.pagination--compact) .studio-pagination__nav,:host(.pagination--compact) .studio-pagination__pages{gap:.125rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconComponent, selector: "studio-icon", inputs: ["name", "size", "color", "strokeWidth", "absoluteStrokeWidth", "showFallback", "fallbackIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: PaginationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'studio-pagination', imports: [CommonModule, FormsModule, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class]': 'hostClasses()',
+                    }, template: `
+    <div class="studio-pagination__container">
+      <!-- Page size selector -->
+      @if (showPageSizeSelector()) {
+        <div class="studio-pagination__page-size">
+          <span class="studio-pagination__label">{{ pageSizeLabel() }}</span>
+          <select
+            class="studio-pagination__select"
+            [ngModel]="pageSize()"
+            (ngModelChange)="onPageSizeChange($event)"
+          >
+            @for (option of pageSizeOptions(); track option) {
+              <option [value]="option">{{ option }}</option>
+            }
+          </select>
+        </div>
+      }
+
+      <!-- Info text -->
+      @if (showInfo()) {
+        <div class="studio-pagination__info">
+          {{ infoText() }}
+        </div>
+      }
+
+      <!-- Navigation -->
+      <div class="studio-pagination__nav">
+        <!-- First page button -->
+        @if (showFirstLast()) {
+          <button
+            type="button"
+            class="studio-pagination__btn studio-pagination__btn--nav"
+            [disabled]="isFirstPage()"
+            (click)="goToFirst()"
+            [attr.aria-label]="firstLabel()"
+          >
+            <studio-icon name="chevrons-left" [size]="iconSize()" />
+          </button>
+        }
+
+        <!-- Previous button -->
+        <button
+          type="button"
+          class="studio-pagination__btn studio-pagination__btn--nav"
+          [disabled]="isFirstPage()"
+          (click)="goToPrevious()"
+          [attr.aria-label]="previousLabel()"
+        >
+          <studio-icon name="chevron-left" [size]="iconSize()" />
+        </button>
+
+        <!-- Page numbers -->
+        @if (showPageNumbers()) {
+          <div class="studio-pagination__pages">
+            @for (pageNum of visiblePages(); track pageNum) {
+              @if (pageNum === -1) {
+                <span class="studio-pagination__ellipsis">...</span>
+              } @else {
+                <button
+                  type="button"
+                  class="studio-pagination__btn studio-pagination__btn--page"
+                  [class.studio-pagination__btn--active]="pageNum === page()"
+                  (click)="goToPage(pageNum)"
+                  [attr.aria-label]="'Page ' + pageNum"
+                  [attr.aria-current]="pageNum === page() ? 'page' : null"
+                >
+                  {{ pageNum }}
+                </button>
+              }
+            }
+          </div>
+        } @else {
+          <!-- Simple page indicator -->
+          <span class="studio-pagination__indicator">
+            {{ page() }} / {{ totalPages() }}
+          </span>
+        }
+
+        <!-- Next button -->
+        <button
+          type="button"
+          class="studio-pagination__btn studio-pagination__btn--nav"
+          [disabled]="isLastPage()"
+          (click)="goToNext()"
+          [attr.aria-label]="nextLabel()"
+        >
+          <studio-icon name="chevron-right" [size]="iconSize()" />
+        </button>
+
+        <!-- Last page button -->
+        @if (showFirstLast()) {
+          <button
+            type="button"
+            class="studio-pagination__btn studio-pagination__btn--nav"
+            [disabled]="isLastPage()"
+            (click)="goToLast()"
+            [attr.aria-label]="lastLabel()"
+          >
+            <studio-icon name="chevrons-right" [size]="iconSize()" />
+          </button>
+        }
+      </div>
+    </div>
+  `, styles: [":host{display:block;font-family:var(--studio-font-family)}.studio-pagination__container{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}.studio-pagination__page-size{display:flex;align-items:center;gap:.5rem}.studio-pagination__label{font-size:.875rem;color:var(--studio-text-secondary);white-space:nowrap}.studio-pagination__select{padding:.375rem .75rem;font-size:.875rem;border:1px solid var(--studio-border-primary);border-radius:var(--studio-radius-md);background:var(--studio-bg-primary);color:var(--studio-text-primary);cursor:pointer;outline:none;transition:border-color var(--studio-transition-fast)}.studio-pagination__select:hover{border-color:var(--studio-border-hover, var(--studio-border-primary))}.studio-pagination__select:focus{border-color:var(--studio-color-primary);box-shadow:0 0 0 2px var(--studio-color-primary-alpha, rgba(59, 130, 246, .2))}.studio-pagination__info{font-size:.875rem;color:var(--studio-text-secondary);white-space:nowrap}.studio-pagination__nav{display:flex;align-items:center;gap:.25rem}.studio-pagination__btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--studio-border-primary);border-radius:var(--studio-radius-md);background:var(--studio-bg-primary);color:var(--studio-text-primary);cursor:pointer;transition:all var(--studio-transition-fast)}.studio-pagination__btn:hover:not(:disabled){background:var(--studio-bg-secondary);border-color:var(--studio-border-hover, var(--studio-border-primary))}.studio-pagination__btn:active:not(:disabled){transform:scale(.95)}.studio-pagination__btn:disabled{opacity:.5;cursor:not-allowed}.studio-pagination__btn--nav{padding:.375rem}.studio-pagination__btn--page{min-width:2rem;padding:.375rem .5rem;font-size:.875rem}.studio-pagination__btn--active{background:var(--studio-color-primary);border-color:var(--studio-color-primary);color:#fff}.studio-pagination__btn--active:hover:not(:disabled){background:var(--studio-color-primary-hover, var(--studio-color-primary));border-color:var(--studio-color-primary-hover, var(--studio-color-primary))}.studio-pagination__pages{display:flex;align-items:center;gap:.25rem}.studio-pagination__ellipsis{padding:0 .5rem;color:var(--studio-text-secondary)}.studio-pagination__indicator{padding:0 .75rem;font-size:.875rem;color:var(--studio-text-secondary);white-space:nowrap}:host(.pagination--sm) .studio-pagination__label,:host(.pagination--sm) .studio-pagination__info,:host(.pagination--sm) .studio-pagination__indicator{font-size:.75rem}:host(.pagination--sm) .studio-pagination__select{padding:.25rem .5rem;font-size:.75rem}:host(.pagination--sm) .studio-pagination__btn--nav{padding:.25rem}:host(.pagination--sm) .studio-pagination__btn--page{min-width:1.75rem;padding:.25rem .375rem;font-size:.75rem}:host(.pagination--lg) .studio-pagination__label,:host(.pagination--lg) .studio-pagination__info,:host(.pagination--lg) .studio-pagination__indicator{font-size:1rem}:host(.pagination--lg) .studio-pagination__select{padding:.5rem 1rem;font-size:1rem}:host(.pagination--lg) .studio-pagination__btn--nav{padding:.5rem}:host(.pagination--lg) .studio-pagination__btn--page{min-width:2.5rem;padding:.5rem .75rem;font-size:1rem}:host(.pagination--minimal) .studio-pagination__btn{border:none;background:transparent}:host(.pagination--minimal) .studio-pagination__btn:hover:not(:disabled){background:var(--studio-bg-secondary)}:host(.pagination--minimal) .studio-pagination__btn--active{background:var(--studio-color-primary);color:#fff}:host(.pagination--compact) .studio-pagination__container{gap:.5rem}:host(.pagination--compact) .studio-pagination__nav,:host(.pagination--compact) .studio-pagination__pages{gap:.125rem}\n"] }]
+        }], propDecorators: { 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"] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], maxVisiblePages: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisiblePages", required: false }] }], showPageSizeSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageSizeSelector", required: false }] }], showPageNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageNumbers", required: false }] }], showInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "showInfo", required: false }] }], showFirstLast: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFirstLast", required: false }] }], pageSizeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeLabel", required: false }] }], previousLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], firstLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstLabel", required: false }] }], lastLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "lastLabel", required: false }] }], infoTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "infoTemplate", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], pageSizeChange: [{ type: i0.Output, args: ["pageSizeChange"] }] } });
+
+/**
+ * Pagination component types
+ */
+
+/**
+ * Pagination component
+ */
+
 /**
  * Directive for declarative column definition
  *
@@ -7214,5 +7579,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BadgeComponent, BadgeWrapperComponent, BottomNavigationComponent, ButtonComponent, ButtonGroupComponent, ButtonToggleGroupComponent, COUNTRY_OPTIONS, CardComponent, ChatComponent, ChatInputComponent, ChatMessageComponent, CheckboxComponent, ColorPickerCompactComponent, ColorPickerComponent, DEFAULT_COLOR_PRESETS, DrawerComponent, DrawerService, DropdownComponent, IconComponent, InputComponent, InspectorComponent, MASK_PRESETS, MaskDirective, MaskEngine, MenuComponent, ModalComponent, NavbarComponent, PhoneInputComponent, PopoverComponent, RadioButtonComponent, STUDIO_CONFIG, SelectComponent, SidebarComponent, StudioConfigService, SwitchComponent, TableColumnDirective, TableComponent, TabsComponent, TextareaComponent, ThemeSwitchComponent, TooltipComponent, classNames, isSafeUrl, loadGoogleFont, loadGoogleFonts, provideStudioConfig, provideStudioIcons, sanitizeUrl, withConfigDefault };
+export { BadgeComponent, BadgeWrapperComponent, BottomNavigationComponent, ButtonComponent, ButtonGroupComponent, ButtonToggleGroupComponent, COUNTRY_OPTIONS, CardComponent, ChatComponent, ChatInputComponent, ChatMessageComponent, CheckboxComponent, ColorPickerCompactComponent, ColorPickerComponent, DEFAULT_COLOR_PRESETS, DrawerComponent, DrawerService, DropdownComponent, IconComponent, InputComponent, InspectorComponent, MASK_PRESETS, MaskDirective, MaskEngine, MenuComponent, ModalComponent, NavbarComponent, PaginationComponent, PhoneInputComponent, PopoverComponent, RadioButtonComponent, STUDIO_CONFIG, SelectComponent, SidebarComponent, StudioConfigService, SwitchComponent, TableColumnDirective, TableComponent, TabsComponent, TextareaComponent, ThemeSwitchComponent, TooltipComponent, classNames, isSafeUrl, loadGoogleFont, loadGoogleFonts, provideStudioConfig, provideStudioIcons, sanitizeUrl, withConfigDefault };
 //# sourceMappingURL=eduboxpro-studio.mjs.map