tudu-components 0.2.1 → 0.2.2

package/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage/tudu-components'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/tudu-components",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tudu-components",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "peerDependencies": {
     "@angular/common": "^17.3.0",
     "@angular/core": "^17.3.0"
@@ -8,24 +8,5 @@
   "dependencies": {
     "tslib": "^2.3.0"
   },
-  "sideEffects": false,
-  "module": "fesm2015/tudu-components.mjs",
-  "es2020": "fesm2020/tudu-components.mjs",
-  "esm2020": "esm2020/tudu-components.mjs",
-  "fesm2020": "fesm2020/tudu-components.mjs",
-  "fesm2015": "fesm2015/tudu-components.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2020": "./esm2020/tudu-components.mjs",
-      "es2020": "./fesm2020/tudu-components.mjs",
-      "es2015": "./fesm2015/tudu-components.mjs",
-      "node": "./fesm2015/tudu-components.mjs",
-      "default": "./fesm2020/tudu-components.mjs"
-    }
-  }
-}
+  "sideEffects": false
+}

package/src/lib/components/card-layout/card-layout.component.css

@@ -0,0 +1,166 @@
+.service-card {
+  background: var(--light, #fff);
+  border-radius: 1rem;
+  transition: all 0.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;
+  }
+
+  /* Estilos específicos para cada template */
+  &[data-template="1"] {
+    /* Estilos específicos do template 1 */
+  }
+
+  &[data-template="2"] {
+    /* Estilos específicos do 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 0.3s ease;
+
+    /* Faz o ícone herdar a cor da badge */
+    i {
+      color: inherit !important;
+    }
+  }
+
+  .filter-tag {
+    background: var(--tag-bg, #f9fafb);
+    border: 1px solid var(--primary);
+    border-radius: 9999px;
+    padding: 0.25rem 0.75rem;
+    color: var(--primary);
+    font-size: 12px;
+  }
+  /* .details-btn {
+    font-size: 17px;
+    font-weight: 600;
+    transition: background-color 0.8s ease-in-out;
+    background: var(--primary);
+    color: white;
+    padding: 8px 15px;
+    border: none;
+    border-radius: 10px;
+    cursor: pointer;
+  }
+  .details-btn:hover {
+    background: var(--primary-dark);
+  } */
+
+  .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 {
+    font-weight: 600;
+
+    font-size: 1.1rem;
+  }
+
+  .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: 0.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; /* Escondido por padrão */
+}
+
+@media (min-width: 768px) {
+  .service-card-header {
+    display: block; /* Mostra apenas em telas grandes */
+  }
+}
+
+.service-card-header.force-show {
+  display: block; /* Força mostrar mesmo em mobile */
+}

package/src/lib/components/card-layout/card-layout.component.html

@@ -0,0 +1,100 @@
+<div
+  class="service-card rounded-xl shadow-md overflow-hidden bg-white hover:shadow-lg transition-all duration-300 relative mb-5"
+>
+  <!-- HEADER -->
+  <div
+    [class.force-show]="!hideHeader"
+    class="service-card-header flex items-center justify-between p-3 border-b border-gray-200"
+  >
+    <div class="flex items-center gap-3">
+      <div class="icon-style">
+        <ng-content select="[service-icon]"></ng-content>
+      </div>
+      <div class="flex flex-col">
+        <div class="flex items-center gap-3">
+          <div class="service-title truncate w-full">
+            <ng-content select="[service-title]"></ng-content>
+          </div>
+          <div class="">
+            <ng-content select="[details-btn]"></ng-content>
+          </div>
+        </div>
+        <div
+          class="whitespace-nowrap overflow-hidden text-ellipsis"
+          style="font-size: 12px; color: var(--tab-link)"
+        >
+          <ng-content select="[service-address]"></ng-content>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- BODY -->
+  <div class="service-card-body p-4 space-y-3">
+    <div>
+      <div
+        class="flex flex-col items-start gap-3 border-b border-gray-100 pb-3 mb-3"
+        *ngIf="cardTemplateIndicator === 1"
+      >
+        <div class="flex justify-between w-full pb-2">
+          <div class="status-badge" [ngStyle]="badgeStyles">
+            <ng-content select="[status-badge]"></ng-content>
+          </div>
+
+          <div
+            class="text-xs text-gray-50 font-semibold"
+            style="
+              background-color: #d3d3d32c;
+              color: grey;
+              border-radius: 25px;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              padding: 4px 10px;
+            "
+          >
+            <ng-content select="[order-number]"></ng-content>
+          </div>
+        </div>
+
+        <div class="flex flex-wrap gap-2 items-center">
+          <ng-content select="[filter-tag]"></ng-content>
+        </div>
+      </div>
+
+      <div class="fw-semibold" *ngIf="statusPedido === 'finalizado'">
+        <ng-content select="[conclusion-date]"></ng-content>
+      </div>
+    </div>
+    <ng-content select="[info-row]"></ng-content>
+
+    <ng-content select="[description]"></ng-content>
+  </div>
+
+  <!-- FOOTER -->
+
+  <div
+    class="service-card-footer flex justify-center items-center p-3 border-t border-gray-100 bg-gray-50 gap-1"
+  >
+    <div class="col-6">
+      <ng-content select="[main-btn]"></ng-content>
+    </div>
+    <div
+      class="fw-semibold col-6"
+      style="display: flex; justify-content: flex-end"
+    >
+      <ng-content select="[price]"></ng-content>
+    </div>
+  </div>
+  <!-- <div
+    
+    class="flex row justify-between items-center p-3 border-t border-gray-100 bg-gray-50"
+  >
+    <div class="col-6">
+      <ng-content select="[main-btn]"></ng-content>
+    </div>
+    <div class="col-6">
+      <ng-content select="[price]"></ng-content>
+    </div>
+  </div> -->
+</div>

package/src/lib/components/card-layout/card-layout.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CardLayoutComponent } from './card-layout.component';
+
+describe('CardLayoutComponent', () => {
+  let component: CardLayoutComponent;
+  let fixture: ComponentFixture<CardLayoutComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CardLayoutComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CardLayoutComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/card-layout/card-layout.component.ts

@@ -0,0 +1,78 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'lib-card-layout',
+  templateUrl: './card-layout.component.html',
+  styleUrls: ['./card-layout.component.css'],
+})
+export class CardLayoutComponent implements OnInit {
+  @Input() statusPedido: string = '';
+  @Input() cardTemplateIndicator: number = 0; // 1 para serviço, 2 para candidatura
+  @Input() hideHeader: boolean = false; // 1 para serviço, 2 para candidatura
+
+  tags: string[] = ['Residencial', 'Urgente', 'Elétrica'];
+
+  statusOptions = [
+    { class: 'status-active', text: 'Ativo', icon: 'fa-circle' },
+    { class: 'status-pending', text: 'Em andamento', icon: 'fa-spinner' },
+    { class: 'status-completed', text: 'Concluído', icon: 'fa-check' },
+    { class: 'status-cancelled', text: 'Cancelado', icon: 'fa-times' },
+  ];
+
+  currentStatus = this.statusOptions[0];
+  private statusInterval: any;
+  flowIndicator: string = '1';
+
+  constructor(private route: Router) {
+    this.route.events.subscribe(() => {
+      if (this.route.url.includes('budgets')) {
+        this.flowIndicator = 'budgets';
+        console.log('asdasdadsasda', this.flowIndicator);
+      }
+    });
+  }
+
+  ngOnInit() {
+    let index = 0;
+    this.statusInterval = setInterval(() => {
+      index = (index + 1) % this.statusOptions.length;
+      this.currentStatus = this.statusOptions[index];
+    }, 3000);
+
+    console.log('cardTemplateIndicator', this.cardTemplateIndicator);
+  }
+
+  get badgeStyles(): { [key: string]: string } {
+    const status = this.statusPedido?.toLowerCase();
+
+    switch (status) {
+      case 'finalizado':
+        return { backgroundColor: '#4caf5020', color: '#4caf50' }; // verde suave
+      case 'concluido':
+        return { backgroundColor: '#0096881c', color: '#009688' }; // teal
+      case 'cancelado':
+        return { backgroundColor: '#ff52521c', color: '#ff5252' }; // vermelho claro
+      case 'publicado':
+        return { backgroundColor: '#0096ff1c', color: '#25a5ff' }; // azul suave
+      case 'recusado':
+        return { backgroundColor: '#ff52521c', color: '#ff5252' }; // vermelho claro
+      case 'em negociacao':
+        return { backgroundColor: '#ffab251f', color: '#ff9800' }; // laranja suave
+      case 'pendente':
+        return { backgroundColor: '#9a1fad1c', color: '#7e57c2' }; // roxo claro
+      default:
+        return { backgroundColor: '#e0e0e01c', color: '#757575' }; // cinza padrão
+    }
+  }
+
+  ngOnDestroy() {
+    if (this.statusInterval) {
+      clearInterval(this.statusInterval);
+    }
+  }
+
+  verDetalhes() {
+    alert('Abrir detalhes do serviço...');
+  }
+}

package/src/lib/components/fallback-message/fallback-message.component.css

@@ -0,0 +1,36 @@
+.empty-state-card {
+  animation: fadeInUp 0.5s ease-out;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Animação para o ícone */
+.empty-state-icon {
+  animation: bounceIn 0.6s ease-out;
+}
+
+@keyframes bounceIn {
+  0% {
+    opacity: 0;
+    transform: scale(0.3);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.05);
+  }
+  70% {
+    transform: scale(0.9);
+  }
+  100% {
+    transform: scale(1);
+  }
+}

package/src/lib/components/fallback-message/fallback-message.component.html

@@ -0,0 +1,95 @@
+<div *ngIf="shouldShowEmptyState()" class="empty-state-container">
+  <div
+    class="empty-state-card max-w-md mx-auto bg-white shadow-xl rounded-3xl p-8 border border-gray-100"
+  >
+    <!-- Ícone dinâmico -->
+    <div class="empty-state-icon mb-6 flex justify-center">
+      <div class="relative">
+        <!-- Ícone principal -->
+        <div [class]="emptyStateConfig.iconColor">
+          <div class="text-6xl">
+            {{ emptyStateConfig.icon }}
+          </div>
+        </div>
+
+        <!-- Background decorativo -->
+        <div class="absolute -z-10 inset-0 flex items-center justify-center">
+          <div
+            [class]="emptyStateConfig.bgColor"
+            class="w-32 h-32 rounded-full opacity-50"
+          ></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Conteúdo da mensagem -->
+    <div class="empty-state-content text-center space-y-4">
+      <!-- Título -->
+      <h3 class="text-2xl font-bold text-gray-900 mb-2">
+        {{ emptyStateConfig.title }}
+      </h3>
+
+      <!-- Descrição -->
+      <p class="text-gray-600 text-lg leading-relaxed px-4">
+        {{ emptyStateConfig.description }}
+      </p>
+
+      <!-- Informações adicionais baseadas no status -->
+      <div *ngIf="statusPedido === 'finalizado'" class="mt-4">
+        <div
+          class="inline-flex items-center gap-2 bg-green-50 text-green-700 px-4 py-2 rounded-full"
+        >
+          <i class="fas fa-check-circle"></i>
+          <span class="font-medium">Serviço avaliado e finalizado</span>
+        </div>
+      </div>
+
+      <div *ngIf="statusPedido === 'cancelado'" class="mt-4">
+        <div
+          class="inline-flex items-center gap-2 bg-red-50 text-red-700 px-4 py-2 rounded-full"
+        >
+          <i class="fas fa-exclamation-circle"></i>
+          <span class="font-medium">Cancelado pelo prestador do serviço</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Ações -->
+    <div class="mt-8 flex flex-col sm:flex-row gap-4 justify-center">
+      <!-- Ação Primária -->
+      <button
+        (click)="onPrimaryAction()"
+        [ngClass]="{
+          'bg-green-600 hover:bg-green-700': statusPedido === 'finalizado',
+          'bg-red-600 hover:bg-red-700': statusPedido === 'cancelado',
+          'bg-blue-600 ':
+            statusPedido === 'indisponível' || statusPedido === 'indisponivel',
+          'bg-primary-600 hover:bg-primary-700': card.length === 0
+        }"
+        class="col-12 btn btn-primary"
+      >
+        {{ emptyStateConfig.primaryActionText }}
+      </button>
+
+      <!-- Ação Secundária -->
+      <button
+        *ngIf="emptyStateConfig.secondaryActionText"
+        (click)="onSecondaryAction()"
+        class="col-12 btn btn-outline-primary"
+      >
+        {{ emptyStateConfig.secondaryActionText }}
+      </button>
+    </div>
+
+    <!-- Link de ajuda (opcional) -->
+    <div *ngIf="statusPedido === 'cancelado'" class="mt-6 text-center">
+      <a
+        href="#"
+        class="text-sm text-blue-600 hover:text-blue-800 hover:underline"
+      >
+        <i class="fas fa-question-circle mr-2"></i>
+        Precisa de ajuda? Entre em contato com o suporte
+      </a>
+    </div>
+  </div>
+</div>

package/src/lib/components/fallback-message/fallback-message.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FallbackMessageComponent } from './fallback-message.component';
+
+describe('FallbackMessageComponent', () => {
+  let component: FallbackMessageComponent;
+  let fixture: ComponentFixture<FallbackMessageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FallbackMessageComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FallbackMessageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});