@elxjs/ui 0.0.181 → 0.0.183

package/fesm2022/elxjs-ui.mjs

@@ -1304,7 +1304,6 @@ class EluxCarouselComponent {
         this.previousClickEventEmitter = new EventEmitter();
         this.nextClickEventEmitter = new EventEmitter();
         this.dotClickEventEmitter = new EventEmitter();
-        this.itemClickEventEmitter = new EventEmitter();
         this.currentIndex = 0;
         this.currentStepIndex = 0;
         this.offset = 0;
@@ -1321,17 +1320,21 @@ class EluxCarouselComponent {
         this.velocity = 0;
         this.lastMoveTime = 0;
         this.lastMoveX = 0;
-        this.wasDragging = false;
         this.touchStartTime = 0;
         this.touchStartX = 0;
         this.touchStartY = 0;
         this.isVerticalScroll = false;
+        this.wasDragging = false;
+        this.clicksDisabled = false;
+        this.clickListeners = [];
+        this.dragStarted = false;
+        this.mouseDownTime = 0;
     }
     ngAfterContentInit() {
         this.calculateDimensions();
         this.setItemWidths();
         this.updateLimits();
-        this.setupItemClickListeners();
+        this.setupClickPrevention();
         if (this.autoPlayInterval) {
             this.startAutoPlay();
         }
@@ -1340,7 +1343,7 @@ class EluxCarouselComponent {
             this.setItemWidths();
             this.updateLimits();
             this.goToFirstSlide();
-            this.setupItemClickListeners();
+            this.setupClickPrevention();
         });
         // Listen for window resize to recalculate dimensions
         window.addEventListener('resize', () => this.onResize());
@@ -1350,6 +1353,9 @@ class EluxCarouselComponent {
         if (this.animationId) {
             cancelAnimationFrame(this.animationId);
         }
+        // Clean up click listeners
+        this.clickListeners.forEach(unlisten => unlisten());
+        this.clickListeners = [];
         window.removeEventListener('resize', () => this.onResize());
     }
     calculateDimensions() {
@@ -1390,21 +1396,40 @@ class EluxCarouselComponent {
     // Mouse events
     onMouseDown(event) {
         event.preventDefault();
+        this.mouseDownTime = Date.now();
+        this.dragStarted = false;
         this.startDrag(event.clientX);
     }
     onMouseMove(event) {
         if (this.isDragging) {
             event.preventDefault();
+            // Mark that we've started dragging if we've moved more than 5px
+            const dragDistance = Math.abs(this.currentX - this.startX);
+            if (dragDistance > 5 && !this.dragStarted) {
+                this.dragStarted = true;
+                this.wasDragging = true;
+            }
             this.updateDrag(event.clientX);
         }
     }
     onMouseUp(event) {
         if (this.isDragging) {
+            const mouseUpTime = Date.now();
+            const holdDuration = mouseUpTime - this.mouseDownTime;
+            const mouseDistance = Math.abs(this.currentX - this.startX);
+            // Consider it a drag if:
+            // 1. We moved more than 5px, OR
+            // 2. We held the mouse down for more than 200ms and moved at all
+            if (mouseDistance > 5 || (holdDuration > 200 && mouseDistance > 0)) {
+                this.wasDragging = true;
+            }
             this.endDrag();
         }
     }
     onMouseLeave(event) {
         if (this.isDragging) {
+            // If mouse leaves while dragging, definitely consider it a drag
+            this.wasDragging = true;
             this.endDrag();
         }
     }
@@ -1427,7 +1452,6 @@ class EluxCarouselComponent {
         if (deltaY > deltaX && deltaY > 10) {
             this.isVerticalScroll = true;
             this.isDragging = false;
-            this.wasDragging = false;
             this.renderer.setStyle(this.slidesContainer.nativeElement, 'transition', 'transform 0.4s ease-out');
             return;
         }
@@ -1444,53 +1468,41 @@ class EluxCarouselComponent {
         }
         const touchDuration = Date.now() - this.touchStartTime;
         const touchDistance = Math.abs(this.currentX - this.startX);
-        // Consider it a tap if duration < 300ms and distance < 10px
-        if (touchDuration < 300 && touchDistance < 10) {
-            this.wasDragging = false;
-            this.isDragging = false;
+        // Mark as dragging if significant movement occurred
+        if (touchDistance > 10 || touchDuration > 300) {
+            this.wasDragging = true;
         }
         if (this.isDragging) {
             this.endDrag();
         }
     }
-    setupItemClickListeners() {
-        this.items.forEach((item, index) => {
-            // Remove any existing listeners
-            const newItem = item.nativeElement.cloneNode(true);
-            item.nativeElement.parentNode?.replaceChild(newItem, item.nativeElement);
-            // Add both click and touchend listeners for better mobile support
-            this.renderer.listen(newItem, 'click', (event) => {
-                this.handleItemClick(event, index, newItem);
-            });
-            this.renderer.listen(newItem, 'touchend', (event) => {
-                // Only handle touchend if it wasn't a drag
-                if (!this.wasDragging && !this.isVerticalScroll) {
-                    const touchDuration = Date.now() - this.touchStartTime;
-                    const touchDistance = Math.abs(event.changedTouches[0].clientX - this.touchStartX);
-                    if (touchDuration < 300 && touchDistance < 10) {
-                        event.preventDefault();
-                        this.handleItemClick(event, index, newItem);
-                    }
+    setupClickPrevention() {
+        // Clean up existing listeners
+        this.clickListeners.forEach(unlisten => unlisten());
+        this.clickListeners = [];
+        this.items.forEach((item) => {
+            // Only prevent click events, not mouseup which is needed for drag functionality
+            const eventHandler = (event) => {
+                if (event.type === 'click' && (this.wasDragging || this.clicksDisabled || this.dragStarted)) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    event.stopImmediatePropagation();
+                    return false;
                 }
+                return true;
+            };
+            // Only listen to click events to avoid interfering with drag functionality
+            item.nativeElement.addEventListener('click', eventHandler, true);
+            this.clickListeners.push(() => {
+                item.nativeElement.removeEventListener('click', eventHandler, true);
             });
         });
     }
-    handleItemClick(event, index, element) {
-        // Prevent click if it was preceded by a drag
-        if (this.wasDragging) {
-            event.preventDefault();
-            event.stopPropagation();
-            return;
-        }
-        this.itemClickEventEmitter.emit({
-            event,
-            index,
-            element
-        });
-    }
     startDrag(clientX) {
         this.isDragging = true;
         this.wasDragging = false;
+        this.dragStarted = false;
+        this.clicksDisabled = false;
         this.startX = clientX;
         this.currentX = clientX;
         this.initialOffset = this.offset;
@@ -1506,13 +1518,13 @@ class EluxCarouselComponent {
     updateDrag(clientX) {
         if (!this.isDragging)
             return;
-        // More lenient threshold for mobile - mark as dragging only for significant movement
-        const deltaX = Math.abs(this.currentX - this.startX);
-        if (deltaX > 15) { // Increased from 5px to 15px for mobile
-            this.wasDragging = true;
-        }
         this.currentX = clientX;
         const totalDeltaX = this.currentX - this.startX;
+        // Mark as dragging if movement is significant
+        if (Math.abs(totalDeltaX) > 5) {
+            this.wasDragging = true;
+            this.dragStarted = true;
+        }
         // Calculate velocity for momentum
         const now = Date.now();
         const timeDelta = now - this.lastMoveTime;
@@ -1545,17 +1557,25 @@ class EluxCarouselComponent {
         if (!this.isDragging)
             return;
         this.isDragging = false;
-        // Clear the wasDragging flag after a shorter delay for mobile
+        // Disable clicks temporarily after any drag
+        if (this.wasDragging || this.dragStarted) {
+            this.clicksDisabled = true;
+            setTimeout(() => {
+                this.clicksDisabled = false;
+            }, 200);
+        }
+        // Clear the wasDragging and dragStarted flags after a shorter delay
         setTimeout(() => {
             this.wasDragging = false;
-        }, 50); // Reduced from 100ms to 50ms
+            this.dragStarted = false;
+        }, 250);
         // Re-enable CSS transitions
         this.renderer.setStyle(this.slidesContainer.nativeElement, 'transition', 'transform 0.4s ease-out');
         const finalOffset = this.initialOffset + this.dragOffset;
-        const threshold = 40; // Reduced from 50px to 40px for mobile
+        const threshold = 40;
         const dragDistance = Math.abs(this.currentX - this.startX);
         // Check for momentum (velocity-based slide change)
-        const momentumThreshold = 0.3; // Reduced from 0.5 to 0.3
+        const momentumThreshold = 0.3;
         const hasSignificantVelocity = Math.abs(this.velocity) > momentumThreshold;
         if (dragDistance > threshold || hasSignificantVelocity) {
             if (this.dragOffset > 0 || (hasSignificantVelocity && this.velocity > 0)) {
@@ -1656,7 +1676,7 @@ class EluxCarouselComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EluxCarouselComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: EluxCarouselComponent, isStandalone: true, selector: "lib-elux-carousel", inputs: { itemsPerSlide: "itemsPerSlide", removeArrows: "removeArrows", removeDots: "removeDots", autoPlayInterval: "autoPlayInterval" }, outputs: { previousClickEventEmitter: "previousClickEventEmitter", nextClickEventEmitter: "nextClickEventEmitter", dotClickEventEmitter: "dotClickEventEmitter", itemClickEventEmitter: "itemClickEventEmitter" }, queries: [{ propertyName: "items", predicate: ["carouselItem"], read: ElementRef }], viewQueries: [{ propertyName: "dotsContainer", first: true, predicate: ["dotsContainer"], descendants: true }, { propertyName: "slidesContainer", first: true, predicate: ["slidesContainer"], descendants: true }], ngImport: i0, template: "<div class=\"c-carousel-container\">\n  <div \n    class=\"c-carousel-slides\" \n    #slidesContainer\n    [style.transform]=\"'translateX(' + offset + '%)'\" \n    (mousedown)=\"onMouseDown($event)\"\n    (mousemove)=\"onMouseMove($event)\"\n    (mouseup)=\"onMouseUp($event)\"\n    (mouseleave)=\"onMouseLeave($event)\"\n    (touchstart)=\"onTouchStart($event)\" \n    (touchmove)=\"onTouchMove($event)\" \n    (touchend)=\"onTouchEnd($event)\">\n    <ng-content></ng-content>\n  </div>\n\n  <div class=\"c-carousel-footer\">\n    <button [hidden]=\"removeArrows\" class=\"c-carousel-nav prev\" title=\"Slide anterior\" aria-label=\"Slide anterior\" (click)=\"prevSlide()\">\n      <lib-elux-icon [icon]=\"'Chevron_Left.svg'\" [size]=\"'16'\" [sizeType]=\"'px'\" [color]=\"'#020F2E'\"></lib-elux-icon>\n    </button>\n\n    <div [hidden]=\"removeDots\" class=\"c-carousel-dots\" #dotsContainer>\n      <span\n        role=\"button\"\n        class=\"dot\"\n        *ngFor=\"let index of getStepIndexCount()\"\n        (click)=\"goToSlide(index)\"\n        (keyup)=\"goToSlide(index)\"\n        [class.active]=\"index === getCurrentStepIndex()\"\n        [attr.aria-disabled]=\"true\"\n        [attr.aria-label]=\"'pagina' + (index + 1)\"\n      >\n      </span>\n    </div>\n\n    <button [hidden]=\"removeArrows\" class=\"c-carousel-nav next\" title=\"Pr\u00F3ximo slide\" aria-label=\"Pr\u00F3ximo slide\" (click)=\"nextSlide()\">\n      <lib-elux-icon [icon]=\"'Chevron_Right.svg'\" [size]=\"'16'\" [sizeType]=\"'px'\" [color]=\"'#020F2E'\"></lib-elux-icon>\n    </button>\n  </div>\n</div>\n", styles: [".display{font-family:Electrolux Sans;font-size:48px;font-weight:700;line-height:56px}.heading-1{font-family:Electrolux Sans;font-size:34px;font-weight:700;line-height:40px}.heading-2{font-family:Electrolux Sans;font-size:28px;font-weight:600;line-height:32px}.heading-3{font-family:Electrolux Sans;font-size:20px;font-weight:600;line-height:24px}.subtitle-1{font-family:Electrolux Sans;font-size:16px;font-weight:600;line-height:20px}.body{font-family:Electrolux Sans;font-size:16px;font-weight:400;line-height:21px}.caption{font-family:Electrolux Sans;font-size:14px;font-weight:400;line-height:normal}.links{font-family:Electrolux Sans;font-size:16px;font-weight:600;line-height:normal;text-decoration-line:underline}@media screen and (max-width: 768px){.display{font-family:Electrolux Sans;font-size:40px;font-weight:700;line-height:46px}.heading-1{font-family:Electrolux Sans;font-size:28px;font-weight:600;line-height:32px}.heading-2{font-family:Electrolux Sans;font-size:24px;font-weight:600;line-height:28px}.heading-3{font-family:Electrolux Sans;font-size:20px;font-weight:600;line-height:24px}.subtitle-1{font-family:Electrolux Sans;font-size:16px;font-weight:600;line-height:20px}.body{font-family:Electrolux Sans;font-size:16px;font-weight:400;line-height:21px}.caption{font-family:Electrolux Sans;font-size:14px;font-weight:400;line-height:normal}.links{font-family:Electrolux Sans;font-size:16px;font-weight:600;line-height:normal;text-decoration-line:underline}}.c-carousel-container{position:relative;width:100%}.c-carousel-slides{display:flex;transition:transform .4s ease-out;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none;will-change:transform}.c-carousel-slides:active{cursor:grabbing}.c-carousel-item{display:flex;flex-direction:column;text-align:center;align-items:center;justify-content:center;gap:16px;height:150px;margin:6px;border:1px solid #dee7ea;border-radius:2px;cursor:pointer;pointer-events:auto}.c-carousel-item .c-span{font-weight:400;font-size:18px;color:#011e41}.c-carousel-footer{width:min-content;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:16px 0 24px}.c-carousel-footer .c-carousel-nav{background:none;border:none;cursor:pointer;padding:8px;border-radius:50px;background-color:#dfe7ea;transition:all ease-in-out .2s;z-index:2}.c-carousel-footer .c-carousel-nav:hover{transform:scale(1.1)}.c-carousel-footer .c-carousel-nav ::ng-deep span{display:block}.c-carousel-footer .c-carousel-dots{padding:6px;display:flex;text-align:center;border:1px solid #020f2e;border-radius:16px;margin:0 16px;max-width:120px;overflow:hidden;position:relative}@media (max-width: 768px){.c-carousel-footer .c-carousel-dots{margin:0 12px;max-width:100px}}.c-carousel-footer .dot{height:10px;width:10px;margin:0 5px;background-color:#dfe7ea;border-radius:50%;display:inline-block;cursor:pointer;transition:all ease-in-out .2s;flex-shrink:0}.c-carousel-footer .dot:hover,.c-carousel-footer .dot.active{background-color:#011e41}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: EluxIcon, selector: "lib-elux-icon", inputs: ["color", "useSubscription", "icon", "description", "size", "height", "width", "sizeType"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: EluxCarouselComponent, isStandalone: true, selector: "lib-elux-carousel", inputs: { itemsPerSlide: "itemsPerSlide", removeArrows: "removeArrows", removeDots: "removeDots", autoPlayInterval: "autoPlayInterval" }, outputs: { previousClickEventEmitter: "previousClickEventEmitter", nextClickEventEmitter: "nextClickEventEmitter", dotClickEventEmitter: "dotClickEventEmitter" }, queries: [{ propertyName: "items", predicate: ["carouselItem"], read: ElementRef }], viewQueries: [{ propertyName: "dotsContainer", first: true, predicate: ["dotsContainer"], descendants: true }, { propertyName: "slidesContainer", first: true, predicate: ["slidesContainer"], descendants: true }], ngImport: i0, template: "<div class=\"c-carousel-container\">\n  <div \n    class=\"c-carousel-slides\" \n    #slidesContainer\n    [style.transform]=\"'translateX(' + offset + '%)'\" \n    (mousedown)=\"onMouseDown($event)\"\n    (mousemove)=\"onMouseMove($event)\"\n    (mouseup)=\"onMouseUp($event)\"\n    (mouseleave)=\"onMouseLeave($event)\"\n    (touchstart)=\"onTouchStart($event)\" \n    (touchmove)=\"onTouchMove($event)\" \n    (touchend)=\"onTouchEnd($event)\">\n    <ng-content></ng-content>\n  </div>\n\n  <div class=\"c-carousel-footer\">\n    <button [hidden]=\"removeArrows\" class=\"c-carousel-nav prev\" title=\"Slide anterior\" aria-label=\"Slide anterior\" (click)=\"prevSlide()\">\n      <lib-elux-icon [icon]=\"'Chevron_Left.svg'\" [size]=\"'16'\" [sizeType]=\"'px'\" [color]=\"'#020F2E'\"></lib-elux-icon>\n    </button>\n\n    <div [hidden]=\"removeDots\" class=\"c-carousel-dots\" #dotsContainer>\n      <span\n        role=\"button\"\n        class=\"dot\"\n        *ngFor=\"let index of getStepIndexCount()\"\n        (click)=\"goToSlide(index)\"\n        (keyup)=\"goToSlide(index)\"\n        [class.active]=\"index === getCurrentStepIndex()\"\n        [attr.aria-disabled]=\"true\"\n        [attr.aria-label]=\"'pagina' + (index + 1)\"\n      >\n      </span>\n    </div>\n\n    <button [hidden]=\"removeArrows\" class=\"c-carousel-nav next\" title=\"Pr\u00F3ximo slide\" aria-label=\"Pr\u00F3ximo slide\" (click)=\"nextSlide()\">\n      <lib-elux-icon [icon]=\"'Chevron_Right.svg'\" [size]=\"'16'\" [sizeType]=\"'px'\" [color]=\"'#020F2E'\"></lib-elux-icon>\n    </button>\n  </div>\n</div>\n", styles: [".display{font-family:Electrolux Sans;font-size:48px;font-weight:700;line-height:56px}.heading-1{font-family:Electrolux Sans;font-size:34px;font-weight:700;line-height:40px}.heading-2{font-family:Electrolux Sans;font-size:28px;font-weight:600;line-height:32px}.heading-3{font-family:Electrolux Sans;font-size:20px;font-weight:600;line-height:24px}.subtitle-1{font-family:Electrolux Sans;font-size:16px;font-weight:600;line-height:20px}.body{font-family:Electrolux Sans;font-size:16px;font-weight:400;line-height:21px}.caption{font-family:Electrolux Sans;font-size:14px;font-weight:400;line-height:normal}.links{font-family:Electrolux Sans;font-size:16px;font-weight:600;line-height:normal;text-decoration-line:underline}@media screen and (max-width: 768px){.display{font-family:Electrolux Sans;font-size:40px;font-weight:700;line-height:46px}.heading-1{font-family:Electrolux Sans;font-size:28px;font-weight:600;line-height:32px}.heading-2{font-family:Electrolux Sans;font-size:24px;font-weight:600;line-height:28px}.heading-3{font-family:Electrolux Sans;font-size:20px;font-weight:600;line-height:24px}.subtitle-1{font-family:Electrolux Sans;font-size:16px;font-weight:600;line-height:20px}.body{font-family:Electrolux Sans;font-size:16px;font-weight:400;line-height:21px}.caption{font-family:Electrolux Sans;font-size:14px;font-weight:400;line-height:normal}.links{font-family:Electrolux Sans;font-size:16px;font-weight:600;line-height:normal;text-decoration-line:underline}}.c-carousel-container{position:relative;width:100%}.c-carousel-slides{display:flex;transition:transform .4s ease-out;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none;will-change:transform}.c-carousel-slides:active{cursor:grabbing}.c-carousel-item{display:flex;flex-direction:column;text-align:center;align-items:center;justify-content:center;gap:16px;height:150px;margin:6px;border:1px solid #dee7ea;border-radius:2px;cursor:pointer;pointer-events:auto}.c-carousel-item .c-span{font-weight:400;font-size:18px;color:#011e41}.c-carousel-footer{width:min-content;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:16px 0 24px}.c-carousel-footer .c-carousel-nav{background:none;border:none;cursor:pointer;padding:8px;border-radius:50px;background-color:#dfe7ea;transition:all ease-in-out .2s;z-index:2}.c-carousel-footer .c-carousel-nav:hover{transform:scale(1.1)}.c-carousel-footer .c-carousel-nav ::ng-deep span{display:block}.c-carousel-footer .c-carousel-dots{padding:6px;display:flex;text-align:center;border:1px solid #020f2e;border-radius:16px;margin:0 16px;max-width:120px;overflow:hidden;position:relative}@media (max-width: 768px){.c-carousel-footer .c-carousel-dots{margin:0 12px;max-width:100px}}.c-carousel-footer .dot{height:10px;width:10px;margin:0 5px;background-color:#dfe7ea;border-radius:50%;display:inline-block;cursor:pointer;transition:all ease-in-out .2s;flex-shrink:0}.c-carousel-footer .dot:hover,.c-carousel-footer .dot.active{background-color:#011e41}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: EluxIcon, selector: "lib-elux-icon", inputs: ["color", "useSubscription", "icon", "description", "size", "height", "width", "sizeType"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EluxCarouselComponent, decorators: [{
             type: Component,
@@ -1684,8 +1704,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Output
             }], dotClickEventEmitter: [{
                 type: Output
-            }], itemClickEventEmitter: [{
-                type: Output
             }] } });
 
 class EluxSwitch {
@@ -1829,15 +1847,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 class EluxCarouselFixedComponent {
     constructor(renderer) {
         this.renderer = renderer;
-        this.itemWidth = 200; // Fixed width in pixels
-        this.gap = 16; // Gap between items in pixels
-        this.removeArrows = false;
+        this.itemWidth = 200;
+        this.gap = 16;
+        this.showArrows = true;
+        this.showDots = true;
         this.previousClickEventEmitter = new EventEmitter();
         this.nextClickEventEmitter = new EventEmitter();
-        this.itemClickEventEmitter = new EventEmitter();
         this.currentIndex = 0;
         this.translateX = 0;
         this.isDragging = false;
+        this.isMouseDown = false;
         this.startX = 0;
         this.currentX = 0;
         this.initialTranslateX = 0;
@@ -1848,27 +1867,50 @@ class EluxCarouselFixedComponent {
         this.velocity = 0;
         this.lastMoveTime = 0;
         this.lastMoveX = 0;
-        this.wasDragging = false;
         this.touchStartTime = 0;
         this.touchStartX = 0;
         this.touchStartY = 0;
         this.isVerticalScroll = false;
+        this.wasDragging = false;
+        this.clicksDisabled = false;
+        this.clickListeners = [];
+        this.dragStarted = false;
+        this.mouseDownTime = 0;
+        this.calculateRightBleedContainer = () => {
+            if (this.rightBleedContainer) {
+                const el = this.rightBleedContainer.nativeElement;
+                const left = el.getBoundingClientRect().left;
+                let scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+                scrollbarWidth = scrollbarWidth == 0 || scrollbarWidth > 30 ? 0 : scrollbarWidth;
+                el.style.setProperty('--scrollbar-width', `${scrollbarWidth}px`);
+                el.style.setProperty('--left-offset', `${left}px`);
+            }
+        };
     }
     ngAfterContentInit() {
-        this.calculateDimensions();
-        this.setItemWidths();
-        this.updateLimits();
-        this.setupItemClickListeners();
-        this.items.changes.subscribe(() => {
+        setTimeout(() => {
             this.calculateDimensions();
             this.setItemWidths();
             this.updateLimits();
-            this.goToFirstItem();
-            this.setupItemClickListeners();
-        });
+            this.setupClickPrevention();
+            this.items.changes.subscribe(() => {
+                this.calculateDimensions();
+                this.setItemWidths();
+                this.updateLimits();
+                this.goToFirstItem();
+                this.setupClickPrevention();
+                // Força atualização visual dos dots
+                if (this.cd && typeof this.cd.detectChanges === 'function') {
+                    this.cd.detectChanges();
+                }
+            });
+        }, 10);
         window.addEventListener('resize', () => this.onResize());
     }
     ngOnDestroy() {
+        // Clean up click listeners
+        this.clickListeners.forEach(unlisten => unlisten());
+        this.clickListeners = [];
         window.removeEventListener('resize', () => this.onResize());
     }
     calculateDimensions() {
@@ -1877,23 +1919,41 @@ class EluxCarouselFixedComponent {
         }
     }
     updateLimits() {
-        const totalWidth = this.items.length * (this.itemWidth + this.gap) - this.gap;
+        const totalWidth = this.items.length * (this.itemWidth + this.gap);
         this.maxTranslateX = 0;
-        // Calculate minimum translateX to ensure last item is fully visible
         if (totalWidth > this.containerWidth) {
             this.minTranslateX = this.containerWidth - totalWidth;
-            // Add some padding to ensure last item is completely visible
-            const paddingOffset = this.gap;
-            this.minTranslateX -= paddingOffset;
         }
         else {
             this.minTranslateX = 0;
         }
     }
     onResize() {
+        this.calculateRightBleedContainer();
         this.calculateDimensions();
         this.updateLimits();
+        // Garante que o currentIndex não ultrapasse o novo máximo
+        const maxIndex = this.getMaxIndex();
+        if (this.currentIndex > maxIndex) {
+            this.currentIndex = maxIndex;
+        }
         this.updateTransform();
+        // Força detecção de mudanças para atualizar dots
+        if (window.ng && window.ng.getInjector) {
+            // Angular DevTools presente, não faz nada
+        }
+        else if (this.cd && typeof this.cd.detectChanges === 'function') {
+            this.cd.detectChanges();
+        }
+    }
+    ngAfterViewInit() {
+        // Garante cálculo correto após view carregada
+        setTimeout(() => {
+            this.calculateRightBleedContainer();
+            this.calculateDimensions();
+            this.updateLimits();
+            this.updateTransform();
+        });
     }
     setItemWidths() {
         this.items.forEach((item) => {
@@ -1901,31 +1961,64 @@ class EluxCarouselFixedComponent {
             this.renderer.setStyle(item.nativeElement, 'flex-shrink', '0');
             this.renderer.setStyle(item.nativeElement, 'margin-right', `${this.gap}px`);
         });
-        // Remove margin from last item
-        if (this.items.last) {
-            this.renderer.setStyle(this.items.last.nativeElement, 'margin-right', '0');
-        }
     }
     // Mouse events
     onMouseDown(event) {
         event.preventDefault();
-        this.startDrag(event.clientX);
+        this.mouseDownTime = Date.now();
+        this.dragStarted = false;
+        this.isMouseDown = true;
+        this.wasDragging = false;
+        this.clicksDisabled = false;
+        this.startX = event.clientX;
+        this.currentX = event.clientX;
+        this.initialTranslateX = this.translateX;
+        this.dragOffset = 0;
+        this.velocity = 0;
+        this.lastMoveTime = Date.now();
+        this.lastMoveX = event.clientX;
+        this.calculateDimensions();
+        this.renderer.setStyle(this.slidesContainer.nativeElement, 'transition', 'none');
     }
     onMouseMove(event) {
+        if (!this.isMouseDown)
+            return;
+        event.preventDefault();
+        const dragDistance = Math.abs(event.clientX - this.startX);
+        // Only start dragging if moved more than 5px
+        if (dragDistance > 5 && !this.isDragging) {
+            this.isDragging = true;
+            this.dragStarted = true;
+            this.wasDragging = true;
+        }
         if (this.isDragging) {
-            event.preventDefault();
             this.updateDrag(event.clientX);
         }
     }
     onMouseUp(event) {
+        if (!this.isMouseDown)
+            return;
+        this.isMouseDown = false;
         if (this.isDragging) {
+            const mouseUpTime = Date.now();
+            const holdDuration = mouseUpTime - this.mouseDownTime;
+            const mouseDistance = Math.abs(this.currentX - this.startX);
+            if (mouseDistance > 5 || (holdDuration > 200 && mouseDistance > 0)) {
+                this.wasDragging = true;
+            }
             this.endDrag();
         }
+        else {
+            // Reset transition if it was just a click
+            this.renderer.setStyle(this.slidesContainer.nativeElement, 'transition', 'transform 0.3s ease-out');
+        }
     }
     onMouseLeave(event) {
         if (this.isDragging) {
+            this.wasDragging = true;
             this.endDrag();
         }
+        this.isMouseDown = false;
     }
     // Touch events
     onTouchStart(event) {
@@ -1933,10 +2026,22 @@ class EluxCarouselFixedComponent {
         this.touchStartX = event.touches[0].clientX;
         this.touchStartY = event.touches[0].clientY;
         this.isVerticalScroll = false;
-        this.startDrag(event.touches[0].clientX);
+        this.isMouseDown = true;
+        this.wasDragging = false;
+        this.dragStarted = false;
+        this.clicksDisabled = false;
+        this.startX = event.touches[0].clientX;
+        this.currentX = event.touches[0].clientX;
+        this.initialTranslateX = this.translateX;
+        this.dragOffset = 0;
+        this.velocity = 0;
+        this.lastMoveTime = Date.now();
+        this.lastMoveX = event.touches[0].clientX;
+        this.calculateDimensions();
+        this.renderer.setStyle(this.slidesContainer.nativeElement, 'transition', 'none');
     }
     onTouchMove(event) {
-        if (!this.isDragging)
+        if (!this.isMouseDown)
             return;
         const currentX = event.touches[0].clientX;
         const currentY = event.touches[0].clientY;
@@ -1946,88 +2051,73 @@ class EluxCarouselFixedComponent {
         if (deltaY > deltaX && deltaY > 10) {
             this.isVerticalScroll = true;
             this.isDragging = false;
-            this.wasDragging = false;
+            this.isMouseDown = false;
             this.renderer.setStyle(this.slidesContainer.nativeElement, 'transition', 'transform 0.3s ease-out');
             return;
         }
-        // Only prevent default if it's a horizontal drag
-        if (deltaX > 10) {
+        // Start dragging if horizontal movement > 10px
+        if (deltaX > 10 && !this.isDragging) {
+            this.isDragging = true;
+            this.dragStarted = true;
+            this.wasDragging = true;
+        }
+        if (this.isDragging && deltaX > 10) {
             event.preventDefault();
-            this.updateDrag(event.touches[0].clientX);
+            this.updateDrag(currentX);
         }
     }
     onTouchEnd(event) {
         if (this.isVerticalScroll) {
             this.isVerticalScroll = false;
+            this.isMouseDown = false;
             return;
         }
+        this.isMouseDown = false;
         const touchDuration = Date.now() - this.touchStartTime;
         const touchDistance = Math.abs(this.currentX - this.startX);
-        // Consider it a tap if duration < 300ms and distance < 10px
-        if (touchDuration < 300 && touchDistance < 10) {
-            this.wasDragging = false;
-            this.isDragging = false;
+        // Mark as dragging if significant movement occurred
+        if (touchDistance > 10 || touchDuration > 300) {
+            this.wasDragging = true;
         }
         if (this.isDragging) {
             this.endDrag();
         }
+        else {
+            // Reset transition if it was just a tap
+            this.renderer.setStyle(this.slidesContainer.nativeElement, 'transition', 'transform 0.3s ease-out');
+        }
     }
-    setupItemClickListeners() {
-        this.items.forEach((item, index) => {
-            // Remove any existing listeners
-            const newItem = item.nativeElement.cloneNode(true);
-            item.nativeElement.parentNode?.replaceChild(newItem, item.nativeElement);
-            // Add both click and touchend listeners for better mobile support
-            this.renderer.listen(newItem, 'click', (event) => {
-                this.handleItemClick(event, index, newItem);
-            });
-            this.renderer.listen(newItem, 'touchend', (event) => {
-                // Only handle touchend if it wasn't a drag
-                if (!this.wasDragging && !this.isVerticalScroll) {
-                    const touchDuration = Date.now() - this.touchStartTime;
-                    const touchDistance = Math.abs(event.changedTouches[0].clientX - this.touchStartX);
-                    if (touchDuration < 300 && touchDistance < 10) {
-                        event.preventDefault();
-                        this.handleItemClick(event, index, newItem);
-                    }
+    setupClickPrevention() {
+        // Clean up existing listeners
+        this.clickListeners.forEach(unlisten => unlisten());
+        this.clickListeners = [];
+        this.items.forEach((item) => {
+            // Only prevent click events, not mouseup which is needed for drag functionality
+            const eventHandler = (event) => {
+                if (event.type === 'click' && (this.wasDragging || this.clicksDisabled || this.dragStarted)) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    event.stopImmediatePropagation();
+                    return false;
                 }
+                return true;
+            };
+            // Only listen to click events to avoid interfering with drag functionality
+            item.nativeElement.addEventListener('click', eventHandler, true);
+            this.clickListeners.push(() => {
+                item.nativeElement.removeEventListener('click', eventHandler, true);
             });
         });
     }
-    handleItemClick(event, index, element) {
-        // Prevent click if it was preceded by a drag
-        if (this.wasDragging) {
-            event.preventDefault();
-            event.stopPropagation();
-            return;
-        }
-        this.itemClickEventEmitter.emit({
-            event,
-            index,
-            element
-        });
-    }
-    startDrag(clientX) {
-        this.isDragging = true;
-        this.wasDragging = false;
-        this.startX = clientX;
-        this.currentX = clientX;
-        this.initialTranslateX = this.translateX;
-        this.dragOffset = 0;
-        this.velocity = 0;
-        this.lastMoveTime = Date.now();
-        this.lastMoveX = clientX;
-        this.calculateDimensions();
-        this.renderer.setStyle(this.slidesContainer.nativeElement, 'transition', 'none');
-    }
     updateDrag(clientX) {
         if (!this.isDragging)
             return;
         this.currentX = clientX;
         const totalDeltaX = this.currentX - this.startX;
-        // More lenient threshold for mobile - mark as dragging only for significant movement
-        if (Math.abs(totalDeltaX) > 15) { // Increased from 5px to 15px for mobile
+        // Mark as dragging if movement is significant
+        if (Math.abs(totalDeltaX) > 5) {
             this.wasDragging = true;
+            this.dragStarted = true;
         }
         const now = Date.now();
         const timeDelta = now - this.lastMoveTime;
@@ -2041,11 +2131,11 @@ class EluxCarouselFixedComponent {
         // Apply softer resistance at boundaries
         if (potentialTranslateX > this.maxTranslateX) {
             const overDrag = potentialTranslateX - this.maxTranslateX;
-            resistedDeltaX = totalDeltaX - (overDrag * 0.5); // Reduced resistance for more natural feel
+            resistedDeltaX = totalDeltaX - (overDrag * 0.5);
         }
         else if (potentialTranslateX < this.minTranslateX) {
             const overDrag = this.minTranslateX - potentialTranslateX;
-            resistedDeltaX = totalDeltaX + (overDrag * 0.5); // Reduced resistance for more natural feel
+            resistedDeltaX = totalDeltaX + (overDrag * 0.5);
         }
         this.dragOffset = resistedDeltaX;
         this.updateDragPosition();
@@ -2058,164 +2148,163 @@ class EluxCarouselFixedComponent {
         if (!this.isDragging)
             return;
         this.isDragging = false;
-        // Clear the wasDragging flag after a shorter delay for mobile
+        // Disable clicks temporarily after any drag
+        if (this.wasDragging || this.dragStarted) {
+            this.clicksDisabled = true;
+            setTimeout(() => {
+                this.clicksDisabled = false;
+            }, 200);
+        }
+        // Clear the wasDragging and dragStarted flags after a shorter delay
         setTimeout(() => {
             this.wasDragging = false;
-        }, 50); // Reduced from 100ms to 50ms
+            this.dragStarted = false;
+        }, 250);
         this.renderer.setStyle(this.slidesContainer.nativeElement, 'transition', 'transform 0.3s ease-out');
-        // Calculate how far we've actually moved in terms of items
-        const currentTranslateX = this.initialTranslateX + this.dragOffset;
-        const itemStep = this.itemWidth + this.gap;
-        const movedItemsFloat = Math.abs(currentTranslateX - this.initialTranslateX) / itemStep;
-        // Adjusted thresholds for better mobile experience
-        const minThreshold = 0.25; // Reduced from 0.3 to 0.25
-        const dragDistance = Math.abs(this.currentX - this.startX);
-        const momentumThreshold = 0.2; // Reduced from 0.3 to 0.2
-        const hasSignificantVelocity = Math.abs(this.velocity) > momentumThreshold;
-        // More lenient conditions for mobile
-        if (movedItemsFloat > minThreshold || hasSignificantVelocity || dragDistance > 40) { // Reduced from 60px to 40px
-            // Calculate how many items to advance based on actual drag distance
-            let itemsToAdvance = Math.round(movedItemsFloat);
-            // For velocity-based movement, use a separate calculation
-            if (hasSignificantVelocity && movedItemsFloat < 1) {
-                const velocityMultiplier = Math.abs(this.velocity) * 2;
-                itemsToAdvance = Math.max(1, Math.floor(velocityMultiplier));
-            }
-            // Ensure minimum 1 item for significant drags, but don't double count
-            if (itemsToAdvance === 0 && movedItemsFloat >= minThreshold) {
-                itemsToAdvance = 1;
-            }
-            if (this.dragOffset > 0 || (hasSignificantVelocity && this.velocity > 0)) {
-                // Dragged right - go to previous items
-                this.goToPreviousItems(itemsToAdvance);
-            }
-            else if (this.dragOffset < 0 || (hasSignificantVelocity && this.velocity < 0)) {
-                // Dragged left - go to next items
-                this.goToNextItems(itemsToAdvance);
-            }
-            else {
-                this.snapToNearestItem();
-            }
-        }
-        else {
-            // Small movement - snap to nearest item
-            this.snapToNearestItem();
-        }
+        // Snap sempre para o início da página mais próxima
+        this.snapToNearestItem();
         this.dragOffset = 0;
         this.velocity = 0;
     }
-    snapToNearestItem() {
-        const currentTranslateX = this.initialTranslateX + this.dragOffset;
-        const itemStep = this.itemWidth + this.gap;
-        // Find the closest valid position
-        let targetIndex = Math.round(-currentTranslateX / itemStep);
-        // Clamp to valid bounds
-        const maxIndex = this.getMaxIndex();
-        targetIndex = Math.max(0, Math.min(targetIndex, maxIndex));
-        this.currentIndex = targetIndex;
-        this.updateTransform();
+    getMaxIndex() {
+        // Permite avançar até que o último item esteja visível (não necessariamente alinhado à esquerda)
+        if (!this.items || this.items.length === 0)
+            return 0;
+        const visibleCount = Math.max(1, Math.floor(this.containerWidth / (this.itemWidth + this.gap)));
+        if (this.items.length <= visibleCount)
+            return 0;
+        // Última posição onde o último item aparece visível
+        return this.items.length - visibleCount;
     }
-    goToPreviousItems(itemCount) {
-        // Use the current index instead of visual calculation to avoid double movement
-        const newIndex = Math.max(0, this.currentIndex - itemCount);
-        if (newIndex !== this.currentIndex) {
-            this.currentIndex = newIndex;
-            this.updateTransform();
-            this.previousClickEventEmitter.emit();
-        }
-        else {
-            this.snapToNearestItem();
-        }
+    canGoNext() {
+        return this.currentIndex < this.getMaxIndex();
     }
-    goToNextItems(itemCount) {
-        // Use the current index instead of visual calculation to avoid double movement
+    nextItem() {
         const maxIndex = this.getMaxIndex();
-        const newIndex = Math.min(maxIndex, this.currentIndex + itemCount);
-        if (newIndex !== this.currentIndex) {
+        if (this.canGoNext()) {
+            let newIndex = this.currentIndex + 1;
+            if (newIndex > maxIndex)
+                newIndex = maxIndex;
             this.currentIndex = newIndex;
             this.updateTransform();
             this.nextClickEventEmitter.emit();
         }
-        else {
-            this.snapToNearestItem();
-        }
     }
     canGoPrevious() {
         return this.currentIndex > 0;
     }
-    canGoNext() {
-        return this.currentIndex < this.getMaxIndex();
-    }
-    goToFirstItem() {
-        this.currentIndex = 0;
-        this.updateTransform();
-    }
     prevItem() {
         if (this.canGoPrevious()) {
-            this.currentIndex--;
+            let newIndex = this.currentIndex - 1;
+            if (newIndex < 0)
+                newIndex = 0;
+            this.currentIndex = newIndex;
             this.updateTransform();
             this.previousClickEventEmitter.emit();
         }
     }
-    nextItem() {
-        if (this.canGoNext()) {
-            this.currentIndex++;
-            this.updateTransform();
-            this.nextClickEventEmitter.emit();
+    goToDot(dotIndex) {
+        const maxIndex = this.getMaxIndex();
+        let newIndex = dotIndex;
+        if (newIndex > maxIndex)
+            newIndex = maxIndex;
+        this.currentIndex = newIndex;
+        this.updateTransform();
+    }
+    snapToNearestItem() {
+        const itemStep = this.itemWidth + this.gap;
+        const position = -(this.initialTranslateX + this.dragOffset) / itemStep;
+        // Threshold: 0.3 = 30%, 0.5 = 50% (padrão)
+        const threshold = 0.3;
+        let targetIndex;
+        // Calcula quantos itens completos foram arrastados
+        const itemsMoved = Math.floor(Math.abs(position - this.currentIndex));
+        const decimal = Math.abs(position - this.currentIndex) - itemsMoved;
+        if (position > this.currentIndex) {
+            // Arrastando para frente
+            if (decimal >= threshold) {
+                targetIndex = this.currentIndex + itemsMoved + 1;
+            }
+            else {
+                targetIndex = this.currentIndex + itemsMoved;
+            }
         }
+        else if (position < this.currentIndex) {
+            // Arrastando para trás
+            if (decimal >= threshold) {
+                targetIndex = this.currentIndex - itemsMoved - 1;
+            }
+            else {
+                targetIndex = this.currentIndex - itemsMoved;
+            }
+        }
+        else {
+            // Não se moveu
+            targetIndex = this.currentIndex;
+        }
+        const maxIndex = this.getMaxIndex();
+        targetIndex = Math.max(0, Math.min(targetIndex, maxIndex));
+        this.currentIndex = targetIndex;
+        this.updateTransform();
+    }
+    getDotsArray() {
+        // Só mostra dots para cada posição possível (cada "página" possível)
+        const maxIndex = this.getMaxIndex();
+        return Array(maxIndex + 1);
+    }
+    getCurrentDotIndex() {
+        return this.currentIndex;
     }
     updateTransform() {
         const itemStep = this.itemWidth + this.gap;
         this.translateX = -this.currentIndex * itemStep;
-        // Apply strict boundaries to ensure last item is always fully visible
-        this.translateX = Math.max(this.minTranslateX, Math.min(this.maxTranslateX, this.translateX));
-        // Recalculate currentIndex based on actual translateX to stay in sync
-        if (this.translateX <= this.minTranslateX) {
-            this.currentIndex = this.getMaxIndex();
+        // Clamp para não mostrar espaço vazio à direita
+        const visibleCount = Math.max(1, Math.floor(this.containerWidth / itemStep));
+        // Inclui o gap após o último item
+        const totalWidth = this.items.length * itemStep;
+        if (this.items.length > visibleCount) {
+            const minTranslateX = this.containerWidth - totalWidth;
+            this.translateX = Math.max(this.translateX, minTranslateX);
         }
         else {
-            this.currentIndex = Math.max(0, Math.min(this.currentIndex, this.getMaxIndex()));
+            this.translateX = 0;
         }
         if (!this.isDragging && this.slidesContainer) {
             this.renderer.setStyle(this.slidesContainer.nativeElement, 'transform', `translateX(${this.translateX}px)`);
         }
     }
-    getMaxIndex() {
-        const visibleWidth = this.containerWidth;
-        const totalItemsWidth = this.items.length * (this.itemWidth + this.gap) - this.gap;
-        if (totalItemsWidth <= visibleWidth) {
-            return 0;
-        }
-        // Calculate how many complete items can fit in the visible area
-        const itemsPerView = Math.floor(visibleWidth / (this.itemWidth + this.gap));
-        // Maximum index ensures the last item is always fully visible
-        const maxIndex = Math.max(0, this.items.length - itemsPerView);
-        return maxIndex;
+    // Adicione este método para evitar erro de propriedade ausente
+    goToFirstItem() {
+        this.currentIndex = 0;
+        this.updateTransform();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EluxCarouselFixedComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: EluxCarouselFixedComponent, isStandalone: true, selector: "lib-elux-carousel-fixed", inputs: { itemWidth: "itemWidth", gap: "gap", removeArrows: "removeArrows" }, outputs: { previousClickEventEmitter: "previousClickEventEmitter", nextClickEventEmitter: "nextClickEventEmitter", itemClickEventEmitter: "itemClickEventEmitter" }, queries: [{ propertyName: "items", predicate: ["carouselItem"], read: ElementRef }], viewQueries: [{ propertyName: "slidesContainer", first: true, predicate: ["slidesContainer"], descendants: true }], ngImport: i0, template: "<div class=\"c-carousel-fixed-container\">\n  <div \n    class=\"c-carousel-fixed-slides\" \n    #slidesContainer\n    [style.transform]=\"'translateX(' + translateX + 'px)'\" \n    (mousedown)=\"onMouseDown($event)\"\n    (mousemove)=\"onMouseMove($event)\"\n    (mouseup)=\"onMouseUp($event)\"\n    (mouseleave)=\"onMouseLeave($event)\"\n    (touchstart)=\"onTouchStart($event)\" \n    (touchmove)=\"onTouchMove($event)\" \n    (touchend)=\"onTouchEnd($event)\">\n    <ng-content></ng-content>\n  </div>\n\n  <div class=\"c-carousel-fixed-footer\" [hidden]=\"removeArrows\">\n    <button \n      class=\"c-carousel-fixed-nav prev\" \n      [disabled]=\"!canGoPrevious()\"\n      title=\"Item anterior\" \n      aria-label=\"Item anterior\" \n      (click)=\"prevItem()\">\n      <lib-elux-icon [icon]=\"'Chevron_Left.svg'\" [size]=\"'16'\" [sizeType]=\"'px'\" [color]=\"'#020F2E'\"></lib-elux-icon>\n    </button>\n\n    <button \n      class=\"c-carousel-fixed-nav next\" \n      [disabled]=\"!canGoNext()\"\n      title=\"Pr\u00F3ximo item\" \n      aria-label=\"Pr\u00F3ximo item\" \n      (click)=\"nextItem()\">\n      <lib-elux-icon [icon]=\"'Chevron_Right.svg'\" [size]=\"'16'\" [sizeType]=\"'px'\" [color]=\"'#020F2E'\"></lib-elux-icon>\n    </button>\n  </div>\n</div>\n", styles: [".c-carousel-fixed-container{position:relative;width:100%;padding-right:16px}.c-carousel-fixed-slides{display:flex;transition:transform .3s ease-out;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none;will-change:transform;padding-right:16px}.c-carousel-fixed-slides:active{cursor:grabbing}.c-carousel-fixed-footer{display:flex;align-items:center;justify-content:center;gap:16px;padding:16px 0}.c-carousel-fixed-footer .c-carousel-fixed-nav{background:none;border:none;cursor:pointer;padding:8px;border-radius:50px;background-color:#dfe7ea;transition:all ease-in-out .2s;z-index:2}.c-carousel-fixed-footer .c-carousel-fixed-nav:hover:not(:disabled){transform:scale(1.1)}.c-carousel-fixed-footer .c-carousel-fixed-nav:disabled{opacity:.5;cursor:not-allowed}.c-carousel-fixed-footer .c-carousel-fixed-nav:disabled:hover{transform:none}.c-carousel-fixed-footer .c-carousel-fixed-nav ::ng-deep span{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: EluxIcon, selector: "lib-elux-icon", inputs: ["color", "useSubscription", "icon", "description", "size", "height", "width", "sizeType"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: EluxCarouselFixedComponent, isStandalone: true, selector: "lib-elux-carousel-fixed", inputs: { itemWidth: "itemWidth", gap: "gap", showArrows: "showArrows", showDots: "showDots" }, outputs: { previousClickEventEmitter: "previousClickEventEmitter", nextClickEventEmitter: "nextClickEventEmitter" }, queries: [{ propertyName: "items", predicate: ["carouselItem"], read: ElementRef }], viewQueries: [{ propertyName: "slidesContainer", first: true, predicate: ["slidesContainer"], descendants: true }, { propertyName: "rightBleedContainer", first: true, predicate: ["rightBleedContainer"], descendants: true }], ngImport: i0, template: "<div class=\"c-carousel-fixed-container\" #rightBleedContainer>\n  <div \n  class=\"c-carousel-fixed-slides\" \n  #slidesContainer\n  [style.transform]=\"'translateX(' + translateX + 'px)'\" \n  (mousedown)=\"onMouseDown($event)\"\n  (mousemove)=\"onMouseMove($event)\"\n  (mouseup)=\"onMouseUp($event)\"\n  (mouseleave)=\"onMouseLeave($event)\"\n  (touchstart)=\"onTouchStart($event)\" \n  (touchmove)=\"onTouchMove($event)\" \n  (touchend)=\"onTouchEnd($event)\">\n  <ng-content></ng-content>\n  </div>\n</div>\n<div class=\"c-carousel-fixed-footer\" *ngIf=\"showArrows || showDots\">\n    <button *ngIf=\"showArrows\"\n      class=\"c-carousel-fixed-nav prev\" \n      [disabled]=\"!canGoPrevious()\"\n      title=\"Item anterior\" \n      aria-label=\"Item anterior\" \n      (click)=\"prevItem()\">\n      <lib-elux-icon [icon]=\"'Chevron_Left.svg'\" [size]=\"'16'\" [sizeType]=\"'px'\" [color]=\"'#020F2E'\"></lib-elux-icon>\n    </button>\n\n    <div class=\"c-carousel-fixed-dots\" *ngIf=\"showDots\">\n      <ng-container *ngFor=\"let dot of getDotsArray(); let idx = index\">\n        <span \n          class=\"c-carousel-fixed-dot\" \n          [class.active]=\"idx === getCurrentDotIndex()\" \n          (click)=\"goToDot(idx)\">\n        </span>\n      </ng-container>\n    </div>\n\n    <button *ngIf=\"showArrows\"\n      class=\"c-carousel-fixed-nav next\" \n      [disabled]=\"!canGoNext()\"\n      title=\"Pr\u00F3ximo item\" \n      aria-label=\"Pr\u00F3ximo item\" \n      (click)=\"nextItem()\">\n      <lib-elux-icon [icon]=\"'Chevron_Right.svg'\" [size]=\"'16'\" [sizeType]=\"'px'\" [color]=\"'#020F2E'\"></lib-elux-icon>\n    </button>\n</div>\n", styles: [".c-carousel-fixed-container{overflow-x:hidden;width:calc(100vw - var(--left-offset, 0px) - var(--scrollbar-width, 0px))}.c-carousel-fixed-slides{display:flex;transition:transform .5s ease-out;touch-action:pan-y;cursor:grab;will-change:transform}.c-carousel-fixed-slides:active{cursor:grabbing}.c-carousel-fixed-footer{display:flex;justify-content:space-between;padding:16px}.c-carousel-fixed-footer .c-carousel-fixed-nav{background:none;border:none;cursor:pointer;padding:8px;border-radius:50px;background-color:#dfe7ea;transition:all ease-in-out .2s;z-index:2}.c-carousel-fixed-footer .c-carousel-fixed-nav:hover:not(:disabled){transform:scale(1.2)}.c-carousel-fixed-footer .c-carousel-fixed-nav:disabled{opacity:.3;cursor:not-allowed}.c-carousel-fixed-footer .c-carousel-fixed-nav:disabled:hover{transform:none}.c-carousel-fixed-footer .c-carousel-fixed-nav ::ng-deep span{display:block}.c-carousel-fixed-footer .c-carousel-fixed-dots{display:flex;align-items:center;gap:8px;margin:0 16px}.c-carousel-fixed-footer .c-carousel-fixed-dots .c-carousel-fixed-dot{width:10px;height:10px;border-radius:50%;background:#dfe7ea;transition:background .3s;cursor:pointer;display:inline-block}.c-carousel-fixed-footer .c-carousel-fixed-dots .c-carousel-fixed-dot.active{background:#011e41}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: EluxIcon, selector: "lib-elux-icon", inputs: ["color", "useSubscription", "icon", "description", "size", "height", "width", "sizeType"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EluxCarouselFixedComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'lib-elux-carousel-fixed', imports: [CommonModule, EluxIcon], template: "<div class=\"c-carousel-fixed-container\">\n  <div \n    class=\"c-carousel-fixed-slides\" \n    #slidesContainer\n    [style.transform]=\"'translateX(' + translateX + 'px)'\" \n    (mousedown)=\"onMouseDown($event)\"\n    (mousemove)=\"onMouseMove($event)\"\n    (mouseup)=\"onMouseUp($event)\"\n    (mouseleave)=\"onMouseLeave($event)\"\n    (touchstart)=\"onTouchStart($event)\" \n    (touchmove)=\"onTouchMove($event)\" \n    (touchend)=\"onTouchEnd($event)\">\n    <ng-content></ng-content>\n  </div>\n\n  <div class=\"c-carousel-fixed-footer\" [hidden]=\"removeArrows\">\n    <button \n      class=\"c-carousel-fixed-nav prev\" \n      [disabled]=\"!canGoPrevious()\"\n      title=\"Item anterior\" \n      aria-label=\"Item anterior\" \n      (click)=\"prevItem()\">\n      <lib-elux-icon [icon]=\"'Chevron_Left.svg'\" [size]=\"'16'\" [sizeType]=\"'px'\" [color]=\"'#020F2E'\"></lib-elux-icon>\n    </button>\n\n    <button \n      class=\"c-carousel-fixed-nav next\" \n      [disabled]=\"!canGoNext()\"\n      title=\"Pr\u00F3ximo item\" \n      aria-label=\"Pr\u00F3ximo item\" \n      (click)=\"nextItem()\">\n      <lib-elux-icon [icon]=\"'Chevron_Right.svg'\" [size]=\"'16'\" [sizeType]=\"'px'\" [color]=\"'#020F2E'\"></lib-elux-icon>\n    </button>\n  </div>\n</div>\n", styles: [".c-carousel-fixed-container{position:relative;width:100%;padding-right:16px}.c-carousel-fixed-slides{display:flex;transition:transform .3s ease-out;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none;will-change:transform;padding-right:16px}.c-carousel-fixed-slides:active{cursor:grabbing}.c-carousel-fixed-footer{display:flex;align-items:center;justify-content:center;gap:16px;padding:16px 0}.c-carousel-fixed-footer .c-carousel-fixed-nav{background:none;border:none;cursor:pointer;padding:8px;border-radius:50px;background-color:#dfe7ea;transition:all ease-in-out .2s;z-index:2}.c-carousel-fixed-footer .c-carousel-fixed-nav:hover:not(:disabled){transform:scale(1.1)}.c-carousel-fixed-footer .c-carousel-fixed-nav:disabled{opacity:.5;cursor:not-allowed}.c-carousel-fixed-footer .c-carousel-fixed-nav:disabled:hover{transform:none}.c-carousel-fixed-footer .c-carousel-fixed-nav ::ng-deep span{display:block}\n"] }]
+            args: [{ standalone: true, selector: 'lib-elux-carousel-fixed', imports: [CommonModule, EluxIcon], template: "<div class=\"c-carousel-fixed-container\" #rightBleedContainer>\n  <div \n  class=\"c-carousel-fixed-slides\" \n  #slidesContainer\n  [style.transform]=\"'translateX(' + translateX + 'px)'\" \n  (mousedown)=\"onMouseDown($event)\"\n  (mousemove)=\"onMouseMove($event)\"\n  (mouseup)=\"onMouseUp($event)\"\n  (mouseleave)=\"onMouseLeave($event)\"\n  (touchstart)=\"onTouchStart($event)\" \n  (touchmove)=\"onTouchMove($event)\" \n  (touchend)=\"onTouchEnd($event)\">\n  <ng-content></ng-content>\n  </div>\n</div>\n<div class=\"c-carousel-fixed-footer\" *ngIf=\"showArrows || showDots\">\n    <button *ngIf=\"showArrows\"\n      class=\"c-carousel-fixed-nav prev\" \n      [disabled]=\"!canGoPrevious()\"\n      title=\"Item anterior\" \n      aria-label=\"Item anterior\" \n      (click)=\"prevItem()\">\n      <lib-elux-icon [icon]=\"'Chevron_Left.svg'\" [size]=\"'16'\" [sizeType]=\"'px'\" [color]=\"'#020F2E'\"></lib-elux-icon>\n    </button>\n\n    <div class=\"c-carousel-fixed-dots\" *ngIf=\"showDots\">\n      <ng-container *ngFor=\"let dot of getDotsArray(); let idx = index\">\n        <span \n          class=\"c-carousel-fixed-dot\" \n          [class.active]=\"idx === getCurrentDotIndex()\" \n          (click)=\"goToDot(idx)\">\n        </span>\n      </ng-container>\n    </div>\n\n    <button *ngIf=\"showArrows\"\n      class=\"c-carousel-fixed-nav next\" \n      [disabled]=\"!canGoNext()\"\n      title=\"Pr\u00F3ximo item\" \n      aria-label=\"Pr\u00F3ximo item\" \n      (click)=\"nextItem()\">\n      <lib-elux-icon [icon]=\"'Chevron_Right.svg'\" [size]=\"'16'\" [sizeType]=\"'px'\" [color]=\"'#020F2E'\"></lib-elux-icon>\n    </button>\n</div>\n", styles: [".c-carousel-fixed-container{overflow-x:hidden;width:calc(100vw - var(--left-offset, 0px) - var(--scrollbar-width, 0px))}.c-carousel-fixed-slides{display:flex;transition:transform .5s ease-out;touch-action:pan-y;cursor:grab;will-change:transform}.c-carousel-fixed-slides:active{cursor:grabbing}.c-carousel-fixed-footer{display:flex;justify-content:space-between;padding:16px}.c-carousel-fixed-footer .c-carousel-fixed-nav{background:none;border:none;cursor:pointer;padding:8px;border-radius:50px;background-color:#dfe7ea;transition:all ease-in-out .2s;z-index:2}.c-carousel-fixed-footer .c-carousel-fixed-nav:hover:not(:disabled){transform:scale(1.2)}.c-carousel-fixed-footer .c-carousel-fixed-nav:disabled{opacity:.3;cursor:not-allowed}.c-carousel-fixed-footer .c-carousel-fixed-nav:disabled:hover{transform:none}.c-carousel-fixed-footer .c-carousel-fixed-nav ::ng-deep span{display:block}.c-carousel-fixed-footer .c-carousel-fixed-dots{display:flex;align-items:center;gap:8px;margin:0 16px}.c-carousel-fixed-footer .c-carousel-fixed-dots .c-carousel-fixed-dot{width:10px;height:10px;border-radius:50%;background:#dfe7ea;transition:background .3s;cursor:pointer;display:inline-block}.c-carousel-fixed-footer .c-carousel-fixed-dots .c-carousel-fixed-dot.active{background:#011e41}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { items: [{
                 type: ContentChildren,
                 args: ['carouselItem', { read: ElementRef }]
             }], slidesContainer: [{
                 type: ViewChild,
                 args: ['slidesContainer']
+            }], rightBleedContainer: [{
+                type: ViewChild,
+                args: ['rightBleedContainer', { static: false }]
             }], itemWidth: [{
                 type: Input
             }], gap: [{
                 type: Input
-            }], removeArrows: [{
+            }], showArrows: [{
+                type: Input
+            }], showDots: [{
                 type: Input
             }], previousClickEventEmitter: [{
                 type: Output
             }], nextClickEventEmitter: [{
                 type: Output
-            }], itemClickEventEmitter: [{
-                type: Output
             }] } });
 
 class EluxArrowLink {