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

package/src/lib/components/buttons/stroked-button/stroked-button.component.spec.ts

@@ -0,0 +1,114 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StrokedButtonComponent } from './stroked-button.component';
+import { HarnessLoader } from '@angular/cdk/testing';
+import {MatIconHarness} from '@angular/material/icon/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { MatButtonHarness } from '@angular/material/button/testing';
+import { TranslatePipe } from '@ngx-translate/core';
+import { MockPipe } from 'ng-mocks';
+
+describe('StrokedButtonComponent', () => {
+  let component: StrokedButtonComponent;
+  let fixture: ComponentFixture<StrokedButtonComponent>;
+  let loader: HarnessLoader;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        StrokedButtonComponent,
+      ],
+      declarations: [MockPipe(TranslatePipe, key => key)]
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(StrokedButtonComponent);
+    loader = TestbedHarnessEnvironment.loader(fixture);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should display the provided icon', async() => {
+    fixture.componentRef.setInput('icon', 'twidelidou');
+
+    fixture.detectChanges();
+
+    const icon = await loader.getHarness(MatIconHarness);
+    expect(await icon.getName()).toBe(component.icon());
+  });
+
+  it('should display the label', async () => {
+    fixture.componentRef.setInput('label', 'twidelidou');
+
+    fixture.detectChanges();
+
+    const button = await loader.getHarness(MatButtonHarness);
+    expect(await button.getText()).toContain(component.label());
+  });
+
+  it('should disable button when disabled is set', async () => {
+    fixture.componentRef.setInput('isDisabled', true);
+
+    const button = await loader.getHarnessOrNull(MatButtonHarness);
+    expect(await button.isDisabled()).toBeTrue();
+  });
+
+  it('should enable button when disabled is not set', async () => {
+    fixture.componentRef.setInput('isDisabled', false);
+
+    const button = await loader.getHarnessOrNull(MatButtonHarness);
+    expect(await button.isDisabled()).toBeFalse();
+  });
+
+  it('should disable button when disabled is not set and show load icon', async () => {
+    fixture.componentRef.setInput('isInProgress', true);
+
+    const button = await loader.getHarnessOrNull(MatButtonHarness);
+    const icon = await button.getHarness(MatIconHarness);
+    expect(await button.isDisabled()).toBeTrue();
+    expect(await icon.getName()).toBe('update');
+  });
+
+  it('should not show any icon when not set', async () => {
+    fixture.componentRef.setInput('icon', null);
+
+    const button = await loader.getHarnessOrNull(MatButtonHarness);
+    const icon = await button.getHarnessOrNull(MatIconHarness);
+    expect(icon).toBe(null);
+  });
+
+  it('should emit buttonClick event when clicked', async () => {
+    const clickSpy = spyOn(component.buttonClick, 'emit');
+    const button = await loader.getHarness(MatButtonHarness);
+
+    await button.click();
+
+    expect(clickSpy).toHaveBeenCalled();
+  });
+
+  it('should add the icon-only class to the button when no label is provided', () => {
+    fixture.componentRef.setInput('icon', 'twidelidou');
+
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('button')).toHaveClass('icon-only');
+  });
+
+  it('should add small-button class when small is set', () => {
+    fixture.componentRef.setInput('small', false);
+
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('button')).not.toHaveClass('small-button');
+
+    fixture.componentRef.setInput('small', true);
+
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('button')).toHaveClass('small-button');
+  });
+});

package/src/lib/components/buttons/stroked-button/stroked-button.component.ts

@@ -0,0 +1,17 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { MatButton, } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { TranslateModule } from '@ngx-translate/core';
+import { BaseButtonWithLabel } from '../base-button';
+import { NgClass } from '@angular/common';
+
+@Component({
+  selector: 'cauca-stroked-button',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [MatButton, MatIconModule, TranslateModule, NgClass],
+  templateUrl: './stroked-button.component.html',
+  styleUrl: './stroked-button.component.scss',
+})
+export class StrokedButtonComponent extends BaseButtonWithLabel {
+}

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

@@ -0,0 +1,9 @@
+<mat-form-field [subscriptSizing]="subscriptSizing">
+    @if (label) {
+        <mat-label>{{ translateLabel ? (label | translate) : label }}{{isRequired ? '*' : ''}}</mat-label>
+    }
+    <input (focusout)="onTouched()" matInput [value]="stringDate" readonly="readonly">
+    <button matSuffix mat-icon-button (click)="showDialog()">
+        <mat-icon>calendar_month</mat-icon>
+    </button>
+</mat-form-field>

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

@@ -0,0 +1,7 @@
+:host {
+    display: block;
+}
+
+mat-form-field {
+    width: 100%;
+}

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

@@ -0,0 +1,68 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CaucaDateTimePickerComponent } from './cauca-date-time-picker.component';
+import { MatDialogModule } from '@angular/material/dialog';
+import { DatePipe, registerLocaleData } from '@angular/common';
+import { LOCALE_ID } from '@angular/core';
+import localeFr from '@angular/common/locales/fr';
+import { MockModule, MockPipe } from 'ng-mocks';
+import { TranslateModule, TranslatePipe } from '@ngx-translate/core';
+
+describe('CaucaDateTimePickerComponent', () => {
+  let component: CaucaDateTimePickerComponent;
+  let fixture: ComponentFixture<CaucaDateTimePickerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        CaucaDateTimePickerComponent,
+        MatDialogModule,
+        MockModule(TranslateModule),
+        MockPipe(TranslatePipe, value => value)
+      ],
+      providers: [
+        DatePipe,
+        { provide: LOCALE_ID, useValue: 'fr-CA' },
+      ],
+    })
+    .compileComponents();
+
+    registerLocaleData(localeFr, 'fr');
+    fixture = TestBed.createComponent(CaucaDateTimePickerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  afterEach(() => {
+    component.showSeconds = false;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should execute openDialog when click on button', () => {
+    const showDialogSpy = spyOn(component, 'showDialog');
+    const button = fixture.nativeElement.querySelector('button');
+
+    button.click();
+
+    expect(showDialogSpy).toHaveBeenCalled();
+  });
+
+  it('should stringify the date when value is pass', () => {
+    const today = new Date();
+    const input = fixture.nativeElement.querySelector('input');
+
+    component.value = today;
+
+    expect(input.value).not.toBeNull();
+  });
+
+  it('should set empty the date when value is null', () => {
+    const input = fixture.nativeElement.querySelector('input');
+
+    component.value = null;
+
+    expect(input.value).toBe('');
+  });
+});

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

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

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

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

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

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

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

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