@progress/kendo-angular-label 21.4.1 → 22.0.0-develop.1

package/esm2022/label.directive.mjs

@@ -1,157 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { getRootElement, inputElementHasAttr, isInputElement, nativeLabelForTargets } from './util';
-import { Directive, Input, HostBinding, ElementRef, Renderer2, NgZone } from '@angular/core';
-import { isDocumentAvailable, guid } from '@progress/kendo-angular-common';
-import * as i0 from "@angular/core";
-/**
- * Represents the [Kendo UI Label directive for Angular]({% slug label_directive %}).
- * Use the `LabelDirective` to link a focusable Angular component or HTML element to a `<label>` tag with the `[for]` property binding.
- *
- * To link a component with the `label` element:
- * - 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 { }
- * ```
- */
-export class LabelDirective {
-    label;
-    renderer;
-    zone;
-    /**
-     * Sets the focusable target for the label.
-     * Accepts 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;
-        }
-        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
-     * 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
-     */
-    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}`);
-            const labelElement = this.label.nativeElement;
-            const id = labelElement.id || `k-${guid()}`;
-            if (!labelElement.getAttribute('id')) {
-                this.renderer.setAttribute(labelElement, 'id', id);
-            }
-            // Editor in iframe mode needs special treatment
-            if (component.focusableId.startsWith('k-editor') && component.iframe) {
-                component.contentAreaLoaded.subscribe(() => {
-                    this.zone.runOutsideAngular(() => {
-                        setTimeout(() => {
-                            const editableElement = component.container.element.nativeElement.contentDocument.body.firstElementChild;
-                            this.renderer.setAttribute(editableElement, 'aria-label', labelElement.textContent);
-                        });
-                    });
-                });
-            }
-            if (!labelTarget) {
-                return;
-            }
-            const existingAriaLabelledBy = labelTarget.hasAttribute('aria-labelledby') && labelTarget.getAttribute('aria-labelledby');
-            // DropDowns with focusable input elements rely on the aria-labelledby attribute to set the same attribute on their popup listbox element
-            // On the other hand, the aria-labelledby attribute is redundant on the Input element when there is label[for] association -
-            // https://feedback.telerik.com/kendo-angular-ui/1648203-remove-aria-labelledby-when-native-html-elements-are-associated.
-            // This addresses both cases, setting a special data-kendo-label-id attribute to be used internally by other components when the aria-describedby one is not applicable.
-            this.renderer.setAttribute(labelTarget, nativeLabelForTargets.includes(labelTarget.tagName) ? 'data-kendo-label-id' : 'aria-labelledby', existingAriaLabelledBy && existingAriaLabelledBy !== id ? `${existingAriaLabelledBy} ${id}` : id);
-        }
-    }
-    getFocusableComponent() {
-        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: "18.2.14", 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: "18.2.14", 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: "18.2.14", ngImport: i0, type: LabelDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: 'label[for]',
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }], propDecorators: { for: [{
-                type: Input
-            }], labelFor: [{
-                type: HostBinding,
-                args: ['attr.for']
-            }], labelClass: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['class.k-label']
-            }] } });

package/esm2022/label.module.mjs

@@ -1,45 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { NgModule } from '@angular/core';
-import { KENDO_LABELS } from './directives';
-import * as i0 from "@angular/core";
-import * as i1 from "./label.directive";
-import * as i2 from "./label/label.component";
-import * as i3 from "./localization/custom-messages.component";
-import * as i4 from "./floating-label/floating-label.component";
-//IMPORTANT: NgModule export kept for backwards compatibility
-/**
- * Represents the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) definition for the Label component.
- * The module imports:
- * - `LabelDirective`
- * - `LabelComponent`
- * - `FloatingLabel`
- *
- * @example
- * ```ts
- * import { LabelModule } from '@progress/kendo-angular-label';
- * import { NgModule } from '@angular/core';
- * import { AppComponent } from './app.component';
- *
- * @NgModule({
- *     declarations: [AppComponent],
- *     imports:      [BrowserModule, LabelModule],
- *     bootstrap:    [AppComponent]
- * })
- * export class AppModule {}
- * ```
- */
-export class LabelModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", 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: "18.2.14", ngImport: i0, type: LabelModule });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LabelModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [...KENDO_LABELS],
-                    exports: [...KENDO_LABELS]
-                }]
-        }] });

package/esm2022/localization/custom-messages.component.mjs

@@ -1,44 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { Component, forwardRef } from '@angular/core';
-import { LocalizationService } from '@progress/kendo-angular-l10n';
-import { Messages } from './messages';
-import * as i0 from "@angular/core";
-import * as i1 from "@progress/kendo-angular-l10n";
-/**
- * Use the `CustomMessagesComponent` to override default component messages. ([See example](slug:label_globalization#toc-internationalization))
- *
- */
-export class CustomMessagesComponent extends Messages {
-    service;
-    constructor(service) {
-        super();
-        this.service = service;
-    }
-    get override() {
-        return true;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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: "18.2.14", ngImport: i0, type: CustomMessagesComponent, decorators: [{
-            type: Component,
-            args: [{
-                    providers: [
-                        {
-                            provide: Messages,
-                            useExisting: forwardRef(() => CustomMessagesComponent)
-                        }
-                    ],
-                    selector: 'kendo-label-messages, kendo-floatinglabel-messages',
-                    template: ``,
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ type: i1.LocalizationService }] });

package/esm2022/localization/localized-messages.directive.mjs

@@ -1,42 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { Directive, forwardRef } from '@angular/core';
-import { LocalizationService } from '@progress/kendo-angular-l10n';
-import { Messages } from './messages';
-import * as i0 from "@angular/core";
-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: "18.2.14", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", 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: "18.2.14", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    providers: [
-                        {
-                            provide: Messages,
-                            useExisting: forwardRef(() => LocalizedMessagesDirective)
-                        }
-                    ],
-                    selector: `
-      [kendoLabelLocalizedMessages],
-      [kendoFloatingLabelLocalizedMessages]
-    `,
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ type: i1.LocalizationService }] });

package/esm2022/localization/messages.mjs

@@ -1,27 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { Directive, Input } from '@angular/core';
-import { ComponentMessages } from '@progress/kendo-angular-l10n';
-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: "18.2.14", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: Messages, selector: "kendo-label-messages-base", inputs: { optional: "optional" }, usesInheritance: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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
-            }] } });

package/esm2022/package-metadata.mjs

@@ -1,16 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-/**
- * @hidden
- */
-export const packageMetadata = {
-    name: '@progress/kendo-angular-label',
-    productName: 'Kendo UI for Angular',
-    productCode: 'KENDOUIANGULAR',
-    productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1768393140,
-    version: '21.4.1',
-    licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
-};

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

@@ -1,8 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-/**
- * Generated bundle index. Do not edit.
- */
-export * from './index';

package/esm2022/util.mjs

@@ -1,33 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-/**
- * @hidden
- */
-export const isInputElement = (component) => component instanceof HTMLElement;
-/**
- * @hidden
- */
-export const inputElementHasAttr = (element, attribute) => element.hasAttribute(attribute);
-/**
- * @hidden
- */
-export const getWrappedNativeInput = (element) => element.querySelector('kendo-label > input, kendo-label > textarea, kendo-label > select');
-/**
- * @hidden
- */
-export const getRootElement = (element) => {
-    if (!element) {
-        return null;
-    }
-    let rootElement = element;
-    while (rootElement.parentElement) {
-        rootElement = rootElement.parentElement;
-    }
-    return rootElement;
-};
-/**
- * @hidden
- */
-export const nativeLabelForTargets = ['BUTTON', 'INPUT', 'METER', 'OUTPUT', 'PROGRESS', 'SELECT', 'TEXTAREA']; // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label