@zonos/elements 1.0.16

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

@@ -0,0 +1,418 @@
+import { h, Host } from "@stencil/core";
+import { zonosStore } from "../../store/zonosStore";
+import { classes } from "../../utils/classes";
+import { getBorderRadius } from "../../utils/getBorderRadius";
+import { getButtonTheme } from "../../utils/getButtonTheme";
+import { isColorVariable } from "../../utils/isColorVariable";
+export class ZonosButton {
+  constructor() {
+    /**
+     * Detect if the button has an content
+     */
+    this.handleSlotChange = () => {
+      this.hasContent = true;
+    };
+    this.class = '';
+    this.color = undefined;
+    this.backgroundColor = undefined;
+    this.borderStyle = undefined;
+    this.isDisabled = false;
+    this.icon = null;
+    this.iconRight = false;
+    this.size = 'sm';
+    this.variant = 'standard';
+    this.noBackground = false;
+    this.noPaddingLeft = false;
+    this.noPaddingRight = false;
+    this.loading = false;
+    this.theme = undefined;
+    this.hasIcon = !!this.icon;
+    this.hasContent = false;
+  }
+  /**
+   * Detect if the icon changes and update the state accordingly
+   */
+  iconChangeHandler() {
+    this.hasIcon = !!this.icon;
+  }
+  clickHandler(event) {
+    if (this.loading || this.isDisabled) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }
+  componentWillLoad() {
+    this.iconChangeHandler();
+  }
+  render() {
+    const disabled = this.loading || this.isDisabled;
+    const color = this.color && isColorVariable(this.color)
+      ? `var(--amino-${this.color})`
+      : this.color;
+    // use override background if it exists, otherwise use color from setting
+    const overrideBackground = this.backgroundColor || zonosStore.appearance.colorSecondary;
+    // only set theme for button to change text color if variant is standard and override background is set
+    const buttonTheme = this.variant === 'standard'
+      ? getButtonTheme(overrideBackground)
+      : undefined;
+    const borderStyle = getBorderRadius(this.borderStyle);
+    return (h(Host, { class: classes(['zonos--elements', this.class]), "data-theme": this.theme || buttonTheme, disabled: disabled, style: {
+        '--background-color': overrideBackground,
+        '--border-radius': borderStyle,
+        '--color': color,
+      } }, h("button", { class: classes([
+        this.hasIcon && 'has-icon',
+        this.hasContent && 'has-content',
+        this.noBackground && 'no-background',
+        this.noPaddingLeft && 'no-padding-left',
+        this.noPaddingRight && 'no-padding-right',
+        this.iconRight && 'icon-right',
+        this.variant,
+        this.size,
+        // only override background if variant is set to standard
+        this.backgroundColor &&
+          this.variant === 'standard' &&
+          'override-background',
+      ]), disabled: disabled }, this.loading && (h("div", { class: "zonos--spinner-wrapper" }, h("zonos-spinner", { size: 16 }))), !this.loading && !this.iconRight && this.icon, h("slot", { onSlotchange: this.handleSlotChange }), !this.loading && this.iconRight && this.icon)));
+  }
+  static get is() { return "zonos-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["zonos-button.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["zonos-button.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "class": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "css class for the component"
+        },
+        "attribute": "class",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Color | (string & { _placeholder?: never })",
+          "resolved": "Color | (string & { _placeholder?: undefined; }) | undefined",
+          "references": {
+            "Color": {
+              "location": "import",
+              "path": "src/types/styles/Color",
+              "id": "src/types/styles/Color.ts::Color"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The color of the button text and svg"
+        },
+        "attribute": "color",
+        "reflect": false
+      },
+      "backgroundColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Color | (string & { _placeholder?: never })",
+          "resolved": "Color | (string & { _placeholder?: undefined; }) | undefined",
+          "references": {
+            "Color": {
+              "location": "import",
+              "path": "src/types/styles/Color",
+              "id": "src/types/styles/Color.ts::Color"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The color of the button text and svg\n**NOTE**: If the button `variant` is set to 'standard', backgroundColor will be disregarded"
+        },
+        "attribute": "background-color",
+        "reflect": false
+      },
+      "borderStyle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ElementsUiStyle",
+          "resolved": "\"ROUNDED\" | \"SHARP\" | undefined",
+          "references": {
+            "ElementsUiStyle": {
+              "location": "import",
+              "path": "src/types/generated/graphql.customer.types",
+              "id": "src/types/generated/graphql.customer.types.ts::ElementsUiStyle"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "ROUNDED"
+            }],
+          "text": "The border style of the button"
+        },
+        "attribute": "border-style",
+        "reflect": false
+      },
+      "isDisabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "note",
+              "text": "Prop should not conflict name with native html attribute if the prop is also affected by another prop.\nThe issue is the component has internal disabled"
+            }, {
+              "name": "prop",
+              "text": "()."
+            }, {
+              "name": "prop",
+              "text": "decorator is to watch the update of the attribute of the component in the dom.\nAnd `disabled` prop is not an only factor to determine the component is disabled. isLoading"
+            }, {
+              "name": "prop",
+              "text": "() also affect that.\n<Host> is also referred to a component itself, if disabled prop is true, the `zonos-button` will have disabled attribute.\nSo let's say when the loading state is true, and the component consume the zonos-button doesn't pass the disabled prop down.\nIt accidentally turns the disabled prop on even thought the disabled state is not changed from the outside."
+            }],
+          "text": "Whether or not the button is disabled"
+        },
+        "attribute": "is-disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "icon": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "HTMLZonosIconElement | null",
+          "resolved": "HTMLZonosIconElement | null",
+          "references": {
+            "HTMLZonosIconElement": {
+              "location": "global",
+              "id": "global::HTMLZonosIconElement"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "null"
+            }],
+          "text": "The icon element to display"
+        },
+        "defaultValue": "null"
+      },
+      "iconRight": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "false"
+            }],
+          "text": "Whether or not the icon is on the right"
+        },
+        "attribute": "icon-right",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'sm' | 'md' | 'lg'",
+          "resolved": "\"lg\" | \"md\" | \"sm\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "'sm'"
+            }],
+          "text": "The size of the button"
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'sm'"
+      },
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "| 'primary'\n    | 'success'\n    | 'subtle'\n    | 'outline'\n    | 'standard'\n    | 'danger'\n    | 'warning'",
+          "resolved": "\"danger\" | \"outline\" | \"primary\" | \"standard\" | \"subtle\" | \"success\" | \"warning\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The variance of the button\n**NOTE**: If the button `variant` is set to 'standard', backgroundColor will be disregarded"
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "'standard'"
+      },
+      "noBackground": {
+        "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 button has a background"
+        },
+        "attribute": "no-background",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "noPaddingLeft": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether or not the button has a left padding"
+        },
+        "attribute": "no-padding-left",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "noPaddingRight": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether or not the button has a right padding"
+        },
+        "attribute": "no-padding-right",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "loading": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether or not the button is loading"
+        },
+        "attribute": "loading",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "theme": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ElementsUiTheme",
+          "resolved": "\"DARK\" | \"LIGHT\" | \"SYSTEM\" | undefined",
+          "references": {
+            "ElementsUiTheme": {
+              "location": "import",
+              "path": "src/types/generated/graphql.customer.types",
+              "id": "src/types/generated/graphql.customer.types.ts::ElementsUiTheme"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The theme of the button"
+        },
+        "attribute": "theme",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "hasIcon": {},
+      "hasContent": {}
+    };
+  }
+  static get watchers() {
+    return [{
+        "propName": "icon",
+        "methodName": "iconChangeHandler"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "clickHandler",
+        "target": undefined,
+        "capture": true,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=zonos-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"zonos-button.js","sourceRoot":"","sources":["../../../../src/components/common/zonos-button/zonos-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Host, Listen, Prop, State, Watch } from '@stencil/core';\n\nimport { zonosStore } from 'src/components/store/zonosStore';\nimport { classes } from 'src/components/utils/classes';\nimport { getBorderRadius } from 'src/components/utils/getBorderRadius';\nimport { getButtonTheme } from 'src/components/utils/getButtonTheme';\nimport { isColorVariable } from 'src/components/utils/isColorVariable';\nimport type {\n  ElementsUiStyle,\n  ElementsUiTheme,\n} from 'src/types/generated/graphql.customer.types';\nimport type { Color } from 'src/types/styles/Color';\n\n@Component({\n  shadow: true,\n  styleUrl: 'zonos-button.scss',\n  tag: 'zonos-button',\n})\nexport class ZonosButton {\n  /**\n   * css class for the component\n   */\n  @Prop() class: string = '';\n\n  /**\n   * The color of the button text and svg\n   */\n  @Prop() color?: Color | (string & { _placeholder?: never });\n\n  /**\n   * The color of the button text and svg\n   * **NOTE**: If the button `variant` is set to 'standard', backgroundColor will be disregarded\n   */\n  @Prop() backgroundColor?: Color | (string & { _placeholder?: never });\n\n  /**\n   * The border style of the button\n   * @default ROUNDED\n   */\n  @Prop() borderStyle?: ElementsUiStyle;\n\n  /**\n   * Whether or not the button is disabled\n   * @note Prop should not conflict name with native html attribute if the prop is also affected by another prop.\n   * The issue is the component has internal disabled @prop(). @prop decorator is to watch the update of the attribute of the component in the dom.\n   * And `disabled` prop is not an only factor to determine the component is disabled. isLoading @prop() also affect that.\n   * <Host> is also referred to a component itself, if disabled prop is true, the `zonos-button` will have disabled attribute.\n   *  So let's say when the loading state is true, and the component consume the zonos-button doesn't pass the disabled prop down.\n   * It accidentally turns the disabled prop on even thought the disabled state is not changed from the outside.\n   */\n  @Prop() isDisabled: boolean = false;\n\n  /**\n   * The icon element to display\n   * @default null\n   */\n  @Prop() icon: HTMLZonosIconElement | null = null;\n\n  /**\n   * Whether or not the icon is on the right\n   * @default false\n   */\n  @Prop() iconRight?: boolean = false;\n\n  /**\n   * The size of the button\n   * @default 'sm'\n   */\n  @Prop() size: 'sm' | 'md' | 'lg' = 'sm';\n\n  /**\n   * The variance of the button\n   * **NOTE**: If the button `variant` is set to 'standard', backgroundColor will be disregarded\n   */\n  @Prop() variant:\n    | 'primary'\n    | 'success'\n    | 'subtle'\n    | 'outline'\n    | 'standard'\n    | 'danger'\n    | 'warning' = 'standard';\n\n  /**\n   * Whether or not the button has a background\n   * @default false\n   */\n  @Prop() noBackground: boolean = false;\n\n  /**\n   * Whether or not the button has a left padding\n   */\n  @Prop() noPaddingLeft: boolean = false;\n\n  /**\n   * Whether or not the button has a right padding\n   */\n  @Prop() noPaddingRight: boolean = false;\n\n  /**\n   * Whether or not the button is loading\n   */\n  @Prop() loading: boolean = false;\n\n  /**\n   * The theme of the button\n   */\n  @Prop() theme?: ElementsUiTheme;\n\n  /**\n   * Whether or not the button has an icon\n   */\n  @State() hasIcon: boolean = !!this.icon;\n  /**\n   * Detect if the icon changes and update the state accordingly\n   */\n  @Watch('icon')\n  iconChangeHandler() {\n    this.hasIcon = !!this.icon;\n  }\n\n  /**\n   * Whether or not the button has content\n   */\n  @State() hasContent: boolean = false;\n\n  @Listen('click', {\n    capture: true,\n  })\n  clickHandler(event: MouseEvent) {\n    if (this.loading || this.isDisabled) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  }\n\n  /**\n   * Detect if the button has an content\n   */\n  private handleSlotChange = () => {\n    this.hasContent = true;\n  };\n\n  componentWillLoad() {\n    this.iconChangeHandler();\n  }\n\n  render() {\n    const disabled = this.loading || this.isDisabled;\n\n    const color =\n      this.color && isColorVariable(this.color)\n        ? `var(--amino-${this.color})`\n        : this.color;\n\n    // use override background if it exists, otherwise use color from setting\n    const overrideBackground =\n      this.backgroundColor || zonosStore.appearance.colorSecondary;\n    // only set theme for button to change text color if variant is standard and override background is set\n    const buttonTheme =\n      this.variant === 'standard'\n        ? getButtonTheme(overrideBackground)\n        : undefined;\n\n    const borderStyle = getBorderRadius(this.borderStyle);\n    return (\n      <Host\n        class={classes(['zonos--elements', this.class])}\n        data-theme={this.theme || buttonTheme}\n        disabled={disabled}\n        style={{\n          '--background-color': overrideBackground,\n          '--border-radius': borderStyle,\n          '--color': color,\n        }}\n      >\n        <button\n          class={classes([\n            this.hasIcon && 'has-icon',\n            this.hasContent && 'has-content',\n            this.noBackground && 'no-background',\n            this.noPaddingLeft && 'no-padding-left',\n            this.noPaddingRight && 'no-padding-right',\n            this.iconRight && 'icon-right',\n            this.variant,\n            this.size,\n            // only override background if variant is set to standard\n            this.backgroundColor &&\n              this.variant === 'standard' &&\n              'override-background',\n          ])}\n          disabled={disabled}\n        >\n          {this.loading && (\n            <div class=\"zonos--spinner-wrapper\">\n              <zonos-spinner size={16}></zonos-spinner>\n            </div>\n          )}\n          {/* show content if not loading */}\n          {!this.loading && !this.iconRight && this.icon}\n          <slot onSlotchange={this.handleSlotChange} />\n          {!this.loading && this.iconRight && this.icon}\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,67 @@
+: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 .styled-card {
+  border: var(--amino-border);
+  border-radius: var(--amino-radius-6);
+  padding: var(--spacing, var(--amino-space-24));
+  text-align: left;
+}
+:host .styled-card hr {
+  margin-left: calc(var(--spacing, var(--amino-space-24)) * -1);
+  margin-right: calc(var(--spacing, var(--amino-space-24)) * -1);
+}
+:host .styled-card .card-header {
+  margin: calc(var(--spacing, var(--amino-space-24)) * -1);
+  padding: var(--spacing, var(--amino-space-24));
+  display: flex;
+  align-items: center;
+  margin-bottom: var(--spacing, var(--amino-space-24));
+  border-bottom: var(--amino-border);
+  height: 65px;
+  line-height: 65px;
+  user-select: none;
+}
+:host .styled-card .card-header h5 {
+  margin-bottom: 0;
+  flex: 1;
+}
+:host .styled-card .card-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: calc(var(--spacing, var(--amino-space-24)) * -1);
+  padding: var(--spacing, var(--amino-space-24));
+  border-top: var(--amino-border);
+  background: var(--amino-surface-color-secondary);
+  margin-top: var(--spacing, var(--amino-space-24));
+  border-bottom-left-radius: var(--amino-radius-8);
+  border-bottom-right-radius: var(--amino-radius-8);
+  height: var(--footerHeight);
+}

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

@@ -0,0 +1,169 @@
+import { h } from "@stencil/core";
+import { Host } from "@stencil/core/internal";
+import { classes } from "../../utils/classes";
+export class ZonosCard {
+  constructor() {
+    this.actions = undefined;
+    this.class = undefined;
+    this.footerActions = undefined;
+    this.footerContent = undefined;
+    this.footerHeight = undefined;
+    this.label = undefined;
+    this.spacing = '24px';
+  }
+  render() {
+    return (h(Host, null, h("div", { class: classes(['styled-card', this.class]), style: { padding: this.spacing } }, this.label && (h("header", { class: "card-header", style: { padding: this.spacing } }, h("text-component", { type: "subheader" }, this.label), h("h-stack", { spacing: 8 }, this.actions))), h("slot", null), (this.footerActions || this.footerContent) && (h("footer", { class: "card-footer", style: {
+        height: this.footerHeight ? `${this.footerHeight}px` : 'auto',
+        padding: this.spacing,
+      } }, h("div", null, this.footerContent), h("h-stack", { spacing: 8 }, this.footerActions))))));
+  }
+  static get is() { return "zonos-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["zonos-card.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["zonos-card.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "actions": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "HTMLElement",
+          "resolved": "HTMLElement | undefined",
+          "references": {
+            "HTMLElement": {
+              "location": "global",
+              "id": "global::HTMLElement"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The actions to display in the header of the card"
+        }
+      },
+      "class": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The CSS class to apply to the card element"
+        },
+        "attribute": "class",
+        "reflect": false
+      },
+      "footerActions": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "HTMLElement",
+          "resolved": "HTMLElement | undefined",
+          "references": {
+            "HTMLElement": {
+              "location": "global",
+              "id": "global::HTMLElement"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The actions to display in the footer of the card"
+        }
+      },
+      "footerContent": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "HTMLElement",
+          "resolved": "HTMLElement | undefined",
+          "references": {
+            "HTMLElement": {
+              "location": "global",
+              "id": "global::HTMLElement"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The content to display in the footer of the card"
+        }
+      },
+      "footerHeight": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The height of the footer in pixels"
+        },
+        "attribute": "footer-height",
+        "reflect": false
+      },
+      "label": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "HTMLElement",
+          "resolved": "HTMLElement | undefined",
+          "references": {
+            "HTMLElement": {
+              "location": "global",
+              "id": "global::HTMLElement"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The label to display in the header of the card"
+        }
+      },
+      "spacing": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The spacing to apply between elements in the card"
+        },
+        "attribute": "spacing",
+        "reflect": false,
+        "defaultValue": "'24px'"
+      }
+    };
+  }
+}
+//# sourceMappingURL=zonos-card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"zonos-card.js","sourceRoot":"","sources":["../../../../src/components/common/zonos-card/zonos-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAE9C,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AAOvD,MAAM,OAAO,SAAS;;;;;;;;mBAkCO,MAAM;;EAEjC,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WACE,KAAK,EAAE,OAAO,CAAC,CAAC,aAAa,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,EAC3C,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE;QAE/B,IAAI,CAAC,KAAK,IAAI,CACb,cAAQ,KAAK,EAAC,aAAa,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE;UAC1D,sBAAgB,IAAI,EAAC,WAAW,IAAE,IAAI,CAAC,KAAK,CAAkB;UAE9D,eAAS,OAAO,EAAE,CAAC,IAAG,IAAI,CAAC,OAAO,CAAW,CACtC,CACV;QAGD,eAAa;QAEZ,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,CAAC,IAAI,CAC7C,cACE,KAAK,EAAC,aAAa,EACnB,KAAK,EAAE;YACL,MAAM,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,YAAY,IAAI,CAAC,CAAC,CAAC,MAAM;YAC7D,OAAO,EAAE,IAAI,CAAC,OAAO;WACtB;UAED,eAAM,IAAI,CAAC,aAAa,CAAO;UAC/B,eAAS,OAAO,EAAE,CAAC,IAAG,IAAI,CAAC,aAAa,CAAW,CAC5C,CACV,CACG,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\nimport { Host } from '@stencil/core/internal';\n\nimport { classes } from 'src/components/utils/classes';\n\n@Component({\n  shadow: true,\n  styleUrl: 'zonos-card.scss',\n  tag: 'zonos-card',\n})\nexport class ZonosCard {\n  /**\n   * The actions to display in the header of the card\n   */\n  @Prop() actions?: HTMLElement;\n\n  /**\n   * The CSS class to apply to the card element\n   */\n  @Prop() class?: string;\n\n  /**\n   * The actions to display in the footer of the card\n   */\n  @Prop() footerActions?: HTMLElement;\n\n  /**\n   * The content to display in the footer of the card\n   */\n  @Prop() footerContent?: HTMLElement;\n\n  /**\n   * The height of the footer in pixels\n   */\n  @Prop() footerHeight?: number;\n\n  /**\n   * The label to display in the header of the card\n   */\n  @Prop() label?: HTMLElement;\n\n  /**\n   * The spacing to apply between elements in the card\n   */\n  @Prop() spacing?: string = '24px';\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={classes(['styled-card', this.class])}\n          style={{ padding: this.spacing }}\n        >\n          {this.label && (\n            <header class=\"card-header\" style={{ padding: this.spacing }}>\n              <text-component type=\"subheader\">{this.label}</text-component>\n\n              <h-stack spacing={8}>{this.actions}</h-stack>\n            </header>\n          )}\n\n          {/* Slot automatically inherits the children passed in */}\n          <slot></slot>\n\n          {(this.footerActions || this.footerContent) && (\n            <footer\n              class=\"card-footer\"\n              style={{\n                height: this.footerHeight ? `${this.footerHeight}px` : 'auto',\n                padding: this.spacing,\n              }}\n            >\n              <div>{this.footerContent}</div>\n              <h-stack spacing={8}>{this.footerActions}</h-stack>\n            </footer>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}