@proximus/lavender-heading 1.2.0-alpha.37 → 1.2.0-alpha.40
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/index.js +137 -79
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -1,58 +1,45 @@
|
|
|
1
|
-
import { PxElement as
|
|
2
|
-
const
|
|
3
|
-
|
|
4
|
-
const
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
"",
|
|
8
|
-
"default",
|
|
9
|
-
"title-4xl",
|
|
10
|
-
"title-3xl",
|
|
11
|
-
"title-2xl",
|
|
12
|
-
"title-xl",
|
|
13
|
-
"title-l",
|
|
14
|
-
"title-m",
|
|
15
|
-
"title-s",
|
|
16
|
-
"subtitle"
|
|
17
|
-
];
|
|
18
|
-
class o extends g {
|
|
1
|
+
import { PxElement as k, textalignValues as A, colorValues as w, headingValues as $ } from "@proximus/lavender-common";
|
|
2
|
+
const S = "h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{margin:0;font-family:var(--px-font-family);color:var(--heading-color-default, var(--px-color-txt-primary-default));text-align:var(--heading-text-align--mobile, left);font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-m);font-weight:700}:host([inverted]) h1,:host([inverted]) .style-title-4xl,:host([inverted]) ::slotted(h1),:host([inverted]) h2,:host([inverted]) .style-title-3xl,:host([inverted]) ::slotted(h2),:host([inverted]) h3,:host([inverted]) .style-title-2xl,:host([inverted]) ::slotted(h3),:host([inverted]) h4,:host([inverted]) .style-title-xl,:host([inverted]) ::slotted(h4),:host([inverted]) h5,:host([inverted]) .style-title-l,:host([inverted]) ::slotted(h5),:host([inverted]) h6,:host([inverted]) .style-title-m,:host([inverted]) ::slotted(h6),:host([inverted]) .style-title-s,:host([inverted]) .style-subtitle{color:var(--heading-color-inverted, var(--px-color-txt-primary-inverted))}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-5xl-mobile);line-height:var(--px-line-height-s);font-weight:900}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-4xl-mobile);line-height:var(--px-line-height-s);font-weight:900}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-3xl-mobile);line-height:var(--px-line-height-s)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-2xl-mobile)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-l-mobile)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-m-mobile)}.style-subtitle{font-size:var(--px-text-size-xl-mobile);font-weight:300}.style-title-s{font-size:var(--px-text-size-base-mobile)}@media only screen and (min-width: 768px){h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--tablet, left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-5xl-tablet)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-4xl-tablet)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-3xl-tablet)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-2xl-tablet)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-l-tablet)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-m-tablet)}.style-title-s{font-size:var(--px-text-size-base-tablet)}.style-subtitle{font-size:var(--px-text-size-xl-tablet)}}@media only screen and (min-width: 1025px){h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--laptop, left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-5xl-desktop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-4xl-desktop)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-3xl-desktop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-2xl-desktop)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-l-desktop)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-m-desktop)}.style-title-s{font-size:var(--px-text-size-base-desktop)}.style-subtitle{font-size:var(--px-text-size-xl-desktop)}}@media screen and (min-width: 1441px){h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--desktop, left)}}", C = ":host>*:first-child{--font-weight-light: 300;--font-weight-regular: 400;--font-weight-bold: 700;--font-weight-extrabold: 900}.color-inherit{color:inherit}.color-primary{color:var(--px-color-txt-primary-default)}.color-body{color:var(--px-color-txt-body-default)}.color-details{color:var(--px-color-txt-details-default)}.color-hover{color:var(--px-color-txt-hover-default)}.color-disabled{color:var(--px-color-txt-disabled-default)}.color-active{color:var(--px-color-txt-active-default)}.color-promo{color:var(--px-color-txt-promo-default)}.color-success{color:var(--px-color-txt-success-default)}.color-error{color:var(--px-color-txt-error-default)}.color-warning{color:var(--px-color-txt-warning-default)}.color-unlimited{color:var(--px-color-txt-unlimited-default)}:host([inverted]) .color-inherit{color:inherit}:host([inverted]) .color-primary{color:var(--px-color-txt-primary-inverted)}:host([inverted]) .color-body{color:var(--px-color-txt-body-inverted)}:host([inverted]) .color-details{color:var(--px-color-txt-details-inverted)}:host([inverted]) .color-hover{color:var(--px-color-txt-hover-inverted)}:host([inverted]) .color-disabled{color:var(--px-color-txt-disabled-inverted)}:host([inverted]) .color-active{color:var(--px-color-txt-active-inverted)}:host([inverted]) .color-promo{color:var(--px-color-txt-promo-inverted)}:host([inverted]) .color-success{color:var(--px-color-txt-success-inverted)}:host([inverted]) .color-error{color:var(--px-color-txt-error-inverted)}:host([inverted]) .color-warning{color:var(--px-color-txt-warning-inverted)}:host([inverted]) .color-unlimited{color:var(--px-color-txt-unlimited-inverted)}.font-size-inherit{font-size:inherit;line-height:inherit}.font-size-xs{font-size:var(--px-text-size-xs-mobile)}.font-size-s{font-size:var(--px-text-size-s-mobile)}.font-size-base{font-size:var(--px-text-size-base-mobile)}.font-size-m{font-size:var(--px-text-size-m-mobile)}.font-size-l{font-size:var(--px-text-size-l-mobile)}.font-size-xl{font-size:var(--px-text-size-xl-mobile)}.font-size-2xl{font-size:var(--px-text-size-2xl-mobile)}.font-size-3xl{font-size:var(--px-text-size-3xl-mobile);line-height:var(--px-line-height-s)}.font-size-4xl{font-size:var(--px-text-size-4xl-mobile);line-height:var(--px-line-height-s)}.font-size-5xl{font-size:var(--px-text-size-5xl-mobile);line-height:var(--px-line-height-s)}.font-size-6xl{font-size:var(--px-text-size-6xl-mobile);line-height:var(--px-line-height-s)}.font-size-7xl{font-size:var(--px-text-size-7xl-mobile);line-height:var(--px-line-height-s)}@media only screen and (min-width: 768px){.font-size-xs{font-size:var(--px-text-size-xs-mobile)}.font-size-s{font-size:var(--px-text-size-s-mobile)}.font-size-base{font-size:var(--px-text-size-base-mobile)}.font-size-m{font-size:var(--px-text-size-m-mobile)}.font-size-l{font-size:var(--px-text-size-l-mobile)}.font-size-xl{font-size:var(--px-text-size-xl-mobile)}.font-size-2xl{font-size:var(--px-text-size-2xl-mobile)}.font-size-3xl{font-size:var(--px-text-size-3xl-mobile)}.font-size-4xl{font-size:var(--px-text-size-4xl-mobile)}.font-size-5xl{font-size:var(--px-text-size-5xl-mobile)}.font-size-6xl{font-size:var(--px-text-size-6xl-mobile)}.font-size-7xl{font-size:var(--px-text-size-7xl-mobile)}}@media only screen and (min-width: 1025px){.font-size-xs{font-size:var(--px-text-size-xs-tablet)}.font-size-s{font-size:var(--px-text-size-s-tablet)}.font-size-base{font-size:var(--px-text-size-base-tablet)}.font-size-m{font-size:var(--px-text-size-m-tablet)}.font-size-l{font-size:var(--px-text-size-l-tablet)}.font-size-xl{font-size:var(--px-text-size-xl-tablet)}.font-size-2xl{font-size:var(--px-text-size-2xl-tablet)}.font-size-3xl{font-size:var(--px-text-size-3xl-tablet)}.font-size-4xl{font-size:var(--px-text-size-4xl-tablet)}.font-size-5xl{font-size:var(--px-text-size-5xl-tablet)}.font-size-6xl{font-size:var(--px-text-size-6xl-tablet)}.font-size-7xl{font-size:var(--px-text-size-7xl-tablet)}}@media only screen and (min-width: 1441px){.font-size-xs{font-size:var(--px-text-size-xs-desktop)}.font-size-s{font-size:var(--px-text-size-s-desktop)}.font-size-base{font-size:var(--px-text-size-base-desktop)}.font-size-m{font-size:var(--px-text-size-m-desktop)}.font-size-l{font-size:var(--px-text-size-l-desktop)}.font-size-xl{font-size:var(--px-text-size-xl-desktop)}.font-size-2xl{font-size:var(--px-text-size-2xl-desktop)}.font-size-3xl{font-size:var(--px-text-size-3xl-desktop)}.font-size-4xl{font-size:var(--px-text-size-4xl-desktop)}.font-size-5xl{font-size:var(--px-text-size-5xl-desktop)}.font-size-6xl{font-size:var(--px-text-size-6xl-desktop)}.font-size-7xl{font-size:var(--px-text-size-7xl-desktop)}}.font-weight-inherit{font-weight:inherit}.font-weight-normal{font-weight:var(--font-weight-regular)}.font-weight-bold{font-weight:var(--font-weight-bold)}.font-weight-extrabold{font-weight:var(--font-weight-extrabold)}.font-weight-light{font-weight:var(--font-weight-light)}", y = new CSSStyleSheet();
|
|
3
|
+
y.replaceSync(S);
|
|
4
|
+
const u = new CSSStyleSheet();
|
|
5
|
+
u.replaceSync(C);
|
|
6
|
+
class r extends k {
|
|
19
7
|
template() {
|
|
20
8
|
return "<slot></slot>";
|
|
21
9
|
}
|
|
22
10
|
constructor(t) {
|
|
23
|
-
super(
|
|
11
|
+
super(y, u);
|
|
24
12
|
const e = document.createElement(t);
|
|
25
13
|
e.innerHTML = this.template(), this.shadowRoot.appendChild(e);
|
|
26
14
|
}
|
|
27
15
|
static get observedAttributes() {
|
|
28
|
-
return [
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
set color(t) {
|
|
40
|
-
this.setAttribute("color", t);
|
|
41
|
-
}
|
|
42
|
-
get inverted() {
|
|
43
|
-
return this.getAttribute("inverted");
|
|
44
|
-
}
|
|
45
|
-
set inverted(t) {
|
|
46
|
-
this.setAttribute("inverted", t);
|
|
16
|
+
return [
|
|
17
|
+
...super.observedAttributes,
|
|
18
|
+
"variant",
|
|
19
|
+
"color",
|
|
20
|
+
"text-align",
|
|
21
|
+
"text-align--mobile",
|
|
22
|
+
"text-align--tablet",
|
|
23
|
+
"text-align--laptop",
|
|
24
|
+
"text-align--desktop",
|
|
25
|
+
"inverted"
|
|
26
|
+
];
|
|
47
27
|
}
|
|
48
28
|
attributeChangedCallback(t, e, i) {
|
|
49
29
|
if (e !== i)
|
|
50
30
|
switch (t) {
|
|
51
31
|
case "variant":
|
|
52
|
-
this.updateAttribute(t, e, i,
|
|
32
|
+
this.updateAttribute(t, e, i, $);
|
|
53
33
|
break;
|
|
54
34
|
case "color":
|
|
55
|
-
this.updateColor(e, i,
|
|
35
|
+
this.updateColor(e, i, w);
|
|
36
|
+
break;
|
|
37
|
+
case "text-align":
|
|
38
|
+
case "text-align--mobile":
|
|
39
|
+
case "text-align--tablet":
|
|
40
|
+
case "text-align--laptop":
|
|
41
|
+
case "text-align--desktop":
|
|
42
|
+
this.updateTextAlign(t, e, i, A);
|
|
56
43
|
break;
|
|
57
44
|
default:
|
|
58
45
|
super.attributeChangedCallback(t, e, i);
|
|
@@ -65,73 +52,144 @@ class o extends g {
|
|
|
65
52
|
checkName(t, e) {
|
|
66
53
|
return t.includes(e);
|
|
67
54
|
}
|
|
68
|
-
updateAttribute(t, e, i,
|
|
69
|
-
this.checkName(
|
|
55
|
+
updateAttribute(t, e, i, o) {
|
|
56
|
+
this.checkName(o, i) ? this.toggleClass(e, i) : console.error(`Bad "${t}" value for`, this.$el);
|
|
70
57
|
}
|
|
71
58
|
updateColor(t, e, i) {
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
59
|
+
if (!this.checkName(i, e)) {
|
|
60
|
+
console.error("Bad color value for", this.$el);
|
|
61
|
+
return;
|
|
62
|
+
}
|
|
63
|
+
const o = this.inverted === null ? "default" : "inverted", s = (l) => {
|
|
64
|
+
l !== null && l !== "" && l !== "default" && this.$el.style.setProperty(
|
|
65
|
+
`--heading-color-${o}`,
|
|
66
|
+
`var(--px-color-txt-${l}-${o})`
|
|
67
|
+
);
|
|
68
|
+
};
|
|
69
|
+
s(t), s(e);
|
|
70
|
+
}
|
|
71
|
+
updateTextAlign(t, e, i, o) {
|
|
72
|
+
if (!this.checkName(o, i)) {
|
|
73
|
+
console.error(`Bad ${t} value for`, this.$el);
|
|
74
|
+
return;
|
|
75
|
+
}
|
|
76
|
+
const s = (l, n) => {
|
|
77
|
+
n !== null && n !== "" && n !== "default" && this.$el.style.setProperty(
|
|
78
|
+
`--heading-text-align--${l}`,
|
|
79
|
+
n
|
|
80
|
+
);
|
|
81
|
+
};
|
|
82
|
+
if (t === "text-align")
|
|
83
|
+
["mobile", "tablet", "laptop", "desktop"].forEach((l) => {
|
|
84
|
+
s(l, e), s(l, i);
|
|
85
|
+
});
|
|
86
|
+
else {
|
|
87
|
+
const l = t.split("--")[1];
|
|
88
|
+
s(l, e), s(l, i);
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
get variant() {
|
|
92
|
+
return this.getAttribute("variant");
|
|
93
|
+
}
|
|
94
|
+
set variant(t) {
|
|
95
|
+
this.setAttribute("variant", t);
|
|
96
|
+
}
|
|
97
|
+
get color() {
|
|
98
|
+
return this.getAttribute("color");
|
|
99
|
+
}
|
|
100
|
+
set color(t) {
|
|
101
|
+
this.setAttribute("color", t);
|
|
102
|
+
}
|
|
103
|
+
get textAlign() {
|
|
104
|
+
return this.getAttribute("text-align");
|
|
105
|
+
}
|
|
106
|
+
set textAlign(t) {
|
|
107
|
+
this.setAttribute("text-align", t);
|
|
108
|
+
}
|
|
109
|
+
get textAlignMobile() {
|
|
110
|
+
return this.getAttribute("text-align--mobile");
|
|
111
|
+
}
|
|
112
|
+
set textAlignMobile(t) {
|
|
113
|
+
this.setAttribute("text-align--mobile", t);
|
|
114
|
+
}
|
|
115
|
+
get textAlignTablet() {
|
|
116
|
+
return this.getAttribute("text-align--tablet");
|
|
117
|
+
}
|
|
118
|
+
set textAlignTablet(t) {
|
|
119
|
+
this.setAttribute("text-align--tablet", t);
|
|
120
|
+
}
|
|
121
|
+
get textAlignLaptop() {
|
|
122
|
+
return this.getAttribute("text-align--laptop");
|
|
123
|
+
}
|
|
124
|
+
set textAlignLaptop(t) {
|
|
125
|
+
this.setAttribute("text-align--laptop", t);
|
|
126
|
+
}
|
|
127
|
+
get textAlignDesktop() {
|
|
128
|
+
return this.getAttribute("text-align--desktop");
|
|
129
|
+
}
|
|
130
|
+
set textAlignDesktop(t) {
|
|
131
|
+
this.setAttribute("text-align--desktop", t);
|
|
132
|
+
}
|
|
133
|
+
get inverted() {
|
|
134
|
+
return this.getAttribute("inverted");
|
|
135
|
+
}
|
|
136
|
+
set inverted(t) {
|
|
137
|
+
this.setAttribute("inverted", t);
|
|
80
138
|
}
|
|
81
139
|
}
|
|
82
|
-
const
|
|
140
|
+
const f = class f extends r {
|
|
83
141
|
constructor() {
|
|
84
142
|
super("h1");
|
|
85
143
|
}
|
|
86
144
|
};
|
|
87
|
-
|
|
88
|
-
let
|
|
89
|
-
customElements.define("px-h1",
|
|
90
|
-
const v = class v extends
|
|
145
|
+
f.nativeName = "h1";
|
|
146
|
+
let x = f;
|
|
147
|
+
customElements.define("px-h1", x);
|
|
148
|
+
const v = class v extends r {
|
|
91
149
|
constructor() {
|
|
92
150
|
super("h2");
|
|
93
151
|
}
|
|
94
152
|
};
|
|
95
153
|
v.nativeName = "h2";
|
|
96
|
-
let
|
|
97
|
-
customElements.define("px-h2",
|
|
98
|
-
const
|
|
154
|
+
let a = v;
|
|
155
|
+
customElements.define("px-h2", a);
|
|
156
|
+
const c = class c extends r {
|
|
99
157
|
constructor() {
|
|
100
158
|
super("h3");
|
|
101
159
|
}
|
|
102
160
|
};
|
|
103
|
-
|
|
104
|
-
let
|
|
105
|
-
customElements.define("px-h3",
|
|
106
|
-
const
|
|
161
|
+
c.nativeName = "h3";
|
|
162
|
+
let h = c;
|
|
163
|
+
customElements.define("px-h3", h);
|
|
164
|
+
const g = class g extends r {
|
|
107
165
|
constructor() {
|
|
108
166
|
super("h4");
|
|
109
167
|
}
|
|
110
168
|
};
|
|
111
|
-
|
|
112
|
-
let
|
|
113
|
-
customElements.define("px-h4",
|
|
114
|
-
const
|
|
169
|
+
g.nativeName = "h4";
|
|
170
|
+
let d = g;
|
|
171
|
+
customElements.define("px-h4", d);
|
|
172
|
+
const b = class b extends r {
|
|
115
173
|
constructor() {
|
|
116
174
|
super("h5");
|
|
117
175
|
}
|
|
118
176
|
};
|
|
119
|
-
|
|
120
|
-
let
|
|
121
|
-
customElements.define("px-h5",
|
|
122
|
-
const
|
|
177
|
+
b.nativeName = "h5";
|
|
178
|
+
let p = b;
|
|
179
|
+
customElements.define("px-h5", p);
|
|
180
|
+
const m = class m extends r {
|
|
123
181
|
constructor() {
|
|
124
182
|
super("h6");
|
|
125
183
|
}
|
|
126
184
|
};
|
|
127
|
-
|
|
128
|
-
let
|
|
129
|
-
customElements.define("px-h6",
|
|
185
|
+
m.nativeName = "h6";
|
|
186
|
+
let z = m;
|
|
187
|
+
customElements.define("px-h6", z);
|
|
130
188
|
export {
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
189
|
+
x as H1,
|
|
190
|
+
a as H2,
|
|
191
|
+
h as H3,
|
|
192
|
+
d as H4,
|
|
193
|
+
p as H5,
|
|
194
|
+
z as H6
|
|
137
195
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@proximus/lavender-heading",
|
|
3
|
-
"version": "1.2.0-alpha.
|
|
3
|
+
"version": "1.2.0-alpha.40",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"exports": {
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
"publishConfig": {
|
|
25
25
|
"access": "public"
|
|
26
26
|
},
|
|
27
|
-
"gitHead": "
|
|
27
|
+
"gitHead": "0820404474bf245bd128ec808c3ba120cd94da21",
|
|
28
28
|
"lerna": {
|
|
29
29
|
"command": {
|
|
30
30
|
"publish": {
|