npm - @dropi/ui - Versions diffs - 0.1.41 → 0.1.42 - Mend

@dropi/ui 0.1.41 → 0.1.42

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

package/dist/dropi-ui/dropi-input.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dropi-input.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-input/dropi-input.css?tag=dropi-input&encapsulation=shadow","src/components/dropi-input/dropi-input.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n,\n::before,\n::after {\n box-sizing: border-box;\n}\n\n/ ── Fixed label layout ────────────────────────────────────── /\n.fixed-label-container {\n display: flex;\n width: 100%;\n flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n}\n\n.input-label {\n color: var(--Gray-Gray-600, #475066);\n font-size: var(--font-size-xs, 10px);\n font-weight: var(--font-weight-regular, 400);\n text-align: left;\n}\n\n.asterisk {\n color: var(--Error-Error-500, #f46a6b);\n}\n\n/ ── Form group / container ────────────────────────────────── /\n.form-group {\n position: relative;\n width: 100%;\n}\n\n.input-container {\n position: relative;\n}\n\n/ ── Icons ─────────────────────────────────────────────────── /\n.icon-input {\n position: absolute;\n top: 50%;\n left: 12px;\n transform: translateY(-50%);\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.icon-input-password {\n position: absolute;\n top: 50%;\n right: 13px;\n transform: translateY(-50%);\n cursor: pointer;\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/ ── Base input ─────────────────────────────────────────────── /\n.form-control {\n box-sizing: border-box;\n width: 100%;\n padding: var(--Size-2, 8px);\n border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n border-radius: var(--Border-2, 8px);\n background: var(--Neutral-White, #ffffff);\n font-size: var(--font-size-s, 12px);\n font-family: inherit;\n color: var(--Gray-Gray-700, #32394d);\n transition: border-color 0.3s ease-in-out;\n height: 40px;\n outline: none;\n appearance: none;\n text-align: left;\n}\n\n.form-control::placeholder {\n color: transparent;\n transition: color 0.2s ease-in-out;\n}\n\n/ Show placeholder only on focus or in fixedLabel mode /\n.form-control:focus::placeholder,\n.fixed-label-input::placeholder {\n color: var(--Gray-Gray-400, #858ea6);\n}\n\n.form-control:focus {\n border-color: var(--Info-Info-500, #50a5f1);\n}\n\n.form-control-valid {\n border-color: var(--Gray-Gray-400, #858ea6) !important;\n color: var(--Gray-Gray-600, #475066);\n}\n\n.form-control-invalid {\n border-color: var(--Error-Error-500, #f46a6b) !important;\n color: var(--Gray-Gray-600, #475066);\n}\n\n.form-control:disabled {\n border-color: var(--Gray-Gray-200, #c3c9d9) !important;\n color: var(--Gray-Gray-400, #858ea6);\n background-color: var(--Gray-Gray-50, #f7f8fa);\n cursor: not-allowed;\n}\n\n.padding-icon {\n padding-left: 40px;\n}\n\n/ When icon is always visible, shift the floating label right to avoid overlap /\n.input-container--has-icon label.label-bottom {\n left: 40px;\n}\n\n/ When focused or has value, float up to left: 0 regardless /\n.input-container--has-icon .form-control:focus + label.label-bottom,\n.input-container--has-icon .form-control:not(:placeholder-shown) + label.label-bottom {\n left: 0;\n}\n\n/ Password: hide characters via CSS (no type=password needed for font trick) /\n.text-password {\n -webkit-text-security: disc;\n text-security: disc;\n}\n\n/ ── Floating label ─────────────────────────────────────────── /\nlabel.label-bottom {\n position: absolute;\n font-weight: var(--font-weight-regular, 400);\n top: 10px;\n font-size: var(--font-size-s, 12px);\n color: var(--Gray-Gray-500, #69738c);\n left: 10px;\n transition: all 0.2s ease-in-out;\n pointer-events: none;\n overflow: hidden;\n width: 90%;\n white-space: nowrap;\n}\n\n/ Float up when focused or has value /\n.form-control:focus+label.label-bottom,\n.form-control:not(:placeholder-shown)+label.label-bottom {\n top: -22px;\n left: 0;\n font-size: var(--font-size-xs, 10px);\n color: var(--Gray-Gray-600, #475066);\n width: unset;\n}\n\n.form-control:disabled+label.label-bottom {\n color: var(--Gray-Gray-400, #858ea6);\n}\n\n/ ── Helper text ────────────────────────────────────────────── /\n.form-control-helper {\n display: flex;\n position: absolute;\n top: 100%;\n left: 0;\n gap: 4px;\n align-items: center;\n margin-top: 4px;\n}\n\n.form-control-helper span {\n display: block;\n color: var(--Gray-Gray-600, #475066);\n font-size: var(--font-size-xs, 10px);\n}\n\n.invalid-color {\n color: var(--Error-Error-500, #f46a6b) !important;\n}\n\n.disabled-helper {\n color: var(--Gray-Gray-400, #858ea6) !important;\n}\n\n.disabled-helper {\n color: var(--Gray-Gray-400, #858ea6) !important;\n}","import { Component, Prop, State, Event, EventEmitter, AttachInternals, Watch, h } from '@stencil/core';\n\nexport type InputMode = 'text' \| 'numeric' \| 'decimal' \| 'tel' \| 'email' \| 'url' \| 'search';\n\n/\n @component dropi-input\n * Text input with floating label, validation states, password toggle,\n * number/letter restrictions, thousand separator, and native form association.\n \n ## Form usage (native HTML form)\n * ```html\n * <form>\n * <dropi-input name=\"email\" label=\"Email\" required></dropi-input>\n * </form>\n * ```\n \n ## Controlled usage (React / Vue / Angular)\n * Pass `value` and listen to `dropiInput` to update.\n /\n@Component({\n tag: 'dropi-input',\n styleUrl: 'dropi-input.css',\n shadow: true,\n formAssociated: true,\n})\nexport class DropiInput {\n @AttachInternals() internals: ElementInternals;\n\n // ── Identification ──────────────────────────────────────────\n /* Input id. Defaults to label label. /\n @Prop({ mutable: true }) inputId: string = '';\n /* Name attribute for native form submission /\n @Prop() name: string = '';\n\n // ── Content ─────────────────────────────────────────────────\n /* Floating or fixed label text /\n @Prop({ mutable: true }) label: string = '';\n /* Placeholder text (visible in fixedLabel mode or on focus) /\n @Prop({ mutable: true }) placeholder: string = ' ';\n /* Current value (controlled) /\n @Prop({ mutable: true }) value: string = '';\n /* Max character length /\n @Prop({ mutable: true }) maxLength: number;\n\n // ── Behavior ────────────────────────────────────────────────\n /* Disable the input /\n @Prop({ reflect: true }) disabled: boolean = false;\n /* Mark as required (shows asterisk when showObligatoryAsterisk is true) /\n @Prop({ reflect: true }) required: boolean = false;\n /* Show the required asterisk on the label /\n @Prop({ mutable: true }) showObligatoryAsterisk: boolean = true;\n /* Show label above the input (fixed), instead of floating inside /\n @Prop() fixedLabel: boolean = false;\n /* Keyboard input mode hint /\n @Prop({ mutable: true }) inputMode: InputMode = 'text';\n\n // ── Input type modifiers ────────────────────────────────────\n /* Show password visibility toggle (renders as password field) /\n @Prop({ mutable: true }) passwordInput: boolean = false;\n /* Apply thousand separator formatting (e.g. 1,000,000) /\n @Prop({ mutable: true }) isMoneyInput: boolean = false;\n /* Apply thousand separator without currency symbol /\n @Prop({ mutable: true }) isThousandSeparator: boolean = false;\n /* Only allow numeric characters /\n @Prop({ mutable: true }) isNumericInput: boolean = false;\n /* Allow decimal point when isNumericInput is true /\n @Prop({ mutable: true }) allowDecimals: boolean = false;\n /* Only allow letter characters /\n @Prop({ mutable: true }) isLettersOnly: boolean = false;\n\n // ── Icon ────────────────────────────────────────────────────\n /* Icon name shown inside the input (only visible when value is not empty) /\n @Prop({ mutable: true }) icon: string = '';\n /* Color token for the icon /\n @Prop({ mutable: true }) iconColor: string = 'Gray-Gray-400';\n\n // ── Validation ──────────────────────────────────────────────\n /* Mark the field as invalid (consumer-controlled) /\n @Prop({ mutable: true }) hasError: boolean = false;\n /* Helper / error text shown below the field /\n @Prop({ mutable: true }) textHelper: string = '';\n /* Only show textHelper when the field is invalid /\n @Prop({ mutable: true }) showHelperOnlyOnError: boolean = false;\n\n // ── Angular-parity ──────────────────────────────────────────\n /\n Convenience object prop — matches Angular `inputProperties: InputProperties`.\n * Fields: id, label, placeholder, maxLength, textHelper, passwordInput,\n * icon, iconColor, isMoneyInput, showObligatoryAsterisk, isNumericInput,\n * allowDecimals, isThousandSeparator, showHelperOnlyOnError,\n * isLettersOnly, inputMode.\n * Note: `formControl` is not supported; use `value` + onInput event instead.\n /\n @Prop() inputProperties: any = null;\n\n // ── Internal state ──────────────────────────────────────────\n @State() private showPassword: boolean = false;\n @State() private touched: boolean = false;\n\n // ── Events ──────────────────────────────────────────────────\n /* Emitted on every keystroke with the current value /\n @Event() onInput: EventEmitter<string>;\n /* Emitted on blur with the final value /\n @Event() onChange: EventEmitter<string>;\n /* Emitted on focus /\n @Event() onFocus: EventEmitter<void>;\n /* Emitted on blur /\n @Event() onBlur: EventEmitter<void>;\n\n @Watch('inputProperties')\n inputPropertiesChanged(val: any) {\n if (!val) return;\n if (val.id !== undefined) this.inputId = val.id;\n if (val.inputId !== undefined) this.inputId = val.inputId;\n if (val.label !== undefined) this.label = val.label;\n if (val.placeholder !== undefined) this.placeholder = val.placeholder;\n if (val.maxLength !== undefined) this.maxLength = val.maxLength;\n if (val.textHelper !== undefined) this.textHelper = val.textHelper;\n if (val.passwordInput !== undefined) this.passwordInput = val.passwordInput;\n if (val.isPasswordInput !== undefined) this.passwordInput = val.isPasswordInput; // Fallback\n if (val.icon !== undefined) this.icon = val.icon;\n if (val.iconColor !== undefined) this.iconColor = val.iconColor;\n if (val.isMoneyInput !== undefined) this.isMoneyInput = val.isMoneyInput;\n if (val.showObligatoryAsterisk !== undefined) this.showObligatoryAsterisk = val.showObligatoryAsterisk;\n if (val.isNumericInput !== undefined) this.isNumericInput = val.isNumericInput;\n if (val.allowDecimals !== undefined) this.allowDecimals = val.allowDecimals;\n if (val.isThousandSeparator !== undefined) this.isThousandSeparator = val.isThousandSeparator;\n if (val.showHelperOnlyOnError !== undefined) this.showHelperOnlyOnError = val.showHelperOnlyOnError;\n if (val.isLettersOnly !== undefined) this.isLettersOnly = val.isLettersOnly;\n if (val.inputMode !== undefined) this.inputMode = val.inputMode;\n }\n\n @Watch('value')\n valueChanged(val: string) {\n this.internals.setFormValue(val);\n }\n\n @Watch('disabled')\n disabledChanged(val: boolean) {\n this.internals.setValidity(val ? { customError: true } : {}, val ? 'Field is disabled' : '');\n }\n\n componentWillLoad() {\n this.internals.setFormValue(this.value ?? '');\n if (this.inputProperties) this.inputPropertiesChanged(this.inputProperties);\n }\n\n // ── Handlers ────────────────────────────────────────────────\n\n private handleInput(e: InputEvent) {\n let val = (e.target as HTMLInputElement).value;\n\n if (this.isNumericInput) val = this.filterNumbers(val);\n if (this.isLettersOnly) val = this.filterLetters(val);\n if (this.isMoneyInput \|\| this.isThousandSeparator) val = this.formatThousands(val, this.isMoneyInput);\n\n this.value = val;\n this.internals.setFormValue(val);\n this.onInput.emit(val);\n }\n\n private handleKeyDown(e: KeyboardEvent) {\n if ((this.isNumericInput \|\| this.isMoneyInput \|\| this.isThousandSeparator) && !this.isAllowedNumberKey(e)) {\n e.preventDefault();\n }\n if (this.isLettersOnly && !this.isAllowedLetterKey(e)) {\n e.preventDefault();\n }\n }\n\n private handleFocus() {\n this.onFocus.emit();\n }\n\n private handleBlur() {\n this.touched = true;\n this.onChange.emit(this.value);\n this.onBlur.emit();\n }\n\n private togglePassword() {\n if (this.disabled) return;\n this.showPassword = !this.showPassword;\n }\n\n // ── Helpers ─────────────────────────────────────────────────\n\n private filterNumbers(val: string): string {\n const pattern = this.allowDecimals ? /[^0-9.]/g : /[^0-9]/g;\n return val.replace(pattern, '');\n }\n\n private filterLetters(val: string): string {\n return val.replace(/[^a-zA-ZáéíóúÁÉÍÓÚñÑüÜ\\s]/g, '');\n }\n\n private isAllowedNumberKey(e: KeyboardEvent): boolean {\n const allowed = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Enter', 'Home', 'End'];\n if (allowed.includes(e.key)) return true;\n if (e.ctrlKey \|\| e.metaKey) return true; // copy/paste/select-all\n if (/^[0-9]$/.test(e.key)) return true;\n if (this.allowDecimals && e.key === '.') return true;\n return false;\n }\n\n private isAllowedLetterKey(e: KeyboardEvent): boolean {\n const allowed = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Enter', 'Home', 'End', ' '];\n if (allowed.includes(e.key)) return true;\n if (e.ctrlKey \|\| e.metaKey) return true;\n return /^[a-zA-ZáéíóúÁÉÍÓÚñÑüÜ]$/.test(e.key);\n }\n\n private formatThousands(val: string, withCurrency: boolean): string {\n const raw = val.replace(/[^0-9.]/g, '');\n const [integer, decimal] = raw.split('.');\n const formatted = integer.replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',');\n const result = decimal !== undefined ? `${formatted}.${decimal}` : formatted;\n return withCurrency ? `$${result}` : result;\n }\n\n // ── Computed ─────────────────────────────────────────────────\n\n private get resolvedId(): string {\n return this.inputId \|\| this.label;\n }\n\n private get inputType(): string {\n if (this.passwordInput) return this.showPassword ? 'text' : 'password';\n return 'text';\n }\n\n private get showHelper(): boolean {\n if (!this.textHelper) return false;\n if (this.showHelperOnlyOnError) return this.hasError && this.touched;\n return true;\n }\n\n private get isInvalid(): boolean {\n return this.hasError && this.touched;\n }\n\n // ── Render ───────────────────────────────────────────────────\n\n render() {\n const showObligatoryAsterisk = this.required && this.showObligatoryAsterisk && !this.disabled;\n const showIconInline = !!this.icon;\n\n return (\n <div class={{ 'fixed-label-container': this.fixedLabel }}>\n {/ Fixed label above input /}\n {this.fixedLabel && (\n <div class=\"input-label Body-S-Regular\">\n {this.label}\n {showObligatoryAsterisk && <span class=\"asterisk\"> </span>}\n </div>\n )}\n\n <div class=\"form-group\">\n <div class={{ 'input-container': true, 'input-container--has-icon': showIconInline }}>\n {/* Inline icon (left) /}\n {showIconInline && (\n <dropi-icon\n class=\"icon-input\"\n name={this.icon}\n color={this.iconColor}\n iconWidth=\"20px\"\n iconHeight=\"20px\"\n style={{ width: '20px', height: '20px' }}\n />\n )}\n\n {/ Password toggle (right) /}\n {this.passwordInput && (\n <dropi-icon\n class=\"icon-input-password\"\n name={this.showPassword ? 'Eye' : 'Eye-crossed'}\n iconWidth=\"20px\"\n iconHeight=\"20px\"\n style={{ width: '20px', height: '20px' }}\n color=\"Gray-Gray-500\"\n onClick={() => this.togglePassword()}\n />\n )}\n\n {/ Native input /}\n <input\n id={this.resolvedId}\n class={{\n 'form-control': true,\n 'form-control-valid': !this.isInvalid && this.touched && !!this.value,\n 'form-control-invalid': this.isInvalid,\n 'padding-icon': showIconInline,\n 'text-password': this.passwordInput && !this.showPassword,\n 'fixed-label-input': this.fixedLabel,\n }}\n type={this.inputType}\n value={this.value}\n placeholder={this.fixedLabel ? this.placeholder : ' '}\n disabled={this.disabled}\n required={this.required}\n maxLength={this.maxLength}\n inputMode={this.inputMode}\n data-cy={undefined}\n onInput={e => this.handleInput(e as InputEvent)}\n onKeyDown={e => this.handleKeyDown(e as KeyboardEvent)}\n onFocus={() => this.handleFocus()}\n onBlur={() => this.handleBlur()}\n />\n\n {/ Floating label (only when not fixedLabel) /}\n {!this.fixedLabel && (\n <label class=\"Body-S-Regular label-bottom\" htmlFor={this.resolvedId}>\n {this.label}\n {showObligatoryAsterisk && <span class=\"asterisk\"> </span>}\n </label>\n )}\n\n {/* Helper / error text */}\n {this.showHelper && (\n <div class=\"form-control-helper\">\n {this.isInvalid && <dropi-icon name=\"Warning-circle\" iconWidth=\"12px\" iconHeight=\"12px\" color=\"Error-Error-500\" />}\n <span\n class={{\n 'disabled-helper': this.disabled,\n 'invalid-color': this.isInvalid,\n }}\n >\n {this.textHelper}\n </span>\n </div>\n )}\n </div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"dropi-input.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-input/dropi-input.css?tag=dropi-input&encapsulation=shadow","src/components/dropi-input/dropi-input.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n,\n::before,\n::after {\n box-sizing: border-box;\n}\n\n/ ── Fixed label layout ────────────────────────────────────── /\n.fixed-label-container {\n display: flex;\n width: 100%;\n flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n}\n\n.input-label {\n color: var(--Gray-Gray-600, #475066);\n font-size: var(--font-size-xs, 10px);\n font-weight: var(--font-weight-regular, 400);\n text-align: left;\n}\n\n.asterisk {\n color: var(--Error-Error-500, #f46a6b);\n}\n\n/ ── Form group / container ────────────────────────────────── /\n.form-group {\n position: relative;\n width: 100%;\n}\n\n.input-container {\n position: relative;\n}\n\n/ ── Icons ─────────────────────────────────────────────────── /\n.icon-input {\n position: absolute;\n top: 50%;\n left: 12px;\n transform: translateY(-50%);\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.icon-input-password {\n position: absolute;\n top: 50%;\n right: 13px;\n transform: translateY(-50%);\n cursor: pointer;\n z-index: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/ ── Base input ─────────────────────────────────────────────── /\n.form-control {\n box-sizing: border-box;\n width: 100%;\n padding: var(--Size-2, 8px);\n border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n border-radius: var(--Border-2, 8px);\n background: var(--Neutral-White, #ffffff);\n font-size: var(--font-size-s, 12px);\n font-family: inherit;\n color: var(--Gray-Gray-700, #32394d);\n transition: border-color 0.3s ease-in-out;\n height: 40px;\n outline: none;\n appearance: none;\n text-align: left;\n}\n\n.form-control::placeholder {\n color: transparent;\n transition: color 0.2s ease-in-out;\n}\n\n/ Show placeholder only on focus or in fixedLabel mode /\n.form-control:focus::placeholder,\n.fixed-label-input::placeholder {\n color: var(--Gray-Gray-400, #858ea6);\n}\n\n.form-control:focus {\n border-color: var(--Info-Info-500, #50a5f1);\n}\n\n.form-control-valid {\n border-color: var(--Gray-Gray-400, #858ea6) !important;\n color: var(--Gray-Gray-600, #475066);\n}\n\n.form-control-invalid {\n border-color: var(--Error-Error-500, #f46a6b) !important;\n color: var(--Gray-Gray-600, #475066);\n}\n\n.form-control:disabled {\n border-color: var(--Gray-Gray-200, #c3c9d9) !important;\n color: var(--Gray-Gray-400, #858ea6);\n background-color: var(--Gray-Gray-50, #f7f8fa);\n cursor: not-allowed;\n}\n\n.padding-icon {\n padding-left: 40px;\n}\n\n/ When icon is always visible, shift the floating label right to avoid overlap /\n.input-container--has-icon label.label-bottom {\n left: 40px;\n}\n\n/ When focused or has value, float up to left: 0 regardless /\n.input-container--has-icon .form-control:focus + label.label-bottom,\n.input-container--has-icon .form-control:not(:placeholder-shown) + label.label-bottom {\n left: 0;\n}\n\n/ Password: hide characters via CSS (no type=password needed for font trick) /\n.text-password {\n -webkit-text-security: disc;\n text-security: disc;\n}\n\n/ ── Floating label ─────────────────────────────────────────── /\nlabel.label-bottom {\n position: absolute;\n font-weight: var(--font-weight-regular, 400);\n top: 10px;\n font-size: var(--font-size-s, 12px);\n color: var(--Gray-Gray-500, #69738c);\n left: 10px;\n transition: all 0.2s ease-in-out;\n pointer-events: none;\n overflow: hidden;\n width: 90%;\n white-space: nowrap;\n}\n\n/ Float up when focused or has value /\n.form-control:focus+label.label-bottom,\n.form-control:not(:placeholder-shown)+label.label-bottom {\n top: -22px;\n left: 0;\n font-size: var(--font-size-xs, 10px);\n color: var(--Gray-Gray-600, #475066);\n width: unset;\n}\n\n.form-control:disabled+label.label-bottom {\n color: var(--Gray-Gray-400, #858ea6);\n}\n\n/ ── Helper text ────────────────────────────────────────────── /\n.form-control-helper {\n display: flex;\n position: absolute;\n top: 100%;\n left: 0;\n gap: 4px;\n align-items: center;\n margin-top: 4px;\n}\n\n.form-control-helper span {\n display: block;\n color: var(--Gray-Gray-600, #475066);\n font-size: var(--font-size-xs, 10px);\n}\n\n.invalid-color {\n color: var(--Error-Error-500, #f46a6b) !important;\n}\n\n.disabled-helper {\n color: var(--Gray-Gray-400, #858ea6) !important;\n}\n\n.disabled-helper {\n color: var(--Gray-Gray-400, #858ea6) !important;\n}","import { Component, Prop, State, Event, EventEmitter, AttachInternals, Watch, h } from '@stencil/core';\n\nexport type InputMode = 'text' \| 'numeric' \| 'decimal' \| 'tel' \| 'email' \| 'url' \| 'search';\n\n/\n @component dropi-input\n * Text input with floating label, validation states, password toggle,\n * number/letter restrictions, thousand separator, and native form association.\n \n ## Form usage (native HTML form)\n * ```html\n * <form>\n * <dropi-input name=\"email\" label=\"Email\" required></dropi-input>\n * </form>\n * ```\n \n ## Controlled usage (React / Vue / Angular)\n * Pass `value` and listen to `dropiInput` to update.\n /\n@Component({\n tag: 'dropi-input',\n styleUrl: 'dropi-input.css',\n shadow: true,\n formAssociated: true,\n})\nexport class DropiInput {\n @AttachInternals() internals: ElementInternals;\n\n // ── Identification ──────────────────────────────────────────\n /* Input id. Defaults to label label. /\n @Prop({ mutable: true }) inputId: string = '';\n /* Name attribute for native form submission /\n @Prop() name: string = '';\n\n // ── Content ─────────────────────────────────────────────────\n /* Floating or fixed label text /\n @Prop({ mutable: true }) label: string = '';\n /* Placeholder text (visible in fixedLabel mode or on focus) /\n @Prop({ mutable: true }) placeholder: string = ' ';\n /* Current value (controlled) /\n @Prop({ mutable: true }) value: string = '';\n /* Max character length /\n @Prop({ mutable: true }) maxLength: number;\n\n // ── Behavior ────────────────────────────────────────────────\n /* Disable the input /\n @Prop({ reflect: true }) disabled: boolean = false;\n /* Mark as required (shows asterisk when showObligatoryAsterisk is true) /\n @Prop({ reflect: true }) required: boolean = false;\n /* Show the required asterisk on the label /\n @Prop({ mutable: true }) showObligatoryAsterisk: boolean = true;\n /* Show label above the input (fixed), instead of floating inside /\n @Prop() fixedLabel: boolean = false;\n /* Keyboard input mode hint /\n @Prop({ mutable: true }) inputMode: InputMode = 'text';\n\n // ── Input type modifiers ────────────────────────────────────\n /* Show password visibility toggle (renders as password field) /\n @Prop({ mutable: true }) passwordInput: boolean = false;\n /* Apply thousand separator formatting (e.g. 1,000,000) /\n @Prop({ mutable: true }) isMoneyInput: boolean = false;\n /* Apply thousand separator without currency symbol /\n @Prop({ mutable: true }) isThousandSeparator: boolean = false;\n /* Only allow numeric characters /\n @Prop({ mutable: true }) isNumericInput: boolean = false;\n /* Allow decimal point when isNumericInput is true /\n @Prop({ mutable: true }) allowDecimals: boolean = false;\n /* Only allow letter characters /\n @Prop({ mutable: true }) isLettersOnly: boolean = false;\n\n // ── Icon ────────────────────────────────────────────────────\n /* Icon name shown inside the input (only visible when value is not empty) /\n @Prop({ mutable: true }) icon: string = '';\n /* Color token for the icon /\n @Prop({ mutable: true }) iconColor: string = 'Gray-Gray-400';\n\n // ── Validation ──────────────────────────────────────────────\n /* Mark the field as invalid (consumer-controlled) /\n @Prop({ mutable: true }) hasError: boolean = false;\n /* Helper / error text shown below the field /\n @Prop({ mutable: true }) textHelper: string = '';\n /* Only show textHelper when the field is invalid /\n @Prop({ mutable: true }) showHelperOnlyOnError: boolean = false;\n\n // ── Angular-parity ──────────────────────────────────────────\n /\n Convenience object prop — matches Angular `inputProperties: InputProperties`.\n * Fields: id, label, placeholder, maxLength, textHelper, passwordInput,\n * icon, iconColor, isMoneyInput, showObligatoryAsterisk, isNumericInput,\n * allowDecimals, isThousandSeparator, showHelperOnlyOnError,\n * isLettersOnly, inputMode.\n * Note: `formControl` is not supported; use `value` + onInput event instead.\n /\n @Prop() inputProperties: any = null;\n\n // ── Internal state ──────────────────────────────────────────\n @State() private showPassword: boolean = false;\n @State() private touched: boolean = false;\n\n // ── Events ──────────────────────────────────────────────────\n /* Emitted on every keystroke with the current value /\n @Event() dropiInput: EventEmitter<string>;\n /* Emitted on blur with the final value /\n @Event() dropiChange: EventEmitter<string>;\n /* Emitted on focus /\n @Event() dropiFocus: EventEmitter<void>;\n /* Emitted on blur /\n @Event() dropiBlur: EventEmitter<void>;\n\n @Watch('inputProperties')\n inputPropertiesChanged(val: any) {\n if (!val) return;\n if (val.id !== undefined) this.inputId = val.id;\n if (val.inputId !== undefined) this.inputId = val.inputId;\n if (val.label !== undefined) this.label = val.label;\n if (val.placeholder !== undefined) this.placeholder = val.placeholder;\n if (val.maxLength !== undefined) this.maxLength = val.maxLength;\n if (val.textHelper !== undefined) this.textHelper = val.textHelper;\n if (val.passwordInput !== undefined) this.passwordInput = val.passwordInput;\n if (val.isPasswordInput !== undefined) this.passwordInput = val.isPasswordInput; // Fallback\n if (val.icon !== undefined) this.icon = val.icon;\n if (val.iconColor !== undefined) this.iconColor = val.iconColor;\n if (val.isMoneyInput !== undefined) this.isMoneyInput = val.isMoneyInput;\n if (val.showObligatoryAsterisk !== undefined) this.showObligatoryAsterisk = val.showObligatoryAsterisk;\n if (val.isNumericInput !== undefined) this.isNumericInput = val.isNumericInput;\n if (val.allowDecimals !== undefined) this.allowDecimals = val.allowDecimals;\n if (val.isThousandSeparator !== undefined) this.isThousandSeparator = val.isThousandSeparator;\n if (val.showHelperOnlyOnError !== undefined) this.showHelperOnlyOnError = val.showHelperOnlyOnError;\n if (val.isLettersOnly !== undefined) this.isLettersOnly = val.isLettersOnly;\n if (val.inputMode !== undefined) this.inputMode = val.inputMode;\n }\n\n @Watch('value')\n valueChanged(val: string) {\n this.internals.setFormValue(val);\n }\n\n @Watch('disabled')\n disabledChanged(val: boolean) {\n this.internals.setValidity(val ? { customError: true } : {}, val ? 'Field is disabled' : '');\n }\n\n componentWillLoad() {\n this.internals.setFormValue(this.value ?? '');\n if (this.inputProperties) this.inputPropertiesChanged(this.inputProperties);\n }\n\n // ── Handlers ────────────────────────────────────────────────\n\n private handleInput(e: InputEvent) {\n let val = (e.target as HTMLInputElement).value;\n\n if (this.isNumericInput) val = this.filterNumbers(val);\n if (this.isLettersOnly) val = this.filterLetters(val);\n if (this.isMoneyInput \|\| this.isThousandSeparator) val = this.formatThousands(val, this.isMoneyInput);\n\n this.value = val;\n this.internals.setFormValue(val);\n this.dropiInput.emit(val);\n }\n\n private handleKeyDown(e: KeyboardEvent) {\n if ((this.isNumericInput \|\| this.isMoneyInput \|\| this.isThousandSeparator) && !this.isAllowedNumberKey(e)) {\n e.preventDefault();\n }\n if (this.isLettersOnly && !this.isAllowedLetterKey(e)) {\n e.preventDefault();\n }\n }\n\n private handleFocus() {\n this.dropiFocus.emit();\n }\n\n private handleBlur() {\n this.touched = true;\n this.dropiChange.emit(this.value);\n this.dropiBlur.emit();\n }\n\n private togglePassword() {\n if (this.disabled) return;\n this.showPassword = !this.showPassword;\n }\n\n // ── Helpers ─────────────────────────────────────────────────\n\n private filterNumbers(val: string): string {\n const pattern = this.allowDecimals ? /[^0-9.]/g : /[^0-9]/g;\n return val.replace(pattern, '');\n }\n\n private filterLetters(val: string): string {\n return val.replace(/[^a-zA-ZáéíóúÁÉÍÓÚñÑüÜ\\s]/g, '');\n }\n\n private isAllowedNumberKey(e: KeyboardEvent): boolean {\n const allowed = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Enter', 'Home', 'End'];\n if (allowed.includes(e.key)) return true;\n if (e.ctrlKey \|\| e.metaKey) return true; // copy/paste/select-all\n if (/^[0-9]$/.test(e.key)) return true;\n if (this.allowDecimals && e.key === '.') return true;\n return false;\n }\n\n private isAllowedLetterKey(e: KeyboardEvent): boolean {\n const allowed = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Enter', 'Home', 'End', ' '];\n if (allowed.includes(e.key)) return true;\n if (e.ctrlKey \|\| e.metaKey) return true;\n return /^[a-zA-ZáéíóúÁÉÍÓÚñÑüÜ]$/.test(e.key);\n }\n\n private formatThousands(val: string, withCurrency: boolean): string {\n const raw = val.replace(/[^0-9.]/g, '');\n const [integer, decimal] = raw.split('.');\n const formatted = integer.replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',');\n const result = decimal !== undefined ? `${formatted}.${decimal}` : formatted;\n return withCurrency ? `$${result}` : result;\n }\n\n // ── Computed ─────────────────────────────────────────────────\n\n private get resolvedId(): string {\n return this.inputId \|\| this.label;\n }\n\n private get inputType(): string {\n if (this.passwordInput) return this.showPassword ? 'text' : 'password';\n return 'text';\n }\n\n private get showHelper(): boolean {\n if (!this.textHelper) return false;\n if (this.showHelperOnlyOnError) return this.hasError && this.touched;\n return true;\n }\n\n private get isInvalid(): boolean {\n return this.hasError && this.touched;\n }\n\n // ── Render ───────────────────────────────────────────────────\n\n render() {\n const showObligatoryAsterisk = this.required && this.showObligatoryAsterisk && !this.disabled;\n const showIconInline = !!this.icon;\n\n return (\n <div class={{ 'fixed-label-container': this.fixedLabel }}>\n {/ Fixed label above input /}\n {this.fixedLabel && (\n <div class=\"input-label Body-S-Regular\">\n {this.label}\n {showObligatoryAsterisk && <span class=\"asterisk\"> </span>}\n </div>\n )}\n\n <div class=\"form-group\">\n <div class={{ 'input-container': true, 'input-container--has-icon': showIconInline }}>\n {/* Inline icon (left) /}\n {showIconInline && (\n <dropi-icon\n class=\"icon-input\"\n name={this.icon}\n color={this.iconColor}\n iconWidth=\"20px\"\n iconHeight=\"20px\"\n style={{ width: '20px', height: '20px' }}\n />\n )}\n\n {/ Password toggle (right) /}\n {this.passwordInput && (\n <dropi-icon\n class=\"icon-input-password\"\n name={this.showPassword ? 'Eye' : 'Eye-crossed'}\n iconWidth=\"20px\"\n iconHeight=\"20px\"\n style={{ width: '20px', height: '20px' }}\n color=\"Gray-Gray-500\"\n onClick={() => this.togglePassword()}\n />\n )}\n\n {/ Native input /}\n <input\n id={this.resolvedId}\n class={{\n 'form-control': true,\n 'form-control-valid': !this.isInvalid && this.touched && !!this.value,\n 'form-control-invalid': this.isInvalid,\n 'padding-icon': showIconInline,\n 'text-password': this.passwordInput && !this.showPassword,\n 'fixed-label-input': this.fixedLabel,\n }}\n type={this.inputType}\n value={this.value}\n placeholder={this.fixedLabel ? this.placeholder : ' '}\n disabled={this.disabled}\n required={this.required}\n maxLength={this.maxLength}\n inputMode={this.inputMode}\n data-cy={undefined}\n onInput={e => this.handleInput(e as InputEvent)}\n onKeyDown={e => this.handleKeyDown(e as KeyboardEvent)}\n onFocus={() => this.handleFocus()}\n onBlur={() => this.handleBlur()}\n />\n\n {/ Floating label (only when not fixedLabel) /}\n {!this.fixedLabel && (\n <label class=\"Body-S-Regular label-bottom\" htmlFor={this.resolvedId}>\n {this.label}\n {showObligatoryAsterisk && <span class=\"asterisk\"> </span>}\n </label>\n )}\n\n {/* Helper / error text */}\n {this.showHelper && (\n <div class=\"form-control-helper\">\n {this.isInvalid && <dropi-icon name=\"Warning-circle\" iconWidth=\"12px\" iconHeight=\"12px\" color=\"Error-Error-500\" />}\n <span\n class={{\n 'disabled-helper': this.disabled,\n 'invalid-color': this.isInvalid,\n }}\n >\n {this.textHelper}\n </span>\n </div>\n )}\n </div>\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-languages-selector.entry.js CHANGED Viewed

@@ -5,13 +5,13 @@ const dropiLanguagesSelectorCss = () => `:host{display:inline-block;position:rel
 const DropiLanguagesSelector = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.languageChange = createEvent(this, "languageChange", 7);
+        this.dropiLanguageChange = createEvent(this, "dropiLanguageChange", 7);
     }
     /** Language options (array or JSON string) */
     languages = [];
     /** Currently selected language (LanguageOption or JSON string) */
     selectedLang = null;
-    languageChange;
+    dropiLanguageChange;
     isOpen = false;
     parsedLanguages = [];
     currentLang = null;
@@ -38,7 +38,7 @@ const DropiLanguagesSelector = class {
     select(lang) {
         this.currentLang = lang;
         this.isOpen = false;
-        this.languageChange.emit(lang);
+        this.dropiLanguageChange.emit(lang);
     }
     render() {
         if (!this.currentLang)

package/dist/dropi-ui/dropi-languages-selector.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dropi-languages-selector.entry.js","mappings":";;AAAA,MAAM,yBAAyB,GAAG,MAAM,CAAC,8zCAA8zC,CAAC;;MCuB31C,sBAAsB,GAAA,MAAA;;;;;;IAEzB,SAAS,GAA8B,EAAE;;IAExB,YAAY,GAAmC,IAAI;AAEnE,IAAA,~~cAAc~~;~~IAEN~~,MAAM,GAAY,KAAK;IACvB,eAAe,GAAqB,EAAE;IACtC,WAAW,GAA0B,IAAI;AAG1D,IAAA,gBAAgB,CAAC,GAA8B,EAAA;AAC7C,QAAA,IAAI,GAAG,IAAI,IAAI,EAAE;AAAE,YAAA,IAAI,CAAC,eAAe,GAAG,EAAE;YAAE;;QAC9C,IAAI,CAAC,eAAe,GAAG,OAAO,GAAG,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAK,GAAwB,IAAI,EAAE,CAAC;AACpG,QAAA,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC,EAAE;YACxD,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC;;;AAK9C,IAAA,mBAAmB,CAAC,GAAmC,EAAA;AACrD,QAAA,IAAI,CAAC,GAAG;YAAE;QACV,IAAI,CAAC,WAAW,GAAG,OAAO,GAAG,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,GAAI,GAAsB;;IAGxF,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC;QACrC,IAAI,IAAI,CAAC,YAAY;AAAE,YAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,YAAY,CAAC;;AAG5D,IAAA,MAAM,CAAC,IAAoB,EAAA;AACjC,QAAA,IAAI,CAAC,WAAW,GAAG,IAAI;AACvB,QAAA,IAAI,CAAC,MAAM,GAAG,KAAK;AACnB,QAAA,IAAI,CAAC,~~cAAc~~,CAAC,IAAI,CAAC,IAAI,CAAC;;~~IAGhC~~,MAAM,GAAA;QACJ,IAAI,CAAC,IAAI,CAAC,WAAW;AAAE,YAAA,OAAO,IAAI;QAClC,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,CAAA,eAAA,EAAkB,IAAI,CAAC,MAAM,GAAG,OAAO,GAAG,EAAE,CAAA,CAAE,EAAA,EACxD,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,iBAAiB,EAAC,OAAO,EAAE,MAAK,EAAG,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,EAAA,EACzE,CAAA,CAAA,qBAAA,EAAA,EAAqB,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,EAAA,YAAA,EAAa,WAAW,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAA,CAAG,EACrG,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,gBAAgB,EAAA,EAAE,IAAI,CAAC,WAAW,CAAC,KAAK,CAAQ,EAC5D,CAAA,CAAA,YAAA,EAAA,EAAY,IAAI,EAAC,YAAY,EAAC,SAAS,EAAC,MAAM,EAAC,UAAU,EAAC,MAAM,EAAC,KAAK,EAAC,eAAe,GAAG,CACrF,EACN,CAAA,CAAA,IAAA,EAAA,EAAI,KAAK,EAAE,CAAA,gBAAA,EAAmB,IAAI,CAAC,MAAM,GAAG,gBAAgB,GAAG,EAAE,CAAA,CAAE,EAAA,EAChE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,KAC5B,CAAA,CAAA,IAAA,EAAA,EACE,GAAG,EAAE,IAAI,CAAC,IAAI,EACd,KAAK,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,WAAW,EAAE,IAAI,GAAG,QAAQ,GAAG,EAAE,EAC3D,OAAO,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAA,EAEhC,CAAA,CAAA,qBAAA,EAAA,EAAqB,OAAO,EAAE,IAAI,CAAC,IAAI,EAAA,YAAA,EAAa,WAAW,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAA,CAAG,EACzF,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,gBAAgB,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,CAC7C,CACN,CAAC,CACC,CACD;;;;;;;;;;;;;;;","names":[],"sources":["src/components/dropi-languages-selector/dropi-languages-selector.css?tag=dropi-languages-selector&encapsulation=shadow","src/components/dropi-languages-selector/dropi-languages-selector.tsx"],"sourcesContent":[":host {\n display: inline-block;\n position: relative;\n}\n\n, ::before, ::after { box-sizing: border-box; }\n\n.custom-dropdown {\n position: relative;\n cursor: pointer;\n user-select: none;\n}\n\n.custom-dropdown.open dropi-icon {\n transform: rotate(180deg);\n}\n\n.selected-option {\n display: flex;\n height: 38px;\n padding: var(--Size-2, 8px) var(--Size-3, 12px);\n align-items: center;\n gap: var(--Size-2, 8px);\n border-radius: 4px;\n border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n background: var(--Neutral-White, #ffffff);\n font-size: var(--font-size-s, 12px);\n color: var(--Gray-Gray-600, #475066);\n}\n\n.dropdown-options {\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n background: white;\n border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n border-radius: 6px;\n margin-top: 4px;\n z-index: 1000;\n overflow-y: auto;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n padding: 0;\n list-style: none;\n height: 0;\n opacity: 0;\n visibility: hidden;\n transition: height 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;\n max-height: 0;\n}\n\n.dropdown-options.dropdown-open {\n max-height: 300px;\n height: auto;\n opacity: 1;\n visibility: visible;\n}\n\n.dropdown-options li {\n padding: 8px 12px;\n display: flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n font-size: var(--font-size-s, 12px);\n color: var(--Gray-Gray-600, #475066);\n}\n\n.dropdown-options li:hover,\n.dropdown-options li.active {\n background: var(--Gray-Gray-50, #f7f8fa);\n}\n\n@media screen and (max-width: 720px) {\n .selected-option span,\n .dropdown-options li span {\n display: none;\n }\n}\n","import { Component, Prop, Event, EventEmitter, State, Watch, h } from '@stencil/core';\n\nexport interface LanguageOption {\n code: string;\n label: string;\n /* ISO country code for the flag (e.g. \"CO\", \"US\") /\n flag: string;\n}\n\n/\n @component dropi-languages-selector\n * Dropdown to switch between languages, showing country flag + label.\n \n @example\n * <dropi-languages-selector\n * languages='[{\"code\":\"es\",\"label\":\"Español\",\"flag\":\"CO\"},{\"code\":\"en\",\"label\":\"English\",\"flag\":\"US\"}]'\n * ></dropi-languages-selector>\n /\n@Component({\n tag: 'dropi-languages-selector',\n styleUrl: 'dropi-languages-selector.css',\n shadow: true,\n})\nexport class DropiLanguagesSelector {\n /* Language options (array or JSON string) /\n @Prop() languages: LanguageOption[] \| string = [];\n /* Currently selected language (LanguageOption or JSON string) */\n @Prop({ mutable: true }) selectedLang: LanguageOption \| string \| null = null;\n\n @Event() ~~languageChange~~: EventEmitter<LanguageOption>;\n\n @State() private isOpen: boolean = false;\n @State() private parsedLanguages: LanguageOption[] = [];\n @State() private currentLang: LanguageOption \| null = null;\n\n @Watch('languages')\n languagesChanged(val: LanguageOption[] \| string) {\n if (val == null) { this.parsedLanguages = []; return; }\n this.parsedLanguages = typeof val === 'string' ? JSON.parse(val) : ((val as LanguageOption[]) ?? []);\n if (!this.currentLang && this.parsedLanguages.length > 0) {\n this.currentLang = this.parsedLanguages[0];\n }\n }\n\n @Watch('selectedLang')\n selectedLangChanged(val: LanguageOption \| string \| null) {\n if (!val) return;\n this.currentLang = typeof val === 'string' ? JSON.parse(val) : (val as LanguageOption);\n }\n\n componentWillLoad() {\n this.languagesChanged(this.languages);\n if (this.selectedLang) this.selectedLangChanged(this.selectedLang);\n }\n\n private select(lang: LanguageOption) {\n this.currentLang = lang;\n this.isOpen = false;\n this.~~languageChange~~.emit(lang);\n }\n\n render() {\n if (!this.currentLang) return null;\n return (\n <div class={`custom-dropdown${this.isOpen ? ' open' : ''}`}>\n <div class=\"selected-option\" onClick={() => { this.isOpen = !this.isOpen; }}>\n <dropi-country-flags country={this.currentLang.flag} flag-style=\"rectangle\" width=\"20\" height=\"15\" />\n <span class=\"Body-S-Regular\">{this.currentLang.label}</span>\n <dropi-icon name=\"Caret-down\" iconWidth=\"16px\" iconHeight=\"16px\" color=\"Gray-Gray-500\" />\n </div>\n <ul class={`dropdown-options${this.isOpen ? ' dropdown-open' : ''}`}>\n {this.parsedLanguages.map(lang => (\n <li\n key={lang.code}\n class={lang.code === this.currentLang?.code ? 'active' : ''}\n onClick={() => this.select(lang)}\n >\n <dropi-country-flags country={lang.flag} flag-style=\"rectangle\" width=\"20\" height=\"15\" />\n <span class=\"Body-S-Regular\">{lang.label}</span>\n </li>\n ))}\n </ul>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"dropi-languages-selector.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-languages-selector/dropi-languages-selector.css?tag=dropi-languages-selector&encapsulation=shadow","src/components/dropi-languages-selector/dropi-languages-selector.tsx"],"sourcesContent":[":host {\n display: inline-block;\n position: relative;\n}\n\n, ::before, ::after { box-sizing: border-box; }\n\n.custom-dropdown {\n position: relative;\n cursor: pointer;\n user-select: none;\n}\n\n.custom-dropdown.open dropi-icon {\n transform: rotate(180deg);\n}\n\n.selected-option {\n display: flex;\n height: 38px;\n padding: var(--Size-2, 8px) var(--Size-3, 12px);\n align-items: center;\n gap: var(--Size-2, 8px);\n border-radius: 4px;\n border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n background: var(--Neutral-White, #ffffff);\n font-size: var(--font-size-s, 12px);\n color: var(--Gray-Gray-600, #475066);\n}\n\n.dropdown-options {\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n background: white;\n border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n border-radius: 6px;\n margin-top: 4px;\n z-index: 1000;\n overflow-y: auto;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n padding: 0;\n list-style: none;\n height: 0;\n opacity: 0;\n visibility: hidden;\n transition: height 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;\n max-height: 0;\n}\n\n.dropdown-options.dropdown-open {\n max-height: 300px;\n height: auto;\n opacity: 1;\n visibility: visible;\n}\n\n.dropdown-options li {\n padding: 8px 12px;\n display: flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n font-size: var(--font-size-s, 12px);\n color: var(--Gray-Gray-600, #475066);\n}\n\n.dropdown-options li:hover,\n.dropdown-options li.active {\n background: var(--Gray-Gray-50, #f7f8fa);\n}\n\n@media screen and (max-width: 720px) {\n .selected-option span,\n .dropdown-options li span {\n display: none;\n }\n}\n","import { Component, Prop, Event, EventEmitter, State, Watch, h } from '@stencil/core';\n\nexport interface LanguageOption {\n code: string;\n label: string;\n /* ISO country code for the flag (e.g. \"CO\", \"US\") /\n flag: string;\n}\n\n/\n @component dropi-languages-selector\n * Dropdown to switch between languages, showing country flag + label.\n \n @example\n * <dropi-languages-selector\n * languages='[{\"code\":\"es\",\"label\":\"Español\",\"flag\":\"CO\"},{\"code\":\"en\",\"label\":\"English\",\"flag\":\"US\"}]'\n * ></dropi-languages-selector>\n /\n@Component({\n tag: 'dropi-languages-selector',\n styleUrl: 'dropi-languages-selector.css',\n shadow: true,\n})\nexport class DropiLanguagesSelector {\n /* Language options (array or JSON string) /\n @Prop() languages: LanguageOption[] \| string = [];\n /* Currently selected language (LanguageOption or JSON string) */\n @Prop({ mutable: true }) selectedLang: LanguageOption \| string \| null = null;\n\n @Event() dropiLanguageChange: EventEmitter<LanguageOption>;\n\n @State() private isOpen: boolean = false;\n @State() private parsedLanguages: LanguageOption[] = [];\n @State() private currentLang: LanguageOption \| null = null;\n\n @Watch('languages')\n languagesChanged(val: LanguageOption[] \| string) {\n if (val == null) { this.parsedLanguages = []; return; }\n this.parsedLanguages = typeof val === 'string' ? JSON.parse(val) : ((val as LanguageOption[]) ?? []);\n if (!this.currentLang && this.parsedLanguages.length > 0) {\n this.currentLang = this.parsedLanguages[0];\n }\n }\n\n @Watch('selectedLang')\n selectedLangChanged(val: LanguageOption \| string \| null) {\n if (!val) return;\n this.currentLang = typeof val === 'string' ? JSON.parse(val) : (val as LanguageOption);\n }\n\n componentWillLoad() {\n this.languagesChanged(this.languages);\n if (this.selectedLang) this.selectedLangChanged(this.selectedLang);\n }\n\n private select(lang: LanguageOption) {\n this.currentLang = lang;\n this.isOpen = false;\n this.dropiLanguageChange.emit(lang);\n }\n\n render() {\n if (!this.currentLang) return null;\n return (\n <div class={`custom-dropdown${this.isOpen ? ' open' : ''}`}>\n <div class=\"selected-option\" onClick={() => { this.isOpen = !this.isOpen; }}>\n <dropi-country-flags country={this.currentLang.flag} flag-style=\"rectangle\" width=\"20\" height=\"15\" />\n <span class=\"Body-S-Regular\">{this.currentLang.label}</span>\n <dropi-icon name=\"Caret-down\" iconWidth=\"16px\" iconHeight=\"16px\" color=\"Gray-Gray-500\" />\n </div>\n <ul class={`dropdown-options${this.isOpen ? ' dropdown-open' : ''}`}>\n {this.parsedLanguages.map(lang => (\n <li\n key={lang.code}\n class={lang.code === this.currentLang?.code ? 'active' : ''}\n onClick={() => this.select(lang)}\n >\n <dropi-country-flags country={lang.flag} flag-style=\"rectangle\" width=\"20\" height=\"15\" />\n <span class=\"Body-S-Regular\">{lang.label}</span>\n </li>\n ))}\n </ul>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-logo.entry.js CHANGED Viewed

@@ -27,7 +27,7 @@ const DropiLogo = class {
         e.target.src = FALLBACK_SVG;
     }
     render() {
-        return (h("figure", { key: '479af3da2dc04c7d6e79b99494fce0fb5419af4d', class: { 'dropi-logo': true, [`dropi-logo--${this.size}`]: true } }, h("img", { key: '6b78e7004f4b1dd782e4c17dae7b264fff483875', src: this.urlLogo || FALLBACK_SVG, alt: "Dropi logo", onError: (e) => this.handleError(e) })));
+        return (h("figure", { key: '2a5ed49bd2ac8592db5b06256ff4e911e26ee6fd', class: { 'dropi-logo': true, [`dropi-logo--${this.size}`]: true } }, h("img", { key: 'f0f63e2e5ceb30c24eac3f7f5a3446858b632f90', src: this.urlLogo || FALLBACK_SVG, alt: "Dropi logo", onError: (e) => this.handleError(e) })));
     }
 };
 DropiLogo.style = dropiLogoCss();

package/dist/dropi-ui/dropi-modal.entry.js CHANGED Viewed

@@ -1,13 +1,13 @@
 import { r as registerInstance, d as createEvent, e as Build, h } from './index-Cvp2LQOM.js';
-const dropiModalCss = () => `:host{display:contents}*,*::before,*::after{box-sizing:border-box}.modal-root{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity 0.18s ease;z-index:1100}.modal-root--open{opacity:1;pointer-events:auto}.modal-root--closing{opacity:1;pointer-events:none}.modal-mask{position:absolute;inset:0;background:rgba(6,11,16,0.66);pointer-events:auto;opacity:0;transition:opacity 0.18s ease}.modal-root--open .modal-mask{opacity:1}.modal-root--closing .modal-mask{opacity:0}.modal-panel{position:relative;pointer-events:auto;display:flex;flex-direction:column;border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);box-shadow:0 0 60px rgba(0,0,0,0.06);overflow:hidden;padding:var(--Size-6, 32px);gap:var(--Size-5, 24px);max-height:calc(100vh - 60px);opacity:0;transform:translateY(16px) scale(0.92);transition:opacity 0.18s ease, transform 0.18s ease}.modal-root--open .modal-panel{opacity:1;transform:none}.modal-root--closing .modal-panel{opacity:0;transform:translateY(-12px) scale(1.06)}.modal-header{display:flex;align-items:center;gap:4px}.modal-title{color:var(--Gray-Gray-700,#32394d);font-size:var(--Size-5, 24px);font-weight:var(--font-weight-bold);flex:1;text-align:left}.modal-close{margin-left:auto;border:0;background:transparent;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:var(--font-size-xxl);line-height:1;color:var(--Gray-Gray-400)}.modal-close:hover{opacity:0.7}.modal-content{padding-right:8px;overflow:auto;flex:1;display:flex;flex-direction:column;scrollbar-width:thin;scrollbar-color:var(--Gray-Gray-300,#a3abbf) var(--Gray-Gray-50,#f7f8fa)}.modal-content::-webkit-scrollbar{width:4px}.modal-content::-webkit-scrollbar-track{background:var(--Gray-Gray-50,#f7f8fa);border-radius:16px}.modal-content::-webkit-scrollbar-thumb{background:var(--Gray-Gray-300,#a3abbf);border-radius:16px}.modal-footer{display:flex;justify-content:flex-end;align-items:flex-start;gap:var(--Size-1, 4px);width:100%}.modal-footer:empty{display:none}::slotted(.button-container){display:grid;grid-template-columns:1fr 1fr;gap:var(--Size-4, 16px);min-width:470px;width:100%}::slotted(.button-container)>*{width:100%}::slotted(.button-container) dropi-button{width:100%}.modal-panel.size-m .modal-footer,.modal-panel.size-s .modal-footer{justify-content:center}.modal-panel.size-m .modal-footer ::slotted(.button-container),.modal-panel.size-s .modal-footer ::slotted(.button-container){min-width:unset !important;width:100%}.modal-panel.size-drawer-s .modal-footer ::slotted(.button-container){min-width:unset;display:flex;flex-direction:column-reverse;gap:var(--Size-4, 16px)}.modal-panel.size-full{width:100%;height:100vh;max-height:100vh;border-radius:0}.modal-panel.size-xxl{width:calc(100% - 60px);max-width:1520px;height:calc(100vh - 120px);max-height:900px}.modal-panel.size-l{width:1137px;max-width:1137px;max-height:754px}.modal-panel.size-m{max-width:550px;width:550px}.modal-panel.size-s{width:454px}.modal-root--right{align-items:stretch;justify-content:flex-end}.modal-root--right .modal-panel{height:100vh;max-height:100vh;border-radius:0;gap:0;opacity:1;transform:translateX(100%);transition:transform 0.32s cubic-bezier(0.4,0,0.2,1)}.modal-root--open.modal-root--right .modal-panel{transform:translateX(0)}.modal-root--closing.modal-root--right .modal-panel{transform:translateX(100%)}.modal-root--right .modal-panel.size-drawer-s{width:351px;padding:20px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-drawer-m{width:550px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-drawer-l{width:1137px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-drawer-xxl{width:1214px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-sidebar-half{width:50vw;min-width:600px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}@media (max-width: 768px){.modal-root--right .modal-panel.size-drawer-s,.modal-root--right .modal-panel.size-drawer-m,.modal-root--right .modal-panel.size-drawer-l,.modal-root--right .modal-panel.size-drawer-xxl,.modal-root--right .modal-panel.size-sidebar-half{width:100vw;min-width:unset}}.modal-root--left{align-items:stretch;justify-content:flex-start}.modal-root--left .modal-panel{height:100vh;max-height:100vh;border-radius:0;gap:0;opacity:1;transform:translateX(-100%);transition:transform 0.32s cubic-bezier(0.4,0,0.2,1)}.modal-root--open.modal-root--left .modal-panel{transform:translateX(0)}.modal-root--closing.modal-root--left .modal-panel{transform:translateX(-100%)}.modal-root--top{align-items:flex-start}.modal-root--bottom{align-items:flex-end}@media (max-width: 599px){.modal-panel{padding:20px;width:100% !important}.modal-panel:not(.size-s){border-radius:0 !important;height:100% !important;max-height:unset !important}.modal-root--right .modal-panel{width:100vw !important;min-width:unset !important}.modal-footer{justify-content:center}.modal-footer ::slotted(.button-container){width:100%;min-width:unset !important;display:flex;flex-direction:column-reverse;gap:var(--Size-4, 16px)}}@media (prefers-reduced-motion: reduce){.modal-root,.modal-mask,.modal-panel{transition:none !important}}`;
+const dropiModalCss = () => `:host{display:contents}*,*::before,*::after{box-sizing:border-box}.modal-root{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity 0.18s ease;z-index:9999;visibility:hidden}.modal-root--open{opacity:1;pointer-events:auto;visibility:visible}.modal-root--closing{opacity:1;pointer-events:none;visibility:visible}.modal-mask{position:absolute;inset:0;background:rgba(6,11,16,0.66);pointer-events:auto;opacity:0;transition:opacity 0.18s ease}.modal-root--open .modal-mask{opacity:1}.modal-root--closing .modal-mask{opacity:0}.modal-panel{position:relative;pointer-events:auto;display:flex;flex-direction:column;border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);box-shadow:0 0 60px rgba(0,0,0,0.06);overflow:hidden;padding:var(--Size-6, 32px);gap:var(--Size-5, 24px);max-height:calc(100vh - 60px);opacity:0;transform:translateY(16px) scale(0.92);transition:opacity 0.18s ease, transform 0.18s ease}.modal-root--open .modal-panel{opacity:1;transform:none}.modal-root--closing .modal-panel{opacity:0;transform:translateY(-12px) scale(1.06)}.modal-header{display:flex;align-items:center;gap:4px}.modal-title{color:var(--Gray-Gray-700,#32394d);font-size:var(--Size-5, 24px);font-weight:var(--font-weight-bold);flex:1;text-align:left}.modal-close{margin-left:auto;border:0;background:transparent;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:var(--font-size-xxl);line-height:1;color:var(--Gray-Gray-400)}.modal-close:hover{opacity:0.7}.modal-content{padding-right:8px;overflow:auto;flex:1;display:flex;flex-direction:column;scrollbar-width:thin;scrollbar-color:var(--Gray-Gray-300,#a3abbf) var(--Gray-Gray-50,#f7f8fa)}.modal-content::-webkit-scrollbar{width:4px}.modal-content::-webkit-scrollbar-track{background:var(--Gray-Gray-50,#f7f8fa);border-radius:16px}.modal-content::-webkit-scrollbar-thumb{background:var(--Gray-Gray-300,#a3abbf);border-radius:16px}.modal-footer{display:flex;justify-content:flex-end;align-items:flex-start;gap:var(--Size-1, 4px);width:100%;margin-top:auto;flex-shrink:0}.modal-footer:empty{display:none}::slotted(.button-container){display:grid;grid-template-columns:1fr 1fr;gap:var(--Size-4, 16px);min-width:470px;width:100%}::slotted(.button-container)>*{width:100%}::slotted(.button-container) dropi-button{width:100%}.modal-panel.size-m .modal-footer,.modal-panel.size-s .modal-footer,.modal-panel.size-xs .modal-footer{justify-content:flex-end}.modal-panel.size-m .modal-footer ::slotted(.button-container),.modal-panel.size-s .modal-footer ::slotted(.button-container),.modal-panel.size-xs .modal-footer ::slotted(.button-container){min-width:unset !important;width:100%}.modal-panel.size-drawer-s .modal-footer ::slotted(.button-container){min-width:unset;display:flex;flex-direction:column-reverse;gap:var(--Size-4, 16px)}.modal-panel.size-full{width:100%;height:100vh;max-height:100vh;border-radius:0}.modal-panel.size-xxl{width:calc(100% - 60px);max-width:1520px;height:calc(100vh - 120px);max-height:900px}.modal-panel.size-l{width:1137px;max-width:1137px;max-height:754px}.modal-panel.size-m{max-width:550px;width:550px}.modal-panel.size-s{width:454px}.modal-panel.size-xs{width:320px;padding:24px;gap:16px}.modal-root--right{align-items:stretch;justify-content:flex-end}.modal-root--right .modal-panel{height:100vh;max-height:100vh;border-radius:0;gap:0;opacity:1;transform:translateX(100%);transition:transform 0.32s cubic-bezier(0.4,0,0.2,1)}.modal-root--open.modal-root--right .modal-panel{transform:translateX(0)}.modal-root--closing.modal-root--right .modal-panel{transform:translateX(100%)}.modal-root--right .modal-panel.size-drawer-s{width:351px;padding:20px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-drawer-m{width:550px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-drawer-l{width:1137px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-drawer-xxl{width:1214px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}.modal-root--right .modal-panel.size-sidebar-half{width:50vw;min-width:600px;box-shadow:0 8px 40px rgba(0,0,0,0.16)}@media (max-width: 768px){.modal-root--right .modal-panel.size-drawer-s,.modal-root--right .modal-panel.size-drawer-m,.modal-root--right .modal-panel.size-drawer-l,.modal-root--right .modal-panel.size-drawer-xxl,.modal-root--right .modal-panel.size-sidebar-half{width:100vw;min-width:unset}}.modal-root--left{align-items:stretch;justify-content:flex-start}.modal-root--left .modal-panel{height:100vh;max-height:100vh;border-radius:0;gap:0;opacity:1;transform:translateX(-100%);transition:transform 0.32s cubic-bezier(0.4,0,0.2,1)}.modal-root--open.modal-root--left .modal-panel{transform:translateX(0)}.modal-root--closing.modal-root--left .modal-panel{transform:translateX(-100%)}.modal-root--top{align-items:flex-start}.modal-root--bottom{align-items:flex-end}@media (max-width: 599px){.modal-panel{padding:20px;width:100% !important}.modal-panel:not(.size-s){border-radius:0 !important;height:100% !important;max-height:unset !important}.modal-root--right .modal-panel{width:100vw !important;min-width:unset !important}.modal-footer{justify-content:center}.modal-footer ::slotted(.button-container){width:100%;min-width:unset !important;display:flex;flex-direction:column-reverse;gap:var(--Size-4, 16px)}}@media (prefers-reduced-motion: reduce){.modal-root,.modal-mask,.modal-panel{transition:none !important}}`;
 const DropiModal = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.onShow = createEvent(this, "onShow", 5);
-        this.onHide = createEvent(this, "onHide", 5);
-        this.visibleChange = createEvent(this, "visibleChange", 5);
+        this.dropiShow = createEvent(this, "dropiShow", 7);
+        this.dropiHide = createEvent(this, "dropiHide", 7);
+        this.dropiVisibleChange = createEvent(this, "dropiVisibleChange", 7);
     }
     visible = false;
     header = null;
@@ -37,25 +37,25 @@ const DropiModal = class {
     isDraggable = false;
     /** No-op — kept for API parity with Angular (matches Angular `resizable`) */
     resizable = false;
-    onShow;
-    onHide;
-    visibleChange;
+    dropiShow;
+    dropiHide;
+    dropiVisibleChange;
     isOpen = false;
     isClosing = false;
     mounted = false;
     closeTimer = null;
     keyHandler = null;
-    visibleChanged(val, oldVal) {
-        const isVisible = val === true || String(val) === 'true';
-        const wasVisible = oldVal === true || String(oldVal) === 'true';
-        if (isVisible === wasVisible)
-            return;
-        console.log('[DropiModal] visibleChanged:', isVisible);
-        isVisible ? this.openModal() : (this.mounted && this.startClose());
+    canDismiss = false;
+    visibleChanged(val) {
+        if (val) {
+            this.openModal();
+        }
+        else {
+            this.startClose();
+        }
     }
     componentDidLoad() {
-        const isVisible = this.visible === true || String(this.visible) === 'true';
-        if (isVisible)
+        if (this.visible)
             this.openModal();
     }
     disconnectedCallback() {
@@ -66,35 +66,40 @@ const DropiModal = class {
             document.body.classList.remove('dropi-modal-open');
         }
     }
-    async hide() {
-        this.visible = false;
-        this.visibleChange.emit(false);
-        this.startClose();
+    async dismiss() {
+        if (this.visible) {
+            this.visible = false;
+            this.dropiVisibleChange.emit(false);
+        }
+        else {
+            this.startClose();
+        }
     }
-    async show() {
+    async openModalExternally() {
         this.visible = true;
-        this.visibleChange.emit(true);
-        this.openModal();
+        this.dropiVisibleChange.emit(true);
     }
     openModal() {
         if (this.closeTimer) {
             clearTimeout(this.closeTimer);
             this.closeTimer = null;
         }
-        this.mounted = true;
+        // Safety: ensure it's not already open or in a closing state
         this.isClosing = false;
-        this.isOpen = false;
+        this.mounted = true;
         requestAnimationFrame(() => requestAnimationFrame(() => {
             this.isOpen = true;
-            this.onShow.emit();
+            this.dropiShow.emit();
         }));
         this.addKeyHandler();
+        this.canDismiss = false;
+        setTimeout(() => { this.canDismiss = true; }, 300);
         if ((this.modal ?? true) && Build.isBrowser && document.body) {
             document.body.classList.add('dropi-modal-open');
         }
     }
     startClose() {
-        if (this.isClosing)
+        if (this.isClosing || !this.mounted)
             return;
         this.isClosing = true;
         this.isOpen = false;
@@ -108,15 +113,15 @@ const DropiModal = class {
             if ((this.modal ?? true) && Build.isBrowser && document.body) {
                 document.body.classList.remove('dropi-modal-open');
             }
-            this.onHide.emit();
+            this.dropiHide.emit();
         }, 200);
     }
     addKeyHandler() {
         if (!this.closeOnEscape)
             return;
         this.keyHandler = (e) => {
-            if (e.key === 'Escape' && this.visible && this.dismissable)
-                this.hide();
+            if (e.key === 'Escape' && this.visible && this.dismissable && this.canDismiss)
+                this.dismiss();
         };
         document.addEventListener('keydown', this.keyHandler);
     }
@@ -127,7 +132,7 @@ const DropiModal = class {
         }
     }
     render() {
-        return (h("div", { key: '1aee093f108c54540005a6cb2f48bef700f05d63', class: `modal-root modal-root--${this.position}${this.isOpen ? ' modal-root--open' : ''}${this.isClosing ? ' modal-root--closing' : ''}`, style: { display: this.mounted || this.isClosing ? 'flex' : 'none' } }, (this.modal ?? true) && h("div", { key: '06ebd29da0c7dc699e7c16769476e310336ab149', class: "modal-mask", onClick: () => this.dismissable && this.hide() }), h("div", { key: '87cb9bbd4c1c6c27a6a7d09f561ea781c1571803', class: `modal-panel size-${this.size || 'm'}`, role: "dialog", "aria-modal": "true" }, this.showHeader && (h("div", { key: '86f22ef920b7a7437825f4c5f9ccff23b591c499', class: "modal-header" }, this.header && h("span", { key: '2ae7c9b879ee6c025b6b42977bad643ff4d28370', class: "modal-title" }, this.header), h("slot", { key: '85a0a54691ca191719202c8fea6b30ffff30aacc', name: "header" }), this.showCloseIcon && (h("button", { key: 'dc1f570830d22535a39c9e9fbf0bccdb8e4bfcf7', class: "modal-close", onClick: () => this.hide(), "aria-label": "Cerrar" }, "\u00D7")))), h("div", { key: 'ceca42f33ff7d4762c79b2d133e23bc7cedb3cb3', class: "modal-content" }, h("slot", { key: '14a82735c521c45deda61e8a69ae8673ad754b3d' })), this.showFooter && h("div", { key: 'e71a5393c19de696247502abd09d26a38cd1b979', class: "modal-footer" }, h("slot", { key: '1364eed1b66e82d321d06d13d9d34615c7634ce0', name: "footer" })))));
+        return (h("div", { key: '95847ba48baae69b93888cb59ecaa9d2130ae17a', class: `modal-root modal-root--${this.position}${this.isOpen ? ' modal-root--open' : ''}${this.isClosing ? ' modal-root--closing' : ''}` }, (this.modal ?? true) && h("div", { key: '78acc3c2f1b7327b6fc1770a9536cdf0c2c57f99', class: "modal-mask", onClick: () => this.canDismiss && this.dismissable && this.dismiss() }), h("div", { key: '63906a7ed0432879c3256a659ddd9773099244bc', class: `modal-panel size-${this.size || 'm'}`, role: "dialog", "aria-modal": "true", style: this.maxWidth ? { maxWidth: this.maxWidth, width: '100%' } : {} }, this.showHeader && (h("div", { key: '7d960505ea8fd7804ac67ceb88b9195e6ad1998d', class: "modal-header" }, this.header && h("span", { key: 'fed4b8a2e6c89fca39a8766d0e843db7c184be59', class: "modal-title" }, this.header), h("slot", { key: 'b2c6c5cc1f019229c3ad5028e42b1fd887494abd', name: "header" }), this.showCloseIcon && (h("button", { key: '24fc8ff422ea5c7e6a8c0737acbb29c1d7467f40', class: "modal-close", onClick: () => this.dismiss(), "aria-label": "Cerrar" }, "\u00D7")))), h("div", { key: '472a7dfe704b0b8d129b00bc88204602ead66403', class: "modal-content" }, h("slot", { key: '6b3e6fdefca0c6510d4fdbbccce53a5efa52e4c8' })), this.showFooter && h("div", { key: '5bd3c15d4d1fb2ebffad79c9314d03d1d72dae29', class: "modal-footer" }, h("slot", { key: '1980d019b142e2a00f55a3a755e9e08d0393c5e5', name: "footer" })))));
     }
     static get watchers() { return {
         "visible": [{

package/dist/dropi-ui/dropi-modal.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dropi-modal.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-modal/dropi-modal.css?tag=dropi-modal&encapsulation=shadow","src/components/dropi-modal/dropi-modal.tsx"],"sourcesContent":[":host { display: contents; }\n, ::before, ::after { box-sizing: border-box; }\n\n.modal-root {\n position: fixed; inset: 0;\n display: flex; align-items: center; justify-content: center;\n pointer-events: none; opacity: 0;\n transition: opacity 0.18s ease; z-index: 1100;\n}\n.modal-root--open { opacity: 1; pointer-events: auto; }\n.modal-root--closing { opacity: 1; pointer-events: none; }\n\n.modal-mask {\n position: absolute; inset: 0;\n background: rgba(6,11,16,0.66); pointer-events: auto;\n opacity: 0; transition: opacity 0.18s ease;\n}\n.modal-root--open .modal-mask { opacity: 1; }\n.modal-root--closing .modal-mask { opacity: 0; }\n\n.modal-panel {\n position: relative; pointer-events: auto;\n display: flex; flex-direction: column;\n border-radius: var(--Border-2, 8px);\n background: var(--Neutral-White, #ffffff);\n box-shadow: 0 0 60px rgba(0,0,0,0.06);\n overflow: hidden;\n padding: var(--Size-6, 32px); gap: var(--Size-5, 24px);\n max-height: calc(100vh - 60px);\n opacity: 0; transform: translateY(16px) scale(0.92);\n transition: opacity 0.18s ease, transform 0.18s ease;\n}\n.modal-root--open .modal-panel { opacity: 1; transform: none; }\n.modal-root--closing .modal-panel { opacity: 0; transform: translateY(-12px) scale(1.06); }\n\n.modal-header { display: flex; align-items: center; gap: 4px; }\n.modal-title { color: var(--Gray-Gray-700,#32394d); font-size: var(--Size-5, 24px); font-weight: var(--font-weight-bold); flex: 1; text-align: left; }\n.modal-close { margin-left: auto; border: 0; background: transparent; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: var(--font-size-xxl); line-height: 1; color: var(--Gray-Gray-400); }\n.modal-close:hover { opacity: 0.7; }\n\n.modal-content {\n padding-right: 8px; overflow: auto; flex: 1;\n display: flex; flex-direction: column;\n scrollbar-width: thin; scrollbar-color: var(--Gray-Gray-300,#a3abbf) var(--Gray-Gray-50,#f7f8fa);\n}\n.modal-content::-webkit-scrollbar { width: 4px; }\n.modal-content::-webkit-scrollbar-track { background: var(--Gray-Gray-50,#f7f8fa); border-radius: 16px; }\n.modal-content::-webkit-scrollbar-thumb { background: var(--Gray-Gray-300,#a3abbf); border-radius: 16px; }\n\n.modal-footer { \n display: flex; \n justify-content: flex-end; \n align-items: flex-start; \n gap: var(--Size-1, 4px); \n width: 100%;\n}\n.modal-footer:empty { display: none; }\n\n/ button-container: grid 2 columnas igual que en Angular host p-dialog-footer /\n::slotted(.button-container) {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: var(--Size-4, 16px);\n min-width: 470px;\n width: 100%;\n}\n::slotted(.button-container) > {\n width: 100%;\n}\n::slotted(.button-container) dropi-button {\n width: 100%;\n}\n\n.modal-panel.size-m .modal-footer,\n.modal-panel.size-s .modal-footer { \n justify-content: center; \n}\n\n.modal-panel.size-m .modal-footer ::slotted(.button-container),\n.modal-panel.size-s .modal-footer ::slotted(.button-container) { \n min-width: unset !important;\n width: 100%;\n}\n\n.modal-panel.size-drawer-s .modal-footer ::slotted(.button-container) { \n min-width: unset; \n display: flex; \n flex-direction: column-reverse; \n gap: var(--Size-4, 16px);\n}\n\n.modal-panel.size-full { width: 100%; height: 100vh; max-height: 100vh; border-radius: 0; }\n.modal-panel.size-xxl { width: calc(100% - 60px); max-width: 1520px; height: calc(100vh - 120px); max-height: 900px; }\n.modal-panel.size-l { width: 1137px; max-width: 1137px; max-height: 754px; }\n.modal-panel.size-m { max-width: 550px; width: 550px; }\n.modal-panel.size-s { width: 454px; }\n\n.modal-root--right { align-items: stretch; justify-content: flex-end; }\n.modal-root--right .modal-panel { height: 100vh; max-height: 100vh; border-radius: 0; gap: 0; opacity: 1; transform: translateX(100%); transition: transform 0.32s cubic-bezier(0.4,0,0.2,1); }\n.modal-root--open.modal-root--right .modal-panel { transform: translateX(0); }\n.modal-root--closing.modal-root--right .modal-panel { transform: translateX(100%); }\n.modal-root--right .modal-panel.size-drawer-s { width: 351px; padding: 20px; box-shadow: 0 8px 40px rgba(0,0,0,0.16); }\n.modal-root--right .modal-panel.size-drawer-m { width: 550px; box-shadow: 0 8px 40px rgba(0,0,0,0.16); }\n.modal-root--right .modal-panel.size-drawer-l { width: 1137px; box-shadow: 0 8px 40px rgba(0,0,0,0.16); }\n.modal-root--right .modal-panel.size-drawer-xxl { width: 1214px; box-shadow: 0 8px 40px rgba(0,0,0,0.16); }\n.modal-root--right .modal-panel.size-sidebar-half { width: 50vw; min-width: 600px; box-shadow: 0 8px 40px rgba(0,0,0,0.16); }\n\n@media (max-width: 768px) {\n .modal-root--right .modal-panel.size-drawer-s,\n .modal-root--right .modal-panel.size-drawer-m,\n .modal-root--right .modal-panel.size-drawer-l,\n .modal-root--right .modal-panel.size-drawer-xxl,\n .modal-root--right .modal-panel.size-sidebar-half { width: 100vw; min-width: unset; }\n}\n\n.modal-root--left { align-items: stretch; justify-content: flex-start; }\n.modal-root--left .modal-panel { height: 100vh; max-height: 100vh; border-radius: 0; gap: 0; opacity: 1; transform: translateX(-100%); transition: transform 0.32s cubic-bezier(0.4,0,0.2,1); }\n.modal-root--open.modal-root--left .modal-panel { transform: translateX(0); }\n.modal-root--closing.modal-root--left .modal-panel { transform: translateX(-100%); }\n\n.modal-root--top { align-items: flex-start; }\n.modal-root--bottom { align-items: flex-end; }\n\n@media (max-width: 599px) {\n .modal-panel { padding: 20px; width: 100% !important; }\n .modal-panel:not(.size-s) { border-radius: 0 !important; height: 100% !important; max-height: unset !important; }\n .modal-root--right .modal-panel { width: 100vw !important; min-width: unset !important; }\n \n .modal-footer { justify-content: center; }\n .modal-footer ::slotted(.button-container) { \n width: 100%;\n min-width: unset !important;\n display: flex;\n flex-direction: column-reverse;\n gap: var(--Size-4, 16px);\n }\n}\n@media (prefers-reduced-motion: reduce) {\n .modal-root, .modal-mask, .modal-panel { transition: none !important; }\n}\n","import { Component, Prop, Event, EventEmitter, State, Watch, Method, h, Build } from '@stencil/core';\n\nexport type ModalPosition = 'center' \| 'right' \| 'left' \| 'top' \| 'bottom';\nexport type ModalSize = 'full' \| 'xxl' \| 'l' \| 'm' \| 's' \| 'drawer-s' \| 'drawer-m' \| 'drawer-l' \| 'drawer-xxl' \| 'sidebar-half';\n\n/*\n @component dropi-modal\n * Modal/dialog with backdrop, close button, and header/content/footer slots.\n * Slots: (default) body, \"header\" custom header, \"footer\" actions.\n /\n@Component({\n tag: 'dropi-modal',\n styleUrl: 'dropi-modal.css',\n shadow: true,\n})\nexport class DropiModal {\n @Prop({ mutable: true, reflect: true }) visible: any = false;\n @Prop() header: string \| null = null;\n @Prop() showCloseIcon: boolean = true;\n @Prop() dismissable: boolean = true;\n @Prop() dismissableMask: boolean = true;\n @Prop() dismissible: boolean = true;\n @Prop() closeOnEscape: boolean = true;\n @Prop() modal: boolean = true;\n @Prop() closable: boolean = true;\n @Prop() blockScroll: boolean = true;\n @Prop() showHeader: boolean = true;\n @Prop() showFooter: boolean = true;\n @Prop() position: ModalPosition = 'center';\n @Prop() size: ModalSize = 'm';\n @Prop() styleClass: string \| null = null;\n @Prop() maxWidth: string \| null = null;\n /* Auto-manage z-index stack (matches Angular `autoZIndex`) /\n @Prop() autoZIndex: boolean = true;\n /* Base z-index value when autoZIndex is false (matches Angular `baseZIndex`) /\n @Prop() baseZIndex: number = 1100;\n /* CSS transition duration, e.g. '0.15s' (matches Angular `transitionOptions`) /\n @Prop() transitionOptions: string = '0.15s';\n /* Enable a before-close hook (matches Angular `enableBeforeClose`) /\n @Prop() enableBeforeClose: boolean = false;\n /* No-op — kept for API parity with Angular (matches Angular `draggable`) /\n @Prop() isDraggable: boolean = false;\n /* No-op — kept for API parity with Angular (matches Angular `resizable`) */\n @Prop() resizable: boolean = false;\n\n @Event({ composed: false }) onShow: EventEmitter<void>;\n @Event({ composed: false }) onHide: EventEmitter<void>;\n @Event({ composed: false }) visibleChange: EventEmitter<boolean>;\n\n @State() private isOpen: boolean = false;\n @State() private isClosing: boolean = false;\n @State() private mounted: boolean = false;\n\n private closeTimer: any = null;\n private keyHandler: ((e: KeyboardEvent) => void) \| null = null;\n\n @Watch('visible')\n visibleChanged(val: any, oldVal: any) {\n const isVisible = val === true \|\| String(val) === 'true';\n const wasVisible = oldVal === true \|\| String(oldVal) === 'true';\n if (isVisible === wasVisible) return;\n \n console.log('[DropiModal] visibleChanged:', isVisible);\n isVisible ? this.openModal() : (this.mounted && this.startClose());\n }\n\n componentDidLoad() {\n const isVisible = this.visible === true \|\| String(this.visible) === 'true';\n if (isVisible) this.openModal();\n }\n\n disconnectedCallback() {\n this.removeKeyHandler();\n if (this.closeTimer) clearTimeout(this.closeTimer);\n if (typeof document !== 'undefined') {\n document.body.classList.remove('dropi-modal-open');\n }\n }\n\n @Method() async hide() {\n this.visible = false;\n this.visibleChange.emit(false);\n this.startClose();\n }\n\n @Method() async show() {\n this.visible = true;\n this.visibleChange.emit(true);\n this.openModal();\n }\n\n private openModal() {\n if (this.closeTimer) { clearTimeout(this.closeTimer); this.closeTimer = null; }\n this.mounted = true;\n this.isClosing = false;\n this.isOpen = false;\n requestAnimationFrame(() => requestAnimationFrame(() => {\n this.isOpen = true;\n this.onShow.emit();\n }));\n this.addKeyHandler();\n if ((this.modal ?? true) && Build.isBrowser && document.body) {\n document.body.classList.add('dropi-modal-open');\n }\n }\n\n private startClose() {\n if (this.isClosing) return;\n this.isClosing = true;\n this.isOpen = false;\n this.removeKeyHandler();\n if (this.closeTimer) clearTimeout(this.closeTimer);\n this.closeTimer = setTimeout(() => {\n this.mounted = false;\n this.isClosing = false;\n this.closeTimer = null;\n if ((this.modal ?? true) && Build.isBrowser && document.body) {\n document.body.classList.remove('dropi-modal-open');\n }\n this.onHide.emit();\n }, 200);\n }\n\n private addKeyHandler() {\n if (!this.closeOnEscape) return;\n this.keyHandler = (e: KeyboardEvent) => {\n if (e.key === 'Escape' && this.visible && this.dismissable) this.hide();\n };\n document.addEventListener('keydown', this.keyHandler);\n }\n\n private removeKeyHandler() {\n if (this.keyHandler) { document.removeEventListener('keydown', this.keyHandler); this.keyHandler = null; }\n }\n\n render() {\n return (\n <div \n class={`modal-root modal-root--${this.position}${this.isOpen ? ' modal-root--open' : ''}${this.isClosing ? ' modal-root--closing' : ''}`}\n style={{ display: this.mounted \|\| this.isClosing ? 'flex' : 'none' }}\n >\n {(this.modal ?? true) && <div class=\"modal-mask\" onClick={() => this.dismissable && this.hide()} />}\n <div class={`modal-panel size-${this.size \|\| 'm'}`} role=\"dialog\" aria-modal=\"true\">\n {this.showHeader && (\n <div class=\"modal-header\">\n {this.header && <span class=\"modal-title\">{this.header}</span>}\n <slot name=\"header\"></slot>\n {this.showCloseIcon && (\n <button class=\"modal-close\" onClick={() => this.hide()} aria-label=\"Cerrar\">\n ×\n </button>\n )}\n </div>\n )}\n <div class=\"modal-content\"><slot /></div>\n {this.showFooter && <div class=\"modal-footer\"><slot name=\"footer\" /></div>}\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"dropi-modal.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-modal/dropi-modal.css?tag=dropi-modal&encapsulation=shadow","src/components/dropi-modal/dropi-modal.tsx"],"sourcesContent":[":host { display: contents; }\n, ::before, ::after { box-sizing: border-box; }\n\n.modal-root {\n position: fixed; inset: 0;\n display: flex; align-items: center; justify-content: center;\n pointer-events: none; opacity: 0;\n transition: opacity 0.18s ease; z-index: 9999;\n visibility: hidden;\n}\n.modal-root--open { opacity: 1; pointer-events: auto; visibility: visible; }\n.modal-root--closing { opacity: 1; pointer-events: none; visibility: visible; }\n\n.modal-mask {\n position: absolute; inset: 0;\n background: rgba(6,11,16,0.66); pointer-events: auto;\n opacity: 0; transition: opacity 0.18s ease;\n}\n.modal-root--open .modal-mask { opacity: 1; }\n.modal-root--closing .modal-mask { opacity: 0; }\n\n.modal-panel {\n position: relative; pointer-events: auto;\n display: flex; flex-direction: column;\n border-radius: var(--Border-2, 8px);\n background: var(--Neutral-White, #ffffff);\n box-shadow: 0 0 60px rgba(0,0,0,0.06);\n overflow: hidden;\n padding: var(--Size-6, 32px); gap: var(--Size-5, 24px);\n max-height: calc(100vh - 60px);\n opacity: 0; transform: translateY(16px) scale(0.92);\n transition: opacity 0.18s ease, transform 0.18s ease;\n}\n.modal-root--open .modal-panel { opacity: 1; transform: none; }\n.modal-root--closing .modal-panel { opacity: 0; transform: translateY(-12px) scale(1.06); }\n\n.modal-header { display: flex; align-items: center; gap: 4px; }\n.modal-title { color: var(--Gray-Gray-700,#32394d); font-size: var(--Size-5, 24px); font-weight: var(--font-weight-bold); flex: 1; text-align: left; }\n.modal-close { margin-left: auto; border: 0; background: transparent; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: var(--font-size-xxl); line-height: 1; color: var(--Gray-Gray-400); }\n.modal-close:hover { opacity: 0.7; }\n\n.modal-content {\n padding-right: 8px; overflow: auto; flex: 1;\n display: flex; flex-direction: column;\n scrollbar-width: thin; scrollbar-color: var(--Gray-Gray-300,#a3abbf) var(--Gray-Gray-50,#f7f8fa);\n}\n.modal-content::-webkit-scrollbar { width: 4px; }\n.modal-content::-webkit-scrollbar-track { background: var(--Gray-Gray-50,#f7f8fa); border-radius: 16px; }\n.modal-content::-webkit-scrollbar-thumb { background: var(--Gray-Gray-300,#a3abbf); border-radius: 16px; }\n\n.modal-footer { \n display: flex; \n justify-content: flex-end; \n align-items: flex-start; \n gap: var(--Size-1, 4px); \n width: 100%;\n margin-top: auto;\n flex-shrink: 0;\n}\n.modal-footer:empty { display: none; }\n\n/ button-container: grid 2 columnas igual que en Angular host p-dialog-footer /\n::slotted(.button-container) {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: var(--Size-4, 16px);\n min-width: 470px;\n width: 100%;\n}\n::slotted(.button-container) > {\n width: 100%;\n}\n::slotted(.button-container) dropi-button {\n width: 100%;\n}\n\n.modal-panel.size-m .modal-footer,\n.modal-panel.size-s .modal-footer,\n.modal-panel.size-xs .modal-footer { \n justify-content: flex-end; \n}\n\n.modal-panel.size-m .modal-footer ::slotted(.button-container),\n.modal-panel.size-s .modal-footer ::slotted(.button-container),\n.modal-panel.size-xs .modal-footer ::slotted(.button-container) { \n min-width: unset !important;\n width: 100%;\n}\n\n.modal-panel.size-drawer-s .modal-footer ::slotted(.button-container) { \n min-width: unset; \n display: flex; \n flex-direction: column-reverse; \n gap: var(--Size-4, 16px);\n}\n\n.modal-panel.size-full { width: 100%; height: 100vh; max-height: 100vh; border-radius: 0; }\n.modal-panel.size-xxl { width: calc(100% - 60px); max-width: 1520px; height: calc(100vh - 120px); max-height: 900px; }\n.modal-panel.size-l { width: 1137px; max-width: 1137px; max-height: 754px; }\n.modal-panel.size-m { max-width: 550px; width: 550px; }\n.modal-panel.size-s { width: 454px; }\n.modal-panel.size-xs { width: 320px; padding: 24px; gap: 16px; }\n\n.modal-root--right { align-items: stretch; justify-content: flex-end; }\n.modal-root--right .modal-panel { height: 100vh; max-height: 100vh; border-radius: 0; gap: 0; opacity: 1; transform: translateX(100%); transition: transform 0.32s cubic-bezier(0.4,0,0.2,1); }\n.modal-root--open.modal-root--right .modal-panel { transform: translateX(0); }\n.modal-root--closing.modal-root--right .modal-panel { transform: translateX(100%); }\n.modal-root--right .modal-panel.size-drawer-s { width: 351px; padding: 20px; box-shadow: 0 8px 40px rgba(0,0,0,0.16); }\n.modal-root--right .modal-panel.size-drawer-m { width: 550px; box-shadow: 0 8px 40px rgba(0,0,0,0.16); }\n.modal-root--right .modal-panel.size-drawer-l { width: 1137px; box-shadow: 0 8px 40px rgba(0,0,0,0.16); }\n.modal-root--right .modal-panel.size-drawer-xxl { width: 1214px; box-shadow: 0 8px 40px rgba(0,0,0,0.16); }\n.modal-root--right .modal-panel.size-sidebar-half { width: 50vw; min-width: 600px; box-shadow: 0 8px 40px rgba(0,0,0,0.16); }\n\n@media (max-width: 768px) {\n .modal-root--right .modal-panel.size-drawer-s,\n .modal-root--right .modal-panel.size-drawer-m,\n .modal-root--right .modal-panel.size-drawer-l,\n .modal-root--right .modal-panel.size-drawer-xxl,\n .modal-root--right .modal-panel.size-sidebar-half { width: 100vw; min-width: unset; }\n}\n\n.modal-root--left { align-items: stretch; justify-content: flex-start; }\n.modal-root--left .modal-panel { height: 100vh; max-height: 100vh; border-radius: 0; gap: 0; opacity: 1; transform: translateX(-100%); transition: transform 0.32s cubic-bezier(0.4,0,0.2,1); }\n.modal-root--open.modal-root--left .modal-panel { transform: translateX(0); }\n.modal-root--closing.modal-root--left .modal-panel { transform: translateX(-100%); }\n\n.modal-root--top { align-items: flex-start; }\n.modal-root--bottom { align-items: flex-end; }\n\n@media (max-width: 599px) {\n .modal-panel { padding: 20px; width: 100% !important; }\n .modal-panel:not(.size-s) { border-radius: 0 !important; height: 100% !important; max-height: unset !important; }\n .modal-root--right .modal-panel { width: 100vw !important; min-width: unset !important; }\n \n .modal-footer { justify-content: center; }\n .modal-footer ::slotted(.button-container) { \n width: 100%;\n min-width: unset !important;\n display: flex;\n flex-direction: column-reverse;\n gap: var(--Size-4, 16px);\n }\n}\n@media (prefers-reduced-motion: reduce) {\n .modal-root, .modal-mask, .modal-panel { transition: none !important; }\n}\n","import { Component, Prop, Event, EventEmitter, State, Watch, Method, h, Build } from '@stencil/core';\n\nexport type ModalPosition = 'center' \| 'right' \| 'left' \| 'top' \| 'bottom';\nexport type ModalSize = 'full' \| 'xxl' \| 'l' \| 'm' \| 's' \| 'xs' \| 'drawer-s' \| 'drawer-m' \| 'drawer-l' \| 'drawer-xxl' \| 'sidebar-half';\n\n/*\n @component dropi-modal\n * Modal/dialog with backdrop, close button, and header/content/footer slots.\n * Slots: (default) body, \"header\" custom header, \"footer\" actions.\n /\n@Component({\n tag: 'dropi-modal',\n styleUrl: 'dropi-modal.css',\n shadow: true,\n})\nexport class DropiModal {\n @Prop({ mutable: true, reflect: true }) visible: boolean = false;\n @Prop() header: string \| null = null;\n @Prop() showCloseIcon: boolean = true;\n @Prop() dismissable: boolean = true;\n @Prop() dismissableMask: boolean = true;\n @Prop() dismissible: boolean = true;\n @Prop() closeOnEscape: boolean = true;\n @Prop() modal: boolean = true;\n @Prop() closable: boolean = true;\n @Prop() blockScroll: boolean = true;\n @Prop() showHeader: boolean = true;\n @Prop() showFooter: boolean = true;\n @Prop() position: ModalPosition = 'center';\n @Prop() size: ModalSize = 'm';\n @Prop() styleClass: string \| null = null;\n @Prop() maxWidth: string \| null = null;\n /* Auto-manage z-index stack (matches Angular `autoZIndex`) /\n @Prop() autoZIndex: boolean = true;\n /* Base z-index value when autoZIndex is false (matches Angular `baseZIndex`) /\n @Prop() baseZIndex: number = 1100;\n /* CSS transition duration, e.g. '0.15s' (matches Angular `transitionOptions`) /\n @Prop() transitionOptions: string = '0.15s';\n /* Enable a before-close hook (matches Angular `enableBeforeClose`) /\n @Prop() enableBeforeClose: boolean = false;\n /* No-op — kept for API parity with Angular (matches Angular `draggable`) /\n @Prop() isDraggable: boolean = false;\n /* No-op — kept for API parity with Angular (matches Angular `resizable`) */\n @Prop() resizable: boolean = false;\n\n @Event({ composed: true }) dropiShow: EventEmitter<void>;\n @Event({ composed: true }) dropiHide: EventEmitter<void>;\n @Event({ composed: true }) dropiVisibleChange: EventEmitter<boolean>;\n\n @State() private isOpen: boolean = false;\n @State() private isClosing: boolean = false;\n @State() private mounted: boolean = false;\n\n private closeTimer: any = null;\n private keyHandler: ((e: KeyboardEvent) => void) \| null = null;\n private canDismiss: boolean = false;\n\n @Watch('visible')\n visibleChanged(val: boolean) {\n if (val) {\n this.openModal();\n } else {\n this.startClose();\n }\n }\n\n componentDidLoad() {\n if (this.visible) this.openModal();\n }\n\n disconnectedCallback() {\n this.removeKeyHandler();\n if (this.closeTimer) clearTimeout(this.closeTimer);\n if (typeof document !== 'undefined') {\n document.body.classList.remove('dropi-modal-open');\n }\n }\n\n @Method() async dismiss() {\n if (this.visible) {\n this.visible = false;\n this.dropiVisibleChange.emit(false);\n } else {\n this.startClose();\n }\n }\n\n @Method() async openModalExternally() {\n this.visible = true;\n this.dropiVisibleChange.emit(true);\n }\n\n private openModal() {\n if (this.closeTimer) { clearTimeout(this.closeTimer); this.closeTimer = null; }\n \n // Safety: ensure it's not already open or in a closing state\n this.isClosing = false;\n this.mounted = true;\n \n requestAnimationFrame(() => requestAnimationFrame(() => {\n this.isOpen = true;\n this.dropiShow.emit();\n }));\n \n this.addKeyHandler();\n this.canDismiss = false;\n setTimeout(() => { this.canDismiss = true; }, 300);\n \n if ((this.modal ?? true) && Build.isBrowser && document.body) {\n document.body.classList.add('dropi-modal-open');\n }\n }\n\n private startClose() {\n if (this.isClosing \|\| !this.mounted) return;\n this.isClosing = true;\n this.isOpen = false;\n this.removeKeyHandler();\n \n if (this.closeTimer) clearTimeout(this.closeTimer);\n this.closeTimer = setTimeout(() => {\n this.mounted = false;\n this.isClosing = false;\n this.closeTimer = null;\n if ((this.modal ?? true) && Build.isBrowser && document.body) {\n document.body.classList.remove('dropi-modal-open');\n }\n this.dropiHide.emit();\n }, 200);\n }\n\n private addKeyHandler() {\n if (!this.closeOnEscape) return;\n this.keyHandler = (e: KeyboardEvent) => {\n if (e.key === 'Escape' && this.visible && this.dismissable && this.canDismiss) this.dismiss();\n };\n document.addEventListener('keydown', this.keyHandler);\n }\n\n private removeKeyHandler() {\n if (this.keyHandler) { document.removeEventListener('keydown', this.keyHandler); this.keyHandler = null; }\n }\n\n render() {\n return (\n <div \n class={`modal-root modal-root--${this.position}${this.isOpen ? ' modal-root--open' : ''}${this.isClosing ? ' modal-root--closing' : ''}`}\n >\n {(this.modal ?? true) && <div class=\"modal-mask\" onClick={() => this.canDismiss && this.dismissable && this.dismiss()} />}\n <div \n class={`modal-panel size-${this.size \|\| 'm'}`} \n role=\"dialog\" \n aria-modal=\"true\"\n style={this.maxWidth ? { maxWidth: this.maxWidth, width: '100%' } : {}}\n >\n {this.showHeader && (\n <div class=\"modal-header\">\n {this.header && <span class=\"modal-title\">{this.header}</span>}\n <slot name=\"header\"></slot>\n {this.showCloseIcon && (\n <button class=\"modal-close\" onClick={() => this.dismiss()} aria-label=\"Cerrar\">\n ×\n </button>\n )}\n </div>\n )}\n <div class=\"modal-content\"><slot /></div>\n {this.showFooter && <div class=\"modal-footer\"><slot name=\"footer\" /></div>}\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-navbar.entry.js CHANGED Viewed

@@ -42,9 +42,9 @@ const DropiNavbar = class {
     }
     render() {
         const items = this.parsedData;
-        return (h("nav", { key: '15c337396dbe445ac7a13d7e0f2d99f88b4de439', class: "navbar" }, h("div", { key: '922a217dfe53f3f34dd6746033996bcd71dadfb2', class: "navbar__left" }, this.showMenuToggle && (h("button", { key: 'db80ad1fd6f47807196c81ae60bf9cea8bb16e77', class: "navbar__menu-btn", onClick: () => this.dropiMenuToggle.emit(), "aria-label": "Men\u00FA" }, h("dropi-icon", { key: 'eca18144260cb6471a19f78f7ce75254ba5a138e', name: "Menu", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-700" }))), this.logoUrl && (h("img", { key: '374ea8553605f289c413882c757eda70054ba71d', class: "navbar__logo", src: this.logoUrl, alt: this.logoAlt })), this.title && h("span", { key: '8e2abceb591c0de10ca99d2090fea7a0da792a7b', class: "navbar__title" }, this.title)), items.length > 0 && (h("ul", { key: 'fd26fc64ea3325ddc439a802ab56e69b329020dd', class: "navbar__items" }, items.map(item => (h("li", null, h("button", { class: { 'navbar__item': true, 'navbar__item--active': item.id === this.activeId }, onClick: () => this.clickLoadItem.emit(item), type: "button" }, item.icon && h("dropi-icon", { name: item.icon, iconWidth: "16px", iconHeight: "16px", color: item.id === this.activeId ? 'Primary-Primary-500' : 'Gray-Gray-600' }), h("span", null, item.name?.value || item.label), item.badge != null && String(item.badge) !== '0' && (h("span", { class: "navbar__badge" }, item.badge)))))))), h("div", { key: '51a6532caac773ea7236e95b0aa5ee9ee052db4a', class: "navbar__right" }, h("button", { key: '309b47a8fa074e7d47632a95490c5ba0d2950745', class: "navbar__icon-btn", onClick: () => this.dropiNotificationsClick.emit(), "aria-label": "Notificaciones" }, h("dropi-icon", { key: '2a970ae36fdd4e42d9fbab5d8ebb61a1d14d54c8', name: "Bell", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-600" }), this.notifications > 0 && (h("span", { key: '67412b6d3c7689f78cca15e91a1e8e3ee88152a2', class: "navbar__notif-badge" }, this.notifications > 99 ? '99+' : this.notifications))), h("button", { key: '38cc70fdc1c204b06b62c54a23f4b8c76647fd6b', class: "navbar__user-btn", onClick: () => this.dropiUserClick.emit(), type: "button" }, this.userAvatar
+        return (h("nav", { key: '83ec218a7545739c65d8f1f61197b429b0e7d407', class: "navbar" }, h("div", { key: 'e40038630c33a280f3c231b3dd26643f1c853ea3', class: "navbar__left" }, this.showMenuToggle && (h("button", { key: '0ecbae684b9324c48cd01a6081fd1951b3ba7cf8', class: "navbar__menu-btn", onClick: () => this.dropiMenuToggle.emit(), "aria-label": "Men\u00FA" }, h("dropi-icon", { key: '9edea72a4508a984be2e6785f3f0fa6abe0625c4', name: "Menu", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-700" }))), this.logoUrl && (h("img", { key: 'b8cd9896736d505dad05b8df5f10928d40f250dd', class: "navbar__logo", src: this.logoUrl, alt: this.logoAlt })), this.title && h("span", { key: '4e5dae851fe28f1bc913d7a5d4d42a2413342635', class: "navbar__title" }, this.title)), items.length > 0 && (h("ul", { key: 'b951cc880b8aaf718b85403e3420d73ac976aa60', class: "navbar__items" }, items.map(item => (h("li", null, h("button", { class: { 'navbar__item': true, 'navbar__item--active': item.id === this.activeId }, onClick: () => this.clickLoadItem.emit(item), type: "button" }, item.icon && h("dropi-icon", { name: item.icon, iconWidth: "16px", iconHeight: "16px", color: item.id === this.activeId ? 'Primary-Primary-500' : 'Gray-Gray-600' }), h("span", null, item.name?.value || item.label), item.badge != null && String(item.badge) !== '0' && (h("span", { class: "navbar__badge" }, item.badge)))))))), h("div", { key: '8fe68f93af722982bac11890b106a35a292b3d98', class: "navbar__right" }, h("button", { key: 'a4d0ff928dca2502384cd21e0bc852cacc895a30', class: "navbar__icon-btn", onClick: () => this.dropiNotificationsClick.emit(), "aria-label": "Notificaciones" }, h("dropi-icon", { key: '41007746a151c27059d41db7c4672a2b551882d1', name: "Bell", iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-600" }), this.notifications > 0 && (h("span", { key: 'a0e5c6c9f8e2aaf3e67cc22bdff2ae65472b7cb5', class: "navbar__notif-badge" }, this.notifications > 99 ? '99+' : this.notifications))), h("button", { key: 'e1996f9e1fa922cd03a4e9c5721f5be838a941d3', class: "navbar__user-btn", onClick: () => this.dropiUserClick.emit(), type: "button" }, this.userAvatar
             ? h("img", { class: "navbar__avatar", src: this.userAvatar, alt: this.userName })
-            : h("div", { class: "navbar__avatar-placeholder" }, this.userName ? this.userName[0].toUpperCase() : '?'), this.userName && h("span", { key: '1f2cfe4bddef60d31751c24c3f02cace2f07d6dd', class: "navbar__user-name" }, this.userName), h("dropi-icon", { key: '520aff19c56964eefb3b1f59646c19df779c7e47', name: "Arrow-Down-2", iconWidth: "12px", iconHeight: "12px", color: "Gray-Gray-400" })))));
+            : h("div", { class: "navbar__avatar-placeholder" }, this.userName ? this.userName[0].toUpperCase() : '?'), this.userName && h("span", { key: 'd539c8f456564aa8d3a29e9d2e2ed6250241f411', class: "navbar__user-name" }, this.userName), h("dropi-icon", { key: 'd32cba548201f28a051142e889f6de207a4e67d2', name: "Arrow-Down-2", iconWidth: "12px", iconHeight: "12px", color: "Gray-Gray-400" })))));
     }
 };
 DropiNavbar.style = dropiNavbarCss();

package/dist/dropi-ui/dropi-otp-send-code.entry.js CHANGED Viewed

@@ -2,7 +2,6 @@ import { r as registerInstance, d as createEvent, h } from './index-Cvp2LQOM.js'
 const dropiOtpSendCodeCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.otp{display:flex;flex-direction:column;align-items:center;gap:var(--Size-4, 16px)}.otp__label{font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-600, #475066);text-align:center;margin:0}.otp__inputs{display:flex;gap:var(--Size-4, 16px)}.otp__digit{width:56px;height:56px;border:1.5px solid var(--Gray-Gray-200, #d3d7de);border-radius:var(--Border-2, 8px);text-align:center;font-size:22px;font-weight:var(--font-weight-bold, 700);font-family:inherit;color:var(--Gray-Gray-800, #1f2433);outline:none;transition:border-color 0.15s ease;background:var(--Neutral-White, #ffffff)}.otp__digit:focus{border:2px solid var(--Primary-Primary-500, #f49a3d)}.otp__digit--filled{border:1px solid var(--Success-Success-500, #0abb87);color:var(--Neutral-Neutral-900, #0e111a)}.otp__digit--error{border:1px solid var(--Error-Error-500, #f46a6b)}.otp__error{margin:0;font-size:var(--font-size-xs, 10px);color:var(--Error-Error-500, #f46a6b);text-align:center}.otp__resend{text-align:center}.otp__countdown{font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-400, #858ea6)}.otp__resend-btn{background:none;border:none;padding:0;font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-bold, 700);color:var(--Primary-Primary-500, #f49a3d);cursor:pointer;text-decoration:underline}`;
-const OTP_LENGTH = 6;
 const RESEND_SECONDS = 30;
 const DropiOtpSendCode = class {
     constructor(hostRef) {
@@ -19,19 +18,30 @@ const DropiOtpSendCode = class {
     showLabelContact = false;
     /** Error message to display */
     errorMessage = '';
-    digits = Array(OTP_LENGTH).fill('');
-    digitStates = Array(OTP_LENGTH).fill('idle');
+    /** Number of digits for the OTP */
+    digitsCount = 6;
+    digits = [];
+    digitStates = [];
     countdown = RESEND_SECONDS;
     canResend = false;
     error = false;
     inputs = [];
     timer;
-    /** Emitted when all 6 digits are entered. */
+    handleDigitsCountChange(newValue) {
+        this.digits = Array(newValue).fill('');
+        this.digitStates = Array(newValue).fill('idle');
+        this.inputs = [];
+    }
+    /** Emitted when all digits are entered. */
     codeCompleted;
-    /** Emitted when all 6 digits are entered (alternative event). */
+    /** Emitted when all digits are entered (alternative event). */
     codeAccepted;
     /** Emitted when resend is requested */
     dropiResend;
+    componentWillLoad() {
+        this.digits = Array(this.digitsCount).fill('');
+        this.digitStates = Array(this.digitsCount).fill('idle');
+    }
     componentDidLoad() { this.startCountdown(); }
     disconnectedCallback() { clearInterval(this.timer); }
     startCountdown() {
@@ -48,13 +58,13 @@ const DropiOtpSendCode = class {
     }
     handleInput(e, index) {
         const val = e.target.value.replace(/\D/g, '').slice(-1);
-        const newDigits = [...(this.digits ?? Array(OTP_LENGTH).fill(''))];
+        const newDigits = [...this.digits];
         newDigits[index] = val;
         this.digits = newDigits;
-        const newStates = [...(this.digitStates ?? Array(OTP_LENGTH).fill('idle'))];
+        const newStates = [...this.digitStates];
         newStates[index] = val ? 'filled' : 'idle';
         this.digitStates = newStates;
-        if (val && index < OTP_LENGTH - 1)
+        if (val && index < this.digitsCount - 1)
             this.inputs[index + 1]?.focus();
         if (newDigits.every(d => d !== '')) {
             const finalCode = newDigits.join('');
@@ -63,18 +73,18 @@ const DropiOtpSendCode = class {
         }
     }
     handleKeyDown(e, index) {
-        if (e.key === 'Backspace' && !(this.digits ?? [])[index] && index > 0) {
+        if (e.key === 'Backspace' && !this.digits[index] && index > 0) {
             this.inputs[index - 1]?.focus();
         }
     }
     handlePaste(e) {
         e.preventDefault();
-        const text = e.clipboardData?.getData('text')?.replace(/\D/g, '').slice(0, OTP_LENGTH) || '';
-        const newDigits = Array(OTP_LENGTH).fill('');
+        const text = e.clipboardData?.getData('text')?.replace(/\D/g, '').slice(0, this.digitsCount) || '';
+        const newDigits = Array(this.digitsCount).fill('');
         text.split('').forEach((c, i) => { newDigits[i] = c; });
         this.digits = newDigits;
         this.digitStates = newDigits.map(d => d ? 'filled' : 'idle');
-        this.inputs[Math.min(text.length, OTP_LENGTH - 1)]?.focus();
+        this.inputs[Math.min(text.length, this.digitsCount - 1)]?.focus();
         if (newDigits.every(d => d !== '')) {
             const finalCode = newDigits.join('');
             this.codeCompleted.emit(finalCode);
@@ -83,15 +93,20 @@ const DropiOtpSendCode = class {
     }
     render() {
         const engineLabel = this.engine === 'sms' ? 'SMS' : this.engine === '2fa' ? 'autenticador' : 'correo';
-        return (h("div", { key: '8071fefc81136d40bbbb9e899e93cf482e824ccd', class: "otp" }, this.showLabelContact && (h("p", { key: '811bc73073e180fe9094e99596c222870ed6c01f', class: "otp__label" }, "Ingresa el c\u00F3digo enviado a tu ", engineLabel, this.labelContact && h("strong", { key: '3fe866ea995638f1b003330ee70c9f21e4c700a0' }, " ", this.labelContact))), h("div", { key: '17701568ff66f89f89fce0f10fdda45840fffd5f', class: "otp__inputs", onPaste: (e) => this.handlePaste(e) }, Array.from({ length: OTP_LENGTH }, (_, i) => (h("input", { key: i, ref: (el) => {
+        return (h("div", { key: 'c9c6c3387cec2371049c547d87742563268bf28d', class: "otp" }, this.showLabelContact && (h("p", { key: 'c3f36c62d7502eff8f86ef8202c3dfc65d846ba1', class: "otp__label" }, "Ingresa el c\u00F3digo enviado a tu ", engineLabel, this.labelContact && h("strong", { key: '25c05d8f0773bf6f2af83f6154ac76638499e4d7' }, " ", this.labelContact))), h("div", { key: '3ca2687723735b3eb6ada997f622a4a50c2d7ee9', class: "otp__inputs", onPaste: (e) => this.handlePaste(e) }, this.digits.map((_, i) => (h("input", { key: i, ref: (el) => {
                 if (el)
                     this.inputs[i] = el;
             }, class: {
                 'otp__digit': true,
-                'otp__digit--filled': (this.digitStates ?? [])[i] === 'filled',
+                'otp__digit--filled': this.digitStates[i] === 'filled',
                 'otp__digit--error': this.error,
-            }, type: "text", inputMode: "numeric", maxLength: 1, value: (this.digits ?? [])[i] ?? '', onInput: (e) => this.handleInput(e, i), onKeyDown: (e) => this.handleKeyDown(e, i) })))), this.error && this.errorMessage && (h("p", { key: 'ab3021f6227105d3bb2a244e4b9b08c8dca51dec', class: "otp__error" }, this.errorMessage)), h("div", { key: '6915de3762c811ad365336e8dc2b129c20abe3a6', class: "otp__resend" }, this.canResend ? (h("button", { class: "otp__resend-btn", onClick: () => { this.startCountdown(); this.dropiResend.emit(); } }, "Reenviar c\u00F3digo")) : (h("span", { class: "otp__countdown" }, "Reenviar en ", this.countdown, "s")))));
+            }, type: "text", inputMode: "numeric", maxLength: 1, value: this.digits[i] ?? '', onInput: (e) => this.handleInput(e, i), onKeyDown: (e) => this.handleKeyDown(e, i) })))), this.error && this.errorMessage && (h("p", { key: 'ddcdd5dacc533b73e6353c2670f762168c2803d3', class: "otp__error" }, this.errorMessage)), h("div", { key: 'a21650c43d7a62f9e187bd9f4eb307d275ff37be', class: "otp__resend" }, this.canResend ? (h("button", { class: "otp__resend-btn", onClick: () => { this.startCountdown(); this.dropiResend.emit(); } }, "Reenviar c\u00F3digo")) : (h("span", { class: "otp__countdown" }, "Reenviar en ", this.countdown, "s")))));
     }
+    static get watchers() { return {
+        "digitsCount": [{
+                "handleDigitsCountChange": 0
+            }]
+    }; }
 };
 DropiOtpSendCode.style = dropiOtpSendCodeCss();