@proximus/lavender-content-header 1.0.0-alpha.2 → 1.0.0-alpha.4
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 +11 -7
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
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}[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);
|
|
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);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)}}@media only screen and (min-width: 1025px){.content-header-content{gap:var(--px-spacing-after-element-l-desktop)}}", n = new CSSStyleSheet();
|
|
3
3
|
n.replaceSync(d);
|
|
4
4
|
const o = class o extends s {
|
|
5
5
|
constructor() {
|
|
6
6
|
super(n), this.template = () => `<div class="content-header">
|
|
7
7
|
<div class="contrast-helper"></div>
|
|
8
|
-
<px-section>
|
|
8
|
+
<px-section padding-block="l">
|
|
9
9
|
<div class="content-header-content">
|
|
10
10
|
<px-vstack gap="heading-to-subtitle">
|
|
11
11
|
<px-h1><slot></slot></px-h1>
|
|
@@ -16,6 +16,7 @@ const o = class o extends s {
|
|
|
16
16
|
<slot name="patch-description"></slot>
|
|
17
17
|
</px-stack>` : ""}
|
|
18
18
|
</div>
|
|
19
|
+
${this.$overlapSlot ? '<slot name="overlap" slot="overlap"></slot>' : ""}
|
|
19
20
|
</px-section>
|
|
20
21
|
</div>`, this.shadowRoot.innerHTML = this.template();
|
|
21
22
|
}
|
|
@@ -67,8 +68,8 @@ const o = class o extends s {
|
|
|
67
68
|
this.$section.backgroundPosition = e;
|
|
68
69
|
break;
|
|
69
70
|
case "inverted":
|
|
70
|
-
for (let
|
|
71
|
-
this.$children[
|
|
71
|
+
for (let r = 0; r < this.$children.length; r++)
|
|
72
|
+
this.$children[r].hasAttribute("inverted") || this.$children[r].toggleAttribute("inverted");
|
|
72
73
|
this.$h1.toggleAttribute("inverted", e !== null), this.$el.toggleAttribute("inverted", e !== null);
|
|
73
74
|
break;
|
|
74
75
|
default:
|
|
@@ -88,6 +89,9 @@ const o = class o extends s {
|
|
|
88
89
|
get $patchDescriptionSlot() {
|
|
89
90
|
return this.querySelector('[slot="patch-description"]');
|
|
90
91
|
}
|
|
92
|
+
get $overlapSlot() {
|
|
93
|
+
return this.querySelector('[slot="overlap"]');
|
|
94
|
+
}
|
|
91
95
|
get $children() {
|
|
92
96
|
return this.querySelectorAll("px-content-header > *");
|
|
93
97
|
}
|
|
@@ -165,8 +169,8 @@ const o = class o extends s {
|
|
|
165
169
|
}
|
|
166
170
|
};
|
|
167
171
|
o.nativeName = "div";
|
|
168
|
-
let
|
|
169
|
-
customElements.define("px-content-header",
|
|
172
|
+
let i = o;
|
|
173
|
+
customElements.define("px-content-header", i);
|
|
170
174
|
export {
|
|
171
|
-
|
|
175
|
+
i as ContentHeader
|
|
172
176
|
};
|
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.4",
|
|
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": "2fc1887049a9bd838575a81ee8d8d2d63929df11"
|
|
46
46
|
}
|