@eui/components 18.0.0-next.59 → 18.0.0-next.60
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs/components/EuiBadgeComponent.html +1 -1
- package/docs/components/EuiIconInputComponent.html +1 -1
- package/docs/components/EuiSearchComponent.html +105 -3
- package/docs/dependencies.html +1 -1
- package/docs/js/search/search_index.js +2 -2
- package/esm2022/eui-badge/eui-badge.component.mjs +3 -4
- package/esm2022/eui-icon/eui-icon-input/eui-icon-input.component.mjs +3 -3
- package/esm2022/layout/eui-search/search.component.mjs +24 -10
- package/eui-badge/eui-badge.component.d.ts +1 -1
- package/eui-badge/eui-badge.component.d.ts.map +1 -1
- package/eui-icon/eui-icon-input/eui-icon-input.component.d.ts +1 -1
- package/fesm2022/eui-components-eui-badge.mjs +2 -3
- package/fesm2022/eui-components-eui-badge.mjs.map +2 -2
- package/fesm2022/eui-components-eui-icon.mjs +2 -2
- package/fesm2022/eui-components-eui-icon.mjs.map +2 -2
- package/fesm2022/eui-components-layout.mjs +23 -9
- package/fesm2022/eui-components-layout.mjs.map +2 -2
- package/layout/eui-search/search.component.d.ts +7 -4
- package/layout/eui-search/search.component.d.ts.map +1 -1
- package/package.json +9 -9
|
@@ -2063,18 +2063,19 @@ import * as i39 from "@eui/components/eui-button";
|
|
|
2063
2063
|
import * as i46 from "@eui/components/eui-autocomplete";
|
|
2064
2064
|
import * as i55 from "@eui/components/directives";
|
|
2065
2065
|
import * as i6 from "@eui/components/eui-input-text";
|
|
2066
|
-
import * as i7 from "@
|
|
2067
|
-
import * as i8 from "@angular/forms";
|
|
2066
|
+
import * as i7 from "@angular/forms";
|
|
2068
2067
|
var EuiSearchComponent = class _EuiSearchComponent {
|
|
2069
2068
|
constructor() {
|
|
2070
2069
|
this.isInputFocus = false;
|
|
2071
2070
|
this.panelWidth = "25vw";
|
|
2072
2071
|
this.searchResults = [];
|
|
2073
|
-
this.isAutocomplete =
|
|
2072
|
+
this.isAutocomplete = false;
|
|
2074
2073
|
this.isInputText = false;
|
|
2075
2074
|
this.hasSearchButton = false;
|
|
2076
2075
|
this.hasExpandAnimation = true;
|
|
2077
2076
|
this.search = new EventEmitter6();
|
|
2077
|
+
this.selectionChange = new EventEmitter6();
|
|
2078
|
+
this.searchClick = new EventEmitter6();
|
|
2078
2079
|
this.inputFocus = new EventEmitter6();
|
|
2079
2080
|
this.inputBlur = new EventEmitter6();
|
|
2080
2081
|
}
|
|
@@ -2085,13 +2086,16 @@ var EuiSearchComponent = class _EuiSearchComponent {
|
|
|
2085
2086
|
!this.hasExpandAnimation ? "eui-search--no-animation" : ""
|
|
2086
2087
|
].join(" ").trim();
|
|
2087
2088
|
}
|
|
2088
|
-
|
|
2089
|
+
ngAfterContentInit() {
|
|
2089
2090
|
if (this.isAutocomplete) {
|
|
2090
2091
|
this.isInputText = false;
|
|
2091
2092
|
}
|
|
2092
2093
|
if (this.isInputText) {
|
|
2093
2094
|
this.isAutocomplete = false;
|
|
2094
2095
|
}
|
|
2096
|
+
if (!this.isInputText && !this.isAutocomplete) {
|
|
2097
|
+
this.isAutocomplete = true;
|
|
2098
|
+
}
|
|
2095
2099
|
}
|
|
2096
2100
|
ngAfterViewInit() {
|
|
2097
2101
|
this.templates.forEach((item) => {
|
|
@@ -2100,13 +2104,18 @@ var EuiSearchComponent = class _EuiSearchComponent {
|
|
|
2100
2104
|
}
|
|
2101
2105
|
});
|
|
2102
2106
|
}
|
|
2107
|
+
onSelectionChange(items) {
|
|
2108
|
+
this.selectionChange.emit(items);
|
|
2109
|
+
}
|
|
2103
2110
|
onInputFocus(event2) {
|
|
2104
2111
|
this.inputFocus.emit(event2);
|
|
2105
2112
|
this.isInputFocus = true;
|
|
2106
2113
|
}
|
|
2107
2114
|
onInputBlur(event2) {
|
|
2108
|
-
this.
|
|
2109
|
-
|
|
2115
|
+
if (!this.hasSearchButton) {
|
|
2116
|
+
this.inputBlur.emit(event2);
|
|
2117
|
+
this.isInputFocus = false;
|
|
2118
|
+
}
|
|
2110
2119
|
}
|
|
2111
2120
|
onSearch(e) {
|
|
2112
2121
|
this.searchTerm = e;
|
|
@@ -2119,20 +2128,21 @@ var EuiSearchComponent = class _EuiSearchComponent {
|
|
|
2119
2128
|
}
|
|
2120
2129
|
}
|
|
2121
2130
|
onSearchClick() {
|
|
2131
|
+
this.isInputFocus = false;
|
|
2122
2132
|
if (this.searchInput) {
|
|
2123
|
-
this.
|
|
2133
|
+
this.searchClick.emit(this.searchInput);
|
|
2124
2134
|
}
|
|
2125
2135
|
}
|
|
2126
2136
|
static {
|
|
2127
2137
|
this.ɵfac = i034.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i034, type: _EuiSearchComponent, deps: [], target: i034.ɵɵFactoryTarget.Component });
|
|
2128
2138
|
}
|
|
2129
2139
|
static {
|
|
2130
|
-
this.ɵcmp = i034.ɵɵngDeclareComponent({ minVersion: "
|
|
2140
|
+
this.ɵcmp = i034.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-rc.0", type: _EuiSearchComponent, selector: "eui-search", inputs: { placeholderLabel: "placeholderLabel", panelWidth: "panelWidth", searchResults: "searchResults", isAutocomplete: ["isAutocomplete", "isAutocomplete", booleanAttribute10], isInputText: ["isInputText", "isInputText", booleanAttribute10], hasSearchButton: ["hasSearchButton", "hasSearchButton", booleanAttribute10], hasExpandAnimation: ["hasExpandAnimation", "hasExpandAnimation", booleanAttribute10] }, outputs: { search: "search", selectionChange: "selectionChange", searchClick: "searchClick", inputFocus: "inputFocus", inputBlur: "inputBlur" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "templates", predicate: EuiTemplateDirective }], ngImport: i034, template: '<eui-icon-input euiIconPositionEnd>\n @if (isAutocomplete) {\n <eui-autocomplete [autocompleteData]="searchResults"\n placeholder="{{placeholderLabel}}"\n panelWidth="{{panelWidth}}"\n (inputBlur)="onInputBlur($event)"\n (inputFocus)="onInputFocus($event)"\n (selectionChange)="onSelectionChange($event)"\n (inputChange)="onSearch($event)">\n <ng-container *ngIf="templates.length !== 0">\n <ng-template let-option euiTemplate="dropdownOption">\n <ng-container\n [ngTemplateOutlet]="resultItemTemplate"\n [ngTemplateOutletContext]="{ $implicit: option }">\n </ng-container>\n </ng-template>\n </ng-container>\n </eui-autocomplete>\n } @else {\n @if (isInputText) {\n <input euiInputText class="mywp-search-bar__input" [(ngModel)]="searchInput"\n placeholder="{{ placeholderLabel }}"\n (focus)="onInputFocus($event)" (blur)="onInputBlur($event)" (keydown)="onSearchInput($event)" />\n }\n }\n\n @if (hasSearchButton) {\n <button class="eui-search__input-button"\n euiButton\n euiRounded euiIconButton\n [euiSecondary]="isInputFocus"\n [euiPrimaryDark]="!isInputFocus"\n (click)="onSearchClick()"\n aria-label="search button">\n <eui-icon-svg icon="eui-search"></eui-icon-svg>\n </button>\n } @else {\n <div class="eui-search__icon">\n <eui-icon-svg icon="eui-search"></eui-icon-svg>\n </div>\n }\n</eui-icon-input>\n', styles: [".eui-search{display:flex;top:0}.eui-search .eui-button .eui-button__container{justify-content:center}.eui-search .eui-input-text{background-color:var(--eui-c-branding-dark);border-color:var(--eui-c-branding-light);border-radius:var(--eui-br-max)!important;text-overflow:ellipsis;transition:width .25s ease-in-out;color:var(--eui-c-branding-dark-contrast);width:200px}.eui-search .eui-input-text--clearable-icon{display:none}.eui-search--focus .eui-input-text{background-color:var(--eui-c-white);border-color:var(--eui-c-neutral-light);color:var(--eui-c-black);width:300px}.eui-search--focus .eui-search__input-button{color:var(--eui-c-black)!important}.eui-search--focus .eui-search__input-button .eui-icon-svg svg{color:var(--eui-c-black)!important;fill:var(--eui-c-black)!important}.eui-search--focus .eui-search__icon{display:none}.eui-search__input-button{position:absolute;right:4px;top:4px;color:var(--eui-c-neutral-lightest)!important}.eui-search__input-button .eui-icon-svg{z-index:1}.eui-search__input-button:focus .eui-icon-svg svg{color:var(--eui-c-white)!important;fill:var(--eui-c-white)!important}.eui-search__icon{position:absolute;right:8px;top:10px}.eui-search__icon svg{color:var(--eui-c-neutral-lightest)!important;fill:var(--eui-c-neutral-lightest)!important}.eui-search--no-animation .eui-input-text{transition:none}.eui-search--focus.eui-search--no-animation .eui-input-text{width:200px}@media screen and (max-width: 767px){.eui-search{display:none}}\n"], dependencies: [{ kind: "directive", type: i117.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i117.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i211.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i211.EuiIconInputComponent, selector: "eui-icon-input", inputs: ["euiIconPositionStart", "euiIconPositionEnd"] }, { kind: "component", type: i39.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i46.EuiAutocompleteComponent, selector: "eui-autocomplete, input[euiAutocomplete]", inputs: ["autocompleteData", "visibleOptions", "matching", "placeholder", "autocompleteDataSelected", "chipsSortOrder", "itemsSortOrder", "chipsPosition", "groupBy", "toggleLinkMoreLabel", "toggleLinkLessLabel", "classList", "panelWidth", "dragAndDropSourceName", "dragAndDropConnectedTo", "isFreeValueAllowed", "isReadonly", "isLoading", "hasChips", "isAsync", "isChipsSorted", "isItemsSorted", "isChipsRemovable", "isDuplicateValueAllowed", "isAddOnBlur", "isForceSelection", "maxVisibleChipsCount", "chipsLabelTruncateCount", "isMaxVisibleChipsOpened", "isChipsDragAndDrop"], outputs: ["panelClose", "panelOpen", "inputFocus", "inputBlur", "clear", "selectionChange", "itemAdd", "itemRemove", "inputChange", "chipDragStart", "chipDragRelease", "chipDrop"] }, { kind: "directive", type: i55.EuiTemplateDirective, selector: "[euiTemplate]", inputs: ["type", "euiTemplate"] }, { kind: "component", type: i6.EuiInputTextComponent, selector: "input[euiInputText]", inputs: ["isInvalid"] }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i034.ChangeDetectionStrategy.Default, encapsulation: i034.ViewEncapsulation.None });
|
|
2131
2141
|
}
|
|
2132
2142
|
};
|
|
2133
2143
|
i034.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i034, type: EuiSearchComponent, decorators: [{
|
|
2134
2144
|
type: Component26,
|
|
2135
|
-
args: [{ selector: "eui-search", changeDetection: ChangeDetectionStrategy21.Default, encapsulation: ViewEncapsulation41.None, template: '<
|
|
2145
|
+
args: [{ selector: "eui-search", changeDetection: ChangeDetectionStrategy21.Default, encapsulation: ViewEncapsulation41.None, template: '<eui-icon-input euiIconPositionEnd>\n @if (isAutocomplete) {\n <eui-autocomplete [autocompleteData]="searchResults"\n placeholder="{{placeholderLabel}}"\n panelWidth="{{panelWidth}}"\n (inputBlur)="onInputBlur($event)"\n (inputFocus)="onInputFocus($event)"\n (selectionChange)="onSelectionChange($event)"\n (inputChange)="onSearch($event)">\n <ng-container *ngIf="templates.length !== 0">\n <ng-template let-option euiTemplate="dropdownOption">\n <ng-container\n [ngTemplateOutlet]="resultItemTemplate"\n [ngTemplateOutletContext]="{ $implicit: option }">\n </ng-container>\n </ng-template>\n </ng-container>\n </eui-autocomplete>\n } @else {\n @if (isInputText) {\n <input euiInputText class="mywp-search-bar__input" [(ngModel)]="searchInput"\n placeholder="{{ placeholderLabel }}"\n (focus)="onInputFocus($event)" (blur)="onInputBlur($event)" (keydown)="onSearchInput($event)" />\n }\n }\n\n @if (hasSearchButton) {\n <button class="eui-search__input-button"\n euiButton\n euiRounded euiIconButton\n [euiSecondary]="isInputFocus"\n [euiPrimaryDark]="!isInputFocus"\n (click)="onSearchClick()"\n aria-label="search button">\n <eui-icon-svg icon="eui-search"></eui-icon-svg>\n </button>\n } @else {\n <div class="eui-search__icon">\n <eui-icon-svg icon="eui-search"></eui-icon-svg>\n </div>\n }\n</eui-icon-input>\n', styles: [".eui-search{display:flex;top:0}.eui-search .eui-button .eui-button__container{justify-content:center}.eui-search .eui-input-text{background-color:var(--eui-c-branding-dark);border-color:var(--eui-c-branding-light);border-radius:var(--eui-br-max)!important;text-overflow:ellipsis;transition:width .25s ease-in-out;color:var(--eui-c-branding-dark-contrast);width:200px}.eui-search .eui-input-text--clearable-icon{display:none}.eui-search--focus .eui-input-text{background-color:var(--eui-c-white);border-color:var(--eui-c-neutral-light);color:var(--eui-c-black);width:300px}.eui-search--focus .eui-search__input-button{color:var(--eui-c-black)!important}.eui-search--focus .eui-search__input-button .eui-icon-svg svg{color:var(--eui-c-black)!important;fill:var(--eui-c-black)!important}.eui-search--focus .eui-search__icon{display:none}.eui-search__input-button{position:absolute;right:4px;top:4px;color:var(--eui-c-neutral-lightest)!important}.eui-search__input-button .eui-icon-svg{z-index:1}.eui-search__input-button:focus .eui-icon-svg svg{color:var(--eui-c-white)!important;fill:var(--eui-c-white)!important}.eui-search__icon{position:absolute;right:8px;top:10px}.eui-search__icon svg{color:var(--eui-c-neutral-lightest)!important;fill:var(--eui-c-neutral-lightest)!important}.eui-search--no-animation .eui-input-text{transition:none}.eui-search--focus.eui-search--no-animation .eui-input-text{width:200px}@media screen and (max-width: 767px){.eui-search{display:none}}\n"] }]
|
|
2136
2146
|
}], propDecorators: { cssClasses: [{
|
|
2137
2147
|
type: HostBinding26,
|
|
2138
2148
|
args: ["class"]
|
|
@@ -2156,6 +2166,10 @@ i034.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0",
|
|
|
2156
2166
|
args: [{ transform: booleanAttribute10 }]
|
|
2157
2167
|
}], search: [{
|
|
2158
2168
|
type: Output6
|
|
2169
|
+
}], selectionChange: [{
|
|
2170
|
+
type: Output6
|
|
2171
|
+
}], searchClick: [{
|
|
2172
|
+
type: Output6
|
|
2159
2173
|
}], inputFocus: [{
|
|
2160
2174
|
type: Output6
|
|
2161
2175
|
}], inputBlur: [{
|