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';
|
|
@@ -88,10 +88,10 @@ class CardLayoutComponent {
|
|
|
88
88
|
}
|
|
89
89
|
}
|
|
90
90
|
CardLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CardLayoutComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
91
|
-
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
|
|
91
|
+
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"] }] });
|
|
92
92
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CardLayoutComponent, decorators: [{
|
|
93
93
|
type: Component,
|
|
94
|
-
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
|
|
94
|
+
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"] }]
|
|
95
95
|
}], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { statusPedido: [{
|
|
96
96
|
type: Input
|
|
97
97
|
}], cardTemplateIndicator: [{
|
|
@@ -100,100 +100,124 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
100
100
|
type: Input
|
|
101
101
|
}] } });
|
|
102
102
|
|
|
103
|
-
class
|
|
104
|
-
constructor(
|
|
105
|
-
this.
|
|
106
|
-
this.
|
|
107
|
-
this.el = el;
|
|
108
|
-
this.changeNavColor = false;
|
|
109
|
-
this.openClose = false;
|
|
103
|
+
class CustomModalComponent {
|
|
104
|
+
constructor() {
|
|
105
|
+
this.modalId = 'customModal';
|
|
106
|
+
this.title = 'Aviso';
|
|
110
107
|
this.message = '';
|
|
111
|
-
this.
|
|
112
|
-
this.
|
|
113
|
-
this.
|
|
114
|
-
this.
|
|
115
|
-
this.
|
|
116
|
-
this.
|
|
117
|
-
this.
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
this.isHeaderVisible = true; // força aparecer no load
|
|
127
|
-
this.changeNavColor = !this.allowTransparency;
|
|
128
|
-
});
|
|
129
|
-
}
|
|
130
|
-
ngAfterViewInit() {
|
|
131
|
-
this.checkMobile();
|
|
132
|
-
// Obtém a altura do header-menu após a view ser inicializada
|
|
133
|
-
const headerMenu = this.el.nativeElement.querySelector('[header-menu]');
|
|
134
|
-
if (headerMenu) {
|
|
135
|
-
this.headerHeight = headerMenu.offsetHeight;
|
|
136
|
-
}
|
|
137
|
-
}
|
|
138
|
-
ngOnInit() {
|
|
139
|
-
this.hasOffer = this.router.url.includes('offer');
|
|
108
|
+
this.closeButtonText = 'Fechar';
|
|
109
|
+
this.actionButtonText = '';
|
|
110
|
+
this.paymentMethod = null;
|
|
111
|
+
this.errorDetails = null;
|
|
112
|
+
this.modalClosed = new EventEmitter();
|
|
113
|
+
this.modalAction = new EventEmitter();
|
|
114
|
+
this.showModal = false;
|
|
115
|
+
this.messageTitle = 'Pagamento Aprovado!';
|
|
116
|
+
this.showBtn = true;
|
|
117
|
+
this.priceNegotiated = 0;
|
|
118
|
+
this.messageBody = 'Seu pagamento foi processado com sucesso.';
|
|
119
|
+
// Configuração dinâmica
|
|
120
|
+
this.modalIcon = 'fa-check';
|
|
121
|
+
this.modalIconColor = 'text-green-600';
|
|
122
|
+
this.modalBgColor = 'bg-green-100';
|
|
140
123
|
}
|
|
141
|
-
|
|
142
|
-
|
|
124
|
+
ngOnInit() { }
|
|
125
|
+
openModal() {
|
|
126
|
+
this.showModal = true;
|
|
143
127
|
}
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
128
|
+
configureModal(type, message = '') {
|
|
129
|
+
switch (type) {
|
|
130
|
+
case 'success':
|
|
131
|
+
this.setSuccessStyles(message);
|
|
132
|
+
break;
|
|
133
|
+
case 'error':
|
|
134
|
+
this.setErrorStyles(message);
|
|
135
|
+
break;
|
|
136
|
+
case 'warning':
|
|
137
|
+
this.setWarningStyles(message);
|
|
138
|
+
break;
|
|
148
139
|
}
|
|
149
140
|
}
|
|
150
|
-
|
|
151
|
-
this.
|
|
141
|
+
setSuccessStyles(message) {
|
|
142
|
+
this.modalIcon = 'fa-check-circle';
|
|
143
|
+
this.modalIconColor = 'modal-icon-success'; // Nome da classe no CSS
|
|
144
|
+
this.modalBgColor = 'modal-bg-success'; // Nome da classe no CSS
|
|
145
|
+
this.messageTitle = 'Sucesso!';
|
|
146
|
+
this.messageBody = message || 'Operação realizada com sucesso.';
|
|
152
147
|
}
|
|
153
|
-
|
|
154
|
-
this.
|
|
148
|
+
setErrorStyles(message) {
|
|
149
|
+
this.modalIcon = 'fa-times-circle';
|
|
150
|
+
this.modalIconColor = 'modal-icon-error';
|
|
151
|
+
this.modalBgColor = 'modal-bg-error';
|
|
152
|
+
this.messageTitle = 'Ops! Algo deu errado';
|
|
153
|
+
this.messageBody = message || 'Não conseguimos processar sua solicitação.';
|
|
155
154
|
}
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
// SCROLL DOWN
|
|
168
|
-
this.isHeaderVisible = false;
|
|
155
|
+
setWarningStyles(message) {
|
|
156
|
+
this.modalIcon = 'fa-exclamation-circle';
|
|
157
|
+
this.modalIconColor = 'modal-icon-warning';
|
|
158
|
+
this.modalBgColor = 'modal-bg-warning';
|
|
159
|
+
this.messageTitle = 'Atenção';
|
|
160
|
+
this.messageBody = message || 'Verifique os dados antes de continuar.';
|
|
161
|
+
}
|
|
162
|
+
actionModal() {
|
|
163
|
+
if (this.isLoadingBtn !== undefined) {
|
|
164
|
+
this.isLoadingBtn = true;
|
|
165
|
+
this.modalAction.emit();
|
|
169
166
|
}
|
|
170
167
|
else {
|
|
171
|
-
|
|
172
|
-
this.
|
|
173
|
-
|
|
174
|
-
/* =========================
|
|
175
|
-
* COR
|
|
176
|
-
* ========================= */
|
|
177
|
-
if (!this.allowTransparency) {
|
|
178
|
-
this.changeNavColor = true;
|
|
168
|
+
this.modalAction.emit();
|
|
169
|
+
this.isLoadingBtn = false;
|
|
170
|
+
this.showModal = false;
|
|
179
171
|
}
|
|
180
|
-
|
|
181
|
-
|
|
172
|
+
}
|
|
173
|
+
closeModal() {
|
|
174
|
+
this.showModal = false;
|
|
175
|
+
this.modalClosed.emit();
|
|
176
|
+
}
|
|
177
|
+
// Controle externo
|
|
178
|
+
open(type, message = '', paymentMethod) {
|
|
179
|
+
this.configureModal(type, message);
|
|
180
|
+
if (paymentMethod) {
|
|
181
|
+
this.paymentMethod = paymentMethod;
|
|
182
182
|
}
|
|
183
|
-
this.
|
|
183
|
+
this.showModal = true;
|
|
184
184
|
}
|
|
185
185
|
}
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type:
|
|
186
|
+
CustomModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CustomModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
187
|
+
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" }] });
|
|
188
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CustomModalComponent, decorators: [{
|
|
189
189
|
type: Component,
|
|
190
|
-
args: [{ selector: 'lib-
|
|
191
|
-
}],
|
|
192
|
-
type:
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
190
|
+
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"] }]
|
|
191
|
+
}], propDecorators: { modalId: [{
|
|
192
|
+
type: Input
|
|
193
|
+
}], title: [{
|
|
194
|
+
type: Input
|
|
195
|
+
}], message: [{
|
|
196
|
+
type: Input
|
|
197
|
+
}], closeButtonText: [{
|
|
198
|
+
type: Input
|
|
199
|
+
}], actionButtonText: [{
|
|
200
|
+
type: Input
|
|
201
|
+
}], paymentMethod: [{
|
|
202
|
+
type: Input
|
|
203
|
+
}], errorDetails: [{
|
|
204
|
+
type: Input
|
|
205
|
+
}], modalClosed: [{
|
|
206
|
+
type: Output
|
|
207
|
+
}], modalAction: [{
|
|
208
|
+
type: Output
|
|
209
|
+
}], showModal: [{
|
|
210
|
+
type: Input
|
|
211
|
+
}], messageTitle: [{
|
|
212
|
+
type: Input
|
|
213
|
+
}], showBtn: [{
|
|
214
|
+
type: Input
|
|
215
|
+
}], priceNegotiated: [{
|
|
216
|
+
type: Input
|
|
217
|
+
}], messageBody: [{
|
|
218
|
+
type: Input
|
|
219
|
+
}], isLoadingBtn: [{
|
|
220
|
+
type: Input
|
|
197
221
|
}] } });
|
|
198
222
|
|
|
199
223
|
class FallbackMessageComponent {
|
|
@@ -300,7 +324,7 @@ class FallbackMessageComponent {
|
|
|
300
324
|
}
|
|
301
325
|
}
|
|
302
326
|
FallbackMessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FallbackMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
303
|
-
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:
|
|
327
|
+
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"] }] });
|
|
304
328
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FallbackMessageComponent, decorators: [{
|
|
305
329
|
type: Component,
|
|
306
330
|
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"] }]
|
|
@@ -324,17 +348,133 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
324
348
|
type: Output
|
|
325
349
|
}] } });
|
|
326
350
|
|
|
351
|
+
class NavComponent {
|
|
352
|
+
constructor(router, activatedRoute, el) {
|
|
353
|
+
this.router = router;
|
|
354
|
+
this.activatedRoute = activatedRoute;
|
|
355
|
+
this.el = el;
|
|
356
|
+
this.changeNavColor = false;
|
|
357
|
+
this.openClose = false;
|
|
358
|
+
this.message = '';
|
|
359
|
+
this.lastScrollPosition = 0;
|
|
360
|
+
this.isHeaderVisible = true;
|
|
361
|
+
this.headerHeight = 0;
|
|
362
|
+
this.isMobile = false;
|
|
363
|
+
this.hasOffer = false;
|
|
364
|
+
this.allowTransparency = false;
|
|
365
|
+
this.router.events
|
|
366
|
+
.pipe(filter((event) => event instanceof NavigationEnd), map(() => this.activatedRoute), map((route) => {
|
|
367
|
+
while (route.firstChild)
|
|
368
|
+
route = route.firstChild;
|
|
369
|
+
return route;
|
|
370
|
+
}), mergeMap((route) => route.data))
|
|
371
|
+
.subscribe((data) => {
|
|
372
|
+
this.allowTransparency = !!data['transparentNav'];
|
|
373
|
+
this.lastScrollPosition = 0;
|
|
374
|
+
this.isHeaderVisible = true; // força aparecer no load
|
|
375
|
+
this.changeNavColor = !this.allowTransparency;
|
|
376
|
+
});
|
|
377
|
+
}
|
|
378
|
+
ngAfterViewInit() {
|
|
379
|
+
this.checkMobile();
|
|
380
|
+
// Obtém a altura do header-menu após a view ser inicializada
|
|
381
|
+
const headerMenu = this.el.nativeElement.querySelector('[header-menu]');
|
|
382
|
+
if (headerMenu) {
|
|
383
|
+
this.headerHeight = headerMenu.offsetHeight;
|
|
384
|
+
}
|
|
385
|
+
}
|
|
386
|
+
ngOnInit() {
|
|
387
|
+
this.hasOffer = this.router.url.includes('offer');
|
|
388
|
+
}
|
|
389
|
+
onResize() {
|
|
390
|
+
this.checkMobile();
|
|
391
|
+
}
|
|
392
|
+
checkMobile() {
|
|
393
|
+
this.isMobile = window.innerWidth < 768; // 768px é o breakpoint padrão do Tailwind para md
|
|
394
|
+
if (!this.isMobile) {
|
|
395
|
+
this.isHeaderVisible = true; // Garante que fique visível em desktop
|
|
396
|
+
}
|
|
397
|
+
}
|
|
398
|
+
menu() {
|
|
399
|
+
this.openClose = !this.openClose;
|
|
400
|
+
}
|
|
401
|
+
receiveMessage(event) {
|
|
402
|
+
this.message = event;
|
|
403
|
+
}
|
|
404
|
+
onWindowScroll() {
|
|
405
|
+
const scroll = window.pageYOffset || document.documentElement.scrollTop;
|
|
406
|
+
const isScrollingDown = scroll > this.lastScrollPosition;
|
|
407
|
+
/* =========================
|
|
408
|
+
* VISIBILIDADE
|
|
409
|
+
* ========================= */
|
|
410
|
+
if (scroll <= 10) {
|
|
411
|
+
// TOPO
|
|
412
|
+
this.isHeaderVisible = !isScrollingDown;
|
|
413
|
+
}
|
|
414
|
+
else if (isScrollingDown && scroll > 50) {
|
|
415
|
+
// SCROLL DOWN
|
|
416
|
+
this.isHeaderVisible = false;
|
|
417
|
+
}
|
|
418
|
+
else {
|
|
419
|
+
// SCROLL UP
|
|
420
|
+
this.isHeaderVisible = true;
|
|
421
|
+
}
|
|
422
|
+
/* =========================
|
|
423
|
+
* COR
|
|
424
|
+
* ========================= */
|
|
425
|
+
if (!this.allowTransparency) {
|
|
426
|
+
this.changeNavColor = true;
|
|
427
|
+
}
|
|
428
|
+
else {
|
|
429
|
+
this.changeNavColor = scroll > 20;
|
|
430
|
+
}
|
|
431
|
+
this.lastScrollPosition = scroll;
|
|
432
|
+
}
|
|
433
|
+
}
|
|
434
|
+
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 });
|
|
435
|
+
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"] }] });
|
|
436
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NavComponent, decorators: [{
|
|
437
|
+
type: Component,
|
|
438
|
+
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"] }]
|
|
439
|
+
}], ctorParameters: function () { return [{ type: i1.Router }, { type: i1.ActivatedRoute }, { type: i0.ElementRef }]; }, propDecorators: { onResize: [{
|
|
440
|
+
type: HostListener,
|
|
441
|
+
args: ['window:resize']
|
|
442
|
+
}], onWindowScroll: [{
|
|
443
|
+
type: HostListener,
|
|
444
|
+
args: ['window:scroll', []]
|
|
445
|
+
}] } });
|
|
446
|
+
|
|
327
447
|
class TuduComponentsModule {
|
|
328
448
|
}
|
|
329
449
|
TuduComponentsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TuduComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
330
|
-
TuduComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: TuduComponentsModule, declarations: [TuduComponentsComponent,
|
|
450
|
+
TuduComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: TuduComponentsModule, declarations: [TuduComponentsComponent,
|
|
451
|
+
CardLayoutComponent,
|
|
452
|
+
NavComponent,
|
|
453
|
+
FallbackMessageComponent,
|
|
454
|
+
CustomModalComponent], imports: [CommonModule], exports: [TuduComponentsComponent,
|
|
455
|
+
CardLayoutComponent,
|
|
456
|
+
NavComponent,
|
|
457
|
+
FallbackMessageComponent,
|
|
458
|
+
CustomModalComponent] });
|
|
331
459
|
TuduComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TuduComponentsModule, imports: [CommonModule] });
|
|
332
460
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TuduComponentsModule, decorators: [{
|
|
333
461
|
type: NgModule,
|
|
334
462
|
args: [{
|
|
335
|
-
declarations: [
|
|
463
|
+
declarations: [
|
|
464
|
+
TuduComponentsComponent,
|
|
465
|
+
CardLayoutComponent,
|
|
466
|
+
NavComponent,
|
|
467
|
+
FallbackMessageComponent,
|
|
468
|
+
CustomModalComponent,
|
|
469
|
+
],
|
|
336
470
|
imports: [CommonModule],
|
|
337
|
-
exports: [
|
|
471
|
+
exports: [
|
|
472
|
+
TuduComponentsComponent,
|
|
473
|
+
CardLayoutComponent,
|
|
474
|
+
NavComponent,
|
|
475
|
+
FallbackMessageComponent,
|
|
476
|
+
CustomModalComponent,
|
|
477
|
+
],
|
|
338
478
|
}]
|
|
339
479
|
}] });
|
|
340
480
|
|
|
@@ -359,5 +499,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
359
499
|
* Generated bundle index. Do not edit.
|
|
360
500
|
*/
|
|
361
501
|
|
|
362
|
-
export { CardLayoutComponent, FallbackMessageComponent, NavComponent, TuduComponentsComponent, TuduComponentsModule, TuduComponentsService };
|
|
502
|
+
export { CardLayoutComponent, CustomModalComponent, FallbackMessageComponent, NavComponent, TuduComponentsComponent, TuduComponentsModule, TuduComponentsService };
|
|
363
503
|
//# sourceMappingURL=tudu-components.mjs.map
|