@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.
- package/bundles/kendo-angular-label.umd.js +5 -0
- package/{dist/es2015 → esm2015}/floating-label/floating-label-input-adapter.js +0 -0
- package/{dist/es2015 → esm2015}/floating-label/floating-label.component.js +74 -79
- package/{dist/es2015 → esm2015}/floating-label/floating-label.module.js +14 -11
- package/{dist/es → esm2015}/floating-label/models/label-position.js +1 -0
- package/{dist/es2015/shared.module.d.ts → esm2015/kendo-angular-label.js} +2 -3
- package/esm2015/label/label.component.js +158 -0
- package/{dist/es2015 → esm2015}/label.directive.js +21 -24
- package/{dist/es2015 → esm2015}/label.module.js +16 -11
- package/esm2015/localization/custom-messages.component.js +41 -0
- package/esm2015/localization/localized-messages.directive.js +39 -0
- package/esm2015/localization/messages.js +23 -0
- package/{dist/es → esm2015}/main.js +2 -0
- package/{dist/es2015 → esm2015}/package-metadata.js +1 -1
- package/esm2015/shared.module.js +29 -0
- package/{dist/es2015 → esm2015}/util.js +0 -0
- package/{dist/fesm2015/index.js → fesm2015/kendo-angular-label.js} +245 -205
- package/{dist/es2015/floating-label → floating-label}/floating-label-input-adapter.d.ts +2 -1
- package/{dist/es2015/floating-label → floating-label}/floating-label.component.d.ts +6 -3
- package/{dist/es2015/floating-label → floating-label}/floating-label.module.d.ts +7 -0
- package/{dist/es2015/floating-label → floating-label}/models/label-position.d.ts +0 -0
- package/{dist/es2015/floating-label/models/label-position.js → kendo-angular-label.d.ts} +5 -0
- package/{dist/es2015/label → label}/label.component.d.ts +3 -0
- package/{dist/es2015/label.directive.d.ts → label.directive.d.ts} +4 -1
- package/{dist/es2015/label.module.d.ts → label.module.d.ts} +9 -0
- package/{dist/es2015/localization → localization}/custom-messages.component.d.ts +4 -1
- package/{dist/es2015/localization → localization}/localized-messages.directive.d.ts +3 -0
- package/{dist/es2015/localization → localization}/messages.d.ts +3 -0
- package/{dist/es2015/main.d.ts → main.d.ts} +2 -0
- package/{dist/es2015/package-metadata.d.ts → package-metadata.d.ts} +0 -0
- package/package.json +34 -103
- package/schematics/ngAdd/index.js +5 -2
- package/schematics/ngAdd/index.js.map +1 -1
- package/shared.module.d.ts +15 -0
- package/{dist/es2015/util.d.ts → util.d.ts} +0 -0
- package/dist/cdn/js/kendo-angular-label.js +0 -20
- package/dist/cdn/main.js +0 -5
- package/dist/es/floating-label/floating-label-input-adapter.js +0 -58
- package/dist/es/floating-label/floating-label.component.js +0 -312
- package/dist/es/floating-label/floating-label.module.js +0 -52
- package/dist/es/index.js +0 -11
- package/dist/es/label/label.component.js +0 -137
- package/dist/es/label.directive.js +0 -140
- package/dist/es/label.module.js +0 -63
- package/dist/es/localization/custom-messages.component.js +0 -44
- package/dist/es/localization/localized-messages.directive.js +0 -35
- package/dist/es/localization/messages.js +0 -22
- package/dist/es/package-metadata.js +0 -15
- package/dist/es/shared.module.js +0 -27
- package/dist/es/util.js +0 -33
- package/dist/es2015/index.d.ts +0 -11
- package/dist/es2015/index.js +0 -11
- package/dist/es2015/index.metadata.json +0 -1
- package/dist/es2015/label/label.component.js +0 -146
- package/dist/es2015/localization/custom-messages.component.js +0 -36
- package/dist/es2015/localization/localized-messages.directive.js +0 -34
- package/dist/es2015/localization/messages.js +0 -16
- package/dist/es2015/main.js +0 -10
- package/dist/es2015/shared.module.js +0 -24
- package/dist/fesm5/index.js +0 -858
- package/dist/npm/floating-label/floating-label-input-adapter.js +0 -60
- package/dist/npm/floating-label/floating-label.component.js +0 -314
- package/dist/npm/floating-label/floating-label.module.js +0 -54
- package/dist/npm/floating-label/models/label-position.js +0 -6
- package/dist/npm/index.js +0 -17
- package/dist/npm/label/label.component.js +0 -139
- package/dist/npm/label.directive.js +0 -142
- package/dist/npm/label.module.js +0 -65
- package/dist/npm/localization/custom-messages.component.js +0 -46
- package/dist/npm/localization/localized-messages.directive.js +0 -37
- package/dist/npm/localization/messages.js +0 -24
- package/dist/npm/main.js +0 -18
- package/dist/npm/package-metadata.js +0 -17
- package/dist/npm/shared.module.js +0 -29
- package/dist/npm/util.js +0 -35
- 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 };
|