@proximus/lavender-list 1.4.20-alpha.4 → 1.4.20-alpha.5

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 (6) hide show
  1. package/dist/List.d.ts +1 -0
  2. package/dist/ListItem.d.ts +1 -0
  3. package/dist/custom-elements.json +18 -0
  4. package/dist/index.es.js +225 -180
  5. package/dist/web-types.json +1 -1
  6. package/package.json +1 -1
package/dist/List.d.ts CHANGED
@@ -4,6 +4,7 @@ export declare class List extends PxElement<HTMLDivElement> {
4
4
  #private;
5
5
  protected static readonly template: HTMLTemplateElement;
6
6
  static nativeName: string;
7
+ static nativeAttributes: {};
7
8
  constructor();
8
9
  static get observedAttributes(): string[];
9
10
  connectedCallback(): void;
package/dist/ListItem.d.ts CHANGED
@@ -3,6 +3,7 @@ export declare const LIST_ITEM_CONNECTED_EVENT = "px-list-item-connected";
3
3
  export declare class ListItem extends PxElement<HTMLDivElement> {
4
4
  protected static readonly template: HTMLTemplateElement;
5
5
  static nativeName: string;
6
+ static nativeAttributes: {};
6
7
  constructor();
7
8
  connectedCallback(): void;
8
9
  static get observedAttributes(): string[];
package/dist/custom-elements.json CHANGED
@@ -35,6 +35,15 @@
35
35
  "static": true,
36
36
  "default": "'div'"
37
37
  },
38
+ {
39
+ "kind": "field",
40
+ "name": "nativeAttributes",
41
+ "type": {
42
+ "text": "object"
43
+ },
44
+ "static": true,
45
+ "default": "{}"
46
+ },
38
47
  {
39
48
  "kind": "method",
40
49
  "name": "#syncChildren",
@@ -168,6 +177,15 @@
168
177
  "static": true,
169
178
  "default": "'div'"
170
179
  },
180
+ {
181
+ "kind": "field",
182
+ "name": "nativeAttributes",
183
+ "type": {
184
+ "text": "object"
185
+ },
186
+ "static": true,
187
+ "default": "{}"
188
+ },
171
189
  {
172
190
  "kind": "field",
173
191
  "name": "$children",
package/dist/index.es.js CHANGED
@@ -1,39 +1,122 @@
1
1
  //#region src/list.css?inline
2
- var e = ".list{flex-direction:column;margin:0;padding:0;list-style:none;display:flex}", t = "@layer px-reset{:host{font-variant:normal;font-size-adjust:none;font-kerning:auto;font-optical-sizing:auto;font-synthesis:weight style small-caps position;font-feature-settings:normal;font-variation-settings:normal;font-language-override:normal;font-palette:normal;letter-spacing:normal;word-spacing:normal;tab-size:8;text-align:start;text-indent:0;text-transform:none;text-shadow:none;text-rendering:auto;text-wrap:wrap;white-space:normal;word-break:normal;overflow-wrap:normal;-webkit-hyphens:manual;hyphens:manual;text-underline-offset:auto;text-underline-position:auto;-webkit-font-smoothing:initial;-moz-osx-font-smoothing:auto;-webkit-text-size-adjust:auto;-moz-text-size-adjust:auto;text-size-adjust:auto;font-style:normal;font-stretch:100%;line-height:normal;text-emphasis:none}}: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-self-value)}:host([order]),::slotted([order]){order:var(--order-value)}:host([sticky-top]),:host([sticky-bottom]){z-index:5}:host([sticky-top]){position:sticky;top:0}:host([sticky-bottom]){position:sticky;bottom:0}:host([hidden]),::slotted([hidden]){display:none}:host([shown--sr]),::slotted([shown--sr]){clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}:host([word-break-all]){word-break:break-all}@media screen and (width<=47.938rem){: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%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}}:host([word-break-all--mobile]){word-break:break-all}@media screen and (width>=48rem) and (width<=64rem){: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%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}}:host([word-break-all--tablet]){word-break:break-all}@media screen and (width>=64.0625rem){:host([shown--sr--laptop]),::slotted([shown--sr--laptop]){clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}: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}}:host([word-break-all--laptop]){word-break:break-all}@media screen and (width>=90.0625rem){: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}:host([word-break-all--desktop]){word-break:break-all}}";
3
- //#endregion
4
- //#region ../common/src/common.ts
5
- function n(e) {
6
- let t = document.createElement(e), n = Object.getPrototypeOf(t);
7
- return Object.getOwnPropertyNames(n);
8
- }
9
- function r(e) {
10
- let t = document.createElement(e), n = Object.getPrototypeOf(t);
11
- return Object.getOwnPropertyNames(n).map((e) => e.toLowerCase());
12
- }
13
- var i = new CSSStyleSheet();
14
- i.replaceSync(t);
15
- var a = {
2
+ var e = ".list{flex-direction:column;margin:0;padding:0;list-style:none;display:flex}", t = {
16
3
  BASE_URL: "/",
17
4
  DEV: !0,
18
5
  MODE: "production",
19
6
  PROD: !1,
20
7
  SSR: !1,
21
8
  VITE_COMPONENT_DEBUG: "true"
22
- }, o = a?.VITE_COMPONENT_DEBUG === "true" || a?.DEV === !0;
23
- typeof window < "u" && (window.isComponentDebug = s);
24
- function s() {
25
- return o;
9
+ }, n = t?.VITE_COMPONENT_DEBUG === "true" || t?.DEV === !0;
10
+ typeof window < "u" && (window.isComponentDebug = r);
11
+ function r() {
12
+ return n;
26
13
  }
27
- function c(e) {
28
- s() && console.error(e);
14
+ function i(e) {
15
+ r() && console.error(e);
16
+ }
17
+ typeof window < "u" && (window.isComponentDebug = r);
18
+ //#endregion
19
+ //#region ../common/src/common.css?inline
20
+ var a = "@layer px-reset{:host{font-variant:normal;font-size-adjust:none;font-kerning:auto;font-optical-sizing:auto;font-synthesis:weight style small-caps position;font-feature-settings:normal;font-variation-settings:normal;font-language-override:normal;font-palette:normal;letter-spacing:normal;word-spacing:normal;tab-size:8;text-align:start;text-indent:0;text-transform:none;text-shadow:none;text-rendering:auto;text-wrap:wrap;white-space:normal;word-break:normal;overflow-wrap:normal;-webkit-hyphens:manual;hyphens:manual;text-underline-offset:auto;text-underline-position:auto;-webkit-font-smoothing:initial;-moz-osx-font-smoothing:auto;-webkit-text-size-adjust:auto;-moz-text-size-adjust:auto;text-size-adjust:auto;font-style:normal;font-stretch:100%;line-height:normal;text-emphasis:none}}: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-self-value)}:host([order]),::slotted([order]){order:var(--order-value)}:host([sticky-top]),:host([sticky-bottom]){z-index:5}:host([sticky-top]){position:sticky;top:0}:host([sticky-bottom]){position:sticky;bottom:0}:host([hidden]),::slotted([hidden]){display:none}:host([shown--sr]),::slotted([shown--sr]){clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}:host([word-break-all]){word-break:break-all}@media screen and (width<=47.938rem){: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%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}}:host([word-break-all--mobile]){word-break:break-all}@media screen and (width>=48rem) and (width<=64rem){: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%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}}:host([word-break-all--tablet]){word-break:break-all}@media screen and (width>=64.0625rem){:host([shown--sr--laptop]),::slotted([shown--sr--laptop]){clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}: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}}:host([word-break-all--laptop]){word-break:break-all}@media screen and (width>=90.0625rem){: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}:host([word-break-all--desktop]){word-break:break-all}}";
21
+ //#endregion
22
+ //#region ../common/src/attributeSetters.ts
23
+ function o(e, t, n) {
24
+ if (n == null || n === "") {
25
+ e.removeAttribute(t);
26
+ return;
27
+ }
28
+ e.setAttribute(t, n.toString());
29
29
  }
30
- typeof window < "u" && (window.isComponentDebug = s);
31
- var l = class e extends HTMLElement {
30
+ function s(e, t, n) {
31
+ if (!n) {
32
+ e.removeAttribute(t);
33
+ return;
34
+ }
35
+ e.setAttribute(t, "");
36
+ }
37
+ //#endregion
38
+ //#region ../common/src/values.ts
39
+ var c = [
40
+ "",
41
+ "default",
42
+ "auto",
43
+ "flex-start",
44
+ "start",
45
+ "flex-end",
46
+ "end",
47
+ "center",
48
+ "baseline",
49
+ "stretch"
50
+ ], l = [
51
+ "",
52
+ "default",
53
+ "start",
54
+ "end",
55
+ "center",
56
+ "stretch"
57
+ ], u = [
58
+ "",
59
+ "default",
60
+ "start",
61
+ "end",
62
+ "center",
63
+ "stretch"
64
+ ], d = [
65
+ "",
66
+ "1",
67
+ "2",
68
+ "3",
69
+ "4",
70
+ "5",
71
+ "6",
72
+ "7",
73
+ "8",
74
+ "9",
75
+ "10",
76
+ "11",
77
+ "12"
78
+ ], f = [
79
+ "",
80
+ "-1",
81
+ "0",
82
+ "1",
83
+ "2",
84
+ "3",
85
+ "4",
86
+ "5",
87
+ "6",
88
+ "7",
89
+ "8",
90
+ "9",
91
+ "10",
92
+ "11",
93
+ "12"
94
+ ];
95
+ [...[
96
+ "Xs",
97
+ "S",
98
+ "M",
99
+ "L",
100
+ "Xl"
101
+ ].map((e) => e.toLowerCase())];
102
+ var p = [
103
+ "none",
104
+ "2xs",
105
+ "xs",
106
+ "s",
107
+ "default",
108
+ "l",
109
+ "heading-to-subtitle",
110
+ "heading-to-content",
111
+ "page-layout-between-sections"
112
+ ], m = new CSSStyleSheet();
113
+ m.replaceSync(a);
114
+ var h = class e extends HTMLElement {
32
115
  static get observedAttributes() {
33
116
  return /* @__PURE__ */ "grow.grow--mobile.grow--tablet.grow--laptop.grow--desktop.shrink.shrink--mobile.shrink--tablet.shrink--laptop.shrink--desktop.basis.basis--mobile.basis--tablet.basis--laptop.basis--desktop.align-self.align-self--mobile.align-self--tablet.align-self--laptop.align-self--desktop.justify-self.justify-self--mobile.justify-self--tablet.justify-self--laptop.justify-self--desktop.hidden.hidden--mobile.hidden--tablet.hidden--laptop.hidden--desktop.shown--sr.shown--sr--mobile.shown--sr--tablet.shown--sr--laptop.shown--sr--desktop.col-span.col-span--mobile.col-span--tablet.col-span--laptop.col-span--desktop.order.order--mobile.order--tablet.order--laptop.order--desktop.sticky-top.sticky-bottom.word-break-all.word-break-all--mobile.word-break-all--tablet.word-break-all--laptop.word-break-all--desktop".split(".");
34
117
  }
35
118
  constructor(...e) {
36
- super(), this.shadowRoot || this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [i, ...e];
119
+ super(), this.shadowRoot || this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [m, ...e];
37
120
  }
38
121
  attributeChangedCallback(t, n, r) {
39
122
  if (e.observedAttributes.indexOf(t) !== -1) switch (t) {
@@ -59,36 +142,36 @@ var l = class e extends HTMLElement {
59
142
  case "align-self--tablet":
60
143
  case "align-self--laptop":
61
144
  case "align-self--desktop":
62
- this.updateProperties(t, n, r, this.parentElement?.localName === "px-grid" ? f : d);
145
+ this.updateProperties(t, n, r, this.parentElement?.localName === "px-grid" ? l : c);
63
146
  break;
64
147
  case "justify-self":
65
148
  case "justify-self--mobile":
66
149
  case "justify-self--tablet":
67
150
  case "justify-self--laptop":
68
151
  case "justify-self--desktop":
69
- this.updateProperties(t, n, r, p);
152
+ this.updateProperties(t, n, r, u);
70
153
  break;
71
154
  case "col-span":
72
155
  case "col-span--mobile":
73
156
  case "col-span--tablet":
74
157
  case "col-span--laptop":
75
158
  case "col-span--desktop":
76
- this.updateProperties(t, n, r, m);
159
+ this.updateProperties(t, n, r, d);
77
160
  break;
78
161
  case "order":
79
162
  case "order--mobile":
80
163
  case "order--tablet":
81
164
  case "order--laptop":
82
- case "order--desktop": this.updateProperties(t, n, r, h);
165
+ case "order--desktop": this.updateProperties(t, n, r, f);
83
166
  }
84
167
  }
85
168
  updateProperties(e, t, n, r) {
86
- r && (this.checkName(r, n) || c(`"${n}" is not an allowed ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`));
87
- let i = e.indexOf("--") > -1, a = i ? e.split("--")[0] : e;
88
- if (!i) this.style.setProperty(`--${a}-value`, t), this.style.setProperty(`--${a}-value`, n);
169
+ r && (this.checkName(r, n) || i(`"${n}" is not an allowed ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`));
170
+ let a = e.indexOf("--") > -1, o = a ? e.split("--")[0] : e;
171
+ if (!a) this.style.setProperty(`--${o}-value`, t), this.style.setProperty(`--${o}-value`, n);
89
172
  else {
90
173
  let r = e.split("--")[1];
91
- this.style.setProperty(`--${a}--${r}-value`, t), this.style.setProperty(`--${a}--${r}-value`, n);
174
+ this.style.setProperty(`--${o}--${r}-value`, t), this.style.setProperty(`--${o}--${r}-value`, n);
92
175
  }
93
176
  }
94
177
  updateStyle(e, t, n) {
@@ -119,363 +202,313 @@ var l = class e extends HTMLElement {
119
202
  return this.getAttribute("grow");
120
203
  }
121
204
  set grow(e) {
122
- _(this, "grow", e);
205
+ o(this, "grow", e);
123
206
  }
124
207
  get growMobile() {
125
208
  return this.getAttribute("grow--mobile");
126
209
  }
127
210
  set growMobile(e) {
128
- _(this, "grow--mobile", e);
211
+ o(this, "grow--mobile", e);
129
212
  }
130
213
  get growTablet() {
131
214
  return this.getAttribute("grow--tablet");
132
215
  }
133
216
  set growTablet(e) {
134
- _(this, "grow--tablet", e);
217
+ o(this, "grow--tablet", e);
135
218
  }
136
219
  get growLaptop() {
137
220
  return this.getAttribute("grow--laptop");
138
221
  }
139
222
  set growLaptop(e) {
140
- _(this, "grow--laptop", e);
223
+ o(this, "grow--laptop", e);
141
224
  }
142
225
  get growDesktop() {
143
226
  return this.getAttribute("grow--desktop");
144
227
  }
145
228
  set growDesktop(e) {
146
- _(this, "grow--desktop", e);
229
+ o(this, "grow--desktop", e);
147
230
  }
148
231
  get shrink() {
149
232
  return this.getAttribute("shrink");
150
233
  }
151
234
  set shrink(e) {
152
- _(this, "shrink", e);
235
+ o(this, "shrink", e);
153
236
  }
154
237
  get shrinkMobile() {
155
238
  return this.getAttribute("shrink--mobile");
156
239
  }
157
240
  set shrinkMobile(e) {
158
- _(this, "shrink--mobile", e);
241
+ o(this, "shrink--mobile", e);
159
242
  }
160
243
  get shrinkTablet() {
161
244
  return this.getAttribute("shrink--tablet");
162
245
  }
163
246
  set shrinkTablet(e) {
164
- _(this, "shrink--tablet", e);
247
+ o(this, "shrink--tablet", e);
165
248
  }
166
249
  get shrinkLaptop() {
167
250
  return this.getAttribute("shrink--laptop");
168
251
  }
169
252
  set shrinkLaptop(e) {
170
- _(this, "shrink--laptop", e);
253
+ o(this, "shrink--laptop", e);
171
254
  }
172
255
  get shrinkDesktop() {
173
256
  return this.getAttribute("shrink--desktop");
174
257
  }
175
258
  set shrinkDesktop(e) {
176
- _(this, "shrink--desktop", e);
259
+ o(this, "shrink--desktop", e);
177
260
  }
178
261
  get basis() {
179
262
  return this.getAttribute("basis");
180
263
  }
181
264
  set basis(e) {
182
- _(this, "basis", e);
265
+ o(this, "basis", e);
183
266
  }
184
267
  get basisMobile() {
185
268
  return this.getAttribute("basis--mobile");
186
269
  }
187
270
  set basisMobile(e) {
188
- _(this, "basis--mobile", e);
271
+ o(this, "basis--mobile", e);
189
272
  }
190
273
  get basisTablet() {
191
274
  return this.getAttribute("basis--tablet");
192
275
  }
193
276
  set basisTablet(e) {
194
- _(this, "basis--tablet", e);
277
+ o(this, "basis--tablet", e);
195
278
  }
196
279
  get basisLaptop() {
197
280
  return this.getAttribute("basis--laptop");
198
281
  }
199
282
  set basisLaptop(e) {
200
- _(this, "basis--laptop", e);
283
+ o(this, "basis--laptop", e);
201
284
  }
202
285
  get basisDesktop() {
203
286
  return this.getAttribute("basis--desktop");
204
287
  }
205
288
  set basisDesktop(e) {
206
- _(this, "basis--desktop", e);
289
+ o(this, "basis--desktop", e);
207
290
  }
208
291
  get alignSelf() {
209
292
  return this.getAttribute("align-self");
210
293
  }
211
294
  set alignSelf(e) {
212
- _(this, "align-self", e);
295
+ o(this, "align-self", e);
213
296
  }
214
297
  get alignSelfMobile() {
215
298
  return this.getAttribute("align-self--mobile");
216
299
  }
217
300
  set alignSelfMobile(e) {
218
- _(this, "align-self--mobile", e);
301
+ o(this, "align-self--mobile", e);
219
302
  }
220
303
  get alignSelfTablet() {
221
304
  return this.getAttribute("align-self--tablet");
222
305
  }
223
306
  set alignSelfTablet(e) {
224
- _(this, "align-self--tablet", e);
307
+ o(this, "align-self--tablet", e);
225
308
  }
226
309
  get alignSelfLaptop() {
227
310
  return this.getAttribute("align-self--laptop");
228
311
  }
229
312
  set alignSelfLaptop(e) {
230
- _(this, "align-self--laptop", e);
313
+ o(this, "align-self--laptop", e);
231
314
  }
232
315
  get alignSelfDesktop() {
233
316
  return this.getAttribute("align-self--desktop");
234
317
  }
235
318
  set alignSelfDesktop(e) {
236
- _(this, "align-self--desktop", e);
319
+ o(this, "align-self--desktop", e);
237
320
  }
238
321
  get justifySelf() {
239
322
  return this.getAttribute("justify-self");
240
323
  }
241
324
  set justifySelf(e) {
242
- _(this, "justify-self", e);
325
+ o(this, "justify-self", e);
243
326
  }
244
327
  get justifySelfMobile() {
245
328
  return this.getAttribute("justify-self--mobile");
246
329
  }
247
330
  set justifySelfMobile(e) {
248
- _(this, "justify-self--mobile", e);
331
+ o(this, "justify-self--mobile", e);
249
332
  }
250
333
  get justifySelfTablet() {
251
334
  return this.getAttribute("justify-self--tablet");
252
335
  }
253
336
  set justifySelfTablet(e) {
254
- _(this, "justify-self--tablet", e);
337
+ o(this, "justify-self--tablet", e);
255
338
  }
256
339
  get justifySelfLaptop() {
257
340
  return this.getAttribute("justify-self--laptop");
258
341
  }
259
342
  set justifySelfLaptop(e) {
260
- _(this, "justify-self--laptop", e);
343
+ o(this, "justify-self--laptop", e);
261
344
  }
262
345
  get justifySelfDesktop() {
263
346
  return this.getAttribute("justify-self--desktop");
264
347
  }
265
348
  set justifySelfDesktop(e) {
266
- _(this, "justify-self--desktop", e);
349
+ o(this, "justify-self--desktop", e);
267
350
  }
268
351
  get hiddenMobile() {
269
352
  return this.hasAttribute("hidden--mobile");
270
353
  }
271
354
  set hiddenMobile(e) {
272
- v(this, "hidden--mobile", e);
355
+ s(this, "hidden--mobile", e);
273
356
  }
274
357
  get hiddenTablet() {
275
358
  return this.hasAttribute("hidden--tablet");
276
359
  }
277
360
  set hiddenTablet(e) {
278
- v(this, "hidden--tablet", e);
361
+ s(this, "hidden--tablet", e);
279
362
  }
280
363
  get hiddenLaptop() {
281
364
  return this.hasAttribute("hidden--laptop");
282
365
  }
283
366
  set hiddenLaptop(e) {
284
- v(this, "hidden--laptop", e);
367
+ s(this, "hidden--laptop", e);
285
368
  }
286
369
  get hiddenDesktop() {
287
370
  return this.hasAttribute("hidden--desktop");
288
371
  }
289
372
  set hiddenDesktop(e) {
290
- v(this, "hidden--desktop", e);
373
+ s(this, "hidden--desktop", e);
291
374
  }
292
375
  get colSpan() {
293
376
  return this.getAttribute("col-span");
294
377
  }
295
378
  set colSpan(e) {
296
- _(this, "col-span", e);
379
+ o(this, "col-span", e);
297
380
  }
298
381
  get colSpanMobile() {
299
382
  return this.getAttribute("col-span--mobile");
300
383
  }
301
384
  set colSpanMobile(e) {
302
- _(this, "col-span--mobile", e);
385
+ o(this, "col-span--mobile", e);
303
386
  }
304
387
  get colSpanTablet() {
305
388
  return this.getAttribute("col-span--tablet");
306
389
  }
307
390
  set colSpanTablet(e) {
308
- _(this, "col-span--tablet", e);
391
+ o(this, "col-span--tablet", e);
309
392
  }
310
393
  get colSpanLaptop() {
311
394
  return this.getAttribute("col-span--laptop");
312
395
  }
313
396
  set colSpanLaptop(e) {
314
- _(this, "col-span--laptop", e);
397
+ o(this, "col-span--laptop", e);
315
398
  }
316
399
  get colSpanDesktop() {
317
400
  return this.getAttribute("col-span--desktop");
318
401
  }
319
402
  set colSpanDesktop(e) {
320
- _(this, "col-span--desktop", e);
403
+ o(this, "col-span--desktop", e);
321
404
  }
322
405
  get order() {
323
406
  return this.getAttribute("order");
324
407
  }
325
408
  set order(e) {
326
- _(this, "order", e);
409
+ o(this, "order", e);
327
410
  }
328
411
  get orderMobile() {
329
412
  return this.getAttribute("order--mobile");
330
413
  }
331
414
  set orderMobile(e) {
332
- _(this, "order--mobile", e);
415
+ o(this, "order--mobile", e);
333
416
  }
334
417
  get orderTablet() {
335
418
  return this.getAttribute("order--tablet");
336
419
  }
337
420
  set orderTablet(e) {
338
- _(this, "order--tablet", e);
421
+ o(this, "order--tablet", e);
339
422
  }
340
423
  get orderLaptop() {
341
424
  return this.getAttribute("order--laptop");
342
425
  }
343
426
  set orderLaptop(e) {
344
- _(this, "order--laptop", e);
427
+ o(this, "order--laptop", e);
345
428
  }
346
429
  get orderDesktop() {
347
430
  return this.getAttribute("order--desktop");
348
431
  }
349
432
  set orderDesktop(e) {
350
- _(this, "order--desktop", e);
433
+ o(this, "order--desktop", e);
434
+ }
435
+ }, g = class extends h {
436
+ static {
437
+ this.nativeAttributes = {};
438
+ }
439
+ static {
440
+ this.nativeProperties = {};
351
441
  }
352
- }, u = class extends l {
353
442
  static {
354
- this.accessorExclusions = [];
443
+ this.nativeMethods = [];
355
444
  }
356
445
  static get observedAttributes() {
357
- return [...super.observedAttributes, ...r(this.nativeName)];
446
+ return [...super.observedAttributes, ...Object.keys(this.nativeAttributes)];
358
447
  }
359
448
  attributeChangedCallback(e, t, n) {
360
- super.attributeChangedCallback(e, t, n), n === null ? this.$el.toggleAttribute(e) : this.$el.setAttribute(e, n);
449
+ super.attributeChangedCallback(e, t, n), t !== n && Object.prototype.hasOwnProperty.call(this.ctor.nativeAttributes, e) && this._forwardNativeAttribute(e, n);
361
450
  }
362
451
  get ctor() {
363
452
  return Object.getPrototypeOf(this).constructor;
364
453
  }
365
454
  constructor(...e) {
366
- super(...e), this.ctor.supportedPropertyNames || (this.ctor.supportedPropertyNames = n(this.ctor.nativeName)), this.enhanceWithNativeProperties();
455
+ super(...e), this.enhanceWithNativeProperties();
456
+ }
457
+ getNativePropertyMetadata() {
458
+ let e = /* @__PURE__ */ new Map(), t = this.ctor.nativeAttributes;
459
+ for (let [n, r] of Object.entries(t)) for (let t of r) e.set(t, n);
460
+ let n = new Map(Object.entries(this.ctor.nativeProperties));
461
+ for (let t of e.keys()) n.set(t, "writable");
462
+ return {
463
+ reflectedProperties: e,
464
+ properties: n
465
+ };
466
+ }
467
+ setNativeProperty(e, t, n) {
468
+ let r = n.get(e);
469
+ if (r !== void 0) {
470
+ this.$el[e] = t;
471
+ let n = this.$el.getAttribute(r);
472
+ this.getAttribute(r) !== n && (n === null ? this.removeAttribute(r) : this.setAttribute(r, n));
473
+ } else this.$el[e] !== t && (this.$el[e] = t);
367
474
  }
368
475
  enhanceWithNativeProperties() {
369
- for (let e of this.ctor.supportedPropertyNames) if (!(e === "constructor" || (this.ctor?.accessorExclusions ?? []).includes(e))) try {
370
- Object.defineProperty(this, e, {
371
- get() {
372
- return this.$el[e];
373
- },
374
- set(t) {
375
- this.$el[e] !== t && (this.$el[e] = t);
376
- }
476
+ let { reflectedProperties: e, properties: t } = this.getNativePropertyMetadata();
477
+ for (let [n, r] of t) {
478
+ let t = n;
479
+ Object.defineProperty(this, t, {
480
+ get: () => this.$el[t],
481
+ set: r === "writable" ? (n) => this.setNativeProperty(t, n, e) : void 0
377
482
  });
378
- } catch (t) {
379
- console.warn(`Could not create property ${e} for`, this.$el, t);
380
483
  }
484
+ for (let e of this.ctor.nativeMethods) Object.defineProperty(this, e, { value: (...t) => {
485
+ let n = this.$el, r = Reflect.get(n, e);
486
+ if (typeof r != "function") throw TypeError(`Native ${this.ctor.nativeName}.${e}() is not supported by this browser`);
487
+ return Reflect.apply(r, n, t);
488
+ } });
381
489
  }
382
490
  get $el() {
383
491
  return this.shadowRoot.querySelector(this.ctor.nativeName);
384
492
  }
493
+ _forwardNativeAttribute(e, t) {
494
+ this.$el.getAttribute(e) !== t && (t === null ? this.$el.removeAttribute(e) : this.$el.setAttribute(e, t));
495
+ }
385
496
  _updateAttribute(e, t) {
386
- _(this, e, t);
497
+ o(this, e, t);
387
498
  }
388
499
  _updateBooleanAttribute(e, t) {
389
- v(this, e, t);
390
- }
391
- }, d = [
392
- "",
393
- "default",
394
- "auto",
395
- "flex-start",
396
- "start",
397
- "flex-end",
398
- "end",
399
- "center",
400
- "baseline",
401
- "stretch"
402
- ], f = [
403
- "",
404
- "default",
405
- "start",
406
- "end",
407
- "center",
408
- "stretch"
409
- ], p = [
410
- "",
411
- "default",
412
- "start",
413
- "end",
414
- "center",
415
- "stretch"
416
- ], m = [
417
- "",
418
- "1",
419
- "2",
420
- "3",
421
- "4",
422
- "5",
423
- "6",
424
- "7",
425
- "8",
426
- "9",
427
- "10",
428
- "11",
429
- "12"
430
- ], h = [
431
- "",
432
- "-1",
433
- "0",
434
- "1",
435
- "2",
436
- "3",
437
- "4",
438
- "5",
439
- "6",
440
- "7",
441
- "8",
442
- "9",
443
- "10",
444
- "11",
445
- "12"
446
- ];
447
- [...[
448
- "Xs",
449
- "S",
450
- "M",
451
- "L",
452
- "Xl"
453
- ].map((e) => e.toLowerCase())];
454
- var g = [
455
- "none",
456
- "2xs",
457
- "xs",
458
- "s",
459
- "default",
460
- "l",
461
- "heading-to-subtitle",
462
- "heading-to-content",
463
- "page-layout-between-sections"
500
+ s(this, e, t);
501
+ }
502
+ }, _ = {
503
+ validity: "readonly",
504
+ validationMessage: "readonly",
505
+ willValidate: "readonly"
506
+ }, v = [
507
+ "checkValidity",
508
+ "reportValidity",
509
+ "setCustomValidity"
464
510
  ];
465
- function _(e, t, n) {
466
- if (n == null || n === "") {
467
- e.removeAttribute(t);
468
- return;
469
- }
470
- e.setAttribute(t, n.toString());
471
- }
472
- function v(e, t, n) {
473
- if (!n) {
474
- e.removeAttribute(t);
475
- return;
476
- }
477
- e.setAttribute(t, "");
478
- }
511
+ ({ ..._ }), [...v], { ..._ }, [...v], { ..._ }, [...v], { ..._ }, [...v], { ..._ }, [...v];
479
512
  //#endregion
480
513
  //#region ../common/src/breakpoints.ts
481
514
  function y(e, t, n, r = "", i, a = e) {
@@ -543,13 +576,16 @@ function T(e, t) {
543
576
  //#region src/listitem.css?inline
544
577
  var E = ".list-item{gap:var(--px-spacing-xs-mobile);font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l);color:var(--px-color-text-neutral-default);align-items:flex-start;display:flex}.list-item[inverted]{color:var(--px-color-text-neutral-inverted)}:is(:host([variant=ul]),:host([variant=ol])) .list-item{margin-left:var(--px-spacing-default-mobile);display:list-item}:host([variant=ul]) .list-item{list-style-type:disc}:host([variant=ol]) .list-item{counter-set:list-item var(--item-index,0);list-style-type:decimal}@media screen and (width>=48rem){.list-item{gap:var(--px-spacing-xs-tablet)}}@media screen and (width>=64.0625rem){.list-item{gap:var(--px-spacing-xs-laptop)}}@media screen and (width>=90.0625rem){.list-item{gap:var(--px-spacing-xs-desktop)}}", D = new CSSStyleSheet();
545
578
  D.replaceSync(E);
546
- var O = "px-list-item-connected", k = class e extends u {
579
+ var O = "px-list-item-connected", k = class e extends g {
547
580
  static {
548
581
  this.template = C("<div class=\"list-item\" role=\"listitem\"><slot name=\"icon\"></slot><slot name=\"label\"></slot></div>");
549
582
  }
550
583
  static {
551
584
  this.nativeName = "div";
552
585
  }
586
+ static {
587
+ this.nativeAttributes = {};
588
+ }
553
589
  constructor() {
554
590
  super(D), T(this.shadowRoot, e.template);
555
591
  }
@@ -560,13 +596,15 @@ var O = "px-list-item-connected", k = class e extends u {
560
596
  }));
561
597
  }
562
598
  static get observedAttributes() {
563
- return ["inverted"];
599
+ return [...super.observedAttributes, "inverted"];
564
600
  }
565
601
  attributeChangedCallback(e, t, n) {
566
602
  if (t !== n) switch (e) {
567
603
  case "inverted":
568
604
  for (let e = 0; e < this.$children.length; e++) this.$children[e].hasAttribute("inverted") || this.$children[e].toggleAttribute("inverted");
569
605
  this.$el.toggleAttribute("inverted", n !== null);
606
+ break;
607
+ default: super.attributeChangedCallback(e, t, n);
570
608
  }
571
609
  }
572
610
  get $children() {
@@ -588,18 +626,25 @@ var j = [
588
626
  "",
589
627
  "ul",
590
628
  "ol"
591
- ], M = y("gap", (e, t, n) => `:host([${e}${n ? `--${n}` : ""}='${t}']) .list`, g, "px-spacing", "--list-gap"), N = class e extends u {
629
+ ], M = y("gap", (e, t, n) => `:host([${e}${n ? `--${n}` : ""}='${t}']) .list`, p, "px-spacing", "--list-gap"), N = class e extends g {
592
630
  static {
593
631
  this.template = C("<div class=\"list\" role=\"list\"><slot></slot></div>");
594
632
  }
595
633
  static {
596
634
  this.nativeName = "div";
597
635
  }
636
+ static {
637
+ this.nativeAttributes = {};
638
+ }
598
639
  constructor() {
599
640
  super(A, M), T(this.shadowRoot, e.template);
600
641
  }
601
642
  static get observedAttributes() {
602
- return ["inverted", "variant"];
643
+ return [
644
+ ...super.observedAttributes,
645
+ "inverted",
646
+ "variant"
647
+ ];
603
648
  }
604
649
  connectedCallback() {
605
650
  this.gap ||= "xs", this.addEventListener(O, () => {
@@ -626,7 +671,7 @@ var j = [
626
671
  this.isConnected && this.#t();
627
672
  break;
628
673
  case "variant":
629
- this.checkName(j, n) || c(`"${n}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${j.join("\", \"")}".`), this.isConnected && this.#n(n), super.attributeChangedCallback(e, t, n);
674
+ this.checkName(j, n) || i(`"${n}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${j.join("\", \"")}".`), this.isConnected && this.#n(n);
630
675
  break;
631
676
  default: super.attributeChangedCallback(e, t, n);
632
677
  }
package/dist/web-types.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
3
3
  "name": "@proximus/lavender-list",
4
- "version": "1.4.20-alpha.4",
4
+ "version": "1.4.20-alpha.5",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-list",
3
- "version": "1.4.20-alpha.4",
3
+ "version": "1.4.20-alpha.5",
4
4
  "description": "",
5
5
  "main": "dist/index.es.js",
6
6
  "types": "dist/index.d.ts",