npm - @zonos/elements - Versions diffs - 1.1.2 → 1.2.1 - Mend

@zonos/elements 1.1.2 → 1.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (780) hide show

package/dist/zonos-elements/zonos-address_2.entry.js DELETED Viewed

@@ -1,121 +0,0 @@
-import { r as registerInstance, h, H as Host, d as getElement } from './index-d1aa9293.js';
-import { s as stripeStore, f as stripeStorePrefetchLandedCost } from './cart-d00e1acb.js';
-import { b as logError, a as localizationStore } from './localization-1d92a557.js';
-import './zonosStore-1c9c7d76.js';
-import './isDarkColor-3bb345f4.js';
-import './getBorderRadius-e8ad5967.js';
-const zonosAddressCss = ".sc-zonos-address-h{font-family:Inter;display:block}.sc-zonos-address-h img.sc-zonos-address{max-width:100%}.sc-zonos-address-h dl.sc-zonos-address,.sc-zonos-address-h dd.sc-zonos-address,.sc-zonos-address-h h1.sc-zonos-address,.sc-zonos-address-h h2.sc-zonos-address,.sc-zonos-address-h h3.sc-zonos-address,.sc-zonos-address-h h4.sc-zonos-address,.sc-zonos-address-h h5.sc-zonos-address,.sc-zonos-address-h h6.sc-zonos-address,.sc-zonos-address-h hr.sc-zonos-address,.sc-zonos-address-h figure.sc-zonos-address,.sc-zonos-address-h p.sc-zonos-address,.sc-zonos-address-h pre.sc-zonos-address{margin:0}.sc-zonos-address-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-address-h .zonos--title.sc-zonos-address{margin-bottom:var(--amino-space-16)}";
-const ZonosAddress = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.type = undefined;
-    this.titleText = undefined;
-    this.defaultAddress = null;
-    this.stripe = window.Zonos.stripe;
-  }
-  async watchInitStripe() {
-    var _a, _b;
-    this.stripe = window.Zonos.stripe;
-    if (!this.stripe || !stripeStore.stripeElements) {
-      logError("Stripe is not initialized. Couldn't load stripe element.");
-      return;
-    }
-    const phone = (_a = this.defaultAddress) === null || _a === void 0 ? void 0 : _a.phone;
-    if (!phone) {
-      // remove phone from default address if it's not provided, stripe
-      // will throw error if key phone exist and its value is empty or 'undefined'.
-      (_b = this.defaultAddress) === null || _b === void 0 ? true : delete _b.phone;
-    }
-    const shippableCountries = localizationStore.shippingZoneCountries;
-    const addressElement = stripeStore.stripeAddressElement ||
-      stripeStore.stripeElements.create('address', {
-        allowedCountries: shippableCountries
-          ? Object.values(shippableCountries).map(country => country.code)
-          : [],
-        contacts: this.defaultAddress ? [this.defaultAddress] : undefined,
-        display: {
-          name: 'split',
-        },
-        fields: {
-          phone: 'always',
-        },
-        mode: this.type,
-        validation: {
-          phone: {
-            required: 'always',
-          },
-        },
-      });
-    addressElement.mount(this.el.querySelector('.zonos--address-component'));
-    addressElement.on('change', event => {
-      const eventValue = event.value;
-      stripeStore.stripeAddressEventData = Object.assign(Object.assign({}, event), { elementMode: 'shipping', elementType: 'address', empty: false, value: Object.assign(Object.assign({}, eventValue), { firstName: eventValue.firstName || eventValue.name.split(' ')[0], lastName: eventValue.lastName || eventValue.name.split(' ').pop() }) });
-      // run prefetch landed cost when address is changed
-      void stripeStorePrefetchLandedCost();
-    });
-    stripeStore.stripeAddressElement = addressElement;
-  }
-  componentDidLoad() {
-    // @Watch doesn't get trigger on initial load
-    void this.watchInitStripe();
-  }
-  render() {
-    // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-    return (h(Host, { class: "zonos--address zonos--elements" }, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { class: "zonos--address-component" })));
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "stripe": ["watchInitStripe"]
-  }; }
-};
-ZonosAddress.style = zonosAddressCss;
-const zonosLinkAuthenticationCss = ".sc-zonos-link-authentication-h{font-family:Inter;display:block}.sc-zonos-link-authentication-h img.sc-zonos-link-authentication{max-width:100%}.sc-zonos-link-authentication-h dl.sc-zonos-link-authentication,.sc-zonos-link-authentication-h dd.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h1.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h2.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h3.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h4.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h5.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h6.sc-zonos-link-authentication,.sc-zonos-link-authentication-h hr.sc-zonos-link-authentication,.sc-zonos-link-authentication-h figure.sc-zonos-link-authentication,.sc-zonos-link-authentication-h p.sc-zonos-link-authentication,.sc-zonos-link-authentication-h pre.sc-zonos-link-authentication{margin:0}.sc-zonos-link-authentication-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-link-authentication-h .zonos--title.sc-zonos-link-authentication{margin-bottom:var(--amino-space-16)}";
-const ZonosLinkAuthentication = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.titleText = undefined;
-    this.stripe = stripeStore.stripe;
-  }
-  watchInitStripe() {
-    if (!this.stripe || !stripeStore.stripeElements) {
-      return;
-    }
-    // Create and mount the Authentication Element in ${type} mode
-    const linkAuthenticationElement = stripeStore.stripeLinkElement ||
-      stripeStore.stripeElements.create('linkAuthentication');
-    const linkAuthenticationElementContainer = this.el.querySelector('.zonos--link-authentication-component');
-    if (!linkAuthenticationElementContainer) {
-      // eslint-disable-next-line no-console
-      console.error('Cannot find container element for linkAuthenticationElement');
-      return;
-    }
-    linkAuthenticationElement.mount(linkAuthenticationElementContainer);
-    linkAuthenticationElement.on('change', event => {
-      stripeStore.stripeLinkEventData = event;
-      // run prefetch landed cost when address is changed
-      void stripeStorePrefetchLandedCost();
-    });
-    stripeStore.stripeLinkElement = linkAuthenticationElement;
-  }
-  componentDidLoad() {
-    // @Watch doesn't get trigger on initial load
-    this.watchInitStripe();
-  }
-  render() {
-    // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here
-    return (h(Host, { class: "zonos--link-authentication zonos--elements" }, h("zonos-text", { class: "zonos--title", type: "semiBoldLabel" }, this.titleText), h("div", { class: "zonos--link-authentication-component" })));
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "stripe": ["watchInitStripe"]
-  }; }
-};
-ZonosLinkAuthentication.style = zonosLinkAuthenticationCss;
-export { ZonosAddress as zonos_address, ZonosLinkAuthentication as zonos_link_authentication };
-//# sourceMappingURL=zonos-address_2.entry.js.map

package/dist/zonos-elements/zonos-address_2.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"zonos-address.zonos-link-authentication.entry.esm.js","mappings":"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","names":[],"sources":["src/components/stripe/zonos-address/zonos-address.scss?tag=zonos-address&encapsulation=scoped","src/components/stripe/zonos-address/zonos-address.tsx","src/components/stripe/zonos-link-authentication/zonos-link-authentication.scss?tag=zonos-link-authentication&encapsulation=scoped","src/components/stripe/zonos-link-authentication/zonos-link-authentication.tsx"],"sourcesContent":[":host {\n .zonos--title {\n margin-bottom: $amino-space-16;\n }\n}\n","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport type { ContactOption, Stripe } from '@stripe/stripe-js';\n\nimport {\n stripeStore,\n stripeStorePrefetchLandedCost,\n} from 'src/components/store/checkout/stripe';\nimport { localizationStore } from 'src/components/store/hello/localization';\nimport { logError } from 'src/components/utils/logging/logError';\n\n@Component({\n /**\n * Use `scope` here just because this component is using stripe elements and stripe\n * need to be able to inject iframe into this component\n * **NOTE**: Prefer `shadow` when creating new component\n * */\n scoped: true,\n styleUrl: 'zonos-address.scss',\n tag: 'zonos-address',\n})\n/**\n * This component is a wrapper for the stripe address element that would render default style object\n */\nexport class ZonosAddress {\n /**\n * The type of address element to render\n */\n @Prop() type!: 'billing' | 'shipping';\n\n /**\n * The title text for the address element\n */\n @Prop() titleText!: string;\n\n /**\n * Default address for stripe\n */\n @Prop() defaultAddress: ContactOption | null = null;\n\n @State() stripe: Stripe | null = window.Zonos.stripe;\n\n @Element() el!: HTMLZonosAddressElement;\n\n @Watch('stripe')\n async watchInitStripe() {\n this.stripe = window.Zonos.stripe;\n if (!this.stripe || !stripeStore.stripeElements) {\n logError(\"Stripe is not initialized. Couldn't load stripe element.\");\n return;\n }\n\n const phone = this.defaultAddress?.phone;\n if (!phone) {\n // remove phone from default address if it's not provided, stripe\n // will throw error if key phone exist and its value is empty or 'undefined'.\n delete this.defaultAddress?.phone;\n }\n\n const shippableCountries = localizationStore.shippingZoneCountries;\n const addressElement =\n stripeStore.stripeAddressElement ||\n stripeStore.stripeElements.create('address', {\n allowedCountries: shippableCountries\n ? Object.values(shippableCountries).map(country => country.code)\n : [],\n contacts: this.defaultAddress ? [this.defaultAddress] : undefined,\n display: {\n name: 'split',\n },\n fields: {\n phone: 'always',\n },\n mode: this.type,\n validation: {\n phone: {\n required: 'always',\n },\n },\n });\n\n addressElement.mount(\n this.el.querySelector('.zonos--address-component') as HTMLElement,\n );\n addressElement.on('change', event => {\n const eventValue = event.value;\n stripeStore.stripeAddressEventData = {\n ...event,\n elementMode: 'shipping',\n elementType: 'address',\n empty: false,\n value: {\n ...eventValue,\n firstName: eventValue.firstName || eventValue.name.split(' ')[0],\n lastName: eventValue.lastName || eventValue.name.split(' ').pop(),\n },\n };\n // run prefetch landed cost when address is changed\n void stripeStorePrefetchLandedCost();\n });\n stripeStore.stripeAddressElement = addressElement;\n }\n\n componentDidLoad() {\n // @Watch doesn't get trigger on initial load\n void this.watchInitStripe();\n }\n\n render() {\n // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here\n return (\n <Host class=\"zonos--address zonos--elements\">\n <zonos-text class=\"zonos--title\" type=\"semiBoldLabel\">\n {this.titleText}\n </zonos-text>\n <div class=\"zonos--address-component\"></div>\n </Host>\n );\n }\n}\n",":host {\n .zonos--title {\n margin-bottom: $amino-space-16;\n }\n}\n","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport type { Stripe } from '@stripe/stripe-js';\n\nimport {\n stripeStore,\n stripeStorePrefetchLandedCost,\n} from 'src/components/store/checkout/stripe';\n\n@Component({\n /**\n * Use `scope` here just because this component is using stripe elements and stripe\n * need to be able to inject iframe into this component\n * **NOTE**: Prefer `shadow` when creating new component\n * */\n scoped: true,\n styleUrl: 'zonos-link-authentication.scss',\n tag: 'zonos-link-authentication',\n})\n/**\n * This component is a wrapper for the stripe authentication element that would render default style object\n */\nexport class ZonosLinkAuthentication {\n /**\n * The title text for the authentication element\n */\n @Prop() titleText!: string;\n\n @State() stripe: Stripe | null = stripeStore.stripe;\n\n @Element() el!: HTMLZonosLinkAuthenticationElement;\n\n @Watch('stripe')\n watchInitStripe() {\n if (!this.stripe || !stripeStore.stripeElements) {\n return;\n }\n\n // Create and mount the Authentication Element in ${type} mode\n const linkAuthenticationElement =\n stripeStore.stripeLinkElement ||\n stripeStore.stripeElements.create('linkAuthentication');\n\n const linkAuthenticationElementContainer =\n this.el.querySelector<HTMLElement>(\n '.zonos--link-authentication-component',\n );\n\n if (!linkAuthenticationElementContainer) {\n // eslint-disable-next-line no-console\n console.error(\n 'Cannot find container element for linkAuthenticationElement',\n );\n return;\n }\n\n linkAuthenticationElement.mount(linkAuthenticationElementContainer);\n linkAuthenticationElement.on('change', event => {\n stripeStore.stripeLinkEventData = event;\n // run prefetch landed cost when address is changed\n void stripeStorePrefetchLandedCost();\n });\n stripeStore.stripeLinkElement = linkAuthenticationElement;\n }\n\n componentDidLoad() {\n // @Watch doesn't get trigger on initial load\n this.watchInitStripe();\n }\n\n render() {\n // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here\n return (\n <Host class=\"zonos--link-authentication zonos--elements\">\n <zonos-text class=\"zonos--title\" type=\"semiBoldLabel\">\n {this.titleText}\n </zonos-text>\n <div class=\"zonos--link-authentication-component\"></div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/zonos-elements/zonos-address_2.system.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- var __awaiter=this&&this.__awaiter\|\|function(t,n,e,s){function o(t){return t instanceof e?t:new e((function(n){n(t)}))}return new(e\|\|(e=Promise))((function(e,i){function a(t){try{c(s.next(t))}catch(t){i(t)}}function r(t){try{c(s["throw"](t))}catch(t){i(t)}}function c(t){t.done?e(t.value):o(t.value).then(a,r)}c((s=s.apply(t,n\|\|[])).next())}))};var __generator=this&&this.__generator\|\|function(t,n){var e={label:0,sent:function(){if(i[0]&1)throw i[1];return i[1]},trys:[],ops:[]},s,o,i,a;return a={next:r(0),throw:r(1),return:r(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function r(t){return function(n){return c([t,n])}}function c(r){if(s)throw new TypeError("Generator is already executing.");while(a&&(a=0,r[0]&&(e=0)),e)try{if(s=1,o&&(i=r[0]&2?o["return"]:r[0]?o["throw"]\|\|((i=o["return"])&&i.call(o),0):o.next)&&!(i=i.call(o,r[1])).done)return i;if(o=0,i)r=[r[0]&2,i.value];switch(r[0]){case 0:case 1:i=r;break;case 4:e.label++;return{value:r[1],done:false};case 5:e.label++;o=r[1];r=[0];continue;case 7:r=e.ops.pop();e.trys.pop();continue;default:if(!(i=e.trys,i=i.length>0&&i[i.length-1])&&(r[0]===6\|\|r[0]===2)){e=0;continue}if(r[0]===3&&(!i\|\|r[1]>i[0]&&r[1]<i[3])){e.label=r[1];break}if(r[0]===6&&e.label<i[1]){e.label=i[1];i=r;break}if(i&&e.label<i[2]){e.label=i[2];e.ops.push(r);break}if(i[2])e.ops.pop();e.trys.pop();continue}r=n.call(t,e)}catch(t){r=[6,t];o=0}finally{s=i=0}if(r[0]&5)throw r[1];return{value:r[0]?r[1]:void 0,done:true}}};System.register(["./index-87193773.system.js","./cart-c641ddaf.system.js","./localization-a6b6a5a5.system.js","./zonosStore-e5c545ea.system.js","./isDarkColor-231502d4.system.js","./getBorderRadius-b59c3ada.system.js"],(function(t){"use strict";var n,e,s,o,i,a,r,c;return{setters:[function(t){n=t.r;e=t.h;s=t.H;o=t.d},function(t){i=t.s;a=t.f},function(t){r=t.b;c=t.a},function(){},function(){},function(){}],execute:function(){var l=".sc-zonos-address-h{font-family:Inter;display:block}.sc-zonos-address-h img.sc-zonos-address{max-width:100%}.sc-zonos-address-h dl.sc-zonos-address,.sc-zonos-address-h dd.sc-zonos-address,.sc-zonos-address-h h1.sc-zonos-address,.sc-zonos-address-h h2.sc-zonos-address,.sc-zonos-address-h h3.sc-zonos-address,.sc-zonos-address-h h4.sc-zonos-address,.sc-zonos-address-h h5.sc-zonos-address,.sc-zonos-address-h h6.sc-zonos-address,.sc-zonos-address-h hr.sc-zonos-address,.sc-zonos-address-h figure.sc-zonos-address,.sc-zonos-address-h p.sc-zonos-address,.sc-zonos-address-h pre.sc-zonos-address{margin:0}.sc-zonos-address-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-address-h .zonos--title.sc-zonos-address{margin-bottom:var(--amino-space-16)}";var d=t("zonos_address",function(){function t(t){n(this,t);this.type=undefined;this.titleText=undefined;this.defaultAddress=null;this.stripe=window.Zonos.stripe}t.prototype.watchInitStripe=function(){return __awaiter(this,void 0,void 0,(function(){var t,n,e,s,o;return __generator(this,(function(l){this.stripe=window.Zonos.stripe;if(!this.stripe\|\|!i.stripeElements){r("Stripe is not initialized. Couldn't load stripe element.");return[2]}e=(t=this.defaultAddress)===null\|\|t===void 0?void 0:t.phone;if(!e){(n=this.defaultAddress)===null\|\|n===void 0?true:delete n.phone}s=c.shippingZoneCountries;o=i.stripeAddressElement\|\|i.stripeElements.create("address",{allowedCountries:s?Object.values(s).map((function(t){return t.code})):[],contacts:this.defaultAddress?[this.defaultAddress]:undefined,display:{name:"split"},fields:{phone:"always"},mode:this.type,validation:{phone:{required:"always"}}});o.mount(this.el.querySelector(".zonos--address-component"));o.on("change",(function(t){var n=t.value;i.stripeAddressEventData=Object.assign(Object.assign({},t),{elementMode:"shipping",elementType:"address",empty:false,value:Object.assign(Object.assign({},n),{firstName:n.firstName\|\|n.name.split(" ")[0],lastName:n.lastName\|\|n.name.split(" ").pop()})});void a()}));i.stripeAddressElement=o;return[2]}))}))};t.prototype.componentDidLoad=function(){void this.watchInitStripe()};t.prototype.render=function(){return e(s,{class:"zonos--address zonos--elements"},e("zonos-text",{class:"zonos--title",type:"semiBoldLabel"},this.titleText),e("div",{class:"zonos--address-component"}))};Object.defineProperty(t.prototype,"el",{get:function(){return o(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{stripe:["watchInitStripe"]}},enumerable:false,configurable:true});return t}());d.style=l;var u=".sc-zonos-link-authentication-h{font-family:Inter;display:block}.sc-zonos-link-authentication-h img.sc-zonos-link-authentication{max-width:100%}.sc-zonos-link-authentication-h dl.sc-zonos-link-authentication,.sc-zonos-link-authentication-h dd.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h1.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h2.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h3.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h4.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h5.sc-zonos-link-authentication,.sc-zonos-link-authentication-h h6.sc-zonos-link-authentication,.sc-zonos-link-authentication-h hr.sc-zonos-link-authentication,.sc-zonos-link-authentication-h figure.sc-zonos-link-authentication,.sc-zonos-link-authentication-h p.sc-zonos-link-authentication,.sc-zonos-link-authentication-h pre.sc-zonos-link-authentication{margin:0}.sc-zonos-link-authentication-h{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.sc-zonos-link-authentication-h .zonos--title.sc-zonos-link-authentication{margin-bottom:var(--amino-space-16)}";var h=t("zonos_link_authentication",function(){function t(t){n(this,t);this.titleText=undefined;this.stripe=i.stripe}t.prototype.watchInitStripe=function(){if(!this.stripe\|\|!i.stripeElements){return}var t=i.stripeLinkElement\|\|i.stripeElements.create("linkAuthentication");var n=this.el.querySelector(".zonos--link-authentication-component");if(!n){console.error("Cannot find container element for linkAuthenticationElement");return}t.mount(n);t.on("change",(function(t){i.stripeLinkEventData=t;void a()}));i.stripeLinkElement=t};t.prototype.componentDidLoad=function(){this.watchInitStripe()};t.prototype.render=function(){return e(s,{class:"zonos--link-authentication zonos--elements"},e("zonos-text",{class:"zonos--title",type:"semiBoldLabel"},this.titleText),e("div",{class:"zonos--link-authentication-component"}))};Object.defineProperty(t.prototype,"el",{get:function(){return o(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{stripe:["watchInitStripe"]}},enumerable:false,configurable:true});return t}());h.style=u}}}));
2	- //# sourceMappingURL=zonos-address_2.system.entry.js.map

package/dist/zonos-elements/zonos-address_2.system.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["zonosAddressCss","ZonosAddress","exports","window","Zonos","stripe","class_1","prototype","watchInitStripe","this","stripeStore","stripeElements","logError","phone","_a","defaultAddress","_b","shippableCountries","localizationStore","shippingZoneCountries","addressElement","stripeAddressElement","create","allowedCountries","Object","values","map","country","code","contacts","undefined","display","name","fields","mode","type","validation","required","mount","el","querySelector","on","event","eventValue","value","stripeAddressEventData","assign","elementMode","elementType","empty","firstName","split","lastName","pop","stripeStorePrefetchLandedCost","componentDidLoad","render","h","Host","class","titleText","zonosLinkAuthenticationCss","ZonosLinkAuthentication","class_2","linkAuthenticationElement","stripeLinkElement","linkAuthenticationElementContainer","console","error","stripeLinkEventData"],"sources":["src/components/stripe/zonos-address/zonos-address.scss?tag=zonos-address&encapsulation=scoped","src/components/stripe/zonos-address/zonos-address.tsx","src/components/stripe/zonos-link-authentication/zonos-link-authentication.scss?tag=zonos-link-authentication&encapsulation=scoped","src/components/stripe/zonos-link-authentication/zonos-link-authentication.tsx"],"sourcesContent":[":host {\n .zonos--title {\n margin-bottom: $amino-space-16;\n }\n}\n","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport type { ContactOption, Stripe } from '@stripe/stripe-js';\n\nimport {\n stripeStore,\n stripeStorePrefetchLandedCost,\n} from 'src/components/store/checkout/stripe';\nimport { localizationStore } from 'src/components/store/hello/localization';\nimport { logError } from 'src/components/utils/logging/logError';\n\n@Component({\n /**\n * Use `scope` here just because this component is using stripe elements and stripe\n * need to be able to inject iframe into this component\n * **NOTE**: Prefer `shadow` when creating new component\n * */\n scoped: true,\n styleUrl: 'zonos-address.scss',\n tag: 'zonos-address',\n})\n/**\n * This component is a wrapper for the stripe address element that would render default style object\n */\nexport class ZonosAddress {\n /**\n * The type of address element to render\n */\n @Prop() type!: 'billing' | 'shipping';\n\n /**\n * The title text for the address element\n */\n @Prop() titleText!: string;\n\n /**\n * Default address for stripe\n */\n @Prop() defaultAddress: ContactOption | null = null;\n\n @State() stripe: Stripe | null = window.Zonos.stripe;\n\n @Element() el!: HTMLZonosAddressElement;\n\n @Watch('stripe')\n async watchInitStripe() {\n this.stripe = window.Zonos.stripe;\n if (!this.stripe || !stripeStore.stripeElements) {\n logError(\"Stripe is not initialized. Couldn't load stripe element.\");\n return;\n }\n\n const phone = this.defaultAddress?.phone;\n if (!phone) {\n // remove phone from default address if it's not provided, stripe\n // will throw error if key phone exist and its value is empty or 'undefined'.\n delete this.defaultAddress?.phone;\n }\n\n const shippableCountries = localizationStore.shippingZoneCountries;\n const addressElement =\n stripeStore.stripeAddressElement ||\n stripeStore.stripeElements.create('address', {\n allowedCountries: shippableCountries\n ? Object.values(shippableCountries).map(country => country.code)\n : [],\n contacts: this.defaultAddress ? [this.defaultAddress] : undefined,\n display: {\n name: 'split',\n },\n fields: {\n phone: 'always',\n },\n mode: this.type,\n validation: {\n phone: {\n required: 'always',\n },\n },\n });\n\n addressElement.mount(\n this.el.querySelector('.zonos--address-component') as HTMLElement,\n );\n addressElement.on('change', event => {\n const eventValue = event.value;\n stripeStore.stripeAddressEventData = {\n ...event,\n elementMode: 'shipping',\n elementType: 'address',\n empty: false,\n value: {\n ...eventValue,\n firstName: eventValue.firstName || eventValue.name.split(' ')[0],\n lastName: eventValue.lastName || eventValue.name.split(' ').pop(),\n },\n };\n // run prefetch landed cost when address is changed\n void stripeStorePrefetchLandedCost();\n });\n stripeStore.stripeAddressElement = addressElement;\n }\n\n componentDidLoad() {\n // @Watch doesn't get trigger on initial load\n void this.watchInitStripe();\n }\n\n render() {\n // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here\n return (\n <Host class=\"zonos--address zonos--elements\">\n <zonos-text class=\"zonos--title\" type=\"semiBoldLabel\">\n {this.titleText}\n </zonos-text>\n <div class=\"zonos--address-component\"></div>\n </Host>\n );\n }\n}\n",":host {\n .zonos--title {\n margin-bottom: $amino-space-16;\n }\n}\n","/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport type { Stripe } from '@stripe/stripe-js';\n\nimport {\n stripeStore,\n stripeStorePrefetchLandedCost,\n} from 'src/components/store/checkout/stripe';\n\n@Component({\n /**\n * Use `scope` here just because this component is using stripe elements and stripe\n * need to be able to inject iframe into this component\n * **NOTE**: Prefer `shadow` when creating new component\n * */\n scoped: true,\n styleUrl: 'zonos-link-authentication.scss',\n tag: 'zonos-link-authentication',\n})\n/**\n * This component is a wrapper for the stripe authentication element that would render default style object\n */\nexport class ZonosLinkAuthentication {\n /**\n * The title text for the authentication element\n */\n @Prop() titleText!: string;\n\n @State() stripe: Stripe | null = stripeStore.stripe;\n\n @Element() el!: HTMLZonosLinkAuthenticationElement;\n\n @Watch('stripe')\n watchInitStripe() {\n if (!this.stripe || !stripeStore.stripeElements) {\n return;\n }\n\n // Create and mount the Authentication Element in ${type} mode\n const linkAuthenticationElement =\n stripeStore.stripeLinkElement ||\n stripeStore.stripeElements.create('linkAuthentication');\n\n const linkAuthenticationElementContainer =\n this.el.querySelector<HTMLElement>(\n '.zonos--link-authentication-component',\n );\n\n if (!linkAuthenticationElementContainer) {\n // eslint-disable-next-line no-console\n console.error(\n 'Cannot find container element for linkAuthenticationElement',\n );\n return;\n }\n\n linkAuthenticationElement.mount(linkAuthenticationElementContainer);\n linkAuthenticationElement.on('change', event => {\n stripeStore.stripeLinkEventData = event;\n // run prefetch landed cost when address is changed\n void stripeStorePrefetchLandedCost();\n });\n stripeStore.stripeLinkElement = linkAuthenticationElement;\n }\n\n componentDidLoad() {\n // @Watch doesn't get trigger on initial load\n this.watchInitStripe();\n }\n\n render() {\n // this component loads iframe from the stripe elements and puts here, so we don't need to do anything here\n return (\n <Host class=\"zonos--link-authentication zonos--elements\">\n <zonos-text class=\"zonos--title\" type=\"semiBoldLabel\">\n {this.titleText}\n </zonos-text>\n <div class=\"zonos--link-authentication-component\"></div>\n </Host>\n );\n }\n}\n"],"mappings":"y3DAAA,IAAMA,EAAkB,4wB,ICwBXC,EAAYC,EAAA,2B,yFAcwB,K,YAEdC,OAAOC,MAAMC,M,CAKxCC,EAAAC,UAAAC,gBAAN,W,mGACEC,KAAKJ,OAASF,OAAOC,MAAMC,OAC3B,IAAKI,KAAKJ,SAAWK,EAAYC,eAAgB,CAC/CC,EAAS,4DACT,S,CAGIC,GAAQC,EAAAL,KAAKM,kBAAc,MAAAD,SAAA,SAAAA,EAAED,MACnC,IAAKA,EAAO,EAGHG,EAAAP,KAAKM,kBAAc,MAAAC,SAAA,cAAAA,EAAEH,K,CAGxBI,EAAqBC,EAAkBC,sBACvCC,EACJV,EAAYW,sBACZX,EAAYC,eAAeW,OAAO,UAAW,CAC3CC,iBAAkBN,EACdO,OAAOC,OAAOR,GAAoBS,KAAI,SAAAC,GAAW,OAAAA,EAAQC,IAAR,IACjD,GACJC,SAAUpB,KAAKM,eAAiB,CAACN,KAAKM,gBAAkBe,UACxDC,QAAS,CACPC,KAAM,SAERC,OAAQ,CACNpB,MAAO,UAETqB,KAAMzB,KAAK0B,KACXC,WAAY,CACVvB,MAAO,CACLwB,SAAU,aAKlBjB,EAAekB,MACb7B,KAAK8B,GAAGC,cAAc,8BAExBpB,EAAeqB,GAAG,UAAU,SAAAC,GAC1B,IAAMC,EAAaD,EAAME,MACzBlC,EAAYmC,uBAAsBrB,OAAAsB,OAAAtB,OAAAsB,OAAA,GAC7BJ,GAAK,CACRK,YAAa,WACbC,YAAa,UACbC,MAAO,MACPL,MAAKpB,OAAAsB,OAAAtB,OAAAsB,OAAA,GACAH,GAAU,CACbO,UAAWP,EAAWO,WAAaP,EAAWX,KAAKmB,MAAM,KAAK,GAC9DC,SAAUT,EAAWS,UAAYT,EAAWX,KAAKmB,MAAM,KAAKE,eAI3DC,G,IAEP5C,EAAYW,qBAAuBD,E,iBAGrCd,EAAAC,UAAAgD,iBAAA,gBAEO9C,KAAKD,iB,EAGZF,EAAAC,UAAAiD,OAAA,WAEE,OACEC,EAACC,EAAI,CAACC,MAAM,kCACVF,EAAA,cAAYE,MAAM,eAAexB,KAAK,iBACnC1B,KAAKmD,WAERH,EAAA,OAAKE,MAAM,6B,mPA3FM,I,UCxBzB,IAAME,EAA6B,onC,ICsBtBC,EAAuB5D,EAAA,uC,6DAMDQ,EAAYL,M,CAK7C0D,EAAAxD,UAAAC,gBAAA,WACE,IAAKC,KAAKJ,SAAWK,EAAYC,eAAgB,CAC/C,M,CAIF,IAAMqD,EACJtD,EAAYuD,mBACZvD,EAAYC,eAAeW,OAAO,sBAEpC,IAAM4C,EACJzD,KAAK8B,GAAGC,cACN,yCAGJ,IAAK0B,EAAoC,CAEvCC,QAAQC,MACN,+DAEF,M,CAGFJ,EAA0B1B,MAAM4B,GAChCF,EAA0BvB,GAAG,UAAU,SAAAC,GACrChC,EAAY2D,oBAAsB3B,OAE7BY,G,IAEP5C,EAAYuD,kBAAoBD,C,EAGlCD,EAAAxD,UAAAgD,iBAAA,WAEE9C,KAAKD,iB,EAGPuD,EAAAxD,UAAAiD,OAAA,WAEE,OACEC,EAACC,EAAI,CAACC,MAAM,8CACVF,EAAA,cAAYE,MAAM,eAAexB,KAAK,iBACnC1B,KAAKmD,WAERH,EAAA,OAAKE,MAAM,yC,mPAvDiB,I"}

package/dist/zonos-elements/zonos-badge.entry.js DELETED Viewed

@@ -1,32 +0,0 @@
-import { r as registerInstance, h, H as Host } from './index-d1aa9293.js';
-import { c as classes } from './classes-0d95c529.js';
-const zonosBadgeCss = ":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}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-inline-flexbox;display:inline-flex}:host .zonos--badge-content{display:-ms-flexbox;display:flex;gap:var(--amino-space-8);font-size:var(--amino-font-size-s);padding:4px 8px;text-align:center;border-radius:var(--amino-radius-6);background-color:var(--amino-gray-100);color:var(--amino-gray-800);-ms-flex-align:center;align-items:center}:host p{font-weight:600;line-height:16px}:host .icon-right svg{-ms-flex-order:2;order:2}:host .small{padding:2px 8px}:host .rounded{border-radius:20px}:host .bold{background-color:var(--amino-gray-600);color:var(--amino-gray-100)}:host .blue{background-color:var(--amino-blue-100);color:var(--amino-blue-800)}:host .blue.bold{background-color:var(--amino-blue-600);color:var(--amino-blue-100)}:host .green{background-color:var(--amino-green-100);color:var(--amino-green-800)}:host .green.bold{background-color:var(--amino-green-600);color:var(--amino-green-100)}:host .red{background-color:var(--amino-red-100);color:var(--amino-red-800)}:host .red.bold{background-color:var(--amino-red-600);color:var(--amino-red-100)}:host .orange{background-color:var(--amino-orange-100);color:var(--amino-orange-800)}:host .orange.bold{background-color:var(--amino-orange-600);color:var(--amino-orange-100)}:host .purple{background-color:var(--amino-purple-100);color:var(--amino-purple-800)}:host .purple.bold{background-color:var(--amino-purple-600);color:var(--amino-purple-100)}:host .cyan{background-color:var(--amino-cyan-100);color:var(--amino-cyan-800)}:host .cyan.bold{background-color:var(--amino-cyan-600);color:var(--amino-cyan-100)}";
-const ZonosBadge = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.bold = false;
-    this.color = 'gray';
-    this.icon = undefined;
-    this.iconRight = false;
-    this.size = 'default';
-    this.rounded = false;
-    this.class = '';
-  }
-  render() {
-    return (h(Host, { class: classes(['zonos--elements zonos--badge', this.class]) }, h("div", { class: classes([
-        'zonos--badge-content',
-        this.color,
-        this.rounded && 'rounded',
-        this.iconRight && 'icon-right',
-        this.size,
-        this.bold && 'bold',
-      ]) }, this.icon, h("p", null, h("slot", null)))));
-  }
-};
-ZonosBadge.style = zonosBadgeCss;
-export { ZonosBadge as zonos_badge };
-//# sourceMappingURL=zonos-badge.entry.js.map

package/dist/zonos-elements/zonos-badge.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"zonos-badge.entry.esm.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,qzDAAqzD;;MCU9zD,UAAU;;;gBAKG,KAAK;iBAMA,MAAM;;qBAYN,KAAK;gBAME,SAAS;mBAMlB,KAAK;iBAKR,EAAE;;EAE1B,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,OAAO,CAAC,CAAC,8BAA8B,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,IAChE,WACE,KAAK,EAAE,OAAO,CAAC;QACb,sBAAsB;QACtB,IAAI,CAAC,KAAK;QACV,IAAI,CAAC,OAAO,IAAI,SAAS;QACzB,IAAI,CAAC,SAAS,IAAI,YAAY;QAC9B,IAAI,CAAC,IAAI;QACT,IAAI,CAAC,IAAI,IAAI,MAAM;OACpB,CAAC,IAED,IAAI,CAAC,IAAI,EACV,aACE,eAAQ,CACN,CACA,CACD,EACP;GACH;;;;;;","names":[],"sources":["src/components/common/zonos-badge/zonos-badge.scss?tag=zonos-badge&encapsulation=shadow","src/components/common/zonos-badge/zonos-badge.tsx"],"sourcesContent":[":host {\n display: inline-flex;\n .zonos--badge-content {\n display: flex;\n gap: $amino-space-8;\n font-size: $amino-font-size-s;\n padding: 4px 8px;\n text-align: center;\n border-radius: $amino-radius-6;\n background-color: $amino-gray-100;\n color: $amino-gray-800;\n align-items: center;\n }\n p {\n font-weight: 600;\n line-height: 16px;\n }\n .icon-right {\n svg {\n order: 2;\n }\n }\n\n // size\n .small {\n padding: 2px 8px;\n }\n .rounded {\n border-radius: 20px;\n }\n\n .bold {\n // bold config default (gray)\n background-color: $amino-gray-600;\n color: $amino-gray-100;\n }\n\n .blue {\n // color config\n background-color: $amino-blue-100;\n color: $amino-blue-800;\n &.bold {\n // bold config\n background-color: $amino-blue-600;\n color: $amino-blue-100;\n }\n }\n .green {\n // color config\n background-color: $amino-green-100;\n color: $amino-green-800;\n &.bold {\n // bold config\n background-color: $amino-green-600;\n color: $amino-green-100;\n }\n }\n .red {\n // color config\n background-color: $amino-red-100;\n color: $amino-red-800;\n &.bold {\n // bold config\n background-color: $amino-red-600;\n color: $amino-red-100;\n }\n }\n .orange {\n // color config\n background-color: $amino-orange-100;\n color: $amino-orange-800;\n &.bold {\n // bold config\n background-color: $amino-orange-600;\n color: $amino-orange-100;\n }\n }\n .purple {\n // color config\n background-color: $amino-purple-100;\n color: $amino-purple-800;\n &.bold {\n // bold config\n background-color: $amino-purple-600;\n color: $amino-purple-100;\n }\n }\n\n .cyan {\n // color config\n background-color: $amino-cyan-100;\n color: $amino-cyan-800;\n &.bold {\n // bold config\n background-color: $amino-cyan-600;\n color: $amino-cyan-100;\n }\n }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\nimport { classes } from 'src/components/utils/classes';\nimport type { ColorPrefix } from 'src/types/styles/Color';\n\n@Component({\n shadow: true,\n styleUrl: 'zonos-badge.scss',\n tag: 'zonos-badge',\n})\nexport class ZonosBadge {\n /**\n * Whether or not the badge is bold\n * @default false\n */\n @Prop() bold: boolean = false;\n\n /**\n * The size of the badge\n * @default 24\n */\n @Prop() color: ColorPrefix = 'gray';\n\n /**\n * The icon element to display\n * @default null\n */\n @Prop() icon?: HTMLZonosIconElement;\n\n /**\n * Position the icon to the right when icon is specified\n * @default false\n */\n @Prop() iconRight: boolean = false;\n\n /**\n * The size of the badge\n * @default 'default'\n */\n @Prop() size: 'small' | 'default' = 'default';\n\n /**\n * Whether or not the badge is rounded\n * @default false\n */\n @Prop() rounded: boolean = false;\n\n /**\n * css class for the component\n */\n @Prop() class: string = '';\n\n render() {\n return (\n <Host class={classes(['zonos--elements zonos--badge', this.class])}>\n <div\n class={classes([\n 'zonos--badge-content',\n this.color,\n this.rounded && 'rounded',\n this.iconRight && 'icon-right',\n this.size,\n this.bold && 'bold',\n ])}\n >\n {this.icon}\n <p>\n <slot />\n </p>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/zonos-elements/zonos-badge.system.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- System.register(["./index-87193773.system.js","./classes-ce25a814.system.js"],(function(o){"use strict";var r,a,n,e;return{setters:[function(o){r=o.r;a=o.h;n=o.H},function(o){e=o.c}],execute:function(){var s=":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}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-inline-flexbox;display:inline-flex}:host .zonos--badge-content{display:-ms-flexbox;display:flex;gap:var(--amino-space-8);font-size:var(--amino-font-size-s);padding:4px 8px;text-align:center;border-radius:var(--amino-radius-6);background-color:var(--amino-gray-100);color:var(--amino-gray-800);-ms-flex-align:center;align-items:center}:host p{font-weight:600;line-height:16px}:host .icon-right svg{-ms-flex-order:2;order:2}:host .small{padding:2px 8px}:host .rounded{border-radius:20px}:host .bold{background-color:var(--amino-gray-600);color:var(--amino-gray-100)}:host .blue{background-color:var(--amino-blue-100);color:var(--amino-blue-800)}:host .blue.bold{background-color:var(--amino-blue-600);color:var(--amino-blue-100)}:host .green{background-color:var(--amino-green-100);color:var(--amino-green-800)}:host .green.bold{background-color:var(--amino-green-600);color:var(--amino-green-100)}:host .red{background-color:var(--amino-red-100);color:var(--amino-red-800)}:host .red.bold{background-color:var(--amino-red-600);color:var(--amino-red-100)}:host .orange{background-color:var(--amino-orange-100);color:var(--amino-orange-800)}:host .orange.bold{background-color:var(--amino-orange-600);color:var(--amino-orange-100)}:host .purple{background-color:var(--amino-purple-100);color:var(--amino-purple-800)}:host .purple.bold{background-color:var(--amino-purple-600);color:var(--amino-purple-100)}:host .cyan{background-color:var(--amino-cyan-100);color:var(--amino-cyan-800)}:host .cyan.bold{background-color:var(--amino-cyan-600);color:var(--amino-cyan-100)}";var i=o("zonos_badge",function(){function o(o){r(this,o);this.bold=false;this.color="gray";this.icon=undefined;this.iconRight=false;this.size="default";this.rounded=false;this.class=""}o.prototype.render=function(){return a(n,{class:e(["zonos--elements zonos--badge",this.class])},a("div",{class:e(["zonos--badge-content",this.color,this.rounded&&"rounded",this.iconRight&&"icon-right",this.size,this.bold&&"bold"])},this.icon,a("p",null,a("slot",null))))};return o}());i.style=s}}}));
2	- //# sourceMappingURL=zonos-badge.system.entry.js.map

package/dist/zonos-elements/zonos-badge.system.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["zonosBadgeCss","ZonosBadge","exports","class_1","prototype","render","h","Host","class","classes","this","color","rounded","iconRight","size","bold","icon"],"sources":["src/components/common/zonos-badge/zonos-badge.scss?tag=zonos-badge&encapsulation=shadow","src/components/common/zonos-badge/zonos-badge.tsx"],"sourcesContent":[":host {\n display: inline-flex;\n .zonos--badge-content {\n display: flex;\n gap: $amino-space-8;\n font-size: $amino-font-size-s;\n padding: 4px 8px;\n text-align: center;\n border-radius: $amino-radius-6;\n background-color: $amino-gray-100;\n color: $amino-gray-800;\n align-items: center;\n }\n p {\n font-weight: 600;\n line-height: 16px;\n }\n .icon-right {\n svg {\n order: 2;\n }\n }\n\n // size\n .small {\n padding: 2px 8px;\n }\n .rounded {\n border-radius: 20px;\n }\n\n .bold {\n // bold config default (gray)\n background-color: $amino-gray-600;\n color: $amino-gray-100;\n }\n\n .blue {\n // color config\n background-color: $amino-blue-100;\n color: $amino-blue-800;\n &.bold {\n // bold config\n background-color: $amino-blue-600;\n color: $amino-blue-100;\n }\n }\n .green {\n // color config\n background-color: $amino-green-100;\n color: $amino-green-800;\n &.bold {\n // bold config\n background-color: $amino-green-600;\n color: $amino-green-100;\n }\n }\n .red {\n // color config\n background-color: $amino-red-100;\n color: $amino-red-800;\n &.bold {\n // bold config\n background-color: $amino-red-600;\n color: $amino-red-100;\n }\n }\n .orange {\n // color config\n background-color: $amino-orange-100;\n color: $amino-orange-800;\n &.bold {\n // bold config\n background-color: $amino-orange-600;\n color: $amino-orange-100;\n }\n }\n .purple {\n // color config\n background-color: $amino-purple-100;\n color: $amino-purple-800;\n &.bold {\n // bold config\n background-color: $amino-purple-600;\n color: $amino-purple-100;\n }\n }\n\n .cyan {\n // color config\n background-color: $amino-cyan-100;\n color: $amino-cyan-800;\n &.bold {\n // bold config\n background-color: $amino-cyan-600;\n color: $amino-cyan-100;\n }\n }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\nimport { classes } from 'src/components/utils/classes';\nimport type { ColorPrefix } from 'src/types/styles/Color';\n\n@Component({\n shadow: true,\n styleUrl: 'zonos-badge.scss',\n tag: 'zonos-badge',\n})\nexport class ZonosBadge {\n /**\n * Whether or not the badge is bold\n * @default false\n */\n @Prop() bold: boolean = false;\n\n /**\n * The size of the badge\n * @default 24\n */\n @Prop() color: ColorPrefix = 'gray';\n\n /**\n * The icon element to display\n * @default null\n */\n @Prop() icon?: HTMLZonosIconElement;\n\n /**\n * Position the icon to the right when icon is specified\n * @default false\n */\n @Prop() iconRight: boolean = false;\n\n /**\n * The size of the badge\n * @default 'default'\n */\n @Prop() size: 'small' | 'default' = 'default';\n\n /**\n * Whether or not the badge is rounded\n * @default false\n */\n @Prop() rounded: boolean = false;\n\n /**\n * css class for the component\n */\n @Prop() class: string = '';\n\n render() {\n return (\n <Host class={classes(['zonos--elements zonos--badge', this.class])}>\n <div\n class={classes([\n 'zonos--badge-content',\n this.color,\n this.rounded && 'rounded',\n this.iconRight && 'icon-right',\n this.size,\n this.bold && 'bold',\n ])}\n >\n {this.icon}\n <p>\n <slot />\n </p>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"0MAAA,IAAMA,EAAgB,szD,ICUTC,EAAUC,EAAA,yB,kCAKG,M,WAMK,O,mCAYA,M,UAMO,U,aAMT,M,WAKH,E,CAExBC,EAAAC,UAAAC,OAAA,WACE,OACEC,EAACC,EAAI,CAACC,MAAOC,EAAQ,CAAC,+BAAgCC,KAAKF,SACzDF,EAAA,OACEE,MAAOC,EAAQ,CACb,uBACAC,KAAKC,MACLD,KAAKE,SAAW,UAChBF,KAAKG,WAAa,aAClBH,KAAKI,KACLJ,KAAKK,MAAQ,UAGdL,KAAKM,KACNV,EAAA,SACEA,EAAA,e,WAzDW,I"}

package/dist/zonos-elements/zonos-banner.entry.js DELETED Viewed

@@ -1,64 +0,0 @@
-import { r as registerInstance, h, H as Host } from './index-d1aa9293.js';
-import { c as classes } from './classes-0d95c529.js';
-const zonosBannerCss = ":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}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{border-radius:var(--amino-radius-10);padding:var(--amino-space-16);background:var(--amino-gray-100)}:host .zonos--container{display:grid;-ms-flex-align:center;align-items:center;grid-template-areas:\"icon header\" \". content\";grid-template-columns:32px auto 0}:host .zonos--icon-wrapper{grid-area:icon;display:-ms-flexbox;display:flex;justify-self:start}:host .zonos--header-wrapper{margin-top:var(--amino-space-0);grid-area:header}:host .zonos--content-wrapper{grid-area:content;margin-top:var(--amino-space-4)}:host(.info){background-color:var(--amino-blue-100);border:1px solid var(--amino-blue-200)}:host(.success){background-color:var(--amino-green-100);border:1px solid var(--amino-green-200)}:host(.error){background-color:var(--amino-red-100);border:1px solid var(--amino-red-200)}:host(.warning){background-color:var(--amino-orange-100);border:1px solid var(--amino-orange-200)}";
-const ZonosBanner = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * Detect if the button has an content
-     */
-    this.handleSlotChange = () => {
-      this.hasContent = true;
-    };
-    this.bannerTitle = undefined;
-    this.intent = undefined;
-    this.class = '';
-    this.hasContent = false;
-  }
-  render() {
-    const renderContent = ({ color }) => {
-      const primaryColor = `var(--amino-${color}-800)`;
-      const secondaryColor = `var(--amino-${color}-300)`;
-      const [header, content] = [
-        this.bannerTitle,
-        h("slot", { onSlotchange: this.handleSlotChange }),
-      ].filter(Boolean);
-      const textColor = color === 'gray' ? 'gray-1200' : `${color}-800`;
-      return (h("div", { class: classes(['zonos--container']) }, h("div", { class: "zonos--icon-wrapper" }, h("svg", { color: primaryColor, fill: "none", height: "20", viewBox: "0 0 24 24", width: "20", xmlns: "https://www.w3.org/2000/svg" }, h("path", { "clip-rule": "evenodd", d: "M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Z", "data-is-secondary-color": "true", fill: secondaryColor, "fill-rule": "evenodd" }), h("path", { "clip-rule": "evenodd", d: "M12 6.99a1 1 0 0 1 1 1V8a1 1 0 1 1-2 0v-.01a1 1 0 0 1 1-1ZM12 11a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0v-4a1 1 0 0 1 1-1Z", fill: "currentColor", "fill-rule": "evenodd" }))), h("div", { class: "zonos--header-wrapper" }, h("zonos-text", { color: textColor, type: "label", weight: 600 }, header)), content && (h("div", { class: "zonos--content-wrapper" }, h("zonos-text", { color: textColor }, content)))));
-    };
-    const baseClass = classes([
-      'zonos--elements zonos--banner',
-      this.class,
-      this.intent,
-    ]);
-    switch (this.intent) {
-      case 'error':
-        return (h(Host, { class: baseClass }, renderContent({
-          color: 'red',
-        })));
-      case 'info':
-        return (h(Host, { class: baseClass }, renderContent({
-          color: 'blue',
-        })));
-      case 'success':
-        return (h(Host, { class: baseClass }, renderContent({
-          color: 'green',
-        })));
-      case 'warning':
-        return (h(Host, { class: baseClass }, renderContent({
-          color: 'orange',
-        })));
-      default:
-        return (h(Host, { class: baseClass }, renderContent({
-          color: 'gray',
-        })));
-    }
-  }
-};
-ZonosBanner.style = zonosBannerCss;
-export { ZonosBanner as zonos_banner };
-//# sourceMappingURL=zonos-banner.entry.js.map

package/dist/zonos-elements/zonos-banner.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"zonos-banner.entry.esm.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,ooCAAooC;;MCY9oC,WAAW;;;;;;IAwBd,qBAAgB,GAAG;MACzB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;KACxB,CAAC;;;iBAZsB,EAAE;sBAKK,KAAK;;EASpC,MAAM;IACJ,MAAM,aAAa,GAAG,CAAC,EAAE,KAAK,EAA0B;MACtD,MAAM,YAAY,GAAG,eAAe,KAAK,OAAO,CAAC;MACjD,MAAM,cAAc,GAAG,eAAe,KAAK,OAAO,CAAC;MAEnD,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG;QACxB,IAAI,CAAC,WAAW;QAChB,YAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAI;OAC9C,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;MAElB,MAAM,SAAS,GAAU,KAAK,KAAK,MAAM,GAAG,WAAW,GAAG,GAAG,KAAK,MAAM,CAAC;MACzE,QACE,WAAK,KAAK,EAAE,OAAO,CAAC,CAAC,kBAAkB,CAAC,CAAC,IACvC,WAAK,KAAK,EAAC,qBAAqB,IAK9B,WACE,KAAK,EAAE,YAAY,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,IAAI,EACV,KAAK,EAAC,6BAA6B,IAEnC,yBACY,SAAS,EACnB,CAAC,EAAC,yEAAyE,6BACnD,MAAM,EAC9B,IAAI,EAAE,cAAc,eACV,SAAS,GACb,EACR,yBACY,SAAS,EACnB,CAAC,EAAC,kHAAkH,EACpH,IAAI,EAAC,cAAc,eACT,SAAS,GACb,CACJ,CACF,EACN,WAAK,KAAK,EAAC,uBAAuB,IAChC,kBAAY,KAAK,EAAE,SAAS,EAAE,IAAI,EAAC,OAAO,EAAC,MAAM,EAAE,GAAG,IACnD,MAAM,CACI,CACT,EACL,OAAO,KACN,WAAK,KAAK,EAAC,wBAAwB,IACjC,kBAAY,KAAK,EAAE,SAAS,IAAG,OAAO,CAAc,CAChD,CACP,CACG,EACN;KACH,CAAC;IAEF,MAAM,SAAS,GAAG,OAAO,CAAC;MACxB,+BAA+B;MAC/B,IAAI,CAAC,KAAK;MACV,IAAI,CAAC,MAAM;KACZ,CAAC,CAAC;IACH,QAAQ,IAAI,CAAC,MAAM;MACjB,KAAK,OAAO;QACV,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,SAAS,IACnB,aAAa,CAAC;UACb,KAAK,EAAE,KAAK;SACb,CAAC,CACG,EACP;MAEJ,KAAK,MAAM;QACT,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,SAAS,IACnB,aAAa,CAAC;UACb,KAAK,EAAE,MAAM;SACd,CAAC,CACG,EACP;MAEJ,KAAK,SAAS;QACZ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,SAAS,IACnB,aAAa,CAAC;UACb,KAAK,EAAE,OAAO;SACf,CAAC,CACG,EACP;MAEJ,KAAK,SAAS;QACZ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,SAAS,IACnB,aAAa,CAAC;UACb,KAAK,EAAE,QAAQ;SAChB,CAAC,CACG,EACP;MACJ;QACE,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,SAAS,IACnB,aAAa,CAAC;UACb,KAAK,EAAE,MAAM;SACd,CAAC,CACG,EACP;KACL;GACF;;;;;;","names":[],"sources":["src/components/common/zonos-banner/zonos-banner.scss?tag=zonos-banner&encapsulation=shadow","src/components/common/zonos-banner/zonos-banner.tsx"],"sourcesContent":[":host {\n border-radius: $amino-radius-10;\n padding: $amino-space-16;\n background: $amino-gray-100;\n .zonos--container {\n display: grid;\n align-items: center;\n grid-template-areas:\n 'icon header'\n '. content';\n grid-template-columns: 32px auto 0;\n }\n\n .zonos--icon-wrapper {\n grid-area: icon;\n display: flex;\n justify-self: start;\n }\n .zonos--header-wrapper {\n margin-top: $amino-space-0;\n grid-area: header;\n }\n .zonos--content-wrapper {\n grid-area: content;\n margin-top: $amino-space-4;\n }\n}\n\n:host(.info) {\n background-color: $amino-blue-100;\n border: 1px solid $amino-blue-200;\n}\n\n:host(.success) {\n background-color: $amino-green-100;\n border: 1px solid $amino-green-200;\n}\n\n:host(.error) {\n background-color: $amino-red-100;\n border: 1px solid $amino-red-200;\n}\n\n:host(.warning) {\n background-color: $amino-orange-100;\n border: 1px solid $amino-orange-200;\n}\n","import { Component, h, Host, Prop, State } from '@stencil/core';\n\nimport { classes } from 'src/components/utils/classes';\nimport type { Color, ColorPrefix } from 'src/types/styles/Color';\n\nexport type BannerIntent = 'default' | 'error' | 'success' | 'warning' | 'info';\n\n@Component({\n shadow: true,\n styleUrl: 'zonos-banner.scss',\n tag: 'zonos-banner',\n})\nexport class ZonosBanner {\n /**\n * Whether or not the banner is bold\n */\n @Prop() bannerTitle?: string;\n\n /**\n * Intent of the banner (success, warning, error)\n */\n @Prop() intent?: BannerIntent;\n\n /**\n * css class for the component\n */\n @Prop() class: string = '';\n\n /**\n * Whether or not the button has content\n */\n @State() hasContent: boolean = false;\n\n /**\n * Detect if the button has an content\n */\n private handleSlotChange = () => {\n this.hasContent = true;\n };\n\n render() {\n const renderContent = ({ color }: { color: ColorPrefix }) => {\n const primaryColor = `var(--amino-${color}-800)`;\n const secondaryColor = `var(--amino-${color}-300)`;\n\n const [header, content] = [\n this.bannerTitle,\n <slot onSlotchange={this.handleSlotChange} />,\n ].filter(Boolean);\n\n const textColor: Color = color === 'gray' ? 'gray-1200' : `${color}-800`;\n return (\n <div class={classes(['zonos--container'])}>\n <div class=\"zonos--icon-wrapper\">\n {/* Info svg icon (couldn't use zonos-icon because \n this component only use one icon, and only\n need to update the color).\n Use svg directly better in this case */}\n <svg\n color={primaryColor}\n fill=\"none\"\n height=\"20\"\n viewBox=\"0 0 24 24\"\n width=\"20\"\n xmlns=\"https://www.w3.org/2000/svg\"\n >\n <path\n clip-rule=\"evenodd\"\n d=\"M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Z\"\n data-is-secondary-color=\"true\"\n fill={secondaryColor}\n fill-rule=\"evenodd\"\n ></path>\n <path\n clip-rule=\"evenodd\"\n d=\"M12 6.99a1 1 0 0 1 1 1V8a1 1 0 1 1-2 0v-.01a1 1 0 0 1 1-1ZM12 11a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0v-4a1 1 0 0 1 1-1Z\"\n fill=\"currentColor\"\n fill-rule=\"evenodd\"\n ></path>\n </svg>\n </div>\n <div class=\"zonos--header-wrapper\">\n <zonos-text color={textColor} type=\"label\" weight={600}>\n {header}\n </zonos-text>\n </div>\n {content && (\n <div class=\"zonos--content-wrapper\">\n <zonos-text color={textColor}>{content}</zonos-text>\n </div>\n )}\n </div>\n );\n };\n\n const baseClass = classes([\n 'zonos--elements zonos--banner',\n this.class,\n this.intent,\n ]);\n switch (this.intent) {\n case 'error':\n return (\n <Host class={baseClass}>\n {renderContent({\n color: 'red',\n })}\n </Host>\n );\n\n case 'info':\n return (\n <Host class={baseClass}>\n {renderContent({\n color: 'blue',\n })}\n </Host>\n );\n\n case 'success':\n return (\n <Host class={baseClass}>\n {renderContent({\n color: 'green',\n })}\n </Host>\n );\n\n case 'warning':\n return (\n <Host class={baseClass}>\n {renderContent({\n color: 'orange',\n })}\n </Host>\n );\n default:\n return (\n <Host class={baseClass}>\n {renderContent({\n color: 'gray',\n })}\n </Host>\n );\n }\n }\n}\n"],"version":3}

package/dist/zonos-elements/zonos-banner.system.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- System.register(["./index-87193773.system.js","./classes-ce25a814.system.js"],(function(o){"use strict";var r,e,a,n;return{setters:[function(o){r=o.r;e=o.h;a=o.H},function(o){n=o.c}],execute:function(){var s=':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}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{border-radius:var(--amino-radius-10);padding:var(--amino-space-16);background:var(--amino-gray-100)}:host .zonos--container{display:grid;-ms-flex-align:center;align-items:center;grid-template-areas:"icon header" ". content";grid-template-columns:32px auto 0}:host .zonos--icon-wrapper{grid-area:icon;display:-ms-flexbox;display:flex;justify-self:start}:host .zonos--header-wrapper{margin-top:var(--amino-space-0);grid-area:header}:host .zonos--content-wrapper{grid-area:content;margin-top:var(--amino-space-4)}:host(.info){background-color:var(--amino-blue-100);border:1px solid var(--amino-blue-200)}:host(.success){background-color:var(--amino-green-100);border:1px solid var(--amino-green-200)}:host(.error){background-color:var(--amino-red-100);border:1px solid var(--amino-red-200)}:host(.warning){background-color:var(--amino-orange-100);border:1px solid var(--amino-orange-200)}';var t=o("zonos_banner",function(){function o(o){var e=this;r(this,o);this.handleSlotChange=function(){e.hasContent=true};this.bannerTitle=undefined;this.intent=undefined;this.class="";this.hasContent=false}o.prototype.render=function(){var o=this;var r=function(r){var a=r.color;var s="var(--amino-".concat(a,"-800)");var t="var(--amino-".concat(a,"-300)");var i=[o.bannerTitle,e("slot",{onSlotchange:o.handleSlotChange})].filter(Boolean),l=i[0],c=i[1];var d=a==="gray"?"gray-1200":"".concat(a,"-800");return e("div",{class:n(["zonos--container"])},e("div",{class:"zonos--icon-wrapper"},e("svg",{color:s,fill:"none",height:"20",viewBox:"0 0 24 24",width:"20",xmlns:"https://www.w3.org/2000/svg"},e("path",{"clip-rule":"evenodd",d:"M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Z","data-is-secondary-color":"true",fill:t,"fill-rule":"evenodd"}),e("path",{"clip-rule":"evenodd",d:"M12 6.99a1 1 0 0 1 1 1V8a1 1 0 1 1-2 0v-.01a1 1 0 0 1 1-1ZM12 11a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0v-4a1 1 0 0 1 1-1Z",fill:"currentColor","fill-rule":"evenodd"}))),e("div",{class:"zonos--header-wrapper"},e("zonos-text",{color:d,type:"label",weight:600},l)),c&&e("div",{class:"zonos--content-wrapper"},e("zonos-text",{color:d},c)))};var s=n(["zonos--elements zonos--banner",this.class,this.intent]);switch(this.intent){case"error":return e(a,{class:s},r({color:"red"}));case"info":return e(a,{class:s},r({color:"blue"}));case"success":return e(a,{class:s},r({color:"green"}));case"warning":return e(a,{class:s},r({color:"orange"}));default:return e(a,{class:s},r({color:"gray"}))}};return o}());t.style=s}}}));
2	- //# sourceMappingURL=zonos-banner.system.entry.js.map

package/dist/zonos-elements/zonos-banner.system.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["zonosBannerCss","ZonosBanner","exports","this","handleSlotChange","_this","hasContent","class_1","prototype","render","renderContent","_a","color","primaryColor","concat","secondaryColor","_b","bannerTitle","h","onSlotchange","filter","Boolean","header","content","textColor","class","classes","fill","height","viewBox","width","xmlns","d","type","weight","baseClass","intent","Host"],"sources":["src/components/common/zonos-banner/zonos-banner.scss?tag=zonos-banner&encapsulation=shadow","src/components/common/zonos-banner/zonos-banner.tsx"],"sourcesContent":[":host {\n border-radius: $amino-radius-10;\n padding: $amino-space-16;\n background: $amino-gray-100;\n .zonos--container {\n display: grid;\n align-items: center;\n grid-template-areas:\n 'icon header'\n '. content';\n grid-template-columns: 32px auto 0;\n }\n\n .zonos--icon-wrapper {\n grid-area: icon;\n display: flex;\n justify-self: start;\n }\n .zonos--header-wrapper {\n margin-top: $amino-space-0;\n grid-area: header;\n }\n .zonos--content-wrapper {\n grid-area: content;\n margin-top: $amino-space-4;\n }\n}\n\n:host(.info) {\n background-color: $amino-blue-100;\n border: 1px solid $amino-blue-200;\n}\n\n:host(.success) {\n background-color: $amino-green-100;\n border: 1px solid $amino-green-200;\n}\n\n:host(.error) {\n background-color: $amino-red-100;\n border: 1px solid $amino-red-200;\n}\n\n:host(.warning) {\n background-color: $amino-orange-100;\n border: 1px solid $amino-orange-200;\n}\n","import { Component, h, Host, Prop, State } from '@stencil/core';\n\nimport { classes } from 'src/components/utils/classes';\nimport type { Color, ColorPrefix } from 'src/types/styles/Color';\n\nexport type BannerIntent = 'default' | 'error' | 'success' | 'warning' | 'info';\n\n@Component({\n shadow: true,\n styleUrl: 'zonos-banner.scss',\n tag: 'zonos-banner',\n})\nexport class ZonosBanner {\n /**\n * Whether or not the banner is bold\n */\n @Prop() bannerTitle?: string;\n\n /**\n * Intent of the banner (success, warning, error)\n */\n @Prop() intent?: BannerIntent;\n\n /**\n * css class for the component\n */\n @Prop() class: string = '';\n\n /**\n * Whether or not the button has content\n */\n @State() hasContent: boolean = false;\n\n /**\n * Detect if the button has an content\n */\n private handleSlotChange = () => {\n this.hasContent = true;\n };\n\n render() {\n const renderContent = ({ color }: { color: ColorPrefix }) => {\n const primaryColor = `var(--amino-${color}-800)`;\n const secondaryColor = `var(--amino-${color}-300)`;\n\n const [header, content] = [\n this.bannerTitle,\n <slot onSlotchange={this.handleSlotChange} />,\n ].filter(Boolean);\n\n const textColor: Color = color === 'gray' ? 'gray-1200' : `${color}-800`;\n return (\n <div class={classes(['zonos--container'])}>\n <div class=\"zonos--icon-wrapper\">\n {/* Info svg icon (couldn't use zonos-icon because \n this component only use one icon, and only\n need to update the color).\n Use svg directly better in this case */}\n <svg\n color={primaryColor}\n fill=\"none\"\n height=\"20\"\n viewBox=\"0 0 24 24\"\n width=\"20\"\n xmlns=\"https://www.w3.org/2000/svg\"\n >\n <path\n clip-rule=\"evenodd\"\n d=\"M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Z\"\n data-is-secondary-color=\"true\"\n fill={secondaryColor}\n fill-rule=\"evenodd\"\n ></path>\n <path\n clip-rule=\"evenodd\"\n d=\"M12 6.99a1 1 0 0 1 1 1V8a1 1 0 1 1-2 0v-.01a1 1 0 0 1 1-1ZM12 11a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0v-4a1 1 0 0 1 1-1Z\"\n fill=\"currentColor\"\n fill-rule=\"evenodd\"\n ></path>\n </svg>\n </div>\n <div class=\"zonos--header-wrapper\">\n <zonos-text color={textColor} type=\"label\" weight={600}>\n {header}\n </zonos-text>\n </div>\n {content && (\n <div class=\"zonos--content-wrapper\">\n <zonos-text color={textColor}>{content}</zonos-text>\n </div>\n )}\n </div>\n );\n };\n\n const baseClass = classes([\n 'zonos--elements zonos--banner',\n this.class,\n this.intent,\n ]);\n switch (this.intent) {\n case 'error':\n return (\n <Host class={baseClass}>\n {renderContent({\n color: 'red',\n })}\n </Host>\n );\n\n case 'info':\n return (\n <Host class={baseClass}>\n {renderContent({\n color: 'blue',\n })}\n </Host>\n );\n\n case 'success':\n return (\n <Host class={baseClass}>\n {renderContent({\n color: 'green',\n })}\n </Host>\n );\n\n case 'warning':\n return (\n <Host class={baseClass}>\n {renderContent({\n color: 'orange',\n })}\n </Host>\n );\n default:\n return (\n <Host class={baseClass}>\n {renderContent({\n color: 'gray',\n })}\n </Host>\n );\n }\n }\n}\n"],"mappings":"0MAAA,IAAMA,EAAiB,ioC,ICYVC,EAAWC,EAAA,0B,mCAwBdC,KAAAC,iBAAmB,WACzBC,EAAKC,WAAa,I,8DAXI,G,gBAKO,K,CAS/BC,EAAAC,UAAAC,OAAA,eAAAJ,EAAAF,KACE,IAAMO,EAAgB,SAACC,G,IAAEC,EAAKD,EAAAC,MAC5B,IAAMC,EAAe,eAAAC,OAAeF,EAAK,SACzC,IAAMG,EAAiB,eAAAD,OAAeF,EAAK,SAErC,IAAAI,EAAoB,CACxBX,EAAKY,YACLC,EAAA,QAAMC,aAAcd,EAAKD,oBACzBgB,OAAOC,SAHFC,EAAMN,EAAA,GAAEO,EAAOP,EAAA,GAKtB,IAAMQ,EAAmBZ,IAAU,OAAS,YAAc,GAAAE,OAAGF,EAAK,QAClE,OACEM,EAAA,OAAKO,MAAOC,EAAQ,CAAC,sBACnBR,EAAA,OAAKO,MAAM,uBAKTP,EAAA,OACEN,MAAOC,EACPc,KAAK,OACLC,OAAO,KACPC,QAAQ,YACRC,MAAM,KACNC,MAAM,+BAENb,EAAA,oBACY,UACVc,EAAE,0EAAyE,0BACnD,OACxBL,KAAMZ,EAAc,YACV,YAEZG,EAAA,oBACY,UACVc,EAAE,mHACFL,KAAK,eAAc,YACT,cAIhBT,EAAA,OAAKO,MAAM,yBACTP,EAAA,cAAYN,MAAOY,EAAWS,KAAK,QAAQC,OAAQ,KAChDZ,IAGJC,GACCL,EAAA,OAAKO,MAAM,0BACTP,EAAA,cAAYN,MAAOY,GAAYD,I,EAOzC,IAAMY,EAAYT,EAAQ,CACxB,gCACAvB,KAAKsB,MACLtB,KAAKiC,SAEP,OAAQjC,KAAKiC,QACX,IAAK,QACH,OACElB,EAACmB,EAAI,CAACZ,MAAOU,GACVzB,EAAc,CACbE,MAAO,SAKf,IAAK,OACH,OACEM,EAACmB,EAAI,CAACZ,MAAOU,GACVzB,EAAc,CACbE,MAAO,UAKf,IAAK,UACH,OACEM,EAACmB,EAAI,CAACZ,MAAOU,GACVzB,EAAc,CACbE,MAAO,WAKf,IAAK,UACH,OACEM,EAACmB,EAAI,CAACZ,MAAOU,GACVzB,EAAc,CACbE,MAAO,YAIf,QACE,OACEM,EAACmB,EAAI,CAACZ,MAAOU,GACVzB,EAAc,CACbE,MAAO,U,WAhIG,I"}

package/dist/zonos-elements/zonos-button_2.entry.js DELETED Viewed

@@ -1,124 +0,0 @@
-import { r as registerInstance, h, H as Host, d as getElement } from './index-d1aa9293.js';
-import { z as zonosStore } from './zonosStore-1c9c7d76.js';
-import { c as classes } from './classes-0d95c529.js';
-import { g as getBorderRadius } from './getBorderRadius-e8ad5967.js';
-import { i as isColorVariable } from './isColorVariable-4cda28c9.js';
-import { i as isDarkColor } from './isDarkColor-3bb345f4.js';
-/**
- * Get theme for button text based on background color
- */
-const getButtonTheme = (overrideBackground) => {
-  // use override background if it exists, otherwise use color from setting
-  const background = overrideBackground || zonosStore.appearance.colorSecondary;
-  const backgroundColor = background && isColorVariable(background)
-    ? `var(--amino-${background})`
-    : background;
-  // determine theme based on background color (to change button text color if needed)
-  const buttonTheme = backgroundColor && isDarkColor(backgroundColor) ? 'DARK' : 'LIGHT';
-  return buttonTheme;
-};
-const zonosButtonCss = ":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}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-inline-flexbox;display:inline-flex}:host .zonos--spinner-wrapper{position:absolute;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;background-color:var(--amino-surface-color);-ms-flex-pack:center;justify-content:center;border-radius:var(--amino-radius-10);gap:var(--amino-space-8)}:host button{display:-ms-inline-flexbox;display:inline-flex;width:100%;position:relative;outline:none;font-size:14px;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:0 var(--amino-space-16);background-color:var(--amino-surface-color);border:none;outline:1px solid var(--amino-surface-color);border-radius:var(--border-radius, var(--amino-radius-10));-webkit-transition:var(--amino-transition);transition:var(--amino-transition);font-weight:500;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:var(--amino-font-sans);letter-spacing:normal;cursor:pointer;white-space:nowrap;padding:var(--amino-space-8) var(--amino-space-24);color:var(--color, var(--amino-gray-1200));}:host button.sm.no-background,:host button.md.no-background,:host button.lg.no-background{background:none;outline:none}:host button.sm.no-padding-left,:host button.md.no-padding-left,:host button.lg.no-padding-left{padding-left:0}:host button.sm.no-padding-right,:host button.md.no-padding-right,:host button.lg.no-padding-right{padding-right:0}:host button[disabled]{cursor:not-allowed;background-color:var(--amino-gray-200)}:host button[disabled] .zonos--spinner-wrapper{background-color:var(--amino-gray-200)}:host button:active{-webkit-transform:scale(0.99);transform:scale(0.99)}:host button.sm{height:var(--amino-size-sm);line-height:var(--amino-size-sm);padding:var(--amino-space-4) var(--amino-space-8)}:host button.sm:not(.has-content).has-icon{padding:0 var(--amino-space-4)}:host button.md{height:var(--amino-size-md);line-height:var(--amino-size-md);padding:var(--amino-space-8) var(--amino-space-16)}:host button.md:not(.has-content).has-icon{padding:0 var(--amino-space-8)}:host button.lg{height:var(--amino-size-lg);line-height:var(--amino-size-lg);padding:var(--amino-space-12) var(--amino-space-24)}:host button.lg:not(.has-content).has-icon{padding:0 var(--amino-space-16)}:host button:not(.only-icon).has-icon{gap:var(--amino-space-8)}:host button.override-background{background-color:var(--background-color, var(--amino-gray-0));color:var(--color, var(--amino-gray-1200));outline:1px solid var(--background-color, var(--amino-gray-0))}:host button.override-background:disabled{opacity:0.8}:host button.override-background:not(:disabled):hover{opacity:0.9}:host button:not(.override-background){}:host button:not(.override-background).primary{background:var(--amino-blue-600);outline:1px solid var(--amino-blue-600);color:var(--amino-gray-0)}:host button:not(.override-background).primary:not([disabled]):hover{background-image:var(--amino-button-primary-hover)}:host button:not(.override-background).primary:not([disabled]):active{background:var(--amino-blue-700)}:host button:not(.override-background).primary:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).primary[disabled]{background:var(--amino-blue-400)}:host button:not(.override-background).primary[disabled] .zonos--spinner-wrapper{background-color:var(--amino-blue-400)}:host button:not(.override-background).primary .zonos--spinner-wrapper{background-color:var(--amino-blue-600)}:host button:not(.override-background).success{background:var(--amino-green-600);outline:1px solid var(--amino-green-600);color:var(--amino-gray-0)}:host button:not(.override-background).success:not([disabled]):hover{background-image:var(--amino-button-success-hover)}:host button:not(.override-background).success:not([disabled]):active{background:var(--amino-green-700)}:host button:not(.override-background).success:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).success[disabled]{background:var(--amino-green-400)}:host button:not(.override-background).success[disabled] .zonos--spinner-wrapper{background-color:var(--amino-green-400)}:host button:not(.override-background).danger{background:var(--amino-red-600);outline:1px solid var(--amino-red-600);color:var(--amino-gray-0)}:host button:not(.override-background).danger:not([disabled]):hover{background-image:var(--amino-button-danger-hover)}:host button:not(.override-background).danger:not([disabled]):active{background:var(--amino-red-700)}:host button:not(.override-background).danger:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).danger[disabled]{background:var(--amino-red-400)}:host button:not(.override-background).danger[disabled] .zonos--spinner-wrapper{background-color:var(--amino-red-400)}:host button:not(.override-background).warning{background:var(--amino-orange-600);outline:1px solid var(--amino-orange-600);color:var(--amino-gray-0)}:host button:not(.override-background).warning:not([disabled]):hover{background-image:var(--amino-button-warning-hover)}:host button:not(.override-background).warning:not([disabled]):active{background:var(--amino-orange-700)}:host button:not(.override-background).warning:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).warning[disabled]{background:var(--amino-orange-400)}:host button:not(.override-background).warning[disabled] .zonos--spinner-wrapper{background-color:var(--amino-orange-400)}:host button:not(.override-background).subtle{background:transparent;color:var(--color)}:host button:not(.override-background).subtle:not([disabled]):hover{background:var(--amino-gray-100)}:host button:not(.override-background).subtle:not([disabled]):active{background:var(--amino-gray-200)}:host button:not(.override-background).subtle:focus{-webkit-box-shadow:var(--amino-button-focus-ring);box-shadow:var(--amino-button-focus-ring)}:host button:not(.override-background).subtle[disabled] .content{opacity:0.6}:host button:not(.override-background).subtle[disabled] .zonos--spinner-wrapper{background-color:var(--amino-gray-0)}:host button:not(.override-background).outline{background:transparent;outline:1px solid var(--amino-gray-700)}:host button:not(.override-background).outline:not([disabled]):hover{background-color:var(--amino-gray-100)}:host button:not(.override-background).outline:not([disabled]):active{background:var(--amino-gray-200)}";
-const ZonosButton = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * 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 watchers() { return {
-    "icon": ["iconChangeHandler"]
-  }; }
-};
-ZonosButton.style = zonosButtonCss;
-const zonosSpinnerCss = ":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}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{position:relative;overflow:hidden;width:var(--size);height:var(--size);display:-ms-inline-flexbox;display:inline-flex}:host svg{width:var(--size);height:var(--size);stroke:var(--amino-blue-600);-webkit-animation:rotate 2s linear infinite;animation:rotate 2s linear infinite}:host circle.track{stroke:var(--amino-gray-200)}:host.black{stroke:var(--amino-spinner-stroke-black)}:host.black circle.track{stroke:var(--amino-spinner-track-black)}:host.white{stroke:var(--amino-spinner-stroke-white)}:host.white circle.track{stroke:var(--amino-spinner-track-white)}:host.info{stroke:var(--amino-blue-600)}:host.info circle.track{stroke:var(--amino-blue-100)}:host.success{stroke:var(--amino-green-600)}:host.success circle.track{stroke:var(--amino-green-100)}:host.danger{stroke:var(--amino-red-600)}:host.danger circle.track{stroke:var(--amino-red-100)}:host.warning{stroke:var(--amino-orange-600)}:host.warning circle.track{stroke:var(--amino-orange-100)}@-webkit-keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes dash{0%{stroke-dasharray:1, 150;stroke-dashoffset:0}50%{stroke-dasharray:90, 150;stroke-dashoffset:-35}100%{stroke-dasharray:90, 150;stroke-dashoffset:-124}}@keyframes dash{0%{stroke-dasharray:1, 150;stroke-dashoffset:0}50%{stroke-dasharray:90, 150;stroke-dashoffset:-35}100%{stroke-dasharray:90, 150;stroke-dashoffset:-124}}:host circle:not(.track){stroke-linecap:round;-webkit-animation:dash 1.5s ease-in-out infinite;animation:dash 1.5s ease-in-out infinite}";
-const ZonosSpinner = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.size = 32;
-    this.color = undefined;
-  }
-  render() {
-    if (!this.el.shadowRoot) {
-      return null;
-    }
-    return (h(Host, { class: classes(['zonos--elements', this.color]), style: {
-        '--size': `${this.size}px`,
-      } }, h("svg", { viewBox: "0 0 50 50" }, h("circle", { class: "track", cx: "25", cy: "25", fill: "none", id: "loading-spinner-circle", r: "20", "stroke-width": "5" }), h("circle", { cx: "25", cy: "25", fill: "none", id: "loading-spinner-circle", r: "20", "stroke-width": "5" }))));
-  }
-  get el() { return getElement(this); }
-};
-ZonosSpinner.style = zonosSpinnerCss;
-export { ZonosButton as zonos_button, ZonosSpinner as zonos_spinner };
-//# sourceMappingURL=zonos-button_2.entry.js.map

package/dist/zonos-elements/zonos-button_2.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"zonos-button.zonos-spinner.entry.esm.js","mappings":"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","names":[],"sources":["src/components/utils/getButtonTheme.ts","src/components/common/zonos-button/zonos-button.scss?tag=zonos-button&encapsulation=shadow","src/components/common/zonos-button/zonos-button.tsx","src/components/common/zonos-spinner/zonos-spinner.scss?tag=zonos-spinner&encapsulation=shadow","src/components/common/zonos-spinner/zonos-spinner.tsx"],"sourcesContent":["import { zonosStore } from 'src/components/store/zonosStore';\nimport { isColorVariable } from 'src/components/utils/isColorVariable';\nimport { isDarkColor } from 'src/components/utils/isDarkColor';\nimport type { ElementsUiTheme } from 'src/types/generated/graphql.customer.types';\n\n/**\n * Get theme for button text based on background color\n */\nexport const getButtonTheme = (overrideBackground?: string) => {\n // use override background if it exists, otherwise use color from setting\n const background = overrideBackground || zonosStore.appearance.colorSecondary;\n\n const backgroundColor =\n background && isColorVariable(background)\n ? `var(--amino-${background})`\n : background;\n\n // determine theme based on background color (to change button text color if needed)\n const buttonTheme: ElementsUiTheme =\n backgroundColor && isDarkColor(backgroundColor) ? 'DARK' : 'LIGHT';\n\n return buttonTheme;\n};\n","$color: var(--color, $amino-gray-1200);\n\n$border-radius: var(--border-radius, $amino-radius-10);\n\n@function get-text-color($defaultColor) {\n @return var(--color, $defaultColor);\n}\n@function get-background-color($defaultColor) {\n @return var(--background-color, $defaultColor);\n}\n\n:host {\n display: inline-flex;\n\n .zonos--spinner-wrapper {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n background-color: $amino-surface-color;\n justify-content: center;\n border-radius: $amino-radius-10;\n gap: $amino-space-8;\n }\n\n button {\n display: inline-flex;\n width: 100%;\n position: relative;\n outline: none;\n font-size: 14px;\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n padding: 0 $amino-space-16;\n background-color: $amino-surface-color;\n border: none;\n outline: 1px solid $amino-surface-color;\n border-radius: $border-radius;\n transition: $amino-transition;\n font-weight: 500;\n user-select: none;\n font-family: $amino-font-sans;\n letter-spacing: normal;\n cursor: pointer;\n white-space: nowrap;\n padding: $amino-space-8 $amino-space-24;\n color: $color;\n\n &.sm,\n &.md,\n &.lg {\n &.no-background {\n background: none;\n outline: none;\n }\n &.no-padding-left {\n padding-left: 0;\n }\n &.no-padding-right {\n padding-right: 0;\n }\n }\n\n &[disabled] {\n cursor: not-allowed;\n background-color: $amino-gray-200;\n .zonos--spinner-wrapper {\n background-color: $amino-gray-200;\n }\n }\n\n &:active {\n transform: scale(0.99);\n }\n\n /** Button size */\n &.sm {\n height: $amino-size-sm;\n line-height: $amino-size-sm;\n padding: $amino-space-4 $amino-space-8;\n // only icon and no content\n &:not(.has-content).has-icon {\n padding: 0 $amino-space-4;\n }\n }\n &.md {\n height: $amino-size-md;\n line-height: $amino-size-md;\n padding: $amino-space-8 $amino-space-16;\n // only icon and no content\n &:not(.has-content).has-icon {\n padding: 0 $amino-space-8;\n }\n }\n &.lg {\n height: $amino-size-lg;\n line-height: $amino-size-lg;\n padding: $amino-space-12 $amino-space-24;\n // only icon and no content\n &:not(.has-content).has-icon {\n padding: 0 $amino-space-16;\n }\n }\n\n &:not(.only-icon).has-icon {\n gap: $amino-space-8;\n }\n\n // styling button with override background color setting\n &.override-background {\n background-color: get-background-color($amino-gray-0);\n color: get-text-color($amino-gray-1200);\n outline: 1px solid get-background-color($amino-gray-0);\n &:disabled {\n opacity: 0.8;\n }\n &:not(:disabled):hover {\n opacity: 0.9;\n }\n }\n\n &:not(.override-background) {\n /** Button variant */\n &.primary {\n background: $amino-blue-600;\n outline: 1px solid $amino-blue-600;\n color: $amino-gray-0;\n\n &:not([disabled]) {\n &:hover {\n background-image: $amino-button-primary-hover;\n }\n &:active {\n background: $amino-blue-700;\n }\n &:focus {\n box-shadow: $amino-focus-button;\n }\n }\n\n &[disabled] {\n background: $amino-blue-400;\n .zonos--spinner-wrapper {\n background-color: $amino-blue-400;\n }\n }\n\n .zonos--spinner-wrapper {\n background-color: $amino-blue-600;\n }\n }\n &.success {\n background: $amino-green-600;\n outline: 1px solid $amino-green-600;\n color: $amino-gray-0;\n\n &:not([disabled]) {\n &:hover {\n background-image: $amino-button-success-hover;\n }\n &:active {\n background: $amino-green-700;\n }\n &:focus {\n box-shadow: $amino-focus-button;\n }\n }\n\n &[disabled] {\n background: $amino-green-400;\n .zonos--spinner-wrapper {\n background-color: $amino-green-400;\n }\n }\n }\n &.danger {\n background: $amino-red-600;\n outline: 1px solid $amino-red-600;\n color: $amino-gray-0;\n\n &:not([disabled]) {\n &:hover {\n background-image: $amino-button-danger-hover;\n }\n &:active {\n background: $amino-red-700;\n }\n &:focus {\n box-shadow: $amino-focus-button;\n }\n }\n\n &[disabled] {\n background: $amino-red-400;\n .zonos--spinner-wrapper {\n background-color: $amino-red-400;\n }\n }\n }\n &.warning {\n background: $amino-orange-600;\n outline: 1px solid $amino-orange-600;\n color: $amino-gray-0;\n\n &:not([disabled]) {\n &:hover {\n background-image: $amino-button-warning-hover;\n }\n &:active {\n background: $amino-orange-700;\n }\n &:focus {\n box-shadow: $amino-focus-button;\n }\n }\n\n &[disabled] {\n background: $amino-orange-400;\n .zonos--spinner-wrapper {\n background-color: $amino-orange-400;\n }\n }\n }\n &.subtle {\n background: transparent;\n color: var(--color);\n\n &:not([disabled]) {\n &:hover {\n background: $amino-gray-100;\n }\n &:active {\n background: $amino-gray-200;\n }\n }\n\n &:focus {\n box-shadow: $amino-button-focus-ring;\n }\n\n &[disabled] {\n .content {\n opacity: 0.6;\n }\n .zonos--spinner-wrapper {\n background-color: $amino-gray-0;\n }\n }\n }\n &.outline {\n background: transparent;\n outline: 1px solid $amino-gray-700;\n\n &:not([disabled]) {\n &:hover {\n background-color: $amino-gray-100;\n }\n &:active {\n background: $amino-gray-200;\n }\n }\n }\n }\n }\n}\n","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","$size: var(--size);\n\n:host {\n position: relative;\n overflow: hidden;\n width: $size;\n height: $size;\n display: inline-flex;\n svg {\n width: $size;\n height: $size;\n stroke: $amino-blue-600;\n animation: rotate 2s linear infinite;\n }\n\n circle.track {\n stroke: $amino-gray-200;\n }\n\n &.black {\n stroke: $amino-spinner-stroke-black;\n\n circle.track {\n stroke: $amino-spinner-track-black;\n }\n }\n &.white {\n stroke: $amino-spinner-stroke-white;\n\n circle.track {\n stroke: $amino-spinner-track-white;\n }\n }\n &.info {\n stroke: $amino-blue-600;\n circle.track {\n stroke: $amino-blue-100;\n }\n }\n &.success {\n stroke: $amino-green-600;\n circle.track {\n stroke: $amino-green-100;\n }\n }\n &.danger {\n stroke: $amino-red-600;\n circle.track {\n stroke: $amino-red-100;\n }\n }\n &.warning {\n stroke: $amino-orange-600;\n circle.track {\n stroke: $amino-orange-100;\n }\n }\n\n @keyframes rotate {\n 100% {\n transform: rotate(360deg);\n }\n }\n\n @keyframes dash {\n 0% {\n stroke-dasharray: 1, 150;\n stroke-dashoffset: 0;\n }\n 50% {\n stroke-dasharray: 90, 150;\n stroke-dashoffset: -35;\n }\n 100% {\n stroke-dasharray: 90, 150;\n stroke-dashoffset: -124;\n }\n }\n\n circle:not(.track) {\n stroke-linecap: round;\n animation: dash 1.5s ease-in-out infinite;\n }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\nimport { classes } from 'src/components/utils/classes';\n\nexport type SpinnerColor =\n | 'primary'\n | 'info'\n | 'success'\n | 'danger'\n | 'warning'\n | 'black'\n | 'white';\n\n@Component({\n shadow: true,\n styleUrl: 'zonos-spinner.scss',\n tag: 'zonos-spinner',\n})\nexport class ZonosSpinner {\n /**\n * The size of the spinner\n * @default 32\n */\n @Prop() size: number = 32;\n\n /**\n * Color of the spinner\n */\n @Prop() color?: SpinnerColor;\n\n @Element() el!: HTMLZonosSpinnerElement;\n\n render() {\n if (!this.el.shadowRoot) {\n return null;\n }\n\n return (\n <Host\n class={classes(['zonos--elements', this.color])}\n style={{\n '--size': `${this.size}px`,\n }}\n >\n <svg viewBox=\"0 0 50 50\">\n <circle\n class=\"track\"\n cx=\"25\"\n cy=\"25\"\n fill=\"none\"\n id=\"loading-spinner-circle\"\n r=\"20\"\n stroke-width=\"5\"\n />\n <circle\n cx=\"25\"\n cy=\"25\"\n fill=\"none\"\n id=\"loading-spinner-circle\"\n r=\"20\"\n stroke-width=\"5\"\n />\n </svg>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/zonos-elements/zonos-button_2.system.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- System.register(["./index-87193773.system.js","./zonosStore-e5c545ea.system.js","./classes-ce25a814.system.js","./getBorderRadius-b59c3ada.system.js","./isColorVariable-be454101.system.js","./isDarkColor-231502d4.system.js"],(function(o){"use strict";var n,t,a,r,e,i,s,d,c;return{setters:[function(o){n=o.r;t=o.h;a=o.H;r=o.d},function(o){e=o.z},function(o){i=o.c},function(o){s=o.g},function(o){d=o.i},function(o){c=o.i}],execute:function(){var h=function(o){var n=o\|\|e.appearance.colorSecondary;var t=n&&d(n)?"var(--amino-".concat(n,")"):n;var a=t&&c(t)?"DARK":"LIGHT";return a};var u=":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}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-inline-flexbox;display:inline-flex}:host .zonos--spinner-wrapper{position:absolute;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;background-color:var(--amino-surface-color);-ms-flex-pack:center;justify-content:center;border-radius:var(--amino-radius-10);gap:var(--amino-space-8)}:host button{display:-ms-inline-flexbox;display:inline-flex;width:100%;position:relative;outline:none;font-size:14px;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:0 var(--amino-space-16);background-color:var(--amino-surface-color);border:none;outline:1px solid var(--amino-surface-color);border-radius:var(--border-radius, var(--amino-radius-10));-webkit-transition:var(--amino-transition);transition:var(--amino-transition);font-weight:500;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:var(--amino-font-sans);letter-spacing:normal;cursor:pointer;white-space:nowrap;padding:var(--amino-space-8) var(--amino-space-24);color:var(--color, var(--amino-gray-1200));}:host button.sm.no-background,:host button.md.no-background,:host button.lg.no-background{background:none;outline:none}:host button.sm.no-padding-left,:host button.md.no-padding-left,:host button.lg.no-padding-left{padding-left:0}:host button.sm.no-padding-right,:host button.md.no-padding-right,:host button.lg.no-padding-right{padding-right:0}:host button[disabled]{cursor:not-allowed;background-color:var(--amino-gray-200)}:host button[disabled] .zonos--spinner-wrapper{background-color:var(--amino-gray-200)}:host button:active{-webkit-transform:scale(0.99);transform:scale(0.99)}:host button.sm{height:var(--amino-size-sm);line-height:var(--amino-size-sm);padding:var(--amino-space-4) var(--amino-space-8)}:host button.sm:not(.has-content).has-icon{padding:0 var(--amino-space-4)}:host button.md{height:var(--amino-size-md);line-height:var(--amino-size-md);padding:var(--amino-space-8) var(--amino-space-16)}:host button.md:not(.has-content).has-icon{padding:0 var(--amino-space-8)}:host button.lg{height:var(--amino-size-lg);line-height:var(--amino-size-lg);padding:var(--amino-space-12) var(--amino-space-24)}:host button.lg:not(.has-content).has-icon{padding:0 var(--amino-space-16)}:host button:not(.only-icon).has-icon{gap:var(--amino-space-8)}:host button.override-background{background-color:var(--background-color, var(--amino-gray-0));color:var(--color, var(--amino-gray-1200));outline:1px solid var(--background-color, var(--amino-gray-0))}:host button.override-background:disabled{opacity:0.8}:host button.override-background:not(:disabled):hover{opacity:0.9}:host button:not(.override-background){}:host button:not(.override-background).primary{background:var(--amino-blue-600);outline:1px solid var(--amino-blue-600);color:var(--amino-gray-0)}:host button:not(.override-background).primary:not([disabled]):hover{background-image:var(--amino-button-primary-hover)}:host button:not(.override-background).primary:not([disabled]):active{background:var(--amino-blue-700)}:host button:not(.override-background).primary:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).primary[disabled]{background:var(--amino-blue-400)}:host button:not(.override-background).primary[disabled] .zonos--spinner-wrapper{background-color:var(--amino-blue-400)}:host button:not(.override-background).primary .zonos--spinner-wrapper{background-color:var(--amino-blue-600)}:host button:not(.override-background).success{background:var(--amino-green-600);outline:1px solid var(--amino-green-600);color:var(--amino-gray-0)}:host button:not(.override-background).success:not([disabled]):hover{background-image:var(--amino-button-success-hover)}:host button:not(.override-background).success:not([disabled]):active{background:var(--amino-green-700)}:host button:not(.override-background).success:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).success[disabled]{background:var(--amino-green-400)}:host button:not(.override-background).success[disabled] .zonos--spinner-wrapper{background-color:var(--amino-green-400)}:host button:not(.override-background).danger{background:var(--amino-red-600);outline:1px solid var(--amino-red-600);color:var(--amino-gray-0)}:host button:not(.override-background).danger:not([disabled]):hover{background-image:var(--amino-button-danger-hover)}:host button:not(.override-background).danger:not([disabled]):active{background:var(--amino-red-700)}:host button:not(.override-background).danger:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).danger[disabled]{background:var(--amino-red-400)}:host button:not(.override-background).danger[disabled] .zonos--spinner-wrapper{background-color:var(--amino-red-400)}:host button:not(.override-background).warning{background:var(--amino-orange-600);outline:1px solid var(--amino-orange-600);color:var(--amino-gray-0)}:host button:not(.override-background).warning:not([disabled]):hover{background-image:var(--amino-button-warning-hover)}:host button:not(.override-background).warning:not([disabled]):active{background:var(--amino-orange-700)}:host button:not(.override-background).warning:not([disabled]):focus{-webkit-box-shadow:var(--amino-focus-button);box-shadow:var(--amino-focus-button)}:host button:not(.override-background).warning[disabled]{background:var(--amino-orange-400)}:host button:not(.override-background).warning[disabled] .zonos--spinner-wrapper{background-color:var(--amino-orange-400)}:host button:not(.override-background).subtle{background:transparent;color:var(--color)}:host button:not(.override-background).subtle:not([disabled]):hover{background:var(--amino-gray-100)}:host button:not(.override-background).subtle:not([disabled]):active{background:var(--amino-gray-200)}:host button:not(.override-background).subtle:focus{-webkit-box-shadow:var(--amino-button-focus-ring);box-shadow:var(--amino-button-focus-ring)}:host button:not(.override-background).subtle[disabled] .content{opacity:0.6}:host button:not(.override-background).subtle[disabled] .zonos--spinner-wrapper{background-color:var(--amino-gray-0)}:host button:not(.override-background).outline{background:transparent;outline:1px solid var(--amino-gray-700)}:host button:not(.override-background).outline:not([disabled]):hover{background-color:var(--amino-gray-100)}:host button:not(.override-background).outline:not([disabled]):active{background:var(--amino-gray-200)}";var l=o("zonos_button",function(){function o(o){var t=this;n(this,o);this.handleSlotChange=function(){t.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}o.prototype.iconChangeHandler=function(){this.hasIcon=!!this.icon};o.prototype.clickHandler=function(o){if(this.loading\|\|this.isDisabled){o.preventDefault();o.stopPropagation()}};o.prototype.componentWillLoad=function(){this.iconChangeHandler()};o.prototype.render=function(){var o=this.loading\|\|this.isDisabled;var n=this.color&&d(this.color)?"var(--amino-".concat(this.color,")"):this.color;var r=this.backgroundColor\|\|e.appearance.colorSecondary;var c=this.variant==="standard"?h(r):undefined;var u=s(this.borderStyle);return t(a,{class:i(["zonos--elements",this.class]),"data-theme":this.theme\|\|c,disabled:o,style:{"--background-color":r,"--border-radius":u,"--color":n}},t("button",{class:i([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,this.backgroundColor&&this.variant==="standard"&&"override-background"]),disabled:o},this.loading&&t("div",{class:"zonos--spinner-wrapper"},t("zonos-spinner",{size:16})),!this.loading&&!this.iconRight&&this.icon,t("slot",{onSlotchange:this.handleSlotChange}),!this.loading&&this.iconRight&&this.icon))};Object.defineProperty(o,"watchers",{get:function(){return{icon:["iconChangeHandler"]}},enumerable:false,configurable:true});return o}());l.style=u;var b=":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}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{position:relative;overflow:hidden;width:var(--size);height:var(--size);display:-ms-inline-flexbox;display:inline-flex}:host svg{width:var(--size);height:var(--size);stroke:var(--amino-blue-600);-webkit-animation:rotate 2s linear infinite;animation:rotate 2s linear infinite}:host circle.track{stroke:var(--amino-gray-200)}:host.black{stroke:var(--amino-spinner-stroke-black)}:host.black circle.track{stroke:var(--amino-spinner-track-black)}:host.white{stroke:var(--amino-spinner-stroke-white)}:host.white circle.track{stroke:var(--amino-spinner-track-white)}:host.info{stroke:var(--amino-blue-600)}:host.info circle.track{stroke:var(--amino-blue-100)}:host.success{stroke:var(--amino-green-600)}:host.success circle.track{stroke:var(--amino-green-100)}:host.danger{stroke:var(--amino-red-600)}:host.danger circle.track{stroke:var(--amino-red-100)}:host.warning{stroke:var(--amino-orange-600)}:host.warning circle.track{stroke:var(--amino-orange-100)}@-webkit-keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes dash{0%{stroke-dasharray:1, 150;stroke-dashoffset:0}50%{stroke-dasharray:90, 150;stroke-dashoffset:-35}100%{stroke-dasharray:90, 150;stroke-dashoffset:-124}}@keyframes dash{0%{stroke-dasharray:1, 150;stroke-dashoffset:0}50%{stroke-dasharray:90, 150;stroke-dashoffset:-35}100%{stroke-dasharray:90, 150;stroke-dashoffset:-124}}:host circle:not(.track){stroke-linecap:round;-webkit-animation:dash 1.5s ease-in-out infinite;animation:dash 1.5s ease-in-out infinite}";var g=o("zonos_spinner",function(){function o(o){n(this,o);this.size=32;this.color=undefined}o.prototype.render=function(){if(!this.el.shadowRoot){return null}return t(a,{class:i(["zonos--elements",this.color]),style:{"--size":"".concat(this.size,"px")}},t("svg",{viewBox:"0 0 50 50"},t("circle",{class:"track",cx:"25",cy:"25",fill:"none",id:"loading-spinner-circle",r:"20","stroke-width":"5"}),t("circle",{cx:"25",cy:"25",fill:"none",id:"loading-spinner-circle",r:"20","stroke-width":"5"})))};Object.defineProperty(o.prototype,"el",{get:function(){return r(this)},enumerable:false,configurable:true});return o}());g.style=b}}}));
2	- //# sourceMappingURL=zonos-button_2.system.entry.js.map