@progress/kendo-angular-typography 17.0.0-develop.7 → 17.0.0-develop.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +28 -16
- package/esm2020/package-metadata.mjs +2 -2
- package/esm2020/typography.directive.mjs +1 -30
- package/fesm2015/progress-kendo-angular-typography.mjs +3 -112
- package/fesm2020/progress-kendo-angular-typography.mjs +3 -112
- package/index.d.ts +0 -1
- package/package.json +3 -3
- package/typography.directive.d.ts +1 -8
- package/esm2020/models/margin-sides.mjs +0 -13
- package/esm2020/models/margin.mjs +0 -75
- package/models/margin-sides.d.ts +0 -13
- package/models/margin.d.ts +0 -123
package/README.md
CHANGED
|
@@ -2,30 +2,42 @@
|
|
|
2
2
|
<img width="631" src="https://www.telerik.com/kendo-angular-ui/npm-banner.svg">
|
|
3
3
|
</a>
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Kendo UI for Angular Typography
|
|
6
6
|
|
|
7
|
-
Kendo UI for Angular
|
|
7
|
+
> * This package is part of [Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui)—a commercial 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.
|
|
8
|
+
> * 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).
|
|
9
|
+
> * 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!
|
|
10
|
+
>
|
|
11
|
+
> [Start using Kendo UI for Angular](https://www.telerik.com/download-login-v2-kendo-angular-ui) and speed up your development process!
|
|
8
12
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
13
|
+
## Angular Typography Directive
|
|
14
|
+
|
|
15
|
+
The [Kendo UI for Angular Typography](https://www.telerik.com/kendo-angular-ui/components/typoraphy) is a directive that allows you to improve the appearance of any UI element by using the available Kendo UI theme classes.
|
|
16
|
+
|
|
17
|
+
## Key Features
|
|
18
|
+
|
|
19
|
+
The features that the Kendo UI for Angular Typography directive delivers are:
|
|
20
|
+
|
|
21
|
+
* [Styling Options](https://www.telerik.com/kendo-angular-ui/components/typography/functionalities)—The Typography delivers default appearance classes for HTML elements. That allows you to set an element variant, configure the font size and weight, and the alignment and transformation of text, as well as change the theme color and control the margin.
|
|
22
|
+
|
|
23
|
+
## Support Options
|
|
24
|
+
|
|
25
|
+
For any issues you might encounter while working with the Kendo UI for Angular Typography, you have the following support channels available:
|
|
26
|
+
|
|
27
|
+
* Industry-leading technical support—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-tickets).
|
|
28
|
+
* Product forums—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.
|
|
29
|
+
* Feedback portal—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.
|
|
14
30
|
|
|
15
31
|
## Resources
|
|
16
32
|
|
|
17
|
-
* [
|
|
18
|
-
* [
|
|
33
|
+
* [Getting Started with Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui/getting-started)
|
|
34
|
+
* [Getting Started with the Kendo UI for Angular Typography](https://www.telerik.com/kendo-angular-ui/components/typography/installation/getting-started)
|
|
35
|
+
* [Typography Overview page](https://www.telerik.com/kendo-angular-ui/components/typography) and [Typography API reference](https://www.telerik.com/kendo-angular-ui/components/typography/api)
|
|
36
|
+
* [Kendo UI for Angular roadmap](https://www.telerik.com/kendo-angular-ui/roadmap)
|
|
19
37
|
* [Blogs](http://www.telerik.com/blogs/kendo-ui)
|
|
38
|
+
* [Demos, documentation, and component reference](https://www.telerik.com/kendo-angular-ui/components)
|
|
20
39
|
* [Kendo UI for Angular pricing and licensing](https://www.telerik.com/purchase/kendo-ui)
|
|
21
40
|
|
|
22
|
-
## Questions and Feedback
|
|
23
|
-
|
|
24
|
-
* [Official Forums](https://www.telerik.com/forums/kendo-angular-ui)
|
|
25
|
-
* [GitHub Issues](https://github.com/telerik/kendo-angular/issues)
|
|
26
|
-
* [Feedback Portal](https://feedback.telerik.com/kendo-angular-ui)
|
|
27
|
-
* [StackOverflow](https://stackoverflow.com/questions/tagged/kendo-ui-angular2)
|
|
28
|
-
|
|
29
41
|
*Copyright © 2024 Progress Software Corporation and/or one of its subsidiaries or affiliates. All rights reserved.*
|
|
30
42
|
|
|
31
43
|
*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.*
|
|
@@ -9,7 +9,7 @@ export const packageMetadata = {
|
|
|
9
9
|
name: '@progress/kendo-angular-typography',
|
|
10
10
|
productName: 'Kendo UI for Angular',
|
|
11
11
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
12
|
-
publishDate:
|
|
13
|
-
version: '17.0.0-develop.
|
|
12
|
+
publishDate: 1729174750,
|
|
13
|
+
version: '17.0.0-develop.9',
|
|
14
14
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
15
15
|
};
|
|
@@ -5,8 +5,6 @@
|
|
|
5
5
|
import { Directive, Input, ElementRef, Renderer2 } from '@angular/core';
|
|
6
6
|
import { typographyFontSizeOptions } from './models/font-size';
|
|
7
7
|
import { typographyFontWeightOptions } from './models/font-weight';
|
|
8
|
-
import { typographyMarginOptions } from './models/margin';
|
|
9
|
-
import { marginSides } from './models/margin-sides';
|
|
10
8
|
import { typographyTextAlignOptions } from './models/text-align';
|
|
11
9
|
import { typographyTextTransformOptions } from './models/text-transform';
|
|
12
10
|
import { typographyVariantOptions } from './models/variant';
|
|
@@ -52,26 +50,6 @@ export class TypographyDirective {
|
|
|
52
50
|
textTransformClass() {
|
|
53
51
|
return typographyTextTransformOptions[this.textTransform];
|
|
54
52
|
}
|
|
55
|
-
setMarginClassPerSide(marginSide, value) {
|
|
56
|
-
return `${marginSides[marginSide]}${value}`;
|
|
57
|
-
}
|
|
58
|
-
marginClasses() {
|
|
59
|
-
if (typeof (this.margin) === 'string') {
|
|
60
|
-
return [typographyMarginOptions[this.margin]];
|
|
61
|
-
}
|
|
62
|
-
if (typeof (this.margin) === 'number') {
|
|
63
|
-
return [`k-m-${this.margin}`];
|
|
64
|
-
}
|
|
65
|
-
if (typeof (this.margin) === 'object') {
|
|
66
|
-
const marginClasses = [];
|
|
67
|
-
Object.keys(this.margin).forEach(key => {
|
|
68
|
-
if (isPresent(this.margin[key])) {
|
|
69
|
-
marginClasses.push(this.setMarginClassPerSide(key, this.margin[key]));
|
|
70
|
-
}
|
|
71
|
-
});
|
|
72
|
-
return marginClasses;
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
53
|
setTypographyClasses() {
|
|
76
54
|
const element = this.element.nativeElement;
|
|
77
55
|
this.typographyClasses.forEach((className) => {
|
|
@@ -85,11 +63,6 @@ export class TypographyDirective {
|
|
|
85
63
|
this.textAlignClass(),
|
|
86
64
|
this.themeColorClass()
|
|
87
65
|
];
|
|
88
|
-
if (this.margin) {
|
|
89
|
-
this.marginClasses().forEach(className => {
|
|
90
|
-
this.typographyClasses.push(className);
|
|
91
|
-
});
|
|
92
|
-
}
|
|
93
66
|
this.typographyClasses.forEach((className) => {
|
|
94
67
|
if (isPresent(className)) {
|
|
95
68
|
this.renderer.addClass(element, className);
|
|
@@ -98,7 +71,7 @@ export class TypographyDirective {
|
|
|
98
71
|
}
|
|
99
72
|
}
|
|
100
73
|
TypographyDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TypographyDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
101
|
-
TypographyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TypographyDirective, isStandalone: true, selector: "[kendoTypography]", inputs: { variant: "variant", fontSize: "fontSize", fontWeight: "fontWeight", textAlign: "textAlign", textTransform: "textTransform", themeColor: "themeColor"
|
|
74
|
+
TypographyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", 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 });
|
|
102
75
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TypographyDirective, decorators: [{
|
|
103
76
|
type: Directive,
|
|
104
77
|
args: [{
|
|
@@ -118,6 +91,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
118
91
|
type: Input
|
|
119
92
|
}], themeColor: [{
|
|
120
93
|
type: Input
|
|
121
|
-
}], margin: [{
|
|
122
|
-
type: Input
|
|
123
94
|
}] } });
|
|
@@ -26,88 +26,6 @@ const typographyFontWeightOptions = {
|
|
|
26
26
|
'bold': 'k-font-weight-bold'
|
|
27
27
|
};
|
|
28
28
|
|
|
29
|
-
/**
|
|
30
|
-
* Specifies the applied margin to the element.
|
|
31
|
-
*
|
|
32
|
-
* Passing a [TypographyMarginOption]({% slug api_typography_typographymarginoption %}) will set any of the built - in Kendo classes, which provide default margin in pixels.
|
|
33
|
-
*
|
|
34
|
-
* When using the Default or Material themes, passing a number will apply a margin of 4 times the passed number in pixels.
|
|
35
|
-
* When using the Bootstrap theme the applied margin will be equal to the passed number divided by 4 in rem units.
|
|
36
|
-
* The minimum number value is 0 and the maximum is 24.
|
|
37
|
-
*
|
|
38
|
-
* Passing a [Margin]({% slug api_typography_margin %}) object allows setting the margins for each side.
|
|
39
|
-
*/
|
|
40
|
-
/**
|
|
41
|
-
* @hidden
|
|
42
|
-
*/
|
|
43
|
-
const typographyMarginOptions = {
|
|
44
|
-
'xs': 'k-m-xs',
|
|
45
|
-
'sm': 'k-m-sm',
|
|
46
|
-
'md': 'k-m-md',
|
|
47
|
-
'lg': 'k-m-lg',
|
|
48
|
-
'xl': 'k-m-xl',
|
|
49
|
-
'thin': 'k-m-thin',
|
|
50
|
-
'hair': 'k-m-hair'
|
|
51
|
-
};
|
|
52
|
-
/**
|
|
53
|
-
* @hidden
|
|
54
|
-
*/
|
|
55
|
-
const typographyMarginTopOptions = {
|
|
56
|
-
'xs': 'k-mt-xs',
|
|
57
|
-
'sm': 'k-mt-sm',
|
|
58
|
-
'md': 'k-mt-md',
|
|
59
|
-
'lg': 'k-mt-lg',
|
|
60
|
-
'xl': 'k-mt-xl',
|
|
61
|
-
'thin': 'k-mt-thin',
|
|
62
|
-
'hair': 'k-mt-hair'
|
|
63
|
-
};
|
|
64
|
-
/**
|
|
65
|
-
* @hidden
|
|
66
|
-
*/
|
|
67
|
-
const typographyMarginBottomOptions = {
|
|
68
|
-
'xs': 'k-mb-xs',
|
|
69
|
-
'sm': 'k-mb-sm',
|
|
70
|
-
'md': 'k-mb-md',
|
|
71
|
-
'lg': 'k-mb-lg',
|
|
72
|
-
'xl': 'k-mb-xl',
|
|
73
|
-
'thin': 'k-mb-thin',
|
|
74
|
-
'hair': 'k-mb-hair'
|
|
75
|
-
};
|
|
76
|
-
/**
|
|
77
|
-
* @hidden
|
|
78
|
-
*/
|
|
79
|
-
const typographyMarginLeftOptions = {
|
|
80
|
-
'xs': 'k-ml-xs',
|
|
81
|
-
'sm': 'k-ml-sm',
|
|
82
|
-
'md': 'k-ml-md',
|
|
83
|
-
'lg': 'k-ml-lg',
|
|
84
|
-
'xl': 'k-ml-xl',
|
|
85
|
-
'thin': 'k-ml-thin',
|
|
86
|
-
'hair': 'k-ml-hair'
|
|
87
|
-
};
|
|
88
|
-
/**
|
|
89
|
-
* @hidden
|
|
90
|
-
*/
|
|
91
|
-
const typographyMarginRightOptions = {
|
|
92
|
-
'xs': 'k-mr-xs',
|
|
93
|
-
'sm': 'k-mr-sm',
|
|
94
|
-
'md': 'k-mr-md',
|
|
95
|
-
'lg': 'k-mr-lg',
|
|
96
|
-
'xl': 'k-mr-xl',
|
|
97
|
-
'thin': 'k-mr-thin',
|
|
98
|
-
'hair': 'k-mr-hair'
|
|
99
|
-
};
|
|
100
|
-
|
|
101
|
-
/**
|
|
102
|
-
* @hidden
|
|
103
|
-
*/
|
|
104
|
-
const marginSides = {
|
|
105
|
-
'top': 'k-mt-',
|
|
106
|
-
'right': 'k-mr-',
|
|
107
|
-
'bottom': 'k-mb-',
|
|
108
|
-
'left': 'k-ml-'
|
|
109
|
-
};
|
|
110
|
-
|
|
111
29
|
/**
|
|
112
30
|
* @hidden
|
|
113
31
|
*/
|
|
@@ -154,8 +72,8 @@ const packageMetadata = {
|
|
|
154
72
|
name: '@progress/kendo-angular-typography',
|
|
155
73
|
productName: 'Kendo UI for Angular',
|
|
156
74
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
157
|
-
publishDate:
|
|
158
|
-
version: '17.0.0-develop.
|
|
75
|
+
publishDate: 1729174750,
|
|
76
|
+
version: '17.0.0-develop.9',
|
|
159
77
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
160
78
|
};
|
|
161
79
|
|
|
@@ -197,26 +115,6 @@ class TypographyDirective {
|
|
|
197
115
|
textTransformClass() {
|
|
198
116
|
return typographyTextTransformOptions[this.textTransform];
|
|
199
117
|
}
|
|
200
|
-
setMarginClassPerSide(marginSide, value) {
|
|
201
|
-
return `${marginSides[marginSide]}${value}`;
|
|
202
|
-
}
|
|
203
|
-
marginClasses() {
|
|
204
|
-
if (typeof (this.margin) === 'string') {
|
|
205
|
-
return [typographyMarginOptions[this.margin]];
|
|
206
|
-
}
|
|
207
|
-
if (typeof (this.margin) === 'number') {
|
|
208
|
-
return [`k-m-${this.margin}`];
|
|
209
|
-
}
|
|
210
|
-
if (typeof (this.margin) === 'object') {
|
|
211
|
-
const marginClasses = [];
|
|
212
|
-
Object.keys(this.margin).forEach(key => {
|
|
213
|
-
if (isPresent(this.margin[key])) {
|
|
214
|
-
marginClasses.push(this.setMarginClassPerSide(key, this.margin[key]));
|
|
215
|
-
}
|
|
216
|
-
});
|
|
217
|
-
return marginClasses;
|
|
218
|
-
}
|
|
219
|
-
}
|
|
220
118
|
setTypographyClasses() {
|
|
221
119
|
const element = this.element.nativeElement;
|
|
222
120
|
this.typographyClasses.forEach((className) => {
|
|
@@ -230,11 +128,6 @@ class TypographyDirective {
|
|
|
230
128
|
this.textAlignClass(),
|
|
231
129
|
this.themeColorClass()
|
|
232
130
|
];
|
|
233
|
-
if (this.margin) {
|
|
234
|
-
this.marginClasses().forEach(className => {
|
|
235
|
-
this.typographyClasses.push(className);
|
|
236
|
-
});
|
|
237
|
-
}
|
|
238
131
|
this.typographyClasses.forEach((className) => {
|
|
239
132
|
if (isPresent(className)) {
|
|
240
133
|
this.renderer.addClass(element, className);
|
|
@@ -243,7 +136,7 @@ class TypographyDirective {
|
|
|
243
136
|
}
|
|
244
137
|
}
|
|
245
138
|
TypographyDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TypographyDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
246
|
-
TypographyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TypographyDirective, isStandalone: true, selector: "[kendoTypography]", inputs: { variant: "variant", fontSize: "fontSize", fontWeight: "fontWeight", textAlign: "textAlign", textTransform: "textTransform", themeColor: "themeColor"
|
|
139
|
+
TypographyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", 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 });
|
|
247
140
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TypographyDirective, decorators: [{
|
|
248
141
|
type: Directive,
|
|
249
142
|
args: [{
|
|
@@ -263,8 +156,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
263
156
|
type: Input
|
|
264
157
|
}], themeColor: [{
|
|
265
158
|
type: Input
|
|
266
|
-
}], margin: [{
|
|
267
|
-
type: Input
|
|
268
159
|
}] } });
|
|
269
160
|
|
|
270
161
|
/**
|
|
@@ -26,88 +26,6 @@ const typographyFontWeightOptions = {
|
|
|
26
26
|
'bold': 'k-font-weight-bold'
|
|
27
27
|
};
|
|
28
28
|
|
|
29
|
-
/**
|
|
30
|
-
* Specifies the applied margin to the element.
|
|
31
|
-
*
|
|
32
|
-
* Passing a [TypographyMarginOption]({% slug api_typography_typographymarginoption %}) will set any of the built - in Kendo classes, which provide default margin in pixels.
|
|
33
|
-
*
|
|
34
|
-
* When using the Default or Material themes, passing a number will apply a margin of 4 times the passed number in pixels.
|
|
35
|
-
* When using the Bootstrap theme the applied margin will be equal to the passed number divided by 4 in rem units.
|
|
36
|
-
* The minimum number value is 0 and the maximum is 24.
|
|
37
|
-
*
|
|
38
|
-
* Passing a [Margin]({% slug api_typography_margin %}) object allows setting the margins for each side.
|
|
39
|
-
*/
|
|
40
|
-
/**
|
|
41
|
-
* @hidden
|
|
42
|
-
*/
|
|
43
|
-
const typographyMarginOptions = {
|
|
44
|
-
'xs': 'k-m-xs',
|
|
45
|
-
'sm': 'k-m-sm',
|
|
46
|
-
'md': 'k-m-md',
|
|
47
|
-
'lg': 'k-m-lg',
|
|
48
|
-
'xl': 'k-m-xl',
|
|
49
|
-
'thin': 'k-m-thin',
|
|
50
|
-
'hair': 'k-m-hair'
|
|
51
|
-
};
|
|
52
|
-
/**
|
|
53
|
-
* @hidden
|
|
54
|
-
*/
|
|
55
|
-
const typographyMarginTopOptions = {
|
|
56
|
-
'xs': 'k-mt-xs',
|
|
57
|
-
'sm': 'k-mt-sm',
|
|
58
|
-
'md': 'k-mt-md',
|
|
59
|
-
'lg': 'k-mt-lg',
|
|
60
|
-
'xl': 'k-mt-xl',
|
|
61
|
-
'thin': 'k-mt-thin',
|
|
62
|
-
'hair': 'k-mt-hair'
|
|
63
|
-
};
|
|
64
|
-
/**
|
|
65
|
-
* @hidden
|
|
66
|
-
*/
|
|
67
|
-
const typographyMarginBottomOptions = {
|
|
68
|
-
'xs': 'k-mb-xs',
|
|
69
|
-
'sm': 'k-mb-sm',
|
|
70
|
-
'md': 'k-mb-md',
|
|
71
|
-
'lg': 'k-mb-lg',
|
|
72
|
-
'xl': 'k-mb-xl',
|
|
73
|
-
'thin': 'k-mb-thin',
|
|
74
|
-
'hair': 'k-mb-hair'
|
|
75
|
-
};
|
|
76
|
-
/**
|
|
77
|
-
* @hidden
|
|
78
|
-
*/
|
|
79
|
-
const typographyMarginLeftOptions = {
|
|
80
|
-
'xs': 'k-ml-xs',
|
|
81
|
-
'sm': 'k-ml-sm',
|
|
82
|
-
'md': 'k-ml-md',
|
|
83
|
-
'lg': 'k-ml-lg',
|
|
84
|
-
'xl': 'k-ml-xl',
|
|
85
|
-
'thin': 'k-ml-thin',
|
|
86
|
-
'hair': 'k-ml-hair'
|
|
87
|
-
};
|
|
88
|
-
/**
|
|
89
|
-
* @hidden
|
|
90
|
-
*/
|
|
91
|
-
const typographyMarginRightOptions = {
|
|
92
|
-
'xs': 'k-mr-xs',
|
|
93
|
-
'sm': 'k-mr-sm',
|
|
94
|
-
'md': 'k-mr-md',
|
|
95
|
-
'lg': 'k-mr-lg',
|
|
96
|
-
'xl': 'k-mr-xl',
|
|
97
|
-
'thin': 'k-mr-thin',
|
|
98
|
-
'hair': 'k-mr-hair'
|
|
99
|
-
};
|
|
100
|
-
|
|
101
|
-
/**
|
|
102
|
-
* @hidden
|
|
103
|
-
*/
|
|
104
|
-
const marginSides = {
|
|
105
|
-
'top': 'k-mt-',
|
|
106
|
-
'right': 'k-mr-',
|
|
107
|
-
'bottom': 'k-mb-',
|
|
108
|
-
'left': 'k-ml-'
|
|
109
|
-
};
|
|
110
|
-
|
|
111
29
|
/**
|
|
112
30
|
* @hidden
|
|
113
31
|
*/
|
|
@@ -154,8 +72,8 @@ const packageMetadata = {
|
|
|
154
72
|
name: '@progress/kendo-angular-typography',
|
|
155
73
|
productName: 'Kendo UI for Angular',
|
|
156
74
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
157
|
-
publishDate:
|
|
158
|
-
version: '17.0.0-develop.
|
|
75
|
+
publishDate: 1729174750,
|
|
76
|
+
version: '17.0.0-develop.9',
|
|
159
77
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
160
78
|
};
|
|
161
79
|
|
|
@@ -197,26 +115,6 @@ class TypographyDirective {
|
|
|
197
115
|
textTransformClass() {
|
|
198
116
|
return typographyTextTransformOptions[this.textTransform];
|
|
199
117
|
}
|
|
200
|
-
setMarginClassPerSide(marginSide, value) {
|
|
201
|
-
return `${marginSides[marginSide]}${value}`;
|
|
202
|
-
}
|
|
203
|
-
marginClasses() {
|
|
204
|
-
if (typeof (this.margin) === 'string') {
|
|
205
|
-
return [typographyMarginOptions[this.margin]];
|
|
206
|
-
}
|
|
207
|
-
if (typeof (this.margin) === 'number') {
|
|
208
|
-
return [`k-m-${this.margin}`];
|
|
209
|
-
}
|
|
210
|
-
if (typeof (this.margin) === 'object') {
|
|
211
|
-
const marginClasses = [];
|
|
212
|
-
Object.keys(this.margin).forEach(key => {
|
|
213
|
-
if (isPresent(this.margin[key])) {
|
|
214
|
-
marginClasses.push(this.setMarginClassPerSide(key, this.margin[key]));
|
|
215
|
-
}
|
|
216
|
-
});
|
|
217
|
-
return marginClasses;
|
|
218
|
-
}
|
|
219
|
-
}
|
|
220
118
|
setTypographyClasses() {
|
|
221
119
|
const element = this.element.nativeElement;
|
|
222
120
|
this.typographyClasses.forEach((className) => {
|
|
@@ -230,11 +128,6 @@ class TypographyDirective {
|
|
|
230
128
|
this.textAlignClass(),
|
|
231
129
|
this.themeColorClass()
|
|
232
130
|
];
|
|
233
|
-
if (this.margin) {
|
|
234
|
-
this.marginClasses().forEach(className => {
|
|
235
|
-
this.typographyClasses.push(className);
|
|
236
|
-
});
|
|
237
|
-
}
|
|
238
131
|
this.typographyClasses.forEach((className) => {
|
|
239
132
|
if (isPresent(className)) {
|
|
240
133
|
this.renderer.addClass(element, className);
|
|
@@ -243,7 +136,7 @@ class TypographyDirective {
|
|
|
243
136
|
}
|
|
244
137
|
}
|
|
245
138
|
TypographyDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TypographyDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
246
|
-
TypographyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TypographyDirective, isStandalone: true, selector: "[kendoTypography]", inputs: { variant: "variant", fontSize: "fontSize", fontWeight: "fontWeight", textAlign: "textAlign", textTransform: "textTransform", themeColor: "themeColor"
|
|
139
|
+
TypographyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", 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 });
|
|
247
140
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TypographyDirective, decorators: [{
|
|
248
141
|
type: Directive,
|
|
249
142
|
args: [{
|
|
@@ -263,8 +156,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
263
156
|
type: Input
|
|
264
157
|
}], themeColor: [{
|
|
265
158
|
type: Input
|
|
266
|
-
}], margin: [{
|
|
267
|
-
type: Input
|
|
268
159
|
}] } });
|
|
269
160
|
|
|
270
161
|
/**
|
package/index.d.ts
CHANGED
|
@@ -10,5 +10,4 @@ export { TypographyTextAlign } from './models/text-align';
|
|
|
10
10
|
export { TypographyTextTransform } from './models/text-transform';
|
|
11
11
|
export { TypographyVariant } from './models/variant';
|
|
12
12
|
export { TypographyThemeColor } from './models/theme-color';
|
|
13
|
-
export { TypographyMargin } from './models/margin';
|
|
14
13
|
export * from './directives';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-angular-typography",
|
|
3
|
-
"version": "17.0.0-develop.
|
|
3
|
+
"version": "17.0.0-develop.9",
|
|
4
4
|
"description": "Kendo UI Angular Typography",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
6
6
|
"author": "Progress",
|
|
@@ -23,12 +23,12 @@
|
|
|
23
23
|
"@angular/core": "15 - 18",
|
|
24
24
|
"@angular/platform-browser": "15 - 18",
|
|
25
25
|
"@progress/kendo-licensing": "^1.0.2",
|
|
26
|
-
"@progress/kendo-angular-common": "17.0.0-develop.
|
|
26
|
+
"@progress/kendo-angular-common": "17.0.0-develop.9",
|
|
27
27
|
"rxjs": "^6.5.3 || ^7.0.0"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
30
|
"tslib": "^2.3.1",
|
|
31
|
-
"@progress/kendo-angular-schematics": "17.0.0-develop.
|
|
31
|
+
"@progress/kendo-angular-schematics": "17.0.0-develop.9"
|
|
32
32
|
},
|
|
33
33
|
"schematics": "./schematics/collection.json",
|
|
34
34
|
"module": "fesm2015/progress-kendo-angular-typography.mjs",
|
|
@@ -5,7 +5,6 @@
|
|
|
5
5
|
import { ElementRef, Renderer2, OnChanges } from '@angular/core';
|
|
6
6
|
import { TypographyFontSize } from './models/font-size';
|
|
7
7
|
import { TypographyFontWeight } from './models/font-weight';
|
|
8
|
-
import { TypographyMargin } from './models/margin';
|
|
9
8
|
import { TypographyTextAlign } from './models/text-align';
|
|
10
9
|
import { TypographyTextTransform } from './models/text-transform';
|
|
11
10
|
import { TypographyThemeColor } from './models/theme-color';
|
|
@@ -48,10 +47,6 @@ export declare class TypographyDirective implements OnChanges {
|
|
|
48
47
|
* Applies the theme color to the element.
|
|
49
48
|
*/
|
|
50
49
|
themeColor: TypographyThemeColor;
|
|
51
|
-
/**
|
|
52
|
-
* Applies the margin sizes to the element.
|
|
53
|
-
*/
|
|
54
|
-
margin: TypographyMargin;
|
|
55
50
|
private typographyClasses;
|
|
56
51
|
constructor(elementWrapper: ElementRef, renderer: Renderer2, element: ElementRef);
|
|
57
52
|
ngOnChanges(): void;
|
|
@@ -61,9 +56,7 @@ export declare class TypographyDirective implements OnChanges {
|
|
|
61
56
|
private fontWeightClass;
|
|
62
57
|
private fontSizeClass;
|
|
63
58
|
private textTransformClass;
|
|
64
|
-
private setMarginClassPerSide;
|
|
65
|
-
private marginClasses;
|
|
66
59
|
private setTypographyClasses;
|
|
67
60
|
static ɵfac: i0.ɵɵFactoryDeclaration<TypographyDirective, never>;
|
|
68
|
-
static ɵdir: i0.ɵɵDirectiveDeclaration<TypographyDirective, "[kendoTypography]", ["kendoTypography"], { "variant": "variant"; "fontSize": "fontSize"; "fontWeight": "fontWeight"; "textAlign": "textAlign"; "textTransform": "textTransform"; "themeColor": "themeColor";
|
|
61
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<TypographyDirective, "[kendoTypography]", ["kendoTypography"], { "variant": "variant"; "fontSize": "fontSize"; "fontWeight": "fontWeight"; "textAlign": "textAlign"; "textTransform": "textTransform"; "themeColor": "themeColor"; }, {}, never, never, true, never>;
|
|
69
62
|
}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2024 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
/**
|
|
6
|
-
* @hidden
|
|
7
|
-
*/
|
|
8
|
-
export const marginSides = {
|
|
9
|
-
'top': 'k-mt-',
|
|
10
|
-
'right': 'k-mr-',
|
|
11
|
-
'bottom': 'k-mb-',
|
|
12
|
-
'left': 'k-ml-'
|
|
13
|
-
};
|
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2024 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
/**
|
|
6
|
-
* Specifies the applied margin to the element.
|
|
7
|
-
*
|
|
8
|
-
* Passing a [TypographyMarginOption]({% slug api_typography_typographymarginoption %}) will set any of the built - in Kendo classes, which provide default margin in pixels.
|
|
9
|
-
*
|
|
10
|
-
* When using the Default or Material themes, passing a number will apply a margin of 4 times the passed number in pixels.
|
|
11
|
-
* When using the Bootstrap theme the applied margin will be equal to the passed number divided by 4 in rem units.
|
|
12
|
-
* The minimum number value is 0 and the maximum is 24.
|
|
13
|
-
*
|
|
14
|
-
* Passing a [Margin]({% slug api_typography_margin %}) object allows setting the margins for each side.
|
|
15
|
-
*/
|
|
16
|
-
/**
|
|
17
|
-
* @hidden
|
|
18
|
-
*/
|
|
19
|
-
export const typographyMarginOptions = {
|
|
20
|
-
'xs': 'k-m-xs',
|
|
21
|
-
'sm': 'k-m-sm',
|
|
22
|
-
'md': 'k-m-md',
|
|
23
|
-
'lg': 'k-m-lg',
|
|
24
|
-
'xl': 'k-m-xl',
|
|
25
|
-
'thin': 'k-m-thin',
|
|
26
|
-
'hair': 'k-m-hair'
|
|
27
|
-
};
|
|
28
|
-
/**
|
|
29
|
-
* @hidden
|
|
30
|
-
*/
|
|
31
|
-
export const typographyMarginTopOptions = {
|
|
32
|
-
'xs': 'k-mt-xs',
|
|
33
|
-
'sm': 'k-mt-sm',
|
|
34
|
-
'md': 'k-mt-md',
|
|
35
|
-
'lg': 'k-mt-lg',
|
|
36
|
-
'xl': 'k-mt-xl',
|
|
37
|
-
'thin': 'k-mt-thin',
|
|
38
|
-
'hair': 'k-mt-hair'
|
|
39
|
-
};
|
|
40
|
-
/**
|
|
41
|
-
* @hidden
|
|
42
|
-
*/
|
|
43
|
-
export const typographyMarginBottomOptions = {
|
|
44
|
-
'xs': 'k-mb-xs',
|
|
45
|
-
'sm': 'k-mb-sm',
|
|
46
|
-
'md': 'k-mb-md',
|
|
47
|
-
'lg': 'k-mb-lg',
|
|
48
|
-
'xl': 'k-mb-xl',
|
|
49
|
-
'thin': 'k-mb-thin',
|
|
50
|
-
'hair': 'k-mb-hair'
|
|
51
|
-
};
|
|
52
|
-
/**
|
|
53
|
-
* @hidden
|
|
54
|
-
*/
|
|
55
|
-
export const typographyMarginLeftOptions = {
|
|
56
|
-
'xs': 'k-ml-xs',
|
|
57
|
-
'sm': 'k-ml-sm',
|
|
58
|
-
'md': 'k-ml-md',
|
|
59
|
-
'lg': 'k-ml-lg',
|
|
60
|
-
'xl': 'k-ml-xl',
|
|
61
|
-
'thin': 'k-ml-thin',
|
|
62
|
-
'hair': 'k-ml-hair'
|
|
63
|
-
};
|
|
64
|
-
/**
|
|
65
|
-
* @hidden
|
|
66
|
-
*/
|
|
67
|
-
export const typographyMarginRightOptions = {
|
|
68
|
-
'xs': 'k-mr-xs',
|
|
69
|
-
'sm': 'k-mr-sm',
|
|
70
|
-
'md': 'k-mr-md',
|
|
71
|
-
'lg': 'k-mr-lg',
|
|
72
|
-
'xl': 'k-mr-xl',
|
|
73
|
-
'thin': 'k-mr-thin',
|
|
74
|
-
'hair': 'k-mr-hair'
|
|
75
|
-
};
|
package/models/margin-sides.d.ts
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2024 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
/**
|
|
6
|
-
* @hidden
|
|
7
|
-
*/
|
|
8
|
-
export declare const marginSides: {
|
|
9
|
-
top: string;
|
|
10
|
-
right: string;
|
|
11
|
-
bottom: string;
|
|
12
|
-
left: string;
|
|
13
|
-
};
|
package/models/margin.d.ts
DELETED
|
@@ -1,123 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2024 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
/**
|
|
6
|
-
* Specifies the applied margin to the element.
|
|
7
|
-
*
|
|
8
|
-
* Passing a [TypographyMarginOption]({% slug api_typography_typographymarginoption %}) will set any of the built - in Kendo classes, which provide default margin in pixels.
|
|
9
|
-
*
|
|
10
|
-
* When using the Default or Material themes, passing a number will apply a margin of 4 times the passed number in pixels.
|
|
11
|
-
* When using the Bootstrap theme the applied margin will be equal to the passed number divided by 4 in rem units.
|
|
12
|
-
* The minimum number value is 0 and the maximum is 24.
|
|
13
|
-
*
|
|
14
|
-
* Passing a [Margin]({% slug api_typography_margin %}) object allows setting the margins for each side.
|
|
15
|
-
*/
|
|
16
|
-
export declare type TypographyMargin = TypographyMarginOption | Margin;
|
|
17
|
-
/**
|
|
18
|
-
* The possible values for the Default and Material themes are:
|
|
19
|
-
* * `xs` —Applies 4px margin.
|
|
20
|
-
* * `sm` —Applies 8px margin.
|
|
21
|
-
* * `md` —Applies 12px margin.
|
|
22
|
-
* * `lg` —Applies 16px margin.
|
|
23
|
-
* * `xl` —Applies 24px margin.
|
|
24
|
-
* * `thin` —Applies 2px margin.
|
|
25
|
-
* * `hair` —Applies 1px margin.
|
|
26
|
-
* * Passing a number will apply a margin of 4 times the passed number in pixels. The minimum number value is 0 and the maximum is 24.
|
|
27
|
-
*
|
|
28
|
-
* The possible values for the Bootstrap theme are:
|
|
29
|
-
* * `xs` —Applies 0.25rem margin.
|
|
30
|
-
* * `sm` —Applies 0.5rem margin.
|
|
31
|
-
* * `md` —Applies 0.75rem margin.
|
|
32
|
-
* * `lg` —Applies 1rem margin.
|
|
33
|
-
* * `xl` —Applies 1.25rem margin.
|
|
34
|
-
* * `thin` —Applies 0.125rem margin.
|
|
35
|
-
* * `hair` —Applies 0.0625rem margin.
|
|
36
|
-
* * Passing a number will apply a margin equal to the passed number divided by 4 in rem units. The minimum number value is 0 and the maximum is 24.
|
|
37
|
-
*/
|
|
38
|
-
export declare type TypographyMarginOption = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'thin' | 'hair' | number;
|
|
39
|
-
/**
|
|
40
|
-
* @hidden
|
|
41
|
-
*/
|
|
42
|
-
export declare const typographyMarginOptions: {
|
|
43
|
-
xs: string;
|
|
44
|
-
sm: string;
|
|
45
|
-
md: string;
|
|
46
|
-
lg: string;
|
|
47
|
-
xl: string;
|
|
48
|
-
thin: string;
|
|
49
|
-
hair: string;
|
|
50
|
-
};
|
|
51
|
-
/**
|
|
52
|
-
* @hidden
|
|
53
|
-
*/
|
|
54
|
-
export declare const typographyMarginTopOptions: {
|
|
55
|
-
xs: string;
|
|
56
|
-
sm: string;
|
|
57
|
-
md: string;
|
|
58
|
-
lg: string;
|
|
59
|
-
xl: string;
|
|
60
|
-
thin: string;
|
|
61
|
-
hair: string;
|
|
62
|
-
};
|
|
63
|
-
/**
|
|
64
|
-
* @hidden
|
|
65
|
-
*/
|
|
66
|
-
export declare const typographyMarginBottomOptions: {
|
|
67
|
-
xs: string;
|
|
68
|
-
sm: string;
|
|
69
|
-
md: string;
|
|
70
|
-
lg: string;
|
|
71
|
-
xl: string;
|
|
72
|
-
thin: string;
|
|
73
|
-
hair: string;
|
|
74
|
-
};
|
|
75
|
-
/**
|
|
76
|
-
* @hidden
|
|
77
|
-
*/
|
|
78
|
-
export declare const typographyMarginLeftOptions: {
|
|
79
|
-
xs: string;
|
|
80
|
-
sm: string;
|
|
81
|
-
md: string;
|
|
82
|
-
lg: string;
|
|
83
|
-
xl: string;
|
|
84
|
-
thin: string;
|
|
85
|
-
hair: string;
|
|
86
|
-
};
|
|
87
|
-
/**
|
|
88
|
-
* @hidden
|
|
89
|
-
*/
|
|
90
|
-
export declare const typographyMarginRightOptions: {
|
|
91
|
-
xs: string;
|
|
92
|
-
sm: string;
|
|
93
|
-
md: string;
|
|
94
|
-
lg: string;
|
|
95
|
-
xl: string;
|
|
96
|
-
thin: string;
|
|
97
|
-
hair: string;
|
|
98
|
-
};
|
|
99
|
-
/**
|
|
100
|
-
* The margin configuration for each side.
|
|
101
|
-
* Passing a [TypographyMarginOption]({% slug api_typography_typographymarginoption %}) will set any of the built - in Kendo classes, which provide default margins in pixels or rems depending on the used theme.
|
|
102
|
-
* Passing a number will apply a margin of 4 times the passed number in pixels, when using the Default or Material themes.
|
|
103
|
-
* When using the Bootstrap theme, passing a number will apply a margin equal to the passed number divided by 4 in rem units.
|
|
104
|
-
* The minimum number value is 0 and the maximum is 24.
|
|
105
|
-
*/
|
|
106
|
-
export interface Margin {
|
|
107
|
-
/**
|
|
108
|
-
* The top margin.
|
|
109
|
-
*/
|
|
110
|
-
top?: TypographyMarginOption | number;
|
|
111
|
-
/**
|
|
112
|
-
* The right margin.
|
|
113
|
-
*/
|
|
114
|
-
right?: TypographyMarginOption | number;
|
|
115
|
-
/**
|
|
116
|
-
* The bottom margin.
|
|
117
|
-
*/
|
|
118
|
-
bottom?: TypographyMarginOption | number;
|
|
119
|
-
/**
|
|
120
|
-
* The left margin.
|
|
121
|
-
*/
|
|
122
|
-
left?: TypographyMarginOption | number;
|
|
123
|
-
}
|