@progress/kendo-angular-navigation 21.4.1-develop.1 → 22.0.0-develop.1
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.
- package/fesm2022/progress-kendo-angular-navigation.mjs +83 -83
- package/package.json +11 -19
- package/esm2022/actionsheet/actionsheet-view.component.mjs +0 -173
- package/esm2022/actionsheet/actionsheet.component.mjs +0 -700
- package/esm2022/actionsheet/animation/animations.mjs +0 -23
- package/esm2022/actionsheet/item.component.mjs +0 -125
- package/esm2022/actionsheet/list.component.mjs +0 -95
- package/esm2022/actionsheet/models/actionsheet-action-layout.mjs +0 -5
- package/esm2022/actionsheet/models/actionsheet-action.mjs +0 -5
- package/esm2022/actionsheet/models/actionsheet-item.interface.mjs +0 -5
- package/esm2022/actionsheet/models/animation.mjs +0 -5
- package/esm2022/actionsheet/models/group.mjs +0 -5
- package/esm2022/actionsheet/models/index.mjs +0 -10
- package/esm2022/actionsheet/models/item-click.event.mjs +0 -19
- package/esm2022/actionsheet/templates/actionsheet-template.mjs +0 -37
- package/esm2022/actionsheet/templates/content-template.directive.mjs +0 -37
- package/esm2022/actionsheet/templates/footer-template.directive.mjs +0 -37
- package/esm2022/actionsheet/templates/header-template.directive.mjs +0 -37
- package/esm2022/actionsheet/templates/item-template.directive.mjs +0 -37
- package/esm2022/actionsheet.module.mjs +0 -48
- package/esm2022/appbar/appbar-section.component.mjs +0 -40
- package/esm2022/appbar/appbar-spacer.component.mjs +0 -69
- package/esm2022/appbar/appbar.component.mjs +0 -158
- package/esm2022/appbar/models/position-mode.mjs +0 -5
- package/esm2022/appbar/models/position.mjs +0 -5
- package/esm2022/appbar/models/theme-color.mjs +0 -5
- package/esm2022/appbar.module.mjs +0 -42
- package/esm2022/bottomnavigation/bottomnavigation-item.component.mjs +0 -122
- package/esm2022/bottomnavigation/bottomnavigation.component.mjs +0 -334
- package/esm2022/bottomnavigation/constants.mjs +0 -12
- package/esm2022/bottomnavigation/events/select-event.mjs +0 -33
- package/esm2022/bottomnavigation/templates/item-template.directive.mjs +0 -36
- package/esm2022/bottomnavigation/types/bottomnavigation-fill.mjs +0 -5
- package/esm2022/bottomnavigation/types/bottomnavigation-item-flow.mjs +0 -5
- package/esm2022/bottomnavigation/types/bottomnavigation-item.mjs +0 -5
- package/esm2022/bottomnavigation/types/bottomnavigation-position-mode.mjs +0 -5
- package/esm2022/bottomnavigation/types/bottomnavigation-theme-color.mjs +0 -20
- package/esm2022/bottomnavigation.module.mjs +0 -43
- package/esm2022/breadcrumb/breadcrumb-item.component.mjs +0 -186
- package/esm2022/breadcrumb/breadcrumb.component.mjs +0 -362
- package/esm2022/breadcrumb/list.component.mjs +0 -107
- package/esm2022/breadcrumb/models/breadcrumb-item.interface.mjs +0 -5
- package/esm2022/breadcrumb/models/breadcrumb-size.mjs +0 -5
- package/esm2022/breadcrumb/models/collapse-mode.mjs +0 -5
- package/esm2022/breadcrumb/models/constants.mjs +0 -33
- package/esm2022/breadcrumb/template-directives/item-template.directive.mjs +0 -40
- package/esm2022/breadcrumb/template-directives/separator.directive.mjs +0 -108
- package/esm2022/breadcrumb/util.mjs +0 -22
- package/esm2022/breadcrumb.module.mjs +0 -44
- package/esm2022/common/direction.mjs +0 -5
- package/esm2022/common/dom-queries.mjs +0 -22
- package/esm2022/common/preventable-event.mjs +0 -34
- package/esm2022/common/util.mjs +0 -63
- package/esm2022/directives.mjs +0 -146
- package/esm2022/index.mjs +0 -27
- package/esm2022/navigation.module.mjs +0 -56
- package/esm2022/package-metadata.mjs +0 -16
- package/esm2022/progress-kendo-angular-navigation.mjs +0 -8
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { Component, HostBinding, Input, Renderer2, ElementRef } from '@angular/core';
|
|
6
|
-
import { isPresent } from '../common/util';
|
|
7
|
-
import * as i0 from "@angular/core";
|
|
8
|
-
/**
|
|
9
|
-
* Represents the [Kendo UI AppBarSpacer component for Angular]({% slug contentarrangement_appbar %}#toc-spacings).
|
|
10
|
-
*
|
|
11
|
-
* Use the AppBarSpacer component to add white space between AppBar sections and customize its width.
|
|
12
|
-
*
|
|
13
|
-
* @example
|
|
14
|
-
* ```html
|
|
15
|
-
* <kendo-appbar>
|
|
16
|
-
* <kendo-appbar-section>
|
|
17
|
-
* <button kendoButton fillMode="flat" [svgIcon]="menuIcon"></button>
|
|
18
|
-
* </kendo-appbar-section>
|
|
19
|
-
*
|
|
20
|
-
* <kendo-appbar-spacer></kendo-appbar-spacer>
|
|
21
|
-
*
|
|
22
|
-
* <kendo-appbar-section>
|
|
23
|
-
* <h2>Page Title</h2>
|
|
24
|
-
* </kendo-appbar-section>
|
|
25
|
-
* </kendo-appbar>
|
|
26
|
-
* ```
|
|
27
|
-
*/
|
|
28
|
-
export class AppBarSpacerComponent {
|
|
29
|
-
renderer;
|
|
30
|
-
element;
|
|
31
|
-
hostClass = true;
|
|
32
|
-
get sizedClass() {
|
|
33
|
-
return isPresent(this.width);
|
|
34
|
-
}
|
|
35
|
-
/**
|
|
36
|
-
* Specifies the width of the AppBarSpacer.
|
|
37
|
-
*
|
|
38
|
-
* If not set, the AppBarSpacer will take all of the available space.
|
|
39
|
-
*/
|
|
40
|
-
width;
|
|
41
|
-
constructor(renderer, element) {
|
|
42
|
-
this.renderer = renderer;
|
|
43
|
-
this.element = element;
|
|
44
|
-
}
|
|
45
|
-
ngAfterViewInit() {
|
|
46
|
-
if (isPresent(this.width)) {
|
|
47
|
-
const element = this.element.nativeElement;
|
|
48
|
-
this.renderer.setStyle(element, 'flexBasis', this.width);
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppBarSpacerComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
52
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AppBarSpacerComponent, isStandalone: true, selector: "kendo-appbar-spacer", inputs: { width: "width" }, host: { properties: { "class.k-spacer": "this.hostClass", "class.k-spacer-sized": "this.sizedClass" } }, ngImport: i0, template: ``, isInline: true });
|
|
53
|
-
}
|
|
54
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppBarSpacerComponent, decorators: [{
|
|
55
|
-
type: Component,
|
|
56
|
-
args: [{
|
|
57
|
-
selector: 'kendo-appbar-spacer',
|
|
58
|
-
template: ``,
|
|
59
|
-
standalone: true
|
|
60
|
-
}]
|
|
61
|
-
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { hostClass: [{
|
|
62
|
-
type: HostBinding,
|
|
63
|
-
args: ['class.k-spacer']
|
|
64
|
-
}], sizedClass: [{
|
|
65
|
-
type: HostBinding,
|
|
66
|
-
args: ['class.k-spacer-sized']
|
|
67
|
-
}], width: [{
|
|
68
|
-
type: Input
|
|
69
|
-
}] } });
|
|
@@ -1,158 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { Component, ElementRef, HostBinding, Input, Renderer2 } from '@angular/core';
|
|
6
|
-
import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
|
|
7
|
-
import { validatePackage } from '@progress/kendo-licensing';
|
|
8
|
-
import { packageMetadata } from '../package-metadata';
|
|
9
|
-
import * as i0 from "@angular/core";
|
|
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';
|
|
14
|
-
/**
|
|
15
|
-
* Represents the [Kendo UI AppBar component for Angular]({% slug overview_appbar %}).
|
|
16
|
-
*
|
|
17
|
-
* Use the AppBar component to display information, actions, brand titles, and additional navigation on the current screen.
|
|
18
|
-
*
|
|
19
|
-
* @example
|
|
20
|
-
* ```html
|
|
21
|
-
* <kendo-appbar>
|
|
22
|
-
* <kendo-appbar-section>
|
|
23
|
-
* <h2>Page Title</h2>
|
|
24
|
-
* </kendo-appbar-section>
|
|
25
|
-
* </kendo-appbar>
|
|
26
|
-
* ```
|
|
27
|
-
*
|
|
28
|
-
* @remarks
|
|
29
|
-
* Supported children components are: {@link AppBarSectionComponent}, {@link AppBarSpacerComponent}
|
|
30
|
-
*/
|
|
31
|
-
export class AppBarComponent {
|
|
32
|
-
localizationService;
|
|
33
|
-
host;
|
|
34
|
-
renderer;
|
|
35
|
-
hostClass = true;
|
|
36
|
-
/**
|
|
37
|
-
* @hidden
|
|
38
|
-
*/
|
|
39
|
-
direction;
|
|
40
|
-
/**
|
|
41
|
-
* Specifies the position of the AppBar
|
|
42
|
-
* ([see example]({% slug positioning_appbar %}#toc-position)).
|
|
43
|
-
*
|
|
44
|
-
* @default 'top'
|
|
45
|
-
*/
|
|
46
|
-
set position(position) {
|
|
47
|
-
const newPosition = position ? position : DEFAULT_POSITION;
|
|
48
|
-
this.handleHostClasses(newPosition, this.position);
|
|
49
|
-
this._position = newPosition;
|
|
50
|
-
}
|
|
51
|
-
get position() {
|
|
52
|
-
return this._position;
|
|
53
|
-
}
|
|
54
|
-
/**
|
|
55
|
-
* Sets the position mode of the AppBar ([see example](slug:positioning_appbar#toc-position-mode)).
|
|
56
|
-
*
|
|
57
|
-
* @default 'static'
|
|
58
|
-
*/
|
|
59
|
-
set positionMode(positionMode) {
|
|
60
|
-
const newPositionMode = positionMode ? positionMode : DEFAULT_POSITION_MODE;
|
|
61
|
-
this.handleHostClasses(newPositionMode, this.positionMode);
|
|
62
|
-
this._positionMode = newPositionMode;
|
|
63
|
-
}
|
|
64
|
-
get positionMode() {
|
|
65
|
-
return this._positionMode;
|
|
66
|
-
}
|
|
67
|
-
/**
|
|
68
|
-
* Sets the theme color of the AppBar. The theme color is applied as the background color of the component.
|
|
69
|
-
*
|
|
70
|
-
* @default 'light'
|
|
71
|
-
*/
|
|
72
|
-
set themeColor(themeColor) {
|
|
73
|
-
const newThemeColor = themeColor ? themeColor : DEFAULT_THEME_COLOR;
|
|
74
|
-
this.handleHostClasses(newThemeColor, this.themeColor);
|
|
75
|
-
this._themeColor = newThemeColor;
|
|
76
|
-
}
|
|
77
|
-
get themeColor() {
|
|
78
|
-
return this._themeColor;
|
|
79
|
-
}
|
|
80
|
-
dynamicRTLSubscription;
|
|
81
|
-
rtl = false;
|
|
82
|
-
_themeColor = DEFAULT_THEME_COLOR;
|
|
83
|
-
_position = DEFAULT_POSITION;
|
|
84
|
-
_positionMode = DEFAULT_POSITION_MODE;
|
|
85
|
-
constructor(localizationService, host, renderer) {
|
|
86
|
-
this.localizationService = localizationService;
|
|
87
|
-
this.host = host;
|
|
88
|
-
this.renderer = renderer;
|
|
89
|
-
validatePackage(packageMetadata);
|
|
90
|
-
this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
|
|
91
|
-
this.rtl = rtl;
|
|
92
|
-
this.direction = this.rtl ? 'rtl' : 'ltr';
|
|
93
|
-
});
|
|
94
|
-
}
|
|
95
|
-
ngAfterViewInit() {
|
|
96
|
-
const stylingOptions = ['position', 'positionMode', 'themeColor'];
|
|
97
|
-
stylingOptions.forEach(input => {
|
|
98
|
-
this.handleHostClasses(this[input]);
|
|
99
|
-
});
|
|
100
|
-
}
|
|
101
|
-
ngOnDestroy() {
|
|
102
|
-
if (this.dynamicRTLSubscription) {
|
|
103
|
-
this.dynamicRTLSubscription.unsubscribe();
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
handleHostClasses(newValue, previousValue) {
|
|
107
|
-
const elem = this.host.nativeElement;
|
|
108
|
-
if (previousValue && newValue === previousValue) {
|
|
109
|
-
return;
|
|
110
|
-
}
|
|
111
|
-
if (previousValue) {
|
|
112
|
-
this.renderer.removeClass(elem, `k-appbar-${previousValue}`);
|
|
113
|
-
}
|
|
114
|
-
if (newValue) {
|
|
115
|
-
this.renderer.addClass(elem, `k-appbar-${newValue}`);
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppBarComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
119
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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: [
|
|
120
|
-
LocalizationService,
|
|
121
|
-
{
|
|
122
|
-
provide: L10N_PREFIX,
|
|
123
|
-
useValue: 'kendo.appbar.component'
|
|
124
|
-
}
|
|
125
|
-
], exportAs: ["kendoAppBar"], ngImport: i0, template: `
|
|
126
|
-
<ng-content></ng-content>
|
|
127
|
-
`, isInline: true });
|
|
128
|
-
}
|
|
129
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppBarComponent, decorators: [{
|
|
130
|
-
type: Component,
|
|
131
|
-
args: [{
|
|
132
|
-
exportAs: 'kendoAppBar',
|
|
133
|
-
selector: 'kendo-appbar',
|
|
134
|
-
template: `
|
|
135
|
-
<ng-content></ng-content>
|
|
136
|
-
`,
|
|
137
|
-
providers: [
|
|
138
|
-
LocalizationService,
|
|
139
|
-
{
|
|
140
|
-
provide: L10N_PREFIX,
|
|
141
|
-
useValue: 'kendo.appbar.component'
|
|
142
|
-
}
|
|
143
|
-
],
|
|
144
|
-
standalone: true
|
|
145
|
-
}]
|
|
146
|
-
}], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { hostClass: [{
|
|
147
|
-
type: HostBinding,
|
|
148
|
-
args: ['class.k-appbar']
|
|
149
|
-
}], direction: [{
|
|
150
|
-
type: HostBinding,
|
|
151
|
-
args: ['attr.dir']
|
|
152
|
-
}], position: [{
|
|
153
|
-
type: Input
|
|
154
|
-
}], positionMode: [{
|
|
155
|
-
type: Input
|
|
156
|
-
}], themeColor: [{
|
|
157
|
-
type: Input
|
|
158
|
-
}] } });
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
export {};
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
export {};
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
export {};
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { NgModule } from '@angular/core';
|
|
6
|
-
import { KENDO_APPBAR } from './directives';
|
|
7
|
-
import * as i0 from "@angular/core";
|
|
8
|
-
import * as i1 from "./appbar/appbar.component";
|
|
9
|
-
import * as i2 from "./appbar/appbar-section.component";
|
|
10
|
-
import * as i3 from "./appbar/appbar-spacer.component";
|
|
11
|
-
// IMPORTANT: NgModule export kept for backwards compatibility
|
|
12
|
-
/**
|
|
13
|
-
* Represents the [`NgModule`](link:site.data.urls.angular['ngmoduleapi'])
|
|
14
|
-
* definition for the AppBar component.
|
|
15
|
-
*
|
|
16
|
-
* @example
|
|
17
|
-
* ```typescript
|
|
18
|
-
* import { AppBarModule } from '@progress/kendo-angular-navigation';
|
|
19
|
-
* import { BrowserModule } from '@angular/platform-browser';
|
|
20
|
-
* import { NgModule } from '@angular/core';
|
|
21
|
-
* import { AppComponent } from './app.component';
|
|
22
|
-
*
|
|
23
|
-
* @NgModule({
|
|
24
|
-
* declarations: [AppComponent],
|
|
25
|
-
* imports: [BrowserModule, AppBarModule],
|
|
26
|
-
* bootstrap: [AppComponent]
|
|
27
|
-
* })
|
|
28
|
-
* export class AppModule {}
|
|
29
|
-
* ```
|
|
30
|
-
*/
|
|
31
|
-
export class AppBarModule {
|
|
32
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
33
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: AppBarModule, imports: [i1.AppBarComponent, i2.AppBarSectionComponent, i3.AppBarSpacerComponent], exports: [i1.AppBarComponent, i2.AppBarSectionComponent, i3.AppBarSpacerComponent] });
|
|
34
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppBarModule });
|
|
35
|
-
}
|
|
36
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppBarModule, decorators: [{
|
|
37
|
-
type: NgModule,
|
|
38
|
-
args: [{
|
|
39
|
-
exports: [...KENDO_APPBAR],
|
|
40
|
-
imports: [...KENDO_APPBAR]
|
|
41
|
-
}]
|
|
42
|
-
}] });
|
|
@@ -1,122 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { Component, HostBinding, Input } from '@angular/core';
|
|
6
|
-
import { NgTemplateOutlet } from '@angular/common';
|
|
7
|
-
import { BottomNavigationItemTemplateDirective } from './templates/item-template.directive';
|
|
8
|
-
import { IconWrapperComponent } from '@progress/kendo-angular-icons';
|
|
9
|
-
import * as i0 from "@angular/core";
|
|
10
|
-
/**
|
|
11
|
-
* @hidden
|
|
12
|
-
*/
|
|
13
|
-
export class BottomNavigationItemComponent {
|
|
14
|
-
itemTemplate;
|
|
15
|
-
item;
|
|
16
|
-
index;
|
|
17
|
-
disabledComponent;
|
|
18
|
-
selectedIdx;
|
|
19
|
-
orientation;
|
|
20
|
-
get disabledClass() {
|
|
21
|
-
return this.item.disabled;
|
|
22
|
-
}
|
|
23
|
-
get label() {
|
|
24
|
-
return this.item.text ? this.item.text : null;
|
|
25
|
-
}
|
|
26
|
-
get tabindex() {
|
|
27
|
-
return this.item.tabIndex ? this.item.tabIndex : 0;
|
|
28
|
-
}
|
|
29
|
-
get selectedClass() {
|
|
30
|
-
return this.selectedIdx ? this.selectedIdx === this.index : this.item.selected;
|
|
31
|
-
}
|
|
32
|
-
get itemIcon() {
|
|
33
|
-
return Boolean(this.item.icon || this.item.iconClass || this.item.svgIcon);
|
|
34
|
-
}
|
|
35
|
-
get iconClasses() {
|
|
36
|
-
const kendoIcon = this.item.icon ? `k-icon k-i-${this.item.icon}` : '';
|
|
37
|
-
const customIcon = this.item.iconClass ? this.item.iconClass : '';
|
|
38
|
-
return `${kendoIcon} ${customIcon}`;
|
|
39
|
-
}
|
|
40
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BottomNavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
41
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: BottomNavigationItemComponent, isStandalone: true, selector: "[kendoBottomNavigationItem]", inputs: { itemTemplate: "itemTemplate", item: "item", index: "index", disabledComponent: "disabledComponent", selectedIdx: "selectedIdx", orientation: "orientation" }, host: { properties: { "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.aria-label": "this.label", "attr.tabindex": "this.tabindex", "attr.aria-current": "this.selectedClass", "class.k-selected": "this.selectedClass" } }, ngImport: i0, template: `
|
|
42
|
-
@if (!itemTemplate) {
|
|
43
|
-
@if (itemIcon) {
|
|
44
|
-
<kendo-icon-wrapper
|
|
45
|
-
innerCssClass="k-bottom-nav-item-icon"
|
|
46
|
-
size="xlarge"
|
|
47
|
-
[name]="item.icon"
|
|
48
|
-
[customFontClass]="item.iconClass"
|
|
49
|
-
[svgIcon]="item.svgIcon"></kendo-icon-wrapper>
|
|
50
|
-
}
|
|
51
|
-
@if (item.text) {
|
|
52
|
-
<span class="k-bottom-nav-item-text">{{item.text}}</span>
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
@if (itemTemplate) {
|
|
56
|
-
<ng-template
|
|
57
|
-
[ngTemplateOutlet]="itemTemplate?.templateRef"
|
|
58
|
-
[ngTemplateOutletContext]="{ $implicit: item }">
|
|
59
|
-
</ng-template>
|
|
60
|
-
}
|
|
61
|
-
`, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
62
|
-
}
|
|
63
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BottomNavigationItemComponent, decorators: [{
|
|
64
|
-
type: Component,
|
|
65
|
-
args: [{
|
|
66
|
-
// eslint-disable-next-line @angular-eslint/component-selector
|
|
67
|
-
selector: '[kendoBottomNavigationItem]',
|
|
68
|
-
template: `
|
|
69
|
-
@if (!itemTemplate) {
|
|
70
|
-
@if (itemIcon) {
|
|
71
|
-
<kendo-icon-wrapper
|
|
72
|
-
innerCssClass="k-bottom-nav-item-icon"
|
|
73
|
-
size="xlarge"
|
|
74
|
-
[name]="item.icon"
|
|
75
|
-
[customFontClass]="item.iconClass"
|
|
76
|
-
[svgIcon]="item.svgIcon"></kendo-icon-wrapper>
|
|
77
|
-
}
|
|
78
|
-
@if (item.text) {
|
|
79
|
-
<span class="k-bottom-nav-item-text">{{item.text}}</span>
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
@if (itemTemplate) {
|
|
83
|
-
<ng-template
|
|
84
|
-
[ngTemplateOutlet]="itemTemplate?.templateRef"
|
|
85
|
-
[ngTemplateOutletContext]="{ $implicit: item }">
|
|
86
|
-
</ng-template>
|
|
87
|
-
}
|
|
88
|
-
`,
|
|
89
|
-
standalone: true,
|
|
90
|
-
imports: [IconWrapperComponent, NgTemplateOutlet]
|
|
91
|
-
}]
|
|
92
|
-
}], propDecorators: { itemTemplate: [{
|
|
93
|
-
type: Input
|
|
94
|
-
}], item: [{
|
|
95
|
-
type: Input
|
|
96
|
-
}], index: [{
|
|
97
|
-
type: Input
|
|
98
|
-
}], disabledComponent: [{
|
|
99
|
-
type: Input
|
|
100
|
-
}], selectedIdx: [{
|
|
101
|
-
type: Input
|
|
102
|
-
}], orientation: [{
|
|
103
|
-
type: Input
|
|
104
|
-
}], disabledClass: [{
|
|
105
|
-
type: HostBinding,
|
|
106
|
-
args: ['attr.aria-disabled']
|
|
107
|
-
}, {
|
|
108
|
-
type: HostBinding,
|
|
109
|
-
args: ['class.k-disabled']
|
|
110
|
-
}], label: [{
|
|
111
|
-
type: HostBinding,
|
|
112
|
-
args: ['attr.aria-label']
|
|
113
|
-
}], tabindex: [{
|
|
114
|
-
type: HostBinding,
|
|
115
|
-
args: ['attr.tabindex']
|
|
116
|
-
}], selectedClass: [{
|
|
117
|
-
type: HostBinding,
|
|
118
|
-
args: ['attr.aria-current']
|
|
119
|
-
}, {
|
|
120
|
-
type: HostBinding,
|
|
121
|
-
args: ['class.k-selected']
|
|
122
|
-
}] } });
|