@progress/kendo-angular-label
Version:
Kendo UI Label for Angular
128 lines (127 loc) • 4.65 kB
TypeScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2026 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { AfterContentChecked, AfterContentInit, ElementRef, EventEmitter, OnDestroy, Renderer2, ChangeDetectorRef } from '@angular/core';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { NgControl } from '@angular/forms';
import { FloatingLabelPosition } from './models/label-position';
import * as i0 from "@angular/core";
/**
* Represents the [Kendo UI FloatingLabel component for Angular](https://www.telerik.com/kendo-angular-ui/components/labels/floatinglabel).
* Use this component to provide floating labels to `input` elements.
*
* The FloatingLabel supports Template and Reactive Forms.
* You can use it with Kendo UI for Angular Inputs components such as `kendo-combobox`, `kendo-numerictextbox`, or `kendo-textbox`.
* [See example.](https://www.telerik.com/kendo-angular-ui/components/labels/floatinglabel/association)
*
* @example
* ```html
* <kendo-floatinglabel text="First name">
* <kendo-textbox></kendo-textbox>
* </kendo-floatinglabel>
* ```
*
* @remarks
* Supported children components are: {@link CustomMessagesComponent}.
*/
export declare class FloatingLabelComponent implements AfterContentChecked, AfterContentInit, OnDestroy {
private elementRef;
private renderer;
private changeDetectorRef;
private localization;
/**
* Gets the current floating label position.
*/
get labelPosition(): FloatingLabelPosition;
hostClasses: boolean;
get focusedClass(): boolean;
get invalidClass(): boolean;
/**
* @hidden
*/
direction: string;
/**
* Sets the CSS styles for the internal label element.
* Accepts values supported by the [`ngStyle`](link:site.data.urls.angular['ngstyleapi']) directive.
*/
labelCssStyle: any;
/**
* Sets the CSS classes for the label element.
* Accepts values supported by the [`ngClass`](link:site.data.urls.angular['ngclassapi']) directive.
*/
labelCssClass: any;
/**
* Sets the `id` attribute of the input inside the floating label.
*
* @remarks
* This property is related to accessibility.
*/
id: string;
/**
* Sets the text content of the floating label that describes the input.
*
* @remarks
* This property is related to accessibility.
*/
text: string;
/**
* Marks a form field as optional. When enabled, renders the `Optional` text by default.
* You can customize the text by providing a custom message ([see example](https://www.telerik.com/kendo-angular-ui/components/labels/globalization#custom-messages)).
*
* @default false
*/
optional: boolean;
/**
* Fires after the FloatingLabel position changes.
*/
positionChange: EventEmitter<FloatingLabelPosition>;
kendoInput: any;
formControl: NgControl;
/**
* @hidden
*/
focused: boolean;
/**
* @hidden
*/
empty: boolean;
/**
* @hidden
*/
invalid: boolean;
/**
* @hidden
*/
labelId: string;
private subscription;
private autoFillStarted;
constructor(elementRef: ElementRef, renderer: Renderer2, changeDetectorRef: ChangeDetectorRef, localization: LocalizationService);
/**
* @hidden
*/
ngAfterContentChecked(): void;
/**
* @hidden
*/
ngAfterContentInit(): void;
ngAfterViewInit(): void;
/**
* @hidden
*/
ngOnDestroy(): void;
/**
* @hidden
*/
textFor(key: string): string;
private subscribe;
private updateState;
private isValueEmpty;
private setAriaLabelledby;
private setLabelFor;
private handleAutofill;
private addHandlers;
private validateSetup;
static ɵfac: i0.ɵɵFactoryDeclaration<FloatingLabelComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<FloatingLabelComponent, "kendo-floatinglabel", ["kendoFloatingLabel"], { "labelCssStyle": { "alias": "labelCssStyle"; "required": false; }; "labelCssClass": { "alias": "labelCssClass"; "required": false; }; "id": { "alias": "id"; "required": false; }; "text": { "alias": "text"; "required": false; }; "optional": { "alias": "optional"; "required": false; }; }, { "positionChange": "positionChange"; }, ["kendoInput", "formControl"], ["*"], true, never>;
}