@lesterarte/sefin-ui 0.0.20-dev.3 → 0.0.20-dev.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Input, ChangeDetectionStrategy, Component, EventEmitter, Output, forwardRef, ViewChild, HostListener } from '@angular/core';
|
|
2
|
+
import { Input, ChangeDetectionStrategy, Component, EventEmitter, Output, forwardRef, ViewChild, HostListener, signal, computed } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import * as i1$1 from '@angular/platform-browser';
|
|
@@ -4093,6 +4093,171 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
4093
4093
|
args: ['document:keydown', ['$event']]
|
|
4094
4094
|
}] } });
|
|
4095
4095
|
|
|
4096
|
+
class PaginationComponent {
|
|
4097
|
+
/** Current page (1-based) */
|
|
4098
|
+
set currentPage(value) {
|
|
4099
|
+
this._currentPage.set(Math.max(1, value));
|
|
4100
|
+
}
|
|
4101
|
+
get currentPage() {
|
|
4102
|
+
return this._currentPage();
|
|
4103
|
+
}
|
|
4104
|
+
_currentPage = signal(1, ...(ngDevMode ? [{ debugName: "_currentPage" }] : []));
|
|
4105
|
+
/** Total number of pages */
|
|
4106
|
+
set totalPages(value) {
|
|
4107
|
+
this._totalPages.set(Math.max(1, value));
|
|
4108
|
+
}
|
|
4109
|
+
get totalPages() {
|
|
4110
|
+
return this._totalPages();
|
|
4111
|
+
}
|
|
4112
|
+
_totalPages = signal(1, ...(ngDevMode ? [{ debugName: "_totalPages" }] : []));
|
|
4113
|
+
/** Total number of items (alternative to totalPages) */
|
|
4114
|
+
set totalItems(value) {
|
|
4115
|
+
if (value !== undefined) {
|
|
4116
|
+
this._totalItems.set(value);
|
|
4117
|
+
}
|
|
4118
|
+
}
|
|
4119
|
+
get totalItems() {
|
|
4120
|
+
return this._totalItems();
|
|
4121
|
+
}
|
|
4122
|
+
_totalItems = signal(undefined, ...(ngDevMode ? [{ debugName: "_totalItems" }] : []));
|
|
4123
|
+
/** Items per page (used when totalItems is provided) */
|
|
4124
|
+
itemsPerPage = 10;
|
|
4125
|
+
/** Number of page buttons to show on each side of current page */
|
|
4126
|
+
siblingCount = 1;
|
|
4127
|
+
/** Show first and last page buttons */
|
|
4128
|
+
showFirstLast = true;
|
|
4129
|
+
/** Show previous and next buttons */
|
|
4130
|
+
showPrevNext = true;
|
|
4131
|
+
/** Pagination size. Options: 'sm' | 'md' | 'lg' */
|
|
4132
|
+
size = 'md';
|
|
4133
|
+
/** Pagination variant. Options: 'default' | 'compact' */
|
|
4134
|
+
variant = 'default';
|
|
4135
|
+
/** Additional CSS classes */
|
|
4136
|
+
class = '';
|
|
4137
|
+
/** Event emitted when page changes */
|
|
4138
|
+
pageChange = new EventEmitter();
|
|
4139
|
+
/** Computed total pages (from totalItems or direct input) */
|
|
4140
|
+
computedTotalPages = computed(() => {
|
|
4141
|
+
const total = this._totalItems();
|
|
4142
|
+
if (total !== undefined) {
|
|
4143
|
+
return Math.max(1, Math.ceil(total / this.itemsPerPage));
|
|
4144
|
+
}
|
|
4145
|
+
return this._totalPages();
|
|
4146
|
+
}, ...(ngDevMode ? [{ debugName: "computedTotalPages" }] : []));
|
|
4147
|
+
/** Computed page numbers to display */
|
|
4148
|
+
pageNumbers = computed(() => {
|
|
4149
|
+
const current = this._currentPage();
|
|
4150
|
+
const total = this.computedTotalPages();
|
|
4151
|
+
const sibling = this.siblingCount;
|
|
4152
|
+
const pages = [];
|
|
4153
|
+
// Always show first page if not already included
|
|
4154
|
+
if (this.showFirstLast && current > sibling + 2) {
|
|
4155
|
+
pages.push(1);
|
|
4156
|
+
if (current > sibling + 3) {
|
|
4157
|
+
pages.push('ellipsis-start');
|
|
4158
|
+
}
|
|
4159
|
+
}
|
|
4160
|
+
// Calculate start and end of page range
|
|
4161
|
+
const start = Math.max(1, current - sibling);
|
|
4162
|
+
const end = Math.min(total, current + sibling);
|
|
4163
|
+
// Add page numbers in range
|
|
4164
|
+
for (let i = start; i <= end; i++) {
|
|
4165
|
+
pages.push(i);
|
|
4166
|
+
}
|
|
4167
|
+
// Always show last page if not already included
|
|
4168
|
+
if (this.showFirstLast && current < total - sibling - 1) {
|
|
4169
|
+
if (current < total - sibling - 2) {
|
|
4170
|
+
pages.push('ellipsis-end');
|
|
4171
|
+
}
|
|
4172
|
+
pages.push(total);
|
|
4173
|
+
}
|
|
4174
|
+
return pages;
|
|
4175
|
+
}, ...(ngDevMode ? [{ debugName: "pageNumbers" }] : []));
|
|
4176
|
+
get paginationClasses() {
|
|
4177
|
+
return [
|
|
4178
|
+
'sefin-pagination',
|
|
4179
|
+
`sefin-pagination--${this.size}`,
|
|
4180
|
+
`sefin-pagination--${this.variant}`,
|
|
4181
|
+
this.class,
|
|
4182
|
+
]
|
|
4183
|
+
.filter(Boolean)
|
|
4184
|
+
.join(' ');
|
|
4185
|
+
}
|
|
4186
|
+
isDisabled(direction) {
|
|
4187
|
+
if (direction === 'prev') {
|
|
4188
|
+
return this.currentPage <= 1;
|
|
4189
|
+
}
|
|
4190
|
+
return this.currentPage >= this.computedTotalPages();
|
|
4191
|
+
}
|
|
4192
|
+
goToPage(page) {
|
|
4193
|
+
if (typeof page === 'number') {
|
|
4194
|
+
const validPage = Math.max(1, Math.min(page, this.computedTotalPages()));
|
|
4195
|
+
if (validPage !== this.currentPage) {
|
|
4196
|
+
this._currentPage.set(validPage);
|
|
4197
|
+
this.pageChange.emit(validPage);
|
|
4198
|
+
}
|
|
4199
|
+
}
|
|
4200
|
+
}
|
|
4201
|
+
goToPrevious() {
|
|
4202
|
+
if (!this.isDisabled('prev')) {
|
|
4203
|
+
this.goToPage(this.currentPage - 1);
|
|
4204
|
+
}
|
|
4205
|
+
}
|
|
4206
|
+
goToNext() {
|
|
4207
|
+
if (!this.isDisabled('next')) {
|
|
4208
|
+
this.goToPage(this.currentPage + 1);
|
|
4209
|
+
}
|
|
4210
|
+
}
|
|
4211
|
+
goToFirst() {
|
|
4212
|
+
if (this.currentPage > 1) {
|
|
4213
|
+
this.goToPage(1);
|
|
4214
|
+
}
|
|
4215
|
+
}
|
|
4216
|
+
goToLast() {
|
|
4217
|
+
const lastPage = this.computedTotalPages();
|
|
4218
|
+
if (this.currentPage < lastPage) {
|
|
4219
|
+
this.goToPage(lastPage);
|
|
4220
|
+
}
|
|
4221
|
+
}
|
|
4222
|
+
isEllipsis(item) {
|
|
4223
|
+
return item === 'ellipsis-start' || item === 'ellipsis-end';
|
|
4224
|
+
}
|
|
4225
|
+
isCurrentPage(page) {
|
|
4226
|
+
return typeof page === 'number' && page === this.currentPage;
|
|
4227
|
+
}
|
|
4228
|
+
getAriaCurrent(page) {
|
|
4229
|
+
return this.isCurrentPage(page) ? 'page' : null;
|
|
4230
|
+
}
|
|
4231
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4232
|
+
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 });
|
|
4233
|
+
}
|
|
4234
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PaginationComponent, decorators: [{
|
|
4235
|
+
type: Component,
|
|
4236
|
+
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"] }]
|
|
4237
|
+
}], propDecorators: { currentPage: [{
|
|
4238
|
+
type: Input
|
|
4239
|
+
}], totalPages: [{
|
|
4240
|
+
type: Input
|
|
4241
|
+
}], totalItems: [{
|
|
4242
|
+
type: Input
|
|
4243
|
+
}], itemsPerPage: [{
|
|
4244
|
+
type: Input
|
|
4245
|
+
}], siblingCount: [{
|
|
4246
|
+
type: Input
|
|
4247
|
+
}], showFirstLast: [{
|
|
4248
|
+
type: Input
|
|
4249
|
+
}], showPrevNext: [{
|
|
4250
|
+
type: Input
|
|
4251
|
+
}], size: [{
|
|
4252
|
+
type: Input
|
|
4253
|
+
}], variant: [{
|
|
4254
|
+
type: Input
|
|
4255
|
+
}], class: [{
|
|
4256
|
+
type: Input
|
|
4257
|
+
}], pageChange: [{
|
|
4258
|
+
type: Output
|
|
4259
|
+
}] } });
|
|
4260
|
+
|
|
4096
4261
|
class TextareaComponent {
|
|
4097
4262
|
textareaRef;
|
|
4098
4263
|
/** Textarea variant style. Options: 'outlined' | 'filled' | 'standard' */
|
|
@@ -4482,5 +4647,5 @@ const STYLES_PATH = './styles/index.scss';
|
|
|
4482
4647
|
* Generated bundle index. Do not edit.
|
|
4483
4648
|
*/
|
|
4484
4649
|
|
|
4485
|
-
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, ProgressBarComponent, RadioComponent, SHADOW_TOKENS, SPACING_TOKENS, STYLES_PATH, SelectComponent, SpinnerComponent, StackComponent, SwitchComponent, TYPOGRAPHY_TOKENS, TabComponent, TagComponent, TextFieldComponent, TextareaComponent, ThemeLoader, ToastComponent, TooltipComponent, TypographyComponent };
|
|
4650
|
+
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 };
|
|
4486
4651
|
//# sourceMappingURL=lesterarte-sefin-ui.mjs.map
|