@fundamental-ngx/core 0.35.5-rc.6 → 0.35.5

package/fesm2020/fundamental-ngx-core-split-button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"fundamental-ngx-core-split-button.mjs","sources":["../../../../libs/core/src/lib/split-button/split-button-utils/split-button.directives.ts","../../../../libs/core/src/lib/split-button/split-button.component.ts","../../../../libs/core/src/lib/split-button/split-button.component.html","../../../../libs/core/src/lib/split-button/deprecated-split-button-compact.directive.ts","../../../../libs/core/src/lib/split-button/split-button.module.ts","../../../../libs/core/src/lib/split-button/fundamental-ngx-core-split-button.ts"],"sourcesContent":["import { Directive } from '@angular/core';\n\n/**\n * Directive used to identify the template which will populate the main action button.\n * Used to achieve complex buttons that require more than a string.\n *```html\n *    <fd-button-split>\n *        <ng-template fd-button-split-action-title>\n *            <p>Paragraph 1</p>\n *            <p>Paragraph 2</p>\n *        </ng-template>\n *        <fd-menu>\n *             <li fd-menu-item>\n *               <a fd-menu-interactive [routerLink]=\"'/'\">\n *                   <span fd-menu-title>option2</span>\n *               </a>\n *            </li>\n *            <li fd-menu-item>\n *               <a fd-menu-interactive [routerLink]=\"'/'\">\n *                   <span fd-menu-title>option2</span>\n *               </a>\n *            </li>\n *        </fd-menu>\n *    </fd-button-split>\n *</fd-button-split>\n *```\n */\n@Directive({\n    // TODO to be discussed\n    // eslint-disable-next-line @angular-eslint/directive-selector\n    selector: '[fd-split-button-action-title]'\n})\n// eslint-disable-next-line @angular-eslint/directive-class-suffix\nexport class SplitButtonActionTitle {}\n","import {\n    AfterContentInit,\n    AfterViewInit,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ContentChild,\n    ElementRef,\n    EventEmitter,\n    Input,\n    OnChanges,\n    OnDestroy,\n    Output,\n    Renderer2,\n    SimpleChanges,\n    TemplateRef,\n    ViewChild,\n    ViewEncapsulation\n} from '@angular/core';\nimport { Subscription, takeUntil, tap } from 'rxjs';\nimport { first } from 'rxjs/operators';\nimport { ButtonType } from '@fundamental-ngx/core/button';\nimport { MenuComponent, MenuItemComponent } from '@fundamental-ngx/core/menu';\n\nimport { SplitButtonActionTitle } from './split-button-utils/split-button.directives';\nimport { MainAction } from './main-action';\nimport { ContentDensityObserver, contentDensityObserverProviders } from '@fundamental-ngx/core/content-density';\nimport { DestroyedService } from '@fundamental-ngx/core/utils';\n\nexport const splitButtonTextClass = 'fd-button-split__text';\nexport const splitButtonTextCompactClass = 'fd-button-split__text--compact';\nconst splitButtonTextClasses = [splitButtonTextClass, splitButtonTextCompactClass];\n\n/**\n * Split Button component, used to enhance standard HTML button and add possibility to put some dropdown with\n * additional options.\n *\n * ```html\n * <fd-split-button>\n *   <fd-menu>\n *       <li fd-menu-item>\n *           <div fd-menu-interactive>\n *               <span fd-menu-title>Option 1</span>\n *           </div>\n *       </li>\n *       <li fd-menu-item>\n *           <div fd-menu-interactive>\n *               <span fd-menu-title>Option 2</span>\n *           </div>\n *       </li>\n *    </fd-menu>\n *</fd-split-button>\n * ```\n */\n@Component({\n    selector: 'fd-split-button',\n    templateUrl: 'split-button.component.html',\n    styleUrls: ['./split-button.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    providers: [contentDensityObserverProviders()]\n})\nexport class SplitButtonComponent implements AfterContentInit, OnChanges, OnDestroy, AfterViewInit {\n    /** The icon to include in the button. See the icon page for the list of icons. */\n    @Input()\n    glyph = 'slim-arrow-down';\n\n    /** The icon to include in the button. See the icon page for the list of icons. */\n    @Input()\n    disabled: boolean;\n\n    /** @deprecated The Title for main action button. This will be deprecated as an input but will remain a property on this component. */\n    @Input()\n    mainActionTitle: string;\n\n    /** The type of the button. Types include 'standard', 'positive', 'medium', and 'negative'.\n     * Leave empty for default (Action button).'*/\n    @Input()\n    fdType: ButtonType;\n\n    /** Aria-label attribute used to describe expand button */\n    @Input()\n    expandButtonAriaLabel = 'More actions';\n\n    /** Title attribute used to describe expand button */\n    @Input()\n    expandButtonTitle: string;\n\n    /** Selected menu item */\n    @Input()\n    selected: MenuItemComponent;\n\n    /** Whether or not the element should keep a fixed width. The width could change if the text changes length. */\n    @Input()\n    fixedWidth = true;\n\n    /**\n     * The object that contains the mainActionTitle, keepMainAction option and the callback function that should be\n     * executed when the button is clicked.\n     */\n    @Input()\n    mainAction: MainAction;\n\n    /** aria-label attribute */\n    @Input()\n    arialLabel = 'Split button';\n\n    /** Event sent when primary button is clicked */\n    @Output()\n    readonly primaryButtonClicked: EventEmitter<Event> = new EventEmitter<Event>();\n\n    /** @hidden */\n    @ContentChild(SplitButtonActionTitle, { read: TemplateRef })\n    titleTemplate: TemplateRef<any> | null;\n\n    /** @hidden */\n    @ContentChild(MenuComponent)\n    menu: MenuComponent;\n\n    /** @hidden */\n    @ViewChild('mainActionButton', { read: ElementRef })\n    mainActionBtn: ElementRef;\n\n    /** @hidden */\n    @ViewChild('menuActionButton', { read: ElementRef })\n    menuActionBtn: ElementRef;\n\n    /** @hidden */\n    mainButtonWidth: string;\n\n    /** @hidden */\n    get typeClass(): string {\n        return this.fdType ? `fd-button-split--${this.fdType}` : '';\n    }\n\n    /** @hidden */\n    private _menuItemSubscriptions = new Subscription();\n\n    /** @hidden */\n    private _menuSubscription = new Subscription();\n\n    /** @hidden */\n    private _contentDensitySubscription = new Subscription();\n\n    /** @hidden */\n    private _menuActivePathSubscription = new Subscription();\n\n    /** @hidden */\n    constructor(\n        private _cdRef: ChangeDetectorRef,\n        private _destroy$: DestroyedService,\n        private _contentDensityObserver: ContentDensityObserver,\n        private _renderer: Renderer2\n    ) {}\n\n    /** @hidden Emits event when main button is clicked */\n    onMainButtonClick(event: MouseEvent): void {\n        this.primaryButtonClicked.emit(event);\n        if (this.selected) {\n            this.selected.elementRef.nativeElement.click();\n        } else if (this.mainAction && this.mainAction.callback) {\n            this.mainAction.callback();\n        }\n        event.stopPropagation();\n    }\n\n    /** @hidden */\n    ngAfterContentInit(): void {\n        this.menu.menuItems.forEach((item) => {\n            item.menuInteractive._fromSplitButton = true;\n        });\n        this._setupMenuSubscription();\n        this._setupMenuItemSubscriptions();\n        this._handleMainActionObject();\n\n        if (!this.mainActionTitle && !this.titleTemplate && !this.selected) {\n            this.selectMenuItem(this.menu.menuItems.first);\n        } else if (!this.mainActionTitle && this.selected) {\n            this.selectMenuItem(this.selected);\n        }\n\n        this._menuActivePathSubscription.add(\n            this.menu.activePath.subscribe((items) => {\n                const lastItem = items[items.length - 1];\n                if (lastItem && !lastItem.submenu) {\n                    this.menu.close();\n                    this._focusTriggerElement();\n                }\n            })\n        );\n    }\n\n    /** @hidden */\n    ngAfterViewInit(): void {\n        this._contentDensityObserver.isCompact$\n            .pipe(tap(this._addButtonTextClass), takeUntil(this._destroy$))\n            .subscribe();\n    }\n\n    /** @hidden */\n    ngOnChanges(changes: SimpleChanges): void {\n        if ('selected' in changes) {\n            this.selectMenuItem(this.selected);\n        }\n        if ('mainAction' in changes) {\n            this._handleMainActionObject();\n        }\n    }\n\n    /** @hidden */\n    ngOnDestroy(): void {\n        this._menuItemSubscriptions.unsubscribe();\n        this._menuSubscription.unsubscribe();\n        this._contentDensitySubscription.unsubscribe();\n        this._menuActivePathSubscription.unsubscribe();\n    }\n\n    /** Function called to select a menu item for the split button. */\n    selectMenuItem(menuItem: MenuItemComponent): void {\n        if (menuItem && (!this.mainAction || !this.mainAction.keepMainAction)) {\n            menuItem.setSelected(true);\n        }\n    }\n\n    /**\n     * Wrapper gets focused programmatically by menu\n     * when the \"escape\" button is pressed.\n     * In this case we need to transit focus to the \"more actions\" button\n     */\n    _onGroupFocused(): void {\n        this._focusTriggerElement();\n    }\n\n    /** @hidden */\n    private _getMainButtonWidth(): void {\n        if (this.mainActionBtn && this.mainActionBtn.nativeElement) {\n            this.mainButtonWidth = this.mainActionBtn.nativeElement.getBoundingClientRect().width + 'px';\n        }\n    }\n\n    /** @hidden */\n    private _setupMenuItemSubscriptions(): void {\n        this.menu.menuItems.forEach((menuItem) => {\n            menuItem.onSelect.pipe(first()).subscribe(() => {\n                if (this.fixedWidth) {\n                    this._getMainButtonWidth();\n                }\n            });\n            this._menuItemSubscriptions.add(\n                menuItem.onSelect.subscribe(() => {\n                    this._handleMenuItemSelection(menuItem);\n                })\n            );\n        });\n    }\n\n    /** @hidden */\n    private _handleMenuItemSelection(menuItem: MenuItemComponent): void {\n        if (!this.mainAction || !this.mainAction.keepMainAction) {\n            this.selected = menuItem;\n            this.menu.menuItems.forEach((item) => {\n                item.setSelected(false, true);\n            });\n            menuItem.setSelected(true, true);\n            this.titleTemplate = null;\n            this.mainActionTitle = menuItem.menuItemTitle.title;\n            this._cdRef.detectChanges();\n        }\n    }\n\n    /** @hidden */\n    private _setupMenuSubscription(): void {\n        this._menuSubscription = this.menu.menuItems.changes.subscribe(() => {\n            this._menuItemSubscriptions.unsubscribe();\n            this._menuItemSubscriptions.closed = false;\n            this._setupMenuItemSubscriptions();\n        });\n        // call markForCheck once menu open state gets changed\n        this._menuSubscription.add(this.menu.isOpenChange.subscribe(() => this._cdRef.markForCheck()));\n    }\n\n    /** @hidden */\n    private _handleMainActionObject(): void {\n        if (this.mainAction && typeof this.mainAction.mainActionTitle === 'string') {\n            this.mainActionTitle = this.mainAction.mainActionTitle;\n        } else if (this.mainAction && this.mainAction.mainActionTitle instanceof TemplateRef) {\n            this.titleTemplate = this.mainAction.mainActionTitle;\n        }\n    }\n\n    /** @hidden */\n    private _addButtonTextClass = (compact: boolean): void => {\n        const textSpanElement = this.mainActionBtn?.nativeElement.querySelector('.fd-button__text');\n        if (!textSpanElement) {\n            return;\n        }\n        splitButtonTextClasses.forEach((_class) => this._renderer.removeClass(textSpanElement, _class));\n        if (compact) {\n            this._renderer.addClass(textSpanElement, splitButtonTextCompactClass);\n        } else {\n            this._renderer.addClass(textSpanElement, splitButtonTextClass);\n        }\n    };\n\n    /** @hidden */\n    private _focusTriggerElement(): void {\n        this.menuActionBtn?.nativeElement.focus();\n    }\n}\n","<div\n    class=\"fd-button-split fd-has-margin-right-small\"\n    [ngClass]=\"typeClass\"\n    role=\"group\"\n    tabindex=\"-1\"\n    [attr.aria-label]=\"arialLabel\"\n    [fdMenuTrigger]=\"menu\"\n    (focus)=\"_onGroupFocused()\"\n>\n    <button\n        fd-button\n        #mainActionButton\n        [label]=\"mainActionTitle\"\n        [style.width]=\"mainButtonWidth\"\n        [fdType]=\"fdType\"\n        [disabled]=\"disabled\"\n        (click)=\"onMainButtonClick($event)\"\n    >\n        <ng-container *ngTemplateOutlet=\"titleTemplate\"></ng-container>\n    </button>\n\n    <button\n        fd-button\n        #menuActionButton\n        [glyph]=\"glyph\"\n        [fdType]=\"fdType\"\n        [disabled]=\"disabled\"\n        [ariaLabel]=\"expandButtonAriaLabel\"\n        [attr.title]=\"expandButtonTitle || expandButtonAriaLabel\"\n        [class.is-active]=\"menu.isOpen\"\n    ></button>\n    <ng-content select=\"fd-menu\"></ng-content>\n</div>\n","import { CONTENT_DENSITY_DIRECTIVE, DeprecatedCompactDirective } from '@fundamental-ngx/core/content-density';\nimport { Directive, forwardRef } from '@angular/core';\n\n@Directive({\n    // eslint-disable-next-line @angular-eslint/directive-selector\n    selector: 'fd-split-button[compact]',\n    providers: [\n        {\n            provide: CONTENT_DENSITY_DIRECTIVE,\n            useExisting: forwardRef(() => DeprecatedSplitButtonCompactDirective)\n        }\n    ]\n})\nexport class DeprecatedSplitButtonCompactDirective extends DeprecatedCompactDirective {\n    constructor() {\n        super('fd-split-button');\n    }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { SplitButtonComponent } from './split-button.component';\nimport { ButtonModule } from '@fundamental-ngx/core/button';\nimport { SplitButtonActionTitle } from './split-button-utils/split-button.directives';\nimport { MenuModule } from '@fundamental-ngx/core/menu';\nimport { ContentDensityModule } from '@fundamental-ngx/core/content-density';\nimport { DeprecatedSplitButtonCompactDirective } from './deprecated-split-button-compact.directive';\n\n@NgModule({\n    imports: [CommonModule, ButtonModule, MenuModule, ContentDensityModule],\n    declarations: [SplitButtonComponent, SplitButtonActionTitle, DeprecatedSplitButtonCompactDirective],\n    exports: [SplitButtonComponent, SplitButtonActionTitle, ContentDensityModule, DeprecatedSplitButtonCompactDirective]\n})\nexport class SplitButtonModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"fundamental-ngx-core-split-button.mjs","sources":["../../../../libs/core/src/lib/split-button/split-button-utils/split-button.directives.ts","../../../../libs/core/src/lib/split-button/split-button.component.ts","../../../../libs/core/src/lib/split-button/split-button.component.html","../../../../libs/core/src/lib/split-button/deprecated-split-button-compact.directive.ts","../../../../libs/core/src/lib/split-button/split-button.module.ts","../../../../libs/core/src/lib/split-button/fundamental-ngx-core-split-button.ts"],"sourcesContent":["import { Directive } from '@angular/core';\n\n/**\n * Directive used to identify the template which will populate the main action button.\n * Used to achieve complex buttons that require more than a string.\n *```html\n *    <fd-button-split>\n *        <ng-template fd-button-split-action-title>\n *            <p>Paragraph 1</p>\n *            <p>Paragraph 2</p>\n *        </ng-template>\n *        <fd-menu>\n *             <li fd-menu-item>\n *               <a fd-menu-interactive [routerLink]=\"'/'\">\n *                   <span fd-menu-title>option2</span>\n *               </a>\n *            </li>\n *            <li fd-menu-item>\n *               <a fd-menu-interactive [routerLink]=\"'/'\">\n *                   <span fd-menu-title>option2</span>\n *               </a>\n *            </li>\n *        </fd-menu>\n *    </fd-button-split>\n *</fd-button-split>\n *```\n */\n@Directive({\n    // TODO to be discussed\n    // eslint-disable-next-line @angular-eslint/directive-selector\n    selector: '[fd-split-button-action-title]'\n})\n// eslint-disable-next-line @angular-eslint/directive-class-suffix\nexport class SplitButtonActionTitle {}\n","import {\n    AfterContentInit,\n    AfterViewInit,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ContentChild,\n    ElementRef,\n    EventEmitter,\n    Input,\n    OnChanges,\n    OnDestroy,\n    Output,\n    Renderer2,\n    SimpleChanges,\n    TemplateRef,\n    ViewChild,\n    ViewEncapsulation\n} from '@angular/core';\nimport { Subscription, takeUntil, tap } from 'rxjs';\nimport { first } from 'rxjs/operators';\nimport { ButtonType } from '@fundamental-ngx/core/button';\nimport { MenuComponent, MenuItemComponent } from '@fundamental-ngx/core/menu';\n\nimport { SplitButtonActionTitle } from './split-button-utils/split-button.directives';\nimport { MainAction } from './main-action';\nimport { ContentDensityObserver, contentDensityObserverProviders } from '@fundamental-ngx/core/content-density';\nimport { DestroyedService } from '@fundamental-ngx/core/utils';\n\nexport const splitButtonTextClass = 'fd-button-split__text';\nexport const splitButtonTextCompactClass = 'fd-button-split__text--compact';\nconst splitButtonTextClasses = [splitButtonTextClass, splitButtonTextCompactClass];\n\n/**\n * Split Button component, used to enhance standard HTML button and add possibility to put some dropdown with\n * additional options.\n *\n * ```html\n * <fd-split-button>\n *   <fd-menu>\n *       <li fd-menu-item>\n *           <div fd-menu-interactive>\n *               <span fd-menu-title>Option 1</span>\n *           </div>\n *       </li>\n *       <li fd-menu-item>\n *           <div fd-menu-interactive>\n *               <span fd-menu-title>Option 2</span>\n *           </div>\n *       </li>\n *    </fd-menu>\n *</fd-split-button>\n * ```\n */\n@Component({\n    selector: 'fd-split-button',\n    templateUrl: 'split-button.component.html',\n    styleUrls: ['./split-button.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    providers: [contentDensityObserverProviders()]\n})\nexport class SplitButtonComponent implements AfterContentInit, OnChanges, OnDestroy, AfterViewInit {\n    /** The icon to include in the button. See the icon page for the list of icons. */\n    @Input()\n    glyph = 'slim-arrow-down';\n\n    /** The icon to include in the button. See the icon page for the list of icons. */\n    @Input()\n    disabled: boolean;\n\n    /** @deprecated The Title for main action button. This will be deprecated as an input but will remain a property on this component. */\n    @Input()\n    mainActionTitle: string;\n\n    /** The type of the button. Types include 'standard', 'positive', 'medium', and 'negative'.\n     * Leave empty for default (Action button).'*/\n    @Input()\n    fdType: ButtonType;\n\n    /** Aria-label attribute used to describe expand button */\n    @Input()\n    expandButtonAriaLabel = 'More actions';\n\n    /** Title attribute used to describe expand button */\n    @Input()\n    expandButtonTitle: string;\n\n    /** Selected menu item */\n    @Input()\n    selected: MenuItemComponent;\n\n    /** Whether or not the element should keep a fixed width. The width could change if the text changes length. */\n    @Input()\n    fixedWidth = true;\n\n    /**\n     * The object that contains the mainActionTitle, keepMainAction option and the callback function that should be\n     * executed when the button is clicked.\n     */\n    @Input()\n    mainAction: MainAction;\n\n    /** aria-label attribute */\n    @Input()\n    arialLabel = 'Split button';\n\n    /** Event sent when primary button is clicked */\n    @Output()\n    readonly primaryButtonClicked: EventEmitter<Event> = new EventEmitter<Event>();\n\n    /** @hidden */\n    @ContentChild(SplitButtonActionTitle, { read: TemplateRef })\n    titleTemplate: TemplateRef<any> | null;\n\n    /** @hidden */\n    @ContentChild(MenuComponent)\n    menu: MenuComponent;\n\n    /** @hidden */\n    @ViewChild('mainActionButton', { read: ElementRef })\n    mainActionBtn: ElementRef;\n\n    /** @hidden */\n    @ViewChild('menuActionButton', { read: ElementRef })\n    menuActionBtn: ElementRef;\n\n    /** @hidden */\n    mainButtonWidth: string;\n\n    /** @hidden */\n    get typeClass(): string {\n        return this.fdType ? `fd-button-split--${this.fdType}` : '';\n    }\n\n    /** @hidden */\n    private _menuItemSubscriptions = new Subscription();\n\n    /** @hidden */\n    private _menuSubscription = new Subscription();\n\n    /** @hidden */\n    private _contentDensitySubscription = new Subscription();\n\n    /** @hidden */\n    private _menuActivePathSubscription = new Subscription();\n\n    /** @hidden */\n    constructor(\n        private _cdRef: ChangeDetectorRef,\n        private _destroy$: DestroyedService,\n        private _contentDensityObserver: ContentDensityObserver,\n        private _renderer: Renderer2\n    ) {}\n\n    /** @hidden Emits event when main button is clicked */\n    onMainButtonClick(event: MouseEvent): void {\n        this.primaryButtonClicked.emit(event);\n        if (this.selected) {\n            this.selected.elementRef.nativeElement.click();\n        } else if (this.mainAction && this.mainAction.callback) {\n            this.mainAction.callback();\n        }\n        event.stopPropagation();\n    }\n\n    /** @hidden */\n    ngAfterContentInit(): void {\n        this.menu._menuItems.forEach((item) => {\n            item.menuInteractive._fromSplitButton = true;\n        });\n        this._setupMenuSubscription();\n        this._setupMenuItemSubscriptions();\n        this._handleMainActionObject();\n\n        if (!this.mainActionTitle && !this.titleTemplate && !this.selected) {\n            this.selectMenuItem(this.menu._menuItems.first);\n        } else if (!this.mainActionTitle && this.selected) {\n            this.selectMenuItem(this.selected);\n        }\n\n        this._menuActivePathSubscription.add(\n            this.menu.activePath.subscribe((items) => {\n                const lastItem = items[items.length - 1];\n                if (lastItem && !lastItem.submenu) {\n                    this.menu.close();\n                    this._focusTriggerElement();\n                }\n            })\n        );\n    }\n\n    /** @hidden */\n    ngAfterViewInit(): void {\n        this._contentDensityObserver.isCompact$\n            .pipe(tap(this._addButtonTextClass), takeUntil(this._destroy$))\n            .subscribe();\n    }\n\n    /** @hidden */\n    ngOnChanges(changes: SimpleChanges): void {\n        if ('selected' in changes) {\n            this.selectMenuItem(this.selected);\n        }\n        if ('mainAction' in changes) {\n            this._handleMainActionObject();\n        }\n    }\n\n    /** @hidden */\n    ngOnDestroy(): void {\n        this._menuItemSubscriptions.unsubscribe();\n        this._menuSubscription.unsubscribe();\n        this._contentDensitySubscription.unsubscribe();\n        this._menuActivePathSubscription.unsubscribe();\n    }\n\n    /** Function called to select a menu item for the split button. */\n    selectMenuItem(menuItem: MenuItemComponent): void {\n        if (menuItem && (!this.mainAction || !this.mainAction.keepMainAction)) {\n            menuItem.setSelected(true);\n        }\n    }\n\n    /**\n     * Wrapper gets focused programmatically by menu\n     * when the \"escape\" button is pressed.\n     * In this case we need to transit focus to the \"more actions\" button\n     */\n    _onGroupFocused(): void {\n        this._focusTriggerElement();\n    }\n\n    /** @hidden */\n    private _getMainButtonWidth(): void {\n        if (this.mainActionBtn && this.mainActionBtn.nativeElement) {\n            this.mainButtonWidth = this.mainActionBtn.nativeElement.getBoundingClientRect().width + 'px';\n        }\n    }\n\n    /** @hidden */\n    private _setupMenuItemSubscriptions(): void {\n        this.menu._menuItems.forEach((menuItem) => {\n            menuItem.onSelect.pipe(first()).subscribe(() => {\n                if (this.fixedWidth) {\n                    this._getMainButtonWidth();\n                }\n            });\n            this._menuItemSubscriptions.add(\n                menuItem.onSelect.subscribe(() => {\n                    this._handleMenuItemSelection(menuItem);\n                })\n            );\n        });\n    }\n\n    /** @hidden */\n    private _handleMenuItemSelection(menuItem: MenuItemComponent): void {\n        if (!this.mainAction || !this.mainAction.keepMainAction) {\n            this.selected = menuItem;\n            this.menu._menuItems.forEach((item) => {\n                item.setSelected(false, true);\n            });\n            menuItem.setSelected(true, true);\n            this.titleTemplate = null;\n            this.mainActionTitle = menuItem.menuItemTitle.title;\n            this._cdRef.detectChanges();\n        }\n    }\n\n    /** @hidden */\n    private _setupMenuSubscription(): void {\n        this._menuSubscription = this.menu._menuItems.changes.subscribe(() => {\n            this._menuItemSubscriptions.unsubscribe();\n            this._menuItemSubscriptions.closed = false;\n            this._setupMenuItemSubscriptions();\n        });\n        // call markForCheck once menu open state gets changed\n        this._menuSubscription.add(this.menu.isOpenChange.subscribe(() => this._cdRef.markForCheck()));\n    }\n\n    /** @hidden */\n    private _handleMainActionObject(): void {\n        if (this.mainAction && typeof this.mainAction.mainActionTitle === 'string') {\n            this.mainActionTitle = this.mainAction.mainActionTitle;\n        } else if (this.mainAction && this.mainAction.mainActionTitle instanceof TemplateRef) {\n            this.titleTemplate = this.mainAction.mainActionTitle;\n        }\n    }\n\n    /** @hidden */\n    private _addButtonTextClass = (compact: boolean): void => {\n        const textSpanElement = this.mainActionBtn?.nativeElement.querySelector('.fd-button__text');\n        if (!textSpanElement) {\n            return;\n        }\n        splitButtonTextClasses.forEach((_class) => this._renderer.removeClass(textSpanElement, _class));\n        if (compact) {\n            this._renderer.addClass(textSpanElement, splitButtonTextCompactClass);\n        } else {\n            this._renderer.addClass(textSpanElement, splitButtonTextClass);\n        }\n    };\n\n    /** @hidden */\n    private _focusTriggerElement(): void {\n        this.menuActionBtn?.nativeElement.focus();\n    }\n}\n","<div\n    class=\"fd-button-split fd-has-margin-right-small\"\n    [ngClass]=\"typeClass\"\n    role=\"group\"\n    tabindex=\"-1\"\n    [attr.aria-label]=\"arialLabel\"\n    [fdMenuTrigger]=\"menu\"\n    (focus)=\"_onGroupFocused()\"\n>\n    <button\n        fd-button\n        #mainActionButton\n        [label]=\"mainActionTitle\"\n        [style.width]=\"mainButtonWidth\"\n        [fdType]=\"fdType\"\n        [disabled]=\"disabled\"\n        (click)=\"onMainButtonClick($event)\"\n    >\n        <ng-container *ngTemplateOutlet=\"titleTemplate\"></ng-container>\n    </button>\n\n    <button\n        fd-button\n        #menuActionButton\n        [glyph]=\"glyph\"\n        [fdType]=\"fdType\"\n        [disabled]=\"disabled\"\n        [ariaLabel]=\"expandButtonAriaLabel\"\n        [attr.title]=\"expandButtonTitle || expandButtonAriaLabel\"\n        [class.is-active]=\"menu.isOpen\"\n    ></button>\n    <ng-content select=\"fd-menu\"></ng-content>\n</div>\n","import { CONTENT_DENSITY_DIRECTIVE, DeprecatedCompactDirective } from '@fundamental-ngx/core/content-density';\nimport { Directive, forwardRef } from '@angular/core';\n\n@Directive({\n    // eslint-disable-next-line @angular-eslint/directive-selector\n    selector: 'fd-split-button[compact]',\n    providers: [\n        {\n            provide: CONTENT_DENSITY_DIRECTIVE,\n            useExisting: forwardRef(() => DeprecatedSplitButtonCompactDirective)\n        }\n    ]\n})\nexport class DeprecatedSplitButtonCompactDirective extends DeprecatedCompactDirective {\n    constructor() {\n        super('fd-split-button');\n    }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { SplitButtonComponent } from './split-button.component';\nimport { ButtonModule } from '@fundamental-ngx/core/button';\nimport { SplitButtonActionTitle } from './split-button-utils/split-button.directives';\nimport { MenuModule } from '@fundamental-ngx/core/menu';\nimport { ContentDensityModule } from '@fundamental-ngx/core/content-density';\nimport { DeprecatedSplitButtonCompactDirective } from './deprecated-split-button-compact.directive';\n\n@NgModule({\n    imports: [CommonModule, ButtonModule, MenuModule, ContentDensityModule],\n    declarations: [SplitButtonComponent, SplitButtonActionTitle, DeprecatedSplitButtonCompactDirective],\n    exports: [SplitButtonComponent, SplitButtonActionTitle, ContentDensityModule, DeprecatedSplitButtonCompactDirective]\n})\nexport class SplitButtonModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2020/fundamental-ngx-core-tabs.mjs

@@ -904,7 +904,7 @@ class TabListComponent {
     }
 }
 TabListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: TabListComponent, deps: [{ token: TabsService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i2.ContentDensityObserver }], target: i0.ɵɵFactoryTarget.Component });
-TabListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: TabListComponent, selector: "fd-tab-list", inputs: { size: "size", mode: "mode", collapseOverflow: "collapseOverflow", maxVisibleTabs: "maxVisibleTabs", stackContent: "stackContent", maxContentHeight: "maxContentHeight", collapsibleTabs: "collapsibleTabs", expandOverflowText: "expandOverflowText" }, outputs: { selectedTabChange: "selectedTabChange" }, host: { classAttribute: "fd-tabs-custom" }, providers: [TabsService, contentDensityObserverProviders()], queries: [{ propertyName: "tabPanels", predicate: TabPanelComponent }], viewQueries: [{ propertyName: "overflowTrigger", first: true, predicate: TabItemExpandComponent, descendants: true, read: ElementRef }, { propertyName: "headerContainer", first: true, predicate: ["headerContainer"], descendants: true, read: ElementRef }, { propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, read: ElementRef, static: true }, { propertyName: "tabHeaderLinks", predicate: TabLinkDirective, descendants: true }, { propertyName: "tabHeaders", predicate: TabItemDirective, descendants: true }], ngImport: i0, template: "<div\n    #headerContainer\n    role=\"tablist\"\n    class=\"fd-tabs\"\n    [class]=\"(mode ? 'fd-tabs--' + mode : '') + (' fd-tabs--' + size)\"\n    [class.fd-tabs--compact]=\"_contentDensityObserver.isCompact\"\n>\n    <div class=\"fd-tabs__wrapper\" [class.fd-tabs__wrapper--collapsible]=\"_isCollapsed\">\n        <ng-container *ngFor=\"let tab of _visualOrder.visible; let i = index; let last = last\">\n            <div fd-tab-item [header]=\"tab.isHeader\" [tabItemState]=\"tab.tabState\" [attr.aria-selected]=\"tab.active\">\n                <a\n                    fd-tab-link\n                    [attr.tabindex]=\"tab.active ? '0' : '-1'\"\n                    [attr.aria-controls]=\"tab.id\"\n                    [attr.aria-label]=\"tab.ariaLabel || null\"\n                    [attr.aria-labelledby]=\"!tab.ariaLabel && tab.ariaLabelledBy ? tab.ariaLabelledBy : null\"\n                    [active]=\"tab.active\"\n                    [disabled]=\"tab.disabled\"\n                    (keydown)=\"_tabHeaderKeyHandler(i, $event)\"\n                    (click)=\"_tabHeaderClickHandler(tab.panel)\"\n                >\n                    <ng-container *ngTemplateOutlet=\"tab.titleTemplate || null\"></ng-container>\n\n                    <ng-container *ngIf=\"!tab.titleTemplate\" [ngSwitch]=\"mode\">\n                        <ng-container *ngSwitchCase=\"'filter'\">\n                            <span fd-tab-header *ngIf=\"tab.isHeader\">\n                                <span fd-tab-counter-header *ngIf=\"tab.count\">{{ tab.count }}</span>\n                                <span fd-tab-label *ngIf=\"tab.title\">{{ tab.title }}</span>\n                            </span>\n                            <ng-container *ngIf=\"!tab.isHeader\">\n                                <span fd-tab-icon [icon]=\"tab.glyph\">\n                                    <p fd-tab-count>{{ tab.count }}</p>\n                                </span>\n                                <span fd-tab-label>{{ tab.title }}</span>\n                            </ng-container>\n                        </ng-container>\n\n                        <ng-container *ngSwitchCase=\"'icon-only'\">\n                            <span fd-tab-icon [icon]=\"tab.glyph\">\n                                <p fd-tab-count>{{ tab.count }}</p>\n                            </span>\n                        </ng-container>\n\n                        <ng-container *ngSwitchCase=\"'process'\">\n                            <span fd-tab-icon *ngIf=\"tab.glyph\" [icon]=\"tab.glyph\"></span>\n                            <div fd-tab-process>\n                                <span fd-tab-label *ngIf=\"tab.count\">{{ tab.count }}</span>\n                                <span fd-tab-label *ngIf=\"tab.title\">{{ tab.title }}</span>\n                            </div>\n                        </ng-container>\n\n                        <ng-container *ngSwitchDefault>\n                            <p fd-tab-count *ngIf=\"tab.count\">{{ tab.count }}</p>\n                            <span fd-tab-tag>{{ tab.title }}</span>\n                        </ng-container>\n                    </ng-container>\n                </a>\n                <div fd-tab-process-icon *ngIf=\"mode === 'process' && !last\"></div>\n            </div>\n\n            <div *ngIf=\"tab.isHeader\" fd-tab-separator></div>\n        </ng-container>\n    </div>\n\n    <fd-item-expand\n        *ngIf=\"_isCollapsed\"\n        [fdMenuTrigger]=\"menu\"\n        [label]=\"expandOverflowText\"\n        (keydown)=\"_onTriggerKeydown($event, menu)\"\n    >\n    </fd-item-expand>\n</div>\n\n<div\n    #contentContainer\n    class=\"fd-tabs__content\"\n    [style.maxHeight]=\"maxContentHeight\"\n    fdScrollSpy\n    [trackedTags]=\"['fd-tab']\"\n    [scrollSpyDisabled]=\"_disableScrollSpy\"\n    (spyChange)=\"_highlightActiveTab($event)\"\n>\n    <ng-content></ng-content>\n</div>\n\n<fd-menu #menu>\n    <li\n        fd-menu-item\n        *ngFor=\"let tab of _visualOrder.overflowing\"\n        (onSelect)=\"_overflowingTabHeaderClickHandler(tab.panel)\"\n    >\n        <div fd-menu-interactive>\n            <ng-container\n                *ngTemplateOutlet=\"\n                    !tab.titleTemplate && mode === 'icon-only' ? iconOnlyTemplate : tab.titleTemplate || textTitle;\n                    context: { $implicit: tab }\n                \"\n            ></ng-container>\n        </div>\n    </li>\n</fd-menu>\n\n<ng-template #textTitle let-tab>\n    <span fd-menu-title>{{ tab.title }}</span>\n</ng-template>\n\n<ng-template #iconOnlyTemplate let-tab>\n    <span fd-tab-icon [icon]=\"tab.glyph\">\n        <p fd-tab-count>{{ tab.count }}</p>\n    </span>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.24.4\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *//*!\n.fd-tabs+()\n    .fd-tabs__item?+(([aria-selected=true]),)\n    .fd-tabs__link+((.is-selected,)\n.fd-tabs__panel+([aria-expanded]|.is-expanded)\n*/.fd-tabs{--fdTabs_Icon_Size:1.125rem;--fdTabs_Icon_Selection_Height:2.625rem;-webkit-box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;-ms-flex-wrap:wrap;-webkit-box-shadow:var(--sapContent_HeaderShadow);align-items:center;background-color:var(--sapObjectHeader_Background);border:0;border-color:var(--sapObjectHeader_BorderColor);box-shadow:var(--sapContent_HeaderShadow);box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);display:flex;flex-wrap:wrap;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);list-style:none;margin:0;padding:0}.fd-tabs:after,.fd-tabs:before{box-sizing:inherit;font-size:inherit}.fd-tabs__count{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);line-height:1rem;margin:0;padding:0 0 .125rem}.fd-tabs__count:after,.fd-tabs__count:before{box-sizing:inherit;font-size:inherit}.fd-tabs__link{-webkit-box-sizing:border-box;-webkit-transition:0s;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);cursor:pointer;display:block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);line-height:1rem;margin:0;padding:.875rem .75rem;position:relative;text-decoration:none;transition:0s}.fd-tabs__link:after,.fd-tabs__link:before{box-sizing:inherit;font-size:inherit}.fd-tabs__link.is-selected .fd-tabs__icon,.fd-tabs__link[aria-selected=true] .fd-tabs__icon{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__link.is-selected .fd-tabs__icon:after,.fd-tabs__link.is-selected .fd-tabs__tag:after,.fd-tabs__link[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__link[aria-selected=true] .fd-tabs__tag:after{background-color:var(--fdIcon_Tab_Bar_Selection_Bar_Color)}.fd-tabs__link.is-focus,.fd-tabs__link:focus{box-shadow:none;outline:none;z-index:5}.fd-tabs__link.is-focus .fd-tabs__icon:before,.fd-tabs__link.is-focus .fd-tabs__tag:before,.fd-tabs__link:focus .fd-tabs__icon:before,.fd-tabs__link:focus .fd-tabs__tag:before{bottom:0;content:\"\";left:0;outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:var(--sapContent_FocusWidth);position:absolute;right:0;top:0}.fd-tabs__item{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0 .25rem;padding:0;position:relative}.fd-tabs__item:after,.fd-tabs__item:before{box-sizing:inherit;font-size:inherit}.fd-tabs__item.is-selected .fd-tabs__tag,.fd-tabs__item[aria-selected=true] .fd-tabs__tag{color:var(--fdIcon_Tab_Bar_Selection_Color)}.fd-tabs__item.is-selected .fd-tabs__icon,.fd-tabs__item[aria-selected=true] .fd-tabs__icon{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item.is-selected .fd-tabs__icon:after,.fd-tabs__item.is-selected .fd-tabs__link:after,.fd-tabs__item.is-selected .fd-tabs__tag:after,.fd-tabs__item[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item[aria-selected=true] .fd-tabs__tag:after{background-color:var(--fdIcon_Tab_Bar_Selection_Bar_Color)}.fd-tabs__item--error .fd-tabs__icon{border-color:var(--sapErrorColor);color:var(--sapErrorColor)}.fd-tabs__item--error .fd-tabs__link .fd-tabs__tag{color:var(--sapErrorColor)}.fd-tabs__item--error.is-selected .fd-tabs__icon,.fd-tabs__item--error[aria-selected=true] .fd-tabs__icon{background-color:var(--sapErrorColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item--error.is-selected .fd-tabs__icon:after,.fd-tabs__item--error.is-selected .fd-tabs__link:after,.fd-tabs__item--error.is-selected .fd-tabs__tag:after,.fd-tabs__item--error[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item--error[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item--error[aria-selected=true] .fd-tabs__tag:after{background-color:var(--sapErrorColor)}.fd-tabs__item--warning .fd-tabs__icon{border-color:var(--sapWarningColor);color:var(--sapWarningColor)}.fd-tabs__item--warning .fd-tabs__link .fd-tabs__tag{color:var(--sapWarningColor)}.fd-tabs__item--warning.is-selected .fd-tabs__icon,.fd-tabs__item--warning[aria-selected=true] .fd-tabs__icon{background-color:var(--sapWarningColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item--warning.is-selected .fd-tabs__icon:after,.fd-tabs__item--warning.is-selected .fd-tabs__link:after,.fd-tabs__item--warning.is-selected .fd-tabs__tag:after,.fd-tabs__item--warning[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item--warning[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item--warning[aria-selected=true] .fd-tabs__tag:after{background-color:var(--sapWarningColor)}.fd-tabs__item--success .fd-tabs__icon{border-color:var(--sapSuccessColor);color:var(--sapSuccessColor)}.fd-tabs__item--success .fd-tabs__link .fd-tabs__tag{color:var(--sapSuccessColor)}.fd-tabs__item--success.is-selected .fd-tabs__icon,.fd-tabs__item--success[aria-selected=true] .fd-tabs__icon{background-color:var(--sapSuccessColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item--success.is-selected .fd-tabs__icon:after,.fd-tabs__item--success.is-selected .fd-tabs__link:after,.fd-tabs__item--success.is-selected .fd-tabs__tag:after,.fd-tabs__item--success[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item--success[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item--success[aria-selected=true] .fd-tabs__tag:after{background-color:var(--sapSuccessColor)}.fd-tabs__item--information .fd-tabs__icon{border-color:var(--sapInformationColor);color:var(--sapInformationColor)}.fd-tabs__item--information .fd-tabs__link .fd-tabs__tag{color:var(--sapInformationColor)}.fd-tabs__item--information.is-selected .fd-tabs__icon,.fd-tabs__item--information[aria-selected=true] .fd-tabs__icon{background-color:var(--sapInformationColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item--information.is-selected .fd-tabs__icon:after,.fd-tabs__item--information.is-selected .fd-tabs__link:after,.fd-tabs__item--information.is-selected .fd-tabs__tag:after,.fd-tabs__item--information[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item--information[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item--information[aria-selected=true] .fd-tabs__tag:after{background-color:var(--sapInformationColor)}.fd-tabs__item--neutral .fd-tabs__icon{border-color:var(--sapNeutralColor);color:var(--sapNeutralColor)}.fd-tabs__item--neutral .fd-tabs__link .fd-tabs__tag{color:var(--sapNeutralColor)}.fd-tabs__item--neutral.is-selected .fd-tabs__icon,.fd-tabs__item--neutral[aria-selected=true] .fd-tabs__icon{background-color:var(--sapNeutralColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item--neutral.is-selected .fd-tabs__icon:after,.fd-tabs__item--neutral.is-selected .fd-tabs__link:after,.fd-tabs__item--neutral.is-selected .fd-tabs__tag:after,.fd-tabs__item--neutral[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item--neutral[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item--neutral[aria-selected=true] .fd-tabs__tag:after{background-color:var(--sapNeutralColor)}.fd-tabs__item:first-child{margin-left:0}.fd-tabs__item:first-child .fd-tabs__link{margin-left:.1875rem;padding-left:0}.fd-tabs__item:first-child .fd-tabs__link[dir=rtl],[dir=rtl] .fd-tabs__item:first-child .fd-tabs__link{margin-left:0;margin-right:.1875rem}.fd-tabs__item[dir=rtl]:first-child,[dir=rtl] .fd-tabs__item:first-child{margin-left:.25rem;margin-right:0}.fd-tabs__item[dir=rtl]:first-child .fd-tabs__link,[dir=rtl] .fd-tabs__item:first-child .fd-tabs__link{padding-left:.875rem;padding-right:0}.fd-tabs__icon{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background-color:transparent;border:0;border:var(--fdIcon_Tab_Bar_Icon_Border_Weight) solid var(--fdIcon_Tab_Bar_Icon_Border_Color);border-radius:50%;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdIcon_Tab_Bar_Inactive_Tab_Icon_Color);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:var(--fdTabs_Icon_Selection_Height);justify-content:center;line-height:var(--sapContent_LineHeight);margin:0 .188rem;padding:0;position:relative;width:var(--fdTabs_Icon_Selection_Height)}.fd-tabs__icon:after,.fd-tabs__icon:before{box-sizing:inherit;font-size:inherit}.fd-tabs__icon [class*=sap-icon],.fd-tabs__icon[class*=sap-icon]{background:inherit;border-radius:inherit;color:inherit;font-size:inherit;font-size:var(--fdTabs_Icon_Size);line-height:1}.fd-tabs__icon:after{-webkit-transition:all .125s ease-in;border-radius:.125rem .125rem 0 0;bottom:-.875rem;content:\"\";display:inline-block;height:var(--fdIcon_Tab_Bar_Selection_Bar_Height);left:-.1875rem;position:absolute;transition:all .125s ease-in;width:calc(100% + .375rem)}.fd-tabs__tag{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:inline-block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);line-height:1rem;margin:0;padding:0;position:relative}.fd-tabs__tag:after,.fd-tabs__tag:before{box-sizing:inherit;font-size:inherit}.fd-tabs__tag:after{-webkit-transition:all .125s ease-in;border-radius:.125rem .125rem 0 0;bottom:-.875rem;content:\"\";display:inline-block;height:var(--fdIcon_Tab_Bar_Selection_Bar_Height);left:-.1875rem;position:absolute;transition:all .125s ease-in;width:calc(100% + .375rem)}.fd-tabs__panel{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tabs__panel:after,.fd-tabs__panel:before{box-sizing:inherit;font-size:inherit}.fd-tabs__panel[aria-expanded=false]{display:none}.fd-tabs__panel.is-expanded,.fd-tabs__panel[aria-expanded=true]{display:block}.fd-tabs__counter-header{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:1.5rem;font-weight:400;line-height:var(--sapContent_LineHeight);line-height:1.5rem;margin:0;padding:0 .5rem 0 0}.fd-tabs__counter-header:after,.fd-tabs__counter-header:before{box-sizing:inherit;font-size:inherit}.fd-tabs__overflow{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;justify-content:center;line-height:var(--sapContent_LineHeight);margin:0 0 0 auto;padding:0}.fd-tabs__overflow:after,.fd-tabs__overflow:before{box-sizing:inherit;font-size:inherit}.fd-tabs__overflow [class*=sap-icon],.fd-tabs__overflow[class*=sap-icon]{background:inherit;border-radius:inherit;color:inherit;font-size:inherit;line-height:1}.fd-tabs__process-icon{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_NonInteractiveIconColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:1rem;font-weight:400;line-height:var(--sapContent_LineHeight);line-height:1;margin:0;padding:0 .5rem}.fd-tabs__process-icon:after,.fd-tabs__process-icon:before{box-sizing:inherit;font-size:inherit}.fd-tabs__process-icon:before{text-rendering:optimizeLegibility;content:\"\\e0c7\";font-family:SAP-icons;text-align:center;text-decoration:inherit;text-transform:none}.fd-tabs__label{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);display:block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontSmallSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;max-width:100%;padding:0 0 0 .125rem}.fd-tabs__label:after,.fd-tabs__label:before{box-sizing:inherit;font-size:inherit}.fd-tabs__label:first-child{padding-bottom:.375rem}.fd-tabs__separator{-webkit-box-sizing:border-box;border:0;border-right:solid var(--sapGroup_TitleBorderColor);border-right-width:.0625rem;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:2rem;line-height:var(--sapContent_LineHeight);line-height:2rem;margin:0 .25rem;padding:0}.fd-tabs__separator:after,.fd-tabs__separator:before{box-sizing:inherit;font-size:inherit}.fd-tabs__header{-webkit-box-sizing:border-box;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tabs__header:after,.fd-tabs__header:before{box-sizing:inherit;font-size:inherit}.fd-tabs__header .fd-tabs__label{max-width:4rem}.fd-tabs--filter .fd-tabs__count,.fd-tabs--icon-only .fd-tabs__count,.fd-tabs--process .fd-tabs__count{font-size:var(--sapFontSmallSize)}.fd-tabs--filter .fd-tabs__item:first-child .fd-tabs__link,.fd-tabs--icon-only .fd-tabs__item:first-child .fd-tabs__link,.fd-tabs--process .fd-tabs__item:first-child .fd-tabs__link{margin:0}.fd-tabs--icon-only .fd-tabs__link,.fd-tabs--process .fd-tabs__link{padding-bottom:1rem;padding-top:1rem}.fd-tabs--icon-only .fd-tabs__icon:after,.fd-tabs--process .fd-tabs__icon:after{bottom:-1.0625rem}.fd-tabs--filter .fd-tabs__count,.fd-tabs--icon-only .fd-tabs__count{left:calc(100% + .1875rem);position:absolute;top:0}.fd-tabs--filter[dir=rtl] .fd-tabs__count,.fd-tabs--icon-only[dir=rtl] .fd-tabs__count,[dir=rtl] .fd-tabs--filter .fd-tabs__count,[dir=rtl] .fd-tabs--icon-only .fd-tabs__count{left:auto;right:calc(100% + .1875rem)}.fd-tabs--process .fd-tabs__item{margin:0 .25rem 0 0}.fd-tabs--process .fd-tabs__item,.fd-tabs--process .fd-tabs__link{align-items:center;display:flex}.fd-tabs--process .fd-tabs__link{padding-left:0;padding-right:0}.fd-tabs--process .fd-tabs__icon{margin:0 .1875rem}.fd-tabs--process .fd-tabs__label{line-height:.875rem;max-width:7.5rem;overflow:hidden;white-space:nowrap}.fd-tabs--process[dir=rtl] .fd-tabs__item,[dir=rtl] .fd-tabs--process .fd-tabs__item{margin:0 0 0 .25rem}.fd-tabs--process[dir=rtl] .fd-tabs__item:first-child .fd-tabs__link,[dir=rtl] .fd-tabs--process .fd-tabs__item:first-child .fd-tabs__link{padding-left:0;padding-right:0}.fd-tabs--filter{align-items:center;display:flex}.fd-tabs--filter .fd-tabs__item{margin:0;padding:0 .25rem;width:5.375rem}.fd-tabs--filter .fd-tabs__item[dir=rtl],[dir=rtl] .fd-tabs--filter .fd-tabs__item{margin:0}.fd-tabs--filter .fd-tabs__item--header{width:auto}.fd-tabs--filter .fd-tabs__icon{margin-bottom:.375rem}.fd-tabs--filter .fd-tabs__icon:after{content:none}.fd-tabs--filter .fd-tabs__label{line-height:.875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fd-tabs--filter .fd-tabs__link{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:flex;flex-direction:column;height:5.5rem;justify-content:center;padding:.875rem .188rem .625rem;position:relative;text-align:center}.fd-tabs--filter .fd-tabs__link:after{-webkit-transition:all .125s ease-in;border-radius:.125rem .125rem 0 0;bottom:-.875rem;bottom:0;content:\"\";display:inline-block;height:var(--fdIcon_Tab_Bar_Selection_Bar_Height);left:-.1875rem;position:absolute;transition:all .125s ease-in;width:calc(100% + .375rem)}.fd-tabs--filter .fd-tabs__link.is-focus,.fd-tabs--filter .fd-tabs__link:focus{box-shadow:none;outline:none;z-index:5}.fd-tabs--filter[dir=rtl] .fd-tabs__item:first-child .fd-tabs__link,[dir=rtl] .fd-tabs--filter .fd-tabs__item:first-child .fd-tabs__link{padding-left:.188rem;padding-right:.188rem}.fd-tabs--compact{--fdTabs_Icon_Size:1.125rem;--fdTabs_Icon_Selection_Height:1.875rem}.fd-tabs--compact .fd-tabs__label:first-child{padding-bottom:.25rem}.fd-tabs--compact.fd-tabs--filter .fd-tabs__link{height:4.75rem}.fd-tabs--s{padding:0 1rem}.fd-tabs--l,.fd-tabs--m{padding:0 2rem}.fd-tabs--xl,.fd-tabs--xxl{padding:0 3rem}.fd-tabs[dir=rtl] .fd-tabs__process-icon,[dir=rtl] .fd-tabs .fd-tabs__process-icon{transform:rotate(180deg)}.fd-tabs[dir=rtl] .fd-tabs__counter-header,[dir=rtl] .fd-tabs .fd-tabs__counter-header{padding-left:.5rem;padding-right:0}.fd-tabs[dir=rtl] .fd-tabs__overflow,[dir=rtl] .fd-tabs .fd-tabs__overflow{margin-left:0;margin-right:auto}.fd-tabs__process{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tabs__process:after,.fd-tabs__process:before{box-sizing:inherit;font-size:inherit}.fd-tabs-custom{display:flex;flex-direction:column}.is-disabled{pointer-events:none;opacity:.4}.fd-tabs{flex-grow:0;flex-wrap:nowrap}.fd-tabs__content{overflow-y:auto;flex-grow:1}.fd-tabs__item{flex-shrink:0}.fd-tabs__wrapper{flex-grow:1;display:flex;flex-wrap:wrap;align-items:center}.fd-tabs__wrapper--collapsible{overflow:hidden;flex-wrap:nowrap}.fd-tabs__item--success .fd-tabs__link .fd-tabs__tag{color:#107e3e;color:var(--sapSuccessColor, #107e3e)}.fd-tabs__item--error .fd-tabs__link .fd-tabs__tag{color:#b00;color:var(--sapErrorColor, #b00)}.fd-tabs__item--warning .fd-tabs__link .fd-tabs__tag{color:#e9730c;color:var(--sapWarningColor, #e9730c)}.fd-tabs__item--information .fd-tabs__link .fd-tabs__tag{color:#0a6ed1;color:var(--sapInformationColor, #0a6ed1)}.fd-tabs__item--neutral .fd-tabs__link .fd-tabs__tag{border-right-color:#6a6d70;border-right-color:var(--sapNeutralBorderColor, #6a6d70)}.fd-tabs--filter .fd-tabs__link.is-selected:after{background-color:#0854a0;background-color:var(--fdTabs_Selected_Color, var(--sapSelectedColor, #0854a0))}\n"], components: [{ type: TabIconComponent, selector: "[fd-tab-icon]", inputs: ["class", "icon"] }, { type: TabItemExpandComponent, selector: "fd-item-expand", inputs: ["label"] }, { type: i5.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { type: i5.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }], directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: TabItemDirective, selector: "[fd-tab-item]", inputs: ["class", "tabItemState", "header", "disabled", "fdTabItemClass"] }, { type: TabLinkDirective, selector: "[fd-tab-link]", inputs: ["active", "disabled"], outputs: ["keyDown"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i6.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: TabHeaderDirective, selector: "[fd-tab-header]" }, { type: TabCounterHeaderDirective, selector: "[fd-tab-counter-header]" }, { type: TabLabelDirective, selector: "[fd-tab-label]" }, { type: TabCountDirective, selector: "[fd-tab-count]" }, { type: TabProcessDirective, selector: "[fd-tab-process]" }, { type: i6.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: TabTagDirective, selector: "[fd-tab-tag]" }, { type: TabProcessIconDirective, selector: "[fd-tab-process-icon]" }, { type: TabSeparatorDirective, selector: "[fd-tab-separator]" }, { type: i5.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { type: i9.ScrollSpyDirective, selector: "[fdScrollSpy]", inputs: ["trackedTags", "fireEmpty", "targetPercent", "targetOffset", "scrollSpyDisabled"], outputs: ["spyChange"] }, { type: i5.MenuInteractiveDirective, selector: "[fd-menu-interactive]" }, { type: i5.MenuTitleDirective, selector: "[fd-menu-title]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+TabListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: TabListComponent, selector: "fd-tab-list", inputs: { size: "size", mode: "mode", collapseOverflow: "collapseOverflow", maxVisibleTabs: "maxVisibleTabs", stackContent: "stackContent", maxContentHeight: "maxContentHeight", collapsibleTabs: "collapsibleTabs", expandOverflowText: "expandOverflowText" }, outputs: { selectedTabChange: "selectedTabChange" }, host: { classAttribute: "fd-tabs-custom" }, providers: [TabsService, contentDensityObserverProviders()], queries: [{ propertyName: "tabPanels", predicate: TabPanelComponent }], viewQueries: [{ propertyName: "overflowTrigger", first: true, predicate: TabItemExpandComponent, descendants: true, read: ElementRef }, { propertyName: "headerContainer", first: true, predicate: ["headerContainer"], descendants: true, read: ElementRef }, { propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, read: ElementRef, static: true }, { propertyName: "tabHeaderLinks", predicate: TabLinkDirective, descendants: true }, { propertyName: "tabHeaders", predicate: TabItemDirective, descendants: true }], ngImport: i0, template: "<div\n    #headerContainer\n    role=\"tablist\"\n    class=\"fd-tabs\"\n    [class]=\"(mode ? 'fd-tabs--' + mode : '') + (' fd-tabs--' + size)\"\n    [class.fd-tabs--compact]=\"_contentDensityObserver.isCompact\"\n>\n    <div class=\"fd-tabs__wrapper\" [class.fd-tabs__wrapper--collapsible]=\"_isCollapsed\">\n        <ng-container *ngFor=\"let tab of _visualOrder.visible; let i = index; let last = last\">\n            <div fd-tab-item [header]=\"tab.isHeader\" [tabItemState]=\"tab.tabState\" [attr.aria-selected]=\"tab.active\">\n                <a\n                    fd-tab-link\n                    [attr.tabindex]=\"tab.active ? '0' : '-1'\"\n                    [attr.aria-controls]=\"tab.id\"\n                    [attr.aria-label]=\"tab.ariaLabel || null\"\n                    [attr.aria-labelledby]=\"!tab.ariaLabel && tab.ariaLabelledBy ? tab.ariaLabelledBy : null\"\n                    [active]=\"tab.active\"\n                    [disabled]=\"tab.disabled\"\n                    (keydown)=\"_tabHeaderKeyHandler(i, $event)\"\n                    (click)=\"_tabHeaderClickHandler(tab.panel)\"\n                >\n                    <ng-container *ngTemplateOutlet=\"tab.titleTemplate || null\"></ng-container>\n\n                    <ng-container *ngIf=\"!tab.titleTemplate\" [ngSwitch]=\"mode\">\n                        <ng-container *ngSwitchCase=\"'filter'\">\n                            <span fd-tab-header *ngIf=\"tab.isHeader\">\n                                <span fd-tab-counter-header *ngIf=\"tab.count\">{{ tab.count }}</span>\n                                <span fd-tab-label *ngIf=\"tab.title\">{{ tab.title }}</span>\n                            </span>\n                            <ng-container *ngIf=\"!tab.isHeader\">\n                                <span fd-tab-icon [icon]=\"tab.glyph\">\n                                    <p fd-tab-count>{{ tab.count }}</p>\n                                </span>\n                                <span fd-tab-label>{{ tab.title }}</span>\n                            </ng-container>\n                        </ng-container>\n\n                        <ng-container *ngSwitchCase=\"'icon-only'\">\n                            <span fd-tab-icon [icon]=\"tab.glyph\">\n                                <p fd-tab-count>{{ tab.count }}</p>\n                            </span>\n                        </ng-container>\n\n                        <ng-container *ngSwitchCase=\"'process'\">\n                            <span fd-tab-icon *ngIf=\"tab.glyph\" [icon]=\"tab.glyph\"></span>\n                            <div fd-tab-process>\n                                <span fd-tab-label *ngIf=\"tab.count\">{{ tab.count }}</span>\n                                <span fd-tab-label *ngIf=\"tab.title\">{{ tab.title }}</span>\n                            </div>\n                        </ng-container>\n\n                        <ng-container *ngSwitchDefault>\n                            <p fd-tab-count *ngIf=\"tab.count\">{{ tab.count }}</p>\n                            <span fd-tab-tag>{{ tab.title }}</span>\n                        </ng-container>\n                    </ng-container>\n                </a>\n                <div fd-tab-process-icon *ngIf=\"mode === 'process' && !last\"></div>\n            </div>\n\n            <div *ngIf=\"tab.isHeader\" fd-tab-separator></div>\n        </ng-container>\n    </div>\n\n    <fd-item-expand\n        *ngIf=\"_isCollapsed\"\n        [fdMenuTrigger]=\"menu\"\n        [label]=\"expandOverflowText\"\n        (keydown)=\"_onTriggerKeydown($event, menu)\"\n    >\n    </fd-item-expand>\n</div>\n\n<div\n    #contentContainer\n    class=\"fd-tabs__content\"\n    [style.maxHeight]=\"maxContentHeight\"\n    fdScrollSpy\n    [trackedTags]=\"['fd-tab']\"\n    [scrollSpyDisabled]=\"_disableScrollSpy\"\n    (spyChange)=\"_highlightActiveTab($event)\"\n>\n    <ng-content></ng-content>\n</div>\n\n<fd-menu #menu>\n    <li\n        fd-menu-item\n        *ngFor=\"let tab of _visualOrder.overflowing\"\n        (onSelect)=\"_overflowingTabHeaderClickHandler(tab.panel)\"\n    >\n        <div fd-menu-interactive>\n            <ng-container\n                *ngTemplateOutlet=\"\n                    !tab.titleTemplate && mode === 'icon-only' ? iconOnlyTemplate : tab.titleTemplate || textTitle;\n                    context: { $implicit: tab }\n                \"\n            ></ng-container>\n        </div>\n    </li>\n</fd-menu>\n\n<ng-template #textTitle let-tab>\n    <span fd-menu-title>{{ tab.title }}</span>\n</ng-template>\n\n<ng-template #iconOnlyTemplate let-tab>\n    <span fd-tab-icon [icon]=\"tab.glyph\">\n        <p fd-tab-count>{{ tab.count }}</p>\n    </span>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.24.4\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n *//*!\n.fd-tabs+()\n    .fd-tabs__item?+(([aria-selected=true]),)\n    .fd-tabs__link+((.is-selected,)\n.fd-tabs__panel+([aria-expanded]|.is-expanded)\n*/.fd-tabs{--fdTabs_Icon_Size:1.125rem;--fdTabs_Icon_Selection_Height:2.625rem;-webkit-box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;-ms-flex-wrap:wrap;-webkit-box-shadow:var(--sapContent_HeaderShadow);align-items:center;background-color:var(--sapObjectHeader_Background);border:0;border-color:var(--sapObjectHeader_BorderColor);box-shadow:var(--sapContent_HeaderShadow);box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);display:flex;flex-wrap:wrap;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);list-style:none;margin:0;padding:0}.fd-tabs:after,.fd-tabs:before{box-sizing:inherit;font-size:inherit}.fd-tabs__count{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);line-height:1rem;margin:0;padding:0 0 .125rem}.fd-tabs__count:after,.fd-tabs__count:before{box-sizing:inherit;font-size:inherit}.fd-tabs__link{-webkit-box-sizing:border-box;-webkit-transition:0s;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);cursor:pointer;display:block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);line-height:1rem;margin:0;padding:.875rem .75rem;position:relative;text-decoration:none;transition:0s}.fd-tabs__link:after,.fd-tabs__link:before{box-sizing:inherit;font-size:inherit}.fd-tabs__link.is-selected .fd-tabs__icon,.fd-tabs__link[aria-selected=true] .fd-tabs__icon{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__link.is-selected .fd-tabs__icon:after,.fd-tabs__link.is-selected .fd-tabs__tag:after,.fd-tabs__link[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__link[aria-selected=true] .fd-tabs__tag:after{background-color:var(--fdIcon_Tab_Bar_Selection_Bar_Color)}.fd-tabs__link.is-focus,.fd-tabs__link:focus{box-shadow:none;outline:none;z-index:5}.fd-tabs__link.is-focus .fd-tabs__icon:before,.fd-tabs__link.is-focus .fd-tabs__tag:before,.fd-tabs__link:focus .fd-tabs__icon:before,.fd-tabs__link:focus .fd-tabs__tag:before{bottom:0;content:\"\";left:0;outline:var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth);outline-offset:var(--sapContent_FocusWidth);position:absolute;right:0;top:0}.fd-tabs__item{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0 .25rem;padding:0;position:relative}.fd-tabs__item:after,.fd-tabs__item:before{box-sizing:inherit;font-size:inherit}.fd-tabs__item.is-selected .fd-tabs__tag,.fd-tabs__item[aria-selected=true] .fd-tabs__tag{color:var(--fdIcon_Tab_Bar_Selection_Color)}.fd-tabs__item.is-selected .fd-tabs__icon,.fd-tabs__item[aria-selected=true] .fd-tabs__icon{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item.is-selected .fd-tabs__icon:after,.fd-tabs__item.is-selected .fd-tabs__link:after,.fd-tabs__item.is-selected .fd-tabs__tag:after,.fd-tabs__item[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item[aria-selected=true] .fd-tabs__tag:after{background-color:var(--fdIcon_Tab_Bar_Selection_Bar_Color)}.fd-tabs__item--error .fd-tabs__icon{border-color:var(--sapErrorColor);color:var(--sapErrorColor)}.fd-tabs__item--error .fd-tabs__link .fd-tabs__tag{color:var(--sapErrorColor)}.fd-tabs__item--error.is-selected .fd-tabs__icon,.fd-tabs__item--error[aria-selected=true] .fd-tabs__icon{background-color:var(--sapErrorColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item--error.is-selected .fd-tabs__icon:after,.fd-tabs__item--error.is-selected .fd-tabs__link:after,.fd-tabs__item--error.is-selected .fd-tabs__tag:after,.fd-tabs__item--error[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item--error[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item--error[aria-selected=true] .fd-tabs__tag:after{background-color:var(--sapErrorColor)}.fd-tabs__item--warning .fd-tabs__icon{border-color:var(--sapWarningColor);color:var(--sapWarningColor)}.fd-tabs__item--warning .fd-tabs__link .fd-tabs__tag{color:var(--sapWarningColor)}.fd-tabs__item--warning.is-selected .fd-tabs__icon,.fd-tabs__item--warning[aria-selected=true] .fd-tabs__icon{background-color:var(--sapWarningColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item--warning.is-selected .fd-tabs__icon:after,.fd-tabs__item--warning.is-selected .fd-tabs__link:after,.fd-tabs__item--warning.is-selected .fd-tabs__tag:after,.fd-tabs__item--warning[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item--warning[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item--warning[aria-selected=true] .fd-tabs__tag:after{background-color:var(--sapWarningColor)}.fd-tabs__item--success .fd-tabs__icon{border-color:var(--sapSuccessColor);color:var(--sapSuccessColor)}.fd-tabs__item--success .fd-tabs__link .fd-tabs__tag{color:var(--sapSuccessColor)}.fd-tabs__item--success.is-selected .fd-tabs__icon,.fd-tabs__item--success[aria-selected=true] .fd-tabs__icon{background-color:var(--sapSuccessColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item--success.is-selected .fd-tabs__icon:after,.fd-tabs__item--success.is-selected .fd-tabs__link:after,.fd-tabs__item--success.is-selected .fd-tabs__tag:after,.fd-tabs__item--success[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item--success[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item--success[aria-selected=true] .fd-tabs__tag:after{background-color:var(--sapSuccessColor)}.fd-tabs__item--information .fd-tabs__icon{border-color:var(--sapInformationColor);color:var(--sapInformationColor)}.fd-tabs__item--information .fd-tabs__link .fd-tabs__tag{color:var(--sapInformationColor)}.fd-tabs__item--information.is-selected .fd-tabs__icon,.fd-tabs__item--information[aria-selected=true] .fd-tabs__icon{background-color:var(--sapInformationColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item--information.is-selected .fd-tabs__icon:after,.fd-tabs__item--information.is-selected .fd-tabs__link:after,.fd-tabs__item--information.is-selected .fd-tabs__tag:after,.fd-tabs__item--information[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item--information[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item--information[aria-selected=true] .fd-tabs__tag:after{background-color:var(--sapInformationColor)}.fd-tabs__item--neutral .fd-tabs__icon{border-color:var(--sapNeutralColor);color:var(--sapNeutralColor)}.fd-tabs__item--neutral .fd-tabs__link .fd-tabs__tag{color:var(--sapNeutralColor)}.fd-tabs__item--neutral.is-selected .fd-tabs__icon,.fd-tabs__item--neutral[aria-selected=true] .fd-tabs__icon{background-color:var(--sapNeutralColor);color:var(--sapContent_ContrastIconColor)}.fd-tabs__item--neutral.is-selected .fd-tabs__icon:after,.fd-tabs__item--neutral.is-selected .fd-tabs__link:after,.fd-tabs__item--neutral.is-selected .fd-tabs__tag:after,.fd-tabs__item--neutral[aria-selected=true] .fd-tabs__icon:after,.fd-tabs__item--neutral[aria-selected=true] .fd-tabs__link:after,.fd-tabs__item--neutral[aria-selected=true] .fd-tabs__tag:after{background-color:var(--sapNeutralColor)}.fd-tabs__item:first-child{margin-left:0}.fd-tabs__item:first-child .fd-tabs__link{margin-left:.1875rem;padding-left:0}.fd-tabs__item:first-child .fd-tabs__link[dir=rtl],[dir=rtl] .fd-tabs__item:first-child .fd-tabs__link{margin-left:0;margin-right:.1875rem}.fd-tabs__item[dir=rtl]:first-child,[dir=rtl] .fd-tabs__item:first-child{margin-left:.25rem;margin-right:0}.fd-tabs__item[dir=rtl]:first-child .fd-tabs__link,[dir=rtl] .fd-tabs__item:first-child .fd-tabs__link{padding-left:.875rem;padding-right:0}.fd-tabs__icon{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background-color:transparent;border:0;border:var(--fdIcon_Tab_Bar_Icon_Border_Weight) solid var(--fdIcon_Tab_Bar_Icon_Border_Color);border-radius:50%;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdIcon_Tab_Bar_Inactive_Tab_Icon_Color);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:var(--fdTabs_Icon_Selection_Height);justify-content:center;line-height:var(--sapContent_LineHeight);margin:0 .188rem;padding:0;position:relative;width:var(--fdTabs_Icon_Selection_Height)}.fd-tabs__icon:after,.fd-tabs__icon:before{box-sizing:inherit;font-size:inherit}.fd-tabs__icon [class*=sap-icon],.fd-tabs__icon[class*=sap-icon]{background:inherit;border-radius:inherit;color:inherit;font-size:inherit;font-size:var(--fdTabs_Icon_Size);line-height:1}.fd-tabs__icon:after{-webkit-transition:all .125s ease-in;border-radius:.125rem .125rem 0 0;bottom:-.875rem;content:\"\";display:inline-block;height:var(--fdIcon_Tab_Bar_Selection_Bar_Height);left:-.1875rem;position:absolute;transition:all .125s ease-in;width:calc(100% + .375rem)}.fd-tabs__tag{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:inline-block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);line-height:1rem;margin:0;padding:0;position:relative}.fd-tabs__tag:after,.fd-tabs__tag:before{box-sizing:inherit;font-size:inherit}.fd-tabs__tag:after{-webkit-transition:all .125s ease-in;border-radius:.125rem .125rem 0 0;bottom:-.875rem;content:\"\";display:inline-block;height:var(--fdIcon_Tab_Bar_Selection_Bar_Height);left:-.1875rem;position:absolute;transition:all .125s ease-in;width:calc(100% + .375rem)}.fd-tabs__panel{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tabs__panel:after,.fd-tabs__panel:before{box-sizing:inherit;font-size:inherit}.fd-tabs__panel[aria-expanded=false]{display:none}.fd-tabs__panel.is-expanded,.fd-tabs__panel[aria-expanded=true]{display:block}.fd-tabs__counter-header{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:1.5rem;font-weight:400;line-height:var(--sapContent_LineHeight);line-height:1.5rem;margin:0;padding:0 .5rem 0 0}.fd-tabs__counter-header:after,.fd-tabs__counter-header:before{box-sizing:inherit;font-size:inherit}.fd-tabs__overflow{-webkit-box-sizing:border-box;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;justify-content:center;line-height:var(--sapContent_LineHeight);margin:0 0 0 auto;padding:0}.fd-tabs__overflow:after,.fd-tabs__overflow:before{box-sizing:inherit;font-size:inherit}.fd-tabs__overflow [class*=sap-icon],.fd-tabs__overflow[class*=sap-icon]{background:inherit;border-radius:inherit;color:inherit;font-size:inherit;line-height:1}.fd-tabs__process-icon{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_NonInteractiveIconColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:1rem;font-weight:400;line-height:var(--sapContent_LineHeight);line-height:1;margin:0;padding:0 .5rem}.fd-tabs__process-icon:after,.fd-tabs__process-icon:before{box-sizing:inherit;font-size:inherit}.fd-tabs__process-icon:before{text-rendering:optimizeLegibility;content:\"\\e0c7\";font-family:SAP-icons;text-align:center;text-decoration:inherit;text-transform:none}.fd-tabs__label{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);display:block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontSmallSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;max-width:100%;padding:0 0 0 .125rem}.fd-tabs__label:after,.fd-tabs__label:before{box-sizing:inherit;font-size:inherit}.fd-tabs__label:first-child{padding-bottom:.375rem}.fd-tabs__separator{-webkit-box-sizing:border-box;border:0;border-right:solid var(--sapGroup_TitleBorderColor);border-right-width:.0625rem;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:2rem;line-height:var(--sapContent_LineHeight);line-height:2rem;margin:0 .25rem;padding:0}.fd-tabs__separator:after,.fd-tabs__separator:before{box-sizing:inherit;font-size:inherit}.fd-tabs__header{-webkit-box-sizing:border-box;align-items:center;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tabs__header:after,.fd-tabs__header:before{box-sizing:inherit;font-size:inherit}.fd-tabs__header .fd-tabs__label{max-width:4rem}.fd-tabs--filter .fd-tabs__count,.fd-tabs--icon-only .fd-tabs__count,.fd-tabs--process .fd-tabs__count{font-size:var(--sapFontSmallSize)}.fd-tabs--filter .fd-tabs__item:first-child .fd-tabs__link,.fd-tabs--icon-only .fd-tabs__item:first-child .fd-tabs__link,.fd-tabs--process .fd-tabs__item:first-child .fd-tabs__link{margin:0}.fd-tabs--icon-only .fd-tabs__link,.fd-tabs--process .fd-tabs__link{padding-bottom:1rem;padding-top:1rem}.fd-tabs--icon-only .fd-tabs__icon:after,.fd-tabs--process .fd-tabs__icon:after{bottom:-1.0625rem}.fd-tabs--filter .fd-tabs__count,.fd-tabs--icon-only .fd-tabs__count{left:calc(100% + .1875rem);position:absolute;top:0}.fd-tabs--filter[dir=rtl] .fd-tabs__count,.fd-tabs--icon-only[dir=rtl] .fd-tabs__count,[dir=rtl] .fd-tabs--filter .fd-tabs__count,[dir=rtl] .fd-tabs--icon-only .fd-tabs__count{left:auto;right:calc(100% + .1875rem)}.fd-tabs--process .fd-tabs__item{margin:0 .25rem 0 0}.fd-tabs--process .fd-tabs__item,.fd-tabs--process .fd-tabs__link{align-items:center;display:flex}.fd-tabs--process .fd-tabs__link{padding-left:0;padding-right:0}.fd-tabs--process .fd-tabs__icon{margin:0 .1875rem}.fd-tabs--process .fd-tabs__label{line-height:.875rem;max-width:7.5rem;overflow:hidden;white-space:nowrap}.fd-tabs--process[dir=rtl] .fd-tabs__item,[dir=rtl] .fd-tabs--process .fd-tabs__item{margin:0 0 0 .25rem}.fd-tabs--process[dir=rtl] .fd-tabs__item:first-child .fd-tabs__link,[dir=rtl] .fd-tabs--process .fd-tabs__item:first-child .fd-tabs__link{padding-left:0;padding-right:0}.fd-tabs--filter{align-items:center;display:flex}.fd-tabs--filter .fd-tabs__item{margin:0;padding:0 .25rem;width:5.375rem}.fd-tabs--filter .fd-tabs__item[dir=rtl],[dir=rtl] .fd-tabs--filter .fd-tabs__item{margin:0}.fd-tabs--filter .fd-tabs__item--header{width:auto}.fd-tabs--filter .fd-tabs__icon{margin-bottom:.375rem}.fd-tabs--filter .fd-tabs__icon:after{content:none}.fd-tabs--filter .fd-tabs__label{line-height:.875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fd-tabs--filter .fd-tabs__link{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:flex;flex-direction:column;height:5.5rem;justify-content:center;padding:.875rem .188rem .625rem;position:relative;text-align:center}.fd-tabs--filter .fd-tabs__link:after{-webkit-transition:all .125s ease-in;border-radius:.125rem .125rem 0 0;bottom:-.875rem;bottom:0;content:\"\";display:inline-block;height:var(--fdIcon_Tab_Bar_Selection_Bar_Height);left:-.1875rem;position:absolute;transition:all .125s ease-in;width:calc(100% + .375rem)}.fd-tabs--filter .fd-tabs__link.is-focus,.fd-tabs--filter .fd-tabs__link:focus{box-shadow:none;outline:none;z-index:5}.fd-tabs--filter[dir=rtl] .fd-tabs__item:first-child .fd-tabs__link,[dir=rtl] .fd-tabs--filter .fd-tabs__item:first-child .fd-tabs__link{padding-left:.188rem;padding-right:.188rem}.fd-tabs--compact{--fdTabs_Icon_Size:1.125rem;--fdTabs_Icon_Selection_Height:1.875rem}.fd-tabs--compact .fd-tabs__label:first-child{padding-bottom:.25rem}.fd-tabs--compact.fd-tabs--filter .fd-tabs__link{height:4.75rem}.fd-tabs--s{padding:0 1rem}.fd-tabs--l,.fd-tabs--m{padding:0 2rem}.fd-tabs--xl,.fd-tabs--xxl{padding:0 3rem}.fd-tabs[dir=rtl] .fd-tabs__process-icon,[dir=rtl] .fd-tabs .fd-tabs__process-icon{transform:rotate(180deg)}.fd-tabs[dir=rtl] .fd-tabs__counter-header,[dir=rtl] .fd-tabs .fd-tabs__counter-header{padding-left:.5rem;padding-right:0}.fd-tabs[dir=rtl] .fd-tabs__overflow,[dir=rtl] .fd-tabs .fd-tabs__overflow{margin-left:0;margin-right:auto}.fd-tabs__process{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tabs__process:after,.fd-tabs__process:before{box-sizing:inherit;font-size:inherit}.fd-tabs-custom{display:flex;flex-direction:column}.is-disabled{pointer-events:none;opacity:.4}.fd-tabs{flex-grow:0;flex-wrap:nowrap}.fd-tabs__content{overflow-y:auto;flex-grow:1}.fd-tabs__item{flex-shrink:0}.fd-tabs__wrapper{flex-grow:1;display:flex;flex-wrap:wrap;align-items:center}.fd-tabs__wrapper--collapsible{overflow:hidden;flex-wrap:nowrap}.fd-tabs__item--success .fd-tabs__link .fd-tabs__tag{color:#107e3e;color:var(--sapSuccessColor, #107e3e)}.fd-tabs__item--error .fd-tabs__link .fd-tabs__tag{color:#b00;color:var(--sapErrorColor, #b00)}.fd-tabs__item--warning .fd-tabs__link .fd-tabs__tag{color:#e9730c;color:var(--sapWarningColor, #e9730c)}.fd-tabs__item--information .fd-tabs__link .fd-tabs__tag{color:#0a6ed1;color:var(--sapInformationColor, #0a6ed1)}.fd-tabs__item--neutral .fd-tabs__link .fd-tabs__tag{border-right-color:#6a6d70;border-right-color:var(--sapNeutralBorderColor, #6a6d70)}.fd-tabs--filter .fd-tabs__link.is-selected:after{background-color:#0854a0;background-color:var(--fdTabs_Selected_Color, var(--sapSelectedColor, #0854a0))}\n"], components: [{ type: TabIconComponent, selector: "[fd-tab-icon]", inputs: ["class", "icon"] }, { type: TabItemExpandComponent, selector: "fd-item-expand", inputs: ["label"] }, { type: i5.MenuComponent, selector: "fd-menu", inputs: ["mobile", "disabled", "focusTrapped", "openOnHoverTime", "mobileConfig", "ariaLabel", "ariaLabelledby", "id"], outputs: ["activePath"] }, { type: i5.MenuItemComponent, selector: "li[fd-menu-item]", inputs: ["disabled", "itemId", "submenu", "parentSubmenu"], outputs: ["onSelect"], exportAs: ["fd-menu-item"] }], directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: TabItemDirective, selector: "[fd-tab-item]", inputs: ["class", "tabItemState", "header", "disabled", "fdTabItemClass"] }, { type: TabLinkDirective, selector: "[fd-tab-link]", inputs: ["active", "disabled"], outputs: ["keyDown"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i6.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: TabHeaderDirective, selector: "[fd-tab-header]" }, { type: TabCounterHeaderDirective, selector: "[fd-tab-counter-header]" }, { type: TabLabelDirective, selector: "[fd-tab-label]" }, { type: TabCountDirective, selector: "[fd-tab-count]" }, { type: TabProcessDirective, selector: "[fd-tab-process]" }, { type: i6.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: TabTagDirective, selector: "[fd-tab-tag]" }, { type: TabProcessIconDirective, selector: "[fd-tab-process-icon]" }, { type: TabSeparatorDirective, selector: "[fd-tab-separator]" }, { type: i5.MenuTriggerDirective, selector: "[fdMenuTrigger]", inputs: ["fdMenuTrigger"] }, { type: i9.ScrollSpyDirective, selector: "[fdScrollSpy]", inputs: ["trackedTags", "fireEmpty", "targetPercent", "targetOffset", "scrollSpyDisabled"], outputs: ["spyChange"] }, { type: i5.MenuInteractiveDirective, selector: "[fd-menu-interactive]" }, { type: i5.MenuTitleDirective, selector: "[fd-menu-title]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: TabListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-tab-list', host: {

package/fesm2020/fundamental-ngx-core-time.mjs

@@ -211,13 +211,6 @@ class TimeColumnComponent {
         }
     }
     /** @hidden */
-    mouseScrollHandler(event) {
-        event.preventDefault();
-        if (this._active) {
-            event.deltaY > 0 ? this.scrollDown() : this.scrollUp();
-        }
-    }
-    /** @hidden */
     spinnerButtonKeyupHandle(event, upButton) {
         if (KeyUtil.isKeyCode(event, SPACE)) {
             if (upButton) {
@@ -395,7 +388,7 @@ class TimeColumnComponent {
     }
 }
 TimeColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: TimeColumnComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-TimeColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: TimeColumnComponent, selector: "fd-time-column", inputs: { rows: "rows", spinners: "spinners", activeValue: "activeValue", active: "active", meridian: "meridian", id: "id", timeConfig: "timeConfig", offset: "offset", elementsAtOnce: "elementsAtOnce" }, outputs: { activeValueChange: "activeValueChange", activeStateChange: "activeStateChange" }, host: { listeners: { "click": "onItemClick()", "keydown": "keyDownHandler($event)", "wheel": "mouseScrollHandler($event)" }, properties: { "class.fd-time__col--period": "this.meridian" }, classAttribute: "fd-time__col" }, viewQueries: [{ propertyName: "carousel", first: true, predicate: CarouselDirective, descendants: true }, { propertyName: "indicator", first: true, predicate: ["indicator"], descendants: true, read: ElementRef }, { propertyName: "items", predicate: CarouselItemDirective, descendants: true }], ngImport: i0, template: "<label class=\"fd-time__slider-label\">{{ timeConfig?.label }}</label>\n<button\n    *ngIf=\"active && spinners\"\n    fd-button\n    fdType=\"transparent\"\n    glyph=\"navigation-up-arrow\"\n    tabindex=\"-1\"\n    [title]=\"timeConfig?.decreaseLabel\"\n    [ariaLabel]=\"timeConfig?.decreaseLabel\"\n    (keyup)=\"spinnerButtonKeyupHandle($event, true)\"\n    (click)=\"scrollUp($event)\"\n></button>\n<div\n    class=\"fd-time__wrapper\"\n    [class.fd-time__wrapper--active]=\"active\"\n    [class.fd-time__wrapper--meridian]=\"meridian\"\n    [style.height.px]=\"active ? wrapperHeight : ''\"\n>\n    <ul\n        class=\"fd-time__list\"\n        [class.fd-time-column-custom-hidden]=\"!active\"\n        [config]=\"config\"\n        (click)=\"indicator.focus()\"\n        (activeChange)=\"activeChangedHandle($event)\"\n        (dragStateChange)=\"handleDrag($event)\"\n        fdCarousel\n    >\n        <li\n            class=\"fd-time__item\"\n            fdCarouselItem\n            *ngFor=\"let row of rows; let index = index\"\n            #item=\"fdCarouselItem\"\n            [id]=\"_createColumnItemIdByIndex(index)\"\n            [attr.data-displayed-value]=\"row.value\"\n            [value]=\"row\"\n        >\n            <span class=\"fd-time__unit\" role=\"button\" [attr.aria-label]=\"row.label\" (click)=\"pick(item, index)\">\n                {{ row.label }}\n            </span>\n        </li>\n    </ul>\n    <div\n        class=\"fd-time__current-indicator\"\n        #indicator\n        tabindex=\"0\"\n        role=\"listbox\"\n        [attr.id]=\"currentIndicatorId\"\n        [class.fd-time-column-custom-hidden]=\"!active\"\n        [attr.aria-labelledby]=\"currentIndicatorValueId\"\n        [attr.aria-description]=\"timeConfig?.navigationInstruction\"\n        (focus)=\"_onFocusIndicator()\"\n    >\n        <span\n            class=\"fd-time-column-custom-hidden\"\n            aria-live=\"assertive\"\n            aria-atomic=\"true\"\n            [attr.aria-hidden]=\"!active\"\n            [attr.id]=\"currentIndicatorValueId\"\n            [class.fd-time-column-custom-hidden]=\"active\"\n        >\n            {{ activeValue?.label }} {{ timeConfig?.label }}\n        </span>\n    </div>\n    <span *ngIf=\"!active\" class=\"fd-time__item fd-time__item--collapsed\">\n        {{ activeValue?.label }}\n    </span>\n</div>\n<button\n    *ngIf=\"active && spinners\"\n    fd-button\n    fdType=\"transparent\"\n    glyph=\"navigation-down-arrow\"\n    tabindex=\"-1\"\n    [title]=\"timeConfig?.increaseLabel\"\n    [ariaLabel]=\"timeConfig?.increaseLabel\"\n    (keyup)=\"spinnerButtonKeyupHandle($event)\"\n    (click)=\"scrollDown()\"\n></button>\n", styles: [".fd-time__col .fd-carousel{transition:all .2s ease-in}.fd-time__list{overflow:visible}.fd-time-column-custom-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.fd-time__current-indicator{pointer-events:none}.fd-time__current-indicator:focus{outline:none}.fd-time--compact .fd-time__wrapper--meridian .fd-time__item:last-child.fd-time__item--collapsed,.fd-time .fd-time__wrapper--meridian .fd-time__item:last-child.fd-time__item--collapsed{margin-bottom:0;margin-top:0}\n"], components: [{ type: i1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.CarouselDirective, selector: "[fdCarousel]", inputs: ["config", "active"], outputs: ["activeChange", "dragStateChange"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.CarouselItemDirective, selector: "[fd-carousel-item], [fdCarouselItem]", inputs: ["value", "initialHeight", "initialWidth", "id"], exportAs: ["fdCarouselItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+TimeColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: TimeColumnComponent, selector: "fd-time-column", inputs: { rows: "rows", spinners: "spinners", activeValue: "activeValue", active: "active", meridian: "meridian", id: "id", timeConfig: "timeConfig", offset: "offset", elementsAtOnce: "elementsAtOnce" }, outputs: { activeValueChange: "activeValueChange", activeStateChange: "activeStateChange" }, host: { listeners: { "click": "onItemClick()", "keydown": "keyDownHandler($event)" }, properties: { "class.fd-time__col--period": "this.meridian" }, classAttribute: "fd-time__col" }, viewQueries: [{ propertyName: "carousel", first: true, predicate: CarouselDirective, descendants: true }, { propertyName: "indicator", first: true, predicate: ["indicator"], descendants: true, read: ElementRef }, { propertyName: "items", predicate: CarouselItemDirective, descendants: true }], ngImport: i0, template: "<label class=\"fd-time__slider-label\">{{ timeConfig?.label }}</label>\n<button\n    *ngIf=\"active && spinners\"\n    fd-button\n    fdType=\"transparent\"\n    glyph=\"navigation-up-arrow\"\n    tabindex=\"-1\"\n    [title]=\"timeConfig?.decreaseLabel\"\n    [ariaLabel]=\"timeConfig?.decreaseLabel\"\n    (keyup)=\"spinnerButtonKeyupHandle($event, true)\"\n    (click)=\"scrollUp($event)\"\n></button>\n<div\n    class=\"fd-time__wrapper\"\n    [class.fd-time__wrapper--active]=\"active\"\n    [class.fd-time__wrapper--meridian]=\"meridian\"\n    [style.height.px]=\"active ? wrapperHeight : ''\"\n>\n    <ul\n        class=\"fd-time__list\"\n        [class.fd-time-column-custom-hidden]=\"!active\"\n        [config]=\"config\"\n        (click)=\"indicator.focus()\"\n        (activeChange)=\"activeChangedHandle($event)\"\n        (dragStateChange)=\"handleDrag($event)\"\n        fdCarousel\n    >\n        <li\n            class=\"fd-time__item\"\n            fdCarouselItem\n            *ngFor=\"let row of rows; let index = index\"\n            #item=\"fdCarouselItem\"\n            [id]=\"_createColumnItemIdByIndex(index)\"\n            [attr.data-displayed-value]=\"row.value\"\n            [value]=\"row\"\n        >\n            <span class=\"fd-time__unit\" role=\"button\" [attr.aria-label]=\"row.label\" (click)=\"pick(item, index)\">\n                {{ row.label }}\n            </span>\n        </li>\n    </ul>\n    <div\n        class=\"fd-time__current-indicator\"\n        #indicator\n        tabindex=\"0\"\n        role=\"listbox\"\n        [attr.id]=\"currentIndicatorId\"\n        [class.fd-time-column-custom-hidden]=\"!active\"\n        [attr.aria-labelledby]=\"currentIndicatorValueId\"\n        [attr.aria-description]=\"timeConfig?.navigationInstruction\"\n        (focus)=\"_onFocusIndicator()\"\n    >\n        <span\n            class=\"fd-time-column-custom-hidden\"\n            aria-live=\"assertive\"\n            aria-atomic=\"true\"\n            [attr.aria-hidden]=\"!active\"\n            [attr.id]=\"currentIndicatorValueId\"\n            [class.fd-time-column-custom-hidden]=\"active\"\n        >\n            {{ activeValue?.label }} {{ timeConfig?.label }}\n        </span>\n    </div>\n    <span *ngIf=\"!active\" class=\"fd-time__item fd-time__item--collapsed\">\n        {{ activeValue?.label }}\n    </span>\n</div>\n<button\n    *ngIf=\"active && spinners\"\n    fd-button\n    fdType=\"transparent\"\n    glyph=\"navigation-down-arrow\"\n    tabindex=\"-1\"\n    [title]=\"timeConfig?.increaseLabel\"\n    [ariaLabel]=\"timeConfig?.increaseLabel\"\n    (keyup)=\"spinnerButtonKeyupHandle($event)\"\n    (click)=\"scrollDown()\"\n></button>\n", styles: [".fd-time__col .fd-carousel{transition:all .2s ease-in}.fd-time__list{overflow:visible}.fd-time-column-custom-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.fd-time__current-indicator{pointer-events:none}.fd-time__current-indicator:focus{outline:none}.fd-time--compact .fd-time__wrapper--meridian .fd-time__item:last-child.fd-time__item--collapsed,.fd-time .fd-time__wrapper--meridian .fd-time__item:last-child.fd-time__item--collapsed{margin-bottom:0;margin-top:0}\n"], components: [{ type: i1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.CarouselDirective, selector: "[fdCarousel]", inputs: ["config", "active"], outputs: ["activeChange", "dragStateChange"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.CarouselItemDirective, selector: "[fd-carousel-item], [fdCarouselItem]", inputs: ["value", "initialHeight", "initialWidth", "id"], exportAs: ["fdCarouselItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: TimeColumnComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-time-column', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
@@ -441,9 +434,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
             }], keyDownHandler: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
-            }], mouseScrollHandler: [{
-                type: HostListener,
-                args: ['wheel', ['$event']]
             }] } });
 
 class TimeComponent {