@elxjs/ui 0.0.188 → 0.0.190
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/assets/icons/Facebook_2.svg +3 -0
- package/assets/icons/Logo_small.svg +10 -0
- package/assets/icons/Youtube_2.svg +3 -0
- package/assets/images/placeholder_3.webp +0 -0
- package/assets/styles/colors.scss +5 -1
- package/assets/styles/inputs.scss +4 -4
- package/esm2022/lib/components/button/button.component.mjs +6 -3
- package/esm2022/lib/components/card-article/card-article.component.mjs +31 -0
- package/esm2022/lib/components/card-product/card-product.component.mjs +6 -3
- package/esm2022/lib/components/card-service-order/card-service-order.component.mjs +63 -0
- package/esm2022/lib/components/index.mjs +3 -1
- package/esm2022/lib/components/input-search-modal/input-search-modal.component.mjs +1 -1
- package/fesm2022/elxjs-ui.mjs +93 -6
- package/fesm2022/elxjs-ui.mjs.map +1 -1
- package/lib/components/button/button.component.d.ts +2 -1
- package/lib/components/card-article/card-article.component.d.ts +11 -0
- package/lib/components/card-product/card-product.component.d.ts +2 -1
- package/lib/components/card-service-order/card-service-order.component.d.ts +27 -0
- package/lib/components/index.d.ts +2 -0
- package/package.json +1 -1
package/fesm2022/elxjs-ui.mjs
CHANGED
|
@@ -128,6 +128,7 @@ class EluxButton {
|
|
|
128
128
|
this.externalLink = false;
|
|
129
129
|
this.loading = false;
|
|
130
130
|
this.onlyfirstLetterUpper = true;
|
|
131
|
+
this.rounded = false;
|
|
131
132
|
this.onClick = new EventEmitter();
|
|
132
133
|
}
|
|
133
134
|
ngOnInit() {
|
|
@@ -163,11 +164,11 @@ class EluxButton {
|
|
|
163
164
|
}
|
|
164
165
|
}
|
|
165
166
|
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 }); }
|
|
166
|
-
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" }, outputs: { onClick: "onClick" }, usesOnChanges: true, ngImport: i0, template: "<button\n [type]=\"typeButton\"\n class=\"btn elux-button size-{{ size }}\"\n [
|
|
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-left:20px;padding-right:20px;min-height:36px;border:none;border-radius:2px}: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}: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}: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}: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}: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}: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}: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{border-radius:2px;font-weight:600;color:#a5742e}:host .elux-button.basicWhite:hover ::ng-deep lib-elux-icon span{background-color:#a5742e!important}:host .elux-button.basicWhite:disabled{background:#dee7ea;color:#c9c9ca}: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}: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}: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}: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}: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}: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}:host .elux-button.secondary-negative:disabled{border-color:#7a8a9b;color:#7a8a9b}:host .elux-button.size-2{height:48px;padding:0 66px}:host .elux-button.size-2 span{font-size:16px}:host .elux-button.size-3{height:48px;padding:0}:host .elux-button.size-3 span{font-size:16px}: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"] }] }); }
|
|
167
168
|
}
|
|
168
169
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EluxButton, decorators: [{
|
|
169
170
|
type: Component,
|
|
170
|
-
args: [{ selector: 'lib-elux-button', standalone: true, imports: [CommonModule, ReactiveFormsModule, EluxIcon, EluxLoading], template: "<button\n [type]=\"typeButton\"\n class=\"btn elux-button size-{{ size }}\"\n [
|
|
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-left:20px;padding-right:20px;min-height:36px;border:none;border-radius:2px}: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}: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}: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}: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}: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}: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}: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{border-radius:2px;font-weight:600;color:#a5742e}:host .elux-button.basicWhite:hover ::ng-deep lib-elux-icon span{background-color:#a5742e!important}:host .elux-button.basicWhite:disabled{background:#dee7ea;color:#c9c9ca}: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}: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}: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}: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}: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}: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}:host .elux-button.secondary-negative:disabled{border-color:#7a8a9b;color:#7a8a9b}:host .elux-button.size-2{height:48px;padding:0 66px}:host .elux-button.size-2 span{font-size:16px}:host .elux-button.size-3{height:48px;padding:0}:host .elux-button.size-3 span{font-size:16px}:host .elux-button.rounded{border-radius:24px!important}:host .elux-button .gap-icon{margin-right:8px;margin-left:8px}\n"] }]
|
|
171
172
|
}], ctorParameters: () => [{ type: i1$1.Router }], propDecorators: { disabled: [{
|
|
172
173
|
type: Input
|
|
173
174
|
}], type: [{
|
|
@@ -194,6 +195,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
194
195
|
type: Input
|
|
195
196
|
}], onlyfirstLetterUpper: [{
|
|
196
197
|
type: Input
|
|
198
|
+
}], rounded: [{
|
|
199
|
+
type: Input
|
|
197
200
|
}], onClick: [{
|
|
198
201
|
type: Output
|
|
199
202
|
}] } });
|
|
@@ -1211,7 +1214,7 @@ class EluxInputSearchModalComponent {
|
|
|
1211
1214
|
this.searchClickEvent.emit(event);
|
|
1212
1215
|
}
|
|
1213
1216
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EluxInputSearchModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1214
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: EluxInputSearchModalComponent, isStandalone: true, selector: "lib-elux-input-search-modal", inputs: { value: "value", placeholder: "placeholder" }, outputs: { searchClickEvent: "searchClickEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"input-search\">\n <input\n type=\"text\"\n class=\"input-field\"\n [placeholder]=\"placeholder\"\n [value]=\"value\"\n disabled\n />\n <lib-elux-button [icon]=\"'Search.svg'\" type=\"basic\" (onClick)=\"searchClick($event)\"></lib-elux-button>\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}}:host .input-search{position:relative;display:flex}:host .input-field{width:100%;box-sizing:border-box;position:relative;margin-right:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: EluxButton, selector: "lib-elux-button", inputs: ["disabled", "type", "typeButton", "content", "done", "routerLink", "link", "size", "icon", "iconAlign", "externalLink", "loading", "onlyfirstLetterUpper"], outputs: ["onClick"] }] }); }
|
|
1217
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: EluxInputSearchModalComponent, isStandalone: true, selector: "lib-elux-input-search-modal", inputs: { value: "value", placeholder: "placeholder" }, outputs: { searchClickEvent: "searchClickEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"input-search\">\n <input\n type=\"text\"\n class=\"input-field\"\n [placeholder]=\"placeholder\"\n [value]=\"value\"\n disabled\n />\n <lib-elux-button [icon]=\"'Search.svg'\" type=\"basic\" (onClick)=\"searchClick($event)\"></lib-elux-button>\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}}:host .input-search{position:relative;display:flex}:host .input-field{width:100%;box-sizing:border-box;position:relative;margin-right:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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"] }] }); }
|
|
1215
1218
|
}
|
|
1216
1219
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EluxInputSearchModalComponent, decorators: [{
|
|
1217
1220
|
type: Component,
|
|
@@ -2334,6 +2337,7 @@ class EluxCardProduct {
|
|
|
2334
2337
|
constructor() {
|
|
2335
2338
|
this.removeIcon = false;
|
|
2336
2339
|
this.incompleteRegister = false;
|
|
2340
|
+
this.connectedProduct = false;
|
|
2337
2341
|
this.removeEvent = new EventEmitter();
|
|
2338
2342
|
}
|
|
2339
2343
|
removeProduct() {
|
|
@@ -2355,11 +2359,11 @@ class EluxCardProduct {
|
|
|
2355
2359
|
return '';
|
|
2356
2360
|
}
|
|
2357
2361
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EluxCardProduct, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2358
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: EluxCardProduct, isStandalone: true, selector: "lib-elux-card-product", inputs: { image: "image", imageAlt: "imageAlt", model: "model", description: "description", voltage: "voltage", link: "link", removeIcon: "removeIcon", incompleteRegister: "incompleteRegister" }, outputs: { removeEvent: "removeEvent" }, ngImport: i0, template: "<div class=\"position-relative\">\n <a [routerLink]=\"link\" class=\"product-card\">\n <div class=\"div-image mr-2\" *ngIf=\"!!image\">\n <img [src]=\"image\" [alt]=\"imageAlt\" class=\"image\" />\n </div>\n <div class=\"content\">\n <div>\n <div class=\"d-flex align-items-center gap
|
|
2362
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: EluxCardProduct, isStandalone: true, selector: "lib-elux-card-product", inputs: { image: "image", imageAlt: "imageAlt", model: "model", description: "description", voltage: "voltage", link: "link", removeIcon: "removeIcon", incompleteRegister: "incompleteRegister", connectedProduct: "connectedProduct" }, outputs: { removeEvent: "removeEvent" }, ngImport: i0, template: "<div class=\"position-relative\">\n <a [routerLink]=\"link\" class=\"product-card\">\n <div class=\"div-image mr-2\" *ngIf=\"!!image\">\n <div class=\"connected-product\" *ngIf=\"connectedProduct\">\n <lib-elux-icon icon=\"Logo_small.svg\" color=\"#FFF\" size=\"12\"></lib-elux-icon>\n </div>\n <img [src]=\"image\" [alt]=\"imageAlt\" class=\"image\" />\n </div>\n <div class=\"content\">\n <div>\n <div class=\"d-flex align-items-center gap\">\n <span class=\"product-code\">{{ model | uppercase }}</span>\n <span class=\"incomplete-register-tag\" *ngIf=\"incompleteRegister\">\n Registro incompleto\n </span>\n <span class=\"voltage-tag\" *ngIf=\"!!voltage\"> {{ voltage }} </span>\n </div>\n <span class=\"product-name\">{{ capitalizeDescription() }}</span>\n </div>\n </div>\n </a>\n\n <lib-elux-icon\n *ngIf=\"removeIcon\"\n class=\"close-icon\"\n icon=\"Close.svg\"\n tabindex=\"0\"\n color=\"#011E41\"\n size=\"18\"\n sizeType=\"px\"\n (keyup.enter)=\"removeProduct()\"\n (click)=\"removeProduct()\"\n ></lib-elux-icon>\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}}.product-card{height:80px;padding:8px;border:solid 1px #dee7ea;border-radius:2px;display:flex;flex-direction:row;text-decoration:none;background-color:#fff;box-shadow:0 4px 18px #0000001f}.product-card:focus-visible{outline:none;border-color:transparent}.product-card:focus{box-shadow:0 0 0 2px #16a748;outline:none;border-color:transparent}.product-card .div-image{width:64px;height:64px;flex-shrink:0;margin-right:8px;overflow:hidden;display:flex;align-items:center;justify-content:center}.product-card .div-image .connected-product{background-color:#011e41;position:absolute;width:22px;height:22px;border-radius:6px;display:flex;justify-content:center;align-items:center;left:8px;bottom:8px}.product-card .div-image .connected-product ::ng-deep lib-elux-icon{display:flex!important}.product-card .div-image .image{width:100%;height:100%;object-fit:contain}.product-card .content{overflow:hidden;flex-grow:1;display:flex;flex-wrap:wrap;align-items:center}.product-card .content .gap{gap:6px}.product-card .content .product-code{font-size:14px;font-style:normal;font-weight:400;line-height:normal;display:block;color:#515253}.product-card .content .product-name{font-size:14px;font-style:normal;font-weight:600;line-height:normal;display:block;color:#011e41;white-space:break-spaces}.product-card .content .incomplete-register-tag{font-size:10px;line-height:10px;padding:2px 8px;border-radius:14px;background-color:#d01935;color:#fff;height:16px}.product-card .content .voltage-tag{font-size:10px;line-height:10px;color:#fff;height:16px;padding:2px 8px;border-radius:16px;background-color:#5b6a78}.close-icon{cursor:pointer;position:absolute;top:4px;right:4px}\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: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "component", type: EluxIcon, selector: "lib-elux-icon", inputs: ["color", "useSubscription", "icon", "description", "size", "height", "width", "sizeType"] }] }); }
|
|
2359
2363
|
}
|
|
2360
2364
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EluxCardProduct, decorators: [{
|
|
2361
2365
|
type: Component,
|
|
2362
|
-
args: [{ standalone: true, imports: [RouterModule, CommonModule, EluxIcon], selector: 'lib-elux-card-product', template: "<div class=\"position-relative\">\n <a [routerLink]=\"link\" class=\"product-card\">\n <div class=\"div-image mr-2\" *ngIf=\"!!image\">\n <img [src]=\"image\" [alt]=\"imageAlt\" class=\"image\" />\n </div>\n <div class=\"content\">\n <div>\n <div class=\"d-flex align-items-center gap
|
|
2366
|
+
args: [{ standalone: true, imports: [RouterModule, CommonModule, EluxIcon], selector: 'lib-elux-card-product', template: "<div class=\"position-relative\">\n <a [routerLink]=\"link\" class=\"product-card\">\n <div class=\"div-image mr-2\" *ngIf=\"!!image\">\n <div class=\"connected-product\" *ngIf=\"connectedProduct\">\n <lib-elux-icon icon=\"Logo_small.svg\" color=\"#FFF\" size=\"12\"></lib-elux-icon>\n </div>\n <img [src]=\"image\" [alt]=\"imageAlt\" class=\"image\" />\n </div>\n <div class=\"content\">\n <div>\n <div class=\"d-flex align-items-center gap\">\n <span class=\"product-code\">{{ model | uppercase }}</span>\n <span class=\"incomplete-register-tag\" *ngIf=\"incompleteRegister\">\n Registro incompleto\n </span>\n <span class=\"voltage-tag\" *ngIf=\"!!voltage\"> {{ voltage }} </span>\n </div>\n <span class=\"product-name\">{{ capitalizeDescription() }}</span>\n </div>\n </div>\n </a>\n\n <lib-elux-icon\n *ngIf=\"removeIcon\"\n class=\"close-icon\"\n icon=\"Close.svg\"\n tabindex=\"0\"\n color=\"#011E41\"\n size=\"18\"\n sizeType=\"px\"\n (keyup.enter)=\"removeProduct()\"\n (click)=\"removeProduct()\"\n ></lib-elux-icon>\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}}.product-card{height:80px;padding:8px;border:solid 1px #dee7ea;border-radius:2px;display:flex;flex-direction:row;text-decoration:none;background-color:#fff;box-shadow:0 4px 18px #0000001f}.product-card:focus-visible{outline:none;border-color:transparent}.product-card:focus{box-shadow:0 0 0 2px #16a748;outline:none;border-color:transparent}.product-card .div-image{width:64px;height:64px;flex-shrink:0;margin-right:8px;overflow:hidden;display:flex;align-items:center;justify-content:center}.product-card .div-image .connected-product{background-color:#011e41;position:absolute;width:22px;height:22px;border-radius:6px;display:flex;justify-content:center;align-items:center;left:8px;bottom:8px}.product-card .div-image .connected-product ::ng-deep lib-elux-icon{display:flex!important}.product-card .div-image .image{width:100%;height:100%;object-fit:contain}.product-card .content{overflow:hidden;flex-grow:1;display:flex;flex-wrap:wrap;align-items:center}.product-card .content .gap{gap:6px}.product-card .content .product-code{font-size:14px;font-style:normal;font-weight:400;line-height:normal;display:block;color:#515253}.product-card .content .product-name{font-size:14px;font-style:normal;font-weight:600;line-height:normal;display:block;color:#011e41;white-space:break-spaces}.product-card .content .incomplete-register-tag{font-size:10px;line-height:10px;padding:2px 8px;border-radius:14px;background-color:#d01935;color:#fff;height:16px}.product-card .content .voltage-tag{font-size:10px;line-height:10px;color:#fff;height:16px;padding:2px 8px;border-radius:16px;background-color:#5b6a78}.close-icon{cursor:pointer;position:absolute;top:4px;right:4px}\n"] }]
|
|
2363
2367
|
}], propDecorators: { image: [{
|
|
2364
2368
|
type: Input
|
|
2365
2369
|
}], imageAlt: [{
|
|
@@ -2376,10 +2380,93 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
2376
2380
|
type: Input
|
|
2377
2381
|
}], incompleteRegister: [{
|
|
2378
2382
|
type: Input
|
|
2383
|
+
}], connectedProduct: [{
|
|
2384
|
+
type: Input
|
|
2379
2385
|
}], removeEvent: [{
|
|
2380
2386
|
type: Output
|
|
2381
2387
|
}] } });
|
|
2382
2388
|
|
|
2389
|
+
class EluxCardArticle {
|
|
2390
|
+
constructor() {
|
|
2391
|
+
this.BREAK_VALUE = 60;
|
|
2392
|
+
}
|
|
2393
|
+
truncateTitle(title) {
|
|
2394
|
+
if (!title)
|
|
2395
|
+
return '';
|
|
2396
|
+
return title.length > this.BREAK_VALUE ? `${title.substring(0, this.BREAK_VALUE)}...` : title;
|
|
2397
|
+
}
|
|
2398
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EluxCardArticle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2399
|
+
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: "<div class=\"card\">\n <img class=\"image\" [srcset]=\"image\" [alt]=\"imageAlt\" loading=\"lazy\" />\n <div class=\"content\">\n <span class=\"title\">{{ truncateTitle(title) }}</span>\n <a [routerLink]=\"routerLink\">\n <lib-elux-arrow-link [title]=\"'Ler artigo'\"></lib-elux-arrow-link>\n </a>\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}}:host .card{width:250px;height:320px;border-radius:4px;box-shadow:3px 3px 10px #00000029;overflow:hidden;margin-bottom:10px;display:flex;flex-direction:column;justify-content:space-between}:host .image{width:100%;height:160px;object-fit:cover;object-position:center;display:block}:host .content{height:100%;padding:16px 16px 0;display:flex;flex-direction:column;justify-content:space-between}:host .title{color:#011e41;font-size:16px;font-style:normal;font-weight:600;line-height:20px}\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: EluxArrowLink, selector: "lib-elux-arrow-link", inputs: ["title", "reverse", "icon_name", "icon_size"] }] }); }
|
|
2400
|
+
}
|
|
2401
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EluxCardArticle, decorators: [{
|
|
2402
|
+
type: Component,
|
|
2403
|
+
args: [{ standalone: true, imports: [RouterModule, CommonModule, EluxArrowLink], selector: 'lib-elux-card-article', template: "<div class=\"card\">\n <img class=\"image\" [srcset]=\"image\" [alt]=\"imageAlt\" loading=\"lazy\" />\n <div class=\"content\">\n <span class=\"title\">{{ truncateTitle(title) }}</span>\n <a [routerLink]=\"routerLink\">\n <lib-elux-arrow-link [title]=\"'Ler artigo'\"></lib-elux-arrow-link>\n </a>\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}}:host .card{width:250px;height:320px;border-radius:4px;box-shadow:3px 3px 10px #00000029;overflow:hidden;margin-bottom:10px;display:flex;flex-direction:column;justify-content:space-between}:host .image{width:100%;height:160px;object-fit:cover;object-position:center;display:block}:host .content{height:100%;padding:16px 16px 0;display:flex;flex-direction:column;justify-content:space-between}:host .title{color:#011e41;font-size:16px;font-style:normal;font-weight:600;line-height:20px}\n"] }]
|
|
2404
|
+
}], propDecorators: { title: [{
|
|
2405
|
+
type: Input
|
|
2406
|
+
}], routerLink: [{
|
|
2407
|
+
type: Input
|
|
2408
|
+
}], image: [{
|
|
2409
|
+
type: Input
|
|
2410
|
+
}], imageAlt: [{
|
|
2411
|
+
type: Input
|
|
2412
|
+
}] } });
|
|
2413
|
+
|
|
2414
|
+
class EluxCardServiceOrder {
|
|
2415
|
+
constructor(router) {
|
|
2416
|
+
this.router = router;
|
|
2417
|
+
this.type = '';
|
|
2418
|
+
this.routerLink = '';
|
|
2419
|
+
this.date = '';
|
|
2420
|
+
this.productName = '';
|
|
2421
|
+
this.productImageUrl = '';
|
|
2422
|
+
this.statusName = '';
|
|
2423
|
+
this.statusColor = '';
|
|
2424
|
+
}
|
|
2425
|
+
navigateToDetail() {
|
|
2426
|
+
this.router.navigate([`${this.routerLink}`]);
|
|
2427
|
+
}
|
|
2428
|
+
getContrastTextColor(hexColor) {
|
|
2429
|
+
const cleanHex = hexColor.replace('#', '');
|
|
2430
|
+
const whiteColor = '#ffffff';
|
|
2431
|
+
const blackColor = '#251E00';
|
|
2432
|
+
if (cleanHex.length !== 6) {
|
|
2433
|
+
return whiteColor;
|
|
2434
|
+
}
|
|
2435
|
+
const r = parseInt(cleanHex.slice(0, 2), 16);
|
|
2436
|
+
const g = parseInt(cleanHex.slice(2, 4), 16);
|
|
2437
|
+
const b = parseInt(cleanHex.slice(4, 6), 16);
|
|
2438
|
+
const luminance = 0.299 * r + 0.587 * g + 0.114 * b;
|
|
2439
|
+
return luminance > 186 ? blackColor : whiteColor;
|
|
2440
|
+
}
|
|
2441
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EluxCardServiceOrder, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2442
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: EluxCardServiceOrder, isStandalone: true, selector: "elux-card-service-order", inputs: { type: "type", routerLink: "routerLink", date: "date", productName: "productName", productImageUrl: "productImageUrl", statusName: "statusName", statusColor: "statusColor" }, ngImport: i0, template: "<div class=\"card-container\">\n <div class=\"card-section\">\n <div class=\"d-flex flex-column justify-content-center pr-2\">\n <img #image class=\"card-image\" [src]=\"productImageUrl\" [alt]=\"productName\" (error)=\"image.src = ''\" />\n </div>\n\n <div class=\"d-flex flex-column justify-content-center\">\n <div class=\"d-flex flex-column card-description\">\n <span>{{ type }}</span>\n <h4>{{ productName }}</h4>\n <div class=\"d-flex flex-row mt-2\" *ngIf=\"!!date\">\n <lib-elux-icon \n icon=\"Calendar.svg\" \n color=\"#515253\"\n size=\"16\" \n sizeType=\"px\" />\n <p class=\"ms-1 mb-0\">{{ date }}</p>\n </div>\n </div>\n <div class=\"d-flex w-100 mt-3\">\n <div class=\"card-status\" [style.background-color]=\"statusColor\" [style.color]=\"getContrastTextColor(statusColor)\">\n <p>{{ statusName }}</p>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"w-100 mt-auto\">\n <hr>\n </div>\n\n <div class=\"card-section\">\n <div class=\"card-link\" (click)=\"navigateToDetail()\">\n <a class=\"d-flex\">\n <span>Acessar detalhes</span>\n <lib-elux-icon \n icon=\"Chevron_Right.svg\" \n color=\"#011E41\"\n size=\"24\" \n sizeType=\"px\" />\n </a>\n </div>\n </div>\n</div>", 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-container{display:flex;flex-direction:column;align-items:flex-start;height:100%;padding:16px;gap:16px;background:#fff;box-sizing:border-box;box-shadow:4px 4px 8px #0000001a;border:1px solid #DEE7EA;border-radius:4px}.card-container .card-section{display:flex;flex-direction:row;width:100%}.card-container .card-image{width:64px;height:64px;-webkit-user-select:none;user-select:none;-ms-user-select:none;background-color:#fff}.card-container .card-image[src=\"\"]{visibility:hidden}.card-container .card-description span{font-family:Electrolux Sans;font-style:normal;font-weight:400;font-size:14px;line-height:17px;color:#515253}.card-container .card-description h4{font-family:Electrolux Sans;font-style:normal;font-weight:600;font-size:14px;line-height:17px;color:#011e41;margin-top:4px;margin-bottom:0}.card-container .card-status{display:flex;flex-direction:row;align-items:center;justify-content:center;padding:3px 8px;background-color:#ffd726;border-radius:16px}.card-container .card-status p{font-family:Electrolux Sans;font-style:normal;font-weight:400;font-size:14px;line-height:16px;margin:0}.card-container .card-link{display:block;margin-left:auto;-webkit-user-select:none;user-select:none;-ms-user-select:none}.card-container .card-link a{font-family:Electrolux Sans;font-style:normal;font-weight:600;font-size:16px;line-height:28px;color:#011e41;text-decoration:none}.card-container .card-link a:visited{text-decoration:none}.card-container .card-link a:hover{text-decoration:none;cursor:pointer}.card-container hr{margin:8px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RouterModule }, { kind: "component", type: EluxIcon, selector: "lib-elux-icon", inputs: ["color", "useSubscription", "icon", "description", "size", "height", "width", "sizeType"] }] }); }
|
|
2443
|
+
}
|
|
2444
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EluxCardServiceOrder, decorators: [{
|
|
2445
|
+
type: Component,
|
|
2446
|
+
args: [{ standalone: true, imports: [CommonModule, RouterModule, EluxIcon], selector: 'elux-card-service-order', template: "<div class=\"card-container\">\n <div class=\"card-section\">\n <div class=\"d-flex flex-column justify-content-center pr-2\">\n <img #image class=\"card-image\" [src]=\"productImageUrl\" [alt]=\"productName\" (error)=\"image.src = ''\" />\n </div>\n\n <div class=\"d-flex flex-column justify-content-center\">\n <div class=\"d-flex flex-column card-description\">\n <span>{{ type }}</span>\n <h4>{{ productName }}</h4>\n <div class=\"d-flex flex-row mt-2\" *ngIf=\"!!date\">\n <lib-elux-icon \n icon=\"Calendar.svg\" \n color=\"#515253\"\n size=\"16\" \n sizeType=\"px\" />\n <p class=\"ms-1 mb-0\">{{ date }}</p>\n </div>\n </div>\n <div class=\"d-flex w-100 mt-3\">\n <div class=\"card-status\" [style.background-color]=\"statusColor\" [style.color]=\"getContrastTextColor(statusColor)\">\n <p>{{ statusName }}</p>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"w-100 mt-auto\">\n <hr>\n </div>\n\n <div class=\"card-section\">\n <div class=\"card-link\" (click)=\"navigateToDetail()\">\n <a class=\"d-flex\">\n <span>Acessar detalhes</span>\n <lib-elux-icon \n icon=\"Chevron_Right.svg\" \n color=\"#011E41\"\n size=\"24\" \n sizeType=\"px\" />\n </a>\n </div>\n </div>\n</div>", 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-container{display:flex;flex-direction:column;align-items:flex-start;height:100%;padding:16px;gap:16px;background:#fff;box-sizing:border-box;box-shadow:4px 4px 8px #0000001a;border:1px solid #DEE7EA;border-radius:4px}.card-container .card-section{display:flex;flex-direction:row;width:100%}.card-container .card-image{width:64px;height:64px;-webkit-user-select:none;user-select:none;-ms-user-select:none;background-color:#fff}.card-container .card-image[src=\"\"]{visibility:hidden}.card-container .card-description span{font-family:Electrolux Sans;font-style:normal;font-weight:400;font-size:14px;line-height:17px;color:#515253}.card-container .card-description h4{font-family:Electrolux Sans;font-style:normal;font-weight:600;font-size:14px;line-height:17px;color:#011e41;margin-top:4px;margin-bottom:0}.card-container .card-status{display:flex;flex-direction:row;align-items:center;justify-content:center;padding:3px 8px;background-color:#ffd726;border-radius:16px}.card-container .card-status p{font-family:Electrolux Sans;font-style:normal;font-weight:400;font-size:14px;line-height:16px;margin:0}.card-container .card-link{display:block;margin-left:auto;-webkit-user-select:none;user-select:none;-ms-user-select:none}.card-container .card-link a{font-family:Electrolux Sans;font-style:normal;font-weight:600;font-size:16px;line-height:28px;color:#011e41;text-decoration:none}.card-container .card-link a:visited{text-decoration:none}.card-container .card-link a:hover{text-decoration:none;cursor:pointer}.card-container hr{margin:8px 0}\n"] }]
|
|
2447
|
+
}], ctorParameters: () => [{ type: i1$1.Router }], propDecorators: { type: [{
|
|
2448
|
+
type: Input,
|
|
2449
|
+
args: [{ required: false }]
|
|
2450
|
+
}], routerLink: [{
|
|
2451
|
+
type: Input,
|
|
2452
|
+
args: [{ required: true }]
|
|
2453
|
+
}], date: [{
|
|
2454
|
+
type: Input,
|
|
2455
|
+
args: [{ required: false }]
|
|
2456
|
+
}], productName: [{
|
|
2457
|
+
type: Input,
|
|
2458
|
+
args: [{ required: true }]
|
|
2459
|
+
}], productImageUrl: [{
|
|
2460
|
+
type: Input,
|
|
2461
|
+
args: [{ required: true }]
|
|
2462
|
+
}], statusName: [{
|
|
2463
|
+
type: Input,
|
|
2464
|
+
args: [{ required: true }]
|
|
2465
|
+
}], statusColor: [{
|
|
2466
|
+
type: Input,
|
|
2467
|
+
args: [{ required: true }]
|
|
2468
|
+
}] } });
|
|
2469
|
+
|
|
2383
2470
|
const ElectroluxComponents = [
|
|
2384
2471
|
EluxBreadcrumb,
|
|
2385
2472
|
EluxButton,
|
|
@@ -2418,5 +2505,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
2418
2505
|
* Generated bundle index. Do not edit.
|
|
2419
2506
|
*/
|
|
2420
2507
|
|
|
2421
|
-
export { ElectroluxComponents, ElectroluxDesignSystemModule, EluxAccordion, EluxArrowLink, EluxBreadcrumb, EluxButton, EluxCard1, EluxCard2, EluxCard3, EluxCard4, EluxCardProduct, EluxCarouselComponent, EluxCarouselFixedComponent, EluxChip, EluxDataTable, EluxDatepicker, EluxDropdown, EluxDropdownMultiple, EluxIcon, EluxInputSearchComponent, EluxInputSearchModalComponent, EluxLoading, EluxLoading2, EluxModal, EluxPaginator, EluxStepBar, EluxSwitch, EluxToast, ToasterService };
|
|
2508
|
+
export { ElectroluxComponents, ElectroluxDesignSystemModule, EluxAccordion, EluxArrowLink, EluxBreadcrumb, EluxButton, EluxCard1, EluxCard2, EluxCard3, EluxCard4, EluxCardArticle, EluxCardProduct, EluxCardServiceOrder, EluxCarouselComponent, EluxCarouselFixedComponent, EluxChip, EluxDataTable, EluxDatepicker, EluxDropdown, EluxDropdownMultiple, EluxIcon, EluxInputSearchComponent, EluxInputSearchModalComponent, EluxLoading, EluxLoading2, EluxModal, EluxPaginator, EluxStepBar, EluxSwitch, EluxToast, ToasterService };
|
|
2422
2509
|
//# sourceMappingURL=elxjs-ui.mjs.map
|