@proximus/lavender-container 1.0.0-alpha.49 → 1.0.0-alpha.51
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 +37 -36
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -1,15 +1,10 @@
|
|
|
1
1
|
import { PxElement as c, cssTokenBreakpoints as d, paddingValues as a, boxShadowValues as h, backgroundSizeValues as k, noBorderRadiusValues as m, borderRadiusValues as v, borderSideValues as A, borderValues as f, gradientValues as x, backgroundColorValues as y, borderColorValues as $ } from "@proximus/lavender-common";
|
|
2
|
-
const B = ':host{display:block}.container{font-family:var(--px-font-family);background-color:var(--background-color);background-image:var(--background-image);background:var(--background-gradient);border-radius:var(--px-radius-main);box-sizing:border-box;height:100%}:host([inverted]) .container{background-color:var(--background-color-inverted)}.border-none{border:none}.border-s{border:var(--px-border-
|
|
3
|
-
|
|
4
|
-
const L = ["anchor-right", "anchor-left", "anchor-full"], n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s = "px-padding",
|
|
2
|
+
const B = ':host{display:block}.container{font-family:var(--px-font-family);background-color:var(--background-color);background-image:var(--background-image);background:var(--background-gradient);border-radius:var(--px-radius-main);box-sizing:border-box;height:100%}:host([inverted]) .container{background-color:var(--background-color-inverted)}.border-none{border:none}.border-s{border:var(--px-size-border-s) solid var(--border-color)}.border-m{border:var(--px-size-border-m) solid var(--border-color)}.border-l{border:var(--px-size-border-l) solid var(--border-color)}.border-side-top{border-bottom-style:none;border-right-style:none;border-left-style:none}.border-side-right{border-top-style:none;border-bottom-style:none;border-left-style:none}.border-side-bottom{border-top-style:none;border-right-style:none;border-left-style:none}.border-side-left{border-top-style:none;border-right-style:none;border-bottom-style:none}.border-side-block{border-inline-style:none}.border-side-inline{border-block-style:none}:host([inverted]) .border-s,:host([inverted]) .border-m,:host([inverted]) .border-l{border-color:var(--border-color-inverted)}.border-radius-main{border-radius:var(--px-radius-main)}.border-radius-pill{border-radius:var(--px-radius-pill)}.no-border-radius-top{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all,.border-radius-none{border-radius:var(--px-radius-none)}.bgimg{background-repeat:no-repeat}.background-size-cover{background-size:cover;background-position:center center}.background-size-contain{background-size:contain}.box-shadow-none{box-shadow:none}.box-shadow-s{box-shadow:0 1px 2px #2525251f}.box-shadow-m{box-shadow:0 4px 6px -1px #25252514}.box-shadow-l{box-shadow:0 10px 15px -3px #25252514}.box-shadow-xl{box-shadow:0 20px 25px -5px #25252514}.anchored{position:relative}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]),::slotted([slot="anchor-full"]){position:absolute;top:0}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]){transform:translateY(-50%);z-index:2}::slotted([slot="anchor-right"]){right:var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) )}::slotted([slot="anchor-left"]){left:var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) )}::slotted([slot="anchor-full"]){transform:translateY(-100%);right:0;left:0;text-align:center;z-index:1}@media only screen and (max-width: 767px){.container{background-color:var(--background-color--mobile, var(--background-color));background-image:var( --background-image--mobile, var( --background-image, var(--background-gradient--mobile, var(--background-gradient)) ) )}:host([inverted]) .container{background-color:var( --background-color-inverted--mobile, var(--background-color-inverted) )}.border-side-top--mobile{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--mobile{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--mobile{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--mobile{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--mobile{border-inline-style:none;border-block-style:solid}.border-side-inline--mobile{border-block-style:none;border-inline-style:solid}.no-border-radius-top--mobile{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--mobile{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--mobile{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--mobile{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--mobile{border-radius:var(--px-radius-none)}}.border-s ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-s) * -1);left:calc(var(--px-size-border-s) * -1)}.border-m ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-m) * -1);left:calc(var(--px-size-border-m) * -1)}.border-l ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-l) * -1);left:calc(var(--px-size-border-l) * -1)}@media only screen and (min-width: 768px) and (max-width: 1024px){.container{background-color:var(--background-color--tablet, var(--background-color));background-image:var( --background-image--tablet, var( --background-image, var(--background-gradient--tablet, var(--background-gradient)) ) )}:host([inverted]) .container{background-color:var( --background-color-inverted--tablet, var(--background-color-inverted) )}.no-border-radius-top--tablet{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--tablet{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--tablet{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--tablet{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--tablet{border-radius:var(--px-radius-none)}.border-side-top--tablet{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--tablet{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--tablet{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--tablet{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--tablet{border-inline-style:none;border-block-style:solid}.border-side-inline--tablet{border-block-style:none;border-inline-style:solid}::slotted([slot="anchor-right"]){right:var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) )}::slotted([slot="anchor-left"]){left:var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) )}}@media only screen and (min-width: 1025px){.container{background-color:var(--background-color--laptop, var(--background-color));background-image:var( --background-image--laptop, var( --background-image, var(--background-gradient--laptop, var(--background-gradient)) ) )}:host([inverted]) .container{background-color:var( --background-color-inverted--laptop, var(--background-color-inverted) )}.no-border-radius-top--laptop{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--laptop{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--laptop{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--laptop{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--laptop{border-radius:var(--px-radius-none)}::slotted([slot="anchor-right"]){right:var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) )}::slotted([slot="anchor-left"]){left:var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) )}.border-side-top--laptop{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--laptop{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--laptop{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--laptop{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--laptop{border-inline-style:none;border-block-style:solid}.border-side-inline--laptop{border-block-style:none;border-inline-style:solid}}', p = new CSSStyleSheet();
|
|
3
|
+
p.replaceSync(B);
|
|
4
|
+
const L = ["anchor-right", "anchor-left", "anchor-full"], n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s = "px-padding", g = class g extends c {
|
|
5
5
|
constructor() {
|
|
6
|
-
super(
|
|
7
|
-
|
|
8
|
-
<slot name="anchor-right"></slot>
|
|
9
|
-
<slot name="anchor-full"></slot>
|
|
10
|
-
<slot></slot>
|
|
11
|
-
</div>`, this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [
|
|
12
|
-
l,
|
|
6
|
+
super(
|
|
7
|
+
p,
|
|
13
8
|
d(
|
|
14
9
|
"padding",
|
|
15
10
|
n,
|
|
@@ -55,7 +50,12 @@ const L = ["anchor-right", "anchor-left", "anchor-full"], n = (u, t, e) => `:hos
|
|
|
55
50
|
s,
|
|
56
51
|
"--container-padding-left"
|
|
57
52
|
)
|
|
58
|
-
|
|
53
|
+
), this.template = () => `<div class="container">
|
|
54
|
+
<slot name="anchor-left"></slot>
|
|
55
|
+
<slot name="anchor-right"></slot>
|
|
56
|
+
<slot name="anchor-full"></slot>
|
|
57
|
+
<slot></slot>
|
|
58
|
+
</div>`, this.shadowRoot.innerHTML = this.template();
|
|
59
59
|
}
|
|
60
60
|
static get observedAttributes() {
|
|
61
61
|
return [
|
|
@@ -90,7 +90,7 @@ const L = ["anchor-right", "anchor-left", "anchor-full"], n = (u, t, e) => `:hos
|
|
|
90
90
|
];
|
|
91
91
|
}
|
|
92
92
|
connectedCallback() {
|
|
93
|
-
super.connectedCallback(), this.padding || (this.padding = "m"), this.backgroundColor || (this.backgroundColor = "
|
|
93
|
+
super.connectedCallback(), this.padding || (this.padding = "m"), this.backgroundColor || (this.backgroundColor = "surface-light"), this.borderColor || (this.borderColor = "main");
|
|
94
94
|
const t = this.querySelector("[slot]");
|
|
95
95
|
t && L.includes(t.getAttribute("slot")) && this.shadowRoot.querySelector(".container").classList.toggle("anchored");
|
|
96
96
|
}
|
|
@@ -172,10 +172,10 @@ const L = ["anchor-right", "anchor-left", "anchor-full"], n = (u, t, e) => `:hos
|
|
|
172
172
|
if (this.checkName(x, e)) {
|
|
173
173
|
const r = this.splitAttrNameFromBreakpoint(t);
|
|
174
174
|
t = r.attrName;
|
|
175
|
-
const
|
|
175
|
+
const i = r.breakpoint;
|
|
176
176
|
this.$el.style.setProperty(
|
|
177
|
-
`--${t}${
|
|
178
|
-
`linear-gradient(var(--px-
|
|
177
|
+
`--${t}${i}`,
|
|
178
|
+
`linear-gradient(var(--px-color-background-gradient-${e}))`
|
|
179
179
|
);
|
|
180
180
|
} else
|
|
181
181
|
console.error(
|
|
@@ -183,14 +183,15 @@ const L = ["anchor-right", "anchor-left", "anchor-full"], n = (u, t, e) => `:hos
|
|
|
183
183
|
);
|
|
184
184
|
}
|
|
185
185
|
updateBackgroundColor(t, e) {
|
|
186
|
+
const r = e.startsWith("surface-");
|
|
186
187
|
if (this.checkName(y, e)) {
|
|
187
|
-
const
|
|
188
|
+
const i = this.splitAttrNameFromBreakpoint(t), o = i.breakpoint;
|
|
188
189
|
this.$el.style.setProperty(
|
|
189
|
-
`--${
|
|
190
|
-
`var(--px-background
|
|
190
|
+
`--${i.attrName}${o}`,
|
|
191
|
+
`var(--px-color-background-${e}${r ? "" : "-default"})`
|
|
191
192
|
), this.$el.style.setProperty(
|
|
192
|
-
`--${
|
|
193
|
-
`var(--px-background
|
|
193
|
+
`--${i.attrName}-inverted${o}`,
|
|
194
|
+
`var(--px-color-background-${e}${r ? "" : "-inverted"})`
|
|
194
195
|
);
|
|
195
196
|
} else
|
|
196
197
|
console.error(
|
|
@@ -200,39 +201,39 @@ const L = ["anchor-right", "anchor-left", "anchor-full"], n = (u, t, e) => `:hos
|
|
|
200
201
|
updateBorderColor(t, e) {
|
|
201
202
|
this.checkName($, e) ? (this.$el.style.setProperty(
|
|
202
203
|
`--${t}`,
|
|
203
|
-
`var(--px-border
|
|
204
|
+
`var(--px-color-border-${e}-default)`
|
|
204
205
|
), this.$el.style.setProperty(
|
|
205
206
|
`--${t}-inverted`,
|
|
206
|
-
`var(--px-border
|
|
207
|
+
`var(--px-color-border-${e}-inverted)`
|
|
207
208
|
)) : console.error(
|
|
208
209
|
`${e} is not an allowed ${t} value for ${this.$el}`
|
|
209
210
|
);
|
|
210
211
|
}
|
|
211
|
-
updateNoBorderRadius(t, e, r,
|
|
212
|
-
if (!this.checkName(
|
|
212
|
+
updateNoBorderRadius(t, e, r, i) {
|
|
213
|
+
if (!this.checkName(i, r))
|
|
213
214
|
console.error(
|
|
214
215
|
`${r} is not an allowed ${t} value for ${this.$el}`
|
|
215
216
|
);
|
|
216
217
|
else {
|
|
217
|
-
const
|
|
218
|
+
const o = this.splitAttrNameFromBreakpoint(t), b = o.breakpoint;
|
|
218
219
|
e !== null && e !== "" && this.$el.classList.toggle(
|
|
219
|
-
`${
|
|
220
|
+
`${o.attrName}-${e}${b}`
|
|
220
221
|
), r !== null && r !== "" && this.$el.classList.toggle(
|
|
221
|
-
`${
|
|
222
|
+
`${o.attrName}-${r}${b}`
|
|
222
223
|
);
|
|
223
224
|
}
|
|
224
225
|
}
|
|
225
|
-
updateAttribute(t, e, r,
|
|
226
|
-
if (!this.checkName(
|
|
226
|
+
updateAttribute(t, e, r, i) {
|
|
227
|
+
if (!this.checkName(i, r))
|
|
227
228
|
console.error(
|
|
228
229
|
`${r} is not an allowed ${t} value for ${this.$el}`
|
|
229
230
|
);
|
|
230
231
|
else {
|
|
231
|
-
const
|
|
232
|
+
const o = this.splitAttrNameFromBreakpoint(t), b = o.breakpoint;
|
|
232
233
|
e !== null && e !== "" && this.$el.classList.toggle(
|
|
233
|
-
`${
|
|
234
|
+
`${o.attrName}-${e}${b}`
|
|
234
235
|
), r !== null && r !== "" && this.$el.classList.toggle(
|
|
235
|
-
`${
|
|
236
|
+
`${o.attrName}-${r}${b}`
|
|
236
237
|
);
|
|
237
238
|
}
|
|
238
239
|
}
|
|
@@ -580,9 +581,9 @@ const L = ["anchor-right", "anchor-left", "anchor-full"], n = (u, t, e) => `:hos
|
|
|
580
581
|
this.setAttribute("inverted", t);
|
|
581
582
|
}
|
|
582
583
|
};
|
|
583
|
-
|
|
584
|
-
let
|
|
585
|
-
customElements.define("px-container",
|
|
584
|
+
g.nativeName = "div";
|
|
585
|
+
let l = g;
|
|
586
|
+
customElements.define("px-container", l);
|
|
586
587
|
export {
|
|
587
|
-
|
|
588
|
+
l as Container
|
|
588
589
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@proximus/lavender-container",
|
|
3
|
-
"version": "1.0.0-alpha.
|
|
3
|
+
"version": "1.0.0-alpha.51",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"exports": {
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
"publishConfig": {
|
|
25
25
|
"access": "public"
|
|
26
26
|
},
|
|
27
|
-
"gitHead": "
|
|
27
|
+
"gitHead": "7683b6952d1da07fe58b0f4ddef292e3954ab85d",
|
|
28
28
|
"lerna": {
|
|
29
29
|
"command": {
|
|
30
30
|
"publish": {
|