@up_si_vale/sivale-componentes-angular 1.0.0 → 1.0.2

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

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

@@ -1,201 +0,0 @@
-.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;
-    }
-  }
-}