@proximus/lavender-heading 1.4.14-beta.3 → 1.4.14

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.
Files changed (3) hide show
  1. package/dist/AbstractHeading.d.ts +16 -16
  2. package/dist/index.es.js +201 -197
  3. package/package.json +1 -1
package/dist/AbstractHeading.d.ts CHANGED
@@ -8,22 +8,22 @@ export declare abstract class AbstractHeading<HEADING_ELEMENT extends HTMLHeadin
8
8
  updateAttribute(attrName: string, oldValue: string, newValue: string, attrValue: string[]): void;
9
9
  updateColor(oldValue: string, newValue: string, attrValue: string[]): void;
10
10
  updateTextAlign(attrName: string, oldValue: string, newValue: string, attrValue: string[]): void;
11
- get variant(): string | null;
12
- set variant(value: string | null);
13
- get color(): string | null;
14
- set color(value: string | null);
15
- get textAlign(): string | null;
16
- set textAlign(value: string | null);
17
- get textAlignMobile(): string | null;
18
- set textAlignMobile(value: string | null);
19
- get textAlignTablet(): string | null;
20
- set textAlignTablet(value: string | null);
21
- get textAlignLaptop(): string | null;
22
- set textAlignLaptop(value: string | null);
23
- get textAlignDesktop(): string | null;
24
- set textAlignDesktop(value: string | null);
25
- get inverted(): boolean;
26
- set inverted(value: boolean);
11
+ get variant(): string;
12
+ set variant(value: string);
13
+ get color(): string;
14
+ set color(value: string);
15
+ get textAlign(): string;
16
+ set textAlign(value: string);
17
+ get textAlignMobile(): string;
18
+ set textAlignMobile(value: string);
19
+ get textAlignTablet(): string;
20
+ set textAlignTablet(value: string);
21
+ get textAlignLaptop(): string;
22
+ set textAlignLaptop(value: string);
23
+ get textAlignDesktop(): string;
24
+ set textAlignDesktop(value: string);
25
+ get inverted(): string;
26
+ set inverted(value: string);
27
27
  get autoSpacing(): boolean;
28
28
  set autoSpacing(value: boolean);
29
29
  }
package/dist/index.es.js CHANGED
@@ -1,204 +1,208 @@
1
- import { PxElement as e, colorValues as t, headingValues as n, log as r, textalignValues as i } from "@proximus/lavender-common";
2
- //#region src/heading.css?inline
3
- var a = "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{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-line-height-ratio-l);font-weight:var(--px-font-weight-title);margin:0}::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-mobile)}: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-4xl-mobile);line-height:var(--px-line-height-ratio-s);font-weight:var(--px-font-weight-title-large)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-3xl-mobile);line-height:var(--px-line-height-ratio-s);font-weight:var(--px-font-weight-title-large)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-mobile);line-height:var(--px-line-height-ratio-s)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-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 screen and (width>=48rem){::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-tablet)}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-4xl-tablet)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-3xl-tablet)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-tablet)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-tablet)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-tablet)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-tablet)}.style-title-s{font-size:var(--px-text-size-heading-s-tablet)}.style-subtitle{font-size:var(--px-text-size-heading-xl-tablet)}}@media screen and (width>=64.0625rem){::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-laptop)}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-4xl-laptop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-3xl-laptop)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-laptop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-laptop)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-laptop)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-laptop)}.style-title-s{font-size:var(--px-text-size-heading-s-laptop)}.style-subtitle{font-size:var(--px-text-size-heading-xl-laptop)}}@media screen and (width>=90.0625rem){::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-desktop)}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)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-4xl-desktop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-3xl-desktop)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-desktop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-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)}}", o = ".color-inherit{color:inherit!important}.color-brand{color:var(--px-color-text-brand-default)!important}.color-neutral{color:var(--px-color-text-neutral-default)!important}.color-dimmed{color:var(--px-color-text-dimmed-default)!important}.color-purpose-success{color:var(--px-color-text-purpose-success-default)!important}.color-purpose-warning{color:var(--px-color-text-purpose-warning-default)!important}.color-purpose-error{color:var(--px-color-text-purpose-error-default)!important}.color-purpose-unlimited{color:var(--px-color-text-purpose-unlimited-default)!important}.color-purpose-promo{color:var(--px-color-text-purpose-promo-default)!important}.color-state-hover{color:var(--px-color-text-state-hover-default)!important}.color-state-active{color:var(--px-color-text-state-active-default)!important}.color-state-disabled{color:var(--px-color-text-state-disabled-default)!important}:host([inverted]) .color-inherit{color:inherit!important}:host([inverted]) .color-brand{color:var(--px-color-text-brand-inverted)!important}:host([inverted]) .color-neutral{color:var(--px-color-text-neutral-inverted)!important}:host([inverted]) .color-dimmed{color:var(--px-color-text-dimmed-inverted)!important}:host([inverted]) .color-purpose-success{color:var(--px-color-text-purpose-success-inverted)!important}:host([inverted]) .color-purpose-warning{color:var(--px-color-text-purpose-warning-inverted)!important}:host([inverted]) .color-purpose-error{color:var(--px-color-text-purpose-error-inverted)!important}:host([inverted]) .color-purpose-unlimited{color:var(--px-color-text-purpose-unlimited-inverted)!important}:host([inverted]) .color-purpose-promo{color:var(--px-color-text-purpose-promo-inverted)!important}:host([inverted]) .color-state-hover{color:var(--px-color-text-state-hover-inverted)!important}:host([inverted]) .color-state-active{color:var(--px-color-text-state-active-inverted)!important}:host([inverted]) .color-state-disabled{color:var(--px-color-text-state-disabled-inverted)!important}.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)}.font-size-heading-3xl,.font-size-heading-4xl,.font-size-heading-5xl{line-height:var(--px-line-height-ratio-s)}.font-size-link-m{font-size:var(--px-text-size-link-m-mobile)}.font-size-link-s{font-size:var(--px-text-size-link-s-mobile)}@media screen and (width>=48rem){.font-size-body-l{font-size:var(--px-text-size-body-l-tablet)}.font-size-body-m{font-size:var(--px-text-size-body-m-tablet)}.font-size-body-s{font-size:var(--px-text-size-body-s-tablet)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-tablet)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-tablet)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-tablet)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-tablet)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-tablet)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-tablet)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-tablet)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-tablet)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-tablet)}.font-size-link-m{font-size:var(--px-text-size-link-m-tablet)}.font-size-link-s{font-size:var(--px-text-size-link-s-tablet)}}@media screen and (width>=64.0625rem){.font-size-body-l{font-size:var(--px-text-size-body-l-laptop)}.font-size-body-m{font-size:var(--px-text-size-body-m-laptop)}.font-size-body-s{font-size:var(--px-text-size-body-s-laptop)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-laptop)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-laptop)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-laptop)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-laptop)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-laptop)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-laptop)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-laptop)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-laptop)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-laptop)}.font-size-link-m{font-size:var(--px-text-size-link-m-laptop)}.font-size-link-s{font-size:var(--px-text-size-link-s-laptop)}}@media screen and (width>=90.0625rem){.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-size-link-m{font-size:var(--px-text-size-link-m-desktop)}.font-size-link-s{font-size:var(--px-text-size-link-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)}", s = new CSSStyleSheet();
4
- s.replaceSync(a);
5
- var c = new CSSStyleSheet();
6
- c.replaceSync(o);
7
- var l = class extends e {
8
- template() {
9
- return "<slot></slot>";
10
- }
11
- constructor(e) {
12
- super(s, c);
13
- let t = document.createElement(e);
14
- t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
15
- }
16
- static get observedAttributes() {
17
- return [
18
- ...super.observedAttributes,
19
- "variant",
20
- "color",
21
- "text-align",
22
- "text-align--mobile",
23
- "text-align--tablet",
24
- "text-align--laptop",
25
- "text-align--desktop",
26
- "inverted",
27
- "auto-spacing"
28
- ];
29
- }
30
- attributeChangedCallback(e, r, a) {
31
- if (r !== a) switch (e) {
32
- case "variant":
33
- this.updateAttribute(e, r, a, n);
34
- break;
35
- case "color":
36
- this.updateColor(r, a, t);
37
- break;
38
- case "text-align":
39
- case "text-align--mobile":
40
- case "text-align--tablet":
41
- case "text-align--laptop":
42
- case "text-align--desktop":
43
- this.updateTextAlign(e, r, a, i);
44
- break;
45
- default: super.attributeChangedCallback(e, r, a);
46
- }
47
- }
48
- toggleClass(e, t) {
49
- e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`style-${e}`), t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`style-${t}`);
50
- }
51
- updateAttribute(e, t, n, i) {
52
- this.checkName(i, n) ? this.toggleClass(t, n) : r(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${i.join("\", \"")}".`);
53
- }
54
- updateColor(e, t, n) {
55
- if (!this.checkName(n, t)) {
56
- r(`"${t}" is not a valid color value for ${this.tagName.toLowerCase()}. Allowed values are: "${n.join("\", \"")}".`);
57
- return;
58
- }
59
- let i = (e) => {
60
- e !== null && e !== "" && e !== "default" && (this.$el.style.setProperty("--heading-color-default", `var(--px-color-text-${e}-default)`), this.$el.style.setProperty("--heading-color-inverted", `var(--px-color-text-${e}-inverted)`));
61
- };
62
- i(e), i(t);
63
- }
64
- updateTextAlign(e, t, n, i) {
65
- if (!this.checkName(i, n)) {
66
- r(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${i.join("\", \"")}".`);
67
- return;
68
- }
69
- let a = (e, t) => {
70
- t !== null && t !== "" && t !== "default" && this.$el.style.setProperty(`--heading-text-align--${e}`, t);
71
- };
72
- if (e === "text-align") [
73
- "mobile",
74
- "tablet",
75
- "laptop",
76
- "desktop"
77
- ].forEach((e) => {
78
- a(e, t), a(e, n);
79
- });
80
- else {
81
- let r = e.split("--")[1];
82
- a(r, t), a(r, n);
83
- }
84
- }
85
- get variant() {
86
- return this.getAttribute("variant");
87
- }
88
- set variant(e) {
89
- this._updateAttribute("variant", e);
90
- }
91
- get color() {
92
- return this.getAttribute("color");
93
- }
94
- set color(e) {
95
- this._updateAttribute("color", e);
96
- }
97
- get textAlign() {
98
- return this.getAttribute("text-align");
99
- }
100
- set textAlign(e) {
101
- this._updateAttribute("text-align", e);
102
- }
103
- get textAlignMobile() {
104
- return this.getAttribute("text-align--mobile");
105
- }
106
- set textAlignMobile(e) {
107
- this._updateAttribute("text-align--mobile", e);
108
- }
109
- get textAlignTablet() {
110
- return this.getAttribute("text-align--tablet");
111
- }
112
- set textAlignTablet(e) {
113
- this._updateAttribute("text-align--tablet", e);
114
- }
115
- get textAlignLaptop() {
116
- return this.getAttribute("text-align--laptop");
117
- }
118
- set textAlignLaptop(e) {
119
- this._updateAttribute("text-align--laptop", e);
120
- }
121
- get textAlignDesktop() {
122
- return this.getAttribute("text-align--desktop");
123
- }
124
- set textAlignDesktop(e) {
125
- this._updateAttribute("text-align--desktop", e);
126
- }
127
- get inverted() {
128
- return this.hasAttribute("inverted");
129
- }
130
- set inverted(e) {
131
- this._updateBooleanAttribute("inverted", e);
132
- }
133
- get autoSpacing() {
134
- return this.hasAttribute("auto-spacing");
135
- }
136
- set autoSpacing(e) {
137
- this._updateBooleanAttribute("auto-spacing", e);
138
- }
139
- }, u = class extends l {
140
- static {
141
- this.nativeName = "h1";
142
- }
143
- constructor() {
144
- super("h1");
145
- }
1
+ import { PxElement as A, textalignValues as w, colorValues as $, headingValues as C, log as r } 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-text-brand-default));text-align:var(--heading-text-align--mobile, left);font-size:var(--px-text-size-heading-s-mobile);line-height:var(--px-line-height-ratio-l);font-weight:var(--px-font-weight-title)}::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-mobile)}: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-4xl-mobile);line-height:var(--px-line-height-ratio-s);font-weight:var(--px-font-weight-title-large)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-3xl-mobile);line-height:var(--px-line-height-ratio-s);font-weight:var(--px-font-weight-title-large)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-mobile);line-height:var(--px-line-height-ratio-s)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-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 screen and (min-width: 48rem){::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-tablet)}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-4xl-tablet)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-3xl-tablet)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-tablet)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-tablet)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-tablet)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-tablet)}.style-title-s{font-size:var(--px-text-size-heading-s-tablet)}.style-subtitle{font-size:var(--px-text-size-heading-xl-tablet)}}@media screen and (min-width: 64.0625rem){::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-laptop)}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-4xl-laptop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-3xl-laptop)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-laptop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-laptop)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-laptop)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-laptop)}.style-title-s{font-size:var(--px-text-size-heading-s-laptop)}.style-subtitle{font-size:var(--px-text-size-heading-xl-laptop)}}@media screen and (min-width: 90.0625rem){::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6){margin-bottom:var(--px-spacing-heading-to-content-desktop)}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)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-4xl-desktop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-3xl-desktop)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-2xl-desktop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-xl-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)}}", E = ".color-inherit{color:inherit!important}.color-brand{color:var(--px-color-text-brand-default)!important}.color-neutral{color:var(--px-color-text-neutral-default)!important}.color-dimmed{color:var(--px-color-text-dimmed-default)!important}.color-purpose-success{color:var(--px-color-text-purpose-success-default)!important}.color-purpose-warning{color:var(--px-color-text-purpose-warning-default)!important}.color-purpose-error{color:var(--px-color-text-purpose-error-default)!important}.color-purpose-unlimited{color:var(--px-color-text-purpose-unlimited-default)!important}.color-purpose-promo{color:var(--px-color-text-purpose-promo-default)!important}.color-state-hover{color:var(--px-color-text-state-hover-default)!important}.color-state-active{color:var(--px-color-text-state-active-default)!important}.color-state-disabled{color:var(--px-color-text-state-disabled-default)!important}:host([inverted]) .color-inherit{color:inherit!important}:host([inverted]) .color-brand{color:var(--px-color-text-brand-inverted)!important}:host([inverted]) .color-neutral{color:var(--px-color-text-neutral-inverted)!important}:host([inverted]) .color-dimmed{color:var(--px-color-text-dimmed-inverted)!important}:host([inverted]) .color-purpose-success{color:var(--px-color-text-purpose-success-inverted)!important}:host([inverted]) .color-purpose-warning{color:var(--px-color-text-purpose-warning-inverted)!important}:host([inverted]) .color-purpose-error{color:var(--px-color-text-purpose-error-inverted)!important}:host([inverted]) .color-purpose-unlimited{color:var(--px-color-text-purpose-unlimited-inverted)!important}:host([inverted]) .color-purpose-promo{color:var(--px-color-text-purpose-promo-inverted)!important}:host([inverted]) .color-state-hover{color:var(--px-color-text-state-hover-inverted)!important}:host([inverted]) .color-state-active{color:var(--px-color-text-state-active-inverted)!important}:host([inverted]) .color-state-disabled{color:var(--px-color-text-state-disabled-inverted)!important}.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)}.font-size-heading-3xl,.font-size-heading-4xl,.font-size-heading-5xl{line-height:var(--px-line-height-ratio-s)}.font-size-link-m{font-size:var(--px-text-size-link-m-mobile)}.font-size-link-s{font-size:var(--px-text-size-link-s-mobile)}@media screen and (min-width: 48rem){.font-size-body-l{font-size:var(--px-text-size-body-l-tablet)}.font-size-body-m{font-size:var(--px-text-size-body-m-tablet)}.font-size-body-s{font-size:var(--px-text-size-body-s-tablet)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-tablet)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-tablet)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-tablet)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-tablet)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-tablet)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-tablet)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-tablet)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-tablet)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-tablet)}.font-size-link-m{font-size:var(--px-text-size-link-m-tablet)}.font-size-link-s{font-size:var(--px-text-size-link-s-tablet)}}@media screen and (min-width: 64.0625rem){.font-size-body-l{font-size:var(--px-text-size-body-l-laptop)}.font-size-body-m{font-size:var(--px-text-size-body-m-laptop)}.font-size-body-s{font-size:var(--px-text-size-body-s-laptop)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-laptop)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-laptop)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-laptop)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-laptop)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-laptop)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-laptop)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-laptop)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-laptop)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-laptop)}.font-size-link-m{font-size:var(--px-text-size-link-m-laptop)}.font-size-link-s{font-size:var(--px-text-size-link-s-laptop)}}@media screen and (min-width: 90.0625rem){.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-size-link-m{font-size:var(--px-text-size-link-m-desktop)}.font-size-link-s{font-size:var(--px-text-size-link-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(S);
4
+ const k = new CSSStyleSheet();
5
+ k.replaceSync(E);
6
+ class n extends A {
7
+ template() {
8
+ return "<slot></slot>";
9
+ }
10
+ constructor(t) {
11
+ super(u, k);
12
+ const e = document.createElement(t);
13
+ e.innerHTML = this.template(), this.shadowRoot.appendChild(e);
14
+ }
15
+ static get observedAttributes() {
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
+ "auto-spacing"
27
+ ];
28
+ }
29
+ attributeChangedCallback(t, e, i) {
30
+ if (e !== i)
31
+ switch (t) {
32
+ case "variant":
33
+ this.updateAttribute(t, e, i, C);
34
+ break;
35
+ case "color":
36
+ this.updateColor(e, i, $);
37
+ break;
38
+ case "text-align":
39
+ case "text-align--mobile":
40
+ case "text-align--tablet":
41
+ case "text-align--laptop":
42
+ case "text-align--desktop":
43
+ this.updateTextAlign(t, e, i, w);
44
+ break;
45
+ default:
46
+ super.attributeChangedCallback(t, e, i);
47
+ break;
48
+ }
49
+ }
50
+ toggleClass(t, e) {
51
+ t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`style-${t}`), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`style-${e}`);
52
+ }
53
+ updateAttribute(t, e, i, o) {
54
+ this.checkName(o, i) ? this.toggleClass(e, i) : r(
55
+ `"${i}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
56
+ );
57
+ }
58
+ updateColor(t, e, i) {
59
+ if (!this.checkName(i, e)) {
60
+ r(
61
+ `"${e}" is not a valid color value for ${this.tagName.toLowerCase()}. Allowed values are: "${i.join('", "')}".`
62
+ );
63
+ return;
64
+ }
65
+ const o = (s) => {
66
+ s !== null && s !== "" && s !== "default" && (this.$el.style.setProperty(
67
+ "--heading-color-default",
68
+ `var(--px-color-text-${s}-default)`
69
+ ), this.$el.style.setProperty(
70
+ "--heading-color-inverted",
71
+ `var(--px-color-text-${s}-inverted)`
72
+ ));
73
+ };
74
+ o(t), o(e);
75
+ }
76
+ updateTextAlign(t, e, i, o) {
77
+ if (!this.checkName(o, i)) {
78
+ r(
79
+ `"${i}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
80
+ );
81
+ return;
82
+ }
83
+ const s = (l, a) => {
84
+ a !== null && a !== "" && a !== "default" && this.$el.style.setProperty(
85
+ `--heading-text-align--${l}`,
86
+ a
87
+ );
88
+ };
89
+ if (t === "text-align")
90
+ ["mobile", "tablet", "laptop", "desktop"].forEach((l) => {
91
+ s(l, e), s(l, i);
92
+ });
93
+ else {
94
+ const l = t.split("--")[1];
95
+ s(l, e), s(l, i);
96
+ }
97
+ }
98
+ get variant() {
99
+ return this.getAttribute("variant");
100
+ }
101
+ set variant(t) {
102
+ this.setAttribute("variant", t);
103
+ }
104
+ get color() {
105
+ return this.getAttribute("color");
106
+ }
107
+ set color(t) {
108
+ this.setAttribute("color", t);
109
+ }
110
+ get textAlign() {
111
+ return this.getAttribute("text-align");
112
+ }
113
+ set textAlign(t) {
114
+ this.setAttribute("text-align", t);
115
+ }
116
+ get textAlignMobile() {
117
+ return this.getAttribute("text-align--mobile");
118
+ }
119
+ set textAlignMobile(t) {
120
+ this.setAttribute("text-align--mobile", t);
121
+ }
122
+ get textAlignTablet() {
123
+ return this.getAttribute("text-align--tablet");
124
+ }
125
+ set textAlignTablet(t) {
126
+ this.setAttribute("text-align--tablet", t);
127
+ }
128
+ get textAlignLaptop() {
129
+ return this.getAttribute("text-align--laptop");
130
+ }
131
+ set textAlignLaptop(t) {
132
+ this.setAttribute("text-align--laptop", t);
133
+ }
134
+ get textAlignDesktop() {
135
+ return this.getAttribute("text-align--desktop");
136
+ }
137
+ set textAlignDesktop(t) {
138
+ this.setAttribute("text-align--desktop", t);
139
+ }
140
+ get inverted() {
141
+ return this.getAttribute("inverted");
142
+ }
143
+ set inverted(t) {
144
+ this.setAttribute("inverted", t);
145
+ }
146
+ get autoSpacing() {
147
+ return this.hasAttribute("auto-spacing");
148
+ }
149
+ set autoSpacing(t) {
150
+ t ? this.setAttribute("auto-spacing", "") : this.removeAttribute("auto-spacing");
151
+ }
152
+ }
153
+ const f = class f extends n {
154
+ constructor() {
155
+ super("h1");
156
+ }
146
157
  };
147
- customElements.get("px-h1") || customElements.define("px-h1", u);
148
- //#endregion
149
- //#region src/H2.ts
150
- var d = class extends l {
151
- static {
152
- this.nativeName = "h2";
153
- }
154
- constructor() {
155
- super("h2");
156
- }
158
+ f.nativeName = "h1";
159
+ let h = f;
160
+ customElements.get("px-h1") || customElements.define("px-h1", h);
161
+ const v = class v extends n {
162
+ constructor() {
163
+ super("h2");
164
+ }
157
165
  };
158
- customElements.get("px-h2") || customElements.define("px-h2", d);
159
- //#endregion
160
- //#region src/H3.ts
161
- var f = class extends l {
162
- static {
163
- this.nativeName = "h3";
164
- }
165
- constructor() {
166
- super("h3");
167
- }
166
+ v.nativeName = "h2";
167
+ let x = v;
168
+ customElements.get("px-h2") || customElements.define("px-h2", x);
169
+ const c = class c extends n {
170
+ constructor() {
171
+ super("h3");
172
+ }
168
173
  };
169
- customElements.get("px-h3") || customElements.define("px-h3", f);
170
- //#endregion
171
- //#region src/H4.ts
172
- var p = class extends l {
173
- static {
174
- this.nativeName = "h4";
175
- }
176
- constructor() {
177
- super("h4");
178
- }
174
+ c.nativeName = "h3";
175
+ let d = c;
176
+ customElements.get("px-h3") || customElements.define("px-h3", d);
177
+ const m = class m extends n {
178
+ constructor() {
179
+ super("h4");
180
+ }
179
181
  };
182
+ m.nativeName = "h4";
183
+ let p = m;
180
184
  customElements.get("px-h4") || customElements.define("px-h4", p);
181
- //#endregion
182
- //#region src/H5.ts
183
- var m = class extends l {
184
- static {
185
- this.nativeName = "h5";
186
- }
187
- constructor() {
188
- super("h5");
189
- }
185
+ const b = class b extends n {
186
+ constructor() {
187
+ super("h5");
188
+ }
190
189
  };
191
- customElements.get("px-h5") || customElements.define("px-h5", m);
192
- //#endregion
193
- //#region src/H6.ts
194
- var h = class extends l {
195
- static {
196
- this.nativeName = "h6";
197
- }
198
- constructor() {
199
- super("h6");
200
- }
190
+ b.nativeName = "h5";
191
+ let g = b;
192
+ customElements.get("px-h5") || customElements.define("px-h5", g);
193
+ const y = class y extends n {
194
+ constructor() {
195
+ super("h6");
196
+ }
197
+ };
198
+ y.nativeName = "h6";
199
+ let z = y;
200
+ customElements.get("px-h6") || customElements.define("px-h6", z);
201
+ export {
202
+ h as H1,
203
+ x as H2,
204
+ d as H3,
205
+ p as H4,
206
+ g as H5,
207
+ z as H6
201
208
  };
202
- customElements.get("px-h6") || customElements.define("px-h6", h);
203
- //#endregion
204
- export { u as H1, d as H2, f as H3, p as H4, m as H5, h as H6 };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-heading",
3
- "version": "1.4.14-beta.3",
3
+ "version": "1.4.14",
4
4
  "description": "",
5
5
  "main": "dist/index.es.js",
6
6
  "types": "dist/index.d.ts",