@proximus/lavender-common 2.0.0-alpha.1 → 2.0.0-alpha.11

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/common.d.ts +4 -2
  2. package/dist/index.es.js +65 -54
  3. package/package.json +1 -1
package/dist/common.d.ts CHANGED
@@ -9,8 +9,7 @@ export declare class WithExtraAttributes extends HTMLElement {
9
9
  checkName<T extends readonly string[]>(values: T, value: string): boolean;
10
10
  get $el(): Element;
11
11
  get $parentElementName(): string;
12
- get isGrid(): boolean;
13
- get isStack(): boolean;
12
+ get isInsideGridOrStack(): boolean;
14
13
  get grow(): string;
15
14
  set grow(value: string);
16
15
  get growMobile(): string;
@@ -93,11 +92,14 @@ export declare class WithExtraAttributes extends HTMLElement {
93
92
  export declare abstract class PxElement<HTML_TYPE extends Element> extends WithExtraAttributes {
94
93
  static nativeName: string;
95
94
  nativeName: string;
95
+ accessorExclusions: string[];
96
96
  static get observedAttributes(): string[];
97
97
  attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
98
98
  protected constructor(...adoptedStylesheets: CSSStyleSheet[]);
99
99
  connectedCallback(): void;
100
100
  get $el(): HTML_TYPE;
101
+ protected _updateAttribute(name: string, value: string): void;
102
+ protected _updateBooleanAttribute(name: string, value: boolean): void;
101
103
  }
102
104
  export declare const gridGapValues: string[];
103
105
  export declare const flexboxAlignSelfValues: readonly ["", "default", "auto", "flex-start", "flex-end", "center", "baseline", "stretch"];
package/dist/index.es.js CHANGED
@@ -1,4 +1,4 @@
1
- const u = ":host([grow]){flex-grow:var(--grow-value)}:host([shrink]){flex-shrink:var(--shrink-value)}:host([basis]){flex-basis:var(--basis-value)}:host([align-self]){align-self:var(--align-self-value)}:host([col-span]){grid-column:span var(--col-span-value) / span var(--col-span-value)}:host([justify-self]){justify-self:var(--justify-value)}:host([order]),::slotted([order]){order:var(--order-value)}:host([hidden]),::slotted([hidden]){display:none}:host([shown--sr]),::slotted(*[shown--sr]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}@media screen and (max-width: 767px){:host([hidden--mobile]),::slotted([hidden--mobile]){display:none}:host([grow--mobile]){flex-grow:var(--grow--mobile-value)!important}:host([shrink--mobile]){flex-shrink:var(--shrink--mobile-value)!important}:host([basis--mobile]){flex-basis:var(--basis--mobile-value)!important}:host([align-self--mobile]){align-self:var(--align-self--mobile-value)!important}:host([col-span--mobile]){grid-column:span var(--col-span--mobile-value) / span var(--col-span--mobile-value)!important}:host([justify-self--mobile]){justify-self:var(--justify-self--mobile-value)!important}:host([order--mobile]),::slotted([order--mobile]){order:var(--order--mobile-value)!important}:host([shown--sr--mobile]),::slotted(*[shown--sr--mobile]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 768px) and (max-width: 1024px){:host([hidden--tablet]),::slotted([hidden--tablet]){display:none}:host([grow--tablet]){flex-grow:var(--grow--tablet-value)!important}:host([shrink--tablet]){flex-shrink:var(--shrink--tablet-value)!important}:host([basis--tablet]){flex-basis:var(--basis--tablet-value)!important}:host([align-self--tablet]){align-self:var(--align-self--tablet-value)!important}:host([col-span--tablet]){grid-column:span var(--col-span--tablet-value) / span var(--col-span--tablet-value)!important}:host([justify-self--tablet]){justify-self:var(--justify-self--tablet-value)!important}:host([order--tablet]),::slotted([order--tablet]){order:var(--order--tablet-value)!important}:host([shown--sr--tablet]),::slotted(*[shown--sr--tablet]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 1025px){:host([shown--sr--laptop]),::slotted(*[shown--sr--laptop]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 1025px) and (max-width: 1440px){:host([hidden--laptop]),::slotted([hidden--laptop]){display:none!important}:host([grow--laptop]){flex-grow:var(--grow--laptop-value)!important}:host([shrink--laptop]){flex-shrink:var(--shrink--laptop-value)!important}:host([basis--laptop]){flex-basis:var(--basis--laptop-value)!important}:host([align-self--laptop]){align-self:var(--align-self--laptop-value)!important}:host([col-span--laptop]){grid-column:span var(--col-span--laptop-value) / span var(--col-span--laptop-value)!important}:host([justify-self--laptop]){justify-self:var(--justify-self--laptop-value)!important}:host([order--laptop]),::slotted([order--laptop]){order:var(--order--laptop-value)!important}}@media screen and (min-width: 1441px){:host([col-span--desktop]){grid-column:span var(--col-span--desktop-value) / span var(--col-span--desktop-value)!important}:host([justify-self--desktop]){justify-self:var(--justify-self--desktop-value)!important}:host([order--desktop]),::slotted([order--desktop]){order:var(--order--desktop-value)!important}:host([hidden--desktop]),::slotted([hidden--desktop]){display:none!important}:host([grow--desktop]){flex-grow:var(--grow--desktop-value)!important}:host([shrink--desktop]){flex-shrink:var(--shrink--desktop-value)!important}:host([basis--desktop]){flex-basis:var(--basis--desktop-value)!important}:host([align-self--desktop]){align-self:var(--align-self--desktop-value)!important}}";
1
+ const u = ":host([grow]){flex-grow:var(--grow-value)}:host([shrink]){flex-shrink:var(--shrink-value)}:host([basis]){flex-basis:var(--basis-value)}:host([align-self]){align-self:var(--align-self-value)}:host([col-span]){grid-column:span var(--col-span-value) / span var(--col-span-value)}:host([justify-self]){justify-self:var(--justify-value)}:host([order]),::slotted([order]){order:var(--order-value)}:host([hidden]),::slotted([hidden]){display:none}:host([shown--sr]),::slotted(*[shown--sr]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}@media screen and (max-width: 767px){:host([hidden--mobile]),::slotted([hidden--mobile]){display:none}:host([grow--mobile]){flex-grow:var(--grow--mobile-value)!important}:host([shrink--mobile]){flex-shrink:var(--shrink--mobile-value)!important}:host([basis--mobile]){flex-basis:var(--basis--mobile-value)!important}:host([align-self--mobile]){align-self:var(--align-self--mobile-value)!important}:host([col-span--mobile]){grid-column:span var(--col-span--mobile-value) / span var(--col-span--mobile-value)!important}:host([justify-self--mobile]){justify-self:var(--justify-self--mobile-value)!important}:host([order--mobile]),::slotted([order--mobile]){order:var(--order--mobile-value)!important}:host([shown--sr--mobile]),::slotted(*[shown--sr--mobile]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 768px) and (max-width: 1024px){:host([hidden--tablet]),::slotted([hidden--tablet]){display:none}:host([grow--tablet]){flex-grow:var(--grow--tablet-value)!important}:host([shrink--tablet]){flex-shrink:var(--shrink--tablet-value)!important}:host([basis--tablet]){flex-basis:var(--basis--tablet-value)!important}:host([align-self--tablet]){align-self:var(--align-self--tablet-value)!important}:host([col-span--tablet]){grid-column:span var(--col-span--tablet-value) / span var(--col-span--tablet-value)!important}:host([justify-self--tablet]){justify-self:var(--justify-self--tablet-value)!important}:host([order--tablet]),::slotted([order--tablet]){order:var(--order--tablet-value)!important}:host([shown--sr--tablet]),::slotted(*[shown--sr--tablet]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 1025px){:host([shown--sr--laptop]),::slotted(*[shown--sr--laptop]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 1025px){:host([hidden--laptop]),::slotted([hidden--laptop]){display:none!important}:host([grow--laptop]){flex-grow:var(--grow--laptop-value)!important}:host([shrink--laptop]){flex-shrink:var(--shrink--laptop-value)!important}:host([basis--laptop]){flex-basis:var(--basis--laptop-value)!important}:host([align-self--laptop]){align-self:var(--align-self--laptop-value)!important}:host([col-span--laptop]){grid-column:span var(--col-span--laptop-value) / span var(--col-span--laptop-value)!important}:host([justify-self--laptop]){justify-self:var(--justify-self--laptop-value)!important}:host([order--laptop]),::slotted([order--laptop]){order:var(--order--laptop-value)!important}}@media screen and (min-width: 1441px){:host([col-span--desktop]){grid-column:span var(--col-span--desktop-value) / span var(--col-span--desktop-value)!important}:host([justify-self--desktop]){justify-self:var(--justify-self--desktop-value)!important}:host([order--desktop]),::slotted([order--desktop]){order:var(--order--desktop-value)!important}:host([hidden--desktop]),::slotted([hidden--desktop]){display:none!important}:host([grow--desktop]){flex-grow:var(--grow--desktop-value)!important}:host([shrink--desktop]){flex-shrink:var(--shrink--desktop-value)!important}:host([basis--desktop]){flex-basis:var(--basis--desktop-value)!important}:host([align-self--desktop]){align-self:var(--align-self--desktop-value)!important}}";
2
2
  function b(i) {
3
3
  const t = document.createElement(i), s = Object.getPrototypeOf(t);
4
4
  return Object.getOwnPropertyNames(s);
@@ -68,6 +68,7 @@ class p extends HTMLElement {
68
68
  ];
69
69
  }
70
70
  attributeChangedCallback(t, s, e) {
71
+ var o;
71
72
  if (p.observedAttributes.indexOf(t) !== -1)
72
73
  switch (t) {
73
74
  case "grow":
@@ -96,7 +97,7 @@ class p extends HTMLElement {
96
97
  t,
97
98
  s,
98
99
  e,
99
- this.isGrid ? g : c
100
+ ((o = this.parentElement) == null ? void 0 : o.localName) === "px-grid" ? g : c
100
101
  );
101
102
  break;
102
103
  case "justify-self":
@@ -168,11 +169,18 @@ class p extends HTMLElement {
168
169
  var t;
169
170
  return (t = this.parentElement) == null ? void 0 : t.tagName.toLowerCase();
170
171
  }
171
- get isGrid() {
172
- return this.$parentElementName === "px-grid";
173
- }
174
- get isStack() {
175
- return this.$parentElementName === "px-stack";
172
+ get isInsideGridOrStack() {
173
+ let t = this.parentElement;
174
+ for (; t; ) {
175
+ if (t.localName === "px-grid" || t.localName === "px-stack" && (t == null ? void 0 : t.getAttribute("direction")) === "row")
176
+ return !0;
177
+ if (window.getComputedStyle(t).display === "contents") {
178
+ t = t.parentElement;
179
+ continue;
180
+ }
181
+ break;
182
+ }
183
+ return !1;
176
184
  }
177
185
  get grow() {
178
186
  return this.getAttribute("grow");
@@ -409,7 +417,10 @@ class p extends HTMLElement {
409
417
  this.setAttribute("order--desktop", t);
410
418
  }
411
419
  }
412
- class w extends p {
420
+ class y extends p {
421
+ constructor(...t) {
422
+ super(...t), this.accessorExclusions = [], this.nativeName = Object.getPrototypeOf(this).constructor.nativeName, this.accessorExclusions = Object.getPrototypeOf(this).constructor.accessorExclusions || [];
423
+ }
413
424
  static get observedAttributes() {
414
425
  return [
415
426
  ...super.observedAttributes,
@@ -419,35 +430,34 @@ class w extends p {
419
430
  attributeChangedCallback(t, s, e) {
420
431
  super.attributeChangedCallback(t, s, e), e === null ? this.$el.toggleAttribute(t) : this.$el.setAttribute(t, e);
421
432
  }
422
- constructor(...t) {
423
- super(...t), this.nativeName = Object.getPrototypeOf(this).constructor.nativeName;
424
- }
425
433
  connectedCallback() {
426
- var t;
427
- for (const s of b(this.nativeName))
428
- if (s !== "constructor")
434
+ for (const t of b(this.nativeName))
435
+ if (!(t === "constructor" || this.accessorExclusions.includes(t)))
429
436
  try {
430
- Object.defineProperty(this, s, {
437
+ Object.defineProperty(this, t, {
431
438
  get() {
432
- return this.$el[s];
439
+ return this.$el[t];
433
440
  },
434
- set(e) {
435
- this.$el[s] !== e && (this.$el[s] = e);
441
+ set(s) {
442
+ this.$el[t] !== s && (this.$el[t] = s);
436
443
  }
437
444
  });
438
- } catch (e) {
439
- console.warn(`Could not create property ${s} for`, this.$el, e);
445
+ } catch (s) {
446
+ console.warn(`Could not create property ${t} for`, this.$el, s);
440
447
  }
441
- if (this.isGrid || this.isStack) {
442
- const s = (t = this.parentElement) == null ? void 0 : t.getAttribute("direction");
443
- this.$el.style.display = "block", (this.isGrid || this.isStack && s === "row") && (this.$el.style.height = "100%");
444
- }
448
+ this.isInsideGridOrStack && (this.$el.style.display = "block", this.$el.style.height = "100%");
445
449
  }
446
450
  get $el() {
447
451
  return this.shadowRoot.querySelector(this.nativeName);
448
452
  }
453
+ _updateAttribute(t, s) {
454
+ s ? this.setAttribute(t, s) : this.removeAttribute(t);
455
+ }
456
+ _updateBooleanAttribute(t, s) {
457
+ s ? this.setAttribute(t, "") : this.removeAttribute(t);
458
+ }
449
459
  }
450
- const y = ["", "default", "none", "l"], c = [
460
+ const w = ["", "default", "none", "l"], c = [
451
461
  "",
452
462
  "default",
453
463
  "auto",
@@ -561,7 +571,7 @@ const y = ["", "default", "none", "l"], c = [
561
571
  "m",
562
572
  "l",
563
573
  "xl"
564
- ], M = ["", "none", "s", "m", "l"], T = ["", "none", "main", "pill"], D = [
574
+ ], M = ["", "none", "s", "m", "l"], T = ["", "none", "main", "pill"], N = [
565
575
  "none",
566
576
  "main",
567
577
  "brand",
@@ -572,7 +582,7 @@ const y = ["", "default", "none", "l"], c = [
572
582
  "purpose-warning",
573
583
  "purpose-error",
574
584
  "purpose-unlimited"
575
- ], N = [
585
+ ], D = [
576
586
  "",
577
587
  "all",
578
588
  "top",
@@ -607,8 +617,9 @@ const y = ["", "default", "none", "l"], c = [
607
617
  "purpose-promo",
608
618
  "purpose-info",
609
619
  "purpose-eco",
610
- "purpose-notification"
611
- ], G = ["", "cover", "contain", "default"], q = ["", "none", "s", "m", "l", "xl"], P = [
620
+ "purpose-notification",
621
+ "footer"
622
+ ], q = ["", "cover", "contain", "default"], E = ["", "none", "s", "m", "l", "xl"], G = [
612
623
  "",
613
624
  "default",
614
625
  "title-4xl",
@@ -619,7 +630,7 @@ const y = ["", "default", "none", "l"], c = [
619
630
  "title-m",
620
631
  "title-s",
621
632
  "subtitle"
622
- ], E = [
633
+ ], P = [
623
634
  "",
624
635
  "purple-top-red",
625
636
  "purple-top-magenta",
@@ -669,7 +680,7 @@ const y = ["", "default", "none", "l"], c = [
669
680
  "color-bottom-right-blue",
670
681
  "color-bottom-right-turquoise",
671
682
  "color-bottom-right-green"
672
- ], R = [
683
+ ], _ = [
673
684
  "none",
674
685
  "2xs",
675
686
  "xs",
@@ -679,14 +690,14 @@ const y = ["", "default", "none", "l"], c = [
679
690
  "heading-to-subtitle",
680
691
  "heading-to-content",
681
692
  "page-layout-between-sections"
682
- ], V = [
693
+ ], B = [
683
694
  "",
684
695
  "all",
685
696
  "top",
686
697
  "right",
687
698
  "bottom",
688
699
  "left"
689
- ], z = [
700
+ ], R = [
690
701
  "",
691
702
  "default",
692
703
  "xs",
@@ -695,20 +706,20 @@ const y = ["", "default", "none", "l"], c = [
695
706
  "l",
696
707
  "xl"
697
708
  ];
698
- function B(i) {
709
+ function V(i) {
699
710
  const t = document.createElement("style");
700
711
  t.innerHTML = i, document.head.appendChild(t);
701
712
  }
702
- function _(i) {
713
+ function z(i) {
703
714
  return typeof i == "string" && (i === "false" || i === "0" || i === "null") || typeof i == "boolean" && !i;
704
715
  }
705
716
  function H() {
706
717
  return window.matchMedia("only screen and (min-width: 768px)").matches ? "tablet" : window.matchMedia("only screen and (min-width: 1025px)").matches ? "laptop" : "mobile";
707
718
  }
708
- function F(i, t) {
719
+ function I(i, t) {
709
720
  return i.includes(t);
710
721
  }
711
- function X(i, t, s = !0) {
722
+ function F(i, t, s = !0) {
712
723
  var e;
713
724
  if ([
714
725
  "aria-label",
@@ -751,7 +762,7 @@ function X(i, t, s = !0) {
751
762
  t.setAttribute("id", o), i.setAttribute("aria-labelledby", o);
752
763
  }
753
764
  }
754
- function I(i, t, s, e = "", o) {
765
+ function X(i, t, s, e = "", o) {
755
766
  const a = new CSSStyleSheet(), l = s.reduce(
756
767
  (n, r) => n + `
757
768
  ${t(i, r)} {
@@ -879,40 +890,40 @@ class J {
879
890
  }
880
891
  export {
881
892
  J as AttributeBreakpointHandlerDelegate,
882
- w as PxElement,
893
+ y as PxElement,
883
894
  p as WithExtraAttributes,
884
- B as addGlobalStylesheet,
885
- z as assetContainerImgWidthValues,
895
+ V as addGlobalStylesheet,
896
+ R as assetContainerImgWidthValues,
886
897
  O as backgroundColorValues,
887
- G as backgroundSizeValues,
888
- D as borderColorValues,
898
+ q as backgroundSizeValues,
899
+ N as borderColorValues,
889
900
  T as borderRadiusValues,
890
- N as borderSideValues,
901
+ D as borderSideValues,
891
902
  M as borderValues,
892
- q as boxShadowValues,
893
- F as checkName,
903
+ E as boxShadowValues,
904
+ I as checkName,
894
905
  $ as colorValues,
895
906
  g as cssGridAlignSelfValues,
896
907
  m as cssGridColSpanValues,
897
908
  f as cssGridJustifySelfValues,
898
909
  k as cssGridOrderValues,
899
910
  A as cssGridPlaceSelfValues,
900
- I as cssTokenBreakpoints,
911
+ X as cssTokenBreakpoints,
901
912
  c as flexboxAlignSelfValues,
902
913
  S as fontsizeValues,
903
914
  x as fontweightValues,
904
- R as gapValues,
915
+ _ as gapValues,
905
916
  d as getSupportedAttributeNames,
906
917
  b as getSupportedPropertyNames,
907
918
  H as getViewportFormat,
908
- E as gradientValues,
909
- y as gridGapValues,
910
- P as headingValues,
919
+ P as gradientValues,
920
+ w as gridGapValues,
921
+ G as headingValues,
911
922
  v as iconSizeValues,
912
923
  j as iconSizeValuesKC,
913
- _ as isFalsy,
914
- V as noBorderRadiusValues,
924
+ z as isFalsy,
925
+ B as noBorderRadiusValues,
915
926
  L as paddingValues,
916
927
  C as textalignValues,
917
- X as transferAccessibilityAttributes
928
+ F as transferAccessibilityAttributes
918
929
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-common",
3
- "version": "2.0.0-alpha.1",
3
+ "version": "2.0.0-alpha.11",
4
4
  "description": "",
5
5
  "main": "dist/index.es.js",
6
6
  "types": "dist/index.d.ts",