@everymatrix/ui-skeleton 1.60.0 → 1.60.2

package/dist/cjs/{index-00751390.js → index-946ac65b.js}

@@ -21,7 +21,7 @@ function _interopNamespace(e) {
 }
 
 const NAMESPACE = 'ui-skeleton';
-const BUILD = /* ui-skeleton */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: false, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: false, element: false, event: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: false, propNumber: true, propString: true, reflect: false, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: false, slot: false, slotChildNodesFix: false, slotRelocation: false, state: false, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: false, vdomPropOrAttr: false, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: false, vdomXlink: false, watchCallback: true };
+const BUILD = /* ui-skeleton */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: false, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: false, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: false, element: false, event: false, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: false, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: false, propNumber: true, propString: true, reflect: false, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: false, slot: false, slotChildNodesFix: false, slotRelocation: false, state: false, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: false, vdomPropOrAttr: false, vdomRef: false, vdomRender: true, vdomStyle: false, vdomText: true, vdomXlink: false, watchCallback: true };
 
 /*
  Stencil Client Platform v4.19.2 | MIT Licensed | https://stenciljs.com
@@ -380,32 +380,7 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
       const newClasses = parseClassList(newValue);
       classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
       classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
-    } else if (memberName === "style") {
-      {
-        for (const prop in oldValue) {
-          if (!newValue || newValue[prop] == null) {
-            if (prop.includes("-")) {
-              elm.style.removeProperty(prop);
-            } else {
-              elm.style[prop] = "";
-            }
-          }
-        }
-      }
-      for (const prop in newValue) {
-        if (!oldValue || newValue[prop] !== oldValue[prop]) {
-          if (prop.includes("-")) {
-            elm.style.setProperty(prop, newValue[prop]);
-          } else {
-            elm.style[prop] = newValue[prop];
-          }
-        }
-      }
-    } else if (memberName === "key") ; else if (memberName === "ref") {
-      if (newValue) {
-        newValue(elm);
-      }
-    } else ;
+    }
   }
 };
 var parseClassListRegex = /\s/;
@@ -443,7 +418,9 @@ var createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
   let i2 = 0;
   let elm;
   let childNode;
-  {
+  if (newVNode2.$text$ !== null) {
+    elm = newVNode2.$elm$ = doc.createTextNode(newVNode2.$text$);
+  } else {
     elm = newVNode2.$elm$ = doc.createElement(
       !useNativeShadowDom && BUILD.slotRelocation && newVNode2.$flags$ & 2 /* isSlotFallback */ ? "slot-fb" : newVNode2.$tag$
     );
@@ -480,7 +457,6 @@ var removeVnodes = (vnodes, startIdx, endIdx) => {
     const vnode = vnodes[index];
     if (vnode) {
       const elm = vnode.$elm$;
-      nullifyVNodeRefs(vnode);
       if (elm) {
         elm.remove();
       }
@@ -584,7 +560,8 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
   const elm = newVNode2.$elm$ = oldVNode.$elm$;
   const oldChildren = oldVNode.$children$;
   const newChildren = newVNode2.$children$;
-  {
+  const text = newVNode2.$text$;
+  if (text === null) {
     {
       {
         updateElement(oldVNode, newVNode2);
@@ -593,16 +570,15 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
     if (oldChildren !== null && newChildren !== null) {
       updateChildren(elm, oldChildren, newVNode2, newChildren, isInitialRender);
     } else if (newChildren !== null) {
+      if (oldVNode.$text$ !== null) {
+        elm.textContent = "";
+      }
       addVnodes(elm, null, newVNode2, newChildren, 0, newChildren.length - 1);
     } else if (oldChildren !== null) {
       removeVnodes(oldChildren, 0, oldChildren.length - 1);
     }
-  }
-};
-var nullifyVNodeRefs = (vNode) => {
-  {
-    vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
-    vNode.$children$ && vNode.$children$.map(nullifyVNodeRefs);
+  } else if (oldVNode.$text$ !== text) {
+    elm.data = text;
   }
 };
 var insertBefore = (parent, newNode, reference) => {
@@ -720,16 +696,12 @@ var postUpdateComponent = (hostRef) => {
   const tagName = hostRef.$cmpMeta$.$tagName$;
   const elm = hostRef.$hostElement$;
   const endPostUpdate = createTime("postUpdate", tagName);
-  const instance = hostRef.$lazyInstance$ ;
   const ancestorComponent = hostRef.$ancestorComponent$;
   if (!(hostRef.$flags$ & 64 /* hasLoadedComponent */)) {
     hostRef.$flags$ |= 64 /* hasLoadedComponent */;
     {
       addHydratedFlag(elm);
     }
-    {
-      safeCall(instance, "componentDidLoad");
-    }
     endPostUpdate();
     {
       hostRef.$onReadyResolve$(elm);
@@ -757,16 +729,6 @@ var appDidLoad = (who) => {
   }
   nextTick(() => emitEvent(win, "appload", { detail: { namespace: NAMESPACE } }));
 };
-var safeCall = (instance, method, arg) => {
-  if (instance && instance[method]) {
-    try {
-      return instance[method](arg);
-    } catch (e) {
-      consoleError(e);
-    }
-  }
-  return void 0;
-};
 var addHydratedFlag = (elm) => {
   var _a;
   return elm.classList.add((_a = BUILD.hydratedSelectorName) != null ? _a : "hydrated") ;
@@ -1099,6 +1061,7 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
 // src/runtime/nonce.ts
 var setNonce = (nonce) => plt.$nonce$ = nonce;
 
+exports.Host = Host;
 exports.bootstrapLazy = bootstrapLazy;
 exports.h = h;
 exports.promiseResolve = promiseResolve;

package/dist/cjs/index.cjs.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const uiSkeleton = require('./ui-skeleton-ce8e4a69.js');
-require('./index-00751390.js');
+const uiSkeleton = require('./ui-skeleton-1b7315dc.js');
+require('./index-946ac65b.js');
 
 
 

package/dist/cjs/loader.cjs.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-00751390.js');
+const index = require('./index-946ac65b.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  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"],"primaryColor":["updateStyles"],"secondaryColor":["updateStyles"]}]]]], options);
+  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);
 };
 
 exports.setNonce = index.setNonce;

package/dist/cjs/ui-skeleton-1b7315dc.js

@@ -0,0 +1,171 @@
+'use strict';
+
+const index = require('./index-946ac65b.js');
+
+const uiSkeletonCss = ":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, 250px);height:var(--emw-skeleton-image-height, 200px);border-radius:var(--emw-skeleton-image-border-radius, 10px)}.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))}}";
+const UiSkeletonStyle0 = uiSkeletonCss;
+
+const UiSkeleton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.structure = undefined;
+        this.width = undefined;
+        this.height = undefined;
+        this.borderRadius = undefined;
+        this.marginBottom = undefined;
+        this.marginTop = undefined;
+        this.marginLeft = undefined;
+        this.marginRight = undefined;
+        this.animation = true;
+        this.rows = undefined;
+        this.size = undefined;
+        this.color = undefined;
+        this.primaryColor = undefined;
+        this.secondaryColor = undefined;
+    }
+    handleStructureChange(newValue, oldValue) {
+        if (oldValue !== newValue) {
+            this.handleStructure(newValue);
+        }
+    }
+    handleStructure(structure) {
+        switch (structure) {
+            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 (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: "Logo " + (this.animation ? 'Skeleton' : '') })));
+    }
+    renderImage() {
+        return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: "Image " + (this.animation ? 'Skeleton' : '') })));
+    }
+    renderTitle() {
+        return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: "Title " + (this.animation ? 'Skeleton' : '') })));
+    }
+    renderText() {
+        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' : '') })))));
+    }
+    renderRectangle() {
+        return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: "Rectangle " + (this.animation ? 'Skeleton' : '') })));
+    }
+    renderCircle() {
+        return (index.h("div", { class: "SkeletonContainer" }, index.h("div", { class: "Circle " + (this.animation ? 'Skeleton' : '') })));
+    }
+    render() {
+        let styleBlock = '';
+        switch (this.structure) {
+            case 'logo':
+                styleBlock = `
+          :host {
+            --emw-skeleton-logo-width: ${this.width};
+            --emw-skeleton-logo-height: ${this.height};
+            --emw-skeleton-logo-border-radius: ${this.borderRadius}px;
+            --emw-skeleton-logo-margin-bottom: ${this.marginBottom}px;
+            --emw-skeleton-logo-margin-top: ${this.marginTop}px;
+            --emw-skeleton-logo-margin-left: ${this.marginLeft}px;
+            --emw-skeleton-logo-margin-right: ${this.marginRight}px;
+            --emw-skeleton-logo-background: ${this.color};
+            --emw-skeleton-primary-color: ${this.primaryColor};
+            --emw-skeleton-secondary-color: ${this.secondaryColor};
+          }
+        `;
+                break;
+            case 'image':
+                styleBlock = `
+          :host {
+            --emw-skeleton-image-width: ${this.width};
+            --emw-skeleton-image-height: ${this.height};
+            --emw-skeleton-image-border-radius: ${this.borderRadius}px;
+            --emw-skeleton-image-margin-bottom: ${this.marginBottom}px;
+            --emw-skeleton-image-margin-top: ${this.marginTop}px;
+            --emw-skeleton-image-margin-left: ${this.marginLeft}px;
+            --emw-skeleton-image-margin-right: ${this.marginRight}px;
+            --emw-skeleton-image-background: ${this.color};
+            --emw-skeleton-primary-color: ${this.primaryColor};
+            --emw-skeleton-secondary-color: ${this.secondaryColor};
+          }
+        `;
+                break;
+            case 'title':
+                styleBlock = `
+          :host {
+            --emw-skeleton-title-width: ${this.width};
+            --emw-skeleton-title-height: ${this.height};
+            --emw-skeleton-title-border-radius: ${this.borderRadius}px;
+            --emw-skeleton-title-margin-bottom: ${this.marginBottom}px;
+            --emw-skeleton-title-margin-top: ${this.marginTop}px;
+            --emw-skeleton-title-margin-left: ${this.marginLeft}px;
+            --emw-skeleton-title-margin-right: ${this.marginRight}px;
+            --emw-skeleton-title-background: ${this.color};
+            --emw-skeleton-primary-color: ${this.primaryColor};
+            --emw-skeleton-secondary-color: ${this.secondaryColor};
+          }
+        `;
+                break;
+            case 'text':
+                styleBlock = `
+          :host {
+            --emw-skeleton-text-width: ${this.width};
+            --emw-skeleton-text-height: ${this.height};
+            --emw-skeleton-text-border-radius: ${this.borderRadius}px;
+            --emw-skeleton-text-margin-bottom: ${this.marginBottom}px;
+            --emw-skeleton-text-margin-top: ${this.marginTop}px;
+            --emw-skeleton-text-margin-left: ${this.marginLeft}px;
+            --emw-skeleton-text-margin-right: ${this.marginRight}px;
+            --emw-skeleton-text-background: ${this.color};
+            --emw-skeleton-primary-color: ${this.primaryColor};
+            --emw-skeleton-secondary-color: ${this.secondaryColor};
+          }
+        `;
+                break;
+            case 'rectangle':
+                styleBlock = `
+          :host {
+            --emw-skeleton-rectangle-width: ${this.width};
+            --emw-skeleton-rectangle-height: ${this.height};
+            --emw-skeleton-rectangle-border-radius: ${this.borderRadius}px;
+            --emw-skeleton-rectangle-margin-bottom: ${this.marginBottom}px;
+            --emw-skeleton-rectangle-margin-top: ${this.marginTop}px;
+            --emw-skeleton-rectangle-margin-left: ${this.marginLeft}px;
+            --emw-skeleton-rectangle-margin-right: ${this.marginRight}px;
+            --emw-skeleton-rectangle-background: ${this.color};
+            --emw-skeleton-primary-color: ${this.primaryColor};
+            --emw-skeleton-secondary-color: ${this.secondaryColor};
+          }
+        `;
+                break;
+            case 'circle':
+                styleBlock = `
+          :host {
+            --emw-skeleton-circle-size: ${this.size};
+            --emw-skeleton-circle-background: ${this.color};
+            --emw-skeleton-primary-color: ${this.primaryColor};
+            --emw-skeleton-secondary-color: ${this.secondaryColor};
+          }
+        `;
+                break;
+            default:
+                styleBlock = '';
+        }
+        return (index.h(index.Host, { key: '58f7f9acd15f0f96b8b6f47f6bea81d49a3857c5' }, index.h("style", { key: 'c72ac31d1c55fd5d18ec334629db45977a0f6124' }, styleBlock), this.handleStructure(this.structure)));
+    }
+    static get watchers() { return {
+        "structure": ["handleStructureChange"]
+    }; }
+};
+UiSkeleton.style = UiSkeletonStyle0;
+
+exports.UiSkeleton = UiSkeleton;

package/dist/cjs/ui-skeleton.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const uiSkeleton = require('./ui-skeleton-ce8e4a69.js');
-require('./index-00751390.js');
+const uiSkeleton = require('./ui-skeleton-1b7315dc.js');
+require('./index-946ac65b.js');
 
 
 

package/dist/cjs/ui-skeleton.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-00751390.js');
+const index = require('./index-946ac65b.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 /*
@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  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"],"primaryColor":["updateStyles"],"secondaryColor":["updateStyles"]}]]]], options);
+  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);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/components/ui-skeleton/ui-skeleton.css

@@ -1,3 +1,15 @@
+: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;
 }

package/dist/collection/components/ui-skeleton/ui-skeleton.js

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 export class UiSkeleton {
     constructor() {
         this.structure = undefined;
@@ -21,14 +21,6 @@ export class UiSkeleton {
             this.handleStructure(newValue);
         }
     }
-    updateStyles() {
-        if (this.primaryColor) {
-            this.skeletonContainer.style.setProperty('--emw-skeleton-primary-color', this.primaryColor);
-        }
-        if (this.secondaryColor) {
-            this.skeletonContainer.style.setProperty('--emw-skeleton-secondary-color', this.secondaryColor);
-        }
-    }
     handleStructure(structure) {
         switch (structure) {
             case 'logo':
@@ -44,92 +36,124 @@ export class UiSkeleton {
             case 'circle':
                 return this.renderCircle();
             default:
-                // nothing
-                break;
+                return null;
         }
     }
     renderLogo() {
-        const styles = {
-            width: `${this.width}`,
-            height: `${this.height}`,
-            'background-color': `${this.color}`,
-            'border-radius': `${this.borderRadius}px`,
-            'margin-bottom': `${this.marginBottom}px`,
-            'margin-top': `${this.marginTop}px`,
-            'margin-left': `${this.marginLeft}px`,
-            'margin-right': `${this.marginRight}px`
-        };
-        return (h("div", { ref: el => this.skeletonContainer = el }, h("div", { style: styles, class: "Logo " + (this.animation ? 'Skeleton' : '') })));
+        return (h("div", { class: "SkeletonContainer" }, h("div", { class: "Logo " + (this.animation ? 'Skeleton' : '') })));
     }
     renderImage() {
-        const styles = {
-            width: `${this.width}`,
-            height: `${this.height}`,
-            'background-color': `${this.color}`,
-            'border-radius': `${this.borderRadius}px`,
-            'margin-bottom': `${this.marginBottom}px`,
-            'margin-top': `${this.marginTop}px`,
-            'margin-left': `${this.marginLeft}px`,
-            'margin-right': `${this.marginRight}px`
-        };
-        return (h("div", { ref: el => this.skeletonContainer = el }, h("div", { style: styles, class: "Image " + (this.animation ? 'Skeleton' : '') })));
+        return (h("div", { class: "SkeletonContainer" }, h("div", { class: "Image " + (this.animation ? 'Skeleton' : '') })));
     }
     renderTitle() {
-        const styles = {
-            width: `${this.width}`,
-            height: `${this.height}`,
-            'background-color': `${this.color}`,
-            'border-radius': `${this.borderRadius}px`,
-            'margin-bottom': `${this.marginBottom}px`,
-            'margin-top': `${this.marginTop}px`,
-            'margin-left': `${this.marginLeft}px`,
-            'margin-right': `${this.marginRight}px`
-        };
-        return (h("div", { ref: el => this.skeletonContainer = el }, h("div", { style: styles, class: "Title " + (this.animation ? 'Skeleton' : '') })));
+        return (h("div", { class: "SkeletonContainer" }, h("div", { class: "Title " + (this.animation ? 'Skeleton' : '') })));
     }
     renderText() {
-        const styles = {
-            width: `${this.width}`,
-            height: `${this.height}`,
-            'background-color': `${this.color}`,
-            'border-radius': `${this.borderRadius}px`,
-            'margin-bottom': `${this.marginBottom}px`,
-            'margin-top': `${this.marginTop}px`,
-            'margin-left': `${this.marginLeft}px`,
-            'margin-right': `${this.marginRight}px`
-        };
-        return (Array.from({ length: this.rows > 0 ? this.rows : 1 }).map((_, index) => (h("div", { style: styles, key: index, class: "Text " + (this.animation ? 'Skeleton' : '') }))));
+        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' : '') })))));
     }
     renderRectangle() {
-        const styles = {
-            width: `${this.width}`,
-            height: `${this.height}`,
-            'background-color': `${this.color}`,
-            'border-radius': `${this.borderRadius}px`,
-            'margin-bottom': `${this.marginBottom}px`,
-            'margin-top': `${this.marginTop}px`,
-            'margin-left': `${this.marginLeft}px`,
-            'margin-right': `${this.marginRight}px`
-        };
-        return (h("div", { ref: el => this.skeletonContainer = el }, h("div", { style: styles, class: "Rectangle " + (this.animation ? 'Skeleton' : '') })));
+        return (h("div", { class: "SkeletonContainer" }, h("div", { class: "Rectangle " + (this.animation ? 'Skeleton' : '') })));
     }
     renderCircle() {
-        const styles = {
-            width: `${this.size}`,
-            height: `${this.size}`,
-            'background-color': `${this.color}`,
-            'margin-bottom': `${this.marginBottom}px`,
-            'margin-top': `${this.marginTop}px`,
-            'margin-left': `${this.marginLeft}px`,
-            'margin-right': `${this.marginRight}px`
-        };
-        return (h("div", { ref: el => this.skeletonContainer = el }, h("div", { style: styles, class: "Circle " + (this.animation ? 'Skeleton' : '') })));
-    }
-    componentDidLoad() {
-        this.updateStyles();
+        return (h("div", { class: "SkeletonContainer" }, h("div", { class: "Circle " + (this.animation ? 'Skeleton' : '') })));
     }
     render() {
-        return (this.handleStructure(this.structure));
+        let styleBlock = '';
+        switch (this.structure) {
+            case 'logo':
+                styleBlock = `
+          :host {
+            --emw-skeleton-logo-width: ${this.width};
+            --emw-skeleton-logo-height: ${this.height};
+            --emw-skeleton-logo-border-radius: ${this.borderRadius}px;
+            --emw-skeleton-logo-margin-bottom: ${this.marginBottom}px;
+            --emw-skeleton-logo-margin-top: ${this.marginTop}px;
+            --emw-skeleton-logo-margin-left: ${this.marginLeft}px;
+            --emw-skeleton-logo-margin-right: ${this.marginRight}px;
+            --emw-skeleton-logo-background: ${this.color};
+            --emw-skeleton-primary-color: ${this.primaryColor};
+            --emw-skeleton-secondary-color: ${this.secondaryColor};
+          }
+        `;
+                break;
+            case 'image':
+                styleBlock = `
+          :host {
+            --emw-skeleton-image-width: ${this.width};
+            --emw-skeleton-image-height: ${this.height};
+            --emw-skeleton-image-border-radius: ${this.borderRadius}px;
+            --emw-skeleton-image-margin-bottom: ${this.marginBottom}px;
+            --emw-skeleton-image-margin-top: ${this.marginTop}px;
+            --emw-skeleton-image-margin-left: ${this.marginLeft}px;
+            --emw-skeleton-image-margin-right: ${this.marginRight}px;
+            --emw-skeleton-image-background: ${this.color};
+            --emw-skeleton-primary-color: ${this.primaryColor};
+            --emw-skeleton-secondary-color: ${this.secondaryColor};
+          }
+        `;
+                break;
+            case 'title':
+                styleBlock = `
+          :host {
+            --emw-skeleton-title-width: ${this.width};
+            --emw-skeleton-title-height: ${this.height};
+            --emw-skeleton-title-border-radius: ${this.borderRadius}px;
+            --emw-skeleton-title-margin-bottom: ${this.marginBottom}px;
+            --emw-skeleton-title-margin-top: ${this.marginTop}px;
+            --emw-skeleton-title-margin-left: ${this.marginLeft}px;
+            --emw-skeleton-title-margin-right: ${this.marginRight}px;
+            --emw-skeleton-title-background: ${this.color};
+            --emw-skeleton-primary-color: ${this.primaryColor};
+            --emw-skeleton-secondary-color: ${this.secondaryColor};
+          }
+        `;
+                break;
+            case 'text':
+                styleBlock = `
+          :host {
+            --emw-skeleton-text-width: ${this.width};
+            --emw-skeleton-text-height: ${this.height};
+            --emw-skeleton-text-border-radius: ${this.borderRadius}px;
+            --emw-skeleton-text-margin-bottom: ${this.marginBottom}px;
+            --emw-skeleton-text-margin-top: ${this.marginTop}px;
+            --emw-skeleton-text-margin-left: ${this.marginLeft}px;
+            --emw-skeleton-text-margin-right: ${this.marginRight}px;
+            --emw-skeleton-text-background: ${this.color};
+            --emw-skeleton-primary-color: ${this.primaryColor};
+            --emw-skeleton-secondary-color: ${this.secondaryColor};
+          }
+        `;
+                break;
+            case 'rectangle':
+                styleBlock = `
+          :host {
+            --emw-skeleton-rectangle-width: ${this.width};
+            --emw-skeleton-rectangle-height: ${this.height};
+            --emw-skeleton-rectangle-border-radius: ${this.borderRadius}px;
+            --emw-skeleton-rectangle-margin-bottom: ${this.marginBottom}px;
+            --emw-skeleton-rectangle-margin-top: ${this.marginTop}px;
+            --emw-skeleton-rectangle-margin-left: ${this.marginLeft}px;
+            --emw-skeleton-rectangle-margin-right: ${this.marginRight}px;
+            --emw-skeleton-rectangle-background: ${this.color};
+            --emw-skeleton-primary-color: ${this.primaryColor};
+            --emw-skeleton-secondary-color: ${this.secondaryColor};
+          }
+        `;
+                break;
+            case 'circle':
+                styleBlock = `
+          :host {
+            --emw-skeleton-circle-size: ${this.size};
+            --emw-skeleton-circle-background: ${this.color};
+            --emw-skeleton-primary-color: ${this.primaryColor};
+            --emw-skeleton-secondary-color: ${this.secondaryColor};
+          }
+        `;
+                break;
+            default:
+                styleBlock = '';
+        }
+        return (h(Host, { key: '58f7f9acd15f0f96b8b6f47f6bea81d49a3857c5' }, h("style", { key: 'c72ac31d1c55fd5d18ec334629db45977a0f6124' }, styleBlock), this.handleStructure(this.structure)));
     }
     static get is() { return "ui-skeleton"; }
     static get originalStyleUrls() {
@@ -327,7 +351,7 @@ export class UiSkeleton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The size of the circle - only for `circle - it can either be a value in px (150px) or in percentage (100%)"
+                    "text": "The size of the circle - only for `circle` - it can either be a value in px (150px) or in percentage (100%)"
                 },
                 "attribute": "size",
                 "reflect": false
@@ -389,12 +413,6 @@ export class UiSkeleton {
         return [{
                 "propName": "structure",
                 "methodName": "handleStructureChange"
-            }, {
-                "propName": "primaryColor",
-                "methodName": "updateStyles"
-            }, {
-                "propName": "secondaryColor",
-                "methodName": "updateStyles"
             }];
     }
 }