tudu-components 0.2.11 → 0.2.12

package/fesm2015/tudu-components.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { Component, Input, HostListener, EventEmitter, Output, NgModule, Injectable } from '@angular/core';
-import * as i2 from '@angular/common';
+import { Component, Input, EventEmitter, Output, HostListener, NgModule, Injectable } from '@angular/core';
+import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1 from '@angular/router';
 import { NavigationEnd } from '@angular/router';
@@ -88,7 +88,7 @@ class CardLayoutComponent {
     }
 }
 CardLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CardLayoutComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
-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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CardLayoutComponent, decorators: [{
             type: Component,
             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"] }]
@@ -100,100 +100,124 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }] } });
 
-class NavComponent {
-    constructor(router, activatedRoute, el) {
-        this.router = router;
-        this.activatedRoute = activatedRoute;
-        this.el = el;
-        this.changeNavColor = false;
-        this.openClose = false;
+class CustomModalComponent {
+    constructor() {
+        this.modalId = 'customModal';
+        this.title = 'Aviso';
         this.message = '';
-        this.lastScrollPosition = 0;
-        this.isHeaderVisible = true;
-        this.headerHeight = 0;
-        this.isMobile = false;
-        this.hasOffer = false;
-        this.allowTransparency = false;
-        this.router.events
-            .pipe(filter((event) => event instanceof NavigationEnd), map(() => this.activatedRoute), map((route) => {
-            while (route.firstChild)
-                route = route.firstChild;
-            return route;
-        }), mergeMap((route) => route.data))
-            .subscribe((data) => {
-            this.allowTransparency = !!data['transparentNav'];
-            this.lastScrollPosition = 0;
-            this.isHeaderVisible = true; // força aparecer no load
-            this.changeNavColor = !this.allowTransparency;
-        });
-    }
-    ngAfterViewInit() {
-        this.checkMobile();
-        // Obtém a altura do header-menu após a view ser inicializada
-        const headerMenu = this.el.nativeElement.querySelector('[header-menu]');
-        if (headerMenu) {
-            this.headerHeight = headerMenu.offsetHeight;
-        }
-    }
-    ngOnInit() {
-        this.hasOffer = this.router.url.includes('offer');
+        this.closeButtonText = 'Fechar';
+        this.actionButtonText = '';
+        this.paymentMethod = null;
+        this.errorDetails = null;
+        this.modalClosed = new EventEmitter();
+        this.modalAction = new EventEmitter();
+        this.showModal = false;
+        this.messageTitle = 'Pagamento Aprovado!';
+        this.showBtn = true;
+        this.priceNegotiated = 0;
+        this.messageBody = 'Seu pagamento foi processado com sucesso.';
+        // Configuração dinâmica
+        this.modalIcon = 'fa-check';
+        this.modalIconColor = 'text-green-600';
+        this.modalBgColor = 'bg-green-100';
     }
-    onResize() {
-        this.checkMobile();
+    ngOnInit() { }
+    openModal() {
+        this.showModal = true;
     }
-    checkMobile() {
-        this.isMobile = window.innerWidth < 768; // 768px é o breakpoint padrão do Tailwind para md
-        if (!this.isMobile) {
-            this.isHeaderVisible = true; // Garante que fique visível em desktop
+    configureModal(type, message = '') {
+        switch (type) {
+            case 'success':
+                this.setSuccessStyles(message);
+                break;
+            case 'error':
+                this.setErrorStyles(message);
+                break;
+            case 'warning':
+                this.setWarningStyles(message);
+                break;
         }
     }
-    menu() {
-        this.openClose = !this.openClose;
+    setSuccessStyles(message) {
+        this.modalIcon = 'fa-check-circle';
+        this.modalIconColor = 'modal-icon-success'; // Nome da classe no CSS
+        this.modalBgColor = 'modal-bg-success'; // Nome da classe no CSS
+        this.messageTitle = 'Sucesso!';
+        this.messageBody = message || 'Operação realizada com sucesso.';
     }
-    receiveMessage(event) {
-        this.message = event;
+    setErrorStyles(message) {
+        this.modalIcon = 'fa-times-circle';
+        this.modalIconColor = 'modal-icon-error';
+        this.modalBgColor = 'modal-bg-error';
+        this.messageTitle = 'Ops! Algo deu errado';
+        this.messageBody = message || 'Não conseguimos processar sua solicitação.';
     }
-    onWindowScroll() {
-        const scroll = window.pageYOffset || document.documentElement.scrollTop;
-        const isScrollingDown = scroll > this.lastScrollPosition;
-        /* =========================
-         * VISIBILIDADE
-         * ========================= */
-        if (scroll <= 10) {
-            // TOPO
-            this.isHeaderVisible = !isScrollingDown;
-        }
-        else if (isScrollingDown && scroll > 50) {
-            // SCROLL DOWN
-            this.isHeaderVisible = false;
+    setWarningStyles(message) {
+        this.modalIcon = 'fa-exclamation-circle';
+        this.modalIconColor = 'modal-icon-warning';
+        this.modalBgColor = 'modal-bg-warning';
+        this.messageTitle = 'Atenção';
+        this.messageBody = message || 'Verifique os dados antes de continuar.';
+    }
+    actionModal() {
+        if (this.isLoadingBtn !== undefined) {
+            this.isLoadingBtn = true;
+            this.modalAction.emit();
         }
         else {
-            // SCROLL UP
-            this.isHeaderVisible = true;
-        }
-        /* =========================
-         * COR
-         * ========================= */
-        if (!this.allowTransparency) {
-            this.changeNavColor = true;
+            this.modalAction.emit();
+            this.isLoadingBtn = false;
+            this.showModal = false;
         }
-        else {
-            this.changeNavColor = scroll > 20;
+    }
+    closeModal() {
+        this.showModal = false;
+        this.modalClosed.emit();
+    }
+    // Controle externo
+    open(type, message = '', paymentMethod) {
+        this.configureModal(type, message);
+        if (paymentMethod) {
+            this.paymentMethod = paymentMethod;
         }
-        this.lastScrollPosition = scroll;
+        this.showModal = true;
     }
 }
-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 });
-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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NavComponent, decorators: [{
+CustomModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CustomModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+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" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CustomModalComponent, decorators: [{
             type: Component,
-            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"] }]
-        }], ctorParameters: function () { return [{ type: i1.Router }, { type: i1.ActivatedRoute }, { type: i0.ElementRef }]; }, propDecorators: { onResize: [{
-                type: HostListener,
-                args: ['window:resize']
-            }], onWindowScroll: [{
-                type: HostListener,
-                args: ['window:scroll', []]
+            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"] }]
+        }], propDecorators: { modalId: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], message: [{
+                type: Input
+            }], closeButtonText: [{
+                type: Input
+            }], actionButtonText: [{
+                type: Input
+            }], paymentMethod: [{
+                type: Input
+            }], errorDetails: [{
+                type: Input
+            }], modalClosed: [{
+                type: Output
+            }], modalAction: [{
+                type: Output
+            }], showModal: [{
+                type: Input
+            }], messageTitle: [{
+                type: Input
+            }], showBtn: [{
+                type: Input
+            }], priceNegotiated: [{
+                type: Input
+            }], messageBody: [{
+                type: Input
+            }], isLoadingBtn: [{
+                type: Input
             }] } });
 
 class FallbackMessageComponent {
@@ -300,7 +324,7 @@ class FallbackMessageComponent {
     }
 }
 FallbackMessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FallbackMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FallbackMessageComponent, decorators: [{
             type: Component,
             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
                 type: Output
             }] } });
 
+class NavComponent {
+    constructor(router, activatedRoute, el) {
+        this.router = router;
+        this.activatedRoute = activatedRoute;
+        this.el = el;
+        this.changeNavColor = false;
+        this.openClose = false;
+        this.message = '';
+        this.lastScrollPosition = 0;
+        this.isHeaderVisible = true;
+        this.headerHeight = 0;
+        this.isMobile = false;
+        this.hasOffer = false;
+        this.allowTransparency = false;
+        this.router.events
+            .pipe(filter((event) => event instanceof NavigationEnd), map(() => this.activatedRoute), map((route) => {
+            while (route.firstChild)
+                route = route.firstChild;
+            return route;
+        }), mergeMap((route) => route.data))
+            .subscribe((data) => {
+            this.allowTransparency = !!data['transparentNav'];
+            this.lastScrollPosition = 0;
+            this.isHeaderVisible = true; // força aparecer no load
+            this.changeNavColor = !this.allowTransparency;
+        });
+    }
+    ngAfterViewInit() {
+        this.checkMobile();
+        // Obtém a altura do header-menu após a view ser inicializada
+        const headerMenu = this.el.nativeElement.querySelector('[header-menu]');
+        if (headerMenu) {
+            this.headerHeight = headerMenu.offsetHeight;
+        }
+    }
+    ngOnInit() {
+        this.hasOffer = this.router.url.includes('offer');
+    }
+    onResize() {
+        this.checkMobile();
+    }
+    checkMobile() {
+        this.isMobile = window.innerWidth < 768; // 768px é o breakpoint padrão do Tailwind para md
+        if (!this.isMobile) {
+            this.isHeaderVisible = true; // Garante que fique visível em desktop
+        }
+    }
+    menu() {
+        this.openClose = !this.openClose;
+    }
+    receiveMessage(event) {
+        this.message = event;
+    }
+    onWindowScroll() {
+        const scroll = window.pageYOffset || document.documentElement.scrollTop;
+        const isScrollingDown = scroll > this.lastScrollPosition;
+        /* =========================
+         * VISIBILIDADE
+         * ========================= */
+        if (scroll <= 10) {
+            // TOPO
+            this.isHeaderVisible = !isScrollingDown;
+        }
+        else if (isScrollingDown && scroll > 50) {
+            // SCROLL DOWN
+            this.isHeaderVisible = false;
+        }
+        else {
+            // SCROLL UP
+            this.isHeaderVisible = true;
+        }
+        /* =========================
+         * COR
+         * ========================= */
+        if (!this.allowTransparency) {
+            this.changeNavColor = true;
+        }
+        else {
+            this.changeNavColor = scroll > 20;
+        }
+        this.lastScrollPosition = scroll;
+    }
+}
+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 });
+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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NavComponent, decorators: [{
+            type: Component,
+            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"] }]
+        }], ctorParameters: function () { return [{ type: i1.Router }, { type: i1.ActivatedRoute }, { type: i0.ElementRef }]; }, propDecorators: { onResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }], onWindowScroll: [{
+                type: HostListener,
+                args: ['window:scroll', []]
+            }] } });
+
 class TuduComponentsModule {
 }
 TuduComponentsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TuduComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TuduComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: TuduComponentsModule, declarations: [TuduComponentsComponent, CardLayoutComponent, NavComponent, FallbackMessageComponent], imports: [CommonModule], exports: [TuduComponentsComponent, CardLayoutComponent, NavComponent, FallbackMessageComponent] });
+TuduComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: TuduComponentsModule, declarations: [TuduComponentsComponent,
+        CardLayoutComponent,
+        NavComponent,
+        FallbackMessageComponent,
+        CustomModalComponent], imports: [CommonModule], exports: [TuduComponentsComponent,
+        CardLayoutComponent,
+        NavComponent,
+        FallbackMessageComponent,
+        CustomModalComponent] });
 TuduComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TuduComponentsModule, imports: [CommonModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TuduComponentsModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [TuduComponentsComponent, CardLayoutComponent, NavComponent, FallbackMessageComponent],
+                    declarations: [
+                        TuduComponentsComponent,
+                        CardLayoutComponent,
+                        NavComponent,
+                        FallbackMessageComponent,
+                        CustomModalComponent,
+                    ],
                     imports: [CommonModule],
-                    exports: [TuduComponentsComponent, CardLayoutComponent, NavComponent, FallbackMessageComponent],
+                    exports: [
+                        TuduComponentsComponent,
+                        CardLayoutComponent,
+                        NavComponent,
+                        FallbackMessageComponent,
+                        CustomModalComponent,
+                    ],
                 }]
         }] });
 
@@ -359,5 +499,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CardLayoutComponent, FallbackMessageComponent, NavComponent, TuduComponentsComponent, TuduComponentsModule, TuduComponentsService };
+export { CardLayoutComponent, CustomModalComponent, FallbackMessageComponent, NavComponent, TuduComponentsComponent, TuduComponentsModule, TuduComponentsService };
 //# sourceMappingURL=tudu-components.mjs.map