@everymatrix/ui-skeleton 1.68.0 → 1.69.2

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 (19) 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-0b101594.js → ui-skeleton-2706b5eb.js} +82 -54
  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.js +121 -81
  7. package/dist/esm/index.js +1 -1
  8. package/dist/esm/loader.js +1 -1
  9. package/dist/esm/{ui-skeleton-1cb75d00.js → ui-skeleton-161699c3.js} +82 -54
  10. package/dist/esm/ui-skeleton.entry.js +1 -1
  11. package/dist/esm/ui-skeleton.js +1 -1
  12. package/dist/types/components/ui-skeleton/ui-skeleton.d.ts +7 -5
  13. package/dist/types/components.d.ts +10 -10
  14. package/dist/ui-skeleton/index.esm.js +1 -1
  15. package/dist/ui-skeleton/ui-skeleton-161699c3.js +1 -0
  16. package/dist/ui-skeleton/ui-skeleton.entry.js +1 -1
  17. package/dist/ui-skeleton/ui-skeleton.esm.js +1 -1
  18. package/package.json +1 -1
  19. package/dist/ui-skeleton/ui-skeleton-1cb75d00.js +0 -1
package/dist/cjs/index.cjs.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const uiSkeleton = require('./ui-skeleton-0b101594.js');
5
+ const uiSkeleton = require('./ui-skeleton-2706b5eb.js');
6
6
  require('./index-946ac65b.js');
7
7
 
8
8
 
package/dist/cjs/loader.cjs.js CHANGED
@@ -8,7 +8,7 @@ const appGlobals = require('./app-globals-3a1e7e63.js');
8
8
  const defineCustomElements = async (win, options) => {
9
9
  if (typeof window === 'undefined') return undefined;
10
10
  await appGlobals.globalScripts();
11
- return index.bootstrapLazy([["ui-skeleton.cjs",[[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);
11
+ return index.bootstrapLazy([["ui-skeleton.cjs",[[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],"color":[1],"primaryColor":[1,"primary-color"],"secondaryColor":[1,"secondary-color"]},null,{"structure":["handleStructureChange"]}]]]], options);
12
12
  };
13
13
 
14
14
  exports.setNonce = index.setNonce;
package/dist/cjs/{ui-skeleton-0b101594.js → ui-skeleton-2706b5eb.js} RENAMED
@@ -8,26 +8,54 @@ const UiSkeletonStyle0 = uiSkeletonCss;
8
8
  const UiSkeleton = class {
9
9
  constructor(hostRef) {
10
10
  index.registerInstance(this, hostRef);
11
+ this.stylingValue = {
12
+ width: this.handleStylingProps(this.width),
13
+ height: this.handleStylingProps(this.height),
14
+ borderRadius: this.handleStylingProps(this.borderRadius),
15
+ marginBottom: this.handleStylingProps(this.marginBottom),
16
+ marginTop: this.handleStylingProps(this.marginTop),
17
+ marginLeft: this.handleStylingProps(this.marginLeft),
18
+ marginRight: this.handleStylingProps(this.marginRight)
19
+ };
11
20
  this.structure = undefined;
12
- this.width = undefined;
13
- this.height = undefined;
14
- this.borderRadius = undefined;
15
- this.marginBottom = undefined;
16
- this.marginTop = undefined;
17
- this.marginLeft = undefined;
18
- this.marginRight = undefined;
21
+ this.width = 'unset';
22
+ this.height = 'unset';
23
+ this.borderRadius = 'unset';
24
+ this.marginBottom = 'unset';
25
+ this.marginTop = 'unset';
26
+ this.marginLeft = 'unset';
27
+ this.marginRight = 'unset';
19
28
  this.animation = true;
20
- this.rows = undefined;
21
- this.size = undefined;
22
- this.color = undefined;
23
- this.primaryColor = undefined;
24
- this.secondaryColor = undefined;
29
+ this.rows = 0;
30
+ this.size = '100%';
31
+ this.color = '#c2c2c2';
32
+ this.primaryColor = '#c2c2c2';
33
+ this.secondaryColor = '#ffffff';
25
34
  }
26
35
  handleStructureChange(newValue, oldValue) {
27
36
  if (oldValue !== newValue) {
28
37
  this.handleStructure(newValue);
29
38
  }
30
39
  }
40
+ handleStylingProps(value) {
41
+ switch (typeof value) {
42
+ case 'number':
43
+ return value === 0 ? 0 : `${value}px`;
44
+ case 'undefined':
45
+ return 'unset';
46
+ case 'string':
47
+ if (['auto', 'unset', 'none', 'inherit', 'initial'].includes(value) ||
48
+ value.endsWith('px') ||
49
+ value.endsWith('%')) {
50
+ return value;
51
+ }
52
+ else {
53
+ return 'unset';
54
+ }
55
+ default:
56
+ return 'unset';
57
+ }
58
+ }
31
59
  handleStructure(structure) {
32
60
  switch (structure) {
33
61
  case 'logo':
@@ -47,22 +75,22 @@ const UiSkeleton = class {
47
75
  }
48
76
  }
49
77
  renderLogo() {
50
- return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: "Logo " + (this.animation ? 'Skeleton' : '') })));
78
+ return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: 'Logo ' + (this.animation ? 'Skeleton' : '') })));
51
79
  }
52
80
  renderImage() {
53
- return (index.h("div", { class: "Image " + (this.animation ? 'Skeleton' : '') }));
81
+ return index.h("div", { class: 'Image ' + (this.animation ? 'Skeleton' : '') });
54
82
  }
55
83
  renderTitle() {
56
- return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: "Title " + (this.animation ? 'Skeleton' : '') })));
84
+ return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: 'Title ' + (this.animation ? 'Skeleton' : '') })));
57
85
  }
58
86
  renderText() {
59
- return (index.h("div", { class: "SkeletonContainer" }, Array.from({ length: this.rows > 0 ? this.rows : 1 }).map((_, index$1) => (index.h("div", { key: index$1, class: "Text " + (this.animation ? 'Skeleton' : '') })))));
87
+ return (index.h("div", { class: "SkeletonContainer" }, Array.from({ length: this.rows > 0 ? this.rows : 1 }).map((_, index$1) => (index.h("div", { key: index$1, class: 'Text ' + (this.animation ? 'Skeleton' : '') })))));
60
88
  }
61
89
  renderRectangle() {
62
- return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: "Rectangle " + (this.animation ? 'Skeleton' : '') })));
90
+ return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: 'Rectangle ' + (this.animation ? 'Skeleton' : '') })));
63
91
  }
64
92
  renderCircle() {
65
- return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: "Circle " + (this.animation ? 'Skeleton' : '') })));
93
+ return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: 'Circle ' + (this.animation ? 'Skeleton' : '') })));
66
94
  }
67
95
  render() {
68
96
  let styleBlock = '';
@@ -70,13 +98,13 @@ const UiSkeleton = class {
70
98
  case 'logo':
71
99
  styleBlock = `
72
100
  :host {
73
- --emw-skeleton-logo-width: ${this.width};
74
- --emw-skeleton-logo-height: ${this.height};
75
- --emw-skeleton-logo-border-radius: ${this.borderRadius}px;
76
- --emw-skeleton-logo-margin-bottom: ${this.marginBottom}px;
77
- --emw-skeleton-logo-margin-top: ${this.marginTop}px;
78
- --emw-skeleton-logo-margin-left: ${this.marginLeft}px;
79
- --emw-skeleton-logo-margin-right: ${this.marginRight}px;
101
+ --emw-skeleton-logo-width: ${this.stylingValue.width};
102
+ --emw-skeleton-logo-height: ${this.stylingValue.height};
103
+ --emw-skeleton-logo-border-radius: ${this.stylingValue.borderRadius};
104
+ --emw-skeleton-logo-margin-bottom: ${this.stylingValue.marginBottom};
105
+ --emw-skeleton-logo-margin-top: ${this.stylingValue.marginTop};
106
+ --emw-skeleton-logo-margin-left: ${this.stylingValue.marginLeft};
107
+ --emw-skeleton-logo-margin-right: ${this.stylingValue.marginRight};
80
108
  --emw-skeleton-logo-background: ${this.color};
81
109
  --emw-skeleton-primary-color: ${this.primaryColor};
82
110
  --emw-skeleton-secondary-color: ${this.secondaryColor};
@@ -86,13 +114,13 @@ const UiSkeleton = class {
86
114
  case 'image':
87
115
  styleBlock = `
88
116
  :host {
89
- --emw-skeleton-image-width: ${this.width};
90
- --emw-skeleton-image-height: ${this.height};
91
- --emw-skeleton-image-border-radius: ${this.borderRadius}px;
92
- --emw-skeleton-image-margin-bottom: ${this.marginBottom}px;
93
- --emw-skeleton-image-margin-top: ${this.marginTop}px;
94
- --emw-skeleton-image-margin-left: ${this.marginLeft}px;
95
- --emw-skeleton-image-margin-right: ${this.marginRight}px;
117
+ --emw-skeleton-image-width: ${this.stylingValue.width};
118
+ --emw-skeleton-image-height: ${this.stylingValue.height};
119
+ --emw-skeleton-image-border-radius: ${this.stylingValue.borderRadius};
120
+ --emw-skeleton-image-margin-bottom: ${this.stylingValue.marginBottom};
121
+ --emw-skeleton-image-margin-top: ${this.stylingValue.marginTop};
122
+ --emw-skeleton-image-margin-left: ${this.stylingValue.marginLeft};
123
+ --emw-skeleton-image-margin-right: ${this.stylingValue.marginRight};
96
124
  --emw-skeleton-image-background: ${this.color};
97
125
  --emw-skeleton-primary-color: ${this.primaryColor};
98
126
  --emw-skeleton-secondary-color: ${this.secondaryColor};
@@ -102,13 +130,13 @@ const UiSkeleton = class {
102
130
  case 'title':
103
131
  styleBlock = `
104
132
  :host {
105
- --emw-skeleton-title-width: ${this.width};
106
- --emw-skeleton-title-height: ${this.height};
107
- --emw-skeleton-title-border-radius: ${this.borderRadius}px;
108
- --emw-skeleton-title-margin-bottom: ${this.marginBottom}px;
109
- --emw-skeleton-title-margin-top: ${this.marginTop}px;
110
- --emw-skeleton-title-margin-left: ${this.marginLeft}px;
111
- --emw-skeleton-title-margin-right: ${this.marginRight}px;
133
+ --emw-skeleton-title-width: ${this.stylingValue.width};
134
+ --emw-skeleton-title-height: ${this.stylingValue.height};
135
+ --emw-skeleton-title-border-radius: ${this.stylingValue.borderRadius};
136
+ --emw-skeleton-title-margin-bottom: ${this.stylingValue.marginBottom};
137
+ --emw-skeleton-title-margin-top: ${this.stylingValue.marginTop};
138
+ --emw-skeleton-title-margin-left: ${this.stylingValue.marginLeft};
139
+ --emw-skeleton-title-margin-right: ${this.stylingValue.marginRight};
112
140
  --emw-skeleton-title-background: ${this.color};
113
141
  --emw-skeleton-primary-color: ${this.primaryColor};
114
142
  --emw-skeleton-secondary-color: ${this.secondaryColor};
@@ -118,13 +146,13 @@ const UiSkeleton = class {
118
146
  case 'text':
119
147
  styleBlock = `
120
148
  :host {
121
- --emw-skeleton-text-width: ${this.width};
122
- --emw-skeleton-text-height: ${this.height};
123
- --emw-skeleton-text-border-radius: ${this.borderRadius}px;
124
- --emw-skeleton-text-margin-bottom: ${this.marginBottom}px;
125
- --emw-skeleton-text-margin-top: ${this.marginTop}px;
126
- --emw-skeleton-text-margin-left: ${this.marginLeft}px;
127
- --emw-skeleton-text-margin-right: ${this.marginRight}px;
149
+ --emw-skeleton-text-width: ${this.stylingValue.width};
150
+ --emw-skeleton-text-height: ${this.stylingValue.height};
151
+ --emw-skeleton-text-border-radius: ${this.stylingValue.borderRadius};
152
+ --emw-skeleton-text-margin-bottom: ${this.stylingValue.marginBottom};
153
+ --emw-skeleton-text-margin-top: ${this.stylingValue.marginTop};
154
+ --emw-skeleton-text-margin-left: ${this.stylingValue.marginLeft};
155
+ --emw-skeleton-text-margin-right: ${this.stylingValue.marginRight};
128
156
  --emw-skeleton-text-background: ${this.color};
129
157
  --emw-skeleton-primary-color: ${this.primaryColor};
130
158
  --emw-skeleton-secondary-color: ${this.secondaryColor};
@@ -134,13 +162,13 @@ const UiSkeleton = class {
134
162
  case 'rectangle':
135
163
  styleBlock = `
136
164
  :host {
137
- --emw-skeleton-rectangle-width: ${this.width};
138
- --emw-skeleton-rectangle-height: ${this.height};
139
- --emw-skeleton-rectangle-border-radius: ${this.borderRadius}px;
140
- --emw-skeleton-rectangle-margin-bottom: ${this.marginBottom}px;
141
- --emw-skeleton-rectangle-margin-top: ${this.marginTop}px;
142
- --emw-skeleton-rectangle-margin-left: ${this.marginLeft}px;
143
- --emw-skeleton-rectangle-margin-right: ${this.marginRight}px;
165
+ --emw-skeleton-rectangle-width: ${this.stylingValue.width};
166
+ --emw-skeleton-rectangle-height: ${this.stylingValue.height};
167
+ --emw-skeleton-rectangle-border-radius: ${this.stylingValue.borderRadius};
168
+ --emw-skeleton-rectangle-margin-bottom: ${this.stylingValue.marginBottom};
169
+ --emw-skeleton-rectangle-margin-top: ${this.stylingValue.marginTop};
170
+ --emw-skeleton-rectangle-margin-left: ${this.stylingValue.marginLeft};
171
+ --emw-skeleton-rectangle-margin-right: ${this.stylingValue.marginRight};
144
172
  --emw-skeleton-rectangle-background: ${this.color};
145
173
  --emw-skeleton-primary-color: ${this.primaryColor};
146
174
  --emw-skeleton-secondary-color: ${this.secondaryColor};
@@ -160,7 +188,7 @@ const UiSkeleton = class {
160
188
  default:
161
189
  styleBlock = '';
162
190
  }
163
- return (index.h(index.Host, { key: '3bb792a149db7fe732d5cbfa092cdb4d6ca0689e' }, index.h("style", { key: 'a4607599b60659f385ae2660513e38b383739674' }, styleBlock), this.handleStructure(this.structure)));
191
+ return (index.h(index.Host, { key: '5c185b76c438d20d4ad88bc48d94ff5628410bb7' }, index.h("style", { key: 'de95e60a5955d5b2af83710423fe40329c187f7e' }, styleBlock), this.handleStructure(this.structure)));
164
192
  }
165
193
  static get watchers() { return {
166
194
  "structure": ["handleStructureChange"]
package/dist/cjs/ui-skeleton.cjs.entry.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const uiSkeleton = require('./ui-skeleton-0b101594.js');
5
+ const uiSkeleton = require('./ui-skeleton-2706b5eb.js');
6
6
  require('./index-946ac65b.js');
7
7
 
8
8
 
package/dist/cjs/ui-skeleton.cjs.js CHANGED
@@ -19,7 +19,7 @@ var patchBrowser = () => {
19
19
 
20
20
  patchBrowser().then(async (options) => {
21
21
  await appGlobals.globalScripts();
22
- return index.bootstrapLazy([["ui-skeleton.cjs",[[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);
22
+ return index.bootstrapLazy([["ui-skeleton.cjs",[[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],"color":[1],"primaryColor":[1,"primary-color"],"secondaryColor":[1,"secondary-color"]},null,{"structure":["handleStructureChange"]}]]]], options);
23
23
  });
24
24
 
25
25
  exports.setNonce = index.setNonce;
package/dist/collection/components/ui-skeleton/ui-skeleton.js CHANGED
@@ -1,26 +1,54 @@
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
+ };
4
13
  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;
14
+ this.width = 'unset';
15
+ this.height = 'unset';
16
+ this.borderRadius = 'unset';
17
+ this.marginBottom = 'unset';
18
+ this.marginTop = 'unset';
19
+ this.marginLeft = 'unset';
20
+ this.marginRight = 'unset';
12
21
  this.animation = true;
13
- this.rows = undefined;
14
- this.size = undefined;
15
- this.color = undefined;
16
- this.primaryColor = undefined;
17
- this.secondaryColor = undefined;
22
+ this.rows = 0;
23
+ this.size = '100%';
24
+ this.color = '#c2c2c2';
25
+ this.primaryColor = '#c2c2c2';
26
+ this.secondaryColor = '#ffffff';
18
27
  }
19
28
  handleStructureChange(newValue, oldValue) {
20
29
  if (oldValue !== newValue) {
21
30
  this.handleStructure(newValue);
22
31
  }
23
32
  }
33
+ handleStylingProps(value) {
34
+ switch (typeof value) {
35
+ case 'number':
36
+ return value === 0 ? 0 : `${value}px`;
37
+ case 'undefined':
38
+ return 'unset';
39
+ case 'string':
40
+ if (['auto', 'unset', 'none', 'inherit', 'initial'].includes(value) ||
41
+ value.endsWith('px') ||
42
+ value.endsWith('%')) {
43
+ return value;
44
+ }
45
+ else {
46
+ return 'unset';
47
+ }
48
+ default:
49
+ return 'unset';
50
+ }
51
+ }
24
52
  handleStructure(structure) {
25
53
  switch (structure) {
26
54
  case 'logo':
@@ -40,22 +68,22 @@ export class UiSkeleton {
40
68
  }
41
69
  }
42
70
  renderLogo() {
43
- return (h("div", { class: "SkeletonContainer" }, h("div", { class: "Logo " + (this.animation ? 'Skeleton' : '') })));
71
+ return (h("div", { class: "SkeletonContainer" }, h("div", { class: 'Logo ' + (this.animation ? 'Skeleton' : '') })));
44
72
  }
45
73
  renderImage() {
46
- return (h("div", { class: "Image " + (this.animation ? 'Skeleton' : '') }));
74
+ return h("div", { class: 'Image ' + (this.animation ? 'Skeleton' : '') });
47
75
  }
48
76
  renderTitle() {
49
- return (h("div", { class: "SkeletonContainer" }, h("div", { class: "Title " + (this.animation ? 'Skeleton' : '') })));
77
+ return (h("div", { class: "SkeletonContainer" }, h("div", { class: 'Title ' + (this.animation ? 'Skeleton' : '') })));
50
78
  }
51
79
  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' : '') })))));
80
+ 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
81
  }
54
82
  renderRectangle() {
55
- return (h("div", { class: "SkeletonContainer" }, h("div", { class: "Rectangle " + (this.animation ? 'Skeleton' : '') })));
83
+ return (h("div", { class: "SkeletonContainer" }, h("div", { class: 'Rectangle ' + (this.animation ? 'Skeleton' : '') })));
56
84
  }
57
85
  renderCircle() {
58
- return (h("div", { class: "SkeletonContainer" }, h("div", { class: "Circle " + (this.animation ? 'Skeleton' : '') })));
86
+ return (h("div", { class: "SkeletonContainer" }, h("div", { class: 'Circle ' + (this.animation ? 'Skeleton' : '') })));
59
87
  }
60
88
  render() {
61
89
  let styleBlock = '';
@@ -63,13 +91,13 @@ export class UiSkeleton {
63
91
  case 'logo':
64
92
  styleBlock = `
65
93
  :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;
94
+ --emw-skeleton-logo-width: ${this.stylingValue.width};
95
+ --emw-skeleton-logo-height: ${this.stylingValue.height};
96
+ --emw-skeleton-logo-border-radius: ${this.stylingValue.borderRadius};
97
+ --emw-skeleton-logo-margin-bottom: ${this.stylingValue.marginBottom};
98
+ --emw-skeleton-logo-margin-top: ${this.stylingValue.marginTop};
99
+ --emw-skeleton-logo-margin-left: ${this.stylingValue.marginLeft};
100
+ --emw-skeleton-logo-margin-right: ${this.stylingValue.marginRight};
73
101
  --emw-skeleton-logo-background: ${this.color};
74
102
  --emw-skeleton-primary-color: ${this.primaryColor};
75
103
  --emw-skeleton-secondary-color: ${this.secondaryColor};
@@ -79,13 +107,13 @@ export class UiSkeleton {
79
107
  case 'image':
80
108
  styleBlock = `
81
109
  :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;
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};
89
117
  --emw-skeleton-image-background: ${this.color};
90
118
  --emw-skeleton-primary-color: ${this.primaryColor};
91
119
  --emw-skeleton-secondary-color: ${this.secondaryColor};
@@ -95,13 +123,13 @@ export class UiSkeleton {
95
123
  case 'title':
96
124
  styleBlock = `
97
125
  :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;
126
+ --emw-skeleton-title-width: ${this.stylingValue.width};
127
+ --emw-skeleton-title-height: ${this.stylingValue.height};
128
+ --emw-skeleton-title-border-radius: ${this.stylingValue.borderRadius};
129
+ --emw-skeleton-title-margin-bottom: ${this.stylingValue.marginBottom};
130
+ --emw-skeleton-title-margin-top: ${this.stylingValue.marginTop};
131
+ --emw-skeleton-title-margin-left: ${this.stylingValue.marginLeft};
132
+ --emw-skeleton-title-margin-right: ${this.stylingValue.marginRight};
105
133
  --emw-skeleton-title-background: ${this.color};
106
134
  --emw-skeleton-primary-color: ${this.primaryColor};
107
135
  --emw-skeleton-secondary-color: ${this.secondaryColor};
@@ -111,13 +139,13 @@ export class UiSkeleton {
111
139
  case 'text':
112
140
  styleBlock = `
113
141
  :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;
142
+ --emw-skeleton-text-width: ${this.stylingValue.width};
143
+ --emw-skeleton-text-height: ${this.stylingValue.height};
144
+ --emw-skeleton-text-border-radius: ${this.stylingValue.borderRadius};
145
+ --emw-skeleton-text-margin-bottom: ${this.stylingValue.marginBottom};
146
+ --emw-skeleton-text-margin-top: ${this.stylingValue.marginTop};
147
+ --emw-skeleton-text-margin-left: ${this.stylingValue.marginLeft};
148
+ --emw-skeleton-text-margin-right: ${this.stylingValue.marginRight};
121
149
  --emw-skeleton-text-background: ${this.color};
122
150
  --emw-skeleton-primary-color: ${this.primaryColor};
123
151
  --emw-skeleton-secondary-color: ${this.secondaryColor};
@@ -127,13 +155,13 @@ export class UiSkeleton {
127
155
  case 'rectangle':
128
156
  styleBlock = `
129
157
  :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;
158
+ --emw-skeleton-rectangle-width: ${this.stylingValue.width};
159
+ --emw-skeleton-rectangle-height: ${this.stylingValue.height};
160
+ --emw-skeleton-rectangle-border-radius: ${this.stylingValue.borderRadius};
161
+ --emw-skeleton-rectangle-margin-bottom: ${this.stylingValue.marginBottom};
162
+ --emw-skeleton-rectangle-margin-top: ${this.stylingValue.marginTop};
163
+ --emw-skeleton-rectangle-margin-left: ${this.stylingValue.marginLeft};
164
+ --emw-skeleton-rectangle-margin-right: ${this.stylingValue.marginRight};
137
165
  --emw-skeleton-rectangle-background: ${this.color};
138
166
  --emw-skeleton-primary-color: ${this.primaryColor};
139
167
  --emw-skeleton-secondary-color: ${this.secondaryColor};
@@ -153,7 +181,7 @@ export class UiSkeleton {
153
181
  default:
154
182
  styleBlock = '';
155
183
  }
156
- return (h(Host, { key: '3bb792a149db7fe732d5cbfa092cdb4d6ca0689e' }, h("style", { key: 'a4607599b60659f385ae2660513e38b383739674' }, styleBlock), this.handleStructure(this.structure)));
184
+ return (h(Host, { key: '5c185b76c438d20d4ad88bc48d94ff5628410bb7' }, h("style", { key: 'de95e60a5955d5b2af83710423fe40329c187f7e' }, styleBlock), this.handleStructure(this.structure)));
157
185
  }
158
186
  static get is() { return "ui-skeleton"; }
159
187
  static get originalStyleUrls() {
@@ -200,7 +228,8 @@ export class UiSkeleton {
200
228
  "text": "Width of the element - it can either be a value in px (150px) or in percentage (100%)"
201
229
  },
202
230
  "attribute": "width",
203
- "reflect": false
231
+ "reflect": false,
232
+ "defaultValue": "'unset'"
204
233
  },
205
234
  "height": {
206
235
  "type": "string",
@@ -217,14 +246,15 @@ export class UiSkeleton {
217
246
  "text": "Height of the element - it can either be a value in px (150px) or in percentage (100%)"
218
247
  },
219
248
  "attribute": "height",
220
- "reflect": false
249
+ "reflect": false,
250
+ "defaultValue": "'unset'"
221
251
  },
222
252
  "borderRadius": {
223
- "type": "number",
253
+ "type": "any",
224
254
  "mutable": false,
225
255
  "complexType": {
226
- "original": "number",
227
- "resolved": "number",
256
+ "original": "number | string",
257
+ "resolved": "number | string",
228
258
  "references": {}
229
259
  },
230
260
  "required": false,
@@ -234,14 +264,15 @@ export class UiSkeleton {
234
264
  "text": "The border radius of the element"
235
265
  },
236
266
  "attribute": "border-radius",
237
- "reflect": false
267
+ "reflect": false,
268
+ "defaultValue": "'unset'"
238
269
  },
239
270
  "marginBottom": {
240
- "type": "number",
271
+ "type": "any",
241
272
  "mutable": false,
242
273
  "complexType": {
243
- "original": "number",
244
- "resolved": "number",
274
+ "original": "number | string",
275
+ "resolved": "number | string",
245
276
  "references": {}
246
277
  },
247
278
  "required": false,
@@ -251,14 +282,15 @@ export class UiSkeleton {
251
282
  "text": "Margin bottom for the element"
252
283
  },
253
284
  "attribute": "margin-bottom",
254
- "reflect": false
285
+ "reflect": false,
286
+ "defaultValue": "'unset'"
255
287
  },
256
288
  "marginTop": {
257
- "type": "number",
289
+ "type": "any",
258
290
  "mutable": false,
259
291
  "complexType": {
260
- "original": "number",
261
- "resolved": "number",
292
+ "original": "number | string",
293
+ "resolved": "number | string",
262
294
  "references": {}
263
295
  },
264
296
  "required": false,
@@ -268,14 +300,15 @@ export class UiSkeleton {
268
300
  "text": "Margin top for the element"
269
301
  },
270
302
  "attribute": "margin-top",
271
- "reflect": false
303
+ "reflect": false,
304
+ "defaultValue": "'unset'"
272
305
  },
273
306
  "marginLeft": {
274
- "type": "number",
307
+ "type": "any",
275
308
  "mutable": false,
276
309
  "complexType": {
277
- "original": "number",
278
- "resolved": "number",
310
+ "original": "number | string",
311
+ "resolved": "number | string",
279
312
  "references": {}
280
313
  },
281
314
  "required": false,
@@ -285,14 +318,15 @@ export class UiSkeleton {
285
318
  "text": "Margin left for the element"
286
319
  },
287
320
  "attribute": "margin-left",
288
- "reflect": false
321
+ "reflect": false,
322
+ "defaultValue": "'unset'"
289
323
  },
290
324
  "marginRight": {
291
- "type": "number",
325
+ "type": "any",
292
326
  "mutable": false,
293
327
  "complexType": {
294
- "original": "number",
295
- "resolved": "number",
328
+ "original": "number | string",
329
+ "resolved": "number | string",
296
330
  "references": {}
297
331
  },
298
332
  "required": false,
@@ -302,7 +336,8 @@ export class UiSkeleton {
302
336
  "text": "Margin right for the element"
303
337
  },
304
338
  "attribute": "margin-right",
305
- "reflect": false
339
+ "reflect": false,
340
+ "defaultValue": "'unset'"
306
341
  },
307
342
  "animation": {
308
343
  "type": "boolean",
@@ -337,7 +372,8 @@ export class UiSkeleton {
337
372
  "text": "Number of rows displayed - only for `text`"
338
373
  },
339
374
  "attribute": "rows",
340
- "reflect": false
375
+ "reflect": false,
376
+ "defaultValue": "0"
341
377
  },
342
378
  "size": {
343
379
  "type": "string",
@@ -354,7 +390,8 @@ export class UiSkeleton {
354
390
  "text": "The size of the circle - only for `circle` - it can either be a value in px (150px) or in percentage (100%)"
355
391
  },
356
392
  "attribute": "size",
357
- "reflect": false
393
+ "reflect": false,
394
+ "defaultValue": "'100%'"
358
395
  },
359
396
  "color": {
360
397
  "type": "string",
@@ -371,7 +408,8 @@ export class UiSkeleton {
371
408
  "text": "Color of the skeleton when animation is `off` - hexa value (e.g. #c2c2c2)"
372
409
  },
373
410
  "attribute": "color",
374
- "reflect": false
411
+ "reflect": false,
412
+ "defaultValue": "'#c2c2c2'"
375
413
  },
376
414
  "primaryColor": {
377
415
  "type": "string",
@@ -388,7 +426,8 @@ export class UiSkeleton {
388
426
  "text": "Primary color of the skeleton when animation is `on` - hexa value (e.g. #c2c2c2)"
389
427
  },
390
428
  "attribute": "primary-color",
391
- "reflect": false
429
+ "reflect": false,
430
+ "defaultValue": "'#c2c2c2'"
392
431
  },
393
432
  "secondaryColor": {
394
433
  "type": "string",
@@ -405,7 +444,8 @@ export class UiSkeleton {
405
444
  "text": "Secondary color of the skeleton when animation is `on` - hexa value (e.g. #ffffff)"
406
445
  },
407
446
  "attribute": "secondary-color",
408
- "reflect": false
447
+ "reflect": false,
448
+ "defaultValue": "'#ffffff'"
409
449
  }
410
450
  };
411
451
  }
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-161699c3.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],"color":[1],"primaryColor":[1,"primary-color"],"secondaryColor":[1,"secondary-color"]},null,{"structure":["handleStructureChange"]}]]]], options);
9
9
  };
10
10
 
11
11
  export { defineCustomElements };
package/dist/esm/{ui-skeleton-1cb75d00.js → ui-skeleton-161699c3.js} RENAMED
@@ -6,26 +6,54 @@ const UiSkeletonStyle0 = uiSkeletonCss;
6
6
  const UiSkeleton = class {
7
7
  constructor(hostRef) {
8
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
+ };
9
18
  this.structure = undefined;
10
- this.width = undefined;
11
- this.height = undefined;
12
- this.borderRadius = undefined;
13
- this.marginBottom = undefined;
14
- this.marginTop = undefined;
15
- this.marginLeft = undefined;
16
- this.marginRight = undefined;
19
+ this.width = 'unset';
20
+ this.height = 'unset';
21
+ this.borderRadius = 'unset';
22
+ this.marginBottom = 'unset';
23
+ this.marginTop = 'unset';
24
+ this.marginLeft = 'unset';
25
+ this.marginRight = 'unset';
17
26
  this.animation = true;
18
- this.rows = undefined;
19
- this.size = undefined;
20
- this.color = undefined;
21
- this.primaryColor = undefined;
22
- this.secondaryColor = undefined;
27
+ this.rows = 0;
28
+ this.size = '100%';
29
+ this.color = '#c2c2c2';
30
+ this.primaryColor = '#c2c2c2';
31
+ this.secondaryColor = '#ffffff';
23
32
  }
24
33
  handleStructureChange(newValue, oldValue) {
25
34
  if (oldValue !== newValue) {
26
35
  this.handleStructure(newValue);
27
36
  }
28
37
  }
38
+ handleStylingProps(value) {
39
+ switch (typeof value) {
40
+ case 'number':
41
+ return value === 0 ? 0 : `${value}px`;
42
+ case 'undefined':
43
+ return 'unset';
44
+ case 'string':
45
+ if (['auto', 'unset', 'none', 'inherit', 'initial'].includes(value) ||
46
+ value.endsWith('px') ||
47
+ value.endsWith('%')) {
48
+ return value;
49
+ }
50
+ else {
51
+ return 'unset';
52
+ }
53
+ default:
54
+ return 'unset';
55
+ }
56
+ }
29
57
  handleStructure(structure) {
30
58
  switch (structure) {
31
59
  case 'logo':
@@ -45,22 +73,22 @@ const UiSkeleton = class {
45
73
  }
46
74
  }
47
75
  renderLogo() {
48
- return (h("div", { class: "SkeletonContainer" }, h("div", { class: "Logo " + (this.animation ? 'Skeleton' : '') })));
76
+ return (h("div", { class: "SkeletonContainer" }, h("div", { class: 'Logo ' + (this.animation ? 'Skeleton' : '') })));
49
77
  }
50
78
  renderImage() {
51
- return (h("div", { class: "Image " + (this.animation ? 'Skeleton' : '') }));
79
+ return h("div", { class: 'Image ' + (this.animation ? 'Skeleton' : '') });
52
80
  }
53
81
  renderTitle() {
54
- return (h("div", { class: "SkeletonContainer" }, h("div", { class: "Title " + (this.animation ? 'Skeleton' : '') })));
82
+ return (h("div", { class: "SkeletonContainer" }, h("div", { class: 'Title ' + (this.animation ? 'Skeleton' : '') })));
55
83
  }
56
84
  renderText() {
57
- 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' : '') })))));
85
+ 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' : '') })))));
58
86
  }
59
87
  renderRectangle() {
60
- return (h("div", { class: "SkeletonContainer" }, h("div", { class: "Rectangle " + (this.animation ? 'Skeleton' : '') })));
88
+ return (h("div", { class: "SkeletonContainer" }, h("div", { class: 'Rectangle ' + (this.animation ? 'Skeleton' : '') })));
61
89
  }
62
90
  renderCircle() {
63
- return (h("div", { class: "SkeletonContainer" }, h("div", { class: "Circle " + (this.animation ? 'Skeleton' : '') })));
91
+ return (h("div", { class: "SkeletonContainer" }, h("div", { class: 'Circle ' + (this.animation ? 'Skeleton' : '') })));
64
92
  }
65
93
  render() {
66
94
  let styleBlock = '';
@@ -68,13 +96,13 @@ const UiSkeleton = class {
68
96
  case 'logo':
69
97
  styleBlock = `
70
98
  :host {
71
- --emw-skeleton-logo-width: ${this.width};
72
- --emw-skeleton-logo-height: ${this.height};
73
- --emw-skeleton-logo-border-radius: ${this.borderRadius}px;
74
- --emw-skeleton-logo-margin-bottom: ${this.marginBottom}px;
75
- --emw-skeleton-logo-margin-top: ${this.marginTop}px;
76
- --emw-skeleton-logo-margin-left: ${this.marginLeft}px;
77
- --emw-skeleton-logo-margin-right: ${this.marginRight}px;
99
+ --emw-skeleton-logo-width: ${this.stylingValue.width};
100
+ --emw-skeleton-logo-height: ${this.stylingValue.height};
101
+ --emw-skeleton-logo-border-radius: ${this.stylingValue.borderRadius};
102
+ --emw-skeleton-logo-margin-bottom: ${this.stylingValue.marginBottom};
103
+ --emw-skeleton-logo-margin-top: ${this.stylingValue.marginTop};
104
+ --emw-skeleton-logo-margin-left: ${this.stylingValue.marginLeft};
105
+ --emw-skeleton-logo-margin-right: ${this.stylingValue.marginRight};
78
106
  --emw-skeleton-logo-background: ${this.color};
79
107
  --emw-skeleton-primary-color: ${this.primaryColor};
80
108
  --emw-skeleton-secondary-color: ${this.secondaryColor};
@@ -84,13 +112,13 @@ const UiSkeleton = class {
84
112
  case 'image':
85
113
  styleBlock = `
86
114
  :host {
87
- --emw-skeleton-image-width: ${this.width};
88
- --emw-skeleton-image-height: ${this.height};
89
- --emw-skeleton-image-border-radius: ${this.borderRadius}px;
90
- --emw-skeleton-image-margin-bottom: ${this.marginBottom}px;
91
- --emw-skeleton-image-margin-top: ${this.marginTop}px;
92
- --emw-skeleton-image-margin-left: ${this.marginLeft}px;
93
- --emw-skeleton-image-margin-right: ${this.marginRight}px;
115
+ --emw-skeleton-image-width: ${this.stylingValue.width};
116
+ --emw-skeleton-image-height: ${this.stylingValue.height};
117
+ --emw-skeleton-image-border-radius: ${this.stylingValue.borderRadius};
118
+ --emw-skeleton-image-margin-bottom: ${this.stylingValue.marginBottom};
119
+ --emw-skeleton-image-margin-top: ${this.stylingValue.marginTop};
120
+ --emw-skeleton-image-margin-left: ${this.stylingValue.marginLeft};
121
+ --emw-skeleton-image-margin-right: ${this.stylingValue.marginRight};
94
122
  --emw-skeleton-image-background: ${this.color};
95
123
  --emw-skeleton-primary-color: ${this.primaryColor};
96
124
  --emw-skeleton-secondary-color: ${this.secondaryColor};
@@ -100,13 +128,13 @@ const UiSkeleton = class {
100
128
  case 'title':
101
129
  styleBlock = `
102
130
  :host {
103
- --emw-skeleton-title-width: ${this.width};
104
- --emw-skeleton-title-height: ${this.height};
105
- --emw-skeleton-title-border-radius: ${this.borderRadius}px;
106
- --emw-skeleton-title-margin-bottom: ${this.marginBottom}px;
107
- --emw-skeleton-title-margin-top: ${this.marginTop}px;
108
- --emw-skeleton-title-margin-left: ${this.marginLeft}px;
109
- --emw-skeleton-title-margin-right: ${this.marginRight}px;
131
+ --emw-skeleton-title-width: ${this.stylingValue.width};
132
+ --emw-skeleton-title-height: ${this.stylingValue.height};
133
+ --emw-skeleton-title-border-radius: ${this.stylingValue.borderRadius};
134
+ --emw-skeleton-title-margin-bottom: ${this.stylingValue.marginBottom};
135
+ --emw-skeleton-title-margin-top: ${this.stylingValue.marginTop};
136
+ --emw-skeleton-title-margin-left: ${this.stylingValue.marginLeft};
137
+ --emw-skeleton-title-margin-right: ${this.stylingValue.marginRight};
110
138
  --emw-skeleton-title-background: ${this.color};
111
139
  --emw-skeleton-primary-color: ${this.primaryColor};
112
140
  --emw-skeleton-secondary-color: ${this.secondaryColor};
@@ -116,13 +144,13 @@ const UiSkeleton = class {
116
144
  case 'text':
117
145
  styleBlock = `
118
146
  :host {
119
- --emw-skeleton-text-width: ${this.width};
120
- --emw-skeleton-text-height: ${this.height};
121
- --emw-skeleton-text-border-radius: ${this.borderRadius}px;
122
- --emw-skeleton-text-margin-bottom: ${this.marginBottom}px;
123
- --emw-skeleton-text-margin-top: ${this.marginTop}px;
124
- --emw-skeleton-text-margin-left: ${this.marginLeft}px;
125
- --emw-skeleton-text-margin-right: ${this.marginRight}px;
147
+ --emw-skeleton-text-width: ${this.stylingValue.width};
148
+ --emw-skeleton-text-height: ${this.stylingValue.height};
149
+ --emw-skeleton-text-border-radius: ${this.stylingValue.borderRadius};
150
+ --emw-skeleton-text-margin-bottom: ${this.stylingValue.marginBottom};
151
+ --emw-skeleton-text-margin-top: ${this.stylingValue.marginTop};
152
+ --emw-skeleton-text-margin-left: ${this.stylingValue.marginLeft};
153
+ --emw-skeleton-text-margin-right: ${this.stylingValue.marginRight};
126
154
  --emw-skeleton-text-background: ${this.color};
127
155
  --emw-skeleton-primary-color: ${this.primaryColor};
128
156
  --emw-skeleton-secondary-color: ${this.secondaryColor};
@@ -132,13 +160,13 @@ const UiSkeleton = class {
132
160
  case 'rectangle':
133
161
  styleBlock = `
134
162
  :host {
135
- --emw-skeleton-rectangle-width: ${this.width};
136
- --emw-skeleton-rectangle-height: ${this.height};
137
- --emw-skeleton-rectangle-border-radius: ${this.borderRadius}px;
138
- --emw-skeleton-rectangle-margin-bottom: ${this.marginBottom}px;
139
- --emw-skeleton-rectangle-margin-top: ${this.marginTop}px;
140
- --emw-skeleton-rectangle-margin-left: ${this.marginLeft}px;
141
- --emw-skeleton-rectangle-margin-right: ${this.marginRight}px;
163
+ --emw-skeleton-rectangle-width: ${this.stylingValue.width};
164
+ --emw-skeleton-rectangle-height: ${this.stylingValue.height};
165
+ --emw-skeleton-rectangle-border-radius: ${this.stylingValue.borderRadius};
166
+ --emw-skeleton-rectangle-margin-bottom: ${this.stylingValue.marginBottom};
167
+ --emw-skeleton-rectangle-margin-top: ${this.stylingValue.marginTop};
168
+ --emw-skeleton-rectangle-margin-left: ${this.stylingValue.marginLeft};
169
+ --emw-skeleton-rectangle-margin-right: ${this.stylingValue.marginRight};
142
170
  --emw-skeleton-rectangle-background: ${this.color};
143
171
  --emw-skeleton-primary-color: ${this.primaryColor};
144
172
  --emw-skeleton-secondary-color: ${this.secondaryColor};
@@ -158,7 +186,7 @@ const UiSkeleton = class {
158
186
  default:
159
187
  styleBlock = '';
160
188
  }
161
- return (h(Host, { key: '3bb792a149db7fe732d5cbfa092cdb4d6ca0689e' }, h("style", { key: 'a4607599b60659f385ae2660513e38b383739674' }, styleBlock), this.handleStructure(this.structure)));
189
+ return (h(Host, { key: '5c185b76c438d20d4ad88bc48d94ff5628410bb7' }, h("style", { key: 'de95e60a5955d5b2af83710423fe40329c187f7e' }, styleBlock), this.handleStructure(this.structure)));
162
190
  }
163
191
  static get watchers() { return {
164
192
  "structure": ["handleStructureChange"]
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-161699c3.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],"color":[1],"primaryColor":[1,"primary-color"],"secondaryColor":[1,"secondary-color"]},null,{"structure":["handleStructureChange"]}]]]], options);
20
20
  });
package/dist/types/components/ui-skeleton/ui-skeleton.d.ts CHANGED
@@ -14,23 +14,23 @@ export declare class UiSkeleton {
14
14
  /**
15
15
  * The border radius of the element
16
16
  */
17
- borderRadius: number;
17
+ borderRadius: number | string;
18
18
  /**
19
19
  * Margin bottom for the element
20
20
  */
21
- marginBottom: number;
21
+ marginBottom: number | string;
22
22
  /**
23
23
  * Margin top for the element
24
24
  */
25
- marginTop: number;
25
+ marginTop: number | string;
26
26
  /**
27
27
  * Margin left for the element
28
28
  */
29
- marginLeft: number;
29
+ marginLeft: number | string;
30
30
  /**
31
31
  * Margin right for the element
32
32
  */
33
- marginRight: number;
33
+ marginRight: number | string;
34
34
  /**
35
35
  * Toggles skeleton animation
36
36
  */
@@ -56,6 +56,8 @@ export declare class UiSkeleton {
56
56
  */
57
57
  secondaryColor: string;
58
58
  handleStructureChange(newValue: any, oldValue: any): void;
59
+ private handleStylingProps;
60
+ private stylingValue;
59
61
  private handleStructure;
60
62
  private renderLogo;
61
63
  private renderImage;
package/dist/types/components.d.ts CHANGED
@@ -14,7 +14,7 @@ export namespace Components {
14
14
  /**
15
15
  * The border radius of the element
16
16
  */
17
- "borderRadius": number;
17
+ "borderRadius": number | string;
18
18
  /**
19
19
  * Color of the skeleton when animation is `off` - hexa value (e.g. #c2c2c2)
20
20
  */
@@ -26,19 +26,19 @@ export namespace Components {
26
26
  /**
27
27
  * Margin bottom for the element
28
28
  */
29
- "marginBottom": number;
29
+ "marginBottom": number | string;
30
30
  /**
31
31
  * Margin left for the element
32
32
  */
33
- "marginLeft": number;
33
+ "marginLeft": number | string;
34
34
  /**
35
35
  * Margin right for the element
36
36
  */
37
- "marginRight": number;
37
+ "marginRight": number | string;
38
38
  /**
39
39
  * Margin top for the element
40
40
  */
41
- "marginTop": number;
41
+ "marginTop": number | string;
42
42
  /**
43
43
  * Primary color of the skeleton when animation is `on` - hexa value (e.g. #c2c2c2)
44
44
  */
@@ -85,7 +85,7 @@ declare namespace LocalJSX {
85
85
  /**
86
86
  * The border radius of the element
87
87
  */
88
- "borderRadius"?: number;
88
+ "borderRadius"?: number | string;
89
89
  /**
90
90
  * Color of the skeleton when animation is `off` - hexa value (e.g. #c2c2c2)
91
91
  */
@@ -97,19 +97,19 @@ declare namespace LocalJSX {
97
97
  /**
98
98
  * Margin bottom for the element
99
99
  */
100
- "marginBottom"?: number;
100
+ "marginBottom"?: number | string;
101
101
  /**
102
102
  * Margin left for the element
103
103
  */
104
- "marginLeft"?: number;
104
+ "marginLeft"?: number | string;
105
105
  /**
106
106
  * Margin right for the element
107
107
  */
108
- "marginRight"?: number;
108
+ "marginRight"?: number | string;
109
109
  /**
110
110
  * Margin top for the element
111
111
  */
112
- "marginTop"?: number;
112
+ "marginTop"?: number | string;
113
113
  /**
114
114
  * Primary color of the skeleton when animation is `on` - hexa value (e.g. #c2c2c2)
115
115
  */
package/dist/ui-skeleton/index.esm.js CHANGED
@@ -1 +1 @@
1
- export{U as UiSkeleton}from"./ui-skeleton-1cb75d00.js";import"./index-b2193545.js";
1
+ export{U as UiSkeleton}from"./ui-skeleton-161699c3.js";import"./index-b2193545.js";
package/dist/ui-skeleton/ui-skeleton-161699c3.js ADDED
@@ -0,0 +1 @@
1
+ import{r as e,h as t,H as n}from"./index-b2193545.js";const r=class{constructor(t){e(this,t),this.stylingValue={width:this.handleStylingProps(this.width),height:this.handleStylingProps(this.height),borderRadius:this.handleStylingProps(this.borderRadius),marginBottom:this.handleStylingProps(this.marginBottom),marginTop:this.handleStylingProps(this.marginTop),marginLeft:this.handleStylingProps(this.marginLeft),marginRight:this.handleStylingProps(this.marginRight)},this.structure=void 0,this.width="unset",this.height="unset",this.borderRadius="unset",this.marginBottom="unset",this.marginTop="unset",this.marginLeft="unset",this.marginRight="unset",this.animation=!0,this.rows=0,this.size="100%",this.color="#c2c2c2",this.primaryColor="#c2c2c2",this.secondaryColor="#ffffff"}handleStructureChange(e,t){t!==e&&this.handleStructure(e)}handleStylingProps(e){switch(typeof e){case"number":return 0===e?0:`${e}px`;case"undefined":default:return"unset";case"string":return["auto","unset","none","inherit","initial"].includes(e)||e.endsWith("px")||e.endsWith("%")?e:"unset"}}handleStructure(e){switch(e){case"logo":return this.renderLogo();case"image":return this.renderImage();case"title":return this.renderTitle();case"text":return this.renderText();case"rectangle":return this.renderRectangle();case"circle":return this.renderCircle();default:return null}}renderLogo(){return t("div",{class:"SkeletonContainer"},t("div",{class:"Logo "+(this.animation?"Skeleton":"")}))}renderImage(){return t("div",{class:"Image "+(this.animation?"Skeleton":"")})}renderTitle(){return t("div",{class:"SkeletonContainer"},t("div",{class:"Title "+(this.animation?"Skeleton":"")}))}renderText(){return t("div",{class:"SkeletonContainer"},Array.from({length:this.rows>0?this.rows:1}).map(((e,n)=>t("div",{key:n,class:"Text "+(this.animation?"Skeleton":"")}))))}renderRectangle(){return t("div",{class:"SkeletonContainer"},t("div",{class:"Rectangle "+(this.animation?"Skeleton":"")}))}renderCircle(){return t("div",{class:"SkeletonContainer"},t("div",{class:"Circle "+(this.animation?"Skeleton":"")}))}render(){let e="";switch(this.structure){case"logo":e=`\n :host {\n --emw-skeleton-logo-width: ${this.stylingValue.width};\n --emw-skeleton-logo-height: ${this.stylingValue.height};\n --emw-skeleton-logo-border-radius: ${this.stylingValue.borderRadius};\n --emw-skeleton-logo-margin-bottom: ${this.stylingValue.marginBottom};\n --emw-skeleton-logo-margin-top: ${this.stylingValue.marginTop};\n --emw-skeleton-logo-margin-left: ${this.stylingValue.marginLeft};\n --emw-skeleton-logo-margin-right: ${this.stylingValue.marginRight};\n --emw-skeleton-logo-background: ${this.color};\n --emw-skeleton-primary-color: ${this.primaryColor};\n --emw-skeleton-secondary-color: ${this.secondaryColor};\n }\n `;break;case"image":e=`\n :host {\n --emw-skeleton-image-width: ${this.stylingValue.width};\n --emw-skeleton-image-height: ${this.stylingValue.height};\n --emw-skeleton-image-border-radius: ${this.stylingValue.borderRadius};\n --emw-skeleton-image-margin-bottom: ${this.stylingValue.marginBottom};\n --emw-skeleton-image-margin-top: ${this.stylingValue.marginTop};\n --emw-skeleton-image-margin-left: ${this.stylingValue.marginLeft};\n --emw-skeleton-image-margin-right: ${this.stylingValue.marginRight};\n --emw-skeleton-image-background: ${this.color};\n --emw-skeleton-primary-color: ${this.primaryColor};\n --emw-skeleton-secondary-color: ${this.secondaryColor};\n }\n `;break;case"title":e=`\n :host {\n --emw-skeleton-title-width: ${this.stylingValue.width};\n --emw-skeleton-title-height: ${this.stylingValue.height};\n --emw-skeleton-title-border-radius: ${this.stylingValue.borderRadius};\n --emw-skeleton-title-margin-bottom: ${this.stylingValue.marginBottom};\n --emw-skeleton-title-margin-top: ${this.stylingValue.marginTop};\n --emw-skeleton-title-margin-left: ${this.stylingValue.marginLeft};\n --emw-skeleton-title-margin-right: ${this.stylingValue.marginRight};\n --emw-skeleton-title-background: ${this.color};\n --emw-skeleton-primary-color: ${this.primaryColor};\n --emw-skeleton-secondary-color: ${this.secondaryColor};\n }\n `;break;case"text":e=`\n :host {\n --emw-skeleton-text-width: ${this.stylingValue.width};\n --emw-skeleton-text-height: ${this.stylingValue.height};\n --emw-skeleton-text-border-radius: ${this.stylingValue.borderRadius};\n --emw-skeleton-text-margin-bottom: ${this.stylingValue.marginBottom};\n --emw-skeleton-text-margin-top: ${this.stylingValue.marginTop};\n --emw-skeleton-text-margin-left: ${this.stylingValue.marginLeft};\n --emw-skeleton-text-margin-right: ${this.stylingValue.marginRight};\n --emw-skeleton-text-background: ${this.color};\n --emw-skeleton-primary-color: ${this.primaryColor};\n --emw-skeleton-secondary-color: ${this.secondaryColor};\n }\n `;break;case"rectangle":e=`\n :host {\n --emw-skeleton-rectangle-width: ${this.stylingValue.width};\n --emw-skeleton-rectangle-height: ${this.stylingValue.height};\n --emw-skeleton-rectangle-border-radius: ${this.stylingValue.borderRadius};\n --emw-skeleton-rectangle-margin-bottom: ${this.stylingValue.marginBottom};\n --emw-skeleton-rectangle-margin-top: ${this.stylingValue.marginTop};\n --emw-skeleton-rectangle-margin-left: ${this.stylingValue.marginLeft};\n --emw-skeleton-rectangle-margin-right: ${this.stylingValue.marginRight};\n --emw-skeleton-rectangle-background: ${this.color};\n --emw-skeleton-primary-color: ${this.primaryColor};\n --emw-skeleton-secondary-color: ${this.secondaryColor};\n }\n `;break;case"circle":e=`\n :host {\n --emw-skeleton-circle-size: ${this.size};\n --emw-skeleton-circle-background: ${this.color};\n --emw-skeleton-primary-color: ${this.primaryColor};\n --emw-skeleton-secondary-color: ${this.secondaryColor};\n }\n `;break;default:e=""}return t(n,{key:"5c185b76c438d20d4ad88bc48d94ff5628410bb7"},t("style",{key:"de95e60a5955d5b2af83710423fe40329c187f7e"},e),this.handleStructure(this.structure))}static get watchers(){return{structure:["handleStructureChange"]}}};r.style=":host{display:block;--emw-skeleton-rectangle-background:#c2c2c2;--emw-skeleton-circle-background:#c2c2c2;--emw-skeleton-text-background:#c2c2c2;--emw-skeleton-title-background:#c2c2c2;--emw-skeleton-image-background:#c2c2c2;--emw-skeleton-logo-background:#c2c2c2;--emw-skeleton-primary-color:#e0e0e0;--emw-skeleton-secondary-color:#f0f0f0}.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, 2px)}.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, 5px);margin-bottom:var(--emw-skeleton-text-margin-bottom, 5px)}.Text:last-child{width:var(--emw-skeleton-text-width-100, 300px)}.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, 5px);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, inherit)}.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, 5px)}@keyframes skeleton-loading{0%{background-color:var(--emw-skeleton-primary-color, var(--emw-skeleton-color-0, #c2c2c2))}100%{background-color:var(--emw-skeleton-secondary-color, var(--emw-skeleton-color-100, #f0f0f0))}}";export{r as U}
package/dist/ui-skeleton/ui-skeleton.entry.js CHANGED
@@ -1 +1 @@
1
- export{U as ui_skeleton}from"./ui-skeleton-1cb75d00.js";import"./index-b2193545.js";
1
+ export{U as ui_skeleton}from"./ui-skeleton-161699c3.js";import"./index-b2193545.js";
package/dist/ui-skeleton/ui-skeleton.esm.js CHANGED
@@ -1 +1 @@
1
- import{p as r,b as o}from"./index-b2193545.js";export{s as setNonce}from"./index-b2193545.js";import{g as t}from"./app-globals-0f993ce5.js";(()=>{const o=import.meta.url,t={};return""!==o&&(t.resourcesUrl=new URL(".",o).href),r(t)})().then((async r=>(await t(),o([["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"]}]]]],r))));
1
+ import{p as r,b as o}from"./index-b2193545.js";export{s as setNonce}from"./index-b2193545.js";import{g as t}from"./app-globals-0f993ce5.js";(()=>{const o=import.meta.url,t={};return""!==o&&(t.resourcesUrl=new URL(".",o).href),r(t)})().then((async r=>(await t(),o([["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],color:[1],primaryColor:[1,"primary-color"],secondaryColor:[1,"secondary-color"]},null,{structure:["handleStructureChange"]}]]]],r))));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@everymatrix/ui-skeleton",
3
- "version": "1.68.0",
3
+ "version": "1.69.2",
4
4
  "main": "./dist/index.cjs.js",
5
5
  "module": "./dist/index.js",
6
6
  "es2015": "./dist/esm/index.mjs",
package/dist/ui-skeleton/ui-skeleton-1cb75d00.js DELETED
@@ -1 +0,0 @@
1
- import{r as e,h as t,H as n}from"./index-b2193545.js";const o=class{constructor(t){e(this,t),this.structure=void 0,this.width=void 0,this.height=void 0,this.borderRadius=void 0,this.marginBottom=void 0,this.marginTop=void 0,this.marginLeft=void 0,this.marginRight=void 0,this.animation=!0,this.rows=void 0,this.size=void 0,this.color=void 0,this.primaryColor=void 0,this.secondaryColor=void 0}handleStructureChange(e,t){t!==e&&this.handleStructure(e)}handleStructure(e){switch(e){case"logo":return this.renderLogo();case"image":return this.renderImage();case"title":return this.renderTitle();case"text":return this.renderText();case"rectangle":return this.renderRectangle();case"circle":return this.renderCircle();default:return null}}renderLogo(){return t("div",{class:"SkeletonContainer"},t("div",{class:"Logo "+(this.animation?"Skeleton":"")}))}renderImage(){return t("div",{class:"Image "+(this.animation?"Skeleton":"")})}renderTitle(){return t("div",{class:"SkeletonContainer"},t("div",{class:"Title "+(this.animation?"Skeleton":"")}))}renderText(){return t("div",{class:"SkeletonContainer"},Array.from({length:this.rows>0?this.rows:1}).map(((e,n)=>t("div",{key:n,class:"Text "+(this.animation?"Skeleton":"")}))))}renderRectangle(){return t("div",{class:"SkeletonContainer"},t("div",{class:"Rectangle "+(this.animation?"Skeleton":"")}))}renderCircle(){return t("div",{class:"SkeletonContainer"},t("div",{class:"Circle "+(this.animation?"Skeleton":"")}))}render(){let e="";switch(this.structure){case"logo":e=`\n :host {\n --emw-skeleton-logo-width: ${this.width};\n --emw-skeleton-logo-height: ${this.height};\n --emw-skeleton-logo-border-radius: ${this.borderRadius}px;\n --emw-skeleton-logo-margin-bottom: ${this.marginBottom}px;\n --emw-skeleton-logo-margin-top: ${this.marginTop}px;\n --emw-skeleton-logo-margin-left: ${this.marginLeft}px;\n --emw-skeleton-logo-margin-right: ${this.marginRight}px;\n --emw-skeleton-logo-background: ${this.color};\n --emw-skeleton-primary-color: ${this.primaryColor};\n --emw-skeleton-secondary-color: ${this.secondaryColor};\n }\n `;break;case"image":e=`\n :host {\n --emw-skeleton-image-width: ${this.width};\n --emw-skeleton-image-height: ${this.height};\n --emw-skeleton-image-border-radius: ${this.borderRadius}px;\n --emw-skeleton-image-margin-bottom: ${this.marginBottom}px;\n --emw-skeleton-image-margin-top: ${this.marginTop}px;\n --emw-skeleton-image-margin-left: ${this.marginLeft}px;\n --emw-skeleton-image-margin-right: ${this.marginRight}px;\n --emw-skeleton-image-background: ${this.color};\n --emw-skeleton-primary-color: ${this.primaryColor};\n --emw-skeleton-secondary-color: ${this.secondaryColor};\n }\n `;break;case"title":e=`\n :host {\n --emw-skeleton-title-width: ${this.width};\n --emw-skeleton-title-height: ${this.height};\n --emw-skeleton-title-border-radius: ${this.borderRadius}px;\n --emw-skeleton-title-margin-bottom: ${this.marginBottom}px;\n --emw-skeleton-title-margin-top: ${this.marginTop}px;\n --emw-skeleton-title-margin-left: ${this.marginLeft}px;\n --emw-skeleton-title-margin-right: ${this.marginRight}px;\n --emw-skeleton-title-background: ${this.color};\n --emw-skeleton-primary-color: ${this.primaryColor};\n --emw-skeleton-secondary-color: ${this.secondaryColor};\n }\n `;break;case"text":e=`\n :host {\n --emw-skeleton-text-width: ${this.width};\n --emw-skeleton-text-height: ${this.height};\n --emw-skeleton-text-border-radius: ${this.borderRadius}px;\n --emw-skeleton-text-margin-bottom: ${this.marginBottom}px;\n --emw-skeleton-text-margin-top: ${this.marginTop}px;\n --emw-skeleton-text-margin-left: ${this.marginLeft}px;\n --emw-skeleton-text-margin-right: ${this.marginRight}px;\n --emw-skeleton-text-background: ${this.color};\n --emw-skeleton-primary-color: ${this.primaryColor};\n --emw-skeleton-secondary-color: ${this.secondaryColor};\n }\n `;break;case"rectangle":e=`\n :host {\n --emw-skeleton-rectangle-width: ${this.width};\n --emw-skeleton-rectangle-height: ${this.height};\n --emw-skeleton-rectangle-border-radius: ${this.borderRadius}px;\n --emw-skeleton-rectangle-margin-bottom: ${this.marginBottom}px;\n --emw-skeleton-rectangle-margin-top: ${this.marginTop}px;\n --emw-skeleton-rectangle-margin-left: ${this.marginLeft}px;\n --emw-skeleton-rectangle-margin-right: ${this.marginRight}px;\n --emw-skeleton-rectangle-background: ${this.color};\n --emw-skeleton-primary-color: ${this.primaryColor};\n --emw-skeleton-secondary-color: ${this.secondaryColor};\n }\n `;break;case"circle":e=`\n :host {\n --emw-skeleton-circle-size: ${this.size};\n --emw-skeleton-circle-background: ${this.color};\n --emw-skeleton-primary-color: ${this.primaryColor};\n --emw-skeleton-secondary-color: ${this.secondaryColor};\n }\n `;break;default:e=""}return t(n,{key:"3bb792a149db7fe732d5cbfa092cdb4d6ca0689e"},t("style",{key:"a4607599b60659f385ae2660513e38b383739674"},e),this.handleStructure(this.structure))}static get watchers(){return{structure:["handleStructureChange"]}}};o.style=":host{display:block;--emw-skeleton-rectangle-background:#c2c2c2;--emw-skeleton-circle-background:#c2c2c2;--emw-skeleton-text-background:#c2c2c2;--emw-skeleton-title-background:#c2c2c2;--emw-skeleton-image-background:#c2c2c2;--emw-skeleton-logo-background:#c2c2c2;--emw-skeleton-primary-color:#e0e0e0;--emw-skeleton-secondary-color:#f0f0f0}.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, 2px)}.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, 5px);margin-bottom:var(--emw-skeleton-text-margin-bottom, 5px)}.Text:last-child{width:var(--emw-skeleton-text-width-100, 300px)}.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, 5px);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, inherit)}.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, 5px)}@keyframes skeleton-loading{0%{background-color:var(--emw-skeleton-primary-color, var(--emw-skeleton-color-0, #c2c2c2))}100%{background-color:var(--emw-skeleton-secondary-color, var(--emw-skeleton-color-100, #f0f0f0))}}";export{o as U}