@zonos/elements 1.3.233 → 1.3.234

package/dist/cjs/zonos-confirm-dialog_2.cjs.entry.js

@@ -1,168 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-69fa8852.js');
-const translationStore = require('./translationStore-08d3ff9c.js');
-const zonosStore = require('./zonosStore-37a4b4f4.js');
-const classes = require('./classes-b7918f56.js');
-const getBorderRadius = require('./getBorderRadius-2ef1170d.js');
-require('./VarianceTest-bec00ea8.js');
-
-const ExclamationMarkDuotoneIcon = `<svg color="var(--zonos-elements-red-800)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" style="display: block;">
-  <path d="M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16Z" data-is-secondary-color="true" fill="var(--zonos-elements-red-400)"></path>
-  <path d="M12.75 9a.75.75 0 0 0-1.5 0v2.5a.75.75 0 0 0 1.5 0V9Zm0 5.5a.75.75 0 0 0-1.5 0v.5a.75.75 0 0 0 1.5 0v-.5Z" fill="currentColor"></path>
-</svg>`;
-
-const HelpDuotoneIcon = `<svg color="var(--zonos-elements-blue-800)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" style="display: block;">
-  <path d="M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16Z" data-is-secondary-color="true" fill="var(--zonos-elements-blue-400)"></path>
-  <path d="M10.25 10.25a1.75 1.75 0 1 1 2.431 1.613c-.616.26-1.431.885-1.431 1.887a.75.75 0 0 0 1.5 0c0-.053.02-.128.108-.228.092-.104.236-.205.408-.278A3.25 3.25 0 1 0 8.75 10.25a.75.75 0 0 0 1.5 0Zm2.5 5.75a.75.75 0 0 0-1.5 0v.25a.75.75 0 0 0 1.5 0V16Z" fill="currentColor"></path>
-</svg>`;
-
-const WarningDuotoneIcon = `<svg color="var(--zonos-elements-orange-800)" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" style="display: block;">
-  <path d="M14.46 5.492c-1.014-2.027-3.906-2.027-4.92 0L4.276 16.02c-.914 1.83.416 3.98 2.46 3.98h10.528c2.044 0 3.374-2.151 2.46-3.98L14.46 5.492Z" data-is-secondary-color="true" fill="var(--zonos-elements-orange-400)"></path>
-  <path d="M12.75 10a.75.75 0 0 0-1.5 0v2.5a.75.75 0 0 0 1.5 0V10Zm0 5.5a.75.75 0 0 0-1.5 0v.5a.75.75 0 0 0 1.5 0v-.5Z" fill="currentColor"></path>
-</svg>`;
-
-const zonosConfirmDialogCss = ":host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--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 .zonos--backdrop,:host .zonos--confirm-layout{opacity:0;z-index:-999;visibility:hidden;-webkit-transition:opacity 0.3s, visibility 0.3s;transition:opacity 0.3s, visibility 0.3s}:host .zonos--backdrop{width:100vw;height:100vh;left:0;top:0;background:var(--zonos-elements-backdrop-color);position:fixed}:host .zonos--confirm-layout{width:100vw;height:100vh;left:0;top:0;position:fixed;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;color:var(--zonos-elements-text-color)}:host .zonos--confirm-dialog{position:relative;background:var(--zonos-elements-gray-0);max-width:90vw;max-height:90vh;width:var(--zonos--dialog-width);border-radius:var(--zonos--border-radius, 10px);outline:none;-webkit-box-shadow:var(--zonos-elements-v3-shadow-xxl);box-shadow:var(--zonos-elements-v3-shadow-xxl);border:var(--zonos-elements-border);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .wrapper{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;padding:24px;gap:24px}:host .icon-wrapper{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:40px;width:40px;border-radius:50%;background:var(--zonos-elements-blue-100)}:host .warn .icon-wrapper{background:var(--zonos-elements-orange-100)}:host .danger .icon-wrapper{background:var(--zonos-elements-red-100)}:host .footer{display:-ms-flexbox;display:flex;width:100%;gap:8px}:host .footer zonos-button{-ms-flex:1;flex:1}:host .content{display:-ms-flexbox;display:flex;gap:8px;-ms-flex-direction:column;flex-direction:column}:host .content zonos-text{text-align:center}:host(.open) .zonos--confirm-layout,:host(.open) .zonos--backdrop{visibility:visible}:host(.open) .zonos--backdrop{z-index:2147483009;opacity:0.65}:host(.open) .zonos--confirm-layout{opacity:1;z-index:2147483010;-webkit-transform:scale(1);transform:scale(1)}";
-const ZonosConfirmDialogStyle0 = zonosConfirmDialogCss;
-
-const ZonosConfirmDialog = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.confirmClicked = index.createEvent(this, "confirmClicked", 7);
-        this.cancelClicked = index.createEvent(this, "cancelClicked", 7);
-        /**
-         * Dialog title text
-         * @default "Are you sure?"
-         */
-        this.dialogTitle = translationStore.translate('Are you sure?');
-        /**
-         * Dialog intent (for icon and button color)
-         * @default "info"
-         */
-        this.dialogIntent = 'info';
-        /**
-         * Dialog subtitle text
-         * @default null No subtitle
-         */
-        this.dialogSubtitle = null;
-        /**
-         * Dialog width
-         * @default 350 px
-         */
-        this.dialogWidth = 350;
-        /**
-         * Type of dialog
-         * - "alert" - Only confirm button
-         * - "confirm" - Both Confirm and cancel buttons
-         * @default "confirm"
-         */
-        this.dialogType = 'confirm';
-        /**
-         * Whether or not the dialog is open
-         */
-        this.isMobile = false;
-        /**
-         * Whether or not to close the dialog when clicking outside of it
-         * @default false
-         */
-        this.noClickOutside = false;
-        this.clickOutsideDialogHandler = (event) => {
-            if (event.target === event.currentTarget && !this.noClickOutside) {
-                this.closeDialogHandler();
-            }
-        };
-    }
-    handleKeyDown(ev) {
-        if (ev.key === 'Escape') {
-            this.closeDialogHandler();
-        }
-    }
-    focusDialog() {
-        if (this.dialogOpen) {
-            setTimeout(() => {
-                var _a, _b;
-                // Focus on a non tabable element (tabIndex=-1), so we will be able to tab to other tabable elements
-                (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.zonos--backdrop')) === null || _b === void 0 ? void 0 : _b.focus();
-            }, 100);
-        }
-    }
-    confirmDialogHandler() {
-        // Only do the action if the dialog is open
-        if (!this.dialogOpen) {
-            return;
-        }
-        // Emit confirm event
-        this.confirmClicked.emit();
-    }
-    closeDialogHandler() {
-        // Only do the action if the dialog is open
-        if (!this.dialogOpen) {
-            return;
-        }
-        // Emit cancel event
-        this.cancelClicked.emit();
-    }
-    renderIcon() {
-        switch (this.dialogIntent) {
-            case 'info':
-                return (index.h("zonos-icon", { content: HelpDuotoneIcon, iconColor: 'blue-800' }));
-            case 'danger':
-                return (index.h("zonos-icon", { content: ExclamationMarkDuotoneIcon, iconColor: 'red-800' }));
-            case 'warn':
-                return (index.h("zonos-icon", { content: WarningDuotoneIcon, iconColor: 'orange-800' }));
-        }
-    }
-    getButtonConfirmVariant() {
-        switch (this.dialogIntent) {
-            case 'warn':
-                return 'warning';
-            case 'danger':
-                return 'danger';
-            default:
-                return 'primary';
-        }
-    }
-    render() {
-        this.focusDialog();
-        const borderStyle = getBorderRadius.getBorderRadius();
-        // Get theme for the update dialog, inherit from the theme, no from this component theme
-        const theme = zonosStore.getZonosStoreTheme(zonosStore.zonosStore.appearance.theme);
-        return (index.h(index.Host, { key: 'c9eabf497f7e23ae201e6310e5ecb9f0d7068294', class: classes.classes([this.dialogOpen && 'open', 'zonos--elements']), "data-dialog-type": this.dialogType, "data-theme": theme, style: {
-                '--zonos--border-radius': borderStyle,
-                '--zonos--dialog-width': `${this.dialogWidth}px`,
-                '--zonos--font-family': zonosStore.zonosStoreFontFamily(),
-            } }, index.h("div", { key: 'a9a525bfe764bf93e8725d9a00c069455de72ed6', class: "zonos--backdrop", tabIndex: -1 }), index.h("div", { key: '072ab68e501618b640ffce6c6e8e96096966e09d', class: classes.classes(['zonos--confirm-layout', this.dialogIntent]), onClick: e => this.clickOutsideDialogHandler(e) }, index.h("div", { key: '3ab415f1cbc2bc36af01d67b279e732480de8685', class: "zonos--confirm-dialog", onBlur: () => {
-                this.focusDialog();
-            } }, index.h("div", { key: 'a1d99558318371c0e5ee95a9578a6de31a6fc27a', class: "wrapper" }, index.h("div", { key: '3fd7fbc90c430a3e1496e5b0347947c1929aa6ed', class: "icon-wrapper" }, this.renderIcon()), index.h("div", { key: '5584080e0f0a5a756b0cc2ac761e0e18c864afcd', class: "content" }, index.h("div", { key: '4a2070c137636193d05ded090fea26f05aada887', class: "title" }, index.h("zonos-text", { key: 'ab4c773f4af1271f5615a28f6a6193460330f16b', type: "subheader" }, this.dialogTitle)), this.dialogSubtitle && (index.h("div", { key: '05a445dc37e754c99ea6727ae2bf861d42d5c2c4', class: "subtitle" }, index.h("zonos-text", { key: 'a7563f9fd3b405653487542e1b7a1f6aeab01893', textColor: "gray-800" }, this.dialogSubtitle)))), index.h("div", { key: '812e9e43fdb6d10ed62da8138e344b0243ca5c34', class: "footer" }, this.dialogType === 'confirm' && (index.h("zonos-button", { key: '07d7dc9d1a4bca9cb1ee420a4fed82e9fc513bd9', backgroundColor: "gray-0", class: "cancel-button", onClick: () => this.closeDialogHandler(), size: "lg", withBoxShadow: true }, this.dialogCancelBtnText || translationStore.translate('Cancel'))), index.h("zonos-button", { key: 'b607a5244dc39869b6d40cd361d9dee4686858a7', class: "confirm-button", onClick: () => this.confirmDialogHandler(), size: "lg", variant: this.getButtonConfirmVariant() }, this.dialogConfirmBtnText)))))));
-    }
-    static get assetsDirs() { return ["assets"]; }
-    get el() { return index.getElement(this); }
-};
-ZonosConfirmDialog.style = ZonosConfirmDialogStyle0;
-
-const zonosLoadingOverlayCss = ":host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--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{position:fixed;inset:0;z-index:2147483010;pointer-events:none;display:block}:host .zonos--loading-overlay{position:fixed;inset:0;width:100vw;height:100vh;background:var(--zonos-elements-backdrop-color);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;opacity:0;visibility:hidden;-webkit-transition:opacity 0.3s ease, visibility 0.3s ease;transition:opacity 0.3s ease, visibility 0.3s ease;z-index:2147483010}:host(.zonos--open){pointer-events:auto}:host(.zonos--open) .zonos--loading-overlay{opacity:0.65;visibility:visible}";
-const ZonosLoadingOverlayStyle0 = zonosLoadingOverlayCss;
-
-const ZonosLoadingOverlay = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        /**
-         * Whether or not the overlay is open
-         * @default false
-         */
-        this.open = false;
-        /**
-         * Spinner size (optional, default 40)
-         */
-        this.size = 40;
-    }
-    render() {
-        return (index.h(index.Host, { key: '1eb7313add29219032d8301abaf55ace726a3309', class: classes.classes(['zonos--elements', this.open && 'zonos--open']) }, index.h("div", { key: 'df9960e78817a9a98006fed7e87c5441f220f496', class: "zonos--loading-overlay" }, index.h("zonos-spinner", { key: '32795fe2c626add5d2f53032ea9b5b8d528bef38', size: this.size, spinnerColor: this.spinnerColor }))));
-    }
-};
-ZonosLoadingOverlay.style = ZonosLoadingOverlayStyle0;
-
-exports.zonos_confirm_dialog = ZonosConfirmDialog;
-exports.zonos_loading_overlay = ZonosLoadingOverlay;