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
package/fesm2020/pdm-ui-kit.mjs
CHANGED
|
@@ -3109,24 +3109,106 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
3109
3109
|
type: Input
|
|
3110
3110
|
}] } });
|
|
3111
3111
|
|
|
3112
|
+
class PdmSelectComponent {
|
|
3113
|
+
constructor(elementRef) {
|
|
3114
|
+
this.elementRef = elementRef;
|
|
3115
|
+
this.id = '';
|
|
3116
|
+
this.value = '';
|
|
3117
|
+
this.options = [];
|
|
3118
|
+
this.disabled = false;
|
|
3119
|
+
this.invalid = false;
|
|
3120
|
+
this.className = '';
|
|
3121
|
+
this.placeholder = 'Select an option';
|
|
3122
|
+
this.open = false;
|
|
3123
|
+
this.valueChange = new EventEmitter();
|
|
3124
|
+
}
|
|
3125
|
+
get selectedOption() {
|
|
3126
|
+
return this.options.find((option) => option.value === this.value);
|
|
3127
|
+
}
|
|
3128
|
+
get selectedLabel() {
|
|
3129
|
+
return this.selectedOption?.label || this.placeholder;
|
|
3130
|
+
}
|
|
3131
|
+
toggle() {
|
|
3132
|
+
if (this.disabled)
|
|
3133
|
+
return;
|
|
3134
|
+
this.open = !this.open;
|
|
3135
|
+
}
|
|
3136
|
+
onChange(event) {
|
|
3137
|
+
this.valueChange.emit(event.target.value);
|
|
3138
|
+
}
|
|
3139
|
+
selectOption(option) {
|
|
3140
|
+
if (option.disabled)
|
|
3141
|
+
return;
|
|
3142
|
+
this.valueChange.emit(option.value);
|
|
3143
|
+
this.open = false;
|
|
3144
|
+
}
|
|
3145
|
+
onDocumentClick(event) {
|
|
3146
|
+
if (!this.open)
|
|
3147
|
+
return;
|
|
3148
|
+
if (!this.elementRef.nativeElement.contains(event.target)) {
|
|
3149
|
+
this.open = false;
|
|
3150
|
+
}
|
|
3151
|
+
}
|
|
3152
|
+
onEscape() {
|
|
3153
|
+
this.open = false;
|
|
3154
|
+
}
|
|
3155
|
+
}
|
|
3156
|
+
PdmSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSelectComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
3157
|
+
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 });
|
|
3158
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSelectComponent, decorators: [{
|
|
3159
|
+
type: Component,
|
|
3160
|
+
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" }]
|
|
3161
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { id: [{
|
|
3162
|
+
type: Input
|
|
3163
|
+
}], value: [{
|
|
3164
|
+
type: Input
|
|
3165
|
+
}], options: [{
|
|
3166
|
+
type: Input
|
|
3167
|
+
}], disabled: [{
|
|
3168
|
+
type: Input
|
|
3169
|
+
}], invalid: [{
|
|
3170
|
+
type: Input
|
|
3171
|
+
}], className: [{
|
|
3172
|
+
type: Input
|
|
3173
|
+
}], placeholder: [{
|
|
3174
|
+
type: Input
|
|
3175
|
+
}], valueChange: [{
|
|
3176
|
+
type: Output
|
|
3177
|
+
}], onDocumentClick: [{
|
|
3178
|
+
type: HostListener,
|
|
3179
|
+
args: ['document:click', ['$event']]
|
|
3180
|
+
}], onEscape: [{
|
|
3181
|
+
type: HostListener,
|
|
3182
|
+
args: ['document:keydown.escape']
|
|
3183
|
+
}] } });
|
|
3184
|
+
|
|
3112
3185
|
class PdmPaginationComponent {
|
|
3113
3186
|
constructor() {
|
|
3114
3187
|
this.page = 1;
|
|
3115
3188
|
this.pageCount = 1;
|
|
3116
|
-
this.maxVisible =
|
|
3189
|
+
this.maxVisible = 4;
|
|
3117
3190
|
this.className = '';
|
|
3191
|
+
this.rowsPerPageLabel = 'Rows per page';
|
|
3192
|
+
this.rowsPerPage = 10;
|
|
3193
|
+
this.rowsPerPageOptions = [10, 20, 30, 50];
|
|
3118
3194
|
this.pageChange = new EventEmitter();
|
|
3195
|
+
this.rowsPerPageChange = new EventEmitter();
|
|
3196
|
+
}
|
|
3197
|
+
get rowsPerPageSelectOptions() {
|
|
3198
|
+
return this.rowsPerPageOptions.map((value) => ({
|
|
3199
|
+
label: String(value),
|
|
3200
|
+
value: String(value)
|
|
3201
|
+
}));
|
|
3202
|
+
}
|
|
3203
|
+
get rowsPerPageValue() {
|
|
3204
|
+
return String(this.rowsPerPage);
|
|
3119
3205
|
}
|
|
3120
3206
|
get visiblePages() {
|
|
3121
3207
|
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);
|
|
3208
|
+
if (total <= Math.max(1, this.maxVisible)) {
|
|
3209
|
+
return Array.from({ length: total }, (_, i) => i + 1);
|
|
3128
3210
|
}
|
|
3129
|
-
return
|
|
3211
|
+
return [1, 2, 'ellipsis', total];
|
|
3130
3212
|
}
|
|
3131
3213
|
setPage(next) {
|
|
3132
3214
|
if (next < 1 || next > this.pageCount || next === this.page) {
|
|
@@ -3134,12 +3216,19 @@ class PdmPaginationComponent {
|
|
|
3134
3216
|
}
|
|
3135
3217
|
this.pageChange.emit(next);
|
|
3136
3218
|
}
|
|
3219
|
+
onRowsPerPageChangeValue(value) {
|
|
3220
|
+
const next = Number(value);
|
|
3221
|
+
if (!Number.isFinite(next) || next <= 0 || next === this.rowsPerPage) {
|
|
3222
|
+
return;
|
|
3223
|
+
}
|
|
3224
|
+
this.rowsPerPageChange.emit(next);
|
|
3225
|
+
}
|
|
3137
3226
|
}
|
|
3138
3227
|
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
|
|
3228
|
+
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
3229
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmPaginationComponent, decorators: [{
|
|
3141
3230
|
type: Component,
|
|
3142
|
-
args: [{ selector: 'pdm-pagination', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav
|
|
3231
|
+
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
3232
|
}], propDecorators: { page: [{
|
|
3144
3233
|
type: Input
|
|
3145
3234
|
}], pageCount: [{
|
|
@@ -3148,8 +3237,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
3148
3237
|
type: Input
|
|
3149
3238
|
}], className: [{
|
|
3150
3239
|
type: Input
|
|
3240
|
+
}], rowsPerPageLabel: [{
|
|
3241
|
+
type: Input
|
|
3242
|
+
}], rowsPerPage: [{
|
|
3243
|
+
type: Input
|
|
3244
|
+
}], rowsPerPageOptions: [{
|
|
3245
|
+
type: Input
|
|
3151
3246
|
}], pageChange: [{
|
|
3152
3247
|
type: Output
|
|
3248
|
+
}], rowsPerPageChange: [{
|
|
3249
|
+
type: Output
|
|
3153
3250
|
}] } });
|
|
3154
3251
|
|
|
3155
3252
|
class PdmPopoverComponent {
|
|
@@ -3289,41 +3386,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
3289
3386
|
type: Input
|
|
3290
3387
|
}] } });
|
|
3291
3388
|
|
|
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
3389
|
class PdmSeparatorComponent {
|
|
3328
3390
|
constructor() {
|
|
3329
3391
|
this.orientation = 'horizontal';
|