npm - @eui/components - Versions diffs - 17.0.0-next.21 → 17.0.0-next.22 - Mend

@eui/components 17.0.0-next.21 → 17.0.0-next.22

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"eui-components-eui-textarea.mjs","sources":["../../eui-textarea/eui-textarea.component.ts","../../eui-textarea/auto-resize.directive.ts","../../eui-textarea/eui-textarea.module.ts","../../eui-textarea/eui-components-eui-textarea.ts"],"sourcesContent":["import {\n Component,\n ElementRef,\n HostBinding,\n HostListener,\n Input,\n OnChanges,\n OnInit,\n Renderer2,\n SimpleChanges,\n ViewEncapsulation,\n OnDestroy,\n DoCheck,\n Injector,\n forwardRef,\n InjectFlags,\n} from '@angular/core';\nimport {\n NG_VALUE_ACCESSOR,\n ControlValueAccessor,\n NgControl,\n FormControl,\n FormControlDirective,\n FormGroupDirective,\n FormControlName,\n} from '@angular/forms';\nimport { BaseDirective } from '@eui/components/shared';\nimport { coerceBooleanProperty, BooleanInput } from '@angular/cdk/coercion';\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'textarea[euiTextArea]',\n styleUrls: ['./styles/_index.scss'],\n template: '<ng-content></ng-content>',\n encapsulation: ViewEncapsulation.None,\n providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => EuiTextareaComponent), multi: true }],\n})\nexport class EuiTextareaComponent extends BaseDirective implements OnInit, OnDestroy, DoCheck, OnChanges, ControlValueAccessor {\n static idCounter = 0;\n\n @HostBinding('class')\n @Input()\n public set class(cssClass: string) {\n super.styleClass = cssClass;\n }\n public get class(): string {\n return [this.isInvalid ? 'eui-textarea--invalid' : '', super.getCssClasses('eui-textarea')].join(' ').trim();\n }\n\n @HostBinding('attr.disabled')\n @Input()\n public get disabled(): boolean \| null {\n return this._disabled ? true : null;\n }\n // TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n public set disabled(state: any) {\n // in case it's controlled by NgControl override\n this._disabled = coerceBooleanProperty(state);\n // set BaseDirective Attribute\n super.euiDisabled = this._disabled;\n }\n @HostBinding('attr.readonly')\n @Input()\n // TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n public get readonly(): any {\n return this._readonly \|\| undefined;\n }\n\n // TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n public set readonly(state: any) {\n this._readonly = coerceBooleanProperty(state);\n }\n @HostBinding('attr.id')\n @Input()\n id = `eui-textarea_${EuiTextareaComponent.idCounter++}`;\n\n @Input()\n public get isInvalid(): boolean {\n return this._isInvalid;\n }\n\n public set isInvalid(value: BooleanInput) {\n this._isInvalid = coerceBooleanProperty(value);\n super.euiDanger = this._isInvalid;\n }\n @HostBinding('attr.data-e2e') @Input() e2eAttr = 'eui-textarea';\n protected _readonly: boolean;\n\n protected hostEl: HTMLTextAreaElement;\n\n protected hostParentEl: HTMLElement;\n protected hostWrapperEl: HTMLDivElement;\n protected valueContainerEl: HTMLDivElement;\n private _disabled: boolean;\n private _isInvalid?: boolean;\n private destroy$: Subject<boolean> = new Subject<boolean>();\n private control: FormControl \| NgControl;\n\n constructor(\n private injector: Injector,\n private _elementRef: ElementRef,\n private _renderer: Renderer2,\n ) {\n super();\n }\n\n @HostListener('input', ['$event.target.value'])\n public onInputChange(value: string): void {\n this.onChange(value);\n }\n\n @HostListener('blur', ['$event.target.value'])\n public onBlur(value: string): void {\n this.onTouched(value);\n }\n\n ngOnInit(): void {\n this.hostEl = this._elementRef.nativeElement;\n this.hostParentEl = this.hostEl.parentElement;\n this.hostWrapperEl = this.createHostWrapperContainer();\n this.valueContainerEl = this.createValueContainer();\n\n this.handleMarkup();\n // extract the FormControl or NgControl\n this.control = (this.injector as Injector).get(NgControl, null, InjectFlags.Optional);\n if (this.control instanceof FormControlName) {\n this.control = (this.injector as Injector).get(FormGroupDirective).getControl(this.control);\n } else if (this.control instanceof FormControlDirective) {\n this.control = this.control.form as FormControl;\n }\n // sets invalid state if control is present\n if (this.control instanceof FormControl \|\| this.control instanceof NgControl) {\n this.disabled = this.control.disabled;\n this.isInvalid = this.control.dirty && this.control.touched && this.control.invalid;\n if (this.control instanceof FormControl) {\n this.control.statusChanges.pipe(takeUntil(this.destroy$)).subscribe((status) => {\n this.isInvalid = status === 'INVALID';\n this.disabled = status === 'DISABLED';\n });\n }\n }\n }\n\n ngDoCheck(): void {\n if (this.control instanceof NgControl \|\| this.control instanceof FormControl) {\n // TODO: Delete when https://github.com/angular/angular/issues/30275 is resolved\n this.isInvalid = this.control.invalid && this.control.touched;\n }\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes['readonly']) {\n const readonly = changes['readonly'].currentValue;\n\n if (this.hostWrapperEl && this.valueContainerEl) {\n this.hostWrapperEl.classList.toggle('eui-textarea__wrapper--readonly', !!readonly);\n }\n if (this.hostEl && this.valueContainerEl) {\n this.hostEl.classList.toggle('eui-textarea--readonly', !!readonly);\n this.valueContainerEl.innerText = this.hostEl.value;\n }\n }\n if (changes['euiDisabled']) {\n if (this.control instanceof FormControl) {\n changes['euiDisabled'].currentValue ? this.control.disable() : this.control.enable();\n } else {\n this.setDisabledState(changes['euiDisabled'].currentValue);\n }\n }\n }\n\n ngOnDestroy(): void {\n this.destroy$.complete();\n this.destroy$.unsubscribe();\n // cleanup DOM leftovers\n if (this.valueContainerEl) {\n try {\n this._renderer.removeChild(this.hostEl.parentElement, this.valueContainerEl);\n } catch (e) {\n console.error(e);\n }\n }\n if (this.hostWrapperEl) {\n try {\n this._renderer.removeChild(this.hostParentEl, this.hostWrapperEl);\n } catch (e) {\n console.error(e);\n }\n }\n }\n\n // TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n writeValue(obj: any): void {\n if (this.valueContainerEl) {\n this._renderer.setProperty(this.valueContainerEl, 'innerText', obj);\n }\n this._renderer.setProperty(this._elementRef.nativeElement, 'value', obj);\n }\n\n // TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n registerOnChange(fn: any): void {\n this.onChange = fn;\n }\n\n // TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n registerOnTouched(fn: any): void {\n this.onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n if (this.hostEl) {\n this._renderer.setProperty(this.hostEl, 'disabled', isDisabled);\n }\n }\n\n protected onChange(_): void {\n this.writeValue(_);\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n protected onTouched(_): void {\n if (this.control) {\n this.isInvalid = this.control.invalid;\n }\n }\n\n private createHostWrapperContainer(): HTMLDivElement {\n const wrapper = this._renderer.createElement('div');\n this._renderer.addClass(wrapper, 'eui-textarea__wrapper');\n if (this.readonly) {\n this._renderer.addClass(wrapper, 'eui-textarea__wrapper--readonly');\n this._renderer.addClass(this.hostEl, 'eui-textarea--readonly');\n } else {\n this._renderer.removeClass(wrapper, 'eui-textarea__wrapper--readonly');\n this._renderer.removeClass(this.hostEl, 'eui-textarea--readonly');\n }\n\n return wrapper;\n }\n\n /*\n Create a Div element which will hold the value to display when readonly\n \n @private\n /\n private createValueContainer(): HTMLDivElement {\n const valueContainer = this._renderer.createElement('div');\n this._renderer.addClass(valueContainer, 'eui-textarea__value-container');\n this._renderer.setProperty(valueContainer, 'innerText', this.hostEl.value);\n return valueContainer;\n }\n\n /\n Changes the markup around the textarea. Append textarea onto a container with div\n \n @private\n /\n private handleMarkup(): void {\n if (this.hostParentEl != null) {\n this.hostParentEl.replaceChild(this.hostWrapperEl, this.hostEl);\n this.hostWrapperEl.appendChild(this.hostEl);\n this.hostWrapperEl.appendChild(this.valueContainerEl);\n }\n }\n}\n","import {\n Directive,\n OnInit,\n OnDestroy,\n Input,\n ElementRef,\n HostListener,\n AfterViewInit,\n Optional,\n Renderer2,\n OnChanges,\n SimpleChanges,\n} from '@angular/core';\nimport { coerceBooleanProperty, coerceNumberProperty, BooleanInput } from '@angular/cdk/coercion';\nimport { fromEvent, Subject } from 'rxjs';\nimport { debounceTime, startWith, takeUntil } from 'rxjs/operators';\nimport { NgControl } from '@angular/forms';\n\n@Directive({\n // eslint-disable-next-line @angular-eslint/directive-selector\n selector: 'textarea[autoResize]',\n})\nexport class AutoResizeDirective implements OnInit, OnChanges, AfterViewInit, OnDestroy {\n private defaultRows = 1;\n private destroy$: Subject<boolean> = new Subject<boolean>();\n private observer: MutationObserver;\n\n @Input()\n public get autoResize(): boolean {\n return this._autoResize;\n }\n public set autoResize(state: BooleanInput) {\n this._autoResize = coerceBooleanProperty(state);\n }\n private _autoResize = true;\n\n @Input()\n set minRows(minRows: number \| string) {\n this.defaultRows = coerceNumberProperty(minRows);\n }\n\n constructor(\n protected el: ElementRef,\n protected renderer: Renderer2,\n @Optional() protected control: NgControl,\n ) {}\n\n @HostListener('input', ['$event.target'])\n onInput(): void {\n this.resize();\n }\n\n ngOnInit(): void {\n fromEvent(window, 'resize')\n .pipe(takeUntil(this.destroy$), debounceTime(300))\n .subscribe(() => this.resize());\n\n // Create an observer instance linked to the callback function\n this.observer = new MutationObserver(this.readonlyMutationObserver.bind(this));\n\n // Start observing the target node for configured mutations\n this.observer.observe(this.el.nativeElement, { attributes: true });\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes['autoResize']) {\n const enable = changes['autoResize'].currentValue \|\| this.autoResize;\n this.renderer.setProperty(this.el.nativeElement, 'rows', this.defaultRows);\n this.renderer.setStyle(this.el.nativeElement, 'overflow', enable ? 'hidden' : '');\n this.renderer.setStyle(this.el.nativeElement, 'resize', enable ? 'none' : '');\n if (enable) {\n this.resize();\n }\n }\n }\n\n ngAfterViewInit(): void {\n if (this.autoResize) {\n if (this.control) {\n this.handleFormControlChanges();\n } else {\n this.resize();\n }\n }\n }\n\n ngOnDestroy(): void {\n this.destroy$.complete();\n this.destroy$.unsubscribe();\n this.observer.disconnect();\n }\n\n /\n Calculates the height and set it, causing the textarea to resize.\n /\n public resize(): void {\n if (this.autoResize) {\n // clone element\n const clone = this.el.nativeElement.cloneNode(true);\n const parent = this.el.nativeElement.parentNode;\n clone.style.width = this.el.nativeElement.offsetWidth + 'px';\n clone.style.visibility = 'hidden';\n clone.style.position = 'absolute';\n clone.textContent = this.el.nativeElement.value;\n parent.appendChild(clone);\n clone.style['overflow-y'] = 'hidden';\n clone.style.height = 'auto';\n const cloneHeight = clone.scrollHeight;\n\n this.renderer.setStyle(clone, 'height', cloneHeight);\n // calculate height\n const { offsetHeight, scrollHeight } = clone;\n let height = offsetHeight > scrollHeight ? offsetHeight : scrollHeight;\n height = height <= 0 ? 'auto' : `${height}px`;\n // remove clone\n parent.removeChild(clone);\n // set height\n this.renderer.setStyle(this.el.nativeElement, 'height', height);\n }\n }\n\n /\n handles value changes through FormControl\n \n @protected\n /\n protected handleFormControlChanges(): void {\n // in case value changed manually through control, call resize()\n // startWith is being used to cause resize to be called in case of late subscription after value has changed\n this.control.valueChanges.pipe(takeUntil(this.destroy$), startWith('')).subscribe(() => this.resize());\n }\n\n private readonlyMutationObserver(mutationsList: MutationRecord[]): void {\n // Use traditional 'for loops' for IE 11\n for (const mutation of mutationsList) {\n if (mutation.type === 'attributes' && mutation.attributeName === 'readonly') {\n this.resize();\n }\n }\n }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { EuiTextareaComponent } from './eui-textarea.component';\nimport { AutoResizeDirective } from './auto-resize.directive';\n\n@NgModule({\n imports: [CommonModule],\n declarations: [EuiTextareaComponent, AutoResizeDirective],\n exports: [EuiTextareaComponent, AutoResizeDirective],\n})\nexport class EuiTextAreaModule {}\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-textarea.mjs","sources":["../../eui-textarea/eui-textarea.component.ts","../../eui-textarea/auto-resize.directive.ts","../../eui-textarea/eui-textarea.module.ts","../../eui-textarea/eui-components-eui-textarea.ts"],"sourcesContent":["import {\n Component,\n ElementRef,\n HostBinding,\n HostListener,\n Input,\n OnChanges,\n OnInit,\n Renderer2,\n SimpleChanges,\n ViewEncapsulation,\n OnDestroy,\n DoCheck,\n Injector,\n forwardRef,\n InjectFlags,\n} from '@angular/core';\nimport {\n NG_VALUE_ACCESSOR,\n ControlValueAccessor,\n NgControl,\n FormControl,\n FormControlDirective,\n FormGroupDirective,\n FormControlName,\n} from '@angular/forms';\nimport { BaseDirective } from '@eui/components/shared';\nimport { coerceBooleanProperty, BooleanInput } from '@angular/cdk/coercion';\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'textarea[euiTextArea]',\n styleUrls: ['./styles/_index.scss'],\n template: '<ng-content></ng-content>',\n encapsulation: ViewEncapsulation.None,\n providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => EuiTextareaComponent), multi: true }],\n})\nexport class EuiTextareaComponent extends BaseDirective implements OnInit, OnDestroy, DoCheck, OnChanges, ControlValueAccessor {\n static idCounter = 0;\n\n @HostBinding('class')\n @Input()\n public set class(cssClass: string) {\n super.styleClass = cssClass;\n }\n public get class(): string {\n return [this.isInvalid ? 'eui-textarea--invalid' : '', super.getCssClasses('eui-textarea')].join(' ').trim();\n }\n\n @HostBinding('attr.disabled')\n @Input()\n public get disabled(): boolean \| null {\n return this._disabled ? true : null;\n }\n // TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n public set disabled(state: any) {\n // in case it's controlled by NgControl override\n this._disabled = coerceBooleanProperty(state);\n // set BaseDirective Attribute\n super.euiDisabled = this._disabled;\n }\n @HostBinding('attr.readonly')\n @Input()\n // TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n public get readonly(): any {\n return this._readonly \|\| undefined;\n }\n\n // TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n public set readonly(state: any) {\n this._readonly = coerceBooleanProperty(state);\n }\n @HostBinding('attr.id')\n @Input()\n id = `eui-textarea_${EuiTextareaComponent.idCounter++}`;\n\n @Input()\n public get isInvalid(): boolean {\n return this._isInvalid;\n }\n\n public set isInvalid(value: BooleanInput) {\n this._isInvalid = coerceBooleanProperty(value);\n super.euiDanger = this._isInvalid;\n }\n @HostBinding('attr.data-e2e') @Input() e2eAttr = 'eui-textarea';\n protected _readonly: boolean;\n\n protected hostEl: HTMLTextAreaElement;\n\n protected hostParentEl: HTMLElement;\n protected hostWrapperEl: HTMLDivElement;\n protected valueContainerEl: HTMLDivElement;\n private _disabled: boolean;\n private _isInvalid?: boolean;\n private destroy$: Subject<boolean> = new Subject<boolean>();\n private control: FormControl \| NgControl;\n\n constructor(\n private injector: Injector,\n private _elementRef: ElementRef,\n private _renderer: Renderer2,\n ) {\n super();\n }\n\n @HostListener('input', ['$event.target.value'])\n public onInputChange(value: string): void {\n this.onChange(value);\n }\n\n @HostListener('blur', ['$event.target.value'])\n public onBlur(value: string): void {\n this.onTouched(value);\n }\n\n ngOnInit(): void {\n this.hostEl = this._elementRef.nativeElement;\n this.hostParentEl = this.hostEl.parentElement;\n this.hostWrapperEl = this.createHostWrapperContainer();\n this.valueContainerEl = this.createValueContainer();\n\n this.handleMarkup();\n // extract the FormControl or NgControl\n this.control = (this.injector as Injector).get(NgControl, null, InjectFlags.Optional);\n if (this.control instanceof FormControlName) {\n this.control = (this.injector as Injector).get(FormGroupDirective).getControl(this.control);\n } else if (this.control instanceof FormControlDirective) {\n this.control = this.control.form as FormControl;\n }\n // sets invalid state if control is present\n if (this.control instanceof FormControl \|\| this.control instanceof NgControl) {\n this.disabled = this.control.disabled;\n this.isInvalid = this.control.dirty && this.control.touched && this.control.invalid;\n if (this.control instanceof FormControl) {\n this.control.statusChanges.pipe(takeUntil(this.destroy$)).subscribe((status) => {\n this.isInvalid = status === 'INVALID';\n this.disabled = status === 'DISABLED';\n });\n }\n }\n }\n\n ngDoCheck(): void {\n if (this.control instanceof NgControl \|\| this.control instanceof FormControl) {\n // TODO: Delete when https://github.com/angular/angular/issues/30275 is resolved\n this.isInvalid = this.control.invalid && this.control.touched;\n }\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes['readonly']) {\n const readonly = changes['readonly'].currentValue;\n\n if (this.hostWrapperEl && this.valueContainerEl) {\n this.hostWrapperEl.classList.toggle('eui-textarea__wrapper--readonly', !!readonly);\n }\n if (this.hostEl && this.valueContainerEl) {\n this.hostEl.classList.toggle('eui-textarea--readonly', !!readonly);\n this.valueContainerEl.innerText = this.hostEl.value;\n }\n }\n if (changes['euiDisabled']) {\n if (this.control instanceof FormControl) {\n changes['euiDisabled'].currentValue ? this.control.disable() : this.control.enable();\n } else {\n this.setDisabledState(changes['euiDisabled'].currentValue);\n }\n }\n }\n\n ngOnDestroy(): void {\n this.destroy$.complete();\n this.destroy$.unsubscribe();\n // cleanup DOM leftovers\n if (this.valueContainerEl) {\n try {\n this._renderer.removeChild(this.hostEl.parentElement, this.valueContainerEl);\n } catch (e) {\n console.error(e);\n }\n }\n if (this.hostWrapperEl) {\n try {\n this._renderer.removeChild(this.hostParentEl, this.hostWrapperEl);\n } catch (e) {\n console.error(e);\n }\n }\n }\n\n // TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n writeValue(obj: any): void {\n if (this.valueContainerEl) {\n this._renderer.setProperty(this.valueContainerEl, 'innerText', obj);\n }\n this._renderer.setProperty(this._elementRef.nativeElement, 'value', obj);\n }\n\n // TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n registerOnChange(fn: any): void {\n this.onChange = fn;\n }\n\n // TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n registerOnTouched(fn: any): void {\n this.onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n if (this.hostEl) {\n this._renderer.setProperty(this.hostEl, 'disabled', isDisabled);\n }\n }\n\n protected onChange(_): void {\n this.writeValue(_);\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n protected onTouched(_): void {\n if (this.control) {\n this.isInvalid = this.control.invalid;\n }\n }\n\n private createHostWrapperContainer(): HTMLDivElement {\n const wrapper = this._renderer.createElement('div');\n this._renderer.addClass(wrapper, 'eui-textarea__wrapper');\n if (this.readonly) {\n this._renderer.addClass(wrapper, 'eui-textarea__wrapper--readonly');\n this._renderer.addClass(this.hostEl, 'eui-textarea--readonly');\n } else {\n this._renderer.removeClass(wrapper, 'eui-textarea__wrapper--readonly');\n this._renderer.removeClass(this.hostEl, 'eui-textarea--readonly');\n }\n\n return wrapper;\n }\n\n /*\n Create a Div element which will hold the value to display when readonly\n \n @private\n /\n private createValueContainer(): HTMLDivElement {\n const valueContainer = this._renderer.createElement('div');\n this._renderer.addClass(valueContainer, 'eui-textarea__value-container');\n this._renderer.setProperty(valueContainer, 'innerText', this.hostEl.value);\n return valueContainer;\n }\n\n /\n Changes the markup around the textarea. Append textarea onto a container with div\n \n @private\n /\n private handleMarkup(): void {\n if (this.hostParentEl != null) {\n this.hostParentEl.replaceChild(this.hostWrapperEl, this.hostEl);\n this.hostWrapperEl.appendChild(this.hostEl);\n this.hostWrapperEl.appendChild(this.valueContainerEl);\n }\n }\n}\n","import {\n Directive,\n OnInit,\n OnDestroy,\n Input,\n ElementRef,\n HostListener,\n AfterViewInit,\n Optional,\n Renderer2,\n OnChanges,\n SimpleChanges,\n} from '@angular/core';\nimport { coerceBooleanProperty, coerceNumberProperty, BooleanInput } from '@angular/cdk/coercion';\nimport { fromEvent, Subject } from 'rxjs';\nimport { debounceTime, startWith, takeUntil } from 'rxjs/operators';\nimport { NgControl } from '@angular/forms';\n\n@Directive({\n // eslint-disable-next-line @angular-eslint/directive-selector\n selector: 'textarea[autoResize]',\n})\nexport class AutoResizeDirective implements OnInit, OnChanges, AfterViewInit, OnDestroy {\n private defaultRows = 1;\n private destroy$: Subject<boolean> = new Subject<boolean>();\n private observer: MutationObserver;\n\n @Input()\n public get autoResize(): boolean {\n return this._autoResize;\n }\n public set autoResize(state: BooleanInput) {\n this._autoResize = coerceBooleanProperty(state);\n }\n private _autoResize = true;\n\n @Input()\n set minRows(minRows: number \| string) {\n this.defaultRows = coerceNumberProperty(minRows);\n }\n\n constructor(\n protected el: ElementRef,\n protected renderer: Renderer2,\n @Optional() protected control: NgControl,\n ) {}\n\n @HostListener('input', ['$event.target'])\n onInput(): void {\n this.resize();\n }\n\n ngOnInit(): void {\n fromEvent(window, 'resize')\n .pipe(takeUntil(this.destroy$), debounceTime(300))\n .subscribe(() => this.resize());\n\n // Create an observer instance linked to the callback function\n this.observer = new MutationObserver(this.readonlyMutationObserver.bind(this));\n\n // Start observing the target node for configured mutations\n this.observer.observe(this.el.nativeElement, { attributes: true });\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes['autoResize']) {\n const enable = changes['autoResize'].currentValue \|\| this.autoResize;\n this.renderer.setProperty(this.el.nativeElement, 'rows', this.defaultRows);\n this.renderer.setStyle(this.el.nativeElement, 'overflow', enable ? 'hidden' : '');\n this.renderer.setStyle(this.el.nativeElement, 'resize', enable ? 'none' : '');\n if (enable) {\n this.resize();\n }\n }\n }\n\n ngAfterViewInit(): void {\n if (this.autoResize) {\n if (this.control) {\n this.handleFormControlChanges();\n } else {\n this.resize();\n }\n }\n }\n\n ngOnDestroy(): void {\n this.destroy$.complete();\n this.destroy$.unsubscribe();\n this.observer.disconnect();\n }\n\n /\n Calculates the height and set it, causing the textarea to resize.\n /\n public resize(): void {\n if (this.autoResize) {\n // clone element\n const clone = this.el.nativeElement.cloneNode(true);\n const parent = this.el.nativeElement.parentNode;\n clone.style.width = this.el.nativeElement.offsetWidth + 'px';\n clone.style.visibility = 'hidden';\n clone.style.position = 'absolute';\n clone.textContent = this.el.nativeElement.value;\n parent.appendChild(clone);\n clone.style['overflow-y'] = 'hidden';\n clone.style.height = 'auto';\n const cloneHeight = clone.scrollHeight;\n\n this.renderer.setStyle(clone, 'height', cloneHeight);\n // calculate height\n const { offsetHeight, scrollHeight } = clone;\n let height = offsetHeight > scrollHeight ? offsetHeight : scrollHeight;\n height = height <= 0 ? 'auto' : `${height}px`;\n // remove clone\n parent.removeChild(clone);\n // set height\n this.renderer.setStyle(this.el.nativeElement, 'height', height);\n }\n }\n\n /\n handles value changes through FormControl\n \n @protected\n /\n protected handleFormControlChanges(): void {\n // in case value changed manually through control, call resize()\n // startWith is being used to cause resize to be called in case of late subscription after value has changed\n this.control.valueChanges.pipe(takeUntil(this.destroy$), startWith('')).subscribe(() => this.resize());\n }\n\n private readonlyMutationObserver(mutationsList: MutationRecord[]): void {\n // Use traditional 'for loops' for IE 11\n for (const mutation of mutationsList) {\n if (mutation.type === 'attributes' && mutation.attributeName === 'readonly') {\n this.resize();\n }\n }\n }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { EuiTextareaComponent } from './eui-textarea.component';\nimport { AutoResizeDirective } from './auto-resize.directive';\n\n@NgModule({\n imports: [CommonModule],\n declarations: [EuiTextareaComponent, AutoResizeDirective],\n exports: [EuiTextareaComponent, AutoResizeDirective],\n})\nexport class EuiTextAreaModule {}\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-timebar.mjs CHANGED Viewed

@@ -279,10 +279,10 @@ class EuiTimebarComponent {
             return 0;
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", 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.1", 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);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;font:normal normal 400 .875rem/1rem var(--eui-base-font-family)}.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{margin-top:6.5rem;font:normal normal 400 .875rem/1rem var(--eui-base-font-family);font-weight:700}.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);color:var(--eui-base-color-info-110-contrast)}.timebar__grouped__step.eui-timebar__step--success{background-color:var(--eui-base-color-success-110);color:var(--eui-base-color-success-110-contrast)}.timebar__grouped__step.eui-timebar__step--warning{background-color:var(--eui-base-color-warning-110);color:var(--eui-base-color-warning-110-contrast)}.timebar__grouped__step.eui-timebar__step--danger{background-color:var(--eui-base-color-danger-110);color:var(--eui-base-color-danger-110-contrast)}.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);color:var(--eui-base-color-warning-100-contrast)}.eui-timebar__step--warning .eui-timebar__step-date-item{background-color:var(--eui-base-color-warning-110);color:var(--eui-base-color-grey-100)}.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);color:var(--eui-base-color-grey-100)}.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.2", 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.2", 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);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;font:normal normal 400 .875rem/1rem var(--eui-base-font-family)}.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{margin-top:6.5rem;font:normal normal 400 .875rem/1rem var(--eui-base-font-family);font-weight:700}.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);color:var(--eui-base-color-info-110-contrast)}.timebar__grouped__step.eui-timebar__step--success{background-color:var(--eui-base-color-success-110);color:var(--eui-base-color-success-110-contrast)}.timebar__grouped__step.eui-timebar__step--warning{background-color:var(--eui-base-color-warning-110);color:var(--eui-base-color-warning-110-contrast)}.timebar__grouped__step.eui-timebar__step--danger{background-color:var(--eui-base-color-danger-110);color:var(--eui-base-color-danger-110-contrast)}.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);color:var(--eui-base-color-warning-100-contrast)}.eui-timebar__step--warning .eui-timebar__step-date-item{background-color:var(--eui-base-color-warning-110);color:var(--eui-base-color-grey-100)}.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);color:var(--eui-base-color-grey-100)}.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-rc.1", ngImport: i0, type: EuiTimebarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", 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);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;font:normal normal 400 .875rem/1rem var(--eui-base-font-family)}.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{margin-top:6.5rem;font:normal normal 400 .875rem/1rem var(--eui-base-font-family);font-weight:700}.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);color:var(--eui-base-color-info-110-contrast)}.timebar__grouped__step.eui-timebar__step--success{background-color:var(--eui-base-color-success-110);color:var(--eui-base-color-success-110-contrast)}.timebar__grouped__step.eui-timebar__step--warning{background-color:var(--eui-base-color-warning-110);color:var(--eui-base-color-warning-110-contrast)}.timebar__grouped__step.eui-timebar__step--danger{background-color:var(--eui-base-color-danger-110);color:var(--eui-base-color-danger-110-contrast)}.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);color:var(--eui-base-color-warning-100-contrast)}.eui-timebar__step--warning .eui-timebar__step-date-item{background-color:var(--eui-base-color-warning-110);color:var(--eui-base-color-grey-100)}.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);color:var(--eui-base-color-grey-100)}.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: [{
@@ -312,11 +312,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ng
                 type: Input
             }] } });
 class EuiTimebarModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiTimebarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-rc.1", 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.1", ngImport: i0, type: EuiTimebarModule, imports: [CommonModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiTimebarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-rc.2", 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.2", ngImport: i0, type: EuiTimebarModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiTimebarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiTimebarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],

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-rc.1", ngImport: i0, type: EuiTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.1", 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);margin-top:var(--eui-base-spacing-xs);position:relative;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-timeline-item{position:relative;list-style:none}.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);padding:0 0 var(--eui-base-spacing-xs) 0;font:normal normal 400 1.125rem/1.5rem 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);margin-top:var(--eui-base-spacing-m);padding:var(--eui-base-spacing-2xs) 0;position:absolute;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-timeline-item .eui-timeline-item__time{color:var(--eui-base-color-grey-75);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-140)}.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.2", ngImport: i0, type: EuiTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.2", 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);margin-top:var(--eui-base-spacing-xs);position:relative;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-timeline-item{position:relative;list-style:none}.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);padding:0 0 var(--eui-base-spacing-xs) 0;font:normal normal 400 1.125rem/1.5rem 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);margin-top:var(--eui-base-spacing-m);padding:var(--eui-base-spacing-2xs) 0;position:absolute;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-timeline-item .eui-timeline-item__time{color:var(--eui-base-color-grey-75);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-140)}.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-rc.1", ngImport: i0, type: EuiTimelineComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", 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);margin-top:var(--eui-base-spacing-xs);position:relative;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-timeline-item{position:relative;list-style:none}.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);padding:0 0 var(--eui-base-spacing-xs) 0;font:normal normal 400 1.125rem/1.5rem 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);margin-top:var(--eui-base-spacing-m);padding:var(--eui-base-spacing-2xs) 0;position:absolute;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-timeline-item .eui-timeline-item__time{color:var(--eui-base-color-grey-75);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-140)}.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-rc.1", 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.1", 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);margin-top:var(--eui-base-spacing-xs);position:relative;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-timeline-item{position:relative;list-style:none}.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);padding:0 0 var(--eui-base-spacing-xs) 0;font:normal normal 400 1.125rem/1.5rem 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);margin-top:var(--eui-base-spacing-m);padding:var(--eui-base-spacing-2xs) 0;position:absolute;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-timeline-item .eui-timeline-item__time{color:var(--eui-base-color-grey-75);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-140)}.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.2", 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.2", 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);margin-top:var(--eui-base-spacing-xs);position:relative;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-timeline-item{position:relative;list-style:none}.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);padding:0 0 var(--eui-base-spacing-xs) 0;font:normal normal 400 1.125rem/1.5rem 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);margin-top:var(--eui-base-spacing-m);padding:var(--eui-base-spacing-2xs) 0;position:absolute;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-timeline-item .eui-timeline-item__time{color:var(--eui-base-color-grey-75);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-140)}.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-rc.1", ngImport: i0, type: EuiTimelineItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", 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);margin-top:var(--eui-base-spacing-xs);position:relative;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-timeline-item{position:relative;list-style:none}.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);padding:0 0 var(--eui-base-spacing-xs) 0;font:normal normal 400 1.125rem/1.5rem 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);margin-top:var(--eui-base-spacing-m);padding:var(--eui-base-spacing-2xs) 0;position:absolute;font:normal normal 400 1rem/1.25rem var(--eui-base-font-family);font-weight:700}.eui-timeline-item .eui-timeline-item__time{color:var(--eui-base-color-grey-75);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-140)}.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-rc.1", ng
             }] } });
 class EuiTimelineModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiTimelineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-rc.1", 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.1", ngImport: i0, type: EuiTimelineModule, imports: [CommonModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiTimelineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-rc.2", 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.2", ngImport: i0, type: EuiTimelineModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiTimelineModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiTimelineModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],

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

@@ -258,10 +258,10 @@ class EuiTimepickerComponent {
             return '';
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiTimepickerComponent, deps: [{ token: DYNAMIC_COMPONENT_CONFIG, optional: true }, { token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.1", type: EuiTimepickerComponent, selector: "eui-timepicker", inputs: { e2eAttr: "e2eAttr", isreadOnly: "isreadOnly", isOneInputField: "isOneInputField", hasSeconds: "hasSeconds", timeMask: "timeMask" }, viewQueries: [{ propertyName: "inputHoursElement", first: true, predicate: ["inputrefhours"], descendants: true, read: ElementRef }, { propertyName: "inputMinsElement", first: true, predicate: ["inputrefmins"], descendants: true, read: ElementRef }, { propertyName: "inputSecsElement", first: true, predicate: ["inputrefsecs"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"eui-timepicker\" [class.eui-timepicker--centered]=\"isDatetimepicker\" attr.data-e2e=\"{{ e2eAttr }}\">\n    <ng-container *ngIf=\"isOneInputField; else multipleInputs\">\n        <input\n            [class.eui-timepicker__input--one-field]=\"isDatetimepicker\"\n            euiInputText\n            mask=\"{{ timeMask }}\"\n            [leadZeroDateTime]=\"true\"\n            placeholder=\"{{ timeMask }}\"\n            aria-label=\"Time Input Field\"\n            [formControl]=\"oneInputFormControl\"\n            (focusout)=\"onFocusOut()\"\n            [dropSpecialCharacters]=\"false\"\n            [readonly]=\"isreadOnly\" />\n    </ng-container>\n\n    <ng-template #multipleInputs>\n        <div class=\"eui-timepicker__input-container\">\n            <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron\">\n                <eui-icon-svg\n                    (click)=\"changeHours(1)\"\n                    icon=\"eui-chevron-up\"\n                    fillColor=\"grey-75\"\n                    size=\"l\"\n                    role=\"button\"\n                    aria-label=\"Increase Hours\"></eui-icon-svg>\n            </div>\n            <input\n                #inputrefhours\n                euiInputNumber\n                [leadingZero]=\"2\"\n                [digits]=\"2\"\n                [fractionDigits]=\"0\"\n                class=\"eui-timepicker__input\"\n                placeholder=\"HH\"\n                [ngModel]=\"hours\"\n                (ngModelChange)=\"updateHours($event)\"\n                [readonly]=\"isreadOnly\"\n                aria-label=\"Hours\"\n                (keydown.ArrowUp)=\"changeHours(1); $event.preventDefault()\"\n                (keydown.ArrowDown)=\"changeHours(-1); $event.preventDefault()\" />\n            <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron\">\n                <eui-icon-svg\n                    (click)=\"changeHours(-1)\"\n                    icon=\"eui-chevron-down\"\n                    fillColor=\"grey-75\"\n                    size=\"l\"\n                    role=\"button\"\n                    aria-label=\"Decrease Hours\"></eui-icon-svg>\n            </div>\n        </div>\n        <div class=\"eui-timepicker__spacer\">:</div>\n        <div class=\"eui-timepicker__input-container\">\n            <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron\">\n                <eui-icon-svg\n                    (click)=\"changeMinutes(1)\"\n                    icon=\"eui-chevron-up\"\n                    fillColor=\"grey-75\"\n                    size=\"l\"\n                    role=\"button\"\n                    aria-label=\"Increase Minutes\"></eui-icon-svg>\n            </div>\n            <input\n                #inputrefmins\n                euiInputNumber\n                [leadingZero]=\"2\"\n                [digits]=\"2\"\n                [fractionDigits]=\"0\"\n                class=\"eui-timepicker__input\"\n                placeholder=\"MM\"\n                [ngModel]=\"mins\"\n                (ngModelChange)=\"updateMinutes($event)\"\n                [readonly]=\"isreadOnly\"\n                aria-label=\"Minutes\"\n                (keydown.ArrowUp)=\"changeMinutes(1); $event.preventDefault()\"\n                (keydown.ArrowDown)=\"changeMinutes(-1); $event.preventDefault()\" />\n            <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron\">\n                <eui-icon-svg\n                    (click)=\"changeMinutes(-1)\"\n                    icon=\"eui-chevron-down\"\n                    fillColor=\"grey-75\"\n                    size=\"l\"\n                    role=\"button\"\n                    aria-label=\"Decrease Minutes\"></eui-icon-svg>\n            </div>\n        </div>\n        <ng-container *ngIf=\"hasSeconds\">\n            <div class=\"eui-timepicker__spacer\">:</div>\n            <div class=\"eui-timepicker__input-container\">\n                <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron\">\n                    <eui-icon-svg\n                        (click)=\"changeSeconds(1)\"\n                        icon=\"eui-chevron-up\"\n                        fillColor=\"grey-75\"\n                        size=\"l\"\n                        role=\"button\"\n                        aria-label=\"Increase seconds\"></eui-icon-svg>\n                </div>\n                <input\n                    #inputrefsecs\n                    euiInputNumber\n                    [leadingZero]=\"2\"\n                    [digits]=\"2\"\n                    [fractionDigits]=\"0\"\n                    class=\"eui-timepicker__input\"\n                    placeholder=\"SS\"\n                    [ngModel]=\"secs\"\n                    (ngModelChange)=\"updateSeconds($event)\"\n                    [readonly]=\"isreadOnly\"\n                    aria-label=\"Seconds\"\n                    (keydown.ArrowUp)=\"changeSeconds(1); $event.preventDefault()\"\n                    (keydown.ArrowDown)=\"changeSeconds(-1); $event.preventDefault()\" />\n                <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron\">\n                    <eui-icon-svg\n                        (click)=\"changeSeconds(-1)\"\n                        icon=\"eui-chevron-down\"\n                        fillColor=\"grey-75\"\n                        size=\"l\"\n                        role=\"button\"\n                        aria-label=\"Decrease seconds\"></eui-icon-svg>\n                </div>\n            </div>\n        </ng-container>\n    </ng-template>\n</div>\n", styles: [".eui-timepicker{align-items:center;display:flex}.eui-timepicker--centered{justify-content:center}.eui-timepicker__input-container{width:calc(4 * var(--eui-base-spacing-m))}.eui-timepicker__input{text-align:center;width:100%}.eui-timepicker__input--one-field{width:calc(6 * var(--eui-base-spacing-m));margin-bottom:var(--eui-base-spacing-2xs)}.eui-timepicker__spacer{text-align:center;width:var(--eui-base-spacing-m)}.eui-timepicker__chevron{display:flex;justify-content:center;padding:var(--eui-base-spacing-xs)}.eui-timepicker__chevron .eui-icon-svg>svg:hover{cursor:pointer;color:var(--eui-base-color-primary-100)}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.EuiInputNumberComponent, selector: "input[euiInputNumber]", inputs: ["min", "max", "leadingZero", "isInvalid", "fractionDigits", "digits", "fillFraction", "roundUp", "noFormat", "value"] }, { kind: "directive", type: i3.EuiInputNumberDirective, selector: "input[euiInputNumber][formControl],input[euiInputNumber][formControlName],input[euiInputNumber][ngModel]" }, { kind: "component", type: i4.EuiInputTextComponent, selector: "input[euiInputText]", inputs: ["class", "isInvalid"] }, { kind: "component", type: i5.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "directive", type: i6.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiTimepickerComponent, deps: [{ token: DYNAMIC_COMPONENT_CONFIG, optional: true }, { token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.0-rc.2", type: EuiTimepickerComponent, selector: "eui-timepicker", inputs: { e2eAttr: "e2eAttr", isreadOnly: "isreadOnly", isOneInputField: "isOneInputField", hasSeconds: "hasSeconds", timeMask: "timeMask" }, viewQueries: [{ propertyName: "inputHoursElement", first: true, predicate: ["inputrefhours"], descendants: true, read: ElementRef }, { propertyName: "inputMinsElement", first: true, predicate: ["inputrefmins"], descendants: true, read: ElementRef }, { propertyName: "inputSecsElement", first: true, predicate: ["inputrefsecs"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"eui-timepicker\" [class.eui-timepicker--centered]=\"isDatetimepicker\" attr.data-e2e=\"{{ e2eAttr }}\">\n    <ng-container *ngIf=\"isOneInputField; else multipleInputs\">\n        <input\n            [class.eui-timepicker__input--one-field]=\"isDatetimepicker\"\n            euiInputText\n            mask=\"{{ timeMask }}\"\n            [leadZeroDateTime]=\"true\"\n            placeholder=\"{{ timeMask }}\"\n            aria-label=\"Time Input Field\"\n            [formControl]=\"oneInputFormControl\"\n            (focusout)=\"onFocusOut()\"\n            [dropSpecialCharacters]=\"false\"\n            [readonly]=\"isreadOnly\" />\n    </ng-container>\n\n    <ng-template #multipleInputs>\n        <div class=\"eui-timepicker__input-container\">\n            <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron\">\n                <eui-icon-svg\n                    (click)=\"changeHours(1)\"\n                    icon=\"eui-chevron-up\"\n                    fillColor=\"grey-75\"\n                    size=\"l\"\n                    role=\"button\"\n                    aria-label=\"Increase Hours\"></eui-icon-svg>\n            </div>\n            <input\n                #inputrefhours\n                euiInputNumber\n                [leadingZero]=\"2\"\n                [digits]=\"2\"\n                [fractionDigits]=\"0\"\n                class=\"eui-timepicker__input\"\n                placeholder=\"HH\"\n                [ngModel]=\"hours\"\n                (ngModelChange)=\"updateHours($event)\"\n                [readonly]=\"isreadOnly\"\n                aria-label=\"Hours\"\n                (keydown.ArrowUp)=\"changeHours(1); $event.preventDefault()\"\n                (keydown.ArrowDown)=\"changeHours(-1); $event.preventDefault()\" />\n            <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron\">\n                <eui-icon-svg\n                    (click)=\"changeHours(-1)\"\n                    icon=\"eui-chevron-down\"\n                    fillColor=\"grey-75\"\n                    size=\"l\"\n                    role=\"button\"\n                    aria-label=\"Decrease Hours\"></eui-icon-svg>\n            </div>\n        </div>\n        <div class=\"eui-timepicker__spacer\">:</div>\n        <div class=\"eui-timepicker__input-container\">\n            <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron\">\n                <eui-icon-svg\n                    (click)=\"changeMinutes(1)\"\n                    icon=\"eui-chevron-up\"\n                    fillColor=\"grey-75\"\n                    size=\"l\"\n                    role=\"button\"\n                    aria-label=\"Increase Minutes\"></eui-icon-svg>\n            </div>\n            <input\n                #inputrefmins\n                euiInputNumber\n                [leadingZero]=\"2\"\n                [digits]=\"2\"\n                [fractionDigits]=\"0\"\n                class=\"eui-timepicker__input\"\n                placeholder=\"MM\"\n                [ngModel]=\"mins\"\n                (ngModelChange)=\"updateMinutes($event)\"\n                [readonly]=\"isreadOnly\"\n                aria-label=\"Minutes\"\n                (keydown.ArrowUp)=\"changeMinutes(1); $event.preventDefault()\"\n                (keydown.ArrowDown)=\"changeMinutes(-1); $event.preventDefault()\" />\n            <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron\">\n                <eui-icon-svg\n                    (click)=\"changeMinutes(-1)\"\n                    icon=\"eui-chevron-down\"\n                    fillColor=\"grey-75\"\n                    size=\"l\"\n                    role=\"button\"\n                    aria-label=\"Decrease Minutes\"></eui-icon-svg>\n            </div>\n        </div>\n        <ng-container *ngIf=\"hasSeconds\">\n            <div class=\"eui-timepicker__spacer\">:</div>\n            <div class=\"eui-timepicker__input-container\">\n                <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron\">\n                    <eui-icon-svg\n                        (click)=\"changeSeconds(1)\"\n                        icon=\"eui-chevron-up\"\n                        fillColor=\"grey-75\"\n                        size=\"l\"\n                        role=\"button\"\n                        aria-label=\"Increase seconds\"></eui-icon-svg>\n                </div>\n                <input\n                    #inputrefsecs\n                    euiInputNumber\n                    [leadingZero]=\"2\"\n                    [digits]=\"2\"\n                    [fractionDigits]=\"0\"\n                    class=\"eui-timepicker__input\"\n                    placeholder=\"SS\"\n                    [ngModel]=\"secs\"\n                    (ngModelChange)=\"updateSeconds($event)\"\n                    [readonly]=\"isreadOnly\"\n                    aria-label=\"Seconds\"\n                    (keydown.ArrowUp)=\"changeSeconds(1); $event.preventDefault()\"\n                    (keydown.ArrowDown)=\"changeSeconds(-1); $event.preventDefault()\" />\n                <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron\">\n                    <eui-icon-svg\n                        (click)=\"changeSeconds(-1)\"\n                        icon=\"eui-chevron-down\"\n                        fillColor=\"grey-75\"\n                        size=\"l\"\n                        role=\"button\"\n                        aria-label=\"Decrease seconds\"></eui-icon-svg>\n                </div>\n            </div>\n        </ng-container>\n    </ng-template>\n</div>\n", styles: [".eui-timepicker{align-items:center;display:flex}.eui-timepicker--centered{justify-content:center}.eui-timepicker__input-container{width:calc(4 * var(--eui-base-spacing-m))}.eui-timepicker__input{text-align:center;width:100%}.eui-timepicker__input--one-field{width:calc(6 * var(--eui-base-spacing-m));margin-bottom:var(--eui-base-spacing-2xs)}.eui-timepicker__spacer{text-align:center;width:var(--eui-base-spacing-m)}.eui-timepicker__chevron{display:flex;justify-content:center;padding:var(--eui-base-spacing-xs)}.eui-timepicker__chevron .eui-icon-svg>svg:hover{cursor:pointer;color:var(--eui-base-color-primary-100)}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.EuiInputNumberComponent, selector: "input[euiInputNumber]", inputs: ["min", "max", "leadingZero", "isInvalid", "fractionDigits", "digits", "fillFraction", "roundUp", "noFormat", "value"] }, { kind: "directive", type: i3.EuiInputNumberDirective, selector: "input[euiInputNumber][formControl],input[euiInputNumber][formControlName],input[euiInputNumber][ngModel]" }, { kind: "component", type: i4.EuiInputTextComponent, selector: "input[euiInputText]", inputs: ["class", "isInvalid"] }, { kind: "component", type: i5.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "size", "fillColor", "set", "ariaLabelledby", "role", "style", "iconUrl", "transform", "aria-label", "ariaHidden", "focusable", "isLoading"] }, { kind: "directive", type: i6.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiTimepickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiTimepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'eui-timepicker', encapsulation: ViewEncapsulation.None, template: "<div class=\"eui-timepicker\" [class.eui-timepicker--centered]=\"isDatetimepicker\" attr.data-e2e=\"{{ e2eAttr }}\">\n    <ng-container *ngIf=\"isOneInputField; else multipleInputs\">\n        <input\n            [class.eui-timepicker__input--one-field]=\"isDatetimepicker\"\n            euiInputText\n            mask=\"{{ timeMask }}\"\n            [leadZeroDateTime]=\"true\"\n            placeholder=\"{{ timeMask }}\"\n            aria-label=\"Time Input Field\"\n            [formControl]=\"oneInputFormControl\"\n            (focusout)=\"onFocusOut()\"\n            [dropSpecialCharacters]=\"false\"\n            [readonly]=\"isreadOnly\" />\n    </ng-container>\n\n    <ng-template #multipleInputs>\n        <div class=\"eui-timepicker__input-container\">\n            <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron\">\n                <eui-icon-svg\n                    (click)=\"changeHours(1)\"\n                    icon=\"eui-chevron-up\"\n                    fillColor=\"grey-75\"\n                    size=\"l\"\n                    role=\"button\"\n                    aria-label=\"Increase Hours\"></eui-icon-svg>\n            </div>\n            <input\n                #inputrefhours\n                euiInputNumber\n                [leadingZero]=\"2\"\n                [digits]=\"2\"\n                [fractionDigits]=\"0\"\n                class=\"eui-timepicker__input\"\n                placeholder=\"HH\"\n                [ngModel]=\"hours\"\n                (ngModelChange)=\"updateHours($event)\"\n                [readonly]=\"isreadOnly\"\n                aria-label=\"Hours\"\n                (keydown.ArrowUp)=\"changeHours(1); $event.preventDefault()\"\n                (keydown.ArrowDown)=\"changeHours(-1); $event.preventDefault()\" />\n            <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron\">\n                <eui-icon-svg\n                    (click)=\"changeHours(-1)\"\n                    icon=\"eui-chevron-down\"\n                    fillColor=\"grey-75\"\n                    size=\"l\"\n                    role=\"button\"\n                    aria-label=\"Decrease Hours\"></eui-icon-svg>\n            </div>\n        </div>\n        <div class=\"eui-timepicker__spacer\">:</div>\n        <div class=\"eui-timepicker__input-container\">\n            <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron\">\n                <eui-icon-svg\n                    (click)=\"changeMinutes(1)\"\n                    icon=\"eui-chevron-up\"\n                    fillColor=\"grey-75\"\n                    size=\"l\"\n                    role=\"button\"\n                    aria-label=\"Increase Minutes\"></eui-icon-svg>\n            </div>\n            <input\n                #inputrefmins\n                euiInputNumber\n                [leadingZero]=\"2\"\n                [digits]=\"2\"\n                [fractionDigits]=\"0\"\n                class=\"eui-timepicker__input\"\n                placeholder=\"MM\"\n                [ngModel]=\"mins\"\n                (ngModelChange)=\"updateMinutes($event)\"\n                [readonly]=\"isreadOnly\"\n                aria-label=\"Minutes\"\n                (keydown.ArrowUp)=\"changeMinutes(1); $event.preventDefault()\"\n                (keydown.ArrowDown)=\"changeMinutes(-1); $event.preventDefault()\" />\n            <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron\">\n                <eui-icon-svg\n                    (click)=\"changeMinutes(-1)\"\n                    icon=\"eui-chevron-down\"\n                    fillColor=\"grey-75\"\n                    size=\"l\"\n                    role=\"button\"\n                    aria-label=\"Decrease Minutes\"></eui-icon-svg>\n            </div>\n        </div>\n        <ng-container *ngIf=\"hasSeconds\">\n            <div class=\"eui-timepicker__spacer\">:</div>\n            <div class=\"eui-timepicker__input-container\">\n                <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron\">\n                    <eui-icon-svg\n                        (click)=\"changeSeconds(1)\"\n                        icon=\"eui-chevron-up\"\n                        fillColor=\"grey-75\"\n                        size=\"l\"\n                        role=\"button\"\n                        aria-label=\"Increase seconds\"></eui-icon-svg>\n                </div>\n                <input\n                    #inputrefsecs\n                    euiInputNumber\n                    [leadingZero]=\"2\"\n                    [digits]=\"2\"\n                    [fractionDigits]=\"0\"\n                    class=\"eui-timepicker__input\"\n                    placeholder=\"SS\"\n                    [ngModel]=\"secs\"\n                    (ngModelChange)=\"updateSeconds($event)\"\n                    [readonly]=\"isreadOnly\"\n                    aria-label=\"Seconds\"\n                    (keydown.ArrowUp)=\"changeSeconds(1); $event.preventDefault()\"\n                    (keydown.ArrowDown)=\"changeSeconds(-1); $event.preventDefault()\" />\n                <div *ngIf=\"!isreadOnly\" class=\"eui-timepicker__chevron\">\n                    <eui-icon-svg\n                        (click)=\"changeSeconds(-1)\"\n                        icon=\"eui-chevron-down\"\n                        fillColor=\"grey-75\"\n                        size=\"l\"\n                        role=\"button\"\n                        aria-label=\"Decrease seconds\"></eui-icon-svg>\n                </div>\n            </div>\n        </ng-container>\n    </ng-template>\n</div>\n", styles: [".eui-timepicker{align-items:center;display:flex}.eui-timepicker--centered{justify-content:center}.eui-timepicker__input-container{width:calc(4 * var(--eui-base-spacing-m))}.eui-timepicker__input{text-align:center;width:100%}.eui-timepicker__input--one-field{width:calc(6 * var(--eui-base-spacing-m));margin-bottom:var(--eui-base-spacing-2xs)}.eui-timepicker__spacer{text-align:center;width:var(--eui-base-spacing-m)}.eui-timepicker__chevron{display:flex;justify-content:center;padding:var(--eui-base-spacing-xs)}.eui-timepicker__chevron .eui-icon-svg>svg:hover{cursor:pointer;color:var(--eui-base-color-primary-100)}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
@@ -295,22 +295,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ng
             }] } });
 class EuiTimepickerModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiTimepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiTimepickerModule, declarations: [EuiTimepickerComponent], imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiTimepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiTimepickerModule, declarations: [EuiTimepickerComponent], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             EuiInputNumberDirectiveModule,
             EuiInputTextModule,
             EuiIconModule,
             NgxMaskDirective], exports: [EuiTimepickerComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiTimepickerModule, providers: [provideNgxMask(), provideEnvironmentNgxMask()], imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiTimepickerModule, providers: [provideNgxMask(), provideEnvironmentNgxMask()], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             EuiInputNumberDirectiveModule,
             EuiInputTextModule,
             EuiIconModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.1", ngImport: i0, type: EuiTimepickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-rc.2", ngImport: i0, type: EuiTimepickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [