@proximus/lavender-layout 1.1.0-alpha.4 → 1.1.0-alpha.6

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.js +99 -90
  2. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -1,5 +1,5 @@
1
- import { WithFlexAttributes as r, bgColorValues as l } from "@proximus/lavender-common";
2
- const p = ".flex-container{display:flex;height:100%;width:100%;box-sizing:border-box;flex-direction:var(--flex-direction-mobile-value);gap:var(--flex-gap-mobile-value);flex-wrap:var(--flex-wrap-mobile-value);justify-content:var(--flex-justify-content-mobile-value);align-items:var(--flex-align-items-mobile-value)}@media screen and (min-width: 768px){.flex-container{flex-direction:var(--flex-direction-tablet-value);gap:var(--flex-gap-tablet-value);flex-wrap:var(--flex-wrap-tablet-value);justify-content:var(--flex-justify-content-tablet-value);align-items:var(--flex-align-items-tablet-value)}}@media screen and (min-width: 1025px){.flex-container{flex-direction:var(--flex-direction-laptop-value);gap:var(--flex-gap-laptop-value);flex-wrap:var(--flex-wrap-laptop-value);justify-content:var(--flex-justify-content-laptop-value);align-items:var(--flex-align-items-laptop-value)}}@media screen and (min-width: 1441px){.flex-container{flex-direction:var(--flex-direction-desktop-value);gap:var(--flex-gap-desktop-value);flex-wrap:var(--flex-wrap-desktop-value);justify-content:var(--flex-justify-content-desktop-value);align-items:var(--flex-align-items-desktop-value)}}", s = new CSSStyleSheet();
1
+ import { WithFlexAttributes as r, backgroundColorValues as l } from "@proximus/lavender-common";
2
+ const p = ".flex-container{display:flex;height:100%;width:100%;box-sizing:border-box;flex-direction:var(--flex-direction--mobile-value);gap:var(--flex-gap--mobile-value);flex-wrap:var(--flex-wrap-mobile-value);justify-content:var(--flex-justify-content--mobile-value);align-items:var(--flex-align-items--mobile-value)}@media screen and (min-width: 768px){.flex-container{flex-direction:var(--flex-direction--tablet-value);gap:var(--flex-gap--tablet-value);flex-wrap:var(--flex-wrap-tablet-value);justify-content:var(--flex-justify-content--tablet-value);align-items:var(--flex-align-items--tablet-value)}}@media screen and (min-width: 1025px){.flex-container{flex-direction:var(--flex-direction--laptop-value);gap:var(--flex-gap--laptop-value);flex-wrap:var(--flex-wrap-laptop-value);justify-content:var(--flex-justify-content--laptop-value);align-items:var(--flex-align-items--laptop-value)}}@media screen and (min-width: 1441px){.flex-container{flex-direction:var(--flex-direction--desktop-value);gap:var(--flex-gap--desktop-value);flex-wrap:var(--flex-wrap-desktop-value);justify-content:var(--flex-justify-content--desktop-value);align-items:var(--flex-align-items--desktop-value)}}", s = new CSSStyleSheet();
3
3
  s.replaceSync(p);
4
4
  const c = [
5
5
  // Vertical
@@ -43,25 +43,25 @@ class o extends r {
43
43
  return [
44
44
  ...super.observedAttributes,
45
45
  "direction",
46
- "direction-mobile",
47
- "direction-tablet",
48
- "direction-laptop",
49
- "direction-desktop",
46
+ "direction--mobile",
47
+ "direction--tablet",
48
+ "direction--laptop",
49
+ "direction--desktop",
50
50
  "gap",
51
- "gap-mobile",
52
- "gap-tablet",
53
- "gap-laptop",
54
- "gap-desktop",
51
+ "gap--mobile",
52
+ "gap--tablet",
53
+ "gap--laptop",
54
+ "gap--desktop",
55
55
  "justify-content",
56
- "justify-content-mobile",
57
- "justify-content-tablet",
58
- "justify-content-laptop",
59
- "justify-content-desktop",
56
+ "justify-content--mobile",
57
+ "justify-content--tablet",
58
+ "justify-content--laptop",
59
+ "justify-content--desktop",
60
60
  "align-items",
61
- "align-items-mobile",
62
- "align-items-tablet",
63
- "align-items-laptop",
64
- "align-items-desktop",
61
+ "align-items--mobile",
62
+ "align-items--tablet",
63
+ "align-items--laptop",
64
+ "align-items--desktop",
65
65
  "wrap",
66
66
  "wrap-mobile",
67
67
  "wrap-tablet",
@@ -74,88 +74,97 @@ class o extends r {
74
74
  throw new Error("Invalid direction");
75
75
  switch (t) {
76
76
  case "gap":
77
- this.$el.style.getPropertyValue("--flex-gap-mobile-value") || this.$el.style.setProperty(
78
- "--flex-gap-mobile-value",
77
+ this.$el.style.getPropertyValue("--flex-gap--mobile-value") || this.$el.style.setProperty(
78
+ "--flex-gap--mobile-value",
79
79
  this.getGapCSSVariable(e)
80
- ), this.$el.style.getPropertyValue("--flex-gap-tablet-value") || this.$el.style.setProperty(
81
- "--flex-gap-tablet-value",
80
+ ), this.$el.style.getPropertyValue("--flex-gap--tablet-value") || this.$el.style.setProperty(
81
+ "--flex-gap--tablet-value",
82
82
  this.getGapCSSVariable(e)
83
- ), this.$el.style.getPropertyValue("--flex-gap-laptop-value") || this.$el.style.setProperty(
84
- "--flex-gap-laptop-value",
83
+ ), this.$el.style.getPropertyValue("--flex-gap--laptop-value") || this.$el.style.setProperty(
84
+ "--flex-gap--laptop-value",
85
85
  this.getGapCSSVariable(e)
86
- ), this.$el.style.getPropertyValue("--flex-gap-desktop-value") || this.$el.style.setProperty(
87
- "--flex-gap-desktop-value",
86
+ ), this.$el.style.getPropertyValue("--flex-gap--desktop-value") || this.$el.style.setProperty(
87
+ "--flex-gap--desktop-value",
88
88
  this.getGapCSSVariable(e)
89
89
  );
90
90
  break;
91
- case "gap-mobile":
92
- case "gap-tablet":
93
- case "gap-laptop":
94
- case "gap-desktop":
91
+ case "gap--mobile":
92
+ case "gap--tablet":
93
+ case "gap--laptop":
94
+ case "gap--desktop":
95
95
  this.$el.style.setProperty(
96
96
  `--flex-${t}-value`,
97
97
  this.getGapCSSVariable(e)
98
98
  );
99
99
  break;
100
100
  case "direction":
101
- this.$el.style.getPropertyValue("--flex-direction-mobile-value") || this.$el.style.setProperty("--flex-direction-mobile-value", e), this.$el.style.getPropertyValue("--flex-direction-tablet-value") || this.$el.style.setProperty("--flex-direction-tablet-value", e), this.$el.style.getPropertyValue("--flex-direction-laptop-value") || this.$el.style.setProperty("--flex-direction-laptop-value", e), this.$el.style.getPropertyValue("--flex-direction-desktop-value") || this.$el.style.setProperty(
102
- "--flex-direction-desktop-value",
101
+ this.$el.style.getPropertyValue("--flex-direction--mobile-value") || this.$el.style.setProperty(
102
+ "--flex-direction--mobile-value",
103
+ e
104
+ ), this.$el.style.getPropertyValue("--flex-direction--tablet-value") || this.$el.style.setProperty(
105
+ "--flex-direction--tablet-value",
106
+ e
107
+ ), this.$el.style.getPropertyValue("--flex-direction--laptop-value") || this.$el.style.setProperty(
108
+ "--flex-direction--laptop-value",
109
+ e
110
+ ), this.$el.style.getPropertyValue("--flex-direction--desktop-value") || this.$el.style.setProperty(
111
+ "--flex-direction--desktop-value",
103
112
  e
104
113
  );
105
114
  break;
106
115
  case "justify-content":
107
116
  this.$el.style.getPropertyValue(
108
- "--flex-justify-content-mobile-value"
117
+ "--flex-justify-content--mobile-value"
109
118
  ) || this.$el.style.setProperty(
110
- "--flex-justify-content-mobile-value",
119
+ "--flex-justify-content--mobile-value",
111
120
  e
112
121
  ), this.$el.style.getPropertyValue(
113
- "--flex-justify-content-tablet-value"
122
+ "--flex-justify-content--tablet-value"
114
123
  ) || this.$el.style.setProperty(
115
- "--flex-justify-content-tablet-value",
124
+ "--flex-justify-content--tablet-value",
116
125
  e
117
126
  ), this.$el.style.getPropertyValue(
118
- "--flex-justify-content-laptop-value"
127
+ "--flex-justify-content--laptop-value"
119
128
  ) || this.$el.style.setProperty(
120
- "--flex-justify-content-laptop-value",
129
+ "--flex-justify-content--laptop-value",
121
130
  e
122
131
  ), this.$el.style.getPropertyValue(
123
- "--flex-justify-content-desktop-value"
132
+ "--flex-justify-content--desktop-value"
124
133
  ) || this.$el.style.setProperty(
125
- "--flex-justify-content-desktop-value",
134
+ "--flex-justify-content--desktop-value",
126
135
  e
127
136
  );
128
137
  break;
129
138
  case "align-items":
130
- this.$el.style.getPropertyValue("--flex-align-items-mobile-value") || this.$el.style.setProperty(
131
- "--flex-align-items-mobile-value",
139
+ this.$el.style.getPropertyValue("--flex-align-items--mobile-value") || this.$el.style.setProperty(
140
+ "--flex-align-items--mobile-value",
132
141
  e
133
- ), this.$el.style.getPropertyValue("--flex-align-items-tablet-value") || this.$el.style.setProperty(
134
- "--flex-align-items-tablet-value",
142
+ ), this.$el.style.getPropertyValue("--flex-align-items--tablet-value") || this.$el.style.setProperty(
143
+ "--flex-align-items--tablet-value",
135
144
  e
136
- ), this.$el.style.getPropertyValue("--flex-align-items-laptop-value") || this.$el.style.setProperty(
137
- "--flex-align-items-laptop-value",
145
+ ), this.$el.style.getPropertyValue("--flex-align-items--laptop-value") || this.$el.style.setProperty(
146
+ "--flex-align-items--laptop-value",
138
147
  e
139
- ), this.$el.style.getPropertyValue("--flex-align-items-desktop-value") || this.$el.style.setProperty(
140
- "--flex-align-items-desktop-value",
148
+ ), this.$el.style.getPropertyValue("--flex-align-items--desktop-value") || this.$el.style.setProperty(
149
+ "--flex-align-items--desktop-value",
141
150
  e
142
151
  );
143
152
  break;
144
153
  case "wrap":
145
154
  this.$el.style.getPropertyValue("--flex-wrap-mobile-value") || this.$el.style.setProperty("--flex-wrap-mobile-value", e), this.$el.style.getPropertyValue("--flex-wrap-tablet-value") || this.$el.style.setProperty("--flex-wrap-tablet-value", e), this.$el.style.getPropertyValue("--flex-wrap-laptop-value") || this.$el.style.setProperty("--flex-wrap-laptop-value", e), this.$el.style.getPropertyValue("--flex-wrap-desktop-value") || this.$el.style.setProperty("--flex-wrap-desktop-value", e);
146
155
  break;
147
- case "direction-mobile":
148
- case "direction-tablet":
149
- case "direction-laptop":
150
- case "direction-desktop":
151
- case "justify-content-mobile":
152
- case "justify-content-tablet":
153
- case "justify-content-laptop":
154
- case "justify-content-desktop":
155
- case "align-items-mobile":
156
- case "align-items-tablet":
157
- case "align-items-laptop":
158
- case "align-items-desktop":
156
+ case "direction--mobile":
157
+ case "direction--tablet":
158
+ case "direction--laptop":
159
+ case "direction--desktop":
160
+ case "justify-content--mobile":
161
+ case "justify-content--tablet":
162
+ case "justify-content--laptop":
163
+ case "justify-content--desktop":
164
+ case "align-items--mobile":
165
+ case "align-items--tablet":
166
+ case "align-items--laptop":
167
+ case "align-items--desktop":
159
168
  case "wrap-mobile":
160
169
  case "wrap-tablet":
161
170
  case "wrap-laptop":
@@ -177,28 +186,28 @@ class o extends r {
177
186
  this.setAttribute("direction", t);
178
187
  }
179
188
  get directionMobile() {
180
- return this.getAttribute("direction-mobile");
189
+ return this.getAttribute("direction--mobile");
181
190
  }
182
191
  set directionMobile(t) {
183
- this.setAttribute("direction-mobile", t);
192
+ this.setAttribute("direction--mobile", t);
184
193
  }
185
194
  get directionTablet() {
186
- return this.getAttribute("direction-tablet");
195
+ return this.getAttribute("direction--tablet");
187
196
  }
188
197
  set directionTablet(t) {
189
- this.setAttribute("direction-tablet", t);
198
+ this.setAttribute("direction--tablet", t);
190
199
  }
191
200
  get directionLaptop() {
192
- return this.getAttribute("direction-laptop");
201
+ return this.getAttribute("direction--laptop");
193
202
  }
194
203
  set directionLaptop(t) {
195
- this.setAttribute("direction-laptop", t);
204
+ this.setAttribute("direction--laptop", t);
196
205
  }
197
206
  get directionDesktop() {
198
- return this.getAttribute("direction-desktop");
207
+ return this.getAttribute("direction--desktop");
199
208
  }
200
209
  set directionDesktop(t) {
201
- this.setAttribute("direction-desktop", t);
210
+ this.setAttribute("direction--desktop", t);
202
211
  }
203
212
  get gap() {
204
213
  return this.getAttribute("gap");
@@ -207,22 +216,22 @@ class o extends r {
207
216
  this.setAttribute("gap", t);
208
217
  }
209
218
  get gapMobile() {
210
- return this.getAttribute("gap-mobile");
219
+ return this.getAttribute("gap--mobile");
211
220
  }
212
221
  set gapMobile(t) {
213
- this.setAttribute("gap-mobile", t);
222
+ this.setAttribute("gap--mobile", t);
214
223
  }
215
224
  get gapTablet() {
216
- return this.getAttribute("gap-tablet");
225
+ return this.getAttribute("gap--tablet");
217
226
  }
218
227
  set gapTablet(t) {
219
- this.setAttribute("gap-tablet", t);
228
+ this.setAttribute("gap--tablet", t);
220
229
  }
221
230
  get gapLaptop() {
222
- return this.getAttribute("gap-laptop");
231
+ return this.getAttribute("gap--laptop");
223
232
  }
224
233
  set gapLaptop(t) {
225
- this.setAttribute("gap-laptop", t);
234
+ this.setAttribute("gap--laptop", t);
226
235
  }
227
236
  get justifyContent() {
228
237
  return this.getAttribute("justify-content");
@@ -231,28 +240,28 @@ class o extends r {
231
240
  this.setAttribute("justify-content", t);
232
241
  }
233
242
  get justifyContentMobile() {
234
- return this.getAttribute("justify-content-mobile");
243
+ return this.getAttribute("justify-content--mobile");
235
244
  }
236
245
  set justifyContentMobile(t) {
237
- this.setAttribute("justify-content-mobile", t);
246
+ this.setAttribute("justify-content--mobile", t);
238
247
  }
239
248
  get justifyContentTablet() {
240
- return this.getAttribute("justify-content-tablet");
249
+ return this.getAttribute("justify-content--tablet");
241
250
  }
242
251
  set justifyContentTablet(t) {
243
- this.setAttribute("justify-content-tablet", t);
252
+ this.setAttribute("justify-content--tablet", t);
244
253
  }
245
254
  get justifyContentLaptop() {
246
- return this.getAttribute("justify-content-laptop");
255
+ return this.getAttribute("justify-content--laptop");
247
256
  }
248
257
  set justifyContentLaptop(t) {
249
- this.setAttribute("justify-content-laptop", t);
258
+ this.setAttribute("justify-content--laptop", t);
250
259
  }
251
260
  get justifyContentDesktop() {
252
- return this.getAttribute("justify-content-desktop");
261
+ return this.getAttribute("justify-content--desktop");
253
262
  }
254
263
  set justifyContentDesktop(t) {
255
- this.setAttribute("justify-content-desktop", t);
264
+ this.setAttribute("justify-content--desktop", t);
256
265
  }
257
266
  get alignItems() {
258
267
  return this.getAttribute("align-items");
@@ -261,28 +270,28 @@ class o extends r {
261
270
  this.setAttribute("align-items", t);
262
271
  }
263
272
  get alignItemsMobile() {
264
- return this.getAttribute("align-items-mobile");
273
+ return this.getAttribute("align-items--mobile");
265
274
  }
266
275
  set alignItemsMobile(t) {
267
- this.setAttribute("align-items-mobile", t);
276
+ this.setAttribute("align-items--mobile", t);
268
277
  }
269
278
  get alignItemsTablet() {
270
- return this.getAttribute("align-items-tablet");
279
+ return this.getAttribute("align-items--tablet");
271
280
  }
272
281
  set alignItemsTablet(t) {
273
- this.setAttribute("align-items-tablet", t);
282
+ this.setAttribute("align-items--tablet", t);
274
283
  }
275
284
  get alignItemsLaptop() {
276
- return this.getAttribute("align-items-laptop");
285
+ return this.getAttribute("align-items--laptop");
277
286
  }
278
287
  set alignItemsLaptop(t) {
279
- this.setAttribute("align-items-laptop", t);
288
+ this.setAttribute("align-items--laptop", t);
280
289
  }
281
290
  get alignItemsDesktop() {
282
- return this.getAttribute("align-items-desktop");
291
+ return this.getAttribute("align-items--desktop");
283
292
  }
284
293
  set alignItemsDesktop(t) {
285
- this.setAttribute("align-items-desktop", t);
294
+ this.setAttribute("align-items--desktop", t);
286
295
  }
287
296
  get wrap() {
288
297
  return this.getAttribute("wrap");
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-layout",
3
- "version": "1.1.0-alpha.4",
3
+ "version": "1.1.0-alpha.6",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "exports": {
@@ -24,7 +24,7 @@
24
24
  "publishConfig": {
25
25
  "access": "public"
26
26
  },
27
- "gitHead": "ed8a4de0e426c1a90028306fc874cf3409db4459",
27
+ "gitHead": "15a3f7932429caa1756aee628a5d57f95a9e4282",
28
28
  "lerna": {
29
29
  "command": {
30
30
  "publish": {