pdm-ui-kit 1.5.0 → 1.6.1
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/input/input.component.mjs +10 -3
- package/esm2020/select/select.component.mjs +63 -11
- package/esm2020/src/input/input.component.mjs +10 -3
- package/esm2020/src/select/select.component.mjs +63 -11
- package/fesm2015/pdm-ui-kit-src-input.mjs +8 -2
- package/fesm2015/pdm-ui-kit-src-input.mjs.map +1 -1
- package/fesm2015/pdm-ui-kit-src-select.mjs +62 -10
- package/fesm2015/pdm-ui-kit-src-select.mjs.map +1 -1
- package/fesm2015/pdm-ui-kit.mjs +70 -12
- package/fesm2015/pdm-ui-kit.mjs.map +1 -1
- package/fesm2020/pdm-ui-kit-src-input.mjs +8 -2
- package/fesm2020/pdm-ui-kit-src-input.mjs.map +1 -1
- package/fesm2020/pdm-ui-kit-src-select.mjs +62 -10
- package/fesm2020/pdm-ui-kit-src-select.mjs.map +1 -1
- package/fesm2020/pdm-ui-kit.mjs +70 -12
- package/fesm2020/pdm-ui-kit.mjs.map +1 -1
- package/input/input.component.d.ts +4 -1
- package/package.json +1 -1
- package/select/select.component.d.ts +12 -3
- package/src/input/input.component.d.ts +4 -1
- package/src/select/select.component.d.ts +12 -3
|
@@ -71,7 +71,6 @@ class PdmSelectComponent {
|
|
|
71
71
|
this.viewContainerRef = viewContainerRef;
|
|
72
72
|
this.id = "";
|
|
73
73
|
this.value = "";
|
|
74
|
-
this.options = [];
|
|
75
74
|
this.disabled = false;
|
|
76
75
|
this.invalid = false;
|
|
77
76
|
this.className = "";
|
|
@@ -80,12 +79,34 @@ class PdmSelectComponent {
|
|
|
80
79
|
this.valueChange = new EventEmitter();
|
|
81
80
|
this.overlayRef = null;
|
|
82
81
|
this.backdropSub = null;
|
|
82
|
+
this.projectedOptionsSub = null;
|
|
83
|
+
this.inputOptions = [];
|
|
84
|
+
this.projectedOptionCache = new WeakMap();
|
|
85
|
+
this.cachedProjectedOptions = [];
|
|
86
|
+
}
|
|
87
|
+
set options(value) {
|
|
88
|
+
this.inputOptions = value !== null && value !== void 0 ? value : [];
|
|
89
|
+
this.cdr.markForCheck();
|
|
90
|
+
}
|
|
91
|
+
get options() {
|
|
92
|
+
return this.inputOptions;
|
|
83
93
|
}
|
|
84
94
|
ngAfterContentInit() {
|
|
95
|
+
this.syncProjectedOptions();
|
|
85
96
|
// Re-render when projected options change (e.g. *ngFor on pdm-select-option).
|
|
86
|
-
this.projectedOptions.changes.subscribe(() =>
|
|
97
|
+
this.projectedOptionsSub = this.projectedOptions.changes.subscribe(() => {
|
|
98
|
+
this.syncProjectedOptions();
|
|
99
|
+
this.cdr.markForCheck();
|
|
100
|
+
});
|
|
101
|
+
}
|
|
102
|
+
ngDoCheck() {
|
|
103
|
+
this.syncProjectedOptions();
|
|
87
104
|
}
|
|
88
105
|
ngOnDestroy() {
|
|
106
|
+
if (this.projectedOptionsSub) {
|
|
107
|
+
this.projectedOptionsSub.unsubscribe();
|
|
108
|
+
this.projectedOptionsSub = null;
|
|
109
|
+
}
|
|
89
110
|
this.destroyOverlay();
|
|
90
111
|
}
|
|
91
112
|
/**
|
|
@@ -95,13 +116,9 @@ class PdmSelectComponent {
|
|
|
95
116
|
*/
|
|
96
117
|
get resolvedOptions() {
|
|
97
118
|
if (this.projectedOptions && this.projectedOptions.length > 0) {
|
|
98
|
-
return this.
|
|
99
|
-
label: d.resolvedLabel,
|
|
100
|
-
value: d.value,
|
|
101
|
-
disabled: d.disabled,
|
|
102
|
-
}));
|
|
119
|
+
return this.cachedProjectedOptions;
|
|
103
120
|
}
|
|
104
|
-
return this.
|
|
121
|
+
return this.inputOptions;
|
|
105
122
|
}
|
|
106
123
|
get selectedOption() {
|
|
107
124
|
return this.resolvedOptions.find((option) => option.value === this.value);
|
|
@@ -129,11 +146,46 @@ class PdmSelectComponent {
|
|
|
129
146
|
this.valueChange.emit(option.value);
|
|
130
147
|
this.closePanel();
|
|
131
148
|
}
|
|
149
|
+
trackByOptionValue(index, option) {
|
|
150
|
+
return this.optionKey(option, index);
|
|
151
|
+
}
|
|
132
152
|
onEscape() {
|
|
133
153
|
if (this.open) {
|
|
134
154
|
this.closePanel();
|
|
135
155
|
}
|
|
136
156
|
}
|
|
157
|
+
syncProjectedOptions() {
|
|
158
|
+
if (!this.projectedOptions || this.projectedOptions.length === 0) {
|
|
159
|
+
if (this.cachedProjectedOptions.length > 0) {
|
|
160
|
+
this.cachedProjectedOptions.length = 0;
|
|
161
|
+
}
|
|
162
|
+
return;
|
|
163
|
+
}
|
|
164
|
+
let index = 0;
|
|
165
|
+
this.projectedOptions.forEach((directive) => {
|
|
166
|
+
let option = this.projectedOptionCache.get(directive);
|
|
167
|
+
if (!option) {
|
|
168
|
+
option = {
|
|
169
|
+
label: directive.resolvedLabel,
|
|
170
|
+
value: directive.value,
|
|
171
|
+
disabled: directive.disabled,
|
|
172
|
+
};
|
|
173
|
+
this.projectedOptionCache.set(directive, option);
|
|
174
|
+
}
|
|
175
|
+
option.label = directive.resolvedLabel;
|
|
176
|
+
option.value = directive.value;
|
|
177
|
+
option.disabled = directive.disabled;
|
|
178
|
+
this.cachedProjectedOptions[index] = option;
|
|
179
|
+
index += 1;
|
|
180
|
+
});
|
|
181
|
+
if (this.cachedProjectedOptions.length !== index) {
|
|
182
|
+
this.cachedProjectedOptions.length = index;
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
optionKey(option, index) {
|
|
186
|
+
const value = option === null || option === void 0 ? void 0 : option.value;
|
|
187
|
+
return value == null ? `index:${index}` : `value:${String(value)}`;
|
|
188
|
+
}
|
|
137
189
|
openPanel() {
|
|
138
190
|
var _a;
|
|
139
191
|
if (this.overlayRef)
|
|
@@ -179,10 +231,10 @@ class PdmSelectComponent {
|
|
|
179
231
|
}
|
|
180
232
|
}
|
|
181
233
|
PdmSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSelectComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
182
|
-
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", overlayOptions: "overlayOptions" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, queries: [{ propertyName: "projectedOptions", predicate: PdmSelectOptionDirective }], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true }, { propertyName: "panelTemplateRef", first: true, predicate: ["panelTemplate"], descendants: true }], ngImport: i0, template: "<div [ngClass]=\"['relative', className || 'w-full']\">\n <button\n #triggerEl\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 appearance-none box-border items-center justify-between rounded-md border border-solid 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 <!-- Hidden native select kept for screen-reader / form fallback -->\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 resolvedOptions\"\n [value]=\"option.value\"\n [disabled]=\"option.disabled\"\n >\n {{ option.label }}\n </option>\n </select>\n\n <!-- Slot for content-projected pdm-select-option elements (hidden from layout) -->\n <span class=\"hidden\">\n <ng-content select=\"pdm-select-option\"></ng-content>\n </span>\n</div>\n\n<ng-template #panelTemplate>\n <div\n role=\"listbox\"\n [attr.aria-labelledby]=\"id || null\"\n class=\"w-full overflow-y-auto rounded-md border border-solid border-border bg-popover p-1 text-popover-foreground shadow-md max-h-96\"\n >\n <button\n *ngFor=\"let option of resolvedOptions\"\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 appearance-none box-border items-center justify-between rounded-sm border-0 bg-transparent 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 ? 'text-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</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
234
|
+
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", overlayOptions: "overlayOptions" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, queries: [{ propertyName: "projectedOptions", predicate: PdmSelectOptionDirective }], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true }, { propertyName: "panelTemplateRef", first: true, predicate: ["panelTemplate"], descendants: true }], ngImport: i0, template: "<div [ngClass]=\"['relative', className || 'w-full']\">\n <button\n #triggerEl\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 appearance-none box-border items-center justify-between rounded-md border border-solid 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 <!-- Hidden native select kept for screen-reader / form fallback -->\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 resolvedOptions; trackBy: trackByOptionValue\"\n [value]=\"option.value\"\n [disabled]=\"option.disabled\"\n >\n {{ option.label }}\n </option>\n </select>\n\n <!-- Slot for content-projected pdm-select-option elements (hidden from layout) -->\n <span class=\"hidden\">\n <ng-content select=\"pdm-select-option\"></ng-content>\n </span>\n</div>\n\n<ng-template #panelTemplate>\n <div\n role=\"listbox\"\n [attr.aria-labelledby]=\"id || null\"\n class=\"w-full overflow-y-auto rounded-md border border-solid border-border bg-popover p-1 text-popover-foreground shadow-md max-h-96\"\n >\n <button\n *ngFor=\"let option of resolvedOptions; trackBy: trackByOptionValue\"\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 appearance-none box-border items-center justify-between rounded-sm border-0 bg-transparent 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 ? 'text-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</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
183
235
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSelectComponent, decorators: [{
|
|
184
236
|
type: Component,
|
|
185
|
-
args: [{ selector: "pdm-select", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['relative', className || 'w-full']\">\n <button\n #triggerEl\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 appearance-none box-border items-center justify-between rounded-md border border-solid 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 <!-- Hidden native select kept for screen-reader / form fallback -->\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 resolvedOptions\"\n [value]=\"option.value\"\n [disabled]=\"option.disabled\"\n >\n {{ option.label }}\n </option>\n </select>\n\n <!-- Slot for content-projected pdm-select-option elements (hidden from layout) -->\n <span class=\"hidden\">\n <ng-content select=\"pdm-select-option\"></ng-content>\n </span>\n</div>\n\n<ng-template #panelTemplate>\n <div\n role=\"listbox\"\n [attr.aria-labelledby]=\"id || null\"\n class=\"w-full overflow-y-auto rounded-md border border-solid border-border bg-popover p-1 text-popover-foreground shadow-md max-h-96\"\n >\n <button\n *ngFor=\"let option of resolvedOptions\"\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 appearance-none box-border items-center justify-between rounded-sm border-0 bg-transparent 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 ? 'text-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</ng-template>\n", styles: [":host{display:block}\n"] }]
|
|
237
|
+
args: [{ selector: "pdm-select", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['relative', className || 'w-full']\">\n <button\n #triggerEl\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 appearance-none box-border items-center justify-between rounded-md border border-solid 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 <!-- Hidden native select kept for screen-reader / form fallback -->\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 resolvedOptions; trackBy: trackByOptionValue\"\n [value]=\"option.value\"\n [disabled]=\"option.disabled\"\n >\n {{ option.label }}\n </option>\n </select>\n\n <!-- Slot for content-projected pdm-select-option elements (hidden from layout) -->\n <span class=\"hidden\">\n <ng-content select=\"pdm-select-option\"></ng-content>\n </span>\n</div>\n\n<ng-template #panelTemplate>\n <div\n role=\"listbox\"\n [attr.aria-labelledby]=\"id || null\"\n class=\"w-full overflow-y-auto rounded-md border border-solid border-border bg-popover p-1 text-popover-foreground shadow-md max-h-96\"\n >\n <button\n *ngFor=\"let option of resolvedOptions; trackBy: trackByOptionValue\"\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 appearance-none box-border items-center justify-between rounded-sm border-0 bg-transparent 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 ? 'text-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</ng-template>\n", styles: [":host{display:block}\n"] }]
|
|
186
238
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.Overlay }, { type: i0.ViewContainerRef }]; }, propDecorators: { id: [{
|
|
187
239
|
type: Input
|
|
188
240
|
}], value: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pdm-ui-kit-src-select.mjs","sources":["../../../src/select/select-option.directive.ts","../../../src/select/select.component.ts","../../../src/select/select.component.html","../../../src/select/select.module.ts","../../../src/select/pdm-ui-kit-src-select.ts"],"sourcesContent":["import {\n AfterContentInit,\n Directive,\n ElementRef,\n Input\n} from '@angular/core';\n\n/**\n * Directive used to declare an option inside `<pdm-select>` via content projection.\n *\n * Usage:\n * ```html\n * <pdm-select [(value)]=\"val\">\n * <pdm-select-option value=\"a\">Option A</pdm-select-option>\n * <pdm-select-option value=\"b\" [disabled]=\"true\">Option B</pdm-select-option>\n * <pdm-select-option value=\"c\" label=\"Option C\"></pdm-select-option>\n * </pdm-select>\n * ```\n *\n * When `label` is not provided, the text content of the projected node is used.\n */\n@Directive({\n selector: 'pdm-select-option'\n})\nexport class PdmSelectOptionDirective implements AfterContentInit {\n /** The option value that will be emitted on selection. */\n @Input() value = '';\n\n /** When true, the option is rendered but cannot be selected. */\n @Input() disabled = false;\n\n /**\n * Explicit label for the option.\n * When omitted, the directive reads the element's `textContent` after content init.\n */\n @Input() label = '';\n\n constructor(private readonly el: ElementRef<HTMLElement>) {}\n\n ngAfterContentInit(): void {\n // If no explicit label, harvest text from the projected node.\n if (!this.label) {\n this.label = (this.el.nativeElement.textContent ?? '').trim();\n }\n }\n\n /** Resolved label string — always non-empty after ngAfterContentInit. */\n get resolvedLabel(): string {\n return this.label || this.value;\n }\n}\n","import {\n\tAfterContentInit,\n\tChangeDetectionStrategy,\n\tChangeDetectorRef,\n\tComponent,\n\tContentChildren,\n\tElementRef,\n\tEventEmitter,\n\tHostListener,\n\tInput,\n\tOnDestroy,\n\tOutput,\n\tQueryList,\n\tViewChild,\n\tViewContainerRef,\n} from \"@angular/core\";\nimport { Overlay, OverlayRef } from \"@angular/cdk/overlay\";\nimport { TemplatePortal } from \"@angular/cdk/portal\";\nimport { Subscription } from \"rxjs\";\nimport { PdmSelectOptionDirective } from \"./select-option.directive\";\nimport { PdmOverlayOptions } from \"pdm-ui-kit/src/overlay\";\nimport { createFlexiblePositionStrategy } from \"pdm-ui-kit/src/overlay\";\nimport { Z_INDEX } from \"pdm-ui-kit/src/utils\";\n\nexport interface PdmSelectOption {\n\tlabel: string;\n\tvalue: string;\n\tdisabled?: boolean;\n}\n\n@Component({\n\tselector: \"pdm-select\",\n\ttemplateUrl: \"./select.component.html\",\n\tstyles: [\":host { display: block; }\"],\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PdmSelectComponent implements AfterContentInit, OnDestroy {\n\t@Input() id = \"\";\n\t@Input() value = \"\";\n\t@Input() options: PdmSelectOption[] = [];\n\t@Input() disabled = false;\n\t@Input() invalid = false;\n\t@Input() className = \"\";\n\t@Input() placeholder = \"Select an option\";\n\t/**\n\t * Optional CDK OverlayConfig overrides.\n\t * Shallow-merged on top of component defaults — consumer always wins.\n\t * Providing `positionStrategy` or `scrollStrategy` replaces the component default entirely.\n\t */\n\t@Input() overlayOptions?: PdmOverlayOptions;\n\n\topen = false;\n\n\t@Output() valueChange = new EventEmitter<string>();\n\n\t@ViewChild(\"triggerEl\") private triggerRef?: ElementRef<HTMLElement>;\n\t@ViewChild(\"panelTemplate\") private panelTemplateRef!: any;\n\n\t/** Collects any `<pdm-select-option>` children projected into this component. */\n\t@ContentChildren(PdmSelectOptionDirective)\n\tprivate projectedOptions!: QueryList<PdmSelectOptionDirective>;\n\n\tprivate overlayRef: OverlayRef | null = null;\n\tprivate backdropSub: Subscription | null = null;\n\n\tconstructor(\n\t\tprivate readonly cdr: ChangeDetectorRef,\n\t\tprivate readonly overlay: Overlay,\n\t\tprivate readonly viewContainerRef: ViewContainerRef,\n\t) {}\n\n\tngAfterContentInit(): void {\n\t\t// Re-render when projected options change (e.g. *ngFor on pdm-select-option).\n\t\tthis.projectedOptions.changes.subscribe(() => this.cdr.markForCheck());\n\t}\n\n\tngOnDestroy(): void {\n\t\tthis.destroyOverlay();\n\t}\n\n\t/**\n\t * Returns the effective list of options.\n\t * Projected `<pdm-select-option>` children take priority over the `[options]` input.\n\t * Falls back to `[options]` when no children are projected.\n\t */\n\tget resolvedOptions(): PdmSelectOption[] {\n\t\tif (this.projectedOptions && this.projectedOptions.length > 0) {\n\t\t\treturn this.projectedOptions.map((d) => ({\n\t\t\t\tlabel: d.resolvedLabel,\n\t\t\t\tvalue: d.value,\n\t\t\t\tdisabled: d.disabled,\n\t\t\t}));\n\t\t}\n\t\treturn this.options;\n\t}\n\n\tget selectedOption(): PdmSelectOption | undefined {\n\t\treturn this.resolvedOptions.find((option) => option.value === this.value);\n\t}\n\n\tget selectedLabel(): string {\n\t\treturn this.selectedOption?.label || this.placeholder;\n\t}\n\n\ttoggle(): void {\n\t\tif (this.disabled) return;\n\t\tif (this.open) {\n\t\t\tthis.closePanel();\n\t\t} else {\n\t\t\tthis.openPanel();\n\t\t}\n\t}\n\n\tonChange(event: Event): void {\n\t\tthis.valueChange.emit((event.target as HTMLSelectElement).value);\n\t}\n\n\tselectOption(option: PdmSelectOption): void {\n\t\tif (option.disabled) return;\n\t\tthis.valueChange.emit(option.value);\n\t\tthis.closePanel();\n\t}\n\n\t@HostListener(\"document:keydown.escape\")\n\tonEscape(): void {\n\t\tif (this.open) {\n\t\t\tthis.closePanel();\n\t\t}\n\t}\n\n\tprivate openPanel(): void {\n\t\tif (this.overlayRef) return;\n\n\t\tconst triggerEl = this.triggerRef?.nativeElement;\n\t\tif (!triggerEl) return;\n\n\t\tthis.open = true;\n\t\tthis.cdr.markForCheck();\n\n\t\tconst positionStrategy = createFlexiblePositionStrategy(\n\t\t\tthis.overlay,\n\t\t\ttriggerEl,\n\t\t\t4,\n\t\t);\n\n\t\tthis.overlayRef = this.overlay.create({\n\t\t\t// CRÍTICO: z-[70] para aparecer SOBRE modals (z-[60])\n\t\t\t// panelClass se aplica al cdk-overlay-pane wrapper\n\t\t\tpanelClass: [Z_INDEX.popover],\n\t\t\tpositionStrategy,\n\t\t\tscrollStrategy: this.overlay.scrollStrategies.reposition(),\n\t\t\twidth: triggerEl.offsetWidth,\n\t\t\t// Consumer overrides are spread last — they win over every default above.\n\t\t\t...this.overlayOptions,\n\t\t});\n\n\t\tconst portal = new TemplatePortal(\n\t\t\tthis.panelTemplateRef,\n\t\t\tthis.viewContainerRef,\n\t\t);\n\t\tthis.overlayRef.attach(portal);\n\n\t\tthis.backdropSub = this.overlayRef\n\t\t\t.outsidePointerEvents()\n\t\t\t.subscribe((event) => {\n\t\t\t\tconst target = event.target as Node;\n\t\t\t\tif (!triggerEl.contains(target)) {\n\t\t\t\t\tthis.closePanel();\n\t\t\t\t}\n\t\t\t});\n\n\t\tthis.cdr.markForCheck();\n\t}\n\n\tprivate closePanel(): void {\n\t\tif (!this.overlayRef) return;\n\n\t\tthis.open = false;\n\t\tthis.destroyOverlay();\n\t\tthis.cdr.markForCheck();\n\t}\n\n\tprivate destroyOverlay(): void {\n\t\tif (this.backdropSub) {\n\t\t\tthis.backdropSub.unsubscribe();\n\t\t\tthis.backdropSub = null;\n\t\t}\n\t\tif (this.overlayRef) {\n\t\t\tthis.overlayRef.dispose();\n\t\t\tthis.overlayRef = null;\n\t\t}\n\t}\n}\n","<div [ngClass]=\"['relative', className || 'w-full']\">\n <button\n #triggerEl\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 appearance-none box-border items-center justify-between rounded-md border border-solid 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 <!-- Hidden native select kept for screen-reader / form fallback -->\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 resolvedOptions\"\n [value]=\"option.value\"\n [disabled]=\"option.disabled\"\n >\n {{ option.label }}\n </option>\n </select>\n\n <!-- Slot for content-projected pdm-select-option elements (hidden from layout) -->\n <span class=\"hidden\">\n <ng-content select=\"pdm-select-option\"></ng-content>\n </span>\n</div>\n\n<ng-template #panelTemplate>\n <div\n role=\"listbox\"\n [attr.aria-labelledby]=\"id || null\"\n class=\"w-full overflow-y-auto rounded-md border border-solid border-border bg-popover p-1 text-popover-foreground shadow-md max-h-96\"\n >\n <button\n *ngFor=\"let option of resolvedOptions\"\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 appearance-none box-border items-center justify-between rounded-sm border-0 bg-transparent 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 ? 'text-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</ng-template>\n","import { CommonModule } from \"@angular/common\";\nimport { NgModule } from \"@angular/core\";\nimport { OverlayModule } from \"@angular/cdk/overlay\";\nimport { PdmIconModule } from \"pdm-ui-kit/src/icon\";\nimport { PdmSelectComponent } from \"./select.component\";\nimport { PdmSelectOptionDirective } from \"./select-option.directive\";\n\nconst COMPONENTS = [PdmSelectComponent, PdmSelectOptionDirective];\n\n@NgModule({\n\timports: [CommonModule, OverlayModule, PdmIconModule],\n\tdeclarations: COMPONENTS,\n\texports: COMPONENTS,\n})\nexport class PdmSelectModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"pdm-ui-kit-src-select.mjs","sources":["../../../src/select/select-option.directive.ts","../../../src/select/select.component.ts","../../../src/select/select.component.html","../../../src/select/select.module.ts","../../../src/select/pdm-ui-kit-src-select.ts"],"sourcesContent":["import {\n AfterContentInit,\n Directive,\n ElementRef,\n Input\n} from '@angular/core';\n\n/**\n * Directive used to declare an option inside `<pdm-select>` via content projection.\n *\n * Usage:\n * ```html\n * <pdm-select [(value)]=\"val\">\n * <pdm-select-option value=\"a\">Option A</pdm-select-option>\n * <pdm-select-option value=\"b\" [disabled]=\"true\">Option B</pdm-select-option>\n * <pdm-select-option value=\"c\" label=\"Option C\"></pdm-select-option>\n * </pdm-select>\n * ```\n *\n * When `label` is not provided, the text content of the projected node is used.\n */\n@Directive({\n selector: 'pdm-select-option'\n})\nexport class PdmSelectOptionDirective implements AfterContentInit {\n /** The option value that will be emitted on selection. */\n @Input() value = '';\n\n /** When true, the option is rendered but cannot be selected. */\n @Input() disabled = false;\n\n /**\n * Explicit label for the option.\n * When omitted, the directive reads the element's `textContent` after content init.\n */\n @Input() label = '';\n\n constructor(private readonly el: ElementRef<HTMLElement>) {}\n\n ngAfterContentInit(): void {\n // If no explicit label, harvest text from the projected node.\n if (!this.label) {\n this.label = (this.el.nativeElement.textContent ?? '').trim();\n }\n }\n\n /** Resolved label string — always non-empty after ngAfterContentInit. */\n get resolvedLabel(): string {\n return this.label || this.value;\n }\n}\n","import {\n\tAfterContentInit,\n\tChangeDetectionStrategy,\n\tChangeDetectorRef,\n\tComponent,\n\tContentChildren,\n\tDoCheck,\n\tElementRef,\n\tEventEmitter,\n\tHostListener,\n\tInput,\n\tOnDestroy,\n\tOutput,\n\tQueryList,\n\tViewChild,\n\tViewContainerRef,\n} from \"@angular/core\";\nimport { Overlay, OverlayRef } from \"@angular/cdk/overlay\";\nimport { TemplatePortal } from \"@angular/cdk/portal\";\nimport { Subscription } from \"rxjs\";\nimport { PdmSelectOptionDirective } from \"./select-option.directive\";\nimport { PdmOverlayOptions } from \"pdm-ui-kit/src/overlay\";\nimport { createFlexiblePositionStrategy } from \"pdm-ui-kit/src/overlay\";\nimport { Z_INDEX } from \"pdm-ui-kit/src/utils\";\n\nexport interface PdmSelectOption {\n\tlabel: string;\n\tvalue: string;\n\tdisabled?: boolean;\n}\n\n@Component({\n\tselector: \"pdm-select\",\n\ttemplateUrl: \"./select.component.html\",\n\tstyles: [\":host { display: block; }\"],\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PdmSelectComponent implements AfterContentInit, DoCheck, OnDestroy {\n\t@Input() id = \"\";\n\t@Input() value = \"\";\n\t@Input()\n\tset options(value: PdmSelectOption[] | null | undefined) {\n\t\tthis.inputOptions = value ?? [];\n\t\tthis.cdr.markForCheck();\n\t}\n\tget options(): PdmSelectOption[] {\n\t\treturn this.inputOptions;\n\t}\n\t@Input() disabled = false;\n\t@Input() invalid = false;\n\t@Input() className = \"\";\n\t@Input() placeholder = \"Select an option\";\n\t/**\n\t * Optional CDK OverlayConfig overrides.\n\t * Shallow-merged on top of component defaults — consumer always wins.\n\t * Providing `positionStrategy` or `scrollStrategy` replaces the component default entirely.\n\t */\n\t@Input() overlayOptions?: PdmOverlayOptions;\n\n\topen = false;\n\n\t@Output() valueChange = new EventEmitter<string>();\n\n\t@ViewChild(\"triggerEl\") private triggerRef?: ElementRef<HTMLElement>;\n\t@ViewChild(\"panelTemplate\") private panelTemplateRef!: any;\n\n\t/** Collects any `<pdm-select-option>` children projected into this component. */\n\t@ContentChildren(PdmSelectOptionDirective)\n\tprivate projectedOptions!: QueryList<PdmSelectOptionDirective>;\n\n\tprivate overlayRef: OverlayRef | null = null;\n\tprivate backdropSub: Subscription | null = null;\n\tprivate projectedOptionsSub: Subscription | null = null;\n\tprivate inputOptions: PdmSelectOption[] = [];\n\tprivate readonly projectedOptionCache = new WeakMap<\n\t\tPdmSelectOptionDirective,\n\t\tPdmSelectOption\n\t>();\n\tprivate readonly cachedProjectedOptions: PdmSelectOption[] = [];\n\n\tconstructor(\n\t\tprivate readonly cdr: ChangeDetectorRef,\n\t\tprivate readonly overlay: Overlay,\n\t\tprivate readonly viewContainerRef: ViewContainerRef,\n\t) {}\n\n\tngAfterContentInit(): void {\n\t\tthis.syncProjectedOptions();\n\t\t// Re-render when projected options change (e.g. *ngFor on pdm-select-option).\n\t\tthis.projectedOptionsSub = this.projectedOptions.changes.subscribe(() => {\n\t\t\tthis.syncProjectedOptions();\n\t\t\tthis.cdr.markForCheck();\n\t\t});\n\t}\n\n\tngDoCheck(): void {\n\t\tthis.syncProjectedOptions();\n\t}\n\n\tngOnDestroy(): void {\n\t\tif (this.projectedOptionsSub) {\n\t\t\tthis.projectedOptionsSub.unsubscribe();\n\t\t\tthis.projectedOptionsSub = null;\n\t\t}\n\t\tthis.destroyOverlay();\n\t}\n\n\t/**\n\t * Returns the effective list of options.\n\t * Projected `<pdm-select-option>` children take priority over the `[options]` input.\n\t * Falls back to `[options]` when no children are projected.\n\t */\n\tget resolvedOptions(): PdmSelectOption[] {\n\t\tif (this.projectedOptions && this.projectedOptions.length > 0) {\n\t\t\treturn this.cachedProjectedOptions;\n\t\t}\n\t\treturn this.inputOptions;\n\t}\n\n\tget selectedOption(): PdmSelectOption | undefined {\n\t\treturn this.resolvedOptions.find((option) => option.value === this.value);\n\t}\n\n\tget selectedLabel(): string {\n\t\treturn this.selectedOption?.label || this.placeholder;\n\t}\n\n\ttoggle(): void {\n\t\tif (this.disabled) return;\n\t\tif (this.open) {\n\t\t\tthis.closePanel();\n\t\t} else {\n\t\t\tthis.openPanel();\n\t\t}\n\t}\n\n\tonChange(event: Event): void {\n\t\tthis.valueChange.emit((event.target as HTMLSelectElement).value);\n\t}\n\n\tselectOption(option: PdmSelectOption): void {\n\t\tif (option.disabled) return;\n\t\tthis.valueChange.emit(option.value);\n\t\tthis.closePanel();\n\t}\n\n\ttrackByOptionValue(index: number, option: PdmSelectOption): string {\n\t\treturn this.optionKey(option, index);\n\t}\n\n\t@HostListener(\"document:keydown.escape\")\n\tonEscape(): void {\n\t\tif (this.open) {\n\t\t\tthis.closePanel();\n\t\t}\n\t}\n\n\tprivate syncProjectedOptions(): void {\n\t\tif (!this.projectedOptions || this.projectedOptions.length === 0) {\n\t\t\tif (this.cachedProjectedOptions.length > 0) {\n\t\t\t\tthis.cachedProjectedOptions.length = 0;\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\n\t\tlet index = 0;\n\t\tthis.projectedOptions.forEach((directive) => {\n\t\t\tlet option = this.projectedOptionCache.get(directive);\n\t\t\tif (!option) {\n\t\t\t\toption = {\n\t\t\t\t\tlabel: directive.resolvedLabel,\n\t\t\t\t\tvalue: directive.value,\n\t\t\t\t\tdisabled: directive.disabled,\n\t\t\t\t};\n\t\t\t\tthis.projectedOptionCache.set(directive, option);\n\t\t\t}\n\n\t\t\toption.label = directive.resolvedLabel;\n\t\t\toption.value = directive.value;\n\t\t\toption.disabled = directive.disabled;\n\t\t\tthis.cachedProjectedOptions[index] = option;\n\t\t\tindex += 1;\n\t\t});\n\n\t\tif (this.cachedProjectedOptions.length !== index) {\n\t\t\tthis.cachedProjectedOptions.length = index;\n\t\t}\n\t}\n\n\tprivate optionKey(option: PdmSelectOption | null | undefined, index: number): string {\n\t\tconst value = option?.value;\n\t\treturn value == null ? `index:${index}` : `value:${String(value)}`;\n\t}\n\n\tprivate openPanel(): void {\n\t\tif (this.overlayRef) return;\n\n\t\tconst triggerEl = this.triggerRef?.nativeElement;\n\t\tif (!triggerEl) return;\n\n\t\tthis.open = true;\n\t\tthis.cdr.markForCheck();\n\n\t\tconst positionStrategy = createFlexiblePositionStrategy(\n\t\t\tthis.overlay,\n\t\t\ttriggerEl,\n\t\t\t4,\n\t\t);\n\n\t\tthis.overlayRef = this.overlay.create({\n\t\t\t// CRÍTICO: z-[70] para aparecer SOBRE modals (z-[60])\n\t\t\t// panelClass se aplica al cdk-overlay-pane wrapper\n\t\t\tpanelClass: [Z_INDEX.popover],\n\t\t\tpositionStrategy,\n\t\t\tscrollStrategy: this.overlay.scrollStrategies.reposition(),\n\t\t\twidth: triggerEl.offsetWidth,\n\t\t\t// Consumer overrides are spread last — they win over every default above.\n\t\t\t...this.overlayOptions,\n\t\t});\n\n\t\tconst portal = new TemplatePortal(\n\t\t\tthis.panelTemplateRef,\n\t\t\tthis.viewContainerRef,\n\t\t);\n\t\tthis.overlayRef.attach(portal);\n\n\t\tthis.backdropSub = this.overlayRef\n\t\t\t.outsidePointerEvents()\n\t\t\t.subscribe((event) => {\n\t\t\t\tconst target = event.target as Node;\n\t\t\t\tif (!triggerEl.contains(target)) {\n\t\t\t\t\tthis.closePanel();\n\t\t\t\t}\n\t\t\t});\n\n\t\tthis.cdr.markForCheck();\n\t}\n\n\tprivate closePanel(): void {\n\t\tif (!this.overlayRef) return;\n\n\t\tthis.open = false;\n\t\tthis.destroyOverlay();\n\t\tthis.cdr.markForCheck();\n\t}\n\n\tprivate destroyOverlay(): void {\n\t\tif (this.backdropSub) {\n\t\t\tthis.backdropSub.unsubscribe();\n\t\t\tthis.backdropSub = null;\n\t\t}\n\t\tif (this.overlayRef) {\n\t\t\tthis.overlayRef.dispose();\n\t\t\tthis.overlayRef = null;\n\t\t}\n\t}\n}\n","<div [ngClass]=\"['relative', className || 'w-full']\">\n <button\n #triggerEl\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 appearance-none box-border items-center justify-between rounded-md border border-solid 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 <!-- Hidden native select kept for screen-reader / form fallback -->\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 resolvedOptions; trackBy: trackByOptionValue\"\n [value]=\"option.value\"\n [disabled]=\"option.disabled\"\n >\n {{ option.label }}\n </option>\n </select>\n\n <!-- Slot for content-projected pdm-select-option elements (hidden from layout) -->\n <span class=\"hidden\">\n <ng-content select=\"pdm-select-option\"></ng-content>\n </span>\n</div>\n\n<ng-template #panelTemplate>\n <div\n role=\"listbox\"\n [attr.aria-labelledby]=\"id || null\"\n class=\"w-full overflow-y-auto rounded-md border border-solid border-border bg-popover p-1 text-popover-foreground shadow-md max-h-96\"\n >\n <button\n *ngFor=\"let option of resolvedOptions; trackBy: trackByOptionValue\"\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 appearance-none box-border items-center justify-between rounded-sm border-0 bg-transparent 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 ? 'text-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</ng-template>\n","import { CommonModule } from \"@angular/common\";\nimport { NgModule } from \"@angular/core\";\nimport { OverlayModule } from \"@angular/cdk/overlay\";\nimport { PdmIconModule } from \"pdm-ui-kit/src/icon\";\nimport { PdmSelectComponent } from \"./select.component\";\nimport { PdmSelectOptionDirective } from \"./select-option.directive\";\n\nconst COMPONENTS = [PdmSelectComponent, PdmSelectOptionDirective];\n\n@NgModule({\n\timports: [CommonModule, OverlayModule, PdmIconModule],\n\tdeclarations: COMPONENTS,\n\texports: COMPONENTS,\n})\nexport class PdmSelectModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
package/fesm2015/pdm-ui-kit.mjs
CHANGED
|
@@ -4873,6 +4873,8 @@ class PdmInputComponent {
|
|
|
4873
4873
|
this.invalid = false;
|
|
4874
4874
|
this.size = "regular";
|
|
4875
4875
|
this.roundness = "default";
|
|
4876
|
+
this.icon = "";
|
|
4877
|
+
this.iconPosition = "left";
|
|
4876
4878
|
this.className = "";
|
|
4877
4879
|
this.inputClassName = "";
|
|
4878
4880
|
this.label = "";
|
|
@@ -4901,10 +4903,10 @@ class PdmInputComponent {
|
|
|
4901
4903
|
}
|
|
4902
4904
|
}
|
|
4903
4905
|
PdmInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4904
|
-
PdmInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmInputComponent, selector: "pdm-input", inputs: { id: "id", type: "type", value: "value", placeholder: "placeholder", disabled: "disabled", readonly: "readonly", required: "required", invalid: "invalid", size: "size", roundness: "roundness", className: "className", inputClassName: "inputClassName", label: "label", helperText: "helperText", errorText: "errorText" }, outputs: { valueChange: "valueChange", blurred: "blurred" }, ngImport: i0, template: "<div [ngClass]=\"['grid w-full gap-3', className]\">\n <label\n *ngIf=\"label\"\n [attr.for]=\"id\"\n [ngClass]=\"[\n 'text-sm font-medium leading-none',\n invalid ? 'text-destructive' : 'text-foreground',\n ]\"\n >{{ label }}</label\n >\n <
|
|
4906
|
+
PdmInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmInputComponent, selector: "pdm-input", inputs: { id: "id", type: "type", value: "value", placeholder: "placeholder", disabled: "disabled", readonly: "readonly", required: "required", invalid: "invalid", size: "size", roundness: "roundness", icon: "icon", iconPosition: "iconPosition", className: "className", inputClassName: "inputClassName", label: "label", helperText: "helperText", errorText: "errorText" }, outputs: { valueChange: "valueChange", blurred: "blurred" }, ngImport: i0, template: "<div [ngClass]=\"['grid w-full gap-3', className]\">\n <label\n *ngIf=\"label\"\n [attr.for]=\"id\"\n [ngClass]=\"[\n 'text-sm font-medium leading-none',\n invalid ? 'text-destructive' : 'text-foreground',\n ]\"\n >{{ label }}</label\n >\n <div [ngClass]=\"icon ? 'relative' : ''\">\n <pdm-icon\n *ngIf=\"icon\"\n [name]=\"icon\"\n [size]=\"16\"\n aria-hidden=\"true\"\n [ngClass]=\"[\n 'pointer-events-none absolute top-1/2 -translate-y-1/2 text-muted-foreground',\n iconPosition === 'right' ? 'right-3' : 'left-3',\n ]\"\n ></pdm-icon>\n <input\n [id]=\"id\"\n [type]=\"type\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n [attr.aria-invalid]=\"invalid\"\n [attr.aria-describedby]=\"descriptionAttrId\"\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 placeholder:text-muted-foreground w-full min-w-0 appearance-none box-border rounded-lg border border-solid bg-transparent px-3 py-1 text-sm shadow-sm transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n size === 'large' ? 'h-10 px-4 text-sm' : '',\n size === 'regular' ? 'h-9 px-3 text-sm' : '',\n size === 'small' ? 'h-8 px-2 text-sm' : '',\n size === 'mini' ? 'h-6 px-1.5 text-xs' : '',\n icon && iconPosition === 'left' ? 'pl-9' : '',\n icon && iconPosition === 'right' ? 'pr-9' : '',\n roundness === 'round' ? 'rounded-full' : 'rounded-lg',\n type === 'file' ? 'text-sm' : 'text-foreground',\n inputClassName,\n ]\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur($event)\"\n />\n </div>\n <p *ngIf=\"!invalid && helperText\" [id]=\"helperAttrId\" class=\"m-0 text-sm text-muted-foreground\">\n {{ helperText }}\n </p>\n <p *ngIf=\"invalid && errorText\" [id]=\"errorAttrId\" class=\"m-0 text-sm text-destructive\">\n {{ errorText }}\n </p>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4905
4907
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmInputComponent, decorators: [{
|
|
4906
4908
|
type: Component,
|
|
4907
|
-
args: [{ selector: "pdm-input", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['grid w-full gap-3', className]\">\n <label\n *ngIf=\"label\"\n [attr.for]=\"id\"\n [ngClass]=\"[\n 'text-sm font-medium leading-none',\n invalid ? 'text-destructive' : 'text-foreground',\n ]\"\n >{{ label }}</label\n >\n <
|
|
4909
|
+
args: [{ selector: "pdm-input", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['grid w-full gap-3', className]\">\n <label\n *ngIf=\"label\"\n [attr.for]=\"id\"\n [ngClass]=\"[\n 'text-sm font-medium leading-none',\n invalid ? 'text-destructive' : 'text-foreground',\n ]\"\n >{{ label }}</label\n >\n <div [ngClass]=\"icon ? 'relative' : ''\">\n <pdm-icon\n *ngIf=\"icon\"\n [name]=\"icon\"\n [size]=\"16\"\n aria-hidden=\"true\"\n [ngClass]=\"[\n 'pointer-events-none absolute top-1/2 -translate-y-1/2 text-muted-foreground',\n iconPosition === 'right' ? 'right-3' : 'left-3',\n ]\"\n ></pdm-icon>\n <input\n [id]=\"id\"\n [type]=\"type\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n [attr.aria-invalid]=\"invalid\"\n [attr.aria-describedby]=\"descriptionAttrId\"\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 placeholder:text-muted-foreground w-full min-w-0 appearance-none box-border rounded-lg border border-solid bg-transparent px-3 py-1 text-sm shadow-sm transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n size === 'large' ? 'h-10 px-4 text-sm' : '',\n size === 'regular' ? 'h-9 px-3 text-sm' : '',\n size === 'small' ? 'h-8 px-2 text-sm' : '',\n size === 'mini' ? 'h-6 px-1.5 text-xs' : '',\n icon && iconPosition === 'left' ? 'pl-9' : '',\n icon && iconPosition === 'right' ? 'pr-9' : '',\n roundness === 'round' ? 'rounded-full' : 'rounded-lg',\n type === 'file' ? 'text-sm' : 'text-foreground',\n inputClassName,\n ]\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur($event)\"\n />\n </div>\n <p *ngIf=\"!invalid && helperText\" [id]=\"helperAttrId\" class=\"m-0 text-sm text-muted-foreground\">\n {{ helperText }}\n </p>\n <p *ngIf=\"invalid && errorText\" [id]=\"errorAttrId\" class=\"m-0 text-sm text-destructive\">\n {{ errorText }}\n </p>\n</div>\n", styles: [":host{display:block}\n"] }]
|
|
4908
4910
|
}], ctorParameters: function () { return []; }, propDecorators: { id: [{
|
|
4909
4911
|
type: Input
|
|
4910
4912
|
}], type: [{
|
|
@@ -4925,6 +4927,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
4925
4927
|
type: Input
|
|
4926
4928
|
}], roundness: [{
|
|
4927
4929
|
type: Input
|
|
4930
|
+
}], icon: [{
|
|
4931
|
+
type: Input
|
|
4932
|
+
}], iconPosition: [{
|
|
4933
|
+
type: Input
|
|
4928
4934
|
}], className: [{
|
|
4929
4935
|
type: Input
|
|
4930
4936
|
}], inputClassName: [{
|
|
@@ -6152,7 +6158,6 @@ class PdmSelectComponent {
|
|
|
6152
6158
|
this.viewContainerRef = viewContainerRef;
|
|
6153
6159
|
this.id = "";
|
|
6154
6160
|
this.value = "";
|
|
6155
|
-
this.options = [];
|
|
6156
6161
|
this.disabled = false;
|
|
6157
6162
|
this.invalid = false;
|
|
6158
6163
|
this.className = "";
|
|
@@ -6161,12 +6166,34 @@ class PdmSelectComponent {
|
|
|
6161
6166
|
this.valueChange = new EventEmitter();
|
|
6162
6167
|
this.overlayRef = null;
|
|
6163
6168
|
this.backdropSub = null;
|
|
6169
|
+
this.projectedOptionsSub = null;
|
|
6170
|
+
this.inputOptions = [];
|
|
6171
|
+
this.projectedOptionCache = new WeakMap();
|
|
6172
|
+
this.cachedProjectedOptions = [];
|
|
6173
|
+
}
|
|
6174
|
+
set options(value) {
|
|
6175
|
+
this.inputOptions = value !== null && value !== void 0 ? value : [];
|
|
6176
|
+
this.cdr.markForCheck();
|
|
6177
|
+
}
|
|
6178
|
+
get options() {
|
|
6179
|
+
return this.inputOptions;
|
|
6164
6180
|
}
|
|
6165
6181
|
ngAfterContentInit() {
|
|
6182
|
+
this.syncProjectedOptions();
|
|
6166
6183
|
// Re-render when projected options change (e.g. *ngFor on pdm-select-option).
|
|
6167
|
-
this.projectedOptions.changes.subscribe(() =>
|
|
6184
|
+
this.projectedOptionsSub = this.projectedOptions.changes.subscribe(() => {
|
|
6185
|
+
this.syncProjectedOptions();
|
|
6186
|
+
this.cdr.markForCheck();
|
|
6187
|
+
});
|
|
6188
|
+
}
|
|
6189
|
+
ngDoCheck() {
|
|
6190
|
+
this.syncProjectedOptions();
|
|
6168
6191
|
}
|
|
6169
6192
|
ngOnDestroy() {
|
|
6193
|
+
if (this.projectedOptionsSub) {
|
|
6194
|
+
this.projectedOptionsSub.unsubscribe();
|
|
6195
|
+
this.projectedOptionsSub = null;
|
|
6196
|
+
}
|
|
6170
6197
|
this.destroyOverlay();
|
|
6171
6198
|
}
|
|
6172
6199
|
/**
|
|
@@ -6176,13 +6203,9 @@ class PdmSelectComponent {
|
|
|
6176
6203
|
*/
|
|
6177
6204
|
get resolvedOptions() {
|
|
6178
6205
|
if (this.projectedOptions && this.projectedOptions.length > 0) {
|
|
6179
|
-
return this.
|
|
6180
|
-
label: d.resolvedLabel,
|
|
6181
|
-
value: d.value,
|
|
6182
|
-
disabled: d.disabled,
|
|
6183
|
-
}));
|
|
6206
|
+
return this.cachedProjectedOptions;
|
|
6184
6207
|
}
|
|
6185
|
-
return this.
|
|
6208
|
+
return this.inputOptions;
|
|
6186
6209
|
}
|
|
6187
6210
|
get selectedOption() {
|
|
6188
6211
|
return this.resolvedOptions.find((option) => option.value === this.value);
|
|
@@ -6210,11 +6233,46 @@ class PdmSelectComponent {
|
|
|
6210
6233
|
this.valueChange.emit(option.value);
|
|
6211
6234
|
this.closePanel();
|
|
6212
6235
|
}
|
|
6236
|
+
trackByOptionValue(index, option) {
|
|
6237
|
+
return this.optionKey(option, index);
|
|
6238
|
+
}
|
|
6213
6239
|
onEscape() {
|
|
6214
6240
|
if (this.open) {
|
|
6215
6241
|
this.closePanel();
|
|
6216
6242
|
}
|
|
6217
6243
|
}
|
|
6244
|
+
syncProjectedOptions() {
|
|
6245
|
+
if (!this.projectedOptions || this.projectedOptions.length === 0) {
|
|
6246
|
+
if (this.cachedProjectedOptions.length > 0) {
|
|
6247
|
+
this.cachedProjectedOptions.length = 0;
|
|
6248
|
+
}
|
|
6249
|
+
return;
|
|
6250
|
+
}
|
|
6251
|
+
let index = 0;
|
|
6252
|
+
this.projectedOptions.forEach((directive) => {
|
|
6253
|
+
let option = this.projectedOptionCache.get(directive);
|
|
6254
|
+
if (!option) {
|
|
6255
|
+
option = {
|
|
6256
|
+
label: directive.resolvedLabel,
|
|
6257
|
+
value: directive.value,
|
|
6258
|
+
disabled: directive.disabled,
|
|
6259
|
+
};
|
|
6260
|
+
this.projectedOptionCache.set(directive, option);
|
|
6261
|
+
}
|
|
6262
|
+
option.label = directive.resolvedLabel;
|
|
6263
|
+
option.value = directive.value;
|
|
6264
|
+
option.disabled = directive.disabled;
|
|
6265
|
+
this.cachedProjectedOptions[index] = option;
|
|
6266
|
+
index += 1;
|
|
6267
|
+
});
|
|
6268
|
+
if (this.cachedProjectedOptions.length !== index) {
|
|
6269
|
+
this.cachedProjectedOptions.length = index;
|
|
6270
|
+
}
|
|
6271
|
+
}
|
|
6272
|
+
optionKey(option, index) {
|
|
6273
|
+
const value = option === null || option === void 0 ? void 0 : option.value;
|
|
6274
|
+
return value == null ? `index:${index}` : `value:${String(value)}`;
|
|
6275
|
+
}
|
|
6218
6276
|
openPanel() {
|
|
6219
6277
|
var _a;
|
|
6220
6278
|
if (this.overlayRef)
|
|
@@ -6260,10 +6318,10 @@ class PdmSelectComponent {
|
|
|
6260
6318
|
}
|
|
6261
6319
|
}
|
|
6262
6320
|
PdmSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSelectComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
6263
|
-
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", overlayOptions: "overlayOptions" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, queries: [{ propertyName: "projectedOptions", predicate: PdmSelectOptionDirective }], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true }, { propertyName: "panelTemplateRef", first: true, predicate: ["panelTemplate"], descendants: true }], ngImport: i0, template: "<div [ngClass]=\"['relative', className || 'w-full']\">\n <button\n #triggerEl\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 appearance-none box-border items-center justify-between rounded-md border border-solid 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 <!-- Hidden native select kept for screen-reader / form fallback -->\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 resolvedOptions\"\n [value]=\"option.value\"\n [disabled]=\"option.disabled\"\n >\n {{ option.label }}\n </option>\n </select>\n\n <!-- Slot for content-projected pdm-select-option elements (hidden from layout) -->\n <span class=\"hidden\">\n <ng-content select=\"pdm-select-option\"></ng-content>\n </span>\n</div>\n\n<ng-template #panelTemplate>\n <div\n role=\"listbox\"\n [attr.aria-labelledby]=\"id || null\"\n class=\"w-full overflow-y-auto rounded-md border border-solid border-border bg-popover p-1 text-popover-foreground shadow-md max-h-96\"\n >\n <button\n *ngFor=\"let option of resolvedOptions\"\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 appearance-none box-border items-center justify-between rounded-sm border-0 bg-transparent 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 ? 'text-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</ng-template>\n", styles: [":host{display:block}\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$1.PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6321
|
+
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", overlayOptions: "overlayOptions" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, queries: [{ propertyName: "projectedOptions", predicate: PdmSelectOptionDirective }], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true }, { propertyName: "panelTemplateRef", first: true, predicate: ["panelTemplate"], descendants: true }], ngImport: i0, template: "<div [ngClass]=\"['relative', className || 'w-full']\">\n <button\n #triggerEl\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 appearance-none box-border items-center justify-between rounded-md border border-solid 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 <!-- Hidden native select kept for screen-reader / form fallback -->\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 resolvedOptions; trackBy: trackByOptionValue\"\n [value]=\"option.value\"\n [disabled]=\"option.disabled\"\n >\n {{ option.label }}\n </option>\n </select>\n\n <!-- Slot for content-projected pdm-select-option elements (hidden from layout) -->\n <span class=\"hidden\">\n <ng-content select=\"pdm-select-option\"></ng-content>\n </span>\n</div>\n\n<ng-template #panelTemplate>\n <div\n role=\"listbox\"\n [attr.aria-labelledby]=\"id || null\"\n class=\"w-full overflow-y-auto rounded-md border border-solid border-border bg-popover p-1 text-popover-foreground shadow-md max-h-96\"\n >\n <button\n *ngFor=\"let option of resolvedOptions; trackBy: trackByOptionValue\"\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 appearance-none box-border items-center justify-between rounded-sm border-0 bg-transparent 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 ? 'text-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</ng-template>\n", styles: [":host{display:block}\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$1.PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6264
6322
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSelectComponent, decorators: [{
|
|
6265
6323
|
type: Component,
|
|
6266
|
-
args: [{ selector: "pdm-select", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['relative', className || 'w-full']\">\n <button\n #triggerEl\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 appearance-none box-border items-center justify-between rounded-md border border-solid 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 <!-- Hidden native select kept for screen-reader / form fallback -->\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 resolvedOptions\"\n [value]=\"option.value\"\n [disabled]=\"option.disabled\"\n >\n {{ option.label }}\n </option>\n </select>\n\n <!-- Slot for content-projected pdm-select-option elements (hidden from layout) -->\n <span class=\"hidden\">\n <ng-content select=\"pdm-select-option\"></ng-content>\n </span>\n</div>\n\n<ng-template #panelTemplate>\n <div\n role=\"listbox\"\n [attr.aria-labelledby]=\"id || null\"\n class=\"w-full overflow-y-auto rounded-md border border-solid border-border bg-popover p-1 text-popover-foreground shadow-md max-h-96\"\n >\n <button\n *ngFor=\"let option of resolvedOptions\"\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 appearance-none box-border items-center justify-between rounded-sm border-0 bg-transparent 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 ? 'text-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</ng-template>\n", styles: [":host{display:block}\n"] }]
|
|
6324
|
+
args: [{ selector: "pdm-select", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['relative', className || 'w-full']\">\n <button\n #triggerEl\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 appearance-none box-border items-center justify-between rounded-md border border-solid 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 <!-- Hidden native select kept for screen-reader / form fallback -->\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 resolvedOptions; trackBy: trackByOptionValue\"\n [value]=\"option.value\"\n [disabled]=\"option.disabled\"\n >\n {{ option.label }}\n </option>\n </select>\n\n <!-- Slot for content-projected pdm-select-option elements (hidden from layout) -->\n <span class=\"hidden\">\n <ng-content select=\"pdm-select-option\"></ng-content>\n </span>\n</div>\n\n<ng-template #panelTemplate>\n <div\n role=\"listbox\"\n [attr.aria-labelledby]=\"id || null\"\n class=\"w-full overflow-y-auto rounded-md border border-solid border-border bg-popover p-1 text-popover-foreground shadow-md max-h-96\"\n >\n <button\n *ngFor=\"let option of resolvedOptions; trackBy: trackByOptionValue\"\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 appearance-none box-border items-center justify-between rounded-sm border-0 bg-transparent 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 ? 'text-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</ng-template>\n", styles: [":host{display:block}\n"] }]
|
|
6267
6325
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$1.Overlay }, { type: i0.ViewContainerRef }]; }, propDecorators: { id: [{
|
|
6268
6326
|
type: Input
|
|
6269
6327
|
}], value: [{
|