npm - rebill-web-components-sdk - Versions diffs - 1.10.10-beta.1 → 1.10.10-beta.2 - Mend

rebill-web-components-sdk 1.10.10-beta.1 → 1.10.10-beta.2

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 (170) hide show

package/dist/collection/components/shared/inputs/input-email/input-email.js CHANGED Viewed

@@ -1,17 +1,13 @@
 import { h, } from "@stencil/core";
 import { I18nService } from "../../../../i18n/i18n.service";
 import { COLORS_ENUM } from "../../../../utils/color-class-mapper";
-import { getEmailSuggestions, suggestEmailCorrection, validateEmailFormat, } from "../../../../utils/email-validation";
+import { getEmailSuggestions, suggestEmailCorrection } from "../../../../utils/email-validation";
 import { BLUR_DELAY_MS } from "../../../../utils/email-validation.constants";
 export class InputEmail {
     el;
     inputElement;
     suggestionsDropdownRef;
-    isMouseOverSuggestions = false;
     blurTimeout;
-    // Constants
-    INPUT_PADDING_WITH_ICON = '2.5rem';
-    INPUT_PADDING_DEFAULT = '0.75rem';
     /** Etiqueta que se muestra arriba del input */
     label = '';
     /** Placeholder del input */
@@ -40,10 +36,8 @@ export class InputEmail {
     highlightedSuggestionIndex = -1;
     /** Sugerencia de corrección de email (para errores tipográficos) */
     emailCorrectionSuggestion = null;
-    /** Indica si el formato del email es válido */
-    isValidFormat = true;
-    /** Indica si el usuario ya salió del campo (blur) */
-    hasBlurred = false;
+    /** Posición del dropdown (arriba o abajo) */
+    dropdownPosition = 'down';
     handleFormChange(event) {
         const formData = event.detail;
         if (formData && this.id in formData) {
@@ -53,8 +47,17 @@ export class InputEmail {
     handleDocumentClick(event) {
         if (this.suggestionsDropdownRef &&
             !this.suggestionsDropdownRef.contains(event.target) &&
-            !this.inputElement?.contains(event.target) &&
-            !this.isMouseOverSuggestions) {
+            !this.inputElement?.contains(event.target)) {
+            this.emailSuggestions = [];
+            this.highlightedSuggestionIndex = -1;
+        }
+    }
+    handleDocumentTouchEnd(event) {
+        const target = event.changedTouches?.[0]?.target;
+        if (this.suggestionsDropdownRef &&
+            target &&
+            !this.suggestionsDropdownRef.contains(target) &&
+            !this.inputElement?.contains(target)) {
             this.emailSuggestions = [];
             this.highlightedSuggestionIndex = -1;
         }
@@ -68,6 +71,24 @@ export class InputEmail {
     checkForTypo(emailValue) {
         this.emailCorrectionSuggestion = suggestEmailCorrection(emailValue);
     }
+    /**
+     * Calcula si el dropdown debe posicionarse arriba o abajo según el espacio disponible
+     */
+    calculateDropdownPosition() {
+        if (!this.inputElement || !this.suggestionsDropdownRef)
+            return;
+        const inputRect = this.inputElement.getBoundingClientRect();
+        const dropdownHeight = this.suggestionsDropdownRef.offsetHeight || 200; // max-height del CSS
+        const spaceBelow = window.innerHeight - inputRect.bottom;
+        const spaceAbove = inputRect.top;
+        // Si no hay espacio abajo pero sí arriba, posicionar arriba
+        if (spaceBelow < dropdownHeight && spaceAbove > spaceBelow) {
+            this.dropdownPosition = 'up';
+        }
+        else {
+            this.dropdownPosition = 'down';
+        }
+    }
     // ============================================================================
     // INPUT EVENT HANDLERS
     // ============================================================================
@@ -75,15 +96,15 @@ export class InputEmail {
         return value.toLowerCase();
     }
     updateEmailState(inputValue) {
-        this.isValidFormat = validateEmailFormat(inputValue);
         this.emailSuggestions = getEmailSuggestions(inputValue);
         this.highlightedSuggestionIndex = -1;
         // Limpiar sugerencia de corrección al modificar el input
         this.emailCorrectionSuggestion = null;
         this.value = inputValue;
-    }
-    emitInputEvent(value) {
-        this.input.emit({ id: this.id, value });
+        // Calcular posición del dropdown después de actualizar sugerencias
+        if (this.emailSuggestions.length > 0) {
+            setTimeout(() => this.calculateDropdownPosition(), 0);
+        }
     }
     onInput = (event) => {
         if (this.disabled)
@@ -92,14 +113,12 @@ export class InputEmail {
         const inputValue = this.normalizeEmailInput(input.value);
         input.value = inputValue;
         this.updateEmailState(inputValue);
-        this.emitInputEvent(inputValue);
+        this.input.emit({ id: this.id, value: inputValue });
     };
     resetValidationState() {
-        this.isValidFormat = true;
         this.emailSuggestions = [];
         this.highlightedSuggestionIndex = -1;
         this.emailCorrectionSuggestion = null;
-        this.hasBlurred = false;
     }
     onClear = () => {
         if (this.disabled)
@@ -125,11 +144,11 @@ export class InputEmail {
             clearTimeout(this.blurTimeout);
         }
         this.blurTimeout = window.setTimeout(() => {
-            if (!this.isMouseOverSuggestions) {
-                this.hasBlurred = true;
+            // Verificar si el elemento activo está dentro del dropdown o es el input
+            const activeElement = document.activeElement;
+            const isClickingSuggestion = this.suggestionsDropdownRef?.contains(activeElement) || activeElement === this.inputElement;
+            if (!isClickingSuggestion) {
                 this.trimAndUpdateValue();
-                // Revalidar formato después del trim
-                this.isValidFormat = validateEmailFormat(this.value);
                 this.clearSuggestions();
                 // Verificar errores tipográficos solo cuando sale del campo
                 this.checkForTypo(this.value);
@@ -140,43 +159,38 @@ export class InputEmail {
     onFocus = () => {
         if (this.value) {
             this.emailSuggestions = getEmailSuggestions(this.value);
+            // Calcular posición después de que se rendericen las sugerencias
+            setTimeout(() => this.calculateDropdownPosition(), 0);
         }
     };
     // ============================================================================
     // SUGGESTION INTERACTION HANDLERS
     // ============================================================================
-    moveHighlightDown() {
-        this.highlightedSuggestionIndex = Math.min(this.highlightedSuggestionIndex + 1, this.emailSuggestions.length - 1);
-    }
-    moveHighlightUp() {
-        this.highlightedSuggestionIndex = Math.max(this.highlightedSuggestionIndex - 1, -1);
-    }
-    selectHighlightedSuggestion() {
-        if (this.highlightedSuggestionIndex >= 0) {
-            this.selectSuggestion(this.emailSuggestions[this.highlightedSuggestionIndex]);
-        }
-    }
-    closeSuggestions() {
-        this.emailSuggestions = [];
-        this.highlightedSuggestionIndex = -1;
-    }
     onKeyDown = (event) => {
         if (this.emailSuggestions.length === 0) {
             return;
         }
-        const keyHandlers = {
-            ArrowDown: () => this.moveHighlightDown(),
-            ArrowUp: () => this.moveHighlightUp(),
-            Escape: () => this.closeSuggestions(),
-        };
-        const handler = keyHandlers[event.key];
-        if (handler) {
-            event.preventDefault();
-            handler();
-        }
-        else if (event.key === 'Enter' && this.highlightedSuggestionIndex >= 0) {
-            event.preventDefault();
-            this.selectHighlightedSuggestion();
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.highlightedSuggestionIndex = Math.min(this.highlightedSuggestionIndex + 1, this.emailSuggestions.length - 1);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.highlightedSuggestionIndex = Math.max(this.highlightedSuggestionIndex - 1, -1);
+                break;
+            case 'Escape':
+                event.preventDefault();
+                this.emailSuggestions = [];
+                this.highlightedSuggestionIndex = -1;
+                break;
+            case 'Enter':
+                if (this.highlightedSuggestionIndex >= 0 &&
+                    this.highlightedSuggestionIndex < this.emailSuggestions.length) {
+                    event.preventDefault();
+                    this.selectSuggestion(this.emailSuggestions[this.highlightedSuggestionIndex]);
+                }
+                break;
         }
     };
     selectSuggestion = (suggestion) => {
@@ -198,11 +212,10 @@ export class InputEmail {
     handleSuggestionMouseEnter = (index) => {
         this.highlightedSuggestionIndex = index;
     };
-    handleSuggestionsMouseEnter = () => {
-        this.isMouseOverSuggestions = true;
-    };
-    handleSuggestionsMouseLeave = () => {
-        this.isMouseOverSuggestions = false;
+    handleSuggestionTouchEnd = (suggestion, event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        this.selectSuggestion(suggestion);
     };
     // ============================================================================
     // PUBLIC METHODS
@@ -218,18 +231,6 @@ export class InputEmail {
     // ============================================================================
     // RENDER HELPERS
     // ============================================================================
-    getInputPaddingStyles() {
-        return {
-            paddingLeft: this.leftIcon ? this.INPUT_PADDING_WITH_ICON : this.INPUT_PADDING_DEFAULT,
-            paddingRight: this.clearable ? this.INPUT_PADDING_WITH_ICON : this.INPUT_PADDING_DEFAULT,
-        };
-    }
-    shouldShowInvalidFormat() {
-        return !this.isValidFormat && this.value && !this.error && this.hasBlurred;
-    }
-    shouldShowInvalidFormatError() {
-        return !this.isValidFormat && this.value && !this.error && this.hasBlurred;
-    }
     renderEmailCorrectionSuggestion() {
         if (!this.emailCorrectionSuggestion)
             return null;
@@ -251,11 +252,16 @@ export class InputEmail {
             'floating-label': isFloating,
             'has-left-icon': !!this.leftIcon,
             'has-email-suggestions': showEmailSuggestions,
-            'has-invalid-format': this.shouldShowInvalidFormat(),
         };
-        return (h("div", { key: '5e40ed1a07b4d6c4b8aa7d4296613d4972a9f53c', class: "input-container" }, !isFloating && this.label && (h("label", { key: 'c9495052e17b8a3809b27eca34d0d13b6e2d4659', class: `input-label ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '27464568b4aa841a1563bc251ec278316e5b98f2', class: wrapperClasses }, this.leftIcon && (h("div", { key: '0087a2c77deb8a5b5e47fb89ed07130a98775056', class: "icon-left" }, h("rebill-icon", { key: '53422720b4914238bdf07ef6e2366c6b687fb18f', name: this.leftIcon }))), h("input", { key: 'ec35a711e007049c0d83efc4f81a83bc593f7808', ref: el => (this.inputElement = el), type: "email", class: inputClasses, placeholder: isFloating ? this.label : this.placeholder, value: this.value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, disabled: this.disabled, autocomplete: "email", autocapitalize: "none", autocorrect: "off", spellcheck: "false", "aria-autocomplete": "list", "aria-expanded": showEmailSuggestions ? 'true' : 'false', "aria-haspopup": "listbox", "aria-owns": showEmailSuggestions ? 'email-suggestions' : undefined, "aria-invalid": !this.isValidFormat && this.value && this.hasBlurred ? 'true' : 'false', "aria-describedby": this.error || (!this.isValidFormat && this.value && this.hasBlurred)
-                ? `${this.id}-error`
-                : undefined, style: this.getInputPaddingStyles() }), isFloating && h("label", { key: 'd6c0532aaa21de0fa4f02670b1e13f848ea10663', class: "input-text__input-label input-label" }, this.label), this.clearable && this.value && (h("div", { key: '9d005dae6956ccc5210edec04d591e05c8e7badd', class: "icon-right", onClick: this.onClear }, h("rebill-icon", { key: 'ab11a4670e21d4da92aadaff27d63bf4f4b33a71', name: "x" }))), showEmailSuggestions && (h("div", { key: 'ed65d951fc245455cf6b2cd6b3e31f20ed7af55b', id: "email-suggestions", ref: el => (this.suggestionsDropdownRef = el), class: "email-suggestions-dropdown", role: "listbox", "aria-label": I18nService.translate('userInformation.suggestionsLabel', 'Email suggestions'), onMouseEnter: this.handleSuggestionsMouseEnter, onMouseLeave: this.handleSuggestionsMouseLeave }, h("div", { key: '2229c646e008d7d06e8367557f51242353eb1262', class: "email-suggestions-header" }, I18nService.translate('userInformation.suggestionsHeader', 'Suggestion')), this.emailSuggestions.map((suggestion, index) => (h("div", { key: suggestion, role: "option", "aria-selected": this.highlightedSuggestionIndex === index ? 'true' : 'false', class: `email-suggestion-item ${this.highlightedSuggestionIndex === index ? 'highlighted' : ''}`, onClick: () => this.selectSuggestion(suggestion), onMouseEnter: () => this.handleSuggestionMouseEnter(index) }, suggestion)))))), this.error && (h("span", { key: 'e52aa1a0bb4a601956736ae5560d2e1185504587', id: `${this.id}-error`, class: "error-message", role: "alert" }, this.error)), this.shouldShowInvalidFormatError() && (h("span", { key: '2335067645f44850b24459788a818062a1eb368a', id: `${this.id}-error`, class: "error-message", role: "alert" }, I18nService.translate('paymentErrors.emailInvalid', 'The email address is not valid'))), this.renderEmailCorrectionSuggestion()));
+        return (h("div", { key: '666b8971fd42b59ea3beaf4ded1a59e06845f837', class: "input-container" }, !isFloating && this.label && (h("label", { key: '0f0e777f7b3c256b42c9dec1e0f0ab1c50bc0013', class: `input-label ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: 'e506b42d62d357aa3f71c4b0435ab2d08f145f53', class: wrapperClasses }, this.leftIcon && (h("div", { key: '84c0f9dad6724a5192494e082b126cbd66c47436', class: "icon-left" }, h("rebill-icon", { key: 'a02a67a6f03b06b2b331670e8caded3b26b4c327', name: this.leftIcon }))), h("input", { key: 'c444b2daedd46fafdec07df2e79e01be454ef58c', ref: el => (this.inputElement = el), type: "email", class: inputClasses, placeholder: isFloating ? this.label : this.placeholder, value: this.value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, disabled: this.disabled, autocomplete: "email", autocapitalize: "none", autocorrect: "off", spellcheck: "false", "aria-autocomplete": "list", "aria-expanded": showEmailSuggestions ? 'true' : 'false', "aria-haspopup": "listbox", "aria-owns": showEmailSuggestions ? 'email-suggestions' : undefined, "aria-invalid": !!this.error ? 'true' : 'false', "aria-describedby": this.error ? `${this.id}-error` : undefined, style: {
+                paddingLeft: this.leftIcon ? '2.5rem' : '0.75rem',
+                paddingRight: this.clearable && this.value ? '2.5rem' : '0.75rem',
+            } }), isFloating && h("label", { key: 'ae7e8e67032665f90a2b24b136dfc2124073d24a', class: "input-text__input-label input-label" }, this.label), this.clearable && this.value && (h("div", { key: 'cb4ff25b6d53cb1c0fdd568f8896463980e10234', class: "icon-right", onClick: this.onClear }, h("rebill-icon", { key: 'bd7b1aa188127120065e06e02f79bdf6f4a2eb0c', name: "x" }))), showEmailSuggestions && (h("div", { key: 'd75a859066fcf750b34d4c479631aada67278925', id: "email-suggestions", ref: el => {
+                this.suggestionsDropdownRef = el;
+                if (el) {
+                    setTimeout(() => this.calculateDropdownPosition(), 0);
+                }
+            }, class: `email-suggestions-dropdown ${this.dropdownPosition === 'up' ? 'dropdown-up' : ''}`, role: "listbox", "aria-label": I18nService.translate('userInformation.suggestionsLabel', 'Email suggestions') }, h("div", { key: '0c8cfa0656426b99cbce234cc7afb073aec36f2c', class: "email-suggestions-header" }, I18nService.translate('userInformation.suggestionsHeader', 'Suggestion')), this.emailSuggestions.map((suggestion, index) => (h("div", { key: suggestion, role: "option", "aria-selected": this.highlightedSuggestionIndex === index ? 'true' : 'false', class: `email-suggestion-item ${this.highlightedSuggestionIndex === index ? 'highlighted' : ''}`, onClick: () => this.selectSuggestion(suggestion), onTouchEnd: e => this.handleSuggestionTouchEnd(suggestion, e), onMouseEnter: () => this.handleSuggestionMouseEnter(index) }, suggestion)))))), this.error && (h("span", { key: '57058ce993cfe690470cb002cdc3e3939d120fe0', id: `${this.id}-error`, class: "error-message", role: "alert" }, this.error)), this.renderEmailCorrectionSuggestion()));
     }
     static get is() { return "rebill-input-email"; }
     static get originalStyleUrls() {
@@ -456,8 +462,7 @@ export class InputEmail {
             "emailSuggestions": {},
             "highlightedSuggestionIndex": {},
             "emailCorrectionSuggestion": {},
-            "isValidFormat": {},
-            "hasBlurred": {}
+            "dropdownPosition": {}
         };
     }
     static get events() {
@@ -532,6 +537,12 @@ export class InputEmail {
                 "target": "document",
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "touchend",
+                "method": "handleDocumentTouchEnd",
+                "target": "document",
+                "capture": false,
+                "passive": true
             }];
     }
 }

package/dist/collection/components/shared/inputs/input-email/input-email.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input-email.js","sourceRoot":"","sources":["../../../../../src/components/shared/inputs/input-email/input-email.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n Listen,\n Method,\n Prop,\n State,\n h,\n} from '@stencil/core';\nimport { I18nService } from '../../../../i18n/i18n.service';\nimport { COLORS_ENUM } from '../../../../utils/color-class-mapper';\nimport {\n getEmailSuggestions,\n suggestEmailCorrection,\n validateEmailFormat,\n} from '../../../../utils/email-validation';\nimport { BLUR_DELAY_MS } from '../../../../utils/email-validation.constants';\n\n@Component({\n tag: 'rebill-input-email',\n styleUrl: 'input-email.css',\n shadow: false,\n})\nexport class InputEmail {\n @Element() el: HTMLElement;\n private inputElement: HTMLInputElement;\n private suggestionsDropdownRef?: HTMLDivElement;\n private isMouseOverSuggestions: boolean = false;\n private blurTimeout?: number;\n\n // Constants\n private readonly INPUT_PADDING_WITH_ICON = '2.5rem';\n private readonly INPUT_PADDING_DEFAULT = '0.75rem';\n\n /** Etiqueta que se muestra arriba del input /\n @Prop() label: string = '';\n /* Placeholder del input /\n @Prop() placeholder: string = '';\n /* Valor del input /\n @Prop({ mutable: true, reflect: true }) value: string = '';\n /* Mensaje de error /\n @Prop() error: string = '';\n /* ID del input /\n @Prop() id: string = 'email';\n /* Estado deshabilitado /\n @Prop() disabled: boolean = false;\n /* Icono a la izquierda /\n @Prop() leftIcon: string;\n /* Permitir limpiar el input /\n @Prop() clearable: boolean = false;\n /* Variacion de estilo del input /\n @Prop() variant: 'default' \| 'floating' = 'default';\n /* Evento al cambiar el valor /\n @Event() input: EventEmitter<{ id: string; value: string }>;\n /* Evento al salir del input /\n @Event() blur: EventEmitter<{ id: string; value: string }>;\n /* Sugerencias de email /\n @State() emailSuggestions: string[] = [];\n /* Índice de la sugerencia resaltada /\n @State() highlightedSuggestionIndex: number = -1;\n /* Sugerencia de corrección de email (para errores tipográficos) /\n @State() emailCorrectionSuggestion: string \| null = null;\n /* Indica si el formato del email es válido /\n @State() isValidFormat: boolean = true;\n /* Indica si el usuario ya salió del campo (blur) /\n @State() hasBlurred: boolean = false;\n\n @Listen('change', { target: 'document' })\n handleFormChange(event: CustomEvent) {\n const formData = event.detail;\n if (formData && this.id in formData) {\n this.value = formData[this.id];\n }\n }\n\n @Listen('click', { target: 'document' })\n handleDocumentClick(event: MouseEvent) {\n if (\n this.suggestionsDropdownRef &&\n !this.suggestionsDropdownRef.contains(event.target as Node) &&\n !this.inputElement?.contains(event.target as Node) &&\n !this.isMouseOverSuggestions\n ) {\n this.emailSuggestions = [];\n this.highlightedSuggestionIndex = -1;\n }\n }\n\n // ============================================================================\n // EMAIL VALIDATION & SUGGESTIONS\n // ============================================================================\n\n /\n Detecta si hay un error tipográfico en el email y actualiza el estado\n */\n private checkForTypo(emailValue: string): void {\n this.emailCorrectionSuggestion = suggestEmailCorrection(emailValue);\n }\n\n // ============================================================================\n // INPUT EVENT HANDLERS\n // ============================================================================\n\n private normalizeEmailInput(value: string): string {\n return value.toLowerCase();\n }\n\n private updateEmailState(inputValue: string): void {\n this.isValidFormat = validateEmailFormat(inputValue);\n this.emailSuggestions = getEmailSuggestions(inputValue);\n this.highlightedSuggestionIndex = -1;\n // Limpiar sugerencia de corrección al modificar el input\n this.emailCorrectionSuggestion = null;\n this.value = inputValue;\n }\n\n private emitInputEvent(value: string): void {\n this.input.emit({ id: this.id, value });\n }\n\n private onInput = (event: Event) => {\n if (this.disabled) return;\n\n const input = event.target as HTMLInputElement;\n const inputValue = this.normalizeEmailInput(input.value);\n\n input.value = inputValue;\n this.updateEmailState(inputValue);\n this.emitInputEvent(inputValue);\n };\n\n private resetValidationState(): void {\n this.isValidFormat = true;\n this.emailSuggestions = [];\n this.highlightedSuggestionIndex = -1;\n this.emailCorrectionSuggestion = null;\n this.hasBlurred = false;\n }\n\n private onClear = () => {\n if (this.disabled) return;\n\n this.value = '';\n this.resetValidationState();\n this.input.emit({ id: this.id, value: this.value });\n };\n\n private trimAndUpdateValue(): void {\n const trimmedValue = this.value.trim();\n if (trimmedValue !== this.value) {\n this.value = trimmedValue;\n this.input.emit({ id: this.id, value: this.value });\n }\n }\n\n private clearSuggestions(): void {\n this.emailSuggestions = [];\n this.highlightedSuggestionIndex = -1;\n // Nota: No limpiamos emailCorrectionSuggestion para que el usuario pueda verla\n }\n\n private onBlur = () => {\n if (this.blurTimeout) {\n clearTimeout(this.blurTimeout);\n }\n\n this.blurTimeout = window.setTimeout(() => {\n if (!this.isMouseOverSuggestions) {\n this.hasBlurred = true;\n this.trimAndUpdateValue();\n // Revalidar formato después del trim\n this.isValidFormat = validateEmailFormat(this.value);\n this.clearSuggestions();\n // Verificar errores tipográficos solo cuando sale del campo\n this.checkForTypo(this.value);\n this.blur.emit({ id: this.id, value: this.value });\n }\n }, BLUR_DELAY_MS);\n };\n\n private onFocus = () => {\n if (this.value) {\n this.emailSuggestions = getEmailSuggestions(this.value);\n }\n };\n\n // ============================================================================\n // SUGGESTION INTERACTION HANDLERS\n // ============================================================================\n\n private moveHighlightDown(): void {\n this.highlightedSuggestionIndex = Math.min(\n this.highlightedSuggestionIndex + 1,\n this.emailSuggestions.length - 1,\n );\n }\n\n private moveHighlightUp(): void {\n this.highlightedSuggestionIndex = Math.max(this.highlightedSuggestionIndex - 1, -1);\n }\n\n private selectHighlightedSuggestion(): void {\n if (this.highlightedSuggestionIndex >= 0) {\n this.selectSuggestion(this.emailSuggestions[this.highlightedSuggestionIndex]);\n }\n }\n\n private closeSuggestions(): void {\n this.emailSuggestions = [];\n this.highlightedSuggestionIndex = -1;\n }\n\n private onKeyDown = (event: KeyboardEvent) => {\n if (this.emailSuggestions.length === 0) {\n return;\n }\n\n const keyHandlers: Record<string, () => void> = {\n ArrowDown: () => this.moveHighlightDown(),\n ArrowUp: () => this.moveHighlightUp(),\n Escape: () => this.closeSuggestions(),\n };\n\n const handler = keyHandlers[event.key];\n if (handler) {\n event.preventDefault();\n handler();\n } else if (event.key === 'Enter' && this.highlightedSuggestionIndex >= 0) {\n event.preventDefault();\n this.selectHighlightedSuggestion();\n }\n };\n\n private selectSuggestion = (suggestion: string) => {\n this.value = suggestion;\n this.emailSuggestions = [];\n this.highlightedSuggestionIndex = -1;\n this.emailCorrectionSuggestion = null;\n if (this.inputElement) {\n this.inputElement.value = suggestion;\n }\n this.input.emit({ id: this.id, value: this.value });\n this.inputElement?.focus();\n };\n\n private applyCorrection = () => {\n if (this.emailCorrectionSuggestion) {\n this.selectSuggestion(this.emailCorrectionSuggestion);\n }\n };\n\n private handleSuggestionMouseEnter = (index: number) => {\n this.highlightedSuggestionIndex = index;\n };\n\n private handleSuggestionsMouseEnter = () => {\n this.isMouseOverSuggestions = true;\n };\n\n private handleSuggestionsMouseLeave = () => {\n this.isMouseOverSuggestions = false;\n };\n\n // ============================================================================\n // PUBLIC METHODS\n // ============================================================================\n\n @Method()\n async getInputElement(): Promise<HTMLInputElement \| null> {\n return this.inputElement;\n }\n\n disconnectedCallback() {\n if (this.blurTimeout) {\n clearTimeout(this.blurTimeout);\n }\n }\n\n // ============================================================================\n // RENDER HELPERS\n // ============================================================================\n\n private getInputPaddingStyles() {\n return {\n paddingLeft: this.leftIcon ? this.INPUT_PADDING_WITH_ICON : this.INPUT_PADDING_DEFAULT,\n paddingRight: this.clearable ? this.INPUT_PADDING_WITH_ICON : this.INPUT_PADDING_DEFAULT,\n };\n }\n\n private shouldShowInvalidFormat(): boolean {\n return !this.isValidFormat && this.value && !this.error && this.hasBlurred;\n }\n\n private shouldShowInvalidFormatError(): boolean {\n return !this.isValidFormat && this.value && !this.error && this.hasBlurred;\n }\n\n private renderEmailCorrectionSuggestion() {\n if (!this.emailCorrectionSuggestion) return null;\n\n const translatedText = I18nService.translate('userInformation.emailCorrectionSuggestion', {\n email: this.emailCorrectionSuggestion,\n });\n const parts = translatedText.split(this.emailCorrectionSuggestion);\n\n return (\n <div class=\"email-correction-suggestion\" role=\"status\" aria-live=\"polite\">\n <rebill-icon name=\"circle-info-outline\" size=\"16px\" color={COLORS_ENUM.NEUTRALS_500} />\n <span class=\"email-correction-text\">\n {parts.map((part, index) => (\n <span key={index}>\n {part}\n {index < parts.length - 1 && (\n <span class=\"email-correction-link\" onClick={this.applyCorrection}>\n {this.emailCorrectionSuggestion}\n </span>\n )}\n </span>\n ))}\n </span>\n </div>\n );\n }\n\n render() {\n const isFloating = this.variant === 'floating';\n const showEmailSuggestions = this.emailSuggestions.length > 0;\n\n const inputClasses = {\n 'input-element': true,\n 'input-error': !!this.error,\n };\n\n const wrapperClasses = {\n 'input-wrapper': true,\n 'floating-label': isFloating,\n 'has-left-icon': !!this.leftIcon,\n 'has-email-suggestions': showEmailSuggestions,\n 'has-invalid-format': this.shouldShowInvalidFormat(),\n };\n\n return (\n <div class=\"input-container\">\n {!isFloating && this.label && (\n <label class={`input-label ${this.disabled ? 'disabled' : ''}`}>{this.label}</label>\n )}\n <div class={wrapperClasses}>\n {this.leftIcon && (\n <div class=\"icon-left\">\n <rebill-icon name={this.leftIcon}></rebill-icon>\n </div>\n )}\n <input\n ref={el => (this.inputElement = el)}\n type=\"email\"\n class={inputClasses}\n placeholder={isFloating ? this.label : this.placeholder}\n value={this.value}\n onInput={this.onInput}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n onKeyDown={this.onKeyDown}\n disabled={this.disabled}\n autocomplete=\"email\"\n autocapitalize=\"none\"\n autocorrect=\"off\"\n spellcheck=\"false\"\n aria-autocomplete=\"list\"\n aria-expanded={showEmailSuggestions ? 'true' : 'false'}\n aria-haspopup=\"listbox\"\n aria-owns={showEmailSuggestions ? 'email-suggestions' : undefined}\n aria-invalid={!this.isValidFormat && this.value && this.hasBlurred ? 'true' : 'false'}\n aria-describedby={\n this.error \|\| (!this.isValidFormat && this.value && this.hasBlurred)\n ? `${this.id}-error`\n : undefined\n }\n style={this.getInputPaddingStyles()}\n />\n {isFloating && <label class=\"input-text__input-label input-label\">{this.label}</label>}\n {this.clearable && this.value && (\n <div class=\"icon-right\" onClick={this.onClear}>\n <rebill-icon name=\"x\"></rebill-icon>\n </div>\n )}\n {showEmailSuggestions && (\n <div\n id=\"email-suggestions\"\n ref={el => (this.suggestionsDropdownRef = el)}\n class=\"email-suggestions-dropdown\"\n role=\"listbox\"\n aria-label={I18nService.translate(\n 'userInformation.suggestionsLabel',\n 'Email suggestions',\n )}\n onMouseEnter={this.handleSuggestionsMouseEnter}\n onMouseLeave={this.handleSuggestionsMouseLeave}\n >\n <div class=\"email-suggestions-header\">\n {I18nService.translate('userInformation.suggestionsHeader', 'Suggestion')}\n </div>\n {this.emailSuggestions.map((suggestion, index) => (\n <div\n key={suggestion}\n role=\"option\"\n aria-selected={this.highlightedSuggestionIndex === index ? 'true' : 'false'}\n class={`email-suggestion-item ${this.highlightedSuggestionIndex === index ? 'highlighted' : ''}`}\n onClick={() => this.selectSuggestion(suggestion)}\n onMouseEnter={() => this.handleSuggestionMouseEnter(index)}\n >\n {suggestion}\n </div>\n ))}\n </div>\n )}\n </div>\n {this.error && (\n <span id={`${this.id}-error`} class=\"error-message\" role=\"alert\">\n {this.error}\n </span>\n )}\n {this.shouldShowInvalidFormatError() && (\n <span id={`${this.id}-error`} class=\"error-message\" role=\"alert\">\n {I18nService.translate('paymentErrors.emailInvalid', 'The email address is not valid')}\n </span>\n )}\n {this.renderEmailCorrectionSuggestion()}\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"input-email.js","sourceRoot":"","sources":["../../../../../src/components/shared/inputs/input-email/input-email.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n Listen,\n Method,\n Prop,\n State,\n h,\n} from '@stencil/core';\nimport { I18nService } from '../../../../i18n/i18n.service';\nimport { COLORS_ENUM } from '../../../../utils/color-class-mapper';\nimport { getEmailSuggestions, suggestEmailCorrection } from '../../../../utils/email-validation';\nimport { BLUR_DELAY_MS } from '../../../../utils/email-validation.constants';\n\n@Component({\n tag: 'rebill-input-email',\n styleUrl: 'input-email.css',\n shadow: false,\n})\nexport class InputEmail {\n @Element() el: HTMLElement;\n private inputElement: HTMLInputElement;\n private suggestionsDropdownRef?: HTMLDivElement;\n private blurTimeout?: number;\n\n /** Etiqueta que se muestra arriba del input /\n @Prop() label: string = '';\n /* Placeholder del input /\n @Prop() placeholder: string = '';\n /* Valor del input /\n @Prop({ mutable: true, reflect: true }) value: string = '';\n /* Mensaje de error /\n @Prop() error: string = '';\n /* ID del input /\n @Prop() id: string = 'email';\n /* Estado deshabilitado /\n @Prop() disabled: boolean = false;\n /* Icono a la izquierda /\n @Prop() leftIcon: string;\n /* Permitir limpiar el input /\n @Prop() clearable: boolean = false;\n /* Variacion de estilo del input /\n @Prop() variant: 'default' \| 'floating' = 'default';\n /* Evento al cambiar el valor /\n @Event() input: EventEmitter<{ id: string; value: string }>;\n /* Evento al salir del input /\n @Event() blur: EventEmitter<{ id: string; value: string }>;\n /* Sugerencias de email /\n @State() emailSuggestions: string[] = [];\n /* Índice de la sugerencia resaltada /\n @State() highlightedSuggestionIndex: number = -1;\n /* Sugerencia de corrección de email (para errores tipográficos) /\n @State() emailCorrectionSuggestion: string \| null = null;\n /* Posición del dropdown (arriba o abajo) /\n @State() dropdownPosition: 'down' \| 'up' = 'down';\n\n @Listen('change', { target: 'document' })\n handleFormChange(event: CustomEvent) {\n const formData = event.detail;\n if (formData && this.id in formData) {\n this.value = formData[this.id];\n }\n }\n\n @Listen('click', { target: 'document' })\n handleDocumentClick(event: MouseEvent) {\n if (\n this.suggestionsDropdownRef &&\n !this.suggestionsDropdownRef.contains(event.target as Node) &&\n !this.inputElement?.contains(event.target as Node)\n ) {\n this.emailSuggestions = [];\n this.highlightedSuggestionIndex = -1;\n }\n }\n\n @Listen('touchend', { target: 'document' })\n handleDocumentTouchEnd(event: TouchEvent) {\n const target = event.changedTouches?.[0]?.target as Node;\n if (\n this.suggestionsDropdownRef &&\n target &&\n !this.suggestionsDropdownRef.contains(target) &&\n !this.inputElement?.contains(target)\n ) {\n this.emailSuggestions = [];\n this.highlightedSuggestionIndex = -1;\n }\n }\n\n // ============================================================================\n // EMAIL VALIDATION & SUGGESTIONS\n // ============================================================================\n\n /\n Detecta si hay un error tipográfico en el email y actualiza el estado\n /\n private checkForTypo(emailValue: string): void {\n this.emailCorrectionSuggestion = suggestEmailCorrection(emailValue);\n }\n\n /\n Calcula si el dropdown debe posicionarse arriba o abajo según el espacio disponible\n */\n private calculateDropdownPosition(): void {\n if (!this.inputElement \|\| !this.suggestionsDropdownRef) return;\n\n const inputRect = this.inputElement.getBoundingClientRect();\n const dropdownHeight = this.suggestionsDropdownRef.offsetHeight \|\| 200; // max-height del CSS\n const spaceBelow = window.innerHeight - inputRect.bottom;\n const spaceAbove = inputRect.top;\n\n // Si no hay espacio abajo pero sí arriba, posicionar arriba\n if (spaceBelow < dropdownHeight && spaceAbove > spaceBelow) {\n this.dropdownPosition = 'up';\n } else {\n this.dropdownPosition = 'down';\n }\n }\n\n // ============================================================================\n // INPUT EVENT HANDLERS\n // ============================================================================\n\n private normalizeEmailInput(value: string): string {\n return value.toLowerCase();\n }\n\n private updateEmailState(inputValue: string): void {\n this.emailSuggestions = getEmailSuggestions(inputValue);\n this.highlightedSuggestionIndex = -1;\n // Limpiar sugerencia de corrección al modificar el input\n this.emailCorrectionSuggestion = null;\n this.value = inputValue;\n\n // Calcular posición del dropdown después de actualizar sugerencias\n if (this.emailSuggestions.length > 0) {\n setTimeout(() => this.calculateDropdownPosition(), 0);\n }\n }\n\n private onInput = (event: Event) => {\n if (this.disabled) return;\n\n const input = event.target as HTMLInputElement;\n const inputValue = this.normalizeEmailInput(input.value);\n\n input.value = inputValue;\n this.updateEmailState(inputValue);\n this.input.emit({ id: this.id, value: inputValue });\n };\n\n private resetValidationState(): void {\n this.emailSuggestions = [];\n this.highlightedSuggestionIndex = -1;\n this.emailCorrectionSuggestion = null;\n }\n\n private onClear = () => {\n if (this.disabled) return;\n\n this.value = '';\n this.resetValidationState();\n this.input.emit({ id: this.id, value: this.value });\n };\n\n private trimAndUpdateValue(): void {\n const trimmedValue = this.value.trim();\n if (trimmedValue !== this.value) {\n this.value = trimmedValue;\n this.input.emit({ id: this.id, value: this.value });\n }\n }\n\n private clearSuggestions(): void {\n this.emailSuggestions = [];\n this.highlightedSuggestionIndex = -1;\n // Nota: No limpiamos emailCorrectionSuggestion para que el usuario pueda verla\n }\n\n private onBlur = () => {\n if (this.blurTimeout) {\n clearTimeout(this.blurTimeout);\n }\n\n this.blurTimeout = window.setTimeout(() => {\n // Verificar si el elemento activo está dentro del dropdown o es el input\n const activeElement = document.activeElement;\n const isClickingSuggestion =\n this.suggestionsDropdownRef?.contains(activeElement) \|\| activeElement === this.inputElement;\n\n if (!isClickingSuggestion) {\n this.trimAndUpdateValue();\n this.clearSuggestions();\n // Verificar errores tipográficos solo cuando sale del campo\n this.checkForTypo(this.value);\n this.blur.emit({ id: this.id, value: this.value });\n }\n }, BLUR_DELAY_MS);\n };\n\n private onFocus = () => {\n if (this.value) {\n this.emailSuggestions = getEmailSuggestions(this.value);\n // Calcular posición después de que se rendericen las sugerencias\n setTimeout(() => this.calculateDropdownPosition(), 0);\n }\n };\n\n // ============================================================================\n // SUGGESTION INTERACTION HANDLERS\n // ============================================================================\n\n private onKeyDown = (event: KeyboardEvent) => {\n if (this.emailSuggestions.length === 0) {\n return;\n }\n\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n this.highlightedSuggestionIndex = Math.min(\n this.highlightedSuggestionIndex + 1,\n this.emailSuggestions.length - 1,\n );\n break;\n case 'ArrowUp':\n event.preventDefault();\n this.highlightedSuggestionIndex = Math.max(this.highlightedSuggestionIndex - 1, -1);\n break;\n case 'Escape':\n event.preventDefault();\n this.emailSuggestions = [];\n this.highlightedSuggestionIndex = -1;\n break;\n case 'Enter':\n if (\n this.highlightedSuggestionIndex >= 0 &&\n this.highlightedSuggestionIndex < this.emailSuggestions.length\n ) {\n event.preventDefault();\n this.selectSuggestion(this.emailSuggestions[this.highlightedSuggestionIndex]);\n }\n break;\n }\n };\n\n private selectSuggestion = (suggestion: string) => {\n this.value = suggestion;\n this.emailSuggestions = [];\n this.highlightedSuggestionIndex = -1;\n this.emailCorrectionSuggestion = null;\n if (this.inputElement) {\n this.inputElement.value = suggestion;\n }\n this.input.emit({ id: this.id, value: this.value });\n this.inputElement?.focus();\n };\n\n private applyCorrection = () => {\n if (this.emailCorrectionSuggestion) {\n this.selectSuggestion(this.emailCorrectionSuggestion);\n }\n };\n\n private handleSuggestionMouseEnter = (index: number) => {\n this.highlightedSuggestionIndex = index;\n };\n\n private handleSuggestionTouchEnd = (suggestion: string, event: TouchEvent) => {\n event.preventDefault();\n event.stopPropagation();\n this.selectSuggestion(suggestion);\n };\n\n // ============================================================================\n // PUBLIC METHODS\n // ============================================================================\n\n @Method()\n async getInputElement(): Promise<HTMLInputElement \| null> {\n return this.inputElement;\n }\n\n disconnectedCallback() {\n if (this.blurTimeout) {\n clearTimeout(this.blurTimeout);\n }\n }\n\n // ============================================================================\n // RENDER HELPERS\n // ============================================================================\n\n private renderEmailCorrectionSuggestion() {\n if (!this.emailCorrectionSuggestion) return null;\n\n const translatedText = I18nService.translate('userInformation.emailCorrectionSuggestion', {\n email: this.emailCorrectionSuggestion,\n });\n const parts = translatedText.split(this.emailCorrectionSuggestion);\n\n return (\n <div class=\"email-correction-suggestion\" role=\"status\" aria-live=\"polite\">\n <rebill-icon name=\"circle-info-outline\" size=\"16px\" color={COLORS_ENUM.NEUTRALS_500} />\n <span class=\"email-correction-text\">\n {parts.map((part, index) => (\n <span key={index}>\n {part}\n {index < parts.length - 1 && (\n <span class=\"email-correction-link\" onClick={this.applyCorrection}>\n {this.emailCorrectionSuggestion}\n </span>\n )}\n </span>\n ))}\n </span>\n </div>\n );\n }\n\n render() {\n const isFloating = this.variant === 'floating';\n const showEmailSuggestions = this.emailSuggestions.length > 0;\n\n const inputClasses = {\n 'input-element': true,\n 'input-error': !!this.error,\n };\n\n const wrapperClasses = {\n 'input-wrapper': true,\n 'floating-label': isFloating,\n 'has-left-icon': !!this.leftIcon,\n 'has-email-suggestions': showEmailSuggestions,\n };\n\n return (\n <div class=\"input-container\">\n {!isFloating && this.label && (\n <label class={`input-label ${this.disabled ? 'disabled' : ''}`}>{this.label}</label>\n )}\n <div class={wrapperClasses}>\n {this.leftIcon && (\n <div class=\"icon-left\">\n <rebill-icon name={this.leftIcon}></rebill-icon>\n </div>\n )}\n <input\n ref={el => (this.inputElement = el)}\n type=\"email\"\n class={inputClasses}\n placeholder={isFloating ? this.label : this.placeholder}\n value={this.value}\n onInput={this.onInput}\n onBlur={this.onBlur}\n onFocus={this.onFocus}\n onKeyDown={this.onKeyDown}\n disabled={this.disabled}\n autocomplete=\"email\"\n autocapitalize=\"none\"\n autocorrect=\"off\"\n spellcheck=\"false\"\n aria-autocomplete=\"list\"\n aria-expanded={showEmailSuggestions ? 'true' : 'false'}\n aria-haspopup=\"listbox\"\n aria-owns={showEmailSuggestions ? 'email-suggestions' : undefined}\n aria-invalid={!!this.error ? 'true' : 'false'}\n aria-describedby={this.error ? `${this.id}-error` : undefined}\n style={{\n paddingLeft: this.leftIcon ? '2.5rem' : '0.75rem',\n paddingRight: this.clearable && this.value ? '2.5rem' : '0.75rem',\n }}\n />\n {isFloating && <label class=\"input-text__input-label input-label\">{this.label}</label>}\n {this.clearable && this.value && (\n <div class=\"icon-right\" onClick={this.onClear}>\n <rebill-icon name=\"x\"></rebill-icon>\n </div>\n )}\n {showEmailSuggestions && (\n <div\n id=\"email-suggestions\"\n ref={el => {\n this.suggestionsDropdownRef = el;\n if (el) {\n setTimeout(() => this.calculateDropdownPosition(), 0);\n }\n }}\n class={`email-suggestions-dropdown ${this.dropdownPosition === 'up' ? 'dropdown-up' : ''}`}\n role=\"listbox\"\n aria-label={I18nService.translate(\n 'userInformation.suggestionsLabel',\n 'Email suggestions',\n )}\n >\n <div class=\"email-suggestions-header\">\n {I18nService.translate('userInformation.suggestionsHeader', 'Suggestion')}\n </div>\n {this.emailSuggestions.map((suggestion, index) => (\n <div\n key={suggestion}\n role=\"option\"\n aria-selected={this.highlightedSuggestionIndex === index ? 'true' : 'false'}\n class={`email-suggestion-item ${this.highlightedSuggestionIndex === index ? 'highlighted' : ''}`}\n onClick={() => this.selectSuggestion(suggestion)}\n onTouchEnd={e => this.handleSuggestionTouchEnd(suggestion, e)}\n onMouseEnter={() => this.handleSuggestionMouseEnter(index)}\n >\n {suggestion}\n </div>\n ))}\n </div>\n )}\n </div>\n {this.error && (\n <span id={`${this.id}-error`} class=\"error-message\" role=\"alert\">\n {this.error}\n </span>\n )}\n {this.renderEmailCorrectionSuggestion()}\n </div>\n );\n }\n}\n"]}

package/dist/collection/components/shared/inputs/input-otp/input-otp.js CHANGED Viewed

@@ -96,14 +96,14 @@ export class InputOtp {
         }
     };
     render() {
-        return (h("div", { key: '8f324c2d6a73de5de5b83d4b00632e7182ea3695', class: "otp-container" }, h("div", { key: '4a9d719f15a25cb7bb457b1e07aa2b2d214edf26', class: "email-icon" }, h("rebill-icon", { key: '8248ca0435594b7325930055f578c9188f5d12ca', name: "invite" })), h("div", { key: 'def3880f5a8ad7403e63f9f7fa2067972718fa16', class: "otp-input-container", onClick: this.handleFieldClick }, h("div", { key: '316ccdd7ffed1251fa6efbff1695b34735e54de2', class: "otp-fields" }, [0, 1, 2, 3, 4, 5].map(index => (h("div", { key: index, style: { display: 'flex', alignItems: 'center' } }, h("div", { class: `otp-field ${this.error ? 'error' : ''}` }, h("input", { type: "text", maxlength: "1", placeholder: this.placeholder, value: this.otpValue[index] || '', onInput: e => this.handleInput(e, index), onClick: () => this.handleInputClick(), onKeyDown: e => this.handleKeyDown(e, index), onPaste: e => this.handlePaste(e), onFocus: e => {
+        return (h("div", { key: '615be7ff9ad29a0873228f501be83d0891bc74af', class: "otp-container" }, h("div", { key: 'e03de7a45bb1673738f4ef9f416300e08852bcc6', class: "email-icon" }, h("rebill-icon", { key: 'b595dfa8ab4849e199a162a38c3eb5cc0ae8b1ac', name: "invite" })), h("div", { key: '5b790fac0488f00ff68f6cf8ce4f0ed680b9b1db', class: "otp-input-container", onClick: this.handleFieldClick }, h("div", { key: '2cd37978e718e40280387d9eac57db16f10a9c3d', class: "otp-fields" }, [0, 1, 2, 3, 4, 5].map(index => (h("div", { key: index, style: { display: 'flex', alignItems: 'center' } }, h("div", { class: `otp-field ${this.error ? 'error' : ''}` }, h("input", { type: "text", maxlength: "1", placeholder: this.placeholder, value: this.otpValue[index] || '', onInput: e => this.handleInput(e, index), onClick: () => this.handleInputClick(), onKeyDown: e => this.handleKeyDown(e, index), onPaste: e => this.handlePaste(e), onFocus: e => {
                 this.el
                     ?.querySelectorAll('.otp-field')
                     .forEach(field => field.classList.remove('active'));
                 e.target.parentElement?.classList.add('active');
             }, onBlur: e => {
                 e.target.parentElement?.classList.remove('active');
-            } })), index === 2 && h("div", { class: "otp-separator" }, "-")))))), this.error && h("div", { key: '27f7bd5e8d35b95867e27ad8a7ec2591761f3ebd', class: "otp-error" }, this.error)));
+            } })), index === 2 && h("div", { class: "otp-separator" }, "-")))))), this.error && h("div", { key: 'fabee9ad77fa762f6b2e6f267d47c323bd7b88cb', class: "otp-error" }, this.error)));
     }
     static get is() { return "input-otp"; }
     static get originalStyleUrls() {

package/dist/collection/components/shared/inputs/input-phone/input-phone.js CHANGED Viewed

@@ -230,10 +230,10 @@ export class InputPhone {
         const translatedError = this.translateError(this.error);
         const translatedValidationError = this.translateError(this.validationError);
         const displayError = translatedValidationError || translatedError;
-        return (h("div", { key: '93eab235bf7e6c8b066eccf5217843c47cae7060', class: "input-container" }, h("div", { key: '1882948328830eb6d12fec9a948e2f72c6c57141', class: inputClasses }, h("div", { key: '3ab0db212bf7dcabac8a19fdfc699af2523801c6', class: "input-combo-select country-selector", onClick: this.toggleDropdown }, h("span", { key: '8b962c76b799c661eda46eea81319ae9209a45e5', class: "flag" }, this.selectedCountry.flag), h("span", { key: '4ad929ede1ec71a3b08a4277e8b29fc2f766c841', class: "dial-code" }, this.selectedCountry.dialCode), h("span", { key: '6dbe62e602de2fa0dd7d37703801ef992ae982e8', class: `dropdown-arrow ${this.isDropdownOpen ? 'open' : ''}` }, "\u25BC")), this.isDropdownOpen && (h("div", { key: '3caee85fddec1eae868d1caf1c0da3ce12c0d370', class: "country-dropdown" }, this.searchable && (h("div", { key: '819fe233e3cf13d732e5f62a1e9e2e683a5e7304', class: "search-container", onClick: this.handleSearchClick }, h("div", { key: 'e2ddd5531c02fda461b521722c7be14494d7bc7d', class: "search-input-wrapper" }, h("rebill-icon", { key: '4ac0d06fa9dc2030ea812fdd063e437e831a8ebd', name: "search", size: "16px", class: "search-icon" }), h("input", { key: 'f005e7c8ccebda04eadfbe50a9d1a01f6b9e79b6', ref: el => (this.searchInputRef = el), type: "text", class: "search-input", placeholder: this.searchPlaceholder, value: this.searchTerm, onInput: this.handleSearchInput, onClick: this.handleSearchClick }), this.searchTerm && (h("button", { key: '555a03acec479967f787b4ddb07410f5ef5160d8', type: "button", class: "clear-search", onClick: event => {
+        return (h("div", { key: '86806d2c401c9de8a1267dfee742f05ad301a6b8', class: "input-container" }, h("div", { key: '3efa804b16358cc980aba0133830499e17c93a52', class: inputClasses }, h("div", { key: 'a871c178e883e2df6ce482b3002514e995cb92b8', class: "input-combo-select country-selector", onClick: this.toggleDropdown }, h("span", { key: '834868a9602efc68f24c97dc93b1feac23e811c9', class: "flag" }, this.selectedCountry.flag), h("span", { key: '49b3566e44b2cadfa387534fe121522bcfd38616', class: "dial-code" }, this.selectedCountry.dialCode), h("span", { key: '230c7dd4bad5ed9e04fc24a8a2cf40afa59e380b', class: `dropdown-arrow ${this.isDropdownOpen ? 'open' : ''}` }, "\u25BC")), this.isDropdownOpen && (h("div", { key: 'f6d8f07f4d077c986fc853f447feb8e45057b2c1', class: "country-dropdown" }, this.searchable && (h("div", { key: '7b1e49fddc1dcee59e55e7441fe427a67c789933', class: "search-container", onClick: this.handleSearchClick }, h("div", { key: 'e36e23c80c8615e8557fb453ad9217bc02679bb0', class: "search-input-wrapper" }, h("rebill-icon", { key: 'f1a62cad8488bb87f90324e96fb9c5db31ae3586', name: "search", size: "16px", class: "search-icon" }), h("input", { key: '44204f2d039489fa9486cf2d27c76e7a01e0e9e8', ref: el => (this.searchInputRef = el), type: "text", class: "search-input", placeholder: this.searchPlaceholder, value: this.searchTerm, onInput: this.handleSearchInput, onClick: this.handleSearchClick }), this.searchTerm && (h("button", { key: '88713e09141e9c0378939f5a7de68520b8b56802', type: "button", class: "clear-search", onClick: event => {
                 event.stopPropagation();
                 this.clearSearch();
-            }, "aria-label": "Clear search" }, h("rebill-icon", { key: 'c37eb08ec3ea630a3069a2e205e1bf89998d15c8', name: "x", size: "16px" })))))), this.filteredCountries.length > 0 ? (this.filteredCountries.map(country => (h("div", { key: country.code, class: "country-option", onClick: e => this.selectCountry(country, e) }, h("span", { class: "flag" }, country.flag), h("span", { class: "country-name" }, country.name), h("span", { class: "dial-code" }, country.dialCode))))) : (h("div", { class: "no-results" }, "No se encontraron resultados")))), h("input", { key: '04436bbeca6c611f3683eb5849ca6fd1d73a1e1f', id: this.phoneNumberId, type: "tel", class: "input-combo-element phone-number-input", placeholder: this.placeholder, value: this.value, onInput: this.onInput, onBlur: this.onPhoneBlurPhone, disabled: this.disabled, required: this.required })), displayError && h("span", { key: '3c951eaab6a3b907939e2b6f4c2a4bcc920acca3', class: "error-message" }, displayError)));
+            }, "aria-label": "Clear search" }, h("rebill-icon", { key: '34b6821cbf7eb8cf45781edb17e7b92a9029fe8b', name: "x", size: "16px" })))))), this.filteredCountries.length > 0 ? (this.filteredCountries.map(country => (h("div", { key: country.code, class: "country-option", onClick: e => this.selectCountry(country, e) }, h("span", { class: "flag" }, country.flag), h("span", { class: "country-name" }, country.name), h("span", { class: "dial-code" }, country.dialCode))))) : (h("div", { class: "no-results" }, "No se encontraron resultados")))), h("input", { key: 'a3e90dbc14a2a0b1f41bfb9fe2c3a4be30b52913', id: this.phoneNumberId, type: "tel", class: "input-combo-element phone-number-input", placeholder: this.placeholder, value: this.value, onInput: this.onInput, onBlur: this.onPhoneBlurPhone, disabled: this.disabled, required: this.required })), displayError && h("span", { key: 'eef5aefcd44f05877670f2818e0290d8e2480f6d', class: "error-message" }, displayError)));
     }
     static get is() { return "rebill-input-phone"; }
     static get originalStyleUrls() {

package/dist/collection/components/shared/inputs/input-select/input-select.js CHANGED Viewed

@@ -228,10 +228,10 @@ export class InputSelect {
     render() {
         const selectedLabel = this.getSelectedOptionLabel();
         const hasValue = this.value !== '';
-        return (h("div", { key: '32f4999edb4d4da2812560c63946e05c950caee5', class: "input-container" }, this.label && (h("label", { key: '70445887d1b5d440b22cf938e56b16cc3f02b0e0', class: `input-label ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '7f5ff1a2db4226036f41063d29b20b8f40422e32', class: `select-wrapper ${this.disabled ? 'disabled' : ''} ${this.isOpen ? 'open' : ''}` }, h("div", { key: '062cdd5aecbb1bceaa415aaf2f6296e80541ed37', ref: el => (this.triggerRef = el), class: `input-element select-trigger ${this.error ? 'input-error' : ''} ${!hasValue ? 'placeholder' : ''} ${this.variant === 'underlined' ? 'underlined' : ''}`, style: { backgroundColor: this.backgroundColor }, onClick: this.toggleDropdown, tabIndex: this.disabled ? -1 : 0, role: "combobox", "aria-expanded": this.isOpen.toString(), "aria-haspopup": "listbox", "aria-labelledby": this.label ? `${this.id}-label` : undefined }, h("span", { key: 'b92ecf5026213ec910b88d79ba4de80dfd73cf84', class: "select-value", style: { fontSize: this.fontSize }, innerHTML: selectedLabel }), h("div", { key: 'b36d9acfbbb2cfbd095528fae43530c27d933fa3', class: "icon-wrapper" }, this.loading ? (h("div", { class: "spinner" })) : (h("rebill-icon", { name: this.getArrowIcon(), size: "20px", class: `select-icon ${this.isOpen && this.arrowIcon === 'down' ? 'rotated' : ''}` })))), this.isOpen && (h("div", { key: '3ff2163c2dfbb2f175a433cc98155eebf22b577f', ref: el => (this.dropdownRef = el), class: `select-dropPosition ${this.dropPosition === 'up' ? 'open-up' : 'open-down'}`, role: "listbox" }, this.searchable && (h("div", { key: '603ff27e7ffcb72ab9a534a9f2a15a710e32ddb1', class: "search-container", onClick: this.handleSearchClick }, h("div", { key: 'a6f1c006b21d3dfd7f21093a38cf599a71e1f704', class: "search-input-wrapper" }, h("rebill-icon", { key: '97dc7561f5a63c44c96cb91f8ed17fa95c002d11', name: "search", size: "16px", class: "search-icon" }), h("input", { key: 'f14c4907a47f1d42094ff4f3dd34c3b9ee0bbfd5', ref: el => (this.searchInputRef = el), type: "text", class: "search-input", placeholder: this.searchPlaceholder, value: this.searchTerm, onInput: this.handleSearchInput, onClick: this.handleSearchClick, style: { fontSize: this.fontSize } }), this.searchTerm && (h("button", { key: '343ebb91f0a3fd3653a4b2ddc35f9fb6888cf018', type: "button", class: "clear-search", onClick: event => {
+        return (h("div", { key: '0e6f5c3da18fb9dbeb93f45162041b5505097564', class: "input-container" }, this.label && (h("label", { key: '9505b104c9e3f3f1a364ed6d2d780bfeb7a69012', class: `input-label ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '55243fa12938ade6c83007c446b7b1f616d444aa', class: `select-wrapper ${this.disabled ? 'disabled' : ''} ${this.isOpen ? 'open' : ''}` }, h("div", { key: '2720934fc5005d0e8e4317a79edc4bde4b82a7d8', ref: el => (this.triggerRef = el), class: `input-element select-trigger ${this.error ? 'input-error' : ''} ${!hasValue ? 'placeholder' : ''} ${this.variant === 'underlined' ? 'underlined' : ''}`, style: { backgroundColor: this.backgroundColor }, onClick: this.toggleDropdown, tabIndex: this.disabled ? -1 : 0, role: "combobox", "aria-expanded": this.isOpen.toString(), "aria-haspopup": "listbox", "aria-labelledby": this.label ? `${this.id}-label` : undefined }, h("span", { key: 'd8ed0ea9ebe50c4cbd669ad7e13e305300e15dc4', class: "select-value", style: { fontSize: this.fontSize }, innerHTML: selectedLabel }), h("div", { key: 'ed8f0cfb60ce0d98439e2349d03b1bda7ef195e8', class: "icon-wrapper" }, this.loading ? (h("div", { class: "spinner" })) : (h("rebill-icon", { name: this.getArrowIcon(), size: "20px", class: `select-icon ${this.isOpen && this.arrowIcon === 'down' ? 'rotated' : ''}` })))), this.isOpen && (h("div", { key: '533d68b163dd306e4ad1430c00fab0e40f3eb1c9', ref: el => (this.dropdownRef = el), class: `select-dropPosition ${this.dropPosition === 'up' ? 'open-up' : 'open-down'}`, role: "listbox" }, this.searchable && (h("div", { key: '1b4735d29d10550a7ad375909b2096d6b57df0be', class: "search-container", onClick: this.handleSearchClick }, h("div", { key: 'a8fe85af07599b66006e4682436b8c25189a503e', class: "search-input-wrapper" }, h("rebill-icon", { key: '738e594819d828b0c6239a1fb86e5aea9b23879f', name: "search", size: "16px", class: "search-icon" }), h("input", { key: '604587d45d3d22f209afef0fc052fbab41fcaae4', ref: el => (this.searchInputRef = el), type: "text", class: "search-input", placeholder: this.searchPlaceholder, value: this.searchTerm, onInput: this.handleSearchInput, onClick: this.handleSearchClick, style: { fontSize: this.fontSize } }), this.searchTerm && (h("button", { key: '6e05c7c4c2c13eb282a15111c20363cca444a577', type: "button", class: "clear-search", onClick: event => {
                 event.stopPropagation();
                 this.clearSearch();
-            }, "aria-label": "Clear search" }, h("rebill-icon", { key: '64414b770dc61ff142733c04858282c8a2e60bf6', name: "x", size: "16px" })))))), this.loading && this.filteredOptions.length === 0 ? (h("div", { class: "loading-message", style: { fontSize: this.fontSize } }, h("div", { class: "spinner" }), I18nService.translate('common.loadingOptions'))) : this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (h("div", { class: `select-option ${this.value === option.value ? 'selected' : ''} ${this.highlightedIndex === index ? 'highlighted' : ''}`, style: { fontSize: this.fontSize }, onClick: () => this.selectOption(option), role: "option", "aria-selected": this.value === option.value ? 'true' : 'false' }, h("span", { innerHTML: option.label }))))) : (h("div", { class: "no-results", style: { fontSize: this.fontSize } }, "No se encontraron resultados"))))), this.error && h("span", { key: '58eb536511f2474d888f28a475f8f1abe224e306', class: "error-message" }, this.error)));
+            }, "aria-label": "Clear search" }, h("rebill-icon", { key: '069c433dbbe800c3f25141c17c10c8f62efe4d7b', name: "x", size: "16px" })))))), this.loading && this.filteredOptions.length === 0 ? (h("div", { class: "loading-message", style: { fontSize: this.fontSize } }, h("div", { class: "spinner" }), I18nService.translate('common.loadingOptions'))) : this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (h("div", { class: `select-option ${this.value === option.value ? 'selected' : ''} ${this.highlightedIndex === index ? 'highlighted' : ''}`, style: { fontSize: this.fontSize }, onClick: () => this.selectOption(option), role: "option", "aria-selected": this.value === option.value ? 'true' : 'false' }, h("span", { innerHTML: option.label }))))) : (h("div", { class: "no-results", style: { fontSize: this.fontSize } }, "No se encontraron resultados"))))), this.error && h("span", { key: 'c989c9ff8ee1ddb81013ccb0718e963a1ee6bf6f', class: "error-message" }, this.error)));
     }
     static get is() { return "rebill-input-select"; }
     static get originalStyleUrls() {

package/dist/collection/components/shared/inputs/input-text/input-text.js CHANGED Viewed

@@ -86,10 +86,10 @@ export class InputText {
             'has-left-icon': !!this.leftIcon,
             'has-right-icon': !!this.rightIcon,
         };
-        return (h("div", { key: 'a3d0bd612daa9ad4fddf6a7d85fc9f2d46cc86bc', class: "input-container" }, !isFloating && this.label && (h("label", { key: '9c55c4cada7abb35c1a482e87a864219f6cc346a', class: `input-label ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: 'fd64863ef20f9108722a10bf2eede2cc95e2321c', class: wrapperClasses }, this.leftIcon && (h("div", { key: 'acd1194024d73669edfde75f03a0e970991322c5', class: "icon-left" }, h("rebill-icon", { key: '045e9d287bce636f3f837856b24005599daace57', name: this.leftIcon }))), h("input", { key: '125cf5671e779abb0489a53c0afc805ed6e7f25e', ref: el => (this.inputElement = el), type: "text", class: inputClasses, placeholder: isFloating ? this.label : this.placeholder, value: this.value, onInput: this.onInput, onBlur: this.onBlur, disabled: this.disabled, style: {
+        return (h("div", { key: 'f39ee322584b38eefca85033e0220b97ef9f9b51', class: "input-container" }, !isFloating && this.label && (h("label", { key: '818a1267b8a3787fc3b7444a3e82513556e87a9d', class: `input-label ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: 'd82e674e2557e7cec8c4e847e174aaa03f9ce2d9', class: wrapperClasses }, this.leftIcon && (h("div", { key: '95f41d7ed56d021bed85e2082e0d23ccb03bca7a', class: "icon-left" }, h("rebill-icon", { key: '772fd006b5c9d327c2749d187ab92b8272a0f524', name: this.leftIcon }))), h("input", { key: '8e4436a3934da7e2be2eab7147da2f31db80b2f0', ref: el => (this.inputElement = el), type: "text", class: inputClasses, placeholder: isFloating ? this.label : this.placeholder, value: this.value, onInput: this.onInput, onBlur: this.onBlur, disabled: this.disabled, style: {
                 paddingLeft: this.leftIcon ? '2.5rem' : '0.75rem',
                 paddingRight: this.clearable || this.rightIcon ? '2.5rem' : '0.75rem',
-            } }), isFloating && h("label", { key: 'a51395c4c9d342dd0e7d1f8c42cfa5b6ac5e2ba2', class: "input-text__input-label input-label" }, this.label), this.clearable && this.value && (h("div", { key: 'f22ad3a3651fe21b629fb5233a047970645e8506', class: "icon-right", onClick: this.onClear }, h("rebill-icon", { key: '721b242dcbbd866c1f33052f3988575035f7d853', name: "x" }))), this.rightIcon && !this.clearable && (h("div", { key: '61d2fdec691068b75406082e5ea6f56bab293447', class: "icon-right", onClick: this.onRightIconClick }, h("rebill-icon", { key: '754ea312e234565f4a2cf2a5ffd46bf9e68df76f', name: this.rightIcon })))), this.error && h("span", { key: '9adb4fd1af1f9cafc003e26b4d4eb627af0f6777', class: "error-message" }, this.error)));
+            } }), isFloating && h("label", { key: '709ec4e0444199fa2dc57dc8b871bb0dff88ce2d', class: "input-text__input-label input-label" }, this.label), this.clearable && this.value && (h("div", { key: '52582fdcc09045442d83c4b032c60d7a11c4ff41', class: "icon-right", onClick: this.onClear }, h("rebill-icon", { key: '12ec41dc2c903798cad6ce8227e4a1fe4831aa9a', name: "x" }))), this.rightIcon && !this.clearable && (h("div", { key: '7d4c13ea33047fc711f6ec8400ea2a70efd9ec35', class: "icon-right", onClick: this.onRightIconClick }, h("rebill-icon", { key: '9ccd12f6e50f3915e67df6361ecb9d371707e446', name: this.rightIcon })))), this.error && h("span", { key: 'a49f52502b59e6a8d36b48decc7173e073b4b9c2', class: "error-message" }, this.error)));
     }
     static get is() { return "rebill-input-text"; }
     static get originalStyleUrls() {

package/dist/collection/components/shared/layouts/generics/container.js CHANGED Viewed

@@ -11,7 +11,7 @@ export class Container {
             width: '100%',
             boxSizing: 'border-box',
         };
-        return (h("div", { key: '7272386504f5139e50c7dcbcd1bd9af9d74db240', style: style }, h("slot", { key: 'e8392ee249029ce6855ba51090a112ed3556f68c' })));
+        return (h("div", { key: 'e6642934b751eeb1d114359dd472a34d83d8e283', style: style }, h("slot", { key: 'a76a04056d9dc961af0f99926c997d62dcaf8f4f' })));
     }
     static get is() { return "rebill-container"; }
     static get properties() {

package/dist/collection/components/shared/layouts/generics/flex.js CHANGED Viewed

@@ -15,7 +15,7 @@ export class Flex {
             justifyContent: this.justifyContent,
             width: '100%',
         };
-        return (h("div", { key: '4ca133b15fe8e79987cb07a366baccb6c84bce07', style: style }, h("slot", { key: '4b5798ba07b73e2e0a9e9b6d3651ac75a5e4a370' })));
+        return (h("div", { key: 'f5a4af11499bd6308a53ed1815db55e66bbb5184', style: style }, h("slot", { key: 'f614aec1f97f3267433108f36640c941d7e17211' })));
     }
     static get is() { return "rebill-flex-container"; }
     static get properties() {

package/dist/collection/components/shared/layouts/generics/grid.js CHANGED Viewed

@@ -13,7 +13,7 @@ export class Grid {
             justifyContent: this.justifyContent,
             width: '100%',
         };
-        return (h("div", { key: '0422ed7c62a86eb1e8b9d02ed1bbeba95ae8dc1b', style: style }, h("slot", { key: '12bf0f464bd1a909ae6ec861d84b428d1b34a6f0' })));
+        return (h("div", { key: 'cf0e3291790f754b73e6ade2e8a99cfc8a1dd593', style: style }, h("slot", { key: '8e026097c4529e75831e51e62f625bac6700e63f' })));
     }
     static get is() { return "rebill-grid-container"; }
     static get properties() {

package/dist/collection/components/shared/mode-sandbox/mode-sandbox-mobile.js CHANGED Viewed

@@ -33,7 +33,7 @@ export class RebillTestModeChipMobile {
         return (h("div", { class: "mode-sandbox-mobile__cards-dropdown-panel" }, h("div", { class: "mode-sandbox-mobile__cards-dropdown-panel-header" }, h("rebill-icon", { name: "card-test" }), h("rebill-typography", { variant: "subtitle2", color: COLORS_ENUM.PRIMARY_DARK }, I18nService.translate('sandbox.cardTest'))), h("div", { class: "mode-sandbox-mobile__card-details" }, h("div", { class: "mode-sandbox-mobile__card-section" }, h("div", { class: "mode-sandbox-mobile__header-content" }, h("rebill-icon", { name: "succes", color: COLORS_ENUM.GREEN }), h("rebill-typography", { variant: "subtitle2", color: COLORS_ENUM.PRIMARY_DARK }, I18nService.translate('sandbox.successPayment'))), h("div", { class: "mode-sandbox-mobile__card-row" }, h("div", { class: "mode-sandbox-mobile__card-value" }, h("rebill-typography", { variant: "subtitle3", color: COLORS_ENUM.GREY_700 }, I18nService.translate('sandbox.cardNumber')), h("div", { class: "mode-sandbox-mobile__field-value" }, h("rebill-icon", { name: "visa" }), h("rebill-typography", { variant: "subtitle2", color: COLORS_ENUM.PRIMARY_DARK }, "4539148803436467"))), h("div", { class: "mode-sandbox-mobile__card-value" }, h("rebill-typography", { variant: "subtitle3", color: COLORS_ENUM.GREY_700 }, I18nService.translate('sandbox.exp')), h("div", { class: "mode-sandbox-mobile__field-value" }, h("rebill-typography", { variant: "subtitle2", color: COLORS_ENUM.PRIMARY_DARK }, "01/99"))), h("div", { class: "mode-sandbox-mobile__card-value" }, h("rebill-typography", { variant: "subtitle3", color: COLORS_ENUM.GREY_700 }, I18nService.translate('sandbox.cvv')), h("div", { class: "mode-sandbox-mobile__field-value mode-sandbox-mobile__field-value-with-copy" }, h("rebill-typography", { variant: "subtitle2", color: COLORS_ENUM.PRIMARY_DARK }, "123"), h("div", { class: "mode-sandbox-mobile__copy-button" }, h("rebill-button", { variant: "text", size: "small", onClick: () => this.handleCopy('4539148803436467 01/99 123') }, h("rebill-icon", { name: "copy" }))))))), h("div", { class: "mode-sandbox-mobile__card-section" }, h("div", { class: "mode-sandbox-mobile__header-content" }, h("rebill-icon", { name: "rejected", color: COLORS_ENUM.ERROR }), h("rebill-typography", { variant: "subtitle2", color: COLORS_ENUM.PRIMARY_DARK }, I18nService.translate('sandbox.rejectedPayment'))), h("div", { class: "mode-sandbox-mobile__card-row" }, h("div", { class: "mode-sandbox-mobile__card-value" }, h("rebill-typography", { variant: "subtitle3", color: COLORS_ENUM.GREY_700 }, I18nService.translate('sandbox.cardNumber')), h("div", { class: "mode-sandbox-mobile__field-value" }, h("rebill-icon", { name: "visa" }), h("rebill-typography", { variant: "subtitle2", color: COLORS_ENUM.PRIMARY_DARK }, "4485364739527352"))), h("div", { class: "mode-sandbox-mobile__card-value" }, h("rebill-typography", { variant: "subtitle3", color: COLORS_ENUM.GREY_700 }, I18nService.translate('sandbox.exp')), h("div", { class: "mode-sandbox-mobile__field-value" }, h("rebill-typography", { variant: "subtitle2", color: COLORS_ENUM.PRIMARY_DARK }, "01/99"))), h("div", { class: "mode-sandbox-mobile__card-value" }, h("rebill-typography", { variant: "subtitle3", color: COLORS_ENUM.GREY_700 }, I18nService.translate('sandbox.cvv')), h("div", { class: "mode-sandbox-mobile__field-value mode-sandbox-mobile__field-value-with-copy" }, h("rebill-typography", { variant: "subtitle2", color: COLORS_ENUM.PRIMARY_DARK }, "123"), h("div", { class: "mode-sandbox-mobile__copy-button" }, h("rebill-button", { variant: "text", size: "small", onClick: () => this.handleCopy('4485364739527352 01/99 123') }, h("rebill-icon", { name: "copy" })))))))), h("div", { class: "mode-sandbox-mobile__docs-section", onClick: this.handleDocsClick }, h("rebill-typography", { variant: "subtitle2", color: COLORS_ENUM.PRIMARY }, I18nService.translate('sandbox.docs')), h("rebill-icon", { name: "external-link" }))));
     }
     render() {
-        return (h("div", { key: '87089a0a8516fe3ad86536546193d7194dde574b', class: `mode-sandbox-mobile__test-mode-container ${this.isPanelVisible ? 'cards-visible' : ''}` }, this.isPanelVisible && h("div", { key: '7568ef4acbea4aa4ab1a938ce65adcebe2508174', class: "mode-sandbox-mobile__overlay" }), h("div", { key: 'aa874a4196885c323c418438fb0a05b2ecc5aa87', class: `mode-sandbox-mobile__test-mode-chip-mobile ${this.isPanelVisible ? 'expanded' : ''}` }, this.renderBasicChip()), this.isPanelVisible && this.renderCardsPanel()));
+        return (h("div", { key: 'bf0bf6d7f48bf92f5f20f225e00740ccb3141bae', class: `mode-sandbox-mobile__test-mode-container ${this.isPanelVisible ? 'cards-visible' : ''}` }, this.isPanelVisible && h("div", { key: 'a3b5f53e5246435952cf04247425b3c8f492fd5e', class: "mode-sandbox-mobile__overlay" }), h("div", { key: '65a06a99311b5eb39ca2ece44a5a4169d7f8e495', class: `mode-sandbox-mobile__test-mode-chip-mobile ${this.isPanelVisible ? 'expanded' : ''}` }, this.renderBasicChip()), this.isPanelVisible && this.renderCardsPanel()));
     }
     static get is() { return "rebill-mode-sandbox-mobile"; }
     static get originalStyleUrls() {

package/dist/collection/components/shared/selectable-card/selectable-card.js CHANGED Viewed

@@ -16,11 +16,11 @@ export class SelectableCard {
         this.selectableCardClick.emit(this.cardKey);
     };
     render() {
-        return (h("button", { key: '53bab5d8611b6b473fc5056d0e5aad0bc548dc49', class: {
+        return (h("button", { key: 'b2fa45aaf8dd5c5a5678080518f0e809378bc532', class: {
                 'selectable-card': true,
                 'selected': this.selected,
                 'disabled': this.disabled,
-            }, onClick: this.handleClick, disabled: this.disabled, part: "button", type: "button" }, h("div", { key: 'bc07f0625e6eee85d6330f23f7370b629fd86db8', class: "icon" }, h("slot", { key: '79235ed059e6abc4de536dd92eb59c94ac4fc7b5', name: "icon" })), h("span", { key: '821cea793c73041083acae37db86de5a20277c4d', class: "label" }, this.label)));
+            }, onClick: this.handleClick, disabled: this.disabled, part: "button", type: "button" }, h("div", { key: 'ea25c877a90ddb2def1a302106015dee606d9488', class: "icon" }, h("slot", { key: 'd46105a5771519df425a451217316e1f7f59fc1b', name: "icon" })), h("span", { key: '0d03a17125068d811421fdafc0669b5da3f659fb', class: "label" }, this.label)));
     }
     static get is() { return "selectable-card"; }
     static get originalStyleUrls() {