@proximus/lavender-container 1.4.1 → 1.4.2-beta.1
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/Container.d.ts +2 -2
- package/dist/index.es.js +49 -50
- package/package.json +1 -1
package/dist/Container.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export declare class Container extends
|
|
1
|
+
import { VerticallyExtendedElement } from '@proximus/lavender-common';
|
|
2
|
+
export declare class Container extends VerticallyExtendedElement<HTMLDivElement> {
|
|
3
3
|
static nativeName: string;
|
|
4
4
|
private template;
|
|
5
5
|
private _bgObserver;
|
package/dist/index.es.js
CHANGED
|
@@ -1,56 +1,55 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { cssTokenBreakpoints as a, paddingValues as d, VerticallyExtendedElement as c, boxShadowValues as h, backgroundSizeValues as k, noBorderRadiusValues as m, borderRadiusValues as f, borderSideValues as v, borderValues as A, gradientValues as y, backgroundColorValues as x, borderColorValues as $, checkName as B } from "@proximus/lavender-common";
|
|
2
2
|
const L = ':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}}', p = new CSSStyleSheet();
|
|
3
3
|
p.replaceSync(L);
|
|
4
|
-
const n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s = "px-padding",
|
|
4
|
+
const n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s = "px-padding", T = [
|
|
5
|
+
a(
|
|
6
|
+
"padding",
|
|
7
|
+
n,
|
|
8
|
+
d,
|
|
9
|
+
s,
|
|
10
|
+
"--container-padding"
|
|
11
|
+
),
|
|
12
|
+
a(
|
|
13
|
+
"padding-inline",
|
|
14
|
+
n,
|
|
15
|
+
d,
|
|
16
|
+
s
|
|
17
|
+
),
|
|
18
|
+
a(
|
|
19
|
+
"padding-block",
|
|
20
|
+
n,
|
|
21
|
+
d,
|
|
22
|
+
s
|
|
23
|
+
),
|
|
24
|
+
a(
|
|
25
|
+
"padding-top",
|
|
26
|
+
n,
|
|
27
|
+
d,
|
|
28
|
+
s
|
|
29
|
+
),
|
|
30
|
+
a(
|
|
31
|
+
"padding-right",
|
|
32
|
+
n,
|
|
33
|
+
d,
|
|
34
|
+
s,
|
|
35
|
+
"--container-padding-right"
|
|
36
|
+
),
|
|
37
|
+
a(
|
|
38
|
+
"padding-bottom",
|
|
39
|
+
n,
|
|
40
|
+
d,
|
|
41
|
+
s
|
|
42
|
+
),
|
|
43
|
+
a(
|
|
44
|
+
"padding-left",
|
|
45
|
+
n,
|
|
46
|
+
d,
|
|
47
|
+
s,
|
|
48
|
+
"--container-padding-left"
|
|
49
|
+
)
|
|
50
|
+
], g = class g extends c {
|
|
5
51
|
constructor() {
|
|
6
|
-
super(
|
|
7
|
-
p,
|
|
8
|
-
a(
|
|
9
|
-
"padding",
|
|
10
|
-
n,
|
|
11
|
-
d,
|
|
12
|
-
s,
|
|
13
|
-
"--container-padding"
|
|
14
|
-
),
|
|
15
|
-
a(
|
|
16
|
-
"padding-inline",
|
|
17
|
-
n,
|
|
18
|
-
d,
|
|
19
|
-
s
|
|
20
|
-
),
|
|
21
|
-
a(
|
|
22
|
-
"padding-block",
|
|
23
|
-
n,
|
|
24
|
-
d,
|
|
25
|
-
s
|
|
26
|
-
),
|
|
27
|
-
a(
|
|
28
|
-
"padding-top",
|
|
29
|
-
n,
|
|
30
|
-
d,
|
|
31
|
-
s
|
|
32
|
-
),
|
|
33
|
-
a(
|
|
34
|
-
"padding-right",
|
|
35
|
-
n,
|
|
36
|
-
d,
|
|
37
|
-
s,
|
|
38
|
-
"--container-padding-right"
|
|
39
|
-
),
|
|
40
|
-
a(
|
|
41
|
-
"padding-bottom",
|
|
42
|
-
n,
|
|
43
|
-
d,
|
|
44
|
-
s
|
|
45
|
-
),
|
|
46
|
-
a(
|
|
47
|
-
"padding-left",
|
|
48
|
-
n,
|
|
49
|
-
d,
|
|
50
|
-
s,
|
|
51
|
-
"--container-padding-left"
|
|
52
|
-
)
|
|
53
|
-
), this.template = () => `<div class="container">
|
|
52
|
+
super(p, ...T), this.template = () => `<div class="container">
|
|
54
53
|
<slot></slot>
|
|
55
54
|
<slot name="anchor-left"></slot>
|
|
56
55
|
<slot name="anchor-right"></slot>
|