@elxjs/ui 0.0.200 → 0.0.202
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/card-article/card-article.component.mjs +2 -2
- package/esm2022/lib/components/carousel/carousel.component.mjs +30 -54
- package/esm2022/lib/components/carousel-bleed/carousel-bleed.component.mjs +536 -0
- package/esm2022/lib/components/carousel-fixed-deprecated/carousel-fixed.component.mjs +472 -0
- package/esm2022/lib/components/index.mjs +3 -2
- package/fesm2022/elxjs-ui.mjs +563 -56
- package/fesm2022/elxjs-ui.mjs.map +1 -1
- package/lib/components/carousel/carousel.component.d.ts +4 -7
- package/lib/components/carousel-bleed/carousel-bleed.component.d.ts +80 -0
- package/lib/components/index.d.ts +2 -1
- package/package.json +1 -1
- package/esm2022/lib/components/carousel-fixed/carousel-fixed.component.mjs +0 -472
- /package/lib/components/{carousel-fixed → carousel-fixed-deprecated}/carousel-fixed.component.d.ts +0 -0
package/fesm2022/elxjs-ui.mjs
CHANGED
|
@@ -1331,9 +1331,7 @@ class EluxCarouselComponent {
|
|
|
1331
1331
|
constructor(renderer) {
|
|
1332
1332
|
this.renderer = renderer;
|
|
1333
1333
|
this.itemsPerSlide = 4;
|
|
1334
|
-
this.
|
|
1335
|
-
this.removeDots = false;
|
|
1336
|
-
this.autoPlayInterval = null;
|
|
1334
|
+
this.title = '';
|
|
1337
1335
|
this.previousClickEventEmitter = new EventEmitter();
|
|
1338
1336
|
this.nextClickEventEmitter = new EventEmitter();
|
|
1339
1337
|
this.dotClickEventEmitter = new EventEmitter();
|
|
@@ -1368,9 +1366,6 @@ class EluxCarouselComponent {
|
|
|
1368
1366
|
this.setItemWidths();
|
|
1369
1367
|
this.updateLimits();
|
|
1370
1368
|
this.setupClickPrevention();
|
|
1371
|
-
if (this.autoPlayInterval) {
|
|
1372
|
-
this.startAutoPlay();
|
|
1373
|
-
}
|
|
1374
1369
|
this.items.changes.subscribe(() => {
|
|
1375
1370
|
this.calculateDimensions();
|
|
1376
1371
|
this.setItemWidths();
|
|
@@ -1382,7 +1377,6 @@ class EluxCarouselComponent {
|
|
|
1382
1377
|
window.addEventListener('resize', () => this.onResize());
|
|
1383
1378
|
}
|
|
1384
1379
|
ngOnDestroy() {
|
|
1385
|
-
this.stopAutoPlay();
|
|
1386
1380
|
if (this.animationId) {
|
|
1387
1381
|
cancelAnimationFrame(this.animationId);
|
|
1388
1382
|
}
|
|
@@ -1402,6 +1396,13 @@ class EluxCarouselComponent {
|
|
|
1402
1396
|
this.maxOffset = 0;
|
|
1403
1397
|
this.minOffset = -((totalSteps - 1) * 100);
|
|
1404
1398
|
}
|
|
1399
|
+
canGoNext() {
|
|
1400
|
+
const totalSteps = Math.ceil(this.items.length / this.itemsPerSlide);
|
|
1401
|
+
return this.currentStepIndex < totalSteps - 1;
|
|
1402
|
+
}
|
|
1403
|
+
canGoPrevious() {
|
|
1404
|
+
return this.currentStepIndex > 0;
|
|
1405
|
+
}
|
|
1405
1406
|
onResize() {
|
|
1406
1407
|
this.calculateDimensions();
|
|
1407
1408
|
this.updateOffset();
|
|
@@ -1412,20 +1413,6 @@ class EluxCarouselComponent {
|
|
|
1412
1413
|
this.renderer.setStyle(item.nativeElement, 'minWidth', minWidth);
|
|
1413
1414
|
});
|
|
1414
1415
|
}
|
|
1415
|
-
startAutoPlay() {
|
|
1416
|
-
this.stopAutoPlay();
|
|
1417
|
-
this.autoPlayTimer = setInterval(() => {
|
|
1418
|
-
if (!this.isDragging) {
|
|
1419
|
-
this.nextSlide();
|
|
1420
|
-
}
|
|
1421
|
-
}, (this.autoPlayInterval || 0) * 1000);
|
|
1422
|
-
}
|
|
1423
|
-
stopAutoPlay() {
|
|
1424
|
-
if (this.autoPlayTimer) {
|
|
1425
|
-
clearInterval(this.autoPlayTimer);
|
|
1426
|
-
this.autoPlayTimer = null;
|
|
1427
|
-
}
|
|
1428
|
-
}
|
|
1429
1416
|
// Mouse events
|
|
1430
1417
|
onMouseDown(event) {
|
|
1431
1418
|
event.preventDefault();
|
|
@@ -1544,7 +1531,6 @@ class EluxCarouselComponent {
|
|
|
1544
1531
|
this.lastMoveTime = Date.now();
|
|
1545
1532
|
this.lastMoveX = clientX;
|
|
1546
1533
|
this.calculateDimensions();
|
|
1547
|
-
this.stopAutoPlay();
|
|
1548
1534
|
// Disable CSS transitions during drag
|
|
1549
1535
|
this.renderer.setStyle(this.slidesContainer.nativeElement, 'transition', 'none');
|
|
1550
1536
|
}
|
|
@@ -1568,6 +1554,11 @@ class EluxCarouselComponent {
|
|
|
1568
1554
|
this.lastMoveX = clientX;
|
|
1569
1555
|
// Convert pixel movement to percentage
|
|
1570
1556
|
const dragPercentage = (totalDeltaX / this.containerWidth) * 100;
|
|
1557
|
+
if ((this.currentStepIndex === 0 && dragPercentage > 0) ||
|
|
1558
|
+
(!this.canGoNext() && dragPercentage < 0)) {
|
|
1559
|
+
this.updateOffset();
|
|
1560
|
+
return;
|
|
1561
|
+
}
|
|
1571
1562
|
// Apply resistance at boundaries
|
|
1572
1563
|
let resistedDragPercentage = dragPercentage;
|
|
1573
1564
|
const potentialOffset = this.initialOffset + dragPercentage;
|
|
@@ -1604,13 +1595,16 @@ class EluxCarouselComponent {
|
|
|
1604
1595
|
}, 250);
|
|
1605
1596
|
// Re-enable CSS transitions
|
|
1606
1597
|
this.renderer.setStyle(this.slidesContainer.nativeElement, 'transition', 'transform 0.4s ease-out');
|
|
1607
|
-
const finalOffset = this.initialOffset + this.dragOffset;
|
|
1608
1598
|
const threshold = 40;
|
|
1609
1599
|
const dragDistance = Math.abs(this.currentX - this.startX);
|
|
1610
1600
|
// Check for momentum (velocity-based slide change)
|
|
1611
1601
|
const momentumThreshold = 0.3;
|
|
1612
1602
|
const hasSignificantVelocity = Math.abs(this.velocity) > momentumThreshold;
|
|
1613
|
-
if (
|
|
1603
|
+
if ((this.currentStepIndex === 0 && (this.dragOffset > 0 || this.velocity > 0)) ||
|
|
1604
|
+
(!this.canGoNext() && (this.dragOffset < 0 || this.velocity < 0))) {
|
|
1605
|
+
this.updateOffset();
|
|
1606
|
+
}
|
|
1607
|
+
else if (dragDistance > threshold || hasSignificantVelocity) {
|
|
1614
1608
|
if (this.dragOffset > 0 || (hasSignificantVelocity && this.velocity > 0)) {
|
|
1615
1609
|
// Dragged right or has positive velocity - go to previous slide
|
|
1616
1610
|
this.prevSlide();
|
|
@@ -1631,10 +1625,6 @@ class EluxCarouselComponent {
|
|
|
1631
1625
|
// Reset drag state
|
|
1632
1626
|
this.dragOffset = 0;
|
|
1633
1627
|
this.velocity = 0;
|
|
1634
|
-
// Restart autoplay if it was enabled
|
|
1635
|
-
if (this.autoPlayInterval) {
|
|
1636
|
-
setTimeout(() => this.startAutoPlay(), 1000);
|
|
1637
|
-
}
|
|
1638
1628
|
}
|
|
1639
1629
|
getStepIndexCount() {
|
|
1640
1630
|
const totalSteps = Math.ceil(this.items.length / this.itemsPerSlide);
|
|
@@ -1657,29 +1647,19 @@ class EluxCarouselComponent {
|
|
|
1657
1647
|
this.dotClickEventEmitter.emit();
|
|
1658
1648
|
}
|
|
1659
1649
|
prevSlide() {
|
|
1660
|
-
|
|
1661
|
-
|
|
1662
|
-
|
|
1663
|
-
|
|
1664
|
-
}
|
|
1665
|
-
else {
|
|
1666
|
-
this.currentStepIndex = totalSteps - 1;
|
|
1667
|
-
this.currentIndex = Math.min(this.currentStepIndex * this.itemsPerSlide, this.items.length - this.itemsPerSlide);
|
|
1668
|
-
}
|
|
1650
|
+
if (!this.canGoPrevious())
|
|
1651
|
+
return;
|
|
1652
|
+
this.currentStepIndex--;
|
|
1653
|
+
this.currentIndex = this.currentStepIndex * this.itemsPerSlide;
|
|
1669
1654
|
this.updateOffset();
|
|
1670
1655
|
this.scrollActiveDotIntoView(this.currentStepIndex);
|
|
1671
1656
|
this.previousClickEventEmitter.emit();
|
|
1672
1657
|
}
|
|
1673
1658
|
nextSlide() {
|
|
1674
|
-
|
|
1675
|
-
|
|
1676
|
-
|
|
1677
|
-
|
|
1678
|
-
}
|
|
1679
|
-
else {
|
|
1680
|
-
this.currentStepIndex++;
|
|
1681
|
-
this.currentIndex = Math.min(this.currentStepIndex * this.itemsPerSlide, this.items.length - this.itemsPerSlide);
|
|
1682
|
-
}
|
|
1659
|
+
if (!this.canGoNext())
|
|
1660
|
+
return;
|
|
1661
|
+
this.currentStepIndex++;
|
|
1662
|
+
this.currentIndex = Math.min(this.currentStepIndex * this.itemsPerSlide, this.items.length - this.itemsPerSlide);
|
|
1683
1663
|
this.updateOffset();
|
|
1684
1664
|
this.scrollActiveDotIntoView(this.currentStepIndex);
|
|
1685
1665
|
this.nextClickEventEmitter.emit();
|
|
@@ -1709,11 +1689,11 @@ class EluxCarouselComponent {
|
|
|
1709
1689
|
});
|
|
1710
1690
|
}
|
|
1711
1691
|
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 }); }
|
|
1712
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: EluxCarouselComponent, isStandalone: true, selector: "lib-elux-carousel", inputs: { itemsPerSlide: "itemsPerSlide",
|
|
1692
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: EluxCarouselComponent, isStandalone: true, selector: "lib-elux-carousel", inputs: { itemsPerSlide: "itemsPerSlide", title: "title" }, 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 *ngIf=\"title\" class=\"c-carousel-header\">\n <div class=\"c-carousel-header-inner\">\n <div class=\"c-carousel-title\">{{ title }}</div>\n <div class=\"c-carousel-controls\">\n <button\n class=\"c-carousel-nav prev\"\n [disabled]=\"!canGoPrevious()\"\n title=\"Slide anterior\"\n aria-label=\"Slide anterior\"\n (click)=\"prevSlide()\"\n >\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-nav next\"\n [disabled]=\"!canGoNext()\"\n title=\"Pr\u00F3ximo slide\"\n aria-label=\"Pr\u00F3ximo slide\"\n (click)=\"nextSlide()\"\n >\n <lib-elux-icon [icon]=\"'Chevron_Right.svg'\" [size]=\"'16'\" [sizeType]=\"'px'\" [color]=\"'#020F2E'\"></lib-elux-icon>\n </button>\n </div>\n </div>\n </div>\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 *ngIf=\"!title\" class=\"c-carousel-nav prev\" [disabled]=\"!canGoPrevious()\" 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 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 *ngIf=\"!title\" class=\"c-carousel-nav next\" [disabled]=\"!canGoNext()\" 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-controls{display:flex;align-items:center;gap:12px}.c-carousel-nav{background:none;border:none;cursor:pointer;width:24px;height:24px;padding:0;border-radius:50%;background-color:#e9ebed;transition:all ease-in-out .2s;z-index:2;display:inline-flex;align-items:center;justify-content:center}.c-carousel-nav:hover:not(:disabled){transform:scale(1.2)}.c-carousel-nav:disabled{opacity:.2;cursor:not-allowed}.c-carousel-nav:disabled:hover{transform:none}.c-carousel-nav ::ng-deep span{display:block}.c-carousel-header{margin-bottom:32px}@media (min-width: 992px){.c-carousel-header{margin-bottom:40px}}.c-carousel-header .c-carousel-header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}.c-carousel-header .c-carousel-header-inner .c-carousel-title{font-size:20px;font-weight:600;line-height:24px;color:#011e41}@media (min-width: 992px){.c-carousel-header .c-carousel-header-inner .c-carousel-title{font-size:32px;line-height:35px}}.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:32px auto;display:flex;align-items:center;justify-content:space-between;padding:0}@media (min-width: 992px){.c-carousel-footer{margin:40px auto}}.c-carousel-footer .c-carousel-dots{padding:6px;display:flex;text-align:center;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{background-color:#011e41}.c-carousel-footer .dot.active{background-color:#3d5275}\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"] }] }); }
|
|
1713
1693
|
}
|
|
1714
1694
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EluxCarouselComponent, decorators: [{
|
|
1715
1695
|
type: Component,
|
|
1716
|
-
args: [{ standalone: true, selector: 'lib-elux-carousel', imports: [CommonModule, EluxIcon], 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
|
|
1696
|
+
args: [{ standalone: true, selector: 'lib-elux-carousel', imports: [CommonModule, EluxIcon], template: "<div class=\"c-carousel-container\">\n <div *ngIf=\"title\" class=\"c-carousel-header\">\n <div class=\"c-carousel-header-inner\">\n <div class=\"c-carousel-title\">{{ title }}</div>\n <div class=\"c-carousel-controls\">\n <button\n class=\"c-carousel-nav prev\"\n [disabled]=\"!canGoPrevious()\"\n title=\"Slide anterior\"\n aria-label=\"Slide anterior\"\n (click)=\"prevSlide()\"\n >\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-nav next\"\n [disabled]=\"!canGoNext()\"\n title=\"Pr\u00F3ximo slide\"\n aria-label=\"Pr\u00F3ximo slide\"\n (click)=\"nextSlide()\"\n >\n <lib-elux-icon [icon]=\"'Chevron_Right.svg'\" [size]=\"'16'\" [sizeType]=\"'px'\" [color]=\"'#020F2E'\"></lib-elux-icon>\n </button>\n </div>\n </div>\n </div>\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 *ngIf=\"!title\" class=\"c-carousel-nav prev\" [disabled]=\"!canGoPrevious()\" 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 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 *ngIf=\"!title\" class=\"c-carousel-nav next\" [disabled]=\"!canGoNext()\" 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-controls{display:flex;align-items:center;gap:12px}.c-carousel-nav{background:none;border:none;cursor:pointer;width:24px;height:24px;padding:0;border-radius:50%;background-color:#e9ebed;transition:all ease-in-out .2s;z-index:2;display:inline-flex;align-items:center;justify-content:center}.c-carousel-nav:hover:not(:disabled){transform:scale(1.2)}.c-carousel-nav:disabled{opacity:.2;cursor:not-allowed}.c-carousel-nav:disabled:hover{transform:none}.c-carousel-nav ::ng-deep span{display:block}.c-carousel-header{margin-bottom:32px}@media (min-width: 992px){.c-carousel-header{margin-bottom:40px}}.c-carousel-header .c-carousel-header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}.c-carousel-header .c-carousel-header-inner .c-carousel-title{font-size:20px;font-weight:600;line-height:24px;color:#011e41}@media (min-width: 992px){.c-carousel-header .c-carousel-header-inner .c-carousel-title{font-size:32px;line-height:35px}}.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:32px auto;display:flex;align-items:center;justify-content:space-between;padding:0}@media (min-width: 992px){.c-carousel-footer{margin:40px auto}}.c-carousel-footer .c-carousel-dots{padding:6px;display:flex;text-align:center;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{background-color:#011e41}.c-carousel-footer .dot.active{background-color:#3d5275}\n"] }]
|
|
1717
1697
|
}], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { items: [{
|
|
1718
1698
|
type: ContentChildren,
|
|
1719
1699
|
args: ['carouselItem', { read: ElementRef }]
|
|
@@ -1725,11 +1705,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
1725
1705
|
args: ['slidesContainer']
|
|
1726
1706
|
}], itemsPerSlide: [{
|
|
1727
1707
|
type: Input
|
|
1728
|
-
}],
|
|
1729
|
-
type: Input
|
|
1730
|
-
}], removeDots: [{
|
|
1731
|
-
type: Input
|
|
1732
|
-
}], autoPlayInterval: [{
|
|
1708
|
+
}], title: [{
|
|
1733
1709
|
type: Input
|
|
1734
1710
|
}], previousClickEventEmitter: [{
|
|
1735
1711
|
type: Output
|
|
@@ -2430,11 +2406,11 @@ class EluxCardArticle {
|
|
|
2430
2406
|
return title.length > this.BREAK_VALUE ? `${title.substring(0, this.BREAK_VALUE)}...` : title;
|
|
2431
2407
|
}
|
|
2432
2408
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EluxCardArticle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2433
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: EluxCardArticle, isStandalone: true, selector: "lib-elux-card-article", inputs: { title: "title", routerLink: "routerLink", image: "image", imageAlt: "imageAlt" }, ngImport: i0, template: "<a [routerLink]=\"routerLink\" class=\"card-article\">\n <div class=\"card-article__image-wrapper\">\n <img [src]=\"image\" [alt]=\"imageAlt\" class=\"card-article__image\" />\n </div>\n <div class=\"card-article__content\">\n <h3 class=\"card-article__title\">{{ truncateTitle(title) }}</h3>\n <span class=\"card-article__link\">\n <lib-elux-icon [icon]=\"'Link.svg'\" size=\"18\"/>\n Acessar\n </span>\n </div>\n</a>", 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}}.card-article{display:flex;flex-direction:column;background-color:#f5f5f0;border-radius:4px;overflow:hidden;text-decoration:none;transition:transform .3s ease,box-shadow .3s ease;height:100%;width:100%;min-width:160px;max-width:330px}.card-article:hover{transform:translateY(-4px);box-shadow:0 4px 12px #0000001a}.card-article__image-wrapper{width:100%;height:120px;overflow:hidden}.card-article__image{width:100%;height:100%;object-fit:cover;display:block}.card-article__content{height:150px;padding:24px;display:flex;flex-direction:column;justify-content:space-between}.card-article__title{color:#2b3227;font-size:16px;font-weight:600;line-height:19px}.card-article__link{display:inline-flex;align-items:center;gap:6px;color:#2b3227;font-size:14px;font-weight:500;text-decoration:underline;cursor:pointer}@media (min-width: 992px){.card-article{width:100%;min-width:
|
|
2409
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: EluxCardArticle, isStandalone: true, selector: "lib-elux-card-article", inputs: { title: "title", routerLink: "routerLink", image: "image", imageAlt: "imageAlt" }, ngImport: i0, template: "<a [routerLink]=\"routerLink\" class=\"card-article\">\n <div class=\"card-article__image-wrapper\">\n <img [src]=\"image\" [alt]=\"imageAlt\" class=\"card-article__image\" />\n </div>\n <div class=\"card-article__content\">\n <h3 class=\"card-article__title\">{{ truncateTitle(title) }}</h3>\n <span class=\"card-article__link\">\n <lib-elux-icon [icon]=\"'Link.svg'\" size=\"18\"/>\n Acessar\n </span>\n </div>\n</a>", 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}}.card-article{display:flex;flex-direction:column;background-color:#f5f5f0;border-radius:4px;overflow:hidden;text-decoration:none;transition:transform .3s ease,box-shadow .3s ease;height:100%;width:100%;min-width:160px;max-width:330px}.card-article:hover{transform:translateY(-4px);box-shadow:0 4px 12px #0000001a}.card-article__image-wrapper{width:100%;height:120px;overflow:hidden}.card-article__image{width:100%;height:100%;object-fit:cover;display:block}.card-article__content{height:150px;padding:24px;display:flex;flex-direction:column;justify-content:space-between}.card-article__title{color:#2b3227;font-size:16px;font-weight:600;line-height:19px}.card-article__link{display:inline-flex;align-items:center;gap:6px;color:#2b3227;font-size:14px;font-weight:500;text-decoration:underline;cursor:pointer}@media (min-width: 992px){.card-article{width:100%;min-width:210px;max-width:350px}.card-article__image-wrapper{width:100%;height:200px;overflow:hidden}.card-article__title{color:#2b3227;font-size:20px;font-weight:600;line-height:24px}}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: EluxIcon, selector: "lib-elux-icon", inputs: ["color", "useSubscription", "icon", "description", "size", "height", "width", "sizeType"] }] }); }
|
|
2434
2410
|
}
|
|
2435
2411
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EluxCardArticle, decorators: [{
|
|
2436
2412
|
type: Component,
|
|
2437
|
-
args: [{ standalone: true, imports: [RouterModule, CommonModule, EluxIcon], selector: 'lib-elux-card-article', template: "<a [routerLink]=\"routerLink\" class=\"card-article\">\n <div class=\"card-article__image-wrapper\">\n <img [src]=\"image\" [alt]=\"imageAlt\" class=\"card-article__image\" />\n </div>\n <div class=\"card-article__content\">\n <h3 class=\"card-article__title\">{{ truncateTitle(title) }}</h3>\n <span class=\"card-article__link\">\n <lib-elux-icon [icon]=\"'Link.svg'\" size=\"18\"/>\n Acessar\n </span>\n </div>\n</a>", 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}}.card-article{display:flex;flex-direction:column;background-color:#f5f5f0;border-radius:4px;overflow:hidden;text-decoration:none;transition:transform .3s ease,box-shadow .3s ease;height:100%;width:100%;min-width:160px;max-width:330px}.card-article:hover{transform:translateY(-4px);box-shadow:0 4px 12px #0000001a}.card-article__image-wrapper{width:100%;height:120px;overflow:hidden}.card-article__image{width:100%;height:100%;object-fit:cover;display:block}.card-article__content{height:150px;padding:24px;display:flex;flex-direction:column;justify-content:space-between}.card-article__title{color:#2b3227;font-size:16px;font-weight:600;line-height:19px}.card-article__link{display:inline-flex;align-items:center;gap:6px;color:#2b3227;font-size:14px;font-weight:500;text-decoration:underline;cursor:pointer}@media (min-width: 992px){.card-article{width:100%;min-width:
|
|
2413
|
+
args: [{ standalone: true, imports: [RouterModule, CommonModule, EluxIcon], selector: 'lib-elux-card-article', template: "<a [routerLink]=\"routerLink\" class=\"card-article\">\n <div class=\"card-article__image-wrapper\">\n <img [src]=\"image\" [alt]=\"imageAlt\" class=\"card-article__image\" />\n </div>\n <div class=\"card-article__content\">\n <h3 class=\"card-article__title\">{{ truncateTitle(title) }}</h3>\n <span class=\"card-article__link\">\n <lib-elux-icon [icon]=\"'Link.svg'\" size=\"18\"/>\n Acessar\n </span>\n </div>\n</a>", 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}}.card-article{display:flex;flex-direction:column;background-color:#f5f5f0;border-radius:4px;overflow:hidden;text-decoration:none;transition:transform .3s ease,box-shadow .3s ease;height:100%;width:100%;min-width:160px;max-width:330px}.card-article:hover{transform:translateY(-4px);box-shadow:0 4px 12px #0000001a}.card-article__image-wrapper{width:100%;height:120px;overflow:hidden}.card-article__image{width:100%;height:100%;object-fit:cover;display:block}.card-article__content{height:150px;padding:24px;display:flex;flex-direction:column;justify-content:space-between}.card-article__title{color:#2b3227;font-size:16px;font-weight:600;line-height:19px}.card-article__link{display:inline-flex;align-items:center;gap:6px;color:#2b3227;font-size:14px;font-weight:500;text-decoration:underline;cursor:pointer}@media (min-width: 992px){.card-article{width:100%;min-width:210px;max-width:350px}.card-article__image-wrapper{width:100%;height:200px;overflow:hidden}.card-article__title{color:#2b3227;font-size:20px;font-weight:600;line-height:24px}}\n"] }]
|
|
2438
2414
|
}], propDecorators: { title: [{
|
|
2439
2415
|
type: Input
|
|
2440
2416
|
}], routerLink: [{
|
|
@@ -2590,6 +2566,537 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
2590
2566
|
type: Input
|
|
2591
2567
|
}] } });
|
|
2592
2568
|
|
|
2569
|
+
class EluxCarouselBleedComponent {
|
|
2570
|
+
constructor(renderer) {
|
|
2571
|
+
this.renderer = renderer;
|
|
2572
|
+
this.itemWidth = 200;
|
|
2573
|
+
this.gap = 16;
|
|
2574
|
+
this.title = '';
|
|
2575
|
+
this.previousClickEventEmitter = new EventEmitter();
|
|
2576
|
+
this.nextClickEventEmitter = new EventEmitter();
|
|
2577
|
+
this.dotClickEventEmitter = new EventEmitter();
|
|
2578
|
+
this.currentIndex = 0;
|
|
2579
|
+
this.translateX = 0;
|
|
2580
|
+
this.isDragging = false;
|
|
2581
|
+
this.isMouseDown = false;
|
|
2582
|
+
this.startX = 0;
|
|
2583
|
+
this.currentX = 0;
|
|
2584
|
+
this.initialTranslateX = 0;
|
|
2585
|
+
this.dragOffset = 0;
|
|
2586
|
+
this.containerWidth = 0;
|
|
2587
|
+
this.maxTranslateX = 0;
|
|
2588
|
+
this.minTranslateX = 0;
|
|
2589
|
+
this.velocity = 0;
|
|
2590
|
+
this.lastMoveTime = 0;
|
|
2591
|
+
this.lastMoveX = 0;
|
|
2592
|
+
this.touchStartTime = 0;
|
|
2593
|
+
this.touchStartX = 0;
|
|
2594
|
+
this.touchStartY = 0;
|
|
2595
|
+
this.isVerticalScroll = false;
|
|
2596
|
+
this.wasDragging = false;
|
|
2597
|
+
this.clicksDisabled = false;
|
|
2598
|
+
this.clickListeners = [];
|
|
2599
|
+
this.dragStarted = false;
|
|
2600
|
+
this.mouseDownTime = 0;
|
|
2601
|
+
this.resizeRafId = null;
|
|
2602
|
+
this.lastLeftOffset = 0;
|
|
2603
|
+
this.lastScrollbarWidth = 0;
|
|
2604
|
+
this.calculateBleedOffsets = () => {
|
|
2605
|
+
if (!this.bleedShell)
|
|
2606
|
+
return;
|
|
2607
|
+
const el = this.bleedShell.nativeElement;
|
|
2608
|
+
const left = Math.round(el.getBoundingClientRect().left);
|
|
2609
|
+
let scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
|
|
2610
|
+
scrollbarWidth = scrollbarWidth == 0 || scrollbarWidth > 30 ? 0 : scrollbarWidth;
|
|
2611
|
+
if (left !== this.lastLeftOffset) {
|
|
2612
|
+
el.style.setProperty('--left-offset', `${left}px`);
|
|
2613
|
+
this.lastLeftOffset = left;
|
|
2614
|
+
}
|
|
2615
|
+
if (scrollbarWidth !== this.lastScrollbarWidth) {
|
|
2616
|
+
el.style.setProperty('--scrollbar-width', `${scrollbarWidth}px`);
|
|
2617
|
+
this.lastScrollbarWidth = scrollbarWidth;
|
|
2618
|
+
}
|
|
2619
|
+
};
|
|
2620
|
+
this.scheduleResize = () => {
|
|
2621
|
+
if (this.resizeRafId !== null) {
|
|
2622
|
+
cancelAnimationFrame(this.resizeRafId);
|
|
2623
|
+
}
|
|
2624
|
+
this.resizeRafId = requestAnimationFrame(() => {
|
|
2625
|
+
this.resizeRafId = null;
|
|
2626
|
+
this.onResize();
|
|
2627
|
+
});
|
|
2628
|
+
};
|
|
2629
|
+
}
|
|
2630
|
+
ngAfterContentInit() {
|
|
2631
|
+
setTimeout(() => {
|
|
2632
|
+
this.calculateDimensions();
|
|
2633
|
+
this.setItemWidths();
|
|
2634
|
+
this.updateLimits();
|
|
2635
|
+
this.setupClickPrevention();
|
|
2636
|
+
this.items.changes.subscribe(() => {
|
|
2637
|
+
this.calculateDimensions();
|
|
2638
|
+
this.setItemWidths();
|
|
2639
|
+
this.updateLimits();
|
|
2640
|
+
this.goToFirstItem();
|
|
2641
|
+
this.setupClickPrevention();
|
|
2642
|
+
// Força atualização visual dos dots
|
|
2643
|
+
if (this.cd && typeof this.cd.detectChanges === 'function') {
|
|
2644
|
+
this.cd.detectChanges();
|
|
2645
|
+
}
|
|
2646
|
+
});
|
|
2647
|
+
}, 10);
|
|
2648
|
+
window.addEventListener('resize', this.scheduleResize);
|
|
2649
|
+
}
|
|
2650
|
+
ngOnDestroy() {
|
|
2651
|
+
// Clean up click listeners
|
|
2652
|
+
this.clickListeners.forEach(unlisten => unlisten());
|
|
2653
|
+
this.clickListeners = [];
|
|
2654
|
+
window.removeEventListener('resize', this.scheduleResize);
|
|
2655
|
+
if (this.resizeRafId !== null) {
|
|
2656
|
+
cancelAnimationFrame(this.resizeRafId);
|
|
2657
|
+
this.resizeRafId = null;
|
|
2658
|
+
}
|
|
2659
|
+
}
|
|
2660
|
+
calculateDimensions() {
|
|
2661
|
+
if (this.bleedShell?.nativeElement) {
|
|
2662
|
+
this.containerWidth = this.bleedShell.nativeElement.offsetWidth;
|
|
2663
|
+
return;
|
|
2664
|
+
}
|
|
2665
|
+
if (this.slidesContainer) {
|
|
2666
|
+
this.containerWidth = this.slidesContainer.nativeElement.offsetWidth;
|
|
2667
|
+
}
|
|
2668
|
+
}
|
|
2669
|
+
updateLimits() {
|
|
2670
|
+
const totalWidth = this.getTotalWidth();
|
|
2671
|
+
this.maxTranslateX = 0;
|
|
2672
|
+
if (totalWidth > this.containerWidth) {
|
|
2673
|
+
this.minTranslateX = this.containerWidth - totalWidth;
|
|
2674
|
+
}
|
|
2675
|
+
else {
|
|
2676
|
+
this.minTranslateX = 0;
|
|
2677
|
+
}
|
|
2678
|
+
}
|
|
2679
|
+
onResize() {
|
|
2680
|
+
this.calculateBleedOffsets();
|
|
2681
|
+
this.calculateDimensions();
|
|
2682
|
+
this.updateLimits();
|
|
2683
|
+
// Garante que o currentIndex não ultrapasse o novo máximo
|
|
2684
|
+
const maxIndex = this.getMaxIndex();
|
|
2685
|
+
if (this.currentIndex > maxIndex) {
|
|
2686
|
+
this.currentIndex = maxIndex;
|
|
2687
|
+
}
|
|
2688
|
+
this.updateTransform();
|
|
2689
|
+
// Força detecção de mudanças para atualizar dots
|
|
2690
|
+
if (window.ng && window.ng.getInjector) {
|
|
2691
|
+
// Angular DevTools presente, não faz nada
|
|
2692
|
+
}
|
|
2693
|
+
else if (this.cd && typeof this.cd.detectChanges === 'function') {
|
|
2694
|
+
this.cd.detectChanges();
|
|
2695
|
+
}
|
|
2696
|
+
}
|
|
2697
|
+
ngAfterViewInit() {
|
|
2698
|
+
// Garante cálculo correto após view carregada
|
|
2699
|
+
setTimeout(() => {
|
|
2700
|
+
this.calculateBleedOffsets();
|
|
2701
|
+
this.calculateDimensions();
|
|
2702
|
+
this.updateLimits();
|
|
2703
|
+
this.updateTransform();
|
|
2704
|
+
});
|
|
2705
|
+
}
|
|
2706
|
+
setItemWidths() {
|
|
2707
|
+
const lastIndex = this.items.length - 1;
|
|
2708
|
+
this.items.forEach((item, index) => {
|
|
2709
|
+
this.renderer.addClass(item.nativeElement, 'c-carousel-fixed-item');
|
|
2710
|
+
this.renderer.setStyle(item.nativeElement, 'width', `${this.itemWidth}px`);
|
|
2711
|
+
this.renderer.setStyle(item.nativeElement, 'flex-shrink', '0');
|
|
2712
|
+
this.renderer.setStyle(item.nativeElement, 'margin-right', index === lastIndex ? '0px' : `${this.gap}px`);
|
|
2713
|
+
});
|
|
2714
|
+
}
|
|
2715
|
+
isDragStartAllowed(target) {
|
|
2716
|
+
if (!target)
|
|
2717
|
+
return false;
|
|
2718
|
+
const element = target;
|
|
2719
|
+
if (element === this.slidesContainer?.nativeElement)
|
|
2720
|
+
return false;
|
|
2721
|
+
return !!element.closest('.c-carousel-fixed-item');
|
|
2722
|
+
}
|
|
2723
|
+
// Mouse events
|
|
2724
|
+
onMouseDown(event) {
|
|
2725
|
+
if (!this.isDragStartAllowed(event.target))
|
|
2726
|
+
return;
|
|
2727
|
+
event.preventDefault();
|
|
2728
|
+
this.mouseDownTime = Date.now();
|
|
2729
|
+
this.dragStarted = false;
|
|
2730
|
+
this.isMouseDown = true;
|
|
2731
|
+
this.wasDragging = false;
|
|
2732
|
+
this.clicksDisabled = false;
|
|
2733
|
+
this.startX = event.clientX;
|
|
2734
|
+
this.currentX = event.clientX;
|
|
2735
|
+
this.initialTranslateX = this.translateX;
|
|
2736
|
+
this.dragOffset = 0;
|
|
2737
|
+
this.velocity = 0;
|
|
2738
|
+
this.lastMoveTime = Date.now();
|
|
2739
|
+
this.lastMoveX = event.clientX;
|
|
2740
|
+
this.calculateDimensions();
|
|
2741
|
+
this.renderer.setStyle(this.slidesContainer.nativeElement, 'transition', 'none');
|
|
2742
|
+
}
|
|
2743
|
+
onMouseMove(event) {
|
|
2744
|
+
if (!this.isMouseDown)
|
|
2745
|
+
return;
|
|
2746
|
+
event.preventDefault();
|
|
2747
|
+
const dragDistance = Math.abs(event.clientX - this.startX);
|
|
2748
|
+
// Only start dragging if moved more than 5px
|
|
2749
|
+
if (dragDistance > 5 && !this.isDragging) {
|
|
2750
|
+
this.isDragging = true;
|
|
2751
|
+
this.dragStarted = true;
|
|
2752
|
+
this.wasDragging = true;
|
|
2753
|
+
}
|
|
2754
|
+
if (this.isDragging) {
|
|
2755
|
+
this.updateDrag(event.clientX);
|
|
2756
|
+
}
|
|
2757
|
+
}
|
|
2758
|
+
onMouseUp(event) {
|
|
2759
|
+
if (!this.isMouseDown)
|
|
2760
|
+
return;
|
|
2761
|
+
this.isMouseDown = false;
|
|
2762
|
+
if (this.isDragging) {
|
|
2763
|
+
const mouseUpTime = Date.now();
|
|
2764
|
+
const holdDuration = mouseUpTime - this.mouseDownTime;
|
|
2765
|
+
const mouseDistance = Math.abs(this.currentX - this.startX);
|
|
2766
|
+
if (mouseDistance > 5 || (holdDuration > 200 && mouseDistance > 0)) {
|
|
2767
|
+
this.wasDragging = true;
|
|
2768
|
+
}
|
|
2769
|
+
this.endDrag();
|
|
2770
|
+
}
|
|
2771
|
+
else {
|
|
2772
|
+
// Reset transition if it was just a click
|
|
2773
|
+
this.renderer.setStyle(this.slidesContainer.nativeElement, 'transition', 'transform 0.3s ease-out');
|
|
2774
|
+
}
|
|
2775
|
+
}
|
|
2776
|
+
onMouseLeave(event) {
|
|
2777
|
+
if (this.isDragging) {
|
|
2778
|
+
this.wasDragging = true;
|
|
2779
|
+
this.endDrag();
|
|
2780
|
+
}
|
|
2781
|
+
this.isMouseDown = false;
|
|
2782
|
+
}
|
|
2783
|
+
// Touch events
|
|
2784
|
+
onTouchStart(event) {
|
|
2785
|
+
if (!this.isDragStartAllowed(event.target))
|
|
2786
|
+
return;
|
|
2787
|
+
this.touchStartTime = Date.now();
|
|
2788
|
+
this.touchStartX = event.touches[0].clientX;
|
|
2789
|
+
this.touchStartY = event.touches[0].clientY;
|
|
2790
|
+
this.isVerticalScroll = false;
|
|
2791
|
+
this.isMouseDown = true;
|
|
2792
|
+
this.wasDragging = false;
|
|
2793
|
+
this.dragStarted = false;
|
|
2794
|
+
this.clicksDisabled = false;
|
|
2795
|
+
this.startX = event.touches[0].clientX;
|
|
2796
|
+
this.currentX = event.touches[0].clientX;
|
|
2797
|
+
this.initialTranslateX = this.translateX;
|
|
2798
|
+
this.dragOffset = 0;
|
|
2799
|
+
this.velocity = 0;
|
|
2800
|
+
this.lastMoveTime = Date.now();
|
|
2801
|
+
this.lastMoveX = event.touches[0].clientX;
|
|
2802
|
+
this.calculateDimensions();
|
|
2803
|
+
this.renderer.setStyle(this.slidesContainer.nativeElement, 'transition', 'none');
|
|
2804
|
+
}
|
|
2805
|
+
onTouchMove(event) {
|
|
2806
|
+
if (!this.isMouseDown)
|
|
2807
|
+
return;
|
|
2808
|
+
const currentX = event.touches[0].clientX;
|
|
2809
|
+
const currentY = event.touches[0].clientY;
|
|
2810
|
+
const deltaX = Math.abs(currentX - this.touchStartX);
|
|
2811
|
+
const deltaY = Math.abs(currentY - this.touchStartY);
|
|
2812
|
+
// Check if this is a vertical scroll
|
|
2813
|
+
if (deltaY > deltaX && deltaY > 10) {
|
|
2814
|
+
this.isVerticalScroll = true;
|
|
2815
|
+
this.isDragging = false;
|
|
2816
|
+
this.isMouseDown = false;
|
|
2817
|
+
this.renderer.setStyle(this.slidesContainer.nativeElement, 'transition', 'transform 0.3s ease-out');
|
|
2818
|
+
return;
|
|
2819
|
+
}
|
|
2820
|
+
// Start dragging if horizontal movement > 10px
|
|
2821
|
+
if (deltaX > 10 && !this.isDragging) {
|
|
2822
|
+
this.isDragging = true;
|
|
2823
|
+
this.dragStarted = true;
|
|
2824
|
+
this.wasDragging = true;
|
|
2825
|
+
}
|
|
2826
|
+
if (this.isDragging && deltaX > 10) {
|
|
2827
|
+
event.preventDefault();
|
|
2828
|
+
this.updateDrag(currentX);
|
|
2829
|
+
}
|
|
2830
|
+
}
|
|
2831
|
+
onTouchEnd(event) {
|
|
2832
|
+
if (this.isVerticalScroll) {
|
|
2833
|
+
this.isVerticalScroll = false;
|
|
2834
|
+
this.isMouseDown = false;
|
|
2835
|
+
return;
|
|
2836
|
+
}
|
|
2837
|
+
this.isMouseDown = false;
|
|
2838
|
+
const touchDuration = Date.now() - this.touchStartTime;
|
|
2839
|
+
const touchDistance = Math.abs(this.currentX - this.startX);
|
|
2840
|
+
// Mark as dragging if significant movement occurred
|
|
2841
|
+
if (touchDistance > 10 || touchDuration > 300) {
|
|
2842
|
+
this.wasDragging = true;
|
|
2843
|
+
}
|
|
2844
|
+
if (this.isDragging) {
|
|
2845
|
+
this.endDrag();
|
|
2846
|
+
}
|
|
2847
|
+
else {
|
|
2848
|
+
// Reset transition if it was just a tap
|
|
2849
|
+
this.renderer.setStyle(this.slidesContainer.nativeElement, 'transition', 'transform 0.3s ease-out');
|
|
2850
|
+
}
|
|
2851
|
+
}
|
|
2852
|
+
setupClickPrevention() {
|
|
2853
|
+
// Clean up existing listeners
|
|
2854
|
+
this.clickListeners.forEach(unlisten => unlisten());
|
|
2855
|
+
this.clickListeners = [];
|
|
2856
|
+
this.items.forEach((item) => {
|
|
2857
|
+
// Only prevent click events, not mouseup which is needed for drag functionality
|
|
2858
|
+
const eventHandler = (event) => {
|
|
2859
|
+
if (event.type === 'click' && (this.wasDragging || this.clicksDisabled || this.dragStarted)) {
|
|
2860
|
+
event.preventDefault();
|
|
2861
|
+
event.stopPropagation();
|
|
2862
|
+
event.stopImmediatePropagation();
|
|
2863
|
+
return false;
|
|
2864
|
+
}
|
|
2865
|
+
return true;
|
|
2866
|
+
};
|
|
2867
|
+
// Only listen to click events to avoid interfering with drag functionality
|
|
2868
|
+
item.nativeElement.addEventListener('click', eventHandler, true);
|
|
2869
|
+
this.clickListeners.push(() => {
|
|
2870
|
+
item.nativeElement.removeEventListener('click', eventHandler, true);
|
|
2871
|
+
});
|
|
2872
|
+
});
|
|
2873
|
+
}
|
|
2874
|
+
updateDrag(clientX) {
|
|
2875
|
+
if (!this.isDragging)
|
|
2876
|
+
return;
|
|
2877
|
+
this.currentX = clientX;
|
|
2878
|
+
const totalDeltaX = this.currentX - this.startX;
|
|
2879
|
+
// Mark as dragging if movement is significant
|
|
2880
|
+
if (Math.abs(totalDeltaX) > 5) {
|
|
2881
|
+
this.wasDragging = true;
|
|
2882
|
+
this.dragStarted = true;
|
|
2883
|
+
}
|
|
2884
|
+
const now = Date.now();
|
|
2885
|
+
const timeDelta = now - this.lastMoveTime;
|
|
2886
|
+
if (timeDelta > 0) {
|
|
2887
|
+
this.velocity = (clientX - this.lastMoveX) / timeDelta;
|
|
2888
|
+
}
|
|
2889
|
+
this.lastMoveTime = now;
|
|
2890
|
+
this.lastMoveX = clientX;
|
|
2891
|
+
let resistedDeltaX = totalDeltaX;
|
|
2892
|
+
const potentialTranslateX = this.initialTranslateX + totalDeltaX;
|
|
2893
|
+
// Apply softer resistance at boundaries
|
|
2894
|
+
if (potentialTranslateX > this.maxTranslateX) {
|
|
2895
|
+
const overDrag = potentialTranslateX - this.maxTranslateX;
|
|
2896
|
+
resistedDeltaX = totalDeltaX - (overDrag * 0.5);
|
|
2897
|
+
}
|
|
2898
|
+
else if (potentialTranslateX < this.minTranslateX) {
|
|
2899
|
+
const overDrag = this.minTranslateX - potentialTranslateX;
|
|
2900
|
+
resistedDeltaX = totalDeltaX + (overDrag * 0.5);
|
|
2901
|
+
}
|
|
2902
|
+
this.dragOffset = resistedDeltaX;
|
|
2903
|
+
this.updateDragPosition();
|
|
2904
|
+
}
|
|
2905
|
+
updateDragPosition() {
|
|
2906
|
+
const newTranslateX = this.initialTranslateX + this.dragOffset;
|
|
2907
|
+
this.renderer.setStyle(this.slidesContainer.nativeElement, 'transform', `translateX(${newTranslateX}px)`);
|
|
2908
|
+
}
|
|
2909
|
+
endDrag() {
|
|
2910
|
+
if (!this.isDragging)
|
|
2911
|
+
return;
|
|
2912
|
+
this.isDragging = false;
|
|
2913
|
+
// Disable clicks temporarily after any drag
|
|
2914
|
+
if (this.wasDragging || this.dragStarted) {
|
|
2915
|
+
this.clicksDisabled = true;
|
|
2916
|
+
setTimeout(() => {
|
|
2917
|
+
this.clicksDisabled = false;
|
|
2918
|
+
}, 200);
|
|
2919
|
+
}
|
|
2920
|
+
// Clear the wasDragging and dragStarted flags after a shorter delay
|
|
2921
|
+
setTimeout(() => {
|
|
2922
|
+
this.wasDragging = false;
|
|
2923
|
+
this.dragStarted = false;
|
|
2924
|
+
}, 250);
|
|
2925
|
+
this.renderer.setStyle(this.slidesContainer.nativeElement, 'transition', 'transform 0.3s ease-out');
|
|
2926
|
+
// Snap sempre para o início da página mais próxima
|
|
2927
|
+
this.snapToNearestItem();
|
|
2928
|
+
this.dragOffset = 0;
|
|
2929
|
+
this.velocity = 0;
|
|
2930
|
+
}
|
|
2931
|
+
getMaxIndex() {
|
|
2932
|
+
// Permite avançar até que o último item esteja alinhado ao lado direito do shell
|
|
2933
|
+
if (!this.items || this.items.length === 0)
|
|
2934
|
+
return 0;
|
|
2935
|
+
const itemStep = this.itemWidth + this.gap;
|
|
2936
|
+
const totalWidth = this.getTotalWidth();
|
|
2937
|
+
const overflow = totalWidth - this.containerWidth;
|
|
2938
|
+
if (overflow <= 0)
|
|
2939
|
+
return 0;
|
|
2940
|
+
return Math.ceil(overflow / itemStep);
|
|
2941
|
+
}
|
|
2942
|
+
canGoNext() {
|
|
2943
|
+
return this.currentIndex < this.getMaxIndex();
|
|
2944
|
+
}
|
|
2945
|
+
getPageStep() {
|
|
2946
|
+
const step = Math.max(1, Math.floor((this.containerWidth + this.gap) / (this.itemWidth + this.gap)));
|
|
2947
|
+
return step;
|
|
2948
|
+
}
|
|
2949
|
+
getVisibleCount() {
|
|
2950
|
+
return Math.max(1, Math.floor((this.containerWidth + this.gap) / (this.itemWidth + this.gap)));
|
|
2951
|
+
}
|
|
2952
|
+
getPageCount() {
|
|
2953
|
+
const maxIndex = this.getMaxIndex();
|
|
2954
|
+
if (maxIndex === 0)
|
|
2955
|
+
return 1;
|
|
2956
|
+
const pageStep = this.getPageStep();
|
|
2957
|
+
return 1 + Math.ceil(maxIndex / pageStep);
|
|
2958
|
+
}
|
|
2959
|
+
getPageStart(dotIndex) {
|
|
2960
|
+
const maxIndex = this.getMaxIndex();
|
|
2961
|
+
const pageStep = this.getPageStep();
|
|
2962
|
+
return Math.min(dotIndex * pageStep, maxIndex);
|
|
2963
|
+
}
|
|
2964
|
+
nextPage() {
|
|
2965
|
+
if (this.canGoNext()) {
|
|
2966
|
+
const pageCount = this.getPageCount();
|
|
2967
|
+
const currentDot = this.getCurrentDotIndex();
|
|
2968
|
+
const targetDot = Math.min(currentDot + 1, pageCount - 1);
|
|
2969
|
+
this.currentIndex = this.getPageStart(targetDot);
|
|
2970
|
+
this.updateTransform();
|
|
2971
|
+
this.nextClickEventEmitter.emit();
|
|
2972
|
+
}
|
|
2973
|
+
}
|
|
2974
|
+
canGoPrevious() {
|
|
2975
|
+
return this.currentIndex > 0;
|
|
2976
|
+
}
|
|
2977
|
+
prevPage() {
|
|
2978
|
+
if (this.canGoPrevious()) {
|
|
2979
|
+
const currentDot = this.getCurrentDotIndex();
|
|
2980
|
+
const targetDot = Math.max(currentDot - 1, 0);
|
|
2981
|
+
this.currentIndex = this.getPageStart(targetDot);
|
|
2982
|
+
this.updateTransform();
|
|
2983
|
+
this.previousClickEventEmitter.emit();
|
|
2984
|
+
}
|
|
2985
|
+
}
|
|
2986
|
+
goToDot(dotIndex) {
|
|
2987
|
+
const maxIndex = this.getMaxIndex();
|
|
2988
|
+
let newIndex = this.getPageStart(dotIndex);
|
|
2989
|
+
if (newIndex > maxIndex)
|
|
2990
|
+
newIndex = maxIndex;
|
|
2991
|
+
this.currentIndex = newIndex;
|
|
2992
|
+
this.updateTransform();
|
|
2993
|
+
this.dotClickEventEmitter.emit();
|
|
2994
|
+
}
|
|
2995
|
+
snapToNearestItem() {
|
|
2996
|
+
const itemStep = this.itemWidth + this.gap;
|
|
2997
|
+
const position = -(this.initialTranslateX + this.dragOffset) / itemStep;
|
|
2998
|
+
// Threshold: 0.3 = 30%, 0.5 = 50% (padrão)
|
|
2999
|
+
const threshold = 0.3;
|
|
3000
|
+
let targetIndex;
|
|
3001
|
+
// Calcula quantos itens completos foram arrastados
|
|
3002
|
+
const itemsMoved = Math.floor(Math.abs(position - this.currentIndex));
|
|
3003
|
+
const decimal = Math.abs(position - this.currentIndex) - itemsMoved;
|
|
3004
|
+
if (position > this.currentIndex) {
|
|
3005
|
+
// Arrastando para frente
|
|
3006
|
+
if (decimal >= threshold) {
|
|
3007
|
+
targetIndex = this.currentIndex + itemsMoved + 1;
|
|
3008
|
+
}
|
|
3009
|
+
else {
|
|
3010
|
+
targetIndex = this.currentIndex + itemsMoved;
|
|
3011
|
+
}
|
|
3012
|
+
}
|
|
3013
|
+
else if (position < this.currentIndex) {
|
|
3014
|
+
// Arrastando para trás
|
|
3015
|
+
if (decimal >= threshold) {
|
|
3016
|
+
targetIndex = this.currentIndex - itemsMoved - 1;
|
|
3017
|
+
}
|
|
3018
|
+
else {
|
|
3019
|
+
targetIndex = this.currentIndex - itemsMoved;
|
|
3020
|
+
}
|
|
3021
|
+
}
|
|
3022
|
+
else {
|
|
3023
|
+
// Não se moveu
|
|
3024
|
+
targetIndex = this.currentIndex;
|
|
3025
|
+
}
|
|
3026
|
+
const maxIndex = this.getMaxIndex();
|
|
3027
|
+
targetIndex = Math.max(0, Math.min(targetIndex, maxIndex));
|
|
3028
|
+
this.currentIndex = targetIndex;
|
|
3029
|
+
this.updateTransform();
|
|
3030
|
+
}
|
|
3031
|
+
getDotsArray() {
|
|
3032
|
+
return Array(this.getPageCount());
|
|
3033
|
+
}
|
|
3034
|
+
getCurrentDotIndex() {
|
|
3035
|
+
const pageCount = this.getPageCount();
|
|
3036
|
+
for (let i = pageCount - 1; i >= 0; i -= 1) {
|
|
3037
|
+
if (this.currentIndex >= this.getPageStart(i)) {
|
|
3038
|
+
return i;
|
|
3039
|
+
}
|
|
3040
|
+
}
|
|
3041
|
+
return 0;
|
|
3042
|
+
}
|
|
3043
|
+
updateTransform() {
|
|
3044
|
+
const itemStep = this.itemWidth + this.gap;
|
|
3045
|
+
this.translateX = -this.currentIndex * itemStep;
|
|
3046
|
+
// Clamp para não mostrar espaço vazio à direita
|
|
3047
|
+
const visibleCount = Math.max(1, Math.floor(this.containerWidth / itemStep));
|
|
3048
|
+
// Inclui o gap após o último item
|
|
3049
|
+
const totalWidth = this.getTotalWidth();
|
|
3050
|
+
if (this.items.length > visibleCount) {
|
|
3051
|
+
const minTranslateX = this.containerWidth - totalWidth;
|
|
3052
|
+
this.translateX = Math.max(this.translateX, minTranslateX);
|
|
3053
|
+
}
|
|
3054
|
+
else {
|
|
3055
|
+
this.translateX = 0;
|
|
3056
|
+
}
|
|
3057
|
+
if (!this.isDragging && this.slidesContainer) {
|
|
3058
|
+
this.renderer.setStyle(this.slidesContainer.nativeElement, 'transform', `translateX(${this.translateX}px)`);
|
|
3059
|
+
}
|
|
3060
|
+
}
|
|
3061
|
+
getTotalWidth() {
|
|
3062
|
+
if (!this.items || this.items.length === 0)
|
|
3063
|
+
return 0;
|
|
3064
|
+
return this.items.length * this.itemWidth + (this.items.length - 1) * this.gap;
|
|
3065
|
+
}
|
|
3066
|
+
// Adicione este método para evitar erro de propriedade ausente
|
|
3067
|
+
goToFirstItem() {
|
|
3068
|
+
this.currentIndex = 0;
|
|
3069
|
+
this.updateTransform();
|
|
3070
|
+
}
|
|
3071
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EluxCarouselBleedComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3072
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: EluxCarouselBleedComponent, isStandalone: true, selector: "lib-elux-carousel-bleed", inputs: { itemWidth: "itemWidth", gap: "gap", title: "title" }, outputs: { previousClickEventEmitter: "previousClickEventEmitter", nextClickEventEmitter: "nextClickEventEmitter", dotClickEventEmitter: "dotClickEventEmitter" }, queries: [{ propertyName: "items", predicate: ["carouselItem"], read: ElementRef }], viewQueries: [{ propertyName: "slidesContainer", first: true, predicate: ["slidesContainer"], descendants: true }, { propertyName: "bleedShell", first: true, predicate: ["bleedShell"], descendants: true }], ngImport: i0, template: "<div class=\"c-carousel-fixed-shell\" #bleedShell>\n <div *ngIf=\"title\" class=\"c-carousel-fixed-header\">\n <div class=\"c-carousel-fixed-header-inner\">\n <div class=\"c-carousel-fixed-title\">\n {{ title }}\n </div>\n <div class=\"c-carousel-fixed-controls\">\n <button\n class=\"c-carousel-fixed-nav prev\"\n [disabled]=\"!canGoPrevious()\"\n title=\"P\u00E1gina anterior\"\n aria-label=\"P\u00E1gina anterior\"\n (click)=\"prevPage()\"\n >\n <lib-elux-icon\n [icon]=\"'Chevron_Left.svg'\"\n [size]=\"'16'\"\n [sizeType]=\"'px'\"\n [color]=\"'#020F2E'\"\n ></lib-elux-icon>\n </button>\n\n <button\n class=\"c-carousel-fixed-nav next\"\n [disabled]=\"!canGoNext()\"\n title=\"Pr\u00F3xima p\u00E1gina\"\n aria-label=\"Pr\u00F3xima p\u00E1gina\"\n (click)=\"nextPage()\"\n >\n <lib-elux-icon\n [icon]=\"'Chevron_Right.svg'\"\n [size]=\"'16'\"\n [sizeType]=\"'px'\"\n [color]=\"'#020F2E'\"\n ></lib-elux-icon>\n </button>\n </div>\n </div>\n </div>\n\n <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 >\n <ng-content></ng-content>\n </div>\n </div>\n\n <div class=\"c-carousel-fixed-footer\" *ngIf=\"getDotsArray().length > 1\">\n <div class=\"c-carousel-fixed-controls\">\n <button\n *ngIf=\"title == ''\"\n class=\"c-carousel-fixed-nav prev\"\n [disabled]=\"!canGoPrevious()\"\n title=\"P\u00E1gina anterior\"\n aria-label=\"P\u00E1gina anterior\"\n (click)=\"prevPage()\"\n >\n <lib-elux-icon\n [icon]=\"'Chevron_Left.svg'\"\n [size]=\"'16'\"\n [sizeType]=\"'px'\"\n [color]=\"'#020F2E'\"\n ></lib-elux-icon>\n </button>\n\n <div class=\"c-carousel-fixed-dots\">\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 >\n </span>\n </ng-container>\n </div>\n\n <button\n *ngIf=\"title == ''\"\n class=\"c-carousel-fixed-nav next\"\n [disabled]=\"!canGoNext()\"\n title=\"Pr\u00F3xima p\u00E1gina\"\n aria-label=\"Pr\u00F3xima p\u00E1gina\"\n (click)=\"nextPage()\"\n >\n <lib-elux-icon\n [icon]=\"'Chevron_Right.svg'\"\n [size]=\"'16'\"\n [sizeType]=\"'px'\"\n [color]=\"'#020F2E'\"\n ></lib-elux-icon>\n </button>\n </div>\n </div>\n</div>\n", styles: [".c-carousel-fixed-shell{position:relative}.c-carousel-fixed-controls{display:flex;align-items:center;gap:12px}.c-carousel-fixed-nav{background:none;border:none;cursor:pointer;width:24px;height:24px;padding:0;border-radius:50%;background-color:#e9ebed;transition:all ease-in-out .2s;z-index:2;display:inline-flex;align-items:center;justify-content:center}.c-carousel-fixed-nav:hover:not(:disabled){transform:scale(1.2)}.c-carousel-fixed-nav:disabled{opacity:.2;cursor:not-allowed}.c-carousel-fixed-nav:disabled:hover{transform:none}.c-carousel-fixed-nav :host ::ng-deep span{display:block}.c-carousel-fixed-header{margin-bottom:32px}@media (min-width: 992px){.c-carousel-fixed-header{margin-bottom:40px}}.c-carousel-fixed-header .c-carousel-fixed-header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}.c-carousel-fixed-header .c-carousel-fixed-header-inner .c-carousel-fixed-title{font-size:20px;font-weight:600;line-height:24px;color:#011e41}@media (min-width: 992px){.c-carousel-fixed-header .c-carousel-fixed-header-inner .c-carousel-fixed-title{font-size:32px;line-height:35px}}.c-carousel-fixed-container{overflow-x:hidden;width:calc(100vw - var(--scrollbar-width, 0px));margin-left:calc(-1 * var(--left-offset, 0px));padding-left:var(--left-offset, 0px)}.c-carousel-fixed-slides{display:flex;transition:transform .5s ease-out;touch-action:pan-y;cursor:default;will-change:transform}:host ::ng-deep .c-carousel-fixed-item{cursor:grab}:host ::ng-deep .c-carousel-fixed-item:active{cursor:grabbing}.c-carousel-fixed-footer{display:flex;justify-content:center;margin-top:32px;margin-bottom:32px}@media (min-width: 992px){.c-carousel-fixed-footer{margin-top:40px;margin-bottom:40px}}.c-carousel-fixed-footer .c-carousel-fixed-dots{display:flex;align-items:center;gap:8px;margin:0 8px}.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:#3d5275}\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"] }] }); }
|
|
3073
|
+
}
|
|
3074
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EluxCarouselBleedComponent, decorators: [{
|
|
3075
|
+
type: Component,
|
|
3076
|
+
args: [{ standalone: true, selector: 'lib-elux-carousel-bleed', imports: [CommonModule, EluxIcon], template: "<div class=\"c-carousel-fixed-shell\" #bleedShell>\n <div *ngIf=\"title\" class=\"c-carousel-fixed-header\">\n <div class=\"c-carousel-fixed-header-inner\">\n <div class=\"c-carousel-fixed-title\">\n {{ title }}\n </div>\n <div class=\"c-carousel-fixed-controls\">\n <button\n class=\"c-carousel-fixed-nav prev\"\n [disabled]=\"!canGoPrevious()\"\n title=\"P\u00E1gina anterior\"\n aria-label=\"P\u00E1gina anterior\"\n (click)=\"prevPage()\"\n >\n <lib-elux-icon\n [icon]=\"'Chevron_Left.svg'\"\n [size]=\"'16'\"\n [sizeType]=\"'px'\"\n [color]=\"'#020F2E'\"\n ></lib-elux-icon>\n </button>\n\n <button\n class=\"c-carousel-fixed-nav next\"\n [disabled]=\"!canGoNext()\"\n title=\"Pr\u00F3xima p\u00E1gina\"\n aria-label=\"Pr\u00F3xima p\u00E1gina\"\n (click)=\"nextPage()\"\n >\n <lib-elux-icon\n [icon]=\"'Chevron_Right.svg'\"\n [size]=\"'16'\"\n [sizeType]=\"'px'\"\n [color]=\"'#020F2E'\"\n ></lib-elux-icon>\n </button>\n </div>\n </div>\n </div>\n\n <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 >\n <ng-content></ng-content>\n </div>\n </div>\n\n <div class=\"c-carousel-fixed-footer\" *ngIf=\"getDotsArray().length > 1\">\n <div class=\"c-carousel-fixed-controls\">\n <button\n *ngIf=\"title == ''\"\n class=\"c-carousel-fixed-nav prev\"\n [disabled]=\"!canGoPrevious()\"\n title=\"P\u00E1gina anterior\"\n aria-label=\"P\u00E1gina anterior\"\n (click)=\"prevPage()\"\n >\n <lib-elux-icon\n [icon]=\"'Chevron_Left.svg'\"\n [size]=\"'16'\"\n [sizeType]=\"'px'\"\n [color]=\"'#020F2E'\"\n ></lib-elux-icon>\n </button>\n\n <div class=\"c-carousel-fixed-dots\">\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 >\n </span>\n </ng-container>\n </div>\n\n <button\n *ngIf=\"title == ''\"\n class=\"c-carousel-fixed-nav next\"\n [disabled]=\"!canGoNext()\"\n title=\"Pr\u00F3xima p\u00E1gina\"\n aria-label=\"Pr\u00F3xima p\u00E1gina\"\n (click)=\"nextPage()\"\n >\n <lib-elux-icon\n [icon]=\"'Chevron_Right.svg'\"\n [size]=\"'16'\"\n [sizeType]=\"'px'\"\n [color]=\"'#020F2E'\"\n ></lib-elux-icon>\n </button>\n </div>\n </div>\n</div>\n", styles: [".c-carousel-fixed-shell{position:relative}.c-carousel-fixed-controls{display:flex;align-items:center;gap:12px}.c-carousel-fixed-nav{background:none;border:none;cursor:pointer;width:24px;height:24px;padding:0;border-radius:50%;background-color:#e9ebed;transition:all ease-in-out .2s;z-index:2;display:inline-flex;align-items:center;justify-content:center}.c-carousel-fixed-nav:hover:not(:disabled){transform:scale(1.2)}.c-carousel-fixed-nav:disabled{opacity:.2;cursor:not-allowed}.c-carousel-fixed-nav:disabled:hover{transform:none}.c-carousel-fixed-nav :host ::ng-deep span{display:block}.c-carousel-fixed-header{margin-bottom:32px}@media (min-width: 992px){.c-carousel-fixed-header{margin-bottom:40px}}.c-carousel-fixed-header .c-carousel-fixed-header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}.c-carousel-fixed-header .c-carousel-fixed-header-inner .c-carousel-fixed-title{font-size:20px;font-weight:600;line-height:24px;color:#011e41}@media (min-width: 992px){.c-carousel-fixed-header .c-carousel-fixed-header-inner .c-carousel-fixed-title{font-size:32px;line-height:35px}}.c-carousel-fixed-container{overflow-x:hidden;width:calc(100vw - var(--scrollbar-width, 0px));margin-left:calc(-1 * var(--left-offset, 0px));padding-left:var(--left-offset, 0px)}.c-carousel-fixed-slides{display:flex;transition:transform .5s ease-out;touch-action:pan-y;cursor:default;will-change:transform}:host ::ng-deep .c-carousel-fixed-item{cursor:grab}:host ::ng-deep .c-carousel-fixed-item:active{cursor:grabbing}.c-carousel-fixed-footer{display:flex;justify-content:center;margin-top:32px;margin-bottom:32px}@media (min-width: 992px){.c-carousel-fixed-footer{margin-top:40px;margin-bottom:40px}}.c-carousel-fixed-footer .c-carousel-fixed-dots{display:flex;align-items:center;gap:8px;margin:0 8px}.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:#3d5275}\n"] }]
|
|
3077
|
+
}], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { items: [{
|
|
3078
|
+
type: ContentChildren,
|
|
3079
|
+
args: ['carouselItem', { read: ElementRef }]
|
|
3080
|
+
}], slidesContainer: [{
|
|
3081
|
+
type: ViewChild,
|
|
3082
|
+
args: ['slidesContainer']
|
|
3083
|
+
}], bleedShell: [{
|
|
3084
|
+
type: ViewChild,
|
|
3085
|
+
args: ['bleedShell', { static: false }]
|
|
3086
|
+
}], itemWidth: [{
|
|
3087
|
+
type: Input
|
|
3088
|
+
}], gap: [{
|
|
3089
|
+
type: Input
|
|
3090
|
+
}], title: [{
|
|
3091
|
+
type: Input
|
|
3092
|
+
}], previousClickEventEmitter: [{
|
|
3093
|
+
type: Output
|
|
3094
|
+
}], nextClickEventEmitter: [{
|
|
3095
|
+
type: Output
|
|
3096
|
+
}], dotClickEventEmitter: [{
|
|
3097
|
+
type: Output
|
|
3098
|
+
}] } });
|
|
3099
|
+
|
|
2593
3100
|
const ElectroluxComponents = [
|
|
2594
3101
|
EluxBreadcrumb,
|
|
2595
3102
|
EluxButton,
|
|
@@ -2628,5 +3135,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
2628
3135
|
* Generated bundle index. Do not edit.
|
|
2629
3136
|
*/
|
|
2630
3137
|
|
|
2631
|
-
export { ElectroluxComponents, ElectroluxDesignSystemModule, EluxAccordion, EluxArrowLink, EluxBreadcrumb, EluxButton, EluxCard1, EluxCard2, EluxCard3, EluxCard4, EluxCardArticle, EluxCardManual, EluxCardProduct, EluxCardRoutine, EluxCardServiceOrder, EluxCarouselComponent, EluxCarouselFixedComponent, EluxChip, EluxDataTable, EluxDatepicker, EluxDropdown, EluxDropdownMultiple, EluxIcon, EluxInputSearchComponent, EluxInputSearchModalComponent, EluxLoading, EluxLoading2, EluxModal, EluxPaginator, EluxStepBar, EluxSwitch, EluxToast, ToasterService };
|
|
3138
|
+
export { ElectroluxComponents, ElectroluxDesignSystemModule, EluxAccordion, EluxArrowLink, EluxBreadcrumb, EluxButton, EluxCard1, EluxCard2, EluxCard3, EluxCard4, EluxCardArticle, EluxCardManual, EluxCardProduct, EluxCardRoutine, EluxCardServiceOrder, EluxCarouselBleedComponent, EluxCarouselComponent, EluxCarouselFixedComponent, EluxChip, EluxDataTable, EluxDatepicker, EluxDropdown, EluxDropdownMultiple, EluxIcon, EluxInputSearchComponent, EluxInputSearchModalComponent, EluxLoading, EluxLoading2, EluxModal, EluxPaginator, EluxStepBar, EluxSwitch, EluxToast, ToasterService };
|
|
2632
3139
|
//# sourceMappingURL=elxjs-ui.mjs.map
|