@eui/ecl 21.2.6 → 21.2.7-snapshot-1780663563127

package/fesm2022/eui-ecl-components-ecl-range.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"eui-ecl-components-ecl-range.mjs","sources":["../../components/ecl-range/ecl-range-bubble.component.ts","../../components/ecl-range/ecl-range-bubble.component.html","../../components/ecl-range/ecl-range-value.component.ts","../../components/ecl-range/ecl-range-value.component.html","../../components/ecl-range/events/ecl-range.event.ts","../../components/ecl-range/ecl-range.directive.ts","../../components/ecl-range/index.ts","../../components/ecl-range/eui-ecl-components-ecl-range.ts"],"sourcesContent":["import { Component, ElementRef, HostBinding, inject, signal } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Component representing a bubble tooltip shown above a range input,\n * used to display the current value with ECL styling.\n */\n@Component({\n\tselector: 'ecl-range-bubble',\n\ttemplateUrl: './ecl-range-bubble.component.html',\n})\nexport class EclRangeBubbleComponent extends ECLBaseDirective {\n\tel = inject(ElementRef);\n\n\t/**\n\t * Value displayed inside the bubble.\n\t */\n\tvalue = signal<number>(0);\n\n\t/**\n\t * Horizontal offset in pixels for positioning the bubble.\n\t * Applied as the left style property of the host element.\n\t */\n\tleft = signal<number>(0);\n\n\t@HostBinding('style.left.px')\n\tget leftBinding() {\n\t\treturn this.left();\n\t}\n\n\t/**\n\t * Controls the visibility of the bubble.\n\t * Adds the `ecl-range__bubble--visible` class when true.\n\t */\n\tisVisible = signal(false);\n\n\t/**\n\t * Returns the CSS classes applied to the host element.\n\t * Always includes `ecl-range__bubble` and optionally adds the visible modifier.\n\t */\n\t@HostBinding('class')\n\tget cssClasses(): string {\n\t\treturn [\n\t\t\tsuper.getCssClasses('ecl-range__bubble'),\n\t\t\tthis.isVisible() ? 'ecl-range__bubble--visible' : '',\n\t\t].join(' ').trim();\n\t}\n}\n","<span class=\"ecl-range__value-bubble\">{{ value() }}</span>","import { Component, HostBinding, signal } from '@angular/core';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Component representing the value label displayed next to a range input.\n * Applies ECL styling for the value element.\n */\n@Component({\n    selector: 'ecl-range-value',\n    templateUrl: './ecl-range-value.component.html',\n    imports: [TranslateModule],\n    styles: [\n        `\n            :host {\n                display: block;\n            }\n        `,\n    ],\n})\nexport class EclRangeValueComponent extends ECLBaseDirective {\n    /**\n     * Value to display next to the range input.\n     */\n    value = signal<number>(0);\n\n    /**\n     * ID attribute applied to the component's host element.\n     */\n    id = signal<string>('');\n\n    @HostBinding('attr.id')\n    get idBinding() {\n        return this.id() || null;\n    }\n\n    /**\n     * Returns the CSS classes applied to the host element.\n     * Adds the base `ecl-range__value` class for styling.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-range__value')].join(' ').trim();\n    }\n}\n","{{ 'ecl.common.VALUE' | translate }}: <span class=\"ecl-range__value-current\"> {{ value() }} </span>\n","import { EclBaseEvent } from '@eui/ecl/core';\n\n/**\n * Event emitted by the ECL range directive\n * whenever the range value changes.\n */\nexport class EclRangeEvent extends EclBaseEvent {\n    /**\n     * The current numeric value of the range input.\n     */\n    constructor(public value: number) {\n        super();\n    }\n}\n","import { Directive, ElementRef, HostBinding, HostListener, OnDestroy, OnInit, ViewContainerRef, booleanAttribute, ChangeDetectorRef, inject, input, output, Renderer2, AfterViewInit, ComponentRef } from '@angular/core';\nimport { NgControl } from '@angular/forms';\nimport { Subject, distinctUntilChanged, fromEvent, takeUntil } from 'rxjs';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclRtlService } from '@eui/ecl/core';\nimport { EclRangeValueComponent } from './ecl-range-value.component';\nimport { EclRangeBubbleComponent } from './ecl-range-bubble.component';\nimport { EclRangeEvent } from './events/ecl-range.event';\n\n/**\n * Directive enhancing native input[type=range] with ECL styles and behavior.\n * Adds value display, bubble indicator, RTL support and integration with reactive forms.\n */\n@Directive({\n    selector: 'input[eclRange]',\n})\nexport class EclRangeDirective extends ECLBaseDirective implements OnInit, AfterViewInit, OnDestroy {\n\n    /**\n     * Defines the size of the range component.\n     * Adds a corresponding size class like `ecl-range--m`.\n     */\n    eclSize = input('m');\n\n    /**\n     * Initial value for the range input when used standalone.\n     */\n    value = input<string>();\n\n    /**\n     * ID assigned to the projected ECL range value component.\n     */\n    rangeValueId = input<string>();\n\n    /**\n     * Adds the `ecl-range--invalid` class when true.\n     */\n    isInvalid = input(false, { transform: booleanAttribute });\n\n    /**\n     * Enables or disables the display of a value label.\n     */\n    hasValueLabel = input(true, { transform: booleanAttribute });\n\n    /**\n     * Emits when the range value changes.\n     */\n    rangeChange = output<EclRangeEvent>();\n\n    protected ngControl = inject(NgControl, { optional: true, self: true });\n    private container: HTMLElement;\n    private bubbleRef!: ComponentRef<EclRangeBubbleComponent>;\n    private valueRef!: ComponentRef<EclRangeValueComponent>;\n    private rangeValueComponent: EclRangeValueComponent;\n    private rangeBubbleComponent: EclRangeBubbleComponent;\n    private isRtl = false;\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n    private viewContainerRef = inject(ViewContainerRef);\n    private eclRtlService = inject(EclRtlService);\n    private cd = inject(ChangeDetectorRef);\n    private readonly el = inject(ElementRef<HTMLInputElement>);\n    private readonly renderer = inject(Renderer2);\n\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-range'), this.eclSize() ? `ecl-range--${this.eclSize()}` : ''].join(' ').trim();\n    }\n\n    @HostBinding('class.ecl-range--invalid')\n    get invalidState(): boolean {\n        if (this.ngControl) {\n            return this.ngControl.status === 'INVALID' && this.ngControl.touched;\n        } else {\n            return this.isInvalid();\n        }\n    }\n\n    /**\n     * Handles native input events on the range element\n     * when not used with reactive forms.\n     */\n    @HostListener('input', ['$any($event)'])\n    onInput(evt: InputEvent): void {\n        if (!this.ngControl) {\n            const target = evt.target as HTMLInputElement;\n            this.updateRangeValue(target.value);\n        }\n    }\n\n    /**\n     * Angular lifecycle hook.\n     * Initializes dynamic components and event listeners.\n     */\n    ngOnInit(): void {\n        this.createRangeValueComponent();\n        this.initializeRangeValueComponent();\n        this.initializeEventListeners();\n        this.observeReactiveFormValueChanges();\n        this.handleRtlChangeState();\n    }\n\n    ngAfterViewInit(): void {\n        const input = this.el.nativeElement;\n        const parent = input.parentNode as HTMLElement | null;\n        if (!parent) return;\n\n        // Prevent double-wrapping (e.g., HMR, re-init, etc.)\n        if (parent.classList?.contains('ecl-range-container')) return;\n\n        this.container = this.renderer.createElement('div');\n        this.renderer.addClass(this.container, 'ecl-range-container');\n\n        // Insert wrapper before input\n        this.renderer.insertBefore(parent, this.container, input);\n\n        // Move input inside wrapper\n        this.renderer.removeChild(parent, input);\n        this.renderer.appendChild(this.container, input);\n\n        // Move bubble + value host elements into wrapper too\n        const bubbleEl = this.bubbleRef?.location.nativeElement as HTMLElement | undefined;\n        const valueEl = this.valueRef?.location.nativeElement as HTMLElement | undefined;\n\n        if (bubbleEl?.parentNode) {\n            this.renderer.removeChild(bubbleEl.parentNode, bubbleEl);\n            this.renderer.appendChild(this.container, bubbleEl);\n        }\n\n        if (valueEl?.parentNode) {\n            this.renderer.removeChild(valueEl.parentNode, valueEl);\n            this.renderer.appendChild(this.container, valueEl);\n        }\n\n        requestAnimationFrame(() => this.recalculateBubblePosition());\n    }\n\n    /**\n     * Angular lifecycle hook.\n     * Cleans up subscriptions on destroy.\n     */\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n    }\n\n    private handleRtlChangeState(): void {\n        this.eclRtlService.currentRtlState$.pipe(takeUntil(this.destroy$)).subscribe((rtlState) => {\n            this.isRtl = rtlState;\n        });\n    }\n\n    private createRangeValueComponent(): void {\n        this.bubbleRef = this.viewContainerRef.createComponent(EclRangeBubbleComponent);\n        this.valueRef = this.viewContainerRef.createComponent(EclRangeValueComponent);\n\n        this.rangeBubbleComponent = this.bubbleRef.instance;\n        this.rangeValueComponent = this.valueRef.instance;\n\n        const valueId = this.rangeValueId();\n        if (valueId) {\n            this.rangeValueComponent.id.set(valueId);\n        }\n    }\n\n    private initializeRangeValueComponent(): void {\n        const initialValue = this.ngControl ? this.ngControl.value : this.value();\n        this.updateRangeValue(initialValue);\n    }\n\n    private observeReactiveFormValueChanges(): void {\n        this.ngControl?.valueChanges.pipe(distinctUntilChanged(), takeUntil(this.destroy$)).subscribe((value: string) => {\n            this.updateRangeValue(value);\n        });\n    }\n\n    private updateRangeValue(value: string): void {\n        const numberValue = parseInt(value, 10);\n\n        this.rangeBubbleComponent.value.set(numberValue);\n        this.rangeValueComponent.value.set(numberValue);\n\n        this.rangeChange.emit(new EclRangeEvent(numberValue));\n    }\n\n    private initializeEventListeners(): void {\n        const rangeElement = this.el.nativeElement;\n\n        const mouseEnter$ = fromEvent(rangeElement, 'mouseenter');\n        const mouseLeave$ = fromEvent(rangeElement, 'mouseleave');\n        const rangeValueChange$ = fromEvent(rangeElement, 'input');\n\n          mouseEnter$.pipe(takeUntil(this.destroy$)).subscribe(() => {\n              this.rangeBubbleComponent.isVisible.set(true);\n              this.cd.detectChanges();\n              this.recalculateBubblePosition();\n          });\n\n          rangeValueChange$.pipe(takeUntil(this.destroy$)).subscribe(() => {\n              this.recalculateBubblePosition();\n              });\n\n          mouseLeave$.pipe(takeUntil(this.destroy$)).subscribe(() => {\n              this.rangeBubbleComponent.isVisible.set(false);\n          });\n    }\n\n    private recalculateBubblePosition(): void {\n        let containerLeft = 0;\n        const halfThumbWidth = 8;\n        const halfLabelWidth = this.rangeBubbleComponent.el.nativeElement.offsetWidth / 2;\n\n        const rect = this.el.nativeElement.getBoundingClientRect();\n        const center = rect.width / 2;\n\n        if (this.container) {\n            const containerRect = this.container.getBoundingClientRect();\n            containerLeft = containerRect.left;\n        }\n\n        const min = this.el.nativeElement.min ? Number(this.el.nativeElement.min) : 0;\n        const max = Number(this.el.nativeElement.max);\n        const val = Number(this.el.nativeElement.value);\n\n        const percentOfRange = (val - min) / (max - min);\n\n        const valuePxPosition = percentOfRange * rect.width;\n        const distFromCenter = valuePxPosition - center;\n        const percentDistFromCenter = distFromCenter / center;\n\n        const offset = percentDistFromCenter * halfThumbWidth;\n        const leftFromParent = rect.left - containerLeft;\n        if (this.isRtl) {\n            this.rangeBubbleComponent.left.set(leftFromParent + rect.width - valuePxPosition - halfLabelWidth + offset);\n        }  else {\n            this.rangeBubbleComponent.left.set(leftFromParent + valuePxPosition - halfLabelWidth - offset);\n        }\n    }\n}\n","import { EclRangeBubbleComponent } from './ecl-range-bubble.component';\nimport { EclRangeValueComponent } from './ecl-range-value.component';\nimport { EclRangeDirective } from './ecl-range.directive';\n\nexport * from './ecl-range.directive';\nexport * from './ecl-range-value.component';\nexport * from './ecl-range-bubble.component';\nexport * from './events/ecl-range.event';\n\nexport const EUI_ECL_RANGE = [\n    EclRangeDirective, EclRangeValueComponent, EclRangeBubbleComponent,\n] as const;","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"eui-ecl-components-ecl-range.mjs","sources":["../../components/ecl-range/ecl-range-bubble.component.ts","../../components/ecl-range/ecl-range-bubble.component.html","../../components/ecl-range/ecl-range-value.component.ts","../../components/ecl-range/ecl-range-value.component.html","../../components/ecl-range/events/ecl-range.event.ts","../../components/ecl-range/ecl-range.directive.ts","../../components/ecl-range/index.ts","../../components/ecl-range/eui-ecl-components-ecl-range.ts"],"sourcesContent":["import { Component, ElementRef, HostBinding, inject, signal } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Component representing a bubble tooltip shown above a range input,\n * used to display the current value with ECL styling.\n */\n@Component({\n\tselector: 'ecl-range-bubble',\n\ttemplateUrl: './ecl-range-bubble.component.html',\n})\nexport class EclRangeBubbleComponent extends ECLBaseDirective {\n\tel = inject(ElementRef);\n\n\t/**\n\t * Value displayed inside the bubble.\n\t */\n\tvalue = signal<number>(0);\n\n\t/**\n\t * Horizontal offset in pixels for positioning the bubble.\n\t * Applied as the left style property of the host element.\n\t */\n\tleft = signal<number>(0);\n\n\t@HostBinding('style.left.px')\n\tget leftBinding() {\n\t\treturn this.left();\n\t}\n\n\t/**\n\t * Controls the visibility of the bubble.\n\t * Adds the `ecl-range__bubble--visible` class when true.\n\t */\n\tisVisible = signal(false);\n\n\t/**\n\t * Returns the CSS classes applied to the host element.\n\t * Always includes `ecl-range__bubble` and optionally adds the visible modifier.\n\t */\n\t@HostBinding('class')\n\tget cssClasses(): string {\n\t\treturn [\n\t\t\tsuper.getCssClasses('ecl-range__bubble'),\n\t\t\tthis.isVisible() ? 'ecl-range__bubble--visible' : '',\n\t\t].join(' ').trim();\n\t}\n}\n","<span class=\"ecl-range__value-bubble\">{{ value() }}</span>","import { Component, HostBinding, signal } from '@angular/core';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/**\n * Component representing the value label displayed next to a range input.\n * Applies ECL styling for the value element.\n */\n@Component({\n    selector: 'ecl-range-value',\n    templateUrl: './ecl-range-value.component.html',\n    imports: [TranslateModule],\n    styles: [\n        `\n            :host {\n                display: block;\n            }\n        `,\n    ],\n})\nexport class EclRangeValueComponent extends ECLBaseDirective {\n    /**\n     * Value to display next to the range input.\n     */\n    value = signal<number>(0);\n\n    /**\n     * ID attribute applied to the component's host element.\n     */\n    id = signal<string>('');\n\n    @HostBinding('attr.id')\n    get idBinding() {\n        return this.id() || null;\n    }\n\n    /**\n     * Returns the CSS classes applied to the host element.\n     * Adds the base `ecl-range__value` class for styling.\n     */\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-range__value')].join(' ').trim();\n    }\n}\n","{{ 'ecl.common.VALUE' | translate }}: <span class=\"ecl-range__value-current\"> {{ value() }} </span>\n","import { EclBaseEvent } from '@eui/ecl/core';\n\n/**\n * Event emitted by the ECL range directive\n * whenever the range value changes.\n */\nexport class EclRangeEvent extends EclBaseEvent {\n    /**\n     * The current numeric value of the range input.\n     */\n    constructor(public value: number) {\n        super();\n    }\n}\n","import { Directive, ElementRef, HostBinding, HostListener, OnDestroy, OnInit, ViewContainerRef, booleanAttribute, ChangeDetectorRef, inject, input, output, Renderer2, AfterViewInit, ComponentRef } from '@angular/core';\nimport { NgControl } from '@angular/forms';\nimport { Subject, distinctUntilChanged, fromEvent, takeUntil } from 'rxjs';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclRtlService } from '@eui/ecl/core';\nimport { EclRangeValueComponent } from './ecl-range-value.component';\nimport { EclRangeBubbleComponent } from './ecl-range-bubble.component';\nimport { EclRangeEvent } from './events/ecl-range.event';\n\n/**\n * Directive enhancing native input[type=range] with ECL styles and behavior.\n * Adds value display, bubble indicator, RTL support and integration with reactive forms.\n */\n@Directive({\n    selector: 'input[eclRange]',\n})\nexport class EclRangeDirective extends ECLBaseDirective implements OnInit, AfterViewInit, OnDestroy {\n\n    /**\n     * Defines the size of the range component.\n     * Adds a corresponding size class like `ecl-range--m`.\n     */\n    eclSize = input('m');\n\n    /**\n     * Initial value for the range input when used standalone.\n     */\n    value = input<string>();\n\n    /**\n     * ID assigned to the projected ECL range value component.\n     */\n    rangeValueId = input<string>();\n\n    /**\n     * Adds the `ecl-range--invalid` class when true.\n     */\n    isInvalid = input(false, { transform: booleanAttribute });\n\n    /**\n     * Enables or disables the display of a value label.\n     */\n    hasValueLabel = input(true, { transform: booleanAttribute });\n\n    /**\n     * Emits when the range value changes.\n     */\n    rangeChange = output<EclRangeEvent>();\n\n    protected ngControl = inject(NgControl, { optional: true, self: true });\n    private container: HTMLElement;\n    private bubbleRef!: ComponentRef<EclRangeBubbleComponent>;\n    private valueRef!: ComponentRef<EclRangeValueComponent>;\n    private rangeValueComponent: EclRangeValueComponent;\n    private rangeBubbleComponent: EclRangeBubbleComponent;\n    private isRtl = false;\n    private destroy$: Subject<boolean> = new Subject<boolean>();\n    private viewContainerRef = inject(ViewContainerRef);\n    private eclRtlService = inject(EclRtlService);\n    private cd = inject(ChangeDetectorRef);\n    private readonly el = inject(ElementRef<HTMLInputElement>);\n    private readonly renderer = inject(Renderer2);\n\n    @HostBinding('class')\n    get cssClasses(): string {\n        return [super.getCssClasses('ecl-range'), this.eclSize() ? `ecl-range--${this.eclSize()}` : ''].join(' ').trim();\n    }\n\n    @HostBinding('class.ecl-range--invalid')\n    get invalidState(): boolean {\n        if (this.ngControl) {\n            return this.ngControl.status === 'INVALID' && this.ngControl.touched;\n        } else {\n            return this.isInvalid();\n        }\n    }\n\n    /**\n     * Handles native input events on the range element\n     * when not used with reactive forms.\n     */\n    @HostListener('input', ['$any($event)'])\n    onInput(evt: InputEvent): void {\n        if (!this.ngControl) {\n            const target = evt.target as HTMLInputElement;\n            this.updateRangeValue(target.value);\n        }\n    }\n\n    /**\n     * Angular lifecycle hook.\n     * Initializes dynamic components and event listeners.\n     */\n    ngOnInit(): void {\n        this.createRangeValueComponent();\n        this.initializeRangeValueComponent();\n        this.initializeEventListeners();\n        this.observeReactiveFormValueChanges();\n        this.handleRtlChangeState();\n    }\n\n    ngAfterViewInit(): void {\n        const input = this.el.nativeElement;\n        const parent = input.parentNode as HTMLElement | null;\n        if (!parent) return;\n\n        // Prevent double-wrapping (e.g., HMR, re-init, etc.)\n        if (parent.classList?.contains('ecl-range-container')) return;\n\n        this.container = this.renderer.createElement('div');\n        this.renderer.addClass(this.container, 'ecl-range-container');\n        this.renderer.addClass(this.container, `ecl-range-container--${this.eclSize()}`);\n\n        // Insert wrapper before input\n        this.renderer.insertBefore(parent, this.container, input);\n\n        // Move input inside wrapper\n        this.renderer.removeChild(parent, input);\n        this.renderer.appendChild(this.container, input);\n\n        // Move bubble + value host elements into wrapper too\n        const bubbleEl = this.bubbleRef?.location.nativeElement as HTMLElement | undefined;\n        const valueEl = this.valueRef?.location.nativeElement as HTMLElement | undefined;\n\n        if (bubbleEl?.parentNode) {\n            this.renderer.removeChild(bubbleEl.parentNode, bubbleEl);\n            this.renderer.appendChild(this.container, bubbleEl);\n        }\n\n        if (valueEl?.parentNode) {\n            this.renderer.removeChild(valueEl.parentNode, valueEl);\n            this.renderer.appendChild(this.container, valueEl);\n        }\n\n        requestAnimationFrame(() => this.recalculateBubblePosition());\n    }\n\n    /**\n     * Angular lifecycle hook.\n     * Cleans up subscriptions on destroy.\n     */\n    ngOnDestroy(): void {\n        this.destroy$.next(true);\n        this.destroy$.unsubscribe();\n    }\n\n    private handleRtlChangeState(): void {\n        this.eclRtlService.currentRtlState$.pipe(takeUntil(this.destroy$)).subscribe((rtlState) => {\n            this.isRtl = rtlState;\n        });\n    }\n\n    private createRangeValueComponent(): void {\n        this.bubbleRef = this.viewContainerRef.createComponent(EclRangeBubbleComponent);\n        this.valueRef = this.viewContainerRef.createComponent(EclRangeValueComponent);\n\n        this.rangeBubbleComponent = this.bubbleRef.instance;\n        this.rangeValueComponent = this.valueRef.instance;\n\n        const valueId = this.rangeValueId();\n        if (valueId) {\n            this.rangeValueComponent.id.set(valueId);\n        }\n    }\n\n    private initializeRangeValueComponent(): void {\n        const initialValue = this.ngControl ? this.ngControl.value : this.value();\n        this.updateRangeValue(initialValue);\n    }\n\n    private observeReactiveFormValueChanges(): void {\n        this.ngControl?.valueChanges.pipe(distinctUntilChanged(), takeUntil(this.destroy$)).subscribe((value: string) => {\n            this.updateRangeValue(value);\n        });\n    }\n\n    private updateRangeValue(value: string): void {\n        const numberValue = parseInt(value, 10);\n\n        this.rangeBubbleComponent.value.set(numberValue);\n        this.rangeValueComponent.value.set(numberValue);\n\n        this.rangeChange.emit(new EclRangeEvent(numberValue));\n    }\n\n    private initializeEventListeners(): void {\n        const rangeElement = this.el.nativeElement;\n\n        const mouseEnter$ = fromEvent(rangeElement, 'mouseenter');\n        const mouseLeave$ = fromEvent(rangeElement, 'mouseleave');\n        const rangeValueChange$ = fromEvent(rangeElement, 'input');\n\n          mouseEnter$.pipe(takeUntil(this.destroy$)).subscribe(() => {\n              this.rangeBubbleComponent.isVisible.set(true);\n              this.cd.detectChanges();\n              this.recalculateBubblePosition();\n          });\n\n          rangeValueChange$.pipe(takeUntil(this.destroy$)).subscribe(() => {\n              this.recalculateBubblePosition();\n              });\n\n          mouseLeave$.pipe(takeUntil(this.destroy$)).subscribe(() => {\n              this.rangeBubbleComponent.isVisible.set(false);\n          });\n    }\n\n    private recalculateBubblePosition(): void {\n        let containerLeft = 0;\n        const halfThumbWidth = 8;\n        const halfLabelWidth = this.rangeBubbleComponent.el.nativeElement.offsetWidth / 2;\n\n        const rect = this.el.nativeElement.getBoundingClientRect();\n        const center = rect.width / 2;\n\n        if (this.container) {\n            const containerRect = this.container.getBoundingClientRect();\n            containerLeft = containerRect.left;\n        }\n\n        const min = this.el.nativeElement.min ? Number(this.el.nativeElement.min) : 0;\n        const max = Number(this.el.nativeElement.max);\n        const val = Number(this.el.nativeElement.value);\n\n        const percentOfRange = (val - min) / (max - min);\n\n        const valuePxPosition = percentOfRange * rect.width;\n        const distFromCenter = valuePxPosition - center;\n        const percentDistFromCenter = distFromCenter / center;\n\n        const offset = percentDistFromCenter * halfThumbWidth;\n        const leftFromParent = rect.left - containerLeft;\n        if (this.isRtl) {\n            this.rangeBubbleComponent.left.set(leftFromParent + rect.width - valuePxPosition - halfLabelWidth + offset);\n        }  else {\n            this.rangeBubbleComponent.left.set(leftFromParent + valuePxPosition - halfLabelWidth - offset);\n        }\n    }\n}\n","import { EclRangeBubbleComponent } from './ecl-range-bubble.component';\nimport { EclRangeValueComponent } from './ecl-range-value.component';\nimport { EclRangeDirective } from './ecl-range.directive';\n\nexport * from './ecl-range.directive';\nexport * from './ecl-range-value.component';\nexport * from './ecl-range-bubble.component';\nexport * from './events/ecl-range.event';\n\nexport const EUI_ECL_RANGE = [\n    EclRangeDirective, EclRangeValueComponent, EclRangeBubbleComponent,\n] as const;","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/eui-ecl-components-ecl-tabs.mjs

@@ -214,6 +214,10 @@ class EclTabsComponent extends ECLBaseDirective {
          * Adds `ecl-tabs` class to the host if not using the deprecated selector.
          */
         this.hasClass = !this.isUsingOldSelector;
+        /**
+         * Marks the component as initialized, enabling ECL CSS that depends on this attribute.
+         */
+        this.autoInitialized = 'true';
         /**
          * Class applied to the tab body container.
          */
@@ -222,10 +226,6 @@ class EclTabsComponent extends ECLBaseDirective {
          * Emits an event when a tab is selected.
          */
         this.tabSelect = new EventEmitter();
-        /**
-         * Tabs displayed in the dropdown.
-         */
-        this.dropdownTabs = [];
         /**
          * Tabs displayed in the visible list.
          */
@@ -242,10 +242,6 @@ class EclTabsComponent extends ECLBaseDirective {
          * Indicates whether the mobile breakpoint is active.
          */
         this.isMobileBreakpoint = false;
-        /**
-         * Indicates whether the "more" button is shown.
-         */
-        this.isMoreButtonShow = signal(true, ...(ngDevMode ? [{ debugName: "isMoreButtonShow" }] : /* istanbul ignore next */ []));
         /**
          * Indicates whether the scroll previous button is shown.
          */
@@ -265,7 +261,6 @@ class EclTabsComponent extends ECLBaseDirective {
         this.eclRtlService = inject(EclRtlService);
         this.platformId = inject(PLATFORM_ID);
         this.destroy$ = new Subject();
-        this.isFirstCall = true;
         this.isRtl = false;
         this.TIMEOUT_INTERVAL = 0;
         if (this.isUsingOldSelector) {
@@ -344,18 +339,6 @@ class EclTabsComponent extends ECLBaseDirective {
     onDropdownToggle() {
         this.isDropdownExpanded.set(!this.isDropdownExpanded());
     }
-    /**
-     * Returns the style value for tab list width.
-     */
-    getTabsWidthStyle() {
-        return this.isMobileBreakpoint ? `${this.getTabsWidth()}px` : 'auto';
-    }
-    /**
-     * Calculates total width of all tabs.
-     */
-    getTabsWidth() {
-        return this.tabs.reduce((total, item) => (total += Math.ceil(item.getWidth())), 0);
-    }
     /**
      * Returns the number of tabs hidden in dropdown.
      */
@@ -471,7 +454,7 @@ class EclTabsComponent extends ECLBaseDirective {
                 break;
             }
             case KeyCode.TAB: {
-                this.onTabTab(tab);
+                this.onTabTab();
                 break;
             }
             default: {
@@ -487,7 +470,7 @@ class EclTabsComponent extends ECLBaseDirective {
         this.moreButton.el.nativeElement.blur();
         this.focusOnDropdownTab(index);
     }
-    onTabTab(tab) {
+    onTabTab() {
         this.closeDropdown();
     }
     getCurrentTabIndex(tab) {
@@ -667,42 +650,64 @@ class EclTabsComponent extends ECLBaseDirective {
         }
         this.styleTransform = 'translate3d(0px, 0px, 0px)';
         this.index = 0;
-        this.initMoreBtnWidth();
-        let stopWidth = this.moreBtnWidth + 25;
-        const hiddenItems = [];
-        const listWidth = this.getTabsListWidth();
         this.isScrollNextBtnShow.set(false);
         this.isScrollPrevBtnShow.set(false);
-        this.isMoreButtonShow.set(false);
-        this.tabs.forEach((item, i) => {
+        // Reset list width to auto for measurement (direct DOM, same as ECL)
+        this.tabsList.nativeElement.style.width = 'auto';
+        // Temporarily show the more button to get its actual width
+        this.moreItem.nativeElement.classList.remove('ecl-tabs__item--hidden');
+        this.moreButton.el.nativeElement.classList.remove('ecl-tabs__toggle--hidden');
+        const moreButtonWidth = this.moreButton.el.nativeElement.getBoundingClientRect().width;
+        this.moreItem.nativeElement.classList.add('ecl-tabs__item--hidden');
+        this.moreButton.el.nativeElement.classList.add('ecl-tabs__toggle--hidden');
+        const hiddenItems = [];
+        const listWidth = this.getTabsListWidth();
+        // Measure all items first to check if they fit without the button
+        this.tabs.forEach((item) => {
             item.isHidden = false;
-            if (listWidth >= stopWidth + item.getWidth() && !hiddenItems.includes(i - 1)) {
-                stopWidth += item.getWidth();
-            }
-            else {
+            item.hostElement.classList.remove('ecl-tabs__item--hidden');
+        });
+        const itemWidths = this.tabs.toArray().map((item) => {
+            const itemMargin = parseFloat(getComputedStyle(item.hostElement).marginInlineEnd) || 0;
+            return item.hostElement.getBoundingClientRect().width + itemMargin;
+        });
+        const totalWidth = itemWidths.reduce((sum, w) => sum + w, 0);
+        if (totalWidth > listWidth) {
+            // Reserve space for the more button and hide items that don't fit
+            this.tabs.forEach((item) => {
                 item.isHidden = true;
-                if (item._isActive()) {
-                    this.listTabs[i]._isActive.set(true);
+                item.hostElement.classList.add('ecl-tabs__item--hidden');
+            });
+            let stopWidth = moreButtonWidth;
+            this.tabs.forEach((item, i) => {
+                item.isHidden = false;
+                item.hostElement.classList.remove('ecl-tabs__item--hidden');
+                if (listWidth >= stopWidth + itemWidths[i] && !hiddenItems.includes(i - 1)) {
+                    stopWidth += itemWidths[i];
                 }
-                hiddenItems.push(i);
-            }
-        });
-        this.cd.markForCheck();
+                else {
+                    item.isHidden = true;
+                    item.hostElement.classList.add('ecl-tabs__item--hidden');
+                    if (item._isActive()) {
+                        this.listTabs[i]._isActive.set(true);
+                    }
+                    hiddenItems.push(i);
+                }
+            });
+        }
+        // Toggle the visibility of More button and items in dropdown
         if (!hiddenItems.length) {
-            this.isMoreButtonShow.set(false);
+            this.moreItem.nativeElement.classList.add('ecl-tabs__item--hidden');
+            this.moreButton.el.nativeElement.classList.add('ecl-tabs__toggle--hidden');
             this.setActiveItemForMainTabs();
             this.hideAllDropdownTabs();
         }
         else {
-            this.isMoreButtonShow.set(true);
+            this.moreItem.nativeElement.classList.remove('ecl-tabs__item--hidden');
+            this.moreButton.el.nativeElement.classList.remove('ecl-tabs__toggle--hidden');
             this.setHiddenItemsForDropdownTabs(hiddenItems);
         }
-    }
-    initMoreBtnWidth() {
-        if (this.isFirstCall) {
-            this.moreBtnWidth = this.moreButton.el.nativeElement.getBoundingClientRect().width;
-            this.isFirstCall = false;
-        }
+        this.cd.markForCheck();
     }
     hideAllDropdownTabs() {
         this.listTabs.forEach(item => item.isHidden = true);
@@ -729,13 +734,23 @@ class EclTabsComponent extends ECLBaseDirective {
         });
     }
     handleMobile() {
-        this.isMoreButtonShow.set(false);
         this.isScrollPrevBtnShow.set(false);
         this.isScrollNextBtnShow.set(true);
         this.setAllTabsVisible();
+        // Hide the more item and button (direct DOM, same as ECL)
+        this.moreItem.nativeElement.classList.add('ecl-tabs__item--hidden');
+        this.moreButton.el.nativeElement.classList.add('ecl-tabs__toggle--hidden');
+        // Reset to auto so scrollWidth reflects the natural content width
+        this.tabsList.nativeElement.style.width = 'auto';
+        // Remove hidden class directly from DOM elements
+        this.tabs.forEach((item) => {
+            item.hostElement.classList.remove('ecl-tabs__item--hidden');
+        });
+        // Use scrollWidth to also include item margins
+        this.tabsList.nativeElement.style.width = `${this.tabsList.nativeElement.scrollWidth}px`;
     }
     setAllTabsVisible() {
-        this.tabs.forEach((item, i) => {
+        this.tabs.forEach((item) => {
             item.isHidden = false;
         });
     }
@@ -766,14 +781,17 @@ class EclTabsComponent extends ECLBaseDirective {
         }).observe(this.tabsList.nativeElement);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: EclTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: EclTabsComponent, isStandalone: true, selector: "div[eclTabs]", inputs: { bodyClass: "bodyClass" }, outputs: { tabSelect: "tabSelect" }, host: { listeners: { "document:click": "onClick($event.target)" }, properties: { "class.ecl-tabs": "this.hasClass" } }, queries: [{ propertyName: "tabs", predicate: i0.forwardRef(() => EclTabComponent) }], viewQueries: [{ propertyName: "tabsList", first: true, predicate: ["tabsList"], descendants: true }, { propertyName: "moreButton", first: true, predicate: ["moreButton"], descendants: true }, { propertyName: "btnPrev", first: true, predicate: ["btnPrev"], descendants: true }, { propertyName: "btnNext", first: true, predicate: ["btnNext"], descendants: true }, { propertyName: "dropdownList", first: true, predicate: ["dropdownList"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (isUsingOldSelector) {\n<div class=\"ecl-tabs\">\n    <ng-container *ngTemplateOutlet=\"eclTabsTemplate\"></ng-container>\n</div>\n} @else {\n<ng-container *ngTemplateOutlet=\"eclTabsTemplate\"></ng-container>\n}\n\n<ng-template #eclTabsTemplate>\n    <div class=\"ecl-tabs__container\" [class.ecl-tabs__container--right]=\"isScrollNextBtnShow()\"\n        [class.ecl-tabs__container--left]=\"isScrollPrevBtnShow()\">\n        <div class=\"ecl-tabs__list\" role=\"tablist\" #tabsList [style.width]=\"getTabsWidthStyle()\"\n            [style.transform]=\"styleTransform\" [style.transition-duration]=\"getTransitionDuration()\">\n            <ng-content select=\"ecl-tab, [eclTab]\"></ng-content>\n            <div class=\"ecl-tabs__item ecl-tabs__item--more\" [class.ecl-tabs__item--hidden]=\"!isMoreButtonShow\">\n                @if (listTabs.length > 0) {\n                <div class=\"ecl-tabs__dropdown\" [class.ecl-tabs__dropdown--show]=\"isDropdownExpanded()\">\n                    <div class=\"ecl-tabs__dropdown-list\" #dropdownList>\n                        @for (tab of listTabs; track tab.id; let i = $index) {\n                        <div eclTab [isActive]=\"tab._isActive()\" [isHidden]=\"tab.isHidden\" (click)=\"onTabSelect(tab)\"\n                            (keydown)=\"onTabKeydown($event, tab)\">\n                            <ecl-tab-label>{{ getTabLabel(i) }}</ecl-tab-label>\n                        </div>\n                        }\n                    </div>\n                </div>\n                }\n            </div>\n        </div>\n        <button #moreButton eclButton class=\"ecl-tabs__toggle\" variant=\"tertiary\" [tabindex]=\"customTabIndex\"\n            [attr.aria-expanded]=\"isDropdownExpanded()\" [class.ecl-tabs__toggle--active]=\"isMoreButtonActive\"\n            (click)=\"onDropdownToggle()\" [class.ecl-tabs__toggle--hidden]=\"!isMoreButtonShow()\" (focus)=\"onMoreButtonFocus()\">\n            <span eclButtonLabel>\n                {{ 'ecl.common.MORE' | translate }}\n                ({{ getHiddenTabsCount() }})\n            </span>\n            <ecl-icon icon=\"corner-arrow\" transform=\"rotate-180\" size=\"fluid\"></ecl-icon>\n        </button>\n    </div>\n\n    <div class=\"ecl-tabs__controls\">\n        <button #btnPrev eclButton variant=\"tertiary\" isIconOnly class=\"ecl-tabs__prev\"\n            [style.display]=\"isScrollPrevBtnShow() ? 'flex' : 'none'\" (click)=\"onScrollPrev()\">\n            <span eclButtonLabel>{{ 'ecl.common.PREVIOUS' | translate }}</span>\n            <ecl-icon icon=\"corner-arrow\" transform=\"rotate-270\" size=\"s\" class=\"\"> </ecl-icon>\n        </button>\n        <button #btnNext eclButton variant=\"tertiary\" isIconOnly class=\"ecl-tabs__next\"\n            [style.display]=\"isScrollNextBtnShow() ? 'flex' : 'none'\" (click)=\"onScrollNext()\">\n            <span eclButtonLabel>{{ 'ecl.common.NEXT' | translate }}</span>\n            <ecl-icon icon=\"corner-arrow\" transform=\"rotate-90\" size=\"s\" class=\"\"> </ecl-icon>\n        </button>\n    </div>\n</ng-template>\n\n@for (tab of tabs.toArray(); track tab.tabLabel) {\n@if (tab._isActive()) {\n<div id=\"{{tab.finalId()}}-tabpanel\" role=\"tabpanel\" aria-labelledby=\"{{tab.finalId()}}-link\" class=\"{{ bodyClass }}\">\n    <ng-container *ngTemplateOutlet=\"tab.contentTemplate\"></ng-container>\n</div>\n}\n}\n@for (tab of listTabs; track tab.tabLabel) {\n@if (tab._isActive()) {\n<div id=\"{{tab.finalId()}}-tabpanel\" role=\"tabpanel\" aria-labelledby=\"{{tab.finalId()}}-link\" class=\"{{ bodyClass }}\">\n    <ng-container *ngTemplateOutlet=\"tab.contentTemplate\"></ng-container>\n</div>\n}\n}", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$1.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "eclStyle", "size", "containerStyleClass"] }, { kind: "directive", type: i1$1.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i2.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "component", type: EclTabComponent, selector: "div[eclTab]", inputs: ["id", "anchorExtraClasses", "isHidden", "isActive"], outputs: ["selectTab", "keydownTab"] }, { kind: "component", type: EclTabLabelComponent, selector: "ecl-tab-label" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: EclTabsComponent, isStandalone: true, selector: "div[eclTabs]", inputs: { bodyClass: "bodyClass" }, outputs: { tabSelect: "tabSelect" }, host: { listeners: { "document:click": "onClick($event.target)" }, properties: { "class.ecl-tabs": "this.hasClass", "attr.data-ecl-auto-initialized": "this.autoInitialized" } }, queries: [{ propertyName: "tabs", predicate: i0.forwardRef(() => EclTabComponent) }], viewQueries: [{ propertyName: "tabsList", first: true, predicate: ["tabsList"], descendants: true }, { propertyName: "moreButton", first: true, predicate: ["moreButton"], descendants: true }, { propertyName: "btnPrev", first: true, predicate: ["btnPrev"], descendants: true }, { propertyName: "btnNext", first: true, predicate: ["btnNext"], descendants: true }, { propertyName: "dropdownList", first: true, predicate: ["dropdownList"], descendants: true }, { propertyName: "moreItem", first: true, predicate: ["moreItem"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (isUsingOldSelector) {\n<div class=\"ecl-tabs\">\n    <ng-container *ngTemplateOutlet=\"eclTabsTemplate\"></ng-container>\n</div>\n} @else {\n<ng-container *ngTemplateOutlet=\"eclTabsTemplate\"></ng-container>\n}\n\n<ng-template #eclTabsTemplate>\n    <div class=\"ecl-tabs__container\" [class.ecl-tabs__container--right]=\"isScrollNextBtnShow()\"\n        [class.ecl-tabs__container--left]=\"isScrollPrevBtnShow()\">\n        <div class=\"ecl-tabs__list\" role=\"tablist\" #tabsList\n            [style.transform]=\"styleTransform\" [style.transition-duration]=\"getTransitionDuration()\">\n            <ng-content select=\"ecl-tab, [eclTab]\"></ng-content>\n            <div class=\"ecl-tabs__item ecl-tabs__item--more\" #moreItem>\n                @if (listTabs.length > 0) {\n                <div class=\"ecl-tabs__dropdown\" [class.ecl-tabs__dropdown--show]=\"isDropdownExpanded()\">\n                    <div class=\"ecl-tabs__dropdown-list\" #dropdownList>\n                        @for (tab of listTabs; track tab.id; let i = $index) {\n                        <div eclTab [isActive]=\"tab._isActive()\" [isHidden]=\"tab.isHidden\" (click)=\"onTabSelect(tab)\"\n                            (keydown)=\"onTabKeydown($event, tab)\">\n                            <ecl-tab-label>{{ getTabLabel(i) }}</ecl-tab-label>\n                        </div>\n                        }\n                    </div>\n                </div>\n                }\n            </div>\n        </div>\n        <button #moreButton eclButton class=\"ecl-tabs__toggle\" variant=\"tertiary\" [tabindex]=\"customTabIndex\"\n            [attr.aria-expanded]=\"isDropdownExpanded()\" [class.ecl-tabs__toggle--active]=\"isMoreButtonActive\"\n            (click)=\"onDropdownToggle()\" (focus)=\"onMoreButtonFocus()\">\n            <span eclButtonLabel>\n                {{ 'ecl.common.MORE' | translate }}\n                ({{ getHiddenTabsCount() }})\n            </span>\n            <ecl-icon icon=\"corner-arrow\" transform=\"rotate-180\" size=\"fluid\"></ecl-icon>\n        </button>\n    </div>\n\n    <div class=\"ecl-tabs__controls\">\n        <button #btnPrev eclButton variant=\"tertiary\" isIconOnly class=\"ecl-tabs__prev\"\n            [style.display]=\"isScrollPrevBtnShow() ? 'flex' : 'none'\" (click)=\"onScrollPrev()\">\n            <span eclButtonLabel>{{ 'ecl.common.PREVIOUS' | translate }}</span>\n            <ecl-icon icon=\"corner-arrow\" transform=\"rotate-270\" size=\"s\" class=\"\"> </ecl-icon>\n        </button>\n        <button #btnNext eclButton variant=\"tertiary\" isIconOnly class=\"ecl-tabs__next\"\n            [style.display]=\"isScrollNextBtnShow() ? 'flex' : 'none'\" (click)=\"onScrollNext()\">\n            <span eclButtonLabel>{{ 'ecl.common.NEXT' | translate }}</span>\n            <ecl-icon icon=\"corner-arrow\" transform=\"rotate-90\" size=\"s\" class=\"\"> </ecl-icon>\n        </button>\n    </div>\n</ng-template>\n\n@for (tab of tabs.toArray(); track tab.tabLabel) {\n@if (tab._isActive()) {\n<div id=\"{{tab.finalId()}}-tabpanel\" role=\"tabpanel\" aria-labelledby=\"{{tab.finalId()}}-link\" class=\"{{ bodyClass }}\">\n    <ng-container *ngTemplateOutlet=\"tab.contentTemplate\"></ng-container>\n</div>\n}\n}\n@for (tab of listTabs; track tab.tabLabel) {\n@if (tab._isActive()) {\n<div id=\"{{tab.finalId()}}-tabpanel\" role=\"tabpanel\" aria-labelledby=\"{{tab.finalId()}}-link\" class=\"{{ bodyClass }}\">\n    <ng-container *ngTemplateOutlet=\"tab.contentTemplate\"></ng-container>\n</div>\n}\n}", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$1.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "eclStyle", "size", "containerStyleClass"] }, { kind: "directive", type: i1$1.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i2.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "component", type: EclTabComponent, selector: "div[eclTab]", inputs: ["id", "anchorExtraClasses", "isHidden", "isActive"], outputs: ["selectTab", "keydownTab"] }, { kind: "component", type: EclTabLabelComponent, selector: "ecl-tab-label" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: EclTabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'div[eclTabs]', imports: [TranslateModule, NgTemplateOutlet, ...EUI_ECL_BUTTON, ...EUI_ECL_ICON, EclTabComponent, EclTabLabelComponent], encapsulation: ViewEncapsulation.None, template: "@if (isUsingOldSelector) {\n<div class=\"ecl-tabs\">\n    <ng-container *ngTemplateOutlet=\"eclTabsTemplate\"></ng-container>\n</div>\n} @else {\n<ng-container *ngTemplateOutlet=\"eclTabsTemplate\"></ng-container>\n}\n\n<ng-template #eclTabsTemplate>\n    <div class=\"ecl-tabs__container\" [class.ecl-tabs__container--right]=\"isScrollNextBtnShow()\"\n        [class.ecl-tabs__container--left]=\"isScrollPrevBtnShow()\">\n        <div class=\"ecl-tabs__list\" role=\"tablist\" #tabsList [style.width]=\"getTabsWidthStyle()\"\n            [style.transform]=\"styleTransform\" [style.transition-duration]=\"getTransitionDuration()\">\n            <ng-content select=\"ecl-tab, [eclTab]\"></ng-content>\n            <div class=\"ecl-tabs__item ecl-tabs__item--more\" [class.ecl-tabs__item--hidden]=\"!isMoreButtonShow\">\n                @if (listTabs.length > 0) {\n                <div class=\"ecl-tabs__dropdown\" [class.ecl-tabs__dropdown--show]=\"isDropdownExpanded()\">\n                    <div class=\"ecl-tabs__dropdown-list\" #dropdownList>\n                        @for (tab of listTabs; track tab.id; let i = $index) {\n                        <div eclTab [isActive]=\"tab._isActive()\" [isHidden]=\"tab.isHidden\" (click)=\"onTabSelect(tab)\"\n                            (keydown)=\"onTabKeydown($event, tab)\">\n                            <ecl-tab-label>{{ getTabLabel(i) }}</ecl-tab-label>\n                        </div>\n                        }\n                    </div>\n                </div>\n                }\n            </div>\n        </div>\n        <button #moreButton eclButton class=\"ecl-tabs__toggle\" variant=\"tertiary\" [tabindex]=\"customTabIndex\"\n            [attr.aria-expanded]=\"isDropdownExpanded()\" [class.ecl-tabs__toggle--active]=\"isMoreButtonActive\"\n            (click)=\"onDropdownToggle()\" [class.ecl-tabs__toggle--hidden]=\"!isMoreButtonShow()\" (focus)=\"onMoreButtonFocus()\">\n            <span eclButtonLabel>\n                {{ 'ecl.common.MORE' | translate }}\n                ({{ getHiddenTabsCount() }})\n            </span>\n            <ecl-icon icon=\"corner-arrow\" transform=\"rotate-180\" size=\"fluid\"></ecl-icon>\n        </button>\n    </div>\n\n    <div class=\"ecl-tabs__controls\">\n        <button #btnPrev eclButton variant=\"tertiary\" isIconOnly class=\"ecl-tabs__prev\"\n            [style.display]=\"isScrollPrevBtnShow() ? 'flex' : 'none'\" (click)=\"onScrollPrev()\">\n            <span eclButtonLabel>{{ 'ecl.common.PREVIOUS' | translate }}</span>\n            <ecl-icon icon=\"corner-arrow\" transform=\"rotate-270\" size=\"s\" class=\"\"> </ecl-icon>\n        </button>\n        <button #btnNext eclButton variant=\"tertiary\" isIconOnly class=\"ecl-tabs__next\"\n            [style.display]=\"isScrollNextBtnShow() ? 'flex' : 'none'\" (click)=\"onScrollNext()\">\n            <span eclButtonLabel>{{ 'ecl.common.NEXT' | translate }}</span>\n            <ecl-icon icon=\"corner-arrow\" transform=\"rotate-90\" size=\"s\" class=\"\"> </ecl-icon>\n        </button>\n    </div>\n</ng-template>\n\n@for (tab of tabs.toArray(); track tab.tabLabel) {\n@if (tab._isActive()) {\n<div id=\"{{tab.finalId()}}-tabpanel\" role=\"tabpanel\" aria-labelledby=\"{{tab.finalId()}}-link\" class=\"{{ bodyClass }}\">\n    <ng-container *ngTemplateOutlet=\"tab.contentTemplate\"></ng-container>\n</div>\n}\n}\n@for (tab of listTabs; track tab.tabLabel) {\n@if (tab._isActive()) {\n<div id=\"{{tab.finalId()}}-tabpanel\" role=\"tabpanel\" aria-labelledby=\"{{tab.finalId()}}-link\" class=\"{{ bodyClass }}\">\n    <ng-container *ngTemplateOutlet=\"tab.contentTemplate\"></ng-container>\n</div>\n}\n}" }]
+            args: [{ selector: 'div[eclTabs]', imports: [TranslateModule, NgTemplateOutlet, ...EUI_ECL_BUTTON, ...EUI_ECL_ICON, EclTabComponent, EclTabLabelComponent], encapsulation: ViewEncapsulation.None, template: "@if (isUsingOldSelector) {\n<div class=\"ecl-tabs\">\n    <ng-container *ngTemplateOutlet=\"eclTabsTemplate\"></ng-container>\n</div>\n} @else {\n<ng-container *ngTemplateOutlet=\"eclTabsTemplate\"></ng-container>\n}\n\n<ng-template #eclTabsTemplate>\n    <div class=\"ecl-tabs__container\" [class.ecl-tabs__container--right]=\"isScrollNextBtnShow()\"\n        [class.ecl-tabs__container--left]=\"isScrollPrevBtnShow()\">\n        <div class=\"ecl-tabs__list\" role=\"tablist\" #tabsList\n            [style.transform]=\"styleTransform\" [style.transition-duration]=\"getTransitionDuration()\">\n            <ng-content select=\"ecl-tab, [eclTab]\"></ng-content>\n            <div class=\"ecl-tabs__item ecl-tabs__item--more\" #moreItem>\n                @if (listTabs.length > 0) {\n                <div class=\"ecl-tabs__dropdown\" [class.ecl-tabs__dropdown--show]=\"isDropdownExpanded()\">\n                    <div class=\"ecl-tabs__dropdown-list\" #dropdownList>\n                        @for (tab of listTabs; track tab.id; let i = $index) {\n                        <div eclTab [isActive]=\"tab._isActive()\" [isHidden]=\"tab.isHidden\" (click)=\"onTabSelect(tab)\"\n                            (keydown)=\"onTabKeydown($event, tab)\">\n                            <ecl-tab-label>{{ getTabLabel(i) }}</ecl-tab-label>\n                        </div>\n                        }\n                    </div>\n                </div>\n                }\n            </div>\n        </div>\n        <button #moreButton eclButton class=\"ecl-tabs__toggle\" variant=\"tertiary\" [tabindex]=\"customTabIndex\"\n            [attr.aria-expanded]=\"isDropdownExpanded()\" [class.ecl-tabs__toggle--active]=\"isMoreButtonActive\"\n            (click)=\"onDropdownToggle()\" (focus)=\"onMoreButtonFocus()\">\n            <span eclButtonLabel>\n                {{ 'ecl.common.MORE' | translate }}\n                ({{ getHiddenTabsCount() }})\n            </span>\n            <ecl-icon icon=\"corner-arrow\" transform=\"rotate-180\" size=\"fluid\"></ecl-icon>\n        </button>\n    </div>\n\n    <div class=\"ecl-tabs__controls\">\n        <button #btnPrev eclButton variant=\"tertiary\" isIconOnly class=\"ecl-tabs__prev\"\n            [style.display]=\"isScrollPrevBtnShow() ? 'flex' : 'none'\" (click)=\"onScrollPrev()\">\n            <span eclButtonLabel>{{ 'ecl.common.PREVIOUS' | translate }}</span>\n            <ecl-icon icon=\"corner-arrow\" transform=\"rotate-270\" size=\"s\" class=\"\"> </ecl-icon>\n        </button>\n        <button #btnNext eclButton variant=\"tertiary\" isIconOnly class=\"ecl-tabs__next\"\n            [style.display]=\"isScrollNextBtnShow() ? 'flex' : 'none'\" (click)=\"onScrollNext()\">\n            <span eclButtonLabel>{{ 'ecl.common.NEXT' | translate }}</span>\n            <ecl-icon icon=\"corner-arrow\" transform=\"rotate-90\" size=\"s\" class=\"\"> </ecl-icon>\n        </button>\n    </div>\n</ng-template>\n\n@for (tab of tabs.toArray(); track tab.tabLabel) {\n@if (tab._isActive()) {\n<div id=\"{{tab.finalId()}}-tabpanel\" role=\"tabpanel\" aria-labelledby=\"{{tab.finalId()}}-link\" class=\"{{ bodyClass }}\">\n    <ng-container *ngTemplateOutlet=\"tab.contentTemplate\"></ng-container>\n</div>\n}\n}\n@for (tab of listTabs; track tab.tabLabel) {\n@if (tab._isActive()) {\n<div id=\"{{tab.finalId()}}-tabpanel\" role=\"tabpanel\" aria-labelledby=\"{{tab.finalId()}}-link\" class=\"{{ bodyClass }}\">\n    <ng-container *ngTemplateOutlet=\"tab.contentTemplate\"></ng-container>\n</div>\n}\n}" }]
         }], ctorParameters: () => [], propDecorators: { hasClass: [{
                 type: HostBinding,
                 args: ['class.ecl-tabs']
+            }], autoInitialized: [{
+                type: HostBinding,
+                args: ['attr.data-ecl-auto-initialized']
             }], bodyClass: [{
                 type: Input
             }], tabSelect: [{
@@ -796,6 +814,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
             }], dropdownList: [{
                 type: ViewChild,
                 args: ['dropdownList']
+            }], moreItem: [{
+                type: ViewChild,
+                args: ['moreItem']
             }], onClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event.target']]