@proximus/lavender-common 1.0.1 → 1.0.3

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 +3 -0
  2. package/dist/index.es.js +29 -23
  3. package/package.json +1 -1
package/dist/common.d.ts CHANGED
@@ -93,11 +93,14 @@ export declare class WithExtraAttributes extends HTMLElement {
93
93
  export declare abstract class PxElement<HTML_TYPE extends Element> extends WithExtraAttributes {
94
94
  static nativeName: string;
95
95
  nativeName: string;
96
+ accessorExclusions: string[];
96
97
  static get observedAttributes(): string[];
97
98
  attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
98
99
  protected constructor(...adoptedStylesheets: CSSStyleSheet[]);
99
100
  connectedCallback(): void;
100
101
  get $el(): HTML_TYPE;
102
+ protected _updateAttribute(name: string, value: string): void;
103
+ protected _updateBooleanAttribute(name: string, value: boolean): void;
101
104
  }
102
105
  export declare const gridGapValues: string[];
103
106
  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);
@@ -409,7 +409,10 @@ class p extends HTMLElement {
409
409
  this.setAttribute("order--desktop", t);
410
410
  }
411
411
  }
412
- class w extends p {
412
+ class y extends p {
413
+ constructor(...t) {
414
+ super(...t), this.accessorExclusions = [], this.nativeName = Object.getPrototypeOf(this).constructor.nativeName, this.accessorExclusions = Object.getPrototypeOf(this).constructor.accessorExclusions || [];
415
+ }
413
416
  static get observedAttributes() {
414
417
  return [
415
418
  ...super.observedAttributes,
@@ -419,13 +422,10 @@ class w extends p {
419
422
  attributeChangedCallback(t, s, e) {
420
423
  super.attributeChangedCallback(t, s, e), e === null ? this.$el.toggleAttribute(t) : this.$el.setAttribute(t, e);
421
424
  }
422
- constructor(...t) {
423
- super(...t), this.nativeName = Object.getPrototypeOf(this).constructor.nativeName;
424
- }
425
425
  connectedCallback() {
426
426
  var t;
427
427
  for (const s of b(this.nativeName))
428
- if (s !== "constructor")
428
+ if (!(s === "constructor" || this.accessorExclusions.includes(s)))
429
429
  try {
430
430
  Object.defineProperty(this, s, {
431
431
  get() {
@@ -446,8 +446,14 @@ class w extends p {
446
446
  get $el() {
447
447
  return this.shadowRoot.querySelector(this.nativeName);
448
448
  }
449
+ _updateAttribute(t, s) {
450
+ s ? this.setAttribute(t, s) : this.removeAttribute(t);
451
+ }
452
+ _updateBooleanAttribute(t, s) {
453
+ s ? this.setAttribute(t, "") : this.removeAttribute(t);
454
+ }
449
455
  }
450
- const y = ["", "default", "none", "l"], c = [
456
+ const w = ["", "default", "none", "l"], c = [
451
457
  "",
452
458
  "default",
453
459
  "auto",
@@ -608,7 +614,7 @@ const y = ["", "default", "none", "l"], c = [
608
614
  "purpose-info",
609
615
  "purpose-eco",
610
616
  "purpose-notification"
611
- ], G = ["", "cover", "contain", "default"], q = ["", "none", "s", "m", "l", "xl"], P = [
617
+ ], G = ["", "cover", "contain", "default"], q = ["", "none", "s", "m", "l", "xl"], E = [
612
618
  "",
613
619
  "default",
614
620
  "title-4xl",
@@ -619,7 +625,7 @@ const y = ["", "default", "none", "l"], c = [
619
625
  "title-m",
620
626
  "title-s",
621
627
  "subtitle"
622
- ], E = [
628
+ ], P = [
623
629
  "",
624
630
  "purple-top-red",
625
631
  "purple-top-magenta",
@@ -669,7 +675,7 @@ const y = ["", "default", "none", "l"], c = [
669
675
  "color-bottom-right-blue",
670
676
  "color-bottom-right-turquoise",
671
677
  "color-bottom-right-green"
672
- ], R = [
678
+ ], _ = [
673
679
  "none",
674
680
  "2xs",
675
681
  "xs",
@@ -679,14 +685,14 @@ const y = ["", "default", "none", "l"], c = [
679
685
  "heading-to-subtitle",
680
686
  "heading-to-content",
681
687
  "page-layout-between-sections"
682
- ], V = [
688
+ ], B = [
683
689
  "",
684
690
  "all",
685
691
  "top",
686
692
  "right",
687
693
  "bottom",
688
694
  "left"
689
- ], z = [
695
+ ], R = [
690
696
  "",
691
697
  "default",
692
698
  "xs",
@@ -695,11 +701,11 @@ const y = ["", "default", "none", "l"], c = [
695
701
  "l",
696
702
  "xl"
697
703
  ];
698
- function B(i) {
704
+ function V(i) {
699
705
  const t = document.createElement("style");
700
706
  t.innerHTML = i, document.head.appendChild(t);
701
707
  }
702
- function _(i) {
708
+ function z(i) {
703
709
  return typeof i == "string" && (i === "false" || i === "0" || i === "null") || typeof i == "boolean" && !i;
704
710
  }
705
711
  function H() {
@@ -879,10 +885,10 @@ class J {
879
885
  }
880
886
  export {
881
887
  J as AttributeBreakpointHandlerDelegate,
882
- w as PxElement,
888
+ y as PxElement,
883
889
  p as WithExtraAttributes,
884
- B as addGlobalStylesheet,
885
- z as assetContainerImgWidthValues,
890
+ V as addGlobalStylesheet,
891
+ R as assetContainerImgWidthValues,
886
892
  O as backgroundColorValues,
887
893
  G as backgroundSizeValues,
888
894
  D as borderColorValues,
@@ -901,17 +907,17 @@ export {
901
907
  c as flexboxAlignSelfValues,
902
908
  S as fontsizeValues,
903
909
  x as fontweightValues,
904
- R as gapValues,
910
+ _ as gapValues,
905
911
  d as getSupportedAttributeNames,
906
912
  b as getSupportedPropertyNames,
907
913
  H as getViewportFormat,
908
- E as gradientValues,
909
- y as gridGapValues,
910
- P as headingValues,
914
+ P as gradientValues,
915
+ w as gridGapValues,
916
+ E as headingValues,
911
917
  v as iconSizeValues,
912
918
  j as iconSizeValuesKC,
913
- _ as isFalsy,
914
- V as noBorderRadiusValues,
919
+ z as isFalsy,
920
+ B as noBorderRadiusValues,
915
921
  L as paddingValues,
916
922
  C as textalignValues,
917
923
  X as transferAccessibilityAttributes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-common",
3
- "version": "1.0.1",
3
+ "version": "1.0.3",
4
4
  "description": "",
5
5
  "main": "dist/index.es.js",
6
6
  "types": "dist/index.d.ts",