@progress/kendo-angular-buttons 17.0.0-develop.4 → 17.0.0-develop.40
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/README.md +27 -106
- package/button/button.component.d.ts +3 -9
- package/button/selection-settings.d.ts +1 -1
- package/buttongroup/buttongroup.component.d.ts +2 -2
- package/chip/chip-list.component.d.ts +4 -4
- package/chip/chip.component.d.ts +4 -7
- package/chip/models/avatar-settings.interface.d.ts +33 -0
- package/chip/models/selection.d.ts +1 -1
- package/common/models/fillmode.d.ts +2 -2
- package/common/models/rounded.d.ts +2 -2
- package/common/models/size.d.ts +3 -3
- package/common/models/theme-color.d.ts +2 -2
- package/direction.d.ts +1 -1
- package/dropdownbutton/dropdownbutton.component.d.ts +7 -10
- package/{esm2020 → esm2022}/button/button.component.mjs +80 -111
- package/{esm2020 → esm2022}/button/button.module.mjs +4 -4
- package/{esm2020 → esm2022}/button/button.service.mjs +5 -7
- package/{esm2020 → esm2022}/buttongroup/buttongroup.component.mjs +79 -56
- package/{esm2020 → esm2022}/buttongroup/buttongroup.module.mjs +4 -4
- package/{esm2020 → esm2022}/buttons.module.mjs +4 -4
- package/{esm2020 → esm2022}/chip/chip-list.component.mjs +58 -48
- package/{esm2020 → esm2022}/chip/chip.component.mjs +155 -93
- package/{esm2020 → esm2022}/chip/chip.module.mjs +4 -4
- package/{esm2020 → esm2022}/dropdownbutton/dropdownbutton.component.mjs +132 -118
- package/{esm2020 → esm2022}/dropdownbutton/dropdownbutton.module.mjs +4 -4
- package/{esm2020 → esm2022}/floatingactionbutton/dial-item.component.mjs +21 -11
- package/{esm2020 → esm2022}/floatingactionbutton/dial-list.component.mjs +16 -11
- package/{esm2020 → esm2022}/floatingactionbutton/floatingactionbutton.component.mjs +145 -102
- package/{esm2020 → esm2022}/floatingactionbutton/floatingactionbutton.module.mjs +4 -4
- package/{esm2020 → esm2022}/floatingactionbutton/templates/dial-item-template.directive.mjs +4 -3
- package/{esm2020 → esm2022}/floatingactionbutton/templates/fab-template.directive.mjs +4 -3
- package/{esm2020 → esm2022}/focusable/focus.service.mjs +5 -6
- package/{esm2020 → esm2022}/focusable/focusable.directive.mjs +8 -4
- package/{esm2020 → esm2022}/index.mjs +0 -1
- package/{esm2020 → esm2022}/listbutton/button-item-template.directive.mjs +4 -3
- package/{esm2020 → esm2022}/listbutton/container.service.mjs +5 -3
- package/{esm2020 → esm2022}/listbutton/list-button.mjs +88 -51
- package/{esm2020 → esm2022}/listbutton/list.component.mjs +13 -10
- package/esm2022/listbutton/popup-settings.mjs +5 -0
- package/{esm2020 → esm2022}/navigation/navigation.service.mjs +12 -11
- package/{esm2020 → esm2022}/package-metadata.mjs +2 -2
- package/{esm2020 → esm2022}/preventable-event.mjs +1 -3
- package/{esm2020 → esm2022}/splitbutton/localization/custom-messages.component.mjs +7 -6
- package/{esm2020 → esm2022}/splitbutton/localization/localized-messages.directive.mjs +9 -8
- package/esm2022/splitbutton/localization/messages.mjs +45 -0
- package/{esm2020 → esm2022}/splitbutton/splitbutton.component.mjs +215 -189
- package/{esm2020 → esm2022}/splitbutton/splitbutton.module.mjs +4 -4
- package/{esm2020 → esm2022}/util.mjs +6 -0
- package/{fesm2020 → fesm2022}/progress-kendo-angular-buttons.mjs +1315 -1103
- package/floatingactionbutton/dial-item.component.d.ts +1 -1
- package/floatingactionbutton/dial-list.component.d.ts +1 -1
- package/floatingactionbutton/floatingactionbutton.component.d.ts +1 -1
- package/floatingactionbutton/models/position-mode.d.ts +1 -1
- package/focusable/focusable.directive.d.ts +1 -1
- package/index.d.ts +1 -1
- package/listbutton/list-button.d.ts +9 -4
- package/listbutton/list.component.d.ts +1 -1
- package/package.json +15 -21
- package/splitbutton/localization/messages.d.ts +1 -1
- package/splitbutton/splitbutton.component.d.ts +8 -16
- package/util.d.ts +6 -0
- package/esm2020/listbutton/list.module.mjs +0 -33
- package/esm2020/splitbutton/localization/messages.mjs +0 -23
- package/fesm2015/progress-kendo-angular-buttons.mjs +0 -5589
- package/listbutton/list.module.d.ts +0 -13
- /package/{esm2020 → esm2022}/button/selection-settings.mjs +0 -0
- /package/{esm2020 → esm2022}/chip/chip-content-click-event-args.interface.mjs +0 -0
- /package/{esm2020 → esm2022}/chip/chip-list-remove-event-args.interface.mjs +0 -0
- /package/{esm2020 → esm2022}/chip/chip-remove-event-args.interface.mjs +0 -0
- /package/{esm2020/chip/models/selection.mjs → esm2022/chip/models/avatar-settings.interface.mjs} +0 -0
- /package/{esm2020/common/models/arrow-settings.mjs → esm2022/chip/models/selection.mjs} +0 -0
- /package/{esm2020/common/models/fillmode.mjs → esm2022/common/models/arrow-settings.mjs} +0 -0
- /package/{esm2020/common/models/rounded.mjs → esm2022/common/models/fillmode.mjs} +0 -0
- /package/{esm2020/common/models/size.mjs → esm2022/common/models/rounded.mjs} +0 -0
- /package/{esm2020/common/models/styling-classes.mjs → esm2022/common/models/size.mjs} +0 -0
- /package/{esm2020/common/models/theme-color.mjs → esm2022/common/models/styling-classes.mjs} +0 -0
- /package/{esm2020/direction.mjs → esm2022/common/models/theme-color.mjs} +0 -0
- /package/{esm2020 → esm2022}/common/models.mjs +0 -0
- /package/{esm2020/floatingactionbutton/models/align.mjs → esm2022/direction.mjs} +0 -0
- /package/{esm2020 → esm2022}/directives.mjs +0 -0
- /package/{esm2020 → esm2022}/floatingactionbutton/animations/animations.mjs +0 -0
- /package/{esm2020/floatingactionbutton/models/item-animation.interface.mjs → esm2022/floatingactionbutton/models/align.mjs} +0 -0
- /package/{esm2020/floatingactionbutton/models/item-click.event.mjs → esm2022/floatingactionbutton/models/item-animation.interface.mjs} +0 -0
- /package/{esm2020/floatingactionbutton/models/item.interface.mjs → esm2022/floatingactionbutton/models/item-click.event.mjs} +0 -0
- /package/{esm2020/floatingactionbutton/models/offset.mjs → esm2022/floatingactionbutton/models/item.interface.mjs} +0 -0
- /package/{esm2020/floatingactionbutton/models/position-mode.mjs → esm2022/floatingactionbutton/models/offset.mjs} +0 -0
- /package/{esm2020/listbutton/list-item-model.mjs → esm2022/floatingactionbutton/models/position-mode.mjs} +0 -0
- /package/{esm2020 → esm2022}/floatingactionbutton/utils.mjs +0 -0
- /package/{esm2020/listbutton/popup-settings.mjs → esm2022/listbutton/list-item-model.mjs} +0 -0
- /package/{esm2020 → esm2022}/navigation/key-events.mjs +0 -0
- /package/{esm2020 → esm2022}/navigation/navigation-action.mjs +0 -0
- /package/{esm2020 → esm2022}/navigation/navigation-config.mjs +0 -0
- /package/{esm2020 → esm2022}/progress-kendo-angular-buttons.mjs +0 -0
|
@@ -13,41 +13,25 @@ import { isDocumentAvailable, Keys } from '@progress/kendo-angular-common';
|
|
|
13
13
|
import * as i0 from "@angular/core";
|
|
14
14
|
import * as i1 from "@progress/kendo-angular-l10n";
|
|
15
15
|
export class ChipListComponent {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
this.selectedChange = new EventEmitter();
|
|
36
|
-
/**
|
|
37
|
-
* Fires each time the user clicks on the remove icon of the Chip.
|
|
38
|
-
*/
|
|
39
|
-
this.remove = new EventEmitter();
|
|
40
|
-
/**
|
|
41
|
-
* @hidden
|
|
42
|
-
*/
|
|
43
|
-
this.role = 'listbox';
|
|
44
|
-
this._size = 'medium';
|
|
45
|
-
this.subs = new Subscription();
|
|
46
|
-
this._navigable = false;
|
|
47
|
-
this.currentActiveIndex = 0;
|
|
48
|
-
validatePackage(packageMetadata);
|
|
49
|
-
this.direction = localizationService.rtl ? 'rtl' : 'ltr';
|
|
50
|
-
}
|
|
16
|
+
localizationService;
|
|
17
|
+
renderer;
|
|
18
|
+
element;
|
|
19
|
+
ngZone;
|
|
20
|
+
hostClass = true;
|
|
21
|
+
orientation = 'horizontal';
|
|
22
|
+
/**
|
|
23
|
+
* @hidden
|
|
24
|
+
*/
|
|
25
|
+
direction;
|
|
26
|
+
/**
|
|
27
|
+
* Sets the selection mode of the ChipList.
|
|
28
|
+
*
|
|
29
|
+
* The available values are:
|
|
30
|
+
* * `none` (default)
|
|
31
|
+
* * `single`
|
|
32
|
+
* * `multiple`
|
|
33
|
+
*/
|
|
34
|
+
selection = 'none';
|
|
51
35
|
/**
|
|
52
36
|
* The size property specifies the gap between the Chips in the ChipList
|
|
53
37
|
* ([see example]({% slug appearance_chiplist %}#toc-size)).
|
|
@@ -66,12 +50,29 @@ export class ChipListComponent {
|
|
|
66
50
|
get size() {
|
|
67
51
|
return this._size;
|
|
68
52
|
}
|
|
53
|
+
/**
|
|
54
|
+
* Fires each time when the ChipList selection is changed.
|
|
55
|
+
*/
|
|
56
|
+
selectedChange = new EventEmitter();
|
|
57
|
+
/**
|
|
58
|
+
* Fires each time the user clicks on the remove icon of the Chip.
|
|
59
|
+
*/
|
|
60
|
+
remove = new EventEmitter();
|
|
61
|
+
chips;
|
|
69
62
|
get single() {
|
|
70
63
|
return this.selection === 'single';
|
|
71
64
|
}
|
|
72
65
|
get multiple() {
|
|
73
66
|
return this.selection === 'multiple';
|
|
74
67
|
}
|
|
68
|
+
/**
|
|
69
|
+
* @hidden
|
|
70
|
+
*/
|
|
71
|
+
role = 'listbox';
|
|
72
|
+
dynamicRTLSubscription;
|
|
73
|
+
_size = 'medium';
|
|
74
|
+
subs = new Subscription();
|
|
75
|
+
_navigable = true;
|
|
75
76
|
/**
|
|
76
77
|
* @hidden
|
|
77
78
|
*/
|
|
@@ -97,10 +98,10 @@ export class ChipListComponent {
|
|
|
97
98
|
}
|
|
98
99
|
}
|
|
99
100
|
/**
|
|
100
|
-
*
|
|
101
|
-
* are part of the default tabbing sequence of the page.
|
|
101
|
+
* By default, keyboard navigation is available through arrow keys and roving tabindex.
|
|
102
|
+
* When set to `false`, all chips are part of the default tabbing sequence of the page.
|
|
102
103
|
*
|
|
103
|
-
* @default
|
|
104
|
+
* @default true
|
|
104
105
|
*/
|
|
105
106
|
set navigable(value) {
|
|
106
107
|
this._navigable = value;
|
|
@@ -110,6 +111,15 @@ export class ChipListComponent {
|
|
|
110
111
|
get navigable() {
|
|
111
112
|
return this._navigable;
|
|
112
113
|
}
|
|
114
|
+
currentActiveIndex = 0;
|
|
115
|
+
constructor(localizationService, renderer, element, ngZone) {
|
|
116
|
+
this.localizationService = localizationService;
|
|
117
|
+
this.renderer = renderer;
|
|
118
|
+
this.element = element;
|
|
119
|
+
this.ngZone = ngZone;
|
|
120
|
+
validatePackage(packageMetadata);
|
|
121
|
+
this.direction = localizationService.rtl ? 'rtl' : 'ltr';
|
|
122
|
+
}
|
|
113
123
|
ngOnInit() {
|
|
114
124
|
this.dynamicRTLSubscription = this.localizationService.changes
|
|
115
125
|
.subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr');
|
|
@@ -251,18 +261,18 @@ export class ChipListComponent {
|
|
|
251
261
|
this.currentActiveIndex = Math.max(this.chips.length - 1, 0);
|
|
252
262
|
}
|
|
253
263
|
}
|
|
254
|
-
}
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
}
|
|
262
|
-
], queries: [{ propertyName: "chips", predicate: ChipComponent }], ngImport: i0, template: `
|
|
264
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipListComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
265
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChipListComponent, isStandalone: true, selector: "kendo-chiplist, kendo-chip-list", inputs: { selection: "selection", size: "size", role: "role", navigable: "navigable" }, outputs: { selectedChange: "selectedChange", remove: "remove" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.k-chip-list": "this.hostClass", "attr.aria-orientation": "this.orientation", "attr.dir": "this.direction", "class.k-selection-single": "this.single", "attr.aria-multiselectable": "this.multiple", "class.k-selection-multiple": "this.multiple", "attr.role": "this.role" } }, providers: [
|
|
266
|
+
LocalizationService,
|
|
267
|
+
{
|
|
268
|
+
provide: L10N_PREFIX,
|
|
269
|
+
useValue: 'kendo.chiplist'
|
|
270
|
+
}
|
|
271
|
+
], queries: [{ propertyName: "chips", predicate: ChipComponent }], ngImport: i0, template: `
|
|
263
272
|
<ng-content></ng-content>
|
|
264
273
|
`, isInline: true });
|
|
265
|
-
|
|
274
|
+
}
|
|
275
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipListComponent, decorators: [{
|
|
266
276
|
type: Component,
|
|
267
277
|
args: [{
|
|
268
278
|
selector: 'kendo-chiplist, kendo-chip-list',
|
|
@@ -8,10 +8,10 @@ import { isDocumentAvailable, Keys } from '@progress/kendo-angular-common';
|
|
|
8
8
|
import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
|
|
9
9
|
import { validatePackage } from '@progress/kendo-licensing';
|
|
10
10
|
import { packageMetadata } from '../package-metadata';
|
|
11
|
-
import { closest, getStylingClasses, getThemeColorClasses } from '../util';
|
|
11
|
+
import { closest, getStylingClasses, getThemeColorClasses, isObjectEmpty } from '../util';
|
|
12
12
|
import { moreVerticalIcon, xCircleIcon } from '@progress/kendo-svg-icons';
|
|
13
13
|
import { IconWrapperComponent } from '@progress/kendo-angular-icons';
|
|
14
|
-
import { NgIf, NgClass } from '@angular/common';
|
|
14
|
+
import { NgIf, NgClass, NgStyle } from '@angular/common';
|
|
15
15
|
import * as i0 from "@angular/core";
|
|
16
16
|
import * as i1 from "@progress/kendo-angular-l10n";
|
|
17
17
|
const DEFAULT_SIZE = 'medium';
|
|
@@ -22,66 +22,77 @@ const DEFAULT_FILL_MODE = 'solid';
|
|
|
22
22
|
* Displays a Chip that represents an input, attribute or an action.
|
|
23
23
|
*/
|
|
24
24
|
export class ChipComponent {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
25
|
+
element;
|
|
26
|
+
renderer;
|
|
27
|
+
ngZone;
|
|
28
|
+
localizationService;
|
|
29
|
+
/**
|
|
30
|
+
* Sets the label text of the Chip.
|
|
31
|
+
*/
|
|
32
|
+
label;
|
|
33
|
+
/**
|
|
34
|
+
* Defines the name for an existing icon in a Kendo UI theme.
|
|
35
|
+
* The icon is rendered inside the Chip by a `span.k-icon` element.
|
|
36
|
+
*/
|
|
37
|
+
icon;
|
|
38
|
+
/**
|
|
39
|
+
* Defines an [`SVGIcon`](slug:api_icons_svgicon) icon to be rendered inside the Chip using
|
|
40
|
+
* a [`KendoSVGIcon`](slug:api_icons_svgiconcomponent) component.
|
|
41
|
+
*/
|
|
42
|
+
svgIcon;
|
|
43
|
+
/**
|
|
44
|
+
* Defines a CSS class — or multiple classes separated by spaces —
|
|
45
|
+
* which are applied to a span element.
|
|
46
|
+
* Allows the usage of custom icons.
|
|
47
|
+
*/
|
|
48
|
+
iconClass;
|
|
49
|
+
/**
|
|
50
|
+
* Use these settings to render an avatar within the Chip.
|
|
51
|
+
*/
|
|
52
|
+
avatarSettings;
|
|
53
|
+
/**
|
|
54
|
+
* Specifies the selected state of the Chip.
|
|
55
|
+
* @default false
|
|
56
|
+
*/
|
|
57
|
+
selected = false;
|
|
58
|
+
/**
|
|
59
|
+
* Specifies if the Chip will be removable or not.
|
|
60
|
+
* If the property is set to `true`, the Chip renders a remove icon.
|
|
61
|
+
* @default false
|
|
62
|
+
*/
|
|
63
|
+
removable = false;
|
|
64
|
+
/**
|
|
65
|
+
* Specifies a custom remove font icon class that will be rendered when the Chip is removable.
|
|
66
|
+
* [see example]({% slug icons %})
|
|
67
|
+
*/
|
|
68
|
+
removeIcon;
|
|
69
|
+
/**
|
|
70
|
+
* Specifies a custom remove SVG icon that will be rendered when the Chip is removable.
|
|
71
|
+
*/
|
|
72
|
+
removeSvgIcon;
|
|
73
|
+
/**
|
|
74
|
+
* @hidden
|
|
75
|
+
*
|
|
76
|
+
* Determines whether the Chip has a menu.
|
|
77
|
+
*/
|
|
78
|
+
hasMenu = false;
|
|
79
|
+
/**
|
|
80
|
+
* @hidden
|
|
81
|
+
*
|
|
82
|
+
* Specifies a custom menu font icon class that will be rendered when the Chip has menu.
|
|
83
|
+
*/
|
|
84
|
+
menuIcon;
|
|
85
|
+
/**
|
|
86
|
+
* @hidden
|
|
87
|
+
*
|
|
88
|
+
* Specifies a custom menu SVG icon that will be rendered when the Chip has menu.
|
|
89
|
+
*/
|
|
90
|
+
menuSvgIcon;
|
|
91
|
+
/**
|
|
92
|
+
* If set to `true`, the Chip will be disabled.
|
|
93
|
+
* @default false
|
|
94
|
+
*/
|
|
95
|
+
disabled = false;
|
|
85
96
|
/**
|
|
86
97
|
* The size property specifies the padding of the Chip
|
|
87
98
|
* ([see example]({% slug appearance_chip %}#toc-size)).
|
|
@@ -157,8 +168,24 @@ export class ChipComponent {
|
|
|
157
168
|
get themeColor() {
|
|
158
169
|
return this._themeColor;
|
|
159
170
|
}
|
|
171
|
+
/**
|
|
172
|
+
* Fires each time the user clicks the remove icon of the Chip.
|
|
173
|
+
*/
|
|
174
|
+
remove = new EventEmitter();
|
|
175
|
+
/**
|
|
176
|
+
* @hidden
|
|
177
|
+
*
|
|
178
|
+
* Fires each time the user clicks the menu icon of the Chip.
|
|
179
|
+
*/
|
|
180
|
+
menuToggle = new EventEmitter();
|
|
181
|
+
/**
|
|
182
|
+
* Fires each time the user clicks the content of the Chip.
|
|
183
|
+
*/
|
|
184
|
+
contentClick = new EventEmitter();
|
|
185
|
+
tabIndex = 0;
|
|
186
|
+
hostClass = true;
|
|
160
187
|
get hasIconClass() {
|
|
161
|
-
return Boolean(this.icon || this.iconClass || this.
|
|
188
|
+
return Boolean(this.icon || this.iconClass || (this.avatarSettings && !isObjectEmpty(this.avatarSettings)));
|
|
162
189
|
}
|
|
163
190
|
get disabledClass() {
|
|
164
191
|
return this.disabled;
|
|
@@ -169,6 +196,32 @@ export class ChipComponent {
|
|
|
169
196
|
get focusedClass() {
|
|
170
197
|
return this.focused;
|
|
171
198
|
}
|
|
199
|
+
/**
|
|
200
|
+
* @hidden
|
|
201
|
+
*/
|
|
202
|
+
direction;
|
|
203
|
+
/**
|
|
204
|
+
* @hidden
|
|
205
|
+
*/
|
|
206
|
+
defaultRemoveIcon = xCircleIcon;
|
|
207
|
+
/**
|
|
208
|
+
* @hidden
|
|
209
|
+
*/
|
|
210
|
+
defaultMenuIcon = moreVerticalIcon;
|
|
211
|
+
_size = 'medium';
|
|
212
|
+
_rounded = 'medium';
|
|
213
|
+
_fillMode = 'solid';
|
|
214
|
+
_themeColor = 'base';
|
|
215
|
+
focused = false;
|
|
216
|
+
subs = new Subscription();
|
|
217
|
+
constructor(element, renderer, ngZone, localizationService) {
|
|
218
|
+
this.element = element;
|
|
219
|
+
this.renderer = renderer;
|
|
220
|
+
this.ngZone = ngZone;
|
|
221
|
+
this.localizationService = localizationService;
|
|
222
|
+
validatePackage(packageMetadata);
|
|
223
|
+
this.direction = localizationService.rtl ? 'rtl' : 'ltr';
|
|
224
|
+
}
|
|
172
225
|
ngOnInit() {
|
|
173
226
|
this.subs.add(this.localizationService.changes
|
|
174
227
|
.subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr'));
|
|
@@ -197,23 +250,16 @@ export class ChipComponent {
|
|
|
197
250
|
* @hidden
|
|
198
251
|
*/
|
|
199
252
|
get kendoIconClass() {
|
|
200
|
-
this.verifyIconSettings([this.iconClass
|
|
253
|
+
this.verifyIconSettings([this.iconClass]);
|
|
201
254
|
return `k-i-${this.icon}`;
|
|
202
255
|
}
|
|
203
256
|
/**
|
|
204
257
|
* @hidden
|
|
205
258
|
*/
|
|
206
259
|
get customIconClass() {
|
|
207
|
-
this.verifyIconSettings([this.icon
|
|
260
|
+
this.verifyIconSettings([this.icon]);
|
|
208
261
|
return this.iconClass;
|
|
209
262
|
}
|
|
210
|
-
/**
|
|
211
|
-
* @hidden
|
|
212
|
-
*/
|
|
213
|
-
get chipAvatarClass() {
|
|
214
|
-
this.verifyIconSettings([this.icon, this.iconClass]);
|
|
215
|
-
return this.avatarClass;
|
|
216
|
-
}
|
|
217
263
|
/**
|
|
218
264
|
* @hidden
|
|
219
265
|
*/
|
|
@@ -324,15 +370,14 @@ export class ChipComponent {
|
|
|
324
370
|
});
|
|
325
371
|
}
|
|
326
372
|
}
|
|
327
|
-
}
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
], usesOnChanges: true, ngImport: i0, template: `
|
|
373
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
374
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChipComponent, isStandalone: true, selector: "kendo-chip", inputs: { label: "label", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", avatarSettings: "avatarSettings", selected: "selected", removable: "removable", removeIcon: "removeIcon", removeSvgIcon: "removeSvgIcon", hasMenu: "hasMenu", menuIcon: "menuIcon", menuSvgIcon: "menuSvgIcon", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor" }, outputs: { remove: "remove", menuToggle: "menuToggle", contentClick: "contentClick" }, host: { properties: { "attr.tabindex": "this.tabIndex", "class.k-chip": "this.hostClass", "class.k-chip-has-icon": "this.hasIconClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "class.k-selected": "this.selectedClass", "class.k-focus": "this.focusedClass", "attr.dir": "this.direction" } }, providers: [
|
|
375
|
+
LocalizationService,
|
|
376
|
+
{
|
|
377
|
+
provide: L10N_PREFIX,
|
|
378
|
+
useValue: 'kendo.chip'
|
|
379
|
+
}
|
|
380
|
+
], usesOnChanges: true, ngImport: i0, template: `
|
|
336
381
|
<kendo-icon-wrapper
|
|
337
382
|
*ngIf="icon || svgIcon"
|
|
338
383
|
size="small"
|
|
@@ -345,11 +390,19 @@ ChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version:
|
|
|
345
390
|
size="small"
|
|
346
391
|
innerCssClass="k-chip-icon"
|
|
347
392
|
[customFontClass]="customIconClass"></kendo-icon-wrapper>
|
|
348
|
-
|
|
349
393
|
<span
|
|
350
|
-
*ngIf="
|
|
351
|
-
class="k-chip-avatar k-avatar k-avatar-
|
|
352
|
-
|
|
394
|
+
*ngIf="avatarSettings"
|
|
395
|
+
class="k-chip-avatar k-avatar k-avatar-sm k-avatar-solid k-avatar-solid-primary k-rounded-full"
|
|
396
|
+
[ngStyle]="avatarSettings.cssStyle">
|
|
397
|
+
<ng-container *ngIf="avatarSettings?.imageSrc">
|
|
398
|
+
<span class="k-avatar-image">
|
|
399
|
+
<img src="{{ avatarSettings.imageSrc }}" [ngStyle]="avatarSettings.imageCssStyle" [attr.alt]="avatarSettings.imageAltText" />
|
|
400
|
+
</span>
|
|
401
|
+
</ng-container>
|
|
402
|
+
|
|
403
|
+
<ng-container *ngIf="avatarSettings?.initials">
|
|
404
|
+
<span class="k-avatar-text" [ngStyle]="avatarSettings.initialsCssStyle">{{ avatarSettings.initials.substring(0, 2) }}</span>
|
|
405
|
+
</ng-container>
|
|
353
406
|
</span>
|
|
354
407
|
|
|
355
408
|
<span class="k-chip-content">
|
|
@@ -379,8 +432,9 @@ ChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version:
|
|
|
379
432
|
[customFontClass]="removeIcon"></kendo-icon-wrapper>
|
|
380
433
|
</span>
|
|
381
434
|
</span>
|
|
382
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }
|
|
383
|
-
|
|
435
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
|
|
436
|
+
}
|
|
437
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipComponent, decorators: [{
|
|
384
438
|
type: Component,
|
|
385
439
|
args: [{
|
|
386
440
|
selector: 'kendo-chip',
|
|
@@ -397,11 +451,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
397
451
|
size="small"
|
|
398
452
|
innerCssClass="k-chip-icon"
|
|
399
453
|
[customFontClass]="customIconClass"></kendo-icon-wrapper>
|
|
400
|
-
|
|
401
454
|
<span
|
|
402
|
-
*ngIf="
|
|
403
|
-
class="k-chip-avatar k-avatar k-avatar-
|
|
404
|
-
|
|
455
|
+
*ngIf="avatarSettings"
|
|
456
|
+
class="k-chip-avatar k-avatar k-avatar-sm k-avatar-solid k-avatar-solid-primary k-rounded-full"
|
|
457
|
+
[ngStyle]="avatarSettings.cssStyle">
|
|
458
|
+
<ng-container *ngIf="avatarSettings?.imageSrc">
|
|
459
|
+
<span class="k-avatar-image">
|
|
460
|
+
<img src="{{ avatarSettings.imageSrc }}" [ngStyle]="avatarSettings.imageCssStyle" [attr.alt]="avatarSettings.imageAltText" />
|
|
461
|
+
</span>
|
|
462
|
+
</ng-container>
|
|
463
|
+
|
|
464
|
+
<ng-container *ngIf="avatarSettings?.initials">
|
|
465
|
+
<span class="k-avatar-text" [ngStyle]="avatarSettings.initialsCssStyle">{{ avatarSettings.initials.substring(0, 2) }}</span>
|
|
466
|
+
</ng-container>
|
|
405
467
|
</span>
|
|
406
468
|
|
|
407
469
|
<span class="k-chip-content">
|
|
@@ -440,7 +502,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
440
502
|
}
|
|
441
503
|
],
|
|
442
504
|
standalone: true,
|
|
443
|
-
imports: [NgIf, IconWrapperComponent, NgClass]
|
|
505
|
+
imports: [NgIf, NgStyle, IconWrapperComponent, NgClass]
|
|
444
506
|
}]
|
|
445
507
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.LocalizationService }]; }, propDecorators: { label: [{
|
|
446
508
|
type: Input
|
|
@@ -450,7 +512,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
450
512
|
type: Input
|
|
451
513
|
}], iconClass: [{
|
|
452
514
|
type: Input
|
|
453
|
-
}],
|
|
515
|
+
}], avatarSettings: [{
|
|
454
516
|
type: Input
|
|
455
517
|
}], selected: [{
|
|
456
518
|
type: Input
|
|
@@ -38,11 +38,11 @@ import * as i2 from "./chip-list.component";
|
|
|
38
38
|
* ```
|
|
39
39
|
*/
|
|
40
40
|
export class ChipModule {
|
|
41
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
42
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ChipModule, imports: [i1.ChipComponent, i2.ChipListComponent], exports: [i1.ChipComponent, i2.ChipListComponent] });
|
|
43
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipModule, providers: [IconsService], imports: [i1.ChipComponent] });
|
|
41
44
|
}
|
|
42
|
-
|
|
43
|
-
ChipModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: ChipModule, imports: [i1.ChipComponent, i2.ChipListComponent], exports: [i1.ChipComponent, i2.ChipListComponent] });
|
|
44
|
-
ChipModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipModule, providers: [IconsService], imports: [KENDO_CHIPLIST] });
|
|
45
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChipModule, decorators: [{
|
|
45
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChipModule, decorators: [{
|
|
46
46
|
type: NgModule,
|
|
47
47
|
args: [{
|
|
48
48
|
exports: [...KENDO_CHIPLIST],
|