@zonos/elements 1.0.16

package/dist/collection/components/common/zonos-dialog/zonos-dialog.css

@@ -0,0 +1,150 @@
+:host {
+  font-family: Inter;
+  display: block;
+}
+:host img {
+  max-width: 100%;
+}
+:host dl,
+:host dd,
+:host h1,
+:host h2,
+:host h3,
+:host h4,
+:host h5,
+:host h6,
+:host hr,
+:host figure,
+:host p,
+:host pre {
+  margin: 0;
+}
+
+/* All sets of variable are here */
+/* smooth font rendering */
+:host {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+:host .zonos--backdrop,
+:host .zonos--dialog-layout {
+  opacity: 0;
+  z-index: -999;
+  visibility: hidden;
+  transition: 0.3s all ease;
+}
+:host .zonos--backdrop {
+  width: 100vw;
+  height: 100vh;
+  left: 0px;
+  top: 0px;
+  background: var(--amino-backdrop-color);
+  z-index: -999;
+  opacity: 0;
+  visibility: hidden;
+  position: fixed;
+}
+:host .zonos--loading {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1002;
+  background: white;
+}
+:host .zonos--dialog-layout {
+  width: 100vw;
+  height: 100vh;
+  left: 0;
+  top: 0;
+  position: fixed;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--amino-text-color);
+  visibility: hidden;
+}
+:host .zonos--dialog {
+  position: relative;
+  z-index: 1001;
+  background: var(--amino-gray-0);
+  max-width: 90vw;
+  max-height: 90vh;
+  min-height: 500px;
+  height: var(--height, auto);
+  width: var(--width, auto);
+  border-radius: var(--border-radius, var(--amino-radius-10));
+  outline: none;
+  box-shadow: var(--amino-v3-shadow-xxl);
+  border: var(--amino-border);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+:host .zonos--header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--amino-space-16) var(--amino-space-24);
+}
+:host .zonos--header .-zonos-stencil-library--header-text {
+  flex-grow: 1;
+}
+:host .zonos--header .zonos--close-button {
+  width: var(--amino-size-md);
+  height: var(--amino-size-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border-radius: var(--amino-radius-10);
+}
+:host .zonos--header .zonos--close-button:hover {
+  background: var(--amino-hover-color);
+}
+:host .zonos--body {
+  padding: var(--amino-space-8) var(--amino-space-24);
+  max-height: 100%;
+  height: 100%;
+  overflow: auto;
+}
+:host .zonos--body.zonos--no-body-padding {
+  padding: 0;
+}
+:host .zonos--footer {
+  padding: var(--amino-space-16) var(--amino-space-24);
+}
+
+:host(.open) .zonos--dialog-layout,
+:host(.open) .zonos--backdrop {
+  visibility: visible;
+}
+:host(.open) .zonos--backdrop {
+  z-index: 1001;
+  opacity: 0.65;
+}
+:host(.open) .zonos--dialog-layout {
+  opacity: 1;
+  z-index: 1002;
+  transform: scale(1);
+}
+
+:host(.no-border) .zonos--dialog {
+  border: none;
+}
+
+:host(.mobile) .zonos--dialog {
+  max-width: 100vw;
+  max-height: 100vh;
+  height: 100%;
+  width: 100%;
+  border-radius: 0;
+  box-shadow: none;
+  border: none;
+}

package/dist/collection/components/common/zonos-dialog/zonos-dialog.js

@@ -0,0 +1,383 @@
+import { h, Host, } from "@stencil/core";
+import { classes } from "../../utils/classes";
+import { getBorderRadius } from "../../utils/getBorderRadius";
+/** These assets neet to be in relative path as https://www.npmjs.com/package/stencil-inline-svg suggested */
+// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths
+import RemoveIcon from "./assets/removeIcon.svg";
+export class ZonosDialog {
+  constructor() {
+    this.isMobileMode = () => {
+      return this.mobile || window.innerWidth <= 768;
+    };
+    this.closeButtonHandler = () => {
+      this.closeDialog.emit();
+    };
+    this.clickOutsideDialogHandler = (event) => {
+      if (event.target === event.currentTarget && !this.noClickOutside) {
+        this.closeDialog.emit();
+      }
+    };
+    this.open = false;
+    this.headerText = '';
+    this.width = '460px';
+    this.height = undefined;
+    this.noHeader = false;
+    this.noBodyPadding = false;
+    this.noBorder = false;
+    this.footerRightAction = null;
+    this.borderStyle = undefined;
+    this.noCloseButton = false;
+    this.noClickOutside = false;
+    this.mobile = false;
+    this.isLoading = true;
+    this.isMobile = false;
+  }
+  handleWindowResize() {
+    this.isMobile = this.isMobileMode();
+  }
+  componentDidLoad() {
+    this.isMobile = this.isMobileMode();
+  }
+  render() {
+    // disable scroll on the body when dialog is open
+    if (this.open) {
+      document.body.style.overflow = 'hidden';
+    }
+    else {
+      document.body.style.overflow = 'auto';
+    }
+    const borderStyle = getBorderRadius(this.borderStyle);
+    return (h(Host, { class: classes([
+        'zonos--elements',
+        this.open && 'open',
+        this.isLoading && 'is-loading',
+        this.noBorder && 'no-border',
+        this.isMobile && 'mobile',
+      ]), style: {
+        '--border-radius': borderStyle,
+        '--height': this.height || 'initial',
+        '--width': this.width,
+      } }, h("div", { class: "zonos--backdrop" }), h("div", { "aria-hidden": "true", class: "zonos--dialog-layout", onClick: this.clickOutsideDialogHandler }, h("div", { class: "zonos--dialog" }, this.isLoading && (h("div", { class: "zonos--loading" }, h("zonos-spinner", { size: 30 }))), (this.headerText || !this.noCloseButton) && (h("div", { class: "zonos--header" }, this.headerText && (h("h3", { class: "zonos--header-text" }, this.headerText)), !this.noCloseButton && (h("zonos-button", { class: "zonos--close-button", icon: h("zonos-icon", { content: RemoveIcon }), noBackground: true, onClick: this.closeButtonHandler })))), h("div", { class: classes([
+        'zonos--body',
+        this.noBodyPadding && 'zonos--no-body-padding',
+      ]) }, h("slot", null)), this.footerRightAction && (h("div", { class: "zonos--footer" }, h("div", { class: "zonos--footer-right-action" }, this.footerRightAction)))))));
+  }
+  static get is() { return "zonos-dialog"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["zonos-dialog.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["zonos-dialog.css"]
+    };
+  }
+  static get assetsDirs() { return ["assets"]; }
+  static get properties() {
+    return {
+      "open": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "false"
+            }],
+          "text": "Whether or not the dialog is open"
+        },
+        "attribute": "open",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "headerText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The header text for the dialog"
+        },
+        "attribute": "header-text",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "width": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "460px"
+            }],
+          "text": "The width of the dialog"
+        },
+        "attribute": "width",
+        "reflect": false,
+        "defaultValue": "'460px'"
+      },
+      "height": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The height of the dialog (max-wdith still 90vh)"
+        },
+        "attribute": "height",
+        "reflect": false
+      },
+      "noHeader": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "false"
+            }],
+          "text": "Whether or not to show the header"
+        },
+        "attribute": "no-header",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "noBodyPadding": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "false"
+            }],
+          "text": "Whether or not to have body padding"
+        },
+        "attribute": "no-body-padding",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "noBorder": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "false"
+            }],
+          "text": "Whether or not to have body padding"
+        },
+        "attribute": "no-border",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "footerRightAction": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "HTMLElement | null",
+          "resolved": "HTMLElement | null",
+          "references": {
+            "HTMLElement": {
+              "location": "global",
+              "id": "global::HTMLElement"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "null"
+            }],
+          "text": "The right area for the action in the footer"
+        },
+        "defaultValue": "null"
+      },
+      "borderStyle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ElementsUiStyle",
+          "resolved": "\"ROUNDED\" | \"SHARP\" | undefined",
+          "references": {
+            "ElementsUiStyle": {
+              "location": "import",
+              "path": "src/types",
+              "id": "src/types/index.ts::ElementsUiStyle"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "ROUNDED"
+            }],
+          "text": "The border style of the button"
+        },
+        "attribute": "border-style",
+        "reflect": false
+      },
+      "noCloseButton": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "false"
+            }],
+          "text": "Whether or not to show the close button"
+        },
+        "attribute": "no-close-button",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "noClickOutside": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "false"
+            }],
+          "text": "Whether or not to close the dialog when clicking outside of it"
+        },
+        "attribute": "no-click-outside",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "mobile": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Flag to determine if the checkout is on mobile"
+        },
+        "attribute": "mobile",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "isLoading": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Load loading spinner for the dialog or not"
+        },
+        "attribute": "is-loading",
+        "reflect": false,
+        "defaultValue": "true"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isMobile": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "closeDialog",
+        "name": "closeDialog",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Close dialog button click"
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "handleWindowResize",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
+}
+//# sourceMappingURL=zonos-dialog.js.map

package/dist/collection/components/common/zonos-dialog/zonos-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"zonos-dialog.js","sourceRoot":"","sources":["../../../../src/components/common/zonos-dialog/zonos-dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  type EventEmitter,\n  Component,\n  Event,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n} from '@stencil/core';\n\nimport { classes } from 'src/components/utils/classes';\nimport { getBorderRadius } from 'src/components/utils/getBorderRadius';\nimport type { ElementsUiStyle } from 'src/types';\n\n/** These assets neet to be in relative path as https://www.npmjs.com/package/stencil-inline-svg suggested */\n// eslint-disable-next-line no-relative-import-paths/no-relative-import-paths\nimport RemoveIcon from './assets/removeIcon.svg';\n\n@Component({\n  assetsDirs: ['assets'],\n  shadow: true,\n  styleUrl: 'zonos-dialog.scss',\n  tag: 'zonos-dialog',\n})\nexport class ZonosDialog {\n  /**\n   * Whether or not the dialog is open\n   * @default false\n   */\n  @Prop() open: boolean = false;\n  /**\n   * The header text for the dialog\n   */\n  @Prop() headerText: string = '';\n  /**\n   * The width of the dialog\n   * @default 460px\n   */\n  @Prop() width: string = '460px';\n  /**\n   * The height of the dialog (max-wdith still 90vh)\n   */\n  @Prop() height?: string;\n  /**\n   * Whether or not to show the header\n   * @default false\n   */\n  @Prop() noHeader: boolean = false;\n\n  /**\n   * Whether or not to have body padding\n   * @default false\n   */\n  @Prop() noBodyPadding: boolean = false;\n\n  /**\n   * Whether or not to have body padding\n   * @default false\n   */\n  @Prop() noBorder: boolean = false;\n\n  /**\n   * The right area for the action in the footer\n   * @default null\n   */\n  @Prop() footerRightAction: HTMLElement | null = null;\n\n  /**\n   * The border style of the button\n   * @default ROUNDED\n   */\n  @Prop() borderStyle?: ElementsUiStyle;\n\n  /**\n   * Close dialog button click\n   */\n  // @Prop() onCloseDialog!: () => void;\n\n  /**\n   * Whether or not to show the close button\n   * @default false\n   */\n  @Prop() noCloseButton: boolean = false;\n\n  /**\n   * Whether or not to close the dialog when clicking outside of it\n   * @default false\n   */\n  @Prop() noClickOutside: boolean = false;\n\n  /**\n   * Flag to determine if the checkout is on mobile\n   */\n  @Prop() mobile: boolean = false;\n\n  /**\n   * Load loading spinner for the dialog or not\n   */\n  @Prop() isLoading: boolean = true;\n\n  @State() isMobile: boolean = false;\n\n  /**\n   * Close dialog button click\n   */\n  @Event() closeDialog!: EventEmitter<void>;\n\n  @Listen('resize', { target: 'window' })\n  handleWindowResize() {\n    this.isMobile = this.isMobileMode();\n  }\n\n  private isMobileMode = () => {\n    return this.mobile || window.innerWidth <= 768;\n  };\n\n  private closeButtonHandler = () => {\n    this.closeDialog.emit();\n  };\n\n  private clickOutsideDialogHandler = (event: MouseEvent) => {\n    if (event.target === event.currentTarget && !this.noClickOutside) {\n      this.closeDialog.emit();\n    }\n  };\n\n  componentDidLoad() {\n    this.isMobile = this.isMobileMode();\n  }\n\n  render() {\n    // disable scroll on the body when dialog is open\n    if (this.open) {\n      document.body.style.overflow = 'hidden';\n    } else {\n      document.body.style.overflow = 'auto';\n    }\n\n    const borderStyle = getBorderRadius(this.borderStyle);\n    return (\n      <Host\n        class={classes([\n          'zonos--elements',\n          this.open && 'open',\n          this.isLoading && 'is-loading',\n          this.noBorder && 'no-border',\n          this.isMobile && 'mobile',\n        ])}\n        style={{\n          '--border-radius': borderStyle,\n          '--height': this.height || 'initial',\n          '--width': this.width,\n        }}\n      >\n        <div class=\"zonos--backdrop\"></div>\n        <div\n          aria-hidden=\"true\"\n          class=\"zonos--dialog-layout\"\n          onClick={this.clickOutsideDialogHandler}\n        >\n          <div class=\"zonos--dialog\">\n            {this.isLoading && (\n              <div class=\"zonos--loading\">\n                <zonos-spinner size={30}></zonos-spinner>\n              </div>\n            )}\n            {(this.headerText || !this.noCloseButton) && (\n              <div class=\"zonos--header\">\n                {this.headerText && (\n                  <h3 class=\"zonos--header-text\">{this.headerText}</h3>\n                )}\n                {!this.noCloseButton && (\n                  <zonos-button\n                    class=\"zonos--close-button\"\n                    icon={<zonos-icon content={RemoveIcon}></zonos-icon>}\n                    noBackground\n                    onClick={this.closeButtonHandler}\n                  ></zonos-button>\n                )}\n              </div>\n            )}\n            <div\n              class={classes([\n                'zonos--body',\n                this.noBodyPadding && 'zonos--no-body-padding',\n              ])}\n            >\n              <slot />\n            </div>\n            {this.footerRightAction && (\n              <div class=\"zonos--footer\">\n                <div class=\"zonos--footer-right-action\">\n                  {this.footerRightAction}\n                </div>\n              </div>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/common/zonos-icon/zonos-icon.css

@@ -0,0 +1,38 @@
+:host {
+  font-family: Inter;
+  display: block;
+}
+:host img {
+  max-width: 100%;
+}
+:host dl,
+:host dd,
+:host h1,
+:host h2,
+:host h3,
+:host h4,
+:host h5,
+:host h6,
+:host hr,
+:host figure,
+:host p,
+:host pre {
+  margin: 0;
+}
+
+/* All sets of variable are here */
+/* smooth font rendering */
+:host {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+:host {
+  display: inline-flex;
+}
+:host svg {
+  width: var(--width);
+  height: var(--height);
+  fill: var(--color);
+  color: var(--color);
+}