@vsn-ux/ngx-gaia 0.13.0 → 0.13.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/docs/data-select.md
CHANGED
|
@@ -36,7 +36,9 @@ Data select component that automatically generates options from an items array.
|
|
|
36
36
|
- `bindValue: string` - Property path to use as option value
|
|
37
37
|
- `bindLabel: string` - Property path to use as option label
|
|
38
38
|
- `groupBy: string | ((item: IGaSelectOption) => string)` - Property or function for grouping options
|
|
39
|
-
- `
|
|
39
|
+
- `valueLoading: boolean` - Show loading spinner in the trigger area (default: false)
|
|
40
|
+
- `optionsLoading: boolean` - Show loading spinner in the dropdown options list (default: false)
|
|
41
|
+
- `loading: boolean` - **Deprecated.** Maps to `optionsLoading`. Use `valueLoading` or `optionsLoading` instead (default: false)
|
|
40
42
|
- `labelHidden: boolean` - Use when the connected label is not visible; keeps the placeholder always shown so the component remains identifiable (default: false)
|
|
41
43
|
- `withOptionInput: boolean | null` - Show radio/checkbox in options (default: null)
|
|
42
44
|
- `valueDisplayLimit: number | null` - Limit number of displayed values in multi-select (default: null)
|
|
@@ -187,7 +189,7 @@ Searchable with custom filtering (server-side)
|
|
|
187
189
|
searchable
|
|
188
190
|
customFilter
|
|
189
191
|
[items]="filteredOptions.value() ?? []"
|
|
190
|
-
[
|
|
192
|
+
[optionsLoading]="filteredOptions.isLoading()"
|
|
191
193
|
(searchValueChange)="searchText.set($event)"
|
|
192
194
|
[(value)]="selected"
|
|
193
195
|
/>
|
|
@@ -333,12 +335,23 @@ Infinite scroll with optionsEndReached
|
|
|
333
335
|
```html
|
|
334
336
|
<ga-data-select
|
|
335
337
|
[items]="items"
|
|
336
|
-
[
|
|
338
|
+
[optionsLoading]="isLoading"
|
|
337
339
|
(optionsEndReached)="loadMore()"
|
|
338
340
|
[(value)]="selected"
|
|
339
341
|
/>
|
|
340
342
|
```
|
|
341
343
|
|
|
344
|
+
Value loading
|
|
345
|
+
|
|
346
|
+
```html
|
|
347
|
+
<ga-data-select
|
|
348
|
+
[items]="options"
|
|
349
|
+
[valueLoading]="isLoading"
|
|
350
|
+
placeholder="Select option"
|
|
351
|
+
[(value)]="selected"
|
|
352
|
+
/>
|
|
353
|
+
```
|
|
354
|
+
|
|
342
355
|
i18n configuration
|
|
343
356
|
|
|
344
357
|
```typescript
|
|
@@ -5045,6 +5045,11 @@ class GaDataSelectComponent {
|
|
|
5045
5045
|
bindValue = input(...(ngDevMode ? [undefined, { debugName: "bindValue" }] : []));
|
|
5046
5046
|
bindLabel = input(...(ngDevMode ? [undefined, { debugName: "bindLabel" }] : []));
|
|
5047
5047
|
groupBy = input(...(ngDevMode ? [undefined, { debugName: "groupBy" }] : []));
|
|
5048
|
+
valueLoading = input(false, { ...(ngDevMode ? { debugName: "valueLoading" } : {}), transform: booleanAttribute });
|
|
5049
|
+
optionsLoading = input(false, { ...(ngDevMode ? { debugName: "optionsLoading" } : {}), transform: booleanAttribute });
|
|
5050
|
+
/**
|
|
5051
|
+
* @deprecated Use `valueLoading` for the field spinner or `optionsLoading` for the dropdown spinner.
|
|
5052
|
+
*/
|
|
5048
5053
|
loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : {}), transform: booleanAttribute });
|
|
5049
5054
|
withOptionInput = input(null, { ...(ngDevMode ? { debugName: "withOptionInput" } : {}), transform: booleanAttribute });
|
|
5050
5055
|
valueDisplayLimit = input(null, { ...(ngDevMode ? { debugName: "valueDisplayLimit" } : {}), transform: numberAttribute });
|
|
@@ -5161,6 +5166,7 @@ class GaDataSelectComponent {
|
|
|
5161
5166
|
inError = computed(() => {
|
|
5162
5167
|
return this.inErrorInput() ?? this.implicitNgControlState.inError();
|
|
5163
5168
|
}, ...(ngDevMode ? [{ debugName: "inError" }] : []));
|
|
5169
|
+
isOptionsLoading = computed(() => this.optionsLoading() || this.loading(), ...(ngDevMode ? [{ debugName: "isOptionsLoading" }] : []));
|
|
5164
5170
|
listboxCompareWith = computed(() => {
|
|
5165
5171
|
return (o1, o2) => {
|
|
5166
5172
|
if (o1 === null || o1 === undefined || o2 === null || o2 === undefined) {
|
|
@@ -5171,7 +5177,7 @@ class GaDataSelectComponent {
|
|
|
5171
5177
|
return this.compareFn()(o1, o2);
|
|
5172
5178
|
};
|
|
5173
5179
|
}, ...(ngDevMode ? [{ debugName: "listboxCompareWith" }] : []));
|
|
5174
|
-
overlayWidth = computed(() => this.hasNoOptions() || this.
|
|
5180
|
+
overlayWidth = computed(() => this.hasNoOptions() || this.isOptionsLoading()
|
|
5175
5181
|
? this.elementRef.nativeElement.offsetWidth
|
|
5176
5182
|
: null, ...(ngDevMode ? [{ debugName: "overlayWidth" }] : []));
|
|
5177
5183
|
// Helper method to get the label for an item
|
|
@@ -5492,13 +5498,13 @@ class GaDataSelectComponent {
|
|
|
5492
5498
|
}
|
|
5493
5499
|
}
|
|
5494
5500
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaDataSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5495
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GaDataSelectComponent, isStandalone: true, selector: "ga-data-select", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, labelHidden: { classPropertyName: "labelHidden", publicName: "labelHidden", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, inErrorInput: { classPropertyName: "inErrorInput", publicName: "inError", isSignal: true, isRequired: false, transformFunction: null }, compareFn: { classPropertyName: "compareFn", publicName: "compareFn", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, customFilter: { classPropertyName: "customFilter", publicName: "customFilter", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearableLabel: { classPropertyName: "clearableLabel", publicName: "clearableLabel", isSignal: true, isRequired: false, transformFunction: null }, noOptionsLabel: { classPropertyName: "noOptionsLabel", publicName: "noOptionsLabel", isSignal: true, isRequired: false, transformFunction: null }, canSelectNullable: { classPropertyName: "canSelectNullable", publicName: "canSelectNullable", isSignal: true, isRequired: false, transformFunction: null }, leftIcon: { classPropertyName: "leftIcon", publicName: "leftIcon", isSignal: true, isRequired: false, transformFunction: null }, idInput: { classPropertyName: "idInput", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, withOptionInput: { classPropertyName: "withOptionInput", publicName: "withOptionInput", isSignal: true, isRequired: false, transformFunction: null }, valueDisplayLimit: { classPropertyName: "valueDisplayLimit", publicName: "valueDisplayLimit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", selectionChange: "selectionChange", searchValueChange: "searchValueChange", opened: "opened", closed: "closed", optionsEndReached: "optionsEndReached" }, host: { attributes: { "role": "combobox", "aria-haspopup": "listbox" }, listeners: { "click": "toggle()", "keydown.arrowdown": "open(); $event.preventDefault()", "keydown.space": "open(); $event.preventDefault()", "keydown.enter": "open(); $event.preventDefault()", "keydown.backspace": "clearValue(); $event.preventDefault()" }, properties: { "attr.id": "id()", "class.ga-select--multi": "multiple()", "class.ga-select--expanded": "isOpen()", "class.ga-select--disabled": "disabled()", "class.ga-select--invalid": "inError()", "class.ga-select--empty": "!hasValue()", "class.ga-select--label-hidden": "labelHidden()", "attr.aria-expanded": "isOpen()", "attr.aria-controls": "isOpen() ? cdkListbox()?.id : null", "attr.aria-invalid": "inError()", "attr.aria-disabled": "disabled()", "attr.aria-owns": "isOpen() && searchable() ? cdkListbox()?.id : null", "attr.aria-activedescendant": "isOpen() && !searchable() ? activeDescendantId() : null", "attr.tabindex": "disabled() ? -1 : 0" }, classAttribute: "ga-select" }, providers: [
|
|
5501
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GaDataSelectComponent, isStandalone: true, selector: "ga-data-select", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, labelHidden: { classPropertyName: "labelHidden", publicName: "labelHidden", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, inErrorInput: { classPropertyName: "inErrorInput", publicName: "inError", isSignal: true, isRequired: false, transformFunction: null }, compareFn: { classPropertyName: "compareFn", publicName: "compareFn", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, customFilter: { classPropertyName: "customFilter", publicName: "customFilter", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearableLabel: { classPropertyName: "clearableLabel", publicName: "clearableLabel", isSignal: true, isRequired: false, transformFunction: null }, noOptionsLabel: { classPropertyName: "noOptionsLabel", publicName: "noOptionsLabel", isSignal: true, isRequired: false, transformFunction: null }, canSelectNullable: { classPropertyName: "canSelectNullable", publicName: "canSelectNullable", isSignal: true, isRequired: false, transformFunction: null }, leftIcon: { classPropertyName: "leftIcon", publicName: "leftIcon", isSignal: true, isRequired: false, transformFunction: null }, idInput: { classPropertyName: "idInput", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, valueLoading: { classPropertyName: "valueLoading", publicName: "valueLoading", isSignal: true, isRequired: false, transformFunction: null }, optionsLoading: { classPropertyName: "optionsLoading", publicName: "optionsLoading", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, withOptionInput: { classPropertyName: "withOptionInput", publicName: "withOptionInput", isSignal: true, isRequired: false, transformFunction: null }, valueDisplayLimit: { classPropertyName: "valueDisplayLimit", publicName: "valueDisplayLimit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", selectionChange: "selectionChange", searchValueChange: "searchValueChange", opened: "opened", closed: "closed", optionsEndReached: "optionsEndReached" }, host: { attributes: { "role": "combobox", "aria-haspopup": "listbox" }, listeners: { "click": "toggle()", "keydown.arrowdown": "open(); $event.preventDefault()", "keydown.space": "open(); $event.preventDefault()", "keydown.enter": "open(); $event.preventDefault()", "keydown.backspace": "clearValue(); $event.preventDefault()" }, properties: { "attr.id": "id()", "class.ga-select--multi": "multiple()", "class.ga-select--expanded": "isOpen()", "class.ga-select--disabled": "disabled()", "class.ga-select--invalid": "inError()", "class.ga-select--empty": "!hasValue()", "class.ga-select--label-hidden": "labelHidden()", "attr.aria-expanded": "isOpen()", "attr.aria-controls": "isOpen() ? cdkListbox()?.id : null", "attr.aria-invalid": "inError()", "attr.aria-disabled": "disabled()", "attr.aria-owns": "isOpen() && searchable() ? cdkListbox()?.id : null", "attr.aria-activedescendant": "isOpen() && !searchable() ? activeDescendantId() : null", "attr.aria-busy": "valueLoading() ? \"true\" : null", "attr.tabindex": "disabled() ? -1 : 0" }, classAttribute: "ga-select" }, providers: [
|
|
5496
5502
|
{
|
|
5497
5503
|
provide: NG_VALUE_ACCESSOR,
|
|
5498
5504
|
useExisting: forwardRef(() => GaDataSelectComponent),
|
|
5499
5505
|
multi: true,
|
|
5500
5506
|
},
|
|
5501
|
-
], queries: [{ propertyName: "customValueTemplate", first: true, predicate: GaDataSelectValueDirective, descendants: true, isSignal: true }, { propertyName: "customOptionLabelTemplate", first: true, predicate: GaDataSelectOptionLabelDirective, descendants: true, isSignal: true }, { propertyName: "customOptgroupLabelTemplate", first: true, predicate: GaDataSelectOptgroupLabelDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dropdownElRef", first: true, predicate: ["selectDropdown"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "gaOptions", predicate: GaDataOptionComponent, descendants: true, isSignal: true }, { propertyName: "cdkListbox", first: true, predicate: CdkListbox, descendants: true, isSignal: true }, { propertyName: "gaDropdown", first: true, predicate: GaDataSelectDropdownComponent, descendants: true, isSignal: true }, { propertyName: "inputSearch", first: true, predicate: ["inputSearch"], descendants: true, isSignal: true }, { propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1$1.CdkOverlayOrigin }, { directive: GaLabelledByFormFieldDirective, inputs: ["aria-labelledby", "aria-labelledby"] }], ngImport: i0, template: "@if (leftIcon()) {\n <ga-icon [icon]=\"leftIcon()!\" />\n}\n\n<div class=\"ga-select__main-area\">\n @if (hasValue() && (!searchValue() || multiple())) {\n <ga-data-select-value\n [customValueTemplate]=\"customValueTemplate()?.templateRef\"\n />\n\n @if (multiple() && !searchable() && labelHidden()) {\n <div class=\"ga-select__placeholder\" [title]=\"placeholder()\">\n {{ placeholder() }}\n </div>\n }\n } @else if (!searchable()) {\n <div class=\"ga-select__placeholder\">\n {{ placeholder() }}\n </div>\n }\n\n @if (searchable()) {\n <input\n #inputSearch\n type=\"text\"\n tabindex=\"-1\"\n class=\"ga-select__input\"\n aria-autocomplete=\"list\"\n [value]=\"searchValue() ?? ''\"\n (input)=\"open(); searchValue.set(inputSearch.value)\"\n (click)=\"open(); $event.stopPropagation()\"\n [attr.aria-controls]=\"isOpen() ? cdkListbox()?.id : null\"\n [attr.aria-activedescendant]=\"isOpen() ? activeDescendantId() : null\"\n [attr.aria-label]=\"i18n.searchInputLabel\"\n [placeholder]=\"hasValue() && !labelHidden() ? '' : placeholder()\"\n [title]=\"labelHidden() ? placeholder() : ''\"\n (keydown)=\"onInputKeyDown($event)\"\n [disabled]=\"disabled()\"\n />\n }\n</div>\n\n<div class=\"ga-select__suffix\">\n @if (clearable() && hasValue()) {\n <button\n type=\"button\"\n tabindex=\"-1\"\n (click)=\"clearValue(); $event.stopPropagation()\"\n [attr.aria-label]=\"clearableLabel() ?? i18n.clearLabel\"\n style=\"font-size: 0\"\n >\n <ga-icon [icon]=\"icons.CircleX\" size=\"16\" />\n </button>\n }\n\n <ga-icon [icon]=\"menuStatusIcon()\" class=\"ga-select__action-icon\" />\n</div>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayPositions]=\"positions\"\n [cdkConnectedOverlayScrollStrategy]=\"repositionScrollStrategy\"\n [cdkConnectedOverlayMinWidth]=\"overlayWidth()\"\n (overlayOutsideClick)=\"close()\"\n (attach)=\"onOverlayAttach()\"\n (detach)=\"onOverlayDetach()\"\n (overlayKeydown)=\"onOverlayKeydown($event)\"\n>\n <ga-data-select-dropdown\n animate.enter=\"ga-animation-reveal\"\n animate.leave=\"ga-animation-dismiss\"\n [multiple]=\"multiple()\"\n [useActiveDescendant]=\"searchable()\"\n [navigationWrapDisabled]=\"
|
|
5507
|
+
], queries: [{ propertyName: "customValueTemplate", first: true, predicate: GaDataSelectValueDirective, descendants: true, isSignal: true }, { propertyName: "customOptionLabelTemplate", first: true, predicate: GaDataSelectOptionLabelDirective, descendants: true, isSignal: true }, { propertyName: "customOptgroupLabelTemplate", first: true, predicate: GaDataSelectOptgroupLabelDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dropdownElRef", first: true, predicate: ["selectDropdown"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "gaOptions", predicate: GaDataOptionComponent, descendants: true, isSignal: true }, { propertyName: "cdkListbox", first: true, predicate: CdkListbox, descendants: true, isSignal: true }, { propertyName: "gaDropdown", first: true, predicate: GaDataSelectDropdownComponent, descendants: true, isSignal: true }, { propertyName: "inputSearch", first: true, predicate: ["inputSearch"], descendants: true, isSignal: true }, { propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1$1.CdkOverlayOrigin }, { directive: GaLabelledByFormFieldDirective, inputs: ["aria-labelledby", "aria-labelledby"] }], ngImport: i0, template: "@if (leftIcon()) {\n <ga-icon [icon]=\"leftIcon()!\" />\n}\n\n<div class=\"ga-select__main-area\">\n @if (hasValue() && (!searchValue() || multiple())) {\n <ga-data-select-value\n [customValueTemplate]=\"customValueTemplate()?.templateRef\"\n />\n\n @if (multiple() && !searchable() && labelHidden()) {\n <div class=\"ga-select__placeholder\" [title]=\"placeholder()\">\n {{ placeholder() }}\n </div>\n }\n } @else if (!searchable()) {\n <div class=\"ga-select__placeholder\">\n {{ placeholder() }}\n </div>\n }\n\n @if (searchable()) {\n <input\n #inputSearch\n type=\"text\"\n tabindex=\"-1\"\n class=\"ga-select__input\"\n aria-autocomplete=\"list\"\n [value]=\"searchValue() ?? ''\"\n (input)=\"open(); searchValue.set(inputSearch.value)\"\n (click)=\"open(); $event.stopPropagation()\"\n [attr.aria-controls]=\"isOpen() ? cdkListbox()?.id : null\"\n [attr.aria-activedescendant]=\"isOpen() ? activeDescendantId() : null\"\n [attr.aria-label]=\"i18n.searchInputLabel\"\n [placeholder]=\"hasValue() && !labelHidden() ? '' : placeholder()\"\n [title]=\"labelHidden() ? placeholder() : ''\"\n (keydown)=\"onInputKeyDown($event)\"\n [disabled]=\"disabled()\"\n />\n }\n</div>\n\n<div class=\"ga-select__suffix\">\n @if (valueLoading()) {\n <ga-spinner size=\"16\" role=\"presentation\" />\n }\n\n @if (clearable() && hasValue()) {\n <button\n type=\"button\"\n tabindex=\"-1\"\n (click)=\"clearValue(); $event.stopPropagation()\"\n [attr.aria-label]=\"clearableLabel() ?? i18n.clearLabel\"\n style=\"font-size: 0\"\n >\n <ga-icon [icon]=\"icons.CircleX\" size=\"16\" />\n </button>\n }\n\n <ga-icon [icon]=\"menuStatusIcon()\" class=\"ga-select__action-icon\" />\n</div>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayPositions]=\"positions\"\n [cdkConnectedOverlayScrollStrategy]=\"repositionScrollStrategy\"\n [cdkConnectedOverlayMinWidth]=\"overlayWidth()\"\n (overlayOutsideClick)=\"close()\"\n (attach)=\"onOverlayAttach()\"\n (detach)=\"onOverlayDetach()\"\n (overlayKeydown)=\"onOverlayKeydown($event)\"\n>\n <ga-data-select-dropdown\n animate.enter=\"ga-animation-reveal\"\n animate.leave=\"ga-animation-dismiss\"\n [multiple]=\"multiple()\"\n [useActiveDescendant]=\"searchable()\"\n [navigationWrapDisabled]=\"isOptionsLoading()\"\n [compareWith]=\"listboxCompareWith()\"\n [loading]=\"isOptionsLoading()\"\n [hasNoOptions]=\"hasNoOptions()\"\n #selectDropdown\n >\n @if (hasNoOptions() && !isOptionsLoading()) {\n <div class=\"ga-dropdown__empty\">\n {{ noOptionsLabel() ?? i18n.noOptionsLabel }}\n </div>\n }\n\n @for (group of groupedItems(); track group.label) {\n @if (group.label) {\n <ga-data-optgroup\n [label]=\"group.label\"\n [customLabelTemplate]=\"customOptgroupLabelTemplate()?.templateRef\"\n [customLabelContext]=\"getOptgroupLabelTemplateContext(group)\"\n >\n @for (item of group.items; track getItemValue(item)) {\n <ga-data-option\n [value]=\"getItemValue(item)\"\n [withInput]=\"withOptionInput()\"\n [disabled]=\"getItemDisabled(item)\"\n [typeaheadLabel]=\"getItemTypeaheadLabel(item)\"\n >\n @if (customOptionLabelTemplate(); as labelTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"labelTemplate.templateRef\"\n [ngTemplateOutletContext]=\"\n getOptionLabelTemplateContext(item)\n \"\n />\n } @else {\n {{ getItemLabel(item) }}\n }\n </ga-data-option>\n }\n </ga-data-optgroup>\n } @else {\n @for (item of group.items; track getItemValue(item)) {\n <ga-data-option\n [value]=\"getItemValue(item)\"\n [withInput]=\"withOptionInput() ?? multiple()\"\n [disabled]=\"getItemDisabled(item)\"\n [typeaheadLabel]=\"getItemTypeaheadLabel(item)\"\n >\n @if (customOptionLabelTemplate(); as labelTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"labelTemplate.templateRef\"\n [ngTemplateOutletContext]=\"getOptionLabelTemplateContext(item)\"\n />\n } @else {\n {{ getItemLabel(item) }}\n }\n </ga-data-option>\n }\n }\n }\n\n <!--\n Virtual items: Render hidden disabled options for all selected values.\n This ensures cdkListbox maintains state when filtering occurs - even when\n selected values don't match the currently visible filtered options, they\n remain valid options in the listbox, preventing state loss.\n -->\n @for (item of virtualItems(); track getItemValue(item)) {\n <ga-data-option\n [value]=\"getItemValue(item)\"\n [withInput]=\"withOptionInput() ?? multiple()\"\n disabled\n hidden\n >\n @if (customOptionLabelTemplate(); as labelTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"labelTemplate.templateRef\"\n [ngTemplateOutletContext]=\"getOptionLabelTemplateContext(item)\"\n />\n } @else {\n {{ getItemLabel(item) }}\n }\n </ga-data-option>\n }\n\n <ga-intersection-trigger\n parentAsRoot\n rootMargin=\"0% 0% 20px 0%\"\n (trigger)=\"endReached()\"\n />\n </ga-data-select-dropdown>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }, { kind: "ngmodule", type: GaButtonModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: GaDataSelectValueComponent, selector: "ga-data-select-value", inputs: ["customValueTemplate"] }, { kind: "component", type: GaDataSelectDropdownComponent, selector: "ga-data-select-dropdown", inputs: ["loading", "hasNoOptions"] }, { kind: "component", type: GaDataOptionComponent, selector: "ga-data-option", inputs: ["value", "disabled", "withInput"] }, { kind: "component", type: GaDataOptgroupComponent, selector: "ga-data-optgroup", inputs: ["label", "customLabelTemplate", "customLabelContext"] }, { kind: "component", type: GaIntersectionTriggerComponent, selector: "ga-intersection-trigger", inputs: ["rootElement", "rootMargin", "parentAsRoot"], outputs: ["trigger"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GaSpinnerComponent, selector: "ga-spinner", inputs: ["size"] }] });
|
|
5502
5508
|
}
|
|
5503
5509
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GaDataSelectComponent, decorators: [{
|
|
5504
5510
|
type: Component,
|
|
@@ -5512,6 +5518,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
5512
5518
|
GaDataOptgroupComponent,
|
|
5513
5519
|
GaIntersectionTriggerComponent,
|
|
5514
5520
|
NgTemplateOutlet,
|
|
5521
|
+
GaSpinnerComponent,
|
|
5515
5522
|
], hostDirectives: [
|
|
5516
5523
|
CdkOverlayOrigin,
|
|
5517
5524
|
{
|
|
@@ -5541,14 +5548,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
5541
5548
|
'[attr.aria-disabled]': 'disabled()',
|
|
5542
5549
|
'[attr.aria-owns]': 'isOpen() && searchable() ? cdkListbox()?.id : null',
|
|
5543
5550
|
'[attr.aria-activedescendant]': 'isOpen() && !searchable() ? activeDescendantId() : null',
|
|
5551
|
+
'[attr.aria-busy]': 'valueLoading() ? "true" : null',
|
|
5544
5552
|
'[attr.tabindex]': 'disabled() ? -1 : 0',
|
|
5545
5553
|
'(click)': 'toggle()',
|
|
5546
5554
|
'(keydown.arrowdown)': 'open(); $event.preventDefault()',
|
|
5547
5555
|
'(keydown.space)': 'open(); $event.preventDefault()',
|
|
5548
5556
|
'(keydown.enter)': 'open(); $event.preventDefault()',
|
|
5549
5557
|
'(keydown.backspace)': 'clearValue(); $event.preventDefault()',
|
|
5550
|
-
}, template: "@if (leftIcon()) {\n <ga-icon [icon]=\"leftIcon()!\" />\n}\n\n<div class=\"ga-select__main-area\">\n @if (hasValue() && (!searchValue() || multiple())) {\n <ga-data-select-value\n [customValueTemplate]=\"customValueTemplate()?.templateRef\"\n />\n\n @if (multiple() && !searchable() && labelHidden()) {\n <div class=\"ga-select__placeholder\" [title]=\"placeholder()\">\n {{ placeholder() }}\n </div>\n }\n } @else if (!searchable()) {\n <div class=\"ga-select__placeholder\">\n {{ placeholder() }}\n </div>\n }\n\n @if (searchable()) {\n <input\n #inputSearch\n type=\"text\"\n tabindex=\"-1\"\n class=\"ga-select__input\"\n aria-autocomplete=\"list\"\n [value]=\"searchValue() ?? ''\"\n (input)=\"open(); searchValue.set(inputSearch.value)\"\n (click)=\"open(); $event.stopPropagation()\"\n [attr.aria-controls]=\"isOpen() ? cdkListbox()?.id : null\"\n [attr.aria-activedescendant]=\"isOpen() ? activeDescendantId() : null\"\n [attr.aria-label]=\"i18n.searchInputLabel\"\n [placeholder]=\"hasValue() && !labelHidden() ? '' : placeholder()\"\n [title]=\"labelHidden() ? placeholder() : ''\"\n (keydown)=\"onInputKeyDown($event)\"\n [disabled]=\"disabled()\"\n />\n }\n</div>\n\n<div class=\"ga-select__suffix\">\n @if (clearable() && hasValue()) {\n <button\n type=\"button\"\n tabindex=\"-1\"\n (click)=\"clearValue(); $event.stopPropagation()\"\n [attr.aria-label]=\"clearableLabel() ?? i18n.clearLabel\"\n style=\"font-size: 0\"\n >\n <ga-icon [icon]=\"icons.CircleX\" size=\"16\" />\n </button>\n }\n\n <ga-icon [icon]=\"menuStatusIcon()\" class=\"ga-select__action-icon\" />\n</div>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayPositions]=\"positions\"\n [cdkConnectedOverlayScrollStrategy]=\"repositionScrollStrategy\"\n [cdkConnectedOverlayMinWidth]=\"overlayWidth()\"\n (overlayOutsideClick)=\"close()\"\n (attach)=\"onOverlayAttach()\"\n (detach)=\"onOverlayDetach()\"\n (overlayKeydown)=\"onOverlayKeydown($event)\"\n>\n <ga-data-select-dropdown\n animate.enter=\"ga-animation-reveal\"\n animate.leave=\"ga-animation-dismiss\"\n [multiple]=\"multiple()\"\n [useActiveDescendant]=\"searchable()\"\n [navigationWrapDisabled]=\"
|
|
5551
|
-
}], ctorParameters: () => [], propDecorators: { multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], labelHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelHidden", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], inErrorInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "inError", required: false }] }], compareFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareFn", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], customFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "customFilter", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearableLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearableLabel", required: false }] }], noOptionsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "noOptionsLabel", required: false }] }], canSelectNullable: [{ type: i0.Input, args: [{ isSignal: true, alias: "canSelectNullable", required: false }] }], leftIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftIcon", required: false }] }], idInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], withOptionInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "withOptionInput", required: false }] }], valueDisplayLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueDisplayLimit", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], searchValueChange: [{ type: i0.Output, args: ["searchValueChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], optionsEndReached: [{ type: i0.Output, args: ["optionsEndReached"] }], dropdownElRef: [{ type: i0.ViewChild, args: ['selectDropdown', { ...{
|
|
5558
|
+
}, template: "@if (leftIcon()) {\n <ga-icon [icon]=\"leftIcon()!\" />\n}\n\n<div class=\"ga-select__main-area\">\n @if (hasValue() && (!searchValue() || multiple())) {\n <ga-data-select-value\n [customValueTemplate]=\"customValueTemplate()?.templateRef\"\n />\n\n @if (multiple() && !searchable() && labelHidden()) {\n <div class=\"ga-select__placeholder\" [title]=\"placeholder()\">\n {{ placeholder() }}\n </div>\n }\n } @else if (!searchable()) {\n <div class=\"ga-select__placeholder\">\n {{ placeholder() }}\n </div>\n }\n\n @if (searchable()) {\n <input\n #inputSearch\n type=\"text\"\n tabindex=\"-1\"\n class=\"ga-select__input\"\n aria-autocomplete=\"list\"\n [value]=\"searchValue() ?? ''\"\n (input)=\"open(); searchValue.set(inputSearch.value)\"\n (click)=\"open(); $event.stopPropagation()\"\n [attr.aria-controls]=\"isOpen() ? cdkListbox()?.id : null\"\n [attr.aria-activedescendant]=\"isOpen() ? activeDescendantId() : null\"\n [attr.aria-label]=\"i18n.searchInputLabel\"\n [placeholder]=\"hasValue() && !labelHidden() ? '' : placeholder()\"\n [title]=\"labelHidden() ? placeholder() : ''\"\n (keydown)=\"onInputKeyDown($event)\"\n [disabled]=\"disabled()\"\n />\n }\n</div>\n\n<div class=\"ga-select__suffix\">\n @if (valueLoading()) {\n <ga-spinner size=\"16\" role=\"presentation\" />\n }\n\n @if (clearable() && hasValue()) {\n <button\n type=\"button\"\n tabindex=\"-1\"\n (click)=\"clearValue(); $event.stopPropagation()\"\n [attr.aria-label]=\"clearableLabel() ?? i18n.clearLabel\"\n style=\"font-size: 0\"\n >\n <ga-icon [icon]=\"icons.CircleX\" size=\"16\" />\n </button>\n }\n\n <ga-icon [icon]=\"menuStatusIcon()\" class=\"ga-select__action-icon\" />\n</div>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayPositions]=\"positions\"\n [cdkConnectedOverlayScrollStrategy]=\"repositionScrollStrategy\"\n [cdkConnectedOverlayMinWidth]=\"overlayWidth()\"\n (overlayOutsideClick)=\"close()\"\n (attach)=\"onOverlayAttach()\"\n (detach)=\"onOverlayDetach()\"\n (overlayKeydown)=\"onOverlayKeydown($event)\"\n>\n <ga-data-select-dropdown\n animate.enter=\"ga-animation-reveal\"\n animate.leave=\"ga-animation-dismiss\"\n [multiple]=\"multiple()\"\n [useActiveDescendant]=\"searchable()\"\n [navigationWrapDisabled]=\"isOptionsLoading()\"\n [compareWith]=\"listboxCompareWith()\"\n [loading]=\"isOptionsLoading()\"\n [hasNoOptions]=\"hasNoOptions()\"\n #selectDropdown\n >\n @if (hasNoOptions() && !isOptionsLoading()) {\n <div class=\"ga-dropdown__empty\">\n {{ noOptionsLabel() ?? i18n.noOptionsLabel }}\n </div>\n }\n\n @for (group of groupedItems(); track group.label) {\n @if (group.label) {\n <ga-data-optgroup\n [label]=\"group.label\"\n [customLabelTemplate]=\"customOptgroupLabelTemplate()?.templateRef\"\n [customLabelContext]=\"getOptgroupLabelTemplateContext(group)\"\n >\n @for (item of group.items; track getItemValue(item)) {\n <ga-data-option\n [value]=\"getItemValue(item)\"\n [withInput]=\"withOptionInput()\"\n [disabled]=\"getItemDisabled(item)\"\n [typeaheadLabel]=\"getItemTypeaheadLabel(item)\"\n >\n @if (customOptionLabelTemplate(); as labelTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"labelTemplate.templateRef\"\n [ngTemplateOutletContext]=\"\n getOptionLabelTemplateContext(item)\n \"\n />\n } @else {\n {{ getItemLabel(item) }}\n }\n </ga-data-option>\n }\n </ga-data-optgroup>\n } @else {\n @for (item of group.items; track getItemValue(item)) {\n <ga-data-option\n [value]=\"getItemValue(item)\"\n [withInput]=\"withOptionInput() ?? multiple()\"\n [disabled]=\"getItemDisabled(item)\"\n [typeaheadLabel]=\"getItemTypeaheadLabel(item)\"\n >\n @if (customOptionLabelTemplate(); as labelTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"labelTemplate.templateRef\"\n [ngTemplateOutletContext]=\"getOptionLabelTemplateContext(item)\"\n />\n } @else {\n {{ getItemLabel(item) }}\n }\n </ga-data-option>\n }\n }\n }\n\n <!--\n Virtual items: Render hidden disabled options for all selected values.\n This ensures cdkListbox maintains state when filtering occurs - even when\n selected values don't match the currently visible filtered options, they\n remain valid options in the listbox, preventing state loss.\n -->\n @for (item of virtualItems(); track getItemValue(item)) {\n <ga-data-option\n [value]=\"getItemValue(item)\"\n [withInput]=\"withOptionInput() ?? multiple()\"\n disabled\n hidden\n >\n @if (customOptionLabelTemplate(); as labelTemplate) {\n <ng-container\n [ngTemplateOutlet]=\"labelTemplate.templateRef\"\n [ngTemplateOutletContext]=\"getOptionLabelTemplateContext(item)\"\n />\n } @else {\n {{ getItemLabel(item) }}\n }\n </ga-data-option>\n }\n\n <ga-intersection-trigger\n parentAsRoot\n rootMargin=\"0% 0% 20px 0%\"\n (trigger)=\"endReached()\"\n />\n </ga-data-select-dropdown>\n</ng-template>\n" }]
|
|
5559
|
+
}], ctorParameters: () => [], propDecorators: { multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], labelHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelHidden", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], inErrorInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "inError", required: false }] }], compareFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareFn", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], customFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "customFilter", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearableLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearableLabel", required: false }] }], noOptionsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "noOptionsLabel", required: false }] }], canSelectNullable: [{ type: i0.Input, args: [{ isSignal: true, alias: "canSelectNullable", required: false }] }], leftIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftIcon", required: false }] }], idInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], valueLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueLoading", required: false }] }], optionsLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsLoading", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], withOptionInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "withOptionInput", required: false }] }], valueDisplayLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueDisplayLimit", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], searchValueChange: [{ type: i0.Output, args: ["searchValueChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], optionsEndReached: [{ type: i0.Output, args: ["optionsEndReached"] }], dropdownElRef: [{ type: i0.ViewChild, args: ['selectDropdown', { ...{
|
|
5552
5560
|
read: ElementRef,
|
|
5553
5561
|
}, isSignal: true }] }], gaOptions: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => GaDataOptionComponent), { isSignal: true }] }], cdkListbox: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkListbox), { isSignal: true }] }], gaDropdown: [{ type: i0.ViewChild, args: [i0.forwardRef(() => GaDataSelectDropdownComponent), { isSignal: true }] }], customValueTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GaDataSelectValueDirective), { isSignal: true }] }], customOptionLabelTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GaDataSelectOptionLabelDirective), { isSignal: true }] }], customOptgroupLabelTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GaDataSelectOptgroupLabelDirective), { isSignal: true }] }], inputSearch: [{ type: i0.ViewChild, args: ['inputSearch', { isSignal: true }] }], connectedOverlay: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkConnectedOverlay), { isSignal: true }] }] } });
|
|
5554
5562
|
|