@eui/components 19.0.2-snapshot-1736167801365 → 19.0.2

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 (67) hide show
  1. package/docs/dependencies.html +2 -2
  2. package/docs/js/search/search_index.js +2 -2
  3. package/fesm2022/eui-components-eui-autocomplete.mjs +2 -2
  4. package/fesm2022/eui-components-eui-autocomplete.mjs.map +1 -1
  5. package/fesm2022/eui-components-eui-avatar.mjs +2 -2
  6. package/fesm2022/eui-components-eui-avatar.mjs.map +1 -1
  7. package/fesm2022/eui-components-eui-badge.mjs +2 -2
  8. package/fesm2022/eui-components-eui-badge.mjs.map +1 -1
  9. package/fesm2022/eui-components-eui-block-content.mjs +2 -2
  10. package/fesm2022/eui-components-eui-block-content.mjs.map +1 -1
  11. package/fesm2022/eui-components-eui-block-document.mjs +2 -2
  12. package/fesm2022/eui-components-eui-block-document.mjs.map +1 -1
  13. package/fesm2022/eui-components-eui-button.mjs +2 -2
  14. package/fesm2022/eui-components-eui-button.mjs.map +1 -1
  15. package/fesm2022/eui-components-eui-card.mjs +2 -2
  16. package/fesm2022/eui-components-eui-card.mjs.map +1 -1
  17. package/fesm2022/eui-components-eui-chip.mjs +2 -2
  18. package/fesm2022/eui-components-eui-chip.mjs.map +1 -1
  19. package/fesm2022/eui-components-eui-dialog.mjs +4 -4
  20. package/fesm2022/eui-components-eui-dialog.mjs.map +1 -1
  21. package/fesm2022/eui-components-eui-feedback-message.mjs +2 -2
  22. package/fesm2022/eui-components-eui-feedback-message.mjs.map +1 -1
  23. package/fesm2022/eui-components-eui-fieldset.mjs +2 -2
  24. package/fesm2022/eui-components-eui-fieldset.mjs.map +1 -1
  25. package/fesm2022/eui-components-eui-file-upload.mjs +2 -2
  26. package/fesm2022/eui-components-eui-file-upload.mjs.map +1 -1
  27. package/fesm2022/eui-components-eui-growl.mjs +2 -2
  28. package/fesm2022/eui-components-eui-growl.mjs.map +1 -1
  29. package/fesm2022/eui-components-eui-input-checkbox.mjs +2 -2
  30. package/fesm2022/eui-components-eui-input-checkbox.mjs.map +1 -1
  31. package/fesm2022/eui-components-eui-label.mjs +2 -2
  32. package/fesm2022/eui-components-eui-label.mjs.map +1 -1
  33. package/fesm2022/eui-components-eui-list.mjs +2 -2
  34. package/fesm2022/eui-components-eui-list.mjs.map +1 -1
  35. package/fesm2022/eui-components-eui-menu.mjs +4 -4
  36. package/fesm2022/eui-components-eui-menu.mjs.map +1 -1
  37. package/fesm2022/eui-components-eui-navbar.mjs +2 -2
  38. package/fesm2022/eui-components-eui-navbar.mjs.map +1 -1
  39. package/fesm2022/eui-components-eui-overlay.mjs +2 -2
  40. package/fesm2022/eui-components-eui-overlay.mjs.map +1 -1
  41. package/fesm2022/eui-components-eui-page.mjs +2 -2
  42. package/fesm2022/eui-components-eui-page.mjs.map +1 -1
  43. package/fesm2022/eui-components-eui-progress-bar.mjs +2 -2
  44. package/fesm2022/eui-components-eui-progress-bar.mjs.map +1 -1
  45. package/fesm2022/eui-components-eui-progress-circle.mjs +2 -2
  46. package/fesm2022/eui-components-eui-progress-circle.mjs.map +1 -1
  47. package/fesm2022/eui-components-eui-slide-toggle.mjs +2 -2
  48. package/fesm2022/eui-components-eui-slide-toggle.mjs.map +1 -1
  49. package/fesm2022/eui-components-eui-table.mjs +2 -2
  50. package/fesm2022/eui-components-eui-table.mjs.map +1 -1
  51. package/fesm2022/eui-components-eui-tabs.mjs +4 -4
  52. package/fesm2022/eui-components-eui-tabs.mjs.map +1 -1
  53. package/fesm2022/eui-components-eui-timebar.mjs +2 -2
  54. package/fesm2022/eui-components-eui-timebar.mjs.map +1 -1
  55. package/fesm2022/eui-components-eui-timeline.mjs +2 -2
  56. package/fesm2022/eui-components-eui-timeline.mjs.map +1 -1
  57. package/fesm2022/eui-components-eui-timepicker.mjs +2 -2
  58. package/fesm2022/eui-components-eui-timepicker.mjs.map +1 -1
  59. package/fesm2022/eui-components-eui-tree-list.mjs +2 -2
  60. package/fesm2022/eui-components-eui-tree-list.mjs.map +1 -1
  61. package/fesm2022/eui-components-eui-wizard.mjs +4 -4
  62. package/fesm2022/eui-components-eui-wizard.mjs.map +1 -1
  63. package/fesm2022/eui-components-externals-eui-editor.mjs +2 -2
  64. package/fesm2022/eui-components-externals-eui-editor.mjs.map +1 -1
  65. package/fesm2022/eui-components-layout.mjs +4 -4
  66. package/fesm2022/eui-components-layout.mjs.map +1 -1
  67. package/package.json +8 -8
package/fesm2022/eui-components-eui-timebar.mjs CHANGED
@@ -251,11 +251,11 @@ class EuiTimebarComponent {
251
251
  }
252
252
  }
253
253
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EuiTimebarComponent, deps: [{ token: i1.EuiAppShellService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
254
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.5", type: EuiTimebarComponent, isStandalone: false, 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 <div *ngIf=\"startLabel\" class=\"col-2 eui-timebar__start-label\">\n {{ startLabel }}\n </div>\n <div class=\"{{ timebarColumnClass }}\">\n <div class=\"eui-timebar\" [style.marginBottom.px]=\"extraTimelineLabelSpace\" attr.data-e2e=\"{{ e2eAttr }}\">\n <div\n *ngIf=\"isShowCurrentDateMarker\"\n class=\"eui-timebar__current-progress\"\n [style.width.%]=\"currentPerc >= 100 ? 100 : currentPerc\"></div>\n <div *ngIf=\"markedDate\" class=\"eui-timebar__current-progress\" [style.width.%]=\"markedPerc >= 100 ? 100 : markedPerc\"></div>\n <ng-template [ngIf]=\"!isMobile\">\n <ng-container *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n <ng-container *ngIf=\"!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 <div class=\"eui-timebar__step-date-item\" [class.eui-timebar__step-date-item--with-end-date]=\"item.groupEndDate\">\n <span\n *ngIf=\"item.groupEndDate\"\n class=\"eui-timebar__grouped__step {{\n item.stepTypeClass ? 'eui-timebar__step--' + item.stepTypeClass : ''\n }}\">\n {{ item.groupEndDate | date: dateFormat }}\n </span>\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 }}\n </span>\n </div>\n <div *ngIf=\"!isShowLegendGenerated\" [style.left.%]=\"item.perc\" class=\"eui-timebar__step-label\">\n <ng-container *ngIf=\"!item.groupLabel\">\n <span title=\"{{ item.item.label }}\">{{ item.item.label }}</span>\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n <span title=\"{{ item.groupLabel }}\">{{ item.groupLabel }}</span>\n </ng-container>\n </div>\n <div\n *ngIf=\"isShowLegendGenerated && isShowLegendAsIndexGenerated\"\n [style.left.%]=\"item.perc\"\n class=\"eui-timebar__step-label\">\n <ng-container *ngIf=\"!item.groupLabel\">\n {{ i + 1 }}\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n {{ item.groupLabel }}\n </ng-container>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </ng-template>\n\n <ng-template [ngIf]=\"isMobile\">\n <ng-container *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n <ng-container *ngIf=\"!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 <div *ngIf=\"!isShowLegendGenerated\" class=\"eui-timebar__step-label\" title=\"{{ item.item.label }}\">\n <ng-container *ngIf=\"!item.groupLabel\">\n <span title=\"{{ item.item.label }}\">{{ item.item.label }}</span>\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n {{ item.groupLabel }}\n </ng-container>\n </div>\n <div *ngIf=\"isShowLegendGenerated && isShowLegendAsIndexGenerated\" class=\"eui-timebar__step-label\">\n <ng-container *ngIf=\"!item.groupLabel\">\n {{ i + 1 }}\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n {{ item.groupLabel }}\n </ng-container>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </ng-template>\n\n <div\n *ngIf=\"isShowCurrentDateMarker\"\n class=\"eui-timebar__current-date-marker\"\n [style.left.%]=\"currentPerc\"\n title=\"{{ currentDate | date: dateFormat }}\">\n <eui-icon-svg icon=\"location\" set=\"sharp\" size=\"m\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n <div *ngIf=\"isShowCurrentDateMarker\" class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"currentPerc\">\n <eui-icon-svg icon=\"ellipse:sharp\" size=\"s\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n <div\n *ngIf=\"markedDate\"\n class=\"eui-timebar__current-date-marker\"\n [style.left.%]=\"markedPerc\"\n title=\"{{ markedDate | date: dateFormat }}\">\n <eui-icon-svg icon=\"location\" set=\"sharp\" size=\"m\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n <div *ngIf=\"markedDate\" class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"markedPerc\">\n <eui-icon-svg icon=\"ellipse:sharp\" size=\"s\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n </div>\n </div>\n <div *ngIf=\"endLabel\" class=\"col-2 eui-timebar__end-label\">\n {{ endLabel }}\n </div>\n</div>\n<div class=\"row eui-u-flex\">\n <div *ngIf=\"startLabel\" class=\"col-2\"></div>\n <div class=\"{{ timebarColumnClass }}\">\n <div *ngIf=\"isShowLegendGenerated || isSomeStepsAreGrouped\" class=\"eui-timebar__legend\">\n <ng-container *ngIf=\"isShowLegendGenerated\">\n <div class=\"eui-timebar__legend-item\" *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n <div *ngIf=\"!isShowLegendAsIndexGenerated\" 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 <div *ngIf=\"isShowLegendAsIndexGenerated\" class=\"eui-timebar__legend-item-index-wrapper\">\n {{ i + 1 }}\n </div>\n <div class=\"eui-timebar__legend-item-label\">\n <ng-template [ngIf]=\"isMobile\">\n <strong>{{ item.item.date | date: dateFormat }}</strong> - {{ item.item.label }}\n </ng-template>\n <ng-template [ngIf]=\"!isMobile\">\n {{ item.item.label }}\n </ng-template>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!isShowLegendGenerated\">\n <ng-container *ngFor=\"let item of itemsUI; trackBy: trackByFn\">\n <div *ngIf=\"item.groupLabel || item.isGrouped\" class=\"eui-timebar__legend-item\">\n <div class=\"eui-timebar__legend-item-index-wrapper\">\n {{ item.groupIndex }}\n </div>\n <div class=\"eui-timebar__legend-item-label\">\n <strong>{{ item.item.date | date: dateFormat }}</strong> - {{ item.item.label }}\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </div>\n <div *ngIf=\"endLabel\" class=\"col-2\"></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-primary-dark);border-radius:var(--eui-br-max);height:14px;position:absolute;width:14px}.eui-19 .eui-timebar__step-date-item{background-color:var(--eui-c-neutral-light);border-radius:var(--eui-br-max);color:var(--eui-c-white);max-width:8rem;min-width:6rem;padding:var(--eui-s-xs);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-primary-dark);padding-top:5px;position:absolute}.eui-19 .eui-timebar__current-date-marker{color:var(--eui-c-danger-dark);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-danger-dark);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{background-color:var(--eui-c-primary-dark);border-radius:var(--eui-br-max);color:var(--eui-c-white);margin-right:var(--eui-s-m);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-info)}.eui-19 .eui-timebar__grouped__step.eui-timebar__step--success{background-color:var(--eui-c-success-dark)}.eui-19 .eui-timebar__grouped__step.eui-timebar__step--warning{background-color:var(--eui-c-warning)}.eui-19 .eui-timebar__grouped__step.eui-timebar__step--danger{background-color:var(--eui-c-danger-dark)}.eui-19 .eui-timebar__step--info{border-color:var(--eui-c-info)}.eui-19 .eui-timebar__step--info .eui-timebar__step-date-item{background-color:var(--eui-c-info)}.eui-19 .eui-timebar__step--success{border-color:var(--eui-c-success-dark)}.eui-19 .eui-timebar__step--success .eui-timebar__step-date-item{background-color:var(--eui-c-success-dark)}.eui-19 .eui-timebar__step--warning{border-color:var(--eui-c-warning)}.eui-19 .eui-timebar__step--warning .eui-timebar__step-date-item{background-color:var(--eui-c-warning)}.eui-19 .eui-timebar__step--danger{border-color:var(--eui-c-danger-dark)}.eui-19 .eui-timebar__step--danger .eui-timebar__step-date-item{background-color:var(--eui-c-danger-dark)}.eui-19 .eui-timebar__legend-item-icon{color:var(--eui-c-primary-dark);fill:var(--eui-c-primary-dark);width:var(--eui-s-3xl);height:var(--eui-s-3xl)}.eui-19 .eui-timebar__legend-item-icon--info{color:var(--eui-c-info)}.eui-19 .eui-timebar__legend-item-icon--success{color:var(--eui-c-success-dark)}.eui-19 .eui-timebar__legend-item-icon--warning{color:var(--eui-c-warning)}.eui-19 .eui-timebar__legend-item-icon--danger{color:var(--eui-c-danger-dark)}@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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.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: "pipe", type: i2.DatePipe, name: "date" }], encapsulation: i0.ViewEncapsulation.None }); }
254
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.5", type: EuiTimebarComponent, isStandalone: false, 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 <div *ngIf=\"startLabel\" class=\"col-2 eui-timebar__start-label\">\n {{ startLabel }}\n </div>\n <div class=\"{{ timebarColumnClass }}\">\n <div class=\"eui-timebar\" [style.marginBottom.px]=\"extraTimelineLabelSpace\" attr.data-e2e=\"{{ e2eAttr }}\">\n <div\n *ngIf=\"isShowCurrentDateMarker\"\n class=\"eui-timebar__current-progress\"\n [style.width.%]=\"currentPerc >= 100 ? 100 : currentPerc\"></div>\n <div *ngIf=\"markedDate\" class=\"eui-timebar__current-progress\" [style.width.%]=\"markedPerc >= 100 ? 100 : markedPerc\"></div>\n <ng-template [ngIf]=\"!isMobile\">\n <ng-container *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n <ng-container *ngIf=\"!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 <div class=\"eui-timebar__step-date-item\" [class.eui-timebar__step-date-item--with-end-date]=\"item.groupEndDate\">\n <span\n *ngIf=\"item.groupEndDate\"\n class=\"eui-timebar__grouped__step {{\n item.stepTypeClass ? 'eui-timebar__step--' + item.stepTypeClass : ''\n }}\">\n {{ item.groupEndDate | date: dateFormat }}\n </span>\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 }}\n </span>\n </div>\n <div *ngIf=\"!isShowLegendGenerated\" [style.left.%]=\"item.perc\" class=\"eui-timebar__step-label\">\n <ng-container *ngIf=\"!item.groupLabel\">\n <span title=\"{{ item.item.label }}\">{{ item.item.label }}</span>\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n <span title=\"{{ item.groupLabel }}\">{{ item.groupLabel }}</span>\n </ng-container>\n </div>\n <div\n *ngIf=\"isShowLegendGenerated && isShowLegendAsIndexGenerated\"\n [style.left.%]=\"item.perc\"\n class=\"eui-timebar__step-label\">\n <ng-container *ngIf=\"!item.groupLabel\">\n {{ i + 1 }}\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n {{ item.groupLabel }}\n </ng-container>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </ng-template>\n\n <ng-template [ngIf]=\"isMobile\">\n <ng-container *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n <ng-container *ngIf=\"!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 <div *ngIf=\"!isShowLegendGenerated\" class=\"eui-timebar__step-label\" title=\"{{ item.item.label }}\">\n <ng-container *ngIf=\"!item.groupLabel\">\n <span title=\"{{ item.item.label }}\">{{ item.item.label }}</span>\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n {{ item.groupLabel }}\n </ng-container>\n </div>\n <div *ngIf=\"isShowLegendGenerated && isShowLegendAsIndexGenerated\" class=\"eui-timebar__step-label\">\n <ng-container *ngIf=\"!item.groupLabel\">\n {{ i + 1 }}\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n {{ item.groupLabel }}\n </ng-container>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </ng-template>\n\n <div\n *ngIf=\"isShowCurrentDateMarker\"\n class=\"eui-timebar__current-date-marker\"\n [style.left.%]=\"currentPerc\"\n title=\"{{ currentDate | date: dateFormat }}\">\n <eui-icon-svg icon=\"location\" set=\"sharp\" size=\"m\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n <div *ngIf=\"isShowCurrentDateMarker\" class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"currentPerc\">\n <eui-icon-svg icon=\"ellipse:sharp\" size=\"s\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n <div\n *ngIf=\"markedDate\"\n class=\"eui-timebar__current-date-marker\"\n [style.left.%]=\"markedPerc\"\n title=\"{{ markedDate | date: dateFormat }}\">\n <eui-icon-svg icon=\"location\" set=\"sharp\" size=\"m\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n <div *ngIf=\"markedDate\" class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"markedPerc\">\n <eui-icon-svg icon=\"ellipse:sharp\" size=\"s\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n </div>\n </div>\n <div *ngIf=\"endLabel\" class=\"col-2 eui-timebar__end-label\">\n {{ endLabel }}\n </div>\n</div>\n<div class=\"row eui-u-flex\">\n <div *ngIf=\"startLabel\" class=\"col-2\"></div>\n <div class=\"{{ timebarColumnClass }}\">\n <div *ngIf=\"isShowLegendGenerated || isSomeStepsAreGrouped\" class=\"eui-timebar__legend\">\n <ng-container *ngIf=\"isShowLegendGenerated\">\n <div class=\"eui-timebar__legend-item\" *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n <div *ngIf=\"!isShowLegendAsIndexGenerated\" 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 <div *ngIf=\"isShowLegendAsIndexGenerated\" class=\"eui-timebar__legend-item-index-wrapper\">\n {{ i + 1 }}\n </div>\n <div class=\"eui-timebar__legend-item-label\">\n <ng-template [ngIf]=\"isMobile\">\n <strong>{{ item.item.date | date: dateFormat }}</strong> - {{ item.item.label }}\n </ng-template>\n <ng-template [ngIf]=\"!isMobile\">\n {{ item.item.label }}\n </ng-template>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!isShowLegendGenerated\">\n <ng-container *ngFor=\"let item of itemsUI; trackBy: trackByFn\">\n <div *ngIf=\"item.groupLabel || item.isGrouped\" class=\"eui-timebar__legend-item\">\n <div class=\"eui-timebar__legend-item-index-wrapper\">\n {{ item.groupIndex }}\n </div>\n <div class=\"eui-timebar__legend-item-label\">\n <strong>{{ item.item.date | date: dateFormat }}</strong> - {{ item.item.label }}\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </div>\n <div *ngIf=\"endLabel\" class=\"col-2\"></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-primary);border-radius:var(--eui-br-max);height:14px;position:absolute;width:14px}.eui-19 .eui-timebar__step-date-item{background-color:var(--eui-c-neutral-light);border-radius:var(--eui-br-max);color:var(--eui-c-white);max-width:8rem;min-width:6rem;padding:var(--eui-s-xs);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-primary);padding-top:5px;position:absolute}.eui-19 .eui-timebar__current-date-marker{color:var(--eui-c-danger-dark);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-danger-dark);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{background-color:var(--eui-c-primary);border-radius:var(--eui-br-max);color:var(--eui-c-white);margin-right:var(--eui-s-m);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-info)}.eui-19 .eui-timebar__grouped__step.eui-timebar__step--success{background-color:var(--eui-c-success-dark)}.eui-19 .eui-timebar__grouped__step.eui-timebar__step--warning{background-color:var(--eui-c-warning)}.eui-19 .eui-timebar__grouped__step.eui-timebar__step--danger{background-color:var(--eui-c-danger-dark)}.eui-19 .eui-timebar__step--info{border-color:var(--eui-c-info)}.eui-19 .eui-timebar__step--info .eui-timebar__step-date-item{background-color:var(--eui-c-info)}.eui-19 .eui-timebar__step--success{border-color:var(--eui-c-success-dark)}.eui-19 .eui-timebar__step--success .eui-timebar__step-date-item{background-color:var(--eui-c-success-dark)}.eui-19 .eui-timebar__step--warning{border-color:var(--eui-c-warning)}.eui-19 .eui-timebar__step--warning .eui-timebar__step-date-item{background-color:var(--eui-c-warning)}.eui-19 .eui-timebar__step--danger{border-color:var(--eui-c-danger-dark)}.eui-19 .eui-timebar__step--danger .eui-timebar__step-date-item{background-color:var(--eui-c-danger-dark)}.eui-19 .eui-timebar__legend-item-icon{color:var(--eui-c-primary);fill:var(--eui-c-primary);width:var(--eui-s-3xl);height:var(--eui-s-3xl)}.eui-19 .eui-timebar__legend-item-icon--info{color:var(--eui-c-info)}.eui-19 .eui-timebar__legend-item-icon--success{color:var(--eui-c-success-dark)}.eui-19 .eui-timebar__legend-item-icon--warning{color:var(--eui-c-warning)}.eui-19 .eui-timebar__legend-item-icon--danger{color:var(--eui-c-danger-dark)}@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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.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: "pipe", type: i2.DatePipe, name: "date" }], encapsulation: i0.ViewEncapsulation.None }); }
255
255
  }
256
256
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EuiTimebarComponent, decorators: [{
257
257
  type: Component,
258
- args: [{ selector: 'eui-timebar', encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"row eui-u-flex\" #container>\n <div *ngIf=\"startLabel\" class=\"col-2 eui-timebar__start-label\">\n {{ startLabel }}\n </div>\n <div class=\"{{ timebarColumnClass }}\">\n <div class=\"eui-timebar\" [style.marginBottom.px]=\"extraTimelineLabelSpace\" attr.data-e2e=\"{{ e2eAttr }}\">\n <div\n *ngIf=\"isShowCurrentDateMarker\"\n class=\"eui-timebar__current-progress\"\n [style.width.%]=\"currentPerc >= 100 ? 100 : currentPerc\"></div>\n <div *ngIf=\"markedDate\" class=\"eui-timebar__current-progress\" [style.width.%]=\"markedPerc >= 100 ? 100 : markedPerc\"></div>\n <ng-template [ngIf]=\"!isMobile\">\n <ng-container *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n <ng-container *ngIf=\"!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 <div class=\"eui-timebar__step-date-item\" [class.eui-timebar__step-date-item--with-end-date]=\"item.groupEndDate\">\n <span\n *ngIf=\"item.groupEndDate\"\n class=\"eui-timebar__grouped__step {{\n item.stepTypeClass ? 'eui-timebar__step--' + item.stepTypeClass : ''\n }}\">\n {{ item.groupEndDate | date: dateFormat }}\n </span>\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 }}\n </span>\n </div>\n <div *ngIf=\"!isShowLegendGenerated\" [style.left.%]=\"item.perc\" class=\"eui-timebar__step-label\">\n <ng-container *ngIf=\"!item.groupLabel\">\n <span title=\"{{ item.item.label }}\">{{ item.item.label }}</span>\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n <span title=\"{{ item.groupLabel }}\">{{ item.groupLabel }}</span>\n </ng-container>\n </div>\n <div\n *ngIf=\"isShowLegendGenerated && isShowLegendAsIndexGenerated\"\n [style.left.%]=\"item.perc\"\n class=\"eui-timebar__step-label\">\n <ng-container *ngIf=\"!item.groupLabel\">\n {{ i + 1 }}\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n {{ item.groupLabel }}\n </ng-container>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </ng-template>\n\n <ng-template [ngIf]=\"isMobile\">\n <ng-container *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n <ng-container *ngIf=\"!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 <div *ngIf=\"!isShowLegendGenerated\" class=\"eui-timebar__step-label\" title=\"{{ item.item.label }}\">\n <ng-container *ngIf=\"!item.groupLabel\">\n <span title=\"{{ item.item.label }}\">{{ item.item.label }}</span>\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n {{ item.groupLabel }}\n </ng-container>\n </div>\n <div *ngIf=\"isShowLegendGenerated && isShowLegendAsIndexGenerated\" class=\"eui-timebar__step-label\">\n <ng-container *ngIf=\"!item.groupLabel\">\n {{ i + 1 }}\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n {{ item.groupLabel }}\n </ng-container>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </ng-template>\n\n <div\n *ngIf=\"isShowCurrentDateMarker\"\n class=\"eui-timebar__current-date-marker\"\n [style.left.%]=\"currentPerc\"\n title=\"{{ currentDate | date: dateFormat }}\">\n <eui-icon-svg icon=\"location\" set=\"sharp\" size=\"m\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n <div *ngIf=\"isShowCurrentDateMarker\" class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"currentPerc\">\n <eui-icon-svg icon=\"ellipse:sharp\" size=\"s\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n <div\n *ngIf=\"markedDate\"\n class=\"eui-timebar__current-date-marker\"\n [style.left.%]=\"markedPerc\"\n title=\"{{ markedDate | date: dateFormat }}\">\n <eui-icon-svg icon=\"location\" set=\"sharp\" size=\"m\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n <div *ngIf=\"markedDate\" class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"markedPerc\">\n <eui-icon-svg icon=\"ellipse:sharp\" size=\"s\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n </div>\n </div>\n <div *ngIf=\"endLabel\" class=\"col-2 eui-timebar__end-label\">\n {{ endLabel }}\n </div>\n</div>\n<div class=\"row eui-u-flex\">\n <div *ngIf=\"startLabel\" class=\"col-2\"></div>\n <div class=\"{{ timebarColumnClass }}\">\n <div *ngIf=\"isShowLegendGenerated || isSomeStepsAreGrouped\" class=\"eui-timebar__legend\">\n <ng-container *ngIf=\"isShowLegendGenerated\">\n <div class=\"eui-timebar__legend-item\" *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n <div *ngIf=\"!isShowLegendAsIndexGenerated\" 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 <div *ngIf=\"isShowLegendAsIndexGenerated\" class=\"eui-timebar__legend-item-index-wrapper\">\n {{ i + 1 }}\n </div>\n <div class=\"eui-timebar__legend-item-label\">\n <ng-template [ngIf]=\"isMobile\">\n <strong>{{ item.item.date | date: dateFormat }}</strong> - {{ item.item.label }}\n </ng-template>\n <ng-template [ngIf]=\"!isMobile\">\n {{ item.item.label }}\n </ng-template>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!isShowLegendGenerated\">\n <ng-container *ngFor=\"let item of itemsUI; trackBy: trackByFn\">\n <div *ngIf=\"item.groupLabel || item.isGrouped\" class=\"eui-timebar__legend-item\">\n <div class=\"eui-timebar__legend-item-index-wrapper\">\n {{ item.groupIndex }}\n </div>\n <div class=\"eui-timebar__legend-item-label\">\n <strong>{{ item.item.date | date: dateFormat }}</strong> - {{ item.item.label }}\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </div>\n <div *ngIf=\"endLabel\" class=\"col-2\"></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-primary-dark);border-radius:var(--eui-br-max);height:14px;position:absolute;width:14px}.eui-19 .eui-timebar__step-date-item{background-color:var(--eui-c-neutral-light);border-radius:var(--eui-br-max);color:var(--eui-c-white);max-width:8rem;min-width:6rem;padding:var(--eui-s-xs);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-primary-dark);padding-top:5px;position:absolute}.eui-19 .eui-timebar__current-date-marker{color:var(--eui-c-danger-dark);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-danger-dark);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{background-color:var(--eui-c-primary-dark);border-radius:var(--eui-br-max);color:var(--eui-c-white);margin-right:var(--eui-s-m);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-info)}.eui-19 .eui-timebar__grouped__step.eui-timebar__step--success{background-color:var(--eui-c-success-dark)}.eui-19 .eui-timebar__grouped__step.eui-timebar__step--warning{background-color:var(--eui-c-warning)}.eui-19 .eui-timebar__grouped__step.eui-timebar__step--danger{background-color:var(--eui-c-danger-dark)}.eui-19 .eui-timebar__step--info{border-color:var(--eui-c-info)}.eui-19 .eui-timebar__step--info .eui-timebar__step-date-item{background-color:var(--eui-c-info)}.eui-19 .eui-timebar__step--success{border-color:var(--eui-c-success-dark)}.eui-19 .eui-timebar__step--success .eui-timebar__step-date-item{background-color:var(--eui-c-success-dark)}.eui-19 .eui-timebar__step--warning{border-color:var(--eui-c-warning)}.eui-19 .eui-timebar__step--warning .eui-timebar__step-date-item{background-color:var(--eui-c-warning)}.eui-19 .eui-timebar__step--danger{border-color:var(--eui-c-danger-dark)}.eui-19 .eui-timebar__step--danger .eui-timebar__step-date-item{background-color:var(--eui-c-danger-dark)}.eui-19 .eui-timebar__legend-item-icon{color:var(--eui-c-primary-dark);fill:var(--eui-c-primary-dark);width:var(--eui-s-3xl);height:var(--eui-s-3xl)}.eui-19 .eui-timebar__legend-item-icon--info{color:var(--eui-c-info)}.eui-19 .eui-timebar__legend-item-icon--success{color:var(--eui-c-success-dark)}.eui-19 .eui-timebar__legend-item-icon--warning{color:var(--eui-c-warning)}.eui-19 .eui-timebar__legend-item-icon--danger{color:var(--eui-c-danger-dark)}@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"] }]
258
+ args: [{ selector: 'eui-timebar', encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"row eui-u-flex\" #container>\n <div *ngIf=\"startLabel\" class=\"col-2 eui-timebar__start-label\">\n {{ startLabel }}\n </div>\n <div class=\"{{ timebarColumnClass }}\">\n <div class=\"eui-timebar\" [style.marginBottom.px]=\"extraTimelineLabelSpace\" attr.data-e2e=\"{{ e2eAttr }}\">\n <div\n *ngIf=\"isShowCurrentDateMarker\"\n class=\"eui-timebar__current-progress\"\n [style.width.%]=\"currentPerc >= 100 ? 100 : currentPerc\"></div>\n <div *ngIf=\"markedDate\" class=\"eui-timebar__current-progress\" [style.width.%]=\"markedPerc >= 100 ? 100 : markedPerc\"></div>\n <ng-template [ngIf]=\"!isMobile\">\n <ng-container *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n <ng-container *ngIf=\"!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 <div class=\"eui-timebar__step-date-item\" [class.eui-timebar__step-date-item--with-end-date]=\"item.groupEndDate\">\n <span\n *ngIf=\"item.groupEndDate\"\n class=\"eui-timebar__grouped__step {{\n item.stepTypeClass ? 'eui-timebar__step--' + item.stepTypeClass : ''\n }}\">\n {{ item.groupEndDate | date: dateFormat }}\n </span>\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 }}\n </span>\n </div>\n <div *ngIf=\"!isShowLegendGenerated\" [style.left.%]=\"item.perc\" class=\"eui-timebar__step-label\">\n <ng-container *ngIf=\"!item.groupLabel\">\n <span title=\"{{ item.item.label }}\">{{ item.item.label }}</span>\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n <span title=\"{{ item.groupLabel }}\">{{ item.groupLabel }}</span>\n </ng-container>\n </div>\n <div\n *ngIf=\"isShowLegendGenerated && isShowLegendAsIndexGenerated\"\n [style.left.%]=\"item.perc\"\n class=\"eui-timebar__step-label\">\n <ng-container *ngIf=\"!item.groupLabel\">\n {{ i + 1 }}\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n {{ item.groupLabel }}\n </ng-container>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </ng-template>\n\n <ng-template [ngIf]=\"isMobile\">\n <ng-container *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n <ng-container *ngIf=\"!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 <div *ngIf=\"!isShowLegendGenerated\" class=\"eui-timebar__step-label\" title=\"{{ item.item.label }}\">\n <ng-container *ngIf=\"!item.groupLabel\">\n <span title=\"{{ item.item.label }}\">{{ item.item.label }}</span>\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n {{ item.groupLabel }}\n </ng-container>\n </div>\n <div *ngIf=\"isShowLegendGenerated && isShowLegendAsIndexGenerated\" class=\"eui-timebar__step-label\">\n <ng-container *ngIf=\"!item.groupLabel\">\n {{ i + 1 }}\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n {{ item.groupLabel }}\n </ng-container>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </ng-template>\n\n <div\n *ngIf=\"isShowCurrentDateMarker\"\n class=\"eui-timebar__current-date-marker\"\n [style.left.%]=\"currentPerc\"\n title=\"{{ currentDate | date: dateFormat }}\">\n <eui-icon-svg icon=\"location\" set=\"sharp\" size=\"m\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n <div *ngIf=\"isShowCurrentDateMarker\" class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"currentPerc\">\n <eui-icon-svg icon=\"ellipse:sharp\" size=\"s\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n <div\n *ngIf=\"markedDate\"\n class=\"eui-timebar__current-date-marker\"\n [style.left.%]=\"markedPerc\"\n title=\"{{ markedDate | date: dateFormat }}\">\n <eui-icon-svg icon=\"location\" set=\"sharp\" size=\"m\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n <div *ngIf=\"markedDate\" class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"markedPerc\">\n <eui-icon-svg icon=\"ellipse:sharp\" size=\"s\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n </div>\n </div>\n <div *ngIf=\"endLabel\" class=\"col-2 eui-timebar__end-label\">\n {{ endLabel }}\n </div>\n</div>\n<div class=\"row eui-u-flex\">\n <div *ngIf=\"startLabel\" class=\"col-2\"></div>\n <div class=\"{{ timebarColumnClass }}\">\n <div *ngIf=\"isShowLegendGenerated || isSomeStepsAreGrouped\" class=\"eui-timebar__legend\">\n <ng-container *ngIf=\"isShowLegendGenerated\">\n <div class=\"eui-timebar__legend-item\" *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n <div *ngIf=\"!isShowLegendAsIndexGenerated\" 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 <div *ngIf=\"isShowLegendAsIndexGenerated\" class=\"eui-timebar__legend-item-index-wrapper\">\n {{ i + 1 }}\n </div>\n <div class=\"eui-timebar__legend-item-label\">\n <ng-template [ngIf]=\"isMobile\">\n <strong>{{ item.item.date | date: dateFormat }}</strong> - {{ item.item.label }}\n </ng-template>\n <ng-template [ngIf]=\"!isMobile\">\n {{ item.item.label }}\n </ng-template>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!isShowLegendGenerated\">\n <ng-container *ngFor=\"let item of itemsUI; trackBy: trackByFn\">\n <div *ngIf=\"item.groupLabel || item.isGrouped\" class=\"eui-timebar__legend-item\">\n <div class=\"eui-timebar__legend-item-index-wrapper\">\n {{ item.groupIndex }}\n </div>\n <div class=\"eui-timebar__legend-item-label\">\n <strong>{{ item.item.date | date: dateFormat }}</strong> - {{ item.item.label }}\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </div>\n <div *ngIf=\"endLabel\" class=\"col-2\"></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-primary);border-radius:var(--eui-br-max);height:14px;position:absolute;width:14px}.eui-19 .eui-timebar__step-date-item{background-color:var(--eui-c-neutral-light);border-radius:var(--eui-br-max);color:var(--eui-c-white);max-width:8rem;min-width:6rem;padding:var(--eui-s-xs);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-primary);padding-top:5px;position:absolute}.eui-19 .eui-timebar__current-date-marker{color:var(--eui-c-danger-dark);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-danger-dark);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{background-color:var(--eui-c-primary);border-radius:var(--eui-br-max);color:var(--eui-c-white);margin-right:var(--eui-s-m);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-info)}.eui-19 .eui-timebar__grouped__step.eui-timebar__step--success{background-color:var(--eui-c-success-dark)}.eui-19 .eui-timebar__grouped__step.eui-timebar__step--warning{background-color:var(--eui-c-warning)}.eui-19 .eui-timebar__grouped__step.eui-timebar__step--danger{background-color:var(--eui-c-danger-dark)}.eui-19 .eui-timebar__step--info{border-color:var(--eui-c-info)}.eui-19 .eui-timebar__step--info .eui-timebar__step-date-item{background-color:var(--eui-c-info)}.eui-19 .eui-timebar__step--success{border-color:var(--eui-c-success-dark)}.eui-19 .eui-timebar__step--success .eui-timebar__step-date-item{background-color:var(--eui-c-success-dark)}.eui-19 .eui-timebar__step--warning{border-color:var(--eui-c-warning)}.eui-19 .eui-timebar__step--warning .eui-timebar__step-date-item{background-color:var(--eui-c-warning)}.eui-19 .eui-timebar__step--danger{border-color:var(--eui-c-danger-dark)}.eui-19 .eui-timebar__step--danger .eui-timebar__step-date-item{background-color:var(--eui-c-danger-dark)}.eui-19 .eui-timebar__legend-item-icon{color:var(--eui-c-primary);fill:var(--eui-c-primary);width:var(--eui-s-3xl);height:var(--eui-s-3xl)}.eui-19 .eui-timebar__legend-item-icon--info{color:var(--eui-c-info)}.eui-19 .eui-timebar__legend-item-icon--success{color:var(--eui-c-success-dark)}.eui-19 .eui-timebar__legend-item-icon--warning{color:var(--eui-c-warning)}.eui-19 .eui-timebar__legend-item-icon--danger{color:var(--eui-c-danger-dark)}@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"] }]
259
259
  }], ctorParameters: () => [{ type: i1.EuiAppShellService }, { type: i0.ChangeDetectorRef }], propDecorators: { container: [{
260
260
  type: ViewChild,
261
261
  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/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} from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { Subscription } from 'rxjs';\n\nimport { EuiAppShellService, formatNumber } from '@eui/core';\nimport { EuiIconModule } from '@eui/components/eui-icon';\nimport { EuiTimebarItem } from './eui-timebar-item.model';\n\nexport class EuiTimebarItemUI {\n perc: number;\n stepTypeClass: string;\n tooltipColor: string;\n isGrouped?: boolean;\n groupIndex?: number;\n groupLabel?: string;\n groupEndDate?: Date;\n item: EuiTimebarItem;\n}\n\n@Component({\n selector: 'eui-timebar',\n templateUrl: './eui-timebar.component.html',\n styleUrls: ['./styles/_index.scss'],\n encapsulation: ViewEncapsulation.None,\n standalone: false,\n})\nexport class EuiTimebarComponent implements OnInit, AfterContentInit, AfterViewChecked, OnChanges, OnDestroy {\n itemsUI: EuiTimebarItemUI[] = [];\n currentDate = new Date();\n currentPerc: number;\n markedPerc: number;\n timebarColumnClass = 'col-12';\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 @Input() markedDate: Date;\n @Input() items: EuiTimebarItem[];\n @Input() startLabel: string;\n @Input() endLabel: string;\n @Input() dateFormat = 'yyyy-MM-dd';\n\n @Input({ transform: booleanAttribute }) isShowLegend = false;\n @Input({ transform: booleanAttribute }) isShowLegendAsIndex = true;\n @Input({ transform: booleanAttribute }) isShowCurrentDateMarker = false;\n @Input({ transform: booleanAttribute }) isCurrentDateMarkerAlwaysInRange = false;\n @Input({ transform: booleanAttribute }) isGroupOverlappingLabels = false;\n\n protected maxStepWidth = 112; // 112px = 8rem = 2 x 4rem margin around starting and ending bullet.\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 if (this.startLabel && this.endLabel) {\n this.timebarColumnClass = 'col-8';\n } else {\n if (this.startLabel || this.endLabel) {\n this.timebarColumnClass = 'col-10';\n }\n }\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) {\n const change: SimpleChange = changes['markedDate'];\n if (change) {\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\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 = true;\n this.isShowLegendAsIndexGenerated = true;\n 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 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 protected sortItems(): void {\n if (this.items) {\n // Sort by ascending date:\n this.items = this.items.sort((a: EuiTimebarItem, b: EuiTimebarItem) => {\n if (a && b) {\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 return <any>a.date - <any>b.date;\n } else {\n return 0;\n }\n });\n }\n }\n\n protected groupOverlappingLabels(): void {\n if (this.isGroupOverlappingLabelsGenerated) {\n this.clearGrouping();\n\n if (this.container && this.itemsUI && this.isShowLegendAsIndexGenerated) {\n const containerElement = this.container.nativeElement;\n const containerWidth = containerElement.clientWidth;\n // const groupingThreshold = this.maxStepWidth / 2;\n const groupingThreshold = (this.maxStepWidth * 100) / containerWidth;\n let groupingCounter = 0;\n let mobileIndexDisplacement = 0;\n let previousUiItem = null;\n let lastMobileIndex = 0;\n\n for (let i = 0; i < this.itemsUI.length; i++) {\n const uiItem = this.itemsUI[i];\n if (previousUiItem) {\n const distance = Math.abs(uiItem.perc - previousUiItem.perc);\n if (distance <= groupingThreshold) {\n // Group the 2 items:\n if (i > 0 && this.itemsUI[i - 1].isGrouped) {\n mobileIndexDisplacement = 0;\n } else {\n if (!this.isShowLegendGenerated && mobileIndexDisplacement <= 0) {\n mobileIndexDisplacement = groupingCounter;\n lastMobileIndex = mobileIndexDisplacement;\n }\n groupingCounter = 0;\n }\n\n groupingCounter++;\n\n if (!previousUiItem.groupLabel) {\n previousUiItem.groupIndex = groupingCounter + lastMobileIndex;\n if (!this.isShowLegendGenerated) {\n previousUiItem.groupLabel = '' + (lastMobileIndex + groupingCounter);\n } else {\n previousUiItem.groupLabel = '' + i;\n }\n groupingCounter++;\n }\n if (!this.isShowLegendGenerated) {\n previousUiItem.groupLabel += ', ' + (lastMobileIndex + groupingCounter);\n } else {\n previousUiItem.groupLabel += ', ' + (i + 1);\n }\n previousUiItem.groupEndDate = uiItem.item.date;\n previousUiItem.stepTypeClass = uiItem.item.stepType;\n\n uiItem.isGrouped = true;\n uiItem.groupIndex = groupingCounter + lastMobileIndex;\n this.isSomeStepsAreGrouped = true;\n } else {\n previousUiItem = uiItem;\n }\n } else {\n previousUiItem = uiItem;\n }\n }\n this.cd.detectChanges();\n }\n }\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 protected calculateExtraTimelineLabelSpace(): void {\n if (this.itemsUI) {\n let maxLabelLength = 0;\n for (const item of this.itemsUI) {\n if (item.item && item.item.label) {\n maxLabelLength = Math.max(maxLabelLength, item.item.label.length);\n }\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 protected calculatePercentage(date: Date, startDate: Date, endDate: Date, compensateForRange = false): number {\n if (date && startDate && endDate) {\n let percentage = ((date.getTime() - startDate.getTime()) / (endDate.getTime() - startDate.getTime())) * 100;\n\n if (compensateForRange) {\n // if the date is over the end date, or below the start date\n // simulate its positioning to not mess up the timebar global width\n if (percentage > 100) {\n if (this.isCurrentDateMarkerAlwaysInRange) {\n percentage = 100;\n } else {\n percentage = 103;\n }\n } else if (percentage <= 0) {\n if (this.isCurrentDateMarkerAlwaysInRange) {\n percentage = 0;\n } else {\n percentage = -3;\n }\n }\n }\n\n return percentage;\n } else {\n return 0;\n }\n }\n}\n\n@NgModule({\n imports: [CommonModule, EuiIconModule],\n exports: [EuiTimebarComponent],\n declarations: [EuiTimebarComponent],\n})\nexport class EuiTimebarModule {}\n","<div class=\"row eui-u-flex\" #container>\n <div *ngIf=\"startLabel\" class=\"col-2 eui-timebar__start-label\">\n {{ startLabel }}\n </div>\n <div class=\"{{ timebarColumnClass }}\">\n <div class=\"eui-timebar\" [style.marginBottom.px]=\"extraTimelineLabelSpace\" attr.data-e2e=\"{{ e2eAttr }}\">\n <div\n *ngIf=\"isShowCurrentDateMarker\"\n class=\"eui-timebar__current-progress\"\n [style.width.%]=\"currentPerc >= 100 ? 100 : currentPerc\"></div>\n <div *ngIf=\"markedDate\" class=\"eui-timebar__current-progress\" [style.width.%]=\"markedPerc >= 100 ? 100 : markedPerc\"></div>\n <ng-template [ngIf]=\"!isMobile\">\n <ng-container *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n <ng-container *ngIf=\"!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 <div class=\"eui-timebar__step-date-item\" [class.eui-timebar__step-date-item--with-end-date]=\"item.groupEndDate\">\n <span\n *ngIf=\"item.groupEndDate\"\n class=\"eui-timebar__grouped__step {{\n item.stepTypeClass ? 'eui-timebar__step--' + item.stepTypeClass : ''\n }}\">\n {{ item.groupEndDate | date: dateFormat }}\n </span>\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 }}\n </span>\n </div>\n <div *ngIf=\"!isShowLegendGenerated\" [style.left.%]=\"item.perc\" class=\"eui-timebar__step-label\">\n <ng-container *ngIf=\"!item.groupLabel\">\n <span title=\"{{ item.item.label }}\">{{ item.item.label }}</span>\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n <span title=\"{{ item.groupLabel }}\">{{ item.groupLabel }}</span>\n </ng-container>\n </div>\n <div\n *ngIf=\"isShowLegendGenerated && isShowLegendAsIndexGenerated\"\n [style.left.%]=\"item.perc\"\n class=\"eui-timebar__step-label\">\n <ng-container *ngIf=\"!item.groupLabel\">\n {{ i + 1 }}\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n {{ item.groupLabel }}\n </ng-container>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </ng-template>\n\n <ng-template [ngIf]=\"isMobile\">\n <ng-container *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n <ng-container *ngIf=\"!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 <div *ngIf=\"!isShowLegendGenerated\" class=\"eui-timebar__step-label\" title=\"{{ item.item.label }}\">\n <ng-container *ngIf=\"!item.groupLabel\">\n <span title=\"{{ item.item.label }}\">{{ item.item.label }}</span>\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n {{ item.groupLabel }}\n </ng-container>\n </div>\n <div *ngIf=\"isShowLegendGenerated && isShowLegendAsIndexGenerated\" class=\"eui-timebar__step-label\">\n <ng-container *ngIf=\"!item.groupLabel\">\n {{ i + 1 }}\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n {{ item.groupLabel }}\n </ng-container>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </ng-template>\n\n <div\n *ngIf=\"isShowCurrentDateMarker\"\n class=\"eui-timebar__current-date-marker\"\n [style.left.%]=\"currentPerc\"\n title=\"{{ currentDate | date: dateFormat }}\">\n <eui-icon-svg icon=\"location\" set=\"sharp\" size=\"m\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n <div *ngIf=\"isShowCurrentDateMarker\" class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"currentPerc\">\n <eui-icon-svg icon=\"ellipse:sharp\" size=\"s\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n <div\n *ngIf=\"markedDate\"\n class=\"eui-timebar__current-date-marker\"\n [style.left.%]=\"markedPerc\"\n title=\"{{ markedDate | date: dateFormat }}\">\n <eui-icon-svg icon=\"location\" set=\"sharp\" size=\"m\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n <div *ngIf=\"markedDate\" class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"markedPerc\">\n <eui-icon-svg icon=\"ellipse:sharp\" size=\"s\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n </div>\n </div>\n <div *ngIf=\"endLabel\" class=\"col-2 eui-timebar__end-label\">\n {{ endLabel }}\n </div>\n</div>\n<div class=\"row eui-u-flex\">\n <div *ngIf=\"startLabel\" class=\"col-2\"></div>\n <div class=\"{{ timebarColumnClass }}\">\n <div *ngIf=\"isShowLegendGenerated || isSomeStepsAreGrouped\" class=\"eui-timebar__legend\">\n <ng-container *ngIf=\"isShowLegendGenerated\">\n <div class=\"eui-timebar__legend-item\" *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n <div *ngIf=\"!isShowLegendAsIndexGenerated\" 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 <div *ngIf=\"isShowLegendAsIndexGenerated\" class=\"eui-timebar__legend-item-index-wrapper\">\n {{ i + 1 }}\n </div>\n <div class=\"eui-timebar__legend-item-label\">\n <ng-template [ngIf]=\"isMobile\">\n <strong>{{ item.item.date | date: dateFormat }}</strong> - {{ item.item.label }}\n </ng-template>\n <ng-template [ngIf]=\"!isMobile\">\n {{ item.item.label }}\n </ng-template>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!isShowLegendGenerated\">\n <ng-container *ngFor=\"let item of itemsUI; trackBy: trackByFn\">\n <div *ngIf=\"item.groupLabel || item.isGrouped\" class=\"eui-timebar__legend-item\">\n <div class=\"eui-timebar__legend-item-index-wrapper\">\n {{ item.groupIndex }}\n </div>\n <div class=\"eui-timebar__legend-item-label\">\n <strong>{{ item.item.date | date: dateFormat }}</strong> - {{ item.item.label }}\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </div>\n <div *ngIf=\"endLabel\" class=\"col-2\"></div>\n</div>\n","// eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging\nexport interface EuiTimebarItem {\n date: Date;\n label: string;\n stepType?: string;\n}\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","/**\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/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} from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { Subscription } from 'rxjs';\n\nimport { EuiAppShellService, formatNumber } from '@eui/core';\nimport { EuiIconModule } from '@eui/components/eui-icon';\nimport { EuiTimebarItem } from './eui-timebar-item.model';\n\nexport class EuiTimebarItemUI {\n perc: number;\n stepTypeClass: string;\n tooltipColor: string;\n isGrouped?: boolean;\n groupIndex?: number;\n groupLabel?: string;\n groupEndDate?: Date;\n item: EuiTimebarItem;\n}\n\n@Component({\n selector: 'eui-timebar',\n templateUrl: './eui-timebar.component.html',\n styleUrls: ['./styles/_index.scss'],\n encapsulation: ViewEncapsulation.None,\n standalone: false,\n})\nexport class EuiTimebarComponent implements OnInit, AfterContentInit, AfterViewChecked, OnChanges, OnDestroy {\n itemsUI: EuiTimebarItemUI[] = [];\n currentDate = new Date();\n currentPerc: number;\n markedPerc: number;\n timebarColumnClass = 'col-12';\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 @Input() markedDate: Date;\n @Input() items: EuiTimebarItem[];\n @Input() startLabel: string;\n @Input() endLabel: string;\n @Input() dateFormat = 'yyyy-MM-dd';\n\n @Input({ transform: booleanAttribute }) isShowLegend = false;\n @Input({ transform: booleanAttribute }) isShowLegendAsIndex = true;\n @Input({ transform: booleanAttribute }) isShowCurrentDateMarker = false;\n @Input({ transform: booleanAttribute }) isCurrentDateMarkerAlwaysInRange = false;\n @Input({ transform: booleanAttribute }) isGroupOverlappingLabels = false;\n\n protected maxStepWidth = 112; // 112px = 8rem = 2 x 4rem margin around starting and ending bullet.\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 if (this.startLabel && this.endLabel) {\n this.timebarColumnClass = 'col-8';\n } else {\n if (this.startLabel || this.endLabel) {\n this.timebarColumnClass = 'col-10';\n }\n }\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) {\n const change: SimpleChange = changes['markedDate'];\n if (change) {\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\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 = true;\n this.isShowLegendAsIndexGenerated = true;\n 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 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 protected sortItems(): void {\n if (this.items) {\n // Sort by ascending date:\n this.items = this.items.sort((a: EuiTimebarItem, b: EuiTimebarItem) => {\n if (a && b) {\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 return <any>a.date - <any>b.date;\n } else {\n return 0;\n }\n });\n }\n }\n\n protected groupOverlappingLabels(): void {\n if (this.isGroupOverlappingLabelsGenerated) {\n this.clearGrouping();\n\n if (this.container && this.itemsUI && this.isShowLegendAsIndexGenerated) {\n const containerElement = this.container.nativeElement;\n const containerWidth = containerElement.clientWidth;\n // const groupingThreshold = this.maxStepWidth / 2;\n const groupingThreshold = (this.maxStepWidth * 100) / containerWidth;\n let groupingCounter = 0;\n let mobileIndexDisplacement = 0;\n let previousUiItem = null;\n let lastMobileIndex = 0;\n\n for (let i = 0; i < this.itemsUI.length; i++) {\n const uiItem = this.itemsUI[i];\n if (previousUiItem) {\n const distance = Math.abs(uiItem.perc - previousUiItem.perc);\n if (distance <= groupingThreshold) {\n // Group the 2 items:\n if (i > 0 && this.itemsUI[i - 1].isGrouped) {\n mobileIndexDisplacement = 0;\n } else {\n if (!this.isShowLegendGenerated && mobileIndexDisplacement <= 0) {\n mobileIndexDisplacement = groupingCounter;\n lastMobileIndex = mobileIndexDisplacement;\n }\n groupingCounter = 0;\n }\n\n groupingCounter++;\n\n if (!previousUiItem.groupLabel) {\n previousUiItem.groupIndex = groupingCounter + lastMobileIndex;\n if (!this.isShowLegendGenerated) {\n previousUiItem.groupLabel = '' + (lastMobileIndex + groupingCounter);\n } else {\n previousUiItem.groupLabel = '' + i;\n }\n groupingCounter++;\n }\n if (!this.isShowLegendGenerated) {\n previousUiItem.groupLabel += ', ' + (lastMobileIndex + groupingCounter);\n } else {\n previousUiItem.groupLabel += ', ' + (i + 1);\n }\n previousUiItem.groupEndDate = uiItem.item.date;\n previousUiItem.stepTypeClass = uiItem.item.stepType;\n\n uiItem.isGrouped = true;\n uiItem.groupIndex = groupingCounter + lastMobileIndex;\n this.isSomeStepsAreGrouped = true;\n } else {\n previousUiItem = uiItem;\n }\n } else {\n previousUiItem = uiItem;\n }\n }\n this.cd.detectChanges();\n }\n }\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 protected calculateExtraTimelineLabelSpace(): void {\n if (this.itemsUI) {\n let maxLabelLength = 0;\n for (const item of this.itemsUI) {\n if (item.item && item.item.label) {\n maxLabelLength = Math.max(maxLabelLength, item.item.label.length);\n }\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 protected calculatePercentage(date: Date, startDate: Date, endDate: Date, compensateForRange = false): number {\n if (date && startDate && endDate) {\n let percentage = ((date.getTime() - startDate.getTime()) / (endDate.getTime() - startDate.getTime())) * 100;\n\n if (compensateForRange) {\n // if the date is over the end date, or below the start date\n // simulate its positioning to not mess up the timebar global width\n if (percentage > 100) {\n if (this.isCurrentDateMarkerAlwaysInRange) {\n percentage = 100;\n } else {\n percentage = 103;\n }\n } else if (percentage <= 0) {\n if (this.isCurrentDateMarkerAlwaysInRange) {\n percentage = 0;\n } else {\n percentage = -3;\n }\n }\n }\n\n return percentage;\n } else {\n return 0;\n }\n }\n}\n\n@NgModule({\n imports: [CommonModule, EuiIconModule],\n exports: [EuiTimebarComponent],\n declarations: [EuiTimebarComponent],\n})\nexport class EuiTimebarModule {}\n","<div class=\"row eui-u-flex\" #container>\n <div *ngIf=\"startLabel\" class=\"col-2 eui-timebar__start-label\">\n {{ startLabel }}\n </div>\n <div class=\"{{ timebarColumnClass }}\">\n <div class=\"eui-timebar\" [style.marginBottom.px]=\"extraTimelineLabelSpace\" attr.data-e2e=\"{{ e2eAttr }}\">\n <div\n *ngIf=\"isShowCurrentDateMarker\"\n class=\"eui-timebar__current-progress\"\n [style.width.%]=\"currentPerc >= 100 ? 100 : currentPerc\"></div>\n <div *ngIf=\"markedDate\" class=\"eui-timebar__current-progress\" [style.width.%]=\"markedPerc >= 100 ? 100 : markedPerc\"></div>\n <ng-template [ngIf]=\"!isMobile\">\n <ng-container *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n <ng-container *ngIf=\"!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 <div class=\"eui-timebar__step-date-item\" [class.eui-timebar__step-date-item--with-end-date]=\"item.groupEndDate\">\n <span\n *ngIf=\"item.groupEndDate\"\n class=\"eui-timebar__grouped__step {{\n item.stepTypeClass ? 'eui-timebar__step--' + item.stepTypeClass : ''\n }}\">\n {{ item.groupEndDate | date: dateFormat }}\n </span>\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 }}\n </span>\n </div>\n <div *ngIf=\"!isShowLegendGenerated\" [style.left.%]=\"item.perc\" class=\"eui-timebar__step-label\">\n <ng-container *ngIf=\"!item.groupLabel\">\n <span title=\"{{ item.item.label }}\">{{ item.item.label }}</span>\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n <span title=\"{{ item.groupLabel }}\">{{ item.groupLabel }}</span>\n </ng-container>\n </div>\n <div\n *ngIf=\"isShowLegendGenerated && isShowLegendAsIndexGenerated\"\n [style.left.%]=\"item.perc\"\n class=\"eui-timebar__step-label\">\n <ng-container *ngIf=\"!item.groupLabel\">\n {{ i + 1 }}\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n {{ item.groupLabel }}\n </ng-container>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </ng-template>\n\n <ng-template [ngIf]=\"isMobile\">\n <ng-container *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n <ng-container *ngIf=\"!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 <div *ngIf=\"!isShowLegendGenerated\" class=\"eui-timebar__step-label\" title=\"{{ item.item.label }}\">\n <ng-container *ngIf=\"!item.groupLabel\">\n <span title=\"{{ item.item.label }}\">{{ item.item.label }}</span>\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n {{ item.groupLabel }}\n </ng-container>\n </div>\n <div *ngIf=\"isShowLegendGenerated && isShowLegendAsIndexGenerated\" class=\"eui-timebar__step-label\">\n <ng-container *ngIf=\"!item.groupLabel\">\n {{ i + 1 }}\n </ng-container>\n <ng-container *ngIf=\"item.groupLabel\">\n {{ item.groupLabel }}\n </ng-container>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </ng-template>\n\n <div\n *ngIf=\"isShowCurrentDateMarker\"\n class=\"eui-timebar__current-date-marker\"\n [style.left.%]=\"currentPerc\"\n title=\"{{ currentDate | date: dateFormat }}\">\n <eui-icon-svg icon=\"location\" set=\"sharp\" size=\"m\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n <div *ngIf=\"isShowCurrentDateMarker\" class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"currentPerc\">\n <eui-icon-svg icon=\"ellipse:sharp\" size=\"s\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n <div\n *ngIf=\"markedDate\"\n class=\"eui-timebar__current-date-marker\"\n [style.left.%]=\"markedPerc\"\n title=\"{{ markedDate | date: dateFormat }}\">\n <eui-icon-svg icon=\"location\" set=\"sharp\" size=\"m\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n <div *ngIf=\"markedDate\" class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"markedPerc\">\n <eui-icon-svg icon=\"ellipse:sharp\" size=\"s\" fillColor=\"danger-100\"></eui-icon-svg>\n </div>\n </div>\n </div>\n <div *ngIf=\"endLabel\" class=\"col-2 eui-timebar__end-label\">\n {{ endLabel }}\n </div>\n</div>\n<div class=\"row eui-u-flex\">\n <div *ngIf=\"startLabel\" class=\"col-2\"></div>\n <div class=\"{{ timebarColumnClass }}\">\n <div *ngIf=\"isShowLegendGenerated || isSomeStepsAreGrouped\" class=\"eui-timebar__legend\">\n <ng-container *ngIf=\"isShowLegendGenerated\">\n <div class=\"eui-timebar__legend-item\" *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n <div *ngIf=\"!isShowLegendAsIndexGenerated\" 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 <div *ngIf=\"isShowLegendAsIndexGenerated\" class=\"eui-timebar__legend-item-index-wrapper\">\n {{ i + 1 }}\n </div>\n <div class=\"eui-timebar__legend-item-label\">\n <ng-template [ngIf]=\"isMobile\">\n <strong>{{ item.item.date | date: dateFormat }}</strong> - {{ item.item.label }}\n </ng-template>\n <ng-template [ngIf]=\"!isMobile\">\n {{ item.item.label }}\n </ng-template>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!isShowLegendGenerated\">\n <ng-container *ngFor=\"let item of itemsUI; trackBy: trackByFn\">\n <div *ngIf=\"item.groupLabel || item.isGrouped\" class=\"eui-timebar__legend-item\">\n <div class=\"eui-timebar__legend-item-index-wrapper\">\n {{ item.groupIndex }}\n </div>\n <div class=\"eui-timebar__legend-item-label\">\n <strong>{{ item.item.date | date: dateFormat }}</strong> - {{ item.item.label }}\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </div>\n <div *ngIf=\"endLabel\" class=\"col-2\"></div>\n</div>\n","// eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging\nexport interface EuiTimebarItem {\n date: Date;\n label: string;\n stepType?: string;\n}\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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
package/fesm2022/eui-components-eui-timeline.mjs CHANGED
@@ -54,7 +54,7 @@ class EuiTimelineItemComponent {
54
54
  .trim();
55
55
  }
56
56
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EuiTimelineItemComponent, deps: [{ token: forwardRef(() => EuiTimelineComponent), host: true, optional: true }, { token: i1.BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
57
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.5", type: EuiTimelineItemComponent, isStandalone: false, selector: "eui-timeline-item", inputs: { e2eAttr: "e2eAttr", label: "label", subLabel: "subLabel", date: "date", dateStyleClass: "dateStyleClass", time: "time", timeStyleClass: "timeStyleClass", isLeftAligned: ["isLeftAligned", "isLeftAligned", booleanAttribute], isGroup: ["isGroup", "isGroup", booleanAttribute] }, host: { properties: { "class": "this.cssClasses", "attr.data-e2e": "this.e2eAttr" } }, hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiSecondary", "euiSecondary", "euiPrimary", "euiPrimary", "euiSuccess", "euiSuccess", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiDanger", "euiDanger", "euiAccent", "euiAccent", "euiVariant", "euiVariant"] }], ngImport: i0, template: "<div *ngIf=\"!isLeftAligned\" class=\"eui-timeline-item__left-content\">\n <div *ngIf=\"date\" class=\"eui-timeline-item__date {{ dateStyleClass }}\">{{ date }}</div>\n <div *ngIf=\"time\" class=\"eui-timeline-item__time {{ timeStyleClass }}\">{{ time }}</div>\n</div>\n<div class=\"eui-timeline-item__icon\" [class.eui-timeline-item__icon--group]=\"isGroup\"></div>\n<div class=\"eui-timeline-item__content\">\n <ng-container #customContent>\n <ng-content></ng-content>\n </ng-container>\n\n <ng-container *ngIf=\"customContent?.childNodes.length === 0\">\n <div class=\"eui-timeline-item__title\">{{ label }}</div>\n <div class=\"eui-timeline-item__subtitle\">{{ subLabel }}</div>\n <div *ngIf=\"isLeftAligned && date\" class=\"eui-timeline-item__date {{ dateStyleClass }}\">{{ date }}</div>\n <div *ngIf=\"isLeftAligned && time\" class=\"eui-timeline-item__time {{ timeStyleClass }}\">{{ time }}</div>\n </ng-container>\n</div>\n", styles: [".eui-19 :host.eui-timeline-item{display:flex;flex-direction:row;list-style:none;margin-bottom:var(--eui-s-m);position:relative;width:100%}.eui-19 :host.eui-timeline-item .eui-timeline-item__left-content{display:list-item;min-width:calc(11 * var(--eui-s-m));position:relative;text-align:right;word-break:break-all}.eui-19 :host.eui-timeline-item .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){align-items:center;background-color:var(--eui-c-white);border-color:var(--eui-c-accent);border-radius:var(--eui-br-max);border-style:solid;border-width:3px;display:flex;flex-direction:column;max-height:calc(var(--eui-s-m) + var(--eui-s-2xs));margin:0 var(--eui-s-m);min-width:calc(var(--eui-s-m) + var(--eui-s-2xs));z-index:2}.eui-19 :host.eui-timeline-item .eui-timeline-item__icon:not(.eui-timeline-item__icon--group):after{background-color:var(--eui-c-neutral-lighter);content:\"\";height:calc(100% - var(--eui-s-2xs));position:absolute;top:calc(var(--eui-s-m) + var(--eui-s-2xs));width:2px;z-index:1}.eui-19 :host.eui-timeline-item .eui-timeline-item__icon.eui-timeline-item__icon--group{align-items:center;border-right:var(--eui-bw-s) dashed var(--eui-c-neutral-lighter);display:flex;flex-direction:column;height:auto;margin:2px calc(var(--eui-s-xl) + 1px)}.eui-19 :host.eui-timeline-item .eui-timeline-item__content{position:relative;top:calc(-1 * var(--eui-s-2xs));width:100%}.eui-19 :host.eui-timeline-item .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-neutral);font:var(--eui-f-l)}.eui-19 :host.eui-timeline-item .eui-timeline-item__content .eui-timeline-item__subtitle{color:var(--eui-c-neutral-light)}.eui-19 :host.eui-timeline-item .eui-timeline-item__date{color:var(--eui-c-neutral);font:var(--eui-f-m-bold)}.eui-19 :host.eui-timeline-item .eui-timeline-item__time{color:var(--eui-c-neutral-light)}.eui-19 :host.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-primary-dark)}.eui-19 :host.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content,.eui-19 :host.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-primary-dark)}.eui-19 :host.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-neutral-lightest)}.eui-19 :host.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content,.eui-19 :host.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-neutral-light)}.eui-19 :host.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-info)}.eui-19 :host.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content,.eui-19 :host.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-info-dark)}.eui-19 :host.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-warning)}.eui-19 :host.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content,.eui-19 :host.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-warning-darker)}.eui-19 :host.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-success-dark)}.eui-19 :host.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content,.eui-19 :host.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-success-dark)}.eui-19 :host.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-danger-dark)}.eui-19 :host.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content,.eui-19 :host.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-danger-dark)}.eui-19 :host.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-accent)}.eui-19 :host.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content,.eui-19 :host.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-accent-dark)}.eui-19 :host.eui-timeline-item.eui-timeline-item--more{margin-bottom:0}.eui-19 :host.eui-timeline-item.eui-timeline-item--more .eui-timeline-item__content{padding-bottom:var(--eui-s-m)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
57
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.5", type: EuiTimelineItemComponent, isStandalone: false, selector: "eui-timeline-item", inputs: { e2eAttr: "e2eAttr", label: "label", subLabel: "subLabel", date: "date", dateStyleClass: "dateStyleClass", time: "time", timeStyleClass: "timeStyleClass", isLeftAligned: ["isLeftAligned", "isLeftAligned", booleanAttribute], isGroup: ["isGroup", "isGroup", booleanAttribute] }, host: { properties: { "class": "this.cssClasses", "attr.data-e2e": "this.e2eAttr" } }, hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiSecondary", "euiSecondary", "euiPrimary", "euiPrimary", "euiSuccess", "euiSuccess", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiDanger", "euiDanger", "euiAccent", "euiAccent", "euiVariant", "euiVariant"] }], ngImport: i0, template: "<div *ngIf=\"!isLeftAligned\" class=\"eui-timeline-item__left-content\">\n <div *ngIf=\"date\" class=\"eui-timeline-item__date {{ dateStyleClass }}\">{{ date }}</div>\n <div *ngIf=\"time\" class=\"eui-timeline-item__time {{ timeStyleClass }}\">{{ time }}</div>\n</div>\n<div class=\"eui-timeline-item__icon\" [class.eui-timeline-item__icon--group]=\"isGroup\"></div>\n<div class=\"eui-timeline-item__content\">\n <ng-container #customContent>\n <ng-content></ng-content>\n </ng-container>\n\n <ng-container *ngIf=\"customContent?.childNodes.length === 0\">\n <div class=\"eui-timeline-item__title\">{{ label }}</div>\n <div class=\"eui-timeline-item__subtitle\">{{ subLabel }}</div>\n <div *ngIf=\"isLeftAligned && date\" class=\"eui-timeline-item__date {{ dateStyleClass }}\">{{ date }}</div>\n <div *ngIf=\"isLeftAligned && time\" class=\"eui-timeline-item__time {{ timeStyleClass }}\">{{ time }}</div>\n </ng-container>\n</div>\n", styles: [".eui-19 :host.eui-timeline-item{display:flex;flex-direction:row;list-style:none;margin-bottom:var(--eui-s-m);position:relative;width:100%}.eui-19 :host.eui-timeline-item .eui-timeline-item__left-content{display:list-item;min-width:calc(11 * var(--eui-s-m));position:relative;text-align:right;word-break:break-all}.eui-19 :host.eui-timeline-item .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){align-items:center;background-color:var(--eui-c-white);border-color:var(--eui-c-accent);border-radius:var(--eui-br-max);border-style:solid;border-width:3px;display:flex;flex-direction:column;max-height:calc(var(--eui-s-m) + var(--eui-s-2xs));margin:0 var(--eui-s-m);min-width:calc(var(--eui-s-m) + var(--eui-s-2xs));z-index:2}.eui-19 :host.eui-timeline-item .eui-timeline-item__icon:not(.eui-timeline-item__icon--group):after{background-color:var(--eui-c-neutral-lighter);content:\"\";height:calc(100% - var(--eui-s-2xs));position:absolute;top:calc(var(--eui-s-m) + var(--eui-s-2xs));width:2px;z-index:1}.eui-19 :host.eui-timeline-item .eui-timeline-item__icon.eui-timeline-item__icon--group{align-items:center;border-right:var(--eui-bw-s) dashed var(--eui-c-neutral-lighter);display:flex;flex-direction:column;height:auto;margin:2px calc(var(--eui-s-xl) + 1px)}.eui-19 :host.eui-timeline-item .eui-timeline-item__content{position:relative;top:calc(-1 * var(--eui-s-2xs));width:100%}.eui-19 :host.eui-timeline-item .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-neutral);font:var(--eui-f-l)}.eui-19 :host.eui-timeline-item .eui-timeline-item__content .eui-timeline-item__subtitle{color:var(--eui-c-neutral-light)}.eui-19 :host.eui-timeline-item .eui-timeline-item__date{color:var(--eui-c-neutral);font:var(--eui-f-m-bold)}.eui-19 :host.eui-timeline-item .eui-timeline-item__time{color:var(--eui-c-neutral-light)}.eui-19 :host.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-primary)}.eui-19 :host.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content,.eui-19 :host.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-primary)}.eui-19 :host.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-neutral-lightest)}.eui-19 :host.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content,.eui-19 :host.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-neutral-light)}.eui-19 :host.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-info)}.eui-19 :host.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content,.eui-19 :host.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-info-dark)}.eui-19 :host.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-warning)}.eui-19 :host.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content,.eui-19 :host.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-warning-darker)}.eui-19 :host.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-success-dark)}.eui-19 :host.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content,.eui-19 :host.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-success-dark)}.eui-19 :host.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-danger-dark)}.eui-19 :host.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content,.eui-19 :host.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-danger-dark)}.eui-19 :host.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-accent)}.eui-19 :host.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content,.eui-19 :host.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-accent-dark)}.eui-19 :host.eui-timeline-item.eui-timeline-item--more{margin-bottom:0}.eui-19 :host.eui-timeline-item.eui-timeline-item--more .eui-timeline-item__content{padding-bottom:var(--eui-s-m)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
58
58
  }
59
59
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EuiTimelineItemComponent, decorators: [{
60
60
  type: Component,
@@ -63,7 +63,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
63
63
  directive: BaseStatesDirective,
64
64
  inputs: ['euiSecondary', 'euiPrimary', 'euiSuccess', 'euiInfo', 'euiWarning', 'euiDanger', 'euiAccent', 'euiVariant'],
65
65
  },
66
- ], template: "<div *ngIf=\"!isLeftAligned\" class=\"eui-timeline-item__left-content\">\n <div *ngIf=\"date\" class=\"eui-timeline-item__date {{ dateStyleClass }}\">{{ date }}</div>\n <div *ngIf=\"time\" class=\"eui-timeline-item__time {{ timeStyleClass }}\">{{ time }}</div>\n</div>\n<div class=\"eui-timeline-item__icon\" [class.eui-timeline-item__icon--group]=\"isGroup\"></div>\n<div class=\"eui-timeline-item__content\">\n <ng-container #customContent>\n <ng-content></ng-content>\n </ng-container>\n\n <ng-container *ngIf=\"customContent?.childNodes.length === 0\">\n <div class=\"eui-timeline-item__title\">{{ label }}</div>\n <div class=\"eui-timeline-item__subtitle\">{{ subLabel }}</div>\n <div *ngIf=\"isLeftAligned && date\" class=\"eui-timeline-item__date {{ dateStyleClass }}\">{{ date }}</div>\n <div *ngIf=\"isLeftAligned && time\" class=\"eui-timeline-item__time {{ timeStyleClass }}\">{{ time }}</div>\n </ng-container>\n</div>\n", styles: [".eui-19 :host.eui-timeline-item{display:flex;flex-direction:row;list-style:none;margin-bottom:var(--eui-s-m);position:relative;width:100%}.eui-19 :host.eui-timeline-item .eui-timeline-item__left-content{display:list-item;min-width:calc(11 * var(--eui-s-m));position:relative;text-align:right;word-break:break-all}.eui-19 :host.eui-timeline-item .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){align-items:center;background-color:var(--eui-c-white);border-color:var(--eui-c-accent);border-radius:var(--eui-br-max);border-style:solid;border-width:3px;display:flex;flex-direction:column;max-height:calc(var(--eui-s-m) + var(--eui-s-2xs));margin:0 var(--eui-s-m);min-width:calc(var(--eui-s-m) + var(--eui-s-2xs));z-index:2}.eui-19 :host.eui-timeline-item .eui-timeline-item__icon:not(.eui-timeline-item__icon--group):after{background-color:var(--eui-c-neutral-lighter);content:\"\";height:calc(100% - var(--eui-s-2xs));position:absolute;top:calc(var(--eui-s-m) + var(--eui-s-2xs));width:2px;z-index:1}.eui-19 :host.eui-timeline-item .eui-timeline-item__icon.eui-timeline-item__icon--group{align-items:center;border-right:var(--eui-bw-s) dashed var(--eui-c-neutral-lighter);display:flex;flex-direction:column;height:auto;margin:2px calc(var(--eui-s-xl) + 1px)}.eui-19 :host.eui-timeline-item .eui-timeline-item__content{position:relative;top:calc(-1 * var(--eui-s-2xs));width:100%}.eui-19 :host.eui-timeline-item .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-neutral);font:var(--eui-f-l)}.eui-19 :host.eui-timeline-item .eui-timeline-item__content .eui-timeline-item__subtitle{color:var(--eui-c-neutral-light)}.eui-19 :host.eui-timeline-item .eui-timeline-item__date{color:var(--eui-c-neutral);font:var(--eui-f-m-bold)}.eui-19 :host.eui-timeline-item .eui-timeline-item__time{color:var(--eui-c-neutral-light)}.eui-19 :host.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-primary-dark)}.eui-19 :host.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content,.eui-19 :host.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-primary-dark)}.eui-19 :host.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-neutral-lightest)}.eui-19 :host.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content,.eui-19 :host.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-neutral-light)}.eui-19 :host.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-info)}.eui-19 :host.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content,.eui-19 :host.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-info-dark)}.eui-19 :host.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-warning)}.eui-19 :host.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content,.eui-19 :host.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-warning-darker)}.eui-19 :host.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-success-dark)}.eui-19 :host.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content,.eui-19 :host.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-success-dark)}.eui-19 :host.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-danger-dark)}.eui-19 :host.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content,.eui-19 :host.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-danger-dark)}.eui-19 :host.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-accent)}.eui-19 :host.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content,.eui-19 :host.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-accent-dark)}.eui-19 :host.eui-timeline-item.eui-timeline-item--more{margin-bottom:0}.eui-19 :host.eui-timeline-item.eui-timeline-item--more .eui-timeline-item__content{padding-bottom:var(--eui-s-m)}\n"] }]
66
+ ], template: "<div *ngIf=\"!isLeftAligned\" class=\"eui-timeline-item__left-content\">\n <div *ngIf=\"date\" class=\"eui-timeline-item__date {{ dateStyleClass }}\">{{ date }}</div>\n <div *ngIf=\"time\" class=\"eui-timeline-item__time {{ timeStyleClass }}\">{{ time }}</div>\n</div>\n<div class=\"eui-timeline-item__icon\" [class.eui-timeline-item__icon--group]=\"isGroup\"></div>\n<div class=\"eui-timeline-item__content\">\n <ng-container #customContent>\n <ng-content></ng-content>\n </ng-container>\n\n <ng-container *ngIf=\"customContent?.childNodes.length === 0\">\n <div class=\"eui-timeline-item__title\">{{ label }}</div>\n <div class=\"eui-timeline-item__subtitle\">{{ subLabel }}</div>\n <div *ngIf=\"isLeftAligned && date\" class=\"eui-timeline-item__date {{ dateStyleClass }}\">{{ date }}</div>\n <div *ngIf=\"isLeftAligned && time\" class=\"eui-timeline-item__time {{ timeStyleClass }}\">{{ time }}</div>\n </ng-container>\n</div>\n", styles: [".eui-19 :host.eui-timeline-item{display:flex;flex-direction:row;list-style:none;margin-bottom:var(--eui-s-m);position:relative;width:100%}.eui-19 :host.eui-timeline-item .eui-timeline-item__left-content{display:list-item;min-width:calc(11 * var(--eui-s-m));position:relative;text-align:right;word-break:break-all}.eui-19 :host.eui-timeline-item .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){align-items:center;background-color:var(--eui-c-white);border-color:var(--eui-c-accent);border-radius:var(--eui-br-max);border-style:solid;border-width:3px;display:flex;flex-direction:column;max-height:calc(var(--eui-s-m) + var(--eui-s-2xs));margin:0 var(--eui-s-m);min-width:calc(var(--eui-s-m) + var(--eui-s-2xs));z-index:2}.eui-19 :host.eui-timeline-item .eui-timeline-item__icon:not(.eui-timeline-item__icon--group):after{background-color:var(--eui-c-neutral-lighter);content:\"\";height:calc(100% - var(--eui-s-2xs));position:absolute;top:calc(var(--eui-s-m) + var(--eui-s-2xs));width:2px;z-index:1}.eui-19 :host.eui-timeline-item .eui-timeline-item__icon.eui-timeline-item__icon--group{align-items:center;border-right:var(--eui-bw-s) dashed var(--eui-c-neutral-lighter);display:flex;flex-direction:column;height:auto;margin:2px calc(var(--eui-s-xl) + 1px)}.eui-19 :host.eui-timeline-item .eui-timeline-item__content{position:relative;top:calc(-1 * var(--eui-s-2xs));width:100%}.eui-19 :host.eui-timeline-item .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-neutral);font:var(--eui-f-l)}.eui-19 :host.eui-timeline-item .eui-timeline-item__content .eui-timeline-item__subtitle{color:var(--eui-c-neutral-light)}.eui-19 :host.eui-timeline-item .eui-timeline-item__date{color:var(--eui-c-neutral);font:var(--eui-f-m-bold)}.eui-19 :host.eui-timeline-item .eui-timeline-item__time{color:var(--eui-c-neutral-light)}.eui-19 :host.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-primary)}.eui-19 :host.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content,.eui-19 :host.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-primary)}.eui-19 :host.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-neutral-lightest)}.eui-19 :host.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content,.eui-19 :host.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-neutral-light)}.eui-19 :host.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-info)}.eui-19 :host.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content,.eui-19 :host.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-info-dark)}.eui-19 :host.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-warning)}.eui-19 :host.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content,.eui-19 :host.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-warning-darker)}.eui-19 :host.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-success-dark)}.eui-19 :host.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content,.eui-19 :host.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-success-dark)}.eui-19 :host.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-danger-dark)}.eui-19 :host.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content,.eui-19 :host.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-danger-dark)}.eui-19 :host.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-accent)}.eui-19 :host.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content,.eui-19 :host.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-accent-dark)}.eui-19 :host.eui-timeline-item.eui-timeline-item--more{margin-bottom:0}.eui-19 :host.eui-timeline-item.eui-timeline-item--more .eui-timeline-item__content{padding-bottom:var(--eui-s-m)}\n"] }]
67
67
  }], ctorParameters: () => [{ type: undefined, decorators: [{
68
68
  type: Host
69
69
  }, {
package/fesm2022/eui-components-eui-timeline.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"eui-components-eui-timeline.mjs","sources":["../../eui-timeline/eui-timeline.component.ts","../../eui-timeline/eui-timeline-item.component.ts","../../eui-timeline/eui-timeline-item.component.html","../../eui-timeline/eui-timeline.module.ts","../../eui-timeline/eui-components-eui-timeline.ts"],"sourcesContent":["import {\n booleanAttribute,\n Component,\n HostBinding,\n Input,\n} from '@angular/core';\n\n@Component({\n selector: 'eui-timeline',\n template: '<ng-content/>',\n styleUrls: ['./styles/timeline.scss'],\n standalone: false,\n})\nexport class EuiTimelineComponent {\n @HostBinding('class')\n public get cssClasses(): string {\n return this.getCssClasses();\n }\n @HostBinding('attr.data-e2e')\n @Input()\n e2eAttr = 'eui-timeline';\n\n @Input({ transform: booleanAttribute }) isLeftAligned: boolean;\n\n private getCssClasses(): string {\n return ['eui-timeline', this.isLeftAligned ? 'eui-timeline--left-aligned' : ''].join(' ').trim();\n }\n}\n","import { AfterContentInit, booleanAttribute, Component, forwardRef, Host, HostBinding, Inject, Input, Optional, ViewEncapsulation } from '@angular/core';\n\nimport { BaseStatesDirective } from '@eui/components/shared';\nimport { EuiTimelineComponent } from './eui-timeline.component';\n\n@Component({\n selector: 'eui-timeline-item',\n templateUrl: './eui-timeline-item.component.html',\n styleUrls: ['./styles/timeline-item.scss'],\n standalone: false,\n hostDirectives: [\n {\n directive: BaseStatesDirective,\n inputs: ['euiSecondary', 'euiPrimary', 'euiSuccess', 'euiInfo', 'euiWarning', 'euiDanger', 'euiAccent', 'euiVariant'],\n },\n ],\n})\nexport class EuiTimelineItemComponent implements AfterContentInit {\n @HostBinding('class')\n public get cssClasses(): string {\n return this.getCssClasses();\n }\n @HostBinding('attr.data-e2e')\n @Input()\n e2eAttr = 'eui-timeline-item';\n\n @Input() label: string;\n @Input() subLabel: string;\n @Input() date: string;\n @Input() dateStyleClass = '';\n @Input() time: string;\n @Input() timeStyleClass = '';\n\n @Input({ transform: booleanAttribute }) isLeftAligned: boolean;\n @Input({ transform: booleanAttribute }) isGroup: boolean;\n\n timelineComponent: EuiTimelineComponent;\n\n constructor(\n @Host() @Optional() @Inject(forwardRef(() => EuiTimelineComponent)) timelineComponentParent,\n public baseStatesDirective: BaseStatesDirective,\n ) {\n this.timelineComponent = timelineComponentParent as EuiTimelineComponent;\n }\n\n ngAfterContentInit(): void {\n this.isLeftAligned = this.timelineComponent.isLeftAligned;\n }\n\n private getCssClasses(): string {\n return [this.baseStatesDirective.getCssClasses('eui-timeline-item'), this.isGroup ? 'eui-timeline-item--more' : '']\n .join(' ')\n .trim();\n }\n}\n","<div *ngIf=\"!isLeftAligned\" class=\"eui-timeline-item__left-content\">\n <div *ngIf=\"date\" class=\"eui-timeline-item__date {{ dateStyleClass }}\">{{ date }}</div>\n <div *ngIf=\"time\" class=\"eui-timeline-item__time {{ timeStyleClass }}\">{{ time }}</div>\n</div>\n<div class=\"eui-timeline-item__icon\" [class.eui-timeline-item__icon--group]=\"isGroup\"></div>\n<div class=\"eui-timeline-item__content\">\n <ng-container #customContent>\n <ng-content></ng-content>\n </ng-container>\n\n <ng-container *ngIf=\"customContent?.childNodes.length === 0\">\n <div class=\"eui-timeline-item__title\">{{ label }}</div>\n <div class=\"eui-timeline-item__subtitle\">{{ subLabel }}</div>\n <div *ngIf=\"isLeftAligned && date\" class=\"eui-timeline-item__date {{ dateStyleClass }}\">{{ date }}</div>\n <div *ngIf=\"isLeftAligned && time\" class=\"eui-timeline-item__time {{ timeStyleClass }}\">{{ time }}</div>\n </ng-container>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { EuiTimelineComponent } from './eui-timeline.component';\nimport { EuiTimelineItemComponent } from './eui-timeline-item.component';\n\n@NgModule({\n imports: [CommonModule],\n exports: [EuiTimelineComponent, EuiTimelineItemComponent],\n declarations: [EuiTimelineComponent, EuiTimelineItemComponent],\n})\nexport class EuiTimelineModule {}\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-timeline.mjs","sources":["../../eui-timeline/eui-timeline.component.ts","../../eui-timeline/eui-timeline-item.component.ts","../../eui-timeline/eui-timeline-item.component.html","../../eui-timeline/eui-timeline.module.ts","../../eui-timeline/eui-components-eui-timeline.ts"],"sourcesContent":["import {\n booleanAttribute,\n Component,\n HostBinding,\n Input,\n} from '@angular/core';\n\n@Component({\n selector: 'eui-timeline',\n template: '<ng-content/>',\n styleUrls: ['./styles/timeline.scss'],\n standalone: false,\n})\nexport class EuiTimelineComponent {\n @HostBinding('class')\n public get cssClasses(): string {\n return this.getCssClasses();\n }\n @HostBinding('attr.data-e2e')\n @Input()\n e2eAttr = 'eui-timeline';\n\n @Input({ transform: booleanAttribute }) isLeftAligned: boolean;\n\n private getCssClasses(): string {\n return ['eui-timeline', this.isLeftAligned ? 'eui-timeline--left-aligned' : ''].join(' ').trim();\n }\n}\n","import { AfterContentInit, booleanAttribute, Component, forwardRef, Host, HostBinding, Inject, Input, Optional, ViewEncapsulation } from '@angular/core';\n\nimport { BaseStatesDirective } from '@eui/components/shared';\nimport { EuiTimelineComponent } from './eui-timeline.component';\n\n@Component({\n selector: 'eui-timeline-item',\n templateUrl: './eui-timeline-item.component.html',\n styleUrls: ['./styles/timeline-item.scss'],\n standalone: false,\n hostDirectives: [\n {\n directive: BaseStatesDirective,\n inputs: ['euiSecondary', 'euiPrimary', 'euiSuccess', 'euiInfo', 'euiWarning', 'euiDanger', 'euiAccent', 'euiVariant'],\n },\n ],\n})\nexport class EuiTimelineItemComponent implements AfterContentInit {\n @HostBinding('class')\n public get cssClasses(): string {\n return this.getCssClasses();\n }\n @HostBinding('attr.data-e2e')\n @Input()\n e2eAttr = 'eui-timeline-item';\n\n @Input() label: string;\n @Input() subLabel: string;\n @Input() date: string;\n @Input() dateStyleClass = '';\n @Input() time: string;\n @Input() timeStyleClass = '';\n\n @Input({ transform: booleanAttribute }) isLeftAligned: boolean;\n @Input({ transform: booleanAttribute }) isGroup: boolean;\n\n timelineComponent: EuiTimelineComponent;\n\n constructor(\n @Host() @Optional() @Inject(forwardRef(() => EuiTimelineComponent)) timelineComponentParent,\n public baseStatesDirective: BaseStatesDirective,\n ) {\n this.timelineComponent = timelineComponentParent as EuiTimelineComponent;\n }\n\n ngAfterContentInit(): void {\n this.isLeftAligned = this.timelineComponent.isLeftAligned;\n }\n\n private getCssClasses(): string {\n return [this.baseStatesDirective.getCssClasses('eui-timeline-item'), this.isGroup ? 'eui-timeline-item--more' : '']\n .join(' ')\n .trim();\n }\n}\n","<div *ngIf=\"!isLeftAligned\" class=\"eui-timeline-item__left-content\">\n <div *ngIf=\"date\" class=\"eui-timeline-item__date {{ dateStyleClass }}\">{{ date }}</div>\n <div *ngIf=\"time\" class=\"eui-timeline-item__time {{ timeStyleClass }}\">{{ time }}</div>\n</div>\n<div class=\"eui-timeline-item__icon\" [class.eui-timeline-item__icon--group]=\"isGroup\"></div>\n<div class=\"eui-timeline-item__content\">\n <ng-container #customContent>\n <ng-content></ng-content>\n </ng-container>\n\n <ng-container *ngIf=\"customContent?.childNodes.length === 0\">\n <div class=\"eui-timeline-item__title\">{{ label }}</div>\n <div class=\"eui-timeline-item__subtitle\">{{ subLabel }}</div>\n <div *ngIf=\"isLeftAligned && date\" class=\"eui-timeline-item__date {{ dateStyleClass }}\">{{ date }}</div>\n <div *ngIf=\"isLeftAligned && time\" class=\"eui-timeline-item__time {{ timeStyleClass }}\">{{ time }}</div>\n </ng-container>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { EuiTimelineComponent } from './eui-timeline.component';\nimport { EuiTimelineItemComponent } from './eui-timeline-item.component';\n\n@NgModule({\n imports: [CommonModule],\n exports: [EuiTimelineComponent, EuiTimelineItemComponent],\n declarations: [EuiTimelineComponent, EuiTimelineItemComponent],\n})\nexport class EuiTimelineModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;MAaa,oBAAoB,CAAA;AANjC,IAAA,WAAA,GAAA;QAaI,IAAO,CAAA,OAAA,GAAG,cAAc;AAO3B;AAbG,IAAA,IACW,UAAU,GAAA;AACjB,QAAA,OAAO,IAAI,CAAC,aAAa,EAAE;;IAQvB,aAAa,GAAA;QACjB,OAAO,CAAC,cAAc,EAAE,IAAI,CAAC,aAAa,GAAG,4BAA4B,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE;;8GAZ3F,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAApB,oBAAoB,EAAA,YAAA,EAAA,KAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,aAAA,EAAA,CAAA,eAAA,EAAA,eAAA,EAST,gBAAgB,CAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,cAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAb1B,eAAe,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,2zBAAA,CAAA,EAAA,CAAA,CAAA;;2FAIhB,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBANhC,SAAS;+BACI,cAAc,EAAA,QAAA,EACd,eAAe,EAAA,UAAA,EAEb,KAAK,EAAA,MAAA,EAAA,CAAA,2zBAAA,CAAA,EAAA;8BAIN,UAAU,EAAA,CAAA;sBADpB,WAAW;uBAAC,OAAO;gBAMpB,OAAO,EAAA,CAAA;sBAFN,WAAW;uBAAC,eAAe;;sBAC3B;gBAGuC,aAAa,EAAA,CAAA;sBAApD,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE;;;MCL7B,wBAAwB,CAAA;AACjC,IAAA,IACW,UAAU,GAAA;AACjB,QAAA,OAAO,IAAI,CAAC,aAAa,EAAE;;IAkB/B,WACwE,CAAA,uBAAuB,EACpF,mBAAwC,EAAA;QAAxC,IAAmB,CAAA,mBAAA,GAAnB,mBAAmB;QAhB9B,IAAO,CAAA,OAAA,GAAG,mBAAmB;QAKpB,IAAc,CAAA,cAAA,GAAG,EAAE;QAEnB,IAAc,CAAA,cAAA,GAAG,EAAE;AAWxB,QAAA,IAAI,CAAC,iBAAiB,GAAG,uBAA+C;;IAG5E,kBAAkB,GAAA;QACd,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,iBAAiB,CAAC,aAAa;;IAGrD,aAAa,GAAA;QACjB,OAAO,CAAC,IAAI,CAAC,mBAAmB,CAAC,aAAa,CAAC,mBAAmB,CAAC,EAAE,IAAI,CAAC,OAAO,GAAG,yBAAyB,GAAG,EAAE;aAC7G,IAAI,CAAC,GAAG;AACR,aAAA,IAAI,EAAE;;AAnCN,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,wBAAwB,kBAsBD,UAAU,CAAC,MAAM,oBAAoB,CAAC,EAAA,IAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,mBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAtB7D,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,wBAAwB,EAgBb,YAAA,EAAA,KAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,IAAA,EAAA,MAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,IAAA,EAAA,MAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,aAAA,EAAA,CAAA,eAAA,EAAA,eAAA,EAAA,gBAAgB,CAChB,EAAA,OAAA,EAAA,CAAA,SAAA,EAAA,SAAA,EAAA,gBAAgB,iZClCxC,29BAiBA,EAAA,MAAA,EAAA,CAAA,qoJAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FDAa,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBAZpC,SAAS;+BACI,mBAAmB,EAAA,UAAA,EAGjB,KAAK,EACD,cAAA,EAAA;AACZ,wBAAA;AACI,4BAAA,SAAS,EAAE,mBAAmB;AAC9B,4BAAA,MAAM,EAAE,CAAC,cAAc,EAAE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,CAAC;AACxH,yBAAA;AACJ,qBAAA,EAAA,QAAA,EAAA,29BAAA,EAAA,MAAA,EAAA,CAAA,qoJAAA,CAAA,EAAA;;0BAwBI;;0BAAQ;;0BAAY,MAAM;AAAC,oBAAA,IAAA,EAAA,CAAA,UAAU,CAAC,MAAM,oBAAoB,CAAC;2EApB3D,UAAU,EAAA,CAAA;sBADpB,WAAW;uBAAC,OAAO;gBAMpB,OAAO,EAAA,CAAA;sBAFN,WAAW;uBAAC,eAAe;;sBAC3B;gBAGQ,KAAK,EAAA,CAAA;sBAAb;gBACQ,QAAQ,EAAA,CAAA;sBAAhB;gBACQ,IAAI,EAAA,CAAA;sBAAZ;gBACQ,cAAc,EAAA,CAAA;sBAAtB;gBACQ,IAAI,EAAA,CAAA;sBAAZ;gBACQ,cAAc,EAAA,CAAA;sBAAtB;gBAEuC,aAAa,EAAA,CAAA;sBAApD,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE;gBACE,OAAO,EAAA,CAAA;sBAA9C,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE;;;MExB7B,iBAAiB,CAAA;8GAAjB,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;+GAAjB,iBAAiB,EAAA,YAAA,EAAA,CAFX,oBAAoB,EAAE,wBAAwB,aAFnD,YAAY,CAAA,EAAA,OAAA,EAAA,CACZ,oBAAoB,EAAE,wBAAwB,CAAA,EAAA,CAAA,CAAA;AAG/C,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,iBAAiB,YAJhB,YAAY,CAAA,EAAA,CAAA,CAAA;;2FAIb,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAL7B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACN,OAAO,EAAE,CAAC,YAAY,CAAC;AACvB,oBAAA,OAAO,EAAE,CAAC,oBAAoB,EAAE,wBAAwB,CAAC;AACzD,oBAAA,YAAY,EAAE,CAAC,oBAAoB,EAAE,wBAAwB,CAAC;AACjE,iBAAA;;;ACTD;;AAEG;;;;"}
package/fesm2022/eui-components-eui-timepicker.mjs CHANGED
@@ -364,11 +364,11 @@ class EuiTimepickerComponent {
364
364
  this.hasAriaRequiredAttribute = control?.control?.hasValidator(Validators.required);
365
365
  }
366
366
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EuiTimepickerComponent, deps: [{ token: DYNAMIC_COMPONENT_CONFIG, optional: true }, { token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
367
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.5", type: EuiTimepickerComponent, isStandalone: false, selector: "eui-timepicker", inputs: { e2eAttr: "e2eAttr", inputId: "inputId", timeMask: "timeMask", placeholder: "placeholder", stepHours: "stepHours", stepMinutes: "stepMinutes", stepSeconds: "stepSeconds", iconSize: "iconSize", isreadOnly: ["isreadOnly", "isreadOnly", booleanAttribute], isOneInputField: ["isOneInputField", "isOneInputField", booleanAttribute], hasSeconds: ["hasSeconds", "hasSeconds", booleanAttribute] }, usesOnChanges: true, ngImport: i0, template: "<div class=\"eui-timepicker\" [class.eui-timepicker--centered]=\"isDatetimepicker\" attr.data-e2e=\"{{ e2eAttr }}\">\n <ng-container *ngIf=\"isOneInputField; else multipleInputs\">\n <input\n [class.eui-timepicker__input--one-field]=\"isDatetimepicker\"\n euiInputText\n [id]=\"inputId\"\n mask=\"{{ timeMask }}\"\n [leadZeroDateTime]=\"true\"\n [placeholder]=\"placeholder\"\n [attr.aria-label]=\"oneInputFormControl.value?oneInputFormControl.value:'No time value'\"\n [formControl]=\"oneInputFormControl\"\n (focusout)=\"onFocusOut()\"\n [dropSpecialCharacters]=\"false\"\n [readonly]=\"isreadOnly\" />\n </ng-container>\n\n <ng-template #multipleInputs>\n <div class=\"eui-timepicker__input-container\">\n <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__hours-up\">\n <eui-icon-svg\n (click)=\"changeHours(stepHours)\"\n [class.time-control--disabled]=\"hoursUpDisabled\"\n icon=\"chevron-up:sharp\"\n fillColor=\"neutral-light\"\n [size]=\"iconSize\"\n role=\"button\"\n aria-label=\"Increase Hours\">\n </eui-icon-svg>\n </div>\n <input\n #inputrefhours\n euiInputNumber\n [leadingZero]=\"2\"\n [digits]=\"2\"\n [fractionDigits]=\"0\"\n class=\"eui-timepicker__input\"\n placeholder=\"HH\"\n [ngModel]=\"hours\"\n (ngModelChange)=\"updateHours($event)\"\n [readonly]=\"isreadOnly\"\n aria-label=\"Hours\"\n [attr.aria-required]=\"hasAriaRequiredAttribute ? 'true' : null\"\n (keydown.ArrowUp)=\"changeHours(stepHours); $event.preventDefault()\"\n (keydown.ArrowDown)=\"changeHours(-stepHours); $event.preventDefault()\" />\n <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__hours-down\">\n <eui-icon-svg\n (click)=\"changeHours(-stepHours)\"\n [class.time-control--disabled]=\"hoursDownDisabled\"\n icon=\"chevron-down:sharp\"\n fillColor=\"neutral-light\"\n [size]=\"iconSize\"\n role=\"button\"\n aria-label=\"Decrease Hours\">\n </eui-icon-svg>\n </div>\n </div>\n <div class=\"eui-timepicker__spacer\">:</div>\n <div class=\"eui-timepicker__input-container\">\n <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__minutes-up\">\n <eui-icon-svg\n (click)=\"changeMinutes(stepMinutes)\"\n [class.time-control--disabled]=\"minutesUpDisabled\"\n icon=\"chevron-up:sharp\"\n fillColor=\"neutral-light\"\n [size]=\"iconSize\"\n role=\"button\"\n aria-label=\"Increase Minutes\">\n </eui-icon-svg>\n </div>\n <input\n #inputrefmins\n euiInputNumber\n [leadingZero]=\"2\"\n [digits]=\"2\"\n [fractionDigits]=\"0\"\n class=\"eui-timepicker__input\"\n placeholder=\"MM\"\n [ngModel]=\"mins\"\n (ngModelChange)=\"updateMinutes($event)\"\n [readonly]=\"isreadOnly\"\n aria-label=\"Minutes\"\n [attr.aria-required]=\"hasAriaRequiredAttribute ? 'true' : null\"\n (keydown.ArrowUp)=\"changeMinutes(stepMinutes); $event.preventDefault()\"\n (keydown.ArrowDown)=\"changeMinutes(-stepMinutes); $event.preventDefault()\" />\n <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__minutes-down\">\n <eui-icon-svg\n (click)=\"changeMinutes(-stepMinutes)\"\n [class.time-control--disabled]=\"minutesDownDisabled\"\n icon=\"chevron-down:sharp\"\n fillColor=\"neutral-light\"\n [size]=\"iconSize\"\n role=\"button\"\n aria-label=\"Decrease Minutes\">\n </eui-icon-svg>\n </div>\n </div>\n <ng-container *ngIf=\"hasSeconds\">\n <div class=\"eui-timepicker__spacer\">:</div>\n <div class=\"eui-timepicker__input-container\">\n <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__seconds-up\">\n <eui-icon-svg\n (click)=\"changeSeconds(stepSeconds)\"\n [class.time-control--disabled]=\"secondsUpDisabled\"\n icon=\"chevron-up:sharp\"\n fillColor=\"neutral-light\"\n [size]=\"iconSize\"\n role=\"button\"\n aria-label=\"Increase seconds\">\n </eui-icon-svg>\n </div>\n <input\n #inputrefsecs\n euiInputNumber\n [leadingZero]=\"2\"\n [digits]=\"2\"\n [fractionDigits]=\"0\"\n class=\"eui-timepicker__input\"\n placeholder=\"SS\"\n [ngModel]=\"secs\"\n (ngModelChange)=\"updateSeconds($event)\"\n [readonly]=\"isreadOnly\"\n aria-label=\"Seconds\"\n [attr.aria-required]=\"hasAriaRequiredAttribute ? 'true' : null\"\n (keydown.ArrowUp)=\"changeSeconds(stepSeconds); $event.preventDefault()\"\n (keydown.ArrowDown)=\"changeSeconds(-stepSeconds); $event.preventDefault()\" />\n <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__seconds-down\">\n <eui-icon-svg\n (click)=\"changeSeconds(-stepSeconds)\"\n [class.time-control--disabled]=\"secondsDownDisabled\"\n icon=\"chevron-down:sharp\"\n fillColor=\"neutral-light\"\n [size]=\"iconSize\"\n role=\"button\"\n aria-label=\"Decrease seconds\">\n </eui-icon-svg>\n </div>\n </div>\n </ng-container>\n </ng-template>\n</div>\n", styles: [".eui-19 .eui-timepicker{align-items:center;display:flex}.eui-19 .eui-timepicker--centered{justify-content:center}.eui-19 .eui-timepicker__input-container{width:calc(4 * var(--eui-s-m))}.eui-19 .eui-timepicker__input{text-align:center;width:100%}.eui-19 .eui-timepicker__input--one-field{width:calc(6 * var(--eui-s-m))!important;margin-bottom:var(--eui-s-2xs)}.eui-19 .eui-timepicker__spacer{text-align:center;width:var(--eui-s-m)}.eui-19 .eui-timepicker__chevron{display:flex;justify-content:center;padding:var(--eui-s-xs)}.eui-19 .eui-timepicker__chevron .eui-icon-svg:not(.time-control--disabled):hover{cursor:pointer;color:var(--eui-c-primary-dark)}.eui-19 .eui-timepicker__chevron .eui-icon-svg.time-control--disabled{background-image:none;box-shadow:none;cursor:not-allowed!important;opacity:var(--eui-o-50)}.eui-19 input[type=number]::-webkit-inner-spin-button,.eui-19 input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.eui-19 input[type=number]{-moz-appearance:textfield}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.EuiInputNumberComponent, selector: "input[euiInputNumber]", inputs: ["min", "max", "leadingZero", "isInvalid", "fractionDigits", "digits", "fillFraction", "roundUp", "noFormat", "value"] }, { kind: "directive", type: i3.EuiInputNumberDirective, selector: "input[euiInputNumber][formControl],input[euiInputNumber][formControlName],input[euiInputNumber][ngModel]" }, { kind: "component", type: i4.EuiInputTextComponent, selector: "input[euiInputText]", inputs: ["isInvalid"] }, { 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: "directive", type: i6.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }], encapsulation: i0.ViewEncapsulation.None }); }
367
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.5", type: EuiTimepickerComponent, isStandalone: false, selector: "eui-timepicker", inputs: { e2eAttr: "e2eAttr", inputId: "inputId", timeMask: "timeMask", placeholder: "placeholder", stepHours: "stepHours", stepMinutes: "stepMinutes", stepSeconds: "stepSeconds", iconSize: "iconSize", isreadOnly: ["isreadOnly", "isreadOnly", booleanAttribute], isOneInputField: ["isOneInputField", "isOneInputField", booleanAttribute], hasSeconds: ["hasSeconds", "hasSeconds", booleanAttribute] }, usesOnChanges: true, ngImport: i0, template: "<div class=\"eui-timepicker\" [class.eui-timepicker--centered]=\"isDatetimepicker\" attr.data-e2e=\"{{ e2eAttr }}\">\n <ng-container *ngIf=\"isOneInputField; else multipleInputs\">\n <input\n [class.eui-timepicker__input--one-field]=\"isDatetimepicker\"\n euiInputText\n [id]=\"inputId\"\n mask=\"{{ timeMask }}\"\n [leadZeroDateTime]=\"true\"\n [placeholder]=\"placeholder\"\n [attr.aria-label]=\"oneInputFormControl.value?oneInputFormControl.value:'No time value'\"\n [formControl]=\"oneInputFormControl\"\n (focusout)=\"onFocusOut()\"\n [dropSpecialCharacters]=\"false\"\n [readonly]=\"isreadOnly\" />\n </ng-container>\n\n <ng-template #multipleInputs>\n <div class=\"eui-timepicker__input-container\">\n <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__hours-up\">\n <eui-icon-svg\n (click)=\"changeHours(stepHours)\"\n [class.time-control--disabled]=\"hoursUpDisabled\"\n icon=\"chevron-up:sharp\"\n fillColor=\"neutral-light\"\n [size]=\"iconSize\"\n role=\"button\"\n aria-label=\"Increase Hours\">\n </eui-icon-svg>\n </div>\n <input\n #inputrefhours\n euiInputNumber\n [leadingZero]=\"2\"\n [digits]=\"2\"\n [fractionDigits]=\"0\"\n class=\"eui-timepicker__input\"\n placeholder=\"HH\"\n [ngModel]=\"hours\"\n (ngModelChange)=\"updateHours($event)\"\n [readonly]=\"isreadOnly\"\n aria-label=\"Hours\"\n [attr.aria-required]=\"hasAriaRequiredAttribute ? 'true' : null\"\n (keydown.ArrowUp)=\"changeHours(stepHours); $event.preventDefault()\"\n (keydown.ArrowDown)=\"changeHours(-stepHours); $event.preventDefault()\" />\n <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__hours-down\">\n <eui-icon-svg\n (click)=\"changeHours(-stepHours)\"\n [class.time-control--disabled]=\"hoursDownDisabled\"\n icon=\"chevron-down:sharp\"\n fillColor=\"neutral-light\"\n [size]=\"iconSize\"\n role=\"button\"\n aria-label=\"Decrease Hours\">\n </eui-icon-svg>\n </div>\n </div>\n <div class=\"eui-timepicker__spacer\">:</div>\n <div class=\"eui-timepicker__input-container\">\n <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__minutes-up\">\n <eui-icon-svg\n (click)=\"changeMinutes(stepMinutes)\"\n [class.time-control--disabled]=\"minutesUpDisabled\"\n icon=\"chevron-up:sharp\"\n fillColor=\"neutral-light\"\n [size]=\"iconSize\"\n role=\"button\"\n aria-label=\"Increase Minutes\">\n </eui-icon-svg>\n </div>\n <input\n #inputrefmins\n euiInputNumber\n [leadingZero]=\"2\"\n [digits]=\"2\"\n [fractionDigits]=\"0\"\n class=\"eui-timepicker__input\"\n placeholder=\"MM\"\n [ngModel]=\"mins\"\n (ngModelChange)=\"updateMinutes($event)\"\n [readonly]=\"isreadOnly\"\n aria-label=\"Minutes\"\n [attr.aria-required]=\"hasAriaRequiredAttribute ? 'true' : null\"\n (keydown.ArrowUp)=\"changeMinutes(stepMinutes); $event.preventDefault()\"\n (keydown.ArrowDown)=\"changeMinutes(-stepMinutes); $event.preventDefault()\" />\n <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__minutes-down\">\n <eui-icon-svg\n (click)=\"changeMinutes(-stepMinutes)\"\n [class.time-control--disabled]=\"minutesDownDisabled\"\n icon=\"chevron-down:sharp\"\n fillColor=\"neutral-light\"\n [size]=\"iconSize\"\n role=\"button\"\n aria-label=\"Decrease Minutes\">\n </eui-icon-svg>\n </div>\n </div>\n <ng-container *ngIf=\"hasSeconds\">\n <div class=\"eui-timepicker__spacer\">:</div>\n <div class=\"eui-timepicker__input-container\">\n <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__seconds-up\">\n <eui-icon-svg\n (click)=\"changeSeconds(stepSeconds)\"\n [class.time-control--disabled]=\"secondsUpDisabled\"\n icon=\"chevron-up:sharp\"\n fillColor=\"neutral-light\"\n [size]=\"iconSize\"\n role=\"button\"\n aria-label=\"Increase seconds\">\n </eui-icon-svg>\n </div>\n <input\n #inputrefsecs\n euiInputNumber\n [leadingZero]=\"2\"\n [digits]=\"2\"\n [fractionDigits]=\"0\"\n class=\"eui-timepicker__input\"\n placeholder=\"SS\"\n [ngModel]=\"secs\"\n (ngModelChange)=\"updateSeconds($event)\"\n [readonly]=\"isreadOnly\"\n aria-label=\"Seconds\"\n [attr.aria-required]=\"hasAriaRequiredAttribute ? 'true' : null\"\n (keydown.ArrowUp)=\"changeSeconds(stepSeconds); $event.preventDefault()\"\n (keydown.ArrowDown)=\"changeSeconds(-stepSeconds); $event.preventDefault()\" />\n <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__seconds-down\">\n <eui-icon-svg\n (click)=\"changeSeconds(-stepSeconds)\"\n [class.time-control--disabled]=\"secondsDownDisabled\"\n icon=\"chevron-down:sharp\"\n fillColor=\"neutral-light\"\n [size]=\"iconSize\"\n role=\"button\"\n aria-label=\"Decrease seconds\">\n </eui-icon-svg>\n </div>\n </div>\n </ng-container>\n </ng-template>\n</div>\n", styles: [".eui-19 .eui-timepicker{align-items:center;display:flex}.eui-19 .eui-timepicker--centered{justify-content:center}.eui-19 .eui-timepicker__input-container{width:calc(4 * var(--eui-s-m))}.eui-19 .eui-timepicker__input{text-align:center;width:100%}.eui-19 .eui-timepicker__input--one-field{width:calc(6 * var(--eui-s-m))!important;margin-bottom:var(--eui-s-2xs)}.eui-19 .eui-timepicker__spacer{text-align:center;width:var(--eui-s-m)}.eui-19 .eui-timepicker__chevron{display:flex;justify-content:center;padding:var(--eui-s-xs)}.eui-19 .eui-timepicker__chevron .eui-icon-svg:not(.time-control--disabled):hover{cursor:pointer;color:var(--eui-c-primary)}.eui-19 .eui-timepicker__chevron .eui-icon-svg.time-control--disabled{background-image:none;box-shadow:none;cursor:not-allowed!important;opacity:var(--eui-o-50)}.eui-19 input[type=number]::-webkit-inner-spin-button,.eui-19 input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.eui-19 input[type=number]{-moz-appearance:textfield}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.EuiInputNumberComponent, selector: "input[euiInputNumber]", inputs: ["min", "max", "leadingZero", "isInvalid", "fractionDigits", "digits", "fillFraction", "roundUp", "noFormat", "value"] }, { kind: "directive", type: i3.EuiInputNumberDirective, selector: "input[euiInputNumber][formControl],input[euiInputNumber][formControlName],input[euiInputNumber][ngModel]" }, { kind: "component", type: i4.EuiInputTextComponent, selector: "input[euiInputText]", inputs: ["isInvalid"] }, { 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: "directive", type: i6.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }], encapsulation: i0.ViewEncapsulation.None }); }
368
368
  }
369
369
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EuiTimepickerComponent, decorators: [{
370
370
  type: Component,
371
- args: [{ selector: 'eui-timepicker', encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"eui-timepicker\" [class.eui-timepicker--centered]=\"isDatetimepicker\" attr.data-e2e=\"{{ e2eAttr }}\">\n <ng-container *ngIf=\"isOneInputField; else multipleInputs\">\n <input\n [class.eui-timepicker__input--one-field]=\"isDatetimepicker\"\n euiInputText\n [id]=\"inputId\"\n mask=\"{{ timeMask }}\"\n [leadZeroDateTime]=\"true\"\n [placeholder]=\"placeholder\"\n [attr.aria-label]=\"oneInputFormControl.value?oneInputFormControl.value:'No time value'\"\n [formControl]=\"oneInputFormControl\"\n (focusout)=\"onFocusOut()\"\n [dropSpecialCharacters]=\"false\"\n [readonly]=\"isreadOnly\" />\n </ng-container>\n\n <ng-template #multipleInputs>\n <div class=\"eui-timepicker__input-container\">\n <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__hours-up\">\n <eui-icon-svg\n (click)=\"changeHours(stepHours)\"\n [class.time-control--disabled]=\"hoursUpDisabled\"\n icon=\"chevron-up:sharp\"\n fillColor=\"neutral-light\"\n [size]=\"iconSize\"\n role=\"button\"\n aria-label=\"Increase Hours\">\n </eui-icon-svg>\n </div>\n <input\n #inputrefhours\n euiInputNumber\n [leadingZero]=\"2\"\n [digits]=\"2\"\n [fractionDigits]=\"0\"\n class=\"eui-timepicker__input\"\n placeholder=\"HH\"\n [ngModel]=\"hours\"\n (ngModelChange)=\"updateHours($event)\"\n [readonly]=\"isreadOnly\"\n aria-label=\"Hours\"\n [attr.aria-required]=\"hasAriaRequiredAttribute ? 'true' : null\"\n (keydown.ArrowUp)=\"changeHours(stepHours); $event.preventDefault()\"\n (keydown.ArrowDown)=\"changeHours(-stepHours); $event.preventDefault()\" />\n <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__hours-down\">\n <eui-icon-svg\n (click)=\"changeHours(-stepHours)\"\n [class.time-control--disabled]=\"hoursDownDisabled\"\n icon=\"chevron-down:sharp\"\n fillColor=\"neutral-light\"\n [size]=\"iconSize\"\n role=\"button\"\n aria-label=\"Decrease Hours\">\n </eui-icon-svg>\n </div>\n </div>\n <div class=\"eui-timepicker__spacer\">:</div>\n <div class=\"eui-timepicker__input-container\">\n <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__minutes-up\">\n <eui-icon-svg\n (click)=\"changeMinutes(stepMinutes)\"\n [class.time-control--disabled]=\"minutesUpDisabled\"\n icon=\"chevron-up:sharp\"\n fillColor=\"neutral-light\"\n [size]=\"iconSize\"\n role=\"button\"\n aria-label=\"Increase Minutes\">\n </eui-icon-svg>\n </div>\n <input\n #inputrefmins\n euiInputNumber\n [leadingZero]=\"2\"\n [digits]=\"2\"\n [fractionDigits]=\"0\"\n class=\"eui-timepicker__input\"\n placeholder=\"MM\"\n [ngModel]=\"mins\"\n (ngModelChange)=\"updateMinutes($event)\"\n [readonly]=\"isreadOnly\"\n aria-label=\"Minutes\"\n [attr.aria-required]=\"hasAriaRequiredAttribute ? 'true' : null\"\n (keydown.ArrowUp)=\"changeMinutes(stepMinutes); $event.preventDefault()\"\n (keydown.ArrowDown)=\"changeMinutes(-stepMinutes); $event.preventDefault()\" />\n <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__minutes-down\">\n <eui-icon-svg\n (click)=\"changeMinutes(-stepMinutes)\"\n [class.time-control--disabled]=\"minutesDownDisabled\"\n icon=\"chevron-down:sharp\"\n fillColor=\"neutral-light\"\n [size]=\"iconSize\"\n role=\"button\"\n aria-label=\"Decrease Minutes\">\n </eui-icon-svg>\n </div>\n </div>\n <ng-container *ngIf=\"hasSeconds\">\n <div class=\"eui-timepicker__spacer\">:</div>\n <div class=\"eui-timepicker__input-container\">\n <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__seconds-up\">\n <eui-icon-svg\n (click)=\"changeSeconds(stepSeconds)\"\n [class.time-control--disabled]=\"secondsUpDisabled\"\n icon=\"chevron-up:sharp\"\n fillColor=\"neutral-light\"\n [size]=\"iconSize\"\n role=\"button\"\n aria-label=\"Increase seconds\">\n </eui-icon-svg>\n </div>\n <input\n #inputrefsecs\n euiInputNumber\n [leadingZero]=\"2\"\n [digits]=\"2\"\n [fractionDigits]=\"0\"\n class=\"eui-timepicker__input\"\n placeholder=\"SS\"\n [ngModel]=\"secs\"\n (ngModelChange)=\"updateSeconds($event)\"\n [readonly]=\"isreadOnly\"\n aria-label=\"Seconds\"\n [attr.aria-required]=\"hasAriaRequiredAttribute ? 'true' : null\"\n (keydown.ArrowUp)=\"changeSeconds(stepSeconds); $event.preventDefault()\"\n (keydown.ArrowDown)=\"changeSeconds(-stepSeconds); $event.preventDefault()\" />\n <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__seconds-down\">\n <eui-icon-svg\n (click)=\"changeSeconds(-stepSeconds)\"\n [class.time-control--disabled]=\"secondsDownDisabled\"\n icon=\"chevron-down:sharp\"\n fillColor=\"neutral-light\"\n [size]=\"iconSize\"\n role=\"button\"\n aria-label=\"Decrease seconds\">\n </eui-icon-svg>\n </div>\n </div>\n </ng-container>\n </ng-template>\n</div>\n", styles: [".eui-19 .eui-timepicker{align-items:center;display:flex}.eui-19 .eui-timepicker--centered{justify-content:center}.eui-19 .eui-timepicker__input-container{width:calc(4 * var(--eui-s-m))}.eui-19 .eui-timepicker__input{text-align:center;width:100%}.eui-19 .eui-timepicker__input--one-field{width:calc(6 * var(--eui-s-m))!important;margin-bottom:var(--eui-s-2xs)}.eui-19 .eui-timepicker__spacer{text-align:center;width:var(--eui-s-m)}.eui-19 .eui-timepicker__chevron{display:flex;justify-content:center;padding:var(--eui-s-xs)}.eui-19 .eui-timepicker__chevron .eui-icon-svg:not(.time-control--disabled):hover{cursor:pointer;color:var(--eui-c-primary-dark)}.eui-19 .eui-timepicker__chevron .eui-icon-svg.time-control--disabled{background-image:none;box-shadow:none;cursor:not-allowed!important;opacity:var(--eui-o-50)}.eui-19 input[type=number]::-webkit-inner-spin-button,.eui-19 input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.eui-19 input[type=number]{-moz-appearance:textfield}\n"] }]
371
+ args: [{ selector: 'eui-timepicker', encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"eui-timepicker\" [class.eui-timepicker--centered]=\"isDatetimepicker\" attr.data-e2e=\"{{ e2eAttr }}\">\n <ng-container *ngIf=\"isOneInputField; else multipleInputs\">\n <input\n [class.eui-timepicker__input--one-field]=\"isDatetimepicker\"\n euiInputText\n [id]=\"inputId\"\n mask=\"{{ timeMask }}\"\n [leadZeroDateTime]=\"true\"\n [placeholder]=\"placeholder\"\n [attr.aria-label]=\"oneInputFormControl.value?oneInputFormControl.value:'No time value'\"\n [formControl]=\"oneInputFormControl\"\n (focusout)=\"onFocusOut()\"\n [dropSpecialCharacters]=\"false\"\n [readonly]=\"isreadOnly\" />\n </ng-container>\n\n <ng-template #multipleInputs>\n <div class=\"eui-timepicker__input-container\">\n <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__hours-up\">\n <eui-icon-svg\n (click)=\"changeHours(stepHours)\"\n [class.time-control--disabled]=\"hoursUpDisabled\"\n icon=\"chevron-up:sharp\"\n fillColor=\"neutral-light\"\n [size]=\"iconSize\"\n role=\"button\"\n aria-label=\"Increase Hours\">\n </eui-icon-svg>\n </div>\n <input\n #inputrefhours\n euiInputNumber\n [leadingZero]=\"2\"\n [digits]=\"2\"\n [fractionDigits]=\"0\"\n class=\"eui-timepicker__input\"\n placeholder=\"HH\"\n [ngModel]=\"hours\"\n (ngModelChange)=\"updateHours($event)\"\n [readonly]=\"isreadOnly\"\n aria-label=\"Hours\"\n [attr.aria-required]=\"hasAriaRequiredAttribute ? 'true' : null\"\n (keydown.ArrowUp)=\"changeHours(stepHours); $event.preventDefault()\"\n (keydown.ArrowDown)=\"changeHours(-stepHours); $event.preventDefault()\" />\n <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__hours-down\">\n <eui-icon-svg\n (click)=\"changeHours(-stepHours)\"\n [class.time-control--disabled]=\"hoursDownDisabled\"\n icon=\"chevron-down:sharp\"\n fillColor=\"neutral-light\"\n [size]=\"iconSize\"\n role=\"button\"\n aria-label=\"Decrease Hours\">\n </eui-icon-svg>\n </div>\n </div>\n <div class=\"eui-timepicker__spacer\">:</div>\n <div class=\"eui-timepicker__input-container\">\n <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__minutes-up\">\n <eui-icon-svg\n (click)=\"changeMinutes(stepMinutes)\"\n [class.time-control--disabled]=\"minutesUpDisabled\"\n icon=\"chevron-up:sharp\"\n fillColor=\"neutral-light\"\n [size]=\"iconSize\"\n role=\"button\"\n aria-label=\"Increase Minutes\">\n </eui-icon-svg>\n </div>\n <input\n #inputrefmins\n euiInputNumber\n [leadingZero]=\"2\"\n [digits]=\"2\"\n [fractionDigits]=\"0\"\n class=\"eui-timepicker__input\"\n placeholder=\"MM\"\n [ngModel]=\"mins\"\n (ngModelChange)=\"updateMinutes($event)\"\n [readonly]=\"isreadOnly\"\n aria-label=\"Minutes\"\n [attr.aria-required]=\"hasAriaRequiredAttribute ? 'true' : null\"\n (keydown.ArrowUp)=\"changeMinutes(stepMinutes); $event.preventDefault()\"\n (keydown.ArrowDown)=\"changeMinutes(-stepMinutes); $event.preventDefault()\" />\n <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__minutes-down\">\n <eui-icon-svg\n (click)=\"changeMinutes(-stepMinutes)\"\n [class.time-control--disabled]=\"minutesDownDisabled\"\n icon=\"chevron-down:sharp\"\n fillColor=\"neutral-light\"\n [size]=\"iconSize\"\n role=\"button\"\n aria-label=\"Decrease Minutes\">\n </eui-icon-svg>\n </div>\n </div>\n <ng-container *ngIf=\"hasSeconds\">\n <div class=\"eui-timepicker__spacer\">:</div>\n <div class=\"eui-timepicker__input-container\">\n <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__seconds-up\">\n <eui-icon-svg\n (click)=\"changeSeconds(stepSeconds)\"\n [class.time-control--disabled]=\"secondsUpDisabled\"\n icon=\"chevron-up:sharp\"\n fillColor=\"neutral-light\"\n [size]=\"iconSize\"\n role=\"button\"\n aria-label=\"Increase seconds\">\n </eui-icon-svg>\n </div>\n <input\n #inputrefsecs\n euiInputNumber\n [leadingZero]=\"2\"\n [digits]=\"2\"\n [fractionDigits]=\"0\"\n class=\"eui-timepicker__input\"\n placeholder=\"SS\"\n [ngModel]=\"secs\"\n (ngModelChange)=\"updateSeconds($event)\"\n [readonly]=\"isreadOnly\"\n aria-label=\"Seconds\"\n [attr.aria-required]=\"hasAriaRequiredAttribute ? 'true' : null\"\n (keydown.ArrowUp)=\"changeSeconds(stepSeconds); $event.preventDefault()\"\n (keydown.ArrowDown)=\"changeSeconds(-stepSeconds); $event.preventDefault()\" />\n <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron eui-timepicker__seconds-down\">\n <eui-icon-svg\n (click)=\"changeSeconds(-stepSeconds)\"\n [class.time-control--disabled]=\"secondsDownDisabled\"\n icon=\"chevron-down:sharp\"\n fillColor=\"neutral-light\"\n [size]=\"iconSize\"\n role=\"button\"\n aria-label=\"Decrease seconds\">\n </eui-icon-svg>\n </div>\n </div>\n </ng-container>\n </ng-template>\n</div>\n", styles: [".eui-19 .eui-timepicker{align-items:center;display:flex}.eui-19 .eui-timepicker--centered{justify-content:center}.eui-19 .eui-timepicker__input-container{width:calc(4 * var(--eui-s-m))}.eui-19 .eui-timepicker__input{text-align:center;width:100%}.eui-19 .eui-timepicker__input--one-field{width:calc(6 * var(--eui-s-m))!important;margin-bottom:var(--eui-s-2xs)}.eui-19 .eui-timepicker__spacer{text-align:center;width:var(--eui-s-m)}.eui-19 .eui-timepicker__chevron{display:flex;justify-content:center;padding:var(--eui-s-xs)}.eui-19 .eui-timepicker__chevron .eui-icon-svg:not(.time-control--disabled):hover{cursor:pointer;color:var(--eui-c-primary)}.eui-19 .eui-timepicker__chevron .eui-icon-svg.time-control--disabled{background-image:none;box-shadow:none;cursor:not-allowed!important;opacity:var(--eui-o-50)}.eui-19 input[type=number]::-webkit-inner-spin-button,.eui-19 input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.eui-19 input[type=number]{-moz-appearance:textfield}\n"] }]
372
372
  }], ctorParameters: () => [{ type: undefined, decorators: [{
373
373
  type: Optional
374
374
  }, {