@everymatrix/ui-skeleton 1.69.0 → 1.69.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 (22) hide show
  1. package/dist/cjs/index.cjs.js +1 -1
  2. package/dist/cjs/loader.cjs.js +1 -1
  3. package/dist/cjs/ui-skeleton-282391af.js +179 -0
  4. package/dist/cjs/ui-skeleton.cjs.entry.js +1 -1
  5. package/dist/cjs/ui-skeleton.cjs.js +1 -1
  6. package/dist/collection/components/ui-skeleton/ui-skeleton.css +8 -16
  7. package/dist/collection/components/ui-skeleton/ui-skeleton.js +114 -148
  8. package/dist/esm/index.js +1 -1
  9. package/dist/esm/loader.js +1 -1
  10. package/dist/esm/ui-skeleton-ae35c6f2.js +177 -0
  11. package/dist/esm/ui-skeleton.entry.js +1 -1
  12. package/dist/esm/ui-skeleton.js +1 -1
  13. package/dist/types/components/ui-skeleton/ui-skeleton.d.ts +7 -17
  14. package/dist/types/components.d.ts +10 -34
  15. package/dist/ui-skeleton/index.esm.js +1 -1
  16. package/dist/ui-skeleton/ui-skeleton-ae35c6f2.js +1 -0
  17. package/dist/ui-skeleton/ui-skeleton.entry.js +1 -1
  18. package/dist/ui-skeleton/ui-skeleton.esm.js +1 -1
  19. package/package.json +1 -1
  20. package/dist/cjs/ui-skeleton-0b101594.js +0 -171
  21. package/dist/esm/ui-skeleton-1cb75d00.js +0 -169
  22. package/dist/ui-skeleton/ui-skeleton-1cb75d00.js +0 -1
package/dist/collection/components/ui-skeleton/ui-skeleton.js CHANGED
@@ -1,26 +1,52 @@
1
1
  import { h, Host } from "@stencil/core";
2
2
  export class UiSkeleton {
3
3
  constructor() {
4
+ this.stylingValue = {
5
+ width: this.handleStylingProps(this.width),
6
+ height: this.handleStylingProps(this.height),
7
+ borderRadius: this.handleStylingProps(this.borderRadius),
8
+ marginBottom: this.handleStylingProps(this.marginBottom),
9
+ marginTop: this.handleStylingProps(this.marginTop),
10
+ marginLeft: this.handleStylingProps(this.marginLeft),
11
+ marginRight: this.handleStylingProps(this.marginRight),
12
+ size: this.handleStylingProps(this.size)
13
+ };
4
14
  this.structure = undefined;
5
- this.width = undefined;
6
- this.height = undefined;
7
- this.borderRadius = undefined;
8
- this.marginBottom = undefined;
9
- this.marginTop = undefined;
10
- this.marginLeft = undefined;
11
- this.marginRight = undefined;
15
+ this.width = 'unset';
16
+ this.height = 'unset';
17
+ this.borderRadius = 'unset';
18
+ this.marginBottom = 'unset';
19
+ this.marginTop = 'unset';
20
+ this.marginLeft = 'unset';
21
+ this.marginRight = 'unset';
12
22
  this.animation = true;
13
- this.rows = undefined;
14
- this.size = undefined;
15
- this.color = undefined;
16
- this.primaryColor = undefined;
17
- this.secondaryColor = undefined;
23
+ this.rows = 0;
24
+ this.size = '100%';
18
25
  }
19
26
  handleStructureChange(newValue, oldValue) {
20
27
  if (oldValue !== newValue) {
21
28
  this.handleStructure(newValue);
22
29
  }
23
30
  }
31
+ handleStylingProps(value) {
32
+ switch (typeof value) {
33
+ case 'number':
34
+ return value === 0 ? 0 : `${value}px`;
35
+ case 'undefined':
36
+ return 'unset';
37
+ case 'string':
38
+ if (['auto', 'unset', 'none', 'inherit', 'initial'].includes(value) ||
39
+ value.endsWith('px') ||
40
+ value.endsWith('%')) {
41
+ return value;
42
+ }
43
+ else {
44
+ return 'unset';
45
+ }
46
+ default:
47
+ return 'unset';
48
+ }
49
+ }
24
50
  handleStructure(structure) {
25
51
  switch (structure) {
26
52
  case 'logo':
@@ -40,22 +66,22 @@ export class UiSkeleton {
40
66
  }
41
67
  }
42
68
  renderLogo() {
43
- return (h("div", { class: "SkeletonContainer" }, h("div", { class: "Logo " + (this.animation ? 'Skeleton' : '') })));
69
+ return (h("div", { class: "SkeletonContainer" }, h("div", { class: 'Logo ' + (this.animation ? 'Skeleton' : '') })));
44
70
  }
45
71
  renderImage() {
46
- return (h("div", { class: "Image " + (this.animation ? 'Skeleton' : '') }));
72
+ return h("div", { class: 'Image ' + (this.animation ? 'Skeleton' : '') });
47
73
  }
48
74
  renderTitle() {
49
- return (h("div", { class: "SkeletonContainer" }, h("div", { class: "Title " + (this.animation ? 'Skeleton' : '') })));
75
+ return (h("div", { class: "SkeletonContainer" }, h("div", { class: 'Title ' + (this.animation ? 'Skeleton' : '') })));
50
76
  }
51
77
  renderText() {
52
- return (h("div", { class: "SkeletonContainer" }, Array.from({ length: this.rows > 0 ? this.rows : 1 }).map((_, index) => (h("div", { key: index, class: "Text " + (this.animation ? 'Skeleton' : '') })))));
78
+ return (h("div", { class: "SkeletonContainer" }, Array.from({ length: this.rows > 0 ? this.rows : 1 }).map((_, index) => (h("div", { key: index, class: 'Text ' + (this.animation ? 'Skeleton' : '') })))));
53
79
  }
54
80
  renderRectangle() {
55
- return (h("div", { class: "SkeletonContainer" }, h("div", { class: "Rectangle " + (this.animation ? 'Skeleton' : '') })));
81
+ return (h("div", { class: "SkeletonContainer" }, h("div", { class: 'Rectangle ' + (this.animation ? 'Skeleton' : '') })));
56
82
  }
57
83
  renderCircle() {
58
- return (h("div", { class: "SkeletonContainer" }, h("div", { class: "Circle " + (this.animation ? 'Skeleton' : '') })));
84
+ return (h("div", { class: "SkeletonContainer" }, h("div", { class: 'Circle ' + (this.animation ? 'Skeleton' : '') })));
59
85
  }
60
86
  render() {
61
87
  let styleBlock = '';
@@ -63,97 +89,79 @@ export class UiSkeleton {
63
89
  case 'logo':
64
90
  styleBlock = `
65
91
  :host {
66
- --emw-skeleton-logo-width: ${this.width};
67
- --emw-skeleton-logo-height: ${this.height};
68
- --emw-skeleton-logo-border-radius: ${this.borderRadius}px;
69
- --emw-skeleton-logo-margin-bottom: ${this.marginBottom}px;
70
- --emw-skeleton-logo-margin-top: ${this.marginTop}px;
71
- --emw-skeleton-logo-margin-left: ${this.marginLeft}px;
72
- --emw-skeleton-logo-margin-right: ${this.marginRight}px;
73
- --emw-skeleton-logo-background: ${this.color};
74
- --emw-skeleton-primary-color: ${this.primaryColor};
75
- --emw-skeleton-secondary-color: ${this.secondaryColor};
92
+ --emw-skeleton-logo-width: ${this.stylingValue.width};
93
+ --emw-skeleton-logo-height: ${this.stylingValue.height};
94
+ --emw-skeleton-logo-border-radius: ${this.stylingValue.borderRadius};
95
+ --emw-skeleton-logo-margin-bottom: ${this.stylingValue.marginBottom};
96
+ --emw-skeleton-logo-margin-top: ${this.stylingValue.marginTop};
97
+ --emw-skeleton-logo-margin-left: ${this.stylingValue.marginLeft};
98
+ --emw-skeleton-logo-margin-right: ${this.stylingValue.marginRight};
76
99
  }
77
100
  `;
78
101
  break;
79
102
  case 'image':
80
103
  styleBlock = `
81
104
  :host {
82
- --emw-skeleton-image-width: ${this.width};
83
- --emw-skeleton-image-height: ${this.height};
84
- --emw-skeleton-image-border-radius: ${this.borderRadius}px;
85
- --emw-skeleton-image-margin-bottom: ${this.marginBottom}px;
86
- --emw-skeleton-image-margin-top: ${this.marginTop}px;
87
- --emw-skeleton-image-margin-left: ${this.marginLeft}px;
88
- --emw-skeleton-image-margin-right: ${this.marginRight}px;
89
- --emw-skeleton-image-background: ${this.color};
90
- --emw-skeleton-primary-color: ${this.primaryColor};
91
- --emw-skeleton-secondary-color: ${this.secondaryColor};
105
+ --emw-skeleton-image-width: ${this.stylingValue.width};
106
+ --emw-skeleton-image-height: ${this.stylingValue.height};
107
+ --emw-skeleton-image-border-radius: ${this.stylingValue.borderRadius};
108
+ --emw-skeleton-image-margin-bottom: ${this.stylingValue.marginBottom};
109
+ --emw-skeleton-image-margin-top: ${this.stylingValue.marginTop};
110
+ --emw-skeleton-image-margin-left: ${this.stylingValue.marginLeft};
111
+ --emw-skeleton-image-margin-right: ${this.stylingValue.marginRight};
92
112
  }
93
113
  `;
94
114
  break;
95
115
  case 'title':
96
116
  styleBlock = `
97
117
  :host {
98
- --emw-skeleton-title-width: ${this.width};
99
- --emw-skeleton-title-height: ${this.height};
100
- --emw-skeleton-title-border-radius: ${this.borderRadius}px;
101
- --emw-skeleton-title-margin-bottom: ${this.marginBottom}px;
102
- --emw-skeleton-title-margin-top: ${this.marginTop}px;
103
- --emw-skeleton-title-margin-left: ${this.marginLeft}px;
104
- --emw-skeleton-title-margin-right: ${this.marginRight}px;
105
- --emw-skeleton-title-background: ${this.color};
106
- --emw-skeleton-primary-color: ${this.primaryColor};
107
- --emw-skeleton-secondary-color: ${this.secondaryColor};
118
+ --emw-skeleton-title-width: ${this.stylingValue.width};
119
+ --emw-skeleton-title-height: ${this.stylingValue.height};
120
+ --emw-skeleton-title-border-radius: ${this.stylingValue.borderRadius};
121
+ --emw-skeleton-title-margin-bottom: ${this.stylingValue.marginBottom};
122
+ --emw-skeleton-title-margin-top: ${this.stylingValue.marginTop};
123
+ --emw-skeleton-title-margin-left: ${this.stylingValue.marginLeft};
124
+ --emw-skeleton-title-margin-right: ${this.stylingValue.marginRight};
108
125
  }
109
126
  `;
110
127
  break;
111
128
  case 'text':
112
129
  styleBlock = `
113
130
  :host {
114
- --emw-skeleton-text-width: ${this.width};
115
- --emw-skeleton-text-height: ${this.height};
116
- --emw-skeleton-text-border-radius: ${this.borderRadius}px;
117
- --emw-skeleton-text-margin-bottom: ${this.marginBottom}px;
118
- --emw-skeleton-text-margin-top: ${this.marginTop}px;
119
- --emw-skeleton-text-margin-left: ${this.marginLeft}px;
120
- --emw-skeleton-text-margin-right: ${this.marginRight}px;
121
- --emw-skeleton-text-background: ${this.color};
122
- --emw-skeleton-primary-color: ${this.primaryColor};
123
- --emw-skeleton-secondary-color: ${this.secondaryColor};
131
+ --emw-skeleton-text-width: ${this.stylingValue.width};
132
+ --emw-skeleton-text-height: ${this.stylingValue.height};
133
+ --emw-skeleton-text-border-radius: ${this.stylingValue.borderRadius};
134
+ --emw-skeleton-text-margin-bottom: ${this.stylingValue.marginBottom};
135
+ --emw-skeleton-text-margin-top: ${this.stylingValue.marginTop};
136
+ --emw-skeleton-text-margin-left: ${this.stylingValue.marginLeft};
137
+ --emw-skeleton-text-margin-right: ${this.stylingValue.marginRight};
124
138
  }
125
139
  `;
126
140
  break;
127
141
  case 'rectangle':
128
142
  styleBlock = `
129
143
  :host {
130
- --emw-skeleton-rectangle-width: ${this.width};
131
- --emw-skeleton-rectangle-height: ${this.height};
132
- --emw-skeleton-rectangle-border-radius: ${this.borderRadius}px;
133
- --emw-skeleton-rectangle-margin-bottom: ${this.marginBottom}px;
134
- --emw-skeleton-rectangle-margin-top: ${this.marginTop}px;
135
- --emw-skeleton-rectangle-margin-left: ${this.marginLeft}px;
136
- --emw-skeleton-rectangle-margin-right: ${this.marginRight}px;
137
- --emw-skeleton-rectangle-background: ${this.color};
138
- --emw-skeleton-primary-color: ${this.primaryColor};
139
- --emw-skeleton-secondary-color: ${this.secondaryColor};
144
+ --emw-skeleton-rectangle-width: ${this.stylingValue.width};
145
+ --emw-skeleton-rectangle-height: ${this.stylingValue.height};
146
+ --emw-skeleton-rectangle-border-radius: ${this.stylingValue.borderRadius};
147
+ --emw-skeleton-rectangle-margin-bottom: ${this.stylingValue.marginBottom};
148
+ --emw-skeleton-rectangle-margin-top: ${this.stylingValue.marginTop};
149
+ --emw-skeleton-rectangle-margin-left: ${this.stylingValue.marginLeft};
150
+ --emw-skeleton-rectangle-margin-right: ${this.stylingValue.marginRight};
140
151
  }
141
152
  `;
142
153
  break;
143
154
  case 'circle':
144
155
  styleBlock = `
145
156
  :host {
146
- --emw-skeleton-circle-size: ${this.size};
147
- --emw-skeleton-circle-background: ${this.color};
148
- --emw-skeleton-primary-color: ${this.primaryColor};
149
- --emw-skeleton-secondary-color: ${this.secondaryColor};
157
+ --emw-skeleton-circle-size: ${this.stylingValue.size};
150
158
  }
151
159
  `;
152
160
  break;
153
161
  default:
154
162
  styleBlock = '';
155
163
  }
156
- return (h(Host, { key: '3bb792a149db7fe732d5cbfa092cdb4d6ca0689e' }, h("style", { key: 'a4607599b60659f385ae2660513e38b383739674' }, styleBlock), this.handleStructure(this.structure)));
164
+ return (h(Host, { key: 'e6b885bfd985ce7663d990756fe9101e25eb97f0' }, h("style", { key: '06ae24c7bb74f4dacfc12ae58085333f9dc89da5' }, styleBlock), this.handleStructure(this.structure)));
157
165
  }
158
166
  static get is() { return "ui-skeleton"; }
159
167
  static get originalStyleUrls() {
@@ -200,7 +208,8 @@ export class UiSkeleton {
200
208
  "text": "Width of the element - it can either be a value in px (150px) or in percentage (100%)"
201
209
  },
202
210
  "attribute": "width",
203
- "reflect": false
211
+ "reflect": false,
212
+ "defaultValue": "'unset'"
204
213
  },
205
214
  "height": {
206
215
  "type": "string",
@@ -217,14 +226,15 @@ export class UiSkeleton {
217
226
  "text": "Height of the element - it can either be a value in px (150px) or in percentage (100%)"
218
227
  },
219
228
  "attribute": "height",
220
- "reflect": false
229
+ "reflect": false,
230
+ "defaultValue": "'unset'"
221
231
  },
222
232
  "borderRadius": {
223
- "type": "number",
233
+ "type": "any",
224
234
  "mutable": false,
225
235
  "complexType": {
226
- "original": "number",
227
- "resolved": "number",
236
+ "original": "number | string",
237
+ "resolved": "number | string",
228
238
  "references": {}
229
239
  },
230
240
  "required": false,
@@ -234,14 +244,15 @@ export class UiSkeleton {
234
244
  "text": "The border radius of the element"
235
245
  },
236
246
  "attribute": "border-radius",
237
- "reflect": false
247
+ "reflect": false,
248
+ "defaultValue": "'unset'"
238
249
  },
239
250
  "marginBottom": {
240
- "type": "number",
251
+ "type": "any",
241
252
  "mutable": false,
242
253
  "complexType": {
243
- "original": "number",
244
- "resolved": "number",
254
+ "original": "number | string",
255
+ "resolved": "number | string",
245
256
  "references": {}
246
257
  },
247
258
  "required": false,
@@ -251,14 +262,15 @@ export class UiSkeleton {
251
262
  "text": "Margin bottom for the element"
252
263
  },
253
264
  "attribute": "margin-bottom",
254
- "reflect": false
265
+ "reflect": false,
266
+ "defaultValue": "'unset'"
255
267
  },
256
268
  "marginTop": {
257
- "type": "number",
269
+ "type": "any",
258
270
  "mutable": false,
259
271
  "complexType": {
260
- "original": "number",
261
- "resolved": "number",
272
+ "original": "number | string",
273
+ "resolved": "number | string",
262
274
  "references": {}
263
275
  },
264
276
  "required": false,
@@ -268,14 +280,15 @@ export class UiSkeleton {
268
280
  "text": "Margin top for the element"
269
281
  },
270
282
  "attribute": "margin-top",
271
- "reflect": false
283
+ "reflect": false,
284
+ "defaultValue": "'unset'"
272
285
  },
273
286
  "marginLeft": {
274
- "type": "number",
287
+ "type": "any",
275
288
  "mutable": false,
276
289
  "complexType": {
277
- "original": "number",
278
- "resolved": "number",
290
+ "original": "number | string",
291
+ "resolved": "number | string",
279
292
  "references": {}
280
293
  },
281
294
  "required": false,
@@ -285,14 +298,15 @@ export class UiSkeleton {
285
298
  "text": "Margin left for the element"
286
299
  },
287
300
  "attribute": "margin-left",
288
- "reflect": false
301
+ "reflect": false,
302
+ "defaultValue": "'unset'"
289
303
  },
290
304
  "marginRight": {
291
- "type": "number",
305
+ "type": "any",
292
306
  "mutable": false,
293
307
  "complexType": {
294
- "original": "number",
295
- "resolved": "number",
308
+ "original": "number | string",
309
+ "resolved": "number | string",
296
310
  "references": {}
297
311
  },
298
312
  "required": false,
@@ -302,7 +316,8 @@ export class UiSkeleton {
302
316
  "text": "Margin right for the element"
303
317
  },
304
318
  "attribute": "margin-right",
305
- "reflect": false
319
+ "reflect": false,
320
+ "defaultValue": "'unset'"
306
321
  },
307
322
  "animation": {
308
323
  "type": "boolean",
@@ -337,7 +352,8 @@ export class UiSkeleton {
337
352
  "text": "Number of rows displayed - only for `text`"
338
353
  },
339
354
  "attribute": "rows",
340
- "reflect": false
355
+ "reflect": false,
356
+ "defaultValue": "0"
341
357
  },
342
358
  "size": {
343
359
  "type": "string",
@@ -354,58 +370,8 @@ export class UiSkeleton {
354
370
  "text": "The size of the circle - only for `circle` - it can either be a value in px (150px) or in percentage (100%)"
355
371
  },
356
372
  "attribute": "size",
357
- "reflect": false
358
- },
359
- "color": {
360
- "type": "string",
361
- "mutable": false,
362
- "complexType": {
363
- "original": "string",
364
- "resolved": "string",
365
- "references": {}
366
- },
367
- "required": false,
368
- "optional": false,
369
- "docs": {
370
- "tags": [],
371
- "text": "Color of the skeleton when animation is `off` - hexa value (e.g. #c2c2c2)"
372
- },
373
- "attribute": "color",
374
- "reflect": false
375
- },
376
- "primaryColor": {
377
- "type": "string",
378
- "mutable": false,
379
- "complexType": {
380
- "original": "string",
381
- "resolved": "string",
382
- "references": {}
383
- },
384
- "required": false,
385
- "optional": false,
386
- "docs": {
387
- "tags": [],
388
- "text": "Primary color of the skeleton when animation is `on` - hexa value (e.g. #c2c2c2)"
389
- },
390
- "attribute": "primary-color",
391
- "reflect": false
392
- },
393
- "secondaryColor": {
394
- "type": "string",
395
- "mutable": false,
396
- "complexType": {
397
- "original": "string",
398
- "resolved": "string",
399
- "references": {}
400
- },
401
- "required": false,
402
- "optional": false,
403
- "docs": {
404
- "tags": [],
405
- "text": "Secondary color of the skeleton when animation is `on` - hexa value (e.g. #ffffff)"
406
- },
407
- "attribute": "secondary-color",
408
- "reflect": false
373
+ "reflect": false,
374
+ "defaultValue": "'100%'"
409
375
  }
410
376
  };
411
377
  }
package/dist/esm/index.js CHANGED
@@ -1,2 +1,2 @@
1
- export { U as UiSkeleton } from './ui-skeleton-1cb75d00.js';
1
+ export { U as UiSkeleton } from './ui-skeleton-ae35c6f2.js';
2
2
  import './index-b2193545.js';
package/dist/esm/loader.js CHANGED
@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-0f993ce5.js';
5
5
  const defineCustomElements = async (win, options) => {
6
6
  if (typeof window === 'undefined') return undefined;
7
7
  await globalScripts();
8
- return bootstrapLazy([["ui-skeleton",[[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[2,"border-radius"],"marginBottom":[2,"margin-bottom"],"marginTop":[2,"margin-top"],"marginLeft":[2,"margin-left"],"marginRight":[2,"margin-right"],"animation":[4],"rows":[2],"size":[1],"color":[1],"primaryColor":[1,"primary-color"],"secondaryColor":[1,"secondary-color"]},null,{"structure":["handleStructureChange"]}]]]], options);
8
+ return bootstrapLazy([["ui-skeleton",[[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[8,"border-radius"],"marginBottom":[8,"margin-bottom"],"marginTop":[8,"margin-top"],"marginLeft":[8,"margin-left"],"marginRight":[8,"margin-right"],"animation":[4],"rows":[2],"size":[1]},null,{"structure":["handleStructureChange"]}]]]], options);
9
9
  };
10
10
 
11
11
  export { defineCustomElements };
package/dist/esm/ui-skeleton-ae35c6f2.js ADDED
@@ -0,0 +1,177 @@
1
+ import { r as registerInstance, h, H as Host } from './index-b2193545.js';
2
+
3
+ const uiSkeletonCss = ":host{display:block}.Skeleton{animation:skeleton-loading 1s linear infinite alternate}.Rectangle{background-color:var(--emw-skeleton-rectangle-background, #c2c2c2);width:var(--emw-skeleton-rectangle-width, 400px);height:var(--emw-skeleton-rectangle-height, 200px);border-radius:var(--emw-skeleton-rectangle-border-radius, 10px)}.Circle{background-color:var(--emw-skeleton-circle-background, #c2c2c2);width:var(--emw-skeleton-circle-size, 400px);height:var(--emw-skeleton-circle-size, 400px);border-radius:50%}.Text{background-color:var(--emw-skeleton-text-background, #c2c2c2);width:var(--emw-skeleton-text-width, 500px);height:var(--emw-skeleton-text-height, 20px);border-radius:var(--emw-skeleton-text-border-radius, 10px);margin-bottom:var(--emw-skeleton-text-margin-bottom, 5px)}.Text:last-child{width:calc(var(--emw-skeleton-text-width, 400px) - 100px)}.Title{background-color:var(--emw-skeleton-title-background, #c2c2c2);width:var(--emw-skeleton-title-width, 300px);height:var(--emw-skeleton-title-height, 30px);border-radius:var(--emw-skeleton-title-border-radius, 10px);margin-bottom:var(--emw-skeleton-title-margin-bottom, 5px)}.Image{background-color:var(--emw-skeleton-image-background, #c2c2c2);width:var(--emw-skeleton-image-width, 100%);height:var(--emw-skeleton-image-height, 100%);border-radius:var(--emw-skeleton-image-border-radius, unset)}.Logo{background-color:var(--emw-skeleton-logo-background, #c2c2c2);width:var(--emw-skeleton-logo-width, 120px);height:var(--emw-skeleton-logo-height, 75px);border-radius:var(--emw-skeleton-logo-border-radius, 10px)}@keyframes skeleton-loading{0%{background-color:var(--emw-skeleton-primary-color, #e0e0e0)}100%{background-color:var(--emw-skeleton-secondary-color, #f0f0f0)}}";
4
+ const UiSkeletonStyle0 = uiSkeletonCss;
5
+
6
+ const UiSkeleton = class {
7
+ constructor(hostRef) {
8
+ registerInstance(this, hostRef);
9
+ this.stylingValue = {
10
+ width: this.handleStylingProps(this.width),
11
+ height: this.handleStylingProps(this.height),
12
+ borderRadius: this.handleStylingProps(this.borderRadius),
13
+ marginBottom: this.handleStylingProps(this.marginBottom),
14
+ marginTop: this.handleStylingProps(this.marginTop),
15
+ marginLeft: this.handleStylingProps(this.marginLeft),
16
+ marginRight: this.handleStylingProps(this.marginRight),
17
+ size: this.handleStylingProps(this.size)
18
+ };
19
+ this.structure = undefined;
20
+ this.width = 'unset';
21
+ this.height = 'unset';
22
+ this.borderRadius = 'unset';
23
+ this.marginBottom = 'unset';
24
+ this.marginTop = 'unset';
25
+ this.marginLeft = 'unset';
26
+ this.marginRight = 'unset';
27
+ this.animation = true;
28
+ this.rows = 0;
29
+ this.size = '100%';
30
+ }
31
+ handleStructureChange(newValue, oldValue) {
32
+ if (oldValue !== newValue) {
33
+ this.handleStructure(newValue);
34
+ }
35
+ }
36
+ handleStylingProps(value) {
37
+ switch (typeof value) {
38
+ case 'number':
39
+ return value === 0 ? 0 : `${value}px`;
40
+ case 'undefined':
41
+ return 'unset';
42
+ case 'string':
43
+ if (['auto', 'unset', 'none', 'inherit', 'initial'].includes(value) ||
44
+ value.endsWith('px') ||
45
+ value.endsWith('%')) {
46
+ return value;
47
+ }
48
+ else {
49
+ return 'unset';
50
+ }
51
+ default:
52
+ return 'unset';
53
+ }
54
+ }
55
+ handleStructure(structure) {
56
+ switch (structure) {
57
+ case 'logo':
58
+ return this.renderLogo();
59
+ case 'image':
60
+ return this.renderImage();
61
+ case 'title':
62
+ return this.renderTitle();
63
+ case 'text':
64
+ return this.renderText();
65
+ case 'rectangle':
66
+ return this.renderRectangle();
67
+ case 'circle':
68
+ return this.renderCircle();
69
+ default:
70
+ return null;
71
+ }
72
+ }
73
+ renderLogo() {
74
+ return (h("div", { class: "SkeletonContainer" }, h("div", { class: 'Logo ' + (this.animation ? 'Skeleton' : '') })));
75
+ }
76
+ renderImage() {
77
+ return h("div", { class: 'Image ' + (this.animation ? 'Skeleton' : '') });
78
+ }
79
+ renderTitle() {
80
+ return (h("div", { class: "SkeletonContainer" }, h("div", { class: 'Title ' + (this.animation ? 'Skeleton' : '') })));
81
+ }
82
+ renderText() {
83
+ return (h("div", { class: "SkeletonContainer" }, Array.from({ length: this.rows > 0 ? this.rows : 1 }).map((_, index) => (h("div", { key: index, class: 'Text ' + (this.animation ? 'Skeleton' : '') })))));
84
+ }
85
+ renderRectangle() {
86
+ return (h("div", { class: "SkeletonContainer" }, h("div", { class: 'Rectangle ' + (this.animation ? 'Skeleton' : '') })));
87
+ }
88
+ renderCircle() {
89
+ return (h("div", { class: "SkeletonContainer" }, h("div", { class: 'Circle ' + (this.animation ? 'Skeleton' : '') })));
90
+ }
91
+ render() {
92
+ let styleBlock = '';
93
+ switch (this.structure) {
94
+ case 'logo':
95
+ styleBlock = `
96
+ :host {
97
+ --emw-skeleton-logo-width: ${this.stylingValue.width};
98
+ --emw-skeleton-logo-height: ${this.stylingValue.height};
99
+ --emw-skeleton-logo-border-radius: ${this.stylingValue.borderRadius};
100
+ --emw-skeleton-logo-margin-bottom: ${this.stylingValue.marginBottom};
101
+ --emw-skeleton-logo-margin-top: ${this.stylingValue.marginTop};
102
+ --emw-skeleton-logo-margin-left: ${this.stylingValue.marginLeft};
103
+ --emw-skeleton-logo-margin-right: ${this.stylingValue.marginRight};
104
+ }
105
+ `;
106
+ break;
107
+ case 'image':
108
+ styleBlock = `
109
+ :host {
110
+ --emw-skeleton-image-width: ${this.stylingValue.width};
111
+ --emw-skeleton-image-height: ${this.stylingValue.height};
112
+ --emw-skeleton-image-border-radius: ${this.stylingValue.borderRadius};
113
+ --emw-skeleton-image-margin-bottom: ${this.stylingValue.marginBottom};
114
+ --emw-skeleton-image-margin-top: ${this.stylingValue.marginTop};
115
+ --emw-skeleton-image-margin-left: ${this.stylingValue.marginLeft};
116
+ --emw-skeleton-image-margin-right: ${this.stylingValue.marginRight};
117
+ }
118
+ `;
119
+ break;
120
+ case 'title':
121
+ styleBlock = `
122
+ :host {
123
+ --emw-skeleton-title-width: ${this.stylingValue.width};
124
+ --emw-skeleton-title-height: ${this.stylingValue.height};
125
+ --emw-skeleton-title-border-radius: ${this.stylingValue.borderRadius};
126
+ --emw-skeleton-title-margin-bottom: ${this.stylingValue.marginBottom};
127
+ --emw-skeleton-title-margin-top: ${this.stylingValue.marginTop};
128
+ --emw-skeleton-title-margin-left: ${this.stylingValue.marginLeft};
129
+ --emw-skeleton-title-margin-right: ${this.stylingValue.marginRight};
130
+ }
131
+ `;
132
+ break;
133
+ case 'text':
134
+ styleBlock = `
135
+ :host {
136
+ --emw-skeleton-text-width: ${this.stylingValue.width};
137
+ --emw-skeleton-text-height: ${this.stylingValue.height};
138
+ --emw-skeleton-text-border-radius: ${this.stylingValue.borderRadius};
139
+ --emw-skeleton-text-margin-bottom: ${this.stylingValue.marginBottom};
140
+ --emw-skeleton-text-margin-top: ${this.stylingValue.marginTop};
141
+ --emw-skeleton-text-margin-left: ${this.stylingValue.marginLeft};
142
+ --emw-skeleton-text-margin-right: ${this.stylingValue.marginRight};
143
+ }
144
+ `;
145
+ break;
146
+ case 'rectangle':
147
+ styleBlock = `
148
+ :host {
149
+ --emw-skeleton-rectangle-width: ${this.stylingValue.width};
150
+ --emw-skeleton-rectangle-height: ${this.stylingValue.height};
151
+ --emw-skeleton-rectangle-border-radius: ${this.stylingValue.borderRadius};
152
+ --emw-skeleton-rectangle-margin-bottom: ${this.stylingValue.marginBottom};
153
+ --emw-skeleton-rectangle-margin-top: ${this.stylingValue.marginTop};
154
+ --emw-skeleton-rectangle-margin-left: ${this.stylingValue.marginLeft};
155
+ --emw-skeleton-rectangle-margin-right: ${this.stylingValue.marginRight};
156
+ }
157
+ `;
158
+ break;
159
+ case 'circle':
160
+ styleBlock = `
161
+ :host {
162
+ --emw-skeleton-circle-size: ${this.stylingValue.size};
163
+ }
164
+ `;
165
+ break;
166
+ default:
167
+ styleBlock = '';
168
+ }
169
+ return (h(Host, { key: 'e6b885bfd985ce7663d990756fe9101e25eb97f0' }, h("style", { key: '06ae24c7bb74f4dacfc12ae58085333f9dc89da5' }, styleBlock), this.handleStructure(this.structure)));
170
+ }
171
+ static get watchers() { return {
172
+ "structure": ["handleStructureChange"]
173
+ }; }
174
+ };
175
+ UiSkeleton.style = UiSkeletonStyle0;
176
+
177
+ export { UiSkeleton as U };
package/dist/esm/ui-skeleton.entry.js CHANGED
@@ -1,2 +1,2 @@
1
- export { U as ui_skeleton } from './ui-skeleton-1cb75d00.js';
1
+ export { U as ui_skeleton } from './ui-skeleton-ae35c6f2.js';
2
2
  import './index-b2193545.js';
package/dist/esm/ui-skeleton.js CHANGED
@@ -16,5 +16,5 @@ var patchBrowser = () => {
16
16
 
17
17
  patchBrowser().then(async (options) => {
18
18
  await globalScripts();
19
- return bootstrapLazy([["ui-skeleton",[[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[2,"border-radius"],"marginBottom":[2,"margin-bottom"],"marginTop":[2,"margin-top"],"marginLeft":[2,"margin-left"],"marginRight":[2,"margin-right"],"animation":[4],"rows":[2],"size":[1],"color":[1],"primaryColor":[1,"primary-color"],"secondaryColor":[1,"secondary-color"]},null,{"structure":["handleStructureChange"]}]]]], options);
19
+ return bootstrapLazy([["ui-skeleton",[[0,"ui-skeleton",{"structure":[1],"width":[1],"height":[1],"borderRadius":[8,"border-radius"],"marginBottom":[8,"margin-bottom"],"marginTop":[8,"margin-top"],"marginLeft":[8,"margin-left"],"marginRight":[8,"margin-right"],"animation":[4],"rows":[2],"size":[1]},null,{"structure":["handleStructureChange"]}]]]], options);
20
20
  });