@elxjs/ui 0.0.201 → 0.0.203
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/button/button.component.mjs +3 -3
- package/esm2022/lib/components/card-article/card-article.component.mjs +3 -3
- package/esm2022/lib/components/card-benefit/card-benefit.component.mjs +60 -0
- 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 +4 -2
- package/fesm2022/elxjs-ui.mjs +649 -91
- package/fesm2022/elxjs-ui.mjs.map +1 -1
- package/lib/components/card-benefit/card-benefit.component.d.ts +21 -0
- 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 +3 -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
|
@@ -6,6 +6,7 @@ import { ReactiveFormsModule, NgControl, NG_VALUE_ACCESSOR, FormsModule } from '
|
|
|
6
6
|
import * as i1$1 from '@angular/router';
|
|
7
7
|
import { RouterModule } from '@angular/router';
|
|
8
8
|
import { Subject, debounceTime } from 'rxjs';
|
|
9
|
+
import * as i1$2 from '@angular/platform-browser';
|
|
9
10
|
|
|
10
11
|
class EluxIcon {
|
|
11
12
|
constructor() {
|
|
@@ -164,11 +165,11 @@ class EluxButton {
|
|
|
164
165
|
}
|
|
165
166
|
}
|
|
166
167
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EluxButton, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
167
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: EluxButton, isStandalone: true, selector: "lib-elux-button", inputs: { disabled: "disabled", type: "type", typeButton: "typeButton", content: "content", done: "done", routerLink: "routerLink", link: "link", size: "size", icon: "icon", iconAlign: "iconAlign", externalLink: "externalLink", loading: "loading", onlyfirstLetterUpper: "onlyfirstLetterUpper", rounded: "rounded" }, outputs: { onClick: "onClick" }, usesOnChanges: true, ngImport: i0, template: "<button\n [type]=\"typeButton\"\n class=\"btn elux-button size-{{ size }} {{ type }}\"\n [class.rounded]=\"rounded\"\n [disabled]=\"disabled\"\n (click)=\"clickButton($event)\"\n (keyup.enter)=\"clickButton($event)\"\n>\n <div *ngIf=\"loading\" [ngStyle]=\"{ 'width': '24px', 'margin': 'auto' , 'margin-top' : '3px' }\">\n <lib-elux-loading [size]=\"30\" [white]=\"true\"></lib-elux-loading>\n </div>\n <div class=\"d-flex align-items-center justify-content-center\" [ngClass]=\"iconAlign\">\n <lib-elux-icon class=\"gap-icon\" *ngIf=\"icon !== ''\" [icon]=\"icon\" [size]=\"'24'\" [sizeType]=\"'px'\"></lib-elux-icon>\n <span *ngIf=\"!done && !loading\">\n {{ onlyfirstLetterUpper ? firstLetterUpper(content) : content }}\n </span>\n </div>\n</button>\n", styles: [":host .elux-button{width:100%;height:48px;text-align:center;padding
|
|
168
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: EluxButton, isStandalone: true, selector: "lib-elux-button", inputs: { disabled: "disabled", type: "type", typeButton: "typeButton", content: "content", done: "done", routerLink: "routerLink", link: "link", size: "size", icon: "icon", iconAlign: "iconAlign", externalLink: "externalLink", loading: "loading", onlyfirstLetterUpper: "onlyfirstLetterUpper", rounded: "rounded" }, outputs: { onClick: "onClick" }, usesOnChanges: true, ngImport: i0, template: "<button\n [type]=\"typeButton\"\n class=\"btn elux-button size-{{ size }} {{ type }}\"\n [class.rounded]=\"rounded\"\n [disabled]=\"disabled\"\n (click)=\"clickButton($event)\"\n (keyup.enter)=\"clickButton($event)\"\n>\n <div *ngIf=\"loading\" [ngStyle]=\"{ 'width': '24px', 'margin': 'auto' , 'margin-top' : '3px' }\">\n <lib-elux-loading [size]=\"30\" [white]=\"true\"></lib-elux-loading>\n </div>\n <div class=\"d-flex align-items-center justify-content-center\" [ngClass]=\"iconAlign\">\n <lib-elux-icon class=\"gap-icon\" *ngIf=\"icon !== ''\" [icon]=\"icon\" [size]=\"'24'\" [sizeType]=\"'px'\"></lib-elux-icon>\n <span *ngIf=\"!done && !loading\">\n {{ onlyfirstLetterUpper ? firstLetterUpper(content) : content }}\n </span>\n </div>\n</button>\n", styles: [":host .elux-button{width:100%;height:48px;text-align:center;padding:8px 16px;min-height:36px;border:none;border-radius:8px;transition:transform .3s ease,box-shadow .3s ease}:host .elux-button span{font-weight:600;font-size:14px;font-stretch:normal;font-style:normal;line-height:1.14;letter-spacing:normal}:host .elux-button:disabled{cursor:default;pointer-events:none}:host .elux-button.basic{color:#fff;background:#011e41}:host .elux-button.basic ::ng-deep lib-elux-icon span{background-color:#fff!important}:host .elux-button.basic:hover{opacity:.85;transform:scale(1.01)}:host .elux-button.basic:disabled{background:#5b6a78;opacity:.85}:host .elux-button.basic:focus-visible{outline:2px solid #16a748!important;box-shadow:inherit!important;outline-offset:-2px}:host .elux-button.basic-action{color:#fff;background:#a5742e}:host .elux-button.basic-action ::ng-deep lib-elux-icon span{background-color:#fff!important}:host .elux-button.basic-action:hover{opacity:.85;transform:scale(1.01)}:host .elux-button.basic-action:disabled{background:#d9ba91;opacity:.85}:host .elux-button.outline{background-color:#fff;border:solid 1px #011E41;color:#011e41}:host .elux-button.outline ::ng-deep lib-elux-icon span{background-color:#011e41!important}:host .elux-button.outline:hover{color:#fff;background-color:#011e41;transform:scale(1.01)}:host .elux-button.outline:hover:disabled{background-color:#fff}:host .elux-button.outline:hover ::ng-deep lib-elux-icon span{background-color:#fff!important}:host .elux-button.outline:disabled{opacity:.85;color:#5b6a78;border:solid 1px #5b6a78}:host .elux-button.outline-noborder{background-color:#fff;border:none;color:#011e41}:host .elux-button.outline-noborder ::ng-deep lib-elux-icon span{background-color:#011e41!important}:host .elux-button.outline-noborder:hover{color:#fff;background-color:#011e41;transform:scale(1.01)}:host .elux-button.outline-noborder:hover:disabled{background-color:#fff}:host .elux-button.outline-noborder:hover ::ng-deep lib-elux-icon span{background-color:#fff!important}:host .elux-button.outline-noborder:disabled{opacity:.85;color:#5b6a78;border:solid 1px #5b6a78}:host .elux-button.text{border:none;color:#011e41;padding:0}:host .elux-button.text:hover{text-decoration:underline;transform:scale(1.01)}:host .elux-button.text:hover:disabled{text-decoration:none}:host .elux-button.text:disabled{opacity:.85;color:#5b6a78}:host .elux-button.text ::ng-deep lib-elux-icon span{background-color:#011e41!important}:host .elux-button.text:focus-visible{outline:2px solid #16a748!important;box-shadow:inherit!important;outline-offset:-2px}:host .elux-button.basicBlue{background-color:#011e41!important;color:#fff!important;border:1px solid #011E41!important}:host .elux-button.basicBlue:hover{background-color:#fff!important;color:#011e41!important;transform:scale(1.01)}:host .elux-button.basicBlue:hover ::ng-deep lib-elux-icon span{background-color:#a5742e!important}:host .elux-button.basicBlue:disabled{background:#dee7ea!important;color:#c9c9ca!important}:host .elux-button.basicBlue:disabled ::ng-deep lib-elux-icon span{background-color:#c9c9ca!important}:host .elux-button.basicWhite{color:#011e41;background:#fff;border:1px solid #011E41}:host .elux-button.basicWhite:hover{font-weight:600;color:#a5742e;transform:scale(1.01)}:host .elux-button.basicWhite:hover ::ng-deep lib-elux-icon span{background-color:#a5742e!important}:host .elux-button.basicWhite:disabled{background:#dee7ea;color:#c9c9ca;transform:scale(1.01)}:host .elux-button.basicWhite:disabled ::ng-deep lib-elux-icon span{background-color:#c9c9ca!important}:host .elux-button.basic-dark{background-color:#fff;color:#011e41}:host .elux-button.basic-dark:hover{background-color:#dee7ea;transform:scale(1.01)}:host .elux-button.basic-dark:hover:disabled{background-color:#5b6a78}:host .elux-button.basic-dark:disabled{opacity:.85;color:#fff!important;background-color:#5b6a78}:host .elux-button.basic-dark ::ng-deep lib-elux-icon span{background-color:#011e41!important}:host .elux-button.outline-dark{color:#fff;background-color:transparent;border:solid 1px #FFFFFF}:host .elux-button.outline-dark ::ng-deep lib-elux-icon span{background-color:#fff!important}:host .elux-button.outline-dark:hover{background-color:#fff;color:#011e41;transform:scale(1.01)}:host .elux-button.outline-dark:hover:disabled{background-color:transparent}:host .elux-button.outline-dark:hover ::ng-deep lib-elux-icon span{background-color:#011e41!important}:host .elux-button.outline-dark:disabled{opacity:.85;color:#5b6a78;border:solid 1px #5b6a78}:host .elux-button.uppercase{text-transform:uppercase}:host .elux-button .right{flex-direction:row-reverse}:host .elux-button .right ::ng-deep lib-elux-icon span{background-color:#a5742e!important}:host .elux-button.primary,:host .elux-button.primary-negative,:host .elux-button.secondary,:host .elux-button.secondary-negative{height:48px;padding:0 24px;border:none}:host .elux-button.primary span,:host .elux-button.primary-negative span,:host .elux-button.secondary span,:host .elux-button.secondary-negative span{font-size:16px}:host .elux-button.primary:focus-visible,:host .elux-button.primary-negative:focus-visible,:host .elux-button.secondary:focus-visible,:host .elux-button.secondary-negative:focus-visible{outline:2px solid #16a748!important;box-shadow:inherit!important;outline-offset:-2px}:host .elux-button.primary{color:#fff;background-color:#011e41}:host .elux-button.primary:hover{opacity:.85;transform:scale(1.01)}:host .elux-button.primary:disabled{background:#adb9c3;color:#fff}:host .elux-button.primary-negative{color:#011e41;background-color:#fff}:host .elux-button.primary-negative:hover{opacity:.85;transform:scale(1.01)}:host .elux-button.primary-negative:disabled{background:#adb9c3;color:#fff}:host .elux-button.secondary{color:#011e41;background-color:#fff;border:1px solid #011E41}:host .elux-button.secondary:hover{background:#011e41;color:#fff;transform:scale(1.01)}:host .elux-button.secondary:disabled{border-color:#7a8a9b;color:#7a8a9b}:host .elux-button.secondary-negative{color:#fff;background-color:#011e41;border:1px solid #FFFFFF}:host .elux-button.secondary-negative:hover{background-color:#fff;color:#011e41;border:1px solid #011E41;transform:scale(1.01)}:host .elux-button.secondary-negative:disabled{border-color:#7a8a9b;color:#7a8a9b}:host .elux-button.rounded{border-radius:24px!important}:host .elux-button .gap-icon{margin-right:8px;margin-left:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: EluxIcon, selector: "lib-elux-icon", inputs: ["color", "useSubscription", "icon", "description", "size", "height", "width", "sizeType"] }, { kind: "component", type: EluxLoading, selector: "lib-elux-loading", inputs: ["size", "white"] }] }); }
|
|
168
169
|
}
|
|
169
170
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EluxButton, decorators: [{
|
|
170
171
|
type: Component,
|
|
171
|
-
args: [{ selector: 'lib-elux-button', standalone: true, imports: [CommonModule, ReactiveFormsModule, EluxIcon, EluxLoading], template: "<button\n [type]=\"typeButton\"\n class=\"btn elux-button size-{{ size }} {{ type }}\"\n [class.rounded]=\"rounded\"\n [disabled]=\"disabled\"\n (click)=\"clickButton($event)\"\n (keyup.enter)=\"clickButton($event)\"\n>\n <div *ngIf=\"loading\" [ngStyle]=\"{ 'width': '24px', 'margin': 'auto' , 'margin-top' : '3px' }\">\n <lib-elux-loading [size]=\"30\" [white]=\"true\"></lib-elux-loading>\n </div>\n <div class=\"d-flex align-items-center justify-content-center\" [ngClass]=\"iconAlign\">\n <lib-elux-icon class=\"gap-icon\" *ngIf=\"icon !== ''\" [icon]=\"icon\" [size]=\"'24'\" [sizeType]=\"'px'\"></lib-elux-icon>\n <span *ngIf=\"!done && !loading\">\n {{ onlyfirstLetterUpper ? firstLetterUpper(content) : content }}\n </span>\n </div>\n</button>\n", styles: [":host .elux-button{width:100%;height:48px;text-align:center;padding
|
|
172
|
+
args: [{ selector: 'lib-elux-button', standalone: true, imports: [CommonModule, ReactiveFormsModule, EluxIcon, EluxLoading], template: "<button\n [type]=\"typeButton\"\n class=\"btn elux-button size-{{ size }} {{ type }}\"\n [class.rounded]=\"rounded\"\n [disabled]=\"disabled\"\n (click)=\"clickButton($event)\"\n (keyup.enter)=\"clickButton($event)\"\n>\n <div *ngIf=\"loading\" [ngStyle]=\"{ 'width': '24px', 'margin': 'auto' , 'margin-top' : '3px' }\">\n <lib-elux-loading [size]=\"30\" [white]=\"true\"></lib-elux-loading>\n </div>\n <div class=\"d-flex align-items-center justify-content-center\" [ngClass]=\"iconAlign\">\n <lib-elux-icon class=\"gap-icon\" *ngIf=\"icon !== ''\" [icon]=\"icon\" [size]=\"'24'\" [sizeType]=\"'px'\"></lib-elux-icon>\n <span *ngIf=\"!done && !loading\">\n {{ onlyfirstLetterUpper ? firstLetterUpper(content) : content }}\n </span>\n </div>\n</button>\n", styles: [":host .elux-button{width:100%;height:48px;text-align:center;padding:8px 16px;min-height:36px;border:none;border-radius:8px;transition:transform .3s ease,box-shadow .3s ease}:host .elux-button span{font-weight:600;font-size:14px;font-stretch:normal;font-style:normal;line-height:1.14;letter-spacing:normal}:host .elux-button:disabled{cursor:default;pointer-events:none}:host .elux-button.basic{color:#fff;background:#011e41}:host .elux-button.basic ::ng-deep lib-elux-icon span{background-color:#fff!important}:host .elux-button.basic:hover{opacity:.85;transform:scale(1.01)}:host .elux-button.basic:disabled{background:#5b6a78;opacity:.85}:host .elux-button.basic:focus-visible{outline:2px solid #16a748!important;box-shadow:inherit!important;outline-offset:-2px}:host .elux-button.basic-action{color:#fff;background:#a5742e}:host .elux-button.basic-action ::ng-deep lib-elux-icon span{background-color:#fff!important}:host .elux-button.basic-action:hover{opacity:.85;transform:scale(1.01)}:host .elux-button.basic-action:disabled{background:#d9ba91;opacity:.85}:host .elux-button.outline{background-color:#fff;border:solid 1px #011E41;color:#011e41}:host .elux-button.outline ::ng-deep lib-elux-icon span{background-color:#011e41!important}:host .elux-button.outline:hover{color:#fff;background-color:#011e41;transform:scale(1.01)}:host .elux-button.outline:hover:disabled{background-color:#fff}:host .elux-button.outline:hover ::ng-deep lib-elux-icon span{background-color:#fff!important}:host .elux-button.outline:disabled{opacity:.85;color:#5b6a78;border:solid 1px #5b6a78}:host .elux-button.outline-noborder{background-color:#fff;border:none;color:#011e41}:host .elux-button.outline-noborder ::ng-deep lib-elux-icon span{background-color:#011e41!important}:host .elux-button.outline-noborder:hover{color:#fff;background-color:#011e41;transform:scale(1.01)}:host .elux-button.outline-noborder:hover:disabled{background-color:#fff}:host .elux-button.outline-noborder:hover ::ng-deep lib-elux-icon span{background-color:#fff!important}:host .elux-button.outline-noborder:disabled{opacity:.85;color:#5b6a78;border:solid 1px #5b6a78}:host .elux-button.text{border:none;color:#011e41;padding:0}:host .elux-button.text:hover{text-decoration:underline;transform:scale(1.01)}:host .elux-button.text:hover:disabled{text-decoration:none}:host .elux-button.text:disabled{opacity:.85;color:#5b6a78}:host .elux-button.text ::ng-deep lib-elux-icon span{background-color:#011e41!important}:host .elux-button.text:focus-visible{outline:2px solid #16a748!important;box-shadow:inherit!important;outline-offset:-2px}:host .elux-button.basicBlue{background-color:#011e41!important;color:#fff!important;border:1px solid #011E41!important}:host .elux-button.basicBlue:hover{background-color:#fff!important;color:#011e41!important;transform:scale(1.01)}:host .elux-button.basicBlue:hover ::ng-deep lib-elux-icon span{background-color:#a5742e!important}:host .elux-button.basicBlue:disabled{background:#dee7ea!important;color:#c9c9ca!important}:host .elux-button.basicBlue:disabled ::ng-deep lib-elux-icon span{background-color:#c9c9ca!important}:host .elux-button.basicWhite{color:#011e41;background:#fff;border:1px solid #011E41}:host .elux-button.basicWhite:hover{font-weight:600;color:#a5742e;transform:scale(1.01)}:host .elux-button.basicWhite:hover ::ng-deep lib-elux-icon span{background-color:#a5742e!important}:host .elux-button.basicWhite:disabled{background:#dee7ea;color:#c9c9ca;transform:scale(1.01)}:host .elux-button.basicWhite:disabled ::ng-deep lib-elux-icon span{background-color:#c9c9ca!important}:host .elux-button.basic-dark{background-color:#fff;color:#011e41}:host .elux-button.basic-dark:hover{background-color:#dee7ea;transform:scale(1.01)}:host .elux-button.basic-dark:hover:disabled{background-color:#5b6a78}:host .elux-button.basic-dark:disabled{opacity:.85;color:#fff!important;background-color:#5b6a78}:host .elux-button.basic-dark ::ng-deep lib-elux-icon span{background-color:#011e41!important}:host .elux-button.outline-dark{color:#fff;background-color:transparent;border:solid 1px #FFFFFF}:host .elux-button.outline-dark ::ng-deep lib-elux-icon span{background-color:#fff!important}:host .elux-button.outline-dark:hover{background-color:#fff;color:#011e41;transform:scale(1.01)}:host .elux-button.outline-dark:hover:disabled{background-color:transparent}:host .elux-button.outline-dark:hover ::ng-deep lib-elux-icon span{background-color:#011e41!important}:host .elux-button.outline-dark:disabled{opacity:.85;color:#5b6a78;border:solid 1px #5b6a78}:host .elux-button.uppercase{text-transform:uppercase}:host .elux-button .right{flex-direction:row-reverse}:host .elux-button .right ::ng-deep lib-elux-icon span{background-color:#a5742e!important}:host .elux-button.primary,:host .elux-button.primary-negative,:host .elux-button.secondary,:host .elux-button.secondary-negative{height:48px;padding:0 24px;border:none}:host .elux-button.primary span,:host .elux-button.primary-negative span,:host .elux-button.secondary span,:host .elux-button.secondary-negative span{font-size:16px}:host .elux-button.primary:focus-visible,:host .elux-button.primary-negative:focus-visible,:host .elux-button.secondary:focus-visible,:host .elux-button.secondary-negative:focus-visible{outline:2px solid #16a748!important;box-shadow:inherit!important;outline-offset:-2px}:host .elux-button.primary{color:#fff;background-color:#011e41}:host .elux-button.primary:hover{opacity:.85;transform:scale(1.01)}:host .elux-button.primary:disabled{background:#adb9c3;color:#fff}:host .elux-button.primary-negative{color:#011e41;background-color:#fff}:host .elux-button.primary-negative:hover{opacity:.85;transform:scale(1.01)}:host .elux-button.primary-negative:disabled{background:#adb9c3;color:#fff}:host .elux-button.secondary{color:#011e41;background-color:#fff;border:1px solid #011E41}:host .elux-button.secondary:hover{background:#011e41;color:#fff;transform:scale(1.01)}:host .elux-button.secondary:disabled{border-color:#7a8a9b;color:#7a8a9b}:host .elux-button.secondary-negative{color:#fff;background-color:#011e41;border:1px solid #FFFFFF}:host .elux-button.secondary-negative:hover{background-color:#fff;color:#011e41;border:1px solid #011E41;transform:scale(1.01)}:host .elux-button.secondary-negative:disabled{border-color:#7a8a9b;color:#7a8a9b}:host .elux-button.rounded{border-radius:24px!important}:host .elux-button .gap-icon{margin-right:8px;margin-left:8px}\n"] }]
|
|
172
173
|
}], ctorParameters: () => [{ type: i1$1.Router }], propDecorators: { disabled: [{
|
|
173
174
|
type: Input
|
|
174
175
|
}], type: [{
|
|
@@ -1331,9 +1332,7 @@ class EluxCarouselComponent {
|
|
|
1331
1332
|
constructor(renderer) {
|
|
1332
1333
|
this.renderer = renderer;
|
|
1333
1334
|
this.itemsPerSlide = 4;
|
|
1334
|
-
this.
|
|
1335
|
-
this.removeDots = false;
|
|
1336
|
-
this.autoPlayInterval = null;
|
|
1335
|
+
this.title = '';
|
|
1337
1336
|
this.previousClickEventEmitter = new EventEmitter();
|
|
1338
1337
|
this.nextClickEventEmitter = new EventEmitter();
|
|
1339
1338
|
this.dotClickEventEmitter = new EventEmitter();
|
|
@@ -1368,9 +1367,6 @@ class EluxCarouselComponent {
|
|
|
1368
1367
|
this.setItemWidths();
|
|
1369
1368
|
this.updateLimits();
|
|
1370
1369
|
this.setupClickPrevention();
|
|
1371
|
-
if (this.autoPlayInterval) {
|
|
1372
|
-
this.startAutoPlay();
|
|
1373
|
-
}
|
|
1374
1370
|
this.items.changes.subscribe(() => {
|
|
1375
1371
|
this.calculateDimensions();
|
|
1376
1372
|
this.setItemWidths();
|
|
@@ -1382,7 +1378,6 @@ class EluxCarouselComponent {
|
|
|
1382
1378
|
window.addEventListener('resize', () => this.onResize());
|
|
1383
1379
|
}
|
|
1384
1380
|
ngOnDestroy() {
|
|
1385
|
-
this.stopAutoPlay();
|
|
1386
1381
|
if (this.animationId) {
|
|
1387
1382
|
cancelAnimationFrame(this.animationId);
|
|
1388
1383
|
}
|
|
@@ -1402,6 +1397,13 @@ class EluxCarouselComponent {
|
|
|
1402
1397
|
this.maxOffset = 0;
|
|
1403
1398
|
this.minOffset = -((totalSteps - 1) * 100);
|
|
1404
1399
|
}
|
|
1400
|
+
canGoNext() {
|
|
1401
|
+
const totalSteps = Math.ceil(this.items.length / this.itemsPerSlide);
|
|
1402
|
+
return this.currentStepIndex < totalSteps - 1;
|
|
1403
|
+
}
|
|
1404
|
+
canGoPrevious() {
|
|
1405
|
+
return this.currentStepIndex > 0;
|
|
1406
|
+
}
|
|
1405
1407
|
onResize() {
|
|
1406
1408
|
this.calculateDimensions();
|
|
1407
1409
|
this.updateOffset();
|
|
@@ -1412,20 +1414,6 @@ class EluxCarouselComponent {
|
|
|
1412
1414
|
this.renderer.setStyle(item.nativeElement, 'minWidth', minWidth);
|
|
1413
1415
|
});
|
|
1414
1416
|
}
|
|
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
1417
|
// Mouse events
|
|
1430
1418
|
onMouseDown(event) {
|
|
1431
1419
|
event.preventDefault();
|
|
@@ -1544,7 +1532,6 @@ class EluxCarouselComponent {
|
|
|
1544
1532
|
this.lastMoveTime = Date.now();
|
|
1545
1533
|
this.lastMoveX = clientX;
|
|
1546
1534
|
this.calculateDimensions();
|
|
1547
|
-
this.stopAutoPlay();
|
|
1548
1535
|
// Disable CSS transitions during drag
|
|
1549
1536
|
this.renderer.setStyle(this.slidesContainer.nativeElement, 'transition', 'none');
|
|
1550
1537
|
}
|
|
@@ -1568,6 +1555,11 @@ class EluxCarouselComponent {
|
|
|
1568
1555
|
this.lastMoveX = clientX;
|
|
1569
1556
|
// Convert pixel movement to percentage
|
|
1570
1557
|
const dragPercentage = (totalDeltaX / this.containerWidth) * 100;
|
|
1558
|
+
if ((this.currentStepIndex === 0 && dragPercentage > 0) ||
|
|
1559
|
+
(!this.canGoNext() && dragPercentage < 0)) {
|
|
1560
|
+
this.updateOffset();
|
|
1561
|
+
return;
|
|
1562
|
+
}
|
|
1571
1563
|
// Apply resistance at boundaries
|
|
1572
1564
|
let resistedDragPercentage = dragPercentage;
|
|
1573
1565
|
const potentialOffset = this.initialOffset + dragPercentage;
|
|
@@ -1604,13 +1596,16 @@ class EluxCarouselComponent {
|
|
|
1604
1596
|
}, 250);
|
|
1605
1597
|
// Re-enable CSS transitions
|
|
1606
1598
|
this.renderer.setStyle(this.slidesContainer.nativeElement, 'transition', 'transform 0.4s ease-out');
|
|
1607
|
-
const finalOffset = this.initialOffset + this.dragOffset;
|
|
1608
1599
|
const threshold = 40;
|
|
1609
1600
|
const dragDistance = Math.abs(this.currentX - this.startX);
|
|
1610
1601
|
// Check for momentum (velocity-based slide change)
|
|
1611
1602
|
const momentumThreshold = 0.3;
|
|
1612
1603
|
const hasSignificantVelocity = Math.abs(this.velocity) > momentumThreshold;
|
|
1613
|
-
if (
|
|
1604
|
+
if ((this.currentStepIndex === 0 && (this.dragOffset > 0 || this.velocity > 0)) ||
|
|
1605
|
+
(!this.canGoNext() && (this.dragOffset < 0 || this.velocity < 0))) {
|
|
1606
|
+
this.updateOffset();
|
|
1607
|
+
}
|
|
1608
|
+
else if (dragDistance > threshold || hasSignificantVelocity) {
|
|
1614
1609
|
if (this.dragOffset > 0 || (hasSignificantVelocity && this.velocity > 0)) {
|
|
1615
1610
|
// Dragged right or has positive velocity - go to previous slide
|
|
1616
1611
|
this.prevSlide();
|
|
@@ -1631,10 +1626,6 @@ class EluxCarouselComponent {
|
|
|
1631
1626
|
// Reset drag state
|
|
1632
1627
|
this.dragOffset = 0;
|
|
1633
1628
|
this.velocity = 0;
|
|
1634
|
-
// Restart autoplay if it was enabled
|
|
1635
|
-
if (this.autoPlayInterval) {
|
|
1636
|
-
setTimeout(() => this.startAutoPlay(), 1000);
|
|
1637
|
-
}
|
|
1638
1629
|
}
|
|
1639
1630
|
getStepIndexCount() {
|
|
1640
1631
|
const totalSteps = Math.ceil(this.items.length / this.itemsPerSlide);
|
|
@@ -1657,29 +1648,19 @@ class EluxCarouselComponent {
|
|
|
1657
1648
|
this.dotClickEventEmitter.emit();
|
|
1658
1649
|
}
|
|
1659
1650
|
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
|
-
}
|
|
1651
|
+
if (!this.canGoPrevious())
|
|
1652
|
+
return;
|
|
1653
|
+
this.currentStepIndex--;
|
|
1654
|
+
this.currentIndex = this.currentStepIndex * this.itemsPerSlide;
|
|
1669
1655
|
this.updateOffset();
|
|
1670
1656
|
this.scrollActiveDotIntoView(this.currentStepIndex);
|
|
1671
1657
|
this.previousClickEventEmitter.emit();
|
|
1672
1658
|
}
|
|
1673
1659
|
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
|
-
}
|
|
1660
|
+
if (!this.canGoNext())
|
|
1661
|
+
return;
|
|
1662
|
+
this.currentStepIndex++;
|
|
1663
|
+
this.currentIndex = Math.min(this.currentStepIndex * this.itemsPerSlide, this.items.length - this.itemsPerSlide);
|
|
1683
1664
|
this.updateOffset();
|
|
1684
1665
|
this.scrollActiveDotIntoView(this.currentStepIndex);
|
|
1685
1666
|
this.nextClickEventEmitter.emit();
|
|
@@ -1709,11 +1690,11 @@ class EluxCarouselComponent {
|
|
|
1709
1690
|
});
|
|
1710
1691
|
}
|
|
1711
1692
|
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",
|
|
1693
|
+
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
1694
|
}
|
|
1714
1695
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EluxCarouselComponent, decorators: [{
|
|
1715
1696
|
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
|
|
1697
|
+
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
1698
|
}], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { items: [{
|
|
1718
1699
|
type: ContentChildren,
|
|
1719
1700
|
args: ['carouselItem', { read: ElementRef }]
|
|
@@ -1725,11 +1706,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
1725
1706
|
args: ['slidesContainer']
|
|
1726
1707
|
}], itemsPerSlide: [{
|
|
1727
1708
|
type: Input
|
|
1728
|
-
}],
|
|
1729
|
-
type: Input
|
|
1730
|
-
}], removeDots: [{
|
|
1731
|
-
type: Input
|
|
1732
|
-
}], autoPlayInterval: [{
|
|
1709
|
+
}], title: [{
|
|
1733
1710
|
type: Input
|
|
1734
1711
|
}], previousClickEventEmitter: [{
|
|
1735
1712
|
type: Output
|
|
@@ -2430,11 +2407,11 @@ class EluxCardArticle {
|
|
|
2430
2407
|
return title.length > this.BREAK_VALUE ? `${title.substring(0, this.BREAK_VALUE)}...` : title;
|
|
2431
2408
|
}
|
|
2432
2409
|
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 <
|
|
2410
|
+
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 <span class=\"card-article__title\">{{ truncateTitle(title) }}</span>\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{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
2411
|
}
|
|
2435
2412
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EluxCardArticle, decorators: [{
|
|
2436
2413
|
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 <
|
|
2414
|
+
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 <span class=\"card-article__title\">{{ truncateTitle(title) }}</span>\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{font-size:20px;font-weight:600;line-height:24px}}\n"] }]
|
|
2438
2415
|
}], propDecorators: { title: [{
|
|
2439
2416
|
type: Input
|
|
2440
2417
|
}], routerLink: [{
|
|
@@ -2445,6 +2422,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
2445
2422
|
type: Input
|
|
2446
2423
|
}] } });
|
|
2447
2424
|
|
|
2425
|
+
class ElectroluxDesignSystemModule {
|
|
2426
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ElectroluxDesignSystemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2427
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: ElectroluxDesignSystemModule, imports: [CommonModule, EluxBreadcrumb, EluxButton, EluxDatepicker, EluxDropdown, EluxIcon, EluxPaginator, EluxStepBar, EluxToast, EluxDataTable, EluxAccordion, EluxModal, EluxInputSearchComponent, EluxInputSearchModalComponent, EluxLoading, EluxDropdownMultiple, EluxCarouselComponent, EluxSwitch, EluxChip], exports: [EluxBreadcrumb, EluxButton, EluxDatepicker, EluxDropdown, EluxIcon, EluxPaginator, EluxStepBar, EluxToast, EluxDataTable, EluxAccordion, EluxModal, EluxInputSearchComponent, EluxInputSearchModalComponent, EluxLoading, EluxDropdownMultiple, EluxCarouselComponent, EluxSwitch, EluxChip] }); }
|
|
2428
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ElectroluxDesignSystemModule, imports: [CommonModule, EluxBreadcrumb, EluxButton, EluxDatepicker, EluxDropdown, EluxIcon, EluxPaginator, EluxStepBar, EluxToast, EluxDataTable, EluxAccordion, EluxModal, EluxInputSearchComponent, EluxInputSearchModalComponent, EluxLoading, EluxDropdownMultiple, EluxCarouselComponent, EluxChip] }); }
|
|
2429
|
+
}
|
|
2430
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ElectroluxDesignSystemModule, decorators: [{
|
|
2431
|
+
type: NgModule,
|
|
2432
|
+
args: [{
|
|
2433
|
+
imports: [CommonModule, ...ElectroluxComponents],
|
|
2434
|
+
exports: [...ElectroluxComponents],
|
|
2435
|
+
}]
|
|
2436
|
+
}] });
|
|
2437
|
+
|
|
2438
|
+
class EluxCardBenefit {
|
|
2439
|
+
constructor(sanitizer) {
|
|
2440
|
+
this.sanitizer = sanitizer;
|
|
2441
|
+
this.icon = '';
|
|
2442
|
+
this.description = '';
|
|
2443
|
+
this.buttonText = '';
|
|
2444
|
+
this.buttonRouterLink = '';
|
|
2445
|
+
this.buttonType = 'basic';
|
|
2446
|
+
this.BREAK_VALUE = 49;
|
|
2447
|
+
this.DESCRIPTION_BREAK_VALUE = 130;
|
|
2448
|
+
}
|
|
2449
|
+
truncateTitle(title) {
|
|
2450
|
+
if (!title)
|
|
2451
|
+
return '';
|
|
2452
|
+
return title.length > this.BREAK_VALUE ? `${title.substring(0, this.BREAK_VALUE)}...` : title;
|
|
2453
|
+
}
|
|
2454
|
+
truncateDescription(description) {
|
|
2455
|
+
if (!description)
|
|
2456
|
+
return '';
|
|
2457
|
+
return description.length > this.DESCRIPTION_BREAK_VALUE
|
|
2458
|
+
? `${description.substring(0, this.DESCRIPTION_BREAK_VALUE)}...`
|
|
2459
|
+
: description;
|
|
2460
|
+
}
|
|
2461
|
+
get descriptionHtml() {
|
|
2462
|
+
return this.sanitizer.bypassSecurityTrustHtml(this.description || '');
|
|
2463
|
+
}
|
|
2464
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EluxCardBenefit, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2465
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: EluxCardBenefit, isStandalone: true, selector: "lib-elux-card-benefit", inputs: { title: "title", image: "image", imageAlt: "imageAlt", icon: "icon", description: "description", buttonText: "buttonText", buttonRouterLink: "buttonRouterLink", buttonType: "buttonType" }, ngImport: i0, template: "<div class=\"card-benefit\">\n <div class=\"card-benefit__image-wrapper\">\n <img [src]=\"image\" [alt]=\"imageAlt\" class=\"card-benefit__image\" />\n </div>\n <div class=\"card-benefit__content\">\n <div class=\"d-flex flex-column\">\n <lib-elux-icon\n *ngIf=\"icon\"\n class=\"card-benefit__icon\"\n [icon]=\"icon\"\n [color]=\"'#fff'\"\n [size]=\"'24'\"\n [sizeType]=\"'px'\"\n />\n <span class=\"card-benefit__title\">{{ truncateTitle(title) }}</span>\n </div>\n <div class=\"card-benefit__description\" [innerHTML]=\"descriptionHtml\"></div>\n <lib-elux-button\n *ngIf=\"buttonText && buttonRouterLink\"\n class=\"card-bebenfit__button\"\n [routerLink]=\"buttonRouterLink\"\n [content]=\"buttonText\"\n [type]=\"buttonType\"\n />\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}}.card-benefit{display:flex;flex-direction:column;background-color:#312e3c;border-radius:4px;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease;padding:16px;height:100%;width:100%;min-width:300px;max-width:370px}.card-benefit:hover{transform:translateY(-4px);box-shadow:0 4px 12px #0000001a}.card-benefit__image-wrapper{width:100%;height:200px;overflow:hidden;margin-bottom:24px}.card-benefit__image{width:100%;height:100%;object-fit:cover;display:block}.card-benefit__content{min-height:150px;display:flex;flex-direction:column;justify-content:space-between;gap:16px}.card-benefit__icon{align-self:flex-start;margin-bottom:8px}.card-benefit__title{color:#fff;font-size:18px;font-weight:600;line-height:22px}.card-benefit__description{color:#fff;font-size:14px;font-weight:400;line-height:21px}.card-benefit__button,.card-benefit .card-bebenfit__button{align-self:flex-start}.card-benefit__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-benefit{width:100%;min-width:300px;max-width:370px}.card-benefit__image-wrapper{width:100%;height:250px;overflow:hidden}}\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: "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"] }, { kind: "ngmodule", type: ElectroluxDesignSystemModule }, { kind: "component", type: EluxButton, selector: "lib-elux-button", inputs: ["disabled", "type", "typeButton", "content", "done", "routerLink", "link", "size", "icon", "iconAlign", "externalLink", "loading", "onlyfirstLetterUpper", "rounded"], outputs: ["onClick"] }] }); }
|
|
2466
|
+
}
|
|
2467
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EluxCardBenefit, decorators: [{
|
|
2468
|
+
type: Component,
|
|
2469
|
+
args: [{ standalone: true, imports: [RouterModule, CommonModule, EluxIcon, ElectroluxDesignSystemModule], selector: 'lib-elux-card-benefit', template: "<div class=\"card-benefit\">\n <div class=\"card-benefit__image-wrapper\">\n <img [src]=\"image\" [alt]=\"imageAlt\" class=\"card-benefit__image\" />\n </div>\n <div class=\"card-benefit__content\">\n <div class=\"d-flex flex-column\">\n <lib-elux-icon\n *ngIf=\"icon\"\n class=\"card-benefit__icon\"\n [icon]=\"icon\"\n [color]=\"'#fff'\"\n [size]=\"'24'\"\n [sizeType]=\"'px'\"\n />\n <span class=\"card-benefit__title\">{{ truncateTitle(title) }}</span>\n </div>\n <div class=\"card-benefit__description\" [innerHTML]=\"descriptionHtml\"></div>\n <lib-elux-button\n *ngIf=\"buttonText && buttonRouterLink\"\n class=\"card-bebenfit__button\"\n [routerLink]=\"buttonRouterLink\"\n [content]=\"buttonText\"\n [type]=\"buttonType\"\n />\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}}.card-benefit{display:flex;flex-direction:column;background-color:#312e3c;border-radius:4px;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease;padding:16px;height:100%;width:100%;min-width:300px;max-width:370px}.card-benefit:hover{transform:translateY(-4px);box-shadow:0 4px 12px #0000001a}.card-benefit__image-wrapper{width:100%;height:200px;overflow:hidden;margin-bottom:24px}.card-benefit__image{width:100%;height:100%;object-fit:cover;display:block}.card-benefit__content{min-height:150px;display:flex;flex-direction:column;justify-content:space-between;gap:16px}.card-benefit__icon{align-self:flex-start;margin-bottom:8px}.card-benefit__title{color:#fff;font-size:18px;font-weight:600;line-height:22px}.card-benefit__description{color:#fff;font-size:14px;font-weight:400;line-height:21px}.card-benefit__button,.card-benefit .card-bebenfit__button{align-self:flex-start}.card-benefit__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-benefit{width:100%;min-width:300px;max-width:370px}.card-benefit__image-wrapper{width:100%;height:250px;overflow:hidden}}\n"] }]
|
|
2470
|
+
}], ctorParameters: () => [{ type: i1$2.DomSanitizer }], propDecorators: { title: [{
|
|
2471
|
+
type: Input
|
|
2472
|
+
}], image: [{
|
|
2473
|
+
type: Input
|
|
2474
|
+
}], imageAlt: [{
|
|
2475
|
+
type: Input
|
|
2476
|
+
}], icon: [{
|
|
2477
|
+
type: Input
|
|
2478
|
+
}], description: [{
|
|
2479
|
+
type: Input
|
|
2480
|
+
}], buttonText: [{
|
|
2481
|
+
type: Input
|
|
2482
|
+
}], buttonRouterLink: [{
|
|
2483
|
+
type: Input
|
|
2484
|
+
}], buttonType: [{
|
|
2485
|
+
type: Input
|
|
2486
|
+
}] } });
|
|
2487
|
+
|
|
2448
2488
|
class EluxCardServiceOrder {
|
|
2449
2489
|
constructor(router) {
|
|
2450
2490
|
this.router = router;
|
|
@@ -2590,43 +2630,561 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
2590
2630
|
type: Input
|
|
2591
2631
|
}] } });
|
|
2592
2632
|
|
|
2593
|
-
|
|
2594
|
-
|
|
2595
|
-
|
|
2596
|
-
|
|
2597
|
-
|
|
2598
|
-
|
|
2599
|
-
|
|
2600
|
-
|
|
2601
|
-
|
|
2602
|
-
|
|
2603
|
-
|
|
2604
|
-
|
|
2605
|
-
|
|
2606
|
-
|
|
2607
|
-
|
|
2608
|
-
|
|
2609
|
-
|
|
2610
|
-
|
|
2611
|
-
|
|
2612
|
-
|
|
2613
|
-
|
|
2614
|
-
|
|
2615
|
-
|
|
2616
|
-
|
|
2617
|
-
|
|
2618
|
-
|
|
2619
|
-
|
|
2620
|
-
|
|
2621
|
-
|
|
2622
|
-
|
|
2623
|
-
|
|
2624
|
-
|
|
2625
|
-
|
|
2633
|
+
class EluxCarouselBleedComponent {
|
|
2634
|
+
constructor(renderer) {
|
|
2635
|
+
this.renderer = renderer;
|
|
2636
|
+
this.itemWidth = 200;
|
|
2637
|
+
this.gap = 16;
|
|
2638
|
+
this.title = '';
|
|
2639
|
+
this.previousClickEventEmitter = new EventEmitter();
|
|
2640
|
+
this.nextClickEventEmitter = new EventEmitter();
|
|
2641
|
+
this.dotClickEventEmitter = new EventEmitter();
|
|
2642
|
+
this.currentIndex = 0;
|
|
2643
|
+
this.translateX = 0;
|
|
2644
|
+
this.isDragging = false;
|
|
2645
|
+
this.isMouseDown = false;
|
|
2646
|
+
this.startX = 0;
|
|
2647
|
+
this.currentX = 0;
|
|
2648
|
+
this.initialTranslateX = 0;
|
|
2649
|
+
this.dragOffset = 0;
|
|
2650
|
+
this.containerWidth = 0;
|
|
2651
|
+
this.maxTranslateX = 0;
|
|
2652
|
+
this.minTranslateX = 0;
|
|
2653
|
+
this.velocity = 0;
|
|
2654
|
+
this.lastMoveTime = 0;
|
|
2655
|
+
this.lastMoveX = 0;
|
|
2656
|
+
this.touchStartTime = 0;
|
|
2657
|
+
this.touchStartX = 0;
|
|
2658
|
+
this.touchStartY = 0;
|
|
2659
|
+
this.isVerticalScroll = false;
|
|
2660
|
+
this.wasDragging = false;
|
|
2661
|
+
this.clicksDisabled = false;
|
|
2662
|
+
this.clickListeners = [];
|
|
2663
|
+
this.dragStarted = false;
|
|
2664
|
+
this.mouseDownTime = 0;
|
|
2665
|
+
this.resizeRafId = null;
|
|
2666
|
+
this.lastLeftOffset = 0;
|
|
2667
|
+
this.lastScrollbarWidth = 0;
|
|
2668
|
+
this.calculateBleedOffsets = () => {
|
|
2669
|
+
if (!this.bleedShell)
|
|
2670
|
+
return;
|
|
2671
|
+
const el = this.bleedShell.nativeElement;
|
|
2672
|
+
const left = Math.round(el.getBoundingClientRect().left);
|
|
2673
|
+
let scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
|
|
2674
|
+
scrollbarWidth = scrollbarWidth == 0 || scrollbarWidth > 30 ? 0 : scrollbarWidth;
|
|
2675
|
+
if (left !== this.lastLeftOffset) {
|
|
2676
|
+
el.style.setProperty('--left-offset', `${left}px`);
|
|
2677
|
+
this.lastLeftOffset = left;
|
|
2678
|
+
}
|
|
2679
|
+
if (scrollbarWidth !== this.lastScrollbarWidth) {
|
|
2680
|
+
el.style.setProperty('--scrollbar-width', `${scrollbarWidth}px`);
|
|
2681
|
+
this.lastScrollbarWidth = scrollbarWidth;
|
|
2682
|
+
}
|
|
2683
|
+
};
|
|
2684
|
+
this.scheduleResize = () => {
|
|
2685
|
+
if (this.resizeRafId !== null) {
|
|
2686
|
+
cancelAnimationFrame(this.resizeRafId);
|
|
2687
|
+
}
|
|
2688
|
+
this.resizeRafId = requestAnimationFrame(() => {
|
|
2689
|
+
this.resizeRafId = null;
|
|
2690
|
+
this.onResize();
|
|
2691
|
+
});
|
|
2692
|
+
};
|
|
2693
|
+
}
|
|
2694
|
+
ngAfterContentInit() {
|
|
2695
|
+
setTimeout(() => {
|
|
2696
|
+
this.calculateDimensions();
|
|
2697
|
+
this.setItemWidths();
|
|
2698
|
+
this.updateLimits();
|
|
2699
|
+
this.setupClickPrevention();
|
|
2700
|
+
this.items.changes.subscribe(() => {
|
|
2701
|
+
this.calculateDimensions();
|
|
2702
|
+
this.setItemWidths();
|
|
2703
|
+
this.updateLimits();
|
|
2704
|
+
this.goToFirstItem();
|
|
2705
|
+
this.setupClickPrevention();
|
|
2706
|
+
// Força atualização visual dos dots
|
|
2707
|
+
if (this.cd && typeof this.cd.detectChanges === 'function') {
|
|
2708
|
+
this.cd.detectChanges();
|
|
2709
|
+
}
|
|
2710
|
+
});
|
|
2711
|
+
}, 10);
|
|
2712
|
+
window.addEventListener('resize', this.scheduleResize);
|
|
2713
|
+
}
|
|
2714
|
+
ngOnDestroy() {
|
|
2715
|
+
// Clean up click listeners
|
|
2716
|
+
this.clickListeners.forEach(unlisten => unlisten());
|
|
2717
|
+
this.clickListeners = [];
|
|
2718
|
+
window.removeEventListener('resize', this.scheduleResize);
|
|
2719
|
+
if (this.resizeRafId !== null) {
|
|
2720
|
+
cancelAnimationFrame(this.resizeRafId);
|
|
2721
|
+
this.resizeRafId = null;
|
|
2722
|
+
}
|
|
2723
|
+
}
|
|
2724
|
+
calculateDimensions() {
|
|
2725
|
+
if (this.bleedShell?.nativeElement) {
|
|
2726
|
+
this.containerWidth = this.bleedShell.nativeElement.offsetWidth;
|
|
2727
|
+
return;
|
|
2728
|
+
}
|
|
2729
|
+
if (this.slidesContainer) {
|
|
2730
|
+
this.containerWidth = this.slidesContainer.nativeElement.offsetWidth;
|
|
2731
|
+
}
|
|
2732
|
+
}
|
|
2733
|
+
updateLimits() {
|
|
2734
|
+
const totalWidth = this.getTotalWidth();
|
|
2735
|
+
this.maxTranslateX = 0;
|
|
2736
|
+
if (totalWidth > this.containerWidth) {
|
|
2737
|
+
this.minTranslateX = this.containerWidth - totalWidth;
|
|
2738
|
+
}
|
|
2739
|
+
else {
|
|
2740
|
+
this.minTranslateX = 0;
|
|
2741
|
+
}
|
|
2742
|
+
}
|
|
2743
|
+
onResize() {
|
|
2744
|
+
this.calculateBleedOffsets();
|
|
2745
|
+
this.calculateDimensions();
|
|
2746
|
+
this.updateLimits();
|
|
2747
|
+
// Garante que o currentIndex não ultrapasse o novo máximo
|
|
2748
|
+
const maxIndex = this.getMaxIndex();
|
|
2749
|
+
if (this.currentIndex > maxIndex) {
|
|
2750
|
+
this.currentIndex = maxIndex;
|
|
2751
|
+
}
|
|
2752
|
+
this.updateTransform();
|
|
2753
|
+
// Força detecção de mudanças para atualizar dots
|
|
2754
|
+
if (window.ng && window.ng.getInjector) {
|
|
2755
|
+
// Angular DevTools presente, não faz nada
|
|
2756
|
+
}
|
|
2757
|
+
else if (this.cd && typeof this.cd.detectChanges === 'function') {
|
|
2758
|
+
this.cd.detectChanges();
|
|
2759
|
+
}
|
|
2760
|
+
}
|
|
2761
|
+
ngAfterViewInit() {
|
|
2762
|
+
// Garante cálculo correto após view carregada
|
|
2763
|
+
setTimeout(() => {
|
|
2764
|
+
this.calculateBleedOffsets();
|
|
2765
|
+
this.calculateDimensions();
|
|
2766
|
+
this.updateLimits();
|
|
2767
|
+
this.updateTransform();
|
|
2768
|
+
});
|
|
2769
|
+
}
|
|
2770
|
+
setItemWidths() {
|
|
2771
|
+
const lastIndex = this.items.length - 1;
|
|
2772
|
+
this.items.forEach((item, index) => {
|
|
2773
|
+
this.renderer.addClass(item.nativeElement, 'c-carousel-fixed-item');
|
|
2774
|
+
this.renderer.setStyle(item.nativeElement, 'width', `${this.itemWidth}px`);
|
|
2775
|
+
this.renderer.setStyle(item.nativeElement, 'flex-shrink', '0');
|
|
2776
|
+
this.renderer.setStyle(item.nativeElement, 'margin-right', index === lastIndex ? '0px' : `${this.gap}px`);
|
|
2777
|
+
});
|
|
2778
|
+
}
|
|
2779
|
+
isDragStartAllowed(target) {
|
|
2780
|
+
if (!target)
|
|
2781
|
+
return false;
|
|
2782
|
+
const element = target;
|
|
2783
|
+
if (element === this.slidesContainer?.nativeElement)
|
|
2784
|
+
return false;
|
|
2785
|
+
return !!element.closest('.c-carousel-fixed-item');
|
|
2786
|
+
}
|
|
2787
|
+
// Mouse events
|
|
2788
|
+
onMouseDown(event) {
|
|
2789
|
+
if (!this.isDragStartAllowed(event.target))
|
|
2790
|
+
return;
|
|
2791
|
+
event.preventDefault();
|
|
2792
|
+
this.mouseDownTime = Date.now();
|
|
2793
|
+
this.dragStarted = false;
|
|
2794
|
+
this.isMouseDown = true;
|
|
2795
|
+
this.wasDragging = false;
|
|
2796
|
+
this.clicksDisabled = false;
|
|
2797
|
+
this.startX = event.clientX;
|
|
2798
|
+
this.currentX = event.clientX;
|
|
2799
|
+
this.initialTranslateX = this.translateX;
|
|
2800
|
+
this.dragOffset = 0;
|
|
2801
|
+
this.velocity = 0;
|
|
2802
|
+
this.lastMoveTime = Date.now();
|
|
2803
|
+
this.lastMoveX = event.clientX;
|
|
2804
|
+
this.calculateDimensions();
|
|
2805
|
+
this.renderer.setStyle(this.slidesContainer.nativeElement, 'transition', 'none');
|
|
2806
|
+
}
|
|
2807
|
+
onMouseMove(event) {
|
|
2808
|
+
if (!this.isMouseDown)
|
|
2809
|
+
return;
|
|
2810
|
+
event.preventDefault();
|
|
2811
|
+
const dragDistance = Math.abs(event.clientX - this.startX);
|
|
2812
|
+
// Only start dragging if moved more than 5px
|
|
2813
|
+
if (dragDistance > 5 && !this.isDragging) {
|
|
2814
|
+
this.isDragging = true;
|
|
2815
|
+
this.dragStarted = true;
|
|
2816
|
+
this.wasDragging = true;
|
|
2817
|
+
}
|
|
2818
|
+
if (this.isDragging) {
|
|
2819
|
+
this.updateDrag(event.clientX);
|
|
2820
|
+
}
|
|
2821
|
+
}
|
|
2822
|
+
onMouseUp(event) {
|
|
2823
|
+
if (!this.isMouseDown)
|
|
2824
|
+
return;
|
|
2825
|
+
this.isMouseDown = false;
|
|
2826
|
+
if (this.isDragging) {
|
|
2827
|
+
const mouseUpTime = Date.now();
|
|
2828
|
+
const holdDuration = mouseUpTime - this.mouseDownTime;
|
|
2829
|
+
const mouseDistance = Math.abs(this.currentX - this.startX);
|
|
2830
|
+
if (mouseDistance > 5 || (holdDuration > 200 && mouseDistance > 0)) {
|
|
2831
|
+
this.wasDragging = true;
|
|
2832
|
+
}
|
|
2833
|
+
this.endDrag();
|
|
2834
|
+
}
|
|
2835
|
+
else {
|
|
2836
|
+
// Reset transition if it was just a click
|
|
2837
|
+
this.renderer.setStyle(this.slidesContainer.nativeElement, 'transition', 'transform 0.3s ease-out');
|
|
2838
|
+
}
|
|
2839
|
+
}
|
|
2840
|
+
onMouseLeave(event) {
|
|
2841
|
+
if (this.isDragging) {
|
|
2842
|
+
this.wasDragging = true;
|
|
2843
|
+
this.endDrag();
|
|
2844
|
+
}
|
|
2845
|
+
this.isMouseDown = false;
|
|
2846
|
+
}
|
|
2847
|
+
// Touch events
|
|
2848
|
+
onTouchStart(event) {
|
|
2849
|
+
if (!this.isDragStartAllowed(event.target))
|
|
2850
|
+
return;
|
|
2851
|
+
this.touchStartTime = Date.now();
|
|
2852
|
+
this.touchStartX = event.touches[0].clientX;
|
|
2853
|
+
this.touchStartY = event.touches[0].clientY;
|
|
2854
|
+
this.isVerticalScroll = false;
|
|
2855
|
+
this.isMouseDown = true;
|
|
2856
|
+
this.wasDragging = false;
|
|
2857
|
+
this.dragStarted = false;
|
|
2858
|
+
this.clicksDisabled = false;
|
|
2859
|
+
this.startX = event.touches[0].clientX;
|
|
2860
|
+
this.currentX = event.touches[0].clientX;
|
|
2861
|
+
this.initialTranslateX = this.translateX;
|
|
2862
|
+
this.dragOffset = 0;
|
|
2863
|
+
this.velocity = 0;
|
|
2864
|
+
this.lastMoveTime = Date.now();
|
|
2865
|
+
this.lastMoveX = event.touches[0].clientX;
|
|
2866
|
+
this.calculateDimensions();
|
|
2867
|
+
this.renderer.setStyle(this.slidesContainer.nativeElement, 'transition', 'none');
|
|
2868
|
+
}
|
|
2869
|
+
onTouchMove(event) {
|
|
2870
|
+
if (!this.isMouseDown)
|
|
2871
|
+
return;
|
|
2872
|
+
const currentX = event.touches[0].clientX;
|
|
2873
|
+
const currentY = event.touches[0].clientY;
|
|
2874
|
+
const deltaX = Math.abs(currentX - this.touchStartX);
|
|
2875
|
+
const deltaY = Math.abs(currentY - this.touchStartY);
|
|
2876
|
+
// Check if this is a vertical scroll
|
|
2877
|
+
if (deltaY > deltaX && deltaY > 10) {
|
|
2878
|
+
this.isVerticalScroll = true;
|
|
2879
|
+
this.isDragging = false;
|
|
2880
|
+
this.isMouseDown = false;
|
|
2881
|
+
this.renderer.setStyle(this.slidesContainer.nativeElement, 'transition', 'transform 0.3s ease-out');
|
|
2882
|
+
return;
|
|
2883
|
+
}
|
|
2884
|
+
// Start dragging if horizontal movement > 10px
|
|
2885
|
+
if (deltaX > 10 && !this.isDragging) {
|
|
2886
|
+
this.isDragging = true;
|
|
2887
|
+
this.dragStarted = true;
|
|
2888
|
+
this.wasDragging = true;
|
|
2889
|
+
}
|
|
2890
|
+
if (this.isDragging && deltaX > 10) {
|
|
2891
|
+
event.preventDefault();
|
|
2892
|
+
this.updateDrag(currentX);
|
|
2893
|
+
}
|
|
2894
|
+
}
|
|
2895
|
+
onTouchEnd(event) {
|
|
2896
|
+
if (this.isVerticalScroll) {
|
|
2897
|
+
this.isVerticalScroll = false;
|
|
2898
|
+
this.isMouseDown = false;
|
|
2899
|
+
return;
|
|
2900
|
+
}
|
|
2901
|
+
this.isMouseDown = false;
|
|
2902
|
+
const touchDuration = Date.now() - this.touchStartTime;
|
|
2903
|
+
const touchDistance = Math.abs(this.currentX - this.startX);
|
|
2904
|
+
// Mark as dragging if significant movement occurred
|
|
2905
|
+
if (touchDistance > 10 || touchDuration > 300) {
|
|
2906
|
+
this.wasDragging = true;
|
|
2907
|
+
}
|
|
2908
|
+
if (this.isDragging) {
|
|
2909
|
+
this.endDrag();
|
|
2910
|
+
}
|
|
2911
|
+
else {
|
|
2912
|
+
// Reset transition if it was just a tap
|
|
2913
|
+
this.renderer.setStyle(this.slidesContainer.nativeElement, 'transition', 'transform 0.3s ease-out');
|
|
2914
|
+
}
|
|
2915
|
+
}
|
|
2916
|
+
setupClickPrevention() {
|
|
2917
|
+
// Clean up existing listeners
|
|
2918
|
+
this.clickListeners.forEach(unlisten => unlisten());
|
|
2919
|
+
this.clickListeners = [];
|
|
2920
|
+
this.items.forEach((item) => {
|
|
2921
|
+
// Only prevent click events, not mouseup which is needed for drag functionality
|
|
2922
|
+
const eventHandler = (event) => {
|
|
2923
|
+
if (event.type === 'click' && (this.wasDragging || this.clicksDisabled || this.dragStarted)) {
|
|
2924
|
+
event.preventDefault();
|
|
2925
|
+
event.stopPropagation();
|
|
2926
|
+
event.stopImmediatePropagation();
|
|
2927
|
+
return false;
|
|
2928
|
+
}
|
|
2929
|
+
return true;
|
|
2930
|
+
};
|
|
2931
|
+
// Only listen to click events to avoid interfering with drag functionality
|
|
2932
|
+
item.nativeElement.addEventListener('click', eventHandler, true);
|
|
2933
|
+
this.clickListeners.push(() => {
|
|
2934
|
+
item.nativeElement.removeEventListener('click', eventHandler, true);
|
|
2935
|
+
});
|
|
2936
|
+
});
|
|
2937
|
+
}
|
|
2938
|
+
updateDrag(clientX) {
|
|
2939
|
+
if (!this.isDragging)
|
|
2940
|
+
return;
|
|
2941
|
+
this.currentX = clientX;
|
|
2942
|
+
const totalDeltaX = this.currentX - this.startX;
|
|
2943
|
+
// Mark as dragging if movement is significant
|
|
2944
|
+
if (Math.abs(totalDeltaX) > 5) {
|
|
2945
|
+
this.wasDragging = true;
|
|
2946
|
+
this.dragStarted = true;
|
|
2947
|
+
}
|
|
2948
|
+
const now = Date.now();
|
|
2949
|
+
const timeDelta = now - this.lastMoveTime;
|
|
2950
|
+
if (timeDelta > 0) {
|
|
2951
|
+
this.velocity = (clientX - this.lastMoveX) / timeDelta;
|
|
2952
|
+
}
|
|
2953
|
+
this.lastMoveTime = now;
|
|
2954
|
+
this.lastMoveX = clientX;
|
|
2955
|
+
let resistedDeltaX = totalDeltaX;
|
|
2956
|
+
const potentialTranslateX = this.initialTranslateX + totalDeltaX;
|
|
2957
|
+
// Apply softer resistance at boundaries
|
|
2958
|
+
if (potentialTranslateX > this.maxTranslateX) {
|
|
2959
|
+
const overDrag = potentialTranslateX - this.maxTranslateX;
|
|
2960
|
+
resistedDeltaX = totalDeltaX - (overDrag * 0.5);
|
|
2961
|
+
}
|
|
2962
|
+
else if (potentialTranslateX < this.minTranslateX) {
|
|
2963
|
+
const overDrag = this.minTranslateX - potentialTranslateX;
|
|
2964
|
+
resistedDeltaX = totalDeltaX + (overDrag * 0.5);
|
|
2965
|
+
}
|
|
2966
|
+
this.dragOffset = resistedDeltaX;
|
|
2967
|
+
this.updateDragPosition();
|
|
2968
|
+
}
|
|
2969
|
+
updateDragPosition() {
|
|
2970
|
+
const newTranslateX = this.initialTranslateX + this.dragOffset;
|
|
2971
|
+
this.renderer.setStyle(this.slidesContainer.nativeElement, 'transform', `translateX(${newTranslateX}px)`);
|
|
2972
|
+
}
|
|
2973
|
+
endDrag() {
|
|
2974
|
+
if (!this.isDragging)
|
|
2975
|
+
return;
|
|
2976
|
+
this.isDragging = false;
|
|
2977
|
+
// Disable clicks temporarily after any drag
|
|
2978
|
+
if (this.wasDragging || this.dragStarted) {
|
|
2979
|
+
this.clicksDisabled = true;
|
|
2980
|
+
setTimeout(() => {
|
|
2981
|
+
this.clicksDisabled = false;
|
|
2982
|
+
}, 200);
|
|
2983
|
+
}
|
|
2984
|
+
// Clear the wasDragging and dragStarted flags after a shorter delay
|
|
2985
|
+
setTimeout(() => {
|
|
2986
|
+
this.wasDragging = false;
|
|
2987
|
+
this.dragStarted = false;
|
|
2988
|
+
}, 250);
|
|
2989
|
+
this.renderer.setStyle(this.slidesContainer.nativeElement, 'transition', 'transform 0.3s ease-out');
|
|
2990
|
+
// Snap sempre para o início da página mais próxima
|
|
2991
|
+
this.snapToNearestItem();
|
|
2992
|
+
this.dragOffset = 0;
|
|
2993
|
+
this.velocity = 0;
|
|
2994
|
+
}
|
|
2995
|
+
getMaxIndex() {
|
|
2996
|
+
// Permite avançar até que o último item esteja alinhado ao lado direito do shell
|
|
2997
|
+
if (!this.items || this.items.length === 0)
|
|
2998
|
+
return 0;
|
|
2999
|
+
const itemStep = this.itemWidth + this.gap;
|
|
3000
|
+
const totalWidth = this.getTotalWidth();
|
|
3001
|
+
const overflow = totalWidth - this.containerWidth;
|
|
3002
|
+
if (overflow <= 0)
|
|
3003
|
+
return 0;
|
|
3004
|
+
return Math.ceil(overflow / itemStep);
|
|
3005
|
+
}
|
|
3006
|
+
canGoNext() {
|
|
3007
|
+
return this.currentIndex < this.getMaxIndex();
|
|
3008
|
+
}
|
|
3009
|
+
getPageStep() {
|
|
3010
|
+
const step = Math.max(1, Math.floor((this.containerWidth + this.gap) / (this.itemWidth + this.gap)));
|
|
3011
|
+
return step;
|
|
3012
|
+
}
|
|
3013
|
+
getVisibleCount() {
|
|
3014
|
+
return Math.max(1, Math.floor((this.containerWidth + this.gap) / (this.itemWidth + this.gap)));
|
|
3015
|
+
}
|
|
3016
|
+
getPageCount() {
|
|
3017
|
+
const maxIndex = this.getMaxIndex();
|
|
3018
|
+
if (maxIndex === 0)
|
|
3019
|
+
return 1;
|
|
3020
|
+
const pageStep = this.getPageStep();
|
|
3021
|
+
return 1 + Math.ceil(maxIndex / pageStep);
|
|
3022
|
+
}
|
|
3023
|
+
getPageStart(dotIndex) {
|
|
3024
|
+
const maxIndex = this.getMaxIndex();
|
|
3025
|
+
const pageStep = this.getPageStep();
|
|
3026
|
+
return Math.min(dotIndex * pageStep, maxIndex);
|
|
3027
|
+
}
|
|
3028
|
+
nextPage() {
|
|
3029
|
+
if (this.canGoNext()) {
|
|
3030
|
+
const pageCount = this.getPageCount();
|
|
3031
|
+
const currentDot = this.getCurrentDotIndex();
|
|
3032
|
+
const targetDot = Math.min(currentDot + 1, pageCount - 1);
|
|
3033
|
+
this.currentIndex = this.getPageStart(targetDot);
|
|
3034
|
+
this.updateTransform();
|
|
3035
|
+
this.nextClickEventEmitter.emit();
|
|
3036
|
+
}
|
|
3037
|
+
}
|
|
3038
|
+
canGoPrevious() {
|
|
3039
|
+
return this.currentIndex > 0;
|
|
3040
|
+
}
|
|
3041
|
+
prevPage() {
|
|
3042
|
+
if (this.canGoPrevious()) {
|
|
3043
|
+
const currentDot = this.getCurrentDotIndex();
|
|
3044
|
+
const targetDot = Math.max(currentDot - 1, 0);
|
|
3045
|
+
this.currentIndex = this.getPageStart(targetDot);
|
|
3046
|
+
this.updateTransform();
|
|
3047
|
+
this.previousClickEventEmitter.emit();
|
|
3048
|
+
}
|
|
3049
|
+
}
|
|
3050
|
+
goToDot(dotIndex) {
|
|
3051
|
+
const maxIndex = this.getMaxIndex();
|
|
3052
|
+
let newIndex = this.getPageStart(dotIndex);
|
|
3053
|
+
if (newIndex > maxIndex)
|
|
3054
|
+
newIndex = maxIndex;
|
|
3055
|
+
this.currentIndex = newIndex;
|
|
3056
|
+
this.updateTransform();
|
|
3057
|
+
this.dotClickEventEmitter.emit();
|
|
3058
|
+
}
|
|
3059
|
+
snapToNearestItem() {
|
|
3060
|
+
const itemStep = this.itemWidth + this.gap;
|
|
3061
|
+
const position = -(this.initialTranslateX + this.dragOffset) / itemStep;
|
|
3062
|
+
// Threshold: 0.3 = 30%, 0.5 = 50% (padrão)
|
|
3063
|
+
const threshold = 0.3;
|
|
3064
|
+
let targetIndex;
|
|
3065
|
+
// Calcula quantos itens completos foram arrastados
|
|
3066
|
+
const itemsMoved = Math.floor(Math.abs(position - this.currentIndex));
|
|
3067
|
+
const decimal = Math.abs(position - this.currentIndex) - itemsMoved;
|
|
3068
|
+
if (position > this.currentIndex) {
|
|
3069
|
+
// Arrastando para frente
|
|
3070
|
+
if (decimal >= threshold) {
|
|
3071
|
+
targetIndex = this.currentIndex + itemsMoved + 1;
|
|
3072
|
+
}
|
|
3073
|
+
else {
|
|
3074
|
+
targetIndex = this.currentIndex + itemsMoved;
|
|
3075
|
+
}
|
|
3076
|
+
}
|
|
3077
|
+
else if (position < this.currentIndex) {
|
|
3078
|
+
// Arrastando para trás
|
|
3079
|
+
if (decimal >= threshold) {
|
|
3080
|
+
targetIndex = this.currentIndex - itemsMoved - 1;
|
|
3081
|
+
}
|
|
3082
|
+
else {
|
|
3083
|
+
targetIndex = this.currentIndex - itemsMoved;
|
|
3084
|
+
}
|
|
3085
|
+
}
|
|
3086
|
+
else {
|
|
3087
|
+
// Não se moveu
|
|
3088
|
+
targetIndex = this.currentIndex;
|
|
3089
|
+
}
|
|
3090
|
+
const maxIndex = this.getMaxIndex();
|
|
3091
|
+
targetIndex = Math.max(0, Math.min(targetIndex, maxIndex));
|
|
3092
|
+
this.currentIndex = targetIndex;
|
|
3093
|
+
this.updateTransform();
|
|
3094
|
+
}
|
|
3095
|
+
getDotsArray() {
|
|
3096
|
+
return Array(this.getPageCount());
|
|
3097
|
+
}
|
|
3098
|
+
getCurrentDotIndex() {
|
|
3099
|
+
const pageCount = this.getPageCount();
|
|
3100
|
+
for (let i = pageCount - 1; i >= 0; i -= 1) {
|
|
3101
|
+
if (this.currentIndex >= this.getPageStart(i)) {
|
|
3102
|
+
return i;
|
|
3103
|
+
}
|
|
3104
|
+
}
|
|
3105
|
+
return 0;
|
|
3106
|
+
}
|
|
3107
|
+
updateTransform() {
|
|
3108
|
+
const itemStep = this.itemWidth + this.gap;
|
|
3109
|
+
this.translateX = -this.currentIndex * itemStep;
|
|
3110
|
+
// Clamp para não mostrar espaço vazio à direita
|
|
3111
|
+
const visibleCount = Math.max(1, Math.floor(this.containerWidth / itemStep));
|
|
3112
|
+
// Inclui o gap após o último item
|
|
3113
|
+
const totalWidth = this.getTotalWidth();
|
|
3114
|
+
if (this.items.length > visibleCount) {
|
|
3115
|
+
const minTranslateX = this.containerWidth - totalWidth;
|
|
3116
|
+
this.translateX = Math.max(this.translateX, minTranslateX);
|
|
3117
|
+
}
|
|
3118
|
+
else {
|
|
3119
|
+
this.translateX = 0;
|
|
3120
|
+
}
|
|
3121
|
+
if (!this.isDragging && this.slidesContainer) {
|
|
3122
|
+
this.renderer.setStyle(this.slidesContainer.nativeElement, 'transform', `translateX(${this.translateX}px)`);
|
|
3123
|
+
}
|
|
3124
|
+
}
|
|
3125
|
+
getTotalWidth() {
|
|
3126
|
+
if (!this.items || this.items.length === 0)
|
|
3127
|
+
return 0;
|
|
3128
|
+
return this.items.length * this.itemWidth + (this.items.length - 1) * this.gap;
|
|
3129
|
+
}
|
|
3130
|
+
// Adicione este método para evitar erro de propriedade ausente
|
|
3131
|
+
goToFirstItem() {
|
|
3132
|
+
this.currentIndex = 0;
|
|
3133
|
+
this.updateTransform();
|
|
3134
|
+
}
|
|
3135
|
+
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 }); }
|
|
3136
|
+
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"] }] }); }
|
|
3137
|
+
}
|
|
3138
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EluxCarouselBleedComponent, decorators: [{
|
|
3139
|
+
type: Component,
|
|
3140
|
+
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"] }]
|
|
3141
|
+
}], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { items: [{
|
|
3142
|
+
type: ContentChildren,
|
|
3143
|
+
args: ['carouselItem', { read: ElementRef }]
|
|
3144
|
+
}], slidesContainer: [{
|
|
3145
|
+
type: ViewChild,
|
|
3146
|
+
args: ['slidesContainer']
|
|
3147
|
+
}], bleedShell: [{
|
|
3148
|
+
type: ViewChild,
|
|
3149
|
+
args: ['bleedShell', { static: false }]
|
|
3150
|
+
}], itemWidth: [{
|
|
3151
|
+
type: Input
|
|
3152
|
+
}], gap: [{
|
|
3153
|
+
type: Input
|
|
3154
|
+
}], title: [{
|
|
3155
|
+
type: Input
|
|
3156
|
+
}], previousClickEventEmitter: [{
|
|
3157
|
+
type: Output
|
|
3158
|
+
}], nextClickEventEmitter: [{
|
|
3159
|
+
type: Output
|
|
3160
|
+
}], dotClickEventEmitter: [{
|
|
3161
|
+
type: Output
|
|
3162
|
+
}] } });
|
|
3163
|
+
|
|
3164
|
+
const ElectroluxComponents = [
|
|
3165
|
+
EluxBreadcrumb,
|
|
3166
|
+
EluxButton,
|
|
3167
|
+
EluxDatepicker,
|
|
3168
|
+
EluxDropdown,
|
|
3169
|
+
EluxIcon,
|
|
3170
|
+
EluxPaginator,
|
|
3171
|
+
EluxStepBar,
|
|
3172
|
+
EluxToast,
|
|
3173
|
+
EluxDataTable,
|
|
3174
|
+
EluxAccordion,
|
|
3175
|
+
EluxModal,
|
|
3176
|
+
EluxInputSearchComponent,
|
|
3177
|
+
EluxInputSearchModalComponent,
|
|
3178
|
+
EluxLoading,
|
|
3179
|
+
EluxDropdownMultiple,
|
|
3180
|
+
EluxCarouselComponent,
|
|
3181
|
+
EluxSwitch,
|
|
3182
|
+
EluxChip,
|
|
3183
|
+
];
|
|
2626
3184
|
|
|
2627
3185
|
/**
|
|
2628
3186
|
* Generated bundle index. Do not edit.
|
|
2629
3187
|
*/
|
|
2630
3188
|
|
|
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 };
|
|
3189
|
+
export { ElectroluxComponents, ElectroluxDesignSystemModule, EluxAccordion, EluxArrowLink, EluxBreadcrumb, EluxButton, EluxCard1, EluxCard2, EluxCard3, EluxCard4, EluxCardArticle, EluxCardBenefit, EluxCardManual, EluxCardProduct, EluxCardRoutine, EluxCardServiceOrder, EluxCarouselBleedComponent, EluxCarouselComponent, EluxCarouselFixedComponent, EluxChip, EluxDataTable, EluxDatepicker, EluxDropdown, EluxDropdownMultiple, EluxIcon, EluxInputSearchComponent, EluxInputSearchModalComponent, EluxLoading, EluxLoading2, EluxModal, EluxPaginator, EluxStepBar, EluxSwitch, EluxToast, ToasterService };
|
|
2632
3190
|
//# sourceMappingURL=elxjs-ui.mjs.map
|