@zonos/elements 1.3.18-alpha.1 → 1.3.18-alpha.3

package/dist/components/zonos-checkout-progress-tabs2.js

@@ -1,138 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as cartStore } from './stripe.js';
-import { a as translate } from './translationStore.js';
-import { z as zonosStore } from './zonosStore.js';
-import { c as classes } from './classes.js';
-import { t as tinycolor, i as isDarkColor } from './isDarkColor.js';
-import { i as isColorVariable } from './isColorVariable.js';
-import { d as defineCustomElement$2 } from './zonos-icon2.js';
-import { d as defineCustomElement$1 } from './zonos-text2.js';
-
-const getContrastColor = ({ backgroundColor, color, }) => {
-    // get readibility of the color
-    const colorReadibilityValue = tinycolor.readability(color, backgroundColor);
-    if (colorReadibilityValue > 2.5) {
-        // no need to change the color if it's already contrast enough
-        return color;
-    }
-    if (isDarkColor(color)) {
-        return '#ffffff';
-    }
-    else {
-        return tinycolor(color).darken(25).toHexString();
-    }
-};
-
-const TabCheckmark = `<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M18.289 7.40424C18.618 7.65585 18.6808 8.12656 18.4291 8.4556L11.9291 16.9556C11.7978 17.1273 11.5988 17.234 11.383 17.2484C11.1673 17.2627 10.9559 17.1832 10.803 17.0303L6.80304 13.0303C6.51015 12.7374 6.51015 12.2626 6.80304 11.9697C7.09594 11.6768 7.57081 11.6768 7.8637 11.9697L11.258 15.3639L17.2376 7.54442C17.4892 7.21539 17.9599 7.15263 18.289 7.40424Z" fill="currentColor"/>
-</svg>
-`;
-
-const zonosCheckoutProgressTabsCss = ":host{font-family:var(--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--font-family, Inter), Inter}: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{margin-bottom:32px}:host .zonos--tab-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:distribute;justify-content:space-around}:host .zonos--tab-index{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;font-size:13px;width:24px;height:24px;font-weight:bold}:host .zonos--tab-index .zonos--tab-index-label,:host .zonos--tab-index .zonos--tab-index-done-icon{position:absolute;top:0;width:24px;height:24px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-transition:top 0.5s ease-in-out, opacity 0.5s ease-in-out;transition:top 0.5s ease-in-out, opacity 0.5s ease-in-out}:host .zonos--tab-index .zonos--tab-index-done-icon{top:-50%;opacity:0}:host .zonos--tab-item{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;background:transparent;border:0;cursor:pointer}:host .zonos--tab-item:disabled{cursor:not-allowed}:host .zonos--tab-item.done .zonos--tab-index-done-icon{top:0;opacity:1}:host .zonos--tab-item.done .zonos--tab-index-label{opacity:0;top:50%}:host .zonos--tab-item.selected zonos-text{color:var(--color)}:host .zonos--tab-progress{width:100%;background-color:transparent;border-radius:10px;-webkit-box-shadow:inset 0 0 5px rgba(0, 0, 0, 0.4);box-shadow:inset 0 0 5px rgba(0, 0, 0, 0.4);overflow:hidden;position:relative;padding:1px;height:8px}:host .zonos--tab-progress .zonos--progress-bar-fill{border-radius:10px;background-color:var(--color);height:100%;width:var(--progress-percent);-webkit-transition:width 0.5s ease-in-out;transition:width 0.5s ease-in-out}";
-const ZonosCheckoutProgressTabsStyle0 = zonosCheckoutProgressTabsCss;
-
-const ZonosCheckoutProgressTabs = /*@__PURE__*/ proxyCustomElement(class ZonosCheckoutProgressTabs extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        /**
-         * The total number of steps that's done
-         */
-        this.getTotalSuccessStep = () => {
-            // include the finish step
-            const totalSteps = 4;
-            const stepDone = Object.values(cartStore.tabItems).filter(tab => tab.isDone).length + 1;
-            return `${(stepDone / totalSteps) * 100}%`;
-        };
-        this.isTabClickable = (tabValue) => {
-            const currentTab = cartStore.tabItems[tabValue];
-            if (!currentTab) {
-                return false;
-            }
-            // clickable if the tab state is done
-            if (currentTab.isDone) {
-                return true;
-            }
-            // if any of the previous tabs are not done, the tab is not clickable
-            return Object.values(cartStore.tabItems)
-                .slice(0, currentTab.index - 1)
-                .every(tab => tab.isDone);
-        };
-        this.tabColor = null;
-        this.backgroundColor = null;
-    }
-    /**
-     * Set the tab items data. This is to be used in storybook
-     */
-    async setTabItems(tabItems) {
-        cartStore.tabItems = tabItems;
-    }
-    /**
-     * Set selected tab. Only set the tab if it's clickable
-     */
-    async setTabSelected(tabValue) {
-        if (this.isTabClickable(tabValue)) {
-            cartStore.step = tabValue;
-        }
-    }
-    render() {
-        const selectedStep = cartStore.step;
-        const labelSelectedColor = this.tabColor || zonosStore.appearance.colorSecondary;
-        // If the background color and the tab color are not contrat enough, increase the contrast of the label color
-        const contrastLabelColor = this.backgroundColor && labelSelectedColor
-            ? getContrastColor({
-                backgroundColor: isColorVariable(this.backgroundColor)
-                    ? window
-                        .getComputedStyle(this.ele)
-                        .getPropertyValue(`--zonos-elements-${this.backgroundColor.replace('--zonos-elements-', '')}`)
-                    : this.backgroundColor,
-                color: labelSelectedColor,
-            })
-            : labelSelectedColor;
-        return (h(Host, { key: '5079903c5c31395bc5c92a4542d1f7ae78dc34b2', class: "zonos--elements", style: {
-                '--color': contrastLabelColor,
-                '--progress-percent': this.getTotalSuccessStep(),
-            } }, h("div", { key: 'fabfe8836c827910907c4bceb6f99d65492b440b', class: "zonos--tab-wrapper" }, Object.values(cartStore.tabItems).map((tab, index) => {
-            const isSelected = tab.value === selectedStep;
-            return (h("button", { class: classes([
-                    'zonos--tab-item',
-                    tab.value === selectedStep && 'selected',
-                    tab.isDone && 'done',
-                ]), disabled: !this.isTabClickable(tab.value), key: tab.value, onClick: () => (cartStore.step = tab.value) }, h("div", { class: "zonos--tab-index" }, h("zonos-text", { class: "zonos--tab-index-label", textColor: isSelected ? contrastLabelColor : 'gray-1200', type: "label" }, index + 1), h("zonos-icon", { class: "zonos--tab-index-done-icon", content: TabCheckmark, iconColor: isSelected ? contrastLabelColor : 'gray-1200' })), h("zonos-text", { textColor: isSelected ? contrastLabelColor : 'gray-1200', type: "label" }, translate(tab.label))));
-        })), h("div", { key: 'cfb1c57fadb793f5db34d02e48f3fe4c3a93a043', class: "zonos--tab-progress" }, h("div", { key: 'd02dd1cc3a5e5b7bc8395038e1cd75cb07104072', class: "zonos--progress-bar-fill" }))));
-    }
-    static get assetsDirs() { return ["assets"]; }
-    get ele() { return this; }
-    static get style() { return ZonosCheckoutProgressTabsStyle0; }
-}, [1, "zonos-checkout-progress-tabs", {
-        "tabColor": [1, "tab-color"],
-        "backgroundColor": [1, "background-color"],
-        "setTabItems": [64],
-        "setTabSelected": [64]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["zonos-checkout-progress-tabs", "zonos-icon", "zonos-text"];
-    components.forEach(tagName => { switch (tagName) {
-        case "zonos-checkout-progress-tabs":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZonosCheckoutProgressTabs);
-            }
-            break;
-        case "zonos-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "zonos-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { ZonosCheckoutProgressTabs as Z, defineCustomElement as d };

package/dist/components/zonos-checkout.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface ZonosCheckout extends Components.ZonosCheckout, HTMLElement {}
-export const ZonosCheckout: {
-    prototype: ZonosCheckout;
-    new (): ZonosCheckout;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;