@dropi/ui-components 1.0.0

package/src/components-source/storybook-doc-components/dropi-modal/dropi-modal.component.html

@@ -0,0 +1,132 @@
+<div class="container">
+  <!-- 🧱 Introducción general -->
+  <h2>📦 Dropi Modal</h2>
+  <p>
+    En el <strong>Dropi core</strong> utilizamos el componente <code>p-dialog</code> de PrimeNG como base para la construcción de modales.
+    Para asegurar una experiencia visual y funcional consistente, es importante seguir una serie de reglas y estilos personalizados.
+  </p>
+
+  <p>A continuación se describen las condiciones y buenas prácticas necesarias para implementar correctamente los modales:</p>
+
+  <ul>
+    <li>✅ Utilizar siempre la clase base <code>dropi-dialog</code> para aplicar estilos globales.</li>
+    <li>✅ Combinar con clases de tamaño como <code>size-s</code>, <code>size-m</code>, <code>size-l</code>, etc.</li>
+    <li>✅ Incluir el <code>footer</code> recomendado con la clase <code>button-container</code> para la correcta alineación de botones.</li>
+    <li>❌ No aplicar estilos directamente al componente <code>p-dialog</code>.</li>
+    <li>⚠️ No modificar directamente los estilos de PrimeNG sin encapsularlos correctamente.</li>
+  </ul>
+
+  <!-- 🧩 Requisito obligatorio -->
+  <h3>🧩 Requisito Obligatorio</h3>
+  <p>
+    Todo <code>p-dialog</code> personalizado en Dropi debe incluir la clase
+    <code>styleClass="dropi-dialog"</code>. Esta clase garantiza estilos consistentes, control de
+    dimensiones y adaptación responsive.
+  </p>
+
+  <!-- 📊 Tabla con clases de tamaño -->
+  <app-tillte-table-documentation
+    [dataTable]="dialogSizeClasses"
+    [tittle]="'Clases de Tamaño para Modales'"
+    [description]="'Estas clases deben combinarse con dropi-dialog para definir el ancho del modal.'"
+  ></app-tillte-table-documentation>
+  
+
+  <!-- 📋 Reglas de uso -->
+  <h3 style="margin-top: 3rem;">📋 Reglas de Uso</h3>
+  <ul>
+    <li><strong>✅ SIEMPRE</strong> usa <code>styleClass="dropi-dialog"</code> como clase base.</li>
+    <li><strong>✅ COMBÍNALO</strong> con una clase de tamaño como <code>size-s</code>, <code>size-m</code>, <code>size-l</code> o <code>size-xxl</code>.</li>
+    <li><strong>❌ NUNCA</strong> apliques estilos directamente al tag <code>p-dialog</code>.</li>
+    <li><strong>✅ AGREGA SIEMPRE UN FOOTER</strong> con la clase <code>button-container</code> para asegurar una alineación correcta de los botones.</li>
+  </ul>
+
+  <!-- 💡 Vista con botón y ejemplo -->
+  <div class="dialog-preview-block" style="margin-top: 3rem;">
+    <h4>🧪 Ejemplo visual por tamaño</h4>
+    <div style="display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;">
+      <dropi-button text="Size S" (onClick)="openDialog('size-s')"></dropi-button>
+      <dropi-button text="Size M" (onClick)="openDialog('size-m')"></dropi-button>
+      <dropi-button text="Size L" (onClick)="openDialog('size-l')"></dropi-button>
+      <dropi-button text="Size XXL" (onClick)="openDialog('size-xxl')"></dropi-button>
+      <dropi-button text="Full width" (onClick)="openDialog('size-full')"></dropi-button>
+      <dropi-button text="Con scroll" (onClick)="openDialog('size-m', true)"></dropi-button>
+    </div>
+
+    <pre style="margin-top: 1rem;">
+<code appPrismHighlight class="language-html">
+&lt;p-dialog
+  [(visible)]="showDialog"
+  [modal]="true"
+  [closable]="true"
+  [dismissableMask]="true"
+  [header]="'Ejemplo Size S'"
+  styleClass="dropi-dialog size-s"
+&gt;
+  &lt;div class="dialog-content"&gt;
+    &lt;p&gt;Contenido del diálogo...&lt;/p&gt;
+  &lt;/div&gt;
+
+  &lt;ng-template pTemplate="footer"&gt;
+    &lt;div class="button-container"&gt;
+      &lt;dropi-button text="Cancelar" (onClick)="showDialog = false"&gt;&lt;/dropi-button&gt;
+      &lt;dropi-button text="Aceptar" (onClick)="showDialog = false"&gt;&lt;/dropi-button&gt;
+    &lt;/div&gt;
+  &lt;/ng-template&gt;
+&lt;/p-dialog&gt;
+</code>
+</pre>
+  </div>
+
+  <!-- 🦶 Footer recomendado -->
+  <h3 style="margin-top: 3rem;">🦶 Footer Recomendado</h3>
+  <p>
+    Para mantener la alineación y el espaciado consistentes en todos los modales de Dropi,
+    <strong>el uso del footer es obligatorio</strong>. Se debe usar un
+    <code>&lt;ng-template pTemplate="footer"&gt;</code> con estructura estándar y la clase
+    <code>button-container</code>.
+  </p>
+
+  <pre>
+<code appPrismHighlight class="language-html">
+&lt;ng-template pTemplate="footer"&gt;
+  &lt;div class="button-container"&gt;
+    &lt;dropi-button text="Cancelar" (onClick)="...cancel..."&gt;&lt;/dropi-button&gt;
+    &lt;dropi-button text="Aceptar" (onClick)="...confirm..."&gt;&lt;/dropi-button&gt;
+  &lt;/div&gt;
+&lt;/ng-template&gt;
+</code>
+</pre>
+
+  <p>
+    La clase <code>button-container</code> junto con el uso de los <code>dropi-button</code> garantiza que los botones estén con la alineación adecuada en cada tamaño.
+  </p>
+</div>
+
+<!-- Diálogo real -->
+<p-dialog
+  [(visible)]="showDialog"
+  [modal]="true"
+  [closable]="true"
+  [dismissableMask]="true"
+  [header]="'Ejemplo ' + dialogSizeClass +(scroll ? ' con scroll' : '')"
+  [styleClass]="'dropi-dialog ' + dialogSizeClass"
+>
+  <div class="dialog-content">
+    <p *ngIf="!scroll">Este es un ejemplo visual de un diálogo con clase <code>{{ dialogSizeClass }}</code>.</p>
+    <div *ngIf="scroll">
+      <p >Este es un ejemplo visual de un diálogo con clase <code>{{ dialogSizeClass }}</code> con scroll</p>
+      <p  *ngFor="let i of [].constructor(10); let idx = index">{{idx +1}}. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta, 
+        dignissimos voluptates? Perferendis ullam animi ea possimus quia nostrum 
+        nsequatur dignissimos est. Excepturi vel sapiente tempora, iste molestiae tenetur provident!</p>
+
+
+    </div>
+  </div>
+  <ng-template pTemplate="footer">
+    <div class="button-container">
+      <dropi-button severity="secondary" text="Cancelar" (onClick)="showDialog = false"></dropi-button>
+      <dropi-button text="Aceptar" (onClick)="showDialog = false"></dropi-button>
+    </div>
+  </ng-template>
+</p-dialog>

package/src/components-source/storybook-doc-components/dropi-modal/dropi-modal.component.scss

@@ -0,0 +1,15 @@
+p code,
+li code {
+  background-color: #f5f5f5;
+  color: #333;
+  padding: 0.15em 0.4em;
+  border-radius: 4px;
+  font-size: 0.9em;
+  font-family: 'Courier New', Courier, monospace;
+  white-space: nowrap;
+}
+.container {
+    padding-top: 20px;
+}
+
+

package/src/components-source/storybook-doc-components/dropi-modal/dropi-modal.component.ts

@@ -0,0 +1,67 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PrismHighlightDirective } from '@app/directives/prism-highlight.directive';
+import { TillteTableDocumentationComponent } from '../tillte-table-documentation/tillte-table-documentation.component';
+import { NgPrimeModule } from '@app/ngprime.module';
+import { ButtonComponent } from '@app/ui/dropi-button/dropi-button.component';
+
+@Component({
+  selector: 'app-dropi-modal',
+  standalone: true,
+  imports: [CommonModule , TillteTableDocumentationComponent,PrismHighlightDirective, NgPrimeModule, ButtonComponent],
+  templateUrl: './dropi-modal.component.html',
+  styleUrls: ['./dropi-modal.component.scss'],
+  host: {
+    'class': 'dropi-modal-doc'
+  },
+})
+export class DropiModalStoryComponent {
+  showModal: boolean = false;
+  showSizeSDialog: boolean = false;
+  showDialog = false;
+  scroll: boolean = true;
+dialogSizeClass: 'size-s' | 'size-m' | 'size-l' | 'size-xxl'| 'size-full' = 'size-s';
+
+  description = 'Para los modales utilizamos directamente el p-dialog de primeNg, y simplemente aplicamos la clase que se muestra en la tabla de abajo.';
+
+
+
+dialogSizeClasses = [
+  {
+    Tamaño: 'Pequeño',
+    Clase: 'size-s',
+    Descripción: 'Modal pequeño'
+  },
+  {
+    Tamaño: 'Mediano',
+    Clase: 'size-m',
+    Descripción: 'Modal mediano'
+  },
+  {
+    Tamaño: 'Grande',
+    Clase: 'size-l',
+    Descripción: 'Modal grande'
+  },
+  {
+    Tamaño: 'Extra grande',
+    Clase: 'size-xxl',
+    Descripción: 'Modal de pantalla completa'
+  }
+];
+    onCancel() {
+    this.showModal = false;
+  }
+
+  onConfirm() {
+    this.showModal = false;
+  }
+
+  openDialog(size: 'size-s' | 'size-m' | 'size-l' | 'size-xxl'| 'size-full', scroll: boolean = false): void {
+  this.scroll = scroll;
+  this.dialogSizeClass = size;
+  this.showDialog = true;
+}
+
+}
+
+

package/src/components-source/storybook-doc-components/dropi-toast/dropi-toast.component.html

@@ -0,0 +1,156 @@
+<div class="container">
+  <h2>📦 Dropi Toast</h2>
+  <p>
+    En el <strong>Dropi core</strong> utilizamos el componente <code>p-toast</code> de PrimeNG como
+    base para la construcción de toasts. Para asegurar una experiencia visual y funcional
+    consistente, es importante seguir una serie de reglas y estilos personalizados.
+  </p>
+
+  <h3 style="margin-top: 3rem">🧩 ¿Cómo utilizarlo?</h3>
+  <p>
+    Para utilizar el toast de Dropi <b>no es necesario agregar el componente en el template HTML</b>;
+    debes inyectar el servicio <b>ToastService</b> en tu componente y luego, puedes utilizar
+    los diferentes métodos para mostrar el toast con ciertos estilos o mensajes personalizados según
+    el caso.
+  </p>
+
+  <h3 style="margin-top: 3rem">🛑 Consideraciones</h3>
+  <ul>
+    <li>No se debe utilizar el componente <code>p-toast</code> de PrimeNG directamente.</li>
+    <li>No se debe colocar el componente <code>ToastComponent</code> en el template HTML.</li>
+    <li>Por defecto, el toast se cierra automáticamente después de 3 segundos.</li>
+    <li>El toast se muestra en la parte superior derecha de la pantalla.</li>
+    <li>El toast muestra los íconos según el tipo de toast y basado en si es Dropi o una marca blanca</li>
+  </ul>
+
+  <h3 style="margin-top: 3rem">📋 Tipos de Toast</h3>
+  <ul>
+    <li>Toast de tipo <code>success</code></li>
+    <li>Toast de tipo <code>error</code></li>
+    <li>Toast de tipo <code>warning</code></li>
+    <li>Toast de tipo <code>info</code></li>
+    <li>Toast personalizado</li>
+  </ul>
+
+  <h3 style="margin-top: 3rem">🚀 Signatura de los métodos</h3>
+  <pre style="margin-top: 1rem">
+    <code appPrismHighlight class="language-typescript" ngNonBindable>
+      showError(title: string, description?: string, params?: ToastProps)
+      showSuccess(title: string, description?: string, params?: ToastProps)
+      showInfo(title: string, description?: string, params?: ToastProps)
+      showWarning(title: string, description?: string, params?: ToastProps)
+    </code>
+  </pre>
+
+  <div class="dialog-preview-block" style="margin-top: 3rem">
+    <h4>🧪 Ejemplo visual por tipo</h4>
+    <div style="display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; margin-top: 2rem">
+      <dropi-button text="Success" (onClick)="showSuccessToast()" />
+      <dropi-button text="Error" (onClick)="showErrorToast()" />
+      <dropi-button text="Info" (onClick)="showInfoToast()" />
+      <dropi-button text="Warning" (onClick)="showWarningToast()" />
+      <dropi-button text="With URL" (onClick)="showToastWithUrl()" />
+    </div>
+
+    <h4 style="margin-top: 3rem">🧪 Ejemplo de uso con el ToastService</h4>
+    <pre style="margin-top: 1rem">
+      <code appPrismHighlight class="language-typescript" ngNonBindable>
+        import &#123; ToastService &#125; from '&#64;app/services/toast.service';
+
+        export class ExampleComponent implements OnInit &#123;
+          constructor(private toastService: ToastService) &#123; &#125;
+
+          // Toast de tipo success
+          this.toastService.showSuccess('Success', 'El proceso se realizó correctamente');
+
+          // Toast de tipo error
+          this.toastService.showError('Error', 'Se ha producido un error inesperado');
+
+          // Toast de tipo info
+          this.toastService.showInfo('Info', 'Se ha realizado una acción');
+
+          // Toast de tipo warning
+          this.toastService.showWarning('Advertencia', 'Se ha producido un problema');
+
+          // Toast personalizado
+          this.toastService.showSuccess('Success', 'El proceso se realizó correctamente', &#123;
+            life: 5000,
+            link: &#123; url: 'https://dropi.co', text: 'Go to Dropi' &#125;
+          &#125;);
+        &#125;
+      </code>
+    </pre>
+
+    <h4 style="margin-top: 1rem">ℹ️ Props útiles (opcional)</h4>
+    <ul>
+      <li><code>life</code>: duración en ms (por defecto 3000).</li>
+      <li><code>sticky</code>: si es <code>true</code>, permanece hasta cerrar.</li>
+      <li><code>closable</code>: muestra botón para cerrar.</li>
+      <li><code>link</code>: objeto con <code>url</code> y <code>text</code> para CTA.</li>
+    </ul>
+
+    <h3 style="margin-top: 3rem">⚙️ Parámetros de configuración (ToastProps)</h3>
+    <table style="width: 100%; border-collapse: collapse; margin-top: 1rem; margin-bottom: 5rem">
+      <thead>
+        <tr>
+          <th style="text-align: left; padding: 0.5rem; border-bottom: 1px solid #ddd">
+            Parámetro
+          </th>
+          <th style="text-align: left; padding: 0.5rem; border-bottom: 1px solid #ddd">Tipo</th>
+          <th style="text-align: left; padding: 0.5rem; border-bottom: 1px solid #ddd">
+            Obligatorio
+          </th>
+          <th style="text-align: left; padding: 0.5rem; border-bottom: 1px solid #ddd">
+            Descripción
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>summary</td>
+          <td>string</td>
+          <td>✅ Sí</td>
+          <td>Título principal del toast.</td>
+        </tr>
+        <tr>
+          <td>detail</td>
+          <td>string</td>
+          <td>❌ No</td>
+          <td>Texto adicional o descripción.</td>
+        </tr>
+        <tr>
+          <td>severity</td>
+          <td>'success' | 'error' | 'info' | 'warn'</td>
+          <td>✅ Sí</td>
+          <td>Determina el estilo visual del toast.</td>
+        </tr>
+        <tr>
+          <td>life</td>
+          <td>number</td>
+          <td>❌ No (default: 3000)</td>
+          <td>Duración en milisegundos que el toast permanece visible.</td>
+        </tr>
+        <tr>
+          <td>sticky</td>
+          <td>boolean</td>
+          <td>❌ No</td>
+          <td>Si es true, el toast no se cierra automáticamente.</td>
+        </tr>
+        <tr>
+          <td>closable</td>
+          <td>boolean</td>
+          <td>❌ No (default: true)</td>
+          <td>Permite cerrar manualmente el toast.</td>
+        </tr>
+        <tr>
+          <td>link</td>
+          <td>&#123; url: string; text: string &#125;</td>
+          <td>❌ No</td>
+          <td>Agrega un enlace clickeable en el toast.</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+
+<app-toast [forceBrandIsDropi]="forceBrandIsDropi" />

package/src/components-source/storybook-doc-components/dropi-toast/dropi-toast.component.scss

@@ -0,0 +1,13 @@
+p code,
+li code {
+  background-color: #f5f5f5;
+  color: #333;
+  padding: 0.15em 0.4em;
+  border-radius: 4px;
+  font-size: 0.9em;
+  font-family: 'Courier New', Courier, monospace;
+  white-space: nowrap;
+}
+.container {
+  padding-top: 20px;
+}

package/src/components-source/storybook-doc-components/dropi-toast/dropi-toast.component.ts

@@ -0,0 +1,55 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PrismHighlightDirective } from '@app/directives/prism-highlight.directive';
+import { NgPrimeModule } from '@app/ngprime.module';
+import { ToastComponent } from '@app/ui/toast/toast.component';
+import { ToastService } from '@app/services/toast.service';
+import { ButtonComponent } from '@app/ui/dropi-button/dropi-button.component';
+
+@Component({
+  selector: 'app-dropi-toast',
+  standalone: true,
+  imports: [
+    CommonModule,
+    PrismHighlightDirective,
+    NgPrimeModule,
+    ToastComponent,
+    ButtonComponent,
+  ],
+  templateUrl: './dropi-toast.component.html',
+  styleUrls: ['./dropi-toast.component.scss'],
+  host: {
+    class: 'dropi-toast-doc',
+  },
+})
+export class DropiToastStoryComponent {
+  @Input() forceBrandIsDropi: boolean = true;
+
+  constructor(private readonly toastService: ToastService) {}
+
+  showSuccessToast() {
+    this.toastService.showSuccess('Título', 'Descripción');
+  }
+
+  showErrorToast() {
+    this.toastService.showError('Título', 'Descripción');
+  }
+
+  showInfoToast() {
+    this.toastService.showInfo('Título', 'Descripción');
+  }
+
+  showWarningToast() {
+    this.toastService.showWarning('Título', 'Descripción');
+  }
+
+  showToastWithUrl() {
+    this.toastService.showSuccess('Título', 'Descripción', {
+      life: 5000,
+      link: {
+        url: 'https://dropi.co',
+        text: 'Go to Dropi'
+      }
+    });
+  }
+}

package/src/components-source/storybook-doc-components/flags-storybook/flags-storybook.component.html

@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Documentación de Country Flags</title>
+  <style>
+    .flag-example {
+      display: flex;
+      align-items: center;
+      margin: 20px 0;
+    }
+    .flag-example img {
+      width: 50px;
+      height: 50px;
+      margin-right: 20px;
+    }
+    .flag-example .code {
+      font-family: 'Courier New', Courier, monospace;
+      background: #f4f4f4;
+      padding: 10px;
+      border-radius: 5px;
+      flex-grow: 1;
+    }
+  </style>
+</head>
+<body>
+
+<div class="container">
+  <h1><code appPrismHighlight>&lt;app-country-flags&gt;</code></h1>
+
+  <h2>Descripción</h2>
+  <p>El componente <code appPrismHighlight>&lt;app-country-flags&gt;</code> permite representar banderas de diferentes países en la aplicación con dos estilos disponibles: <strong>círculo</strong> y <strong>rectángulo</strong>.</p>
+
+  <h2>Uso Básico</h2>
+  <pre><code appPrismHighlight>&lt;app-country-flags
+  [country]="'PAIS'"
+  [style]="'estilo'"
+&gt;&lt;/app-country-flags&gt;</code></pre>
+
+  <h2>Propiedades</h2>
+  <table>
+    <thead>
+      <tr>
+        <th>Propiedad</th>
+        <th>Tipo</th>
+        <th>Descripción</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><code appPrismHighlight>country</code></td>
+        <td>string</td>
+        <td>El código del país en formato ISO 3166-1 alpha-2 (por ejemplo, 'CO' para Colombia, 'ES' para España).</td>
+      </tr>
+      <tr>
+        <td><code appPrismHighlight>style</code></td>
+        <td>string</td>
+        <td>El estilo de la bandera: <code appPrismHighlight>'circle'</code> o <code appPrismHighlight>'rectangle'</code>.</td>
+      </tr>
+    </tbody>
+  </table>
+
+  <h2>Tipos de Estilos</h2>
+  <ul>
+    <li><strong>circle</strong>: Muestra la bandera en un círculo.</li>
+    <li><strong>rectangle</strong>: Muestra la bandera en un rectángulo.</li>
+  </ul>
+
+  <h2>Ejemplos de Uso</h2>
+
+  <h3>1. Bandera de Colombia (Estilo Círculo)</h3>
+  <div class="flag-example">
+    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPgAAACUCAMAAACJORQYAAAAHlBMVEX/zQAAMIfIEC7/0ADivCtkXnMAJooAMYyBI2PGEC916Fa3AAAAf0lEQVR4nO3PUQGCAAAFsaeoQP/CZPD7tgbbAAAAAAAAAAAAAAAAAAAAAAAAAOAfR9Q+UftG7Re1V5R4jXiNeI14jXiNeI14jXiNeI14jXiNeI14jXiNeI14jXiNeE03fkbtitodtXeUeI14jXiNeI14jXiNeI14jXiNeE02/gAy0Hgh8HA5YwAAAABJRU5ErkJggg==" alt="Bandera de Colombia" style="border-radius: 50%;">
+    <div class="code">
+      <pre><code appPrismHighlight>&lt;app-country-flags
+  [country]="'CO'"
+  [style]="'circle'"
+&gt;&lt;/app-country-flags&gt;</code></pre>
+    </div>
+  </div>
+
+  <h3>2. Bandera de España (Estilo Rectángulo)</h3>
+  <div class="flag-example">
+    <img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Flag_of_Spain.svg" alt="Bandera de España" style="width: 50px; height: 30px;">
+    <div class="code">
+      <pre><code appPrismHighlight>&lt;app-country-flags
+  [country]="'ES'"
+  [style]="'rectangle'"
+&gt;&lt;/app-country-flags&gt;</code></pre>
+    </div>
+  </div>
+
+
+
+</div>
+
+</body>
+</html>

package/src/components-source/storybook-doc-components/flags-storybook/flags-storybook.component.ts

@@ -0,0 +1,19 @@
+import { CommonModule } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { PrismHighlightDirective } from '@app/directives/prism-highlight.directive';
+
+@Component({
+  selector: 'app-flags-storybook',
+  templateUrl: './flags-storybook.component.html',
+  styleUrls: ['./flags-storybook.component.css'],
+  standalone:true,
+  imports:[CommonModule,PrismHighlightDirective]
+})
+export class FlagsStorybookComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

package/src/components-source/storybook-doc-components/icons-storybook/icons-storybook.component.css

@@ -0,0 +1,82 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+.container{
+    padding: 8rem 8rem;
+    width: 100%;
+}
+.container-icons{
+  
+    display: grid;
+    grid-template-columns: repeat(8, 1fr);
+    gap: 1rem;
+    font-size: small;
+    text-align: center;
+ 
+}
+
+.content-icon-list{
+    place-items: center; 
+    align-self: center;
+    cursor: pointer;
+}
+
+p{
+    margin: 0;
+}
+
+/* code{
+    margin: 1rem 0;
+    padding: 1rem;
+    background-color: black;
+    font-size: 14px;
+    color: orange;
+    display: inline-block;
+} */
+
+.icon-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 10px;
+  }
+
+  .icon-table th, .icon-table td {
+    border: 1px solid #ddd;
+    padding: 8px;
+    text-align: left;
+  }
+
+  .icon-table th {
+    background-color: #f4f4f4;
+    font-weight: bold;
+  }
+
+  .icon-table tr:nth-child(even) {
+    background-color: #f9f9f9;
+  }
+
+  .icon-table tr:hover {
+    background-color: #f1f1f1;
+  }
+
+  img{
+    cursor: pointer;
+  }
+
+  img:hover{
+    transform: scale(1.2);
+  }
+  .tittleIcon{
+    width: 100%;
+    text-align: center;
+
+  }
+
+  :host {
+    display: flex;
+        width: 100%;
+        height: 100%;
+        justify-content: center;
+  }