@progress/kendo-angular-layout 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.
Files changed (182) hide show
  1. package/avatar/l10n/messages.d.ts +1 -1
  2. package/fesm2022/progress-kendo-angular-layout.mjs +290 -290
  3. package/package.json +12 -20
  4. package/stepper/localization/messages.d.ts +1 -1
  5. package/tabstrip/localization/messages.d.ts +1 -1
  6. package/timeline/localization/messages.d.ts +1 -1
  7. package/esm2022/avatar/avatar.component.mjs +0 -406
  8. package/esm2022/avatar/l10n/custom-messages.component.mjs +0 -53
  9. package/esm2022/avatar/l10n/localized-messages.directive.mjs +0 -40
  10. package/esm2022/avatar/l10n/messages.mjs +0 -27
  11. package/esm2022/avatar/models/fill.mjs +0 -5
  12. package/esm2022/avatar/models/models.mjs +0 -9
  13. package/esm2022/avatar/models/rounded.mjs +0 -5
  14. package/esm2022/avatar/models/shape.mjs +0 -5
  15. package/esm2022/avatar/models/size.mjs +0 -5
  16. package/esm2022/avatar/models/theme-color.mjs +0 -5
  17. package/esm2022/avatar.module.mjs +0 -38
  18. package/esm2022/card/card-actions.component.mjs +0 -177
  19. package/esm2022/card/card-body.component.mjs +0 -37
  20. package/esm2022/card/card-footer.component.mjs +0 -37
  21. package/esm2022/card/card-header.component.mjs +0 -38
  22. package/esm2022/card/card.component.mjs +0 -118
  23. package/esm2022/card/directives/card-media.directive.mjs +0 -33
  24. package/esm2022/card/directives/card-separator.directive.mjs +0 -61
  25. package/esm2022/card/directives/card-subtitle.directive.mjs +0 -31
  26. package/esm2022/card/directives/card-title.directive.mjs +0 -31
  27. package/esm2022/card/models/actions-layout.mjs +0 -5
  28. package/esm2022/card/models/card-action.mjs +0 -21
  29. package/esm2022/card.module.mjs +0 -45
  30. package/esm2022/common/direction.mjs +0 -5
  31. package/esm2022/common/dom-queries.mjs +0 -47
  32. package/esm2022/common/orientation.mjs +0 -5
  33. package/esm2022/common/preventable-event.mjs +0 -31
  34. package/esm2022/common/styling-classes.mjs +0 -5
  35. package/esm2022/common/util.mjs +0 -85
  36. package/esm2022/directives.mjs +0 -174
  37. package/esm2022/drawer/animations.mjs +0 -146
  38. package/esm2022/drawer/drawer-container.component.mjs +0 -135
  39. package/esm2022/drawer/drawer-content.component.mjs +0 -39
  40. package/esm2022/drawer/drawer.component.mjs +0 -471
  41. package/esm2022/drawer/drawer.service.mjs +0 -105
  42. package/esm2022/drawer/events/drawer-list-select.event.mjs +0 -29
  43. package/esm2022/drawer/events/select-event.mjs +0 -33
  44. package/esm2022/drawer/item.component.mjs +0 -210
  45. package/esm2022/drawer/list.component.mjs +0 -165
  46. package/esm2022/drawer/models/constants.mjs +0 -8
  47. package/esm2022/drawer/models/drawer-animation.interface.mjs +0 -5
  48. package/esm2022/drawer/models/drawer-item-expand.interface.mjs +0 -5
  49. package/esm2022/drawer/models/drawer-item.interface.mjs +0 -5
  50. package/esm2022/drawer/models/drawer-view-item.interface.mjs +0 -5
  51. package/esm2022/drawer/models/mode.mjs +0 -5
  52. package/esm2022/drawer/models/position.mjs +0 -5
  53. package/esm2022/drawer/template-directives/drawer-template.directive.mjs +0 -43
  54. package/esm2022/drawer/template-directives/footer-template.directive.mjs +0 -36
  55. package/esm2022/drawer/template-directives/header-template.directive.mjs +0 -36
  56. package/esm2022/drawer/template-directives/item-template.directive.mjs +0 -44
  57. package/esm2022/drawer/template-directives.mjs +0 -8
  58. package/esm2022/drawer/types.mjs +0 -5
  59. package/esm2022/drawer/util.mjs +0 -16
  60. package/esm2022/drawer.module.mjs +0 -43
  61. package/esm2022/expansionpanel/animations.mjs +0 -23
  62. package/esm2022/expansionpanel/events/action-event.mjs +0 -21
  63. package/esm2022/expansionpanel/expansionpanel-title.directive.mjs +0 -38
  64. package/esm2022/expansionpanel/expansionpanel.component.mjs +0 -515
  65. package/esm2022/expansionpanel.module.mjs +0 -38
  66. package/esm2022/gridlayout.module.mjs +0 -38
  67. package/esm2022/index.mjs +0 -89
  68. package/esm2022/layout.module.mjs +0 -89
  69. package/esm2022/layouts/grid-layout.component.mjs +0 -179
  70. package/esm2022/layouts/gridlayout-item.component.mjs +0 -82
  71. package/esm2022/layouts/models/gridlayout-gap-settings.mjs +0 -5
  72. package/esm2022/layouts/models/gridlayout-row-col-size.mjs +0 -5
  73. package/esm2022/layouts/models/layout-align-settings.mjs +0 -5
  74. package/esm2022/layouts/models/layout-horizontal-align.mjs +0 -5
  75. package/esm2022/layouts/models/layout-vertical-align.mjs +0 -5
  76. package/esm2022/layouts/models.mjs +0 -10
  77. package/esm2022/layouts/stack-layout.component.mjs +0 -161
  78. package/esm2022/layouts/util.mjs +0 -101
  79. package/esm2022/package-metadata.mjs +0 -16
  80. package/esm2022/panelbar/events/collapse-event.mjs +0 -14
  81. package/esm2022/panelbar/events/expand-event.mjs +0 -14
  82. package/esm2022/panelbar/events/item-click-event.mjs +0 -17
  83. package/esm2022/panelbar/events/select-event.mjs +0 -14
  84. package/esm2022/panelbar/events/state-change-event.mjs +0 -13
  85. package/esm2022/panelbar/events.mjs +0 -9
  86. package/esm2022/panelbar/panelbar-content.directive.mjs +0 -36
  87. package/esm2022/panelbar/panelbar-expand-mode.mjs +0 -29
  88. package/esm2022/panelbar/panelbar-item-model.mjs +0 -5
  89. package/esm2022/panelbar/panelbar-item-template.directive.mjs +0 -37
  90. package/esm2022/panelbar/panelbar-item-title.directive.mjs +0 -42
  91. package/esm2022/panelbar/panelbar-item.component.mjs +0 -722
  92. package/esm2022/panelbar/panelbar.component.mjs +0 -705
  93. package/esm2022/panelbar/panelbar.service.mjs +0 -53
  94. package/esm2022/panelbar.module.mjs +0 -41
  95. package/esm2022/progress-kendo-angular-layout.mjs +0 -8
  96. package/esm2022/splitter/splitter-bar.component.mjs +0 -338
  97. package/esm2022/splitter/splitter-pane.component.mjs +0 -324
  98. package/esm2022/splitter/splitter.component.mjs +0 -301
  99. package/esm2022/splitter/splitter.service.mjs +0 -205
  100. package/esm2022/splitter/util.mjs +0 -34
  101. package/esm2022/splitter.module.mjs +0 -38
  102. package/esm2022/stacklayout.module.mjs +0 -37
  103. package/esm2022/stepper/events/activate-event.mjs +0 -33
  104. package/esm2022/stepper/list.component.mjs +0 -185
  105. package/esm2022/stepper/localization/custom-messages.component.mjs +0 -52
  106. package/esm2022/stepper/localization/localized-messages.directive.mjs +0 -41
  107. package/esm2022/stepper/localization/messages.mjs +0 -27
  108. package/esm2022/stepper/models/constants.mjs +0 -8
  109. package/esm2022/stepper/models/orientation.mjs +0 -5
  110. package/esm2022/stepper/models/step-predicate.mjs +0 -5
  111. package/esm2022/stepper/models/step-type.mjs +0 -5
  112. package/esm2022/stepper/models/stepper-step.interface.mjs +0 -5
  113. package/esm2022/stepper/step.component.mjs +0 -396
  114. package/esm2022/stepper/stepper.component.mjs +0 -423
  115. package/esm2022/stepper/stepper.service.mjs +0 -186
  116. package/esm2022/stepper/template-directives/indicator-template.directive.mjs +0 -37
  117. package/esm2022/stepper/template-directives/label-template.directive.mjs +0 -37
  118. package/esm2022/stepper/template-directives/step-template.directive.mjs +0 -39
  119. package/esm2022/stepper/template-directives.mjs +0 -7
  120. package/esm2022/stepper/types.mjs +0 -5
  121. package/esm2022/stepper.module.mjs +0 -41
  122. package/esm2022/tabstrip/constants.mjs +0 -29
  123. package/esm2022/tabstrip/directives/tab-content.directive.mjs +0 -39
  124. package/esm2022/tabstrip/directives/tab-title.directive.mjs +0 -37
  125. package/esm2022/tabstrip/directives/tab.directive.mjs +0 -24
  126. package/esm2022/tabstrip/events/select-event.mjs +0 -25
  127. package/esm2022/tabstrip/events/tabclose-event.mjs +0 -23
  128. package/esm2022/tabstrip/events/tabscroll-event.mjs +0 -23
  129. package/esm2022/tabstrip/events.mjs +0 -7
  130. package/esm2022/tabstrip/localization/custom-messages.component.mjs +0 -53
  131. package/esm2022/tabstrip/localization/localized-messages.directive.mjs +0 -39
  132. package/esm2022/tabstrip/localization/messages.mjs +0 -39
  133. package/esm2022/tabstrip/models/button-state-change.mjs +0 -5
  134. package/esm2022/tabstrip/models/scroll-button-type.mjs +0 -5
  135. package/esm2022/tabstrip/models/scroll-buttons-visibility.mjs +0 -5
  136. package/esm2022/tabstrip/models/scrollable-settings.mjs +0 -23
  137. package/esm2022/tabstrip/models/size.mjs +0 -5
  138. package/esm2022/tabstrip/models/tab-alignment.mjs +0 -5
  139. package/esm2022/tabstrip/models/tab-position.mjs +0 -5
  140. package/esm2022/tabstrip/models/tabstrip-tab.component.mjs +0 -130
  141. package/esm2022/tabstrip/rendering/tab.component.mjs +0 -182
  142. package/esm2022/tabstrip/scrollable-button.component.mjs +0 -182
  143. package/esm2022/tabstrip/tabstrip-scroll.service.mjs +0 -176
  144. package/esm2022/tabstrip/tabstrip.component.mjs +0 -954
  145. package/esm2022/tabstrip/tabstrip.service.mjs +0 -155
  146. package/esm2022/tabstrip/util.mjs +0 -120
  147. package/esm2022/tabstrip.module.mjs +0 -41
  148. package/esm2022/tilelayout/constants.mjs +0 -70
  149. package/esm2022/tilelayout/dragging-service.mjs +0 -421
  150. package/esm2022/tilelayout/keyboard-navigation.service.mjs +0 -189
  151. package/esm2022/tilelayout/models/dragging-config.interface.mjs +0 -5
  152. package/esm2022/tilelayout/models/flowmode.type.mjs +0 -5
  153. package/esm2022/tilelayout/models/gap.interface.mjs +0 -5
  154. package/esm2022/tilelayout/models/navigation.interface.mjs +0 -5
  155. package/esm2022/tilelayout/reorder-event.mjs +0 -43
  156. package/esm2022/tilelayout/resize-event.mjs +0 -37
  157. package/esm2022/tilelayout/tilelayout-item-body.component.mjs +0 -45
  158. package/esm2022/tilelayout/tilelayout-item-header.component.mjs +0 -43
  159. package/esm2022/tilelayout/tilelayout-item.component.mjs +0 -322
  160. package/esm2022/tilelayout/tilelayout-resize-handle.directive.mjs +0 -61
  161. package/esm2022/tilelayout/tilelayout.component.mjs +0 -388
  162. package/esm2022/tilelayout/util.mjs +0 -138
  163. package/esm2022/tilelayout.module.mjs +0 -40
  164. package/esm2022/timeline/events/navigation-direction.mjs +0 -5
  165. package/esm2022/timeline/localization/custom-messages.component.mjs +0 -43
  166. package/esm2022/timeline/localization/localized-messages.directive.mjs +0 -39
  167. package/esm2022/timeline/localization/messages.mjs +0 -33
  168. package/esm2022/timeline/models/anchor-target.mjs +0 -5
  169. package/esm2022/timeline/models/default-model-fields.mjs +0 -16
  170. package/esm2022/timeline/models/events-order.mjs +0 -5
  171. package/esm2022/timeline/models/model-fields.mjs +0 -5
  172. package/esm2022/timeline/models/timeline-event.mjs +0 -5
  173. package/esm2022/timeline/templates/timeline-card-actions.directive.mjs +0 -40
  174. package/esm2022/timeline/templates/timeline-card-body.directive.mjs +0 -40
  175. package/esm2022/timeline/templates/timeline-card-header.directive.mjs +0 -41
  176. package/esm2022/timeline/timeline-card.component.mjs +0 -451
  177. package/esm2022/timeline/timeline-horizontal.component.mjs +0 -781
  178. package/esm2022/timeline/timeline-vertical.component.mjs +0 -203
  179. package/esm2022/timeline/timeline.component.mjs +0 -491
  180. package/esm2022/timeline/timeline.service.mjs +0 -32
  181. package/esm2022/timeline/util.mjs +0 -26
  182. package/esm2022/timeline.module.mjs +0 -41
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@progress/kendo-angular-layout",
3
- "version": "21.4.1-develop.1",
3
+ "version": "22.0.0-develop.1",
4
4
  "description": "Kendo UI for Angular Layout Package - a collection of components to create professional application layoyts",
5
5
  "license": "SEE LICENSE IN LICENSE.md",
6
6
  "author": "Progress",
@@ -46,31 +46,25 @@
46
46
  }
47
47
  ]
48
48
  }
49
- },
50
- "package": {
51
- "productName": "Kendo UI for Angular",
52
- "productCode": "KENDOUIANGULAR",
53
- "publishDate": 1768386410,
54
- "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning"
55
49
  }
56
50
  },
57
51
  "peerDependencies": {
58
- "@angular/animations": "18 - 21",
59
- "@angular/common": "18 - 21",
60
- "@angular/core": "18 - 21",
61
- "@angular/platform-browser": "18 - 21",
52
+ "@angular/animations": "19 - 21",
53
+ "@angular/common": "19 - 21",
54
+ "@angular/core": "19 - 21",
55
+ "@angular/platform-browser": "19 - 21",
62
56
  "@progress/kendo-licensing": "^1.7.0",
63
- "@progress/kendo-angular-common": "21.4.1-develop.1",
64
- "@progress/kendo-angular-l10n": "21.4.1-develop.1",
65
- "@progress/kendo-angular-progressbar": "21.4.1-develop.1",
66
- "@progress/kendo-angular-icons": "21.4.1-develop.1",
67
- "@progress/kendo-angular-buttons": "21.4.1-develop.1",
68
- "@progress/kendo-angular-intl": "21.4.1-develop.1",
57
+ "@progress/kendo-angular-common": "22.0.0-develop.1",
58
+ "@progress/kendo-angular-l10n": "22.0.0-develop.1",
59
+ "@progress/kendo-angular-progressbar": "22.0.0-develop.1",
60
+ "@progress/kendo-angular-icons": "22.0.0-develop.1",
61
+ "@progress/kendo-angular-buttons": "22.0.0-develop.1",
62
+ "@progress/kendo-angular-intl": "22.0.0-develop.1",
69
63
  "rxjs": "^6.5.3 || ^7.0.0"
70
64
  },
71
65
  "dependencies": {
72
66
  "tslib": "^2.3.1",
73
- "@progress/kendo-angular-schematics": "21.4.1-develop.1",
67
+ "@progress/kendo-angular-schematics": "22.0.0-develop.1",
74
68
  "@progress/kendo-draggable": "^3.0.2"
75
69
  },
76
70
  "schematics": "./schematics/collection.json",
@@ -82,8 +76,6 @@
82
76
  },
83
77
  ".": {
84
78
  "types": "./index.d.ts",
85
- "esm2022": "./esm2022/progress-kendo-angular-layout.mjs",
86
- "esm": "./esm2022/progress-kendo-angular-layout.mjs",
87
79
  "default": "./fesm2022/progress-kendo-angular-layout.mjs"
88
80
  }
89
81
  },
@@ -13,5 +13,5 @@ export declare class StepperMessages extends ComponentMessages {
13
13
  */
14
14
  optional: string;
15
15
  static ɵfac: i0.ɵɵFactoryDeclaration<StepperMessages, never>;
16
- static ɵdir: i0.ɵɵDirectiveDeclaration<StepperMessages, "kendo-stepper-messages-base", never, { "optional": { "alias": "optional"; "required": false; }; }, {}, never, never, false, never>;
16
+ static ɵdir: i0.ɵɵDirectiveDeclaration<StepperMessages, "kendo-stepper-messages-base", never, { "optional": { "alias": "optional"; "required": false; }; }, {}, never, never, true, never>;
17
17
  }
@@ -21,5 +21,5 @@ export declare class TabStripMessages extends ComponentMessages {
21
21
  */
22
22
  nextTabButton: string;
23
23
  static ɵfac: i0.ɵɵFactoryDeclaration<TabStripMessages, never>;
24
- static ɵdir: i0.ɵɵDirectiveDeclaration<TabStripMessages, "kendo-tabstrip-messages-base", never, { "closeTitle": { "alias": "closeTitle"; "required": false; }; "previousTabButton": { "alias": "previousTabButton"; "required": false; }; "nextTabButton": { "alias": "nextTabButton"; "required": false; }; }, {}, never, never, false, never>;
24
+ static ɵdir: i0.ɵɵDirectiveDeclaration<TabStripMessages, "kendo-tabstrip-messages-base", never, { "closeTitle": { "alias": "closeTitle"; "required": false; }; "previousTabButton": { "alias": "previousTabButton"; "required": false; }; "nextTabButton": { "alias": "nextTabButton"; "required": false; }; }, {}, never, never, true, never>;
25
25
  }
@@ -17,5 +17,5 @@ export declare class TimelineMessages extends ComponentMessages {
17
17
  */
18
18
  next: string;
19
19
  static ɵfac: i0.ɵɵFactoryDeclaration<TimelineMessages, never>;
20
- static ɵdir: i0.ɵɵDirectiveDeclaration<TimelineMessages, "kendo-timeline-messages-base", never, { "previous": { "alias": "previous"; "required": false; }; "next": { "alias": "next"; "required": false; }; }, {}, never, never, false, never>;
20
+ static ɵdir: i0.ɵɵDirectiveDeclaration<TimelineMessages, "kendo-timeline-messages-base", never, { "previous": { "alias": "previous"; "required": false; }; "next": { "alias": "next"; "required": false; }; }, {}, never, never, true, never>;
21
21
  }
@@ -1,406 +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, isDevMode, Renderer2, ElementRef } from '@angular/core';
6
- import { NgStyle } from '@angular/common';
7
- import { validatePackage } from '@progress/kendo-licensing';
8
- import { IconWrapperComponent } from '@progress/kendo-angular-icons';
9
- import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
10
- import { getStylingClasses, mapShapeToRounded } from '../common/util';
11
- import { packageMetadata } from '../package-metadata';
12
- import { LocalizedAvatarMessagesDirective } from './l10n/localized-messages.directive';
13
- import * as i0 from "@angular/core";
14
- import * as i1 from "@progress/kendo-angular-l10n";
15
- const DEFAULT_ROUNDED = 'full';
16
- const DEFAULT_SIZE = 'medium';
17
- const DEFAULT_THEME_COLOR = 'primary';
18
- const DEFAULT_FILL_MODE = 'solid';
19
- /**
20
- * Represents the Kendo UI Avatar component for Angular. Displays images, icons, or initials representing people or other entities.
21
- *
22
- * @example
23
- * ```typescript
24
- * @Component({
25
- * selector: 'my-app',
26
- * template: `
27
- * <kendo-avatar [imageSrc]="userImage" size="large"></kendo-avatar>
28
- * <kendo-avatar [initials]="userInitials" themeColor="primary"></kendo-avatar>
29
- * <kendo-avatar [icon]="userIcon" fillMode="outline"></kendo-avatar>
30
- * `
31
- * })
32
- * class AppComponent {
33
- * userImage = 'path/to/image.jpg';
34
- * userInitials = 'JD';
35
- * userIcon = 'user';
36
- * }
37
- * ```
38
- * @remarks
39
- * Supported children components are: {@link AvatarCustomMessagesComponent}.
40
- */
41
- export class AvatarComponent {
42
- localization;
43
- renderer;
44
- element;
45
- hostClass = true;
46
- /**
47
- * @hidden
48
- */
49
- get borderClass() {
50
- return this.border;
51
- }
52
- /**
53
- * @hidden
54
- */
55
- get flexBasis() {
56
- return this.width;
57
- }
58
- /**
59
- * Sets the shape for the avatar.
60
- * @hidden
61
- */
62
- set shape(shape) {
63
- this.rounded = mapShapeToRounded(shape);
64
- }
65
- /**
66
- * Specifies the size of the Avatar
67
- * ([see example]({% slug appearance_avatar %}#toc-size)).
68
- *
69
- * @default 'medium'
70
- */
71
- set size(size) {
72
- if (size !== this._size) {
73
- const newSize = size ? size : DEFAULT_SIZE;
74
- this.handleClasses('size', newSize);
75
- this._size = newSize;
76
- }
77
- }
78
- get size() {
79
- return this._size;
80
- }
81
- /**
82
- * Specifies the rounded styling of the Avatar
83
- * ([see example](slug:appearance_avatar#toc-roundness)).
84
- *
85
- * @default 'full'
86
- */
87
- set rounded(rounded) {
88
- if (rounded !== this._rounded) {
89
- const newRounded = rounded ? rounded : DEFAULT_ROUNDED;
90
- this.handleClasses('rounded', newRounded);
91
- this._rounded = newRounded;
92
- }
93
- }
94
- get rounded() {
95
- return this._rounded;
96
- }
97
- /**
98
- * Specifies the theme color of the Avatar.
99
- * The theme color applies as background and border color while adjusting the text color accordingly.
100
- *
101
- * @default 'primary'
102
- */
103
- set themeColor(themeColor) {
104
- if (themeColor !== this._themeColor) {
105
- const newThemeColor = themeColor ? themeColor : DEFAULT_THEME_COLOR;
106
- this._themeColor = newThemeColor;
107
- this.handleFillModeAndThemeColorClasses(this.fillMode, this.themeColor);
108
- }
109
- }
110
- get themeColor() {
111
- return this._themeColor;
112
- }
113
- /**
114
- * Specifies the fill style of the Avatar.
115
- *
116
- * @default 'solid'
117
- */
118
- set fillMode(fillMode) {
119
- if (fillMode !== this.fillMode) {
120
- const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
121
- this._fillMode = newFillMode;
122
- this.handleFillModeAndThemeColorClasses(this.fillMode, this.themeColor);
123
- }
124
- }
125
- get fillMode() {
126
- return this._fillMode;
127
- }
128
- /**
129
- * Specifies the appearance fill style of the avatar.
130
- * Deprecated, left for backward compatibility.
131
- *
132
- * @hidden
133
- */
134
- set fill(fillMode) {
135
- this.fillMode = fillMode;
136
- }
137
- /**
138
- * Adds a border to the Avatar.
139
- *
140
- * @default false
141
- */
142
- border = false;
143
- /**
144
- * Defines a CSS class or multiple classes separated by spaces.
145
- * You can apply these classes to a `span` element inside the Avatar and also use custom icons.
146
- */
147
- iconClass;
148
- /**
149
- * Sets the width of the Avatar.
150
- */
151
- width;
152
- /**
153
- * @hidden
154
- */
155
- get avatarWidth() {
156
- return this.width;
157
- }
158
- /**
159
- * Sets the height of the Avatar.
160
- */
161
- height;
162
- /**
163
- * @hidden
164
- */
165
- get avatarHeight() {
166
- return this.height;
167
- }
168
- /**
169
- * Defines the CSS styles that render on the content element of the Avatar.
170
- * Supports the type of values that [`ngStyle`](link:site.data.urls.angular['ngstyleapi']) supports.
171
- */
172
- cssStyle;
173
- /**
174
- * Sets the initials for the Avatar.
175
- */
176
- initials;
177
- /**
178
- * Sets the icon for the Avatar.
179
- * All [Kendo UI Icons](slug:icons#icons-list) are supported.
180
- */
181
- icon;
182
- /**
183
- * Sets the image source of the Avatar.
184
- */
185
- imageSrc;
186
- /**
187
- * Defines an SVG icon to render.
188
- * You can use either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
189
- */
190
- set svgIcon(icon) {
191
- if (isDevMode() && icon && this.icon && this.iconClass) {
192
- throw new Error('Setting both icon/svgIcon and iconClass options at the same time is not supported.');
193
- }
194
- this._svgIcon = icon;
195
- }
196
- get svgIcon() {
197
- return this._svgIcon;
198
- }
199
- _themeColor = DEFAULT_THEME_COLOR;
200
- _size = DEFAULT_SIZE;
201
- _fillMode = DEFAULT_FILL_MODE;
202
- _rounded = DEFAULT_ROUNDED;
203
- _svgIcon;
204
- constructor(localization, renderer, element) {
205
- this.localization = localization;
206
- this.renderer = renderer;
207
- this.element = element;
208
- validatePackage(packageMetadata);
209
- }
210
- ngOnInit() {
211
- this.verifyProperties();
212
- }
213
- ngAfterViewInit() {
214
- const stylingInputs = ['size', 'rounded'];
215
- stylingInputs.forEach(input => {
216
- this.handleClasses(input, this[input]);
217
- });
218
- this.handleFillModeAndThemeColorClasses(this.fillMode, this.themeColor);
219
- }
220
- /**
221
- * @hidden
222
- */
223
- get customAvatar() {
224
- return !(this.imageSrc || this.initials || this.icon || this.iconClass);
225
- }
226
- verifyProperties() {
227
- if (!isDevMode()) {
228
- return;
229
- }
230
- const inputs = [this.icon || this.iconClass, this.imageSrc, this.initials];
231
- const inputsLength = inputs.filter((value) => value).length;
232
- if (inputsLength > 1) {
233
- throw new Error(`
234
- Invalid property configuration given.
235
- The kendo-avatar component can accept only one of:
236
- icon, imageSrc or initials properties.
237
- `);
238
- }
239
- }
240
- handleClasses(styleType, value) {
241
- const elem = this.element.nativeElement;
242
- const classes = getStylingClasses('avatar', styleType, this[styleType], value);
243
- if (classes.toRemove) {
244
- this.renderer.removeClass(elem, classes.toRemove);
245
- }
246
- if (classes.toAdd) {
247
- this.renderer.addClass(elem, classes.toAdd);
248
- }
249
- }
250
- handleFillModeAndThemeColorClasses(fill, themeColor) {
251
- const wrapperElement = this.element.nativeElement;
252
- // remove existing fill and theme color classes
253
- const currentClasses = Array.from(wrapperElement.classList);
254
- const classesToRemove = currentClasses.filter(cl => {
255
- return cl.startsWith('k-avatar-solid') || cl.startsWith('k-avatar-outline');
256
- });
257
- classesToRemove.forEach((cl => this.renderer.removeClass(wrapperElement, cl)));
258
- // add fill if needed
259
- if (fill !== 'none') {
260
- this.renderer.addClass(wrapperElement, `k-avatar-${fill}`);
261
- }
262
- // add theme color class if fill and theme color
263
- if (fill !== 'none' && themeColor !== 'none') {
264
- this.renderer.addClass(wrapperElement, `k-avatar-${fill}-${themeColor}`);
265
- }
266
- }
267
- /**
268
- * @hidden
269
- */
270
- textFor(key) {
271
- return this.localization.get(key);
272
- }
273
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AvatarComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
274
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AvatarComponent, isStandalone: true, selector: "kendo-avatar", inputs: { shape: "shape", size: "size", rounded: "rounded", themeColor: "themeColor", fillMode: "fillMode", fill: "fill", border: "border", iconClass: "iconClass", width: "width", height: "height", cssStyle: "cssStyle", initials: "initials", icon: "icon", imageSrc: "imageSrc", svgIcon: "svgIcon" }, host: { properties: { "class.k-avatar": "this.hostClass", "class.k-avatar-bordered": "this.borderClass", "style.flexBasis": "this.flexBasis", "style.width": "this.avatarWidth", "style.height": "this.avatarHeight" } }, providers: [
275
- LocalizationService,
276
- {
277
- provide: L10N_PREFIX,
278
- useValue: 'kendo.avatar'
279
- }
280
- ], ngImport: i0, template: `
281
- <ng-container kendoAvatarLocalizedMessages
282
- i18n-avatarAlt="kendo.avatar.avatarAlt|The alt attribute text of the image in the avatar."
283
- avatarAlt="Avatar"
284
- >
285
- </ng-container>
286
-
287
- @if (customAvatar) {
288
- <ng-content></ng-content>
289
- }
290
-
291
- @if (imageSrc) {
292
- <span class="k-avatar-image">
293
- <img src="{{ imageSrc }}" [alt]="textFor('avatarAlt')" [ngStyle]="cssStyle" />
294
- </span>
295
- }
296
-
297
- @if (initials) {
298
- <span class="k-avatar-text" [ngStyle]="cssStyle">{{ initials.substring(0, 2) }}</span>
299
- }
300
-
301
- @if (icon || iconClass || svgIcon) {
302
- <span class="k-avatar-icon">
303
- <kendo-icon-wrapper
304
- [ngStyle]="cssStyle"
305
- [name]="icon"
306
- [customFontClass]="iconClass"
307
- [svgIcon]="svgIcon"
308
- >
309
- </kendo-icon-wrapper>
310
- </span>
311
- }
312
- `, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: LocalizedAvatarMessagesDirective, selector: "[kendoAvatarLocalizedMessages]" }] });
313
- }
314
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AvatarComponent, decorators: [{
315
- type: Component,
316
- args: [{
317
- providers: [
318
- LocalizationService,
319
- {
320
- provide: L10N_PREFIX,
321
- useValue: 'kendo.avatar'
322
- }
323
- ],
324
- selector: 'kendo-avatar',
325
- template: `
326
- <ng-container kendoAvatarLocalizedMessages
327
- i18n-avatarAlt="kendo.avatar.avatarAlt|The alt attribute text of the image in the avatar."
328
- avatarAlt="Avatar"
329
- >
330
- </ng-container>
331
-
332
- @if (customAvatar) {
333
- <ng-content></ng-content>
334
- }
335
-
336
- @if (imageSrc) {
337
- <span class="k-avatar-image">
338
- <img src="{{ imageSrc }}" [alt]="textFor('avatarAlt')" [ngStyle]="cssStyle" />
339
- </span>
340
- }
341
-
342
- @if (initials) {
343
- <span class="k-avatar-text" [ngStyle]="cssStyle">{{ initials.substring(0, 2) }}</span>
344
- }
345
-
346
- @if (icon || iconClass || svgIcon) {
347
- <span class="k-avatar-icon">
348
- <kendo-icon-wrapper
349
- [ngStyle]="cssStyle"
350
- [name]="icon"
351
- [customFontClass]="iconClass"
352
- [svgIcon]="svgIcon"
353
- >
354
- </kendo-icon-wrapper>
355
- </span>
356
- }
357
- `,
358
- standalone: true,
359
- imports: [NgStyle, IconWrapperComponent, LocalizedAvatarMessagesDirective]
360
- }]
361
- }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { hostClass: [{
362
- type: HostBinding,
363
- args: ['class.k-avatar']
364
- }], borderClass: [{
365
- type: HostBinding,
366
- args: ['class.k-avatar-bordered']
367
- }], flexBasis: [{
368
- type: HostBinding,
369
- args: ['style.flexBasis']
370
- }], shape: [{
371
- type: Input
372
- }], size: [{
373
- type: Input
374
- }], rounded: [{
375
- type: Input
376
- }], themeColor: [{
377
- type: Input
378
- }], fillMode: [{
379
- type: Input
380
- }], fill: [{
381
- type: Input
382
- }], border: [{
383
- type: Input
384
- }], iconClass: [{
385
- type: Input
386
- }], width: [{
387
- type: Input
388
- }], avatarWidth: [{
389
- type: HostBinding,
390
- args: ['style.width']
391
- }], height: [{
392
- type: Input
393
- }], avatarHeight: [{
394
- type: HostBinding,
395
- args: ['style.height']
396
- }], cssStyle: [{
397
- type: Input
398
- }], initials: [{
399
- type: Input
400
- }], icon: [{
401
- type: Input
402
- }], imageSrc: [{
403
- type: Input
404
- }], svgIcon: [{
405
- type: Input
406
- }] } });
@@ -1,53 +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, forwardRef } from '@angular/core';
6
- import { LocalizationService } from '@progress/kendo-angular-l10n';
7
- import { Messages } from './messages';
8
- import * as i0 from "@angular/core";
9
- import * as i1 from "@progress/kendo-angular-l10n";
10
- // eslint-disable no-forward-ref
11
- /**
12
- * Provides custom component messages that override default component messages
13
- * ([see example]({% slug rtl_layout %})).
14
- *
15
- * ```html
16
- * <kendo-avatar>
17
- * <kendo-avatar-messages
18
- * avatarAlt="User's profile picture"
19
- * ></kendo-avatar-messages>
20
- * </kendo-avatar>
21
- * ```
22
- */
23
- export class AvatarCustomMessagesComponent extends Messages {
24
- service;
25
- constructor(service) {
26
- super();
27
- this.service = service;
28
- }
29
- get override() {
30
- return true;
31
- }
32
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AvatarCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
33
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AvatarCustomMessagesComponent, isStandalone: true, selector: "kendo-avatar-messages", providers: [
34
- {
35
- provide: Messages,
36
- useExisting: forwardRef(() => AvatarCustomMessagesComponent)
37
- }
38
- ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
39
- }
40
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AvatarCustomMessagesComponent, decorators: [{
41
- type: Component,
42
- args: [{
43
- providers: [
44
- {
45
- provide: Messages,
46
- useExisting: forwardRef(() => AvatarCustomMessagesComponent)
47
- }
48
- ],
49
- selector: 'kendo-avatar-messages',
50
- template: ``,
51
- standalone: true
52
- }]
53
- }], ctorParameters: () => [{ type: i1.LocalizationService }] });
@@ -1,40 +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 { Directive, forwardRef } from '@angular/core';
6
- import { LocalizationService } from '@progress/kendo-angular-l10n';
7
- import { Messages } from './messages';
8
- import * as i0 from "@angular/core";
9
- import * as i1 from "@progress/kendo-angular-l10n";
10
- // eslint-disable no-forward-ref
11
- /**
12
- * @hidden
13
- */
14
- export class LocalizedAvatarMessagesDirective extends Messages {
15
- service;
16
- constructor(service) {
17
- super();
18
- this.service = service;
19
- }
20
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LocalizedAvatarMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
21
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: LocalizedAvatarMessagesDirective, isStandalone: true, selector: "[kendoAvatarLocalizedMessages]", providers: [
22
- {
23
- provide: Messages,
24
- useExisting: forwardRef(() => LocalizedAvatarMessagesDirective)
25
- }
26
- ], usesInheritance: true, ngImport: i0 });
27
- }
28
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LocalizedAvatarMessagesDirective, decorators: [{
29
- type: Directive,
30
- args: [{
31
- providers: [
32
- {
33
- provide: Messages,
34
- useExisting: forwardRef(() => LocalizedAvatarMessagesDirective)
35
- }
36
- ],
37
- selector: '[kendoAvatarLocalizedMessages]',
38
- standalone: true
39
- }]
40
- }], ctorParameters: () => [{ type: i1.LocalizationService }] });
@@ -1,27 +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 { Directive, Input } from '@angular/core';
6
- import { ComponentMessages } from '@progress/kendo-angular-l10n';
7
- import * as i0 from "@angular/core";
8
- /**
9
- * @hidden
10
- */
11
- export class Messages extends ComponentMessages {
12
- /**
13
- * Defines the alt attribute text of the image in the Avatar.
14
- */
15
- avatarAlt;
16
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
17
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: Messages, selector: "kendoAvatarMessages", inputs: { avatarAlt: "avatarAlt" }, usesInheritance: true, ngImport: i0 });
18
- }
19
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: Messages, decorators: [{
20
- type: Directive,
21
- args: [{
22
- // eslint-disable-next-line @angular-eslint/directive-selector
23
- selector: 'kendoAvatarMessages'
24
- }]
25
- }], propDecorators: { avatarAlt: [{
26
- type: Input
27
- }] } });
@@ -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,9 +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 * from './shape';
6
- export * from './fill';
7
- export * from './size';
8
- export * from './rounded';
9
- export * from './theme-color';
@@ -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,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 {};