pdm-ui-kit 0.1.29 → 0.1.31
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/button-group/button-group.component.mjs +35 -1
- 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 +142 -45
- package/fesm2015/pdm-ui-kit.mjs.map +1 -1
- package/fesm2020/pdm-ui-kit.mjs +141 -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
package/fesm2015/pdm-ui-kit.mjs
CHANGED
|
@@ -306,9 +306,17 @@ class PdmButtonGroupComponent {
|
|
|
306
306
|
'[&>pdm-select:first-child>select]:!rounded-l-md',
|
|
307
307
|
'[&>pdm-select:last-child>select]:!rounded-r-md',
|
|
308
308
|
'[&>pdm-select>select]:shadow-none',
|
|
309
|
+
'[&>pdm-select>div>button]:!rounded-none',
|
|
310
|
+
'[&>pdm-select:first-child>div>button]:!rounded-l-md',
|
|
311
|
+
'[&>pdm-select:last-child>div>button]:!rounded-r-md',
|
|
312
|
+
'[&>pdm-select:not(:first-child)>div>button]:!rounded-l-none',
|
|
313
|
+
'[&>pdm-select:not(:last-child)>div>button]:!rounded-r-none',
|
|
314
|
+
'[&>pdm-select:not(:first-child)>div>button]:!border-l-0',
|
|
315
|
+
'[&>pdm-select>div>button]:shadow-none',
|
|
309
316
|
'[&>pdm-button>button]:!rounded-none',
|
|
310
317
|
'[&>pdm-button:first-child>button]:!rounded-l-md',
|
|
311
318
|
'[&>pdm-button:last-child>button]:!rounded-r-md',
|
|
319
|
+
'[&>pdm-button:not(:first-child)>button]:!border-l-0',
|
|
312
320
|
'[&>pdm-input>div>input]:!rounded-none',
|
|
313
321
|
'[&>pdm-input:first-child>div>input]:!rounded-l-md',
|
|
314
322
|
'[&>pdm-input:last-child>div>input]:!rounded-r-md',
|
|
@@ -326,10 +334,12 @@ class PdmButtonGroupComponent {
|
|
|
326
334
|
'[&>pdm-tooltip>span>pdm-button>button]:!rounded-none',
|
|
327
335
|
'[&>pdm-tooltip:first-child>span>pdm-button>button]:!rounded-l-md',
|
|
328
336
|
'[&>pdm-tooltip:last-child>span>pdm-button>button]:!rounded-r-md',
|
|
337
|
+
'[&>pdm-tooltip:not(:first-child)>span>pdm-button>button]:!border-l-0',
|
|
329
338
|
'[&>pdm-tooltip>span>pdm-button>button]:shadow-none',
|
|
330
339
|
'[&>pdm-tooltip>span>button]:!rounded-none',
|
|
331
340
|
'[&>pdm-tooltip:first-child>span>button]:!rounded-l-md',
|
|
332
341
|
'[&>pdm-tooltip:last-child>span>button]:!rounded-r-md',
|
|
342
|
+
'[&>pdm-tooltip:not(:first-child)>span>button]:!border-l-0',
|
|
333
343
|
'[&>pdm-tooltip>span>button]:shadow-none',
|
|
334
344
|
'[&>pdm-tooltip>span>pdm-input>div>input]:!rounded-none',
|
|
335
345
|
'[&>pdm-tooltip:first-child>span>pdm-input>div>input]:!rounded-l-md',
|
|
@@ -346,6 +356,13 @@ class PdmButtonGroupComponent {
|
|
|
346
356
|
'[&>pdm-tooltip:first-child>span>pdm-select>select]:!rounded-l-md',
|
|
347
357
|
'[&>pdm-tooltip:last-child>span>pdm-select>select]:!rounded-r-md',
|
|
348
358
|
'[&>pdm-tooltip>span>pdm-select>select]:shadow-none',
|
|
359
|
+
'[&>pdm-tooltip>span>pdm-select>div>button]:!rounded-none',
|
|
360
|
+
'[&>pdm-tooltip:first-child>span>pdm-select>div>button]:!rounded-l-md',
|
|
361
|
+
'[&>pdm-tooltip:last-child>span>pdm-select>div>button]:!rounded-r-md',
|
|
362
|
+
'[&>pdm-tooltip:not(:first-child)>span>pdm-select>div>button]:!rounded-l-none',
|
|
363
|
+
'[&>pdm-tooltip:not(:last-child)>span>pdm-select>div>button]:!rounded-r-none',
|
|
364
|
+
'[&>pdm-tooltip:not(:first-child)>span>pdm-select>div>button]:!border-l-0',
|
|
365
|
+
'[&>pdm-tooltip>span>pdm-select>div>button]:shadow-none',
|
|
349
366
|
'[&>pdm-tooltip>span>select]:!rounded-none',
|
|
350
367
|
'[&>pdm-tooltip:first-child>span>select]:!rounded-l-md',
|
|
351
368
|
'[&>pdm-tooltip:last-child>span>select]:!rounded-r-md',
|
|
@@ -374,9 +391,17 @@ class PdmButtonGroupComponent {
|
|
|
374
391
|
'[&>pdm-select:first-child>select]:!rounded-t-md',
|
|
375
392
|
'[&>pdm-select:last-child>select]:!rounded-b-md',
|
|
376
393
|
'[&>pdm-select>select]:shadow-none',
|
|
394
|
+
'[&>pdm-select>div>button]:!rounded-none',
|
|
395
|
+
'[&>pdm-select:first-child>div>button]:!rounded-t-md',
|
|
396
|
+
'[&>pdm-select:last-child>div>button]:!rounded-b-md',
|
|
397
|
+
'[&>pdm-select:not(:first-child)>div>button]:!rounded-t-none',
|
|
398
|
+
'[&>pdm-select:not(:last-child)>div>button]:!rounded-b-none',
|
|
399
|
+
'[&>pdm-select:not(:first-child)>div>button]:!border-t-0',
|
|
400
|
+
'[&>pdm-select>div>button]:shadow-none',
|
|
377
401
|
'[&>pdm-input>div>input]:bg-background',
|
|
378
402
|
'[&>pdm-input>div>input]:shadow-none',
|
|
379
403
|
'[&>pdm-button>button]:shadow-none',
|
|
404
|
+
'[&>pdm-button:not(:first-child)>button]:!border-t-0',
|
|
380
405
|
'[&>pdm-tooltip>span>*]:rounded-none',
|
|
381
406
|
'[&>pdm-tooltip:first-child>span>*]:rounded-t-md',
|
|
382
407
|
'[&>pdm-tooltip:last-child>span>*]:rounded-b-md',
|
|
@@ -384,10 +409,12 @@ class PdmButtonGroupComponent {
|
|
|
384
409
|
'[&>pdm-tooltip>span>pdm-button>button]:!rounded-none',
|
|
385
410
|
'[&>pdm-tooltip:first-child>span>pdm-button>button]:!rounded-t-md',
|
|
386
411
|
'[&>pdm-tooltip:last-child>span>pdm-button>button]:!rounded-b-md',
|
|
412
|
+
'[&>pdm-tooltip:not(:first-child)>span>pdm-button>button]:!border-t-0',
|
|
387
413
|
'[&>pdm-tooltip>span>pdm-button>button]:shadow-none',
|
|
388
414
|
'[&>pdm-tooltip>span>button]:!rounded-none',
|
|
389
415
|
'[&>pdm-tooltip:first-child>span>button]:!rounded-t-md',
|
|
390
416
|
'[&>pdm-tooltip:last-child>span>button]:!rounded-b-md',
|
|
417
|
+
'[&>pdm-tooltip:not(:first-child)>span>button]:!border-t-0',
|
|
391
418
|
'[&>pdm-tooltip>span>button]:shadow-none',
|
|
392
419
|
'[&>pdm-tooltip>span>pdm-input>div>input]:!rounded-none',
|
|
393
420
|
'[&>pdm-tooltip:first-child>span>pdm-input>div>input]:!rounded-t-md',
|
|
@@ -404,6 +431,13 @@ class PdmButtonGroupComponent {
|
|
|
404
431
|
'[&>pdm-tooltip:first-child>span>pdm-select>select]:!rounded-t-md',
|
|
405
432
|
'[&>pdm-tooltip:last-child>span>pdm-select>select]:!rounded-b-md',
|
|
406
433
|
'[&>pdm-tooltip>span>pdm-select>select]:shadow-none',
|
|
434
|
+
'[&>pdm-tooltip>span>pdm-select>div>button]:!rounded-none',
|
|
435
|
+
'[&>pdm-tooltip:first-child>span>pdm-select>div>button]:!rounded-t-md',
|
|
436
|
+
'[&>pdm-tooltip:last-child>span>pdm-select>div>button]:!rounded-b-md',
|
|
437
|
+
'[&>pdm-tooltip:not(:first-child)>span>pdm-select>div>button]:!rounded-t-none',
|
|
438
|
+
'[&>pdm-tooltip:not(:last-child)>span>pdm-select>div>button]:!rounded-b-none',
|
|
439
|
+
'[&>pdm-tooltip:not(:first-child)>span>pdm-select>div>button]:!border-t-0',
|
|
440
|
+
'[&>pdm-tooltip>span>pdm-select>div>button]:shadow-none',
|
|
407
441
|
'[&>pdm-tooltip>span>select]:!rounded-none',
|
|
408
442
|
'[&>pdm-tooltip:first-child>span>select]:!rounded-t-md',
|
|
409
443
|
'[&>pdm-tooltip:last-child>span>select]:!rounded-b-md',
|
|
@@ -3124,24 +3158,107 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
3124
3158
|
type: Input
|
|
3125
3159
|
}] } });
|
|
3126
3160
|
|
|
3161
|
+
class PdmSelectComponent {
|
|
3162
|
+
constructor(elementRef) {
|
|
3163
|
+
this.elementRef = elementRef;
|
|
3164
|
+
this.id = '';
|
|
3165
|
+
this.value = '';
|
|
3166
|
+
this.options = [];
|
|
3167
|
+
this.disabled = false;
|
|
3168
|
+
this.invalid = false;
|
|
3169
|
+
this.className = '';
|
|
3170
|
+
this.placeholder = 'Select an option';
|
|
3171
|
+
this.open = false;
|
|
3172
|
+
this.valueChange = new EventEmitter();
|
|
3173
|
+
}
|
|
3174
|
+
get selectedOption() {
|
|
3175
|
+
return this.options.find((option) => option.value === this.value);
|
|
3176
|
+
}
|
|
3177
|
+
get selectedLabel() {
|
|
3178
|
+
var _a;
|
|
3179
|
+
return ((_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.label) || this.placeholder;
|
|
3180
|
+
}
|
|
3181
|
+
toggle() {
|
|
3182
|
+
if (this.disabled)
|
|
3183
|
+
return;
|
|
3184
|
+
this.open = !this.open;
|
|
3185
|
+
}
|
|
3186
|
+
onChange(event) {
|
|
3187
|
+
this.valueChange.emit(event.target.value);
|
|
3188
|
+
}
|
|
3189
|
+
selectOption(option) {
|
|
3190
|
+
if (option.disabled)
|
|
3191
|
+
return;
|
|
3192
|
+
this.valueChange.emit(option.value);
|
|
3193
|
+
this.open = false;
|
|
3194
|
+
}
|
|
3195
|
+
onDocumentClick(event) {
|
|
3196
|
+
if (!this.open)
|
|
3197
|
+
return;
|
|
3198
|
+
if (!this.elementRef.nativeElement.contains(event.target)) {
|
|
3199
|
+
this.open = false;
|
|
3200
|
+
}
|
|
3201
|
+
}
|
|
3202
|
+
onEscape() {
|
|
3203
|
+
this.open = false;
|
|
3204
|
+
}
|
|
3205
|
+
}
|
|
3206
|
+
PdmSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSelectComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
3207
|
+
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 });
|
|
3208
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSelectComponent, decorators: [{
|
|
3209
|
+
type: Component,
|
|
3210
|
+
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" }]
|
|
3211
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { id: [{
|
|
3212
|
+
type: Input
|
|
3213
|
+
}], value: [{
|
|
3214
|
+
type: Input
|
|
3215
|
+
}], options: [{
|
|
3216
|
+
type: Input
|
|
3217
|
+
}], disabled: [{
|
|
3218
|
+
type: Input
|
|
3219
|
+
}], invalid: [{
|
|
3220
|
+
type: Input
|
|
3221
|
+
}], className: [{
|
|
3222
|
+
type: Input
|
|
3223
|
+
}], placeholder: [{
|
|
3224
|
+
type: Input
|
|
3225
|
+
}], valueChange: [{
|
|
3226
|
+
type: Output
|
|
3227
|
+
}], onDocumentClick: [{
|
|
3228
|
+
type: HostListener,
|
|
3229
|
+
args: ['document:click', ['$event']]
|
|
3230
|
+
}], onEscape: [{
|
|
3231
|
+
type: HostListener,
|
|
3232
|
+
args: ['document:keydown.escape']
|
|
3233
|
+
}] } });
|
|
3234
|
+
|
|
3127
3235
|
class PdmPaginationComponent {
|
|
3128
3236
|
constructor() {
|
|
3129
3237
|
this.page = 1;
|
|
3130
3238
|
this.pageCount = 1;
|
|
3131
|
-
this.maxVisible =
|
|
3239
|
+
this.maxVisible = 4;
|
|
3132
3240
|
this.className = '';
|
|
3241
|
+
this.rowsPerPageLabel = 'Rows per page';
|
|
3242
|
+
this.rowsPerPage = 10;
|
|
3243
|
+
this.rowsPerPageOptions = [10, 20, 30, 50];
|
|
3133
3244
|
this.pageChange = new EventEmitter();
|
|
3245
|
+
this.rowsPerPageChange = new EventEmitter();
|
|
3246
|
+
}
|
|
3247
|
+
get rowsPerPageSelectOptions() {
|
|
3248
|
+
return this.rowsPerPageOptions.map((value) => ({
|
|
3249
|
+
label: String(value),
|
|
3250
|
+
value: String(value)
|
|
3251
|
+
}));
|
|
3252
|
+
}
|
|
3253
|
+
get rowsPerPageValue() {
|
|
3254
|
+
return String(this.rowsPerPage);
|
|
3134
3255
|
}
|
|
3135
3256
|
get visiblePages() {
|
|
3136
3257
|
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);
|
|
3258
|
+
if (total <= Math.max(1, this.maxVisible)) {
|
|
3259
|
+
return Array.from({ length: total }, (_, i) => i + 1);
|
|
3143
3260
|
}
|
|
3144
|
-
return
|
|
3261
|
+
return [1, 2, 'ellipsis', total];
|
|
3145
3262
|
}
|
|
3146
3263
|
setPage(next) {
|
|
3147
3264
|
if (next < 1 || next > this.pageCount || next === this.page) {
|
|
@@ -3149,12 +3266,19 @@ class PdmPaginationComponent {
|
|
|
3149
3266
|
}
|
|
3150
3267
|
this.pageChange.emit(next);
|
|
3151
3268
|
}
|
|
3269
|
+
onRowsPerPageChangeValue(value) {
|
|
3270
|
+
const next = Number(value);
|
|
3271
|
+
if (!Number.isFinite(next) || next <= 0 || next === this.rowsPerPage) {
|
|
3272
|
+
return;
|
|
3273
|
+
}
|
|
3274
|
+
this.rowsPerPageChange.emit(next);
|
|
3275
|
+
}
|
|
3152
3276
|
}
|
|
3153
3277
|
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
|
|
3278
|
+
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
3279
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmPaginationComponent, decorators: [{
|
|
3156
3280
|
type: Component,
|
|
3157
|
-
args: [{ selector: 'pdm-pagination', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav
|
|
3281
|
+
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
3282
|
}], propDecorators: { page: [{
|
|
3159
3283
|
type: Input
|
|
3160
3284
|
}], pageCount: [{
|
|
@@ -3163,8 +3287,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
3163
3287
|
type: Input
|
|
3164
3288
|
}], className: [{
|
|
3165
3289
|
type: Input
|
|
3290
|
+
}], rowsPerPageLabel: [{
|
|
3291
|
+
type: Input
|
|
3292
|
+
}], rowsPerPage: [{
|
|
3293
|
+
type: Input
|
|
3294
|
+
}], rowsPerPageOptions: [{
|
|
3295
|
+
type: Input
|
|
3166
3296
|
}], pageChange: [{
|
|
3167
3297
|
type: Output
|
|
3298
|
+
}], rowsPerPageChange: [{
|
|
3299
|
+
type: Output
|
|
3168
3300
|
}] } });
|
|
3169
3301
|
|
|
3170
3302
|
class PdmPopoverComponent {
|
|
@@ -3304,41 +3436,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
3304
3436
|
type: Input
|
|
3305
3437
|
}] } });
|
|
3306
3438
|
|
|
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
3439
|
class PdmSeparatorComponent {
|
|
3343
3440
|
constructor() {
|
|
3344
3441
|
this.orientation = 'horizontal';
|