@lesterarte/sefin-ui 0.0.20-dev.2 → 0.0.20-dev.4

package/fesm2022/lesterarte-sefin-ui.mjs

@@ -1,7 +1,8 @@
 import * as i0 from '@angular/core';
-import { Input, ChangeDetectionStrategy, Component, EventEmitter, Output, forwardRef, ViewChild, HostListener } from '@angular/core';
+import { Input, ChangeDetectionStrategy, Component, EventEmitter, Output, forwardRef, ViewChild, HostListener, signal, computed } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import * as i1$1 from '@angular/platform-browser';
 import { DomSanitizer } from '@angular/platform-browser';
 import * as LucideIcons from 'lucide';
 import * as i2 from '@angular/forms';
@@ -3360,6 +3361,77 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 args: ['document:click', ['$event']]
             }] } });
 
+class BreadcrumbsComponent {
+    sanitizer;
+    /** Array of breadcrumb items */
+    items = [];
+    /** Separator style. Options: 'slash' | 'chevron' | 'arrow' */
+    separator = 'slash';
+    /** Breadcrumb size. Options: 'sm' | 'md' | 'lg' */
+    size = 'md';
+    /** Additional CSS classes */
+    class = '';
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+    }
+    get breadcrumbsClasses() {
+        return [
+            'sefin-breadcrumbs',
+            `sefin-breadcrumbs--${this.size}`,
+            this.class,
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    isLastItem(index) {
+        return index === this.items.length - 1;
+    }
+    getSeparatorIcon() {
+        switch (this.separator) {
+            case 'chevron':
+                return '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+            case 'arrow':
+                return '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+            case 'slash':
+            default:
+                return '/';
+        }
+    }
+    sanitizeHtml(html) {
+        if (!html)
+            return '';
+        // For simple text like '/', return as is
+        if (html.length <= 2 && !html.includes('<')) {
+            return html;
+        }
+        // Use sanitize for user-provided HTML (icons from items)
+        // This sanitizes but allows safe SVG elements
+        return this.sanitizer.sanitize(1, html) || '';
+    }
+    getSeparatorIconSafe() {
+        // For separators generated internally, we can trust the HTML
+        const icon = this.getSeparatorIcon();
+        if (icon.length <= 2 && !icon.includes('<')) {
+            return icon;
+        }
+        return this.sanitizer.bypassSecurityTrustHtml(icon);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BreadcrumbsComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: BreadcrumbsComponent, isStandalone: true, selector: "sefin-breadcrumbs", inputs: { items: "items", separator: "separator", size: "size", class: "class" }, ngImport: i0, template: "<nav [class]=\"breadcrumbsClasses\" aria-label=\"Breadcrumb\">\n  <ol class=\"sefin-breadcrumbs__list\">\n    <li\n      *ngFor=\"let item of items; let i = index; let isLast = last\"\n      class=\"sefin-breadcrumbs__item\"\n    >\n      <ng-container *ngIf=\"isLastItem(i); else linkTemplate\">\n        <span class=\"sefin-breadcrumbs__current\" [attr.aria-current]=\"'page'\">\n          <span *ngIf=\"item.icon\" class=\"sefin-breadcrumbs__icon\" [innerHTML]=\"sanitizeHtml(item.icon)\"></span>\n          {{ item.label }}\n        </span>\n      </ng-container>\n      <ng-template #linkTemplate>\n        <sefin-link\n          [href]=\"item.href || '#'\"\n          variant=\"default\"\n          [size]=\"size\"\n          class=\"sefin-breadcrumbs__link\"\n        >\n          <span *ngIf=\"item.icon\" class=\"sefin-breadcrumbs__icon\" [innerHTML]=\"sanitizeHtml(item.icon)\"></span>\n          {{ item.label }}\n        </sefin-link>\n      </ng-template>\n      <span\n        *ngIf=\"!isLast\"\n        class=\"sefin-breadcrumbs__separator\"\n        [attr.aria-hidden]=\"true\"\n        [innerHTML]=\"getSeparatorIconSafe()\"\n      ></span>\n    </li>\n  </ol>\n</nav>\n\n", styles: [".sefin-breadcrumbs{display:flex;align-items:center;font-family:var(--sefin-font-family-base)}.sefin-breadcrumbs__list{display:flex;flex-wrap:wrap;align-items:center;list-style:none;margin:0;padding:0;gap:var(--sefin-spacing-xs, 4px)}.sefin-breadcrumbs__item{display:inline-flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-breadcrumbs__link{color:var(--sefin-color-text-secondary);text-decoration:none;transition:color .2s ease-in-out}.sefin-breadcrumbs__link:hover{color:var(--sefin-color-primary)}.sefin-breadcrumbs__link:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px;border-radius:var(--sefin-radius-sm)}.sefin-breadcrumbs__current{color:var(--sefin-color-text);font-weight:var(--sefin-font-weight-medium);display:inline-flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-breadcrumbs__separator{display:inline-flex;align-items:center;justify-content:center;color:var(--sefin-color-text-disabled);margin:0 var(--sefin-spacing-xs, 4px);-webkit-user-select:none;user-select:none;flex-shrink:0}.sefin-breadcrumbs__separator svg{display:block;width:12px;height:12px}.sefin-breadcrumbs__icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.sefin-breadcrumbs__icon svg{display:block;width:14px;height:14px}.sefin-breadcrumbs--sm{font-size:var(--sefin-font-size-sm, 14px)}.sefin-breadcrumbs--sm .sefin-breadcrumbs__separator{margin:0 var(--sefin-spacing-xs, 4px)}.sefin-breadcrumbs--sm .sefin-breadcrumbs__separator svg{width:10px;height:10px}.sefin-breadcrumbs--sm .sefin-breadcrumbs__icon svg{width:12px;height:12px}.sefin-breadcrumbs--md{font-size:var(--sefin-font-size-base, 16px)}.sefin-breadcrumbs--md .sefin-breadcrumbs__separator{margin:0 var(--sefin-spacing-sm, 8px)}.sefin-breadcrumbs--md .sefin-breadcrumbs__separator svg{width:12px;height:12px}.sefin-breadcrumbs--md .sefin-breadcrumbs__icon svg{width:14px;height:14px}.sefin-breadcrumbs--lg{font-size:var(--sefin-font-size-lg, 18px)}.sefin-breadcrumbs--lg .sefin-breadcrumbs__separator{margin:0 var(--sefin-spacing-sm, 8px)}.sefin-breadcrumbs--lg .sefin-breadcrumbs__separator svg{width:14px;height:14px}.sefin-breadcrumbs--lg .sefin-breadcrumbs__icon svg{width:16px;height:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LinkComponent, selector: "sefin-link", inputs: ["variant", "size", "disabled", "href", "target", "rel", "class", "underline"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: BreadcrumbsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sefin-breadcrumbs', standalone: true, imports: [CommonModule, LinkComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav [class]=\"breadcrumbsClasses\" aria-label=\"Breadcrumb\">\n  <ol class=\"sefin-breadcrumbs__list\">\n    <li\n      *ngFor=\"let item of items; let i = index; let isLast = last\"\n      class=\"sefin-breadcrumbs__item\"\n    >\n      <ng-container *ngIf=\"isLastItem(i); else linkTemplate\">\n        <span class=\"sefin-breadcrumbs__current\" [attr.aria-current]=\"'page'\">\n          <span *ngIf=\"item.icon\" class=\"sefin-breadcrumbs__icon\" [innerHTML]=\"sanitizeHtml(item.icon)\"></span>\n          {{ item.label }}\n        </span>\n      </ng-container>\n      <ng-template #linkTemplate>\n        <sefin-link\n          [href]=\"item.href || '#'\"\n          variant=\"default\"\n          [size]=\"size\"\n          class=\"sefin-breadcrumbs__link\"\n        >\n          <span *ngIf=\"item.icon\" class=\"sefin-breadcrumbs__icon\" [innerHTML]=\"sanitizeHtml(item.icon)\"></span>\n          {{ item.label }}\n        </sefin-link>\n      </ng-template>\n      <span\n        *ngIf=\"!isLast\"\n        class=\"sefin-breadcrumbs__separator\"\n        [attr.aria-hidden]=\"true\"\n        [innerHTML]=\"getSeparatorIconSafe()\"\n      ></span>\n    </li>\n  </ol>\n</nav>\n\n", styles: [".sefin-breadcrumbs{display:flex;align-items:center;font-family:var(--sefin-font-family-base)}.sefin-breadcrumbs__list{display:flex;flex-wrap:wrap;align-items:center;list-style:none;margin:0;padding:0;gap:var(--sefin-spacing-xs, 4px)}.sefin-breadcrumbs__item{display:inline-flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-breadcrumbs__link{color:var(--sefin-color-text-secondary);text-decoration:none;transition:color .2s ease-in-out}.sefin-breadcrumbs__link:hover{color:var(--sefin-color-primary)}.sefin-breadcrumbs__link:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px;border-radius:var(--sefin-radius-sm)}.sefin-breadcrumbs__current{color:var(--sefin-color-text);font-weight:var(--sefin-font-weight-medium);display:inline-flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-breadcrumbs__separator{display:inline-flex;align-items:center;justify-content:center;color:var(--sefin-color-text-disabled);margin:0 var(--sefin-spacing-xs, 4px);-webkit-user-select:none;user-select:none;flex-shrink:0}.sefin-breadcrumbs__separator svg{display:block;width:12px;height:12px}.sefin-breadcrumbs__icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.sefin-breadcrumbs__icon svg{display:block;width:14px;height:14px}.sefin-breadcrumbs--sm{font-size:var(--sefin-font-size-sm, 14px)}.sefin-breadcrumbs--sm .sefin-breadcrumbs__separator{margin:0 var(--sefin-spacing-xs, 4px)}.sefin-breadcrumbs--sm .sefin-breadcrumbs__separator svg{width:10px;height:10px}.sefin-breadcrumbs--sm .sefin-breadcrumbs__icon svg{width:12px;height:12px}.sefin-breadcrumbs--md{font-size:var(--sefin-font-size-base, 16px)}.sefin-breadcrumbs--md .sefin-breadcrumbs__separator{margin:0 var(--sefin-spacing-sm, 8px)}.sefin-breadcrumbs--md .sefin-breadcrumbs__separator svg{width:12px;height:12px}.sefin-breadcrumbs--md .sefin-breadcrumbs__icon svg{width:14px;height:14px}.sefin-breadcrumbs--lg{font-size:var(--sefin-font-size-lg, 18px)}.sefin-breadcrumbs--lg .sefin-breadcrumbs__separator{margin:0 var(--sefin-spacing-sm, 8px)}.sefin-breadcrumbs--lg .sefin-breadcrumbs__separator svg{width:14px;height:14px}.sefin-breadcrumbs--lg .sefin-breadcrumbs__icon svg{width:16px;height:16px}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { items: [{
+                type: Input
+            }], separator: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }] } });
+
 class CardComponent {
     /** Card variant style. Options: 'default' | 'elevated' | 'outlined' */
     variant = 'default';
@@ -4021,6 +4093,171 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 args: ['document:keydown', ['$event']]
             }] } });
 
+class PaginationComponent {
+    /** Current page (1-based) */
+    set currentPage(value) {
+        this._currentPage.set(Math.max(1, value));
+    }
+    get currentPage() {
+        return this._currentPage();
+    }
+    _currentPage = signal(1, ...(ngDevMode ? [{ debugName: "_currentPage" }] : []));
+    /** Total number of pages */
+    set totalPages(value) {
+        this._totalPages.set(Math.max(1, value));
+    }
+    get totalPages() {
+        return this._totalPages();
+    }
+    _totalPages = signal(1, ...(ngDevMode ? [{ debugName: "_totalPages" }] : []));
+    /** Total number of items (alternative to totalPages) */
+    set totalItems(value) {
+        if (value !== undefined) {
+            this._totalItems.set(value);
+        }
+    }
+    get totalItems() {
+        return this._totalItems();
+    }
+    _totalItems = signal(undefined, ...(ngDevMode ? [{ debugName: "_totalItems" }] : []));
+    /** Items per page (used when totalItems is provided) */
+    itemsPerPage = 10;
+    /** Number of page buttons to show on each side of current page */
+    siblingCount = 1;
+    /** Show first and last page buttons */
+    showFirstLast = true;
+    /** Show previous and next buttons */
+    showPrevNext = true;
+    /** Pagination size. Options: 'sm' | 'md' | 'lg' */
+    size = 'md';
+    /** Pagination variant. Options: 'default' | 'compact' */
+    variant = 'default';
+    /** Additional CSS classes */
+    class = '';
+    /** Event emitted when page changes */
+    pageChange = new EventEmitter();
+    /** Computed total pages (from totalItems or direct input) */
+    computedTotalPages = computed(() => {
+        const total = this._totalItems();
+        if (total !== undefined) {
+            return Math.max(1, Math.ceil(total / this.itemsPerPage));
+        }
+        return this._totalPages();
+    }, ...(ngDevMode ? [{ debugName: "computedTotalPages" }] : []));
+    /** Computed page numbers to display */
+    pageNumbers = computed(() => {
+        const current = this._currentPage();
+        const total = this.computedTotalPages();
+        const sibling = this.siblingCount;
+        const pages = [];
+        // Always show first page if not already included
+        if (this.showFirstLast && current > sibling + 2) {
+            pages.push(1);
+            if (current > sibling + 3) {
+                pages.push('ellipsis-start');
+            }
+        }
+        // Calculate start and end of page range
+        const start = Math.max(1, current - sibling);
+        const end = Math.min(total, current + sibling);
+        // Add page numbers in range
+        for (let i = start; i <= end; i++) {
+            pages.push(i);
+        }
+        // Always show last page if not already included
+        if (this.showFirstLast && current < total - sibling - 1) {
+            if (current < total - sibling - 2) {
+                pages.push('ellipsis-end');
+            }
+            pages.push(total);
+        }
+        return pages;
+    }, ...(ngDevMode ? [{ debugName: "pageNumbers" }] : []));
+    get paginationClasses() {
+        return [
+            'sefin-pagination',
+            `sefin-pagination--${this.size}`,
+            `sefin-pagination--${this.variant}`,
+            this.class,
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    isDisabled(direction) {
+        if (direction === 'prev') {
+            return this.currentPage <= 1;
+        }
+        return this.currentPage >= this.computedTotalPages();
+    }
+    goToPage(page) {
+        if (typeof page === 'number') {
+            const validPage = Math.max(1, Math.min(page, this.computedTotalPages()));
+            if (validPage !== this.currentPage) {
+                this._currentPage.set(validPage);
+                this.pageChange.emit(validPage);
+            }
+        }
+    }
+    goToPrevious() {
+        if (!this.isDisabled('prev')) {
+            this.goToPage(this.currentPage - 1);
+        }
+    }
+    goToNext() {
+        if (!this.isDisabled('next')) {
+            this.goToPage(this.currentPage + 1);
+        }
+    }
+    goToFirst() {
+        if (this.currentPage > 1) {
+            this.goToPage(1);
+        }
+    }
+    goToLast() {
+        const lastPage = this.computedTotalPages();
+        if (this.currentPage < lastPage) {
+            this.goToPage(lastPage);
+        }
+    }
+    isEllipsis(item) {
+        return item === 'ellipsis-start' || item === 'ellipsis-end';
+    }
+    isCurrentPage(page) {
+        return typeof page === 'number' && page === this.currentPage;
+    }
+    getAriaCurrent(page) {
+        return this.isCurrentPage(page) ? 'page' : null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: PaginationComponent, isStandalone: true, selector: "sefin-pagination", inputs: { currentPage: "currentPage", totalPages: "totalPages", totalItems: "totalItems", itemsPerPage: "itemsPerPage", siblingCount: "siblingCount", showFirstLast: "showFirstLast", showPrevNext: "showPrevNext", size: "size", variant: "variant", class: "class" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<nav [class]=\"paginationClasses\" aria-label=\"Pagination Navigation\">\n  <ul class=\"sefin-pagination__list\">\n    <!-- First button -->\n    <li *ngIf=\"showFirstLast\" class=\"sefin-pagination__item\">\n      <button\n        type=\"button\"\n        class=\"sefin-pagination__button sefin-pagination__button--nav\"\n        [disabled]=\"currentPage <= 1\"\n        (click)=\"goToFirst()\"\n        aria-label=\"Go to first page\"\n        [attr.aria-disabled]=\"currentPage <= 1\"\n      >\n        <svg\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M11 17L6 12L11 7M18 17L13 12L18 7\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n    </li>\n\n    <!-- Previous button -->\n    <li *ngIf=\"showPrevNext\" class=\"sefin-pagination__item\">\n      <button\n        type=\"button\"\n        class=\"sefin-pagination__button sefin-pagination__button--nav\"\n        [disabled]=\"isDisabled('prev')\"\n        (click)=\"goToPrevious()\"\n        aria-label=\"Go to previous page\"\n        [attr.aria-disabled]=\"isDisabled('prev')\"\n      >\n        <svg\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M15 18L9 12L15 6\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n    </li>\n\n    <!-- Page numbers -->\n    <li\n      *ngFor=\"let page of pageNumbers(); let i = index\"\n      class=\"sefin-pagination__item\"\n    >\n      <ng-container *ngIf=\"isEllipsis(page); else pageButton\">\n        <span class=\"sefin-pagination__ellipsis\" aria-hidden=\"true\">...</span>\n      </ng-container>\n      <ng-template #pageButton>\n        <button\n          type=\"button\"\n          class=\"sefin-pagination__button sefin-pagination__button--page\"\n          [class.sefin-pagination__button--active]=\"isCurrentPage(page)\"\n          (click)=\"goToPage(page)\"\n          [attr.aria-label]=\"'Go to page ' + page\"\n          [attr.aria-current]=\"getAriaCurrent(page)\"\n        >\n          {{ page }}\n        </button>\n      </ng-template>\n    </li>\n\n    <!-- Next button -->\n    <li *ngIf=\"showPrevNext\" class=\"sefin-pagination__item\">\n      <button\n        type=\"button\"\n        class=\"sefin-pagination__button sefin-pagination__button--nav\"\n        [disabled]=\"isDisabled('next')\"\n        (click)=\"goToNext()\"\n        aria-label=\"Go to next page\"\n        [attr.aria-disabled]=\"isDisabled('next')\"\n      >\n        <svg\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M9 18L15 12L9 6\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n    </li>\n\n    <!-- Last button -->\n    <li *ngIf=\"showFirstLast\" class=\"sefin-pagination__item\">\n      <button\n        type=\"button\"\n        class=\"sefin-pagination__button sefin-pagination__button--nav\"\n        [disabled]=\"currentPage >= computedTotalPages()\"\n        (click)=\"goToLast()\"\n        aria-label=\"Go to last page\"\n        [attr.aria-disabled]=\"currentPage >= computedTotalPages()\"\n      >\n        <svg\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M13 17L18 12L13 7M6 17L11 12L6 7\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n    </li>\n  </ul>\n</nav>\n", styles: [".sefin-pagination{display:inline-flex;font-family:var(--sefin-font-family-base)}.sefin-pagination__list{display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px);list-style:none;margin:0;padding:0}.sefin-pagination__item{display:inline-flex;align-items:center}.sefin-pagination__button{display:inline-flex;align-items:center;justify-content:center;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);border:1px solid var(--sefin-color-border);background-color:var(--sefin-color-surface);color:var(--sefin-color-text);cursor:pointer;outline:none;transition:all .2s ease-in-out;border-radius:var(--sefin-radius-md);-webkit-user-select:none;user-select:none}.sefin-pagination__button:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-pagination__button:hover:not(:disabled):not(.sefin-pagination__button--active){background-color:var(--sefin-color-surface-hover);border-color:var(--sefin-color-primary);color:var(--sefin-color-primary)}.sefin-pagination__button:active:not(:disabled){transform:translateY(1px)}.sefin-pagination__button:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.sefin-pagination__button--page{min-width:40px;text-align:center}.sefin-pagination__button--active{background-color:var(--sefin-color-primary);border-color:var(--sefin-color-primary);color:#fff;font-weight:var(--sefin-font-weight-semibold)}.sefin-pagination__button--active:hover{background-color:var(--sefin-color-primary-dark);border-color:var(--sefin-color-primary-dark);color:#fff}.sefin-pagination__button--nav{padding:0}.sefin-pagination__button svg{display:block;width:16px;height:16px;flex-shrink:0}.sefin-pagination__ellipsis{display:inline-flex;align-items:center;justify-content:center;color:var(--sefin-color-text-secondary);padding:0 var(--sefin-spacing-sm, 8px);-webkit-user-select:none;user-select:none;min-width:40px}.sefin-pagination--sm .sefin-pagination__button{padding:var(--sefin-spacing-xs, 4px) var(--sefin-spacing-sm, 8px);font-size:var(--sefin-font-size-sm, 14px);min-height:32px}.sefin-pagination--sm .sefin-pagination__button--page{min-width:32px}.sefin-pagination--sm .sefin-pagination__button svg{width:14px;height:14px}.sefin-pagination--sm .sefin-pagination__ellipsis{font-size:var(--sefin-font-size-sm, 14px);min-width:32px}.sefin-pagination--md .sefin-pagination__button{padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-md, 16px);font-size:var(--sefin-font-size-base, 16px);min-height:40px}.sefin-pagination--md .sefin-pagination__button--page{min-width:40px}.sefin-pagination--md .sefin-pagination__button svg{width:16px;height:16px}.sefin-pagination--md .sefin-pagination__ellipsis{font-size:var(--sefin-font-size-base, 16px);min-width:40px}.sefin-pagination--lg .sefin-pagination__button{padding:var(--sefin-spacing-md, 16px) var(--sefin-spacing-lg, 24px);font-size:var(--sefin-font-size-lg, 18px);min-height:48px}.sefin-pagination--lg .sefin-pagination__button--page{min-width:48px}.sefin-pagination--lg .sefin-pagination__button svg{width:18px;height:18px}.sefin-pagination--lg .sefin-pagination__ellipsis{font-size:var(--sefin-font-size-lg, 18px);min-width:48px}.sefin-pagination--compact .sefin-pagination__button--page{min-width:auto;padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-pagination--compact .sefin-pagination__ellipsis{min-width:auto;padding:0 var(--sefin-spacing-xs, 4px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PaginationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sefin-pagination', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav [class]=\"paginationClasses\" aria-label=\"Pagination Navigation\">\n  <ul class=\"sefin-pagination__list\">\n    <!-- First button -->\n    <li *ngIf=\"showFirstLast\" class=\"sefin-pagination__item\">\n      <button\n        type=\"button\"\n        class=\"sefin-pagination__button sefin-pagination__button--nav\"\n        [disabled]=\"currentPage <= 1\"\n        (click)=\"goToFirst()\"\n        aria-label=\"Go to first page\"\n        [attr.aria-disabled]=\"currentPage <= 1\"\n      >\n        <svg\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M11 17L6 12L11 7M18 17L13 12L18 7\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n    </li>\n\n    <!-- Previous button -->\n    <li *ngIf=\"showPrevNext\" class=\"sefin-pagination__item\">\n      <button\n        type=\"button\"\n        class=\"sefin-pagination__button sefin-pagination__button--nav\"\n        [disabled]=\"isDisabled('prev')\"\n        (click)=\"goToPrevious()\"\n        aria-label=\"Go to previous page\"\n        [attr.aria-disabled]=\"isDisabled('prev')\"\n      >\n        <svg\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M15 18L9 12L15 6\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n    </li>\n\n    <!-- Page numbers -->\n    <li\n      *ngFor=\"let page of pageNumbers(); let i = index\"\n      class=\"sefin-pagination__item\"\n    >\n      <ng-container *ngIf=\"isEllipsis(page); else pageButton\">\n        <span class=\"sefin-pagination__ellipsis\" aria-hidden=\"true\">...</span>\n      </ng-container>\n      <ng-template #pageButton>\n        <button\n          type=\"button\"\n          class=\"sefin-pagination__button sefin-pagination__button--page\"\n          [class.sefin-pagination__button--active]=\"isCurrentPage(page)\"\n          (click)=\"goToPage(page)\"\n          [attr.aria-label]=\"'Go to page ' + page\"\n          [attr.aria-current]=\"getAriaCurrent(page)\"\n        >\n          {{ page }}\n        </button>\n      </ng-template>\n    </li>\n\n    <!-- Next button -->\n    <li *ngIf=\"showPrevNext\" class=\"sefin-pagination__item\">\n      <button\n        type=\"button\"\n        class=\"sefin-pagination__button sefin-pagination__button--nav\"\n        [disabled]=\"isDisabled('next')\"\n        (click)=\"goToNext()\"\n        aria-label=\"Go to next page\"\n        [attr.aria-disabled]=\"isDisabled('next')\"\n      >\n        <svg\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M9 18L15 12L9 6\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n    </li>\n\n    <!-- Last button -->\n    <li *ngIf=\"showFirstLast\" class=\"sefin-pagination__item\">\n      <button\n        type=\"button\"\n        class=\"sefin-pagination__button sefin-pagination__button--nav\"\n        [disabled]=\"currentPage >= computedTotalPages()\"\n        (click)=\"goToLast()\"\n        aria-label=\"Go to last page\"\n        [attr.aria-disabled]=\"currentPage >= computedTotalPages()\"\n      >\n        <svg\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M13 17L18 12L13 7M6 17L11 12L6 7\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </button>\n    </li>\n  </ul>\n</nav>\n", styles: [".sefin-pagination{display:inline-flex;font-family:var(--sefin-font-family-base)}.sefin-pagination__list{display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px);list-style:none;margin:0;padding:0}.sefin-pagination__item{display:inline-flex;align-items:center}.sefin-pagination__button{display:inline-flex;align-items:center;justify-content:center;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-medium);line-height:var(--sefin-line-height-normal);border:1px solid var(--sefin-color-border);background-color:var(--sefin-color-surface);color:var(--sefin-color-text);cursor:pointer;outline:none;transition:all .2s ease-in-out;border-radius:var(--sefin-radius-md);-webkit-user-select:none;user-select:none}.sefin-pagination__button:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-pagination__button:hover:not(:disabled):not(.sefin-pagination__button--active){background-color:var(--sefin-color-surface-hover);border-color:var(--sefin-color-primary);color:var(--sefin-color-primary)}.sefin-pagination__button:active:not(:disabled){transform:translateY(1px)}.sefin-pagination__button:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.sefin-pagination__button--page{min-width:40px;text-align:center}.sefin-pagination__button--active{background-color:var(--sefin-color-primary);border-color:var(--sefin-color-primary);color:#fff;font-weight:var(--sefin-font-weight-semibold)}.sefin-pagination__button--active:hover{background-color:var(--sefin-color-primary-dark);border-color:var(--sefin-color-primary-dark);color:#fff}.sefin-pagination__button--nav{padding:0}.sefin-pagination__button svg{display:block;width:16px;height:16px;flex-shrink:0}.sefin-pagination__ellipsis{display:inline-flex;align-items:center;justify-content:center;color:var(--sefin-color-text-secondary);padding:0 var(--sefin-spacing-sm, 8px);-webkit-user-select:none;user-select:none;min-width:40px}.sefin-pagination--sm .sefin-pagination__button{padding:var(--sefin-spacing-xs, 4px) var(--sefin-spacing-sm, 8px);font-size:var(--sefin-font-size-sm, 14px);min-height:32px}.sefin-pagination--sm .sefin-pagination__button--page{min-width:32px}.sefin-pagination--sm .sefin-pagination__button svg{width:14px;height:14px}.sefin-pagination--sm .sefin-pagination__ellipsis{font-size:var(--sefin-font-size-sm, 14px);min-width:32px}.sefin-pagination--md .sefin-pagination__button{padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-md, 16px);font-size:var(--sefin-font-size-base, 16px);min-height:40px}.sefin-pagination--md .sefin-pagination__button--page{min-width:40px}.sefin-pagination--md .sefin-pagination__button svg{width:16px;height:16px}.sefin-pagination--md .sefin-pagination__ellipsis{font-size:var(--sefin-font-size-base, 16px);min-width:40px}.sefin-pagination--lg .sefin-pagination__button{padding:var(--sefin-spacing-md, 16px) var(--sefin-spacing-lg, 24px);font-size:var(--sefin-font-size-lg, 18px);min-height:48px}.sefin-pagination--lg .sefin-pagination__button--page{min-width:48px}.sefin-pagination--lg .sefin-pagination__button svg{width:18px;height:18px}.sefin-pagination--lg .sefin-pagination__ellipsis{font-size:var(--sefin-font-size-lg, 18px);min-width:48px}.sefin-pagination--compact .sefin-pagination__button--page{min-width:auto;padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-pagination--compact .sefin-pagination__ellipsis{min-width:auto;padding:0 var(--sefin-spacing-xs, 4px)}\n"] }]
+        }], propDecorators: { currentPage: [{
+                type: Input
+            }], totalPages: [{
+                type: Input
+            }], totalItems: [{
+                type: Input
+            }], itemsPerPage: [{
+                type: Input
+            }], siblingCount: [{
+                type: Input
+            }], showFirstLast: [{
+                type: Input
+            }], showPrevNext: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }], pageChange: [{
+                type: Output
+            }] } });
+
 class TextareaComponent {
     textareaRef;
     /** Textarea variant style. Options: 'outlined' | 'filled' | 'standard' */
@@ -4410,5 +4647,5 @@ const STYLES_PATH = './styles/index.scss';
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionItemComponent, AlertComponent, AutocompleteComponent, AvatarComponent, BORDER_RADIUS_TOKENS, BRAND_THEME, BadgeComponent, ButtonComponent, COLOR_TOKENS, CardComponent, CheckboxComponent, ChipComponent, ContainerComponent, DARK_THEME, DESIGN_TOKENS, DatepickerComponent, DividerComponent, FabButtonComponent, IconButtonComponent, IconComponent, ImageComponent, LIGHT_THEME, LinkComponent, ProgressBarComponent, RadioComponent, SHADOW_TOKENS, SPACING_TOKENS, STYLES_PATH, SelectComponent, SpinnerComponent, StackComponent, SwitchComponent, TYPOGRAPHY_TOKENS, TabComponent, TagComponent, TextFieldComponent, TextareaComponent, ThemeLoader, ToastComponent, TooltipComponent, TypographyComponent };
+export { AccordionItemComponent, AlertComponent, AutocompleteComponent, AvatarComponent, BORDER_RADIUS_TOKENS, BRAND_THEME, BadgeComponent, BreadcrumbsComponent, ButtonComponent, COLOR_TOKENS, CardComponent, CheckboxComponent, ChipComponent, ContainerComponent, DARK_THEME, DESIGN_TOKENS, DatepickerComponent, DividerComponent, FabButtonComponent, IconButtonComponent, IconComponent, ImageComponent, LIGHT_THEME, LinkComponent, PaginationComponent, ProgressBarComponent, RadioComponent, SHADOW_TOKENS, SPACING_TOKENS, STYLES_PATH, SelectComponent, SpinnerComponent, StackComponent, SwitchComponent, TYPOGRAPHY_TOKENS, TabComponent, TagComponent, TextFieldComponent, TextareaComponent, ThemeLoader, ToastComponent, TooltipComponent, TypographyComponent };
 //# sourceMappingURL=lesterarte-sefin-ui.mjs.map