pdm-ui-kit 0.1.35 → 0.1.37
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.
- package/esm2020/lib/components/date-picker/date-picker.component.mjs +3 -3
- package/esm2020/lib/components/dialog/dialog.component.mjs +56 -14
- package/esm2020/lib/components/pagination/pagination.component.mjs +9 -63
- package/fesm2015/pdm-ui-kit.mjs +65 -77
- package/fesm2015/pdm-ui-kit.mjs.map +1 -1
- package/fesm2020/pdm-ui-kit.mjs +65 -77
- package/fesm2020/pdm-ui-kit.mjs.map +1 -1
- package/lib/components/dialog/dialog.component.d.ts +14 -6
- package/lib/components/pagination/pagination.component.d.ts +4 -12
- package/package.json +1 -1
package/fesm2015/pdm-ui-kit.mjs
CHANGED
|
@@ -2090,8 +2090,8 @@ class PdmDatePickerComponent {
|
|
|
2090
2090
|
get panelClasses() {
|
|
2091
2091
|
return [
|
|
2092
2092
|
this.panelPlacement === 'top'
|
|
2093
|
-
? 'absolute bottom-full left-0 z-
|
|
2094
|
-
: 'absolute left-0 top-full z-
|
|
2093
|
+
? 'absolute bottom-full left-0 z-50 mb-2'
|
|
2094
|
+
: 'absolute left-0 top-full z-50 mt-2',
|
|
2095
2095
|
this.panelClassName
|
|
2096
2096
|
];
|
|
2097
2097
|
}
|
|
@@ -2303,18 +2303,20 @@ class PdmDialogComponent {
|
|
|
2303
2303
|
constructor() {
|
|
2304
2304
|
this.open = false;
|
|
2305
2305
|
this.variant = 'default';
|
|
2306
|
+
this.size = 'desktop';
|
|
2306
2307
|
this.title = 'Edit profile';
|
|
2307
2308
|
this.description = 'Make changes to your profile here. Click save when you\'re done.';
|
|
2308
2309
|
this.closeOnBackdrop = true;
|
|
2309
2310
|
this.closeOnEsc = true;
|
|
2310
2311
|
this.showCloseButton = true;
|
|
2312
|
+
this.showHeader = true;
|
|
2313
|
+
this.showFooter = true;
|
|
2311
2314
|
this.primaryActionText = 'Save changes';
|
|
2312
2315
|
this.secondaryActionText = 'Cancel';
|
|
2313
|
-
this.
|
|
2314
|
-
this.
|
|
2315
|
-
this.
|
|
2316
|
-
this.
|
|
2317
|
-
this.linkValue = 'https://ui.shadcn.com/docs/installation';
|
|
2316
|
+
this.alignFooter = 'right';
|
|
2317
|
+
this.headerClassName = '';
|
|
2318
|
+
this.bodyClassName = '';
|
|
2319
|
+
this.footerClassName = '';
|
|
2318
2320
|
this.className = '';
|
|
2319
2321
|
this.openChange = new EventEmitter();
|
|
2320
2322
|
this.primaryAction = new EventEmitter();
|
|
@@ -2339,16 +2341,54 @@ class PdmDialogComponent {
|
|
|
2339
2341
|
this.close();
|
|
2340
2342
|
}
|
|
2341
2343
|
}
|
|
2344
|
+
get panelClassName() {
|
|
2345
|
+
const base = [
|
|
2346
|
+
'relative z-10 w-full border border-border bg-background text-foreground shadow-lg',
|
|
2347
|
+
this.size === 'desktop' ? 'max-w-[640px] max-h-[calc(100vh-2rem)] rounded-[10px] overflow-visible' : '',
|
|
2348
|
+
this.size === 'mobile' ? 'max-w-[320px] min-h-[240px] rounded-[10px] overflow-visible' : '',
|
|
2349
|
+
this.size === 'mobile-fullscreen'
|
|
2350
|
+
? 'max-w-[320px] h-[min(100dvh,640px)] rounded-none sm:rounded-[10px] overflow-visible'
|
|
2351
|
+
: '',
|
|
2352
|
+
this.className
|
|
2353
|
+
];
|
|
2354
|
+
return base.filter(Boolean).join(' ');
|
|
2355
|
+
}
|
|
2356
|
+
get bodyWrapperClassName() {
|
|
2357
|
+
const base = [
|
|
2358
|
+
'min-h-0 flex-1',
|
|
2359
|
+
this.size === 'mobile-fullscreen' ? 'overflow-y-auto px-4 py-6' : 'px-6 py-6',
|
|
2360
|
+
this.bodyClassName
|
|
2361
|
+
];
|
|
2362
|
+
return base.filter(Boolean).join(' ');
|
|
2363
|
+
}
|
|
2364
|
+
get headerWrapperClassName() {
|
|
2365
|
+
return ['flex items-start justify-between gap-3 p-4', this.headerClassName].filter(Boolean).join(' ');
|
|
2366
|
+
}
|
|
2367
|
+
get footerWrapperClassName() {
|
|
2368
|
+
const effectiveAlign = this.alignFooter === 'right' && this.variant === 'custom-close' ? 'left' : this.alignFooter;
|
|
2369
|
+
const base = [
|
|
2370
|
+
'p-4',
|
|
2371
|
+
effectiveAlign === 'full-width'
|
|
2372
|
+
? 'flex flex-col gap-2'
|
|
2373
|
+
: effectiveAlign === 'left'
|
|
2374
|
+
? 'flex items-center gap-2 justify-start'
|
|
2375
|
+
: 'flex items-center gap-2 justify-end',
|
|
2376
|
+
this.footerClassName
|
|
2377
|
+
];
|
|
2378
|
+
return base.filter(Boolean).join(' ');
|
|
2379
|
+
}
|
|
2342
2380
|
}
|
|
2343
2381
|
PdmDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2344
|
-
PdmDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmDialogComponent, selector: "pdm-dialog", inputs: { open: "open", variant: "variant", title: "title", description: "description", closeOnBackdrop: "closeOnBackdrop", closeOnEsc: "closeOnEsc", showCloseButton: "showCloseButton",
|
|
2382
|
+
PdmDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmDialogComponent, selector: "pdm-dialog", inputs: { open: "open", variant: "variant", size: "size", title: "title", description: "description", closeOnBackdrop: "closeOnBackdrop", closeOnEsc: "closeOnEsc", showCloseButton: "showCloseButton", showHeader: "showHeader", showFooter: "showFooter", primaryActionText: "primaryActionText", secondaryActionText: "secondaryActionText", alignFooter: "alignFooter", headerClassName: "headerClassName", bodyClassName: "bodyClassName", footerClassName: "footerClassName", className: "className" }, outputs: { openChange: "openChange", primaryAction: "primaryAction", secondaryAction: "secondaryAction" }, host: { listeners: { "document:keydown.escape": "onEsc()" } }, ngImport: i0, template: "<div *ngIf=\"open\" class=\"fixed inset-0 z-50 flex items-center justify-center p-4\">\n <div class=\"absolute inset-0 bg-foreground/30\" (click)=\"onBackdropClick()\"></div>\n <section role=\"dialog\" aria-modal=\"true\" [ngClass]=\"panelClassName\">\n <div *ngIf=\"showHeader\" [ngClass]=\"headerWrapperClassName\">\n <div class=\"min-w-0\">\n <h2 class=\"m-0 text-lg font-semibold leading-none tracking-tight text-foreground\">{{ title }}</h2>\n <p *ngIf=\"description\" class=\"m-0 mt-2 text-sm text-muted-foreground\">{{ description }}</p>\n </div>\n <button\n *ngIf=\"showCloseButton\"\n type=\"button\"\n class=\"inline-flex h-6 w-6 appearance-none items-center justify-center rounded-sm border-0 bg-transparent p-0 text-foreground opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none\"\n (click)=\"close()\"\n aria-label=\"Close dialog\"\n >\n <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M6 6L18 18M18 6L6 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n </svg>\n </button>\n </div>\n\n <div [ngClass]=\"bodyWrapperClassName\">\n <ng-content></ng-content>\n </div>\n\n <div *ngIf=\"showFooter\" [ngClass]=\"footerWrapperClassName\">\n <ng-container *ngIf=\"variant === 'custom-close'; else defaultActions\">\n <button\n type=\"button\"\n class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm\"\n (click)=\"onSecondaryAction()\"\n >\n {{ secondaryActionText }}\n </button>\n </ng-container>\n\n <ng-template #defaultActions>\n <button\n type=\"button\"\n class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm\"\n (click)=\"onSecondaryAction()\"\n >\n {{ secondaryActionText }}\n </button>\n <button\n type=\"button\"\n class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm\"\n (click)=\"onPrimaryAction()\"\n >\n {{ primaryActionText }}\n </button>\n </ng-template>\n </div>\n </section>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2345
2383
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDialogComponent, decorators: [{
|
|
2346
2384
|
type: Component,
|
|
2347
|
-
args: [{ selector: 'pdm-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"open\" class=\"fixed inset-0 z-50 flex items-center justify-center p-4\">\n <div class=\"absolute inset-0 bg-foreground/30\" (click)=\"onBackdropClick()\"></div>\n <section
|
|
2385
|
+
args: [{ selector: 'pdm-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"open\" class=\"fixed inset-0 z-50 flex items-center justify-center p-4\">\n <div class=\"absolute inset-0 bg-foreground/30\" (click)=\"onBackdropClick()\"></div>\n <section role=\"dialog\" aria-modal=\"true\" [ngClass]=\"panelClassName\">\n <div *ngIf=\"showHeader\" [ngClass]=\"headerWrapperClassName\">\n <div class=\"min-w-0\">\n <h2 class=\"m-0 text-lg font-semibold leading-none tracking-tight text-foreground\">{{ title }}</h2>\n <p *ngIf=\"description\" class=\"m-0 mt-2 text-sm text-muted-foreground\">{{ description }}</p>\n </div>\n <button\n *ngIf=\"showCloseButton\"\n type=\"button\"\n class=\"inline-flex h-6 w-6 appearance-none items-center justify-center rounded-sm border-0 bg-transparent p-0 text-foreground opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none\"\n (click)=\"close()\"\n aria-label=\"Close dialog\"\n >\n <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M6 6L18 18M18 6L6 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n </svg>\n </button>\n </div>\n\n <div [ngClass]=\"bodyWrapperClassName\">\n <ng-content></ng-content>\n </div>\n\n <div *ngIf=\"showFooter\" [ngClass]=\"footerWrapperClassName\">\n <ng-container *ngIf=\"variant === 'custom-close'; else defaultActions\">\n <button\n type=\"button\"\n class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm\"\n (click)=\"onSecondaryAction()\"\n >\n {{ secondaryActionText }}\n </button>\n </ng-container>\n\n <ng-template #defaultActions>\n <button\n type=\"button\"\n class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm\"\n (click)=\"onSecondaryAction()\"\n >\n {{ secondaryActionText }}\n </button>\n <button\n type=\"button\"\n class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm\"\n (click)=\"onPrimaryAction()\"\n >\n {{ primaryActionText }}\n </button>\n </ng-template>\n </div>\n </section>\n</div>\n" }]
|
|
2348
2386
|
}], propDecorators: { open: [{
|
|
2349
2387
|
type: Input
|
|
2350
2388
|
}], variant: [{
|
|
2351
2389
|
type: Input
|
|
2390
|
+
}], size: [{
|
|
2391
|
+
type: Input
|
|
2352
2392
|
}], title: [{
|
|
2353
2393
|
type: Input
|
|
2354
2394
|
}], description: [{
|
|
@@ -2359,19 +2399,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
2359
2399
|
type: Input
|
|
2360
2400
|
}], showCloseButton: [{
|
|
2361
2401
|
type: Input
|
|
2402
|
+
}], showHeader: [{
|
|
2403
|
+
type: Input
|
|
2404
|
+
}], showFooter: [{
|
|
2405
|
+
type: Input
|
|
2362
2406
|
}], primaryActionText: [{
|
|
2363
2407
|
type: Input
|
|
2364
2408
|
}], secondaryActionText: [{
|
|
2365
2409
|
type: Input
|
|
2366
|
-
}],
|
|
2367
|
-
type: Input
|
|
2368
|
-
}], nameValue: [{
|
|
2410
|
+
}], alignFooter: [{
|
|
2369
2411
|
type: Input
|
|
2370
|
-
}],
|
|
2412
|
+
}], headerClassName: [{
|
|
2371
2413
|
type: Input
|
|
2372
|
-
}],
|
|
2414
|
+
}], bodyClassName: [{
|
|
2373
2415
|
type: Input
|
|
2374
|
-
}],
|
|
2416
|
+
}], footerClassName: [{
|
|
2375
2417
|
type: Input
|
|
2376
2418
|
}], className: [{
|
|
2377
2419
|
type: Input
|
|
@@ -3335,46 +3377,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
3335
3377
|
args: ['window:scroll']
|
|
3336
3378
|
}] } });
|
|
3337
3379
|
|
|
3338
|
-
const coerceNumber = (value, fallback) => {
|
|
3339
|
-
const next = Number(value);
|
|
3340
|
-
return Number.isFinite(next) ? next : fallback;
|
|
3341
|
-
};
|
|
3342
3380
|
class PdmPaginationComponent {
|
|
3343
3381
|
constructor() {
|
|
3344
|
-
this.
|
|
3345
|
-
this.
|
|
3346
|
-
this.
|
|
3347
|
-
this._rowsPerPage = 10;
|
|
3382
|
+
this.page = 1;
|
|
3383
|
+
this.pageCount = 1;
|
|
3384
|
+
this.maxVisible = 4;
|
|
3348
3385
|
this.className = '';
|
|
3349
3386
|
this.rowsPerPageLabel = 'Rows per page';
|
|
3387
|
+
this.rowsPerPage = 10;
|
|
3350
3388
|
this.rowsPerPageOptions = [10, 20, 30, 50];
|
|
3351
3389
|
this.pageChange = new EventEmitter();
|
|
3352
3390
|
this.rowsPerPageChange = new EventEmitter();
|
|
3353
3391
|
}
|
|
3354
|
-
get page() {
|
|
3355
|
-
return this._page;
|
|
3356
|
-
}
|
|
3357
|
-
set page(value) {
|
|
3358
|
-
this._page = coerceNumber(value, 1);
|
|
3359
|
-
}
|
|
3360
|
-
get pageCount() {
|
|
3361
|
-
return this._pageCount;
|
|
3362
|
-
}
|
|
3363
|
-
set pageCount(value) {
|
|
3364
|
-
this._pageCount = coerceNumber(value, 1);
|
|
3365
|
-
}
|
|
3366
|
-
get maxVisible() {
|
|
3367
|
-
return this._maxVisible;
|
|
3368
|
-
}
|
|
3369
|
-
set maxVisible(value) {
|
|
3370
|
-
this._maxVisible = coerceNumber(value, 4);
|
|
3371
|
-
}
|
|
3372
|
-
get rowsPerPage() {
|
|
3373
|
-
return this._rowsPerPage;
|
|
3374
|
-
}
|
|
3375
|
-
set rowsPerPage(value) {
|
|
3376
|
-
this._rowsPerPage = coerceNumber(value, 10);
|
|
3377
|
-
}
|
|
3378
3392
|
get rowsPerPageSelectOptions() {
|
|
3379
3393
|
return this.rowsPerPageOptions.map((value) => ({
|
|
3380
3394
|
label: String(value),
|
|
@@ -3386,40 +3400,15 @@ class PdmPaginationComponent {
|
|
|
3386
3400
|
}
|
|
3387
3401
|
get visiblePages() {
|
|
3388
3402
|
const total = Math.max(1, this.pageCount);
|
|
3389
|
-
|
|
3390
|
-
if (total <= maxVisible) {
|
|
3403
|
+
if (total <= Math.max(1, this.maxVisible)) {
|
|
3391
3404
|
return Array.from({ length: total }, (_, i) => i + 1);
|
|
3392
3405
|
}
|
|
3393
|
-
|
|
3394
|
-
const windowSize = Math.max(1, maxVisible - 1);
|
|
3395
|
-
const startThreshold = Math.ceil(windowSize / 2);
|
|
3396
|
-
const endThreshold = total - Math.floor(windowSize / 2);
|
|
3397
|
-
const range = (start, end) => Array.from({ length: end - start + 1 }, (_, i) => start + i);
|
|
3398
|
-
if (current <= startThreshold) {
|
|
3399
|
-
const end = Math.min(windowSize, total - 1);
|
|
3400
|
-
return [...range(1, end), 'ellipsis', total];
|
|
3401
|
-
}
|
|
3402
|
-
if (current >= endThreshold) {
|
|
3403
|
-
const start = Math.max(1, total - windowSize);
|
|
3404
|
-
const pages = range(start, total);
|
|
3405
|
-
if (pages[0] === 1) {
|
|
3406
|
-
return pages;
|
|
3407
|
-
}
|
|
3408
|
-
return [1, 'ellipsis', ...pages];
|
|
3409
|
-
}
|
|
3410
|
-
let start = current - Math.floor(windowSize / 2);
|
|
3411
|
-
let end = start + windowSize - 1;
|
|
3412
|
-
if (end >= total) {
|
|
3413
|
-
end = total - 1;
|
|
3414
|
-
start = end - windowSize + 1;
|
|
3415
|
-
}
|
|
3416
|
-
return [...range(start, end), 'ellipsis', total];
|
|
3406
|
+
return [1, 2, 'ellipsis', total];
|
|
3417
3407
|
}
|
|
3418
3408
|
setPage(next) {
|
|
3419
3409
|
if (next < 1 || next > this.pageCount || next === this.page) {
|
|
3420
3410
|
return;
|
|
3421
3411
|
}
|
|
3422
|
-
this._page = next;
|
|
3423
3412
|
this.pageChange.emit(next);
|
|
3424
3413
|
}
|
|
3425
3414
|
onRowsPerPageChangeValue(value) {
|
|
@@ -3427,15 +3416,14 @@ class PdmPaginationComponent {
|
|
|
3427
3416
|
if (!Number.isFinite(next) || next <= 0 || next === this.rowsPerPage) {
|
|
3428
3417
|
return;
|
|
3429
3418
|
}
|
|
3430
|
-
this._rowsPerPage = next;
|
|
3431
3419
|
this.rowsPerPageChange.emit(next);
|
|
3432
3420
|
}
|
|
3433
3421
|
}
|
|
3434
3422
|
PdmPaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3435
|
-
PdmPaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmPaginationComponent, selector: "pdm-pagination", inputs: { page: "page", pageCount: "pageCount", maxVisible: "maxVisible", className: "className", rowsPerPageLabel: "rowsPerPageLabel", rowsPerPage: "rowsPerPage", rowsPerPageOptions: "rowsPerPageOptions" }, outputs: { pageChange: "pageChange", rowsPerPageChange: "rowsPerPageChange" }, ngImport: i0, template: "<nav\n aria-label=\"Pagination\"\n [ngClass]=\"[\n 'mx-auto flex w-full flex-wrap items-center justify-center gap-4',\n className,\n ]\"\n>\n <div class=\"flex items-center gap-3\" *ngIf=\"rowsPerPageOptions.length > 0\">\n <span class=\"text-sm font-medium text-foreground\">{{\n rowsPerPageLabel\n }}</span>\n <pdm-select\n [value]=\"rowsPerPageValue\"\n [options]=\"rowsPerPageSelectOptions\"\n [placeholder]=\"rowsPerPageValue\"\n className=\"w-[120px]\"\n (valueChange)=\"onRowsPerPageChangeValue($event)\"\n ></pdm-select>\n </div>\n\n <ul class=\"m-0 flex list-none items-center gap-1 p-0\">\n <li>\n <button\n type=\"button\"\n class=\"inline-flex h-9 appearance-none items-center justify-center gap-1 rounded-md border-0 bg-transparent px-2 text-sm text-foreground hover:bg-accent disabled:opacity-50 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n [disabled]=\"page <= 1\"\n (click)=\"setPage(page - 1)\"\n >\n <pdm-icon name=\"chevron-left\" [size]=\"14\"></pdm-icon>\n Previous\n </button>\n </li>\n <li *ngFor=\"let pageNumber of visiblePages\">\n <ng-container *ngIf=\"pageNumber === 'ellipsis'; else pageButton\">\n <span\n class=\"inline-flex h-9 min-w-9 items-center justify-center px-2 text-sm text-muted-foreground\"\n >...</span\n >\n </ng-container>\n <ng-template #pageButton>\n <button\n type=\"button\"\n [ngClass]=\"[\n 'inline-flex h-9 min-w-9 items-center justify-center rounded-md px-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n pageNumber === page\n ? 'appearance-none border border-border bg-muted
|
|
3423
|
+
PdmPaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmPaginationComponent, selector: "pdm-pagination", inputs: { page: "page", pageCount: "pageCount", maxVisible: "maxVisible", className: "className", rowsPerPageLabel: "rowsPerPageLabel", rowsPerPage: "rowsPerPage", rowsPerPageOptions: "rowsPerPageOptions" }, outputs: { pageChange: "pageChange", rowsPerPageChange: "rowsPerPageChange" }, ngImport: i0, template: "<nav\n aria-label=\"Pagination\"\n [ngClass]=\"[\n 'mx-auto flex w-full flex-wrap items-center justify-center gap-4',\n className,\n ]\"\n>\n <div class=\"flex items-center gap-3\" *ngIf=\"rowsPerPageOptions.length > 0\">\n <span class=\"text-sm font-medium text-foreground\">{{\n rowsPerPageLabel\n }}</span>\n <pdm-select\n [value]=\"rowsPerPageValue\"\n [options]=\"rowsPerPageSelectOptions\"\n [placeholder]=\"rowsPerPageValue\"\n className=\"w-[120px]\"\n (valueChange)=\"onRowsPerPageChangeValue($event)\"\n ></pdm-select>\n </div>\n\n <ul class=\"m-0 flex list-none items-center gap-1 p-0\">\n <li>\n <button\n type=\"button\"\n class=\"inline-flex h-9 appearance-none items-center justify-center gap-1 rounded-md border-0 bg-transparent px-2 text-sm text-foreground hover:bg-accent disabled:opacity-50 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n [disabled]=\"page <= 1\"\n (click)=\"setPage(page - 1)\"\n >\n <pdm-icon name=\"chevron-left\" [size]=\"14\"></pdm-icon>\n Previous\n </button>\n </li>\n <li *ngFor=\"let pageNumber of visiblePages\">\n <ng-container *ngIf=\"pageNumber === 'ellipsis'; else pageButton\">\n <span\n class=\"inline-flex h-9 min-w-9 items-center justify-center px-2 text-sm text-muted-foreground\"\n >...</span\n >\n </ng-container>\n <ng-template #pageButton>\n <button\n type=\"button\"\n [ngClass]=\"[\n 'inline-flex h-9 min-w-9 items-center justify-center rounded-md px-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n pageNumber === page\n ? 'appearance-none border border-border bg-muted text-foreground shadow-sm'\n : 'appearance-none border-0 bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground',\n ]\"\n (click)=\"setPage(+pageNumber)\"\n >\n {{ pageNumber }}\n </button>\n </ng-template>\n </li>\n <li>\n <button\n type=\"button\"\n class=\"inline-flex h-9 appearance-none items-center justify-center gap-1 rounded-md border-0 bg-transparent px-2 text-sm text-foreground hover:bg-accent disabled:opacity-50 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n [disabled]=\"page >= pageCount\"\n (click)=\"setPage(page + 1)\"\n >\n Next\n <pdm-icon name=\"chevron-right\" [size]=\"14\"></pdm-icon>\n </button>\n </li>\n </ul>\n</nav>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }, { kind: "component", type: PdmSelectComponent, selector: "pdm-select", inputs: ["id", "value", "options", "disabled", "invalid", "className", "placeholder"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3436
3424
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmPaginationComponent, decorators: [{
|
|
3437
3425
|
type: Component,
|
|
3438
|
-
args: [{ selector: 'pdm-pagination', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav\n aria-label=\"Pagination\"\n [ngClass]=\"[\n 'mx-auto flex w-full flex-wrap items-center justify-center gap-4',\n className,\n ]\"\n>\n <div class=\"flex items-center gap-3\" *ngIf=\"rowsPerPageOptions.length > 0\">\n <span class=\"text-sm font-medium text-foreground\">{{\n rowsPerPageLabel\n }}</span>\n <pdm-select\n [value]=\"rowsPerPageValue\"\n [options]=\"rowsPerPageSelectOptions\"\n [placeholder]=\"rowsPerPageValue\"\n className=\"w-[120px]\"\n (valueChange)=\"onRowsPerPageChangeValue($event)\"\n ></pdm-select>\n </div>\n\n <ul class=\"m-0 flex list-none items-center gap-1 p-0\">\n <li>\n <button\n type=\"button\"\n class=\"inline-flex h-9 appearance-none items-center justify-center gap-1 rounded-md border-0 bg-transparent px-2 text-sm text-foreground hover:bg-accent disabled:opacity-50 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n [disabled]=\"page <= 1\"\n (click)=\"setPage(page - 1)\"\n >\n <pdm-icon name=\"chevron-left\" [size]=\"14\"></pdm-icon>\n Previous\n </button>\n </li>\n <li *ngFor=\"let pageNumber of visiblePages\">\n <ng-container *ngIf=\"pageNumber === 'ellipsis'; else pageButton\">\n <span\n class=\"inline-flex h-9 min-w-9 items-center justify-center px-2 text-sm text-muted-foreground\"\n >...</span\n >\n </ng-container>\n <ng-template #pageButton>\n <button\n type=\"button\"\n [ngClass]=\"[\n 'inline-flex h-9 min-w-9 items-center justify-center rounded-md px-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n pageNumber === page\n ? 'appearance-none border border-border bg-muted
|
|
3426
|
+
args: [{ selector: 'pdm-pagination', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav\n aria-label=\"Pagination\"\n [ngClass]=\"[\n 'mx-auto flex w-full flex-wrap items-center justify-center gap-4',\n className,\n ]\"\n>\n <div class=\"flex items-center gap-3\" *ngIf=\"rowsPerPageOptions.length > 0\">\n <span class=\"text-sm font-medium text-foreground\">{{\n rowsPerPageLabel\n }}</span>\n <pdm-select\n [value]=\"rowsPerPageValue\"\n [options]=\"rowsPerPageSelectOptions\"\n [placeholder]=\"rowsPerPageValue\"\n className=\"w-[120px]\"\n (valueChange)=\"onRowsPerPageChangeValue($event)\"\n ></pdm-select>\n </div>\n\n <ul class=\"m-0 flex list-none items-center gap-1 p-0\">\n <li>\n <button\n type=\"button\"\n class=\"inline-flex h-9 appearance-none items-center justify-center gap-1 rounded-md border-0 bg-transparent px-2 text-sm text-foreground hover:bg-accent disabled:opacity-50 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n [disabled]=\"page <= 1\"\n (click)=\"setPage(page - 1)\"\n >\n <pdm-icon name=\"chevron-left\" [size]=\"14\"></pdm-icon>\n Previous\n </button>\n </li>\n <li *ngFor=\"let pageNumber of visiblePages\">\n <ng-container *ngIf=\"pageNumber === 'ellipsis'; else pageButton\">\n <span\n class=\"inline-flex h-9 min-w-9 items-center justify-center px-2 text-sm text-muted-foreground\"\n >...</span\n >\n </ng-container>\n <ng-template #pageButton>\n <button\n type=\"button\"\n [ngClass]=\"[\n 'inline-flex h-9 min-w-9 items-center justify-center rounded-md px-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n pageNumber === page\n ? 'appearance-none border border-border bg-muted text-foreground shadow-sm'\n : 'appearance-none border-0 bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground',\n ]\"\n (click)=\"setPage(+pageNumber)\"\n >\n {{ pageNumber }}\n </button>\n </ng-template>\n </li>\n <li>\n <button\n type=\"button\"\n class=\"inline-flex h-9 appearance-none items-center justify-center gap-1 rounded-md border-0 bg-transparent px-2 text-sm text-foreground hover:bg-accent disabled:opacity-50 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n [disabled]=\"page >= pageCount\"\n (click)=\"setPage(page + 1)\"\n >\n Next\n <pdm-icon name=\"chevron-right\" [size]=\"14\"></pdm-icon>\n </button>\n </li>\n </ul>\n</nav>\n" }]
|
|
3439
3427
|
}], propDecorators: { page: [{
|
|
3440
3428
|
type: Input
|
|
3441
3429
|
}], pageCount: [{
|