@proximus/lavender-container 1.4.2-beta.1 → 1.4.3-alpha.2
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.es.js +43 -31
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { cssTokenBreakpoints as a, paddingValues as d, VerticallyExtendedElement as
|
|
2
|
-
const
|
|
3
|
-
|
|
4
|
-
const n = (
|
|
1
|
+
import { cssTokenBreakpoints as a, paddingValues as d, VerticallyExtendedElement as h, boxShadowValues as k, backgroundSizeValues as m, noBorderRadiusValues as f, borderRadiusValues as v, borderSideValues as A, borderValues as y, gradientValues as x, log as b, backgroundColorValues as $, borderColorValues as L, checkName as B } from "@proximus/lavender-common";
|
|
2
|
+
const C = ':host{display:block}.container{font-family:var(--px-font-family);background-color:var(--background-color);border-radius:var(--px-radius-main);box-sizing:border-box;height:100%}:host([background-image]) .container{background-image:var(--background-image)}:host([background-gradient]) .container{background-image:var(--background-gradient)}:host([inverted]) .container{background-color:var(--background-color-inverted);color:var(--px-color-text-neutral-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:3}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--mobile, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--mobile, 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:2}::slotted(px-vstack:only-of-type),::slotted(px-hstack:only-of-type),::slotted(px-stack:only-of-type),::slotted(px-grid:only-of-type){height:100%}.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 (max-width: 47.938em){.container{background-color:var(--background-color--mobile, var(--background-color))}:host([background-image--mobile]) .container{background-image:var(--background-image--mobile, var(--background-image))}:host([background-gradient--mobile]) .container{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)}}@media only screen and (min-width: 48em) and (max-width: 64em){.container{background-color:var(--background-color--tablet, var(--background-color))}:host([background-image--tablet]) .container{background-image:var(--background-image--tablet, var(--background-image))}:host([background-gradient--tablet]) .container{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-anchor-offset--tablet, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--tablet, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}}@media only screen and (min-width: 64.0625em){.container{background-color:var(--background-color--laptop, var(--background-color))}:host([background-image--laptop]) .container{background-image:var(--background-image--laptop, var(--background-image))}:host([background-gradient--laptop]) .container{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-anchor-offset--laptop, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--laptop, 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}}', u = new CSSStyleSheet();
|
|
3
|
+
u.replaceSync(C);
|
|
4
|
+
const n = (c, t, e) => `:host([${c}${e ? `--${e}` : ""}='${t}']) .container`, s = "px-padding", T = [
|
|
5
5
|
a(
|
|
6
6
|
"padding",
|
|
7
7
|
n,
|
|
@@ -47,9 +47,9 @@ const n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s
|
|
|
47
47
|
s,
|
|
48
48
|
"--container-padding-left"
|
|
49
49
|
)
|
|
50
|
-
],
|
|
50
|
+
], p = class p extends h {
|
|
51
51
|
constructor() {
|
|
52
|
-
super(
|
|
52
|
+
super(u, ...T), this.template = () => `<div class="container">
|
|
53
53
|
<slot></slot>
|
|
54
54
|
<slot name="anchor-left"></slot>
|
|
55
55
|
<slot name="anchor-right"></slot>
|
|
@@ -111,7 +111,7 @@ const n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s
|
|
|
111
111
|
if (e !== r)
|
|
112
112
|
switch (t) {
|
|
113
113
|
case "border":
|
|
114
|
-
this.updateAttribute(t, e, r,
|
|
114
|
+
this.updateAttribute(t, e, r, y);
|
|
115
115
|
break;
|
|
116
116
|
case "border-color":
|
|
117
117
|
this.updateBorderColor(t, r);
|
|
@@ -120,14 +120,14 @@ const n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s
|
|
|
120
120
|
case "border-side--mobile":
|
|
121
121
|
case "border-side--tablet":
|
|
122
122
|
case "border-side--laptop":
|
|
123
|
-
this.updateAttribute(t, e, r,
|
|
123
|
+
this.updateAttribute(t, e, r, A);
|
|
124
124
|
break;
|
|
125
125
|
case "border-radius":
|
|
126
126
|
this.updateAttribute(
|
|
127
127
|
t,
|
|
128
128
|
e,
|
|
129
129
|
r,
|
|
130
|
-
|
|
130
|
+
v
|
|
131
131
|
);
|
|
132
132
|
break;
|
|
133
133
|
case "no-border-radius":
|
|
@@ -138,7 +138,7 @@ const n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s
|
|
|
138
138
|
t,
|
|
139
139
|
e,
|
|
140
140
|
r,
|
|
141
|
-
|
|
141
|
+
f
|
|
142
142
|
);
|
|
143
143
|
break;
|
|
144
144
|
case "background-color":
|
|
@@ -158,7 +158,7 @@ const n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s
|
|
|
158
158
|
t,
|
|
159
159
|
e,
|
|
160
160
|
r,
|
|
161
|
-
|
|
161
|
+
m
|
|
162
162
|
);
|
|
163
163
|
break;
|
|
164
164
|
case "background-image":
|
|
@@ -171,7 +171,7 @@ const n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s
|
|
|
171
171
|
r !== null && r !== "" && (this.$el.style.backgroundPosition = r);
|
|
172
172
|
break;
|
|
173
173
|
case "box-shadow":
|
|
174
|
-
this.updateAttribute(t, e, r,
|
|
174
|
+
this.updateAttribute(t, e, r, k);
|
|
175
175
|
break;
|
|
176
176
|
case "anchor-offset":
|
|
177
177
|
this.updateAnchorOffset(e, r, d);
|
|
@@ -196,7 +196,7 @@ const n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s
|
|
|
196
196
|
this.$el.style.setProperty(`--${t}`, `url("${e}")`);
|
|
197
197
|
}
|
|
198
198
|
updateGradient(t, e) {
|
|
199
|
-
if (this.checkName(
|
|
199
|
+
if (this.checkName(x, e)) {
|
|
200
200
|
const r = this.splitAttrNameFromBreakpoint(t);
|
|
201
201
|
t = r.attrName;
|
|
202
202
|
const i = r.breakpoint;
|
|
@@ -205,11 +205,13 @@ const n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s
|
|
|
205
205
|
`linear-gradient(var(--px-color-background-gradient-${e}))`
|
|
206
206
|
);
|
|
207
207
|
} else
|
|
208
|
-
|
|
208
|
+
b(
|
|
209
|
+
`${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
210
|
+
);
|
|
209
211
|
}
|
|
210
212
|
updateBackgroundColor(t, e) {
|
|
211
213
|
const r = e.startsWith("surface-");
|
|
212
|
-
if (this.checkName(
|
|
214
|
+
if (this.checkName($, e)) {
|
|
213
215
|
const i = this.splitAttrNameFromBreakpoint(t), o = i.breakpoint;
|
|
214
216
|
this.$el.style.setProperty(
|
|
215
217
|
`--${i.attrName}${o}`,
|
|
@@ -219,38 +221,46 @@ const n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s
|
|
|
219
221
|
`var(--px-color-background-${e}${r ? "" : "-inverted"})`
|
|
220
222
|
);
|
|
221
223
|
} else
|
|
222
|
-
|
|
224
|
+
b(
|
|
225
|
+
`${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
226
|
+
);
|
|
223
227
|
}
|
|
224
228
|
updateBorderColor(t, e) {
|
|
225
|
-
this.checkName(
|
|
229
|
+
this.checkName(L, e) ? (this.$el.style.setProperty(
|
|
226
230
|
`--${t}`,
|
|
227
231
|
`var(--px-color-border-${e}-default)`
|
|
228
232
|
), this.$el.style.setProperty(
|
|
229
233
|
`--${t}-inverted`,
|
|
230
234
|
`var(--px-color-border-${e}-inverted)`
|
|
231
|
-
)) :
|
|
235
|
+
)) : b(
|
|
236
|
+
`${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
237
|
+
);
|
|
232
238
|
}
|
|
233
239
|
updateNoBorderRadius(t, e, r, i) {
|
|
234
240
|
if (!this.checkName(i, r))
|
|
235
|
-
|
|
241
|
+
b(
|
|
242
|
+
`${r} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
243
|
+
);
|
|
236
244
|
else {
|
|
237
|
-
const o = this.splitAttrNameFromBreakpoint(t),
|
|
245
|
+
const o = this.splitAttrNameFromBreakpoint(t), l = o.breakpoint;
|
|
238
246
|
e !== null && e !== "" && this.$el.classList.toggle(
|
|
239
|
-
`${o.attrName}-${e}${
|
|
247
|
+
`${o.attrName}-${e}${l}`
|
|
240
248
|
), r !== null && r !== "" && this.$el.classList.toggle(
|
|
241
|
-
`${o.attrName}-${r}${
|
|
249
|
+
`${o.attrName}-${r}${l}`
|
|
242
250
|
);
|
|
243
251
|
}
|
|
244
252
|
}
|
|
245
253
|
updateAttribute(t, e, r, i) {
|
|
246
254
|
if (!this.checkName(i, r))
|
|
247
|
-
|
|
255
|
+
b(
|
|
256
|
+
`${r} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
257
|
+
);
|
|
248
258
|
else {
|
|
249
|
-
const o = this.splitAttrNameFromBreakpoint(t),
|
|
259
|
+
const o = this.splitAttrNameFromBreakpoint(t), l = o.breakpoint;
|
|
250
260
|
e !== null && e !== "" && this.$el.classList.toggle(
|
|
251
|
-
`${o.attrName}-${e}${
|
|
261
|
+
`${o.attrName}-${e}${l}`
|
|
252
262
|
), r !== null && r !== "" && this.$el.classList.toggle(
|
|
253
|
-
`${o.attrName}-${r}${
|
|
263
|
+
`${o.attrName}-${r}${l}`
|
|
254
264
|
);
|
|
255
265
|
}
|
|
256
266
|
}
|
|
@@ -266,7 +276,9 @@ const n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s
|
|
|
266
276
|
}
|
|
267
277
|
updateAnchorOffset(t, e, r) {
|
|
268
278
|
if (!B(r, e)) {
|
|
269
|
-
|
|
279
|
+
b(
|
|
280
|
+
`${e} is not a valid anchor-offset value for ${this.tagName.toLowerCase()}`
|
|
281
|
+
);
|
|
270
282
|
return;
|
|
271
283
|
}
|
|
272
284
|
const i = (o) => {
|
|
@@ -626,9 +638,9 @@ const n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s
|
|
|
626
638
|
this.setAttribute("inverted", t);
|
|
627
639
|
}
|
|
628
640
|
};
|
|
629
|
-
|
|
630
|
-
let
|
|
631
|
-
customElements.get("px-container") || customElements.define("px-container",
|
|
641
|
+
p.nativeName = "div";
|
|
642
|
+
let g = p;
|
|
643
|
+
customElements.get("px-container") || customElements.define("px-container", g);
|
|
632
644
|
export {
|
|
633
|
-
|
|
645
|
+
g as Container
|
|
634
646
|
};
|