@proximus/lavender-heading 2.0.0-alpha.19 → 2.0.0-alpha.191

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 +18 -16
  2. package/dist/index.es.js +196 -193
  3. package/package.json +2 -2
package/dist/AbstractHeading.d.ts CHANGED
@@ -8,20 +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;
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);
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);
27
+ get autoSpacing(): boolean;
28
+ set autoSpacing(value: boolean);
27
29
  }
package/dist/index.es.js CHANGED
@@ -1,201 +1,204 @@
1
- import { PxElement as A, textalignValues as w, colorValues as $, headingValues as C, log as a } from "@proximus/lavender-common";
2
- const E = "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-3xl-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-2xl-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-xl-mobile);line-height:var(--px-line-height-ratio-s)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-l-mobile)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-m-mobile)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-base-mobile)}.style-subtitle{font-size:var(--px-text-size-heading-l-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){::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-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-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-base-desktop)}.style-subtitle{font-size:var(--px-text-size-heading-xl-desktop)}}@media only screen and (min-width: 1025px){::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-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-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-base-desktop)}.style-subtitle{font-size:var(--px-text-size-heading-xl-desktop)}}@media screen and (min-width: 1441px){::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)}}", S = ".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 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)}.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)}}@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-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(E);
4
- const k = new CSSStyleSheet();
5
- k.replaceSync(S);
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
- ];
27
- }
28
- attributeChangedCallback(t, e, i) {
29
- if (e !== i)
30
- switch (t) {
31
- case "variant":
32
- this.updateAttribute(t, e, i, C);
33
- break;
34
- case "color":
35
- this.updateColor(e, i, $);
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, w);
43
- break;
44
- default:
45
- super.attributeChangedCallback(t, e, i);
46
- break;
47
- }
48
- }
49
- toggleClass(t, e) {
50
- t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`style-${t}`), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`style-${e}`);
51
- }
52
- updateAttribute(t, e, i, l) {
53
- this.checkName(l, i) ? this.toggleClass(e, i) : a(
54
- `${i} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
55
- );
56
- }
57
- updateColor(t, e, i) {
58
- if (!this.checkName(i, e)) {
59
- a(
60
- `${e} is not an allowed color value for ${this.tagName.toLowerCase()}`
61
- );
62
- return;
63
- }
64
- const l = (o) => {
65
- o !== null && o !== "" && o !== "default" && (this.$el.style.setProperty(
66
- "--heading-color-default",
67
- `var(--px-color-text-${o}-default)`
68
- ), this.$el.style.setProperty(
69
- "--heading-color-inverted",
70
- `var(--px-color-text-${o}-inverted)`
71
- ));
72
- };
73
- l(t), l(e);
74
- }
75
- updateTextAlign(t, e, i, l) {
76
- if (!this.checkName(l, i)) {
77
- a(
78
- `${i} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
79
- );
80
- return;
81
- }
82
- const o = (s, r) => {
83
- r !== null && r !== "" && r !== "default" && this.$el.style.setProperty(
84
- `--heading-text-align--${s}`,
85
- r
86
- );
87
- };
88
- if (t === "text-align")
89
- ["mobile", "tablet", "laptop", "desktop"].forEach((s) => {
90
- o(s, e), o(s, i);
91
- });
92
- else {
93
- const s = t.split("--")[1];
94
- o(s, e), o(s, i);
95
- }
96
- }
97
- get variant() {
98
- return this.getAttribute("variant");
99
- }
100
- set variant(t) {
101
- this.setAttribute("variant", t);
102
- }
103
- get color() {
104
- return this.getAttribute("color");
105
- }
106
- set color(t) {
107
- this.setAttribute("color", t);
108
- }
109
- get textAlign() {
110
- return this.getAttribute("text-align");
111
- }
112
- set textAlign(t) {
113
- this.setAttribute("text-align", t);
114
- }
115
- get textAlignMobile() {
116
- return this.getAttribute("text-align--mobile");
117
- }
118
- set textAlignMobile(t) {
119
- this.setAttribute("text-align--mobile", t);
120
- }
121
- get textAlignTablet() {
122
- return this.getAttribute("text-align--tablet");
123
- }
124
- set textAlignTablet(t) {
125
- this.setAttribute("text-align--tablet", t);
126
- }
127
- get textAlignLaptop() {
128
- return this.getAttribute("text-align--laptop");
129
- }
130
- set textAlignLaptop(t) {
131
- this.setAttribute("text-align--laptop", t);
132
- }
133
- get textAlignDesktop() {
134
- return this.getAttribute("text-align--desktop");
135
- }
136
- set textAlignDesktop(t) {
137
- this.setAttribute("text-align--desktop", t);
138
- }
139
- get inverted() {
140
- return this.getAttribute("inverted");
141
- }
142
- set inverted(t) {
143
- this.setAttribute("inverted", t);
144
- }
145
- }
146
- const c = class c extends n {
147
- constructor() {
148
- super("h1");
149
- }
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
+ }
150
146
  };
151
- c.nativeName = "h1";
152
- let h = c;
153
- customElements.get("px-h1") || customElements.define("px-h1", h);
154
- const v = class v extends n {
155
- constructor() {
156
- super("h2");
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
157
  };
159
- v.nativeName = "h2";
160
- let d = v;
161
158
  customElements.get("px-h2") || customElements.define("px-h2", d);
162
- const z = class z extends n {
163
- constructor() {
164
- super("h3");
165
- }
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
168
  };
167
- z.nativeName = "h3";
168
- let x = z;
169
- customElements.get("px-h3") || customElements.define("px-h3", x);
170
- const m = class m extends n {
171
- constructor() {
172
- super("h4");
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
179
  };
175
- m.nativeName = "h4";
176
- let p = m;
177
180
  customElements.get("px-h4") || customElements.define("px-h4", p);
178
- const b = class b extends n {
179
- constructor() {
180
- super("h5");
181
- }
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
+ }
182
190
  };
183
- b.nativeName = "h5";
184
- let g = b;
185
- customElements.get("px-h5") || customElements.define("px-h5", g);
186
- const y = class y extends n {
187
- constructor() {
188
- super("h6");
189
- }
190
- };
191
- y.nativeName = "h6";
192
- let f = y;
193
- customElements.get("px-h6") || customElements.define("px-h6", f);
194
- export {
195
- h as H1,
196
- d as H2,
197
- x as H3,
198
- p as H4,
199
- g as H5,
200
- f as H6
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
+ }
201
201
  };
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": "2.0.0-alpha.19",
3
+ "version": "2.0.0-alpha.191",
4
4
  "description": "",
5
5
  "main": "dist/index.es.js",
6
6
  "types": "dist/index.d.ts",
@@ -13,7 +13,7 @@
13
13
  "clean": "rm -rf dist",
14
14
  "build": "npm run clean && NODE_ENV=development vite build && tsc && npm run transform-package-json && npm run wc-manifest",
15
15
  "test": "vitest run --coverage",
16
- "wc-manifest": "cem analyze --globs \"src/*\" --config ../custom-elements-manifest.config.js --outdir dist"
16
+ "wc-manifest": "cem analyze --globs \"src/*\" --config ../../custom-elements-manifest.config.js --outdir dist"
17
17
  },
18
18
  "publishConfig": {
19
19
  "access": "public"