@progress/kendo-angular-dropdowns 19.1.1-develop.2 → 19.1.2-develop.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/autocomplete/autocomplete.component.d.ts +62 -53
- package/autocomplete/autocomplete.module.d.ts +9 -1
- package/comboboxes/combobox-column/column-cell-template.directive.d.ts +6 -6
- package/comboboxes/combobox-column/column-header-template.directive.d.ts +5 -4
- package/comboboxes/combobox-column/combobox-column.component.d.ts +21 -17
- package/comboboxes/combobox-column/util.d.ts +7 -4
- package/comboboxes/combobox.component.d.ts +28 -45
- package/comboboxes/combobox.module.d.ts +11 -2
- package/comboboxes/multicolumncombobox.component.d.ts +12 -2
- package/dropdownlist/dropdownlist.component.d.ts +53 -75
- package/dropdownlist/dropdownlist.module.d.ts +29 -11
- package/dropdowns.module.d.ts +8 -20
- package/dropdowntrees/checked-state/base-check.directive.d.ts +4 -7
- package/dropdowntrees/checked-state/check-all.directive.d.ts +4 -7
- package/dropdowntrees/checked-state/check.directive.d.ts +6 -10
- package/dropdowntrees/checked-state/checkable-settings.d.ts +2 -4
- package/dropdowntrees/checked-state/checked-item.d.ts +2 -2
- package/dropdowntrees/data-binding/dropdowntree/flat-binding.directive.d.ts +3 -3
- package/dropdowntrees/data-binding/dropdowntree/hierarchy-binding.directive.d.ts +2 -2
- package/dropdowntrees/data-binding/multiselecttree/flat-binding.directive.d.ts +3 -3
- package/dropdowntrees/data-binding/multiselecttree/hierarchy-binding.directive.d.ts +2 -2
- package/dropdowntrees/dropdowntree.component.d.ts +3 -3
- package/dropdowntrees/dropdowntrees.module.d.ts +1 -0
- package/dropdowntrees/expanded-state/expand.directive.d.ts +1 -1
- package/dropdowntrees/multiselecttree.component.d.ts +139 -120
- package/dropdowntrees/summary-tag/summary-tag.directive.d.ts +8 -6
- package/dropdowntrees/templates/node-template.directive.d.ts +4 -3
- package/esm2022/autocomplete/autocomplete.component.mjs +62 -53
- package/esm2022/autocomplete/autocomplete.module.mjs +9 -1
- package/esm2022/comboboxes/combobox-column/column-cell-template.directive.mjs +6 -6
- package/esm2022/comboboxes/combobox-column/column-header-template.directive.mjs +5 -4
- package/esm2022/comboboxes/combobox-column/combobox-column.component.mjs +21 -17
- package/esm2022/comboboxes/combobox-column/util.mjs +10 -5
- package/esm2022/comboboxes/combobox.component.mjs +28 -45
- package/esm2022/comboboxes/combobox.module.mjs +11 -2
- package/esm2022/comboboxes/multicolumncombobox.component.mjs +12 -2
- package/esm2022/dropdownlist/dropdownlist.component.mjs +53 -75
- package/esm2022/dropdownlist/dropdownlist.module.mjs +29 -11
- package/esm2022/dropdowns.module.mjs +8 -20
- package/esm2022/dropdowntrees/checked-state/base-check.directive.mjs +1 -1
- package/esm2022/dropdowntrees/checked-state/check-all.directive.mjs +4 -7
- package/esm2022/dropdowntrees/checked-state/check.directive.mjs +6 -10
- package/esm2022/dropdowntrees/data-binding/dropdowntree/flat-binding.directive.mjs +3 -3
- package/esm2022/dropdowntrees/data-binding/dropdowntree/hierarchy-binding.directive.mjs +2 -2
- package/esm2022/dropdowntrees/data-binding/multiselecttree/flat-binding.directive.mjs +3 -3
- package/esm2022/dropdowntrees/data-binding/multiselecttree/hierarchy-binding.directive.mjs +2 -2
- package/esm2022/dropdowntrees/dropdowntree.component.mjs +3 -3
- package/esm2022/dropdowntrees/dropdowntrees.module.mjs +1 -0
- package/esm2022/dropdowntrees/expanded-state/expand.directive.mjs +1 -1
- package/esm2022/dropdowntrees/multiselecttree.component.mjs +139 -120
- package/esm2022/dropdowntrees/summary-tag/summary-tag.directive.mjs +8 -6
- package/esm2022/dropdowntrees/templates/node-template.directive.mjs +4 -3
- package/esm2022/multiselect/multiselect.component.mjs +119 -163
- package/esm2022/multiselect/multiselect.module.mjs +13 -5
- package/esm2022/multiselect/summary-tag.directive.mjs +6 -4
- package/esm2022/package-metadata.mjs +2 -2
- package/fesm2022/progress-kendo-angular-dropdowns.mjs +571 -576
- package/multiselect/multiselect.component.d.ts +119 -163
- package/multiselect/multiselect.module.d.ts +13 -5
- package/multiselect/summary-tag.directive.d.ts +6 -4
- package/package.json +10 -10
- package/schematics/ngAdd/index.js +2 -2
@@ -59,20 +59,11 @@ export const AUTOCOMPLETE_VALUE_ACCESSOR = {
|
|
59
59
|
* Represents the [Kendo UI AutoComplete component for Angular]({% slug overview_autocomplete %}).
|
60
60
|
*
|
61
61
|
* @example
|
62
|
-
* ```
|
63
|
-
*
|
64
|
-
*
|
65
|
-
*
|
66
|
-
*
|
67
|
-
* [data]="listItems"
|
68
|
-
* [placeholder]="placeholder"
|
69
|
-
* >
|
70
|
-
* `
|
71
|
-
* })
|
72
|
-
* class AppComponent {
|
73
|
-
* public placeholder: string = 'Type "it" for suggestions';
|
74
|
-
* public listItems: Array<string> = ["Item 1", "Item 2", "Item 3", "Item 4"];
|
75
|
-
* }
|
62
|
+
* ```html
|
63
|
+
* <kendo-autocomplete
|
64
|
+
* [data]="['Item1', 'Item2', 'Item3']"
|
65
|
+
* placeholder="placeholder">
|
66
|
+
* </kendo-autocomplete>
|
76
67
|
* ```
|
77
68
|
*/
|
78
69
|
export class AutoCompleteComponent {
|
@@ -151,11 +142,17 @@ export class AutoCompleteComponent {
|
|
151
142
|
}
|
152
143
|
return appendTo === 'component' ? this.container : appendTo;
|
153
144
|
}
|
145
|
+
/**
|
146
|
+
* @hidden
|
147
|
+
*/
|
154
148
|
get clearButtonVisiblity() {
|
155
149
|
if (touchEnabled) {
|
156
150
|
return 'visible';
|
157
151
|
}
|
158
152
|
}
|
153
|
+
/**
|
154
|
+
* @hidden
|
155
|
+
*/
|
159
156
|
get ariaControls() {
|
160
157
|
return this.isOpen ? this.listBoxId : undefined;
|
161
158
|
}
|
@@ -165,6 +162,9 @@ export class AutoCompleteComponent {
|
|
165
162
|
get isControlRequired() {
|
166
163
|
return isControlRequired(this.formControl);
|
167
164
|
}
|
165
|
+
/**
|
166
|
+
* @hidden
|
167
|
+
*/
|
168
168
|
dataItem;
|
169
169
|
/**
|
170
170
|
* Toggles the visibility of the popup or actionSheet.
|
@@ -216,11 +216,15 @@ export class AutoCompleteComponent {
|
|
216
216
|
/**
|
217
217
|
* Defines whether the first match from the suggestions list will be automatically focused.
|
218
218
|
* By default, `highlightFirst` is set to `true`.
|
219
|
+
*
|
220
|
+
* @default true
|
219
221
|
*/
|
220
222
|
highlightFirst = true;
|
221
223
|
/**
|
222
224
|
* Shows or hides the current group sticky header when using grouped data.
|
223
|
-
* By default the sticky header is displayed ([see example]({% slug grouping_autocomplete %}#toc-sticky-header)).
|
225
|
+
* By default, the sticky header is displayed ([see example]({% slug grouping_autocomplete %}#toc-sticky-header)).
|
226
|
+
*
|
227
|
+
* @default true
|
224
228
|
*/
|
225
229
|
showStickyHeader = true;
|
226
230
|
/**
|
@@ -275,22 +279,28 @@ export class AutoCompleteComponent {
|
|
275
279
|
*/
|
276
280
|
valueField;
|
277
281
|
/**
|
278
|
-
*
|
282
|
+
* Sets the placeholder of the AutoComplete.
|
283
|
+
*
|
284
|
+
* @default ""
|
279
285
|
*/
|
280
286
|
placeholder = "";
|
281
287
|
/**
|
282
|
-
* Enables or disables the adaptive mode. By default the adaptive rendering is disabled.
|
288
|
+
* Enables or disables the adaptive mode. By default, the adaptive rendering is disabled.
|
289
|
+
*
|
290
|
+
* @default 'none'
|
283
291
|
*/
|
284
292
|
adaptiveMode = 'none';
|
285
293
|
/**
|
286
|
-
* Sets the title of the ActionSheet that
|
287
|
-
* By default the ActionSheet title uses the text provided for the label of the AutoComplete.
|
294
|
+
* Sets the title of the ActionSheet that renders instead of the Popup when using small screen devices.
|
295
|
+
* By default, the ActionSheet title uses the text provided for the label of the AutoComplete.
|
296
|
+
*
|
297
|
+
* @default ''
|
288
298
|
*/
|
289
299
|
adaptiveTitle = '';
|
290
300
|
/**
|
291
|
-
* Sets the subtitle of the ActionSheet that
|
292
|
-
* By default the ActionSheet does not render a subtitle.
|
293
|
-
|
301
|
+
* Sets the subtitle of the ActionSheet that renders instead of the Popup when using small screen devices.
|
302
|
+
* By default, the ActionSheet does not render a subtitle.
|
303
|
+
*/
|
294
304
|
adaptiveSubtitle;
|
295
305
|
/**
|
296
306
|
* @hidden
|
@@ -315,13 +325,14 @@ export class AutoCompleteComponent {
|
|
315
325
|
return this._popupSettings;
|
316
326
|
}
|
317
327
|
/**
|
318
|
-
|
319
|
-
|
320
|
-
|
321
|
-
|
322
|
-
|
323
|
-
|
324
|
-
|
328
|
+
* Sets the height of the options list in the popup. By default, `listHeight` is 200px.
|
329
|
+
*
|
330
|
+
* > The `listHeight` property affects only the list of options and not the whole popup container.
|
331
|
+
* > To set the height of the popup container, use `popupSettings.height`.
|
332
|
+
*
|
333
|
+
* When using `adaptiveMode` and the screen size is `small` or `medium`, the `listHeight` property is set to null.
|
334
|
+
* @default 200
|
335
|
+
*/
|
325
336
|
set listHeight(_listHeight) {
|
326
337
|
this._listHeight = _listHeight;
|
327
338
|
}
|
@@ -334,6 +345,8 @@ export class AutoCompleteComponent {
|
|
334
345
|
_listHeight = 200;
|
335
346
|
/**
|
336
347
|
* Sets and gets the loading state of the AutoComplete.
|
348
|
+
*
|
349
|
+
* @default false
|
337
350
|
*/
|
338
351
|
loading;
|
339
352
|
/**
|
@@ -341,14 +354,20 @@ export class AutoCompleteComponent {
|
|
341
354
|
*
|
342
355
|
* If set to `true`, renders a button on hovering over the component.
|
343
356
|
* Clicking this button resets the value of the component to `undefined` and triggers the `change` event.
|
357
|
+
*
|
358
|
+
* @default true
|
344
359
|
*/
|
345
360
|
clearButton = true;
|
346
361
|
/**
|
347
362
|
* Enables the auto-completion of the text based on the first data item.
|
363
|
+
*
|
364
|
+
* @default false
|
348
365
|
*/
|
349
366
|
suggest;
|
350
367
|
/**
|
351
368
|
* Sets the disabled state of the component. To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_autocomplete#toc-managing-the-autocomplete-disabled-state-in-reactive-forms).
|
369
|
+
*
|
370
|
+
* @default false
|
352
371
|
*/
|
353
372
|
disabled = false;
|
354
373
|
/**
|
@@ -370,6 +389,8 @@ export class AutoCompleteComponent {
|
|
370
389
|
readonly = false;
|
371
390
|
/**
|
372
391
|
* Specifies the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
|
392
|
+
*
|
393
|
+
* @default 0
|
373
394
|
*/
|
374
395
|
tabindex = 0;
|
375
396
|
/**
|
@@ -384,10 +405,14 @@ export class AutoCompleteComponent {
|
|
384
405
|
/**
|
385
406
|
* Enables the [filtering]({% slug filtering_autocomplete %}) functionality.
|
386
407
|
* If set to `true`, the component emits the `filterChange` event.
|
408
|
+
*
|
409
|
+
* @default false
|
387
410
|
*/
|
388
411
|
filterable = false;
|
389
412
|
/**
|
390
413
|
* Enables the [virtualization]({% slug virtualization_autocomplete %}) functionality.
|
414
|
+
*
|
415
|
+
* @default false
|
391
416
|
*/
|
392
417
|
set virtual(settings) {
|
393
418
|
this._virtualSettings = normalizeVirtualizationSettings(settings);
|
@@ -398,12 +423,7 @@ export class AutoCompleteComponent {
|
|
398
423
|
/**
|
399
424
|
* Sets the size of the component.
|
400
425
|
*
|
401
|
-
*
|
402
|
-
* * `small`
|
403
|
-
* * `medium` (default)
|
404
|
-
* * `large`
|
405
|
-
* * `none`
|
406
|
-
*
|
426
|
+
* @default 'medium'
|
407
427
|
*/
|
408
428
|
set size(size) {
|
409
429
|
const newSize = size ? size : DEFAULT_SIZE;
|
@@ -419,13 +439,7 @@ export class AutoCompleteComponent {
|
|
419
439
|
/**
|
420
440
|
* Sets the border radius of the component.
|
421
441
|
*
|
422
|
-
*
|
423
|
-
* * `small`
|
424
|
-
* * `medium` (default)
|
425
|
-
* * `large`
|
426
|
-
* * `full`
|
427
|
-
* * `none`
|
428
|
-
*
|
442
|
+
* @default 'medium'
|
429
443
|
*/
|
430
444
|
set rounded(rounded) {
|
431
445
|
const newRounded = rounded ? rounded : DEFAULT_ROUNDED;
|
@@ -441,12 +455,7 @@ export class AutoCompleteComponent {
|
|
441
455
|
/**
|
442
456
|
* Sets the fillMode of the component.
|
443
457
|
*
|
444
|
-
*
|
445
|
-
* * `flat`
|
446
|
-
* * `solid` (default)
|
447
|
-
* * `outline`
|
448
|
-
* * `none`
|
449
|
-
*
|
458
|
+
* @default 'solid'
|
450
459
|
*/
|
451
460
|
set fillMode(fillMode) {
|
452
461
|
const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
|
@@ -464,7 +473,7 @@ export class AutoCompleteComponent {
|
|
464
473
|
*/
|
465
474
|
inputAttributes;
|
466
475
|
/**
|
467
|
-
* Fires each time the value
|
476
|
+
* Fires each time the value changes—
|
468
477
|
* when the component is blurred or the value is cleared through the **Clear** button
|
469
478
|
* ([see example](slug:events_autocomplete)).
|
470
479
|
* When the value of the component is programmatically changed to `ngModel` or `formControl`
|
@@ -480,20 +489,20 @@ export class AutoCompleteComponent {
|
|
480
489
|
filterChange = new EventEmitter();
|
481
490
|
/**
|
482
491
|
* Fires each time the popup is about to open.
|
483
|
-
* This event is preventable. If you cancel it, the popup
|
492
|
+
* This event is preventable. If you cancel it, the popup remains closed.
|
484
493
|
*/
|
485
494
|
open = new EventEmitter();
|
486
495
|
/**
|
487
|
-
* Fires after the popup
|
496
|
+
* Fires after the popup opens.
|
488
497
|
*/
|
489
498
|
opened = new EventEmitter();
|
490
499
|
/**
|
491
500
|
* Fires each time the popup is about to close.
|
492
|
-
* This event is preventable. If you cancel it, the popup
|
501
|
+
* This event is preventable. If you cancel it, the popup remains open.
|
493
502
|
*/
|
494
503
|
close = new EventEmitter();
|
495
504
|
/**
|
496
|
-
* Fires after the popup
|
505
|
+
* Fires after the popup closes.
|
497
506
|
*/
|
498
507
|
closed = new EventEmitter();
|
499
508
|
/**
|
@@ -21,8 +21,16 @@ import * as i9 from "../common/localization/custom-messages.component";
|
|
21
21
|
import * as i10 from "@progress/kendo-angular-common";
|
22
22
|
// IMPORTANT: NgModule export kept for backwards compatibility
|
23
23
|
/**
|
24
|
+
* Required for adding all AutoComplete features in NgModule-based Angular applications.
|
24
25
|
*
|
25
|
-
*
|
26
|
+
* ```typescript
|
27
|
+
* import { AutoCompleteModule } from '@progress/kendo-angular-dropdowns';
|
28
|
+
* @NgModule({
|
29
|
+
* imports: [AutoCompleteModule],
|
30
|
+
* declarations: [AppComponent],
|
31
|
+
* bootstrap: [AppComponent]
|
32
|
+
* })
|
33
|
+
* ```
|
26
34
|
*
|
27
35
|
* The package exports:
|
28
36
|
* - `AutoCompleteComponent`—The AutoComplete component class.
|
@@ -5,14 +5,14 @@
|
|
5
5
|
import { Directive, TemplateRef } from '@angular/core';
|
6
6
|
import * as i0 from "@angular/core";
|
7
7
|
/**
|
8
|
-
* Renders the column cell content of the MultiColumnComboBox.
|
9
|
-
* with the `kendoMultiColumnComboBoxColumnCellTemplate` directive inside the [`<kendo-combobox-column>`]({% slug api_dropdowns_comboboxcolumncomponent %}) tag
|
10
|
-
* ([see example]({% slug templates_multicolumncombobox %})).
|
8
|
+
* Renders the column cell content of the MultiColumnComboBox component.
|
11
9
|
*
|
12
|
-
*
|
10
|
+
* To define a column cell template, nest an `<ng-template>` tag with the `kendoMultiColumnComboBoxColumnCellTemplate` directive inside the [`<kendo-combobox-column>`]({% slug api_dropdowns_comboboxcolumncomponent %}) tag.
|
11
|
+
* [See example]({% slug templates_multicolumncombobox %}).
|
13
12
|
*
|
14
|
-
*
|
15
|
-
* - `let-
|
13
|
+
* The context variables are:
|
14
|
+
* - `let-dataItem="dataItem"` (`any`)—The current data item. Also available as the implicit context variable.
|
15
|
+
* - `let-column="column"` ([`ColumnComponent`]({% slug api_dropdowns_comboboxcolumncomponent %}))—The current column configuration object.
|
16
16
|
*/
|
17
17
|
export class ColumnCellTemplateDirective {
|
18
18
|
templateRef;
|
@@ -5,11 +5,12 @@
|
|
5
5
|
import { Directive, TemplateRef } from '@angular/core';
|
6
6
|
import * as i0 from "@angular/core";
|
7
7
|
/**
|
8
|
-
* Renders the column header content of the MultiColumnComboBox.
|
9
|
-
* with the `kendoMultiColumnComboBoxColumnHeaderTemplate` directive inside the [`<kendo-combobox-column>`]({% slug api_dropdowns_comboboxcolumncomponent %}) tag
|
10
|
-
* ([see example]({% slug templates_multicolumncombobox %})).
|
8
|
+
* Renders the column header content of the MultiColumnComboBox component.
|
11
9
|
*
|
12
|
-
*
|
10
|
+
* To define a column header template, nest an `<ng-template>` tag with the `kendoMultiColumnComboBoxColumnHeaderTemplate` directive inside the [`<kendo-combobox-column>`]({% slug api_dropdowns_comboboxcolumncomponent %}) tag.
|
11
|
+
* [See example]({% slug templates_multicolumncombobox %}).
|
12
|
+
*
|
13
|
+
* The current [`column`]({% slug api_dropdowns_comboboxcolumncomponent %}) is available as the implicit context variable.
|
13
14
|
*/
|
14
15
|
export class ColumnHeaderTemplateDirective {
|
15
16
|
templateRef;
|
@@ -7,8 +7,10 @@ import { ColumnCellTemplateDirective } from './column-cell-template.directive';
|
|
7
7
|
import { ColumnHeaderTemplateDirective } from './column-header-template.directive';
|
8
8
|
import * as i0 from "@angular/core";
|
9
9
|
/**
|
10
|
-
* Represents the column definition
|
11
|
-
*
|
10
|
+
* Represents the column definition for the MultiColumnComboBox component.
|
11
|
+
*
|
12
|
+
* Use this component to define columns inside the MultiColumnComboBox.
|
13
|
+
* [See example]({% slug columns_multicolumncombobox %}).
|
12
14
|
*/
|
13
15
|
export class ComboBoxColumnComponent {
|
14
16
|
/**
|
@@ -20,48 +22,50 @@ export class ComboBoxColumnComponent {
|
|
20
22
|
*/
|
21
23
|
headerTemplate;
|
22
24
|
/**
|
23
|
-
*
|
25
|
+
* Sets the field to which the column is bound.
|
24
26
|
*
|
25
27
|
* > The `field` property can be set to point to a nested property value - e.g. `category.name`.
|
26
28
|
*/
|
27
29
|
field;
|
28
30
|
/**
|
29
|
-
*
|
31
|
+
* Sets the title of the column.
|
30
32
|
*/
|
31
33
|
title;
|
32
34
|
/**
|
33
|
-
*
|
35
|
+
* Sets the width of the column (in pixels).
|
34
36
|
*/
|
35
37
|
width;
|
36
38
|
/**
|
37
|
-
*
|
38
|
-
*
|
39
|
+
* Controls the visibility of the column. When `true`, hides the column from view.
|
39
40
|
* @default false
|
40
41
|
*/
|
41
42
|
hidden = false;
|
42
43
|
/**
|
43
|
-
* Sets
|
44
|
-
*
|
44
|
+
* Sets custom styles for the table cells of the column (except for the header cells).
|
45
|
+
*
|
46
|
+
* The `style` property uses the NgStyle directive to apply styles.
|
45
47
|
*/
|
46
48
|
style;
|
47
49
|
/**
|
48
|
-
* Sets
|
49
|
-
*
|
50
|
+
* Sets custom styles for the header cell of the column.
|
51
|
+
*
|
52
|
+
* The `headerStyle` property uses the NgStyle directive to apply styles.
|
50
53
|
*/
|
51
54
|
headerStyle;
|
52
55
|
/**
|
53
|
-
* Sets
|
54
|
-
*
|
56
|
+
* Sets custom CSS classes for the column cells.
|
57
|
+
*
|
58
|
+
* The `class` property uses the NgClass directive to apply classes.
|
55
59
|
*/
|
56
60
|
class;
|
57
61
|
/**
|
58
|
-
* Sets
|
59
|
-
*
|
62
|
+
* Sets custom CSS classes for the column header cell.
|
63
|
+
*
|
64
|
+
* The `headerClass` property uses the NgClass directive to apply classes.
|
60
65
|
*/
|
61
66
|
headerClass;
|
62
67
|
/**
|
63
|
-
* Sets the condition that needs to be satisfied for a column to remain visible.
|
64
|
-
* If you set the [`hidden`]({% slug api_dropdowns_comboboxcolumncomponent %}#toc-hidden) property, the behavior of `media` is overridden.
|
68
|
+
* Sets the condition that needs to be satisfied for a column to remain visible. If you set the [`hidden`]({% slug api_dropdowns_comboboxcolumncomponent %}#toc-hidden) property, the behavior of media is overridden.
|
65
69
|
*/
|
66
70
|
media;
|
67
71
|
/**
|
@@ -4,13 +4,15 @@
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
5
5
|
import { isPresent } from '../../common/util';
|
6
6
|
/**
|
7
|
-
*
|
7
|
+
* Stores the initially resolved scrollbar width value.
|
8
8
|
*/
|
9
9
|
let SCROLLBAR_WIDTH;
|
10
10
|
/**
|
11
11
|
* @hidden
|
12
12
|
*
|
13
|
-
* Gets the default scrollbar width
|
13
|
+
* Gets the default scrollbar width for the current environment.
|
14
|
+
*
|
15
|
+
* Returns the scrollbar width in pixels.
|
14
16
|
*/
|
15
17
|
export const scrollbarWidth = () => {
|
16
18
|
// calculate scrollbar width only once, then return the memoized value
|
@@ -26,6 +28,8 @@ export const scrollbarWidth = () => {
|
|
26
28
|
};
|
27
29
|
/**
|
28
30
|
* Checks if all columns have a valid user-defined width.
|
31
|
+
*
|
32
|
+
* Returns `true` if all columns have a valid width, otherwise returns `false`.
|
29
33
|
*/
|
30
34
|
const allColumnsWidthsSet = (columns) => {
|
31
35
|
if (!isPresent(columns) || columns.length === 0) {
|
@@ -36,9 +40,10 @@ const allColumnsWidthsSet = (columns) => {
|
|
36
40
|
/**
|
37
41
|
* @hidden
|
38
42
|
*
|
39
|
-
* Calculates the row width
|
40
|
-
*
|
41
|
-
*
|
43
|
+
* Calculates the row width based on the columns' width configuration.
|
44
|
+
*
|
45
|
+
* Ignores hidden columns and columns that do not match the provided media query.
|
46
|
+
* Returns `null` if any column does not have a valid width.
|
42
47
|
*/
|
43
48
|
export const getRowWidthFromColumnsMeta = (columns) => {
|
44
49
|
if (!allColumnsWidthsSet(columns)) {
|
@@ -58,19 +58,10 @@ const DEFAULT_ROUNDED = 'medium';
|
|
58
58
|
const DEFAULT_FILL_MODE = 'solid';
|
59
59
|
/**
|
60
60
|
* Represents the [Kendo UI ComboBox component for Angular]({% slug overview_combobox %}).
|
61
|
-
*
|
62
61
|
* @example
|
63
|
-
* ```
|
64
|
-
*
|
65
|
-
*
|
66
|
-
* template: `
|
67
|
-
* <kendo-combobox [data]="listItems">
|
68
|
-
* </kendo-combobox>
|
69
|
-
* `
|
70
|
-
* })
|
71
|
-
* class AppComponent {
|
72
|
-
* public listItems: Array<string> = ["Item 1", "Item 2", "Item 3", "Item 4"];
|
73
|
-
* }
|
62
|
+
* ```html
|
63
|
+
* <kendo-combobox [data]="listItems">
|
64
|
+
* </kendo-combobox>
|
74
65
|
* ```
|
75
66
|
*/
|
76
67
|
export class ComboBoxComponent extends MultiTabStop {
|
@@ -96,7 +87,7 @@ export class ComboBoxComponent extends MultiTabStop {
|
|
96
87
|
*/
|
97
88
|
svgIcon;
|
98
89
|
/**
|
99
|
-
* Sets the HTML attributes of the inner focusable input element. Attributes
|
90
|
+
* Sets the HTML attributes of the inner focusable input element. Attributes essential for certain component functionalities cannot be changed.
|
100
91
|
*/
|
101
92
|
inputAttributes;
|
102
93
|
/**
|
@@ -177,6 +168,7 @@ export class ComboBoxComponent extends MultiTabStop {
|
|
177
168
|
/**
|
178
169
|
* Shows or hides the current group sticky header when using grouped data.
|
179
170
|
* By default the sticky header is displayed ([see example]({% slug grouping_autocomplete %}#toc-sticky-header)).
|
171
|
+
* @default true
|
180
172
|
*/
|
181
173
|
showStickyHeader = true;
|
182
174
|
/**
|
@@ -189,12 +181,12 @@ export class ComboBoxComponent extends MultiTabStop {
|
|
189
181
|
* Defaults to `false`.
|
190
182
|
*
|
191
183
|
* The feature is not available when using adaptive mode.
|
184
|
+
* @default false
|
192
185
|
*/
|
193
186
|
allowCustom = false;
|
194
187
|
/**
|
195
188
|
* Sets the data of the ComboBox.
|
196
|
-
*
|
197
|
-
* > The data has to be provided in an array-like list.
|
189
|
+
* The data must be provided in an array-like list.
|
198
190
|
*/
|
199
191
|
set data(data) {
|
200
192
|
this.dataService.data = data || [];
|
@@ -223,12 +215,9 @@ export class ComboBoxComponent extends MultiTabStop {
|
|
223
215
|
return this.dataService.data;
|
224
216
|
}
|
225
217
|
/**
|
226
|
-
* Sets the value of the ComboBox.
|
227
|
-
* It can either be of the primitive (string, numbers) or of the complex (objects) type.
|
228
|
-
* To define the type, use the `valuePrimitive` option.
|
218
|
+
* Sets the value of the ComboBox. The value can be a primitive (string, number) or a complex object. Use the `valuePrimitive` property to define the type.
|
229
219
|
*
|
230
|
-
*
|
231
|
-
* > When the `Enter` key is pressed or the component loses focus, custom values get dismissed unless `allowCustom` is set to `true`.
|
220
|
+
* All selected values not present in the dataset are custom values. When the `Enter` key is pressed or the component loses focus, custom values are dismissed unless `allowCustom` is set to `true`.
|
232
221
|
*/
|
233
222
|
set value(newValue) {
|
234
223
|
this._value = newValue;
|
@@ -239,10 +228,9 @@ export class ComboBoxComponent extends MultiTabStop {
|
|
239
228
|
return this._value;
|
240
229
|
}
|
241
230
|
/**
|
242
|
-
* Sets the data item field that represents the item text.
|
243
|
-
* If the data contains only primitive values, do not define it.
|
231
|
+
* Sets the data item field that represents the item text. If the data contains only primitive values, do not define this property.
|
244
232
|
*
|
245
|
-
*
|
233
|
+
* The `textField` property can be set to a nested property value, for example, `category.name`.
|
246
234
|
*/
|
247
235
|
textField;
|
248
236
|
/**
|
@@ -253,9 +241,8 @@ export class ComboBoxComponent extends MultiTabStop {
|
|
253
241
|
*/
|
254
242
|
valueField;
|
255
243
|
/**
|
256
|
-
* Specifies the type of the selected value.
|
257
|
-
*
|
258
|
-
* ([more information and example]({% slug valuebinding_combobox %}#toc-primitive-values-from-object-fields)).
|
244
|
+
* Specifies the type of the selected value. If set to `true`, the selected value must be a primitive type.
|
245
|
+
* ([more information and example]({% slug valuebinding_combobox %}#toc-primitive-values-from-object-fields))
|
259
246
|
*/
|
260
247
|
set valuePrimitive(isPrimitive) {
|
261
248
|
this._valuePrimitive = isPrimitive;
|
@@ -312,22 +299,23 @@ export class ComboBoxComponent extends MultiTabStop {
|
|
312
299
|
valueNormalizer = (text) => text.pipe(map((userInput) => userInput));
|
313
300
|
/**
|
314
301
|
* The hint that is displayed when the component is empty.
|
315
|
-
*
|
302
|
+
* @default ''
|
316
303
|
*/
|
317
304
|
placeholder = "";
|
318
305
|
/**
|
319
|
-
* Enables or disables the adaptive mode. By default
|
306
|
+
* Enables or disables the adaptive mode. By default, adaptive rendering is disabled.
|
307
|
+
* @default 'none'
|
320
308
|
*/
|
321
309
|
adaptiveMode = 'none';
|
322
310
|
/**
|
323
311
|
* Sets the title of the ActionSheet that is rendered instead of the Popup when using small screen devices.
|
324
|
-
* By default the ActionSheet title uses the text provided for the label of the
|
312
|
+
* By default, the ActionSheet title uses the text provided for the label of the ComboBox.
|
313
|
+
* @default ''
|
325
314
|
*/
|
326
315
|
adaptiveTitle = '';
|
327
316
|
/**
|
328
|
-
* Sets the subtitle of the ActionSheet that is rendered instead of the Popup when using small screen devices.
|
329
|
-
|
330
|
-
*/
|
317
|
+
* Sets the subtitle of the ActionSheet that is rendered instead of the Popup when using small screen devices. By default, the ActionSheet does not render a subtitle.
|
318
|
+
*/
|
331
319
|
adaptiveSubtitle;
|
332
320
|
/**
|
333
321
|
* @hidden
|
@@ -357,7 +345,7 @@ export class ComboBoxComponent extends MultiTabStop {
|
|
357
345
|
* > The `listHeight` property affects only the list of options and not the whole popup container.
|
358
346
|
* > To set the height of the popup container, use `popupSettings.height`.
|
359
347
|
*
|
360
|
-
*
|
348
|
+
* When using `adaptiveMode` and the screen size is `small` or `medium` the `listHeight` property is set to null.
|
361
349
|
*/
|
362
350
|
set listHeight(_listHeight) {
|
363
351
|
this._listHeight = _listHeight;
|
@@ -375,11 +363,13 @@ export class ComboBoxComponent extends MultiTabStop {
|
|
375
363
|
loading;
|
376
364
|
/**
|
377
365
|
* Enables the auto-completion of the text based on the first data item.
|
366
|
+
* @default false
|
378
367
|
*/
|
379
368
|
suggest = false;
|
380
369
|
/**
|
381
370
|
* If set to `true`, renders a button on hovering over the component.
|
382
371
|
* Clicking this button resets the value of the component to `undefined` and triggers the `change` event.
|
372
|
+
* @default true
|
383
373
|
*/
|
384
374
|
clearButton = true;
|
385
375
|
/**
|
@@ -387,8 +377,7 @@ export class ComboBoxComponent extends MultiTabStop {
|
|
387
377
|
*/
|
388
378
|
disabled = false;
|
389
379
|
/**
|
390
|
-
* Defines a Boolean function that is executed for each data item in the component
|
391
|
-
* ([see examples]({% slug disableditems_combobox %})). Determines whether the item will be disabled.
|
380
|
+
* Defines a Boolean function that is executed for each data item in the component ([see examples]({% slug disableditems_combobox %})). Determines whether the item is disabled.
|
392
381
|
*/
|
393
382
|
set itemDisabled(fn) {
|
394
383
|
if (typeof fn !== 'function') {
|
@@ -398,7 +387,6 @@ export class ComboBoxComponent extends MultiTabStop {
|
|
398
387
|
}
|
399
388
|
/**
|
400
389
|
* Sets the read-only state of the component.
|
401
|
-
*
|
402
390
|
* @default false
|
403
391
|
*/
|
404
392
|
readonly = false;
|
@@ -506,19 +494,15 @@ export class ComboBoxComponent extends MultiTabStop {
|
|
506
494
|
*/
|
507
495
|
valueChange = new EventEmitter();
|
508
496
|
/**
|
509
|
-
* Fires each time an item selection is changed
|
510
|
-
* ([see example](slug:events_combobox)).
|
497
|
+
* Fires each time an item selection is changed ([see example](slug:events_combobox)).
|
511
498
|
*/
|
512
499
|
selectionChange = new EventEmitter();
|
513
500
|
/**
|
514
|
-
* Fires each time the user types in the input field.
|
515
|
-
* You can filter the source based on the passed filtration value
|
516
|
-
* ([see example](slug:events_combobox)).
|
501
|
+
* Fires each time the user types in the input field. You can filter the source based on the passed filtration value ([see example](slug:events_combobox)).
|
517
502
|
*/
|
518
503
|
filterChange = new EventEmitter();
|
519
504
|
/**
|
520
|
-
* Fires each time the popup is about to open.
|
521
|
-
* This event is preventable. If you cancel it, the popup will remain closed.
|
505
|
+
* Fires each time the popup is about to open. This event is preventable. If you cancel it, the popup remains closed.
|
522
506
|
*/
|
523
507
|
open = new EventEmitter();
|
524
508
|
/**
|
@@ -526,8 +510,7 @@ export class ComboBoxComponent extends MultiTabStop {
|
|
526
510
|
*/
|
527
511
|
opened = new EventEmitter();
|
528
512
|
/**
|
529
|
-
* Fires each time the popup is about to close.
|
530
|
-
* This event is preventable. If you cancel it, the popup will remain open.
|
513
|
+
* Fires each time the popup is about to close. This event is preventable. If you cancel it, the popup remains open.
|
531
514
|
*/
|
532
515
|
close = new EventEmitter();
|
533
516
|
/**
|
@@ -25,8 +25,7 @@ import * as i13 from "./combobox-column/column-header-template.directive";
|
|
25
25
|
import * as i14 from "./combobox-column/column-cell-template.directive";
|
26
26
|
// IMPORTANT: NgModule export kept for backwards compatibility
|
27
27
|
/**
|
28
|
-
*
|
29
|
-
* The exported package module.
|
28
|
+
* Required for adding all ComboBox features in NgModule-based Angular applications.
|
30
29
|
*
|
31
30
|
* The package exports:
|
32
31
|
* - `ComboBoxComponent`—The ComboBox component class.
|
@@ -42,6 +41,16 @@ import * as i14 from "./combobox-column/column-cell-template.directive";
|
|
42
41
|
* - `CustomMessagesComponent`—The custom messages component.
|
43
42
|
* - `SuffixTemplateDirective`—The suffix template directive.
|
44
43
|
* - `PrefixTemplateDirective`—The prefix template directive.
|
44
|
+
*
|
45
|
+
* @example
|
46
|
+
* ```typescript
|
47
|
+
* import { ComboBoxModule } from '@progress/kendo-angular-dropdowns';
|
48
|
+
*
|
49
|
+
* @NgModule({
|
50
|
+
* imports: [ComboBoxModule]
|
51
|
+
* })
|
52
|
+
* class AppModule {}
|
53
|
+
* ```
|
45
54
|
*/
|
46
55
|
export class ComboBoxModule {
|
47
56
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ComboBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|