@up_si_vale/sivale-componentes-angular 1.0.0

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

@@ -0,0 +1,482 @@
+import {
+  Component,
+  Input,
+  forwardRef,
+  ViewChild,
+  ElementRef,
+  OnDestroy,
+  HostListener,
+  Renderer2,
+  ContentChildren,
+  ContentChild,
+  QueryList,
+  AfterContentInit,
+  RendererStyleFlags2,
+  TemplateRef
+} from '@angular/core';
+import { CommonModule, DOCUMENT } from '@angular/common';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { Inject } from '@angular/core';
+import { OptionComponent } from '../option/option.component';
+
+// Directive markers for prefix/suffix
+import { Directive } from '@angular/core';
+
+@Directive({
+  selector: '[prefix]',
+  standalone: true
+})
+export class SelectPrefixDirective {}
+
+@Directive({
+  selector: '[suffix]',
+  standalone: true
+})
+export class SelectSuffixDirective {}
+
+export interface SelectOption {
+  value: any;
+  label: string;
+  disabled?: boolean;
+}
+
+interface DropdownPosition {
+  top?: string;
+  bottom?: string;
+  left: string;
+  width: string;
+  maxHeight: string;
+}
+
+@Component({
+  selector: 'app-select',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, FormsModule, SelectPrefixDirective, SelectSuffixDirective],
+  template: `
+    <div class="select-wrapper" [class.select-wrapper--unstyled]="unstyled" [ngClass]="customClass">
+      <label *ngIf="label && !unstyled" [for]="id">{{ label }}</label>
+      <div class="select-container" [class.select-container--unstyled]="unstyled">
+        <div
+          #trigger
+          class="select-header"
+          [attr.tabindex]="disabled ? -1 : 0"
+          [class.error]="hasError && !unstyled"
+          [class.disabled]="disabled"
+          [class.open]="isOpen"
+          [class.select-header--unstyled]="unstyled"
+          [class.select-header--has-prefix]="hasPrefix"
+           (blur)="handleBlur()"
+          (click)="!disabled && toggleDropdown($event)">
+          <span class="select-prefix" *ngIf="hasPrefix">
+            <ng-content select="[prefix]"></ng-content>
+          </span>
+          <span class="select-placeholder" *ngIf="!getSelectedLabel()">
+            {{ placeholder }}
+          </span>
+          <span class="select-selected" *ngIf="getSelectedLabel()">
+            {{ getSelectedLabel() }}
+          </span>
+          <span class="select-suffix" *ngIf="hasSuffix">
+            <ng-content select="[suffix]"></ng-content>
+          </span>
+          <svg class="select-arrow" [class.open]="isOpen" width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M1 1.5L6 6.5L11 1.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
+      </div>
+      <div *ngIf="hasError && errorMessage && !unstyled" class="field-error">
+        {{ errorMessage }}
+      </div>
+
+      <!-- Hidden container for projected options -->
+      <div style="display: none;">
+        <ng-content></ng-content>
+      </div>
+    </div>
+  `,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => SelectComponent),
+      multi: true
+    }
+  ]
+})
+export class SelectComponent implements ControlValueAccessor, OnDestroy, AfterContentInit {
+  @Input() label = '';
+  @Input() id = '';
+  @Input() placeholder = '';
+  @Input() options: SelectOption[] | any[] = [];
+  @Input() hasError = false;
+  @Input() errorMessage = '';
+  @Input() disabled = false;
+  @Input() unstyled = false;
+  @Input() displayKey: string = 'label'; // Property to display as label
+  @Input() valueKey: string = 'value'; // Property to use as value
+  @Input() customClass: string = ''; // Custom CSS class for styling
+  @ViewChild('trigger', { read: ElementRef }) trigger!: ElementRef;
+  @ContentChildren(OptionComponent) contentOptions!: QueryList<OptionComponent>;
+  @ContentChild(SelectPrefixDirective) prefixDirective!: SelectPrefixDirective;
+  @ContentChild(SelectSuffixDirective) suffixDirective!: SelectSuffixDirective;
+
+  get hasPrefix(): boolean {
+    return !!this.prefixDirective;
+  }
+
+  get hasSuffix(): boolean {
+    return !!this.suffixDirective;
+  }
+
+  value: any = '';
+  isOpen = false;
+  onChange: any = () => {};
+  onTouched: any = () => {};
+  private _usingContentOptions = false;
+
+  private dropdownElement: HTMLElement | null = null;
+  private backdropElement: HTMLElement | null = null;
+  private scrollHandler: (() => void) | null = null;
+  private resizeHandler: (() => void) | null = null;
+
+  constructor(
+    private renderer: Renderer2,
+    @Inject(DOCUMENT) private document: Document
+  ) {}
+
+  ngAfterContentInit(): void {
+    // Determine if using content projection or input options
+    this._usingContentOptions = this.contentOptions && this.contentOptions.length > 0;
+
+    // Subscribe to changes in content options
+    if (this.contentOptions) {
+      this.contentOptions.changes.subscribe(() => {
+        this._usingContentOptions = this.contentOptions.length > 0;
+      });
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.destroyDropdown();
+  }
+
+  @HostListener('keydown.escape')
+onEsc() {
+  this.closeDropdown();
+  this.onTouched();
+}
+
+  handleBlur() {
+    this.onTouched();
+  }
+
+  /**
+   * Get all options (from content or input)
+   */
+  private getAllOptions(): any[] {
+    if (this._usingContentOptions && this.contentOptions) {
+      return this.contentOptions.toArray();
+    }
+    return this.options || [];
+  }
+
+  /**
+   * Get display label from option
+   */
+  getOptionLabel(option: any): string {
+    if (option instanceof OptionComponent) {
+      return option.viewValue;
+    }
+    return option?.[this.displayKey] || '';
+  }
+
+  /**
+   * Get value from option
+   */
+  getOptionValue(option: any): any {
+    if (option instanceof OptionComponent) {
+      return option.value;
+    }
+    return option?.[this.valueKey];
+  }
+
+  /**
+   * Check if option is disabled
+   */
+  isOptionDisabled(option: any): boolean {
+    if (option instanceof OptionComponent) {
+      return option.disabled;
+    }
+    return option?.disabled || false;
+  }
+
+  @HostListener('document:click', ['$event'])
+  onDocumentClick(event: MouseEvent): void {
+    // Close dropdown if click is outside
+    if (this.isOpen && this.dropdownElement && !this.dropdownElement.contains(event.target as Node)) {
+      const triggerElement = this.trigger?.nativeElement;
+      if (triggerElement && !triggerElement.contains(event.target as Node)) {
+        this.closeDropdown();
+      }
+    }
+  }
+
+  toggleDropdown(event: Event): void {
+    event.stopPropagation();
+    if (this.disabled) return;
+
+    if (this.isOpen) {
+      this.closeDropdown();
+    } else {
+      this.openDropdown();
+    }
+  }
+
+  private openDropdown(): void {
+    if (!this.trigger) return;
+
+    // Create backdrop
+    this.backdropElement = this.renderer.createElement('div');
+    this.renderer.addClass(this.backdropElement, 'select-custom-backdrop');
+    this.renderer.listen(this.backdropElement, 'click', () => this.closeDropdown());
+    this.renderer.appendChild(this.document.body, this.backdropElement);
+
+    // Create dropdown
+    this.dropdownElement = this.renderer.createElement('div');
+    this.renderer.addClass(this.dropdownElement, 'select-custom-dropdown');
+    this.renderer.addClass(this.dropdownElement, 'select-overlay-pane');
+
+    // Calculate position
+    const position = this.calculatePosition();
+
+    // Apply positioning styles
+    this.renderer.setStyle(this.dropdownElement, 'position', 'fixed');
+    this.renderer.setStyle(this.dropdownElement, 'left', position.left);
+    this.renderer.setStyle(this.dropdownElement, 'width', position.width);
+    this.renderer.setStyle(this.dropdownElement, 'max-height', position.maxHeight);
+    this.renderer.setStyle(this.dropdownElement, 'z-index', '100000', RendererStyleFlags2.Important);
+
+    if (position.top) {
+      this.renderer.setStyle(this.dropdownElement, 'top', position.top);
+    } else if (position.bottom) {
+      this.renderer.setStyle(this.dropdownElement, 'bottom', position.bottom);
+    }
+
+    // Create dropdown content wrapper
+    const dropdownContent = this.renderer.createElement('div');
+    this.renderer.addClass(dropdownContent, 'select-dropdown');
+
+    // Add options
+    const allOptions = this.getAllOptions();
+    allOptions.forEach(option => {
+      const optionElement = this.createOptionElement(option);
+      this.renderer.appendChild(dropdownContent, optionElement);
+    });
+
+    this.renderer.appendChild(this.dropdownElement, dropdownContent);
+    this.renderer.appendChild(this.document.body, this.dropdownElement);
+
+    this.isOpen = true;
+
+    // Add scroll and resize listeners to reposition dropdown
+    this.addRepositionListeners();
+
+    // Trigger animation
+    setTimeout(() => {
+      if (this.dropdownElement) {
+        this.renderer.addClass(this.dropdownElement, 'select-dropdown-open');
+      }
+    }, 10);
+  }
+
+  private calculatePosition(): DropdownPosition {
+    const triggerElement = this.trigger.nativeElement;
+    const rect = triggerElement.getBoundingClientRect();
+
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const spaceAbove = rect.top;
+    const dropdownMaxHeight = 300;
+    const offsetY = 4;
+
+    const shouldOpenAbove = spaceBelow < 200 && spaceAbove > spaceBelow;
+
+    const position: DropdownPosition = {
+      left: `${rect.left}px`,
+      width: `${rect.width}px`,
+      maxHeight: `${dropdownMaxHeight}px`
+    };
+
+    if (shouldOpenAbove) {
+      position.bottom = `${window.innerHeight - rect.top + offsetY}px`;
+    } else {
+      position.top = `${rect.bottom + offsetY}px`;
+    }
+
+    return position;
+  }
+
+  private addRepositionListeners(): void {
+    // Create handlers
+    const scrollHandler = () => this.updateDropdownPosition();
+    const resizeHandler = () => this.updateDropdownPosition();
+
+    // Add scroll listener to window with capture phase to catch all scroll events
+    window.addEventListener('scroll', scrollHandler, true);
+    this.scrollHandler = () => window.removeEventListener('scroll', scrollHandler, true);
+
+    // Add resize listener
+    window.addEventListener('resize', resizeHandler);
+    this.resizeHandler = () => window.removeEventListener('resize', resizeHandler);
+  }
+
+  private updateDropdownPosition(): void {
+    if (!this.dropdownElement || !this.trigger) return;
+
+    const position = this.calculatePosition();
+
+    // Update position styles
+    this.renderer.setStyle(this.dropdownElement, 'left', position.left);
+    this.renderer.setStyle(this.dropdownElement, 'width', position.width);
+
+    // Remove old top/bottom styles
+    this.renderer.removeStyle(this.dropdownElement, 'top');
+    this.renderer.removeStyle(this.dropdownElement, 'bottom');
+
+    // Apply new top/bottom position
+    if (position.top) {
+      this.renderer.setStyle(this.dropdownElement, 'top', position.top);
+    } else if (position.bottom) {
+      this.renderer.setStyle(this.dropdownElement, 'bottom', position.bottom);
+    }
+  }
+
+  private createOptionElement(option: any): HTMLElement {
+    const optionElement = this.renderer.createElement('div');
+    this.renderer.addClass(optionElement, 'select-option');
+
+    const optionValue = this.getOptionValue(option);
+    const optionLabel = this.getOptionLabel(option);
+    const optionDisabled = this.isOptionDisabled(option);
+
+    if (this.isEmptyValue(optionValue)) {
+      this.renderer.addClass(optionElement, 'select-option-placeholder');
+    }
+
+    if (this.isSelected(optionValue)) {
+      this.renderer.addClass(optionElement, 'selected');
+    }
+
+    if (optionDisabled) {
+      this.renderer.addClass(optionElement, 'disabled');
+    }
+
+    // Option text
+    const textSpan = this.renderer.createElement('span');
+    this.renderer.addClass(textSpan, 'option-text');
+    const text = this.renderer.createText(optionLabel);
+    this.renderer.appendChild(textSpan, text);
+    this.renderer.appendChild(optionElement, textSpan);
+
+    // Check icon for selected option
+    if (this.isSelected(optionValue)) {
+      const svg = this.createCheckIcon();
+      this.renderer.appendChild(optionElement, svg);
+    }
+
+    // Click handler
+    if (!optionDisabled) {
+      this.renderer.listen(optionElement, 'click', (event: Event) => {
+        event.stopPropagation();
+        this.selectOption(option);
+      });
+    }
+
+    return optionElement;
+  }
+
+  private createCheckIcon(): SVGElement {
+    const svg = this.renderer.createElement('svg', 'svg');
+    this.renderer.addClass(svg, 'check-icon');
+    this.renderer.setAttribute(svg, 'width', '14');
+    this.renderer.setAttribute(svg, 'height', '10');
+    this.renderer.setAttribute(svg, 'viewBox', '0 0 10 8');
+    this.renderer.setAttribute(svg, 'fill', 'none');
+    this.renderer.setAttribute(svg, 'xmlns', 'http://www.w3.org/2000/svg');
+
+    const path = this.renderer.createElement('path', 'svg');
+    this.renderer.setAttribute(path, 'd', 'M9 1L3.5 6.5L1 4');
+    this.renderer.setAttribute(path, 'stroke', '#F59100');
+    this.renderer.setAttribute(path, 'stroke-width', '1.6666');
+    this.renderer.setAttribute(path, 'stroke-linecap', 'round');
+    this.renderer.setAttribute(path, 'stroke-linejoin', 'round');
+
+    this.renderer.appendChild(svg, path);
+    return svg;
+  }
+
+  closeDropdown(): void {
+    this.destroyDropdown();
+    this.isOpen = false;
+  }
+
+  private destroyDropdown(): void {
+    // Remove listeners
+    if (this.scrollHandler) {
+      this.scrollHandler();
+      this.scrollHandler = null;
+    }
+
+    if (this.resizeHandler) {
+      this.resizeHandler();
+      this.resizeHandler = null;
+    }
+
+    if (this.dropdownElement) {
+      this.renderer.removeChild(this.document.body, this.dropdownElement);
+      this.dropdownElement = null;
+    }
+
+    if (this.backdropElement) {
+      this.renderer.removeChild(this.document.body, this.backdropElement);
+      this.backdropElement = null;
+    }
+  }
+
+  selectOption(option: any): void {
+    if (this.isOptionDisabled(option)) return;
+
+    this.value = this.getOptionValue(option);
+    this.onChange(this.value);
+    this.onTouched();
+    this.closeDropdown();
+  }
+
+  isSelected(value: any): boolean {
+    return this.value === value;
+  }
+
+  isEmptyValue(value: any): boolean {
+    return value === '' || value === null || value === undefined;
+  }
+
+  getSelectedLabel(): string {
+    const allOptions = this.getAllOptions();
+    const selectedOption = allOptions.find(opt => this.getOptionValue(opt) === this.value);
+    return selectedOption ? this.getOptionLabel(selectedOption) : '';
+  }
+
+  writeValue(value: any): void {
+    this.value = value || '';
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+}

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

@@ -0,0 +1,201 @@
+.snackbar-container {
+  position: fixed;
+  z-index: 999999;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  max-width: 644px;
+  pointer-events: none;
+
+  &--top-right {
+    top: 24px;
+    right: 24px;
+  }
+
+  &--top-left {
+    top: 24px;
+    left: 24px;
+  }
+
+  &--top-center {
+    top: 24px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  &--bottom-right {
+    bottom: 24px;
+    right: 24px;
+  }
+
+  &--bottom-left {
+    bottom: 24px;
+    left: 24px;
+  }
+
+  &--bottom-center {
+    bottom: 24px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  @media (max-width: 640px) {
+    left: 16px !important;
+    right: 16px !important;
+    max-width: none;
+    transform: none !important;
+
+    &--top-right,
+    &--top-left,
+    &--top-center {
+      top: 16px;
+    }
+
+    &--bottom-right,
+    &--bottom-left,
+    &--bottom-center {
+      bottom: 16px;
+    }
+  }
+}
+
+.snackbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  background: #ffffff;
+  pointer-events: auto;
+  min-width: 300px;
+  max-width: 644px;
+  animation: slideIn 300ms ease-out;
+
+  @keyframes slideIn {
+    from {
+      transform: translateY(-100%);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  @media (max-width: 640px) {
+    min-width: auto;
+    max-width: none;
+  }
+
+  &--success {
+    background: #f0fdf4;
+    border: 1px solid #22c55e;
+
+    .snackbar__icon {
+      color: #22c55e;
+    }
+  }
+
+  &--error {
+    background: #FEF3F2;
+    border: 1px solid #F04438;
+
+    .snackbar__icon {
+      color: #F04438;
+    }
+  }
+
+  &--warning {
+    background: #fffbeb;
+    border: 1px solid #f59e0b;
+
+    .snackbar__icon {
+      color: #f59e0b;
+    }
+  }
+
+  &--info {
+    background: #eff6ff;
+    border: 1px solid #3b82f6;
+
+    .snackbar__icon {
+      color: #3b82f6;
+    }
+  }
+
+  &__icon {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+  }
+
+  &__content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__message {
+    margin: 0;
+    line-height: 20px;
+    word-wrap: break-word;
+    font-family: Quicksand, sans-serif;
+    font-weight: 600;
+    font-size: 14px;
+    color: #2E353A;
+  }
+
+  &__action {
+    flex-shrink: 0;
+    padding: 6px 12px;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+    color: inherit;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background-color 0.2s;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.05);
+    }
+
+    &:active {
+      background: rgba(0, 0, 0, 0.1);
+    }
+  }
+
+  &__close {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+    color: #2E353A;
+    cursor: pointer;
+    transition: all 0.2s;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.05);
+      color: #1f2937;
+    }
+
+    &:active {
+      background: rgba(0, 0, 0, 0.1);
+    }
+
+    svg {
+      width: 14px;
+      height: 14px;
+    }
+  }
+}