@getpara/core-components 0.1.0

package/dist/collection/components/cpsl-auth-modal/cpsl-auth-modal.js

@@ -0,0 +1,332 @@
+import { Host, h } from "@stencil/core";
+import gsap from "gsap";
+import { MOBILE_SIZE } from "../../constants.js";
+const mm = gsap.matchMedia();
+export class CpslAuthModal {
+    constructor() {
+        this.hasFooter = undefined;
+        this.isMobile = undefined;
+        this.enterTransitionDuration = 0.15;
+        this.exitTransitionDuration = 0.15;
+        this.noOverlay = undefined;
+        this.open = undefined;
+        this.zIndexOverride = undefined;
+    }
+    toggleModal() {
+        if (this.hasAnimatedIn) {
+            this.handleAnimation();
+        }
+    }
+    componentDidLoad() {
+        this.handleAnimation();
+        this.hasAnimatedIn = true;
+        mm.add(`(min-width: ${MOBILE_SIZE + 1}px)`, () => {
+            gsap.timeline({}).set(this.modalWrapperEl, { yPercent: 0, scale: this.open ? 1 : 0.8, opacity: this.open ? 1 : 0 });
+            this.isMobile = false;
+        });
+        mm.add(`(max-width: ${MOBILE_SIZE}px)`, () => {
+            gsap.timeline({}).set(this.modalWrapperEl, { scale: 1, opacity: 1, yPercent: this.open ? -100 : 0 });
+            this.isMobile = true;
+        });
+        this.hasFooter = this.footerSlotEl.assignedNodes().length >= 1;
+        this.footerSlotEl.addEventListener('slotchange', () => {
+            if (this.footerSlotEl.assignedNodes().length >= 1) {
+                this.hasFooter = true;
+            }
+            else {
+                this.hasFooter = false;
+            }
+        });
+    }
+    handleAnimation() {
+        if (this.open) {
+            if (window.innerWidth >= MOBILE_SIZE + 1) {
+                gsap
+                    .timeline({
+                    onStart: () => {
+                        this.cpslModalEntering.emit();
+                    },
+                    onComplete: () => {
+                        this.cpslModalEntered.emit();
+                    },
+                })
+                    .set(this.modalWrapperEl, { display: 'flex', yPercent: 0 })
+                    .to(this.modalWrapperEl, {
+                    scale: 1,
+                    opacity: 1,
+                    duration: this.enterTransitionDuration,
+                });
+            }
+            else {
+                gsap
+                    .timeline({
+                    onStart: () => {
+                        this.cpslModalEntering.emit();
+                    },
+                    onComplete: () => {
+                        this.cpslModalEntered.emit();
+                    },
+                })
+                    .set(this.modalWrapperEl, { display: 'flex', scale: 1, opacity: 1 })
+                    .to(this.modalWrapperEl, {
+                    yPercent: -100,
+                    duration: this.enterTransitionDuration,
+                });
+            }
+        }
+        else {
+            if (window.innerWidth >= MOBILE_SIZE + 1) {
+                gsap
+                    .timeline({
+                    onStart: () => {
+                        this.cpslModalExiting.emit();
+                    },
+                    onComplete: () => {
+                        var _a;
+                        this.cpslModalExited.emit();
+                        (_a = this.modalWrapperEl) === null || _a === void 0 ? void 0 : _a.style.setProperty('display', 'none');
+                    },
+                })
+                    .to(this.modalWrapperEl, {
+                    scale: 0.8,
+                    opacity: 0,
+                    duration: this.exitTransitionDuration,
+                });
+            }
+            else {
+                gsap
+                    .timeline({
+                    onStart: () => {
+                        this.cpslModalExiting.emit();
+                    },
+                    onComplete: () => {
+                        var _a;
+                        this.cpslModalExited.emit();
+                        (_a = this.modalWrapperEl) === null || _a === void 0 ? void 0 : _a.style.setProperty('display', 'none');
+                    },
+                })
+                    .to(this.modalWrapperEl, {
+                    yPercent: 0,
+                    duration: this.exitTransitionDuration,
+                })
+                    .set(this.modalContainerEl, { y: 0 });
+            }
+        }
+    }
+    get footerEl() {
+        return this.el.shadowRoot.getElementById('modal-footer');
+    }
+    get modalWrapperEl() {
+        return this.el.shadowRoot.getElementById('modal-wrapper');
+    }
+    get modalContainerEl() {
+        return this.el.shadowRoot.getElementById('modal-container');
+    }
+    get footerSlotEl() {
+        return this.footerEl.querySelectorAll('slot')[0];
+    }
+    get Modal() {
+        return (h("div", { class: { 'modal-container': true, 'no-footer': !this.hasFooter }, part: "modal-container", id: "modal-container" }, h("cpsl-card", { id: "modal-body-card", class: { 'modal-body-card': true, 'body': true }, part: "modal-body-card" }, h("slot", { name: "body" }), this.isMobile && (h("div", { class: "mobile-footer", part: "modal-mobile-footer" }, h("slot", { name: "footer" })))), h("cpsl-card", { id: "modal-footer", part: "modal-footer", class: { 'footer-hidden': !this.hasFooter, 'modal-body-card': true }, style: { display: !this.isMobile ? 'block' : 'none' } }, h("slot", { name: "footer" }))));
+    }
+    render() {
+        if (this.noOverlay) {
+            return (h(Host, { style: this.zIndexOverride ? { zIndex: `${this.zIndexOverride}` } : {}, class: "no-overlay" }, this.Modal));
+        }
+        return (h(Host, { style: this.zIndexOverride ? { zIndex: `${this.zIndexOverride}` } : {}, class: { 'include-mobile-styling': true } }, h("cpsl-overlay", { zIndexOverride: this.zIndexOverride ? this.zIndexOverride : undefined, id: "overlay", open: this.open, enterTransitionDuration: this.enterTransitionDuration, exitTransitionDuration: this.exitTransitionDuration }), h("div", { id: "modal-wrapper", class: "modal-wrapper" }, this.Modal)));
+    }
+    static get is() { return "cpsl-auth-modal"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cpsl-auth-modal.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cpsl-auth-modal.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "enterTransitionDuration": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Duration in seconds of the modal entering.\nDefault is .15."
+                },
+                "attribute": "enter-transition-duration",
+                "reflect": false,
+                "defaultValue": "0.15"
+            },
+            "exitTransitionDuration": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Duration in seconds of the modal exiting.\nDefault is .15."
+                },
+                "attribute": "exit-transition-duration",
+                "reflect": false,
+                "defaultValue": "0.15"
+            },
+            "noOverlay": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not to show the overlay. This will always show the modal, regardless of the value of `open`."
+                },
+                "attribute": "no-overlay",
+                "reflect": false
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not to show the modal."
+                },
+                "attribute": "open",
+                "reflect": false
+            },
+            "zIndexOverride": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Override z-index."
+                },
+                "attribute": "z-index-override",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasFooter": {},
+            "isMobile": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "cpslModalEntering",
+                "name": "cpslModalEntering",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when enter animation starts."
+                },
+                "complexType": {
+                    "original": "null",
+                    "resolved": "null",
+                    "references": {}
+                }
+            }, {
+                "method": "cpslModalEntered",
+                "name": "cpslModalEntered",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when enter animation finishes."
+                },
+                "complexType": {
+                    "original": "null",
+                    "resolved": "null",
+                    "references": {}
+                }
+            }, {
+                "method": "cpslModalExiting",
+                "name": "cpslModalExiting",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when exit animation starts."
+                },
+                "complexType": {
+                    "original": "null",
+                    "resolved": "null",
+                    "references": {}
+                }
+            }, {
+                "method": "cpslModalExited",
+                "name": "cpslModalExited",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when exit animation finishes."
+                },
+                "complexType": {
+                    "original": "null",
+                    "resolved": "null",
+                    "references": {}
+                }
+            }, {
+                "method": "cpslModalRequestClose",
+                "name": "cpslModalRequestClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when exit animation finishes."
+                },
+                "complexType": {
+                    "original": "null",
+                    "resolved": "null",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "toggleModal"
+            }];
+    }
+}
+//# sourceMappingURL=cpsl-auth-modal.js.map

package/dist/collection/components/cpsl-auth-modal/cpsl-auth-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-auth-modal.js","sourceRoot":"","sources":["../../../../src/components/cpsl-auth-modal/cpsl-auth-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, State, Watch, h, Event, EventEmitter } from '@stencil/core';\nimport gsap from 'gsap';\nimport { MOBILE_SIZE } from '../../constants.js';\n\nconst mm = gsap.matchMedia();\n@Component({\n  tag: 'cpsl-auth-modal',\n  styleUrl: 'cpsl-auth-modal.scss',\n  shadow: true,\n})\nexport class CpslAuthModal {\n  private hasAnimatedIn: boolean;\n\n  @Element() el!: HTMLCpslAuthModalElement;\n\n  @State() hasFooter: boolean;\n  @State() isMobile: boolean;\n\n  /**\n   * Duration in seconds of the modal entering.\n   * Default is .15.\n   */\n  @Prop() enterTransitionDuration?: number = 0.15;\n\n  /**\n   * Duration in seconds of the modal exiting.\n   * Default is .15.\n   */\n  @Prop() exitTransitionDuration?: number = 0.15;\n\n  /**\n   * Whether or not to show the overlay. This will always show the modal, regardless of the value of `open`.\n   */\n  @Prop() noOverlay?: boolean;\n\n  /**\n   * Whether or not to show the modal.\n   */\n  @Prop() open: boolean;\n\n  /**\n   * Emitted when enter animation starts.\n   */\n  @Event() cpslModalEntering!: EventEmitter<null>;\n\n  /**\n   * Emitted when enter animation finishes.\n   */\n  @Event() cpslModalEntered!: EventEmitter<null>;\n\n  /**\n   * Emitted when exit animation starts.\n   */\n  @Event() cpslModalExiting!: EventEmitter<null>;\n\n  /**\n   * Emitted when exit animation finishes.\n   */\n  @Event() cpslModalExited!: EventEmitter<null>;\n\n  /**\n   * Emitted when exit animation finishes.\n   */\n  @Event() cpslModalRequestClose!: EventEmitter<null>;\n\n  /**\n   * Override z-index.\n   */\n  @Prop() zIndexOverride?: number;\n\n  @Watch('open')\n  toggleModal() {\n    if (this.hasAnimatedIn) {\n      this.handleAnimation();\n    }\n  }\n\n  componentDidLoad() {\n    this.handleAnimation();\n    this.hasAnimatedIn = true;\n\n    mm.add(`(min-width: ${MOBILE_SIZE + 1}px)`, () => {\n      gsap.timeline({}).set(this.modalWrapperEl, { yPercent: 0, scale: this.open ? 1 : 0.8, opacity: this.open ? 1 : 0 });\n      this.isMobile = false;\n    });\n    mm.add(`(max-width: ${MOBILE_SIZE}px)`, () => {\n      gsap.timeline({}).set(this.modalWrapperEl, { scale: 1, opacity: 1, yPercent: this.open ? -100 : 0 });\n      this.isMobile = true;\n    });\n\n    this.hasFooter = this.footerSlotEl.assignedNodes().length >= 1;\n    this.footerSlotEl.addEventListener('slotchange', () => {\n      if (this.footerSlotEl.assignedNodes().length >= 1) {\n        this.hasFooter = true;\n      } else {\n        this.hasFooter = false;\n      }\n    });\n  }\n\n  private handleAnimation() {\n    if (this.open) {\n      if (window.innerWidth >= MOBILE_SIZE + 1) {\n        gsap\n          .timeline({\n            onStart: () => {\n              this.cpslModalEntering.emit();\n            },\n            onComplete: () => {\n              this.cpslModalEntered.emit();\n            },\n          })\n          .set(this.modalWrapperEl, { display: 'flex', yPercent: 0 })\n          .to(this.modalWrapperEl, {\n            scale: 1,\n            opacity: 1,\n            duration: this.enterTransitionDuration,\n          });\n      } else {\n        gsap\n          .timeline({\n            onStart: () => {\n              this.cpslModalEntering.emit();\n            },\n            onComplete: () => {\n              this.cpslModalEntered.emit();\n            },\n          })\n          .set(this.modalWrapperEl, { display: 'flex', scale: 1, opacity: 1 })\n          .to(this.modalWrapperEl, {\n            yPercent: -100,\n            duration: this.enterTransitionDuration,\n          });\n      }\n    } else {\n      if (window.innerWidth >= MOBILE_SIZE + 1) {\n        gsap\n          .timeline({\n            onStart: () => {\n              this.cpslModalExiting.emit();\n            },\n            onComplete: () => {\n              this.cpslModalExited.emit();\n              this.modalWrapperEl?.style.setProperty('display', 'none');\n            },\n          })\n          .to(this.modalWrapperEl, {\n            scale: 0.8,\n            opacity: 0,\n            duration: this.exitTransitionDuration,\n          });\n      } else {\n        gsap\n          .timeline({\n            onStart: () => {\n              this.cpslModalExiting.emit();\n            },\n            onComplete: () => {\n              this.cpslModalExited.emit();\n              this.modalWrapperEl?.style.setProperty('display', 'none');\n            },\n          })\n          .to(this.modalWrapperEl, {\n            yPercent: 0,\n            duration: this.exitTransitionDuration,\n          })\n          .set(this.modalContainerEl, { y: 0 });\n      }\n    }\n  }\n\n  private get footerEl() {\n    return this.el.shadowRoot.getElementById('modal-footer');\n  }\n\n  private get modalWrapperEl() {\n    return this.el.shadowRoot.getElementById('modal-wrapper');\n  }\n\n  private get modalContainerEl() {\n    return this.el.shadowRoot.getElementById('modal-container');\n  }\n\n  private get footerSlotEl() {\n    return this.footerEl.querySelectorAll('slot')[0];\n  }\n\n  private get Modal() {\n    return (\n      <div class={{ 'modal-container': true, 'no-footer': !this.hasFooter }} part=\"modal-container\" id=\"modal-container\">\n        <cpsl-card id=\"modal-body-card\" class={{ 'modal-body-card': true, 'body': true }} part=\"modal-body-card\">\n          <slot name=\"body\"></slot>\n          {this.isMobile && (\n            <div class=\"mobile-footer\" part=\"modal-mobile-footer\">\n              <slot name=\"footer\"></slot>\n            </div>\n          )}\n        </cpsl-card>\n        <cpsl-card\n          id=\"modal-footer\"\n          part=\"modal-footer\"\n          class={{ 'footer-hidden': !this.hasFooter, 'modal-body-card': true }}\n          style={{ display: !this.isMobile ? 'block' : 'none' }}\n        >\n          <slot name=\"footer\"></slot>\n        </cpsl-card>\n      </div>\n    );\n  }\n\n  render() {\n    if (this.noOverlay) {\n      return (\n        <Host style={this.zIndexOverride ? { zIndex: `${this.zIndexOverride}` } : {}} class=\"no-overlay\">\n          {this.Modal}\n        </Host>\n      );\n    }\n\n    return (\n      <Host style={this.zIndexOverride ? { zIndex: `${this.zIndexOverride}` } : {}} class={{ 'include-mobile-styling': true }}>\n        <cpsl-overlay\n          zIndexOverride={this.zIndexOverride ? this.zIndexOverride : undefined}\n          id=\"overlay\"\n          open={this.open}\n          enterTransitionDuration={this.enterTransitionDuration}\n          exitTransitionDuration={this.exitTransitionDuration}\n        />\n        <div id=\"modal-wrapper\" class=\"modal-wrapper\">\n          {this.Modal}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/cpsl-avatar/cpsl-avatar.css

@@ -0,0 +1,35 @@
+:host {
+  --container-border-color: var(--cpsl-color-avatar-border);
+  --container-border-width: 1px;
+  --container-border-radius: var(--cpsl-border-radius-avatar);
+  --container-background-color: var(--cpsl-color-avatar-surface);
+  --container-padding: 4px;
+  --container-height: 40px;
+  --container-width: 40px;
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+span {
+  display: inline-block;
+  height: var(--container-height);
+  width: var(--container-width);
+  border: var(--container-border-width) solid var(--container-border-color);
+  border-radius: var(--container-border-radius);
+  padding: var(--container-padding);
+  background-color: var(--container-background-color);
+}
+span.round {
+  border-radius: 1000px;
+}
+span.round img {
+  border-radius: 1000px;
+}
+
+img {
+  width: 100%;
+  height: 100%;
+  border-radius: var(--container-border-radius);
+  object-fit: cover;
+}

package/dist/collection/components/cpsl-avatar/cpsl-avatar.js

@@ -0,0 +1,104 @@
+import { Host, h } from "@stencil/core";
+export class CpslAvatar {
+    constructor() {
+        this.alt = undefined;
+        this.src = undefined;
+        this.size = undefined;
+        this.variant = 'square';
+    }
+    render() {
+        var _a;
+        return (h(Host, { key: '58a67ffe4a40ece11edde2c8e20bbca8b3d16976' }, h("span", { key: '910593a08ccaa4cc45148e75b8e9368e82ddbbd1', class: { round: this.variant === 'round' }, style: this.size
+                ? {
+                    width: this.size,
+                    height: this.size,
+                }
+                : {} }, h("img", { key: '8e0bed38daf1e45c30c83461cd68412efcd27083', src: this.src, alt: (_a = this.alt) !== null && _a !== void 0 ? _a : 'avatar' }))));
+    }
+    static get is() { return "cpsl-avatar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cpsl-avatar.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cpsl-avatar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "alt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The alternate text for the avatar image."
+                },
+                "attribute": "alt",
+                "reflect": false
+            },
+            "src": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The source of the avatar image."
+                },
+                "attribute": "src",
+                "reflect": false
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The CSS width and height of the icon."
+                },
+                "attribute": "size",
+                "reflect": false
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'round' | 'square'",
+                    "resolved": "\"round\" | \"square\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The variant of the avatar.\nOptions are: `\"round\"`, `\"square\".\nDefault is: `\"square\"`."
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'square'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=cpsl-avatar.js.map

package/dist/collection/components/cpsl-avatar/cpsl-avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-avatar.js","sourceRoot":"","sources":["../../../../src/components/cpsl-avatar/cpsl-avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,UAAU;;;;;uBAqBkB,QAAQ;;IAE/C,MAAM;;QACJ,OAAO,CACL,EAAC,IAAI;YACH,6DACE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO,EAAE,EAC1C,KAAK,EACH,IAAI,CAAC,IAAI;oBACP,CAAC,CAAC;wBACE,KAAK,EAAE,IAAI,CAAC,IAAI;wBAChB,MAAM,EAAE,IAAI,CAAC,IAAI;qBAClB;oBACH,CAAC,CAAC,EAAE;gBAGR,4DAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,MAAA,IAAI,CAAC,GAAG,mCAAI,QAAQ,GAAI,CAC5C,CACF,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-avatar',\n  styleUrl: 'cpsl-avatar.scss',\n  shadow: true,\n})\nexport class CpslAvatar {\n  /**\n   * The alternate text for the avatar image.\n   */\n  @Prop() alt?: string;\n\n  /**\n   * The source of the avatar image.\n   */\n  @Prop() src: string;\n\n  /**\n   * The CSS width and height of the icon.\n   */\n  @Prop() size?: string;\n\n  /**\n   * The variant of the avatar.\n   * Options are: `\"round\"`, `\"square\".\n   * Default is: `\"square\"`.\n   */\n  @Prop() variant?: 'round' | 'square' = 'square';\n\n  render() {\n    return (\n      <Host>\n        <span\n          class={{ round: this.variant === 'round' }}\n          style={\n            this.size\n              ? {\n                  width: this.size,\n                  height: this.size,\n                }\n              : {}\n          }\n        >\n          <img src={this.src} alt={this.alt ?? 'avatar'} />\n        </span>\n      </Host>\n    );\n  }\n}\n"]}