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/fesm2020/pdm-ui-kit.mjs
CHANGED
|
@@ -2077,8 +2077,8 @@ class PdmDatePickerComponent {
|
|
|
2077
2077
|
get panelClasses() {
|
|
2078
2078
|
return [
|
|
2079
2079
|
this.panelPlacement === 'top'
|
|
2080
|
-
? 'absolute bottom-full left-0 z-
|
|
2081
|
-
: 'absolute left-0 top-full z-
|
|
2080
|
+
? 'absolute bottom-full left-0 z-50 mb-2'
|
|
2081
|
+
: 'absolute left-0 top-full z-50 mt-2',
|
|
2082
2082
|
this.panelClassName
|
|
2083
2083
|
];
|
|
2084
2084
|
}
|
|
@@ -2288,18 +2288,20 @@ class PdmDialogComponent {
|
|
|
2288
2288
|
constructor() {
|
|
2289
2289
|
this.open = false;
|
|
2290
2290
|
this.variant = 'default';
|
|
2291
|
+
this.size = 'desktop';
|
|
2291
2292
|
this.title = 'Edit profile';
|
|
2292
2293
|
this.description = 'Make changes to your profile here. Click save when you\'re done.';
|
|
2293
2294
|
this.closeOnBackdrop = true;
|
|
2294
2295
|
this.closeOnEsc = true;
|
|
2295
2296
|
this.showCloseButton = true;
|
|
2297
|
+
this.showHeader = true;
|
|
2298
|
+
this.showFooter = true;
|
|
2296
2299
|
this.primaryActionText = 'Save changes';
|
|
2297
2300
|
this.secondaryActionText = 'Cancel';
|
|
2298
|
-
this.
|
|
2299
|
-
this.
|
|
2300
|
-
this.
|
|
2301
|
-
this.
|
|
2302
|
-
this.linkValue = 'https://ui.shadcn.com/docs/installation';
|
|
2301
|
+
this.alignFooter = 'right';
|
|
2302
|
+
this.headerClassName = '';
|
|
2303
|
+
this.bodyClassName = '';
|
|
2304
|
+
this.footerClassName = '';
|
|
2303
2305
|
this.className = '';
|
|
2304
2306
|
this.openChange = new EventEmitter();
|
|
2305
2307
|
this.primaryAction = new EventEmitter();
|
|
@@ -2324,16 +2326,54 @@ class PdmDialogComponent {
|
|
|
2324
2326
|
this.close();
|
|
2325
2327
|
}
|
|
2326
2328
|
}
|
|
2329
|
+
get panelClassName() {
|
|
2330
|
+
const base = [
|
|
2331
|
+
'relative z-10 w-full border border-border bg-background text-foreground shadow-lg',
|
|
2332
|
+
this.size === 'desktop' ? 'max-w-[640px] max-h-[calc(100vh-2rem)] rounded-[10px] overflow-visible' : '',
|
|
2333
|
+
this.size === 'mobile' ? 'max-w-[320px] min-h-[240px] rounded-[10px] overflow-visible' : '',
|
|
2334
|
+
this.size === 'mobile-fullscreen'
|
|
2335
|
+
? 'max-w-[320px] h-[min(100dvh,640px)] rounded-none sm:rounded-[10px] overflow-visible'
|
|
2336
|
+
: '',
|
|
2337
|
+
this.className
|
|
2338
|
+
];
|
|
2339
|
+
return base.filter(Boolean).join(' ');
|
|
2340
|
+
}
|
|
2341
|
+
get bodyWrapperClassName() {
|
|
2342
|
+
const base = [
|
|
2343
|
+
'min-h-0 flex-1',
|
|
2344
|
+
this.size === 'mobile-fullscreen' ? 'overflow-y-auto px-4 py-6' : 'px-6 py-6',
|
|
2345
|
+
this.bodyClassName
|
|
2346
|
+
];
|
|
2347
|
+
return base.filter(Boolean).join(' ');
|
|
2348
|
+
}
|
|
2349
|
+
get headerWrapperClassName() {
|
|
2350
|
+
return ['flex items-start justify-between gap-3 p-4', this.headerClassName].filter(Boolean).join(' ');
|
|
2351
|
+
}
|
|
2352
|
+
get footerWrapperClassName() {
|
|
2353
|
+
const effectiveAlign = this.alignFooter === 'right' && this.variant === 'custom-close' ? 'left' : this.alignFooter;
|
|
2354
|
+
const base = [
|
|
2355
|
+
'p-4',
|
|
2356
|
+
effectiveAlign === 'full-width'
|
|
2357
|
+
? 'flex flex-col gap-2'
|
|
2358
|
+
: effectiveAlign === 'left'
|
|
2359
|
+
? 'flex items-center gap-2 justify-start'
|
|
2360
|
+
: 'flex items-center gap-2 justify-end',
|
|
2361
|
+
this.footerClassName
|
|
2362
|
+
];
|
|
2363
|
+
return base.filter(Boolean).join(' ');
|
|
2364
|
+
}
|
|
2327
2365
|
}
|
|
2328
2366
|
PdmDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2329
|
-
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",
|
|
2367
|
+
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 });
|
|
2330
2368
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDialogComponent, decorators: [{
|
|
2331
2369
|
type: Component,
|
|
2332
|
-
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
|
|
2370
|
+
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" }]
|
|
2333
2371
|
}], propDecorators: { open: [{
|
|
2334
2372
|
type: Input
|
|
2335
2373
|
}], variant: [{
|
|
2336
2374
|
type: Input
|
|
2375
|
+
}], size: [{
|
|
2376
|
+
type: Input
|
|
2337
2377
|
}], title: [{
|
|
2338
2378
|
type: Input
|
|
2339
2379
|
}], description: [{
|
|
@@ -2344,19 +2384,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
2344
2384
|
type: Input
|
|
2345
2385
|
}], showCloseButton: [{
|
|
2346
2386
|
type: Input
|
|
2387
|
+
}], showHeader: [{
|
|
2388
|
+
type: Input
|
|
2389
|
+
}], showFooter: [{
|
|
2390
|
+
type: Input
|
|
2347
2391
|
}], primaryActionText: [{
|
|
2348
2392
|
type: Input
|
|
2349
2393
|
}], secondaryActionText: [{
|
|
2350
2394
|
type: Input
|
|
2351
|
-
}],
|
|
2352
|
-
type: Input
|
|
2353
|
-
}], nameValue: [{
|
|
2395
|
+
}], alignFooter: [{
|
|
2354
2396
|
type: Input
|
|
2355
|
-
}],
|
|
2397
|
+
}], headerClassName: [{
|
|
2356
2398
|
type: Input
|
|
2357
|
-
}],
|
|
2399
|
+
}], bodyClassName: [{
|
|
2358
2400
|
type: Input
|
|
2359
|
-
}],
|
|
2401
|
+
}], footerClassName: [{
|
|
2360
2402
|
type: Input
|
|
2361
2403
|
}], className: [{
|
|
2362
2404
|
type: Input
|
|
@@ -3317,46 +3359,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
3317
3359
|
args: ['window:scroll']
|
|
3318
3360
|
}] } });
|
|
3319
3361
|
|
|
3320
|
-
const coerceNumber = (value, fallback) => {
|
|
3321
|
-
const next = Number(value);
|
|
3322
|
-
return Number.isFinite(next) ? next : fallback;
|
|
3323
|
-
};
|
|
3324
3362
|
class PdmPaginationComponent {
|
|
3325
3363
|
constructor() {
|
|
3326
|
-
this.
|
|
3327
|
-
this.
|
|
3328
|
-
this.
|
|
3329
|
-
this._rowsPerPage = 10;
|
|
3364
|
+
this.page = 1;
|
|
3365
|
+
this.pageCount = 1;
|
|
3366
|
+
this.maxVisible = 4;
|
|
3330
3367
|
this.className = '';
|
|
3331
3368
|
this.rowsPerPageLabel = 'Rows per page';
|
|
3369
|
+
this.rowsPerPage = 10;
|
|
3332
3370
|
this.rowsPerPageOptions = [10, 20, 30, 50];
|
|
3333
3371
|
this.pageChange = new EventEmitter();
|
|
3334
3372
|
this.rowsPerPageChange = new EventEmitter();
|
|
3335
3373
|
}
|
|
3336
|
-
get page() {
|
|
3337
|
-
return this._page;
|
|
3338
|
-
}
|
|
3339
|
-
set page(value) {
|
|
3340
|
-
this._page = coerceNumber(value, 1);
|
|
3341
|
-
}
|
|
3342
|
-
get pageCount() {
|
|
3343
|
-
return this._pageCount;
|
|
3344
|
-
}
|
|
3345
|
-
set pageCount(value) {
|
|
3346
|
-
this._pageCount = coerceNumber(value, 1);
|
|
3347
|
-
}
|
|
3348
|
-
get maxVisible() {
|
|
3349
|
-
return this._maxVisible;
|
|
3350
|
-
}
|
|
3351
|
-
set maxVisible(value) {
|
|
3352
|
-
this._maxVisible = coerceNumber(value, 4);
|
|
3353
|
-
}
|
|
3354
|
-
get rowsPerPage() {
|
|
3355
|
-
return this._rowsPerPage;
|
|
3356
|
-
}
|
|
3357
|
-
set rowsPerPage(value) {
|
|
3358
|
-
this._rowsPerPage = coerceNumber(value, 10);
|
|
3359
|
-
}
|
|
3360
3374
|
get rowsPerPageSelectOptions() {
|
|
3361
3375
|
return this.rowsPerPageOptions.map((value) => ({
|
|
3362
3376
|
label: String(value),
|
|
@@ -3368,40 +3382,15 @@ class PdmPaginationComponent {
|
|
|
3368
3382
|
}
|
|
3369
3383
|
get visiblePages() {
|
|
3370
3384
|
const total = Math.max(1, this.pageCount);
|
|
3371
|
-
|
|
3372
|
-
if (total <= maxVisible) {
|
|
3385
|
+
if (total <= Math.max(1, this.maxVisible)) {
|
|
3373
3386
|
return Array.from({ length: total }, (_, i) => i + 1);
|
|
3374
3387
|
}
|
|
3375
|
-
|
|
3376
|
-
const windowSize = Math.max(1, maxVisible - 1);
|
|
3377
|
-
const startThreshold = Math.ceil(windowSize / 2);
|
|
3378
|
-
const endThreshold = total - Math.floor(windowSize / 2);
|
|
3379
|
-
const range = (start, end) => Array.from({ length: end - start + 1 }, (_, i) => start + i);
|
|
3380
|
-
if (current <= startThreshold) {
|
|
3381
|
-
const end = Math.min(windowSize, total - 1);
|
|
3382
|
-
return [...range(1, end), 'ellipsis', total];
|
|
3383
|
-
}
|
|
3384
|
-
if (current >= endThreshold) {
|
|
3385
|
-
const start = Math.max(1, total - windowSize);
|
|
3386
|
-
const pages = range(start, total);
|
|
3387
|
-
if (pages[0] === 1) {
|
|
3388
|
-
return pages;
|
|
3389
|
-
}
|
|
3390
|
-
return [1, 'ellipsis', ...pages];
|
|
3391
|
-
}
|
|
3392
|
-
let start = current - Math.floor(windowSize / 2);
|
|
3393
|
-
let end = start + windowSize - 1;
|
|
3394
|
-
if (end >= total) {
|
|
3395
|
-
end = total - 1;
|
|
3396
|
-
start = end - windowSize + 1;
|
|
3397
|
-
}
|
|
3398
|
-
return [...range(start, end), 'ellipsis', total];
|
|
3388
|
+
return [1, 2, 'ellipsis', total];
|
|
3399
3389
|
}
|
|
3400
3390
|
setPage(next) {
|
|
3401
3391
|
if (next < 1 || next > this.pageCount || next === this.page) {
|
|
3402
3392
|
return;
|
|
3403
3393
|
}
|
|
3404
|
-
this._page = next;
|
|
3405
3394
|
this.pageChange.emit(next);
|
|
3406
3395
|
}
|
|
3407
3396
|
onRowsPerPageChangeValue(value) {
|
|
@@ -3409,15 +3398,14 @@ class PdmPaginationComponent {
|
|
|
3409
3398
|
if (!Number.isFinite(next) || next <= 0 || next === this.rowsPerPage) {
|
|
3410
3399
|
return;
|
|
3411
3400
|
}
|
|
3412
|
-
this._rowsPerPage = next;
|
|
3413
3401
|
this.rowsPerPageChange.emit(next);
|
|
3414
3402
|
}
|
|
3415
3403
|
}
|
|
3416
3404
|
PdmPaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3417
|
-
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
|
|
3405
|
+
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 });
|
|
3418
3406
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmPaginationComponent, decorators: [{
|
|
3419
3407
|
type: Component,
|
|
3420
|
-
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
|
|
3408
|
+
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" }]
|
|
3421
3409
|
}], propDecorators: { page: [{
|
|
3422
3410
|
type: Input
|
|
3423
3411
|
}], pageCount: [{
|