tudu-components 0.2.6 → 0.2.8

package/{src/public-api.ts → public-api.d.ts}

@@ -1,11 +1,6 @@
-/*
- * Public API Surface of tudu-components
- */
-export * from './lib/tudu-components.component';
-export * from './lib/tudu-components.module'; // ← Se criou este módulo
-
-export * from './lib/components/card-layout/card-layout.component';
-export * from './lib/components/nav/nav.component';
-export * from './lib/components/fallback-message/fallback-message.component';
-export * from './lib/tudu-components.service';
-// export * from './lib/card-layout.module'; // ← Ou se usou CardLayoutModule
+export * from './lib/tudu-components.component';
+export * from './lib/tudu-components.module';
+export * from './lib/components/card-layout/card-layout.component';
+export * from './lib/components/nav/nav.component';
+export * from './lib/components/fallback-message/fallback-message.component';
+export * from './lib/tudu-components.service';

package/karma.conf.js

@@ -1,44 +0,0 @@
-// 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

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

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

@@ -1,166 +0,0 @@
-.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

@@ -1,100 +0,0 @@
-<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

@@ -1,23 +0,0 @@
-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

@@ -1,78 +0,0 @@
-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

@@ -1,36 +0,0 @@
-.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

@@ -1,95 +0,0 @@
-<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

@@ -1,23 +0,0 @@
-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();
-  });
-});