@proximus/lavender-paragraph 2.0.0-alpha.18 → 2.0.0-alpha.181

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/Paragraph.d.ts +20 -20
  2. package/dist/index.es.js +143 -151
  3. package/package.json +2 -2
package/dist/Paragraph.d.ts CHANGED
@@ -12,24 +12,24 @@ export declare class Paragraph extends PxElement<HTMLParagraphElement> {
12
12
  attrName: string;
13
13
  breakpoint: string;
14
14
  };
15
- get variant(): string;
16
- set variant(value: string);
17
- get color(): string;
18
- set color(value: string);
19
- get fontSize(): string;
20
- set fontSize(value: string);
21
- get fontWeight(): string;
22
- set fontWeight(value: string);
23
- get textAlign(): string;
24
- set textAlign(value: string);
25
- get textAlignMobile(): string;
26
- set textAlignMobile(value: string);
27
- get textAlignTablet(): string;
28
- set textAlignTablet(value: string);
29
- get textAlignLaptop(): string;
30
- set textAlignLaptop(value: string);
31
- get inverted(): string;
32
- set inverted(value: string);
33
- get disabled(): string;
34
- set disabled(value: string);
15
+ get variant(): string | null;
16
+ set variant(value: string | null);
17
+ get color(): string | null;
18
+ set color(value: string | null);
19
+ get fontSize(): string | null;
20
+ set fontSize(value: string | null);
21
+ get fontWeight(): string | null;
22
+ set fontWeight(value: string | null);
23
+ get textAlign(): string | null;
24
+ set textAlign(value: string | null);
25
+ get textAlignMobile(): string | null;
26
+ set textAlignMobile(value: string | null);
27
+ get textAlignTablet(): string | null;
28
+ set textAlignTablet(value: string | null);
29
+ get textAlignLaptop(): string | null;
30
+ set textAlignLaptop(value: string | null);
31
+ get inverted(): boolean;
32
+ set inverted(value: boolean);
33
+ get disabled(): boolean;
34
+ set disabled(value: boolean);
35
35
  }
package/dist/index.es.js CHANGED
@@ -1,152 +1,144 @@
1
- import { PxElement as p, textalignValues as g, fontweightValues as f, fontsizeValues as v, colorValues as z, headingValues as c, log as a } from "@proximus/lavender-common";
2
- const m = "p,::slotted(p){font-family:var(--px-font-family);color:var(--px-color-text-neutral-default);font-size:var(--px-text-size-body-m-mobile);font-weight:var(--px-font-weight-body);line-height:var(--px-line-height-ratio-l);margin:0}::slotted(p){margin-bottom:var(--px-spacing-xs-mobile)}.text-align-left{text-align:left}.text-align-center{text-align:center}.text-align-right{text-align:right}:host([inverted]) p,:host([inverted]) ::slotted(p){color:var(--px-color-text-neutral-inverted)}@media only screen and (max-width: 768px){.text-align-left--mobile{text-align:left}.text-align-center--mobile{text-align:center}.text-align-right--mobile{text-align:right}}@media only screen and (min-width: 768px){p,::slotted(p){font-size:var(--px-text-size-body-m-desktop)}::slotted(p){margin-bottom:var(--px-spacing-xs-tablet)}.text-align-left--tablet{text-align:left}.text-align-center--tablet{text-align:center}.text-align-right--tablet{text-align:right}}@media only screen and (min-width: 1025px){p,::slotted(p){font-size:var(--px-text-size-body-m-desktop)}::slotted(p){margin-bottom:var(--px-spacing-xs-laptop)}.text-align-left--laptop{text-align:left}.text-align-center--laptop{text-align:center}.text-align-right--laptop{text-align:right}}@media only screen and (min-width: 90.0625em){::slotted(p){margin-bottom:var(--px-spacing-xs-desktop)}}", b = "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)}}", y = ".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)}", d = new CSSStyleSheet(), h = new CSSStyleSheet(), x = new CSSStyleSheet();
3
- d.replaceSync(m);
4
- h.replaceSync(y);
5
- x.replaceSync(b);
6
- const n = class n extends p {
7
- constructor() {
8
- super(h, x, d), this.template = "<p><slot></slot></p>", this.shadowRoot.innerHTML = this.template;
9
- }
10
- static get observedAttributes() {
11
- return [
12
- ...super.observedAttributes,
13
- "variant",
14
- "color",
15
- "font-size",
16
- "font-weight",
17
- "text-align",
18
- "text-align--mobile",
19
- "text-align--tablet",
20
- "text-align--laptop",
21
- "inverted",
22
- "disabled"
23
- ];
24
- }
25
- attributeChangedCallback(t, i, e) {
26
- if (i !== e)
27
- switch (t) {
28
- case "variant":
29
- this.updateVariant(t, i, e, c);
30
- break;
31
- case "color":
32
- this.updateTypography(t, i, e, z);
33
- break;
34
- case "font-size":
35
- this.updateTypography(t, i, e, v);
36
- break;
37
- case "font-weight":
38
- this.updateTypography(t, i, e, f);
39
- break;
40
- case "text-align":
41
- case "text-align--mobile":
42
- case "text-align--tablet":
43
- case "text-align--laptop":
44
- this.updateTypography(t, i, e, g);
45
- break;
46
- case "disabled":
47
- this.color = "state-disabled";
48
- break;
49
- default:
50
- super.attributeChangedCallback(t, i, e);
51
- break;
52
- }
53
- }
54
- toggleClass(t, i) {
55
- t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`style-${t}`), i !== null && i !== "" && i !== "default" && this.$el.classList.toggle(`style-${i}`);
56
- }
57
- updateVariant(t, i, e, o) {
58
- this.checkName(o, e) ? this.toggleClass(i, e) : a(
59
- `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
60
- );
61
- }
62
- updateTypography(t, i, e, o) {
63
- if (!this.checkName(o, e))
64
- a(
65
- `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
66
- );
67
- else {
68
- const s = this.splitAttrNameFromBreakpoint(t), r = s.breakpoint;
69
- i !== null && i !== "" && this.$el.classList.toggle(
70
- `${s.attrName}-${i}${r}`
71
- ), e !== null && e !== "" && this.$el.classList.toggle(
72
- `${s.attrName}-${e}${r}`
73
- );
74
- }
75
- }
76
- splitAttrNameFromBreakpoint(t) {
77
- let i = "";
78
- if (["--mobile", "--tablet", "--laptop"].some(
79
- (e) => t.includes(e)
80
- )) {
81
- const e = t.split("--");
82
- t = e[0], i = `--${e[1]}`;
83
- }
84
- return { attrName: t, breakpoint: i };
85
- }
86
- get variant() {
87
- return this.getAttribute("variant");
88
- }
89
- set variant(t) {
90
- this.setAttribute("variant", t);
91
- }
92
- get color() {
93
- return this.getAttribute("color");
94
- }
95
- set color(t) {
96
- this.setAttribute("color", t);
97
- }
98
- get fontSize() {
99
- return this.getAttribute("font-size");
100
- }
101
- set fontSize(t) {
102
- this.setAttribute("font-size", t);
103
- }
104
- get fontWeight() {
105
- return this.getAttribute("font-weight");
106
- }
107
- set fontWeight(t) {
108
- this.setAttribute("font-weight", 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 inverted() {
135
- return this.getAttribute("inverted");
136
- }
137
- set inverted(t) {
138
- this.setAttribute("inverted", t);
139
- }
140
- get disabled() {
141
- return this.getAttribute("disabled");
142
- }
143
- set disabled(t) {
144
- this.setAttribute("disabled", t);
145
- }
146
- };
147
- n.nativeName = "p";
148
- let l = n;
149
- customElements.get("px-p") || customElements.define("px-p", l);
150
- export {
151
- l as Paragraph
1
+ import { PxElement as e, colorValues as t, fontsizeValues as n, fontweightValues as r, headingValues as i, log as a, textalignValues as o } from "@proximus/lavender-common";
2
+ //#region src/paragraph.css?inline
3
+ var s = "p,::slotted(p){font-family:var(--px-font-family);color:var(--px-color-text-neutral-default);font-size:var(--px-text-size-body-m-mobile);font-weight:var(--px-font-weight-body);line-height:var(--px-line-height-ratio-l);margin:0}::slotted(p){margin-bottom:var(--px-spacing-xs-mobile)}.text-align-left{text-align:left}.text-align-center{text-align:center}.text-align-right{text-align:right}:host([inverted]) p,:host([inverted]) ::slotted(p){color:var(--px-color-text-neutral-inverted)}@media screen and (width<=48rem){.text-align-left--mobile{text-align:left}.text-align-center--mobile{text-align:center}.text-align-right--mobile{text-align:right}}@media screen and (width>=48rem){p,::slotted(p){font-size:var(--px-text-size-body-m-desktop)}::slotted(p){margin-bottom:var(--px-spacing-xs-tablet)}.text-align-left--tablet{text-align:left}.text-align-center--tablet{text-align:center}.text-align-right--tablet{text-align:right}}@media screen and (width>=64.0625rem){p,::slotted(p){font-size:var(--px-text-size-body-m-desktop)}::slotted(p){margin-bottom:var(--px-spacing-xs-laptop)}.text-align-left--laptop{text-align:left}.text-align-center--laptop{text-align:center}.text-align-right--laptop{text-align:right}}@media screen and (width>=90.0625rem){::slotted(p){margin-bottom:var(--px-spacing-xs-desktop)}}", 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{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)}}", l = ".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)}", u = new CSSStyleSheet(), d = new CSSStyleSheet(), f = new CSSStyleSheet();
4
+ u.replaceSync(s), d.replaceSync(l), f.replaceSync(c);
5
+ var p = class extends e {
6
+ static {
7
+ this.nativeName = "p";
8
+ }
9
+ constructor() {
10
+ super(d, f, u), this.template = "<p><slot></slot></p>", this.shadowRoot.innerHTML = this.template;
11
+ }
12
+ static get observedAttributes() {
13
+ return [
14
+ ...super.observedAttributes,
15
+ "variant",
16
+ "color",
17
+ "font-size",
18
+ "font-weight",
19
+ "text-align",
20
+ "text-align--mobile",
21
+ "text-align--tablet",
22
+ "text-align--laptop",
23
+ "inverted",
24
+ "disabled"
25
+ ];
26
+ }
27
+ attributeChangedCallback(e, a, s) {
28
+ if (a !== s) switch (e) {
29
+ case "variant":
30
+ this.updateVariant(e, a, s, i);
31
+ break;
32
+ case "color":
33
+ this.updateTypography(e, a, s, t);
34
+ break;
35
+ case "font-size":
36
+ this.updateTypography(e, a, s, n);
37
+ break;
38
+ case "font-weight":
39
+ this.updateTypography(e, a, s, r);
40
+ break;
41
+ case "text-align":
42
+ case "text-align--mobile":
43
+ case "text-align--tablet":
44
+ case "text-align--laptop":
45
+ this.updateTypography(e, a, s, o);
46
+ break;
47
+ case "disabled":
48
+ this.color = "state-disabled";
49
+ break;
50
+ default: super.attributeChangedCallback(e, a, s);
51
+ }
52
+ }
53
+ toggleClass(e, t) {
54
+ e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`style-${e}`), t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`style-${t}`);
55
+ }
56
+ updateVariant(e, t, n, r) {
57
+ this.checkName(r, n) ? this.toggleClass(t, n) : a(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
58
+ }
59
+ updateTypography(e, t, n, r) {
60
+ if (!this.checkName(r, n)) a(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
61
+ else {
62
+ let r = this.splitAttrNameFromBreakpoint(e), i = r.breakpoint;
63
+ t !== null && t !== "" && this.$el.classList.toggle(`${r.attrName}-${t}${i}`), n !== null && n !== "" && this.$el.classList.toggle(`${r.attrName}-${n}${i}`);
64
+ }
65
+ }
66
+ splitAttrNameFromBreakpoint(e) {
67
+ let t = "";
68
+ if ([
69
+ "--mobile",
70
+ "--tablet",
71
+ "--laptop"
72
+ ].some((t) => e.includes(t))) {
73
+ let n = e.split("--");
74
+ e = n[0], t = `--${n[1]}`;
75
+ }
76
+ return {
77
+ attrName: e,
78
+ breakpoint: t
79
+ };
80
+ }
81
+ get variant() {
82
+ return this.getAttribute("variant");
83
+ }
84
+ set variant(e) {
85
+ this._updateAttribute("variant", e);
86
+ }
87
+ get color() {
88
+ return this.getAttribute("color");
89
+ }
90
+ set color(e) {
91
+ this._updateAttribute("color", e);
92
+ }
93
+ get fontSize() {
94
+ return this.getAttribute("font-size");
95
+ }
96
+ set fontSize(e) {
97
+ this._updateAttribute("font-size", e);
98
+ }
99
+ get fontWeight() {
100
+ return this.getAttribute("font-weight");
101
+ }
102
+ set fontWeight(e) {
103
+ this._updateAttribute("font-weight", e);
104
+ }
105
+ get textAlign() {
106
+ return this.getAttribute("text-align");
107
+ }
108
+ set textAlign(e) {
109
+ this._updateAttribute("text-align", e);
110
+ }
111
+ get textAlignMobile() {
112
+ return this.getAttribute("text-align--mobile");
113
+ }
114
+ set textAlignMobile(e) {
115
+ this._updateAttribute("text-align--mobile", e);
116
+ }
117
+ get textAlignTablet() {
118
+ return this.getAttribute("text-align--tablet");
119
+ }
120
+ set textAlignTablet(e) {
121
+ this._updateAttribute("text-align--tablet", e);
122
+ }
123
+ get textAlignLaptop() {
124
+ return this.getAttribute("text-align--laptop");
125
+ }
126
+ set textAlignLaptop(e) {
127
+ this._updateAttribute("text-align--laptop", e);
128
+ }
129
+ get inverted() {
130
+ return this.hasAttribute("inverted");
131
+ }
132
+ set inverted(e) {
133
+ this._updateBooleanAttribute("inverted", e);
134
+ }
135
+ get disabled() {
136
+ return this.hasAttribute("disabled");
137
+ }
138
+ set disabled(e) {
139
+ this._updateBooleanAttribute("disabled", e);
140
+ }
152
141
  };
142
+ customElements.get("px-p") || customElements.define("px-p", p);
143
+ //#endregion
144
+ export { p as Paragraph };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-paragraph",
3
- "version": "2.0.0-alpha.18",
3
+ "version": "2.0.0-alpha.181",
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"