@progress/kendo-angular-typography
Version:
Kendo UI Angular Typography
261 lines (247 loc) • 8.21 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 * as i0 from '@angular/core';
import { Directive, Input, NgModule } from '@angular/core';
import { validatePackage } from '@progress/kendo-licensing';
/**
* @hidden
*/
const typographyFontSizeOptions = {
'xs': 'k-fs-xs',
'sm': 'k-fs-sm',
'md': 'k-fs-md',
'lg': 'k-fs-lg',
'xl': 'k-fs-xl'
};
/**
* @hidden
*/
const typographyFontWeightOptions = {
'light': 'k-font-weight-light',
'normal': 'k-font-weight-normal',
'bold': 'k-font-weight-bold'
};
/**
* @hidden
*/
const typographyTextAlignOptions = {
'left': 'k-text-left',
'right': 'k-text-right',
'center': 'k-text-center',
'justify': 'k-text-justify'
};
/**
* @hidden
*/
const typographyTextTransformOptions = {
'lowercase': 'k-text-lowercase',
'uppercase': 'k-text-uppercase',
'capitalize': 'k-text-capitalize'
};
/**
* @hidden
*/
const typographyVariantOptions = {
'p': 'k-paragraph',
'h1': 'k-h1',
'h2': 'k-h2',
'h3': 'k-h3',
'h4': 'k-h4',
'h5': 'k-h5',
'h6': 'k-h6',
'code': 'k-code',
'pre': 'k-pre'
};
/**
* @hidden
*/
const isPresent = (value) => value !== null && value !== undefined;
/**
* @hidden
*/
const packageMetadata = {
name: '@progress/kendo-angular-typography',
productName: 'Kendo UI for Angular',
productCode: 'KENDOUIANGULAR',
productCodes: ['KENDOUIANGULAR'],
publishDate: 1751463343,
version: '19.2.0',
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
};
/**
* Represents the [Kendo UI Typography directive for Angular]({% slug overview_typography %}).
* Use this directive to represent element types in a uniform way by relying on the predefined Kendo theme classes.
*
* @example
* ```html
* <div kendoTypography variant="k-h1"></div>
* ```
*/
class TypographyDirective {
elementWrapper;
renderer;
element;
/**
* Specifies the element `variant` class that will be applied.
*/
variant;
/**
* Sets the element `font-size` style.
*/
fontSize;
/**
* Sets the element `font-weight` style.
*/
fontWeight;
/**
* Sets the element `text-align` style.
*/
textAlign;
/**
* Sets the element `text-transform` style.
*/
textTransform;
/**
* Applies the `theme-color` to the element.
*/
themeColor;
typographyClasses = [];
constructor(elementWrapper, renderer, element) {
this.elementWrapper = elementWrapper;
this.renderer = renderer;
this.element = element;
validatePackage(packageMetadata);
}
ngOnChanges() {
this.setTypographyClasses();
}
variantClass() {
return typographyVariantOptions[this.variant];
}
themeColorClass() {
return isPresent(this.themeColor) ? `k-color-${this.themeColor}` : null;
}
textAlignClass() {
return typographyTextAlignOptions[this.textAlign];
}
fontWeightClass() {
return typographyFontWeightOptions[this.fontWeight];
}
fontSizeClass() {
return typographyFontSizeOptions[this.fontSize];
}
textTransformClass() {
return typographyTextTransformOptions[this.textTransform];
}
setTypographyClasses() {
const element = this.element.nativeElement;
this.typographyClasses.forEach((className) => {
this.renderer.removeClass(element, className);
});
this.typographyClasses = [
this.variantClass(),
this.fontSizeClass(),
this.fontWeightClass(),
this.textTransformClass(),
this.textAlignClass(),
this.themeColorClass()
];
this.typographyClasses.forEach((className) => {
if (isPresent(className)) {
this.renderer.addClass(element, className);
}
});
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TypographyDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TypographyDirective, isStandalone: true, selector: "[kendoTypography]", inputs: { variant: "variant", fontSize: "fontSize", fontWeight: "fontWeight", textAlign: "textAlign", textTransform: "textTransform", themeColor: "themeColor" }, exportAs: ["kendoTypography"], usesOnChanges: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TypographyDirective, decorators: [{
type: Directive,
args: [{
selector: '[kendoTypography]',
exportAs: 'kendoTypography',
standalone: true
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { variant: [{
type: Input
}], fontSize: [{
type: Input
}], fontWeight: [{
type: Input
}], textAlign: [{
type: Input
}], textTransform: [{
type: Input
}], themeColor: [{
type: Input
}] } });
/**
* Use this utility array to access all `@progress/kendo-angular-typography`-related components and directives in a standalone Angular component.
*
* @example
* ```typescript
* import { Component } from '@angular/core';
* import { KENDO_TYPOGRAPHY } from '@progress/kendo-angular-typography';
*
* @Component({
* selector: 'my-app',
* standalone: true,
* imports: [KENDO_TYPOGRAPHY],
* template: `<div kendoTypography variant="k-h1"></div>`
* })
* export class AppComponent {}
* ```
*/
const KENDO_TYPOGRAPHY = [
TypographyDirective
];
//IMPORTANT: NgModule export kept for backwards compatibility
/**
* Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
* definition for the Typography component.
*
* @example
*
* ```ts-no-run
* // Import the Typography module
* import { TypographyModule } from '@progress/kendo-angular-typography';
*
* // 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, TypographyModule], // import Typography module
* bootstrap: [AppComponent]
* })
* export class AppModule { }
*
* // Compile and launch the module
* platformBrowserDynamic().bootstrapModule(AppModule);
*
* ```
*/
class TypographyModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TypographyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: TypographyModule, imports: [TypographyDirective], exports: [TypographyDirective] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TypographyModule });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TypographyModule, decorators: [{
type: NgModule,
args: [{
imports: [...KENDO_TYPOGRAPHY],
exports: [...KENDO_TYPOGRAPHY]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { KENDO_TYPOGRAPHY, TypographyDirective, TypographyModule };