@dropi/ui 0.1.21 → 0.1.23

package/dist/dropi-ui/dropi-image-overlay.entry.js.map

@@ -0,0 +1 @@
+{"file":"dropi-image-overlay.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-image-overlay/dropi-image-overlay.css?tag=dropi-image-overlay&encapsulation=shadow","src/components/dropi-image-overlay/dropi-image-overlay.tsx"],"sourcesContent":[":host { display: block; }\n\n.overlay {\n  position: fixed;\n  inset: 0;\n  background: rgba(0,0,0,0.92);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 9999;\n  animation: fade-in 0.3s ease-out;\n}\n\n.overlay__close {\n  position: absolute;\n  top: 24px;\n  right: 24px;\n  background: rgba(255, 255, 255, 0.1);\n  border: none;\n  border-radius: 50%;\n  width: 48px;\n  height: 48px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  z-index: 10010;\n  transition: background 0.15s;\n}\n.overlay__close:hover { background: rgba(255, 255, 255, 0.2); }\n\n.overlay__body {\n  display: flex;\n  width: 90%;\n  height: 80%;\n  max-width: 1200px;\n  gap: 32px;\n  align-items: center;\n}\n\n.overlay__body--single {\n  justify-content: center;\n}\n\n/* ── Thumbnails (Left Column) ─────────────────────────── */\n.overlay__thumbs {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  height: 100%;\n  overflow-y: auto;\n  padding-right: 8px;\n  width: 100px;\n  flex-shrink: 0;\n}\n\n/* Hide scrollbar but keep functionality */\n.overlay__thumbs::-webkit-scrollbar { width: 4px; }\n.overlay__thumbs::-webkit-scrollbar-thumb { background: var(--Gray-Gray-600); border-radius: 4px; }\n\n.overlay__thumb-box {\n  width: 80px;\n  height: 80px;\n  border: 2px solid transparent;\n  border-radius: 8px;\n  overflow: hidden;\n  cursor: pointer;\n  flex-shrink: 0;\n  transition: border-color 0.2s;\n}\n\n.overlay__thumb-box--active {\n  border-color: var(--Primary-Primary-500, #f49a3d);\n}\n\n.overlay__thumb-img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n/* ── Main Content (Right Area) ─────────────────────────── */\n.overlay__content {\n  flex: 1;\n  height: 100%;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.overlay__main-image {\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: contain;\n  border-radius: 12px;\n  box-shadow: 0 10px 30px rgba(0,0,0,0.5);\n  animation: scale-up 0.3s ease-out;\n}\n\n.overlay__nav {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  background: rgba(255, 255, 255, 0.1);\n  border: none;\n  border-radius: 50%;\n  width: 48px;\n  height: 48px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: background 0.2s;\n  z-index: 5;\n}\n\n.overlay__nav:hover { background: rgba(255, 255, 255, 0.2); }\n.overlay__nav--prev { left: -24px; }\n.overlay__nav--next {\n  right: -24px;\n  background: var(--Neutral-White);\n}\n.overlay__nav--next:hover { background: var(--Neutral-White); }\n\n@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }\n@keyframes scale-up { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }\n","import { Component, Prop, State, Event, EventEmitter, Watch, h } from '@stencil/core';\n\n/**\n * @component dropi-image-overlay\n * Full-screen image lightbox with prev/next navigation and thumbnails.\n */\n@Component({\n  tag: 'dropi-image-overlay',\n  styleUrl: 'dropi-image-overlay.css',\n  shadow: true,\n})\nexport class DropiImageOverlay {\n  /** Whether the overlay is visible */\n  @Prop({ mutable: true }) visible: any = false;\n  /** Images array or JSON string */\n  @Prop() images: string[] | string = [];\n  /** Initially active image index */\n  @Prop({ mutable: true }) activeIndex: number = 0;\n\n  @State() private current: number = 0;\n  @State() private parsedImages: string[] = [];\n\n  /** Emitted when overlay closes */\n  @Event() dropiClose: EventEmitter<void>;\n\n  @Watch('images')\n  imagesChanged(val: string[] | string) {\n    this.parsedImages = typeof val === 'string' ? JSON.parse(val) : (val || []);\n  }\n\n  @Watch('activeIndex')\n  indexChanged(val: number) { this.current = val; }\n\n  @Watch('visible')\n  visibleChanged(val: boolean) { if (val) this.current = this.activeIndex; }\n\n  componentWillLoad() {\n    this.imagesChanged(this.images);\n    this.current = this.activeIndex;\n  }\n\n  private close() { this.visible = false; this.dropiClose.emit(); }\n  private prev() { this.current = (this.current - 1 + this.parsedImages.length) % this.parsedImages.length; }\n  private next() { this.current = (this.current + 1) % this.parsedImages.length; }\n\n  private handleError(e: Event) {\n    (e.target as HTMLImageElement).src =\n      `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgMzAwIj48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgZmlsbD0iIzFhMjAzMyIvPjx0ZXh0IHg9IjIwMCIgeT0iMTU1IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSIjNDc1MDY2IiBmb250LXNpemU9IjE0Ij5TaW4gaW1hZ2VuPC90ZXh0Pjwvc3ZnPg==`;\n  }\n\n  render() {\n    const isVisible = this.visible === true || String(this.visible) === 'true';\n    if (!isVisible) return null;\n    const imgs = this.parsedImages;\n    const multi = imgs.length > 1;\n\n    return (\n      <div class=\"overlay\" onClick={() => this.close()}>\n        <button class=\"overlay__close\" onClick={(e) => { e.stopPropagation(); this.close(); }} aria-label=\"Cerrar\">\n          <dropi-icon name=\"Close-large\" width=\"24px\" height=\"24px\" color=\"Neutral-White\" />\n        </button>\n\n        <div class={{ 'overlay__body': true, 'overlay__body--single': !multi }} onClick={(e) => e.stopPropagation()}>\n          {multi && (\n            <div class=\"overlay__thumbs\">\n              {imgs.map((src, i) => (\n                <div\n                  key={i}\n                  class={{ 'overlay__thumb-box': true, 'overlay__thumb-box--active': i === this.current }}\n                  onClick={() => this.current = i}\n                >\n                  <img\n                    src={src}\n                    alt={`miniatura ${i + 1}`}\n                    class=\"overlay__thumb-img\"\n                    onError={(e) => this.handleError(e)}\n                  />\n                </div>\n              ))}\n            </div>\n          )}\n\n          <div class=\"overlay__content\">\n            {multi && (\n              <button class=\"overlay__nav overlay__nav--prev\" onClick={() => this.prev()} aria-label=\"Anterior\">\n                <dropi-icon name=\"Dropdown-left\" width=\"18px\" height=\"18px\" color=\"Gray-Gray-500\" />\n              </button>\n            )}\n\n            <img\n              class=\"overlay__main-image\"\n              src={imgs[this.current]}\n              alt={`imagen ${this.current + 1}`}\n              onError={(e) => this.handleError(e)}\n            />\n\n            {multi && (\n              <button class=\"overlay__nav overlay__nav--next\" onClick={() => this.next()} aria-label=\"Siguiente\">\n                <dropi-icon name=\"Dropdown-Right\" width=\"18px\" height=\"18px\" color=\"Gray-Gray-500\" />\n              </button>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/{esm/dropi-input_3.entry.js → dropi-ui/dropi-input.entry.js}

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-TXz_09YZ.js';
+import { r as registerInstance, d as createEvent, h } from './index-Cvp2LQOM.js';
 
 const dropiInputCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.fixed-label-container{display:flex;width:100%;flex-direction:column;align-items:flex-start;gap:8px}.input-label{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-regular, 400);text-align:left}.asterisk{color:var(--Error-Error-500, #f46a6b)}.form-group{position:relative;width:100%}.input-container{position:relative}.icon-input{position:absolute;top:10px;left:5px;z-index:1}.icon-input-password{position:absolute;top:10px;right:13px;cursor:pointer;z-index:1}.form-control{box-sizing:border-box;width:100%;padding:var(--Size-2, 8px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);transition:border-color 0.3s ease-in-out;height:40px;outline:none;appearance:none;text-align:left}.form-control::placeholder{color:transparent;transition:color 0.2s ease-in-out}.form-control:focus::placeholder,.fixed-label-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.form-control:focus{border-color:var(--Info-Info-500, #50a5f1)}.form-control-valid{border-color:var(--Gray-Gray-400, #858ea6) !important;color:var(--Gray-Gray-600, #475066)}.form-control-invalid{border-color:var(--Error-Error-500, #f46a6b) !important;color:var(--Gray-Gray-600, #475066)}.form-control:disabled{border-color:var(--Gray-Gray-200, #c3c9d9) !important;color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed}.padding-icon{padding-left:28px}.input-container--has-icon label.label-bottom{left:28px}.input-container--has-icon .form-control:focus+label.label-bottom,.input-container--has-icon .form-control:not(:placeholder-shown)+label.label-bottom{left:0}.text-password{-webkit-text-security:disc;text-security:disc}label.label-bottom{position:absolute;font-weight:var(--font-weight-regular, 400);top:10px;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-500, #69738c);left:10px;transition:all 0.2s ease-in-out;pointer-events:none;overflow:hidden;width:90%;white-space:nowrap}.form-control:focus+label.label-bottom,.form-control:not(:placeholder-shown)+label.label-bottom{top:-22px;left:0;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-600, #475066);width:unset}.form-control:disabled+label.label-bottom{color:var(--Gray-Gray-400, #858ea6)}.form-control-helper{display:flex;position:absolute;top:100%;left:0;gap:4px;align-items:center;margin-top:4px}.form-control-helper span{display:block;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px)}.invalid-color{color:var(--Error-Error-500, #f46a6b) !important}.disabled-helper{color:var(--Gray-Gray-400, #858ea6) !important}.disabled-helper{color:var(--Gray-Gray-400, #858ea6) !important}`;
 
@@ -45,7 +45,7 @@ const DropiInput = class {
     inputMode = 'text';
     // ── Input type modifiers ────────────────────────────────────
     /** Show password visibility toggle (renders as password field) */
-    isPasswordInput = false;
+    passwordInput = false;
     /** Apply thousand separator formatting (e.g. 1,000,000) */
     isMoneyInput = false;
     /** Apply thousand separator without currency symbol */
@@ -71,7 +71,7 @@ const DropiInput = class {
     // ── Angular-parity ──────────────────────────────────────────
     /**
      * Convenience object prop — matches Angular `inputProperties: InputProperties`.
-     * Fields: id, label, placeholder, maxLength, textHelper, isPasswordInput,
+     * Fields: id, label, placeholder, maxLength, textHelper, passwordInput,
      * icon, iconColor, isMoneyInput, showObligatoryAsterisk, isNumericInput,
      * allowDecimals, isThousandSeparator, showHelperOnlyOnError,
      * isLettersOnly, inputMode.
@@ -103,8 +103,10 @@ const DropiInput = class {
             this.maxLength = val.maxLength;
         if (val.textHelper !== undefined)
             this.textHelper = val.textHelper;
+        if (val.passwordInput !== undefined)
+            this.passwordInput = val.passwordInput;
         if (val.isPasswordInput !== undefined)
-            this.isPasswordInput = val.isPasswordInput;
+            this.passwordInput = val.isPasswordInput; // Fallback
         if (val.icon !== undefined)
             this.icon = val.icon;
         if (val.iconColor !== undefined)
@@ -211,7 +213,7 @@ const DropiInput = class {
         return this.id || this.label;
     }
     get inputType() {
-        if (this.isPasswordInput)
+        if (this.passwordInput)
             return this.showPassword ? 'text' : 'password';
         return 'text';
     }
@@ -229,14 +231,14 @@ const DropiInput = class {
     render() {
         const showObligatoryAsterisk = this.required && this.showObligatoryAsterisk && !this.disabled;
         const showIconInline = !!this.icon;
-        return (h("div", { key: '2156d42c9c108aabf2089c0c786c1fb520457c05', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (h("div", { key: '6ccd102fe2873bb2c338a0e5e63b3622a2be1812', class: "input-label Body-S-Regular" }, this.label, showObligatoryAsterisk && h("span", { key: 'd7057cd87b711e9b158ac847b5e85cb5058736a8', class: "asterisk" }, " *"))), h("div", { key: 'b91973d056acf1c25bd220868a12d9d3afdba86f', class: "form-group" }, h("div", { key: '5cb70a37814949372eeab77746bf609a6500cf0b', class: { 'input-container': true, 'input-container--has-icon': showIconInline } }, showIconInline && (h("dropi-icon", { key: '2bad8e8a23875531285d0321f4c629671b13dd84', class: "icon-input", name: this.icon, color: this.iconColor, width: "20px", height: "20px" })), this.isPasswordInput && (h("dropi-icon", { key: 'e330216b12fdf771e891a207f60ffea359d81702', class: "icon-input-password", name: this.showPassword ? 'Eye' : 'Eye-crossed', width: "20px", height: "20px", color: "Gray-Gray-500", onClick: () => this.togglePassword() })), h("input", { key: '17a548015deebd47d2f3e5751edbc596161fa836', id: this.resolvedId, class: {
+        return (h("div", { key: 'cc38b113d77982ba53665a6c8ccbf39a393da696', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (h("div", { key: '06bb6b6df585f859dc7a903fac4ed3f9f6c31077', class: "input-label Body-S-Regular" }, this.label, showObligatoryAsterisk && h("span", { key: '6e87d6717a312d7497c2cf438aec7a692b974dda', class: "asterisk" }, " *"))), h("div", { key: '2eb67324cb06e04ee9fc5507a319a2eda8b5e410', class: "form-group" }, h("div", { key: '9d8d6f8df83c33782fd61810267e433fdab452d9', class: { 'input-container': true, 'input-container--has-icon': showIconInline } }, showIconInline && h("dropi-icon", { key: '370070a0e75a929438cb564698ee10c866e944a9', class: "icon-input", name: this.icon, color: this.iconColor, width: "20px", height: "20px" }), this.passwordInput && (h("dropi-icon", { key: '675958939e32a94060993515f9b9a58513ec2adc', class: "icon-input-password", name: this.showPassword ? 'Eye' : 'Eye-crossed', width: "20px", height: "20px", color: "Gray-Gray-500", onClick: () => this.togglePassword() })), h("input", { key: 'd2ac98c43f9863ea8153dc66dd3fe347a7c28473', id: this.resolvedId, class: {
                 'form-control': true,
                 'form-control-valid': !this.isInvalid && this.touched && !!this.value,
                 'form-control-invalid': this.isInvalid,
                 'padding-icon': showIconInline,
-                'text-password': this.isPasswordInput && !this.showPassword,
+                'text-password': this.passwordInput && !this.showPassword,
                 'fixed-label-input': this.fixedLabel,
-            }, type: this.inputType, value: this.value, placeholder: this.fixedLabel ? this.placeholder : ' ', disabled: this.disabled, required: this.required, maxLength: this.maxLength, inputMode: this.inputMode, "data-cy": undefined, onInput: (e) => this.handleInput(e), onKeyDown: (e) => this.handleKeyDown(e), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }), !this.fixedLabel && (h("label", { key: '8dcc33eecd0b36188977c0f9139044f7d343c1c9', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showObligatoryAsterisk && h("span", { key: '8944ef639c328e0745b820b83fcf5c4772cae226', class: "asterisk" }, " *"))), this.showHelper && (h("div", { key: '7087f38a3bf05fa0514a4edbd8c6e1c6ae7ffcc6', class: "form-control-helper" }, this.isInvalid && (h("dropi-icon", { key: '2c91fc6773478a592aa4940c7251f15d3026d07c', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" })), h("span", { key: '6ec4185eac0b8ea1fdfd810e366cec4616880eed', class: {
+            }, type: this.inputType, value: this.value, placeholder: this.fixedLabel ? this.placeholder : ' ', disabled: this.disabled, required: this.required, maxLength: this.maxLength, inputMode: this.inputMode, "data-cy": undefined, onInput: e => this.handleInput(e), onKeyDown: e => this.handleKeyDown(e), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }), !this.fixedLabel && (h("label", { key: '45eb57801e7d199532215ba069af8ba01714a46f', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showObligatoryAsterisk && h("span", { key: '5d4d83ce2575d60567a4a947d643a89f760cb3bd', class: "asterisk" }, " *"))), this.showHelper && (h("div", { key: 'b78fdac5f0c46b827c9dd2895d43a5e1724058d8', class: "form-control-helper" }, this.isInvalid && h("dropi-icon", { key: 'f037c95230fe0fa57540a1b74a26c14e56e555e4', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" }), h("span", { key: 'fc48f7418c36f7ded7a999e446323ca8adb2b590', class: {
                 'disabled-helper': this.disabled,
                 'invalid-color': this.isInvalid,
             } }, this.textHelper)))))));
@@ -256,131 +258,7 @@ const DropiInput = class {
 };
 DropiInput.style = dropiInputCss();
 
-const dropiPaginatorCss = () => `:host{display:block}*,*::before,*::after{box-sizing:border-box}.paginator{display:flex;align-items:center;justify-content:flex-end;gap:var(--Size-4, 16px);flex-wrap:wrap}.paginator-pages{display:flex;align-items:center;gap:var(--Size-1, 4px)}.paginator-btn{width:32px;height:32px;padding:0;border:none;border-radius:50%;background:transparent;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-s, 12px);font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.15s ease}.paginator-btn:hover:not(:disabled){background:var(--Gray-Gray-50, #f7f8fa)}.paginator-btn:disabled{opacity:0.4;cursor:not-allowed}.paginator-btn--active{background:var(--Primary-Primary-500, #f49a3d);color:var(--Neutral-White, #ffffff);font-weight:var(--font-weight-bold, 700)}.paginator-btn--active:hover{background:var(--Primary-Primary-500, #f49a3d)}.paginator-btn--arrow{width:auto;padding:0 var(--Size-2, 8px);border-radius:var(--Border-1, 4px);gap:4px}.paginator-btn--arrow:hover:not(:disabled){background:var(--Gray-Gray-50, #f7f8fa)}.paginator-label{font-size:var(--font-size-s, 12px);color:inherit}.paginator-ellipsis{color:var(--Gray-Gray-400, #858ea6);padding:0 4px;font-size:var(--font-size-s, 12px);display:flex;align-items:center}.paginator-size{display:flex;align-items:center;gap:var(--Size-2, 8px)}.paginator-size-label{font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-500, #69738c)}.paginator-size-select{height:32px;padding:0 var(--Size-2, 8px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-1, 4px);background:var(--Neutral-White, #ffffff);color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-s, 12px);font-family:inherit;cursor:pointer;outline:none}`;
+export { DropiInput as dropi_input };
+//# sourceMappingURL=dropi-input.entry.esm.js.map
 
-const DropiPaginator = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.pageChange = createEvent(this, "pageChange", 7);
-    }
-    /** Total number of pages */
-    totalPages = 1;
-    /** Current page (1-based) */
-    currentPage = 1;
-    /** Disabled state */
-    disabled = false;
-    /** Max page buttons to show at once */
-    maxVisiblePages = 8;
-    /** Hide total page count (show only arrows) */
-    isNotTotalPages = false;
-    /** Hide "Anterior"/"Siguiente" text labels, show only arrows */
-    noLabels = false;
-    /** Emitted when page changes. e.detail = new page number */
-    pageChange;
-    get pageNumbers() {
-        const total = this.totalPages;
-        const cur = this.currentPage;
-        const max = this.maxVisiblePages;
-        if (total <= max)
-            return Array.from({ length: total }, (_, i) => i + 1);
-        const half = Math.floor(max / 2);
-        let start = Math.max(1, cur - half);
-        let end = Math.min(total, start + max - 1);
-        if (end - start < max - 1)
-            start = Math.max(1, end - max + 1);
-        const pages = [];
-        if (start > 1) {
-            pages.push(1);
-            if (start > 2)
-                pages.push('...');
-        }
-        for (let i = start; i <= end; i++)
-            pages.push(i);
-        if (end < total) {
-            if (end < total - 1)
-                pages.push('...');
-            pages.push(total);
-        }
-        return pages;
-    }
-    goTo(p) {
-        if (this.disabled || p < 1 || p > this.totalPages || p === this.currentPage)
-            return;
-        this.currentPage = p;
-        this.pageChange.emit(this.currentPage);
-    }
-    render() {
-        const pages = this.pageNumbers;
-        const isFirst = this.currentPage <= 1;
-        const isLast = this.currentPage >= this.totalPages;
-        return (h("div", { key: '5f69b3abd4ddf98c2ab5df9c20361ba7f71addac', class: "paginator" }, h("div", { key: 'c050104ff12ec9c8b0cca40a75e0538cdd43d1e5', class: "paginator-pages" }, !isFirst && !this.noLabels && (h("button", { key: 'b03958b21bd015c6e80356172bea98f980c9eab4', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(1), "aria-label": "Primera p\u00E1gina", disabled: this.disabled }, h("dropi-icon", { key: 'c1670fe542a342765f79efde0ac3bd754dad4798', name: "Arrow-double-small-left", width: "16px", height: "16px", color: "Gray-Gray-600" }))), !isFirst && (h("button", { key: '170d5b6c0f1f105682d9a8bd69d95d445af1c5ac', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.currentPage - 1), "aria-label": "Anterior", disabled: this.disabled }, h("dropi-icon", { key: 'a5233c1025b3a7c96ae3d8a30a7a38fe4d009ce8', name: "Dropdown-left", width: "16px", height: "16px", color: "Gray-Gray-600" }), !this.noLabels && h("span", { key: '074c645f02a26e1a1607aaccaa2a6c25b2d2e17a', class: "paginator-label" }, "Anterior"))), pages.map((p, i) => p === '...'
-            ? h("span", { class: "paginator-ellipsis", key: `e${i}` }, "\u2026")
-            : h("button", { key: p, class: { 'paginator-btn': true, 'paginator-btn--active': p === this.currentPage }, onClick: () => this.goTo(p), "aria-current": p === this.currentPage ? 'page' : undefined, disabled: this.disabled }, p)), !isLast && (h("button", { key: 'd02f057415086137540417bcd5762bc2f955885f', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.currentPage + 1), "aria-label": "Siguiente", disabled: this.disabled }, !this.noLabels && h("span", { key: '4bfc14f3fa8ce553a61702bd5323b9554c99b05e', class: "paginator-label" }, "Siguiente"), h("dropi-icon", { key: 'c9e532e95dc78ac8e91ef43d64d98ef75a4b5fb8', name: "Dropdown-Right", width: "16px", height: "16px", color: "Gray-Gray-600" }))), !isLast && !this.noLabels && (h("button", { key: 'fe498a605de588ce33ed4597fa09d6659f555790', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.totalPages), "aria-label": "\u00DAltima p\u00E1gina", disabled: this.disabled }, h("dropi-icon", { key: '1e0d64045e390c5f934ea2c70c4ccc8f0c542b8a', name: "Arrow-double-small-right", width: "16px", height: "16px", color: "Gray-Gray-600" }))))));
-    }
-};
-DropiPaginator.style = dropiPaginatorCss();
-
-const dropiTagCss = () => `:host{display:inline-flex}*,*::before,*::after{box-sizing:border-box}.container-chips{display:inline-block}.tags{display:inline-flex;padding:4px 8px;justify-content:center;align-items:center;gap:4px;border-radius:var(--Border-5, 9999px);overflow:hidden;text-align:center;text-overflow:ellipsis;font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-medium, 500);line-height:var(--Size-5, 24px);animation:fade-in 200ms ease-out}.tags.icon-only{gap:0}.file-icon{display:flex}@keyframes fade-in{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform:scale(1)}}`;
-
-const DropiTag = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    /** primary (filled) | secondary (soft) */
-    type = 'primary';
-    /** Color state of the tag */
-    state = 'default';
-    /** Whether to show the icon */
-    showIcon = false;
-    /** Icon name from the sprite */
-    icon = '';
-    /** Label text */
-    text = '';
-    colorMap = {
-        default: 'Primary-Primary',
-        success: 'Success-Success',
-        info: 'Info-Info',
-        warning: 'Warning-Warning',
-        error: 'Error-Error',
-        legacy: 'Gray-Gray',
-    };
-    propsChanged() { }
-    get bgColor() {
-        const base = this.colorMap[this.state];
-        if (this.type === 'primary')
-            return `var(--${base}-500)`;
-        const shade = this.state === 'default' || this.state === 'legacy' ? '-100' : '-50';
-        return `var(--${base}${shade})`;
-    }
-    get textColor() {
-        const base = this.colorMap[this.state];
-        if (this.type === 'primary')
-            return `var(--Neutral-White)`;
-        const shade = this.state === 'default' ? '-500' : '-700';
-        return `var(--${base}${shade})`;
-    }
-    get iconColor() {
-        if (this.type === 'primary')
-            return 'Neutral-White';
-        const base = this.colorMap[this.state];
-        const shade = this.state === 'default' ? '-500' : '-700';
-        return `${base}${shade}`;
-    }
-    get hasContent() {
-        return typeof this.text === 'string' && this.text.trim().length > 0;
-    }
-    render() {
-        return (h("div", { key: 'b949409e06cf0ba23112c5cb5c2f49e605ddc730', class: "container-chips" }, h("div", { key: '3013650803f96e0f77e1631ba824e378ad9d5296', class: { tags: true, 'icon-only': this.showIcon && !this.hasContent }, style: { backgroundColor: this.bgColor, color: this.textColor } }, this.showIcon && this.icon && (h("dropi-icon", { key: '5f8b72bef223fbf1ab47a1fcef7b016bfa8d7b91', class: "file-icon", name: this.icon, width: "16px", height: "16px", color: this.iconColor })), this.hasContent && h("span", { key: '63921861c9549d70fc432bb1252c2af2b76cbaa1' }, this.text))));
-    }
-    static get watchers() { return {
-        "type": [{
-                "propsChanged": 0
-            }],
-        "state": [{
-                "propsChanged": 0
-            }]
-    }; }
-};
-DropiTag.style = dropiTagCss();
-
-export { DropiInput as dropi_input, DropiPaginator as dropi_paginator, DropiTag as dropi_tag };
+//# sourceMappingURL=dropi-input.entry.js.map

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: 10px;\n  left: 5px;\n  z-index: 1;\n}\n\n.icon-input-password {\n  position: absolute;\n  top: 10px;\n  right: 13px;\n  cursor: pointer;\n  z-index: 1;\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: 28px;\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: 28px;\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 }) id: 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.id = val.id;\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.id || 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 && <dropi-icon class=\"icon-input\" name={this.icon} color={this.iconColor} width=\"20px\" height=\"20px\" />}\n\n            {/* Password toggle (right) */}\n            {this.passwordInput && (\n              <dropi-icon\n                class=\"icon-input-password\"\n                name={this.showPassword ? 'Eye' : 'Eye-crossed'}\n                width=\"20px\"\n                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\" width=\"12px\" height=\"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/{esm → dropi-ui}/dropi-languages-selector.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-TXz_09YZ.js';
+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}}`;
 
@@ -16,7 +16,11 @@ const DropiLanguagesSelector = class {
     parsedLanguages = [];
     currentLang = null;
     languagesChanged(val) {
-        this.parsedLanguages = typeof val === 'string' ? JSON.parse(val) : 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];
         }
@@ -53,3 +57,6 @@ const DropiLanguagesSelector = class {
 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() 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\" width=\"16px\" height=\"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/{esm → dropi-ui}/dropi-logo.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-TXz_09YZ.js';
+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}`;
 
@@ -7,19 +7,32 @@ 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: '3e333d272f1f7ee4af549167e5e4f7a713aaa508', class: { 'dropi-logo': true, [`dropi-logo--${this.size}`]: true } }, h("img", { key: 'e3f29c17b649b76da50b769fd88f5de9a86515e3', src: this.urlLogo || FALLBACK_SVG, alt: "Dropi logo", loading: "lazy", onError: (e) => this.handleError(e) })));
+        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) })));
     }
 };
 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/{esm → dropi-ui}/dropi-lottie-loader.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-TXz_09YZ.js';
+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)}`;
 
@@ -23,3 +23,6 @@ const DropiLottieLoader = class {
 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/{esm → dropi-ui}/dropi-media-player.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-TXz_09YZ.js';
+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}`;
 
@@ -36,9 +36,12 @@ const DropiMediaPlayer = class {
     dropiEnded;
     componentDidLoad() {
         if (this.mediaEl) {
-            this.mediaEl.volume = this.initialVolume;
-            this.muted = this.initialVolume === 0;
-            this.volume = this.initialVolume;
+            const vol = this.initialVolume ?? 1;
+            if (isFinite(vol)) {
+                this.mediaEl.volume = vol;
+                this.muted = vol === 0;
+                this.volume = vol;
+            }
         }
         document.addEventListener('fullscreenchange', this.handleFullscreenChange);
     }
@@ -185,3 +188,6 @@ const DropiMediaPlayer = class {
 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\" width={`${this.playIconSize}px`} height={`${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\" width=\"20px\" height=\"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\" width=\"20px\" height=\"20px\" />\n              </button>\n            </div>\n\n          </div>\n        </div>\n\n      </div>\n    );\n  }\n}\n"],"version":3}