@dropi/ui 0.1.20 → 0.1.21

package/dist/esm/dropi-banner-external.entry.js

@@ -1,12 +1,12 @@
-import { r as registerInstance, c as createEvent, h } from './index-Tbza12Gt.js';
+import { r as registerInstance, c as createEvent, h } from './index-TXz_09YZ.js';
 
 const dropiBannerExternalCss = () => `:host{display:block;width:100%}.dropi-banner-external{display:block;width:100%;position:relative;margin-bottom:16px;border-radius:var(--Border-2, 8px)}.dropi-banner-external a{display:block;text-decoration:none}.click-wrapper{cursor:pointer}.inner{position:relative;display:block}.inner img{display:block;width:100%;height:auto;border-radius:var(--Border-2, 8px);max-width:1220px;margin:auto}.close-btn{position:absolute;top:4px;right:4px;background:rgba(255, 255, 255, 0.8);border:none;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background 0.15s ease}.close-btn:hover{background:rgba(255, 255, 255, 1)}`;
 
 const DropiBannerExternal = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.dropiBannerClick = createEvent(this, "dropiBannerClick", 7);
-        this.dropiBannerClose = createEvent(this, "dropiBannerClose", 7);
+        this.bannerClick = createEvent(this, "bannerClick", 7);
+        this.isVisible = createEvent(this, "isVisible", 7);
     }
     /** Image URL to display */
     imageUrl = '';
@@ -16,22 +16,28 @@ const DropiBannerExternal = class {
     alt = '';
     /** Background color behind the image */
     backgroundColor = 'transparent';
+    /** Slug name (matches Angular `slugName`) */
+    slugName = '';
+    /** Whether to show on white brand (matches Angular `viewOnWhiteBrand`) */
+    viewOnWhiteBrand = false;
+    /** Countries list to show (matches Angular `viewOnlyCountries`) */
+    viewOnlyCountries = [];
     closed = false;
     /** Emitted when the banner is clicked (only when no link is set) */
-    dropiBannerClick;
-    /** Emitted when the close button is clicked */
-    dropiBannerClose;
+    bannerClick;
+    /** Emitted with false when the close button is clicked (matches Angular `isVisible`) */
+    isVisible;
     handleClick(e) {
         if (!this.link) {
             e.preventDefault();
-            this.dropiBannerClick.emit();
+            this.bannerClick.emit();
         }
     }
     closeBanner(e) {
         e.preventDefault();
         e.stopPropagation();
         this.closed = true;
-        this.dropiBannerClose.emit();
+        this.isVisible.emit(false);
     }
     render() {
         if (this.closed || !this.imageUrl)

package/dist/esm/dropi-breadcrumb.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-Tbza12Gt.js';
+import { r as registerInstance, c as createEvent, h } from './index-TXz_09YZ.js';
 
 const dropiBreadcrumbCss = () => `:host{display:block}*,*::before,*::after{box-sizing:border-box}.breadcrumb{margin:0}.crumb-list{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.crumb-home{display:flex;padding-right:4px;align-items:center;gap:4px}.home-link{display:inline-flex;align-items:center;color:var(--Gray-Gray-500, #69738c);text-decoration:none;transition:color 0.2s ease}.home-link:hover{color:var(--Gray-Gray-700, #32394d)}.crumb{display:flex;padding:0 4px;align-items:center;gap:8px}.crumb-link{color:var(--Gray-Gray-500, #69738c);text-align:center;cursor:pointer;text-decoration:none;transition:color 0.2s ease;font-size:var(--font-size-s, 12px)}.crumb-link:hover{color:var(--Gray-Gray-700, #32394d);text-decoration:underline}.crumb-link.disabled{pointer-events:none;color:var(--Gray-Gray-300, #a1a8b8);cursor:not-allowed;text-decoration:none}.current{color:var(--Gray-Gray-700, #32394d);cursor:default;font-size:var(--font-size-s, 12px)}`;
 

package/dist/esm/dropi-button.entry.js

@@ -1,11 +1,11 @@
-import { r as registerInstance, c as createEvent, h } from './index-Tbza12Gt.js';
+import { r as registerInstance, c as createEvent, h } from './index-TXz_09YZ.js';
 
-const dropiButtonCss = () => `:host{display:inline-block}:host([full-width]){display:flex;width:100%}:host([full-width]) .btn{width:100%}*,*::before,*::after{box-sizing:border-box}.btn{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:var(--Size-1, 4px);border-radius:var(--Border-2, 8px);font-weight:700;min-width:33px;line-height:110%;cursor:pointer;white-space:nowrap;transition:background 0.25s ease,     color 0.25s ease,     border-color 0.25s ease,     transform 0.25s ease}.btn:active{transition:transform 0.01s ease-out;transform:scale(0.98)}.btn:hover:not(:active){transform:scale(1.01)}.btn.without-text{gap:0}.btn.large{padding:var(--Size-4, 16px);font-size:var(--Size-4, 16px);height:48px}.btn.normal{padding:var(--Size-3, 12px);font-size:var(--font-size-s, 12px);height:40px}.btn.small{padding:var(--Size-2, 8px);font-size:var(--Size-3, 12px);height:29px}.btn.disabled,.btn.loading{cursor:not-allowed;pointer-events:none}.btn.primary.default{background:var(--Primary-Primary-500, #f49a3d);color:var(--Neutral-White, #fff)}.btn.primary.default:hover{background:var(--Primary-Primary-600, #e58017)}.btn.primary.success{background:var(--Success-Success-500, #0abb87);color:var(--Neutral-White, #fff)}.btn.primary.success:hover{background:var(--Success-Success-600, #09aa7b)}.btn.primary.info{background:var(--Info-Info-500, #50a5f1);color:var(--Neutral-White, #fff)}.btn.primary.info:hover{background:var(--Info-Info-600, #4996db)}.btn.primary.error{background:var(--Error-Error-500, #f46a6b);color:var(--Neutral-White, #fff)}.btn.primary.error:hover{background:var(--Error-Error-600, #de6061)}.btn.primary.warning{background:var(--Warning-Warning-500, #f1b44c);color:var(--Neutral-White, #fff)}.btn.primary.warning:hover{background:var(--Warning-Warning-600, #dba445)}.btn.primary.legacy{background:var(--Secondary-Secondary-500, #008dbf);color:var(--Neutral-White, #fff)}.btn.primary.legacy:hover{background:var(--Secondary-Secondary-600, #007199)}.btn.primary.disabled.default{background:var(--Primary-Primary-300, #f2bc85);color:var(--Neutral-White, #fff)}.btn.primary.disabled.success{background:var(--Success-Success-300, #5bd1af);color:var(--Neutral-White, #fff)}.btn.primary.disabled.info{background:var(--Info-Info-300, #8ac3f6);color:var(--Neutral-White, #fff)}.btn.primary.disabled.error{background:var(--Error-Error-300, #f89b9c);color:var(--Neutral-White, #fff)}.btn.primary.disabled.warning{background:var(--Warning-Warning-300, #f6cd87);color:var(--Neutral-White, #fff)}.btn.primary.disabled.legacy{background:var(--Secondary-Secondary-300, #62bad9);color:var(--Neutral-White, #fff)}.btn.secondary{background:var(--Neutral-White, #fff);border:1px solid}.btn.secondary.default{border-color:var(--Primary-Primary-500, #f49a3d);color:var(--Primary-Primary-500, #f49a3d)}.btn.secondary.default:hover{color:var(--Primary-Primary-600, #e58017);border-color:var(--Primary-Primary-600, #e58017)}.btn.secondary.success{border-color:var(--Success-Success-500, #0abb87);color:var(--Success-Success-500, #0abb87)}.btn.secondary.success:hover{color:var(--Success-Success-600, #09aa7b);border-color:var(--Success-Success-600, #09aa7b)}.btn.secondary.info{border-color:var(--Info-Info-500, #50a5f1);color:var(--Info-Info-500, #50a5f1)}.btn.secondary.info:hover{color:var(--Info-Info-600, #4996db);border-color:var(--Info-Info-600, #4996db)}.btn.secondary.error{border-color:var(--Error-Error-500, #f46a6b);color:var(--Error-Error-500, #f46a6b)}.btn.secondary.error:hover{color:var(--Error-Error-600, #de6061);border-color:var(--Error-Error-600, #de6061)}.btn.secondary.warning{border-color:var(--Warning-Warning-500, #f1b44c);color:var(--Warning-Warning-500, #f1b44c)}.btn.secondary.warning:hover{color:var(--Warning-Warning-600, #dba445);border-color:var(--Warning-Warning-600, #dba445)}.btn.secondary.legacy{border-color:var(--Secondary-Secondary-500, #008dbf);color:var(--Secondary-Secondary-500, #008dbf)}.btn.secondary.legacy:hover{color:var(--Secondary-Secondary-600, #007199);border-color:var(--Secondary-Secondary-600, #007199)}.btn.secondary.disabled.default{border-color:var(--Primary-Primary-300, #f2bc85);color:var(--Primary-Primary-300, #f2bc85)}.btn.secondary.disabled.success{border-color:var(--Success-Success-300, #5bd1af);color:var(--Success-Success-300, #5bd1af)}.btn.secondary.disabled.info{border-color:var(--Info-Info-300, #8ac3f6);color:var(--Info-Info-300, #8ac3f6)}.btn.secondary.disabled.error{border-color:var(--Error-Error-300, #f89b9c);color:var(--Error-Error-300, #f89b9c)}.btn.secondary.disabled.warning{border-color:var(--Warning-Warning-300, #f6cd87);color:var(--Warning-Warning-300, #f6cd87)}.btn.secondary.disabled.legacy{border-color:var(--Secondary-Secondary-300, #62bad9);color:var(--Secondary-Secondary-300, #62bad9)}.btn.tertiary{background:none;border:none}.btn.tertiary.default,.btn.tertiary.legacy{border:1px solid var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-500, #69738c)}.btn.tertiary.default:hover,.btn.tertiary.legacy:hover{border-color:var(--Gray-Gray-400, #858ea6);color:var(--Gray-Gray-600, #475066)}.btn.tertiary.success{color:var(--Success-Success-500, #0abb87)}.btn.tertiary.success:hover{background:var(--Success-Success-50, #e7f8f3)}.btn.tertiary.info{color:var(--Info-Info-500, #50a5f1)}.btn.tertiary.info:hover{background:var(--Info-Info-50, #eef6fe)}.btn.tertiary.error{color:var(--Error-Error-500, #f46a6b)}.btn.tertiary.error:hover{background:var(--Error-Error-50, #fef0f0)}.btn.tertiary.warning{color:var(--Warning-Warning-500, #f1b44c)}.btn.tertiary.warning:hover{background:var(--Warning-Warning-50, #fef8ed)}.btn.tertiary.dropdown{color:var(--Gray-Gray-500, #69738c);font-weight:400;font-size:14px;background:transparent}.btn.tertiary.disabled.default,.btn.tertiary.disabled.legacy{border:1px solid var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-400, #858ea6)}.btn.tertiary.disabled.success{color:var(--Success-Success-300, #5bd1af)}.btn.tertiary.disabled.info{color:var(--Info-Info-300, #8ac3f6)}.btn.tertiary.disabled.error{color:var(--Error-Error-300, #f89b9c)}.btn.tertiary.disabled.warning{color:var(--Warning-Warning-300, #f6cd87)}.spin{animation:spin 1s linear infinite}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}`;
+const dropiButtonCss = () => `:host{display:inline-block}:host([full-width]){display:flex;width:100%}:host([full-width]) .btn{width:100%}*,*::before,*::after{box-sizing:border-box}.btn{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:var(--Size-1, 4px);border-radius:var(--Border-2, 8px);font-weight:var(--font-weight-bold);min-width:33px;line-height:110%;cursor:pointer;white-space:nowrap;transition:background 0.25s ease,     color 0.25s ease,     border-color 0.25s ease,     transform 0.25s ease}.btn:active{transition:transform 0.01s ease-out;transform:scale(0.98)}.btn:hover:not(:active){transform:scale(1.01)}.btn.without-text{gap:0}.btn.large{padding:var(--Size-4, 16px);font-size:var(--Size-4, 16px);height:48px}.btn.normal{padding:var(--Size-3, 12px);font-size:var(--font-size-s, 12px);height:40px}.btn.small{padding:var(--Size-2, 8px);font-size:var(--font-size-s, 12px);height:29px}.btn.disabled,.btn.loading{cursor:not-allowed;pointer-events:none}.btn.primary.default{background:var(--Primary-Primary-500, #f49a3d);color:var(--Neutral-White, #ffffff)}.btn.primary.default:hover{background:var(--Primary-Primary-600, #e58017)}.btn.primary.success{background:var(--Success-Success-500, #0abb87);color:var(--Neutral-White, #ffffff)}.btn.primary.success:hover{background:var(--Success-Success-600, #09aa7b)}.btn.primary.info{background:var(--Info-Info-500, #50a5f1);color:var(--Neutral-White, #ffffff)}.btn.primary.info:hover{background:var(--Info-Info-600, #4996db)}.btn.primary.error{background:var(--Error-Error-500, #f46a6b);color:var(--Neutral-White, #ffffff)}.btn.primary.error:hover{background:var(--Error-Error-600, #de6061)}.btn.primary.warning{background:var(--Warning-Warning-500, #f1b44c);color:var(--Neutral-White, #ffffff)}.btn.primary.warning:hover{background:var(--Warning-Warning-600, #dba445)}.btn.primary.legacy{background:var(--Secondary-Secondary-500, #008dbf);color:var(--Neutral-White, #ffffff)}.btn.primary.legacy:hover{background:var(--Secondary-Secondary-600, #007199)}.btn.primary.disabled.default{background:var(--Primary-Primary-300, #f2bc85);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.success{background:var(--Success-Success-300, #5bd1af);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.info{background:var(--Info-Info-300, #8ac3f6);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.error{background:var(--Error-Error-300, #f89b9c);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.warning{background:var(--Warning-Warning-300, #f6cd87);color:var(--Neutral-White, #ffffff)}.btn.primary.disabled.legacy{background:var(--Secondary-Secondary-300, #62bad9);color:var(--Neutral-White, #ffffff)}.btn.secondary{background:var(--Neutral-White, #ffffff);border:1px solid}.btn.secondary.default{border-color:var(--Primary-Primary-500, #f49a3d);color:var(--Primary-Primary-500, #f49a3d)}.btn.secondary.default:hover{color:var(--Primary-Primary-600, #e58017);border-color:var(--Primary-Primary-600, #e58017)}.btn.secondary.success{border-color:var(--Success-Success-500, #0abb87);color:var(--Success-Success-500, #0abb87)}.btn.secondary.success:hover{color:var(--Success-Success-600, #09aa7b);border-color:var(--Success-Success-600, #09aa7b)}.btn.secondary.info{border-color:var(--Info-Info-500, #50a5f1);color:var(--Info-Info-500, #50a5f1)}.btn.secondary.info:hover{color:var(--Info-Info-600, #4996db);border-color:var(--Info-Info-600, #4996db)}.btn.secondary.error{border-color:var(--Error-Error-500, #f46a6b);color:var(--Error-Error-500, #f46a6b)}.btn.secondary.error:hover{color:var(--Error-Error-600, #de6061);border-color:var(--Error-Error-600, #de6061)}.btn.secondary.warning{border-color:var(--Warning-Warning-500, #f1b44c);color:var(--Warning-Warning-500, #f1b44c)}.btn.secondary.warning:hover{color:var(--Warning-Warning-600, #dba445);border-color:var(--Warning-Warning-600, #dba445)}.btn.secondary.legacy{border-color:var(--Secondary-Secondary-500, #008dbf);color:var(--Secondary-Secondary-500, #008dbf)}.btn.secondary.legacy:hover{color:var(--Secondary-Secondary-600, #007199);border-color:var(--Secondary-Secondary-600, #007199)}.btn.secondary.disabled.default{border-color:var(--Primary-Primary-300, #f2bc85);color:var(--Primary-Primary-300, #f2bc85)}.btn.secondary.disabled.success{border-color:var(--Success-Success-300, #5bd1af);color:var(--Success-Success-300, #5bd1af)}.btn.secondary.disabled.info{border-color:var(--Info-Info-300, #8ac3f6);color:var(--Info-Info-300, #8ac3f6)}.btn.secondary.disabled.error{border-color:var(--Error-Error-300, #f89b9c);color:var(--Error-Error-300, #f89b9c)}.btn.secondary.disabled.warning{border-color:var(--Warning-Warning-300, #f6cd87);color:var(--Warning-Warning-300, #f6cd87)}.btn.secondary.disabled.legacy{border-color:var(--Secondary-Secondary-300, #62bad9);color:var(--Secondary-Secondary-300, #62bad9)}.btn.tertiary{background:none;border:none}.btn.tertiary.default,.btn.tertiary.legacy{border:1px solid var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-500, #69738c)}.btn.tertiary.default:hover,.btn.tertiary.legacy:hover{border-color:var(--Gray-Gray-400, #858ea6);color:var(--Gray-Gray-600, #475066)}.btn.tertiary.success{color:var(--Success-Success-500, #0abb87)}.btn.tertiary.success:hover{background:var(--Success-Success-50, #e7f8f3)}.btn.tertiary.info{color:var(--Info-Info-500, #50a5f1)}.btn.tertiary.info:hover{background:var(--Info-Info-50, #eef6fe)}.btn.tertiary.error{color:var(--Error-Error-500, #f46a6b)}.btn.tertiary.error:hover{background:var(--Error-Error-50, #fef0f0)}.btn.tertiary.warning{color:var(--Warning-Warning-500, #f1b44c)}.btn.tertiary.warning:hover{background:var(--Warning-Warning-50, #fef8ed)}.btn.tertiary.dropdown{color:var(--Gray-Gray-500, #69738c);font-weight:var(--font-weight-regular);font-size:var(--font-size-s);background:transparent}.btn.tertiary.disabled.default,.btn.tertiary.disabled.legacy{border:1px solid var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-400, #858ea6)}.btn.tertiary.disabled.success{color:var(--Success-Success-300, #5bd1af)}.btn.tertiary.disabled.info{color:var(--Info-Info-300, #8ac3f6)}.btn.tertiary.disabled.error{color:var(--Error-Error-300, #f89b9c)}.btn.tertiary.disabled.warning{color:var(--Warning-Warning-300, #f6cd87)}.spin{animation:spin 1s linear infinite}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}`;
 
 const DropiButton = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.dropiClick = createEvent(this, "dropiClick", 7);
+        this.onClick = createEvent(this, "onClick", 7);
     }
     /** Visual color palette */
     type = 'default';
@@ -21,10 +21,12 @@ const DropiButton = class {
     preIcon = '';
     /** Icon name to show after the text */
     postIcon = '';
+    /** Custom icon color override */
+    customIconColor = '';
     /** Button label */
     text = '';
     /** Emitted on click (not emitted when disabled or loading) */
-    dropiClick;
+    onClick;
     colorMap = {
         default: 'Primary-Primary-',
         success: 'Success-Success-',
@@ -33,6 +35,7 @@ const DropiButton = class {
         legacy: 'Secondary-Secondary-',
         warning: 'Warning-Warning-',
         dropdown: 'Gray-Gray-',
+        'default-light': 'Gray-Gray-',
     };
     get iconSize() {
         if (this.size === 'large')
@@ -55,7 +58,7 @@ const DropiButton = class {
     }
     handleClick(e) {
         if (this.state !== 'disabled' && this.state !== 'loading') {
-            this.dropiClick.emit(e);
+            this.onClick.emit(e);
         }
     }
     renderLoadingSpinner() {
@@ -66,14 +69,15 @@ const DropiButton = class {
         const hasText = this.text !== '';
         const showPostIcon = this.postIcon !== '' || this.type === 'dropdown';
         const dropdownIcon = this.type === 'dropdown' ? 'Dropdown-down' : this.postIcon;
-        return (h("button", { key: 'e924f56cb86a87ee8a314cfc5c278042a4d0a87d', class: {
+        return (h("button", { key: '4df67bd28e77c9a14fb33f3131b60ac508ca1937', class: {
                 btn: true,
                 'without-text': !hasText,
                 [this.severity]: true,
                 [this.type]: true,
                 [this.size]: true,
                 [this.state]: true,
-            }, disabled: isDisabled, onClick: (e) => this.handleClick(e) }, this.preIcon && (h("dropi-icon", { key: '6d42026da19f7bf2fc6186659b8afc48748544f1', name: this.preIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), hasText && h("span", { key: 'c71ee430fec84cd24d261dc12973ad0b472cc71c', class: "text" }, this.text), showPostIcon && (h("dropi-icon", { key: 'ff3890de446e5b48c88a980f01cce4e7b9764b24', name: dropdownIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), this.state === 'loading' && this.renderLoadingSpinner(), h("slot", { key: '3ee6aacd17a004664ad4bcf89219a8e2dc865343' })));
+                'full-width': this.fullWidth,
+            }, disabled: isDisabled, onClick: (e) => this.handleClick(e) }, this.preIcon && (h("dropi-icon", { key: '7a54bf7ebfad24786109a17af928bfc43ccc7db4', name: this.preIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), hasText && h("span", { key: 'ffb3b062d93c3a7090d971538d23c309f915b749', class: "text" }, this.text), showPostIcon && (h("dropi-icon", { key: '16127c78c5b4a3372ba89b24bc9b067e2d035cd1', name: dropdownIcon, width: this.iconSize, height: this.iconSize, color: this.fontColor })), this.state === 'loading' && this.renderLoadingSpinner(), h("slot", { key: 'a65ee231501ad83a059eb5988e96e1dcd18c5706' })));
     }
 };
 DropiButton.style = dropiButtonCss();

package/dist/esm/dropi-card-checkbox.entry.js

@@ -1,18 +1,18 @@
-import { r as registerInstance, c as createEvent, h } from './index-Tbza12Gt.js';
+import { r as registerInstance, c as createEvent, h } from './index-TXz_09YZ.js';
 
-const dropiCardCheckboxCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.container-card-check{padding:var(--Size-4, 16px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Size-2, 8px);width:100%;display:flex;align-items:center;gap:var(--Size-3, 12px);cursor:pointer;height:66px;overflow:hidden;transition:background 0.15s ease, border-color 0.15s ease}.container-card-check.disabled{border-radius:var(--Border-2, 8px);border:1px solid var(--Gray-Gray-100, #e6eaf2);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:default}.container-card-check.disabled .title-check,.container-card-check.disabled .description-text,.container-card-check.disabled .extra-info{color:var(--Gray-Gray-400, #858ea6)}.container-text{width:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:start;overflow:hidden}.title-check{color:var(--Gray-Gray-700, #32394d);font-size:var(--font-size-m, 14px);font-weight:var(--font-weight-regular, 400);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.description-text{color:var(--Gray-Gray-500, #69738c);font-size:var(--font-size-s, 12px);margin-top:var(--Size-1, 4px);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.extra-info{display:flex;justify-content:space-between;align-items:center;flex-direction:column;gap:4px;flex-shrink:0;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-600, #475066)}.extra-info h4{margin:0;font-size:var(--font-size-s, 12px)}.default-card{border:none}.is-checked{background:var(--Primary-Primary-50, #fff8f0);border:1px solid var(--Primary-Primary-500, #f49a3d)}`;
+const dropiCardCheckboxCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.container-card-check{padding:var(--Size-4, 16px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Size-2, 8px);width:100%;display:flex;align-items:center;gap:var(--Size-3, 12px);cursor:pointer;height:66px;overflow:hidden;transition:background 0.15s ease, border-color 0.15s ease}.container-card-check.disabled{border-radius:var(--Border-2, 8px);border:1px solid var(--Gray-Gray-100, #e6eaf2);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:default}.container-card-check.disabled .title-check,.container-card-check.disabled .description-text,.container-card-check.disabled .extra-info{color:var(--Gray-Gray-400, #858ea6)}.container-text{width:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:start;overflow:hidden}.title-check{color:var(--Gray-Gray-700, #32394d);font-size:var(--font-size-m, 14px);font-weight:var(--font-weight-regular, 400);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.description-text{color:var(--Gray-Gray-500, #69738c);font-size:var(--font-size-s, 12px);margin-top:var(--Size-1, 4px);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.extra-info{display:flex;justify-content:space-between;align-items:center;flex-direction:column;gap:4px;flex-shrink:0;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-600, #475066)}.extra-info h4{margin:0;font-weight:var(--font-weight-semibold);color:inherit;line-height:inherit}.default-card{border:none}.is-checked{background:var(--Primary-Primary-50, #fff8f0);border:1px solid var(--Primary-Primary-500, #f49a3d)}`;
 
 const DropiCardCheckbox = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.dropiChange = createEvent(this, "dropiChange", 7);
+        this.onChange = createEvent(this, "onChange", 7);
     }
-    /** Visual type: 'default' = no border, 'with-card' = bordered card */
+    /** Visual type — matches Angular: 'default' | 'with card' */
     type = 'default';
-    /** Whether the checkbox is checked */
-    checked = false;
-    /** Main title */
-    cardTitle = '';
+    /** Whether the checkbox is checked — matches Angular 'state' */
+    state = 'checked';
+    /** Main title — matches Angular 'title' */
+    title = 'Tittle';
     /** Optional description below title */
     description = '';
     /** Optional extra info shown on the right */
@@ -22,20 +22,23 @@ const DropiCardCheckbox = class {
     /** Disables interaction */
     disabled = false;
     /** Emitted with the new checked state when clicked */
-    dropiChange;
+    onChange;
+    get isChecked() {
+        return this.state === 'checked';
+    }
     handleClick() {
         if (this.disabled)
             return;
-        this.checked = !this.checked;
-        this.dropiChange.emit(this.checked);
+        this.state = this.isChecked ? 'default' : 'checked';
+        this.onChange.emit(this.isChecked);
     }
     render() {
-        return (h("div", { key: '9c647faab478d2817593315051b1f02d0334756d', class: {
+        return (h("div", { key: 'b6e9f4e5855a03b04102fd2206c4d478d49e4753', class: {
                 'container-card-check': true,
                 'default-card': this.type === 'default',
-                'is-checked': this.checked && this.type === 'with-card',
+                'is-checked': this.isChecked && this.type === 'with card',
                 'disabled': this.disabled,
-            }, onClick: () => this.handleClick() }, h("dropi-checkbox", { key: '31db5cd31da290692d6aa77e0129b7e4361c23aa', checked: this.checked, disabled: this.disabled }), h("div", { key: '4b5c8eeadd255a79344d634d84e3ff93fafa34b4', class: "container-text" }, h("div", { key: '30a03f764294e0b4ca8a2bf4fd1badc08d0dc7e9', class: "title-check" }, this.cardTitle), this.description && h("div", { key: '751b4fac066b17c903e56a0aa5ef16b0d4151944', class: "description-text" }, this.description)), (this.extraInfo || this.extraInfoDescription) && (h("div", { key: '6b7eec457d42169ac87d1042b65b1bebdd436a5e', class: "extra-info" }, this.extraInfo && h("div", { key: '07e1cfa079668255343570498e0ad0dc0351effb' }, this.extraInfo), this.extraInfoDescription && h("h4", { key: '3a8277e2749b9cbdaf7d5d11086c7f2ac11dc39c' }, this.extraInfoDescription)))));
+            }, onClick: () => this.handleClick() }, h("dropi-checkbox", { key: '45af833a92b8441b79e2679a8f584f74e6b0c458', checked: this.isChecked, disabled: this.disabled }), h("div", { key: 'b0678976e2f52eef02fa5cb71ae6db284b26212d', class: "container-text" }, h("div", { key: 'd5bc253eb3262223d1e9ba31b2193cd3c1d11abe', class: "title-check" }, this.title), this.description && h("div", { key: '5555ff237e6c80552dafa079de1b6901e3e672a5', class: "description-text" }, this.description)), (this.extraInfo || this.extraInfoDescription) && (h("div", { key: '675a7b4a1195d2a452f3be11d4ae1553f7b19b4b', class: "extra-info" }, this.extraInfo && h("div", { key: '33e7cec0ccc2c1c5f8afe61a54463382b11343b4' }, this.extraInfo), this.extraInfoDescription && h("h4", { key: 'f5d61a5ff4706d4bcb2cd7f818e06cff8787ac6d' }, this.extraInfoDescription)))));
     }
 };
 DropiCardCheckbox.style = dropiCardCheckboxCss();

package/dist/esm/dropi-card-product.entry.js

@@ -1,55 +1,72 @@
-import { r as registerInstance, c as createEvent, h } from './index-Tbza12Gt.js';
+import { r as registerInstance, c as createEvent, h } from './index-TXz_09YZ.js';
 
-const dropiCardProductCss = () => `:host{display:block}*,*::before,*::after{box-sizing:border-box}.card{display:flex;flex-direction:column;border:1px solid var(--Gray-Gray-100, #eceef4);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #fff);overflow:hidden;cursor:pointer;transition:box-shadow 0.2s, transform 0.2s}.card:hover{box-shadow:0 4px 16px rgba(0,0,0,0.1);transform:translateY(-2px)}.card__image-wrap{position:relative;width:100%;aspect-ratio:1;background:var(--Gray-Gray-50, #f7f8fa);overflow:hidden}.card__image{width:100%;height:100%;object-fit:cover}.card__image-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.card__badge{position:absolute;top:var(--Size-2, 8px);left:var(--Size-2, 8px);padding:2px 8px;border-radius:100px;font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-bold, 700)}.card__badge--default{background:var(--Gray-Gray-100, #eceef4);color:var(--Gray-Gray-700, #32394d)}.card__badge--success{background:var(--Success-Success-100, #d4f5de);color:var(--Success-Success-700, #0f7b2e)}.card__badge--warning{background:var(--Warning-Warning-100, #fef3cd);color:var(--Warning-Warning-700, #856404)}.card__badge--error{background:var(--Error-Error-100, #fde8e8);color:var(--Error-Error-700, #9b1c1c)}.card__badge--info{background:var(--Info-Info-100, #dbeafe);color:var(--Info-Info-700, #1d4ed8)}.card__fav{position:absolute;top:var(--Size-2, 8px);right:var(--Size-2, 8px);background:var(--Neutral-White, #fff);border:none;border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,0.12);transition:transform 0.15s}.card__fav:hover{transform:scale(1.1)}.card__fav--active{background:var(--Error-Error-50, #fef2f2)}.card__body{flex:1;padding:var(--Size-3, 12px);display:flex;flex-direction:column;gap:4px}.card__category{font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-400, #858ea6);text-transform:uppercase;letter-spacing:0.5px}.card__name{margin:0;font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-800, #1a2033);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.card__price{margin:4px 0 0;font-size:var(--font-size-m, 14px);font-weight:var(--font-weight-bold, 700);color:var(--Primary-Primary-500, #f49a3d)}.card__price-currency{font-size:var(--font-size-xs, 10px);margin-right:2px}.card__supplier{margin:0;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-400, #858ea6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card__no-stock{margin:4px 0 0;font-size:var(--font-size-xs, 10px);color:var(--Error-Error-500, #f46a6b)}.card__footer{padding:var(--Size-2, 8px) var(--Size-3, 12px) var(--Size-3, 12px)}.card__add-btn{width:100%;height:36px;display:flex;align-items:center;justify-content:center;gap:var(--Size-1, 4px);background:var(--Primary-Primary-500, #f49a3d);color:var(--Neutral-White, #fff);border:none;border-radius:var(--Border-2, 8px);font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-bold, 700);font-family:inherit;cursor:pointer;transition:background 0.15s}.card__add-btn:hover:not(:disabled){background:var(--Primary-Primary-600, #e08526)}.card__add-btn:disabled{background:var(--Gray-Gray-200, #c3c9d9);cursor:not-allowed}`;
+const dropiCardProductCss = () => `:host{display:block;font-family:'Inter', sans-serif}*,*::before,*::after{box-sizing:border-box}.dropi-card-product{position:relative;background:#ffffff;border-radius:8px;overflow:hidden;transition:all 0.2s ease-in-out;cursor:pointer;display:flex;flex-direction:column;height:100%;box-sizing:border-box;width:100%;max-width:450px;box-shadow:none}.product-image-container{padding:4px;flex-shrink:0}.product-image{position:relative;width:100%;aspect-ratio:1;border-radius:8px;border:1px solid #c3c9d9;overflow:hidden;display:flex;align-items:center;justify-content:center;background-color:#f8f9fa}.product-image img{width:100%;height:100%;object-fit:cover;border-radius:8px}.product-image img.error-img{object-fit:contain}.favorite-button{position:absolute;bottom:5px;right:6px;border-radius:8px;padding:12px;cursor:pointer;transition:all 0.2s ease-in-out;z-index:2;display:flex;align-items:center;justify-content:center;width:42px;height:40px;background:#ffffff;border:1px solid #858ea6}.favorite-button.favorite-active{background:var(--Primary-Primary-500, #f49a3d);border:1px solid var(--Primary-Primary-500, #f49a3d)}.product-info{position:relative;padding:8px;display:flex;flex-direction:column;gap:4px;flex:1;justify-content:space-between}.supplier-insignia{position:absolute;top:-24px;left:0px}.product-header{display:flex;justify-content:space-between;align-items:center;width:100%;height:26px}.category{color:#69738c;font-family:'Inter', sans-serif;font-size:12px;font-weight:400;line-height:1.5;flex:1}.stock-info{display:flex;align-items:center;gap:2px;font-family:'Inter', sans-serif;font-size:12px;font-weight:400;line-height:1.5}.stock-label{color:#69738c}.stock-value{font-weight:500}.product-name{color:#32394d;font-family:'Inter', sans-serif;font-size:16px;font-weight:500;line-height:1.5;margin:0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.supplier-info{font-family:'Inter', sans-serif;font-size:12px;line-height:1.2}.supplier-label{color:#69738c;font-weight:400}.supplier-name{color:#50a5f1;font-weight:400;margin-left:4px;cursor:pointer}.price-container{display:flex;gap:8px;margin-top:4px}.price-item{flex:1;display:flex;flex-direction:column}.price-label{color:#69738c;font-family:'Inter', sans-serif;font-size:12px;font-weight:400;line-height:1.5;height:18px;min-width:max-content}.price-value{color:#32394d;font-family:'Inter', sans-serif;font-size:14px;font-weight:700;line-height:1.1;margin-top:2px}.separator{height:1px;background:#e6eaf2;margin:0;flex-shrink:0}.action-button{background:#ffffff;border:none;border-top:1px solid #e6eaf2;padding:12px;cursor:pointer;transition:all 0.2s ease-in-out;display:flex;align-items:center;justify-content:center;gap:8px;height:40px;flex-shrink:0}.action-button--disabled{opacity:0.3;cursor:not-allowed}.button-text{font-family:'Inter', sans-serif;font-size:14px;font-weight:700;line-height:1.1;color:#f49a3d;text-align:center;white-space:nowrap}`;
 
 const DropiCardProduct = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.dropiCardClick = createEvent(this, "dropiCardClick", 7);
-        this.dropiToggleFavorite = createEvent(this, "dropiToggleFavorite", 7);
+        this.onProductClick = createEvent(this, "onProductClick", 7);
+        this.changeFavorite = createEvent(this, "changeFavorite", 7);
         this.dropiAddProduct = createEvent(this, "dropiAddProduct", 7);
+        this.dropiSupplierClick = createEvent(this, "dropiSupplierClick", 7);
     }
     /** Product image URL */
     image = '';
     /** Product name */
     productName = '';
-    /** Product price */
-    price = 0;
+    /** Sale / supplier price (Precio proveedor) */
+    salePrice = 0;
+    /** Suggested price for the dropshipper (Precio sugerido) */
+    suggestedPrice = 0;
     /** Price currency symbol */
     currency = '$';
     /** Supplier / store name */
     supplier = '';
     /** Category label */
     category = '';
+    /** Stock quantity (0 = Agotado) */
+    stock = 0;
+    /** Supplier category for insignia: 'verified' | 'premium' | 'exclusive' | '' */
+    supplierCategory = '';
     /** Show favorite button */
     showFavorite = true;
     /** Is marked as favorite */
     isFavorite = false;
-    /** Show "Add to store" button */
+    /** Show "Enviar a cliente" button */
     showAddButton = true;
-    /** Badge text (e.g. "Nuevo", "Oferta") */
-    badge = '';
-    /** Badge color variant */
-    badgeType = 'default';
-    /** Stock availability */
-    inStock = true;
-    /** Emitted when card is clicked */
-    dropiCardClick;
-    /** Emitted when favorite toggled */
-    dropiToggleFavorite;
-    /** Emitted when "Add" button clicked */
+    /** Emitted when card is clicked — matches Angular 'onProductClick' */
+    onProductClick;
+    /** Emitted when favorite toggled — matches Angular 'changeFavorite' */
+    changeFavorite;
+    /** Emitted when "Enviar a cliente" button clicked */
     dropiAddProduct;
+    /** Emitted when supplier name clicked */
+    dropiSupplierClick;
     formatPrice(val) {
         return val.toLocaleString('es-CO');
     }
+    get inStock() {
+        return this.stock > 0;
+    }
+    getStockColor() {
+        if (this.stock === 0)
+            return 'var(--Error-Error-500, #f46a6b)';
+        if (this.stock <= 10)
+            return 'var(--Warning-Warning-500, #f59e0b)';
+        return 'var(--Success-Success-500, #0abb87)';
+    }
     render() {
-        return (h("div", { key: '98684e3d5fac7968633bcd62b46dba6f0e0f5d64', class: "card", onClick: () => this.dropiCardClick.emit() }, h("div", { key: '848cf4ef786584e5b02a99249df3cfa48c41d428', class: "card__image-wrap" }, this.image
-            ? h("img", { class: "card__image", src: this.image, alt: this.productName, loading: "lazy" })
-            : h("div", { class: "card__image-placeholder" }, h("dropi-icon", { name: "Image", width: "32px", height: "32px", color: "Gray-Gray-300" })), this.badge && (h("span", { key: '7238c35891b35a0bb12a774817542323bcd33e99', class: `card__badge card__badge--${this.badgeType}` }, this.badge)), this.showFavorite && (h("button", { key: '647c8569997ff8ba96ca0d4d19a12570fb353d93', class: { 'card__fav': true, 'card__fav--active': this.isFavorite }, onClick: (e) => {
+        return (h("div", { key: '37c48cc67a7f0c7469a68052c90a2818535dce69', class: "dropi-card-product", onClick: () => this.onProductClick.emit() }, h("div", { key: '83404d72af41a88fd2abea553559b057b6fff12d', class: "product-image-container" }, h("div", { key: 'c1d5044b0bd09051e1901e897160fa47d2ded209', class: "product-image" }, h("img", { key: 'a70907ebb8bcd3a165e395a241fc60942f48c144', src: this.image || '', alt: this.productName, onError: (e) => {
+                e.target.src = './assets/utils/no-image.jpg';
+            }, class: !this.image ? 'error-img' : '' }), this.showFavorite && (h("button", { key: '24c395c652a3d0dbb18258a8975ac79eeb6154fd', class: { 'favorite-button': true, 'favorite-active': this.isFavorite }, onClick: (e) => {
                 e.stopPropagation();
                 this.isFavorite = !this.isFavorite;
-                this.dropiToggleFavorite.emit(this.isFavorite);
-            }, "aria-label": "Favorito" }, h("dropi-icon", { key: 'a9d654e3bdc5816f2c58537cb07c486a61021fcd', name: this.isFavorite ? 'Heart-filled' : 'Heart', width: "16px", height: "16px", color: this.isFavorite ? 'Error-Error-500' : 'Gray-Gray-400' })))), h("div", { key: 'c553168c5926dafb582210b680571eb9b4ae72ea', class: "card__body" }, this.category && h("span", { key: '6cee8941275bc0461c9d06b0c5bf2f0a75f14f0b', class: "card__category" }, this.category), h("p", { key: 'd4577a94b9a7b7b8b9c275987369dc56e4a0c2b4', class: "card__name" }, this.productName), h("p", { key: '2ead66bd7ce7a7f15285b8099cfea7de8d4f6d1a', class: "card__price" }, h("span", { key: '90e317dc5bdad1cbe6199ef9abd13cf6468a439b', class: "card__price-currency" }, this.currency), this.formatPrice(this.price)), this.supplier && (h("p", { key: 'f70fc28afbc468d7eca3683afbc193ec47c275f4', class: "card__supplier" }, this.supplier)), !this.inStock && (h("p", { key: '37d9911367a0e0504e661e52eee69f4628572bb1', class: "card__no-stock" }, "Sin stock disponible"))), this.showAddButton && (h("div", { key: 'eef0213d00268319b6fa9901ced750d2f06735ed', class: "card__footer" }, h("button", { key: 'f026718a0146fdea94dbcda40614354be80fa932', class: "card__add-btn", disabled: !this.inStock, onClick: (e) => { e.stopPropagation(); this.dropiAddProduct.emit(); } }, h("dropi-icon", { key: 'dc3ff5553e60df93a3eb93bab43be874f8d6582d', name: "Plus", width: "14px", height: "14px", color: "Neutral-White" }), "Agregar")))));
+                this.changeFavorite.emit(this.isFavorite);
+            }, "aria-label": "Favorito" }, h("dropi-icon", { key: 'b196e405c3046dbbb973f77e8f5c76a170154d6f', name: this.isFavorite ? 'Heart-solid' : 'Heart', width: "18px", height: "18px", color: this.isFavorite ? '#fff' : '#858ea6' }))))), h("div", { key: 'cb9d81caa32ad134093637426507a55462d25b5f', class: "product-info" }, this.supplierCategory && (h("dropi-ilustration-icon", { key: '4f642dfa0e8621094a7ab58710e592133b43cea2', class: "supplier-insignia", type: "insignia", stateInsignia: this.supplierCategory, tagProduct: true })), h("div", { key: '269a000490bf2c0eab9a0bc4f8371ed91c5b84d3', class: "product-header" }, this.category && (h("span", { key: 'af027a19e03a9ddb95c0901f01081a1a42d856f1', class: "category" }, this.category)), h("div", { key: '26d7d97df6ce9f3fadeb8e84e5a8b9cda0450e7f', class: "stock-info" }, h("span", { key: 'ef9c7537b9b2185c455189b3c1a4999f409501ba', class: "stock-label" }, "Stock:"), h("span", { key: '89fe2fe123967c57c769953d18e24015288a3d56', class: "stock-value", style: { color: this.getStockColor() } }, this.stock === 0 ? 'Agotado' : this.stock))), h("h3", { key: '79b5046ab7ea3adeca8066dcc2f174cfed3f92f3', class: "product-name" }, this.productName), this.supplier && (h("div", { key: 'a1ff7e3fcf77ad8f4c979d266aae712aff4c18b2', class: "supplier-info" }, h("span", { key: 'be92e4ddd9d0de947307bd4bfd474ae31c6f2f7c', class: "supplier-label" }, "Proveedor:"), h("span", { key: '7180d51dd2f1ecb3726aa24793184a140778afe6', class: "supplier-name", onClick: (e) => { e.stopPropagation(); this.dropiSupplierClick.emit(); } }, this.supplier))), h("div", { key: '86733596ad100c5510a347cbf73ca9e03590322b', class: "price-container" }, h("div", { key: 'c2d919ae1b106b27fdaf649a531e96167a00b787', class: "price-item" }, h("span", { key: '337611bf6f02199c99645299469e5a9d4a6428a9', class: "price-label" }, "Precio proveedor"), h("span", { key: '1c63de1e288c7fb30067908c37dd8451f302672e', class: "price-value" }, this.currency, " ", this.formatPrice(this.salePrice))), h("div", { key: 'b23b70d40afc0afca19d86b754d6476b65a22e73', class: "price-item" }, h("span", { key: '3b15127ac5c07361e6ba23107f845b835ac35406', class: "price-label" }, "Precio sugerido"), h("span", { key: '14eb8d5cdb5f6152a0a82c1428d21eebb81a6744', class: "price-value" }, this.currency, " ", this.formatPrice(this.suggestedPrice))))), h("div", { key: 'e13e6135234a25b927018265e9570ecbf2fb71dc', class: "separator" }), this.showAddButton && (h("div", { key: 'c1b70f77fda95df876436b9cf326d470eb250bd9', class: { 'action-button': true, 'action-button--disabled': !this.inStock }, onClick: (e) => {
+                e.stopPropagation();
+                if (this.inStock)
+                    this.dropiAddProduct.emit();
+            } }, h("dropi-icon", { key: 'f54207e6e1ebab2d2b0877af65b6353e02264ee4', name: "Shopping-cart-arrow-rigth", width: "20px", height: "20px", color: "#f49a3d" }), h("span", { key: 'e274c0343cdd202fa4e73e4d0843fe11d53aec6c', class: "button-text" }, "Enviar a cliente")))));
     }
 };
 DropiCardProduct.style = dropiCardProductCss();

package/dist/esm/dropi-card-section.entry.js

@@ -1,34 +1,34 @@
-import { r as registerInstance, c as createEvent, h } from './index-Tbza12Gt.js';
+import { r as registerInstance, c as createEvent, h } from './index-TXz_09YZ.js';
 
-const dropiCardSectionCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.card-section{display:flex;align-items:center;justify-content:space-between;gap:var(--Size-4, 16px);padding:var(--Size-3, 12px) var(--Size-4, 16px);background:var(--Neutral-White, #fff);border:1px solid var(--Gray-Gray-100, #e6eaf2);border-radius:var(--Border-2, 8px)}.card-section__text{flex:1}.card-section__title{margin:0 0 4px;font-family:inherit;font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-800, #1a2033)}h5.card-section__title{font-size:var(--font-size-m, 14px)}h6.card-section__title{font-size:var(--font-size-s, 12px)}.card-section__desc{margin:0;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-500, #69738c)}.card-section__control{flex-shrink:0}.card-section__dropdown-btn{display:flex;align-items:center;background:none;border:none;padding:0;cursor:pointer}`;
+const dropiCardSectionCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.card-section{display:flex;align-items:center;justify-content:space-between;gap:var(--Size-4, 16px);padding:var(--Size-3, 12px) var(--Size-4, 16px);background:var(--Neutral-White, #ffffff);border:1px solid var(--Gray-Gray-100, #e6eaf2);border-radius:var(--Border-2, 8px)}.card-section__text{flex:1}.card-section__title{margin:0 0 4px;font-family:inherit;font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-800, #1f2433)}h5.card-section__title{font-size:var(--font-size-m, 14px)}h6.card-section__title{font-size:var(--font-size-s, 12px)}.card-section__desc{margin:0;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-500, #69738c)}.card-section__control{flex-shrink:0}.card-section__dropdown-btn{display:flex;align-items:center;background:none;border:none;padding:0;cursor:pointer}`;
 
 const DropiCardSection = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.dropiChange = createEvent(this, "dropiChange", 7);
-        this.dropiClick = createEvent(this, "dropiClick", 7);
+        this.onChange = createEvent(this, "onChange", 7);
+        this.onClick = createEvent(this, "onClick", 7);
     }
-    /** Section title */
-    sectionTitle = '';
+    /** Section title — matches Angular 'title' */
+    title = 'title';
     /** Section description */
-    description = '';
+    description = 'Description';
     /** Control type on the right */
-    typeElement = 'switch';
+    typeElement = 'dropdown';
     /** Title size variant */
-    type = 'medium';
+    type = 'important';
     /** Switch checked state */
     isChecked = false;
-    /** Emitted when switch changes. e.detail = new boolean value */
-    dropiChange;
+    /** Emitted when switch changes */
+    onChange;
     /** Emitted when dropdown icon is clicked */
-    dropiClick;
+    onClick;
     render() {
-        return (h("div", { key: 'f2653804e3d325fb6859d5cc096c893c8fb08ed8', class: "card-section" }, h("div", { key: '25fb5e34a9abcdc6a2761adf7053256cb431304d', class: "card-section__text" }, this.type === 'important'
-            ? h("h5", { class: "card-section__title card-section__title--important" }, this.sectionTitle)
-            : h("h6", { class: "card-section__title" }, this.sectionTitle), this.description && h("p", { key: 'fbfb5509a685f39053aa787b57df7c9f2ba1b6eb', class: "card-section__desc" }, this.description)), h("div", { key: 'f5e6a3d27b08cd6d8be791d9d8bb007c2859d9d2', class: "card-section__control" }, this.typeElement === 'switch' ? (h("dropi-switch", { isChecked: this.isChecked, onDropiChange: (e) => {
+        return (h("div", { key: 'f0afbda9991af5b381a65dd5e620ca3d8e50791f', class: "card-section" }, h("div", { key: 'bb0a62ec9840a762ea3be5c342adbc431f26ba7e', class: "card-section__text" }, this.type === 'important'
+            ? h("h5", { class: "card-section__title card-section__title--important" }, this.title)
+            : h("h6", { class: "card-section__title" }, this.title), this.description && h("p", { key: 'd8ae14dfb52783a44c1f9edac1c9c388422f58e7', class: "card-section__desc" }, this.description)), h("div", { key: '927e20c496006fa26fcbc533faa3b55b890008dd', class: "card-section__control" }, this.typeElement === 'switch' ? (h("dropi-switch", { isChecked: this.isChecked, onOnChange: (e) => {
                 this.isChecked = e.detail;
-                this.dropiChange.emit(e.detail);
-            } })) : (h("button", { class: "card-section__dropdown-btn", onClick: () => this.dropiClick.emit(), "aria-label": "Expandir" }, h("dropi-icon", { name: "Dropdown-down", width: "20px", height: "20px", color: "Gray-Gray-500" }))))));
+                this.onChange.emit(e.detail);
+            } })) : (h("button", { class: "card-section__dropdown-btn", onClick: () => this.onClick.emit(), "aria-label": "Expandir" }, h("dropi-icon", { name: "Dropdown-down", width: "20px", height: "20px", color: "Gray-Gray-500" }))))));
     }
 };
 DropiCardSection.style = dropiCardSectionCss();

package/dist/esm/dropi-carousel.entry.js

@@ -1,78 +1,143 @@
-import { r as registerInstance, c as createEvent, h } from './index-Tbza12Gt.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-TXz_09YZ.js';
 
-const dropiCarouselCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.carousel{display:flex;flex-direction:column;gap:var(--Size-2, 8px);width:100%}.carousel__stage{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:var(--Border-2, 8px);background:var(--Gray-Gray-100, #eceef4)}.carousel__slide{position:absolute;inset:0;opacity:0;transition:opacity 0.4s ease;pointer-events:none}.carousel__slide--active{opacity:1;pointer-events:all}.carousel__img{width:100%;height:100%}.carousel__nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0, 0, 0, 0.4);border:none;border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background 0.15s;z-index:1}.carousel__nav:hover{background:rgba(0,0,0,0.65)}.carousel__nav--prev{left:var(--Size-2, 8px)}.carousel__nav--next{right:var(--Size-2, 8px)}.carousel__dots{display:flex;justify-content:center;gap:var(--Size-1, 4px)}.carousel__dot{width:8px;height:8px;border-radius:50%;border:none;background:var(--Gray-Gray-300, #a0a9c0);cursor:pointer;padding:0;transition:background 0.2s, transform 0.2s}.carousel__dot--active{background:var(--Primary-Primary-500, #f49a3d);transform:scale(1.3)}.carousel__thumbs{display:flex;gap:var(--Size-2, 8px);overflow-x:auto;padding-bottom:2px}.carousel__thumbs::-webkit-scrollbar{height:4px}.carousel__thumbs::-webkit-scrollbar-thumb{background:var(--Gray-Gray-200, #c3c9d9);border-radius:2px}.carousel__thumb{width:56px;height:56px;object-fit:cover;border-radius:var(--Border-1, 4px);cursor:pointer;flex-shrink:0;opacity:0.5;border:2px solid transparent;transition:opacity 0.15s, border-color 0.15s}.carousel__thumb:hover{opacity:0.8}.carousel__thumb--active{opacity:1;border-color:var(--Primary-Primary-500, #f49a3d)}`;
+const dropiCarouselCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.dropi-carousel-container{display:flex;flex-direction:column;position:relative;width:100%;max-width:100%;overflow:hidden;padding:0 var(--Size-4)}.dropi-carousel-content{display:flex;align-items:center;position:relative;padding:1rem 0;width:100%}.dropi-carousel-items-content{overflow:hidden;flex:1;padding:0;width:100%;max-width:100%}.dropi-carousel-items-container{display:flex;padding-bottom:var(--Size-3);will-change:transform}.dropi-carousel-item{flex:0 0 auto;padding:0 0.5rem;box-sizing:border-box}.dropi-carousel-item>*{width:100%;box-sizing:border-box;display:block}.dropi-carousel-nav{display:flex;width:40px;height:40px;justify-content:center;align-items:center;cursor:pointer;transition:all 0.2s;flex-shrink:0;z-index:1;border-radius:var(--Border-5);background:var(--Neutral-White, #fff);box-shadow:var(--Shadow-medium);border:none;appearance:none;padding:0}.dropi-carousel-nav:hover{background:var(--Gray-Gray-50)}.dropi-carousel-nav:disabled{opacity:0.4;cursor:not-allowed;box-shadow:none}.dropi-carousel-prev{margin-right:1rem}.dropi-carousel-next{margin-left:1rem}.dropi-carousel-indicators{display:flex;justify-content:center;gap:0.5rem;list-style:none;padding:1rem 0 0 0;margin:0}.dropi-carousel-indicators li{cursor:pointer}.dropi-carousel-indicators li button{width:1rem;height:1rem;border-radius:50%;border:1px solid var(--Gray-Gray-100, #eceef4);background:var(--Neutral-White, #fff);cursor:pointer;transition:all 0.2s;padding:0}.dropi-carousel-indicators li.active button{background:var(--Primary-Primary-500);border-color:var(--Primary-Primary-500)}.dropi-carousel-indicators li:hover button{background:var(--Gray-Gray-200)}.vertical .dropi-carousel-content{flex-direction:column}.vertical .dropi-carousel-items-container{flex-direction:column}.vertical .dropi-carousel-prev{margin:0 0 1rem 0}.vertical .dropi-carousel-next{margin:1rem 0 0 0}@media (max-width: 768px){.dropi-carousel-container{padding:0}.dropi-carousel-item{padding:0 0.25rem}}`;
 
 const DropiCarousel = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.dropiSlideChange = createEvent(this, "dropiSlideChange", 7);
+        this.pageChange = createEvent(this, "pageChange", 7);
+        this.onPage = createEvent(this, "onPage", 7);
     }
-    /** Array of image URLs or JSON string */
-    images = [];
-    /** Alt text prefix for images */
-    altPrefix = 'Imagen';
+    get el() { return getElement(this); }
+    /** Items to display (Array of URLs or objects) */
+    value = [];
+    /** Active page index */
+    page = 0;
+    /** Number of items visible per page */
+    numVisible = 1;
+    /** Number of items to scroll per click */
+    numScroll = 1;
+    /** Orientation of the carousel */
+    orientation = 'horizontal';
     /** Show navigation arrows */
-    showArrows = true;
+    showNavigators = true;
     /** Show dot indicators */
-    showDots = true;
-    /** Show thumbnail strip */
-    showThumbs = false;
+    showIndicators = true;
     /** Autoplay interval in ms (0 = disabled) */
-    autoplay = 0;
-    /** Active index (controlled) */
-    activeIndex = 0;
-    /** Object-fit for images */
-    objectFit = 'cover';
-    parsedImages = [];
-    current = 0;
+    autoplayInterval = 0;
+    /** Infinite scrolling */
+    circular = false;
+    parsedValue = [];
+    internalPage = 0;
+    isAnimating = false;
+    totalPages = 0;
+    itemsContainer;
     timer;
-    /** Emitted when slide changes. e.detail = new index */
-    dropiSlideChange;
-    imagesChanged(val) {
-        this.parsedImages = typeof val === 'string' ? JSON.parse(val) : (val || []);
+    pageChange;
+    onPage;
+    handleValue(val) {
+        this.parsedValue = typeof val === 'string' ? JSON.parse(val) : (val || []);
+        this.updateTotalPages();
+        this.updateTransform();
     }
-    activeIndexChanged(val) {
-        this.current = val;
+    handlePage(val) {
+        this.internalPage = val;
+        this.updateTransform();
     }
     componentWillLoad() {
-        this.imagesChanged(this.images);
-        this.current = this.activeIndex;
+        this.handleValue(this.value);
+        this.internalPage = this.page;
     }
     componentDidLoad() {
-        if (this.autoplay > 0) {
+        this.updateTransform();
+        if (this.autoplayInterval > 0) {
             this.startAutoplay();
         }
+        window.addEventListener('resize', this.onResize);
     }
     disconnectedCallback() {
         this.stopAutoplay();
+        window.removeEventListener('resize', this.onResize);
     }
+    onResize = () => {
+        this.updateTotalPages();
+        this.updateTransform();
+    };
     startAutoplay() {
-        this.timer = setInterval(() => this.next(), this.autoplay);
+        this.timer = setInterval(() => this.navForward(), this.autoplayInterval);
     }
     stopAutoplay() {
         if (this.timer)
             clearInterval(this.timer);
     }
-    go(index) {
-        const len = this.parsedImages.length;
-        this.current = ((index % len) + len) % len;
-        this.activeIndex = this.current;
-        this.dropiSlideChange.emit(this.current);
+    updateTotalPages() {
+        if (!this.parsedValue.length || this.parsedValue.length <= this.numVisible) {
+            this.totalPages = 1;
+            return;
+        }
+        const totalItems = this.parsedValue.length;
+        const remainingItems = totalItems - this.numVisible;
+        this.totalPages = Math.ceil(remainingItems / this.numScroll) + 1;
+    }
+    updateTransform() {
+        if (!this.itemsContainer)
+            return;
+        const prop = this.orientation === 'vertical' ? 'translateY' : 'translateX';
+        const firstItem = this.itemsContainer.querySelector('.dropi-carousel-item');
+        if (!firstItem)
+            return;
+        const itemSize = this.orientation === 'vertical' ? firstItem.offsetHeight : firstItem.offsetWidth;
+        const itemsScrolled = this.internalPage * this.numScroll;
+        const maxScroll = Math.max(0, this.parsedValue.length - this.numVisible);
+        const safeScroll = Math.min(itemsScrolled, maxScroll);
+        const translateValue = -(safeScroll * itemSize);
+        this.itemsContainer.style.transform = `${prop}(${translateValue}px)`;
+    }
+    navForward = (e) => {
+        if (e)
+            e.preventDefault();
+        if (this.circular || this.internalPage < this.totalPages - 1) {
+            this.isAnimating = true;
+            this.internalPage = (this.internalPage + 1) % this.totalPages;
+            this.page = this.internalPage;
+            this.updateTransform();
+            this.pageChange.emit(this.internalPage);
+            setTimeout(() => (this.isAnimating = false), 500);
+        }
+    };
+    navBackward = (e) => {
+        if (e)
+            e.preventDefault();
+        if (this.circular || this.internalPage > 0) {
+            this.isAnimating = true;
+            this.internalPage = (this.internalPage - 1 + this.totalPages) % this.totalPages;
+            this.page = this.internalPage;
+            this.updateTransform();
+            this.pageChange.emit(this.internalPage);
+            setTimeout(() => (this.isAnimating = false), 500);
+        }
+    };
+    onDotClick(index) {
+        this.isAnimating = true;
+        this.internalPage = index;
+        this.page = this.internalPage;
+        this.updateTransform();
+        this.pageChange.emit(this.internalPage);
+        setTimeout(() => (this.isAnimating = false), 500);
     }
-    prev() { this.go(this.current - 1); }
-    next() { this.go(this.current + 1); }
     render() {
-        const imgs = this.parsedImages;
-        if (!imgs.length)
+        const items = this.parsedValue;
+        if (!items.length)
             return null;
-        return (h("div", { class: "carousel" }, h("div", { class: "carousel__stage" }, imgs.map((src, i) => (h("div", { class: { 'carousel__slide': true, 'carousel__slide--active': i === this.current }, "aria-hidden": i !== this.current }, h("img", { class: "carousel__img", src: src, alt: `${this.altPrefix} ${i + 1}`, style: { objectFit: this.objectFit }, loading: "lazy" })))), this.showArrows && imgs.length > 1 && (h("button", { class: "carousel__nav carousel__nav--prev", onClick: () => this.prev(), "aria-label": "Anterior" }, h("dropi-icon", { name: "Arrow-Left-2", width: "20px", height: "20px", color: "Neutral-White" }))), this.showArrows && imgs.length > 1 && (h("button", { class: "carousel__nav carousel__nav--next", onClick: () => this.next(), "aria-label": "Siguiente" }, h("dropi-icon", { name: "Arrow-Right-2", width: "20px", height: "20px", color: "Neutral-White" })))), this.showDots && imgs.length > 1 && (h("div", { class: "carousel__dots" }, imgs.map((_, i) => (h("button", { class: { 'carousel__dot': true, 'carousel__dot--active': i === this.current }, onClick: () => this.go(i), "aria-label": `Ir a diapositiva ${i + 1}` }))))), this.showThumbs && imgs.length > 1 && (h("div", { class: "carousel__thumbs" }, imgs.map((src, i) => (h("img", { class: { 'carousel__thumb': true, 'carousel__thumb--active': i === this.current }, src: src, alt: `${this.altPrefix} ${i + 1}`, onClick: () => this.go(i), loading: "lazy" })))))));
+        const itemFlexBasis = `${100 / this.numVisible}%`;
+        return (h("div", { class: { 'dropi-carousel-container': true, 'vertical': this.orientation === 'vertical' } }, h("div", { class: "dropi-carousel-content" }, this.showNavigators && items.length > this.numVisible && (h("button", { class: "dropi-carousel-nav dropi-carousel-prev", disabled: !this.circular && this.internalPage === 0, onClick: (e) => this.navBackward(e), "aria-label": "Anterior" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { d: "M14.659 17.5a.833.833 0 0 1-.589-.244l-4.43-4.431a.833.833 0 0 1 0-1.178l4.43-4.431a.834.834 0 0 1 1.179 1.178L11.42 12.25l3.83 3.829a.833.833 0 0 1-.59 1.421Z", fill: "#475066" })))), h("div", { class: "dropi-carousel-items-content" }, h("div", { class: "dropi-carousel-items-container", ref: (el) => (this.itemsContainer = el), style: { transition: this.isAnimating ? 'transform 0.5s ease' : 'none' } }, items.map((item, i) => (h("div", { class: "dropi-carousel-item", style: { flex: `0 0 ${itemFlexBasis}` } }, typeof item === 'string' ? (h("img", { src: item, alt: `Slide ${i + 1}`, loading: "lazy" })) : (h("slot", { name: `item-${i}` }))))))), this.showNavigators && items.length > this.numVisible && (h("button", { class: "dropi-carousel-nav dropi-carousel-next", disabled: !this.circular && this.internalPage >= this.totalPages - 1, onClick: (e) => this.navForward(e), "aria-label": "Siguiente" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" }, h("path", { d: "M9.341 17.5a.833.833 0 0 0 .589-.244l4.43-4.431a.833.833 0 0 0 0-1.178l-4.43-4.431a.834.834 0 0 0-1.179 1.178l3.83 3.829-3.83 3.829a.833.833 0 0 0 .59 1.421Z", fill: "#475066" }))))), this.showIndicators && this.totalPages > 1 && (h("ul", { class: "dropi-carousel-indicators" }, Array.from({ length: this.totalPages }).map((_, i) => (h("li", { class: { active: i === this.internalPage }, onClick: () => this.onDotClick(i) }, h("button", { type: "button", "aria-label": `Página ${i + 1}` }))))))));
     }
     static get watchers() { return {
-        "images": [{
-                "imagesChanged": 0
+        "value": [{
+                "handleValue": 0
             }],
-        "activeIndex": [{
-                "activeIndexChanged": 0
+        "page": [{
+                "handlePage": 0
             }]
     }; }
 };