@i-cell/ids-angular 0.2.18 → 0.2.19
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/fesm2022/i-cell-ids-angular-forms.mjs +21 -21
- package/fesm2022/i-cell-ids-angular-forms.mjs.map +1 -1
- package/fesm2022/i-cell-ids-angular-overlay-panel.mjs +8 -17
- package/fesm2022/i-cell-ids-angular-overlay-panel.mjs.map +1 -1
- package/forms/index.d.ts +2 -1
- package/overlay-panel/index.d.ts +3 -7
- package/package.json +16 -16
|
@@ -983,12 +983,12 @@ class IdsAutocompleteComponent extends IdsFormFieldControl {
|
|
|
983
983
|
this.hintMinChars = input(this._defaultConfig.hintMinChars, ...(ngDevMode ? [{ debugName: "hintMinChars" }] : []));
|
|
984
984
|
this.hintMaxLength = input(this._defaultConfig.hintMaxLength, ...(ngDevMode ? [{ debugName: "hintMaxLength" }] : []));
|
|
985
985
|
this.panelClasses = input('', ...(ngDevMode ? [{ debugName: "panelClasses" }] : []));
|
|
986
|
-
this.isPanelOpen = signal(false, ...(ngDevMode ? [{ debugName: "isPanelOpen" }] : []));
|
|
987
986
|
this.parentSize = computed(() => this._parentFormField.parentOrSelfSize(), ...(ngDevMode ? [{ debugName: "parentSize" }] : []));
|
|
988
987
|
this.parentVariant = computed(() => this._parentFormField.parentOrSelfVariant(), ...(ngDevMode ? [{ debugName: "parentVariant" }] : []));
|
|
989
988
|
this.errorStateMatcher = signal(inject(ErrorStateMatcher), ...(ngDevMode ? [{ debugName: "errorStateMatcher" }] : []));
|
|
990
989
|
this.successStateMatcher = signal(inject(SuccessStateMatcher), ...(ngDevMode ? [{ debugName: "successStateMatcher" }] : []));
|
|
991
990
|
this.options = viewChildren(IdsOptionComponent, ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
991
|
+
this.overlayPanel = viewChild.required(IdsOverlayPanelComponent);
|
|
992
992
|
this.onContainerClick = () => { };
|
|
993
993
|
this._hostClasses = computed(() => this._getHostClasses([
|
|
994
994
|
this.parentSize(),
|
|
@@ -1001,8 +1001,8 @@ class IdsAutocompleteComponent extends IdsFormFieldControl {
|
|
|
1001
1001
|
this.panelClasses(),
|
|
1002
1002
|
].join(' '), ...(ngDevMode ? [{ debugName: "_panelClasses" }] : []));
|
|
1003
1003
|
this._focused = signal(false, ...(ngDevMode ? [{ debugName: "_focused" }] : []));
|
|
1004
|
-
this._canOpen = computed(() => !this.
|
|
1005
|
-
this._panel = viewChild('
|
|
1004
|
+
this._canOpen = computed(() => !this.overlayPanel().open() && !this.disabled() && !this.readonly() && this.options().length > 0, ...(ngDevMode ? [{ debugName: "_canOpen" }] : []));
|
|
1005
|
+
this._panel = viewChild('overlay', ...(ngDevMode ? [{ debugName: "_panel", read: (ElementRef) }] : [{ read: (ElementRef) }]));
|
|
1006
1006
|
this._inputElemment = viewChild('fallbackOverlayOrigin', ...(ngDevMode ? [{ debugName: "_inputElemment", read: (ElementRef) }] : [{ read: (ElementRef) }]));
|
|
1007
1007
|
this._resource = rxResource({
|
|
1008
1008
|
defaultValue: [],
|
|
@@ -1013,7 +1013,7 @@ class IdsAutocompleteComponent extends IdsFormFieldControl {
|
|
|
1013
1013
|
this._onTouched = () => { };
|
|
1014
1014
|
this._searchText = model('', ...(ngDevMode ? [{ debugName: "_searchText" }] : []));
|
|
1015
1015
|
this._skipPredicate = (option) => {
|
|
1016
|
-
if (this.
|
|
1016
|
+
if (this.overlayPanel().open()) {
|
|
1017
1017
|
return false;
|
|
1018
1018
|
}
|
|
1019
1019
|
return option.disabledInput();
|
|
@@ -1086,7 +1086,7 @@ class IdsAutocompleteComponent extends IdsFormFieldControl {
|
|
|
1086
1086
|
.withAllowedModifierKeys(['shiftKey'])
|
|
1087
1087
|
.skipPredicate(this._skipPredicate);
|
|
1088
1088
|
this._keyManager.change.subscribe(() => {
|
|
1089
|
-
if (this.
|
|
1089
|
+
if (this.overlayPanel().open() && this._panel()) {
|
|
1090
1090
|
this._scrollOptionIntoView(this._keyManager?.activeItemIndex || 0);
|
|
1091
1091
|
}
|
|
1092
1092
|
});
|
|
@@ -1107,7 +1107,7 @@ class IdsAutocompleteComponent extends IdsFormFieldControl {
|
|
|
1107
1107
|
if (isUserInput) {
|
|
1108
1108
|
this._keyManager?.setActiveItem(source);
|
|
1109
1109
|
}
|
|
1110
|
-
if (isUserInput && !this.multiSelect() && this.
|
|
1110
|
+
if (isUserInput && !this.multiSelect() && this.overlayPanel().open()) {
|
|
1111
1111
|
this.close();
|
|
1112
1112
|
}
|
|
1113
1113
|
if (this.multiSelect()) {
|
|
@@ -1123,11 +1123,11 @@ class IdsAutocompleteComponent extends IdsFormFieldControl {
|
|
|
1123
1123
|
this._handleChange();
|
|
1124
1124
|
this._onTouched();
|
|
1125
1125
|
this._inputElemment()?.nativeElement.blur();
|
|
1126
|
-
this.
|
|
1126
|
+
this.overlayPanel().open.set(false);
|
|
1127
1127
|
}
|
|
1128
1128
|
_handleKeydown(event) {
|
|
1129
1129
|
if (!this.disabled() && !this.readonly()) {
|
|
1130
|
-
this.
|
|
1130
|
+
this.overlayPanel().open() ? this._handleOpenedPanelKeydown(event) : this._handleClosedPanelKeydown(event);
|
|
1131
1131
|
// announce number of options when a key is pressed
|
|
1132
1132
|
this._liveAnnouncer.announce(this.options()
|
|
1133
1133
|
.filter((option) => !option.disabled)
|
|
@@ -1232,7 +1232,7 @@ class IdsAutocompleteComponent extends IdsFormFieldControl {
|
|
|
1232
1232
|
return refToMeasure.nativeElement.getBoundingClientRect().width;
|
|
1233
1233
|
}
|
|
1234
1234
|
toggle() {
|
|
1235
|
-
this.
|
|
1235
|
+
this.overlayPanel().open() ? this.close() : this.open();
|
|
1236
1236
|
}
|
|
1237
1237
|
open() {
|
|
1238
1238
|
if (!this._canOpen()) {
|
|
@@ -1242,14 +1242,14 @@ class IdsAutocompleteComponent extends IdsFormFieldControl {
|
|
|
1242
1242
|
this._preferredOverlayOrigin = this._parentFormField?.getConnectedOverlayOrigin();
|
|
1243
1243
|
}
|
|
1244
1244
|
this._overlayWidth = this._getOverlayWidth(this._preferredOverlayOrigin);
|
|
1245
|
-
this.
|
|
1245
|
+
this.overlayPanel().open.set(true);
|
|
1246
1246
|
this._keyManager?.withHorizontalOrientation(null);
|
|
1247
1247
|
this._highlightCorrectOption();
|
|
1248
1248
|
this._changeDetectorRef.markForCheck();
|
|
1249
1249
|
}
|
|
1250
1250
|
close() {
|
|
1251
|
-
if (this.
|
|
1252
|
-
this.
|
|
1251
|
+
if (this.overlayPanel().open()) {
|
|
1252
|
+
this.overlayPanel().open.set(false);
|
|
1253
1253
|
this._changeDetectorRef.markForCheck();
|
|
1254
1254
|
this._onTouched();
|
|
1255
1255
|
}
|
|
@@ -1296,7 +1296,7 @@ class IdsAutocompleteComponent extends IdsFormFieldControl {
|
|
|
1296
1296
|
if (correspondingOption) {
|
|
1297
1297
|
this._keyManager?.updateActiveItem(correspondingOption);
|
|
1298
1298
|
}
|
|
1299
|
-
else if (!this.
|
|
1299
|
+
else if (!this.overlayPanel().open()) {
|
|
1300
1300
|
this._keyManager?.updateActiveItem(-1);
|
|
1301
1301
|
}
|
|
1302
1302
|
}
|
|
@@ -1379,13 +1379,13 @@ class IdsAutocompleteComponent extends IdsFormFieldControl {
|
|
|
1379
1379
|
_onBlur() {
|
|
1380
1380
|
this._focused.set(false);
|
|
1381
1381
|
this._keyManager?.cancelTypeahead();
|
|
1382
|
-
if (!this.disabled() && !this.
|
|
1382
|
+
if (!this.disabled() && !this.overlayPanel().open()) {
|
|
1383
1383
|
this._onTouched();
|
|
1384
1384
|
this._changeDetectorRef.markForCheck();
|
|
1385
1385
|
}
|
|
1386
1386
|
}
|
|
1387
1387
|
_getAriaActiveDescendant() {
|
|
1388
|
-
if (this.
|
|
1388
|
+
if (this.overlayPanel().open() && this._keyManager?.activeItem) {
|
|
1389
1389
|
return this._keyManager.activeItem.id();
|
|
1390
1390
|
}
|
|
1391
1391
|
return null;
|
|
@@ -1399,7 +1399,7 @@ class IdsAutocompleteComponent extends IdsFormFieldControl {
|
|
|
1399
1399
|
}
|
|
1400
1400
|
}
|
|
1401
1401
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1402
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: IdsAutocompleteComponent, isStandalone: true, selector: "ids-autocomplete[ngModel]:not([formControl]):not([formControlName]),\n ids-autocomplete[formControl]:not([ngModel]):not([formControlName]),\n ids-autocomplete[formControlName]:not([ngModel]):not([formControl])", inputs: { minChars: { classPropertyName: "minChars", publicName: "minChars", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, multiSelect: { classPropertyName: "multiSelect", publicName: "multiSelect", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelClearButton: { classPropertyName: "ariaLabelClearButton", publicName: "ariaLabelClearButton", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelToggleButton: { classPropertyName: "ariaLabelToggleButton", publicName: "ariaLabelToggleButton", isSignal: true, isRequired: false, transformFunction: null }, valueCompareFn: { classPropertyName: "valueCompareFn", publicName: "valueCompareFn", isSignal: true, isRequired: false, transformFunction: null }, sortCompareFn: { classPropertyName: "sortCompareFn", publicName: "sortCompareFn", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, typeaheadDebounceInterval: { classPropertyName: "typeaheadDebounceInterval", publicName: "typeaheadDebounceInterval", isSignal: true, isRequired: false, transformFunction: null }, hintLoading: { classPropertyName: "hintLoading", publicName: "hintLoading", isSignal: true, isRequired: false, transformFunction: null }, hintNoResults: { classPropertyName: "hintNoResults", publicName: "hintNoResults", isSignal: true, isRequired: false, transformFunction: null }, hintMinChars: { classPropertyName: "hintMinChars", publicName: "hintMinChars", isSignal: true, isRequired: false, transformFunction: null }, hintMaxLength: { classPropertyName: "hintMaxLength", publicName: "hintMaxLength", isSignal: true, isRequired: false, transformFunction: null }, panelClasses: { classPropertyName: "panelClasses", publicName: "panelClasses", isSignal: true, isRequired: false, transformFunction: null }, _searchText: { classPropertyName: "_searchText", publicName: "_searchText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { _searchText: "_searchTextChange" }, host: { attributes: { "role": "combobox", "aria-autocomplete": "list", "aria-haspopup": "listbox" }, listeners: { "keydown": "_handleKeydown($event)", "focus": "focus()", "blur": "_onBlur()" }, properties: { "attr.tabindex": "disabled() ? -1 : tabIndex()", "attr.aria-controls": "
|
|
1402
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: IdsAutocompleteComponent, isStandalone: true, selector: "ids-autocomplete[ngModel]:not([formControl]):not([formControlName]),\n ids-autocomplete[formControl]:not([ngModel]):not([formControlName]),\n ids-autocomplete[formControlName]:not([ngModel]):not([formControl])", inputs: { minChars: { classPropertyName: "minChars", publicName: "minChars", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, multiSelect: { classPropertyName: "multiSelect", publicName: "multiSelect", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelClearButton: { classPropertyName: "ariaLabelClearButton", publicName: "ariaLabelClearButton", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelToggleButton: { classPropertyName: "ariaLabelToggleButton", publicName: "ariaLabelToggleButton", isSignal: true, isRequired: false, transformFunction: null }, valueCompareFn: { classPropertyName: "valueCompareFn", publicName: "valueCompareFn", isSignal: true, isRequired: false, transformFunction: null }, sortCompareFn: { classPropertyName: "sortCompareFn", publicName: "sortCompareFn", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, typeaheadDebounceInterval: { classPropertyName: "typeaheadDebounceInterval", publicName: "typeaheadDebounceInterval", isSignal: true, isRequired: false, transformFunction: null }, hintLoading: { classPropertyName: "hintLoading", publicName: "hintLoading", isSignal: true, isRequired: false, transformFunction: null }, hintNoResults: { classPropertyName: "hintNoResults", publicName: "hintNoResults", isSignal: true, isRequired: false, transformFunction: null }, hintMinChars: { classPropertyName: "hintMinChars", publicName: "hintMinChars", isSignal: true, isRequired: false, transformFunction: null }, hintMaxLength: { classPropertyName: "hintMaxLength", publicName: "hintMaxLength", isSignal: true, isRequired: false, transformFunction: null }, panelClasses: { classPropertyName: "panelClasses", publicName: "panelClasses", isSignal: true, isRequired: false, transformFunction: null }, _searchText: { classPropertyName: "_searchText", publicName: "_searchText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { _searchText: "_searchTextChange" }, host: { attributes: { "role": "combobox", "aria-autocomplete": "list", "aria-haspopup": "listbox" }, listeners: { "keydown": "_handleKeydown($event)", "focus": "focus()", "blur": "_onBlur()" }, properties: { "attr.tabindex": "disabled() ? -1 : tabIndex()", "attr.aria-controls": "overlayPanel().open() ? id() + \"-panel\" : null", "attr.aria-owns": "overlayPanel().open() ? id() + \"-panel\" : null", "attr.aria-expanded": "overlayPanel().open()", "attr.aria-label": "ariaLabel() || null", "attr.aria-labelledby": "ariaLabelledby() || null", "attr.aria-required": "required().toString()", "attr.aria-disabled": "disabled().toString()", "attr.aria-invalid": "hasErrorState()", "attr.aria-activedescendant": "_getAriaActiveDescendant()" } }, providers: [
|
|
1403
1403
|
{ provide: IDS_FORM_FIELD_CONTROL, useExisting: IdsAutocompleteComponent },
|
|
1404
1404
|
{ provide: IDS_OPTION_PARENT_COMPONENT, useExisting: IdsAutocompleteComponent },
|
|
1405
1405
|
{
|
|
@@ -1407,7 +1407,7 @@ class IdsAutocompleteComponent extends IdsFormFieldControl {
|
|
|
1407
1407
|
useExisting: forwardRef(() => IdsAutocompleteComponent),
|
|
1408
1408
|
multi: true,
|
|
1409
1409
|
},
|
|
1410
|
-
], viewQueries: [{ propertyName: "options", predicate: IdsOptionComponent, descendants: true, isSignal: true }, { propertyName: "_panel", first: true, predicate: ["
|
|
1410
|
+
], viewQueries: [{ propertyName: "options", predicate: IdsOptionComponent, descendants: true, isSignal: true }, { propertyName: "overlayPanel", first: true, predicate: IdsOverlayPanelComponent, descendants: true, isSignal: true }, { propertyName: "_panel", first: true, predicate: ["overlay"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "_inputElemment", first: true, predicate: ["fallbackOverlayOrigin"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@let isLoading = _resource.isLoading();\n@let optionsLength = _resource.value().length;\n@let maxOptionsLength = maxLength();\n\n<input\n #fallbackOverlayOrigin=\"cdkOverlayOrigin\"\n cdkOverlayOrigin\n idsInput\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [required]=\"false\"\n [(ngModel)]=\"_searchText\"\n (click)=\"_onInputClick()\"\n/>\n@if (_searchText().length > 0) {\n <div idsFormFieldAction>\n <button\n type=\"button\"\n idsIconButton\n appearance=\"standard\"\n variant=\"surface\"\n size=\"dense\"\n [attr.aria-label]=\"ariaLabelClearButton()\"\n [idsTooltip]=\"ariaLabelClearButton()\"\n [idsTooltipDisabled]=\"!ariaLabelClearButton() || disabled()\"\n [idsTooltipIgnoreClipped]=\"true\"\n [disabled]=\"disabled()\"\n (click)=\"clear()\"\n >\n <ids-icon alt=\"\" aria-hidden=\"true\" fontIcon=\"close\" />\n </button>\n </div>\n}\n@if (!isLoading && optionsLength > 0) {\n <div idsFormFieldAction>\n <button\n type=\"button\"\n idsIconButton\n appearance=\"standard\"\n variant=\"surface\"\n size=\"dense\"\n [attr.aria-label]=\"ariaLabelToggleButton()\"\n [idsTooltip]=\"ariaLabelToggleButton()\"\n [idsTooltipDisabled]=\"!ariaLabelToggleButton() || disabled()\"\n [idsTooltipIgnoreClipped]=\"true\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\"\n >\n <ids-icon alt=\"\" aria-hidden=\"true\" [fontIcon]=\"overlay.open() ? 'chevron-up' : 'chevron-down'\" />\n </button>\n </div>\n}\n@if (isLoading) {\n <div idsFormFieldAction>\n <ids-spinner sizeCollection=\"small\" size=\"compact\" variant=\"surface\" [isTrack]=\"true\" [aria-label]=\"hintLoading()\" />\n </div>\n}\n<ids-overlay-panel\n #overlay\n variant=\"light\"\n [id]=\"id() + '-panel'\"\n [origin]=\"_preferredOverlayOrigin || fallbackOverlayOrigin\"\n [size]=\"parentSize()\"\n [width]=\"_overlayWidth\"\n [panelClasses]=\"_panelClasses()\"\n>\n @let showHintLoading = isLoading;\n @let showHintMinChars = _searchText().length < minChars();\n @let showHintMaxLength = maxOptionsLength && optionsLength > maxOptionsLength;\n @let showHintNoResults = optionsLength === 0;\n\n @if (showHintLoading || showHintMinChars || showHintMaxLength || showHintNoResults) {\n <div class=\"ids-overlay-panel__autocomplete-message\">\n <ids-option disabled>\n @if (showHintLoading && !showHintMinChars) {\n {{ hintLoading() }}\n } @else if (showHintMinChars) {\n {{ hintMinChars() }}\n } @else if (showHintMaxLength) {\n {{ hintMaxLength() }}\n } @else if (showHintNoResults) {\n {{ hintNoResults() }}\n }\n </ids-option>\n </div>\n } @else {\n @for (option of _resource.value(); track $index) {\n <ids-option [value]=\"option\">{{ option }}</ids-option>\n }\n }\n</ids-overlay-panel>\n", dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IdsFormFieldActionDirective, selector: "[idsFormFieldAction]" }, { kind: "directive", type: IdsInputDirective, selector: "input[idsInput][ngModel]:not([formControl]):not([formControlName]),\n input[idsInput][formControl]:not([ngModel]):not([formControlName]),\n input[idsInput][formControlName]:not([ngModel]):not([formControl]),\n textarea[idsInput][ngModel]:not([formControl]):not([formControlName]),\n textarea[idsInput][formControl]:not([ngModel]):not([formControlName]),\n textarea[idsInput][formControlName]:not([ngModel]):not([formControl])", inputs: ["name", "type", "errorStateMatcher", "successStateMatcher"], exportAs: ["idsInput"] }, { kind: "component", type: IdsIconComponent, selector: "ids-icon", inputs: ["size", "sizeCollection", "variant", "fontIcon", "svgIcon", "aria-hidden"] }, { kind: "component", type: IdsIconButtonComponent, selector: "button[idsIconButton], a[idsIconButton]", inputs: ["appearance", "size", "variant", "disabled"] }, { kind: "component", type: IdsOverlayPanelComponent, selector: "ids-overlay-panel", inputs: ["open", "origin", "positions", "appearance", "size", "variant", "panelClasses", "width"], outputs: ["openChange"] }, { kind: "component", type: IdsOptionComponent, selector: "ids-option", inputs: ["value", "viewValue", "disabled"], outputs: ["onSelectionChange"] }, { kind: "component", type: IdsSpinnerComponent, selector: "ids-spinner", inputs: ["size", "sizeCollection", "variant", "isTrack", "aria-label"] }, { kind: "directive", type: IdsTooltipDirective, selector: "[idsTooltip]", inputs: ["idsTooltip", "idsTooltipPosition", "idsTooltipSize", "idsTooltipVariant", "idsTooltipShowDelay", "idsTooltipHideDelay", "idsTooltipDisabled", "idsTooltipTouchGestures", "idsTooltipTextAlign", "idsTooltipClass", "idsTooltipShowPointer", "idsTooltipIgnoreClipped"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1411
1411
|
}
|
|
1412
1412
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: IdsAutocompleteComponent, decorators: [{
|
|
1413
1413
|
type: Component,
|
|
@@ -1437,9 +1437,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
1437
1437
|
'aria-autocomplete': 'list',
|
|
1438
1438
|
'aria-haspopup': 'listbox',
|
|
1439
1439
|
'[attr.tabindex]': 'disabled() ? -1 : tabIndex()',
|
|
1440
|
-
'[attr.aria-controls]': '
|
|
1441
|
-
'[attr.aria-owns]': '
|
|
1442
|
-
'[attr.aria-expanded]': '
|
|
1440
|
+
'[attr.aria-controls]': 'overlayPanel().open() ? id() + "-panel" : null',
|
|
1441
|
+
'[attr.aria-owns]': 'overlayPanel().open() ? id() + "-panel" : null',
|
|
1442
|
+
'[attr.aria-expanded]': 'overlayPanel().open()',
|
|
1443
1443
|
'[attr.aria-label]': 'ariaLabel() || null',
|
|
1444
1444
|
'[attr.aria-labelledby]': 'ariaLabelledby() || null',
|
|
1445
1445
|
'[attr.aria-required]': 'required().toString()',
|
|
@@ -1449,7 +1449,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
1449
1449
|
'(keydown)': '_handleKeydown($event)',
|
|
1450
1450
|
'(focus)': 'focus()',
|
|
1451
1451
|
'(blur)': '_onBlur()',
|
|
1452
|
-
}, template: "@let isLoading = _resource.isLoading();\n@let optionsLength = _resource.value().length;\n@let maxOptionsLength = maxLength();\n\n<input\n #fallbackOverlayOrigin=\"cdkOverlayOrigin\"\n cdkOverlayOrigin\n idsInput\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [required]=\"false\"\n [(ngModel)]=\"_searchText\"\n (click)=\"_onInputClick()\"\n/>\n@if (_searchText().length > 0) {\n <div idsFormFieldAction>\n <button\n type=\"button\"\n idsIconButton\n appearance=\"standard\"\n variant=\"surface\"\n size=\"dense\"\n [attr.aria-label]=\"ariaLabelClearButton()\"\n [idsTooltip]=\"ariaLabelClearButton()\"\n [idsTooltipDisabled]=\"!ariaLabelClearButton() || disabled()\"\n [idsTooltipIgnoreClipped]=\"true\"\n [disabled]=\"disabled()\"\n (click)=\"clear()\"\n >\n <ids-icon alt=\"\" aria-hidden=\"true\" fontIcon=\"close\" />\n </button>\n </div>\n}\n@if (!isLoading && optionsLength > 0) {\n <div idsFormFieldAction>\n <button\n type=\"button\"\n idsIconButton\n appearance=\"standard\"\n variant=\"surface\"\n size=\"dense\"\n [attr.aria-label]=\"ariaLabelToggleButton()\"\n [idsTooltip]=\"ariaLabelToggleButton()\"\n [idsTooltipDisabled]=\"!ariaLabelToggleButton() || disabled()\"\n [idsTooltipIgnoreClipped]=\"true\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\"\n >\n <ids-icon alt=\"\" aria-hidden=\"true\" [fontIcon]=\"
|
|
1452
|
+
}, template: "@let isLoading = _resource.isLoading();\n@let optionsLength = _resource.value().length;\n@let maxOptionsLength = maxLength();\n\n<input\n #fallbackOverlayOrigin=\"cdkOverlayOrigin\"\n cdkOverlayOrigin\n idsInput\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [required]=\"false\"\n [(ngModel)]=\"_searchText\"\n (click)=\"_onInputClick()\"\n/>\n@if (_searchText().length > 0) {\n <div idsFormFieldAction>\n <button\n type=\"button\"\n idsIconButton\n appearance=\"standard\"\n variant=\"surface\"\n size=\"dense\"\n [attr.aria-label]=\"ariaLabelClearButton()\"\n [idsTooltip]=\"ariaLabelClearButton()\"\n [idsTooltipDisabled]=\"!ariaLabelClearButton() || disabled()\"\n [idsTooltipIgnoreClipped]=\"true\"\n [disabled]=\"disabled()\"\n (click)=\"clear()\"\n >\n <ids-icon alt=\"\" aria-hidden=\"true\" fontIcon=\"close\" />\n </button>\n </div>\n}\n@if (!isLoading && optionsLength > 0) {\n <div idsFormFieldAction>\n <button\n type=\"button\"\n idsIconButton\n appearance=\"standard\"\n variant=\"surface\"\n size=\"dense\"\n [attr.aria-label]=\"ariaLabelToggleButton()\"\n [idsTooltip]=\"ariaLabelToggleButton()\"\n [idsTooltipDisabled]=\"!ariaLabelToggleButton() || disabled()\"\n [idsTooltipIgnoreClipped]=\"true\"\n [disabled]=\"disabled()\"\n (click)=\"toggle()\"\n >\n <ids-icon alt=\"\" aria-hidden=\"true\" [fontIcon]=\"overlay.open() ? 'chevron-up' : 'chevron-down'\" />\n </button>\n </div>\n}\n@if (isLoading) {\n <div idsFormFieldAction>\n <ids-spinner sizeCollection=\"small\" size=\"compact\" variant=\"surface\" [isTrack]=\"true\" [aria-label]=\"hintLoading()\" />\n </div>\n}\n<ids-overlay-panel\n #overlay\n variant=\"light\"\n [id]=\"id() + '-panel'\"\n [origin]=\"_preferredOverlayOrigin || fallbackOverlayOrigin\"\n [size]=\"parentSize()\"\n [width]=\"_overlayWidth\"\n [panelClasses]=\"_panelClasses()\"\n>\n @let showHintLoading = isLoading;\n @let showHintMinChars = _searchText().length < minChars();\n @let showHintMaxLength = maxOptionsLength && optionsLength > maxOptionsLength;\n @let showHintNoResults = optionsLength === 0;\n\n @if (showHintLoading || showHintMinChars || showHintMaxLength || showHintNoResults) {\n <div class=\"ids-overlay-panel__autocomplete-message\">\n <ids-option disabled>\n @if (showHintLoading && !showHintMinChars) {\n {{ hintLoading() }}\n } @else if (showHintMinChars) {\n {{ hintMinChars() }}\n } @else if (showHintMaxLength) {\n {{ hintMaxLength() }}\n } @else if (showHintNoResults) {\n {{ hintNoResults() }}\n }\n </ids-option>\n </div>\n } @else {\n @for (option of _resource.value(); track $index) {\n <ids-option [value]=\"option\">{{ option }}</ids-option>\n }\n }\n</ids-overlay-panel>\n" }]
|
|
1453
1453
|
}], ctorParameters: () => [] });
|
|
1454
1454
|
|
|
1455
1455
|
class IdsFieldsetRowComponent extends ComponentBase {
|