@progress/kendo-angular-navigation 1.1.6 → 2.0.0-dev.202204141001

package/dist/fesm5/index.js

@@ -1,1633 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { __decorate, __metadata, __param, __extends, __assign } from 'tslib';
-import { HostBinding, Input, Component, Renderer2, ElementRef, NgModule, Directive, Optional, TemplateRef, Output, EventEmitter, ViewChildren, QueryList, NgZone, isDevMode, ViewChild, ContentChild, ChangeDetectorRef } from '@angular/core';
-import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
-import { validatePackage } from '@progress/kendo-licensing';
-import { CommonModule } from '@angular/common';
-import { isDocumentAvailable, Keys, ResizeSensorComponent, ResizeSensorModule } from '@progress/kendo-angular-common';
-import { fromEvent, merge, ReplaySubject, Subject, Subscription } from 'rxjs';
-import { filter, map, startWith, share } from 'rxjs/operators';
-
-/**
- * @hidden
- */
-var packageMetadata = {
-    name: '@progress/kendo-angular-navigation',
-    productName: 'Kendo UI for Angular',
-    productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1647344375,
-    version: '',
-    licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
-};
-
-/**
- * Represents the [Kendo UI AppBar component for Angular]({% slug overview_appbar %}).
- * Used to display information, actions, branding titles and additional navigation on the current screen.
- */
-var AppBarComponent = /** @class */ (function () {
-    function AppBarComponent(localizationService) {
-        var _this = this;
-        this.localizationService = localizationService;
-        this.hostClass = true;
-        /**
-         * Specifies the position of the AppBar
-         * ([see example]({% slug positioning_appbar %}#toc-position)).
-         *
-         * * The possible values are:
-         * * `top` (Default)—Positions the AppBar at the top of the content.
-         *    Setting the `position` property to `top` requires adding the Appbar component before the page content.
-         *    The position property applies CSS `top: 0` style in [`fixed mode`]({% slug api_navigation_appbarcomponent %}#toc-positionMode) and also adds a `box-shadow` to the bottom of the AppBar.
-         *
-         * * `bottom`—Positions the AppBar at the bottom of the content.
-         *    Setting the `position` property to `bottom` requires adding the Appbar component after the page content.
-         *   The position property applies CSS `bottom: 0` style in [`fixed mode`]({% slug api_navigation_appbarcomponent %}#toc-positionMode) and also adds a `box-shadow ` to the top of the AppBar.
-         *
-         */
-        this.position = 'top';
-        /**
-         * Specifies the positionMode of the AppBar
-         * ([see example]({% slug positioning_appbar %}#toc-positionmode)).
-         *
-         * * The possible values are:
-         * * `static` (Default)—Does not position the AppBar in any special way. It is positioned according to the normal flow of the page.
-         * * `sticky`—Positions the AppBar based on the user's scroll position. A sticky element toggles between static and fixed CSS [`position`](https://developer.mozilla.org/en-US/docs/Web/CSS/position) property, depending on the scroll position.
-         * * `fixed`—Positions the AppBar relative to the viewport. It always stays in the same place even if the page is scrolled.
-         */
-        this.positionMode = 'static';
-        /**
-         * Specifies the theme color of the AppBar.
-         * The theme color will be applied as background color of the component.
-         *
-         *
-         * * The possible values are:
-         * * `light` (Default)—Applies coloring based on light theme color.
-         * * `dark`—Applies coloring based on dark theme color.
-         * * `inherit`— Applies inherited coloring value.
-         *
-         */
-        this.themeColor = 'light';
-        this.rtl = false;
-        validatePackage(packageMetadata);
-        this.dynamicRTLSubscription = this.localizationService.changes.subscribe(function (_a) {
-            var rtl = _a.rtl;
-            _this.rtl = rtl;
-            _this.direction = _this.rtl ? 'rtl' : 'ltr';
-        });
-    }
-    Object.defineProperty(AppBarComponent.prototype, "topClass", {
-        get: function () {
-            return this.position === 'top';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(AppBarComponent.prototype, "bottomClass", {
-        get: function () {
-            return this.position === 'bottom';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(AppBarComponent.prototype, "stickyClass", {
-        get: function () {
-            return this.positionMode === 'sticky';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(AppBarComponent.prototype, "fixedClass", {
-        get: function () {
-            return this.positionMode === 'fixed';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(AppBarComponent.prototype, "staticClass", {
-        get: function () {
-            return this.positionMode === 'static';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(AppBarComponent.prototype, "lightClass", {
-        get: function () {
-            return this.themeColor === 'light';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(AppBarComponent.prototype, "darkClass", {
-        get: function () {
-            return this.themeColor === 'dark';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(AppBarComponent.prototype, "inheritClass", {
-        get: function () {
-            return this.themeColor === 'inherit';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    AppBarComponent.prototype.ngOnDestroy = function () {
-        if (this.dynamicRTLSubscription) {
-            this.dynamicRTLSubscription.unsubscribe();
-        }
-    };
-    __decorate([
-        HostBinding('class.k-appbar'),
-        __metadata("design:type", Boolean)
-    ], AppBarComponent.prototype, "hostClass", void 0);
-    __decorate([
-        HostBinding('class.k-appbar-top'),
-        __metadata("design:type", Boolean),
-        __metadata("design:paramtypes", [])
-    ], AppBarComponent.prototype, "topClass", null);
-    __decorate([
-        HostBinding('class.k-appbar-bottom'),
-        __metadata("design:type", Boolean),
-        __metadata("design:paramtypes", [])
-    ], AppBarComponent.prototype, "bottomClass", null);
-    __decorate([
-        HostBinding('class.k-appbar-sticky'),
-        __metadata("design:type", Boolean),
-        __metadata("design:paramtypes", [])
-    ], AppBarComponent.prototype, "stickyClass", null);
-    __decorate([
-        HostBinding('class.k-appbar-fixed'),
-        __metadata("design:type", Boolean),
-        __metadata("design:paramtypes", [])
-    ], AppBarComponent.prototype, "fixedClass", null);
-    __decorate([
-        HostBinding('class.k-appbar-static'),
-        __metadata("design:type", Boolean),
-        __metadata("design:paramtypes", [])
-    ], AppBarComponent.prototype, "staticClass", null);
-    __decorate([
-        HostBinding('class.k-appbar-light'),
-        __metadata("design:type", Boolean),
-        __metadata("design:paramtypes", [])
-    ], AppBarComponent.prototype, "lightClass", null);
-    __decorate([
-        HostBinding('class.k-appbar-dark'),
-        __metadata("design:type", Boolean),
-        __metadata("design:paramtypes", [])
-    ], AppBarComponent.prototype, "darkClass", null);
-    __decorate([
-        HostBinding('class.k-appbar-inherit'),
-        __metadata("design:type", Boolean),
-        __metadata("design:paramtypes", [])
-    ], AppBarComponent.prototype, "inheritClass", null);
-    __decorate([
-        HostBinding('attr.dir'),
-        __metadata("design:type", String)
-    ], AppBarComponent.prototype, "direction", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", String)
-    ], AppBarComponent.prototype, "position", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", String)
-    ], AppBarComponent.prototype, "positionMode", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", String)
-    ], AppBarComponent.prototype, "themeColor", void 0);
-    AppBarComponent = __decorate([
-        Component({
-            exportAs: 'kendoAppBar',
-            selector: 'kendo-appbar',
-            template: "\n        <ng-content></ng-content>\n    ",
-            providers: [
-                LocalizationService,
-                {
-                    provide: L10N_PREFIX,
-                    useValue: 'kendo.appbar.component'
-                }
-            ]
-        }),
-        __metadata("design:paramtypes", [LocalizationService])
-    ], AppBarComponent);
-    return AppBarComponent;
-}());
-
-/**
- * Represents the [Kendo UI AppBarSection component for Angular]({% slug contentarrangement_appbar %}#toc-sections).
- *
- * @example
- *
- * ```ts-no-run
- *  * _@Component({
- *    selector: 'my-app',
- *    template: `
- *        <kendo-appbar>
- *            <kendo-appbar-section>
- *                <h2>Page Title</h2>
- *            </kendo-appbar-section>
- *        </kendo-appbar>
- *    `
- * })
- * class AppComponent {}
- */
-var AppBarSectionComponent = /** @class */ (function () {
-    function AppBarSectionComponent() {
-        this.hostClass = true;
-    }
-    __decorate([
-        HostBinding('class.k-appbar-section'),
-        __metadata("design:type", Boolean)
-    ], AppBarSectionComponent.prototype, "hostClass", void 0);
-    AppBarSectionComponent = __decorate([
-        Component({
-            selector: 'kendo-appbar-section',
-            template: "\n        <ng-content></ng-content>\n    "
-        })
-    ], AppBarSectionComponent);
-    return AppBarSectionComponent;
-}());
-
-/**
- * @hidden
- */
-var isPresent = function (value) { return value !== null && value !== undefined; };
-/**
- * @hidden
- */
-var outerWidth = function (element) {
-    var width = element.offsetWidth;
-    var style = getComputedStyle(element);
-    width += (parseFloat(style.marginLeft) || 0) + (parseFloat(style.marginRight) || 0);
-    return width;
-};
-
-/**
- * Represents the [Kendo UI AppBarSpacer component for Angular]({% slug contentarrangement_appbar %}#toc-spacings).
- * Used to give additional white space between the AppBar sections and provides a way for customizing its width.
- *
- * @example
- *
- * ```ts-no-run
- *  * _@Component({
- *    selector: 'my-app',
- *    template: `
- *        <kendo-appbar>
- *            <kendo-appbar-section>
- *                 <button kendoButton fillMode="flat">
- *                     <kendo-icon name="menu"></kendo-icon>
- *                 </button>
- *            </kendo-appbar-section>
- *
- *            <kendo-appbar-spacer></kendo-appbar-spacer>
- *
- *            <kendo-appbar-section>
- *                <h2>Page Title</h2>
- *            </kendo-appbar-section>
- *        </kendo-appbar>
- *    `
- * })
- * class AppComponent {}
- * ```
- */
-var AppBarSpacerComponent = /** @class */ (function () {
-    function AppBarSpacerComponent(renderer, element) {
-        this.renderer = renderer;
-        this.element = element;
-        this.hostClass = true;
-    }
-    Object.defineProperty(AppBarSpacerComponent.prototype, "sizedClass", {
-        get: function () {
-            return isPresent(this.width);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    AppBarSpacerComponent.prototype.ngAfterViewInit = function () {
-        if (isPresent(this.width)) {
-            var element = this.element.nativeElement;
-            this.renderer.setStyle(element, 'flexBasis', this.width);
-        }
-    };
-    __decorate([
-        HostBinding('class.k-appbar-spacer'),
-        __metadata("design:type", Boolean)
-    ], AppBarSpacerComponent.prototype, "hostClass", void 0);
-    __decorate([
-        HostBinding('class.k-appbar-spacer-sized'),
-        __metadata("design:type", Boolean),
-        __metadata("design:paramtypes", [])
-    ], AppBarSpacerComponent.prototype, "sizedClass", null);
-    __decorate([
-        Input(),
-        __metadata("design:type", String)
-    ], AppBarSpacerComponent.prototype, "width", void 0);
-    AppBarSpacerComponent = __decorate([
-        Component({
-            selector: 'kendo-appbar-spacer',
-            template: ""
-        }),
-        __metadata("design:paramtypes", [Renderer2, ElementRef])
-    ], AppBarSpacerComponent);
-    return AppBarSpacerComponent;
-}());
-
-var exportedModules = [
-    AppBarComponent,
-    AppBarSectionComponent,
-    AppBarSpacerComponent
-];
-var declarations = exportedModules.slice();
-/**
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
- * definition for the AppBar component.
- *
- * * @example
- *
- * ```ts-no-run
- * // Import the AppBar module
- * import { AppBarModule } from '@progress/kendo-angular-navigation';
- *
- * // The browser platform with a compiler
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
- * import { BrowserModule } from '@angular/platform-browser';
- *
- * import { NgModule } from '@angular/core';
- *
- * // Import the app component
- * import { AppComponent } from './app.component';
- *
- * // Define the app module
- * _@NgModule({
- *     declarations: [AppComponent], // declare app component
- *     imports:      [BrowserModule, AppBarModule], // import AppBar module
- *     bootstrap:    [AppComponent]
- * })
- * export class AppModule {}
- *
- * // Compile and launch the module
- * platformBrowserDynamic().bootstrapModule(AppModule);
- *
- * ```
- */
-var AppBarModule = /** @class */ (function () {
-    function AppBarModule() {
-    }
-    AppBarModule = __decorate([
-        NgModule({
-            declarations: [declarations],
-            exports: [exportedModules],
-            imports: [CommonModule]
-        })
-    ], AppBarModule);
-    return AppBarModule;
-}());
-
-/**
- * Represents a template that defines the content of a Breadcrumb item.
- * To define the template, nest an `<ng-template>` tag with the `kendoBreadCrumbItemTemplate` directive inside the `<kendo-breadcrumb>` tag.
- *
- * For more information and example refer to the [Templates]({% slug templates_breadcrumb %}) article.
- */
-var BreadCrumbItemTemplateDirective = /** @class */ (function () {
-    function BreadCrumbItemTemplateDirective(templateRef) {
-        this.templateRef = templateRef;
-    }
-    BreadCrumbItemTemplateDirective = __decorate([
-        Directive({
-            selector: '[kendoBreadCrumbItemTemplate]'
-        }),
-        __param(0, Optional()),
-        __metadata("design:paramtypes", [TemplateRef])
-    ], BreadCrumbItemTemplateDirective);
-    return BreadCrumbItemTemplateDirective;
-}());
-
-/**
- * @hidden
- */
-var BREADCRUMB_ITEM_INDEX = 'data-kendo-breadcrumb-index';
-
-/**
- * @hidden
- */
-var BreadCrumbItemComponent = /** @class */ (function () {
-    function BreadCrumbItemComponent(el) {
-        this.el = el;
-        this.index = -1;
-        this.hostClasses = true;
-        this.disabled = false;
-    }
-    Object.defineProperty(BreadCrumbItemComponent.prototype, "isRootItem", {
-        get: function () {
-            return this.item.context.isFirst;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(BreadCrumbItemComponent.prototype, "isDisabled", {
-        get: function () {
-            return this.disabled || null;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(BreadCrumbItemComponent.prototype, "isLastItem", {
-        get: function () {
-            return this.item.context.isLast;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    BreadCrumbItemComponent.prototype.ngOnInit = function () {
-        this.disabled = this.item.data && (this.item.data.disabled || this.item.context.isLast);
-    };
-    BreadCrumbItemComponent.prototype.ngAfterViewInit = function () {
-        if (isDocumentAvailable()) {
-            this.width = outerWidth(this.el.nativeElement);
-        }
-    };
-    BreadCrumbItemComponent.prototype.onImageLoad = function () {
-        if (isDocumentAvailable()) {
-            this.width = outerWidth(this.el.nativeElement);
-        }
-    };
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], BreadCrumbItemComponent.prototype, "item", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", String)
-    ], BreadCrumbItemComponent.prototype, "collapseMode", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Number)
-    ], BreadCrumbItemComponent.prototype, "index", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", TemplateRef)
-    ], BreadCrumbItemComponent.prototype, "itemTemplate", void 0);
-    __decorate([
-        HostBinding('class.k-flex-none'),
-        HostBinding('class.k-breadcrumb-item'),
-        __metadata("design:type", Boolean)
-    ], BreadCrumbItemComponent.prototype, "hostClasses", void 0);
-    __decorate([
-        HostBinding('class.k-breadcrumb-root-item'),
-        __metadata("design:type", Boolean),
-        __metadata("design:paramtypes", [])
-    ], BreadCrumbItemComponent.prototype, "isRootItem", null);
-    __decorate([
-        HostBinding('attr.aria-disabled'),
-        __metadata("design:type", Boolean),
-        __metadata("design:paramtypes", [])
-    ], BreadCrumbItemComponent.prototype, "isDisabled", null);
-    __decorate([
-        HostBinding('class.k-breadcrumb-last-item'),
-        __metadata("design:type", Boolean),
-        __metadata("design:paramtypes", [])
-    ], BreadCrumbItemComponent.prototype, "isLastItem", null);
-    BreadCrumbItemComponent = __decorate([
-        Component({
-            selector: '[kendoBreadCrumbItem]',
-            template: "\n        <ng-template #separator>\n            <ng-content select=\"[kendoBreadCrumbSeparator]\"></ng-content>\n        </ng-template>\n\n        <ng-container *ngIf=\"collapseMode === 'wrap'\">\n            <ng-container *ngTemplateOutlet=\"separator\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"!item.context.collapsed\">\n            <span\n                *ngIf=\"!itemTemplate\"\n                [ngClass]=\"{\n                    'k-breadcrumb-root-link': item.context.isFirst,\n                    'k-breadcrumb-link': index !== 0,\n                    'k-breadcrumb-icontext-link': !!item.data.icon && !!item.data.text,\n                    'k-breadcrumb-icon-link': !!item.data.icon && !item.data.text,\n                    'k-state-disabled': disabled\n                }\"\n                [title]=\"item.data.title || ''\"\n                [tabindex]=\"disabled ? -1 : 0\"\n                [attr.aria-current]=\"item.context.isLast ? true : null\"\n                role=\"link\"\n                class=\"k-cursor-pointer k-flex-none\"\n            >\n                <img *ngIf=\"item.data.imageUrl\" (load)=\"onImageLoad()\" [src]=\"item.data.imageUrl\" class=\"k-image\" role=\"presentation\" />\n                <span *ngIf=\"item.data.icon && !item.data.iconClass\" class=\"k-icon k-i-{{ item.data.icon }}\"></span>\n                <span *ngIf=\"item.data.iconClass\" class=\"{{ item.data.iconClass }}\"></span>\n                {{ item.data.text }}\n            </span>\n            <ng-template\n                *ngIf=\"itemTemplate\"\n                [ngTemplateOutlet]=\"itemTemplate\"\n                [ngTemplateOutletContext]=\"{\n                    $implicit: item.data,\n                    index: index\n                }\"\n            ></ng-template>\n        </ng-container>\n\n        <ng-container *ngIf=\"collapseMode !== 'wrap'\">\n            <ng-container *ngTemplateOutlet=\"separator\"></ng-container>\n        </ng-container>\n    "
-        }),
-        __metadata("design:paramtypes", [ElementRef])
-    ], BreadCrumbItemComponent);
-    return BreadCrumbItemComponent;
-}());
-
-var closestInScope = function (target, targetAttr, predicate, scope) {
-    while (target && target !== scope && !predicate(target, targetAttr)) {
-        target = target.parentNode;
-    }
-    if (target !== scope) {
-        return target;
-    }
-};
-var hasItemIndex = function (item, indexAttr) { return isPresent(item.getAttribute(indexAttr)); };
-/**
- * @hidden
- */
-var itemIndex = function (item, indexAttr) { return +item.getAttribute(indexAttr); };
-/**
- * @hidden
- */
-var closestItem = function (target, targetAttr, scope) { return closestInScope(target, targetAttr, hasItemIndex, scope); };
-
-/**
- * @hidden
- */
-var BreadCrumbListComponent = /** @class */ (function () {
-    function BreadCrumbListComponent(el, zone) {
-        var _this = this;
-        this.el = el;
-        this.zone = zone;
-        this.items = [];
-        this.collapseMode = 'auto';
-        this.itemClick = new EventEmitter();
-        var element = this.el.nativeElement;
-        this.isRootItemContainer = element.classList.contains('k-breadcrumb-root-item-container');
-        this.zone.runOutsideAngular(function () {
-            var click$ = fromEvent(element, 'click');
-            var enterKey$ = fromEvent(element, 'keydown').pipe(filter(function (ev /* KeyboardEvent causes lint error */) { return ev.keyCode === Keys.Enter; }));
-            _this.domEventsSubscription = merge(click$, enterKey$)
-                .pipe(map(function (ev) { return ev.target; }), filter(function (e) { return !e.classList.contains('k-breadcrumb-delimiter-icon'); }), // do not trigger handler when a separator is clicked
-            map(function (e) { return _this.getItemIndex(e); }), filter(isPresent), map(function (i) { return parseInt(i, 10); }), map(function (i) { return _this.items[i]; }), filter(function (item) { return !item.data.disabled && !item.context.isLast; }), map(function (item) { return item.data; }))
-                .subscribe(function (el) {
-                _this.zone.run(function () { return _this.itemClick.emit(el); });
-            });
-        });
-    }
-    BreadCrumbListComponent.prototype.ngOnDestroy = function () {
-        this.domEventsSubscription.unsubscribe();
-    };
-    BreadCrumbListComponent.prototype.getItemIndex = function (target) {
-        var item = closestItem(target, BREADCRUMB_ITEM_INDEX, this.el.nativeElement);
-        if (item) {
-            return itemIndex(item, BREADCRUMB_ITEM_INDEX);
-        }
-    };
-    __decorate([
-        Input(),
-        __metadata("design:type", Array)
-    ], BreadCrumbListComponent.prototype, "items", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", TemplateRef)
-    ], BreadCrumbListComponent.prototype, "itemTemplate", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", String)
-    ], BreadCrumbListComponent.prototype, "collapseMode", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", String)
-    ], BreadCrumbListComponent.prototype, "separatorIcon", void 0);
-    __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], BreadCrumbListComponent.prototype, "itemClick", void 0);
-    __decorate([
-        ViewChildren(BreadCrumbItemComponent),
-        __metadata("design:type", QueryList)
-    ], BreadCrumbListComponent.prototype, "renderedItems", void 0);
-    BreadCrumbListComponent = __decorate([
-        Component({
-            selector: '[kendoBreadCrumbList]',
-            template: "\n        <ng-container *ngFor=\"let item of items; let i = index; let isFirst = first; let isLast = last\">\n            <li\n                #renderedItem\n                kendoBreadCrumbItem\n                *ngIf=\"!(collapseMode === 'wrap' && isFirst) || isRootItemContainer\"\n                [attr." + BREADCRUMB_ITEM_INDEX + "]=\"i\"\n                [item]=\"item\"\n                [index]=\"i\"\n                [collapseMode]=\"collapseMode\"\n                [itemTemplate]=\"itemTemplate\"\n            >\n                <span kendoBreadCrumbSeparator [icon]=\"separatorIcon\" *ngIf=\"collapseMode === 'wrap' && !isFirst\"></span>\n                <span\n                    kendoBreadCrumbSeparator\n                    [icon]=\"separatorIcon\"\n                    *ngIf=\"collapseMode !== 'wrap' && !isLast && !(item?.context.collapsed && items[i + 1]?.context.collapsed)\"\n                ></span>\n            </li>\n        </ng-container>\n    "
-        }),
-        __metadata("design:paramtypes", [ElementRef, NgZone])
-    ], BreadCrumbListComponent);
-    return BreadCrumbListComponent;
-}());
-
-var getCollapsed = function (itemComponent) { return itemComponent.item.context.collapsed; };
-/**
- * @hidden
- */
-var collapsed = function (itemComponent) { return getCollapsed(itemComponent) === true; };
-/**
- * @hidden
- */
-var expanded = function (itemComponent) { return getCollapsed(itemComponent) === false; };
-var toggleFirst = function (collapsed) { return function (itemComponents) {
-    return (itemComponents.find(function (ic) { return getCollapsed(ic) === collapsed; }).item.context.collapsed = !collapsed);
-}; };
-/**
- * @hidden
- */
-var collapseFirst = toggleFirst(false);
-/**
- * @hidden
- */
-var expandFirst = toggleFirst(true);
-
-/**
- * Represents the [Kendo UI Breadcrumb component for Angular]({% slug overview_breadcrumb %}).
- *
- * @example
- * ```ts-no-run
- * _@Component({
- *      selector: 'my-app',
- *      template: `
- *          <kendo-breadcrumb
- *              [items]="items"
- *              (itemClick)="onItemClick($event)">
- *          </kendo-breadcrumb>
- *      `
- * })
- * class AppComponent {
- *      public items: BreadCrumbItem[] = [
- *          { text: 'Home', title: 'Home', icon: 'home' },
- *          { text: 'Kids', title: 'Kids' },
- *          { text: '8y-16y', title: '8y-16y', disabled: true },
- *          { text: 'New collection', title: 'New collection' },
- *          { text: 'Jeans', title: 'Jeans' }
- *      ];
- *
- *      public onItemClick(item: BreadCrumbItem): void {
- *          console.log(item);
- *      }
- * }
- * ```
- */
-var BreadCrumbComponent = /** @class */ (function () {
-    function BreadCrumbComponent(el, cdr, zone, localization) {
-        this.el = el;
-        this.cdr = cdr;
-        this.zone = zone;
-        this.localization = localization;
-        /**
-         * Fires when a Breadcrumb item is clicked. The event will not be fired by disabled items and the last item.
-         */
-        this.itemClick = new EventEmitter();
-        this.hostClasses = true;
-        this._items = [];
-        this._collapseMode = 'auto';
-        this.updateItems = new ReplaySubject();
-        this.afterViewInit = new Subject();
-        this.subscriptions = new Subscription();
-        this.direction = 'ltr';
-        validatePackage(packageMetadata);
-        var updateItems$ = this.updateItems.asObservable().pipe(startWith([]));
-        this.direction = localization.rtl ? 'rtl' : 'ltr';
-        this.itemsData$ = updateItems$.pipe(map(function (items) { return items.filter(Boolean); }), map(function (items) {
-            return items.map(function (item, index, collection) { return ({
-                context: {
-                    collapsed: false,
-                    isLast: index === collection.length - 1,
-                    isFirst: index === 0
-                },
-                data: item
-            }); });
-        }), share());
-        this.firstItem$ = updateItems$.pipe(map(function (items) {
-            if (items.length > 0) {
-                return [
-                    {
-                        context: {
-                            collapsed: false,
-                            isLast: items.length === 1,
-                            isFirst: true
-                        },
-                        data: items[0]
-                    }
-                ];
-            }
-            return [];
-        }), share());
-    }
-    Object.defineProperty(BreadCrumbComponent.prototype, "items", {
-        get: function () {
-            return this._items;
-        },
-        /**
-         * The collection of items that will be rendered in the Breadcrumb.
-         */
-        set: function (items) {
-            this._items = items || [];
-            this.updateItems.next(this._items);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(BreadCrumbComponent.prototype, "collapseMode", {
-        get: function () {
-            return this._collapseMode;
-        },
-        /**
-         * Specifies the collapse mode of the Breadcrumb ([see example]({% slug collapse_modes_breadcrumb %})).
-         *
-         * The possible values are:
-         * - `auto` (default)&mdash;items are automatically collapsed based on the width of the Breadcrumb.
-         * - `wrap`&mdash;items are wrapped on multiple rows.
-         * - `none`&mdash;all items are expanded on the same row.
-         *
-         * For more information and example refer to the [Collapse Modes]({% slug collapse_modes_breadcrumb %}) article.
-         */
-        set: function (mode) {
-            if (isDevMode() && ['auto', 'wrap', 'none'].indexOf(mode) < 0) {
-                throw new Error('Invalid collapse mode. Allowed values are "auto", "wrap" or "none". \nFor more details see https://www.telerik.com/kendo-angular-ui/components/navigation/api/BreadCrumbCollapseMode/');
-            }
-            this._collapseMode = mode || 'auto';
-            this.updateItems.next(this.items);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(BreadCrumbComponent.prototype, "wrapMode", {
-        get: function () {
-            return this.collapseMode === 'wrap';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(BreadCrumbComponent.prototype, "getDir", {
-        get: function () {
-            return this.direction;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    BreadCrumbComponent.prototype.ngOnInit = function () {
-        var _this = this;
-        this.subscriptions.add(this.localization.changes.subscribe(function (_a) {
-            var rtl = _a.rtl;
-            return (_this.direction = rtl ? 'rtl' : 'ltr');
-        }));
-    };
-    BreadCrumbComponent.prototype.ngAfterViewInit = function () {
-        this.attachResizeHandler();
-        this.afterViewInit.next();
-    };
-    BreadCrumbComponent.prototype.ngOnDestroy = function () {
-        this.subscriptions.unsubscribe();
-    };
-    BreadCrumbComponent.prototype.handleResize = function () {
-        var autoCollapseCandidates = this.listComponent.renderedItems.toArray().filter(function (ri) { return !ri.item.context.isFirst && !ri.item.context.isLast; }).slice();
-        var componentWidth = outerWidth(this.el.nativeElement);
-        var itemsContainerWidth = Math.floor(this.itemsContainers
-            .toArray()
-            .map(function (el) { return outerWidth(el.nativeElement); })
-            .reduce(function (acc, curr) { return acc + curr; }, 0));
-        var nextExpandWidth = (autoCollapseCandidates.slice().reverse().find(collapsed) || { width: 0 }).width;
-        // // shrink
-        if (componentWidth <= itemsContainerWidth && autoCollapseCandidates.find(expanded)) {
-            collapseFirst(autoCollapseCandidates);
-            // needed by resize sensor
-            this.cdr.detectChanges();
-            return this.handleResize();
-        }
-        // expand
-        if (componentWidth > itemsContainerWidth + nextExpandWidth && autoCollapseCandidates.find(collapsed)) {
-            expandFirst(autoCollapseCandidates.slice().reverse());
-            // needed by resize sensor
-            this.cdr.detectChanges();
-            return this.handleResize();
-        }
-    };
-    BreadCrumbComponent.prototype.shouldResize = function () {
-        return isDocumentAvailable() && this.collapseMode === 'auto';
-    };
-    BreadCrumbComponent.prototype.attachResizeHandler = function () {
-        var _this = this;
-        // resize when:
-        // the component is initialized
-        // the container is resized
-        // items are added/removed
-        this.subscriptions.add(merge(this.resizeSensor.resize, this.itemsData$, this.afterViewInit.asObservable())
-            .pipe(filter(function () { return _this.shouldResize(); }))
-            .subscribe(function () {
-            _this.zone.runOutsideAngular(function () {
-                return setTimeout(function () {
-                    _this.zone.run(function () {
-                        if (_this.listComponent) {
-                            _this.handleResize();
-                            _this.resizeSensor.acceptSize();
-                        }
-                    });
-                });
-            });
-        }));
-    };
-    __decorate([
-        Input(),
-        __metadata("design:type", Array),
-        __metadata("design:paramtypes", [Array])
-    ], BreadCrumbComponent.prototype, "items", null);
-    __decorate([
-        Input(),
-        __metadata("design:type", String)
-    ], BreadCrumbComponent.prototype, "separatorIcon", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", String),
-        __metadata("design:paramtypes", [String])
-    ], BreadCrumbComponent.prototype, "collapseMode", null);
-    __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], BreadCrumbComponent.prototype, "itemClick", void 0);
-    __decorate([
-        ViewChild('resizeSensor', { static: true }),
-        __metadata("design:type", ResizeSensorComponent)
-    ], BreadCrumbComponent.prototype, "resizeSensor", void 0);
-    __decorate([
-        ViewChildren('itemsContainer', { read: ElementRef }),
-        __metadata("design:type", QueryList)
-    ], BreadCrumbComponent.prototype, "itemsContainers", void 0);
-    __decorate([
-        ViewChild(BreadCrumbListComponent, { static: true }),
-        __metadata("design:type", BreadCrumbListComponent)
-    ], BreadCrumbComponent.prototype, "listComponent", void 0);
-    __decorate([
-        ContentChild(BreadCrumbItemTemplateDirective, { static: false }),
-        __metadata("design:type", BreadCrumbItemTemplateDirective)
-    ], BreadCrumbComponent.prototype, "itemTemplate", void 0);
-    __decorate([
-        HostBinding('class.k-widget'),
-        HostBinding('class.k-breadcrumb'),
-        __metadata("design:type", Boolean)
-    ], BreadCrumbComponent.prototype, "hostClasses", void 0);
-    __decorate([
-        HostBinding('class.k-breadcrumb-wrap'),
-        __metadata("design:type", Boolean),
-        __metadata("design:paramtypes", [])
-    ], BreadCrumbComponent.prototype, "wrapMode", null);
-    __decorate([
-        HostBinding('attr.dir'),
-        __metadata("design:type", String),
-        __metadata("design:paramtypes", [])
-    ], BreadCrumbComponent.prototype, "getDir", null);
-    BreadCrumbComponent = __decorate([
-        Component({
-            exportAs: 'kendoBreadCrumb',
-            selector: 'kendo-breadcrumb',
-            providers: [
-                LocalizationService,
-                {
-                    provide: L10N_PREFIX,
-                    useValue: 'kendo.breadcrumb'
-                }
-            ],
-            template: "\n        <ol\n            #itemsContainer\n            kendoBreadCrumbList\n            class=\"k-breadcrumb-root-item-container\"\n            *ngIf=\"collapseMode === 'wrap'\"\n            [items]=\"firstItem$ | async\"\n            [itemTemplate]=\"itemTemplate?.templateRef\"\n            [collapseMode]=\"collapseMode\"\n            [separatorIcon]=\"separatorIcon\"\n            (itemClick)=\"itemClick.emit($event)\"\n        ></ol>\n        <ol\n            #itemsContainer\n            kendoBreadCrumbList\n            class=\"k-breadcrumb-container\"\n            [items]=\"itemsData$ | async\"\n            [itemTemplate]=\"itemTemplate?.templateRef\"\n            [collapseMode]=\"collapseMode\"\n            [separatorIcon]=\"separatorIcon\"\n            (itemClick)=\"itemClick.emit($event)\"\n            [ngClass]=\"{ 'k-flex-wrap': collapseMode === 'wrap', 'k-flex-none': collapseMode === 'none' }\"\n        ></ol>\n        <kendo-resize-sensor [rateLimit]=\"1000\" #resizeSensor></kendo-resize-sensor>\n    "
-        }),
-        __metadata("design:paramtypes", [ElementRef,
-            ChangeDetectorRef,
-            NgZone,
-            LocalizationService])
-    ], BreadCrumbComponent);
-    return BreadCrumbComponent;
-}());
-
-var DEFAULT_ICON = 'arrow-chevron-right';
-var DEFAULT_RTL_ICON = 'arrow-chevron-left';
-/**
- * @hidden
- */
-var BreadCrumbSeparatorDirective = /** @class */ (function () {
-    function BreadCrumbSeparatorDirective(el, localization) {
-        this.el = el;
-        this.localization = localization;
-        this.defaultClasses = true;
-        this.ariaHidden = true;
-        this.direction = 'ltr';
-        this.direction = this.localization.rtl ? 'rtl' : 'ltr';
-    }
-    Object.defineProperty(BreadCrumbSeparatorDirective.prototype, "icon", {
-        get: function () {
-            return this._icon;
-        },
-        set: function (icon) {
-            var element = this.el.nativeElement;
-            element.classList.remove("k-i-" + this._icon);
-            if (isPresent(icon)) {
-                this._icon = icon;
-                this.hasDefaultIcon = false;
-            }
-            else {
-                this._icon = this.direction === 'ltr' ? DEFAULT_ICON : DEFAULT_RTL_ICON;
-                this.hasDefaultIcon = true;
-            }
-            element.classList.add("k-i-" + this._icon);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    BreadCrumbSeparatorDirective.prototype.ngOnInit = function () {
-        var _this = this;
-        this.localizationChangesSubscription = this.localization.changes.subscribe(function (_a) {
-            var rtl = _a.rtl;
-            _this.direction = rtl ? 'rtl' : 'ltr';
-            if (_this.hasDefaultIcon) {
-                _this.icon = undefined;
-            }
-        });
-    };
-    BreadCrumbSeparatorDirective.prototype.ngOnDestroy = function () {
-        this.localizationChangesSubscription.unsubscribe();
-    };
-    __decorate([
-        Input(),
-        __metadata("design:type", String),
-        __metadata("design:paramtypes", [String])
-    ], BreadCrumbSeparatorDirective.prototype, "icon", null);
-    __decorate([
-        HostBinding('class.k-breadcrumb-delimiter-icon'),
-        HostBinding('class.k-icon'),
-        __metadata("design:type", Boolean)
-    ], BreadCrumbSeparatorDirective.prototype, "defaultClasses", void 0);
-    __decorate([
-        HostBinding('attr.aria-hidden'),
-        __metadata("design:type", Boolean)
-    ], BreadCrumbSeparatorDirective.prototype, "ariaHidden", void 0);
-    BreadCrumbSeparatorDirective = __decorate([
-        Directive({
-            selector: '[kendoBreadCrumbSeparator]'
-        }),
-        __metadata("design:paramtypes", [ElementRef, LocalizationService])
-    ], BreadCrumbSeparatorDirective);
-    return BreadCrumbSeparatorDirective;
-}());
-
-var templateDirectives = [
-    BreadCrumbItemTemplateDirective
-];
-var exportedModules$1 = [
-    BreadCrumbComponent,
-    BreadCrumbItemComponent,
-    BreadCrumbListComponent
-].concat(templateDirectives);
-var declarations$1 = exportedModules$1.concat([
-    BreadCrumbSeparatorDirective
-]);
-/**
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
- * definition for the BreadCrumb component.
- * @example
- *
- * ```ts-no-run
- * // Import the BreadCrumb module
- * import { BreadCrumbModule } from '@progress/kendo-angular-navigation';
- *
- * // The browser platform with a compiler
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
- * import { BrowserModule } from '@angular/platform-browser';
- *
- * import { NgModule } from '@angular/core';
- *
- * // Import the app component
- * import { AppComponent } from './app.component';
- *
- * // Define the app module
- * _@NgModule({
- *     declarations: [AppComponent], // declare app component
- *     imports:      [BrowserModule, BreadCrumbModule], // import BreadCrumb module
- *     bootstrap:    [AppComponent]
- * })
- * export class AppModule {}
- *
- * // Compile and launch the module
- * platformBrowserDynamic().bootstrapModule(AppModule);
- *
- * ```
- */
-var BreadCrumbModule = /** @class */ (function () {
-    function BreadCrumbModule() {
-    }
-    BreadCrumbModule = __decorate([
-        NgModule({
-            declarations: [declarations$1],
-            exports: [exportedModules$1],
-            imports: [CommonModule, ResizeSensorModule]
-        })
-    ], BreadCrumbModule);
-    return BreadCrumbModule;
-}());
-
-/**
- * Represents a template that defines the item content of the BottomNavigation.
- * To define the template, nest an `<ng-template>` tag
- * with the `kendoBottomNavigationItemTemplate` directive inside the `<kendo-bottomnavigation>` tag ([see example]({% slug templates_bottomnavigation %})).
- */
-var BottomNavigationItemTemplateDirective = /** @class */ (function () {
-    function BottomNavigationItemTemplateDirective(templateRef) {
-        this.templateRef = templateRef;
-    }
-    BottomNavigationItemTemplateDirective = __decorate([
-        Directive({
-            selector: '[kendoBottomNavigationItemTemplate]'
-        }),
-        __param(0, Optional()),
-        __metadata("design:paramtypes", [TemplateRef])
-    ], BottomNavigationItemTemplateDirective);
-    return BottomNavigationItemTemplateDirective;
-}());
-
-/**
- * @hidden
- */
-var BottomNavigationItemComponent = /** @class */ (function () {
-    function BottomNavigationItemComponent() {
-    }
-    Object.defineProperty(BottomNavigationItemComponent.prototype, "disabledClass", {
-        get: function () {
-            return this.item.disabled;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(BottomNavigationItemComponent.prototype, "horizontalItemClass", {
-        get: function () {
-            return this.orientation === 'horizontal';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(BottomNavigationItemComponent.prototype, "verticalItemClass", {
-        get: function () {
-            return this.orientation === 'vertical';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(BottomNavigationItemComponent.prototype, "label", {
-        get: function () {
-            return this.item.text ? this.item.text : null;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(BottomNavigationItemComponent.prototype, "tabindex", {
-        get: function () {
-            return this.item.tabIndex ? this.item.tabIndex : 0;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(BottomNavigationItemComponent.prototype, "selectedClass", {
-        get: function () {
-            return this.selectedIdx ? this.selectedIdx === this.index : this.item.selected;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(BottomNavigationItemComponent.prototype, "itemIcon", {
-        get: function () {
-            return this.item.icon || this.item.iconClass ? true : false;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(BottomNavigationItemComponent.prototype, "iconClasses", {
-        get: function () {
-            var kendoIcon = this.item.icon ? "k-icon k-i-" + this.item.icon : '';
-            var customIcon = this.item.iconClass ? this.item.iconClass : '';
-            return kendoIcon + " " + customIcon;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    __decorate([
-        Input(),
-        __metadata("design:type", BottomNavigationItemTemplateDirective)
-    ], BottomNavigationItemComponent.prototype, "itemTemplate", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Object)
-    ], BottomNavigationItemComponent.prototype, "item", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Number)
-    ], BottomNavigationItemComponent.prototype, "index", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Boolean)
-    ], BottomNavigationItemComponent.prototype, "disabledComponent", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Number)
-    ], BottomNavigationItemComponent.prototype, "selectedIdx", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", String)
-    ], BottomNavigationItemComponent.prototype, "orientation", void 0);
-    __decorate([
-        HostBinding('attr.aria-disabled'),
-        HostBinding('class.k-state-disabled'),
-        __metadata("design:type", Boolean),
-        __metadata("design:paramtypes", [])
-    ], BottomNavigationItemComponent.prototype, "disabledClass", null);
-    __decorate([
-        HostBinding('class.k-hstack'),
-        __metadata("design:type", Boolean),
-        __metadata("design:paramtypes", [])
-    ], BottomNavigationItemComponent.prototype, "horizontalItemClass", null);
-    __decorate([
-        HostBinding('class.k-vstack'),
-        __metadata("design:type", Boolean),
-        __metadata("design:paramtypes", [])
-    ], BottomNavigationItemComponent.prototype, "verticalItemClass", null);
-    __decorate([
-        HostBinding('attr.aria-label'),
-        __metadata("design:type", String),
-        __metadata("design:paramtypes", [])
-    ], BottomNavigationItemComponent.prototype, "label", null);
-    __decorate([
-        HostBinding('attr.tabindex'),
-        __metadata("design:type", Number),
-        __metadata("design:paramtypes", [])
-    ], BottomNavigationItemComponent.prototype, "tabindex", null);
-    __decorate([
-        HostBinding('attr.aria-selected'),
-        HostBinding('class.k-state-selected'),
-        __metadata("design:type", Boolean),
-        __metadata("design:paramtypes", [])
-    ], BottomNavigationItemComponent.prototype, "selectedClass", null);
-    BottomNavigationItemComponent = __decorate([
-        Component({
-            selector: '[kendoBottomNavigationItem]',
-            template: "\n        <ng-container *ngIf=\"!itemTemplate\">\n            <span *ngIf=\"itemIcon\" class=\"k-bottom-nav-item-icon\" [ngClass]=\"iconClasses\"></span>\n            <span *ngIf=\"item.text\" class=\"k-bottom-nav-item-text\">{{item.text}}</span>\n        </ng-container>\n        <ng-template *ngIf=\"itemTemplate\"\n            [ngTemplateOutlet]=\"itemTemplate?.templateRef\"\n            [ngTemplateOutletContext]=\"{ $implicit: item }\">\n        </ng-template>\n    "
-        })
-    ], BottomNavigationItemComponent);
-    return BottomNavigationItemComponent;
-}());
-
-/**
- * @hidden
- */
-var PreventableEvent = /** @class */ (function () {
-    /**
-     * @hidden
-     */
-    function PreventableEvent(args) {
-        this.prevented = false;
-        Object.assign(this, args);
-    }
-    /**
-     * Prevents the default action for a specified event.
-     * In this way, the source component suppresses
-     * the built-in behavior that follows the event.
-     */
-    PreventableEvent.prototype.preventDefault = function () {
-        this.prevented = true;
-    };
-    /**
-     * Returns `true` if the event was prevented
-     * by any of its subscribers.
-     *
-     * @returns `true` if the default action was prevented.
-     * Otherwise, returns `false`.
-     */
-    PreventableEvent.prototype.isDefaultPrevented = function () {
-        return this.prevented;
-    };
-    return PreventableEvent;
-}());
-
-/**
- * Arguments for the `select` event of the BottomNavigation.
- */
-var BottomNavigationSelectEvent = /** @class */ (function (_super) {
-    __extends(BottomNavigationSelectEvent, _super);
-    function BottomNavigationSelectEvent() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    return BottomNavigationSelectEvent;
-}(PreventableEvent));
-
-/**
- * @hidden
- */
-var BOTTOMNAVIGATION_ITEM_INDEX = 'data-kendo-bottomnavigation-index';
-/**
- * @hidden
- */
-var colors = ['primary', 'secondary', 'tertiary', 'info', 'success', 'warning', 'error', 'dark', 'light', 'inverse'];
-
-/**
- * Represents the [Kendo UI BottomNavigation component for Angular]({% slug overview_bottomnavigation %}).
- *
- * @example
- * ```ts-no-run
- * _@Component({
- *      selector: 'my-app',
- *      template: `
- *          <kendo-bottomnavigation [items]="items"></kendo-bottomnavigation>
- *      `
- * })
- * class AppComponent {
- *      public items: Array<any> = [
- *          { text: 'Inbox', icon: 'email', selected: true },
- *          { text: 'Calendar', icon: 'calendar'},
- *          { text: 'Profile', icon: 'user'}
- *      ]
- * }
- * ```
- */
-var BottomNavigationComponent = /** @class */ (function () {
-    function BottomNavigationComponent(localization, hostElement, ngZone, changeDetector, renderer) {
-        var _this = this;
-        this.localization = localization;
-        this.hostElement = hostElement;
-        this.ngZone = ngZone;
-        this.changeDetector = changeDetector;
-        this.renderer = renderer;
-        /**
-         * Sets a top border to the BottomNavigation ([see example]({% slug appearance_bottomnavigation %})).
-         *
-         * @default false
-         */
-        this.border = false;
-        /**
-         * Disables the whole BottomNavigation.
-         *
-         * @default false
-         */
-        this.disabled = false;
-        /**
-         * Fires each time an item is selected. This event is preventable.
-         */
-        this.select = new EventEmitter();
-        /**
-         * @hidden
-         */
-        this.hostClass = true;
-        /**
-         * @hidden
-         */
-        this.role = 'navigation';
-        this._fill = 'flat';
-        this._itemFlow = 'vertical';
-        this._positionMode = 'fixed';
-        this._themeColor = 'primary';
-        this._nativeHostElement = this.hostElement.nativeElement;
-        this.subscriptions = new Subscription();
-        this.rtl = false;
-        validatePackage(packageMetadata);
-        this.dynamicRTLSubscription = this.localization.changes.subscribe(function (_a) {
-            var rtl = _a.rtl;
-            _this.rtl = rtl;
-            _this.direction = _this.rtl ? 'rtl' : 'ltr';
-        });
-    }
-    Object.defineProperty(BottomNavigationComponent.prototype, "fill", {
-        get: function () {
-            return this._fill;
-        },
-        /**
-         * The fill style of the BottomNavigation ([see example]({% slug appearance_bottomnavigation %})).
-         *
-         * * The possible values are:
-         * * (Default) `flat`
-         * * `solid`
-         */
-        set: function (fill) {
-            this.renderer.removeClass(this._nativeHostElement, "k-bottom-nav-" + this.fill);
-            this._fill = fill === 'solid' ? 'solid' : 'flat';
-            this.renderer.addClass(this._nativeHostElement, "k-bottom-nav-" + this._fill);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(BottomNavigationComponent.prototype, "itemFlow", {
-        get: function () {
-            return this._itemFlow;
-        },
-        /**
-         * Specifies how the icon and text label are positioned in the BottomNavigation items ([see example]({% slug items_bottomnavigation %}#toc-itemflow)).
-         *
-         * The possible values are:
-         * * (Default) `vertical` - Renders the text below the icon.
-         * * `horizontal` - Renders the icon and the text on the same line.
-         */
-        set: function (itemFlow) {
-            this.renderer.removeClass(this._nativeHostElement, "k-bottom-nav-item-flow-" + this.itemFlow);
-            this._itemFlow = itemFlow === 'horizontal' ? 'horizontal' : 'vertical';
-            this.renderer.addClass(this._nativeHostElement, "k-bottom-nav-item-flow-" + this._itemFlow);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(BottomNavigationComponent.prototype, "positionMode", {
-        get: function () {
-            return this._positionMode;
-        },
-        /**
-         * Specifies the position and behavior of the BottomNavigation when the page is scrollable ([see example]({% slug positioning_bottomnavigation %})).
-         *
-         * The possible values are:
-         * * (Default) `fixed` - The BottomNavigation always stays at the bottom of the viewport, regardless of the page scroll position.
-         * * `sticky` - Positions the BottomNavigation at the end of the scrollable container.
-         */
-        set: function (positionMode) {
-            this.renderer.removeClass(this._nativeHostElement, "k-pos-" + this.positionMode);
-            this._positionMode = positionMode === 'sticky' ? 'sticky' : 'fixed';
-            this.renderer.addClass(this._nativeHostElement, "k-pos-" + this._positionMode);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(BottomNavigationComponent.prototype, "themeColor", {
-        get: function () {
-            return this._themeColor;
-        },
-        /**
-         * Specifies the theme color of the BottomNavigation ([see example]({% slug appearance_bottomnavigation %})).
-         *
-         * * The possible values are:
-         * * (Default) `primary` - Applies coloring based on the primary theme color.
-         * * `secondary` - Applies coloring based on the secondary theme color.
-         * * `tertiary` - Applies coloring based on the tertiary theme color.
-         * * `info` - Applies coloring based on the info theme color.
-         * * `success` - Applies coloring based on the success theme color.
-         * * `warning` - Applies coloring based on the warning theme color.
-         * * `error` - Applies coloring based on the error theme color.
-         * * `dark` - Applies coloring based on the dark theme color.
-         * * `light` - Applies coloring based on the light theme color.
-         * * `inverse` - Applies coloring based on the inverted theme color.
-         */
-        set: function (themeColor) {
-            var newColor = colors.find(function (color) { return color === themeColor; });
-            if (newColor) {
-                this.renderer.removeClass(this._nativeHostElement, "k-bottom-nav-" + this._themeColor);
-                this._themeColor = themeColor;
-                this.renderer.addClass(this._nativeHostElement, "k-bottom-nav-" + this._themeColor);
-            }
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(BottomNavigationComponent.prototype, "borderClass", {
-        /**
-         * @hidden
-         */
-        get: function () {
-            return this.border;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(BottomNavigationComponent.prototype, "disabledClass", {
-        /**
-         * @hidden
-         */
-        get: function () {
-            return this.disabled;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    /**
-     * @hidden
-     */
-    BottomNavigationComponent.prototype.ngOnInit = function () {
-        this.initDomEvents();
-    };
-    /**
-     * @hidden
-     */
-    BottomNavigationComponent.prototype.ngAfterViewInit = function () {
-        this.applyClasses();
-    };
-    /**
-     * @hidden
-     */
-    BottomNavigationComponent.prototype.ngOnDestroy = function () {
-        if (this.dynamicRTLSubscription) {
-            this.dynamicRTLSubscription.unsubscribe();
-        }
-        this.subscriptions.unsubscribe();
-    };
-    /**
-     * @hidden
-     */
-    BottomNavigationComponent.prototype.selectItem = function (idx, args) {
-        var eventArgs = new BottomNavigationSelectEvent(__assign({}, args));
-        this.select.emit(eventArgs);
-        if (!eventArgs.isDefaultPrevented()) {
-            this.selectedIdx = idx;
-        }
-    };
-    BottomNavigationComponent.prototype.applyClasses = function () {
-        this.renderer.addClass(this._nativeHostElement, "k-bottom-nav-" + this.fill);
-        this.renderer.addClass(this._nativeHostElement, "k-bottom-nav-item-flow-" + this.itemFlow);
-        this.renderer.addClass(this._nativeHostElement, "k-pos-" + this.positionMode);
-        this.renderer.addClass(this._nativeHostElement, "k-bottom-nav-" + this.themeColor);
-    };
-    BottomNavigationComponent.prototype.initDomEvents = function () {
-        var _this = this;
-        if (!this.hostElement) {
-            return;
-        }
-        this.ngZone.runOutsideAngular(function () {
-            _this.subscriptions.add(_this.renderer.listen(_this._nativeHostElement, 'click', _this.clickHandler.bind(_this)));
-            _this.subscriptions.add(_this.renderer.listen(_this._nativeHostElement, 'keydown', _this.keyDownHandler.bind(_this)));
-        });
-    };
-    BottomNavigationComponent.prototype.clickHandler = function (e) {
-        var _this = this;
-        var itemIdx = this.getBottomNavigationItemIndex(e.target);
-        var item = this.items[itemIdx];
-        if (!item) {
-            return;
-        }
-        if (item.disabled) {
-            e.preventDefault();
-            return;
-        }
-        var args = {
-            index: itemIdx,
-            item: item,
-            originalEvent: e,
-            sender: this
-        };
-        this.ngZone.run(function () {
-            _this.selectItem(itemIdx, args);
-            _this.changeDetector.markForCheck();
-        });
-    };
-    BottomNavigationComponent.prototype.keyDownHandler = function (e) {
-        var isEnterOrSpace = e.keyCode === Keys.Enter || e.keyCode === Keys.Space;
-        if (!isEnterOrSpace) {
-            return;
-        }
-        this.clickHandler(e);
-    };
-    BottomNavigationComponent.prototype.getBottomNavigationItemIndex = function (target) {
-        var item = closestItem(target, BOTTOMNAVIGATION_ITEM_INDEX, this._nativeHostElement);
-        if (item) {
-            return itemIndex(item, BOTTOMNAVIGATION_ITEM_INDEX);
-        }
-    };
-    __decorate([
-        Input(),
-        __metadata("design:type", Array)
-    ], BottomNavigationComponent.prototype, "items", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Boolean)
-    ], BottomNavigationComponent.prototype, "border", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Boolean)
-    ], BottomNavigationComponent.prototype, "disabled", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", String),
-        __metadata("design:paramtypes", [String])
-    ], BottomNavigationComponent.prototype, "fill", null);
-    __decorate([
-        Input(),
-        __metadata("design:type", String),
-        __metadata("design:paramtypes", [String])
-    ], BottomNavigationComponent.prototype, "itemFlow", null);
-    __decorate([
-        Input(),
-        __metadata("design:type", String),
-        __metadata("design:paramtypes", [String])
-    ], BottomNavigationComponent.prototype, "positionMode", null);
-    __decorate([
-        Input(),
-        __metadata("design:type", String),
-        __metadata("design:paramtypes", [String])
-    ], BottomNavigationComponent.prototype, "themeColor", null);
-    __decorate([
-        Output(),
-        __metadata("design:type", EventEmitter)
-    ], BottomNavigationComponent.prototype, "select", void 0);
-    __decorate([
-        HostBinding('class.k-hstack'),
-        HostBinding('class.k-justify-content-stretch'),
-        HostBinding('class.k-bottom-nav'),
-        __metadata("design:type", Boolean)
-    ], BottomNavigationComponent.prototype, "hostClass", void 0);
-    __decorate([
-        HostBinding('class.k-bottom-nav-border'),
-        __metadata("design:type", Boolean),
-        __metadata("design:paramtypes", [])
-    ], BottomNavigationComponent.prototype, "borderClass", null);
-    __decorate([
-        HostBinding('class.k-state-disabled'),
-        __metadata("design:type", Boolean),
-        __metadata("design:paramtypes", [])
-    ], BottomNavigationComponent.prototype, "disabledClass", null);
-    __decorate([
-        HostBinding('attr.role'),
-        __metadata("design:type", String)
-    ], BottomNavigationComponent.prototype, "role", void 0);
-    __decorate([
-        HostBinding('attr.dir'),
-        __metadata("design:type", String)
-    ], BottomNavigationComponent.prototype, "direction", void 0);
-    __decorate([
-        ContentChild(BottomNavigationItemTemplateDirective, { static: false }),
-        __metadata("design:type", BottomNavigationItemTemplateDirective)
-    ], BottomNavigationComponent.prototype, "itemTemplate", void 0);
-    BottomNavigationComponent = __decorate([
-        Component({
-            exportAs: 'kendoBottomNavigation',
-            selector: 'kendo-bottomnavigation',
-            providers: [
-                LocalizationService,
-                {
-                    provide: L10N_PREFIX,
-                    useValue: 'kendo.bottomnavigation'
-                }
-            ],
-            template: "\n        <ng-container *ngIf=\"items\">\n            <span kendoBottomNavigationItem\n                *ngFor=\"let item of items; let idx=index\"\n                role=\"link\"\n                class=\"k-bottom-nav-item\"\n                [disabledComponent]=\"disabled\"\n                [item]=\"item\"\n                [index]=\"idx\"\n                [selectedIdx]=\"selectedIdx\"\n                [itemTemplate]=\"itemTemplate\"\n                [attr." + BOTTOMNAVIGATION_ITEM_INDEX + "]=\"idx\"\n                [ngClass]=\"item.cssClass\"\n                [ngStyle]=\"item.cssStyle\"\n                [orientation]=\"itemFlow\">\n            </span>\n        </ng-container>\n    "
-        }),
-        __metadata("design:paramtypes", [LocalizationService,
-            ElementRef,
-            NgZone,
-            ChangeDetectorRef,
-            Renderer2])
-    ], BottomNavigationComponent);
-    return BottomNavigationComponent;
-}());
-
-var templateDirectives$1 = [BottomNavigationItemTemplateDirective];
-var exportedComponents = [BottomNavigationComponent].concat(templateDirectives$1);
-var declarations$2 = [BottomNavigationItemComponent].concat(exportedComponents);
-/**
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
- * definition for the BottomNavigation component.
- * @example
- *
- * ```ts-no-run
- * // Import the BottomNavigation module
- * import { BottomNavigationModule } from '@progress/kendo-angular-navigation';
- *
- * // The browser platform with a compiler
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
- * import { BrowserModule } from '@angular/platform-browser';
- *
- * import { NgModule } from '@angular/core';
- *
- * // Import the app component
- * import { AppComponent } from './app.component';
- *
- * // Define the app module
- * _@NgModule({
- *     declarations: [AppComponent], // declare app component
- *     imports:      [BrowserModule, BottomNavigationModule], // import BottomNavigation module
- *     bootstrap:    [AppComponent]
- * })
- * export class AppModule {}
- *
- * // Compile and launch the module
- * platformBrowserDynamic().bootstrapModule(AppModule);
- *
- * ```
- */
-var BottomNavigationModule = /** @class */ (function () {
-    function BottomNavigationModule() {
-    }
-    BottomNavigationModule = __decorate([
-        NgModule({
-            declarations: [declarations$2],
-            exports: [exportedComponents],
-            imports: [CommonModule]
-        })
-    ], BottomNavigationModule);
-    return BottomNavigationModule;
-}());
-
-/**
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
- * definition for the Navigation components.
- *
- * @example
- *
- * ```ts-no-run
- * // Import the Navigation module
- * import { NavigationModule } from '@progress/kendo-angular-navigation';
- *
- * // The browser platform with a compiler
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
- *
- * import { NgModule } from '@angular/core';
- *
- * // Import the app component
- * import { AppComponent } from './app.component';
- *
- * // Define the app module
- * _@NgModule({
- *     declarations: [AppComponent], // declare app component
- *     imports:      [BrowserModule, NavigationModule], // import Navigation module
- *     bootstrap:    [AppComponent]
- * })
- * export class AppModule {}
- *
- * // Compile and launch the module
- * platformBrowserDynamic().bootstrapModule(AppModule);
- *
- * ```
- */
-var NavigationModule = /** @class */ (function () {
-    function NavigationModule() {
-    }
-    NavigationModule = __decorate([
-        NgModule({
-            exports: [
-                AppBarModule,
-                BreadCrumbModule,
-                BottomNavigationModule
-            ]
-        })
-    ], NavigationModule);
-    return NavigationModule;
-}());
-
-// AppBar exports
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { BottomNavigationItemComponent, BOTTOMNAVIGATION_ITEM_INDEX, BreadCrumbItemComponent, BreadCrumbListComponent, BREADCRUMB_ITEM_INDEX, BreadCrumbSeparatorDirective, PreventableEvent, AppBarComponent, AppBarSectionComponent, AppBarSpacerComponent, AppBarModule, NavigationModule, BreadCrumbComponent, BreadCrumbItemTemplateDirective, BreadCrumbModule, BottomNavigationComponent, BottomNavigationItemTemplateDirective, BottomNavigationSelectEvent, BottomNavigationModule };