@proximus/lavender-common 1.0.0-alpha.83 → 1.0.0-alpha.85

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 +1 -0
  2. package/dist/index.es.js +64 -57
  3. package/package.json +1 -1
package/dist/common.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ export declare function getSupportedPropertyNames(htmlElementName: string): string[];
1
2
  export declare function getSupportedAttributeNames(htmlElementName: string): string[];
2
3
  export declare class WithExtraAttributes extends HTMLElement {
3
4
  static get observedAttributes(): string[];
package/dist/index.es.js CHANGED
@@ -1,10 +1,16 @@
1
- const b = ":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}::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}::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}::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){::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}}";
2
- function h(i) {
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}}";
2
+ function b(i) {
3
3
  const t = document.createElement(i), s = Object.getPrototypeOf(t);
4
4
  return Object.getOwnPropertyNames(s);
5
5
  }
6
- const u = new CSSStyleSheet();
7
- u.replaceSync(b);
6
+ function d(i) {
7
+ const t = document.createElement(i), s = Object.getPrototypeOf(t);
8
+ return Object.getOwnPropertyNames(s).map(
9
+ (e) => e.toLowerCase()
10
+ );
11
+ }
12
+ const h = new CSSStyleSheet();
13
+ h.replaceSync(u);
8
14
  class p extends HTMLElement {
9
15
  static get observedAttributes() {
10
16
  return [
@@ -57,7 +63,7 @@ class p extends HTMLElement {
57
63
  }
58
64
  constructor(...t) {
59
65
  super(), this.shadowRoot || this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [
60
- u,
66
+ h,
61
67
  ...t
62
68
  ];
63
69
  }
@@ -90,7 +96,7 @@ class p extends HTMLElement {
90
96
  t,
91
97
  s,
92
98
  e,
93
- this.isGrid ? c : d
99
+ this.isGrid ? g : c
94
100
  );
95
101
  break;
96
102
  case "justify-self":
@@ -102,7 +108,7 @@ class p extends HTMLElement {
102
108
  t,
103
109
  s,
104
110
  e,
105
- g
111
+ f
106
112
  );
107
113
  break;
108
114
  case "col-span":
@@ -110,14 +116,14 @@ class p extends HTMLElement {
110
116
  case "col-span--tablet":
111
117
  case "col-span--laptop":
112
118
  case "col-span--desktop":
113
- this.updateProperties(t, s, e, f);
119
+ this.updateProperties(t, s, e, m);
114
120
  break;
115
121
  case "order":
116
122
  case "order--mobile":
117
123
  case "order--tablet":
118
124
  case "order--laptop":
119
125
  case "order--desktop":
120
- this.updateProperties(t, s, e, m);
126
+ this.updateProperties(t, s, e, k);
121
127
  break;
122
128
  }
123
129
  }
@@ -403,11 +409,11 @@ class p extends HTMLElement {
403
409
  this.setAttribute("order--desktop", t);
404
410
  }
405
411
  }
406
- class v extends p {
412
+ class w extends p {
407
413
  static get observedAttributes() {
408
414
  return [
409
415
  ...super.observedAttributes,
410
- ...h(this.nativeName)
416
+ ...d(this.nativeName)
411
417
  ];
412
418
  }
413
419
  attributeChangedCallback(t, s, e) {
@@ -418,7 +424,7 @@ class v extends p {
418
424
  }
419
425
  connectedCallback() {
420
426
  var t;
421
- for (const s of h(this.nativeName))
427
+ for (const s of b(this.nativeName))
422
428
  if (s !== "constructor")
423
429
  try {
424
430
  Object.defineProperty(this, s, {
@@ -441,7 +447,7 @@ class v extends p {
441
447
  return this.shadowRoot.querySelector(this.nativeName);
442
448
  }
443
449
  }
444
- const y = ["", "default", "none", "l"], d = [
450
+ const y = ["", "default", "none", "l"], c = [
445
451
  "",
446
452
  "default",
447
453
  "auto",
@@ -450,21 +456,21 @@ const y = ["", "default", "none", "l"], d = [
450
456
  "center",
451
457
  "baseline",
452
458
  "stretch"
453
- ], c = [
459
+ ], g = [
454
460
  "",
455
461
  "default",
456
462
  "start",
457
463
  "end",
458
464
  "center",
459
465
  "stretch"
460
- ], g = [
466
+ ], f = [
461
467
  "",
462
468
  "default",
463
469
  "start",
464
470
  "end",
465
471
  "center",
466
472
  "stretch"
467
- ], f = [
473
+ ], m = [
468
474
  "",
469
475
  "1",
470
476
  "2",
@@ -478,7 +484,7 @@ const y = ["", "default", "none", "l"], d = [
478
484
  "10",
479
485
  "11",
480
486
  "12"
481
- ], m = [
487
+ ], k = [
482
488
  "",
483
489
  "-1",
484
490
  "0",
@@ -494,7 +500,7 @@ const y = ["", "default", "none", "l"], d = [
494
500
  "10",
495
501
  "11",
496
502
  "12"
497
- ], w = [
503
+ ], A = [
498
504
  "",
499
505
  "default",
500
506
  "auto",
@@ -502,7 +508,7 @@ const y = ["", "default", "none", "l"], d = [
502
508
  "end",
503
509
  "center",
504
510
  "stretch"
505
- ], A = [
511
+ ], S = [
506
512
  "",
507
513
  "default",
508
514
  "inherit",
@@ -518,7 +524,7 @@ const y = ["", "default", "none", "l"], d = [
518
524
  "heading-l",
519
525
  "heading-m",
520
526
  "heading-s"
521
- ], S = [
527
+ ], $ = [
522
528
  "",
523
529
  "default",
524
530
  "inherit",
@@ -533,7 +539,7 @@ const y = ["", "default", "none", "l"], d = [
533
539
  "state-hover",
534
540
  "state-active",
535
541
  "state-disabled"
536
- ], $ = [
542
+ ], x = [
537
543
  "",
538
544
  "default",
539
545
  "inherit",
@@ -541,11 +547,11 @@ const y = ["", "default", "none", "l"], d = [
541
547
  "title",
542
548
  "title-large",
543
549
  "subtitle"
544
- ], k = ["Xs", "S", "M", "L", "Xl"], x = [
550
+ ], v = ["Xs", "S", "M", "L", "Xl"], j = [
545
551
  "",
546
552
  "default",
547
- ...k.map((i) => i.toLowerCase())
548
- ], j = ["", "default", "left", "center", "right"], C = [
553
+ ...v.map((i) => i.toLowerCase())
554
+ ], C = ["", "default", "left", "center", "right"], L = [
549
555
  "",
550
556
  "none",
551
557
  "3xs",
@@ -555,7 +561,7 @@ const y = ["", "default", "none", "l"], d = [
555
561
  "m",
556
562
  "l",
557
563
  "xl"
558
- ], M = ["", "none", "s", "m", "l"], L = ["", "none", "main", "pill"], T = [
564
+ ], M = ["", "none", "s", "m", "l"], T = ["", "none", "main", "pill"], D = [
559
565
  "none",
560
566
  "main",
561
567
  "brand",
@@ -566,7 +572,7 @@ const y = ["", "default", "none", "l"], d = [
566
572
  "purpose-warning",
567
573
  "purpose-error",
568
574
  "purpose-unlimited"
569
- ], D = [
575
+ ], N = [
570
576
  "",
571
577
  "all",
572
578
  "top",
@@ -575,7 +581,7 @@ const y = ["", "default", "none", "l"], d = [
575
581
  "left",
576
582
  "block",
577
583
  "inline"
578
- ], N = [
584
+ ], O = [
579
585
  "",
580
586
  "none",
581
587
  "surface-light",
@@ -602,7 +608,7 @@ const y = ["", "default", "none", "l"], d = [
602
608
  "purpose-info",
603
609
  "purpose-eco",
604
610
  "purpose-notification"
605
- ], G = ["", "cover", "contain", "default"], O = ["", "none", "s", "m", "l", "xl"], q = [
611
+ ], G = ["", "cover", "contain", "default"], q = ["", "none", "s", "m", "l", "xl"], P = [
606
612
  "",
607
613
  "default",
608
614
  "title-4xl",
@@ -699,10 +705,10 @@ function _(i) {
699
705
  function H() {
700
706
  return window.matchMedia("only screen and (min-width: 768px)").matches ? "tablet" : window.matchMedia("only screen and (min-width: 1025px)").matches ? "laptop" : "mobile";
701
707
  }
702
- function P(i, t) {
708
+ function F(i, t) {
703
709
  return i.includes(t);
704
710
  }
705
- function F(i, t, s = !0) {
711
+ function X(i, t, s = !0) {
706
712
  var e;
707
713
  if ([
708
714
  "aria-label",
@@ -745,7 +751,7 @@ function F(i, t, s = !0) {
745
751
  t.setAttribute("id", o), i.setAttribute("aria-labelledby", o);
746
752
  }
747
753
  }
748
- function X(i, t, s, e = "", o) {
754
+ function I(i, t, s, e = "", o) {
749
755
  const a = new CSSStyleSheet(), l = s.reduce(
750
756
  (n, r) => n + `
751
757
  ${t(i, r)} {
@@ -791,7 +797,7 @@ function X(i, t, s, e = "", o) {
791
797
  );
792
798
  return a.replaceSync(l), a;
793
799
  }
794
- class I {
800
+ class J {
795
801
  constructor(t, s, e, o) {
796
802
  this.component = t, this.attributeName = s, this.cssVariable = o, this.attributeNameMobile = `${this.attributeName}--mobile`, this.attributeNameTablet = `${this.attributeName}--tablet`, this.attributeNameLaptop = `${this.attributeName}--laptop`, this.attributeNameDesktop = `${this.attributeName}--desktop`, this._attributeValue = e, Object.defineProperty(
797
803
  this.component,
@@ -872,40 +878,41 @@ class I {
872
878
  }
873
879
  }
874
880
  export {
875
- I as AttributeBreakpointHandlerDelegate,
876
- v as PxElement,
881
+ J as AttributeBreakpointHandlerDelegate,
882
+ w as PxElement,
877
883
  p as WithExtraAttributes,
878
884
  B as addGlobalStylesheet,
879
885
  z as assetContainerImgWidthValues,
880
- N as backgroundColorValues,
886
+ O as backgroundColorValues,
881
887
  G as backgroundSizeValues,
882
- T as borderColorValues,
883
- L as borderRadiusValues,
884
- D as borderSideValues,
888
+ D as borderColorValues,
889
+ T as borderRadiusValues,
890
+ N as borderSideValues,
885
891
  M as borderValues,
886
- O as boxShadowValues,
887
- P as checkName,
888
- S as colorValues,
889
- c as cssGridAlignSelfValues,
890
- f as cssGridColSpanValues,
891
- g as cssGridJustifySelfValues,
892
- m as cssGridOrderValues,
893
- w as cssGridPlaceSelfValues,
894
- X as cssTokenBreakpoints,
895
- d as flexboxAlignSelfValues,
896
- A as fontsizeValues,
897
- $ as fontweightValues,
892
+ q as boxShadowValues,
893
+ F as checkName,
894
+ $ as colorValues,
895
+ g as cssGridAlignSelfValues,
896
+ m as cssGridColSpanValues,
897
+ f as cssGridJustifySelfValues,
898
+ k as cssGridOrderValues,
899
+ A as cssGridPlaceSelfValues,
900
+ I as cssTokenBreakpoints,
901
+ c as flexboxAlignSelfValues,
902
+ S as fontsizeValues,
903
+ x as fontweightValues,
898
904
  R as gapValues,
899
- h as getSupportedAttributeNames,
905
+ d as getSupportedAttributeNames,
906
+ b as getSupportedPropertyNames,
900
907
  H as getViewportFormat,
901
908
  E as gradientValues,
902
909
  y as gridGapValues,
903
- q as headingValues,
904
- k as iconSizeValues,
905
- x as iconSizeValuesKC,
910
+ P as headingValues,
911
+ v as iconSizeValues,
912
+ j as iconSizeValuesKC,
906
913
  _ as isFalsy,
907
914
  V as noBorderRadiusValues,
908
- C as paddingValues,
909
- j as textalignValues,
910
- F as transferAccessibilityAttributes
915
+ L as paddingValues,
916
+ C as textalignValues,
917
+ X as transferAccessibilityAttributes
911
918
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-common",
3
- "version": "1.0.0-alpha.83",
3
+ "version": "1.0.0-alpha.85",
4
4
  "description": "",
5
5
  "main": "dist/index.es.js",
6
6
  "types": "dist/index.d.ts",