@progress/kendo-angular-navigation 21.4.1 → 22.0.0

package/esm2022/bottomnavigation/bottomnavigation.component.mjs

@@ -1,334 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { Component, HostBinding, Input, Output, EventEmitter, ElementRef, Renderer2, ContentChild, NgZone, ChangeDetectorRef } from '@angular/core';
-import { Keys } from '@progress/kendo-angular-common';
-import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
-import { validatePackage } from '@progress/kendo-licensing';
-import { Subscription } from 'rxjs';
-import { BottomNavigationSelectEvent } from './events/select-event';
-import { BottomNavigationItemTemplateDirective } from './templates/item-template.directive';
-import { closestItem, itemIndex } from '../common/dom-queries';
-import { BOTTOMNAVIGATION_ITEM_INDEX, colors } from './constants';
-import { packageMetadata } from '../package-metadata';
-import { BottomNavigationItemComponent } from './bottomnavigation-item.component';
-import { NgClass, NgStyle } from '@angular/common';
-import * as i0 from "@angular/core";
-import * as i1 from "@progress/kendo-angular-l10n";
-/**
- * Represents the [Kendo UI BottomNavigation component for Angular]({% slug overview_bottomnavigation %}).
- *
- * Use the BottomNavigation component to let users quickly switch between primary views in your app.
- *
- * @example
- * ```typescript
- * @Component({
- *      selector: 'my-app',
- *      template: `
- *          <kendo-bottomnavigation [items]="items"></kendo-bottomnavigation>
- *      `
- * })
- * class AppComponent {
- *      public items: Array<any> = [
- *          { text: 'Inbox', icon: 'envelop', selected: true },
- *          { text: 'Calendar', icon: 'calendar'},
- *          { text: 'Profile', icon: 'user'}
- *      ];
- * }
- * ```
- */
-export class BottomNavigationComponent {
-    localization;
-    hostElement;
-    ngZone;
-    changeDetector;
-    renderer;
-    /**
-     * Provides the collection of items rendered in the BottomNavigation ([see example]({% slug items_bottomnavigation %})).
-     */
-    items;
-    /**
-     * Shows a top border on the BottomNavigation ([see example]({% slug appearance_bottomnavigation %})).
-     *
-     * @default false
-     */
-    border = false;
-    /**
-     * Disables the entire BottomNavigation.
-     *
-     * @default false
-     */
-    disabled = false;
-    /**
-     * Sets the fill style of the BottomNavigation ([see example]({% slug appearance_bottomnavigation %})).
-     *
-     * @default 'flat'
-     */
-    set fill(fill) {
-        this.renderer.removeClass(this._nativeHostElement, `k-bottom-nav-${this.fill}`);
-        this.renderer.removeClass(this._nativeHostElement, `k-bottom-nav-${this.fill}-${this.themeColor}`);
-        this._fill = fill === 'solid' ? 'solid' : 'flat';
-        this.renderer.addClass(this._nativeHostElement, `k-bottom-nav-${this._fill}`);
-        this.renderer.addClass(this._nativeHostElement, `k-bottom-nav-${this._fill}-${this.themeColor}`);
-    }
-    get fill() {
-        return this._fill;
-    }
-    /**
-     * Controls how the icon and text label are positioned in the BottomNavigation items.
-     *
-     * @default 'vertical'
-     */
-    set itemFlow(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}`);
-    }
-    get itemFlow() {
-        return this._itemFlow;
-    }
-    /**
-     * Sets the position and behavior of the BottomNavigation when the page is scrollable ([see example]({% slug positioning_bottomnavigation %})).
-     *
-     * @default 'fixed'
-     */
-    set positionMode(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}`);
-    }
-    get positionMode() {
-        return this._positionMode;
-    }
-    /**
-     * Sets the theme color of the BottomNavigation ([see example]({% slug appearance_bottomnavigation %})).
-     *
-     * @default 'primary'
-     */
-    set themeColor(themeColor) {
-        const newColor = colors.find(color => color === themeColor);
-        if (newColor) {
-            this.renderer.removeClass(this._nativeHostElement, `k-bottom-nav-${this.fill}-${this._themeColor}`);
-            this._themeColor = themeColor;
-            this.renderer.addClass(this._nativeHostElement, `k-bottom-nav-${this.fill}-${this._themeColor}`);
-        }
-    }
-    get themeColor() {
-        return this._themeColor;
-    }
-    /**
-     * Fires when a user selects an item. This event is preventable.
-     */
-    select = new EventEmitter();
-    /**
-     * @hidden
-     */
-    hostClass = true;
-    /**
-     * @hidden
-     */
-    get borderClass() {
-        return this.border;
-    }
-    /**
-     * @hidden
-     */
-    get disabledClass() {
-        return this.disabled;
-    }
-    /**
-     * @hidden
-     */
-    role = 'navigation';
-    /**
-     * @hidden
-     */
-    direction;
-    /**
-     * @hidden
-     */
-    itemTemplate;
-    /**
-     * @hidden
-     */
-    selectedIdx;
-    _fill = 'flat';
-    _itemFlow = 'vertical';
-    _positionMode = 'fixed';
-    _themeColor = 'primary';
-    _nativeHostElement;
-    dynamicRTLSubscription;
-    subscriptions = new Subscription();
-    rtl = false;
-    constructor(localization, hostElement, ngZone, changeDetector, renderer) {
-        this.localization = localization;
-        this.hostElement = hostElement;
-        this.ngZone = ngZone;
-        this.changeDetector = changeDetector;
-        this.renderer = renderer;
-        validatePackage(packageMetadata);
-        this._nativeHostElement = this.hostElement.nativeElement;
-        this.dynamicRTLSubscription = this.localization.changes.subscribe(({ rtl }) => {
-            this.rtl = rtl;
-            this.direction = this.rtl ? 'rtl' : 'ltr';
-        });
-    }
-    /**
-     * @hidden
-     */
-    ngOnInit() {
-        this.initDomEvents();
-    }
-    /**
-     * @hidden
-     */
-    ngAfterViewInit() {
-        this.applyClasses();
-    }
-    /**
-     * @hidden
-     */
-    ngOnDestroy() {
-        if (this.dynamicRTLSubscription) {
-            this.dynamicRTLSubscription.unsubscribe();
-        }
-        this.subscriptions.unsubscribe();
-    }
-    /**
-     * @hidden
-     */
-    selectItem(idx, args) {
-        const eventArgs = new BottomNavigationSelectEvent({ ...args });
-        this.select.emit(eventArgs);
-        if (!eventArgs.isDefaultPrevented()) {
-            this.selectedIdx = idx;
-        }
-    }
-    applyClasses() {
-        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.fill}-${this.themeColor}`);
-    }
-    initDomEvents() {
-        if (!this.hostElement) {
-            return;
-        }
-        this.ngZone.runOutsideAngular(() => {
-            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)));
-        });
-    }
-    clickHandler(e) {
-        const itemIdx = this.getBottomNavigationItemIndex(e.target);
-        const item = this.items[itemIdx];
-        if (!item) {
-            return;
-        }
-        if (item.disabled) {
-            e.preventDefault();
-            return;
-        }
-        const args = {
-            index: itemIdx,
-            item: item,
-            originalEvent: e,
-            sender: this
-        };
-        this.ngZone.run(() => {
-            this.selectItem(itemIdx, args);
-            this.changeDetector.markForCheck();
-        });
-    }
-    keyDownHandler(e) {
-        const isEnterOrSpace = e.code === Keys.Enter || e.code === Keys.NumpadEnter || e.code === Keys.Space;
-        if (!isEnterOrSpace) {
-            return;
-        }
-        this.clickHandler(e);
-    }
-    getBottomNavigationItemIndex(target) {
-        const item = closestItem(target, BOTTOMNAVIGATION_ITEM_INDEX, this._nativeHostElement);
-        if (item) {
-            return itemIndex(item, BOTTOMNAVIGATION_ITEM_INDEX);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BottomNavigationComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: BottomNavigationComponent, isStandalone: true, selector: "kendo-bottomnavigation", inputs: { items: "items", border: "border", disabled: "disabled", fill: "fill", itemFlow: "itemFlow", positionMode: "positionMode", themeColor: "themeColor" }, outputs: { select: "select" }, host: { properties: { "class.k-bottom-nav": "this.hostClass", "class.k-bottom-nav-border": "this.borderClass", "class.k-disabled": "this.disabledClass", "attr.role": "this.role", "attr.dir": "this.direction" } }, providers: [
-            LocalizationService,
-            {
-                provide: L10N_PREFIX,
-                useValue: 'kendo.bottomnavigation'
-            }
-        ], queries: [{ propertyName: "itemTemplate", first: true, predicate: BottomNavigationItemTemplateDirective, descendants: true }], exportAs: ["kendoBottomNavigation"], ngImport: i0, template: "\n        @if (items) {\n          @for (item of items; track item; let idx = $index) {\n            <span kendoBottomNavigationItem\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.data-kendo-bottomnavigation-index]=\"idx\"\n              [ngClass]=\"item.cssClass\"\n              [ngStyle]=\"item.cssStyle\"\n              [orientation]=\"itemFlow\">\n            </span>\n          }\n        }\n        ", isInline: true, dependencies: [{ kind: "component", type: BottomNavigationItemComponent, selector: "[kendoBottomNavigationItem]", inputs: ["itemTemplate", "item", "index", "disabledComponent", "selectedIdx", "orientation"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BottomNavigationComponent, decorators: [{
-            type: Component,
-            args: [{
-                    exportAs: 'kendoBottomNavigation',
-                    selector: 'kendo-bottomnavigation',
-                    providers: [
-                        LocalizationService,
-                        {
-                            provide: L10N_PREFIX,
-                            useValue: 'kendo.bottomnavigation'
-                        }
-                    ],
-                    template: `
-        @if (items) {
-          @for (item of items; track item; let idx = $index) {
-            <span kendoBottomNavigationItem
-              role="link"
-              class="k-bottom-nav-item"
-              [disabledComponent]="disabled"
-              [item]="item"
-              [index]="idx"
-              [selectedIdx]="selectedIdx"
-              [itemTemplate]="itemTemplate"
-              [attr.${BOTTOMNAVIGATION_ITEM_INDEX}]="idx"
-              [ngClass]="item.cssClass"
-              [ngStyle]="item.cssStyle"
-              [orientation]="itemFlow">
-            </span>
-          }
-        }
-        `,
-                    standalone: true,
-                    imports: [BottomNavigationItemComponent, NgClass, NgStyle]
-                }]
-        }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }], propDecorators: { items: [{
-                type: Input
-            }], border: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], fill: [{
-                type: Input
-            }], itemFlow: [{
-                type: Input
-            }], positionMode: [{
-                type: Input
-            }], themeColor: [{
-                type: Input
-            }], select: [{
-                type: Output
-            }], hostClass: [{
-                type: HostBinding,
-                args: ['class.k-bottom-nav']
-            }], borderClass: [{
-                type: HostBinding,
-                args: ['class.k-bottom-nav-border']
-            }], disabledClass: [{
-                type: HostBinding,
-                args: ['class.k-disabled']
-            }], role: [{
-                type: HostBinding,
-                args: ['attr.role']
-            }], direction: [{
-                type: HostBinding,
-                args: ['attr.dir']
-            }], itemTemplate: [{
-                type: ContentChild,
-                args: [BottomNavigationItemTemplateDirective, { static: false }]
-            }] } });

package/esm2022/bottomnavigation/constants.mjs

@@ -1,12 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-/**
- * @hidden
- */
-export const BOTTOMNAVIGATION_ITEM_INDEX = 'data-kendo-bottomnavigation-index';
-/**
- * @hidden
- */
-export const colors = ['primary', 'secondary', 'tertiary', 'info', 'success', 'warning', 'error', 'dark', 'light', 'inverse'];

package/esm2022/bottomnavigation/events/select-event.mjs

@@ -1,33 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { PreventableEvent } from '../../common/preventable-event';
-/**
- * Provides the arguments for the `select` event of the BottomNavigation.
- */
-export class BottomNavigationSelectEvent extends PreventableEvent {
-    /**
-     * Represents the index of the selected item in the `items` collection.
-     */
-    index;
-    /**
-     * Represents the selected BottomNavigation item.
-     */
-    item;
-    /**
-     * Provides the DOM event that triggered the selection.
-     */
-    originalEvent;
-    /**
-     * Provides a reference to the BottomNavigation instance that triggered the event.
-     */
-    sender;
-    /**
-     * @hidden
-     */
-    constructor(args) {
-        super();
-        Object.assign(this, args);
-    }
-}

package/esm2022/bottomnavigation/templates/item-template.directive.mjs

@@ -1,36 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { Directive, Optional, TemplateRef } from '@angular/core';
-import * as i0 from "@angular/core";
-/**
- * Represents a template that defines the content of the BottomNavigation items. Use this directive to customize the appearance of each navigation item.
- * To define the template, nest an `<ng-template>` tag with the `kendoBottomNavigationItemTemplate` directive inside the `<kendo-bottomnavigation>` tag ([see example]({% slug templates_bottomnavigation %})).
- *
- * @example
- * ```html
- * <kendo-bottomnavigation [items]="items">
- *    <ng-template kendoBottomNavigationItemTemplate let-item>
- *       <span>{{ item.text }}</span>
- *    </ng-template>
- * </kendo-bottomnavigation>
- * ```
- */
-export class BottomNavigationItemTemplateDirective {
-    templateRef;
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BottomNavigationItemTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: BottomNavigationItemTemplateDirective, isStandalone: true, selector: "[kendoBottomNavigationItemTemplate]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BottomNavigationItemTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoBottomNavigationItemTemplate]',
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef, decorators: [{
-                    type: Optional
-                }] }] });

package/esm2022/bottomnavigation/types/bottomnavigation-fill.mjs

@@ -1,5 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-export {};

package/esm2022/bottomnavigation/types/bottomnavigation-item-flow.mjs

@@ -1,5 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-export {};

package/esm2022/bottomnavigation/types/bottomnavigation-item.mjs

@@ -1,5 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-export {};

package/esm2022/bottomnavigation/types/bottomnavigation-position-mode.mjs

@@ -1,5 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-export {};

package/esm2022/bottomnavigation/types/bottomnavigation-theme-color.mjs

@@ -1,20 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-/**
- * Represents the possible theme colors of the BottomNavigation ([see example]({% slug appearance_bottomnavigation %})).
- *
- * The possible values are:
- * * `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.
- */
-export {};

package/esm2022/bottomnavigation.module.mjs

@@ -1,43 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { NgModule } from '@angular/core';
-import { IconsService } from '@progress/kendo-angular-icons';
-import { KENDO_BOTTOMNAVIGATION } from './directives';
-import * as i0 from "@angular/core";
-import * as i1 from "./bottomnavigation/bottomnavigation.component";
-import * as i2 from "./bottomnavigation/templates/item-template.directive";
-// IMPORTANT: NgModule export kept for backwards compatibility
-/**
- * Represents the [`NgModule`](link:site.data.urls.angular['ngmoduleapi'])
- * definition for the BottomNavigation component.
- *
- * @example
- * ```typescript
- * import { BottomNavigationModule } from '@progress/kendo-angular-navigation';
- * import { BrowserModule } from '@angular/platform-browser';
- * import { NgModule } from '@angular/core';
- * import { AppComponent } from './app.component';
- *
- * @NgModule({
- *     declarations: [AppComponent],
- *     imports:      [BrowserModule, BottomNavigationModule],
- *     bootstrap:    [AppComponent]
- * })
- * export class AppModule {}
- * ```
- */
-export class BottomNavigationModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BottomNavigationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: BottomNavigationModule, imports: [i1.BottomNavigationComponent, i2.BottomNavigationItemTemplateDirective], exports: [i1.BottomNavigationComponent, i2.BottomNavigationItemTemplateDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BottomNavigationModule, providers: [IconsService], imports: [i1.BottomNavigationComponent] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BottomNavigationModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    exports: [...KENDO_BOTTOMNAVIGATION],
-                    imports: [...KENDO_BOTTOMNAVIGATION],
-                    providers: [IconsService]
-                }]
-        }] });