@eui/components 18.1.1-snapshot-1723597735497 → 18.1.1-snapshot-1724029811889
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/EuiAppSidebarMenuComponent.html +87 -1
- package/docs/components/EuiAutocompleteComponent.html +1 -1
- package/docs/components/EuiMenuComponent.html +19 -0
- package/docs/dependencies.html +2 -2
- package/docs/js/search/search_index.js +2 -2
- package/esm2022/eui-autocomplete/eui-autocomplete.component.mjs +3 -3
- package/esm2022/eui-icon/eui-icon-svg.component.mjs +2 -2
- package/esm2022/eui-input-group/eui-input-group.component.mjs +2 -2
- package/esm2022/eui-menu/eui-menu.component.mjs +6 -2
- package/esm2022/eui-sidebar-menu/eui-sidebar-menu.component.mjs +1 -1
- package/esm2022/layout/eui-app/eui-app-sidebar/sidebar-menu/sidebar-menu.component.mjs +9 -3
- package/esm2022/layout/eui-app/eui-app.component.mjs +1 -1
- package/eui-menu/eui-menu.component.d.ts +2 -1
- package/eui-menu/eui-menu.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-icon.mjs +2 -2
- package/fesm2022/eui-components-eui-icon.mjs.map +1 -1
- package/fesm2022/eui-components-eui-input-group.mjs +2 -2
- package/fesm2022/eui-components-eui-input-group.mjs.map +1 -1
- package/fesm2022/eui-components-eui-menu.mjs +5 -1
- package/fesm2022/eui-components-eui-menu.mjs.map +1 -1
- package/fesm2022/eui-components-eui-sidebar-menu.mjs +1 -1
- package/fesm2022/eui-components-eui-sidebar-menu.mjs.map +1 -1
- package/fesm2022/eui-components-layout.mjs +9 -3
- package/fesm2022/eui-components-layout.mjs.map +1 -1
- package/layout/eui-app/eui-app-sidebar/sidebar-menu/sidebar-menu.component.d.ts +3 -1
- package/layout/eui-app/eui-app-sidebar/sidebar-menu/sidebar-menu.component.d.ts.map +1 -1
- package/package.json +3 -3
|
@@ -97,7 +97,7 @@ export class EuiAppComponent {
|
|
|
97
97
|
this.destroy$.unsubscribe();
|
|
98
98
|
}
|
|
99
99
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: EuiAppComponent, deps: [{ token: i1.EuiAppShellService }, { token: i1.EuiGrowlService }, { token: i0.ChangeDetectorRef }, { token: PLATFORM_ID }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
100
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.1.0", type: EuiAppComponent, selector: "eui-app", inputs: { appSubTitle: "appSubTitle", themeClass: "themeClass", isSidebarOpen: ["isSidebarOpen", "isSidebarOpen", booleanAttribute], isShrinkHeaderActive: ["isShrinkHeaderActive", "isShrinkHeaderActive", booleanAttribute], isSidebarHidden: ["isSidebarHidden", "isSidebarHidden", booleanAttribute] }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "appSidebar", first: true, predicate: i0.forwardRef(() => EuiAppSidebarComponent), descendants: true }, { propertyName: "customPageWrapper", first: true, predicate: i0.forwardRef(() => EuiAppPageWrapperDirective), descendants: true }, { propertyName: "appToolbar", first: true, predicate: i0.forwardRef(() => EuiAppToolbarComponent), descendants: true }], usesOnChanges: true, ngImport: i0, template: "<eui-dimmer [isDimmerActive]=\"(asService.state$ | async).isDimmerActive\"></eui-dimmer>\n\n<ng-content select=\"eui-app-sidebar\"></ng-content>\n<ng-container *ngIf=\"!appSidebar && (asService.state$ | async).menuLinks.length !== 0 && (asService.state$ | async).hasHeader && (asService.breakpoints$ | async).isMobile\">\n <eui-app-sidebar>\n <eui-app-sidebar-body>\n <eui-app-sidebar-menu [items]=\"(asService.state$ | async).menuLinks\" [hasIcons]=\"true\"></eui-app-sidebar-menu>\n </eui-app-sidebar-body>\n </eui-app-sidebar>\n</ng-container>\n\n<div class=\"eui-app-main\" *ngIf=\"isViewLoaded\">\n <ng-content select=\"eui-app-top-message\"></ng-content>\n\n <ng-content select=\"eui-app-header\"></ng-content>\n\n <ng-container\n *ngIf=\"!appToolbar && (asService.state$ | async).hasHeader && (asService.breakpoints$ | async).isMobile; else elseBlockToolbar\">\n <eui-app-toolbar>\n <eui-toolbar></eui-toolbar>\n </eui-app-toolbar>\n </ng-container>\n\n <ng-template #elseBlockToolbar>\n <ng-content select=\"eui-app-toolbar\"></ng-content>\n </ng-template>\n\n <ng-content select=\"eui-app-breadcrumb\"></ng-content>\n\n <div class=\"eui-app-main-content\" role=\"main\">\n <ng-content select=\"eui-app-page-wrapper\"></ng-content>\n <ng-container *ngIf=\"hasNoPageWrapper\">\n <router-outlet></router-outlet>\n </ng-container>\n </div>\n\n <ng-content select=\"eui-app-footer\"></ng-content>\n</div>\n\n<eui-growl\n [value]=\"euiGrowlService.growlMessages\"\n [sticky]=\"euiGrowlService.isGrowlSticky\"\n [closeAllSticky]=\"euiGrowlService.isCloseAllSticky\"\n [life]=\"euiGrowlService.growlLife\"\n [position]=\"euiGrowlService.growlPosition\"\n (clicked)=\"euiGrowlService.growlCallback ? euiGrowlService.growlCallback(): null\"></eui-growl>\n\n<eui-block-document [isBlocked]=\"(asService.state$ | async).isBlockDocumentActive\"></eui-block-document>\n", styles: [".eui-app{display:flex;overflow:hidden}@media screen and (max-width: 767px){.eui-app.sidebar--open:before{background:#0000004d;bottom:0;content:\"\";position:fixed;right:0;top:calc(var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-top-message-height));transition:all .1s ease;width:100vw;z-index:980}}@media screen and (min-width: 768px) and (max-width: 995px){.eui-app.sidebar--open:before{background:#0000004d;bottom:0;content:\"\";position:fixed;right:0;top:calc(var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-top-message-height));transition:all .1s ease;width:100vw;z-index:980}}@media screen and (min-width: 996px){.sidebar--hidden.eui-app.sidebar--open:before{background:#0000004d;bottom:0;content:\"\";position:fixed;right:0;top:calc(var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-top-message-height));transition:all .1s ease;width:100vw;z-index:980}}.eui-app-main{min-height:100vh;background:var(--eui-c-bg);width:calc(100% - var(--eui-app-sidebar-width));margin-left:var(--eui-app-sidebar-width);transition:top .1s ease,width .1s ease-in,margin-left .1s ease-in-out;display:flex;flex-direction:column}@media screen and (max-width: 767px){.eui-app-main{margin-left:0;width:100%}}@media screen and (min-width: 768px) and (max-width: 995px){.eui-app-main{margin-left:0;width:100%}}@media screen and (min-width: 996px){.sidebar--close .eui-app-main{margin-left:var(--eui-app-sidebar-width-close);width:calc(100% - var(--eui-app-sidebar-width-close))}.sidebar--hidden.sidebar--close .eui-app-main,.sidebar--hidden.sidebar--open .eui-app-main{margin-left:0;width:100%}}.eui-app-main-content{flex-grow:1;margin-top:calc(var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-top-message-height) - var(--eui-app-breadcrumb-height));position:relative}eui-app-page-wrapper{display:flex;width:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: i4.EuiAppToolbarComponent, selector: "eui-app-toolbar", inputs: ["euiSecondary"] }, { kind: "component", type: i5.EuiToolbarComponent, selector: "eui-toolbar", inputs: ["euiSecondary", "euiPrimary"] }, { kind: "component", type: i6.EuiAppSidebarComponent, selector: "eui-app-sidebar" }, { kind: "component", type: i7.EuiAppSidebarBodyComponent, selector: "eui-app-sidebar-body" }, { kind: "component", type: i8.EuiAppSidebarMenuComponent, selector: "eui-app-sidebar-menu", inputs: ["hasFilter", "hasIcons", "hasTooltip", "expandAllItems", "isCollapsed", "hasCollapsedInitials", "isFlat", "hasScrollToItem", "hasBoldRootLevel", "items"], outputs: ["sidebarItemClick"] }, { kind: "component", type: i9.EuiBlockDocumentComponent, selector: "eui-block-document", inputs: ["isBlocked", "ariaLabel"] }, { kind: "component", type: i10.EuiGrowlComponent, selector: "eui-growl", inputs: ["e2eAttr", "sticky", "life", "value", "closeAllSticky", "position"], outputs: ["growlClick"] }, { kind: "component", type: i11.EuiDimmerComponent, selector: "eui-dimmer", inputs: ["isDimmerActive", "e2eAttr"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
100
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.1.0", type: EuiAppComponent, selector: "eui-app", inputs: { appSubTitle: "appSubTitle", themeClass: "themeClass", isSidebarOpen: ["isSidebarOpen", "isSidebarOpen", booleanAttribute], isShrinkHeaderActive: ["isShrinkHeaderActive", "isShrinkHeaderActive", booleanAttribute], isSidebarHidden: ["isSidebarHidden", "isSidebarHidden", booleanAttribute] }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "appSidebar", first: true, predicate: i0.forwardRef(() => EuiAppSidebarComponent), descendants: true }, { propertyName: "customPageWrapper", first: true, predicate: i0.forwardRef(() => EuiAppPageWrapperDirective), descendants: true }, { propertyName: "appToolbar", first: true, predicate: i0.forwardRef(() => EuiAppToolbarComponent), descendants: true }], usesOnChanges: true, ngImport: i0, template: "<eui-dimmer [isDimmerActive]=\"(asService.state$ | async).isDimmerActive\"></eui-dimmer>\n\n<ng-content select=\"eui-app-sidebar\"></ng-content>\n<ng-container *ngIf=\"!appSidebar && (asService.state$ | async).menuLinks.length !== 0 && (asService.state$ | async).hasHeader && (asService.breakpoints$ | async).isMobile\">\n <eui-app-sidebar>\n <eui-app-sidebar-body>\n <eui-app-sidebar-menu [items]=\"(asService.state$ | async).menuLinks\" [hasIcons]=\"true\"></eui-app-sidebar-menu>\n </eui-app-sidebar-body>\n </eui-app-sidebar>\n</ng-container>\n\n<div class=\"eui-app-main\" *ngIf=\"isViewLoaded\">\n <ng-content select=\"eui-app-top-message\"></ng-content>\n\n <ng-content select=\"eui-app-header\"></ng-content>\n\n <ng-container\n *ngIf=\"!appToolbar && (asService.state$ | async).hasHeader && (asService.breakpoints$ | async).isMobile; else elseBlockToolbar\">\n <eui-app-toolbar>\n <eui-toolbar></eui-toolbar>\n </eui-app-toolbar>\n </ng-container>\n\n <ng-template #elseBlockToolbar>\n <ng-content select=\"eui-app-toolbar\"></ng-content>\n </ng-template>\n\n <ng-content select=\"eui-app-breadcrumb\"></ng-content>\n\n <div class=\"eui-app-main-content\" role=\"main\">\n <ng-content select=\"eui-app-page-wrapper\"></ng-content>\n <ng-container *ngIf=\"hasNoPageWrapper\">\n <router-outlet></router-outlet>\n </ng-container>\n </div>\n\n <ng-content select=\"eui-app-footer\"></ng-content>\n</div>\n\n<eui-growl\n [value]=\"euiGrowlService.growlMessages\"\n [sticky]=\"euiGrowlService.isGrowlSticky\"\n [closeAllSticky]=\"euiGrowlService.isCloseAllSticky\"\n [life]=\"euiGrowlService.growlLife\"\n [position]=\"euiGrowlService.growlPosition\"\n (clicked)=\"euiGrowlService.growlCallback ? euiGrowlService.growlCallback(): null\"></eui-growl>\n\n<eui-block-document [isBlocked]=\"(asService.state$ | async).isBlockDocumentActive\"></eui-block-document>\n", styles: [".eui-app{display:flex;overflow:hidden}@media screen and (max-width: 767px){.eui-app.sidebar--open:before{background:#0000004d;bottom:0;content:\"\";position:fixed;right:0;top:calc(var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-top-message-height));transition:all .1s ease;width:100vw;z-index:980}}@media screen and (min-width: 768px) and (max-width: 995px){.eui-app.sidebar--open:before{background:#0000004d;bottom:0;content:\"\";position:fixed;right:0;top:calc(var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-top-message-height));transition:all .1s ease;width:100vw;z-index:980}}@media screen and (min-width: 996px){.sidebar--hidden.eui-app.sidebar--open:before{background:#0000004d;bottom:0;content:\"\";position:fixed;right:0;top:calc(var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-top-message-height));transition:all .1s ease;width:100vw;z-index:980}}.eui-app-main{min-height:100vh;background:var(--eui-c-bg);width:calc(100% - var(--eui-app-sidebar-width));margin-left:var(--eui-app-sidebar-width);transition:top .1s ease,width .1s ease-in,margin-left .1s ease-in-out;display:flex;flex-direction:column}@media screen and (max-width: 767px){.eui-app-main{margin-left:0;width:100%}}@media screen and (min-width: 768px) and (max-width: 995px){.eui-app-main{margin-left:0;width:100%}}@media screen and (min-width: 996px){.sidebar--close .eui-app-main{margin-left:var(--eui-app-sidebar-width-close);width:calc(100% - var(--eui-app-sidebar-width-close))}.sidebar--hidden.sidebar--close .eui-app-main,.sidebar--hidden.sidebar--open .eui-app-main{margin-left:0;width:100%}}.eui-app-main-content{flex-grow:1;margin-top:calc(var(--eui-app-header-height) + var(--eui-app-toolbar-height) + var(--eui-app-top-message-height) - var(--eui-app-breadcrumb-height));position:relative}eui-app-page-wrapper{display:flex;width:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: i4.EuiAppToolbarComponent, selector: "eui-app-toolbar", inputs: ["euiSecondary"] }, { kind: "component", type: i5.EuiToolbarComponent, selector: "eui-toolbar", inputs: ["euiSecondary", "euiPrimary"] }, { kind: "component", type: i6.EuiAppSidebarComponent, selector: "eui-app-sidebar" }, { kind: "component", type: i7.EuiAppSidebarBodyComponent, selector: "eui-app-sidebar-body" }, { kind: "component", type: i8.EuiAppSidebarMenuComponent, selector: "eui-app-sidebar-menu", inputs: ["hasFilter", "hasIcons", "hasTooltip", "expandAllItems", "isCollapsed", "hasCollapsedInitials", "isFlat", "hasScrollToItem", "hasBoldRootLevel", "items"], outputs: ["sidebarItemClick", "sidebarItemToggle"] }, { kind: "component", type: i9.EuiBlockDocumentComponent, selector: "eui-block-document", inputs: ["isBlocked", "ariaLabel"] }, { kind: "component", type: i10.EuiGrowlComponent, selector: "eui-growl", inputs: ["e2eAttr", "sticky", "life", "value", "closeAllSticky", "position"], outputs: ["growlClick"] }, { kind: "component", type: i11.EuiDimmerComponent, selector: "eui-dimmer", inputs: ["isDimmerActive", "e2eAttr"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
101
101
|
}
|
|
102
102
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: EuiAppComponent, decorators: [{
|
|
103
103
|
type: Component,
|
|
@@ -30,6 +30,7 @@ export declare class EuiMenuComponent implements OnInit, OnChanges, OnDestroy, A
|
|
|
30
30
|
hasBoldRootLevel: boolean;
|
|
31
31
|
isClick: EventEmitter<boolean>;
|
|
32
32
|
itemClick: EventEmitter<EuiMenuItem>;
|
|
33
|
+
expandToggle: EventEmitter<EuiMenuItem<unknown>>;
|
|
33
34
|
protected hasExpandIcon: boolean;
|
|
34
35
|
private subscription;
|
|
35
36
|
private focusKeyManager;
|
|
@@ -164,7 +165,7 @@ export declare class EuiMenuComponent implements OnInit, OnChanges, OnDestroy, A
|
|
|
164
165
|
*/
|
|
165
166
|
private isFilterEnabled;
|
|
166
167
|
static ɵfac: i0.ɵɵFactoryDeclaration<EuiMenuComponent, never>;
|
|
167
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<EuiMenuComponent, "eui-menu", never, { "items": { "alias": "items"; "required": false; }; "searchFilterLabel": { "alias": "searchFilterLabel"; "required": false; }; "externalLinkLabel": { "alias": "externalLinkLabel"; "required": false; }; "fragmentId": { "alias": "fragmentId"; "required": false; }; "filterValue": { "alias": "filterValue"; "required": false; }; "isCollapsed": { "alias": "isCollapsed"; "required": false; }; "hasCollapsedInitials": { "alias": "hasCollapsedInitials"; "required": false; }; "hasFilter": { "alias": "hasFilter"; "required": false; }; "hasIcons": { "alias": "hasIcons"; "required": false; }; "hasTooltip": { "alias": "hasTooltip"; "required": false; }; "expandAllItems": { "alias": "expandAllItems"; "required": false; }; "isFlat": { "alias": "isFlat"; "required": false; }; "hasScrollToItem": { "alias": "hasScrollToItem"; "required": false; }; "hasBoldRootLevel": { "alias": "hasBoldRootLevel"; "required": false; }; }, { "isClick": "isClick"; "itemClick": "itemClick"; }, never, never, false, never>;
|
|
168
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<EuiMenuComponent, "eui-menu", never, { "items": { "alias": "items"; "required": false; }; "searchFilterLabel": { "alias": "searchFilterLabel"; "required": false; }; "externalLinkLabel": { "alias": "externalLinkLabel"; "required": false; }; "fragmentId": { "alias": "fragmentId"; "required": false; }; "filterValue": { "alias": "filterValue"; "required": false; }; "isCollapsed": { "alias": "isCollapsed"; "required": false; }; "hasCollapsedInitials": { "alias": "hasCollapsedInitials"; "required": false; }; "hasFilter": { "alias": "hasFilter"; "required": false; }; "hasIcons": { "alias": "hasIcons"; "required": false; }; "hasTooltip": { "alias": "hasTooltip"; "required": false; }; "expandAllItems": { "alias": "expandAllItems"; "required": false; }; "isFlat": { "alias": "isFlat"; "required": false; }; "hasScrollToItem": { "alias": "hasScrollToItem"; "required": false; }; "hasBoldRootLevel": { "alias": "hasBoldRootLevel"; "required": false; }; }, { "isClick": "isClick"; "itemClick": "itemClick"; "expandToggle": "expandToggle"; }, never, never, false, never>;
|
|
168
169
|
static ngAcceptInputType_isCollapsed: unknown;
|
|
169
170
|
static ngAcceptInputType_hasCollapsedInitials: unknown;
|
|
170
171
|
static ngAcceptInputType_hasFilter: unknown;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"eui-menu.component.d.ts","sourceRoot":"","sources":["../../eui-menu/eui-menu.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAKH,MAAM,EAEN,YAAY,EACZ,SAAS,EACT,aAAa,EAGb,SAAS,EACT,aAAa,EAEb,SAAS,EACT,iBAAiB,EAEjB,UAAU,EACb,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,MAAM,EAAE,cAAc,EAAiB,MAAM,iBAAiB,CAAC;AAMxE,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;;AAE3D,qBAMa,gBAAiB,YAAW,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,aAAa;
|
|
1
|
+
{"version":3,"file":"eui-menu.component.d.ts","sourceRoot":"","sources":["../../eui-menu/eui-menu.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAKH,MAAM,EAEN,YAAY,EACZ,SAAS,EACT,aAAa,EAGb,SAAS,EACT,aAAa,EAEb,SAAS,EACT,iBAAiB,EAEjB,UAAU,EACb,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,MAAM,EAAE,cAAc,EAAiB,MAAM,iBAAiB,CAAC;AAMxE,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;;AAE3D,qBAMa,gBAAiB,YAAW,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,aAAa;IA2C5E,OAAO,CAAC,MAAM;IACd,OAAO,CAAC,KAAK;IACb,OAAO,CAAC,EAAE;IA5CsB,SAAS,CAAC,mBAAmB,EAAE,SAAS,CAAC,oBAAoB,CAAC,CAAC;IACnD,SAAS,CAAC,WAAW,EAAE,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAEpG,IACW,UAAU,IAAI,MAAM,CAO9B;IAEQ,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,SAAM;IAEc,WAAW,UAAS;IACpB,oBAAoB,UAAS;IAC7B,SAAS,UAAS;IAClB,QAAQ,UAAS;IACjB,UAAU,UAAQ;IAC1D;;;OAGG;IACqC,cAAc,UAAS;IACvB,MAAM,UAAS;IACf,eAAe,UAAS;IACxB,gBAAgB,UAAS;IAEvD,OAAO,EAAE,YAAY,CAAC,OAAO,CAAC,CAAsB;IACpD,SAAS,EAAE,YAAY,CAAC,WAAW,CAAC,CAAmC;IACvE,YAAY,qCAAmC;IAEzD,SAAS,CAAC,aAAa,UAAQ;IAC/B,OAAO,CAAC,YAAY,CAAe;IACnC,OAAO,CAAC,eAAe,CAAwC;gBAGnD,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,cAAc,EACrB,EAAE,EAAE,iBAAiB;IAGjC,eAAe,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAUxC,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IA2GrC,WAAW,CAAC,OAAO,EAAE,aAAa,GAAG,IAAI;IA4CzC,QAAQ,IAAI,IAAI;IAiBhB,eAAe,IAAI,IAAI;IAUvB,WAAW,IAAG,IAAI;IAMlB,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI;IAgC1C,SAAS,CAAC,cAAc,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI;IAQjD,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAIpD;;;;OAIG;IACH,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IACtC,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IASvC;;;;;;;;;OASG;IACH,SAAS,CAAC,iBAAiB,CAAC,IAAI,EAAE,WAAW,GAAG,OAAO;IAWvD;;;;;OAKG;IACH,OAAO,CAAC,iBAAiB;IAMzB;;;;;OAKG;IACH,OAAO,CAAC,qBAAqB;IAI7B;;;;;OAKG;IACH,OAAO,CAAC,iBAAiB;IAIzB;;;;OAIG;IACH,OAAO,CAAC,yBAAyB;IAKjC;;;;;;OAMG;IACH,OAAO,CAAC,eAAe;IAevB;;;;;;OAMG;IACH,OAAO,CAAC,qBAAqB;IAU7B;;;;;;OAMG;IACH,OAAO,CAAC,eAAe;IAavB;;;;;;OAMG;IACH,OAAO,CAAC,cAAc;IAgCtB;;;;;;;;OAQG;IACH,OAAO,CAAC,oBAAoB;IAkB5B;;;;;;;OAOG;IACH,OAAO,CAAC,mBAAmB;IAO3B;;;;;OAKG;IACH,OAAO,CAAC,iBAAiB;IAOzB;;;;OAIG;IACH,OAAO,CAAC,WAAW;IAUnB;;;;OAIG;IACH,OAAO,CAAC,YAAY;IAcpB;;;OAGG;IACH,OAAO,CAAC,eAAe;yCA3iBd,gBAAgB;2CAAhB,gBAAgB;0CA+iBggb,OAAQ;mDAAR,OAAQ;wCAAR,OAAQ;uCAAR,OAAQ;yCAAR,OAAQ;6CAAR,OAAQ;qCAAR,OAAQ;8CAAR,OAAQ;+CAAR,OAAQ;CADpib"}
|
|
@@ -787,7 +787,7 @@ class EuiAutocompleteComponent {
|
|
|
787
787
|
this.cd.markForCheck();
|
|
788
788
|
}
|
|
789
789
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: EuiAutocompleteComponent, deps: [{ token: i1$1.Overlay }, { token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i2.LiveAnnouncer }, { token: i3.ScrollDispatcher }, { token: i4.EuiAppShellService }, { token: i1.BaseStatesDirective }, { token: i6.NgControl, optional: true, self: true }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
790
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: EuiAutocompleteComponent, selector: "eui-autocomplete, input[euiAutocomplete]", inputs: { inputId: "inputId", autocompleteData: "autocompleteData", visibleOptions: "visibleOptions", matching: "matching", placeholder: "placeholder", autocompleteDataSelected: "autocompleteDataSelected", chipsSortOrder: "chipsSortOrder", itemsSortOrder: "itemsSortOrder", chipsPosition: "chipsPosition", groupBy: "groupBy", toggleLinkMoreLabel: "toggleLinkMoreLabel", toggleLinkLessLabel: "toggleLinkLessLabel", classList: "classList", panelWidth: "panelWidth", dragAndDropSourceName: "dragAndDropSourceName", dragAndDropConnectedTo: "dragAndDropConnectedTo", isFreeValueAllowed: ["isFreeValueAllowed", "isFreeValueAllowed", booleanAttribute], isReadonly: ["isReadonly", "isReadonly", booleanAttribute], isLoading: ["isLoading", "isLoading", booleanAttribute], hasChips: ["hasChips", "hasChips", booleanAttribute], isAsync: ["isAsync", "isAsync", booleanAttribute], isChipsSorted: ["isChipsSorted", "isChipsSorted", booleanAttribute], isItemsSorted: ["isItemsSorted", "isItemsSorted", booleanAttribute], isChipsRemovable: ["isChipsRemovable", "isChipsRemovable", booleanAttribute], isDuplicateValueAllowed: ["isDuplicateValueAllowed", "isDuplicateValueAllowed", booleanAttribute], isAddOnBlur: ["isAddOnBlur", "isAddOnBlur", booleanAttribute], isForceSelection: ["isForceSelection", "isForceSelection", booleanAttribute], maxVisibleChipsCount: ["maxVisibleChipsCount", "maxVisibleChipsCount", numberAttribute], chipsLabelTruncateCount: ["chipsLabelTruncateCount", "chipsLabelTruncateCount", numberAttribute], isMaxVisibleChipsOpened: ["isMaxVisibleChipsOpened", "isMaxVisibleChipsOpened", booleanAttribute], isChipsDragAndDrop: ["isChipsDragAndDrop", "isChipsDragAndDrop", booleanAttribute] }, outputs: { panelClose: "panelClose", panelOpen: "panelOpen", inputFocus: "inputFocus", inputBlur: "inputBlur", clear: "clear", 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: "templatePortalContent", first: true, predicate: ["templatePortalContent"], descendants: true }, { propertyName: "inputContainerRef", first: true, predicate: ["inputContainerRef"], descendants: true }, { propertyName: "virtualScrolling", first: true, predicate: ["virtualScrolling"], descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, read: ElementRef }], usesOnChanges: true, hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiSecondary", "euiSecondary", "euiSuccess", "euiSuccess", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiDanger", "euiDanger", "euiAccent", "euiAccent"] }], ngImport: i0, template: "<div class=\"eui-autocomplete__wrapper\">\n @if (chipsPosition === 'bottom') {\n <ng-container *ngTemplateOutlet=\"control\"></ng-container>\n }\n @if (hasChips) {\n <eui-chip-list\n [chips]=\"chips\"\n [isChipsRemovable]=\"isChipsRemovable && !isReadonly\"\n [maxVisibleChipsCount]=\"maxVisibleChipsCount\"\n [isMaxVisibleChipsOpened]=\"isMaxVisibleChipsOpened\"\n [chipsLabelTruncateCount]=\"chipsLabelTruncateCount\"\n [toggleLinkMoreLabel]=\"toggleLinkMoreLabel\"\n [toggleLinkLessLabel]=\"toggleLinkLessLabel\"\n [isChipsDragAndDrop]=\"isChipsDragAndDrop\"\n [dragAndDropSourceName]=\"dragAndDropSourceName\"\n [dragAndDropConnectedTo]=\"dragAndDropConnectedTo\"\n (chipDrop)=\"onChipDropped($event)\"\n (chipDragStart)=\"onChipDragStarted($event)\"\n (chipDragRelease)=\"onChipDragReleased($event)\"\n (chipRemove)=\"onChipRemove($event)\">\n <euiChipListAppendContent>\n <ng-template [ngIf]=\"chipsPosition === 'inside'\">\n <ng-container *ngTemplateOutlet=\"control\"></ng-container>\n </ng-template>\n </euiChipListAppendContent>\n </eui-chip-list>\n }\n @if (chipsPosition === 'top') {\n <ng-container *ngTemplateOutlet=\"control\"></ng-container>\n }\n</div>\n\n<ng-template #control>\n <div *ngIf=\"!hasChips || (hasChips && !isReadonly)\" class=\"eui-autocomplete__input-container\" #inputContainerRef>\n <input\n [attr.id]=\"inputId\"\n #input\n euiInputText\n [euiClearable]=\"!isReadonly && !isDisabled\"\n [euiLoading]=\"isLoading\"\n [formControl]=\"autocompleteControl\"\n class=\"eui-autocomplete__input {{ classList }}\"\n placeholder=\"{{ placeholder }}\"\n [readonly]=\"isReadonly\"\n (clear)=\"onClear()\"\n (click)=\"openPanel()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n [attr.aria-controls]=\"isOpen ? 'eui-autocomplete__panel' : null\"\n [attr.aria-label]=\"autocompleteControl.value?.length > 0 ? autocompleteControl.value : 'Input field without value'\"\n [attr.aria-required]=\"hasAriaRequiredAttribute ? 'true' : null\"\n aria-autocomplete=\"both\"\n aria-haspopup=\"true\" />\n </div>\n</ng-template>\n\n<ng-template #templatePortalContent>\n <div\n id=\"eui-autocomplete__panel\"\n class=\"eui-autocomplete__panel\"\n [@panelAnimation]=\"isOpen ? 'visible' : 'hidden'\"\n role=\"listbox\"\n aria-live=\"polite\"\n aria-label=\"Autocomplete panel\">\n <cdk-virtual-scroll-viewport\n #virtualScrolling\n [itemSize]=\"itemSize\"\n tabindex=\"0\"\n minBufferPx=\"500\"\n maxBufferPx=\"750\"\n [style.min-height]=\"cdkVirtualScrollViewport + 'px'\">\n @if (groupBy) {\n @for (distinctOptionGroup of distinctOptionGroups; let i = $index; track distinctOptionGroup) {\n @if ((groupedOptions | async)[distinctOptionGroup].options.length > 0) {\n <eui-autocomplete-option-group [label]=\"distinctOptionGroup\">\n <div class=\"eui-autocomplete-option-group__label\">\n @if (autocompleteOptGroupTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"autocompleteOptGroupTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: { label: distinctOptionGroup } }\">\n </ng-template>\n } @else {\n {{ distinctOptionGroup }}\n }\n </div>\n <div class=\"eui-autocomplete-option-group__options\">\n @for (autocompleteOption of (groupedOptions | async)[distinctOptionGroup].options; let j = $index; track autocompleteOption.id) {\n <eui-autocomplete-option\n isGroupItem\n [isActive]=\"selectedOptionIndex === (groupedOptions | async)[distinctOptionGroup].ancestorLength + j\"\n [isDisabled]=\"autocompleteOption.isDisabled\"\n [attr.aria-disabled]=\"autocompleteOption.isDisabled\"\n [euiVariant]=\"autocompleteOption.typeClass\"\n (click)=\"onOptionSelected(autocompleteOption)\">\n @if (autocompleteOptionTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"autocompleteOptionTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: autocompleteOption }\">\n </ng-template>\n } @else {\n @if (autocompleteOption.iconClass) {\n <span class=\"{{ autocompleteOption.iconClass }}\"></span>\n } @else if (autocompleteOption.iconSvgName) {\n <eui-icon-svg icon=\"{{ autocompleteOption.iconSvgName }}\"></eui-icon-svg>\n }\n {{ autocompleteOption.label }}\n }\n </eui-autocomplete-option>\n }\n </div>\n </eui-autocomplete-option-group>\n }\n }\n } @else {\n <eui-autocomplete-option\n *cdkVirtualFor=\"let autocompleteOption of autocompleteOptions | async; let i = index; trackBy: optionsTrackByFn\"\n [isActive]=\"selectedOptionIndex === i\"\n [isDisabled]=\"autocompleteOption.isDisabled\"\n [attr.aria-disabled]=\"autocompleteOption.isDisabled\"\n [euiVariant]=\"autocompleteOption.typeClass\"\n (click)=\"onOptionSelected(autocompleteOption)\">\n @if (autocompleteOptionTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"autocompleteOptionTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: autocompleteOption }\">\n </ng-template>\n } @else {\n @if (autocompleteOption.iconClass) {\n <span class=\"{{ autocompleteOption.iconClass }}\"></span>\n } @else if (autocompleteOption.iconSvgName) {\n <eui-icon-svg icon=\"{{ autocompleteOption.iconSvgName }}\"></eui-icon-svg>\n }\n {{ autocompleteOption.label }}\n }\n </eui-autocomplete-option>\n }\n </cdk-virtual-scroll-viewport>\n </div> \n</ng-template>", styles: [".eui-autocomplete,.eui-autocomplete__wrapper{width:100%}.eui-autocomplete__wrapper .eui-autocomplete__input-container{display:flex;width:100%}.eui-autocomplete__panel-container .eui-autocomplete__panel{box-shadow:var(--eui-sh-8);width:100%}.eui-autocomplete__panel-container.eui-autocomplete__panel-container--no-option .eui-autocomplete__panel{box-shadow:none}.eui-autocomplete.eui-autocomplete--chips-position-bottom .eui-autocomplete__input-container{margin-bottom:var(--eui-s-2xs)}.eui-autocomplete.eui-autocomplete--chips-position-inside .eui-autocomplete__wrapper{background-color:var(--eui-c-white);border:var(--eui-bw-xs) solid var(--eui-c-neutral-lighter);border-radius:var(--eui-br-m);padding:0 var(--eui-s-2xs)}.eui-autocomplete.eui-autocomplete--chips-position-inside .eui-autocomplete__wrapper .eui-chip-list,.eui-autocomplete.eui-autocomplete--chips-position-inside .eui-autocomplete__wrapper .eui-chip-list .eui-chip-list-container .eui-chip-list-wrapper .eui-chip-list__chip-container{display:block}.eui-autocomplete.eui-autocomplete--chips-position-inside .eui-autocomplete__wrapper .eui-chip-list .eui-chip-list-container .eui-chip-list-wrapper .eui-chip-list__chip-container .eui-chip{margin-bottom:0;margin-top:var(--eui-s-2xs)}.eui-autocomplete.eui-autocomplete--chips-position-inside .eui-autocomplete__wrapper .eui-chip-list .eui-input-text{border:var(--eui-bw-none);min-height:calc(var(--eui-s-2xl) + var(--eui-s-2xs) - 2px)}.eui-autocomplete.eui-autocomplete--chips-position-inside .eui-autocomplete__wrapper .eui-chip-list euichiplistappendcontent{flex-grow:1}button~.eui-autocomplete .eui-autocomplete__input,.eui-input-group-addon-item~.eui-autocomplete .eui-autocomplete__input{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0}.eui-autocomplete:has(+button) .eui-autocomplete__input{border-top-right-radius:0;border-bottom-right-radius:0}.eui-autocomplete:has(+.eui-input-group-addon-item) .eui-autocomplete__input{border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}.eui-autocomplete-option-group .eui-autocomplete-option-group__label{align-items:center;background-color:var(--eui-c-neutral-bg-light);border-bottom:1px solid var(--eui-c-neutral-bg-light);border-left:var(--eui-bw-m) solid transparent;cursor:pointer;display:flex;font-weight:700;min-height:var(--eui-s-3xl);padding-left:var(--eui-s-s);padding-right:var(--eui-s-s)}.eui-autocomplete-option-group .eui-autocomplete-option-group__label .eui-icon,.eui-autocomplete-option-group .eui-autocomplete-option-group__label .eui-icon-svg,.eui-autocomplete-option-group .eui-autocomplete-option-group__label .eui-flag-icon{margin-right:var(--eui-s-2xs)}.eui-autocomplete-option{align-items:center;border-bottom:1px solid var(--eui-c-neutral-bg-light);border-left:var(--eui-bw-m) solid transparent;cursor:pointer;display:flex;min-height:var(--eui-s-3xl);padding-left:var(--eui-s-s);padding-right:var(--eui-s-s)}.eui-autocomplete-option:hover{background-color:var(--eui-c-neutral-bg-light)}.eui-autocomplete-option--group-item{padding-left:var(--eui-s-l)}.eui-autocomplete-option .eui-icon,.eui-autocomplete-option .eui-icon-svg,.eui-autocomplete-option .eui-flag-icon{margin-right:var(--eui-s-xs)}.eui-autocomplete-option--primary{border-left-color:var(--eui-c-primary)}.eui-autocomplete-option--secondary{border-left-color:var(--eui-c-neutral-lighter)}.eui-autocomplete-option--info{border-left-color:var(--eui-c-info)}.eui-autocomplete-option--success{border-left-color:var(--eui-c-success-dark)}.eui-autocomplete-option--warning{border-left-color:var(--eui-c-warning)}.eui-autocomplete-option--danger{border-left-color:var(--eui-c-danger-dark)}.eui-autocomplete-option--accent{border-left-color:var(--eui-c-accent)}.eui-autocomplete-option--active{background-color:var(--eui-c-primary-lightest)}.eui-autocomplete-option--disabled{cursor:default;opacity:.4}.eui-autocomplete-option--disabled:hover{background:none}\n"], dependencies: [{ kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: i8.EuiInputTextComponent, selector: "input[euiInputText]", inputs: ["isInvalid"] }, { kind: "component", type: i9.EuiChipListComponent, selector: "eui-chip-list, div[euiChipList], ul[euiChipList]", inputs: ["chips", "toggleLinkMoreLabel", "toggleLinkLessLabel", "chipsSortOrder", "dragAndDropSourceName", "dragAndDropConnectedTo", "ariaLabel", "dropListOrientation", "isSquared", "isChipsRemovable", "isMaxVisibleChipsOpened", "isChipsSorted", "isChipsDragAndDrop", "isGrid", "maxVisibleChipsCount", "chipsLabelTruncateCount"], outputs: ["chipsInit", "chipRemove", "chipDragStart", "chipDragRelease", "chipDrop", "chiplistFocus"] }, { kind: "directive", type: i9.EuiChipListAppendContentDirective, selector: "euiChipListAppendContent" }, { kind: "component", type: i10.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: EuiAutocompleteOptionComponent, selector: "eui-autocomplete-option", inputs: ["isActive", "isDisabled", "isGroupItem"] }, { kind: "component", type: EuiAutocompleteOptionGroupComponent, selector: "eui-autocomplete-option-group", inputs: ["label"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }], animations: [panelAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
790
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: EuiAutocompleteComponent, selector: "eui-autocomplete, input[euiAutocomplete]", inputs: { inputId: "inputId", autocompleteData: "autocompleteData", visibleOptions: "visibleOptions", matching: "matching", placeholder: "placeholder", autocompleteDataSelected: "autocompleteDataSelected", chipsSortOrder: "chipsSortOrder", itemsSortOrder: "itemsSortOrder", chipsPosition: "chipsPosition", groupBy: "groupBy", toggleLinkMoreLabel: "toggleLinkMoreLabel", toggleLinkLessLabel: "toggleLinkLessLabel", classList: "classList", panelWidth: "panelWidth", dragAndDropSourceName: "dragAndDropSourceName", dragAndDropConnectedTo: "dragAndDropConnectedTo", isFreeValueAllowed: ["isFreeValueAllowed", "isFreeValueAllowed", booleanAttribute], isReadonly: ["isReadonly", "isReadonly", booleanAttribute], isLoading: ["isLoading", "isLoading", booleanAttribute], hasChips: ["hasChips", "hasChips", booleanAttribute], isAsync: ["isAsync", "isAsync", booleanAttribute], isChipsSorted: ["isChipsSorted", "isChipsSorted", booleanAttribute], isItemsSorted: ["isItemsSorted", "isItemsSorted", booleanAttribute], isChipsRemovable: ["isChipsRemovable", "isChipsRemovable", booleanAttribute], isDuplicateValueAllowed: ["isDuplicateValueAllowed", "isDuplicateValueAllowed", booleanAttribute], isAddOnBlur: ["isAddOnBlur", "isAddOnBlur", booleanAttribute], isForceSelection: ["isForceSelection", "isForceSelection", booleanAttribute], maxVisibleChipsCount: ["maxVisibleChipsCount", "maxVisibleChipsCount", numberAttribute], chipsLabelTruncateCount: ["chipsLabelTruncateCount", "chipsLabelTruncateCount", numberAttribute], isMaxVisibleChipsOpened: ["isMaxVisibleChipsOpened", "isMaxVisibleChipsOpened", booleanAttribute], isChipsDragAndDrop: ["isChipsDragAndDrop", "isChipsDragAndDrop", booleanAttribute] }, outputs: { panelClose: "panelClose", panelOpen: "panelOpen", inputFocus: "inputFocus", inputBlur: "inputBlur", clear: "clear", 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: "templatePortalContent", first: true, predicate: ["templatePortalContent"], descendants: true }, { propertyName: "inputContainerRef", first: true, predicate: ["inputContainerRef"], descendants: true }, { propertyName: "virtualScrolling", first: true, predicate: ["virtualScrolling"], descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, read: ElementRef }], usesOnChanges: true, hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiSecondary", "euiSecondary", "euiSuccess", "euiSuccess", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiDanger", "euiDanger", "euiAccent", "euiAccent"] }], ngImport: i0, template: "<div class=\"eui-autocomplete__wrapper\">\n @if (chipsPosition === 'bottom') {\n <ng-container *ngTemplateOutlet=\"control\"></ng-container>\n }\n @if (hasChips) {\n <eui-chip-list\n [chips]=\"chips\"\n [isChipsRemovable]=\"isChipsRemovable && !isReadonly\"\n [maxVisibleChipsCount]=\"maxVisibleChipsCount\"\n [isMaxVisibleChipsOpened]=\"isMaxVisibleChipsOpened\"\n [chipsLabelTruncateCount]=\"chipsLabelTruncateCount\"\n [toggleLinkMoreLabel]=\"toggleLinkMoreLabel\"\n [toggleLinkLessLabel]=\"toggleLinkLessLabel\"\n [isChipsDragAndDrop]=\"isChipsDragAndDrop\"\n [dragAndDropSourceName]=\"dragAndDropSourceName\"\n [dragAndDropConnectedTo]=\"dragAndDropConnectedTo\"\n (chipDrop)=\"onChipDropped($event)\"\n (chipDragStart)=\"onChipDragStarted($event)\"\n (chipDragRelease)=\"onChipDragReleased($event)\"\n (chipRemove)=\"onChipRemove($event)\">\n <euiChipListAppendContent>\n <ng-template [ngIf]=\"chipsPosition === 'inside'\">\n <ng-container *ngTemplateOutlet=\"control\"></ng-container>\n </ng-template>\n </euiChipListAppendContent>\n </eui-chip-list>\n }\n @if (chipsPosition === 'top') {\n <ng-container *ngTemplateOutlet=\"control\"></ng-container>\n }\n</div>\n\n<ng-template #control>\n <div *ngIf=\"!hasChips || (hasChips && !isReadonly)\" class=\"eui-autocomplete__input-container {{ classList }}\" #inputContainerRef>\n <input\n [attr.id]=\"inputId\"\n #input\n euiInputText\n [euiClearable]=\"!isReadonly && !isDisabled\"\n [euiLoading]=\"isLoading\"\n [formControl]=\"autocompleteControl\"\n class=\"eui-autocomplete__input {{ classList }}\"\n placeholder=\"{{ placeholder }}\"\n [readonly]=\"isReadonly\"\n (clear)=\"onClear()\"\n (click)=\"openPanel()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n [attr.aria-controls]=\"isOpen ? 'eui-autocomplete__panel' : null\"\n [attr.aria-label]=\"autocompleteControl.value?.length > 0 ? autocompleteControl.value : 'Input field without value'\"\n [attr.aria-required]=\"hasAriaRequiredAttribute ? 'true' : null\"\n aria-autocomplete=\"both\"\n aria-haspopup=\"true\" />\n </div>\n</ng-template>\n\n<ng-template #templatePortalContent>\n <div\n id=\"eui-autocomplete__panel\"\n class=\"eui-autocomplete__panel\"\n [@panelAnimation]=\"isOpen ? 'visible' : 'hidden'\"\n role=\"listbox\"\n aria-live=\"polite\"\n aria-label=\"Autocomplete panel\">\n <cdk-virtual-scroll-viewport\n #virtualScrolling\n [itemSize]=\"itemSize\"\n tabindex=\"0\"\n minBufferPx=\"500\"\n maxBufferPx=\"750\"\n [style.min-height]=\"cdkVirtualScrollViewport + 'px'\">\n @if (groupBy) {\n @for (distinctOptionGroup of distinctOptionGroups; let i = $index; track distinctOptionGroup) {\n @if ((groupedOptions | async)[distinctOptionGroup].options.length > 0) {\n <eui-autocomplete-option-group [label]=\"distinctOptionGroup\">\n <div class=\"eui-autocomplete-option-group__label\">\n @if (autocompleteOptGroupTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"autocompleteOptGroupTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: { label: distinctOptionGroup } }\">\n </ng-template>\n } @else {\n {{ distinctOptionGroup }}\n }\n </div>\n <div class=\"eui-autocomplete-option-group__options\">\n @for (autocompleteOption of (groupedOptions | async)[distinctOptionGroup].options; let j = $index; track autocompleteOption.id) {\n <eui-autocomplete-option\n isGroupItem\n [isActive]=\"selectedOptionIndex === (groupedOptions | async)[distinctOptionGroup].ancestorLength + j\"\n [isDisabled]=\"autocompleteOption.isDisabled\"\n [attr.aria-disabled]=\"autocompleteOption.isDisabled\"\n [euiVariant]=\"autocompleteOption.typeClass\"\n (click)=\"onOptionSelected(autocompleteOption)\">\n @if (autocompleteOptionTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"autocompleteOptionTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: autocompleteOption }\">\n </ng-template>\n } @else {\n @if (autocompleteOption.iconClass) {\n <span class=\"{{ autocompleteOption.iconClass }}\"></span>\n } @else if (autocompleteOption.iconSvgName) {\n <eui-icon-svg icon=\"{{ autocompleteOption.iconSvgName }}\"></eui-icon-svg>\n }\n {{ autocompleteOption.label }}\n }\n </eui-autocomplete-option>\n }\n </div>\n </eui-autocomplete-option-group>\n }\n }\n } @else {\n <eui-autocomplete-option\n *cdkVirtualFor=\"let autocompleteOption of autocompleteOptions | async; let i = index; trackBy: optionsTrackByFn\"\n [isActive]=\"selectedOptionIndex === i\"\n [isDisabled]=\"autocompleteOption.isDisabled\"\n [attr.aria-disabled]=\"autocompleteOption.isDisabled\"\n [euiVariant]=\"autocompleteOption.typeClass\"\n (click)=\"onOptionSelected(autocompleteOption)\">\n @if (autocompleteOptionTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"autocompleteOptionTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: autocompleteOption }\">\n </ng-template>\n } @else {\n @if (autocompleteOption.iconClass) {\n <span class=\"{{ autocompleteOption.iconClass }}\"></span>\n } @else if (autocompleteOption.iconSvgName) {\n <eui-icon-svg icon=\"{{ autocompleteOption.iconSvgName }}\"></eui-icon-svg>\n }\n {{ autocompleteOption.label }}\n }\n </eui-autocomplete-option>\n }\n </cdk-virtual-scroll-viewport>\n </div> \n</ng-template>", styles: [".eui-autocomplete,.eui-autocomplete__wrapper{width:100%}.eui-autocomplete__wrapper .eui-autocomplete__input-container{display:flex;width:100%}.eui-autocomplete__panel-container .eui-autocomplete__panel{box-shadow:var(--eui-sh-8);width:100%}.eui-autocomplete__panel-container.eui-autocomplete__panel-container--no-option .eui-autocomplete__panel{box-shadow:none}.eui-autocomplete.eui-autocomplete--chips-position-bottom .eui-autocomplete__input-container{margin-bottom:var(--eui-s-2xs)}.eui-autocomplete.eui-autocomplete--chips-position-inside .eui-autocomplete__wrapper{background-color:var(--eui-c-white);border:var(--eui-bw-xs) solid var(--eui-c-neutral-lighter);border-radius:var(--eui-br-m);padding:0 var(--eui-s-2xs)}.eui-autocomplete.eui-autocomplete--chips-position-inside .eui-autocomplete__wrapper .eui-chip-list,.eui-autocomplete.eui-autocomplete--chips-position-inside .eui-autocomplete__wrapper .eui-chip-list .eui-chip-list-container .eui-chip-list-wrapper .eui-chip-list__chip-container{display:block}.eui-autocomplete.eui-autocomplete--chips-position-inside .eui-autocomplete__wrapper .eui-chip-list .eui-chip-list-container .eui-chip-list-wrapper .eui-chip-list__chip-container .eui-chip{margin-bottom:0;margin-top:var(--eui-s-2xs)}.eui-autocomplete.eui-autocomplete--chips-position-inside .eui-autocomplete__wrapper .eui-chip-list .eui-input-text{border:var(--eui-bw-none);min-height:calc(var(--eui-s-2xl) + var(--eui-s-2xs) - 2px)}.eui-autocomplete.eui-autocomplete--chips-position-inside .eui-autocomplete__wrapper .eui-chip-list euichiplistappendcontent{flex-grow:1}button~.eui-autocomplete .eui-autocomplete__input,.eui-input-group-addon-item~.eui-autocomplete .eui-autocomplete__input{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0}.eui-autocomplete:has(+button) .eui-autocomplete__input{border-top-right-radius:0;border-bottom-right-radius:0}.eui-autocomplete:has(+.eui-input-group-addon-item) .eui-autocomplete__input{border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}.eui-autocomplete-option-group .eui-autocomplete-option-group__label{align-items:center;background-color:var(--eui-c-neutral-bg-light);border-bottom:1px solid var(--eui-c-neutral-bg-light);border-left:var(--eui-bw-m) solid transparent;cursor:pointer;display:flex;font-weight:700;min-height:var(--eui-s-3xl);padding-left:var(--eui-s-s);padding-right:var(--eui-s-s)}.eui-autocomplete-option-group .eui-autocomplete-option-group__label .eui-icon,.eui-autocomplete-option-group .eui-autocomplete-option-group__label .eui-icon-svg,.eui-autocomplete-option-group .eui-autocomplete-option-group__label .eui-flag-icon{margin-right:var(--eui-s-2xs)}.eui-autocomplete-option{align-items:center;border-bottom:1px solid var(--eui-c-neutral-bg-light);border-left:var(--eui-bw-m) solid transparent;cursor:pointer;display:flex;min-height:var(--eui-s-3xl);padding-left:var(--eui-s-s);padding-right:var(--eui-s-s)}.eui-autocomplete-option:hover{background-color:var(--eui-c-neutral-bg-light)}.eui-autocomplete-option--group-item{padding-left:var(--eui-s-l)}.eui-autocomplete-option .eui-icon,.eui-autocomplete-option .eui-icon-svg,.eui-autocomplete-option .eui-flag-icon{margin-right:var(--eui-s-xs)}.eui-autocomplete-option--primary{border-left-color:var(--eui-c-primary)}.eui-autocomplete-option--secondary{border-left-color:var(--eui-c-neutral-lighter)}.eui-autocomplete-option--info{border-left-color:var(--eui-c-info)}.eui-autocomplete-option--success{border-left-color:var(--eui-c-success-dark)}.eui-autocomplete-option--warning{border-left-color:var(--eui-c-warning)}.eui-autocomplete-option--danger{border-left-color:var(--eui-c-danger-dark)}.eui-autocomplete-option--accent{border-left-color:var(--eui-c-accent)}.eui-autocomplete-option--active{background-color:var(--eui-c-primary-lightest)}.eui-autocomplete-option--disabled{cursor:default;opacity:.4}.eui-autocomplete-option--disabled:hover{background:none}\n"], dependencies: [{ kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: i8.EuiInputTextComponent, selector: "input[euiInputText]", inputs: ["isInvalid"] }, { kind: "component", type: i9.EuiChipListComponent, selector: "eui-chip-list, div[euiChipList], ul[euiChipList]", inputs: ["chips", "toggleLinkMoreLabel", "toggleLinkLessLabel", "chipsSortOrder", "dragAndDropSourceName", "dragAndDropConnectedTo", "ariaLabel", "dropListOrientation", "isSquared", "isChipsRemovable", "isMaxVisibleChipsOpened", "isChipsSorted", "isChipsDragAndDrop", "isGrid", "maxVisibleChipsCount", "chipsLabelTruncateCount"], outputs: ["chipsInit", "chipRemove", "chipDragStart", "chipDragRelease", "chipDrop", "chiplistFocus"] }, { kind: "directive", type: i9.EuiChipListAppendContentDirective, selector: "euiChipListAppendContent" }, { kind: "component", type: i10.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: EuiAutocompleteOptionComponent, selector: "eui-autocomplete-option", inputs: ["isActive", "isDisabled", "isGroupItem"] }, { kind: "component", type: EuiAutocompleteOptionGroupComponent, selector: "eui-autocomplete-option-group", inputs: ["label"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }], animations: [panelAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
791
791
|
}
|
|
792
792
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: EuiAutocompleteComponent, decorators: [{
|
|
793
793
|
type: Component,
|
|
@@ -803,7 +803,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
|
|
|
803
803
|
'euiAccent',
|
|
804
804
|
],
|
|
805
805
|
},
|
|
806
|
-
], template: "<div class=\"eui-autocomplete__wrapper\">\n @if (chipsPosition === 'bottom') {\n <ng-container *ngTemplateOutlet=\"control\"></ng-container>\n }\n @if (hasChips) {\n <eui-chip-list\n [chips]=\"chips\"\n [isChipsRemovable]=\"isChipsRemovable && !isReadonly\"\n [maxVisibleChipsCount]=\"maxVisibleChipsCount\"\n [isMaxVisibleChipsOpened]=\"isMaxVisibleChipsOpened\"\n [chipsLabelTruncateCount]=\"chipsLabelTruncateCount\"\n [toggleLinkMoreLabel]=\"toggleLinkMoreLabel\"\n [toggleLinkLessLabel]=\"toggleLinkLessLabel\"\n [isChipsDragAndDrop]=\"isChipsDragAndDrop\"\n [dragAndDropSourceName]=\"dragAndDropSourceName\"\n [dragAndDropConnectedTo]=\"dragAndDropConnectedTo\"\n (chipDrop)=\"onChipDropped($event)\"\n (chipDragStart)=\"onChipDragStarted($event)\"\n (chipDragRelease)=\"onChipDragReleased($event)\"\n (chipRemove)=\"onChipRemove($event)\">\n <euiChipListAppendContent>\n <ng-template [ngIf]=\"chipsPosition === 'inside'\">\n <ng-container *ngTemplateOutlet=\"control\"></ng-container>\n </ng-template>\n </euiChipListAppendContent>\n </eui-chip-list>\n }\n @if (chipsPosition === 'top') {\n <ng-container *ngTemplateOutlet=\"control\"></ng-container>\n }\n</div>\n\n<ng-template #control>\n <div *ngIf=\"!hasChips || (hasChips && !isReadonly)\" class=\"eui-autocomplete__input-container\" #inputContainerRef>\n <input\n [attr.id]=\"inputId\"\n #input\n euiInputText\n [euiClearable]=\"!isReadonly && !isDisabled\"\n [euiLoading]=\"isLoading\"\n [formControl]=\"autocompleteControl\"\n class=\"eui-autocomplete__input {{ classList }}\"\n placeholder=\"{{ placeholder }}\"\n [readonly]=\"isReadonly\"\n (clear)=\"onClear()\"\n (click)=\"openPanel()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n [attr.aria-controls]=\"isOpen ? 'eui-autocomplete__panel' : null\"\n [attr.aria-label]=\"autocompleteControl.value?.length > 0 ? autocompleteControl.value : 'Input field without value'\"\n [attr.aria-required]=\"hasAriaRequiredAttribute ? 'true' : null\"\n aria-autocomplete=\"both\"\n aria-haspopup=\"true\" />\n </div>\n</ng-template>\n\n<ng-template #templatePortalContent>\n <div\n id=\"eui-autocomplete__panel\"\n class=\"eui-autocomplete__panel\"\n [@panelAnimation]=\"isOpen ? 'visible' : 'hidden'\"\n role=\"listbox\"\n aria-live=\"polite\"\n aria-label=\"Autocomplete panel\">\n <cdk-virtual-scroll-viewport\n #virtualScrolling\n [itemSize]=\"itemSize\"\n tabindex=\"0\"\n minBufferPx=\"500\"\n maxBufferPx=\"750\"\n [style.min-height]=\"cdkVirtualScrollViewport + 'px'\">\n @if (groupBy) {\n @for (distinctOptionGroup of distinctOptionGroups; let i = $index; track distinctOptionGroup) {\n @if ((groupedOptions | async)[distinctOptionGroup].options.length > 0) {\n <eui-autocomplete-option-group [label]=\"distinctOptionGroup\">\n <div class=\"eui-autocomplete-option-group__label\">\n @if (autocompleteOptGroupTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"autocompleteOptGroupTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: { label: distinctOptionGroup } }\">\n </ng-template>\n } @else {\n {{ distinctOptionGroup }}\n }\n </div>\n <div class=\"eui-autocomplete-option-group__options\">\n @for (autocompleteOption of (groupedOptions | async)[distinctOptionGroup].options; let j = $index; track autocompleteOption.id) {\n <eui-autocomplete-option\n isGroupItem\n [isActive]=\"selectedOptionIndex === (groupedOptions | async)[distinctOptionGroup].ancestorLength + j\"\n [isDisabled]=\"autocompleteOption.isDisabled\"\n [attr.aria-disabled]=\"autocompleteOption.isDisabled\"\n [euiVariant]=\"autocompleteOption.typeClass\"\n (click)=\"onOptionSelected(autocompleteOption)\">\n @if (autocompleteOptionTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"autocompleteOptionTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: autocompleteOption }\">\n </ng-template>\n } @else {\n @if (autocompleteOption.iconClass) {\n <span class=\"{{ autocompleteOption.iconClass }}\"></span>\n } @else if (autocompleteOption.iconSvgName) {\n <eui-icon-svg icon=\"{{ autocompleteOption.iconSvgName }}\"></eui-icon-svg>\n }\n {{ autocompleteOption.label }}\n }\n </eui-autocomplete-option>\n }\n </div>\n </eui-autocomplete-option-group>\n }\n }\n } @else {\n <eui-autocomplete-option\n *cdkVirtualFor=\"let autocompleteOption of autocompleteOptions | async; let i = index; trackBy: optionsTrackByFn\"\n [isActive]=\"selectedOptionIndex === i\"\n [isDisabled]=\"autocompleteOption.isDisabled\"\n [attr.aria-disabled]=\"autocompleteOption.isDisabled\"\n [euiVariant]=\"autocompleteOption.typeClass\"\n (click)=\"onOptionSelected(autocompleteOption)\">\n @if (autocompleteOptionTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"autocompleteOptionTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: autocompleteOption }\">\n </ng-template>\n } @else {\n @if (autocompleteOption.iconClass) {\n <span class=\"{{ autocompleteOption.iconClass }}\"></span>\n } @else if (autocompleteOption.iconSvgName) {\n <eui-icon-svg icon=\"{{ autocompleteOption.iconSvgName }}\"></eui-icon-svg>\n }\n {{ autocompleteOption.label }}\n }\n </eui-autocomplete-option>\n }\n </cdk-virtual-scroll-viewport>\n </div> \n</ng-template>", styles: [".eui-autocomplete,.eui-autocomplete__wrapper{width:100%}.eui-autocomplete__wrapper .eui-autocomplete__input-container{display:flex;width:100%}.eui-autocomplete__panel-container .eui-autocomplete__panel{box-shadow:var(--eui-sh-8);width:100%}.eui-autocomplete__panel-container.eui-autocomplete__panel-container--no-option .eui-autocomplete__panel{box-shadow:none}.eui-autocomplete.eui-autocomplete--chips-position-bottom .eui-autocomplete__input-container{margin-bottom:var(--eui-s-2xs)}.eui-autocomplete.eui-autocomplete--chips-position-inside .eui-autocomplete__wrapper{background-color:var(--eui-c-white);border:var(--eui-bw-xs) solid var(--eui-c-neutral-lighter);border-radius:var(--eui-br-m);padding:0 var(--eui-s-2xs)}.eui-autocomplete.eui-autocomplete--chips-position-inside .eui-autocomplete__wrapper .eui-chip-list,.eui-autocomplete.eui-autocomplete--chips-position-inside .eui-autocomplete__wrapper .eui-chip-list .eui-chip-list-container .eui-chip-list-wrapper .eui-chip-list__chip-container{display:block}.eui-autocomplete.eui-autocomplete--chips-position-inside .eui-autocomplete__wrapper .eui-chip-list .eui-chip-list-container .eui-chip-list-wrapper .eui-chip-list__chip-container .eui-chip{margin-bottom:0;margin-top:var(--eui-s-2xs)}.eui-autocomplete.eui-autocomplete--chips-position-inside .eui-autocomplete__wrapper .eui-chip-list .eui-input-text{border:var(--eui-bw-none);min-height:calc(var(--eui-s-2xl) + var(--eui-s-2xs) - 2px)}.eui-autocomplete.eui-autocomplete--chips-position-inside .eui-autocomplete__wrapper .eui-chip-list euichiplistappendcontent{flex-grow:1}button~.eui-autocomplete .eui-autocomplete__input,.eui-input-group-addon-item~.eui-autocomplete .eui-autocomplete__input{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0}.eui-autocomplete:has(+button) .eui-autocomplete__input{border-top-right-radius:0;border-bottom-right-radius:0}.eui-autocomplete:has(+.eui-input-group-addon-item) .eui-autocomplete__input{border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}.eui-autocomplete-option-group .eui-autocomplete-option-group__label{align-items:center;background-color:var(--eui-c-neutral-bg-light);border-bottom:1px solid var(--eui-c-neutral-bg-light);border-left:var(--eui-bw-m) solid transparent;cursor:pointer;display:flex;font-weight:700;min-height:var(--eui-s-3xl);padding-left:var(--eui-s-s);padding-right:var(--eui-s-s)}.eui-autocomplete-option-group .eui-autocomplete-option-group__label .eui-icon,.eui-autocomplete-option-group .eui-autocomplete-option-group__label .eui-icon-svg,.eui-autocomplete-option-group .eui-autocomplete-option-group__label .eui-flag-icon{margin-right:var(--eui-s-2xs)}.eui-autocomplete-option{align-items:center;border-bottom:1px solid var(--eui-c-neutral-bg-light);border-left:var(--eui-bw-m) solid transparent;cursor:pointer;display:flex;min-height:var(--eui-s-3xl);padding-left:var(--eui-s-s);padding-right:var(--eui-s-s)}.eui-autocomplete-option:hover{background-color:var(--eui-c-neutral-bg-light)}.eui-autocomplete-option--group-item{padding-left:var(--eui-s-l)}.eui-autocomplete-option .eui-icon,.eui-autocomplete-option .eui-icon-svg,.eui-autocomplete-option .eui-flag-icon{margin-right:var(--eui-s-xs)}.eui-autocomplete-option--primary{border-left-color:var(--eui-c-primary)}.eui-autocomplete-option--secondary{border-left-color:var(--eui-c-neutral-lighter)}.eui-autocomplete-option--info{border-left-color:var(--eui-c-info)}.eui-autocomplete-option--success{border-left-color:var(--eui-c-success-dark)}.eui-autocomplete-option--warning{border-left-color:var(--eui-c-warning)}.eui-autocomplete-option--danger{border-left-color:var(--eui-c-danger-dark)}.eui-autocomplete-option--accent{border-left-color:var(--eui-c-accent)}.eui-autocomplete-option--active{background-color:var(--eui-c-primary-lightest)}.eui-autocomplete-option--disabled{cursor:default;opacity:.4}.eui-autocomplete-option--disabled:hover{background:none}\n"] }]
|
|
806
|
+
], template: "<div class=\"eui-autocomplete__wrapper\">\n @if (chipsPosition === 'bottom') {\n <ng-container *ngTemplateOutlet=\"control\"></ng-container>\n }\n @if (hasChips) {\n <eui-chip-list\n [chips]=\"chips\"\n [isChipsRemovable]=\"isChipsRemovable && !isReadonly\"\n [maxVisibleChipsCount]=\"maxVisibleChipsCount\"\n [isMaxVisibleChipsOpened]=\"isMaxVisibleChipsOpened\"\n [chipsLabelTruncateCount]=\"chipsLabelTruncateCount\"\n [toggleLinkMoreLabel]=\"toggleLinkMoreLabel\"\n [toggleLinkLessLabel]=\"toggleLinkLessLabel\"\n [isChipsDragAndDrop]=\"isChipsDragAndDrop\"\n [dragAndDropSourceName]=\"dragAndDropSourceName\"\n [dragAndDropConnectedTo]=\"dragAndDropConnectedTo\"\n (chipDrop)=\"onChipDropped($event)\"\n (chipDragStart)=\"onChipDragStarted($event)\"\n (chipDragRelease)=\"onChipDragReleased($event)\"\n (chipRemove)=\"onChipRemove($event)\">\n <euiChipListAppendContent>\n <ng-template [ngIf]=\"chipsPosition === 'inside'\">\n <ng-container *ngTemplateOutlet=\"control\"></ng-container>\n </ng-template>\n </euiChipListAppendContent>\n </eui-chip-list>\n }\n @if (chipsPosition === 'top') {\n <ng-container *ngTemplateOutlet=\"control\"></ng-container>\n }\n</div>\n\n<ng-template #control>\n <div *ngIf=\"!hasChips || (hasChips && !isReadonly)\" class=\"eui-autocomplete__input-container {{ classList }}\" #inputContainerRef>\n <input\n [attr.id]=\"inputId\"\n #input\n euiInputText\n [euiClearable]=\"!isReadonly && !isDisabled\"\n [euiLoading]=\"isLoading\"\n [formControl]=\"autocompleteControl\"\n class=\"eui-autocomplete__input {{ classList }}\"\n placeholder=\"{{ placeholder }}\"\n [readonly]=\"isReadonly\"\n (clear)=\"onClear()\"\n (click)=\"openPanel()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n [attr.aria-controls]=\"isOpen ? 'eui-autocomplete__panel' : null\"\n [attr.aria-label]=\"autocompleteControl.value?.length > 0 ? autocompleteControl.value : 'Input field without value'\"\n [attr.aria-required]=\"hasAriaRequiredAttribute ? 'true' : null\"\n aria-autocomplete=\"both\"\n aria-haspopup=\"true\" />\n </div>\n</ng-template>\n\n<ng-template #templatePortalContent>\n <div\n id=\"eui-autocomplete__panel\"\n class=\"eui-autocomplete__panel\"\n [@panelAnimation]=\"isOpen ? 'visible' : 'hidden'\"\n role=\"listbox\"\n aria-live=\"polite\"\n aria-label=\"Autocomplete panel\">\n <cdk-virtual-scroll-viewport\n #virtualScrolling\n [itemSize]=\"itemSize\"\n tabindex=\"0\"\n minBufferPx=\"500\"\n maxBufferPx=\"750\"\n [style.min-height]=\"cdkVirtualScrollViewport + 'px'\">\n @if (groupBy) {\n @for (distinctOptionGroup of distinctOptionGroups; let i = $index; track distinctOptionGroup) {\n @if ((groupedOptions | async)[distinctOptionGroup].options.length > 0) {\n <eui-autocomplete-option-group [label]=\"distinctOptionGroup\">\n <div class=\"eui-autocomplete-option-group__label\">\n @if (autocompleteOptGroupTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"autocompleteOptGroupTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: { label: distinctOptionGroup } }\">\n </ng-template>\n } @else {\n {{ distinctOptionGroup }}\n }\n </div>\n <div class=\"eui-autocomplete-option-group__options\">\n @for (autocompleteOption of (groupedOptions | async)[distinctOptionGroup].options; let j = $index; track autocompleteOption.id) {\n <eui-autocomplete-option\n isGroupItem\n [isActive]=\"selectedOptionIndex === (groupedOptions | async)[distinctOptionGroup].ancestorLength + j\"\n [isDisabled]=\"autocompleteOption.isDisabled\"\n [attr.aria-disabled]=\"autocompleteOption.isDisabled\"\n [euiVariant]=\"autocompleteOption.typeClass\"\n (click)=\"onOptionSelected(autocompleteOption)\">\n @if (autocompleteOptionTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"autocompleteOptionTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: autocompleteOption }\">\n </ng-template>\n } @else {\n @if (autocompleteOption.iconClass) {\n <span class=\"{{ autocompleteOption.iconClass }}\"></span>\n } @else if (autocompleteOption.iconSvgName) {\n <eui-icon-svg icon=\"{{ autocompleteOption.iconSvgName }}\"></eui-icon-svg>\n }\n {{ autocompleteOption.label }}\n }\n </eui-autocomplete-option>\n }\n </div>\n </eui-autocomplete-option-group>\n }\n }\n } @else {\n <eui-autocomplete-option\n *cdkVirtualFor=\"let autocompleteOption of autocompleteOptions | async; let i = index; trackBy: optionsTrackByFn\"\n [isActive]=\"selectedOptionIndex === i\"\n [isDisabled]=\"autocompleteOption.isDisabled\"\n [attr.aria-disabled]=\"autocompleteOption.isDisabled\"\n [euiVariant]=\"autocompleteOption.typeClass\"\n (click)=\"onOptionSelected(autocompleteOption)\">\n @if (autocompleteOptionTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"autocompleteOptionTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: autocompleteOption }\">\n </ng-template>\n } @else {\n @if (autocompleteOption.iconClass) {\n <span class=\"{{ autocompleteOption.iconClass }}\"></span>\n } @else if (autocompleteOption.iconSvgName) {\n <eui-icon-svg icon=\"{{ autocompleteOption.iconSvgName }}\"></eui-icon-svg>\n }\n {{ autocompleteOption.label }}\n }\n </eui-autocomplete-option>\n }\n </cdk-virtual-scroll-viewport>\n </div> \n</ng-template>", styles: [".eui-autocomplete,.eui-autocomplete__wrapper{width:100%}.eui-autocomplete__wrapper .eui-autocomplete__input-container{display:flex;width:100%}.eui-autocomplete__panel-container .eui-autocomplete__panel{box-shadow:var(--eui-sh-8);width:100%}.eui-autocomplete__panel-container.eui-autocomplete__panel-container--no-option .eui-autocomplete__panel{box-shadow:none}.eui-autocomplete.eui-autocomplete--chips-position-bottom .eui-autocomplete__input-container{margin-bottom:var(--eui-s-2xs)}.eui-autocomplete.eui-autocomplete--chips-position-inside .eui-autocomplete__wrapper{background-color:var(--eui-c-white);border:var(--eui-bw-xs) solid var(--eui-c-neutral-lighter);border-radius:var(--eui-br-m);padding:0 var(--eui-s-2xs)}.eui-autocomplete.eui-autocomplete--chips-position-inside .eui-autocomplete__wrapper .eui-chip-list,.eui-autocomplete.eui-autocomplete--chips-position-inside .eui-autocomplete__wrapper .eui-chip-list .eui-chip-list-container .eui-chip-list-wrapper .eui-chip-list__chip-container{display:block}.eui-autocomplete.eui-autocomplete--chips-position-inside .eui-autocomplete__wrapper .eui-chip-list .eui-chip-list-container .eui-chip-list-wrapper .eui-chip-list__chip-container .eui-chip{margin-bottom:0;margin-top:var(--eui-s-2xs)}.eui-autocomplete.eui-autocomplete--chips-position-inside .eui-autocomplete__wrapper .eui-chip-list .eui-input-text{border:var(--eui-bw-none);min-height:calc(var(--eui-s-2xl) + var(--eui-s-2xs) - 2px)}.eui-autocomplete.eui-autocomplete--chips-position-inside .eui-autocomplete__wrapper .eui-chip-list euichiplistappendcontent{flex-grow:1}button~.eui-autocomplete .eui-autocomplete__input,.eui-input-group-addon-item~.eui-autocomplete .eui-autocomplete__input{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0}.eui-autocomplete:has(+button) .eui-autocomplete__input{border-top-right-radius:0;border-bottom-right-radius:0}.eui-autocomplete:has(+.eui-input-group-addon-item) .eui-autocomplete__input{border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}.eui-autocomplete-option-group .eui-autocomplete-option-group__label{align-items:center;background-color:var(--eui-c-neutral-bg-light);border-bottom:1px solid var(--eui-c-neutral-bg-light);border-left:var(--eui-bw-m) solid transparent;cursor:pointer;display:flex;font-weight:700;min-height:var(--eui-s-3xl);padding-left:var(--eui-s-s);padding-right:var(--eui-s-s)}.eui-autocomplete-option-group .eui-autocomplete-option-group__label .eui-icon,.eui-autocomplete-option-group .eui-autocomplete-option-group__label .eui-icon-svg,.eui-autocomplete-option-group .eui-autocomplete-option-group__label .eui-flag-icon{margin-right:var(--eui-s-2xs)}.eui-autocomplete-option{align-items:center;border-bottom:1px solid var(--eui-c-neutral-bg-light);border-left:var(--eui-bw-m) solid transparent;cursor:pointer;display:flex;min-height:var(--eui-s-3xl);padding-left:var(--eui-s-s);padding-right:var(--eui-s-s)}.eui-autocomplete-option:hover{background-color:var(--eui-c-neutral-bg-light)}.eui-autocomplete-option--group-item{padding-left:var(--eui-s-l)}.eui-autocomplete-option .eui-icon,.eui-autocomplete-option .eui-icon-svg,.eui-autocomplete-option .eui-flag-icon{margin-right:var(--eui-s-xs)}.eui-autocomplete-option--primary{border-left-color:var(--eui-c-primary)}.eui-autocomplete-option--secondary{border-left-color:var(--eui-c-neutral-lighter)}.eui-autocomplete-option--info{border-left-color:var(--eui-c-info)}.eui-autocomplete-option--success{border-left-color:var(--eui-c-success-dark)}.eui-autocomplete-option--warning{border-left-color:var(--eui-c-warning)}.eui-autocomplete-option--danger{border-left-color:var(--eui-c-danger-dark)}.eui-autocomplete-option--accent{border-left-color:var(--eui-c-accent)}.eui-autocomplete-option--active{background-color:var(--eui-c-primary-lightest)}.eui-autocomplete-option--disabled{cursor:default;opacity:.4}.eui-autocomplete-option--disabled:hover{background:none}\n"] }]
|
|
807
807
|
}], ctorParameters: () => [{ type: i1$1.Overlay }, { type: i0.ChangeDetectorRef }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: i2.LiveAnnouncer }, { type: i3.ScrollDispatcher }, { type: i4.EuiAppShellService }, { type: i1.BaseStatesDirective }, { type: i6.NgControl, decorators: [{
|
|
808
808
|
type: Self
|
|
809
809
|
}, {
|