@progress/kendo-angular-label 17.0.0-develop.9 → 17.0.1-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/README.md +32 -18
- package/{esm2020 → esm2022}/floating-label/floating-label-input-adapter.mjs +25 -19
- package/{esm2020 → esm2022}/floating-label/floating-label.component.mjs +77 -41
- package/{esm2020 → esm2022}/floating-label/floating-label.module.mjs +4 -4
- package/{esm2020 → esm2022}/label/label.component.mjs +54 -19
- package/{esm2020 → esm2022}/label.directive.mjs +33 -23
- package/{esm2020 → esm2022}/label.module.mjs +4 -4
- package/{esm2020 → esm2022}/localization/custom-messages.component.mjs +9 -8
- package/{esm2020 → esm2022}/localization/localized-messages.directive.mjs +9 -8
- package/{esm2020 → esm2022}/localization/messages.mjs +7 -3
- package/{esm2020 → esm2022}/package-metadata.mjs +2 -2
- package/{fesm2015 → fesm2022}/progress-kendo-angular-label.mjs +224 -131
- package/floating-label/floating-label.component.d.ts +1 -1
- package/floating-label/models/label-position.d.ts +1 -1
- package/label/label.component.d.ts +1 -1
- package/label.directive.d.ts +1 -1
- package/localization/messages.d.ts +1 -1
- package/package.json +13 -19
- package/fesm2020/progress-kendo-angular-label.mjs +0 -900
- /package/{esm2020 → esm2022}/directives.mjs +0 -0
- /package/{esm2020 → esm2022}/floating-label/models/label-position.mjs +0 -0
- /package/{esm2020 → esm2022}/index.mjs +0 -0
- /package/{esm2020 → esm2022}/progress-kendo-angular-label.mjs +0 -0
- /package/{esm2020 → esm2022}/util.mjs +0 -0
|
@@ -1,900 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2024 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import * as i0 from '@angular/core';
|
|
6
|
-
import { Directive, Input, HostBinding, EventEmitter, forwardRef, isDevMode, Component, Output, ContentChild, ViewChild, NgModule } from '@angular/core';
|
|
7
|
-
import { isDocumentAvailable, guid, hasObservers, KendoInput } from '@progress/kendo-angular-common';
|
|
8
|
-
import * as i1 from '@progress/kendo-angular-l10n';
|
|
9
|
-
import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
|
|
10
|
-
import { NgControl } from '@angular/forms';
|
|
11
|
-
import { validatePackage } from '@progress/kendo-licensing';
|
|
12
|
-
import { Observable, Subscription } from 'rxjs';
|
|
13
|
-
import { NgIf, NgClass, NgStyle } from '@angular/common';
|
|
14
|
-
|
|
15
|
-
/**
|
|
16
|
-
* @hidden
|
|
17
|
-
*/
|
|
18
|
-
const isInputElement = (component) => component instanceof HTMLElement;
|
|
19
|
-
/**
|
|
20
|
-
* @hidden
|
|
21
|
-
*/
|
|
22
|
-
const inputElementHasAttr = (element, attribute) => element.hasAttribute(attribute);
|
|
23
|
-
/**
|
|
24
|
-
* @hidden
|
|
25
|
-
*/
|
|
26
|
-
const getWrappedNativeInput = (element) => element.querySelector('kendo-label > input, kendo-label > textarea, kendo-label > select');
|
|
27
|
-
/**
|
|
28
|
-
* @hidden
|
|
29
|
-
*/
|
|
30
|
-
const getRootElement = (element) => {
|
|
31
|
-
if (!element) {
|
|
32
|
-
return null;
|
|
33
|
-
}
|
|
34
|
-
let rootElement = element;
|
|
35
|
-
while (rootElement.parentElement) {
|
|
36
|
-
rootElement = rootElement.parentElement;
|
|
37
|
-
}
|
|
38
|
-
return rootElement;
|
|
39
|
-
};
|
|
40
|
-
/**
|
|
41
|
-
* @hidden
|
|
42
|
-
*/
|
|
43
|
-
const nativeLabelForTargets = ['BUTTON', 'INPUT', 'METER', 'OUTPUT', 'PROGRESS', 'SELECT', 'TEXTAREA']; // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
|
|
44
|
-
|
|
45
|
-
/**
|
|
46
|
-
* Represents the [Kendo UI Label directive for Angular]({% slug overview_label %}).
|
|
47
|
-
* The Label associates a focusable Angular component or an HTML element
|
|
48
|
-
* with a `label` tag by using the `[for]` property binding.
|
|
49
|
-
*
|
|
50
|
-
* To associate a component by using the `label` element, either:
|
|
51
|
-
* * Set the `[for]` property binding to a
|
|
52
|
-
* [template reference variable](link:site.data.urls.angular['templatesyntax']#template-reference-variables--var-), or
|
|
53
|
-
* * Set the `[for]` property binding to an `id` HTML string value.
|
|
54
|
-
*
|
|
55
|
-
* @example
|
|
56
|
-
* ```ts
|
|
57
|
-
* _@Component({
|
|
58
|
-
* selector: 'my-app',
|
|
59
|
-
* template: `
|
|
60
|
-
* <div class="row example-wrapper" style="min-height: 450px;">
|
|
61
|
-
* <div class="col-xs-12 col-md-6 example-col">
|
|
62
|
-
* <label [for]="datepicker">DatePicker: </label>
|
|
63
|
-
* <kendo-datepicker #datepicker></kendo-datepicker>
|
|
64
|
-
* </div>
|
|
65
|
-
*
|
|
66
|
-
* <div class="col-xs-12 col-md-6 example-col">
|
|
67
|
-
* <label for="input">Input: </label>
|
|
68
|
-
* <input id="input" />
|
|
69
|
-
* </div>
|
|
70
|
-
* </div>
|
|
71
|
-
* `
|
|
72
|
-
* })
|
|
73
|
-
* class AppComponent { }
|
|
74
|
-
* ```
|
|
75
|
-
*/
|
|
76
|
-
class LabelDirective {
|
|
77
|
-
constructor(label, renderer, zone) {
|
|
78
|
-
this.label = label;
|
|
79
|
-
this.renderer = renderer;
|
|
80
|
-
this.zone = zone;
|
|
81
|
-
/**
|
|
82
|
-
* @hidden
|
|
83
|
-
*
|
|
84
|
-
* Allows the user to specify if the label CSS class should be rendered or not.
|
|
85
|
-
*/
|
|
86
|
-
this.labelClass = true;
|
|
87
|
-
this.handleClick = () => {
|
|
88
|
-
const component = this.getFocusableComponent();
|
|
89
|
-
if (!component) {
|
|
90
|
-
return;
|
|
91
|
-
}
|
|
92
|
-
if (component.focus) {
|
|
93
|
-
component.focus();
|
|
94
|
-
}
|
|
95
|
-
};
|
|
96
|
-
}
|
|
97
|
-
get labelFor() {
|
|
98
|
-
if (typeof this.for === 'string') {
|
|
99
|
-
return this.for;
|
|
100
|
-
}
|
|
101
|
-
if (!isDocumentAvailable()) {
|
|
102
|
-
return null;
|
|
103
|
-
}
|
|
104
|
-
const component = this.getFocusableComponent() || {};
|
|
105
|
-
if (isInputElement(component) && !inputElementHasAttr(component, 'id')) {
|
|
106
|
-
this.renderer.setAttribute(component, 'id', `k-${guid()}`);
|
|
107
|
-
}
|
|
108
|
-
return component.focusableId || component.id || null;
|
|
109
|
-
}
|
|
110
|
-
/**
|
|
111
|
-
* @hidden
|
|
112
|
-
*/
|
|
113
|
-
ngAfterViewInit() {
|
|
114
|
-
this.setAriaLabelledby();
|
|
115
|
-
this.zone.runOutsideAngular(() => this.clickListener = this.renderer.listen(this.label.nativeElement, 'click', this.handleClick));
|
|
116
|
-
}
|
|
117
|
-
/**
|
|
118
|
-
* @hidden
|
|
119
|
-
*/
|
|
120
|
-
ngOnDestroy() {
|
|
121
|
-
if (this.clickListener) {
|
|
122
|
-
this.clickListener();
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
/**
|
|
126
|
-
* @hidden
|
|
127
|
-
*/
|
|
128
|
-
setAriaLabelledby() {
|
|
129
|
-
if (!isDocumentAvailable()) {
|
|
130
|
-
return;
|
|
131
|
-
}
|
|
132
|
-
const component = this.getFocusableComponent();
|
|
133
|
-
if (component && component.focusableId) {
|
|
134
|
-
const rootElement = getRootElement(this.label.nativeElement);
|
|
135
|
-
const labelTarget = rootElement.querySelector(`#${component.focusableId}`);
|
|
136
|
-
const labelElement = this.label.nativeElement;
|
|
137
|
-
const id = labelElement.id || `k-${guid()}`;
|
|
138
|
-
if (!labelElement.getAttribute('id')) {
|
|
139
|
-
this.renderer.setAttribute(labelElement, 'id', id);
|
|
140
|
-
}
|
|
141
|
-
// Editor in iframe mode needs special treatment
|
|
142
|
-
if (component.focusableId.startsWith('k-editor') && component.iframe) {
|
|
143
|
-
component.contentAreaLoaded.subscribe(() => {
|
|
144
|
-
this.zone.runOutsideAngular(() => {
|
|
145
|
-
setTimeout(() => {
|
|
146
|
-
const editableElement = component.container.element.nativeElement.contentDocument.body.firstElementChild;
|
|
147
|
-
this.renderer.setAttribute(editableElement, 'aria-label', labelElement.textContent);
|
|
148
|
-
});
|
|
149
|
-
});
|
|
150
|
-
});
|
|
151
|
-
}
|
|
152
|
-
if (!labelTarget) {
|
|
153
|
-
return;
|
|
154
|
-
}
|
|
155
|
-
const existingAriaLabelledBy = labelTarget.hasAttribute('aria-labelledby') && labelTarget.getAttribute('aria-labelledby');
|
|
156
|
-
// DropDowns with focusable input elements rely on the aria-labelledby attribute to set the same attribute on their popup listbox element
|
|
157
|
-
// On the other hand, the aria-labelledby attribute is redundant on the Input element when there is label[for] association -
|
|
158
|
-
// https://feedback.telerik.com/kendo-angular-ui/1648203-remove-aria-labelledby-when-native-html-elements-are-associated.
|
|
159
|
-
// This addresses both cases, setting a special data-kendo-label-id attribute to be used internally by other components when the aria-describedby one is not applicable.
|
|
160
|
-
this.renderer.setAttribute(labelTarget, nativeLabelForTargets.includes(labelTarget.tagName) ? 'data-kendo-label-id' : 'aria-labelledby', existingAriaLabelledBy && existingAriaLabelledBy !== id ? `${existingAriaLabelledBy} ${id}` : id);
|
|
161
|
-
}
|
|
162
|
-
}
|
|
163
|
-
getFocusableComponent() {
|
|
164
|
-
const target = this.for;
|
|
165
|
-
return target && target.focus !== undefined ? target : null;
|
|
166
|
-
}
|
|
167
|
-
}
|
|
168
|
-
LabelDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LabelDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
|
|
169
|
-
LabelDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LabelDirective, isStandalone: true, selector: "label[for]", inputs: { for: "for", labelClass: "labelClass" }, host: { properties: { "attr.for": "this.labelFor", "class.k-label": "this.labelClass" } }, ngImport: i0 });
|
|
170
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LabelDirective, decorators: [{
|
|
171
|
-
type: Directive,
|
|
172
|
-
args: [{
|
|
173
|
-
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
174
|
-
selector: 'label[for]',
|
|
175
|
-
standalone: true
|
|
176
|
-
}]
|
|
177
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { for: [{
|
|
178
|
-
type: Input
|
|
179
|
-
}], labelFor: [{
|
|
180
|
-
type: HostBinding,
|
|
181
|
-
args: ['attr.for']
|
|
182
|
-
}], labelClass: [{
|
|
183
|
-
type: Input
|
|
184
|
-
}, {
|
|
185
|
-
type: HostBinding,
|
|
186
|
-
args: ['class.k-label']
|
|
187
|
-
}] } });
|
|
188
|
-
|
|
189
|
-
/**
|
|
190
|
-
* @hidden
|
|
191
|
-
*/
|
|
192
|
-
const packageMetadata = {
|
|
193
|
-
name: '@progress/kendo-angular-label',
|
|
194
|
-
productName: 'Kendo UI for Angular',
|
|
195
|
-
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
196
|
-
publishDate: 1729174447,
|
|
197
|
-
version: '17.0.0-develop.9',
|
|
198
|
-
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
199
|
-
};
|
|
200
|
-
|
|
201
|
-
/**
|
|
202
|
-
* @hidden
|
|
203
|
-
*/
|
|
204
|
-
class FloatingLabelInputAdapter {
|
|
205
|
-
constructor(component, formControl) {
|
|
206
|
-
this.component = component;
|
|
207
|
-
const isObservableOrEventEmitter = (event) => event instanceof Observable || event instanceof EventEmitter;
|
|
208
|
-
if (isObservableOrEventEmitter(component.onFocus)) {
|
|
209
|
-
this.onFocus = component.onFocus;
|
|
210
|
-
}
|
|
211
|
-
if (isObservableOrEventEmitter(component.autoFillStart)) {
|
|
212
|
-
this.autoFillStart = component.autoFillStart;
|
|
213
|
-
}
|
|
214
|
-
if (isObservableOrEventEmitter(component.autoFillEnd)) {
|
|
215
|
-
this.autoFillEnd = component.autoFillEnd;
|
|
216
|
-
}
|
|
217
|
-
if (isObservableOrEventEmitter(component.onBlur)) {
|
|
218
|
-
this.onBlur = component.onBlur;
|
|
219
|
-
}
|
|
220
|
-
if (formControl) {
|
|
221
|
-
this.onValueChange = formControl.valueChanges;
|
|
222
|
-
}
|
|
223
|
-
else if (component.valueChange) {
|
|
224
|
-
this.onValueChange = component.valueChange;
|
|
225
|
-
}
|
|
226
|
-
}
|
|
227
|
-
get focusableId() {
|
|
228
|
-
const component = this.component;
|
|
229
|
-
if ('focusableId' in component) {
|
|
230
|
-
return component.focusableId;
|
|
231
|
-
}
|
|
232
|
-
else if ('id' in component) {
|
|
233
|
-
return component.id;
|
|
234
|
-
}
|
|
235
|
-
return "";
|
|
236
|
-
}
|
|
237
|
-
set focusableId(value) {
|
|
238
|
-
const component = this.component;
|
|
239
|
-
if ('focusableId' in component) {
|
|
240
|
-
component.focusableId = value;
|
|
241
|
-
}
|
|
242
|
-
else if ('id' in component) {
|
|
243
|
-
component.id = value;
|
|
244
|
-
}
|
|
245
|
-
}
|
|
246
|
-
}
|
|
247
|
-
|
|
248
|
-
/**
|
|
249
|
-
* @hidden
|
|
250
|
-
*/
|
|
251
|
-
class Messages extends ComponentMessages {
|
|
252
|
-
}
|
|
253
|
-
Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
254
|
-
Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: Messages, selector: "kendo-label-messages-base", inputs: { optional: "optional" }, usesInheritance: true, ngImport: i0 });
|
|
255
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: Messages, decorators: [{
|
|
256
|
-
type: Directive,
|
|
257
|
-
args: [{
|
|
258
|
-
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
259
|
-
selector: 'kendo-label-messages-base'
|
|
260
|
-
}]
|
|
261
|
-
}], propDecorators: { optional: [{
|
|
262
|
-
type: Input
|
|
263
|
-
}] } });
|
|
264
|
-
|
|
265
|
-
/**
|
|
266
|
-
* @hidden
|
|
267
|
-
*/
|
|
268
|
-
class LocalizedMessagesDirective extends Messages {
|
|
269
|
-
constructor(service) {
|
|
270
|
-
super();
|
|
271
|
-
this.service = service;
|
|
272
|
-
}
|
|
273
|
-
}
|
|
274
|
-
LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
|
|
275
|
-
LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LocalizedMessagesDirective, isStandalone: true, selector: "\n [kendoLabelLocalizedMessages],\n [kendoFloatingLabelLocalizedMessages]\n ", providers: [
|
|
276
|
-
{
|
|
277
|
-
provide: Messages,
|
|
278
|
-
useExisting: forwardRef(() => LocalizedMessagesDirective)
|
|
279
|
-
}
|
|
280
|
-
], usesInheritance: true, ngImport: i0 });
|
|
281
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
|
|
282
|
-
type: Directive,
|
|
283
|
-
args: [{
|
|
284
|
-
providers: [
|
|
285
|
-
{
|
|
286
|
-
provide: Messages,
|
|
287
|
-
useExisting: forwardRef(() => LocalizedMessagesDirective)
|
|
288
|
-
}
|
|
289
|
-
],
|
|
290
|
-
selector: `
|
|
291
|
-
[kendoLabelLocalizedMessages],
|
|
292
|
-
[kendoFloatingLabelLocalizedMessages]
|
|
293
|
-
`,
|
|
294
|
-
standalone: true
|
|
295
|
-
}]
|
|
296
|
-
}], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
|
|
297
|
-
|
|
298
|
-
const isFunction = (x) => Object.prototype.toString.call(x) === '[object Function]';
|
|
299
|
-
/**
|
|
300
|
-
* Represents the [Kendo UI FloatingLabel component for Angular]({% slug overview_floatinglabel %}).
|
|
301
|
-
* Provides floating labels to `input` elements.
|
|
302
|
-
*
|
|
303
|
-
* The FloatingLabel supports both Template and Reactive Forms and
|
|
304
|
-
* [can contain Kendo UI for Angular Input components such as `kendo-combobox` and `kendo-numerictextbox`,
|
|
305
|
-
* or `kendo-textbox`](slug:associate_floatinglabel).
|
|
306
|
-
*
|
|
307
|
-
* @example
|
|
308
|
-
* ```html
|
|
309
|
-
* <kendo-floatinglabel text="First name">
|
|
310
|
-
* <kendo-textbox [(ngModel)]="name"></kendo-textbox>
|
|
311
|
-
* </kendo-floatinglabel>
|
|
312
|
-
* ```
|
|
313
|
-
*/
|
|
314
|
-
class FloatingLabelComponent {
|
|
315
|
-
constructor(elementRef, renderer, changeDetectorRef, localization) {
|
|
316
|
-
this.elementRef = elementRef;
|
|
317
|
-
this.renderer = renderer;
|
|
318
|
-
this.changeDetectorRef = changeDetectorRef;
|
|
319
|
-
this.localization = localization;
|
|
320
|
-
this.hostClasses = true;
|
|
321
|
-
/**
|
|
322
|
-
* Fires after the floating label position is changed.
|
|
323
|
-
*/
|
|
324
|
-
this.positionChange = new EventEmitter();
|
|
325
|
-
/**
|
|
326
|
-
* @hidden
|
|
327
|
-
*/
|
|
328
|
-
this.focused = false;
|
|
329
|
-
/**
|
|
330
|
-
* @hidden
|
|
331
|
-
*/
|
|
332
|
-
this.empty = true;
|
|
333
|
-
/**
|
|
334
|
-
* @hidden
|
|
335
|
-
*/
|
|
336
|
-
this.invalid = false;
|
|
337
|
-
/**
|
|
338
|
-
* @hidden
|
|
339
|
-
*/
|
|
340
|
-
this.labelId = `k-${guid()}`;
|
|
341
|
-
this.autoFillStarted = false;
|
|
342
|
-
validatePackage(packageMetadata);
|
|
343
|
-
this.direction = localization.rtl ? 'rtl' : 'ltr';
|
|
344
|
-
this.renderer.removeAttribute(this.elementRef.nativeElement, "id");
|
|
345
|
-
}
|
|
346
|
-
/**
|
|
347
|
-
* Represents the current floating label position.
|
|
348
|
-
*/
|
|
349
|
-
get labelPosition() {
|
|
350
|
-
if (!this.empty) {
|
|
351
|
-
return 'Out';
|
|
352
|
-
}
|
|
353
|
-
return this.focused ? 'Out' : 'In';
|
|
354
|
-
}
|
|
355
|
-
get focusedClass() {
|
|
356
|
-
return this.focused;
|
|
357
|
-
}
|
|
358
|
-
get invalidClass() {
|
|
359
|
-
return this.invalid;
|
|
360
|
-
}
|
|
361
|
-
/**
|
|
362
|
-
* @hidden
|
|
363
|
-
*/
|
|
364
|
-
ngAfterContentInit() {
|
|
365
|
-
if (!isDocumentAvailable()) {
|
|
366
|
-
return;
|
|
367
|
-
}
|
|
368
|
-
this.validateSetup();
|
|
369
|
-
const control = new FloatingLabelInputAdapter(this.kendoInput || this.formControl.valueAccessor, this.formControl);
|
|
370
|
-
this.addHandlers(control);
|
|
371
|
-
this.setLabelFor(control);
|
|
372
|
-
}
|
|
373
|
-
ngAfterViewInit() {
|
|
374
|
-
if (this.kendoInput) {
|
|
375
|
-
this.setAriaLabelledby(this.kendoInput);
|
|
376
|
-
}
|
|
377
|
-
}
|
|
378
|
-
/**
|
|
379
|
-
* @hidden
|
|
380
|
-
*/
|
|
381
|
-
ngOnDestroy() {
|
|
382
|
-
if (this.subscription) {
|
|
383
|
-
this.subscription.unsubscribe();
|
|
384
|
-
}
|
|
385
|
-
}
|
|
386
|
-
/**
|
|
387
|
-
* @hidden
|
|
388
|
-
*/
|
|
389
|
-
textFor(key) {
|
|
390
|
-
return this.localization.get(key);
|
|
391
|
-
}
|
|
392
|
-
subscribe(control, eventName, handler) {
|
|
393
|
-
if (control[eventName] instanceof EventEmitter) {
|
|
394
|
-
const subscription = control[eventName].subscribe(handler);
|
|
395
|
-
if (!this.subscription) {
|
|
396
|
-
this.subscription = subscription;
|
|
397
|
-
}
|
|
398
|
-
else {
|
|
399
|
-
this.subscription.add(subscription);
|
|
400
|
-
}
|
|
401
|
-
}
|
|
402
|
-
}
|
|
403
|
-
updateState() {
|
|
404
|
-
const empty = value => {
|
|
405
|
-
// zero is not an empty value (e.g., NumericTextBox)
|
|
406
|
-
if (value === 0 || value === false) {
|
|
407
|
-
return false;
|
|
408
|
-
}
|
|
409
|
-
// empty arrays are an empty value (e.g., MultiSelect)
|
|
410
|
-
if (Array.isArray(value) && !value.length) {
|
|
411
|
-
return true;
|
|
412
|
-
}
|
|
413
|
-
return !value;
|
|
414
|
-
};
|
|
415
|
-
const formControl = this.formControl;
|
|
416
|
-
if (formControl) {
|
|
417
|
-
const valueAccessor = formControl.valueAccessor;
|
|
418
|
-
if (isFunction(valueAccessor.isEmpty)) {
|
|
419
|
-
this.empty = valueAccessor.isEmpty();
|
|
420
|
-
}
|
|
421
|
-
else {
|
|
422
|
-
this.empty = empty(formControl.value);
|
|
423
|
-
}
|
|
424
|
-
this.invalid = formControl.invalid && (formControl.touched || formControl.dirty);
|
|
425
|
-
}
|
|
426
|
-
else {
|
|
427
|
-
this.empty = isFunction(this.kendoInput.isEmpty) ?
|
|
428
|
-
this.kendoInput.isEmpty() : empty(this.kendoInput.value);
|
|
429
|
-
}
|
|
430
|
-
if (this.empty) {
|
|
431
|
-
this.renderer.addClass(this.elementRef.nativeElement, 'k-empty');
|
|
432
|
-
}
|
|
433
|
-
else {
|
|
434
|
-
this.renderer.removeClass(this.elementRef.nativeElement, 'k-empty');
|
|
435
|
-
}
|
|
436
|
-
this.changeDetectorRef.markForCheck();
|
|
437
|
-
}
|
|
438
|
-
setAriaLabelledby(component) {
|
|
439
|
-
const componentId = component.focusableId || component.id;
|
|
440
|
-
if (componentId) {
|
|
441
|
-
const focusableElement = this.elementRef.nativeElement.querySelector(`#${componentId}`);
|
|
442
|
-
if (!focusableElement) {
|
|
443
|
-
return;
|
|
444
|
-
}
|
|
445
|
-
const existingAriaLabelledBy = focusableElement.hasAttribute('aria-labelledby') && focusableElement.getAttribute('aria-labelledby');
|
|
446
|
-
// DropDowns with focusable input elements rely on the aria-labelledby attribute to set the same attribute on their popup listbox element.
|
|
447
|
-
// On the other hand, the aria-labelledby attribute is redundant on the Input element when there is label[for] association -
|
|
448
|
-
// https://feedback.telerik.com/kendo-angular-ui/1648203-remove-aria-labelledby-when-native-html-elements-are-associated.
|
|
449
|
-
// This addresses both cases, setting a special data-kendo-label-id attribute to be used internally by other components when the aria-describedby one is not applicable.
|
|
450
|
-
this.renderer.setAttribute(focusableElement, nativeLabelForTargets.includes(focusableElement.tagName) ?
|
|
451
|
-
'data-kendo-label-id' : 'aria-labelledby', existingAriaLabelledBy && existingAriaLabelledBy !== this.labelId ? `${existingAriaLabelledBy} ${this.labelId}` : this.labelId);
|
|
452
|
-
}
|
|
453
|
-
}
|
|
454
|
-
setLabelFor(control) {
|
|
455
|
-
const controlId = control.focusableId || control.id;
|
|
456
|
-
if (this.id && controlId) {
|
|
457
|
-
// input wins
|
|
458
|
-
this.id = controlId;
|
|
459
|
-
}
|
|
460
|
-
else if (this.id) {
|
|
461
|
-
control.focusableId = this.id;
|
|
462
|
-
}
|
|
463
|
-
else if (controlId) {
|
|
464
|
-
this.id = controlId;
|
|
465
|
-
}
|
|
466
|
-
else {
|
|
467
|
-
const id = `k-${guid()}`;
|
|
468
|
-
control.focusableId = id;
|
|
469
|
-
this.id = id;
|
|
470
|
-
}
|
|
471
|
-
}
|
|
472
|
-
handleAutofill(control) {
|
|
473
|
-
this.subscribe(control, 'autoFillStart', () => {
|
|
474
|
-
this.autoFillStarted = true;
|
|
475
|
-
this.renderer.removeClass(this.elementRef.nativeElement, 'k-empty');
|
|
476
|
-
});
|
|
477
|
-
this.subscribe(control, 'autoFillEnd', () => {
|
|
478
|
-
if (this.autoFillStarted) {
|
|
479
|
-
this.autoFillStarted = false;
|
|
480
|
-
if (this.empty) {
|
|
481
|
-
this.renderer.addClass(this.elementRef.nativeElement, 'k-empty');
|
|
482
|
-
}
|
|
483
|
-
}
|
|
484
|
-
});
|
|
485
|
-
}
|
|
486
|
-
addHandlers(control) {
|
|
487
|
-
const setFocus = (isFocused) => () => {
|
|
488
|
-
this.focused = isFocused;
|
|
489
|
-
this.updateState();
|
|
490
|
-
if (!this.empty) {
|
|
491
|
-
return;
|
|
492
|
-
}
|
|
493
|
-
if (hasObservers(this.positionChange)) {
|
|
494
|
-
this.positionChange.emit(isFocused ? 'Out' : 'In');
|
|
495
|
-
}
|
|
496
|
-
};
|
|
497
|
-
this.subscribe(control, 'onFocus', setFocus(true));
|
|
498
|
-
this.subscribe(control, 'onBlur', setFocus(false));
|
|
499
|
-
this.handleAutofill(control);
|
|
500
|
-
const updateState = () => this.updateState();
|
|
501
|
-
updateState();
|
|
502
|
-
this.subscribe(control, 'onValueChange', updateState);
|
|
503
|
-
}
|
|
504
|
-
validateSetup() {
|
|
505
|
-
if (!this.formControl && !this.kendoInput) {
|
|
506
|
-
if (isDevMode()) {
|
|
507
|
-
throw new Error("The FloatingLabelComponent requires a Kendo Input component" +
|
|
508
|
-
" or a forms-bound component to function properly.");
|
|
509
|
-
}
|
|
510
|
-
return;
|
|
511
|
-
}
|
|
512
|
-
}
|
|
513
|
-
}
|
|
514
|
-
FloatingLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FloatingLabelComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
515
|
-
FloatingLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FloatingLabelComponent, isStandalone: true, selector: "kendo-floatinglabel", inputs: { labelCssStyle: "labelCssStyle", labelCssClass: "labelCssClass", id: "id", text: "text", optional: "optional" }, outputs: { positionChange: "positionChange" }, host: { properties: { "class.k-floating-label-container": "this.hostClasses", "class.k-focus": "this.focusedClass", "class.k-invalid": "this.invalidClass", "attr.dir": "this.direction" } }, providers: [
|
|
516
|
-
LocalizationService,
|
|
517
|
-
{
|
|
518
|
-
provide: L10N_PREFIX,
|
|
519
|
-
useValue: 'kendo.floatinglabel'
|
|
520
|
-
}
|
|
521
|
-
], queries: [{ propertyName: "kendoInput", first: true, predicate: KendoInput, descendants: true }, { propertyName: "formControl", first: true, predicate: NgControl, descendants: true }], exportAs: ["kendoFloatingLabel"], ngImport: i0, template: `
|
|
522
|
-
<ng-container kendoFloatingLabelLocalizedMessages
|
|
523
|
-
i18n-optional="kendo.floatinglabel.optional|The text for the optional segment of a FloatingLabel component"
|
|
524
|
-
optional="Optional"
|
|
525
|
-
>
|
|
526
|
-
</ng-container>
|
|
527
|
-
<ng-content></ng-content>
|
|
528
|
-
<label *ngIf="text" [ngClass]="labelCssClass" [ngStyle]="labelCssStyle" [for]="id" [attr.id]="labelId" class="k-floating-label">
|
|
529
|
-
{{ text }}<span *ngIf="optional" class="k-label-optional">({{textFor('optional')}})</span>
|
|
530
|
-
</label>
|
|
531
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n [kendoLabelLocalizedMessages],\n [kendoFloatingLabelLocalizedMessages]\n " }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
532
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FloatingLabelComponent, decorators: [{
|
|
533
|
-
type: Component,
|
|
534
|
-
args: [{
|
|
535
|
-
selector: 'kendo-floatinglabel',
|
|
536
|
-
exportAs: 'kendoFloatingLabel',
|
|
537
|
-
providers: [
|
|
538
|
-
LocalizationService,
|
|
539
|
-
{
|
|
540
|
-
provide: L10N_PREFIX,
|
|
541
|
-
useValue: 'kendo.floatinglabel'
|
|
542
|
-
}
|
|
543
|
-
],
|
|
544
|
-
template: `
|
|
545
|
-
<ng-container kendoFloatingLabelLocalizedMessages
|
|
546
|
-
i18n-optional="kendo.floatinglabel.optional|The text for the optional segment of a FloatingLabel component"
|
|
547
|
-
optional="Optional"
|
|
548
|
-
>
|
|
549
|
-
</ng-container>
|
|
550
|
-
<ng-content></ng-content>
|
|
551
|
-
<label *ngIf="text" [ngClass]="labelCssClass" [ngStyle]="labelCssStyle" [for]="id" [attr.id]="labelId" class="k-floating-label">
|
|
552
|
-
{{ text }}<span *ngIf="optional" class="k-label-optional">({{textFor('optional')}})</span>
|
|
553
|
-
</label>
|
|
554
|
-
`,
|
|
555
|
-
standalone: true,
|
|
556
|
-
imports: [LocalizedMessagesDirective, NgIf, NgClass, NgStyle]
|
|
557
|
-
}]
|
|
558
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }]; }, propDecorators: { hostClasses: [{
|
|
559
|
-
type: HostBinding,
|
|
560
|
-
args: ['class.k-floating-label-container']
|
|
561
|
-
}], focusedClass: [{
|
|
562
|
-
type: HostBinding,
|
|
563
|
-
args: ['class.k-focus']
|
|
564
|
-
}], invalidClass: [{
|
|
565
|
-
type: HostBinding,
|
|
566
|
-
args: ['class.k-invalid']
|
|
567
|
-
}], direction: [{
|
|
568
|
-
type: HostBinding,
|
|
569
|
-
args: ['attr.dir']
|
|
570
|
-
}], labelCssStyle: [{
|
|
571
|
-
type: Input
|
|
572
|
-
}], labelCssClass: [{
|
|
573
|
-
type: Input
|
|
574
|
-
}], id: [{
|
|
575
|
-
type: Input
|
|
576
|
-
}], text: [{
|
|
577
|
-
type: Input
|
|
578
|
-
}], optional: [{
|
|
579
|
-
type: Input
|
|
580
|
-
}], positionChange: [{
|
|
581
|
-
type: Output
|
|
582
|
-
}], kendoInput: [{
|
|
583
|
-
type: ContentChild,
|
|
584
|
-
args: [KendoInput, { static: false }]
|
|
585
|
-
}], formControl: [{
|
|
586
|
-
type: ContentChild,
|
|
587
|
-
args: [NgControl, { static: false }]
|
|
588
|
-
}] } });
|
|
589
|
-
|
|
590
|
-
/**
|
|
591
|
-
* Represents the [Kendo UI Label component for Angular]({% slug overview_label %}).
|
|
592
|
-
*
|
|
593
|
-
* Associates a label with input elements or components.
|
|
594
|
-
*
|
|
595
|
-
* @example
|
|
596
|
-
* ```html
|
|
597
|
-
* <kendo-label [for]="input" text="First name">
|
|
598
|
-
* <kendo-textbox #input></kendo-textbox>
|
|
599
|
-
* </kendo-label>
|
|
600
|
-
* ```
|
|
601
|
-
*/
|
|
602
|
-
class LabelComponent {
|
|
603
|
-
constructor(elementRef, renderer, localization) {
|
|
604
|
-
this.elementRef = elementRef;
|
|
605
|
-
this.renderer = renderer;
|
|
606
|
-
this.localization = localization;
|
|
607
|
-
this.subscriptions = new Subscription();
|
|
608
|
-
validatePackage(packageMetadata);
|
|
609
|
-
this.direction = localization.rtl ? 'rtl' : 'ltr';
|
|
610
|
-
this.renderer.removeAttribute(this.elementRef.nativeElement, 'id');
|
|
611
|
-
}
|
|
612
|
-
/**
|
|
613
|
-
* Associates the label with a component by a template reference, or with an HTML element by id.
|
|
614
|
-
*/
|
|
615
|
-
set for(forValue) {
|
|
616
|
-
if (forValue !== this._for) {
|
|
617
|
-
this._for = forValue;
|
|
618
|
-
this.control = forValue;
|
|
619
|
-
}
|
|
620
|
-
}
|
|
621
|
-
get for() {
|
|
622
|
-
return this._for;
|
|
623
|
-
}
|
|
624
|
-
/**
|
|
625
|
-
* @hidden
|
|
626
|
-
*/
|
|
627
|
-
ngAfterContentInit() {
|
|
628
|
-
if (this.for) {
|
|
629
|
-
return;
|
|
630
|
-
}
|
|
631
|
-
const wrappedNativeInput = getWrappedNativeInput(this.elementRef.nativeElement);
|
|
632
|
-
if (wrappedNativeInput) {
|
|
633
|
-
if (!wrappedNativeInput.hasAttribute('id')) {
|
|
634
|
-
this.renderer.setAttribute(wrappedNativeInput, 'id', `k-${guid()}`);
|
|
635
|
-
}
|
|
636
|
-
this.control = wrappedNativeInput;
|
|
637
|
-
return;
|
|
638
|
-
}
|
|
639
|
-
this.control = this.kendoInput;
|
|
640
|
-
}
|
|
641
|
-
/**
|
|
642
|
-
* @hidden
|
|
643
|
-
*/
|
|
644
|
-
ngOnInit() {
|
|
645
|
-
this.subscriptions.add(this.localization.changes.subscribe(({ rtl }) => {
|
|
646
|
-
this.direction = rtl ? 'rtl' : 'ltr';
|
|
647
|
-
}));
|
|
648
|
-
}
|
|
649
|
-
/**
|
|
650
|
-
* @hidden
|
|
651
|
-
*/
|
|
652
|
-
ngAfterViewInit() {
|
|
653
|
-
this.labelDirective.setAriaLabelledby();
|
|
654
|
-
}
|
|
655
|
-
/**
|
|
656
|
-
* @hidden
|
|
657
|
-
*/
|
|
658
|
-
ngOnDestroy() {
|
|
659
|
-
if (this.subscriptions) {
|
|
660
|
-
this.subscriptions.unsubscribe();
|
|
661
|
-
}
|
|
662
|
-
}
|
|
663
|
-
/**
|
|
664
|
-
* @hidden
|
|
665
|
-
*/
|
|
666
|
-
textFor(key) {
|
|
667
|
-
return this.localization.get(key);
|
|
668
|
-
}
|
|
669
|
-
}
|
|
670
|
-
LabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LabelComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
671
|
-
LabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: LabelComponent, isStandalone: true, selector: "kendo-label", inputs: { text: "text", for: "for", optional: "optional", labelCssStyle: "labelCssStyle", labelCssClass: "labelCssClass" }, host: { properties: { "attr.dir": "this.direction" } }, providers: [
|
|
672
|
-
LocalizationService,
|
|
673
|
-
{
|
|
674
|
-
provide: L10N_PREFIX,
|
|
675
|
-
useValue: 'kendo.label'
|
|
676
|
-
}
|
|
677
|
-
], queries: [{ propertyName: "kendoInput", first: true, predicate: KendoInput, descendants: true, static: true }], viewQueries: [{ propertyName: "labelDirective", first: true, predicate: LabelDirective, descendants: true, static: true }], exportAs: ["kendoLabel"], ngImport: i0, template: `
|
|
678
|
-
<ng-container kendoLabelLocalizedMessages
|
|
679
|
-
i18n-optional="kendo.label.optional|The text for the optional segment of a Label component"
|
|
680
|
-
optional="Optional"
|
|
681
|
-
>
|
|
682
|
-
</ng-container>
|
|
683
|
-
<label
|
|
684
|
-
[for]="control"
|
|
685
|
-
[class.k-label-empty]="!text"
|
|
686
|
-
[ngClass]="labelCssClass"
|
|
687
|
-
[ngStyle]="labelCssStyle"
|
|
688
|
-
>
|
|
689
|
-
{{ text }}<span *ngIf="optional" class="k-label-optional">({{textFor('optional')}})</span>
|
|
690
|
-
</label>
|
|
691
|
-
<ng-content></ng-content>
|
|
692
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n [kendoLabelLocalizedMessages],\n [kendoFloatingLabelLocalizedMessages]\n " }, { kind: "directive", type: LabelDirective, selector: "label[for]", inputs: ["for", "labelClass"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
693
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LabelComponent, decorators: [{
|
|
694
|
-
type: Component,
|
|
695
|
-
args: [{
|
|
696
|
-
selector: 'kendo-label',
|
|
697
|
-
exportAs: 'kendoLabel',
|
|
698
|
-
providers: [
|
|
699
|
-
LocalizationService,
|
|
700
|
-
{
|
|
701
|
-
provide: L10N_PREFIX,
|
|
702
|
-
useValue: 'kendo.label'
|
|
703
|
-
}
|
|
704
|
-
],
|
|
705
|
-
template: `
|
|
706
|
-
<ng-container kendoLabelLocalizedMessages
|
|
707
|
-
i18n-optional="kendo.label.optional|The text for the optional segment of a Label component"
|
|
708
|
-
optional="Optional"
|
|
709
|
-
>
|
|
710
|
-
</ng-container>
|
|
711
|
-
<label
|
|
712
|
-
[for]="control"
|
|
713
|
-
[class.k-label-empty]="!text"
|
|
714
|
-
[ngClass]="labelCssClass"
|
|
715
|
-
[ngStyle]="labelCssStyle"
|
|
716
|
-
>
|
|
717
|
-
{{ text }}<span *ngIf="optional" class="k-label-optional">({{textFor('optional')}})</span>
|
|
718
|
-
</label>
|
|
719
|
-
<ng-content></ng-content>
|
|
720
|
-
`,
|
|
721
|
-
standalone: true,
|
|
722
|
-
imports: [LocalizedMessagesDirective, LabelDirective, NgClass, NgStyle, NgIf]
|
|
723
|
-
}]
|
|
724
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.LocalizationService }]; }, propDecorators: { direction: [{
|
|
725
|
-
type: HostBinding,
|
|
726
|
-
args: ['attr.dir']
|
|
727
|
-
}], text: [{
|
|
728
|
-
type: Input
|
|
729
|
-
}], for: [{
|
|
730
|
-
type: Input
|
|
731
|
-
}], optional: [{
|
|
732
|
-
type: Input
|
|
733
|
-
}], labelCssStyle: [{
|
|
734
|
-
type: Input
|
|
735
|
-
}], labelCssClass: [{
|
|
736
|
-
type: Input
|
|
737
|
-
}], labelDirective: [{
|
|
738
|
-
type: ViewChild,
|
|
739
|
-
args: [LabelDirective, { static: true }]
|
|
740
|
-
}], kendoInput: [{
|
|
741
|
-
type: ContentChild,
|
|
742
|
-
args: [KendoInput, { static: true }]
|
|
743
|
-
}] } });
|
|
744
|
-
|
|
745
|
-
/**
|
|
746
|
-
* Custom component messages override default component messages
|
|
747
|
-
* ([see example](slug:label_globalization#toc-internationalization)).
|
|
748
|
-
*/
|
|
749
|
-
class CustomMessagesComponent extends Messages {
|
|
750
|
-
constructor(service) {
|
|
751
|
-
super();
|
|
752
|
-
this.service = service;
|
|
753
|
-
}
|
|
754
|
-
get override() {
|
|
755
|
-
return true;
|
|
756
|
-
}
|
|
757
|
-
}
|
|
758
|
-
CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
759
|
-
CustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CustomMessagesComponent, isStandalone: true, selector: "kendo-label-messages, kendo-floatinglabel-messages", providers: [
|
|
760
|
-
{
|
|
761
|
-
provide: Messages,
|
|
762
|
-
useExisting: forwardRef(() => CustomMessagesComponent)
|
|
763
|
-
}
|
|
764
|
-
], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
|
|
765
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomMessagesComponent, decorators: [{
|
|
766
|
-
type: Component,
|
|
767
|
-
args: [{
|
|
768
|
-
providers: [
|
|
769
|
-
{
|
|
770
|
-
provide: Messages,
|
|
771
|
-
useExisting: forwardRef(() => CustomMessagesComponent)
|
|
772
|
-
}
|
|
773
|
-
],
|
|
774
|
-
selector: 'kendo-label-messages, kendo-floatinglabel-messages',
|
|
775
|
-
template: ``,
|
|
776
|
-
standalone: true
|
|
777
|
-
}]
|
|
778
|
-
}], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
|
|
779
|
-
|
|
780
|
-
/**
|
|
781
|
-
* Utility array that contains all `Label` related components and directives
|
|
782
|
-
*/
|
|
783
|
-
const KENDO_LABEL = [
|
|
784
|
-
LabelDirective,
|
|
785
|
-
LabelComponent,
|
|
786
|
-
CustomMessagesComponent
|
|
787
|
-
];
|
|
788
|
-
/**
|
|
789
|
-
* Utility array that contains all `FloatingLabel` related components and directives
|
|
790
|
-
*/
|
|
791
|
-
const KENDO_FLOATINGLABEL = [
|
|
792
|
-
FloatingLabelComponent,
|
|
793
|
-
CustomMessagesComponent
|
|
794
|
-
];
|
|
795
|
-
/**
|
|
796
|
-
* Utility array that contains all `@progress/kendo-angular-label` related components and directives
|
|
797
|
-
*/
|
|
798
|
-
const KENDO_LABELS = [
|
|
799
|
-
...KENDO_LABEL,
|
|
800
|
-
...KENDO_FLOATINGLABEL
|
|
801
|
-
];
|
|
802
|
-
|
|
803
|
-
//IMPORTANT: NgModule export kept for backwards compatibility
|
|
804
|
-
/**
|
|
805
|
-
* The exported package module.
|
|
806
|
-
*
|
|
807
|
-
* The package exports:
|
|
808
|
-
* - `LabelDirective`—The Label directive class.
|
|
809
|
-
* - `LabelComponent`—The Label component class
|
|
810
|
-
* - `FLoatingLabel`—The FloatingLabel component class.
|
|
811
|
-
*
|
|
812
|
-
* @example
|
|
813
|
-
*
|
|
814
|
-
* ```ts-no-run
|
|
815
|
-
* // Import the Label module
|
|
816
|
-
* import { LabelModule } from '@progress/kendo-angular-label';
|
|
817
|
-
*
|
|
818
|
-
* // The browser platform with a compiler
|
|
819
|
-
* import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
|
820
|
-
*
|
|
821
|
-
* import { NgModule } from '@angular/core';
|
|
822
|
-
*
|
|
823
|
-
* // Import the app component
|
|
824
|
-
* import { AppComponent } from './app.component';
|
|
825
|
-
*
|
|
826
|
-
* // Define the app module
|
|
827
|
-
* _@NgModule({
|
|
828
|
-
* declarations: [AppComponent], // declare app component
|
|
829
|
-
* imports: [BrowserModule, LabelModule], // import Label module
|
|
830
|
-
* bootstrap: [AppComponent]
|
|
831
|
-
* })
|
|
832
|
-
* export class AppModule {}
|
|
833
|
-
*
|
|
834
|
-
* // Compile and launch the module
|
|
835
|
-
* platformBrowserDynamic().bootstrapModule(AppModule);
|
|
836
|
-
*
|
|
837
|
-
* ```
|
|
838
|
-
*/
|
|
839
|
-
class LabelModule {
|
|
840
|
-
}
|
|
841
|
-
LabelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
842
|
-
LabelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: LabelModule, imports: [LabelDirective, LabelComponent, CustomMessagesComponent, FloatingLabelComponent, CustomMessagesComponent], exports: [LabelDirective, LabelComponent, CustomMessagesComponent, FloatingLabelComponent, CustomMessagesComponent] });
|
|
843
|
-
LabelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LabelModule, imports: [LabelComponent, CustomMessagesComponent, FloatingLabelComponent, CustomMessagesComponent] });
|
|
844
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LabelModule, decorators: [{
|
|
845
|
-
type: NgModule,
|
|
846
|
-
args: [{
|
|
847
|
-
imports: [...KENDO_LABELS],
|
|
848
|
-
exports: [...KENDO_LABELS]
|
|
849
|
-
}]
|
|
850
|
-
}] });
|
|
851
|
-
|
|
852
|
-
//IMPORTANT: NgModule export kept for backwards compatibility
|
|
853
|
-
/**
|
|
854
|
-
* Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
|
|
855
|
-
* definition for the TextBox directive.
|
|
856
|
-
*
|
|
857
|
-
* @example
|
|
858
|
-
*
|
|
859
|
-
* ```ts-no-run
|
|
860
|
-
*
|
|
861
|
-
* // The browser platform with a compiler
|
|
862
|
-
* import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
|
863
|
-
*
|
|
864
|
-
* import { NgModule } from '@angular/core';
|
|
865
|
-
*
|
|
866
|
-
* // Import the app component
|
|
867
|
-
* import { AppComponent } from './app.component';
|
|
868
|
-
*
|
|
869
|
-
* // Define the app module
|
|
870
|
-
* _@NgModule({
|
|
871
|
-
* declarations: [AppComponent], // declare app component
|
|
872
|
-
* imports: [BrowserModule, FloatingLabelModule], // import FloatingLabel module
|
|
873
|
-
* bootstrap: [AppComponent]
|
|
874
|
-
* })
|
|
875
|
-
* export class AppModule {}
|
|
876
|
-
*
|
|
877
|
-
* // Compile and launch the module
|
|
878
|
-
* platformBrowserDynamic().bootstrapModule(AppModule);
|
|
879
|
-
*
|
|
880
|
-
* ```
|
|
881
|
-
*/
|
|
882
|
-
class FloatingLabelModule {
|
|
883
|
-
}
|
|
884
|
-
FloatingLabelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FloatingLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
885
|
-
FloatingLabelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: FloatingLabelModule, imports: [FloatingLabelComponent, CustomMessagesComponent], exports: [FloatingLabelComponent, CustomMessagesComponent] });
|
|
886
|
-
FloatingLabelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FloatingLabelModule, imports: [KENDO_FLOATINGLABEL] });
|
|
887
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FloatingLabelModule, decorators: [{
|
|
888
|
-
type: NgModule,
|
|
889
|
-
args: [{
|
|
890
|
-
exports: [...KENDO_FLOATINGLABEL],
|
|
891
|
-
imports: [...KENDO_FLOATINGLABEL]
|
|
892
|
-
}]
|
|
893
|
-
}] });
|
|
894
|
-
|
|
895
|
-
/**
|
|
896
|
-
* Generated bundle index. Do not edit.
|
|
897
|
-
*/
|
|
898
|
-
|
|
899
|
-
export { CustomMessagesComponent, FloatingLabelComponent, FloatingLabelModule, KENDO_FLOATINGLABEL, KENDO_LABEL, KENDO_LABELS, LabelComponent, LabelDirective, LabelModule, LocalizedMessagesDirective };
|
|
900
|
-
|