@proximus/lavender-content-header 1.0.0-alpha.1 → 1.0.0-alpha.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +172 -1
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -1 +1,172 @@
|
|
|
1
|
-
|
|
1
|
+
import { PxElement as s, backgroundSizeValues as c, gradientValues as l, backgroundColorValues as g } from "@proximus/lavender-common";
|
|
2
|
+
const d = ":host,:host>*{display:block;box-sizing:border-box}.content-header{position:relative;z-index:0}[min-height] .content-header-content{min-height:15.625rem}.content-header-content{display:flex;flex-direction:column;gap:var(--px-spacing-after-element-l-mobile);padding-block:var(--px-spacing-after-element-l-mobile);z-index:2;position:relative;box-sizing:border-box}.contrast-helper{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;display:none;border-radius:var(--px-radius-main)}[contrast-helper-gradient] .contrast-helper{display:block;background-image:linear-gradient(90deg,#fff 23.43%,#fff0 81.69%)}[inverted] :is([contrast-helper-gradient] .contrast-helper){background-image:linear-gradient(90deg,#000 23.43%,#0000 81.69%)}[contrast-helper-overlay] .contrast-helper{display:block;background-color:#ffffffb3}[inverted] :is([contrast-helper-overlay] .contrast-helper){background-color:#0006}@media only screen and (min-width: 768px){.content-header-content{gap:var(--px-spacing-after-element-l-tablet);padding-block:var(--px-spacing-after-element-l-tablet)}}@media only screen and (min-width: 1025px){.content-header-content{gap:var(--px-spacing-after-element-l-desktop);padding-block:var(--px-spacing-after-element-l-desktop)}}", n = new CSSStyleSheet();
|
|
3
|
+
n.replaceSync(d);
|
|
4
|
+
const o = class o extends s {
|
|
5
|
+
constructor() {
|
|
6
|
+
super(n), this.template = () => `<div class="content-header">
|
|
7
|
+
<div class="contrast-helper"></div>
|
|
8
|
+
<px-section>
|
|
9
|
+
<div class="content-header-content">
|
|
10
|
+
<px-vstack gap="heading-to-subtitle">
|
|
11
|
+
<px-h1><slot></slot></px-h1>
|
|
12
|
+
<slot name="subtitle"></slot>
|
|
13
|
+
</px-vstack>
|
|
14
|
+
${this.$patchDescriptionSlot ? `<px-stack gap="after-element-s" direction="row" direction--mobile="column">
|
|
15
|
+
<slot name="patch" shrink></slot>
|
|
16
|
+
<slot name="patch-description"></slot>
|
|
17
|
+
</px-stack>` : ""}
|
|
18
|
+
</div>
|
|
19
|
+
</px-section>
|
|
20
|
+
</div>`, this.shadowRoot.innerHTML = this.template();
|
|
21
|
+
}
|
|
22
|
+
static get observedAttributes() {
|
|
23
|
+
return [
|
|
24
|
+
"background-color",
|
|
25
|
+
"background-gradient",
|
|
26
|
+
"background-image",
|
|
27
|
+
"background-image--mobile",
|
|
28
|
+
"background-image--tablet",
|
|
29
|
+
"background-image--laptop",
|
|
30
|
+
"background-size",
|
|
31
|
+
"background-position",
|
|
32
|
+
"contrast-helper-gradient",
|
|
33
|
+
"contrast-helper-overlay",
|
|
34
|
+
"min-height",
|
|
35
|
+
"inverted"
|
|
36
|
+
];
|
|
37
|
+
}
|
|
38
|
+
connectedCallback() {
|
|
39
|
+
var t;
|
|
40
|
+
(t = super.connectedCallback) == null || t.call(this), this.$subtitleSlot && this.$subtitleSlot.setAttribute("variant", "subtitle"), this.$patchDescriptionSlot && (this.$patchDescriptionSlot.localName === "px-p" && this.$patchDescriptionSlot.setAttribute("variant", "default"), (this.$patchDescriptionSlot.localName === "px-p" || this.$patchDescriptionSlot.localName === "px-span") && (this.$patchDescriptionSlot.setAttribute("font-size", "body-l"), this.$patchDescriptionSlot.removeAttribute("font-weight"), this.$patchDescriptionSlot.removeAttribute("color")), this.$patchDescriptionSlot.localName === "px-price" && this.$patchDescriptionSlot.setAttribute("size", "m"));
|
|
41
|
+
}
|
|
42
|
+
attributeChangedCallback(t, a, e) {
|
|
43
|
+
if (a !== e)
|
|
44
|
+
switch (t) {
|
|
45
|
+
case "background-color":
|
|
46
|
+
this.$section.backgroundColor = g.indexOf(e) > 0 ? e : "none";
|
|
47
|
+
break;
|
|
48
|
+
case "background-gradient":
|
|
49
|
+
this.$section.gradient = l.indexOf(e) > 0 ? e : "none";
|
|
50
|
+
break;
|
|
51
|
+
case "background-image":
|
|
52
|
+
this.$section.backgroundImage = e;
|
|
53
|
+
break;
|
|
54
|
+
case "background-image--mobile":
|
|
55
|
+
this.$section.backgroundImageMobile = e;
|
|
56
|
+
break;
|
|
57
|
+
case "background-image--tablet":
|
|
58
|
+
this.$section.backgroundImageTablet = e;
|
|
59
|
+
break;
|
|
60
|
+
case "background-image--laptop":
|
|
61
|
+
this.$section.backgroundImageLaptop = e;
|
|
62
|
+
break;
|
|
63
|
+
case "background-size":
|
|
64
|
+
this.$section.backgroundSize = c.indexOf(e) > 0 ? e : "";
|
|
65
|
+
break;
|
|
66
|
+
case "background-position":
|
|
67
|
+
this.$section.backgroundPosition = e;
|
|
68
|
+
break;
|
|
69
|
+
case "inverted":
|
|
70
|
+
for (let i = 0; i < this.$children.length; i++)
|
|
71
|
+
this.$children[i].hasAttribute("inverted") || this.$children[i].toggleAttribute("inverted");
|
|
72
|
+
this.$h1.toggleAttribute("inverted", e !== null), this.$el.toggleAttribute("inverted", e !== null);
|
|
73
|
+
break;
|
|
74
|
+
default:
|
|
75
|
+
super.attributeChangedCallback(t, a, e);
|
|
76
|
+
break;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
get $section() {
|
|
80
|
+
return this.shadowRoot.querySelector("px-section");
|
|
81
|
+
}
|
|
82
|
+
get $h1() {
|
|
83
|
+
return this.shadowRoot.querySelector("px-h1");
|
|
84
|
+
}
|
|
85
|
+
get $subtitleSlot() {
|
|
86
|
+
return this.querySelector('[slot="subtitle"]');
|
|
87
|
+
}
|
|
88
|
+
get $patchDescriptionSlot() {
|
|
89
|
+
return this.querySelector('[slot="patch-description"]');
|
|
90
|
+
}
|
|
91
|
+
get $children() {
|
|
92
|
+
return this.querySelectorAll("px-content-header > *");
|
|
93
|
+
}
|
|
94
|
+
get backgroundColor() {
|
|
95
|
+
return this.getAttribute("background-color");
|
|
96
|
+
}
|
|
97
|
+
set backgroundColor(t) {
|
|
98
|
+
this.setAttribute("background-color", t);
|
|
99
|
+
}
|
|
100
|
+
get gradient() {
|
|
101
|
+
return this.getAttribute("background-gradient");
|
|
102
|
+
}
|
|
103
|
+
set gradient(t) {
|
|
104
|
+
this.setAttribute("background-gradient", t);
|
|
105
|
+
}
|
|
106
|
+
get backgroundImage() {
|
|
107
|
+
return this.getAttribute("background-image");
|
|
108
|
+
}
|
|
109
|
+
set backgroundImage(t) {
|
|
110
|
+
this.setAttribute("background-image", t);
|
|
111
|
+
}
|
|
112
|
+
get backgroundImageMobile() {
|
|
113
|
+
return this.getAttribute("background-image--mobile");
|
|
114
|
+
}
|
|
115
|
+
set backgroundImageMobile(t) {
|
|
116
|
+
this.setAttribute("background-image--mobile", t);
|
|
117
|
+
}
|
|
118
|
+
get backgroundImageTablet() {
|
|
119
|
+
return this.getAttribute("background-image--tablet");
|
|
120
|
+
}
|
|
121
|
+
set backgroundImageTablet(t) {
|
|
122
|
+
this.setAttribute("background-image--tablet", t);
|
|
123
|
+
}
|
|
124
|
+
get backgroundImageLaptop() {
|
|
125
|
+
return this.getAttribute("background-image--laptop");
|
|
126
|
+
}
|
|
127
|
+
set backgroundImageLaptop(t) {
|
|
128
|
+
this.setAttribute("background-image--laptop", t);
|
|
129
|
+
}
|
|
130
|
+
get backgroundSize() {
|
|
131
|
+
return this.getAttribute("background-size");
|
|
132
|
+
}
|
|
133
|
+
set backgroundSize(t) {
|
|
134
|
+
this.setAttribute("background-size", t);
|
|
135
|
+
}
|
|
136
|
+
get backgroundPosition() {
|
|
137
|
+
return this.getAttribute("background-position");
|
|
138
|
+
}
|
|
139
|
+
set backgroundPosition(t) {
|
|
140
|
+
this.setAttribute("background-position", t);
|
|
141
|
+
}
|
|
142
|
+
get gradientContrastHelper() {
|
|
143
|
+
return this.hasAttribute("contrast-helper-gradient");
|
|
144
|
+
}
|
|
145
|
+
set gradientContrastHelper(t) {
|
|
146
|
+
t ? this.setAttribute("contrast-helper-gradient", "") : this.removeAttribute("contrast-helper-gradient");
|
|
147
|
+
}
|
|
148
|
+
get overlayContrastHelper() {
|
|
149
|
+
return this.hasAttribute("contrast-helper-overlay");
|
|
150
|
+
}
|
|
151
|
+
set overlayContrastHelper(t) {
|
|
152
|
+
t ? this.setAttribute("contrast-helper-overlay", "") : this.removeAttribute("contrast-helper-overlay");
|
|
153
|
+
}
|
|
154
|
+
get inverted() {
|
|
155
|
+
return this.hasAttribute("inverted");
|
|
156
|
+
}
|
|
157
|
+
set inverted(t) {
|
|
158
|
+
t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
|
|
159
|
+
}
|
|
160
|
+
get minHeight() {
|
|
161
|
+
return this.hasAttribute("min-height");
|
|
162
|
+
}
|
|
163
|
+
set minHeight(t) {
|
|
164
|
+
t ? this.setAttribute("min-height", "") : this.removeAttribute("min-height");
|
|
165
|
+
}
|
|
166
|
+
};
|
|
167
|
+
o.nativeName = "div";
|
|
168
|
+
let r = o;
|
|
169
|
+
customElements.define("px-content-header", r);
|
|
170
|
+
export {
|
|
171
|
+
r as ContentHeader
|
|
172
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@proximus/lavender-content-header",
|
|
3
|
-
"version": "1.0.0-alpha.
|
|
3
|
+
"version": "1.0.0-alpha.3",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"exports": {
|
|
@@ -42,5 +42,5 @@
|
|
|
42
42
|
}
|
|
43
43
|
}
|
|
44
44
|
},
|
|
45
|
-
"gitHead": "
|
|
45
|
+
"gitHead": "8b16fd2c3718e56b12feb35261704be33f679327"
|
|
46
46
|
}
|