tudu-components 0.2.10 → 0.2.12
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/esm2020/lib/components/card-layout/card-layout.component.mjs +3 -3
- package/esm2020/lib/components/custom-modal/custom-modal.component.mjs +123 -0
- package/esm2020/lib/components/cutom-modal/cutom-modal.component.mjs +14 -0
- package/esm2020/lib/tudu-components.module.mjs +28 -7
- package/esm2020/public-api.mjs +2 -1
- package/fesm2015/tudu-components.mjs +229 -89
- package/fesm2015/tudu-components.mjs.map +1 -1
- package/fesm2020/tudu-components.mjs +229 -89
- package/fesm2020/tudu-components.mjs.map +1 -1
- package/lib/components/custom-modal/custom-modal.component.d.ts +35 -0
- package/lib/components/cutom-modal/cutom-modal.component.d.ts +8 -0
- package/lib/tudu-components.module.d.ts +3 -2
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, Input,
|
|
3
|
-
import * as
|
|
2
|
+
import { Component, Input, EventEmitter, Output, HostListener, NgModule, Injectable } from '@angular/core';
|
|
3
|
+
import * as i1$1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import * as i1 from '@angular/router';
|
|
6
6
|
import { NavigationEnd } from '@angular/router';
|
|
@@ -87,10 +87,10 @@ class CardLayoutComponent {
|
|
|
87
87
|
}
|
|
88
88
|
}
|
|
89
89
|
CardLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CardLayoutComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
90
|
-
CardLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CardLayoutComponent, selector: "lib-card-layout", inputs: { statusPedido: "statusPedido", cardTemplateIndicator: "cardTemplateIndicator", hideHeader: "hideHeader" }, ngImport: i0, template: "<div\n class=\"service-card rounded-xl shadow-md overflow-hidden bg-white hover:shadow-lg transition-all duration-300 relative mb-5\"\n>\n
|
|
90
|
+
CardLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CardLayoutComponent, selector: "lib-card-layout", inputs: { statusPedido: "statusPedido", cardTemplateIndicator: "cardTemplateIndicator", hideHeader: "hideHeader" }, ngImport: i0, template: "<div\n class=\"service-card rounded-xl shadow-md overflow-hidden bg-white hover:shadow-lg transition-all duration-300 relative mb-5\"\n>\n <div\n [class.force-show]=\"!hideHeader\"\n class=\"service-card-header flex items-center justify-between p-3 border-b border-gray-200\"\n >\n <div class=\"flex items-center gap-3 w-full min-w-0\">\n <div class=\"icon-style flex-shrink-0\">\n <ng-content select=\"[service-icon]\"></ng-content>\n </div>\n\n <div class=\"flex flex-col flex-1 min-w-0\">\n <div class=\"flex items-center gap-3 w-full min-w-0\">\n <div class=\"service-title truncate flex-1 min-w-0\">\n <ng-content select=\"[service-title]\"></ng-content>\n </div>\n\n <div class=\"flex-shrink-0\">\n <ng-content select=\"[details-btn]\"></ng-content>\n </div>\n </div>\n\n <div\n class=\"truncate w-full\"\n style=\"\n font-size: 12px;\n color: var(--tab-link);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n \"\n >\n <ng-content select=\"[service-address]\"></ng-content>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"service-card-body p-4 space-y-3\">\n <div>\n <div\n class=\"flex flex-col items-start gap-3 border-b border-gray-100 pb-3 mb-3\"\n *ngIf=\"cardTemplateIndicator === 1\"\n >\n <div class=\"flex justify-between w-full pb-2\">\n <div class=\"status-badge\" [ngStyle]=\"badgeStyles\">\n <ng-content select=\"[status-badge]\"></ng-content>\n </div>\n\n <div\n class=\"text-xs text-gray-50 font-semibold\"\n style=\"\n background-color: #d3d3d32c;\n color: grey;\n border-radius: 25px;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 4px 10px;\n \"\n >\n <ng-content select=\"[order-number]\"></ng-content>\n </div>\n </div>\n\n <div class=\"flex flex-wrap gap-2 items-center\">\n <ng-content select=\"[filter-tag]\"></ng-content>\n </div>\n </div>\n\n <div class=\"fw-semibold\" *ngIf=\"statusPedido === 'finalizado'\">\n <ng-content select=\"[conclusion-date]\"></ng-content>\n </div>\n </div>\n <ng-content select=\"[info-row]\"></ng-content>\n\n <ng-content select=\"[description]\"></ng-content>\n </div>\n\n <div\n class=\"service-card-footer flex justify-center items-center p-3 border-t border-gray-100 bg-gray-50 gap-1\"\n >\n <div class=\"col-6\">\n <ng-content select=\"[main-btn]\"></ng-content>\n </div>\n <div\n class=\"fw-semibold col-6\"\n style=\"display: flex; justify-content: flex-end\"\n >\n <ng-content select=\"[price]\"></ng-content>\n </div>\n </div>\n</div>\n", styles: [".service-card{background:var(--light, #fff);border-radius:1rem;transition:all .3s ease;.service-card-header i {color: var(--primary); font-size: 20px;} .order-badge {background-color: #d3d3d32c; color: grey; border-radius: 25px; padding: 5px;} .template-2-order {margin-top: -6em;} &[data-template=\"1\"] {} &[data-template=\"2\"] {} .status-badge {display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: 12px; padding: 4px 10px; border-radius: 25px; text-transform: capitalize; transition: all .3s ease; i {color: inherit !important;}} .filter-tag {background: var(--tag-bg, #f9fafb); border: 1px solid var(--primary); border-radius: 9999px; padding: .25rem .75rem; color: var(--primary); font-size: 12px;} .details-btn {cursor: pointer;} .price {font-weight: 600; font-size: 1rem; color: var(--primary);} .service-address {font-size: 13px; color: rgb(212,212,212) !important;} .icon-style {display: flex; justify-content: center; align-items: center; background-color: var(--primary) !important; width: 40px; height: 40px; font-size: 12px; font-size: 20px; border-radius: 10px;} .price {font-weight: 600; color: var(--background-color);} .service-title {flex: 1; min-width: 0; display: block; font-weight: 600; font-size: 1.1rem; ::ng-deep > * {display: block !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; width: 100%;}} .badge-finalizado {background-color: #e0f7fa; color: #00796b;} .badge-concluido {background-color: #e8f5e9; color: #2e7d32;} .badge-cancelado {background-color: #ffebee; color: #c62828;} .badge-publicado {background-color: #fff3e0; color: #25a5ff;} .badge-default {background-color: #eeeeee; color: #757575;}}.prestador-photo{width:100%;height:100%;object-fit:cover;border-radius:50%}.budget-card-footer button{width:100%;border-radius:8px;font-weight:600;transition:.2s}.status-badge i.notification-pulse{animation:pulse 2s infinite}:host-context(.has-notification) .status-badge i{animation:pulse 2s infinite}.service-card-header{display:none}@media (min-width: 768px){.service-card-header{display:block}}.service-card-header.force-show{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
91
91
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CardLayoutComponent, decorators: [{
|
|
92
92
|
type: Component,
|
|
93
|
-
args: [{ selector: 'lib-card-layout', template: "<div\n class=\"service-card rounded-xl shadow-md overflow-hidden bg-white hover:shadow-lg transition-all duration-300 relative mb-5\"\n>\n
|
|
93
|
+
args: [{ selector: 'lib-card-layout', template: "<div\n class=\"service-card rounded-xl shadow-md overflow-hidden bg-white hover:shadow-lg transition-all duration-300 relative mb-5\"\n>\n <div\n [class.force-show]=\"!hideHeader\"\n class=\"service-card-header flex items-center justify-between p-3 border-b border-gray-200\"\n >\n <div class=\"flex items-center gap-3 w-full min-w-0\">\n <div class=\"icon-style flex-shrink-0\">\n <ng-content select=\"[service-icon]\"></ng-content>\n </div>\n\n <div class=\"flex flex-col flex-1 min-w-0\">\n <div class=\"flex items-center gap-3 w-full min-w-0\">\n <div class=\"service-title truncate flex-1 min-w-0\">\n <ng-content select=\"[service-title]\"></ng-content>\n </div>\n\n <div class=\"flex-shrink-0\">\n <ng-content select=\"[details-btn]\"></ng-content>\n </div>\n </div>\n\n <div\n class=\"truncate w-full\"\n style=\"\n font-size: 12px;\n color: var(--tab-link);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n \"\n >\n <ng-content select=\"[service-address]\"></ng-content>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"service-card-body p-4 space-y-3\">\n <div>\n <div\n class=\"flex flex-col items-start gap-3 border-b border-gray-100 pb-3 mb-3\"\n *ngIf=\"cardTemplateIndicator === 1\"\n >\n <div class=\"flex justify-between w-full pb-2\">\n <div class=\"status-badge\" [ngStyle]=\"badgeStyles\">\n <ng-content select=\"[status-badge]\"></ng-content>\n </div>\n\n <div\n class=\"text-xs text-gray-50 font-semibold\"\n style=\"\n background-color: #d3d3d32c;\n color: grey;\n border-radius: 25px;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 4px 10px;\n \"\n >\n <ng-content select=\"[order-number]\"></ng-content>\n </div>\n </div>\n\n <div class=\"flex flex-wrap gap-2 items-center\">\n <ng-content select=\"[filter-tag]\"></ng-content>\n </div>\n </div>\n\n <div class=\"fw-semibold\" *ngIf=\"statusPedido === 'finalizado'\">\n <ng-content select=\"[conclusion-date]\"></ng-content>\n </div>\n </div>\n <ng-content select=\"[info-row]\"></ng-content>\n\n <ng-content select=\"[description]\"></ng-content>\n </div>\n\n <div\n class=\"service-card-footer flex justify-center items-center p-3 border-t border-gray-100 bg-gray-50 gap-1\"\n >\n <div class=\"col-6\">\n <ng-content select=\"[main-btn]\"></ng-content>\n </div>\n <div\n class=\"fw-semibold col-6\"\n style=\"display: flex; justify-content: flex-end\"\n >\n <ng-content select=\"[price]\"></ng-content>\n </div>\n </div>\n</div>\n", styles: [".service-card{background:var(--light, #fff);border-radius:1rem;transition:all .3s ease;.service-card-header i {color: var(--primary); font-size: 20px;} .order-badge {background-color: #d3d3d32c; color: grey; border-radius: 25px; padding: 5px;} .template-2-order {margin-top: -6em;} &[data-template=\"1\"] {} &[data-template=\"2\"] {} .status-badge {display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: 12px; padding: 4px 10px; border-radius: 25px; text-transform: capitalize; transition: all .3s ease; i {color: inherit !important;}} .filter-tag {background: var(--tag-bg, #f9fafb); border: 1px solid var(--primary); border-radius: 9999px; padding: .25rem .75rem; color: var(--primary); font-size: 12px;} .details-btn {cursor: pointer;} .price {font-weight: 600; font-size: 1rem; color: var(--primary);} .service-address {font-size: 13px; color: rgb(212,212,212) !important;} .icon-style {display: flex; justify-content: center; align-items: center; background-color: var(--primary) !important; width: 40px; height: 40px; font-size: 12px; font-size: 20px; border-radius: 10px;} .price {font-weight: 600; color: var(--background-color);} .service-title {flex: 1; min-width: 0; display: block; font-weight: 600; font-size: 1.1rem; ::ng-deep > * {display: block !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; width: 100%;}} .badge-finalizado {background-color: #e0f7fa; color: #00796b;} .badge-concluido {background-color: #e8f5e9; color: #2e7d32;} .badge-cancelado {background-color: #ffebee; color: #c62828;} .badge-publicado {background-color: #fff3e0; color: #25a5ff;} .badge-default {background-color: #eeeeee; color: #757575;}}.prestador-photo{width:100%;height:100%;object-fit:cover;border-radius:50%}.budget-card-footer button{width:100%;border-radius:8px;font-weight:600;transition:.2s}.status-badge i.notification-pulse{animation:pulse 2s infinite}:host-context(.has-notification) .status-badge i{animation:pulse 2s infinite}.service-card-header{display:none}@media (min-width: 768px){.service-card-header{display:block}}.service-card-header.force-show{display:block}\n"] }]
|
|
94
94
|
}], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { statusPedido: [{
|
|
95
95
|
type: Input
|
|
96
96
|
}], cardTemplateIndicator: [{
|
|
@@ -99,100 +99,124 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
99
99
|
type: Input
|
|
100
100
|
}] } });
|
|
101
101
|
|
|
102
|
-
class
|
|
103
|
-
constructor(
|
|
104
|
-
this.
|
|
105
|
-
this.
|
|
106
|
-
this.el = el;
|
|
107
|
-
this.changeNavColor = false;
|
|
108
|
-
this.openClose = false;
|
|
102
|
+
class CustomModalComponent {
|
|
103
|
+
constructor() {
|
|
104
|
+
this.modalId = 'customModal';
|
|
105
|
+
this.title = 'Aviso';
|
|
109
106
|
this.message = '';
|
|
110
|
-
this.
|
|
111
|
-
this.
|
|
112
|
-
this.
|
|
113
|
-
this.
|
|
114
|
-
this.
|
|
115
|
-
this.
|
|
116
|
-
this.
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
this.isHeaderVisible = true; // força aparecer no load
|
|
126
|
-
this.changeNavColor = !this.allowTransparency;
|
|
127
|
-
});
|
|
128
|
-
}
|
|
129
|
-
ngAfterViewInit() {
|
|
130
|
-
this.checkMobile();
|
|
131
|
-
// Obtém a altura do header-menu após a view ser inicializada
|
|
132
|
-
const headerMenu = this.el.nativeElement.querySelector('[header-menu]');
|
|
133
|
-
if (headerMenu) {
|
|
134
|
-
this.headerHeight = headerMenu.offsetHeight;
|
|
135
|
-
}
|
|
136
|
-
}
|
|
137
|
-
ngOnInit() {
|
|
138
|
-
this.hasOffer = this.router.url.includes('offer');
|
|
107
|
+
this.closeButtonText = 'Fechar';
|
|
108
|
+
this.actionButtonText = '';
|
|
109
|
+
this.paymentMethod = null;
|
|
110
|
+
this.errorDetails = null;
|
|
111
|
+
this.modalClosed = new EventEmitter();
|
|
112
|
+
this.modalAction = new EventEmitter();
|
|
113
|
+
this.showModal = false;
|
|
114
|
+
this.messageTitle = 'Pagamento Aprovado!';
|
|
115
|
+
this.showBtn = true;
|
|
116
|
+
this.priceNegotiated = 0;
|
|
117
|
+
this.messageBody = 'Seu pagamento foi processado com sucesso.';
|
|
118
|
+
// Configuração dinâmica
|
|
119
|
+
this.modalIcon = 'fa-check';
|
|
120
|
+
this.modalIconColor = 'text-green-600';
|
|
121
|
+
this.modalBgColor = 'bg-green-100';
|
|
139
122
|
}
|
|
140
|
-
|
|
141
|
-
|
|
123
|
+
ngOnInit() { }
|
|
124
|
+
openModal() {
|
|
125
|
+
this.showModal = true;
|
|
142
126
|
}
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
127
|
+
configureModal(type, message = '') {
|
|
128
|
+
switch (type) {
|
|
129
|
+
case 'success':
|
|
130
|
+
this.setSuccessStyles(message);
|
|
131
|
+
break;
|
|
132
|
+
case 'error':
|
|
133
|
+
this.setErrorStyles(message);
|
|
134
|
+
break;
|
|
135
|
+
case 'warning':
|
|
136
|
+
this.setWarningStyles(message);
|
|
137
|
+
break;
|
|
147
138
|
}
|
|
148
139
|
}
|
|
149
|
-
|
|
150
|
-
this.
|
|
140
|
+
setSuccessStyles(message) {
|
|
141
|
+
this.modalIcon = 'fa-check-circle';
|
|
142
|
+
this.modalIconColor = 'modal-icon-success'; // Nome da classe no CSS
|
|
143
|
+
this.modalBgColor = 'modal-bg-success'; // Nome da classe no CSS
|
|
144
|
+
this.messageTitle = 'Sucesso!';
|
|
145
|
+
this.messageBody = message || 'Operação realizada com sucesso.';
|
|
151
146
|
}
|
|
152
|
-
|
|
153
|
-
this.
|
|
147
|
+
setErrorStyles(message) {
|
|
148
|
+
this.modalIcon = 'fa-times-circle';
|
|
149
|
+
this.modalIconColor = 'modal-icon-error';
|
|
150
|
+
this.modalBgColor = 'modal-bg-error';
|
|
151
|
+
this.messageTitle = 'Ops! Algo deu errado';
|
|
152
|
+
this.messageBody = message || 'Não conseguimos processar sua solicitação.';
|
|
154
153
|
}
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
// SCROLL DOWN
|
|
167
|
-
this.isHeaderVisible = false;
|
|
154
|
+
setWarningStyles(message) {
|
|
155
|
+
this.modalIcon = 'fa-exclamation-circle';
|
|
156
|
+
this.modalIconColor = 'modal-icon-warning';
|
|
157
|
+
this.modalBgColor = 'modal-bg-warning';
|
|
158
|
+
this.messageTitle = 'Atenção';
|
|
159
|
+
this.messageBody = message || 'Verifique os dados antes de continuar.';
|
|
160
|
+
}
|
|
161
|
+
actionModal() {
|
|
162
|
+
if (this.isLoadingBtn !== undefined) {
|
|
163
|
+
this.isLoadingBtn = true;
|
|
164
|
+
this.modalAction.emit();
|
|
168
165
|
}
|
|
169
166
|
else {
|
|
170
|
-
|
|
171
|
-
this.
|
|
172
|
-
|
|
173
|
-
/* =========================
|
|
174
|
-
* COR
|
|
175
|
-
* ========================= */
|
|
176
|
-
if (!this.allowTransparency) {
|
|
177
|
-
this.changeNavColor = true;
|
|
167
|
+
this.modalAction.emit();
|
|
168
|
+
this.isLoadingBtn = false;
|
|
169
|
+
this.showModal = false;
|
|
178
170
|
}
|
|
179
|
-
|
|
180
|
-
|
|
171
|
+
}
|
|
172
|
+
closeModal() {
|
|
173
|
+
this.showModal = false;
|
|
174
|
+
this.modalClosed.emit();
|
|
175
|
+
}
|
|
176
|
+
// Controle externo
|
|
177
|
+
open(type, message = '', paymentMethod) {
|
|
178
|
+
this.configureModal(type, message);
|
|
179
|
+
if (paymentMethod) {
|
|
180
|
+
this.paymentMethod = paymentMethod;
|
|
181
181
|
}
|
|
182
|
-
this.
|
|
182
|
+
this.showModal = true;
|
|
183
183
|
}
|
|
184
184
|
}
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type:
|
|
185
|
+
CustomModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CustomModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
186
|
+
CustomModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CustomModalComponent, selector: "lib-custom-modal", inputs: { modalId: "modalId", title: "title", message: "message", closeButtonText: "closeButtonText", actionButtonText: "actionButtonText", paymentMethod: "paymentMethod", errorDetails: "errorDetails", showModal: "showModal", messageTitle: "messageTitle", showBtn: "showBtn", priceNegotiated: "priceNegotiated", messageBody: "messageBody", isLoadingBtn: "isLoadingBtn" }, outputs: { modalClosed: "modalClosed", modalAction: "modalAction" }, ngImport: i0, template: "<div\n *ngIf=\"showModal\"\n class=\"modal-overlay-fixed transition-all\"\n (click)=\"closeModal()\"\n>\n <div\n class=\"bg-white w-full max-w-2xl rounded-t-[2.5rem] p-6 shadow-2xl animate-slide-up border-t border-gray-100 flex flex-col\"\n (click)=\"$event.stopPropagation()\"\n >\n <div class=\"w-12 h-1.5 bg-gray-200 rounded-full mx-auto mb-6\"></div>\n\n <div class=\"flex flex-col items-center text-center\">\n <div class=\"relative mb-4\">\n <div\n [class]=\"modalBgColor\"\n class=\"w-20 h-20 rounded-full opacity-40\"\n ></div>\n <div class=\"absolute inset-0 flex items-center justify-center\">\n <i\n [class]=\"modalIcon + ' ' + modalIconColor\"\n class=\"fas text-3xl\"\n ></i>\n </div>\n </div>\n\n <h2 class=\"text-2xl font-bold text-gray-900 mb-2\">{{ messageTitle }}</h2>\n\n <div class=\"w-full modal-scroll-area px-2 custom-scrollbar\">\n <p *ngIf=\"messageBody\" class=\"text-gray-600 mb-4\">{{ messageBody }}</p>\n\n <div class=\"modal-dynamic-content text-left\">\n <ng-content select=\"[optional-content]\"></ng-content>\n </div>\n\n <div\n *ngIf=\"errorDetails\"\n class=\"mt-4 p-4 bg-red-50 rounded-2xl text-left border border-red-100\"\n >\n <p class=\"text-[10px] font-bold text-red-700 uppercase mb-1\">\n Log do sistema:\n </p>\n <pre class=\"text-[11px] text-red-600 font-mono whitespace-pre-wrap\">{{\n errorDetails | json\n }}</pre>\n </div>\n </div>\n\n <div class=\"mt-6 flex flex-col w-full gap-3 pb-4\">\n <button\n [disabled]=\"priceNegotiated <= 0 && actionButtonText === 'Negociar'\"\n *ngIf=\"actionButtonText\"\n (click)=\"actionModal()\"\n class=\"w-full py-4 text-white rounded-2xl font-bold active:scale-[0.98] transition-all flex items-center justify-center gap-3 shadow-lg btn-primary-custom\"\n [style.background-color]=\"'var(--primary)'\"\n >\n <span *ngIf=\"!isLoadingBtn\">{{ actionButtonText }}</span>\n <ng-container *ngIf=\"isLoadingBtn\">\n <span>Processando</span>\n <i class=\"fas fa-circle-notch fa-spin\"></i>\n </ng-container>\n </button>\n\n <button\n *ngIf=\"showBtn\"\n (click)=\"closeModal()\"\n class=\"w-full py-2 text-gray-500 font-semibold hover:text-gray-800 transition-colors\"\n >\n {{ closeButtonText }}\n </button>\n </div>\n </div>\n </div>\n</div>\n", styles: ["@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.animate-slide-up{animation:slideUp .4s cubic-bezier(.25,1,.5,1) forwards}.btn-primary-custom:hover:not(:disabled){filter:brightness(.9);transition:filter .2s ease}.btn-primary-custom:disabled{opacity:.6;cursor:not-allowed}.custom-scrollbar::-webkit-scrollbar{width:4px}.custom-scrollbar::-webkit-scrollbar-thumb{background:#f1f1f1;border-radius:10px}.custom-scrollbar::-webkit-scrollbar-track{background:transparent}@media (min-width: 768px){.animate-slide-up{margin-bottom:2rem;border-radius:2.5rem;width:90%}}.modal-scroll-area{max-height:60vh;overflow-y:auto;overflow-x:hidden;transition:max-height .4s cubic-bezier(.25,1,.5,1)}.modal-scroll-area:has(.animate-fade-in),.modal-scroll-area:focus-within{max-height:85vh}.modal-dynamic-content{height:auto;overflow:visible!important;display:block}.modal-overlay{position:fixed;inset:0;background-color:#0009;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:99999;transition:opacity .3s ease}:host-context(body:has(.modal-overlay)){overflow:hidden}.modal-overlay-fixed{position:fixed;inset:0;background-color:#0009!important;backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important;display:flex;align-items:flex-end;justify-content:center;z-index:9999}.modal-bg-success{background-color:#d1fae5!important}.modal-icon-success{color:#10b981!important}.modal-bg-error{background-color:#fee2e2!important}.modal-icon-error{color:#ef4444!important}.modal-bg-warning{background-color:#fef3c7!important}.modal-icon-warning{color:#f59e0b!important}.modal-overlay-fixed{position:fixed;inset:0;background-color:#0009;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:flex-end;justify-content:center;z-index:9999}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] });
|
|
187
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CustomModalComponent, decorators: [{
|
|
188
188
|
type: Component,
|
|
189
|
-
args: [{ selector: 'lib-
|
|
190
|
-
}],
|
|
191
|
-
type:
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
189
|
+
args: [{ selector: 'lib-custom-modal', standalone: false, template: "<div\n *ngIf=\"showModal\"\n class=\"modal-overlay-fixed transition-all\"\n (click)=\"closeModal()\"\n>\n <div\n class=\"bg-white w-full max-w-2xl rounded-t-[2.5rem] p-6 shadow-2xl animate-slide-up border-t border-gray-100 flex flex-col\"\n (click)=\"$event.stopPropagation()\"\n >\n <div class=\"w-12 h-1.5 bg-gray-200 rounded-full mx-auto mb-6\"></div>\n\n <div class=\"flex flex-col items-center text-center\">\n <div class=\"relative mb-4\">\n <div\n [class]=\"modalBgColor\"\n class=\"w-20 h-20 rounded-full opacity-40\"\n ></div>\n <div class=\"absolute inset-0 flex items-center justify-center\">\n <i\n [class]=\"modalIcon + ' ' + modalIconColor\"\n class=\"fas text-3xl\"\n ></i>\n </div>\n </div>\n\n <h2 class=\"text-2xl font-bold text-gray-900 mb-2\">{{ messageTitle }}</h2>\n\n <div class=\"w-full modal-scroll-area px-2 custom-scrollbar\">\n <p *ngIf=\"messageBody\" class=\"text-gray-600 mb-4\">{{ messageBody }}</p>\n\n <div class=\"modal-dynamic-content text-left\">\n <ng-content select=\"[optional-content]\"></ng-content>\n </div>\n\n <div\n *ngIf=\"errorDetails\"\n class=\"mt-4 p-4 bg-red-50 rounded-2xl text-left border border-red-100\"\n >\n <p class=\"text-[10px] font-bold text-red-700 uppercase mb-1\">\n Log do sistema:\n </p>\n <pre class=\"text-[11px] text-red-600 font-mono whitespace-pre-wrap\">{{\n errorDetails | json\n }}</pre>\n </div>\n </div>\n\n <div class=\"mt-6 flex flex-col w-full gap-3 pb-4\">\n <button\n [disabled]=\"priceNegotiated <= 0 && actionButtonText === 'Negociar'\"\n *ngIf=\"actionButtonText\"\n (click)=\"actionModal()\"\n class=\"w-full py-4 text-white rounded-2xl font-bold active:scale-[0.98] transition-all flex items-center justify-center gap-3 shadow-lg btn-primary-custom\"\n [style.background-color]=\"'var(--primary)'\"\n >\n <span *ngIf=\"!isLoadingBtn\">{{ actionButtonText }}</span>\n <ng-container *ngIf=\"isLoadingBtn\">\n <span>Processando</span>\n <i class=\"fas fa-circle-notch fa-spin\"></i>\n </ng-container>\n </button>\n\n <button\n *ngIf=\"showBtn\"\n (click)=\"closeModal()\"\n class=\"w-full py-2 text-gray-500 font-semibold hover:text-gray-800 transition-colors\"\n >\n {{ closeButtonText }}\n </button>\n </div>\n </div>\n </div>\n</div>\n", styles: ["@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.animate-slide-up{animation:slideUp .4s cubic-bezier(.25,1,.5,1) forwards}.btn-primary-custom:hover:not(:disabled){filter:brightness(.9);transition:filter .2s ease}.btn-primary-custom:disabled{opacity:.6;cursor:not-allowed}.custom-scrollbar::-webkit-scrollbar{width:4px}.custom-scrollbar::-webkit-scrollbar-thumb{background:#f1f1f1;border-radius:10px}.custom-scrollbar::-webkit-scrollbar-track{background:transparent}@media (min-width: 768px){.animate-slide-up{margin-bottom:2rem;border-radius:2.5rem;width:90%}}.modal-scroll-area{max-height:60vh;overflow-y:auto;overflow-x:hidden;transition:max-height .4s cubic-bezier(.25,1,.5,1)}.modal-scroll-area:has(.animate-fade-in),.modal-scroll-area:focus-within{max-height:85vh}.modal-dynamic-content{height:auto;overflow:visible!important;display:block}.modal-overlay{position:fixed;inset:0;background-color:#0009;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:99999;transition:opacity .3s ease}:host-context(body:has(.modal-overlay)){overflow:hidden}.modal-overlay-fixed{position:fixed;inset:0;background-color:#0009!important;backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important;display:flex;align-items:flex-end;justify-content:center;z-index:9999}.modal-bg-success{background-color:#d1fae5!important}.modal-icon-success{color:#10b981!important}.modal-bg-error{background-color:#fee2e2!important}.modal-icon-error{color:#ef4444!important}.modal-bg-warning{background-color:#fef3c7!important}.modal-icon-warning{color:#f59e0b!important}.modal-overlay-fixed{position:fixed;inset:0;background-color:#0009;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:flex-end;justify-content:center;z-index:9999}\n"] }]
|
|
190
|
+
}], propDecorators: { modalId: [{
|
|
191
|
+
type: Input
|
|
192
|
+
}], title: [{
|
|
193
|
+
type: Input
|
|
194
|
+
}], message: [{
|
|
195
|
+
type: Input
|
|
196
|
+
}], closeButtonText: [{
|
|
197
|
+
type: Input
|
|
198
|
+
}], actionButtonText: [{
|
|
199
|
+
type: Input
|
|
200
|
+
}], paymentMethod: [{
|
|
201
|
+
type: Input
|
|
202
|
+
}], errorDetails: [{
|
|
203
|
+
type: Input
|
|
204
|
+
}], modalClosed: [{
|
|
205
|
+
type: Output
|
|
206
|
+
}], modalAction: [{
|
|
207
|
+
type: Output
|
|
208
|
+
}], showModal: [{
|
|
209
|
+
type: Input
|
|
210
|
+
}], messageTitle: [{
|
|
211
|
+
type: Input
|
|
212
|
+
}], showBtn: [{
|
|
213
|
+
type: Input
|
|
214
|
+
}], priceNegotiated: [{
|
|
215
|
+
type: Input
|
|
216
|
+
}], messageBody: [{
|
|
217
|
+
type: Input
|
|
218
|
+
}], isLoadingBtn: [{
|
|
219
|
+
type: Input
|
|
196
220
|
}] } });
|
|
197
221
|
|
|
198
222
|
class FallbackMessageComponent {
|
|
@@ -298,7 +322,7 @@ class FallbackMessageComponent {
|
|
|
298
322
|
}
|
|
299
323
|
}
|
|
300
324
|
FallbackMessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FallbackMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
301
|
-
FallbackMessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FallbackMessageComponent, selector: "lib-fallback-message", inputs: { card: "card", statusPedido: "statusPedido", customTitle: "customTitle", customDescription: "customDescription", primaryActionText: "primaryActionText", secondaryActionText: "secondaryActionText", hideBtn: "hideBtn" }, outputs: { primaryAction: "primaryAction", secondaryAction: "secondaryAction" }, ngImport: i0, template: "<div *ngIf=\"shouldShowEmptyState()\" class=\"empty-state-container\">\n <div\n class=\"empty-state-card max-w-md mx-auto bg-white shadow-xl rounded-3xl p-8 border border-gray-100\"\n >\n <!-- \u00CDcone din\u00E2mico -->\n <div class=\"empty-state-icon mb-6 flex justify-center\">\n <div class=\"relative w-32 h-32 flex items-center justify-center\">\n <div [class]=\"emptyStateConfig.iconColor\" class=\"z-10\">\n <div class=\"text-xl leading-none\" style=\"font-size: 4rem\">\n {{ emptyStateConfig.icon }}\n </div>\n </div>\n\n <div class=\"absolute inset-0 flex items-center justify-center\">\n <div\n [class]=\"emptyStateConfig.bgColor\"\n class=\"w-full h-full rounded-full opacity-50 flex-shrink-0\"\n ></div>\n </div>\n </div>\n </div>\n\n <!-- Conte\u00FAdo da mensagem -->\n <div class=\"empty-state-content text-center space-y-4\">\n <!-- T\u00EDtulo -->\n <h3 class=\"text-2xl font-bold text-gray-900 mb-2\">\n {{ emptyStateConfig.title }}\n </h3>\n\n <!-- Descri\u00E7\u00E3o -->\n <p class=\"text-gray-600 text-lg leading-relaxed px-4\">\n {{ emptyStateConfig.description }}\n </p>\n\n <!-- Informa\u00E7\u00F5es adicionais baseadas no status -->\n <div *ngIf=\"statusPedido === 'finalizado'\" class=\"mt-4\">\n <div\n class=\"inline-flex items-center gap-2 bg-green-50 text-green-700 px-4 py-2 rounded-full\"\n >\n <i class=\"fas fa-check-circle\"></i>\n <span class=\"font-medium\">Servi\u00E7o avaliado e finalizado</span>\n </div>\n </div>\n\n <div *ngIf=\"statusPedido === 'cancelado'\" class=\"mt-4\">\n <div\n class=\"inline-flex items-center gap-2 bg-red-50 text-red-700 px-4 py-2 rounded-full\"\n >\n <i class=\"fas fa-exclamation-circle\"></i>\n <span class=\"font-medium\">Cancelado pelo prestador do servi\u00E7o</span>\n </div>\n </div>\n </div>\n\n <!-- A\u00E7\u00F5es -->\n <div class=\"mt-8 flex flex-col sm:flex-row gap-4 justify-center\">\n <!-- A\u00E7\u00E3o Prim\u00E1ria -->\n <button\n *ngIf=\"hideBtn\"\n (click)=\"onPrimaryAction()\"\n [ngClass]=\"{\n 'bg-green-600 hover:bg-green-700': statusPedido === 'finalizado',\n 'bg-red-600 hover:bg-red-700': statusPedido === 'cancelado',\n 'bg-blue-600 ':\n statusPedido === 'indispon\u00EDvel' || statusPedido === 'indisponivel',\n 'bg-primary-600 hover:bg-primary-700': card.length === 0\n }\"\n class=\"col-12 btn btn-primary\"\n >\n {{ emptyStateConfig.primaryActionText }}\n </button>\n\n <!-- A\u00E7\u00E3o Secund\u00E1ria -->\n <button\n *ngIf=\"emptyStateConfig.secondaryActionText\"\n (click)=\"onSecondaryAction()\"\n class=\"col-12 btn btn-outline-primary\"\n >\n {{ emptyStateConfig.secondaryActionText }}\n </button>\n </div>\n\n <!-- Link de ajuda (opcional) -->\n <div *ngIf=\"statusPedido === 'cancelado'\" class=\"mt-6 text-center\">\n <a\n href=\"#\"\n class=\"text-sm text-blue-600 hover:text-blue-800 hover:underline\"\n >\n <i class=\"fas fa-question-circle mr-2\"></i>\n Precisa de ajuda? Entre em contato com o suporte\n </a>\n </div>\n </div>\n</div>\n", styles: [".empty-state-card{animation:fadeInUp .5s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.empty-state-icon{animation:bounceIn .6s ease-out}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.05)}70%{transform:scale(.9)}to{transform:scale(1)}}\n"], dependencies: [{ kind: "directive", type:
|
|
325
|
+
FallbackMessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FallbackMessageComponent, selector: "lib-fallback-message", inputs: { card: "card", statusPedido: "statusPedido", customTitle: "customTitle", customDescription: "customDescription", primaryActionText: "primaryActionText", secondaryActionText: "secondaryActionText", hideBtn: "hideBtn" }, outputs: { primaryAction: "primaryAction", secondaryAction: "secondaryAction" }, ngImport: i0, template: "<div *ngIf=\"shouldShowEmptyState()\" class=\"empty-state-container\">\n <div\n class=\"empty-state-card max-w-md mx-auto bg-white shadow-xl rounded-3xl p-8 border border-gray-100\"\n >\n <!-- \u00CDcone din\u00E2mico -->\n <div class=\"empty-state-icon mb-6 flex justify-center\">\n <div class=\"relative w-32 h-32 flex items-center justify-center\">\n <div [class]=\"emptyStateConfig.iconColor\" class=\"z-10\">\n <div class=\"text-xl leading-none\" style=\"font-size: 4rem\">\n {{ emptyStateConfig.icon }}\n </div>\n </div>\n\n <div class=\"absolute inset-0 flex items-center justify-center\">\n <div\n [class]=\"emptyStateConfig.bgColor\"\n class=\"w-full h-full rounded-full opacity-50 flex-shrink-0\"\n ></div>\n </div>\n </div>\n </div>\n\n <!-- Conte\u00FAdo da mensagem -->\n <div class=\"empty-state-content text-center space-y-4\">\n <!-- T\u00EDtulo -->\n <h3 class=\"text-2xl font-bold text-gray-900 mb-2\">\n {{ emptyStateConfig.title }}\n </h3>\n\n <!-- Descri\u00E7\u00E3o -->\n <p class=\"text-gray-600 text-lg leading-relaxed px-4\">\n {{ emptyStateConfig.description }}\n </p>\n\n <!-- Informa\u00E7\u00F5es adicionais baseadas no status -->\n <div *ngIf=\"statusPedido === 'finalizado'\" class=\"mt-4\">\n <div\n class=\"inline-flex items-center gap-2 bg-green-50 text-green-700 px-4 py-2 rounded-full\"\n >\n <i class=\"fas fa-check-circle\"></i>\n <span class=\"font-medium\">Servi\u00E7o avaliado e finalizado</span>\n </div>\n </div>\n\n <div *ngIf=\"statusPedido === 'cancelado'\" class=\"mt-4\">\n <div\n class=\"inline-flex items-center gap-2 bg-red-50 text-red-700 px-4 py-2 rounded-full\"\n >\n <i class=\"fas fa-exclamation-circle\"></i>\n <span class=\"font-medium\">Cancelado pelo prestador do servi\u00E7o</span>\n </div>\n </div>\n </div>\n\n <!-- A\u00E7\u00F5es -->\n <div class=\"mt-8 flex flex-col sm:flex-row gap-4 justify-center\">\n <!-- A\u00E7\u00E3o Prim\u00E1ria -->\n <button\n *ngIf=\"hideBtn\"\n (click)=\"onPrimaryAction()\"\n [ngClass]=\"{\n 'bg-green-600 hover:bg-green-700': statusPedido === 'finalizado',\n 'bg-red-600 hover:bg-red-700': statusPedido === 'cancelado',\n 'bg-blue-600 ':\n statusPedido === 'indispon\u00EDvel' || statusPedido === 'indisponivel',\n 'bg-primary-600 hover:bg-primary-700': card.length === 0\n }\"\n class=\"col-12 btn btn-primary\"\n >\n {{ emptyStateConfig.primaryActionText }}\n </button>\n\n <!-- A\u00E7\u00E3o Secund\u00E1ria -->\n <button\n *ngIf=\"emptyStateConfig.secondaryActionText\"\n (click)=\"onSecondaryAction()\"\n class=\"col-12 btn btn-outline-primary\"\n >\n {{ emptyStateConfig.secondaryActionText }}\n </button>\n </div>\n\n <!-- Link de ajuda (opcional) -->\n <div *ngIf=\"statusPedido === 'cancelado'\" class=\"mt-6 text-center\">\n <a\n href=\"#\"\n class=\"text-sm text-blue-600 hover:text-blue-800 hover:underline\"\n >\n <i class=\"fas fa-question-circle mr-2\"></i>\n Precisa de ajuda? Entre em contato com o suporte\n </a>\n </div>\n </div>\n</div>\n", styles: [".empty-state-card{animation:fadeInUp .5s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.empty-state-icon{animation:bounceIn .6s ease-out}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.05)}70%{transform:scale(.9)}to{transform:scale(1)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
302
326
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FallbackMessageComponent, decorators: [{
|
|
303
327
|
type: Component,
|
|
304
328
|
args: [{ selector: 'lib-fallback-message', template: "<div *ngIf=\"shouldShowEmptyState()\" class=\"empty-state-container\">\n <div\n class=\"empty-state-card max-w-md mx-auto bg-white shadow-xl rounded-3xl p-8 border border-gray-100\"\n >\n <!-- \u00CDcone din\u00E2mico -->\n <div class=\"empty-state-icon mb-6 flex justify-center\">\n <div class=\"relative w-32 h-32 flex items-center justify-center\">\n <div [class]=\"emptyStateConfig.iconColor\" class=\"z-10\">\n <div class=\"text-xl leading-none\" style=\"font-size: 4rem\">\n {{ emptyStateConfig.icon }}\n </div>\n </div>\n\n <div class=\"absolute inset-0 flex items-center justify-center\">\n <div\n [class]=\"emptyStateConfig.bgColor\"\n class=\"w-full h-full rounded-full opacity-50 flex-shrink-0\"\n ></div>\n </div>\n </div>\n </div>\n\n <!-- Conte\u00FAdo da mensagem -->\n <div class=\"empty-state-content text-center space-y-4\">\n <!-- T\u00EDtulo -->\n <h3 class=\"text-2xl font-bold text-gray-900 mb-2\">\n {{ emptyStateConfig.title }}\n </h3>\n\n <!-- Descri\u00E7\u00E3o -->\n <p class=\"text-gray-600 text-lg leading-relaxed px-4\">\n {{ emptyStateConfig.description }}\n </p>\n\n <!-- Informa\u00E7\u00F5es adicionais baseadas no status -->\n <div *ngIf=\"statusPedido === 'finalizado'\" class=\"mt-4\">\n <div\n class=\"inline-flex items-center gap-2 bg-green-50 text-green-700 px-4 py-2 rounded-full\"\n >\n <i class=\"fas fa-check-circle\"></i>\n <span class=\"font-medium\">Servi\u00E7o avaliado e finalizado</span>\n </div>\n </div>\n\n <div *ngIf=\"statusPedido === 'cancelado'\" class=\"mt-4\">\n <div\n class=\"inline-flex items-center gap-2 bg-red-50 text-red-700 px-4 py-2 rounded-full\"\n >\n <i class=\"fas fa-exclamation-circle\"></i>\n <span class=\"font-medium\">Cancelado pelo prestador do servi\u00E7o</span>\n </div>\n </div>\n </div>\n\n <!-- A\u00E7\u00F5es -->\n <div class=\"mt-8 flex flex-col sm:flex-row gap-4 justify-center\">\n <!-- A\u00E7\u00E3o Prim\u00E1ria -->\n <button\n *ngIf=\"hideBtn\"\n (click)=\"onPrimaryAction()\"\n [ngClass]=\"{\n 'bg-green-600 hover:bg-green-700': statusPedido === 'finalizado',\n 'bg-red-600 hover:bg-red-700': statusPedido === 'cancelado',\n 'bg-blue-600 ':\n statusPedido === 'indispon\u00EDvel' || statusPedido === 'indisponivel',\n 'bg-primary-600 hover:bg-primary-700': card.length === 0\n }\"\n class=\"col-12 btn btn-primary\"\n >\n {{ emptyStateConfig.primaryActionText }}\n </button>\n\n <!-- A\u00E7\u00E3o Secund\u00E1ria -->\n <button\n *ngIf=\"emptyStateConfig.secondaryActionText\"\n (click)=\"onSecondaryAction()\"\n class=\"col-12 btn btn-outline-primary\"\n >\n {{ emptyStateConfig.secondaryActionText }}\n </button>\n </div>\n\n <!-- Link de ajuda (opcional) -->\n <div *ngIf=\"statusPedido === 'cancelado'\" class=\"mt-6 text-center\">\n <a\n href=\"#\"\n class=\"text-sm text-blue-600 hover:text-blue-800 hover:underline\"\n >\n <i class=\"fas fa-question-circle mr-2\"></i>\n Precisa de ajuda? Entre em contato com o suporte\n </a>\n </div>\n </div>\n</div>\n", styles: [".empty-state-card{animation:fadeInUp .5s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.empty-state-icon{animation:bounceIn .6s ease-out}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.05)}70%{transform:scale(.9)}to{transform:scale(1)}}\n"] }]
|
|
@@ -322,17 +346,133 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
322
346
|
type: Output
|
|
323
347
|
}] } });
|
|
324
348
|
|
|
349
|
+
class NavComponent {
|
|
350
|
+
constructor(router, activatedRoute, el) {
|
|
351
|
+
this.router = router;
|
|
352
|
+
this.activatedRoute = activatedRoute;
|
|
353
|
+
this.el = el;
|
|
354
|
+
this.changeNavColor = false;
|
|
355
|
+
this.openClose = false;
|
|
356
|
+
this.message = '';
|
|
357
|
+
this.lastScrollPosition = 0;
|
|
358
|
+
this.isHeaderVisible = true;
|
|
359
|
+
this.headerHeight = 0;
|
|
360
|
+
this.isMobile = false;
|
|
361
|
+
this.hasOffer = false;
|
|
362
|
+
this.allowTransparency = false;
|
|
363
|
+
this.router.events
|
|
364
|
+
.pipe(filter((event) => event instanceof NavigationEnd), map(() => this.activatedRoute), map((route) => {
|
|
365
|
+
while (route.firstChild)
|
|
366
|
+
route = route.firstChild;
|
|
367
|
+
return route;
|
|
368
|
+
}), mergeMap((route) => route.data))
|
|
369
|
+
.subscribe((data) => {
|
|
370
|
+
this.allowTransparency = !!data['transparentNav'];
|
|
371
|
+
this.lastScrollPosition = 0;
|
|
372
|
+
this.isHeaderVisible = true; // força aparecer no load
|
|
373
|
+
this.changeNavColor = !this.allowTransparency;
|
|
374
|
+
});
|
|
375
|
+
}
|
|
376
|
+
ngAfterViewInit() {
|
|
377
|
+
this.checkMobile();
|
|
378
|
+
// Obtém a altura do header-menu após a view ser inicializada
|
|
379
|
+
const headerMenu = this.el.nativeElement.querySelector('[header-menu]');
|
|
380
|
+
if (headerMenu) {
|
|
381
|
+
this.headerHeight = headerMenu.offsetHeight;
|
|
382
|
+
}
|
|
383
|
+
}
|
|
384
|
+
ngOnInit() {
|
|
385
|
+
this.hasOffer = this.router.url.includes('offer');
|
|
386
|
+
}
|
|
387
|
+
onResize() {
|
|
388
|
+
this.checkMobile();
|
|
389
|
+
}
|
|
390
|
+
checkMobile() {
|
|
391
|
+
this.isMobile = window.innerWidth < 768; // 768px é o breakpoint padrão do Tailwind para md
|
|
392
|
+
if (!this.isMobile) {
|
|
393
|
+
this.isHeaderVisible = true; // Garante que fique visível em desktop
|
|
394
|
+
}
|
|
395
|
+
}
|
|
396
|
+
menu() {
|
|
397
|
+
this.openClose = !this.openClose;
|
|
398
|
+
}
|
|
399
|
+
receiveMessage(event) {
|
|
400
|
+
this.message = event;
|
|
401
|
+
}
|
|
402
|
+
onWindowScroll() {
|
|
403
|
+
const scroll = window.pageYOffset || document.documentElement.scrollTop;
|
|
404
|
+
const isScrollingDown = scroll > this.lastScrollPosition;
|
|
405
|
+
/* =========================
|
|
406
|
+
* VISIBILIDADE
|
|
407
|
+
* ========================= */
|
|
408
|
+
if (scroll <= 10) {
|
|
409
|
+
// TOPO
|
|
410
|
+
this.isHeaderVisible = !isScrollingDown;
|
|
411
|
+
}
|
|
412
|
+
else if (isScrollingDown && scroll > 50) {
|
|
413
|
+
// SCROLL DOWN
|
|
414
|
+
this.isHeaderVisible = false;
|
|
415
|
+
}
|
|
416
|
+
else {
|
|
417
|
+
// SCROLL UP
|
|
418
|
+
this.isHeaderVisible = true;
|
|
419
|
+
}
|
|
420
|
+
/* =========================
|
|
421
|
+
* COR
|
|
422
|
+
* ========================= */
|
|
423
|
+
if (!this.allowTransparency) {
|
|
424
|
+
this.changeNavColor = true;
|
|
425
|
+
}
|
|
426
|
+
else {
|
|
427
|
+
this.changeNavColor = scroll > 20;
|
|
428
|
+
}
|
|
429
|
+
this.lastScrollPosition = scroll;
|
|
430
|
+
}
|
|
431
|
+
}
|
|
432
|
+
NavComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NavComponent, deps: [{ token: i1.Router }, { token: i1.ActivatedRoute }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
433
|
+
NavComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NavComponent, selector: "lib-nav", host: { listeners: { "window:resize": "onResize()", "window:scroll": "onWindowScroll()" } }, ngImport: i0, template: "<!-- Overlay -->\n<div\n *ngIf=\"openClose\"\n (click)=\"openClose = false\"\n class=\"fixed inset-0 bg-black bg-opacity-40 z-40 md:hidden\"\n></div>\n\n<div\n class=\"fixed top-0 left-0 right-0 z-50 shadow-none transition-all duration-500 w-full\"\n [class.-translate-y-full]=\"!isHeaderVisible\"\n [style.background-color]=\"changeNavColor ? 'var(--primary)' : 'transparent'\"\n>\n <div class=\"w-full\">\n <div class=\"mx-auto px-2 h-16 flex items-center justify-between\">\n <!-- Left Content -->\n <div class=\"flex-1 flex justify-start\">\n <ng-content select=\"[left-content]\"></ng-content>\n </div>\n\n <!-- Center Content -->\n <div class=\"flex-1 flex justify-center\">\n <ng-content select=\"[central-content]\"></ng-content>\n </div>\n\n <!-- Right Content -->\n <div class=\"flex-1\" style=\"display: flex; justify-content: flex-end\">\n <ng-content select=\"[right-content]\"></ng-content>\n </div>\n </div>\n </div>\n\n <!-- Header Menu (Submenu) -->\n <div header-menu class=\"w-full\">\n <ng-content select=\"[header-menu]\"></ng-content>\n </div>\n</div>\n", styles: [".navbar-ajust{background-color:var(--medium);padding:1em}.container-fluid{display:flex;justify-content:space-between;align-items:center}.navbar-left,.navbar-right{flex:1;display:flex;justify-content:flex-start}.navbar-right{justify-content:flex-end}.navbar-center{flex:2;display:flex;justify-content:center}:host{display:block}.-translate-y-full{transform:translateY(calc(-100% - 1px))}.nav-transparent{background-color:var(--premium)!important}.nav-scrolled{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}@media (max-width: 767px){.-translate-y-full{transform:translateY(calc(-100% - 1px))}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
434
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NavComponent, decorators: [{
|
|
435
|
+
type: Component,
|
|
436
|
+
args: [{ selector: 'lib-nav', template: "<!-- Overlay -->\n<div\n *ngIf=\"openClose\"\n (click)=\"openClose = false\"\n class=\"fixed inset-0 bg-black bg-opacity-40 z-40 md:hidden\"\n></div>\n\n<div\n class=\"fixed top-0 left-0 right-0 z-50 shadow-none transition-all duration-500 w-full\"\n [class.-translate-y-full]=\"!isHeaderVisible\"\n [style.background-color]=\"changeNavColor ? 'var(--primary)' : 'transparent'\"\n>\n <div class=\"w-full\">\n <div class=\"mx-auto px-2 h-16 flex items-center justify-between\">\n <!-- Left Content -->\n <div class=\"flex-1 flex justify-start\">\n <ng-content select=\"[left-content]\"></ng-content>\n </div>\n\n <!-- Center Content -->\n <div class=\"flex-1 flex justify-center\">\n <ng-content select=\"[central-content]\"></ng-content>\n </div>\n\n <!-- Right Content -->\n <div class=\"flex-1\" style=\"display: flex; justify-content: flex-end\">\n <ng-content select=\"[right-content]\"></ng-content>\n </div>\n </div>\n </div>\n\n <!-- Header Menu (Submenu) -->\n <div header-menu class=\"w-full\">\n <ng-content select=\"[header-menu]\"></ng-content>\n </div>\n</div>\n", styles: [".navbar-ajust{background-color:var(--medium);padding:1em}.container-fluid{display:flex;justify-content:space-between;align-items:center}.navbar-left,.navbar-right{flex:1;display:flex;justify-content:flex-start}.navbar-right{justify-content:flex-end}.navbar-center{flex:2;display:flex;justify-content:center}:host{display:block}.-translate-y-full{transform:translateY(calc(-100% - 1px))}.nav-transparent{background-color:var(--premium)!important}.nav-scrolled{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}@media (max-width: 767px){.-translate-y-full{transform:translateY(calc(-100% - 1px))}}\n"] }]
|
|
437
|
+
}], ctorParameters: function () { return [{ type: i1.Router }, { type: i1.ActivatedRoute }, { type: i0.ElementRef }]; }, propDecorators: { onResize: [{
|
|
438
|
+
type: HostListener,
|
|
439
|
+
args: ['window:resize']
|
|
440
|
+
}], onWindowScroll: [{
|
|
441
|
+
type: HostListener,
|
|
442
|
+
args: ['window:scroll', []]
|
|
443
|
+
}] } });
|
|
444
|
+
|
|
325
445
|
class TuduComponentsModule {
|
|
326
446
|
}
|
|
327
447
|
TuduComponentsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TuduComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
328
|
-
TuduComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: TuduComponentsModule, declarations: [TuduComponentsComponent,
|
|
448
|
+
TuduComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: TuduComponentsModule, declarations: [TuduComponentsComponent,
|
|
449
|
+
CardLayoutComponent,
|
|
450
|
+
NavComponent,
|
|
451
|
+
FallbackMessageComponent,
|
|
452
|
+
CustomModalComponent], imports: [CommonModule], exports: [TuduComponentsComponent,
|
|
453
|
+
CardLayoutComponent,
|
|
454
|
+
NavComponent,
|
|
455
|
+
FallbackMessageComponent,
|
|
456
|
+
CustomModalComponent] });
|
|
329
457
|
TuduComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TuduComponentsModule, imports: [CommonModule] });
|
|
330
458
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TuduComponentsModule, decorators: [{
|
|
331
459
|
type: NgModule,
|
|
332
460
|
args: [{
|
|
333
|
-
declarations: [
|
|
461
|
+
declarations: [
|
|
462
|
+
TuduComponentsComponent,
|
|
463
|
+
CardLayoutComponent,
|
|
464
|
+
NavComponent,
|
|
465
|
+
FallbackMessageComponent,
|
|
466
|
+
CustomModalComponent,
|
|
467
|
+
],
|
|
334
468
|
imports: [CommonModule],
|
|
335
|
-
exports: [
|
|
469
|
+
exports: [
|
|
470
|
+
TuduComponentsComponent,
|
|
471
|
+
CardLayoutComponent,
|
|
472
|
+
NavComponent,
|
|
473
|
+
FallbackMessageComponent,
|
|
474
|
+
CustomModalComponent,
|
|
475
|
+
],
|
|
336
476
|
}]
|
|
337
477
|
}] });
|
|
338
478
|
|
|
@@ -357,5 +497,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
357
497
|
* Generated bundle index. Do not edit.
|
|
358
498
|
*/
|
|
359
499
|
|
|
360
|
-
export { CardLayoutComponent, FallbackMessageComponent, NavComponent, TuduComponentsComponent, TuduComponentsModule, TuduComponentsService };
|
|
500
|
+
export { CardLayoutComponent, CustomModalComponent, FallbackMessageComponent, NavComponent, TuduComponentsComponent, TuduComponentsModule, TuduComponentsService };
|
|
361
501
|
//# sourceMappingURL=tudu-components.mjs.map
|