npm - @eui/components - Versions diffs - 18.0.0-next.56 → 18.0.0-next.58 - Mend

@eui/components 18.0.0-next.56 → 18.0.0-next.58

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (147) hide show

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

@@ -250,11 +250,11 @@ export class EuiTimebarComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0, type: EuiTimebarComponent, deps: [{ token: i1.EuiAppShellService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: EuiTimebarComponent, selector: "eui-timebar", inputs: { e2eAttr: "e2eAttr", markedDate: "markedDate", items: "items", startLabel: "startLabel", endLabel: "endLabel", dateFormat: "dateFormat", isShowLegend: ["isShowLegend", "isShowLegend", booleanAttribute], isShowLegendAsIndex: ["isShowLegendAsIndex", "isShowLegendAsIndex", booleanAttribute], isShowCurrentDateMarker: ["isShowCurrentDateMarker", "isShowCurrentDateMarker", booleanAttribute], isCurrentDateMarkerAlwaysInRange: ["isCurrentDateMarkerAlwaysInRange", "isCurrentDateMarkerAlwaysInRange", booleanAttribute], isGroupOverlappingLabels: ["isGroupOverlappingLabels", "isGroupOverlappingLabels", booleanAttribute] }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"row eui-u-flex\" #container>\n    <div *ngIf=\"startLabel\" class=\"col-2 eui-timebar__start-label\">\n        {{ startLabel }}\n    </div>\n    <div class=\"{{ timebarColumnClass }}\">\n        <div class=\"eui-timebar\" [style.marginBottom.px]=\"extraTimelineLabelSpace\" attr.data-e2e=\"{{ e2eAttr }}\">\n            <div\n                *ngIf=\"isShowCurrentDateMarker\"\n                class=\"eui-timebar__current-progress\"\n                [style.width.%]=\"currentPerc >= 100 ? 100 : currentPerc\"></div>\n            <div *ngIf=\"markedDate\" class=\"eui-timebar__current-progress\" [style.width.%]=\"markedPerc >= 100 ? 100 : markedPerc\"></div>\n            <ng-template [ngIf]=\"!isMobile\">\n                <ng-container *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n                    <ng-container *ngIf=\"!item.isGrouped\">\n                        <div\n                            class=\"eui-timebar__step\"\n                            [ngClass]=\"item.stepTypeClass\"\n                            [style.left.%]=\"item.perc\"\n                            [class.eui-timebar__step--with-current-date-marker]=\"isShowCurrentDateMarker || markedDate\">\n                            <div class=\"eui-timebar__step-date-item\" [class.eui-timebar__step-date-item--with-end-date]=\"item.groupEndDate\">\n                                <span\n                                    *ngIf=\"item.groupEndDate\"\n                                    class=\"eui-timebar__grouped__step {{\n                                        item.stepTypeClass ? 'eui-timebar__step--' + item.stepTypeClass : ''\n                                    }}\">\n                                    {{ item.groupEndDate | date: dateFormat }}\n                                </span>\n                                <span\n                                    class=\"{{ item.tooltipColor ? 'eui-timebar__step--' + item.tooltipColor : '' }}\"\n                                    [class.eui-timebar__grouped__step]=\"item.groupEndDate\">\n                                    {{ item.item.date | date: dateFormat }}\n                                </span>\n                            </div>\n                            <div *ngIf=\"!isShowLegendGenerated\" [style.left.%]=\"item.perc\" class=\"eui-timebar__step-label\">\n                                <ng-container *ngIf=\"!item.groupLabel\">\n                                    <span title=\"{{ item.item.label }}\">{{ item.item.label }}</span>\n                                </ng-container>\n                                <ng-container *ngIf=\"item.groupLabel\">\n                                    <span title=\"{{ item.groupLabel }}\">{{ item.groupLabel }}</span>\n                                </ng-container>\n                            </div>\n                            <div\n                                *ngIf=\"isShowLegendGenerated && isShowLegendAsIndexGenerated\"\n                                [style.left.%]=\"item.perc\"\n                                class=\"eui-timebar__step-label\">\n                                <ng-container *ngIf=\"!item.groupLabel\">\n                                    {{ i + 1 }}\n                                </ng-container>\n                                <ng-container *ngIf=\"item.groupLabel\">\n                                    {{ item.groupLabel }}\n                                </ng-container>\n                            </div>\n                        </div>\n                    </ng-container>\n                </ng-container>\n            </ng-template>\n\n            <ng-template [ngIf]=\"isMobile\">\n                <ng-container *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n                    <ng-container *ngIf=\"!item.isGrouped\">\n                        <div\n                            class=\"eui-timebar__step\"\n                            [ngClass]=\"item.stepTypeClass\"\n                            [style.left.%]=\"item.perc\"\n                            [class.eui-timebar__step--with-current-date-marker]=\"isShowCurrentDateMarker || markedDate\">\n                            <div *ngIf=\"!isShowLegendGenerated\" class=\"eui-timebar__step-label\" title=\"{{ item.item.label }}\">\n                                <ng-container *ngIf=\"!item.groupLabel\">\n                                    <span title=\"{{ item.item.label }}\">{{ item.item.label }}</span>\n                                </ng-container>\n                                <ng-container *ngIf=\"item.groupLabel\">\n                                    {{ item.groupLabel }}\n                                </ng-container>\n                            </div>\n                            <div *ngIf=\"isShowLegendGenerated && isShowLegendAsIndexGenerated\" class=\"eui-timebar__step-label\">\n                                <ng-container *ngIf=\"!item.groupLabel\">\n                                    {{ i + 1 }}\n                                </ng-container>\n                                <ng-container *ngIf=\"item.groupLabel\">\n                                    {{ item.groupLabel }}\n                                </ng-container>\n                            </div>\n                        </div>\n                    </ng-container>\n                </ng-container>\n            </ng-template>\n\n            <div\n                *ngIf=\"isShowCurrentDateMarker\"\n                class=\"eui-timebar__current-date-marker\"\n                [style.left.%]=\"currentPerc\"\n                title=\"{{ currentDate | date: dateFormat }}\">\n                <eui-icon-svg icon=\"location\" set=\"sharp\" size=\"m\" fillColor=\"danger-100\"></eui-icon-svg>\n            </div>\n            <div *ngIf=\"isShowCurrentDateMarker\" class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"currentPerc\">\n                <eui-icon-svg icon=\"eui-ellipse\" set=\"eui\" size=\"s\" fillColor=\"danger-100\"></eui-icon-svg>\n            </div>\n            <div\n                *ngIf=\"markedDate\"\n                class=\"eui-timebar__current-date-marker\"\n                [style.left.%]=\"markedPerc\"\n                title=\"{{ markedDate | date: dateFormat }}\">\n                <eui-icon-svg icon=\"location\" set=\"sharp\" size=\"m\" fillColor=\"danger-100\"></eui-icon-svg>\n            </div>\n            <div *ngIf=\"markedDate\" class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"markedPerc\">\n                <eui-icon-svg icon=\"eui-ellipse\" set=\"eui\" size=\"s\" fillColor=\"danger-100\"></eui-icon-svg>\n            </div>\n        </div>\n    </div>\n    <div *ngIf=\"endLabel\" class=\"col-2 eui-timebar__end-label\">\n        {{ endLabel }}\n    </div>\n</div>\n<div class=\"row eui-u-flex\">\n    <div *ngIf=\"startLabel\" class=\"col-2\"></div>\n    <div class=\"{{ timebarColumnClass }}\">\n        <div *ngIf=\"isShowLegendGenerated || isSomeStepsAreGrouped\" class=\"eui-timebar__legend\">\n            <ng-container *ngIf=\"isShowLegendGenerated\">\n                <div class=\"eui-timebar__legend-item\" *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n                    <div *ngIf=\"!isShowLegendAsIndexGenerated\" class=\"eui-timebar__legend-item-icon\">\n                        <eui-icon-svg icon=\"eui-ellipse\" set=\"eui\" size=\"s\" fillColor=\"{{ item.item.stepType }}\"></eui-icon-svg>\n                    </div>\n                    <div *ngIf=\"isShowLegendAsIndexGenerated\" class=\"eui-timebar__legend-item-index-wrapper\">\n                        {{ i + 1 }}\n                    </div>\n                    <div class=\"eui-timebar__legend-item-label\">\n                        <ng-template [ngIf]=\"isMobile\">\n                            <strong>{{ item.item.date | date: dateFormat }}</strong> - {{ item.item.label }}\n                        </ng-template>\n                        <ng-template [ngIf]=\"!isMobile\">\n                            {{ item.item.label }}\n                        </ng-template>\n                    </div>\n                </div>\n            </ng-container>\n            <ng-container *ngIf=\"!isShowLegendGenerated\">\n                <ng-container *ngFor=\"let item of itemsUI; trackBy: trackByFn\">\n                    <div *ngIf=\"item.groupLabel || item.isGrouped\" class=\"eui-timebar__legend-item\">\n                        <div class=\"eui-timebar__legend-item-index-wrapper\">\n                            {{ item.groupIndex }}\n                        </div>\n                        <div class=\"eui-timebar__legend-item-label\">\n                            <strong>{{ item.item.date | date: dateFormat }}</strong> - {{ item.item.label }}\n                        </div>\n                    </div>\n                </ng-container>\n            </ng-container>\n        </div>\n    </div>\n    <div *ngIf=\"endLabel\" class=\"col-2\"></div>\n</div>\n", styles: [".eui-timebar{border-bottom:2px solid var(--eui-c-neutral-lightest);margin:6rem 3rem;padding:5px;position:relative}.eui-timebar__step{border:7px solid var(--eui-c-primary);border-radius:16px;height:14px;position:absolute;width:14px}.eui-timebar__step-date-item{background-color:var(--eui-c-neutral-light);border-radius:var(--eui-border-radius-base);color:var(--eui-c-white);max-width:8rem;min-width:6rem;padding:var(--eui-s-xs);position:absolute;text-align:center;top:-2.5rem;transform:rotate(65deg);transform-origin:50% -175%;white-space:normal;font:var(--eui-f-s)}.eui-timebar__step-date-item--with-end-date{left:2.5rem;top:-1.75rem}.eui-timebar__step--with-current-date-marker.hint--top:before,.eui-timebar__step--with-current-date-marker.hint--top:after{bottom:25px}.eui-timebar__current-progress{border-bottom:3px solid var(--eui-c-primary);padding-top:5px;position:absolute}.eui-timebar__current-date-marker{color:var(--eui-c-danger);margin-left:-2px;position:absolute;top:calc(-1 * var(--eui-s-m) - var(--eui-s-2xs))}.eui-timebar__current-date-marker-step{bottom:calc(-1 * var(--eui-s-m) - 2px);color:var(--eui-c-danger);position:absolute}.eui-timebar__start-label,.eui-timebar__end-label{margin-top:6.5rem;font:var(--eui-f-s-bold)}.eui-timebar__start-label{text-align:right}.eui-timebar__step-date-item--with-end-date{margin:0;padding:0}.eui-timebar__step-label{margin-left:-4rem;margin-top:.7rem;overflow:hidden;position:absolute;text-align:center;width:8rem}.eui-timebar__legend{margin-left:var(--eui-s-s);margin-top:3rem}.eui-timebar__legend-item{align-items:center;display:flex;padding:var(--eui-s-xs) var(--eui-s-xs) var(--eui-s-xs) 0;width:100%}.eui-timebar__legend-item-label{flex:1}.eui-timebar__legend-item-index-wrapper{background-color:var(--eui-c-primary);border-radius:100%;color:var(--eui-c-white);margin-right:var(--eui-s-m);padding:var(--eui-s-xs) var(--eui-s-s)}.eui-timebar__grouped__step{border-radius:var(--eui-br-m);display:block;padding:3px 8px}.eui-timebar__grouped__step.eui-timebar__step--info{background-color:var(--eui-c-info)}.eui-timebar__grouped__step.eui-timebar__step--success{background-color:var(--eui-c-success)}.eui-timebar__grouped__step.eui-timebar__step--warning{background-color:var(--eui-c-warning)}.eui-timebar__grouped__step.eui-timebar__step--danger{background-color:var(--eui-c-danger)}.eui-timebar__step--info{border-color:var(--eui-c-info)}.eui-timebar__step--info .eui-timebar__step-date-item{background-color:var(--eui-c-info)}.eui-timebar__step--success{border-color:var(--eui-c-success)}.eui-timebar__step--success .eui-timebar__step-date-item{background-color:var(--eui-c-success)}.eui-timebar__step--warning{border-color:var(--eui-c-warning)}.eui-timebar__step--warning .eui-timebar__step-date-item{background-color:var(--eui-c-warning)}.eui-timebar__step--danger{border-color:var(--eui-c-danger)}.eui-timebar__step--danger .eui-timebar__step-date-item{background-color:var(--eui-c-danger)}.eui-timebar__legend-item-icon{color:var(--eui-c-primary);fill:var(--eui-c-primary);width:var(--eui-s-3xl);height:var(--eui-s-3xl)}.eui-timebar__legend-item-icon--info{color:var(--eui-c-info)}.eui-timebar__legend-item-icon--success{color:var(--eui-c-success)}.eui-timebar__legend-item-icon--warning{color:var(--eui-c-warning)}.eui-timebar__legend-item-icon--danger{color:var(--eui-c-danger)}@media screen and (max-width: 767px){.eui-timebar{margin:5rem var(--eui-s-m)}.eui-timebar__legend{margin-bottom:var(--eui-s-l);margin-left:18px}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: EuiTimebarComponent, selector: "eui-timebar", inputs: { e2eAttr: "e2eAttr", markedDate: "markedDate", items: "items", startLabel: "startLabel", endLabel: "endLabel", dateFormat: "dateFormat", isShowLegend: ["isShowLegend", "isShowLegend", booleanAttribute], isShowLegendAsIndex: ["isShowLegendAsIndex", "isShowLegendAsIndex", booleanAttribute], isShowCurrentDateMarker: ["isShowCurrentDateMarker", "isShowCurrentDateMarker", booleanAttribute], isCurrentDateMarkerAlwaysInRange: ["isCurrentDateMarkerAlwaysInRange", "isCurrentDateMarkerAlwaysInRange", booleanAttribute], isGroupOverlappingLabels: ["isGroupOverlappingLabels", "isGroupOverlappingLabels", booleanAttribute] }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"row eui-u-flex\" #container>\n    <div *ngIf=\"startLabel\" class=\"col-2 eui-timebar__start-label\">\n        {{ startLabel }}\n    </div>\n    <div class=\"{{ timebarColumnClass }}\">\n        <div class=\"eui-timebar\" [style.marginBottom.px]=\"extraTimelineLabelSpace\" attr.data-e2e=\"{{ e2eAttr }}\">\n            <div\n                *ngIf=\"isShowCurrentDateMarker\"\n                class=\"eui-timebar__current-progress\"\n                [style.width.%]=\"currentPerc >= 100 ? 100 : currentPerc\"></div>\n            <div *ngIf=\"markedDate\" class=\"eui-timebar__current-progress\" [style.width.%]=\"markedPerc >= 100 ? 100 : markedPerc\"></div>\n            <ng-template [ngIf]=\"!isMobile\">\n                <ng-container *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n                    <ng-container *ngIf=\"!item.isGrouped\">\n                        <div\n                            class=\"eui-timebar__step\"\n                            [ngClass]=\"item.stepTypeClass\"\n                            [style.left.%]=\"item.perc\"\n                            [class.eui-timebar__step--with-current-date-marker]=\"isShowCurrentDateMarker || markedDate\">\n                            <div class=\"eui-timebar__step-date-item\" [class.eui-timebar__step-date-item--with-end-date]=\"item.groupEndDate\">\n                                <span\n                                    *ngIf=\"item.groupEndDate\"\n                                    class=\"eui-timebar__grouped__step {{\n                                        item.stepTypeClass ? 'eui-timebar__step--' + item.stepTypeClass : ''\n                                    }}\">\n                                    {{ item.groupEndDate | date: dateFormat }}\n                                </span>\n                                <span\n                                    class=\"{{ item.tooltipColor ? 'eui-timebar__step--' + item.tooltipColor : '' }}\"\n                                    [class.eui-timebar__grouped__step]=\"item.groupEndDate\">\n                                    {{ item.item.date | date: dateFormat }}\n                                </span>\n                            </div>\n                            <div *ngIf=\"!isShowLegendGenerated\" [style.left.%]=\"item.perc\" class=\"eui-timebar__step-label\">\n                                <ng-container *ngIf=\"!item.groupLabel\">\n                                    <span title=\"{{ item.item.label }}\">{{ item.item.label }}</span>\n                                </ng-container>\n                                <ng-container *ngIf=\"item.groupLabel\">\n                                    <span title=\"{{ item.groupLabel }}\">{{ item.groupLabel }}</span>\n                                </ng-container>\n                            </div>\n                            <div\n                                *ngIf=\"isShowLegendGenerated && isShowLegendAsIndexGenerated\"\n                                [style.left.%]=\"item.perc\"\n                                class=\"eui-timebar__step-label\">\n                                <ng-container *ngIf=\"!item.groupLabel\">\n                                    {{ i + 1 }}\n                                </ng-container>\n                                <ng-container *ngIf=\"item.groupLabel\">\n                                    {{ item.groupLabel }}\n                                </ng-container>\n                            </div>\n                        </div>\n                    </ng-container>\n                </ng-container>\n            </ng-template>\n\n            <ng-template [ngIf]=\"isMobile\">\n                <ng-container *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n                    <ng-container *ngIf=\"!item.isGrouped\">\n                        <div\n                            class=\"eui-timebar__step\"\n                            [ngClass]=\"item.stepTypeClass\"\n                            [style.left.%]=\"item.perc\"\n                            [class.eui-timebar__step--with-current-date-marker]=\"isShowCurrentDateMarker || markedDate\">\n                            <div *ngIf=\"!isShowLegendGenerated\" class=\"eui-timebar__step-label\" title=\"{{ item.item.label }}\">\n                                <ng-container *ngIf=\"!item.groupLabel\">\n                                    <span title=\"{{ item.item.label }}\">{{ item.item.label }}</span>\n                                </ng-container>\n                                <ng-container *ngIf=\"item.groupLabel\">\n                                    {{ item.groupLabel }}\n                                </ng-container>\n                            </div>\n                            <div *ngIf=\"isShowLegendGenerated && isShowLegendAsIndexGenerated\" class=\"eui-timebar__step-label\">\n                                <ng-container *ngIf=\"!item.groupLabel\">\n                                    {{ i + 1 }}\n                                </ng-container>\n                                <ng-container *ngIf=\"item.groupLabel\">\n                                    {{ item.groupLabel }}\n                                </ng-container>\n                            </div>\n                        </div>\n                    </ng-container>\n                </ng-container>\n            </ng-template>\n\n            <div\n                *ngIf=\"isShowCurrentDateMarker\"\n                class=\"eui-timebar__current-date-marker\"\n                [style.left.%]=\"currentPerc\"\n                title=\"{{ currentDate | date: dateFormat }}\">\n                <eui-icon-svg icon=\"location\" set=\"sharp\" size=\"m\" fillColor=\"danger-100\"></eui-icon-svg>\n            </div>\n            <div *ngIf=\"isShowCurrentDateMarker\" class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"currentPerc\">\n                <eui-icon-svg icon=\"eui-ellipse\" set=\"eui\" size=\"s\" fillColor=\"danger-100\"></eui-icon-svg>\n            </div>\n            <div\n                *ngIf=\"markedDate\"\n                class=\"eui-timebar__current-date-marker\"\n                [style.left.%]=\"markedPerc\"\n                title=\"{{ markedDate | date: dateFormat }}\">\n                <eui-icon-svg icon=\"location\" set=\"sharp\" size=\"m\" fillColor=\"danger-100\"></eui-icon-svg>\n            </div>\n            <div *ngIf=\"markedDate\" class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"markedPerc\">\n                <eui-icon-svg icon=\"eui-ellipse\" set=\"eui\" size=\"s\" fillColor=\"danger-100\"></eui-icon-svg>\n            </div>\n        </div>\n    </div>\n    <div *ngIf=\"endLabel\" class=\"col-2 eui-timebar__end-label\">\n        {{ endLabel }}\n    </div>\n</div>\n<div class=\"row eui-u-flex\">\n    <div *ngIf=\"startLabel\" class=\"col-2\"></div>\n    <div class=\"{{ timebarColumnClass }}\">\n        <div *ngIf=\"isShowLegendGenerated || isSomeStepsAreGrouped\" class=\"eui-timebar__legend\">\n            <ng-container *ngIf=\"isShowLegendGenerated\">\n                <div class=\"eui-timebar__legend-item\" *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n                    <div *ngIf=\"!isShowLegendAsIndexGenerated\" class=\"eui-timebar__legend-item-icon\">\n                        <eui-icon-svg icon=\"eui-ellipse\" set=\"eui\" size=\"s\" fillColor=\"{{ item.item.stepType }}\"></eui-icon-svg>\n                    </div>\n                    <div *ngIf=\"isShowLegendAsIndexGenerated\" class=\"eui-timebar__legend-item-index-wrapper\">\n                        {{ i + 1 }}\n                    </div>\n                    <div class=\"eui-timebar__legend-item-label\">\n                        <ng-template [ngIf]=\"isMobile\">\n                            <strong>{{ item.item.date | date: dateFormat }}</strong> - {{ item.item.label }}\n                        </ng-template>\n                        <ng-template [ngIf]=\"!isMobile\">\n                            {{ item.item.label }}\n                        </ng-template>\n                    </div>\n                </div>\n            </ng-container>\n            <ng-container *ngIf=\"!isShowLegendGenerated\">\n                <ng-container *ngFor=\"let item of itemsUI; trackBy: trackByFn\">\n                    <div *ngIf=\"item.groupLabel || item.isGrouped\" class=\"eui-timebar__legend-item\">\n                        <div class=\"eui-timebar__legend-item-index-wrapper\">\n                            {{ item.groupIndex }}\n                        </div>\n                        <div class=\"eui-timebar__legend-item-label\">\n                            <strong>{{ item.item.date | date: dateFormat }}</strong> - {{ item.item.label }}\n                        </div>\n                    </div>\n                </ng-container>\n            </ng-container>\n        </div>\n    </div>\n    <div *ngIf=\"endLabel\" class=\"col-2\"></div>\n</div>\n", styles: [".eui-timebar{border-bottom:2px solid var(--eui-c-neutral-lightest);margin:6rem 3rem;padding:5px;position:relative}.eui-timebar__step{border:7px solid var(--eui-c-primary);border-radius:var(--eui-br-max);height:14px;position:absolute;width:14px}.eui-timebar__step-date-item{background-color:var(--eui-c-neutral-light);border-radius:var(--eui-br-max);color:var(--eui-c-white);max-width:8rem;min-width:6rem;padding:var(--eui-s-xs);position:absolute;text-align:center;top:-2.5rem;transform:rotate(65deg);transform-origin:50% -175%;white-space:normal;font:var(--eui-f-s)}.eui-timebar__step-date-item--with-end-date{left:2.5rem;top:-1.75rem}.eui-timebar__step--with-current-date-marker.hint--top:before,.eui-timebar__step--with-current-date-marker.hint--top:after{bottom:25px}.eui-timebar__current-progress{border-bottom:3px solid var(--eui-c-primary);padding-top:5px;position:absolute}.eui-timebar__current-date-marker{color:var(--eui-c-danger);margin-left:-2px;position:absolute;top:calc(-1 * var(--eui-s-m) - var(--eui-s-2xs))}.eui-timebar__current-date-marker-step{bottom:calc(-1 * var(--eui-s-m) - 2px);color:var(--eui-c-danger);position:absolute}.eui-timebar__start-label,.eui-timebar__end-label{margin-top:6.5rem;font:var(--eui-f-s-bold)}.eui-timebar__start-label{text-align:right}.eui-timebar__step-date-item--with-end-date{margin:0;padding:0}.eui-timebar__step-label{margin-left:-4rem;margin-top:.7rem;overflow:hidden;position:absolute;text-align:center;width:8rem}.eui-timebar__legend{margin-left:var(--eui-s-s);margin-top:3rem}.eui-timebar__legend-item{align-items:center;display:flex;padding:var(--eui-s-xs) var(--eui-s-xs) var(--eui-s-xs) 0;width:100%}.eui-timebar__legend-item-label{flex:1}.eui-timebar__legend-item-index-wrapper{background-color:var(--eui-c-primary);border-radius:var(--eui-br-max);color:var(--eui-c-white);margin-right:var(--eui-s-m);padding:var(--eui-s-xs) var(--eui-s-s)}.eui-timebar__grouped__step{border-radius:var(--eui-br-m);display:block;padding:3px 8px}.eui-timebar__grouped__step.eui-timebar__step--info{background-color:var(--eui-c-info)}.eui-timebar__grouped__step.eui-timebar__step--success{background-color:var(--eui-c-success)}.eui-timebar__grouped__step.eui-timebar__step--warning{background-color:var(--eui-c-warning)}.eui-timebar__grouped__step.eui-timebar__step--danger{background-color:var(--eui-c-danger)}.eui-timebar__step--info{border-color:var(--eui-c-info)}.eui-timebar__step--info .eui-timebar__step-date-item{background-color:var(--eui-c-info)}.eui-timebar__step--success{border-color:var(--eui-c-success)}.eui-timebar__step--success .eui-timebar__step-date-item{background-color:var(--eui-c-success)}.eui-timebar__step--warning{border-color:var(--eui-c-warning)}.eui-timebar__step--warning .eui-timebar__step-date-item{background-color:var(--eui-c-warning)}.eui-timebar__step--danger{border-color:var(--eui-c-danger)}.eui-timebar__step--danger .eui-timebar__step-date-item{background-color:var(--eui-c-danger)}.eui-timebar__legend-item-icon{color:var(--eui-c-primary);fill:var(--eui-c-primary);width:var(--eui-s-3xl);height:var(--eui-s-3xl)}.eui-timebar__legend-item-icon--info{color:var(--eui-c-info)}.eui-timebar__legend-item-icon--success{color:var(--eui-c-success)}.eui-timebar__legend-item-icon--warning{color:var(--eui-c-warning)}.eui-timebar__legend-item-icon--danger{color:var(--eui-c-danger)}@media screen and (max-width: 767px){.eui-timebar{margin:5rem var(--eui-s-m)}.eui-timebar__legend{margin-bottom:var(--eui-s-l);margin-left:18px}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0, type: EuiTimebarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'eui-timebar', encapsulation: ViewEncapsulation.None, template: "<div class=\"row eui-u-flex\" #container>\n    <div *ngIf=\"startLabel\" class=\"col-2 eui-timebar__start-label\">\n        {{ startLabel }}\n    </div>\n    <div class=\"{{ timebarColumnClass }}\">\n        <div class=\"eui-timebar\" [style.marginBottom.px]=\"extraTimelineLabelSpace\" attr.data-e2e=\"{{ e2eAttr }}\">\n            <div\n                *ngIf=\"isShowCurrentDateMarker\"\n                class=\"eui-timebar__current-progress\"\n                [style.width.%]=\"currentPerc >= 100 ? 100 : currentPerc\"></div>\n            <div *ngIf=\"markedDate\" class=\"eui-timebar__current-progress\" [style.width.%]=\"markedPerc >= 100 ? 100 : markedPerc\"></div>\n            <ng-template [ngIf]=\"!isMobile\">\n                <ng-container *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n                    <ng-container *ngIf=\"!item.isGrouped\">\n                        <div\n                            class=\"eui-timebar__step\"\n                            [ngClass]=\"item.stepTypeClass\"\n                            [style.left.%]=\"item.perc\"\n                            [class.eui-timebar__step--with-current-date-marker]=\"isShowCurrentDateMarker || markedDate\">\n                            <div class=\"eui-timebar__step-date-item\" [class.eui-timebar__step-date-item--with-end-date]=\"item.groupEndDate\">\n                                <span\n                                    *ngIf=\"item.groupEndDate\"\n                                    class=\"eui-timebar__grouped__step {{\n                                        item.stepTypeClass ? 'eui-timebar__step--' + item.stepTypeClass : ''\n                                    }}\">\n                                    {{ item.groupEndDate | date: dateFormat }}\n                                </span>\n                                <span\n                                    class=\"{{ item.tooltipColor ? 'eui-timebar__step--' + item.tooltipColor : '' }}\"\n                                    [class.eui-timebar__grouped__step]=\"item.groupEndDate\">\n                                    {{ item.item.date | date: dateFormat }}\n                                </span>\n                            </div>\n                            <div *ngIf=\"!isShowLegendGenerated\" [style.left.%]=\"item.perc\" class=\"eui-timebar__step-label\">\n                                <ng-container *ngIf=\"!item.groupLabel\">\n                                    <span title=\"{{ item.item.label }}\">{{ item.item.label }}</span>\n                                </ng-container>\n                                <ng-container *ngIf=\"item.groupLabel\">\n                                    <span title=\"{{ item.groupLabel }}\">{{ item.groupLabel }}</span>\n                                </ng-container>\n                            </div>\n                            <div\n                                *ngIf=\"isShowLegendGenerated && isShowLegendAsIndexGenerated\"\n                                [style.left.%]=\"item.perc\"\n                                class=\"eui-timebar__step-label\">\n                                <ng-container *ngIf=\"!item.groupLabel\">\n                                    {{ i + 1 }}\n                                </ng-container>\n                                <ng-container *ngIf=\"item.groupLabel\">\n                                    {{ item.groupLabel }}\n                                </ng-container>\n                            </div>\n                        </div>\n                    </ng-container>\n                </ng-container>\n            </ng-template>\n\n            <ng-template [ngIf]=\"isMobile\">\n                <ng-container *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n                    <ng-container *ngIf=\"!item.isGrouped\">\n                        <div\n                            class=\"eui-timebar__step\"\n                            [ngClass]=\"item.stepTypeClass\"\n                            [style.left.%]=\"item.perc\"\n                            [class.eui-timebar__step--with-current-date-marker]=\"isShowCurrentDateMarker || markedDate\">\n                            <div *ngIf=\"!isShowLegendGenerated\" class=\"eui-timebar__step-label\" title=\"{{ item.item.label }}\">\n                                <ng-container *ngIf=\"!item.groupLabel\">\n                                    <span title=\"{{ item.item.label }}\">{{ item.item.label }}</span>\n                                </ng-container>\n                                <ng-container *ngIf=\"item.groupLabel\">\n                                    {{ item.groupLabel }}\n                                </ng-container>\n                            </div>\n                            <div *ngIf=\"isShowLegendGenerated && isShowLegendAsIndexGenerated\" class=\"eui-timebar__step-label\">\n                                <ng-container *ngIf=\"!item.groupLabel\">\n                                    {{ i + 1 }}\n                                </ng-container>\n                                <ng-container *ngIf=\"item.groupLabel\">\n                                    {{ item.groupLabel }}\n                                </ng-container>\n                            </div>\n                        </div>\n                    </ng-container>\n                </ng-container>\n            </ng-template>\n\n            <div\n                *ngIf=\"isShowCurrentDateMarker\"\n                class=\"eui-timebar__current-date-marker\"\n                [style.left.%]=\"currentPerc\"\n                title=\"{{ currentDate | date: dateFormat }}\">\n                <eui-icon-svg icon=\"location\" set=\"sharp\" size=\"m\" fillColor=\"danger-100\"></eui-icon-svg>\n            </div>\n            <div *ngIf=\"isShowCurrentDateMarker\" class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"currentPerc\">\n                <eui-icon-svg icon=\"eui-ellipse\" set=\"eui\" size=\"s\" fillColor=\"danger-100\"></eui-icon-svg>\n            </div>\n            <div\n                *ngIf=\"markedDate\"\n                class=\"eui-timebar__current-date-marker\"\n                [style.left.%]=\"markedPerc\"\n                title=\"{{ markedDate | date: dateFormat }}\">\n                <eui-icon-svg icon=\"location\" set=\"sharp\" size=\"m\" fillColor=\"danger-100\"></eui-icon-svg>\n            </div>\n            <div *ngIf=\"markedDate\" class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"markedPerc\">\n                <eui-icon-svg icon=\"eui-ellipse\" set=\"eui\" size=\"s\" fillColor=\"danger-100\"></eui-icon-svg>\n            </div>\n        </div>\n    </div>\n    <div *ngIf=\"endLabel\" class=\"col-2 eui-timebar__end-label\">\n        {{ endLabel }}\n    </div>\n</div>\n<div class=\"row eui-u-flex\">\n    <div *ngIf=\"startLabel\" class=\"col-2\"></div>\n    <div class=\"{{ timebarColumnClass }}\">\n        <div *ngIf=\"isShowLegendGenerated || isSomeStepsAreGrouped\" class=\"eui-timebar__legend\">\n            <ng-container *ngIf=\"isShowLegendGenerated\">\n                <div class=\"eui-timebar__legend-item\" *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n                    <div *ngIf=\"!isShowLegendAsIndexGenerated\" class=\"eui-timebar__legend-item-icon\">\n                        <eui-icon-svg icon=\"eui-ellipse\" set=\"eui\" size=\"s\" fillColor=\"{{ item.item.stepType }}\"></eui-icon-svg>\n                    </div>\n                    <div *ngIf=\"isShowLegendAsIndexGenerated\" class=\"eui-timebar__legend-item-index-wrapper\">\n                        {{ i + 1 }}\n                    </div>\n                    <div class=\"eui-timebar__legend-item-label\">\n                        <ng-template [ngIf]=\"isMobile\">\n                            <strong>{{ item.item.date | date: dateFormat }}</strong> - {{ item.item.label }}\n                        </ng-template>\n                        <ng-template [ngIf]=\"!isMobile\">\n                            {{ item.item.label }}\n                        </ng-template>\n                    </div>\n                </div>\n            </ng-container>\n            <ng-container *ngIf=\"!isShowLegendGenerated\">\n                <ng-container *ngFor=\"let item of itemsUI; trackBy: trackByFn\">\n                    <div *ngIf=\"item.groupLabel || item.isGrouped\" class=\"eui-timebar__legend-item\">\n                        <div class=\"eui-timebar__legend-item-index-wrapper\">\n                            {{ item.groupIndex }}\n                        </div>\n                        <div class=\"eui-timebar__legend-item-label\">\n                            <strong>{{ item.item.date | date: dateFormat }}</strong> - {{ item.item.label }}\n                        </div>\n                    </div>\n                </ng-container>\n            </ng-container>\n        </div>\n    </div>\n    <div *ngIf=\"endLabel\" class=\"col-2\"></div>\n</div>\n", styles: [".eui-timebar{border-bottom:2px solid var(--eui-c-neutral-lightest);margin:6rem 3rem;padding:5px;position:relative}.eui-timebar__step{border:7px solid var(--eui-c-primary);border-radius:16px;height:14px;position:absolute;width:14px}.eui-timebar__step-date-item{background-color:var(--eui-c-neutral-light);border-radius:var(--eui-border-radius-base);color:var(--eui-c-white);max-width:8rem;min-width:6rem;padding:var(--eui-s-xs);position:absolute;text-align:center;top:-2.5rem;transform:rotate(65deg);transform-origin:50% -175%;white-space:normal;font:var(--eui-f-s)}.eui-timebar__step-date-item--with-end-date{left:2.5rem;top:-1.75rem}.eui-timebar__step--with-current-date-marker.hint--top:before,.eui-timebar__step--with-current-date-marker.hint--top:after{bottom:25px}.eui-timebar__current-progress{border-bottom:3px solid var(--eui-c-primary);padding-top:5px;position:absolute}.eui-timebar__current-date-marker{color:var(--eui-c-danger);margin-left:-2px;position:absolute;top:calc(-1 * var(--eui-s-m) - var(--eui-s-2xs))}.eui-timebar__current-date-marker-step{bottom:calc(-1 * var(--eui-s-m) - 2px);color:var(--eui-c-danger);position:absolute}.eui-timebar__start-label,.eui-timebar__end-label{margin-top:6.5rem;font:var(--eui-f-s-bold)}.eui-timebar__start-label{text-align:right}.eui-timebar__step-date-item--with-end-date{margin:0;padding:0}.eui-timebar__step-label{margin-left:-4rem;margin-top:.7rem;overflow:hidden;position:absolute;text-align:center;width:8rem}.eui-timebar__legend{margin-left:var(--eui-s-s);margin-top:3rem}.eui-timebar__legend-item{align-items:center;display:flex;padding:var(--eui-s-xs) var(--eui-s-xs) var(--eui-s-xs) 0;width:100%}.eui-timebar__legend-item-label{flex:1}.eui-timebar__legend-item-index-wrapper{background-color:var(--eui-c-primary);border-radius:100%;color:var(--eui-c-white);margin-right:var(--eui-s-m);padding:var(--eui-s-xs) var(--eui-s-s)}.eui-timebar__grouped__step{border-radius:var(--eui-br-m);display:block;padding:3px 8px}.eui-timebar__grouped__step.eui-timebar__step--info{background-color:var(--eui-c-info)}.eui-timebar__grouped__step.eui-timebar__step--success{background-color:var(--eui-c-success)}.eui-timebar__grouped__step.eui-timebar__step--warning{background-color:var(--eui-c-warning)}.eui-timebar__grouped__step.eui-timebar__step--danger{background-color:var(--eui-c-danger)}.eui-timebar__step--info{border-color:var(--eui-c-info)}.eui-timebar__step--info .eui-timebar__step-date-item{background-color:var(--eui-c-info)}.eui-timebar__step--success{border-color:var(--eui-c-success)}.eui-timebar__step--success .eui-timebar__step-date-item{background-color:var(--eui-c-success)}.eui-timebar__step--warning{border-color:var(--eui-c-warning)}.eui-timebar__step--warning .eui-timebar__step-date-item{background-color:var(--eui-c-warning)}.eui-timebar__step--danger{border-color:var(--eui-c-danger)}.eui-timebar__step--danger .eui-timebar__step-date-item{background-color:var(--eui-c-danger)}.eui-timebar__legend-item-icon{color:var(--eui-c-primary);fill:var(--eui-c-primary);width:var(--eui-s-3xl);height:var(--eui-s-3xl)}.eui-timebar__legend-item-icon--info{color:var(--eui-c-info)}.eui-timebar__legend-item-icon--success{color:var(--eui-c-success)}.eui-timebar__legend-item-icon--warning{color:var(--eui-c-warning)}.eui-timebar__legend-item-icon--danger{color:var(--eui-c-danger)}@media screen and (max-width: 767px){.eui-timebar{margin:5rem var(--eui-s-m)}.eui-timebar__legend{margin-bottom:var(--eui-s-l);margin-left:18px}}\n"] }]
+            args: [{ selector: 'eui-timebar', encapsulation: ViewEncapsulation.None, template: "<div class=\"row eui-u-flex\" #container>\n    <div *ngIf=\"startLabel\" class=\"col-2 eui-timebar__start-label\">\n        {{ startLabel }}\n    </div>\n    <div class=\"{{ timebarColumnClass }}\">\n        <div class=\"eui-timebar\" [style.marginBottom.px]=\"extraTimelineLabelSpace\" attr.data-e2e=\"{{ e2eAttr }}\">\n            <div\n                *ngIf=\"isShowCurrentDateMarker\"\n                class=\"eui-timebar__current-progress\"\n                [style.width.%]=\"currentPerc >= 100 ? 100 : currentPerc\"></div>\n            <div *ngIf=\"markedDate\" class=\"eui-timebar__current-progress\" [style.width.%]=\"markedPerc >= 100 ? 100 : markedPerc\"></div>\n            <ng-template [ngIf]=\"!isMobile\">\n                <ng-container *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n                    <ng-container *ngIf=\"!item.isGrouped\">\n                        <div\n                            class=\"eui-timebar__step\"\n                            [ngClass]=\"item.stepTypeClass\"\n                            [style.left.%]=\"item.perc\"\n                            [class.eui-timebar__step--with-current-date-marker]=\"isShowCurrentDateMarker || markedDate\">\n                            <div class=\"eui-timebar__step-date-item\" [class.eui-timebar__step-date-item--with-end-date]=\"item.groupEndDate\">\n                                <span\n                                    *ngIf=\"item.groupEndDate\"\n                                    class=\"eui-timebar__grouped__step {{\n                                        item.stepTypeClass ? 'eui-timebar__step--' + item.stepTypeClass : ''\n                                    }}\">\n                                    {{ item.groupEndDate | date: dateFormat }}\n                                </span>\n                                <span\n                                    class=\"{{ item.tooltipColor ? 'eui-timebar__step--' + item.tooltipColor : '' }}\"\n                                    [class.eui-timebar__grouped__step]=\"item.groupEndDate\">\n                                    {{ item.item.date | date: dateFormat }}\n                                </span>\n                            </div>\n                            <div *ngIf=\"!isShowLegendGenerated\" [style.left.%]=\"item.perc\" class=\"eui-timebar__step-label\">\n                                <ng-container *ngIf=\"!item.groupLabel\">\n                                    <span title=\"{{ item.item.label }}\">{{ item.item.label }}</span>\n                                </ng-container>\n                                <ng-container *ngIf=\"item.groupLabel\">\n                                    <span title=\"{{ item.groupLabel }}\">{{ item.groupLabel }}</span>\n                                </ng-container>\n                            </div>\n                            <div\n                                *ngIf=\"isShowLegendGenerated && isShowLegendAsIndexGenerated\"\n                                [style.left.%]=\"item.perc\"\n                                class=\"eui-timebar__step-label\">\n                                <ng-container *ngIf=\"!item.groupLabel\">\n                                    {{ i + 1 }}\n                                </ng-container>\n                                <ng-container *ngIf=\"item.groupLabel\">\n                                    {{ item.groupLabel }}\n                                </ng-container>\n                            </div>\n                        </div>\n                    </ng-container>\n                </ng-container>\n            </ng-template>\n\n            <ng-template [ngIf]=\"isMobile\">\n                <ng-container *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n                    <ng-container *ngIf=\"!item.isGrouped\">\n                        <div\n                            class=\"eui-timebar__step\"\n                            [ngClass]=\"item.stepTypeClass\"\n                            [style.left.%]=\"item.perc\"\n                            [class.eui-timebar__step--with-current-date-marker]=\"isShowCurrentDateMarker || markedDate\">\n                            <div *ngIf=\"!isShowLegendGenerated\" class=\"eui-timebar__step-label\" title=\"{{ item.item.label }}\">\n                                <ng-container *ngIf=\"!item.groupLabel\">\n                                    <span title=\"{{ item.item.label }}\">{{ item.item.label }}</span>\n                                </ng-container>\n                                <ng-container *ngIf=\"item.groupLabel\">\n                                    {{ item.groupLabel }}\n                                </ng-container>\n                            </div>\n                            <div *ngIf=\"isShowLegendGenerated && isShowLegendAsIndexGenerated\" class=\"eui-timebar__step-label\">\n                                <ng-container *ngIf=\"!item.groupLabel\">\n                                    {{ i + 1 }}\n                                </ng-container>\n                                <ng-container *ngIf=\"item.groupLabel\">\n                                    {{ item.groupLabel }}\n                                </ng-container>\n                            </div>\n                        </div>\n                    </ng-container>\n                </ng-container>\n            </ng-template>\n\n            <div\n                *ngIf=\"isShowCurrentDateMarker\"\n                class=\"eui-timebar__current-date-marker\"\n                [style.left.%]=\"currentPerc\"\n                title=\"{{ currentDate | date: dateFormat }}\">\n                <eui-icon-svg icon=\"location\" set=\"sharp\" size=\"m\" fillColor=\"danger-100\"></eui-icon-svg>\n            </div>\n            <div *ngIf=\"isShowCurrentDateMarker\" class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"currentPerc\">\n                <eui-icon-svg icon=\"eui-ellipse\" set=\"eui\" size=\"s\" fillColor=\"danger-100\"></eui-icon-svg>\n            </div>\n            <div\n                *ngIf=\"markedDate\"\n                class=\"eui-timebar__current-date-marker\"\n                [style.left.%]=\"markedPerc\"\n                title=\"{{ markedDate | date: dateFormat }}\">\n                <eui-icon-svg icon=\"location\" set=\"sharp\" size=\"m\" fillColor=\"danger-100\"></eui-icon-svg>\n            </div>\n            <div *ngIf=\"markedDate\" class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"markedPerc\">\n                <eui-icon-svg icon=\"eui-ellipse\" set=\"eui\" size=\"s\" fillColor=\"danger-100\"></eui-icon-svg>\n            </div>\n        </div>\n    </div>\n    <div *ngIf=\"endLabel\" class=\"col-2 eui-timebar__end-label\">\n        {{ endLabel }}\n    </div>\n</div>\n<div class=\"row eui-u-flex\">\n    <div *ngIf=\"startLabel\" class=\"col-2\"></div>\n    <div class=\"{{ timebarColumnClass }}\">\n        <div *ngIf=\"isShowLegendGenerated || isSomeStepsAreGrouped\" class=\"eui-timebar__legend\">\n            <ng-container *ngIf=\"isShowLegendGenerated\">\n                <div class=\"eui-timebar__legend-item\" *ngFor=\"let item of itemsUI; let i = index; trackBy: trackByFn\">\n                    <div *ngIf=\"!isShowLegendAsIndexGenerated\" class=\"eui-timebar__legend-item-icon\">\n                        <eui-icon-svg icon=\"eui-ellipse\" set=\"eui\" size=\"s\" fillColor=\"{{ item.item.stepType }}\"></eui-icon-svg>\n                    </div>\n                    <div *ngIf=\"isShowLegendAsIndexGenerated\" class=\"eui-timebar__legend-item-index-wrapper\">\n                        {{ i + 1 }}\n                    </div>\n                    <div class=\"eui-timebar__legend-item-label\">\n                        <ng-template [ngIf]=\"isMobile\">\n                            <strong>{{ item.item.date | date: dateFormat }}</strong> - {{ item.item.label }}\n                        </ng-template>\n                        <ng-template [ngIf]=\"!isMobile\">\n                            {{ item.item.label }}\n                        </ng-template>\n                    </div>\n                </div>\n            </ng-container>\n            <ng-container *ngIf=\"!isShowLegendGenerated\">\n                <ng-container *ngFor=\"let item of itemsUI; trackBy: trackByFn\">\n                    <div *ngIf=\"item.groupLabel || item.isGrouped\" class=\"eui-timebar__legend-item\">\n                        <div class=\"eui-timebar__legend-item-index-wrapper\">\n                            {{ item.groupIndex }}\n                        </div>\n                        <div class=\"eui-timebar__legend-item-label\">\n                            <strong>{{ item.item.date | date: dateFormat }}</strong> - {{ item.item.label }}\n                        </div>\n                    </div>\n                </ng-container>\n            </ng-container>\n        </div>\n    </div>\n    <div *ngIf=\"endLabel\" class=\"col-2\"></div>\n</div>\n", styles: [".eui-timebar{border-bottom:2px solid var(--eui-c-neutral-lightest);margin:6rem 3rem;padding:5px;position:relative}.eui-timebar__step{border:7px solid var(--eui-c-primary);border-radius:var(--eui-br-max);height:14px;position:absolute;width:14px}.eui-timebar__step-date-item{background-color:var(--eui-c-neutral-light);border-radius:var(--eui-br-max);color:var(--eui-c-white);max-width:8rem;min-width:6rem;padding:var(--eui-s-xs);position:absolute;text-align:center;top:-2.5rem;transform:rotate(65deg);transform-origin:50% -175%;white-space:normal;font:var(--eui-f-s)}.eui-timebar__step-date-item--with-end-date{left:2.5rem;top:-1.75rem}.eui-timebar__step--with-current-date-marker.hint--top:before,.eui-timebar__step--with-current-date-marker.hint--top:after{bottom:25px}.eui-timebar__current-progress{border-bottom:3px solid var(--eui-c-primary);padding-top:5px;position:absolute}.eui-timebar__current-date-marker{color:var(--eui-c-danger);margin-left:-2px;position:absolute;top:calc(-1 * var(--eui-s-m) - var(--eui-s-2xs))}.eui-timebar__current-date-marker-step{bottom:calc(-1 * var(--eui-s-m) - 2px);color:var(--eui-c-danger);position:absolute}.eui-timebar__start-label,.eui-timebar__end-label{margin-top:6.5rem;font:var(--eui-f-s-bold)}.eui-timebar__start-label{text-align:right}.eui-timebar__step-date-item--with-end-date{margin:0;padding:0}.eui-timebar__step-label{margin-left:-4rem;margin-top:.7rem;overflow:hidden;position:absolute;text-align:center;width:8rem}.eui-timebar__legend{margin-left:var(--eui-s-s);margin-top:3rem}.eui-timebar__legend-item{align-items:center;display:flex;padding:var(--eui-s-xs) var(--eui-s-xs) var(--eui-s-xs) 0;width:100%}.eui-timebar__legend-item-label{flex:1}.eui-timebar__legend-item-index-wrapper{background-color:var(--eui-c-primary);border-radius:var(--eui-br-max);color:var(--eui-c-white);margin-right:var(--eui-s-m);padding:var(--eui-s-xs) var(--eui-s-s)}.eui-timebar__grouped__step{border-radius:var(--eui-br-m);display:block;padding:3px 8px}.eui-timebar__grouped__step.eui-timebar__step--info{background-color:var(--eui-c-info)}.eui-timebar__grouped__step.eui-timebar__step--success{background-color:var(--eui-c-success)}.eui-timebar__grouped__step.eui-timebar__step--warning{background-color:var(--eui-c-warning)}.eui-timebar__grouped__step.eui-timebar__step--danger{background-color:var(--eui-c-danger)}.eui-timebar__step--info{border-color:var(--eui-c-info)}.eui-timebar__step--info .eui-timebar__step-date-item{background-color:var(--eui-c-info)}.eui-timebar__step--success{border-color:var(--eui-c-success)}.eui-timebar__step--success .eui-timebar__step-date-item{background-color:var(--eui-c-success)}.eui-timebar__step--warning{border-color:var(--eui-c-warning)}.eui-timebar__step--warning .eui-timebar__step-date-item{background-color:var(--eui-c-warning)}.eui-timebar__step--danger{border-color:var(--eui-c-danger)}.eui-timebar__step--danger .eui-timebar__step-date-item{background-color:var(--eui-c-danger)}.eui-timebar__legend-item-icon{color:var(--eui-c-primary);fill:var(--eui-c-primary);width:var(--eui-s-3xl);height:var(--eui-s-3xl)}.eui-timebar__legend-item-icon--info{color:var(--eui-c-info)}.eui-timebar__legend-item-icon--success{color:var(--eui-c-success)}.eui-timebar__legend-item-icon--warning{color:var(--eui-c-warning)}.eui-timebar__legend-item-icon--danger{color:var(--eui-c-danger)}@media screen and (max-width: 767px){.eui-timebar{margin:5rem var(--eui-s-m)}.eui-timebar__legend{margin-bottom:var(--eui-s-l);margin-left:18px}}\n"] }]
         }], ctorParameters: () => [{ type: i1.EuiAppShellService }, { type: i0.ChangeDetectorRef }], propDecorators: { container: [{
                 type: ViewChild,
                 args: ['container']

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

@@ -21,7 +21,7 @@ export class EuiTimelineItemComponent {
             .trim();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0, type: EuiTimelineItemComponent, deps: [{ token: i1.BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.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-timeline{display:flex;flex-direction:column;margin:0;padding:0;position:relative;width:100%}.eui-timeline .eui-timeline-item{display:flex;flex-direction:row;list-style:none;margin-bottom:var(--eui-s-m);position:relative;width:100%}.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:center;word-break:break-all}.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:2px;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-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-timeline .eui-timeline-item .eui-timeline-item__icon.eui-timeline-item__icon--group{align-items:center;border:1px dashed var(--eui-c-neutral-lighter);display:flex;flex-direction:column;height:auto;margin:0 calc(var(--eui-s-l) + 1px)}.eui-timeline .eui-timeline-item .eui-timeline-item__content{position:relative;top:calc(-1 * var(--eui-s-2xs));width:100%}.eui-timeline .eui-timeline-item .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-neutral);font:var(--eui-f-l-bold)}.eui-timeline .eui-timeline-item .eui-timeline-item__content .eui-timeline-item__subtitle{color:var(--eui-c-neutral-light)}.eui-timeline .eui-timeline-item .eui-timeline-item__date{color:var(--eui-c-neutral);font:var(--eui-f-m-bold)}.eui-timeline .eui-timeline-item .eui-timeline-item__time{color:var(--eui-c-neutral-light)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__icon:after{left:calc(1 * var(--eui-s-m) + 10px)!important}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__icon.eui-timeline-item__icon--group{align-items:center;border:1px dashed var(--eui-c-neutral-lighter);display:flex;flex-direction:column;height:auto;margin:0 calc(var(--eui-s-l) + 2px)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__content{padding-bottom:var(--eui-s-s)}.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-timeline-item.eui-timeline-item--primary .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-primary)}.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-primary-dark)}.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-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-neutral-light)}.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-info)}.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-info-dark)}.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-warning)}.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-warning-dark)}.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-success)}.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-success-dark)}.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-danger)}.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-danger-dark)}.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-accent)}.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-accent-dark)}.eui-timeline-item.eui-timeline-item--more{margin-bottom:0}.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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.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-timeline{display:flex;flex-direction:column;margin:0;padding:0;position:relative;width:100%}.eui-timeline .eui-timeline-item{display:flex;flex-direction:row;list-style:none;margin-bottom:var(--eui-s-m);position:relative;width:100%}.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:center;word-break:break-all}.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:2px;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-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-timeline .eui-timeline-item .eui-timeline-item__icon.eui-timeline-item__icon--group{align-items:center;border:var(--eui-bw-xs) dashed var(--eui-c-neutral-lighter);display:flex;flex-direction:column;height:auto;margin:0 calc(var(--eui-s-l) + 1px)}.eui-timeline .eui-timeline-item .eui-timeline-item__content{position:relative;top:calc(-1 * var(--eui-s-2xs));width:100%}.eui-timeline .eui-timeline-item .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-neutral);font:var(--eui-f-l-bold)}.eui-timeline .eui-timeline-item .eui-timeline-item__content .eui-timeline-item__subtitle{color:var(--eui-c-neutral-light)}.eui-timeline .eui-timeline-item .eui-timeline-item__date{color:var(--eui-c-neutral);font:var(--eui-f-m-bold)}.eui-timeline .eui-timeline-item .eui-timeline-item__time{color:var(--eui-c-neutral-light)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__icon:after{left:calc(1 * var(--eui-s-m) + 10px)!important}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__icon.eui-timeline-item__icon--group{align-items:center;border:var(--eui-bw-xs) dashed var(--eui-c-neutral-lighter);display:flex;flex-direction:column;height:auto;margin:0 calc(var(--eui-s-l) + 2px)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__content{padding-bottom:var(--eui-s-s)}.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-timeline-item.eui-timeline-item--primary .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-primary)}.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-primary-dark)}.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-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-neutral-light)}.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-info)}.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-info-dark)}.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-warning)}.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-warning-dark)}.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-success)}.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-success-dark)}.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-danger)}.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-danger-dark)}.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-accent)}.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-accent-dark)}.eui-timeline-item.eui-timeline-item--more{margin-bottom:0}.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.0.0-rc.0", ngImport: i0, type: EuiTimelineItemComponent, decorators: [{
             type: Component,
@@ -30,7 +30,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ng
                             directive: BaseStatesDirective,
                             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-timeline{display:flex;flex-direction:column;margin:0;padding:0;position:relative;width:100%}.eui-timeline .eui-timeline-item{display:flex;flex-direction:row;list-style:none;margin-bottom:var(--eui-s-m);position:relative;width:100%}.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:center;word-break:break-all}.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:2px;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-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-timeline .eui-timeline-item .eui-timeline-item__icon.eui-timeline-item__icon--group{align-items:center;border:1px dashed var(--eui-c-neutral-lighter);display:flex;flex-direction:column;height:auto;margin:0 calc(var(--eui-s-l) + 1px)}.eui-timeline .eui-timeline-item .eui-timeline-item__content{position:relative;top:calc(-1 * var(--eui-s-2xs));width:100%}.eui-timeline .eui-timeline-item .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-neutral);font:var(--eui-f-l-bold)}.eui-timeline .eui-timeline-item .eui-timeline-item__content .eui-timeline-item__subtitle{color:var(--eui-c-neutral-light)}.eui-timeline .eui-timeline-item .eui-timeline-item__date{color:var(--eui-c-neutral);font:var(--eui-f-m-bold)}.eui-timeline .eui-timeline-item .eui-timeline-item__time{color:var(--eui-c-neutral-light)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__icon:after{left:calc(1 * var(--eui-s-m) + 10px)!important}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__icon.eui-timeline-item__icon--group{align-items:center;border:1px dashed var(--eui-c-neutral-lighter);display:flex;flex-direction:column;height:auto;margin:0 calc(var(--eui-s-l) + 2px)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__content{padding-bottom:var(--eui-s-s)}.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-timeline-item.eui-timeline-item--primary .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-primary)}.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-primary-dark)}.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-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-neutral-light)}.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-info)}.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-info-dark)}.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-warning)}.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-warning-dark)}.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-success)}.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-success-dark)}.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-danger)}.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-danger-dark)}.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-accent)}.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-accent-dark)}.eui-timeline-item.eui-timeline-item--more{margin-bottom:0}.eui-timeline-item.eui-timeline-item--more .eui-timeline-item__content{padding-bottom:var(--eui-s-m)}\n"] }]
+                    ], 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-timeline{display:flex;flex-direction:column;margin:0;padding:0;position:relative;width:100%}.eui-timeline .eui-timeline-item{display:flex;flex-direction:row;list-style:none;margin-bottom:var(--eui-s-m);position:relative;width:100%}.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:center;word-break:break-all}.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:2px;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-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-timeline .eui-timeline-item .eui-timeline-item__icon.eui-timeline-item__icon--group{align-items:center;border:var(--eui-bw-xs) dashed var(--eui-c-neutral-lighter);display:flex;flex-direction:column;height:auto;margin:0 calc(var(--eui-s-l) + 1px)}.eui-timeline .eui-timeline-item .eui-timeline-item__content{position:relative;top:calc(-1 * var(--eui-s-2xs));width:100%}.eui-timeline .eui-timeline-item .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-neutral);font:var(--eui-f-l-bold)}.eui-timeline .eui-timeline-item .eui-timeline-item__content .eui-timeline-item__subtitle{color:var(--eui-c-neutral-light)}.eui-timeline .eui-timeline-item .eui-timeline-item__date{color:var(--eui-c-neutral);font:var(--eui-f-m-bold)}.eui-timeline .eui-timeline-item .eui-timeline-item__time{color:var(--eui-c-neutral-light)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__icon:after{left:calc(1 * var(--eui-s-m) + 10px)!important}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__icon.eui-timeline-item__icon--group{align-items:center;border:var(--eui-bw-xs) dashed var(--eui-c-neutral-lighter);display:flex;flex-direction:column;height:auto;margin:0 calc(var(--eui-s-l) + 2px)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__content{padding-bottom:var(--eui-s-s)}.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-timeline-item.eui-timeline-item--primary .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-primary)}.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-primary-dark)}.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-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-neutral-light)}.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-info)}.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-info-dark)}.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-warning)}.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-warning-dark)}.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-success)}.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-success-dark)}.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-danger)}.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-danger-dark)}.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-accent)}.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-accent-dark)}.eui-timeline-item.eui-timeline-item--more{margin-bottom:0}.eui-timeline-item.eui-timeline-item--more .eui-timeline-item__content{padding-bottom:var(--eui-s-m)}\n"] }]
         }], ctorParameters: () => [{ type: i1.BaseStatesDirective }], propDecorators: { cssClasses: [{
                 type: HostBinding,
                 args: ['class']

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

@@ -25,11 +25,11 @@ export class EuiTimelineComponent {
         return ['eui-timeline', this.isLeftAligned ? 'eui-timeline--left-aligned' : ''].join(' ').trim();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0, type: EuiTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.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-timeline{display:flex;flex-direction:column;margin:0;padding:0;position:relative;width:100%}.eui-timeline .eui-timeline-item{display:flex;flex-direction:row;list-style:none;margin-bottom:var(--eui-s-m);position:relative;width:100%}.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:center;word-break:break-all}.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:2px;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-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-timeline .eui-timeline-item .eui-timeline-item__icon.eui-timeline-item__icon--group{align-items:center;border:1px dashed var(--eui-c-neutral-lighter);display:flex;flex-direction:column;height:auto;margin:0 calc(var(--eui-s-l) + 1px)}.eui-timeline .eui-timeline-item .eui-timeline-item__content{position:relative;top:calc(-1 * var(--eui-s-2xs));width:100%}.eui-timeline .eui-timeline-item .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-neutral);font:var(--eui-f-l-bold)}.eui-timeline .eui-timeline-item .eui-timeline-item__content .eui-timeline-item__subtitle{color:var(--eui-c-neutral-light)}.eui-timeline .eui-timeline-item .eui-timeline-item__date{color:var(--eui-c-neutral);font:var(--eui-f-m-bold)}.eui-timeline .eui-timeline-item .eui-timeline-item__time{color:var(--eui-c-neutral-light)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__icon:after{left:calc(1 * var(--eui-s-m) + 10px)!important}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__icon.eui-timeline-item__icon--group{align-items:center;border:1px dashed var(--eui-c-neutral-lighter);display:flex;flex-direction:column;height:auto;margin:0 calc(var(--eui-s-l) + 2px)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__content{padding-bottom:var(--eui-s-s)}.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-timeline-item.eui-timeline-item--primary .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-primary)}.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-primary-dark)}.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-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-neutral-light)}.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-info)}.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-info-dark)}.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-warning)}.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-warning-dark)}.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-success)}.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-success-dark)}.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-danger)}.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-danger-dark)}.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-accent)}.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-accent-dark)}.eui-timeline-item.eui-timeline-item--more{margin-bottom:0}.eui-timeline-item.eui-timeline-item--more .eui-timeline-item__content{padding-bottom:var(--eui-s-m)}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.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-timeline{display:flex;flex-direction:column;margin:0;padding:0;position:relative;width:100%}.eui-timeline .eui-timeline-item{display:flex;flex-direction:row;list-style:none;margin-bottom:var(--eui-s-m);position:relative;width:100%}.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:center;word-break:break-all}.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:2px;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-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-timeline .eui-timeline-item .eui-timeline-item__icon.eui-timeline-item__icon--group{align-items:center;border:var(--eui-bw-xs) dashed var(--eui-c-neutral-lighter);display:flex;flex-direction:column;height:auto;margin:0 calc(var(--eui-s-l) + 1px)}.eui-timeline .eui-timeline-item .eui-timeline-item__content{position:relative;top:calc(-1 * var(--eui-s-2xs));width:100%}.eui-timeline .eui-timeline-item .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-neutral);font:var(--eui-f-l-bold)}.eui-timeline .eui-timeline-item .eui-timeline-item__content .eui-timeline-item__subtitle{color:var(--eui-c-neutral-light)}.eui-timeline .eui-timeline-item .eui-timeline-item__date{color:var(--eui-c-neutral);font:var(--eui-f-m-bold)}.eui-timeline .eui-timeline-item .eui-timeline-item__time{color:var(--eui-c-neutral-light)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__icon:after{left:calc(1 * var(--eui-s-m) + 10px)!important}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__icon.eui-timeline-item__icon--group{align-items:center;border:var(--eui-bw-xs) dashed var(--eui-c-neutral-lighter);display:flex;flex-direction:column;height:auto;margin:0 calc(var(--eui-s-l) + 2px)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__content{padding-bottom:var(--eui-s-s)}.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-timeline-item.eui-timeline-item--primary .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-primary)}.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-primary-dark)}.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-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-neutral-light)}.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-info)}.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-info-dark)}.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-warning)}.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-warning-dark)}.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-success)}.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-success-dark)}.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-danger)}.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-danger-dark)}.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-accent)}.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-accent-dark)}.eui-timeline-item.eui-timeline-item--more{margin-bottom:0}.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.0.0-rc.0", ngImport: i0, type: EuiTimelineComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'eui-timeline', template: "<ng-content></ng-content>\n", styles: [".eui-timeline{display:flex;flex-direction:column;margin:0;padding:0;position:relative;width:100%}.eui-timeline .eui-timeline-item{display:flex;flex-direction:row;list-style:none;margin-bottom:var(--eui-s-m);position:relative;width:100%}.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:center;word-break:break-all}.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:2px;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-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-timeline .eui-timeline-item .eui-timeline-item__icon.eui-timeline-item__icon--group{align-items:center;border:1px dashed var(--eui-c-neutral-lighter);display:flex;flex-direction:column;height:auto;margin:0 calc(var(--eui-s-l) + 1px)}.eui-timeline .eui-timeline-item .eui-timeline-item__content{position:relative;top:calc(-1 * var(--eui-s-2xs));width:100%}.eui-timeline .eui-timeline-item .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-neutral);font:var(--eui-f-l-bold)}.eui-timeline .eui-timeline-item .eui-timeline-item__content .eui-timeline-item__subtitle{color:var(--eui-c-neutral-light)}.eui-timeline .eui-timeline-item .eui-timeline-item__date{color:var(--eui-c-neutral);font:var(--eui-f-m-bold)}.eui-timeline .eui-timeline-item .eui-timeline-item__time{color:var(--eui-c-neutral-light)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__icon:after{left:calc(1 * var(--eui-s-m) + 10px)!important}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__icon.eui-timeline-item__icon--group{align-items:center;border:1px dashed var(--eui-c-neutral-lighter);display:flex;flex-direction:column;height:auto;margin:0 calc(var(--eui-s-l) + 2px)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__content{padding-bottom:var(--eui-s-s)}.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-timeline-item.eui-timeline-item--primary .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-primary)}.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-primary-dark)}.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-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-neutral-light)}.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-info)}.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-info-dark)}.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-warning)}.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-warning-dark)}.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-success)}.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-success-dark)}.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-danger)}.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-danger-dark)}.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-accent)}.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-accent-dark)}.eui-timeline-item.eui-timeline-item--more{margin-bottom:0}.eui-timeline-item.eui-timeline-item--more .eui-timeline-item__content{padding-bottom:var(--eui-s-m)}\n"] }]
+            args: [{ selector: 'eui-timeline', template: "<ng-content></ng-content>\n", styles: [".eui-timeline{display:flex;flex-direction:column;margin:0;padding:0;position:relative;width:100%}.eui-timeline .eui-timeline-item{display:flex;flex-direction:row;list-style:none;margin-bottom:var(--eui-s-m);position:relative;width:100%}.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:center;word-break:break-all}.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:2px;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-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-timeline .eui-timeline-item .eui-timeline-item__icon.eui-timeline-item__icon--group{align-items:center;border:var(--eui-bw-xs) dashed var(--eui-c-neutral-lighter);display:flex;flex-direction:column;height:auto;margin:0 calc(var(--eui-s-l) + 1px)}.eui-timeline .eui-timeline-item .eui-timeline-item__content{position:relative;top:calc(-1 * var(--eui-s-2xs));width:100%}.eui-timeline .eui-timeline-item .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-neutral);font:var(--eui-f-l-bold)}.eui-timeline .eui-timeline-item .eui-timeline-item__content .eui-timeline-item__subtitle{color:var(--eui-c-neutral-light)}.eui-timeline .eui-timeline-item .eui-timeline-item__date{color:var(--eui-c-neutral);font:var(--eui-f-m-bold)}.eui-timeline .eui-timeline-item .eui-timeline-item__time{color:var(--eui-c-neutral-light)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__icon:after{left:calc(1 * var(--eui-s-m) + 10px)!important}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__icon.eui-timeline-item__icon--group{align-items:center;border:var(--eui-bw-xs) dashed var(--eui-c-neutral-lighter);display:flex;flex-direction:column;height:auto;margin:0 calc(var(--eui-s-l) + 2px)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__content{padding-bottom:var(--eui-s-s)}.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-timeline-item.eui-timeline-item--primary .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-primary)}.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-primary-dark)}.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-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-neutral-light)}.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-info)}.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-info-dark)}.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-warning)}.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-warning-dark)}.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-success)}.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-success-dark)}.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-danger)}.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-danger-dark)}.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__icon:not(.eui-timeline-item__icon--group){border-color:var(--eui-c-accent)}.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-c-accent-dark)}.eui-timeline-item.eui-timeline-item--more{margin-bottom:0}.eui-timeline-item.eui-timeline-item--more .eui-timeline-item__content{padding-bottom:var(--eui-s-m)}\n"] }]
         }], propDecorators: { cssClasses: [{
                 type: HostBinding,
                 args: ['class']

package/esm2022/eui-user-profile/user-profile.component.mjs CHANGED Viewed

@@ -75,7 +75,7 @@ export class EuiUserProfileComponent {
         ].join(' ').trim();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0, type: EuiUserProfileComponent, deps: [{ token: i0.ElementRef }, { token: i1.UserService }, { token: i2.BaseStatesDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: EuiUserProfileComponent, selector: "eui-user-profile", inputs: { welcomeLabel: "welcomeLabel", impersonateLabel: "impersonateLabel", avatarUrl: "avatarUrl", subInfos: "subInfos", hasMenu: ["hasMenu", "hasMenu", booleanAttribute], isShowUserInfos: ["isShowUserInfos", "isShowUserInfos", booleanAttribute], hasWelcomeLabel: ["hasWelcomeLabel", "hasWelcomeLabel", booleanAttribute], isShowAvatarInitials: ["isShowAvatarInitials", "isShowAvatarInitials", booleanAttribute], hasTabNavigation: ["hasTabNavigation", "hasTabNavigation", booleanAttribute], isReverse: ["isReverse", "isReverse", booleanAttribute], hasToggle: ["hasToggle", "hasToggle", booleanAttribute], isHeaderUserProfile: ["isHeaderUserProfile", "isHeaderUserProfile", booleanAttribute] }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "hasMenuContent", predicate: i0.forwardRef(() => EuiUserProfileMenuComponent), descendants: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], hostDirectives: [{ directive: i2.BaseStatesDirective, inputs: ["euiSizeS", "euiSizeS", "euiInverted", "euiInverted"] }], ngImport: i0, template: "<ng-container *ngIf=\"hasMenu; else noMenuContent\">\n    <eui-dropdown [hasTabNavigation]=\"hasTabNavigation\" width=\"340px\" #dropdown>\n        <ng-container *ngTemplateOutlet=\"userProfileContent\"></ng-container>\n        <eui-dropdown-content>\n            <ng-content></ng-content>\n        </eui-dropdown-content>\n    </eui-dropdown>\n</ng-container>\n\n<ng-template #noMenuContent>\n    <ng-container *ngTemplateOutlet=\"userProfileContent\"></ng-container>\n</ng-template>\n\n<ng-template #userProfileContent>\n        <button [tabindex]=\"hasMenu ? '0' : '-1'\" class=\"eui-user-profile-content\" [class.eui-user-profile-content--no-menu]=\"!hasMenu\">\n            <div *ngIf=\"isShowUserInfos\"\n                class=\"eui-user-profile__infos\"\n                [class.eui-user-profile__infos--no-welcome]=\"subInfos && !hasWelcomeLabel\"\n                [class.eui-user-profile__infos--no-subinfos]=\"!subInfos\">\n                <ng-container *ngIf=\"userState?.impersonatingUser; else notImpersonated\">\n                    <div class=\"eui-user-profile__infos-welcome\">\n                        <span class=\"eui-u-mr-2xs\" *ngIf=\"hasWelcomeLabel\">{{ welcomeLabel }}</span>\n                        <strong>{{ userState?.impersonatingUser?.firstName }} {{ userState?.impersonatingUser?.lastName}}</strong>\n                        <span class=\"eui-u-ml-2xs\">{{ impersonateLabel }}</span>\n                    </div>\n                    <div class=\"eui-user-profile__infos-name\">\n                        {{ userState?.fullName }}\n                    </div>\n                    <div *ngIf=\"subInfos\" class=\"eui-user-profile__infos-subinfos\">\n                        {{ subInfos }}\n                    </div>\n                </ng-container>\n\n                <ng-template #notImpersonated>\n                    <div *ngIf=\"hasWelcomeLabel\" class=\"eui-user-profile__infos-welcome\">{{ welcomeLabel }}</div>\n                    <div class=\"eui-user-profile__infos-name\">{{ userState?.fullName }}</div>\n                    <div *ngIf=\"subInfos\" class=\"eui-user-profile__infos-subinfos\">\n                        {{ subInfos }}\n                    </div>\n                </ng-template>\n            </div>\n\n            <eui-avatar [euiSizeS]=\"baseStatesDirective.euiSizeS\" euiInfo\n                        [hasShadow]=\"userState?.impersonatingUser\">\n                <eui-avatar-text *ngIf=\"isShowAvatarInitials; else noAvatarInitials\">\n                    {{ avatarInitials }}\n                </eui-avatar-text>\n                <ng-template #noAvatarInitials>\n                    <eui-avatar-image *ngIf=\"!avatarUrl\"></eui-avatar-image>\n                    <eui-avatar-image *ngIf=\"avatarUrl\" [imageUrl]=\"avatarUrl\"></eui-avatar-image>\n                </ng-template>\n                <eui-avatar-badge position=\"bottom\" *ngIf=\"hasMenu || hasToggle\">\n                    <eui-badge euiSecondary euiSizeXS>\n                        <eui-icon-svg icon=\"eui-chevron-down\" size=\"2xs\" fillColor=\"neutral\"></eui-icon-svg>\n                    </eui-badge>\n                </eui-avatar-badge>\n            </eui-avatar>\n        </button>\n</ng-template>\n", styles: [".eui-user-profile{display:flex;position:relative}.eui-user-profile-content{align-items:center;background:none;border:none;cursor:pointer;display:flex}.eui-user-profile-content:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-user-profile-content:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-user-profile-content [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-user-profile-content--no-menu{cursor:default}.eui-user-profile__infos{align-items:flex-end;display:flex;flex-direction:column;padding-right:var(--eui-s-s)}.eui-user-profile__infos-container{justify-content:flex-end;align-items:center;display:flex;width:100%}.eui-user-profile__infos-welcome{text-align:right;font:var(--eui-f-s-compact)}.eui-user-profile__infos-name{color:var(--eui-c-branding);text-align:right;font:var(--eui-f-m-bold-compact)}.eui-user-profile__infos-subinfos{color:var(--eui-c-neutral);text-align:right;font:var(--eui-f-xs-compact)}.eui-user-profile__infos--no-welcome{display:flex}.eui-user-profile__infos--no-subinfos .eui-user-profile__infos-name{font:var(--eui-f-m-bold)}@media screen and (max-width: 767px){.eui-app-shell-header-toolbar-items .eui-user-profile{display:flex}.eui-app .eui-app-toolbar .eui-user-profile__infos{display:none}}@media screen and (min-width: 768px){.eui-app-shell-header-toolbar-items .eui-user-profile{display:none}.is-header-shrink .eui-user-profile{display:flex}}@media screen and (min-width: 768px) and (max-width: 995px){.eui-app .eui-app-toolbar .eui-user-profile__infos{display:none}}.eui-user-profile--inverted .eui-user-profile__infos-name{color:var(--eui-c-white)}.eui-user-profile--inverted .eui-user-profile__infos-welcome,.eui-user-profile--inverted .eui-user-profile__infos-subinfos{color:var(--eui-c-neutral-lightest)}.eui-user-profile--reverse .eui-user-profile-content{flex-direction:row-reverse}.eui-user-profile--reverse .eui-user-profile__infos{margin-left:var(--eui-s-m)}.eui-user-profile-menu{height:auto;min-width:340px;position:relative}.eui-user-profile-menu-item{align-items:center;border-bottom:1px solid var(--eui-c-neutral-lightest);cursor:pointer;display:flex;padding:var(--eui-s-xs) var(--eui-s-s)}.eui-user-profile-menu-item:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-user-profile-menu-item:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-user-profile-menu-item [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-user-profile-menu-item:hover{background-color:var(--eui-c-hover);cursor:pointer}.eui-user-profile-menu-item:last-child{border-bottom:0}.eui-user-profile-menu-item a{color:var(--eui-c-text);text-decoration:none}.eui-user-profile-menu-item.link{cursor:pointer}.eui-user-profile-menu-item-right-content{margin-left:auto}.eui-user-profile-card{width:100%}.eui-user-profile-card__main-wrapper{display:flex;flex-direction:row;padding:var(--eui-s-m) var(--eui-s-m) var(--eui-s-m) 0}.eui-user-profile-card__main-wrapper-right-content{display:flex;flex-direction:column;margin-left:auto}.eui-user-profile-card__avatar-wrapper{display:flex}.eui-user-profile-card__userInfos{display:flex;flex-direction:column;padding-left:var(--eui-s-s)}.eui-user-profile-card__userInfos-item{padding-bottom:var(--eui-s-xs)}.eui-user-profile-card__impersonateInfos{background-color:var(--eui-c-neutral-bg-light);padding:var(--eui-s-s)}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.EuiDropdownComponent, selector: "eui-dropdown", inputs: ["e2eAttr", "tabIndex", "width", "position", "isBlock", "isDropDownRightAligned", "hasClosedOnClickInside", "isLabelUpdatedFromSelectedItem", "isExpandOnHover", "hasTabNavigation", "isRightClickEnabled", "euiDisabled"] }, { kind: "directive", type: i4.EuiDropdownContentDirective, selector: "eui-dropdown-content" }, { kind: "component", type: i5.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i6.EuiAvatarComponent, selector: "div[euiAvatar], span[euiAvatar], eui-avatar", inputs: ["e2eAttr", "aria-label", "hasShadow", "isShapeSquare", "isFlat", "hasNoBackground"] }, { kind: "component", type: i6.EuiAvatarTextComponent, selector: "eui-avatar-text" }, { kind: "component", type: i6.EuiAvatarImageComponent, selector: "eui-avatar-image", inputs: ["imageUrl"] }, { kind: "component", type: i6.EuiAvatarBadgeComponent, selector: "eui-avatar-badge", inputs: ["position"] }, { kind: "component", type: i7.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.0-rc.0", type: EuiUserProfileComponent, selector: "eui-user-profile", inputs: { welcomeLabel: "welcomeLabel", impersonateLabel: "impersonateLabel", avatarUrl: "avatarUrl", subInfos: "subInfos", hasMenu: ["hasMenu", "hasMenu", booleanAttribute], isShowUserInfos: ["isShowUserInfos", "isShowUserInfos", booleanAttribute], hasWelcomeLabel: ["hasWelcomeLabel", "hasWelcomeLabel", booleanAttribute], isShowAvatarInitials: ["isShowAvatarInitials", "isShowAvatarInitials", booleanAttribute], hasTabNavigation: ["hasTabNavigation", "hasTabNavigation", booleanAttribute], isReverse: ["isReverse", "isReverse", booleanAttribute], hasToggle: ["hasToggle", "hasToggle", booleanAttribute], isHeaderUserProfile: ["isHeaderUserProfile", "isHeaderUserProfile", booleanAttribute] }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "hasMenuContent", predicate: i0.forwardRef(() => EuiUserProfileMenuComponent), descendants: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], hostDirectives: [{ directive: i2.BaseStatesDirective, inputs: ["euiSizeS", "euiSizeS", "euiInverted", "euiInverted"] }], ngImport: i0, template: "<ng-container *ngIf=\"hasMenu; else noMenuContent\">\n    <eui-dropdown [hasTabNavigation]=\"hasTabNavigation\" width=\"340px\" #dropdown>\n        <ng-container *ngTemplateOutlet=\"userProfileContent\"></ng-container>\n        <eui-dropdown-content>\n            <ng-content></ng-content>\n        </eui-dropdown-content>\n    </eui-dropdown>\n</ng-container>\n\n<ng-template #noMenuContent>\n    <ng-container *ngTemplateOutlet=\"userProfileContent\"></ng-container>\n</ng-template>\n\n<ng-template #userProfileContent>\n        <button [tabindex]=\"hasMenu ? '0' : '-1'\" class=\"eui-user-profile-content\" [class.eui-user-profile-content--no-menu]=\"!hasMenu\">\n            <div *ngIf=\"isShowUserInfos\"\n                class=\"eui-user-profile__infos\"\n                [class.eui-user-profile__infos--no-welcome]=\"subInfos && !hasWelcomeLabel\"\n                [class.eui-user-profile__infos--no-subinfos]=\"!subInfos\">\n                <ng-container *ngIf=\"userState?.impersonatingUser; else notImpersonated\">\n                    <div class=\"eui-user-profile__infos-welcome\">\n                        <span class=\"eui-u-mr-2xs\" *ngIf=\"hasWelcomeLabel\">{{ welcomeLabel }}</span>\n                        <strong>{{ userState?.impersonatingUser?.firstName }} {{ userState?.impersonatingUser?.lastName}}</strong>\n                        <span class=\"eui-u-ml-2xs\">{{ impersonateLabel }}</span>\n                    </div>\n                    <div class=\"eui-user-profile__infos-name\">\n                        {{ userState?.fullName }}\n                    </div>\n                    <div *ngIf=\"subInfos\" class=\"eui-user-profile__infos-subinfos\">\n                        {{ subInfos }}\n                    </div>\n                </ng-container>\n\n                <ng-template #notImpersonated>\n                    <div *ngIf=\"hasWelcomeLabel\" class=\"eui-user-profile__infos-welcome\">{{ welcomeLabel }}</div>\n                    <div class=\"eui-user-profile__infos-name\">{{ userState?.fullName }}</div>\n                    <div *ngIf=\"subInfos\" class=\"eui-user-profile__infos-subinfos\">\n                        {{ subInfos }}\n                    </div>\n                </ng-template>\n            </div>\n\n            <eui-avatar [euiSizeS]=\"baseStatesDirective.euiSizeS\" euiInfo\n                        [hasShadow]=\"userState?.impersonatingUser\">\n                <eui-avatar-text *ngIf=\"isShowAvatarInitials; else noAvatarInitials\">\n                    {{ avatarInitials }}\n                </eui-avatar-text>\n                <ng-template #noAvatarInitials>\n                    <eui-avatar-image *ngIf=\"!avatarUrl\"></eui-avatar-image>\n                    <eui-avatar-image *ngIf=\"avatarUrl\" [imageUrl]=\"avatarUrl\"></eui-avatar-image>\n                </ng-template>\n                <eui-avatar-badge position=\"bottom\" *ngIf=\"hasMenu || hasToggle\">\n                    <eui-badge euiSecondary euiSizeXS>\n                        <eui-icon-svg icon=\"eui-chevron-down\" size=\"2xs\" fillColor=\"neutral\"></eui-icon-svg>\n                    </eui-badge>\n                </eui-avatar-badge>\n            </eui-avatar>\n        </button>\n</ng-template>\n", styles: [".eui-user-profile{display:flex;position:relative}.eui-user-profile-content{align-items:center;background:none;border:var(--eui-bw-none);cursor:pointer;display:flex}.eui-user-profile-content:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-user-profile-content:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-user-profile-content [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-user-profile-content--no-menu{cursor:default}.eui-user-profile__infos{align-items:flex-end;display:flex;flex-direction:column;padding-right:var(--eui-s-s)}.eui-user-profile__infos-container{justify-content:flex-end;align-items:center;display:flex;width:100%}.eui-user-profile__infos-welcome{text-align:right;font:var(--eui-f-s-compact)}.eui-user-profile__infos-name{color:var(--eui-c-branding);text-align:right;font:var(--eui-f-m-bold-compact)}.eui-user-profile__infos-subinfos{color:var(--eui-c-neutral);text-align:right;font:var(--eui-f-xs-compact)}.eui-user-profile__infos--no-welcome{display:flex}.eui-user-profile__infos--no-subinfos .eui-user-profile__infos-name{font:var(--eui-f-m-bold)}@media screen and (max-width: 767px){.eui-app-shell-header-toolbar-items .eui-user-profile{display:flex}.eui-app .eui-app-toolbar .eui-user-profile__infos{display:none}}@media screen and (min-width: 768px){.eui-app-shell-header-toolbar-items .eui-user-profile{display:none}.is-header-shrink .eui-user-profile{display:flex}}@media screen and (min-width: 768px) and (max-width: 995px){.eui-app .eui-app-toolbar .eui-user-profile__infos{display:none}}.eui-user-profile--inverted .eui-user-profile__infos-name{color:var(--eui-c-white)}.eui-user-profile--inverted .eui-user-profile__infos-welcome,.eui-user-profile--inverted .eui-user-profile__infos-subinfos{color:var(--eui-c-neutral-lightest)}.eui-user-profile--reverse .eui-user-profile-content{flex-direction:row-reverse}.eui-user-profile--reverse .eui-user-profile__infos{margin-left:var(--eui-s-m)}.eui-user-profile-menu{height:auto;min-width:340px;position:relative}.eui-user-profile-menu-item{align-items:center;border-bottom:1px solid var(--eui-c-neutral-lightest);cursor:pointer;display:flex;padding:var(--eui-s-xs) var(--eui-s-s)}.eui-user-profile-menu-item:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-user-profile-menu-item:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-user-profile-menu-item [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-user-profile-menu-item:hover{background-color:var(--eui-c-hover);cursor:pointer}.eui-user-profile-menu-item:last-child{border-bottom:0}.eui-user-profile-menu-item a{color:var(--eui-c-text);text-decoration:none}.eui-user-profile-menu-item.link{cursor:pointer}.eui-user-profile-menu-item-right-content{margin-left:auto}.eui-user-profile-card{width:100%}.eui-user-profile-card__main-wrapper{display:flex;flex-direction:row;padding:var(--eui-s-m) var(--eui-s-m) var(--eui-s-m) 0}.eui-user-profile-card__main-wrapper-right-content{display:flex;flex-direction:column;margin-left:auto}.eui-user-profile-card__avatar-wrapper{display:flex}.eui-user-profile-card__userInfos{display:flex;flex-direction:column;padding-left:var(--eui-s-s)}.eui-user-profile-card__userInfos-item{padding-bottom:var(--eui-s-xs)}.eui-user-profile-card__impersonateInfos{background-color:var(--eui-c-neutral-bg-light);padding:var(--eui-s-s)}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.EuiDropdownComponent, selector: "eui-dropdown", inputs: ["e2eAttr", "tabIndex", "width", "position", "isBlock", "isDropDownRightAligned", "hasClosedOnClickInside", "isLabelUpdatedFromSelectedItem", "isExpandOnHover", "hasTabNavigation", "isRightClickEnabled", "euiDisabled"] }, { kind: "directive", type: i4.EuiDropdownContentDirective, selector: "eui-dropdown-content" }, { kind: "component", type: i5.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i6.EuiAvatarComponent, selector: "div[euiAvatar], span[euiAvatar], eui-avatar", inputs: ["e2eAttr", "aria-label", "hasShadow", "isShapeSquare", "isFlat", "hasNoBackground"] }, { kind: "component", type: i6.EuiAvatarTextComponent, selector: "eui-avatar-text" }, { kind: "component", type: i6.EuiAvatarImageComponent, selector: "eui-avatar-image", inputs: ["imageUrl"] }, { kind: "component", type: i6.EuiAvatarBadgeComponent, selector: "eui-avatar-badge", inputs: ["position"] }, { kind: "component", type: i7.EuiBadgeComponent, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: ["e2eAttr", "aria-label"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0, type: EuiUserProfileComponent, decorators: [{
             type: Component,
@@ -87,7 +87,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ng
                                 'euiInverted',
                             ],
                         },
-                    ], template: "<ng-container *ngIf=\"hasMenu; else noMenuContent\">\n    <eui-dropdown [hasTabNavigation]=\"hasTabNavigation\" width=\"340px\" #dropdown>\n        <ng-container *ngTemplateOutlet=\"userProfileContent\"></ng-container>\n        <eui-dropdown-content>\n            <ng-content></ng-content>\n        </eui-dropdown-content>\n    </eui-dropdown>\n</ng-container>\n\n<ng-template #noMenuContent>\n    <ng-container *ngTemplateOutlet=\"userProfileContent\"></ng-container>\n</ng-template>\n\n<ng-template #userProfileContent>\n        <button [tabindex]=\"hasMenu ? '0' : '-1'\" class=\"eui-user-profile-content\" [class.eui-user-profile-content--no-menu]=\"!hasMenu\">\n            <div *ngIf=\"isShowUserInfos\"\n                class=\"eui-user-profile__infos\"\n                [class.eui-user-profile__infos--no-welcome]=\"subInfos && !hasWelcomeLabel\"\n                [class.eui-user-profile__infos--no-subinfos]=\"!subInfos\">\n                <ng-container *ngIf=\"userState?.impersonatingUser; else notImpersonated\">\n                    <div class=\"eui-user-profile__infos-welcome\">\n                        <span class=\"eui-u-mr-2xs\" *ngIf=\"hasWelcomeLabel\">{{ welcomeLabel }}</span>\n                        <strong>{{ userState?.impersonatingUser?.firstName }} {{ userState?.impersonatingUser?.lastName}}</strong>\n                        <span class=\"eui-u-ml-2xs\">{{ impersonateLabel }}</span>\n                    </div>\n                    <div class=\"eui-user-profile__infos-name\">\n                        {{ userState?.fullName }}\n                    </div>\n                    <div *ngIf=\"subInfos\" class=\"eui-user-profile__infos-subinfos\">\n                        {{ subInfos }}\n                    </div>\n                </ng-container>\n\n                <ng-template #notImpersonated>\n                    <div *ngIf=\"hasWelcomeLabel\" class=\"eui-user-profile__infos-welcome\">{{ welcomeLabel }}</div>\n                    <div class=\"eui-user-profile__infos-name\">{{ userState?.fullName }}</div>\n                    <div *ngIf=\"subInfos\" class=\"eui-user-profile__infos-subinfos\">\n                        {{ subInfos }}\n                    </div>\n                </ng-template>\n            </div>\n\n            <eui-avatar [euiSizeS]=\"baseStatesDirective.euiSizeS\" euiInfo\n                        [hasShadow]=\"userState?.impersonatingUser\">\n                <eui-avatar-text *ngIf=\"isShowAvatarInitials; else noAvatarInitials\">\n                    {{ avatarInitials }}\n                </eui-avatar-text>\n                <ng-template #noAvatarInitials>\n                    <eui-avatar-image *ngIf=\"!avatarUrl\"></eui-avatar-image>\n                    <eui-avatar-image *ngIf=\"avatarUrl\" [imageUrl]=\"avatarUrl\"></eui-avatar-image>\n                </ng-template>\n                <eui-avatar-badge position=\"bottom\" *ngIf=\"hasMenu || hasToggle\">\n                    <eui-badge euiSecondary euiSizeXS>\n                        <eui-icon-svg icon=\"eui-chevron-down\" size=\"2xs\" fillColor=\"neutral\"></eui-icon-svg>\n                    </eui-badge>\n                </eui-avatar-badge>\n            </eui-avatar>\n        </button>\n</ng-template>\n", styles: [".eui-user-profile{display:flex;position:relative}.eui-user-profile-content{align-items:center;background:none;border:none;cursor:pointer;display:flex}.eui-user-profile-content:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-user-profile-content:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-user-profile-content [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-user-profile-content--no-menu{cursor:default}.eui-user-profile__infos{align-items:flex-end;display:flex;flex-direction:column;padding-right:var(--eui-s-s)}.eui-user-profile__infos-container{justify-content:flex-end;align-items:center;display:flex;width:100%}.eui-user-profile__infos-welcome{text-align:right;font:var(--eui-f-s-compact)}.eui-user-profile__infos-name{color:var(--eui-c-branding);text-align:right;font:var(--eui-f-m-bold-compact)}.eui-user-profile__infos-subinfos{color:var(--eui-c-neutral);text-align:right;font:var(--eui-f-xs-compact)}.eui-user-profile__infos--no-welcome{display:flex}.eui-user-profile__infos--no-subinfos .eui-user-profile__infos-name{font:var(--eui-f-m-bold)}@media screen and (max-width: 767px){.eui-app-shell-header-toolbar-items .eui-user-profile{display:flex}.eui-app .eui-app-toolbar .eui-user-profile__infos{display:none}}@media screen and (min-width: 768px){.eui-app-shell-header-toolbar-items .eui-user-profile{display:none}.is-header-shrink .eui-user-profile{display:flex}}@media screen and (min-width: 768px) and (max-width: 995px){.eui-app .eui-app-toolbar .eui-user-profile__infos{display:none}}.eui-user-profile--inverted .eui-user-profile__infos-name{color:var(--eui-c-white)}.eui-user-profile--inverted .eui-user-profile__infos-welcome,.eui-user-profile--inverted .eui-user-profile__infos-subinfos{color:var(--eui-c-neutral-lightest)}.eui-user-profile--reverse .eui-user-profile-content{flex-direction:row-reverse}.eui-user-profile--reverse .eui-user-profile__infos{margin-left:var(--eui-s-m)}.eui-user-profile-menu{height:auto;min-width:340px;position:relative}.eui-user-profile-menu-item{align-items:center;border-bottom:1px solid var(--eui-c-neutral-lightest);cursor:pointer;display:flex;padding:var(--eui-s-xs) var(--eui-s-s)}.eui-user-profile-menu-item:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-user-profile-menu-item:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-user-profile-menu-item [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-user-profile-menu-item:hover{background-color:var(--eui-c-hover);cursor:pointer}.eui-user-profile-menu-item:last-child{border-bottom:0}.eui-user-profile-menu-item a{color:var(--eui-c-text);text-decoration:none}.eui-user-profile-menu-item.link{cursor:pointer}.eui-user-profile-menu-item-right-content{margin-left:auto}.eui-user-profile-card{width:100%}.eui-user-profile-card__main-wrapper{display:flex;flex-direction:row;padding:var(--eui-s-m) var(--eui-s-m) var(--eui-s-m) 0}.eui-user-profile-card__main-wrapper-right-content{display:flex;flex-direction:column;margin-left:auto}.eui-user-profile-card__avatar-wrapper{display:flex}.eui-user-profile-card__userInfos{display:flex;flex-direction:column;padding-left:var(--eui-s-s)}.eui-user-profile-card__userInfos-item{padding-bottom:var(--eui-s-xs)}.eui-user-profile-card__impersonateInfos{background-color:var(--eui-c-neutral-bg-light);padding:var(--eui-s-s)}\n"] }]
+                    ], template: "<ng-container *ngIf=\"hasMenu; else noMenuContent\">\n    <eui-dropdown [hasTabNavigation]=\"hasTabNavigation\" width=\"340px\" #dropdown>\n        <ng-container *ngTemplateOutlet=\"userProfileContent\"></ng-container>\n        <eui-dropdown-content>\n            <ng-content></ng-content>\n        </eui-dropdown-content>\n    </eui-dropdown>\n</ng-container>\n\n<ng-template #noMenuContent>\n    <ng-container *ngTemplateOutlet=\"userProfileContent\"></ng-container>\n</ng-template>\n\n<ng-template #userProfileContent>\n        <button [tabindex]=\"hasMenu ? '0' : '-1'\" class=\"eui-user-profile-content\" [class.eui-user-profile-content--no-menu]=\"!hasMenu\">\n            <div *ngIf=\"isShowUserInfos\"\n                class=\"eui-user-profile__infos\"\n                [class.eui-user-profile__infos--no-welcome]=\"subInfos && !hasWelcomeLabel\"\n                [class.eui-user-profile__infos--no-subinfos]=\"!subInfos\">\n                <ng-container *ngIf=\"userState?.impersonatingUser; else notImpersonated\">\n                    <div class=\"eui-user-profile__infos-welcome\">\n                        <span class=\"eui-u-mr-2xs\" *ngIf=\"hasWelcomeLabel\">{{ welcomeLabel }}</span>\n                        <strong>{{ userState?.impersonatingUser?.firstName }} {{ userState?.impersonatingUser?.lastName}}</strong>\n                        <span class=\"eui-u-ml-2xs\">{{ impersonateLabel }}</span>\n                    </div>\n                    <div class=\"eui-user-profile__infos-name\">\n                        {{ userState?.fullName }}\n                    </div>\n                    <div *ngIf=\"subInfos\" class=\"eui-user-profile__infos-subinfos\">\n                        {{ subInfos }}\n                    </div>\n                </ng-container>\n\n                <ng-template #notImpersonated>\n                    <div *ngIf=\"hasWelcomeLabel\" class=\"eui-user-profile__infos-welcome\">{{ welcomeLabel }}</div>\n                    <div class=\"eui-user-profile__infos-name\">{{ userState?.fullName }}</div>\n                    <div *ngIf=\"subInfos\" class=\"eui-user-profile__infos-subinfos\">\n                        {{ subInfos }}\n                    </div>\n                </ng-template>\n            </div>\n\n            <eui-avatar [euiSizeS]=\"baseStatesDirective.euiSizeS\" euiInfo\n                        [hasShadow]=\"userState?.impersonatingUser\">\n                <eui-avatar-text *ngIf=\"isShowAvatarInitials; else noAvatarInitials\">\n                    {{ avatarInitials }}\n                </eui-avatar-text>\n                <ng-template #noAvatarInitials>\n                    <eui-avatar-image *ngIf=\"!avatarUrl\"></eui-avatar-image>\n                    <eui-avatar-image *ngIf=\"avatarUrl\" [imageUrl]=\"avatarUrl\"></eui-avatar-image>\n                </ng-template>\n                <eui-avatar-badge position=\"bottom\" *ngIf=\"hasMenu || hasToggle\">\n                    <eui-badge euiSecondary euiSizeXS>\n                        <eui-icon-svg icon=\"eui-chevron-down\" size=\"2xs\" fillColor=\"neutral\"></eui-icon-svg>\n                    </eui-badge>\n                </eui-avatar-badge>\n            </eui-avatar>\n        </button>\n</ng-template>\n", styles: [".eui-user-profile{display:flex;position:relative}.eui-user-profile-content{align-items:center;background:none;border:var(--eui-bw-none);cursor:pointer;display:flex}.eui-user-profile-content:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-user-profile-content:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-user-profile-content [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-user-profile-content--no-menu{cursor:default}.eui-user-profile__infos{align-items:flex-end;display:flex;flex-direction:column;padding-right:var(--eui-s-s)}.eui-user-profile__infos-container{justify-content:flex-end;align-items:center;display:flex;width:100%}.eui-user-profile__infos-welcome{text-align:right;font:var(--eui-f-s-compact)}.eui-user-profile__infos-name{color:var(--eui-c-branding);text-align:right;font:var(--eui-f-m-bold-compact)}.eui-user-profile__infos-subinfos{color:var(--eui-c-neutral);text-align:right;font:var(--eui-f-xs-compact)}.eui-user-profile__infos--no-welcome{display:flex}.eui-user-profile__infos--no-subinfos .eui-user-profile__infos-name{font:var(--eui-f-m-bold)}@media screen and (max-width: 767px){.eui-app-shell-header-toolbar-items .eui-user-profile{display:flex}.eui-app .eui-app-toolbar .eui-user-profile__infos{display:none}}@media screen and (min-width: 768px){.eui-app-shell-header-toolbar-items .eui-user-profile{display:none}.is-header-shrink .eui-user-profile{display:flex}}@media screen and (min-width: 768px) and (max-width: 995px){.eui-app .eui-app-toolbar .eui-user-profile__infos{display:none}}.eui-user-profile--inverted .eui-user-profile__infos-name{color:var(--eui-c-white)}.eui-user-profile--inverted .eui-user-profile__infos-welcome,.eui-user-profile--inverted .eui-user-profile__infos-subinfos{color:var(--eui-c-neutral-lightest)}.eui-user-profile--reverse .eui-user-profile-content{flex-direction:row-reverse}.eui-user-profile--reverse .eui-user-profile__infos{margin-left:var(--eui-s-m)}.eui-user-profile-menu{height:auto;min-width:340px;position:relative}.eui-user-profile-menu-item{align-items:center;border-bottom:1px solid var(--eui-c-neutral-lightest);cursor:pointer;display:flex;padding:var(--eui-s-xs) var(--eui-s-s)}.eui-user-profile-menu-item:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-user-profile-menu-item:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-user-profile-menu-item [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-user-profile-menu-item:hover{background-color:var(--eui-c-hover);cursor:pointer}.eui-user-profile-menu-item:last-child{border-bottom:0}.eui-user-profile-menu-item a{color:var(--eui-c-text);text-decoration:none}.eui-user-profile-menu-item.link{cursor:pointer}.eui-user-profile-menu-item-right-content{margin-left:auto}.eui-user-profile-card{width:100%}.eui-user-profile-card__main-wrapper{display:flex;flex-direction:row;padding:var(--eui-s-m) var(--eui-s-m) var(--eui-s-m) 0}.eui-user-profile-card__main-wrapper-right-content{display:flex;flex-direction:column;margin-left:auto}.eui-user-profile-card__avatar-wrapper{display:flex}.eui-user-profile-card__userInfos{display:flex;flex-direction:column;padding-left:var(--eui-s-s)}.eui-user-profile-card__userInfos-item{padding-bottom:var(--eui-s-xs)}.eui-user-profile-card__impersonateInfos{background-color:var(--eui-c-neutral-bg-light);padding:var(--eui-s-s)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.UserService }, { type: i2.BaseStatesDirective }], propDecorators: { cssClasses: [{
                 type: HostBinding,
                 args: ['class']

package/esm2022/eui-wizard/eui-wizard-step.component.mjs CHANGED Viewed

@@ -68,11 +68,11 @@ export class EuiWizardStepComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0, type: EuiWizardStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-rc.0", type: EuiWizardStepComponent, selector: "eui-wizard-step", inputs: { id: "id", indexLabel: "indexLabel", indexIconSvgName: "indexIconSvgName", label: "label", subLabel: "subLabel", index: "index", url: "url", isCompleted: "isCompleted", isActive: "isActive", isShowStepTitle: "isShowStepTitle", isInvalid: "isInvalid", isWarning: "isWarning", isDisabled: "isDisabled" }, ngImport: i0, template: "<ng-container *ngIf=\"isActive\">\n    <ng-content></ng-content>\n</ng-container>\n", styles: [".eui-wizard{border-bottom:1px solid var(--eui-c-neutral-lightest);display:flex;margin:var(--eui-s-xl) 0 -1px 0;padding-bottom:var(--eui-s-l)}.eui-wizard-step{cursor:pointer;flex:1;position:relative;text-align:center}.eui-wizard-step__content{margin:var(--eui-s-m) 0}.eui-wizard-step__current-marker{bottom:0;left:50%;position:absolute;transform:translate(-50%,75%)}.eui-wizard-step__indicator-wrapper{border-bottom:3px solid var(--eui-c-neutral-lightest);content:\"\";margin-bottom:var(--eui-s-s);top:var(--eui-s-s);width:100%}.eui-wizard-step__bullet-item{display:flex;align-items:center;justify-content:center;background-color:var(--eui-c-white);border:2px solid var(--eui-c-neutral-light);border-radius:var(--eui-br-max);height:var(--eui-s-3xl);margin:0 auto;margin-top:-2rem;padding-top:var(--eui-s-xs);width:var(--eui-s-3xl)}.eui-wizard-step__bullet-item-text{margin-top:-.5rem;font:var(--eui-f-l-bold)}.eui-wizard-step__label-wrapper{margin-top:var(--eui-s-m)}.eui-wizard-step__label-wrapper-label{font:var(--eui-f-m-bold)}.eui-wizard-step__label-wrapper-sub-label{font-size:95%;margin-top:var(--eui-s-2xs)}.eui-wizard-step--active .eui-wizard-step__bullet-item{border-color:var(--eui-c-primary);color:var(--eui-c-primary)}.eui-wizard-step--active .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-c-primary)}.eui-wizard-step--active .eui-wizard-step__label-wrapper-label{color:var(--eui-c-primary-darl)}.eui-wizard-step--active .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-c-info)}.eui-wizard-step--completed .eui-wizard-step__bullet-item{background-color:var(--eui-c-success);border-color:var(--eui-c-success);color:var(--eui-c-white)}.eui-wizard-step--completed .eui-wizard-step__bullet-item .eui-icon-svg>svg{color:var(--eui-c-white);fill:var(--eui-c-white)}.eui-wizard-step--completed .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-c-success)}.eui-wizard-step--completed .eui-wizard-step__label-wrapper-label{color:var(--eui-c-success-dark)}.eui-wizard-step--completed .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-c-success)}.eui-wizard-step--error .eui-wizard-step__bullet-item{background-color:var(--eui-c-danger);border-color:var(--eui-c-danger);color:var(--eui-c-white)}.eui-wizard-step--error .eui-wizard-step__bullet-item .eui-icon-svg>svg{color:var(--eui-c-white);fill:var(--eui-c-white)}.eui-wizard-step--error .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-c-danger)}.eui-wizard-step--error .eui-wizard-step__label-wrapper-label,.eui-wizard-step--error .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-c-danger)}.eui-wizard-step--warning .eui-wizard-step__bullet-item{background-color:var(--eui-c-warning);border-color:var(--eui-c-warning)}.eui-wizard-step--warning .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-c-warning-dark)}.eui-wizard-step--warning .eui-wizard-step__label-wrapper-label,.eui-wizard-step--warning .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-c-warning-dark)}.eui-wizard-step--disabled .eui-wizard-step__label-wrapper-label,.eui-wizard-step--disabled .eui-wizard-step__label-wrapper-sub-label,.eui-wizard-step--disabled .eui-wizard-step__bullet-item{border-color:var(--eui-c-neutral-lightest);color:var(--eui-c-neutral)}.eui-wizard-step--disabled .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-c-neutral-lightest)}.eui-wizard-step--disabled:hover{cursor:not-allowed}.eui-wizard-step--notallowed .eui-wizard-step__bullet-item-icon{color:var(--eui-c-white)}.eui-wizard-step--notallowed.eui-wizard-step--disabled .eui-wizard-step__bullet-item-icon{color:var(--eui-c-neutral-light)}.eui-wizard-step--notallowed.eui-wizard-step--disabled.eui-wizard-step--completed .eui-wizard-step__bullet-item-icon,.eui-wizard-step--notallowed.eui-wizard-step--disabled.eui-wizard-step--error .eui-wizard-step__bullet-item-icon{color:var(--eui-c-white)}.eui-wizard-step--notallowed:hover{cursor:not-allowed}.eui-wizard-step:focus .eui-wizard-step__bullet-item{border:2px solid transparent;border-color:var(--eui-c-accent-dark);border-radius:var(--eui-br-max)}.eui-wizard-step:first-child .eui-wizard-step__indicator-wrapper{margin-left:50%;width:50%}.eui-wizard-step:last-child .eui-wizard-step__indicator-wrapper{margin-right:50%;width:50%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-rc.0", type: EuiWizardStepComponent, selector: "eui-wizard-step", inputs: { id: "id", indexLabel: "indexLabel", indexIconSvgName: "indexIconSvgName", label: "label", subLabel: "subLabel", index: "index", url: "url", isCompleted: "isCompleted", isActive: "isActive", isShowStepTitle: "isShowStepTitle", isInvalid: "isInvalid", isWarning: "isWarning", isDisabled: "isDisabled" }, ngImport: i0, template: "<ng-container *ngIf=\"isActive\">\n    <ng-content></ng-content>\n</ng-container>\n", styles: [".eui-wizard{border-bottom:1px solid var(--eui-c-neutral-lightest);display:flex;margin:var(--eui-s-xl) 0 -1px 0;padding-bottom:var(--eui-s-l)}.eui-wizard-step{cursor:pointer;flex:1;position:relative;text-align:center}.eui-wizard-step__content{margin:var(--eui-s-m) 0}.eui-wizard-step__current-marker{bottom:0;left:50%;position:absolute;transform:translate(-50%,75%)}.eui-wizard-step__indicator-wrapper{border-bottom:3px solid var(--eui-c-neutral-lightest);content:\"\";margin-bottom:var(--eui-s-s);top:var(--eui-s-s);width:100%}.eui-wizard-step__bullet-item{display:flex;align-items:center;justify-content:center;background-color:var(--eui-c-white);border:var(--eui-bw-s) solid var(--eui-c-neutral-light);border-radius:var(--eui-br-max);height:var(--eui-s-3xl);margin:0 auto;margin-top:-2rem;padding-top:var(--eui-s-xs);width:var(--eui-s-3xl)}.eui-wizard-step__bullet-item-text{margin-top:-.5rem;font:var(--eui-f-l-bold)}.eui-wizard-step__label-wrapper{margin-top:var(--eui-s-m)}.eui-wizard-step__label-wrapper-label{font:var(--eui-f-m-bold)}.eui-wizard-step__label-wrapper-sub-label{font-size:95%;margin-top:var(--eui-s-2xs)}.eui-wizard-step--active .eui-wizard-step__bullet-item{border-color:var(--eui-c-primary);color:var(--eui-c-primary)}.eui-wizard-step--active .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-c-primary)}.eui-wizard-step--active .eui-wizard-step__label-wrapper-label{color:var(--eui-c-primary-darl)}.eui-wizard-step--active .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-c-info)}.eui-wizard-step--completed .eui-wizard-step__bullet-item{background-color:var(--eui-c-success);border-color:var(--eui-c-success);color:var(--eui-c-white)}.eui-wizard-step--completed .eui-wizard-step__bullet-item .eui-icon-svg>svg{color:var(--eui-c-white);fill:var(--eui-c-white)}.eui-wizard-step--completed .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-c-success)}.eui-wizard-step--completed .eui-wizard-step__label-wrapper-label{color:var(--eui-c-success-dark)}.eui-wizard-step--completed .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-c-success)}.eui-wizard-step--error .eui-wizard-step__bullet-item{background-color:var(--eui-c-danger);border-color:var(--eui-c-danger);color:var(--eui-c-white)}.eui-wizard-step--error .eui-wizard-step__bullet-item .eui-icon-svg>svg{color:var(--eui-c-white);fill:var(--eui-c-white)}.eui-wizard-step--error .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-c-danger)}.eui-wizard-step--error .eui-wizard-step__label-wrapper-label,.eui-wizard-step--error .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-c-danger)}.eui-wizard-step--warning .eui-wizard-step__bullet-item{background-color:var(--eui-c-warning);border-color:var(--eui-c-warning)}.eui-wizard-step--warning .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-c-warning-dark)}.eui-wizard-step--warning .eui-wizard-step__label-wrapper-label,.eui-wizard-step--warning .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-c-warning-dark)}.eui-wizard-step--disabled .eui-wizard-step__label-wrapper-label,.eui-wizard-step--disabled .eui-wizard-step__label-wrapper-sub-label,.eui-wizard-step--disabled .eui-wizard-step__bullet-item{border-color:var(--eui-c-neutral-lightest);color:var(--eui-c-neutral)}.eui-wizard-step--disabled .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-c-neutral-lightest)}.eui-wizard-step--disabled:hover{cursor:not-allowed}.eui-wizard-step--notallowed .eui-wizard-step__bullet-item-icon{color:var(--eui-c-white)}.eui-wizard-step--notallowed.eui-wizard-step--disabled .eui-wizard-step__bullet-item-icon{color:var(--eui-c-neutral-light)}.eui-wizard-step--notallowed.eui-wizard-step--disabled.eui-wizard-step--completed .eui-wizard-step__bullet-item-icon,.eui-wizard-step--notallowed.eui-wizard-step--disabled.eui-wizard-step--error .eui-wizard-step__bullet-item-icon{color:var(--eui-c-white)}.eui-wizard-step--notallowed:hover{cursor:not-allowed}.eui-wizard-step:focus .eui-wizard-step__bullet-item{border:var(--eui-bw-s) solid transparent;border-color:var(--eui-c-accent-dark);border-radius:var(--eui-br-max)}.eui-wizard-step:first-child .eui-wizard-step__indicator-wrapper{margin-left:50%;width:50%}.eui-wizard-step:last-child .eui-wizard-step__indicator-wrapper{margin-right:50%;width:50%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0, type: EuiWizardStepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'eui-wizard-step', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"isActive\">\n    <ng-content></ng-content>\n</ng-container>\n", styles: [".eui-wizard{border-bottom:1px solid var(--eui-c-neutral-lightest);display:flex;margin:var(--eui-s-xl) 0 -1px 0;padding-bottom:var(--eui-s-l)}.eui-wizard-step{cursor:pointer;flex:1;position:relative;text-align:center}.eui-wizard-step__content{margin:var(--eui-s-m) 0}.eui-wizard-step__current-marker{bottom:0;left:50%;position:absolute;transform:translate(-50%,75%)}.eui-wizard-step__indicator-wrapper{border-bottom:3px solid var(--eui-c-neutral-lightest);content:\"\";margin-bottom:var(--eui-s-s);top:var(--eui-s-s);width:100%}.eui-wizard-step__bullet-item{display:flex;align-items:center;justify-content:center;background-color:var(--eui-c-white);border:2px solid var(--eui-c-neutral-light);border-radius:var(--eui-br-max);height:var(--eui-s-3xl);margin:0 auto;margin-top:-2rem;padding-top:var(--eui-s-xs);width:var(--eui-s-3xl)}.eui-wizard-step__bullet-item-text{margin-top:-.5rem;font:var(--eui-f-l-bold)}.eui-wizard-step__label-wrapper{margin-top:var(--eui-s-m)}.eui-wizard-step__label-wrapper-label{font:var(--eui-f-m-bold)}.eui-wizard-step__label-wrapper-sub-label{font-size:95%;margin-top:var(--eui-s-2xs)}.eui-wizard-step--active .eui-wizard-step__bullet-item{border-color:var(--eui-c-primary);color:var(--eui-c-primary)}.eui-wizard-step--active .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-c-primary)}.eui-wizard-step--active .eui-wizard-step__label-wrapper-label{color:var(--eui-c-primary-darl)}.eui-wizard-step--active .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-c-info)}.eui-wizard-step--completed .eui-wizard-step__bullet-item{background-color:var(--eui-c-success);border-color:var(--eui-c-success);color:var(--eui-c-white)}.eui-wizard-step--completed .eui-wizard-step__bullet-item .eui-icon-svg>svg{color:var(--eui-c-white);fill:var(--eui-c-white)}.eui-wizard-step--completed .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-c-success)}.eui-wizard-step--completed .eui-wizard-step__label-wrapper-label{color:var(--eui-c-success-dark)}.eui-wizard-step--completed .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-c-success)}.eui-wizard-step--error .eui-wizard-step__bullet-item{background-color:var(--eui-c-danger);border-color:var(--eui-c-danger);color:var(--eui-c-white)}.eui-wizard-step--error .eui-wizard-step__bullet-item .eui-icon-svg>svg{color:var(--eui-c-white);fill:var(--eui-c-white)}.eui-wizard-step--error .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-c-danger)}.eui-wizard-step--error .eui-wizard-step__label-wrapper-label,.eui-wizard-step--error .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-c-danger)}.eui-wizard-step--warning .eui-wizard-step__bullet-item{background-color:var(--eui-c-warning);border-color:var(--eui-c-warning)}.eui-wizard-step--warning .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-c-warning-dark)}.eui-wizard-step--warning .eui-wizard-step__label-wrapper-label,.eui-wizard-step--warning .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-c-warning-dark)}.eui-wizard-step--disabled .eui-wizard-step__label-wrapper-label,.eui-wizard-step--disabled .eui-wizard-step__label-wrapper-sub-label,.eui-wizard-step--disabled .eui-wizard-step__bullet-item{border-color:var(--eui-c-neutral-lightest);color:var(--eui-c-neutral)}.eui-wizard-step--disabled .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-c-neutral-lightest)}.eui-wizard-step--disabled:hover{cursor:not-allowed}.eui-wizard-step--notallowed .eui-wizard-step__bullet-item-icon{color:var(--eui-c-white)}.eui-wizard-step--notallowed.eui-wizard-step--disabled .eui-wizard-step__bullet-item-icon{color:var(--eui-c-neutral-light)}.eui-wizard-step--notallowed.eui-wizard-step--disabled.eui-wizard-step--completed .eui-wizard-step__bullet-item-icon,.eui-wizard-step--notallowed.eui-wizard-step--disabled.eui-wizard-step--error .eui-wizard-step__bullet-item-icon{color:var(--eui-c-white)}.eui-wizard-step--notallowed:hover{cursor:not-allowed}.eui-wizard-step:focus .eui-wizard-step__bullet-item{border:2px solid transparent;border-color:var(--eui-c-accent-dark);border-radius:var(--eui-br-max)}.eui-wizard-step:first-child .eui-wizard-step__indicator-wrapper{margin-left:50%;width:50%}.eui-wizard-step:last-child .eui-wizard-step__indicator-wrapper{margin-right:50%;width:50%}\n"] }]
+            args: [{ selector: 'eui-wizard-step', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"isActive\">\n    <ng-content></ng-content>\n</ng-container>\n", styles: [".eui-wizard{border-bottom:1px solid var(--eui-c-neutral-lightest);display:flex;margin:var(--eui-s-xl) 0 -1px 0;padding-bottom:var(--eui-s-l)}.eui-wizard-step{cursor:pointer;flex:1;position:relative;text-align:center}.eui-wizard-step__content{margin:var(--eui-s-m) 0}.eui-wizard-step__current-marker{bottom:0;left:50%;position:absolute;transform:translate(-50%,75%)}.eui-wizard-step__indicator-wrapper{border-bottom:3px solid var(--eui-c-neutral-lightest);content:\"\";margin-bottom:var(--eui-s-s);top:var(--eui-s-s);width:100%}.eui-wizard-step__bullet-item{display:flex;align-items:center;justify-content:center;background-color:var(--eui-c-white);border:var(--eui-bw-s) solid var(--eui-c-neutral-light);border-radius:var(--eui-br-max);height:var(--eui-s-3xl);margin:0 auto;margin-top:-2rem;padding-top:var(--eui-s-xs);width:var(--eui-s-3xl)}.eui-wizard-step__bullet-item-text{margin-top:-.5rem;font:var(--eui-f-l-bold)}.eui-wizard-step__label-wrapper{margin-top:var(--eui-s-m)}.eui-wizard-step__label-wrapper-label{font:var(--eui-f-m-bold)}.eui-wizard-step__label-wrapper-sub-label{font-size:95%;margin-top:var(--eui-s-2xs)}.eui-wizard-step--active .eui-wizard-step__bullet-item{border-color:var(--eui-c-primary);color:var(--eui-c-primary)}.eui-wizard-step--active .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-c-primary)}.eui-wizard-step--active .eui-wizard-step__label-wrapper-label{color:var(--eui-c-primary-darl)}.eui-wizard-step--active .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-c-info)}.eui-wizard-step--completed .eui-wizard-step__bullet-item{background-color:var(--eui-c-success);border-color:var(--eui-c-success);color:var(--eui-c-white)}.eui-wizard-step--completed .eui-wizard-step__bullet-item .eui-icon-svg>svg{color:var(--eui-c-white);fill:var(--eui-c-white)}.eui-wizard-step--completed .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-c-success)}.eui-wizard-step--completed .eui-wizard-step__label-wrapper-label{color:var(--eui-c-success-dark)}.eui-wizard-step--completed .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-c-success)}.eui-wizard-step--error .eui-wizard-step__bullet-item{background-color:var(--eui-c-danger);border-color:var(--eui-c-danger);color:var(--eui-c-white)}.eui-wizard-step--error .eui-wizard-step__bullet-item .eui-icon-svg>svg{color:var(--eui-c-white);fill:var(--eui-c-white)}.eui-wizard-step--error .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-c-danger)}.eui-wizard-step--error .eui-wizard-step__label-wrapper-label,.eui-wizard-step--error .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-c-danger)}.eui-wizard-step--warning .eui-wizard-step__bullet-item{background-color:var(--eui-c-warning);border-color:var(--eui-c-warning)}.eui-wizard-step--warning .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-c-warning-dark)}.eui-wizard-step--warning .eui-wizard-step__label-wrapper-label,.eui-wizard-step--warning .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-c-warning-dark)}.eui-wizard-step--disabled .eui-wizard-step__label-wrapper-label,.eui-wizard-step--disabled .eui-wizard-step__label-wrapper-sub-label,.eui-wizard-step--disabled .eui-wizard-step__bullet-item{border-color:var(--eui-c-neutral-lightest);color:var(--eui-c-neutral)}.eui-wizard-step--disabled .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-c-neutral-lightest)}.eui-wizard-step--disabled:hover{cursor:not-allowed}.eui-wizard-step--notallowed .eui-wizard-step__bullet-item-icon{color:var(--eui-c-white)}.eui-wizard-step--notallowed.eui-wizard-step--disabled .eui-wizard-step__bullet-item-icon{color:var(--eui-c-neutral-light)}.eui-wizard-step--notallowed.eui-wizard-step--disabled.eui-wizard-step--completed .eui-wizard-step__bullet-item-icon,.eui-wizard-step--notallowed.eui-wizard-step--disabled.eui-wizard-step--error .eui-wizard-step__bullet-item-icon{color:var(--eui-c-white)}.eui-wizard-step--notallowed:hover{cursor:not-allowed}.eui-wizard-step:focus .eui-wizard-step__bullet-item{border:var(--eui-bw-s) solid transparent;border-color:var(--eui-c-accent-dark);border-radius:var(--eui-br-max)}.eui-wizard-step:first-child .eui-wizard-step__indicator-wrapper{margin-left:50%;width:50%}.eui-wizard-step:last-child .eui-wizard-step__indicator-wrapper{margin-right:50%;width:50%}\n"] }]
         }], propDecorators: { id: [{
                 type: Input
             }], indexLabel: [{

package/esm2022/eui-wizard/eui-wizard.component.mjs CHANGED Viewed

@@ -136,11 +136,11 @@ export class EuiWizardComponent {
         return null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0, type: EuiWizardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-rc.0", type: EuiWizardComponent, selector: "eui-wizard", inputs: { activeStepIndex: "activeStepIndex", steps: "steps", tabindex: "tabindex", e2eAttr: "e2eAttr", isCustomContent: "isCustomContent", isShowStepTitle: "isShowStepTitle", isNavigationAllowed: "isNavigationAllowed" }, outputs: { selectStep: "selectStep" }, queries: [{ propertyName: "childrenSteps", predicate: EuiWizardStepComponent }], viewQueries: [{ propertyName: "canBeFocused", predicate: ["canBeFocused"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"eui-wizard\" role=\"tablist\" aria-orientation=\"horizontal\" aria-label=\"\" attr.data-e2e=\"{{ e2eAttr }}\">\n    <div\n        #canBeFocused\n        *ngFor=\"let step of steps; let idx = index; trackBy: trackByFn\"\n        class=\"eui-wizard-step\"\n        role=\"tab\"\n        [id]=\"step.id\"\n        attr.aria-label=\"{{ step?.label }} {{ step?.subLabel }}\"\n        [attr.aria-disabled]=\"step?.isDisabled\"\n        [attr.aria-controls]=\"stepContentId\"\n        [tabindex]=\"step?.isDisabled || !isNavigationAllowed ? -1 : tabindex\"\n        [class.eui-wizard-step--completed]=\"step?.isCompleted\"\n        [class.eui-wizard-step--notallowed]=\"!isNavigationAllowed\"\n        [class.eui-wizard-step--active]=\"step?.isActive\"\n        [class.eui-wizard-step--disabled]=\"step?.isDisabled || !isNavigationAllowed\"\n        [class.eui-wizard-step--error]=\"step?.isInvalid\"\n        [class.eui--danger]=\"step?.isInvalid\"\n        [class.eui-wizard-step--warning]=\"step?.isWarning\"\n        [class.eui--warning]=\"step?.isWarning\"\n        (click)=\"onSelectStep(step, idx + 1)\"\n        (keydown)=\"onKeyDown($event)\">\n        <div class=\"eui-wizard-step__indicator-wrapper\" role=\"presentation\"></div>\n\n        <div class=\"eui-wizard-step__bullet-item\">\n            <span class=\"eui-wizard-step__bullet-item-icon\">\n                <ng-container *ngIf=\"!step?.indexIconSvgName; else customIconContent\">\n                    <eui-icon-svg *ngIf=\"step?.isCompleted && !step?.isActive\" icon=\"eui-check\"></eui-icon-svg>\n                    <eui-icon-svg *ngIf=\"step?.isInvalid && !step?.isActive\" icon=\"eui-exclamation\"></eui-icon-svg>\n                    <eui-icon-svg *ngIf=\"step?.isActive\" icon=\"eui-create\"></eui-icon-svg>\n                </ng-container>\n\n                <ng-template #customIconContent>\n                    <span *ngIf=\"step?.indexIconSvgName && step?.indexIconSvgName !== undefined\" role=\"presentation\">\n                        <eui-icon-svg icon=\"{{ step?.indexIconSvgName }}\" class=\"eui-wizard-step__icon\"></eui-icon-svg>\n                    </span>\n                </ng-template>\n            </span>\n            <span class=\"eui-wizard-step__bullet-item-text\"\n                *ngIf=\"!step?.indexIconSvgName && !step?.isActive && !step?.isCompleted && !step?.isInvalid\"\n                role=\"presentation\">\n                {{ step?.indexLabel !== undefined ? step?.indexLabel : idx + 1 }}\n            </span>\n        </div>\n        <div class=\"eui-wizard-step__label-wrapper\" role=\"presentation\">\n            <div class=\"eui-wizard-step__label-wrapper-label\" role=\"presentation\">\n                {{ step?.label }}\n            </div>\n            <div class=\"eui-wizard-step__label-wrapper-sub-label\" role=\"presentation\">\n                {{ step?.subLabel }}\n            </div>\n        </div>\n\n        <div *ngIf=\"step?.isActive\" class=\"eui-wizard-step__current-marker\" role=\"presentation\">\n            <eui-icon-svg icon=\"eui-ecl-solid-arrow\" class=\"eui-wizard-step__current-marker-icon\" size=\"xl\"></eui-icon-svg>\n        </div>\n    </div>\n</div>\n<div [id]=\"stepContentId\" class=\"step-content\" role=\"tabpanel\" [attr.aria-labelledby]=\"stepIds\">\n    <ng-content></ng-content>\n</div>\n", styles: [".eui-wizard{border-bottom:1px solid var(--eui-c-neutral-lightest);display:flex;margin:var(--eui-s-xl) 0 -1px 0;padding-bottom:var(--eui-s-l)}.eui-wizard-step{cursor:pointer;flex:1;position:relative;text-align:center}.eui-wizard-step__content{margin:var(--eui-s-m) 0}.eui-wizard-step__current-marker{bottom:0;left:50%;position:absolute;transform:translate(-50%,75%)}.eui-wizard-step__indicator-wrapper{border-bottom:3px solid var(--eui-c-neutral-lightest);content:\"\";margin-bottom:var(--eui-s-s);top:var(--eui-s-s);width:100%}.eui-wizard-step__bullet-item{display:flex;align-items:center;justify-content:center;background-color:var(--eui-c-white);border:2px solid var(--eui-c-neutral-light);border-radius:var(--eui-br-max);height:var(--eui-s-3xl);margin:0 auto;margin-top:-2rem;padding-top:var(--eui-s-xs);width:var(--eui-s-3xl)}.eui-wizard-step__bullet-item-text{margin-top:-.5rem;font:var(--eui-f-l-bold)}.eui-wizard-step__label-wrapper{margin-top:var(--eui-s-m)}.eui-wizard-step__label-wrapper-label{font:var(--eui-f-m-bold)}.eui-wizard-step__label-wrapper-sub-label{font-size:95%;margin-top:var(--eui-s-2xs)}.eui-wizard-step--active .eui-wizard-step__bullet-item{border-color:var(--eui-c-primary);color:var(--eui-c-primary)}.eui-wizard-step--active .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-c-primary)}.eui-wizard-step--active .eui-wizard-step__label-wrapper-label{color:var(--eui-c-primary-darl)}.eui-wizard-step--active .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-c-info)}.eui-wizard-step--completed .eui-wizard-step__bullet-item{background-color:var(--eui-c-success);border-color:var(--eui-c-success);color:var(--eui-c-white)}.eui-wizard-step--completed .eui-wizard-step__bullet-item .eui-icon-svg>svg{color:var(--eui-c-white);fill:var(--eui-c-white)}.eui-wizard-step--completed .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-c-success)}.eui-wizard-step--completed .eui-wizard-step__label-wrapper-label{color:var(--eui-c-success-dark)}.eui-wizard-step--completed .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-c-success)}.eui-wizard-step--error .eui-wizard-step__bullet-item{background-color:var(--eui-c-danger);border-color:var(--eui-c-danger);color:var(--eui-c-white)}.eui-wizard-step--error .eui-wizard-step__bullet-item .eui-icon-svg>svg{color:var(--eui-c-white);fill:var(--eui-c-white)}.eui-wizard-step--error .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-c-danger)}.eui-wizard-step--error .eui-wizard-step__label-wrapper-label,.eui-wizard-step--error .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-c-danger)}.eui-wizard-step--warning .eui-wizard-step__bullet-item{background-color:var(--eui-c-warning);border-color:var(--eui-c-warning)}.eui-wizard-step--warning .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-c-warning-dark)}.eui-wizard-step--warning .eui-wizard-step__label-wrapper-label,.eui-wizard-step--warning .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-c-warning-dark)}.eui-wizard-step--disabled .eui-wizard-step__label-wrapper-label,.eui-wizard-step--disabled .eui-wizard-step__label-wrapper-sub-label,.eui-wizard-step--disabled .eui-wizard-step__bullet-item{border-color:var(--eui-c-neutral-lightest);color:var(--eui-c-neutral)}.eui-wizard-step--disabled .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-c-neutral-lightest)}.eui-wizard-step--disabled:hover{cursor:not-allowed}.eui-wizard-step--notallowed .eui-wizard-step__bullet-item-icon{color:var(--eui-c-white)}.eui-wizard-step--notallowed.eui-wizard-step--disabled .eui-wizard-step__bullet-item-icon{color:var(--eui-c-neutral-light)}.eui-wizard-step--notallowed.eui-wizard-step--disabled.eui-wizard-step--completed .eui-wizard-step__bullet-item-icon,.eui-wizard-step--notallowed.eui-wizard-step--disabled.eui-wizard-step--error .eui-wizard-step__bullet-item-icon{color:var(--eui-c-white)}.eui-wizard-step--notallowed:hover{cursor:not-allowed}.eui-wizard-step:focus .eui-wizard-step__bullet-item{border:2px solid transparent;border-color:var(--eui-c-accent-dark);border-radius:var(--eui-br-max)}.eui-wizard-step:first-child .eui-wizard-step__indicator-wrapper{margin-left:50%;width:50%}.eui-wizard-step:last-child .eui-wizard-step__indicator-wrapper{margin-right:50%;width:50%}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.0-rc.0", type: EuiWizardComponent, selector: "eui-wizard", inputs: { activeStepIndex: "activeStepIndex", steps: "steps", tabindex: "tabindex", e2eAttr: "e2eAttr", isCustomContent: "isCustomContent", isShowStepTitle: "isShowStepTitle", isNavigationAllowed: "isNavigationAllowed" }, outputs: { selectStep: "selectStep" }, queries: [{ propertyName: "childrenSteps", predicate: EuiWizardStepComponent }], viewQueries: [{ propertyName: "canBeFocused", predicate: ["canBeFocused"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"eui-wizard\" role=\"tablist\" aria-orientation=\"horizontal\" aria-label=\"\" attr.data-e2e=\"{{ e2eAttr }}\">\n    <div\n        #canBeFocused\n        *ngFor=\"let step of steps; let idx = index; trackBy: trackByFn\"\n        class=\"eui-wizard-step\"\n        role=\"tab\"\n        [id]=\"step.id\"\n        attr.aria-label=\"{{ step?.label }} {{ step?.subLabel }}\"\n        [attr.aria-disabled]=\"step?.isDisabled\"\n        [attr.aria-controls]=\"stepContentId\"\n        [tabindex]=\"step?.isDisabled || !isNavigationAllowed ? -1 : tabindex\"\n        [class.eui-wizard-step--completed]=\"step?.isCompleted\"\n        [class.eui-wizard-step--notallowed]=\"!isNavigationAllowed\"\n        [class.eui-wizard-step--active]=\"step?.isActive\"\n        [class.eui-wizard-step--disabled]=\"step?.isDisabled || !isNavigationAllowed\"\n        [class.eui-wizard-step--error]=\"step?.isInvalid\"\n        [class.eui--danger]=\"step?.isInvalid\"\n        [class.eui-wizard-step--warning]=\"step?.isWarning\"\n        [class.eui--warning]=\"step?.isWarning\"\n        (click)=\"onSelectStep(step, idx + 1)\"\n        (keydown)=\"onKeyDown($event)\">\n        <div class=\"eui-wizard-step__indicator-wrapper\" role=\"presentation\"></div>\n\n        <div class=\"eui-wizard-step__bullet-item\">\n            <span class=\"eui-wizard-step__bullet-item-icon\">\n                <ng-container *ngIf=\"!step?.indexIconSvgName; else customIconContent\">\n                    <eui-icon-svg *ngIf=\"step?.isCompleted && !step?.isActive\" icon=\"eui-check\"></eui-icon-svg>\n                    <eui-icon-svg *ngIf=\"step?.isInvalid && !step?.isActive\" icon=\"eui-exclamation\"></eui-icon-svg>\n                    <eui-icon-svg *ngIf=\"step?.isActive\" icon=\"eui-create\"></eui-icon-svg>\n                </ng-container>\n\n                <ng-template #customIconContent>\n                    <span *ngIf=\"step?.indexIconSvgName && step?.indexIconSvgName !== undefined\" role=\"presentation\">\n                        <eui-icon-svg icon=\"{{ step?.indexIconSvgName }}\" class=\"eui-wizard-step__icon\"></eui-icon-svg>\n                    </span>\n                </ng-template>\n            </span>\n            <span class=\"eui-wizard-step__bullet-item-text\"\n                *ngIf=\"!step?.indexIconSvgName && !step?.isActive && !step?.isCompleted && !step?.isInvalid\"\n                role=\"presentation\">\n                {{ step?.indexLabel !== undefined ? step?.indexLabel : idx + 1 }}\n            </span>\n        </div>\n        <div class=\"eui-wizard-step__label-wrapper\" role=\"presentation\">\n            <div class=\"eui-wizard-step__label-wrapper-label\" role=\"presentation\">\n                {{ step?.label }}\n            </div>\n            <div class=\"eui-wizard-step__label-wrapper-sub-label\" role=\"presentation\">\n                {{ step?.subLabel }}\n            </div>\n        </div>\n\n        <div *ngIf=\"step?.isActive\" class=\"eui-wizard-step__current-marker\" role=\"presentation\">\n            <eui-icon-svg icon=\"eui-ecl-solid-arrow\" class=\"eui-wizard-step__current-marker-icon\" size=\"xl\"></eui-icon-svg>\n        </div>\n    </div>\n</div>\n<div [id]=\"stepContentId\" class=\"step-content\" role=\"tabpanel\" [attr.aria-labelledby]=\"stepIds\">\n    <ng-content></ng-content>\n</div>\n", styles: [".eui-wizard{border-bottom:1px solid var(--eui-c-neutral-lightest);display:flex;margin:var(--eui-s-xl) 0 -1px 0;padding-bottom:var(--eui-s-l)}.eui-wizard-step{cursor:pointer;flex:1;position:relative;text-align:center}.eui-wizard-step__content{margin:var(--eui-s-m) 0}.eui-wizard-step__current-marker{bottom:0;left:50%;position:absolute;transform:translate(-50%,75%)}.eui-wizard-step__indicator-wrapper{border-bottom:3px solid var(--eui-c-neutral-lightest);content:\"\";margin-bottom:var(--eui-s-s);top:var(--eui-s-s);width:100%}.eui-wizard-step__bullet-item{display:flex;align-items:center;justify-content:center;background-color:var(--eui-c-white);border:var(--eui-bw-s) solid var(--eui-c-neutral-light);border-radius:var(--eui-br-max);height:var(--eui-s-3xl);margin:0 auto;margin-top:-2rem;padding-top:var(--eui-s-xs);width:var(--eui-s-3xl)}.eui-wizard-step__bullet-item-text{margin-top:-.5rem;font:var(--eui-f-l-bold)}.eui-wizard-step__label-wrapper{margin-top:var(--eui-s-m)}.eui-wizard-step__label-wrapper-label{font:var(--eui-f-m-bold)}.eui-wizard-step__label-wrapper-sub-label{font-size:95%;margin-top:var(--eui-s-2xs)}.eui-wizard-step--active .eui-wizard-step__bullet-item{border-color:var(--eui-c-primary);color:var(--eui-c-primary)}.eui-wizard-step--active .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-c-primary)}.eui-wizard-step--active .eui-wizard-step__label-wrapper-label{color:var(--eui-c-primary-darl)}.eui-wizard-step--active .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-c-info)}.eui-wizard-step--completed .eui-wizard-step__bullet-item{background-color:var(--eui-c-success);border-color:var(--eui-c-success);color:var(--eui-c-white)}.eui-wizard-step--completed .eui-wizard-step__bullet-item .eui-icon-svg>svg{color:var(--eui-c-white);fill:var(--eui-c-white)}.eui-wizard-step--completed .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-c-success)}.eui-wizard-step--completed .eui-wizard-step__label-wrapper-label{color:var(--eui-c-success-dark)}.eui-wizard-step--completed .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-c-success)}.eui-wizard-step--error .eui-wizard-step__bullet-item{background-color:var(--eui-c-danger);border-color:var(--eui-c-danger);color:var(--eui-c-white)}.eui-wizard-step--error .eui-wizard-step__bullet-item .eui-icon-svg>svg{color:var(--eui-c-white);fill:var(--eui-c-white)}.eui-wizard-step--error .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-c-danger)}.eui-wizard-step--error .eui-wizard-step__label-wrapper-label,.eui-wizard-step--error .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-c-danger)}.eui-wizard-step--warning .eui-wizard-step__bullet-item{background-color:var(--eui-c-warning);border-color:var(--eui-c-warning)}.eui-wizard-step--warning .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-c-warning-dark)}.eui-wizard-step--warning .eui-wizard-step__label-wrapper-label,.eui-wizard-step--warning .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-c-warning-dark)}.eui-wizard-step--disabled .eui-wizard-step__label-wrapper-label,.eui-wizard-step--disabled .eui-wizard-step__label-wrapper-sub-label,.eui-wizard-step--disabled .eui-wizard-step__bullet-item{border-color:var(--eui-c-neutral-lightest);color:var(--eui-c-neutral)}.eui-wizard-step--disabled .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-c-neutral-lightest)}.eui-wizard-step--disabled:hover{cursor:not-allowed}.eui-wizard-step--notallowed .eui-wizard-step__bullet-item-icon{color:var(--eui-c-white)}.eui-wizard-step--notallowed.eui-wizard-step--disabled .eui-wizard-step__bullet-item-icon{color:var(--eui-c-neutral-light)}.eui-wizard-step--notallowed.eui-wizard-step--disabled.eui-wizard-step--completed .eui-wizard-step__bullet-item-icon,.eui-wizard-step--notallowed.eui-wizard-step--disabled.eui-wizard-step--error .eui-wizard-step__bullet-item-icon{color:var(--eui-c-white)}.eui-wizard-step--notallowed:hover{cursor:not-allowed}.eui-wizard-step:focus .eui-wizard-step__bullet-item{border:var(--eui-bw-s) solid transparent;border-color:var(--eui-c-accent-dark);border-radius:var(--eui-br-max)}.eui-wizard-step:first-child .eui-wizard-step__indicator-wrapper{margin-left:50%;width:50%}.eui-wizard-step:last-child .eui-wizard-step__indicator-wrapper{margin-right:50%;width:50%}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.0-rc.0", ngImport: i0, type: EuiWizardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'eui-wizard', encapsulation: ViewEncapsulation.None, template: "<div class=\"eui-wizard\" role=\"tablist\" aria-orientation=\"horizontal\" aria-label=\"\" attr.data-e2e=\"{{ e2eAttr }}\">\n    <div\n        #canBeFocused\n        *ngFor=\"let step of steps; let idx = index; trackBy: trackByFn\"\n        class=\"eui-wizard-step\"\n        role=\"tab\"\n        [id]=\"step.id\"\n        attr.aria-label=\"{{ step?.label }} {{ step?.subLabel }}\"\n        [attr.aria-disabled]=\"step?.isDisabled\"\n        [attr.aria-controls]=\"stepContentId\"\n        [tabindex]=\"step?.isDisabled || !isNavigationAllowed ? -1 : tabindex\"\n        [class.eui-wizard-step--completed]=\"step?.isCompleted\"\n        [class.eui-wizard-step--notallowed]=\"!isNavigationAllowed\"\n        [class.eui-wizard-step--active]=\"step?.isActive\"\n        [class.eui-wizard-step--disabled]=\"step?.isDisabled || !isNavigationAllowed\"\n        [class.eui-wizard-step--error]=\"step?.isInvalid\"\n        [class.eui--danger]=\"step?.isInvalid\"\n        [class.eui-wizard-step--warning]=\"step?.isWarning\"\n        [class.eui--warning]=\"step?.isWarning\"\n        (click)=\"onSelectStep(step, idx + 1)\"\n        (keydown)=\"onKeyDown($event)\">\n        <div class=\"eui-wizard-step__indicator-wrapper\" role=\"presentation\"></div>\n\n        <div class=\"eui-wizard-step__bullet-item\">\n            <span class=\"eui-wizard-step__bullet-item-icon\">\n                <ng-container *ngIf=\"!step?.indexIconSvgName; else customIconContent\">\n                    <eui-icon-svg *ngIf=\"step?.isCompleted && !step?.isActive\" icon=\"eui-check\"></eui-icon-svg>\n                    <eui-icon-svg *ngIf=\"step?.isInvalid && !step?.isActive\" icon=\"eui-exclamation\"></eui-icon-svg>\n                    <eui-icon-svg *ngIf=\"step?.isActive\" icon=\"eui-create\"></eui-icon-svg>\n                </ng-container>\n\n                <ng-template #customIconContent>\n                    <span *ngIf=\"step?.indexIconSvgName && step?.indexIconSvgName !== undefined\" role=\"presentation\">\n                        <eui-icon-svg icon=\"{{ step?.indexIconSvgName }}\" class=\"eui-wizard-step__icon\"></eui-icon-svg>\n                    </span>\n                </ng-template>\n            </span>\n            <span class=\"eui-wizard-step__bullet-item-text\"\n                *ngIf=\"!step?.indexIconSvgName && !step?.isActive && !step?.isCompleted && !step?.isInvalid\"\n                role=\"presentation\">\n                {{ step?.indexLabel !== undefined ? step?.indexLabel : idx + 1 }}\n            </span>\n        </div>\n        <div class=\"eui-wizard-step__label-wrapper\" role=\"presentation\">\n            <div class=\"eui-wizard-step__label-wrapper-label\" role=\"presentation\">\n                {{ step?.label }}\n            </div>\n            <div class=\"eui-wizard-step__label-wrapper-sub-label\" role=\"presentation\">\n                {{ step?.subLabel }}\n            </div>\n        </div>\n\n        <div *ngIf=\"step?.isActive\" class=\"eui-wizard-step__current-marker\" role=\"presentation\">\n            <eui-icon-svg icon=\"eui-ecl-solid-arrow\" class=\"eui-wizard-step__current-marker-icon\" size=\"xl\"></eui-icon-svg>\n        </div>\n    </div>\n</div>\n<div [id]=\"stepContentId\" class=\"step-content\" role=\"tabpanel\" [attr.aria-labelledby]=\"stepIds\">\n    <ng-content></ng-content>\n</div>\n", styles: [".eui-wizard{border-bottom:1px solid var(--eui-c-neutral-lightest);display:flex;margin:var(--eui-s-xl) 0 -1px 0;padding-bottom:var(--eui-s-l)}.eui-wizard-step{cursor:pointer;flex:1;position:relative;text-align:center}.eui-wizard-step__content{margin:var(--eui-s-m) 0}.eui-wizard-step__current-marker{bottom:0;left:50%;position:absolute;transform:translate(-50%,75%)}.eui-wizard-step__indicator-wrapper{border-bottom:3px solid var(--eui-c-neutral-lightest);content:\"\";margin-bottom:var(--eui-s-s);top:var(--eui-s-s);width:100%}.eui-wizard-step__bullet-item{display:flex;align-items:center;justify-content:center;background-color:var(--eui-c-white);border:2px solid var(--eui-c-neutral-light);border-radius:var(--eui-br-max);height:var(--eui-s-3xl);margin:0 auto;margin-top:-2rem;padding-top:var(--eui-s-xs);width:var(--eui-s-3xl)}.eui-wizard-step__bullet-item-text{margin-top:-.5rem;font:var(--eui-f-l-bold)}.eui-wizard-step__label-wrapper{margin-top:var(--eui-s-m)}.eui-wizard-step__label-wrapper-label{font:var(--eui-f-m-bold)}.eui-wizard-step__label-wrapper-sub-label{font-size:95%;margin-top:var(--eui-s-2xs)}.eui-wizard-step--active .eui-wizard-step__bullet-item{border-color:var(--eui-c-primary);color:var(--eui-c-primary)}.eui-wizard-step--active .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-c-primary)}.eui-wizard-step--active .eui-wizard-step__label-wrapper-label{color:var(--eui-c-primary-darl)}.eui-wizard-step--active .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-c-info)}.eui-wizard-step--completed .eui-wizard-step__bullet-item{background-color:var(--eui-c-success);border-color:var(--eui-c-success);color:var(--eui-c-white)}.eui-wizard-step--completed .eui-wizard-step__bullet-item .eui-icon-svg>svg{color:var(--eui-c-white);fill:var(--eui-c-white)}.eui-wizard-step--completed .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-c-success)}.eui-wizard-step--completed .eui-wizard-step__label-wrapper-label{color:var(--eui-c-success-dark)}.eui-wizard-step--completed .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-c-success)}.eui-wizard-step--error .eui-wizard-step__bullet-item{background-color:var(--eui-c-danger);border-color:var(--eui-c-danger);color:var(--eui-c-white)}.eui-wizard-step--error .eui-wizard-step__bullet-item .eui-icon-svg>svg{color:var(--eui-c-white);fill:var(--eui-c-white)}.eui-wizard-step--error .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-c-danger)}.eui-wizard-step--error .eui-wizard-step__label-wrapper-label,.eui-wizard-step--error .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-c-danger)}.eui-wizard-step--warning .eui-wizard-step__bullet-item{background-color:var(--eui-c-warning);border-color:var(--eui-c-warning)}.eui-wizard-step--warning .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-c-warning-dark)}.eui-wizard-step--warning .eui-wizard-step__label-wrapper-label,.eui-wizard-step--warning .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-c-warning-dark)}.eui-wizard-step--disabled .eui-wizard-step__label-wrapper-label,.eui-wizard-step--disabled .eui-wizard-step__label-wrapper-sub-label,.eui-wizard-step--disabled .eui-wizard-step__bullet-item{border-color:var(--eui-c-neutral-lightest);color:var(--eui-c-neutral)}.eui-wizard-step--disabled .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-c-neutral-lightest)}.eui-wizard-step--disabled:hover{cursor:not-allowed}.eui-wizard-step--notallowed .eui-wizard-step__bullet-item-icon{color:var(--eui-c-white)}.eui-wizard-step--notallowed.eui-wizard-step--disabled .eui-wizard-step__bullet-item-icon{color:var(--eui-c-neutral-light)}.eui-wizard-step--notallowed.eui-wizard-step--disabled.eui-wizard-step--completed .eui-wizard-step__bullet-item-icon,.eui-wizard-step--notallowed.eui-wizard-step--disabled.eui-wizard-step--error .eui-wizard-step__bullet-item-icon{color:var(--eui-c-white)}.eui-wizard-step--notallowed:hover{cursor:not-allowed}.eui-wizard-step:focus .eui-wizard-step__bullet-item{border:2px solid transparent;border-color:var(--eui-c-accent-dark);border-radius:var(--eui-br-max)}.eui-wizard-step:first-child .eui-wizard-step__indicator-wrapper{margin-left:50%;width:50%}.eui-wizard-step:last-child .eui-wizard-step__indicator-wrapper{margin-right:50%;width:50%}\n"] }]
+            args: [{ selector: 'eui-wizard', encapsulation: ViewEncapsulation.None, template: "<div class=\"eui-wizard\" role=\"tablist\" aria-orientation=\"horizontal\" aria-label=\"\" attr.data-e2e=\"{{ e2eAttr }}\">\n    <div\n        #canBeFocused\n        *ngFor=\"let step of steps; let idx = index; trackBy: trackByFn\"\n        class=\"eui-wizard-step\"\n        role=\"tab\"\n        [id]=\"step.id\"\n        attr.aria-label=\"{{ step?.label }} {{ step?.subLabel }}\"\n        [attr.aria-disabled]=\"step?.isDisabled\"\n        [attr.aria-controls]=\"stepContentId\"\n        [tabindex]=\"step?.isDisabled || !isNavigationAllowed ? -1 : tabindex\"\n        [class.eui-wizard-step--completed]=\"step?.isCompleted\"\n        [class.eui-wizard-step--notallowed]=\"!isNavigationAllowed\"\n        [class.eui-wizard-step--active]=\"step?.isActive\"\n        [class.eui-wizard-step--disabled]=\"step?.isDisabled || !isNavigationAllowed\"\n        [class.eui-wizard-step--error]=\"step?.isInvalid\"\n        [class.eui--danger]=\"step?.isInvalid\"\n        [class.eui-wizard-step--warning]=\"step?.isWarning\"\n        [class.eui--warning]=\"step?.isWarning\"\n        (click)=\"onSelectStep(step, idx + 1)\"\n        (keydown)=\"onKeyDown($event)\">\n        <div class=\"eui-wizard-step__indicator-wrapper\" role=\"presentation\"></div>\n\n        <div class=\"eui-wizard-step__bullet-item\">\n            <span class=\"eui-wizard-step__bullet-item-icon\">\n                <ng-container *ngIf=\"!step?.indexIconSvgName; else customIconContent\">\n                    <eui-icon-svg *ngIf=\"step?.isCompleted && !step?.isActive\" icon=\"eui-check\"></eui-icon-svg>\n                    <eui-icon-svg *ngIf=\"step?.isInvalid && !step?.isActive\" icon=\"eui-exclamation\"></eui-icon-svg>\n                    <eui-icon-svg *ngIf=\"step?.isActive\" icon=\"eui-create\"></eui-icon-svg>\n                </ng-container>\n\n                <ng-template #customIconContent>\n                    <span *ngIf=\"step?.indexIconSvgName && step?.indexIconSvgName !== undefined\" role=\"presentation\">\n                        <eui-icon-svg icon=\"{{ step?.indexIconSvgName }}\" class=\"eui-wizard-step__icon\"></eui-icon-svg>\n                    </span>\n                </ng-template>\n            </span>\n            <span class=\"eui-wizard-step__bullet-item-text\"\n                *ngIf=\"!step?.indexIconSvgName && !step?.isActive && !step?.isCompleted && !step?.isInvalid\"\n                role=\"presentation\">\n                {{ step?.indexLabel !== undefined ? step?.indexLabel : idx + 1 }}\n            </span>\n        </div>\n        <div class=\"eui-wizard-step__label-wrapper\" role=\"presentation\">\n            <div class=\"eui-wizard-step__label-wrapper-label\" role=\"presentation\">\n                {{ step?.label }}\n            </div>\n            <div class=\"eui-wizard-step__label-wrapper-sub-label\" role=\"presentation\">\n                {{ step?.subLabel }}\n            </div>\n        </div>\n\n        <div *ngIf=\"step?.isActive\" class=\"eui-wizard-step__current-marker\" role=\"presentation\">\n            <eui-icon-svg icon=\"eui-ecl-solid-arrow\" class=\"eui-wizard-step__current-marker-icon\" size=\"xl\"></eui-icon-svg>\n        </div>\n    </div>\n</div>\n<div [id]=\"stepContentId\" class=\"step-content\" role=\"tabpanel\" [attr.aria-labelledby]=\"stepIds\">\n    <ng-content></ng-content>\n</div>\n", styles: [".eui-wizard{border-bottom:1px solid var(--eui-c-neutral-lightest);display:flex;margin:var(--eui-s-xl) 0 -1px 0;padding-bottom:var(--eui-s-l)}.eui-wizard-step{cursor:pointer;flex:1;position:relative;text-align:center}.eui-wizard-step__content{margin:var(--eui-s-m) 0}.eui-wizard-step__current-marker{bottom:0;left:50%;position:absolute;transform:translate(-50%,75%)}.eui-wizard-step__indicator-wrapper{border-bottom:3px solid var(--eui-c-neutral-lightest);content:\"\";margin-bottom:var(--eui-s-s);top:var(--eui-s-s);width:100%}.eui-wizard-step__bullet-item{display:flex;align-items:center;justify-content:center;background-color:var(--eui-c-white);border:var(--eui-bw-s) solid var(--eui-c-neutral-light);border-radius:var(--eui-br-max);height:var(--eui-s-3xl);margin:0 auto;margin-top:-2rem;padding-top:var(--eui-s-xs);width:var(--eui-s-3xl)}.eui-wizard-step__bullet-item-text{margin-top:-.5rem;font:var(--eui-f-l-bold)}.eui-wizard-step__label-wrapper{margin-top:var(--eui-s-m)}.eui-wizard-step__label-wrapper-label{font:var(--eui-f-m-bold)}.eui-wizard-step__label-wrapper-sub-label{font-size:95%;margin-top:var(--eui-s-2xs)}.eui-wizard-step--active .eui-wizard-step__bullet-item{border-color:var(--eui-c-primary);color:var(--eui-c-primary)}.eui-wizard-step--active .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-c-primary)}.eui-wizard-step--active .eui-wizard-step__label-wrapper-label{color:var(--eui-c-primary-darl)}.eui-wizard-step--active .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-c-info)}.eui-wizard-step--completed .eui-wizard-step__bullet-item{background-color:var(--eui-c-success);border-color:var(--eui-c-success);color:var(--eui-c-white)}.eui-wizard-step--completed .eui-wizard-step__bullet-item .eui-icon-svg>svg{color:var(--eui-c-white);fill:var(--eui-c-white)}.eui-wizard-step--completed .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-c-success)}.eui-wizard-step--completed .eui-wizard-step__label-wrapper-label{color:var(--eui-c-success-dark)}.eui-wizard-step--completed .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-c-success)}.eui-wizard-step--error .eui-wizard-step__bullet-item{background-color:var(--eui-c-danger);border-color:var(--eui-c-danger);color:var(--eui-c-white)}.eui-wizard-step--error .eui-wizard-step__bullet-item .eui-icon-svg>svg{color:var(--eui-c-white);fill:var(--eui-c-white)}.eui-wizard-step--error .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-c-danger)}.eui-wizard-step--error .eui-wizard-step__label-wrapper-label,.eui-wizard-step--error .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-c-danger)}.eui-wizard-step--warning .eui-wizard-step__bullet-item{background-color:var(--eui-c-warning);border-color:var(--eui-c-warning)}.eui-wizard-step--warning .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-c-warning-dark)}.eui-wizard-step--warning .eui-wizard-step__label-wrapper-label,.eui-wizard-step--warning .eui-wizard-step__label-wrapper-sub-label{color:var(--eui-c-warning-dark)}.eui-wizard-step--disabled .eui-wizard-step__label-wrapper-label,.eui-wizard-step--disabled .eui-wizard-step__label-wrapper-sub-label,.eui-wizard-step--disabled .eui-wizard-step__bullet-item{border-color:var(--eui-c-neutral-lightest);color:var(--eui-c-neutral)}.eui-wizard-step--disabled .eui-wizard-step__indicator-wrapper{border-bottom-color:var(--eui-c-neutral-lightest)}.eui-wizard-step--disabled:hover{cursor:not-allowed}.eui-wizard-step--notallowed .eui-wizard-step__bullet-item-icon{color:var(--eui-c-white)}.eui-wizard-step--notallowed.eui-wizard-step--disabled .eui-wizard-step__bullet-item-icon{color:var(--eui-c-neutral-light)}.eui-wizard-step--notallowed.eui-wizard-step--disabled.eui-wizard-step--completed .eui-wizard-step__bullet-item-icon,.eui-wizard-step--notallowed.eui-wizard-step--disabled.eui-wizard-step--error .eui-wizard-step__bullet-item-icon{color:var(--eui-c-white)}.eui-wizard-step--notallowed:hover{cursor:not-allowed}.eui-wizard-step:focus .eui-wizard-step__bullet-item{border:var(--eui-bw-s) solid transparent;border-color:var(--eui-c-accent-dark);border-radius:var(--eui-br-max)}.eui-wizard-step:first-child .eui-wizard-step__indicator-wrapper{margin-left:50%;width:50%}.eui-wizard-step:last-child .eui-wizard-step__indicator-wrapper{margin-right:50%;width:50%}\n"] }]
         }], propDecorators: { activeStepIndex: [{
                 type: Input
             }], steps: [{