@progress/kendo-angular-navigation
Version:
Kendo UI Navigation for Angular
165 lines (164 loc) • 7.55 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Component, ElementRef, HostBinding, Input, Renderer2 } from '@angular/core';
import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
import { validatePackage } from '@progress/kendo-licensing';
import { packageMetadata } from '../package-metadata';
import * as i0 from "@angular/core";
import * as i1 from "@progress/kendo-angular-l10n";
const DEFAULT_THEME_COLOR = 'light';
const DEFAULT_POSITION = 'top';
const DEFAULT_POSITION_MODE = 'static';
/**
* 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.
*/
export class AppBarComponent {
localizationService;
host;
renderer;
hostClass = true;
/**
* @hidden
*/
direction;
/**
* 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.
*
*/
set position(position) {
const newPosition = position ? position : DEFAULT_POSITION;
this.handleHostClasses(newPosition, this.position);
this._position = newPosition;
}
get position() {
return this._position;
}
/**
* Specifies the positionMode of the AppBar
* ([see example](slug:positioning_appbar#toc-position-mode)).
*
* * 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.
*/
set positionMode(positionMode) {
const newPositionMode = positionMode ? positionMode : DEFAULT_POSITION_MODE;
this.handleHostClasses(newPositionMode, this.positionMode);
this._positionMode = newPositionMode;
}
get positionMode() {
return this._positionMode;
}
/**
* 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.
* * `primary`— Applies primary coloring value.
*
*/
set themeColor(themeColor) {
const newThemeColor = themeColor ? themeColor : DEFAULT_THEME_COLOR;
this.handleHostClasses(newThemeColor, this.themeColor);
this._themeColor = newThemeColor;
}
get themeColor() {
return this._themeColor;
}
dynamicRTLSubscription;
rtl = false;
_themeColor = DEFAULT_THEME_COLOR;
_position = DEFAULT_POSITION;
_positionMode = DEFAULT_POSITION_MODE;
constructor(localizationService, host, renderer) {
this.localizationService = localizationService;
this.host = host;
this.renderer = renderer;
validatePackage(packageMetadata);
this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
this.rtl = rtl;
this.direction = this.rtl ? 'rtl' : 'ltr';
});
}
ngAfterViewInit() {
const stylingOptions = ['position', 'positionMode', 'themeColor'];
stylingOptions.forEach(input => {
this.handleHostClasses(this[input]);
});
}
ngOnDestroy() {
if (this.dynamicRTLSubscription) {
this.dynamicRTLSubscription.unsubscribe();
}
}
handleHostClasses(newValue, previousValue) {
const elem = this.host.nativeElement;
if (previousValue && newValue === previousValue) {
return;
}
if (previousValue) {
this.renderer.removeClass(elem, `k-appbar-${previousValue}`);
}
if (newValue) {
this.renderer.addClass(elem, `k-appbar-${newValue}`);
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppBarComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AppBarComponent, isStandalone: true, selector: "kendo-appbar", inputs: { position: "position", positionMode: "positionMode", themeColor: "themeColor" }, host: { properties: { "class.k-appbar": "this.hostClass", "attr.dir": "this.direction" } }, providers: [
LocalizationService,
{
provide: L10N_PREFIX,
useValue: 'kendo.appbar.component'
}
], exportAs: ["kendoAppBar"], ngImport: i0, template: `
<ng-content></ng-content>
`, isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AppBarComponent, decorators: [{
type: Component,
args: [{
exportAs: 'kendoAppBar',
selector: 'kendo-appbar',
template: `
<ng-content></ng-content>
`,
providers: [
LocalizationService,
{
provide: L10N_PREFIX,
useValue: 'kendo.appbar.component'
}
],
standalone: true
}]
}], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { hostClass: [{
type: HostBinding,
args: ['class.k-appbar']
}], direction: [{
type: HostBinding,
args: ['attr.dir']
}], position: [{
type: Input
}], positionMode: [{
type: Input
}], themeColor: [{
type: Input
}] } });