@eui/components 18.2.0-snapshot-1724773712587 → 18.2.0-snapshot-1724856639646

package/fesm2022/eui-components-eui-timeline.mjs

@@ -1,29 +1,62 @@
 import * as i0 from '@angular/core';
-import { booleanAttribute, Component, ViewEncapsulation, HostBinding, Input, ContentChildren, NgModule } from '@angular/core';
+import { booleanAttribute, Component, HostBinding, Input, forwardRef, ViewEncapsulation, Host, Optional, Inject, NgModule } from '@angular/core';
 import * as i1 from '@eui/components/shared';
 import { BaseStatesDirective } from '@eui/components/shared';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 
+class EuiTimelineComponent {
+    constructor() {
+        this.e2eAttr = 'eui-timeline';
+    }
+    get cssClasses() {
+        return this.getCssClasses();
+    }
+    getCssClasses() {
+        return ['eui-timeline', this.isLeftAligned ? 'eui-timeline--left-aligned' : ''].join(' ').trim();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: EuiTimelineComponent, deps: [], 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" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, 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.2.1", ngImport: i0, type: EuiTimelineComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eui-timeline', template: '<ng-content></ng-content>', 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"] }]
+        }], propDecorators: { cssClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], e2eAttr: [{
+                type: HostBinding,
+                args: ['attr.data-e2e']
+            }, {
+                type: Input
+            }], isLeftAligned: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }] } });
+
 class EuiTimelineItemComponent {
     get cssClasses() {
         return this.getCssClasses();
     }
-    constructor(baseStatesDirective) {
+    constructor(timelineComponentParent, baseStatesDirective) {
         this.baseStatesDirective = baseStatesDirective;
         this.e2eAttr = 'eui-timeline-item';
         this.dateStyleClass = '';
         this.timeStyleClass = '';
+        this.timelineComponent = timelineComponentParent;
+    }
+    ngAfterContentInit() {
+        this.isLeftAligned = this.timelineComponent.isLeftAligned;
     }
     getCssClasses() {
         return [this.baseStatesDirective.getCssClasses('eui-timeline-item'), this.isGroup ? 'eui-timeline-item--more' : '']
             .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: forwardRef(() => EuiTimelineComponent), host: true, optional: true }, { 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: [
                         {
@@ -31,7 +64,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
                             inputs: ['euiSecondary', 'euiPrimary', 'euiSuccess', 'euiInfo', 'euiWarning', 'euiDanger', 'euiAccent', 'euiVariant'],
                         },
                     ], 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"] }]
-        }], ctorParameters: () => [{ type: i1.BaseStatesDirective }], propDecorators: { cssClasses: [{
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Host
+                }, {
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [forwardRef(() => EuiTimelineComponent)]
+                }] }, { type: i1.BaseStatesDirective }], propDecorators: { cssClasses: [{
                 type: HostBinding,
                 args: ['class']
             }], e2eAttr: [{
@@ -59,75 +99,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
                 args: [{ transform: booleanAttribute }]
             }] } });
 
-class EuiTimelineComponent {
-    get cssClasses() {
-        return this.getCssClasses();
-    }
-    constructor(cd, ngZone) {
-        this.cd = cd;
-        this.ngZone = ngZone;
-        this.e2eAttr = 'eui-timeline';
-    }
-    ngOnChanges(changes) {
-        if (changes.isLeftAligned) {
-            this.syncIsLeftAligned(this.timelineItems);
-        }
-    }
-    ngAfterContentInit() {
-        this.syncIsLeftAligned(this.timelineItems);
-        this.timelineItems.changes.subscribe((queryList) => {
-            // Defer changes to avoid ExpressionChangedAfterItHasBeenCheckedError
-            this.ngZone.runOutsideAngular(() => {
-                setTimeout(() => {
-                    this.syncIsLeftAligned(queryList);
-                    // Run change detection
-                    this.ngZone.run(() => {
-                        this.cd.detectChanges();
-                    });
-                });
-            });
-        });
-    }
-    /**
-     * Syncs the isLeftAligned property of the timeline items with the parent timeline
-     * @param list The list of timeline items
-     */
-    syncIsLeftAligned(list) {
-        list?.forEach((item) => {
-            item.isLeftAligned = this.isLeftAligned;
-        });
-    }
-    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"] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", 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: [{
-                type: HostBinding,
-                args: ['class']
-            }], e2eAttr: [{
-                type: HostBinding,
-                args: ['attr.data-e2e']
-            }, {
-                type: Input
-            }], isLeftAligned: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], timelineItems: [{
-                type: ContentChildren,
-                args: [EuiTimelineItemComponent]
-            }] } });
-
 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/fesm2022/eui-components-eui-timeline.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"eui-components-eui-timeline.mjs","sources":["../../eui-timeline/eui-timeline-item.component.ts","../../eui-timeline/eui-timeline-item.component.html","../../eui-timeline/eui-timeline.component.ts","../../eui-timeline/eui-timeline.component.html","../../eui-timeline/eui-timeline.module.ts","../../eui-timeline/eui-components-eui-timeline.ts"],"sourcesContent":["import { booleanAttribute, Component, HostBinding, Input, ViewEncapsulation } from '@angular/core';\nimport { BaseStatesDirective } from '@eui/components/shared';\n\n@Component({\n    selector: 'eui-timeline-item',\n    templateUrl: './eui-timeline-item.component.html',\n    styleUrls: ['./styles/_index.scss'],\n    encapsulation: ViewEncapsulation.None,\n    hostDirectives: [\n        {\n            directive: BaseStatesDirective,\n            inputs: ['euiSecondary', 'euiPrimary', 'euiSuccess', 'euiInfo', 'euiWarning', 'euiDanger', 'euiAccent', 'euiVariant'],\n        },\n    ],\n})\nexport class EuiTimelineItemComponent {\n    @HostBinding('class')\n    public get cssClasses(): string {\n        return this.getCssClasses();\n    }\n    @HostBinding('attr.data-e2e')\n    @Input()\n    e2eAttr = 'eui-timeline-item';\n\n    @Input() label: string;\n    @Input() subLabel: string;\n    @Input() date: string;\n    @Input() dateStyleClass = '';\n    @Input() time: string;\n    @Input() timeStyleClass = '';\n\n    @Input({ transform: booleanAttribute }) isLeftAligned: boolean;\n    @Input({ transform: booleanAttribute }) isGroup: boolean;\n\n    constructor(public baseStatesDirective: BaseStatesDirective) {}\n\n    private getCssClasses(): string {\n        return [this.baseStatesDirective.getCssClasses('eui-timeline-item'), this.isGroup ? 'eui-timeline-item--more' : '']\n            .join(' ')\n            .trim();\n    }\n}\n","<div *ngIf=\"!isLeftAligned\" class=\"eui-timeline-item__left-content\">\n    <div *ngIf=\"date\" class=\"eui-timeline-item__date {{ dateStyleClass }}\">{{ date }}</div>\n    <div *ngIf=\"time\" class=\"eui-timeline-item__time {{ timeStyleClass }}\">{{ time }}</div>\n</div>\n<div class=\"eui-timeline-item__icon\" [class.eui-timeline-item__icon--group]=\"isGroup\"></div>\n<div class=\"eui-timeline-item__content\">\n    <ng-container #customContent>\n        <ng-content></ng-content>\n    </ng-container>\n\n    <ng-container *ngIf=\"customContent?.childNodes.length === 0\">\n        <div class=\"eui-timeline-item__title\">{{ label }}</div>\n        <div class=\"eui-timeline-item__subtitle\">{{ subLabel }}</div>\n        <div *ngIf=\"isLeftAligned && date\" class=\"eui-timeline-item__date {{ dateStyleClass }}\">{{ date }}</div>\n        <div *ngIf=\"isLeftAligned && time\" class=\"eui-timeline-item__time {{ timeStyleClass }}\">{{ time }}</div>\n    </ng-container>\n</div>\n","import {\n    AfterContentInit,\n    booleanAttribute,\n    ChangeDetectorRef,\n    Component,\n    ContentChildren,\n    HostBinding,\n    Input,\n    NgZone,\n    OnChanges,\n    QueryList,\n    SimpleChanges,\n} from '@angular/core';\nimport { EuiTimelineItemComponent } from './eui-timeline-item.component';\n\n@Component({\n    selector: 'eui-timeline',\n    templateUrl: './eui-timeline.component.html',\n    styleUrls: ['./styles/_index.scss'],\n})\nexport class EuiTimelineComponent implements OnChanges, AfterContentInit {\n    @HostBinding('class')\n    public get cssClasses(): string {\n        return this.getCssClasses();\n    }\n    @HostBinding('attr.data-e2e') @Input() e2eAttr = 'eui-timeline';\n\n    @Input({ transform: booleanAttribute })\n    isLeftAligned: boolean;\n\n    @ContentChildren(EuiTimelineItemComponent) timelineItems: QueryList<EuiTimelineItemComponent>;\n\n    constructor(private cd: ChangeDetectorRef, private ngZone: NgZone) {\n    }\n\n    ngOnChanges(changes: SimpleChanges): void {\n        if (changes.isLeftAligned) {\n            this.syncIsLeftAligned(this.timelineItems);\n        }\n    }\n\n    ngAfterContentInit(): void {\n        this.syncIsLeftAligned(this.timelineItems);\n        this.timelineItems.changes.subscribe((queryList: QueryList<EuiTimelineItemComponent>) => {\n            // Defer changes to avoid ExpressionChangedAfterItHasBeenCheckedError\n            this.ngZone.runOutsideAngular(() => {\n                setTimeout(() => {\n                    this.syncIsLeftAligned(queryList);\n                    // Run change detection\n                    this.ngZone.run(() => {\n                        this.cd.detectChanges();\n                    });\n                });\n            });\n        });\n    }\n\n    /**\n     * Syncs the isLeftAligned property of the timeline items with the parent timeline\n     * @param list The list of timeline items\n     */\n    private syncIsLeftAligned(list: QueryList<EuiTimelineItemComponent>): void {\n        list?.forEach((item) => {\n            item.isLeftAligned = this.isLeftAligned;\n        });\n    }\n\n    private getCssClasses(): string {\n        return ['eui-timeline', this.isLeftAligned ? 'eui-timeline--left-aligned' : ''].join(' ').trim();\n    }\n}\n","<ng-content></ng-content>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { EuiTimelineComponent } from './eui-timeline.component';\nimport { EuiTimelineItemComponent } from './eui-timeline-item.component';\n\n@NgModule({\n    imports: [CommonModule],\n    exports: [EuiTimelineComponent, EuiTimelineItemComponent],\n    declarations: [EuiTimelineComponent, EuiTimelineItemComponent],\n})\nexport class EuiTimelineModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"eui-components-eui-timeline.mjs","sources":["../../eui-timeline/eui-timeline.component.ts","../../eui-timeline/eui-timeline-item.component.ts","../../eui-timeline/eui-timeline-item.component.html","../../eui-timeline/eui-timeline.module.ts","../../eui-timeline/eui-components-eui-timeline.ts"],"sourcesContent":["import {\n    booleanAttribute,\n    Component,\n    HostBinding,\n    Input,\n} from '@angular/core';\n\n@Component({\n    selector: 'eui-timeline',\n    template: '<ng-content></ng-content>',\n    styleUrls: ['./styles/_index.scss'],\n})\nexport class EuiTimelineComponent {\n    @HostBinding('class')\n    public get cssClasses(): string {\n        return this.getCssClasses();\n    }\n    @HostBinding('attr.data-e2e')\n    @Input()\n    e2eAttr = 'eui-timeline';\n\n    @Input({ transform: booleanAttribute }) isLeftAligned: boolean;\n\n    private getCssClasses(): string {\n        return ['eui-timeline', this.isLeftAligned ? 'eui-timeline--left-aligned' : ''].join(' ').trim();\n    }\n}\n","import { AfterContentInit, booleanAttribute, Component, forwardRef, Host, HostBinding, Inject, Input, Optional, ViewEncapsulation } from '@angular/core';\n\nimport { BaseStatesDirective } from '@eui/components/shared';\nimport { EuiTimelineComponent } from './eui-timeline.component';\n\n@Component({\n    selector: 'eui-timeline-item',\n    templateUrl: './eui-timeline-item.component.html',\n    styleUrls: ['./styles/_index.scss'],\n    encapsulation: ViewEncapsulation.None,\n    hostDirectives: [\n        {\n            directive: BaseStatesDirective,\n            inputs: ['euiSecondary', 'euiPrimary', 'euiSuccess', 'euiInfo', 'euiWarning', 'euiDanger', 'euiAccent', 'euiVariant'],\n        },\n    ],\n})\nexport class EuiTimelineItemComponent implements AfterContentInit {\n    @HostBinding('class')\n    public get cssClasses(): string {\n        return this.getCssClasses();\n    }\n    @HostBinding('attr.data-e2e')\n    @Input()\n    e2eAttr = 'eui-timeline-item';\n\n    @Input() label: string;\n    @Input() subLabel: string;\n    @Input() date: string;\n    @Input() dateStyleClass = '';\n    @Input() time: string;\n    @Input() timeStyleClass = '';\n\n    @Input({ transform: booleanAttribute }) isLeftAligned: boolean;\n    @Input({ transform: booleanAttribute }) isGroup: boolean;\n\n    timelineComponent: EuiTimelineComponent;\n\n    constructor(\n        @Host() @Optional() @Inject(forwardRef(() => EuiTimelineComponent)) timelineComponentParent,\n        public baseStatesDirective: BaseStatesDirective,\n    ) {\n        this.timelineComponent = timelineComponentParent as EuiTimelineComponent;\n    }\n\n    ngAfterContentInit(): void {\n        this.isLeftAligned = this.timelineComponent.isLeftAligned;\n    }\n\n    private getCssClasses(): string {\n        return [this.baseStatesDirective.getCssClasses('eui-timeline-item'), this.isGroup ? 'eui-timeline-item--more' : '']\n            .join(' ')\n            .trim();\n    }\n}\n","<div *ngIf=\"!isLeftAligned\" class=\"eui-timeline-item__left-content\">\n    <div *ngIf=\"date\" class=\"eui-timeline-item__date {{ dateStyleClass }}\">{{ date }}</div>\n    <div *ngIf=\"time\" class=\"eui-timeline-item__time {{ timeStyleClass }}\">{{ time }}</div>\n</div>\n<div class=\"eui-timeline-item__icon\" [class.eui-timeline-item__icon--group]=\"isGroup\"></div>\n<div class=\"eui-timeline-item__content\">\n    <ng-container #customContent>\n        <ng-content></ng-content>\n    </ng-container>\n\n    <ng-container *ngIf=\"customContent?.childNodes.length === 0\">\n        <div class=\"eui-timeline-item__title\">{{ label }}</div>\n        <div class=\"eui-timeline-item__subtitle\">{{ subLabel }}</div>\n        <div *ngIf=\"isLeftAligned && date\" class=\"eui-timeline-item__date {{ dateStyleClass }}\">{{ date }}</div>\n        <div *ngIf=\"isLeftAligned && time\" class=\"eui-timeline-item__time {{ timeStyleClass }}\">{{ time }}</div>\n    </ng-container>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { EuiTimelineComponent } from './eui-timeline.component';\nimport { EuiTimelineItemComponent } from './eui-timeline-item.component';\n\n@NgModule({\n    imports: [CommonModule],\n    exports: [EuiTimelineComponent, EuiTimelineItemComponent],\n    declarations: [EuiTimelineComponent, EuiTimelineItemComponent],\n})\nexport class EuiTimelineModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/eui-components-eui-timepicker.mjs

@@ -361,10 +361,10 @@ 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: [{
@@ -404,22 +404,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
             }] } });
 
 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: [