angular-matecu 4.1.0 → 4.2.0

package/src/lib/components/matecu-alert-dialog/matecu-alert-dialog.component.spec.ts

@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { MatecuAlertDialogComponent } from './matecu-alert-dialog.component';
-
-describe('MatecuAlertDialogComponent', () => {
-  let component: MatecuAlertDialogComponent;
-  let fixture: ComponentFixture<MatecuAlertDialogComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ MatecuAlertDialogComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(MatecuAlertDialogComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/components/matecu-alert-dialog/matecu-alert-dialog.component.ts

@@ -1,53 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, Inject, OnInit } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
-import { MatIconModule } from '@angular/material/icon';
-import { MatecuAlertDialogData } from '../../types/matecu-alert-dialog';
-import { MatecuAlertBoxComponent } from '../matecu-alert-box/matecu-alert-box.component';
-@Component({
-  selector: 'matecu-alert-dialog',
-  templateUrl: './matecu-alert-dialog.component.html',
-  styleUrls: ['./matecu-alert-dialog.component.scss'],
-  standalone: true,
-  imports: [CommonModule, MatDialogModule, MatIconModule, MatecuAlertBoxComponent, MatButtonModule]
-})
-export class MatecuAlertDialogComponent implements OnInit {
-  hasTitle = false;
-  hasDismissBtn = false;
-  hasActionBtn = false;
-  showActions = false;
-  constructor(
-    @Inject(MAT_DIALOG_DATA) public dialogData: MatecuAlertDialogData,
-    public dialogRef: MatDialogRef<MatecuAlertDialogComponent>
-  ) {
-    this.setHasTitle();
-    this.setHasDismissBtn();
-    this.setHasActionBtn();
-    this.setShowActions();
-  }
-
-  ngOnInit(): void { }
-
-  activateAction(): void {
-    this.dialogRef.close(true);
-  }
-
-  private setHasTitle(): void {
-    this.hasTitle = this.isValidString(this.dialogData.title);
-  }
-  private setHasDismissBtn(): void {
-    this.hasDismissBtn = this.isValidString(this.dialogData.dismissText);
-  }
-
-  private setHasActionBtn(): void {
-    this.hasActionBtn = this.isValidString(this.dialogData.action);
-  }
-  private setShowActions(): void {
-    this.showActions = this.hasActionBtn || this.hasDismissBtn;
-  }
-  private isValidString(str: string | null | undefined): boolean {
-    const isValid = typeof str === 'string' && str.trim().length > 0;
-    return isValid;
-  }
-}

package/src/lib/components/matecu-alert-snack-bar/matecu-alert-snack-bar.component.html

@@ -1,10 +0,0 @@
-<div>
-    <strong>{{title}}</strong> &nbsp;
-    <span>{{message}}</span>
-</div>
-@if(action?.length){
-
-<div>
-    <button mat-button color="accent" (click)="dismiss()">{{action}}</button>
-</div>
-}

package/src/lib/components/matecu-alert-snack-bar/matecu-alert-snack-bar.component.scss

@@ -1,34 +0,0 @@
-:host.matecu-alert-snackbar {
-    display: flex;
-    align-items: center;
-    > * {
-        &:not(:first-child) {
-            margin-left: 10px;
-            
-        }
-
-    }
-    &--success {
-        strong {
-
-            color: rgb(32, 219, 32);
-        }
-      }
-      &--danger {
-        strong {
-            color: red;
-        }
-      }
-      &--warning {
-        strong {
-            color: orange;
-        }
-      }
-      &--info {
-        strong {
-            color: rgb(7, 160, 237)
-        }
-      }
-  
-   
-}

package/src/lib/components/matecu-alert-snack-bar/matecu-alert-snack-bar.component.spec.ts

@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { MatecuAlertSnackBarComponent } from './matecu-alert-snack-bar.component';
-
-describe('MatecuAlertSnackBarComponent', () => {
-  let component: MatecuAlertSnackBarComponent;
-  let fixture: ComponentFixture<MatecuAlertSnackBarComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ MatecuAlertSnackBarComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(MatecuAlertSnackBarComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/components/matecu-alert-snack-bar/matecu-alert-snack-bar.component.ts

@@ -1,45 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, HostBinding, Inject, OnInit } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatSnackBarModule, MatSnackBarRef, MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';
-import { MatecuAlertSnackBarData } from '../../types/matecu-alert-snackbar';
-import { MatecuAlertBoxType } from '../../types/matecu-altert-box-type';
-
-@Component({
-  selector: 'matecu-alert-snack-bar',
-  templateUrl: './matecu-alert-snack-bar.component.html',
-  styleUrls: ['./matecu-alert-snack-bar.component.scss'],
-  standalone: true,
-  imports: [CommonModule, MatButtonModule, MatSnackBarModule]
-})
-export class MatecuAlertSnackBarComponent {
-
-  title: string;
-  message: string;
-  action?: string;
-  classNameBase = 'matecu-alert-snackbar';
-  alertColor!: MatecuAlertBoxType;
-  get color(): MatecuAlertBoxType {
-    return this.alertColor;
-  }
-  set color(value: MatecuAlertBoxType) {
-    this.alertColor = value;
-    this.className = `${this.classNameBase} ${this.classNameBase}--${value}`;
-  }
-  @HostBinding('class') className = this.classNameBase;
-  constructor(
-    @Inject(MAT_SNACK_BAR_DATA) public data: MatecuAlertSnackBarData,
-    private snackBarRef: MatSnackBarRef<MatecuAlertSnackBarComponent>) {
-    this.title = data.title;
-    this.message = data.message;
-    this.action = data.action;
-    this.color = data.type;
-
-  }
-
-  dismiss(): void {
-    this.snackBarRef.dismissWithAction();
-  }
-
-
-}

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

@@ -1,36 +0,0 @@
-<input matInput type="text" matInput [formControl]="inputControl" [matAutocomplete]="auto" [class.loading]="loading"
-    [disabled]="disabled" [readonly]="readonly" />
-
-
-<mat-autocomplete #auto="matAutocomplete" (optionSelected)="onOptionSelected($event.option.value)"
-    [displayWith]="displayLabel">
-
-    @for (option of filteredOptions$ | async; track $index) {
-
-    <mat-option [value]="option[0]">
-        {{ option[1] }}
-    </mat-option>
-
-    }
-
-    <!-- Crear nuevo -->
-    @if(allowCreate){
-
-    <mat-divider></mat-divider>
-
-    @if(showCreateOption ){
-    <mat-option (click)="onCreateClick()" class="create-option">
-        <span>➕</span><span>" {{ inputControl.value }}"</span>
-
-    </mat-option>
-    }
-    }
-
-</mat-autocomplete>
-
-<!-- Spinner -->
-@if(loading){
-<mat-progress-spinner class="loading-spinner" diameter="20" mode="indeterminate"
-    style="position:absolute; right:10px; top:50%; transform:translateY(-50%);">
-</mat-progress-spinner>
-}

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

@@ -1,56 +0,0 @@
-:host {
-  display: block;
-  position: relative;
-  box-sizing: border-box;
-  width: 100%;
-  input {
-    border: none;
-    background-color: transparent;
-    outline: none;
-  }
-  .create-option {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    &:first-child {
-      margin-right: auto;
-      color: green;
-    }
-  }
-}
-
-// /* Spinner alineado como suffix de Material */
-.loading-spinner {
-  position: absolute;
-  right: 12px;
-  top: 50%;
-  transform: translateY(-50%);
-  pointer-events: none;
-}
-
-// /* Ajuste para que no choque con el spinner */
-input.loading {
-  padding-right: 40px;
-}
-
-// /* Opción de crear */
-.create-option {
-  font-style: italic;
-  opacity: 0.85;
-}
-
-/* Hover más suave */
-::ng-deep .mat-mdc-option.create-option:hover {
-  background: rgba(0, 0, 0, 0.04);
-}
-
-/* Divider más discreto */
-::ng-deep .mat-mdc-autocomplete-panel mat-divider {
-  margin: 4px 0;
-}
-
-/* Estado disabled */
-:host(.mat-mdc-input-disabled) {
-  opacity: 0.6;
-  pointer-events: none;
-}

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

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

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

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