@elxjs/ui 0.0.178 → 0.0.179

package/fesm2022/elxjs-ui.mjs

@@ -1742,6 +1742,315 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }] } });
 
+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.previousClickEventEmitter = new EventEmitter();
+        this.nextClickEventEmitter = new EventEmitter();
+        this.currentIndex = 0;
+        this.translateX = 0;
+        this.isDragging = false;
+        this.startX = 0;
+        this.currentX = 0;
+        this.initialTranslateX = 0;
+        this.dragOffset = 0;
+        this.containerWidth = 0;
+        this.maxTranslateX = 0;
+        this.minTranslateX = 0;
+        this.velocity = 0;
+        this.lastMoveTime = 0;
+        this.lastMoveX = 0;
+    }
+    ngAfterContentInit() {
+        this.calculateDimensions();
+        this.setItemWidths();
+        this.updateLimits();
+        this.items.changes.subscribe(() => {
+            this.calculateDimensions();
+            this.setItemWidths();
+            this.updateLimits();
+            this.goToFirstItem();
+        });
+        window.addEventListener('resize', () => this.onResize());
+    }
+    ngOnDestroy() {
+        window.removeEventListener('resize', () => this.onResize());
+    }
+    calculateDimensions() {
+        if (this.slidesContainer) {
+            this.containerWidth = this.slidesContainer.nativeElement.offsetWidth;
+        }
+    }
+    updateLimits() {
+        const totalWidth = this.items.length * (this.itemWidth + this.gap) - 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.calculateDimensions();
+        this.updateLimits();
+        this.updateTransform();
+    }
+    setItemWidths() {
+        this.items.forEach((item) => {
+            this.renderer.setStyle(item.nativeElement, 'width', `${this.itemWidth}px`);
+            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);
+    }
+    onMouseMove(event) {
+        if (this.isDragging) {
+            event.preventDefault();
+            this.updateDrag(event.clientX);
+        }
+    }
+    onMouseUp(event) {
+        if (this.isDragging) {
+            this.endDrag();
+        }
+    }
+    onMouseLeave(event) {
+        if (this.isDragging) {
+            this.endDrag();
+        }
+    }
+    // Touch events
+    onTouchStart(event) {
+        event.preventDefault();
+        this.startDrag(event.touches[0].clientX);
+    }
+    onTouchMove(event) {
+        if (this.isDragging) {
+            event.preventDefault();
+            this.updateDrag(event.touches[0].clientX);
+        }
+    }
+    onTouchEnd(event) {
+        if (this.isDragging) {
+            this.endDrag();
+        }
+    }
+    startDrag(clientX) {
+        this.isDragging = true;
+        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 deltaX = this.currentX - this.startX;
+        const now = Date.now();
+        const timeDelta = now - this.lastMoveTime;
+        if (timeDelta > 0) {
+            this.velocity = (clientX - this.lastMoveX) / timeDelta;
+        }
+        this.lastMoveTime = now;
+        this.lastMoveX = clientX;
+        let resistedDeltaX = deltaX;
+        const potentialTranslateX = this.initialTranslateX + deltaX;
+        // Apply softer resistance at boundaries
+        if (potentialTranslateX > this.maxTranslateX) {
+            const overDrag = potentialTranslateX - this.maxTranslateX;
+            resistedDeltaX = deltaX - (overDrag * 0.5); // Reduced resistance for more natural feel
+        }
+        else if (potentialTranslateX < this.minTranslateX) {
+            const overDrag = this.minTranslateX - potentialTranslateX;
+            resistedDeltaX = deltaX + (overDrag * 0.5); // Reduced resistance for more natural feel
+        }
+        this.dragOffset = resistedDeltaX;
+        this.updateDragPosition();
+    }
+    updateDragPosition() {
+        const newTranslateX = this.initialTranslateX + this.dragOffset;
+        this.renderer.setStyle(this.slidesContainer.nativeElement, 'transform', `translateX(${newTranslateX}px)`);
+    }
+    endDrag() {
+        if (!this.isDragging)
+            return;
+        this.isDragging = false;
+        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;
+        // More sensitive thresholds
+        const minThreshold = 0.3; // 30% of an item width
+        const dragDistance = Math.abs(this.currentX - this.startX);
+        const momentumThreshold = 0.3;
+        const hasSignificantVelocity = Math.abs(this.velocity) > momentumThreshold;
+        // If we've moved more than 30% of an item width OR have significant velocity
+        if (movedItemsFloat > minThreshold || hasSignificantVelocity || dragDistance > 60) {
+            // 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();
+        }
+        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();
+    }
+    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();
+        }
+    }
+    goToNextItems(itemCount) {
+        // Use the current index instead of visual calculation to avoid double movement
+        const maxIndex = this.getMaxIndex();
+        const newIndex = Math.min(maxIndex, this.currentIndex + itemCount);
+        if (newIndex !== this.currentIndex) {
+            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--;
+            this.updateTransform();
+            this.previousClickEventEmitter.emit();
+        }
+    }
+    nextItem() {
+        if (this.canGoNext()) {
+            this.currentIndex++;
+            this.updateTransform();
+            this.nextClickEventEmitter.emit();
+        }
+    }
+    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();
+        }
+        else {
+            this.currentIndex = Math.max(0, Math.min(this.currentIndex, this.getMaxIndex()));
+        }
+        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;
+    }
+    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" }, 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"] }] }); }
+}
+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"] }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { items: [{
+                type: ContentChildren,
+                args: ['carouselItem', { read: ElementRef }]
+            }], slidesContainer: [{
+                type: ViewChild,
+                args: ['slidesContainer']
+            }], itemWidth: [{
+                type: Input
+            }], gap: [{
+                type: Input
+            }], removeArrows: [{
+                type: Input
+            }], previousClickEventEmitter: [{
+                type: Output
+            }], nextClickEventEmitter: [{
+                type: Output
+            }] } });
+
 class EluxArrowLink {
     constructor() {
         this.title = '';
@@ -1803,5 +2112,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ElectroluxComponents, ElectroluxDesignSystemModule, EluxAccordion, EluxArrowLink, EluxBreadcrumb, EluxButton, EluxCard1, EluxCard2, EluxCard3, EluxCard4, EluxCarouselComponent, EluxChip, EluxDataTable, EluxDatepicker, EluxDropdown, EluxDropdownMultiple, EluxIcon, EluxInputSearchComponent, EluxInputSearchModalComponent, EluxLoading, EluxLoading2, EluxModal, EluxPaginator, EluxStepBar, EluxSwitch, EluxToast, ToasterService };
+export { ElectroluxComponents, ElectroluxDesignSystemModule, EluxAccordion, EluxArrowLink, EluxBreadcrumb, EluxButton, EluxCard1, EluxCard2, EluxCard3, EluxCard4, EluxCarouselComponent, EluxCarouselFixedComponent, EluxChip, EluxDataTable, EluxDatepicker, EluxDropdown, EluxDropdownMultiple, EluxIcon, EluxInputSearchComponent, EluxInputSearchModalComponent, EluxLoading, EluxLoading2, EluxModal, EluxPaginator, EluxStepBar, EluxSwitch, EluxToast, ToasterService };
 //# sourceMappingURL=elxjs-ui.mjs.map