@eui/components 17.0.0-rc.3 → 17.0.0-rc.4
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/EuiSearchComponent.html +101 -3
- package/docs/components/EuiSkeletonComponent.html +1 -1
- package/docs/dependencies.html +2 -2
- package/docs/js/menu-wc.js +6 -6
- package/docs/js/menu-wc_es5.js +1 -1
- package/docs/js/search/search_index.js +2 -2
- package/esm2022/eui-alert/eui-alert.component.mjs +4 -3
- package/esm2022/eui-skeleton/eui-skeleton.component.mjs +4 -3
- package/esm2022/layout/eui-search/search.component.mjs +13 -5
- package/eui-alert/eui-alert.component.d.ts.map +1 -1
- package/eui-skeleton/eui-skeleton.component.d.ts +1 -1
- package/eui-skeleton/eui-skeleton.component.d.ts.map +1 -1
- package/fesm2022/eui-components-eui-alert.mjs +3 -2
- package/fesm2022/eui-components-eui-alert.mjs.map +1 -1
- package/fesm2022/eui-components-eui-skeleton.mjs +3 -2
- package/fesm2022/eui-components-eui-skeleton.mjs.map +1 -1
- package/fesm2022/eui-components-layout.mjs +12 -4
- package/fesm2022/eui-components-layout.mjs.map +1 -1
- package/layout/eui-search/search.component.d.ts +5 -3
- package/layout/eui-search/search.component.d.ts.map +1 -1
- package/package.json +12 -12
|
@@ -29,7 +29,7 @@ class EuiSkeletonComponent {
|
|
|
29
29
|
.trim();
|
|
30
30
|
}
|
|
31
31
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: EuiSkeletonComponent, deps: [{ token: i1.BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
32
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: EuiSkeletonComponent, selector: "eui-skeleton", inputs: { circle: "circle", line: "line", square: "square", rectangle: "rectangle" }, host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiSizeXS", "euiSizeXS", "euiSizeS", "euiSizeS", "euiSizeM", "euiSizeM", "euiSizeL", "euiSizeL", "euiSizeXL", "euiSizeXL", "euiSizeVariant", "euiSizeVariant"] }], ngImport: i0, template: '', isInline: true, styles: [".eui-skeleton{display:inline-flex;animation:
|
|
32
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: EuiSkeletonComponent, selector: "eui-skeleton", inputs: { circle: "circle", line: "line", square: "square", rectangle: "rectangle" }, host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiSizeXS", "euiSizeXS", "euiSizeS", "euiSizeS", "euiSizeM", "euiSizeM", "euiSizeL", "euiSizeL", "euiSizeXL", "euiSizeXL", "euiRounded", "euiRounded", "euiSizeVariant", "euiSizeVariant"] }], ngImport: i0, template: '', isInline: true, styles: [".eui-skeleton{display:inline-flex;position:relative;background-color:var(--eui-base-color-grey-15)}.eui-skeleton:after{content:\"\";animation:skeleton-animation 1.2s infinite;height:100%;left:0;position:absolute;right:0;top:0;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.4),rgba(255,255,255,0))}.eui-skeleton--circle{border-radius:50%;height:3rem;width:3rem}.eui-skeleton--line{display:block;height:var(--eui-base-spacing-m);width:100%}.eui-skeleton--square{height:3rem;width:3rem}.eui-skeleton--rectangle{height:var(--eui-base-spacing-xl);width:100%}.eui-skeleton--rounded{border-radius:var(--eui-base-spacing-m)}@keyframes skeleton-animation{0%{transform:translate(-100%)}to{transform:translate(100%)}}.eui-skeleton--size-xs.eui-skeleton--line,.eui-skeleton--size-xs.eui-skeleton--rectangle{width:5rem}.eui-skeleton--size-xs.eui-skeleton--circle,.eui-skeleton--size-xs.eui-skeleton--square{width:1.5rem;height:1.5rem}.eui-skeleton--size-s.eui-skeleton--line,.eui-skeleton--size-s.eui-skeleton--rectangle{width:10%}.eui-skeleton--size-s.eui-skeleton--circle,.eui-skeleton--size-s.eui-skeleton--square{width:2rem;height:2rem}.eui-skeleton--size-m.eui-skeleton--line,.eui-skeleton--size-m.eui-skeleton--rectangle{width:25%}.eui-skeleton--size-m.eui-skeleton--circle,.eui-skeleton--size-m.eui-skeleton--square{width:3rem;height:3rem}.eui-skeleton--size-l.eui-skeleton--line,.eui-skeleton--size-l.eui-skeleton--rectangle{width:50%}.eui-skeleton--size-l.eui-skeleton--circle,.eui-skeleton--size-l.eui-skeleton--square{width:4rem;height:4rem}.eui-skeleton--size-xl.eui-skeleton--line,.eui-skeleton--size-xl.eui-skeleton--rectangle{width:75%}.eui-skeleton--size-xl.eui-skeleton--circle,.eui-skeleton--size-xl.eui-skeleton--square{width:5rem;height:5rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
33
33
|
}
|
|
34
34
|
__decorate([
|
|
35
35
|
coerceBoolean
|
|
@@ -54,10 +54,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
|
|
|
54
54
|
'euiSizeM',
|
|
55
55
|
'euiSizeL',
|
|
56
56
|
'euiSizeXL',
|
|
57
|
+
'euiRounded',
|
|
57
58
|
'euiSizeVariant',
|
|
58
59
|
],
|
|
59
60
|
},
|
|
60
|
-
], styles: [".eui-skeleton{display:inline-flex;animation:
|
|
61
|
+
], styles: [".eui-skeleton{display:inline-flex;position:relative;background-color:var(--eui-base-color-grey-15)}.eui-skeleton:after{content:\"\";animation:skeleton-animation 1.2s infinite;height:100%;left:0;position:absolute;right:0;top:0;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.4),rgba(255,255,255,0))}.eui-skeleton--circle{border-radius:50%;height:3rem;width:3rem}.eui-skeleton--line{display:block;height:var(--eui-base-spacing-m);width:100%}.eui-skeleton--square{height:3rem;width:3rem}.eui-skeleton--rectangle{height:var(--eui-base-spacing-xl);width:100%}.eui-skeleton--rounded{border-radius:var(--eui-base-spacing-m)}@keyframes skeleton-animation{0%{transform:translate(-100%)}to{transform:translate(100%)}}.eui-skeleton--size-xs.eui-skeleton--line,.eui-skeleton--size-xs.eui-skeleton--rectangle{width:5rem}.eui-skeleton--size-xs.eui-skeleton--circle,.eui-skeleton--size-xs.eui-skeleton--square{width:1.5rem;height:1.5rem}.eui-skeleton--size-s.eui-skeleton--line,.eui-skeleton--size-s.eui-skeleton--rectangle{width:10%}.eui-skeleton--size-s.eui-skeleton--circle,.eui-skeleton--size-s.eui-skeleton--square{width:2rem;height:2rem}.eui-skeleton--size-m.eui-skeleton--line,.eui-skeleton--size-m.eui-skeleton--rectangle{width:25%}.eui-skeleton--size-m.eui-skeleton--circle,.eui-skeleton--size-m.eui-skeleton--square{width:3rem;height:3rem}.eui-skeleton--size-l.eui-skeleton--line,.eui-skeleton--size-l.eui-skeleton--rectangle{width:50%}.eui-skeleton--size-l.eui-skeleton--circle,.eui-skeleton--size-l.eui-skeleton--square{width:4rem;height:4rem}.eui-skeleton--size-xl.eui-skeleton--line,.eui-skeleton--size-xl.eui-skeleton--rectangle{width:75%}.eui-skeleton--size-xl.eui-skeleton--circle,.eui-skeleton--size-xl.eui-skeleton--square{width:5rem;height:5rem}\n"] }]
|
|
61
62
|
}], ctorParameters: () => [{ type: i1.BaseStatesDirective }], propDecorators: { cssClasses: [{
|
|
62
63
|
type: HostBinding,
|
|
63
64
|
args: ['class']
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"eui-components-eui-skeleton.mjs","sources":["../../eui-skeleton/eui-skeleton.component.ts","../../eui-skeleton/eui-skeleton.module.ts","../../eui-skeleton/eui-components-eui-skeleton.ts"],"sourcesContent":["import {\n // NgModule,\n Component,\n HostBinding,\n // EventEmitter,\n Input,\n ChangeDetectionStrategy,\n ViewEncapsulation,\n // Output,\n OnInit,\n} from '@angular/core';\nimport { BooleanInput } from '@angular/cdk/coercion';\n\n// eUI imports\nimport { BaseStatesDirective } from '@eui/components/shared';\nimport { coerceBoolean } from '@eui/base';\n\n@Component({\n template: '',\n selector: 'eui-skeleton',\n styleUrl: './styles/_index.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n hostDirectives: [\n {\n directive: BaseStatesDirective,\n inputs: [\n 'euiSizeXS',\n 'euiSizeS',\n 'euiSizeM',\n 'euiSizeL',\n 'euiSizeXL',\n 'euiSizeVariant',\n ],\n },\n ],\n})\nexport class EuiSkeletonComponent {\n @HostBinding('class')\n public get cssClasses(): string {\n return this.getCssClasses();\n }\n\n @Input() @coerceBoolean circle: BooleanInput = false;\n @Input() @coerceBoolean line: BooleanInput = false;\n @Input() @coerceBoolean square: BooleanInput = false;\n @Input() @coerceBoolean rectangle: BooleanInput = false;\n\n constructor(\n public baseStatesDirective: BaseStatesDirective,\n ) {}\n\n private getCssClasses(): string {\n return [\n this.baseStatesDirective.getCssClasses('eui-skeleton'),\n this.circle ? 'eui-skeleton--circle': '',\n this.line ? 'eui-skeleton--line': '',\n this.square ? 'eui-skeleton--square': '',\n this.rectangle ? 'eui-skeleton--rectangle': '',\n\n ]\n .join(' ')\n .trim();\n }\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { EuiSkeletonComponent } from './eui-skeleton.component';\n\nconst COMPONENTS = [EuiSkeletonComponent];\n\n@NgModule({\n imports: [\n CommonModule,\n ],\n declarations: [...COMPONENTS],\n exports: [...COMPONENTS],\n})\nexport class EuiSkeletonModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;
|
|
1
|
+
{"version":3,"file":"eui-components-eui-skeleton.mjs","sources":["../../eui-skeleton/eui-skeleton.component.ts","../../eui-skeleton/eui-skeleton.module.ts","../../eui-skeleton/eui-components-eui-skeleton.ts"],"sourcesContent":["import {\n // NgModule,\n Component,\n HostBinding,\n // EventEmitter,\n Input,\n ChangeDetectionStrategy,\n ViewEncapsulation,\n // Output,\n OnInit,\n} from '@angular/core';\nimport { BooleanInput } from '@angular/cdk/coercion';\n\n// eUI imports\nimport { BaseStatesDirective } from '@eui/components/shared';\nimport { coerceBoolean } from '@eui/base';\n\n@Component({\n template: '',\n selector: 'eui-skeleton',\n styleUrl: './styles/_index.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n hostDirectives: [\n {\n directive: BaseStatesDirective,\n inputs: [\n 'euiSizeXS',\n 'euiSizeS',\n 'euiSizeM',\n 'euiSizeL',\n 'euiSizeXL',\n 'euiRounded',\n 'euiSizeVariant',\n ],\n },\n ],\n})\nexport class EuiSkeletonComponent {\n @HostBinding('class')\n public get cssClasses(): string {\n return this.getCssClasses();\n }\n\n @Input() @coerceBoolean circle: BooleanInput = false;\n @Input() @coerceBoolean line: BooleanInput = false;\n @Input() @coerceBoolean square: BooleanInput = false;\n @Input() @coerceBoolean rectangle: BooleanInput = false;\n\n constructor(\n public baseStatesDirective: BaseStatesDirective,\n ) {}\n\n private getCssClasses(): string {\n return [\n this.baseStatesDirective.getCssClasses('eui-skeleton'),\n this.circle ? 'eui-skeleton--circle': '',\n this.line ? 'eui-skeleton--line': '',\n this.square ? 'eui-skeleton--square': '',\n this.rectangle ? 'eui-skeleton--rectangle': '',\n\n ]\n .join(' ')\n .trim();\n }\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { EuiSkeletonComponent } from './eui-skeleton.component';\n\nconst COMPONENTS = [EuiSkeletonComponent];\n\n@NgModule({\n imports: [\n CommonModule,\n ],\n declarations: [...COMPONENTS],\n exports: [...COMPONENTS],\n})\nexport class EuiSkeletonModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -1694,6 +1694,8 @@ class EuiSearchComponent {
|
|
|
1694
1694
|
this.isInputText = false;
|
|
1695
1695
|
this.hasSearchButton = false;
|
|
1696
1696
|
this.search = new EventEmitter();
|
|
1697
|
+
this.inputFocus = new EventEmitter();
|
|
1698
|
+
this.inputBlur = new EventEmitter();
|
|
1697
1699
|
}
|
|
1698
1700
|
get cssClasses() {
|
|
1699
1701
|
return [
|
|
@@ -1718,10 +1720,12 @@ class EuiSearchComponent {
|
|
|
1718
1720
|
}
|
|
1719
1721
|
});
|
|
1720
1722
|
}
|
|
1721
|
-
onInputFocus() {
|
|
1723
|
+
onInputFocus(event) {
|
|
1724
|
+
this.inputFocus.emit(event);
|
|
1722
1725
|
this.isInputFocus = true;
|
|
1723
1726
|
}
|
|
1724
|
-
onInputBlur() {
|
|
1727
|
+
onInputBlur(event) {
|
|
1728
|
+
this.inputBlur.emit(event);
|
|
1725
1729
|
this.isInputFocus = false;
|
|
1726
1730
|
}
|
|
1727
1731
|
onSearch(e) {
|
|
@@ -1741,7 +1745,7 @@ class EuiSearchComponent {
|
|
|
1741
1745
|
}
|
|
1742
1746
|
}
|
|
1743
1747
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: EuiSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1744
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: EuiSearchComponent, selector: "eui-search", inputs: { placeholderLabel: "placeholderLabel", panelWidth: "panelWidth", searchResults: "searchResults", isAutocomplete: "isAutocomplete", isInputText: "isInputText", hasSearchButton: "hasSearchButton" }, outputs: { search: "search" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "templates", predicate: EuiTemplateDirective }], ngImport: i0, template: "<div euiInputGroup class=\"eui-u-mb-none\">\n <div class=\"eui-input-group-addon\">\n <eui-autocomplete *ngIf=\"isAutocomplete\" [autocompleteData]=\"searchResults\"\n placeholder=\"{{placeholderLabel}}\"\n panelWidth=\"{{panelWidth}}\"\n (inputBlur)=\"onInputBlur()\"\n (inputFocus)=\"onInputFocus()\"\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\n <input *ngIf=\"isInputText\"\n class=\"mywp-search-bar__input\" euiInputText [(ngModel)]=\"searchInput\"\n placeholder=\"{{ placeholderLabel }}\"\n (focus)=\"onInputFocus()\" (blur)=\"onInputBlur()\" (keydown)=\"onSearchInput($event)\"/>\n\n <button *ngIf=\"hasSearchButton\"\n class=\"eui-search__input-button\"\n euiButton\n euiBasicButton\n euiSizeS\n [euiSecondary]=\"isInputFocus\"\n euiIconButton\n (click)=\"onSearchClick()\"\n aria-label=\"search button\">\n <eui-icon iconClass=\"eui-icon eui-icon-search\"></eui-icon>\n </button>\n\n <div *ngIf=\"!hasSearchButton\" class=\"eui-search__icon\">\n <eui-icon iconClass=\"eui-icon eui-icon-search\"></eui-icon>\n </div>\n </div>\n</div>\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-base-color-primary-110);border-color:var(--eui-base-color-primary-50);border-radius:var(--eui-base-spacing-m)!important;text-overflow:ellipsis;transition:width .25s ease-in-out;color:var(--eui-base-color-white);width:200px}.eui-search--focus .eui-input-text{background-color
|
|
1748
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.2", type: EuiSearchComponent, selector: "eui-search", inputs: { placeholderLabel: "placeholderLabel", panelWidth: "panelWidth", searchResults: "searchResults", isAutocomplete: "isAutocomplete", isInputText: "isInputText", hasSearchButton: "hasSearchButton" }, outputs: { search: "search", inputFocus: "inputFocus", inputBlur: "inputBlur" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "templates", predicate: EuiTemplateDirective }], ngImport: i0, template: "<div euiInputGroup class=\"eui-u-mb-none\">\n <div class=\"eui-input-group-addon\">\n <eui-autocomplete *ngIf=\"isAutocomplete\" [autocompleteData]=\"searchResults\"\n placeholder=\"{{placeholderLabel}}\"\n panelWidth=\"{{panelWidth}}\"\n (inputBlur)=\"onInputBlur($event)\"\n (inputFocus)=\"onInputFocus($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\n <input *ngIf=\"isInputText\"\n class=\"mywp-search-bar__input\" euiInputText [(ngModel)]=\"searchInput\"\n placeholder=\"{{ placeholderLabel }}\"\n (focus)=\"onInputFocus($event)\" (blur)=\"onInputBlur($event)\" (keydown)=\"onSearchInput($event)\"/>\n\n <button *ngIf=\"hasSearchButton\"\n class=\"eui-search__input-button\"\n euiButton\n euiBasicButton\n euiSizeS\n [euiSecondary]=\"isInputFocus\"\n euiIconButton\n (click)=\"onSearchClick()\"\n aria-label=\"search button\">\n <eui-icon iconClass=\"eui-icon eui-icon-search\"></eui-icon>\n </button>\n\n <div *ngIf=\"!hasSearchButton\" class=\"eui-search__icon\">\n <eui-icon iconClass=\"eui-icon eui-icon-search\"></eui-icon>\n </div>\n </div>\n</div>\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-base-color-primary-110);border-color:var(--eui-base-color-primary-50);border-radius:var(--eui-base-spacing-m)!important;text-overflow:ellipsis;transition:width .25s ease-in-out;color:var(--eui-base-color-white);width:200px}.eui-search .eui-input-text--clearable-icon{display:none}.eui-search--focus .eui-input-text{background-color:var(--eui-base-color-white);border-color:var(--eui-base-color-grey-80);color:var(--eui-base-color-black);width:300px}.eui-search--focus .eui-search__input-button{color:var(--eui-base-color-black)!important}.eui-search--focus .eui-search__icon{display:none}.eui-search__input-button{position:absolute;right:6px;top:6px;color:var(--eui-base-color-grey-15)!important}.eui-search__input-button .eui-icon{z-index:1}.eui-search__input-button:focus .eui-icon{color:var(--eui-base-color-black)!important}.eui-search__icon{position:absolute;right:8px;top:10px;color:var(--eui-base-color-grey-15)!important}@media screen and (max-width: 767px){.eui-search{display:none}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.EuiIconComponent, selector: "div[euiIcon], span[euiIcon], i[euiIcon], eui-icon", inputs: ["aria-label", "iconClass", "isLoading"] }, { kind: "component", type: i3.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap"], outputs: ["buttonClick"] }, { kind: "component", type: i4$2.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: i5$1.EuiTemplateDirective, selector: "[euiTemplate]", inputs: ["type", "euiTemplate"] }, { kind: "component", type: i6$1.EuiInputTextComponent, selector: "input[euiInputText]", inputs: ["class", "isInvalid"] }, { kind: "component", type: i7$1.EuiInputGroupComponent, selector: "div[euiInputGroup]", inputs: ["e2eAttr", "styleClass"] }, { kind: "directive", type: i8.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: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1745
1749
|
}
|
|
1746
1750
|
__decorate([
|
|
1747
1751
|
coerceBoolean$1
|
|
@@ -1754,7 +1758,7 @@ __decorate([
|
|
|
1754
1758
|
], EuiSearchComponent.prototype, "hasSearchButton", void 0);
|
|
1755
1759
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImport: i0, type: EuiSearchComponent, decorators: [{
|
|
1756
1760
|
type: Component,
|
|
1757
|
-
args: [{ selector: 'eui-search', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<div euiInputGroup class=\"eui-u-mb-none\">\n <div class=\"eui-input-group-addon\">\n <eui-autocomplete *ngIf=\"isAutocomplete\" [autocompleteData]=\"searchResults\"\n placeholder=\"{{placeholderLabel}}\"\n panelWidth=\"{{panelWidth}}\"\n (inputBlur)=\"onInputBlur()\"\n (inputFocus)=\"onInputFocus()\"\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\n <input *ngIf=\"isInputText\"\n class=\"mywp-search-bar__input\" euiInputText [(ngModel)]=\"searchInput\"\n placeholder=\"{{ placeholderLabel }}\"\n (focus)=\"onInputFocus()\" (blur)=\"onInputBlur()\" (keydown)=\"onSearchInput($event)\"/>\n\n <button *ngIf=\"hasSearchButton\"\n class=\"eui-search__input-button\"\n euiButton\n euiBasicButton\n euiSizeS\n [euiSecondary]=\"isInputFocus\"\n euiIconButton\n (click)=\"onSearchClick()\"\n aria-label=\"search button\">\n <eui-icon iconClass=\"eui-icon eui-icon-search\"></eui-icon>\n </button>\n\n <div *ngIf=\"!hasSearchButton\" class=\"eui-search__icon\">\n <eui-icon iconClass=\"eui-icon eui-icon-search\"></eui-icon>\n </div>\n </div>\n</div>\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-base-color-primary-110);border-color:var(--eui-base-color-primary-50);border-radius:var(--eui-base-spacing-m)!important;text-overflow:ellipsis;transition:width .25s ease-in-out;color:var(--eui-base-color-white);width:200px}.eui-search--focus .eui-input-text{background-color
|
|
1761
|
+
args: [{ selector: 'eui-search', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<div euiInputGroup class=\"eui-u-mb-none\">\n <div class=\"eui-input-group-addon\">\n <eui-autocomplete *ngIf=\"isAutocomplete\" [autocompleteData]=\"searchResults\"\n placeholder=\"{{placeholderLabel}}\"\n panelWidth=\"{{panelWidth}}\"\n (inputBlur)=\"onInputBlur($event)\"\n (inputFocus)=\"onInputFocus($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\n <input *ngIf=\"isInputText\"\n class=\"mywp-search-bar__input\" euiInputText [(ngModel)]=\"searchInput\"\n placeholder=\"{{ placeholderLabel }}\"\n (focus)=\"onInputFocus($event)\" (blur)=\"onInputBlur($event)\" (keydown)=\"onSearchInput($event)\"/>\n\n <button *ngIf=\"hasSearchButton\"\n class=\"eui-search__input-button\"\n euiButton\n euiBasicButton\n euiSizeS\n [euiSecondary]=\"isInputFocus\"\n euiIconButton\n (click)=\"onSearchClick()\"\n aria-label=\"search button\">\n <eui-icon iconClass=\"eui-icon eui-icon-search\"></eui-icon>\n </button>\n\n <div *ngIf=\"!hasSearchButton\" class=\"eui-search__icon\">\n <eui-icon iconClass=\"eui-icon eui-icon-search\"></eui-icon>\n </div>\n </div>\n</div>\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-base-color-primary-110);border-color:var(--eui-base-color-primary-50);border-radius:var(--eui-base-spacing-m)!important;text-overflow:ellipsis;transition:width .25s ease-in-out;color:var(--eui-base-color-white);width:200px}.eui-search .eui-input-text--clearable-icon{display:none}.eui-search--focus .eui-input-text{background-color:var(--eui-base-color-white);border-color:var(--eui-base-color-grey-80);color:var(--eui-base-color-black);width:300px}.eui-search--focus .eui-search__input-button{color:var(--eui-base-color-black)!important}.eui-search--focus .eui-search__icon{display:none}.eui-search__input-button{position:absolute;right:6px;top:6px;color:var(--eui-base-color-grey-15)!important}.eui-search__input-button .eui-icon{z-index:1}.eui-search__input-button:focus .eui-icon{color:var(--eui-base-color-black)!important}.eui-search__icon{position:absolute;right:8px;top:10px;color:var(--eui-base-color-grey-15)!important}@media screen and (max-width: 767px){.eui-search{display:none}}\n"] }]
|
|
1758
1762
|
}], propDecorators: { cssClasses: [{
|
|
1759
1763
|
type: HostBinding,
|
|
1760
1764
|
args: ['class']
|
|
@@ -1772,6 +1776,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.2", ngImpor
|
|
|
1772
1776
|
type: Input
|
|
1773
1777
|
}], search: [{
|
|
1774
1778
|
type: Output
|
|
1779
|
+
}], inputFocus: [{
|
|
1780
|
+
type: Output
|
|
1781
|
+
}], inputBlur: [{
|
|
1782
|
+
type: Output
|
|
1775
1783
|
}], templates: [{
|
|
1776
1784
|
type: ContentChildren,
|
|
1777
1785
|
args: [EuiTemplateDirective]
|