@progress/kendo-angular-label 3.1.2 → 4.0.0-dev.202204131904

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (76) hide show
  1. package/bundles/kendo-angular-label.umd.js +5 -0
  2. package/{dist/es2015 → esm2015}/floating-label/floating-label-input-adapter.js +0 -0
  3. package/{dist/es2015 → esm2015}/floating-label/floating-label.component.js +74 -79
  4. package/{dist/es2015 → esm2015}/floating-label/floating-label.module.js +14 -11
  5. package/{dist/es → esm2015}/floating-label/models/label-position.js +1 -0
  6. package/{dist/es2015/shared.module.d.ts → esm2015/kendo-angular-label.js} +2 -3
  7. package/esm2015/label/label.component.js +158 -0
  8. package/{dist/es2015 → esm2015}/label.directive.js +21 -24
  9. package/{dist/es2015 → esm2015}/label.module.js +16 -11
  10. package/esm2015/localization/custom-messages.component.js +41 -0
  11. package/esm2015/localization/localized-messages.directive.js +39 -0
  12. package/esm2015/localization/messages.js +23 -0
  13. package/{dist/es → esm2015}/main.js +2 -0
  14. package/{dist/es2015 → esm2015}/package-metadata.js +1 -1
  15. package/esm2015/shared.module.js +29 -0
  16. package/{dist/es2015 → esm2015}/util.js +0 -0
  17. package/{dist/fesm2015/index.js → fesm2015/kendo-angular-label.js} +245 -205
  18. package/{dist/es2015/floating-label → floating-label}/floating-label-input-adapter.d.ts +2 -1
  19. package/{dist/es2015/floating-label → floating-label}/floating-label.component.d.ts +6 -3
  20. package/{dist/es2015/floating-label → floating-label}/floating-label.module.d.ts +7 -0
  21. package/{dist/es2015/floating-label → floating-label}/models/label-position.d.ts +0 -0
  22. package/{dist/es2015/floating-label/models/label-position.js → kendo-angular-label.d.ts} +5 -0
  23. package/{dist/es2015/label → label}/label.component.d.ts +3 -0
  24. package/{dist/es2015/label.directive.d.ts → label.directive.d.ts} +4 -1
  25. package/{dist/es2015/label.module.d.ts → label.module.d.ts} +9 -0
  26. package/{dist/es2015/localization → localization}/custom-messages.component.d.ts +4 -1
  27. package/{dist/es2015/localization → localization}/localized-messages.directive.d.ts +3 -0
  28. package/{dist/es2015/localization → localization}/messages.d.ts +3 -0
  29. package/{dist/es2015/main.d.ts → main.d.ts} +2 -0
  30. package/{dist/es2015/package-metadata.d.ts → package-metadata.d.ts} +0 -0
  31. package/package.json +34 -103
  32. package/schematics/ngAdd/index.js +5 -2
  33. package/schematics/ngAdd/index.js.map +1 -1
  34. package/shared.module.d.ts +15 -0
  35. package/{dist/es2015/util.d.ts → util.d.ts} +0 -0
  36. package/dist/cdn/js/kendo-angular-label.js +0 -20
  37. package/dist/cdn/main.js +0 -5
  38. package/dist/es/floating-label/floating-label-input-adapter.js +0 -58
  39. package/dist/es/floating-label/floating-label.component.js +0 -312
  40. package/dist/es/floating-label/floating-label.module.js +0 -52
  41. package/dist/es/index.js +0 -11
  42. package/dist/es/label/label.component.js +0 -137
  43. package/dist/es/label.directive.js +0 -140
  44. package/dist/es/label.module.js +0 -63
  45. package/dist/es/localization/custom-messages.component.js +0 -44
  46. package/dist/es/localization/localized-messages.directive.js +0 -35
  47. package/dist/es/localization/messages.js +0 -22
  48. package/dist/es/package-metadata.js +0 -15
  49. package/dist/es/shared.module.js +0 -27
  50. package/dist/es/util.js +0 -33
  51. package/dist/es2015/index.d.ts +0 -11
  52. package/dist/es2015/index.js +0 -11
  53. package/dist/es2015/index.metadata.json +0 -1
  54. package/dist/es2015/label/label.component.js +0 -146
  55. package/dist/es2015/localization/custom-messages.component.js +0 -36
  56. package/dist/es2015/localization/localized-messages.directive.js +0 -34
  57. package/dist/es2015/localization/messages.js +0 -16
  58. package/dist/es2015/main.js +0 -10
  59. package/dist/es2015/shared.module.js +0 -24
  60. package/dist/fesm5/index.js +0 -858
  61. package/dist/npm/floating-label/floating-label-input-adapter.js +0 -60
  62. package/dist/npm/floating-label/floating-label.component.js +0 -314
  63. package/dist/npm/floating-label/floating-label.module.js +0 -54
  64. package/dist/npm/floating-label/models/label-position.js +0 -6
  65. package/dist/npm/index.js +0 -17
  66. package/dist/npm/label/label.component.js +0 -139
  67. package/dist/npm/label.directive.js +0 -142
  68. package/dist/npm/label.module.js +0 -65
  69. package/dist/npm/localization/custom-messages.component.js +0 -46
  70. package/dist/npm/localization/localized-messages.directive.js +0 -37
  71. package/dist/npm/localization/messages.js +0 -24
  72. package/dist/npm/main.js +0 -18
  73. package/dist/npm/package-metadata.js +0 -17
  74. package/dist/npm/shared.module.js +0 -29
  75. package/dist/npm/util.js +0 -35
  76. package/dist/systemjs/kendo-angular-label.js +0 -5
@@ -1,312 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2021 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 tslib_1 from "tslib";
6
- import { ContentChild, Component, ElementRef, EventEmitter, HostBinding, Input, Renderer2, isDevMode, ChangeDetectorRef, Output } from '@angular/core';
7
- import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
8
- import { NgControl } from '@angular/forms';
9
- import { guid, KendoInput, hasObservers } from '@progress/kendo-angular-common';
10
- import { validatePackage } from '@progress/kendo-licensing';
11
- import { packageMetadata } from '../package-metadata';
12
- import { FloatingLabelInputAdapter } from './floating-label-input-adapter';
13
- var isFunction = function (x) { return Object.prototype.toString.call(x) === '[object Function]'; };
14
- var ɵ0 = isFunction;
15
- /**
16
- * Represents the [Kendo UI FloatingLabel component for Angular]({% slug overview_floatinglabel %}).
17
- * Provides floating labels to `input` elements.
18
- *
19
- * The FloatingLabel supports both Template and Reactive Forms and
20
- * [can contain Kendo UI for Angular Input components such as `kendo-combobox` and `kendo-numerictextbox`,
21
- * or HTML Input elements with the `kendoTextBox` directive applied]({% slug overview_floatinglabel %}#toc-implementing-floating-labels).
22
- *
23
- * @example
24
- * ```ts
25
- *
26
- * _@Component({
27
- * selector: 'my-app',
28
- * template: `
29
- * <kendo-floatinglabel text="First name">
30
- * <input [(ngModel)]="name" kendoTextBox />
31
- * </kendo-floatinglabel>
32
- * `
33
- * })
34
- * class AppComponent {
35
- * public name = 'John';
36
- * }
37
- *
38
- * ```
39
- */
40
- var FloatingLabelComponent = /** @class */ (function () {
41
- function FloatingLabelComponent(elementRef, renderer, changeDetectorRef, localization) {
42
- this.elementRef = elementRef;
43
- this.renderer = renderer;
44
- this.changeDetectorRef = changeDetectorRef;
45
- this.localization = localization;
46
- this.hostClasses = true;
47
- /**
48
- * Fires after the floating label position is changed.
49
- */
50
- this.positionChange = new EventEmitter();
51
- /**
52
- * @hidden
53
- */
54
- this.focused = false;
55
- /**
56
- * @hidden
57
- */
58
- this.empty = true;
59
- /**
60
- * @hidden
61
- */
62
- this.invalid = false;
63
- /**
64
- * @hidden
65
- */
66
- this.labelId = "k-" + guid();
67
- this.autoFillStarted = false;
68
- validatePackage(packageMetadata);
69
- this.direction = localization.rtl ? 'rtl' : 'ltr';
70
- this.renderer.removeAttribute(this.elementRef.nativeElement, "id");
71
- }
72
- Object.defineProperty(FloatingLabelComponent.prototype, "labelPosition", {
73
- /**
74
- * Represents the current floating label position.
75
- */
76
- get: function () {
77
- if (!this.empty) {
78
- return 'Out';
79
- }
80
- return this.focused ? 'Out' : 'In';
81
- },
82
- enumerable: true,
83
- configurable: true
84
- });
85
- Object.defineProperty(FloatingLabelComponent.prototype, "focusedClass", {
86
- get: function () {
87
- return this.focused;
88
- },
89
- enumerable: true,
90
- configurable: true
91
- });
92
- Object.defineProperty(FloatingLabelComponent.prototype, "invalidClass", {
93
- get: function () {
94
- return this.invalid;
95
- },
96
- enumerable: true,
97
- configurable: true
98
- });
99
- /**
100
- * @hidden
101
- */
102
- FloatingLabelComponent.prototype.ngAfterContentInit = function () {
103
- this.validateSetup();
104
- var control = new FloatingLabelInputAdapter(this.kendoInput || this.formControl.valueAccessor, this.formControl);
105
- this.addHandlers(control);
106
- this.setLabelFor(control);
107
- };
108
- FloatingLabelComponent.prototype.ngAfterViewInit = function () {
109
- if (this.kendoInput) {
110
- this.setAriaLabelledby(this.kendoInput);
111
- }
112
- };
113
- /**
114
- * @hidden
115
- */
116
- FloatingLabelComponent.prototype.ngOnDestroy = function () {
117
- if (this.subscription) {
118
- this.subscription.unsubscribe();
119
- }
120
- };
121
- /**
122
- * @hidden
123
- */
124
- FloatingLabelComponent.prototype.textFor = function (key) {
125
- return this.localization.get(key);
126
- };
127
- FloatingLabelComponent.prototype.subscribe = function (control, eventName, handler) {
128
- if (control[eventName] instanceof EventEmitter) {
129
- var subscription = control[eventName].subscribe(handler);
130
- if (!this.subscription) {
131
- this.subscription = subscription;
132
- }
133
- else {
134
- this.subscription.add(subscription);
135
- }
136
- }
137
- };
138
- FloatingLabelComponent.prototype.updateState = function () {
139
- var empty = function (value) {
140
- // zero is not an empty value (e.g., NumericTextBox)
141
- if (value === 0 || value === false) {
142
- return false;
143
- }
144
- // empty arrays are an empty value (e.g., MultiSelect)
145
- if (Array.isArray(value) && !value.length) {
146
- return true;
147
- }
148
- return !value;
149
- };
150
- var formControl = this.formControl;
151
- if (formControl) {
152
- var valueAccessor = formControl.valueAccessor;
153
- if (isFunction(valueAccessor.isEmpty)) {
154
- this.empty = valueAccessor.isEmpty();
155
- }
156
- else {
157
- this.empty = empty(formControl.value);
158
- }
159
- this.invalid = formControl.invalid && (formControl.touched || formControl.dirty);
160
- }
161
- else {
162
- this.empty = isFunction(this.kendoInput.isEmpty) ?
163
- this.kendoInput.isEmpty() : empty(this.kendoInput.value);
164
- }
165
- if (this.empty) {
166
- this.renderer.addClass(this.elementRef.nativeElement, 'k-state-empty');
167
- }
168
- else {
169
- this.renderer.removeClass(this.elementRef.nativeElement, 'k-state-empty');
170
- }
171
- this.changeDetectorRef.markForCheck();
172
- };
173
- FloatingLabelComponent.prototype.setAriaLabelledby = function (component) {
174
- var componentId = component.focusableId || component.id;
175
- if (componentId) {
176
- var focusableElement = this.elementRef.nativeElement.querySelector("#" + componentId);
177
- this.renderer.setAttribute(focusableElement, 'aria-labelledby', this.labelId);
178
- }
179
- };
180
- FloatingLabelComponent.prototype.setLabelFor = function (control) {
181
- var controlId = control.focusableId || control.id;
182
- if (this.id && controlId) {
183
- // input wins
184
- this.id = controlId;
185
- }
186
- else if (this.id) {
187
- control.focusableId = this.id;
188
- }
189
- else if (controlId) {
190
- this.id = controlId;
191
- }
192
- else {
193
- var id = "k-" + guid();
194
- control.focusableId = id;
195
- this.id = id;
196
- }
197
- };
198
- FloatingLabelComponent.prototype.handleAutofill = function (control) {
199
- var _this = this;
200
- this.subscribe(control, 'autoFillStart', function () {
201
- _this.autoFillStarted = true;
202
- _this.renderer.removeClass(_this.elementRef.nativeElement, 'k-state-empty');
203
- });
204
- this.subscribe(control, 'autoFillEnd', function () {
205
- if (_this.autoFillStarted) {
206
- _this.autoFillStarted = false;
207
- if (_this.empty) {
208
- _this.renderer.addClass(_this.elementRef.nativeElement, 'k-state-empty');
209
- }
210
- }
211
- });
212
- };
213
- FloatingLabelComponent.prototype.addHandlers = function (control) {
214
- var _this = this;
215
- var setFocus = function (isFocused) { return function () {
216
- _this.focused = isFocused;
217
- _this.updateState();
218
- if (!_this.empty) {
219
- return;
220
- }
221
- if (hasObservers(_this.positionChange)) {
222
- _this.positionChange.emit(isFocused ? 'Out' : 'In');
223
- }
224
- }; };
225
- this.subscribe(control, 'onFocus', setFocus(true));
226
- this.subscribe(control, 'onBlur', setFocus(false));
227
- this.handleAutofill(control);
228
- var updateState = function () { return _this.updateState(); };
229
- updateState();
230
- this.subscribe(control, 'onValueChange', updateState);
231
- };
232
- FloatingLabelComponent.prototype.validateSetup = function () {
233
- if (!this.formControl && !this.kendoInput) {
234
- if (isDevMode()) {
235
- throw new Error("The FloatingLabelComponent requires a Kendo Input component" +
236
- " or a forms-bound component to function properly.");
237
- }
238
- return;
239
- }
240
- };
241
- tslib_1.__decorate([
242
- HostBinding('class.k-floating-label-container'),
243
- tslib_1.__metadata("design:type", Boolean)
244
- ], FloatingLabelComponent.prototype, "hostClasses", void 0);
245
- tslib_1.__decorate([
246
- HostBinding('class.k-state-focused'),
247
- tslib_1.__metadata("design:type", Boolean),
248
- tslib_1.__metadata("design:paramtypes", [])
249
- ], FloatingLabelComponent.prototype, "focusedClass", null);
250
- tslib_1.__decorate([
251
- HostBinding('class.k-state-invalid'),
252
- tslib_1.__metadata("design:type", Boolean),
253
- tslib_1.__metadata("design:paramtypes", [])
254
- ], FloatingLabelComponent.prototype, "invalidClass", null);
255
- tslib_1.__decorate([
256
- HostBinding('attr.dir'),
257
- tslib_1.__metadata("design:type", String)
258
- ], FloatingLabelComponent.prototype, "direction", void 0);
259
- tslib_1.__decorate([
260
- Input(),
261
- tslib_1.__metadata("design:type", Object)
262
- ], FloatingLabelComponent.prototype, "labelCssStyle", void 0);
263
- tslib_1.__decorate([
264
- Input(),
265
- tslib_1.__metadata("design:type", Object)
266
- ], FloatingLabelComponent.prototype, "labelCssClass", void 0);
267
- tslib_1.__decorate([
268
- Input(),
269
- tslib_1.__metadata("design:type", String)
270
- ], FloatingLabelComponent.prototype, "id", void 0);
271
- tslib_1.__decorate([
272
- Input(),
273
- tslib_1.__metadata("design:type", String)
274
- ], FloatingLabelComponent.prototype, "text", void 0);
275
- tslib_1.__decorate([
276
- Input(),
277
- tslib_1.__metadata("design:type", Boolean)
278
- ], FloatingLabelComponent.prototype, "optional", void 0);
279
- tslib_1.__decorate([
280
- Output(),
281
- tslib_1.__metadata("design:type", EventEmitter)
282
- ], FloatingLabelComponent.prototype, "positionChange", void 0);
283
- tslib_1.__decorate([
284
- ContentChild(KendoInput, { static: false }),
285
- tslib_1.__metadata("design:type", Object)
286
- ], FloatingLabelComponent.prototype, "kendoInput", void 0);
287
- tslib_1.__decorate([
288
- ContentChild(NgControl, { static: false }),
289
- tslib_1.__metadata("design:type", NgControl)
290
- ], FloatingLabelComponent.prototype, "formControl", void 0);
291
- FloatingLabelComponent = tslib_1.__decorate([
292
- Component({
293
- selector: 'kendo-floatinglabel',
294
- exportAs: 'kendoFloatingLabel',
295
- providers: [
296
- LocalizationService,
297
- {
298
- provide: L10N_PREFIX,
299
- useValue: 'kendo.floatinglabel'
300
- }
301
- ],
302
- template: "\n <ng-container kendoFloatingLabelLocalizedMessages\n i18n-optional=\"kendo.floatinglabel.optional|The text for the optional segment of a FloatingLabel component\"\n optional=\"Optional\"\n >\n </ng-container>\n <ng-content></ng-content>\n <label *ngIf=\"text\" [ngClass]=\"labelCssClass\" [ngStyle]=\"labelCssStyle\" [for]=\"id\" [attr.id]=\"labelId\" class=\"k-label\">\n {{ text }}<span *ngIf=\"optional\" class=\"k-label-optional\">({{textFor('optional')}})</span>\n </label>\n "
303
- }),
304
- tslib_1.__metadata("design:paramtypes", [ElementRef,
305
- Renderer2,
306
- ChangeDetectorRef,
307
- LocalizationService])
308
- ], FloatingLabelComponent);
309
- return FloatingLabelComponent;
310
- }());
311
- export { FloatingLabelComponent };
312
- export { ɵ0 };
@@ -1,52 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2021 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 tslib_1 from "tslib";
6
- import { NgModule } from '@angular/core';
7
- import { CommonModule } from '@angular/common';
8
- import { SharedDirectivesModule } from './../shared.module';
9
- import { FloatingLabelComponent } from './floating-label.component';
10
- var COMPONENT_DIRECTIVES = [FloatingLabelComponent];
11
- /**
12
- * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
13
- * definition for the TextBox directive.
14
- *
15
- * @example
16
- *
17
- * ```ts-no-run
18
- *
19
- * // The browser platform with a compiler
20
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
21
- *
22
- * import { NgModule } from '@angular/core';
23
- *
24
- * // Import the app component
25
- * import { AppComponent } from './app.component';
26
- *
27
- * // Define the app module
28
- * _@NgModule({
29
- * declarations: [AppComponent], // declare app component
30
- * imports: [BrowserModule, FloatingLabelModule], // import FloatingLabel module
31
- * bootstrap: [AppComponent]
32
- * })
33
- * export class AppModule {}
34
- *
35
- * // Compile and launch the module
36
- * platformBrowserDynamic().bootstrapModule(AppModule);
37
- *
38
- * ```
39
- */
40
- var FloatingLabelModule = /** @class */ (function () {
41
- function FloatingLabelModule() {
42
- }
43
- FloatingLabelModule = tslib_1.__decorate([
44
- NgModule({
45
- declarations: COMPONENT_DIRECTIVES.slice(),
46
- exports: COMPONENT_DIRECTIVES.concat([SharedDirectivesModule]),
47
- imports: [CommonModule, SharedDirectivesModule]
48
- })
49
- ], FloatingLabelModule);
50
- return FloatingLabelModule;
51
- }());
52
- export { FloatingLabelModule };
package/dist/es/index.js DELETED
@@ -1,11 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2021 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- /**
6
- * Generated bundle index. Do not edit.
7
- */
8
- export * from './main';
9
- export { LocalizedMessagesDirective } from './localization/localized-messages.directive';
10
- export { Messages } from './localization/messages';
11
- export { SharedDirectivesModule } from './shared.module';
@@ -1,137 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2021 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 tslib_1 from "tslib";
6
- import { ContentChild, Component, ElementRef, HostBinding, Input, Renderer2, ViewChild } from '@angular/core';
7
- import { Subscription } from 'rxjs';
8
- import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
9
- import { KendoInput, guid } from '@progress/kendo-angular-common';
10
- import { validatePackage } from '@progress/kendo-licensing';
11
- import { packageMetadata } from '../package-metadata';
12
- import { LabelDirective } from './../label.directive';
13
- import { getWrappedNativeInput } from './../util';
14
- /**
15
- * Represents the [Kendo UI Label component for Angular]({% slug label_basic %}).
16
- *
17
- * Associates a label with input elements or components.
18
- *
19
- * @example
20
- * ```ts
21
- *
22
- * _@Component({
23
- * selector: 'my-app',
24
- * template: `
25
- * <kendo-label [for]="input" text="First name">
26
- * <input [(ngModel)]="name" kendoTextBox #input />
27
- * </kendo-label>
28
- * `
29
- * })
30
- * class AppComponent {
31
- * public name = 'John';
32
- * }
33
- *
34
- * ```
35
- */
36
- var LabelComponent = /** @class */ (function () {
37
- function LabelComponent(elementRef, renderer, localization) {
38
- this.elementRef = elementRef;
39
- this.renderer = renderer;
40
- this.localization = localization;
41
- this.subscriptions = new Subscription();
42
- validatePackage(packageMetadata);
43
- this.direction = localization.rtl ? 'rtl' : 'ltr';
44
- this.renderer.removeAttribute(this.elementRef.nativeElement, 'id');
45
- }
46
- /**
47
- * @hidden
48
- */
49
- LabelComponent.prototype.ngAfterContentInit = function () {
50
- if (this.for) {
51
- this.control = this.for;
52
- return;
53
- }
54
- var wrappedNativeInput = getWrappedNativeInput(this.elementRef.nativeElement);
55
- if (wrappedNativeInput) {
56
- if (!wrappedNativeInput.hasAttribute('id')) {
57
- this.renderer.setAttribute(wrappedNativeInput, 'id', "k-" + guid());
58
- }
59
- this.control = wrappedNativeInput;
60
- return;
61
- }
62
- this.control = this.kendoInput;
63
- };
64
- /**
65
- * @hidden
66
- */
67
- LabelComponent.prototype.ngOnInit = function () {
68
- var _this = this;
69
- this.subscriptions.add(this.localization.changes.subscribe(function (_a) {
70
- var rtl = _a.rtl;
71
- _this.direction = rtl ? 'rtl' : 'ltr';
72
- }));
73
- };
74
- /**
75
- * @hidden
76
- */
77
- LabelComponent.prototype.ngAfterViewInit = function () {
78
- this.labelDirective.setAriaLabelledby();
79
- };
80
- /**
81
- * @hidden
82
- */
83
- LabelComponent.prototype.ngOnDestroy = function () {
84
- if (this.subscriptions) {
85
- this.subscriptions.unsubscribe();
86
- }
87
- };
88
- /**
89
- * @hidden
90
- */
91
- LabelComponent.prototype.textFor = function (key) {
92
- return this.localization.get(key);
93
- };
94
- tslib_1.__decorate([
95
- HostBinding('attr.dir'),
96
- tslib_1.__metadata("design:type", String)
97
- ], LabelComponent.prototype, "direction", void 0);
98
- tslib_1.__decorate([
99
- Input(),
100
- tslib_1.__metadata("design:type", String)
101
- ], LabelComponent.prototype, "text", void 0);
102
- tslib_1.__decorate([
103
- Input(),
104
- tslib_1.__metadata("design:type", Object)
105
- ], LabelComponent.prototype, "for", void 0);
106
- tslib_1.__decorate([
107
- Input(),
108
- tslib_1.__metadata("design:type", Boolean)
109
- ], LabelComponent.prototype, "optional", void 0);
110
- tslib_1.__decorate([
111
- ViewChild(LabelDirective, { static: true }),
112
- tslib_1.__metadata("design:type", LabelDirective)
113
- ], LabelComponent.prototype, "labelDirective", void 0);
114
- tslib_1.__decorate([
115
- ContentChild(KendoInput, { static: true }),
116
- tslib_1.__metadata("design:type", Object)
117
- ], LabelComponent.prototype, "kendoInput", void 0);
118
- LabelComponent = tslib_1.__decorate([
119
- Component({
120
- selector: 'kendo-label',
121
- exportAs: 'kendoLabel',
122
- providers: [
123
- LocalizationService,
124
- {
125
- provide: L10N_PREFIX,
126
- useValue: 'kendo.label'
127
- }
128
- ],
129
- template: "\n <ng-container kendoLabelLocalizedMessages\n i18n-optional=\"kendo.label.optional|The text for the optional segment of a Label component\"\n optional=\"Optional\"\n >\n </ng-container>\n <label\n [for]=\"control\"\n [class.k-label-empty]=\"!text\">\n {{ text }}<span *ngIf=\"optional\" class=\"k-label-optional\">({{textFor('optional')}})</span>\n </label>\n <ng-content></ng-content>\n "
130
- }),
131
- tslib_1.__metadata("design:paramtypes", [ElementRef,
132
- Renderer2,
133
- LocalizationService])
134
- ], LabelComponent);
135
- return LabelComponent;
136
- }());
137
- export { LabelComponent };
@@ -1,140 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2021 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 tslib_1 from "tslib";
6
- import { isUploadComponent, getRootElement, inputElementHasAttr, isInputElement } from './util';
7
- import { Directive, Input, HostBinding, ElementRef, Renderer2, NgZone } from '@angular/core';
8
- import { isDocumentAvailable, guid } from '@progress/kendo-angular-common';
9
- /**
10
- * Represents the [Kendo UI Label directive for Angular]({% slug overview_label %}).
11
- * The Label associates a focusable Angular component or an HTML element
12
- * with a `label` tag by using the `[for]` property binding.
13
- *
14
- * To associate a component by using the `label` element, either:
15
- * * Set the `[for]` property binding to a
16
- * [template reference variable]({{ site.data.urls.angular['templatesyntax'] }}#template-reference-variables--var-), or
17
- * * Set the `[for]` property binding to an `id` HTML string value.
18
- *
19
- * @example
20
- * ```ts
21
- * _@Component({
22
- * selector: 'my-app',
23
- * template: `
24
- * <div class="row example-wrapper" style="min-height: 450px;">
25
- * <div class="col-xs-12 col-md-6 example-col">
26
- * <label [for]="datepicker">DatePicker: </label>
27
- * <kendo-datepicker #datepicker></kendo-datepicker>
28
- * </div>
29
- *
30
- * <div class="col-xs-12 col-md-6 example-col">
31
- * <label for="input">Input: </label>
32
- * <input id="input" />
33
- * </div>
34
- * </div>
35
- * `
36
- * })
37
- * class AppComponent { }
38
- * ```
39
- */
40
- var LabelDirective = /** @class */ (function () {
41
- function LabelDirective(label, renderer, zone) {
42
- var _this = this;
43
- this.label = label;
44
- this.renderer = renderer;
45
- this.zone = zone;
46
- this.labelClass = true;
47
- this.handleClick = function () {
48
- var component = _this.getFocusableComponent();
49
- if (!component) {
50
- return;
51
- }
52
- if (isUploadComponent(component)) {
53
- component.fileSelect.nativeElement.click();
54
- }
55
- if (component.focus) {
56
- component.focus();
57
- }
58
- };
59
- }
60
- Object.defineProperty(LabelDirective.prototype, "labelFor", {
61
- get: function () {
62
- if (typeof this.for === 'string') {
63
- return this.for;
64
- }
65
- if (!isDocumentAvailable()) {
66
- return null;
67
- }
68
- var component = this.getFocusableComponent() || {};
69
- if (isInputElement(component) && !inputElementHasAttr(component, 'id')) {
70
- this.renderer.setAttribute(component, 'id', "k-" + guid());
71
- }
72
- return component.focusableId || component.id || null;
73
- },
74
- enumerable: true,
75
- configurable: true
76
- });
77
- /**
78
- * @hidden
79
- */
80
- LabelDirective.prototype.ngAfterViewInit = function () {
81
- var _this = this;
82
- this.setAriaLabelledby();
83
- this.zone.runOutsideAngular(function () { return _this.clickListener = _this.renderer.listen(_this.label.nativeElement, 'click', _this.handleClick); });
84
- };
85
- /**
86
- * @hidden
87
- */
88
- LabelDirective.prototype.ngOnDestroy = function () {
89
- if (this.clickListener) {
90
- this.clickListener();
91
- }
92
- };
93
- /**
94
- * @hidden
95
- */
96
- LabelDirective.prototype.setAriaLabelledby = function () {
97
- if (!isDocumentAvailable()) {
98
- return;
99
- }
100
- var component = this.getFocusableComponent();
101
- if (component && component.focusableId) {
102
- var rootElement = getRootElement(this.label.nativeElement);
103
- var labelTarget = rootElement.querySelector("#" + component.focusableId);
104
- if (!labelTarget) {
105
- return;
106
- }
107
- var labelElement = this.label.nativeElement;
108
- var id = labelElement.id || "k-" + guid();
109
- if (!labelElement.getAttribute('id')) {
110
- this.renderer.setAttribute(labelElement, 'id', id);
111
- }
112
- this.renderer.setAttribute(labelTarget, 'aria-labelledby', id);
113
- }
114
- };
115
- LabelDirective.prototype.getFocusableComponent = function () {
116
- var target = this.for;
117
- return target && target.focus !== undefined ? target : null;
118
- };
119
- tslib_1.__decorate([
120
- Input(),
121
- tslib_1.__metadata("design:type", Object)
122
- ], LabelDirective.prototype, "for", void 0);
123
- tslib_1.__decorate([
124
- HostBinding('attr.for'),
125
- tslib_1.__metadata("design:type", String),
126
- tslib_1.__metadata("design:paramtypes", [])
127
- ], LabelDirective.prototype, "labelFor", null);
128
- tslib_1.__decorate([
129
- HostBinding('class.k-label'),
130
- tslib_1.__metadata("design:type", Boolean)
131
- ], LabelDirective.prototype, "labelClass", void 0);
132
- LabelDirective = tslib_1.__decorate([
133
- Directive({
134
- selector: 'label[for]' //tslint:disable-line:directive-selector
135
- }),
136
- tslib_1.__metadata("design:paramtypes", [ElementRef, Renderer2, NgZone])
137
- ], LabelDirective);
138
- return LabelDirective;
139
- }());
140
- export { LabelDirective };