@everymatrix/ui-skeleton 1.60.0 → 1.60.2

package/dist/esm/{index-ae04a8b1.js → index-b2193545.js}

@@ -1,5 +1,5 @@
 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
@@ -358,32 +358,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/;
@@ -421,7 +396,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$
     );
@@ -458,7 +435,6 @@ var removeVnodes = (vnodes, startIdx, endIdx) => {
     const vnode = vnodes[index];
     if (vnode) {
       const elm = vnode.$elm$;
-      nullifyVNodeRefs(vnode);
       if (elm) {
         elm.remove();
       }
@@ -562,7 +538,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);
@@ -571,16 +548,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) => {
@@ -698,16 +674,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);
@@ -735,16 +707,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") ;
@@ -1077,4 +1039,4 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
 // src/runtime/nonce.ts
 var setNonce = (nonce) => plt.$nonce$ = nonce;
 
-export { bootstrapLazy as b, h, promiseResolve as p, registerInstance as r, setNonce as s };
+export { Host as H, bootstrapLazy as b, h, promiseResolve as p, registerInstance as r, setNonce as s };

package/dist/esm/index.js

@@ -1,2 +1,2 @@
-export { U as UiSkeleton } from './ui-skeleton-a642cced.js';
-import './index-ae04a8b1.js';
+export { U as UiSkeleton } from './ui-skeleton-ea659b95.js';
+import './index-b2193545.js';

package/dist/esm/loader.js

@@ -1,11 +1,11 @@
-import { b as bootstrapLazy } from './index-ae04a8b1.js';
-export { s as setNonce } from './index-ae04a8b1.js';
+import { b as bootstrapLazy } from './index-b2193545.js';
+export { s as setNonce } from './index-b2193545.js';
 import { g as globalScripts } from './app-globals-0f993ce5.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  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"],"primaryColor":["updateStyles"],"secondaryColor":["updateStyles"]}]]]], options);
+  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);
 };
 
 export { defineCustomElements };

package/dist/esm/ui-skeleton-ea659b95.js

@@ -0,0 +1,169 @@
+import { r as registerInstance, h, H as Host } from './index-b2193545.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) {
+        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 (h("div", { class: "SkeletonContainer" }, h("div", { class: "Logo " + (this.animation ? 'Skeleton' : '') })));
+    }
+    renderImage() {
+        return (h("div", { class: "SkeletonContainer" }, h("div", { class: "Image " + (this.animation ? 'Skeleton' : '') })));
+    }
+    renderTitle() {
+        return (h("div", { class: "SkeletonContainer" }, h("div", { class: "Title " + (this.animation ? 'Skeleton' : '') })));
+    }
+    renderText() {
+        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() {
+        return (h("div", { class: "SkeletonContainer" }, h("div", { class: "Rectangle " + (this.animation ? 'Skeleton' : '') })));
+    }
+    renderCircle() {
+        return (h("div", { class: "SkeletonContainer" }, 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 (h(Host, { key: '58f7f9acd15f0f96b8b6f47f6bea81d49a3857c5' }, h("style", { key: 'c72ac31d1c55fd5d18ec334629db45977a0f6124' }, styleBlock), this.handleStructure(this.structure)));
+    }
+    static get watchers() { return {
+        "structure": ["handleStructureChange"]
+    }; }
+};
+UiSkeleton.style = UiSkeletonStyle0;
+
+export { UiSkeleton as U };

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

@@ -1,2 +1,2 @@
-export { U as ui_skeleton } from './ui-skeleton-a642cced.js';
-import './index-ae04a8b1.js';
+export { U as ui_skeleton } from './ui-skeleton-ea659b95.js';
+import './index-b2193545.js';

package/dist/esm/ui-skeleton.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-ae04a8b1.js';
-export { s as setNonce } from './index-ae04a8b1.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-b2193545.js';
+export { s as setNonce } from './index-b2193545.js';
 import { g as globalScripts } from './app-globals-0f993ce5.js';
 
 /*
@@ -16,5 +16,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  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"],"primaryColor":["updateStyles"],"secondaryColor":["updateStyles"]}]]]], options);
+  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);
 });

package/dist/types/Users/adrian.pripon/Documents/Work/widgets-monorepo/packages/stencil/ui-skeleton/.stencil/packages/stencil/ui-skeleton/stencil.config.d.ts

@@ -0,0 +1,2 @@
+import { Config } from '../../../../../../../../../../../../stencil-public-runtime';
+export declare const config: Config;

package/dist/types/Users/adrian.pripon/Documents/Work/widgets-monorepo/packages/stencil/ui-skeleton/.stencil/packages/stencil/ui-skeleton/stencil.config.dev.d.ts

@@ -0,0 +1,2 @@
+import { Config } from '../../../../../../../../../../../../stencil-public-runtime';
+export declare const config: Config;

package/dist/types/components/ui-skeleton/ui-skeleton.d.ts

@@ -40,7 +40,7 @@ export declare class UiSkeleton {
      */
     rows: number;
     /**
-     * The size of the circle - only for `circle - it can either be a value in px (150px) or in percentage (100%)
+     * The size of the circle - only for `circle` - it can either be a value in px (150px) or in percentage (100%)
      */
     size: string;
     /**
@@ -55,17 +55,13 @@ export declare class UiSkeleton {
      * Secondary color of the skeleton when animation is `on` - hexa value (e.g. #ffffff)
      */
     secondaryColor: string;
-    private skeletonContainer;
-    constructor();
     handleStructureChange(newValue: any, oldValue: any): void;
-    updateStyles(): void;
-    handleStructure(structure: any): any;
-    renderLogo(): any;
-    renderImage(): any;
-    renderTitle(): any;
-    renderText(): any[];
-    renderRectangle(): any;
-    renderCircle(): any;
-    componentDidLoad(): void;
+    private handleStructure;
+    private renderLogo;
+    private renderImage;
+    private renderTitle;
+    private renderText;
+    private renderRectangle;
+    private renderCircle;
     render(): any;
 }

package/dist/types/components.d.ts

@@ -52,7 +52,7 @@ export namespace Components {
          */
         "secondaryColor": string;
         /**
-          * The size of the circle - only for `circle - it can either be a value in px (150px) or in percentage (100%)
+          * The size of the circle - only for `circle` - it can either be a value in px (150px) or in percentage (100%)
          */
         "size": string;
         /**
@@ -123,7 +123,7 @@ declare namespace LocalJSX {
          */
         "secondaryColor"?: string;
         /**
-          * The size of the circle - only for `circle - it can either be a value in px (150px) or in percentage (100%)
+          * The size of the circle - only for `circle` - it can either be a value in px (150px) or in percentage (100%)
          */
         "size"?: string;
         /**

package/dist/ui-skeleton/index.esm.js

@@ -1 +1 @@
-export{U as UiSkeleton}from"./p-fe2a4a98.js";import"./p-59752f80.js";
+export{U as UiSkeleton}from"./p-73f0c8e4.js";import"./p-4928252f.js";

package/dist/ui-skeleton/p-4928252f.js

@@ -0,0 +1,2 @@
+var e=Object.defineProperty,t=new WeakMap,n=e=>t.get(e),l=(e,n)=>t.set(n.t=e,n),o=(e,t)=>(0,console.error)(e,t),s=new Map,r=new Map,i="slot-fb{display:contents}slot-fb[hidden]{display:none}",c="undefined"!=typeof window?window:{},u=c.document||{head:{}},a={l:0,o:"",jmp:e=>e(),raf:e=>requestAnimationFrame(e),ael:(e,t,n,l)=>e.addEventListener(t,n,l),rel:(e,t,n,l)=>e.removeEventListener(t,n,l),ce:(e,t)=>new CustomEvent(e,t)},f=e=>Promise.resolve(e),h=(()=>{try{return new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replaceSync}catch(e){}return!1})(),m=!1,d=[],p=[],y=(e,t)=>n=>{e.push(n),m||(m=!0,t&&4&a.l?w(v):a.raf(v))},$=e=>{for(let t=0;t<e.length;t++)try{e[t](performance.now())}catch(e){o(e)}e.length=0},v=()=>{$(d),$(p),(m=d.length>0)&&a.raf(v)},w=e=>f().then(e),b=y(p,!0),S={},g=e=>"object"==(e=typeof e)||"function"===e;function j(e){var t,n,l;return null!=(l=null==(n=null==(t=e.head)?void 0:t.querySelector('meta[name="csp-nonce"]'))?void 0:n.getAttribute("content"))?l:void 0}((t,n)=>{for(var l in n)e(t,l,{get:n[l],enumerable:!0})})({},{err:()=>O,map:()=>E,ok:()=>k,unwrap:()=>M,unwrapErr:()=>P});var k=e=>({isOk:!0,isErr:!1,value:e}),O=e=>({isOk:!1,isErr:!0,value:e});function E(e,t){if(e.isOk){const n=t(e.value);return n instanceof Promise?n.then((e=>k(e))):k(n)}if(e.isErr)return O(e.value);throw"should never get here"}var C,M=e=>{if(e.isOk)return e.value;throw e.value},P=e=>{if(e.isErr)return e.value;throw e.value},x=(e,t,...n)=>{let l=null,o=null,s=!1,r=!1;const i=[],c=t=>{for(let n=0;n<t.length;n++)l=t[n],Array.isArray(l)?c(l):null!=l&&"boolean"!=typeof l&&((s="function"!=typeof e&&!g(l))&&(l+=""),s&&r?i[i.length-1].i+=l:i.push(s?T(null,l):l),r=s)};if(c(n),t){t.key&&(o=t.key);{const e=t.className||t.class;e&&(t.class="object"!=typeof e?e:Object.keys(e).filter((t=>e[t])).join(" "))}}const u=T(e,null);return u.u=t,i.length>0&&(u.h=i),u.m=o,u},T=(e,t)=>({l:0,p:e,i:t,$:null,h:null,u:null,m:null}),A={},F=new WeakMap,H=e=>"sc-"+e.v,N=(e,t,n,l)=>{if(n!==l&&(t.toLowerCase(),"class"===t)){const t=e.classList,o=L(n),s=L(l);t.remove(...o.filter((e=>e&&!s.includes(e)))),t.add(...s.filter((e=>e&&!o.includes(e))))}},R=/\s/,L=e=>e?e.split(R):[],U=(e,t)=>{const n=11===t.$.nodeType&&t.$.host?t.$.host:t.$,l=e&&e.u||S,o=t.u||S;for(const e of W(Object.keys(l)))e in o||N(n,e,l[e],void 0);for(const e of W(Object.keys(o)))N(n,e,l[e],o[e])};function W(e){return e.includes("ref")?[...e.filter((e=>"ref"!==e)),"ref"]:e}var q=(e,t,n)=>{const l=t.h[n];let o,s,r=0;if(null!==l.i)o=l.$=u.createTextNode(l.i);else if(o=l.$=u.createElement(l.p),U(null,l),l.h)for(r=0;r<l.h.length;++r)s=q(e,l,r),s&&o.appendChild(s);return o["s-hn"]=C,o},D=(e,t,n,l,o,s)=>{let r,i=e;for(;o<=s;++o)l[o]&&(r=q(null,n,o),r&&(l[o].$=r,z(i,r,t)))},G=(e,t,n)=>{for(let l=t;l<=n;++l){const t=e[l];if(t){const e=t.$;e&&e.remove()}}},V=(e,t,n=!1)=>e.p===t.p&&(!!n||e.m===t.m),_=(e,t,n=!1)=>{const l=t.$=e.$,o=e.h,s=t.h,r=t.i;null===r?(U(e,t),null!==o&&null!==s?((e,t,n,l,o=!1)=>{let s,r,i=0,c=0,u=0,a=0,f=t.length-1,h=t[0],m=t[f],d=l.length-1,p=l[0],y=l[d];for(;i<=f&&c<=d;)if(null==h)h=t[++i];else if(null==m)m=t[--f];else if(null==p)p=l[++c];else if(null==y)y=l[--d];else if(V(h,p,o))_(h,p,o),h=t[++i],p=l[++c];else if(V(m,y,o))_(m,y,o),m=t[--f],y=l[--d];else if(V(h,y,o))_(h,y,o),z(e,h.$,m.$.nextSibling),h=t[++i],y=l[--d];else if(V(m,p,o))_(m,p,o),z(e,m.$,h.$),m=t[--f],p=l[++c];else{for(u=-1,a=i;a<=f;++a)if(t[a]&&null!==t[a].m&&t[a].m===p.m){u=a;break}u>=0?(r=t[u],r.p!==p.p?s=q(t&&t[c],n,u):(_(r,p,o),t[u]=void 0,s=r.$),p=l[++c]):(s=q(t&&t[c],n,c),p=l[++c]),s&&z(h.$.parentNode,s,h.$)}i>f?D(e,null==l[d+1]?null:l[d+1].$,n,l,c,d):c>d&&G(t,i,f)})(l,o,t,s,n):null!==s?(null!==e.i&&(l.textContent=""),D(l,null,t,s,0,s.length-1)):null!==o&&G(o,0,o.length-1)):e.i!==r&&(l.data=r)},z=(e,t,n)=>null==e?void 0:e.insertBefore(t,n),B=(e,t)=>{t&&!e.S&&t["s-p"]&&t["s-p"].push(new Promise((t=>e.S=t)))},I=(e,t)=>{if(e.l|=16,!(4&e.l))return B(e,e.j),b((()=>J(e,t)));e.l|=512},J=(e,t)=>{const n=e.t;if(!n)throw Error(`Can't render component <${e.$hostElement$.tagName.toLowerCase()} /> with invalid Stencil runtime! Make sure this imported component is compiled with a \`externalRuntime: true\` flag. For more information, please refer to https://stenciljs.com/docs/custom-elements#externalruntime`);return K(void 0,(()=>X(e,n,t)))},K=(e,t)=>Q(e)?e.then(t).catch((e=>{console.error(e),t()})):t(),Q=e=>e instanceof Promise||e&&e.then&&"function"==typeof e.then,X=async(e,t,n)=>{var l;const o=e.$hostElement$,s=o["s-rc"];n&&(e=>{const t=e.k;((e,t)=>{var n;const l=H(t),o=r.get(l);if(e=11===e.nodeType?e:u,o)if("string"==typeof o){let s,r=F.get(e=e.head||e);if(r||F.set(e,r=new Set),!r.has(l)){{s=u.createElement("style"),s.innerHTML=o;const t=null!=(n=a.O)?n:j(u);null!=t&&s.setAttribute("nonce",t),e.insertBefore(s,e.querySelector("link"))}4&t.l&&(s.innerHTML+=i),r&&r.add(l)}}else e.adoptedStyleSheets.includes(o)||(e.adoptedStyleSheets=[...e.adoptedStyleSheets,o])})(e.$hostElement$.getRootNode(),t)})(e);Y(e,t,o,n),s&&(s.map((e=>e())),o["s-rc"]=void 0);{const t=null!=(l=o["s-p"])?l:[],n=()=>Z(e);0===t.length?n():(Promise.all(t).then(n),e.l|=4,t.length=0)}},Y=(e,t,n,l)=>{try{t=t.render(),e.l&=-17,e.l|=2,((e,t,n=!1)=>{const l=e.$hostElement$,o=e.C||T(null,null),s=(e=>e&&e.p===A)(t)?t:x(null,null,t);if(C=l.tagName,n&&s.u)for(const e of Object.keys(s.u))l.hasAttribute(e)&&!["key","ref","style","class"].includes(e)&&(s.u[e]=l[e]);s.p=null,s.l|=4,e.C=s,s.$=o.$=l,_(o,s,n)})(e,t,l)}catch(t){o(t,e.$hostElement$)}return null},Z=e=>{const t=e.$hostElement$,n=e.j;64&e.l||(e.l|=64,te(t),e.M(t),n||ee()),e.S&&(e.S(),e.S=void 0),512&e.l&&w((()=>I(e,!1))),e.l&=-517},ee=()=>{te(u.documentElement),w((()=>(e=>{const t=a.ce("appload",{detail:{namespace:"ui-skeleton"}});return e.dispatchEvent(t),t})(c)))},te=e=>e.classList.add("hydrated"),ne=(e,t,l)=>{var s,r;const i=e.prototype;if(t.P||t.T||e.watchers){e.watchers&&!t.T&&(t.T=e.watchers);const c=Object.entries(null!=(s=t.P)?s:{});if(c.map((([e,[s]])=>{(31&s||2&l&&32&s)&&Object.defineProperty(i,e,{get(){return((e,t)=>n(this).A.get(t))(0,e)},set(l){((e,t,l,s)=>{const r=n(e);if(!r)throw Error(`Couldn't find host element for "${s.v}" as it is unknown to this Stencil runtime. This usually happens when integrating a 3rd party Stencil component with another Stencil component or application. Please reach out to the maintainers of the 3rd party Stencil component or report this on the Stencil Discord server (https://chat.stenciljs.com) or comment on this similar [GitHub issue](https://github.com/ionic-team/stencil/issues/5457).`);const i=r.$hostElement$,c=r.A.get(t),u=r.l,a=r.t;if(l=((e,t)=>null==e||g(e)?e:4&t?"false"!==e&&(""===e||!!e):2&t?parseFloat(e):1&t?e+"":e)(l,s.P[t][0]),(!(8&u)||void 0===c)&&l!==c&&(!Number.isNaN(c)||!Number.isNaN(l))&&(r.A.set(t,l),a)){if(s.T&&128&u){const e=s.T[t];e&&e.map((e=>{try{a[e](l,c,t)}catch(e){o(e,i)}}))}2==(18&u)&&I(r,!1)}})(this,e,l,t)},configurable:!0,enumerable:!0})})),1&l){const l=new Map;i.attributeChangedCallback=function(e,o,s){a.jmp((()=>{var r;const c=l.get(e);if(this.hasOwnProperty(c))s=this[c],delete this[c];else{if(i.hasOwnProperty(c)&&"number"==typeof this[c]&&this[c]==s)return;if(null==c){const l=n(this),i=null==l?void 0:l.l;if(i&&!(8&i)&&128&i&&s!==o){const n=l.t,i=null==(r=t.T)?void 0:r[e];null==i||i.forEach((t=>{null!=n[t]&&n[t].call(n,s,o,e)}))}return}}this[c]=(null!==s||"boolean"!=typeof this[c])&&s}))},e.observedAttributes=Array.from(new Set([...Object.keys(null!=(r=t.T)?r:{}),...c.filter((([e,t])=>15&t[0])).map((([e,t])=>{const n=t[1]||e;return l.set(n,e),n}))]))}}return e},le=(e,l={})=>{var f;const m=[],d=l.exclude||[],p=c.customElements,y=u.head,$=y.querySelector("meta[charset]"),v=u.createElement("style"),w=[];let b,S=!0;Object.assign(a,l),a.o=new URL(l.resourcesUrl||"./",u.baseURI).href;let g=!1;if(e.map((e=>{e[1].map((l=>{var i;const c={l:l[0],v:l[1],P:l[2],F:l[3]};4&c.l&&(g=!0),c.P=l[2],c.T=null!=(i=l[4])?i:{};const u=c.v,f=class extends HTMLElement{constructor(e){super(e),this.hasRegisteredEventListeners=!1,((e,n)=>{const l={l:0,$hostElement$:e,k:n,A:new Map};l.H=new Promise((e=>l.M=e)),e["s-p"]=[],e["s-rc"]=[],t.set(e,l)})(e=this,c)}connectedCallback(){this.hasRegisteredEventListeners||(this.hasRegisteredEventListeners=!0),b&&(clearTimeout(b),b=null),S?w.push(this):a.jmp((()=>(e=>{if(!(1&a.l)){const t=n(e),l=t.k,i=()=>{};if(1&t.l)(null==t?void 0:t.t)||(null==t?void 0:t.H)&&t.H.then((()=>{}));else{t.l|=1;{let n=e;for(;n=n.parentNode||n.host;)if(n["s-p"]){B(t,t.j=n);break}}l.P&&Object.entries(l.P).map((([t,[n]])=>{if(31&n&&e.hasOwnProperty(t)){const n=e[t];delete e[t],e[t]=n}})),(async(e,t,n)=>{let l;if(!(32&t.l)){if(t.l|=32,n.N){const e=(e=>{const t=e.v.replace(/-/g,"_"),n=e.N;if(!n)return;const l=s.get(n);return l?l[t]:import(`./${n}.entry.js`).then((e=>(s.set(n,e),e[t])),o)
+/*!__STENCIL_STATIC_IMPORT_SWITCH__*/})(n);if(e&&"then"in e){const t=()=>{};l=await e,t()}else l=e;if(!l)throw Error(`Constructor for "${n.v}#${t.R}" was not found`);l.isProxied||(n.T=l.watchers,ne(l,n,2),l.isProxied=!0);const r=()=>{};t.l|=8;try{new l(t)}catch(e){o(e)}t.l&=-9,t.l|=128,r()}else l=e.constructor,customElements.whenDefined(e.localName).then((()=>t.l|=128));if(l&&l.style){let e;"string"==typeof l.style&&(e=l.style);const t=H(n);if(!r.has(t)){const l=()=>{};((e,t,n)=>{let l=r.get(e);h&&n?(l=l||new CSSStyleSheet,"string"==typeof l?l=t:l.replaceSync(t)):l=t,r.set(e,l)})(t,e,!!(1&n.l)),l()}}}const i=t.j,c=()=>I(t,!0);i&&i["s-rc"]?i["s-rc"].push(c):c()})(e,t,l)}i()}})(this)))}disconnectedCallback(){a.jmp((()=>(async()=>{if(!(1&a.l)){const e=n(this);(null==e?void 0:e.t)||(null==e?void 0:e.H)&&e.H.then((()=>{}))}})()))}componentOnReady(){return n(this).H}};c.N=e[0],d.includes(u)||p.get(u)||(m.push(u),p.define(u,ne(f,c,1)))}))})),m.length>0&&(g&&(v.textContent+=i),v.textContent+=m.sort()+"{visibility:hidden}.hydrated{visibility:inherit}",v.innerHTML.length)){v.setAttribute("data-styles","");const e=null!=(f=a.O)?f:j(u);null!=e&&v.setAttribute("nonce",e),y.insertBefore(v,$?$.nextSibling:y.firstChild)}S=!1,w.length?w.map((e=>e.connectedCallback())):a.jmp((()=>b=setTimeout(ee,30)))},oe=e=>a.O=e;export{A as H,le as b,x as h,f as p,l as r,oe as s}

package/dist/ui-skeleton/p-73f0c8e4.js

@@ -0,0 +1 @@
+import{r as e,h as t,H as n}from"./p-4928252f.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:"SkeletonContainer"},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:"58f7f9acd15f0f96b8b6f47f6bea81d49a3857c5"},t("style",{key:"c72ac31d1c55fd5d18ec334629db45977a0f6124"},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, 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))}}";export{o as U}

package/dist/ui-skeleton/p-c73b7e7d.entry.js

@@ -0,0 +1 @@
+export{U as ui_skeleton}from"./p-73f0c8e4.js";import"./p-4928252f.js";

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

@@ -1 +1 @@
-import{p as r,b as o}from"./p-59752f80.js";export{s as setNonce}from"./p-59752f80.js";import{g as t}from"./p-e1255160.js";(()=>{const o=import.meta.url,t={};return""!==o&&(t.resourcesUrl=new URL(".",o).href),r(t)})().then((async r=>(await t(),o([["p-ea31f18e",[[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"]}]]]],r))));
+import{p as r,b as o}from"./p-4928252f.js";export{s as setNonce}from"./p-4928252f.js";import{g as t}from"./p-e1255160.js";(()=>{const o=import.meta.url,t={};return""!==o&&(t.resourcesUrl=new URL(".",o).href),r(t)})().then((async r=>(await t(),o([["p-c73b7e7d",[[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))));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/ui-skeleton",
-  "version": "1.60.0",
+  "version": "1.60.2",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.js",
   "es2015": "./dist/esm/index.mjs",

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

@@ -1,146 +0,0 @@
-'use strict';
-
-const index = require('./index-00751390.js');
-
-const uiSkeletonCss = ".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);
-        }
-    }
-    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':
-                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();
-        }
-    }
-    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 (index.h("div", { ref: el => this.skeletonContainer = el }, index.h("div", { style: styles, 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 (index.h("div", { ref: el => this.skeletonContainer = el }, index.h("div", { style: styles, 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 (index.h("div", { ref: el => this.skeletonContainer = el }, index.h("div", { style: styles, 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$1) => (index.h("div", { style: styles, key: index$1, 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 (index.h("div", { ref: el => this.skeletonContainer = el }, index.h("div", { style: styles, 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 (index.h("div", { ref: el => this.skeletonContainer = el }, index.h("div", { style: styles, class: "Circle " + (this.animation ? 'Skeleton' : '') })));
-    }
-    componentDidLoad() {
-        this.updateStyles();
-    }
-    render() {
-        return (this.handleStructure(this.structure));
-    }
-    static get watchers() { return {
-        "structure": ["handleStructureChange"],
-        "primaryColor": ["updateStyles"],
-        "secondaryColor": ["updateStyles"]
-    }; }
-};
-UiSkeleton.style = UiSkeletonStyle0;
-
-exports.UiSkeleton = UiSkeleton;