angular-matecu 4.0.7 → 4.1.0

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

@@ -0,0 +1,336 @@
+import { CommonModule } from '@angular/common';
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  OnChanges,
+  SimpleChanges,
+  OnInit,
+  OnDestroy,
+  ElementRef,
+  DoCheck,
+  Injector,
+} from '@angular/core';
+import {
+  ControlValueAccessor,
+  FormsModule,
+  NG_VALUE_ACCESSOR,
+  ReactiveFormsModule,
+  NgControl,
+} from '@angular/forms';
+import { FormControl } from '@angular/forms';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatFormFieldControl } from '@angular/material/form-field';
+import { Observable, startWith, map, Subject, tap, combineLatest, debounceTime } from 'rxjs';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { FocusMonitor } from '@angular/cdk/a11y';
+import {
+  MatecuAutocompleteFilterFn,
+  MatecuAutocompleteOption,
+} from '../../types/matecu-autocomplete';
+
+@Component({
+  selector: 'matecu-autocomplete',
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatAutocompleteModule,
+    MatDividerModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MatProgressSpinnerModule,
+  ],
+  templateUrl: './matecu-autocomplete.html',
+  styleUrls: ['./matecu-autocomplete.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: MatecuAutocomplete,
+      multi: true,
+    },
+    {
+      provide: MatFormFieldControl,
+      useExisting: MatecuAutocomplete,
+    },
+  ],
+})
+export class MatecuAutocomplete
+  implements
+    ControlValueAccessor,
+    MatFormFieldControl<string>,
+    OnChanges,
+    OnInit,
+    OnDestroy,
+    DoCheck
+{
+  @Input() options: MatecuAutocompleteOption[] = [];
+  @Input() allowCreate = false;
+  @Input() loading = false;
+  @Input() readonly = false;
+  @Input() filterFn: MatecuAutocompleteFilterFn = this.createFilterFn();
+  @Input() searchChangeDebounceTime = 300;
+  // MatFormFieldControl inputs
+  @Input()
+  get placeholder(): string {
+    return this._placeholder;
+  }
+  set placeholder(value: string) {
+    this._placeholder = value;
+    this.stateChanges.next();
+  }
+  private _placeholder = '';
+
+  @Input()
+  get required(): boolean {
+    return this._required;
+  }
+  set required(value: boolean) {
+    this._required = coerceBooleanProperty(value);
+    this.stateChanges.next();
+  }
+  private _required = false;
+
+  @Input()
+  get disabled(): boolean {
+    return this._disabled;
+  }
+  set disabled(value: boolean) {
+    this._disabled = coerceBooleanProperty(value);
+    this.setDisabledState(this._disabled);
+    this.stateChanges.next();
+  }
+  private _disabled = false;
+
+  @Input()
+  get value(): string | null {
+    return this.internalValue;
+  }
+  set value(value: string | null) {
+    this.writeValue(value);
+    this.stateChanges.next();
+  }
+
+  @Output() searchChange = new EventEmitter<string>();
+  @Output() create = new EventEmitter<string>();
+  @Output() valueChange = new EventEmitter<string | null>();
+
+  // MatFormFieldControl properties
+  static nextId = 0;
+  readonly stateChanges = new Subject<void>();
+  readonly id = `matecu-autocomplete-${MatecuAutocomplete.nextId++}`;
+  ngControl: NgControl | null = null;
+  focused = false;
+  lastSearchText: string | null = null;
+  readonly controlType = 'matecu-autocomplete';
+  readonly autofilled = false;
+
+  inputControl = new FormControl<string | null>(null);
+  filteredOptions$!: Observable<MatecuAutocompleteOption[]>;
+
+  private internalValue: string | null = null;
+  private focusMonitor: FocusMonitor;
+  private elementRef: ElementRef<HTMLElement>;
+  private injector: Injector;
+  private optionMap = new Map<string, string>();
+
+  private onChange: any = () => {};
+  private onTouched: any = () => {};
+  get empty(): boolean {
+    const isEmpty = this.inputControl.value === '' || !this.inputControl.value;
+    return isEmpty;
+  }
+
+  get shouldLabelFloat(): boolean {
+    const shouldFloat = this.focused || !this.empty;
+    return shouldFloat;
+  }
+
+  get errorState(): boolean {
+    return !!(this.ngControl && this.ngControl.invalid && this.ngControl.touched);
+  }
+  get showCreateOption(): boolean {
+    const value = this.inputControl.value;
+
+    return (
+      this.allowCreate &&
+      typeof value === 'string' &&
+      this.internalValue !== value &&
+      this.options.some((option) => option[1].toLowerCase() === value.toLowerCase()) === false
+    );
+  }
+
+  constructor(focusMonitor: FocusMonitor, elementRef: ElementRef<HTMLElement>, injector: Injector) {
+    this.focusMonitor = focusMonitor;
+    this.elementRef = elementRef;
+    this.injector = injector;
+  }
+
+  ngOnInit() {
+    // Intentar obtener NgControl de forma segura
+    try {
+      this.ngControl = this.injector.get(NgControl, null);
+    } catch (error) {
+      // Ignorar si no se puede obtener NgControl
+      this.ngControl = null;
+    }
+
+    const value$ = this.inputControl.valueChanges.pipe(startWith(this.inputControl.value ?? ''));
+
+    this.filteredOptions$ = combineLatest([value$]).pipe(
+      map(([value]) => this.filter(value ?? '')),
+    );
+
+    this.inputControl.valueChanges
+      .pipe(
+        // Almacena el último valor valido para la búsqueda esto se utiliza para enviar una emición para crear un elemento
+        tap((value) => (this.lastSearchText = value ?? this.lastSearchText)),
+        // CUando se escribe algo se limpian los valores seleccionados para que el usuario pueda seleccionar una opción o crear una nueva
+        tap(() => this.clearValue()),
+        debounceTime(this.searchChangeDebounceTime),
+      )
+      .subscribe((value) => {
+        queueMicrotask(() => {
+          this.searchChange.emit(value ?? '');
+        });
+      });
+
+    this.focusMonitor.monitor(this.elementRef, true).subscribe((focused) => {
+      if (!!focused !== this.focused) {
+        this.focused = !!focused;
+        this.stateChanges.next();
+      }
+    });
+  }
+
+  ngOnDestroy() {
+    this.stateChanges.complete();
+    this.focusMonitor.stopMonitoring(this.elementRef);
+  }
+
+  ngDoCheck() {
+    if (this.ngControl) {
+      const newErrorState = !!(this.ngControl.invalid && this.ngControl.touched);
+      if (newErrorState !== this.errorState) {
+        this.stateChanges.next();
+      }
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['options']) {
+      this.rebuildOptionMap();
+      this.updateInputLabelFromValue();
+      this.stateChanges.next();
+    }
+
+    if (changes['placeholder'] || changes['required'] || changes['disabled']) {
+      this.stateChanges.next();
+    }
+  }
+
+  private filter(search: string): MatecuAutocompleteOption[] {
+    return this.options.filter((option) => this.filterFn(option[1], search));
+  }
+
+  private createFilterFn(): (v1: string, v2: string) => boolean {
+    return (v1: string, v2: string): boolean => {
+      return v1.toLowerCase().includes(v2.toLowerCase());
+    };
+  }
+
+  displayLabel = (value: string | null): string => {
+    if (value === null || value === undefined) return '';
+
+    if (!Array.isArray(this.options)) {
+      return '';
+    }
+    return this.optionMap.get(value) ?? '';
+  };
+
+  onOptionSelected(value: string) {
+    if (!value || this.readonly || this.disabled) {
+      return;
+    }
+    this.internalValue = value;
+    this.inputControl.setValue(value, { emitEvent: false });
+    this.onChange(value);
+    this.onTouched();
+    this.valueChange.emit(value);
+  }
+
+  onCreateClick() {
+    if (
+      !this.lastSearchText ||
+      this.lastSearchText.trim() === '' ||
+      this.options.some(
+        (option) => option[1].toLowerCase() === this.lastSearchText!.toLowerCase(),
+      ) ||
+      this.options.some((option) => option[1].toLowerCase() === this.lastSearchText!.toLowerCase())
+    ) {
+      return;
+    }
+    this.create.emit(this.lastSearchText);
+  }
+
+  private updateInputLabelFromValue() {
+    if (this.internalValue !== null) {
+      const label = this.displayLabel(this.internalValue);
+      this.inputControl.setValue(label, { emitEvent: false });
+    }
+  }
+
+  // ControlValueAccessor
+
+  writeValue(value: string | null): void {
+    this.internalValue = value;
+    this.updateInputLabelFromValue();
+    this.stateChanges.next();
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this._disabled = isDisabled;
+    isDisabled ? this.inputControl.disable() : this.inputControl.enable();
+    this.stateChanges.next();
+  }
+
+  // MatFormFieldControl methods
+  focus(options?: FocusOptions): void {
+    this.elementRef.nativeElement.querySelector('input')?.focus(options);
+  }
+
+  onContainerClick(): void {
+    this.focus();
+  }
+
+  setDescribedByIds(ids: string[]): void {
+    const input = this.elementRef.nativeElement.querySelector('input');
+    if (input) {
+      input.setAttribute('aria-describedby', ids.join(' '));
+    }
+  }
+  private rebuildOptionMap() {
+    this.optionMap.clear();
+
+    for (const [value, label] of this.options ?? []) {
+      this.optionMap.set(value, label);
+    }
+  }
+
+  private clearValue() {
+    this.internalValue = null;
+    this.onChange(null);
+    this.onTouched();
+    this.valueChange.emit(null);
+  }
+}

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

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

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

@@ -0,0 +1,23 @@
+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();
+  });
+});