angular-matecu 4.1.0 → 4.2.0

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

@@ -1,64 +0,0 @@
-@if (loading) {
-
-<mat-progress-spinner matSuffix diameter="20" mode="indeterminate">
-</mat-progress-spinner>
-}
-<mat-chip-grid #chipGrid class="chip-list">
-
-    @for (item of selectedItems(); track item.value) {
-
-    <mat-chip-row [removable]="!disabled && !readonly" (removed)="remove(item.value)"
-        [matTooltip]="showTooltip ? item.label : ''" matTooltipPosition="above">
-
-
-
-        {{ item.label }}
-        @if (!disabled && !readonly) {
-
-        <button matChipRemove aria-label="Remove {{item.label}}">
-            <mat-icon>cancel</mat-icon>
-        </button>
-        }
-
-    </mat-chip-row>
-    }
-
-    <input type="text" matInput [formControl]="searchControl" [matAutocomplete]="auto" (keydown)="onKeyDown($event)"
-        [placeholder]="placeholder" />
-
-</mat-chip-grid>
-
-
-<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selectOption($event.option.value)"
-    class="autocomplete-large-panel" [displayWith]="displayLabel">
-
-    @if (!readonly && !disabled && (enableSelectAll || control.value.length > 0)) {
-    <mat-option>
-        <div style="display: flex; gap: 10px; align-items: center; justify-content: center;  ">
-
-            @if (enableSelectAll) {
-            <div>
-                <button mat-icon-button (click)="selectAll()" [matTooltip]="selectAllLabel">
-                    <mat-icon>select_all</mat-icon>
-                </button>
-            </div>
-
-            }
-            @if (control.value.length > 0) {
-            <div>
-
-                <button mat-icon-button (click)="clearAll()" [matTooltip]="clearAllLabel">
-                    <mat-icon>clear_all</mat-icon>
-                </button>
-            </div>
-            }
-        </div>
-    </mat-option>
-    }
-
-    @for (option of filteredOptions(); track $index) {
-    <mat-option [value]="option">
-        {{ option[1] }}
-    </mat-option>
-    }
-</mat-autocomplete>

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

@@ -1,23 +0,0 @@
-:host {
-  display: inline-block;
-  position: relative;
-  width: 100%;
-
-  input {
-    outline: none;
-    border: none;
-    background-color: transparent;
-    width: 100%;
-  }
-  .clear-all-box {
-    width: 100%;
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-  }
-  mat-option {
-    span {
-      display: block;
-    }
-  }
-}

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

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { MatecuAutocompleteMultiple } from './matecu-autocomplete-multiple';
-
-describe('MatecuAutocompleteMultiple', () => {
-  let component: MatecuAutocompleteMultiple;
-  let fixture: ComponentFixture<MatecuAutocompleteMultiple>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [MatecuAutocompleteMultiple]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(MatecuAutocompleteMultiple);
-    component = fixture.componentInstance;
-    await fixture.whenStable();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

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

@@ -1,284 +0,0 @@
-# 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.