@progress/kendo-angular-label 4.0.2 → 11.0.0-develop.100

package/fesm2020/progress-kendo-angular-label.mjs

@@ -0,0 +1,870 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as i0 from '@angular/core';
+import { Directive, Input, HostBinding, forwardRef, Component, NgModule, EventEmitter, isDevMode, Output, ContentChild, ViewChild } from '@angular/core';
+import { isDocumentAvailable, guid, hasObservers, KendoInput } from '@progress/kendo-angular-common';
+import * as i1 from '@progress/kendo-angular-l10n';
+import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { NgControl } from '@angular/forms';
+import { validatePackage } from '@progress/kendo-licensing';
+import { Observable, Subscription } from 'rxjs';
+
+/**
+ * @hidden
+ */
+const isUploadComponent = (component) => component.wrapper && (component.wrapper.tagName === 'KENDO-UPLOAD' || component.wrapper.tagName === 'KENDO-FILESELECT');
+/**
+ * @hidden
+ */
+const isInputElement = (component) => component instanceof HTMLElement;
+/**
+ * @hidden
+ */
+const inputElementHasAttr = (element, attribute) => element.hasAttribute(attribute);
+/**
+ * @hidden
+ */
+const getWrappedNativeInput = (element) => element.querySelector('kendo-label > input, kendo-label > textarea, kendo-label > select');
+/**
+ * @hidden
+ */
+const getRootElement = (element) => {
+    if (!element) {
+        return null;
+    }
+    let rootElement = element;
+    while (rootElement.parentElement) {
+        rootElement = rootElement.parentElement;
+    }
+    return rootElement;
+};
+
+/**
+ * Represents the [Kendo UI Label directive for Angular]({% slug overview_label %}).
+ * The Label associates a focusable Angular component or an HTML element
+ * with a `label` tag by using the `[for]` property binding.
+ *
+ * To associate a component by using the `label` element, either:
+ * * Set the `[for]` property binding to a
+ * [template reference variable](link:site.data.urls.angular['templatesyntax']#template-reference-variables--var-), or
+ * * Set the `[for]` property binding to an `id` HTML string value.
+ *
+ * @example
+ * ```ts
+ * _@Component({
+ * selector: 'my-app',
+ * template: `
+ *  <div class="row example-wrapper" style="min-height: 450px;">
+ *    <div class="col-xs-12 col-md-6 example-col">
+ *      <label [for]="datepicker">DatePicker: </label>
+ *      <kendo-datepicker #datepicker></kendo-datepicker>
+ *    </div>
+ *
+ *    <div class="col-xs-12 col-md-6 example-col">
+ *      <label for="input">Input: </label>
+ *      <input id="input" />
+ *    </div>
+ *  </div>
+ * `
+ * })
+ * class AppComponent { }
+ * ```
+ */
+class LabelDirective {
+    constructor(label, renderer, zone) {
+        this.label = label;
+        this.renderer = renderer;
+        this.zone = zone;
+        this.labelClass = true;
+        this.handleClick = () => {
+            const component = this.getFocusableComponent();
+            if (!component) {
+                return;
+            }
+            if (isUploadComponent(component)) {
+                component.fileSelect.nativeElement.click();
+            }
+            if (component.focus) {
+                component.focus();
+            }
+        };
+    }
+    get labelFor() {
+        if (typeof this.for === 'string') {
+            return this.for;
+        }
+        if (!isDocumentAvailable()) {
+            return null;
+        }
+        const component = this.getFocusableComponent() || {};
+        if (isInputElement(component) && !inputElementHasAttr(component, 'id')) {
+            this.renderer.setAttribute(component, 'id', `k-${guid()}`);
+        }
+        return component.focusableId || component.id || null;
+    }
+    /**
+     * @hidden
+     */
+    ngAfterViewInit() {
+        this.setAriaLabelledby();
+        this.zone.runOutsideAngular(() => this.clickListener = this.renderer.listen(this.label.nativeElement, 'click', this.handleClick));
+    }
+    /**
+     * @hidden
+     */
+    ngOnDestroy() {
+        if (this.clickListener) {
+            this.clickListener();
+        }
+    }
+    /**
+     * @hidden
+     */
+    setAriaLabelledby() {
+        if (!isDocumentAvailable()) {
+            return;
+        }
+        const component = this.getFocusableComponent();
+        if (component && component.focusableId) {
+            const rootElement = getRootElement(this.label.nativeElement);
+            const labelTarget = rootElement.querySelector(`#${component.focusableId}`);
+            if (!labelTarget) {
+                return;
+            }
+            const labelElement = this.label.nativeElement;
+            const id = labelElement.id || `k-${guid()}`;
+            if (!labelElement.getAttribute('id')) {
+                this.renderer.setAttribute(labelElement, 'id', id);
+            }
+            this.renderer.setAttribute(labelTarget, 'aria-labelledby', id);
+        }
+    }
+    getFocusableComponent() {
+        const target = this.for;
+        return target && target.focus !== undefined ? target : null;
+    }
+}
+LabelDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LabelDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+LabelDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: LabelDirective, selector: "label[for]", inputs: { for: "for" }, host: { properties: { "attr.for": "this.labelFor", "class.k-label": "this.labelClass" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LabelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'label[for]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { for: [{
+                type: Input
+            }], labelFor: [{
+                type: HostBinding,
+                args: ['attr.for']
+            }], labelClass: [{
+                type: HostBinding,
+                args: ['class.k-label']
+            }] } });
+
+/**
+ * @hidden
+ */
+class Messages extends ComponentMessages {
+}
+Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: Messages, selector: "kendo-label-messages-base", inputs: { optional: "optional" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: Messages, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'kendo-label-messages-base'
+                }]
+        }], propDecorators: { optional: [{
+                type: Input
+            }] } });
+
+/**
+ * @hidden
+ */
+class LocalizedMessagesDirective extends Messages {
+    constructor(service) {
+        super();
+        this.service = service;
+    }
+}
+LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: LocalizedMessagesDirective, selector: "\n      [kendoLabelLocalizedMessages],\n      [kendoFloatingLabelLocalizedMessages]\n    ", providers: [
+        {
+            provide: Messages,
+            useExisting: forwardRef(() => LocalizedMessagesDirective)
+        }
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    providers: [
+                        {
+                            provide: Messages,
+                            useExisting: forwardRef(() => LocalizedMessagesDirective)
+                        }
+                    ],
+                    selector: `
+      [kendoLabelLocalizedMessages],
+      [kendoFloatingLabelLocalizedMessages]
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
+
+/**
+ * Custom component messages override default component messages
+ * ([see example]({% slug label_globalization %}#toc-localization)).
+ */
+class CustomMessagesComponent extends Messages {
+    constructor(service) {
+        super();
+        this.service = service;
+    }
+    get override() {
+        return true;
+    }
+}
+CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+CustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CustomMessagesComponent, selector: "kendo-label-messages, kendo-floatinglabel-messages", providers: [
+        {
+            provide: Messages,
+            useExisting: forwardRef(() => CustomMessagesComponent)
+        }
+    ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CustomMessagesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [
+                        {
+                            provide: Messages,
+                            useExisting: forwardRef(() => CustomMessagesComponent)
+                        }
+                    ],
+                    selector: 'kendo-label-messages, kendo-floatinglabel-messages',
+                    template: ``
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
+
+const SHARED_DIRECTIVES = [
+    LocalizedMessagesDirective,
+    CustomMessagesComponent
+];
+/**
+ * @hidden
+ */
+class SharedDirectivesModule {
+}
+SharedDirectivesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedDirectivesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SharedDirectivesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedDirectivesModule, declarations: [LocalizedMessagesDirective,
+        CustomMessagesComponent], exports: [LocalizedMessagesDirective,
+        CustomMessagesComponent] });
+SharedDirectivesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedDirectivesModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedDirectivesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SHARED_DIRECTIVES],
+                    exports: [SHARED_DIRECTIVES]
+                }]
+        }] });
+
+/**
+ * @hidden
+ */
+const packageMetadata = {
+    name: '@progress/kendo-angular-label',
+    productName: 'Kendo UI for Angular',
+    productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
+    publishDate: 1673469281,
+    version: '',
+    licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
+};
+
+/**
+ * @hidden
+ */
+class FloatingLabelInputAdapter {
+    constructor(component, formControl) {
+        this.component = component;
+        const isObservableOrEventEmitter = (event) => event instanceof Observable || event instanceof EventEmitter;
+        if (isObservableOrEventEmitter(component.onFocus)) {
+            this.onFocus = component.onFocus;
+        }
+        if (isObservableOrEventEmitter(component.autoFillStart)) {
+            this.autoFillStart = component.autoFillStart;
+        }
+        if (isObservableOrEventEmitter(component.autoFillEnd)) {
+            this.autoFillEnd = component.autoFillEnd;
+        }
+        if (isObservableOrEventEmitter(component.onBlur)) {
+            this.onBlur = component.onBlur;
+        }
+        if (formControl) {
+            this.onValueChange = formControl.valueChanges;
+        }
+        else if (component.valueChange) {
+            this.onValueChange = component.valueChange;
+        }
+    }
+    get focusableId() {
+        const component = this.component;
+        if ('focusableId' in component) {
+            return component.focusableId;
+        }
+        else if ('id' in component) {
+            return component.id;
+        }
+        return "";
+    }
+    set focusableId(value) {
+        const component = this.component;
+        if ('focusableId' in component) {
+            component.focusableId = value;
+        }
+        else if ('id' in component) {
+            component.id = value;
+        }
+    }
+}
+
+const isFunction = (x) => Object.prototype.toString.call(x) === '[object Function]';
+/**
+ * Represents the [Kendo UI FloatingLabel component for Angular]({% slug overview_floatinglabel %}).
+ * Provides floating labels to `input` elements.
+ *
+ * The FloatingLabel supports both Template and Reactive Forms and
+ * [can contain Kendo UI for Angular Input components such as `kendo-combobox` and `kendo-numerictextbox`,
+ * or HTML Input elements with the `kendoTextBox` directive applied](slug:overview_floatinglabel#toc-implementing-floating-labels).
+ *
+ * @example
+ * ```ts
+ *
+ * _@Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-floatinglabel text="First name">
+ *       <input [(ngModel)]="name" kendoTextBox />
+ *     </kendo-floatinglabel>
+ *   `
+ * })
+ * class AppComponent {
+ *     public name = 'John';
+ * }
+ *
+ * ```
+ */
+class FloatingLabelComponent {
+    constructor(elementRef, renderer, changeDetectorRef, localization) {
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+        this.changeDetectorRef = changeDetectorRef;
+        this.localization = localization;
+        this.hostClasses = true;
+        /**
+         * Fires after the floating label position is changed.
+         */
+        this.positionChange = new EventEmitter();
+        /**
+         * @hidden
+         */
+        this.focused = false;
+        /**
+         * @hidden
+         */
+        this.empty = true;
+        /**
+         * @hidden
+         */
+        this.invalid = false;
+        /**
+         * @hidden
+         */
+        this.labelId = `k-${guid()}`;
+        this.autoFillStarted = false;
+        validatePackage(packageMetadata);
+        this.direction = localization.rtl ? 'rtl' : 'ltr';
+        this.renderer.removeAttribute(this.elementRef.nativeElement, "id");
+    }
+    /**
+     * Represents the current floating label position.
+     */
+    get labelPosition() {
+        if (!this.empty) {
+            return 'Out';
+        }
+        return this.focused ? 'Out' : 'In';
+    }
+    get focusedClass() {
+        return this.focused;
+    }
+    get invalidClass() {
+        return this.invalid;
+    }
+    /**
+     * @hidden
+     */
+    ngAfterContentInit() {
+        if (!isDocumentAvailable()) {
+            return;
+        }
+        this.validateSetup();
+        const control = new FloatingLabelInputAdapter(this.kendoInput || this.formControl.valueAccessor, this.formControl);
+        this.addHandlers(control);
+        this.setLabelFor(control);
+    }
+    ngAfterViewInit() {
+        if (this.kendoInput) {
+            this.setAriaLabelledby(this.kendoInput);
+        }
+    }
+    /**
+     * @hidden
+     */
+    ngOnDestroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+    }
+    /**
+     * @hidden
+     */
+    textFor(key) {
+        return this.localization.get(key);
+    }
+    subscribe(control, eventName, handler) {
+        if (control[eventName] instanceof EventEmitter) {
+            const subscription = control[eventName].subscribe(handler);
+            if (!this.subscription) {
+                this.subscription = subscription;
+            }
+            else {
+                this.subscription.add(subscription);
+            }
+        }
+    }
+    updateState() {
+        const empty = value => {
+            // zero is not an empty value (e.g., NumericTextBox)
+            if (value === 0 || value === false) {
+                return false;
+            }
+            // empty arrays are an empty value (e.g., MultiSelect)
+            if (Array.isArray(value) && !value.length) {
+                return true;
+            }
+            return !value;
+        };
+        const formControl = this.formControl;
+        if (formControl) {
+            const valueAccessor = formControl.valueAccessor;
+            if (isFunction(valueAccessor.isEmpty)) {
+                this.empty = valueAccessor.isEmpty();
+            }
+            else {
+                this.empty = empty(formControl.value);
+            }
+            this.invalid = formControl.invalid && (formControl.touched || formControl.dirty);
+        }
+        else {
+            this.empty = isFunction(this.kendoInput.isEmpty) ?
+                this.kendoInput.isEmpty() : empty(this.kendoInput.value);
+        }
+        if (this.empty) {
+            this.renderer.addClass(this.elementRef.nativeElement, 'k-empty');
+        }
+        else {
+            this.renderer.removeClass(this.elementRef.nativeElement, 'k-empty');
+        }
+        this.changeDetectorRef.markForCheck();
+    }
+    setAriaLabelledby(component) {
+        const componentId = component.focusableId || component.id;
+        if (componentId) {
+            const focusableElement = this.elementRef.nativeElement.querySelector(`#${componentId}`);
+            this.renderer.setAttribute(focusableElement, 'aria-labelledby', this.labelId);
+        }
+    }
+    setLabelFor(control) {
+        const controlId = control.focusableId || control.id;
+        if (this.id && controlId) {
+            // input wins
+            this.id = controlId;
+        }
+        else if (this.id) {
+            control.focusableId = this.id;
+        }
+        else if (controlId) {
+            this.id = controlId;
+        }
+        else {
+            const id = `k-${guid()}`;
+            control.focusableId = id;
+            this.id = id;
+        }
+    }
+    handleAutofill(control) {
+        this.subscribe(control, 'autoFillStart', () => {
+            this.autoFillStarted = true;
+            this.renderer.removeClass(this.elementRef.nativeElement, 'k-empty');
+        });
+        this.subscribe(control, 'autoFillEnd', () => {
+            if (this.autoFillStarted) {
+                this.autoFillStarted = false;
+                if (this.empty) {
+                    this.renderer.addClass(this.elementRef.nativeElement, 'k-empty');
+                }
+            }
+        });
+    }
+    addHandlers(control) {
+        const setFocus = (isFocused) => () => {
+            this.focused = isFocused;
+            this.updateState();
+            if (!this.empty) {
+                return;
+            }
+            if (hasObservers(this.positionChange)) {
+                this.positionChange.emit(isFocused ? 'Out' : 'In');
+            }
+        };
+        this.subscribe(control, 'onFocus', setFocus(true));
+        this.subscribe(control, 'onBlur', setFocus(false));
+        this.handleAutofill(control);
+        const updateState = () => this.updateState();
+        updateState();
+        this.subscribe(control, 'onValueChange', updateState);
+    }
+    validateSetup() {
+        if (!this.formControl && !this.kendoInput) {
+            if (isDevMode()) {
+                throw new Error("The FloatingLabelComponent requires a Kendo Input component" +
+                    " or a forms-bound component to function properly.");
+            }
+            return;
+        }
+    }
+}
+FloatingLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FloatingLabelComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+FloatingLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FloatingLabelComponent, 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: [
+        LocalizationService,
+        {
+            provide: L10N_PREFIX,
+            useValue: 'kendo.floatinglabel'
+        }
+    ], queries: [{ propertyName: "kendoInput", first: true, predicate: KendoInput, descendants: true }, { propertyName: "formControl", first: true, predicate: NgControl, descendants: true }], exportAs: ["kendoFloatingLabel"], ngImport: i0, template: `
+        <ng-container kendoFloatingLabelLocalizedMessages
+            i18n-optional="kendo.floatinglabel.optional|The text for the optional segment of a FloatingLabel component"
+            optional="Optional"
+         >
+        </ng-container>
+        <ng-content></ng-content>
+        <label *ngIf="text" [ngClass]="labelCssClass" [ngStyle]="labelCssStyle" [for]="id" [attr.id]="labelId" class="k-label">
+            {{ text }}<span *ngIf="optional" class="k-label-optional">({{textFor('optional')}})</span>
+        </label>
+    `, isInline: true, directives: [{ type: LocalizedMessagesDirective, selector: "\n      [kendoLabelLocalizedMessages],\n      [kendoFloatingLabelLocalizedMessages]\n    " }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FloatingLabelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-floatinglabel',
+                    exportAs: 'kendoFloatingLabel',
+                    providers: [
+                        LocalizationService,
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.floatinglabel'
+                        }
+                    ],
+                    template: `
+        <ng-container kendoFloatingLabelLocalizedMessages
+            i18n-optional="kendo.floatinglabel.optional|The text for the optional segment of a FloatingLabel component"
+            optional="Optional"
+         >
+        </ng-container>
+        <ng-content></ng-content>
+        <label *ngIf="text" [ngClass]="labelCssClass" [ngStyle]="labelCssStyle" [for]="id" [attr.id]="labelId" class="k-label">
+            {{ text }}<span *ngIf="optional" class="k-label-optional">({{textFor('optional')}})</span>
+        </label>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }]; }, propDecorators: { hostClasses: [{
+                type: HostBinding,
+                args: ['class.k-floating-label-container']
+            }], focusedClass: [{
+                type: HostBinding,
+                args: ['class.k-focus']
+            }], invalidClass: [{
+                type: HostBinding,
+                args: ['class.k-invalid']
+            }], direction: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], labelCssStyle: [{
+                type: Input
+            }], labelCssClass: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], optional: [{
+                type: Input
+            }], positionChange: [{
+                type: Output
+            }], kendoInput: [{
+                type: ContentChild,
+                args: [KendoInput, { static: false }]
+            }], formControl: [{
+                type: ContentChild,
+                args: [NgControl, { static: false }]
+            }] } });
+
+const COMPONENT_DIRECTIVES$1 = [FloatingLabelComponent];
+/**
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
+ * definition for the TextBox directive.
+ *
+ * @example
+ *
+ * ```ts-no-run
+ *
+ * // The browser platform with a compiler
+ * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+ *
+ * import { NgModule } from '@angular/core';
+ *
+ * // Import the app component
+ * import { AppComponent } from './app.component';
+ *
+ * // Define the app module
+ * _@NgModule({
+ *     declarations: [AppComponent], // declare app component
+ *     imports:      [BrowserModule, FloatingLabelModule], // import FloatingLabel module
+ *     bootstrap:    [AppComponent]
+ * })
+ * export class AppModule {}
+ *
+ * // Compile and launch the module
+ * platformBrowserDynamic().bootstrapModule(AppModule);
+ *
+ * ```
+ */
+class FloatingLabelModule {
+}
+FloatingLabelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FloatingLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FloatingLabelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FloatingLabelModule, declarations: [FloatingLabelComponent], imports: [CommonModule, SharedDirectivesModule], exports: [FloatingLabelComponent, SharedDirectivesModule] });
+FloatingLabelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FloatingLabelModule, imports: [[CommonModule, SharedDirectivesModule], SharedDirectivesModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FloatingLabelModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [...COMPONENT_DIRECTIVES$1],
+                    exports: [...COMPONENT_DIRECTIVES$1, SharedDirectivesModule],
+                    imports: [CommonModule, SharedDirectivesModule]
+                }]
+        }] });
+
+/**
+ * Represents the [Kendo UI Label component for Angular]({% slug overview_label %}).
+ *
+ * Associates a label with input elements or components.
+ *
+ * @example
+ * ```ts
+ *
+ * _@Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-label [for]="input" text="First name">
+ *       <input [(ngModel)]="name" kendoTextBox #input />
+ *     </kendo-label>
+ *   `
+ * })
+ * class AppComponent {
+ *     public name = 'John';
+ * }
+ *
+ * ```
+ */
+class LabelComponent {
+    constructor(elementRef, renderer, localization) {
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+        this.localization = localization;
+        this.subscriptions = new Subscription();
+        validatePackage(packageMetadata);
+        this.direction = localization.rtl ? 'rtl' : 'ltr';
+        this.renderer.removeAttribute(this.elementRef.nativeElement, 'id');
+    }
+    /**
+     * @hidden
+     */
+    ngAfterContentInit() {
+        if (this.for) {
+            this.control = this.for;
+            return;
+        }
+        const wrappedNativeInput = getWrappedNativeInput(this.elementRef.nativeElement);
+        if (wrappedNativeInput) {
+            if (!wrappedNativeInput.hasAttribute('id')) {
+                this.renderer.setAttribute(wrappedNativeInput, 'id', `k-${guid()}`);
+            }
+            this.control = wrappedNativeInput;
+            return;
+        }
+        this.control = this.kendoInput;
+    }
+    /**
+     * @hidden
+     */
+    ngOnInit() {
+        this.subscriptions.add(this.localization.changes.subscribe(({ rtl }) => {
+            this.direction = rtl ? 'rtl' : 'ltr';
+        }));
+    }
+    /**
+     * @hidden
+     */
+    ngAfterViewInit() {
+        this.labelDirective.setAriaLabelledby();
+    }
+    /**
+     * @hidden
+     */
+    ngOnDestroy() {
+        if (this.subscriptions) {
+            this.subscriptions.unsubscribe();
+        }
+    }
+    /**
+     * @hidden
+     */
+    textFor(key) {
+        return this.localization.get(key);
+    }
+}
+LabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LabelComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+LabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: LabelComponent, selector: "kendo-label", inputs: { text: "text", for: "for", optional: "optional" }, host: { properties: { "attr.dir": "this.direction" } }, providers: [
+        LocalizationService,
+        {
+            provide: L10N_PREFIX,
+            useValue: 'kendo.label'
+        }
+    ], 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: `
+        <ng-container kendoLabelLocalizedMessages
+            i18n-optional="kendo.label.optional|The text for the optional segment of a Label component"
+            optional="Optional"
+         >
+        </ng-container>
+        <label
+            [for]="control"
+            [class.k-label-empty]="!text">
+            {{ text }}<span *ngIf="optional" class="k-label-optional">({{textFor('optional')}})</span>
+        </label>
+        <ng-content></ng-content>
+    `, isInline: true, directives: [{ type: LocalizedMessagesDirective, selector: "\n      [kendoLabelLocalizedMessages],\n      [kendoFloatingLabelLocalizedMessages]\n    " }, { type: LabelDirective, selector: "label[for]", inputs: ["for"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LabelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-label',
+                    exportAs: 'kendoLabel',
+                    providers: [
+                        LocalizationService,
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.label'
+                        }
+                    ],
+                    template: `
+        <ng-container kendoLabelLocalizedMessages
+            i18n-optional="kendo.label.optional|The text for the optional segment of a Label component"
+            optional="Optional"
+         >
+        </ng-container>
+        <label
+            [for]="control"
+            [class.k-label-empty]="!text">
+            {{ text }}<span *ngIf="optional" class="k-label-optional">({{textFor('optional')}})</span>
+        </label>
+        <ng-content></ng-content>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.LocalizationService }]; }, propDecorators: { direction: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], text: [{
+                type: Input
+            }], for: [{
+                type: Input
+            }], optional: [{
+                type: Input
+            }], labelDirective: [{
+                type: ViewChild,
+                args: [LabelDirective, { static: true }]
+            }], kendoInput: [{
+                type: ContentChild,
+                args: [KendoInput, { static: true }]
+            }] } });
+
+const COMPONENT_DIRECTIVES = [
+    LabelDirective,
+    LabelComponent
+];
+/**
+ * The exported package module.
+ *
+ * The package exports:
+ * - `LabelDirective`&mdash;The Label directive class.
+ * - `LabelComponent`&mdash;The Label component class
+ * - `FLoatingLabel`&mdash;The FloatingLabel component class.
+ *
+ * @example
+ *
+ * ```ts-no-run
+ * // Import the Label module
+ * import { LabelModule } from '@progress/kendo-angular-label';
+ *
+ * // The browser platform with a compiler
+ * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+ *
+ * import { NgModule } from '@angular/core';
+ *
+ * // Import the app component
+ * import { AppComponent } from './app.component';
+ *
+ * // Define the app module
+ * _@NgModule({
+ *     declarations: [AppComponent], // declare app component
+ *     imports:      [BrowserModule, LabelModule], // import Label module
+ *     bootstrap:    [AppComponent]
+ * })
+ * export class AppModule {}
+ *
+ * // Compile and launch the module
+ * platformBrowserDynamic().bootstrapModule(AppModule);
+ *
+ * ```
+ */
+class LabelModule {
+}
+LabelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LabelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LabelModule, declarations: [LabelDirective,
+        LabelComponent], imports: [CommonModule, SharedDirectivesModule], exports: [LabelDirective,
+        LabelComponent, FloatingLabelModule, SharedDirectivesModule] });
+LabelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LabelModule, imports: [[CommonModule, SharedDirectivesModule], FloatingLabelModule, SharedDirectivesModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LabelModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, SharedDirectivesModule],
+                    declarations: [...COMPONENT_DIRECTIVES],
+                    exports: [...COMPONENT_DIRECTIVES, FloatingLabelModule, SharedDirectivesModule]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CustomMessagesComponent, FloatingLabelComponent, FloatingLabelModule, LabelComponent, LabelDirective, LabelModule, LocalizedMessagesDirective, SharedDirectivesModule };
+