@eui/components 19.2.4-snapshot-1747932948213 → 19.2.4-snapshot-1748006543523
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.
|
@@ -1346,7 +1346,7 @@ class EuiToolbarSearchComponent {
|
|
|
1346
1346
|
}
|
|
1347
1347
|
}
|
|
1348
1348
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: EuiToolbarSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1349
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: EuiToolbarSearchComponent, isStandalone: true, selector: "eui-toolbar-search", inputs: { placeholderLabel: "placeholderLabel", panelWidth: "panelWidth", searchResults: "searchResults", isAutocomplete: ["isAutocomplete", "isAutocomplete", booleanAttribute], isInputText: ["isInputText", "isInputText", booleanAttribute], hasSearchButton: ["hasSearchButton", "hasSearchButton", booleanAttribute], hasExpandAnimation: ["hasExpandAnimation", "hasExpandAnimation", booleanAttribute] }, outputs: { search: "search", selectionChange: "selectionChange", searchClick: "searchClick", inputFocus: "inputFocus", inputBlur: "inputBlur" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "templates", predicate: EuiTemplateDirective }], ngImport: i0, template: "@if ((asService.breakpoints$ | async).isLtLargeTablet) {\n <eui-icon-button icon=\"search:outline-ecl-search\" (buttonClick)=\"onSearchClick(true)\"/>\n\n} @else {\n <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 @if (templates.length !== 0) {\n <ng-template let-option euiTemplate=\"dropdownOption\">\n <ng-container\n [ngTemplateOutlet]=\"resultItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: option }\" />\n </ng-template>\n }\n </eui-autocomplete>\n } @else {\n @if (isInputText) {\n <input euiInputText class=\"eui-toolbar-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-toolbar-search__input-button\"\n euiButton\n euiIconButton\n euiSizeS\n [euiSecondary]=\"isInputFocus\"\n [euiPrimary]=\"!isInputFocus\"\n (click)=\"onSearchClick(false)\"\n aria-label=\"search button\">\n <eui-icon-svg icon=\"search:outline\" size=\"s\"></eui-icon-svg>\n </button>\n } @else {\n <eui-icon-svg icon=\"search:outline\" size=\"s\" />\n }\n </eui-icon-input>\n\n}\n\n", styles: [".eui-19 :host.eui-toolbar-search{display:flex;top:0}.eui-19 :host.eui-toolbar-search .eui-button .eui-button__container{justify-content:center}.eui-19 :host.eui-toolbar-search ::ng-deep .eui-input-text{background-color:var(--eui-c-branding-dark);border-color:var(--eui-c-branding-light);text-overflow:ellipsis;transition:width .25s ease-in-out;color:var(--eui-c-branding-dark-contrast);width:200px}.eui-19 :host.eui-toolbar-search ::ng-deep .eui-input-text--clearable-icon{display:none}.eui-19 :host.eui-toolbar-search--focus .eui-input-text{background-color:var(--eui-c-white);border-color:var(--eui-c-
|
|
1349
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: EuiToolbarSearchComponent, isStandalone: true, selector: "eui-toolbar-search", inputs: { placeholderLabel: "placeholderLabel", panelWidth: "panelWidth", searchResults: "searchResults", isAutocomplete: ["isAutocomplete", "isAutocomplete", booleanAttribute], isInputText: ["isInputText", "isInputText", booleanAttribute], hasSearchButton: ["hasSearchButton", "hasSearchButton", booleanAttribute], hasExpandAnimation: ["hasExpandAnimation", "hasExpandAnimation", booleanAttribute] }, outputs: { search: "search", selectionChange: "selectionChange", searchClick: "searchClick", inputFocus: "inputFocus", inputBlur: "inputBlur" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "templates", predicate: EuiTemplateDirective }], ngImport: i0, template: "@if ((asService.breakpoints$ | async).isLtLargeTablet) {\n <eui-icon-button icon=\"search:outline-ecl-search\" (buttonClick)=\"onSearchClick(true)\"/>\n\n} @else {\n <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 @if (templates.length !== 0) {\n <ng-template let-option euiTemplate=\"dropdownOption\">\n <ng-container\n [ngTemplateOutlet]=\"resultItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: option }\" />\n </ng-template>\n }\n </eui-autocomplete>\n } @else {\n @if (isInputText) {\n <input euiInputText class=\"eui-toolbar-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-toolbar-search__input-button\"\n euiButton\n euiIconButton\n euiSizeS\n [euiSecondary]=\"isInputFocus\"\n [euiPrimary]=\"!isInputFocus\"\n (click)=\"onSearchClick(false)\"\n aria-label=\"search button\">\n <eui-icon-svg icon=\"search:outline\" size=\"s\"></eui-icon-svg>\n </button>\n } @else {\n <eui-icon-svg icon=\"search:outline\" size=\"s\" />\n }\n </eui-icon-input>\n\n}\n\n", styles: [".eui-19 :host.eui-toolbar-search{display:flex;top:0}.eui-19 :host.eui-toolbar-search .eui-button .eui-button__container{justify-content:center}.eui-19 :host.eui-toolbar-search ::ng-deep .eui-input-text{background-color:var(--eui-c-branding-dark);border-color:var(--eui-c-branding-light);text-overflow:ellipsis;transition:width .25s ease-in-out;color:var(--eui-c-branding-dark-contrast);width:200px}.eui-19 :host.eui-toolbar-search ::ng-deep .eui-input-text--clearable-icon{display:none}.eui-19 :host.eui-toolbar-search--focus ::ng-deep .eui-input-text{background-color:var(--eui-c-white);color:var(--eui-c-black);width:300px}.eui-19 :host.eui-toolbar-search--focus ::ng-deep .eui-button{border-color:var(--eui-c-s-primary-surface)}.eui-19 :host.eui-toolbar-search--focus ::ng-deep .eui-button:hover svg{color:var(--eui-c-white);fill:var(--eui-c-white)}.eui-19 :host.eui-toolbar-search--focus ::ng-deep .eui-button svg{color:var(--eui-c-neutral-lightest);fill:var(--eui-c-neutral-lightest)}.eui-19 :host.eui-toolbar-search--focus .eui-search__icon{display:none}.eui-19 :host.eui-toolbar-search ::ng-deep .eui-button{position:absolute;right:var(--eui-s-3xs);top:var(--eui-s-3xs);color:var(--eui-c-neutral-lightest);background-color:var(--eui-c-primary-darker);margin-top:-2px;margin-right:-2px}.eui-19 :host.eui-toolbar-search ::ng-deep .eui-button .eui-icon-svg{z-index:1}.eui-19 :host.eui-toolbar--no-animation ::ng-deep .eui-input-text{transition:none}.eui-19 :host.eui-toolbar-search--focus.eui-toolbar-search--no-animation ::ng-deep .eui-input-text{width:200px}.eui-19 .eui--secondary :host.eui-toolbar-search ::ng-deep .eui-input-text{background-color:var(--eui-c-white);border-color:var(--eui-c-neutral-lighter);color:var(--eui-c-neugral-bg-light-contrast)}.eui-19 .eui--secondary :host.eui-toolbar-search ::ng-deep .eui-button{background-color:var(--eui-c-neutral-bg);color:var(--eui-c-neutral-bg-contrast);border-color:var(--eui-c-neutral-lighter)}.eui-19 .eui--secondary :host.eui-toolbar-search ::ng-deep .eui-button:hover,.eui-19 .eui--secondary :host.eui-toolbar-search ::ng-deep .eui-button:focus{background-color:var(--eui-c-neutral-lightest);color:var(--eui-c-neutral-lightest-contrast)}.eui-19 .eui--secondary :host.eui-toolbar-search ::ng-deep .eui-button .eui-icon-svg svg{fill:var(--eui-c-neutral);color:var(--eui-c-neutral)}\n"], dependencies: [{ kind: "component", type: i2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i2$1.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: i3.EuiIconButtonComponent, selector: "eui-icon-button", inputs: ["icon", "iconUrl", "fillColor", "size", "ariaLabel", "tabindex", "hasNoPadding", "hasFocusHoverColor", "hasFocusHoverBg", "euiRounded", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i4.EuiAutocompleteComponent, selector: "eui-autocomplete, input[euiAutocomplete]", inputs: ["inputId", "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: "component", type: i5.EuiIconInputComponent, selector: "eui-icon-input", inputs: ["euiIconPositionStart", "euiIconPositionEnd"] }, { kind: "component", type: i6.EuiInputTextComponent, selector: "input[euiInputText]", inputs: ["isInvalid"] }, { kind: "directive", type: EuiTemplateDirective, selector: "[euiTemplate]", inputs: ["type", "euiTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { 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"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1350
1350
|
}
|
|
1351
1351
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: EuiToolbarSearchComponent, decorators: [{
|
|
1352
1352
|
type: Component,
|
|
@@ -1361,7 +1361,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImpo
|
|
|
1361
1361
|
NgTemplateOutlet,
|
|
1362
1362
|
FormsModule,
|
|
1363
1363
|
AsyncPipe,
|
|
1364
|
-
], template: "@if ((asService.breakpoints$ | async).isLtLargeTablet) {\n <eui-icon-button icon=\"search:outline-ecl-search\" (buttonClick)=\"onSearchClick(true)\"/>\n\n} @else {\n <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 @if (templates.length !== 0) {\n <ng-template let-option euiTemplate=\"dropdownOption\">\n <ng-container\n [ngTemplateOutlet]=\"resultItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: option }\" />\n </ng-template>\n }\n </eui-autocomplete>\n } @else {\n @if (isInputText) {\n <input euiInputText class=\"eui-toolbar-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-toolbar-search__input-button\"\n euiButton\n euiIconButton\n euiSizeS\n [euiSecondary]=\"isInputFocus\"\n [euiPrimary]=\"!isInputFocus\"\n (click)=\"onSearchClick(false)\"\n aria-label=\"search button\">\n <eui-icon-svg icon=\"search:outline\" size=\"s\"></eui-icon-svg>\n </button>\n } @else {\n <eui-icon-svg icon=\"search:outline\" size=\"s\" />\n }\n </eui-icon-input>\n\n}\n\n", styles: [".eui-19 :host.eui-toolbar-search{display:flex;top:0}.eui-19 :host.eui-toolbar-search .eui-button .eui-button__container{justify-content:center}.eui-19 :host.eui-toolbar-search ::ng-deep .eui-input-text{background-color:var(--eui-c-branding-dark);border-color:var(--eui-c-branding-light);text-overflow:ellipsis;transition:width .25s ease-in-out;color:var(--eui-c-branding-dark-contrast);width:200px}.eui-19 :host.eui-toolbar-search ::ng-deep .eui-input-text--clearable-icon{display:none}.eui-19 :host.eui-toolbar-search--focus .eui-input-text{background-color:var(--eui-c-white);border-color:var(--eui-c-
|
|
1364
|
+
], template: "@if ((asService.breakpoints$ | async).isLtLargeTablet) {\n <eui-icon-button icon=\"search:outline-ecl-search\" (buttonClick)=\"onSearchClick(true)\"/>\n\n} @else {\n <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 @if (templates.length !== 0) {\n <ng-template let-option euiTemplate=\"dropdownOption\">\n <ng-container\n [ngTemplateOutlet]=\"resultItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: option }\" />\n </ng-template>\n }\n </eui-autocomplete>\n } @else {\n @if (isInputText) {\n <input euiInputText class=\"eui-toolbar-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-toolbar-search__input-button\"\n euiButton\n euiIconButton\n euiSizeS\n [euiSecondary]=\"isInputFocus\"\n [euiPrimary]=\"!isInputFocus\"\n (click)=\"onSearchClick(false)\"\n aria-label=\"search button\">\n <eui-icon-svg icon=\"search:outline\" size=\"s\"></eui-icon-svg>\n </button>\n } @else {\n <eui-icon-svg icon=\"search:outline\" size=\"s\" />\n }\n </eui-icon-input>\n\n}\n\n", styles: [".eui-19 :host.eui-toolbar-search{display:flex;top:0}.eui-19 :host.eui-toolbar-search .eui-button .eui-button__container{justify-content:center}.eui-19 :host.eui-toolbar-search ::ng-deep .eui-input-text{background-color:var(--eui-c-branding-dark);border-color:var(--eui-c-branding-light);text-overflow:ellipsis;transition:width .25s ease-in-out;color:var(--eui-c-branding-dark-contrast);width:200px}.eui-19 :host.eui-toolbar-search ::ng-deep .eui-input-text--clearable-icon{display:none}.eui-19 :host.eui-toolbar-search--focus ::ng-deep .eui-input-text{background-color:var(--eui-c-white);color:var(--eui-c-black);width:300px}.eui-19 :host.eui-toolbar-search--focus ::ng-deep .eui-button{border-color:var(--eui-c-s-primary-surface)}.eui-19 :host.eui-toolbar-search--focus ::ng-deep .eui-button:hover svg{color:var(--eui-c-white);fill:var(--eui-c-white)}.eui-19 :host.eui-toolbar-search--focus ::ng-deep .eui-button svg{color:var(--eui-c-neutral-lightest);fill:var(--eui-c-neutral-lightest)}.eui-19 :host.eui-toolbar-search--focus .eui-search__icon{display:none}.eui-19 :host.eui-toolbar-search ::ng-deep .eui-button{position:absolute;right:var(--eui-s-3xs);top:var(--eui-s-3xs);color:var(--eui-c-neutral-lightest);background-color:var(--eui-c-primary-darker);margin-top:-2px;margin-right:-2px}.eui-19 :host.eui-toolbar-search ::ng-deep .eui-button .eui-icon-svg{z-index:1}.eui-19 :host.eui-toolbar--no-animation ::ng-deep .eui-input-text{transition:none}.eui-19 :host.eui-toolbar-search--focus.eui-toolbar-search--no-animation ::ng-deep .eui-input-text{width:200px}.eui-19 .eui--secondary :host.eui-toolbar-search ::ng-deep .eui-input-text{background-color:var(--eui-c-white);border-color:var(--eui-c-neutral-lighter);color:var(--eui-c-neugral-bg-light-contrast)}.eui-19 .eui--secondary :host.eui-toolbar-search ::ng-deep .eui-button{background-color:var(--eui-c-neutral-bg);color:var(--eui-c-neutral-bg-contrast);border-color:var(--eui-c-neutral-lighter)}.eui-19 .eui--secondary :host.eui-toolbar-search ::ng-deep .eui-button:hover,.eui-19 .eui--secondary :host.eui-toolbar-search ::ng-deep .eui-button:focus{background-color:var(--eui-c-neutral-lightest);color:var(--eui-c-neutral-lightest-contrast)}.eui-19 .eui--secondary :host.eui-toolbar-search ::ng-deep .eui-button .eui-icon-svg svg{fill:var(--eui-c-neutral);color:var(--eui-c-neutral)}\n"] }]
|
|
1365
1365
|
}], propDecorators: { cssClasses: [{
|
|
1366
1366
|
type: HostBinding,
|
|
1367
1367
|
args: ['class']
|