@eui/components 18.2.0-snapshot-1724769429547 → 18.2.0-snapshot-1724807614589

package/esm2022/eui-timebar/eui-timebar.component.mjs

@@ -249,10 +249,10 @@ export class EuiTimebarComponent {
             return 0;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: EuiTimebarComponent, deps: [{ token: i1.EuiAppShellService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.1.0", type: EuiTimebarComponent, 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-18 .eui-timebar{border-bottom:2px solid var(--eui-c-neutral-lightest);margin:6rem 3rem;padding:5px;position:relative}.eui-18 .eui-timebar__step{border:7px solid var(--eui-c-primary);border-radius:var(--eui-br-max);height:14px;position:absolute;width:14px}.eui-18 .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-18 .eui-timebar__step-date-item--with-end-date{left:2.5rem;top:-1.75rem}.eui-18 .eui-timebar__step--with-current-date-marker.hint--top:before,.eui-18 .eui-timebar__step--with-current-date-marker.hint--top:after{bottom:25px}.eui-18 .eui-timebar__current-progress{border-bottom:3px solid var(--eui-c-primary);padding-top:5px;position:absolute}.eui-18 .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-18 .eui-timebar__current-date-marker-step{bottom:calc(-1 * var(--eui-s-m) - 2px);color:var(--eui-c-danger-dark);position:absolute}.eui-18 .eui-timebar__start-label,.eui-18 .eui-timebar__end-label{margin-top:6.5rem;font:var(--eui-f-s-bold)}.eui-18 .eui-timebar__start-label{text-align:right}.eui-18 .eui-timebar__step-date-item--with-end-date{margin:0;padding:0}.eui-18 .eui-timebar__step-label{margin-left:-4rem;margin-top:.7rem;overflow:hidden;position:absolute;text-align:center;width:8rem}.eui-18 .eui-timebar__legend{margin-left:var(--eui-s-s);margin-top:3rem}.eui-18 .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-18 .eui-timebar__legend-item-label{flex:1}.eui-18 .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-18 .eui-timebar__grouped__step{border-radius:var(--eui-br-m);display:block;padding:3px 8px}.eui-18 .eui-timebar__grouped__step.eui-timebar__step--info{background-color:var(--eui-c-info)}.eui-18 .eui-timebar__grouped__step.eui-timebar__step--success{background-color:var(--eui-c-success-dark)}.eui-18 .eui-timebar__grouped__step.eui-timebar__step--warning{background-color:var(--eui-c-warning)}.eui-18 .eui-timebar__grouped__step.eui-timebar__step--danger{background-color:var(--eui-c-danger-dark)}.eui-18 .eui-timebar__step--info{border-color:var(--eui-c-info)}.eui-18 .eui-timebar__step--info .eui-timebar__step-date-item{background-color:var(--eui-c-info)}.eui-18 .eui-timebar__step--success{border-color:var(--eui-c-success-dark)}.eui-18 .eui-timebar__step--success .eui-timebar__step-date-item{background-color:var(--eui-c-success-dark)}.eui-18 .eui-timebar__step--warning{border-color:var(--eui-c-warning)}.eui-18 .eui-timebar__step--warning .eui-timebar__step-date-item{background-color:var(--eui-c-warning)}.eui-18 .eui-timebar__step--danger{border-color:var(--eui-c-danger-dark)}.eui-18 .eui-timebar__step--danger .eui-timebar__step-date-item{background-color:var(--eui-c-danger-dark)}.eui-18 .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-18 .eui-timebar__legend-item-icon--info{color:var(--eui-c-info)}.eui-18 .eui-timebar__legend-item-icon--success{color:var(--eui-c-success-dark)}.eui-18 .eui-timebar__legend-item-icon--warning{color:var(--eui-c-warning)}.eui-18 .eui-timebar__legend-item-icon--danger{color:var(--eui-c-danger-dark)}@media screen and (max-width: 767px){.eui-18 .eui-timebar{margin:5rem var(--eui-s-m)}.eui-18 .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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: EuiTimebarComponent, deps: [{ token: i1.EuiAppShellService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.1", type: EuiTimebarComponent, 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-18 .eui-timebar{border-bottom:2px solid var(--eui-c-neutral-lightest);margin:6rem 3rem;padding:5px;position:relative}.eui-18 .eui-timebar__step{border:7px solid var(--eui-c-primary);border-radius:var(--eui-br-max);height:14px;position:absolute;width:14px}.eui-18 .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-18 .eui-timebar__step-date-item--with-end-date{left:2.5rem;top:-1.75rem}.eui-18 .eui-timebar__step--with-current-date-marker.hint--top:before,.eui-18 .eui-timebar__step--with-current-date-marker.hint--top:after{bottom:25px}.eui-18 .eui-timebar__current-progress{border-bottom:3px solid var(--eui-c-primary);padding-top:5px;position:absolute}.eui-18 .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-18 .eui-timebar__current-date-marker-step{bottom:calc(-1 * var(--eui-s-m) - 2px);color:var(--eui-c-danger-dark);position:absolute}.eui-18 .eui-timebar__start-label,.eui-18 .eui-timebar__end-label{margin-top:6.5rem;font:var(--eui-f-s-bold)}.eui-18 .eui-timebar__start-label{text-align:right}.eui-18 .eui-timebar__step-date-item--with-end-date{margin:0;padding:0}.eui-18 .eui-timebar__step-label{margin-left:-4rem;margin-top:.7rem;overflow:hidden;position:absolute;text-align:center;width:8rem}.eui-18 .eui-timebar__legend{margin-left:var(--eui-s-s);margin-top:3rem}.eui-18 .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-18 .eui-timebar__legend-item-label{flex:1}.eui-18 .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-18 .eui-timebar__grouped__step{border-radius:var(--eui-br-m);display:block;padding:3px 8px}.eui-18 .eui-timebar__grouped__step.eui-timebar__step--info{background-color:var(--eui-c-info)}.eui-18 .eui-timebar__grouped__step.eui-timebar__step--success{background-color:var(--eui-c-success-dark)}.eui-18 .eui-timebar__grouped__step.eui-timebar__step--warning{background-color:var(--eui-c-warning)}.eui-18 .eui-timebar__grouped__step.eui-timebar__step--danger{background-color:var(--eui-c-danger-dark)}.eui-18 .eui-timebar__step--info{border-color:var(--eui-c-info)}.eui-18 .eui-timebar__step--info .eui-timebar__step-date-item{background-color:var(--eui-c-info)}.eui-18 .eui-timebar__step--success{border-color:var(--eui-c-success-dark)}.eui-18 .eui-timebar__step--success .eui-timebar__step-date-item{background-color:var(--eui-c-success-dark)}.eui-18 .eui-timebar__step--warning{border-color:var(--eui-c-warning)}.eui-18 .eui-timebar__step--warning .eui-timebar__step-date-item{background-color:var(--eui-c-warning)}.eui-18 .eui-timebar__step--danger{border-color:var(--eui-c-danger-dark)}.eui-18 .eui-timebar__step--danger .eui-timebar__step-date-item{background-color:var(--eui-c-danger-dark)}.eui-18 .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-18 .eui-timebar__legend-item-icon--info{color:var(--eui-c-info)}.eui-18 .eui-timebar__legend-item-icon--success{color:var(--eui-c-success-dark)}.eui-18 .eui-timebar__legend-item-icon--warning{color:var(--eui-c-warning)}.eui-18 .eui-timebar__legend-item-icon--danger{color:var(--eui-c-danger-dark)}@media screen and (max-width: 767px){.eui-18 .eui-timebar{margin:5rem var(--eui-s-m)}.eui-18 .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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: EuiTimebarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: EuiTimebarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'eui-timebar', encapsulation: ViewEncapsulation.None, 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-18 .eui-timebar{border-bottom:2px solid var(--eui-c-neutral-lightest);margin:6rem 3rem;padding:5px;position:relative}.eui-18 .eui-timebar__step{border:7px solid var(--eui-c-primary);border-radius:var(--eui-br-max);height:14px;position:absolute;width:14px}.eui-18 .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-18 .eui-timebar__step-date-item--with-end-date{left:2.5rem;top:-1.75rem}.eui-18 .eui-timebar__step--with-current-date-marker.hint--top:before,.eui-18 .eui-timebar__step--with-current-date-marker.hint--top:after{bottom:25px}.eui-18 .eui-timebar__current-progress{border-bottom:3px solid var(--eui-c-primary);padding-top:5px;position:absolute}.eui-18 .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-18 .eui-timebar__current-date-marker-step{bottom:calc(-1 * var(--eui-s-m) - 2px);color:var(--eui-c-danger-dark);position:absolute}.eui-18 .eui-timebar__start-label,.eui-18 .eui-timebar__end-label{margin-top:6.5rem;font:var(--eui-f-s-bold)}.eui-18 .eui-timebar__start-label{text-align:right}.eui-18 .eui-timebar__step-date-item--with-end-date{margin:0;padding:0}.eui-18 .eui-timebar__step-label{margin-left:-4rem;margin-top:.7rem;overflow:hidden;position:absolute;text-align:center;width:8rem}.eui-18 .eui-timebar__legend{margin-left:var(--eui-s-s);margin-top:3rem}.eui-18 .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-18 .eui-timebar__legend-item-label{flex:1}.eui-18 .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-18 .eui-timebar__grouped__step{border-radius:var(--eui-br-m);display:block;padding:3px 8px}.eui-18 .eui-timebar__grouped__step.eui-timebar__step--info{background-color:var(--eui-c-info)}.eui-18 .eui-timebar__grouped__step.eui-timebar__step--success{background-color:var(--eui-c-success-dark)}.eui-18 .eui-timebar__grouped__step.eui-timebar__step--warning{background-color:var(--eui-c-warning)}.eui-18 .eui-timebar__grouped__step.eui-timebar__step--danger{background-color:var(--eui-c-danger-dark)}.eui-18 .eui-timebar__step--info{border-color:var(--eui-c-info)}.eui-18 .eui-timebar__step--info .eui-timebar__step-date-item{background-color:var(--eui-c-info)}.eui-18 .eui-timebar__step--success{border-color:var(--eui-c-success-dark)}.eui-18 .eui-timebar__step--success .eui-timebar__step-date-item{background-color:var(--eui-c-success-dark)}.eui-18 .eui-timebar__step--warning{border-color:var(--eui-c-warning)}.eui-18 .eui-timebar__step--warning .eui-timebar__step-date-item{background-color:var(--eui-c-warning)}.eui-18 .eui-timebar__step--danger{border-color:var(--eui-c-danger-dark)}.eui-18 .eui-timebar__step--danger .eui-timebar__step-date-item{background-color:var(--eui-c-danger-dark)}.eui-18 .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-18 .eui-timebar__legend-item-icon--info{color:var(--eui-c-info)}.eui-18 .eui-timebar__legend-item-icon--success{color:var(--eui-c-success-dark)}.eui-18 .eui-timebar__legend-item-icon--warning{color:var(--eui-c-warning)}.eui-18 .eui-timebar__legend-item-icon--danger{color:var(--eui-c-danger-dark)}@media screen and (max-width: 767px){.eui-18 .eui-timebar{margin:5rem var(--eui-s-m)}.eui-18 .eui-timebar__legend{margin-bottom:var(--eui-s-l);margin-left:18px}}\n"] }]
         }], ctorParameters: () => [{ type: i1.EuiAppShellService }, { type: i0.ChangeDetectorRef }], propDecorators: { container: [{
@@ -287,11 +287,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
                 args: [{ transform: booleanAttribute }]
             }] } });
 export class EuiTimebarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: EuiTimebarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: EuiTimebarModule, declarations: [EuiTimebarComponent], imports: [CommonModule, EuiIconModule], exports: [EuiTimebarComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: EuiTimebarModule, imports: [CommonModule, EuiIconModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: EuiTimebarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.1", ngImport: i0, type: EuiTimebarModule, declarations: [EuiTimebarComponent], imports: [CommonModule, EuiIconModule], exports: [EuiTimebarComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: EuiTimebarModule, imports: [CommonModule, EuiIconModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: EuiTimebarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: EuiTimebarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, EuiIconModule],

package/esm2022/eui-timeline/eui-timeline-item.component.mjs

@@ -18,10 +18,10 @@ export class EuiTimelineItemComponent {
             .join(' ')
             .trim();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: EuiTimelineItemComponent, deps: [{ token: i1.BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.1.0", type: EuiTimelineItemComponent, 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-18 .eui-timeline{display:flex;flex-direction:column;margin:0;padding:0;position:relative;width:100%}.eui-18 .eui-timeline .eui-timeline-item{display:flex;flex-direction:row;list-style:none;margin-bottom:var(--eui-s-m);position:relative;width:100%}.eui-18 .eui-timeline .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-18 .eui-timeline .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-18 .eui-timeline .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-18 .eui-timeline .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-18 .eui-timeline .eui-timeline-item .eui-timeline-item__content{position:relative;top:calc(-1 * var(--eui-s-2xs));width:100%}.eui-18 .eui-timeline .eui-timeline-item .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-neutral);font:var(--eui-f-l)}.eui-18 .eui-timeline .eui-timeline-item .eui-timeline-item__content .eui-timeline-item__subtitle{color:var(--eui-c-neutral-light)}.eui-18 .eui-timeline .eui-timeline-item .eui-timeline-item__date{color:var(--eui-c-neutral);font:var(--eui-f-m-bold)}.eui-18 .eui-timeline .eui-timeline-item .eui-timeline-item__time{color:var(--eui-c-neutral-light)}.eui-18 .eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__icon.eui-timeline-item__icon--group{margin:2px calc(var(--eui-s-xl) + 2px)}.eui-18 .eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__icon:after{left:calc(1 * var(--eui-s-m) + 10px)!important}.eui-18 .eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__content{padding-bottom:var(--eui-s-s)}.eui-18 .eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__content .eui-timeline-item__date{color:var(--eui-c-neutral);margin-top:var(--eui-s-xs);position:relative;font:var(--eui-f-m-bold)}.eui-18 .eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-primary)}.eui-18 .eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content,.eui-18 .eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-primary-dark)}.eui-18 .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-18 .eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content,.eui-18 .eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-neutral-light)}.eui-18 .eui-timeline-item.eui-timeline-item--info .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-info)}.eui-18 .eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content,.eui-18 .eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-info-dark)}.eui-18 .eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-warning)}.eui-18 .eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content,.eui-18 .eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-warning-darker)}.eui-18 .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-18 .eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content,.eui-18 .eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-success-dark)}.eui-18 .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-18 .eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content,.eui-18 .eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-danger-dark)}.eui-18 .eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-accent)}.eui-18 .eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content,.eui-18 .eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-accent-dark)}.eui-18 .eui-timeline-item.eui-timeline-item--more{margin-bottom:0}.eui-18 .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"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: EuiTimelineItemComponent, deps: [{ token: i1.BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.1", type: EuiTimelineItemComponent, 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-18 .eui-timeline{display:flex;flex-direction:column;margin:0;padding:0;position:relative;width:100%}.eui-18 .eui-timeline .eui-timeline-item{display:flex;flex-direction:row;list-style:none;margin-bottom:var(--eui-s-m);position:relative;width:100%}.eui-18 .eui-timeline .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-18 .eui-timeline .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-18 .eui-timeline .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-18 .eui-timeline .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-18 .eui-timeline .eui-timeline-item .eui-timeline-item__content{position:relative;top:calc(-1 * var(--eui-s-2xs));width:100%}.eui-18 .eui-timeline .eui-timeline-item .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-neutral);font:var(--eui-f-l)}.eui-18 .eui-timeline .eui-timeline-item .eui-timeline-item__content .eui-timeline-item__subtitle{color:var(--eui-c-neutral-light)}.eui-18 .eui-timeline .eui-timeline-item .eui-timeline-item__date{color:var(--eui-c-neutral);font:var(--eui-f-m-bold)}.eui-18 .eui-timeline .eui-timeline-item .eui-timeline-item__time{color:var(--eui-c-neutral-light)}.eui-18 .eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__icon.eui-timeline-item__icon--group{margin:2px calc(var(--eui-s-xl) + 2px)}.eui-18 .eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__icon:after{left:calc(1 * var(--eui-s-m) + 10px)!important}.eui-18 .eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__content{padding-bottom:var(--eui-s-s)}.eui-18 .eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__content .eui-timeline-item__date{color:var(--eui-c-neutral);margin-top:var(--eui-s-xs);position:relative;font:var(--eui-f-m-bold)}.eui-18 .eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-primary)}.eui-18 .eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content,.eui-18 .eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-primary-dark)}.eui-18 .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-18 .eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content,.eui-18 .eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-neutral-light)}.eui-18 .eui-timeline-item.eui-timeline-item--info .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-info)}.eui-18 .eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content,.eui-18 .eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-info-dark)}.eui-18 .eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-warning)}.eui-18 .eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content,.eui-18 .eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-warning-darker)}.eui-18 .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-18 .eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content,.eui-18 .eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-success-dark)}.eui-18 .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-18 .eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content,.eui-18 .eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-danger-dark)}.eui-18 .eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-accent)}.eui-18 .eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content,.eui-18 .eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-accent-dark)}.eui-18 .eui-timeline-item.eui-timeline-item--more{margin-bottom:0}.eui-18 .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"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: EuiTimelineItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: EuiTimelineItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'eui-timeline-item', encapsulation: ViewEncapsulation.None, hostDirectives: [
                         {

package/esm2022/eui-timeline/eui-timeline.component.mjs

@@ -42,10 +42,10 @@ export class EuiTimelineComponent {
     getCssClasses() {
         return ['eui-timeline', this.isLeftAligned ? 'eui-timeline--left-aligned' : ''].join(' ').trim();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: EuiTimelineComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.1.0", type: EuiTimelineComponent, selector: "eui-timeline", inputs: { e2eAttr: "e2eAttr", isLeftAligned: ["isLeftAligned", "isLeftAligned", booleanAttribute] }, host: { properties: { "class": "this.cssClasses", "attr.data-e2e": "this.e2eAttr" } }, queries: [{ propertyName: "timelineItems", predicate: EuiTimelineItemComponent }], usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".eui-18 .eui-timeline{display:flex;flex-direction:column;margin:0;padding:0;position:relative;width:100%}.eui-18 .eui-timeline .eui-timeline-item{display:flex;flex-direction:row;list-style:none;margin-bottom:var(--eui-s-m);position:relative;width:100%}.eui-18 .eui-timeline .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-18 .eui-timeline .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-18 .eui-timeline .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-18 .eui-timeline .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-18 .eui-timeline .eui-timeline-item .eui-timeline-item__content{position:relative;top:calc(-1 * var(--eui-s-2xs));width:100%}.eui-18 .eui-timeline .eui-timeline-item .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-neutral);font:var(--eui-f-l)}.eui-18 .eui-timeline .eui-timeline-item .eui-timeline-item__content .eui-timeline-item__subtitle{color:var(--eui-c-neutral-light)}.eui-18 .eui-timeline .eui-timeline-item .eui-timeline-item__date{color:var(--eui-c-neutral);font:var(--eui-f-m-bold)}.eui-18 .eui-timeline .eui-timeline-item .eui-timeline-item__time{color:var(--eui-c-neutral-light)}.eui-18 .eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__icon.eui-timeline-item__icon--group{margin:2px calc(var(--eui-s-xl) + 2px)}.eui-18 .eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__icon:after{left:calc(1 * var(--eui-s-m) + 10px)!important}.eui-18 .eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__content{padding-bottom:var(--eui-s-s)}.eui-18 .eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__content .eui-timeline-item__date{color:var(--eui-c-neutral);margin-top:var(--eui-s-xs);position:relative;font:var(--eui-f-m-bold)}.eui-18 .eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-primary)}.eui-18 .eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content,.eui-18 .eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-primary-dark)}.eui-18 .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-18 .eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content,.eui-18 .eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-neutral-light)}.eui-18 .eui-timeline-item.eui-timeline-item--info .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-info)}.eui-18 .eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content,.eui-18 .eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-info-dark)}.eui-18 .eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-warning)}.eui-18 .eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content,.eui-18 .eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-warning-darker)}.eui-18 .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-18 .eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content,.eui-18 .eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-success-dark)}.eui-18 .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-18 .eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content,.eui-18 .eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-danger-dark)}.eui-18 .eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-accent)}.eui-18 .eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content,.eui-18 .eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-accent-dark)}.eui-18 .eui-timeline-item.eui-timeline-item--more{margin-bottom:0}.eui-18 .eui-timeline-item.eui-timeline-item--more .eui-timeline-item__content{padding-bottom:var(--eui-s-m)}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: EuiTimelineComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.1", type: EuiTimelineComponent, selector: "eui-timeline", inputs: { e2eAttr: "e2eAttr", isLeftAligned: ["isLeftAligned", "isLeftAligned", booleanAttribute] }, host: { properties: { "class": "this.cssClasses", "attr.data-e2e": "this.e2eAttr" } }, queries: [{ propertyName: "timelineItems", predicate: EuiTimelineItemComponent }], usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".eui-18 .eui-timeline{display:flex;flex-direction:column;margin:0;padding:0;position:relative;width:100%}.eui-18 .eui-timeline .eui-timeline-item{display:flex;flex-direction:row;list-style:none;margin-bottom:var(--eui-s-m);position:relative;width:100%}.eui-18 .eui-timeline .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-18 .eui-timeline .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-18 .eui-timeline .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-18 .eui-timeline .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-18 .eui-timeline .eui-timeline-item .eui-timeline-item__content{position:relative;top:calc(-1 * var(--eui-s-2xs));width:100%}.eui-18 .eui-timeline .eui-timeline-item .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-neutral);font:var(--eui-f-l)}.eui-18 .eui-timeline .eui-timeline-item .eui-timeline-item__content .eui-timeline-item__subtitle{color:var(--eui-c-neutral-light)}.eui-18 .eui-timeline .eui-timeline-item .eui-timeline-item__date{color:var(--eui-c-neutral);font:var(--eui-f-m-bold)}.eui-18 .eui-timeline .eui-timeline-item .eui-timeline-item__time{color:var(--eui-c-neutral-light)}.eui-18 .eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__icon.eui-timeline-item__icon--group{margin:2px calc(var(--eui-s-xl) + 2px)}.eui-18 .eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__icon:after{left:calc(1 * var(--eui-s-m) + 10px)!important}.eui-18 .eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__content{padding-bottom:var(--eui-s-s)}.eui-18 .eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__content .eui-timeline-item__date{color:var(--eui-c-neutral);margin-top:var(--eui-s-xs);position:relative;font:var(--eui-f-m-bold)}.eui-18 .eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-primary)}.eui-18 .eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content,.eui-18 .eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-primary-dark)}.eui-18 .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-18 .eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content,.eui-18 .eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-neutral-light)}.eui-18 .eui-timeline-item.eui-timeline-item--info .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-info)}.eui-18 .eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content,.eui-18 .eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-info-dark)}.eui-18 .eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-warning)}.eui-18 .eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content,.eui-18 .eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-warning-darker)}.eui-18 .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-18 .eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content,.eui-18 .eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-success-dark)}.eui-18 .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-18 .eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content,.eui-18 .eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-danger-dark)}.eui-18 .eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-accent)}.eui-18 .eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content,.eui-18 .eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-accent-dark)}.eui-18 .eui-timeline-item.eui-timeline-item--more{margin-bottom:0}.eui-18 .eui-timeline-item.eui-timeline-item--more .eui-timeline-item__content{padding-bottom:var(--eui-s-m)}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: EuiTimelineComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: EuiTimelineComponent, decorators: [{
             type: Component,
             args: [{ selector: 'eui-timeline', template: "<ng-content></ng-content>\n", styles: [".eui-18 .eui-timeline{display:flex;flex-direction:column;margin:0;padding:0;position:relative;width:100%}.eui-18 .eui-timeline .eui-timeline-item{display:flex;flex-direction:row;list-style:none;margin-bottom:var(--eui-s-m);position:relative;width:100%}.eui-18 .eui-timeline .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-18 .eui-timeline .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-18 .eui-timeline .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-18 .eui-timeline .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-18 .eui-timeline .eui-timeline-item .eui-timeline-item__content{position:relative;top:calc(-1 * var(--eui-s-2xs));width:100%}.eui-18 .eui-timeline .eui-timeline-item .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-neutral);font:var(--eui-f-l)}.eui-18 .eui-timeline .eui-timeline-item .eui-timeline-item__content .eui-timeline-item__subtitle{color:var(--eui-c-neutral-light)}.eui-18 .eui-timeline .eui-timeline-item .eui-timeline-item__date{color:var(--eui-c-neutral);font:var(--eui-f-m-bold)}.eui-18 .eui-timeline .eui-timeline-item .eui-timeline-item__time{color:var(--eui-c-neutral-light)}.eui-18 .eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__icon.eui-timeline-item__icon--group{margin:2px calc(var(--eui-s-xl) + 2px)}.eui-18 .eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__icon:after{left:calc(1 * var(--eui-s-m) + 10px)!important}.eui-18 .eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__content{padding-bottom:var(--eui-s-s)}.eui-18 .eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__content .eui-timeline-item__date{color:var(--eui-c-neutral);margin-top:var(--eui-s-xs);position:relative;font:var(--eui-f-m-bold)}.eui-18 .eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-primary)}.eui-18 .eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content,.eui-18 .eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-primary-dark)}.eui-18 .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-18 .eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content,.eui-18 .eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-neutral-light)}.eui-18 .eui-timeline-item.eui-timeline-item--info .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-info)}.eui-18 .eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content,.eui-18 .eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-info-dark)}.eui-18 .eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-warning)}.eui-18 .eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content,.eui-18 .eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-warning-darker)}.eui-18 .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-18 .eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content,.eui-18 .eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-success-dark)}.eui-18 .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-18 .eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content,.eui-18 .eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-danger-dark)}.eui-18 .eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-accent)}.eui-18 .eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content,.eui-18 .eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-accent-dark)}.eui-18 .eui-timeline-item.eui-timeline-item--more{margin-bottom:0}.eui-18 .eui-timeline-item.eui-timeline-item--more .eui-timeline-item__content{padding-bottom:var(--eui-s-m)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { cssClasses: [{

package/esm2022/eui-timeline/eui-timeline.module.mjs

@@ -4,11 +4,11 @@ import { EuiTimelineComponent } from './eui-timeline.component';
 import { EuiTimelineItemComponent } from './eui-timeline-item.component';
 import * as i0 from "@angular/core";
 export class EuiTimelineModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: EuiTimelineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: EuiTimelineModule, declarations: [EuiTimelineComponent, EuiTimelineItemComponent], imports: [CommonModule], exports: [EuiTimelineComponent, EuiTimelineItemComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: EuiTimelineModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: EuiTimelineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.1", ngImport: i0, type: EuiTimelineModule, declarations: [EuiTimelineComponent, EuiTimelineItemComponent], imports: [CommonModule], exports: [EuiTimelineComponent, EuiTimelineItemComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: EuiTimelineModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: EuiTimelineModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: EuiTimelineModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],

package/esm2022/eui-timepicker/eui-timepicker.component.mjs

@@ -355,10 +355,10 @@ export class EuiTimepickerComponent {
     updateInputAriaRequiredAttribute(control) {
         this.hasAriaRequiredAttribute = control?.control?.hasValidator(Validators.required);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: EuiTimepickerComponent, deps: [{ token: DYNAMIC_COMPONENT_CONFIG, optional: true }, { token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.1.0", type: EuiTimepickerComponent, 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-18 .eui-timepicker{align-items:center;display:flex}.eui-18 .eui-timepicker--centered{justify-content:center}.eui-18 .eui-timepicker__input-container{width:calc(4 * var(--eui-s-m))}.eui-18 .eui-timepicker__input{text-align:center;width:100%}.eui-18 .eui-timepicker__input--one-field{width:calc(6 * var(--eui-s-m));margin-bottom:var(--eui-s-2xs)}.eui-18 .eui-timepicker__spacer{text-align:center;width:var(--eui-s-m)}.eui-18 .eui-timepicker__chevron{display:flex;justify-content:center;padding:var(--eui-s-xs)}.eui-18 .eui-timepicker__chevron .eui-icon-svg:not(.time-control--disabled):hover{cursor:pointer;color:var(--eui-c-primary)}.eui-18 .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-18 input[type=number]::-webkit-inner-spin-button,.eui-18 input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.eui-18 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: EuiTimepickerComponent, deps: [{ token: DYNAMIC_COMPONENT_CONFIG, optional: true }, { token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.1", type: EuiTimepickerComponent, 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-18 .eui-timepicker{align-items:center;display:flex}.eui-18 .eui-timepicker--centered{justify-content:center}.eui-18 .eui-timepicker__input-container{width:calc(4 * var(--eui-s-m))}.eui-18 .eui-timepicker__input{text-align:center;width:100%}.eui-18 .eui-timepicker__input--one-field{width:calc(6 * var(--eui-s-m));margin-bottom:var(--eui-s-2xs)}.eui-18 .eui-timepicker__spacer{text-align:center;width:var(--eui-s-m)}.eui-18 .eui-timepicker__chevron{display:flex;justify-content:center;padding:var(--eui-s-xs)}.eui-18 .eui-timepicker__chevron .eui-icon-svg:not(.time-control--disabled):hover{cursor:pointer;color:var(--eui-c-primary)}.eui-18 .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-18 input[type=number]::-webkit-inner-spin-button,.eui-18 input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.eui-18 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: EuiTimepickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: EuiTimepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'eui-timepicker', encapsulation: ViewEncapsulation.None, 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-18 .eui-timepicker{align-items:center;display:flex}.eui-18 .eui-timepicker--centered{justify-content:center}.eui-18 .eui-timepicker__input-container{width:calc(4 * var(--eui-s-m))}.eui-18 .eui-timepicker__input{text-align:center;width:100%}.eui-18 .eui-timepicker__input--one-field{width:calc(6 * var(--eui-s-m));margin-bottom:var(--eui-s-2xs)}.eui-18 .eui-timepicker__spacer{text-align:center;width:var(--eui-s-m)}.eui-18 .eui-timepicker__chevron{display:flex;justify-content:center;padding:var(--eui-s-xs)}.eui-18 .eui-timepicker__chevron .eui-icon-svg:not(.time-control--disabled):hover{cursor:pointer;color:var(--eui-c-primary)}.eui-18 .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-18 input[type=number]::-webkit-inner-spin-button,.eui-18 input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.eui-18 input[type=number]{-moz-appearance:textfield}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{

package/esm2022/eui-timepicker/eui-timepicker.module.mjs

@@ -8,22 +8,22 @@ import { EuiInputTextModule } from '@eui/components/eui-input-text';
 import { EuiIconModule } from '@eui/components/eui-icon';
 import * as i0 from "@angular/core";
 export class EuiTimepickerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: EuiTimepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: EuiTimepickerModule, declarations: [EuiTimepickerComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: EuiTimepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.1", ngImport: i0, type: EuiTimepickerModule, declarations: [EuiTimepickerComponent], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             EuiInputNumberDirectiveModule,
             EuiInputTextModule,
             EuiIconModule,
             NgxMaskDirective], exports: [EuiTimepickerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: EuiTimepickerModule, providers: [provideNgxMask(), provideEnvironmentNgxMask()], imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: EuiTimepickerModule, providers: [provideNgxMask(), provideEnvironmentNgxMask()], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             EuiInputNumberDirectiveModule,
             EuiInputTextModule,
             EuiIconModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: EuiTimepickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: EuiTimepickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2022/eui-tree/eui-dropdown-tree.directive.mjs

@@ -46,10 +46,10 @@ export class EuiDropdownTreeDirective {
         }
         return 'No node selected.';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: EuiDropdownTreeDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.EuiDropdownComponent, host: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.0", type: EuiDropdownTreeDirective, selector: "eui-dropdown[euiDropdownTree]", inputs: { buttonTemplateRef: "buttonTemplateRef" }, queries: [{ propertyName: "euiTree", first: true, predicate: EuiTreeComponent, descendants: true }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: EuiDropdownTreeDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.EuiDropdownComponent, host: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.1", type: EuiDropdownTreeDirective, selector: "eui-dropdown[euiDropdownTree]", inputs: { buttonTemplateRef: "buttonTemplateRef" }, queries: [{ propertyName: "euiTree", first: true, predicate: EuiTreeComponent, descendants: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: EuiDropdownTreeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: EuiDropdownTreeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'eui-dropdown[euiDropdownTree]',
@@ -63,11 +63,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
                 args: [EuiTreeComponent, { static: false }]
             }] } });
 export class EuiDropdownTreeDirectiveModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: EuiDropdownTreeDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: EuiDropdownTreeDirectiveModule, declarations: [EuiDropdownTreeDirective], imports: [CommonModule], exports: [EuiDropdownTreeDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: EuiDropdownTreeDirectiveModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: EuiDropdownTreeDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.1", ngImport: i0, type: EuiDropdownTreeDirectiveModule, declarations: [EuiDropdownTreeDirective], imports: [CommonModule], exports: [EuiDropdownTreeDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: EuiDropdownTreeDirectiveModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: EuiDropdownTreeDirectiveModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: EuiDropdownTreeDirectiveModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],

package/esm2022/eui-tree/eui-tree-form-control.directive.mjs

@@ -45,8 +45,8 @@ export class EuiTreeFormControlDirective {
             this.onChange(this.euiTreeControlValueSetter(selectionChanges.selection));
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: EuiTreeFormControlDirective, deps: [{ token: i1.EuiTreeComponent, host: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.0", type: EuiTreeFormControlDirective, selector: "eui-tree[euiTreeFormControl]", inputs: { euiTreeControlValueSetter: "euiTreeControlValueSetter", euiTreeControlModelMapper: "euiTreeControlModelMapper" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: EuiTreeFormControlDirective, deps: [{ token: i1.EuiTreeComponent, host: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.1", type: EuiTreeFormControlDirective, selector: "eui-tree[euiTreeFormControl]", inputs: { euiTreeControlValueSetter: "euiTreeControlValueSetter", euiTreeControlModelMapper: "euiTreeControlModelMapper" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => EuiTreeFormControlDirective),
@@ -54,7 +54,7 @@ export class EuiTreeFormControlDirective {
             },
         ], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: EuiTreeFormControlDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: EuiTreeFormControlDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'eui-tree[euiTreeFormControl]',
@@ -74,11 +74,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
                 type: Input
             }] } });
 export class EuiTreeFormControlDirectiveModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: EuiTreeFormControlDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: EuiTreeFormControlDirectiveModule, declarations: [EuiTreeFormControlDirective], imports: [CommonModule], exports: [EuiTreeFormControlDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: EuiTreeFormControlDirectiveModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: EuiTreeFormControlDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.1", ngImport: i0, type: EuiTreeFormControlDirectiveModule, declarations: [EuiTreeFormControlDirective], imports: [CommonModule], exports: [EuiTreeFormControlDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: EuiTreeFormControlDirectiveModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: EuiTreeFormControlDirectiveModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: EuiTreeFormControlDirectiveModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],