@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
|
@@ -32,7 +32,7 @@ import { AdaptiveRendererComponent } from '../common/adaptive-renderer.component
|
|
|
32
32
|
import { CheckDirective } from './checked-state/check.directive';
|
|
33
33
|
import { CheckAllDirective } from './checked-state/check-all.directive';
|
|
34
34
|
import { FilterInputDirective } from '../common/filter-input.directive';
|
|
35
|
-
import {
|
|
35
|
+
import { NgTemplateOutlet, NgClass } from '@angular/common';
|
|
36
36
|
import { TagListComponent } from '../common/taglist.component';
|
|
37
37
|
import { LocalizedMessagesDirective } from '../common/localization/localized-messages.directive';
|
|
38
38
|
import { IconWrapperComponent } from '@progress/kendo-angular-icons';
|
|
@@ -1647,7 +1647,7 @@ export class MultiSelectTreeComponent {
|
|
|
1647
1647
|
this.opened.emit();
|
|
1648
1648
|
}
|
|
1649
1649
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MultiSelectTreeComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i1.PopupService }, { token: i0.Renderer2 }, { token: i2.NavigationService }, { token: i0.NgZone }, { token: i3.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i4.MultiSelectTreeLookupService }, { token: i5.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1650
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1650
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: MultiSelectTreeComponent, isStandalone: true, selector: "kendo-multiselecttree", inputs: { adaptiveMode: "adaptiveMode", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", popupSettings: "popupSettings", checkableSettings: "checkableSettings", data: "data", value: "value", dataItems: "dataItems", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", loading: "loading", placeholder: "placeholder", listHeight: "listHeight", disabled: "disabled", readonly: "readonly", valuePrimitive: "valuePrimitive", loadOnDemand: "loadOnDemand", focusableId: "focusableId", clearButton: "clearButton", filterable: "filterable", checkAll: "checkAll", hasChildren: "hasChildren", fetchChildren: "fetchChildren", isNodeExpanded: "isNodeExpanded", isNodeVisible: "isNodeVisible", itemDisabled: "itemDisabled", tagMapper: "tagMapper" }, outputs: { onFocus: "focus", onBlur: "blur", open: "open", opened: "opened", close: "close", closed: "closed", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", valueChange: "valueChange", removeTag: "removeTag", filterChange: "filterChange" }, host: { properties: { "class.k-multiselecttree": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.isDisabled", "attr.aria-disabled": "this.isDisabled", "attr.aria-autocomplete": "this.hostAriaAutocomplete", "class.k-loading": "this.isLoading", "attr.aria-invalid": "this.hostAriaInvalid", "attr.aria-busy": "this.isBusy", "attr.id": "this.id", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabIndex", "attr.role": "this.role", "attr.aria-haspopup": "this.ariaHasPopup", "attr.readonly": "this.isReadonly", "attr.aria-describedby": "this.ariaDescribedBy", "attr.aria-activedescendant": "this.ariaActiveDescendant", "class.k-readonly": "this.readonly" } }, providers: [
|
|
1651
1651
|
LocalizationService,
|
|
1652
1652
|
NavigationService,
|
|
1653
1653
|
DataService,
|
|
@@ -1677,222 +1677,236 @@ export class MultiSelectTreeComponent {
|
|
|
1677
1677
|
}
|
|
1678
1678
|
], queries: [{ propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "nodeTemplate", first: true, predicate: NodeTemplateDirective, descendants: true }, { propertyName: "noDataTemplate", first: true, predicate: NoDataTemplateDirective, descendants: true }, { propertyName: "tagTemplate", first: true, predicate: TagTemplateDirective, descendants: true }, { propertyName: "groupTagTemplate", first: true, predicate: GroupTagTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "adaptiveRendererComponent", first: true, predicate: AdaptiveRendererComponent, descendants: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "treeview", first: true, predicate: ["treeview"], descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "checkAllInput", first: true, predicate: ["checkAllInput"], descendants: true }], exportAs: ["kendoMultiSelectTree"], usesOnChanges: true, ngImport: i0, template: `
|
|
1679
1679
|
<ng-container kendoMultiSelectTreeLocalizedMessages
|
|
1680
|
-
|
|
1681
|
-
|
|
1682
|
-
|
|
1683
|
-
|
|
1684
|
-
|
|
1685
|
-
|
|
1686
|
-
|
|
1687
|
-
|
|
1688
|
-
|
|
1689
|
-
|
|
1690
|
-
|
|
1691
|
-
|
|
1692
|
-
|
|
1693
|
-
|
|
1694
|
-
|
|
1695
|
-
|
|
1696
|
-
|
|
1697
|
-
|
|
1698
|
-
|
|
1699
|
-
|
|
1700
|
-
|
|
1680
|
+
i18n-noDataText="kendo.multiselecttree.noDataText|The text displayed in the popup when there are no items"
|
|
1681
|
+
noDataText="NO DATA FOUND"
|
|
1682
|
+
|
|
1683
|
+
i18n-clearTitle="kendo.multiselecttree.clearTitle|The title of the clear button"
|
|
1684
|
+
clearTitle="clear"
|
|
1685
|
+
|
|
1686
|
+
i18n-checkAllText="kendo.multiselecttree.checkAllText|The text displayed for the check-all checkbox"
|
|
1687
|
+
checkAllText="Check all"
|
|
1688
|
+
|
|
1689
|
+
i18n-filterInputLabel="kendo.multiselecttree.filterInputLabel|The text set as aria-label on the filter input"
|
|
1690
|
+
filterInputLabel="Filter"
|
|
1691
|
+
|
|
1692
|
+
i18n-popupLabel="kendo.multiselecttree.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
|
|
1693
|
+
popupLabel="Options list"
|
|
1694
|
+
|
|
1695
|
+
i18n-adaptiveCloseButtonTitle="kendo.multiselecttree.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"
|
|
1696
|
+
adaptiveCloseButtonTitle="Close"
|
|
1697
|
+
|
|
1698
|
+
i18n-filterInputPlaceholder="kendo.multiselecttree.filterInputPlaceholder|The text for the input's placeholder when filtering is enabled"
|
|
1699
|
+
filterInputPlaceholder="Filter"
|
|
1700
|
+
>
|
|
1701
1701
|
</ng-container>
|
|
1702
1702
|
<kendo-taglist
|
|
1703
|
-
|
|
1704
|
-
|
|
1705
|
-
|
|
1706
|
-
|
|
1707
|
-
|
|
1708
|
-
|
|
1709
|
-
|
|
1710
|
-
|
|
1711
|
-
|
|
1712
|
-
|
|
1713
|
-
|
|
1714
|
-
|
|
1715
|
-
|
|
1716
|
-
|
|
1717
|
-
|
|
1718
|
-
|
|
1719
|
-
|
|
1703
|
+
class="k-input-values"
|
|
1704
|
+
[size]="size"
|
|
1705
|
+
[rounded]="rounded"
|
|
1706
|
+
[fillMode]="fillMode"
|
|
1707
|
+
[id]="tagListId"
|
|
1708
|
+
[tags]="tags"
|
|
1709
|
+
[focused]="focusedTagIndex"
|
|
1710
|
+
[textField]="textField"
|
|
1711
|
+
[valueField]="valueField"
|
|
1712
|
+
[valueDepth]="valueDepth"
|
|
1713
|
+
[disabled]="disabled"
|
|
1714
|
+
[tagPrefix]="tagPrefix"
|
|
1715
|
+
[template]="tagTemplate"
|
|
1716
|
+
[groupTemplate]="groupTagTemplate"
|
|
1717
|
+
[disabledIndices]="disabledIndices"
|
|
1718
|
+
(removeTag)="handleRemoveTag($event)"
|
|
1719
|
+
>
|
|
1720
1720
|
</kendo-taglist>
|
|
1721
1721
|
<span class="k-input-inner">
|
|
1722
|
+
@if (!tags || !tags.length) {
|
|
1722
1723
|
<span
|
|
1723
|
-
|
|
1724
|
-
|
|
1725
|
-
|
|
1726
|
-
{{ placeholder }}
|
|
1724
|
+
class="k-input-value-text"
|
|
1725
|
+
>
|
|
1726
|
+
{{ placeholder }}
|
|
1727
1727
|
</span>
|
|
1728
|
+
}
|
|
1728
1729
|
</span>
|
|
1729
|
-
|
|
1730
|
-
|
|
1730
|
+
@if (!disabled && !loading && !readonly && clearButton && tags?.length) {
|
|
1731
|
+
<span
|
|
1731
1732
|
class="k-clear-value"
|
|
1732
1733
|
[attr.title]="messageFor('clearTitle')"
|
|
1733
1734
|
role="button"
|
|
1734
1735
|
tabindex="-1"
|
|
1735
1736
|
(click)="clearAll($event)"
|
|
1736
|
-
>
|
|
1737
|
-
<kendo-icon-wrapper
|
|
1738
|
-
class="k-icon"
|
|
1739
|
-
name="x"
|
|
1740
|
-
[svgIcon]="xIcon"
|
|
1741
1737
|
>
|
|
1738
|
+
<kendo-icon-wrapper
|
|
1739
|
+
class="k-icon"
|
|
1740
|
+
name="x"
|
|
1741
|
+
[svgIcon]="xIcon"
|
|
1742
|
+
>
|
|
1742
1743
|
</kendo-icon-wrapper>
|
|
1743
|
-
|
|
1744
|
-
|
|
1745
|
-
|
|
1744
|
+
</span>
|
|
1745
|
+
}
|
|
1746
|
+
@if (loading) {
|
|
1747
|
+
<span
|
|
1746
1748
|
class="k-icon k-i-loading k-input-loading-icon"
|
|
1747
|
-
|
|
1748
|
-
|
|
1749
|
+
>
|
|
1750
|
+
</span>
|
|
1751
|
+
}
|
|
1749
1752
|
<ng-template #popupTemplate>
|
|
1750
|
-
|
|
1753
|
+
<ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
|
|
1751
1754
|
</ng-template>
|
|
1752
1755
|
<ng-container #container></ng-container>
|
|
1753
|
-
|
|
1756
|
+
|
|
1754
1757
|
<kendo-adaptive-renderer
|
|
1755
|
-
|
|
1756
|
-
|
|
1757
|
-
|
|
1758
|
-
|
|
1759
|
-
|
|
1760
|
-
|
|
1761
|
-
|
|
1762
|
-
|
|
1763
|
-
|
|
1758
|
+
[sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
|
|
1759
|
+
[title]="adaptiveTitle"
|
|
1760
|
+
[showTextInput]="filterable"
|
|
1761
|
+
[subtitle]="adaptiveSubtitle"
|
|
1762
|
+
(closePopup)="togglePopup(false)"
|
|
1763
|
+
(textInputChange)="onFilterChange($event)"
|
|
1764
|
+
[searchBarValue]="filter"
|
|
1765
|
+
[placeholder]="placeholder"
|
|
1766
|
+
[filterable]="filterable">
|
|
1764
1767
|
</kendo-adaptive-renderer>
|
|
1765
|
-
|
|
1768
|
+
|
|
1766
1769
|
<ng-template #sharedPopupActionSheetTemplate>
|
|
1770
|
+
@if (filterable && !isActionSheetExpanded) {
|
|
1767
1771
|
<div
|
|
1768
|
-
|
|
1769
|
-
|
|
1770
|
-
|
|
1771
|
-
|
|
1772
|
-
|
|
1773
|
-
[ngClass]="filterInputClasses"
|
|
1772
|
+
class="k-list-filter"
|
|
1773
|
+
>
|
|
1774
|
+
<span
|
|
1775
|
+
class="k-textbox k-input"
|
|
1776
|
+
[ngClass]="filterInputClasses"
|
|
1774
1777
|
>
|
|
1775
|
-
|
|
1776
|
-
|
|
1777
|
-
|
|
1778
|
-
|
|
1779
|
-
|
|
1780
|
-
|
|
1781
|
-
|
|
1782
|
-
|
|
1783
|
-
|
|
1784
|
-
|
|
1785
|
-
|
|
1786
|
-
|
|
1787
|
-
|
|
1788
|
-
|
|
1789
|
-
|
|
1790
|
-
|
|
1791
|
-
|
|
1792
|
-
|
|
1793
|
-
|
|
1794
|
-
|
|
1778
|
+
<span class="k-input-prefix">
|
|
1779
|
+
<kendo-icon-wrapper
|
|
1780
|
+
class="k-icon"
|
|
1781
|
+
name="search"
|
|
1782
|
+
[svgIcon]="searchIcon"
|
|
1783
|
+
>
|
|
1784
|
+
</kendo-icon-wrapper>
|
|
1785
|
+
</span>
|
|
1786
|
+
<input
|
|
1787
|
+
#filterInput
|
|
1788
|
+
(input)="handleFilterInputChange($event.target)"
|
|
1789
|
+
[filterInput]="filterable && !touchEnabled"
|
|
1790
|
+
[attr.aria-label]="messageFor('filterInputLabel')"
|
|
1791
|
+
(keydown)="handleKeydown($event, filterInput)"
|
|
1792
|
+
[value]="filter"
|
|
1793
|
+
class="k-input-inner"
|
|
1794
|
+
role="searchbox"
|
|
1795
|
+
tabindex="0"
|
|
1796
|
+
aria-disabled="false"
|
|
1797
|
+
aria-readonly="false"
|
|
1795
1798
|
[kendoEventsOutsideAngular]="{
|
|
1796
1799
|
blur: handleBlur
|
|
1797
1800
|
}"
|
|
1798
|
-
|
|
1799
|
-
|
|
1800
|
-
|
|
1801
|
+
[scope]="this"
|
|
1802
|
+
>
|
|
1803
|
+
</span>
|
|
1801
1804
|
</div>
|
|
1802
|
-
|
|
1805
|
+
}
|
|
1806
|
+
<!--header template-->
|
|
1807
|
+
@if (headerTemplate) {
|
|
1803
1808
|
<ng-template
|
|
1804
|
-
*ngIf="headerTemplate"
|
|
1805
1809
|
[templateContext]="{
|
|
1806
1810
|
templateRef: headerTemplate?.templateRef
|
|
1807
1811
|
}">
|
|
1808
1812
|
</ng-template>
|
|
1809
|
-
|
|
1810
|
-
|
|
1811
|
-
|
|
1812
|
-
|
|
1813
|
-
|
|
1814
|
-
|
|
1815
|
-
|
|
1816
|
-
|
|
1817
|
-
|
|
1818
|
-
|
|
1819
|
-
|
|
1820
|
-
|
|
1821
|
-
|
|
1822
|
-
|
|
1823
|
-
|
|
1824
|
-
|
|
1825
|
-
|
|
1826
|
-
|
|
1813
|
+
}
|
|
1814
|
+
@if (checkAll) {
|
|
1815
|
+
<div class="k-check-all">
|
|
1816
|
+
<span class="k-checkbox-wrap">
|
|
1817
|
+
<input
|
|
1818
|
+
#checkAllInput
|
|
1819
|
+
[checkAll]="!filterable && !touchEnabled"
|
|
1820
|
+
type="checkbox"
|
|
1821
|
+
class="k-checkbox"
|
|
1822
|
+
[ngClass]="checkAllCheckboxClasses"
|
|
1823
|
+
role="checkbox"
|
|
1824
|
+
tabindex="0"
|
|
1825
|
+
aria-disabled="false"
|
|
1826
|
+
aria-readonly="false"
|
|
1827
|
+
[treeview]="treeview"
|
|
1828
|
+
[checkedItems]="checkedItems"
|
|
1829
|
+
[valueField]="valueField"
|
|
1830
|
+
[lastAction]="lastAction"
|
|
1831
|
+
(checkedItemsChange)="handleCheckedItemsChange($event)"
|
|
1832
|
+
(keydown)="handleKeydown($event)"
|
|
1827
1833
|
[kendoEventsOutsideAngular]="{
|
|
1828
1834
|
blur: handleBlur
|
|
1829
1835
|
}"
|
|
1830
|
-
|
|
1831
|
-
|
|
1832
|
-
|
|
1833
|
-
|
|
1834
|
-
|
|
1835
|
-
|
|
1836
|
-
|
|
1836
|
+
[scope]="this"
|
|
1837
|
+
>
|
|
1838
|
+
</span>
|
|
1839
|
+
<span
|
|
1840
|
+
class="k-checkbox-label"
|
|
1841
|
+
(click)="toggleCheckAll()"
|
|
1842
|
+
(mousedown)="$event.preventDefault()"
|
|
1837
1843
|
>
|
|
1838
|
-
|
|
1839
|
-
|
|
1844
|
+
{{ messageFor('checkAllText') }}
|
|
1845
|
+
</span>
|
|
1840
1846
|
</div>
|
|
1841
|
-
|
|
1842
|
-
|
|
1843
|
-
|
|
1844
|
-
|
|
1845
|
-
|
|
1846
|
-
|
|
1847
|
-
|
|
1848
|
-
|
|
1849
|
-
|
|
1850
|
-
|
|
1851
|
-
|
|
1852
|
-
|
|
1853
|
-
|
|
1854
|
-
|
|
1855
|
-
|
|
1856
|
-
|
|
1857
|
-
|
|
1858
|
-
|
|
1859
|
-
|
|
1860
|
-
|
|
1861
|
-
|
|
1862
|
-
|
|
1863
|
-
|
|
1864
|
-
|
|
1865
|
-
|
|
1866
|
-
|
|
1847
|
+
}
|
|
1848
|
+
<kendo-treeview
|
|
1849
|
+
#treeview
|
|
1850
|
+
[size]="windowSize !== 'large' ? 'large' : size"
|
|
1851
|
+
[attr.id]="treeViewId"
|
|
1852
|
+
[nodes]="data"
|
|
1853
|
+
[style.maxHeight.px]="listHeight"
|
|
1854
|
+
[animate]="false"
|
|
1855
|
+
kendoMultiSelectTreeCheckable
|
|
1856
|
+
[isHeterogeneous]="isHeterogeneous"
|
|
1857
|
+
[checkable]="checkableSettings"
|
|
1858
|
+
[checkedItems]="checkedItems"
|
|
1859
|
+
[valueField]="valueField"
|
|
1860
|
+
[textField]="textField"
|
|
1861
|
+
[children]="children"
|
|
1862
|
+
[hasChildren]="hasChildren"
|
|
1863
|
+
[isExpanded]="isNodeExpanded"
|
|
1864
|
+
[isDisabled]="itemDisabled"
|
|
1865
|
+
[nodeTemplate]="nodeTemplate"
|
|
1866
|
+
[loadOnDemand]="loadOnDemand"
|
|
1867
|
+
[filter]="filter"
|
|
1868
|
+
[isVisible]="isNodeVisible"
|
|
1869
|
+
(keydown)="handleKeydown($event)"
|
|
1870
|
+
(nodeClick)="handleNodeClick($event)"
|
|
1871
|
+
(expand)="nodeExpand.emit($event)"
|
|
1872
|
+
(collapse)="nodeCollapse.emit($event)"
|
|
1873
|
+
(checkedItemsChange)="handleCheckedItemsChange($event)"
|
|
1867
1874
|
[kendoEventsOutsideAngular]="{
|
|
1868
1875
|
focusout: handleBlur
|
|
1869
1876
|
}"
|
|
1870
|
-
|
|
1871
|
-
|
|
1877
|
+
[scope]="this"
|
|
1878
|
+
(childrenLoaded)="onChildrenLoaded()"
|
|
1872
1879
|
>
|
|
1873
|
-
|
|
1874
|
-
|
|
1880
|
+
</kendo-treeview>
|
|
1881
|
+
<!--footer template-->
|
|
1882
|
+
@if (footerTemplate) {
|
|
1875
1883
|
<ng-template
|
|
1876
|
-
*ngIf="footerTemplate"
|
|
1877
1884
|
[templateContext]="{
|
|
1878
1885
|
templateRef: footerTemplate?.templateRef
|
|
1879
1886
|
}">
|
|
1880
1887
|
</ng-template>
|
|
1881
|
-
|
|
1882
|
-
|
|
1883
|
-
|
|
1888
|
+
}
|
|
1889
|
+
<!--no-data template-->
|
|
1890
|
+
@if (!data || data?.length === 0 || allNodesHidden) {
|
|
1891
|
+
<div class="k-no-data">
|
|
1892
|
+
@if (noDataTemplate) {
|
|
1893
|
+
<ng-template
|
|
1884
1894
|
[templateContext]="{
|
|
1885
1895
|
templateRef: noDataTemplate?.templateRef
|
|
1886
1896
|
}">
|
|
1887
1897
|
</ng-template>
|
|
1888
|
-
|
|
1889
|
-
|
|
1890
|
-
</
|
|
1898
|
+
}
|
|
1899
|
+
@if (!noDataTemplate) {
|
|
1900
|
+
<div>{{ messageFor('noDataText') }}</div>
|
|
1901
|
+
}
|
|
1891
1902
|
</div>
|
|
1903
|
+
}
|
|
1892
1904
|
</ng-template>
|
|
1893
|
-
|
|
1894
|
-
|
|
1895
|
-
|
|
1905
|
+
|
|
1906
|
+
@if (isOpen || isAdaptiveModeEnabled) {
|
|
1907
|
+
<kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
|
|
1908
|
+
}
|
|
1909
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n [kendoDropDownListLocalizedMessages],\n [kendoDropDownTreeLocalizedMessages],\n [kendoComboBoxLocalizedMessages],\n [kendoMultiColumnComboBoxLocalizedMessages],\n [kendoAutoCompleteLocalizedMessages],\n [kendoMultiSelectLocalizedMessages],\n [kendoMultiSelectTreeLocalizedMessages]\n " }, { kind: "component", type: TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: CheckAllDirective, selector: "[checkAll]", inputs: ["lastAction", "treeview", "checkedItems", "valueField", "checkAll"], outputs: ["checkedItemsChange"] }, { kind: "component", type: TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "hasCheckbox", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }, { kind: "directive", type: CheckDirective, selector: "[kendoMultiSelectTreeCheckable]", inputs: ["checkable", "valueField", "checkedItems"], outputs: ["checkedItemsChange"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
|
|
1896
1910
|
}
|
|
1897
1911
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MultiSelectTreeComponent, decorators: [{
|
|
1898
1912
|
type: Component,
|
|
@@ -1930,224 +1944,238 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
1930
1944
|
selector: 'kendo-multiselecttree',
|
|
1931
1945
|
template: `
|
|
1932
1946
|
<ng-container kendoMultiSelectTreeLocalizedMessages
|
|
1933
|
-
|
|
1934
|
-
|
|
1935
|
-
|
|
1936
|
-
|
|
1937
|
-
|
|
1938
|
-
|
|
1939
|
-
|
|
1940
|
-
|
|
1941
|
-
|
|
1942
|
-
|
|
1943
|
-
|
|
1944
|
-
|
|
1945
|
-
|
|
1946
|
-
|
|
1947
|
-
|
|
1948
|
-
|
|
1949
|
-
|
|
1950
|
-
|
|
1951
|
-
|
|
1952
|
-
|
|
1953
|
-
|
|
1947
|
+
i18n-noDataText="kendo.multiselecttree.noDataText|The text displayed in the popup when there are no items"
|
|
1948
|
+
noDataText="NO DATA FOUND"
|
|
1949
|
+
|
|
1950
|
+
i18n-clearTitle="kendo.multiselecttree.clearTitle|The title of the clear button"
|
|
1951
|
+
clearTitle="clear"
|
|
1952
|
+
|
|
1953
|
+
i18n-checkAllText="kendo.multiselecttree.checkAllText|The text displayed for the check-all checkbox"
|
|
1954
|
+
checkAllText="Check all"
|
|
1955
|
+
|
|
1956
|
+
i18n-filterInputLabel="kendo.multiselecttree.filterInputLabel|The text set as aria-label on the filter input"
|
|
1957
|
+
filterInputLabel="Filter"
|
|
1958
|
+
|
|
1959
|
+
i18n-popupLabel="kendo.multiselecttree.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
|
|
1960
|
+
popupLabel="Options list"
|
|
1961
|
+
|
|
1962
|
+
i18n-adaptiveCloseButtonTitle="kendo.multiselecttree.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"
|
|
1963
|
+
adaptiveCloseButtonTitle="Close"
|
|
1964
|
+
|
|
1965
|
+
i18n-filterInputPlaceholder="kendo.multiselecttree.filterInputPlaceholder|The text for the input's placeholder when filtering is enabled"
|
|
1966
|
+
filterInputPlaceholder="Filter"
|
|
1967
|
+
>
|
|
1954
1968
|
</ng-container>
|
|
1955
1969
|
<kendo-taglist
|
|
1956
|
-
|
|
1957
|
-
|
|
1958
|
-
|
|
1959
|
-
|
|
1960
|
-
|
|
1961
|
-
|
|
1962
|
-
|
|
1963
|
-
|
|
1964
|
-
|
|
1965
|
-
|
|
1966
|
-
|
|
1967
|
-
|
|
1968
|
-
|
|
1969
|
-
|
|
1970
|
-
|
|
1971
|
-
|
|
1972
|
-
|
|
1970
|
+
class="k-input-values"
|
|
1971
|
+
[size]="size"
|
|
1972
|
+
[rounded]="rounded"
|
|
1973
|
+
[fillMode]="fillMode"
|
|
1974
|
+
[id]="tagListId"
|
|
1975
|
+
[tags]="tags"
|
|
1976
|
+
[focused]="focusedTagIndex"
|
|
1977
|
+
[textField]="textField"
|
|
1978
|
+
[valueField]="valueField"
|
|
1979
|
+
[valueDepth]="valueDepth"
|
|
1980
|
+
[disabled]="disabled"
|
|
1981
|
+
[tagPrefix]="tagPrefix"
|
|
1982
|
+
[template]="tagTemplate"
|
|
1983
|
+
[groupTemplate]="groupTagTemplate"
|
|
1984
|
+
[disabledIndices]="disabledIndices"
|
|
1985
|
+
(removeTag)="handleRemoveTag($event)"
|
|
1986
|
+
>
|
|
1973
1987
|
</kendo-taglist>
|
|
1974
1988
|
<span class="k-input-inner">
|
|
1989
|
+
@if (!tags || !tags.length) {
|
|
1975
1990
|
<span
|
|
1976
|
-
|
|
1977
|
-
|
|
1978
|
-
|
|
1979
|
-
{{ placeholder }}
|
|
1991
|
+
class="k-input-value-text"
|
|
1992
|
+
>
|
|
1993
|
+
{{ placeholder }}
|
|
1980
1994
|
</span>
|
|
1995
|
+
}
|
|
1981
1996
|
</span>
|
|
1982
|
-
|
|
1983
|
-
|
|
1997
|
+
@if (!disabled && !loading && !readonly && clearButton && tags?.length) {
|
|
1998
|
+
<span
|
|
1984
1999
|
class="k-clear-value"
|
|
1985
2000
|
[attr.title]="messageFor('clearTitle')"
|
|
1986
2001
|
role="button"
|
|
1987
2002
|
tabindex="-1"
|
|
1988
2003
|
(click)="clearAll($event)"
|
|
1989
|
-
>
|
|
1990
|
-
<kendo-icon-wrapper
|
|
1991
|
-
class="k-icon"
|
|
1992
|
-
name="x"
|
|
1993
|
-
[svgIcon]="xIcon"
|
|
1994
2004
|
>
|
|
2005
|
+
<kendo-icon-wrapper
|
|
2006
|
+
class="k-icon"
|
|
2007
|
+
name="x"
|
|
2008
|
+
[svgIcon]="xIcon"
|
|
2009
|
+
>
|
|
1995
2010
|
</kendo-icon-wrapper>
|
|
1996
|
-
|
|
1997
|
-
|
|
1998
|
-
|
|
2011
|
+
</span>
|
|
2012
|
+
}
|
|
2013
|
+
@if (loading) {
|
|
2014
|
+
<span
|
|
1999
2015
|
class="k-icon k-i-loading k-input-loading-icon"
|
|
2000
|
-
|
|
2001
|
-
|
|
2016
|
+
>
|
|
2017
|
+
</span>
|
|
2018
|
+
}
|
|
2002
2019
|
<ng-template #popupTemplate>
|
|
2003
|
-
|
|
2020
|
+
<ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
|
|
2004
2021
|
</ng-template>
|
|
2005
2022
|
<ng-container #container></ng-container>
|
|
2006
|
-
|
|
2023
|
+
|
|
2007
2024
|
<kendo-adaptive-renderer
|
|
2008
|
-
|
|
2009
|
-
|
|
2010
|
-
|
|
2011
|
-
|
|
2012
|
-
|
|
2013
|
-
|
|
2014
|
-
|
|
2015
|
-
|
|
2016
|
-
|
|
2025
|
+
[sharedPopupActionSheetTemplate]="sharedPopupActionSheetTemplate"
|
|
2026
|
+
[title]="adaptiveTitle"
|
|
2027
|
+
[showTextInput]="filterable"
|
|
2028
|
+
[subtitle]="adaptiveSubtitle"
|
|
2029
|
+
(closePopup)="togglePopup(false)"
|
|
2030
|
+
(textInputChange)="onFilterChange($event)"
|
|
2031
|
+
[searchBarValue]="filter"
|
|
2032
|
+
[placeholder]="placeholder"
|
|
2033
|
+
[filterable]="filterable">
|
|
2017
2034
|
</kendo-adaptive-renderer>
|
|
2018
|
-
|
|
2035
|
+
|
|
2019
2036
|
<ng-template #sharedPopupActionSheetTemplate>
|
|
2037
|
+
@if (filterable && !isActionSheetExpanded) {
|
|
2020
2038
|
<div
|
|
2021
|
-
|
|
2022
|
-
|
|
2023
|
-
|
|
2024
|
-
|
|
2025
|
-
|
|
2026
|
-
[ngClass]="filterInputClasses"
|
|
2039
|
+
class="k-list-filter"
|
|
2040
|
+
>
|
|
2041
|
+
<span
|
|
2042
|
+
class="k-textbox k-input"
|
|
2043
|
+
[ngClass]="filterInputClasses"
|
|
2027
2044
|
>
|
|
2028
|
-
|
|
2029
|
-
|
|
2030
|
-
|
|
2031
|
-
|
|
2032
|
-
|
|
2033
|
-
|
|
2034
|
-
|
|
2035
|
-
|
|
2036
|
-
|
|
2037
|
-
|
|
2038
|
-
|
|
2039
|
-
|
|
2040
|
-
|
|
2041
|
-
|
|
2042
|
-
|
|
2043
|
-
|
|
2044
|
-
|
|
2045
|
-
|
|
2046
|
-
|
|
2047
|
-
|
|
2045
|
+
<span class="k-input-prefix">
|
|
2046
|
+
<kendo-icon-wrapper
|
|
2047
|
+
class="k-icon"
|
|
2048
|
+
name="search"
|
|
2049
|
+
[svgIcon]="searchIcon"
|
|
2050
|
+
>
|
|
2051
|
+
</kendo-icon-wrapper>
|
|
2052
|
+
</span>
|
|
2053
|
+
<input
|
|
2054
|
+
#filterInput
|
|
2055
|
+
(input)="handleFilterInputChange($event.target)"
|
|
2056
|
+
[filterInput]="filterable && !touchEnabled"
|
|
2057
|
+
[attr.aria-label]="messageFor('filterInputLabel')"
|
|
2058
|
+
(keydown)="handleKeydown($event, filterInput)"
|
|
2059
|
+
[value]="filter"
|
|
2060
|
+
class="k-input-inner"
|
|
2061
|
+
role="searchbox"
|
|
2062
|
+
tabindex="0"
|
|
2063
|
+
aria-disabled="false"
|
|
2064
|
+
aria-readonly="false"
|
|
2048
2065
|
[kendoEventsOutsideAngular]="{
|
|
2049
2066
|
blur: handleBlur
|
|
2050
2067
|
}"
|
|
2051
|
-
|
|
2052
|
-
|
|
2053
|
-
|
|
2068
|
+
[scope]="this"
|
|
2069
|
+
>
|
|
2070
|
+
</span>
|
|
2054
2071
|
</div>
|
|
2055
|
-
|
|
2072
|
+
}
|
|
2073
|
+
<!--header template-->
|
|
2074
|
+
@if (headerTemplate) {
|
|
2056
2075
|
<ng-template
|
|
2057
|
-
*ngIf="headerTemplate"
|
|
2058
2076
|
[templateContext]="{
|
|
2059
2077
|
templateRef: headerTemplate?.templateRef
|
|
2060
2078
|
}">
|
|
2061
2079
|
</ng-template>
|
|
2062
|
-
|
|
2063
|
-
|
|
2064
|
-
|
|
2065
|
-
|
|
2066
|
-
|
|
2067
|
-
|
|
2068
|
-
|
|
2069
|
-
|
|
2070
|
-
|
|
2071
|
-
|
|
2072
|
-
|
|
2073
|
-
|
|
2074
|
-
|
|
2075
|
-
|
|
2076
|
-
|
|
2077
|
-
|
|
2078
|
-
|
|
2079
|
-
|
|
2080
|
+
}
|
|
2081
|
+
@if (checkAll) {
|
|
2082
|
+
<div class="k-check-all">
|
|
2083
|
+
<span class="k-checkbox-wrap">
|
|
2084
|
+
<input
|
|
2085
|
+
#checkAllInput
|
|
2086
|
+
[checkAll]="!filterable && !touchEnabled"
|
|
2087
|
+
type="checkbox"
|
|
2088
|
+
class="k-checkbox"
|
|
2089
|
+
[ngClass]="checkAllCheckboxClasses"
|
|
2090
|
+
role="checkbox"
|
|
2091
|
+
tabindex="0"
|
|
2092
|
+
aria-disabled="false"
|
|
2093
|
+
aria-readonly="false"
|
|
2094
|
+
[treeview]="treeview"
|
|
2095
|
+
[checkedItems]="checkedItems"
|
|
2096
|
+
[valueField]="valueField"
|
|
2097
|
+
[lastAction]="lastAction"
|
|
2098
|
+
(checkedItemsChange)="handleCheckedItemsChange($event)"
|
|
2099
|
+
(keydown)="handleKeydown($event)"
|
|
2080
2100
|
[kendoEventsOutsideAngular]="{
|
|
2081
2101
|
blur: handleBlur
|
|
2082
2102
|
}"
|
|
2083
|
-
|
|
2084
|
-
|
|
2085
|
-
|
|
2086
|
-
|
|
2087
|
-
|
|
2088
|
-
|
|
2089
|
-
|
|
2103
|
+
[scope]="this"
|
|
2104
|
+
>
|
|
2105
|
+
</span>
|
|
2106
|
+
<span
|
|
2107
|
+
class="k-checkbox-label"
|
|
2108
|
+
(click)="toggleCheckAll()"
|
|
2109
|
+
(mousedown)="$event.preventDefault()"
|
|
2090
2110
|
>
|
|
2091
|
-
|
|
2092
|
-
|
|
2111
|
+
{{ messageFor('checkAllText') }}
|
|
2112
|
+
</span>
|
|
2093
2113
|
</div>
|
|
2094
|
-
|
|
2095
|
-
|
|
2096
|
-
|
|
2097
|
-
|
|
2098
|
-
|
|
2099
|
-
|
|
2100
|
-
|
|
2101
|
-
|
|
2102
|
-
|
|
2103
|
-
|
|
2104
|
-
|
|
2105
|
-
|
|
2106
|
-
|
|
2107
|
-
|
|
2108
|
-
|
|
2109
|
-
|
|
2110
|
-
|
|
2111
|
-
|
|
2112
|
-
|
|
2113
|
-
|
|
2114
|
-
|
|
2115
|
-
|
|
2116
|
-
|
|
2117
|
-
|
|
2118
|
-
|
|
2119
|
-
|
|
2114
|
+
}
|
|
2115
|
+
<kendo-treeview
|
|
2116
|
+
#treeview
|
|
2117
|
+
[size]="windowSize !== 'large' ? 'large' : size"
|
|
2118
|
+
[attr.id]="treeViewId"
|
|
2119
|
+
[nodes]="data"
|
|
2120
|
+
[style.maxHeight.px]="listHeight"
|
|
2121
|
+
[animate]="false"
|
|
2122
|
+
kendoMultiSelectTreeCheckable
|
|
2123
|
+
[isHeterogeneous]="isHeterogeneous"
|
|
2124
|
+
[checkable]="checkableSettings"
|
|
2125
|
+
[checkedItems]="checkedItems"
|
|
2126
|
+
[valueField]="valueField"
|
|
2127
|
+
[textField]="textField"
|
|
2128
|
+
[children]="children"
|
|
2129
|
+
[hasChildren]="hasChildren"
|
|
2130
|
+
[isExpanded]="isNodeExpanded"
|
|
2131
|
+
[isDisabled]="itemDisabled"
|
|
2132
|
+
[nodeTemplate]="nodeTemplate"
|
|
2133
|
+
[loadOnDemand]="loadOnDemand"
|
|
2134
|
+
[filter]="filter"
|
|
2135
|
+
[isVisible]="isNodeVisible"
|
|
2136
|
+
(keydown)="handleKeydown($event)"
|
|
2137
|
+
(nodeClick)="handleNodeClick($event)"
|
|
2138
|
+
(expand)="nodeExpand.emit($event)"
|
|
2139
|
+
(collapse)="nodeCollapse.emit($event)"
|
|
2140
|
+
(checkedItemsChange)="handleCheckedItemsChange($event)"
|
|
2120
2141
|
[kendoEventsOutsideAngular]="{
|
|
2121
2142
|
focusout: handleBlur
|
|
2122
2143
|
}"
|
|
2123
|
-
|
|
2124
|
-
|
|
2144
|
+
[scope]="this"
|
|
2145
|
+
(childrenLoaded)="onChildrenLoaded()"
|
|
2125
2146
|
>
|
|
2126
|
-
|
|
2127
|
-
|
|
2147
|
+
</kendo-treeview>
|
|
2148
|
+
<!--footer template-->
|
|
2149
|
+
@if (footerTemplate) {
|
|
2128
2150
|
<ng-template
|
|
2129
|
-
*ngIf="footerTemplate"
|
|
2130
2151
|
[templateContext]="{
|
|
2131
2152
|
templateRef: footerTemplate?.templateRef
|
|
2132
2153
|
}">
|
|
2133
2154
|
</ng-template>
|
|
2134
|
-
|
|
2135
|
-
|
|
2136
|
-
|
|
2155
|
+
}
|
|
2156
|
+
<!--no-data template-->
|
|
2157
|
+
@if (!data || data?.length === 0 || allNodesHidden) {
|
|
2158
|
+
<div class="k-no-data">
|
|
2159
|
+
@if (noDataTemplate) {
|
|
2160
|
+
<ng-template
|
|
2137
2161
|
[templateContext]="{
|
|
2138
2162
|
templateRef: noDataTemplate?.templateRef
|
|
2139
2163
|
}">
|
|
2140
2164
|
</ng-template>
|
|
2141
|
-
|
|
2142
|
-
|
|
2143
|
-
</
|
|
2165
|
+
}
|
|
2166
|
+
@if (!noDataTemplate) {
|
|
2167
|
+
<div>{{ messageFor('noDataText') }}</div>
|
|
2168
|
+
}
|
|
2144
2169
|
</div>
|
|
2170
|
+
}
|
|
2145
2171
|
</ng-template>
|
|
2146
|
-
|
|
2147
|
-
|
|
2148
|
-
|
|
2172
|
+
|
|
2173
|
+
@if (isOpen || isAdaptiveModeEnabled) {
|
|
2174
|
+
<kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
|
|
2175
|
+
}
|
|
2176
|
+
`,
|
|
2149
2177
|
standalone: true,
|
|
2150
|
-
imports: [LocalizedMessagesDirective, TagListComponent,
|
|
2178
|
+
imports: [LocalizedMessagesDirective, TagListComponent, IconWrapperComponent, NgTemplateOutlet, AdaptiveRendererComponent, NgClass, FilterInputDirective, EventsOutsideAngularDirective, TemplateContextDirective, CheckAllDirective, TreeViewComponent, CheckDirective, ResizeSensorComponent]
|
|
2151
2179
|
}]
|
|
2152
2180
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i0.ElementRef }, { type: i1.PopupService }, { type: i0.Renderer2 }, { type: i2.NavigationService }, { type: i0.NgZone }, { type: i3.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i4.MultiSelectTreeLookupService }, { type: i5.AdaptiveService }], propDecorators: { hostClasses: [{
|
|
2153
2181
|
type: HostBinding,
|