igniteui-angular/fesm2022/igniteui-angular-bottom-nav.mjs

Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps

import * as i0 from '@angular/core';
import { HostBinding, Component, Directive, NgModule } from '@angular/core';
import { IgxTabContentDirective, IgxTabContentBase, IgxTabHeaderDirective, IgxTabHeaderBase, IgxTabItemDirective, IgxTabsDirective, IgxTabsBase } from 'igniteui-angular/tabs';
import { NgTemplateOutlet } from '@angular/common';

class IgxBottomNavContentComponent extends IgxTabContentDirective {
    constructor() {
        super(...arguments);
        /** @hidden */
        this.defaultClass = true;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxBottomNavContentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxBottomNavContentComponent, isStandalone: true, selector: "igx-bottom-nav-content", host: { properties: { "class.igx-bottom-nav__panel": "this.defaultClass" } }, providers: [{ provide: IgxTabContentBase, useExisting: IgxBottomNavContentComponent }], usesInheritance: true, ngImport: i0, template: "@if (tab.selected || tab.previous) {\n    <ng-content></ng-content>\n}\n" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxBottomNavContentComponent, decorators: [{
            type: Component,
            args: [{ selector: 'igx-bottom-nav-content', providers: [{ provide: IgxTabContentBase, useExisting: IgxBottomNavContentComponent }], imports: [], template: "@if (tab.selected || tab.previous) {\n    <ng-content></ng-content>\n}\n" }]
        }], propDecorators: { defaultClass: [{
                type: HostBinding,
                args: ['class.igx-bottom-nav__panel']
            }] } });

class IgxBottomNavHeaderComponent extends IgxTabHeaderDirective {
    /** @hidden */
    get cssClassSelected() {
        return this.tab.selected;
    }
    /** @hidden */
    get cssClassDisabled() {
        return this.tab.disabled;
    }
    /** @hidden */
    get cssClass() {
        return (!this.tab.disabled && !this.tab.selected);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxBottomNavHeaderComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.2", type: IgxBottomNavHeaderComponent, isStandalone: true, selector: "igx-bottom-nav-header", host: { properties: { "class.igx-bottom-nav__menu-item--selected": "this.cssClassSelected", "class.igx-bottom-nav__menu-item--disabled": "this.cssClassDisabled", "class.igx-bottom-nav__menu-item": "this.cssClass" } }, providers: [{ provide: IgxTabHeaderBase, useExisting: IgxBottomNavHeaderComponent }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxBottomNavHeaderComponent, decorators: [{
            type: Component,
            args: [{ selector: 'igx-bottom-nav-header', providers: [{ provide: IgxTabHeaderBase, useExisting: IgxBottomNavHeaderComponent }], standalone: true, template: "<ng-content></ng-content>\n" }]
        }], propDecorators: { cssClassSelected: [{
                type: HostBinding,
                args: ['class.igx-bottom-nav__menu-item--selected']
            }], cssClassDisabled: [{
                type: HostBinding,
                args: ['class.igx-bottom-nav__menu-item--disabled']
            }], cssClass: [{
                type: HostBinding,
                args: ['class.igx-bottom-nav__menu-item']
            }] } });

class IgxBottomNavItemComponent extends IgxTabItemDirective {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxBottomNavItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.2", type: IgxBottomNavItemComponent, isStandalone: true, selector: "igx-bottom-nav-item", providers: [{ provide: IgxTabItemDirective, useExisting: IgxBottomNavItemComponent }], usesInheritance: true, ngImport: i0, template: "<ng-template #headerTemplate>\n    <ng-content select=\"igx-bottom-nav-header\"></ng-content>\n</ng-template>\n<ng-template #panelTemplate>\n    <ng-content select=\"igx-bottom-nav-content\"></ng-content>\n</ng-template>\n" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxBottomNavItemComponent, decorators: [{
            type: Component,
            args: [{ selector: 'igx-bottom-nav-item', providers: [{ provide: IgxTabItemDirective, useExisting: IgxBottomNavItemComponent }], standalone: true, template: "<ng-template #headerTemplate>\n    <ng-content select=\"igx-bottom-nav-header\"></ng-content>\n</ng-template>\n<ng-template #panelTemplate>\n    <ng-content select=\"igx-bottom-nav-content\"></ng-content>\n</ng-template>\n" }]
        }] });

/** @hidden */
let NEXT_BOTTOM_NAV_ITEM_ID = 0;
/**
 * Bottom Navigation component enables the user to navigate among a number of contents displayed in a single view.
 *
 * @igxModule IgxBottomNavModule
 *
 * @igxTheme igx-bottom-nav-theme
 *
 * @igxKeywords bottom navigation
 *
 * @igxGroup Layouts
 *
 * @remarks
 * The Ignite UI for Angular Bottom Navigation component enables the user to navigate among a number of contents
 * displayed in a single view. The navigation through the contents is accomplished with the tab buttons located at bottom.
 *
 * @example
 * ```html
 * <igx-bottom-nav>
 *     <igx-bottom-nav-item>
 *         <igx-bottom-nav-header>
 *             <igx-icon igxBottomNavHeaderIcon>folder</igx-icon>
 *             <span igxBottomNavHeaderLabel>Tab 1</span>
 *         </igx-bottom-nav-header>
 *         <igx-bottom-nav-content>
 *             Content 1
 *         </igx-bottom-nav-content>
 *     </igx-bottom-nav-item>
 *     ...
 * </igx-bottom-nav>
 * ```
 */
class IgxBottomNavComponent extends IgxTabsDirective {
    constructor() {
        super(...arguments);
        /** @hidden */
        this.disableAnimation = true;
        /** @hidden */
        this.componentName = 'igx-bottom-nav';
    }
    /** @hidden */
    getNextTabId() {
        return NEXT_BOTTOM_NAV_ITEM_ID++;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxBottomNavComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxBottomNavComponent, isStandalone: true, selector: "igx-bottom-nav", providers: [{ provide: IgxTabsBase, useExisting: IgxBottomNavComponent }], usesInheritance: true, ngImport: i0, template: "@for (tab of items; track tab; let i = $index) {\n    <ng-container *ngTemplateOutlet=\"tab.panelTemplate\"></ng-container>\n}\n\n<div\n    #tablist\n    role=\"tablist\"\n    class=\"igx-bottom-nav__menu igx-bottom-nav__menu--bottom\"\n    aria-orientation=\"horizontal\"\n>\n    @for (tab of items; track tab; let i = $index) {\n        <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\n    }\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxBottomNavComponent, decorators: [{
            type: Component,
            args: [{ selector: 'igx-bottom-nav', providers: [{ provide: IgxTabsBase, useExisting: IgxBottomNavComponent }], imports: [NgTemplateOutlet], template: "@for (tab of items; track tab; let i = $index) {\n    <ng-container *ngTemplateOutlet=\"tab.panelTemplate\"></ng-container>\n}\n\n<div\n    #tablist\n    role=\"tablist\"\n    class=\"igx-bottom-nav__menu igx-bottom-nav__menu--bottom\"\n    aria-orientation=\"horizontal\"\n>\n    @for (tab of items; track tab; let i = $index) {\n        <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\n    }\n</div>\n" }]
        }] });

class IgxBottomNavHeaderLabelDirective {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxBottomNavHeaderLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxBottomNavHeaderLabelDirective, isStandalone: true, selector: "igx-bottom-nav-header-label,[igxBottomNavHeaderLabel]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxBottomNavHeaderLabelDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: 'igx-bottom-nav-header-label,[igxBottomNavHeaderLabel]',
                    standalone: true
                }]
        }] });
class IgxBottomNavHeaderIconDirective {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxBottomNavHeaderIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxBottomNavHeaderIconDirective, isStandalone: true, selector: "igx-bottom-nav-header-icon,[igxBottomNavHeaderIcon]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxBottomNavHeaderIconDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: 'igx-bottom-nav-header-icon,[igxBottomNavHeaderIcon]',
                    standalone: true
                }]
        }] });

/* NOTE: Bottom navigation directives collection for ease-of-use import in standalone components scenario */
const IGX_BOTTOM_NAV_DIRECTIVES = [
    IgxBottomNavComponent,
    IgxBottomNavItemComponent,
    IgxBottomNavHeaderComponent,
    IgxBottomNavContentComponent,
    IgxBottomNavHeaderLabelDirective,
    IgxBottomNavHeaderIconDirective
];

/**
 * @hidden
 * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
 */
class IgxBottomNavModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxBottomNavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxBottomNavModule, imports: [IgxBottomNavComponent, IgxBottomNavItemComponent, IgxBottomNavHeaderComponent, IgxBottomNavContentComponent, IgxBottomNavHeaderLabelDirective, IgxBottomNavHeaderIconDirective], exports: [IgxBottomNavComponent, IgxBottomNavItemComponent, IgxBottomNavHeaderComponent, IgxBottomNavContentComponent, IgxBottomNavHeaderLabelDirective, IgxBottomNavHeaderIconDirective] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxBottomNavModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxBottomNavModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [
                        ...IGX_BOTTOM_NAV_DIRECTIVES
                    ],
                    exports: [
                        ...IGX_BOTTOM_NAV_DIRECTIVES
                    ]
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { IGX_BOTTOM_NAV_DIRECTIVES, IgxBottomNavComponent, IgxBottomNavContentComponent, IgxBottomNavHeaderComponent, IgxBottomNavHeaderIconDirective, IgxBottomNavHeaderLabelDirective, IgxBottomNavItemComponent, IgxBottomNavModule };
//# sourceMappingURL=igniteui-angular-bottom-nav.mjs.map