@progress/kendo-angular-label
Version:
Kendo UI Label for Angular
238 lines (237 loc) • 9.08 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { ContentChild, Component, ElementRef, HostBinding, Input, Renderer2, ViewChild } from '@angular/core';
import { Subscription } from 'rxjs';
import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
import { KendoInput, guid } from '@progress/kendo-angular-common';
import { validatePackage } from '@progress/kendo-licensing';
import { packageMetadata } from '../package-metadata';
import { LabelDirective } from './../label.directive';
import { getWrappedNativeInput } from './../util';
import { NgClass, NgStyle } from '@angular/common';
import { LocalizedMessagesDirective } from '../localization/localized-messages.directive';
import * as i0 from "@angular/core";
import * as i1 from "@progress/kendo-angular-l10n";
/**
* Represents the [Kendo UI Label component for Angular]({% slug overview_label %}).
*
* Use the `LabelComponent` to associate a label with input elements or components.
*
* @example
* ```html
* <kendo-label [for]="input" text="First name">
* <kendo-textbox #input></kendo-textbox>
* </kendo-label>
* ```
* @remarks
* Supported children components are: {@link CustomMessagesComponent}.
*/
export class LabelComponent {
elementRef;
renderer;
localization;
/**
* Specifies the `dir` attribute value for the component.
* @hidden
*/
direction;
/**
* Sets the text content of the Label. Use this property to describe the input.
*
* @example
* ```html
* <kendo-label text="Email"></kendo-label>
* ```
*/
text;
/**
* Associates the label with a component by a template reference or with an HTML element by `id`.
*
* @example
* ```html
* <input #myInput />
* <kendo-label [for]="myInput" text="Username"></kendo-label>
* ```
*/
set for(forValue) {
if (forValue !== this._for) {
this._for = forValue;
this.control = forValue;
}
}
get for() {
return this._for;
}
/**
* Marks a form field as optional. When enabled, the label displays the `Optional` text by default.
* You can customize the text by providing a custom message. ([See example]({% slug label_globalization %}#toc-custom-messages)).
*
* @default false
* @example
* ```html
* <kendo-label text="Phone" [optional]="true"></kendo-label>
* ```
*/
optional;
/**
* Sets the CSS styles for the label element.
* Accepts values supported by the [`ngStyle`](link:site.data.urls.angular['ngstyleapi']) directive.
*
* @example
* ```html
* <kendo-label text="Name" [labelCssStyle]="{ color: 'red' }"></kendo-label>
* ```
*/
labelCssStyle;
/**
* Sets the CSS classes for the label element.
* Accepts values supported by the [`ngClass`](link:site.data.urls.angular['ngclassapi']) directive.
*
* @example
* ```html
* <kendo-label text="Address" [labelCssClass]="'custom-label'"></kendo-label>
* ```
*/
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
*/
ngAfterContentInit() {
if (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);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LabelComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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"
>
</ng-container>
<label
[for]="control"
[class.k-label-empty]="!text"
[ngClass]="labelCssClass"
[ngStyle]="labelCssStyle"
>
{{ text }} (optional) {
<span class="k-label-optional">({{textFor('optional')}})</span>
}
</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"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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"
[ngClass]="labelCssClass"
[ngStyle]="labelCssStyle"
>
{{ text }} (optional) {
<span class="k-label-optional">({{textFor('optional')}})</span>
}
</label>
<ng-content></ng-content>
`,
standalone: true,
imports: [LocalizedMessagesDirective, LabelDirective, NgClass, NgStyle]
}]
}], ctorParameters: () => [{ 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
}], labelCssStyle: [{
type: Input
}], labelCssClass: [{
type: Input
}], labelDirective: [{
type: ViewChild,
args: [LabelDirective, { static: true }]
}], kendoInput: [{
type: ContentChild,
args: [KendoInput, { static: true }]
}] } });