@eui/components 19.2.1 → 19.2.2-snapshot-1746624054534

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 (81) hide show
  1. package/directives/eui-tooltip/container/eui-tooltip-container.component.d.ts.map +1 -1
  2. package/docs/components/EuiDiscussionThreadComponent.html +81 -6
  3. package/docs/components/EuiDiscussionThreadItemComponent.html +4 -0
  4. package/docs/components/EuiHeaderUserProfileComponent.html +6 -0
  5. package/docs/components/EuiNavbarComponent.html +0 -4
  6. package/docs/components/EuiNavbarItemComponent.html +4 -0
  7. package/docs/components/EuiTableV2Component.html +1 -1
  8. package/docs/components/EuiTimelineComponent.html +4 -4
  9. package/docs/components/EuiTimelineItemComponent.html +4 -4
  10. package/docs/components/EuiToolbarComponent.html +6 -3
  11. package/docs/components/EuiTooltipContainerComponent.html +0 -4
  12. package/docs/dependencies.html +2 -2
  13. package/docs/js/search/search_index.js +2 -2
  14. package/eui-card/components/eui-card-footer/eui-card-footer.component.d.ts.map +1 -1
  15. package/eui-discussion-thread/eui-discussion-thread-item.component.d.ts.map +1 -1
  16. package/eui-discussion-thread/eui-discussion-thread.component.d.ts +6 -0
  17. package/eui-discussion-thread/eui-discussion-thread.component.d.ts.map +1 -1
  18. package/eui-navbar/eui-navbar-item/eui-navbar-item.component.d.ts.map +1 -1
  19. package/eui-navbar/eui-navbar.component.d.ts.map +1 -1
  20. package/eui-timeline/eui-timeline-item.component.d.ts.map +1 -1
  21. package/eui-timeline/eui-timeline.component.d.ts.map +1 -1
  22. package/fesm2022/eui-components-directives.mjs +5 -5
  23. package/fesm2022/eui-components-directives.mjs.map +1 -1
  24. package/fesm2022/eui-components-eui-alert.mjs +4 -4
  25. package/fesm2022/eui-components-eui-alert.mjs.map +1 -1
  26. package/fesm2022/eui-components-eui-autocomplete.mjs +2 -2
  27. package/fesm2022/eui-components-eui-avatar.mjs +2 -2
  28. package/fesm2022/eui-components-eui-avatar.mjs.map +1 -1
  29. package/fesm2022/eui-components-eui-badge.mjs +2 -2
  30. package/fesm2022/eui-components-eui-badge.mjs.map +1 -1
  31. package/fesm2022/eui-components-eui-block-content.mjs +2 -2
  32. package/fesm2022/eui-components-eui-block-content.mjs.map +1 -1
  33. package/fesm2022/eui-components-eui-block-document.mjs +2 -2
  34. package/fesm2022/eui-components-eui-block-document.mjs.map +1 -1
  35. package/fesm2022/eui-components-eui-button.mjs +2 -2
  36. package/fesm2022/eui-components-eui-button.mjs.map +1 -1
  37. package/fesm2022/eui-components-eui-card.mjs +2 -2
  38. package/fesm2022/eui-components-eui-card.mjs.map +1 -1
  39. package/fesm2022/eui-components-eui-chip.mjs +2 -2
  40. package/fesm2022/eui-components-eui-chip.mjs.map +1 -1
  41. package/fesm2022/eui-components-eui-dashboard-card.mjs +2 -2
  42. package/fesm2022/eui-components-eui-dashboard-card.mjs.map +1 -1
  43. package/fesm2022/eui-components-eui-datepicker.mjs +2 -2
  44. package/fesm2022/eui-components-eui-datepicker.mjs.map +1 -1
  45. package/fesm2022/eui-components-eui-discussion-thread.mjs +18 -7
  46. package/fesm2022/eui-components-eui-discussion-thread.mjs.map +1 -1
  47. package/fesm2022/eui-components-eui-file-upload.mjs +2 -2
  48. package/fesm2022/eui-components-eui-growl.mjs +2 -2
  49. package/fesm2022/eui-components-eui-growl.mjs.map +1 -1
  50. package/fesm2022/eui-components-eui-icon-button.mjs +2 -2
  51. package/fesm2022/eui-components-eui-icon-button.mjs.map +1 -1
  52. package/fesm2022/eui-components-eui-input-checkbox.mjs +2 -2
  53. package/fesm2022/eui-components-eui-input-checkbox.mjs.map +1 -1
  54. package/fesm2022/eui-components-eui-navbar.mjs +6 -10
  55. package/fesm2022/eui-components-eui-navbar.mjs.map +1 -1
  56. package/fesm2022/eui-components-eui-paginator.mjs +2 -2
  57. package/fesm2022/eui-components-eui-paginator.mjs.map +1 -1
  58. package/fesm2022/eui-components-eui-progress-bar.mjs +2 -2
  59. package/fesm2022/eui-components-eui-progress-bar.mjs.map +1 -1
  60. package/fesm2022/eui-components-eui-progress-circle.mjs +2 -2
  61. package/fesm2022/eui-components-eui-progress-circle.mjs.map +1 -1
  62. package/fesm2022/eui-components-eui-slide-toggle.mjs +2 -2
  63. package/fesm2022/eui-components-eui-slide-toggle.mjs.map +1 -1
  64. package/fesm2022/eui-components-eui-table-v2.mjs +2 -2
  65. package/fesm2022/eui-components-eui-table-v2.mjs.map +1 -1
  66. package/fesm2022/eui-components-eui-table.mjs +2 -2
  67. package/fesm2022/eui-components-eui-tabs-v2.mjs +2 -2
  68. package/fesm2022/eui-components-eui-tabs-v2.mjs.map +1 -1
  69. package/fesm2022/eui-components-eui-tabs.mjs +4 -4
  70. package/fesm2022/eui-components-eui-timebar.mjs +2 -2
  71. package/fesm2022/eui-components-eui-timebar.mjs.map +1 -1
  72. package/fesm2022/eui-components-eui-timeline.mjs +4 -4
  73. package/fesm2022/eui-components-eui-timeline.mjs.map +1 -1
  74. package/fesm2022/eui-components-eui-tree-list.mjs +2 -2
  75. package/fesm2022/eui-components-eui-wizard.mjs +4 -4
  76. package/fesm2022/eui-components-eui-wizard.mjs.map +1 -1
  77. package/fesm2022/eui-components-layout.mjs +18 -10
  78. package/fesm2022/eui-components-layout.mjs.map +1 -1
  79. package/layout/eui-header/header-user-profile/header-user-profile.component.d.ts.map +1 -1
  80. package/layout/eui-toolbar/toolbar.component.d.ts.map +1 -1
  81. package/package.json +8 -8
package/fesm2022/eui-components-eui-tabs.mjs CHANGED
@@ -143,7 +143,7 @@ class EuiTabComponent {
143
143
  }
144
144
  }
145
145
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: EuiTabComponent, deps: [{ token: i1.BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
146
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.9", type: EuiTabComponent, isStandalone: true, selector: "eui-tab", inputs: { url: "url", e2eAttr: "e2eAttr", tooltip: "tooltip", isClosable: ["isClosable", "isClosable", booleanAttribute], isVisible: ["isVisible", "isVisible", booleanAttribute], isActive: ["isActive", "isActive", booleanAttribute], isDisabled: ["isDisabled", "isDisabled", booleanAttribute], isHandleCloseOnClose: ["isHandleCloseOnClose", "isHandleCloseOnClose", booleanAttribute] }, 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: i0, template: '<ng-content/>', isInline: true, styles: [".eui-19 .eui-tabs__items{display:flex!important;flex-direction:row;position:relative;width:100%}.eui-19 .eui-tabs .eui-tabs__wrapper--vertical{flex:1 1 25%;flex-direction:column}.eui-19 .eui-tabs .eui-tabs__items-wrapper{display:flex;flex-shrink:0}.eui-19 .eui-tabs .eui-tabs__items{justify-content:space-between;overflow:hidden}.eui-19 .eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item{background-color:var(--eui-c-neutral-min);display:none;height:100%;left:0;position:absolute;top:0}.eui-19 .eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item .eui-button.eui-button--icon-only{height:100%}.eui-19 .eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item{background-color:var(--eui-c-neutral-min);display:none;height:100%;position:absolute;right:0;top:0}.eui-19 .eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item .eui-button.eui-button--icon-only{height:100%}.eui-19 .eui-tabs .eui-tabs__items--scrolling .eui-tabs__items-wrapper{padding-left:var(--eui-s-3xl);padding-right:0}.eui-19 .eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__left-item,.eui-19 .eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__right-item{display:block!important;padding:0 2px 2px}.eui-19 .eui-tabs__right-content{align-items:center;display:flex;margin-left:var(--eui-s-s)}.eui-19 .eui-tabs__right-content .eui-tabs__right-content-wrapper{display:flex;align-items:center}.eui-19 .eui-tabs .eui-tabs__wrapper--vertical .eui-tab-item__label{align-items:center;display:flex}.eui-19 .eui-tabs .eui-tab-item{align-items:center;background-color:inherit;border:var(--eui-bw-none);border-bottom:3px solid transparent;color:var(--eui-c-neutral);cursor:pointer;display:flex;padding:var(--eui-s-s) var(--eui-s-m) var(--eui-s-s) var(--eui-s-m);position:relative;text-align:center}.eui-19 .eui-tabs .eui-tab-item:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-tabs .eui-tab-item__label{font:var(--eui-f-m-bold)}.eui-19 .eui-tabs .eui-tab-item__label .eui-tab-item__sublabel{align-items:center;display:flex;font:var(--eui-f-s-compact)}.eui-19 .eui-tabs .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-c-hover);border-bottom:3px solid var(--eui-c-active-bg)}.eui-19 .eui-tabs .eui-tab-item--active{border-bottom:3px solid var(--eui-c-active)}.eui-19 .eui-tabs .eui-tab-item--active .eui-tab-item__label-text{color:var(--eui-c-active)}.eui-19 .eui-tabs .eui-tab-item--hidden{display:none}.eui-19 .eui-tabs .eui-tab-item.eui-tab-item--disabled{color:var(--eui-c-neutral-lighter);cursor:not-allowed;pointer-events:none}.eui-19 .eui-tabs .eui-tab-item.eui-tab-item--disabled:hover{border-bottom:3px solid transparent;color:var(--eui-c-neutral-light)}.eui-19 .eui-tabs .eui-tab-content-wrapper{border-top:1px solid var(--eui-c-neutral-lightest)}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-s-s) 0 0 0}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-c-neutral-bg-light)}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--_eui-scrollbars-foreground-color);border-radius:5rem}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-neutral-lighter)}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-c-neutral-bg-light);border-radius:0}@-moz-document url-prefix(){.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content{scrollbar-color:var(--eui-c-neutral-lighter) var(--eui-c-neutral-bg-light);scrollbar-width:auto}}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-19 .eui-tabs.eui-tabs--vertical{display:flex;flex-direction:row}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items .eui-tabs__items-wrapper{display:flex;flex-direction:column;height:100%}.eui-19 .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-19 .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}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item--active,.eui-19 .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-c-s-primary-fill)}.eui-19 .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-c-neutral-bg-light);border-left:3px solid var(--eui-c-s-primary-fill)}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper{border-top:none;flex:1 1 75%;flex-direction:column}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-s-s);position:relative}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-c-neutral-bg-light)}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--_eui-scrollbars-foreground-color);border-radius:5rem}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-neutral-lighter)}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-c-neutral-bg-light);border-radius:0}@-moz-document url-prefix(){.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content{scrollbar-color:var(--eui-c-neutral-lighter) var(--eui-c-neutral-bg-light);scrollbar-width:auto}}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-19 .eui-tabs--main-navigation .eui-tabs__items,.eui-19 .eui-tabs--main-navigation .eui-tabs__items-wrapper{width:100%}.eui-19 .eui-tabs--main-navigation .eui-tab-item{flex-grow:1;justify-content:center}.eui-19 .eui-tabs--main-navigation .eui-tab-item--active,.eui-19 .eui-tabs--main-navigation .eui-tab-item :active{background-color:var(--eui-c-active-bg)}.eui-19 .eui-tabs .eui-tab-item:hover,.eui-19 .eui-tabs .eui-tab-item.eui-tab-item--active{border-bottom-color:var(--eui-c-s-primary-fill)}.eui-19 .eui-tabs .eui-tab-item--closable{padding-right:var(--eui-s-xs)}.eui-19 .eui-tabs .eui-tab-item--closable .eui-tab-item__close-button{margin-left:var(--eui-s-2xs)}.eui-19 .eui-tabs .eui-tab-item--primary,.eui-19 .eui-tabs .eui-tab-item--primary .eui-tab-item__label-text{color:var(--eui-c-s-primary)}.eui-19 .eui-tabs .eui-tab-item--secondary,.eui-19 .eui-tabs .eui-tab-item--secondary .eui-tab-item__label-text{color:var(--eui-c-s-secondary)}.eui-19 .eui-tabs .eui-tab-item--info,.eui-19 .eui-tabs .eui-tab-item--info .eui-tab-item__label-text{color:var(--eui-c-s-info)}.eui-19 .eui-tabs .eui-tab-item--success,.eui-19 .eui-tabs .eui-tab-item--success .eui-tab-item__label-text{color:var(--eui-c-s-success)}.eui-19 .eui-tabs .eui-tab-item--warning,.eui-19 .eui-tabs .eui-tab-item--warning .eui-tab-item__label-text{color:var(--eui-c-s-warning)}.eui-19 .eui-tabs .eui-tab-item--danger,.eui-19 .eui-tabs .eui-tab-item--danger .eui-tab-item__label-text{color:var(--eui-c-s-danger)}.eui-19 .eui-tabs .eui-tab-item--accent,.eui-19 .eui-tabs .eui-tab-item--accent .eui-tab-item__label-text{color:var(--eui-c-s-accent)}\n"] }); }
146
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.9", type: EuiTabComponent, isStandalone: true, selector: "eui-tab", inputs: { url: "url", e2eAttr: "e2eAttr", tooltip: "tooltip", isClosable: ["isClosable", "isClosable", booleanAttribute], isVisible: ["isVisible", "isVisible", booleanAttribute], isActive: ["isActive", "isActive", booleanAttribute], isDisabled: ["isDisabled", "isDisabled", booleanAttribute], isHandleCloseOnClose: ["isHandleCloseOnClose", "isHandleCloseOnClose", booleanAttribute] }, 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: i0, template: '<ng-content/>', isInline: true, styles: [".eui-19 .eui-tabs__items{display:flex!important;flex-direction:row;position:relative;width:100%}.eui-19 .eui-tabs .eui-tabs__wrapper--vertical{flex:1 1 25%;flex-direction:column}.eui-19 .eui-tabs .eui-tabs__items-wrapper{display:flex;flex-shrink:0}.eui-19 .eui-tabs .eui-tabs__items{justify-content:space-between;overflow:hidden}.eui-19 .eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item{background-color:var(--eui-c-neutral-min);display:none;height:100%;left:0;position:absolute;top:0}.eui-19 .eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item .eui-button.eui-button--icon-only{height:100%}.eui-19 .eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item{background-color:var(--eui-c-neutral-min);display:none;height:100%;position:absolute;right:0;top:0}.eui-19 .eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item .eui-button.eui-button--icon-only{height:100%}.eui-19 .eui-tabs .eui-tabs__items--scrolling .eui-tabs__items-wrapper{padding-left:var(--eui-s-3xl);padding-right:0}.eui-19 .eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__left-item,.eui-19 .eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__right-item{display:block!important;padding:0 2px 2px}.eui-19 .eui-tabs__right-content{align-items:center;display:flex;margin-left:var(--eui-s-s)}.eui-19 .eui-tabs__right-content .eui-tabs__right-content-wrapper{display:flex;align-items:center}.eui-19 .eui-tabs .eui-tabs__wrapper--vertical .eui-tab-item__label{align-items:center;display:flex}.eui-19 .eui-tabs .eui-tab-item{align-items:center;background-color:inherit;border:var(--eui-bw-none);border-bottom:3px solid transparent;color:var(--eui-c-neutral);cursor:pointer;display:flex;padding:var(--eui-s-s) var(--eui-s-m) var(--eui-s-s) var(--eui-s-m);position:relative;text-align:center}.eui-19 .eui-tabs .eui-tab-item:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-tabs .eui-tab-item__label{font:var(--eui-f-m-bold)}.eui-19 .eui-tabs .eui-tab-item__label .eui-tab-item__sublabel{align-items:center;display:flex;font:var(--eui-f-s-compact)}.eui-19 .eui-tabs .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-c-hover);border-bottom:3px solid var(--eui-c-active-bg)}.eui-19 .eui-tabs .eui-tab-item--active{border-bottom:3px solid var(--eui-c-active)}.eui-19 .eui-tabs .eui-tab-item--active .eui-tab-item__label-text{color:var(--eui-c-active)}.eui-19 .eui-tabs .eui-tab-item--hidden{display:none}.eui-19 .eui-tabs .eui-tab-item.eui-tab-item--disabled{color:var(--eui-c-neutral-lighter);cursor:not-allowed;pointer-events:none}.eui-19 .eui-tabs .eui-tab-item.eui-tab-item--disabled:hover{border-bottom:3px solid transparent;color:var(--eui-c-neutral-light)}.eui-19 .eui-tabs .eui-tab-content-wrapper{border-top:1px solid var(--eui-c-neutral-lightest)}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-s-s) 0 0 0}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-c-neutral-bg-light)}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--_eui-scrollbars-foreground-color);border-radius:5rem}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-neutral-lighter)}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-c-neutral-bg-light);border-radius:0}@-moz-document url-prefix(){.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content{scrollbar-color:var(--eui-c-neutral-lighter) var(--eui-c-neutral-bg-light);scrollbar-width:auto}}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-19 .eui-tabs.eui-tabs--vertical{display:flex;flex-direction:row}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items .eui-tabs__items-wrapper{display:flex;flex-direction:column;height:100%}.eui-19 .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-19 .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}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item--active,.eui-19 .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-c-s-primary-base)}.eui-19 .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-c-neutral-bg-light);border-left:3px solid var(--eui-c-s-primary-base)}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper{border-top:none;flex:1 1 75%;flex-direction:column}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-s-s);position:relative}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-c-neutral-bg-light)}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--_eui-scrollbars-foreground-color);border-radius:5rem}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-neutral-lighter)}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-c-neutral-bg-light);border-radius:0}@-moz-document url-prefix(){.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content{scrollbar-color:var(--eui-c-neutral-lighter) var(--eui-c-neutral-bg-light);scrollbar-width:auto}}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-19 .eui-tabs--main-navigation .eui-tabs__items,.eui-19 .eui-tabs--main-navigation .eui-tabs__items-wrapper{width:100%}.eui-19 .eui-tabs--main-navigation .eui-tab-item{flex-grow:1;justify-content:center}.eui-19 .eui-tabs--main-navigation .eui-tab-item--active,.eui-19 .eui-tabs--main-navigation .eui-tab-item :active{background-color:var(--eui-c-active-bg)}.eui-19 .eui-tabs .eui-tab-item:hover,.eui-19 .eui-tabs .eui-tab-item.eui-tab-item--active{border-bottom-color:var(--eui-c-s-primary-base)}.eui-19 .eui-tabs .eui-tab-item--closable{padding-right:var(--eui-s-xs)}.eui-19 .eui-tabs .eui-tab-item--closable .eui-tab-item__close-button{margin-left:var(--eui-s-2xs)}.eui-19 .eui-tabs .eui-tab-item--primary,.eui-19 .eui-tabs .eui-tab-item--primary .eui-tab-item__label-text{color:var(--eui-c-s-primary)}.eui-19 .eui-tabs .eui-tab-item--secondary,.eui-19 .eui-tabs .eui-tab-item--secondary .eui-tab-item__label-text{color:var(--eui-c-s-secondary)}.eui-19 .eui-tabs .eui-tab-item--info,.eui-19 .eui-tabs .eui-tab-item--info .eui-tab-item__label-text{color:var(--eui-c-s-info)}.eui-19 .eui-tabs .eui-tab-item--success,.eui-19 .eui-tabs .eui-tab-item--success .eui-tab-item__label-text{color:var(--eui-c-s-success)}.eui-19 .eui-tabs .eui-tab-item--warning,.eui-19 .eui-tabs .eui-tab-item--warning .eui-tab-item__label-text{color:var(--eui-c-s-warning)}.eui-19 .eui-tabs .eui-tab-item--danger,.eui-19 .eui-tabs .eui-tab-item--danger .eui-tab-item__label-text{color:var(--eui-c-s-danger)}.eui-19 .eui-tabs .eui-tab-item--accent,.eui-19 .eui-tabs .eui-tab-item--accent .eui-tab-item__label-text{color:var(--eui-c-s-accent)}\n"] }); }
147
147
  }
148
148
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: EuiTabComponent, decorators: [{
149
149
  type: Component,
@@ -162,7 +162,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
162
162
  'euiVariant',
163
163
  ],
164
164
  },
165
- ], styles: [".eui-19 .eui-tabs__items{display:flex!important;flex-direction:row;position:relative;width:100%}.eui-19 .eui-tabs .eui-tabs__wrapper--vertical{flex:1 1 25%;flex-direction:column}.eui-19 .eui-tabs .eui-tabs__items-wrapper{display:flex;flex-shrink:0}.eui-19 .eui-tabs .eui-tabs__items{justify-content:space-between;overflow:hidden}.eui-19 .eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item{background-color:var(--eui-c-neutral-min);display:none;height:100%;left:0;position:absolute;top:0}.eui-19 .eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item .eui-button.eui-button--icon-only{height:100%}.eui-19 .eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item{background-color:var(--eui-c-neutral-min);display:none;height:100%;position:absolute;right:0;top:0}.eui-19 .eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item .eui-button.eui-button--icon-only{height:100%}.eui-19 .eui-tabs .eui-tabs__items--scrolling .eui-tabs__items-wrapper{padding-left:var(--eui-s-3xl);padding-right:0}.eui-19 .eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__left-item,.eui-19 .eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__right-item{display:block!important;padding:0 2px 2px}.eui-19 .eui-tabs__right-content{align-items:center;display:flex;margin-left:var(--eui-s-s)}.eui-19 .eui-tabs__right-content .eui-tabs__right-content-wrapper{display:flex;align-items:center}.eui-19 .eui-tabs .eui-tabs__wrapper--vertical .eui-tab-item__label{align-items:center;display:flex}.eui-19 .eui-tabs .eui-tab-item{align-items:center;background-color:inherit;border:var(--eui-bw-none);border-bottom:3px solid transparent;color:var(--eui-c-neutral);cursor:pointer;display:flex;padding:var(--eui-s-s) var(--eui-s-m) var(--eui-s-s) var(--eui-s-m);position:relative;text-align:center}.eui-19 .eui-tabs .eui-tab-item:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-tabs .eui-tab-item__label{font:var(--eui-f-m-bold)}.eui-19 .eui-tabs .eui-tab-item__label .eui-tab-item__sublabel{align-items:center;display:flex;font:var(--eui-f-s-compact)}.eui-19 .eui-tabs .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-c-hover);border-bottom:3px solid var(--eui-c-active-bg)}.eui-19 .eui-tabs .eui-tab-item--active{border-bottom:3px solid var(--eui-c-active)}.eui-19 .eui-tabs .eui-tab-item--active .eui-tab-item__label-text{color:var(--eui-c-active)}.eui-19 .eui-tabs .eui-tab-item--hidden{display:none}.eui-19 .eui-tabs .eui-tab-item.eui-tab-item--disabled{color:var(--eui-c-neutral-lighter);cursor:not-allowed;pointer-events:none}.eui-19 .eui-tabs .eui-tab-item.eui-tab-item--disabled:hover{border-bottom:3px solid transparent;color:var(--eui-c-neutral-light)}.eui-19 .eui-tabs .eui-tab-content-wrapper{border-top:1px solid var(--eui-c-neutral-lightest)}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-s-s) 0 0 0}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-c-neutral-bg-light)}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--_eui-scrollbars-foreground-color);border-radius:5rem}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-neutral-lighter)}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-c-neutral-bg-light);border-radius:0}@-moz-document url-prefix(){.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content{scrollbar-color:var(--eui-c-neutral-lighter) var(--eui-c-neutral-bg-light);scrollbar-width:auto}}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-19 .eui-tabs.eui-tabs--vertical{display:flex;flex-direction:row}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items .eui-tabs__items-wrapper{display:flex;flex-direction:column;height:100%}.eui-19 .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-19 .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}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item--active,.eui-19 .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-c-s-primary-fill)}.eui-19 .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-c-neutral-bg-light);border-left:3px solid var(--eui-c-s-primary-fill)}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper{border-top:none;flex:1 1 75%;flex-direction:column}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-s-s);position:relative}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-c-neutral-bg-light)}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--_eui-scrollbars-foreground-color);border-radius:5rem}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-neutral-lighter)}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-c-neutral-bg-light);border-radius:0}@-moz-document url-prefix(){.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content{scrollbar-color:var(--eui-c-neutral-lighter) var(--eui-c-neutral-bg-light);scrollbar-width:auto}}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-19 .eui-tabs--main-navigation .eui-tabs__items,.eui-19 .eui-tabs--main-navigation .eui-tabs__items-wrapper{width:100%}.eui-19 .eui-tabs--main-navigation .eui-tab-item{flex-grow:1;justify-content:center}.eui-19 .eui-tabs--main-navigation .eui-tab-item--active,.eui-19 .eui-tabs--main-navigation .eui-tab-item :active{background-color:var(--eui-c-active-bg)}.eui-19 .eui-tabs .eui-tab-item:hover,.eui-19 .eui-tabs .eui-tab-item.eui-tab-item--active{border-bottom-color:var(--eui-c-s-primary-fill)}.eui-19 .eui-tabs .eui-tab-item--closable{padding-right:var(--eui-s-xs)}.eui-19 .eui-tabs .eui-tab-item--closable .eui-tab-item__close-button{margin-left:var(--eui-s-2xs)}.eui-19 .eui-tabs .eui-tab-item--primary,.eui-19 .eui-tabs .eui-tab-item--primary .eui-tab-item__label-text{color:var(--eui-c-s-primary)}.eui-19 .eui-tabs .eui-tab-item--secondary,.eui-19 .eui-tabs .eui-tab-item--secondary .eui-tab-item__label-text{color:var(--eui-c-s-secondary)}.eui-19 .eui-tabs .eui-tab-item--info,.eui-19 .eui-tabs .eui-tab-item--info .eui-tab-item__label-text{color:var(--eui-c-s-info)}.eui-19 .eui-tabs .eui-tab-item--success,.eui-19 .eui-tabs .eui-tab-item--success .eui-tab-item__label-text{color:var(--eui-c-s-success)}.eui-19 .eui-tabs .eui-tab-item--warning,.eui-19 .eui-tabs .eui-tab-item--warning .eui-tab-item__label-text{color:var(--eui-c-s-warning)}.eui-19 .eui-tabs .eui-tab-item--danger,.eui-19 .eui-tabs .eui-tab-item--danger .eui-tab-item__label-text{color:var(--eui-c-s-danger)}.eui-19 .eui-tabs .eui-tab-item--accent,.eui-19 .eui-tabs .eui-tab-item--accent .eui-tab-item__label-text{color:var(--eui-c-s-accent)}\n"] }]
165
+ ], styles: [".eui-19 .eui-tabs__items{display:flex!important;flex-direction:row;position:relative;width:100%}.eui-19 .eui-tabs .eui-tabs__wrapper--vertical{flex:1 1 25%;flex-direction:column}.eui-19 .eui-tabs .eui-tabs__items-wrapper{display:flex;flex-shrink:0}.eui-19 .eui-tabs .eui-tabs__items{justify-content:space-between;overflow:hidden}.eui-19 .eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item{background-color:var(--eui-c-neutral-min);display:none;height:100%;left:0;position:absolute;top:0}.eui-19 .eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item .eui-button.eui-button--icon-only{height:100%}.eui-19 .eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item{background-color:var(--eui-c-neutral-min);display:none;height:100%;position:absolute;right:0;top:0}.eui-19 .eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item .eui-button.eui-button--icon-only{height:100%}.eui-19 .eui-tabs .eui-tabs__items--scrolling .eui-tabs__items-wrapper{padding-left:var(--eui-s-3xl);padding-right:0}.eui-19 .eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__left-item,.eui-19 .eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__right-item{display:block!important;padding:0 2px 2px}.eui-19 .eui-tabs__right-content{align-items:center;display:flex;margin-left:var(--eui-s-s)}.eui-19 .eui-tabs__right-content .eui-tabs__right-content-wrapper{display:flex;align-items:center}.eui-19 .eui-tabs .eui-tabs__wrapper--vertical .eui-tab-item__label{align-items:center;display:flex}.eui-19 .eui-tabs .eui-tab-item{align-items:center;background-color:inherit;border:var(--eui-bw-none);border-bottom:3px solid transparent;color:var(--eui-c-neutral);cursor:pointer;display:flex;padding:var(--eui-s-s) var(--eui-s-m) var(--eui-s-s) var(--eui-s-m);position:relative;text-align:center}.eui-19 .eui-tabs .eui-tab-item:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-tabs .eui-tab-item__label{font:var(--eui-f-m-bold)}.eui-19 .eui-tabs .eui-tab-item__label .eui-tab-item__sublabel{align-items:center;display:flex;font:var(--eui-f-s-compact)}.eui-19 .eui-tabs .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-c-hover);border-bottom:3px solid var(--eui-c-active-bg)}.eui-19 .eui-tabs .eui-tab-item--active{border-bottom:3px solid var(--eui-c-active)}.eui-19 .eui-tabs .eui-tab-item--active .eui-tab-item__label-text{color:var(--eui-c-active)}.eui-19 .eui-tabs .eui-tab-item--hidden{display:none}.eui-19 .eui-tabs .eui-tab-item.eui-tab-item--disabled{color:var(--eui-c-neutral-lighter);cursor:not-allowed;pointer-events:none}.eui-19 .eui-tabs .eui-tab-item.eui-tab-item--disabled:hover{border-bottom:3px solid transparent;color:var(--eui-c-neutral-light)}.eui-19 .eui-tabs .eui-tab-content-wrapper{border-top:1px solid var(--eui-c-neutral-lightest)}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-s-s) 0 0 0}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-c-neutral-bg-light)}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--_eui-scrollbars-foreground-color);border-radius:5rem}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-neutral-lighter)}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-c-neutral-bg-light);border-radius:0}@-moz-document url-prefix(){.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content{scrollbar-color:var(--eui-c-neutral-lighter) var(--eui-c-neutral-bg-light);scrollbar-width:auto}}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-19 .eui-tabs.eui-tabs--vertical{display:flex;flex-direction:row}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items .eui-tabs__items-wrapper{display:flex;flex-direction:column;height:100%}.eui-19 .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-19 .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}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item--active,.eui-19 .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-c-s-primary-base)}.eui-19 .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-c-neutral-bg-light);border-left:3px solid var(--eui-c-s-primary-base)}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper{border-top:none;flex:1 1 75%;flex-direction:column}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-s-s);position:relative}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-c-neutral-bg-light)}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--_eui-scrollbars-foreground-color);border-radius:5rem}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-neutral-lighter)}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-c-neutral-bg-light);border-radius:0}@-moz-document url-prefix(){.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content{scrollbar-color:var(--eui-c-neutral-lighter) var(--eui-c-neutral-bg-light);scrollbar-width:auto}}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-19 .eui-tabs--main-navigation .eui-tabs__items,.eui-19 .eui-tabs--main-navigation .eui-tabs__items-wrapper{width:100%}.eui-19 .eui-tabs--main-navigation .eui-tab-item{flex-grow:1;justify-content:center}.eui-19 .eui-tabs--main-navigation .eui-tab-item--active,.eui-19 .eui-tabs--main-navigation .eui-tab-item :active{background-color:var(--eui-c-active-bg)}.eui-19 .eui-tabs .eui-tab-item:hover,.eui-19 .eui-tabs .eui-tab-item.eui-tab-item--active{border-bottom-color:var(--eui-c-s-primary-base)}.eui-19 .eui-tabs .eui-tab-item--closable{padding-right:var(--eui-s-xs)}.eui-19 .eui-tabs .eui-tab-item--closable .eui-tab-item__close-button{margin-left:var(--eui-s-2xs)}.eui-19 .eui-tabs .eui-tab-item--primary,.eui-19 .eui-tabs .eui-tab-item--primary .eui-tab-item__label-text{color:var(--eui-c-s-primary)}.eui-19 .eui-tabs .eui-tab-item--secondary,.eui-19 .eui-tabs .eui-tab-item--secondary .eui-tab-item__label-text{color:var(--eui-c-s-secondary)}.eui-19 .eui-tabs .eui-tab-item--info,.eui-19 .eui-tabs .eui-tab-item--info .eui-tab-item__label-text{color:var(--eui-c-s-info)}.eui-19 .eui-tabs .eui-tab-item--success,.eui-19 .eui-tabs .eui-tab-item--success .eui-tab-item__label-text{color:var(--eui-c-s-success)}.eui-19 .eui-tabs .eui-tab-item--warning,.eui-19 .eui-tabs .eui-tab-item--warning .eui-tab-item__label-text{color:var(--eui-c-s-warning)}.eui-19 .eui-tabs .eui-tab-item--danger,.eui-19 .eui-tabs .eui-tab-item--danger .eui-tab-item__label-text{color:var(--eui-c-s-danger)}.eui-19 .eui-tabs .eui-tab-item--accent,.eui-19 .eui-tabs .eui-tab-item--accent .eui-tab-item__label-text{color:var(--eui-c-s-accent)}\n"] }]
166
166
  }], ctorParameters: () => [{ type: i1.BaseStatesDirective }], propDecorators: { url: [{
167
167
  type: Input
168
168
  }], e2eAttr: [{
@@ -554,7 +554,7 @@ class EuiTabsComponent {
554
554
  }
555
555
  }
556
556
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: EuiTabsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.Router }, { token: i2.AnimationBuilder }, { token: i0.ElementRef }, { token: i3.EuiAppShellService }], target: i0.ɵɵFactoryTarget.Component }); }
557
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: EuiTabsComponent, isStandalone: true, selector: "eui-tabs", inputs: { tabs: "tabs", activeTabIndex: "activeTabIndex", e2eAttr: "e2eAttr", pathMatch: "pathMatch", isMainNavigation: ["isMainNavigation", "isMainNavigation", booleanAttribute], isHandleChangeTab: ["isHandleChangeTab", "isHandleChangeTab", booleanAttribute], isSubTabs: ["isSubTabs", "isSubTabs", booleanAttribute], isVerticalTabs: ["isVerticalTabs", "isVerticalTabs", booleanAttribute] }, outputs: { tabClose: "tabClose", tabSelect: "tabSelect" }, host: { properties: { "class": "this.elementClass", "attr.data-e2e": "this.e2eAttr" } }, queries: [{ propertyName: "euiTabsRightContentTagDirective", first: true, predicate: i0.forwardRef(() => EuiTabsRightContentTagDirective), descendants: true }, { propertyName: "_tabs", predicate: i0.forwardRef(() => EuiTabComponent) }], viewQueries: [{ propertyName: "euiTabsItems", first: true, predicate: ["euiTabsItems"], descendants: true }, { propertyName: "euiTabsItemsWrapper", first: true, predicate: ["euiTabsItemsWrapper"], descendants: true }, { propertyName: "euiTabLabelItems", predicate: ["euiTabLabelItem"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<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 [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 <eui-icon-button\n class=\"eui-tab-item__close-button\"\n icon=\"close:outline\"\n ariaLabel=\"close tab\"\n (buttonClick)=\"closeTab(i, $event)\"\n euiRounded>\n </eui-icon-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=\"chevron-back:sharp\"></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=\"chevron-forward:sharp\"></eui-icon-svg>\n </button>\n </div>\n </div>\n </div>\n\n @if (euiTabsRightContentTagDirective) {\n <div class=\"eui-tabs__right-content\">\n <ng-content select=\"euiTabsRightContent\"></ng-content>\n </div>\n }\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", styles: [".eui-19 .eui-tabs__items{display:flex!important;flex-direction:row;position:relative;width:100%}.eui-19 .eui-tabs .eui-tabs__wrapper--vertical{flex:1 1 25%;flex-direction:column}.eui-19 .eui-tabs .eui-tabs__items-wrapper{display:flex;flex-shrink:0}.eui-19 .eui-tabs .eui-tabs__items{justify-content:space-between;overflow:hidden}.eui-19 .eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item{background-color:var(--eui-c-neutral-min);display:none;height:100%;left:0;position:absolute;top:0}.eui-19 .eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item .eui-button.eui-button--icon-only{height:100%}.eui-19 .eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item{background-color:var(--eui-c-neutral-min);display:none;height:100%;position:absolute;right:0;top:0}.eui-19 .eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item .eui-button.eui-button--icon-only{height:100%}.eui-19 .eui-tabs .eui-tabs__items--scrolling .eui-tabs__items-wrapper{padding-left:var(--eui-s-3xl);padding-right:0}.eui-19 .eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__left-item,.eui-19 .eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__right-item{display:block!important;padding:0 2px 2px}.eui-19 .eui-tabs__right-content{align-items:center;display:flex;margin-left:var(--eui-s-s)}.eui-19 .eui-tabs__right-content .eui-tabs__right-content-wrapper{display:flex;align-items:center}.eui-19 .eui-tabs .eui-tabs__wrapper--vertical .eui-tab-item__label{align-items:center;display:flex}.eui-19 .eui-tabs .eui-tab-item{align-items:center;background-color:inherit;border:var(--eui-bw-none);border-bottom:3px solid transparent;color:var(--eui-c-neutral);cursor:pointer;display:flex;padding:var(--eui-s-s) var(--eui-s-m) var(--eui-s-s) var(--eui-s-m);position:relative;text-align:center}.eui-19 .eui-tabs .eui-tab-item:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-tabs .eui-tab-item__label{font:var(--eui-f-m-bold)}.eui-19 .eui-tabs .eui-tab-item__label .eui-tab-item__sublabel{align-items:center;display:flex;font:var(--eui-f-s-compact)}.eui-19 .eui-tabs .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-c-hover);border-bottom:3px solid var(--eui-c-active-bg)}.eui-19 .eui-tabs .eui-tab-item--active{border-bottom:3px solid var(--eui-c-active)}.eui-19 .eui-tabs .eui-tab-item--active .eui-tab-item__label-text{color:var(--eui-c-active)}.eui-19 .eui-tabs .eui-tab-item--hidden{display:none}.eui-19 .eui-tabs .eui-tab-item.eui-tab-item--disabled{color:var(--eui-c-neutral-lighter);cursor:not-allowed;pointer-events:none}.eui-19 .eui-tabs .eui-tab-item.eui-tab-item--disabled:hover{border-bottom:3px solid transparent;color:var(--eui-c-neutral-light)}.eui-19 .eui-tabs .eui-tab-content-wrapper{border-top:1px solid var(--eui-c-neutral-lightest)}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-s-s) 0 0 0}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-c-neutral-bg-light)}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--_eui-scrollbars-foreground-color);border-radius:5rem}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-neutral-lighter)}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-c-neutral-bg-light);border-radius:0}@-moz-document url-prefix(){.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content{scrollbar-color:var(--eui-c-neutral-lighter) var(--eui-c-neutral-bg-light);scrollbar-width:auto}}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-19 .eui-tabs.eui-tabs--vertical{display:flex;flex-direction:row}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items .eui-tabs__items-wrapper{display:flex;flex-direction:column;height:100%}.eui-19 .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-19 .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}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item--active,.eui-19 .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-c-s-primary-fill)}.eui-19 .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-c-neutral-bg-light);border-left:3px solid var(--eui-c-s-primary-fill)}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper{border-top:none;flex:1 1 75%;flex-direction:column}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-s-s);position:relative}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-c-neutral-bg-light)}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--_eui-scrollbars-foreground-color);border-radius:5rem}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-neutral-lighter)}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-c-neutral-bg-light);border-radius:0}@-moz-document url-prefix(){.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content{scrollbar-color:var(--eui-c-neutral-lighter) var(--eui-c-neutral-bg-light);scrollbar-width:auto}}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-19 .eui-tabs--main-navigation .eui-tabs__items,.eui-19 .eui-tabs--main-navigation .eui-tabs__items-wrapper{width:100%}.eui-19 .eui-tabs--main-navigation .eui-tab-item{flex-grow:1;justify-content:center}.eui-19 .eui-tabs--main-navigation .eui-tab-item--active,.eui-19 .eui-tabs--main-navigation .eui-tab-item :active{background-color:var(--eui-c-active-bg)}.eui-19 .eui-tabs .eui-tab-item:hover,.eui-19 .eui-tabs .eui-tab-item.eui-tab-item--active{border-bottom-color:var(--eui-c-s-primary-fill)}.eui-19 .eui-tabs .eui-tab-item--closable{padding-right:var(--eui-s-xs)}.eui-19 .eui-tabs .eui-tab-item--closable .eui-tab-item__close-button{margin-left:var(--eui-s-2xs)}.eui-19 .eui-tabs .eui-tab-item--primary,.eui-19 .eui-tabs .eui-tab-item--primary .eui-tab-item__label-text{color:var(--eui-c-s-primary)}.eui-19 .eui-tabs .eui-tab-item--secondary,.eui-19 .eui-tabs .eui-tab-item--secondary .eui-tab-item__label-text{color:var(--eui-c-s-secondary)}.eui-19 .eui-tabs .eui-tab-item--info,.eui-19 .eui-tabs .eui-tab-item--info .eui-tab-item__label-text{color:var(--eui-c-s-info)}.eui-19 .eui-tabs .eui-tab-item--success,.eui-19 .eui-tabs .eui-tab-item--success .eui-tab-item__label-text{color:var(--eui-c-s-success)}.eui-19 .eui-tabs .eui-tab-item--warning,.eui-19 .eui-tabs .eui-tab-item--warning .eui-tab-item__label-text{color:var(--eui-c-s-warning)}.eui-19 .eui-tabs .eui-tab-item--danger,.eui-19 .eui-tabs .eui-tab-item--danger .eui-tab-item__label-text{color:var(--eui-c-s-danger)}.eui-19 .eui-tabs .eui-tab-item--accent,.eui-19 .eui-tabs .eui-tab-item--accent .eui-tab-item__label-text{color:var(--eui-c-s-accent)}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i4.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: EuiTooltipDirective, selector: "[euiTooltip]", inputs: ["e2eAttr", "showDelay", "hideDelay", "contentAlignment", "position", "isDisabled", "euiTooltip", "euiTooltipPrimary", "euiTooltipSecondary", "euiTooltipInfo", "euiTooltipSuccess", "euiTooltipWarning", "euiTooltipDanger", "euiTooltipAccent"], exportAs: ["euiTooltip"] }, { kind: "component", type: i5.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i6.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i7.EuiIconButtonComponent, selector: "eui-icon-button", inputs: ["icon", "iconUrl", "fillColor", "size", "ariaLabel", "tabindex", "hasNoPadding", "hasFocusHoverColor", "hasFocusHoverBg", "euiRounded", "euiDisabled"], outputs: ["buttonClick"] }], encapsulation: i0.ViewEncapsulation.None }); }
557
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: EuiTabsComponent, isStandalone: true, selector: "eui-tabs", inputs: { tabs: "tabs", activeTabIndex: "activeTabIndex", e2eAttr: "e2eAttr", pathMatch: "pathMatch", isMainNavigation: ["isMainNavigation", "isMainNavigation", booleanAttribute], isHandleChangeTab: ["isHandleChangeTab", "isHandleChangeTab", booleanAttribute], isSubTabs: ["isSubTabs", "isSubTabs", booleanAttribute], isVerticalTabs: ["isVerticalTabs", "isVerticalTabs", booleanAttribute] }, outputs: { tabClose: "tabClose", tabSelect: "tabSelect" }, host: { properties: { "class": "this.elementClass", "attr.data-e2e": "this.e2eAttr" } }, queries: [{ propertyName: "euiTabsRightContentTagDirective", first: true, predicate: i0.forwardRef(() => EuiTabsRightContentTagDirective), descendants: true }, { propertyName: "_tabs", predicate: i0.forwardRef(() => EuiTabComponent) }], viewQueries: [{ propertyName: "euiTabsItems", first: true, predicate: ["euiTabsItems"], descendants: true }, { propertyName: "euiTabsItemsWrapper", first: true, predicate: ["euiTabsItemsWrapper"], descendants: true }, { propertyName: "euiTabLabelItems", predicate: ["euiTabLabelItem"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<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 [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 <eui-icon-button\n class=\"eui-tab-item__close-button\"\n icon=\"close:outline\"\n ariaLabel=\"close tab\"\n (buttonClick)=\"closeTab(i, $event)\"\n euiRounded>\n </eui-icon-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=\"chevron-back:sharp\"></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=\"chevron-forward:sharp\"></eui-icon-svg>\n </button>\n </div>\n </div>\n </div>\n\n @if (euiTabsRightContentTagDirective) {\n <div class=\"eui-tabs__right-content\">\n <ng-content select=\"euiTabsRightContent\"></ng-content>\n </div>\n }\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", styles: [".eui-19 .eui-tabs__items{display:flex!important;flex-direction:row;position:relative;width:100%}.eui-19 .eui-tabs .eui-tabs__wrapper--vertical{flex:1 1 25%;flex-direction:column}.eui-19 .eui-tabs .eui-tabs__items-wrapper{display:flex;flex-shrink:0}.eui-19 .eui-tabs .eui-tabs__items{justify-content:space-between;overflow:hidden}.eui-19 .eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item{background-color:var(--eui-c-neutral-min);display:none;height:100%;left:0;position:absolute;top:0}.eui-19 .eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item .eui-button.eui-button--icon-only{height:100%}.eui-19 .eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item{background-color:var(--eui-c-neutral-min);display:none;height:100%;position:absolute;right:0;top:0}.eui-19 .eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item .eui-button.eui-button--icon-only{height:100%}.eui-19 .eui-tabs .eui-tabs__items--scrolling .eui-tabs__items-wrapper{padding-left:var(--eui-s-3xl);padding-right:0}.eui-19 .eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__left-item,.eui-19 .eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__right-item{display:block!important;padding:0 2px 2px}.eui-19 .eui-tabs__right-content{align-items:center;display:flex;margin-left:var(--eui-s-s)}.eui-19 .eui-tabs__right-content .eui-tabs__right-content-wrapper{display:flex;align-items:center}.eui-19 .eui-tabs .eui-tabs__wrapper--vertical .eui-tab-item__label{align-items:center;display:flex}.eui-19 .eui-tabs .eui-tab-item{align-items:center;background-color:inherit;border:var(--eui-bw-none);border-bottom:3px solid transparent;color:var(--eui-c-neutral);cursor:pointer;display:flex;padding:var(--eui-s-s) var(--eui-s-m) var(--eui-s-s) var(--eui-s-m);position:relative;text-align:center}.eui-19 .eui-tabs .eui-tab-item:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-tabs .eui-tab-item__label{font:var(--eui-f-m-bold)}.eui-19 .eui-tabs .eui-tab-item__label .eui-tab-item__sublabel{align-items:center;display:flex;font:var(--eui-f-s-compact)}.eui-19 .eui-tabs .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-c-hover);border-bottom:3px solid var(--eui-c-active-bg)}.eui-19 .eui-tabs .eui-tab-item--active{border-bottom:3px solid var(--eui-c-active)}.eui-19 .eui-tabs .eui-tab-item--active .eui-tab-item__label-text{color:var(--eui-c-active)}.eui-19 .eui-tabs .eui-tab-item--hidden{display:none}.eui-19 .eui-tabs .eui-tab-item.eui-tab-item--disabled{color:var(--eui-c-neutral-lighter);cursor:not-allowed;pointer-events:none}.eui-19 .eui-tabs .eui-tab-item.eui-tab-item--disabled:hover{border-bottom:3px solid transparent;color:var(--eui-c-neutral-light)}.eui-19 .eui-tabs .eui-tab-content-wrapper{border-top:1px solid var(--eui-c-neutral-lightest)}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-s-s) 0 0 0}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-c-neutral-bg-light)}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--_eui-scrollbars-foreground-color);border-radius:5rem}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-neutral-lighter)}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-c-neutral-bg-light);border-radius:0}@-moz-document url-prefix(){.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content{scrollbar-color:var(--eui-c-neutral-lighter) var(--eui-c-neutral-bg-light);scrollbar-width:auto}}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-19 .eui-tabs.eui-tabs--vertical{display:flex;flex-direction:row}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items .eui-tabs__items-wrapper{display:flex;flex-direction:column;height:100%}.eui-19 .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-19 .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}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item--active,.eui-19 .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-c-s-primary-base)}.eui-19 .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-c-neutral-bg-light);border-left:3px solid var(--eui-c-s-primary-base)}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper{border-top:none;flex:1 1 75%;flex-direction:column}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-s-s);position:relative}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-c-neutral-bg-light)}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--_eui-scrollbars-foreground-color);border-radius:5rem}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-neutral-lighter)}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-c-neutral-bg-light);border-radius:0}@-moz-document url-prefix(){.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content{scrollbar-color:var(--eui-c-neutral-lighter) var(--eui-c-neutral-bg-light);scrollbar-width:auto}}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-19 .eui-tabs--main-navigation .eui-tabs__items,.eui-19 .eui-tabs--main-navigation .eui-tabs__items-wrapper{width:100%}.eui-19 .eui-tabs--main-navigation .eui-tab-item{flex-grow:1;justify-content:center}.eui-19 .eui-tabs--main-navigation .eui-tab-item--active,.eui-19 .eui-tabs--main-navigation .eui-tab-item :active{background-color:var(--eui-c-active-bg)}.eui-19 .eui-tabs .eui-tab-item:hover,.eui-19 .eui-tabs .eui-tab-item.eui-tab-item--active{border-bottom-color:var(--eui-c-s-primary-base)}.eui-19 .eui-tabs .eui-tab-item--closable{padding-right:var(--eui-s-xs)}.eui-19 .eui-tabs .eui-tab-item--closable .eui-tab-item__close-button{margin-left:var(--eui-s-2xs)}.eui-19 .eui-tabs .eui-tab-item--primary,.eui-19 .eui-tabs .eui-tab-item--primary .eui-tab-item__label-text{color:var(--eui-c-s-primary)}.eui-19 .eui-tabs .eui-tab-item--secondary,.eui-19 .eui-tabs .eui-tab-item--secondary .eui-tab-item__label-text{color:var(--eui-c-s-secondary)}.eui-19 .eui-tabs .eui-tab-item--info,.eui-19 .eui-tabs .eui-tab-item--info .eui-tab-item__label-text{color:var(--eui-c-s-info)}.eui-19 .eui-tabs .eui-tab-item--success,.eui-19 .eui-tabs .eui-tab-item--success .eui-tab-item__label-text{color:var(--eui-c-s-success)}.eui-19 .eui-tabs .eui-tab-item--warning,.eui-19 .eui-tabs .eui-tab-item--warning .eui-tab-item__label-text{color:var(--eui-c-s-warning)}.eui-19 .eui-tabs .eui-tab-item--danger,.eui-19 .eui-tabs .eui-tab-item--danger .eui-tab-item__label-text{color:var(--eui-c-s-danger)}.eui-19 .eui-tabs .eui-tab-item--accent,.eui-19 .eui-tabs .eui-tab-item--accent .eui-tab-item__label-text{color:var(--eui-c-s-accent)}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i4.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: EuiTooltipDirective, selector: "[euiTooltip]", inputs: ["e2eAttr", "showDelay", "hideDelay", "contentAlignment", "position", "isDisabled", "euiTooltip", "euiTooltipPrimary", "euiTooltipSecondary", "euiTooltipInfo", "euiTooltipSuccess", "euiTooltipWarning", "euiTooltipDanger", "euiTooltipAccent"], exportAs: ["euiTooltip"] }, { kind: "component", type: i5.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i6.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i7.EuiIconButtonComponent, selector: "eui-icon-button", inputs: ["icon", "iconUrl", "fillColor", "size", "ariaLabel", "tabindex", "hasNoPadding", "hasFocusHoverColor", "hasFocusHoverBg", "euiRounded", "euiDisabled"], outputs: ["buttonClick"] }], encapsulation: i0.ViewEncapsulation.None }); }
558
558
  }
559
559
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: EuiTabsComponent, decorators: [{
560
560
  type: Component,
@@ -564,7 +564,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
564
564
  ...EUI_ICON,
565
565
  ...EUI_BUTTON,
566
566
  ...EUI_ICON_BUTTON,
567
- ], template: "<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 [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 <eui-icon-button\n class=\"eui-tab-item__close-button\"\n icon=\"close:outline\"\n ariaLabel=\"close tab\"\n (buttonClick)=\"closeTab(i, $event)\"\n euiRounded>\n </eui-icon-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=\"chevron-back:sharp\"></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=\"chevron-forward:sharp\"></eui-icon-svg>\n </button>\n </div>\n </div>\n </div>\n\n @if (euiTabsRightContentTagDirective) {\n <div class=\"eui-tabs__right-content\">\n <ng-content select=\"euiTabsRightContent\"></ng-content>\n </div>\n }\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", styles: [".eui-19 .eui-tabs__items{display:flex!important;flex-direction:row;position:relative;width:100%}.eui-19 .eui-tabs .eui-tabs__wrapper--vertical{flex:1 1 25%;flex-direction:column}.eui-19 .eui-tabs .eui-tabs__items-wrapper{display:flex;flex-shrink:0}.eui-19 .eui-tabs .eui-tabs__items{justify-content:space-between;overflow:hidden}.eui-19 .eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item{background-color:var(--eui-c-neutral-min);display:none;height:100%;left:0;position:absolute;top:0}.eui-19 .eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item .eui-button.eui-button--icon-only{height:100%}.eui-19 .eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item{background-color:var(--eui-c-neutral-min);display:none;height:100%;position:absolute;right:0;top:0}.eui-19 .eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item .eui-button.eui-button--icon-only{height:100%}.eui-19 .eui-tabs .eui-tabs__items--scrolling .eui-tabs__items-wrapper{padding-left:var(--eui-s-3xl);padding-right:0}.eui-19 .eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__left-item,.eui-19 .eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__right-item{display:block!important;padding:0 2px 2px}.eui-19 .eui-tabs__right-content{align-items:center;display:flex;margin-left:var(--eui-s-s)}.eui-19 .eui-tabs__right-content .eui-tabs__right-content-wrapper{display:flex;align-items:center}.eui-19 .eui-tabs .eui-tabs__wrapper--vertical .eui-tab-item__label{align-items:center;display:flex}.eui-19 .eui-tabs .eui-tab-item{align-items:center;background-color:inherit;border:var(--eui-bw-none);border-bottom:3px solid transparent;color:var(--eui-c-neutral);cursor:pointer;display:flex;padding:var(--eui-s-s) var(--eui-s-m) var(--eui-s-s) var(--eui-s-m);position:relative;text-align:center}.eui-19 .eui-tabs .eui-tab-item:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-tabs .eui-tab-item__label{font:var(--eui-f-m-bold)}.eui-19 .eui-tabs .eui-tab-item__label .eui-tab-item__sublabel{align-items:center;display:flex;font:var(--eui-f-s-compact)}.eui-19 .eui-tabs .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-c-hover);border-bottom:3px solid var(--eui-c-active-bg)}.eui-19 .eui-tabs .eui-tab-item--active{border-bottom:3px solid var(--eui-c-active)}.eui-19 .eui-tabs .eui-tab-item--active .eui-tab-item__label-text{color:var(--eui-c-active)}.eui-19 .eui-tabs .eui-tab-item--hidden{display:none}.eui-19 .eui-tabs .eui-tab-item.eui-tab-item--disabled{color:var(--eui-c-neutral-lighter);cursor:not-allowed;pointer-events:none}.eui-19 .eui-tabs .eui-tab-item.eui-tab-item--disabled:hover{border-bottom:3px solid transparent;color:var(--eui-c-neutral-light)}.eui-19 .eui-tabs .eui-tab-content-wrapper{border-top:1px solid var(--eui-c-neutral-lightest)}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-s-s) 0 0 0}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-c-neutral-bg-light)}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--_eui-scrollbars-foreground-color);border-radius:5rem}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-neutral-lighter)}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-c-neutral-bg-light);border-radius:0}@-moz-document url-prefix(){.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content{scrollbar-color:var(--eui-c-neutral-lighter) var(--eui-c-neutral-bg-light);scrollbar-width:auto}}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-19 .eui-tabs.eui-tabs--vertical{display:flex;flex-direction:row}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items .eui-tabs__items-wrapper{display:flex;flex-direction:column;height:100%}.eui-19 .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-19 .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}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item--active,.eui-19 .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-c-s-primary-fill)}.eui-19 .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-c-neutral-bg-light);border-left:3px solid var(--eui-c-s-primary-fill)}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper{border-top:none;flex:1 1 75%;flex-direction:column}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-s-s);position:relative}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-c-neutral-bg-light)}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--_eui-scrollbars-foreground-color);border-radius:5rem}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-neutral-lighter)}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-c-neutral-bg-light);border-radius:0}@-moz-document url-prefix(){.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content{scrollbar-color:var(--eui-c-neutral-lighter) var(--eui-c-neutral-bg-light);scrollbar-width:auto}}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-19 .eui-tabs--main-navigation .eui-tabs__items,.eui-19 .eui-tabs--main-navigation .eui-tabs__items-wrapper{width:100%}.eui-19 .eui-tabs--main-navigation .eui-tab-item{flex-grow:1;justify-content:center}.eui-19 .eui-tabs--main-navigation .eui-tab-item--active,.eui-19 .eui-tabs--main-navigation .eui-tab-item :active{background-color:var(--eui-c-active-bg)}.eui-19 .eui-tabs .eui-tab-item:hover,.eui-19 .eui-tabs .eui-tab-item.eui-tab-item--active{border-bottom-color:var(--eui-c-s-primary-fill)}.eui-19 .eui-tabs .eui-tab-item--closable{padding-right:var(--eui-s-xs)}.eui-19 .eui-tabs .eui-tab-item--closable .eui-tab-item__close-button{margin-left:var(--eui-s-2xs)}.eui-19 .eui-tabs .eui-tab-item--primary,.eui-19 .eui-tabs .eui-tab-item--primary .eui-tab-item__label-text{color:var(--eui-c-s-primary)}.eui-19 .eui-tabs .eui-tab-item--secondary,.eui-19 .eui-tabs .eui-tab-item--secondary .eui-tab-item__label-text{color:var(--eui-c-s-secondary)}.eui-19 .eui-tabs .eui-tab-item--info,.eui-19 .eui-tabs .eui-tab-item--info .eui-tab-item__label-text{color:var(--eui-c-s-info)}.eui-19 .eui-tabs .eui-tab-item--success,.eui-19 .eui-tabs .eui-tab-item--success .eui-tab-item__label-text{color:var(--eui-c-s-success)}.eui-19 .eui-tabs .eui-tab-item--warning,.eui-19 .eui-tabs .eui-tab-item--warning .eui-tab-item__label-text{color:var(--eui-c-s-warning)}.eui-19 .eui-tabs .eui-tab-item--danger,.eui-19 .eui-tabs .eui-tab-item--danger .eui-tab-item__label-text{color:var(--eui-c-s-danger)}.eui-19 .eui-tabs .eui-tab-item--accent,.eui-19 .eui-tabs .eui-tab-item--accent .eui-tab-item__label-text{color:var(--eui-c-s-accent)}\n"] }]
567
+ ], template: "<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 [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 <eui-icon-button\n class=\"eui-tab-item__close-button\"\n icon=\"close:outline\"\n ariaLabel=\"close tab\"\n (buttonClick)=\"closeTab(i, $event)\"\n euiRounded>\n </eui-icon-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=\"chevron-back:sharp\"></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=\"chevron-forward:sharp\"></eui-icon-svg>\n </button>\n </div>\n </div>\n </div>\n\n @if (euiTabsRightContentTagDirective) {\n <div class=\"eui-tabs__right-content\">\n <ng-content select=\"euiTabsRightContent\"></ng-content>\n </div>\n }\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", styles: [".eui-19 .eui-tabs__items{display:flex!important;flex-direction:row;position:relative;width:100%}.eui-19 .eui-tabs .eui-tabs__wrapper--vertical{flex:1 1 25%;flex-direction:column}.eui-19 .eui-tabs .eui-tabs__items-wrapper{display:flex;flex-shrink:0}.eui-19 .eui-tabs .eui-tabs__items{justify-content:space-between;overflow:hidden}.eui-19 .eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item{background-color:var(--eui-c-neutral-min);display:none;height:100%;left:0;position:absolute;top:0}.eui-19 .eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__left-item .eui-button.eui-button--icon-only{height:100%}.eui-19 .eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item{background-color:var(--eui-c-neutral-min);display:none;height:100%;position:absolute;right:0;top:0}.eui-19 .eui-tabs .eui-tabs__items .eui-tabs__navigation .eui-tabs__navigation__right-item .eui-button.eui-button--icon-only{height:100%}.eui-19 .eui-tabs .eui-tabs__items--scrolling .eui-tabs__items-wrapper{padding-left:var(--eui-s-3xl);padding-right:0}.eui-19 .eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__left-item,.eui-19 .eui-tabs .eui-tabs__items--scrolling .eui-tabs__navigation__right-item{display:block!important;padding:0 2px 2px}.eui-19 .eui-tabs__right-content{align-items:center;display:flex;margin-left:var(--eui-s-s)}.eui-19 .eui-tabs__right-content .eui-tabs__right-content-wrapper{display:flex;align-items:center}.eui-19 .eui-tabs .eui-tabs__wrapper--vertical .eui-tab-item__label{align-items:center;display:flex}.eui-19 .eui-tabs .eui-tab-item{align-items:center;background-color:inherit;border:var(--eui-bw-none);border-bottom:3px solid transparent;color:var(--eui-c-neutral);cursor:pointer;display:flex;padding:var(--eui-s-s) var(--eui-s-m) var(--eui-s-s) var(--eui-s-m);position:relative;text-align:center}.eui-19 .eui-tabs .eui-tab-item:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-tabs .eui-tab-item__label{font:var(--eui-f-m-bold)}.eui-19 .eui-tabs .eui-tab-item__label .eui-tab-item__sublabel{align-items:center;display:flex;font:var(--eui-f-s-compact)}.eui-19 .eui-tabs .eui-tab-item:hover:not(.eui-tab-item--active){background:var(--eui-c-hover);border-bottom:3px solid var(--eui-c-active-bg)}.eui-19 .eui-tabs .eui-tab-item--active{border-bottom:3px solid var(--eui-c-active)}.eui-19 .eui-tabs .eui-tab-item--active .eui-tab-item__label-text{color:var(--eui-c-active)}.eui-19 .eui-tabs .eui-tab-item--hidden{display:none}.eui-19 .eui-tabs .eui-tab-item.eui-tab-item--disabled{color:var(--eui-c-neutral-lighter);cursor:not-allowed;pointer-events:none}.eui-19 .eui-tabs .eui-tab-item.eui-tab-item--disabled:hover{border-bottom:3px solid transparent;color:var(--eui-c-neutral-light)}.eui-19 .eui-tabs .eui-tab-content-wrapper{border-top:1px solid var(--eui-c-neutral-lightest)}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-s-s) 0 0 0}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-c-neutral-bg-light)}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--_eui-scrollbars-foreground-color);border-radius:5rem}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-neutral-lighter)}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-c-neutral-bg-light);border-radius:0}@-moz-document url-prefix(){.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content{scrollbar-color:var(--eui-c-neutral-lighter) var(--eui-c-neutral-bg-light);scrollbar-width:auto}}.eui-19 .eui-tabs .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-19 .eui-tabs.eui-tabs--vertical{display:flex;flex-direction:row}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items .eui-tabs__items-wrapper{display:flex;flex-direction:column;height:100%}.eui-19 .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-19 .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}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tabs__wrapper--vertical .eui-tabs__items:not(.eui-tabs__items--horizontal) .eui-tab-item--active,.eui-19 .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-c-s-primary-base)}.eui-19 .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-c-neutral-bg-light);border-left:3px solid var(--eui-c-s-primary-base)}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper{border-top:none;flex:1 1 75%;flex-direction:column}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content{padding:var(--eui-s-s);position:relative}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar{display:inherit;height:8px;width:8px;background-color:var(--eui-c-neutral-bg-light)}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb{background-color:var(--_eui-scrollbars-foreground-color);border-radius:5rem}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-thumb:hover{background-color:var(--eui-c-neutral-lighter)}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content::-webkit-scrollbar-track{background-color:var(--eui-c-neutral-bg-light);border-radius:0}@-moz-document url-prefix(){.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content{scrollbar-color:var(--eui-c-neutral-lighter) var(--eui-c-neutral-bg-light);scrollbar-width:auto}}.eui-19 .eui-tabs.eui-tabs--vertical .eui-tab-content-wrapper .eui-tab-content.eui-tab-content--no-padding{padding:0}.eui-19 .eui-tabs--main-navigation .eui-tabs__items,.eui-19 .eui-tabs--main-navigation .eui-tabs__items-wrapper{width:100%}.eui-19 .eui-tabs--main-navigation .eui-tab-item{flex-grow:1;justify-content:center}.eui-19 .eui-tabs--main-navigation .eui-tab-item--active,.eui-19 .eui-tabs--main-navigation .eui-tab-item :active{background-color:var(--eui-c-active-bg)}.eui-19 .eui-tabs .eui-tab-item:hover,.eui-19 .eui-tabs .eui-tab-item.eui-tab-item--active{border-bottom-color:var(--eui-c-s-primary-base)}.eui-19 .eui-tabs .eui-tab-item--closable{padding-right:var(--eui-s-xs)}.eui-19 .eui-tabs .eui-tab-item--closable .eui-tab-item__close-button{margin-left:var(--eui-s-2xs)}.eui-19 .eui-tabs .eui-tab-item--primary,.eui-19 .eui-tabs .eui-tab-item--primary .eui-tab-item__label-text{color:var(--eui-c-s-primary)}.eui-19 .eui-tabs .eui-tab-item--secondary,.eui-19 .eui-tabs .eui-tab-item--secondary .eui-tab-item__label-text{color:var(--eui-c-s-secondary)}.eui-19 .eui-tabs .eui-tab-item--info,.eui-19 .eui-tabs .eui-tab-item--info .eui-tab-item__label-text{color:var(--eui-c-s-info)}.eui-19 .eui-tabs .eui-tab-item--success,.eui-19 .eui-tabs .eui-tab-item--success .eui-tab-item__label-text{color:var(--eui-c-s-success)}.eui-19 .eui-tabs .eui-tab-item--warning,.eui-19 .eui-tabs .eui-tab-item--warning .eui-tab-item__label-text{color:var(--eui-c-s-warning)}.eui-19 .eui-tabs .eui-tab-item--danger,.eui-19 .eui-tabs .eui-tab-item--danger .eui-tab-item__label-text{color:var(--eui-c-s-danger)}.eui-19 .eui-tabs .eui-tab-item--accent,.eui-19 .eui-tabs .eui-tab-item--accent .eui-tab-item__label-text{color:var(--eui-c-s-accent)}\n"] }]
568
568
  }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.Router }, { type: i2.AnimationBuilder }, { type: i0.ElementRef }, { type: i3.EuiAppShellService }], propDecorators: { elementClass: [{
569
569
  type: HostBinding,
570
570
  args: ['class']
package/fesm2022/eui-components-eui-timebar.mjs CHANGED
@@ -331,7 +331,7 @@ class EuiTimebarComponent {
331
331
  return firstItem.date.getTime() - secondItem.date.getTime();
332
332
  }
333
333
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: EuiTimebarComponent, deps: [{ token: i1.EuiAppShellService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
334
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: EuiTimebarComponent, isStandalone: true, selector: "eui-timebar", inputs: { e2eAttr: "e2eAttr", markedDate: "markedDate", items: "items", startLabel: "startLabel", endLabel: "endLabel", dateFormat: "dateFormat", isShowLegend: ["isShowLegend", "isShowLegend", booleanAttribute], isShowLegendAsIndex: ["isShowLegendAsIndex", "isShowLegendAsIndex", booleanAttribute], isShowCurrentDateMarker: ["isShowCurrentDateMarker", "isShowCurrentDateMarker", booleanAttribute], isCurrentDateMarkerAlwaysInRange: ["isCurrentDateMarkerAlwaysInRange", "isCurrentDateMarkerAlwaysInRange", booleanAttribute], isGroupOverlappingLabels: ["isGroupOverlappingLabels", "isGroupOverlappingLabels", booleanAttribute] }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"row eui-u-flex\" #container>\n @if(startLabel) {\n <div class=\"col-2 eui-timebar__start-label\">\n {{ startLabel }}\n </div>\n }\n <div class=\"{{timebarColumnClass}} {{ 'col-' + ((startLabel ? -2 : 0) + (endLabel ? -2 : 0) + 12) }}\">\n <div class=\"eui-timebar\" [style.marginBottom.px]=\"extraTimelineLabelSpace\" attr.data-e2e=\"{{ e2eAttr }}\">\n @if(isShowCurrentDateMarker) {\n <div\n class=\"eui-timebar__current-progress\"\n [style.width.%]=\"currentPerc >= 100 ? 100 : currentPerc\"></div>\n }\n @if(markedDate) {\n <div class=\"eui-timebar__current-progress\" [style.width.%]=\"markedPerc >= 100 ? 100 : markedPerc\"></div>\n }\n\n @for (item of itemsUI; let i = $index; track i) {\n @if(!item.isGrouped) {\n <div\n class=\"eui-timebar__step\"\n [ngClass]=\"item.stepTypeClass\"\n [style.left.%]=\"item.perc\"\n [class.eui-timebar__step--with-current-date-marker]=\"isShowCurrentDateMarker || markedDate\">\n @if(!isMobile) {\n <div class=\"eui-timebar__step-date-item\" [class.eui-timebar__step-date-item--with-end-date]=\"item.groupEndDate\">\n @if(item.groupEndDate) {\n <span\n class=\"eui-timebar__grouped__step {{\n item.stepTypeClass ? 'eui-timebar__step--' + item.stepTypeClass : ''}}\">\n {{ item.groupEndDate | date: dateFormat: null: (locale.getState() | async).id }}\n </span>\n }\n <span\n class=\"{{ item.tooltipColor ? 'eui-timebar__step--' + item.tooltipColor : '' }}\"\n [class.eui-timebar__grouped__step]=\"item.groupEndDate\">\n {{ item.item.date | date: dateFormat: null: (locale.getState() | async).id }}\n </span>\n </div>\n }\n @if(!isShowLegendGenerated) {\n <div [style.left.%]=\"!isMobile ? item.perc : null\" class=\"eui-timebar__step-label\">\n @if(!item.groupLabel) {\n <span title=\"{{ item.item.label }}\">{{ item.item.label }}</span>\n }\n @if(item.groupLabel) {\n <span title=\"{{ item.groupLabel }}\">{{ item.groupLabel }}</span>\n }\n </div>\n }\n @if(isShowLegendGenerated && isShowLegendAsIndexGenerated) {\n <div\n [style.left.%]=\"!isMobile ? item.perc : null\"\n class=\"eui-timebar__step-label\">\n {{ !item.groupLabel ? i + 1 : item.groupLabel }}\n </div>\n }\n </div>\n }\n }\n\n @if(isShowCurrentDateMarker) {\n <div\n class=\"eui-timebar__current-date-marker\"\n [style.left.%]=\"currentPerc\"\n title=\"{{ currentDate | date: dateFormat: null: (locale.getState() | async).id }}\">\n <eui-icon-svg icon=\"location\" set=\"sharp\" size=\"m\"></eui-icon-svg>\n </div>\n <div class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"currentPerc\">\n <eui-icon-svg icon=\"ellipse:sharp\" size=\"s\"></eui-icon-svg>\n </div>\n }\n @if(markedDate) {\n <div\n class=\"eui-timebar__current-date-marker\"\n [style.left.%]=\"markedPerc\"\n title=\"{{ markedDate | date: dateFormat: null: (locale.getState() | async).id }}\">\n <eui-icon-svg icon=\"location\" set=\"sharp\" size=\"m\"></eui-icon-svg>\n </div>\n <div class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"markedPerc\">\n <eui-icon-svg icon=\"ellipse:sharp\" size=\"s\"></eui-icon-svg>\n </div>\n }\n </div>\n </div>\n @if(endLabel) {\n <div class=\"col-2 eui-timebar__end-label\">\n {{ endLabel }}\n </div>\n }\n</div>\n<div class=\"row eui-u-flex-justify-content-center\">\n <div class=\"{{timebarColumnClass}} {{ 'col-md-' + ((startLabel ? -2 : 0) + (endLabel ? -2 : 0) + 12) }}\">\n @if (isShowLegendGenerated || isSomeStepsAreGrouped) {\n <div class=\"eui-timebar__legend\">\n @for (item of itemsUI; let i = $index; track i){\n @if(isShowLegendGenerated) {\n <div class=\"eui-timebar__legend-item\">\n @if(!isShowLegendAsIndexGenerated) {\n <div class=\"eui-timebar__legend-item-icon\">\n <eui-icon-svg icon=\"ellipse:sharp\" size=\"s\" fillColor=\"{{ item.item.stepType }}\"></eui-icon-svg>\n </div>\n } @else {\n <div class=\"eui-timebar__legend-item-index-wrapper\">\n <eui-badge euiSizeL euiPrimary>{{ i + 1 }}</eui-badge>\n </div>\n }\n <div class=\"eui-timebar__legend-item-label\">\n @if(isMobile) {\n <strong>{{ item.item.date | date: dateFormat: null: (locale.getState() | async).id }}</strong> -\n }\n {{ item.item.label }}\n </div>\n </div>\n }\n @if(!isShowLegendGenerated && (item.groupLabel || item.isGrouped)) {\n <div class=\"eui-timebar__legend-item\">\n <div class=\"eui-timebar__legend-item-index-wrapper\">\n <eui-badge euiSizeL euiPrimary>{{ item.groupIndex }}</eui-badge>\n </div>\n <div class=\"eui-timebar__legend-item-label\">\n <strong>{{ item.item.date | date: dateFormat: null: (locale.getState() | async).id }}</strong> - {{ item.item.label }}\n </div>\n </div>\n }\n }\n </div>\n }\n </div>\n</div>\n", styles: [".eui-19 .eui-timebar{border-bottom:2px solid var(--eui-c-neutral-lightest);margin:6rem 3rem;padding:5px;position:relative}.eui-19 .eui-timebar__step{border:7px solid var(--eui-c-s-secondary);border-radius:var(--eui-br-max);height:14px;position:absolute;width:14px}.eui-19 .eui-timebar__step-date-item{background-color:var(--eui-c-s-secondary-bg);color:var(--eui-c-s-secondary-on-bg);border:1px solid var(--eui-c-s-secondary-border-outline);border-radius:var(--eui-br-max);max-width:8rem;min-width:6rem;padding:var(--eui-s-2xs);position:absolute;text-align:center;top:-2.5rem;transform:rotate(65deg);transform-origin:50% -175%;white-space:normal;font:var(--eui-f-s)}.eui-19 .eui-timebar__step-date-item--with-end-date{left:2.5rem;top:-1.75rem}.eui-19 .eui-timebar__step--with-current-date-marker.hint--top:before,.eui-19 .eui-timebar__step--with-current-date-marker.hint--top:after{bottom:25px}.eui-19 .eui-timebar__current-progress{border-bottom:3px solid var(--eui-c-s-primary-fill);padding-top:5px;position:absolute}.eui-19 .eui-timebar__current-date-marker{color:var(--eui-c-s-danger-fill);margin-left:-2px;position:absolute;top:calc(-1 * var(--eui-s-m) - var(--eui-s-2xs))}.eui-19 .eui-timebar__current-date-marker-step{bottom:calc(-1 * var(--eui-s-m) - 2px);color:var(--eui-c-s-danger-fill);position:absolute}.eui-19 .eui-timebar__start-label,.eui-19 .eui-timebar__end-label{margin-top:6.5rem;font:var(--eui-f-s-bold)}.eui-19 .eui-timebar__start-label{text-align:right}.eui-19 .eui-timebar__step-date-item--with-end-date{margin:0;padding:0}.eui-19 .eui-timebar__step-label{margin-left:-4rem;margin-top:.7rem;overflow:hidden;position:absolute;text-align:center;width:8rem}.eui-19 .eui-timebar__legend{margin-left:var(--eui-s-s);margin-top:3rem}.eui-19 .eui-timebar__legend-item{align-items:center;display:flex;padding:var(--eui-s-xs) var(--eui-s-xs) var(--eui-s-xs) 0;width:100%}.eui-19 .eui-timebar__legend-item-label{flex:1}.eui-19 .eui-timebar__legend-item-index-wrapper{padding:var(--eui-s-xs) var(--eui-s-s)}.eui-19 .eui-timebar__grouped__step{border-radius:var(--eui-br-m);display:block;padding:3px 8px}.eui-19 .eui-timebar__grouped__step.eui-timebar__step--info{background-color:var(--eui-c-s-info-bg)}.eui-19 .eui-timebar__grouped__step.eui-timebar__step--success{background-color:var(--eui-c-s-success-bg)}.eui-19 .eui-timebar__grouped__step.eui-timebar__step--warning{background-color:var(--eui-c-s-warning-bg)}.eui-19 .eui-timebar__grouped__step.eui-timebar__step--danger{background-color:var(--eui-c-s-danger-bg)}.eui-19 .eui-timebar__step--info{border-color:var(--eui-c-s-info-fill)}.eui-19 .eui-timebar__step--info .eui-timebar__step-date-item{background-color:var(--eui-c-s-info-bg);color:var(--eui-c-s-info-on-bg);border:1px solid var(--eui-c-s-info-border-outline)}.eui-19 .eui-timebar__step--success{border-color:var(--eui-c-s-success-fill)}.eui-19 .eui-timebar__step--success .eui-timebar__step-date-item{background-color:var(--eui-c-s-success-bg);color:var(--eui-c-s-success-on-bg);border:1px solid var(--eui-c-s-success-border-outline)}.eui-19 .eui-timebar__step--warning{border-color:var(--eui-c-s-warning-fill)}.eui-19 .eui-timebar__step--warning .eui-timebar__step-date-item{background-color:var(--eui-c-s-warning-bg);color:var(--eui-c-s-warning-on-bg);border:1px solid var(--eui-c-s-warning-border-outline)}.eui-19 .eui-timebar__step--danger{border-color:var(--eui-c-s-danger-fill)}.eui-19 .eui-timebar__step--danger .eui-timebar__step-date-item{background-color:var(--eui-c-s-danger-bg);color:var(--eui-c-s-danger-on-bg);border:1px solid var(--eui-c-s-danger-border-outline)}.eui-19 .eui-timebar__legend-item-icon{color:var(--eui-c-s-primary);fill:var(--eui-c-s-primary);width:var(--eui-s-3xl);height:var(--eui-s-3xl)}.eui-19 .eui-timebar__legend-item-icon--info{color:var(--eui-c-s-info)}.eui-19 .eui-timebar__legend-item-icon--success{color:var(--eui-c-s-success)}.eui-19 .eui-timebar__legend-item-icon--warning{color:var(--eui-c-s-warning)}.eui-19 .eui-timebar__legend-item-icon--danger{color:var(--eui-c-s-danger)}@media screen and (max-width: 767px){.eui-19 .eui-timebar{margin:5rem var(--eui-s-m)}.eui-19 .eui-timebar__legend{margin-bottom:var(--eui-s-l);margin-left:18px}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "component", type: i2.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i3.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label", "maxCharCount", "charReplacement", "euiIconBadge", "euiDottedBadge"] }], encapsulation: i0.ViewEncapsulation.None }); }
334
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: EuiTimebarComponent, isStandalone: true, selector: "eui-timebar", inputs: { e2eAttr: "e2eAttr", markedDate: "markedDate", items: "items", startLabel: "startLabel", endLabel: "endLabel", dateFormat: "dateFormat", isShowLegend: ["isShowLegend", "isShowLegend", booleanAttribute], isShowLegendAsIndex: ["isShowLegendAsIndex", "isShowLegendAsIndex", booleanAttribute], isShowCurrentDateMarker: ["isShowCurrentDateMarker", "isShowCurrentDateMarker", booleanAttribute], isCurrentDateMarkerAlwaysInRange: ["isCurrentDateMarkerAlwaysInRange", "isCurrentDateMarkerAlwaysInRange", booleanAttribute], isGroupOverlappingLabels: ["isGroupOverlappingLabels", "isGroupOverlappingLabels", booleanAttribute] }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"row eui-u-flex\" #container>\n @if(startLabel) {\n <div class=\"col-2 eui-timebar__start-label\">\n {{ startLabel }}\n </div>\n }\n <div class=\"{{timebarColumnClass}} {{ 'col-' + ((startLabel ? -2 : 0) + (endLabel ? -2 : 0) + 12) }}\">\n <div class=\"eui-timebar\" [style.marginBottom.px]=\"extraTimelineLabelSpace\" attr.data-e2e=\"{{ e2eAttr }}\">\n @if(isShowCurrentDateMarker) {\n <div\n class=\"eui-timebar__current-progress\"\n [style.width.%]=\"currentPerc >= 100 ? 100 : currentPerc\"></div>\n }\n @if(markedDate) {\n <div class=\"eui-timebar__current-progress\" [style.width.%]=\"markedPerc >= 100 ? 100 : markedPerc\"></div>\n }\n\n @for (item of itemsUI; let i = $index; track i) {\n @if(!item.isGrouped) {\n <div\n class=\"eui-timebar__step\"\n [ngClass]=\"item.stepTypeClass\"\n [style.left.%]=\"item.perc\"\n [class.eui-timebar__step--with-current-date-marker]=\"isShowCurrentDateMarker || markedDate\">\n @if(!isMobile) {\n <div class=\"eui-timebar__step-date-item\" [class.eui-timebar__step-date-item--with-end-date]=\"item.groupEndDate\">\n @if(item.groupEndDate) {\n <span\n class=\"eui-timebar__grouped__step {{\n item.stepTypeClass ? 'eui-timebar__step--' + item.stepTypeClass : ''}}\">\n {{ item.groupEndDate | date: dateFormat: null: (locale.getState() | async).id }}\n </span>\n }\n <span\n class=\"{{ item.tooltipColor ? 'eui-timebar__step--' + item.tooltipColor : '' }}\"\n [class.eui-timebar__grouped__step]=\"item.groupEndDate\">\n {{ item.item.date | date: dateFormat: null: (locale.getState() | async).id }}\n </span>\n </div>\n }\n @if(!isShowLegendGenerated) {\n <div [style.left.%]=\"!isMobile ? item.perc : null\" class=\"eui-timebar__step-label\">\n @if(!item.groupLabel) {\n <span title=\"{{ item.item.label }}\">{{ item.item.label }}</span>\n }\n @if(item.groupLabel) {\n <span title=\"{{ item.groupLabel }}\">{{ item.groupLabel }}</span>\n }\n </div>\n }\n @if(isShowLegendGenerated && isShowLegendAsIndexGenerated) {\n <div\n [style.left.%]=\"!isMobile ? item.perc : null\"\n class=\"eui-timebar__step-label\">\n {{ !item.groupLabel ? i + 1 : item.groupLabel }}\n </div>\n }\n </div>\n }\n }\n\n @if(isShowCurrentDateMarker) {\n <div\n class=\"eui-timebar__current-date-marker\"\n [style.left.%]=\"currentPerc\"\n title=\"{{ currentDate | date: dateFormat: null: (locale.getState() | async).id }}\">\n <eui-icon-svg icon=\"location\" set=\"sharp\" size=\"m\"></eui-icon-svg>\n </div>\n <div class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"currentPerc\">\n <eui-icon-svg icon=\"ellipse:sharp\" size=\"s\"></eui-icon-svg>\n </div>\n }\n @if(markedDate) {\n <div\n class=\"eui-timebar__current-date-marker\"\n [style.left.%]=\"markedPerc\"\n title=\"{{ markedDate | date: dateFormat: null: (locale.getState() | async).id }}\">\n <eui-icon-svg icon=\"location\" set=\"sharp\" size=\"m\"></eui-icon-svg>\n </div>\n <div class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"markedPerc\">\n <eui-icon-svg icon=\"ellipse:sharp\" size=\"s\"></eui-icon-svg>\n </div>\n }\n </div>\n </div>\n @if(endLabel) {\n <div class=\"col-2 eui-timebar__end-label\">\n {{ endLabel }}\n </div>\n }\n</div>\n<div class=\"row eui-u-flex-justify-content-center\">\n <div class=\"{{timebarColumnClass}} {{ 'col-md-' + ((startLabel ? -2 : 0) + (endLabel ? -2 : 0) + 12) }}\">\n @if (isShowLegendGenerated || isSomeStepsAreGrouped) {\n <div class=\"eui-timebar__legend\">\n @for (item of itemsUI; let i = $index; track i){\n @if(isShowLegendGenerated) {\n <div class=\"eui-timebar__legend-item\">\n @if(!isShowLegendAsIndexGenerated) {\n <div class=\"eui-timebar__legend-item-icon\">\n <eui-icon-svg icon=\"ellipse:sharp\" size=\"s\" fillColor=\"{{ item.item.stepType }}\"></eui-icon-svg>\n </div>\n } @else {\n <div class=\"eui-timebar__legend-item-index-wrapper\">\n <eui-badge euiSizeL euiPrimary>{{ i + 1 }}</eui-badge>\n </div>\n }\n <div class=\"eui-timebar__legend-item-label\">\n @if(isMobile) {\n <strong>{{ item.item.date | date: dateFormat: null: (locale.getState() | async).id }}</strong> -\n }\n {{ item.item.label }}\n </div>\n </div>\n }\n @if(!isShowLegendGenerated && (item.groupLabel || item.isGrouped)) {\n <div class=\"eui-timebar__legend-item\">\n <div class=\"eui-timebar__legend-item-index-wrapper\">\n <eui-badge euiSizeL euiPrimary>{{ item.groupIndex }}</eui-badge>\n </div>\n <div class=\"eui-timebar__legend-item-label\">\n <strong>{{ item.item.date | date: dateFormat: null: (locale.getState() | async).id }}</strong> - {{ item.item.label }}\n </div>\n </div>\n }\n }\n </div>\n }\n </div>\n</div>\n", styles: [".eui-19 .eui-timebar{border-bottom:2px solid var(--eui-c-neutral-lightest);margin:6rem 3rem;padding:5px;position:relative}.eui-19 .eui-timebar__step{border:7px solid var(--eui-c-s-secondary);border-radius:var(--eui-br-max);height:14px;position:absolute;width:14px}.eui-19 .eui-timebar__step-date-item{background-color:var(--eui-c-s-secondary-surface-light);color:var(--eui-c-s-secondary-on-surface-light);border:1px solid var(--eui-c-s-secondary-border);border-radius:var(--eui-br-max);max-width:8rem;min-width:6rem;padding:var(--eui-s-2xs);position:absolute;text-align:center;top:-2.5rem;transform:rotate(65deg);transform-origin:50% -175%;white-space:normal;font:var(--eui-f-s)}.eui-19 .eui-timebar__step-date-item--with-end-date{left:2.5rem;top:-1.75rem}.eui-19 .eui-timebar__step--with-current-date-marker.hint--top:before,.eui-19 .eui-timebar__step--with-current-date-marker.hint--top:after{bottom:25px}.eui-19 .eui-timebar__current-progress{border-bottom:3px solid var(--eui-c-s-primary-base);padding-top:5px;position:absolute}.eui-19 .eui-timebar__current-date-marker{color:var(--eui-c-s-danger-base);margin-left:-2px;position:absolute;top:calc(-1 * var(--eui-s-m) - var(--eui-s-2xs))}.eui-19 .eui-timebar__current-date-marker-step{bottom:calc(-1 * var(--eui-s-m) - 2px);color:var(--eui-c-s-danger-base);position:absolute}.eui-19 .eui-timebar__start-label,.eui-19 .eui-timebar__end-label{margin-top:6.5rem;font:var(--eui-f-s-bold)}.eui-19 .eui-timebar__start-label{text-align:right}.eui-19 .eui-timebar__step-date-item--with-end-date{margin:0;padding:0}.eui-19 .eui-timebar__step-label{margin-left:-4rem;margin-top:.7rem;overflow:hidden;position:absolute;text-align:center;width:8rem}.eui-19 .eui-timebar__legend{margin-left:var(--eui-s-s);margin-top:3rem}.eui-19 .eui-timebar__legend-item{align-items:center;display:flex;padding:var(--eui-s-xs) var(--eui-s-xs) var(--eui-s-xs) 0;width:100%}.eui-19 .eui-timebar__legend-item-label{flex:1}.eui-19 .eui-timebar__legend-item-index-wrapper{padding:var(--eui-s-xs) var(--eui-s-s)}.eui-19 .eui-timebar__grouped__step{border-radius:var(--eui-br-m);display:block;padding:3px 8px}.eui-19 .eui-timebar__grouped__step.eui-timebar__step--info{background-color:var(--eui-c-s-info-surface-light)}.eui-19 .eui-timebar__grouped__step.eui-timebar__step--success{background-color:var(--eui-c-s-success-surface-light)}.eui-19 .eui-timebar__grouped__step.eui-timebar__step--warning{background-color:var(--eui-c-s-warning-surface-light)}.eui-19 .eui-timebar__grouped__step.eui-timebar__step--danger{background-color:var(--eui-c-s-danger-surface-light)}.eui-19 .eui-timebar__step--info{border-color:var(--eui-c-s-info-base)}.eui-19 .eui-timebar__step--info .eui-timebar__step-date-item{background-color:var(--eui-c-s-info-surface-light);color:var(--eui-c-s-info-on-surface-light);border:1px solid var(--eui-c-s-info-border)}.eui-19 .eui-timebar__step--success{border-color:var(--eui-c-s-success-base)}.eui-19 .eui-timebar__step--success .eui-timebar__step-date-item{background-color:var(--eui-c-s-success-surface-light);color:var(--eui-c-s-success-on-surface-light);border:1px solid var(--eui-c-s-success-border)}.eui-19 .eui-timebar__step--warning{border-color:var(--eui-c-s-warning-base)}.eui-19 .eui-timebar__step--warning .eui-timebar__step-date-item{background-color:var(--eui-c-s-warning-surface-light);color:var(--eui-c-s-warning-on-surface-light);border:1px solid var(--eui-c-s-warning-border)}.eui-19 .eui-timebar__step--danger{border-color:var(--eui-c-s-danger-base)}.eui-19 .eui-timebar__step--danger .eui-timebar__step-date-item{background-color:var(--eui-c-s-danger-surface-light);color:var(--eui-c-s-danger-on-surface-light);border:1px solid var(--eui-c-s-danger-border)}.eui-19 .eui-timebar__legend-item-icon{color:var(--eui-c-s-primary);fill:var(--eui-c-s-primary);width:var(--eui-s-3xl);height:var(--eui-s-3xl)}.eui-19 .eui-timebar__legend-item-icon--info{color:var(--eui-c-s-info)}.eui-19 .eui-timebar__legend-item-icon--success{color:var(--eui-c-s-success)}.eui-19 .eui-timebar__legend-item-icon--warning{color:var(--eui-c-s-warning)}.eui-19 .eui-timebar__legend-item-icon--danger{color:var(--eui-c-s-danger)}@media screen and (max-width: 767px){.eui-19 .eui-timebar{margin:5rem var(--eui-s-m)}.eui-19 .eui-timebar__legend{margin-bottom:var(--eui-s-l);margin-left:18px}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "component", type: i2.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i3.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label", "maxCharCount", "charReplacement", "euiIconBadge", "euiDottedBadge"] }], encapsulation: i0.ViewEncapsulation.None }); }
335
335
  }
336
336
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: EuiTimebarComponent, decorators: [{
337
337
  type: Component,
@@ -341,7 +341,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
341
341
  DatePipe,
342
342
  ...EUI_ICON,
343
343
  ...EUI_BADGE,
344
- ], template: "<div class=\"row eui-u-flex\" #container>\n @if(startLabel) {\n <div class=\"col-2 eui-timebar__start-label\">\n {{ startLabel }}\n </div>\n }\n <div class=\"{{timebarColumnClass}} {{ 'col-' + ((startLabel ? -2 : 0) + (endLabel ? -2 : 0) + 12) }}\">\n <div class=\"eui-timebar\" [style.marginBottom.px]=\"extraTimelineLabelSpace\" attr.data-e2e=\"{{ e2eAttr }}\">\n @if(isShowCurrentDateMarker) {\n <div\n class=\"eui-timebar__current-progress\"\n [style.width.%]=\"currentPerc >= 100 ? 100 : currentPerc\"></div>\n }\n @if(markedDate) {\n <div class=\"eui-timebar__current-progress\" [style.width.%]=\"markedPerc >= 100 ? 100 : markedPerc\"></div>\n }\n\n @for (item of itemsUI; let i = $index; track i) {\n @if(!item.isGrouped) {\n <div\n class=\"eui-timebar__step\"\n [ngClass]=\"item.stepTypeClass\"\n [style.left.%]=\"item.perc\"\n [class.eui-timebar__step--with-current-date-marker]=\"isShowCurrentDateMarker || markedDate\">\n @if(!isMobile) {\n <div class=\"eui-timebar__step-date-item\" [class.eui-timebar__step-date-item--with-end-date]=\"item.groupEndDate\">\n @if(item.groupEndDate) {\n <span\n class=\"eui-timebar__grouped__step {{\n item.stepTypeClass ? 'eui-timebar__step--' + item.stepTypeClass : ''}}\">\n {{ item.groupEndDate | date: dateFormat: null: (locale.getState() | async).id }}\n </span>\n }\n <span\n class=\"{{ item.tooltipColor ? 'eui-timebar__step--' + item.tooltipColor : '' }}\"\n [class.eui-timebar__grouped__step]=\"item.groupEndDate\">\n {{ item.item.date | date: dateFormat: null: (locale.getState() | async).id }}\n </span>\n </div>\n }\n @if(!isShowLegendGenerated) {\n <div [style.left.%]=\"!isMobile ? item.perc : null\" class=\"eui-timebar__step-label\">\n @if(!item.groupLabel) {\n <span title=\"{{ item.item.label }}\">{{ item.item.label }}</span>\n }\n @if(item.groupLabel) {\n <span title=\"{{ item.groupLabel }}\">{{ item.groupLabel }}</span>\n }\n </div>\n }\n @if(isShowLegendGenerated && isShowLegendAsIndexGenerated) {\n <div\n [style.left.%]=\"!isMobile ? item.perc : null\"\n class=\"eui-timebar__step-label\">\n {{ !item.groupLabel ? i + 1 : item.groupLabel }}\n </div>\n }\n </div>\n }\n }\n\n @if(isShowCurrentDateMarker) {\n <div\n class=\"eui-timebar__current-date-marker\"\n [style.left.%]=\"currentPerc\"\n title=\"{{ currentDate | date: dateFormat: null: (locale.getState() | async).id }}\">\n <eui-icon-svg icon=\"location\" set=\"sharp\" size=\"m\"></eui-icon-svg>\n </div>\n <div class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"currentPerc\">\n <eui-icon-svg icon=\"ellipse:sharp\" size=\"s\"></eui-icon-svg>\n </div>\n }\n @if(markedDate) {\n <div\n class=\"eui-timebar__current-date-marker\"\n [style.left.%]=\"markedPerc\"\n title=\"{{ markedDate | date: dateFormat: null: (locale.getState() | async).id }}\">\n <eui-icon-svg icon=\"location\" set=\"sharp\" size=\"m\"></eui-icon-svg>\n </div>\n <div class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"markedPerc\">\n <eui-icon-svg icon=\"ellipse:sharp\" size=\"s\"></eui-icon-svg>\n </div>\n }\n </div>\n </div>\n @if(endLabel) {\n <div class=\"col-2 eui-timebar__end-label\">\n {{ endLabel }}\n </div>\n }\n</div>\n<div class=\"row eui-u-flex-justify-content-center\">\n <div class=\"{{timebarColumnClass}} {{ 'col-md-' + ((startLabel ? -2 : 0) + (endLabel ? -2 : 0) + 12) }}\">\n @if (isShowLegendGenerated || isSomeStepsAreGrouped) {\n <div class=\"eui-timebar__legend\">\n @for (item of itemsUI; let i = $index; track i){\n @if(isShowLegendGenerated) {\n <div class=\"eui-timebar__legend-item\">\n @if(!isShowLegendAsIndexGenerated) {\n <div class=\"eui-timebar__legend-item-icon\">\n <eui-icon-svg icon=\"ellipse:sharp\" size=\"s\" fillColor=\"{{ item.item.stepType }}\"></eui-icon-svg>\n </div>\n } @else {\n <div class=\"eui-timebar__legend-item-index-wrapper\">\n <eui-badge euiSizeL euiPrimary>{{ i + 1 }}</eui-badge>\n </div>\n }\n <div class=\"eui-timebar__legend-item-label\">\n @if(isMobile) {\n <strong>{{ item.item.date | date: dateFormat: null: (locale.getState() | async).id }}</strong> -\n }\n {{ item.item.label }}\n </div>\n </div>\n }\n @if(!isShowLegendGenerated && (item.groupLabel || item.isGrouped)) {\n <div class=\"eui-timebar__legend-item\">\n <div class=\"eui-timebar__legend-item-index-wrapper\">\n <eui-badge euiSizeL euiPrimary>{{ item.groupIndex }}</eui-badge>\n </div>\n <div class=\"eui-timebar__legend-item-label\">\n <strong>{{ item.item.date | date: dateFormat: null: (locale.getState() | async).id }}</strong> - {{ item.item.label }}\n </div>\n </div>\n }\n }\n </div>\n }\n </div>\n</div>\n", styles: [".eui-19 .eui-timebar{border-bottom:2px solid var(--eui-c-neutral-lightest);margin:6rem 3rem;padding:5px;position:relative}.eui-19 .eui-timebar__step{border:7px solid var(--eui-c-s-secondary);border-radius:var(--eui-br-max);height:14px;position:absolute;width:14px}.eui-19 .eui-timebar__step-date-item{background-color:var(--eui-c-s-secondary-bg);color:var(--eui-c-s-secondary-on-bg);border:1px solid var(--eui-c-s-secondary-border-outline);border-radius:var(--eui-br-max);max-width:8rem;min-width:6rem;padding:var(--eui-s-2xs);position:absolute;text-align:center;top:-2.5rem;transform:rotate(65deg);transform-origin:50% -175%;white-space:normal;font:var(--eui-f-s)}.eui-19 .eui-timebar__step-date-item--with-end-date{left:2.5rem;top:-1.75rem}.eui-19 .eui-timebar__step--with-current-date-marker.hint--top:before,.eui-19 .eui-timebar__step--with-current-date-marker.hint--top:after{bottom:25px}.eui-19 .eui-timebar__current-progress{border-bottom:3px solid var(--eui-c-s-primary-fill);padding-top:5px;position:absolute}.eui-19 .eui-timebar__current-date-marker{color:var(--eui-c-s-danger-fill);margin-left:-2px;position:absolute;top:calc(-1 * var(--eui-s-m) - var(--eui-s-2xs))}.eui-19 .eui-timebar__current-date-marker-step{bottom:calc(-1 * var(--eui-s-m) - 2px);color:var(--eui-c-s-danger-fill);position:absolute}.eui-19 .eui-timebar__start-label,.eui-19 .eui-timebar__end-label{margin-top:6.5rem;font:var(--eui-f-s-bold)}.eui-19 .eui-timebar__start-label{text-align:right}.eui-19 .eui-timebar__step-date-item--with-end-date{margin:0;padding:0}.eui-19 .eui-timebar__step-label{margin-left:-4rem;margin-top:.7rem;overflow:hidden;position:absolute;text-align:center;width:8rem}.eui-19 .eui-timebar__legend{margin-left:var(--eui-s-s);margin-top:3rem}.eui-19 .eui-timebar__legend-item{align-items:center;display:flex;padding:var(--eui-s-xs) var(--eui-s-xs) var(--eui-s-xs) 0;width:100%}.eui-19 .eui-timebar__legend-item-label{flex:1}.eui-19 .eui-timebar__legend-item-index-wrapper{padding:var(--eui-s-xs) var(--eui-s-s)}.eui-19 .eui-timebar__grouped__step{border-radius:var(--eui-br-m);display:block;padding:3px 8px}.eui-19 .eui-timebar__grouped__step.eui-timebar__step--info{background-color:var(--eui-c-s-info-bg)}.eui-19 .eui-timebar__grouped__step.eui-timebar__step--success{background-color:var(--eui-c-s-success-bg)}.eui-19 .eui-timebar__grouped__step.eui-timebar__step--warning{background-color:var(--eui-c-s-warning-bg)}.eui-19 .eui-timebar__grouped__step.eui-timebar__step--danger{background-color:var(--eui-c-s-danger-bg)}.eui-19 .eui-timebar__step--info{border-color:var(--eui-c-s-info-fill)}.eui-19 .eui-timebar__step--info .eui-timebar__step-date-item{background-color:var(--eui-c-s-info-bg);color:var(--eui-c-s-info-on-bg);border:1px solid var(--eui-c-s-info-border-outline)}.eui-19 .eui-timebar__step--success{border-color:var(--eui-c-s-success-fill)}.eui-19 .eui-timebar__step--success .eui-timebar__step-date-item{background-color:var(--eui-c-s-success-bg);color:var(--eui-c-s-success-on-bg);border:1px solid var(--eui-c-s-success-border-outline)}.eui-19 .eui-timebar__step--warning{border-color:var(--eui-c-s-warning-fill)}.eui-19 .eui-timebar__step--warning .eui-timebar__step-date-item{background-color:var(--eui-c-s-warning-bg);color:var(--eui-c-s-warning-on-bg);border:1px solid var(--eui-c-s-warning-border-outline)}.eui-19 .eui-timebar__step--danger{border-color:var(--eui-c-s-danger-fill)}.eui-19 .eui-timebar__step--danger .eui-timebar__step-date-item{background-color:var(--eui-c-s-danger-bg);color:var(--eui-c-s-danger-on-bg);border:1px solid var(--eui-c-s-danger-border-outline)}.eui-19 .eui-timebar__legend-item-icon{color:var(--eui-c-s-primary);fill:var(--eui-c-s-primary);width:var(--eui-s-3xl);height:var(--eui-s-3xl)}.eui-19 .eui-timebar__legend-item-icon--info{color:var(--eui-c-s-info)}.eui-19 .eui-timebar__legend-item-icon--success{color:var(--eui-c-s-success)}.eui-19 .eui-timebar__legend-item-icon--warning{color:var(--eui-c-s-warning)}.eui-19 .eui-timebar__legend-item-icon--danger{color:var(--eui-c-s-danger)}@media screen and (max-width: 767px){.eui-19 .eui-timebar{margin:5rem var(--eui-s-m)}.eui-19 .eui-timebar__legend{margin-bottom:var(--eui-s-l);margin-left:18px}}\n"] }]
344
+ ], template: "<div class=\"row eui-u-flex\" #container>\n @if(startLabel) {\n <div class=\"col-2 eui-timebar__start-label\">\n {{ startLabel }}\n </div>\n }\n <div class=\"{{timebarColumnClass}} {{ 'col-' + ((startLabel ? -2 : 0) + (endLabel ? -2 : 0) + 12) }}\">\n <div class=\"eui-timebar\" [style.marginBottom.px]=\"extraTimelineLabelSpace\" attr.data-e2e=\"{{ e2eAttr }}\">\n @if(isShowCurrentDateMarker) {\n <div\n class=\"eui-timebar__current-progress\"\n [style.width.%]=\"currentPerc >= 100 ? 100 : currentPerc\"></div>\n }\n @if(markedDate) {\n <div class=\"eui-timebar__current-progress\" [style.width.%]=\"markedPerc >= 100 ? 100 : markedPerc\"></div>\n }\n\n @for (item of itemsUI; let i = $index; track i) {\n @if(!item.isGrouped) {\n <div\n class=\"eui-timebar__step\"\n [ngClass]=\"item.stepTypeClass\"\n [style.left.%]=\"item.perc\"\n [class.eui-timebar__step--with-current-date-marker]=\"isShowCurrentDateMarker || markedDate\">\n @if(!isMobile) {\n <div class=\"eui-timebar__step-date-item\" [class.eui-timebar__step-date-item--with-end-date]=\"item.groupEndDate\">\n @if(item.groupEndDate) {\n <span\n class=\"eui-timebar__grouped__step {{\n item.stepTypeClass ? 'eui-timebar__step--' + item.stepTypeClass : ''}}\">\n {{ item.groupEndDate | date: dateFormat: null: (locale.getState() | async).id }}\n </span>\n }\n <span\n class=\"{{ item.tooltipColor ? 'eui-timebar__step--' + item.tooltipColor : '' }}\"\n [class.eui-timebar__grouped__step]=\"item.groupEndDate\">\n {{ item.item.date | date: dateFormat: null: (locale.getState() | async).id }}\n </span>\n </div>\n }\n @if(!isShowLegendGenerated) {\n <div [style.left.%]=\"!isMobile ? item.perc : null\" class=\"eui-timebar__step-label\">\n @if(!item.groupLabel) {\n <span title=\"{{ item.item.label }}\">{{ item.item.label }}</span>\n }\n @if(item.groupLabel) {\n <span title=\"{{ item.groupLabel }}\">{{ item.groupLabel }}</span>\n }\n </div>\n }\n @if(isShowLegendGenerated && isShowLegendAsIndexGenerated) {\n <div\n [style.left.%]=\"!isMobile ? item.perc : null\"\n class=\"eui-timebar__step-label\">\n {{ !item.groupLabel ? i + 1 : item.groupLabel }}\n </div>\n }\n </div>\n }\n }\n\n @if(isShowCurrentDateMarker) {\n <div\n class=\"eui-timebar__current-date-marker\"\n [style.left.%]=\"currentPerc\"\n title=\"{{ currentDate | date: dateFormat: null: (locale.getState() | async).id }}\">\n <eui-icon-svg icon=\"location\" set=\"sharp\" size=\"m\"></eui-icon-svg>\n </div>\n <div class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"currentPerc\">\n <eui-icon-svg icon=\"ellipse:sharp\" size=\"s\"></eui-icon-svg>\n </div>\n }\n @if(markedDate) {\n <div\n class=\"eui-timebar__current-date-marker\"\n [style.left.%]=\"markedPerc\"\n title=\"{{ markedDate | date: dateFormat: null: (locale.getState() | async).id }}\">\n <eui-icon-svg icon=\"location\" set=\"sharp\" size=\"m\"></eui-icon-svg>\n </div>\n <div class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"markedPerc\">\n <eui-icon-svg icon=\"ellipse:sharp\" size=\"s\"></eui-icon-svg>\n </div>\n }\n </div>\n </div>\n @if(endLabel) {\n <div class=\"col-2 eui-timebar__end-label\">\n {{ endLabel }}\n </div>\n }\n</div>\n<div class=\"row eui-u-flex-justify-content-center\">\n <div class=\"{{timebarColumnClass}} {{ 'col-md-' + ((startLabel ? -2 : 0) + (endLabel ? -2 : 0) + 12) }}\">\n @if (isShowLegendGenerated || isSomeStepsAreGrouped) {\n <div class=\"eui-timebar__legend\">\n @for (item of itemsUI; let i = $index; track i){\n @if(isShowLegendGenerated) {\n <div class=\"eui-timebar__legend-item\">\n @if(!isShowLegendAsIndexGenerated) {\n <div class=\"eui-timebar__legend-item-icon\">\n <eui-icon-svg icon=\"ellipse:sharp\" size=\"s\" fillColor=\"{{ item.item.stepType }}\"></eui-icon-svg>\n </div>\n } @else {\n <div class=\"eui-timebar__legend-item-index-wrapper\">\n <eui-badge euiSizeL euiPrimary>{{ i + 1 }}</eui-badge>\n </div>\n }\n <div class=\"eui-timebar__legend-item-label\">\n @if(isMobile) {\n <strong>{{ item.item.date | date: dateFormat: null: (locale.getState() | async).id }}</strong> -\n }\n {{ item.item.label }}\n </div>\n </div>\n }\n @if(!isShowLegendGenerated && (item.groupLabel || item.isGrouped)) {\n <div class=\"eui-timebar__legend-item\">\n <div class=\"eui-timebar__legend-item-index-wrapper\">\n <eui-badge euiSizeL euiPrimary>{{ item.groupIndex }}</eui-badge>\n </div>\n <div class=\"eui-timebar__legend-item-label\">\n <strong>{{ item.item.date | date: dateFormat: null: (locale.getState() | async).id }}</strong> - {{ item.item.label }}\n </div>\n </div>\n }\n }\n </div>\n }\n </div>\n</div>\n", styles: [".eui-19 .eui-timebar{border-bottom:2px solid var(--eui-c-neutral-lightest);margin:6rem 3rem;padding:5px;position:relative}.eui-19 .eui-timebar__step{border:7px solid var(--eui-c-s-secondary);border-radius:var(--eui-br-max);height:14px;position:absolute;width:14px}.eui-19 .eui-timebar__step-date-item{background-color:var(--eui-c-s-secondary-surface-light);color:var(--eui-c-s-secondary-on-surface-light);border:1px solid var(--eui-c-s-secondary-border);border-radius:var(--eui-br-max);max-width:8rem;min-width:6rem;padding:var(--eui-s-2xs);position:absolute;text-align:center;top:-2.5rem;transform:rotate(65deg);transform-origin:50% -175%;white-space:normal;font:var(--eui-f-s)}.eui-19 .eui-timebar__step-date-item--with-end-date{left:2.5rem;top:-1.75rem}.eui-19 .eui-timebar__step--with-current-date-marker.hint--top:before,.eui-19 .eui-timebar__step--with-current-date-marker.hint--top:after{bottom:25px}.eui-19 .eui-timebar__current-progress{border-bottom:3px solid var(--eui-c-s-primary-base);padding-top:5px;position:absolute}.eui-19 .eui-timebar__current-date-marker{color:var(--eui-c-s-danger-base);margin-left:-2px;position:absolute;top:calc(-1 * var(--eui-s-m) - var(--eui-s-2xs))}.eui-19 .eui-timebar__current-date-marker-step{bottom:calc(-1 * var(--eui-s-m) - 2px);color:var(--eui-c-s-danger-base);position:absolute}.eui-19 .eui-timebar__start-label,.eui-19 .eui-timebar__end-label{margin-top:6.5rem;font:var(--eui-f-s-bold)}.eui-19 .eui-timebar__start-label{text-align:right}.eui-19 .eui-timebar__step-date-item--with-end-date{margin:0;padding:0}.eui-19 .eui-timebar__step-label{margin-left:-4rem;margin-top:.7rem;overflow:hidden;position:absolute;text-align:center;width:8rem}.eui-19 .eui-timebar__legend{margin-left:var(--eui-s-s);margin-top:3rem}.eui-19 .eui-timebar__legend-item{align-items:center;display:flex;padding:var(--eui-s-xs) var(--eui-s-xs) var(--eui-s-xs) 0;width:100%}.eui-19 .eui-timebar__legend-item-label{flex:1}.eui-19 .eui-timebar__legend-item-index-wrapper{padding:var(--eui-s-xs) var(--eui-s-s)}.eui-19 .eui-timebar__grouped__step{border-radius:var(--eui-br-m);display:block;padding:3px 8px}.eui-19 .eui-timebar__grouped__step.eui-timebar__step--info{background-color:var(--eui-c-s-info-surface-light)}.eui-19 .eui-timebar__grouped__step.eui-timebar__step--success{background-color:var(--eui-c-s-success-surface-light)}.eui-19 .eui-timebar__grouped__step.eui-timebar__step--warning{background-color:var(--eui-c-s-warning-surface-light)}.eui-19 .eui-timebar__grouped__step.eui-timebar__step--danger{background-color:var(--eui-c-s-danger-surface-light)}.eui-19 .eui-timebar__step--info{border-color:var(--eui-c-s-info-base)}.eui-19 .eui-timebar__step--info .eui-timebar__step-date-item{background-color:var(--eui-c-s-info-surface-light);color:var(--eui-c-s-info-on-surface-light);border:1px solid var(--eui-c-s-info-border)}.eui-19 .eui-timebar__step--success{border-color:var(--eui-c-s-success-base)}.eui-19 .eui-timebar__step--success .eui-timebar__step-date-item{background-color:var(--eui-c-s-success-surface-light);color:var(--eui-c-s-success-on-surface-light);border:1px solid var(--eui-c-s-success-border)}.eui-19 .eui-timebar__step--warning{border-color:var(--eui-c-s-warning-base)}.eui-19 .eui-timebar__step--warning .eui-timebar__step-date-item{background-color:var(--eui-c-s-warning-surface-light);color:var(--eui-c-s-warning-on-surface-light);border:1px solid var(--eui-c-s-warning-border)}.eui-19 .eui-timebar__step--danger{border-color:var(--eui-c-s-danger-base)}.eui-19 .eui-timebar__step--danger .eui-timebar__step-date-item{background-color:var(--eui-c-s-danger-surface-light);color:var(--eui-c-s-danger-on-surface-light);border:1px solid var(--eui-c-s-danger-border)}.eui-19 .eui-timebar__legend-item-icon{color:var(--eui-c-s-primary);fill:var(--eui-c-s-primary);width:var(--eui-s-3xl);height:var(--eui-s-3xl)}.eui-19 .eui-timebar__legend-item-icon--info{color:var(--eui-c-s-info)}.eui-19 .eui-timebar__legend-item-icon--success{color:var(--eui-c-s-success)}.eui-19 .eui-timebar__legend-item-icon--warning{color:var(--eui-c-s-warning)}.eui-19 .eui-timebar__legend-item-icon--danger{color:var(--eui-c-s-danger)}@media screen and (max-width: 767px){.eui-19 .eui-timebar{margin:5rem var(--eui-s-m)}.eui-19 .eui-timebar__legend{margin-bottom:var(--eui-s-l);margin-left:18px}}\n"] }]
345
345
  }], ctorParameters: () => [{ type: i1.EuiAppShellService }, { type: i0.ChangeDetectorRef }], propDecorators: { container: [{
346
346
  type: ViewChild,
347
347
  args: ['container']
package/fesm2022/eui-components-eui-timebar.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"eui-components-eui-timebar.mjs","sources":["../../eui-timebar/eui-timebar.component.ts","../../eui-timebar/eui-timebar.component.html","../../eui-timebar/eui-timebar-item.model.ts","../../eui-timebar/index.ts","../../eui-timebar/eui-components-eui-timebar.ts"],"sourcesContent":["import {\n AfterContentInit,\n AfterViewChecked,\n ChangeDetectorRef,\n Component,\n ElementRef,\n Input,\n NgModule,\n OnChanges,\n OnDestroy,\n OnInit,\n SimpleChange,\n SimpleChanges,\n ViewChild,\n ViewEncapsulation,\n booleanAttribute,\n inject,\n} from '@angular/core';\nimport { Subscription } from 'rxjs';\n\nimport { EuiAppShellService, formatNumber, LocaleService, LocaleState } from '@eui/core';\nimport { EUI_ICON } from '@eui/components/eui-icon';\nimport { EUI_BADGE } from '@eui/components/eui-badge';\nimport { EuiTimebarItem } from './eui-timebar-item.model';\nimport { AsyncPipe, DatePipe, NgClass } from '@angular/common';\n\nexport class EuiTimebarItemUI {\n perc: number;\n /**\n * info success warning danger\n */\n stepTypeClass: 'info'|'success'|'warning'|'danger'|string;\n tooltipColor: string;\n isGrouped?: boolean;\n groupIndex?: number;\n groupLabel?: string;\n groupEndDate?: Date;\n item: EuiTimebarItem;\n}\n\n/**\n * @description\n * A component for displaying chronological events or milestones on a horizontal timeline.\n *\n * The EuiTimebarComponent renders a horizontal timeline with customizable items, labels,\n * markers, and optional grouping for overlapping items. It supports responsive behavior,\n * current date indication, and multiple display options.\n *\n */\n@Component({\n selector: 'eui-timebar',\n templateUrl: './eui-timebar.component.html',\n styleUrls: ['./styles/_index.scss'],\n encapsulation: ViewEncapsulation.None,\n imports: [\n NgClass,\n AsyncPipe,\n DatePipe,\n ...EUI_ICON,\n ...EUI_BADGE,\n ],\n})\nexport class EuiTimebarComponent implements OnInit, AfterContentInit, AfterViewChecked, OnChanges, OnDestroy {\n itemsUI: EuiTimebarItemUI[] = [];\n currentDate = new Date();\n currentPerc: number;\n markedPerc: number;\n /**\n * The class to be applied to the timebar column.\n *\n * @deprecated Calculation of it happens internally and will be removed in the future\n */\n timebarColumnClass = '';\n subscription: Subscription;\n isShowLegendGenerated: boolean;\n isShowLegendAsIndexGenerated: boolean;\n isGroupOverlappingLabelsGenerated: boolean;\n isMobile = false;\n isSomeStepsAreGrouped = false;\n extraTimelineLabelSpace = 21;\n\n @ViewChild('container') container: ElementRef<HTMLDivElement>;\n @Input() e2eAttr = 'eui-timebar';\n /**\n * Date to be highlighted on the timeline.\n * Separate from currentDateMarker, which shows today's date.\n */\n @Input() markedDate: Date;\n /**\n * Collection of items to be displayed on the timeline.\n */\n @Input() items: EuiTimebarItem[];\n /**\n * Label displayed at the beginning of the timeline.\n */\n @Input() startLabel: string;\n\n /**\n * Label displayed at the end of the timeline.\n */\n @Input() endLabel: string;\n\n /**\n * Format for displaying dates in the timeline.\n * @default 'yyyy-MM-dd'\n */\n @Input() dateFormat: 'short'|'medium'|'long'|'full'|'shortDate'|'mediumDate'|'longDate'|'fullDate'|'shortTime'|'mediumTime'|'longTime'|'fullTime'|string = 'yyyy-MM-dd';\n\n /**\n * Whether to show a legend with timeline item labels.\n * @default false\n */\n @Input({ transform: booleanAttribute }) isShowLegend = false;\n\n /**\n * Whether to display indices instead of colors in the legend.\n * @default true\n */\n @Input({ transform: booleanAttribute }) isShowLegendAsIndex = true;\n\n /**\n * Whether to display a marker for the current date on the timeline.\n * @default false\n */\n @Input({ transform: booleanAttribute }) isShowCurrentDateMarker = false;\n\n /**\n * When true, keeps the current date marker visible even if the current date\n * is outside the timeline range by placing it at the edge of the timeline.\n * @default false\n */\n @Input({ transform: booleanAttribute }) isCurrentDateMarkerAlwaysInRange = false;\n\n /**\n * Whether to group timeline items with overlapping labels to improve readability.\n * @default false\n */\n @Input({ transform: booleanAttribute }) isGroupOverlappingLabels = false;\n\n protected maxStepWidth = 112; // 112px = 8rem = 2 x 4rem margin around starting and ending bullet.\n protected locale: LocaleService<LocaleState> = inject(LocaleService);\n\n constructor(\n private asService: EuiAppShellService,\n private cd: ChangeDetectorRef,\n ) {}\n\n ngOnInit(): void {\n this.subscription = this.asService.breakpoints$.subscribe((bkps) => {\n this.onBreakpointChange(bkps);\n });\n }\n\n ngAfterContentInit(): void {\n this.removeNullItems();\n this.sortItems();\n\n const startDate: Date = this.items[0].date;\n const endDate: Date = this.items[this.items.length - 1].date;\n this.items.forEach((item) => {\n let stepTypeClass = '';\n let tooltipColor = 'none';\n\n if (item.stepType) {\n stepTypeClass = 'eui-timebar__step--' + item.stepType;\n tooltipColor = item.stepType;\n }\n\n const isNumber = /^\\d+\\.\\d+$/.test(item.label) || /^\\d+$/.test(item.label);\n\n if (isNumber) {\n item.label = formatNumber(item.label, 2);\n }\n\n this.itemsUI.push({\n perc: this.calculatePercentage(item.date, startDate, endDate),\n item,\n stepTypeClass,\n tooltipColor,\n });\n });\n\n this.currentPerc = this.calculatePercentage(this.currentDate, startDate, endDate, true);\n this.markedPerc = this.calculatePercentage(this.markedDate, startDate, endDate, true);\n\n // initialize attributes\n this.isShowLegendGenerated = this.isShowLegend;\n this.isShowLegendAsIndexGenerated = this.isShowLegendAsIndex;\n this.isGroupOverlappingLabelsGenerated = this.isGroupOverlappingLabels;\n this.isMobile = false;\n }\n\n ngAfterViewChecked(): void {\n this.groupOverlappingLabels();\n }\n\n ngOnDestroy(): void {\n if (this.subscription) {\n this.subscription.unsubscribe();\n }\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes['markedDate']) {\n const change: SimpleChange = changes['markedDate'];\n const startDate: Date = this.items[0].date;\n const endDate: Date = this.items[this.items.length - 1].date;\n this.markedPerc = this.calculatePercentage(change.currentValue as Date, startDate, endDate);\n }\n }\n\n // TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onBreakpointChange(bkps: any): void {\n if (bkps.isMobile) {\n this.isShowLegendGenerated = this.isShowLegendAsIndexGenerated = this.isMobile = true;\n } else {\n this.isShowLegendGenerated = this.isShowLegend;\n this.isShowLegendAsIndexGenerated = this.isShowLegendAsIndex;\n this.isMobile = false;\n }\n }\n\n trackByFn(index: number, item: EuiTimebarItemUI): string {\n return item.item.label;\n }\n\n /**\n * Removes null and undefined items from the timeline collection.\n */\n protected removeNullItems(): void {\n if (this.items) {\n for (let i = 0; i < this.items.length; i++) {\n if (!this.items[i]) {\n this.items.splice(i, 1);\n i--;\n }\n }\n }\n }\n\n /**\n * Sorts the timeline items chronologically by their dates in ascending order.\n * Items with invalid or missing dates are treated as equal during comparison.\n */\n protected sortItems(): void {\n if (!this.items?.length) {\n return;\n }\n\n this.items = this.items\n .filter(a => this.areValidDates(a?.date))\n .sort(this.compareTimebarDates);\n }\n\n protected groupOverlappingLabels(): void {\n if (!this.isGroupOverlappingLabelsGenerated || !this.container || !this.itemsUI) {\n return;\n }\n\n this.clearGrouping();\n\n const containerWidth = this.container.nativeElement.clientWidth;\n const groupingThreshold = (this.maxStepWidth * 100) / containerWidth;\n\n let currentGroup = {\n startIndex: 0,\n items: [] as EuiTimebarItemUI[],\n };\n\n for (let i = 0; i < this.itemsUI.length; i++) {\n const currentItem = this.itemsUI[i];\n const previousItem = i > 0 ? this.itemsUI[i - 1] : null;\n\n if (!previousItem) {\n currentGroup.items.push(currentItem);\n continue;\n }\n\n const distance = Math.abs(currentItem.perc - previousItem.perc);\n\n if (distance <= groupingThreshold) {\n currentGroup.items.push(currentItem);\n } else {\n this.processGroup(currentGroup);\n currentGroup = {\n startIndex: i,\n items: [currentItem],\n };\n }\n }\n\n // Process the last group\n if (currentGroup.items.length > 0) {\n this.processGroup(currentGroup);\n }\n\n this.isSomeStepsAreGrouped = this.itemsUI.some(item => item.isGrouped);\n this.cd.detectChanges();\n }\n\n protected clearGrouping(): void {\n this.isSomeStepsAreGrouped = false;\n if (this.itemsUI) {\n for (const item of this.itemsUI) {\n delete item.isGrouped;\n delete item.groupIndex;\n delete item.groupLabel;\n delete item.groupEndDate;\n }\n }\n this.extraTimelineLabelSpace = 21;\n }\n\n /**\n * @deprecated it's not used anymore\n */\n protected calculateExtraTimelineLabelSpace(): void {\n if (this.itemsUI) {\n let maxLabelLength = 0;\n this.itemsUI\n .filter(i => i.item?.label)\n .forEach((i) => {\n maxLabelLength = Math.max(maxLabelLength, i.item.label.length);\n });\n\n if (maxLabelLength > 56) {\n // 56px = 4rem margin of the timeline itself.\n this.extraTimelineLabelSpace = maxLabelLength + 28; // 28px = 2rem = 1 line of text in height + margins\n }\n }\n }\n\n /**\n * Calculates the percentage position of a date within a given date range.\n *\n * @param date - The target date to calculate the position for\n * @param startDate - The beginning of the date range\n * @param endDate - The end of the date range\n * @param compensateForRange - When true, adjusts out-of-range values to maintain visualization constraints\n * @param alwaysInRange - When true, clamps the percentage to the 0-100 range\n * @returns The calculated percentage (0-100), or adjusted values (-3 or 103) if compensating for out-of-range dates\n *\n * @example\n * // Basic usage within range\n * calculatePercentage(new Date('2024-02-15'), new Date('2024-01-01'), new Date('2024-12-31'))\n *\n * // With range compensation\n * calculatePercentage(new Date('2025-01-01'), new Date('2024-01-01'), new Date('2024-12-31'), true)\n */\n protected calculatePercentage(date: Date, startDate: Date, endDate: Date, compensateForRange = false, alwaysInRange = this.isCurrentDateMarkerAlwaysInRange): number {\n if (!this.areValidDates(date, startDate, endDate)) {\n return 0;\n }\n const percentage = this.calculateBasePercentage(date, startDate, endDate);\n\n return compensateForRange\n ? this.adjustPercentageForRange(percentage, alwaysInRange)\n : percentage;\n }\n\n private processGroup(group: { startIndex: number; items: EuiTimebarItemUI[] }): void {\n if (group.items.length <= 1) {\n return;\n }\n\n const firstItem = group.items[0];\n const lastItem = group.items[group.items.length - 1];\n\n // Update the first item in the group\n firstItem.groupEndDate = lastItem.item.date;\n firstItem.stepTypeClass = lastItem.item.stepType;\n\n const groupLabels = this.generateGroupLabels(group);\n firstItem.groupLabel = groupLabels.join(', ');\n firstItem.groupIndex = group.startIndex + 1;\n\n // Mark remaining items as grouped\n for (let i = 1; i < group.items.length; i++) {\n const item = group.items[i];\n item.isGrouped = true;\n item.groupIndex = group.startIndex + i + 1;\n }\n }\n\n private generateGroupLabels(group: { startIndex: number; items: EuiTimebarItemUI[] }): string[] {\n return group.items.map((_, index) =>\n (group.startIndex + index + 1).toString(),\n );\n }\n\n /**\n * Verifies that all required dates are valid Date objects.\n *\n * @param dates - The dates to validate\n * @returns True if all dates are valid, otherwise false\n */\n private areValidDates(...dates: Date[]): boolean {\n return dates.every(date => date instanceof Date);\n }\n\n /**\n * Calculates the raw percentage position of a date within the range.\n *\n * @param date - The target date to calculate the position for\n * @param startDate - The beginning of the date range\n * @param endDate - The end of the date range\n *\n * @returns The calculated percentage (0-100) position on the range\n */\n private calculateBasePercentage(date: Date, startDate: Date, endDate: Date): number {\n const timespan = endDate.getTime() - startDate.getTime();\n const position = date.getTime() - startDate.getTime();\n return (position / timespan) * 100;\n }\n\n /**\n * Handles date positions that fall outside the specified range by applying boundary adjustments.\n *\n * For dates beyond the range boundaries, this method adjusts their position values\n * to maintain consistent TimeBar visualization. When isCurrentDateMarkerAlwaysInRange\n * is enabled, positions are clamped to the boundaries (0-100). Otherwise, they extend\n * slightly beyond (-3 or 103) to indicate out-of-range status.\n *\n * @param percentage - The calculated percentage position\n * @param alwaysInRange - When true, clamps the percentage to the 0-100 range\n *\n * @returns The adjusted percentage value\n */\n private adjustPercentageForRange(percentage: number, alwaysInRange: boolean): number {\n if (percentage > 100) {\n return alwaysInRange ? 100 : 103;\n }\n\n if (percentage <= 0) {\n return alwaysInRange ? 0 : -3;\n }\n\n return percentage;\n }\n\n /**\n * Compares two timeline items by their dates for sorting.\n *\n * @param firstItem - The first item to compare\n * @param secondItem - The second item to compare\n * @returns Negative if first date is earlier, positive if later, zero if equal\n */\n private compareTimebarDates(firstItem: EuiTimebarItem, secondItem: EuiTimebarItem): number {\n return firstItem.date.getTime() - secondItem.date.getTime();\n }\n}\n\n/**\n * @description\n * Angular module that provides the EuiTimebarComponent.\n *\n * @deprecated Use {@link EUI_TIMEBAR} instead\n */\n@NgModule({\n imports: [EuiTimebarComponent],\n exports: [EuiTimebarComponent],\n})\nexport class EuiTimebarModule {}\n","<div class=\"row eui-u-flex\" #container>\n @if(startLabel) {\n <div class=\"col-2 eui-timebar__start-label\">\n {{ startLabel }}\n </div>\n }\n <div class=\"{{timebarColumnClass}} {{ 'col-' + ((startLabel ? -2 : 0) + (endLabel ? -2 : 0) + 12) }}\">\n <div class=\"eui-timebar\" [style.marginBottom.px]=\"extraTimelineLabelSpace\" attr.data-e2e=\"{{ e2eAttr }}\">\n @if(isShowCurrentDateMarker) {\n <div\n class=\"eui-timebar__current-progress\"\n [style.width.%]=\"currentPerc >= 100 ? 100 : currentPerc\"></div>\n }\n @if(markedDate) {\n <div class=\"eui-timebar__current-progress\" [style.width.%]=\"markedPerc >= 100 ? 100 : markedPerc\"></div>\n }\n\n @for (item of itemsUI; let i = $index; track i) {\n @if(!item.isGrouped) {\n <div\n class=\"eui-timebar__step\"\n [ngClass]=\"item.stepTypeClass\"\n [style.left.%]=\"item.perc\"\n [class.eui-timebar__step--with-current-date-marker]=\"isShowCurrentDateMarker || markedDate\">\n @if(!isMobile) {\n <div class=\"eui-timebar__step-date-item\" [class.eui-timebar__step-date-item--with-end-date]=\"item.groupEndDate\">\n @if(item.groupEndDate) {\n <span\n class=\"eui-timebar__grouped__step {{\n item.stepTypeClass ? 'eui-timebar__step--' + item.stepTypeClass : ''}}\">\n {{ item.groupEndDate | date: dateFormat: null: (locale.getState() | async).id }}\n </span>\n }\n <span\n class=\"{{ item.tooltipColor ? 'eui-timebar__step--' + item.tooltipColor : '' }}\"\n [class.eui-timebar__grouped__step]=\"item.groupEndDate\">\n {{ item.item.date | date: dateFormat: null: (locale.getState() | async).id }}\n </span>\n </div>\n }\n @if(!isShowLegendGenerated) {\n <div [style.left.%]=\"!isMobile ? item.perc : null\" class=\"eui-timebar__step-label\">\n @if(!item.groupLabel) {\n <span title=\"{{ item.item.label }}\">{{ item.item.label }}</span>\n }\n @if(item.groupLabel) {\n <span title=\"{{ item.groupLabel }}\">{{ item.groupLabel }}</span>\n }\n </div>\n }\n @if(isShowLegendGenerated && isShowLegendAsIndexGenerated) {\n <div\n [style.left.%]=\"!isMobile ? item.perc : null\"\n class=\"eui-timebar__step-label\">\n {{ !item.groupLabel ? i + 1 : item.groupLabel }}\n </div>\n }\n </div>\n }\n }\n\n @if(isShowCurrentDateMarker) {\n <div\n class=\"eui-timebar__current-date-marker\"\n [style.left.%]=\"currentPerc\"\n title=\"{{ currentDate | date: dateFormat: null: (locale.getState() | async).id }}\">\n <eui-icon-svg icon=\"location\" set=\"sharp\" size=\"m\"></eui-icon-svg>\n </div>\n <div class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"currentPerc\">\n <eui-icon-svg icon=\"ellipse:sharp\" size=\"s\"></eui-icon-svg>\n </div>\n }\n @if(markedDate) {\n <div\n class=\"eui-timebar__current-date-marker\"\n [style.left.%]=\"markedPerc\"\n title=\"{{ markedDate | date: dateFormat: null: (locale.getState() | async).id }}\">\n <eui-icon-svg icon=\"location\" set=\"sharp\" size=\"m\"></eui-icon-svg>\n </div>\n <div class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"markedPerc\">\n <eui-icon-svg icon=\"ellipse:sharp\" size=\"s\"></eui-icon-svg>\n </div>\n }\n </div>\n </div>\n @if(endLabel) {\n <div class=\"col-2 eui-timebar__end-label\">\n {{ endLabel }}\n </div>\n }\n</div>\n<div class=\"row eui-u-flex-justify-content-center\">\n <div class=\"{{timebarColumnClass}} {{ 'col-md-' + ((startLabel ? -2 : 0) + (endLabel ? -2 : 0) + 12) }}\">\n @if (isShowLegendGenerated || isSomeStepsAreGrouped) {\n <div class=\"eui-timebar__legend\">\n @for (item of itemsUI; let i = $index; track i){\n @if(isShowLegendGenerated) {\n <div class=\"eui-timebar__legend-item\">\n @if(!isShowLegendAsIndexGenerated) {\n <div class=\"eui-timebar__legend-item-icon\">\n <eui-icon-svg icon=\"ellipse:sharp\" size=\"s\" fillColor=\"{{ item.item.stepType }}\"></eui-icon-svg>\n </div>\n } @else {\n <div class=\"eui-timebar__legend-item-index-wrapper\">\n <eui-badge euiSizeL euiPrimary>{{ i + 1 }}</eui-badge>\n </div>\n }\n <div class=\"eui-timebar__legend-item-label\">\n @if(isMobile) {\n <strong>{{ item.item.date | date: dateFormat: null: (locale.getState() | async).id }}</strong> -\n }\n {{ item.item.label }}\n </div>\n </div>\n }\n @if(!isShowLegendGenerated && (item.groupLabel || item.isGrouped)) {\n <div class=\"eui-timebar__legend-item\">\n <div class=\"eui-timebar__legend-item-index-wrapper\">\n <eui-badge euiSizeL euiPrimary>{{ item.groupIndex }}</eui-badge>\n </div>\n <div class=\"eui-timebar__legend-item-label\">\n <strong>{{ item.item.date | date: dateFormat: null: (locale.getState() | async).id }}</strong> - {{ item.item.label }}\n </div>\n </div>\n }\n }\n </div>\n }\n </div>\n</div>\n","/**\n * Represents a single item in the TimeBar component.\n * Used to define the data points that will be displayed on the timeline.\n */\n// eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging\nexport interface EuiTimebarItem {\n /**\n * The date to be displayed on the timeline.\n * Used to calculate the item's position in chronological order.\n */\n date: Date;\n\n /**\n * The text label that appears below the timeline marker.\n * Can be a string, a Date or a formatted number value.\n */\n label: string;\n\n /**\n * Optional visual style indicator for the timeline marker.\n * Supported values: 'info', 'success', 'warning', 'danger'\n */\n stepType?: 'info' | 'success' | 'warning' | 'danger' | string;\n}\n\n/**\n * @deprecated use the {@link EuiTimebarItem} interface instead.\n */\n// TODO: v17 remove this class - unnecessary\n// eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging\nexport class EuiTimebarItem implements EuiTimebarItem {\n date: Date;\n label: string;\n stepType?: string;\n\n constructor(values = {}) {\n Object.assign(this, values);\n }\n}\n","import { EuiTimebarComponent } from './eui-timebar.component';\n\nexport * from './eui-timebar.component';\nexport * from './eui-timebar-item.model';\n\nexport const EUI_TIMEBAR = [\n EuiTimebarComponent,\n] as const;\n\n// export { EuiTimebarComponent as EuiTimebar } from './eui-timebar.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"eui-components-eui-timebar.mjs","sources":["../../eui-timebar/eui-timebar.component.ts","../../eui-timebar/eui-timebar.component.html","../../eui-timebar/eui-timebar-item.model.ts","../../eui-timebar/index.ts","../../eui-timebar/eui-components-eui-timebar.ts"],"sourcesContent":["import {\n AfterContentInit,\n AfterViewChecked,\n ChangeDetectorRef,\n Component,\n ElementRef,\n Input,\n NgModule,\n OnChanges,\n OnDestroy,\n OnInit,\n SimpleChange,\n SimpleChanges,\n ViewChild,\n ViewEncapsulation,\n booleanAttribute,\n inject,\n} from '@angular/core';\nimport { Subscription } from 'rxjs';\n\nimport { EuiAppShellService, formatNumber, LocaleService, LocaleState } from '@eui/core';\nimport { EUI_ICON } from '@eui/components/eui-icon';\nimport { EUI_BADGE } from '@eui/components/eui-badge';\nimport { EuiTimebarItem } from './eui-timebar-item.model';\nimport { AsyncPipe, DatePipe, NgClass } from '@angular/common';\n\nexport class EuiTimebarItemUI {\n perc: number;\n /**\n * info success warning danger\n */\n stepTypeClass: 'info'|'success'|'warning'|'danger'|string;\n tooltipColor: string;\n isGrouped?: boolean;\n groupIndex?: number;\n groupLabel?: string;\n groupEndDate?: Date;\n item: EuiTimebarItem;\n}\n\n/**\n * @description\n * A component for displaying chronological events or milestones on a horizontal timeline.\n *\n * The EuiTimebarComponent renders a horizontal timeline with customizable items, labels,\n * markers, and optional grouping for overlapping items. It supports responsive behavior,\n * current date indication, and multiple display options.\n *\n */\n@Component({\n selector: 'eui-timebar',\n templateUrl: './eui-timebar.component.html',\n styleUrls: ['./styles/_index.scss'],\n encapsulation: ViewEncapsulation.None,\n imports: [\n NgClass,\n AsyncPipe,\n DatePipe,\n ...EUI_ICON,\n ...EUI_BADGE,\n ],\n})\nexport class EuiTimebarComponent implements OnInit, AfterContentInit, AfterViewChecked, OnChanges, OnDestroy {\n itemsUI: EuiTimebarItemUI[] = [];\n currentDate = new Date();\n currentPerc: number;\n markedPerc: number;\n /**\n * The class to be applied to the timebar column.\n *\n * @deprecated Calculation of it happens internally and will be removed in the future\n */\n timebarColumnClass = '';\n subscription: Subscription;\n isShowLegendGenerated: boolean;\n isShowLegendAsIndexGenerated: boolean;\n isGroupOverlappingLabelsGenerated: boolean;\n isMobile = false;\n isSomeStepsAreGrouped = false;\n extraTimelineLabelSpace = 21;\n\n @ViewChild('container') container: ElementRef<HTMLDivElement>;\n @Input() e2eAttr = 'eui-timebar';\n /**\n * Date to be highlighted on the timeline.\n * Separate from currentDateMarker, which shows today's date.\n */\n @Input() markedDate: Date;\n /**\n * Collection of items to be displayed on the timeline.\n */\n @Input() items: EuiTimebarItem[];\n /**\n * Label displayed at the beginning of the timeline.\n */\n @Input() startLabel: string;\n\n /**\n * Label displayed at the end of the timeline.\n */\n @Input() endLabel: string;\n\n /**\n * Format for displaying dates in the timeline.\n * @default 'yyyy-MM-dd'\n */\n @Input() dateFormat: 'short'|'medium'|'long'|'full'|'shortDate'|'mediumDate'|'longDate'|'fullDate'|'shortTime'|'mediumTime'|'longTime'|'fullTime'|string = 'yyyy-MM-dd';\n\n /**\n * Whether to show a legend with timeline item labels.\n * @default false\n */\n @Input({ transform: booleanAttribute }) isShowLegend = false;\n\n /**\n * Whether to display indices instead of colors in the legend.\n * @default true\n */\n @Input({ transform: booleanAttribute }) isShowLegendAsIndex = true;\n\n /**\n * Whether to display a marker for the current date on the timeline.\n * @default false\n */\n @Input({ transform: booleanAttribute }) isShowCurrentDateMarker = false;\n\n /**\n * When true, keeps the current date marker visible even if the current date\n * is outside the timeline range by placing it at the edge of the timeline.\n * @default false\n */\n @Input({ transform: booleanAttribute }) isCurrentDateMarkerAlwaysInRange = false;\n\n /**\n * Whether to group timeline items with overlapping labels to improve readability.\n * @default false\n */\n @Input({ transform: booleanAttribute }) isGroupOverlappingLabels = false;\n\n protected maxStepWidth = 112; // 112px = 8rem = 2 x 4rem margin around starting and ending bullet.\n protected locale: LocaleService<LocaleState> = inject(LocaleService);\n\n constructor(\n private asService: EuiAppShellService,\n private cd: ChangeDetectorRef,\n ) {}\n\n ngOnInit(): void {\n this.subscription = this.asService.breakpoints$.subscribe((bkps) => {\n this.onBreakpointChange(bkps);\n });\n }\n\n ngAfterContentInit(): void {\n this.removeNullItems();\n this.sortItems();\n\n const startDate: Date = this.items[0].date;\n const endDate: Date = this.items[this.items.length - 1].date;\n this.items.forEach((item) => {\n let stepTypeClass = '';\n let tooltipColor = 'none';\n\n if (item.stepType) {\n stepTypeClass = 'eui-timebar__step--' + item.stepType;\n tooltipColor = item.stepType;\n }\n\n const isNumber = /^\\d+\\.\\d+$/.test(item.label) || /^\\d+$/.test(item.label);\n\n if (isNumber) {\n item.label = formatNumber(item.label, 2);\n }\n\n this.itemsUI.push({\n perc: this.calculatePercentage(item.date, startDate, endDate),\n item,\n stepTypeClass,\n tooltipColor,\n });\n });\n\n this.currentPerc = this.calculatePercentage(this.currentDate, startDate, endDate, true);\n this.markedPerc = this.calculatePercentage(this.markedDate, startDate, endDate, true);\n\n // initialize attributes\n this.isShowLegendGenerated = this.isShowLegend;\n this.isShowLegendAsIndexGenerated = this.isShowLegendAsIndex;\n this.isGroupOverlappingLabelsGenerated = this.isGroupOverlappingLabels;\n this.isMobile = false;\n }\n\n ngAfterViewChecked(): void {\n this.groupOverlappingLabels();\n }\n\n ngOnDestroy(): void {\n if (this.subscription) {\n this.subscription.unsubscribe();\n }\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes['markedDate']) {\n const change: SimpleChange = changes['markedDate'];\n const startDate: Date = this.items[0].date;\n const endDate: Date = this.items[this.items.length - 1].date;\n this.markedPerc = this.calculatePercentage(change.currentValue as Date, startDate, endDate);\n }\n }\n\n // TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n onBreakpointChange(bkps: any): void {\n if (bkps.isMobile) {\n this.isShowLegendGenerated = this.isShowLegendAsIndexGenerated = this.isMobile = true;\n } else {\n this.isShowLegendGenerated = this.isShowLegend;\n this.isShowLegendAsIndexGenerated = this.isShowLegendAsIndex;\n this.isMobile = false;\n }\n }\n\n trackByFn(index: number, item: EuiTimebarItemUI): string {\n return item.item.label;\n }\n\n /**\n * Removes null and undefined items from the timeline collection.\n */\n protected removeNullItems(): void {\n if (this.items) {\n for (let i = 0; i < this.items.length; i++) {\n if (!this.items[i]) {\n this.items.splice(i, 1);\n i--;\n }\n }\n }\n }\n\n /**\n * Sorts the timeline items chronologically by their dates in ascending order.\n * Items with invalid or missing dates are treated as equal during comparison.\n */\n protected sortItems(): void {\n if (!this.items?.length) {\n return;\n }\n\n this.items = this.items\n .filter(a => this.areValidDates(a?.date))\n .sort(this.compareTimebarDates);\n }\n\n protected groupOverlappingLabels(): void {\n if (!this.isGroupOverlappingLabelsGenerated || !this.container || !this.itemsUI) {\n return;\n }\n\n this.clearGrouping();\n\n const containerWidth = this.container.nativeElement.clientWidth;\n const groupingThreshold = (this.maxStepWidth * 100) / containerWidth;\n\n let currentGroup = {\n startIndex: 0,\n items: [] as EuiTimebarItemUI[],\n };\n\n for (let i = 0; i < this.itemsUI.length; i++) {\n const currentItem = this.itemsUI[i];\n const previousItem = i > 0 ? this.itemsUI[i - 1] : null;\n\n if (!previousItem) {\n currentGroup.items.push(currentItem);\n continue;\n }\n\n const distance = Math.abs(currentItem.perc - previousItem.perc);\n\n if (distance <= groupingThreshold) {\n currentGroup.items.push(currentItem);\n } else {\n this.processGroup(currentGroup);\n currentGroup = {\n startIndex: i,\n items: [currentItem],\n };\n }\n }\n\n // Process the last group\n if (currentGroup.items.length > 0) {\n this.processGroup(currentGroup);\n }\n\n this.isSomeStepsAreGrouped = this.itemsUI.some(item => item.isGrouped);\n this.cd.detectChanges();\n }\n\n protected clearGrouping(): void {\n this.isSomeStepsAreGrouped = false;\n if (this.itemsUI) {\n for (const item of this.itemsUI) {\n delete item.isGrouped;\n delete item.groupIndex;\n delete item.groupLabel;\n delete item.groupEndDate;\n }\n }\n this.extraTimelineLabelSpace = 21;\n }\n\n /**\n * @deprecated it's not used anymore\n */\n protected calculateExtraTimelineLabelSpace(): void {\n if (this.itemsUI) {\n let maxLabelLength = 0;\n this.itemsUI\n .filter(i => i.item?.label)\n .forEach((i) => {\n maxLabelLength = Math.max(maxLabelLength, i.item.label.length);\n });\n\n if (maxLabelLength > 56) {\n // 56px = 4rem margin of the timeline itself.\n this.extraTimelineLabelSpace = maxLabelLength + 28; // 28px = 2rem = 1 line of text in height + margins\n }\n }\n }\n\n /**\n * Calculates the percentage position of a date within a given date range.\n *\n * @param date - The target date to calculate the position for\n * @param startDate - The beginning of the date range\n * @param endDate - The end of the date range\n * @param compensateForRange - When true, adjusts out-of-range values to maintain visualization constraints\n * @param alwaysInRange - When true, clamps the percentage to the 0-100 range\n * @returns The calculated percentage (0-100), or adjusted values (-3 or 103) if compensating for out-of-range dates\n *\n * @example\n * // Basic usage within range\n * calculatePercentage(new Date('2024-02-15'), new Date('2024-01-01'), new Date('2024-12-31'))\n *\n * // With range compensation\n * calculatePercentage(new Date('2025-01-01'), new Date('2024-01-01'), new Date('2024-12-31'), true)\n */\n protected calculatePercentage(date: Date, startDate: Date, endDate: Date, compensateForRange = false, alwaysInRange = this.isCurrentDateMarkerAlwaysInRange): number {\n if (!this.areValidDates(date, startDate, endDate)) {\n return 0;\n }\n const percentage = this.calculateBasePercentage(date, startDate, endDate);\n\n return compensateForRange\n ? this.adjustPercentageForRange(percentage, alwaysInRange)\n : percentage;\n }\n\n private processGroup(group: { startIndex: number; items: EuiTimebarItemUI[] }): void {\n if (group.items.length <= 1) {\n return;\n }\n\n const firstItem = group.items[0];\n const lastItem = group.items[group.items.length - 1];\n\n // Update the first item in the group\n firstItem.groupEndDate = lastItem.item.date;\n firstItem.stepTypeClass = lastItem.item.stepType;\n\n const groupLabels = this.generateGroupLabels(group);\n firstItem.groupLabel = groupLabels.join(', ');\n firstItem.groupIndex = group.startIndex + 1;\n\n // Mark remaining items as grouped\n for (let i = 1; i < group.items.length; i++) {\n const item = group.items[i];\n item.isGrouped = true;\n item.groupIndex = group.startIndex + i + 1;\n }\n }\n\n private generateGroupLabels(group: { startIndex: number; items: EuiTimebarItemUI[] }): string[] {\n return group.items.map((_, index) =>\n (group.startIndex + index + 1).toString(),\n );\n }\n\n /**\n * Verifies that all required dates are valid Date objects.\n *\n * @param dates - The dates to validate\n * @returns True if all dates are valid, otherwise false\n */\n private areValidDates(...dates: Date[]): boolean {\n return dates.every(date => date instanceof Date);\n }\n\n /**\n * Calculates the raw percentage position of a date within the range.\n *\n * @param date - The target date to calculate the position for\n * @param startDate - The beginning of the date range\n * @param endDate - The end of the date range\n *\n * @returns The calculated percentage (0-100) position on the range\n */\n private calculateBasePercentage(date: Date, startDate: Date, endDate: Date): number {\n const timespan = endDate.getTime() - startDate.getTime();\n const position = date.getTime() - startDate.getTime();\n return (position / timespan) * 100;\n }\n\n /**\n * Handles date positions that fall outside the specified range by applying boundary adjustments.\n *\n * For dates beyond the range boundaries, this method adjusts their position values\n * to maintain consistent TimeBar visualization. When isCurrentDateMarkerAlwaysInRange\n * is enabled, positions are clamped to the boundaries (0-100). Otherwise, they extend\n * slightly beyond (-3 or 103) to indicate out-of-range status.\n *\n * @param percentage - The calculated percentage position\n * @param alwaysInRange - When true, clamps the percentage to the 0-100 range\n *\n * @returns The adjusted percentage value\n */\n private adjustPercentageForRange(percentage: number, alwaysInRange: boolean): number {\n if (percentage > 100) {\n return alwaysInRange ? 100 : 103;\n }\n\n if (percentage <= 0) {\n return alwaysInRange ? 0 : -3;\n }\n\n return percentage;\n }\n\n /**\n * Compares two timeline items by their dates for sorting.\n *\n * @param firstItem - The first item to compare\n * @param secondItem - The second item to compare\n * @returns Negative if first date is earlier, positive if later, zero if equal\n */\n private compareTimebarDates(firstItem: EuiTimebarItem, secondItem: EuiTimebarItem): number {\n return firstItem.date.getTime() - secondItem.date.getTime();\n }\n}\n\n/**\n * @description\n * Angular module that provides the EuiTimebarComponent.\n *\n * @deprecated Use {@link EUI_TIMEBAR} instead\n */\n@NgModule({\n imports: [EuiTimebarComponent],\n exports: [EuiTimebarComponent],\n})\nexport class EuiTimebarModule {}\n","<div class=\"row eui-u-flex\" #container>\n @if(startLabel) {\n <div class=\"col-2 eui-timebar__start-label\">\n {{ startLabel }}\n </div>\n }\n <div class=\"{{timebarColumnClass}} {{ 'col-' + ((startLabel ? -2 : 0) + (endLabel ? -2 : 0) + 12) }}\">\n <div class=\"eui-timebar\" [style.marginBottom.px]=\"extraTimelineLabelSpace\" attr.data-e2e=\"{{ e2eAttr }}\">\n @if(isShowCurrentDateMarker) {\n <div\n class=\"eui-timebar__current-progress\"\n [style.width.%]=\"currentPerc >= 100 ? 100 : currentPerc\"></div>\n }\n @if(markedDate) {\n <div class=\"eui-timebar__current-progress\" [style.width.%]=\"markedPerc >= 100 ? 100 : markedPerc\"></div>\n }\n\n @for (item of itemsUI; let i = $index; track i) {\n @if(!item.isGrouped) {\n <div\n class=\"eui-timebar__step\"\n [ngClass]=\"item.stepTypeClass\"\n [style.left.%]=\"item.perc\"\n [class.eui-timebar__step--with-current-date-marker]=\"isShowCurrentDateMarker || markedDate\">\n @if(!isMobile) {\n <div class=\"eui-timebar__step-date-item\" [class.eui-timebar__step-date-item--with-end-date]=\"item.groupEndDate\">\n @if(item.groupEndDate) {\n <span\n class=\"eui-timebar__grouped__step {{\n item.stepTypeClass ? 'eui-timebar__step--' + item.stepTypeClass : ''}}\">\n {{ item.groupEndDate | date: dateFormat: null: (locale.getState() | async).id }}\n </span>\n }\n <span\n class=\"{{ item.tooltipColor ? 'eui-timebar__step--' + item.tooltipColor : '' }}\"\n [class.eui-timebar__grouped__step]=\"item.groupEndDate\">\n {{ item.item.date | date: dateFormat: null: (locale.getState() | async).id }}\n </span>\n </div>\n }\n @if(!isShowLegendGenerated) {\n <div [style.left.%]=\"!isMobile ? item.perc : null\" class=\"eui-timebar__step-label\">\n @if(!item.groupLabel) {\n <span title=\"{{ item.item.label }}\">{{ item.item.label }}</span>\n }\n @if(item.groupLabel) {\n <span title=\"{{ item.groupLabel }}\">{{ item.groupLabel }}</span>\n }\n </div>\n }\n @if(isShowLegendGenerated && isShowLegendAsIndexGenerated) {\n <div\n [style.left.%]=\"!isMobile ? item.perc : null\"\n class=\"eui-timebar__step-label\">\n {{ !item.groupLabel ? i + 1 : item.groupLabel }}\n </div>\n }\n </div>\n }\n }\n\n @if(isShowCurrentDateMarker) {\n <div\n class=\"eui-timebar__current-date-marker\"\n [style.left.%]=\"currentPerc\"\n title=\"{{ currentDate | date: dateFormat: null: (locale.getState() | async).id }}\">\n <eui-icon-svg icon=\"location\" set=\"sharp\" size=\"m\"></eui-icon-svg>\n </div>\n <div class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"currentPerc\">\n <eui-icon-svg icon=\"ellipse:sharp\" size=\"s\"></eui-icon-svg>\n </div>\n }\n @if(markedDate) {\n <div\n class=\"eui-timebar__current-date-marker\"\n [style.left.%]=\"markedPerc\"\n title=\"{{ markedDate | date: dateFormat: null: (locale.getState() | async).id }}\">\n <eui-icon-svg icon=\"location\" set=\"sharp\" size=\"m\"></eui-icon-svg>\n </div>\n <div class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"markedPerc\">\n <eui-icon-svg icon=\"ellipse:sharp\" size=\"s\"></eui-icon-svg>\n </div>\n }\n </div>\n </div>\n @if(endLabel) {\n <div class=\"col-2 eui-timebar__end-label\">\n {{ endLabel }}\n </div>\n }\n</div>\n<div class=\"row eui-u-flex-justify-content-center\">\n <div class=\"{{timebarColumnClass}} {{ 'col-md-' + ((startLabel ? -2 : 0) + (endLabel ? -2 : 0) + 12) }}\">\n @if (isShowLegendGenerated || isSomeStepsAreGrouped) {\n <div class=\"eui-timebar__legend\">\n @for (item of itemsUI; let i = $index; track i){\n @if(isShowLegendGenerated) {\n <div class=\"eui-timebar__legend-item\">\n @if(!isShowLegendAsIndexGenerated) {\n <div class=\"eui-timebar__legend-item-icon\">\n <eui-icon-svg icon=\"ellipse:sharp\" size=\"s\" fillColor=\"{{ item.item.stepType }}\"></eui-icon-svg>\n </div>\n } @else {\n <div class=\"eui-timebar__legend-item-index-wrapper\">\n <eui-badge euiSizeL euiPrimary>{{ i + 1 }}</eui-badge>\n </div>\n }\n <div class=\"eui-timebar__legend-item-label\">\n @if(isMobile) {\n <strong>{{ item.item.date | date: dateFormat: null: (locale.getState() | async).id }}</strong> -\n }\n {{ item.item.label }}\n </div>\n </div>\n }\n @if(!isShowLegendGenerated && (item.groupLabel || item.isGrouped)) {\n <div class=\"eui-timebar__legend-item\">\n <div class=\"eui-timebar__legend-item-index-wrapper\">\n <eui-badge euiSizeL euiPrimary>{{ item.groupIndex }}</eui-badge>\n </div>\n <div class=\"eui-timebar__legend-item-label\">\n <strong>{{ item.item.date | date: dateFormat: null: (locale.getState() | async).id }}</strong> - {{ item.item.label }}\n </div>\n </div>\n }\n }\n </div>\n }\n </div>\n</div>\n","/**\n * Represents a single item in the TimeBar component.\n * Used to define the data points that will be displayed on the timeline.\n */\n// eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging\nexport interface EuiTimebarItem {\n /**\n * The date to be displayed on the timeline.\n * Used to calculate the item's position in chronological order.\n */\n date: Date;\n\n /**\n * The text label that appears below the timeline marker.\n * Can be a string, a Date or a formatted number value.\n */\n label: string;\n\n /**\n * Optional visual style indicator for the timeline marker.\n * Supported values: 'info', 'success', 'warning', 'danger'\n */\n stepType?: 'info' | 'success' | 'warning' | 'danger' | string;\n}\n\n/**\n * @deprecated use the {@link EuiTimebarItem} interface instead.\n */\n// TODO: v17 remove this class - unnecessary\n// eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging\nexport class EuiTimebarItem implements EuiTimebarItem {\n date: Date;\n label: string;\n stepType?: string;\n\n constructor(values = {}) {\n Object.assign(this, values);\n }\n}\n","import { EuiTimebarComponent } from './eui-timebar.component';\n\nexport * from './eui-timebar.component';\nexport * from './eui-timebar-item.model';\n\nexport const EUI_TIMEBAR = [\n EuiTimebarComponent,\n] as const;\n\n// export { EuiTimebarComponent as EuiTimebar } from './eui-timebar.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}