@proximus/lavender-heading 1.2.0-alpha.48 → 1.2.0-alpha.50
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.es.js +32 -35
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { PxElement as k, textalignValues as A, colorValues as w, headingValues as $ } from "@proximus/lavender-common";
|
|
2
|
-
const C = "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-text-brand-default));text-align:var(--heading-text-align--mobile, left);font-size:var(--px-text-size-heading-s-mobile);line-height:var(--px-font-line-height-m);font-weight:var(--px-font-weight-title)}: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-text-brand-inverted))}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-5xl-mobile);line-height:var(--px-font-line-height-s);font-weight:var(--px-font-weight-title-large)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-4xl-mobile);line-height:var(--px-font-line-height-s);font-weight:var(--px-font-weight-title-large)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-3xl-mobile);line-height:var(--px-font-line-height-s)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-2xl-mobile)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-mobile)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-mobile)}.style-subtitle{font-size:var(--px-text-size-heading-xl-mobile);font-weight:var(--px-font-weight-subtitle)}.style-title-s{font-size:var(--px-text-size-heading-s-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-heading-5xl-desktop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-4xl-desktop)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-3xl-desktop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-2xl-desktop)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-desktop)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-desktop)}.style-title-s{font-size:var(--px-text-size-heading-s-desktop)}.style-subtitle{font-size:var(--px-text-size-heading-xl-desktop)}}@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-heading-5xl-desktop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-4xl-desktop)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-3xl-desktop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-2xl-desktop)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-desktop)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-desktop)}.style-title-s{font-size:var(--px-text-size-heading-s-desktop)}.style-subtitle{font-size:var(--px-text-size-heading-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)}}", S = ".color-inherit{color:inherit}.color-brand{color:var(--px-color-text-brand-default)}.color-
|
|
3
|
-
|
|
2
|
+
const C = "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-text-brand-default));text-align:var(--heading-text-align--mobile, left);font-size:var(--px-text-size-heading-s-mobile);line-height:var(--px-font-line-height-m);font-weight:var(--px-font-weight-title)}: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-text-brand-inverted))}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-5xl-mobile);line-height:var(--px-font-line-height-s);font-weight:var(--px-font-weight-title-large)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-4xl-mobile);line-height:var(--px-font-line-height-s);font-weight:var(--px-font-weight-title-large)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-3xl-mobile);line-height:var(--px-font-line-height-s)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-2xl-mobile)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-mobile)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-mobile)}.style-subtitle{font-size:var(--px-text-size-heading-xl-mobile);font-weight:var(--px-font-weight-subtitle)}.style-title-s{font-size:var(--px-text-size-heading-s-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-heading-5xl-desktop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-4xl-desktop)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-3xl-desktop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-2xl-desktop)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-desktop)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-desktop)}.style-title-s{font-size:var(--px-text-size-heading-s-desktop)}.style-subtitle{font-size:var(--px-text-size-heading-xl-desktop)}}@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-heading-5xl-desktop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-4xl-desktop)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-3xl-desktop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-2xl-desktop)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-desktop)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-desktop)}.style-title-s{font-size:var(--px-text-size-heading-s-desktop)}.style-subtitle{font-size:var(--px-text-size-heading-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)}}", S = ".color-inherit{color:inherit}.color-brand{color:var(--px-color-text-brand-default)}.color-neutral{color:var(--px-color-text-neutral-default)}.color-dimmed{color:var(--px-color-text-dimmed-default)}.color-purpose-success{color:var(--px-color-text-purpose-success-default)}.color-purpose-warning{color:var(--px-color-text-purpose-warning-default)}.color-purpose-error{color:var(--px-color-text-purpose-error-default)}.color-purpose-unlimited{color:var(--px-color-text-purpose-unlimited-default)}.color-purpose-promo{color:var(--px-color-text-purpose-promo-default)}.color-state-hover{color:var(--px-color-text-state-hover-default)}.color-state-active{color:var(--px-color-text-state-active-default)}.color-state-disabled{color:var(--px-color-text-state-disabled-default)}:host([inverted]) .color-inherit{color:inherit}:host([inverted]) .color-brand{color:var(--px-color-text-brand-inverted)}:host([inverted]) .color-neutral{color:var(--px-color-text-neutral-inverted)}:host([inverted]) .color-dimmed{color:var(--px-color-text-dimmed-inverted)}:host([inverted]) .color-purpose-success{color:var(--px-color-text-purpose-success-inverted)}:host([inverted]) .color-purpose-warning{color:var(--px-color-text-purpose-warning-inverted)}:host([inverted]) .color-purpose-error{color:var(--px-color-text-purpose-error-inverted)}:host([inverted]) .color-purpose-unlimited{color:var(--px-color-text-purpose-unlimited-inverted)}:host([inverted]) .color-purpose-promo{color:var(--px-color-text-purpose-promo-inverted)}:host([inverted]) .color-state-hover{color:var(--px-color-text-state-hover-inverted)}:host([inverted]) .color-state-active{color:var(--px-color-text-state-active-inverted)}:host([inverted]) .color-state-disabled{color:var(--px-color-text-state-disabled-inverted)}.font-size-inherit{font-size:inherit;line-height:inherit}.font-size-body-l{font-size:var(--px-text-size-body-l-mobile)}.font-size-body-m{font-size:var(--px-text-size-body-m-mobile)}.font-size-body-s{font-size:var(--px-text-size-body-s-mobile)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-mobile)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-mobile)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-mobile)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-mobile)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-mobile)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-mobile)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-mobile)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-mobile)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-mobile)}@media only screen and (min-width: 48em){.font-size-body-l{font-size:var(--px-text-size-body-l-desktop)}.font-size-body-m{font-size:var(--px-text-size-body-m-desktop)}.font-size-body-s{font-size:var(--px-text-size-body-s-desktop)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-desktop)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-desktop)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-desktop)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-desktop)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-desktop)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-desktop)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-desktop)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-desktop)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-desktop)}}@media only screen and (min-width: 64.0625em){.font-size-body-l{font-size:var(--px-text-size-body-l-desktop)}.font-size-body-m{font-size:var(--px-text-size-body-m-desktop)}.font-size-body-s{font-size:var(--px-text-size-body-s-desktop)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-desktop)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-desktop)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-desktop)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-desktop)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-desktop)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-desktop)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-desktop)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-desktop)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-desktop)}}.font-weight-inherit{font-weight:inherit}.font-weight-body{font-weight:var(--px-font-weight-body)}.font-weight-title{font-weight:var(--px-font-weight-title)}.font-weight-title-large{font-weight:var(--px-font-weight-title-large)}.font-weight-subtitle{font-weight:var(--px-font-weight-subtitle)}", u = new CSSStyleSheet();
|
|
3
|
+
u.replaceSync(C);
|
|
4
4
|
const m = new CSSStyleSheet();
|
|
5
5
|
m.replaceSync(S);
|
|
6
|
-
class
|
|
6
|
+
class n extends k {
|
|
7
7
|
template() {
|
|
8
8
|
return "<slot></slot>";
|
|
9
9
|
}
|
|
10
10
|
constructor(t) {
|
|
11
|
-
super(
|
|
11
|
+
super(u, m);
|
|
12
12
|
const e = document.createElement(t);
|
|
13
13
|
e.innerHTML = this.template(), this.shadowRoot.appendChild(e);
|
|
14
14
|
}
|
|
@@ -53,45 +53,42 @@ class r extends k {
|
|
|
53
53
|
return t.includes(e);
|
|
54
54
|
}
|
|
55
55
|
updateAttribute(t, e, i, l) {
|
|
56
|
-
this.checkName(l, i) ? this.toggleClass(e, i) : console.error(
|
|
57
|
-
`${i} is not an allowed "${t}" value for`,
|
|
58
|
-
this.$el
|
|
59
|
-
);
|
|
56
|
+
this.checkName(l, i) ? this.toggleClass(e, i) : console.error(`${i} is not an allowed "${t}" value`);
|
|
60
57
|
}
|
|
61
58
|
updateColor(t, e, i) {
|
|
62
59
|
if (!this.checkName(i, e)) {
|
|
63
|
-
console.error(
|
|
60
|
+
console.error(`${e} is not a valid color value`);
|
|
64
61
|
return;
|
|
65
62
|
}
|
|
66
|
-
const l = (
|
|
67
|
-
|
|
63
|
+
const l = (s) => {
|
|
64
|
+
s !== null && s !== "" && s !== "default" && (this.$el.style.setProperty(
|
|
68
65
|
"--heading-color-default",
|
|
69
|
-
`var(--px-text
|
|
66
|
+
`var(--px-color-text-${s}-default)`
|
|
70
67
|
), this.$el.style.setProperty(
|
|
71
68
|
"--heading-color-inverted",
|
|
72
|
-
`var(--px-text
|
|
69
|
+
`var(--px-color-text-${s}-inverted)`
|
|
73
70
|
));
|
|
74
71
|
};
|
|
75
72
|
l(t), l(e);
|
|
76
73
|
}
|
|
77
74
|
updateTextAlign(t, e, i, l) {
|
|
78
75
|
if (!this.checkName(l, i)) {
|
|
79
|
-
console.error(
|
|
76
|
+
console.error(`${i} is not a valid value for ${t}`);
|
|
80
77
|
return;
|
|
81
78
|
}
|
|
82
|
-
const
|
|
83
|
-
|
|
84
|
-
`--heading-text-align--${
|
|
85
|
-
|
|
79
|
+
const s = (o, r) => {
|
|
80
|
+
r !== null && r !== "" && r !== "default" && this.$el.style.setProperty(
|
|
81
|
+
`--heading-text-align--${o}`,
|
|
82
|
+
r
|
|
86
83
|
);
|
|
87
84
|
};
|
|
88
85
|
if (t === "text-align")
|
|
89
|
-
["mobile", "tablet", "laptop", "desktop"].forEach((
|
|
90
|
-
o
|
|
86
|
+
["mobile", "tablet", "laptop", "desktop"].forEach((o) => {
|
|
87
|
+
s(o, e), s(o, i);
|
|
91
88
|
});
|
|
92
89
|
else {
|
|
93
|
-
const
|
|
94
|
-
o
|
|
90
|
+
const o = t.split("--")[1];
|
|
91
|
+
s(o, e), s(o, i);
|
|
95
92
|
}
|
|
96
93
|
}
|
|
97
94
|
get variant() {
|
|
@@ -143,15 +140,15 @@ class r extends k {
|
|
|
143
140
|
this.setAttribute("inverted", t);
|
|
144
141
|
}
|
|
145
142
|
}
|
|
146
|
-
const
|
|
143
|
+
const c = class c extends n {
|
|
147
144
|
constructor() {
|
|
148
145
|
super("h1");
|
|
149
146
|
}
|
|
150
147
|
};
|
|
151
|
-
|
|
152
|
-
let a =
|
|
148
|
+
c.nativeName = "h1";
|
|
149
|
+
let a = c;
|
|
153
150
|
customElements.define("px-h1", a);
|
|
154
|
-
const v = class v extends
|
|
151
|
+
const v = class v extends n {
|
|
155
152
|
constructor() {
|
|
156
153
|
super("h2");
|
|
157
154
|
}
|
|
@@ -159,7 +156,7 @@ const v = class v extends r {
|
|
|
159
156
|
v.nativeName = "h2";
|
|
160
157
|
let d = v;
|
|
161
158
|
customElements.define("px-h2", d);
|
|
162
|
-
const f = class f extends
|
|
159
|
+
const f = class f extends n {
|
|
163
160
|
constructor() {
|
|
164
161
|
super("h3");
|
|
165
162
|
}
|
|
@@ -167,7 +164,7 @@ const f = class f extends r {
|
|
|
167
164
|
f.nativeName = "h3";
|
|
168
165
|
let h = f;
|
|
169
166
|
customElements.define("px-h3", h);
|
|
170
|
-
const z = class z extends
|
|
167
|
+
const z = class z extends n {
|
|
171
168
|
constructor() {
|
|
172
169
|
super("h4");
|
|
173
170
|
}
|
|
@@ -175,27 +172,27 @@ const z = class z extends r {
|
|
|
175
172
|
z.nativeName = "h4";
|
|
176
173
|
let x = z;
|
|
177
174
|
customElements.define("px-h4", x);
|
|
178
|
-
const
|
|
175
|
+
const y = class y extends n {
|
|
179
176
|
constructor() {
|
|
180
177
|
super("h5");
|
|
181
178
|
}
|
|
182
179
|
};
|
|
183
|
-
|
|
184
|
-
let p =
|
|
180
|
+
y.nativeName = "h5";
|
|
181
|
+
let p = y;
|
|
185
182
|
customElements.define("px-h5", p);
|
|
186
|
-
const b = class b extends
|
|
183
|
+
const b = class b extends n {
|
|
187
184
|
constructor() {
|
|
188
185
|
super("h6");
|
|
189
186
|
}
|
|
190
187
|
};
|
|
191
188
|
b.nativeName = "h6";
|
|
192
|
-
let
|
|
193
|
-
customElements.define("px-h6",
|
|
189
|
+
let g = b;
|
|
190
|
+
customElements.define("px-h6", g);
|
|
194
191
|
export {
|
|
195
192
|
a as H1,
|
|
196
193
|
d as H2,
|
|
197
194
|
h as H3,
|
|
198
195
|
x as H4,
|
|
199
196
|
p as H5,
|
|
200
|
-
|
|
197
|
+
g as H6
|
|
201
198
|
};
|