@progress/kendo-angular-dropdowns 21.1.1-develop.2 → 21.2.0-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.
- package/esm2022/autocomplete/autocomplete.component.mjs +259 -217
- package/esm2022/comboboxes/combobox.component.mjs +295 -253
- package/esm2022/comboboxes/multicolumncombobox.component.mjs +429 -383
- package/esm2022/common/adaptive-renderer.component.mjs +123 -107
- package/esm2022/common/list.component.mjs +295 -217
- package/esm2022/common/taglist.component.mjs +73 -59
- package/esm2022/dropdownlist/dropdownlist.component.mjs +259 -231
- package/esm2022/dropdowntrees/dropdowntree.component.mjs +298 -258
- package/esm2022/dropdowntrees/multiselecttree.component.mjs +359 -331
- package/esm2022/multiselect/multiselect.component.mjs +321 -281
- package/esm2022/package-metadata.mjs +2 -2
- package/fesm2022/progress-kendo-angular-dropdowns.mjs +2705 -2331
- package/package.json +10 -10
- package/schematics/ngAdd/index.js +2 -2
|
@@ -21,7 +21,7 @@ import { MultiColumnComboBoxMessages } from '../common/constants/error-messages'
|
|
|
21
21
|
import { ListComponent } from '../common/list.component';
|
|
22
22
|
import { AdaptiveRendererComponent } from '../common/adaptive-renderer.component';
|
|
23
23
|
import { SearchBarComponent } from '../common/searchbar.component';
|
|
24
|
-
import {
|
|
24
|
+
import { NgTemplateOutlet, NgClass, NgStyle } from '@angular/common';
|
|
25
25
|
import { SharedDropDownEventsDirective } from '../common/shared-events.directive';
|
|
26
26
|
import { LocalizedMessagesDirective } from '../common/localization/localized-messages.directive';
|
|
27
27
|
import { IconWrapperComponent } from '@progress/kendo-angular-icons';
|
|
@@ -237,7 +237,7 @@ export class MultiColumnComboBoxComponent extends ComboBoxComponent {
|
|
|
237
237
|
return this.headerTable?.nativeElement.offsetWidth;
|
|
238
238
|
}
|
|
239
239
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MultiColumnComboBoxComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PopupService }, { token: i3.SelectionService }, { token: i4.NavigationService }, { token: i5.DisabledItemsService }, { token: i6.DataService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.Injector }, { token: i0.ElementRef }, { token: i7.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
|
|
240
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
240
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: MultiColumnComboBoxComponent, isStandalone: true, selector: "kendo-multicolumncombobox", host: { properties: { "class.k-dropdowngrid": "this.hostClasses", "class.k-disabled": "this.isDisabled" } }, providers: [
|
|
241
241
|
SelectionService,
|
|
242
242
|
DataService,
|
|
243
243
|
NavigationService,
|
|
@@ -266,258 +266,281 @@ export class MultiColumnComboBoxComponent extends ComboBoxComponent {
|
|
|
266
266
|
},
|
|
267
267
|
], queries: [{ propertyName: "columns", predicate: ComboBoxColumnComponent }], viewQueries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "headerTable", first: true, predicate: ["headerTable"], descendants: true }, { propertyName: "headerColumns", predicate: ["columnHeader"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
|
|
268
268
|
<ng-container
|
|
269
|
-
|
|
269
|
+
kendoMultiColumnComboBoxLocalizedMessages
|
|
270
270
|
i18n-noDataText="
|
|
271
271
|
kendo.multicolumncombobox.noDataText|The text displayed in the popup when there are no items
|
|
272
272
|
"
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
273
|
+
noDataText="NO DATA FOUND"
|
|
274
|
+
i18n-clearTitle="kendo.multicolumncombobox.clearTitle|The title of the clear button"
|
|
275
|
+
clearTitle="clear"
|
|
276
|
+
i18n-selectButtonText="kendo.multicolumncombobox.selectButtonText|The title of the select button"
|
|
277
|
+
selectButtonText="Select"
|
|
278
278
|
i18n-popupLabel="
|
|
279
279
|
kendo.multicolumncombobox.popupLabel|The label of the popup element that contains the list of options
|
|
280
280
|
when its role is 'region'
|
|
281
281
|
"
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
282
|
+
popupLabel="Options list"
|
|
283
|
+
i18n-adaptiveCloseButtonTitle="kendo.multicolumncombobox.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
|
|
284
|
+
adaptiveCloseButtonTitle="Close"
|
|
285
285
|
></ng-container>
|
|
286
286
|
|
|
287
287
|
<ng-container
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
288
|
+
kendoDropDownSharedEvents
|
|
289
|
+
[hostElement]="hostElement"
|
|
290
|
+
[(isFocused)]="isFocused"
|
|
291
|
+
(handleBlur)="handleBlur()"
|
|
292
|
+
(onFocus)="handleFocus()"
|
|
293
|
+
>
|
|
294
|
+
@if (prefixTemplate) {
|
|
295
|
+
<span class="k-input-prefix k-input-prefix-horizontal">
|
|
296
|
+
<ng-template [ngTemplateOutlet]="prefixTemplate?.templateRef">
|
|
297
|
+
</ng-template>
|
|
297
298
|
</span>
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
299
|
+
}
|
|
300
|
+
@if (prefixTemplate && prefixTemplate.showSeparator) {
|
|
301
|
+
<kendo-separator></kendo-separator>
|
|
302
|
+
}
|
|
303
|
+
<input
|
|
304
|
+
kendoSearchbar
|
|
305
|
+
[ariaControls]="ariaControls"
|
|
306
|
+
[ariaExpanded]="isOpen"
|
|
307
|
+
[id]="focusableId"
|
|
308
|
+
[isLoading]="loading"
|
|
309
|
+
[isSuggestable]="suggest"
|
|
310
|
+
[isFilterable]="filterable"
|
|
311
|
+
[activeDescendant]="activeDescendant"
|
|
312
|
+
[userInput]="text"
|
|
313
|
+
[suggestedText]="getSuggestion()"
|
|
314
|
+
[disabled]="disabled"
|
|
315
|
+
[readonly]="readonly"
|
|
316
|
+
[tabIndex]="tabIndex"
|
|
317
|
+
[isRequired]="isControlRequired"
|
|
318
|
+
[placeholder]="placeholder"
|
|
319
|
+
[inputAttributes]="inputAttributes"
|
|
320
|
+
(onNavigate)="handleNavigate($event)"
|
|
321
|
+
(valueChange)="searchBarChange($event)"
|
|
322
|
+
(onBlur)="handleInputBlur()"
|
|
323
|
+
(onFocus)="handleInputFocus()"
|
|
324
|
+
(click)="handleClick()"
|
|
321
325
|
/>
|
|
326
|
+
@if (clearButton && !loading && !disabled && (!readonly || readonly && isAdaptiveModeEnabled && windowSize !== 'large') && text?.length) {
|
|
322
327
|
<span
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
(click)="clearValue($event)"
|
|
328
|
+
class="k-clear-value"
|
|
329
|
+
[style.visibility]="clearButtonVisibility"
|
|
330
|
+
aria-hidden="true"
|
|
331
|
+
[attr.title]="messageFor('clearTitle')"
|
|
332
|
+
(click)="clearValue($event)"
|
|
329
333
|
[kendoEventsOutsideAngular]="{
|
|
330
334
|
mousedown: preventEventDefault
|
|
331
335
|
}"
|
|
332
|
-
|
|
333
|
-
|
|
336
|
+
>
|
|
337
|
+
<kendo-icon-wrapper name="x" [svgIcon]="xIcon"> </kendo-icon-wrapper>
|
|
334
338
|
</span>
|
|
339
|
+
}
|
|
335
340
|
|
|
336
|
-
|
|
337
|
-
<
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
+
@if (loading) {
|
|
342
|
+
<span class="k-i-loading k-input-loading-icon k-icon"></span>
|
|
343
|
+
}
|
|
344
|
+
@if (suffixTemplate && suffixTemplate.showSeparator) {
|
|
345
|
+
<kendo-separator></kendo-separator>
|
|
346
|
+
}
|
|
347
|
+
@if (suffixTemplate) {
|
|
348
|
+
<span class="k-input-suffix k-input-suffix-horizontal">
|
|
349
|
+
<ng-template [ngTemplateOutlet]="suffixTemplate?.templateRef">
|
|
350
|
+
</ng-template>
|
|
341
351
|
</span>
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
352
|
+
}
|
|
353
|
+
<button
|
|
354
|
+
#select
|
|
355
|
+
tabindex="-1"
|
|
356
|
+
unselectable="on"
|
|
357
|
+
type="button"
|
|
358
|
+
class="k-input-button k-button k-icon-button"
|
|
359
|
+
[ngClass]="selectButtonClasses"
|
|
360
|
+
[attr.aria-label]="messageFor('selectButtonText')"
|
|
361
|
+
[attr.disabled]="disabled ? '' : null"
|
|
351
362
|
[kendoEventsOutsideAngular]="{
|
|
352
363
|
mousedown: preventEventDefault
|
|
353
364
|
}"
|
|
354
365
|
>
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
366
|
+
<kendo-icon-wrapper
|
|
367
|
+
[name]="icon || 'caret-alt-down'"
|
|
368
|
+
innerCssClass="k-button-icon"
|
|
369
|
+
[svgIcon]="svgIcon || caretAltDownIcon"
|
|
370
|
+
>
|
|
371
|
+
</kendo-icon-wrapper>
|
|
372
|
+
</button>
|
|
362
373
|
</ng-container>
|
|
363
374
|
|
|
364
375
|
<ng-template #popupTemplate>
|
|
365
|
-
|
|
366
|
-
|
|
376
|
+
<!--popup/actionsheet content-->
|
|
377
|
+
<ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
|
|
367
378
|
</ng-template>
|
|
368
379
|
|
|
369
|
-
|
|
380
|
+
@if (isOpen || isAdaptiveModeEnabled) {
|
|
381
|
+
<kendo-resize-sensor (resize)="onResize()"> </kendo-resize-sensor>
|
|
382
|
+
}
|
|
370
383
|
|
|
371
384
|
<!-- when the popupSettings.appendTo value is set to 'component', this container is used -->
|
|
372
385
|
<ng-container #container></ng-container>
|
|
373
386
|
|
|
374
387
|
<kendo-adaptive-renderer
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
388
|
+
[sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
|
|
389
|
+
[title]="adaptiveTitle"
|
|
390
|
+
[showTextInput]="true"
|
|
391
|
+
[subtitle]="adaptiveSubtitle"
|
|
392
|
+
(closePopup)="closeActionSheet()"
|
|
393
|
+
(textInputChange)="searchBarChange($event)"
|
|
394
|
+
(navigate)="handleNavigate($event)"
|
|
395
|
+
[placeholder]="placeholder"
|
|
396
|
+
[searchBarValue]="text">
|
|
384
397
|
</kendo-adaptive-renderer>
|
|
385
398
|
|
|
386
399
|
<ng-template #sharedPopupActionSheetTemplate>
|
|
387
|
-
|
|
400
|
+
<!--user-defined header template -->
|
|
401
|
+
@if (headerTemplate) {
|
|
388
402
|
<ng-template
|
|
389
|
-
*ngIf="headerTemplate"
|
|
390
403
|
[templateContext]="{
|
|
391
404
|
templateRef: headerTemplate?.templateRef
|
|
392
405
|
}"
|
|
393
|
-
|
|
406
|
+
>
|
|
394
407
|
</ng-template>
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
408
|
+
}
|
|
409
|
+
<!--data table-->
|
|
410
|
+
<div class="k-data-table" [ngClass]="tableSizeClass">
|
|
411
|
+
<!--grid header-->
|
|
412
|
+
<div #header class="k-table-header">
|
|
413
|
+
<div #headerWrap class="k-table-header-wrap">
|
|
414
|
+
<table #headerTable class="k-table" role="presentation">
|
|
415
|
+
<colgroup>
|
|
416
|
+
@for (column of columns; track column) {
|
|
417
|
+
@if (!column.hidden && column.matchesMedia) {
|
|
418
|
+
<col [style.width.px]="column.width" />
|
|
419
|
+
}
|
|
420
|
+
}
|
|
421
|
+
</colgroup>
|
|
422
|
+
<thead class="k-table-thead">
|
|
423
|
+
<tr class="k-table-row">
|
|
424
|
+
@for (column of columns; track column) {
|
|
425
|
+
@if (!column.hidden && column.matchesMedia) {
|
|
426
|
+
<th
|
|
427
|
+
#columnHeader
|
|
428
|
+
class="k-table-th"
|
|
429
|
+
[ngStyle]="column.headerStyle"
|
|
430
|
+
[ngClass]="column.headerClass"
|
|
431
|
+
>
|
|
432
|
+
@if (!column.headerTemplate) {
|
|
433
|
+
{{ column.title || column.field }}
|
|
434
|
+
}
|
|
435
|
+
@if (column.headerTemplate) {
|
|
436
|
+
<ng-template
|
|
421
437
|
[templateContext]="{
|
|
422
438
|
templateRef: column.headerTemplate?.templateRef,
|
|
423
439
|
$implicit: column,
|
|
424
440
|
column: column
|
|
425
441
|
}"
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
442
|
+
>
|
|
443
|
+
</ng-template>
|
|
444
|
+
}
|
|
445
|
+
</th>
|
|
446
|
+
}
|
|
447
|
+
}
|
|
448
|
+
</tr>
|
|
449
|
+
</thead>
|
|
450
|
+
</table>
|
|
451
|
+
</div>
|
|
452
|
+
</div>
|
|
453
|
+
<!-- item template -->
|
|
454
|
+
<ng-template #rowTemplate let-dataItem>
|
|
455
|
+
@for (column of columns; track $index; let i = $index) {
|
|
456
|
+
@if (!column.hidden && column.matchesMedia) {
|
|
457
|
+
<span
|
|
458
|
+
class="k-table-td"
|
|
459
|
+
[ngClass]="column.class"
|
|
460
|
+
[style.width.px]="getColumnWidth(i)"
|
|
461
|
+
[style.max-width.px]="getColumnWidth(i)"
|
|
462
|
+
[ngStyle]="column.style"
|
|
463
|
+
>
|
|
464
|
+
@if (!column.cellTemplate) {
|
|
465
|
+
{{ textFrom(dataItem, column.field) }}
|
|
466
|
+
}
|
|
467
|
+
@if (column.cellTemplate) {
|
|
468
|
+
<ng-template
|
|
451
469
|
[templateContext]="{
|
|
452
470
|
templateRef: column.cellTemplate?.templateRef,
|
|
453
471
|
$implicit: dataItem,
|
|
454
472
|
dataItem: dataItem,
|
|
455
473
|
column: column
|
|
456
474
|
}"
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
475
|
+
>
|
|
476
|
+
</ng-template>
|
|
477
|
+
}
|
|
478
|
+
</span>
|
|
479
|
+
}
|
|
480
|
+
}
|
|
481
|
+
</ng-template>
|
|
482
|
+
<kendo-list
|
|
483
|
+
#optionsList
|
|
484
|
+
[optionPrefix]="optionPrefix"
|
|
485
|
+
[data]="data"
|
|
486
|
+
[size]="isAdaptive ? 'large' : size"
|
|
487
|
+
[textField]="textField"
|
|
488
|
+
[valueField]="valueField"
|
|
489
|
+
[template]="{ templateRef: rowTemplate }"
|
|
490
|
+
[groupTemplate]="groupTemplate"
|
|
491
|
+
[fixedGroupTemplate]="fixedGroupTemplate"
|
|
492
|
+
[height]="listHeight"
|
|
493
|
+
[show]="isOpen"
|
|
494
|
+
[id]="listBoxId"
|
|
495
|
+
[virtual]="virtual"
|
|
496
|
+
[type]="'dropdowngrid'"
|
|
497
|
+
[rowWidth]="rowWidth"
|
|
498
|
+
[showStickyHeader]="showStickyHeader"
|
|
499
|
+
(pageChange)="pageChange($event)"
|
|
500
|
+
(listResize)="updateHeaderPadding(header)"
|
|
501
|
+
(popupListScroll)="headerWrap.scrollLeft = $event.target.scrollLeft;"
|
|
502
|
+
>
|
|
503
|
+
</kendo-list>
|
|
484
504
|
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
505
|
+
<!--no-data template-->
|
|
506
|
+
@if (data.length === 0) {
|
|
507
|
+
<div class="k-no-data">
|
|
508
|
+
@if (noDataTemplate) {
|
|
509
|
+
<ng-template
|
|
489
510
|
[templateContext]="{
|
|
490
511
|
templateRef: noDataTemplate?.templateRef
|
|
491
512
|
}"
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
513
|
+
>
|
|
514
|
+
</ng-template>
|
|
515
|
+
}
|
|
516
|
+
@if (!noDataTemplate) {
|
|
517
|
+
<div>{{ messageFor('noDataText') }}</div>
|
|
518
|
+
}
|
|
519
|
+
</div>
|
|
520
|
+
}
|
|
498
521
|
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
522
|
+
<!--user-defined footer template-->
|
|
523
|
+
@if (footerTemplate) {
|
|
524
|
+
<div class="k-table-footer">
|
|
525
|
+
<table class="k-table">
|
|
526
|
+
<tfoot class="k-table-tfoot">
|
|
527
|
+
<tr class="k-table-row">
|
|
528
|
+
<td class="k-table-td">
|
|
529
|
+
<ng-template
|
|
507
530
|
[templateContext]="{
|
|
508
531
|
templateRef: footerTemplate.templateRef
|
|
509
532
|
}"
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
</div>
|
|
517
|
-
</ng-container>
|
|
533
|
+
>
|
|
534
|
+
</ng-template>
|
|
535
|
+
</td>
|
|
536
|
+
</tr>
|
|
537
|
+
</tfoot>
|
|
538
|
+
</table>
|
|
518
539
|
</div>
|
|
540
|
+
}
|
|
541
|
+
</div>
|
|
519
542
|
</ng-template>
|
|
520
|
-
|
|
543
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n [kendoDropDownListLocalizedMessages],\n [kendoDropDownTreeLocalizedMessages],\n [kendoComboBoxLocalizedMessages],\n [kendoMultiColumnComboBoxLocalizedMessages],\n [kendoAutoCompleteLocalizedMessages],\n [kendoMultiSelectLocalizedMessages],\n [kendoMultiSelectTreeLocalizedMessages]\n " }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "isFilterable", "userInput", "suggestedText", "inputAttributes", "id", "activeDescendant", "tabIndex", "isLoading", "ariaControls", "ariaExpanded", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "customItemTemplate", "text", "allowCustom", "defaultItem", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }] });
|
|
521
544
|
}
|
|
522
545
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MultiColumnComboBoxComponent, decorators: [{
|
|
523
546
|
type: Component,
|
|
@@ -553,260 +576,283 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
553
576
|
selector: 'kendo-multicolumncombobox',
|
|
554
577
|
template: `
|
|
555
578
|
<ng-container
|
|
556
|
-
|
|
579
|
+
kendoMultiColumnComboBoxLocalizedMessages
|
|
557
580
|
i18n-noDataText="
|
|
558
581
|
kendo.multicolumncombobox.noDataText|The text displayed in the popup when there are no items
|
|
559
582
|
"
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
583
|
+
noDataText="NO DATA FOUND"
|
|
584
|
+
i18n-clearTitle="kendo.multicolumncombobox.clearTitle|The title of the clear button"
|
|
585
|
+
clearTitle="clear"
|
|
586
|
+
i18n-selectButtonText="kendo.multicolumncombobox.selectButtonText|The title of the select button"
|
|
587
|
+
selectButtonText="Select"
|
|
565
588
|
i18n-popupLabel="
|
|
566
589
|
kendo.multicolumncombobox.popupLabel|The label of the popup element that contains the list of options
|
|
567
590
|
when its role is 'region'
|
|
568
591
|
"
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
592
|
+
popupLabel="Options list"
|
|
593
|
+
i18n-adaptiveCloseButtonTitle="kendo.multicolumncombobox.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
|
|
594
|
+
adaptiveCloseButtonTitle="Close"
|
|
572
595
|
></ng-container>
|
|
573
596
|
|
|
574
597
|
<ng-container
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
598
|
+
kendoDropDownSharedEvents
|
|
599
|
+
[hostElement]="hostElement"
|
|
600
|
+
[(isFocused)]="isFocused"
|
|
601
|
+
(handleBlur)="handleBlur()"
|
|
602
|
+
(onFocus)="handleFocus()"
|
|
603
|
+
>
|
|
604
|
+
@if (prefixTemplate) {
|
|
605
|
+
<span class="k-input-prefix k-input-prefix-horizontal">
|
|
606
|
+
<ng-template [ngTemplateOutlet]="prefixTemplate?.templateRef">
|
|
607
|
+
</ng-template>
|
|
584
608
|
</span>
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
609
|
+
}
|
|
610
|
+
@if (prefixTemplate && prefixTemplate.showSeparator) {
|
|
611
|
+
<kendo-separator></kendo-separator>
|
|
612
|
+
}
|
|
613
|
+
<input
|
|
614
|
+
kendoSearchbar
|
|
615
|
+
[ariaControls]="ariaControls"
|
|
616
|
+
[ariaExpanded]="isOpen"
|
|
617
|
+
[id]="focusableId"
|
|
618
|
+
[isLoading]="loading"
|
|
619
|
+
[isSuggestable]="suggest"
|
|
620
|
+
[isFilterable]="filterable"
|
|
621
|
+
[activeDescendant]="activeDescendant"
|
|
622
|
+
[userInput]="text"
|
|
623
|
+
[suggestedText]="getSuggestion()"
|
|
624
|
+
[disabled]="disabled"
|
|
625
|
+
[readonly]="readonly"
|
|
626
|
+
[tabIndex]="tabIndex"
|
|
627
|
+
[isRequired]="isControlRequired"
|
|
628
|
+
[placeholder]="placeholder"
|
|
629
|
+
[inputAttributes]="inputAttributes"
|
|
630
|
+
(onNavigate)="handleNavigate($event)"
|
|
631
|
+
(valueChange)="searchBarChange($event)"
|
|
632
|
+
(onBlur)="handleInputBlur()"
|
|
633
|
+
(onFocus)="handleInputFocus()"
|
|
634
|
+
(click)="handleClick()"
|
|
608
635
|
/>
|
|
636
|
+
@if (clearButton && !loading && !disabled && (!readonly || readonly && isAdaptiveModeEnabled && windowSize !== 'large') && text?.length) {
|
|
609
637
|
<span
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
(click)="clearValue($event)"
|
|
638
|
+
class="k-clear-value"
|
|
639
|
+
[style.visibility]="clearButtonVisibility"
|
|
640
|
+
aria-hidden="true"
|
|
641
|
+
[attr.title]="messageFor('clearTitle')"
|
|
642
|
+
(click)="clearValue($event)"
|
|
616
643
|
[kendoEventsOutsideAngular]="{
|
|
617
644
|
mousedown: preventEventDefault
|
|
618
645
|
}"
|
|
619
|
-
|
|
620
|
-
|
|
646
|
+
>
|
|
647
|
+
<kendo-icon-wrapper name="x" [svgIcon]="xIcon"> </kendo-icon-wrapper>
|
|
621
648
|
</span>
|
|
649
|
+
}
|
|
622
650
|
|
|
623
|
-
|
|
624
|
-
<
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
651
|
+
@if (loading) {
|
|
652
|
+
<span class="k-i-loading k-input-loading-icon k-icon"></span>
|
|
653
|
+
}
|
|
654
|
+
@if (suffixTemplate && suffixTemplate.showSeparator) {
|
|
655
|
+
<kendo-separator></kendo-separator>
|
|
656
|
+
}
|
|
657
|
+
@if (suffixTemplate) {
|
|
658
|
+
<span class="k-input-suffix k-input-suffix-horizontal">
|
|
659
|
+
<ng-template [ngTemplateOutlet]="suffixTemplate?.templateRef">
|
|
660
|
+
</ng-template>
|
|
628
661
|
</span>
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
662
|
+
}
|
|
663
|
+
<button
|
|
664
|
+
#select
|
|
665
|
+
tabindex="-1"
|
|
666
|
+
unselectable="on"
|
|
667
|
+
type="button"
|
|
668
|
+
class="k-input-button k-button k-icon-button"
|
|
669
|
+
[ngClass]="selectButtonClasses"
|
|
670
|
+
[attr.aria-label]="messageFor('selectButtonText')"
|
|
671
|
+
[attr.disabled]="disabled ? '' : null"
|
|
638
672
|
[kendoEventsOutsideAngular]="{
|
|
639
673
|
mousedown: preventEventDefault
|
|
640
674
|
}"
|
|
641
675
|
>
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
676
|
+
<kendo-icon-wrapper
|
|
677
|
+
[name]="icon || 'caret-alt-down'"
|
|
678
|
+
innerCssClass="k-button-icon"
|
|
679
|
+
[svgIcon]="svgIcon || caretAltDownIcon"
|
|
680
|
+
>
|
|
681
|
+
</kendo-icon-wrapper>
|
|
682
|
+
</button>
|
|
649
683
|
</ng-container>
|
|
650
684
|
|
|
651
685
|
<ng-template #popupTemplate>
|
|
652
|
-
|
|
653
|
-
|
|
686
|
+
<!--popup/actionsheet content-->
|
|
687
|
+
<ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
|
|
654
688
|
</ng-template>
|
|
655
689
|
|
|
656
|
-
|
|
690
|
+
@if (isOpen || isAdaptiveModeEnabled) {
|
|
691
|
+
<kendo-resize-sensor (resize)="onResize()"> </kendo-resize-sensor>
|
|
692
|
+
}
|
|
657
693
|
|
|
658
694
|
<!-- when the popupSettings.appendTo value is set to 'component', this container is used -->
|
|
659
695
|
<ng-container #container></ng-container>
|
|
660
696
|
|
|
661
697
|
<kendo-adaptive-renderer
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
698
|
+
[sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
|
|
699
|
+
[title]="adaptiveTitle"
|
|
700
|
+
[showTextInput]="true"
|
|
701
|
+
[subtitle]="adaptiveSubtitle"
|
|
702
|
+
(closePopup)="closeActionSheet()"
|
|
703
|
+
(textInputChange)="searchBarChange($event)"
|
|
704
|
+
(navigate)="handleNavigate($event)"
|
|
705
|
+
[placeholder]="placeholder"
|
|
706
|
+
[searchBarValue]="text">
|
|
671
707
|
</kendo-adaptive-renderer>
|
|
672
708
|
|
|
673
709
|
<ng-template #sharedPopupActionSheetTemplate>
|
|
674
|
-
|
|
710
|
+
<!--user-defined header template -->
|
|
711
|
+
@if (headerTemplate) {
|
|
675
712
|
<ng-template
|
|
676
|
-
*ngIf="headerTemplate"
|
|
677
713
|
[templateContext]="{
|
|
678
714
|
templateRef: headerTemplate?.templateRef
|
|
679
715
|
}"
|
|
680
|
-
|
|
716
|
+
>
|
|
681
717
|
</ng-template>
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
718
|
+
}
|
|
719
|
+
<!--data table-->
|
|
720
|
+
<div class="k-data-table" [ngClass]="tableSizeClass">
|
|
721
|
+
<!--grid header-->
|
|
722
|
+
<div #header class="k-table-header">
|
|
723
|
+
<div #headerWrap class="k-table-header-wrap">
|
|
724
|
+
<table #headerTable class="k-table" role="presentation">
|
|
725
|
+
<colgroup>
|
|
726
|
+
@for (column of columns; track column) {
|
|
727
|
+
@if (!column.hidden && column.matchesMedia) {
|
|
728
|
+
<col [style.width.px]="column.width" />
|
|
729
|
+
}
|
|
730
|
+
}
|
|
731
|
+
</colgroup>
|
|
732
|
+
<thead class="k-table-thead">
|
|
733
|
+
<tr class="k-table-row">
|
|
734
|
+
@for (column of columns; track column) {
|
|
735
|
+
@if (!column.hidden && column.matchesMedia) {
|
|
736
|
+
<th
|
|
737
|
+
#columnHeader
|
|
738
|
+
class="k-table-th"
|
|
739
|
+
[ngStyle]="column.headerStyle"
|
|
740
|
+
[ngClass]="column.headerClass"
|
|
741
|
+
>
|
|
742
|
+
@if (!column.headerTemplate) {
|
|
743
|
+
{{ column.title || column.field }}
|
|
744
|
+
}
|
|
745
|
+
@if (column.headerTemplate) {
|
|
746
|
+
<ng-template
|
|
708
747
|
[templateContext]="{
|
|
709
748
|
templateRef: column.headerTemplate?.templateRef,
|
|
710
749
|
$implicit: column,
|
|
711
750
|
column: column
|
|
712
751
|
}"
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
752
|
+
>
|
|
753
|
+
</ng-template>
|
|
754
|
+
}
|
|
755
|
+
</th>
|
|
756
|
+
}
|
|
757
|
+
}
|
|
758
|
+
</tr>
|
|
759
|
+
</thead>
|
|
760
|
+
</table>
|
|
761
|
+
</div>
|
|
762
|
+
</div>
|
|
763
|
+
<!-- item template -->
|
|
764
|
+
<ng-template #rowTemplate let-dataItem>
|
|
765
|
+
@for (column of columns; track $index; let i = $index) {
|
|
766
|
+
@if (!column.hidden && column.matchesMedia) {
|
|
767
|
+
<span
|
|
768
|
+
class="k-table-td"
|
|
769
|
+
[ngClass]="column.class"
|
|
770
|
+
[style.width.px]="getColumnWidth(i)"
|
|
771
|
+
[style.max-width.px]="getColumnWidth(i)"
|
|
772
|
+
[ngStyle]="column.style"
|
|
773
|
+
>
|
|
774
|
+
@if (!column.cellTemplate) {
|
|
775
|
+
{{ textFrom(dataItem, column.field) }}
|
|
776
|
+
}
|
|
777
|
+
@if (column.cellTemplate) {
|
|
778
|
+
<ng-template
|
|
738
779
|
[templateContext]="{
|
|
739
780
|
templateRef: column.cellTemplate?.templateRef,
|
|
740
781
|
$implicit: dataItem,
|
|
741
782
|
dataItem: dataItem,
|
|
742
783
|
column: column
|
|
743
784
|
}"
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
785
|
+
>
|
|
786
|
+
</ng-template>
|
|
787
|
+
}
|
|
788
|
+
</span>
|
|
789
|
+
}
|
|
790
|
+
}
|
|
791
|
+
</ng-template>
|
|
792
|
+
<kendo-list
|
|
793
|
+
#optionsList
|
|
794
|
+
[optionPrefix]="optionPrefix"
|
|
795
|
+
[data]="data"
|
|
796
|
+
[size]="isAdaptive ? 'large' : size"
|
|
797
|
+
[textField]="textField"
|
|
798
|
+
[valueField]="valueField"
|
|
799
|
+
[template]="{ templateRef: rowTemplate }"
|
|
800
|
+
[groupTemplate]="groupTemplate"
|
|
801
|
+
[fixedGroupTemplate]="fixedGroupTemplate"
|
|
802
|
+
[height]="listHeight"
|
|
803
|
+
[show]="isOpen"
|
|
804
|
+
[id]="listBoxId"
|
|
805
|
+
[virtual]="virtual"
|
|
806
|
+
[type]="'dropdowngrid'"
|
|
807
|
+
[rowWidth]="rowWidth"
|
|
808
|
+
[showStickyHeader]="showStickyHeader"
|
|
809
|
+
(pageChange)="pageChange($event)"
|
|
810
|
+
(listResize)="updateHeaderPadding(header)"
|
|
811
|
+
(popupListScroll)="headerWrap.scrollLeft = $event.target.scrollLeft;"
|
|
812
|
+
>
|
|
813
|
+
</kendo-list>
|
|
771
814
|
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
815
|
+
<!--no-data template-->
|
|
816
|
+
@if (data.length === 0) {
|
|
817
|
+
<div class="k-no-data">
|
|
818
|
+
@if (noDataTemplate) {
|
|
819
|
+
<ng-template
|
|
776
820
|
[templateContext]="{
|
|
777
821
|
templateRef: noDataTemplate?.templateRef
|
|
778
822
|
}"
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
823
|
+
>
|
|
824
|
+
</ng-template>
|
|
825
|
+
}
|
|
826
|
+
@if (!noDataTemplate) {
|
|
827
|
+
<div>{{ messageFor('noDataText') }}</div>
|
|
828
|
+
}
|
|
829
|
+
</div>
|
|
830
|
+
}
|
|
785
831
|
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
832
|
+
<!--user-defined footer template-->
|
|
833
|
+
@if (footerTemplate) {
|
|
834
|
+
<div class="k-table-footer">
|
|
835
|
+
<table class="k-table">
|
|
836
|
+
<tfoot class="k-table-tfoot">
|
|
837
|
+
<tr class="k-table-row">
|
|
838
|
+
<td class="k-table-td">
|
|
839
|
+
<ng-template
|
|
794
840
|
[templateContext]="{
|
|
795
841
|
templateRef: footerTemplate.templateRef
|
|
796
842
|
}"
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
</div>
|
|
804
|
-
</ng-container>
|
|
843
|
+
>
|
|
844
|
+
</ng-template>
|
|
845
|
+
</td>
|
|
846
|
+
</tr>
|
|
847
|
+
</tfoot>
|
|
848
|
+
</table>
|
|
805
849
|
</div>
|
|
850
|
+
}
|
|
851
|
+
</div>
|
|
806
852
|
</ng-template>
|
|
807
|
-
|
|
853
|
+
`,
|
|
808
854
|
standalone: true,
|
|
809
|
-
imports: [LocalizedMessagesDirective, SharedDropDownEventsDirective,
|
|
855
|
+
imports: [LocalizedMessagesDirective, SharedDropDownEventsDirective, NgTemplateOutlet, SeparatorComponent, SearchBarComponent, EventsOutsideAngularDirective, IconWrapperComponent, NgClass, ResizeSensorComponent, AdaptiveRendererComponent, TemplateContextDirective, NgStyle, ListComponent]
|
|
810
856
|
}]
|
|
811
857
|
}], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i2.PopupService }, { type: i3.SelectionService }, { type: i4.NavigationService }, { type: i5.DisabledItemsService }, { type: i6.DataService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.Injector }, { type: i0.ElementRef }, { type: i7.AdaptiveService }], propDecorators: { hostClasses: [{
|
|
812
858
|
type: HostBinding,
|