@everymatrix/ui-skeleton 1.69.0 → 1.69.3

package/dist/cjs/index.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const uiSkeleton = require('./ui-skeleton-0b101594.js');
+const uiSkeleton = require('./ui-skeleton-282391af.js');
 require('./index-946ac65b.js');
 
 

package/dist/cjs/loader.cjs.js

@@ -8,7 +8,7 @@ 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"]}]]]], options);
+  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]},null,{"structure":["handleStructureChange"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

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

@@ -0,0 +1,179 @@
+'use strict';
+
+const index = require('./index-946ac65b.js');
+
+const uiSkeletonCss = ":host{display:block}.Skeleton{animation:skeleton-loading 1s linear infinite alternate}.Rectangle{background-color:var(--emw-skeleton-rectangle-background, #c2c2c2);width:var(--emw-skeleton-rectangle-width, 400px);height:var(--emw-skeleton-rectangle-height, 200px);border-radius:var(--emw-skeleton-rectangle-border-radius, 10px)}.Circle{background-color:var(--emw-skeleton-circle-background, #c2c2c2);width:var(--emw-skeleton-circle-size, 400px);height:var(--emw-skeleton-circle-size, 400px);border-radius:50%}.Text{background-color:var(--emw-skeleton-text-background, #c2c2c2);width:var(--emw-skeleton-text-width, 500px);height:var(--emw-skeleton-text-height, 20px);border-radius:var(--emw-skeleton-text-border-radius, 10px);margin-bottom:var(--emw-skeleton-text-margin-bottom, 5px)}.Text:last-child{width:calc(var(--emw-skeleton-text-width, 400px) - 100px)}.Title{background-color:var(--emw-skeleton-title-background, #c2c2c2);width:var(--emw-skeleton-title-width, 300px);height:var(--emw-skeleton-title-height, 30px);border-radius:var(--emw-skeleton-title-border-radius, 10px);margin-bottom:var(--emw-skeleton-title-margin-bottom, 5px)}.Image{background-color:var(--emw-skeleton-image-background, #c2c2c2);width:var(--emw-skeleton-image-width, 100%);height:var(--emw-skeleton-image-height, 100%);border-radius:var(--emw-skeleton-image-border-radius, unset)}.Logo{background-color:var(--emw-skeleton-logo-background, #c2c2c2);width:var(--emw-skeleton-logo-width, 120px);height:var(--emw-skeleton-logo-height, 75px);border-radius:var(--emw-skeleton-logo-border-radius, 10px)}@keyframes skeleton-loading{0%{background-color:var(--emw-skeleton-primary-color, #e0e0e0)}100%{background-color:var(--emw-skeleton-secondary-color, #f0f0f0)}}";
+const UiSkeletonStyle0 = uiSkeletonCss;
+
+const UiSkeleton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        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),
+            size: this.handleStylingProps(this.size)
+        };
+        this.structure = undefined;
+        this.width = 'unset';
+        this.height = 'unset';
+        this.borderRadius = 'unset';
+        this.marginBottom = 'unset';
+        this.marginTop = 'unset';
+        this.marginLeft = 'unset';
+        this.marginRight = 'unset';
+        this.animation = true;
+        this.rows = 0;
+        this.size = '100%';
+    }
+    handleStructureChange(newValue, oldValue) {
+        if (oldValue !== newValue) {
+            this.handleStructure(newValue);
+        }
+    }
+    handleStylingProps(value) {
+        switch (typeof value) {
+            case 'number':
+                return value === 0 ? 0 : `${value}px`;
+            case 'undefined':
+                return 'unset';
+            case 'string':
+                if (['auto', 'unset', 'none', 'inherit', 'initial'].includes(value) ||
+                    value.endsWith('px') ||
+                    value.endsWith('%')) {
+                    return value;
+                }
+                else {
+                    return 'unset';
+                }
+            default:
+                return 'unset';
+        }
+    }
+    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: '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.stylingValue.width};
+            --emw-skeleton-logo-height: ${this.stylingValue.height};
+            --emw-skeleton-logo-border-radius: ${this.stylingValue.borderRadius};
+            --emw-skeleton-logo-margin-bottom: ${this.stylingValue.marginBottom};
+            --emw-skeleton-logo-margin-top: ${this.stylingValue.marginTop};
+            --emw-skeleton-logo-margin-left: ${this.stylingValue.marginLeft};
+            --emw-skeleton-logo-margin-right: ${this.stylingValue.marginRight};
+          }
+        `;
+                break;
+            case 'image':
+                styleBlock = `
+          :host {
+            --emw-skeleton-image-width: ${this.stylingValue.width};
+            --emw-skeleton-image-height: ${this.stylingValue.height};
+            --emw-skeleton-image-border-radius: ${this.stylingValue.borderRadius};
+            --emw-skeleton-image-margin-bottom: ${this.stylingValue.marginBottom};
+            --emw-skeleton-image-margin-top: ${this.stylingValue.marginTop};
+            --emw-skeleton-image-margin-left: ${this.stylingValue.marginLeft};
+            --emw-skeleton-image-margin-right: ${this.stylingValue.marginRight};
+          }
+        `;
+                break;
+            case 'title':
+                styleBlock = `
+          :host {
+            --emw-skeleton-title-width: ${this.stylingValue.width};
+            --emw-skeleton-title-height: ${this.stylingValue.height};
+            --emw-skeleton-title-border-radius: ${this.stylingValue.borderRadius};
+            --emw-skeleton-title-margin-bottom: ${this.stylingValue.marginBottom};
+            --emw-skeleton-title-margin-top: ${this.stylingValue.marginTop};
+            --emw-skeleton-title-margin-left: ${this.stylingValue.marginLeft};
+            --emw-skeleton-title-margin-right: ${this.stylingValue.marginRight};
+          }
+        `;
+                break;
+            case 'text':
+                styleBlock = `
+          :host {
+            --emw-skeleton-text-width: ${this.stylingValue.width};
+            --emw-skeleton-text-height: ${this.stylingValue.height};
+            --emw-skeleton-text-border-radius: ${this.stylingValue.borderRadius};
+            --emw-skeleton-text-margin-bottom: ${this.stylingValue.marginBottom};
+            --emw-skeleton-text-margin-top: ${this.stylingValue.marginTop};
+            --emw-skeleton-text-margin-left: ${this.stylingValue.marginLeft};
+            --emw-skeleton-text-margin-right: ${this.stylingValue.marginRight};
+          }
+        `;
+                break;
+            case 'rectangle':
+                styleBlock = `
+          :host {
+            --emw-skeleton-rectangle-width: ${this.stylingValue.width};
+            --emw-skeleton-rectangle-height: ${this.stylingValue.height};
+            --emw-skeleton-rectangle-border-radius: ${this.stylingValue.borderRadius};
+            --emw-skeleton-rectangle-margin-bottom: ${this.stylingValue.marginBottom};
+            --emw-skeleton-rectangle-margin-top: ${this.stylingValue.marginTop};
+            --emw-skeleton-rectangle-margin-left: ${this.stylingValue.marginLeft};
+            --emw-skeleton-rectangle-margin-right: ${this.stylingValue.marginRight};
+          }
+        `;
+                break;
+            case 'circle':
+                styleBlock = `
+          :host {
+            --emw-skeleton-circle-size: ${this.stylingValue.size};
+          }
+        `;
+                break;
+            default:
+                styleBlock = '';
+        }
+        return (index.h(index.Host, { key: 'e6b885bfd985ce7663d990756fe9101e25eb97f0' }, index.h("style", { key: '06ae24c7bb74f4dacfc12ae58085333f9dc89da5' }, 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,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const uiSkeleton = require('./ui-skeleton-0b101594.js');
+const uiSkeleton = require('./ui-skeleton-282391af.js');
 require('./index-946ac65b.js');
 
 

package/dist/cjs/ui-skeleton.cjs.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"]}]]]], options);
+  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]},null,{"structure":["handleStructureChange"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

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

@@ -1,13 +1,5 @@
 :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 {
@@ -18,7 +10,7 @@
   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);
+  border-radius: var(--emw-skeleton-rectangle-border-radius, 10px);
 }
 
 .Circle {
@@ -32,18 +24,18 @@
   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);
+  border-radius: var(--emw-skeleton-text-border-radius, 10px);
   margin-bottom: var(--emw-skeleton-text-margin-bottom, 5px);
 }
 .Text:last-child {
-  width: var(--emw-skeleton-text-width-100, 300px);
+  width: calc(var(--emw-skeleton-text-width, 400px) - 100px);
 }
 
 .Title {
   background-color: var(--emw-skeleton-title-background, #c2c2c2);
   width: var(--emw-skeleton-title-width, 300px);
   height: var(--emw-skeleton-title-height, 30px);
-  border-radius: var(--emw-skeleton-title-border-radius, 5px);
+  border-radius: var(--emw-skeleton-title-border-radius, 10px);
   margin-bottom: var(--emw-skeleton-title-margin-bottom, 5px);
 }
 
@@ -51,21 +43,21 @@
   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);
+  border-radius: var(--emw-skeleton-image-border-radius, unset);
 }
 
 .Logo {
   background-color: var(--emw-skeleton-logo-background, #c2c2c2);
   width: var(--emw-skeleton-logo-width, 120px);
   height: var(--emw-skeleton-logo-height, 75px);
-  border-radius: var(--emw-skeleton-logo-border-radius, 5px);
+  border-radius: var(--emw-skeleton-logo-border-radius, 10px);
 }
 
 @keyframes skeleton-loading {
   0% {
-    background-color: var(--emw-skeleton-primary-color, var(--emw-skeleton-color-0, #c2c2c2));
+    background-color: var(--emw-skeleton-primary-color, #e0e0e0);
   }
   100% {
-    background-color: var(--emw-skeleton-secondary-color, var(--emw-skeleton-color-100, #f0f0f0));
+    background-color: var(--emw-skeleton-secondary-color, #f0f0f0);
   }
 }