@progress/kendo-angular-dropdowns 19.1.1 → 19.1.2-develop.2

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 (62) hide show
  1. package/autocomplete/autocomplete.component.d.ts +62 -53
  2. package/autocomplete/autocomplete.module.d.ts +9 -1
  3. package/comboboxes/combobox-column/column-cell-template.directive.d.ts +6 -6
  4. package/comboboxes/combobox-column/column-header-template.directive.d.ts +5 -4
  5. package/comboboxes/combobox-column/combobox-column.component.d.ts +21 -17
  6. package/comboboxes/combobox-column/util.d.ts +7 -4
  7. package/comboboxes/combobox.component.d.ts +28 -45
  8. package/comboboxes/combobox.module.d.ts +11 -2
  9. package/comboboxes/multicolumncombobox.component.d.ts +12 -2
  10. package/dropdownlist/dropdownlist.component.d.ts +53 -75
  11. package/dropdownlist/dropdownlist.module.d.ts +29 -11
  12. package/dropdowns.module.d.ts +8 -20
  13. package/dropdowntrees/checked-state/base-check.directive.d.ts +4 -7
  14. package/dropdowntrees/checked-state/check-all.directive.d.ts +4 -7
  15. package/dropdowntrees/checked-state/check.directive.d.ts +6 -10
  16. package/dropdowntrees/checked-state/checkable-settings.d.ts +2 -4
  17. package/dropdowntrees/checked-state/checked-item.d.ts +2 -2
  18. package/dropdowntrees/data-binding/dropdowntree/flat-binding.directive.d.ts +3 -3
  19. package/dropdowntrees/data-binding/dropdowntree/hierarchy-binding.directive.d.ts +2 -2
  20. package/dropdowntrees/data-binding/multiselecttree/flat-binding.directive.d.ts +3 -3
  21. package/dropdowntrees/data-binding/multiselecttree/hierarchy-binding.directive.d.ts +2 -2
  22. package/dropdowntrees/dropdowntree.component.d.ts +3 -3
  23. package/dropdowntrees/dropdowntrees.module.d.ts +1 -0
  24. package/dropdowntrees/expanded-state/expand.directive.d.ts +1 -1
  25. package/dropdowntrees/multiselecttree.component.d.ts +139 -120
  26. package/dropdowntrees/summary-tag/summary-tag.directive.d.ts +8 -6
  27. package/dropdowntrees/templates/node-template.directive.d.ts +4 -3
  28. package/esm2022/autocomplete/autocomplete.component.mjs +62 -53
  29. package/esm2022/autocomplete/autocomplete.module.mjs +9 -1
  30. package/esm2022/comboboxes/combobox-column/column-cell-template.directive.mjs +6 -6
  31. package/esm2022/comboboxes/combobox-column/column-header-template.directive.mjs +5 -4
  32. package/esm2022/comboboxes/combobox-column/combobox-column.component.mjs +21 -17
  33. package/esm2022/comboboxes/combobox-column/util.mjs +10 -5
  34. package/esm2022/comboboxes/combobox.component.mjs +28 -45
  35. package/esm2022/comboboxes/combobox.module.mjs +11 -2
  36. package/esm2022/comboboxes/multicolumncombobox.component.mjs +12 -2
  37. package/esm2022/dropdownlist/dropdownlist.component.mjs +53 -75
  38. package/esm2022/dropdownlist/dropdownlist.module.mjs +29 -11
  39. package/esm2022/dropdowns.module.mjs +8 -20
  40. package/esm2022/dropdowntrees/checked-state/base-check.directive.mjs +1 -1
  41. package/esm2022/dropdowntrees/checked-state/check-all.directive.mjs +4 -7
  42. package/esm2022/dropdowntrees/checked-state/check.directive.mjs +6 -10
  43. package/esm2022/dropdowntrees/data-binding/dropdowntree/flat-binding.directive.mjs +3 -3
  44. package/esm2022/dropdowntrees/data-binding/dropdowntree/hierarchy-binding.directive.mjs +2 -2
  45. package/esm2022/dropdowntrees/data-binding/multiselecttree/flat-binding.directive.mjs +3 -3
  46. package/esm2022/dropdowntrees/data-binding/multiselecttree/hierarchy-binding.directive.mjs +2 -2
  47. package/esm2022/dropdowntrees/dropdowntree.component.mjs +3 -3
  48. package/esm2022/dropdowntrees/dropdowntrees.module.mjs +1 -0
  49. package/esm2022/dropdowntrees/expanded-state/expand.directive.mjs +1 -1
  50. package/esm2022/dropdowntrees/multiselecttree.component.mjs +139 -120
  51. package/esm2022/dropdowntrees/summary-tag/summary-tag.directive.mjs +8 -6
  52. package/esm2022/dropdowntrees/templates/node-template.directive.mjs +4 -3
  53. package/esm2022/multiselect/multiselect.component.mjs +119 -163
  54. package/esm2022/multiselect/multiselect.module.mjs +13 -5
  55. package/esm2022/multiselect/summary-tag.directive.mjs +6 -4
  56. package/esm2022/package-metadata.mjs +2 -2
  57. package/fesm2022/progress-kendo-angular-dropdowns.mjs +571 -576
  58. package/multiselect/multiselect.component.d.ts +119 -163
  59. package/multiselect/multiselect.module.d.ts +13 -5
  60. package/multiselect/summary-tag.directive.d.ts +6 -4
  61. package/package.json +10 -10
  62. 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
- * ```ts
63
- * _@Component({
64
- * selector: 'my-app',
65
- * template: `
66
- * <kendo-autocomplete
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
- * The hint which is displayed when the component is empty.
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 is rendered instead of the Popup when using small screen devices.
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 is rendered instead of the Popup when using small screen devices.
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
- * Sets the height of the options list in the popup. By default, `listHeight` is 200px.
319
- *
320
- * > The `listHeight` property affects only the list of options and not the whole popup container.
321
- * > To set the height of the popup container, use `popupSettings.height`.
322
- *
323
- * > When using `adaptiveMode` and the screen size is `small` or `medium` the `listHeight` property is set to null.
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
- * The possible values are:
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
- * The possible values are:
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
- * The possible values are:
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 is changed&mdash;
476
+ * Fires each time the value changes&mdash;
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 will remain closed.
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 has been opened.
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 will remain open.
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 has been closed.
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
- * The exported package module.
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`&mdash;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. To define a column cell template, nest an `<ng-template>` tag
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
- * The current [`column`]({% slug api_dropdowns_comboboxcolumncomponent %}) and data item are available as context variables:
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
- * - `let-dataItem="dataItem"` (`any`) - The current data item. Also available as implicit context variable.
15
- * - `let-column="column"` ([`ColumnComponent`]({% slug api_dropdowns_comboboxcolumncomponent %})) - The current column configuration obejct.
13
+ * The context variables are:
14
+ * - `let-dataItem="dataItem"` (`any`)&mdash;The current data item. Also available as the implicit context variable.
15
+ * - `let-column="column"` ([`ColumnComponent`]({% slug api_dropdowns_comboboxcolumncomponent %}))&mdash;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. To define a column header template, nest an `<ng-template>` tag
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
- * The current [`column`]({% slug api_dropdowns_comboboxcolumncomponent %}) is available as implicit context variable.
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 of the [MultiColumnComboBox]({% slug overview_multicolumncombobox %})
11
- * ([see example]({% slug columns_multicolumncombobox %})).
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
- * The field to which the column is bound.
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
- * The title of the column.
31
+ * Sets the title of the column.
30
32
  */
31
33
  title;
32
34
  /**
33
- * The width of the column (in pixels).
35
+ * Sets the width of the column (in pixels).
34
36
  */
35
37
  width;
36
38
  /**
37
- * Sets the visibility of the column.
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 the custom styles for the table cells (excluding the header ones) of the column.
44
- * Under the hood, to apply the property, the style option uses the NgStyle directive.
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 the custom styles for the header cell of the column.
49
- * Under the hood, to apply the property, the headerStyle option uses the NgStyle directive.
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 the custom CSS classes to the column cells.
54
- * Under the hood, to apply the property, the class option uses the NgClass directive.
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 the custom CSS classes to the column header cell.
59
- * Under the hood, to apply the property, the headerClass option uses the NgClass directive.
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
- * Persists the intially resolved scrollbar width value.
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 accoring to the current environment.
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 according to the passed columns width configuration.
40
- * Hidden columns and such that don't match the provided media query are ignored.
41
- * If some of the columns don't have a preset width or have an invalid width value, the function returns `null`.
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
- * ```ts
64
- * _@Component({
65
- * selector: 'my-app',
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 which are essential for certain component functionalities cannot be changed.
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
- * > All selected values which are not present in the dataset are considered custom values.
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
- * > The `textField` property can be set to point to a nested property value - e.g. `category.name`.
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
- * If set to `true`, the selected value has to be of the primitive type
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 the adaptive rendering is disabled.
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 Combobox.
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
- * By default the ActionSheet does not render a subtitle.
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
- * > When using `adaptiveMode` and the screen size is `small` or `medium` the `listHeight` property is set to null.
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`&mdash;The ComboBox component class.
@@ -42,6 +41,16 @@ import * as i14 from "./combobox-column/column-cell-template.directive";
42
41
  * - `CustomMessagesComponent`&mdash;The custom messages component.
43
42
  * - `SuffixTemplateDirective`&mdash;The suffix template directive.
44
43
  * - `PrefixTemplateDirective`&mdash;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 });