@progress/kendo-angular-navigation 15.5.0-develop.4 → 15.5.0-develop.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/appbar/appbar.component.d.ts +17 -14
  2. package/appbar/models/theme-color.d.ts +2 -1
  3. package/esm2020/appbar/appbar.component.mjs +83 -83
  4. package/esm2020/package-metadata.mjs +2 -2
  5. package/fesm2015/progress-kendo-angular-navigation.mjs +84 -84
  6. package/fesm2020/progress-kendo-angular-navigation.mjs +84 -84
  7. package/package.json +5 -5
package/appbar/appbar.component.d.ts CHANGED
@@ -2,7 +2,7 @@
2
2
  * Copyright © 2024 Progress Software Corporation. All rights reserved.
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
- import { OnDestroy } from '@angular/core';
5
+ import { AfterViewInit, ElementRef, OnDestroy, Renderer2 } from '@angular/core';
6
6
  import { LocalizationService } from '@progress/kendo-angular-l10n';
7
7
  import { AppBarPosition } from './models/position';
8
8
  import { AppBarThemeColor } from './models/theme-color';
@@ -12,17 +12,11 @@ import * as i0 from "@angular/core";
12
12
  * Represents the [Kendo UI AppBar component for Angular]({% slug overview_appbar %}).
13
13
  * Used to display information, actions, branding titles and additional navigation on the current screen.
14
14
  */
15
- export declare class AppBarComponent implements OnDestroy {
15
+ export declare class AppBarComponent implements AfterViewInit, OnDestroy {
16
16
  private localizationService;
17
+ private host;
18
+ private renderer;
17
19
  hostClass: boolean;
18
- get topClass(): boolean;
19
- get bottomClass(): boolean;
20
- get stickyClass(): boolean;
21
- get fixedClass(): boolean;
22
- get staticClass(): boolean;
23
- get lightClass(): boolean;
24
- get darkClass(): boolean;
25
- get inheritClass(): boolean;
26
20
  /**
27
21
  * @hidden
28
22
  */
@@ -41,7 +35,8 @@ export declare class AppBarComponent implements OnDestroy {
41
35
  * 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.
42
36
  *
43
37
  */
44
- position: AppBarPosition;
38
+ set position(position: AppBarPosition);
39
+ get position(): AppBarPosition;
45
40
  /**
46
41
  * Specifies the positionMode of the AppBar
47
42
  * ([see example]({% slug positioning_appbar %}#toc-positionmode)).
@@ -51,7 +46,8 @@ export declare class AppBarComponent implements OnDestroy {
51
46
  * * `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.
52
47
  * * `fixed`—Positions the AppBar relative to the viewport. It always stays in the same place even if the page is scrolled.
53
48
  */
54
- positionMode: AppBarPositionMode;
49
+ set positionMode(positionMode: AppBarPositionMode);
50
+ get positionMode(): AppBarPositionMode;
55
51
  /**
56
52
  * Specifies the theme color of the AppBar.
57
53
  * The theme color will be applied as background color of the component.
@@ -61,13 +57,20 @@ export declare class AppBarComponent implements OnDestroy {
61
57
  * * `light` (Default)—Applies coloring based on light theme color.
62
58
  * * `dark`—Applies coloring based on dark theme color.
63
59
  * * `inherit`— Applies inherited coloring value.
60
+ * * `primary`— Applies primary coloring value.
64
61
  *
65
62
  */
66
- themeColor: AppBarThemeColor;
63
+ set themeColor(themeColor: AppBarThemeColor);
64
+ get themeColor(): AppBarThemeColor;
67
65
  private dynamicRTLSubscription;
68
66
  private rtl;
69
- constructor(localizationService: LocalizationService);
67
+ private _themeColor;
68
+ private _position;
69
+ private _positionMode;
70
+ constructor(localizationService: LocalizationService, host: ElementRef, renderer: Renderer2);
71
+ ngAfterViewInit(): void;
70
72
  ngOnDestroy(): void;
73
+ private handleHostClasses;
71
74
  static ɵfac: i0.ɵɵFactoryDeclaration<AppBarComponent, never>;
72
75
  static ɵcmp: i0.ɵɵComponentDeclaration<AppBarComponent, "kendo-appbar", ["kendoAppBar"], { "position": "position"; "positionMode": "positionMode"; "themeColor": "themeColor"; }, {}, never, ["*"]>;
73
76
  }
package/appbar/models/theme-color.d.ts CHANGED
@@ -12,6 +12,7 @@
12
12
  * * `light` (Default)&mdash;Applies coloring based on light theme color.
13
13
  * * `dark`&mdash;Applies coloring based on dark theme color.
14
14
  * * `inherit`&mdash; Applies inherited coloring value.
15
+ * * `primary`&mdash; Applies primary coloring value.
15
16
  *
16
17
  */
17
- export declare type AppBarThemeColor = 'inherit' | 'light' | 'dark';
18
+ export declare type AppBarThemeColor = 'inherit' | 'light' | 'dark' | 'primary';
package/esm2020/appbar/appbar.component.mjs CHANGED
@@ -2,96 +2,120 @@
2
2
  * Copyright © 2024 Progress Software Corporation. All rights reserved.
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
- import { Component, HostBinding, Input } from '@angular/core';
5
+ import { Component, ElementRef, HostBinding, Input, Renderer2 } from '@angular/core';
6
6
  import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
7
7
  import { validatePackage } from '@progress/kendo-licensing';
8
8
  import { packageMetadata } from '../package-metadata';
9
9
  import * as i0 from "@angular/core";
10
10
  import * as i1 from "@progress/kendo-angular-l10n";
11
+ const DEFAULT_THEME_COLOR = 'light';
12
+ const DEFAULT_POSITION = 'top';
13
+ const DEFAULT_POSITION_MODE = 'static';
11
14
  /**
12
15
  * Represents the [Kendo UI AppBar component for Angular]({% slug overview_appbar %}).
13
16
  * Used to display information, actions, branding titles and additional navigation on the current screen.
14
17
  */
15
18
  export class AppBarComponent {
16
- constructor(localizationService) {
19
+ constructor(localizationService, host, renderer) {
17
20
  this.localizationService = localizationService;
21
+ this.host = host;
22
+ this.renderer = renderer;
18
23
  this.hostClass = true;
19
- /**
20
- * Specifies the position of the AppBar
21
- * ([see example]({% slug positioning_appbar %}#toc-position)).
22
- *
23
- * * The possible values are:
24
- * * `top` (Default)&mdash;Positions the AppBar at the top of the content.
25
- * Setting the `position` property to `top` requires adding the Appbar component before the page content.
26
- * 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.
27
- *
28
- * * `bottom`&mdash;Positions the AppBar at the bottom of the content.
29
- * Setting the `position` property to `bottom` requires adding the Appbar component after the page content.
30
- * 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.
31
- *
32
- */
33
- this.position = 'top';
34
- /**
35
- * Specifies the positionMode of the AppBar
36
- * ([see example]({% slug positioning_appbar %}#toc-positionmode)).
37
- *
38
- * * The possible values are:
39
- * * `static` (Default)&mdash;Does not position the AppBar in any special way. It is positioned according to the normal flow of the page.
40
- * * `sticky`&mdash;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.
41
- * * `fixed`&mdash;Positions the AppBar relative to the viewport. It always stays in the same place even if the page is scrolled.
42
- */
43
- this.positionMode = 'static';
44
- /**
45
- * Specifies the theme color of the AppBar.
46
- * The theme color will be applied as background color of the component.
47
- *
48
- *
49
- * * The possible values are:
50
- * * `light` (Default)&mdash;Applies coloring based on light theme color.
51
- * * `dark`&mdash;Applies coloring based on dark theme color.
52
- * * `inherit`&mdash; Applies inherited coloring value.
53
- *
54
- */
55
- this.themeColor = 'light';
56
24
  this.rtl = false;
25
+ this._themeColor = DEFAULT_THEME_COLOR;
26
+ this._position = DEFAULT_POSITION;
27
+ this._positionMode = DEFAULT_POSITION_MODE;
57
28
  validatePackage(packageMetadata);
58
29
  this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
59
30
  this.rtl = rtl;
60
31
  this.direction = this.rtl ? 'rtl' : 'ltr';
61
32
  });
62
33
  }
63
- get topClass() {
64
- return this.position === 'top';
34
+ /**
35
+ * Specifies the position of the AppBar
36
+ * ([see example]({% slug positioning_appbar %}#toc-position)).
37
+ *
38
+ * * The possible values are:
39
+ * * `top` (Default)&mdash;Positions the AppBar at the top of the content.
40
+ * Setting the `position` property to `top` requires adding the Appbar component before the page content.
41
+ * 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.
42
+ *
43
+ * * `bottom`&mdash;Positions the AppBar at the bottom of the content.
44
+ * Setting the `position` property to `bottom` requires adding the Appbar component after the page content.
45
+ * 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.
46
+ *
47
+ */
48
+ set position(position) {
49
+ const newPosition = position ? position : DEFAULT_POSITION;
50
+ this.handleHostClasses(newPosition, this.position);
51
+ this._position = newPosition;
65
52
  }
66
- get bottomClass() {
67
- return this.position === 'bottom';
53
+ get position() {
54
+ return this._position;
68
55
  }
69
- get stickyClass() {
70
- return this.positionMode === 'sticky';
56
+ /**
57
+ * Specifies the positionMode of the AppBar
58
+ * ([see example]({% slug positioning_appbar %}#toc-positionmode)).
59
+ *
60
+ * * The possible values are:
61
+ * * `static` (Default)&mdash;Does not position the AppBar in any special way. It is positioned according to the normal flow of the page.
62
+ * * `sticky`&mdash;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.
63
+ * * `fixed`&mdash;Positions the AppBar relative to the viewport. It always stays in the same place even if the page is scrolled.
64
+ */
65
+ set positionMode(positionMode) {
66
+ const newPositionMode = positionMode ? positionMode : DEFAULT_POSITION_MODE;
67
+ this.handleHostClasses(newPositionMode, this.positionMode);
68
+ this._positionMode = newPositionMode;
71
69
  }
72
- get fixedClass() {
73
- return this.positionMode === 'fixed';
70
+ get positionMode() {
71
+ return this._positionMode;
74
72
  }
75
- get staticClass() {
76
- return this.positionMode === 'static';
73
+ /**
74
+ * Specifies the theme color of the AppBar.
75
+ * The theme color will be applied as background color of the component.
76
+ *
77
+ *
78
+ * * The possible values are:
79
+ * * `light` (Default)&mdash;Applies coloring based on light theme color.
80
+ * * `dark`&mdash;Applies coloring based on dark theme color.
81
+ * * `inherit`&mdash; Applies inherited coloring value.
82
+ * * `primary`&mdash; Applies primary coloring value.
83
+ *
84
+ */
85
+ set themeColor(themeColor) {
86
+ const newThemeColor = themeColor ? themeColor : DEFAULT_THEME_COLOR;
87
+ this.handleHostClasses(newThemeColor, this.themeColor);
88
+ this._themeColor = newThemeColor;
77
89
  }
78
- get lightClass() {
79
- return this.themeColor === 'light';
90
+ get themeColor() {
91
+ return this._themeColor;
80
92
  }
81
- get darkClass() {
82
- return this.themeColor === 'dark';
83
- }
84
- get inheritClass() {
85
- return this.themeColor === 'inherit';
93
+ ngAfterViewInit() {
94
+ const stylingOptions = ['position', 'positionMode', 'themeColor'];
95
+ stylingOptions.forEach(input => {
96
+ this.handleHostClasses(this[input]);
97
+ });
86
98
  }
87
99
  ngOnDestroy() {
88
100
  if (this.dynamicRTLSubscription) {
89
101
  this.dynamicRTLSubscription.unsubscribe();
90
102
  }
91
103
  }
104
+ handleHostClasses(newValue, previousValue) {
105
+ const elem = this.host.nativeElement;
106
+ if (previousValue && newValue === previousValue) {
107
+ return;
108
+ }
109
+ if (previousValue) {
110
+ this.renderer.removeClass(elem, `k-appbar-${previousValue}`);
111
+ }
112
+ if (newValue) {
113
+ this.renderer.addClass(elem, `k-appbar-${newValue}`);
114
+ }
115
+ }
92
116
  }
93
- AppBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AppBarComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
94
- AppBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AppBarComponent, selector: "kendo-appbar", inputs: { position: "position", positionMode: "positionMode", themeColor: "themeColor" }, host: { properties: { "class.k-appbar": "this.hostClass", "class.k-appbar-top": "this.topClass", "class.k-appbar-bottom": "this.bottomClass", "class.k-appbar-sticky": "this.stickyClass", "class.k-appbar-fixed": "this.fixedClass", "class.k-appbar-static": "this.staticClass", "class.k-appbar-light": "this.lightClass", "class.k-appbar-dark": "this.darkClass", "class.k-appbar-inherit": "this.inheritClass", "attr.dir": "this.direction" } }, providers: [
117
+ AppBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AppBarComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
118
+ AppBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AppBarComponent, selector: "kendo-appbar", inputs: { position: "position", positionMode: "positionMode", themeColor: "themeColor" }, host: { properties: { "class.k-appbar": "this.hostClass", "attr.dir": "this.direction" } }, providers: [
95
119
  LocalizationService,
96
120
  {
97
121
  provide: L10N_PREFIX,
@@ -116,33 +140,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
116
140
  }
117
141
  ]
118
142
  }]
119
- }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { hostClass: [{
143
+ }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { hostClass: [{
120
144
  type: HostBinding,
121
145
  args: ['class.k-appbar']
122
- }], topClass: [{
123
- type: HostBinding,
124
- args: ['class.k-appbar-top']
125
- }], bottomClass: [{
126
- type: HostBinding,
127
- args: ['class.k-appbar-bottom']
128
- }], stickyClass: [{
129
- type: HostBinding,
130
- args: ['class.k-appbar-sticky']
131
- }], fixedClass: [{
132
- type: HostBinding,
133
- args: ['class.k-appbar-fixed']
134
- }], staticClass: [{
135
- type: HostBinding,
136
- args: ['class.k-appbar-static']
137
- }], lightClass: [{
138
- type: HostBinding,
139
- args: ['class.k-appbar-light']
140
- }], darkClass: [{
141
- type: HostBinding,
142
- args: ['class.k-appbar-dark']
143
- }], inheritClass: [{
144
- type: HostBinding,
145
- args: ['class.k-appbar-inherit']
146
146
  }], direction: [{
147
147
  type: HostBinding,
148
148
  args: ['attr.dir']
package/esm2020/package-metadata.mjs CHANGED
@@ -9,7 +9,7 @@ export const packageMetadata = {
9
9
  name: '@progress/kendo-angular-navigation',
10
10
  productName: 'Kendo UI for Angular',
11
11
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
12
- publishDate: 1712756428,
13
- version: '15.5.0-develop.4',
12
+ publishDate: 1712836221,
13
+ version: '15.5.0-develop.6',
14
14
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
15
15
  };
package/fesm2015/progress-kendo-angular-navigation.mjs CHANGED
@@ -26,95 +26,119 @@ const packageMetadata = {
26
26
  name: '@progress/kendo-angular-navigation',
27
27
  productName: 'Kendo UI for Angular',
28
28
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
29
- publishDate: 1712756428,
30
- version: '15.5.0-develop.4',
29
+ publishDate: 1712836221,
30
+ version: '15.5.0-develop.6',
31
31
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
32
32
  };
33
33
 
34
+ const DEFAULT_THEME_COLOR = 'light';
35
+ const DEFAULT_POSITION = 'top';
36
+ const DEFAULT_POSITION_MODE = 'static';
34
37
  /**
35
38
  * Represents the [Kendo UI AppBar component for Angular]({% slug overview_appbar %}).
36
39
  * Used to display information, actions, branding titles and additional navigation on the current screen.
37
40
  */
38
41
  class AppBarComponent {
39
- constructor(localizationService) {
42
+ constructor(localizationService, host, renderer) {
40
43
  this.localizationService = localizationService;
44
+ this.host = host;
45
+ this.renderer = renderer;
41
46
  this.hostClass = true;
42
- /**
43
- * Specifies the position of the AppBar
44
- * ([see example]({% slug positioning_appbar %}#toc-position)).
45
- *
46
- * * The possible values are:
47
- * * `top` (Default)&mdash;Positions the AppBar at the top of the content.
48
- * Setting the `position` property to `top` requires adding the Appbar component before the page content.
49
- * 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.
50
- *
51
- * * `bottom`&mdash;Positions the AppBar at the bottom of the content.
52
- * Setting the `position` property to `bottom` requires adding the Appbar component after the page content.
53
- * 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.
54
- *
55
- */
56
- this.position = 'top';
57
- /**
58
- * Specifies the positionMode of the AppBar
59
- * ([see example]({% slug positioning_appbar %}#toc-positionmode)).
60
- *
61
- * * The possible values are:
62
- * * `static` (Default)&mdash;Does not position the AppBar in any special way. It is positioned according to the normal flow of the page.
63
- * * `sticky`&mdash;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.
64
- * * `fixed`&mdash;Positions the AppBar relative to the viewport. It always stays in the same place even if the page is scrolled.
65
- */
66
- this.positionMode = 'static';
67
- /**
68
- * Specifies the theme color of the AppBar.
69
- * The theme color will be applied as background color of the component.
70
- *
71
- *
72
- * * The possible values are:
73
- * * `light` (Default)&mdash;Applies coloring based on light theme color.
74
- * * `dark`&mdash;Applies coloring based on dark theme color.
75
- * * `inherit`&mdash; Applies inherited coloring value.
76
- *
77
- */
78
- this.themeColor = 'light';
79
47
  this.rtl = false;
48
+ this._themeColor = DEFAULT_THEME_COLOR;
49
+ this._position = DEFAULT_POSITION;
50
+ this._positionMode = DEFAULT_POSITION_MODE;
80
51
  validatePackage(packageMetadata);
81
52
  this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
82
53
  this.rtl = rtl;
83
54
  this.direction = this.rtl ? 'rtl' : 'ltr';
84
55
  });
85
56
  }
86
- get topClass() {
87
- return this.position === 'top';
88
- }
89
- get bottomClass() {
90
- return this.position === 'bottom';
57
+ /**
58
+ * Specifies the position of the AppBar
59
+ * ([see example]({% slug positioning_appbar %}#toc-position)).
60
+ *
61
+ * * The possible values are:
62
+ * * `top` (Default)&mdash;Positions the AppBar at the top of the content.
63
+ * Setting the `position` property to `top` requires adding the Appbar component before the page content.
64
+ * 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.
65
+ *
66
+ * * `bottom`&mdash;Positions the AppBar at the bottom of the content.
67
+ * Setting the `position` property to `bottom` requires adding the Appbar component after the page content.
68
+ * 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.
69
+ *
70
+ */
71
+ set position(position) {
72
+ const newPosition = position ? position : DEFAULT_POSITION;
73
+ this.handleHostClasses(newPosition, this.position);
74
+ this._position = newPosition;
91
75
  }
92
- get stickyClass() {
93
- return this.positionMode === 'sticky';
76
+ get position() {
77
+ return this._position;
94
78
  }
95
- get fixedClass() {
96
- return this.positionMode === 'fixed';
79
+ /**
80
+ * Specifies the positionMode of the AppBar
81
+ * ([see example]({% slug positioning_appbar %}#toc-positionmode)).
82
+ *
83
+ * * The possible values are:
84
+ * * `static` (Default)&mdash;Does not position the AppBar in any special way. It is positioned according to the normal flow of the page.
85
+ * * `sticky`&mdash;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.
86
+ * * `fixed`&mdash;Positions the AppBar relative to the viewport. It always stays in the same place even if the page is scrolled.
87
+ */
88
+ set positionMode(positionMode) {
89
+ const newPositionMode = positionMode ? positionMode : DEFAULT_POSITION_MODE;
90
+ this.handleHostClasses(newPositionMode, this.positionMode);
91
+ this._positionMode = newPositionMode;
97
92
  }
98
- get staticClass() {
99
- return this.positionMode === 'static';
93
+ get positionMode() {
94
+ return this._positionMode;
100
95
  }
101
- get lightClass() {
102
- return this.themeColor === 'light';
96
+ /**
97
+ * Specifies the theme color of the AppBar.
98
+ * The theme color will be applied as background color of the component.
99
+ *
100
+ *
101
+ * * The possible values are:
102
+ * * `light` (Default)&mdash;Applies coloring based on light theme color.
103
+ * * `dark`&mdash;Applies coloring based on dark theme color.
104
+ * * `inherit`&mdash; Applies inherited coloring value.
105
+ * * `primary`&mdash; Applies primary coloring value.
106
+ *
107
+ */
108
+ set themeColor(themeColor) {
109
+ const newThemeColor = themeColor ? themeColor : DEFAULT_THEME_COLOR;
110
+ this.handleHostClasses(newThemeColor, this.themeColor);
111
+ this._themeColor = newThemeColor;
103
112
  }
104
- get darkClass() {
105
- return this.themeColor === 'dark';
113
+ get themeColor() {
114
+ return this._themeColor;
106
115
  }
107
- get inheritClass() {
108
- return this.themeColor === 'inherit';
116
+ ngAfterViewInit() {
117
+ const stylingOptions = ['position', 'positionMode', 'themeColor'];
118
+ stylingOptions.forEach(input => {
119
+ this.handleHostClasses(this[input]);
120
+ });
109
121
  }
110
122
  ngOnDestroy() {
111
123
  if (this.dynamicRTLSubscription) {
112
124
  this.dynamicRTLSubscription.unsubscribe();
113
125
  }
114
126
  }
127
+ handleHostClasses(newValue, previousValue) {
128
+ const elem = this.host.nativeElement;
129
+ if (previousValue && newValue === previousValue) {
130
+ return;
131
+ }
132
+ if (previousValue) {
133
+ this.renderer.removeClass(elem, `k-appbar-${previousValue}`);
134
+ }
135
+ if (newValue) {
136
+ this.renderer.addClass(elem, `k-appbar-${newValue}`);
137
+ }
138
+ }
115
139
  }
116
- AppBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AppBarComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
117
- AppBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AppBarComponent, selector: "kendo-appbar", inputs: { position: "position", positionMode: "positionMode", themeColor: "themeColor" }, host: { properties: { "class.k-appbar": "this.hostClass", "class.k-appbar-top": "this.topClass", "class.k-appbar-bottom": "this.bottomClass", "class.k-appbar-sticky": "this.stickyClass", "class.k-appbar-fixed": "this.fixedClass", "class.k-appbar-static": "this.staticClass", "class.k-appbar-light": "this.lightClass", "class.k-appbar-dark": "this.darkClass", "class.k-appbar-inherit": "this.inheritClass", "attr.dir": "this.direction" } }, providers: [
140
+ AppBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AppBarComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
141
+ AppBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AppBarComponent, selector: "kendo-appbar", inputs: { position: "position", positionMode: "positionMode", themeColor: "themeColor" }, host: { properties: { "class.k-appbar": "this.hostClass", "attr.dir": "this.direction" } }, providers: [
118
142
  LocalizationService,
119
143
  {
120
144
  provide: L10N_PREFIX,
@@ -139,33 +163,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
139
163
  }
140
164
  ]
141
165
  }]
142
- }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { hostClass: [{
166
+ }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { hostClass: [{
143
167
  type: HostBinding,
144
168
  args: ['class.k-appbar']
145
- }], topClass: [{
146
- type: HostBinding,
147
- args: ['class.k-appbar-top']
148
- }], bottomClass: [{
149
- type: HostBinding,
150
- args: ['class.k-appbar-bottom']
151
- }], stickyClass: [{
152
- type: HostBinding,
153
- args: ['class.k-appbar-sticky']
154
- }], fixedClass: [{
155
- type: HostBinding,
156
- args: ['class.k-appbar-fixed']
157
- }], staticClass: [{
158
- type: HostBinding,
159
- args: ['class.k-appbar-static']
160
- }], lightClass: [{
161
- type: HostBinding,
162
- args: ['class.k-appbar-light']
163
- }], darkClass: [{
164
- type: HostBinding,
165
- args: ['class.k-appbar-dark']
166
- }], inheritClass: [{
167
- type: HostBinding,
168
- args: ['class.k-appbar-inherit']
169
169
  }], direction: [{
170
170
  type: HostBinding,
171
171
  args: ['attr.dir']
package/fesm2020/progress-kendo-angular-navigation.mjs CHANGED
@@ -26,95 +26,119 @@ const packageMetadata = {
26
26
  name: '@progress/kendo-angular-navigation',
27
27
  productName: 'Kendo UI for Angular',
28
28
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
29
- publishDate: 1712756428,
30
- version: '15.5.0-develop.4',
29
+ publishDate: 1712836221,
30
+ version: '15.5.0-develop.6',
31
31
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
32
32
  };
33
33
 
34
+ const DEFAULT_THEME_COLOR = 'light';
35
+ const DEFAULT_POSITION = 'top';
36
+ const DEFAULT_POSITION_MODE = 'static';
34
37
  /**
35
38
  * Represents the [Kendo UI AppBar component for Angular]({% slug overview_appbar %}).
36
39
  * Used to display information, actions, branding titles and additional navigation on the current screen.
37
40
  */
38
41
  class AppBarComponent {
39
- constructor(localizationService) {
42
+ constructor(localizationService, host, renderer) {
40
43
  this.localizationService = localizationService;
44
+ this.host = host;
45
+ this.renderer = renderer;
41
46
  this.hostClass = true;
42
- /**
43
- * Specifies the position of the AppBar
44
- * ([see example]({% slug positioning_appbar %}#toc-position)).
45
- *
46
- * * The possible values are:
47
- * * `top` (Default)&mdash;Positions the AppBar at the top of the content.
48
- * Setting the `position` property to `top` requires adding the Appbar component before the page content.
49
- * 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.
50
- *
51
- * * `bottom`&mdash;Positions the AppBar at the bottom of the content.
52
- * Setting the `position` property to `bottom` requires adding the Appbar component after the page content.
53
- * 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.
54
- *
55
- */
56
- this.position = 'top';
57
- /**
58
- * Specifies the positionMode of the AppBar
59
- * ([see example]({% slug positioning_appbar %}#toc-positionmode)).
60
- *
61
- * * The possible values are:
62
- * * `static` (Default)&mdash;Does not position the AppBar in any special way. It is positioned according to the normal flow of the page.
63
- * * `sticky`&mdash;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.
64
- * * `fixed`&mdash;Positions the AppBar relative to the viewport. It always stays in the same place even if the page is scrolled.
65
- */
66
- this.positionMode = 'static';
67
- /**
68
- * Specifies the theme color of the AppBar.
69
- * The theme color will be applied as background color of the component.
70
- *
71
- *
72
- * * The possible values are:
73
- * * `light` (Default)&mdash;Applies coloring based on light theme color.
74
- * * `dark`&mdash;Applies coloring based on dark theme color.
75
- * * `inherit`&mdash; Applies inherited coloring value.
76
- *
77
- */
78
- this.themeColor = 'light';
79
47
  this.rtl = false;
48
+ this._themeColor = DEFAULT_THEME_COLOR;
49
+ this._position = DEFAULT_POSITION;
50
+ this._positionMode = DEFAULT_POSITION_MODE;
80
51
  validatePackage(packageMetadata);
81
52
  this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
82
53
  this.rtl = rtl;
83
54
  this.direction = this.rtl ? 'rtl' : 'ltr';
84
55
  });
85
56
  }
86
- get topClass() {
87
- return this.position === 'top';
88
- }
89
- get bottomClass() {
90
- return this.position === 'bottom';
57
+ /**
58
+ * Specifies the position of the AppBar
59
+ * ([see example]({% slug positioning_appbar %}#toc-position)).
60
+ *
61
+ * * The possible values are:
62
+ * * `top` (Default)&mdash;Positions the AppBar at the top of the content.
63
+ * Setting the `position` property to `top` requires adding the Appbar component before the page content.
64
+ * 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.
65
+ *
66
+ * * `bottom`&mdash;Positions the AppBar at the bottom of the content.
67
+ * Setting the `position` property to `bottom` requires adding the Appbar component after the page content.
68
+ * 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.
69
+ *
70
+ */
71
+ set position(position) {
72
+ const newPosition = position ? position : DEFAULT_POSITION;
73
+ this.handleHostClasses(newPosition, this.position);
74
+ this._position = newPosition;
91
75
  }
92
- get stickyClass() {
93
- return this.positionMode === 'sticky';
76
+ get position() {
77
+ return this._position;
94
78
  }
95
- get fixedClass() {
96
- return this.positionMode === 'fixed';
79
+ /**
80
+ * Specifies the positionMode of the AppBar
81
+ * ([see example]({% slug positioning_appbar %}#toc-positionmode)).
82
+ *
83
+ * * The possible values are:
84
+ * * `static` (Default)&mdash;Does not position the AppBar in any special way. It is positioned according to the normal flow of the page.
85
+ * * `sticky`&mdash;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.
86
+ * * `fixed`&mdash;Positions the AppBar relative to the viewport. It always stays in the same place even if the page is scrolled.
87
+ */
88
+ set positionMode(positionMode) {
89
+ const newPositionMode = positionMode ? positionMode : DEFAULT_POSITION_MODE;
90
+ this.handleHostClasses(newPositionMode, this.positionMode);
91
+ this._positionMode = newPositionMode;
97
92
  }
98
- get staticClass() {
99
- return this.positionMode === 'static';
93
+ get positionMode() {
94
+ return this._positionMode;
100
95
  }
101
- get lightClass() {
102
- return this.themeColor === 'light';
96
+ /**
97
+ * Specifies the theme color of the AppBar.
98
+ * The theme color will be applied as background color of the component.
99
+ *
100
+ *
101
+ * * The possible values are:
102
+ * * `light` (Default)&mdash;Applies coloring based on light theme color.
103
+ * * `dark`&mdash;Applies coloring based on dark theme color.
104
+ * * `inherit`&mdash; Applies inherited coloring value.
105
+ * * `primary`&mdash; Applies primary coloring value.
106
+ *
107
+ */
108
+ set themeColor(themeColor) {
109
+ const newThemeColor = themeColor ? themeColor : DEFAULT_THEME_COLOR;
110
+ this.handleHostClasses(newThemeColor, this.themeColor);
111
+ this._themeColor = newThemeColor;
103
112
  }
104
- get darkClass() {
105
- return this.themeColor === 'dark';
113
+ get themeColor() {
114
+ return this._themeColor;
106
115
  }
107
- get inheritClass() {
108
- return this.themeColor === 'inherit';
116
+ ngAfterViewInit() {
117
+ const stylingOptions = ['position', 'positionMode', 'themeColor'];
118
+ stylingOptions.forEach(input => {
119
+ this.handleHostClasses(this[input]);
120
+ });
109
121
  }
110
122
  ngOnDestroy() {
111
123
  if (this.dynamicRTLSubscription) {
112
124
  this.dynamicRTLSubscription.unsubscribe();
113
125
  }
114
126
  }
127
+ handleHostClasses(newValue, previousValue) {
128
+ const elem = this.host.nativeElement;
129
+ if (previousValue && newValue === previousValue) {
130
+ return;
131
+ }
132
+ if (previousValue) {
133
+ this.renderer.removeClass(elem, `k-appbar-${previousValue}`);
134
+ }
135
+ if (newValue) {
136
+ this.renderer.addClass(elem, `k-appbar-${newValue}`);
137
+ }
138
+ }
115
139
  }
116
- AppBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AppBarComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
117
- AppBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AppBarComponent, selector: "kendo-appbar", inputs: { position: "position", positionMode: "positionMode", themeColor: "themeColor" }, host: { properties: { "class.k-appbar": "this.hostClass", "class.k-appbar-top": "this.topClass", "class.k-appbar-bottom": "this.bottomClass", "class.k-appbar-sticky": "this.stickyClass", "class.k-appbar-fixed": "this.fixedClass", "class.k-appbar-static": "this.staticClass", "class.k-appbar-light": "this.lightClass", "class.k-appbar-dark": "this.darkClass", "class.k-appbar-inherit": "this.inheritClass", "attr.dir": "this.direction" } }, providers: [
140
+ AppBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AppBarComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
141
+ AppBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AppBarComponent, selector: "kendo-appbar", inputs: { position: "position", positionMode: "positionMode", themeColor: "themeColor" }, host: { properties: { "class.k-appbar": "this.hostClass", "attr.dir": "this.direction" } }, providers: [
118
142
  LocalizationService,
119
143
  {
120
144
  provide: L10N_PREFIX,
@@ -139,33 +163,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
139
163
  }
140
164
  ]
141
165
  }]
142
- }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { hostClass: [{
166
+ }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { hostClass: [{
143
167
  type: HostBinding,
144
168
  args: ['class.k-appbar']
145
- }], topClass: [{
146
- type: HostBinding,
147
- args: ['class.k-appbar-top']
148
- }], bottomClass: [{
149
- type: HostBinding,
150
- args: ['class.k-appbar-bottom']
151
- }], stickyClass: [{
152
- type: HostBinding,
153
- args: ['class.k-appbar-sticky']
154
- }], fixedClass: [{
155
- type: HostBinding,
156
- args: ['class.k-appbar-fixed']
157
- }], staticClass: [{
158
- type: HostBinding,
159
- args: ['class.k-appbar-static']
160
- }], lightClass: [{
161
- type: HostBinding,
162
- args: ['class.k-appbar-light']
163
- }], darkClass: [{
164
- type: HostBinding,
165
- args: ['class.k-appbar-dark']
166
- }], inheritClass: [{
167
- type: HostBinding,
168
- args: ['class.k-appbar-inherit']
169
169
  }], direction: [{
170
170
  type: HostBinding,
171
171
  args: ['attr.dir']
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@progress/kendo-angular-navigation",
3
- "version": "15.5.0-develop.4",
3
+ "version": "15.5.0-develop.6",
4
4
  "description": "Kendo UI Navigation for Angular",
5
5
  "license": "SEE LICENSE IN LICENSE.md",
6
6
  "author": "Progress",
@@ -21,14 +21,14 @@
21
21
  "@angular/core": "13 - 17",
22
22
  "@angular/platform-browser": "13 - 17",
23
23
  "@progress/kendo-licensing": "^1.0.2",
24
- "@progress/kendo-angular-common": "15.5.0-develop.4",
25
- "@progress/kendo-angular-icons": "15.5.0-develop.4",
26
- "@progress/kendo-angular-l10n": "15.5.0-develop.4",
24
+ "@progress/kendo-angular-common": "15.5.0-develop.6",
25
+ "@progress/kendo-angular-icons": "15.5.0-develop.6",
26
+ "@progress/kendo-angular-l10n": "15.5.0-develop.6",
27
27
  "rxjs": "^6.5.3 || ^7.0.0"
28
28
  },
29
29
  "dependencies": {
30
30
  "tslib": "^2.3.1",
31
- "@progress/kendo-angular-schematics": "15.5.0-develop.4"
31
+ "@progress/kendo-angular-schematics": "15.5.0-develop.6"
32
32
  },
33
33
  "schematics": "./schematics/collection.json",
34
34
  "module": "fesm2015/progress-kendo-angular-navigation.mjs",