npm - @eui/components - Versions diffs - 17.0.0-next.10 → 17.0.0-next.11 - Mend

@eui/components 17.0.0-next.10 → 17.0.0-next.11

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 (699) hide show

package/fesm2022/eui-components-eui-timebar.mjs CHANGED Viewed

@@ -275,10 +275,10 @@ class EuiTimebarComponent {
             return 0;
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: EuiTimebarComponent, deps: [{ token: i1.EuiAppShellService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-next.7", type: EuiTimebarComponent, selector: "eui-timebar", inputs: { e2eAttr: "e2eAttr", markedDate: "markedDate", items: "items", startLabel: "startLabel", endLabel: "endLabel", dateFormat: "dateFormat", isShowLegend: "isShowLegend", isShowLegendAsIndex: "isShowLegendAsIndex", isShowCurrentDateMarker: "isShowCurrentDateMarker", isCurrentDateMarkerAlwaysInRange: "isCurrentDateMarkerAlwaysInRange", isGroupOverlappingLabels: "isGroupOverlappingLabels" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"row flex-container\" #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=\"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.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                <span class=\"ux-icon ux-icon-map-marker\"></span>\n            </div>\n            <div *ngIf=\"isShowCurrentDateMarker\" class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"currentPerc\">\n                <span class=\"ux-icon ux-icon-circle\"></span>\n            </div>\n            <div\n                *ngIf=\"markedDate\"\n                class=\"eui-timebar__current-date-marker\"\n                [style.left.%]=\"markedPerc\"\n                title=\"{{ markedDate | date: dateFormat }}\">\n                <span class=\"ux-icon ux-icon-map-marker\"></span>\n            </div>\n            <div *ngIf=\"markedDate\" class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"markedPerc\">\n                <span class=\"ux-icon ux-icon-circle\"></span>\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 flex-container\">\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                        <span class=\"ux-icon ux-icon-fw ux-icon-circle eui-timebar__legend-item-icon--{{ item.item.stepType }}\"></span>\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-base-color-grey-25);margin:6rem 3rem;padding:5px;position:relative}.eui-timebar__step{border:7px solid var(--eui-base-color-primary-110);border-radius:16px;height:14px;position:absolute;width:14px}.eui-timebar__step-date-item{background-color:var(--eui-base-color-grey-80);border-radius:var(--eui-border-radius-base);color:var(--eui-base-color-white);font-size:var(--eui-base-font-size-s);max-width:8rem;min-width:6rem;padding:var(--eui-base-spacing-xs);position:absolute;text-align:center;top:-2.5rem;transform:rotate(65deg);transform-origin:50% -175%;white-space:normal}.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-base-color-primary-100);padding-top:5px;position:absolute}.eui-timebar__current-date-marker{color:var(--eui-base-color-danger-100);font-size:var(--eui-base-font-size-xl);margin-left:-2px;margin-top:-22px;position:absolute}.eui-timebar__current-date-marker-step{color:var(--eui-base-color-danger-100);font-size:var(--eui-base-font-size-xs);position:absolute}.eui-timebar__start-label,.eui-timebar__end-label{font-size:var(--eui-base-font-size-s);font-weight:700;margin-top:6.5rem}.eui-timebar__start-label{text-align:right}.eui-timebar__step-date-item--with-end-date{margin:0;padding:0}.timebar__grouped__step{border-radius:3px;display:block;padding:3px 8px}.timebar__grouped__step.eui-timebar__step--info{background-color:var(--eui-base-color-info-110)}.timebar__grouped__step.eui-timebar__step--success{background-color:var(--eui-base-color-success-110)}.timebar__grouped__step.eui-timebar__step--warning{background-color:var(--eui-base-color-warning-110)}.timebar__grouped__step.eui-timebar__step--danger{background-color:var(--eui-base-color-danger-110)}.eui-timebar__step--info{border-color:var(--eui-base-color-info-110)}.eui-timebar__step--info .eui-timebar__step-date-item{background-color:var(--eui-base-color-info-110)}.eui-timebar__step--success{border-color:var(--eui-base-color-success-110)}.eui-timebar__step--success .eui-timebar__step-date-item{background-color:var(--eui-base-color-success-110)}.eui-timebar__step--warning{border-color:var(--eui-base-color-warning-110)}.eui-timebar__step--warning .eui-timebar__step-date-item{background-color:var(--eui-base-color-warning-110)}.eui-timebar__step--danger{border-color:var(--eui-base-color-danger-110)}.eui-timebar__step--danger .eui-timebar__step-date-item{background-color:var(--eui-base-color-danger-110)}.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-base-spacing-s);margin-top:3rem}.eui-timebar__legend-item{align-items:center;display:flex;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-xs) var(--eui-base-spacing-xs) 0;width:100%}.eui-timebar__legend-item-icon{color:var(--eui-base-color-primary-100);font-size:16px;width:40px}.eui-timebar__legend-item-label{flex:1}.eui-timebar__legend-item-icon--info{color:var(--eui-base-color-info-110)}.eui-timebar__legend-item-icon--success{color:var(--eui-base-color-success-110)}.eui-timebar__legend-item-icon--warning{color:var(--eui-base-color-warning-110)}.eui-timebar__legend-item-icon--danger{color:var(--eui-base-color-danger-110)}.eui-timebar__legend-item-index-wrapper{background-color:var(--eui-base-color-primary-100);border-radius:100%;color:var(--eui-base-color-white);margin-right:var(--eui-base-spacing-m);padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-s)}@media screen and (max-width: 767px){.eui-timebar{margin:5rem var(--eui-base-spacing-m)}.eui-timebar__legend{margin-bottom:var(--eui-base-spacing-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: "pipe", type: i2.DatePipe, name: "date" }], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.0", ngImport: i0, type: EuiTimebarComponent, deps: [{ token: i1.EuiAppShellService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.0", type: EuiTimebarComponent, selector: "eui-timebar", inputs: { e2eAttr: "e2eAttr", markedDate: "markedDate", items: "items", startLabel: "startLabel", endLabel: "endLabel", dateFormat: "dateFormat", isShowLegend: "isShowLegend", isShowLegendAsIndex: "isShowLegendAsIndex", isShowCurrentDateMarker: "isShowCurrentDateMarker", isCurrentDateMarkerAlwaysInRange: "isCurrentDateMarkerAlwaysInRange", isGroupOverlappingLabels: "isGroupOverlappingLabels" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"row flex-container\" #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=\"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.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                <span class=\"ux-icon ux-icon-map-marker\"></span>\n            </div>\n            <div *ngIf=\"isShowCurrentDateMarker\" class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"currentPerc\">\n                <span class=\"ux-icon ux-icon-circle\"></span>\n            </div>\n            <div\n                *ngIf=\"markedDate\"\n                class=\"eui-timebar__current-date-marker\"\n                [style.left.%]=\"markedPerc\"\n                title=\"{{ markedDate | date: dateFormat }}\">\n                <span class=\"ux-icon ux-icon-map-marker\"></span>\n            </div>\n            <div *ngIf=\"markedDate\" class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"markedPerc\">\n                <span class=\"ux-icon ux-icon-circle\"></span>\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 flex-container\">\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                        <span class=\"ux-icon ux-icon-fw ux-icon-circle eui-timebar__legend-item-icon--{{ item.item.stepType }}\"></span>\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-base-color-grey-25);margin:6rem 3rem;padding:5px;position:relative}.eui-timebar__step{border:7px solid var(--eui-base-color-primary-110);border-radius:16px;height:14px;position:absolute;width:14px}.eui-timebar__step-date-item{background-color:var(--eui-base-color-grey-80);border-radius:var(--eui-border-radius-base);color:var(--eui-base-color-white);font-size:var(--eui-base-font-size-s);max-width:8rem;min-width:6rem;padding:var(--eui-base-spacing-xs);position:absolute;text-align:center;top:-2.5rem;transform:rotate(65deg);transform-origin:50% -175%;white-space:normal}.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-base-color-primary-100);padding-top:5px;position:absolute}.eui-timebar__current-date-marker{color:var(--eui-base-color-danger-100);font-size:var(--eui-base-font-size-xl);margin-left:-2px;margin-top:-22px;position:absolute}.eui-timebar__current-date-marker-step{color:var(--eui-base-color-danger-100);font-size:var(--eui-base-font-size-xs);position:absolute}.eui-timebar__start-label,.eui-timebar__end-label{font-size:var(--eui-base-font-size-s);font-weight:700;margin-top:6.5rem}.eui-timebar__start-label{text-align:right}.eui-timebar__step-date-item--with-end-date{margin:0;padding:0}.timebar__grouped__step{border-radius:3px;display:block;padding:3px 8px}.timebar__grouped__step.eui-timebar__step--info{background-color:var(--eui-base-color-info-110)}.timebar__grouped__step.eui-timebar__step--success{background-color:var(--eui-base-color-success-110)}.timebar__grouped__step.eui-timebar__step--warning{background-color:var(--eui-base-color-warning-110)}.timebar__grouped__step.eui-timebar__step--danger{background-color:var(--eui-base-color-danger-110)}.eui-timebar__step--info{border-color:var(--eui-base-color-info-110)}.eui-timebar__step--info .eui-timebar__step-date-item{background-color:var(--eui-base-color-info-110)}.eui-timebar__step--success{border-color:var(--eui-base-color-success-110)}.eui-timebar__step--success .eui-timebar__step-date-item{background-color:var(--eui-base-color-success-110)}.eui-timebar__step--warning{border-color:var(--eui-base-color-warning-110)}.eui-timebar__step--warning .eui-timebar__step-date-item{background-color:var(--eui-base-color-warning-110)}.eui-timebar__step--danger{border-color:var(--eui-base-color-danger-110)}.eui-timebar__step--danger .eui-timebar__step-date-item{background-color:var(--eui-base-color-danger-110)}.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-base-spacing-s);margin-top:3rem}.eui-timebar__legend-item{align-items:center;display:flex;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-xs) var(--eui-base-spacing-xs) 0;width:100%}.eui-timebar__legend-item-icon{color:var(--eui-base-color-primary-100);font-size:16px;width:40px}.eui-timebar__legend-item-label{flex:1}.eui-timebar__legend-item-icon--info{color:var(--eui-base-color-info-110)}.eui-timebar__legend-item-icon--success{color:var(--eui-base-color-success-110)}.eui-timebar__legend-item-icon--warning{color:var(--eui-base-color-warning-110)}.eui-timebar__legend-item-icon--danger{color:var(--eui-base-color-danger-110)}.eui-timebar__legend-item-index-wrapper{background-color:var(--eui-base-color-primary-100);border-radius:100%;color:var(--eui-base-color-white);margin-right:var(--eui-base-spacing-m);padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-s)}@media screen and (max-width: 767px){.eui-timebar{margin:5rem var(--eui-base-spacing-m)}.eui-timebar__legend{margin-bottom:var(--eui-base-spacing-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: "pipe", type: i2.DatePipe, name: "date" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: EuiTimebarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.0", ngImport: i0, type: EuiTimebarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'eui-timebar', encapsulation: ViewEncapsulation.None, template: "<div class=\"row flex-container\" #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=\"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.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                <span class=\"ux-icon ux-icon-map-marker\"></span>\n            </div>\n            <div *ngIf=\"isShowCurrentDateMarker\" class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"currentPerc\">\n                <span class=\"ux-icon ux-icon-circle\"></span>\n            </div>\n            <div\n                *ngIf=\"markedDate\"\n                class=\"eui-timebar__current-date-marker\"\n                [style.left.%]=\"markedPerc\"\n                title=\"{{ markedDate | date: dateFormat }}\">\n                <span class=\"ux-icon ux-icon-map-marker\"></span>\n            </div>\n            <div *ngIf=\"markedDate\" class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"markedPerc\">\n                <span class=\"ux-icon ux-icon-circle\"></span>\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 flex-container\">\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                        <span class=\"ux-icon ux-icon-fw ux-icon-circle eui-timebar__legend-item-icon--{{ item.item.stepType }}\"></span>\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-base-color-grey-25);margin:6rem 3rem;padding:5px;position:relative}.eui-timebar__step{border:7px solid var(--eui-base-color-primary-110);border-radius:16px;height:14px;position:absolute;width:14px}.eui-timebar__step-date-item{background-color:var(--eui-base-color-grey-80);border-radius:var(--eui-border-radius-base);color:var(--eui-base-color-white);font-size:var(--eui-base-font-size-s);max-width:8rem;min-width:6rem;padding:var(--eui-base-spacing-xs);position:absolute;text-align:center;top:-2.5rem;transform:rotate(65deg);transform-origin:50% -175%;white-space:normal}.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-base-color-primary-100);padding-top:5px;position:absolute}.eui-timebar__current-date-marker{color:var(--eui-base-color-danger-100);font-size:var(--eui-base-font-size-xl);margin-left:-2px;margin-top:-22px;position:absolute}.eui-timebar__current-date-marker-step{color:var(--eui-base-color-danger-100);font-size:var(--eui-base-font-size-xs);position:absolute}.eui-timebar__start-label,.eui-timebar__end-label{font-size:var(--eui-base-font-size-s);font-weight:700;margin-top:6.5rem}.eui-timebar__start-label{text-align:right}.eui-timebar__step-date-item--with-end-date{margin:0;padding:0}.timebar__grouped__step{border-radius:3px;display:block;padding:3px 8px}.timebar__grouped__step.eui-timebar__step--info{background-color:var(--eui-base-color-info-110)}.timebar__grouped__step.eui-timebar__step--success{background-color:var(--eui-base-color-success-110)}.timebar__grouped__step.eui-timebar__step--warning{background-color:var(--eui-base-color-warning-110)}.timebar__grouped__step.eui-timebar__step--danger{background-color:var(--eui-base-color-danger-110)}.eui-timebar__step--info{border-color:var(--eui-base-color-info-110)}.eui-timebar__step--info .eui-timebar__step-date-item{background-color:var(--eui-base-color-info-110)}.eui-timebar__step--success{border-color:var(--eui-base-color-success-110)}.eui-timebar__step--success .eui-timebar__step-date-item{background-color:var(--eui-base-color-success-110)}.eui-timebar__step--warning{border-color:var(--eui-base-color-warning-110)}.eui-timebar__step--warning .eui-timebar__step-date-item{background-color:var(--eui-base-color-warning-110)}.eui-timebar__step--danger{border-color:var(--eui-base-color-danger-110)}.eui-timebar__step--danger .eui-timebar__step-date-item{background-color:var(--eui-base-color-danger-110)}.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-base-spacing-s);margin-top:3rem}.eui-timebar__legend-item{align-items:center;display:flex;padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-xs) var(--eui-base-spacing-xs) 0;width:100%}.eui-timebar__legend-item-icon{color:var(--eui-base-color-primary-100);font-size:16px;width:40px}.eui-timebar__legend-item-label{flex:1}.eui-timebar__legend-item-icon--info{color:var(--eui-base-color-info-110)}.eui-timebar__legend-item-icon--success{color:var(--eui-base-color-success-110)}.eui-timebar__legend-item-icon--warning{color:var(--eui-base-color-warning-110)}.eui-timebar__legend-item-icon--danger{color:var(--eui-base-color-danger-110)}.eui-timebar__legend-item-index-wrapper{background-color:var(--eui-base-color-primary-100);border-radius:100%;color:var(--eui-base-color-white);margin-right:var(--eui-base-spacing-m);padding:var(--eui-base-spacing-xs) var(--eui-base-spacing-s)}@media screen and (max-width: 767px){.eui-timebar{margin:5rem var(--eui-base-spacing-m)}.eui-timebar__legend{margin-bottom:var(--eui-base-spacing-l);margin-left:18px}}\n"] }]
         }], ctorParameters: () => [{ type: i1.EuiAppShellService }, { type: i0.ChangeDetectorRef }], propDecorators: { container: [{
@@ -308,11 +308,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.7",
                 type: Input
             }] } });
 class EuiTimebarModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: EuiTimebarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-next.7", ngImport: i0, type: EuiTimebarModule, declarations: [EuiTimebarComponent], imports: [CommonModule], exports: [EuiTimebarComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: EuiTimebarModule, imports: [CommonModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.0", ngImport: i0, type: EuiTimebarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-rc.0", ngImport: i0, type: EuiTimebarModule, declarations: [EuiTimebarComponent], imports: [CommonModule], exports: [EuiTimebarComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-rc.0", ngImport: i0, type: EuiTimebarModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: EuiTimebarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.0", ngImport: i0, type: EuiTimebarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],

package/fesm2022/eui-components-eui-timebar.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"eui-components-eui-timebar.mjs","sources":["../../eui-timebar/eui-timebar.component.ts","../../eui-timebar/eui-timebar.component.html","../../eui-timebar/eui-timebar-item.model.ts","../../eui-timebar/eui-components-eui-timebar.ts"],"sourcesContent":["import {\n AfterContentInit,\n AfterViewChecked,\n ChangeDetectorRef,\n Component,\n ElementRef,\n Input,\n NgModule,\n OnChanges,\n OnDestroy,\n OnInit,\n SimpleChange,\n SimpleChanges,\n ViewChild,\n ViewEncapsulation,\n} from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { coerceBooleanProperty, BooleanInput } from '@angular/cdk/coercion';\nimport { Subscription } from 'rxjs';\n\nimport { EuiAppShellService, formatNumber } from '@eui/core';\nimport { EuiTimebarItem } from './eui-timebar-item.model';\n\nexport class EuiTimebarItemUI {\n perc: number;\n stepTypeClass: string;\n tooltipColor: string;\n isGrouped?: boolean;\n groupIndex?: number;\n groupLabel?: string;\n groupEndDate?: Date;\n item: EuiTimebarItem;\n}\n\n@Component({\n selector: 'eui-timebar',\n templateUrl: './eui-timebar.component.html',\n styleUrls: ['./styles/_index.scss'],\n encapsulation: ViewEncapsulation.None,\n})\nexport class EuiTimebarComponent implements OnInit, AfterContentInit, AfterViewChecked, OnChanges, OnDestroy {\n itemsUI: EuiTimebarItemUI[] = [];\n currentDate = new Date();\n currentPerc: number;\n markedPerc: number;\n timebarColumnClass = 'col-12';\n subscription: Subscription;\n isShowLegendGenerated: boolean;\n isShowLegendAsIndexGenerated: boolean;\n isGroupOverlappingLabelsGenerated: boolean;\n isMobile = false;\n isSomeStepsAreGrouped = false;\n extraTimelineLabelSpace = 21;\n\n @ViewChild('container') container: ElementRef<HTMLDivElement>;\n @Input() e2eAttr = 'eui-timebar';\n @Input() markedDate: Date;\n @Input() items: EuiTimebarItem[];\n @Input() startLabel: string;\n @Input() endLabel: string;\n @Input() dateFormat = 'YYYY-MM-dd';\n @Input()\n get isShowLegend(): boolean {\n return this._isShowLegend;\n }\n set isShowLegend(value: BooleanInput) {\n this._isShowLegend = coerceBooleanProperty(value);\n }\n private _isShowLegend = false;\n @Input()\n get isShowLegendAsIndex(): boolean {\n return this._isShowLegendAsIndex;\n }\n set isShowLegendAsIndex(value: BooleanInput) {\n this._isShowLegendAsIndex = coerceBooleanProperty(value);\n }\n private _isShowLegendAsIndex = true;\n @Input()\n get isShowCurrentDateMarker(): boolean {\n return this._isShowCurrentDateMarker;\n }\n set isShowCurrentDateMarker(value: BooleanInput) {\n this._isShowCurrentDateMarker = coerceBooleanProperty(value);\n }\n private _isShowCurrentDateMarker = false;\n @Input()\n get isCurrentDateMarkerAlwaysInRange(): boolean {\n return this._isCurrentDateMarkerAlwaysInRange;\n }\n set isCurrentDateMarkerAlwaysInRange(value: BooleanInput) {\n this._isCurrentDateMarkerAlwaysInRange = coerceBooleanProperty(value);\n }\n private _isCurrentDateMarkerAlwaysInRange = false;\n @Input()\n get isGroupOverlappingLabels(): boolean {\n return this._isGroupOverlappingLabels;\n }\n set isGroupOverlappingLabels(value: BooleanInput) {\n this._isGroupOverlappingLabels = coerceBooleanProperty(value);\n }\n private _isGroupOverlappingLabels = false;\n\n protected maxStepWidth = 112; // 112px = 8rem = 2 x 4rem margin around starting and ending bullet.\n\n constructor(\n private asService: EuiAppShellService,\n private cd: ChangeDetectorRef\n ) {}\n\n ngOnInit(): void {\n this.subscription = this.asService.breakpoints$.subscribe((bkps) => {\n this.onBreakpointChange(bkps);\n });\n }\n\n ngAfterContentInit(): void {\n this.removeNullItems();\n this.sortItems();\n\n const startDate: Date = this.items[0].date;\n const endDate: Date = this.items[this.items.length - 1].date;\n this.items.forEach((item) => {\n let stepTypeClass = '';\n let tooltipColor = 'none';\n\n if (item.stepType) {\n stepTypeClass = 'eui-timebar__step--' + item.stepType;\n tooltipColor = item.stepType;\n }\n\n const isNumber = /^\\d+\\.\\d+$/.test(item.label) \|\| /^\\d+$/.test(item.label);\n\n if (isNumber) {\n item.label = formatNumber(item.label, 2);\n }\n\n this.itemsUI.push({\n perc: this.calculatePercentage(item.date, startDate, endDate),\n item,\n stepTypeClass,\n tooltipColor,\n });\n });\n\n this.currentPerc = this.calculatePercentage(this.currentDate, startDate, endDate, true);\n this.markedPerc = this.calculatePercentage(this.markedDate, startDate, endDate, true);\n\n if (this.startLabel && this.endLabel) {\n this.timebarColumnClass = 'col-8';\n } else {\n if (this.startLabel \|\| this.endLabel) {\n this.timebarColumnClass = 'col-10';\n }\n }\n\n // initialize attributes\n this.isShowLegendGenerated = this.isShowLegend;\n this.isShowLegendAsIndexGenerated = this.isShowLegendAsIndex;\n this.isGroupOverlappingLabelsGenerated = this.isGroupOverlappingLabels;\n this.isMobile = false;\n }\n\n ngAfterViewChecked(): void {\n this.groupOverlappingLabels();\n }\n\n ngOnDestroy(): void {\n if (this.subscription) {\n this.subscription.unsubscribe();\n }\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes) {\n const change: SimpleChange = changes['markedDate'];\n if (change) {\n const startDate: Date = this.items[0].date;\n const endDate: Date = this.items[this.items.length - 1].date;\n this.markedPerc = this.calculatePercentage(change.currentValue as Date, startDate, endDate);\n }\n }\n }\n\n onBreakpointChange(bkps: any): void {\n if (bkps.isMobile) {\n this.isShowLegendGenerated = true;\n this.isShowLegendAsIndexGenerated = true;\n this.isMobile = true;\n } else {\n this.isShowLegendGenerated = this.isShowLegend;\n this.isShowLegendAsIndexGenerated = this.isShowLegendAsIndex;\n this.isMobile = false;\n }\n }\n\n trackByFn(index: number, item: EuiTimebarItemUI): string {\n return item.item.label;\n }\n\n protected removeNullItems(): void {\n if (this.items) {\n for (let i = 0; i < this.items.length; i++) {\n if (!this.items[i]) {\n this.items.splice(i, 1);\n i--;\n }\n }\n }\n }\n\n protected sortItems(): void {\n if (this.items) {\n // Sort by ascending date:\n this.items = this.items.sort((a: EuiTimebarItem, b: EuiTimebarItem) => {\n if (a && b) {\n return <any>a.date - <any>b.date;\n } else {\n return 0;\n }\n });\n }\n }\n\n protected groupOverlappingLabels(): void {\n if (this.isGroupOverlappingLabelsGenerated) {\n this.clearGrouping();\n\n if (this.container && this.itemsUI && this.isShowLegendAsIndexGenerated) {\n const containerElement = this.container.nativeElement;\n const containerWidth = containerElement.clientWidth;\n // const groupingThreshold = this.maxStepWidth / 2;\n const groupingThreshold = (this.maxStepWidth * 100) / containerWidth;\n let groupingCounter = 0;\n let mobileIndexDisplacement = 0;\n let previousUiItem = null;\n let lastMobileIndex = 0;\n\n for (let i = 0; i < this.itemsUI.length; i++) {\n const uiItem = this.itemsUI[i];\n if (previousUiItem) {\n const distance = Math.abs(uiItem.perc - previousUiItem.perc);\n if (distance <= groupingThreshold) {\n // Group the 2 items:\n if (i > 0 && this.itemsUI[i - 1].isGrouped) {\n mobileIndexDisplacement = 0;\n } else {\n if (!this.isShowLegendGenerated && mobileIndexDisplacement <= 0) {\n mobileIndexDisplacement = groupingCounter;\n lastMobileIndex = mobileIndexDisplacement;\n }\n groupingCounter = 0;\n }\n\n groupingCounter++;\n\n if (!previousUiItem.groupLabel) {\n previousUiItem.groupIndex = groupingCounter + lastMobileIndex;\n if (!this.isShowLegendGenerated) {\n previousUiItem.groupLabel = '' + (lastMobileIndex + groupingCounter);\n } else {\n previousUiItem.groupLabel = '' + i;\n }\n groupingCounter++;\n }\n if (!this.isShowLegendGenerated) {\n previousUiItem.groupLabel += ', ' + (lastMobileIndex + groupingCounter);\n } else {\n previousUiItem.groupLabel += ', ' + (i + 1);\n }\n previousUiItem.groupEndDate = uiItem.item.date;\n previousUiItem.stepTypeClass = uiItem.item.stepType;\n\n uiItem.isGrouped = true;\n uiItem.groupIndex = groupingCounter + lastMobileIndex;\n this.isSomeStepsAreGrouped = true;\n } else {\n previousUiItem = uiItem;\n }\n } else {\n previousUiItem = uiItem;\n }\n }\n this.cd.detectChanges();\n }\n }\n }\n\n protected clearGrouping(): void {\n this.isSomeStepsAreGrouped = false;\n if (this.itemsUI) {\n for (const item of this.itemsUI) {\n delete item.isGrouped;\n delete item.groupIndex;\n delete item.groupLabel;\n delete item.groupEndDate;\n }\n }\n this.extraTimelineLabelSpace = 21;\n }\n\n protected calculateExtraTimelineLabelSpace(): void {\n if (this.itemsUI) {\n let maxLabelLength = 0;\n for (const item of this.itemsUI) {\n if (item.item && item.item.label) {\n maxLabelLength = Math.max(maxLabelLength, item.item.label.length);\n }\n }\n\n if (maxLabelLength > 56) {\n // 56px = 4rem margin of the timeline itself.\n this.extraTimelineLabelSpace = maxLabelLength + 28; // 28px = 2rem = 1 line of text in height + margins\n }\n }\n }\n\n protected calculatePercentage(date: Date, startDate: Date, endDate: Date, compensateForRange = false): number {\n if (date && startDate && endDate) {\n let percentage = ((date.getTime() - startDate.getTime()) / (endDate.getTime() - startDate.getTime())) * 100;\n\n if (compensateForRange) {\n // if the date is over the end date, or below the start date\n // simulate its positioning to not mess up the timebar global width\n if (percentage > 100) {\n if (this.isCurrentDateMarkerAlwaysInRange) {\n percentage = 100;\n } else {\n percentage = 103;\n }\n } else if (percentage <= 0) {\n if (this.isCurrentDateMarkerAlwaysInRange) {\n percentage = 0;\n } else {\n percentage = -3;\n }\n }\n }\n\n return percentage;\n } else {\n return 0;\n }\n }\n}\n\n@NgModule({\n imports: [CommonModule],\n exports: [EuiTimebarComponent],\n declarations: [EuiTimebarComponent],\n})\nexport class EuiTimebarModule {}\n","<div class=\"row flex-container\" #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=\"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.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 <span class=\"ux-icon ux-icon-map-marker\"></span>\n </div>\n <div ngIf=\"isShowCurrentDateMarker\" class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"currentPerc\">\n <span class=\"ux-icon ux-icon-circle\"></span>\n </div>\n <div\n ngIf=\"markedDate\"\n class=\"eui-timebar__current-date-marker\"\n [style.left.%]=\"markedPerc\"\n title=\"{{ markedDate \| date: dateFormat }}\">\n <span class=\"ux-icon ux-icon-map-marker\"></span>\n </div>\n <div ngIf=\"markedDate\" class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"markedPerc\">\n <span class=\"ux-icon ux-icon-circle\"></span>\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 flex-container\">\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 <span class=\"ux-icon ux-icon-fw ux-icon-circle eui-timebar__legend-item-icon--{{ item.item.stepType }}\"></span>\n </div>\n <div ngIf=\"isShowLegendAsIndexGenerated\" class=\"eui-timebar__legend-item-index-wrapper\">\n {{ i + 1 }}\n </div>\n <div class=\"eui-timebar__legend-item-label\">\n <ng-template [ngIf]=\"isMobile\">\n <strong>{{ item.item.date \| date: dateFormat }}</strong> - {{ item.item.label }}\n </ng-template>\n <ng-template [ngIf]=\"!isMobile\">\n {{ item.item.label }}\n </ng-template>\n </div>\n </div>\n </ng-container>\n <ng-container ngIf=\"!isShowLegendGenerated\">\n <ng-container ngFor=\"let item of itemsUI; trackBy: trackByFn\">\n <div ngIf=\"item.groupLabel \|\| item.isGrouped\" class=\"eui-timebar__legend-item\">\n <div class=\"eui-timebar__legend-item-index-wrapper\">\n {{ item.groupIndex }}\n </div>\n <div class=\"eui-timebar__legend-item-label\">\n <strong>{{ item.item.date \| date: dateFormat }}</strong> - {{ item.item.label }}\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </div>\n <div ngIf=\"endLabel\" class=\"col-2\"></div>\n</div>\n","// eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging\nexport interface EuiTimebarItem {\n date: Date;\n label: string;\n stepType?: string;\n}\n\n// TODO: v17 remove this class - unnecessary\n// eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging\nexport class EuiTimebarItem implements EuiTimebarItem {\n date: Date;\n label: string;\n stepType?: string;\n\n constructor(values = {}) {\n Object.assign(this, values);\n }\n}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"eui-components-eui-timebar.mjs","sources":["../../eui-timebar/eui-timebar.component.ts","../../eui-timebar/eui-timebar.component.html","../../eui-timebar/eui-timebar-item.model.ts","../../eui-timebar/eui-components-eui-timebar.ts"],"sourcesContent":["import {\n AfterContentInit,\n AfterViewChecked,\n ChangeDetectorRef,\n Component,\n ElementRef,\n Input,\n NgModule,\n OnChanges,\n OnDestroy,\n OnInit,\n SimpleChange,\n SimpleChanges,\n ViewChild,\n ViewEncapsulation,\n} from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { coerceBooleanProperty, BooleanInput } from '@angular/cdk/coercion';\nimport { Subscription } from 'rxjs';\n\nimport { EuiAppShellService, formatNumber } from '@eui/core';\nimport { EuiTimebarItem } from './eui-timebar-item.model';\n\nexport class EuiTimebarItemUI {\n perc: number;\n stepTypeClass: string;\n tooltipColor: string;\n isGrouped?: boolean;\n groupIndex?: number;\n groupLabel?: string;\n groupEndDate?: Date;\n item: EuiTimebarItem;\n}\n\n@Component({\n selector: 'eui-timebar',\n templateUrl: './eui-timebar.component.html',\n styleUrls: ['./styles/_index.scss'],\n encapsulation: ViewEncapsulation.None,\n})\nexport class EuiTimebarComponent implements OnInit, AfterContentInit, AfterViewChecked, OnChanges, OnDestroy {\n itemsUI: EuiTimebarItemUI[] = [];\n currentDate = new Date();\n currentPerc: number;\n markedPerc: number;\n timebarColumnClass = 'col-12';\n subscription: Subscription;\n isShowLegendGenerated: boolean;\n isShowLegendAsIndexGenerated: boolean;\n isGroupOverlappingLabelsGenerated: boolean;\n isMobile = false;\n isSomeStepsAreGrouped = false;\n extraTimelineLabelSpace = 21;\n\n @ViewChild('container') container: ElementRef<HTMLDivElement>;\n @Input() e2eAttr = 'eui-timebar';\n @Input() markedDate: Date;\n @Input() items: EuiTimebarItem[];\n @Input() startLabel: string;\n @Input() endLabel: string;\n @Input() dateFormat = 'YYYY-MM-dd';\n @Input()\n get isShowLegend(): boolean {\n return this._isShowLegend;\n }\n set isShowLegend(value: BooleanInput) {\n this._isShowLegend = coerceBooleanProperty(value);\n }\n private _isShowLegend = false;\n @Input()\n get isShowLegendAsIndex(): boolean {\n return this._isShowLegendAsIndex;\n }\n set isShowLegendAsIndex(value: BooleanInput) {\n this._isShowLegendAsIndex = coerceBooleanProperty(value);\n }\n private _isShowLegendAsIndex = true;\n @Input()\n get isShowCurrentDateMarker(): boolean {\n return this._isShowCurrentDateMarker;\n }\n set isShowCurrentDateMarker(value: BooleanInput) {\n this._isShowCurrentDateMarker = coerceBooleanProperty(value);\n }\n private _isShowCurrentDateMarker = false;\n @Input()\n get isCurrentDateMarkerAlwaysInRange(): boolean {\n return this._isCurrentDateMarkerAlwaysInRange;\n }\n set isCurrentDateMarkerAlwaysInRange(value: BooleanInput) {\n this._isCurrentDateMarkerAlwaysInRange = coerceBooleanProperty(value);\n }\n private _isCurrentDateMarkerAlwaysInRange = false;\n @Input()\n get isGroupOverlappingLabels(): boolean {\n return this._isGroupOverlappingLabels;\n }\n set isGroupOverlappingLabels(value: BooleanInput) {\n this._isGroupOverlappingLabels = coerceBooleanProperty(value);\n }\n private _isGroupOverlappingLabels = false;\n\n protected maxStepWidth = 112; // 112px = 8rem = 2 x 4rem margin around starting and ending bullet.\n\n constructor(\n private asService: EuiAppShellService,\n private cd: ChangeDetectorRef\n ) {}\n\n ngOnInit(): void {\n this.subscription = this.asService.breakpoints$.subscribe((bkps) => {\n this.onBreakpointChange(bkps);\n });\n }\n\n ngAfterContentInit(): void {\n this.removeNullItems();\n this.sortItems();\n\n const startDate: Date = this.items[0].date;\n const endDate: Date = this.items[this.items.length - 1].date;\n this.items.forEach((item) => {\n let stepTypeClass = '';\n let tooltipColor = 'none';\n\n if (item.stepType) {\n stepTypeClass = 'eui-timebar__step--' + item.stepType;\n tooltipColor = item.stepType;\n }\n\n const isNumber = /^\\d+\\.\\d+$/.test(item.label) \|\| /^\\d+$/.test(item.label);\n\n if (isNumber) {\n item.label = formatNumber(item.label, 2);\n }\n\n this.itemsUI.push({\n perc: this.calculatePercentage(item.date, startDate, endDate),\n item,\n stepTypeClass,\n tooltipColor,\n });\n });\n\n this.currentPerc = this.calculatePercentage(this.currentDate, startDate, endDate, true);\n this.markedPerc = this.calculatePercentage(this.markedDate, startDate, endDate, true);\n\n if (this.startLabel && this.endLabel) {\n this.timebarColumnClass = 'col-8';\n } else {\n if (this.startLabel \|\| this.endLabel) {\n this.timebarColumnClass = 'col-10';\n }\n }\n\n // initialize attributes\n this.isShowLegendGenerated = this.isShowLegend;\n this.isShowLegendAsIndexGenerated = this.isShowLegendAsIndex;\n this.isGroupOverlappingLabelsGenerated = this.isGroupOverlappingLabels;\n this.isMobile = false;\n }\n\n ngAfterViewChecked(): void {\n this.groupOverlappingLabels();\n }\n\n ngOnDestroy(): void {\n if (this.subscription) {\n this.subscription.unsubscribe();\n }\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes) {\n const change: SimpleChange = changes['markedDate'];\n if (change) {\n const startDate: Date = this.items[0].date;\n const endDate: Date = this.items[this.items.length - 1].date;\n this.markedPerc = this.calculatePercentage(change.currentValue as Date, startDate, endDate);\n }\n }\n }\n\n onBreakpointChange(bkps: any): void {\n if (bkps.isMobile) {\n this.isShowLegendGenerated = true;\n this.isShowLegendAsIndexGenerated = true;\n this.isMobile = true;\n } else {\n this.isShowLegendGenerated = this.isShowLegend;\n this.isShowLegendAsIndexGenerated = this.isShowLegendAsIndex;\n this.isMobile = false;\n }\n }\n\n trackByFn(index: number, item: EuiTimebarItemUI): string {\n return item.item.label;\n }\n\n protected removeNullItems(): void {\n if (this.items) {\n for (let i = 0; i < this.items.length; i++) {\n if (!this.items[i]) {\n this.items.splice(i, 1);\n i--;\n }\n }\n }\n }\n\n protected sortItems(): void {\n if (this.items) {\n // Sort by ascending date:\n this.items = this.items.sort((a: EuiTimebarItem, b: EuiTimebarItem) => {\n if (a && b) {\n return <any>a.date - <any>b.date;\n } else {\n return 0;\n }\n });\n }\n }\n\n protected groupOverlappingLabels(): void {\n if (this.isGroupOverlappingLabelsGenerated) {\n this.clearGrouping();\n\n if (this.container && this.itemsUI && this.isShowLegendAsIndexGenerated) {\n const containerElement = this.container.nativeElement;\n const containerWidth = containerElement.clientWidth;\n // const groupingThreshold = this.maxStepWidth / 2;\n const groupingThreshold = (this.maxStepWidth * 100) / containerWidth;\n let groupingCounter = 0;\n let mobileIndexDisplacement = 0;\n let previousUiItem = null;\n let lastMobileIndex = 0;\n\n for (let i = 0; i < this.itemsUI.length; i++) {\n const uiItem = this.itemsUI[i];\n if (previousUiItem) {\n const distance = Math.abs(uiItem.perc - previousUiItem.perc);\n if (distance <= groupingThreshold) {\n // Group the 2 items:\n if (i > 0 && this.itemsUI[i - 1].isGrouped) {\n mobileIndexDisplacement = 0;\n } else {\n if (!this.isShowLegendGenerated && mobileIndexDisplacement <= 0) {\n mobileIndexDisplacement = groupingCounter;\n lastMobileIndex = mobileIndexDisplacement;\n }\n groupingCounter = 0;\n }\n\n groupingCounter++;\n\n if (!previousUiItem.groupLabel) {\n previousUiItem.groupIndex = groupingCounter + lastMobileIndex;\n if (!this.isShowLegendGenerated) {\n previousUiItem.groupLabel = '' + (lastMobileIndex + groupingCounter);\n } else {\n previousUiItem.groupLabel = '' + i;\n }\n groupingCounter++;\n }\n if (!this.isShowLegendGenerated) {\n previousUiItem.groupLabel += ', ' + (lastMobileIndex + groupingCounter);\n } else {\n previousUiItem.groupLabel += ', ' + (i + 1);\n }\n previousUiItem.groupEndDate = uiItem.item.date;\n previousUiItem.stepTypeClass = uiItem.item.stepType;\n\n uiItem.isGrouped = true;\n uiItem.groupIndex = groupingCounter + lastMobileIndex;\n this.isSomeStepsAreGrouped = true;\n } else {\n previousUiItem = uiItem;\n }\n } else {\n previousUiItem = uiItem;\n }\n }\n this.cd.detectChanges();\n }\n }\n }\n\n protected clearGrouping(): void {\n this.isSomeStepsAreGrouped = false;\n if (this.itemsUI) {\n for (const item of this.itemsUI) {\n delete item.isGrouped;\n delete item.groupIndex;\n delete item.groupLabel;\n delete item.groupEndDate;\n }\n }\n this.extraTimelineLabelSpace = 21;\n }\n\n protected calculateExtraTimelineLabelSpace(): void {\n if (this.itemsUI) {\n let maxLabelLength = 0;\n for (const item of this.itemsUI) {\n if (item.item && item.item.label) {\n maxLabelLength = Math.max(maxLabelLength, item.item.label.length);\n }\n }\n\n if (maxLabelLength > 56) {\n // 56px = 4rem margin of the timeline itself.\n this.extraTimelineLabelSpace = maxLabelLength + 28; // 28px = 2rem = 1 line of text in height + margins\n }\n }\n }\n\n protected calculatePercentage(date: Date, startDate: Date, endDate: Date, compensateForRange = false): number {\n if (date && startDate && endDate) {\n let percentage = ((date.getTime() - startDate.getTime()) / (endDate.getTime() - startDate.getTime())) * 100;\n\n if (compensateForRange) {\n // if the date is over the end date, or below the start date\n // simulate its positioning to not mess up the timebar global width\n if (percentage > 100) {\n if (this.isCurrentDateMarkerAlwaysInRange) {\n percentage = 100;\n } else {\n percentage = 103;\n }\n } else if (percentage <= 0) {\n if (this.isCurrentDateMarkerAlwaysInRange) {\n percentage = 0;\n } else {\n percentage = -3;\n }\n }\n }\n\n return percentage;\n } else {\n return 0;\n }\n }\n}\n\n@NgModule({\n imports: [CommonModule],\n exports: [EuiTimebarComponent],\n declarations: [EuiTimebarComponent],\n})\nexport class EuiTimebarModule {}\n","<div class=\"row flex-container\" #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=\"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.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 <span class=\"ux-icon ux-icon-map-marker\"></span>\n </div>\n <div ngIf=\"isShowCurrentDateMarker\" class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"currentPerc\">\n <span class=\"ux-icon ux-icon-circle\"></span>\n </div>\n <div\n ngIf=\"markedDate\"\n class=\"eui-timebar__current-date-marker\"\n [style.left.%]=\"markedPerc\"\n title=\"{{ markedDate \| date: dateFormat }}\">\n <span class=\"ux-icon ux-icon-map-marker\"></span>\n </div>\n <div ngIf=\"markedDate\" class=\"eui-timebar__current-date-marker-step\" [style.left.%]=\"markedPerc\">\n <span class=\"ux-icon ux-icon-circle\"></span>\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 flex-container\">\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 <span class=\"ux-icon ux-icon-fw ux-icon-circle eui-timebar__legend-item-icon--{{ item.item.stepType }}\"></span>\n </div>\n <div ngIf=\"isShowLegendAsIndexGenerated\" class=\"eui-timebar__legend-item-index-wrapper\">\n {{ i + 1 }}\n </div>\n <div class=\"eui-timebar__legend-item-label\">\n <ng-template [ngIf]=\"isMobile\">\n <strong>{{ item.item.date \| date: dateFormat }}</strong> - {{ item.item.label }}\n </ng-template>\n <ng-template [ngIf]=\"!isMobile\">\n {{ item.item.label }}\n </ng-template>\n </div>\n </div>\n </ng-container>\n <ng-container ngIf=\"!isShowLegendGenerated\">\n <ng-container ngFor=\"let item of itemsUI; trackBy: trackByFn\">\n <div ngIf=\"item.groupLabel \|\| item.isGrouped\" class=\"eui-timebar__legend-item\">\n <div class=\"eui-timebar__legend-item-index-wrapper\">\n {{ item.groupIndex }}\n </div>\n <div class=\"eui-timebar__legend-item-label\">\n <strong>{{ item.item.date \| date: dateFormat }}</strong> - {{ item.item.label }}\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </div>\n <div ngIf=\"endLabel\" class=\"col-2\"></div>\n</div>\n","// eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging\nexport interface EuiTimebarItem {\n date: Date;\n label: string;\n stepType?: string;\n}\n\n// TODO: v17 remove this class - unnecessary\n// eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging\nexport class EuiTimebarItem implements EuiTimebarItem {\n date: Date;\n label: string;\n stepType?: string;\n\n constructor(values = {}) {\n Object.assign(this, values);\n }\n}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

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

@@ -15,10 +15,10 @@ class EuiTimelineComponent {
     set isLeftAligned(value) {
         this._isLeftAligned = coerceBooleanProperty(value);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: EuiTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-next.7", type: EuiTimelineComponent, selector: "eui-timeline", inputs: { e2eAttr: "e2eAttr", isLeftAligned: "isLeftAligned" }, ngImport: i0, template: "<ul class=\"eui-timeline\" [class.eui-timeline--left-aligned]=\"isLeftAligned\" attr.data-e2e=\"{{ e2eAttr }}\">\n    <ng-content></ng-content>\n</ul>\n", styles: [".eui-timeline{margin:0;padding:0;position:relative}.eui-timeline:before{background-color:var(--eui-base-color-grey-20);bottom:0;content:\"\";display:block;left:calc(10 * var(--eui-base-spacing-m) + 2px);position:absolute;top:0;width:2px;z-index:1}.eui-timeline.eui-timeline--left-aligned:before{left:var(--eui-base-spacing-m)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item{list-style:none}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item--more:before{left:var(--eui-base-spacing-m)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__icon{left:var(--eui-base-spacing-xs)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__content{margin-left:calc(3 * var(--eui-base-spacing-m));padding-bottom:var(--eui-base-spacing-s)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__content .eui-timeline-item__date{color:var(--eui-base-color-grey-90);font-weight:600;margin-top:var(--eui-base-spacing-xs);position:relative}.eui-timeline-item{position:relative;list-style:none}.eui-timeline-item:hover{background-color:var(--eui-base-color-grey-10)}.eui-timeline-item:last-child{padding-bottom:0}.eui-timeline-item .eui-timeline-item__left-content{display:flex;justify-content:center;position:relative;width:calc(9 * var(--eui-base-spacing-m))}.eui-timeline-item .eui-timeline-item__content{margin-left:calc(11 * var(--eui-base-spacing-m));padding:var(--eui-base-spacing-m)}.eui-timeline-item .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-base-color-grey-90);font-size:var(--eui-base-font-size-l);padding:0 0 var(--eui-base-spacing-xs) 0;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-timeline-item .eui-timeline-item__content .eui-timeline-item__subtitle{color:var(--eui-base-color-grey-80)}.eui-timeline-item .eui-timeline-item__date{color:var(--eui-base-color-grey-90);font-weight:600;margin-top:var(--eui-base-spacing-m);padding:var(--eui-base-spacing-2xs) 0;position:absolute}.eui-timeline-item .eui-timeline-item__time{color:var(--eui-base-color-grey-50);margin-top:var(--eui-base-spacing-2xl);padding:var(--eui-base-spacing-2xs) 0;position:absolute}.eui-timeline-item .eui-timeline-item__icon{background-color:var(--eui-base-color-white);border-color:var(--eui-base-color-accent-110);border-radius:50%;border-style:solid;border-width:3px;height:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));left:calc(9 * var(--eui-base-spacing-m) + var(--eui-base-spacing-xs));position:absolute;top:var(--eui-base-spacing-m);width:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));z-index:2}.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__title{border-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content{border-color:var(--eui-base-color-grey-25);color:var(--eui-base-color-grey-80)}.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content{border-color:var(--eui-base-color-info-100);color:var(--eui-base-color-info-100)}.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content{border-color:var(--eui-base-color-warning-120);color:var(--eui-base-color-warning-120)}.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content{border-color:var(--eui-base-color-success-110);color:var(--eui-base-color-success-110)}.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content{border-color:var(--eui-base-color-danger-120);color:var(--eui-base-color-danger-120)}.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content{border-color:var(--eui-base-color-accent-120);color:var(--eui-base-color-accent-120)}.eui-timeline-item--more{position:relative}.eui-timeline-item--more:before{border-left:4px dotted var(--eui-base-color-white);bottom:0;content:\"\";display:block;left:calc(10 * var(--eui-base-spacing-m));position:absolute;top:0;z-index:1}.eui-timeline-item--more .eui-timeline-item__date{margin-top:var(--eui-base-spacing-m)}.eui-timeline-item--more .eui-timeline-item__content{padding-bottom:var(--eui-base-spacing-s);padding-top:var(--eui-base-spacing-s)}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.0", ngImport: i0, type: EuiTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.0", type: EuiTimelineComponent, selector: "eui-timeline", inputs: { e2eAttr: "e2eAttr", isLeftAligned: "isLeftAligned" }, ngImport: i0, template: "<ul class=\"eui-timeline\" [class.eui-timeline--left-aligned]=\"isLeftAligned\" attr.data-e2e=\"{{ e2eAttr }}\">\n    <ng-content></ng-content>\n</ul>\n", styles: [".eui-timeline{margin:0;padding:0;position:relative}.eui-timeline:before{background-color:var(--eui-base-color-grey-20);bottom:0;content:\"\";display:block;left:calc(10 * var(--eui-base-spacing-m) + 2px);position:absolute;top:0;width:2px;z-index:1}.eui-timeline.eui-timeline--left-aligned:before{left:var(--eui-base-spacing-m)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item{list-style:none}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item--more:before{left:var(--eui-base-spacing-m)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__icon{left:var(--eui-base-spacing-xs)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__content{margin-left:calc(3 * var(--eui-base-spacing-m));padding-bottom:var(--eui-base-spacing-s)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__content .eui-timeline-item__date{color:var(--eui-base-color-grey-90);font-weight:600;margin-top:var(--eui-base-spacing-xs);position:relative}.eui-timeline-item{position:relative;list-style:none}.eui-timeline-item:hover{background-color:var(--eui-base-color-grey-10)}.eui-timeline-item:last-child{padding-bottom:0}.eui-timeline-item .eui-timeline-item__left-content{display:flex;justify-content:center;position:relative;width:calc(9 * var(--eui-base-spacing-m))}.eui-timeline-item .eui-timeline-item__content{margin-left:calc(11 * var(--eui-base-spacing-m));padding:var(--eui-base-spacing-m)}.eui-timeline-item .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-base-color-grey-90);font-size:var(--eui-base-font-size-l);padding:0 0 var(--eui-base-spacing-xs) 0;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-timeline-item .eui-timeline-item__content .eui-timeline-item__subtitle{color:var(--eui-base-color-grey-80)}.eui-timeline-item .eui-timeline-item__date{color:var(--eui-base-color-grey-90);font-weight:600;margin-top:var(--eui-base-spacing-m);padding:var(--eui-base-spacing-2xs) 0;position:absolute}.eui-timeline-item .eui-timeline-item__time{color:var(--eui-base-color-grey-50);margin-top:var(--eui-base-spacing-2xl);padding:var(--eui-base-spacing-2xs) 0;position:absolute}.eui-timeline-item .eui-timeline-item__icon{background-color:var(--eui-base-color-white);border-color:var(--eui-base-color-accent-110);border-radius:50%;border-style:solid;border-width:3px;height:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));left:calc(9 * var(--eui-base-spacing-m) + var(--eui-base-spacing-xs));position:absolute;top:var(--eui-base-spacing-m);width:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));z-index:2}.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__title{border-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content{border-color:var(--eui-base-color-grey-25);color:var(--eui-base-color-grey-80)}.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content{border-color:var(--eui-base-color-info-100);color:var(--eui-base-color-info-100)}.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content{border-color:var(--eui-base-color-warning-120);color:var(--eui-base-color-warning-120)}.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content{border-color:var(--eui-base-color-success-110);color:var(--eui-base-color-success-110)}.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content{border-color:var(--eui-base-color-danger-120);color:var(--eui-base-color-danger-120)}.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content{border-color:var(--eui-base-color-accent-120);color:var(--eui-base-color-accent-120)}.eui-timeline-item--more{position:relative}.eui-timeline-item--more:before{border-left:4px dotted var(--eui-base-color-white);bottom:0;content:\"\";display:block;left:calc(10 * var(--eui-base-spacing-m));position:absolute;top:0;z-index:1}.eui-timeline-item--more .eui-timeline-item__date{margin-top:var(--eui-base-spacing-m)}.eui-timeline-item--more .eui-timeline-item__content{padding-bottom:var(--eui-base-spacing-s);padding-top:var(--eui-base-spacing-s)}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: EuiTimelineComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.0", ngImport: i0, type: EuiTimelineComponent, decorators: [{
             type: Component,
             args: [{ selector: 'eui-timeline', encapsulation: ViewEncapsulation.None, template: "<ul class=\"eui-timeline\" [class.eui-timeline--left-aligned]=\"isLeftAligned\" attr.data-e2e=\"{{ e2eAttr }}\">\n    <ng-content></ng-content>\n</ul>\n", styles: [".eui-timeline{margin:0;padding:0;position:relative}.eui-timeline:before{background-color:var(--eui-base-color-grey-20);bottom:0;content:\"\";display:block;left:calc(10 * var(--eui-base-spacing-m) + 2px);position:absolute;top:0;width:2px;z-index:1}.eui-timeline.eui-timeline--left-aligned:before{left:var(--eui-base-spacing-m)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item{list-style:none}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item--more:before{left:var(--eui-base-spacing-m)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__icon{left:var(--eui-base-spacing-xs)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__content{margin-left:calc(3 * var(--eui-base-spacing-m));padding-bottom:var(--eui-base-spacing-s)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__content .eui-timeline-item__date{color:var(--eui-base-color-grey-90);font-weight:600;margin-top:var(--eui-base-spacing-xs);position:relative}.eui-timeline-item{position:relative;list-style:none}.eui-timeline-item:hover{background-color:var(--eui-base-color-grey-10)}.eui-timeline-item:last-child{padding-bottom:0}.eui-timeline-item .eui-timeline-item__left-content{display:flex;justify-content:center;position:relative;width:calc(9 * var(--eui-base-spacing-m))}.eui-timeline-item .eui-timeline-item__content{margin-left:calc(11 * var(--eui-base-spacing-m));padding:var(--eui-base-spacing-m)}.eui-timeline-item .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-base-color-grey-90);font-size:var(--eui-base-font-size-l);padding:0 0 var(--eui-base-spacing-xs) 0;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-timeline-item .eui-timeline-item__content .eui-timeline-item__subtitle{color:var(--eui-base-color-grey-80)}.eui-timeline-item .eui-timeline-item__date{color:var(--eui-base-color-grey-90);font-weight:600;margin-top:var(--eui-base-spacing-m);padding:var(--eui-base-spacing-2xs) 0;position:absolute}.eui-timeline-item .eui-timeline-item__time{color:var(--eui-base-color-grey-50);margin-top:var(--eui-base-spacing-2xl);padding:var(--eui-base-spacing-2xs) 0;position:absolute}.eui-timeline-item .eui-timeline-item__icon{background-color:var(--eui-base-color-white);border-color:var(--eui-base-color-accent-110);border-radius:50%;border-style:solid;border-width:3px;height:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));left:calc(9 * var(--eui-base-spacing-m) + var(--eui-base-spacing-xs));position:absolute;top:var(--eui-base-spacing-m);width:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));z-index:2}.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__title{border-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content{border-color:var(--eui-base-color-grey-25);color:var(--eui-base-color-grey-80)}.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content{border-color:var(--eui-base-color-info-100);color:var(--eui-base-color-info-100)}.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content{border-color:var(--eui-base-color-warning-120);color:var(--eui-base-color-warning-120)}.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content{border-color:var(--eui-base-color-success-110);color:var(--eui-base-color-success-110)}.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content{border-color:var(--eui-base-color-danger-120);color:var(--eui-base-color-danger-120)}.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content{border-color:var(--eui-base-color-accent-120);color:var(--eui-base-color-accent-120)}.eui-timeline-item--more{position:relative}.eui-timeline-item--more:before{border-left:4px dotted var(--eui-base-color-white);bottom:0;content:\"\";display:block;left:calc(10 * var(--eui-base-spacing-m));position:absolute;top:0;z-index:1}.eui-timeline-item--more .eui-timeline-item__date{margin-top:var(--eui-base-spacing-m)}.eui-timeline-item--more .eui-timeline-item__content{padding-bottom:var(--eui-base-spacing-s);padding-top:var(--eui-base-spacing-s)}\n"] }]
         }], propDecorators: { e2eAttr: [{
@@ -46,10 +46,10 @@ class EuiTimelineItemComponent {
     ngAfterContentInit() {
         this.isLeftAligned = this.euiTimelineComponent.isLeftAligned;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: EuiTimelineItemComponent, deps: [{ token: forwardRef(() => EuiTimelineComponent), host: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-next.7", type: EuiTimelineItemComponent, selector: "eui-timeline-item", inputs: { e2eAttr: "e2eAttr", label: "label", subLabel: "subLabel", styleClass: "styleClass", date: "date", dateStyleClass: "dateStyleClass", time: "time", timeStyleClass: "timeStyleClass", isGroup: "isGroup" }, ngImport: i0, template: "<li class=\"eui-timeline-item eui-timeline-item--{{ styleClass }}\" [class.eui-timeline-item--more]=\"isGroup\" attr.data-e2e=\"{{ e2eAttr }}\">\n    <div *ngIf=\"!isLeftAligned\" class=\"eui-timeline-item__left-content\">\n        <div *ngIf=\"date\" class=\"eui-timeline-item__date {{ dateStyleClass }}\">{{ date }}</div>\n        <div *ngIf=\"time\" class=\"eui-timeline-item__time {{ timeStyleClass }}\">{{ time }}</div>\n    </div>\n    <span *ngIf=\"!isGroup\" class=\"eui-timeline-item__icon\"></span>\n    <div class=\"eui-timeline-item__content\">\n        <div #customContent>\n            <ng-content></ng-content>\n        </div>\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</li>\n", styles: [".eui-timeline{margin:0;padding:0;position:relative}.eui-timeline:before{background-color:var(--eui-base-color-grey-20);bottom:0;content:\"\";display:block;left:calc(10 * var(--eui-base-spacing-m) + 2px);position:absolute;top:0;width:2px;z-index:1}.eui-timeline.eui-timeline--left-aligned:before{left:var(--eui-base-spacing-m)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item{list-style:none}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item--more:before{left:var(--eui-base-spacing-m)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__icon{left:var(--eui-base-spacing-xs)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__content{margin-left:calc(3 * var(--eui-base-spacing-m));padding-bottom:var(--eui-base-spacing-s)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__content .eui-timeline-item__date{color:var(--eui-base-color-grey-90);font-weight:600;margin-top:var(--eui-base-spacing-xs);position:relative}.eui-timeline-item{position:relative;list-style:none}.eui-timeline-item:hover{background-color:var(--eui-base-color-grey-10)}.eui-timeline-item:last-child{padding-bottom:0}.eui-timeline-item .eui-timeline-item__left-content{display:flex;justify-content:center;position:relative;width:calc(9 * var(--eui-base-spacing-m))}.eui-timeline-item .eui-timeline-item__content{margin-left:calc(11 * var(--eui-base-spacing-m));padding:var(--eui-base-spacing-m)}.eui-timeline-item .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-base-color-grey-90);font-size:var(--eui-base-font-size-l);padding:0 0 var(--eui-base-spacing-xs) 0;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-timeline-item .eui-timeline-item__content .eui-timeline-item__subtitle{color:var(--eui-base-color-grey-80)}.eui-timeline-item .eui-timeline-item__date{color:var(--eui-base-color-grey-90);font-weight:600;margin-top:var(--eui-base-spacing-m);padding:var(--eui-base-spacing-2xs) 0;position:absolute}.eui-timeline-item .eui-timeline-item__time{color:var(--eui-base-color-grey-50);margin-top:var(--eui-base-spacing-2xl);padding:var(--eui-base-spacing-2xs) 0;position:absolute}.eui-timeline-item .eui-timeline-item__icon{background-color:var(--eui-base-color-white);border-color:var(--eui-base-color-accent-110);border-radius:50%;border-style:solid;border-width:3px;height:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));left:calc(9 * var(--eui-base-spacing-m) + var(--eui-base-spacing-xs));position:absolute;top:var(--eui-base-spacing-m);width:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));z-index:2}.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__title{border-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content{border-color:var(--eui-base-color-grey-25);color:var(--eui-base-color-grey-80)}.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content{border-color:var(--eui-base-color-info-100);color:var(--eui-base-color-info-100)}.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content{border-color:var(--eui-base-color-warning-120);color:var(--eui-base-color-warning-120)}.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content{border-color:var(--eui-base-color-success-110);color:var(--eui-base-color-success-110)}.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content{border-color:var(--eui-base-color-danger-120);color:var(--eui-base-color-danger-120)}.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content{border-color:var(--eui-base-color-accent-120);color:var(--eui-base-color-accent-120)}.eui-timeline-item--more{position:relative}.eui-timeline-item--more:before{border-left:4px dotted var(--eui-base-color-white);bottom:0;content:\"\";display:block;left:calc(10 * var(--eui-base-spacing-m));position:absolute;top:0;z-index:1}.eui-timeline-item--more .eui-timeline-item__date{margin-top:var(--eui-base-spacing-m)}.eui-timeline-item--more .eui-timeline-item__content{padding-bottom:var(--eui-base-spacing-s);padding-top:var(--eui-base-spacing-s)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.0", ngImport: i0, type: EuiTimelineItemComponent, deps: [{ token: forwardRef(() => EuiTimelineComponent), host: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.0", type: EuiTimelineItemComponent, selector: "eui-timeline-item", inputs: { e2eAttr: "e2eAttr", label: "label", subLabel: "subLabel", styleClass: "styleClass", date: "date", dateStyleClass: "dateStyleClass", time: "time", timeStyleClass: "timeStyleClass", isGroup: "isGroup" }, ngImport: i0, template: "<li class=\"eui-timeline-item eui-timeline-item--{{ styleClass }}\" [class.eui-timeline-item--more]=\"isGroup\" attr.data-e2e=\"{{ e2eAttr }}\">\n    <div *ngIf=\"!isLeftAligned\" class=\"eui-timeline-item__left-content\">\n        <div *ngIf=\"date\" class=\"eui-timeline-item__date {{ dateStyleClass }}\">{{ date }}</div>\n        <div *ngIf=\"time\" class=\"eui-timeline-item__time {{ timeStyleClass }}\">{{ time }}</div>\n    </div>\n    <span *ngIf=\"!isGroup\" class=\"eui-timeline-item__icon\"></span>\n    <div class=\"eui-timeline-item__content\">\n        <div #customContent>\n            <ng-content></ng-content>\n        </div>\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</li>\n", styles: [".eui-timeline{margin:0;padding:0;position:relative}.eui-timeline:before{background-color:var(--eui-base-color-grey-20);bottom:0;content:\"\";display:block;left:calc(10 * var(--eui-base-spacing-m) + 2px);position:absolute;top:0;width:2px;z-index:1}.eui-timeline.eui-timeline--left-aligned:before{left:var(--eui-base-spacing-m)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item{list-style:none}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item--more:before{left:var(--eui-base-spacing-m)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__icon{left:var(--eui-base-spacing-xs)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__content{margin-left:calc(3 * var(--eui-base-spacing-m));padding-bottom:var(--eui-base-spacing-s)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__content .eui-timeline-item__date{color:var(--eui-base-color-grey-90);font-weight:600;margin-top:var(--eui-base-spacing-xs);position:relative}.eui-timeline-item{position:relative;list-style:none}.eui-timeline-item:hover{background-color:var(--eui-base-color-grey-10)}.eui-timeline-item:last-child{padding-bottom:0}.eui-timeline-item .eui-timeline-item__left-content{display:flex;justify-content:center;position:relative;width:calc(9 * var(--eui-base-spacing-m))}.eui-timeline-item .eui-timeline-item__content{margin-left:calc(11 * var(--eui-base-spacing-m));padding:var(--eui-base-spacing-m)}.eui-timeline-item .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-base-color-grey-90);font-size:var(--eui-base-font-size-l);padding:0 0 var(--eui-base-spacing-xs) 0;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-timeline-item .eui-timeline-item__content .eui-timeline-item__subtitle{color:var(--eui-base-color-grey-80)}.eui-timeline-item .eui-timeline-item__date{color:var(--eui-base-color-grey-90);font-weight:600;margin-top:var(--eui-base-spacing-m);padding:var(--eui-base-spacing-2xs) 0;position:absolute}.eui-timeline-item .eui-timeline-item__time{color:var(--eui-base-color-grey-50);margin-top:var(--eui-base-spacing-2xl);padding:var(--eui-base-spacing-2xs) 0;position:absolute}.eui-timeline-item .eui-timeline-item__icon{background-color:var(--eui-base-color-white);border-color:var(--eui-base-color-accent-110);border-radius:50%;border-style:solid;border-width:3px;height:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));left:calc(9 * var(--eui-base-spacing-m) + var(--eui-base-spacing-xs));position:absolute;top:var(--eui-base-spacing-m);width:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));z-index:2}.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__title{border-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content{border-color:var(--eui-base-color-grey-25);color:var(--eui-base-color-grey-80)}.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content{border-color:var(--eui-base-color-info-100);color:var(--eui-base-color-info-100)}.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content{border-color:var(--eui-base-color-warning-120);color:var(--eui-base-color-warning-120)}.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content{border-color:var(--eui-base-color-success-110);color:var(--eui-base-color-success-110)}.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content{border-color:var(--eui-base-color-danger-120);color:var(--eui-base-color-danger-120)}.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content{border-color:var(--eui-base-color-accent-120);color:var(--eui-base-color-accent-120)}.eui-timeline-item--more{position:relative}.eui-timeline-item--more:before{border-left:4px dotted var(--eui-base-color-white);bottom:0;content:\"\";display:block;left:calc(10 * var(--eui-base-spacing-m));position:absolute;top:0;z-index:1}.eui-timeline-item--more .eui-timeline-item__date{margin-top:var(--eui-base-spacing-m)}.eui-timeline-item--more .eui-timeline-item__content{padding-bottom:var(--eui-base-spacing-s);padding-top:var(--eui-base-spacing-s)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: EuiTimelineItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.0", ngImport: i0, type: EuiTimelineItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'eui-timeline-item', encapsulation: ViewEncapsulation.None, template: "<li class=\"eui-timeline-item eui-timeline-item--{{ styleClass }}\" [class.eui-timeline-item--more]=\"isGroup\" attr.data-e2e=\"{{ e2eAttr }}\">\n    <div *ngIf=\"!isLeftAligned\" class=\"eui-timeline-item__left-content\">\n        <div *ngIf=\"date\" class=\"eui-timeline-item__date {{ dateStyleClass }}\">{{ date }}</div>\n        <div *ngIf=\"time\" class=\"eui-timeline-item__time {{ timeStyleClass }}\">{{ time }}</div>\n    </div>\n    <span *ngIf=\"!isGroup\" class=\"eui-timeline-item__icon\"></span>\n    <div class=\"eui-timeline-item__content\">\n        <div #customContent>\n            <ng-content></ng-content>\n        </div>\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</li>\n", styles: [".eui-timeline{margin:0;padding:0;position:relative}.eui-timeline:before{background-color:var(--eui-base-color-grey-20);bottom:0;content:\"\";display:block;left:calc(10 * var(--eui-base-spacing-m) + 2px);position:absolute;top:0;width:2px;z-index:1}.eui-timeline.eui-timeline--left-aligned:before{left:var(--eui-base-spacing-m)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item{list-style:none}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item--more:before{left:var(--eui-base-spacing-m)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__icon{left:var(--eui-base-spacing-xs)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__content{margin-left:calc(3 * var(--eui-base-spacing-m));padding-bottom:var(--eui-base-spacing-s)}.eui-timeline.eui-timeline--left-aligned .eui-timeline-item .eui-timeline-item__content .eui-timeline-item__date{color:var(--eui-base-color-grey-90);font-weight:600;margin-top:var(--eui-base-spacing-xs);position:relative}.eui-timeline-item{position:relative;list-style:none}.eui-timeline-item:hover{background-color:var(--eui-base-color-grey-10)}.eui-timeline-item:last-child{padding-bottom:0}.eui-timeline-item .eui-timeline-item__left-content{display:flex;justify-content:center;position:relative;width:calc(9 * var(--eui-base-spacing-m))}.eui-timeline-item .eui-timeline-item__content{margin-left:calc(11 * var(--eui-base-spacing-m));padding:var(--eui-base-spacing-m)}.eui-timeline-item .eui-timeline-item__content .eui-timeline-item__title{color:var(--eui-base-color-grey-90);font-size:var(--eui-base-font-size-l);padding:0 0 var(--eui-base-spacing-xs) 0;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-timeline-item .eui-timeline-item__content .eui-timeline-item__subtitle{color:var(--eui-base-color-grey-80)}.eui-timeline-item .eui-timeline-item__date{color:var(--eui-base-color-grey-90);font-weight:600;margin-top:var(--eui-base-spacing-m);padding:var(--eui-base-spacing-2xs) 0;position:absolute}.eui-timeline-item .eui-timeline-item__time{color:var(--eui-base-color-grey-50);margin-top:var(--eui-base-spacing-2xl);padding:var(--eui-base-spacing-2xs) 0;position:absolute}.eui-timeline-item .eui-timeline-item__icon{background-color:var(--eui-base-color-white);border-color:var(--eui-base-color-accent-110);border-radius:50%;border-style:solid;border-width:3px;height:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));left:calc(9 * var(--eui-base-spacing-m) + var(--eui-base-spacing-xs));position:absolute;top:var(--eui-base-spacing-m);width:calc(var(--eui-base-spacing-m) + var(--eui-base-spacing-2xs));z-index:2}.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__content,.eui-timeline-item.eui-timeline-item--primary .eui-timeline-item__title{border-color:var(--eui-base-color-primary-100);color:var(--eui-base-color-primary-100)}.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--secondary .eui-timeline-item__content{border-color:var(--eui-base-color-grey-25);color:var(--eui-base-color-grey-80)}.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--info .eui-timeline-item__content{border-color:var(--eui-base-color-info-100);color:var(--eui-base-color-info-100)}.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--warning .eui-timeline-item__content{border-color:var(--eui-base-color-warning-120);color:var(--eui-base-color-warning-120)}.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--success .eui-timeline-item__content{border-color:var(--eui-base-color-success-110);color:var(--eui-base-color-success-110)}.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--danger .eui-timeline-item__content{border-color:var(--eui-base-color-danger-120);color:var(--eui-base-color-danger-120)}.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__icon,.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__title,.eui-timeline-item.eui-timeline-item--accent .eui-timeline-item__content{border-color:var(--eui-base-color-accent-120);color:var(--eui-base-color-accent-120)}.eui-timeline-item--more{position:relative}.eui-timeline-item--more:before{border-left:4px dotted var(--eui-base-color-white);bottom:0;content:\"\";display:block;left:calc(10 * var(--eui-base-spacing-m));position:absolute;top:0;z-index:1}.eui-timeline-item--more .eui-timeline-item__date{margin-top:var(--eui-base-spacing-m)}.eui-timeline-item--more .eui-timeline-item__content{padding-bottom:var(--eui-base-spacing-s);padding-top:var(--eui-base-spacing-s)}\n"] }]
         }], ctorParameters: () => [{ type: EuiTimelineComponent, decorators: [{
@@ -78,11 +78,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.7",
             }] } });
 class EuiTimelineModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: EuiTimelineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-next.7", ngImport: i0, type: EuiTimelineModule, declarations: [EuiTimelineComponent, EuiTimelineItemComponent], imports: [CommonModule], exports: [EuiTimelineComponent, EuiTimelineItemComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: EuiTimelineModule, imports: [CommonModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.0", ngImport: i0, type: EuiTimelineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-rc.0", ngImport: i0, type: EuiTimelineModule, declarations: [EuiTimelineComponent, EuiTimelineItemComponent], imports: [CommonModule], exports: [EuiTimelineComponent, EuiTimelineItemComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-rc.0", ngImport: i0, type: EuiTimelineModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.7", ngImport: i0, type: EuiTimelineModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.0", ngImport: i0, type: EuiTimelineModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],

package/fesm2022/eui-components-eui-timeline.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"eui-components-eui-timeline.mjs","sources":["../../eui-timeline/eui-timeline.component.ts","../../eui-timeline/eui-timeline.component.html","../../eui-timeline/eui-timeline-item.component.ts","../../eui-timeline/eui-timeline-item.component.html","../../eui-timeline/eui-timeline.module.ts","../../eui-timeline/eui-components-eui-timeline.ts"],"sourcesContent":["import { Component, Input, ViewEncapsulation } from '@angular/core';\nimport { coerceBooleanProperty, BooleanInput } from '@angular/cdk/coercion';\n\n@Component({\n selector: 'eui-timeline',\n templateUrl: './eui-timeline.component.html',\n styleUrls: ['./styles/_index.scss'],\n encapsulation: ViewEncapsulation.None,\n})\nexport class EuiTimelineComponent {\n @Input() e2eAttr = 'eui-timeline';\n @Input()\n get isLeftAligned(): boolean {\n return this._isLeftAligned;\n }\n set isLeftAligned(value: BooleanInput) {\n this._isLeftAligned = coerceBooleanProperty(value);\n }\n private _isLeftAligned = false;\n}\n","<ul class=\"eui-timeline\" [class.eui-timeline--left-aligned]=\"isLeftAligned\" attr.data-e2e=\"{{ e2eAttr }}\">\n <ng-content></ng-content>\n</ul>\n","// TODO v17 - adapt to default cmp coerce base directive input etc...\nimport { AfterContentInit, Component, forwardRef, Host, Inject, Input, ViewEncapsulation } from '@angular/core';\nimport { EuiTimelineComponent } from './eui-timeline.component';\nimport { coerceBooleanProperty, BooleanInput } from '@angular/cdk/coercion';\n\n@Component({\n selector: 'eui-timeline-item',\n templateUrl: './eui-timeline-item.component.html',\n styleUrls: ['./styles/_index.scss'],\n encapsulation: ViewEncapsulation.None,\n})\nexport class EuiTimelineItemComponent implements AfterContentInit {\n @Input() e2eAttr = 'eui-timeline-item';\n @Input() label: string;\n @Input() subLabel: string;\n @Input() styleClass: string;\n @Input() date: string;\n @Input() dateStyleClass = '';\n @Input() time: string;\n @Input() timeStyleClass = '';\n\n euiTimelineComponent: EuiTimelineComponent;\n isLeftAligned = false;\n\n @Input()\n get isGroup(): boolean {\n return this._isGroup;\n }\n set isGroup(value: BooleanInput) {\n this._isGroup = coerceBooleanProperty(value);\n }\n private _isGroup = false;\n\n constructor(@Host() @Inject(forwardRef(() => EuiTimelineComponent)) uxTimelineItemsComponent: EuiTimelineComponent) {\n this.euiTimelineComponent = uxTimelineItemsComponent;\n }\n\n ngAfterContentInit(): void {\n this.isLeftAligned = this.euiTimelineComponent.isLeftAligned;\n }\n}\n","<li class=\"eui-timeline-item eui-timeline-item--{{ styleClass }}\" [class.eui-timeline-item--more]=\"isGroup\" attr.data-e2e=\"{{ e2eAttr }}\">\n <div ngIf=\"!isLeftAligned\" class=\"eui-timeline-item__left-content\">\n <div ngIf=\"date\" class=\"eui-timeline-item__date {{ dateStyleClass }}\">{{ date }}</div>\n <div ngIf=\"time\" class=\"eui-timeline-item__time {{ timeStyleClass }}\">{{ time }}</div>\n </div>\n <span ngIf=\"!isGroup\" class=\"eui-timeline-item__icon\"></span>\n <div class=\"eui-timeline-item__content\">\n <div #customContent>\n <ng-content></ng-content>\n </div>\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</li>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { EuiTimelineComponent } from './eui-timeline.component';\nimport { EuiTimelineItemComponent } from './eui-timeline-item.component';\n\n@NgModule({\n imports: [CommonModule],\n exports: [EuiTimelineComponent, EuiTimelineItemComponent],\n declarations: [EuiTimelineComponent, EuiTimelineItemComponent],\n})\nexport class EuiTimelineModule {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;;;MASa,oBAAoB,CAAA;AANjC,IAAA,WAAA,GAAA;QAOa,IAAO,CAAA,OAAA,GAAG,cAAc,CAAC;QAQ1B,IAAc,CAAA,cAAA,GAAG,KAAK,CAAC;AAClC,KAAA;AARG,IAAA,IACI,aAAa,GAAA;QACb,OAAO,IAAI,CAAC,cAAc,CAAC;KAC9B;IACD,IAAI,aAAa,CAAC,KAAmB,EAAA;AACjC,QAAA,IAAI,CAAC,cAAc,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;KACtD;~~wIARQ~~,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAApB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,~~eAAA~~,EAAA,IAAA,EAAA,oBAAoB,oHCTjC,0JAGA,EAAA,MAAA,EAAA,CAAA,+mKAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA,EAAA;;~~kGDMa~~,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBANhC,SAAS;+BACI,cAAc,EAAA,aAAA,EAGT,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,0JAAA,EAAA,MAAA,EAAA,CAAA,+mKAAA,CAAA,EAAA,CAAA;8BAG5B,OAAO,EAAA,CAAA;sBAAf,KAAK;gBAEF,aAAa,EAAA,CAAA;sBADhB,KAAK;;;AEXV;MAWa,wBAAwB,CAAA;AAajC,IAAA,IACI,OAAO,GAAA;QACP,OAAO,IAAI,CAAC,QAAQ,CAAC;KACxB;IACD,IAAI,OAAO,CAAC,KAAmB,EAAA;AAC3B,QAAA,IAAI,CAAC,QAAQ,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;KAChD;AAGD,IAAA,WAAA,CAAoE,wBAA8C,EAAA;QArBzG,IAAO,CAAA,OAAA,GAAG,mBAAmB,CAAC;QAK9B,IAAc,CAAA,cAAA,GAAG,EAAE,CAAC;QAEpB,IAAc,CAAA,cAAA,GAAG,EAAE,CAAC;QAG7B,IAAa,CAAA,aAAA,GAAG,KAAK,CAAC;QASd,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;AAGrB,QAAA,IAAI,CAAC,oBAAoB,GAAG,wBAAwB,CAAC;KACxD;IAED,kBAAkB,GAAA;QACd,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC;KAChE;AA5BQ,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,~~eAAA~~,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,wBAAwB,kBAsBL,UAAU,CAAC,MAAM,oBAAoB,CAAC,EAAA,IAAA,EAAA,IAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAtBzD,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,~~eAAA~~,EAAA,IAAA,EAAA,wBAAwB,6QCXrC,ioCAkBA,EAAA,MAAA,EAAA,CAAA,+mKAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA,EAAA;;~~kGDPa~~,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBANpC,SAAS;+BACI,mBAAmB,EAAA,aAAA,EAGd,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,ioCAAA,EAAA,MAAA,EAAA,CAAA,+mKAAA,CAAA,EAAA,CAAA;;0BAwBxB,IAAI;;0BAAI,MAAM;AAAC,oBAAA,IAAA,EAAA,CAAA,UAAU,CAAC,MAAM,oBAAoB,CAAC,CAAA;yCArBzD,OAAO,EAAA,CAAA;sBAAf,KAAK;gBACG,KAAK,EAAA,CAAA;sBAAb,KAAK;gBACG,QAAQ,EAAA,CAAA;sBAAhB,KAAK;gBACG,UAAU,EAAA,CAAA;sBAAlB,KAAK;gBACG,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBACG,cAAc,EAAA,CAAA;sBAAtB,KAAK;gBACG,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBACG,cAAc,EAAA,CAAA;sBAAtB,KAAK;gBAMF,OAAO,EAAA,CAAA;sBADV,KAAK;;;MEdG,iBAAiB,CAAA;~~wIAAjB~~,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA,EAAA;~~yIAAjB~~,iBAAiB,EAAA,YAAA,EAAA,CAFX,oBAAoB,EAAE,wBAAwB,aAFnD,YAAY,CAAA,EAAA,OAAA,EAAA,CACZ,oBAAoB,EAAE,wBAAwB,CAAA,EAAA,CAAA,CAAA,EAAA;AAG/C,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,~~eAAA~~,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,iBAAiB,YAJhB,YAAY,CAAA,EAAA,CAAA,CAAA,EAAA;;~~kGAIb~~,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAL7B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACN,OAAO,EAAE,CAAC,YAAY,CAAC;AACvB,oBAAA,OAAO,EAAE,CAAC,oBAAoB,EAAE,wBAAwB,CAAC;AACzD,oBAAA,YAAY,EAAE,CAAC,oBAAoB,EAAE,wBAAwB,CAAC;AACjE,iBAAA,CAAA;;;ACTD;;AAEG;;;;"}
1	+ {"version":3,"file":"eui-components-eui-timeline.mjs","sources":["../../eui-timeline/eui-timeline.component.ts","../../eui-timeline/eui-timeline.component.html","../../eui-timeline/eui-timeline-item.component.ts","../../eui-timeline/eui-timeline-item.component.html","../../eui-timeline/eui-timeline.module.ts","../../eui-timeline/eui-components-eui-timeline.ts"],"sourcesContent":["import { Component, Input, ViewEncapsulation } from '@angular/core';\nimport { coerceBooleanProperty, BooleanInput } from '@angular/cdk/coercion';\n\n@Component({\n selector: 'eui-timeline',\n templateUrl: './eui-timeline.component.html',\n styleUrls: ['./styles/_index.scss'],\n encapsulation: ViewEncapsulation.None,\n})\nexport class EuiTimelineComponent {\n @Input() e2eAttr = 'eui-timeline';\n @Input()\n get isLeftAligned(): boolean {\n return this._isLeftAligned;\n }\n set isLeftAligned(value: BooleanInput) {\n this._isLeftAligned = coerceBooleanProperty(value);\n }\n private _isLeftAligned = false;\n}\n","<ul class=\"eui-timeline\" [class.eui-timeline--left-aligned]=\"isLeftAligned\" attr.data-e2e=\"{{ e2eAttr }}\">\n <ng-content></ng-content>\n</ul>\n","// TODO v17 - adapt to default cmp coerce base directive input etc...\nimport { AfterContentInit, Component, forwardRef, Host, Inject, Input, ViewEncapsulation } from '@angular/core';\nimport { EuiTimelineComponent } from './eui-timeline.component';\nimport { coerceBooleanProperty, BooleanInput } from '@angular/cdk/coercion';\n\n@Component({\n selector: 'eui-timeline-item',\n templateUrl: './eui-timeline-item.component.html',\n styleUrls: ['./styles/_index.scss'],\n encapsulation: ViewEncapsulation.None,\n})\nexport class EuiTimelineItemComponent implements AfterContentInit {\n @Input() e2eAttr = 'eui-timeline-item';\n @Input() label: string;\n @Input() subLabel: string;\n @Input() styleClass: string;\n @Input() date: string;\n @Input() dateStyleClass = '';\n @Input() time: string;\n @Input() timeStyleClass = '';\n\n euiTimelineComponent: EuiTimelineComponent;\n isLeftAligned = false;\n\n @Input()\n get isGroup(): boolean {\n return this._isGroup;\n }\n set isGroup(value: BooleanInput) {\n this._isGroup = coerceBooleanProperty(value);\n }\n private _isGroup = false;\n\n constructor(@Host() @Inject(forwardRef(() => EuiTimelineComponent)) uxTimelineItemsComponent: EuiTimelineComponent) {\n this.euiTimelineComponent = uxTimelineItemsComponent;\n }\n\n ngAfterContentInit(): void {\n this.isLeftAligned = this.euiTimelineComponent.isLeftAligned;\n }\n}\n","<li class=\"eui-timeline-item eui-timeline-item--{{ styleClass }}\" [class.eui-timeline-item--more]=\"isGroup\" attr.data-e2e=\"{{ e2eAttr }}\">\n <div ngIf=\"!isLeftAligned\" class=\"eui-timeline-item__left-content\">\n <div ngIf=\"date\" class=\"eui-timeline-item__date {{ dateStyleClass }}\">{{ date }}</div>\n <div ngIf=\"time\" class=\"eui-timeline-item__time {{ timeStyleClass }}\">{{ time }}</div>\n </div>\n <span ngIf=\"!isGroup\" class=\"eui-timeline-item__icon\"></span>\n <div class=\"eui-timeline-item__content\">\n <div #customContent>\n <ng-content></ng-content>\n </div>\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</li>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { EuiTimelineComponent } from './eui-timeline.component';\nimport { EuiTimelineItemComponent } from './eui-timeline-item.component';\n\n@NgModule({\n imports: [CommonModule],\n exports: [EuiTimelineComponent, EuiTimelineItemComponent],\n declarations: [EuiTimelineComponent, EuiTimelineItemComponent],\n})\nexport class EuiTimelineModule {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}