@progress/kendo-angular-label 17.0.0-develop.8 → 17.0.0

package/README.md

@@ -1,33 +1,47 @@
-<a href="https://www.telerik.com/kendo-angular-ui/" target="_blank">
+<a href="https://www.telerik.com/kendo-angular-ui/components/labels" target="_blank">
 <img width="631" src="https://www.telerik.com/kendo-angular-ui/npm-banner.svg">
 </a>
 
-## Kendo UI for Angular Labels Package (FloatingLabel and Label Components)
+## Kendo UI for Angular Labels Package
 
-> **Important**
-> * This package is part of [Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-labels)&mdash;a commercial library.
-> * You will need to install a license key when adding the package to your project. For more information, please refer to the [Kendo UI for Angular My License page](https://www.telerik.com/kendo-angular-ui/my-license?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-labels).
-> * To receive a license key, you need to either [purchase a license](https://www.telerik.com/purchase/kendo-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-labels) or register for a [free trial](https://www.telerik.com/download-login-v2-kendo-angular-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-labels). Doing so indicates that you [accept the Kendo UI for Angular License Agreement](https://www.telerik.com/purchase/license-agreement/kendo-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-labels).
-> * The 30-day free trial gives you access to all the Kendo UI for Angular components and their full functionality. Additionally, for the period of your license, you get access to our legendary technical support provided directly by the Kendo UI for Angular dev team!
->
-> [Start using Kendo UI for Angular](https://www.telerik.com/download-login-v2-kendo-angular-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-angular-trial-npm-labels) and speed up your development process!
+> * This package is part of the [Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui/)&mdash;a commercial UI library.
+> * You must [install a license key](https://www.telerik.com/kendo-angular-ui/my-license) when adding the package to your project. To receive a license key, either [purchase a license](https://www.telerik.com/purchase/kendo-ui) or register for a [free trial](https://www.telerik.com/download-login-v2-kendo-angular-ui).
+> * The 30-day free trial gives you access to all the Kendo UI for Angular components and their full functionality. Additionally, for the period of your license, you get access to our legendary technical support provided directly by the Kendo UI for Angular team!
 
-Kendo UI for Angular is a commercial UI library designed and built for developing business applications with Angular. Every UI component in the Kendo UI for Angular suite has been built from the ground-up specifically for Angular.
+The Kendo UI for Angular Labels associate focusable components or HTML elements with an HTML Label element. The Labels are built from the ground up and specifically for Angular, so that you get high-performance label controls which integrate tightly with your application and with the rest of the Kendo UI for Angular components.
+
+## What's Included in the Angular Labels Package
+
+The [Angular Labels](https://www.telerik.com/kendo-angular-ui/components/labels) package includes two built-in components:
+
+* [Angular Label](https://www.telerik.com/kendo-angular-ui/components/labels/label)
+* [Angular FloatingLabel](https://www.telerik.com/kendo-angular-ui/components/labels/floatinglabel)
+
+## Key Features
+
+Among the many features which the Kendo UI for Angular Labels deliver are:
+
+* Association&mdash;You can use the Labels to assosiate Kendo UI for Angular components, other Angular components, and regular HTML inputs. [Read more about the association options of the Label component...](https://www.telerik.com/kendo-angular-ui/components/labels/label/association)
+* Optional Text&mdash;The Labels provide settings for toggling a text in a way it indicates that a form field is optional. [Read more about optional text of the Label...](https://www.telerik.com/kendo-angular-ui/components/labels/label/optional-text)
+* Styling&mdash;The Labels components allow you to set custom CSS styles and classes on the actual label element thus customizing their appearance. [Read more about the styling options of the FloatingLabel component...](https://www.telerik.com/kendo-angular-ui/components/labels/floatinglabel/styling)
+* Globalization&mdash;The Kendo UI for Angular Labels support globalization to ensure that each component can fit well in any application, no matter what languages and locales need to be supported. Additionally, the Labels support rendering in a right-to-left (RTL) direction. [Read more about Labels globalization...](https://www.telerik.com/kendo-angular-ui/components/labels/globalization)
+
+## Support Options
+
+For any issues you might encounter while working with the Kendo UI for Angular Labels, you have the following support channels available:
+
+* Industry-leading technical support&mdash;Kendo UI for Angular paid license holders and users with an active (free) trial license can take advantage of our outstanding customer support. To submit a ticket, use the [dedicated Kendo UI for Angular support system](https://www.telerik.com/account/support-center/contact-us/technical-support).
+* Product forums&mdash;The [Kendo UI for Angular forums](https://www.telerik.com/forums/kendo-angular-ui) are part of the free support you can get from the community and from the Kendo UI for Angular team.
+* Feedback portal&mdash;The [Kendo UI for Angular feedback portal](https://feedback.telerik.com/kendo-angular-ui) is where you can request and vote for new features to be added.
 
 ## Resources
 
-* [Get Started with Kendo UI for Angular (requires trial registration)](https://www.telerik.com/kendo-angular-ui/getting-started)
+* [Getting Started with Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui/getting-started)
+* [Getting Started with the Kendo UI for Angular Labels](https://www.telerik.com/kendo-angular-ui/components/labels/installation/getting-started)
 * [Demos, documentation, and component reference](https://www.telerik.com/kendo-angular-ui/components)
 * [Blogs](http://www.telerik.com/blogs/kendo-ui)
 * [Kendo UI for Angular pricing and licensing](https://www.telerik.com/purchase/kendo-ui)
 
-## Questions and Feedback
-
-* [Official Forums](https://www.telerik.com/forums/kendo-angular-ui)
-* [GitHub Issues](https://github.com/telerik/kendo-angular/issues)
-* [Feedback Portal](https://feedback.telerik.com/kendo-angular-ui)
-* [StackOverflow](https://stackoverflow.com/questions/tagged/kendo-ui-angular2)
-
 *Copyright © 2024 Progress Software Corporation and/or one of its subsidiaries or affiliates. All rights reserved.*
 
 *Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries.*

package/{esm2020 → esm2022}/floating-label/floating-label-input-adapter.mjs

@@ -8,6 +8,31 @@ import { EventEmitter } from '@angular/core';
  * @hidden
  */
 export class FloatingLabelInputAdapter {
+    component;
+    onFocus;
+    onBlur;
+    autoFillStart;
+    autoFillEnd;
+    onValueChange;
+    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;
+        }
+    }
     constructor(component, formControl) {
         this.component = component;
         const isObservableOrEventEmitter = (event) => event instanceof Observable || event instanceof EventEmitter;
@@ -30,23 +55,4 @@ export class FloatingLabelInputAdapter {
             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;
-        }
-    }
 }

package/{esm2020 → esm2022}/floating-label/floating-label.component.mjs

@@ -31,37 +31,10 @@ const isFunction = (x) => Object.prototype.toString.call(x) === '[object Functio
  * ```
  */
 export 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");
-    }
+    elementRef;
+    renderer;
+    changeDetectorRef;
+    localization;
     /**
      * Represents the current floating label position.
      */
@@ -71,12 +44,75 @@ export class FloatingLabelComponent {
         }
         return this.focused ? 'Out' : 'In';
     }
+    hostClasses = true;
     get focusedClass() {
         return this.focused;
     }
     get invalidClass() {
         return this.invalid;
     }
+    /**
+     * @hidden
+     */
+    direction;
+    /**
+     * Sets the CSS Styles that will be rendered on the actual label element.
+     * Supports the type of values that are supported by [ngStyle](link:site.data.urls.angular['ngstyleapi']) directive.
+     */
+    labelCssStyle;
+    /**
+     * Sets the CSS Classes that will be rendered on the actual label element.
+     * Supports the type of values that are supported by [ngClass](link:site.data.urls.angular['ngclassapi']) directive.
+     */
+    labelCssClass;
+    /**
+     * Sets the `id` attribute of the input inside the floating label.
+     */
+    id;
+    /**
+     * Specifies the text content of the floating label which describes the input.
+     */
+    text;
+    /**
+     * Allows marking a form field as optional. By default renders the `Optional` text when enabled.
+     * The text can be customized by providing a custom message ([see example]({% slug label_globalization %}#toc-custom-messages)).
+     *
+     * The default value is `false`
+     */
+    optional;
+    /**
+     * Fires after the floating label position is changed.
+     */
+    positionChange = new EventEmitter();
+    kendoInput;
+    formControl;
+    /**
+     * @hidden
+     */
+    focused = false;
+    /**
+     * @hidden
+     */
+    empty = true;
+    /**
+     * @hidden
+     */
+    invalid = false;
+    /**
+     * @hidden
+     */
+    labelId = `k-${guid()}`;
+    subscription;
+    autoFillStarted = false;
+    constructor(elementRef, renderer, changeDetectorRef, localization) {
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+        this.changeDetectorRef = changeDetectorRef;
+        this.localization = localization;
+        validatePackage(packageMetadata);
+        this.direction = localization.rtl ? 'rtl' : 'ltr';
+        this.renderer.removeAttribute(this.elementRef.nativeElement, "id");
+    }
     /**
      * @hidden
      */
@@ -229,15 +265,14 @@ export class FloatingLabelComponent {
             return;
         }
     }
-}
-FloatingLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FloatingLabelComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-FloatingLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FloatingLabelComponent, isStandalone: true, selector: "kendo-floatinglabel", inputs: { labelCssStyle: "labelCssStyle", labelCssClass: "labelCssClass", id: "id", text: "text", optional: "optional" }, outputs: { positionChange: "positionChange" }, host: { properties: { "class.k-floating-label-container": "this.hostClasses", "class.k-focus": "this.focusedClass", "class.k-invalid": "this.invalidClass", "attr.dir": "this.direction" } }, providers: [
-        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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FloatingLabelComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FloatingLabelComponent, isStandalone: true, selector: "kendo-floatinglabel", inputs: { labelCssStyle: "labelCssStyle", labelCssClass: "labelCssClass", id: "id", text: "text", optional: "optional" }, outputs: { positionChange: "positionChange" }, host: { properties: { "class.k-floating-label-container": "this.hostClasses", "class.k-focus": "this.focusedClass", "class.k-invalid": "this.invalidClass", "attr.dir": "this.direction" } }, providers: [
+            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"
@@ -248,7 +283,8 @@ FloatingLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
             {{ text }}<span *ngIf="optional" class="k-label-optional">({{textFor('optional')}})</span>
         </label>
     `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n      [kendoLabelLocalizedMessages],\n      [kendoFloatingLabelLocalizedMessages]\n    " }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FloatingLabelComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FloatingLabelComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-floatinglabel',

package/{esm2020 → esm2022}/floating-label/floating-label.module.mjs

@@ -38,11 +38,11 @@ import * as i2 from "../localization/custom-messages.component";
  * ```
  */
 export class FloatingLabelModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FloatingLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: FloatingLabelModule, imports: [i1.FloatingLabelComponent, i2.CustomMessagesComponent], exports: [i1.FloatingLabelComponent, i2.CustomMessagesComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FloatingLabelModule });
 }
-FloatingLabelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FloatingLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FloatingLabelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: FloatingLabelModule, imports: [i1.FloatingLabelComponent, i2.CustomMessagesComponent], exports: [i1.FloatingLabelComponent, i2.CustomMessagesComponent] });
-FloatingLabelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FloatingLabelModule, imports: [KENDO_FLOATINGLABEL] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FloatingLabelModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FloatingLabelModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_FLOATINGLABEL],

package/{esm2020 → esm2022}/label/label.component.mjs

@@ -27,15 +27,17 @@ import * as i1 from "@progress/kendo-angular-l10n";
  * ```
  */
 export 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');
-    }
+    elementRef;
+    renderer;
+    localization;
+    /**
+     * @hidden
+     */
+    direction;
+    /**
+     * Specifies the text content of the label which describes the input.
+     */
+    text;
     /**
      * Associates the label with a component by a template reference, or with an HTML element by id.
      */
@@ -48,6 +50,39 @@ export class LabelComponent {
     get for() {
         return this._for;
     }
+    /**
+     * Allows marking a form field as optional. By default renders the `Optional` text when enabled.
+     * The text can be customized by providing a custom message ([see example]({% slug label_globalization %}#toc-custom-messages)).
+     *
+     * The default value is `false`.
+     */
+    optional;
+    /**
+     * Sets the CSS Styles that will be rendered on the actual label element.
+     * Supports the type of values that are supported by [ngStyle](link:site.data.urls.angular['ngstyleapi']) directive.
+     */
+    labelCssStyle;
+    /**
+     * Sets the CSS Classes that will be rendered on the actual label element.
+     * Supports the type of values that are supported by [ngClass](link:site.data.urls.angular['ngclassapi']) directive.
+     */
+    labelCssClass;
+    labelDirective;
+    kendoInput;
+    /**
+     * @hidden
+     */
+    control;
+    subscriptions = new Subscription();
+    _for;
+    constructor(elementRef, renderer, localization) {
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+        this.localization = localization;
+        validatePackage(packageMetadata);
+        this.direction = localization.rtl ? 'rtl' : 'ltr';
+        this.renderer.removeAttribute(this.elementRef.nativeElement, 'id');
+    }
     /**
      * @hidden
      */
@@ -93,15 +128,14 @@ export class LabelComponent {
     textFor(key) {
         return this.localization.get(key);
     }
-}
-LabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LabelComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-LabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: LabelComponent, isStandalone: true, selector: "kendo-label", inputs: { text: "text", for: "for", optional: "optional", labelCssStyle: "labelCssStyle", labelCssClass: "labelCssClass" }, host: { properties: { "attr.dir": "this.direction" } }, providers: [
-        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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LabelComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LabelComponent, isStandalone: true, selector: "kendo-label", inputs: { text: "text", for: "for", optional: "optional", labelCssStyle: "labelCssStyle", labelCssClass: "labelCssClass" }, host: { properties: { "attr.dir": "this.direction" } }, providers: [
+            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"
@@ -117,7 +151,8 @@ LabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version
         </label>
         <ng-content></ng-content>
     `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n      [kendoLabelLocalizedMessages],\n      [kendoFloatingLabelLocalizedMessages]\n    " }, { kind: "directive", type: LabelDirective, selector: "label[for]", inputs: ["for", "labelClass"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LabelComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LabelComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-label',

package/{esm2020 → esm2022}/label.directive.mjs

@@ -38,26 +38,15 @@ import * as i0 from "@angular/core";
  * ```
  */
 export class LabelDirective {
-    constructor(label, renderer, zone) {
-        this.label = label;
-        this.renderer = renderer;
-        this.zone = zone;
-        /**
-         * @hidden
-         *
-         * Allows the user to specify if the label CSS class should be rendered or not.
-         */
-        this.labelClass = true;
-        this.handleClick = () => {
-            const component = this.getFocusableComponent();
-            if (!component) {
-                return;
-            }
-            if (component.focus) {
-                component.focus();
-            }
-        };
-    }
+    label;
+    renderer;
+    zone;
+    /**
+     * Sets the focusable target to either of the following options ([see example]({% slug overview_label %})):
+     * * A [template reference variable](link:site.data.urls.angular['templatesyntax']#template-reference-variables--var-), or
+     * * An `id` HTML string value.
+     */
+    for;
     get labelFor() {
         if (typeof this.for === 'string') {
             return this.for;
@@ -71,6 +60,18 @@ export class LabelDirective {
         }
         return component.focusableId || component.id || null;
     }
+    /**
+     * @hidden
+     *
+     * Allows the user to specify if the label CSS class should be rendered or not.
+     */
+    labelClass = true;
+    clickListener;
+    constructor(label, renderer, zone) {
+        this.label = label;
+        this.renderer = renderer;
+        this.zone = zone;
+    }
     /**
      * @hidden
      */
@@ -128,10 +129,19 @@ export class LabelDirective {
         const target = this.for;
         return target && target.focus !== undefined ? target : null;
     }
+    handleClick = () => {
+        const component = this.getFocusableComponent();
+        if (!component) {
+            return;
+        }
+        if (component.focus) {
+            component.focus();
+        }
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LabelDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: LabelDirective, isStandalone: true, selector: "label[for]", inputs: { for: "for", labelClass: "labelClass" }, host: { properties: { "attr.for": "this.labelFor", "class.k-label": "this.labelClass" } }, ngImport: i0 });
 }
-LabelDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LabelDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-LabelDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LabelDirective, isStandalone: true, selector: "label[for]", inputs: { for: "for", labelClass: "labelClass" }, host: { properties: { "attr.for": "this.labelFor", "class.k-label": "this.labelClass" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LabelDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LabelDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector

package/{esm2020 → esm2022}/label.module.mjs

@@ -46,11 +46,11 @@ import * as i4 from "./floating-label/floating-label.component";
  * ```
  */
 export class LabelModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: LabelModule, imports: [i1.LabelDirective, i2.LabelComponent, i3.CustomMessagesComponent, i4.FloatingLabelComponent, i3.CustomMessagesComponent], exports: [i1.LabelDirective, i2.LabelComponent, i3.CustomMessagesComponent, i4.FloatingLabelComponent, i3.CustomMessagesComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LabelModule });
 }
-LabelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-LabelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: LabelModule, imports: [i1.LabelDirective, i2.LabelComponent, i3.CustomMessagesComponent, i4.FloatingLabelComponent, i3.CustomMessagesComponent], exports: [i1.LabelDirective, i2.LabelComponent, i3.CustomMessagesComponent, i4.FloatingLabelComponent, i3.CustomMessagesComponent] });
-LabelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LabelModule, imports: [i2.LabelComponent, i3.CustomMessagesComponent, i4.FloatingLabelComponent, i3.CustomMessagesComponent] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LabelModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LabelModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...KENDO_LABELS],

package/{esm2020 → esm2022}/localization/custom-messages.component.mjs

@@ -12,6 +12,7 @@ import * as i1 from "@progress/kendo-angular-l10n";
  * ([see example](slug:label_globalization#toc-internationalization)).
  */
 export class CustomMessagesComponent extends Messages {
+    service;
     constructor(service) {
         super();
         this.service = service;
@@ -19,15 +20,15 @@ export class CustomMessagesComponent extends Messages {
     get override() {
         return true;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CustomMessagesComponent, isStandalone: true, selector: "kendo-label-messages, kendo-floatinglabel-messages", providers: [
+            {
+                provide: Messages,
+                useExisting: forwardRef(() => CustomMessagesComponent)
+            }
+        ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
 }
-CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-CustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CustomMessagesComponent, isStandalone: true, 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: "15.2.10", ngImport: i0, type: CustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [

package/{esm2020 → esm2022}/localization/localized-messages.directive.mjs

@@ -11,19 +11,20 @@ import * as i1 from "@progress/kendo-angular-l10n";
  * @hidden
  */
 export class LocalizedMessagesDirective extends Messages {
+    service;
     constructor(service) {
         super();
         this.service = service;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: LocalizedMessagesDirective, isStandalone: true, selector: "\n      [kendoLabelLocalizedMessages],\n      [kendoFloatingLabelLocalizedMessages]\n    ", providers: [
+            {
+                provide: Messages,
+                useExisting: forwardRef(() => LocalizedMessagesDirective)
+            }
+        ], usesInheritance: true, ngImport: i0 });
 }
-LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LocalizedMessagesDirective, isStandalone: true, selector: "\n      [kendoLabelLocalizedMessages],\n      [kendoFloatingLabelLocalizedMessages]\n    ", providers: [
-        {
-            provide: Messages,
-            useExisting: forwardRef(() => LocalizedMessagesDirective)
-        }
-    ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [

package/{esm2020 → esm2022}/localization/messages.mjs

@@ -9,10 +9,14 @@ import * as i0 from "@angular/core";
  * @hidden
  */
 export class Messages extends ComponentMessages {
+    /**
+     * The optional text.
+     */
+    optional;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: Messages, selector: "kendo-label-messages-base", inputs: { optional: "optional" }, usesInheritance: true, ngImport: i0 });
 }
-Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: Messages, selector: "kendo-label-messages-base", inputs: { optional: "optional" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: Messages, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Messages, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector

package/{esm2020 → esm2022}/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-label',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1729170072,
-    version: '17.0.0-develop.8',
+    publishDate: 1731413991,
+    version: '17.0.0',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };