@proximus/lavender-list 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 (2) hide show
  1. package/dist/index.es.js +48 -38
  2. package/package.json +1 -1
package/dist/index.es.js CHANGED
@@ -1,4 +1,4 @@
1
- const k = ".list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}", v = ":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 k = ".list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}", v = ":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 A(r) {
3
3
  const t = document.createElement(r), s = Object.getPrototypeOf(t);
4
4
  return Object.getOwnPropertyNames(s);
@@ -9,8 +9,8 @@ function y(r) {
9
9
  (e) => e.toLowerCase()
10
10
  );
11
11
  }
12
- const g = new CSSStyleSheet();
13
- g.replaceSync(v);
12
+ const c = new CSSStyleSheet();
13
+ c.replaceSync(v);
14
14
  class b extends HTMLElement {
15
15
  static get observedAttributes() {
16
16
  return [
@@ -63,11 +63,12 @@ class b extends HTMLElement {
63
63
  }
64
64
  constructor(...t) {
65
65
  super(), this.shadowRoot || this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [
66
- g,
66
+ c,
67
67
  ...t
68
68
  ];
69
69
  }
70
70
  attributeChangedCallback(t, s, e) {
71
+ var i;
71
72
  if (b.observedAttributes.indexOf(t) !== -1)
72
73
  switch (t) {
73
74
  case "grow":
@@ -96,7 +97,7 @@ class b extends HTMLElement {
96
97
  t,
97
98
  s,
98
99
  e,
99
- this.isGrid ? $ : S
100
+ ((i = this.parentElement) == null ? void 0 : i.localName) === "px-grid" ? w : S
100
101
  );
101
102
  break;
102
103
  case "justify-self":
@@ -108,7 +109,7 @@ class b extends HTMLElement {
108
109
  t,
109
110
  s,
110
111
  e,
111
- w
112
+ $
112
113
  );
113
114
  break;
114
115
  case "col-span":
@@ -168,11 +169,18 @@ class b 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 b extends HTMLElement {
409
417
  this.setAttribute("order--desktop", t);
410
418
  }
411
419
  }
412
- class c extends b {
420
+ class g extends b {
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,33 +430,32 @@ class c extends b {
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 A(this.nativeName))
428
- if (s !== "constructor")
434
+ for (const t of A(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
460
  const S = [
451
461
  "",
@@ -456,14 +466,14 @@ const S = [
456
466
  "center",
457
467
  "baseline",
458
468
  "stretch"
459
- ], $ = [
469
+ ], w = [
460
470
  "",
461
471
  "default",
462
472
  "start",
463
473
  "end",
464
474
  "center",
465
475
  "stretch"
466
- ], w = [
476
+ ], $ = [
467
477
  "",
468
478
  "default",
469
479
  "start",
@@ -504,7 +514,7 @@ const S = [
504
514
  [
505
515
  ...C.map((r) => r.toLowerCase())
506
516
  ];
507
- const M = [
517
+ const N = [
508
518
  "none",
509
519
  "2xs",
510
520
  "xs",
@@ -515,7 +525,7 @@ const M = [
515
525
  "heading-to-content",
516
526
  "page-layout-between-sections"
517
527
  ];
518
- function N(r, t, s, e = "", i) {
528
+ function M(r, t, s, e = "", i) {
519
529
  const a = new CSSStyleSheet(), l = s.reduce(
520
530
  (n, o) => n + `
521
531
  ${t(r, o)} {
@@ -643,15 +653,15 @@ class T {
643
653
  }
644
654
  const m = new CSSStyleSheet();
645
655
  m.replaceSync(k);
646
- const E = ["", "mobile", "tablet", "laptop"], D = (r, t, s) => `:host([${r}${s ? `--${s}` : ""}='${t}']) .list`, L = "px-spacing", d = class d extends c {
656
+ const E = ["", "mobile", "tablet", "laptop"], L = (r, t, s) => `:host([${r}${s ? `--${s}` : ""}='${t}']) .list`, D = "px-spacing", d = class d extends g {
647
657
  constructor() {
648
658
  super(
649
659
  m,
650
- N(
660
+ M(
651
661
  "gap",
652
- D,
653
- M,
654
662
  L,
663
+ N,
664
+ D,
655
665
  "--list-gap"
656
666
  )
657
667
  ), this.AttributeDelegate = new T(
@@ -727,9 +737,9 @@ const E = ["", "mobile", "tablet", "laptop"], D = (r, t, s) => `:host([${r}${s ?
727
737
  d.nativeName = "div";
728
738
  let p = d;
729
739
  customElements.get("px-list") || customElements.define("px-list", p);
730
- const O = '.list-item{display:flex;gap:var(--px-spacing-xs-mobile);font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l)}::slotted([slot="label"][inverted]){color:var(--px-color-text-neutral-inverted)}@media only screen and (min-width: 48em){.list-item{gap:var(--px-spacing-xs-tablet)}}@media only screen and (min-width: 64.0625em){.list-item{gap:var(--px-spacing-xs-laptop)}}@media only screen and (min-width: 90.0625em){.list-item{gap:var(--px-spacing-xs-desktop)}}', f = new CSSStyleSheet();
740
+ const O = '.list-item{display:flex;gap:var(--px-spacing-xs-mobile);align-items:flex-start;font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l)}::slotted([slot="label"][inverted]){color:var(--px-color-text-neutral-inverted)}@media only screen and (min-width: 48em){.list-item{gap:var(--px-spacing-xs-tablet)}}@media only screen and (min-width: 64.0625em){.list-item{gap:var(--px-spacing-xs-laptop)}}@media only screen and (min-width: 90.0625em){.list-item{gap:var(--px-spacing-xs-desktop)}}', f = new CSSStyleSheet();
731
741
  f.replaceSync(O);
732
- const u = class u extends c {
742
+ const u = class u extends g {
733
743
  template() {
734
744
  return `
735
745
  <div class="list-item" role="listitem">
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-list",
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",