@dropi/ui 0.1.37 → 0.1.42

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

@@ -0,0 +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

@@ -0,0 +1,62 @@
+import { r as registerInstance, d as createEvent, h } from './index-Cvp2LQOM.js';
+
+const dropiLanguagesSelectorCss = () => `:host{display:inline-block;position:relative}*,*::before,*::after{box-sizing:border-box}.custom-dropdown{position:relative;cursor:pointer;user-select:none}.custom-dropdown.open dropi-icon{transform:rotate(180deg)}.selected-option{display:flex;height:38px;padding:var(--Size-2, 8px) var(--Size-3, 12px);align-items:center;gap:var(--Size-2, 8px);border-radius:4px;border:1px solid var(--Gray-Gray-200, #c3c9d9);background:var(--Neutral-White, #ffffff);font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-600, #475066)}.dropdown-options{position:absolute;top:100%;left:0;right:0;background:white;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:6px;margin-top:4px;z-index:1000;overflow-y:auto;box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);padding:0;list-style:none;height:0;opacity:0;visibility:hidden;transition:height 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;max-height:0}.dropdown-options.dropdown-open{max-height:300px;height:auto;opacity:1;visibility:visible}.dropdown-options li{padding:8px 12px;display:flex;align-items:center;gap:8px;cursor:pointer;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-600, #475066)}.dropdown-options li:hover,.dropdown-options li.active{background:var(--Gray-Gray-50, #f7f8fa)}@media screen and (max-width: 720px){.selected-option span,.dropdown-options li span{display:none}}`;
+
+const DropiLanguagesSelector = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dropiLanguageChange = createEvent(this, "dropiLanguageChange", 7);
+    }
+    /** Language options (array or JSON string) */
+    languages = [];
+    /** Currently selected language (LanguageOption or JSON string) */
+    selectedLang = null;
+    dropiLanguageChange;
+    isOpen = false;
+    parsedLanguages = [];
+    currentLang = null;
+    languagesChanged(val) {
+        if (val == null) {
+            this.parsedLanguages = [];
+            return;
+        }
+        this.parsedLanguages = typeof val === 'string' ? JSON.parse(val) : (val ?? []);
+        if (!this.currentLang && this.parsedLanguages.length > 0) {
+            this.currentLang = this.parsedLanguages[0];
+        }
+    }
+    selectedLangChanged(val) {
+        if (!val)
+            return;
+        this.currentLang = typeof val === 'string' ? JSON.parse(val) : val;
+    }
+    componentWillLoad() {
+        this.languagesChanged(this.languages);
+        if (this.selectedLang)
+            this.selectedLangChanged(this.selectedLang);
+    }
+    select(lang) {
+        this.currentLang = lang;
+        this.isOpen = false;
+        this.dropiLanguageChange.emit(lang);
+    }
+    render() {
+        if (!this.currentLang)
+            return null;
+        return (h("div", { class: `custom-dropdown${this.isOpen ? ' open' : ''}` }, h("div", { class: "selected-option", onClick: () => { this.isOpen = !this.isOpen; } }, h("dropi-country-flags", { country: this.currentLang.flag, "flag-style": "rectangle", width: "20", height: "15" }), h("span", { class: "Body-S-Regular" }, this.currentLang.label), h("dropi-icon", { name: "Caret-down", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-500" })), h("ul", { class: `dropdown-options${this.isOpen ? ' dropdown-open' : ''}` }, this.parsedLanguages.map(lang => (h("li", { key: lang.code, class: lang.code === this.currentLang?.code ? 'active' : '', onClick: () => this.select(lang) }, h("dropi-country-flags", { country: lang.flag, "flag-style": "rectangle", width: "20", height: "15" }), h("span", { class: "Body-S-Regular" }, lang.label)))))));
+    }
+    static get watchers() { return {
+        "languages": [{
+                "languagesChanged": 0
+            }],
+        "selectedLang": [{
+                "selectedLangChanged": 0
+            }]
+    }; }
+};
+DropiLanguagesSelector.style = dropiLanguagesSelectorCss();
+
+export { DropiLanguagesSelector as dropi_languages_selector };
+//# sourceMappingURL=dropi-languages-selector.entry.esm.js.map
+
+//# sourceMappingURL=dropi-languages-selector.entry.js.map

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

@@ -0,0 +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

@@ -0,0 +1,38 @@
+import { r as registerInstance, a as getElement, h } from './index-Cvp2LQOM.js';
+
+const dropiLogoCss = () => `:host{display:inline-block}.dropi-logo{margin:0;padding:0;display:flex;align-items:center;justify-content:center}.dropi-logo img{display:block;object-fit:contain}.dropi-logo--large img{width:256px;height:84px}.dropi-logo--small img{width:86px;height:81px}`;
+
+const FALLBACK_SVG = `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgNDAiPjx0ZXh0IHk9IjMwIiBmb250LXNpemU9IjI0IiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZmlsbD0iIzg1OGVhNiI+ZHJvcGk8L3RleHQ+PC9zdmc+`;
+const DropiLogo = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    /** Logo image URL */
+    urlLogo = '';
+    /** Size variant */
+    size = 'large';
+    /** Theme (reserved for future use) */
+    theme = 'light';
+    componentWillLoad() {
+        if (!this.urlLogo) {
+            this.urlLogo =
+                this.el.getAttribute('urlLogo') ||
+                    this.el.getAttribute('url-logo') ||
+                    this.el.getAttribute('urllogo') ||
+                    '';
+        }
+    }
+    handleError(e) {
+        e.target.src = FALLBACK_SVG;
+    }
+    render() {
+        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();
+
+export { DropiLogo as dropi_logo };
+//# sourceMappingURL=dropi-logo.entry.esm.js.map
+
+//# sourceMappingURL=dropi-logo.entry.js.map

package/dist/dropi-ui/dropi-logo.entry.js.map

@@ -0,0 +1 @@
+{"file":"dropi-logo.entry.js","mappings":";;AAAA,MAAM,YAAY,GAAG,MAAM,CAAC,+PAA+P,CAAC;;ACE5R,MAAM,YAAY,GAAG,CAAA,8NAAA,CAAgO;MAWxO,SAAS,GAAA,MAAA;;;;;;IAIZ,OAAO,GAAW,EAAE;;IAEpB,IAAI,GAAsB,OAAO;;IAEjC,KAAK,GAAqB,OAAO;IAEzC,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;AACjB,YAAA,IAAI,CAAC,OAAO;AACV,gBAAA,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,SAAS,CAAC;AAC/B,oBAAA,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC;AAChC,oBAAA,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,SAAS,CAAC;AAC/B,oBAAA,EAAE;;;AAIA,IAAA,WAAW,CAAC,CAAQ,EAAA;AACzB,QAAA,CAAC,CAAC,MAA2B,CAAC,GAAG,GAAG,YAAY;;IAGnD,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAA,YAAA,EAAe,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,IAAI,EAAE,EAAA,EACvE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,GAAG,EAAE,IAAI,CAAC,OAAO,IAAI,YAAY,EACjC,GAAG,EAAC,YAAY,EAChB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAA,CACnC,CACK;;;;;;;","names":[],"sources":["src/components/dropi-logo/dropi-logo.css?tag=dropi-logo&encapsulation=shadow","src/components/dropi-logo/dropi-logo.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.dropi-logo {\n  margin: 0;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.dropi-logo img {\n  display: block;\n  object-fit: contain;\n}\n\n.dropi-logo--large img {\n  width: 256px;\n  height: 84px;\n}\n\n.dropi-logo--small img {\n  width: 86px;\n  height: 81px;\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\n\nconst FALLBACK_SVG = `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgNDAiPjx0ZXh0IHk9IjMwIiBmb250LXNpemU9IjI0IiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZmlsbD0iIzg1OGVhNiI+ZHJvcGk8L3RleHQ+PC9zdmc+`;\n\n/**\n * @component dropi-logo\n * Displays the Dropi brand logo with size variants.\n */\n@Component({\n  tag: 'dropi-logo',\n  styleUrl: 'dropi-logo.css',\n  shadow: true,\n})\nexport class DropiLogo {\n  @Element() el: HTMLElement;\n\n  /** Logo image URL */\n  @Prop() urlLogo: string = '';\n  /** Size variant */\n  @Prop() size: 'small' | 'large' = 'large';\n  /** Theme (reserved for future use) */\n  @Prop() theme: 'dark' | 'light' = 'light';\n\n  componentWillLoad() {\n    if (!this.urlLogo) {\n      this.urlLogo = \n        this.el.getAttribute('urlLogo') || \n        this.el.getAttribute('url-logo') || \n        this.el.getAttribute('urllogo') || \n        '';\n    }\n  }\n\n  private handleError(e: Event) {\n    (e.target as HTMLImageElement).src = FALLBACK_SVG;\n  }\n\n  render() {\n    return (\n      <figure class={{ 'dropi-logo': true, [`dropi-logo--${this.size}`]: true }}>\n        <img\n          src={this.urlLogo || FALLBACK_SVG}\n          alt=\"Dropi logo\"\n          onError={(e) => this.handleError(e)}\n        />\n      </figure>\n    );\n  }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-lottie-loader.entry.js

@@ -0,0 +1,28 @@
+import { r as registerInstance, h } from './index-Cvp2LQOM.js';
+
+const dropiLottieLoaderCss = () => `:host{display:block}.loader-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(255, 255, 255, 0.85);z-index:9999}.loader-container{display:flex;flex-direction:column;align-items:center;gap:var(--Size-4, 16px)}.lottie-animation{display:flex;align-items:center;justify-content:center;width:300px;height:300px}.lottie-animation lottie-player{display:block;width:300px !important;height:300px !important}.loader-text{display:flex;flex-direction:column;align-items:center;gap:var(--Size-2, 8px);text-align:center}.loader-title{margin:0;font-size:var(--font-size-m, 14px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-700, #32394d)}.loader-message{margin:0;font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-regular, 400);color:var(--Gray-Gray-500, #69738c)}`;
+
+const DropiLottieLoader = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Show or hide the loader */
+    visible = true;
+    /** Path to the Lottie JSON animation file */
+    loadingAnimation = '/assets/lottie-files/loading.json';
+    /** Title shown below the animation */
+    title = 'Cargando...';
+    /** Descriptive message below the title */
+    message = 'Por favor, espere un momento';
+    render() {
+        if (!this.visible)
+            return null;
+        return (h("div", { class: "loader-overlay" }, h("div", { class: "loader-container" }, h("div", { class: "lottie-animation" }, h("lottie-player", { src: this.loadingAnimation, background: "transparent", speed: "1", style: { width: '300px', height: '300px' }, loop: true, autoplay: true })), (this.title || this.message) && (h("div", { class: "loader-text" }, this.title && h("h3", { class: "loader-title" }, this.title), this.message && h("p", { class: "loader-message" }, this.message))))));
+    }
+};
+DropiLottieLoader.style = dropiLottieLoaderCss();
+
+export { DropiLottieLoader as dropi_lottie_loader };
+//# sourceMappingURL=dropi-lottie-loader.entry.esm.js.map
+
+//# sourceMappingURL=dropi-lottie-loader.entry.js.map

package/dist/dropi-ui/dropi-lottie-loader.entry.js.map

@@ -0,0 +1 @@
+{"file":"dropi-lottie-loader.entry.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,MAAM,CAAC,k0BAAk0B,CAAC;;MCW11B,iBAAiB,GAAA,MAAA;;;;;IAEpB,OAAO,GAAY,IAAI;;IAEvB,gBAAgB,GAAW,mCAAmC;;IAE9D,KAAK,GAAW,aAAa;;IAE7B,OAAO,GAAW,8BAA8B;IAExD,MAAM,GAAA;QACJ,IAAI,CAAC,IAAI,CAAC,OAAO;AAAE,YAAA,OAAO,IAAI;AAE9B,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,gBAAgB,EAAA,EACzB,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAA,CAAA,eAAA,EAAA,EACE,GAAG,EAAE,IAAI,CAAC,gBAAgB,EAC1B,UAAU,EAAC,aAAa,EACxB,KAAK,EAAC,GAAG,EACT,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,EAC1C,IAAI,EAAA,IAAA,EACJ,QAAQ,SACR,CACE,EACL,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,OAAO,MAC1B,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,aAAa,EAAA,EACrB,IAAI,CAAC,KAAK,IAAI,CAAA,CAAA,IAAA,EAAA,EAAI,KAAK,EAAC,cAAc,EAAA,EAAE,IAAI,CAAC,KAAK,CAAM,EACxD,IAAI,CAAC,OAAO,IAAI,CAAA,CAAA,GAAA,EAAA,EAAG,KAAK,EAAC,gBAAgB,EAAA,EAAE,IAAI,CAAC,OAAO,CAAK,CACzD,CACP,CACG,CACF;;;;;;;","names":[],"sources":["src/components/dropi-lottie-loader/dropi-lottie-loader.css?tag=dropi-lottie-loader&encapsulation=shadow","src/components/dropi-lottie-loader/dropi-lottie-loader.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.loader-overlay {\n  position: fixed;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(255, 255, 255, 0.85);\n  z-index: 9999;\n}\n\n.loader-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--Size-4, 16px);\n}\n\n.lottie-animation {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 300px;\n  height: 300px;\n}\n\n.lottie-animation lottie-player {\n  display: block;\n  width: 300px !important;\n  height: 300px !important;\n}\n\n.loader-text {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--Size-2, 8px);\n  text-align: center;\n}\n\n.loader-title {\n  margin: 0;\n  font-size: var(--font-size-m, 14px);\n  font-weight: var(--font-weight-bold, 700);\n  color: var(--Gray-Gray-700, #32394d);\n}\n\n.loader-message {\n  margin: 0;\n  font-size: var(--font-size-s, 12px);\n  font-weight: var(--font-weight-regular, 400);\n  color: var(--Gray-Gray-500, #69738c);\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n/**\n * @component dropi-lottie-loader\n * Full-screen or inline loading overlay with a Lottie animation.\n */\n@Component({\n  tag: 'dropi-lottie-loader',\n  styleUrl: 'dropi-lottie-loader.css',\n  shadow: true,\n})\nexport class DropiLottieLoader {\n  /** Show or hide the loader */\n  @Prop() visible: boolean = true;\n  /** Path to the Lottie JSON animation file */\n  @Prop() loadingAnimation: string = '/assets/lottie-files/loading.json';\n  /** Title shown below the animation */\n  @Prop() title: string = 'Cargando...';\n  /** Descriptive message below the title */\n  @Prop() message: string = 'Por favor, espere un momento';\n\n  render() {\n    if (!this.visible) return null;\n\n    return (\n      <div class=\"loader-overlay\">\n        <div class=\"loader-container\">\n          <div class=\"lottie-animation\">\n            <lottie-player\n              src={this.loadingAnimation}\n              background=\"transparent\"\n              speed=\"1\"\n              style={{ width: '300px', height: '300px' }}\n              loop\n              autoplay\n            />\n          </div>\n          {(this.title || this.message) && (\n            <div class=\"loader-text\">\n              {this.title && <h3 class=\"loader-title\">{this.title}</h3>}\n              {this.message && <p class=\"loader-message\">{this.message}</p>}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-media-player.entry.js

@@ -0,0 +1,193 @@
+import { r as registerInstance, d as createEvent, a as getElement, h } from './index-Cvp2LQOM.js';
+
+const dropiMediaPlayerCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.dropi-media-player{position:relative;width:100%;max-width:335px;height:auto;aspect-ratio:335 / 567;background-color:var(--Neutral-Black);border-radius:var(--Border-2, 8px);overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:pointer}.dropi-media-player--mobile-vertical{max-width:335px;aspect-ratio:335 / 567}.dropi-media-player--mobile-compact{max-width:335px;aspect-ratio:335 / 337}.dropi-media-player--desktop{max-width:587px;aspect-ratio:587 / 567}.dropi-media-player__video{width:100%;height:100%;object-fit:cover}.dropi-media-player__center-play{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);border-radius:400px;background-color:rgba(14, 17, 26, 0.6);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;transition:opacity 0.3s ease;pointer-events:auto}.dropi-media-player__center-play--hidden{opacity:0;pointer-events:none}.dropi-media-player__controls-bar{position:absolute;bottom:0;left:0;width:100%;height:72px;padding:24px;display:flex;flex-direction:row;align-items:center;gap:10px;background:linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000);transition:opacity 0.3s ease;box-sizing:border-box}.dropi-media-player__controls-bar--hidden{opacity:0;pointer-events:none}.dropi-media-player__timestamp{font-family:'Inter', sans-serif;font-size:var(--font-size-xs, 12px);font-weight:var(--font-weight-medium, 500);color:var(--Neutral-White);white-space:nowrap;flex-shrink:0}.dropi-media-player__progress{flex:1;padding:6px 0;cursor:pointer;position:relative}.dropi-media-player__progress-track{position:relative;width:100%;height:5px;border-radius:var(--Border-2, 8px);background-color:var(--Gray-Gray-700, #32394d)}.dropi-media-player__progress-fill{height:100%;background-color:var(--Neutral-White);border-radius:var(--Border-2, 8px);will-change:width}.dropi-media-player__progress-thumb{position:absolute;top:50%;transform:translate(-50%, -50%);width:12px;height:12px;border-radius:50%;background-color:var(--Neutral-White);pointer-events:none;will-change:left}.dropi-media-player__actions{display:flex;align-items:center;gap:10px;flex-shrink:0}.dropi-media-player__btn{-webkit-appearance:none;appearance:none;background:transparent;border:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--Neutral-White);transition:opacity 0.15s ease}.dropi-media-player__btn:hover{opacity:0.8}.dropi-media-player__btn--speed{font-family:'Inter', sans-serif;font-size:var(--font-size-sm, 14px);font-weight:var(--font-weight-medium, 500);color:var(--Neutral-White);min-width:20px}.dropi-media-player__speed-control{position:relative;display:flex;align-items:center}.dropi-media-player__speed-menu{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--Gray-Gray-800, #1f2433);border-radius:var(--Border-2, 8px);padding:6px 0;min-width:44px;display:flex;flex-direction:column;z-index:20}.dropi-media-player__speed-option{-webkit-appearance:none;appearance:none;background:transparent;border:none;padding:6px 10px;font-family:'Inter', sans-serif;font-size:var(--font-size-s);font-weight:var(--font-weight-medium);color:var(--Neutral-White);cursor:pointer;text-align:center;white-space:nowrap;transition:opacity 0.15s ease}.dropi-media-player__speed-option--active{color:var(--Primary-Primary-500, #f49a3d)}.dropi-media-player__speed-option:hover{opacity:0.8}.dropi-media-player__volume-control{position:relative;display:flex;align-items:center}.dropi-media-player__volume-popup{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);width:32px;height:108px;display:flex;align-items:center;justify-content:center;background:var(--Gray-Gray-800, #1f2433);border-radius:var(--Border-2, 8px);overflow:visible;z-index:20}.dropi-media-player__volume-slider{-webkit-appearance:none;appearance:none;width:97px;height:8px;transform:rotate(-90deg);border-radius:4px;cursor:pointer;outline:none;flex-shrink:0}.dropi-media-player__volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--Neutral-White);cursor:pointer}.dropi-media-player__volume-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--Neutral-White);border:none;cursor:pointer}.dropi-media-player__volume-slider::-webkit-slider-runnable-track{border-radius:4px}.dropi-media-player__volume-slider::-moz-range-track{height:8px;background:var(--Gray-Gray-700, #32394d);border-radius:4px}.dropi-media-player__blur-bg{display:none;position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(21px);transform:scale(1.15);z-index:0}.dropi-media-player__blur-overlay{display:none;position:absolute;inset:0;background-color:rgba(0, 0, 0, 0.7);z-index:0}.dropi-media-player.is-fullscreen,.dropi-media-player:fullscreen{max-width:none;aspect-ratio:auto;width:100vw;height:100vh;border-radius:0}.dropi-media-player.is-fullscreen .dropi-media-player__blur-bg,.dropi-media-player:fullscreen .dropi-media-player__blur-bg,.dropi-media-player.is-fullscreen .dropi-media-player__blur-overlay,.dropi-media-player:fullscreen .dropi-media-player__blur-overlay{display:block}.dropi-media-player.is-fullscreen .dropi-media-player__video,.dropi-media-player:fullscreen .dropi-media-player__video{object-fit:contain;position:relative;z-index:1}.dropi-media-player.is-fullscreen .dropi-media-player__center-play,.dropi-media-player:fullscreen .dropi-media-player__center-play,.dropi-media-player.is-fullscreen .dropi-media-player__controls-bar,.dropi-media-player:fullscreen .dropi-media-player__controls-bar{z-index:2}`;
+
+const DropiMediaPlayer = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dropiPlay = createEvent(this, "dropiPlay", 7);
+        this.dropiEnded = createEvent(this, "dropiEnded", 7);
+    }
+    get el() { return getElement(this); }
+    src = '';
+    mediaType = 'video';
+    poster = '';
+    autoplay = false;
+    loop = false;
+    initialVolume = 1;
+    /** Format defines aspect ratio scales like Angular original */
+    format = 'mobile-vertical';
+    playing = false;
+    currentTimeStr = '00:00';
+    durationStr = '00:00';
+    duration = 0;
+    volume = 1;
+    muted = false;
+    showControls = true;
+    isFullscreen = false;
+    progress = 0;
+    speed = 1;
+    showSpeedMenu = false;
+    showVolumeSlider = false;
+    mediaEl;
+    controlsTimeout;
+    speeds = [1, 2, 3];
+    dropiPlay;
+    dropiEnded;
+    componentDidLoad() {
+        if (this.mediaEl) {
+            const vol = this.initialVolume ?? 1;
+            if (isFinite(vol)) {
+                this.mediaEl.volume = vol;
+                this.muted = vol === 0;
+                this.volume = vol;
+            }
+        }
+        document.addEventListener('fullscreenchange', this.handleFullscreenChange);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('fullscreenchange', this.handleFullscreenChange);
+        clearTimeout(this.controlsTimeout);
+    }
+    handleFullscreenChange = () => {
+        this.isFullscreen = !!document.fullscreenElement;
+    };
+    togglePlay() {
+        if (!this.mediaEl)
+            return;
+        if (this.playing) {
+            this.mediaEl.pause();
+        }
+        else {
+            const promise = this.mediaEl.play();
+            if (promise !== undefined) {
+                promise.catch((e) => { console.warn('Play error:', e); this.playing = false; });
+            }
+        }
+    }
+    handleTimeUpdate() {
+        if (!this.duration)
+            return;
+        this.progress = (this.mediaEl.currentTime / this.duration) * 100;
+        this.currentTimeStr = this.formatTime(this.mediaEl.currentTime);
+    }
+    handleLoadedMetadata() {
+        this.duration = this.mediaEl.duration;
+        this.durationStr = this.formatTime(this.duration);
+    }
+    handleSeek(e) {
+        if (!this.duration)
+            return;
+        const bar = e.currentTarget;
+        const rect = bar.getBoundingClientRect();
+        const pos = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+        this.mediaEl.currentTime = pos * this.duration;
+    }
+    handleVolume(e) {
+        const val = parseFloat(e.target.value);
+        this.mediaEl.volume = val;
+        this.volume = val;
+        this.muted = val === 0;
+        this.mediaEl.muted = this.muted;
+    }
+    toggleSpeedMenu() {
+        this.showSpeedMenu = !this.showSpeedMenu;
+        this.showVolumeSlider = false;
+    }
+    selectSpeed(s) {
+        this.speed = s;
+        if (this.mediaEl)
+            this.mediaEl.playbackRate = s;
+        this.showSpeedMenu = false;
+    }
+    toggleVolume() {
+        this.showVolumeSlider = !this.showVolumeSlider;
+        this.showSpeedMenu = false;
+    }
+    toggleFullscreen() {
+        if (!this.isFullscreen) {
+            this.el.shadowRoot.host.requestFullscreen?.();
+        }
+        else {
+            document.exitFullscreen?.();
+        }
+    }
+    onMouseMove() {
+        this.showControls = true;
+        if (this.playing)
+            this.startHideControlsTimer();
+    }
+    onMouseLeave() {
+        if (this.playing) {
+            this.showControls = false;
+            this.showVolumeSlider = false;
+            this.showSpeedMenu = false;
+        }
+    }
+    startHideControlsTimer() {
+        clearTimeout(this.controlsTimeout);
+        this.controlsTimeout = setTimeout(() => {
+            if (this.playing) {
+                this.showControls = false;
+                this.showVolumeSlider = false;
+                this.showSpeedMenu = false;
+            }
+        }, 5000);
+    }
+    handleDocClick(e) {
+        if (!this.el.contains(e.target)) {
+            this.showVolumeSlider = false;
+            this.showSpeedMenu = false;
+        }
+    }
+    formatTime(secs) {
+        if (isNaN(secs))
+            return '00:00';
+        const m = Math.floor(secs / 60);
+        const s = Math.floor(secs % 60);
+        return `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
+    }
+    get playButtonSize() {
+        if (this.format === 'desktop')
+            return 80;
+        if (this.format === 'mobile-compact')
+            return 40;
+        return 60;
+    }
+    get playIconSize() {
+        if (this.format === 'desktop')
+            return 32;
+        if (this.format === 'mobile-compact')
+            return 17;
+        return 26;
+    }
+    get volumeIcon() {
+        return (this.muted || this.volume === 0) ? 'Volumen-silent' : 'Volumen';
+    }
+    get volumeGradient() {
+        const pct = (this.muted ? 0 : this.volume) * 100;
+        return `linear-gradient(to right, #ffffff ${pct}%, #32394d ${pct}%)`;
+    }
+    render() {
+        if (this.mediaType === 'audio') {
+            return (h("audio", { src: this.src, autoplay: this.autoplay, loop: this.loop, controls: true, style: { width: '100%' } }));
+        }
+        return (h("div", { class: {
+                'dropi-media-player': true,
+                [`dropi-media-player--${this.format}`]: true,
+                'is-fullscreen': this.isFullscreen
+            }, onMouseMove: () => this.onMouseMove(), onMouseLeave: () => this.onMouseLeave() }, h("div", { class: "dropi-media-player__blur-bg", style: { backgroundImage: `url(${this.poster})` } }), h("div", { class: "dropi-media-player__blur-overlay" }), h("video", { class: "dropi-media-player__video", ref: (el) => this.mediaEl = el, src: this.src, poster: this.poster, onClick: () => this.togglePlay(), onPlay: () => { this.playing = true; this.startHideControlsTimer(); this.dropiPlay.emit(true); }, onPause: () => { this.playing = false; this.showControls = true; clearTimeout(this.controlsTimeout); this.dropiPlay.emit(false); }, onEnded: () => { this.playing = false; this.showControls = true; this.dropiEnded.emit(); }, onTimeUpdate: () => this.handleTimeUpdate(), onLoadedMetaData: () => this.handleLoadedMetadata() }), h("div", { class: {
+                'dropi-media-player__center-play': true,
+                'dropi-media-player__center-play--hidden': this.playing && !this.showControls
+            }, style: { width: `${this.playButtonSize}px`, height: `${this.playButtonSize}px` }, onClick: (e) => { e.stopPropagation(); this.togglePlay(); } }, this.playing ? (h("svg", { width: `${this.playIconSize}px`, height: `${this.playIconSize}px`, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", style: { color: '#ffffff' } }, h("rect", { x: "6.5", y: "4", width: "3.5", height: "16", rx: "1.75" }), h("rect", { x: "14", y: "4", width: "3.5", height: "16", rx: "1.75" }))) : (h("dropi-icon", { name: "Play", color: "Neutral-White", iconWidth: `${this.playIconSize}px`, iconHeight: `${this.playIconSize}px` }))), h("div", { class: {
+                'dropi-media-player__controls-bar': true,
+                'dropi-media-player__controls-bar--hidden': !this.showControls
+            }, onClick: (e) => e.stopPropagation() }, h("span", { class: "dropi-media-player__timestamp" }, this.currentTimeStr, " / ", this.durationStr), h("div", { class: "dropi-media-player__progress", onClick: (e) => { e.stopPropagation(); this.handleSeek(e); } }, h("div", { class: "dropi-media-player__progress-track" }, h("div", { class: "dropi-media-player__progress-fill", style: { width: `${this.progress}%` } }), h("div", { class: "dropi-media-player__progress-thumb", style: { left: `${this.progress}%` } }))), h("div", { class: "dropi-media-player__actions" }, h("div", { class: "dropi-media-player__speed-control", onClick: (e) => e.stopPropagation() }, this.showSpeedMenu && (h("div", { class: "dropi-media-player__speed-menu" }, this.speeds.map(s => (h("button", { type: "button", class: { 'dropi-media-player__speed-option': true, 'dropi-media-player__speed-option--active': this.speed === s }, onClick: (e) => { e.stopPropagation(); this.selectSpeed(s); } }, "x", s))))), h("button", { class: "dropi-media-player__btn dropi-media-player__btn--speed", onClick: (e) => { e.stopPropagation(); this.toggleSpeedMenu(); }, type: "button" }, "x", this.speed)), h("button", { class: "dropi-media-player__btn", onClick: (e) => { e.stopPropagation(); this.toggleFullscreen(); }, type: "button" }, h("dropi-icon", { name: this.isFullscreen ? 'Compress' : 'Expand', color: "Neutral-White", iconWidth: "20px", iconHeight: "20px" })), h("div", { class: "dropi-media-player__volume-control", onClick: (e) => e.stopPropagation() }, this.showVolumeSlider && (h("div", { class: "dropi-media-player__volume-popup" }, h("input", { type: "range", class: "dropi-media-player__volume-slider", min: "0", max: "1", step: "0.01", value: this.muted ? 0 : this.volume, style: { background: this.volumeGradient }, onInput: (e) => this.handleVolume(e) }))), h("button", { class: "dropi-media-player__btn", onClick: (e) => { e.stopPropagation(); this.toggleVolume(); }, type: "button" }, h("dropi-icon", { name: this.volumeIcon, color: "Neutral-White", iconWidth: "20px", iconHeight: "20px" })))))));
+    }
+};
+DropiMediaPlayer.style = dropiMediaPlayerCss();
+
+export { DropiMediaPlayer as dropi_media_player };
+//# sourceMappingURL=dropi-media-player.entry.esm.js.map
+
+//# sourceMappingURL=dropi-media-player.entry.js.map

package/dist/dropi-ui/dropi-media-player.entry.js.map

@@ -0,0 +1 @@
+{"file":"dropi-media-player.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-media-player/dropi-media-player.css?tag=dropi-media-player&encapsulation=shadow","src/components/dropi-media-player/dropi-media-player.tsx"],"sourcesContent":[":host { \n  display: block; \n  width: 100%; \n}\n\n*, *::before, *::after { box-sizing: border-box; }\n\n.dropi-media-player {\n  position: relative;\n  width: 100%;\n  max-width: 335px;\n  height: auto;\n  aspect-ratio: 335 / 567;\n  background-color: var(--Neutral-Black);\n  border-radius: var(--Border-2, 8px);\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n}\n\n/* ── Formatos ────────────────────────────────────────────────── */\n.dropi-media-player--mobile-vertical {\n  max-width: 335px;\n  aspect-ratio: 335 / 567;\n}\n\n.dropi-media-player--mobile-compact {\n  max-width: 335px;\n  aspect-ratio: 335 / 337;\n}\n\n.dropi-media-player--desktop {\n  max-width: 587px;\n  aspect-ratio: 587 / 567;\n}\n\n.dropi-media-player__video {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n/* Botón play/pause central */\n.dropi-media-player__center-play {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  border-radius: 400px;\n  background-color: rgba(14, 17, 26, 0.6);\n  backdrop-filter: blur(2px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: opacity 0.3s ease;\n  pointer-events: auto;\n}\n\n.dropi-media-player__center-play--hidden {\n  opacity: 0;\n  pointer-events: none;\n}\n\n/* Barra inferior de controles */\n.dropi-media-player__controls-bar {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 72px;\n  padding: 24px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 10px;\n  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000);\n  transition: opacity 0.3s ease;\n  box-sizing: border-box;\n}\n\n.dropi-media-player__controls-bar--hidden {\n  opacity: 0;\n  pointer-events: none;\n}\n\n.dropi-media-player__timestamp {\n  font-family: 'Inter', sans-serif;\n  font-size: var(--font-size-xs, 12px);\n  font-weight: var(--font-weight-medium, 500);\n  color: var(--Neutral-White);\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n\n/* Barra de progreso */\n.dropi-media-player__progress {\n  flex: 1;\n  padding: 6px 0;\n  cursor: pointer;\n  position: relative;\n}\n\n.dropi-media-player__progress-track {\n  position: relative;\n  width: 100%;\n  height: 5px;\n  border-radius: var(--Border-2, 8px);\n  background-color: var(--Gray-Gray-700, #32394d);\n}\n\n.dropi-media-player__progress-fill {\n  height: 100%;\n  background-color: var(--Neutral-White);\n  border-radius: var(--Border-2, 8px);\n  will-change: width;\n}\n\n.dropi-media-player__progress-thumb {\n  position: absolute;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  width: 12px;\n  height: 12px;\n  border-radius: 50%;\n  background-color: var(--Neutral-White);\n  pointer-events: none;\n  will-change: left;\n}\n\n/* Grupo de botones de la derecha */\n.dropi-media-player__actions {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  flex-shrink: 0;\n}\n\n.dropi-media-player__btn {\n  -webkit-appearance: none;\n  appearance: none;\n  background: transparent;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--Neutral-White);\n  transition: opacity 0.15s ease;\n}\n.dropi-media-player__btn:hover {\n  opacity: 0.8;\n}\n\n.dropi-media-player__btn--speed {\n  font-family: 'Inter', sans-serif;\n  font-size: var(--font-size-sm, 14px);\n  font-weight: var(--font-weight-medium, 500);\n  color: var(--Neutral-White);\n  min-width: 20px;\n}\n\n/* Control de velocidad */\n.dropi-media-player__speed-control {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.dropi-media-player__speed-menu {\n  position: absolute;\n  bottom: calc(100% + 8px);\n  left: 50%;\n  transform: translateX(-50%);\n  background: var(--Gray-Gray-800, #1f2433);\n  border-radius: var(--Border-2, 8px);\n  padding: 6px 0;\n  min-width: 44px;\n  display: flex;\n  flex-direction: column;\n  z-index: 20;\n}\n\n.dropi-media-player__speed-option {\n  -webkit-appearance: none;\n  appearance: none;\n  background: transparent;\n  border: none;\n  padding: 6px 10px;\n  font-family: 'Inter', sans-serif;\n  font-size: var(--font-size-s);\n  font-weight: var(--font-weight-medium);\n  color: var(--Neutral-White);\n  cursor: pointer;\n  text-align: center;\n  white-space: nowrap;\n  transition: opacity 0.15s ease;\n}\n.dropi-media-player__speed-option--active {\n  color: var(--Primary-Primary-500, #f49a3d);\n}\n.dropi-media-player__speed-option:hover {\n  opacity: 0.8;\n}\n\n/* Control de volumen */\n.dropi-media-player__volume-control {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.dropi-media-player__volume-popup {\n  position: absolute;\n  bottom: calc(100% + 8px);\n  left: 50%;\n  transform: translateX(-50%);\n  width: 32px;\n  height: 108px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--Gray-Gray-800, #1f2433);\n  border-radius: var(--Border-2, 8px);\n  overflow: visible;\n  z-index: 20;\n}\n\n.dropi-media-player__volume-slider {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 97px;\n  height: 8px;\n  transform: rotate(-90deg);\n  border-radius: 4px;\n  cursor: pointer;\n  outline: none;\n  flex-shrink: 0;\n}\n\n.dropi-media-player__volume-slider::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  background: var(--Neutral-White);\n  cursor: pointer;\n}\n\n.dropi-media-player__volume-slider::-moz-range-thumb {\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  background: var(--Neutral-White);\n  border: none;\n  cursor: pointer;\n}\n\n.dropi-media-player__volume-slider::-webkit-slider-runnable-track {\n  border-radius: 4px;\n}\n\n.dropi-media-player__volume-slider::-moz-range-track {\n  height: 8px;\n  background: var(--Gray-Gray-700, #32394d);\n  border-radius: 4px;\n}\n\n/* Blur background (oculto por defecto, visible en fullscreen) */\n.dropi-media-player__blur-bg {\n  display: none;\n  position: absolute;\n  inset: 0;\n  background-size: cover;\n  background-position: center;\n  filter: blur(21px);\n  transform: scale(1.15);\n  z-index: 0;\n}\n\n.dropi-media-player__blur-overlay {\n  display: none;\n  position: absolute;\n  inset: 0;\n  background-color: rgba(0, 0, 0, 0.7);\n  z-index: 0;\n}\n\n/* Fullscreen mode */\n.dropi-media-player.is-fullscreen,\n.dropi-media-player:fullscreen {\n  max-width: none;\n  aspect-ratio: auto;\n  width: 100vw;\n  height: 100vh;\n  border-radius: 0;\n}\n\n.dropi-media-player.is-fullscreen .dropi-media-player__blur-bg,\n.dropi-media-player:fullscreen .dropi-media-player__blur-bg,\n.dropi-media-player.is-fullscreen .dropi-media-player__blur-overlay,\n.dropi-media-player:fullscreen .dropi-media-player__blur-overlay {\n  display: block;\n}\n\n.dropi-media-player.is-fullscreen .dropi-media-player__video,\n.dropi-media-player:fullscreen .dropi-media-player__video {\n  object-fit: contain;\n  position: relative;\n  z-index: 1;\n}\n\n.dropi-media-player.is-fullscreen .dropi-media-player__center-play,\n.dropi-media-player:fullscreen .dropi-media-player__center-play,\n.dropi-media-player.is-fullscreen .dropi-media-player__controls-bar,\n.dropi-media-player:fullscreen .dropi-media-player__controls-bar {\n  z-index: 2;\n}\n","import { Component, Prop, State, Event, EventEmitter, Element, h, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'dropi-media-player',\n  styleUrl: 'dropi-media-player.css',\n  shadow: true,\n})\nexport class DropiMediaPlayer {\n  @Element() el!: HTMLElement;\n  @Prop() src: string = '';\n  @Prop() mediaType: 'audio' | 'video' = 'video';\n  @Prop() poster: string = '';\n  @Prop() autoplay: boolean = false;\n  @Prop() loop: boolean = false;\n  @Prop() initialVolume: number = 1;\n  /** Format defines aspect ratio scales like Angular original */\n  @Prop() format: 'mobile-vertical' | 'mobile-compact' | 'desktop' = 'mobile-vertical';\n\n  @State() private playing: boolean = false;\n  @State() private currentTimeStr: string = '00:00';\n  @State() private durationStr: string = '00:00';\n  @State() private duration: number = 0;\n  @State() private volume: number = 1;\n  @State() private muted: boolean = false;\n  @State() private showControls: boolean = true;\n  @State() private isFullscreen: boolean = false;\n  @State() private progress: number = 0;\n  @State() private speed: number = 1;\n\n  @State() private showSpeedMenu: boolean = false;\n  @State() private showVolumeSlider: boolean = false;\n\n  private mediaEl!: HTMLVideoElement | HTMLAudioElement;\n  private controlsTimeout: ReturnType<typeof setTimeout>;\n  private speeds = [1, 2, 3];\n\n  @Event() dropiPlay: EventEmitter<boolean>;\n  @Event() dropiEnded: EventEmitter<void>;\n\n  componentDidLoad() {\n    if (this.mediaEl) {\n      const vol = this.initialVolume ?? 1;\n      if (isFinite(vol)) {\n        this.mediaEl.volume = vol;\n        this.muted = vol === 0;\n        this.volume = vol;\n      }\n    }\n    document.addEventListener('fullscreenchange', this.handleFullscreenChange);\n  }\n\n  disconnectedCallback() {\n    document.removeEventListener('fullscreenchange', this.handleFullscreenChange);\n    clearTimeout(this.controlsTimeout);\n  }\n\n  private handleFullscreenChange = () => {\n    this.isFullscreen = !!document.fullscreenElement;\n  };\n\n  private togglePlay() {\n    if (!this.mediaEl) return;\n    if (this.playing) {\n      this.mediaEl.pause();\n    } else {\n      const promise = this.mediaEl.play();\n      if (promise !== undefined) {\n        promise.catch((e) => { console.warn('Play error:', e); this.playing = false; });\n      }\n    }\n  }\n\n  private handleTimeUpdate() {\n    if (!this.duration) return;\n    this.progress = (this.mediaEl.currentTime / this.duration) * 100;\n    this.currentTimeStr = this.formatTime(this.mediaEl.currentTime);\n  }\n\n  private handleLoadedMetadata() {\n    this.duration = this.mediaEl.duration;\n    this.durationStr = this.formatTime(this.duration);\n  }\n\n  private handleSeek(e: MouseEvent) {\n    if (!this.duration) return;\n    const bar = e.currentTarget as HTMLElement;\n    const rect = bar.getBoundingClientRect();\n    const pos = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));\n    this.mediaEl.currentTime = pos * this.duration;\n  }\n\n  private handleVolume(e: Event) {\n    const val = parseFloat((e.target as HTMLInputElement).value);\n    this.mediaEl.volume = val;\n    this.volume = val;\n    this.muted = val === 0;\n    this.mediaEl.muted = this.muted;\n  }\n\n  private toggleSpeedMenu() {\n    this.showSpeedMenu = !this.showSpeedMenu;\n    this.showVolumeSlider = false;\n  }\n\n  private selectSpeed(s: number) {\n    this.speed = s;\n    if (this.mediaEl) this.mediaEl.playbackRate = s;\n    this.showSpeedMenu = false;\n  }\n\n  private toggleVolume() {\n    this.showVolumeSlider = !this.showVolumeSlider;\n    this.showSpeedMenu = false;\n  }\n\n  private toggleFullscreen() {\n    if (!this.isFullscreen) {\n      this.el.shadowRoot.host.requestFullscreen?.();\n    } else {\n      document.exitFullscreen?.();\n    }\n  }\n\n  private onMouseMove() {\n    this.showControls = true;\n    if (this.playing) this.startHideControlsTimer();\n  }\n\n  private onMouseLeave() {\n    if (this.playing) {\n      this.showControls = false;\n      this.showVolumeSlider = false;\n      this.showSpeedMenu = false;\n    }\n  }\n\n  private startHideControlsTimer() {\n    clearTimeout(this.controlsTimeout);\n    this.controlsTimeout = setTimeout(() => {\n      if (this.playing) {\n        this.showControls = false;\n        this.showVolumeSlider = false;\n        this.showSpeedMenu = false;\n      }\n    }, 5000);\n  }\n\n  @Listen('click', { target: 'document' })\n  handleDocClick(e: MouseEvent) {\n    if (!this.el.contains(e.target as Node)) {\n      this.showVolumeSlider = false;\n      this.showSpeedMenu = false;\n    }\n  }\n\n  private formatTime(secs: number): string {\n    if (isNaN(secs)) return '00:00';\n    const m = Math.floor(secs / 60);\n    const s = Math.floor(secs % 60);\n    return `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;\n  }\n\n  get playButtonSize(): number {\n    if (this.format === 'desktop') return 80;\n    if (this.format === 'mobile-compact') return 40;\n    return 60;\n  }\n  get playIconSize(): number {\n    if (this.format === 'desktop') return 32;\n    if (this.format === 'mobile-compact') return 17;\n    return 26;\n  }\n  get volumeIcon(): string {\n    return (this.muted || this.volume === 0) ? 'Volumen-silent' : 'Volumen';\n  }\n  get volumeGradient(): string {\n    const pct = (this.muted ? 0 : this.volume) * 100;\n    return `linear-gradient(to right, #ffffff ${pct}%, #32394d ${pct}%)`;\n  }\n\n  render() {\n    if (this.mediaType === 'audio') {\n      return (\n         <audio\n          src={this.src}\n          autoplay={this.autoplay}\n          loop={this.loop}\n          controls\n          style={{ width: '100%' }}\n        />\n      );\n    }\n\n    return (\n      <div \n        class={{\n          'dropi-media-player': true,\n          [`dropi-media-player--${this.format}`]: true,\n          'is-fullscreen': this.isFullscreen\n        }}\n        onMouseMove={() => this.onMouseMove()}\n        onMouseLeave={() => this.onMouseLeave()}\n      >\n        {/* Fullscreen blur */}\n        <div class=\"dropi-media-player__blur-bg\" style={{ backgroundImage: `url(${this.poster})` }}></div>\n        <div class=\"dropi-media-player__blur-overlay\"></div>\n\n        <video\n          class=\"dropi-media-player__video\"\n          ref={(el) => this.mediaEl = el as HTMLVideoElement}\n          src={this.src}\n          poster={this.poster}\n          onClick={() => this.togglePlay()}\n          onPlay={() => { this.playing = true; this.startHideControlsTimer(); this.dropiPlay.emit(true); }}\n          onPause={() => { this.playing = false; this.showControls = true; clearTimeout(this.controlsTimeout); this.dropiPlay.emit(false); }}\n          onEnded={() => { this.playing = false; this.showControls = true; this.dropiEnded.emit(); }}\n          onTimeUpdate={() => this.handleTimeUpdate()}\n          onLoadedMetaData={() => this.handleLoadedMetadata()}\n        ></video>\n\n        {/* Center Play Button */}\n        <div \n          class={{\n            'dropi-media-player__center-play': true,\n            'dropi-media-player__center-play--hidden': this.playing && !this.showControls\n          }}\n          style={{ width: `${this.playButtonSize}px`, height: `${this.playButtonSize}px` }}\n          onClick={(e) => { e.stopPropagation(); this.togglePlay(); }}\n        >\n          {this.playing ? (\n            <svg width={`${this.playIconSize}px`} height={`${this.playIconSize}px`} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" style={{color: '#ffffff'}}>\n              <rect x=\"6.5\" y=\"4\" width=\"3.5\" height=\"16\" rx=\"1.75\" />\n              <rect x=\"14\" y=\"4\" width=\"3.5\" height=\"16\" rx=\"1.75\" />\n            </svg>\n          ) : (\n            <dropi-icon name=\"Play\" color=\"Neutral-White\" iconWidth={`${this.playIconSize}px`} iconHeight={`${this.playIconSize}px`} />\n          )}\n        </div>\n\n        {/* Controls Bar */}\n        <div \n          class={{\n            'dropi-media-player__controls-bar': true,\n            'dropi-media-player__controls-bar--hidden': !this.showControls\n          }}\n          onClick={(e) => e.stopPropagation()}\n        >\n          <span class=\"dropi-media-player__timestamp\">{this.currentTimeStr} / {this.durationStr}</span>\n\n          {/* Progress Bar */}\n          <div class=\"dropi-media-player__progress\" onClick={(e) => { e.stopPropagation(); this.handleSeek(e); }}>\n            <div class=\"dropi-media-player__progress-track\">\n              <div class=\"dropi-media-player__progress-fill\" style={{ width: `${this.progress}%` }}></div>\n              <div class=\"dropi-media-player__progress-thumb\" style={{ left: `${this.progress}%` }}></div>\n            </div>\n          </div>\n\n          {/* Actions Right */}\n          <div class=\"dropi-media-player__actions\">\n            \n            {/* Speed Control */}\n            <div class=\"dropi-media-player__speed-control\" onClick={(e) => e.stopPropagation()}>\n              {this.showSpeedMenu && (\n                <div class=\"dropi-media-player__speed-menu\">\n                  {this.speeds.map(s => (\n                    <button\n                      type=\"button\"\n                      class={{ 'dropi-media-player__speed-option': true, 'dropi-media-player__speed-option--active': this.speed === s }}\n                      onClick={(e) => { e.stopPropagation(); this.selectSpeed(s); }}\n                    >\n                      x{s}\n                    </button>\n                  ))}\n                </div>\n              )}\n              <button class=\"dropi-media-player__btn dropi-media-player__btn--speed\" onClick={(e) => { e.stopPropagation(); this.toggleSpeedMenu(); }} type=\"button\">\n                x{this.speed}\n              </button>\n            </div>\n\n            {/* Fullscreen */}\n            <button class=\"dropi-media-player__btn\" onClick={(e) => { e.stopPropagation(); this.toggleFullscreen(); }} type=\"button\">\n              <dropi-icon name={this.isFullscreen ? 'Compress' : 'Expand'} color=\"Neutral-White\" iconWidth=\"20px\" iconHeight=\"20px\" />\n            </button>\n\n            {/* Volume Control */}\n            <div class=\"dropi-media-player__volume-control\" onClick={(e) => e.stopPropagation()}>\n              {this.showVolumeSlider && (\n                <div class=\"dropi-media-player__volume-popup\">\n                  <input \n                    type=\"range\"\n                    class=\"dropi-media-player__volume-slider\"\n                    min=\"0\" max=\"1\" step=\"0.01\"\n                    value={this.muted ? 0 : this.volume}\n                    style={{ background: this.volumeGradient }}\n                    onInput={(e) => this.handleVolume(e)}\n                  />\n                </div>\n              )}\n              <button class=\"dropi-media-player__btn\" onClick={(e) => { e.stopPropagation(); this.toggleVolume(); }} type=\"button\">\n                <dropi-icon name={this.volumeIcon} color=\"Neutral-White\" iconWidth=\"20px\" iconHeight=\"20px\" />\n              </button>\n            </div>\n\n          </div>\n        </div>\n\n      </div>\n    );\n  }\n}\n"],"version":3}