@proximus/lavender-container 2.0.0-alpha.3 → 2.0.0-alpha.31

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.
Files changed (3) hide show
  1. package/dist/Container.d.ts +5 -5
  2. package/dist/index.es.js +105 -84
  3. package/package.json +2 -2
package/dist/Container.d.ts CHANGED
@@ -1,11 +1,10 @@
1
- import { PxElement } from '@proximus/lavender-common';
2
- declare const anchorValues: readonly ["anchor-right", "anchor-left", "anchor-full"];
3
- export type AnchorValue = (typeof anchorValues)[number];
4
- export declare class Container extends PxElement<HTMLDivElement> {
1
+ import { VerticallyExtendedElement } from '@proximus/lavender-common';
2
+ export declare class Container extends VerticallyExtendedElement<HTMLDivElement> {
5
3
  static nativeName: string;
6
4
  private template;
7
5
  private _bgObserver;
8
6
  private _isInViewport;
7
+ private contentObserver;
9
8
  constructor();
10
9
  static get observedAttributes(): string[];
11
10
  connectedCallback(): void;
@@ -23,6 +22,8 @@ export declare class Container extends PxElement<HTMLDivElement> {
23
22
  breakpoint: string;
24
23
  };
25
24
  updateAnchorOffset(oldValue: string, newValue: string, attrValue: string[]): void;
25
+ addAnchorClass(): void;
26
+ get $slotAnchor(): HTMLSlotElement;
26
27
  get padding(): string;
27
28
  set padding(value: string);
28
29
  get paddingBlock(): string;
@@ -136,4 +137,3 @@ export declare class Container extends PxElement<HTMLDivElement> {
136
137
  get inverted(): string;
137
138
  set inverted(value: string);
138
139
  }
139
- export {};
package/dist/index.es.js CHANGED
@@ -1,56 +1,55 @@
1
- import { PxElement as c, cssTokenBreakpoints as a, paddingValues as d, 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
- const L = ':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);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));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)}}@media only screen and (min-width: 48em) and (max-width: 64em){.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-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));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-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
- p.replaceSync(L);
4
- const T = ["anchor-right", "anchor-left", "anchor-full"], n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s = "px-padding", g = class g extends c {
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
+ 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
+ ], p = class p extends h {
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(u, ...T), this.template = () => `<div class="container">
54
53
  <slot></slot>
55
54
  <slot name="anchor-left"></slot>
56
55
  <slot name="anchor-right"></slot>
@@ -91,24 +90,28 @@ const T = ["anchor-right", "anchor-left", "anchor-full"], n = (u, t, e) => `:hos
91
90
  ];
92
91
  }
93
92
  connectedCallback() {
94
- super.connectedCallback(), this.padding || (this.padding = "m"), this.backgroundColor || (this.backgroundColor = "surface-light"), this.borderColor || (this.borderColor = "main"), this.backgroundImage || this.$el.style.removeProperty("--background-image"), this.backgroundImageMobile || this.$el.style.removeProperty("--background-image--mobile"), this.backgroundImageTablet || this.$el.style.removeProperty("--background-image--tablet"), this.backgroundImageLaptop || this.$el.style.removeProperty("--background-image--laptop");
95
- const t = this.querySelector("[slot]");
96
- t && T.includes(t.getAttribute("slot")) && this.shadowRoot.querySelector(".container").classList.toggle("anchored"), this._bgObserver = new IntersectionObserver((e) => {
97
- e.forEach((r) => {
98
- var i;
99
- r.isIntersecting && (this._isInViewport = !0, this._loadBackgroundImages(), (i = this._bgObserver) == null || i.disconnect());
93
+ super.connectedCallback(), this.padding || (this.padding = "m"), this.backgroundColor || (this.backgroundColor = "surface-light"), this.borderColor || (this.borderColor = "main"), this.$slotAnchor && this.addAnchorClass(), this.contentObserver = new MutationObserver(() => {
94
+ this.$slotAnchor && this.addAnchorClass();
95
+ }), this.contentObserver.observe(this, {
96
+ childList: !0,
97
+ subtree: !0,
98
+ characterData: !0
99
+ }), this._bgObserver = new IntersectionObserver((t) => {
100
+ t.forEach((e) => {
101
+ var r;
102
+ e.isIntersecting && (this._isInViewport = !0, this._loadBackgroundImages(), (r = this._bgObserver) == null || r.disconnect());
100
103
  });
101
104
  }), this._bgObserver.observe(this.$el);
102
105
  }
103
106
  disconnectedCallback() {
104
107
  var t;
105
- (t = this._bgObserver) == null || t.disconnect();
108
+ (t = this._bgObserver) == null || t.disconnect(), this.contentObserver.disconnect();
106
109
  }
107
110
  attributeChangedCallback(t, e, r) {
108
111
  if (e !== r)
109
112
  switch (t) {
110
113
  case "border":
111
- this.updateAttribute(t, e, r, A);
114
+ this.updateAttribute(t, e, r, y);
112
115
  break;
113
116
  case "border-color":
114
117
  this.updateBorderColor(t, r);
@@ -117,14 +120,14 @@ const T = ["anchor-right", "anchor-left", "anchor-full"], n = (u, t, e) => `:hos
117
120
  case "border-side--mobile":
118
121
  case "border-side--tablet":
119
122
  case "border-side--laptop":
120
- this.updateAttribute(t, e, r, v);
123
+ this.updateAttribute(t, e, r, A);
121
124
  break;
122
125
  case "border-radius":
123
126
  this.updateAttribute(
124
127
  t,
125
128
  e,
126
129
  r,
127
- f
130
+ v
128
131
  );
129
132
  break;
130
133
  case "no-border-radius":
@@ -135,7 +138,7 @@ const T = ["anchor-right", "anchor-left", "anchor-full"], n = (u, t, e) => `:hos
135
138
  t,
136
139
  e,
137
140
  r,
138
- m
141
+ f
139
142
  );
140
143
  break;
141
144
  case "background-color":
@@ -155,7 +158,7 @@ const T = ["anchor-right", "anchor-left", "anchor-full"], n = (u, t, e) => `:hos
155
158
  t,
156
159
  e,
157
160
  r,
158
- k
161
+ m
159
162
  );
160
163
  break;
161
164
  case "background-image":
@@ -168,7 +171,7 @@ const T = ["anchor-right", "anchor-left", "anchor-full"], n = (u, t, e) => `:hos
168
171
  r !== null && r !== "" && (this.$el.style.backgroundPosition = r);
169
172
  break;
170
173
  case "box-shadow":
171
- this.updateAttribute(t, e, r, h);
174
+ this.updateAttribute(t, e, r, k);
172
175
  break;
173
176
  case "anchor-offset":
174
177
  this.updateAnchorOffset(e, r, d);
@@ -193,7 +196,7 @@ const T = ["anchor-right", "anchor-left", "anchor-full"], n = (u, t, e) => `:hos
193
196
  this.$el.style.setProperty(`--${t}`, `url("${e}")`);
194
197
  }
195
198
  updateGradient(t, e) {
196
- if (this.checkName(y, e)) {
199
+ if (this.checkName(x, e)) {
197
200
  const r = this.splitAttrNameFromBreakpoint(t);
198
201
  t = r.attrName;
199
202
  const i = r.breakpoint;
@@ -202,11 +205,13 @@ const T = ["anchor-right", "anchor-left", "anchor-full"], n = (u, t, e) => `:hos
202
205
  `linear-gradient(var(--px-color-background-gradient-${e}))`
203
206
  );
204
207
  } else
205
- console.error(`${e} is not an allowed background-gradient value`);
208
+ b(
209
+ `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
210
+ );
206
211
  }
207
212
  updateBackgroundColor(t, e) {
208
213
  const r = e.startsWith("surface-");
209
- if (this.checkName(x, e)) {
214
+ if (this.checkName($, e)) {
210
215
  const i = this.splitAttrNameFromBreakpoint(t), o = i.breakpoint;
211
216
  this.$el.style.setProperty(
212
217
  `--${i.attrName}${o}`,
@@ -216,38 +221,46 @@ const T = ["anchor-right", "anchor-left", "anchor-full"], n = (u, t, e) => `:hos
216
221
  `var(--px-color-background-${e}${r ? "" : "-inverted"})`
217
222
  );
218
223
  } else
219
- console.error(`${e} is not an allowed ${t} value`);
224
+ b(
225
+ `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
226
+ );
220
227
  }
221
228
  updateBorderColor(t, e) {
222
- this.checkName($, e) ? (this.$el.style.setProperty(
229
+ this.checkName(L, e) ? (this.$el.style.setProperty(
223
230
  `--${t}`,
224
231
  `var(--px-color-border-${e}-default)`
225
232
  ), this.$el.style.setProperty(
226
233
  `--${t}-inverted`,
227
234
  `var(--px-color-border-${e}-inverted)`
228
- )) : console.error(`${e} is not an allowed ${t} value`);
235
+ )) : b(
236
+ `${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
237
+ );
229
238
  }
230
239
  updateNoBorderRadius(t, e, r, i) {
231
240
  if (!this.checkName(i, r))
232
- console.error(`${r} is not an allowed ${t} value`);
241
+ b(
242
+ `${r} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
243
+ );
233
244
  else {
234
- const o = this.splitAttrNameFromBreakpoint(t), b = o.breakpoint;
245
+ const o = this.splitAttrNameFromBreakpoint(t), l = o.breakpoint;
235
246
  e !== null && e !== "" && this.$el.classList.toggle(
236
- `${o.attrName}-${e}${b}`
247
+ `${o.attrName}-${e}${l}`
237
248
  ), r !== null && r !== "" && this.$el.classList.toggle(
238
- `${o.attrName}-${r}${b}`
249
+ `${o.attrName}-${r}${l}`
239
250
  );
240
251
  }
241
252
  }
242
253
  updateAttribute(t, e, r, i) {
243
254
  if (!this.checkName(i, r))
244
- console.error(`${r} is not an allowed ${t} value`);
255
+ b(
256
+ `${r} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
257
+ );
245
258
  else {
246
- const o = this.splitAttrNameFromBreakpoint(t), b = o.breakpoint;
259
+ const o = this.splitAttrNameFromBreakpoint(t), l = o.breakpoint;
247
260
  e !== null && e !== "" && this.$el.classList.toggle(
248
- `${o.attrName}-${e}${b}`
261
+ `${o.attrName}-${e}${l}`
249
262
  ), r !== null && r !== "" && this.$el.classList.toggle(
250
- `${o.attrName}-${r}${b}`
263
+ `${o.attrName}-${r}${l}`
251
264
  );
252
265
  }
253
266
  }
@@ -263,7 +276,9 @@ const T = ["anchor-right", "anchor-left", "anchor-full"], n = (u, t, e) => `:hos
263
276
  }
264
277
  updateAnchorOffset(t, e, r) {
265
278
  if (!B(r, e)) {
266
- console.error(`${e} is not a valid anchor-offset value`);
279
+ b(
280
+ `${e} is not a valid anchor-offset value for ${this.tagName.toLowerCase()}`
281
+ );
267
282
  return;
268
283
  }
269
284
  const i = (o) => {
@@ -280,6 +295,12 @@ const T = ["anchor-right", "anchor-left", "anchor-full"], n = (u, t, e) => `:hos
280
295
  };
281
296
  i(t), i(e);
282
297
  }
298
+ addAnchorClass() {
299
+ this.$el.classList.contains("anchored") || this.$el.classList.add("anchored");
300
+ }
301
+ get $slotAnchor() {
302
+ return this.querySelector('[slot^="anchor"]');
303
+ }
283
304
  get padding() {
284
305
  return this.getAttribute("padding");
285
306
  }
@@ -617,9 +638,9 @@ const T = ["anchor-right", "anchor-left", "anchor-full"], n = (u, t, e) => `:hos
617
638
  this.setAttribute("inverted", t);
618
639
  }
619
640
  };
620
- g.nativeName = "div";
621
- let l = g;
622
- customElements.get("px-container") || customElements.define("px-container", l);
641
+ p.nativeName = "div";
642
+ let g = p;
643
+ customElements.get("px-container") || customElements.define("px-container", g);
623
644
  export {
624
- l as Container
645
+ g as Container
625
646
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-container",
3
- "version": "2.0.0-alpha.3",
3
+ "version": "2.0.0-alpha.31",
4
4
  "description": "",
5
5
  "files": [
6
6
  "dist"
@@ -11,7 +11,7 @@
11
11
  "clean": "rm -rf dist",
12
12
  "build": "npm run clean && NODE_ENV=development vite build && tsc && npm run transform-package-json && npm run wc-manifest",
13
13
  "test": "vitest run --coverage",
14
- "wc-manifest": "cem analyze --globs \"src/*\" --config ../custom-elements-manifest.config.js --outdir dist"
14
+ "wc-manifest": "cem analyze --globs \"src/*\" --config ../../custom-elements-manifest.config.js --outdir dist"
15
15
  },
16
16
  "publishConfig": {
17
17
  "access": "public"