@cauca-911/material 21.0.1-beta.4 → 21.0.1

package/src/lib/components/cauca-date-time-picker/components/dialog-date-time-picker/dialog-date-time-picker.component.spec.ts

@@ -0,0 +1,96 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { DialogDateTimePickerComponent } from './dialog-date-time-picker.component';
+import { TranslatePipe } from '@ngx-translate/core';
+import { MockPipe } from 'ng-mocks';
+
+describe('DialogDateTimePickerComponent', () => {
+  let component: DialogDateTimePickerComponent;
+  let fixture: ComponentFixture<DialogDateTimePickerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        DialogDateTimePickerComponent,
+        MatDialogModule,
+      ],
+      declarations: [MockPipe(TranslatePipe, key => key)],
+      providers: [{
+        provide: MatDialogRef,
+        useValue: {}
+      }, {
+          provide: MAT_DIALOG_DATA,
+          useValue: {}
+      }]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DialogDateTimePickerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should not show the list of seconds when showSeconds is false', () => {
+    const divSeconds = fixture.nativeElement.querySelector('.seconds');
+
+    expect(divSeconds).toBeNull();
+  });
+
+  it('should show the list of seconds when showSeconds is true', () => {
+    component.showSeconds.set(true);
+    fixture.detectChanges();
+
+    const divSeconds = fixture.nativeElement.querySelector('.seconds');
+
+    expect(divSeconds).not.toBeNull();
+  });
+
+  it('should execute hourChanged when click on hours list', () => {
+    const hourChangedSpy = spyOn(component, 'hourChanged');
+    const hoursList = fixture.nativeElement.querySelector('.hours mat-list mat-list-item');
+
+    hoursList.click();
+    fixture.detectChanges();
+
+    expect(hourChangedSpy).toHaveBeenCalled();
+  });
+
+  it('should execute minuteChanged when click on minutes list', () => {
+    const minuteChangedSpy = spyOn(component, 'minuteChanged');
+    const minutesList = fixture.nativeElement.querySelector('.minutes mat-list mat-list-item');
+
+    minutesList.click();
+    fixture.detectChanges();
+
+    expect(minuteChangedSpy).toHaveBeenCalled();
+  });
+
+  it('should execute minuteChanged when click on minutes list', () => {
+    component.showSeconds.set(true);
+    fixture.detectChanges();
+    const secondChangedSpy = spyOn(component, 'secondChanged');
+    const secondsList = fixture.nativeElement.querySelector('.seconds mat-list mat-list-item');
+
+    secondsList.click();
+    fixture.detectChanges();
+
+    expect(secondChangedSpy).toHaveBeenCalled();
+  });
+
+  it('should not show time when showTime is false', () => {
+    component.showTime.set(false);
+    fixture.detectChanges();
+
+    const hoursDiv = fixture.nativeElement.querySelector('.hours');
+    const minutesDiv = fixture.nativeElement.querySelector('.minutes');
+    const secondsDiv = fixture.nativeElement.querySelector('.seconds');
+
+    expect(hoursDiv).toBeNull();
+    expect(minutesDiv).toBeNull();
+    expect(secondsDiv).toBeNull();
+  });
+});

package/src/lib/components/cauca-date-time-picker/components/dialog-date-time-picker/dialog-date-time-picker.component.ts

@@ -0,0 +1,228 @@
+import { ChangeDetectionStrategy, Component, HostListener, OnInit, signal, WritableSignal, inject } from '@angular/core';
+import { provideNativeDateAdapter } from '@angular/material/core';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MatListModule } from '@angular/material/list';
+import { DialogDateTimePickerOptions, DialogDateTimePickerDataDisabled, DialogDateTimePickerDataStep } from '../../models/dialog-date-time-picker-data';
+import { CaucaCoreForChildModule } from '@cauca-911/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { CommonModule } from '@angular/common';
+import { MobileTimePickerComponent } from '../mobile-time-picker/mobile-time-picker.component';
+import { DesktopTimePickerComponent } from '../desktop-time-picker/desktop-time-picker.component';
+
+@Component({
+    selector: 'cauca-dialog-date-time-picker',
+    imports: [
+        CommonModule,
+        CaucaCoreForChildModule,
+        MatButtonModule,
+        MatDatepickerModule,
+        MatIconModule,
+        MatListModule,
+        MobileTimePickerComponent,
+        DesktopTimePickerComponent
+    ],
+    providers: [provideNativeDateAdapter()],
+    templateUrl: './dialog-date-time-picker.component.html',
+    styleUrl: './dialog-date-time-picker.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DialogDateTimePickerComponent implements OnInit {
+
+  public selectedHour = 0;
+  public selectedMinute = 0;
+  public selectedSecond = 0;
+  public initialDate: Date = null;
+  public selectedDate: Date = null;
+  public minimumDate = new Date();
+  public maximumDate = new Date();
+  public showSeconds: WritableSignal<boolean> = signal(false);
+  public showClearButton: boolean = true;
+  public showButtonIcons: boolean = true;
+
+  public hours = [...Array(24).keys()];
+  public minutes = [...Array(60).keys()];
+  public seconds = [...Array(60).keys()];
+  public showMobileUi: boolean = false;
+
+  public showTime: WritableSignal<boolean> = signal(true);
+
+  public disabled: DialogDateTimePickerDataDisabled = {
+    hours: true,
+    someHours: [],
+    minutes: true,
+    someMinutes: [],
+    seconds: true,
+    someSeconds: [],
+  };
+
+  private step: DialogDateTimePickerDataStep = {
+    hours: 1,
+    minutes: 1,
+    seconds: 1,
+  };
+
+  private readonly dialogRef = inject<MatDialogRef<DialogDateTimePickerComponent>>(MatDialogRef);
+  private readonly options = inject<DialogDateTimePickerOptions>(MAT_DIALOG_DATA);
+
+  public constructor() {
+    const options = this.options;
+
+    this.step = options.step || this.step;
+    this.showSeconds.set(options.showSeconds);
+    this.showButtonIcons = options.showButtonIcons ?? this.showButtonIcons;
+    this.showClearButton = options.showClearButton ?? this.showClearButton;
+    this.showTime.set(options.showTime ?? true);
+    this.setListHoursMinutes();
+    this.initialEachComponentValue(options);
+  }
+
+  public ngOnInit(): void {
+    this.onWindowWithChange(window.innerWidth);
+  }
+
+  @HostListener('window:resize', ['$event'])
+  public onResize(event) {
+    this.onWindowWithChange(event.target.innerWidth);
+  }
+
+  public dateChanged(date: Date): void {
+    if (date) {
+      this.selectedDate = date;
+      this.selectedDate.setHours(this.selectedHour);
+      this.selectedDate.setMinutes(this.selectedMinute);
+      this.selectedDate.setSeconds(this.selectedSecond);
+      this.disabled.hours = false;
+      this.disabled.someHours = this.hours.filter(hour => this.hourOfSelectedDateIsDisabled(hour));
+    } else {
+      this.selectedDate = null;
+      this.disabled.hours = true;
+    }
+  }
+
+  public hourChanged(hour: number): void {
+    if (this.disabled.hours || this.disabled.someHours.includes(hour)) return;
+
+    this.selectedHour = hour;
+    this.selectedDate.setHours(hour);
+    this.disabled.minutes = false;
+    this.disabled.someMinutes = this.minutes.filter(minute => this.minuteOfSelectedDateIsDisabled(minute));
+  }
+
+  public minuteChanged(minute: number): void {
+    if (this.disabled.minutes || this.disabled.someMinutes.includes(minute)) return;
+
+    this.selectedMinute = minute;
+    this.selectedDate.setMinutes(minute);
+    this.disabled.seconds = false;
+    this.disabled.someSeconds = this.seconds.filter(second => this.secondOfSelectedDateIsDisabled(second));
+  }
+
+  public secondChanged(second: number): void {
+    if (this.disabled.seconds || this.disabled.someSeconds.includes(second)) return;
+
+    this.selectedSecond = second;
+    this.selectedDate.setSeconds(second);
+  }
+
+  public clear(): void {
+    this.dialogRef.close({
+      value: null
+    });
+  }
+
+  public cancel(): void {
+    this.dialogRef.close({
+      value: this.initialDate
+    });
+  }
+
+  public confirm(): void {
+    this.dialogRef.close({
+      value: this.selectedDate
+    });
+  }
+
+  private onWindowWithChange(width: number): void {
+    this.showMobileUi = width && width <= 555;
+  }
+
+  private hourOfSelectedDateIsDisabled(hour: number): boolean {
+    if (this.selectedDateIsTheMinimumDate()) {
+      return hour < this.minimumDate.getHours();
+    } else if (this.selectedDateIsTheMaximumDate()) {
+      return hour > this.maximumDate.getHours();
+    }
+
+    return false;
+  }
+
+  private minuteOfSelectedDateIsDisabled(minute: number): boolean {
+    if (
+      this.selectedDateIsTheMinimumDate() &&
+      this.selectedDate.getHours() === this.minimumDate.getHours()
+    ) {
+      return minute < this.minimumDate.getMinutes();
+    } else if (
+      this.selectedDateIsTheMaximumDate() &&
+      this.selectedDate.getHours() === this.maximumDate.getHours()
+    ) {
+      return minute > this.maximumDate.getMinutes();
+    }
+
+    return false;
+  }
+
+  private secondOfSelectedDateIsDisabled(second: number): boolean {
+    if (
+      this.selectedDateIsTheMinimumDate() &&
+      this.selectedDate.getHours() === this.minimumDate.getHours() &&
+      this.selectedDate.getMinutes() === this.minimumDate.getMinutes()
+    ) {
+      return second < this.minimumDate.getSeconds();
+    } else if (
+      this.selectedDateIsTheMaximumDate() &&
+      this.selectedDate.getMinutes() === this.maximumDate.getMinutes()
+    ) {
+      return second > this.maximumDate.getSeconds();
+    }
+
+    return false;
+  }
+
+  private initialEachComponentValue(options: DialogDateTimePickerOptions): void {
+    this.initialDate = options.selectedDate ? new Date(options.selectedDate) : null;
+    this.minimumDate = options.minimumDate ? new Date(options.minimumDate) : null;
+    this.maximumDate = options.maximumDate ? new Date(options.maximumDate) : null;
+    this.selectedDate = options.selectedDate ? new Date(options.selectedDate) : new Date();
+    this.dateChanged(options.selectedDate ? new Date(options.selectedDate) : null);
+    this.hourChanged(options.selectedDate ? new Date(options.selectedDate).getHours() : 0);
+    this.minuteChanged(options.selectedDate ? new Date(options.selectedDate).getMinutes() : 0);
+    this.secondChanged(options.selectedDate ? new Date(options.selectedDate).getSeconds() : 0);
+  }
+
+  private selectedDateIsTheMinimumDate(): boolean {
+    return (
+      this.minimumDate &&
+      this.selectedDate.getFullYear() === this.minimumDate.getFullYear() &&
+      this.selectedDate.getMonth() === this.minimumDate.getMonth() &&
+      this.selectedDate.getDate() === this.minimumDate.getDate()
+    );
+  }
+
+  private selectedDateIsTheMaximumDate(): boolean {
+    return (
+      this.maximumDate &&
+      this.selectedDate.getFullYear() === this.maximumDate.getFullYear() &&
+      this.selectedDate.getMonth() === this.maximumDate.getMonth() &&
+      this.selectedDate.getDate() === this.maximumDate.getDate()
+    );
+  }
+
+  private setListHoursMinutes(): void {
+    this.hours = this.hours.filter(hour => hour % this.step.hours === 0);
+    this.minutes = this.minutes.filter(minute => minute % this.step.minutes === 0);
+    this.seconds = this.seconds.filter(seconde => seconde % this.step.seconds === 0);
+  }
+}

package/src/lib/components/cauca-date-time-picker/components/mobile-time-picker/mobile-time-picker.component.html

@@ -0,0 +1,9 @@
+<button mat-icon-button (click)="valueUp()">
+    <mat-icon>keyboard_arrow_up</mat-icon>
+</button>
+<div>
+{{(value() < 10 ? '0' : '' ) + value()}}
+</div>
+<button mat-icon-button (click)="valueDown()">
+    <mat-icon>keyboard_arrow_down</mat-icon>
+</button>

package/src/lib/components/cauca-date-time-picker/components/mobile-time-picker/mobile-time-picker.component.scss

@@ -0,0 +1,15 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 70px;
+    font-family: var(--mat-form-field-container-text-font);
+}
+
+.mat-mdc-icon-button {
+    height: 24px;
+    width: 24px;
+    line-height: 24px;
+    padding: 0;
+}

package/src/lib/components/cauca-date-time-picker/components/mobile-time-picker/mobile-time-picker.component.spec.ts

@@ -0,0 +1,105 @@
+import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
+import { HarnessLoader } from '@angular/cdk/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { MatButtonHarness } from '@angular/material/button/testing';
+
+import { MobileTimePickerComponent } from './mobile-time-picker.component';
+
+const someOptions = [
+  0, 1, 2
+];
+const someFirstOption = 0;
+const someLastOption = 2;
+
+describe('MobileTimePickerComponent', () => {
+  let component: MobileTimePickerComponent;
+  let fixture: ComponentFixture<MobileTimePickerComponent>;
+  let loader: HarnessLoader;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MobileTimePickerComponent]
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(MobileTimePickerComponent);
+    loader = TestbedHarnessEnvironment.loader(fixture);
+    component = fixture.componentInstance;
+    fixture.componentRef.setInput('options', someOptions);
+    fixture.componentRef.setInput('value', 0);
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should emit valueChange when clicking Up arrow', fakeAsync(async () => {
+    const spy = spyOn(component.valueChange, 'emit');
+    const button = await loader.getHarnessOrNull(MatButtonHarness);
+
+    button.click();
+    tick();
+
+    expect(spy).toHaveBeenCalled();
+  }));
+
+  it('should change for next value when clicking Up arrow', fakeAsync(async () => {
+    fixture.componentRef.setInput('value', someFirstOption);
+    const spy = spyOn(component.valueChange, 'emit');
+    const button = await loader.getHarnessOrNull(MatButtonHarness);
+
+    button.click();
+    tick();
+
+    expect(spy).toHaveBeenCalledWith(someFirstOption + 1);
+  }));
+
+  it('should return to first value when clicking Up arrow and at the last value is selected', fakeAsync(async () => {
+    fixture.componentRef.setInput('value', someLastOption);
+    const spy = spyOn(component.valueChange, 'emit');
+    const button = await loader.getHarnessOrNull(MatButtonHarness);
+
+    await button.click();
+    tick();
+    fixture.detectChanges();
+
+    expect(spy).toHaveBeenCalledWith(someFirstOption);
+  }));
+
+  it('should emit valueChange when clicking Down arrow', fakeAsync(async () => {
+    const spy = spyOn(component.valueChange, 'emit');
+    const buttons = await loader.getAllHarnesses(MatButtonHarness);
+    const button = buttons[buttons.length - 1];
+
+    button.click();
+    tick();
+
+    expect(spy).toHaveBeenCalled();
+  }));
+
+  it('should change for next value when clicking Down arrow', fakeAsync(async () => {
+    fixture.componentRef.setInput('value', someLastOption);
+    const spy = spyOn(component.valueChange, 'emit');
+    const buttons = await loader.getAllHarnesses(MatButtonHarness);
+    const button = buttons[buttons.length - 1];
+
+    await button.click();
+    tick();
+    fixture.detectChanges();
+
+    expect(spy).toHaveBeenCalledWith(someLastOption - 1);
+  }));
+
+  it('should return to last value when clicking Down arrow and at the first value is selected', fakeAsync(async () => {
+    fixture.componentRef.setInput('value', someFirstOption);
+    const spy = spyOn(component.valueChange, 'emit');
+    const buttons = await loader.getAllHarnesses(MatButtonHarness);
+    const button = buttons[buttons.length - 1];
+
+    button.click();
+    tick();
+
+    expect(spy).toHaveBeenCalledWith(someLastOption);
+  }));
+});

package/src/lib/components/cauca-date-time-picker/components/mobile-time-picker/mobile-time-picker.component.ts

@@ -0,0 +1,48 @@
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+
+@Component({
+    selector: 'cauca-mobile-time-picker',
+    imports: [
+        MatButtonModule,
+        MatIconModule,
+        MatFormFieldModule,
+        MatInputModule
+    ],
+    templateUrl: './mobile-time-picker.component.html',
+    styleUrl: './mobile-time-picker.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class MobileTimePickerComponent {
+  public value = input.required<number>();
+  public options = input.required<number[]>();
+
+  public valueChange = output<number>();
+
+  public valueUp(): void {
+    const currentIndex = this.options().indexOf(this.value());
+    let newValue = 0;
+    if (currentIndex === this.options().length - 1) {
+      newValue = this.options()[0];
+    } else {
+      newValue = this.options()[currentIndex + 1];
+    }
+
+    this.valueChange.emit(newValue);
+  }
+
+  public valueDown(): void {
+    const currentIndex = this.options().indexOf(this.value());
+    let newValue = 0;
+    if (currentIndex === 0) {
+      newValue = this.options()[this.options().length - 1];
+    } else {
+      newValue = this.options()[currentIndex - 1];
+    }
+
+    this.valueChange.emit(newValue);
+  }
+}

package/src/lib/components/cauca-date-time-picker/models/dialog-date-time-picker-data.ts

@@ -0,0 +1,29 @@
+export interface DialogDateTimePickerDataStep {
+    hours: number,
+    minutes: number,
+    seconds: number,
+}
+
+export interface DialogDateTimePickerDataDisabled {
+    hours: boolean,
+    someHours: number[],
+    minutes: boolean,
+    someMinutes: number[],
+    seconds: boolean,
+    someSeconds: number[],
+}
+
+export interface DialogDateTimePickerOptions {
+    selectedDate: Date,
+    minimumDate: Date | null,
+    maximumDate: Date | null,
+    showSeconds: boolean,
+    showClearButton: boolean,
+    showButtonIcons: boolean,
+    showTime: boolean,
+    step: DialogDateTimePickerDataStep,
+}
+
+export interface DialogDateTimePickerValue {
+    value: Date,
+}

package/src/lib/components/deprecated-components/cauca-input-file/cauca-input-file.component.html

@@ -0,0 +1,14 @@
+<button mat-raised-button (click)="openDialog($event)">
+  @if (icon) {
+    <mat-icon>{{icon}}</mat-icon>
+  }
+  @if (text) {
+    <span>{{text}}</span>
+  }
+</button>
+@if (multiple) {
+  <input #file type="file" (change)="onSelectFile($event)" [accept]="accept" multiple="multiple" />
+} @else {
+  <input #file type="file" (change)="onSelectFile($event)" [accept]="accept" />
+}
+

package/src/lib/components/deprecated-components/cauca-input-file/cauca-input-file.component.scss

@@ -0,0 +1,3 @@
+:host input{
+  display: none;
+}

package/src/lib/components/deprecated-components/cauca-input-file/cauca-input-file.component.ts

@@ -0,0 +1,87 @@
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild, inject } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { TranslateService } from '@cauca-911/core';
+import { CaucaSimpleDialogComponent } from '../cauca-simple-dialog/cauca-simple-dialog.component';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+
+@Component({
+    selector: 'cauca-input-file',
+    templateUrl: './cauca-input-file.component.html',
+    styleUrls: ['./cauca-input-file.component.scss'],
+    imports: [MatButtonModule, MatIcon]
+})
+export class CaucaInputFileComponent implements OnInit {
+
+    @ViewChild('file', {static: false})
+    public file: ElementRef;
+    @Output()
+    public readend = new EventEmitter();
+    @Input()
+    public accept = '';
+    @Input()
+    public multiple = false;
+    @Input()
+    public icon = '';
+    @Input()
+    public text = '';
+
+    private labels: any = {};
+    private readonly translateService = inject(TranslateService);
+    private readonly dialog = inject(MatDialog);
+
+    public ngOnInit(): void {
+        if (!this.icon && !this.text) {
+            this.translateService.get(
+                ['material.select', 'material.dialogTitle', 'material.dialogMessage']
+            ).subscribe((labels: any) => {
+                this.labels = labels;
+                this.text = labels['material.select'];
+            });
+        }
+    }
+
+    public onSelectFile(e: any): void {
+        for (let i = 0, j = e.target.files.length; i < j; i++) {
+            const file = e.target.files[i];
+            const reader = new FileReader();
+            reader.onerror = ((error: any) => this.onError(error));
+            reader.onload = ((event: any) => this.onReadEnd(file, event));
+            reader.readAsDataURL(file);
+        }
+
+        if (e.target.files.length) {
+            this.dialog.open(CaucaSimpleDialogComponent, {
+                width: '250px',
+                disableClose: true,
+                data: {
+                    title: this.labels['material.dialogTitle'],
+                    message: this.labels['material.dialogMessage']
+                }
+            });
+        }
+    }
+
+    public openDialog(event: any): void {
+        if (this.file) {
+            this.file.nativeElement.click();
+        }
+        event.stopPropagation();
+    }
+
+    private onError(error: any): void {
+        throw error;
+    }
+
+    private onReadEnd(file: any, e: any): void {
+        this.dialog.closeAll();
+        this.readend.emit({
+            name: file.name,
+            size: file.size,
+            type: file.type,
+            lastModifiedDate: file.lastModifiedDate,
+            content: e.target['result'],
+            file,
+        });
+    }
+}

package/src/lib/components/deprecated-components/cauca-input-multiple-langue/cauca-input-multiple-langue.component.html

@@ -0,0 +1,12 @@
+<mat-tab-group [selectedIndex]="selectedIndex" (selectedIndexChange)="onTagChanged($event)">
+  @for (lang of labels; track lang; let i = $index) {
+    <mat-tab [label]="lang">
+      <mat-form-field hideRequiredMarker="never">
+        <input matInput [placeholder]="lang" [formControl]="forms[i]" required="required">
+        @if (forms[i].invalid) {
+          <mat-error>{{getErrorMessage(i) | translate}}</mat-error>
+        }
+      </mat-form-field>
+    </mat-tab>
+  }
+</mat-tab-group>

package/src/lib/components/deprecated-components/cauca-input-multiple-langue/cauca-input-multiple-langue.component.scss

@@ -0,0 +1,3 @@
+.mat-mdc-form-field {
+  width: 100%;
+}