@up_si_vale/sivale-componentes-angular 1.0.0

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

@@ -0,0 +1,487 @@
+import {
+  Component,
+  Input,
+  forwardRef,
+  ViewChild,
+  ElementRef,
+  HostListener,
+  ContentChildren,
+  QueryList,
+  AfterContentInit,
+  OnDestroy,
+  Renderer2,
+  Inject,
+  RendererStyleFlags2
+} from '@angular/core';
+import { CommonModule, DOCUMENT } from '@angular/common';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { OptionComponent } from '../option/option.component';
+
+export interface MultiselectOption {
+  value: any;
+  label: string;
+  icon?: string;
+  disabled?: boolean;
+}
+
+interface DropdownPosition {
+  top?: string;
+  bottom?: string;
+  left: string;
+  width: string;
+  maxHeight: string;
+}
+
+@Component({
+  selector: 'app-multiselect',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, FormsModule],
+  template: `
+    <div class="multiselect-wrapper" [ngClass]="customClass">
+      <label *ngIf="label" [for]="id">{{ label }}</label>
+      <div class="multiselect-container">
+        <div
+          #trigger
+          class="multiselect-header"
+          (click)="toggleDropdown($event)"
+          [class.disabled]="disabled"
+          [class.open]="isOpen"
+          [class.error]="hasError">
+          <span class="multiselect-placeholder" *ngIf="getSelectedCount() === 0">
+            {{ placeholder || 'Selecciona uno o más...' }}
+          </span>
+          <span class="multiselect-selected" *ngIf="getSelectedCount() > 0">
+            {{ getSelectedLabels() }}
+          </span>
+          <svg class="multiselect-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" class="field-error">
+        {{ errorMessage }}
+      </div>
+
+      <!-- Hidden container for projected options -->
+      <div style="display: none;">
+        <ng-content></ng-content>
+      </div>
+    </div>
+  `,
+  styleUrls: ['./multiselect.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => MultiselectComponent),
+      multi: true
+    }
+  ]
+})
+export class MultiselectComponent implements ControlValueAccessor, AfterContentInit, OnDestroy {
+  @Input() label = '';
+  @Input() id = '';
+  @Input() placeholder = '';
+  @Input() options: MultiselectOption[] | any[] = [];
+  @Input() hasError = false;
+  @Input() errorMessage = '';
+  @Input() disabled = 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>;
+
+  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();
+  }
+
+  /**
+   * Get all options (from content or input)
+   */
+  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, 'multiselect-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, 'multiselect-custom-dropdown');
+    this.renderer.addClass(this.dropdownElement, 'multiselect-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, 'multiselect-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, 'multiselect-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 labelElement = this.renderer.createElement('label');
+    this.renderer.addClass(labelElement, 'multiselect-option');
+
+    const optionValue = this.getOptionValue(option);
+    const optionLabel = this.getOptionLabel(option);
+    const optionDisabled = this.isOptionDisabled(option);
+
+    if (this.isSelected(optionValue)) {
+      this.renderer.addClass(labelElement, 'selected');
+    }
+
+    if (optionDisabled) {
+      this.renderer.addClass(labelElement, 'disabled');
+    }
+
+    // Stop propagation on label click
+    this.renderer.listen(labelElement, 'click', (event: Event) => {
+      event.stopPropagation();
+    });
+
+    // Checkbox container
+    const checkboxDiv = this.renderer.createElement('div');
+    this.renderer.addClass(checkboxDiv, 'option-checkbox');
+
+    // Hidden native checkbox
+    const checkbox = this.renderer.createElement('input');
+    this.renderer.setAttribute(checkbox, 'type', 'checkbox');
+    this.renderer.setProperty(checkbox, 'checked', this.isSelected(optionValue));
+    if (optionDisabled) {
+      this.renderer.setProperty(checkbox, 'disabled', true);
+    }
+
+    // Custom checkbox span
+    const customCheckbox = this.renderer.createElement('span');
+    this.renderer.addClass(customCheckbox, 'checkbox-custom');
+    if (this.isSelected(optionValue)) {
+      this.renderer.addClass(customCheckbox, 'checked');
+    }
+
+    // Check icon
+    if (this.isSelected(optionValue)) {
+      const svg = this.createCheckIcon();
+      this.renderer.appendChild(customCheckbox, svg);
+    }
+
+    // Listen to change event
+    this.renderer.listen(checkbox, 'change', (event: Event) => {
+      event.stopPropagation();
+
+      // Toggle the value
+      this.toggleOption(option);
+
+      // Update visual state
+      const isNowSelected = this.isSelected(optionValue);
+      this.renderer.setProperty(checkbox, 'checked', isNowSelected);
+
+      if (isNowSelected) {
+        this.renderer.addClass(labelElement, 'selected');
+        this.renderer.addClass(customCheckbox, 'checked');
+        // Add check icon if not present
+        if (!customCheckbox.querySelector('.check-icon')) {
+          const svg = this.createCheckIcon();
+          this.renderer.appendChild(customCheckbox, svg);
+        }
+      } else {
+        this.renderer.removeClass(labelElement, 'selected');
+        this.renderer.removeClass(customCheckbox, 'checked');
+        // Remove check icon
+        const existingIcon = customCheckbox.querySelector('.check-icon');
+        if (existingIcon) {
+          this.renderer.removeChild(customCheckbox, existingIcon);
+        }
+      }
+    });
+
+    this.renderer.appendChild(checkboxDiv, checkbox);
+    this.renderer.appendChild(checkboxDiv, customCheckbox);
+    this.renderer.appendChild(labelElement, checkboxDiv);
+
+    // 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(labelElement, textSpan);
+
+    return labelElement;
+  }
+
+  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;
+    this.onTouched();
+  }
+
+  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;
+    }
+  }
+
+  toggleOption(option: any): void {
+    if (this.isOptionDisabled(option)) return;
+
+    const optionValue = this.getOptionValue(option);
+    const index = this.value.indexOf(optionValue);
+    if (index > -1) {
+      this.value = this.value.filter(v => v !== optionValue);
+    } else {
+      this.value = [...this.value, optionValue];
+    }
+    this.onChange(this.value);
+  }
+
+  isSelected(value: any): boolean {
+    return this.value.includes(value);
+  }
+
+  getSelectedCount(): number {
+    return this.value.length;
+  }
+
+  getSelectedLabels(): string {
+    const allOptions = this.getAllOptions();
+    const selectedOptions = allOptions.filter(opt => this.isSelected(this.getOptionValue(opt)));
+    return selectedOptions.map(opt => this.getOptionLabel(opt)).join(', ');
+  }
+
+  writeValue(value: any): void {
+    this.value = Array.isArray(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/option/option.component.ts

@@ -0,0 +1,45 @@
+import { Component, Input, HostBinding, ChangeDetectionStrategy, ElementRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-option',
+  standalone: true,
+  imports: [CommonModule],
+  template: `<ng-content></ng-content>`,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    'class': 'app-option',
+    '[class.disabled]': 'disabled',
+    '[class.selected]': 'selected'
+  }
+})
+export class OptionComponent {
+  @Input() value: any;
+  @Input() disabled: boolean = false;
+
+  @HostBinding('class.selected')
+  selected: boolean = false;
+
+  @HostBinding('class.app-option')
+  readonly optionClass = true;
+
+  // Internal property to store text content
+  private _viewValue: string = '';
+
+  get viewValue(): string {
+    return this._viewValue || this.getTextContent();
+  }
+
+  set viewValue(value: string) {
+    this._viewValue = value;
+  }
+
+  constructor(private elementRef: ElementRef) {}
+
+  /**
+   * Get the text content from the element
+   */
+  getTextContent(): string {
+    return this.elementRef.nativeElement.textContent?.trim() || '';
+  }
+}

package/src/lib/molecules/phone-input/phone-input.component.scss

@@ -0,0 +1,78 @@
+.svu-phone-input {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin-bottom: 6px;
+  padding: 0 4px;
+
+  &__label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-family: 'Quicksand', sans-serif;
+    font-weight: 500;
+    font-size: 14px;
+    color: #585D61;
+  }
+
+  &__field {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    min-height: 44px;
+    height: 44px;
+    border: 1px solid #EAECF5;
+    box-shadow: 0 1px 2px 0 #A1AFEC66;
+    border-radius: 8px;
+    transition: all 0.2s ease;
+    background: white;
+
+    &:hover {
+      border-color: #FBD399;
+    }
+
+    &:focus-within {
+      border-color: #FBD399;
+      box-shadow: 0 0 0 4px #FFE8C8, 0 1px 2px 0 #0A0D120D;
+    }
+  }
+
+  &__country {
+    flex: 0;
+    width: 120px;
+    display: flex;
+    align-items: stretch;
+    min-width: 64px;
+  }
+
+  &__number {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: stretch;
+  }
+
+  // Error state
+  &.svu-phone-input--error &__field {
+    border-color: #DC3545 !important;
+
+    &:focus-within {
+      box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1) !important;
+    }
+  }
+
+  &__error {
+    color: #F04438;
+    font-size: 0.875rem;
+    margin-top: 0.25rem;
+    font-family: 'Quicksand', sans-serif;
+  }
+}
+
+// Responsive adjustments
+@media (max-width: 640px) {
+  .svu-phone-input {
+    &__country {
+      width: 100px;
+    }
+  }
+}

package/src/lib/molecules/phone-input/phone-input.component.ts

@@ -0,0 +1,43 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { InputComponent } from '../../atoms/input/input.component';
+import { SelectComponent, SelectOption } from '../select/select.component';
+
+export interface PhoneValue {
+  countryCode: string;
+  number: string;
+}
+
+@Component({
+  selector: 'app-phone-input',
+  standalone: true,
+  imports: [CommonModule, InputComponent, SelectComponent],
+  template: `
+    <div class="svu-phone-input" [class.svu-phone-input--error]="hasError">
+      <label *ngIf="label" class="svu-phone-input__label">
+        {{ label }}
+      </label>
+
+      <div class="svu-phone-input__field">
+        <div class="svu-phone-input__country">
+          <ng-content select="[countrySelect]"></ng-content>
+        </div>
+
+        <div class="svu-phone-input__number">
+          <ng-content select="[phoneInput]"></ng-content>
+        </div>
+      </div>
+
+      <span *ngIf="hasError && errorMessage" class="svu-phone-input__error">
+        {{ errorMessage }}
+      </span>
+    </div>
+  `,
+  styleUrls: ['./phone-input.component.scss']
+})
+export class PhoneInputComponent {
+  @Input() label: string = 'Teléfono';
+  @Input() hasError: boolean = false;
+  @Input() errorMessage: string = '';
+}
+