@sixbell-telco/sdk
Version:
A collection of reusable components designed for use in Sixbell Telco Angular projects
299 lines (294 loc) • 25.1 kB
JavaScript
import * as i0 from '@angular/core';
import { input, computed, Component, output, model, ChangeDetectionStrategy } from '@angular/core';
import { IconComponent } from '@sixbell-telco/sdk/components/icon';
import { matKeyboardArrowLeftOutline, matKeyboardDoubleArrowLeftOutline, matKeyboardArrowRightOutline, matKeyboardDoubleArrowRightOutline } from '@sixbell-telco/sdk/components/icon/material/outline';
import { TypographyDirective } from '@sixbell-telco/sdk/directives/typography';
import { cn } from '@sixbell-telco/sdk/utils/cn';
import { cva } from 'class-variance-authority';
import { CommonModule } from '@angular/common';
import * as i1 from 'ngx-pagination';
import { NgxPaginationModule } from 'ngx-pagination';
/**
* @internal
* Generates base pagination item classes with style variants
*/
const paginationItemComponent = cva([], {
variants: {
variant: {
numeric: [
'btn',
'btn-outline',
'flex',
'text-base-content',
'border-secondary',
'hover:text-secondary-content',
'hover:bg-secondary/40',
'hover:border-secondary',
'active:hover:bg-secondary-content',
'active:hover:bg-secondary',
'active:focus:border-secondary',
'min-h-[30px]',
'h-[30px]',
'min-w-[30px]',
'w-[30px]',
'p-0',
],
icon: [
'btn',
'btn-outline',
'flex',
'text-base-content',
'border-secondary',
'hover:text-secondary-content',
'hover:bg-secondary/40',
'hover:border-secondary',
'active:hover:bg-secondary-content',
'active:hover:bg-secondary',
'active:focus:border-secondary',
'min-h-[30px]',
'h-[30px]',
'min-w-[30px]',
'w-[30px]',
'p-0',
],
dots: [
'btn',
'btn-circle',
'flex',
'border-secondary',
'bg-secondary',
'hover:bg-secondary/40',
'hover:border-secondary',
'hover:scale-150',
'active:hover:bg-secondary',
'active:border-secondary',
'active:scale-150',
'active:focus:border-secondary',
'h-[10px]',
'min-h-[10px]',
'w-[10px]',
'min-w-[10px]',
'p-0',
],
},
},
compoundVariants: [],
defaultVariants: {
variant: 'numeric',
},
});
/**
* A compact pagination control component with interactive states
*
* @remarks
* Built with Tailwind CSS and class-variance-authority for style management.
* Supports three variants: numeric pages, navigation icons, and dot indicators.
* Provides visual feedback for active and hover states.
*
* @example
* ```html
* <!-- Numeric page item -->
* <st-pagination-item
* variant="numeric"
* [number]="2"
* [active]="true"
* ></st-pagination-item>
* ```
*
* @example
* ```html
* <!-- Icon navigation -->
* <st-pagination-item
* variant="icon"
* icon="chevron-right"
* ></st-pagination-item>
* ```
*
* @example
* ```html
* <!-- Active dot indicator -->
* <st-pagination-item
* variant="dots"
* [active]="true"
* ></st-pagination-item>
* ```
*/
class PaginationItemComponent {
/**
* Style variant for the pagination item
* @defaultValue 'numeric'
*/
variant = input();
/**
* Icon name from the icon library
* @defaultValue matKeyboardArrowLeftOutline
*/
icon = input(matKeyboardArrowLeftOutline);
/**
* Display number or custom content
* @defaultValue 1
*/
number = input(1);
/**
* Active state styling
* @defaultValue false
*/
active = input(false);
/**
* @internal
* Computed class string for the pagination item
*/
componentClass = computed(() => {
return cn(paginationItemComponent({
variant: this.variant(),
}), {
'bg-secondary-content bg-secondary border-secondary text-secondary-content': this.active() && this.variant() !== 'dots',
}, {
'hover:scale-100 hover:bg-secondary/100 w-[16px] h-[16px] bg-secondary border-secondary text-secondary-content': this.active() && this.variant() === 'dots',
});
});
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: PaginationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: PaginationItemComponent, isStandalone: true, selector: "st-pagination-item", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, number: { classPropertyName: "number", publicName: "number", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let variantVar = this.variant();\n@let componentClassVar = this.componentClass();\n\n@if (variantVar === 'numeric') {\n\t<button [class]=\"componentClassVar\" type=\"button\">\n\t\t<span typography [tyVariant]=\"'body-sm'\" [tyColor]=\"'inherit'\" [tyFontWeight]=\"'normal'\">{{ number() }}</span>\n\t</button>\n} @else if (variantVar === 'icon') {\n\t<button [class]=\"componentClassVar\" type=\"button\">\n\t\t<st-icon [icon]=\"this.icon()\" color=\"inherit\" size=\"sm\"></st-icon>\n\t</button>\n} @else if (variantVar === 'dots') {\n\t<button [class]=\"componentClassVar\" type=\"button\">\n\t\t<span></span>\n\t</button>\n} @else {\n\t<button [class]=\"componentClassVar\" type=\"button\">\n\t\t<span typography [tyVariant]=\"'body-sm'\" [tyColor]=\"'inherit'\" [tyFontWeight]=\"'normal'\">{{ number() }}</span>\n\t</button>\n}\n", styles: [""], dependencies: [{ kind: "component", type: IconComponent, selector: "st-icon", inputs: ["color", "size", "icon"] }, { kind: "directive", type: TypographyDirective, selector: "[typography]", inputs: ["tyVariant", "tyColor", "tyFontWeight", "tyTextOverflow"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: PaginationItemComponent, decorators: [{
type: Component,
args: [{ selector: 'st-pagination-item', imports: [IconComponent, TypographyDirective], template: "@let variantVar = this.variant();\n@let componentClassVar = this.componentClass();\n\n@if (variantVar === 'numeric') {\n\t<button [class]=\"componentClassVar\" type=\"button\">\n\t\t<span typography [tyVariant]=\"'body-sm'\" [tyColor]=\"'inherit'\" [tyFontWeight]=\"'normal'\">{{ number() }}</span>\n\t</button>\n} @else if (variantVar === 'icon') {\n\t<button [class]=\"componentClassVar\" type=\"button\">\n\t\t<st-icon [icon]=\"this.icon()\" color=\"inherit\" size=\"sm\"></st-icon>\n\t</button>\n} @else if (variantVar === 'dots') {\n\t<button [class]=\"componentClassVar\" type=\"button\">\n\t\t<span></span>\n\t</button>\n} @else {\n\t<button [class]=\"componentClassVar\" type=\"button\">\n\t\t<span typography [tyVariant]=\"'body-sm'\" [tyColor]=\"'inherit'\" [tyFontWeight]=\"'normal'\">{{ number() }}</span>\n\t</button>\n}\n" }]
}] });
/**
* A customizable pagination component with navigation controls
*
* @remarks
* Supports both traditional numbered pagination and dot indicators.
* Integrates with NgxPagination for advanced features while providing
* custom styling and navigation controls.
*
* @example
* ```html
* <st-paginator
* [pages]="10"
* type="default"
* (pageChanged)="onPageChange($event)"
* ></st-paginator>
* ```
*
* @example
* ```html
* <st-paginator
* [pages]="5"
* type="dots"
* [maxSize]="3"
* ></st-paginator>
* ```
*/
class PaginatorComponent {
/**
* Unique identifier for the paginator instance
* @defaultValue 'paginator'
*/
paginatorId = input('paginator');
/**
* Maximum number of visible page items
* @defaultValue 5
*/
maxSize = input(5);
/**
* Pagination display variant
* @defaultValue 'default'
*/
type = input('default');
/**
* Event emitted when the current page changes
*/
pageChanged = output();
/**
* Total number of pages
* @defaultValue 0
*/
pages = input(0);
/**
* @internal
* Computed array of page numbers
*/
pageCounter = computed(() => Array.from({ length: this.pages() }, (_, i) => i + 1));
/**
* Current active page
* @defaultValue 1
*/
currentPage = model(1);
/**
* @internal
* Left arrow icon reference
*/
iconArrowLeft = matKeyboardArrowLeftOutline;
/**
* @internal
* Double left arrow icon reference
*/
iconDoubleArrowLeft = matKeyboardDoubleArrowLeftOutline;
/**
* @internal
* Right arrow icon reference
*/
iconArrowRight = matKeyboardArrowRightOutline;
/**
* @internal
* Double right arrow icon reference
*/
iconDoubleArrowRight = matKeyboardDoubleArrowRightOutline;
/**
* @internal
* Handles page navigation changes
* @param page - New page number
*/
handlePageChange(page) {
this.currentPage.set(page);
this.pageChanged.emit(page);
}
/**
* @internal
* Navigates to previous page if available
*/
previousPage() {
if (this.currentPage() > 1) {
this.currentPage.set(this.currentPage() - 1);
this.pageChanged.emit(this.currentPage());
}
}
/**
* @internal
* Navigates to next page if available
*/
nextPage() {
if (this.currentPage() < this.pages()) {
this.currentPage.set(this.currentPage() + 1);
this.pageChanged.emit(this.currentPage());
}
}
/**
* @internal
* Jumps to first page
*/
firstPage() {
this.currentPage.set(1);
this.pageChanged.emit(1);
}
/**
* @internal
* Jumps to last page
*/
lastPage() {
this.currentPage.set(this.pages());
this.pageChanged.emit(this.pages());
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: PaginatorComponent, isStandalone: true, selector: "st-paginator", inputs: { paginatorId: { classPropertyName: "paginatorId", publicName: "paginatorId", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, pages: { classPropertyName: "pages", publicName: "pages", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChanged: "pageChanged", currentPage: "currentPageChange" }, ngImport: i0, template: "@if (type() === 'default') {\n\t<div class=\"flex\">\n\t\t<pagination-template [id]=\"paginatorId()\" #p=\"paginationApi\" [maxSize]=\"maxSize()\" (pageChange)=\"handlePageChange($event)\">\n\t\t\t<div class=\"flex items-center justify-center gap-2\">\n\t\t\t\t@if (pages()) {\n\t\t\t\t\t<!-- Standalone pagination -->\n\t\t\t\t\t<st-pagination-item\n\t\t\t\t\t\t[icon]=\"iconDoubleArrowLeft\"\n\t\t\t\t\t\t(click)=\"firstPage()\"\n\t\t\t\t\t\tvariant=\"icon\"\n\t\t\t\t\t\tsize=\"md\"\n\t\t\t\t\t\tshape=\"round-xs\"\n\t\t\t\t\t\tpadding=\"none\"\n\t\t\t\t\t></st-pagination-item>\n\t\t\t\t\t<st-pagination-item\n\t\t\t\t\t\t[icon]=\"iconArrowLeft\"\n\t\t\t\t\t\t(click)=\"previousPage()\"\n\t\t\t\t\t\tvariant=\"icon\"\n\t\t\t\t\t\tsize=\"md\"\n\t\t\t\t\t\tshape=\"round-xs\"\n\t\t\t\t\t\tpadding=\"none\"\n\t\t\t\t\t></st-pagination-item>\n\t\t\t\t\t@for (page of pageCounter(); track $index) {\n\t\t\t\t\t\t@if (currentPage() !== page) {\n\t\t\t\t\t\t\t<st-pagination-item\n\t\t\t\t\t\t\t\t(click)=\"handlePageChange(page)\"\n\t\t\t\t\t\t\t\tvariant=\"numeric\"\n\t\t\t\t\t\t\t\tsize=\"md\"\n\t\t\t\t\t\t\t\tshape=\"round-xs\"\n\t\t\t\t\t\t\t\tpadding=\"none\"\n\t\t\t\t\t\t\t\t[number]=\"page\"\n\t\t\t\t\t\t\t\t[active]=\"currentPage() === page\"\n\t\t\t\t\t\t\t></st-pagination-item>\n\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t<st-pagination-item\n\t\t\t\t\t\t\t\tvariant=\"numeric\"\n\t\t\t\t\t\t\t\tsize=\"md\"\n\t\t\t\t\t\t\t\tshape=\"round-xs\"\n\t\t\t\t\t\t\t\tpadding=\"none\"\n\t\t\t\t\t\t\t\t[number]=\"page\"\n\t\t\t\t\t\t\t\t[active]=\"currentPage() === page\"\n\t\t\t\t\t\t\t></st-pagination-item>\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\t<st-pagination-item\n\t\t\t\t\t\t[icon]=\"iconArrowRight\"\n\t\t\t\t\t\t(click)=\"nextPage()\"\n\t\t\t\t\t\tvariant=\"icon\"\n\t\t\t\t\t\tsize=\"md\"\n\t\t\t\t\t\tshape=\"round-xs\"\n\t\t\t\t\t\tpadding=\"none\"\n\t\t\t\t\t></st-pagination-item>\n\t\t\t\t\t<st-pagination-item\n\t\t\t\t\t\t[icon]=\"iconDoubleArrowRight\"\n\t\t\t\t\t\t(click)=\"lastPage()\"\n\t\t\t\t\t\tvariant=\"icon\"\n\t\t\t\t\t\tsize=\"md\"\n\t\t\t\t\t\tshape=\"round-xs\"\n\t\t\t\t\t\tpadding=\"none\"\n\t\t\t\t\t></st-pagination-item>\n\t\t\t\t} @else {\n\t\t\t\t\t<!-- Table pagination -->\n\t\t\t\t\t<st-pagination-item\n\t\t\t\t\t\t[icon]=\"iconDoubleArrowLeft\"\n\t\t\t\t\t\t(click)=\"!p.isFirstPage() ? handlePageChange(1) : null\"\n\t\t\t\t\t\tvariant=\"icon\"\n\t\t\t\t\t\tsize=\"md\"\n\t\t\t\t\t\tshape=\"round-xs\"\n\t\t\t\t\t\tpadding=\"none\"\n\t\t\t\t\t></st-pagination-item>\n\t\t\t\t\t<st-pagination-item\n\t\t\t\t\t\t[icon]=\"iconArrowLeft\"\n\t\t\t\t\t\t(click)=\"!p.isFirstPage() ? p.previous() : null\"\n\t\t\t\t\t\tvariant=\"icon\"\n\t\t\t\t\t\tsize=\"md\"\n\t\t\t\t\t\tshape=\"round-xs\"\n\t\t\t\t\t\tpadding=\"none\"\n\t\t\t\t\t></st-pagination-item>\n\n\t\t\t\t\t@for (page of p.pages; track $index) {\n\t\t\t\t\t\t@if (p.getCurrent() !== page.value) {\n\t\t\t\t\t\t\t<st-pagination-item\n\t\t\t\t\t\t\t\t(click)=\"p.setCurrent(page.value)\"\n\t\t\t\t\t\t\t\tvariant=\"numeric\"\n\t\t\t\t\t\t\t\tsize=\"md\"\n\t\t\t\t\t\t\t\tshape=\"round-xs\"\n\t\t\t\t\t\t\t\tpadding=\"none\"\n\t\t\t\t\t\t\t\t[number]=\"page.label\"\n\t\t\t\t\t\t\t\t[active]=\"p.getCurrent() === page.value\"\n\t\t\t\t\t\t\t></st-pagination-item>\n\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t<st-pagination-item\n\t\t\t\t\t\t\t\tvariant=\"numeric\"\n\t\t\t\t\t\t\t\tsize=\"md\"\n\t\t\t\t\t\t\t\tshape=\"round-xs\"\n\t\t\t\t\t\t\t\tpadding=\"none\"\n\t\t\t\t\t\t\t\t[number]=\"page.label\"\n\t\t\t\t\t\t\t\t[active]=\"p.getCurrent() === page.value\"\n\t\t\t\t\t\t\t></st-pagination-item>\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t<st-pagination-item\n\t\t\t\t\t\t[icon]=\"iconArrowRight\"\n\t\t\t\t\t\t(click)=\"!p.isLastPage() ? p.next() : null\"\n\t\t\t\t\t\tvariant=\"icon\"\n\t\t\t\t\t\tsize=\"md\"\n\t\t\t\t\t\tshape=\"round-xs\"\n\t\t\t\t\t\tpadding=\"none\"\n\t\t\t\t\t></st-pagination-item>\n\t\t\t\t\t<st-pagination-item\n\t\t\t\t\t\t[icon]=\"iconDoubleArrowRight\"\n\t\t\t\t\t\t(click)=\"!p.isLastPage() ? handlePageChange(p.getLastPage()) : null\"\n\t\t\t\t\t\tvariant=\"icon\"\n\t\t\t\t\t\tsize=\"md\"\n\t\t\t\t\t\tshape=\"round-xs\"\n\t\t\t\t\t\tpadding=\"none\"\n\t\t\t\t\t></st-pagination-item>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</pagination-template>\n\t</div>\n}\n@if (type() === 'dots') {\n\t<div class=\"flex\">\n\t\t<pagination-template [id]=\"paginatorId()\" #p=\"paginationApi\" (pageChange)=\"handlePageChange($event)\" [maxSize]=\"10000\">\n\t\t\t<div class=\"flex items-center justify-center gap-2\">\n\t\t\t\t@if (pages()) {\n\t\t\t\t\t<!-- Standalone pagination -->\n\t\t\t\t\t@for (page of pageCounter(); track $index) {\n\t\t\t\t\t\t@if (currentPage() !== page) {\n\t\t\t\t\t\t\t<st-pagination-item\n\t\t\t\t\t\t\t\t(click)=\"handlePageChange(page)\"\n\t\t\t\t\t\t\t\tvariant=\"dots\"\n\t\t\t\t\t\t\t\tsize=\"xs\"\n\t\t\t\t\t\t\t\tshape=\"round-lg\"\n\t\t\t\t\t\t\t\tpadding=\"none\"\n\t\t\t\t\t\t\t\t[active]=\"currentPage() === page\"\n\t\t\t\t\t\t\t></st-pagination-item>\n\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t<st-pagination-item variant=\"dots\" size=\"xs\" shape=\"round-lg\" padding=\"none\" [active]=\"currentPage() === page\"></st-pagination-item>\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t} @else {\n\t\t\t\t\t<!-- Table pagination -->\n\t\t\t\t\t@for (page of p.pages; track $index) {\n\t\t\t\t\t\t@if (p.getCurrent() !== page.value) {\n\t\t\t\t\t\t\t<st-pagination-item\n\t\t\t\t\t\t\t\t(click)=\"p.setCurrent(page.value)\"\n\t\t\t\t\t\t\t\tvariant=\"dots\"\n\t\t\t\t\t\t\t\tsize=\"xs\"\n\t\t\t\t\t\t\t\tshape=\"round-lg\"\n\t\t\t\t\t\t\t\tpadding=\"none\"\n\t\t\t\t\t\t\t\t[active]=\"p.getCurrent() === page.value\"\n\t\t\t\t\t\t\t></st-pagination-item>\n\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t<st-pagination-item\n\t\t\t\t\t\t\t\tvariant=\"dots\"\n\t\t\t\t\t\t\t\tsize=\"xs\"\n\t\t\t\t\t\t\t\tshape=\"round-lg\"\n\t\t\t\t\t\t\t\tpadding=\"none\"\n\t\t\t\t\t\t\t\t[active]=\"p.getCurrent() === page.value\"\n\t\t\t\t\t\t\t></st-pagination-item>\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t</div>\n\t\t</pagination-template>\n\t</div>\n}\n", dependencies: [{ kind: "ngmodule", type: NgxPaginationModule }, { kind: "directive", type: i1.PaginationControlsDirective, selector: "pagination-template,[pagination-template]", inputs: ["id", "maxSize"], outputs: ["pageChange", "pageBoundsCorrection"], exportAs: ["paginationApi"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: PaginationItemComponent, selector: "st-pagination-item", inputs: ["variant", "icon", "number", "active"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: PaginatorComponent, decorators: [{
type: Component,
args: [{ selector: 'st-paginator', imports: [NgxPaginationModule, CommonModule, PaginationItemComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (type() === 'default') {\n\t<div class=\"flex\">\n\t\t<pagination-template [id]=\"paginatorId()\" #p=\"paginationApi\" [maxSize]=\"maxSize()\" (pageChange)=\"handlePageChange($event)\">\n\t\t\t<div class=\"flex items-center justify-center gap-2\">\n\t\t\t\t@if (pages()) {\n\t\t\t\t\t<!-- Standalone pagination -->\n\t\t\t\t\t<st-pagination-item\n\t\t\t\t\t\t[icon]=\"iconDoubleArrowLeft\"\n\t\t\t\t\t\t(click)=\"firstPage()\"\n\t\t\t\t\t\tvariant=\"icon\"\n\t\t\t\t\t\tsize=\"md\"\n\t\t\t\t\t\tshape=\"round-xs\"\n\t\t\t\t\t\tpadding=\"none\"\n\t\t\t\t\t></st-pagination-item>\n\t\t\t\t\t<st-pagination-item\n\t\t\t\t\t\t[icon]=\"iconArrowLeft\"\n\t\t\t\t\t\t(click)=\"previousPage()\"\n\t\t\t\t\t\tvariant=\"icon\"\n\t\t\t\t\t\tsize=\"md\"\n\t\t\t\t\t\tshape=\"round-xs\"\n\t\t\t\t\t\tpadding=\"none\"\n\t\t\t\t\t></st-pagination-item>\n\t\t\t\t\t@for (page of pageCounter(); track $index) {\n\t\t\t\t\t\t@if (currentPage() !== page) {\n\t\t\t\t\t\t\t<st-pagination-item\n\t\t\t\t\t\t\t\t(click)=\"handlePageChange(page)\"\n\t\t\t\t\t\t\t\tvariant=\"numeric\"\n\t\t\t\t\t\t\t\tsize=\"md\"\n\t\t\t\t\t\t\t\tshape=\"round-xs\"\n\t\t\t\t\t\t\t\tpadding=\"none\"\n\t\t\t\t\t\t\t\t[number]=\"page\"\n\t\t\t\t\t\t\t\t[active]=\"currentPage() === page\"\n\t\t\t\t\t\t\t></st-pagination-item>\n\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t<st-pagination-item\n\t\t\t\t\t\t\t\tvariant=\"numeric\"\n\t\t\t\t\t\t\t\tsize=\"md\"\n\t\t\t\t\t\t\t\tshape=\"round-xs\"\n\t\t\t\t\t\t\t\tpadding=\"none\"\n\t\t\t\t\t\t\t\t[number]=\"page\"\n\t\t\t\t\t\t\t\t[active]=\"currentPage() === page\"\n\t\t\t\t\t\t\t></st-pagination-item>\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\t<st-pagination-item\n\t\t\t\t\t\t[icon]=\"iconArrowRight\"\n\t\t\t\t\t\t(click)=\"nextPage()\"\n\t\t\t\t\t\tvariant=\"icon\"\n\t\t\t\t\t\tsize=\"md\"\n\t\t\t\t\t\tshape=\"round-xs\"\n\t\t\t\t\t\tpadding=\"none\"\n\t\t\t\t\t></st-pagination-item>\n\t\t\t\t\t<st-pagination-item\n\t\t\t\t\t\t[icon]=\"iconDoubleArrowRight\"\n\t\t\t\t\t\t(click)=\"lastPage()\"\n\t\t\t\t\t\tvariant=\"icon\"\n\t\t\t\t\t\tsize=\"md\"\n\t\t\t\t\t\tshape=\"round-xs\"\n\t\t\t\t\t\tpadding=\"none\"\n\t\t\t\t\t></st-pagination-item>\n\t\t\t\t} @else {\n\t\t\t\t\t<!-- Table pagination -->\n\t\t\t\t\t<st-pagination-item\n\t\t\t\t\t\t[icon]=\"iconDoubleArrowLeft\"\n\t\t\t\t\t\t(click)=\"!p.isFirstPage() ? handlePageChange(1) : null\"\n\t\t\t\t\t\tvariant=\"icon\"\n\t\t\t\t\t\tsize=\"md\"\n\t\t\t\t\t\tshape=\"round-xs\"\n\t\t\t\t\t\tpadding=\"none\"\n\t\t\t\t\t></st-pagination-item>\n\t\t\t\t\t<st-pagination-item\n\t\t\t\t\t\t[icon]=\"iconArrowLeft\"\n\t\t\t\t\t\t(click)=\"!p.isFirstPage() ? p.previous() : null\"\n\t\t\t\t\t\tvariant=\"icon\"\n\t\t\t\t\t\tsize=\"md\"\n\t\t\t\t\t\tshape=\"round-xs\"\n\t\t\t\t\t\tpadding=\"none\"\n\t\t\t\t\t></st-pagination-item>\n\n\t\t\t\t\t@for (page of p.pages; track $index) {\n\t\t\t\t\t\t@if (p.getCurrent() !== page.value) {\n\t\t\t\t\t\t\t<st-pagination-item\n\t\t\t\t\t\t\t\t(click)=\"p.setCurrent(page.value)\"\n\t\t\t\t\t\t\t\tvariant=\"numeric\"\n\t\t\t\t\t\t\t\tsize=\"md\"\n\t\t\t\t\t\t\t\tshape=\"round-xs\"\n\t\t\t\t\t\t\t\tpadding=\"none\"\n\t\t\t\t\t\t\t\t[number]=\"page.label\"\n\t\t\t\t\t\t\t\t[active]=\"p.getCurrent() === page.value\"\n\t\t\t\t\t\t\t></st-pagination-item>\n\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t<st-pagination-item\n\t\t\t\t\t\t\t\tvariant=\"numeric\"\n\t\t\t\t\t\t\t\tsize=\"md\"\n\t\t\t\t\t\t\t\tshape=\"round-xs\"\n\t\t\t\t\t\t\t\tpadding=\"none\"\n\t\t\t\t\t\t\t\t[number]=\"page.label\"\n\t\t\t\t\t\t\t\t[active]=\"p.getCurrent() === page.value\"\n\t\t\t\t\t\t\t></st-pagination-item>\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t<st-pagination-item\n\t\t\t\t\t\t[icon]=\"iconArrowRight\"\n\t\t\t\t\t\t(click)=\"!p.isLastPage() ? p.next() : null\"\n\t\t\t\t\t\tvariant=\"icon\"\n\t\t\t\t\t\tsize=\"md\"\n\t\t\t\t\t\tshape=\"round-xs\"\n\t\t\t\t\t\tpadding=\"none\"\n\t\t\t\t\t></st-pagination-item>\n\t\t\t\t\t<st-pagination-item\n\t\t\t\t\t\t[icon]=\"iconDoubleArrowRight\"\n\t\t\t\t\t\t(click)=\"!p.isLastPage() ? handlePageChange(p.getLastPage()) : null\"\n\t\t\t\t\t\tvariant=\"icon\"\n\t\t\t\t\t\tsize=\"md\"\n\t\t\t\t\t\tshape=\"round-xs\"\n\t\t\t\t\t\tpadding=\"none\"\n\t\t\t\t\t></st-pagination-item>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</pagination-template>\n\t</div>\n}\n@if (type() === 'dots') {\n\t<div class=\"flex\">\n\t\t<pagination-template [id]=\"paginatorId()\" #p=\"paginationApi\" (pageChange)=\"handlePageChange($event)\" [maxSize]=\"10000\">\n\t\t\t<div class=\"flex items-center justify-center gap-2\">\n\t\t\t\t@if (pages()) {\n\t\t\t\t\t<!-- Standalone pagination -->\n\t\t\t\t\t@for (page of pageCounter(); track $index) {\n\t\t\t\t\t\t@if (currentPage() !== page) {\n\t\t\t\t\t\t\t<st-pagination-item\n\t\t\t\t\t\t\t\t(click)=\"handlePageChange(page)\"\n\t\t\t\t\t\t\t\tvariant=\"dots\"\n\t\t\t\t\t\t\t\tsize=\"xs\"\n\t\t\t\t\t\t\t\tshape=\"round-lg\"\n\t\t\t\t\t\t\t\tpadding=\"none\"\n\t\t\t\t\t\t\t\t[active]=\"currentPage() === page\"\n\t\t\t\t\t\t\t></st-pagination-item>\n\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t<st-pagination-item variant=\"dots\" size=\"xs\" shape=\"round-lg\" padding=\"none\" [active]=\"currentPage() === page\"></st-pagination-item>\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t} @else {\n\t\t\t\t\t<!-- Table pagination -->\n\t\t\t\t\t@for (page of p.pages; track $index) {\n\t\t\t\t\t\t@if (p.getCurrent() !== page.value) {\n\t\t\t\t\t\t\t<st-pagination-item\n\t\t\t\t\t\t\t\t(click)=\"p.setCurrent(page.value)\"\n\t\t\t\t\t\t\t\tvariant=\"dots\"\n\t\t\t\t\t\t\t\tsize=\"xs\"\n\t\t\t\t\t\t\t\tshape=\"round-lg\"\n\t\t\t\t\t\t\t\tpadding=\"none\"\n\t\t\t\t\t\t\t\t[active]=\"p.getCurrent() === page.value\"\n\t\t\t\t\t\t\t></st-pagination-item>\n\t\t\t\t\t\t} @else {\n\t\t\t\t\t\t\t<st-pagination-item\n\t\t\t\t\t\t\t\tvariant=\"dots\"\n\t\t\t\t\t\t\t\tsize=\"xs\"\n\t\t\t\t\t\t\t\tshape=\"round-lg\"\n\t\t\t\t\t\t\t\tpadding=\"none\"\n\t\t\t\t\t\t\t\t[active]=\"p.getCurrent() === page.value\"\n\t\t\t\t\t\t\t></st-pagination-item>\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t</div>\n\t\t</pagination-template>\n\t</div>\n}\n" }]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { PaginationItemComponent, PaginatorComponent, paginationItemComponent };
//# sourceMappingURL=sixbell-telco-sdk-components-paginator.mjs.map