@up_si_vale/sivale-componentes-angular 1.0.0

package/src/lib/molecules/snackbar/snackbar.component.ts

@@ -0,0 +1,321 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Subscription } from 'rxjs';
+import { SnackbarService } from '../../services/snackbar.service';
+import { SnackbarData } from '../../models/snackbar.models';
+
+@Component({
+  selector: 'app-snackbar',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <!-- Top Right -->
+    <div class="snackbar-container snackbar-container--top-right" *ngIf="getSnackbarsByPosition('top-right').length > 0">
+      <div
+        *ngFor="let snackbar of getSnackbarsByPosition('top-right')"
+        class="snackbar"
+        [class.snackbar--success]="snackbar.type === 'success'"
+        [class.snackbar--error]="snackbar.type === 'error'"
+        [class.snackbar--warning]="snackbar.type === 'warning'"
+        [class.snackbar--info]="snackbar.type === 'info'"
+        >
+        <div class="snackbar__icon">
+          <svg *ngIf="snackbar.type === 'success'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M16.6667 5L7.50004 14.1667L3.33337 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <svg *ngIf="snackbar.type === 'error'" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M11.96 2.37695C13.2212 2.38797 14.4681 2.65061 15.627 3.14844C16.7858 3.64631 17.8337 4.37013 18.71 5.27734L18.7158 5.2832L18.7227 5.28906C19.63 6.1654 20.3537 7.21402 20.8516 8.37305C21.3494 9.53204 21.6111 10.7787 21.6221 12.04C21.633 13.3014 21.3927 14.5523 20.915 15.7197C20.4374 16.8872 19.7318 17.9479 18.8398 18.8398C17.9479 19.7318 16.8872 20.4374 15.7197 20.915C14.5523 21.3927 13.3014 21.633 12.04 21.6221C10.7787 21.6111 9.53204 21.3494 8.37305 20.8516C7.21402 20.3537 6.1654 19.63 5.28906 18.7227L5.2832 18.7158L5.27734 18.71L4.94531 18.374C4.19221 17.5705 3.58408 16.641 3.14844 15.627C2.65061 14.4681 2.38797 13.2212 2.37695 11.96C2.36599 10.6986 2.60632 9.44681 3.08398 8.2793C3.56165 7.11184 4.26724 6.05112 5.15918 5.15918C6.05112 4.26724 7.11184 3.56165 8.2793 3.08398C9.44681 2.60632 10.6986 2.36599 11.96 2.37695ZM13.6523 3.66797C11.7234 3.28574 9.7209 3.58451 7.9873 4.5127C6.25388 5.4409 4.89578 6.94166 4.14453 8.75879C3.39335 10.5759 3.29528 12.5973 3.86719 14.4785C4.43922 16.3599 5.64653 17.9847 7.28223 19.0762C8.91789 20.1676 10.8811 20.6587 12.8379 20.4648C14.7947 20.271 16.623 19.4038 18.0127 18.0127C18.8041 17.2243 19.4316 16.2872 19.8584 15.2549C20.2319 14.3515 20.4462 13.3914 20.4912 12.417L20.5 11.998C20.4981 10.0321 19.8148 8.12717 18.5664 6.6084C17.3178 5.08945 15.5811 4.05022 13.6523 3.66797ZM15 8.49414C15.0659 8.49416 15.1315 8.50686 15.1924 8.53223C15.2531 8.55755 15.3081 8.59493 15.3545 8.6416L15.3574 8.64453C15.4043 8.69099 15.4414 8.74672 15.4668 8.80762C15.4922 8.86855 15.5059 8.93399 15.5059 9C15.5058 9.06595 15.4922 9.1315 15.4668 9.19238C15.4414 9.25316 15.4042 9.3081 15.3574 9.35449V9.35547L13.0566 11.6455L12.7012 12L13.0566 12.3545L15.3574 14.6445C15.4043 14.691 15.4414 14.7467 15.4668 14.8076C15.4922 14.8685 15.5059 14.934 15.5059 15C15.5058 15.0659 15.4922 15.1315 15.4668 15.1924C15.4414 15.2532 15.4042 15.3081 15.3574 15.3545L15.3545 15.3574C15.3081 15.4042 15.2532 15.4414 15.1924 15.4668C15.1315 15.4922 15.0659 15.5058 15 15.5059C14.934 15.5059 14.8685 15.4922 14.8076 15.4668C14.7467 15.4414 14.691 15.4043 14.6445 15.3574L12.3545 13.0566L12 12.7012L11.6455 13.0566L9.35547 15.3574H9.35449C9.3081 15.4042 9.25316 15.4414 9.19238 15.4668C9.1315 15.4922 9.06595 15.5058 9 15.5059C8.93399 15.5059 8.86855 15.4922 8.80762 15.4668C8.74672 15.4414 8.69099 15.4043 8.64453 15.3574L8.6416 15.3545C8.59493 15.3081 8.55755 15.2531 8.53223 15.1924C8.50686 15.1315 8.49416 15.0659 8.49414 15C8.49414 14.9341 8.50688 14.8685 8.53223 14.8076C8.55761 14.7467 8.59475 14.691 8.6416 14.6445H8.64258L10.9424 12.3545L11.2988 12L10.9424 11.6455L8.64258 9.35547C8.54859 9.26105 8.49614 9.13325 8.49609 9C8.49609 8.86631 8.54902 8.73809 8.64355 8.64355C8.73809 8.54902 8.86631 8.49609 9 8.49609C9.10009 8.49613 9.1972 8.52542 9.2793 8.58008L9.35645 8.64355L11.6455 10.9424L12 11.2988L12.3545 10.9424L14.6445 8.64258V8.6416C14.691 8.59475 14.7467 8.55761 14.8076 8.53223C14.8685 8.50688 14.9341 8.49414 15 8.49414Z" stroke="#F04438"/>
+          </svg>
+          <svg *ngIf="snackbar.type === 'warning'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 7V11M10 15H10.01M8.60001 3.5L1.95001 15C1.69137 15.4584 1.55396 15.9753 1.55189 16.5015C1.54982 17.0277 1.68317 17.5456 1.93827 18.006C2.19337 18.4663 2.56117 18.8535 3.00616 19.1305C3.45115 19.4075 3.95928 19.5648 4.48001 19.5882H17.52C18.0407 19.5648 18.5489 19.4075 18.9939 19.1305C19.4388 18.8535 19.8066 18.4663 20.0617 18.006C20.3168 17.5456 20.4502 17.0277 20.4481 16.5015C20.446 15.9753 20.3086 15.4584 20.05 15L13.4 3.5C13.1332 3.05942 12.7619 2.69355 12.3198 2.43406C11.8777 2.17458 11.3783 2.02954 10.87 2.00967C10.3617 1.98981 9.85362 2.09565 9.39278 2.31848C8.93194 2.5413 8.53223 2.87461 8.23001 3.29L8.60001 3.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <svg *ngIf="snackbar.type === 'info'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 14V10M10 6H10.01M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
+        <div class="snackbar__content">
+          <p class="snackbar__message">{{ snackbar.message }}</p>
+        </div>
+        <button
+          *ngIf="snackbar.action"
+          class="snackbar__action"
+          (click)="handleAction(snackbar)">
+          {{ snackbar.action }}
+        </button>
+        <button
+          class="snackbar__close"
+          (click)="dismiss(snackbar.id)"
+          aria-label="Cerrar">
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M13 1L1 13M1 1L13 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </button>
+      </div>
+    </div>
+
+    <!-- Top Left -->
+    <div class="snackbar-container snackbar-container--top-left" *ngIf="getSnackbarsByPosition('top-left').length > 0">
+      <div
+        *ngFor="let snackbar of getSnackbarsByPosition('top-left')"
+        class="snackbar"
+        [class.snackbar--success]="snackbar.type === 'success'"
+        [class.snackbar--error]="snackbar.type === 'error'"
+        [class.snackbar--warning]="snackbar.type === 'warning'"
+        [class.snackbar--info]="snackbar.type === 'info'"
+        >
+        <div class="snackbar__icon">
+          <svg *ngIf="snackbar.type === 'success'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M16.6667 5L7.50004 14.1667L3.33337 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <svg *ngIf="snackbar.type === 'error'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 6V10M10 14H10.01M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <svg *ngIf="snackbar.type === 'warning'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 7V11M10 15H10.01M8.60001 3.5L1.95001 15C1.69137 15.4584 1.55396 15.9753 1.55189 16.5015C1.54982 17.0277 1.68317 17.5456 1.93827 18.006C2.19337 18.4663 2.56117 18.8535 3.00616 19.1305C3.45115 19.4075 3.95928 19.5648 4.48001 19.5882H17.52C18.0407 19.5648 18.5489 19.4075 18.9939 19.1305C19.4388 18.8535 19.8066 18.4663 20.0617 18.006C20.3168 17.5456 20.4502 17.0277 20.4481 16.5015C20.446 15.9753 20.3086 15.4584 20.05 15L13.4 3.5C13.1332 3.05942 12.7619 2.69355 12.3198 2.43406C11.8777 2.17458 11.3783 2.02954 10.87 2.00967C10.3617 1.98981 9.85362 2.09565 9.39278 2.31848C8.93194 2.5413 8.53223 2.87461 8.23001 3.29L8.60001 3.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <svg *ngIf="snackbar.type === 'info'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 14V10M10 6H10.01M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
+        <div class="snackbar__content">
+          <p class="snackbar__message">{{ snackbar.message }}</p>
+        </div>
+        <button
+          *ngIf="snackbar.action"
+          class="snackbar__action"
+          (click)="handleAction(snackbar)">
+          {{ snackbar.action }}
+        </button>
+        <button
+          class="snackbar__close"
+          (click)="dismiss(snackbar.id)"
+          aria-label="Cerrar">
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M13 1L1 13M1 1L13 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </button>
+      </div>
+    </div>
+
+    <!-- Top Center -->
+    <div class="snackbar-container snackbar-container--top-center" *ngIf="getSnackbarsByPosition('top-center').length > 0">
+      <div
+        *ngFor="let snackbar of getSnackbarsByPosition('top-center')"
+        class="snackbar"
+        [class.snackbar--success]="snackbar.type === 'success'"
+        [class.snackbar--error]="snackbar.type === 'error'"
+        [class.snackbar--warning]="snackbar.type === 'warning'"
+        [class.snackbar--info]="snackbar.type === 'info'"
+        >
+        <div class="snackbar__icon">
+          <svg *ngIf="snackbar.type === 'success'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M16.6667 5L7.50004 14.1667L3.33337 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <svg *ngIf="snackbar.type === 'error'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 6V10M10 14H10.01M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <svg *ngIf="snackbar.type === 'warning'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 7V11M10 15H10.01M8.60001 3.5L1.95001 15C1.69137 15.4584 1.55396 15.9753 1.55189 16.5015C1.54982 17.0277 1.68317 17.5456 1.93827 18.006C2.19337 18.4663 2.56117 18.8535 3.00616 19.1305C3.45115 19.4075 3.95928 19.5648 4.48001 19.5882H17.52C18.0407 19.5648 18.5489 19.4075 18.9939 19.1305C19.4388 18.8535 19.8066 18.4663 20.0617 18.006C20.3168 17.5456 20.4502 17.0277 20.4481 16.5015C20.446 15.9753 20.3086 15.4584 20.05 15L13.4 3.5C13.1332 3.05942 12.7619 2.69355 12.3198 2.43406C11.8777 2.17458 11.3783 2.02954 10.87 2.00967C10.3617 1.98981 9.85362 2.09565 9.39278 2.31848C8.93194 2.5413 8.53223 2.87461 8.23001 3.29L8.60001 3.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <svg *ngIf="snackbar.type === 'info'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 14V10M10 6H10.01M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
+        <div class="snackbar__content">
+          <p class="snackbar__message">{{ snackbar.message }}</p>
+        </div>
+        <button
+          *ngIf="snackbar.action"
+          class="snackbar__action"
+          (click)="handleAction(snackbar)">
+          {{ snackbar.action }}
+        </button>
+        <button
+          class="snackbar__close"
+          (click)="dismiss(snackbar.id)"
+          aria-label="Cerrar">
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M13 1L1 13M1 1L13 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </button>
+      </div>
+    </div>
+
+    <!-- Bottom Right -->
+    <div class="snackbar-container snackbar-container--bottom-right" *ngIf="getSnackbarsByPosition('bottom-right').length > 0">
+      <div
+        *ngFor="let snackbar of getSnackbarsByPosition('bottom-right')"
+        class="snackbar"
+        [class.snackbar--success]="snackbar.type === 'success'"
+        [class.snackbar--error]="snackbar.type === 'error'"
+        [class.snackbar--warning]="snackbar.type === 'warning'"
+        [class.snackbar--info]="snackbar.type === 'info'"
+        >
+        <div class="snackbar__icon">
+          <svg *ngIf="snackbar.type === 'success'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M16.6667 5L7.50004 14.1667L3.33337 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <svg *ngIf="snackbar.type === 'error'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 6V10M10 14H10.01M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <svg *ngIf="snackbar.type === 'warning'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 7V11M10 15H10.01M8.60001 3.5L1.95001 15C1.69137 15.4584 1.55396 15.9753 1.55189 16.5015C1.54982 17.0277 1.68317 17.5456 1.93827 18.006C2.19337 18.4663 2.56117 18.8535 3.00616 19.1305C3.45115 19.4075 3.95928 19.5648 4.48001 19.5882H17.52C18.0407 19.5648 18.5489 19.4075 18.9939 19.1305C19.4388 18.8535 19.8066 18.4663 20.0617 18.006C20.3168 17.5456 20.4502 17.0277 20.4481 16.5015C20.446 15.9753 20.3086 15.4584 20.05 15L13.4 3.5C13.1332 3.05942 12.7619 2.69355 12.3198 2.43406C11.8777 2.17458 11.3783 2.02954 10.87 2.00967C10.3617 1.98981 9.85362 2.09565 9.39278 2.31848C8.93194 2.5413 8.53223 2.87461 8.23001 3.29L8.60001 3.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <svg *ngIf="snackbar.type === 'info'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 14V10M10 6H10.01M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
+        <div class="snackbar__content">
+          <p class="snackbar__message">{{ snackbar.message }}</p>
+        </div>
+        <button
+          *ngIf="snackbar.action"
+          class="snackbar__action"
+          (click)="handleAction(snackbar)">
+          {{ snackbar.action }}
+        </button>
+        <button
+          class="snackbar__close"
+          (click)="dismiss(snackbar.id)"
+          aria-label="Cerrar">
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M13 1L1 13M1 1L13 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </button>
+      </div>
+    </div>
+
+    <!-- Bottom Left -->
+    <div class="snackbar-container snackbar-container--bottom-left" *ngIf="getSnackbarsByPosition('bottom-left').length > 0">
+      <div
+        *ngFor="let snackbar of getSnackbarsByPosition('bottom-left')"
+        class="snackbar"
+        [class.snackbar--success]="snackbar.type === 'success'"
+        [class.snackbar--error]="snackbar.type === 'error'"
+        [class.snackbar--warning]="snackbar.type === 'warning'"
+        [class.snackbar--info]="snackbar.type === 'info'"
+        >
+        <div class="snackbar__icon">
+          <svg *ngIf="snackbar.type === 'success'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M16.6667 5L7.50004 14.1667L3.33337 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <svg *ngIf="snackbar.type === 'error'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 6V10M10 14H10.01M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <svg *ngIf="snackbar.type === 'warning'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 7V11M10 15H10.01M8.60001 3.5L1.95001 15C1.69137 15.4584 1.55396 15.9753 1.55189 16.5015C1.54982 17.0277 1.68317 17.5456 1.93827 18.006C2.19337 18.4663 2.56117 18.8535 3.00616 19.1305C3.45115 19.4075 3.95928 19.5648 4.48001 19.5882H17.52C18.0407 19.5648 18.5489 19.4075 18.9939 19.1305C19.4388 18.8535 19.8066 18.4663 20.0617 18.006C20.3168 17.5456 20.4502 17.0277 20.4481 16.5015C20.446 15.9753 20.3086 15.4584 20.05 15L13.4 3.5C13.1332 3.05942 12.7619 2.69355 12.3198 2.43406C11.8777 2.17458 11.3783 2.02954 10.87 2.00967C10.3617 1.98981 9.85362 2.09565 9.39278 2.31848C8.93194 2.5413 8.53223 2.87461 8.23001 3.29L8.60001 3.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <svg *ngIf="snackbar.type === 'info'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 14V10M10 6H10.01M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
+        <div class="snackbar__content">
+          <p class="snackbar__message">{{ snackbar.message }}</p>
+        </div>
+        <button
+          *ngIf="snackbar.action"
+          class="snackbar__action"
+          (click)="handleAction(snackbar)">
+          {{ snackbar.action }}
+        </button>
+        <button
+          class="snackbar__close"
+          (click)="dismiss(snackbar.id)"
+          aria-label="Cerrar">
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M13 1L1 13M1 1L13 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </button>
+      </div>
+    </div>
+
+    <!-- Bottom Center -->
+    <div class="snackbar-container snackbar-container--bottom-center" *ngIf="getSnackbarsByPosition('bottom-center').length > 0">
+      <div
+        *ngFor="let snackbar of getSnackbarsByPosition('bottom-center')"
+        class="snackbar"
+        [class.snackbar--success]="snackbar.type === 'success'"
+        [class.snackbar--error]="snackbar.type === 'error'"
+        [class.snackbar--warning]="snackbar.type === 'warning'"
+        [class.snackbar--info]="snackbar.type === 'info'"
+        >
+        <div class="snackbar__icon">
+          <svg *ngIf="snackbar.type === 'success'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M16.6667 5L7.50004 14.1667L3.33337 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <svg *ngIf="snackbar.type === 'error'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 6V10M10 14H10.01M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <svg *ngIf="snackbar.type === 'warning'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 7V11M10 15H10.01M8.60001 3.5L1.95001 15C1.69137 15.4584 1.55396 15.9753 1.55189 16.5015C1.54982 17.0277 1.68317 17.5456 1.93827 18.006C2.19337 18.4663 2.56117 18.8535 3.00616 19.1305C3.45115 19.4075 3.95928 19.5648 4.48001 19.5882H17.52C18.0407 19.5648 18.5489 19.4075 18.9939 19.1305C19.4388 18.8535 19.8066 18.4663 20.0617 18.006C20.3168 17.5456 20.4502 17.0277 20.4481 16.5015C20.446 15.9753 20.3086 15.4584 20.05 15L13.4 3.5C13.1332 3.05942 12.7619 2.69355 12.3198 2.43406C11.8777 2.17458 11.3783 2.02954 10.87 2.00967C10.3617 1.98981 9.85362 2.09565 9.39278 2.31848C8.93194 2.5413 8.53223 2.87461 8.23001 3.29L8.60001 3.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <svg *ngIf="snackbar.type === 'info'" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10 14V10M10 6H10.01M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
+        <div class="snackbar__content">
+          <p class="snackbar__message">{{ snackbar.message }}</p>
+        </div>
+        <button
+          *ngIf="snackbar.action"
+          class="snackbar__action"
+          (click)="handleAction(snackbar)">
+          {{ snackbar.action }}
+        </button>
+        <button
+          class="snackbar__close"
+          (click)="dismiss(snackbar.id)"
+          aria-label="Cerrar">
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M13 1L1 13M1 1L13 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </button>
+      </div>
+    </div>
+  `,
+  styleUrls: ['./snackbar.component.scss']
+})
+export class SnackbarComponent implements OnInit, OnDestroy {
+  snackbars: SnackbarData[] = [];
+  private subscriptions: Subscription[] = [];
+
+  constructor(private snackbarService: SnackbarService) {}
+
+  ngOnInit(): void {
+    // Subscribe to new snackbars
+    const snackbarSub = this.snackbarService.snackbar$.subscribe((snackbar) => {
+      this.snackbars.push(snackbar);
+    });
+    this.subscriptions.push(snackbarSub);
+
+    // Subscribe to dismiss events
+    const dismissSub = this.snackbarService.dismiss$.subscribe((id) => {
+      if (id === 'all') {
+        this.snackbars = [];
+      } else {
+        this.snackbars = this.snackbars.filter(s => s.id !== id);
+      }
+    });
+    this.subscriptions.push(dismissSub);
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.forEach(sub => sub.unsubscribe());
+  }
+
+  getSnackbarsByPosition(position: string): SnackbarData[] {
+    return this.snackbars.filter(s => s.position === position);
+  }
+
+  dismiss(id: string): void {
+    this.snackbars = this.snackbars.filter(s => s.id !== id);
+    this.snackbarService.dismiss(id);
+  }
+
+  handleAction(snackbar: SnackbarData): void {
+    if (snackbar.actionCallback) {
+      snackbar.actionCallback();
+    }
+    this.dismiss(snackbar.id);
+  }
+}

package/src/lib/services/snackbar.service.ts

@@ -0,0 +1,103 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+import { SnackbarConfig, SnackbarData, SnackbarPosition } from '../models/snackbar.models';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SnackbarService {
+  private snackbarSubject = new Subject<SnackbarData>();
+  public snackbar$ = this.snackbarSubject.asObservable();
+
+  private dismissSubject = new Subject<string>();
+  public dismiss$ = this.dismissSubject.asObservable();
+
+  private snackbarIdCounter = 0;
+
+  constructor() {
+  }
+
+  /**
+   * Show success snackbar
+   */
+  success(message: string, duration: number = 5000, position?: SnackbarPosition): void {
+    this.show({
+      message,
+      type: 'success',
+      duration,
+      position
+    });
+  }
+
+  /**
+   * Show error snackbar
+   */
+  error(message: string, duration: number = 5000, position?: SnackbarPosition): void {
+    this.show({
+      message,
+      type: 'error',
+      duration,
+      position
+    });
+  }
+
+  /**
+   * Show warning snackbar
+   */
+  warning(message: string, duration: number = 5000, position?: SnackbarPosition): void {
+    this.show({
+      message,
+      type: 'warning',
+      duration,
+      position
+    });
+  }
+
+  /**
+   * Show info snackbar
+   */
+  info(message: string, duration: number = 5000, position?: SnackbarPosition): void {
+    this.show({
+      message,
+      type: 'info',
+      duration,
+      position
+    });
+  }
+
+  /**
+   * Show snackbar with custom configuration
+   */
+  show(config: SnackbarConfig): void {
+    const id = `snackbar-${++this.snackbarIdCounter}`;
+    const snackbarData: SnackbarData = {
+      ...config,
+      id,
+      duration: config.duration ?? 5000,
+      position: config.position ?? 'top-right'
+    };
+
+    this.snackbarSubject.next(snackbarData);
+
+    // Auto dismiss after duration
+    if (snackbarData.duration && snackbarData.duration > 0) {
+      setTimeout(() => {
+        this.dismiss(id);
+      }, snackbarData.duration);
+    }
+  }
+
+  /**
+   * Dismiss specific snackbar by id
+   */
+  dismiss(id: string): void {
+    this.dismissSubject.next(id);
+  }
+
+  /**
+   * Dismiss all snackbars
+   */
+  dismissAll(): void {
+    this.dismissSubject.next('all');
+  }
+}

package/src/lib/tokens/asset-base-url.token.ts

@@ -0,0 +1,10 @@
+import { InjectionToken } from '@angular/core';
+
+/**
+ * Base URL para los assets remotos del microfrontend (íconos, imágenes).
+ * El consumidor debe proveerlo, normalmente con el valor de `environment.mfAssetsUrl`.
+ */
+export const ASSET_BASE_URL = new InjectionToken<string>('ASSET_BASE_URL', {
+  providedIn: 'root',
+  factory: () => ''
+});

package/src/public-api.ts

@@ -0,0 +1,38 @@
+/*
+ * Public API Surface of @up_si_vale/sivale-componentes-angular
+ */
+
+// Tokens
+export * from './lib/tokens/asset-base-url.token';
+
+// Models
+export * from './lib/models/snackbar.models';
+
+// Services
+export * from './lib/services/snackbar.service';
+
+// Directives
+export * from './lib/directives/asset-source.directive';
+export * from './lib/directives/icon-source.directive';
+export * from './lib/directives/only-number.directive';
+export * from './lib/directives/only-letters.directive';
+export * from './lib/directives/rfc.directive';
+export * from './lib/directives/no-leading-space.directive';
+export * from './lib/directives/tooltip.directive';
+
+// Atoms
+export * from './lib/atoms/button/button.component';
+export * from './lib/atoms/input/input.component';
+export * from './lib/atoms/textarea/textarea.component';
+export * from './lib/atoms/checkbox/checkbox.component';
+export * from './lib/atoms/radio/radio.component';
+export * from './lib/atoms/date-picker/date-picker.component';
+export * from './lib/atoms/loader/loader.component';
+
+// Molecules
+export * from './lib/molecules/option/option.component';
+export * from './lib/molecules/select/select.component';
+export * from './lib/molecules/multiselect/multiselect.component';
+export * from './lib/molecules/phone-input/phone-input.component';
+export * from './lib/molecules/copy-input/copy-input.component';
+export * from './lib/molecules/snackbar/snackbar.component';

package/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "sourceMap": true,
+    "declaration": true,
+    "declarationMap": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": ["ES2022", "dom"]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}