tuix-webcomponents 0.0.7 → 0.0.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/dist/src/enums/tuix-text.enums.d.ts +24 -0
- package/dist/src/enums/tuix-text.enums.js +29 -0
- package/dist/src/enums/tuix-text.enums.js.map +1 -0
- package/dist/src/index.d.ts +1 -0
- package/dist/src/index.js +2 -0
- package/dist/src/index.js.map +1 -0
- package/dist/src/tuix-text/TuixText.d.ts +10 -0
- package/dist/src/tuix-text/TuixText.js +152 -0
- package/dist/src/tuix-text/TuixText.js.map +1 -0
- package/dist/src/utils/colors.d.ts +10 -0
- package/dist/src/utils/colors.js +11 -0
- package/dist/src/utils/colors.js.map +1 -0
- package/package.json +2 -1
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
export declare enum TextSize {
|
|
2
|
+
XL = "xl",
|
|
3
|
+
L = "l",
|
|
4
|
+
M = "m",
|
|
5
|
+
S = "s",
|
|
6
|
+
XS = "xs"
|
|
7
|
+
}
|
|
8
|
+
export declare enum TextColor {
|
|
9
|
+
Primary = "primary",
|
|
10
|
+
Secondary = "secondary",
|
|
11
|
+
Grey = "grey",
|
|
12
|
+
LightGrey = "lightGrey",
|
|
13
|
+
Disabled = "disabled",
|
|
14
|
+
Validation = "validation",
|
|
15
|
+
Error = "error",
|
|
16
|
+
Success = "success"
|
|
17
|
+
}
|
|
18
|
+
export declare enum TextType {
|
|
19
|
+
Headline = "headline",
|
|
20
|
+
Body = "body",
|
|
21
|
+
Button = "button_link",
|
|
22
|
+
Link = "button_link",
|
|
23
|
+
Fields = "fields"
|
|
24
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
export var TextSize;
|
|
3
|
+
(function (TextSize) {
|
|
4
|
+
TextSize["XL"] = "xl";
|
|
5
|
+
TextSize["L"] = "l";
|
|
6
|
+
TextSize["M"] = "m";
|
|
7
|
+
TextSize["S"] = "s";
|
|
8
|
+
TextSize["XS"] = "xs";
|
|
9
|
+
})(TextSize || (TextSize = {}));
|
|
10
|
+
export var TextColor;
|
|
11
|
+
(function (TextColor) {
|
|
12
|
+
TextColor["Primary"] = "primary";
|
|
13
|
+
TextColor["Secondary"] = "secondary";
|
|
14
|
+
TextColor["Grey"] = "grey";
|
|
15
|
+
TextColor["LightGrey"] = "lightGrey";
|
|
16
|
+
TextColor["Disabled"] = "disabled";
|
|
17
|
+
TextColor["Validation"] = "validation";
|
|
18
|
+
TextColor["Error"] = "error";
|
|
19
|
+
TextColor["Success"] = "success";
|
|
20
|
+
})(TextColor || (TextColor = {}));
|
|
21
|
+
export var TextType;
|
|
22
|
+
(function (TextType) {
|
|
23
|
+
TextType["Headline"] = "headline";
|
|
24
|
+
TextType["Body"] = "body";
|
|
25
|
+
TextType["Button"] = "button_link";
|
|
26
|
+
TextType["Link"] = "button_link";
|
|
27
|
+
TextType["Fields"] = "fields";
|
|
28
|
+
})(TextType || (TextType = {}));
|
|
29
|
+
//# sourceMappingURL=tuix-text.enums.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tuix-text.enums.js","sourceRoot":"","sources":["../../../src/enums/tuix-text.enums.ts"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,MAAM,CAAN,IAAY,QAMX;AAND,WAAY,QAAQ;IAClB,qBAAS,CAAA;IACT,mBAAO,CAAA;IACP,mBAAO,CAAA;IACP,mBAAO,CAAA;IACP,qBAAS,CAAA;AACX,CAAC,EANW,QAAQ,KAAR,QAAQ,QAMnB;AAED,MAAM,CAAN,IAAY,SASX;AATD,WAAY,SAAS;IACnB,gCAAmB,CAAA;IACnB,oCAAuB,CAAA;IACvB,0BAAa,CAAA;IACb,oCAAuB,CAAA;IACvB,kCAAqB,CAAA;IACrB,sCAAyB,CAAA;IACzB,4BAAe,CAAA;IACf,gCAAmB,CAAA;AACrB,CAAC,EATW,SAAS,KAAT,SAAS,QASpB;AAED,MAAM,CAAN,IAAY,QAMX;AAND,WAAY,QAAQ;IAClB,iCAAqB,CAAA;IACrB,yBAAa,CAAA;IACb,kCAAsB,CAAA;IACtB,gCAAoB,CAAA;IACpB,6BAAiB,CAAA;AACnB,CAAC,EANW,QAAQ,KAAR,QAAQ,QAMnB","sourcesContent":["/* eslint-disable */\nexport enum TextSize {\n XL = 'xl',\n L = 'l',\n M = 'm',\n S = 's',\n XS = 'xs',\n}\n\nexport enum TextColor {\n Primary = 'primary',\n Secondary = 'secondary',\n Grey = 'grey',\n LightGrey = 'lightGrey',\n Disabled = 'disabled',\n Validation = 'validation',\n Error = 'error',\n Success = 'success',\n}\n\nexport enum TextType {\n Headline = 'headline',\n Body = 'body',\n Button = 'button_link',\n Link = 'button_link',\n Fields = 'fields',\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { TuixText } from './tuix-text/TuixText.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC","sourcesContent":["export { TuixText } from './tuix-text/TuixText.js';\n"]}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
import { TextType, TextColor, TextSize } from '../enums/tuix-text.enums.js';
|
|
3
|
+
export declare class TuixText extends LitElement {
|
|
4
|
+
size?: TextSize;
|
|
5
|
+
color?: TextColor;
|
|
6
|
+
type?: TextType;
|
|
7
|
+
static styles: import("lit").CSSResult;
|
|
8
|
+
getTextClass(): string;
|
|
9
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
10
|
+
}
|
|
@@ -0,0 +1,152 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { html, css, LitElement } from 'lit';
|
|
3
|
+
import { styleMap } from 'lit/directives/style-map.js';
|
|
4
|
+
import { customElement, property } from 'lit/decorators.js';
|
|
5
|
+
import { TextType, TextColor } from '../enums/tuix-text.enums.js';
|
|
6
|
+
import { ColorText } from '../utils/colors.js';
|
|
7
|
+
let TuixText = class TuixText extends LitElement {
|
|
8
|
+
getTextClass() {
|
|
9
|
+
return `${this.type} ${this.size}`;
|
|
10
|
+
}
|
|
11
|
+
render() {
|
|
12
|
+
return html `<slot
|
|
13
|
+
class="text ${this.getTextClass()}"
|
|
14
|
+
style="${styleMap({ color: ColorText[this.color || TextColor.Primary] })}"
|
|
15
|
+
></slot>`;
|
|
16
|
+
}
|
|
17
|
+
};
|
|
18
|
+
TuixText.styles = css `
|
|
19
|
+
.text {
|
|
20
|
+
font-family: 'Rubik', sans-serif;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.text.headline.xl {
|
|
24
|
+
font-size: 4rem;
|
|
25
|
+
font-weight: 600;
|
|
26
|
+
line-height: 4.4rem;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.text.headline.l {
|
|
30
|
+
font-size: 3.5rem;
|
|
31
|
+
font-weight: 600;
|
|
32
|
+
line-height: 4.2rem;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.text.headline.m {
|
|
36
|
+
font-size: 2.25rem;
|
|
37
|
+
font-weight: 500;
|
|
38
|
+
line-height: 2.7rem;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.text.headline.s {
|
|
42
|
+
font-size: 1.5rem;
|
|
43
|
+
font-weight: 500;
|
|
44
|
+
line-height: 1.8rem;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.text.headline.xs {
|
|
48
|
+
font-size: 1.125rem;
|
|
49
|
+
font-weight: 500;
|
|
50
|
+
line-height: 1.35;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.text.body.m {
|
|
54
|
+
font-size: 1rem;
|
|
55
|
+
font-weight: 300;
|
|
56
|
+
line-height: 1.4rem;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.text.body.s {
|
|
60
|
+
font-size: 0.875rem;
|
|
61
|
+
font-weight: 300;
|
|
62
|
+
line-height: 1.225rem;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.text.button_link.xl {
|
|
66
|
+
font-size: 1.25rem;
|
|
67
|
+
font-weight: 400;
|
|
68
|
+
line-height: 1.5rem;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.text.button_link.l {
|
|
72
|
+
font-size: 1.25rem;
|
|
73
|
+
font-weight: 400;
|
|
74
|
+
line-height: 1.5rem;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
@media only screen and (max-width: 40rem) {
|
|
78
|
+
.text.button_link.m {
|
|
79
|
+
font-size: 1rem;
|
|
80
|
+
font-weight: 400;
|
|
81
|
+
line-height: 1.25rem;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.text.body.m {
|
|
85
|
+
line-height: 1.3rem;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.text.body.s {
|
|
89
|
+
line-height: 1.1375rem;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.text.headline.xl {
|
|
93
|
+
font-size: 3rem;
|
|
94
|
+
line-height: 3.3rem;
|
|
95
|
+
}
|
|
96
|
+
.text.headline.l {
|
|
97
|
+
font-size: 2rem;
|
|
98
|
+
line-height: 2.4rem;
|
|
99
|
+
}
|
|
100
|
+
.text.headline.m {
|
|
101
|
+
font-size: 1.5rem;
|
|
102
|
+
line-height: 1.8rem;
|
|
103
|
+
}
|
|
104
|
+
.text.headline.s {
|
|
105
|
+
font-size: 1.125rem;
|
|
106
|
+
line-height: 1.35rem;
|
|
107
|
+
}
|
|
108
|
+
.text.headline.xs {
|
|
109
|
+
font-size: 1rem;
|
|
110
|
+
line-height: 1.2rem;
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
@media only screen and (max-width: 20rem) {
|
|
115
|
+
.text.button_link.s {
|
|
116
|
+
font-size: 0.875rem;
|
|
117
|
+
font-weight: 400;
|
|
118
|
+
line-height: 1rem;
|
|
119
|
+
}
|
|
120
|
+
.text.button_link.xs {
|
|
121
|
+
font-size: 0.875rem;
|
|
122
|
+
font-weight: 400;
|
|
123
|
+
line-height: 1rem;
|
|
124
|
+
}
|
|
125
|
+
.text.headline.xl {
|
|
126
|
+
font-size: 1.5rem;
|
|
127
|
+
line-height: 1.8rem;
|
|
128
|
+
}
|
|
129
|
+
.text.headline.l {
|
|
130
|
+
font-size: 1.375rem;
|
|
131
|
+
line-height: 1.65rem;
|
|
132
|
+
}
|
|
133
|
+
.text.headline.m {
|
|
134
|
+
font-size: 1.25rem;
|
|
135
|
+
line-height: 1.5rem;
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
`;
|
|
139
|
+
__decorate([
|
|
140
|
+
property({ type: String })
|
|
141
|
+
], TuixText.prototype, "size", void 0);
|
|
142
|
+
__decorate([
|
|
143
|
+
property({ type: TextColor })
|
|
144
|
+
], TuixText.prototype, "color", void 0);
|
|
145
|
+
__decorate([
|
|
146
|
+
property({ type: TextType })
|
|
147
|
+
], TuixText.prototype, "type", void 0);
|
|
148
|
+
TuixText = __decorate([
|
|
149
|
+
customElement('tuix-text')
|
|
150
|
+
], TuixText);
|
|
151
|
+
export { TuixText };
|
|
152
|
+
//# sourceMappingURL=TuixText.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TuixText.js","sourceRoot":"","sources":["../../../src/tuix-text/TuixText.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAY,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAG/C,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;IAoItC,YAAY;QACV,OAAO,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;IACrC,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;oBACK,IAAI,CAAC,YAAY,EAAE;eACxB,QAAQ,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,IAAI,CAAC,KAAK,IAAI,SAAS,CAAC,OAAO,CAAC,EAAE,CAAC;aACjE,CAAC;IACZ,CAAC;;AAnIM,eAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwHlB,AAxHY,CAwHX;AAhIF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACX;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;uCACZ;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;sCACb;AARL,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CA8IpB;SA9IY,QAAQ","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { TextType, TextColor, TextSize } from '../enums/tuix-text.enums.js';\nimport { ColorText } from '../utils/colors.js';\n\n@customElement('tuix-text')\nexport class TuixText extends LitElement {\n @property({ type: String })\n size?: TextSize;\n\n @property({ type: TextColor })\n color?: TextColor;\n\n @property({ type: TextType })\n type?: TextType;\n\n static styles = css`\n .text {\n font-family: 'Rubik', sans-serif;\n }\n\n .text.headline.xl {\n font-size: 4rem;\n font-weight: 600;\n line-height: 4.4rem;\n }\n\n .text.headline.l {\n font-size: 3.5rem;\n font-weight: 600;\n line-height: 4.2rem;\n }\n\n .text.headline.m {\n font-size: 2.25rem;\n font-weight: 500;\n line-height: 2.7rem;\n }\n\n .text.headline.s {\n font-size: 1.5rem;\n font-weight: 500;\n line-height: 1.8rem;\n }\n\n .text.headline.xs {\n font-size: 1.125rem;\n font-weight: 500;\n line-height: 1.35;\n }\n\n .text.body.m {\n font-size: 1rem;\n font-weight: 300;\n line-height: 1.4rem;\n }\n\n .text.body.s {\n font-size: 0.875rem;\n font-weight: 300;\n line-height: 1.225rem;\n }\n\n .text.button_link.xl {\n font-size: 1.25rem;\n font-weight: 400;\n line-height: 1.5rem;\n }\n\n .text.button_link.l {\n font-size: 1.25rem;\n font-weight: 400;\n line-height: 1.5rem;\n }\n\n @media only screen and (max-width: 40rem) {\n .text.button_link.m {\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.25rem;\n }\n\n .text.body.m {\n line-height: 1.3rem;\n }\n\n .text.body.s {\n line-height: 1.1375rem;\n }\n\n .text.headline.xl {\n font-size: 3rem;\n line-height: 3.3rem;\n }\n .text.headline.l {\n font-size: 2rem;\n line-height: 2.4rem;\n }\n .text.headline.m {\n font-size: 1.5rem;\n line-height: 1.8rem;\n }\n .text.headline.s {\n font-size: 1.125rem;\n line-height: 1.35rem;\n }\n .text.headline.xs {\n font-size: 1rem;\n line-height: 1.2rem;\n }\n }\n\n @media only screen and (max-width: 20rem) {\n .text.button_link.s {\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1rem;\n }\n .text.button_link.xs {\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1rem;\n }\n .text.headline.xl {\n font-size: 1.5rem;\n line-height: 1.8rem;\n }\n .text.headline.l {\n font-size: 1.375rem;\n line-height: 1.65rem;\n }\n .text.headline.m {\n font-size: 1.25rem;\n line-height: 1.5rem;\n }\n }\n `;\n\n getTextClass() {\n return `${this.type} ${this.size}`;\n }\n\n render() {\n return html`<slot\n class=\"text ${this.getTextClass()}\"\n style=\"${styleMap({ color: ColorText[this.color || TextColor.Primary] })}\"\n ></slot>`;\n }\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../../src/utils/colors.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,OAAO,EAAE,SAAS;IAClB,SAAS,EAAE,SAAS;IACpB,IAAI,EAAE,SAAS;IACf,SAAS,EAAE,SAAS;IACpB,QAAQ,EAAE,SAAS;IACnB,UAAU,EAAE,SAAS;IACrB,KAAK,EAAE,SAAS;IAChB,OAAO,EAAE,SAAS;CACnB,CAAC","sourcesContent":["export const ColorText = {\n primary: '#000000',\n secondary: '#FFFFFF',\n grey: '#8A8894',\n lightGrey: '#C9C8D3',\n disabled: '#BEC0DA',\n validation: '#FFB82E',\n error: '#F93232',\n success: '#439F6E',\n};\n"]}
|
package/package.json
CHANGED
|
@@ -3,10 +3,11 @@
|
|
|
3
3
|
"description": "Webcomponent tuix-webcomponents following open-wc recommendations",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "tuix-webcomponents",
|
|
6
|
-
"version": "0.0.
|
|
6
|
+
"version": "0.0.9",
|
|
7
7
|
"type": "commonjs",
|
|
8
8
|
"main": "src/index.js",
|
|
9
9
|
"module": "src/index.js",
|
|
10
|
+
"files": ["dist/**"],
|
|
10
11
|
"exports": {
|
|
11
12
|
".": "./src/index.js"
|
|
12
13
|
},
|