@eui/components 16.2.5 → 16.2.6-snapshot-1699526694806
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/components/EuiAutocompleteComponent.html +1 -1
- package/docs/components/EuiTreeComponent.html +1 -82
- package/docs/dependencies.html +2 -2
- package/docs/js/menu-wc.js +3 -3
- package/docs/js/menu-wc_es5.js +1 -1
- package/docs/js/search/search_index.js +2 -2
- package/docs/miscellaneous/variables.html +14 -14
- package/esm2022/eui-autocomplete/eui-autocomplete.component.mjs +3 -3
- package/esm2022/eui-tree/eui-tree.component.mjs +10 -15
- package/eui-tree/eui-tree.component.d.ts +1 -4
- package/eui-tree/eui-tree.component.d.ts.map +1 -1
- package/fesm2022/eui-components-eui-autocomplete.mjs +2 -2
- package/fesm2022/eui-components-eui-autocomplete.mjs.map +1 -1
- package/fesm2022/eui-components-eui-tree.mjs +9 -14
- package/fesm2022/eui-components-eui-tree.mjs.map +1 -1
- package/package.json +126 -126
|
@@ -43,8 +43,6 @@ export declare class EuiTreeComponent implements OnInit, OnChanges, OnDestroy {
|
|
|
43
43
|
set isRecursiveSelection(value: BooleanInput);
|
|
44
44
|
get isRecursiveParentSelection(): boolean;
|
|
45
45
|
set isRecursiveParentSelection(value: BooleanInput);
|
|
46
|
-
get showUnderlinedLinks(): boolean;
|
|
47
|
-
set showUnderlinedLinks(value: BooleanInput);
|
|
48
46
|
get showLines(): boolean;
|
|
49
47
|
set showLines(value: BooleanInput);
|
|
50
48
|
get autoTranslate(): boolean;
|
|
@@ -69,7 +67,6 @@ export declare class EuiTreeComponent implements OnInit, OnChanges, OnDestroy {
|
|
|
69
67
|
private _isSingleSelect;
|
|
70
68
|
private _isRecursiveSelection;
|
|
71
69
|
private _isRecursiveParentSelection;
|
|
72
|
-
private _showUnderlinedLinks;
|
|
73
70
|
private _showLines;
|
|
74
71
|
private _autoTranslate;
|
|
75
72
|
private _highlightPath;
|
|
@@ -133,7 +130,7 @@ export declare class EuiTreeComponent implements OnInit, OnChanges, OnDestroy {
|
|
|
133
130
|
private checkIfMultiLevel;
|
|
134
131
|
private checkIfCurrentScrollable;
|
|
135
132
|
static ɵfac: i0.ɵɵFactoryDeclaration<EuiTreeComponent, never>;
|
|
136
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<EuiTreeComponent, "eui-tree", never, { "e2eAttr": { "alias": "e2eAttr"; "required": false; }; "nodes": { "alias": "nodes"; "required": false; }; "nodeTemplateRef": { "alias": "nodeTemplateRef"; "required": false; }; "nodeContentMetadataTemplateRef": { "alias": "nodeContentMetadataTemplateRef"; "required": false; }; "rightContextMenuTemplateRef": { "alias": "rightContextMenuTemplateRef"; "required": false; }; "expandedIconClass": { "alias": "expandedIconClass"; "required": false; }; "collapsedIconClass": { "alias": "collapsedIconClass"; "required": false; }; "expandedSvgIconClass": { "alias": "expandedSvgIconClass"; "required": false; }; "collapsedSvgIconClass": { "alias": "collapsedSvgIconClass"; "required": false; }; "isClickTogglingNode": { "alias": "isClickTogglingNode"; "required": false; }; "isMultiselect": { "alias": "isMultiselect"; "required": false; }; "isSingleSelect": { "alias": "isSingleSelect"; "required": false; }; "isRecursiveSelection": { "alias": "isRecursiveSelection"; "required": false; }; "isRecursiveParentSelection": { "alias": "isRecursiveParentSelection"; "required": false; }; "
|
|
133
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<EuiTreeComponent, "eui-tree", never, { "e2eAttr": { "alias": "e2eAttr"; "required": false; }; "nodes": { "alias": "nodes"; "required": false; }; "nodeTemplateRef": { "alias": "nodeTemplateRef"; "required": false; }; "nodeContentMetadataTemplateRef": { "alias": "nodeContentMetadataTemplateRef"; "required": false; }; "rightContextMenuTemplateRef": { "alias": "rightContextMenuTemplateRef"; "required": false; }; "expandedIconClass": { "alias": "expandedIconClass"; "required": false; }; "collapsedIconClass": { "alias": "collapsedIconClass"; "required": false; }; "expandedSvgIconClass": { "alias": "expandedSvgIconClass"; "required": false; }; "collapsedSvgIconClass": { "alias": "collapsedSvgIconClass"; "required": false; }; "isClickTogglingNode": { "alias": "isClickTogglingNode"; "required": false; }; "isMultiselect": { "alias": "isMultiselect"; "required": false; }; "isSingleSelect": { "alias": "isSingleSelect"; "required": false; }; "isRecursiveSelection": { "alias": "isRecursiveSelection"; "required": false; }; "isRecursiveParentSelection": { "alias": "isRecursiveParentSelection"; "required": false; }; "showLines": { "alias": "showLines"; "required": false; }; "autoTranslate": { "alias": "autoTranslate"; "required": false; }; "highlightPath": { "alias": "highlightPath"; "required": false; }; }, { "selectionChange": "selectionChange"; "nodeClick": "nodeClick"; "nodeToggle": "nodeToggle"; }, never, never, false, never>;
|
|
137
134
|
}
|
|
138
135
|
export declare class EuiTreeModule {
|
|
139
136
|
static ɵfac: i0.ɵɵFactoryDeclaration<EuiTreeModule, never>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"eui-tree.component.d.ts","sourceRoot":"","sources":["../../eui-tree/eui-tree.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAKH,YAAY,EAGZ,WAAW,EACX,iBAAiB,EACjB,aAAa,EACb,MAAM,EACN,SAAS,EAET,SAAS,EAEZ,MAAM,eAAe,CAAC;AAGvB,OAAO,EAEH,aAAa,EACb,aAAa,EAEb,oBAAoB,EACpB,+BAA+B,EAC/B,uBAAuB,EAE1B,MAAM,kBAAkB,CAAC;AAS1B,OAAO,EAAE,iBAAiB,EAAiB,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC9E,OAAO,EAAE,eAAe,EAAkB,MAAM,0BAA0B,CAAC;AAC3E,OAAO,EAAE,YAAY,EAAyB,MAAM,uBAAuB,CAAC;AAE5E,OAAO,EAAmB,gBAAgB,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;;;;;;;;;;;;;;;AAG1F,qBAOa,gBAAiB,YAAW,MAAM,EAAE,SAAS,EAAE,SAAS;
|
|
1
|
+
{"version":3,"file":"eui-tree.component.d.ts","sourceRoot":"","sources":["../../eui-tree/eui-tree.component.ts"],"names":[],"mappings":"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"}
|
|
@@ -694,11 +694,11 @@ class EuiAutocompleteComponent extends BaseDirective {
|
|
|
694
694
|
});
|
|
695
695
|
}
|
|
696
696
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuiAutocompleteComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.NgControl, optional: true, self: true }, { token: i2.ScrollDispatcher }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
697
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuiAutocompleteComponent, selector: "eui-autocomplete, input[euiAutocomplete]", inputs: { toggleLinkMoreLabel: "toggleLinkMoreLabel", toggleLinkLessLabel: "toggleLinkLessLabel", autocompleteData: "autocompleteData", autocompleteDataSelected: "autocompleteDataSelected", chipsSortOrder: "chipsSortOrder", itemsSortOrder: "itemsSortOrder", placeholder: "placeholder", matching: "matching", chipsPosition: "chipsPosition", panelWidth: "panelWidth", visibleOptions: "visibleOptions", classList: "classList", groupBy: "groupBy", dragAndDropSourceName: "dragAndDropSourceName", dragAndDropConnectedTo: "dragAndDropConnectedTo", hasChips: "hasChips", isGrid: "isGrid", async: "async", addOnBlur: "addOnBlur", isFreeValueAllowed: "isFreeValueAllowed", isDuplicateValueAllowed: "isDuplicateValueAllowed", isLoading: "isLoading", isChipsRemovable: "isChipsRemovable", maxVisibleChipsCount: "maxVisibleChipsCount", chipsLabelTruncateCount: "chipsLabelTruncateCount", isMaxVisibleChipsOpened: "isMaxVisibleChipsOpened", readonly: "readonly", isChipsSorted: "isChipsSorted", isItemsSorted: "isItemsSorted", isChipsDragAndDrop: "isChipsDragAndDrop", isForceSelection: "isForceSelection", autoActiveFirstOption: "autoActiveFirstOption" }, outputs: { closed: "closed", opened: "opened", selectionChanged: "selectionChanged", itemAdded: "itemAdded", itemRemoved: "itemRemoved", inputChanged: "inputChanged", chipDragStarted: "chipDragStarted", chipDragReleased: "chipDragReleased", chipDropped: "chipDropped", clear: "clear", close: "close", open: "open", blur: "blur", selectionChange: "selectionChange", itemAdd: "itemAdd", itemRemove: "itemRemove", inputChange: "inputChange", chipDragStart: "chipDragStart", chipDragRelease: "chipDragRelease", chipDrop: "chipDrop" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "templates", predicate: EuiTemplateDirective }], viewQueries: [{ propertyName: "autocompleteInput", first: true, predicate: ["autocompleteInput"], descendants: true, read: ElementRef }, { propertyName: "autocompleteInputTrigger", first: true, predicate: ["autocompleteInputTrigger"], descendants: true, read: MatAutocompleteTrigger }, { propertyName: "matAutocomplete", first: true, predicate: ["auto"], descendants: true }, { propertyName: "chipList", first: true, predicate: ["chipList"], descendants: true }, { propertyName: "virtualScrolling", first: true, predicate: ["virtualScrolling"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"eui-autocomplete__container\" matAutocompleteOrigin #origin=\"matAutocompleteOrigin\">\n <div class=\"eui-autocomplete__wrapper eui-autocomplete__wrapper--{{ chipsPosition }}\">\n <ng-template [ngIf]=\"chipsPosition === 'bottom'\">\n <ng-container *ngTemplateOutlet=\"field\"></ng-container>\n </ng-template>\n\n <ng-container *ngIf=\"hasChips\">\n <eui-chip-list\n #chipList\n [chips]=\"chips\"\n [isGrid]=\"isChipsGrid\"\n [isChipsDragAndDrop]=\"isChipsDragAndDrop\"\n [isChipsRemovable]=\"isChipsRemovable && !readonly\"\n [isChipsSorted]=\"isChipsSorted\"\n [chipsSortOrder]=\"chipsSortOrder\"\n [maxVisibleChipsCount]=\"maxVisibleChipsCount\"\n [isMaxVisibleChipsOpened]=\"isMaxVisibleChipsOpened\"\n [toggleLinkMoreLabel]=\"toggleLinkMoreLabel\"\n [toggleLinkLessLabel]=\"toggleLinkLessLabel\"\n [chipsLabelTruncateCount]=\"chipsLabelTruncateCount\"\n [dragAndDropSourceName]=\"dragAndDropSourceName\"\n [dragAndDropConnectedTo]=\"dragAndDropConnectedTo\"\n (chipDropped)=\"onChipDropped($event)\"\n (chipDragStarted)=\"onChipDragStarted($event)\"\n (chipDragReleased)=\"onChipDragReleased($event)\"\n (chipRemove)=\"onChipRemove($event)\"\n (chiplistFocus)=\"onChipListFocus()\">\n <euiChipListAppendContent>\n <ng-template [ngIf]=\"chipsPosition === 'inside'\">\n <ng-container *ngTemplateOutlet=\"field\"></ng-container>\n </ng-template>\n </euiChipListAppendContent>\n </eui-chip-list>\n </ng-container>\n\n <ng-template [ngIf]=\"chipsPosition === 'top' || !hasChips\">\n <ng-container *ngTemplateOutlet=\"field\"></ng-container>\n </ng-template>\n\n <ng-template #field>\n <span class=\"eui-autocomplete__field-wrapper\">\n <ng-container *ngIf=\"!hasChips\">\n <input\n [euiClearable]=\"!readonly && !isLoading && !isDisabled\"\n [euiLoading]=\"isLoading\"\n euiInputText\n #autocompleteInput\n #autocompleteInputTrigger\n placeholder=\"{{ placeholder }}\"\n [matAutocompleteDisabled]=\"readonly\"\n [formControl]=\"autocompleteControl\"\n [matAutocomplete]=\"auto\"\n [readonly]=\"readonly\"\n [attr.aria-label]=\"placeholder ? placeholder : 'Autocomplete Input Field'\"\n (clear)=\"onClear()\"\n (focusout)=\"onFocusOut()\"\n (focus)=\"onFocus()\"\n role=\"combobox\"\n aria-autocomplete=\"both\"\n aria-haspopup=\"true\"\n aria-controls=\"autocompleteId\" />\n </ng-container>\n <ng-container *ngIf=\"hasChips\">\n <input\n [euiClearable]=\"!readonly && !isLoading && !isDisabled\"\n [euiLoading]=\"isLoading\"\n euiInputText\n #autocompleteInput\n #autocompleteInputTrigger\n placeholder=\"{{ placeholder }}\"\n [matAutocompleteDisabled]=\"readonly\"\n [formControl]=\"autocompleteControl\"\n [matAutocomplete]=\"auto\"\n [matAutocompleteConnectedTo]=\"chipsPosition === 'inside' ? origin : null\"\n [readonly]=\"readonly\"\n [attr.aria-label]=\"placeholder ? placeholder : 'Autocomplete Input Field'\"\n (clear)=\"onClear()\"\n (focusout)=\"onFocusOut(); addOnBlurHandler($event)\"\n (focus)=\"onFocus()\"\n (keydown.enter)=\"addOnEnterHandler()\"\n (keydown.backspace)=\"onKeyDownBackspace()\"\n role=\"combobox\"\n aria-autocomplete=\"both\"\n aria-haspopup=\"true\"\n aria-controls=\"autocompleteId\" />\n </ng-container>\n\n <mat-autocomplete\n [id]=\"autocompleteId\"\n #auto=\"matAutocomplete\"\n [panelWidth]=\"panelWidth === 'auto' ? null : panelWidth\"\n [class]=\"classList\"\n [autoActiveFirstOption]=\"autoActiveFirstOption\"\n (closed)=\"onClose()\"\n (opened)=\"onOpen()\"\n (optionSelected)=\"onOptionSelected($event)\">\n <ng-container *ngIf=\"groupBy\">\n <cdk-virtual-scroll-viewport\n #virtualScrolling\n [itemSize]=\"itemSize\"\n minBufferPx=\"500\"\n maxBufferPx=\"750\"\n [style.min-height]=\"cdkVirtualScrollViewport + 'px'\">\n <ng-container *ngFor=\"let distinctOptionGroup of distinctOptionGroups\">\n <mat-optgroup\n [class.eui-autocomplete__optgroup--custom]=\"autocompleteOptGroupTemplate\"\n *ngIf=\"(groupedItems[distinctOptionGroup] | async).length > 0\"\n [label]=\"distinctOptionGroup\">\n <ng-container *ngIf=\"autocompleteOptGroupTemplate\">\n <div class=\"eui-autocomplete__optgroup--custom-optgroup-wrapper\">\n <ng-template\n [ngTemplateOutlet]=\"autocompleteOptGroupTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: { label: distinctOptionGroup } }\"></ng-template>\n </div>\n </ng-container>\n <mat-option\n *ngFor=\"let groupedItem of groupedItems[distinctOptionGroup] | async; trackBy: trackByFn\"\n [disabled]=\"groupedItem.isDisabled\"\n [class]=\"\n groupedItem.typeClass\n ? 'mat-option eui-autocomplete__option eui-autocomplete__option--' + groupedItem.typeClass\n : 'mat-option eui-autocomplete__option'\n \"\n [class.eui-autocomplete__option--custom]=\"autocompleteOptionTemplate\"\n [value]=\"groupedItem\">\n <span *ngIf=\"groupedItem.iconClass\" class=\"{{ groupedItem.iconClass }}\"></span>\n <ng-container *ngIf=\"!autocompleteOptionTemplate\">\n {{ groupedItem.label }}\n </ng-container>\n <ng-container *ngIf=\"autocompleteOptionTemplate\">\n <ng-template\n [ngTemplateOutlet]=\"autocompleteOptionTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: groupedItem }\"></ng-template>\n </ng-container>\n </mat-option>\n </mat-optgroup>\n </ng-container>\n </cdk-virtual-scroll-viewport>\n </ng-container>\n <ng-container *ngIf=\"!groupBy\">\n <cdk-virtual-scroll-viewport\n #virtualScrolling\n [itemSize]=\"itemSize\"\n minBufferPx=\"500\"\n maxBufferPx=\"750\"\n [style.min-height]=\"cdkVirtualScrollViewport + 'px'\">\n <mat-option\n *cdkVirtualFor=\"let autocompleteOption of autocompleteOptions | async; let i = index; trackBy: trackByFn\"\n [disabled]=\"autocompleteOption.isDisabled\"\n [class]=\"\n autocompleteOption.typeClass\n ? 'mat-option eui-autocomplete__option eui-autocomplete__option--' + autocompleteOption.typeClass\n : 'mat-option eui-autocomplete__option'\n \"\n [class.eui-autocomplete__option--custom]=\"autocompleteOptionTemplate\"\n [class.mat-mdc-option-active]=\"i === selectedOptionIndex\"\n [class.mdc-list-item--selected]=\"false\"\n [value]=\"autocompleteOption\">\n <span *ngIf=\"autocompleteOption.iconClass\" class=\"{{ autocompleteOption.iconClass }}\"></span>\n <ng-container *ngIf=\"!autocompleteOptionTemplate\">{{ autocompleteOption.label }}</ng-container>\n <ng-container *ngIf=\"autocompleteOptionTemplate\">\n <ng-template\n [ngTemplateOutlet]=\"autocompleteOptionTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: autocompleteOption }\"></ng-template>\n </ng-container>\n </mat-option>\n </cdk-virtual-scroll-viewport>\n </ng-container>\n </mat-autocomplete>\n </span>\n </ng-template>\n </div>\n</div>\n", styles: [".eui-autocomplete{--eui-autocomplete-input-width: var(--eui-base-spacing-3xl);width:100%}.eui-autocomplete__container .eui-autocomplete__field-wrapper{display:flex;position:relative;width:100%}.eui-autocomplete__container .eui-autocomplete__field-wrapper input{min-width:var(--eui-autocomplete-input-width)}.eui-autocomplete--no-max-height{max-height:none!important}.eui-autocomplete__option{align-items:center;border-bottom:1px solid var(--eui-base-color-grey-10);border-left:var(--eui-border-state-width) solid transparent;display:flex;height:auto!important;min-height:var(--eui-base-spacing-3xl)!important}.eui-autocomplete__option .eui-icon,.eui-autocomplete__option .eui-icon-svg,.eui-autocomplete__option .eui-flag-icon{margin-right:var(--eui-base-spacing-xs)}.eui-autocomplete__option .mat-pseudo-checkbox-checked,.eui-autocomplete__option .mat-pseudo-checkbox-indeterminate,.eui-autocomplete__option .mat-accent .mat-pseudo-checkbox-checked,.eui-autocomplete__option .mat-accent .mat-pseudo-checkbox-indeterminate{background:transparent}.eui-autocomplete .eui-autocomplete__wrapper--inside .eui-input-text{border:0}.eui-autocomplete .eui-autocomplete__wrapper--inside euichiplistappendcontent{display:inline-flex;flex-grow:1}.eui-autocomplete .eui-autocomplete__wrapper--inside .eui-chip-list-container{width:100%}.eui-autocomplete .eui-autocomplete__wrapper--inside .eui-chip-list-container .eui-chip-list__list{flex-wrap:inherit!important;width:100%}.eui-autocomplete--has-chips .eui-input-text[readonly]{display:none}.mat-mdc-autocomplete-panel{padding:0!important}.mat-mdc-autocomplete-panel .mat-mdc-optgroup-label{align-items:center;background-color:var(--eui-base-color-grey-10);color:var(--eui-base-color-grey-80);display:flex;font-family:var(--eui-base-font-family);font-size:var(--eui-base-font-size);font-weight:700;margin-bottom:0}.mat-mdc-autocomplete-panel .eui-autocomplete__optgroup--custom .mat-mdc-optgroup-label{display:none}.mat-mdc-autocomplete-panel .eui-autocomplete__optgroup--custom-optgroup-wrapper{align-items:center;background-color:var(--eui-base-color-grey-10);color:var(--eui-base-color-grey-80);display:flex;font-size:var(--eui-base-font-size);font-weight:700;height:auto;line-height:var(--eui-base-spacing-3xl);min-height:var(--eui-base-spacing-3xl);padding:0 var(--eui-base-spacing-s)}.mat-mdc-autocomplete-panel .eui-autocomplete__optgroup--custom-optgroup-wrapper .eui-icon{margin-right:var(--eui-base-spacing-2xs)}.mat-mdc-autocomplete-panel .mdc-list-item--selected{background:none!important}.mat-mdc-autocomplete-panel .mdc-list-item--selected:hover{background:rgba(0,0,0,.04)!important}.mat-mdc-autocomplete-panel .mdc-list-item--selected .mdc-list-item__primary-text{color:inherit!important}.eui-autocomplete--primary input{background-color:var(--eui-base-color-primary-10)}.eui-autocomplete--secondary input{background-color:var(--eui-base-color-grey-10)}.eui-autocomplete--info input{background-color:var(--eui-base-color-info-10)}.eui-autocomplete--success input{background-color:var(--eui-base-color-success-10)}.eui-autocomplete--warning input{background-color:var(--eui-base-color-warning-10)}.eui-autocomplete--danger input{background-color:var(--eui-base-color-danger-10)}.eui-autocomplete--accent input{background-color:var(--eui-base-color-accent-10)}.eui-autocomplete__wrapper--bottom .eui-autocomplete__field-wrapper{display:block;margin-bottom:var(--eui-base-spacing-2xs)}.eui-autocomplete__wrapper--inside{background-color:var(--eui-base-color-white);border:1px solid var(--eui-base-color-grey-50);border-radius:var(--eui-base-border-radius);padding:var(--eui-base-spacing-2xs) var(--eui-base-spacing-2xs) 0 var(--eui-base-spacing-2xs)}.eui-autocomplete__wrapper--inside .mat-chip-list .mat-chip-list-wrapper,.eui-autocomplete__wrapper--inside .mat-chip-list .mat-standard-chip{align-items:center;margin-bottom:0}.eui-autocomplete__wrapper--inside .mat-autocomplete-trigger{background:none;border:0}.eui-autocomplete__wrapper--inside .mat-autocomplete-trigger:focus{border:0;box-shadow:var(--eui-base-shadow-0)}.eui-autocomplete__option--primary{border-left-color:var(--eui-base-color-primary-100)}.eui-autocomplete__option--secondary{border-left-color:var(--eui-base-color-grey-25)}.eui-autocomplete__option--info{border-left-color:var(--eui-base-color-info-100)}.eui-autocomplete__option--success{border-left-color:var(--eui-base-color-success-100)}.eui-autocomplete__option--warning{border-left-color:var(--eui-base-color-warning-100)}.eui-autocomplete__option--danger{border-left-color:var(--eui-base-color-danger-100)}.eui-autocomplete__option--accent{border-left-color:var(--eui-base-color-accent-100)}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i5.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i4.MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"] }, { kind: "component", type: i6.EuiChipListComponent, selector: "eui-chip-list, div[euiChipList], ul[euiChipList]", inputs: ["chips", "toggleLinkMoreLabel", "toggleLinkLessLabel", "chipsSortOrder", "dragAndDropSourceName", "dragAndDropConnectedTo", "ariaLabel", "dropListOrientation", "isSquared", "isChipsRemovable", "maxVisibleChipsCount", "chipsLabelTruncateCount", "isMaxVisibleChipsOpened", "isChipsSorted", "isChipsDragAndDrop", "isGrid"], outputs: ["chipsInit", "chipRemove", "chipDragStarted", "chipDragReleased", "chipDropped", "chiplistFocus"] }, { kind: "directive", type: i6.EuiChipListAppendContentDirective, selector: "euiChipListAppendContent" }, { kind: "component", type: i7.EuiInputTextComponent, selector: "input[euiInputText]", inputs: ["class", "isInvalid"] }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
697
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuiAutocompleteComponent, selector: "eui-autocomplete, input[euiAutocomplete]", inputs: { toggleLinkMoreLabel: "toggleLinkMoreLabel", toggleLinkLessLabel: "toggleLinkLessLabel", autocompleteData: "autocompleteData", autocompleteDataSelected: "autocompleteDataSelected", chipsSortOrder: "chipsSortOrder", itemsSortOrder: "itemsSortOrder", placeholder: "placeholder", matching: "matching", chipsPosition: "chipsPosition", panelWidth: "panelWidth", visibleOptions: "visibleOptions", classList: "classList", groupBy: "groupBy", dragAndDropSourceName: "dragAndDropSourceName", dragAndDropConnectedTo: "dragAndDropConnectedTo", hasChips: "hasChips", isGrid: "isGrid", async: "async", addOnBlur: "addOnBlur", isFreeValueAllowed: "isFreeValueAllowed", isDuplicateValueAllowed: "isDuplicateValueAllowed", isLoading: "isLoading", isChipsRemovable: "isChipsRemovable", maxVisibleChipsCount: "maxVisibleChipsCount", chipsLabelTruncateCount: "chipsLabelTruncateCount", isMaxVisibleChipsOpened: "isMaxVisibleChipsOpened", readonly: "readonly", isChipsSorted: "isChipsSorted", isItemsSorted: "isItemsSorted", isChipsDragAndDrop: "isChipsDragAndDrop", isForceSelection: "isForceSelection", autoActiveFirstOption: "autoActiveFirstOption" }, outputs: { closed: "closed", opened: "opened", selectionChanged: "selectionChanged", itemAdded: "itemAdded", itemRemoved: "itemRemoved", inputChanged: "inputChanged", chipDragStarted: "chipDragStarted", chipDragReleased: "chipDragReleased", chipDropped: "chipDropped", clear: "clear", close: "close", open: "open", blur: "blur", selectionChange: "selectionChange", itemAdd: "itemAdd", itemRemove: "itemRemove", inputChange: "inputChange", chipDragStart: "chipDragStart", chipDragRelease: "chipDragRelease", chipDrop: "chipDrop" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "templates", predicate: EuiTemplateDirective }], viewQueries: [{ propertyName: "autocompleteInput", first: true, predicate: ["autocompleteInput"], descendants: true, read: ElementRef }, { propertyName: "autocompleteInputTrigger", first: true, predicate: ["autocompleteInputTrigger"], descendants: true, read: MatAutocompleteTrigger }, { propertyName: "matAutocomplete", first: true, predicate: ["auto"], descendants: true }, { propertyName: "chipList", first: true, predicate: ["chipList"], descendants: true }, { propertyName: "virtualScrolling", first: true, predicate: ["virtualScrolling"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"eui-autocomplete__container\" matAutocompleteOrigin #origin=\"matAutocompleteOrigin\">\n <div class=\"eui-autocomplete__wrapper eui-autocomplete__wrapper--{{ chipsPosition }}\">\n <ng-template [ngIf]=\"chipsPosition === 'bottom'\">\n <ng-container *ngTemplateOutlet=\"field\"></ng-container>\n </ng-template>\n\n <ng-container *ngIf=\"hasChips\">\n <eui-chip-list\n #chipList\n [chips]=\"chips\"\n [isGrid]=\"isChipsGrid\"\n [isChipsDragAndDrop]=\"isChipsDragAndDrop\"\n [isChipsRemovable]=\"isChipsRemovable && !readonly\"\n [isChipsSorted]=\"isChipsSorted\"\n [chipsSortOrder]=\"chipsSortOrder\"\n [maxVisibleChipsCount]=\"maxVisibleChipsCount\"\n [isMaxVisibleChipsOpened]=\"isMaxVisibleChipsOpened\"\n [toggleLinkMoreLabel]=\"toggleLinkMoreLabel\"\n [toggleLinkLessLabel]=\"toggleLinkLessLabel\"\n [chipsLabelTruncateCount]=\"chipsLabelTruncateCount\"\n [dragAndDropSourceName]=\"dragAndDropSourceName\"\n [dragAndDropConnectedTo]=\"dragAndDropConnectedTo\"\n (chipDropped)=\"onChipDropped($event)\"\n (chipDragStarted)=\"onChipDragStarted($event)\"\n (chipDragReleased)=\"onChipDragReleased($event)\"\n (chipRemove)=\"onChipRemove($event)\"\n (chiplistFocus)=\"onChipListFocus()\">\n <euiChipListAppendContent>\n <ng-template [ngIf]=\"chipsPosition === 'inside'\">\n <ng-container *ngTemplateOutlet=\"field\"></ng-container>\n </ng-template>\n </euiChipListAppendContent>\n </eui-chip-list>\n </ng-container>\n\n <ng-template [ngIf]=\"chipsPosition === 'top' || !hasChips\">\n <ng-container *ngTemplateOutlet=\"field\"></ng-container>\n </ng-template>\n\n <ng-template #field>\n <span class=\"eui-autocomplete__field-wrapper\">\n <ng-container *ngIf=\"!hasChips\">\n <input\n [euiClearable]=\"!readonly && !isLoading && !isDisabled\"\n [euiLoading]=\"isLoading\"\n euiInputText\n #autocompleteInput\n #autocompleteInputTrigger\n placeholder=\"{{ placeholder }}\"\n [matAutocompleteDisabled]=\"readonly\"\n [formControl]=\"autocompleteControl\"\n [matAutocomplete]=\"auto\"\n [readonly]=\"readonly\"\n [attr.aria-label]=\"placeholder ? placeholder : 'Autocomplete Input Field'\"\n (clear)=\"onClear()\"\n (focusout)=\"onFocusOut()\"\n (focus)=\"onFocus()\"\n role=\"combobox\"\n aria-autocomplete=\"both\"\n aria-haspopup=\"true\"\n aria-controls=\"autocompleteId\" />\n </ng-container>\n <ng-container *ngIf=\"hasChips\">\n <input\n [euiClearable]=\"!readonly && !isLoading && !isDisabled\"\n [euiLoading]=\"isLoading\"\n euiInputText\n #autocompleteInput\n #autocompleteInputTrigger\n placeholder=\"{{ placeholder }}\"\n [matAutocompleteDisabled]=\"readonly\"\n [formControl]=\"autocompleteControl\"\n [matAutocomplete]=\"auto\"\n [matAutocompleteConnectedTo]=\"chipsPosition === 'inside' ? origin : null\"\n [readonly]=\"readonly\"\n [attr.aria-label]=\"placeholder ? placeholder : 'Autocomplete Input Field'\"\n (clear)=\"onClear()\"\n (focusout)=\"onFocusOut(); addOnBlurHandler($event)\"\n (focus)=\"onFocus()\"\n (keydown.enter)=\"addOnEnterHandler()\"\n (keydown.backspace)=\"onKeyDownBackspace()\"\n role=\"combobox\"\n aria-autocomplete=\"both\"\n aria-haspopup=\"true\"\n aria-controls=\"autocompleteId\" />\n </ng-container>\n\n <mat-autocomplete\n [id]=\"autocompleteId\"\n #auto=\"matAutocomplete\"\n [panelWidth]=\"panelWidth === 'auto' ? null : panelWidth\"\n [class]=\"classList\"\n [autoActiveFirstOption]=\"autoActiveFirstOption\"\n [hideSingleSelectionIndicator]=\"true\"\n (closed)=\"onClose()\"\n (opened)=\"onOpen()\"\n (optionSelected)=\"onOptionSelected($event)\">\n <ng-container *ngIf=\"groupBy\">\n <cdk-virtual-scroll-viewport\n #virtualScrolling\n [itemSize]=\"itemSize\"\n minBufferPx=\"500\"\n maxBufferPx=\"750\"\n [style.min-height]=\"cdkVirtualScrollViewport + 'px'\">\n <ng-container *ngFor=\"let distinctOptionGroup of distinctOptionGroups\">\n <mat-optgroup\n [class.eui-autocomplete__optgroup--custom]=\"autocompleteOptGroupTemplate\"\n *ngIf=\"(groupedItems[distinctOptionGroup] | async).length > 0\"\n [label]=\"distinctOptionGroup\">\n <ng-container *ngIf=\"autocompleteOptGroupTemplate\">\n <div class=\"eui-autocomplete__optgroup--custom-optgroup-wrapper\">\n <ng-template\n [ngTemplateOutlet]=\"autocompleteOptGroupTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: { label: distinctOptionGroup } }\"></ng-template>\n </div>\n </ng-container>\n <mat-option\n *ngFor=\"let groupedItem of groupedItems[distinctOptionGroup] | async; trackBy: trackByFn\"\n [disabled]=\"groupedItem.isDisabled\"\n [class]=\"\n groupedItem.typeClass\n ? 'mat-option eui-autocomplete__option eui-autocomplete__option--' + groupedItem.typeClass\n : 'mat-option eui-autocomplete__option'\n \"\n [class.eui-autocomplete__option--custom]=\"autocompleteOptionTemplate\"\n [value]=\"groupedItem\">\n <span *ngIf=\"groupedItem.iconClass\" class=\"{{ groupedItem.iconClass }}\"></span>\n <ng-container *ngIf=\"!autocompleteOptionTemplate\">\n {{ groupedItem.label }}\n </ng-container>\n <ng-container *ngIf=\"autocompleteOptionTemplate\">\n <ng-template\n [ngTemplateOutlet]=\"autocompleteOptionTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: groupedItem }\"></ng-template>\n </ng-container>\n </mat-option>\n </mat-optgroup>\n </ng-container>\n </cdk-virtual-scroll-viewport>\n </ng-container>\n <ng-container *ngIf=\"!groupBy\">\n <cdk-virtual-scroll-viewport\n #virtualScrolling\n [itemSize]=\"itemSize\"\n minBufferPx=\"500\"\n maxBufferPx=\"750\"\n [style.min-height]=\"cdkVirtualScrollViewport + 'px'\">\n <mat-option\n *cdkVirtualFor=\"let autocompleteOption of autocompleteOptions | async; let i = index; trackBy: trackByFn\"\n [disabled]=\"autocompleteOption.isDisabled\"\n [class]=\"\n autocompleteOption.typeClass\n ? 'mat-option eui-autocomplete__option eui-autocomplete__option--' + autocompleteOption.typeClass\n : 'mat-option eui-autocomplete__option'\n \"\n [class.eui-autocomplete__option--custom]=\"autocompleteOptionTemplate\"\n [class.mat-mdc-option-active]=\"i === selectedOptionIndex\"\n [class.mdc-list-item--selected]=\"false\"\n [value]=\"autocompleteOption\">\n <span *ngIf=\"autocompleteOption.iconClass\" class=\"{{ autocompleteOption.iconClass }}\"></span>\n <ng-container *ngIf=\"!autocompleteOptionTemplate\">{{ autocompleteOption.label }}</ng-container>\n <ng-container *ngIf=\"autocompleteOptionTemplate\">\n <ng-template\n [ngTemplateOutlet]=\"autocompleteOptionTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: autocompleteOption }\"></ng-template>\n </ng-container>\n </mat-option>\n </cdk-virtual-scroll-viewport>\n </ng-container>\n </mat-autocomplete>\n </span>\n </ng-template>\n </div>\n</div>\n", styles: [".eui-autocomplete{--eui-autocomplete-input-width: var(--eui-base-spacing-3xl);width:100%}.eui-autocomplete__container .eui-autocomplete__field-wrapper{display:flex;position:relative;width:100%}.eui-autocomplete__container .eui-autocomplete__field-wrapper input{min-width:var(--eui-autocomplete-input-width)}.eui-autocomplete--no-max-height{max-height:none!important}.eui-autocomplete__option{align-items:center;border-bottom:1px solid var(--eui-base-color-grey-10);border-left:var(--eui-border-state-width) solid transparent;display:flex;height:auto!important;min-height:var(--eui-base-spacing-3xl)!important}.eui-autocomplete__option .eui-icon,.eui-autocomplete__option .eui-icon-svg,.eui-autocomplete__option .eui-flag-icon{margin-right:var(--eui-base-spacing-xs)}.eui-autocomplete__option .mat-pseudo-checkbox-checked,.eui-autocomplete__option .mat-pseudo-checkbox-indeterminate,.eui-autocomplete__option .mat-accent .mat-pseudo-checkbox-checked,.eui-autocomplete__option .mat-accent .mat-pseudo-checkbox-indeterminate{background:transparent}.eui-autocomplete .eui-autocomplete__wrapper--inside .eui-input-text{border:0}.eui-autocomplete .eui-autocomplete__wrapper--inside euichiplistappendcontent{display:inline-flex;flex-grow:1}.eui-autocomplete .eui-autocomplete__wrapper--inside .eui-chip-list-container{width:100%}.eui-autocomplete .eui-autocomplete__wrapper--inside .eui-chip-list-container .eui-chip-list__list{flex-wrap:inherit!important;width:100%}.eui-autocomplete--has-chips .eui-input-text[readonly]{display:none}.mat-mdc-autocomplete-panel{padding:0!important}.mat-mdc-autocomplete-panel .mat-mdc-optgroup-label{align-items:center;background-color:var(--eui-base-color-grey-10);color:var(--eui-base-color-grey-80);display:flex;font-family:var(--eui-base-font-family);font-size:var(--eui-base-font-size);font-weight:700;margin-bottom:0}.mat-mdc-autocomplete-panel .eui-autocomplete__optgroup--custom .mat-mdc-optgroup-label{display:none}.mat-mdc-autocomplete-panel .eui-autocomplete__optgroup--custom-optgroup-wrapper{align-items:center;background-color:var(--eui-base-color-grey-10);color:var(--eui-base-color-grey-80);display:flex;font-size:var(--eui-base-font-size);font-weight:700;height:auto;line-height:var(--eui-base-spacing-3xl);min-height:var(--eui-base-spacing-3xl);padding:0 var(--eui-base-spacing-s)}.mat-mdc-autocomplete-panel .eui-autocomplete__optgroup--custom-optgroup-wrapper .eui-icon{margin-right:var(--eui-base-spacing-2xs)}.mat-mdc-autocomplete-panel .mdc-list-item--selected{background:none!important}.mat-mdc-autocomplete-panel .mdc-list-item--selected:hover{background:rgba(0,0,0,.04)!important}.mat-mdc-autocomplete-panel .mdc-list-item--selected .mdc-list-item__primary-text{color:inherit!important}.eui-autocomplete--primary input{background-color:var(--eui-base-color-primary-10)}.eui-autocomplete--secondary input{background-color:var(--eui-base-color-grey-10)}.eui-autocomplete--info input{background-color:var(--eui-base-color-info-10)}.eui-autocomplete--success input{background-color:var(--eui-base-color-success-10)}.eui-autocomplete--warning input{background-color:var(--eui-base-color-warning-10)}.eui-autocomplete--danger input{background-color:var(--eui-base-color-danger-10)}.eui-autocomplete--accent input{background-color:var(--eui-base-color-accent-10)}.eui-autocomplete__wrapper--bottom .eui-autocomplete__field-wrapper{display:block;margin-bottom:var(--eui-base-spacing-2xs)}.eui-autocomplete__wrapper--inside{background-color:var(--eui-base-color-white);border:1px solid var(--eui-base-color-grey-50);border-radius:var(--eui-base-border-radius);padding:var(--eui-base-spacing-2xs) var(--eui-base-spacing-2xs) 0 var(--eui-base-spacing-2xs)}.eui-autocomplete__wrapper--inside .mat-chip-list .mat-chip-list-wrapper,.eui-autocomplete__wrapper--inside .mat-chip-list .mat-standard-chip{align-items:center;margin-bottom:0}.eui-autocomplete__wrapper--inside .mat-autocomplete-trigger{background:none;border:0}.eui-autocomplete__wrapper--inside .mat-autocomplete-trigger:focus{border:0;box-shadow:var(--eui-base-shadow-0)}.eui-autocomplete__option--primary{border-left-color:var(--eui-base-color-primary-100)}.eui-autocomplete__option--secondary{border-left-color:var(--eui-base-color-grey-25)}.eui-autocomplete__option--info{border-left-color:var(--eui-base-color-info-100)}.eui-autocomplete__option--success{border-left-color:var(--eui-base-color-success-100)}.eui-autocomplete__option--warning{border-left-color:var(--eui-base-color-warning-100)}.eui-autocomplete__option--danger{border-left-color:var(--eui-base-color-danger-100)}.eui-autocomplete__option--accent{border-left-color:var(--eui-base-color-accent-100)}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i5.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i4.MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"] }, { kind: "component", type: i6.EuiChipListComponent, selector: "eui-chip-list, div[euiChipList], ul[euiChipList]", inputs: ["chips", "toggleLinkMoreLabel", "toggleLinkLessLabel", "chipsSortOrder", "dragAndDropSourceName", "dragAndDropConnectedTo", "ariaLabel", "dropListOrientation", "isSquared", "isChipsRemovable", "maxVisibleChipsCount", "chipsLabelTruncateCount", "isMaxVisibleChipsOpened", "isChipsSorted", "isChipsDragAndDrop", "isGrid"], outputs: ["chipsInit", "chipRemove", "chipDragStarted", "chipDragReleased", "chipDropped", "chiplistFocus"] }, { kind: "directive", type: i6.EuiChipListAppendContentDirective, selector: "euiChipListAppendContent" }, { kind: "component", type: i7.EuiInputTextComponent, selector: "input[euiInputText]", inputs: ["class", "isInvalid"] }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
698
698
|
}
|
|
699
699
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuiAutocompleteComponent, decorators: [{
|
|
700
700
|
type: Component,
|
|
701
|
-
args: [{ selector: 'eui-autocomplete, input[euiAutocomplete]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"eui-autocomplete__container\" matAutocompleteOrigin #origin=\"matAutocompleteOrigin\">\n <div class=\"eui-autocomplete__wrapper eui-autocomplete__wrapper--{{ chipsPosition }}\">\n <ng-template [ngIf]=\"chipsPosition === 'bottom'\">\n <ng-container *ngTemplateOutlet=\"field\"></ng-container>\n </ng-template>\n\n <ng-container *ngIf=\"hasChips\">\n <eui-chip-list\n #chipList\n [chips]=\"chips\"\n [isGrid]=\"isChipsGrid\"\n [isChipsDragAndDrop]=\"isChipsDragAndDrop\"\n [isChipsRemovable]=\"isChipsRemovable && !readonly\"\n [isChipsSorted]=\"isChipsSorted\"\n [chipsSortOrder]=\"chipsSortOrder\"\n [maxVisibleChipsCount]=\"maxVisibleChipsCount\"\n [isMaxVisibleChipsOpened]=\"isMaxVisibleChipsOpened\"\n [toggleLinkMoreLabel]=\"toggleLinkMoreLabel\"\n [toggleLinkLessLabel]=\"toggleLinkLessLabel\"\n [chipsLabelTruncateCount]=\"chipsLabelTruncateCount\"\n [dragAndDropSourceName]=\"dragAndDropSourceName\"\n [dragAndDropConnectedTo]=\"dragAndDropConnectedTo\"\n (chipDropped)=\"onChipDropped($event)\"\n (chipDragStarted)=\"onChipDragStarted($event)\"\n (chipDragReleased)=\"onChipDragReleased($event)\"\n (chipRemove)=\"onChipRemove($event)\"\n (chiplistFocus)=\"onChipListFocus()\">\n <euiChipListAppendContent>\n <ng-template [ngIf]=\"chipsPosition === 'inside'\">\n <ng-container *ngTemplateOutlet=\"field\"></ng-container>\n </ng-template>\n </euiChipListAppendContent>\n </eui-chip-list>\n </ng-container>\n\n <ng-template [ngIf]=\"chipsPosition === 'top' || !hasChips\">\n <ng-container *ngTemplateOutlet=\"field\"></ng-container>\n </ng-template>\n\n <ng-template #field>\n <span class=\"eui-autocomplete__field-wrapper\">\n <ng-container *ngIf=\"!hasChips\">\n <input\n [euiClearable]=\"!readonly && !isLoading && !isDisabled\"\n [euiLoading]=\"isLoading\"\n euiInputText\n #autocompleteInput\n #autocompleteInputTrigger\n placeholder=\"{{ placeholder }}\"\n [matAutocompleteDisabled]=\"readonly\"\n [formControl]=\"autocompleteControl\"\n [matAutocomplete]=\"auto\"\n [readonly]=\"readonly\"\n [attr.aria-label]=\"placeholder ? placeholder : 'Autocomplete Input Field'\"\n (clear)=\"onClear()\"\n (focusout)=\"onFocusOut()\"\n (focus)=\"onFocus()\"\n role=\"combobox\"\n aria-autocomplete=\"both\"\n aria-haspopup=\"true\"\n aria-controls=\"autocompleteId\" />\n </ng-container>\n <ng-container *ngIf=\"hasChips\">\n <input\n [euiClearable]=\"!readonly && !isLoading && !isDisabled\"\n [euiLoading]=\"isLoading\"\n euiInputText\n #autocompleteInput\n #autocompleteInputTrigger\n placeholder=\"{{ placeholder }}\"\n [matAutocompleteDisabled]=\"readonly\"\n [formControl]=\"autocompleteControl\"\n [matAutocomplete]=\"auto\"\n [matAutocompleteConnectedTo]=\"chipsPosition === 'inside' ? origin : null\"\n [readonly]=\"readonly\"\n [attr.aria-label]=\"placeholder ? placeholder : 'Autocomplete Input Field'\"\n (clear)=\"onClear()\"\n (focusout)=\"onFocusOut(); addOnBlurHandler($event)\"\n (focus)=\"onFocus()\"\n (keydown.enter)=\"addOnEnterHandler()\"\n (keydown.backspace)=\"onKeyDownBackspace()\"\n role=\"combobox\"\n aria-autocomplete=\"both\"\n aria-haspopup=\"true\"\n aria-controls=\"autocompleteId\" />\n </ng-container>\n\n <mat-autocomplete\n [id]=\"autocompleteId\"\n #auto=\"matAutocomplete\"\n [panelWidth]=\"panelWidth === 'auto' ? null : panelWidth\"\n [class]=\"classList\"\n [autoActiveFirstOption]=\"autoActiveFirstOption\"\n (closed)=\"onClose()\"\n (opened)=\"onOpen()\"\n (optionSelected)=\"onOptionSelected($event)\">\n <ng-container *ngIf=\"groupBy\">\n <cdk-virtual-scroll-viewport\n #virtualScrolling\n [itemSize]=\"itemSize\"\n minBufferPx=\"500\"\n maxBufferPx=\"750\"\n [style.min-height]=\"cdkVirtualScrollViewport + 'px'\">\n <ng-container *ngFor=\"let distinctOptionGroup of distinctOptionGroups\">\n <mat-optgroup\n [class.eui-autocomplete__optgroup--custom]=\"autocompleteOptGroupTemplate\"\n *ngIf=\"(groupedItems[distinctOptionGroup] | async).length > 0\"\n [label]=\"distinctOptionGroup\">\n <ng-container *ngIf=\"autocompleteOptGroupTemplate\">\n <div class=\"eui-autocomplete__optgroup--custom-optgroup-wrapper\">\n <ng-template\n [ngTemplateOutlet]=\"autocompleteOptGroupTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: { label: distinctOptionGroup } }\"></ng-template>\n </div>\n </ng-container>\n <mat-option\n *ngFor=\"let groupedItem of groupedItems[distinctOptionGroup] | async; trackBy: trackByFn\"\n [disabled]=\"groupedItem.isDisabled\"\n [class]=\"\n groupedItem.typeClass\n ? 'mat-option eui-autocomplete__option eui-autocomplete__option--' + groupedItem.typeClass\n : 'mat-option eui-autocomplete__option'\n \"\n [class.eui-autocomplete__option--custom]=\"autocompleteOptionTemplate\"\n [value]=\"groupedItem\">\n <span *ngIf=\"groupedItem.iconClass\" class=\"{{ groupedItem.iconClass }}\"></span>\n <ng-container *ngIf=\"!autocompleteOptionTemplate\">\n {{ groupedItem.label }}\n </ng-container>\n <ng-container *ngIf=\"autocompleteOptionTemplate\">\n <ng-template\n [ngTemplateOutlet]=\"autocompleteOptionTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: groupedItem }\"></ng-template>\n </ng-container>\n </mat-option>\n </mat-optgroup>\n </ng-container>\n </cdk-virtual-scroll-viewport>\n </ng-container>\n <ng-container *ngIf=\"!groupBy\">\n <cdk-virtual-scroll-viewport\n #virtualScrolling\n [itemSize]=\"itemSize\"\n minBufferPx=\"500\"\n maxBufferPx=\"750\"\n [style.min-height]=\"cdkVirtualScrollViewport + 'px'\">\n <mat-option\n *cdkVirtualFor=\"let autocompleteOption of autocompleteOptions | async; let i = index; trackBy: trackByFn\"\n [disabled]=\"autocompleteOption.isDisabled\"\n [class]=\"\n autocompleteOption.typeClass\n ? 'mat-option eui-autocomplete__option eui-autocomplete__option--' + autocompleteOption.typeClass\n : 'mat-option eui-autocomplete__option'\n \"\n [class.eui-autocomplete__option--custom]=\"autocompleteOptionTemplate\"\n [class.mat-mdc-option-active]=\"i === selectedOptionIndex\"\n [class.mdc-list-item--selected]=\"false\"\n [value]=\"autocompleteOption\">\n <span *ngIf=\"autocompleteOption.iconClass\" class=\"{{ autocompleteOption.iconClass }}\"></span>\n <ng-container *ngIf=\"!autocompleteOptionTemplate\">{{ autocompleteOption.label }}</ng-container>\n <ng-container *ngIf=\"autocompleteOptionTemplate\">\n <ng-template\n [ngTemplateOutlet]=\"autocompleteOptionTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: autocompleteOption }\"></ng-template>\n </ng-container>\n </mat-option>\n </cdk-virtual-scroll-viewport>\n </ng-container>\n </mat-autocomplete>\n </span>\n </ng-template>\n </div>\n</div>\n", styles: [".eui-autocomplete{--eui-autocomplete-input-width: var(--eui-base-spacing-3xl);width:100%}.eui-autocomplete__container .eui-autocomplete__field-wrapper{display:flex;position:relative;width:100%}.eui-autocomplete__container .eui-autocomplete__field-wrapper input{min-width:var(--eui-autocomplete-input-width)}.eui-autocomplete--no-max-height{max-height:none!important}.eui-autocomplete__option{align-items:center;border-bottom:1px solid var(--eui-base-color-grey-10);border-left:var(--eui-border-state-width) solid transparent;display:flex;height:auto!important;min-height:var(--eui-base-spacing-3xl)!important}.eui-autocomplete__option .eui-icon,.eui-autocomplete__option .eui-icon-svg,.eui-autocomplete__option .eui-flag-icon{margin-right:var(--eui-base-spacing-xs)}.eui-autocomplete__option .mat-pseudo-checkbox-checked,.eui-autocomplete__option .mat-pseudo-checkbox-indeterminate,.eui-autocomplete__option .mat-accent .mat-pseudo-checkbox-checked,.eui-autocomplete__option .mat-accent .mat-pseudo-checkbox-indeterminate{background:transparent}.eui-autocomplete .eui-autocomplete__wrapper--inside .eui-input-text{border:0}.eui-autocomplete .eui-autocomplete__wrapper--inside euichiplistappendcontent{display:inline-flex;flex-grow:1}.eui-autocomplete .eui-autocomplete__wrapper--inside .eui-chip-list-container{width:100%}.eui-autocomplete .eui-autocomplete__wrapper--inside .eui-chip-list-container .eui-chip-list__list{flex-wrap:inherit!important;width:100%}.eui-autocomplete--has-chips .eui-input-text[readonly]{display:none}.mat-mdc-autocomplete-panel{padding:0!important}.mat-mdc-autocomplete-panel .mat-mdc-optgroup-label{align-items:center;background-color:var(--eui-base-color-grey-10);color:var(--eui-base-color-grey-80);display:flex;font-family:var(--eui-base-font-family);font-size:var(--eui-base-font-size);font-weight:700;margin-bottom:0}.mat-mdc-autocomplete-panel .eui-autocomplete__optgroup--custom .mat-mdc-optgroup-label{display:none}.mat-mdc-autocomplete-panel .eui-autocomplete__optgroup--custom-optgroup-wrapper{align-items:center;background-color:var(--eui-base-color-grey-10);color:var(--eui-base-color-grey-80);display:flex;font-size:var(--eui-base-font-size);font-weight:700;height:auto;line-height:var(--eui-base-spacing-3xl);min-height:var(--eui-base-spacing-3xl);padding:0 var(--eui-base-spacing-s)}.mat-mdc-autocomplete-panel .eui-autocomplete__optgroup--custom-optgroup-wrapper .eui-icon{margin-right:var(--eui-base-spacing-2xs)}.mat-mdc-autocomplete-panel .mdc-list-item--selected{background:none!important}.mat-mdc-autocomplete-panel .mdc-list-item--selected:hover{background:rgba(0,0,0,.04)!important}.mat-mdc-autocomplete-panel .mdc-list-item--selected .mdc-list-item__primary-text{color:inherit!important}.eui-autocomplete--primary input{background-color:var(--eui-base-color-primary-10)}.eui-autocomplete--secondary input{background-color:var(--eui-base-color-grey-10)}.eui-autocomplete--info input{background-color:var(--eui-base-color-info-10)}.eui-autocomplete--success input{background-color:var(--eui-base-color-success-10)}.eui-autocomplete--warning input{background-color:var(--eui-base-color-warning-10)}.eui-autocomplete--danger input{background-color:var(--eui-base-color-danger-10)}.eui-autocomplete--accent input{background-color:var(--eui-base-color-accent-10)}.eui-autocomplete__wrapper--bottom .eui-autocomplete__field-wrapper{display:block;margin-bottom:var(--eui-base-spacing-2xs)}.eui-autocomplete__wrapper--inside{background-color:var(--eui-base-color-white);border:1px solid var(--eui-base-color-grey-50);border-radius:var(--eui-base-border-radius);padding:var(--eui-base-spacing-2xs) var(--eui-base-spacing-2xs) 0 var(--eui-base-spacing-2xs)}.eui-autocomplete__wrapper--inside .mat-chip-list .mat-chip-list-wrapper,.eui-autocomplete__wrapper--inside .mat-chip-list .mat-standard-chip{align-items:center;margin-bottom:0}.eui-autocomplete__wrapper--inside .mat-autocomplete-trigger{background:none;border:0}.eui-autocomplete__wrapper--inside .mat-autocomplete-trigger:focus{border:0;box-shadow:var(--eui-base-shadow-0)}.eui-autocomplete__option--primary{border-left-color:var(--eui-base-color-primary-100)}.eui-autocomplete__option--secondary{border-left-color:var(--eui-base-color-grey-25)}.eui-autocomplete__option--info{border-left-color:var(--eui-base-color-info-100)}.eui-autocomplete__option--success{border-left-color:var(--eui-base-color-success-100)}.eui-autocomplete__option--warning{border-left-color:var(--eui-base-color-warning-100)}.eui-autocomplete__option--danger{border-left-color:var(--eui-base-color-danger-100)}.eui-autocomplete__option--accent{border-left-color:var(--eui-base-color-accent-100)}\n"] }]
|
|
701
|
+
args: [{ selector: 'eui-autocomplete, input[euiAutocomplete]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"eui-autocomplete__container\" matAutocompleteOrigin #origin=\"matAutocompleteOrigin\">\n <div class=\"eui-autocomplete__wrapper eui-autocomplete__wrapper--{{ chipsPosition }}\">\n <ng-template [ngIf]=\"chipsPosition === 'bottom'\">\n <ng-container *ngTemplateOutlet=\"field\"></ng-container>\n </ng-template>\n\n <ng-container *ngIf=\"hasChips\">\n <eui-chip-list\n #chipList\n [chips]=\"chips\"\n [isGrid]=\"isChipsGrid\"\n [isChipsDragAndDrop]=\"isChipsDragAndDrop\"\n [isChipsRemovable]=\"isChipsRemovable && !readonly\"\n [isChipsSorted]=\"isChipsSorted\"\n [chipsSortOrder]=\"chipsSortOrder\"\n [maxVisibleChipsCount]=\"maxVisibleChipsCount\"\n [isMaxVisibleChipsOpened]=\"isMaxVisibleChipsOpened\"\n [toggleLinkMoreLabel]=\"toggleLinkMoreLabel\"\n [toggleLinkLessLabel]=\"toggleLinkLessLabel\"\n [chipsLabelTruncateCount]=\"chipsLabelTruncateCount\"\n [dragAndDropSourceName]=\"dragAndDropSourceName\"\n [dragAndDropConnectedTo]=\"dragAndDropConnectedTo\"\n (chipDropped)=\"onChipDropped($event)\"\n (chipDragStarted)=\"onChipDragStarted($event)\"\n (chipDragReleased)=\"onChipDragReleased($event)\"\n (chipRemove)=\"onChipRemove($event)\"\n (chiplistFocus)=\"onChipListFocus()\">\n <euiChipListAppendContent>\n <ng-template [ngIf]=\"chipsPosition === 'inside'\">\n <ng-container *ngTemplateOutlet=\"field\"></ng-container>\n </ng-template>\n </euiChipListAppendContent>\n </eui-chip-list>\n </ng-container>\n\n <ng-template [ngIf]=\"chipsPosition === 'top' || !hasChips\">\n <ng-container *ngTemplateOutlet=\"field\"></ng-container>\n </ng-template>\n\n <ng-template #field>\n <span class=\"eui-autocomplete__field-wrapper\">\n <ng-container *ngIf=\"!hasChips\">\n <input\n [euiClearable]=\"!readonly && !isLoading && !isDisabled\"\n [euiLoading]=\"isLoading\"\n euiInputText\n #autocompleteInput\n #autocompleteInputTrigger\n placeholder=\"{{ placeholder }}\"\n [matAutocompleteDisabled]=\"readonly\"\n [formControl]=\"autocompleteControl\"\n [matAutocomplete]=\"auto\"\n [readonly]=\"readonly\"\n [attr.aria-label]=\"placeholder ? placeholder : 'Autocomplete Input Field'\"\n (clear)=\"onClear()\"\n (focusout)=\"onFocusOut()\"\n (focus)=\"onFocus()\"\n role=\"combobox\"\n aria-autocomplete=\"both\"\n aria-haspopup=\"true\"\n aria-controls=\"autocompleteId\" />\n </ng-container>\n <ng-container *ngIf=\"hasChips\">\n <input\n [euiClearable]=\"!readonly && !isLoading && !isDisabled\"\n [euiLoading]=\"isLoading\"\n euiInputText\n #autocompleteInput\n #autocompleteInputTrigger\n placeholder=\"{{ placeholder }}\"\n [matAutocompleteDisabled]=\"readonly\"\n [formControl]=\"autocompleteControl\"\n [matAutocomplete]=\"auto\"\n [matAutocompleteConnectedTo]=\"chipsPosition === 'inside' ? origin : null\"\n [readonly]=\"readonly\"\n [attr.aria-label]=\"placeholder ? placeholder : 'Autocomplete Input Field'\"\n (clear)=\"onClear()\"\n (focusout)=\"onFocusOut(); addOnBlurHandler($event)\"\n (focus)=\"onFocus()\"\n (keydown.enter)=\"addOnEnterHandler()\"\n (keydown.backspace)=\"onKeyDownBackspace()\"\n role=\"combobox\"\n aria-autocomplete=\"both\"\n aria-haspopup=\"true\"\n aria-controls=\"autocompleteId\" />\n </ng-container>\n\n <mat-autocomplete\n [id]=\"autocompleteId\"\n #auto=\"matAutocomplete\"\n [panelWidth]=\"panelWidth === 'auto' ? null : panelWidth\"\n [class]=\"classList\"\n [autoActiveFirstOption]=\"autoActiveFirstOption\"\n [hideSingleSelectionIndicator]=\"true\"\n (closed)=\"onClose()\"\n (opened)=\"onOpen()\"\n (optionSelected)=\"onOptionSelected($event)\">\n <ng-container *ngIf=\"groupBy\">\n <cdk-virtual-scroll-viewport\n #virtualScrolling\n [itemSize]=\"itemSize\"\n minBufferPx=\"500\"\n maxBufferPx=\"750\"\n [style.min-height]=\"cdkVirtualScrollViewport + 'px'\">\n <ng-container *ngFor=\"let distinctOptionGroup of distinctOptionGroups\">\n <mat-optgroup\n [class.eui-autocomplete__optgroup--custom]=\"autocompleteOptGroupTemplate\"\n *ngIf=\"(groupedItems[distinctOptionGroup] | async).length > 0\"\n [label]=\"distinctOptionGroup\">\n <ng-container *ngIf=\"autocompleteOptGroupTemplate\">\n <div class=\"eui-autocomplete__optgroup--custom-optgroup-wrapper\">\n <ng-template\n [ngTemplateOutlet]=\"autocompleteOptGroupTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: { label: distinctOptionGroup } }\"></ng-template>\n </div>\n </ng-container>\n <mat-option\n *ngFor=\"let groupedItem of groupedItems[distinctOptionGroup] | async; trackBy: trackByFn\"\n [disabled]=\"groupedItem.isDisabled\"\n [class]=\"\n groupedItem.typeClass\n ? 'mat-option eui-autocomplete__option eui-autocomplete__option--' + groupedItem.typeClass\n : 'mat-option eui-autocomplete__option'\n \"\n [class.eui-autocomplete__option--custom]=\"autocompleteOptionTemplate\"\n [value]=\"groupedItem\">\n <span *ngIf=\"groupedItem.iconClass\" class=\"{{ groupedItem.iconClass }}\"></span>\n <ng-container *ngIf=\"!autocompleteOptionTemplate\">\n {{ groupedItem.label }}\n </ng-container>\n <ng-container *ngIf=\"autocompleteOptionTemplate\">\n <ng-template\n [ngTemplateOutlet]=\"autocompleteOptionTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: groupedItem }\"></ng-template>\n </ng-container>\n </mat-option>\n </mat-optgroup>\n </ng-container>\n </cdk-virtual-scroll-viewport>\n </ng-container>\n <ng-container *ngIf=\"!groupBy\">\n <cdk-virtual-scroll-viewport\n #virtualScrolling\n [itemSize]=\"itemSize\"\n minBufferPx=\"500\"\n maxBufferPx=\"750\"\n [style.min-height]=\"cdkVirtualScrollViewport + 'px'\">\n <mat-option\n *cdkVirtualFor=\"let autocompleteOption of autocompleteOptions | async; let i = index; trackBy: trackByFn\"\n [disabled]=\"autocompleteOption.isDisabled\"\n [class]=\"\n autocompleteOption.typeClass\n ? 'mat-option eui-autocomplete__option eui-autocomplete__option--' + autocompleteOption.typeClass\n : 'mat-option eui-autocomplete__option'\n \"\n [class.eui-autocomplete__option--custom]=\"autocompleteOptionTemplate\"\n [class.mat-mdc-option-active]=\"i === selectedOptionIndex\"\n [class.mdc-list-item--selected]=\"false\"\n [value]=\"autocompleteOption\">\n <span *ngIf=\"autocompleteOption.iconClass\" class=\"{{ autocompleteOption.iconClass }}\"></span>\n <ng-container *ngIf=\"!autocompleteOptionTemplate\">{{ autocompleteOption.label }}</ng-container>\n <ng-container *ngIf=\"autocompleteOptionTemplate\">\n <ng-template\n [ngTemplateOutlet]=\"autocompleteOptionTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: autocompleteOption }\"></ng-template>\n </ng-container>\n </mat-option>\n </cdk-virtual-scroll-viewport>\n </ng-container>\n </mat-autocomplete>\n </span>\n </ng-template>\n </div>\n</div>\n", styles: [".eui-autocomplete{--eui-autocomplete-input-width: var(--eui-base-spacing-3xl);width:100%}.eui-autocomplete__container .eui-autocomplete__field-wrapper{display:flex;position:relative;width:100%}.eui-autocomplete__container .eui-autocomplete__field-wrapper input{min-width:var(--eui-autocomplete-input-width)}.eui-autocomplete--no-max-height{max-height:none!important}.eui-autocomplete__option{align-items:center;border-bottom:1px solid var(--eui-base-color-grey-10);border-left:var(--eui-border-state-width) solid transparent;display:flex;height:auto!important;min-height:var(--eui-base-spacing-3xl)!important}.eui-autocomplete__option .eui-icon,.eui-autocomplete__option .eui-icon-svg,.eui-autocomplete__option .eui-flag-icon{margin-right:var(--eui-base-spacing-xs)}.eui-autocomplete__option .mat-pseudo-checkbox-checked,.eui-autocomplete__option .mat-pseudo-checkbox-indeterminate,.eui-autocomplete__option .mat-accent .mat-pseudo-checkbox-checked,.eui-autocomplete__option .mat-accent .mat-pseudo-checkbox-indeterminate{background:transparent}.eui-autocomplete .eui-autocomplete__wrapper--inside .eui-input-text{border:0}.eui-autocomplete .eui-autocomplete__wrapper--inside euichiplistappendcontent{display:inline-flex;flex-grow:1}.eui-autocomplete .eui-autocomplete__wrapper--inside .eui-chip-list-container{width:100%}.eui-autocomplete .eui-autocomplete__wrapper--inside .eui-chip-list-container .eui-chip-list__list{flex-wrap:inherit!important;width:100%}.eui-autocomplete--has-chips .eui-input-text[readonly]{display:none}.mat-mdc-autocomplete-panel{padding:0!important}.mat-mdc-autocomplete-panel .mat-mdc-optgroup-label{align-items:center;background-color:var(--eui-base-color-grey-10);color:var(--eui-base-color-grey-80);display:flex;font-family:var(--eui-base-font-family);font-size:var(--eui-base-font-size);font-weight:700;margin-bottom:0}.mat-mdc-autocomplete-panel .eui-autocomplete__optgroup--custom .mat-mdc-optgroup-label{display:none}.mat-mdc-autocomplete-panel .eui-autocomplete__optgroup--custom-optgroup-wrapper{align-items:center;background-color:var(--eui-base-color-grey-10);color:var(--eui-base-color-grey-80);display:flex;font-size:var(--eui-base-font-size);font-weight:700;height:auto;line-height:var(--eui-base-spacing-3xl);min-height:var(--eui-base-spacing-3xl);padding:0 var(--eui-base-spacing-s)}.mat-mdc-autocomplete-panel .eui-autocomplete__optgroup--custom-optgroup-wrapper .eui-icon{margin-right:var(--eui-base-spacing-2xs)}.mat-mdc-autocomplete-panel .mdc-list-item--selected{background:none!important}.mat-mdc-autocomplete-panel .mdc-list-item--selected:hover{background:rgba(0,0,0,.04)!important}.mat-mdc-autocomplete-panel .mdc-list-item--selected .mdc-list-item__primary-text{color:inherit!important}.eui-autocomplete--primary input{background-color:var(--eui-base-color-primary-10)}.eui-autocomplete--secondary input{background-color:var(--eui-base-color-grey-10)}.eui-autocomplete--info input{background-color:var(--eui-base-color-info-10)}.eui-autocomplete--success input{background-color:var(--eui-base-color-success-10)}.eui-autocomplete--warning input{background-color:var(--eui-base-color-warning-10)}.eui-autocomplete--danger input{background-color:var(--eui-base-color-danger-10)}.eui-autocomplete--accent input{background-color:var(--eui-base-color-accent-10)}.eui-autocomplete__wrapper--bottom .eui-autocomplete__field-wrapper{display:block;margin-bottom:var(--eui-base-spacing-2xs)}.eui-autocomplete__wrapper--inside{background-color:var(--eui-base-color-white);border:1px solid var(--eui-base-color-grey-50);border-radius:var(--eui-base-border-radius);padding:var(--eui-base-spacing-2xs) var(--eui-base-spacing-2xs) 0 var(--eui-base-spacing-2xs)}.eui-autocomplete__wrapper--inside .mat-chip-list .mat-chip-list-wrapper,.eui-autocomplete__wrapper--inside .mat-chip-list .mat-standard-chip{align-items:center;margin-bottom:0}.eui-autocomplete__wrapper--inside .mat-autocomplete-trigger{background:none;border:0}.eui-autocomplete__wrapper--inside .mat-autocomplete-trigger:focus{border:0;box-shadow:var(--eui-base-shadow-0)}.eui-autocomplete__option--primary{border-left-color:var(--eui-base-color-primary-100)}.eui-autocomplete__option--secondary{border-left-color:var(--eui-base-color-grey-25)}.eui-autocomplete__option--info{border-left-color:var(--eui-base-color-info-100)}.eui-autocomplete__option--success{border-left-color:var(--eui-base-color-success-100)}.eui-autocomplete__option--warning{border-left-color:var(--eui-base-color-warning-100)}.eui-autocomplete__option--danger{border-left-color:var(--eui-base-color-danger-100)}.eui-autocomplete__option--accent{border-left-color:var(--eui-base-color-accent-100)}\n"] }]
|
|
702
702
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.NgControl, decorators: [{
|
|
703
703
|
type: Self
|
|
704
704
|
}, {
|