@progress/kendo-angular-dropdowns 19.0.0-develop.2 → 19.0.0-develop.20

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 (28) hide show
  1. package/autocomplete/autocomplete.component.d.ts +11 -17
  2. package/comboboxes/combobox.component.d.ts +12 -14
  3. package/common/{action-sheet.component.d.ts → adaptive-renderer.component.d.ts} +10 -13
  4. package/common/list.component.d.ts +8 -1
  5. package/common/localization/messages.d.ts +5 -5
  6. package/common/util.d.ts +0 -6
  7. package/dropdownlist/dropdownlist.component.d.ts +7 -19
  8. package/dropdowntrees/dropdowntree.component.d.ts +9 -16
  9. package/dropdowntrees/multiselecttree.component.d.ts +9 -28
  10. package/esm2022/autocomplete/autocomplete.component.mjs +71 -94
  11. package/esm2022/comboboxes/combobox.component.mjs +85 -100
  12. package/esm2022/comboboxes/multicolumncombobox.component.mjs +23 -26
  13. package/esm2022/common/{action-sheet.component.mjs → adaptive-renderer.component.mjs} +71 -107
  14. package/esm2022/common/list.component.mjs +300 -213
  15. package/esm2022/common/localization/messages.mjs +7 -7
  16. package/esm2022/common/searchbar.component.mjs +2 -3
  17. package/esm2022/common/util.mjs +0 -22
  18. package/esm2022/dropdownlist/dropdownlist.component.mjs +50 -123
  19. package/esm2022/dropdowntrees/dropdowntree.component.mjs +63 -72
  20. package/esm2022/dropdowntrees/multiselecttree.component.mjs +65 -122
  21. package/esm2022/index.mjs +1 -1
  22. package/esm2022/multiselect/multiselect.component.mjs +133 -190
  23. package/esm2022/package-metadata.mjs +2 -2
  24. package/fesm2022/progress-kendo-angular-dropdowns.mjs +920 -1130
  25. package/index.d.ts +1 -1
  26. package/multiselect/multiselect.component.d.ts +13 -26
  27. package/package.json +10 -10
  28. package/schematics/ngAdd/index.js +2 -2
@@ -6,42 +6,41 @@ import { Component, Input, Output, EventEmitter, TemplateRef, ViewChild } from '
6
6
  import { LocalizationService } from '@progress/kendo-angular-l10n';
7
7
  import { animationDuration } from './util';
8
8
  import { IconComponent } from '@progress/kendo-angular-icons';
9
- import { xIcon } from '@progress/kendo-svg-icons';
9
+ import { checkIcon } from '@progress/kendo-svg-icons';
10
10
  import { ActionSheetComponent, ActionSheetTemplateDirective } from '@progress/kendo-angular-navigation';
11
11
  import { TextBoxComponent, TextBoxPrefixTemplateDirective } from '@progress/kendo-angular-inputs';
12
12
  import { NgIf, NgTemplateOutlet } from '@angular/common';
13
13
  import { ButtonComponent } from '@progress/kendo-angular-buttons';
14
+ import { AdaptiveService } from '@progress/kendo-angular-utils';
14
15
  import * as i0 from "@angular/core";
15
16
  import * as i1 from "@progress/kendo-angular-l10n";
17
+ import * as i2 from "@progress/kendo-angular-utils";
16
18
  /**
17
19
  * @hidden
18
20
  */
19
- export class ResponsiveRendererComponent {
21
+ export class AdaptiveRendererComponent {
20
22
  localization;
23
+ adaptiveService;
21
24
  title;
22
- showActionButtons;
23
25
  subtitle;
24
- size;
25
26
  showTextInput;
26
27
  sharedPopupActionSheetTemplate;
27
- isActionSheetExpanded;
28
28
  text;
29
29
  placeholder;
30
+ searchBarValue;
31
+ filterable;
30
32
  closePopup = new EventEmitter();
31
33
  textInputChange = new EventEmitter();
32
34
  navigate = new EventEmitter();
33
35
  onExpand = new EventEmitter();
34
- onCollapse = new EventEmitter();
35
- onApply = new EventEmitter();
36
- onCancel = new EventEmitter();
37
36
  actionSheet;
38
37
  actionSheetSearchBar;
39
- constructor(localization) {
38
+ constructor(localization, adaptiveService) {
40
39
  this.localization = localization;
40
+ this.adaptiveService = adaptiveService;
41
41
  }
42
- searchBarValue = '';
43
42
  animationDuration = animationDuration;
44
- xIcon = xIcon;
43
+ checkIcon = checkIcon;
45
44
  expanded = false;
46
45
  messageFor(key) {
47
46
  return this.localization.get(key);
@@ -63,33 +62,45 @@ export class ResponsiveRendererComponent {
63
62
  this.closePopup.emit();
64
63
  this.expanded = false;
65
64
  }
66
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ResponsiveRendererComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
67
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ResponsiveRendererComponent, isStandalone: true, selector: "responsive-renderer", inputs: { title: "title", showActionButtons: "showActionButtons", subtitle: "subtitle", size: "size", showTextInput: "showTextInput", sharedPopupActionSheetTemplate: "sharedPopupActionSheetTemplate", isActionSheetExpanded: "isActionSheetExpanded", text: "text", placeholder: "placeholder" }, outputs: { closePopup: "closePopup", textInputChange: "textInputChange", navigate: "navigate", onExpand: "onExpand", onCollapse: "onCollapse", onApply: "onApply", onCancel: "onCancel" }, viewQueries: [{ propertyName: "actionSheet", first: true, predicate: ActionSheetComponent, descendants: true }, { propertyName: "actionSheetSearchBar", first: true, predicate: ["actionSheetSearchBar"], descendants: true }], ngImport: i0, template: `
65
+ get windowSize() {
66
+ return this.adaptiveService.size;
67
+ }
68
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdaptiveRendererComponent, deps: [{ token: i1.LocalizationService }, { token: i2.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
69
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AdaptiveRendererComponent, isStandalone: true, selector: "kendo-adaptive-renderer", inputs: { title: "title", subtitle: "subtitle", showTextInput: "showTextInput", sharedPopupActionSheetTemplate: "sharedPopupActionSheetTemplate", text: "text", placeholder: "placeholder", searchBarValue: "searchBarValue", filterable: "filterable" }, outputs: { closePopup: "closePopup", textInputChange: "textInputChange", navigate: "navigate", onExpand: "onExpand" }, viewQueries: [{ propertyName: "actionSheet", first: true, predicate: ActionSheetComponent, descendants: true }, { propertyName: "actionSheetSearchBar", first: true, predicate: ["actionSheetSearchBar"], descendants: true }], ngImport: i0, template: `
68
70
  <kendo-actionsheet
69
71
  #actionSheet
70
72
  [animation]="{ duration: animationDuration }"
71
- [expanded]="isActionSheetExpanded"
73
+ [initialFocus]="false"
74
+ [cssClass]="{
75
+ 'k-adaptive-actionsheet': true,
76
+ 'k-actionsheet-fullscreen': windowSize === 'small',
77
+ 'k-actionsheet-bottom': windowSize === 'medium'
78
+ }"
79
+ [cssStyle]="{
80
+ height: windowSize === 'small' ? '100vh' : '60vh'
81
+ }"
72
82
  (overlayClick)="onOverlayClick()"
73
83
  (keydown)="navigate.emit($event)"
74
84
  (expand)="handleExpand()"
75
- (collapse)="onCollapse.emit()"
85
+ (collapse)="closePopup.emit()"
76
86
  >
77
87
  <ng-template kendoActionSheetTemplate>
78
88
  <div class="k-text-center k-actionsheet-titlebar">
79
- <div class="k-actionsheet-titlebar-group k-hbox">
89
+ <div class="k-actionsheet-titlebar-group">
80
90
  <div class="k-actionsheet-title">
81
- <div class="k-text-center">{{ title }}</div>
82
- <div class="k-actionsheet-subtitle k-text-center">{{ subtitle }}</div>
91
+ <div class="k-text-center" *ngIf="title">{{ title }}</div>
92
+ <div class="k-actionsheet-subtitle k-text-center" *ngIf="subtitle">{{ subtitle }}</div>
83
93
  </div>
84
94
  <div class="k-actionsheet-actions">
85
95
  <button
86
96
  kendoButton
87
- icon="x"
97
+ icon="check"
88
98
  type="button"
89
- [attr.title]="messageFor('clearTitle')"
90
- [svgIcon]="xIcon"
99
+ [attr.title]="messageFor('adaptiveCloseButtonTitle')"
100
+ [svgIcon]="checkIcon"
91
101
  fillMode="flat"
92
- [size]="size"
102
+ themeColor="primary"
103
+ size="large"
93
104
  [tabIndex]="-1"
94
105
  aria-hidden="true"
95
106
  innerCssClass="k-button-icon"
@@ -97,85 +108,70 @@ export class ResponsiveRendererComponent {
97
108
  ></button>
98
109
  </div>
99
110
  </div>
100
- <div class="k-actionsheet-titlebar-group k-actionsheet-filter">
111
+ <div class="k-actionsheet-titlebar-group k-actionsheet-filter" *ngIf="showTextInput">
101
112
  <kendo-textbox
102
- *ngIf="showTextInput"
103
113
  #actionSheetSearchBar
104
- [value]="searchBarValue"
105
- [size]="size"
106
- placeholder="Filter"
114
+ [value]="searchBarValue || ''"
115
+ size="large"
116
+ [placeholder]="filterable ? messageFor('filterInputPlaceholder') : placeholder"
107
117
  class="k-searchbox"
108
118
  autocomplete="off"
109
119
  (valueChange)="onValueChange($event)"
110
120
  >
111
- <ng-template kendoTextBoxPrefixTemplate>
121
+ <ng-template kendoTextBoxPrefixTemplate *ngIf="filterable">
112
122
  <kendo-icon name="search"></kendo-icon>
113
123
  </ng-template>
114
124
  </kendo-textbox>
115
125
  </div>
116
126
  </div>
117
- <div class="k-actionsheet-content !k-overflow-hidden">
127
+ <div class="k-actionsheet-content">
118
128
  <div class="k-list-container">
119
129
  <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
120
130
  </div>
121
131
  </div>
122
-
123
- <div *ngIf="showActionButtons" class="k-actionsheet-footer k-actions k-actions-stretched">
124
- <button kendoButton
125
- tabindex="0"
126
- aria-disabled="false"
127
- type="button"
128
- [size]="size"
129
- themeColor="base"
130
- (click)="onCancel.emit()"
131
- (keydown.enter)="$event.stopImmediatePropagation()">
132
- {{messageFor('cancelButton')}}
133
- </button>
134
- <button kendoButton
135
- tabindex="0"
136
- aria-disabled="false"
137
- type="button"
138
- [size]="size"
139
- themeColor="primary"
140
- (click)="onApply.emit()"
141
- (keydown.enter)="$event.stopImmediatePropagation()">
142
- {{messageFor('applyButton')}}
143
- </button>
144
- </div>
145
132
  </ng-template>
146
133
  </kendo-actionsheet>
147
- `, isInline: true, dependencies: [{ kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]", inputs: ["showSeparator"] }, { kind: "component", type: IconComponent, selector: "kendo-icon", inputs: ["name"], exportAs: ["kendoIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
134
+ `, isInline: true, dependencies: [{ kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId", "initialFocus"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]", inputs: ["showSeparator"] }, { kind: "component", type: IconComponent, selector: "kendo-icon", inputs: ["name"], exportAs: ["kendoIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
148
135
  }
149
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ResponsiveRendererComponent, decorators: [{
136
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdaptiveRendererComponent, decorators: [{
150
137
  type: Component,
151
138
  args: [{
152
- selector: 'responsive-renderer',
139
+ selector: 'kendo-adaptive-renderer',
153
140
  template: `
154
141
  <kendo-actionsheet
155
142
  #actionSheet
156
143
  [animation]="{ duration: animationDuration }"
157
- [expanded]="isActionSheetExpanded"
144
+ [initialFocus]="false"
145
+ [cssClass]="{
146
+ 'k-adaptive-actionsheet': true,
147
+ 'k-actionsheet-fullscreen': windowSize === 'small',
148
+ 'k-actionsheet-bottom': windowSize === 'medium'
149
+ }"
150
+ [cssStyle]="{
151
+ height: windowSize === 'small' ? '100vh' : '60vh'
152
+ }"
158
153
  (overlayClick)="onOverlayClick()"
159
154
  (keydown)="navigate.emit($event)"
160
155
  (expand)="handleExpand()"
161
- (collapse)="onCollapse.emit()"
156
+ (collapse)="closePopup.emit()"
162
157
  >
163
158
  <ng-template kendoActionSheetTemplate>
164
159
  <div class="k-text-center k-actionsheet-titlebar">
165
- <div class="k-actionsheet-titlebar-group k-hbox">
160
+ <div class="k-actionsheet-titlebar-group">
166
161
  <div class="k-actionsheet-title">
167
- <div class="k-text-center">{{ title }}</div>
168
- <div class="k-actionsheet-subtitle k-text-center">{{ subtitle }}</div>
162
+ <div class="k-text-center" *ngIf="title">{{ title }}</div>
163
+ <div class="k-actionsheet-subtitle k-text-center" *ngIf="subtitle">{{ subtitle }}</div>
169
164
  </div>
170
165
  <div class="k-actionsheet-actions">
171
166
  <button
172
167
  kendoButton
173
- icon="x"
168
+ icon="check"
174
169
  type="button"
175
- [attr.title]="messageFor('clearTitle')"
176
- [svgIcon]="xIcon"
170
+ [attr.title]="messageFor('adaptiveCloseButtonTitle')"
171
+ [svgIcon]="checkIcon"
177
172
  fillMode="flat"
178
- [size]="size"
173
+ themeColor="primary"
174
+ size="large"
179
175
  [tabIndex]="-1"
180
176
  aria-hidden="true"
181
177
  innerCssClass="k-button-icon"
@@ -183,75 +179,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
183
179
  ></button>
184
180
  </div>
185
181
  </div>
186
- <div class="k-actionsheet-titlebar-group k-actionsheet-filter">
182
+ <div class="k-actionsheet-titlebar-group k-actionsheet-filter" *ngIf="showTextInput">
187
183
  <kendo-textbox
188
- *ngIf="showTextInput"
189
184
  #actionSheetSearchBar
190
- [value]="searchBarValue"
191
- [size]="size"
192
- placeholder="Filter"
185
+ [value]="searchBarValue || ''"
186
+ size="large"
187
+ [placeholder]="filterable ? messageFor('filterInputPlaceholder') : placeholder"
193
188
  class="k-searchbox"
194
189
  autocomplete="off"
195
190
  (valueChange)="onValueChange($event)"
196
191
  >
197
- <ng-template kendoTextBoxPrefixTemplate>
192
+ <ng-template kendoTextBoxPrefixTemplate *ngIf="filterable">
198
193
  <kendo-icon name="search"></kendo-icon>
199
194
  </ng-template>
200
195
  </kendo-textbox>
201
196
  </div>
202
197
  </div>
203
- <div class="k-actionsheet-content !k-overflow-hidden">
198
+ <div class="k-actionsheet-content">
204
199
  <div class="k-list-container">
205
200
  <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
206
201
  </div>
207
202
  </div>
208
-
209
- <div *ngIf="showActionButtons" class="k-actionsheet-footer k-actions k-actions-stretched">
210
- <button kendoButton
211
- tabindex="0"
212
- aria-disabled="false"
213
- type="button"
214
- [size]="size"
215
- themeColor="base"
216
- (click)="onCancel.emit()"
217
- (keydown.enter)="$event.stopImmediatePropagation()">
218
- {{messageFor('cancelButton')}}
219
- </button>
220
- <button kendoButton
221
- tabindex="0"
222
- aria-disabled="false"
223
- type="button"
224
- [size]="size"
225
- themeColor="primary"
226
- (click)="onApply.emit()"
227
- (keydown.enter)="$event.stopImmediatePropagation()">
228
- {{messageFor('applyButton')}}
229
- </button>
230
- </div>
231
203
  </ng-template>
232
204
  </kendo-actionsheet>
233
205
  `,
234
206
  standalone: true,
235
207
  imports: [ActionSheetComponent, ActionSheetTemplateDirective, ButtonComponent, NgIf, TextBoxComponent, TextBoxPrefixTemplateDirective, IconComponent, NgTemplateOutlet]
236
208
  }]
237
- }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { title: [{
238
- type: Input
239
- }], showActionButtons: [{
209
+ }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.AdaptiveService }]; }, propDecorators: { title: [{
240
210
  type: Input
241
211
  }], subtitle: [{
242
212
  type: Input
243
- }], size: [{
244
- type: Input
245
213
  }], showTextInput: [{
246
214
  type: Input
247
215
  }], sharedPopupActionSheetTemplate: [{
248
216
  type: Input
249
- }], isActionSheetExpanded: [{
250
- type: Input
251
217
  }], text: [{
252
218
  type: Input
253
219
  }], placeholder: [{
254
220
  type: Input
221
+ }], searchBarValue: [{
222
+ type: Input
223
+ }], filterable: [{
224
+ type: Input
255
225
  }], closePopup: [{
256
226
  type: Output
257
227
  }], textInputChange: [{
@@ -260,12 +230,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
260
230
  type: Output
261
231
  }], onExpand: [{
262
232
  type: Output
263
- }], onCollapse: [{
264
- type: Output
265
- }], onApply: [{
266
- type: Output
267
- }], onCancel: [{
268
- type: Output
269
233
  }], actionSheet: [{
270
234
  type: ViewChild,
271
235
  args: [ActionSheetComponent]