@everymatrix/ui-skeleton 0.0.0

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

@@ -0,0 +1,418 @@
+import { h } from "@stencil/core";
+export class UiSkeleton {
+    constructor() {
+        /**
+         * 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();
+            default:
+                // nothing
+                break;
+        }
+    }
+    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 (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 (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 (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) => (h("div", { style: styles, key: index, 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 (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 (h("div", { ref: el => this.skeletonContainer = el }, h("div", { style: styles, class: "Circle " + (this.animation ? 'Skeleton' : '') })));
+    }
+    componentDidLoad() {
+        this.updateStyles();
+    }
+    render() {
+        return (this.handleStructure(this.structure));
+    }
+    static get is() { return "ui-skeleton"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-skeleton.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-skeleton.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "structure": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'logo' | 'image' | 'title' | 'text' | 'rectangle' | 'circle'",
+                    "resolved": "\"circle\" | \"image\" | \"logo\" | \"rectangle\" | \"text\" | \"title\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The structure of the skeleton"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "structure",
+                "reflect": false
+            },
+            "width": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Width of the element"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "width",
+                "reflect": false
+            },
+            "height": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Height of the element"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "height",
+                "reflect": false
+            },
+            "borderRadius": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The border radius of the element"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "border-radius",
+                "reflect": false
+            },
+            "marginBottom": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Margin bottom for the element"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "margin-bottom",
+                "reflect": false
+            },
+            "marginTop": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Margin top for the element"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "margin-top",
+                "reflect": false
+            },
+            "marginLeft": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Margin left for the element"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "margin-left",
+                "reflect": false
+            },
+            "marginRight": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Margin right for the element"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "margin-right",
+                "reflect": false
+            },
+            "animation": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Toggles skeleton animation"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "animation",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "rows": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of rows displayed - only for `text`"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "rows",
+                "reflect": false
+            },
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the circle - only for `circle"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color of the skeleton when animation is `off` - hexa value (e.g. #c2c2c2)"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "color",
+                "reflect": false
+            },
+            "primaryColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Primary color of the skeleton when animation is `on` - hexa value (e.g. #c2c2c2)"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "primary-color",
+                "reflect": false
+            },
+            "secondaryColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Secondary color of the skeleton when animation is `on` - hexa value (e.g. #ffffff)"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "secondary-color",
+                "reflect": false
+            }
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "structure",
+                "methodName": "handleStructureChange"
+            }, {
+                "propName": "primaryColor",
+                "methodName": "updateStyles"
+            }, {
+                "propName": "secondaryColor",
+                "methodName": "updateStyles"
+            }];
+    }
+}

package/dist/collection/index.js

@@ -0,0 +1 @@
+export * from './components/ui-skeleton';

package/dist/collection/utils/utils.js

@@ -0,0 +1,3 @@
+export function format(first, middle, last) {
+    return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+}

package/dist/esm/app-globals-0f993ce5.js

@@ -0,0 +1,3 @@
+const globalScripts = () => {};
+
+export { globalScripts as g };