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/fesm2020/pdm-ui-kit.mjs
CHANGED
|
@@ -304,9 +304,17 @@ class PdmButtonGroupComponent {
|
|
|
304
304
|
'[&>pdm-select:first-child>select]:!rounded-l-md',
|
|
305
305
|
'[&>pdm-select:last-child>select]:!rounded-r-md',
|
|
306
306
|
'[&>pdm-select>select]:shadow-none',
|
|
307
|
+
'[&>pdm-select>div>button]:!rounded-none',
|
|
308
|
+
'[&>pdm-select:first-child>div>button]:!rounded-l-md',
|
|
309
|
+
'[&>pdm-select:last-child>div>button]:!rounded-r-md',
|
|
310
|
+
'[&>pdm-select:not(:first-child)>div>button]:!rounded-l-none',
|
|
311
|
+
'[&>pdm-select:not(:last-child)>div>button]:!rounded-r-none',
|
|
312
|
+
'[&>pdm-select:not(:first-child)>div>button]:!border-l-0',
|
|
313
|
+
'[&>pdm-select>div>button]:shadow-none',
|
|
307
314
|
'[&>pdm-button>button]:!rounded-none',
|
|
308
315
|
'[&>pdm-button:first-child>button]:!rounded-l-md',
|
|
309
316
|
'[&>pdm-button:last-child>button]:!rounded-r-md',
|
|
317
|
+
'[&>pdm-button:not(:first-child)>button]:!border-l-0',
|
|
310
318
|
'[&>pdm-input>div>input]:!rounded-none',
|
|
311
319
|
'[&>pdm-input:first-child>div>input]:!rounded-l-md',
|
|
312
320
|
'[&>pdm-input:last-child>div>input]:!rounded-r-md',
|
|
@@ -324,10 +332,12 @@ class PdmButtonGroupComponent {
|
|
|
324
332
|
'[&>pdm-tooltip>span>pdm-button>button]:!rounded-none',
|
|
325
333
|
'[&>pdm-tooltip:first-child>span>pdm-button>button]:!rounded-l-md',
|
|
326
334
|
'[&>pdm-tooltip:last-child>span>pdm-button>button]:!rounded-r-md',
|
|
335
|
+
'[&>pdm-tooltip:not(:first-child)>span>pdm-button>button]:!border-l-0',
|
|
327
336
|
'[&>pdm-tooltip>span>pdm-button>button]:shadow-none',
|
|
328
337
|
'[&>pdm-tooltip>span>button]:!rounded-none',
|
|
329
338
|
'[&>pdm-tooltip:first-child>span>button]:!rounded-l-md',
|
|
330
339
|
'[&>pdm-tooltip:last-child>span>button]:!rounded-r-md',
|
|
340
|
+
'[&>pdm-tooltip:not(:first-child)>span>button]:!border-l-0',
|
|
331
341
|
'[&>pdm-tooltip>span>button]:shadow-none',
|
|
332
342
|
'[&>pdm-tooltip>span>pdm-input>div>input]:!rounded-none',
|
|
333
343
|
'[&>pdm-tooltip:first-child>span>pdm-input>div>input]:!rounded-l-md',
|
|
@@ -344,6 +354,13 @@ class PdmButtonGroupComponent {
|
|
|
344
354
|
'[&>pdm-tooltip:first-child>span>pdm-select>select]:!rounded-l-md',
|
|
345
355
|
'[&>pdm-tooltip:last-child>span>pdm-select>select]:!rounded-r-md',
|
|
346
356
|
'[&>pdm-tooltip>span>pdm-select>select]:shadow-none',
|
|
357
|
+
'[&>pdm-tooltip>span>pdm-select>div>button]:!rounded-none',
|
|
358
|
+
'[&>pdm-tooltip:first-child>span>pdm-select>div>button]:!rounded-l-md',
|
|
359
|
+
'[&>pdm-tooltip:last-child>span>pdm-select>div>button]:!rounded-r-md',
|
|
360
|
+
'[&>pdm-tooltip:not(:first-child)>span>pdm-select>div>button]:!rounded-l-none',
|
|
361
|
+
'[&>pdm-tooltip:not(:last-child)>span>pdm-select>div>button]:!rounded-r-none',
|
|
362
|
+
'[&>pdm-tooltip:not(:first-child)>span>pdm-select>div>button]:!border-l-0',
|
|
363
|
+
'[&>pdm-tooltip>span>pdm-select>div>button]:shadow-none',
|
|
347
364
|
'[&>pdm-tooltip>span>select]:!rounded-none',
|
|
348
365
|
'[&>pdm-tooltip:first-child>span>select]:!rounded-l-md',
|
|
349
366
|
'[&>pdm-tooltip:last-child>span>select]:!rounded-r-md',
|
|
@@ -372,9 +389,17 @@ class PdmButtonGroupComponent {
|
|
|
372
389
|
'[&>pdm-select:first-child>select]:!rounded-t-md',
|
|
373
390
|
'[&>pdm-select:last-child>select]:!rounded-b-md',
|
|
374
391
|
'[&>pdm-select>select]:shadow-none',
|
|
392
|
+
'[&>pdm-select>div>button]:!rounded-none',
|
|
393
|
+
'[&>pdm-select:first-child>div>button]:!rounded-t-md',
|
|
394
|
+
'[&>pdm-select:last-child>div>button]:!rounded-b-md',
|
|
395
|
+
'[&>pdm-select:not(:first-child)>div>button]:!rounded-t-none',
|
|
396
|
+
'[&>pdm-select:not(:last-child)>div>button]:!rounded-b-none',
|
|
397
|
+
'[&>pdm-select:not(:first-child)>div>button]:!border-t-0',
|
|
398
|
+
'[&>pdm-select>div>button]:shadow-none',
|
|
375
399
|
'[&>pdm-input>div>input]:bg-background',
|
|
376
400
|
'[&>pdm-input>div>input]:shadow-none',
|
|
377
401
|
'[&>pdm-button>button]:shadow-none',
|
|
402
|
+
'[&>pdm-button:not(:first-child)>button]:!border-t-0',
|
|
378
403
|
'[&>pdm-tooltip>span>*]:rounded-none',
|
|
379
404
|
'[&>pdm-tooltip:first-child>span>*]:rounded-t-md',
|
|
380
405
|
'[&>pdm-tooltip:last-child>span>*]:rounded-b-md',
|
|
@@ -382,10 +407,12 @@ class PdmButtonGroupComponent {
|
|
|
382
407
|
'[&>pdm-tooltip>span>pdm-button>button]:!rounded-none',
|
|
383
408
|
'[&>pdm-tooltip:first-child>span>pdm-button>button]:!rounded-t-md',
|
|
384
409
|
'[&>pdm-tooltip:last-child>span>pdm-button>button]:!rounded-b-md',
|
|
410
|
+
'[&>pdm-tooltip:not(:first-child)>span>pdm-button>button]:!border-t-0',
|
|
385
411
|
'[&>pdm-tooltip>span>pdm-button>button]:shadow-none',
|
|
386
412
|
'[&>pdm-tooltip>span>button]:!rounded-none',
|
|
387
413
|
'[&>pdm-tooltip:first-child>span>button]:!rounded-t-md',
|
|
388
414
|
'[&>pdm-tooltip:last-child>span>button]:!rounded-b-md',
|
|
415
|
+
'[&>pdm-tooltip:not(:first-child)>span>button]:!border-t-0',
|
|
389
416
|
'[&>pdm-tooltip>span>button]:shadow-none',
|
|
390
417
|
'[&>pdm-tooltip>span>pdm-input>div>input]:!rounded-none',
|
|
391
418
|
'[&>pdm-tooltip:first-child>span>pdm-input>div>input]:!rounded-t-md',
|
|
@@ -402,6 +429,13 @@ class PdmButtonGroupComponent {
|
|
|
402
429
|
'[&>pdm-tooltip:first-child>span>pdm-select>select]:!rounded-t-md',
|
|
403
430
|
'[&>pdm-tooltip:last-child>span>pdm-select>select]:!rounded-b-md',
|
|
404
431
|
'[&>pdm-tooltip>span>pdm-select>select]:shadow-none',
|
|
432
|
+
'[&>pdm-tooltip>span>pdm-select>div>button]:!rounded-none',
|
|
433
|
+
'[&>pdm-tooltip:first-child>span>pdm-select>div>button]:!rounded-t-md',
|
|
434
|
+
'[&>pdm-tooltip:last-child>span>pdm-select>div>button]:!rounded-b-md',
|
|
435
|
+
'[&>pdm-tooltip:not(:first-child)>span>pdm-select>div>button]:!rounded-t-none',
|
|
436
|
+
'[&>pdm-tooltip:not(:last-child)>span>pdm-select>div>button]:!rounded-b-none',
|
|
437
|
+
'[&>pdm-tooltip:not(:first-child)>span>pdm-select>div>button]:!border-t-0',
|
|
438
|
+
'[&>pdm-tooltip>span>pdm-select>div>button]:shadow-none',
|
|
405
439
|
'[&>pdm-tooltip>span>select]:!rounded-none',
|
|
406
440
|
'[&>pdm-tooltip:first-child>span>select]:!rounded-t-md',
|
|
407
441
|
'[&>pdm-tooltip:last-child>span>select]:!rounded-b-md',
|
|
@@ -3109,24 +3143,106 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
3109
3143
|
type: Input
|
|
3110
3144
|
}] } });
|
|
3111
3145
|
|
|
3146
|
+
class PdmSelectComponent {
|
|
3147
|
+
constructor(elementRef) {
|
|
3148
|
+
this.elementRef = elementRef;
|
|
3149
|
+
this.id = '';
|
|
3150
|
+
this.value = '';
|
|
3151
|
+
this.options = [];
|
|
3152
|
+
this.disabled = false;
|
|
3153
|
+
this.invalid = false;
|
|
3154
|
+
this.className = '';
|
|
3155
|
+
this.placeholder = 'Select an option';
|
|
3156
|
+
this.open = false;
|
|
3157
|
+
this.valueChange = new EventEmitter();
|
|
3158
|
+
}
|
|
3159
|
+
get selectedOption() {
|
|
3160
|
+
return this.options.find((option) => option.value === this.value);
|
|
3161
|
+
}
|
|
3162
|
+
get selectedLabel() {
|
|
3163
|
+
return this.selectedOption?.label || this.placeholder;
|
|
3164
|
+
}
|
|
3165
|
+
toggle() {
|
|
3166
|
+
if (this.disabled)
|
|
3167
|
+
return;
|
|
3168
|
+
this.open = !this.open;
|
|
3169
|
+
}
|
|
3170
|
+
onChange(event) {
|
|
3171
|
+
this.valueChange.emit(event.target.value);
|
|
3172
|
+
}
|
|
3173
|
+
selectOption(option) {
|
|
3174
|
+
if (option.disabled)
|
|
3175
|
+
return;
|
|
3176
|
+
this.valueChange.emit(option.value);
|
|
3177
|
+
this.open = false;
|
|
3178
|
+
}
|
|
3179
|
+
onDocumentClick(event) {
|
|
3180
|
+
if (!this.open)
|
|
3181
|
+
return;
|
|
3182
|
+
if (!this.elementRef.nativeElement.contains(event.target)) {
|
|
3183
|
+
this.open = false;
|
|
3184
|
+
}
|
|
3185
|
+
}
|
|
3186
|
+
onEscape() {
|
|
3187
|
+
this.open = false;
|
|
3188
|
+
}
|
|
3189
|
+
}
|
|
3190
|
+
PdmSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSelectComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
3191
|
+
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 });
|
|
3192
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSelectComponent, decorators: [{
|
|
3193
|
+
type: Component,
|
|
3194
|
+
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" }]
|
|
3195
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { id: [{
|
|
3196
|
+
type: Input
|
|
3197
|
+
}], value: [{
|
|
3198
|
+
type: Input
|
|
3199
|
+
}], options: [{
|
|
3200
|
+
type: Input
|
|
3201
|
+
}], disabled: [{
|
|
3202
|
+
type: Input
|
|
3203
|
+
}], invalid: [{
|
|
3204
|
+
type: Input
|
|
3205
|
+
}], className: [{
|
|
3206
|
+
type: Input
|
|
3207
|
+
}], placeholder: [{
|
|
3208
|
+
type: Input
|
|
3209
|
+
}], valueChange: [{
|
|
3210
|
+
type: Output
|
|
3211
|
+
}], onDocumentClick: [{
|
|
3212
|
+
type: HostListener,
|
|
3213
|
+
args: ['document:click', ['$event']]
|
|
3214
|
+
}], onEscape: [{
|
|
3215
|
+
type: HostListener,
|
|
3216
|
+
args: ['document:keydown.escape']
|
|
3217
|
+
}] } });
|
|
3218
|
+
|
|
3112
3219
|
class PdmPaginationComponent {
|
|
3113
3220
|
constructor() {
|
|
3114
3221
|
this.page = 1;
|
|
3115
3222
|
this.pageCount = 1;
|
|
3116
|
-
this.maxVisible =
|
|
3223
|
+
this.maxVisible = 4;
|
|
3117
3224
|
this.className = '';
|
|
3225
|
+
this.rowsPerPageLabel = 'Rows per page';
|
|
3226
|
+
this.rowsPerPage = 10;
|
|
3227
|
+
this.rowsPerPageOptions = [10, 20, 30, 50];
|
|
3118
3228
|
this.pageChange = new EventEmitter();
|
|
3229
|
+
this.rowsPerPageChange = new EventEmitter();
|
|
3230
|
+
}
|
|
3231
|
+
get rowsPerPageSelectOptions() {
|
|
3232
|
+
return this.rowsPerPageOptions.map((value) => ({
|
|
3233
|
+
label: String(value),
|
|
3234
|
+
value: String(value)
|
|
3235
|
+
}));
|
|
3236
|
+
}
|
|
3237
|
+
get rowsPerPageValue() {
|
|
3238
|
+
return String(this.rowsPerPage);
|
|
3119
3239
|
}
|
|
3120
3240
|
get visiblePages() {
|
|
3121
3241
|
const total = Math.max(1, this.pageCount);
|
|
3122
|
-
|
|
3123
|
-
|
|
3124
|
-
let start = Math.max(1, this.page - half);
|
|
3125
|
-
let end = Math.min(total, start + visible - 1);
|
|
3126
|
-
if (end - start + 1 < visible) {
|
|
3127
|
-
start = Math.max(1, end - visible + 1);
|
|
3242
|
+
if (total <= Math.max(1, this.maxVisible)) {
|
|
3243
|
+
return Array.from({ length: total }, (_, i) => i + 1);
|
|
3128
3244
|
}
|
|
3129
|
-
return
|
|
3245
|
+
return [1, 2, 'ellipsis', total];
|
|
3130
3246
|
}
|
|
3131
3247
|
setPage(next) {
|
|
3132
3248
|
if (next < 1 || next > this.pageCount || next === this.page) {
|
|
@@ -3134,12 +3250,19 @@ class PdmPaginationComponent {
|
|
|
3134
3250
|
}
|
|
3135
3251
|
this.pageChange.emit(next);
|
|
3136
3252
|
}
|
|
3253
|
+
onRowsPerPageChangeValue(value) {
|
|
3254
|
+
const next = Number(value);
|
|
3255
|
+
if (!Number.isFinite(next) || next <= 0 || next === this.rowsPerPage) {
|
|
3256
|
+
return;
|
|
3257
|
+
}
|
|
3258
|
+
this.rowsPerPageChange.emit(next);
|
|
3259
|
+
}
|
|
3137
3260
|
}
|
|
3138
3261
|
PdmPaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3139
|
-
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
|
|
3262
|
+
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 });
|
|
3140
3263
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmPaginationComponent, decorators: [{
|
|
3141
3264
|
type: Component,
|
|
3142
|
-
args: [{ selector: 'pdm-pagination', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav
|
|
3265
|
+
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" }]
|
|
3143
3266
|
}], propDecorators: { page: [{
|
|
3144
3267
|
type: Input
|
|
3145
3268
|
}], pageCount: [{
|
|
@@ -3148,8 +3271,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
3148
3271
|
type: Input
|
|
3149
3272
|
}], className: [{
|
|
3150
3273
|
type: Input
|
|
3274
|
+
}], rowsPerPageLabel: [{
|
|
3275
|
+
type: Input
|
|
3276
|
+
}], rowsPerPage: [{
|
|
3277
|
+
type: Input
|
|
3278
|
+
}], rowsPerPageOptions: [{
|
|
3279
|
+
type: Input
|
|
3151
3280
|
}], pageChange: [{
|
|
3152
3281
|
type: Output
|
|
3282
|
+
}], rowsPerPageChange: [{
|
|
3283
|
+
type: Output
|
|
3153
3284
|
}] } });
|
|
3154
3285
|
|
|
3155
3286
|
class PdmPopoverComponent {
|
|
@@ -3289,41 +3420,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
3289
3420
|
type: Input
|
|
3290
3421
|
}] } });
|
|
3291
3422
|
|
|
3292
|
-
class PdmSelectComponent {
|
|
3293
|
-
constructor() {
|
|
3294
|
-
this.id = '';
|
|
3295
|
-
this.value = '';
|
|
3296
|
-
this.options = [];
|
|
3297
|
-
this.disabled = false;
|
|
3298
|
-
this.invalid = false;
|
|
3299
|
-
this.className = '';
|
|
3300
|
-
this.valueChange = new EventEmitter();
|
|
3301
|
-
}
|
|
3302
|
-
onChange(event) {
|
|
3303
|
-
this.valueChange.emit(event.target.value);
|
|
3304
|
-
}
|
|
3305
|
-
}
|
|
3306
|
-
PdmSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3307
|
-
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 });
|
|
3308
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSelectComponent, decorators: [{
|
|
3309
|
-
type: Component,
|
|
3310
|
-
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" }]
|
|
3311
|
-
}], propDecorators: { id: [{
|
|
3312
|
-
type: Input
|
|
3313
|
-
}], value: [{
|
|
3314
|
-
type: Input
|
|
3315
|
-
}], options: [{
|
|
3316
|
-
type: Input
|
|
3317
|
-
}], disabled: [{
|
|
3318
|
-
type: Input
|
|
3319
|
-
}], invalid: [{
|
|
3320
|
-
type: Input
|
|
3321
|
-
}], className: [{
|
|
3322
|
-
type: Input
|
|
3323
|
-
}], valueChange: [{
|
|
3324
|
-
type: Output
|
|
3325
|
-
}] } });
|
|
3326
|
-
|
|
3327
3423
|
class PdmSeparatorComponent {
|
|
3328
3424
|
constructor() {
|
|
3329
3425
|
this.orientation = 'horizontal';
|