@progress/kendo-angular-navigation 13.4.0-develop.3 → 13.4.0-develop.4

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 (10) hide show
  1. package/breadcrumb/breadcrumb.component.d.ts +18 -3
  2. package/breadcrumb/models/breadcrumb-size.d.ts +9 -0
  3. package/breadcrumb/models/constants.d.ts +18 -0
  4. package/esm2020/breadcrumb/breadcrumb.component.mjs +38 -5
  5. package/esm2020/breadcrumb/models/breadcrumb-size.mjs +5 -0
  6. package/esm2020/breadcrumb/models/constants.mjs +25 -0
  7. package/esm2020/package-metadata.mjs +2 -2
  8. package/fesm2015/progress-kendo-angular-navigation.mjs +63 -6
  9. package/fesm2020/progress-kendo-angular-navigation.mjs +63 -6
  10. package/package.json +5 -5
package/breadcrumb/breadcrumb.component.d.ts CHANGED
@@ -2,7 +2,7 @@
2
2
  * Copyright © 2023 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 { EventEmitter, ElementRef, ChangeDetectorRef, NgZone, AfterViewInit, OnDestroy, QueryList, OnInit } from '@angular/core';
5
+ import { EventEmitter, ElementRef, ChangeDetectorRef, NgZone, AfterViewInit, OnDestroy, QueryList, OnInit, Renderer2 } from '@angular/core';
6
6
  import { Observable } from 'rxjs';
7
7
  import { ResizeSensorComponent } from '@progress/kendo-angular-common';
8
8
  import { LocalizationService } from '@progress/kendo-angular-l10n';
@@ -11,6 +11,7 @@ import { BreadCrumbCollapseMode } from './models/collapse-mode';
11
11
  import { BreadCrumbItemTemplateDirective } from './template-directives/item-template.directive';
12
12
  import { BreadCrumbListComponent } from './list.component';
13
13
  import { SVGIcon } from '@progress/kendo-angular-icons';
14
+ import { BreadcrumbSize } from './models/breadcrumb-size';
14
15
  import * as i0 from "@angular/core";
15
16
  /**
16
17
  * Represents the [Kendo UI Breadcrumb component for Angular]({% slug overview_breadcrumb %}).
@@ -46,6 +47,7 @@ export declare class BreadCrumbComponent implements OnInit, AfterViewInit, OnDes
46
47
  private el;
47
48
  private cdr;
48
49
  private zone;
50
+ private renderer;
49
51
  /**
50
52
  * The collection of items that will be rendered in the Breadcrumb.
51
53
  */
@@ -71,6 +73,17 @@ export declare class BreadCrumbComponent implements OnInit, AfterViewInit, OnDes
71
73
  */
72
74
  set collapseMode(mode: BreadCrumbCollapseMode);
73
75
  get collapseMode(): BreadCrumbCollapseMode;
76
+ /**
77
+ * Specifies the padding of all Breadcrumb elements.
78
+ *
79
+ * The possible values are:
80
+ * * `small`
81
+ * * `medium` (default)
82
+ * * `large`
83
+ * * `none`
84
+ */
85
+ set size(size: BreadcrumbSize);
86
+ get size(): BreadcrumbSize;
74
87
  /**
75
88
  * Fires when a Breadcrumb item is clicked. The event will not be fired by disabled items and the last item.
76
89
  */
@@ -99,17 +112,19 @@ export declare class BreadCrumbComponent implements OnInit, AfterViewInit, OnDes
99
112
  firstItem$: Observable<BreadCrumbItemModel[]>;
100
113
  private _items;
101
114
  private _collapseMode;
115
+ private _size;
102
116
  private updateItems;
103
117
  private afterViewInit;
104
118
  private subscriptions;
105
119
  private direction;
106
- constructor(localization: LocalizationService, el: ElementRef<HTMLElement>, cdr: ChangeDetectorRef, zone: NgZone);
120
+ constructor(localization: LocalizationService, el: ElementRef<HTMLElement>, cdr: ChangeDetectorRef, zone: NgZone, renderer: Renderer2);
107
121
  ngOnInit(): void;
108
122
  ngAfterViewInit(): void;
109
123
  ngOnDestroy(): void;
110
124
  private handleResize;
111
125
  private shouldResize;
112
126
  private attachResizeHandler;
127
+ private handleClasses;
113
128
  static ɵfac: i0.ɵɵFactoryDeclaration<BreadCrumbComponent, never>;
114
- static ɵcmp: i0.ɵɵComponentDeclaration<BreadCrumbComponent, "kendo-breadcrumb", ["kendoBreadCrumb"], { "items": "items"; "separatorIcon": "separatorIcon"; "separatorSVGIcon": "separatorSVGIcon"; "collapseMode": "collapseMode"; }, { "itemClick": "itemClick"; }, ["itemTemplate"], never>;
129
+ static ɵcmp: i0.ɵɵComponentDeclaration<BreadCrumbComponent, "kendo-breadcrumb", ["kendoBreadCrumb"], { "items": "items"; "separatorIcon": "separatorIcon"; "separatorSVGIcon": "separatorSVGIcon"; "collapseMode": "collapseMode"; "size": "size"; }, { "itemClick": "itemClick"; }, ["itemTemplate"], never>;
115
130
  }
package/breadcrumb/models/breadcrumb-size.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ /**-----------------------------------------------------------------------------------------
2
+ * Copyright © 2023 Progress Software Corporation. All rights reserved.
3
+ * Licensed under commercial license. See LICENSE.md in the project root for more information
4
+ *-------------------------------------------------------------------------------------------*/
5
+ /**
6
+ * Represents the possible size options of the Breadcrumb.
7
+ * @default `medium`
8
+ */
9
+ export declare type BreadcrumbSize = 'small' | 'medium' | 'large' | 'none';
package/breadcrumb/models/constants.d.ts CHANGED
@@ -2,7 +2,25 @@
2
2
  * Copyright © 2023 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 { BreadcrumbSize } from "./breadcrumb-size";
5
6
  /**
6
7
  * @hidden
7
8
  */
8
9
  export declare const BREADCRUMB_ITEM_INDEX = "data-kendo-breadcrumb-index";
10
+ /**
11
+ * @hidden
12
+ */
13
+ export declare const DEFAULT_SIZE: BreadcrumbSize;
14
+ /**
15
+ * @hidden
16
+ */
17
+ export interface BreadcrumbStylingClasses {
18
+ toRemove?: string;
19
+ toAdd?: string;
20
+ }
21
+ /**
22
+ * @hidden
23
+ *
24
+ * Returns the styling classes to be added and removed
25
+ */
26
+ export declare const getStylingClasses: (stylingOption: string, previousValue: any, newValue: any) => BreadcrumbStylingClasses;
package/esm2020/breadcrumb/breadcrumb.component.mjs CHANGED
@@ -4,7 +4,7 @@
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  /* eslint-disable @typescript-eslint/no-inferrable-types */
6
6
  /* eslint-disable @typescript-eslint/no-explicit-any */
7
- import { Component, ContentChild, Input, Output, EventEmitter, ViewChild, HostBinding, ElementRef, ChangeDetectorRef, NgZone, ViewChildren, QueryList, isDevMode } from '@angular/core';
7
+ import { Component, ContentChild, Input, Output, EventEmitter, ViewChild, HostBinding, ElementRef, ChangeDetectorRef, NgZone, ViewChildren, QueryList, isDevMode, Renderer2 } from '@angular/core';
8
8
  import { Subscription, ReplaySubject, merge, Subject } from 'rxjs';
9
9
  import { filter, map, share, startWith } from 'rxjs/operators';
10
10
  import { ResizeSensorComponent, isDocumentAvailable } from '@progress/kendo-angular-common';
@@ -15,6 +15,7 @@ import { BreadCrumbItemTemplateDirective } from './template-directives/item-temp
15
15
  import { outerWidth } from '../common/util';
16
16
  import { BreadCrumbListComponent } from './list.component';
17
17
  import { collapsed, expanded, collapseFirst, expandFirst } from './util';
18
+ import { DEFAULT_SIZE, getStylingClasses } from './models/constants';
18
19
  import * as i0 from "@angular/core";
19
20
  import * as i1 from "@progress/kendo-angular-l10n";
20
21
  import * as i2 from "./list.component";
@@ -50,11 +51,12 @@ import * as i4 from "@angular/common";
50
51
  * ```
51
52
  */
52
53
  export class BreadCrumbComponent {
53
- constructor(localization, el, cdr, zone) {
54
+ constructor(localization, el, cdr, zone, renderer) {
54
55
  this.localization = localization;
55
56
  this.el = el;
56
57
  this.cdr = cdr;
57
58
  this.zone = zone;
59
+ this.renderer = renderer;
58
60
  /**
59
61
  * Fires when a Breadcrumb item is clicked. The event will not be fired by disabled items and the last item.
60
62
  */
@@ -63,6 +65,7 @@ export class BreadCrumbComponent {
63
65
  this.hostAriaLabel = 'Breadcrumb';
64
66
  this._items = [];
65
67
  this._collapseMode = 'auto';
68
+ this._size = DEFAULT_SIZE;
66
69
  this.updateItems = new ReplaySubject();
67
70
  this.afterViewInit = new Subject();
68
71
  this.subscriptions = new Subscription();
@@ -124,6 +127,23 @@ export class BreadCrumbComponent {
124
127
  get collapseMode() {
125
128
  return this._collapseMode;
126
129
  }
130
+ /**
131
+ * Specifies the padding of all Breadcrumb elements.
132
+ *
133
+ * The possible values are:
134
+ * * `small`
135
+ * * `medium` (default)
136
+ * * `large`
137
+ * * `none`
138
+ */
139
+ set size(size) {
140
+ const newSize = size ? size : DEFAULT_SIZE;
141
+ this.handleClasses(newSize, 'size');
142
+ this._size = newSize;
143
+ }
144
+ get size() {
145
+ return this._size;
146
+ }
127
147
  get wrapMode() {
128
148
  return this.collapseMode === 'wrap';
129
149
  }
@@ -136,6 +156,7 @@ export class BreadCrumbComponent {
136
156
  ngAfterViewInit() {
137
157
  this.attachResizeHandler();
138
158
  this.afterViewInit.next();
159
+ this.handleClasses(this.size, 'size');
139
160
  }
140
161
  ngOnDestroy() {
141
162
  this.subscriptions.unsubscribe();
@@ -186,9 +207,19 @@ export class BreadCrumbComponent {
186
207
  }));
187
208
  }));
188
209
  }
210
+ handleClasses(value, input) {
211
+ const elem = this.el.nativeElement;
212
+ const classes = getStylingClasses(input, this[input], value);
213
+ if (classes.toRemove) {
214
+ this.renderer.removeClass(elem, classes.toRemove);
215
+ }
216
+ if (classes.toAdd) {
217
+ this.renderer.addClass(elem, classes.toAdd);
218
+ }
219
+ }
189
220
  }
190
- BreadCrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BreadCrumbComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
191
- BreadCrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: BreadCrumbComponent, selector: "kendo-breadcrumb", inputs: { items: "items", separatorIcon: "separatorIcon", separatorSVGIcon: "separatorSVGIcon", collapseMode: "collapseMode" }, outputs: { itemClick: "itemClick" }, host: { properties: { "class.k-breadcrumb": "this.hostClasses", "class.k-breadcrumb-wrap": "this.wrapMode", "attr.aria-label": "this.hostAriaLabel", "attr.dir": "this.getDir" } }, providers: [
221
+ BreadCrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BreadCrumbComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
222
+ BreadCrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: BreadCrumbComponent, selector: "kendo-breadcrumb", inputs: { items: "items", separatorIcon: "separatorIcon", separatorSVGIcon: "separatorSVGIcon", collapseMode: "collapseMode", size: "size" }, outputs: { itemClick: "itemClick" }, host: { properties: { "class.k-breadcrumb": "this.hostClasses", "class.k-breadcrumb-wrap": "this.wrapMode", "attr.aria-label": "this.hostAriaLabel", "attr.dir": "this.getDir" } }, providers: [
192
223
  LocalizationService,
193
224
  {
194
225
  provide: L10N_PREFIX,
@@ -261,7 +292,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
261
292
  <kendo-resize-sensor [rateLimit]="1000" #resizeSensor></kendo-resize-sensor>
262
293
  `
263
294
  }]
264
- }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { items: [{
295
+ }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Renderer2 }]; }, propDecorators: { items: [{
265
296
  type: Input
266
297
  }], separatorIcon: [{
267
298
  type: Input
@@ -269,6 +300,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
269
300
  type: Input
270
301
  }], collapseMode: [{
271
302
  type: Input
303
+ }], size: [{
304
+ type: Input
272
305
  }], itemClick: [{
273
306
  type: Output
274
307
  }], resizeSensor: [{
package/esm2020/breadcrumb/models/breadcrumb-size.mjs ADDED
@@ -0,0 +1,5 @@
1
+ /**-----------------------------------------------------------------------------------------
2
+ * Copyright © 2023 Progress Software Corporation. All rights reserved.
3
+ * Licensed under commercial license. See LICENSE.md in the project root for more information
4
+ *-------------------------------------------------------------------------------------------*/
5
+ export {};
package/esm2020/breadcrumb/models/constants.mjs CHANGED
@@ -6,3 +6,28 @@
6
6
  * @hidden
7
7
  */
8
8
  export const BREADCRUMB_ITEM_INDEX = 'data-kendo-breadcrumb-index';
9
+ /**
10
+ * @hidden
11
+ */
12
+ export const DEFAULT_SIZE = 'medium';
13
+ const SIZES = {
14
+ small: 'sm',
15
+ medium: 'md',
16
+ large: 'lg'
17
+ };
18
+ /**
19
+ * @hidden
20
+ *
21
+ * Returns the styling classes to be added and removed
22
+ */
23
+ export const getStylingClasses = (stylingOption, previousValue, newValue) => {
24
+ switch (stylingOption) {
25
+ case 'size':
26
+ return {
27
+ toRemove: `k-breadcrumb-${SIZES[previousValue]}`,
28
+ toAdd: newValue !== 'none' ? `k-breadcrumb-${SIZES[newValue]}` : ''
29
+ };
30
+ default:
31
+ break;
32
+ }
33
+ };
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: 1692370616,
13
- version: '13.4.0-develop.3',
12
+ publishDate: 1692620704,
13
+ version: '13.4.0-develop.4',
14
14
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
15
15
  };
package/fesm2015/progress-kendo-angular-navigation.mjs CHANGED
@@ -26,8 +26,8 @@ const packageMetadata = {
26
26
  name: '@progress/kendo-angular-navigation',
27
27
  productName: 'Kendo UI for Angular',
28
28
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
29
- publishDate: 1692370616,
30
- version: '13.4.0-develop.3',
29
+ publishDate: 1692620704,
30
+ version: '13.4.0-develop.4',
31
31
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
32
32
  };
33
33
 
@@ -424,6 +424,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
424
424
  * @hidden
425
425
  */
426
426
  const BREADCRUMB_ITEM_INDEX = 'data-kendo-breadcrumb-index';
427
+ /**
428
+ * @hidden
429
+ */
430
+ const DEFAULT_SIZE = 'medium';
431
+ const SIZES = {
432
+ small: 'sm',
433
+ medium: 'md',
434
+ large: 'lg'
435
+ };
436
+ /**
437
+ * @hidden
438
+ *
439
+ * Returns the styling classes to be added and removed
440
+ */
441
+ const getStylingClasses = (stylingOption, previousValue, newValue) => {
442
+ switch (stylingOption) {
443
+ case 'size':
444
+ return {
445
+ toRemove: `k-breadcrumb-${SIZES[previousValue]}`,
446
+ toAdd: newValue !== 'none' ? `k-breadcrumb-${SIZES[newValue]}` : ''
447
+ };
448
+ default:
449
+ break;
450
+ }
451
+ };
427
452
 
428
453
  /**
429
454
  * @hidden
@@ -825,11 +850,12 @@ const expandFirst = toggleFirst(true);
825
850
  * ```
826
851
  */
827
852
  class BreadCrumbComponent {
828
- constructor(localization, el, cdr, zone) {
853
+ constructor(localization, el, cdr, zone, renderer) {
829
854
  this.localization = localization;
830
855
  this.el = el;
831
856
  this.cdr = cdr;
832
857
  this.zone = zone;
858
+ this.renderer = renderer;
833
859
  /**
834
860
  * Fires when a Breadcrumb item is clicked. The event will not be fired by disabled items and the last item.
835
861
  */
@@ -838,6 +864,7 @@ class BreadCrumbComponent {
838
864
  this.hostAriaLabel = 'Breadcrumb';
839
865
  this._items = [];
840
866
  this._collapseMode = 'auto';
867
+ this._size = DEFAULT_SIZE;
841
868
  this.updateItems = new ReplaySubject();
842
869
  this.afterViewInit = new Subject();
843
870
  this.subscriptions = new Subscription();
@@ -899,6 +926,23 @@ class BreadCrumbComponent {
899
926
  get collapseMode() {
900
927
  return this._collapseMode;
901
928
  }
929
+ /**
930
+ * Specifies the padding of all Breadcrumb elements.
931
+ *
932
+ * The possible values are:
933
+ * * `small`
934
+ * * `medium` (default)
935
+ * * `large`
936
+ * * `none`
937
+ */
938
+ set size(size) {
939
+ const newSize = size ? size : DEFAULT_SIZE;
940
+ this.handleClasses(newSize, 'size');
941
+ this._size = newSize;
942
+ }
943
+ get size() {
944
+ return this._size;
945
+ }
902
946
  get wrapMode() {
903
947
  return this.collapseMode === 'wrap';
904
948
  }
@@ -911,6 +955,7 @@ class BreadCrumbComponent {
911
955
  ngAfterViewInit() {
912
956
  this.attachResizeHandler();
913
957
  this.afterViewInit.next();
958
+ this.handleClasses(this.size, 'size');
914
959
  }
915
960
  ngOnDestroy() {
916
961
  this.subscriptions.unsubscribe();
@@ -961,9 +1006,19 @@ class BreadCrumbComponent {
961
1006
  }));
962
1007
  }));
963
1008
  }
1009
+ handleClasses(value, input) {
1010
+ const elem = this.el.nativeElement;
1011
+ const classes = getStylingClasses(input, this[input], value);
1012
+ if (classes.toRemove) {
1013
+ this.renderer.removeClass(elem, classes.toRemove);
1014
+ }
1015
+ if (classes.toAdd) {
1016
+ this.renderer.addClass(elem, classes.toAdd);
1017
+ }
1018
+ }
964
1019
  }
965
- BreadCrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BreadCrumbComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
966
- BreadCrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: BreadCrumbComponent, selector: "kendo-breadcrumb", inputs: { items: "items", separatorIcon: "separatorIcon", separatorSVGIcon: "separatorSVGIcon", collapseMode: "collapseMode" }, outputs: { itemClick: "itemClick" }, host: { properties: { "class.k-breadcrumb": "this.hostClasses", "class.k-breadcrumb-wrap": "this.wrapMode", "attr.aria-label": "this.hostAriaLabel", "attr.dir": "this.getDir" } }, providers: [
1020
+ BreadCrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BreadCrumbComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
1021
+ BreadCrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: BreadCrumbComponent, selector: "kendo-breadcrumb", inputs: { items: "items", separatorIcon: "separatorIcon", separatorSVGIcon: "separatorSVGIcon", collapseMode: "collapseMode", size: "size" }, outputs: { itemClick: "itemClick" }, host: { properties: { "class.k-breadcrumb": "this.hostClasses", "class.k-breadcrumb-wrap": "this.wrapMode", "attr.aria-label": "this.hostAriaLabel", "attr.dir": "this.getDir" } }, providers: [
967
1022
  LocalizationService,
968
1023
  {
969
1024
  provide: L10N_PREFIX,
@@ -1036,7 +1091,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
1036
1091
  <kendo-resize-sensor [rateLimit]="1000" #resizeSensor></kendo-resize-sensor>
1037
1092
  `
1038
1093
  }]
1039
- }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { items: [{
1094
+ }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Renderer2 }]; }, propDecorators: { items: [{
1040
1095
  type: Input
1041
1096
  }], separatorIcon: [{
1042
1097
  type: Input
@@ -1044,6 +1099,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
1044
1099
  type: Input
1045
1100
  }], collapseMode: [{
1046
1101
  type: Input
1102
+ }], size: [{
1103
+ type: Input
1047
1104
  }], itemClick: [{
1048
1105
  type: Output
1049
1106
  }], resizeSensor: [{
package/fesm2020/progress-kendo-angular-navigation.mjs CHANGED
@@ -26,8 +26,8 @@ const packageMetadata = {
26
26
  name: '@progress/kendo-angular-navigation',
27
27
  productName: 'Kendo UI for Angular',
28
28
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
29
- publishDate: 1692370616,
30
- version: '13.4.0-develop.3',
29
+ publishDate: 1692620704,
30
+ version: '13.4.0-develop.4',
31
31
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
32
32
  };
33
33
 
@@ -422,6 +422,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
422
422
  * @hidden
423
423
  */
424
424
  const BREADCRUMB_ITEM_INDEX = 'data-kendo-breadcrumb-index';
425
+ /**
426
+ * @hidden
427
+ */
428
+ const DEFAULT_SIZE = 'medium';
429
+ const SIZES = {
430
+ small: 'sm',
431
+ medium: 'md',
432
+ large: 'lg'
433
+ };
434
+ /**
435
+ * @hidden
436
+ *
437
+ * Returns the styling classes to be added and removed
438
+ */
439
+ const getStylingClasses = (stylingOption, previousValue, newValue) => {
440
+ switch (stylingOption) {
441
+ case 'size':
442
+ return {
443
+ toRemove: `k-breadcrumb-${SIZES[previousValue]}`,
444
+ toAdd: newValue !== 'none' ? `k-breadcrumb-${SIZES[newValue]}` : ''
445
+ };
446
+ default:
447
+ break;
448
+ }
449
+ };
425
450
 
426
451
  /**
427
452
  * @hidden
@@ -823,11 +848,12 @@ const expandFirst = toggleFirst(true);
823
848
  * ```
824
849
  */
825
850
  class BreadCrumbComponent {
826
- constructor(localization, el, cdr, zone) {
851
+ constructor(localization, el, cdr, zone, renderer) {
827
852
  this.localization = localization;
828
853
  this.el = el;
829
854
  this.cdr = cdr;
830
855
  this.zone = zone;
856
+ this.renderer = renderer;
831
857
  /**
832
858
  * Fires when a Breadcrumb item is clicked. The event will not be fired by disabled items and the last item.
833
859
  */
@@ -836,6 +862,7 @@ class BreadCrumbComponent {
836
862
  this.hostAriaLabel = 'Breadcrumb';
837
863
  this._items = [];
838
864
  this._collapseMode = 'auto';
865
+ this._size = DEFAULT_SIZE;
839
866
  this.updateItems = new ReplaySubject();
840
867
  this.afterViewInit = new Subject();
841
868
  this.subscriptions = new Subscription();
@@ -897,6 +924,23 @@ class BreadCrumbComponent {
897
924
  get collapseMode() {
898
925
  return this._collapseMode;
899
926
  }
927
+ /**
928
+ * Specifies the padding of all Breadcrumb elements.
929
+ *
930
+ * The possible values are:
931
+ * * `small`
932
+ * * `medium` (default)
933
+ * * `large`
934
+ * * `none`
935
+ */
936
+ set size(size) {
937
+ const newSize = size ? size : DEFAULT_SIZE;
938
+ this.handleClasses(newSize, 'size');
939
+ this._size = newSize;
940
+ }
941
+ get size() {
942
+ return this._size;
943
+ }
900
944
  get wrapMode() {
901
945
  return this.collapseMode === 'wrap';
902
946
  }
@@ -909,6 +953,7 @@ class BreadCrumbComponent {
909
953
  ngAfterViewInit() {
910
954
  this.attachResizeHandler();
911
955
  this.afterViewInit.next();
956
+ this.handleClasses(this.size, 'size');
912
957
  }
913
958
  ngOnDestroy() {
914
959
  this.subscriptions.unsubscribe();
@@ -959,9 +1004,19 @@ class BreadCrumbComponent {
959
1004
  }));
960
1005
  }));
961
1006
  }
1007
+ handleClasses(value, input) {
1008
+ const elem = this.el.nativeElement;
1009
+ const classes = getStylingClasses(input, this[input], value);
1010
+ if (classes.toRemove) {
1011
+ this.renderer.removeClass(elem, classes.toRemove);
1012
+ }
1013
+ if (classes.toAdd) {
1014
+ this.renderer.addClass(elem, classes.toAdd);
1015
+ }
1016
+ }
962
1017
  }
963
- BreadCrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BreadCrumbComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
964
- BreadCrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: BreadCrumbComponent, selector: "kendo-breadcrumb", inputs: { items: "items", separatorIcon: "separatorIcon", separatorSVGIcon: "separatorSVGIcon", collapseMode: "collapseMode" }, outputs: { itemClick: "itemClick" }, host: { properties: { "class.k-breadcrumb": "this.hostClasses", "class.k-breadcrumb-wrap": "this.wrapMode", "attr.aria-label": "this.hostAriaLabel", "attr.dir": "this.getDir" } }, providers: [
1018
+ BreadCrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BreadCrumbComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
1019
+ BreadCrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: BreadCrumbComponent, selector: "kendo-breadcrumb", inputs: { items: "items", separatorIcon: "separatorIcon", separatorSVGIcon: "separatorSVGIcon", collapseMode: "collapseMode", size: "size" }, outputs: { itemClick: "itemClick" }, host: { properties: { "class.k-breadcrumb": "this.hostClasses", "class.k-breadcrumb-wrap": "this.wrapMode", "attr.aria-label": "this.hostAriaLabel", "attr.dir": "this.getDir" } }, providers: [
965
1020
  LocalizationService,
966
1021
  {
967
1022
  provide: L10N_PREFIX,
@@ -1034,7 +1089,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
1034
1089
  <kendo-resize-sensor [rateLimit]="1000" #resizeSensor></kendo-resize-sensor>
1035
1090
  `
1036
1091
  }]
1037
- }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { items: [{
1092
+ }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Renderer2 }]; }, propDecorators: { items: [{
1038
1093
  type: Input
1039
1094
  }], separatorIcon: [{
1040
1095
  type: Input
@@ -1042,6 +1097,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
1042
1097
  type: Input
1043
1098
  }], collapseMode: [{
1044
1099
  type: Input
1100
+ }], size: [{
1101
+ type: Input
1045
1102
  }], itemClick: [{
1046
1103
  type: Output
1047
1104
  }], resizeSensor: [{
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@progress/kendo-angular-navigation",
3
- "version": "13.4.0-develop.3",
3
+ "version": "13.4.0-develop.4",
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 - 16",
22
22
  "@angular/platform-browser": "13 - 16",
23
23
  "@progress/kendo-licensing": "^1.0.2",
24
- "@progress/kendo-angular-common": "13.4.0-develop.3",
25
- "@progress/kendo-angular-icons": "13.4.0-develop.3",
26
- "@progress/kendo-angular-l10n": "13.4.0-develop.3",
24
+ "@progress/kendo-angular-common": "13.4.0-develop.4",
25
+ "@progress/kendo-angular-icons": "13.4.0-develop.4",
26
+ "@progress/kendo-angular-l10n": "13.4.0-develop.4",
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": "13.4.0-develop.3"
31
+ "@progress/kendo-angular-schematics": "13.4.0-develop.4"
32
32
  },
33
33
  "schematics": "./schematics/collection.json",
34
34
  "module": "fesm2015/progress-kendo-angular-navigation.mjs",