angular-matecu 4.0.7 → 4.1.0

package/src/lib/components/matecu-autocomplete-multiple/matecu-autocomplete-multiple.ts

@@ -0,0 +1,314 @@
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  forwardRef,
+  OnDestroy,
+  signal,
+  computed,
+  effect,
+  inject,
+  OnInit,
+  Injector,
+} from '@angular/core';
+
+import {
+  ControlValueAccessor,
+  NG_VALUE_ACCESSOR,
+  FormControl,
+  ReactiveFormsModule,
+} from '@angular/forms';
+
+import { MatFormFieldControl } from '@angular/material/form-field';
+import { NgControl } from '@angular/forms';
+import { Subject } from 'rxjs';
+import { CdkDragDrop, DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { CdkFixedSizeVirtualScroll, ScrollingModule } from '@angular/cdk/scrolling';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
+
+import { ViewChild } from '@angular/core';
+import { MatAutocompleteTrigger } from '@angular/material/autocomplete';
+import { MatButtonModule } from '@angular/material/button';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import {
+  MatecuAutocompleteFilterFn,
+  MatecuAutocompleteOption,
+} from '../../types/matecu-autocomplete';
+
+@Component({
+  selector: 'matecu-autocomplete-multiple',
+  standalone: true,
+  imports: [
+    ReactiveFormsModule,
+    MatChipsModule,
+    DragDropModule,
+    MatIconModule,
+    MatProgressSpinnerModule,
+    MatAutocompleteModule,
+    ScrollingModule,
+    MatButtonModule,
+    MatTooltipModule,
+  ],
+  templateUrl: './matecu-autocomplete-multiple.html',
+  styleUrls: ['./matecu-autocomplete-multiple.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => MatecuAutocompleteMultiple),
+      multi: true,
+    },
+    {
+      provide: MatFormFieldControl,
+      useExisting: MatecuAutocompleteMultiple,
+    },
+  ],
+})
+export class MatecuAutocompleteMultiple
+  implements ControlValueAccessor, MatFormFieldControl<string[]>, OnDestroy, OnInit
+{
+  static nextId = 0;
+
+  // ================= INPUTS =================
+
+  @Input() placeholder = '';
+  @Input() loading = false;
+  @Input() searchChangeDebounceTime = 300;
+  @Input() enableSelectAll = true;
+  @Input() readonly = false;
+  @Input() selectAllLabel = 'Select All';
+  @Input() clearAllLabel = 'Clear All';
+  @Input() showTooltip = true;
+  @Input() filterFn: MatecuAutocompleteFilterFn = this.createFilterFn();
+  private _options = signal<MatecuAutocompleteOption[]>([]);
+
+  @Input({ required: true })
+  set options(value: MatecuAutocompleteOption[]) {
+    this._options.set(value ?? []);
+  }
+
+  get options() {
+    return this._options();
+  }
+
+  // ================= OUTPUT =================
+
+  @Output() searchChange = new EventEmitter<string>();
+
+  // ================= INTERNAL CONTROL =================
+
+  control = new FormControl<string[]>([], { nonNullable: true });
+  controlValue$ = toSignal(this.control.valueChanges);
+  searchControl = new FormControl<string>('', { nonNullable: true });
+  @ViewChild(MatAutocompleteTrigger)
+  autocompleteTrigger!: MatAutocompleteTrigger;
+
+  // ================= SIGNALS =================
+
+  readonly searchText = signal<string>(''); // 🔥 AHORA SÍ existe correctamente
+
+  readonly filteredOptions = computed(() => {
+    const filter = this.searchText();
+
+    return this._options().filter(
+      (o) => this.filterFn(o[1], filter) && !this.control.value.includes(o[0]),
+    );
+  });
+
+  readonly selectedItems = computed(() => {
+    const values = this.controlValue$() ?? [];
+    return values.map((v) => {
+      const found = this._options().find((o) => o[0] === v);
+      return {
+        value: v,
+        label: found ? found[1] : v,
+      };
+    });
+  });
+
+  // ================= FORM FIELD CONTROL =================
+
+  stateChanges = new Subject<void>();
+  focused = false;
+  controlType = 'autocomplete-multiple';
+  id = `autocomplete-multiple-${MatecuAutocompleteMultiple.nextId++}`;
+  describedBy = '';
+  disabled = false;
+  required = false;
+  errorState = false;
+  private injector: Injector;
+  ngControl: NgControl | null = null;
+
+  get empty() {
+    return this.control.value.length === 0;
+  }
+
+  get shouldLabelFloat() {
+    return true;
+  }
+
+  // ================= CONSTRUCTOR =================
+
+  constructor(injector: Injector) {
+    this.injector = injector;
+    // Debounce search
+    let timeout: any;
+
+    this.searchControl.valueChanges.pipe(takeUntilDestroyed()).subscribe((value) => {
+      this.searchText.set(value ?? '');
+    });
+    this.control.valueChanges.pipe(takeUntilDestroyed()).subscribe((value) => {
+      this.onChange(value);
+      this.stateChanges.next();
+    });
+    effect(() => {
+      const value = this.searchText();
+
+      clearTimeout(timeout);
+
+      timeout = setTimeout(() => {
+        this.searchChange.emit(value);
+      }, this.searchChangeDebounceTime);
+    });
+  }
+  value: string[] | null = null;
+  autofilled?: boolean | undefined;
+  userAriaDescribedBy?: string | undefined;
+  disableAutomaticLabeling?: boolean | undefined;
+  describedByIds?: string[] | undefined;
+
+  ngOnInit(): void {
+    try {
+      this.ngControl = this.injector.get(NgControl, null);
+    } catch (error) {
+      // Ignorar si no se puede obtener NgControl
+      this.ngControl = null;
+    }
+    // Propagar cambios del FormControl interno
+  }
+  // ================= AUTOCOMPLETE =================
+
+  selectOption(option: [string, string]) {
+    if (this.readonly || this.disabled) return;
+    if (!Array.isArray(option)) return;
+    if (!this.control.value.includes(option[0])) {
+      this.control.setValue([...this.control.value, option[0]]);
+    }
+
+    // limpiar input correctamente
+    this.searchControl.setValue('');
+    this.searchText.set('');
+
+    // cerrar panel
+    this.autocompleteTrigger.closePanel();
+  }
+  displayLabel(option: [string, string]): string {
+    return Array.isArray(option) ? option[1] : '';
+  }
+
+  // ================= CHIP ACTIONS =================
+
+  remove(value: string) {
+    if (this.readonly || this.disabled) return;
+
+    this.control.setValue(this.control.value.filter((v) => v !== value));
+  }
+
+  selectAll() {
+    if (this.readonly || this.disabled) return;
+
+    const allValues = this._options().map((o) => o[0]);
+
+    this.control.setValue([...new Set([...this.control.value, ...allValues])]);
+
+    this.searchControl.setValue('');
+    this.searchText.set('');
+
+    this.autocompleteTrigger.closePanel();
+  }
+
+  clearAll(): void {
+    if (this.disabled || this.readonly) return;
+
+    if (this.control.value.length === 0) return;
+
+    this.control.setValue([]);
+    this.searchControl.setValue('');
+    this.searchText.set('');
+
+    this.autocompleteTrigger?.closePanel();
+  }
+
+  // ================= DRAG & DROP =================
+
+  drop(event: CdkDragDrop<any>) {
+    if (this.disabled || this.readonly) return;
+
+    const current = [...this.control.value];
+    moveItemInArray(current, event.previousIndex, event.currentIndex);
+    this.control.setValue(current);
+  }
+
+  // ================= KEYBOARD =================
+
+  onKeyDown(event: KeyboardEvent) {
+    if (this.readonly || this.disabled) return;
+
+    if (event.key === 'Backspace' && !this.searchText() && this.control.value.length > 0) {
+      const updated = [...this.control.value];
+      updated.pop();
+      this.control.setValue(updated);
+    }
+  }
+
+  // ================= CVA =================
+
+  onChange: (value: string[]) => void = () => {};
+  onTouched: () => void = () => {};
+
+  writeValue(value: string[] | null): void {
+    this.control.setValue(value ?? [], { emitEvent: false });
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+
+    isDisabled
+      ? this.control.disable({ emitEvent: false })
+      : this.control.enable({ emitEvent: false });
+
+    this.stateChanges.next();
+  }
+
+  setDescribedByIds(ids: string[]): void {
+    this.describedBy = ids.join(' ');
+  }
+
+  onContainerClick() {}
+
+  ngOnDestroy() {
+    this.stateChanges.complete();
+  }
+  trackByValue = (_: number, item: [string, string]) => item[0];
+  openPanel() {
+    this.autocompleteTrigger.openPanel();
+    setTimeout(() => this.autocompleteTrigger.updatePosition());
+  }
+  private createFilterFn(): (v1: string, v2: string) => boolean {
+    return (v1: string, v2: string): boolean => {
+      return v1.toLowerCase().includes(v2.toLowerCase());
+    };
+  }
+}

package/src/lib/components/matecu-file-input/matecu-file-input-customization.md

@@ -0,0 +1,284 @@
+# Matecu File Input - CSS Customization Guide
+
+## 🎨 Overview
+
+The Matecu File Input component uses CSS custom properties (variables) to make theming and customization easy. All variables use the `--matecu-file-input-*` namespace to prevent conflicts with other components.
+
+## 🔧 Available CSS Variables
+
+### Color Palette
+
+```css
+:root {
+  /* Base Colors */
+  --matecu-file-input-color-primary: #4f46e5;
+  --matecu-file-input-color-primary-hover: #4338ca;
+  --matecu-file-input-color-success: #10b981;
+  --matecu-file-input-color-error: #ef4444;
+  --matecu-file-input-color-error-hover: #dc2626;
+  --matecu-file-input-color-loading: #8b5cf6;
+  --matecu-file-input-color-disabled: #9ca3af;
+}
+```
+
+### Border Colors
+
+```css
+:root {
+  --matecu-file-input-border-default: #e1e5e9;
+  --matecu-file-input-border-hover: var(--matecu-file-input-color-primary);
+  --matecu-file-input-border-success: var(--matecu-file-input-color-success);
+  --matecu-file-input-border-error: var(--matecu-file-input-color-error);
+  --matecu-file-input-border-loading: var(--matecu-file-input-color-loading);
+  --matecu-file-input-border-separator: #e5e7eb;
+}
+```
+
+### Background Colors
+
+```css
+:root {
+  --matecu-file-input-bg-default: #fafbfc;
+  --matecu-file-input-bg-hover: #f8faff;
+  --matecu-file-input-bg-drag-over: #eef2ff;
+  --matecu-file-input-bg-disabled: #f5f5f5;
+  --matecu-file-input-bg-success: #f0fdf4;
+  --matecu-file-input-bg-error: #fef2f2;
+  --matecu-file-input-bg-loading: #faf5ff;
+  --matecu-file-input-bg-surface: #ffffff;
+  --matecu-file-input-bg-surface-alt: #f3f4f6;
+}
+```
+
+### Text Colors
+
+```css
+:root {
+  --matecu-file-input-text-primary: #111827;
+  --matecu-file-input-text-secondary: #374151;
+  --matecu-file-input-text-muted: #6b7280;
+  --matecu-file-input-text-disabled: #9ca3af;
+  --matecu-file-input-text-on-primary: #ffffff;
+  --matecu-file-input-text-error: #dc2626;
+}
+```
+
+### Button Colors
+
+```css
+:root {
+  --matecu-file-input-button-primary-bg: var(--matecu-file-input-color-primary);
+  --matecu-file-input-button-primary-bg-hover: var(--matecu-file-input-color-primary-hover);
+  --matecu-file-input-button-primary-text: var(--matecu-file-input-text-on-primary);
+  --matecu-file-input-button-danger-bg: var(--matecu-file-input-color-error);
+  --matecu-file-input-button-danger-bg-hover: var(--matecu-file-input-color-error-hover);
+  --matecu-file-input-button-danger-text: var(--matecu-file-input-text-on-primary);
+  --matecu-file-input-button-disabled-bg: var(--matecu-file-input-color-disabled);
+}
+```
+
+### Design System
+
+```css
+:root {
+  /* Shadows */
+  --matecu-file-input-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --matecu-file-input-shadow-md: 0 1px 3px rgba(0, 0, 0, 0.1);
+
+  /* Border Radius */
+  --matecu-file-input-border-radius-sm: 4px;
+  --matecu-file-input-border-radius-md: 6px;
+  --matecu-file-input-border-radius-lg: 8px;
+  --matecu-file-input-border-radius-xl: 12px;
+
+  /* Border Width */
+  --matecu-file-input-border-width: 2px;
+
+  /* Spinner */
+  --matecu-file-input-spinner-track: #e5e7eb;
+  --matecu-file-input-spinner-fill: var(--matecu-file-input-color-loading);
+}
+```
+
+## 🎯 Customization Examples
+
+### Dark Theme
+
+```css
+.dark-theme {
+  --matecu-file-input-color-primary: #818cf8;
+  --matecu-file-input-color-primary-hover: #6366f1;
+
+  --matecu-file-input-bg-default: #1f2937;
+  --matecu-file-input-bg-hover: #374151;
+  --matecu-file-input-bg-surface: #111827;
+  --matecu-file-input-bg-surface-alt: #1f2937;
+
+  --matecu-file-input-text-primary: #f9fafb;
+  --matecu-file-input-text-secondary: #e5e7eb;
+  --matecu-file-input-text-muted: #9ca3af;
+
+  --matecu-file-input-border-default: #374151;
+  --matecu-file-input-border-separator: #374151;
+}
+```
+
+### Brand Colors (Blue Theme)
+
+```css
+.blue-theme {
+  --matecu-file-input-color-primary: #3b82f6;
+  --matecu-file-input-color-primary-hover: #2563eb;
+  --matecu-file-input-color-success: #059669;
+  --matecu-file-input-color-error: #dc2626;
+
+  --matecu-file-input-bg-hover: #dbeafe;
+  --matecu-file-input-bg-drag-over: #bfdbfe;
+}
+```
+
+### Green Theme
+
+```css
+.green-theme {
+  --matecu-file-input-color-primary: #059669;
+  --matecu-file-input-color-primary-hover: #047857;
+
+  --matecu-file-input-bg-hover: #d1fae5;
+  --matecu-file-input-bg-drag-over: #a7f3d0;
+}
+```
+
+### Minimal Theme
+
+```css
+.minimal-theme {
+  --matecu-file-input-border-radius-sm: 2px;
+  --matecu-file-input-border-radius-md: 4px;
+  --matecu-file-input-border-radius-lg: 6px;
+  --matecu-file-input-border-width: 1px;
+
+  --matecu-file-input-shadow-sm: none;
+  --matecu-file-input-shadow-md: none;
+}
+```
+
+### High Contrast Theme
+
+```css
+.high-contrast-theme {
+  --matecu-file-input-color-primary: #0066cc;
+  --matecu-file-input-color-error: #d93025;
+  --matecu-file-input-color-success: #137333;
+
+  --matecu-file-input-border-width: 3px;
+  --matecu-file-input-text-primary: #000000;
+  --matecu-file-input-bg-surface: #ffffff;
+}
+```
+
+## 📱 Implementation
+
+### Global Customization
+
+```css
+/* In your global styles.css */
+:root {
+  --matecu-file-input-color-primary: #your-brand-color;
+  --matecu-file-input-border-radius-md: 12px;
+  /* ... other customizations */
+}
+```
+
+### Component-Specific Customization
+
+```css
+/* Target specific component instance */
+.my-custom-file-input {
+  --matecu-file-input-color-primary: #ff6b35;
+  --matecu-file-input-bg-hover: #ffebe6;
+}
+```
+
+```html
+<!-- HTML -->
+<matecu-file-input class="my-custom-file-input"> </matecu-file-input>
+```
+
+### Angular Component Customization
+
+```typescript
+// In your component
+@Component({
+  selector: 'app-upload',
+  template: ` <matecu-file-input class="branded-upload" [multiple]="true"> </matecu-file-input> `,
+  styles: [
+    `
+      .branded-upload {
+        --matecu-file-input-color-primary: #your-primary-color;
+        --matecu-file-input-color-success: #your-success-color;
+        --matecu-file-input-border-radius-lg: 16px;
+      }
+    `,
+  ],
+})
+export class UploadComponent {}
+```
+
+### SCSS/Sass Variables
+
+```scss
+// Define your theme variables
+$primary-color: #6366f1;
+$success-color: #10b981;
+$border-radius: 8px;
+
+// Apply to the component
+.my-file-input {
+  --matecu-file-input-color-primary: #{$primary-color};
+  --matecu-file-input-color-success: #{$success-color};
+  --matecu-file-input-border-radius-lg: #{$border-radius};
+}
+```
+
+## 🔍 Best Practices
+
+1. **Always use the full variable name** to avoid conflicts
+2. **Test in different states** (hover, error, success, loading)
+3. **Ensure sufficient contrast** for accessibility
+4. **Consider responsive behavior** when customizing sizes
+5. **Use semantic color names** in your design system
+6. **Document your customizations** for team consistency
+
+## 🎨 Design System Integration
+
+The component variables are designed to integrate seamlessly with popular design systems:
+
+- **Tailwind CSS**: Map to your Tailwind config colors
+- **Material Design**: Use Material color palette
+- **Bootstrap**: Integrate with Bootstrap theme colors
+- **Custom Design System**: Map to your brand colors and spacing
+
+## 🚀 Advanced Customization
+
+For more complex customizations, you can also override specific component styles while respecting the CSS variable system:
+
+```css
+.advanced-file-input {
+  /* Use variables for consistency */
+  --matecu-file-input-color-primary: #your-color;
+
+  /* Additional custom styles */
+  .file-input-container {
+    backdrop-filter: blur(10px);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  }
+
+  .select-button {
+    font-size: 18px;
+    padding: 16px 32px;
+  }
+}
+```
+
+This approach ensures your customizations work with future component updates while maintaining design consistency.