@eui/components 18.0.0-next.29 → 18.0.0-next.30

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.
Files changed (178) hide show
  1. package/docs/classes/EuiMessageBoxConfig.html +1 -1
  2. package/docs/components/EuiAlertComponent.html +1 -1
  3. package/docs/components/EuiButtonComponent.html +1 -1
  4. package/docs/components/EuiDialogComponent.html +96 -687
  5. package/docs/components/EuiDialogContainerComponent.html +1 -1
  6. package/docs/components/EuiMenuItemComponent.html +1 -1
  7. package/docs/components/EuiMessageBoxComponent.html +123 -1227
  8. package/docs/components/EuiPopoverComponent.html +81 -995
  9. package/docs/components/EuiTabComponent.html +88 -1004
  10. package/docs/components/EuiTabContentComponent.html +5 -78
  11. package/docs/components/EuiTableComponent.html +586 -2166
  12. package/docs/components/EuiTableFilterComponent.html +122 -787
  13. package/docs/components/EuiTableSelectableHeaderComponent.html +11 -141
  14. package/docs/components/EuiTableSelectableRowComponent.html +11 -125
  15. package/docs/components/EuiTableSortableColComponent.html +23 -263
  16. package/docs/components/EuiTabsComponent.html +21 -265
  17. package/docs/dependencies.html +1 -1
  18. package/docs/interfaces/EuiDialogInterface.html +2 -2
  19. package/docs/js/menu-wc.js +6 -6
  20. package/docs/js/menu-wc_es5.js +1 -1
  21. package/docs/js/search/search_index.js +2 -2
  22. package/esm2022/directives/eui-tooltip/container/eui-tooltip-container.component.mjs +2 -2
  23. package/esm2022/eui-alert/eui-alert.component.mjs +4 -3
  24. package/esm2022/eui-avatar/eui-avatar.component.mjs +2 -2
  25. package/esm2022/eui-badge/eui-badge.component.mjs +2 -2
  26. package/esm2022/eui-block-content/eui-block-content.component.mjs +2 -2
  27. package/esm2022/eui-button/eui-button.component.mjs +4 -5
  28. package/esm2022/eui-button-group/eui-button-group.component.mjs +1 -1
  29. package/esm2022/eui-button-v2/eui-button-v2.component.mjs +2 -2
  30. package/esm2022/eui-card/eui-card.component.mjs +2 -2
  31. package/esm2022/eui-chip/eui-chip.component.mjs +2 -2
  32. package/esm2022/eui-chip-list/eui-chip-list.component.mjs +2 -6
  33. package/esm2022/eui-dialog/container/eui-dialog-container.component.mjs +10 -10
  34. package/esm2022/eui-dialog/eui-dialog.component.mjs +29 -33
  35. package/esm2022/eui-dialog/models/eui-dialog.config.mjs +1 -1
  36. package/esm2022/eui-discussion-thread/eui-discussion-thread.component.mjs +2 -2
  37. package/esm2022/eui-ecl-date-block/eui-ecl-date-block.component.mjs +2 -2
  38. package/esm2022/eui-ecl-label/eui-ecl-label.component.mjs +2 -2
  39. package/esm2022/eui-feedback-message/eui-feedback-message.component.mjs +2 -2
  40. package/esm2022/eui-fieldset/eui-fieldset.component.mjs +2 -2
  41. package/esm2022/eui-file-upload/eui-file-upload.component.mjs +2 -2
  42. package/esm2022/eui-growl/eui-growl.component.mjs +2 -2
  43. package/esm2022/eui-input-checkbox/eui-input-checkbox.component.mjs +2 -2
  44. package/esm2022/eui-label/eui-label.component.mjs +2 -2
  45. package/esm2022/eui-language-selector/language-selector.component.mjs +2 -2
  46. package/esm2022/eui-list/eui-list-item/eui-list-item.component.mjs +2 -2
  47. package/esm2022/eui-list/eui-list.component.mjs +2 -2
  48. package/esm2022/eui-menu/eui-menu-item.component.mjs +4 -4
  49. package/esm2022/eui-menu/eui-menu.component.mjs +2 -2
  50. package/esm2022/eui-message-box/eui-message-box.component.mjs +51 -110
  51. package/esm2022/eui-message-box/models/eui-message-box.config.mjs +1 -1
  52. package/esm2022/eui-page/eui-page.component.mjs +2 -2
  53. package/esm2022/eui-popover/eui-popover.component.mjs +50 -72
  54. package/esm2022/eui-progress-bar/eui-progress-bar.component.mjs +2 -2
  55. package/esm2022/eui-progress-circle/eui-progress-circle.component.mjs +2 -2
  56. package/esm2022/eui-table/eui-table.component.mjs +82 -160
  57. package/esm2022/eui-table/filter/eui-table-filter.component.mjs +28 -32
  58. package/esm2022/eui-table/selectable-header/eui-table-selectable-header.component.mjs +12 -25
  59. package/esm2022/eui-table/selectable-row/eui-table-selectable-row.component.mjs +12 -25
  60. package/esm2022/eui-table/sortable-col/eui-table-sortable-col.component.mjs +20 -43
  61. package/esm2022/eui-tabs/eui-tab/eui-tab.component.mjs +44 -59
  62. package/esm2022/eui-tabs/eui-tab-content/eui-tab-content.component.mjs +6 -12
  63. package/esm2022/eui-tabs/eui-tabs.component.mjs +22 -45
  64. package/esm2022/eui-timebar/eui-timebar.component.mjs +2 -2
  65. package/esm2022/eui-timepicker/eui-timepicker.component.mjs +2 -2
  66. package/esm2022/eui-tree-list/eui-tree-list.component.mjs +2 -2
  67. package/esm2022/eui-wizard/eui-wizard-step.component.mjs +2 -2
  68. package/esm2022/eui-wizard/eui-wizard.component.mjs +2 -2
  69. package/esm2022/externals/eui-editor/eui-editor.component.mjs +2 -2
  70. package/esm2022/layout/eui-app/eui-app-toolbar/toolbar.component.mjs +2 -2
  71. package/esm2022/layout/eui-app/eui-app-top-message/top-message.component.mjs +2 -2
  72. package/esm2022/layout/eui-footer/footer.component.mjs +2 -2
  73. package/esm2022/layout/eui-notifications/eui-notifications.component.mjs +2 -2
  74. package/esm2022/layout/eui-notifications-v2/eui-notifications.component.mjs +2 -2
  75. package/esm2022/layout/eui-search/search.component.mjs +2 -2
  76. package/esm2022/layout/eui-toolbar/toolbar.component.mjs +2 -2
  77. package/esm2022/layout/eui-user-profile/user-profile.component.mjs +2 -2
  78. package/esm2022/shared/base/base-states.directive.mjs +2 -1
  79. package/eui-alert/eui-alert.component.d.ts.map +1 -1
  80. package/eui-button/eui-button.component.d.ts.map +1 -1
  81. package/eui-button-group/eui-button-group.component.d.ts.map +1 -1
  82. package/eui-chip-list/eui-chip-list.component.d.ts.map +1 -1
  83. package/eui-dialog/eui-dialog.component.d.ts +11 -6
  84. package/eui-dialog/eui-dialog.component.d.ts.map +1 -1
  85. package/eui-dialog/models/eui-dialog.config.d.ts +1 -1
  86. package/eui-dialog/models/eui-dialog.config.d.ts.map +1 -1
  87. package/eui-menu/eui-menu-item.component.d.ts.map +1 -1
  88. package/eui-message-box/eui-message-box.component.d.ts +26 -42
  89. package/eui-message-box/eui-message-box.component.d.ts.map +1 -1
  90. package/eui-message-box/models/eui-message-box.config.d.ts +1 -1
  91. package/eui-message-box/models/eui-message-box.config.d.ts.map +1 -1
  92. package/eui-popover/eui-popover.component.d.ts +18 -21
  93. package/eui-popover/eui-popover.component.d.ts.map +1 -1
  94. package/eui-table/eui-table.component.d.ts +36 -51
  95. package/eui-table/eui-table.component.d.ts.map +1 -1
  96. package/eui-table/filter/eui-table-filter.component.d.ts +9 -9
  97. package/eui-table/filter/eui-table-filter.component.d.ts.map +1 -1
  98. package/eui-table/selectable-header/eui-table-selectable-header.component.d.ts +4 -7
  99. package/eui-table/selectable-header/eui-table-selectable-header.component.d.ts.map +1 -1
  100. package/eui-table/selectable-row/eui-table-selectable-row.component.d.ts +4 -7
  101. package/eui-table/selectable-row/eui-table-selectable-row.component.d.ts.map +1 -1
  102. package/eui-table/sortable-col/eui-table-sortable-col.component.d.ts +10 -16
  103. package/eui-table/sortable-col/eui-table-sortable-col.component.d.ts.map +1 -1
  104. package/eui-tabs/eui-tab/eui-tab.component.d.ts +18 -23
  105. package/eui-tabs/eui-tab/eui-tab.component.d.ts.map +1 -1
  106. package/eui-tabs/eui-tab-content/eui-tab-content.component.d.ts +2 -4
  107. package/eui-tabs/eui-tab-content/eui-tab-content.component.d.ts.map +1 -1
  108. package/eui-tabs/eui-tabs.component.d.ts +8 -13
  109. package/eui-tabs/eui-tabs.component.d.ts.map +1 -1
  110. package/fesm2022/eui-components-directives.mjs +2 -2
  111. package/fesm2022/eui-components-eui-alert.mjs +11 -10
  112. package/fesm2022/eui-components-eui-alert.mjs.map +2 -2
  113. package/fesm2022/eui-components-eui-avatar.mjs +2 -2
  114. package/fesm2022/eui-components-eui-badge.mjs +2 -2
  115. package/fesm2022/eui-components-eui-badge.mjs.map +1 -1
  116. package/fesm2022/eui-components-eui-block-content.mjs +2 -2
  117. package/fesm2022/eui-components-eui-block-content.mjs.map +1 -1
  118. package/fesm2022/eui-components-eui-button-group.mjs.map +1 -1
  119. package/fesm2022/eui-components-eui-button-v2.mjs +2 -2
  120. package/fesm2022/eui-components-eui-button.mjs +3 -4
  121. package/fesm2022/eui-components-eui-button.mjs.map +2 -2
  122. package/fesm2022/eui-components-eui-card.mjs +2 -2
  123. package/fesm2022/eui-components-eui-card.mjs.map +1 -1
  124. package/fesm2022/eui-components-eui-chip-list.mjs +1 -5
  125. package/fesm2022/eui-components-eui-chip-list.mjs.map +2 -2
  126. package/fesm2022/eui-components-eui-chip.mjs +2 -2
  127. package/fesm2022/eui-components-eui-chip.mjs.map +1 -1
  128. package/fesm2022/eui-components-eui-dialog.mjs +236 -212
  129. package/fesm2022/eui-components-eui-dialog.mjs.map +2 -2
  130. package/fesm2022/eui-components-eui-discussion-thread.mjs +2 -2
  131. package/fesm2022/eui-components-eui-discussion-thread.mjs.map +1 -1
  132. package/fesm2022/eui-components-eui-ecl-date-block.mjs +2 -2
  133. package/fesm2022/eui-components-eui-ecl-date-block.mjs.map +1 -1
  134. package/fesm2022/eui-components-eui-ecl-label.mjs +2 -2
  135. package/fesm2022/eui-components-eui-ecl-label.mjs.map +1 -1
  136. package/fesm2022/eui-components-eui-feedback-message.mjs +2 -2
  137. package/fesm2022/eui-components-eui-fieldset.mjs +2 -2
  138. package/fesm2022/eui-components-eui-file-upload.mjs +2 -2
  139. package/fesm2022/eui-components-eui-file-upload.mjs.map +1 -1
  140. package/fesm2022/eui-components-eui-growl.mjs +2 -2
  141. package/fesm2022/eui-components-eui-input-checkbox.mjs +2 -2
  142. package/fesm2022/eui-components-eui-input-checkbox.mjs.map +1 -1
  143. package/fesm2022/eui-components-eui-label.mjs +2 -2
  144. package/fesm2022/eui-components-eui-language-selector.mjs +2 -2
  145. package/fesm2022/eui-components-eui-language-selector.mjs.map +1 -1
  146. package/fesm2022/eui-components-eui-list.mjs +4 -4
  147. package/fesm2022/eui-components-eui-menu.mjs +23 -27
  148. package/fesm2022/eui-components-eui-menu.mjs.map +2 -2
  149. package/fesm2022/eui-components-eui-message-box.mjs +49 -105
  150. package/fesm2022/eui-components-eui-message-box.mjs.map +2 -2
  151. package/fesm2022/eui-components-eui-page.mjs +2 -2
  152. package/fesm2022/eui-components-eui-page.mjs.map +1 -1
  153. package/fesm2022/eui-components-eui-popover.mjs +49 -150
  154. package/fesm2022/eui-components-eui-popover.mjs.map +2 -2
  155. package/fesm2022/eui-components-eui-progress-bar.mjs +2 -2
  156. package/fesm2022/eui-components-eui-progress-bar.mjs.map +1 -1
  157. package/fesm2022/eui-components-eui-progress-circle.mjs +2 -2
  158. package/fesm2022/eui-components-eui-progress-circle.mjs.map +1 -1
  159. package/fesm2022/eui-components-eui-table.mjs +254 -418
  160. package/fesm2022/eui-components-eui-table.mjs.map +3 -3
  161. package/fesm2022/eui-components-eui-tabs.mjs +72 -116
  162. package/fesm2022/eui-components-eui-tabs.mjs.map +3 -3
  163. package/fesm2022/eui-components-eui-timebar.mjs +2 -2
  164. package/fesm2022/eui-components-eui-timebar.mjs.map +1 -1
  165. package/fesm2022/eui-components-eui-timepicker.mjs +2 -2
  166. package/fesm2022/eui-components-eui-timepicker.mjs.map +1 -1
  167. package/fesm2022/eui-components-eui-tree-list.mjs +2 -2
  168. package/fesm2022/eui-components-eui-tree-list.mjs.map +1 -1
  169. package/fesm2022/eui-components-eui-wizard.mjs +4 -4
  170. package/fesm2022/eui-components-eui-wizard.mjs.map +1 -1
  171. package/fesm2022/eui-components-externals-eui-editor.mjs +2 -2
  172. package/fesm2022/eui-components-externals-eui-editor.mjs.map +1 -1
  173. package/fesm2022/eui-components-layout.mjs +16 -16
  174. package/fesm2022/eui-components-layout.mjs.map +1 -1
  175. package/fesm2022/eui-components-shared.mjs +1 -1
  176. package/fesm2022/eui-components-shared.mjs.map +2 -2
  177. package/package.json +3 -3
  178. package/shared/base/base-states.directive.d.ts.map +1 -1
@@ -1,18 +1,11 @@
1
1
  // eui-tab-content/eui-tab-content.component.mjs
2
- import { Component, Input, ViewChild } from "@angular/core";
3
- import { coerceBooleanProperty } from "@angular/cdk/coercion";
2
+ import { Component, Input, ViewChild, booleanAttribute } from "@angular/core";
4
3
  import { TemplatePortal } from "@angular/cdk/portal";
5
4
  import * as i0 from "@angular/core";
6
5
  var EuiTabContentComponent = class _EuiTabContentComponent {
7
- get hasNoContentPadding() {
8
- return this._hasNoContentPadding;
9
- }
10
- set hasNoContentPadding(value) {
11
- this._hasNoContentPadding = coerceBooleanProperty(value);
12
- }
13
6
  constructor(viewContainerRef) {
14
7
  this.viewContainerRef = viewContainerRef;
15
- this._hasNoContentPadding = false;
8
+ this.hasNoContentPadding = false;
16
9
  }
17
10
  ngAfterViewInit() {
18
11
  this.templatePortal = new TemplatePortal(this.templateRef, this.viewContainerRef);
@@ -21,7 +14,7 @@ var EuiTabContentComponent = class _EuiTabContentComponent {
21
14
  this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i0, type: _EuiTabContentComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
22
15
  }
23
16
  static {
24
- this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: { hasNoContentPadding: "hasNoContentPadding" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["euiTabContent"], descendants: true }], ngImport: i0, template: ` <ng-template #euiTabContent>
17
+ this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.4", type: _EuiTabContentComponent, selector: "eui-tab-content, euiTabContent", inputs: { hasNoContentPadding: ["hasNoContentPadding", "hasNoContentPadding", booleanAttribute] }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["euiTabContent"], descendants: true }], ngImport: i0, template: ` <ng-template #euiTabContent>
25
18
  <div tabindex="0" class="eui-tab-content" [class.eui-tab-content--no-padding]="this.hasNoContentPadding">
26
19
  <ng-content></ng-content>
27
20
  </div>
@@ -42,7 +35,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4",
42
35
  type: ViewChild,
43
36
  args: ["euiTabContent"]
44
37
  }], hasNoContentPadding: [{
45
- type: Input
38
+ type: Input,
39
+ args: [{ transform: booleanAttribute }]
46
40
  }] } });
47
41
 
48
42
  // eui-tab-label/eui-tab-label.component.mjs
@@ -103,47 +97,11 @@ i02.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4",
103
97
  }] });
104
98
 
105
99
  // eui-tab/eui-tab.component.mjs
106
- import { Component as Component3, ContentChild, Input as Input2 } from "@angular/core";
107
- import { coerceBooleanProperty as coerceBooleanProperty2 } from "@angular/cdk/coercion";
108
- import { BaseDirective } from "@eui/components/shared";
100
+ import { Component as Component3, ContentChild, Input as Input2, booleanAttribute as booleanAttribute2 } from "@angular/core";
101
+ import { BaseStatesDirective } from "@eui/components/shared";
109
102
  import * as i03 from "@angular/core";
110
- var EuiTabComponent = class _EuiTabComponent extends BaseDirective {
111
- get isClosable() {
112
- return this._isClosable;
113
- }
114
- set isClosable(value) {
115
- this._isClosable = coerceBooleanProperty2(value);
116
- }
117
- get isVisible() {
118
- return this._isVisible;
119
- }
120
- set isVisible(value) {
121
- this._isVisible = coerceBooleanProperty2(value);
122
- }
123
- get isActive() {
124
- return this._isActive;
125
- }
126
- set isActive(value) {
127
- this._isActive = coerceBooleanProperty2(value);
128
- }
129
- get isDisabled() {
130
- return this._isDisabled;
131
- }
132
- set isDisabled(value) {
133
- this._isDisabled = coerceBooleanProperty2(value);
134
- }
135
- get hasBackgroundFilled() {
136
- return this._hasBackgroundFilled;
137
- }
138
- set hasBackgroundFilled(value) {
139
- this._hasBackgroundFilled = coerceBooleanProperty2(value);
140
- }
141
- get isHandleCloseOnClose() {
142
- return this._isHandleCloseOnClose;
143
- }
144
- set isHandleCloseOnClose(value) {
145
- this._isHandleCloseOnClose = coerceBooleanProperty2(value);
146
- }
103
+ import * as i1 from "@eui/components/shared";
104
+ var EuiTabComponent = class _EuiTabComponent {
147
105
  get templateLabel() {
148
106
  return this._templateLabel;
149
107
  }
@@ -156,15 +114,15 @@ var EuiTabComponent = class _EuiTabComponent extends BaseDirective {
156
114
  set templateContent(value) {
157
115
  this.setTemplateContentInput(value);
158
116
  }
159
- constructor() {
160
- super();
117
+ constructor(baseStatesDirective) {
118
+ this.baseStatesDirective = baseStatesDirective;
161
119
  this.e2eAttr = "eui-tab";
162
- this._isClosable = false;
163
- this._isVisible = true;
164
- this._isActive = false;
165
- this._isDisabled = false;
166
- this._hasBackgroundFilled = false;
167
- this._isHandleCloseOnClose = false;
120
+ this.isClosable = false;
121
+ this.isVisible = true;
122
+ this.isActive = false;
123
+ this.isDisabled = false;
124
+ this.hasBackgroundFilled = false;
125
+ this.isHandleCloseOnClose = false;
168
126
  }
169
127
  setTemplateLabelInput(value) {
170
128
  if (value) {
@@ -177,33 +135,54 @@ var EuiTabComponent = class _EuiTabComponent extends BaseDirective {
177
135
  }
178
136
  }
179
137
  static {
180
- this.ɵfac = i03.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i03, type: _EuiTabComponent, deps: [], target: i03.ɵɵFactoryTarget.Component });
138
+ this.ɵfac = i03.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i03, type: _EuiTabComponent, deps: [{ token: i1.BaseStatesDirective }], target: i03.ɵɵFactoryTarget.Component });
181
139
  }
182
140
  static {
183
- this.ɵcmp = i03.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _EuiTabComponent, selector: "eui-tab", inputs: { url: "url", e2eAttr: "e2eAttr", tooltip: "tooltip", isClosable: "isClosable", isVisible: "isVisible", isActive: "isActive", isDisabled: "isDisabled", hasBackgroundFilled: "hasBackgroundFilled", isHandleCloseOnClose: "isHandleCloseOnClose" }, queries: [{ propertyName: "templateLabel", first: true, predicate: EuiTabLabelComponent, descendants: true }, { propertyName: "templateContent", first: true, predicate: EuiTabContentComponent, descendants: true }], usesInheritance: true, ngImport: i03, template: "<ng-content></ng-content>\n", styles: ['.eui-tabs__items{display:flex!important;flex-direction:row;position:relative;width:100%}.eui-tabs .eui-tabs__wrapper--vertical{flex:1 1 25%;flex-direction:column}.eui-tabs .eui-tabs__items-wrapper{display:flex;flex-shrink:0}.eui-tabs .eui-tabs__items{justify-content:space-between;overflow:hidden}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item{background-color:var(--eui-base-color-grey-5);box-shadow:3px 0 6px 1px #00000040;display:none;height:100%;left:0;position:absolute;top:0}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item .eui-button.eui-button--icon-only{height:100%}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item{background-color:var(--eui-base-color-grey-5);box-shadow:-3px 0 6px 1px #00000040;display:none;height:100%;position:absolute;right:0;top:0}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item .eui-button.eui-button--icon-only{height:100%}.eui-tabs .eui-tabs__items--scrolling .eui-tabs__items-wrapper{padding-left:var(--eui-base-spacing-3xl);padding-right:var(--eui-base-spacing-m)}.eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__left-item,.eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__right-item{display:block!important;padding:0 2px 2px}.eui-tabs__right-content{align-items:center;display:flex;margin-left:var(--eui-base-spacing-s)}.eui-tabs__right-content .eui-tabs__right-content-wrapper{display:flex;align-items:center}.eui-tabs .eui-tabs__wrapper--vertical .eui-tab-item__label{align-items:center;display:flex}.eui-tabs .eui-tab-item{align-items:center;background-color:inherit;border:none;border-bottom:3px solid transparent;box-shadow:0 2px 1px #00000080,inset 0 1px 0 var(--eui-base-color-white);color:var(--eui-base-color-grey-90);cursor:pointer;display:flex;padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m) var(--eui-base-spacing-s) var(--eui-base-spacing-m);position:relative;text-align:center;transition:.5s cubic-bezier(.35,0,.25,1)}.eui-tabs .eui-tab-item__label{font:normal normal 400 1rem/1.75rem var(--eui-base-font-family);font-weight:700}.eui-tabs .eui-tab-item__label .eui-tab-item__sublabel{align-items:center;display:flex;font:normal normal 400 .875rem/1.5rem var(--eui-base-font-family)}.eui-tabs .eui-tab-item:focus{border-bottom:3px solid var(--eui-base-color-accent-100);background:var(--eui-base-color-grey-10)}.eui-tabs .eui-tab-item:focus:focus:not([readonly]){outline:2px solid var(--eui-ctx-color-focus)!important;outline-offset:-2px!important;transition:none!important}.eui-tabs .eui-tab-item:focus:focus-visible:not([readonly]){outline:2px solid var(--eui-ctx-color-focus-visible)!important;outline-offset:-2px!important;transition:none!important}.eui-tabs .eui-tab-item:focus [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-ctx-color-focus-visible)!important;outline-offset:-2px!important;transition:none!important}.eui-tabs .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-base-color-grey-10);border-bottom:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--active{background-color:var(--eui-base-color-primary-5);border-bottom:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--hidden{display:none}.eui-tabs .eui-tab-item .eui-tab__close-icon{cursor:pointer;color:var(--eui-base-color-grey-75);fill:var(--eui-base-color-grey-75);opacity:.7}.eui-tabs .eui-tab-item .eui-tab__close-icon:hover>svg{color:var(--eui-base-color-primary-100);fill:var(--eui-base-color-primary-100);opacity:1}.eui-tabs .eui-tab-item.eui-tab-item--disabled{color:var(--eui-base-color-grey-50);cursor:not-allowed;pointer-events:none}.eui-tabs .eui-tab-item.eui-tab-item--disabled:hover{border-bottom:3px solid transparent;color:var(--eui-base-color-grey-75)}.eui-tabs .eui-tab-content-wrapper{border-top:1px solid var(--eui-base-color-grey-15)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-base-spacing-s) 0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-tabs.eui-tabs--vertical{display:flex;flex-direction:row}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items .eui-tabs__items-wrapper{display:flex;flex-direction:column;height:100%}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal){border-bottom:0;flex:1 1 25%;flex-direction:column;position:relative}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item{border-bottom-color:transparent;border-left:3px solid transparent;box-shadow:0 0 1px #000000a6,inset 0 1px 0 var(--eui-base-color-white)}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item--active,.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:active{border-left:3px solid var(--eui-base-color-primary-100)}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-base-color-grey-5);border-left:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-grey-100)}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus{border-left:3px solid transparent}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus:focus:not([readonly]){outline:2px solid var(--eui-ctx-color-focus)!important;outline-offset:-2px!important;transition:none!important}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus:focus-visible:not([readonly]){outline:2px solid var(--eui-ctx-color-focus-visible)!important;outline-offset:-2px!important;transition:none!important}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-ctx-color-focus-visible)!important;outline-offset:-2px!important;transition:none!important}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper{border-top:none;flex:1 1 75%;flex-direction:column}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-base-spacing-s);position:relative}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-tabs--main-navigation .eui-tabs__items,.eui-tabs--main-navigation .eui-tabs__items-wrapper{width:100%}.eui-tabs--main-navigation .eui-tab-item{flex-grow:1;justify-content:center}.eui-tabs--main-navigation .eui-tab-item--active,.eui-tabs--main-navigation .eui-tab-item :active{background-color:var(--eui-base-color-primary-5)}.eui-tabs .eui-tab-item:hover,.eui-tabs .eui-tab-item.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--primary{color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--primary.eui-tab-item--active,.eui-tabs .eui-tab-item--primary:hover{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--secondary{color:var(--eui-base-color-grey-90)}.eui-tabs .eui-tab-item--secondary.eui-tab-item--active,.eui-tabs .eui-tab-item--secondary:hover{border-bottom-color:var(--eui-base-color-grey-80)}.eui-tabs .eui-tab-item--info{color:var(--eui-base-color-info-100)}.eui-tabs .eui-tab-item--info.eui-tab-item--active,.eui-tabs .eui-tab-item--info:hover{border-bottom-color:var(--eui-base-color-info-100)}.eui-tabs .eui-tab-item--success{color:var(--eui-base-color-success-100)}.eui-tabs .eui-tab-item--success.eui-tab-item--active,.eui-tabs .eui-tab-item--success:hover{border-bottom-color:var(--eui-base-color-success-100)}.eui-tabs .eui-tab-item--warning{color:var(--eui-base-color-warning-140)}.eui-tabs .eui-tab-item--warning.eui-tab-item--active,.eui-tabs .eui-tab-item--warning:hover{border-bottom-color:var(--eui-base-color-warning-100)}.eui-tabs .eui-tab-item--danger{color:var(--eui-base-color-danger-110)}.eui-tabs .eui-tab-item--danger.eui-tab-item--active,.eui-tabs .eui-tab-item--danger:hover{border-bottom-color:var(--eui-base-color-danger-100)}.eui-tabs .eui-tab-item--accent{color:var(--eui-base-color-grey-100)}.eui-tabs .eui-tab-item--accent.eui-tab-item--active,.eui-tabs .eui-tab-item--accent:hover{border-bottom-color:var(--eui-base-color-accent-110)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled{background:none}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--primary{background-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--primary.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--secondary{background-color:var(--eui-base-color-grey-5);color:var(--eui-base-color-grey-90)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--secondary.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--info{background-color:var(--eui-base-color-info-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--info.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--success{background-color:var(--eui-base-color-success-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--success.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--warning{background-color:var(--eui-base-color-warning-100);color:var(--eui-base-color-black)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--warning.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--danger{background-color:var(--eui-base-color-danger-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--danger.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--accent{background-color:var(--eui-base-color-accent-100);color:var(--eui-base-color-black)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--accent.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}\n'] });
141
+ this.ɵcmp = i03.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-next.4", type: _EuiTabComponent, selector: "eui-tab", inputs: { url: "url", e2eAttr: "e2eAttr", tooltip: "tooltip", isClosable: ["isClosable", "isClosable", booleanAttribute2], isVisible: ["isVisible", "isVisible", booleanAttribute2], isActive: ["isActive", "isActive", booleanAttribute2], isDisabled: ["isDisabled", "isDisabled", booleanAttribute2], hasBackgroundFilled: ["hasBackgroundFilled", "hasBackgroundFilled", booleanAttribute2], isHandleCloseOnClose: ["isHandleCloseOnClose", "isHandleCloseOnClose", booleanAttribute2] }, queries: [{ propertyName: "templateLabel", first: true, predicate: EuiTabLabelComponent, descendants: true }, { propertyName: "templateContent", first: true, predicate: EuiTabContentComponent, descendants: true }], hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiDisabled", "euiDisabled", "euiPrimary", "euiPrimary", "euiSecondary", "euiSecondary", "euiInfo", "euiInfo", "euiSuccess", "euiSuccess", "euiWarning", "euiWarning", "euiDanger", "euiDanger", "euiAccent", "euiAccent", "euiVariant", "euiVariant"] }], ngImport: i03, template: "<ng-content></ng-content>\n", styles: ['.eui-tabs__items{display:flex!important;flex-direction:row;position:relative;width:100%}.eui-tabs .eui-tabs__wrapper--vertical{flex:1 1 25%;flex-direction:column}.eui-tabs .eui-tabs__items-wrapper{display:flex;flex-shrink:0}.eui-tabs .eui-tabs__items{justify-content:space-between;overflow:hidden}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item{background-color:var(--eui-base-color-grey-5);box-shadow:3px 0 6px 1px #00000040;display:none;height:100%;left:0;position:absolute;top:0}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item .eui-button.eui-button--icon-only{height:100%}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item{background-color:var(--eui-base-color-grey-5);box-shadow:-3px 0 6px 1px #00000040;display:none;height:100%;position:absolute;right:0;top:0}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item .eui-button.eui-button--icon-only{height:100%}.eui-tabs .eui-tabs__items--scrolling .eui-tabs__items-wrapper{padding-left:var(--eui-base-spacing-3xl);padding-right:var(--eui-base-spacing-m)}.eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__left-item,.eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__right-item{display:block!important;padding:0 2px 2px}.eui-tabs__right-content{align-items:center;display:flex;margin-left:var(--eui-base-spacing-s)}.eui-tabs__right-content .eui-tabs__right-content-wrapper{display:flex;align-items:center}.eui-tabs .eui-tabs__wrapper--vertical .eui-tab-item__label{align-items:center;display:flex}.eui-tabs .eui-tab-item{align-items:center;background-color:inherit;border:none;border-bottom:3px solid transparent;box-shadow:0 2px 1px #00000080,inset 0 1px 0 var(--eui-base-color-white);color:var(--eui-base-color-grey-90);cursor:pointer;display:flex;padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m) var(--eui-base-spacing-s) var(--eui-base-spacing-m);position:relative;text-align:center;transition:.5s cubic-bezier(.35,0,.25,1)}.eui-tabs .eui-tab-item__label{font:normal normal 400 1rem/1.75rem var(--eui-base-font-family);font-weight:700}.eui-tabs .eui-tab-item__label .eui-tab-item__sublabel{align-items:center;display:flex;font:normal normal 400 .875rem/1.5rem var(--eui-base-font-family)}.eui-tabs .eui-tab-item:focus{border-bottom:3px solid var(--eui-base-color-accent-100);background:var(--eui-base-color-grey-10)}.eui-tabs .eui-tab-item:focus:focus:not([readonly]){outline:2px solid var(--eui-ctx-color-focus)!important;outline-offset:-2px!important;transition:none!important}.eui-tabs .eui-tab-item:focus:focus-visible:not([readonly]){outline:2px solid var(--eui-ctx-color-focus-visible)!important;outline-offset:-2px!important;transition:none!important}.eui-tabs .eui-tab-item:focus [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-ctx-color-focus-visible)!important;outline-offset:-2px!important;transition:none!important}.eui-tabs .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-base-color-grey-10);border-bottom:3px solid var(--eui-base-color-info-130);color:var(--eui-base-color-info-130)}.eui-tabs .eui-tab-item--active{background-color:var(--eui-base-color-info-5);border-bottom:3px solid var(--eui-base-color-info-130);color:var(--eui-base-color-info-130)}.eui-tabs .eui-tab-item--hidden{display:none}.eui-tabs .eui-tab-item .eui-tab__close-icon{cursor:pointer;color:var(--eui-base-color-grey-75);fill:var(--eui-base-color-grey-75);opacity:.7}.eui-tabs .eui-tab-item .eui-tab__close-icon:hover>svg{color:var(--eui-base-color-primary-100);fill:var(--eui-base-color-primary-100);opacity:1}.eui-tabs .eui-tab-item.eui-tab-item--disabled{color:var(--eui-base-color-grey-50);cursor:not-allowed;pointer-events:none}.eui-tabs .eui-tab-item.eui-tab-item--disabled:hover{border-bottom:3px solid transparent;color:var(--eui-base-color-grey-75)}.eui-tabs .eui-tab-content-wrapper{border-top:1px solid var(--eui-base-color-grey-15)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-base-spacing-s) 0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-tabs.eui-tabs--vertical{display:flex;flex-direction:row}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items .eui-tabs__items-wrapper{display:flex;flex-direction:column;height:100%}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal){border-bottom:0;flex:1 1 25%;flex-direction:column;position:relative}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item{border-bottom-color:transparent;border-left:3px solid transparent;box-shadow:0 0 1px #000000a6,inset 0 1px 0 var(--eui-base-color-white)}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item--active,.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:active{border-left:3px solid var(--eui-base-color-primary-100)}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-base-color-grey-5);border-left:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-grey-100)}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus{border-left:3px solid transparent}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus:focus:not([readonly]){outline:2px solid var(--eui-ctx-color-focus)!important;outline-offset:-2px!important;transition:none!important}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus:focus-visible:not([readonly]){outline:2px solid var(--eui-ctx-color-focus-visible)!important;outline-offset:-2px!important;transition:none!important}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-ctx-color-focus-visible)!important;outline-offset:-2px!important;transition:none!important}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper{border-top:none;flex:1 1 75%;flex-direction:column}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-base-spacing-s);position:relative}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-tabs--main-navigation .eui-tabs__items,.eui-tabs--main-navigation .eui-tabs__items-wrapper{width:100%}.eui-tabs--main-navigation .eui-tab-item{flex-grow:1;justify-content:center}.eui-tabs--main-navigation .eui-tab-item--active,.eui-tabs--main-navigation .eui-tab-item :active{background-color:var(--eui-base-color-primary-5)}.eui-tabs .eui-tab-item:hover,.eui-tabs .eui-tab-item.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--primary{color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--primary.eui-tab-item--active,.eui-tabs .eui-tab-item--primary:hover{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--secondary{color:var(--eui-base-color-grey-90)}.eui-tabs .eui-tab-item--secondary.eui-tab-item--active,.eui-tabs .eui-tab-item--secondary:hover{border-bottom-color:var(--eui-base-color-grey-80)}.eui-tabs .eui-tab-item--info{color:var(--eui-base-color-info-100)}.eui-tabs .eui-tab-item--info.eui-tab-item--active,.eui-tabs .eui-tab-item--info:hover{border-bottom-color:var(--eui-base-color-info-100)}.eui-tabs .eui-tab-item--success{color:var(--eui-base-color-success-100)}.eui-tabs .eui-tab-item--success.eui-tab-item--active,.eui-tabs .eui-tab-item--success:hover{border-bottom-color:var(--eui-base-color-success-100)}.eui-tabs .eui-tab-item--warning{color:var(--eui-base-color-warning-140)}.eui-tabs .eui-tab-item--warning.eui-tab-item--active,.eui-tabs .eui-tab-item--warning:hover{border-bottom-color:var(--eui-base-color-warning-100)}.eui-tabs .eui-tab-item--danger{color:var(--eui-base-color-danger-110)}.eui-tabs .eui-tab-item--danger.eui-tab-item--active,.eui-tabs .eui-tab-item--danger:hover{border-bottom-color:var(--eui-base-color-danger-100)}.eui-tabs .eui-tab-item--accent{color:var(--eui-base-color-grey-100)}.eui-tabs .eui-tab-item--accent.eui-tab-item--active,.eui-tabs .eui-tab-item--accent:hover{border-bottom-color:var(--eui-base-color-accent-110)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled{background:none}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--primary{background-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--primary.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--secondary{background-color:var(--eui-base-color-grey-5);color:var(--eui-base-color-grey-90)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--secondary.eui-tab-item--active{border-bottom-color:var(--eui-base-color-info-130)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--info{background-color:var(--eui-base-color-info-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--info.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--success{background-color:var(--eui-base-color-success-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--success.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--warning{background-color:var(--eui-base-color-warning-100);color:var(--eui-base-color-black)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--warning.eui-tab-item--active{border-bottom-color:var(--eui-base-color-info-130)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--danger{background-color:var(--eui-base-color-danger-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--danger.eui-tab-item--active{border-bottom-color:var(--eui-base-color-info-130)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--accent{background-color:var(--eui-base-color-accent-100);color:var(--eui-base-color-black)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--accent.eui-tab-item--active{border-bottom-color:var(--eui-base-color-info-130)}\n'] });
184
142
  }
185
143
  };
186
144
  i03.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i03, type: EuiTabComponent, decorators: [{
187
145
  type: Component3,
188
- args: [{ selector: "eui-tab", template: "<ng-content></ng-content>\n", styles: ['.eui-tabs__items{display:flex!important;flex-direction:row;position:relative;width:100%}.eui-tabs .eui-tabs__wrapper--vertical{flex:1 1 25%;flex-direction:column}.eui-tabs .eui-tabs__items-wrapper{display:flex;flex-shrink:0}.eui-tabs .eui-tabs__items{justify-content:space-between;overflow:hidden}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item{background-color:var(--eui-base-color-grey-5);box-shadow:3px 0 6px 1px #00000040;display:none;height:100%;left:0;position:absolute;top:0}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item .eui-button.eui-button--icon-only{height:100%}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item{background-color:var(--eui-base-color-grey-5);box-shadow:-3px 0 6px 1px #00000040;display:none;height:100%;position:absolute;right:0;top:0}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item .eui-button.eui-button--icon-only{height:100%}.eui-tabs .eui-tabs__items--scrolling .eui-tabs__items-wrapper{padding-left:var(--eui-base-spacing-3xl);padding-right:var(--eui-base-spacing-m)}.eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__left-item,.eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__right-item{display:block!important;padding:0 2px 2px}.eui-tabs__right-content{align-items:center;display:flex;margin-left:var(--eui-base-spacing-s)}.eui-tabs__right-content .eui-tabs__right-content-wrapper{display:flex;align-items:center}.eui-tabs .eui-tabs__wrapper--vertical .eui-tab-item__label{align-items:center;display:flex}.eui-tabs .eui-tab-item{align-items:center;background-color:inherit;border:none;border-bottom:3px solid transparent;box-shadow:0 2px 1px #00000080,inset 0 1px 0 var(--eui-base-color-white);color:var(--eui-base-color-grey-90);cursor:pointer;display:flex;padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m) var(--eui-base-spacing-s) var(--eui-base-spacing-m);position:relative;text-align:center;transition:.5s cubic-bezier(.35,0,.25,1)}.eui-tabs .eui-tab-item__label{font:normal normal 400 1rem/1.75rem var(--eui-base-font-family);font-weight:700}.eui-tabs .eui-tab-item__label .eui-tab-item__sublabel{align-items:center;display:flex;font:normal normal 400 .875rem/1.5rem var(--eui-base-font-family)}.eui-tabs .eui-tab-item:focus{border-bottom:3px solid var(--eui-base-color-accent-100);background:var(--eui-base-color-grey-10)}.eui-tabs .eui-tab-item:focus:focus:not([readonly]){outline:2px solid var(--eui-ctx-color-focus)!important;outline-offset:-2px!important;transition:none!important}.eui-tabs .eui-tab-item:focus:focus-visible:not([readonly]){outline:2px solid var(--eui-ctx-color-focus-visible)!important;outline-offset:-2px!important;transition:none!important}.eui-tabs .eui-tab-item:focus [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-ctx-color-focus-visible)!important;outline-offset:-2px!important;transition:none!important}.eui-tabs .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-base-color-grey-10);border-bottom:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--active{background-color:var(--eui-base-color-primary-5);border-bottom:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--hidden{display:none}.eui-tabs .eui-tab-item .eui-tab__close-icon{cursor:pointer;color:var(--eui-base-color-grey-75);fill:var(--eui-base-color-grey-75);opacity:.7}.eui-tabs .eui-tab-item .eui-tab__close-icon:hover>svg{color:var(--eui-base-color-primary-100);fill:var(--eui-base-color-primary-100);opacity:1}.eui-tabs .eui-tab-item.eui-tab-item--disabled{color:var(--eui-base-color-grey-50);cursor:not-allowed;pointer-events:none}.eui-tabs .eui-tab-item.eui-tab-item--disabled:hover{border-bottom:3px solid transparent;color:var(--eui-base-color-grey-75)}.eui-tabs .eui-tab-content-wrapper{border-top:1px solid var(--eui-base-color-grey-15)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-base-spacing-s) 0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-tabs.eui-tabs--vertical{display:flex;flex-direction:row}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items .eui-tabs__items-wrapper{display:flex;flex-direction:column;height:100%}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal){border-bottom:0;flex:1 1 25%;flex-direction:column;position:relative}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item{border-bottom-color:transparent;border-left:3px solid transparent;box-shadow:0 0 1px #000000a6,inset 0 1px 0 var(--eui-base-color-white)}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item--active,.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:active{border-left:3px solid var(--eui-base-color-primary-100)}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-base-color-grey-5);border-left:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-grey-100)}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus{border-left:3px solid transparent}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus:focus:not([readonly]){outline:2px solid var(--eui-ctx-color-focus)!important;outline-offset:-2px!important;transition:none!important}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus:focus-visible:not([readonly]){outline:2px solid var(--eui-ctx-color-focus-visible)!important;outline-offset:-2px!important;transition:none!important}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-ctx-color-focus-visible)!important;outline-offset:-2px!important;transition:none!important}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper{border-top:none;flex:1 1 75%;flex-direction:column}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-base-spacing-s);position:relative}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-tabs--main-navigation .eui-tabs__items,.eui-tabs--main-navigation .eui-tabs__items-wrapper{width:100%}.eui-tabs--main-navigation .eui-tab-item{flex-grow:1;justify-content:center}.eui-tabs--main-navigation .eui-tab-item--active,.eui-tabs--main-navigation .eui-tab-item :active{background-color:var(--eui-base-color-primary-5)}.eui-tabs .eui-tab-item:hover,.eui-tabs .eui-tab-item.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--primary{color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--primary.eui-tab-item--active,.eui-tabs .eui-tab-item--primary:hover{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--secondary{color:var(--eui-base-color-grey-90)}.eui-tabs .eui-tab-item--secondary.eui-tab-item--active,.eui-tabs .eui-tab-item--secondary:hover{border-bottom-color:var(--eui-base-color-grey-80)}.eui-tabs .eui-tab-item--info{color:var(--eui-base-color-info-100)}.eui-tabs .eui-tab-item--info.eui-tab-item--active,.eui-tabs .eui-tab-item--info:hover{border-bottom-color:var(--eui-base-color-info-100)}.eui-tabs .eui-tab-item--success{color:var(--eui-base-color-success-100)}.eui-tabs .eui-tab-item--success.eui-tab-item--active,.eui-tabs .eui-tab-item--success:hover{border-bottom-color:var(--eui-base-color-success-100)}.eui-tabs .eui-tab-item--warning{color:var(--eui-base-color-warning-140)}.eui-tabs .eui-tab-item--warning.eui-tab-item--active,.eui-tabs .eui-tab-item--warning:hover{border-bottom-color:var(--eui-base-color-warning-100)}.eui-tabs .eui-tab-item--danger{color:var(--eui-base-color-danger-110)}.eui-tabs .eui-tab-item--danger.eui-tab-item--active,.eui-tabs .eui-tab-item--danger:hover{border-bottom-color:var(--eui-base-color-danger-100)}.eui-tabs .eui-tab-item--accent{color:var(--eui-base-color-grey-100)}.eui-tabs .eui-tab-item--accent.eui-tab-item--active,.eui-tabs .eui-tab-item--accent:hover{border-bottom-color:var(--eui-base-color-accent-110)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled{background:none}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--primary{background-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--primary.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--secondary{background-color:var(--eui-base-color-grey-5);color:var(--eui-base-color-grey-90)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--secondary.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--info{background-color:var(--eui-base-color-info-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--info.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--success{background-color:var(--eui-base-color-success-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--success.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--warning{background-color:var(--eui-base-color-warning-100);color:var(--eui-base-color-black)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--warning.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--danger{background-color:var(--eui-base-color-danger-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--danger.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--accent{background-color:var(--eui-base-color-accent-100);color:var(--eui-base-color-black)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--accent.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}\n'] }]
189
- }], ctorParameters: () => [], propDecorators: { url: [{
146
+ args: [{ selector: "eui-tab", hostDirectives: [
147
+ {
148
+ directive: BaseStatesDirective,
149
+ inputs: [
150
+ "euiDisabled",
151
+ "euiPrimary",
152
+ "euiSecondary",
153
+ "euiInfo",
154
+ "euiSuccess",
155
+ "euiWarning",
156
+ "euiDanger",
157
+ "euiAccent",
158
+ "euiVariant"
159
+ ]
160
+ }
161
+ ], template: "<ng-content></ng-content>\n", styles: ['.eui-tabs__items{display:flex!important;flex-direction:row;position:relative;width:100%}.eui-tabs .eui-tabs__wrapper--vertical{flex:1 1 25%;flex-direction:column}.eui-tabs .eui-tabs__items-wrapper{display:flex;flex-shrink:0}.eui-tabs .eui-tabs__items{justify-content:space-between;overflow:hidden}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item{background-color:var(--eui-base-color-grey-5);box-shadow:3px 0 6px 1px #00000040;display:none;height:100%;left:0;position:absolute;top:0}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item .eui-button.eui-button--icon-only{height:100%}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item{background-color:var(--eui-base-color-grey-5);box-shadow:-3px 0 6px 1px #00000040;display:none;height:100%;position:absolute;right:0;top:0}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item .eui-button.eui-button--icon-only{height:100%}.eui-tabs .eui-tabs__items--scrolling .eui-tabs__items-wrapper{padding-left:var(--eui-base-spacing-3xl);padding-right:var(--eui-base-spacing-m)}.eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__left-item,.eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__right-item{display:block!important;padding:0 2px 2px}.eui-tabs__right-content{align-items:center;display:flex;margin-left:var(--eui-base-spacing-s)}.eui-tabs__right-content .eui-tabs__right-content-wrapper{display:flex;align-items:center}.eui-tabs .eui-tabs__wrapper--vertical .eui-tab-item__label{align-items:center;display:flex}.eui-tabs .eui-tab-item{align-items:center;background-color:inherit;border:none;border-bottom:3px solid transparent;box-shadow:0 2px 1px #00000080,inset 0 1px 0 var(--eui-base-color-white);color:var(--eui-base-color-grey-90);cursor:pointer;display:flex;padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m) var(--eui-base-spacing-s) var(--eui-base-spacing-m);position:relative;text-align:center;transition:.5s cubic-bezier(.35,0,.25,1)}.eui-tabs .eui-tab-item__label{font:normal normal 400 1rem/1.75rem var(--eui-base-font-family);font-weight:700}.eui-tabs .eui-tab-item__label .eui-tab-item__sublabel{align-items:center;display:flex;font:normal normal 400 .875rem/1.5rem var(--eui-base-font-family)}.eui-tabs .eui-tab-item:focus{border-bottom:3px solid var(--eui-base-color-accent-100);background:var(--eui-base-color-grey-10)}.eui-tabs .eui-tab-item:focus:focus:not([readonly]){outline:2px solid var(--eui-ctx-color-focus)!important;outline-offset:-2px!important;transition:none!important}.eui-tabs .eui-tab-item:focus:focus-visible:not([readonly]){outline:2px solid var(--eui-ctx-color-focus-visible)!important;outline-offset:-2px!important;transition:none!important}.eui-tabs .eui-tab-item:focus [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-ctx-color-focus-visible)!important;outline-offset:-2px!important;transition:none!important}.eui-tabs .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-base-color-grey-10);border-bottom:3px solid var(--eui-base-color-info-130);color:var(--eui-base-color-info-130)}.eui-tabs .eui-tab-item--active{background-color:var(--eui-base-color-info-5);border-bottom:3px solid var(--eui-base-color-info-130);color:var(--eui-base-color-info-130)}.eui-tabs .eui-tab-item--hidden{display:none}.eui-tabs .eui-tab-item .eui-tab__close-icon{cursor:pointer;color:var(--eui-base-color-grey-75);fill:var(--eui-base-color-grey-75);opacity:.7}.eui-tabs .eui-tab-item .eui-tab__close-icon:hover>svg{color:var(--eui-base-color-primary-100);fill:var(--eui-base-color-primary-100);opacity:1}.eui-tabs .eui-tab-item.eui-tab-item--disabled{color:var(--eui-base-color-grey-50);cursor:not-allowed;pointer-events:none}.eui-tabs .eui-tab-item.eui-tab-item--disabled:hover{border-bottom:3px solid transparent;color:var(--eui-base-color-grey-75)}.eui-tabs .eui-tab-content-wrapper{border-top:1px solid var(--eui-base-color-grey-15)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-base-spacing-s) 0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-tabs.eui-tabs--vertical{display:flex;flex-direction:row}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items .eui-tabs__items-wrapper{display:flex;flex-direction:column;height:100%}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal){border-bottom:0;flex:1 1 25%;flex-direction:column;position:relative}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item{border-bottom-color:transparent;border-left:3px solid transparent;box-shadow:0 0 1px #000000a6,inset 0 1px 0 var(--eui-base-color-white)}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item--active,.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:active{border-left:3px solid var(--eui-base-color-primary-100)}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-base-color-grey-5);border-left:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-grey-100)}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus{border-left:3px solid transparent}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus:focus:not([readonly]){outline:2px solid var(--eui-ctx-color-focus)!important;outline-offset:-2px!important;transition:none!important}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus:focus-visible:not([readonly]){outline:2px solid var(--eui-ctx-color-focus-visible)!important;outline-offset:-2px!important;transition:none!important}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-ctx-color-focus-visible)!important;outline-offset:-2px!important;transition:none!important}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper{border-top:none;flex:1 1 75%;flex-direction:column}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-base-spacing-s);position:relative}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-tabs--main-navigation .eui-tabs__items,.eui-tabs--main-navigation .eui-tabs__items-wrapper{width:100%}.eui-tabs--main-navigation .eui-tab-item{flex-grow:1;justify-content:center}.eui-tabs--main-navigation .eui-tab-item--active,.eui-tabs--main-navigation .eui-tab-item :active{background-color:var(--eui-base-color-primary-5)}.eui-tabs .eui-tab-item:hover,.eui-tabs .eui-tab-item.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--primary{color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--primary.eui-tab-item--active,.eui-tabs .eui-tab-item--primary:hover{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--secondary{color:var(--eui-base-color-grey-90)}.eui-tabs .eui-tab-item--secondary.eui-tab-item--active,.eui-tabs .eui-tab-item--secondary:hover{border-bottom-color:var(--eui-base-color-grey-80)}.eui-tabs .eui-tab-item--info{color:var(--eui-base-color-info-100)}.eui-tabs .eui-tab-item--info.eui-tab-item--active,.eui-tabs .eui-tab-item--info:hover{border-bottom-color:var(--eui-base-color-info-100)}.eui-tabs .eui-tab-item--success{color:var(--eui-base-color-success-100)}.eui-tabs .eui-tab-item--success.eui-tab-item--active,.eui-tabs .eui-tab-item--success:hover{border-bottom-color:var(--eui-base-color-success-100)}.eui-tabs .eui-tab-item--warning{color:var(--eui-base-color-warning-140)}.eui-tabs .eui-tab-item--warning.eui-tab-item--active,.eui-tabs .eui-tab-item--warning:hover{border-bottom-color:var(--eui-base-color-warning-100)}.eui-tabs .eui-tab-item--danger{color:var(--eui-base-color-danger-110)}.eui-tabs .eui-tab-item--danger.eui-tab-item--active,.eui-tabs .eui-tab-item--danger:hover{border-bottom-color:var(--eui-base-color-danger-100)}.eui-tabs .eui-tab-item--accent{color:var(--eui-base-color-grey-100)}.eui-tabs .eui-tab-item--accent.eui-tab-item--active,.eui-tabs .eui-tab-item--accent:hover{border-bottom-color:var(--eui-base-color-accent-110)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled{background:none}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--primary{background-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--primary.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--secondary{background-color:var(--eui-base-color-grey-5);color:var(--eui-base-color-grey-90)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--secondary.eui-tab-item--active{border-bottom-color:var(--eui-base-color-info-130)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--info{background-color:var(--eui-base-color-info-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--info.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--success{background-color:var(--eui-base-color-success-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--success.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--warning{background-color:var(--eui-base-color-warning-100);color:var(--eui-base-color-black)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--warning.eui-tab-item--active{border-bottom-color:var(--eui-base-color-info-130)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--danger{background-color:var(--eui-base-color-danger-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--danger.eui-tab-item--active{border-bottom-color:var(--eui-base-color-info-130)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--accent{background-color:var(--eui-base-color-accent-100);color:var(--eui-base-color-black)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--accent.eui-tab-item--active{border-bottom-color:var(--eui-base-color-info-130)}\n'] }]
162
+ }], ctorParameters: () => [{ type: i1.BaseStatesDirective }], propDecorators: { url: [{
190
163
  type: Input2
191
164
  }], e2eAttr: [{
192
165
  type: Input2
193
166
  }], tooltip: [{
194
167
  type: Input2
195
168
  }], isClosable: [{
196
- type: Input2
169
+ type: Input2,
170
+ args: [{ transform: booleanAttribute2 }]
197
171
  }], isVisible: [{
198
- type: Input2
172
+ type: Input2,
173
+ args: [{ transform: booleanAttribute2 }]
199
174
  }], isActive: [{
200
- type: Input2
175
+ type: Input2,
176
+ args: [{ transform: booleanAttribute2 }]
201
177
  }], isDisabled: [{
202
- type: Input2
178
+ type: Input2,
179
+ args: [{ transform: booleanAttribute2 }]
203
180
  }], hasBackgroundFilled: [{
204
- type: Input2
181
+ type: Input2,
182
+ args: [{ transform: booleanAttribute2 }]
205
183
  }], isHandleCloseOnClose: [{
206
- type: Input2
184
+ type: Input2,
185
+ args: [{ transform: booleanAttribute2 }]
207
186
  }], templateLabel: [{
208
187
  type: ContentChild,
209
188
  args: [EuiTabLabelComponent]
@@ -213,46 +192,19 @@ i03.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4",
213
192
  }] } });
214
193
 
215
194
  // eui-tabs.component.mjs
216
- import { Component as Component4, ContentChildren, Directive as Directive2, EventEmitter, Input as Input3, Output, HostListener, ViewEncapsulation, forwardRef, ViewChildren, ViewContainerRef as ViewContainerRef3, ViewChild as ViewChild3, HostBinding } from "@angular/core";
195
+ import { Component as Component4, ContentChildren, Directive as Directive2, EventEmitter, Input as Input3, Output, HostListener, ViewEncapsulation, forwardRef, ViewChildren, ViewContainerRef as ViewContainerRef3, ViewChild as ViewChild3, HostBinding, booleanAttribute as booleanAttribute3 } from "@angular/core";
217
196
  import { animate, style } from "@angular/animations";
218
- import { Subject } from "rxjs";
219
- import { filter, startWith, takeUntil } from "rxjs/operators";
220
- import { coerceBooleanProperty as coerceBooleanProperty3 } from "@angular/cdk/coercion";
197
+ import { Subject, filter, startWith, takeUntil } from "rxjs";
221
198
  import { NavigationEnd } from "@angular/router";
222
199
  import * as i04 from "@angular/core";
223
- import * as i1 from "@angular/router";
200
+ import * as i12 from "@angular/router";
224
201
  import * as i2 from "@angular/animations";
225
- import * as i3 from "@angular/common";
226
- import * as i4 from "@angular/cdk/portal";
227
- import * as i5 from "@eui/components/eui-icon";
228
- import * as i6 from "@eui/components/eui-button";
229
- import * as i7 from "@eui/components/directives";
230
- import * as i8 from "@angular/cdk/observers";
202
+ import * as i3 from "@angular/cdk/portal";
203
+ import * as i4 from "@eui/components/eui-icon";
204
+ import * as i5 from "@eui/components/eui-button";
205
+ import * as i6 from "@eui/components/directives";
206
+ import * as i7 from "@angular/cdk/observers";
231
207
  var EuiTabsComponent = class _EuiTabsComponent {
232
- get isMainNavigation() {
233
- return this._isMainNavigation;
234
- }
235
- set isMainNavigation(value) {
236
- this._isMainNavigation = coerceBooleanProperty3(value);
237
- }
238
- get isHandleChangeTab() {
239
- return this._isHandleChangeTab;
240
- }
241
- set isHandleChangeTab(value) {
242
- this._isHandleChangeTab = coerceBooleanProperty3(value);
243
- }
244
- get isSubTabs() {
245
- return this._isSubTabs;
246
- }
247
- set isSubTabs(value) {
248
- this._isSubTabs = coerceBooleanProperty3(value);
249
- }
250
- get isVerticalTabs() {
251
- return this._isVerticalTabs;
252
- }
253
- set isVerticalTabs(value) {
254
- this._isVerticalTabs = coerceBooleanProperty3(value);
255
- }
256
208
  constructor(cd, router, builder) {
257
209
  this.cd = cd;
258
210
  this.router = router;
@@ -267,10 +219,10 @@ var EuiTabsComponent = class _EuiTabsComponent {
267
219
  this.navigationLeftButtonDisabled = true;
268
220
  this.navigationRightButtonDisabled = false;
269
221
  this.currentOffset = 0;
270
- this._isMainNavigation = false;
271
- this._isHandleChangeTab = false;
272
- this._isSubTabs = false;
273
- this._isVerticalTabs = false;
222
+ this.isMainNavigation = false;
223
+ this.isHandleChangeTab = false;
224
+ this.isSubTabs = false;
225
+ this.isVerticalTabs = false;
274
226
  this.destroy$ = new Subject();
275
227
  this.stepMove = 400;
276
228
  this.scrollingCount = 0;
@@ -513,16 +465,16 @@ var EuiTabsComponent = class _EuiTabsComponent {
513
465
  this.cd.detectChanges();
514
466
  }
515
467
  static {
516
- this.ɵfac = i04.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i04, type: _EuiTabsComponent, deps: [{ token: i04.ChangeDetectorRef }, { token: i1.Router }, { token: i2.AnimationBuilder }], target: i04.ɵɵFactoryTarget.Component });
468
+ this.ɵfac = i04.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i04, type: _EuiTabsComponent, deps: [{ token: i04.ChangeDetectorRef }, { token: i12.Router }, { token: i2.AnimationBuilder }], target: i04.ɵɵFactoryTarget.Component });
517
469
  }
518
470
  static {
519
- this.ɵcmp = i04.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-next.4", type: _EuiTabsComponent, selector: "eui-tabs", inputs: { styleClass: "styleClass", tabs: "tabs", activeTabIndex: "activeTabIndex", e2eAttr: "e2eAttr", pathMatch: "pathMatch", isMainNavigation: "isMainNavigation", isHandleChangeTab: "isHandleChangeTab", isSubTabs: "isSubTabs", isVerticalTabs: "isVerticalTabs" }, outputs: { tabClose: "tabClose", tabSelect: "tabSelect" }, host: { listeners: { "window:resize": "onResize($event)" } }, queries: [{ propertyName: "_tabs", predicate: i04.forwardRef(() => EuiTabComponent) }], viewQueries: [{ propertyName: "euiTabsItems", first: true, predicate: ["euiTabsItems"], descendants: true }, { propertyName: "euiTabsItemsWrapper", first: true, predicate: ["euiTabsItemsWrapper"], descendants: true }, { propertyName: "host", first: true, predicate: ["host"], descendants: true }, { propertyName: "euiTabLabelItems", predicate: ["euiTabLabelItem"], descendants: true, read: ViewContainerRef3 }], usesOnChanges: true, ngImport: i04, template: '<div\n #host\n class="eui-tabs {{ styleClass }}"\n [class.eui-tabs--main-navigation]="isMainNavigation"\n [class.eui-tabs--vertical]="isVerticalTabs"\n attr.data-e2e="{{ e2eAttr }}">\n <div class="eui-u-flex" [class.eui-tabs__wrapper--horizontal]="!isVerticalTabs" [class.eui-tabs__wrapper--vertical]="isVerticalTabs">\n <div\n #euiTabsItems\n class="eui-tabs__items"\n [class.eui-tabs__items--horizontal]="!isVerticalTabs"\n [class.eui-tabs__items--scrolling]="scrolling"\n (cdkObserveContent)="onContentChanges()">\n <div #euiTabsItemsWrapper class="eui-tabs__items-wrapper" [attr.data-offset]="currentOffset" role="tablist">\n <ng-container *ngFor="let tab of tabs; let i = index">\n <ng-container *ngIf="tab.isVisible">\n <div\n tabindex="0"\n role="tab"\n class="eui-tab-item"\n [class.eui-tab-item--closable]="tab.isClosable"\n [class.eui-tab-item--active]="activeTabIndex === i"\n [class.eui-tab-item--disabled]="tab.isDisabled"\n [class.eui-tab-item--secondary]="tab.euiSecondary"\n [class.eui-tab-item--primary]="tab.euiPrimary"\n [class.eui-tab-item--info]="tab.euiInfo"\n [class.eui-tab-item--success]="tab.euiSuccess"\n [class.eui-tab-item--warning]="tab.euiWarning"\n [class.eui-tab-item--danger]="tab.euiDanger"\n [class.eui-tab-item--accent]="tab.euiAccent"\n [class.eui-tab-item--background-filled]="tab.hasBackgroundFilled"\n [attr.aria-disabled]="tab.isDisabled"\n (click)="changeTab(i)"\n [euiTooltip]="tab.tooltip"\n (keyup)="onKeyUp($event, i)">\n <div class="eui-tab-item__label">\n <ng-template [cdkPortalOutlet]="tab.templateLabel.templatePortal"></ng-template>\n </div>\n <button\n *ngIf="tab.isClosable"\n (click)="closeTab(i, $event)"\n euiButton\n euiIconButton\n euiBasicButton\n euiRounded\n type="button"\n aria-label="Close tab button"\n class="eui-u-ml-s">\n <eui-icon-svg\n icon="eui-ecl-close"\n fillColor="grey-75"\n class="eui-tab__close-icon"\n aria-label="Close icon">\n </eui-icon-svg>\n </button>\n </div>\n </ng-container>\n </ng-container>\n </div>\n\n <div class="eui-tabs__navigation">\n <div class="eui-tabs__navigation__left-item">\n <button\n (click)="goToLeft()"\n euiButton\n euiIconButton\n euiBasicButton\n type="button"\n [euiDisabled]="navigationLeftButtonDisabled"\n aria-label="Scroll left">\n <eui-icon-svg icon="eui-chevron-back"></eui-icon-svg>\n </button>\n </div>\n <div class="eui-tabs__navigation__right-item">\n <button\n (click)="goToRight()"\n euiButton\n euiIconButton\n euiBasicButton\n type="button"\n [euiDisabled]="navigationRightButtonDisabled"\n aria-label="Scroll right">\n <eui-icon-svg icon="eui-chevron-forward"></eui-icon-svg>\n </button>\n </div>\n </div>\n </div>\n\n <div class="eui-tabs__right-content">\n <ng-content select="euiTabsRightContent"></ng-content>\n </div>\n </div>\n\n <ng-container *ngFor="let tab of tabs; let i = index">\n <div class="eui-tab-content-wrapper" tabindex="0" *ngIf="i === activeTabIndex && tab.templateContent">\n <ng-template [cdkPortalOutlet]="tab.templateContent.templatePortal"></ng-template>\n </div>\n </ng-container>\n</div>\n', styles: ['.eui-tabs__items{display:flex!important;flex-direction:row;position:relative;width:100%}.eui-tabs .eui-tabs__wrapper--vertical{flex:1 1 25%;flex-direction:column}.eui-tabs .eui-tabs__items-wrapper{display:flex;flex-shrink:0}.eui-tabs .eui-tabs__items{justify-content:space-between;overflow:hidden}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item{background-color:var(--eui-base-color-grey-5);box-shadow:3px 0 6px 1px #00000040;display:none;height:100%;left:0;position:absolute;top:0}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item .eui-button.eui-button--icon-only{height:100%}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item{background-color:var(--eui-base-color-grey-5);box-shadow:-3px 0 6px 1px #00000040;display:none;height:100%;position:absolute;right:0;top:0}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item .eui-button.eui-button--icon-only{height:100%}.eui-tabs .eui-tabs__items--scrolling .eui-tabs__items-wrapper{padding-left:var(--eui-base-spacing-3xl);padding-right:var(--eui-base-spacing-m)}.eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__left-item,.eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__right-item{display:block!important;padding:0 2px 2px}.eui-tabs__right-content{align-items:center;display:flex;margin-left:var(--eui-base-spacing-s)}.eui-tabs__right-content .eui-tabs__right-content-wrapper{display:flex;align-items:center}.eui-tabs .eui-tabs__wrapper--vertical .eui-tab-item__label{align-items:center;display:flex}.eui-tabs .eui-tab-item{align-items:center;background-color:inherit;border:none;border-bottom:3px solid transparent;box-shadow:0 2px 1px #00000080,inset 0 1px 0 var(--eui-base-color-white);color:var(--eui-base-color-grey-90);cursor:pointer;display:flex;padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m) var(--eui-base-spacing-s) var(--eui-base-spacing-m);position:relative;text-align:center;transition:.5s cubic-bezier(.35,0,.25,1)}.eui-tabs .eui-tab-item__label{font:normal normal 400 1rem/1.75rem var(--eui-base-font-family);font-weight:700}.eui-tabs .eui-tab-item__label .eui-tab-item__sublabel{align-items:center;display:flex;font:normal normal 400 .875rem/1.5rem var(--eui-base-font-family)}.eui-tabs .eui-tab-item:focus{border-bottom:3px solid var(--eui-base-color-accent-100);background:var(--eui-base-color-grey-10)}.eui-tabs .eui-tab-item:focus:focus:not([readonly]){outline:2px solid var(--eui-ctx-color-focus)!important;outline-offset:-2px!important;transition:none!important}.eui-tabs .eui-tab-item:focus:focus-visible:not([readonly]){outline:2px solid var(--eui-ctx-color-focus-visible)!important;outline-offset:-2px!important;transition:none!important}.eui-tabs .eui-tab-item:focus [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-ctx-color-focus-visible)!important;outline-offset:-2px!important;transition:none!important}.eui-tabs .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-base-color-grey-10);border-bottom:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--active{background-color:var(--eui-base-color-primary-5);border-bottom:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--hidden{display:none}.eui-tabs .eui-tab-item .eui-tab__close-icon{cursor:pointer;color:var(--eui-base-color-grey-75);fill:var(--eui-base-color-grey-75);opacity:.7}.eui-tabs .eui-tab-item .eui-tab__close-icon:hover>svg{color:var(--eui-base-color-primary-100);fill:var(--eui-base-color-primary-100);opacity:1}.eui-tabs .eui-tab-item.eui-tab-item--disabled{color:var(--eui-base-color-grey-50);cursor:not-allowed;pointer-events:none}.eui-tabs .eui-tab-item.eui-tab-item--disabled:hover{border-bottom:3px solid transparent;color:var(--eui-base-color-grey-75)}.eui-tabs .eui-tab-content-wrapper{border-top:1px solid var(--eui-base-color-grey-15)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-base-spacing-s) 0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-tabs.eui-tabs--vertical{display:flex;flex-direction:row}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items .eui-tabs__items-wrapper{display:flex;flex-direction:column;height:100%}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal){border-bottom:0;flex:1 1 25%;flex-direction:column;position:relative}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item{border-bottom-color:transparent;border-left:3px solid transparent;box-shadow:0 0 1px #000000a6,inset 0 1px 0 var(--eui-base-color-white)}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item--active,.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:active{border-left:3px solid var(--eui-base-color-primary-100)}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-base-color-grey-5);border-left:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-grey-100)}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus{border-left:3px solid transparent}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus:focus:not([readonly]){outline:2px solid var(--eui-ctx-color-focus)!important;outline-offset:-2px!important;transition:none!important}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus:focus-visible:not([readonly]){outline:2px solid var(--eui-ctx-color-focus-visible)!important;outline-offset:-2px!important;transition:none!important}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-ctx-color-focus-visible)!important;outline-offset:-2px!important;transition:none!important}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper{border-top:none;flex:1 1 75%;flex-direction:column}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-base-spacing-s);position:relative}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-tabs--main-navigation .eui-tabs__items,.eui-tabs--main-navigation .eui-tabs__items-wrapper{width:100%}.eui-tabs--main-navigation .eui-tab-item{flex-grow:1;justify-content:center}.eui-tabs--main-navigation .eui-tab-item--active,.eui-tabs--main-navigation .eui-tab-item :active{background-color:var(--eui-base-color-primary-5)}.eui-tabs .eui-tab-item:hover,.eui-tabs .eui-tab-item.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--primary{color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--primary.eui-tab-item--active,.eui-tabs .eui-tab-item--primary:hover{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--secondary{color:var(--eui-base-color-grey-90)}.eui-tabs .eui-tab-item--secondary.eui-tab-item--active,.eui-tabs .eui-tab-item--secondary:hover{border-bottom-color:var(--eui-base-color-grey-80)}.eui-tabs .eui-tab-item--info{color:var(--eui-base-color-info-100)}.eui-tabs .eui-tab-item--info.eui-tab-item--active,.eui-tabs .eui-tab-item--info:hover{border-bottom-color:var(--eui-base-color-info-100)}.eui-tabs .eui-tab-item--success{color:var(--eui-base-color-success-100)}.eui-tabs .eui-tab-item--success.eui-tab-item--active,.eui-tabs .eui-tab-item--success:hover{border-bottom-color:var(--eui-base-color-success-100)}.eui-tabs .eui-tab-item--warning{color:var(--eui-base-color-warning-140)}.eui-tabs .eui-tab-item--warning.eui-tab-item--active,.eui-tabs .eui-tab-item--warning:hover{border-bottom-color:var(--eui-base-color-warning-100)}.eui-tabs .eui-tab-item--danger{color:var(--eui-base-color-danger-110)}.eui-tabs .eui-tab-item--danger.eui-tab-item--active,.eui-tabs .eui-tab-item--danger:hover{border-bottom-color:var(--eui-base-color-danger-100)}.eui-tabs .eui-tab-item--accent{color:var(--eui-base-color-grey-100)}.eui-tabs .eui-tab-item--accent.eui-tab-item--active,.eui-tabs .eui-tab-item--accent:hover{border-bottom-color:var(--eui-base-color-accent-110)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled{background:none}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--primary{background-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--primary.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--secondary{background-color:var(--eui-base-color-grey-5);color:var(--eui-base-color-grey-90)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--secondary.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--info{background-color:var(--eui-base-color-info-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--info.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--success{background-color:var(--eui-base-color-success-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--success.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--warning{background-color:var(--eui-base-color-warning-100);color:var(--eui-base-color-black)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--warning.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--danger{background-color:var(--eui-base-color-danger-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--danger.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--accent{background-color:var(--eui-base-color-accent-100);color:var(--eui-base-color-black)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--accent.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}\n'], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: i5.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i6.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "directive", type: i7.EuiTooltipDirective, selector: "[euiTooltip]", inputs: ["e2eAttr", "showDelay", "hideDelay", "contentAlignment", "position", "isDisabled", "euiTooltip", "euiTooltipPrimary", "euiTooltipSecondary", "euiTooltipInfo", "euiTooltipSuccess", "euiTooltipWarning", "euiTooltipDanger", "euiTooltipAccent"], exportAs: ["euiTooltip"] }, { kind: "directive", type: i8.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], encapsulation: i04.ViewEncapsulation.None });
471
+ this.ɵcmp = i04.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.0-next.4", type: _EuiTabsComponent, selector: "eui-tabs", inputs: { styleClass: "styleClass", tabs: "tabs", activeTabIndex: "activeTabIndex", e2eAttr: "e2eAttr", pathMatch: "pathMatch", isMainNavigation: ["isMainNavigation", "isMainNavigation", booleanAttribute3], isHandleChangeTab: ["isHandleChangeTab", "isHandleChangeTab", booleanAttribute3], isSubTabs: ["isSubTabs", "isSubTabs", booleanAttribute3], isVerticalTabs: ["isVerticalTabs", "isVerticalTabs", booleanAttribute3] }, outputs: { tabClose: "tabClose", tabSelect: "tabSelect" }, host: { listeners: { "window:resize": "onResize($event)" } }, queries: [{ propertyName: "_tabs", predicate: i04.forwardRef(() => EuiTabComponent) }], viewQueries: [{ propertyName: "euiTabsItems", first: true, predicate: ["euiTabsItems"], descendants: true }, { propertyName: "euiTabsItemsWrapper", first: true, predicate: ["euiTabsItemsWrapper"], descendants: true }, { propertyName: "host", first: true, predicate: ["host"], descendants: true }, { propertyName: "euiTabLabelItems", predicate: ["euiTabLabelItem"], descendants: true, read: ViewContainerRef3 }], usesOnChanges: true, ngImport: i04, template: '<div\n #host\n class="eui-tabs {{ styleClass }}"\n [class.eui-tabs--main-navigation]="isMainNavigation"\n [class.eui-tabs--vertical]="isVerticalTabs"\n attr.data-e2e="{{ e2eAttr }}">\n <div class="eui-u-flex" [class.eui-tabs__wrapper--horizontal]="!isVerticalTabs" [class.eui-tabs__wrapper--vertical]="isVerticalTabs">\n <div\n #euiTabsItems\n class="eui-tabs__items"\n [class.eui-tabs__items--horizontal]="!isVerticalTabs"\n [class.eui-tabs__items--scrolling]="scrolling"\n (cdkObserveContent)="onContentChanges()">\n <div #euiTabsItemsWrapper class="eui-tabs__items-wrapper" [attr.data-offset]="currentOffset" role="tablist">\n @for (tab of tabs; let i = $index; track tab) {\n @if (tab.isVisible) {\n <div\n tabindex="0"\n role="tab"\n class="eui-tab-item eui-tab-item--{{ tab.baseStatesDirective.euiVariant }}"\n [class.eui-tab-item--closable]="tab.isClosable"\n [class.eui-tab-item--active]="activeTabIndex === i"\n [class.eui-tab-item--disabled]="tab.isDisabled"\n [class.eui-tab-item--background-filled]="tab.hasBackgroundFilled"\n [attr.aria-disabled]="tab.isDisabled"\n (click)="changeTab(i)"\n [euiTooltip]="tab.tooltip"\n (keyup)="onKeyUp($event, i)">\n <div class="eui-tab-item__label">\n <ng-template [cdkPortalOutlet]="tab.templateLabel.templatePortal"></ng-template>\n </div>\n @if (tab.isClosable) {\n <button\n (click)="closeTab(i, $event)"\n euiButton\n euiIconButton\n euiBasicButton\n euiRounded\n euiSizeXS\n type="button"\n aria-label="Close tab button"\n class="eui-u-ml-s">\n <eui-icon-svg\n icon="eui-ecl-close"\n size="l"\n fillColor="grey-75"\n class="eui-tab__close-icon"\n aria-label="Close icon">\n </eui-icon-svg>\n </button>\n }\n </div>\n }\n }\n </div>\n\n <div class="eui-tabs__navigation">\n <div class="eui-tabs__navigation__left-item">\n <button\n (click)="goToLeft()"\n euiButton\n euiIconButton\n euiBasicButton\n type="button"\n [euiDisabled]="navigationLeftButtonDisabled"\n aria-label="Scroll left">\n <eui-icon-svg icon="eui-chevron-back"></eui-icon-svg>\n </button>\n </div>\n <div class="eui-tabs__navigation__right-item">\n <button\n (click)="goToRight()"\n euiButton\n euiIconButton\n euiBasicButton\n type="button"\n [euiDisabled]="navigationRightButtonDisabled"\n aria-label="Scroll right">\n <eui-icon-svg icon="eui-chevron-forward"></eui-icon-svg>\n </button>\n </div>\n </div>\n </div>\n\n <div class="eui-tabs__right-content">\n <ng-content select="euiTabsRightContent"></ng-content>\n </div>\n </div>\n\n @for (tab of tabs; let i = $index; track tab) {\n @if (i === activeTabIndex && tab.templateContent) {\n <div class="eui-tab-content-wrapper" tabindex="0">\n <ng-template [cdkPortalOutlet]="tab.templateContent.templatePortal"></ng-template>\n </div>\n }\n }\n</div>\n', styles: ['.eui-tabs__items{display:flex!important;flex-direction:row;position:relative;width:100%}.eui-tabs .eui-tabs__wrapper--vertical{flex:1 1 25%;flex-direction:column}.eui-tabs .eui-tabs__items-wrapper{display:flex;flex-shrink:0}.eui-tabs .eui-tabs__items{justify-content:space-between;overflow:hidden}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item{background-color:var(--eui-base-color-grey-5);box-shadow:3px 0 6px 1px #00000040;display:none;height:100%;left:0;position:absolute;top:0}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item .eui-button.eui-button--icon-only{height:100%}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item{background-color:var(--eui-base-color-grey-5);box-shadow:-3px 0 6px 1px #00000040;display:none;height:100%;position:absolute;right:0;top:0}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item .eui-button.eui-button--icon-only{height:100%}.eui-tabs .eui-tabs__items--scrolling .eui-tabs__items-wrapper{padding-left:var(--eui-base-spacing-3xl);padding-right:var(--eui-base-spacing-m)}.eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__left-item,.eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__right-item{display:block!important;padding:0 2px 2px}.eui-tabs__right-content{align-items:center;display:flex;margin-left:var(--eui-base-spacing-s)}.eui-tabs__right-content .eui-tabs__right-content-wrapper{display:flex;align-items:center}.eui-tabs .eui-tabs__wrapper--vertical .eui-tab-item__label{align-items:center;display:flex}.eui-tabs .eui-tab-item{align-items:center;background-color:inherit;border:none;border-bottom:3px solid transparent;box-shadow:0 2px 1px #00000080,inset 0 1px 0 var(--eui-base-color-white);color:var(--eui-base-color-grey-90);cursor:pointer;display:flex;padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m) var(--eui-base-spacing-s) var(--eui-base-spacing-m);position:relative;text-align:center;transition:.5s cubic-bezier(.35,0,.25,1)}.eui-tabs .eui-tab-item__label{font:normal normal 400 1rem/1.75rem var(--eui-base-font-family);font-weight:700}.eui-tabs .eui-tab-item__label .eui-tab-item__sublabel{align-items:center;display:flex;font:normal normal 400 .875rem/1.5rem var(--eui-base-font-family)}.eui-tabs .eui-tab-item:focus{border-bottom:3px solid var(--eui-base-color-accent-100);background:var(--eui-base-color-grey-10)}.eui-tabs .eui-tab-item:focus:focus:not([readonly]){outline:2px solid var(--eui-ctx-color-focus)!important;outline-offset:-2px!important;transition:none!important}.eui-tabs .eui-tab-item:focus:focus-visible:not([readonly]){outline:2px solid var(--eui-ctx-color-focus-visible)!important;outline-offset:-2px!important;transition:none!important}.eui-tabs .eui-tab-item:focus [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-ctx-color-focus-visible)!important;outline-offset:-2px!important;transition:none!important}.eui-tabs .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-base-color-grey-10);border-bottom:3px solid var(--eui-base-color-info-130);color:var(--eui-base-color-info-130)}.eui-tabs .eui-tab-item--active{background-color:var(--eui-base-color-info-5);border-bottom:3px solid var(--eui-base-color-info-130);color:var(--eui-base-color-info-130)}.eui-tabs .eui-tab-item--hidden{display:none}.eui-tabs .eui-tab-item .eui-tab__close-icon{cursor:pointer;color:var(--eui-base-color-grey-75);fill:var(--eui-base-color-grey-75);opacity:.7}.eui-tabs .eui-tab-item .eui-tab__close-icon:hover>svg{color:var(--eui-base-color-primary-100);fill:var(--eui-base-color-primary-100);opacity:1}.eui-tabs .eui-tab-item.eui-tab-item--disabled{color:var(--eui-base-color-grey-50);cursor:not-allowed;pointer-events:none}.eui-tabs .eui-tab-item.eui-tab-item--disabled:hover{border-bottom:3px solid transparent;color:var(--eui-base-color-grey-75)}.eui-tabs .eui-tab-content-wrapper{border-top:1px solid var(--eui-base-color-grey-15)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-base-spacing-s) 0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-tabs.eui-tabs--vertical{display:flex;flex-direction:row}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items .eui-tabs__items-wrapper{display:flex;flex-direction:column;height:100%}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal){border-bottom:0;flex:1 1 25%;flex-direction:column;position:relative}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item{border-bottom-color:transparent;border-left:3px solid transparent;box-shadow:0 0 1px #000000a6,inset 0 1px 0 var(--eui-base-color-white)}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item--active,.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:active{border-left:3px solid var(--eui-base-color-primary-100)}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-base-color-grey-5);border-left:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-grey-100)}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus{border-left:3px solid transparent}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus:focus:not([readonly]){outline:2px solid var(--eui-ctx-color-focus)!important;outline-offset:-2px!important;transition:none!important}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus:focus-visible:not([readonly]){outline:2px solid var(--eui-ctx-color-focus-visible)!important;outline-offset:-2px!important;transition:none!important}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-ctx-color-focus-visible)!important;outline-offset:-2px!important;transition:none!important}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper{border-top:none;flex:1 1 75%;flex-direction:column}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-base-spacing-s);position:relative}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-tabs--main-navigation .eui-tabs__items,.eui-tabs--main-navigation .eui-tabs__items-wrapper{width:100%}.eui-tabs--main-navigation .eui-tab-item{flex-grow:1;justify-content:center}.eui-tabs--main-navigation .eui-tab-item--active,.eui-tabs--main-navigation .eui-tab-item :active{background-color:var(--eui-base-color-primary-5)}.eui-tabs .eui-tab-item:hover,.eui-tabs .eui-tab-item.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--primary{color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--primary.eui-tab-item--active,.eui-tabs .eui-tab-item--primary:hover{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--secondary{color:var(--eui-base-color-grey-90)}.eui-tabs .eui-tab-item--secondary.eui-tab-item--active,.eui-tabs .eui-tab-item--secondary:hover{border-bottom-color:var(--eui-base-color-grey-80)}.eui-tabs .eui-tab-item--info{color:var(--eui-base-color-info-100)}.eui-tabs .eui-tab-item--info.eui-tab-item--active,.eui-tabs .eui-tab-item--info:hover{border-bottom-color:var(--eui-base-color-info-100)}.eui-tabs .eui-tab-item--success{color:var(--eui-base-color-success-100)}.eui-tabs .eui-tab-item--success.eui-tab-item--active,.eui-tabs .eui-tab-item--success:hover{border-bottom-color:var(--eui-base-color-success-100)}.eui-tabs .eui-tab-item--warning{color:var(--eui-base-color-warning-140)}.eui-tabs .eui-tab-item--warning.eui-tab-item--active,.eui-tabs .eui-tab-item--warning:hover{border-bottom-color:var(--eui-base-color-warning-100)}.eui-tabs .eui-tab-item--danger{color:var(--eui-base-color-danger-110)}.eui-tabs .eui-tab-item--danger.eui-tab-item--active,.eui-tabs .eui-tab-item--danger:hover{border-bottom-color:var(--eui-base-color-danger-100)}.eui-tabs .eui-tab-item--accent{color:var(--eui-base-color-grey-100)}.eui-tabs .eui-tab-item--accent.eui-tab-item--active,.eui-tabs .eui-tab-item--accent:hover{border-bottom-color:var(--eui-base-color-accent-110)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled{background:none}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--primary{background-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--primary.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--secondary{background-color:var(--eui-base-color-grey-5);color:var(--eui-base-color-grey-90)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--secondary.eui-tab-item--active{border-bottom-color:var(--eui-base-color-info-130)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--info{background-color:var(--eui-base-color-info-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--info.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--success{background-color:var(--eui-base-color-success-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--success.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--warning{background-color:var(--eui-base-color-warning-100);color:var(--eui-base-color-black)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--warning.eui-tab-item--active{border-bottom-color:var(--eui-base-color-info-130)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--danger{background-color:var(--eui-base-color-danger-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--danger.eui-tab-item--active{border-bottom-color:var(--eui-base-color-info-130)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--accent{background-color:var(--eui-base-color-accent-100);color:var(--eui-base-color-black)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--accent.eui-tab-item--active{border-bottom-color:var(--eui-base-color-info-130)}\n'], dependencies: [{ kind: "directive", type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: i4.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i5.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "isLoading", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "directive", type: i6.EuiTooltipDirective, selector: "[euiTooltip]", inputs: ["e2eAttr", "showDelay", "hideDelay", "contentAlignment", "position", "isDisabled", "euiTooltip", "euiTooltipPrimary", "euiTooltipSecondary", "euiTooltipInfo", "euiTooltipSuccess", "euiTooltipWarning", "euiTooltipDanger", "euiTooltipAccent"], exportAs: ["euiTooltip"] }, { kind: "directive", type: i7.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], encapsulation: i04.ViewEncapsulation.None });
520
472
  }
521
473
  };
522
474
  i04.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4", ngImport: i04, type: EuiTabsComponent, decorators: [{
523
475
  type: Component4,
524
- args: [{ selector: "eui-tabs", encapsulation: ViewEncapsulation.None, template: '<div\n #host\n class="eui-tabs {{ styleClass }}"\n [class.eui-tabs--main-navigation]="isMainNavigation"\n [class.eui-tabs--vertical]="isVerticalTabs"\n attr.data-e2e="{{ e2eAttr }}">\n <div class="eui-u-flex" [class.eui-tabs__wrapper--horizontal]="!isVerticalTabs" [class.eui-tabs__wrapper--vertical]="isVerticalTabs">\n <div\n #euiTabsItems\n class="eui-tabs__items"\n [class.eui-tabs__items--horizontal]="!isVerticalTabs"\n [class.eui-tabs__items--scrolling]="scrolling"\n (cdkObserveContent)="onContentChanges()">\n <div #euiTabsItemsWrapper class="eui-tabs__items-wrapper" [attr.data-offset]="currentOffset" role="tablist">\n <ng-container *ngFor="let tab of tabs; let i = index">\n <ng-container *ngIf="tab.isVisible">\n <div\n tabindex="0"\n role="tab"\n class="eui-tab-item"\n [class.eui-tab-item--closable]="tab.isClosable"\n [class.eui-tab-item--active]="activeTabIndex === i"\n [class.eui-tab-item--disabled]="tab.isDisabled"\n [class.eui-tab-item--secondary]="tab.euiSecondary"\n [class.eui-tab-item--primary]="tab.euiPrimary"\n [class.eui-tab-item--info]="tab.euiInfo"\n [class.eui-tab-item--success]="tab.euiSuccess"\n [class.eui-tab-item--warning]="tab.euiWarning"\n [class.eui-tab-item--danger]="tab.euiDanger"\n [class.eui-tab-item--accent]="tab.euiAccent"\n [class.eui-tab-item--background-filled]="tab.hasBackgroundFilled"\n [attr.aria-disabled]="tab.isDisabled"\n (click)="changeTab(i)"\n [euiTooltip]="tab.tooltip"\n (keyup)="onKeyUp($event, i)">\n <div class="eui-tab-item__label">\n <ng-template [cdkPortalOutlet]="tab.templateLabel.templatePortal"></ng-template>\n </div>\n <button\n *ngIf="tab.isClosable"\n (click)="closeTab(i, $event)"\n euiButton\n euiIconButton\n euiBasicButton\n euiRounded\n type="button"\n aria-label="Close tab button"\n class="eui-u-ml-s">\n <eui-icon-svg\n icon="eui-ecl-close"\n fillColor="grey-75"\n class="eui-tab__close-icon"\n aria-label="Close icon">\n </eui-icon-svg>\n </button>\n </div>\n </ng-container>\n </ng-container>\n </div>\n\n <div class="eui-tabs__navigation">\n <div class="eui-tabs__navigation__left-item">\n <button\n (click)="goToLeft()"\n euiButton\n euiIconButton\n euiBasicButton\n type="button"\n [euiDisabled]="navigationLeftButtonDisabled"\n aria-label="Scroll left">\n <eui-icon-svg icon="eui-chevron-back"></eui-icon-svg>\n </button>\n </div>\n <div class="eui-tabs__navigation__right-item">\n <button\n (click)="goToRight()"\n euiButton\n euiIconButton\n euiBasicButton\n type="button"\n [euiDisabled]="navigationRightButtonDisabled"\n aria-label="Scroll right">\n <eui-icon-svg icon="eui-chevron-forward"></eui-icon-svg>\n </button>\n </div>\n </div>\n </div>\n\n <div class="eui-tabs__right-content">\n <ng-content select="euiTabsRightContent"></ng-content>\n </div>\n </div>\n\n <ng-container *ngFor="let tab of tabs; let i = index">\n <div class="eui-tab-content-wrapper" tabindex="0" *ngIf="i === activeTabIndex && tab.templateContent">\n <ng-template [cdkPortalOutlet]="tab.templateContent.templatePortal"></ng-template>\n </div>\n </ng-container>\n</div>\n', styles: ['.eui-tabs__items{display:flex!important;flex-direction:row;position:relative;width:100%}.eui-tabs .eui-tabs__wrapper--vertical{flex:1 1 25%;flex-direction:column}.eui-tabs .eui-tabs__items-wrapper{display:flex;flex-shrink:0}.eui-tabs .eui-tabs__items{justify-content:space-between;overflow:hidden}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item{background-color:var(--eui-base-color-grey-5);box-shadow:3px 0 6px 1px #00000040;display:none;height:100%;left:0;position:absolute;top:0}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item .eui-button.eui-button--icon-only{height:100%}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item{background-color:var(--eui-base-color-grey-5);box-shadow:-3px 0 6px 1px #00000040;display:none;height:100%;position:absolute;right:0;top:0}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item .eui-button.eui-button--icon-only{height:100%}.eui-tabs .eui-tabs__items--scrolling .eui-tabs__items-wrapper{padding-left:var(--eui-base-spacing-3xl);padding-right:var(--eui-base-spacing-m)}.eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__left-item,.eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__right-item{display:block!important;padding:0 2px 2px}.eui-tabs__right-content{align-items:center;display:flex;margin-left:var(--eui-base-spacing-s)}.eui-tabs__right-content .eui-tabs__right-content-wrapper{display:flex;align-items:center}.eui-tabs .eui-tabs__wrapper--vertical .eui-tab-item__label{align-items:center;display:flex}.eui-tabs .eui-tab-item{align-items:center;background-color:inherit;border:none;border-bottom:3px solid transparent;box-shadow:0 2px 1px #00000080,inset 0 1px 0 var(--eui-base-color-white);color:var(--eui-base-color-grey-90);cursor:pointer;display:flex;padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m) var(--eui-base-spacing-s) var(--eui-base-spacing-m);position:relative;text-align:center;transition:.5s cubic-bezier(.35,0,.25,1)}.eui-tabs .eui-tab-item__label{font:normal normal 400 1rem/1.75rem var(--eui-base-font-family);font-weight:700}.eui-tabs .eui-tab-item__label .eui-tab-item__sublabel{align-items:center;display:flex;font:normal normal 400 .875rem/1.5rem var(--eui-base-font-family)}.eui-tabs .eui-tab-item:focus{border-bottom:3px solid var(--eui-base-color-accent-100);background:var(--eui-base-color-grey-10)}.eui-tabs .eui-tab-item:focus:focus:not([readonly]){outline:2px solid var(--eui-ctx-color-focus)!important;outline-offset:-2px!important;transition:none!important}.eui-tabs .eui-tab-item:focus:focus-visible:not([readonly]){outline:2px solid var(--eui-ctx-color-focus-visible)!important;outline-offset:-2px!important;transition:none!important}.eui-tabs .eui-tab-item:focus [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-ctx-color-focus-visible)!important;outline-offset:-2px!important;transition:none!important}.eui-tabs .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-base-color-grey-10);border-bottom:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--active{background-color:var(--eui-base-color-primary-5);border-bottom:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--hidden{display:none}.eui-tabs .eui-tab-item .eui-tab__close-icon{cursor:pointer;color:var(--eui-base-color-grey-75);fill:var(--eui-base-color-grey-75);opacity:.7}.eui-tabs .eui-tab-item .eui-tab__close-icon:hover>svg{color:var(--eui-base-color-primary-100);fill:var(--eui-base-color-primary-100);opacity:1}.eui-tabs .eui-tab-item.eui-tab-item--disabled{color:var(--eui-base-color-grey-50);cursor:not-allowed;pointer-events:none}.eui-tabs .eui-tab-item.eui-tab-item--disabled:hover{border-bottom:3px solid transparent;color:var(--eui-base-color-grey-75)}.eui-tabs .eui-tab-content-wrapper{border-top:1px solid var(--eui-base-color-grey-15)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-base-spacing-s) 0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-tabs.eui-tabs--vertical{display:flex;flex-direction:row}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items .eui-tabs__items-wrapper{display:flex;flex-direction:column;height:100%}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal){border-bottom:0;flex:1 1 25%;flex-direction:column;position:relative}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item{border-bottom-color:transparent;border-left:3px solid transparent;box-shadow:0 0 1px #000000a6,inset 0 1px 0 var(--eui-base-color-white)}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item--active,.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:active{border-left:3px solid var(--eui-base-color-primary-100)}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-base-color-grey-5);border-left:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-grey-100)}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus{border-left:3px solid transparent}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus:focus:not([readonly]){outline:2px solid var(--eui-ctx-color-focus)!important;outline-offset:-2px!important;transition:none!important}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus:focus-visible:not([readonly]){outline:2px solid var(--eui-ctx-color-focus-visible)!important;outline-offset:-2px!important;transition:none!important}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-ctx-color-focus-visible)!important;outline-offset:-2px!important;transition:none!important}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper{border-top:none;flex:1 1 75%;flex-direction:column}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-base-spacing-s);position:relative}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-tabs--main-navigation .eui-tabs__items,.eui-tabs--main-navigation .eui-tabs__items-wrapper{width:100%}.eui-tabs--main-navigation .eui-tab-item{flex-grow:1;justify-content:center}.eui-tabs--main-navigation .eui-tab-item--active,.eui-tabs--main-navigation .eui-tab-item :active{background-color:var(--eui-base-color-primary-5)}.eui-tabs .eui-tab-item:hover,.eui-tabs .eui-tab-item.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--primary{color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--primary.eui-tab-item--active,.eui-tabs .eui-tab-item--primary:hover{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--secondary{color:var(--eui-base-color-grey-90)}.eui-tabs .eui-tab-item--secondary.eui-tab-item--active,.eui-tabs .eui-tab-item--secondary:hover{border-bottom-color:var(--eui-base-color-grey-80)}.eui-tabs .eui-tab-item--info{color:var(--eui-base-color-info-100)}.eui-tabs .eui-tab-item--info.eui-tab-item--active,.eui-tabs .eui-tab-item--info:hover{border-bottom-color:var(--eui-base-color-info-100)}.eui-tabs .eui-tab-item--success{color:var(--eui-base-color-success-100)}.eui-tabs .eui-tab-item--success.eui-tab-item--active,.eui-tabs .eui-tab-item--success:hover{border-bottom-color:var(--eui-base-color-success-100)}.eui-tabs .eui-tab-item--warning{color:var(--eui-base-color-warning-140)}.eui-tabs .eui-tab-item--warning.eui-tab-item--active,.eui-tabs .eui-tab-item--warning:hover{border-bottom-color:var(--eui-base-color-warning-100)}.eui-tabs .eui-tab-item--danger{color:var(--eui-base-color-danger-110)}.eui-tabs .eui-tab-item--danger.eui-tab-item--active,.eui-tabs .eui-tab-item--danger:hover{border-bottom-color:var(--eui-base-color-danger-100)}.eui-tabs .eui-tab-item--accent{color:var(--eui-base-color-grey-100)}.eui-tabs .eui-tab-item--accent.eui-tab-item--active,.eui-tabs .eui-tab-item--accent:hover{border-bottom-color:var(--eui-base-color-accent-110)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled{background:none}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--primary{background-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--primary.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--secondary{background-color:var(--eui-base-color-grey-5);color:var(--eui-base-color-grey-90)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--secondary.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--info{background-color:var(--eui-base-color-info-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--info.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--success{background-color:var(--eui-base-color-success-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--success.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--warning{background-color:var(--eui-base-color-warning-100);color:var(--eui-base-color-black)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--warning.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--danger{background-color:var(--eui-base-color-danger-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--danger.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--accent{background-color:var(--eui-base-color-accent-100);color:var(--eui-base-color-black)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--accent.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}\n'] }]
525
- }], ctorParameters: () => [{ type: i04.ChangeDetectorRef }, { type: i1.Router }, { type: i2.AnimationBuilder }], propDecorators: { styleClass: [{
476
+ args: [{ selector: "eui-tabs", encapsulation: ViewEncapsulation.None, template: '<div\n #host\n class="eui-tabs {{ styleClass }}"\n [class.eui-tabs--main-navigation]="isMainNavigation"\n [class.eui-tabs--vertical]="isVerticalTabs"\n attr.data-e2e="{{ e2eAttr }}">\n <div class="eui-u-flex" [class.eui-tabs__wrapper--horizontal]="!isVerticalTabs" [class.eui-tabs__wrapper--vertical]="isVerticalTabs">\n <div\n #euiTabsItems\n class="eui-tabs__items"\n [class.eui-tabs__items--horizontal]="!isVerticalTabs"\n [class.eui-tabs__items--scrolling]="scrolling"\n (cdkObserveContent)="onContentChanges()">\n <div #euiTabsItemsWrapper class="eui-tabs__items-wrapper" [attr.data-offset]="currentOffset" role="tablist">\n @for (tab of tabs; let i = $index; track tab) {\n @if (tab.isVisible) {\n <div\n tabindex="0"\n role="tab"\n class="eui-tab-item eui-tab-item--{{ tab.baseStatesDirective.euiVariant }}"\n [class.eui-tab-item--closable]="tab.isClosable"\n [class.eui-tab-item--active]="activeTabIndex === i"\n [class.eui-tab-item--disabled]="tab.isDisabled"\n [class.eui-tab-item--background-filled]="tab.hasBackgroundFilled"\n [attr.aria-disabled]="tab.isDisabled"\n (click)="changeTab(i)"\n [euiTooltip]="tab.tooltip"\n (keyup)="onKeyUp($event, i)">\n <div class="eui-tab-item__label">\n <ng-template [cdkPortalOutlet]="tab.templateLabel.templatePortal"></ng-template>\n </div>\n @if (tab.isClosable) {\n <button\n (click)="closeTab(i, $event)"\n euiButton\n euiIconButton\n euiBasicButton\n euiRounded\n euiSizeXS\n type="button"\n aria-label="Close tab button"\n class="eui-u-ml-s">\n <eui-icon-svg\n icon="eui-ecl-close"\n size="l"\n fillColor="grey-75"\n class="eui-tab__close-icon"\n aria-label="Close icon">\n </eui-icon-svg>\n </button>\n }\n </div>\n }\n }\n </div>\n\n <div class="eui-tabs__navigation">\n <div class="eui-tabs__navigation__left-item">\n <button\n (click)="goToLeft()"\n euiButton\n euiIconButton\n euiBasicButton\n type="button"\n [euiDisabled]="navigationLeftButtonDisabled"\n aria-label="Scroll left">\n <eui-icon-svg icon="eui-chevron-back"></eui-icon-svg>\n </button>\n </div>\n <div class="eui-tabs__navigation__right-item">\n <button\n (click)="goToRight()"\n euiButton\n euiIconButton\n euiBasicButton\n type="button"\n [euiDisabled]="navigationRightButtonDisabled"\n aria-label="Scroll right">\n <eui-icon-svg icon="eui-chevron-forward"></eui-icon-svg>\n </button>\n </div>\n </div>\n </div>\n\n <div class="eui-tabs__right-content">\n <ng-content select="euiTabsRightContent"></ng-content>\n </div>\n </div>\n\n @for (tab of tabs; let i = $index; track tab) {\n @if (i === activeTabIndex && tab.templateContent) {\n <div class="eui-tab-content-wrapper" tabindex="0">\n <ng-template [cdkPortalOutlet]="tab.templateContent.templatePortal"></ng-template>\n </div>\n }\n }\n</div>\n', styles: ['.eui-tabs__items{display:flex!important;flex-direction:row;position:relative;width:100%}.eui-tabs .eui-tabs__wrapper--vertical{flex:1 1 25%;flex-direction:column}.eui-tabs .eui-tabs__items-wrapper{display:flex;flex-shrink:0}.eui-tabs .eui-tabs__items{justify-content:space-between;overflow:hidden}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item{background-color:var(--eui-base-color-grey-5);box-shadow:3px 0 6px 1px #00000040;display:none;height:100%;left:0;position:absolute;top:0}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item .eui-button.eui-button--icon-only{height:100%}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item{background-color:var(--eui-base-color-grey-5);box-shadow:-3px 0 6px 1px #00000040;display:none;height:100%;position:absolute;right:0;top:0}.eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item .eui-button.eui-button--icon-only{height:100%}.eui-tabs .eui-tabs__items--scrolling .eui-tabs__items-wrapper{padding-left:var(--eui-base-spacing-3xl);padding-right:var(--eui-base-spacing-m)}.eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__left-item,.eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__right-item{display:block!important;padding:0 2px 2px}.eui-tabs__right-content{align-items:center;display:flex;margin-left:var(--eui-base-spacing-s)}.eui-tabs__right-content .eui-tabs__right-content-wrapper{display:flex;align-items:center}.eui-tabs .eui-tabs__wrapper--vertical .eui-tab-item__label{align-items:center;display:flex}.eui-tabs .eui-tab-item{align-items:center;background-color:inherit;border:none;border-bottom:3px solid transparent;box-shadow:0 2px 1px #00000080,inset 0 1px 0 var(--eui-base-color-white);color:var(--eui-base-color-grey-90);cursor:pointer;display:flex;padding:var(--eui-base-spacing-s) var(--eui-base-spacing-m) var(--eui-base-spacing-s) var(--eui-base-spacing-m);position:relative;text-align:center;transition:.5s cubic-bezier(.35,0,.25,1)}.eui-tabs .eui-tab-item__label{font:normal normal 400 1rem/1.75rem var(--eui-base-font-family);font-weight:700}.eui-tabs .eui-tab-item__label .eui-tab-item__sublabel{align-items:center;display:flex;font:normal normal 400 .875rem/1.5rem var(--eui-base-font-family)}.eui-tabs .eui-tab-item:focus{border-bottom:3px solid var(--eui-base-color-accent-100);background:var(--eui-base-color-grey-10)}.eui-tabs .eui-tab-item:focus:focus:not([readonly]){outline:2px solid var(--eui-ctx-color-focus)!important;outline-offset:-2px!important;transition:none!important}.eui-tabs .eui-tab-item:focus:focus-visible:not([readonly]){outline:2px solid var(--eui-ctx-color-focus-visible)!important;outline-offset:-2px!important;transition:none!important}.eui-tabs .eui-tab-item:focus [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-ctx-color-focus-visible)!important;outline-offset:-2px!important;transition:none!important}.eui-tabs .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-base-color-grey-10);border-bottom:3px solid var(--eui-base-color-info-130);color:var(--eui-base-color-info-130)}.eui-tabs .eui-tab-item--active{background-color:var(--eui-base-color-info-5);border-bottom:3px solid var(--eui-base-color-info-130);color:var(--eui-base-color-info-130)}.eui-tabs .eui-tab-item--hidden{display:none}.eui-tabs .eui-tab-item .eui-tab__close-icon{cursor:pointer;color:var(--eui-base-color-grey-75);fill:var(--eui-base-color-grey-75);opacity:.7}.eui-tabs .eui-tab-item .eui-tab__close-icon:hover>svg{color:var(--eui-base-color-primary-100);fill:var(--eui-base-color-primary-100);opacity:1}.eui-tabs .eui-tab-item.eui-tab-item--disabled{color:var(--eui-base-color-grey-50);cursor:not-allowed;pointer-events:none}.eui-tabs .eui-tab-item.eui-tab-item--disabled:hover{border-bottom:3px solid transparent;color:var(--eui-base-color-grey-75)}.eui-tabs .eui-tab-content-wrapper{border-top:1px solid var(--eui-base-color-grey-15)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-base-spacing-s) 0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tabs .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-tabs.eui-tabs--vertical{display:flex;flex-direction:row}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items .eui-tabs__items-wrapper{display:flex;flex-direction:column;height:100%}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal){border-bottom:0;flex:1 1 25%;flex-direction:column;position:relative}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item{border-bottom-color:transparent;border-left:3px solid transparent;box-shadow:0 0 1px #000000a6,inset 0 1px 0 var(--eui-base-color-white)}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item--active,.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:active{border-left:3px solid var(--eui-base-color-primary-100)}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-base-color-grey-5);border-left:3px solid var(--eui-base-color-primary-100);color:var(--eui-base-color-grey-100)}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus{border-left:3px solid transparent}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus:focus:not([readonly]){outline:2px solid var(--eui-ctx-color-focus)!important;outline-offset:-2px!important;transition:none!important}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus:focus-visible:not([readonly]){outline:2px solid var(--eui-ctx-color-focus-visible)!important;outline-offset:-2px!important;transition:none!important}.eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus [tabindex="0"]:focus:not([readonly]){outline:2px solid var(--eui-ctx-color-focus-visible)!important;outline-offset:-2px!important;transition:none!important}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper{border-top:none;flex:1 1 75%;flex-direction:column}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-base-spacing-s);position:relative}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-base-color-grey-5)}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--eui-base-color-grey-20);border-radius:5rem}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-base-color-grey-50)}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-base-color-grey-5);border-radius:0}.eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-tabs--main-navigation .eui-tabs__items,.eui-tabs--main-navigation .eui-tabs__items-wrapper{width:100%}.eui-tabs--main-navigation .eui-tab-item{flex-grow:1;justify-content:center}.eui-tabs--main-navigation .eui-tab-item--active,.eui-tabs--main-navigation .eui-tab-item :active{background-color:var(--eui-base-color-primary-5)}.eui-tabs .eui-tab-item:hover,.eui-tabs .eui-tab-item.eui-tab-item--active{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--primary{color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--primary.eui-tab-item--active,.eui-tabs .eui-tab-item--primary:hover{border-bottom-color:var(--eui-base-color-primary-100)}.eui-tabs .eui-tab-item--secondary{color:var(--eui-base-color-grey-90)}.eui-tabs .eui-tab-item--secondary.eui-tab-item--active,.eui-tabs .eui-tab-item--secondary:hover{border-bottom-color:var(--eui-base-color-grey-80)}.eui-tabs .eui-tab-item--info{color:var(--eui-base-color-info-100)}.eui-tabs .eui-tab-item--info.eui-tab-item--active,.eui-tabs .eui-tab-item--info:hover{border-bottom-color:var(--eui-base-color-info-100)}.eui-tabs .eui-tab-item--success{color:var(--eui-base-color-success-100)}.eui-tabs .eui-tab-item--success.eui-tab-item--active,.eui-tabs .eui-tab-item--success:hover{border-bottom-color:var(--eui-base-color-success-100)}.eui-tabs .eui-tab-item--warning{color:var(--eui-base-color-warning-140)}.eui-tabs .eui-tab-item--warning.eui-tab-item--active,.eui-tabs .eui-tab-item--warning:hover{border-bottom-color:var(--eui-base-color-warning-100)}.eui-tabs .eui-tab-item--danger{color:var(--eui-base-color-danger-110)}.eui-tabs .eui-tab-item--danger.eui-tab-item--active,.eui-tabs .eui-tab-item--danger:hover{border-bottom-color:var(--eui-base-color-danger-100)}.eui-tabs .eui-tab-item--accent{color:var(--eui-base-color-grey-100)}.eui-tabs .eui-tab-item--accent.eui-tab-item--active,.eui-tabs .eui-tab-item--accent:hover{border-bottom-color:var(--eui-base-color-accent-110)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled{background:none}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--primary{background-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--primary.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--secondary{background-color:var(--eui-base-color-grey-5);color:var(--eui-base-color-grey-90)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--secondary.eui-tab-item--active{border-bottom-color:var(--eui-base-color-info-130)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--info{background-color:var(--eui-base-color-info-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--info.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--success{background-color:var(--eui-base-color-success-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--success.eui-tab-item--active{border-bottom-color:var(--eui-base-color-accent-100)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--warning{background-color:var(--eui-base-color-warning-100);color:var(--eui-base-color-black)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--warning.eui-tab-item--active{border-bottom-color:var(--eui-base-color-info-130)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--danger{background-color:var(--eui-base-color-danger-100);color:var(--eui-base-color-white)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--danger.eui-tab-item--active{border-bottom-color:var(--eui-base-color-info-130)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--accent{background-color:var(--eui-base-color-accent-100);color:var(--eui-base-color-black)}.eui-tabs .eui-tab-item.eui-tab-item--background-filled.eui-tab-item--accent.eui-tab-item--active{border-bottom-color:var(--eui-base-color-info-130)}\n'] }]
477
+ }], ctorParameters: () => [{ type: i04.ChangeDetectorRef }, { type: i12.Router }, { type: i2.AnimationBuilder }], propDecorators: { styleClass: [{
526
478
  type: Input3
527
479
  }], tabs: [{
528
480
  type: Input3
@@ -552,13 +504,17 @@ i04.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-next.4",
552
504
  type: ViewChild3,
553
505
  args: ["host"]
554
506
  }], isMainNavigation: [{
555
- type: Input3
507
+ type: Input3,
508
+ args: [{ transform: booleanAttribute3 }]
556
509
  }], isHandleChangeTab: [{
557
- type: Input3
510
+ type: Input3,
511
+ args: [{ transform: booleanAttribute3 }]
558
512
  }], isSubTabs: [{
559
- type: Input3
513
+ type: Input3,
514
+ args: [{ transform: booleanAttribute3 }]
560
515
  }], isVerticalTabs: [{
561
- type: Input3
516
+ type: Input3,
517
+ args: [{ transform: booleanAttribute3 }]
562
518
  }], onResize: [{
563
519
  type: HostListener,
564
520
  args: ["window:resize", ["$event"]]