@cauca-911/material 21.0.1-beta.5 → 21.0.2

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

@@ -1,155 +0,0 @@
-import { Component, ElementRef, EventEmitter, forwardRef, inject, Injector, Input, OnInit, Output } from '@angular/core';
-import { DialogPosition, MatDialog } from '@angular/material/dialog';
-import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
-import { DialogDateTimePickerComponent } from './components/dialog-date-time-picker/dialog-date-time-picker.component';
-import { DialogDateTimePickerOptions, DialogDateTimePickerValue } from './models/dialog-date-time-picker-data';
-import { MatButtonModule } from '@angular/material/button';
-import { DatePipe } from '@angular/common';
-import { AbstractControl, ControlContainer, ControlValueAccessor, FormControl, FormControlName, FormGroup, NG_VALUE_ACCESSOR, NgControl, Validators } from '@angular/forms';
-import { MatFormFieldModule, SubscriptSizing } from '@angular/material/form-field';
-import { TranslateModule } from '@ngx-translate/core';
-
-@Component({
-    selector: 'cauca-date-time-picker',
-    imports: [
-        TranslateModule,
-        MatButtonModule,
-        MatIconModule,
-        MatInputModule,
-        MatFormFieldModule
-    ],
-    providers: [
-        DatePipe,
-        {
-            provide: NG_VALUE_ACCESSOR,
-            multi: true,
-            useExisting: forwardRef(() => CaucaDateTimePickerComponent),
-        }
-    ],
-    templateUrl: './cauca-date-time-picker.component.html',
-    styleUrl: './cauca-date-time-picker.component.scss'
-})
-export class CaucaDateTimePickerComponent implements ControlValueAccessor, OnInit {
-
-  @Input() public subscriptSizing: SubscriptSizing = 'fixed';
-  @Input() public showTime: boolean = true;
-  @Input() public label: string = '';
-  @Input() public translateLabel: boolean = true;
-  @Input() public stepHours = 1;
-  @Input() public stepMinutes = 1;
-  @Input() public stepSecondes = 1;
-  @Input() public minimumDate: Date = null;
-  @Input() public maximumDate: Date = null;
-  @Input() public showSeconds: boolean = false;
-  @Input() public showFormat: string = 'yyyy/MM/dd, HH:mm';
-  @Input() public showClearButton: boolean = true;
-  @Input() public showButtonIcons: boolean = true;
-  @Output() public selectedChange = new EventEmitter<Date>();
-
-  public control: AbstractControl;
-  public stringDate: string = '';
-
-  private readonly injector = inject(Injector);
-  private readonly elementRef = inject(ElementRef);
-  private readonly dialog = inject(MatDialog);
-  private readonly datePipe = inject(DatePipe);
-  private selectedDate: Date;
-
-  @Input()
-  public set value(value: Date) {
-    if (value) {
-      this.stringDate = this.stringifyDate(value);
-      this.selectedDate = value;
-    }
-  }
-
-  public get isRequired(): boolean {
-    return Boolean(this.control?.hasValidator(Validators.required))
-  }
-
-  public ngOnInit(): void {
-    const ngControl = this.injector.get(NgControl, null, { self: true, optional: true });
-    if (ngControl instanceof FormControlName) {
-      const container = this.injector.get(ControlContainer).control as FormGroup;
-      this.control = container.controls[ngControl.name] as FormControl;
-    } else {
-      this.control = new FormControl();
-    }
-  }
-
-  public showDialog(): void {
-    const dialogRef = this.dialog.open(DialogDateTimePickerComponent, {
-      position: this.getDialogPosition(),
-      data: this.getDateTimePickerOptions(),
-      maxWidth: '100vw',
-    });
-
-    dialogRef.afterClosed().subscribe((data: DialogDateTimePickerValue) => {
-      if (data) {
-        this.stringDate = this.stringifyDate(data.value);
-        this.selectedDate = data.value;
-        this.selectedChange.emit(data.value);
-        this.onChange(data.value);
-      }
-    });
-  }
-
-  public writeValue(date: Date): void {
-    this.value = date;
-  }
-
-  public registerOnChange(fn: any): void {
-    this.onChange = fn;
-  }
-
-  public registerOnTouched(fn: any): void {
-    this.onTouched = fn;
-  }
-
-  public onChange = (value: Date): Date => value;
-
-  public onTouched = (): void => {/* This method needs to be empty */ };
-
-  private getDateTimePickerOptions(): DialogDateTimePickerOptions {
-    return {
-      selectedDate: this.selectedDate,
-      minimumDate: this.minimumDate,
-      maximumDate: this.maximumDate,
-      showSeconds: this.showSeconds,
-      showClearButton: this.showClearButton,
-      showButtonIcons: this.showButtonIcons,
-      showTime: this.showTime,
-      step: {
-        hours: this.stepHours,
-        minutes: this.stepMinutes,
-        seconds: this.stepSecondes,
-      }
-    };
-  }
-  private stringifyDate(date: Date): string {
-    return this.datePipe.transform(date, this.showFormat);
-  }
-
-  private getDialogPosition(): DialogPosition {
-    const rect = this.elementRef.nativeElement.getBoundingClientRect();
-    const top = rect.y + rect.height - 22;
-    const bottom = window.innerHeight - rect.y;
-    const minimumDialogHeight = 400;
-    const minimumScreenSize = 800;
-
-    if (window.innerHeight < minimumScreenSize || window.innerWidth < minimumScreenSize) {
-      return null;
-    } else if (window.innerHeight > (top + minimumDialogHeight)) {
-      return {
-        left: `${rect.x}px`,
-        top: `${top}px`,
-      };
-    }
-
-    return {
-      left: `${rect.x}px`,
-      bottom: `${bottom}px`,
-    };
-  }
-}

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

@@ -1,6 +0,0 @@
-<mat-list [disabled]="disabled?.all">
-    @for (option of options; track option) {
-    <mat-list-item [activated]="value === option" [disabled]="disabled?.someOptions.includes(option)"
-        (click)="valueChange.emit(option)">{{(option < 10 ? '0' : '' ) + option}}</mat-list-item>
-            }
-</mat-list>

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

@@ -1,25 +0,0 @@
-mat-list {
-    width: 50px;
-    padding: 0;
-
-    .mat-mdc-list-item:not(.mat-mdc-list-item-interactive) {
-        cursor: pointer;
-    }
-}
-
->div::-webkit-scrollbar {
-    display: none;
-}
-
-::ng-deep .mdc-list-item__primary-text {
-    font-family: var(--mat-datepicker-calendar-text-font);
-    font-size: var(--mat-datepicker-calendar-text-size);
-}
-
-::ng-deep .mdc-list-item--activated {
-    background-color: var(--mat-datepicker-calendar-date-selected-state-background-color);
-
-    .mdc-list-item__primary-text {
-        color: var(--mat-datepicker-calendar-date-selected-state-text-color);
-    }
-}

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

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

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

@@ -1,23 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { MatListModule } from '@angular/material/list';
-
-@Component({
-    selector: 'cauca-desktop-time-picker',
-    imports: [
-        MatListModule
-    ],
-    templateUrl: './desktop-time-picker.component.html',
-    styleUrl: './desktop-time-picker.component.scss'
-})
-export class DesktopTimePickerComponent {
-  @Input() public options: number[] = [];
-  @Input() public value: number;
-  @Input() public disabled: DesktopTimePickerComponentDisabled;
-
-  @Output() public valueChange = new EventEmitter<number>();
-}
-
-export interface DesktopTimePickerComponentDisabled {
-  all: boolean;
-  someOptions: number[];
-}

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

@@ -1,77 +0,0 @@
-<div mat-dialog-content>
-  <div [ngClass]="showSeconds() ? 'show-seconds' : 'hide-seconds'" class="date-time-picker">
-    <div class="calendar">
-      <mat-calendar
-        [minDate]="minimumDate"
-        [maxDate]="maximumDate"
-        [selected]="selectedDate"
-        (selectedChange)="dateChanged($event)"
-      ></mat-calendar>
-    </div>
-
-    @if (showTime()) {
-      @if (!showMobileUi) {
-        <div class="hours">
-          <cauca-desktop-time-picker [disabled]="{all: disabled.hours, someOptions: disabled.someHours}" (valueChange)="hourChanged($event)" [options]="hours" [value]="selectedHour"/>
-        </div>
-      }
-      @if (showMobileUi) {
-        <div class="hours">
-          <cauca-mobile-time-picker (valueChange)="hourChanged($event)" [options]="hours" [value]="selectedHour" />
-        </div>
-      }
-
-      @if (showMobileUi) {
-        <div class="hour-and-minute-separator">:</div>
-      }
-
-      @if (!showMobileUi) {
-        <div class="minutes">
-          <cauca-desktop-time-picker [disabled]="{all: disabled.minutes, someOptions: disabled.someMinutes}" (valueChange)="minuteChanged($event)" [options]="minutes" [value]="selectedMinute"/>
-        </div>
-      }
-      @if (showMobileUi) {
-        <div class="minutes">
-          <cauca-mobile-time-picker (valueChange)="minuteChanged($event)" [options]="minutes" [value]="selectedMinute" />
-        </div>
-      }
-
-      @if (showSeconds() && showMobileUi) {
-        <div class="minute-and-second-separator">:</div>
-      }
-      @if (showSeconds() && !showMobileUi) {
-        <div class="seconds">
-          <cauca-desktop-time-picker [disabled]="{all: disabled.seconds, someOptions: disabled.someSeconds}" (valueChange)="secondChanged($event)" [options]="seconds" [value]="selectedSecond"/>
-        </div>
-      }
-      @if (showSeconds() && showMobileUi) {
-        <div class="seconds">
-          <cauca-mobile-time-picker (valueChange)="secondChanged($event)" [options]="seconds" [value]="selectedSecond" />
-        </div>
-      }
-    }
-  </div>
-</div>
-
-<div mat-dialog-actions align="end">
-  @if (showClearButton) {
-    <button mat-stroked-button (click)="clear()">
-      @if (showButtonIcons) {
-        <mat-icon>clear</mat-icon>
-      }
-      {{'material.clear' | translate}}
-    </button>
-  }
-  <button color="primary" mat-stroked-button (click)="cancel()">
-    @if (showButtonIcons) {
-      <mat-icon>cancel</mat-icon>
-    }
-    {{'material.cancel' | translate}}
-  </button>
-  <button color="primary" mat-raised-button cdkFocusInitial (click)="confirm()">
-    @if (showButtonIcons) {
-      <mat-icon>check</mat-icon>
-    }
-    {{'material.ok' | translate}}
-  </button>
-</div>

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

@@ -1,124 +0,0 @@
-@use '@angular/material' as mat;
-
-div[mat-dialog-actions] {
-    padding: 8px;
-    border-top: 1px solid #ccc;
-
-    button {
-        margin: 2px;
-    }
-}
-
-.date-time-picker {
-    display: grid;
-    grid-template-areas:
-        "calendar hours minutes seconds";
-    height: 350px;
-    overflow: hidden;
-    justify-content: center;
-
-    >div {
-        overflow: auto;
-        flex: 1;
-        max-width: 50px;
-        scrollbar-width: none;
-        border-left: 1px solid #ccc;
-    }
-
-    >div:first-child {
-        flex: 4;
-        max-width: 290px;
-        border-left: none;
-
-        mat-calendar {
-            width: 290px;
-            height: 350px;
-        }
-    }
-
-    >div::-webkit-scrollbar {
-        display: none;
-    }
-
-    ::ng-deep .mdc-list-item__primary-text {
-        font-family: var(--mat-datepicker-calendar-text-font);
-        font-size: var(--mat-datepicker-calendar-text-size);
-    }
-
-    ::ng-deep .mdc-list-item--activated {
-        background-color: var(--mat-datepicker-calendar-date-selected-state-background-color);
-
-        .mdc-list-item__primary-text {
-            color: var(--mat-datepicker-calendar-date-selected-state-text-color);
-        }
-    }
-}
-
-.calendar {
-    grid-area: calendar;
-}
-
-.hours {
-    grid-area: hours;
-}
-
-.minutes {
-    grid-area: minutes;
-}
-
-.seconds {
-    grid-area: seconds;
-}
-
-.hour-and-minute-separator {
-    grid-area: hour-and-minute-separator;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-weight: 700;
-}
-
-.minute-and-second-separator {
-    grid-area: minute-and-second-separator;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-weight: 700;
-}
-
-@media only screen and (max-width: 555px) {
-
-    .show-seconds {
-        grid-template-areas:
-            "calendar calendar calendar calendar calendar calendar calendar"
-            ". hours hour-and-minute-separator minutes minute-and-second-separator seconds .";
-        grid-template-columns: auto 40px 2px 40px 2px 40px auto;
-    }
-
-    .hide-seconds {
-        grid-template-areas:
-            "calendar calendar calendar calendar calendar"
-            ". hours hour-and-minute-separator minutes .";
-        grid-template-columns: auto 40px 2px 40px auto;
-    }
-
-    .date-time-picker {
-        grid-template-rows: auto auto;
-        height: 450px;
-
-        >div {
-            border-left: none;
-        }
-
-        >div:not(:first-child) {
-            height: 70px;
-        }
-
-        >div:first-child {
-            overflow: initial;
-            flex: 4;
-            max-width: 290px;
-            border-left: none;
-        }
-    }
-}

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

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