@progress/kendo-angular-dropdowns 21.1.1-develop.2 → 21.2.0-develop.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/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
|
@@ -9,7 +9,7 @@ import { IconComponent } from '@progress/kendo-angular-icons';
|
|
|
9
9
|
import { checkIcon } from '@progress/kendo-svg-icons';
|
|
10
10
|
import { ActionSheetComponent, ActionSheetTemplateDirective } from '@progress/kendo-angular-navigation';
|
|
11
11
|
import { TextBoxComponent, TextBoxPrefixTemplateDirective } from '@progress/kendo-angular-inputs';
|
|
12
|
-
import {
|
|
12
|
+
import { NgTemplateOutlet } from '@angular/common';
|
|
13
13
|
import { ButtonComponent } from '@progress/kendo-angular-buttons';
|
|
14
14
|
import { AdaptiveService } from '@progress/kendo-angular-utils';
|
|
15
15
|
import * as i0 from "@angular/core";
|
|
@@ -66,11 +66,11 @@ export class AdaptiveRendererComponent {
|
|
|
66
66
|
return this.adaptiveService.size;
|
|
67
67
|
}
|
|
68
68
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AdaptiveRendererComponent, deps: [{ token: i1.LocalizationService }, { token: i2.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
|
|
69
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
69
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AdaptiveRendererComponent, isStandalone: true, selector: "kendo-adaptive-renderer", inputs: { title: "title", subtitle: "subtitle", showTextInput: "showTextInput", sharedPopupActionSheetTemplate: "sharedPopupActionSheetTemplate", text: "text", placeholder: "placeholder", searchBarValue: "searchBarValue", filterable: "filterable" }, outputs: { closePopup: "closePopup", textInputChange: "textInputChange", navigate: "navigate", onExpand: "onExpand" }, viewQueries: [{ propertyName: "actionSheet", first: true, predicate: ActionSheetComponent, descendants: true }, { propertyName: "actionSheetSearchBar", first: true, predicate: ["actionSheetSearchBar"], descendants: true }], ngImport: i0, template: `
|
|
70
70
|
<kendo-actionsheet
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
71
|
+
#actionSheet
|
|
72
|
+
[animation]="{ duration: animationDuration }"
|
|
73
|
+
[initialFocus]="false"
|
|
74
74
|
[cssClass]="{
|
|
75
75
|
'k-adaptive-actionsheet': true,
|
|
76
76
|
'k-actionsheet-fullscreen': windowSize === 'small',
|
|
@@ -79,58 +79,66 @@ export class AdaptiveRendererComponent {
|
|
|
79
79
|
[cssStyle]="{
|
|
80
80
|
height: windowSize === 'small' ? '100vh' : '60vh'
|
|
81
81
|
}"
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
icon="check"
|
|
98
|
-
type="button"
|
|
99
|
-
[attr.title]="messageFor('adaptiveCloseButtonTitle')"
|
|
100
|
-
[svgIcon]="checkIcon"
|
|
101
|
-
fillMode="flat"
|
|
102
|
-
themeColor="primary"
|
|
103
|
-
size="large"
|
|
104
|
-
[tabIndex]="-1"
|
|
105
|
-
innerCssClass="k-button-icon"
|
|
106
|
-
(click)="handleClose()"
|
|
107
|
-
></button>
|
|
108
|
-
</div>
|
|
109
|
-
</div>
|
|
110
|
-
<div class="k-actionsheet-titlebar-group k-actionsheet-filter" *ngIf="showTextInput">
|
|
111
|
-
<kendo-textbox
|
|
112
|
-
#actionSheetSearchBar
|
|
113
|
-
[value]="searchBarValue || ''"
|
|
114
|
-
size="large"
|
|
115
|
-
[placeholder]="filterable ? messageFor('filterInputPlaceholder') : placeholder"
|
|
116
|
-
class="k-searchbox"
|
|
117
|
-
autocomplete="off"
|
|
118
|
-
(valueChange)="onValueChange($event)"
|
|
119
|
-
>
|
|
120
|
-
<ng-template kendoTextBoxPrefixTemplate *ngIf="filterable">
|
|
121
|
-
<kendo-icon name="search"></kendo-icon>
|
|
122
|
-
</ng-template>
|
|
123
|
-
</kendo-textbox>
|
|
124
|
-
</div>
|
|
82
|
+
(overlayClick)="onOverlayClick()"
|
|
83
|
+
(keydown)="navigate.emit($event)"
|
|
84
|
+
(expand)="handleExpand()"
|
|
85
|
+
(collapse)="closePopup.emit()"
|
|
86
|
+
>
|
|
87
|
+
<ng-template kendoActionSheetTemplate>
|
|
88
|
+
<div class="k-text-center k-actionsheet-titlebar">
|
|
89
|
+
<div class="k-actionsheet-titlebar-group">
|
|
90
|
+
<div class="k-actionsheet-title">
|
|
91
|
+
@if (title) {
|
|
92
|
+
<div class="k-text-center">{{ title }}</div>
|
|
93
|
+
}
|
|
94
|
+
@if (subtitle) {
|
|
95
|
+
<div class="k-actionsheet-subtitle k-text-center">{{ subtitle }}</div>
|
|
96
|
+
}
|
|
125
97
|
</div>
|
|
126
|
-
<div class="k-actionsheet-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
98
|
+
<div class="k-actionsheet-actions">
|
|
99
|
+
<button
|
|
100
|
+
kendoButton
|
|
101
|
+
icon="check"
|
|
102
|
+
type="button"
|
|
103
|
+
[attr.title]="messageFor('adaptiveCloseButtonTitle')"
|
|
104
|
+
[svgIcon]="checkIcon"
|
|
105
|
+
fillMode="flat"
|
|
106
|
+
themeColor="primary"
|
|
107
|
+
size="large"
|
|
108
|
+
[tabIndex]="-1"
|
|
109
|
+
innerCssClass="k-button-icon"
|
|
110
|
+
(click)="handleClose()"
|
|
111
|
+
></button>
|
|
130
112
|
</div>
|
|
131
|
-
|
|
113
|
+
</div>
|
|
114
|
+
@if (showTextInput) {
|
|
115
|
+
<div class="k-actionsheet-titlebar-group k-actionsheet-filter">
|
|
116
|
+
<kendo-textbox
|
|
117
|
+
#actionSheetSearchBar
|
|
118
|
+
[value]="searchBarValue || ''"
|
|
119
|
+
size="large"
|
|
120
|
+
[placeholder]="filterable ? messageFor('filterInputPlaceholder') : placeholder"
|
|
121
|
+
class="k-searchbox"
|
|
122
|
+
autocomplete="off"
|
|
123
|
+
(valueChange)="onValueChange($event)"
|
|
124
|
+
>
|
|
125
|
+
@if (filterable) {
|
|
126
|
+
<ng-template kendoTextBoxPrefixTemplate>
|
|
127
|
+
<kendo-icon name="search"></kendo-icon>
|
|
128
|
+
</ng-template>
|
|
129
|
+
}
|
|
130
|
+
</kendo-textbox>
|
|
131
|
+
</div>
|
|
132
|
+
}
|
|
133
|
+
</div>
|
|
134
|
+
<div class="k-actionsheet-content">
|
|
135
|
+
<div class="k-list-container">
|
|
136
|
+
<ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
|
|
137
|
+
</div>
|
|
138
|
+
</div>
|
|
139
|
+
</ng-template>
|
|
132
140
|
</kendo-actionsheet>
|
|
133
|
-
|
|
141
|
+
`, isInline: true, dependencies: [{ kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId", "initialFocus"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]", inputs: ["showSeparator"] }, { kind: "component", type: IconComponent, selector: "kendo-icon", inputs: ["name"], exportAs: ["kendoIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
134
142
|
}
|
|
135
143
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AdaptiveRendererComponent, decorators: [{
|
|
136
144
|
type: Component,
|
|
@@ -138,9 +146,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
138
146
|
selector: 'kendo-adaptive-renderer',
|
|
139
147
|
template: `
|
|
140
148
|
<kendo-actionsheet
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
149
|
+
#actionSheet
|
|
150
|
+
[animation]="{ duration: animationDuration }"
|
|
151
|
+
[initialFocus]="false"
|
|
144
152
|
[cssClass]="{
|
|
145
153
|
'k-adaptive-actionsheet': true,
|
|
146
154
|
'k-actionsheet-fullscreen': windowSize === 'small',
|
|
@@ -149,60 +157,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
149
157
|
[cssStyle]="{
|
|
150
158
|
height: windowSize === 'small' ? '100vh' : '60vh'
|
|
151
159
|
}"
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
#actionSheetSearchBar
|
|
183
|
-
[value]="searchBarValue || ''"
|
|
184
|
-
size="large"
|
|
185
|
-
[placeholder]="filterable ? messageFor('filterInputPlaceholder') : placeholder"
|
|
186
|
-
class="k-searchbox"
|
|
187
|
-
autocomplete="off"
|
|
188
|
-
(valueChange)="onValueChange($event)"
|
|
189
|
-
>
|
|
190
|
-
<ng-template kendoTextBoxPrefixTemplate *ngIf="filterable">
|
|
191
|
-
<kendo-icon name="search"></kendo-icon>
|
|
192
|
-
</ng-template>
|
|
193
|
-
</kendo-textbox>
|
|
194
|
-
</div>
|
|
160
|
+
(overlayClick)="onOverlayClick()"
|
|
161
|
+
(keydown)="navigate.emit($event)"
|
|
162
|
+
(expand)="handleExpand()"
|
|
163
|
+
(collapse)="closePopup.emit()"
|
|
164
|
+
>
|
|
165
|
+
<ng-template kendoActionSheetTemplate>
|
|
166
|
+
<div class="k-text-center k-actionsheet-titlebar">
|
|
167
|
+
<div class="k-actionsheet-titlebar-group">
|
|
168
|
+
<div class="k-actionsheet-title">
|
|
169
|
+
@if (title) {
|
|
170
|
+
<div class="k-text-center">{{ title }}</div>
|
|
171
|
+
}
|
|
172
|
+
@if (subtitle) {
|
|
173
|
+
<div class="k-actionsheet-subtitle k-text-center">{{ subtitle }}</div>
|
|
174
|
+
}
|
|
175
|
+
</div>
|
|
176
|
+
<div class="k-actionsheet-actions">
|
|
177
|
+
<button
|
|
178
|
+
kendoButton
|
|
179
|
+
icon="check"
|
|
180
|
+
type="button"
|
|
181
|
+
[attr.title]="messageFor('adaptiveCloseButtonTitle')"
|
|
182
|
+
[svgIcon]="checkIcon"
|
|
183
|
+
fillMode="flat"
|
|
184
|
+
themeColor="primary"
|
|
185
|
+
size="large"
|
|
186
|
+
[tabIndex]="-1"
|
|
187
|
+
innerCssClass="k-button-icon"
|
|
188
|
+
(click)="handleClose()"
|
|
189
|
+
></button>
|
|
195
190
|
</div>
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
191
|
+
</div>
|
|
192
|
+
@if (showTextInput) {
|
|
193
|
+
<div class="k-actionsheet-titlebar-group k-actionsheet-filter">
|
|
194
|
+
<kendo-textbox
|
|
195
|
+
#actionSheetSearchBar
|
|
196
|
+
[value]="searchBarValue || ''"
|
|
197
|
+
size="large"
|
|
198
|
+
[placeholder]="filterable ? messageFor('filterInputPlaceholder') : placeholder"
|
|
199
|
+
class="k-searchbox"
|
|
200
|
+
autocomplete="off"
|
|
201
|
+
(valueChange)="onValueChange($event)"
|
|
202
|
+
>
|
|
203
|
+
@if (filterable) {
|
|
204
|
+
<ng-template kendoTextBoxPrefixTemplate>
|
|
205
|
+
<kendo-icon name="search"></kendo-icon>
|
|
206
|
+
</ng-template>
|
|
207
|
+
}
|
|
208
|
+
</kendo-textbox>
|
|
200
209
|
</div>
|
|
201
|
-
|
|
210
|
+
}
|
|
211
|
+
</div>
|
|
212
|
+
<div class="k-actionsheet-content">
|
|
213
|
+
<div class="k-list-container">
|
|
214
|
+
<ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
|
|
215
|
+
</div>
|
|
216
|
+
</div>
|
|
217
|
+
</ng-template>
|
|
202
218
|
</kendo-actionsheet>
|
|
203
|
-
|
|
219
|
+
`,
|
|
204
220
|
standalone: true,
|
|
205
|
-
imports: [ActionSheetComponent, ActionSheetTemplateDirective, ButtonComponent,
|
|
221
|
+
imports: [ActionSheetComponent, ActionSheetTemplateDirective, ButtonComponent, TextBoxComponent, TextBoxPrefixTemplateDirective, IconComponent, NgTemplateOutlet]
|
|
206
222
|
}]
|
|
207
223
|
}], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i2.AdaptiveService }], propDecorators: { title: [{
|
|
208
224
|
type: Input
|