@eui/components 19.0.0-next.6 → 19.0.0-next.7
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/dependencies.html +2 -2
- package/docs/js/search/search_index.js +2 -2
- package/fesm2022/eui-components-eui-accordion.mjs +2 -2
- package/fesm2022/eui-components-eui-alert.mjs +2 -2
- package/fesm2022/eui-components-eui-autocomplete.mjs +2 -2
- package/fesm2022/eui-components-eui-avatar.mjs +2 -2
- package/fesm2022/eui-components-eui-badge.mjs +2 -2
- package/fesm2022/eui-components-eui-block-content.mjs +2 -2
- package/fesm2022/eui-components-eui-block-document.mjs +2 -2
- package/fesm2022/eui-components-eui-breadcrumb.mjs +2 -2
- package/fesm2022/eui-components-eui-button-group.mjs +2 -2
- package/fesm2022/eui-components-eui-button-v2.mjs +2 -2
- package/fesm2022/eui-components-eui-button.mjs +2 -2
- package/fesm2022/eui-components-eui-card.mjs +2 -2
- package/fesm2022/eui-components-eui-chip-list.mjs +2 -2
- package/fesm2022/eui-components-eui-chip.mjs +2 -2
- package/fesm2022/eui-components-eui-dashboard-button.mjs +2 -2
- package/fesm2022/eui-components-eui-dashboard-card.mjs +2 -2
- package/fesm2022/eui-components-eui-date-range-selector.mjs +4 -4
- package/fesm2022/eui-components-eui-datepicker.mjs +2 -2
- package/fesm2022/eui-components-eui-dialog.mjs +4 -4
- package/fesm2022/eui-components-eui-dimmer.mjs +2 -2
- package/fesm2022/eui-components-eui-disable-content.mjs +2 -2
- package/fesm2022/eui-components-eui-discussion-thread.mjs +2 -2
- package/fesm2022/eui-components-eui-dropdown.mjs +4 -4
- package/fesm2022/eui-components-eui-feedback-message.mjs +2 -2
- package/fesm2022/eui-components-eui-fieldset.mjs +2 -2
- package/fesm2022/eui-components-eui-file-upload.mjs +2 -2
- package/fesm2022/eui-components-eui-growl.mjs +2 -2
- package/fesm2022/eui-components-eui-icon-input.mjs +2 -2
- package/fesm2022/eui-components-eui-icon-toggle.mjs +2 -2
- package/fesm2022/eui-components-eui-input-checkbox.mjs +2 -2
- package/fesm2022/eui-components-eui-input-group.mjs +2 -2
- package/fesm2022/eui-components-eui-input-number.mjs +2 -2
- package/fesm2022/eui-components-eui-input-radio.mjs +2 -2
- package/fesm2022/eui-components-eui-input-text.mjs +2 -2
- package/fesm2022/eui-components-eui-label.mjs +2 -2
- package/fesm2022/eui-components-eui-language-selector.mjs +2 -2
- package/fesm2022/eui-components-eui-list.mjs +4 -4
- package/fesm2022/eui-components-eui-menu.mjs +4 -4
- package/fesm2022/eui-components-eui-navbar.mjs +2 -2
- package/fesm2022/eui-components-eui-overlay.mjs +2 -2
- package/fesm2022/eui-components-eui-page.mjs +2 -2
- package/fesm2022/eui-components-eui-paginator.mjs +2 -2
- package/fesm2022/eui-components-eui-popover.mjs +2 -2
- package/fesm2022/eui-components-eui-progress-bar.mjs +2 -2
- package/fesm2022/eui-components-eui-progress-circle.mjs +2 -2
- package/fesm2022/eui-components-eui-select.mjs +2 -2
- package/fesm2022/eui-components-eui-sidebar-menu.mjs +2 -2
- package/fesm2022/eui-components-eui-skeleton.mjs +2 -2
- package/fesm2022/eui-components-eui-slide-toggle.mjs +2 -2
- package/fesm2022/eui-components-eui-split-button.mjs +2 -2
- package/fesm2022/eui-components-eui-table-v2.mjs +2 -2
- package/fesm2022/eui-components-eui-table.mjs +2 -2
- package/fesm2022/eui-components-eui-tabs.mjs +4 -4
- package/fesm2022/eui-components-eui-textarea.mjs +2 -2
- package/fesm2022/eui-components-eui-timebar.mjs +2 -2
- package/fesm2022/eui-components-eui-timeline.mjs +4 -4
- package/fesm2022/eui-components-eui-timepicker.mjs +2 -2
- package/fesm2022/eui-components-eui-tree-list.mjs +2 -2
- package/fesm2022/eui-components-eui-tree.mjs +2 -2
- package/fesm2022/eui-components-eui-user-profile.mjs +2 -2
- package/fesm2022/eui-components-eui-wizard.mjs +4 -4
- package/fesm2022/eui-components-layout.mjs +1 -1
- package/fesm2022/eui-components-layout.mjs.map +1 -1
- package/package.json +3 -3
|
@@ -15,7 +15,7 @@ class EuiAccordionComponent {
|
|
|
15
15
|
].join(' ').trim();
|
|
16
16
|
}
|
|
17
17
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EuiAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
18
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0-rc.1", type: EuiAccordionComponent, isStandalone: false, selector: "eui-accordion", host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: i1.CdkAccordion, inputs: ["multi", "isMulti"] }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".eui-
|
|
18
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0-rc.1", type: EuiAccordionComponent, isStandalone: false, selector: "eui-accordion", host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: i1.CdkAccordion, inputs: ["multi", "isMulti"] }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".eui-19 .eui-accordion{display:flex;width:100%;flex-direction:column}.eui-19 .eui-accordion-item{display:flex;flex-direction:column;width:100%;border-bottom:1px solid var(--eui-c-neutral-lightest)}.eui-19 .eui-accordion-item__header{display:flex;align-items:center;width:100%;padding:var(--eui-s-l);outline:none;background-color:initial;border:var(--eui-bw-none);text-align:start;cursor:pointer}.eui-19 .eui-accordion-item__header:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-accordion-item__header:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-accordion-item__header [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-accordion-item__header:hover{background-color:var(--eui-c-primary-bg)}.eui-19 .eui-accordion-item__header-expander{margin-left:auto;padding-left:var(--eui-s-m)}.eui-19 .eui-accordion-item__body{padding:var(--eui-s-xs) var(--eui-s-l) var(--eui-s-l) var(--eui-s-l)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
19
19
|
}
|
|
20
20
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EuiAccordionComponent, decorators: [{
|
|
21
21
|
type: Component,
|
|
@@ -24,7 +24,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ng
|
|
|
24
24
|
directive: CdkAccordion,
|
|
25
25
|
inputs: ['multi: isMulti'],
|
|
26
26
|
},
|
|
27
|
-
], template: "<ng-content></ng-content>\n", styles: [".eui-
|
|
27
|
+
], template: "<ng-content></ng-content>\n", styles: [".eui-19 .eui-accordion{display:flex;width:100%;flex-direction:column}.eui-19 .eui-accordion-item{display:flex;flex-direction:column;width:100%;border-bottom:1px solid var(--eui-c-neutral-lightest)}.eui-19 .eui-accordion-item__header{display:flex;align-items:center;width:100%;padding:var(--eui-s-l);outline:none;background-color:initial;border:var(--eui-bw-none);text-align:start;cursor:pointer}.eui-19 .eui-accordion-item__header:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-accordion-item__header:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-accordion-item__header [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-accordion-item__header:hover{background-color:var(--eui-c-primary-bg)}.eui-19 .eui-accordion-item__header-expander{margin-left:auto;padding-left:var(--eui-s-m)}.eui-19 .eui-accordion-item__body{padding:var(--eui-s-xs) var(--eui-s-l) var(--eui-s-l) var(--eui-s-l)}\n"] }]
|
|
28
28
|
}], propDecorators: { cssClasses: [{
|
|
29
29
|
type: HostBinding,
|
|
30
30
|
args: ['class']
|
|
@@ -75,7 +75,7 @@ class EuiAlertComponent {
|
|
|
75
75
|
this.closeAlert.emit(false);
|
|
76
76
|
}
|
|
77
77
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EuiAlertComponent, deps: [{ token: i1.BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
78
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0-rc.1", type: EuiAlertComponent, isStandalone: false, selector: "div[euiAlert], eui-alert", inputs: { ariaDescribedBy: "ariaDescribedBy", e2eAttr: "e2eAttr", isMuted: ["isMuted", "isMuted", booleanAttribute], isBordered: ["isBordered", "isBordered", booleanAttribute], isCloseable: ["isCloseable", "isCloseable", booleanAttribute], isFocusable: ["isFocusable", "isFocusable", booleanAttribute], isVisible: ["isVisible", "isVisible", booleanAttribute] }, outputs: { closeAlert: "closeAlert" }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role", "attr.aria-describedby": "this.ariaDescribedBy", "attr.tabindex": "this.tabindex", "attr.data-e2e": "this.e2eAttr" } }, queries: [{ propertyName: "alertTitle", first: true, predicate: i0.forwardRef(() => EuiAlertTitleComponent), descendants: true }], hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiSuccess", "euiSuccess", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiDanger", "euiDanger", "euiVariant", "euiVariant"] }], ngImport: i0, template: "@if (alertTitle) {\n <div class=\"eui-alert-container\">\n <div class=\"eui-alert-title-wrapper\">\n @if (!isMuted) {\n <ng-content *ngTemplateOutlet=\"icon\"/>\n }\n <ng-content select=\"eui-alert-title\"/>\n </div>\n <ng-content *ngTemplateOutlet=\"body\"/>\n </div>\n\n} @else {\n @if (!isMuted) {\n <ng-content *ngTemplateOutlet=\"icon\"/>\n }\n <ng-content *ngTemplateOutlet=\"body\"/>\n}\n\n<ng-template #icon>\n <eui-icon-state [euiVariant]=\"baseStatesDirective.euiVariant\" class=\"eui-alert-icon\"/>\n</ng-template>\n\n<ng-template #body>\n <div class=\"eui-alert-content\">\n <ng-content/>\n </div>\n</ng-template>\n\n@if (isCloseable) {\n <eui-icon-button class=\"eui-alert-close\"\n icon=\"close:outline\"\n euiRounded\n (buttonClick)=\"onCloseClick()\"\n fillColor=\"neutral-light\"\n ariaLabel=\"Close alert icon\"/>\n}\n", styles: [".eui-
|
|
78
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0-rc.1", type: EuiAlertComponent, isStandalone: false, selector: "div[euiAlert], eui-alert", inputs: { ariaDescribedBy: "ariaDescribedBy", e2eAttr: "e2eAttr", isMuted: ["isMuted", "isMuted", booleanAttribute], isBordered: ["isBordered", "isBordered", booleanAttribute], isCloseable: ["isCloseable", "isCloseable", booleanAttribute], isFocusable: ["isFocusable", "isFocusable", booleanAttribute], isVisible: ["isVisible", "isVisible", booleanAttribute] }, outputs: { closeAlert: "closeAlert" }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role", "attr.aria-describedby": "this.ariaDescribedBy", "attr.tabindex": "this.tabindex", "attr.data-e2e": "this.e2eAttr" } }, queries: [{ propertyName: "alertTitle", first: true, predicate: i0.forwardRef(() => EuiAlertTitleComponent), descendants: true }], hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiSuccess", "euiSuccess", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiDanger", "euiDanger", "euiVariant", "euiVariant"] }], ngImport: i0, template: "@if (alertTitle) {\n <div class=\"eui-alert-container\">\n <div class=\"eui-alert-title-wrapper\">\n @if (!isMuted) {\n <ng-content *ngTemplateOutlet=\"icon\"/>\n }\n <ng-content select=\"eui-alert-title\"/>\n </div>\n <ng-content *ngTemplateOutlet=\"body\"/>\n </div>\n\n} @else {\n @if (!isMuted) {\n <ng-content *ngTemplateOutlet=\"icon\"/>\n }\n <ng-content *ngTemplateOutlet=\"body\"/>\n}\n\n<ng-template #icon>\n <eui-icon-state [euiVariant]=\"baseStatesDirective.euiVariant\" class=\"eui-alert-icon\"/>\n</ng-template>\n\n<ng-template #body>\n <div class=\"eui-alert-content\">\n <ng-content/>\n </div>\n</ng-template>\n\n@if (isCloseable) {\n <eui-icon-button class=\"eui-alert-close\"\n icon=\"close:outline\"\n euiRounded\n (buttonClick)=\"onCloseClick()\"\n fillColor=\"neutral-light\"\n ariaLabel=\"Close alert icon\"/>\n}\n", styles: [".eui-19 .eui-alert{--_border-color: var(--eui-alert-border-color, var(--eui-c-info-dark));--_color: var(--eui-alert-color, var(--eui-c-info-dark));--_bg-color: var(--eui-alert-bg-color, var(--eui-c-info-bg));--_close-hover-color: var(--eui-alert-close-hover-color, var(--eui-c-info-lightest))}.eui-19 .eui-alert{display:flex;padding:var(--eui-s-m);background-color:var(--_bg-color);position:relative;border-radius:var(--eui-br-s)}.eui-19 .eui-alert--closeable{padding-right:var(--eui-s-4xl)}.eui-19 .eui-alert-container{display:flex;flex-direction:column;row-gap:var(--eui-s-s)}.eui-19 .eui-alert-title-wrapper{display:flex;align-items:center}.eui-19 .eui-alert-icon{margin-right:var(--eui-s-xs)}.eui-19 .eui-alert-title{color:var(--_color);font:var(--eui-f-m-bold-compact)}.eui-19 .eui-alert-content{display:block}.eui-19 .eui-alert-content p:first-child{margin-top:0}.eui-19 .eui-alert-content p:last-child{margin-bottom:0}.eui-19 .eui-alert-close{position:absolute;top:var(--eui-s-xs);right:var(--eui-s-xs)}.eui-19 .eui-alert-close .eui-icon-button__button:hover{background-color:var(--_close-hover-color)}.eui-19 .eui-alert--info{--_color: var(--eui-c-info-dark);--_bg-color: var(--eui-c-info-bg);--_close-hover-color: var(--eui-c-info-lightest)}.eui-19 .eui-alert--success{--_color: var(--eui-c-success-darker);--_bg-color: var(--eui-c-success-bg);--_close-hover-color: var(--eui-c-success-lightest)}.eui-19 .eui-alert--danger{--_color: var(--eui-c-danger-dark);--_bg-color: var(--eui-c-danger-bg);--_close-hover-color: var(--eui-c-danger-lightest)}.eui-19 .eui-alert--warning{--_color: var(--eui-c-warning-darker);--_bg-color: var(--eui-c-warning-bg);--_close-hover-color: var(--eui-c-warning-lightest)}.eui-19 .eui-alert--bordered.eui-alert--info{--_color: var(--eui-c-info-dark);--_bg-color: var(--eui-c-neutral-bg-lighter);--_close-hover-color: var(--eui-c-info-bg);--_border-color: var(--eui-c-info-dark)}.eui-19 .eui-alert--bordered.eui-alert--success{--_color: var(--eui-c-success-dark);--_bg-color: var(--eui-c-neutral-bg-lighter);--_close-hover-color: var(--eui-c-success-bg);--_border-color: var(--eui-c-success)}.eui-19 .eui-alert--bordered.eui-alert--danger{--_color: var(--eui-c-danger-dark);--_bg-color: var(--eui-c-neutral-bg-lighter);--_close-hover-color: var(--eui-c-danger-bg);--_border-color: var(--eui-c-danger)}.eui-19 .eui-alert--bordered.eui-alert--warning{--_color: var(--eui-c-warning-darker);--_bg-color: var(--eui-c-neutral-bg-lighter);--_close-hover-color: var(--eui-c-warning-bg);--_border-color: var(--eui-c-warning)}.eui-19 .eui-alert--hidden{display:none}.eui-19 .eui-alert--focusable:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-alert--focusable:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-alert--focusable [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-alert--bordered{border:1px solid var(--eui-c-neutral-lightest);border-left:3px solid var(--_border-color)}\n"], dependencies: [{ kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.EuiIconStateComponent, selector: "eui-icon-state", inputs: ["size", "ariaLabel"] }, { kind: "component", type: i4.EuiIconButtonComponent, selector: "eui-icon-button", inputs: ["icon", "fillColor", "size", "ariaLabel", "tabindex", "hasNoPadding", "hasFocusHoverColor", "hasFocusHoverBg", "euiRounded", "euiDisabled"], outputs: ["buttonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
79
79
|
}
|
|
80
80
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EuiAlertComponent, decorators: [{
|
|
81
81
|
type: Component,
|
|
@@ -90,7 +90,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ng
|
|
|
90
90
|
'euiVariant',
|
|
91
91
|
],
|
|
92
92
|
},
|
|
93
|
-
], template: "@if (alertTitle) {\n <div class=\"eui-alert-container\">\n <div class=\"eui-alert-title-wrapper\">\n @if (!isMuted) {\n <ng-content *ngTemplateOutlet=\"icon\"/>\n }\n <ng-content select=\"eui-alert-title\"/>\n </div>\n <ng-content *ngTemplateOutlet=\"body\"/>\n </div>\n\n} @else {\n @if (!isMuted) {\n <ng-content *ngTemplateOutlet=\"icon\"/>\n }\n <ng-content *ngTemplateOutlet=\"body\"/>\n}\n\n<ng-template #icon>\n <eui-icon-state [euiVariant]=\"baseStatesDirective.euiVariant\" class=\"eui-alert-icon\"/>\n</ng-template>\n\n<ng-template #body>\n <div class=\"eui-alert-content\">\n <ng-content/>\n </div>\n</ng-template>\n\n@if (isCloseable) {\n <eui-icon-button class=\"eui-alert-close\"\n icon=\"close:outline\"\n euiRounded\n (buttonClick)=\"onCloseClick()\"\n fillColor=\"neutral-light\"\n ariaLabel=\"Close alert icon\"/>\n}\n", styles: [".eui-
|
|
93
|
+
], template: "@if (alertTitle) {\n <div class=\"eui-alert-container\">\n <div class=\"eui-alert-title-wrapper\">\n @if (!isMuted) {\n <ng-content *ngTemplateOutlet=\"icon\"/>\n }\n <ng-content select=\"eui-alert-title\"/>\n </div>\n <ng-content *ngTemplateOutlet=\"body\"/>\n </div>\n\n} @else {\n @if (!isMuted) {\n <ng-content *ngTemplateOutlet=\"icon\"/>\n }\n <ng-content *ngTemplateOutlet=\"body\"/>\n}\n\n<ng-template #icon>\n <eui-icon-state [euiVariant]=\"baseStatesDirective.euiVariant\" class=\"eui-alert-icon\"/>\n</ng-template>\n\n<ng-template #body>\n <div class=\"eui-alert-content\">\n <ng-content/>\n </div>\n</ng-template>\n\n@if (isCloseable) {\n <eui-icon-button class=\"eui-alert-close\"\n icon=\"close:outline\"\n euiRounded\n (buttonClick)=\"onCloseClick()\"\n fillColor=\"neutral-light\"\n ariaLabel=\"Close alert icon\"/>\n}\n", styles: [".eui-19 .eui-alert{--_border-color: var(--eui-alert-border-color, var(--eui-c-info-dark));--_color: var(--eui-alert-color, var(--eui-c-info-dark));--_bg-color: var(--eui-alert-bg-color, var(--eui-c-info-bg));--_close-hover-color: var(--eui-alert-close-hover-color, var(--eui-c-info-lightest))}.eui-19 .eui-alert{display:flex;padding:var(--eui-s-m);background-color:var(--_bg-color);position:relative;border-radius:var(--eui-br-s)}.eui-19 .eui-alert--closeable{padding-right:var(--eui-s-4xl)}.eui-19 .eui-alert-container{display:flex;flex-direction:column;row-gap:var(--eui-s-s)}.eui-19 .eui-alert-title-wrapper{display:flex;align-items:center}.eui-19 .eui-alert-icon{margin-right:var(--eui-s-xs)}.eui-19 .eui-alert-title{color:var(--_color);font:var(--eui-f-m-bold-compact)}.eui-19 .eui-alert-content{display:block}.eui-19 .eui-alert-content p:first-child{margin-top:0}.eui-19 .eui-alert-content p:last-child{margin-bottom:0}.eui-19 .eui-alert-close{position:absolute;top:var(--eui-s-xs);right:var(--eui-s-xs)}.eui-19 .eui-alert-close .eui-icon-button__button:hover{background-color:var(--_close-hover-color)}.eui-19 .eui-alert--info{--_color: var(--eui-c-info-dark);--_bg-color: var(--eui-c-info-bg);--_close-hover-color: var(--eui-c-info-lightest)}.eui-19 .eui-alert--success{--_color: var(--eui-c-success-darker);--_bg-color: var(--eui-c-success-bg);--_close-hover-color: var(--eui-c-success-lightest)}.eui-19 .eui-alert--danger{--_color: var(--eui-c-danger-dark);--_bg-color: var(--eui-c-danger-bg);--_close-hover-color: var(--eui-c-danger-lightest)}.eui-19 .eui-alert--warning{--_color: var(--eui-c-warning-darker);--_bg-color: var(--eui-c-warning-bg);--_close-hover-color: var(--eui-c-warning-lightest)}.eui-19 .eui-alert--bordered.eui-alert--info{--_color: var(--eui-c-info-dark);--_bg-color: var(--eui-c-neutral-bg-lighter);--_close-hover-color: var(--eui-c-info-bg);--_border-color: var(--eui-c-info-dark)}.eui-19 .eui-alert--bordered.eui-alert--success{--_color: var(--eui-c-success-dark);--_bg-color: var(--eui-c-neutral-bg-lighter);--_close-hover-color: var(--eui-c-success-bg);--_border-color: var(--eui-c-success)}.eui-19 .eui-alert--bordered.eui-alert--danger{--_color: var(--eui-c-danger-dark);--_bg-color: var(--eui-c-neutral-bg-lighter);--_close-hover-color: var(--eui-c-danger-bg);--_border-color: var(--eui-c-danger)}.eui-19 .eui-alert--bordered.eui-alert--warning{--_color: var(--eui-c-warning-darker);--_bg-color: var(--eui-c-neutral-bg-lighter);--_close-hover-color: var(--eui-c-warning-bg);--_border-color: var(--eui-c-warning)}.eui-19 .eui-alert--hidden{display:none}.eui-19 .eui-alert--focusable:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-alert--focusable:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-alert--focusable [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-alert--bordered{border:1px solid var(--eui-c-neutral-lightest);border-left:3px solid var(--_border-color)}\n"] }]
|
|
94
94
|
}], ctorParameters: () => [{ type: i1.BaseStatesDirective }], propDecorators: { cssClasses: [{
|
|
95
95
|
type: HostBinding,
|
|
96
96
|
args: ['class']
|
|
@@ -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: "19.0.0-rc.1", 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: "19.0.0-rc.1", type: EuiAutocompleteComponent, isStandalone: false, 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 eui-18\"\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>\n", styles: [".eui-18 .eui-autocomplete,.eui-18 .eui-autocomplete__wrapper{width:100%}.eui-18 .eui-autocomplete__wrapper .eui-autocomplete__input-container{display:flex;width:100%}.eui-18 .eui-autocomplete__panel-container .eui-autocomplete__panel{box-shadow:var(--eui-sh-8);width:100%}.eui-18 .eui-autocomplete__panel-container.eui-autocomplete__panel-container--no-option .eui-autocomplete__panel{box-shadow:none}.eui-18 .eui-autocomplete.eui-autocomplete--chips-position-bottom .eui-autocomplete__input-container{margin-bottom:var(--eui-s-2xs)}.eui-18 .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-18 .eui-autocomplete.eui-autocomplete--chips-position-inside .eui-autocomplete__wrapper .eui-chip-list,.eui-18 .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-18 .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-18 .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-18 .eui-autocomplete.eui-autocomplete--chips-position-inside .eui-autocomplete__wrapper .eui-chip-list euichiplistappendcontent{flex-grow:1}.eui-18 button~.eui-autocomplete .eui-autocomplete__input,.eui-18 .eui-input-group-addon-item~.eui-autocomplete .eui-autocomplete__input{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0}.eui-18 .eui-autocomplete:has(+button) .eui-autocomplete__input{border-top-right-radius:0;border-bottom-right-radius:0}.eui-18 .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-18 .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-18 .eui-autocomplete-option-group .eui-autocomplete-option-group__label .eui-icon,.eui-18 .eui-autocomplete-option-group .eui-autocomplete-option-group__label .eui-icon-svg,.eui-18 .eui-autocomplete-option-group .eui-autocomplete-option-group__label .eui-flag-icon{margin-right:var(--eui-s-2xs)}.eui-18 .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-18 .eui-autocomplete-option:hover{background-color:var(--eui-c-neutral-bg-light)}.eui-18 .eui-autocomplete-option--group-item{padding-left:var(--eui-s-l)}.eui-18 .eui-autocomplete-option .eui-icon,.eui-18 .eui-autocomplete-option .eui-icon-svg,.eui-18 .eui-autocomplete-option .eui-flag-icon{margin-right:var(--eui-s-xs)}.eui-18 .eui-autocomplete-option--primary{border-left-color:var(--eui-c-primary)}.eui-18 .eui-autocomplete-option--secondary{border-left-color:var(--eui-c-neutral-lighter)}.eui-18 .eui-autocomplete-option--info{border-left-color:var(--eui-c-info)}.eui-18 .eui-autocomplete-option--success{border-left-color:var(--eui-c-success-dark)}.eui-18 .eui-autocomplete-option--warning{border-left-color:var(--eui-c-warning)}.eui-18 .eui-autocomplete-option--danger{border-left-color:var(--eui-c-danger-dark)}.eui-18 .eui-autocomplete-option--accent{border-left-color:var(--eui-c-accent)}.eui-18 .eui-autocomplete-option--active{background-color:var(--eui-c-primary-lightest)}.eui-18 .eui-autocomplete-option--disabled{cursor:default;opacity:.4}.eui-18 .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: "19.0.0-rc.1", type: EuiAutocompleteComponent, isStandalone: false, 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 eui-18\"\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>\n", styles: [".eui-19 .eui-autocomplete,.eui-19 .eui-autocomplete__wrapper{width:100%}.eui-19 .eui-autocomplete__wrapper .eui-autocomplete__input-container{display:flex;width:100%}.eui-19 .eui-autocomplete__panel-container .eui-autocomplete__panel{box-shadow:var(--eui-sh-8);width:100%}.eui-19 .eui-autocomplete__panel-container.eui-autocomplete__panel-container--no-option .eui-autocomplete__panel{box-shadow:none}.eui-19 .eui-autocomplete.eui-autocomplete--chips-position-bottom .eui-autocomplete__input-container{margin-bottom:var(--eui-s-2xs)}.eui-19 .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-19 .eui-autocomplete.eui-autocomplete--chips-position-inside .eui-autocomplete__wrapper .eui-chip-list,.eui-19 .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-19 .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-19 .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-19 .eui-autocomplete.eui-autocomplete--chips-position-inside .eui-autocomplete__wrapper .eui-chip-list euichiplistappendcontent{flex-grow:1}.eui-19 button~.eui-autocomplete .eui-autocomplete__input,.eui-19 .eui-input-group-addon-item~.eui-autocomplete .eui-autocomplete__input{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0}.eui-19 .eui-autocomplete:has(+button) .eui-autocomplete__input{border-top-right-radius:0;border-bottom-right-radius:0}.eui-19 .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-19 .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-19 .eui-autocomplete-option-group .eui-autocomplete-option-group__label .eui-icon,.eui-19 .eui-autocomplete-option-group .eui-autocomplete-option-group__label .eui-icon-svg,.eui-19 .eui-autocomplete-option-group .eui-autocomplete-option-group__label .eui-flag-icon{margin-right:var(--eui-s-2xs)}.eui-19 .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-19 .eui-autocomplete-option:hover{background-color:var(--eui-c-neutral-bg-light)}.eui-19 .eui-autocomplete-option--group-item{padding-left:var(--eui-s-l)}.eui-19 .eui-autocomplete-option .eui-icon,.eui-19 .eui-autocomplete-option .eui-icon-svg,.eui-19 .eui-autocomplete-option .eui-flag-icon{margin-right:var(--eui-s-xs)}.eui-19 .eui-autocomplete-option--primary{border-left-color:var(--eui-c-primary)}.eui-19 .eui-autocomplete-option--secondary{border-left-color:var(--eui-c-neutral-lighter)}.eui-19 .eui-autocomplete-option--info{border-left-color:var(--eui-c-info)}.eui-19 .eui-autocomplete-option--success{border-left-color:var(--eui-c-success-dark)}.eui-19 .eui-autocomplete-option--warning{border-left-color:var(--eui-c-warning)}.eui-19 .eui-autocomplete-option--danger{border-left-color:var(--eui-c-danger-dark)}.eui-19 .eui-autocomplete-option--accent{border-left-color:var(--eui-c-accent)}.eui-19 .eui-autocomplete-option--active{background-color:var(--eui-c-primary-lightest)}.eui-19 .eui-autocomplete-option--disabled{cursor:default;opacity:.4}.eui-19 .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: "19.0.0-rc.1", ngImport: i0, type: EuiAutocompleteComponent, decorators: [{
|
|
793
793
|
type: Component,
|
|
@@ -803,7 +803,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ng
|
|
|
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 {{ 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 eui-18\"\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>\n", styles: [".eui-18 .eui-autocomplete,.eui-18 .eui-autocomplete__wrapper{width:100%}.eui-18 .eui-autocomplete__wrapper .eui-autocomplete__input-container{display:flex;width:100%}.eui-18 .eui-autocomplete__panel-container .eui-autocomplete__panel{box-shadow:var(--eui-sh-8);width:100%}.eui-18 .eui-autocomplete__panel-container.eui-autocomplete__panel-container--no-option .eui-autocomplete__panel{box-shadow:none}.eui-18 .eui-autocomplete.eui-autocomplete--chips-position-bottom .eui-autocomplete__input-container{margin-bottom:var(--eui-s-2xs)}.eui-18 .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-18 .eui-autocomplete.eui-autocomplete--chips-position-inside .eui-autocomplete__wrapper .eui-chip-list,.eui-18 .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-18 .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-18 .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-18 .eui-autocomplete.eui-autocomplete--chips-position-inside .eui-autocomplete__wrapper .eui-chip-list euichiplistappendcontent{flex-grow:1}.eui-18 button~.eui-autocomplete .eui-autocomplete__input,.eui-18 .eui-input-group-addon-item~.eui-autocomplete .eui-autocomplete__input{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0}.eui-18 .eui-autocomplete:has(+button) .eui-autocomplete__input{border-top-right-radius:0;border-bottom-right-radius:0}.eui-18 .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-18 .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-18 .eui-autocomplete-option-group .eui-autocomplete-option-group__label .eui-icon,.eui-18 .eui-autocomplete-option-group .eui-autocomplete-option-group__label .eui-icon-svg,.eui-18 .eui-autocomplete-option-group .eui-autocomplete-option-group__label .eui-flag-icon{margin-right:var(--eui-s-2xs)}.eui-18 .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-18 .eui-autocomplete-option:hover{background-color:var(--eui-c-neutral-bg-light)}.eui-18 .eui-autocomplete-option--group-item{padding-left:var(--eui-s-l)}.eui-18 .eui-autocomplete-option .eui-icon,.eui-18 .eui-autocomplete-option .eui-icon-svg,.eui-18 .eui-autocomplete-option .eui-flag-icon{margin-right:var(--eui-s-xs)}.eui-18 .eui-autocomplete-option--primary{border-left-color:var(--eui-c-primary)}.eui-18 .eui-autocomplete-option--secondary{border-left-color:var(--eui-c-neutral-lighter)}.eui-18 .eui-autocomplete-option--info{border-left-color:var(--eui-c-info)}.eui-18 .eui-autocomplete-option--success{border-left-color:var(--eui-c-success-dark)}.eui-18 .eui-autocomplete-option--warning{border-left-color:var(--eui-c-warning)}.eui-18 .eui-autocomplete-option--danger{border-left-color:var(--eui-c-danger-dark)}.eui-18 .eui-autocomplete-option--accent{border-left-color:var(--eui-c-accent)}.eui-18 .eui-autocomplete-option--active{background-color:var(--eui-c-primary-lightest)}.eui-18 .eui-autocomplete-option--disabled{cursor:default;opacity:.4}.eui-18 .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 eui-18\"\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>\n", styles: [".eui-19 .eui-autocomplete,.eui-19 .eui-autocomplete__wrapper{width:100%}.eui-19 .eui-autocomplete__wrapper .eui-autocomplete__input-container{display:flex;width:100%}.eui-19 .eui-autocomplete__panel-container .eui-autocomplete__panel{box-shadow:var(--eui-sh-8);width:100%}.eui-19 .eui-autocomplete__panel-container.eui-autocomplete__panel-container--no-option .eui-autocomplete__panel{box-shadow:none}.eui-19 .eui-autocomplete.eui-autocomplete--chips-position-bottom .eui-autocomplete__input-container{margin-bottom:var(--eui-s-2xs)}.eui-19 .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-19 .eui-autocomplete.eui-autocomplete--chips-position-inside .eui-autocomplete__wrapper .eui-chip-list,.eui-19 .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-19 .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-19 .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-19 .eui-autocomplete.eui-autocomplete--chips-position-inside .eui-autocomplete__wrapper .eui-chip-list euichiplistappendcontent{flex-grow:1}.eui-19 button~.eui-autocomplete .eui-autocomplete__input,.eui-19 .eui-input-group-addon-item~.eui-autocomplete .eui-autocomplete__input{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0}.eui-19 .eui-autocomplete:has(+button) .eui-autocomplete__input{border-top-right-radius:0;border-bottom-right-radius:0}.eui-19 .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-19 .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-19 .eui-autocomplete-option-group .eui-autocomplete-option-group__label .eui-icon,.eui-19 .eui-autocomplete-option-group .eui-autocomplete-option-group__label .eui-icon-svg,.eui-19 .eui-autocomplete-option-group .eui-autocomplete-option-group__label .eui-flag-icon{margin-right:var(--eui-s-2xs)}.eui-19 .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-19 .eui-autocomplete-option:hover{background-color:var(--eui-c-neutral-bg-light)}.eui-19 .eui-autocomplete-option--group-item{padding-left:var(--eui-s-l)}.eui-19 .eui-autocomplete-option .eui-icon,.eui-19 .eui-autocomplete-option .eui-icon-svg,.eui-19 .eui-autocomplete-option .eui-flag-icon{margin-right:var(--eui-s-xs)}.eui-19 .eui-autocomplete-option--primary{border-left-color:var(--eui-c-primary)}.eui-19 .eui-autocomplete-option--secondary{border-left-color:var(--eui-c-neutral-lighter)}.eui-19 .eui-autocomplete-option--info{border-left-color:var(--eui-c-info)}.eui-19 .eui-autocomplete-option--success{border-left-color:var(--eui-c-success-dark)}.eui-19 .eui-autocomplete-option--warning{border-left-color:var(--eui-c-warning)}.eui-19 .eui-autocomplete-option--danger{border-left-color:var(--eui-c-danger-dark)}.eui-19 .eui-autocomplete-option--accent{border-left-color:var(--eui-c-accent)}.eui-19 .eui-autocomplete-option--active{background-color:var(--eui-c-primary-lightest)}.eui-19 .eui-autocomplete-option--disabled{cursor:default;opacity:.4}.eui-19 .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
|
}, {
|
|
@@ -27,7 +27,7 @@ class EuiAvatarComponent {
|
|
|
27
27
|
this.hasNoBackground = false;
|
|
28
28
|
}
|
|
29
29
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EuiAvatarComponent, deps: [{ token: i1.BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
30
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.0-rc.1", type: EuiAvatarComponent, isStandalone: false, selector: "div[euiAvatar], span[euiAvatar], eui-avatar", inputs: { e2eAttr: "e2eAttr", ariaLabel: ["aria-label", "ariaLabel"], hasShadow: ["hasShadow", "hasShadow", booleanAttribute], isShapeSquare: ["isShapeSquare", "isShapeSquare", booleanAttribute], isFlat: ["isFlat", "isFlat", booleanAttribute], hasNoBackground: ["hasNoBackground", "hasNoBackground", booleanAttribute] }, host: { properties: { "class": "this.cssClasses", "attr.data-e2e": "this.e2eAttr", "attr.role": "this.role", "attr.aria-label": "this.ariaLabel" } }, hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiPrimary", "euiPrimary", "euiSecondary", "euiSecondary", "euiSuccess", "euiSuccess", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiDanger", "euiDanger", "euiAccent", "euiAccent", "euiVariant", "euiVariant", "euiSizeXS", "euiSizeXS", "euiSizeS", "euiSizeS", "euiSizeL", "euiSizeL", "euiSizeXL", "euiSizeXL", "euiSize2XL", "euiSize2XL", "euiSizeVariant", "euiSizeVariant"] }], ngImport: i0, template: "<div *ngIf=\"hasShadow\" class=\"eui-avatar-shadow\"></div>\n\n<div class=\"eui-avatar-content\">\n <ng-content select=\"eui-avatar-icon\"></ng-content>\n <ng-content select=\"eui-avatar-text\"></ng-content>\n <ng-content select=\"eui-avatar-image\"></ng-content>\n <ng-content select=\"eui-avatar-badge\"></ng-content>\n</div>\n", styles: [".eui-
|
|
30
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.0-rc.1", type: EuiAvatarComponent, isStandalone: false, selector: "div[euiAvatar], span[euiAvatar], eui-avatar", inputs: { e2eAttr: "e2eAttr", ariaLabel: ["aria-label", "ariaLabel"], hasShadow: ["hasShadow", "hasShadow", booleanAttribute], isShapeSquare: ["isShapeSquare", "isShapeSquare", booleanAttribute], isFlat: ["isFlat", "isFlat", booleanAttribute], hasNoBackground: ["hasNoBackground", "hasNoBackground", booleanAttribute] }, host: { properties: { "class": "this.cssClasses", "attr.data-e2e": "this.e2eAttr", "attr.role": "this.role", "attr.aria-label": "this.ariaLabel" } }, hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiPrimary", "euiPrimary", "euiSecondary", "euiSecondary", "euiSuccess", "euiSuccess", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiDanger", "euiDanger", "euiAccent", "euiAccent", "euiVariant", "euiVariant", "euiSizeXS", "euiSizeXS", "euiSizeS", "euiSizeS", "euiSizeL", "euiSizeL", "euiSizeXL", "euiSizeXL", "euiSize2XL", "euiSize2XL", "euiSizeVariant", "euiSizeVariant"] }], ngImport: i0, template: "<div *ngIf=\"hasShadow\" class=\"eui-avatar-shadow\"></div>\n\n<div class=\"eui-avatar-content\">\n <ng-content select=\"eui-avatar-icon\"></ng-content>\n <ng-content select=\"eui-avatar-text\"></ng-content>\n <ng-content select=\"eui-avatar-image\"></ng-content>\n <ng-content select=\"eui-avatar-badge\"></ng-content>\n</div>\n", styles: [".eui-19 .eui-avatar{--_size: var(--eui-avatar-size, 3rem);--_icon-size: var(--eui-avatar-icon-size, 1.5rem);--_font-size: var(--eui-avatar-font-size, var(--eui-f-size-xl));--_bg-color: var(--eui-avatar-bg-color, var(--eui-c-neutral-bg-light));--_color: var(--eui-avatar-color, var(--eui-c-neutral-bg-light-contrast));--_badge-offset-top: var(--eui-avatar-badge-offset-top, 0%);--_badge-offset-bottom: var(--eui-avatar-badge-offset-bottom, 60%);--_badge-offset-right: var(--eui-avatar-badge-offset-right, 70%)}.eui-19 .eui-avatar{display:inline-flex;position:relative}.eui-19 .eui-avatar-content{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--eui-br-max);background-color:var(--_bg-color);height:var(--_size);width:var(--_size);box-shadow:var(--eui-sh-1);position:relative}.eui-19 .eui-avatar-shadow{position:absolute;right:-.35rem;height:var(--_size);width:var(--_size);border:.65rem solid var(--eui-c-neutral-lighter);border-radius:var(--eui-br-max)}.eui-19 .eui-avatar-list{display:inline-flex}.eui-19 .eui-avatar-list .eui-avatar:not(:first-child){margin-left:-1rem}.eui-19 .eui-avatar-icon{display:inline-flex;color:var(--_color)}.eui-19 .eui-avatar-icon .eui-icon-svg svg{height:var(--_icon-size)!important;width:var(--_icon-size)!important;fill:var(--_color)!important;color:var(--_color)!important}.eui-19 .eui-avatar-text{color:var(--_color);font:var(--eui-f-m-bold);font-size:var(--_font-size)}.eui-19 .eui-avatar-image{background-size:cover;height:100%;width:100%}.eui-19 .eui-avatar-image img{border-radius:var(--eui-br-max);height:100%;width:100%}.eui-19 .eui-avatar--no-background .eui-avatar-image img{border-radius:0;background-color:var(--eui-c-white)}.eui-19 .eui-avatar-badge{position:absolute;left:var(--_badge-offset-right)}.eui-19 .eui-avatar-badge--top{top:var(--_badge-offset-top)}.eui-19 .eui-avatar-badge--bottom{top:var(--_badge-offset-bottom)}.eui-19 .eui-avatar-badge .eui-badge{border-color:var(--eui-c-white)}.eui-19 .eui-avatar--primary{--_bg-color: var(--eui-c-primary);--_color: var(--eui-c-primary-contrast)}.eui-19 .eui-avatar--secondary{--_bg-color: var(--eui-c-neutral-bg-light);--_color: var(--eui-c-neutral)}.eui-19 .eui-avatar--info{--_bg-color: var(--eui-c-info);--_color: var(--eui-c-info-contrast)}.eui-19 .eui-avatar--success{--_bg-color: var(--eui-c-success-dark);--_color: var(--eui-c-success-contrast)}.eui-19 .eui-avatar--warning{--_bg-color: var(--eui-c-warning);--_color: var(--eui-c-warning-contrast)}.eui-19 .eui-avatar--danger{--_bg-color: var(--eui-c-danger-dark);--_color: var(--eui-c-danger-contrast)}.eui-19 .eui-avatar--accent{--_bg-color: var(--eui-c-accent);--_color: var(--eui-c-accent-contrast)}.eui-19 .eui-avatar--flat{--_bg-color: var(--eui-c-neutral-bg-light);--_color: var(--eui-c-neutral)}.eui-19 .eui-avatar--flat .eui-avatar-content{box-shadow:var(--eui-sh-none)}.eui-19 .eui-avatar--flat.eui-avatar--primary{--_bg-color: var(--eui-c-primary-bg);--_color: var(--eui-c-primary)}.eui-19 .eui-avatar--flat.eui-avatar--secondary{--_bg-color: var(--eui-c-neutral-bg-light);--_color: var(--eui-c-neutral)}.eui-19 .eui-avatar--flat.eui-avatar--info{--_bg-color: var(--eui-c-info-bg);--_color: var(--eui-c-info)}.eui-19 .eui-avatar--flat.eui-avatar--success{--_bg-color: var(--eui-c-success-bg);--_color: var(--eui-c-success-dark)}.eui-19 .eui-avatar--flat.eui-avatar--warning{--_bg-color: var(--eui-c-warning-bg);--_color: var(--eui-c-warning)}.eui-19 .eui-avatar--flat.eui-avatar--danger{--_bg-color: var(--eui-c-danger-bg);--_color: var(--eui-c-danger-dark)}.eui-19 .eui-avatar--flat.eui-avatar--accent{--_bg-color: var(--eui-c-accent-bg);--_color: var(--eui-c-accent)}.eui-19 .eui-avatar--no-background{--_bg-color: transparent;--_color: var(--eui-c-primary)}.eui-19 .eui-avatar--no-background .eui-avatar-content{box-shadow:var(--eui-sh-none);border-radius:var(--eui-br-none)}.eui-19 .eui-avatar--no-background.eui-avatar--secondary{--_color: var(--eui-c-neutral)}.eui-19 .eui-avatar--no-background.eui-avatar--info{--_color: var(--eui-c-info)}.eui-19 .eui-avatar--no-background.eui-avatar--success{--_color: var(--eui-c-success-dark)}.eui-19 .eui-avatar--no-background.eui-avatar--warning{--_color: var(--eui-c-warning)}.eui-19 .eui-avatar--no-background.eui-avatar--danger{--_color: var(--eui-c-danger-dark)}.eui-19 .eui-avatar--no-background.eui-avatar--accent{--_color: var(--eui-c-accent)}.eui-19 .eui-avatar--size-xs{--_size: 1.5rem;--_font-size: var(--eui-f-size-xs);--_icon-size: var(--eui-is-xs)}.eui-19 .eui-avatar--size-s{--_size: 2.5rem;--_font-size: var(--eui-f-s);--_icon-size: var(--eui-is-s)}.eui-19 .eui-avatar--size-m{--_size: 3rem;--_font-size: var(--eui-f-size-xl);--_icon-size: var(--eui-is-m)}.eui-19 .eui-avatar--size-l{--_size: 4rem;--_font-size: var(--eui-f-size-2xl);--_icon-size: var(--eui-is-l)}.eui-19 .eui-avatar--size-xl{--_size: 5rem;--_font-size: var(--eui-f-size-2xl);--_icon-size: var(--eui-is-xl)}.eui-19 .eui-avatar--size-2xl{--_size: 6rem;--_font-size: var(--eui-f-size-3xl);--_icon-size: var(--eui-is-2xl)}.eui-19 .eui-avatar.eui-avatar--shape-square .eui-avatar-content,.eui-19 .eui-avatar.eui-avatar--shape-square .eui-avatar-image img{border-radius:var(--eui-br-m)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
31
31
|
}
|
|
32
32
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EuiAvatarComponent, decorators: [{
|
|
33
33
|
type: Component,
|
|
@@ -51,7 +51,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ng
|
|
|
51
51
|
'euiSizeVariant',
|
|
52
52
|
],
|
|
53
53
|
},
|
|
54
|
-
], template: "<div *ngIf=\"hasShadow\" class=\"eui-avatar-shadow\"></div>\n\n<div class=\"eui-avatar-content\">\n <ng-content select=\"eui-avatar-icon\"></ng-content>\n <ng-content select=\"eui-avatar-text\"></ng-content>\n <ng-content select=\"eui-avatar-image\"></ng-content>\n <ng-content select=\"eui-avatar-badge\"></ng-content>\n</div>\n", styles: [".eui-
|
|
54
|
+
], template: "<div *ngIf=\"hasShadow\" class=\"eui-avatar-shadow\"></div>\n\n<div class=\"eui-avatar-content\">\n <ng-content select=\"eui-avatar-icon\"></ng-content>\n <ng-content select=\"eui-avatar-text\"></ng-content>\n <ng-content select=\"eui-avatar-image\"></ng-content>\n <ng-content select=\"eui-avatar-badge\"></ng-content>\n</div>\n", styles: [".eui-19 .eui-avatar{--_size: var(--eui-avatar-size, 3rem);--_icon-size: var(--eui-avatar-icon-size, 1.5rem);--_font-size: var(--eui-avatar-font-size, var(--eui-f-size-xl));--_bg-color: var(--eui-avatar-bg-color, var(--eui-c-neutral-bg-light));--_color: var(--eui-avatar-color, var(--eui-c-neutral-bg-light-contrast));--_badge-offset-top: var(--eui-avatar-badge-offset-top, 0%);--_badge-offset-bottom: var(--eui-avatar-badge-offset-bottom, 60%);--_badge-offset-right: var(--eui-avatar-badge-offset-right, 70%)}.eui-19 .eui-avatar{display:inline-flex;position:relative}.eui-19 .eui-avatar-content{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--eui-br-max);background-color:var(--_bg-color);height:var(--_size);width:var(--_size);box-shadow:var(--eui-sh-1);position:relative}.eui-19 .eui-avatar-shadow{position:absolute;right:-.35rem;height:var(--_size);width:var(--_size);border:.65rem solid var(--eui-c-neutral-lighter);border-radius:var(--eui-br-max)}.eui-19 .eui-avatar-list{display:inline-flex}.eui-19 .eui-avatar-list .eui-avatar:not(:first-child){margin-left:-1rem}.eui-19 .eui-avatar-icon{display:inline-flex;color:var(--_color)}.eui-19 .eui-avatar-icon .eui-icon-svg svg{height:var(--_icon-size)!important;width:var(--_icon-size)!important;fill:var(--_color)!important;color:var(--_color)!important}.eui-19 .eui-avatar-text{color:var(--_color);font:var(--eui-f-m-bold);font-size:var(--_font-size)}.eui-19 .eui-avatar-image{background-size:cover;height:100%;width:100%}.eui-19 .eui-avatar-image img{border-radius:var(--eui-br-max);height:100%;width:100%}.eui-19 .eui-avatar--no-background .eui-avatar-image img{border-radius:0;background-color:var(--eui-c-white)}.eui-19 .eui-avatar-badge{position:absolute;left:var(--_badge-offset-right)}.eui-19 .eui-avatar-badge--top{top:var(--_badge-offset-top)}.eui-19 .eui-avatar-badge--bottom{top:var(--_badge-offset-bottom)}.eui-19 .eui-avatar-badge .eui-badge{border-color:var(--eui-c-white)}.eui-19 .eui-avatar--primary{--_bg-color: var(--eui-c-primary);--_color: var(--eui-c-primary-contrast)}.eui-19 .eui-avatar--secondary{--_bg-color: var(--eui-c-neutral-bg-light);--_color: var(--eui-c-neutral)}.eui-19 .eui-avatar--info{--_bg-color: var(--eui-c-info);--_color: var(--eui-c-info-contrast)}.eui-19 .eui-avatar--success{--_bg-color: var(--eui-c-success-dark);--_color: var(--eui-c-success-contrast)}.eui-19 .eui-avatar--warning{--_bg-color: var(--eui-c-warning);--_color: var(--eui-c-warning-contrast)}.eui-19 .eui-avatar--danger{--_bg-color: var(--eui-c-danger-dark);--_color: var(--eui-c-danger-contrast)}.eui-19 .eui-avatar--accent{--_bg-color: var(--eui-c-accent);--_color: var(--eui-c-accent-contrast)}.eui-19 .eui-avatar--flat{--_bg-color: var(--eui-c-neutral-bg-light);--_color: var(--eui-c-neutral)}.eui-19 .eui-avatar--flat .eui-avatar-content{box-shadow:var(--eui-sh-none)}.eui-19 .eui-avatar--flat.eui-avatar--primary{--_bg-color: var(--eui-c-primary-bg);--_color: var(--eui-c-primary)}.eui-19 .eui-avatar--flat.eui-avatar--secondary{--_bg-color: var(--eui-c-neutral-bg-light);--_color: var(--eui-c-neutral)}.eui-19 .eui-avatar--flat.eui-avatar--info{--_bg-color: var(--eui-c-info-bg);--_color: var(--eui-c-info)}.eui-19 .eui-avatar--flat.eui-avatar--success{--_bg-color: var(--eui-c-success-bg);--_color: var(--eui-c-success-dark)}.eui-19 .eui-avatar--flat.eui-avatar--warning{--_bg-color: var(--eui-c-warning-bg);--_color: var(--eui-c-warning)}.eui-19 .eui-avatar--flat.eui-avatar--danger{--_bg-color: var(--eui-c-danger-bg);--_color: var(--eui-c-danger-dark)}.eui-19 .eui-avatar--flat.eui-avatar--accent{--_bg-color: var(--eui-c-accent-bg);--_color: var(--eui-c-accent)}.eui-19 .eui-avatar--no-background{--_bg-color: transparent;--_color: var(--eui-c-primary)}.eui-19 .eui-avatar--no-background .eui-avatar-content{box-shadow:var(--eui-sh-none);border-radius:var(--eui-br-none)}.eui-19 .eui-avatar--no-background.eui-avatar--secondary{--_color: var(--eui-c-neutral)}.eui-19 .eui-avatar--no-background.eui-avatar--info{--_color: var(--eui-c-info)}.eui-19 .eui-avatar--no-background.eui-avatar--success{--_color: var(--eui-c-success-dark)}.eui-19 .eui-avatar--no-background.eui-avatar--warning{--_color: var(--eui-c-warning)}.eui-19 .eui-avatar--no-background.eui-avatar--danger{--_color: var(--eui-c-danger-dark)}.eui-19 .eui-avatar--no-background.eui-avatar--accent{--_color: var(--eui-c-accent)}.eui-19 .eui-avatar--size-xs{--_size: 1.5rem;--_font-size: var(--eui-f-size-xs);--_icon-size: var(--eui-is-xs)}.eui-19 .eui-avatar--size-s{--_size: 2.5rem;--_font-size: var(--eui-f-s);--_icon-size: var(--eui-is-s)}.eui-19 .eui-avatar--size-m{--_size: 3rem;--_font-size: var(--eui-f-size-xl);--_icon-size: var(--eui-is-m)}.eui-19 .eui-avatar--size-l{--_size: 4rem;--_font-size: var(--eui-f-size-2xl);--_icon-size: var(--eui-is-l)}.eui-19 .eui-avatar--size-xl{--_size: 5rem;--_font-size: var(--eui-f-size-2xl);--_icon-size: var(--eui-is-xl)}.eui-19 .eui-avatar--size-2xl{--_size: 6rem;--_font-size: var(--eui-f-size-3xl);--_icon-size: var(--eui-is-2xl)}.eui-19 .eui-avatar.eui-avatar--shape-square .eui-avatar-content,.eui-19 .eui-avatar.eui-avatar--shape-square .eui-avatar-image img{border-radius:var(--eui-br-m)}\n"] }]
|
|
55
55
|
}], ctorParameters: () => [{ type: i1.BaseStatesDirective }], propDecorators: { cssClasses: [{
|
|
56
56
|
type: HostBinding,
|
|
57
57
|
args: ['class']
|
|
@@ -48,7 +48,7 @@ class EuiBadgeComponent {
|
|
|
48
48
|
}
|
|
49
49
|
}
|
|
50
50
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EuiBadgeComponent, deps: [{ token: i1.BaseStatesDirective }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
51
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0-rc.1", type: EuiBadgeComponent, isStandalone: false, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: { e2eAttr: "e2eAttr", ariaLabel: ["aria-label", "ariaLabel"], maxCharCount: "maxCharCount", charReplacement: "charReplacement", euiIconBadge: ["euiIconBadge", "euiIconBadge", booleanAttribute], euiDottedBadge: ["euiDottedBadge", "euiDottedBadge", booleanAttribute] }, host: { properties: { "class": "this.cssClasses", "attr.data-e2e": "this.e2eAttr", "attr.role": "this.role", "attr.aria-label": "this.ariaLabel" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["contentRef"], descendants: true }], hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiPrimary", "euiPrimary", "euiSecondary", "euiSecondary", "euiSuccess", "euiSuccess", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiDanger", "euiDanger", "euiAccent", "euiAccent", "euiVariant", "euiVariant", "euiSizeS", "euiSizeS", "euiSizeM", "euiSizeM", "euiSizeVariant", "euiSizeVariant", "euiOutline", "euiOutline"] }], ngImport: i0, template: "@if (hasContentUpdated) {\n <span class=\"eui-badge-wrapper\">\n {{ updatedContent }}\n </span>\n} @else {\n <span class=\"eui-badge-wrapper\" #contentRef (cdkObserveContent)=\"onContentChanged()\">\n <ng-content></ng-content>\n </span>\n}\n\n", styles: [".eui-
|
|
51
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0-rc.1", type: EuiBadgeComponent, isStandalone: false, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: { e2eAttr: "e2eAttr", ariaLabel: ["aria-label", "ariaLabel"], maxCharCount: "maxCharCount", charReplacement: "charReplacement", euiIconBadge: ["euiIconBadge", "euiIconBadge", booleanAttribute], euiDottedBadge: ["euiDottedBadge", "euiDottedBadge", booleanAttribute] }, host: { properties: { "class": "this.cssClasses", "attr.data-e2e": "this.e2eAttr", "attr.role": "this.role", "attr.aria-label": "this.ariaLabel" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["contentRef"], descendants: true }], hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiPrimary", "euiPrimary", "euiSecondary", "euiSecondary", "euiSuccess", "euiSuccess", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiDanger", "euiDanger", "euiAccent", "euiAccent", "euiVariant", "euiVariant", "euiSizeS", "euiSizeS", "euiSizeM", "euiSizeM", "euiSizeVariant", "euiSizeVariant", "euiOutline", "euiOutline"] }], ngImport: i0, template: "@if (hasContentUpdated) {\n <span class=\"eui-badge-wrapper\">\n {{ updatedContent }}\n </span>\n} @else {\n <span class=\"eui-badge-wrapper\" #contentRef (cdkObserveContent)=\"onContentChanged()\">\n <ng-content></ng-content>\n </span>\n}\n\n", styles: [".eui-19 .eui-badge{--_color: var(--eui-badge-color, var(--eui-c-neutral));--_bg-color: var(--eui-badge-bg-color, var(--eui-c-neutral-bg));--_color-on-bg: var(--eui-badge-color, var(--eui-c-neutral-bg-contrast));--_border-color: var(--eui-badge-border-color, var(--eui-c-neutral-lighter))}.eui-19 .eui-badge{display:inline-flex;border:1px solid var(--_border-color);border-radius:var(--eui-br-max)}.eui-19 .eui-badge-wrapper{display:inline-flex;align-items:center;height:calc(var(--eui-s-m) + var(--eui-s-2xs));min-width:calc(var(--eui-s-m) + var(--eui-s-2xs));padding:0 var(--eui-s-2xs);justify-content:center;font:var(--eui-f-s-bold-compact);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-19 .eui-badge--empty{width:var(--eui-s-s);height:var(--eui-s-s)}.eui-19 .eui-badge--icon-only .eui-badge-wrapper{padding:0}.eui-19 .eui-badge--primary{--_bg-color: var(--eui-c-primary);--_color-on-bg: var(--eui-c-primary-contrast);--_color: var(--eui-c-primary);--_border-color: transparent}.eui-19 .eui-badge--secondary{--_bg-color: var(--eui-c-neutral-bg);--_color-on-bg: var(--eui-c-neutral-bg-contrast);--_color: var(--eui-c-neutral);--_border-color: var(--eui-c-neutral-light)}.eui-19 .eui-badge--info{--_bg-color: var(--eui-c-info);--_color-on-bg: var(--eui-c-info-contrast);--_color: var(--eui-c-info);--_border-color: transparent}.eui-19 .eui-badge--success{--_bg-color: var(--eui-c-success-dark);--_color-on-bg: var(--eui-c-success-dark-contrast);--_color: var(--eui-c-success-dark);--_border-color: transparent}.eui-19 .eui-badge--warning{--_bg-color: var(--eui-c-warning);--_color-on-bg: var(--eui-c-warning-contrast);--_color: var(--eui-c-warning-dark);--_border-color: transparent}.eui-19 .eui-badge--danger{--_bg-color: var(--eui-c-danger-dark);--_color-on-bg: var(--eui-c-danger-dark-contrast);--_color: var(--eui-c-danger-dark);--_border-color: transparent}.eui-19 .eui-badge--accent{--_bg-color: var(--eui-c-accent-dark);--_color-on-bg: var(--eui-c-accent-dark-contrast);--_color: var(--eui-c-accent-darker);--_border-color: transparent}.eui-19 .eui-badge{background-color:var(--_bg-color)}.eui-19 .eui-badge-wrapper{color:var(--_color-on-bg)}.eui-19 .eui-badge--outline{background-color:var(--eui-c-white);color:var(--_color);border-color:var(--_color)}.eui-19 .eui-badge--outline .eui-badge-wrapper{color:var(--_color)}.eui-19 .eui-badge--size-s .eui-badge-wrapper{height:var(--eui-s-m);min-width:var(--eui-s-m);font:var(--eui-f-xs-bold-compact)}.eui-19 .eui-badge--size-m .eui-badge-wrapper{height:calc(var(--eui-s-m) + var(--eui-s-2xs));min-width:calc(var(--eui-s-m) + var(--eui-s-2xs));font:var(--eui-f-s-bold-compact)}.eui-19 .eui-icon-svg .eui-badge,.eui-19 .eui-icon-svg .eui-badge--size-m{position:absolute;left:40%;top:-20%}.eui-19 .eui-icon-svg .eui-badge--empty{left:70%;top:-5%}.eui-19 .eui-icon-svg--size-l .eui-badge--size-s{left:70%}.eui-19 .eui-button .eui-badge{height:inherit}\n"], dependencies: [{ kind: "directive", type: i2.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
52
52
|
}
|
|
53
53
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EuiBadgeComponent, decorators: [{
|
|
54
54
|
type: Component,
|
|
@@ -70,7 +70,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ng
|
|
|
70
70
|
'euiOutline',
|
|
71
71
|
],
|
|
72
72
|
},
|
|
73
|
-
], template: "@if (hasContentUpdated) {\n <span class=\"eui-badge-wrapper\">\n {{ updatedContent }}\n </span>\n} @else {\n <span class=\"eui-badge-wrapper\" #contentRef (cdkObserveContent)=\"onContentChanged()\">\n <ng-content></ng-content>\n </span>\n}\n\n", styles: [".eui-
|
|
73
|
+
], template: "@if (hasContentUpdated) {\n <span class=\"eui-badge-wrapper\">\n {{ updatedContent }}\n </span>\n} @else {\n <span class=\"eui-badge-wrapper\" #contentRef (cdkObserveContent)=\"onContentChanged()\">\n <ng-content></ng-content>\n </span>\n}\n\n", styles: [".eui-19 .eui-badge{--_color: var(--eui-badge-color, var(--eui-c-neutral));--_bg-color: var(--eui-badge-bg-color, var(--eui-c-neutral-bg));--_color-on-bg: var(--eui-badge-color, var(--eui-c-neutral-bg-contrast));--_border-color: var(--eui-badge-border-color, var(--eui-c-neutral-lighter))}.eui-19 .eui-badge{display:inline-flex;border:1px solid var(--_border-color);border-radius:var(--eui-br-max)}.eui-19 .eui-badge-wrapper{display:inline-flex;align-items:center;height:calc(var(--eui-s-m) + var(--eui-s-2xs));min-width:calc(var(--eui-s-m) + var(--eui-s-2xs));padding:0 var(--eui-s-2xs);justify-content:center;font:var(--eui-f-s-bold-compact);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-19 .eui-badge--empty{width:var(--eui-s-s);height:var(--eui-s-s)}.eui-19 .eui-badge--icon-only .eui-badge-wrapper{padding:0}.eui-19 .eui-badge--primary{--_bg-color: var(--eui-c-primary);--_color-on-bg: var(--eui-c-primary-contrast);--_color: var(--eui-c-primary);--_border-color: transparent}.eui-19 .eui-badge--secondary{--_bg-color: var(--eui-c-neutral-bg);--_color-on-bg: var(--eui-c-neutral-bg-contrast);--_color: var(--eui-c-neutral);--_border-color: var(--eui-c-neutral-light)}.eui-19 .eui-badge--info{--_bg-color: var(--eui-c-info);--_color-on-bg: var(--eui-c-info-contrast);--_color: var(--eui-c-info);--_border-color: transparent}.eui-19 .eui-badge--success{--_bg-color: var(--eui-c-success-dark);--_color-on-bg: var(--eui-c-success-dark-contrast);--_color: var(--eui-c-success-dark);--_border-color: transparent}.eui-19 .eui-badge--warning{--_bg-color: var(--eui-c-warning);--_color-on-bg: var(--eui-c-warning-contrast);--_color: var(--eui-c-warning-dark);--_border-color: transparent}.eui-19 .eui-badge--danger{--_bg-color: var(--eui-c-danger-dark);--_color-on-bg: var(--eui-c-danger-dark-contrast);--_color: var(--eui-c-danger-dark);--_border-color: transparent}.eui-19 .eui-badge--accent{--_bg-color: var(--eui-c-accent-dark);--_color-on-bg: var(--eui-c-accent-dark-contrast);--_color: var(--eui-c-accent-darker);--_border-color: transparent}.eui-19 .eui-badge{background-color:var(--_bg-color)}.eui-19 .eui-badge-wrapper{color:var(--_color-on-bg)}.eui-19 .eui-badge--outline{background-color:var(--eui-c-white);color:var(--_color);border-color:var(--_color)}.eui-19 .eui-badge--outline .eui-badge-wrapper{color:var(--_color)}.eui-19 .eui-badge--size-s .eui-badge-wrapper{height:var(--eui-s-m);min-width:var(--eui-s-m);font:var(--eui-f-xs-bold-compact)}.eui-19 .eui-badge--size-m .eui-badge-wrapper{height:calc(var(--eui-s-m) + var(--eui-s-2xs));min-width:calc(var(--eui-s-m) + var(--eui-s-2xs));font:var(--eui-f-s-bold-compact)}.eui-19 .eui-icon-svg .eui-badge,.eui-19 .eui-icon-svg .eui-badge--size-m{position:absolute;left:40%;top:-20%}.eui-19 .eui-icon-svg .eui-badge--empty{left:70%;top:-5%}.eui-19 .eui-icon-svg--size-l .eui-badge--size-s{left:70%}.eui-19 .eui-button .eui-badge{height:inherit}\n"] }]
|
|
74
74
|
}], ctorParameters: () => [{ type: i1.BaseStatesDirective }, { type: i0.ChangeDetectorRef }], propDecorators: { cssClasses: [{
|
|
75
75
|
type: HostBinding,
|
|
76
76
|
args: ['class']
|
|
@@ -66,11 +66,11 @@ class EuiBlockContentComponent {
|
|
|
66
66
|
return this.elRef.nativeElement.querySelector(':focus');
|
|
67
67
|
}
|
|
68
68
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EuiBlockContentComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
69
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.0-rc.1", type: EuiBlockContentComponent, isStandalone: false, selector: "eui-block-content", inputs: { role: "role", ariaLabel: "ariaLabel", isBlocked: ["isBlocked", "isBlocked", booleanAttribute] }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role", "attr.aria-label": "this.ariaLabel" } }, usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".eui-
|
|
69
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.0-rc.1", type: EuiBlockContentComponent, isStandalone: false, selector: "eui-block-content", inputs: { role: "role", ariaLabel: "ariaLabel", isBlocked: ["isBlocked", "isBlocked", booleanAttribute] }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role", "attr.aria-label": "this.ariaLabel" } }, usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".eui-19 .eui-block-content{display:block;position:relative}.eui-19 .eui-block-content--blocked{min-height:114px}.eui-19 .eui-block-content--blocked:before{border-top:var(--eui-s-2xs) solid currentcolor;border-right:var(--eui-s-2xs) solid currentcolor;border-bottom-style:solid;border-left-style:solid;border-radius:var(--eui-br-max);border-bottom-width:var(--eui-s-2xs);border-left-width:var(--eui-s-2xs);border-bottom-color:var(--eui-c-neutral-lightest);border-left-color:var(--eui-c-neutral-lightest);color:var(--eui-c-primary);-webkit-animation:spin .65s linear infinite;animation:spin .65s linear infinite;display:block;height:80px;left:50%;margin:-40px 0 0 -40px;top:50%;content:\"\";position:absolute;width:80px;z-index:var(--eui-zi-overlay)}.eui-19 .eui-block-content--blocked:after{background-color:#fff6;content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
70
70
|
}
|
|
71
71
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EuiBlockContentComponent, decorators: [{
|
|
72
72
|
type: Component,
|
|
73
|
-
args: [{ selector: 'eui-block-content', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<ng-content></ng-content>\n", styles: [".eui-
|
|
73
|
+
args: [{ selector: 'eui-block-content', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<ng-content></ng-content>\n", styles: [".eui-19 .eui-block-content{display:block;position:relative}.eui-19 .eui-block-content--blocked{min-height:114px}.eui-19 .eui-block-content--blocked:before{border-top:var(--eui-s-2xs) solid currentcolor;border-right:var(--eui-s-2xs) solid currentcolor;border-bottom-style:solid;border-left-style:solid;border-radius:var(--eui-br-max);border-bottom-width:var(--eui-s-2xs);border-left-width:var(--eui-s-2xs);border-bottom-color:var(--eui-c-neutral-lightest);border-left-color:var(--eui-c-neutral-lightest);color:var(--eui-c-primary);-webkit-animation:spin .65s linear infinite;animation:spin .65s linear infinite;display:block;height:80px;left:50%;margin:-40px 0 0 -40px;top:50%;content:\"\";position:absolute;width:80px;z-index:var(--eui-zi-overlay)}.eui-19 .eui-block-content--blocked:after{background-color:#fff6;content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}\n"] }]
|
|
74
74
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { cssClasses: [{
|
|
75
75
|
type: HostBinding,
|
|
76
76
|
args: ['class']
|
|
@@ -15,11 +15,11 @@ class EuiBlockDocumentComponent {
|
|
|
15
15
|
].join(' ').trim();
|
|
16
16
|
}
|
|
17
17
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EuiBlockDocumentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
18
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.0-rc.1", type: EuiBlockDocumentComponent, isStandalone: false, selector: "eui-block-document", inputs: { isBlocked: ["isBlocked", "isBlocked", booleanAttribute], ariaLabel: "ariaLabel" }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role", "attr.aria-label": "this.ariaLabel" } }, ngImport: i0, template: "<div class=\"eui-block-document__loader\"></div>\n", styles: [".eui-
|
|
18
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.0-rc.1", type: EuiBlockDocumentComponent, isStandalone: false, selector: "eui-block-document", inputs: { isBlocked: ["isBlocked", "isBlocked", booleanAttribute], ariaLabel: "ariaLabel" }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role", "attr.aria-label": "this.ariaLabel" } }, ngImport: i0, template: "<div class=\"eui-block-document__loader\"></div>\n", styles: [".eui-19 .eui-block-document__loader{display:none}.eui-19 .eui-block-document--blocked .eui-block-document__loader{display:block;inset:0;margin:auto;overflow:show;position:fixed;z-index:var(--eui-zi-block-document)}.eui-19 .eui-block-document--blocked .eui-block-document__loader:before{background-color:#0000001a;content:\"\";display:block;height:100%;left:0;position:fixed;top:0;width:100%}.eui-19 .eui-block-document--blocked .eui-block-document__loader:not(:required){background-color:transparent;border:var(--eui-bw-none);color:transparent;font:0/0 a;text-shadow:none}.eui-19 .eui-block-document--blocked .eui-block-document__loader:not(:required):after{border-top:var(--eui-s-xs) solid currentcolor;border-right:var(--eui-s-xs) solid currentcolor;border-bottom-style:solid;border-left-style:solid;border-radius:var(--eui-br-max);border-bottom-width:var(--eui-s-xs);border-left-width:var(--eui-s-xs);border-bottom-color:#0003;border-left-color:#0003;color:var(--eui-c-primary);-webkit-animation:spin .65s linear infinite;animation:spin .65s linear infinite;display:block;left:50%;margin:-40px 0 0 -40px;top:50%;content:\"\";position:absolute;height:120px;width:120px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
19
19
|
}
|
|
20
20
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EuiBlockDocumentComponent, decorators: [{
|
|
21
21
|
type: Component,
|
|
22
|
-
args: [{ selector: 'eui-block-document', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"eui-block-document__loader\"></div>\n", styles: [".eui-
|
|
22
|
+
args: [{ selector: 'eui-block-document', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"eui-block-document__loader\"></div>\n", styles: [".eui-19 .eui-block-document__loader{display:none}.eui-19 .eui-block-document--blocked .eui-block-document__loader{display:block;inset:0;margin:auto;overflow:show;position:fixed;z-index:var(--eui-zi-block-document)}.eui-19 .eui-block-document--blocked .eui-block-document__loader:before{background-color:#0000001a;content:\"\";display:block;height:100%;left:0;position:fixed;top:0;width:100%}.eui-19 .eui-block-document--blocked .eui-block-document__loader:not(:required){background-color:transparent;border:var(--eui-bw-none);color:transparent;font:0/0 a;text-shadow:none}.eui-19 .eui-block-document--blocked .eui-block-document__loader:not(:required):after{border-top:var(--eui-s-xs) solid currentcolor;border-right:var(--eui-s-xs) solid currentcolor;border-bottom-style:solid;border-left-style:solid;border-radius:var(--eui-br-max);border-bottom-width:var(--eui-s-xs);border-left-width:var(--eui-s-xs);border-bottom-color:#0003;border-left-color:#0003;color:var(--eui-c-primary);-webkit-animation:spin .65s linear infinite;animation:spin .65s linear infinite;display:block;left:50%;margin:-40px 0 0 -40px;top:50%;content:\"\";position:absolute;height:120px;width:120px}\n"] }]
|
|
23
23
|
}], propDecorators: { cssClasses: [{
|
|
24
24
|
type: HostBinding,
|
|
25
25
|
args: ['class']
|
|
@@ -256,11 +256,11 @@ class EuiBreadcrumbComponent {
|
|
|
256
256
|
}
|
|
257
257
|
}
|
|
258
258
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EuiBreadcrumbComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
259
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0-rc.1", type: EuiBreadcrumbComponent, isStandalone: false, selector: "eui-breadcrumb", host: { properties: { "class": "this.string" } }, queries: [{ propertyName: "breadcrumbItems", predicate: i0.forwardRef(() => EuiBreadcrumbItemComponent) }], viewQueries: [{ propertyName: "vcr", first: true, predicate: ["vcr"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div class=\"eui-breadcrumb__items\">\n <ng-container #vcr>\n <ng-content></ng-content>\n </ng-container>\n</div>\n", styles: [".eui-
|
|
259
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.0-rc.1", type: EuiBreadcrumbComponent, isStandalone: false, selector: "eui-breadcrumb", host: { properties: { "class": "this.string" } }, queries: [{ propertyName: "breadcrumbItems", predicate: i0.forwardRef(() => EuiBreadcrumbItemComponent) }], viewQueries: [{ propertyName: "vcr", first: true, predicate: ["vcr"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div class=\"eui-breadcrumb__items\">\n <ng-container #vcr>\n <ng-content></ng-content>\n </ng-container>\n</div>\n", styles: [".eui-19 .eui-breadcrumb{align-items:center;display:flex;width:100%;position:relative}.eui-19 .eui-breadcrumb__items{align-items:center;box-sizing:border-box;display:flex;flex-wrap:nowrap;list-style:none;margin:0;padding:var(--eui-s-xs) var(--eui-s-m)}.eui-19 .eui-breadcrumb+.eui-breadcrumb-item:before{color:var(--eui-c-neutral-lightest);height:1rem;width:1rem;content:\">\";display:inline-block;padding-left:var(--eui-s-xs);padding-right:var(--eui-s-xs)}.eui-19 .cdk-overlay-container .eui-breadcrumb-separator{margin:0 var(--eui-s-xs) 0 0}@media screen and (max-width: 767px){.eui-19 eui-breadcrumb,.eui-19 .eui-breadcrumb{display:none}}.eui-19 .eui-breadcrumb-item{align-items:center;display:flex;z-index:var(--eui-zi-breadcrumb)}.eui-19 .eui-breadcrumb-item__separator{align-items:center;display:flex;padding:0 var(--eui-s-2xs)}.eui-19 .eui-breadcrumb-item__label-wrapper{padding:0 var(--eui-s-2xs)}.eui-19 .eui-breadcrumb-item__label{font:var(--eui-f-s-bold)}\n"], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
|
|
260
260
|
}
|
|
261
261
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EuiBreadcrumbComponent, decorators: [{
|
|
262
262
|
type: Component,
|
|
263
|
-
args: [{ selector: 'eui-breadcrumb', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"eui-breadcrumb__items\">\n <ng-container #vcr>\n <ng-content></ng-content>\n </ng-container>\n</div>\n", styles: [".eui-
|
|
263
|
+
args: [{ selector: 'eui-breadcrumb', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"eui-breadcrumb__items\">\n <ng-container #vcr>\n <ng-content></ng-content>\n </ng-container>\n</div>\n", styles: [".eui-19 .eui-breadcrumb{align-items:center;display:flex;width:100%;position:relative}.eui-19 .eui-breadcrumb__items{align-items:center;box-sizing:border-box;display:flex;flex-wrap:nowrap;list-style:none;margin:0;padding:var(--eui-s-xs) var(--eui-s-m)}.eui-19 .eui-breadcrumb+.eui-breadcrumb-item:before{color:var(--eui-c-neutral-lightest);height:1rem;width:1rem;content:\">\";display:inline-block;padding-left:var(--eui-s-xs);padding-right:var(--eui-s-xs)}.eui-19 .cdk-overlay-container .eui-breadcrumb-separator{margin:0 var(--eui-s-xs) 0 0}@media screen and (max-width: 767px){.eui-19 eui-breadcrumb,.eui-19 .eui-breadcrumb{display:none}}.eui-19 .eui-breadcrumb-item{align-items:center;display:flex;z-index:var(--eui-zi-breadcrumb)}.eui-19 .eui-breadcrumb-item__separator{align-items:center;display:flex;padding:0 var(--eui-s-2xs)}.eui-19 .eui-breadcrumb-item__label-wrapper{padding:0 var(--eui-s-2xs)}.eui-19 .eui-breadcrumb-item__label{font:var(--eui-f-s-bold)}\n"] }]
|
|
264
264
|
}], ctorParameters: () => [{ type: i0.ViewContainerRef }], propDecorators: { string: [{
|
|
265
265
|
type: HostBinding,
|
|
266
266
|
args: ['class']
|
|
@@ -44,11 +44,11 @@ class EuiButtonGroupComponent {
|
|
|
44
44
|
}
|
|
45
45
|
}
|
|
46
46
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EuiButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
47
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.0-rc.1", type: EuiButtonGroupComponent, isStandalone: false, selector: "eui-button-group", inputs: { isCheckboxButtons: ["isCheckboxButtons", "isCheckboxButtons", booleanAttribute], isRadioButtons: ["isRadioButtons", "isRadioButtons", booleanAttribute] }, outputs: { buttonClick: "buttonClick" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "buttons", predicate: i0.forwardRef(() => EuiButtonComponent) }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".eui-
|
|
47
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.0-rc.1", type: EuiButtonGroupComponent, isStandalone: false, selector: "eui-button-group", inputs: { isCheckboxButtons: ["isCheckboxButtons", "isCheckboxButtons", booleanAttribute], isRadioButtons: ["isRadioButtons", "isRadioButtons", booleanAttribute] }, outputs: { buttonClick: "buttonClick" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "buttons", predicate: i0.forwardRef(() => EuiButtonComponent) }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".eui-19 .eui-button-group{position:relative;display:inline-flex;flex-wrap:wrap;vertical-align:middle;width:100%}.eui-19 .eui-button-group .eui-button:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-button-group .eui-button:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-button-group .eui-button [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-button-group>.eui-button:not(:first-child),.eui-19 .eui-button-group>.eui-button-group:not(:first-child){margin-left:-1px}.eui-19 .eui-button-group>.eui-button:not(:last-child),.eui-19 .eui-button-group>.eui-button-group:not(:last-child)>.eui-button{border-bottom-right-radius:0;border-top-right-radius:0}.eui-19 .eui-button-group>.eui-button:not(:first-child),.eui-19 .eui-button-group>.eui-button-group:not(:first-child)>.eui-button{border-bottom-left-radius:0;border-top-left-radius:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
48
48
|
}
|
|
49
49
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-rc.1", ngImport: i0, type: EuiButtonGroupComponent, decorators: [{
|
|
50
50
|
type: Component,
|
|
51
|
-
args: [{ selector: 'eui-button-group', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<ng-content></ng-content>\n", styles: [".eui-
|
|
51
|
+
args: [{ selector: 'eui-button-group', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, template: "<ng-content></ng-content>\n", styles: [".eui-19 .eui-button-group{position:relative;display:inline-flex;flex-wrap:wrap;vertical-align:middle;width:100%}.eui-19 .eui-button-group .eui-button:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-button-group .eui-button:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-button-group .eui-button [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-button-group>.eui-button:not(:first-child),.eui-19 .eui-button-group>.eui-button-group:not(:first-child){margin-left:-1px}.eui-19 .eui-button-group>.eui-button:not(:last-child),.eui-19 .eui-button-group>.eui-button-group:not(:last-child)>.eui-button{border-bottom-right-radius:0;border-top-right-radius:0}.eui-19 .eui-button-group>.eui-button:not(:first-child),.eui-19 .eui-button-group>.eui-button-group:not(:first-child)>.eui-button{border-bottom-left-radius:0;border-top-left-radius:0}\n"] }]
|
|
52
52
|
}], propDecorators: { cssClasses: [{
|
|
53
53
|
type: HostBinding,
|
|
54
54
|
args: ['class']
|