@everymatrix/ui-skeleton 0.0.0

package/dist/cjs/index.cjs.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const uiSkeleton = require('./ui-skeleton-43520ebc.js');
+require('./index-c4768c66.js');
+
+
+
+exports.UiSkeleton = uiSkeleton.UiSkeleton;

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-c4768c66.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":[2],"height":[2],"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":[2],"color":[1],"primaryColor":[1,"primary-color"],"secondaryColor":[1,"secondary-color"]},null,{"structure":["handleStructureChange"],"primaryColor":["updateStyles"],"secondaryColor":["updateStyles"]}]]]], options);
+};
+
+exports.setNonce = index.setNonce;
+exports.defineCustomElements = defineCustomElements;

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

@@ -0,0 +1,136 @@
+'use strict';
+
+const index = require('./index-c4768c66.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);
+        /**
+         * Toggles skeleton animation
+         */
+        this.animation = true;
+    }
+    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}px`,
+            height: `${this.height}px`,
+            '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", { style: styles, class: "Skeleton Logo" }));
+    }
+    renderImage() {
+        const styles = {
+            width: `${this.width}px`,
+            height: `${this.height}px`,
+            '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", { style: styles, class: "Skeleton Image" }));
+    }
+    renderTitle() {
+        const styles = {
+            width: `${this.width}px`,
+            height: `${this.height}px`,
+            '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", { style: styles, class: "Skeleton Title" }));
+    }
+    renderText() {
+        const styles = {
+            width: `${this.width}px`,
+            height: `${this.height}px`,
+            '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: "Skeleton Text" }))));
+    }
+    renderRectangle() {
+        const styles = {
+            width: `${this.width}px`,
+            height: `${this.height}px`,
+            'backgroud-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", { style: styles, class: "Skeleton Rectangle" }));
+    }
+    renderCircle() {
+        const styles = {
+            width: `${this.size}px`,
+            height: `${this.size}px`,
+            '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;

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

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const uiSkeleton = require('./ui-skeleton-43520ebc.js');
+require('./index-c4768c66.js');
+
+
+
+exports.ui_skeleton = uiSkeleton.UiSkeleton;

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

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-c4768c66.js');
+const appGlobals = require('./app-globals-3a1e7e63.js');
+
+/*
+ Stencil Client Patch Browser v4.25.1 | MIT Licensed | https://stenciljs.com
+ */
+var patchBrowser = () => {
+  const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('ui-skeleton.cjs.js', document.baseURI).href));
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return index.promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["ui-skeleton.cjs",[[0,"ui-skeleton",{"structure":[1],"width":[2],"height":[2],"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":[2],"color":[1],"primaryColor":[1,"primary-color"],"secondaryColor":[1,"secondary-color"]},null,{"structure":["handleStructureChange"],"primaryColor":["updateStyles"],"secondaryColor":["updateStyles"]}]]]], options);
+});
+
+exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,12 @@
+{
+  "entries": [
+    "components/ui-skeleton/ui-skeleton.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.25.1",
+    "typescriptVersion": "5.5.4"
+  },
+  "collections": [],
+  "bundles": []
+}

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

@@ -0,0 +1 @@
+export { UiSkeleton } from './ui-skeleton';

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

@@ -0,0 +1,59 @@
+.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));
+  }
+}