pdm-ui-kit 0.1.29 → 0.1.30
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/pagination/pagination.component.mjs +36 -11
- package/esm2020/lib/components/select/select.component.mjs +46 -7
- package/fesm2015/pdm-ui-kit.mjs +108 -45
- package/fesm2015/pdm-ui-kit.mjs.map +1 -1
- package/fesm2020/pdm-ui-kit.mjs +107 -45
- package/fesm2020/pdm-ui-kit.mjs.map +1 -1
- package/lib/components/pagination/pagination.component.d.ts +10 -2
- package/lib/components/select/select.component.d.ts +12 -2
- package/package.json +1 -1
|
@@ -2,24 +2,34 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from
|
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
3
|
import * as i1 from "@angular/common";
|
|
4
4
|
import * as i2 from "../icon/icon.component";
|
|
5
|
+
import * as i3 from "../select/select.component";
|
|
5
6
|
export class PdmPaginationComponent {
|
|
6
7
|
constructor() {
|
|
7
8
|
this.page = 1;
|
|
8
9
|
this.pageCount = 1;
|
|
9
|
-
this.maxVisible =
|
|
10
|
+
this.maxVisible = 4;
|
|
10
11
|
this.className = '';
|
|
12
|
+
this.rowsPerPageLabel = 'Rows per page';
|
|
13
|
+
this.rowsPerPage = 10;
|
|
14
|
+
this.rowsPerPageOptions = [10, 20, 30, 50];
|
|
11
15
|
this.pageChange = new EventEmitter();
|
|
16
|
+
this.rowsPerPageChange = new EventEmitter();
|
|
17
|
+
}
|
|
18
|
+
get rowsPerPageSelectOptions() {
|
|
19
|
+
return this.rowsPerPageOptions.map((value) => ({
|
|
20
|
+
label: String(value),
|
|
21
|
+
value: String(value)
|
|
22
|
+
}));
|
|
23
|
+
}
|
|
24
|
+
get rowsPerPageValue() {
|
|
25
|
+
return String(this.rowsPerPage);
|
|
12
26
|
}
|
|
13
27
|
get visiblePages() {
|
|
14
28
|
const total = Math.max(1, this.pageCount);
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
let start = Math.max(1, this.page - half);
|
|
18
|
-
let end = Math.min(total, start + visible - 1);
|
|
19
|
-
if (end - start + 1 < visible) {
|
|
20
|
-
start = Math.max(1, end - visible + 1);
|
|
29
|
+
if (total <= Math.max(1, this.maxVisible)) {
|
|
30
|
+
return Array.from({ length: total }, (_, i) => i + 1);
|
|
21
31
|
}
|
|
22
|
-
return
|
|
32
|
+
return [1, 2, 'ellipsis', total];
|
|
23
33
|
}
|
|
24
34
|
setPage(next) {
|
|
25
35
|
if (next < 1 || next > this.pageCount || next === this.page) {
|
|
@@ -27,12 +37,19 @@ export class PdmPaginationComponent {
|
|
|
27
37
|
}
|
|
28
38
|
this.pageChange.emit(next);
|
|
29
39
|
}
|
|
40
|
+
onRowsPerPageChangeValue(value) {
|
|
41
|
+
const next = Number(value);
|
|
42
|
+
if (!Number.isFinite(next) || next <= 0 || next === this.rowsPerPage) {
|
|
43
|
+
return;
|
|
44
|
+
}
|
|
45
|
+
this.rowsPerPageChange.emit(next);
|
|
46
|
+
}
|
|
30
47
|
}
|
|
31
48
|
PdmPaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
32
|
-
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" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<nav
|
|
49
|
+
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=\"flex items-center gap-1\">\n <li>\n <button\n type=\"button\"\n class=\"inline-flex h-9 items-center justify-center gap-1 rounded-md 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 ? 'border border-border bg-muted text-foreground shadow-sm'\n : '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 items-center justify-center gap-1 rounded-md 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: i2.PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }, { kind: "component", type: i3.PdmSelectComponent, selector: "pdm-select", inputs: ["id", "value", "options", "disabled", "invalid", "className", "placeholder"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
33
50
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmPaginationComponent, decorators: [{
|
|
34
51
|
type: Component,
|
|
35
|
-
args: [{ selector: 'pdm-pagination', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav
|
|
52
|
+
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=\"flex items-center gap-1\">\n <li>\n <button\n type=\"button\"\n class=\"inline-flex h-9 items-center justify-center gap-1 rounded-md 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 ? 'border border-border bg-muted text-foreground shadow-sm'\n : '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 items-center justify-center gap-1 rounded-md 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" }]
|
|
36
53
|
}], propDecorators: { page: [{
|
|
37
54
|
type: Input
|
|
38
55
|
}], pageCount: [{
|
|
@@ -41,7 +58,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
41
58
|
type: Input
|
|
42
59
|
}], className: [{
|
|
43
60
|
type: Input
|
|
61
|
+
}], rowsPerPageLabel: [{
|
|
62
|
+
type: Input
|
|
63
|
+
}], rowsPerPage: [{
|
|
64
|
+
type: Input
|
|
65
|
+
}], rowsPerPageOptions: [{
|
|
66
|
+
type: Input
|
|
44
67
|
}], pageChange: [{
|
|
45
68
|
type: Output
|
|
69
|
+
}], rowsPerPageChange: [{
|
|
70
|
+
type: Output
|
|
46
71
|
}] } });
|
|
47
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
72
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFnaW5hdGlvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9zcmMvbGliL2NvbXBvbmVudHMvcGFnaW5hdGlvbi9wYWdpbmF0aW9uLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9wYWdpbmF0aW9uL3BhZ2luYXRpb24uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQzs7Ozs7QUFRaEcsTUFBTSxPQUFPLHNCQUFzQjtJQUxuQztRQU1XLFNBQUksR0FBRyxDQUFDLENBQUM7UUFDVCxjQUFTLEdBQUcsQ0FBQyxDQUFDO1FBQ2QsZUFBVSxHQUFHLENBQUMsQ0FBQztRQUNmLGNBQVMsR0FBRyxFQUFFLENBQUM7UUFDZixxQkFBZ0IsR0FBRyxlQUFlLENBQUM7UUFDbkMsZ0JBQVcsR0FBRyxFQUFFLENBQUM7UUFDakIsdUJBQWtCLEdBQWEsQ0FBQyxFQUFFLEVBQUUsRUFBRSxFQUFFLEVBQUUsRUFBRSxFQUFFLENBQUMsQ0FBQztRQUUvQyxlQUFVLEdBQUcsSUFBSSxZQUFZLEVBQVUsQ0FBQztRQUN4QyxzQkFBaUIsR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFDO0tBc0MxRDtJQXBDQyxJQUFJLHdCQUF3QjtRQUMxQixPQUFPLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxHQUFHLENBQUMsQ0FBQyxLQUFLLEVBQUUsRUFBRSxDQUFDLENBQUM7WUFDN0MsS0FBSyxFQUFFLE1BQU0sQ0FBQyxLQUFLLENBQUM7WUFDcEIsS0FBSyxFQUFFLE1BQU0sQ0FBQyxLQUFLLENBQUM7U0FDckIsQ0FBQyxDQUFDLENBQUM7SUFDTixDQUFDO0lBRUQsSUFBSSxnQkFBZ0I7UUFDbEIsT0FBTyxNQUFNLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDO0lBQ2xDLENBQUM7SUFFRCxJQUFJLFlBQVk7UUFDZCxNQUFNLEtBQUssR0FBRyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsRUFBRSxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUM7UUFDMUMsSUFBSSxLQUFLLElBQUksSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDLEVBQUUsSUFBSSxDQUFDLFVBQVUsQ0FBQyxFQUFFO1lBQ3pDLE9BQU8sS0FBSyxDQUFDLElBQUksQ0FBQyxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUUsRUFBRSxDQUFDLENBQUMsRUFBRSxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQztTQUN2RDtRQUVELE9BQU8sQ0FBQyxDQUFDLEVBQUUsQ0FBQyxFQUFFLFVBQVUsRUFBRSxLQUFLLENBQUMsQ0FBQztJQUNuQyxDQUFDO0lBRUQsT0FBTyxDQUFDLElBQVk7UUFDbEIsSUFBSSxJQUFJLEdBQUcsQ0FBQyxJQUFJLElBQUksR0FBRyxJQUFJLENBQUMsU0FBUyxJQUFJLElBQUksS0FBSyxJQUFJLENBQUMsSUFBSSxFQUFFO1lBQzNELE9BQU87U0FDUjtRQUVELElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQzdCLENBQUM7SUFFRCx3QkFBd0IsQ0FBQyxLQUFhO1FBQ3BDLE1BQU0sSUFBSSxHQUFHLE1BQU0sQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUMzQixJQUFJLENBQUMsTUFBTSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsSUFBSSxJQUFJLElBQUksQ0FBQyxJQUFJLElBQUksS0FBSyxJQUFJLENBQUMsV0FBVyxFQUFFO1lBQ3BFLE9BQU87U0FDUjtRQUVELElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDcEMsQ0FBQzs7bUhBL0NVLHNCQUFzQjt1R0FBdEIsc0JBQXNCLHFWQ1JuQyx3bEZBbUVBOzJGRDNEYSxzQkFBc0I7a0JBTGxDLFNBQVM7K0JBQ0UsZ0JBQWdCLG1CQUVULHVCQUF1QixDQUFDLE1BQU07OEJBR3RDLElBQUk7c0JBQVosS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFDRyxnQkFBZ0I7c0JBQXhCLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyxrQkFBa0I7c0JBQTFCLEtBQUs7Z0JBRUksVUFBVTtzQkFBbkIsTUFBTTtnQkFDRyxpQkFBaUI7c0JBQTFCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB0eXBlIHsgUGRtTmF0aXZlU2VsZWN0T3B0aW9uIH0gZnJvbSAnLi4vbmF0aXZlLXNlbGVjdC9uYXRpdmUtc2VsZWN0LmNvbXBvbmVudCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3BkbS1wYWdpbmF0aW9uJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3BhZ2luYXRpb24uY29tcG9uZW50Lmh0bWwnLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaFxufSlcbmV4cG9ydCBjbGFzcyBQZG1QYWdpbmF0aW9uQ29tcG9uZW50IHtcbiAgQElucHV0KCkgcGFnZSA9IDE7XG4gIEBJbnB1dCgpIHBhZ2VDb3VudCA9IDE7XG4gIEBJbnB1dCgpIG1heFZpc2libGUgPSA0O1xuICBASW5wdXQoKSBjbGFzc05hbWUgPSAnJztcbiAgQElucHV0KCkgcm93c1BlclBhZ2VMYWJlbCA9ICdSb3dzIHBlciBwYWdlJztcbiAgQElucHV0KCkgcm93c1BlclBhZ2UgPSAxMDtcbiAgQElucHV0KCkgcm93c1BlclBhZ2VPcHRpb25zOiBudW1iZXJbXSA9IFsxMCwgMjAsIDMwLCA1MF07XG5cbiAgQE91dHB1dCgpIHBhZ2VDaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPG51bWJlcj4oKTtcbiAgQE91dHB1dCgpIHJvd3NQZXJQYWdlQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxudW1iZXI+KCk7XG5cbiAgZ2V0IHJvd3NQZXJQYWdlU2VsZWN0T3B0aW9ucygpOiBQZG1OYXRpdmVTZWxlY3RPcHRpb25bXSB7XG4gICAgcmV0dXJuIHRoaXMucm93c1BlclBhZ2VPcHRpb25zLm1hcCgodmFsdWUpID0+ICh7XG4gICAgICBsYWJlbDogU3RyaW5nKHZhbHVlKSxcbiAgICAgIHZhbHVlOiBTdHJpbmcodmFsdWUpXG4gICAgfSkpO1xuICB9XG5cbiAgZ2V0IHJvd3NQZXJQYWdlVmFsdWUoKTogc3RyaW5nIHtcbiAgICByZXR1cm4gU3RyaW5nKHRoaXMucm93c1BlclBhZ2UpO1xuICB9XG5cbiAgZ2V0IHZpc2libGVQYWdlcygpOiBBcnJheTxudW1iZXIgfCAnZWxsaXBzaXMnPiB7XG4gICAgY29uc3QgdG90YWwgPSBNYXRoLm1heCgxLCB0aGlzLnBhZ2VDb3VudCk7XG4gICAgaWYgKHRvdGFsIDw9IE1hdGgubWF4KDEsIHRoaXMubWF4VmlzaWJsZSkpIHtcbiAgICAgIHJldHVybiBBcnJheS5mcm9tKHsgbGVuZ3RoOiB0b3RhbCB9LCAoXywgaSkgPT4gaSArIDEpO1xuICAgIH1cblxuICAgIHJldHVybiBbMSwgMiwgJ2VsbGlwc2lzJywgdG90YWxdO1xuICB9XG5cbiAgc2V0UGFnZShuZXh0OiBudW1iZXIpOiB2b2lkIHtcbiAgICBpZiAobmV4dCA8IDEgfHwgbmV4dCA+IHRoaXMucGFnZUNvdW50IHx8IG5leHQgPT09IHRoaXMucGFnZSkge1xuICAgICAgcmV0dXJuO1xuICAgIH1cblxuICAgIHRoaXMucGFnZUNoYW5nZS5lbWl0KG5leHQpO1xuICB9XG5cbiAgb25Sb3dzUGVyUGFnZUNoYW5nZVZhbHVlKHZhbHVlOiBzdHJpbmcpOiB2b2lkIHtcbiAgICBjb25zdCBuZXh0ID0gTnVtYmVyKHZhbHVlKTtcbiAgICBpZiAoIU51bWJlci5pc0Zpbml0ZShuZXh0KSB8fCBuZXh0IDw9IDAgfHwgbmV4dCA9PT0gdGhpcy5yb3dzUGVyUGFnZSkge1xuICAgICAgcmV0dXJuO1xuICAgIH1cblxuICAgIHRoaXMucm93c1BlclBhZ2VDaGFuZ2UuZW1pdChuZXh0KTtcbiAgfVxufVxuIiwiPG5hdlxuICBhcmlhLWxhYmVsPVwiUGFnaW5hdGlvblwiXG4gIFtuZ0NsYXNzXT1cIltcbiAgICAnbXgtYXV0byBmbGV4IHctZnVsbCBmbGV4LXdyYXAgaXRlbXMtY2VudGVyIGp1c3RpZnktY2VudGVyIGdhcC00JyxcbiAgICBjbGFzc05hbWUsXG4gIF1cIlxuPlxuICA8ZGl2IGNsYXNzPVwiZmxleCBpdGVtcy1jZW50ZXIgZ2FwLTNcIiAqbmdJZj1cInJvd3NQZXJQYWdlT3B0aW9ucy5sZW5ndGggPiAwXCI+XG4gICAgPHNwYW4gY2xhc3M9XCJ0ZXh0LXNtIGZvbnQtbWVkaXVtIHRleHQtZm9yZWdyb3VuZFwiPnt7XG4gICAgICByb3dzUGVyUGFnZUxhYmVsXG4gICAgfX08L3NwYW4+XG4gICAgPHBkbS1zZWxlY3RcbiAgICAgIFt2YWx1ZV09XCJyb3dzUGVyUGFnZVZhbHVlXCJcbiAgICAgIFtvcHRpb25zXT1cInJvd3NQZXJQYWdlU2VsZWN0T3B0aW9uc1wiXG4gICAgICBbcGxhY2Vob2xkZXJdPVwicm93c1BlclBhZ2VWYWx1ZVwiXG4gICAgICBjbGFzc05hbWU9XCJ3LVsxMjBweF1cIlxuICAgICAgKHZhbHVlQ2hhbmdlKT1cIm9uUm93c1BlclBhZ2VDaGFuZ2VWYWx1ZSgkZXZlbnQpXCJcbiAgICA+PC9wZG0tc2VsZWN0PlxuICA8L2Rpdj5cblxuICA8dWwgY2xhc3M9XCJmbGV4IGl0ZW1zLWNlbnRlciBnYXAtMVwiPlxuICAgIDxsaT5cbiAgICAgIDxidXR0b25cbiAgICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICAgIGNsYXNzPVwiaW5saW5lLWZsZXggaC05IGl0ZW1zLWNlbnRlciBqdXN0aWZ5LWNlbnRlciBnYXAtMSByb3VuZGVkLW1kIHB4LTIgdGV4dC1zbSB0ZXh0LWZvcmVncm91bmQgaG92ZXI6YmctYWNjZW50IGRpc2FibGVkOm9wYWNpdHktNTAgcmluZy1vZmZzZXQtYmFja2dyb3VuZCBmb2N1cy12aXNpYmxlOm91dGxpbmUtbm9uZSBmb2N1cy12aXNpYmxlOnJpbmctMiBmb2N1cy12aXNpYmxlOnJpbmctcmluZyBmb2N1cy12aXNpYmxlOnJpbmctb2Zmc2V0LTJcIlxuICAgICAgICBbZGlzYWJsZWRdPVwicGFnZSA8PSAxXCJcbiAgICAgICAgKGNsaWNrKT1cInNldFBhZ2UocGFnZSAtIDEpXCJcbiAgICAgID5cbiAgICAgICAgPHBkbS1pY29uIG5hbWU9XCJjaGV2cm9uLWxlZnRcIiBbc2l6ZV09XCIxNFwiPjwvcGRtLWljb24+XG4gICAgICAgIFByZXZpb3VzXG4gICAgICA8L2J1dHRvbj5cbiAgICA8L2xpPlxuICAgIDxsaSAqbmdGb3I9XCJsZXQgcGFnZU51bWJlciBvZiB2aXNpYmxlUGFnZXNcIj5cbiAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJwYWdlTnVtYmVyID09PSAnZWxsaXBzaXMnOyBlbHNlIHBhZ2VCdXR0b25cIj5cbiAgICAgICAgPHNwYW5cbiAgICAgICAgICBjbGFzcz1cImlubGluZS1mbGV4IGgtOSBtaW4tdy05IGl0ZW1zLWNlbnRlciBqdXN0aWZ5LWNlbnRlciBweC0yIHRleHQtc20gdGV4dC1tdXRlZC1mb3JlZ3JvdW5kXCJcbiAgICAgICAgICA+Li4uPC9zcGFuXG4gICAgICAgID5cbiAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgPG5nLXRlbXBsYXRlICNwYWdlQnV0dG9uPlxuICAgICAgICA8YnV0dG9uXG4gICAgICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICAgICAgW25nQ2xhc3NdPVwiW1xuICAgICAgICAgICAgJ2lubGluZS1mbGV4IGgtOSBtaW4tdy05IGl0ZW1zLWNlbnRlciBqdXN0aWZ5LWNlbnRlciByb3VuZGVkLW1kIHB4LTIgdGV4dC1zbSByaW5nLW9mZnNldC1iYWNrZ3JvdW5kIGZvY3VzLXZpc2libGU6b3V0bGluZS1ub25lIGZvY3VzLXZpc2libGU6cmluZy0yIGZvY3VzLXZpc2libGU6cmluZy1yaW5nIGZvY3VzLXZpc2libGU6cmluZy1vZmZzZXQtMicsXG4gICAgICAgICAgICBwYWdlTnVtYmVyID09PSBwYWdlXG4gICAgICAgICAgICAgID8gJ2JvcmRlciBib3JkZXItYm9yZGVyIGJnLW11dGVkIHRleHQtZm9yZWdyb3VuZCBzaGFkb3ctc20nXG4gICAgICAgICAgICAgIDogJ3RleHQtZm9yZWdyb3VuZCBob3ZlcjpiZy1hY2NlbnQgaG92ZXI6dGV4dC1hY2NlbnQtZm9yZWdyb3VuZCcsXG4gICAgICAgICAgXVwiXG4gICAgICAgICAgKGNsaWNrKT1cInNldFBhZ2UoK3BhZ2VOdW1iZXIpXCJcbiAgICAgICAgPlxuICAgICAgICAgIHt7IHBhZ2VOdW1iZXIgfX1cbiAgICAgICAgPC9idXR0b24+XG4gICAgICA8L25nLXRlbXBsYXRlPlxuICAgIDwvbGk+XG4gICAgPGxpPlxuICAgICAgPGJ1dHRvblxuICAgICAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICAgICAgY2xhc3M9XCJpbmxpbmUtZmxleCBoLTkgaXRlbXMtY2VudGVyIGp1c3RpZnktY2VudGVyIGdhcC0xIHJvdW5kZWQtbWQgcHgtMiB0ZXh0LXNtIHRleHQtZm9yZWdyb3VuZCBob3ZlcjpiZy1hY2NlbnQgZGlzYWJsZWQ6b3BhY2l0eS01MCByaW5nLW9mZnNldC1iYWNrZ3JvdW5kIGZvY3VzLXZpc2libGU6b3V0bGluZS1ub25lIGZvY3VzLXZpc2libGU6cmluZy0yIGZvY3VzLXZpc2libGU6cmluZy1yaW5nIGZvY3VzLXZpc2libGU6cmluZy1vZmZzZXQtMlwiXG4gICAgICAgIFtkaXNhYmxlZF09XCJwYWdlID49IHBhZ2VDb3VudFwiXG4gICAgICAgIChjbGljayk9XCJzZXRQYWdlKHBhZ2UgKyAxKVwiXG4gICAgICA+XG4gICAgICAgIE5leHRcbiAgICAgICAgPHBkbS1pY29uIG5hbWU9XCJjaGV2cm9uLXJpZ2h0XCIgW3NpemVdPVwiMTRcIj48L3BkbS1pY29uPlxuICAgICAgPC9idXR0b24+XG4gICAgPC9saT5cbiAgPC91bD5cbjwvbmF2PlxuIl19
|
|
@@ -1,26 +1,57 @@
|
|
|
1
|
-
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
|
|
1
|
+
import { ChangeDetectionStrategy, Component, EventEmitter, HostListener, Input, Output } from '@angular/core';
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
3
|
import * as i1 from "@angular/common";
|
|
4
|
+
import * as i2 from "../icon/icon.component";
|
|
4
5
|
export class PdmSelectComponent {
|
|
5
|
-
constructor() {
|
|
6
|
+
constructor(elementRef) {
|
|
7
|
+
this.elementRef = elementRef;
|
|
6
8
|
this.id = '';
|
|
7
9
|
this.value = '';
|
|
8
10
|
this.options = [];
|
|
9
11
|
this.disabled = false;
|
|
10
12
|
this.invalid = false;
|
|
11
13
|
this.className = '';
|
|
14
|
+
this.placeholder = 'Select an option';
|
|
15
|
+
this.open = false;
|
|
12
16
|
this.valueChange = new EventEmitter();
|
|
13
17
|
}
|
|
18
|
+
get selectedOption() {
|
|
19
|
+
return this.options.find((option) => option.value === this.value);
|
|
20
|
+
}
|
|
21
|
+
get selectedLabel() {
|
|
22
|
+
return this.selectedOption?.label || this.placeholder;
|
|
23
|
+
}
|
|
24
|
+
toggle() {
|
|
25
|
+
if (this.disabled)
|
|
26
|
+
return;
|
|
27
|
+
this.open = !this.open;
|
|
28
|
+
}
|
|
14
29
|
onChange(event) {
|
|
15
30
|
this.valueChange.emit(event.target.value);
|
|
16
31
|
}
|
|
32
|
+
selectOption(option) {
|
|
33
|
+
if (option.disabled)
|
|
34
|
+
return;
|
|
35
|
+
this.valueChange.emit(option.value);
|
|
36
|
+
this.open = false;
|
|
37
|
+
}
|
|
38
|
+
onDocumentClick(event) {
|
|
39
|
+
if (!this.open)
|
|
40
|
+
return;
|
|
41
|
+
if (!this.elementRef.nativeElement.contains(event.target)) {
|
|
42
|
+
this.open = false;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
onEscape() {
|
|
46
|
+
this.open = false;
|
|
47
|
+
}
|
|
17
48
|
}
|
|
18
|
-
PdmSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
19
|
-
PdmSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmSelectComponent, selector: "pdm-select", inputs: { id: "id", value: "value", options: "options", disabled: "disabled", invalid: "invalid", className: "className" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<
|
|
49
|
+
PdmSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSelectComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
50
|
+
PdmSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmSelectComponent, selector: "pdm-select", inputs: { id: "id", value: "value", options: "options", disabled: "disabled", invalid: "invalid", className: "className", placeholder: "placeholder" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "<div [ngClass]=\"['relative', className || 'w-full']\">\n <button\n type=\"button\"\n [id]=\"id\"\n [disabled]=\"disabled\"\n [attr.aria-invalid]=\"invalid\"\n [attr.aria-expanded]=\"open\"\n [attr.data-state]=\"open ? 'open' : 'closed'\"\n aria-haspopup=\"listbox\"\n (click)=\"toggle()\"\n [ngClass]=\"[\n 'border-input focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 aria-invalid:ring-2 aria-invalid:ring-destructive aria-invalid:border-destructive flex h-9 w-full items-center justify-between rounded-md border bg-background px-3 py-2 text-sm shadow-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',\n ]\"\n >\n <span\n [ngClass]=\"[\n 'min-w-0 flex-1 truncate text-left leading-5',\n selectedOption\n ? 'font-medium text-foreground'\n : 'font-normal text-muted-foreground',\n ]\"\n >\n {{ selectedLabel }}\n </span>\n <pdm-icon\n name=\"chevron-down\"\n [size]=\"16\"\n className=\"shrink-0 text-muted-foreground\"\n ></pdm-icon>\n </button>\n\n <div\n *ngIf=\"open\"\n role=\"listbox\"\n [attr.aria-labelledby]=\"id || null\"\n class=\"absolute left-0 top-[calc(100%+4px)] z-50 max-h-96 w-full overflow-y-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md\"\n >\n <button\n *ngFor=\"let option of options\"\n type=\"button\"\n role=\"option\"\n [attr.aria-selected]=\"option.value === value\"\n [disabled]=\"option.disabled\"\n (click)=\"selectOption(option)\"\n [ngClass]=\"[\n 'flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-left text-sm outline-none transition-colors',\n option.disabled\n ? 'cursor-not-allowed opacity-50'\n : 'hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground',\n option.value === value ? 'bg-accent text-accent-foreground' : '',\n ]\"\n >\n <span class=\"min-w-0 flex-1 truncate leading-5\">{{ option.label }}</span>\n <span\n *ngIf=\"option.value === value\"\n class=\"ml-2 flex shrink-0 items-center justify-end\"\n >\n <pdm-icon\n name=\"check\"\n [size]=\"16\"\n className=\"shrink-0 text-current\"\n ></pdm-icon>\n </span>\n </button>\n </div>\n\n <select\n class=\"sr-only\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n [value]=\"value\"\n (change)=\"onChange($event)\"\n >\n <option\n *ngFor=\"let option of options\"\n [value]=\"option.value\"\n [disabled]=\"option.disabled\"\n >\n {{ option.label }}\n </option>\n </select>\n</div>\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: i2.PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
20
51
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSelectComponent, decorators: [{
|
|
21
52
|
type: Component,
|
|
22
|
-
args: [{ selector: 'pdm-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<
|
|
23
|
-
}], propDecorators: { id: [{
|
|
53
|
+
args: [{ selector: 'pdm-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['relative', className || 'w-full']\">\n <button\n type=\"button\"\n [id]=\"id\"\n [disabled]=\"disabled\"\n [attr.aria-invalid]=\"invalid\"\n [attr.aria-expanded]=\"open\"\n [attr.data-state]=\"open ? 'open' : 'closed'\"\n aria-haspopup=\"listbox\"\n (click)=\"toggle()\"\n [ngClass]=\"[\n 'border-input focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 aria-invalid:ring-2 aria-invalid:ring-destructive aria-invalid:border-destructive flex h-9 w-full items-center justify-between rounded-md border bg-background px-3 py-2 text-sm shadow-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',\n ]\"\n >\n <span\n [ngClass]=\"[\n 'min-w-0 flex-1 truncate text-left leading-5',\n selectedOption\n ? 'font-medium text-foreground'\n : 'font-normal text-muted-foreground',\n ]\"\n >\n {{ selectedLabel }}\n </span>\n <pdm-icon\n name=\"chevron-down\"\n [size]=\"16\"\n className=\"shrink-0 text-muted-foreground\"\n ></pdm-icon>\n </button>\n\n <div\n *ngIf=\"open\"\n role=\"listbox\"\n [attr.aria-labelledby]=\"id || null\"\n class=\"absolute left-0 top-[calc(100%+4px)] z-50 max-h-96 w-full overflow-y-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md\"\n >\n <button\n *ngFor=\"let option of options\"\n type=\"button\"\n role=\"option\"\n [attr.aria-selected]=\"option.value === value\"\n [disabled]=\"option.disabled\"\n (click)=\"selectOption(option)\"\n [ngClass]=\"[\n 'flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-left text-sm outline-none transition-colors',\n option.disabled\n ? 'cursor-not-allowed opacity-50'\n : 'hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground',\n option.value === value ? 'bg-accent text-accent-foreground' : '',\n ]\"\n >\n <span class=\"min-w-0 flex-1 truncate leading-5\">{{ option.label }}</span>\n <span\n *ngIf=\"option.value === value\"\n class=\"ml-2 flex shrink-0 items-center justify-end\"\n >\n <pdm-icon\n name=\"check\"\n [size]=\"16\"\n className=\"shrink-0 text-current\"\n ></pdm-icon>\n </span>\n </button>\n </div>\n\n <select\n class=\"sr-only\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n [value]=\"value\"\n (change)=\"onChange($event)\"\n >\n <option\n *ngFor=\"let option of options\"\n [value]=\"option.value\"\n [disabled]=\"option.disabled\"\n >\n {{ option.label }}\n </option>\n </select>\n</div>\n" }]
|
|
54
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { id: [{
|
|
24
55
|
type: Input
|
|
25
56
|
}], value: [{
|
|
26
57
|
type: Input
|
|
@@ -32,7 +63,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
32
63
|
type: Input
|
|
33
64
|
}], className: [{
|
|
34
65
|
type: Input
|
|
66
|
+
}], placeholder: [{
|
|
67
|
+
type: Input
|
|
35
68
|
}], valueChange: [{
|
|
36
69
|
type: Output
|
|
70
|
+
}], onDocumentClick: [{
|
|
71
|
+
type: HostListener,
|
|
72
|
+
args: ['document:click', ['$event']]
|
|
73
|
+
}], onEscape: [{
|
|
74
|
+
type: HostListener,
|
|
75
|
+
args: ['document:keydown.escape']
|
|
37
76
|
}] } });
|
|
38
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
77
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VsZWN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9zZWxlY3Qvc2VsZWN0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9zZWxlY3Qvc2VsZWN0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQWMsWUFBWSxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7O0FBYTFILE1BQU0sT0FBTyxrQkFBa0I7SUFhN0IsWUFBNkIsVUFBbUM7UUFBbkMsZUFBVSxHQUFWLFVBQVUsQ0FBeUI7UUFadkQsT0FBRSxHQUFHLEVBQUUsQ0FBQztRQUNSLFVBQUssR0FBRyxFQUFFLENBQUM7UUFDWCxZQUFPLEdBQXNCLEVBQUUsQ0FBQztRQUNoQyxhQUFRLEdBQUcsS0FBSyxDQUFDO1FBQ2pCLFlBQU8sR0FBRyxLQUFLLENBQUM7UUFDaEIsY0FBUyxHQUFHLEVBQUUsQ0FBQztRQUNmLGdCQUFXLEdBQUcsa0JBQWtCLENBQUM7UUFFMUMsU0FBSSxHQUFHLEtBQUssQ0FBQztRQUVILGdCQUFXLEdBQUcsSUFBSSxZQUFZLEVBQVUsQ0FBQztJQUVnQixDQUFDO0lBRXBFLElBQUksY0FBYztRQUNoQixPQUFPLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLENBQUMsTUFBTSxFQUFFLEVBQUUsQ0FBQyxNQUFNLENBQUMsS0FBSyxLQUFLLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUNwRSxDQUFDO0lBRUQsSUFBSSxhQUFhO1FBQ2YsT0FBTyxJQUFJLENBQUMsY0FBYyxFQUFFLEtBQUssSUFBSSxJQUFJLENBQUMsV0FBVyxDQUFDO0lBQ3hELENBQUM7SUFFRCxNQUFNO1FBQ0osSUFBSSxJQUFJLENBQUMsUUFBUTtZQUFFLE9BQU87UUFDMUIsSUFBSSxDQUFDLElBQUksR0FBRyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUM7SUFDekIsQ0FBQztJQUVELFFBQVEsQ0FBQyxLQUFZO1FBQ25CLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFFLEtBQUssQ0FBQyxNQUE0QixDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ25FLENBQUM7SUFFRCxZQUFZLENBQUMsTUFBdUI7UUFDbEMsSUFBSSxNQUFNLENBQUMsUUFBUTtZQUFFLE9BQU87UUFDNUIsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ3BDLElBQUksQ0FBQyxJQUFJLEdBQUcsS0FBSyxDQUFDO0lBQ3BCLENBQUM7SUFHRCxlQUFlLENBQUMsS0FBaUI7UUFDL0IsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJO1lBQUUsT0FBTztRQUN2QixJQUFJLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxNQUFjLENBQUMsRUFBRTtZQUNqRSxJQUFJLENBQUMsSUFBSSxHQUFHLEtBQUssQ0FBQztTQUNuQjtJQUNILENBQUM7SUFHRCxRQUFRO1FBQ04sSUFBSSxDQUFDLElBQUksR0FBRyxLQUFLLENBQUM7SUFDcEIsQ0FBQzs7K0dBakRVLGtCQUFrQjttR0FBbEIsa0JBQWtCLGtXQ2IvQiwrc0ZBa0ZBOzJGRHJFYSxrQkFBa0I7a0JBTDlCLFNBQVM7K0JBQ0UsWUFBWSxtQkFFTCx1QkFBdUIsQ0FBQyxNQUFNO2lHQUd0QyxFQUFFO3NCQUFWLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLO2dCQUNHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBSUksV0FBVztzQkFBcEIsTUFBTTtnQkE0QlAsZUFBZTtzQkFEZCxZQUFZO3VCQUFDLGdCQUFnQixFQUFFLENBQUMsUUFBUSxDQUFDO2dCQVMxQyxRQUFRO3NCQURQLFlBQVk7dUJBQUMseUJBQXlCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgRWxlbWVudFJlZiwgRXZlbnRFbWl0dGVyLCBIb3N0TGlzdGVuZXIsIElucHV0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuZXhwb3J0IGludGVyZmFjZSBQZG1TZWxlY3RPcHRpb24ge1xuICBsYWJlbDogc3RyaW5nO1xuICB2YWx1ZTogc3RyaW5nO1xuICBkaXNhYmxlZD86IGJvb2xlYW47XG59XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3BkbS1zZWxlY3QnLFxuICB0ZW1wbGF0ZVVybDogJy4vc2VsZWN0LmNvbXBvbmVudC5odG1sJyxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2hcbn0pXG5leHBvcnQgY2xhc3MgUGRtU2VsZWN0Q29tcG9uZW50IHtcbiAgQElucHV0KCkgaWQgPSAnJztcbiAgQElucHV0KCkgdmFsdWUgPSAnJztcbiAgQElucHV0KCkgb3B0aW9uczogUGRtU2VsZWN0T3B0aW9uW10gPSBbXTtcbiAgQElucHV0KCkgZGlzYWJsZWQgPSBmYWxzZTtcbiAgQElucHV0KCkgaW52YWxpZCA9IGZhbHNlO1xuICBASW5wdXQoKSBjbGFzc05hbWUgPSAnJztcbiAgQElucHV0KCkgcGxhY2Vob2xkZXIgPSAnU2VsZWN0IGFuIG9wdGlvbic7XG5cbiAgb3BlbiA9IGZhbHNlO1xuXG4gIEBPdXRwdXQoKSB2YWx1ZUNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8c3RyaW5nPigpO1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgcmVhZG9ubHkgZWxlbWVudFJlZjogRWxlbWVudFJlZjxIVE1MRWxlbWVudD4pIHt9XG5cbiAgZ2V0IHNlbGVjdGVkT3B0aW9uKCk6IFBkbVNlbGVjdE9wdGlvbiB8IHVuZGVmaW5lZCB7XG4gICAgcmV0dXJuIHRoaXMub3B0aW9ucy5maW5kKChvcHRpb24pID0+IG9wdGlvbi52YWx1ZSA9PT0gdGhpcy52YWx1ZSk7XG4gIH1cblxuICBnZXQgc2VsZWN0ZWRMYWJlbCgpOiBzdHJpbmcge1xuICAgIHJldHVybiB0aGlzLnNlbGVjdGVkT3B0aW9uPy5sYWJlbCB8fCB0aGlzLnBsYWNlaG9sZGVyO1xuICB9XG5cbiAgdG9nZ2xlKCk6IHZvaWQge1xuICAgIGlmICh0aGlzLmRpc2FibGVkKSByZXR1cm47XG4gICAgdGhpcy5vcGVuID0gIXRoaXMub3BlbjtcbiAgfVxuXG4gIG9uQ2hhbmdlKGV2ZW50OiBFdmVudCk6IHZvaWQge1xuICAgIHRoaXMudmFsdWVDaGFuZ2UuZW1pdCgoZXZlbnQudGFyZ2V0IGFzIEhUTUxTZWxlY3RFbGVtZW50KS52YWx1ZSk7XG4gIH1cblxuICBzZWxlY3RPcHRpb24ob3B0aW9uOiBQZG1TZWxlY3RPcHRpb24pOiB2b2lkIHtcbiAgICBpZiAob3B0aW9uLmRpc2FibGVkKSByZXR1cm47XG4gICAgdGhpcy52YWx1ZUNoYW5nZS5lbWl0KG9wdGlvbi52YWx1ZSk7XG4gICAgdGhpcy5vcGVuID0gZmFsc2U7XG4gIH1cblxuICBASG9zdExpc3RlbmVyKCdkb2N1bWVudDpjbGljaycsIFsnJGV2ZW50J10pXG4gIG9uRG9jdW1lbnRDbGljayhldmVudDogTW91c2VFdmVudCk6IHZvaWQge1xuICAgIGlmICghdGhpcy5vcGVuKSByZXR1cm47XG4gICAgaWYgKCF0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudC5jb250YWlucyhldmVudC50YXJnZXQgYXMgTm9kZSkpIHtcbiAgICAgIHRoaXMub3BlbiA9IGZhbHNlO1xuICAgIH1cbiAgfVxuXG4gIEBIb3N0TGlzdGVuZXIoJ2RvY3VtZW50OmtleWRvd24uZXNjYXBlJylcbiAgb25Fc2NhcGUoKTogdm9pZCB7XG4gICAgdGhpcy5vcGVuID0gZmFsc2U7XG4gIH1cbn1cbiIsIjxkaXYgW25nQ2xhc3NdPVwiWydyZWxhdGl2ZScsIGNsYXNzTmFtZSB8fCAndy1mdWxsJ11cIj5cbiAgPGJ1dHRvblxuICAgIHR5cGU9XCJidXR0b25cIlxuICAgIFtpZF09XCJpZFwiXG4gICAgW2Rpc2FibGVkXT1cImRpc2FibGVkXCJcbiAgICBbYXR0ci5hcmlhLWludmFsaWRdPVwiaW52YWxpZFwiXG4gICAgW2F0dHIuYXJpYS1leHBhbmRlZF09XCJvcGVuXCJcbiAgICBbYXR0ci5kYXRhLXN0YXRlXT1cIm9wZW4gPyAnb3BlbicgOiAnY2xvc2VkJ1wiXG4gICAgYXJpYS1oYXNwb3B1cD1cImxpc3Rib3hcIlxuICAgIChjbGljayk9XCJ0b2dnbGUoKVwiXG4gICAgW25nQ2xhc3NdPVwiW1xuICAgICAgJ2JvcmRlci1pbnB1dCBmb2N1cy12aXNpYmxlOmJvcmRlci1yaW5nIGZvY3VzLXZpc2libGU6cmluZy0yIGZvY3VzLXZpc2libGU6cmluZy1yaW5nLzUwIGFyaWEtaW52YWxpZDpyaW5nLTIgYXJpYS1pbnZhbGlkOnJpbmctZGVzdHJ1Y3RpdmUgYXJpYS1pbnZhbGlkOmJvcmRlci1kZXN0cnVjdGl2ZSBmbGV4IGgtOSB3LWZ1bGwgaXRlbXMtY2VudGVyIGp1c3RpZnktYmV0d2VlbiByb3VuZGVkLW1kIGJvcmRlciBiZy1iYWNrZ3JvdW5kIHB4LTMgcHktMiB0ZXh0LXNtIHNoYWRvdy1zbSBvdXRsaW5lLW5vbmUgZGlzYWJsZWQ6Y3Vyc29yLW5vdC1hbGxvd2VkIGRpc2FibGVkOm9wYWNpdHktNTAnLFxuICAgIF1cIlxuICA+XG4gICAgPHNwYW5cbiAgICAgIFtuZ0NsYXNzXT1cIltcbiAgICAgICAgJ21pbi13LTAgZmxleC0xIHRydW5jYXRlIHRleHQtbGVmdCBsZWFkaW5nLTUnLFxuICAgICAgICBzZWxlY3RlZE9wdGlvblxuICAgICAgICAgID8gJ2ZvbnQtbWVkaXVtIHRleHQtZm9yZWdyb3VuZCdcbiAgICAgICAgICA6ICdmb250LW5vcm1hbCB0ZXh0LW11dGVkLWZvcmVncm91bmQnLFxuICAgICAgXVwiXG4gICAgPlxuICAgICAge3sgc2VsZWN0ZWRMYWJlbCB9fVxuICAgIDwvc3Bhbj5cbiAgICA8cGRtLWljb25cbiAgICAgIG5hbWU9XCJjaGV2cm9uLWRvd25cIlxuICAgICAgW3NpemVdPVwiMTZcIlxuICAgICAgY2xhc3NOYW1lPVwic2hyaW5rLTAgdGV4dC1tdXRlZC1mb3JlZ3JvdW5kXCJcbiAgICA+PC9wZG0taWNvbj5cbiAgPC9idXR0b24+XG5cbiAgPGRpdlxuICAgICpuZ0lmPVwib3BlblwiXG4gICAgcm9sZT1cImxpc3Rib3hcIlxuICAgIFthdHRyLmFyaWEtbGFiZWxsZWRieV09XCJpZCB8fCBudWxsXCJcbiAgICBjbGFzcz1cImFic29sdXRlIGxlZnQtMCB0b3AtW2NhbGMoMTAwJSs0cHgpXSB6LTUwIG1heC1oLTk2IHctZnVsbCBvdmVyZmxvdy15LWF1dG8gcm91bmRlZC1tZCBib3JkZXIgYm9yZGVyLWJvcmRlciBiZy1wb3BvdmVyIHAtMSB0ZXh0LXBvcG92ZXItZm9yZWdyb3VuZCBzaGFkb3ctbWRcIlxuICA+XG4gICAgPGJ1dHRvblxuICAgICAgKm5nRm9yPVwibGV0IG9wdGlvbiBvZiBvcHRpb25zXCJcbiAgICAgIHR5cGU9XCJidXR0b25cIlxuICAgICAgcm9sZT1cIm9wdGlvblwiXG4gICAgICBbYXR0ci5hcmlhLXNlbGVjdGVkXT1cIm9wdGlvbi52YWx1ZSA9PT0gdmFsdWVcIlxuICAgICAgW2Rpc2FibGVkXT1cIm9wdGlvbi5kaXNhYmxlZFwiXG4gICAgICAoY2xpY2spPVwic2VsZWN0T3B0aW9uKG9wdGlvbilcIlxuICAgICAgW25nQ2xhc3NdPVwiW1xuICAgICAgICAnZmxleCB3LWZ1bGwgaXRlbXMtY2VudGVyIGp1c3RpZnktYmV0d2VlbiByb3VuZGVkLXNtIHB4LTIgcHktMS41IHRleHQtbGVmdCB0ZXh0LXNtIG91dGxpbmUtbm9uZSB0cmFuc2l0aW9uLWNvbG9ycycsXG4gICAgICAgIG9wdGlvbi5kaXNhYmxlZFxuICAgICAgICAgID8gJ2N1cnNvci1ub3QtYWxsb3dlZCBvcGFjaXR5LTUwJ1xuICAgICAgICAgIDogJ2hvdmVyOmJnLWFjY2VudCBob3Zlcjp0ZXh0LWFjY2VudC1mb3JlZ3JvdW5kIGZvY3VzLXZpc2libGU6YmctYWNjZW50IGZvY3VzLXZpc2libGU6dGV4dC1hY2NlbnQtZm9yZWdyb3VuZCcsXG4gICAgICAgIG9wdGlvbi52YWx1ZSA9PT0gdmFsdWUgPyAnYmctYWNjZW50IHRleHQtYWNjZW50LWZvcmVncm91bmQnIDogJycsXG4gICAgICBdXCJcbiAgICA+XG4gICAgICA8c3BhbiBjbGFzcz1cIm1pbi13LTAgZmxleC0xIHRydW5jYXRlIGxlYWRpbmctNVwiPnt7IG9wdGlvbi5sYWJlbCB9fTwvc3Bhbj5cbiAgICAgIDxzcGFuXG4gICAgICAgICpuZ0lmPVwib3B0aW9uLnZhbHVlID09PSB2YWx1ZVwiXG4gICAgICAgIGNsYXNzPVwibWwtMiBmbGV4IHNocmluay0wIGl0ZW1zLWNlbnRlciBqdXN0aWZ5LWVuZFwiXG4gICAgICA+XG4gICAgICAgIDxwZG0taWNvblxuICAgICAgICAgIG5hbWU9XCJjaGVja1wiXG4gICAgICAgICAgW3NpemVdPVwiMTZcIlxuICAgICAgICAgIGNsYXNzTmFtZT1cInNocmluay0wIHRleHQtY3VycmVudFwiXG4gICAgICAgID48L3BkbS1pY29uPlxuICAgICAgPC9zcGFuPlxuICAgIDwvYnV0dG9uPlxuICA8L2Rpdj5cblxuICA8c2VsZWN0XG4gICAgY2xhc3M9XCJzci1vbmx5XCJcbiAgICB0YWJpbmRleD1cIi0xXCJcbiAgICBhcmlhLWhpZGRlbj1cInRydWVcIlxuICAgIFt2YWx1ZV09XCJ2YWx1ZVwiXG4gICAgKGNoYW5nZSk9XCJvbkNoYW5nZSgkZXZlbnQpXCJcbiAgPlxuICAgIDxvcHRpb25cbiAgICAgICpuZ0Zvcj1cImxldCBvcHRpb24gb2Ygb3B0aW9uc1wiXG4gICAgICBbdmFsdWVdPVwib3B0aW9uLnZhbHVlXCJcbiAgICAgIFtkaXNhYmxlZF09XCJvcHRpb24uZGlzYWJsZWRcIlxuICAgID5cbiAgICAgIHt7IG9wdGlvbi5sYWJlbCB9fVxuICAgIDwvb3B0aW9uPlxuICA8L3NlbGVjdD5cbjwvZGl2PlxuIl19
|
package/fesm2015/pdm-ui-kit.mjs
CHANGED
|
@@ -3124,24 +3124,107 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
3124
3124
|
type: Input
|
|
3125
3125
|
}] } });
|
|
3126
3126
|
|
|
3127
|
+
class PdmSelectComponent {
|
|
3128
|
+
constructor(elementRef) {
|
|
3129
|
+
this.elementRef = elementRef;
|
|
3130
|
+
this.id = '';
|
|
3131
|
+
this.value = '';
|
|
3132
|
+
this.options = [];
|
|
3133
|
+
this.disabled = false;
|
|
3134
|
+
this.invalid = false;
|
|
3135
|
+
this.className = '';
|
|
3136
|
+
this.placeholder = 'Select an option';
|
|
3137
|
+
this.open = false;
|
|
3138
|
+
this.valueChange = new EventEmitter();
|
|
3139
|
+
}
|
|
3140
|
+
get selectedOption() {
|
|
3141
|
+
return this.options.find((option) => option.value === this.value);
|
|
3142
|
+
}
|
|
3143
|
+
get selectedLabel() {
|
|
3144
|
+
var _a;
|
|
3145
|
+
return ((_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.label) || this.placeholder;
|
|
3146
|
+
}
|
|
3147
|
+
toggle() {
|
|
3148
|
+
if (this.disabled)
|
|
3149
|
+
return;
|
|
3150
|
+
this.open = !this.open;
|
|
3151
|
+
}
|
|
3152
|
+
onChange(event) {
|
|
3153
|
+
this.valueChange.emit(event.target.value);
|
|
3154
|
+
}
|
|
3155
|
+
selectOption(option) {
|
|
3156
|
+
if (option.disabled)
|
|
3157
|
+
return;
|
|
3158
|
+
this.valueChange.emit(option.value);
|
|
3159
|
+
this.open = false;
|
|
3160
|
+
}
|
|
3161
|
+
onDocumentClick(event) {
|
|
3162
|
+
if (!this.open)
|
|
3163
|
+
return;
|
|
3164
|
+
if (!this.elementRef.nativeElement.contains(event.target)) {
|
|
3165
|
+
this.open = false;
|
|
3166
|
+
}
|
|
3167
|
+
}
|
|
3168
|
+
onEscape() {
|
|
3169
|
+
this.open = false;
|
|
3170
|
+
}
|
|
3171
|
+
}
|
|
3172
|
+
PdmSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSelectComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
3173
|
+
PdmSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmSelectComponent, selector: "pdm-select", inputs: { id: "id", value: "value", options: "options", disabled: "disabled", invalid: "invalid", className: "className", placeholder: "placeholder" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "<div [ngClass]=\"['relative', className || 'w-full']\">\n <button\n type=\"button\"\n [id]=\"id\"\n [disabled]=\"disabled\"\n [attr.aria-invalid]=\"invalid\"\n [attr.aria-expanded]=\"open\"\n [attr.data-state]=\"open ? 'open' : 'closed'\"\n aria-haspopup=\"listbox\"\n (click)=\"toggle()\"\n [ngClass]=\"[\n 'border-input focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 aria-invalid:ring-2 aria-invalid:ring-destructive aria-invalid:border-destructive flex h-9 w-full items-center justify-between rounded-md border bg-background px-3 py-2 text-sm shadow-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',\n ]\"\n >\n <span\n [ngClass]=\"[\n 'min-w-0 flex-1 truncate text-left leading-5',\n selectedOption\n ? 'font-medium text-foreground'\n : 'font-normal text-muted-foreground',\n ]\"\n >\n {{ selectedLabel }}\n </span>\n <pdm-icon\n name=\"chevron-down\"\n [size]=\"16\"\n className=\"shrink-0 text-muted-foreground\"\n ></pdm-icon>\n </button>\n\n <div\n *ngIf=\"open\"\n role=\"listbox\"\n [attr.aria-labelledby]=\"id || null\"\n class=\"absolute left-0 top-[calc(100%+4px)] z-50 max-h-96 w-full overflow-y-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md\"\n >\n <button\n *ngFor=\"let option of options\"\n type=\"button\"\n role=\"option\"\n [attr.aria-selected]=\"option.value === value\"\n [disabled]=\"option.disabled\"\n (click)=\"selectOption(option)\"\n [ngClass]=\"[\n 'flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-left text-sm outline-none transition-colors',\n option.disabled\n ? 'cursor-not-allowed opacity-50'\n : 'hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground',\n option.value === value ? 'bg-accent text-accent-foreground' : '',\n ]\"\n >\n <span class=\"min-w-0 flex-1 truncate leading-5\">{{ option.label }}</span>\n <span\n *ngIf=\"option.value === value\"\n class=\"ml-2 flex shrink-0 items-center justify-end\"\n >\n <pdm-icon\n name=\"check\"\n [size]=\"16\"\n className=\"shrink-0 text-current\"\n ></pdm-icon>\n </span>\n </button>\n </div>\n\n <select\n class=\"sr-only\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n [value]=\"value\"\n (change)=\"onChange($event)\"\n >\n <option\n *ngFor=\"let option of options\"\n [value]=\"option.value\"\n [disabled]=\"option.disabled\"\n >\n {{ option.label }}\n </option>\n </select>\n</div>\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3174
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSelectComponent, decorators: [{
|
|
3175
|
+
type: Component,
|
|
3176
|
+
args: [{ selector: 'pdm-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['relative', className || 'w-full']\">\n <button\n type=\"button\"\n [id]=\"id\"\n [disabled]=\"disabled\"\n [attr.aria-invalid]=\"invalid\"\n [attr.aria-expanded]=\"open\"\n [attr.data-state]=\"open ? 'open' : 'closed'\"\n aria-haspopup=\"listbox\"\n (click)=\"toggle()\"\n [ngClass]=\"[\n 'border-input focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 aria-invalid:ring-2 aria-invalid:ring-destructive aria-invalid:border-destructive flex h-9 w-full items-center justify-between rounded-md border bg-background px-3 py-2 text-sm shadow-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',\n ]\"\n >\n <span\n [ngClass]=\"[\n 'min-w-0 flex-1 truncate text-left leading-5',\n selectedOption\n ? 'font-medium text-foreground'\n : 'font-normal text-muted-foreground',\n ]\"\n >\n {{ selectedLabel }}\n </span>\n <pdm-icon\n name=\"chevron-down\"\n [size]=\"16\"\n className=\"shrink-0 text-muted-foreground\"\n ></pdm-icon>\n </button>\n\n <div\n *ngIf=\"open\"\n role=\"listbox\"\n [attr.aria-labelledby]=\"id || null\"\n class=\"absolute left-0 top-[calc(100%+4px)] z-50 max-h-96 w-full overflow-y-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md\"\n >\n <button\n *ngFor=\"let option of options\"\n type=\"button\"\n role=\"option\"\n [attr.aria-selected]=\"option.value === value\"\n [disabled]=\"option.disabled\"\n (click)=\"selectOption(option)\"\n [ngClass]=\"[\n 'flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-left text-sm outline-none transition-colors',\n option.disabled\n ? 'cursor-not-allowed opacity-50'\n : 'hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground',\n option.value === value ? 'bg-accent text-accent-foreground' : '',\n ]\"\n >\n <span class=\"min-w-0 flex-1 truncate leading-5\">{{ option.label }}</span>\n <span\n *ngIf=\"option.value === value\"\n class=\"ml-2 flex shrink-0 items-center justify-end\"\n >\n <pdm-icon\n name=\"check\"\n [size]=\"16\"\n className=\"shrink-0 text-current\"\n ></pdm-icon>\n </span>\n </button>\n </div>\n\n <select\n class=\"sr-only\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n [value]=\"value\"\n (change)=\"onChange($event)\"\n >\n <option\n *ngFor=\"let option of options\"\n [value]=\"option.value\"\n [disabled]=\"option.disabled\"\n >\n {{ option.label }}\n </option>\n </select>\n</div>\n" }]
|
|
3177
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { id: [{
|
|
3178
|
+
type: Input
|
|
3179
|
+
}], value: [{
|
|
3180
|
+
type: Input
|
|
3181
|
+
}], options: [{
|
|
3182
|
+
type: Input
|
|
3183
|
+
}], disabled: [{
|
|
3184
|
+
type: Input
|
|
3185
|
+
}], invalid: [{
|
|
3186
|
+
type: Input
|
|
3187
|
+
}], className: [{
|
|
3188
|
+
type: Input
|
|
3189
|
+
}], placeholder: [{
|
|
3190
|
+
type: Input
|
|
3191
|
+
}], valueChange: [{
|
|
3192
|
+
type: Output
|
|
3193
|
+
}], onDocumentClick: [{
|
|
3194
|
+
type: HostListener,
|
|
3195
|
+
args: ['document:click', ['$event']]
|
|
3196
|
+
}], onEscape: [{
|
|
3197
|
+
type: HostListener,
|
|
3198
|
+
args: ['document:keydown.escape']
|
|
3199
|
+
}] } });
|
|
3200
|
+
|
|
3127
3201
|
class PdmPaginationComponent {
|
|
3128
3202
|
constructor() {
|
|
3129
3203
|
this.page = 1;
|
|
3130
3204
|
this.pageCount = 1;
|
|
3131
|
-
this.maxVisible =
|
|
3205
|
+
this.maxVisible = 4;
|
|
3132
3206
|
this.className = '';
|
|
3207
|
+
this.rowsPerPageLabel = 'Rows per page';
|
|
3208
|
+
this.rowsPerPage = 10;
|
|
3209
|
+
this.rowsPerPageOptions = [10, 20, 30, 50];
|
|
3133
3210
|
this.pageChange = new EventEmitter();
|
|
3211
|
+
this.rowsPerPageChange = new EventEmitter();
|
|
3212
|
+
}
|
|
3213
|
+
get rowsPerPageSelectOptions() {
|
|
3214
|
+
return this.rowsPerPageOptions.map((value) => ({
|
|
3215
|
+
label: String(value),
|
|
3216
|
+
value: String(value)
|
|
3217
|
+
}));
|
|
3218
|
+
}
|
|
3219
|
+
get rowsPerPageValue() {
|
|
3220
|
+
return String(this.rowsPerPage);
|
|
3134
3221
|
}
|
|
3135
3222
|
get visiblePages() {
|
|
3136
3223
|
const total = Math.max(1, this.pageCount);
|
|
3137
|
-
|
|
3138
|
-
|
|
3139
|
-
let start = Math.max(1, this.page - half);
|
|
3140
|
-
let end = Math.min(total, start + visible - 1);
|
|
3141
|
-
if (end - start + 1 < visible) {
|
|
3142
|
-
start = Math.max(1, end - visible + 1);
|
|
3224
|
+
if (total <= Math.max(1, this.maxVisible)) {
|
|
3225
|
+
return Array.from({ length: total }, (_, i) => i + 1);
|
|
3143
3226
|
}
|
|
3144
|
-
return
|
|
3227
|
+
return [1, 2, 'ellipsis', total];
|
|
3145
3228
|
}
|
|
3146
3229
|
setPage(next) {
|
|
3147
3230
|
if (next < 1 || next > this.pageCount || next === this.page) {
|
|
@@ -3149,12 +3232,19 @@ class PdmPaginationComponent {
|
|
|
3149
3232
|
}
|
|
3150
3233
|
this.pageChange.emit(next);
|
|
3151
3234
|
}
|
|
3235
|
+
onRowsPerPageChangeValue(value) {
|
|
3236
|
+
const next = Number(value);
|
|
3237
|
+
if (!Number.isFinite(next) || next <= 0 || next === this.rowsPerPage) {
|
|
3238
|
+
return;
|
|
3239
|
+
}
|
|
3240
|
+
this.rowsPerPageChange.emit(next);
|
|
3241
|
+
}
|
|
3152
3242
|
}
|
|
3153
3243
|
PdmPaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3154
|
-
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" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<nav
|
|
3244
|
+
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=\"flex items-center gap-1\">\n <li>\n <button\n type=\"button\"\n class=\"inline-flex h-9 items-center justify-center gap-1 rounded-md 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 ? 'border border-border bg-muted text-foreground shadow-sm'\n : '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 items-center justify-center gap-1 rounded-md 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 });
|
|
3155
3245
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmPaginationComponent, decorators: [{
|
|
3156
3246
|
type: Component,
|
|
3157
|
-
args: [{ selector: 'pdm-pagination', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav
|
|
3247
|
+
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=\"flex items-center gap-1\">\n <li>\n <button\n type=\"button\"\n class=\"inline-flex h-9 items-center justify-center gap-1 rounded-md 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 ? 'border border-border bg-muted text-foreground shadow-sm'\n : '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 items-center justify-center gap-1 rounded-md 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" }]
|
|
3158
3248
|
}], propDecorators: { page: [{
|
|
3159
3249
|
type: Input
|
|
3160
3250
|
}], pageCount: [{
|
|
@@ -3163,8 +3253,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
3163
3253
|
type: Input
|
|
3164
3254
|
}], className: [{
|
|
3165
3255
|
type: Input
|
|
3256
|
+
}], rowsPerPageLabel: [{
|
|
3257
|
+
type: Input
|
|
3258
|
+
}], rowsPerPage: [{
|
|
3259
|
+
type: Input
|
|
3260
|
+
}], rowsPerPageOptions: [{
|
|
3261
|
+
type: Input
|
|
3166
3262
|
}], pageChange: [{
|
|
3167
3263
|
type: Output
|
|
3264
|
+
}], rowsPerPageChange: [{
|
|
3265
|
+
type: Output
|
|
3168
3266
|
}] } });
|
|
3169
3267
|
|
|
3170
3268
|
class PdmPopoverComponent {
|
|
@@ -3304,41 +3402,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
3304
3402
|
type: Input
|
|
3305
3403
|
}] } });
|
|
3306
3404
|
|
|
3307
|
-
class PdmSelectComponent {
|
|
3308
|
-
constructor() {
|
|
3309
|
-
this.id = '';
|
|
3310
|
-
this.value = '';
|
|
3311
|
-
this.options = [];
|
|
3312
|
-
this.disabled = false;
|
|
3313
|
-
this.invalid = false;
|
|
3314
|
-
this.className = '';
|
|
3315
|
-
this.valueChange = new EventEmitter();
|
|
3316
|
-
}
|
|
3317
|
-
onChange(event) {
|
|
3318
|
-
this.valueChange.emit(event.target.value);
|
|
3319
|
-
}
|
|
3320
|
-
}
|
|
3321
|
-
PdmSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3322
|
-
PdmSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmSelectComponent, selector: "pdm-select", inputs: { id: "id", value: "value", options: "options", disabled: "disabled", invalid: "invalid", className: "className" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<select\n [id]=\"id\"\n [value]=\"value\"\n [disabled]=\"disabled\"\n [attr.aria-invalid]=\"invalid\"\n [ngClass]=\"[\n 'border-input focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 aria-invalid:ring-2 aria-invalid:ring-destructive aria-invalid:border-destructive aria-invalid:placeholder:text-destructive/70 flex h-9 w-full rounded-md border bg-transparent px-3 py-2 text-sm text-foreground shadow-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',\n className\n ]\"\n (change)=\"onChange($event)\"\n>\n <option *ngFor=\"let option of options\" [value]=\"option.value\" [disabled]=\"option.disabled\">{{ option.label }}</option>\n</select>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3323
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSelectComponent, decorators: [{
|
|
3324
|
-
type: Component,
|
|
3325
|
-
args: [{ selector: 'pdm-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<select\n [id]=\"id\"\n [value]=\"value\"\n [disabled]=\"disabled\"\n [attr.aria-invalid]=\"invalid\"\n [ngClass]=\"[\n 'border-input focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 aria-invalid:ring-2 aria-invalid:ring-destructive aria-invalid:border-destructive aria-invalid:placeholder:text-destructive/70 flex h-9 w-full rounded-md border bg-transparent px-3 py-2 text-sm text-foreground shadow-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',\n className\n ]\"\n (change)=\"onChange($event)\"\n>\n <option *ngFor=\"let option of options\" [value]=\"option.value\" [disabled]=\"option.disabled\">{{ option.label }}</option>\n</select>\n" }]
|
|
3326
|
-
}], propDecorators: { id: [{
|
|
3327
|
-
type: Input
|
|
3328
|
-
}], value: [{
|
|
3329
|
-
type: Input
|
|
3330
|
-
}], options: [{
|
|
3331
|
-
type: Input
|
|
3332
|
-
}], disabled: [{
|
|
3333
|
-
type: Input
|
|
3334
|
-
}], invalid: [{
|
|
3335
|
-
type: Input
|
|
3336
|
-
}], className: [{
|
|
3337
|
-
type: Input
|
|
3338
|
-
}], valueChange: [{
|
|
3339
|
-
type: Output
|
|
3340
|
-
}] } });
|
|
3341
|
-
|
|
3342
3405
|
class PdmSeparatorComponent {
|
|
3343
3406
|
constructor() {
|
|
3344
3407
|
this.orientation = 'horizontal';
|