@progress/kendo-angular-navigation
Version:
Kendo UI Navigation for Angular
159 lines (158 loc) • 6.21 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 %}).
*
* Use the AppBar component to display information, actions, brand titles, and additional navigation on the current screen.
*
* @example
* ```html
* <kendo-appbar>
* <kendo-appbar-section>
* <h2>Page Title</h2>
* </kendo-appbar-section>
* </kendo-appbar>
* ```
*
* @remarks
* Supported children components are: {@link AppBarSectionComponent}, {@link AppBarSpacerComponent}
*/
export class AppBarComponent {
localizationService;
host;
renderer;
hostClass = true;
/**
* @hidden
*/
direction;
/**
* Specifies the position of the AppBar
* ([see example]({% slug positioning_appbar %}#toc-position)).
*
* @default 'top'
*/
set position(position) {
const newPosition = position ? position : DEFAULT_POSITION;
this.handleHostClasses(newPosition, this.position);
this._position = newPosition;
}
get position() {
return this._position;
}
/**
* Sets the position mode of the AppBar ([see example](slug:positioning_appbar#toc-position-mode)).
*
* @default 'static'
*/
set positionMode(positionMode) {
const newPositionMode = positionMode ? positionMode : DEFAULT_POSITION_MODE;
this.handleHostClasses(newPositionMode, this.positionMode);
this._positionMode = newPositionMode;
}
get positionMode() {
return this._positionMode;
}
/**
* Sets the theme color of the AppBar. The theme color is applied as the background color of the component.
*
* @default 'light'
*/
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
}] } });