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

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

@@ -0,0 +1,35 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatTabsModule } from '@angular/material/tabs';
+import { CaucaCoreModule } from '@cauca-911/core';
+import { CaucaInputMultipleLangueComponent } from './cauca-input-multiple-langue.component';
+
+describe('CaucaInputMultipleLangueComponent', () => {
+  let component: CaucaInputMultipleLangueComponent;
+  let fixture: ComponentFixture<CaucaInputMultipleLangueComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [ 
+        CaucaInputMultipleLangueComponent,
+        CaucaCoreModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MatFormFieldModule,
+        MatTabsModule,
+      ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CaucaInputMultipleLangueComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,57 @@
+import { Component, Input, OnInit, inject } from '@angular/core';
+
+import {ReactiveFormsModule, UntypedFormControl, Validators} from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInput } from '@angular/material/input';
+import { MatTab, MatTabGroup } from '@angular/material/tabs';
+import {Configuration, CaucaCoreService, TranslateService} from '@cauca-911/core';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+    selector: 'cauca-input-multiple-langue',
+    templateUrl: './cauca-input-multiple-langue.component.html',
+    styleUrls: ['./cauca-input-multiple-langue.component.scss'],
+    imports: [MatTabGroup, MatTab, MatInput, MatFormFieldModule, ReactiveFormsModule, TranslateModule]
+})
+export class CaucaInputMultipleLangueComponent implements OnInit {
+
+    @Input()
+    public value: string[] = [];
+    public config: Configuration;
+    public forms: UntypedFormControl[] = [];
+    public labels: string[] = [];
+    public selectedIndex = 0;
+
+    private readonly translate = inject(TranslateService);
+
+    public constructor() {
+        const coreService = inject(CaucaCoreService);
+        this.config = coreService.getConfig();
+    }
+
+    public ngOnInit(): void {
+        this.translate.get(this.config.languages).subscribe((labels: any) => {
+            for (const i in labels) {
+                if (labels[i]) {
+                    this.labels.push(labels[i]);
+                }
+            }
+            this.initializeForms();
+        });
+    }
+
+    public onTagChanged(tabIndex: number): void {
+        console.log('cauca-material, onTabChanged', tabIndex);
+    }
+
+    public getErrorMessage(index: any): string {
+        return this.forms[index].hasError('required') ? 'error.required' : '';
+    }
+
+    private initializeForms(): void {
+        this.labels.forEach((item: any, index: number) => {
+            this.forms[index] = new UntypedFormControl('', [Validators.required]);
+            this.forms[index].setValue(this.value[index] || '');
+        });
+    }
+}

package/src/lib/components/deprecated-components/cauca-menu-vertical/cauca-menu-vertical.component.html

@@ -0,0 +1,49 @@
+@for (menu of menuItems; track menu) {
+  <h4 [class]="menu.activated ? 'selected' : ''">
+    <div (click)="goTo(menu.path, $event)" class="menu">
+      @if (menu.icon) {
+        <div class="menu-icon">
+          @if (isIconArray(menu.icon)) {
+            <fa-icon [icon]="menu.icon"></fa-icon>
+          }
+          @if (!isIconArray(menu.icon)) {
+            <img [src]="menu.icon" />
+          }
+        </div>
+      }
+      @if (menu.label) {
+        <div class="menu-caption">
+          <span>{{menu.label | translate}}</span>
+        </div>
+      }
+    </div>
+    @if (menu.childs.length && menu.activated) {
+      <div class="submenu">
+        @for (submenu of menu.childs; track submenu) {
+          <div
+            [class]="submenu.activated ? 'menu selected' : 'menu'"
+            (click)="goTo(submenu.path, $event)">
+            @if (!submenu.icon) {
+              <div class="menu-dot">&bull;</div>
+            }
+            @if (submenu.icon) {
+              <div class="menu-icon">
+                @if (isIconArray(submenu.icon)) {
+                  <fa-icon [icon]="submenu.icon"></fa-icon>
+                }
+                @if (!isIconArray(submenu.icon)) {
+                  <img [src]="submenu.icon" />
+                }
+              </div>
+            }
+            @if (submenu.label) {
+              <div class="menu-caption">
+                <span>{{submenu.label | translate}}</span>
+              </div>
+            }
+          </div>
+        }
+      </div>
+    }
+  </h4>
+}

package/src/lib/components/deprecated-components/cauca-menu-vertical/cauca-menu-vertical.component.ts

@@ -0,0 +1,56 @@
+import { Component, EventEmitter, Input, Output, inject } from '@angular/core';
+
+import {NavigationEnd, Router} from '@angular/router';
+import {MenuItem} from '../shared/models/menu-item';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+    selector: 'cauca-menu-vertical',
+    templateUrl: './cauca-menu-vertical.component.html',
+    styleUrls: ['./cauca-menu-vertical.component.scss'],
+    imports: [
+    FaIconComponent,
+    TranslateModule
+]
+})
+export class CaucaMenuVerticalComponent {
+
+    @Output() public itemClick = new EventEmitter();
+    @Input() public menuItems: MenuItem[] = [];
+
+    private readonly router = inject(Router);
+
+    public constructor() {
+        this.router.events.subscribe((route: NavigationEnd) => {
+            if (route instanceof NavigationEnd) {
+                this.selectActiveRoute(route);
+            }
+        });
+    }
+
+    public goTo(path: string, e: any): void {
+        this.router.navigate([path]);
+        this.itemClick.emit();
+
+        e.stopPropagation();
+    }
+
+    public isIconArray(icon: string | string[] | null | undefined): icon is string[] {
+        return Array.isArray(icon);
+    }
+
+    private selectActiveRoute(route: NavigationEnd): void {
+        this.menuItems.forEach((menu: MenuItem) => {
+            if (route.url) {
+                menu.activated = (route.url === menu.path || (menu.childs.length && route.url.indexOf(menu.path) > -1));
+            }
+
+            menu.childs.forEach((subMenu: MenuItem) => {
+                if (route.url) {
+                    subMenu.activated = (route.url === subMenu.path || route.urlAfterRedirects === subMenu.path);
+                }
+            });
+        });
+    }
+}

package/src/lib/components/deprecated-components/cauca-simple-dialog/cauca-simple-dialog.component.html

@@ -0,0 +1,11 @@
+<h1 mat-dialog-title>{{data.title}}</h1>
+<div mat-dialog-content>
+  <div [innerHTML]="data.message"></div>
+</div>
+@if (data.buttons) {
+  <div mat-dialog-actions>
+    @for (label of data.buttons; track label; let i = $index) {
+      <button mat-raised-button (click)="onClick(i)">{{label}}</button>
+    }
+  </div>
+}

package/src/lib/components/deprecated-components/cauca-simple-dialog/cauca-simple-dialog.component.scss

@@ -0,0 +1,4 @@
+div[mat-dialog-actions] {
+  margin-top: 20px;
+  text-align: center;
+}

package/src/lib/components/deprecated-components/cauca-simple-dialog/cauca-simple-dialog.component.spec.ts

@@ -0,0 +1,39 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import {
+  MAT_DIALOG_DATA,
+  MatDialogModule,
+  MatDialogRef
+} from '@angular/material/dialog';
+import { CaucaSimpleDialogComponent } from './cauca-simple-dialog.component';
+
+describe('CaucaSimpleDialogComponent', () => {
+  let component: CaucaSimpleDialogComponent;
+  let fixture: ComponentFixture<CaucaSimpleDialogComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [ 
+        CaucaSimpleDialogComponent,
+        MatDialogModule,
+      ],
+      providers: [{
+        provide: MatDialogRef,
+        useValue: {}
+      }, {
+          provide: MAT_DIALOG_DATA,
+          useValue: {}
+      }]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CaucaSimpleDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/deprecated-components/cauca-simple-dialog/cauca-simple-dialog.component.ts

@@ -0,0 +1,20 @@
+import { Component, inject } from '@angular/core';
+
+import { MAT_DIALOG_DATA, MatDialogActions, MatDialogContent, MatDialogRef, MatDialogTitle } from '@angular/material/dialog';
+import { SimpleDialogData } from '../shared/models/simple-dialog-data';
+import { MatButtonModule } from '@angular/material/button';
+
+@Component({
+    selector: 'cauca-simple-dialog',
+    templateUrl: './cauca-simple-dialog.component.html',
+    styleUrls: ['./cauca-simple-dialog.component.scss'],
+    imports: [MatDialogTitle, MatDialogContent, MatDialogActions, MatButtonModule]
+})
+export class CaucaSimpleDialogComponent{
+  public readonly data = inject<SimpleDialogData>(MAT_DIALOG_DATA);
+  private readonly dialogRef = inject<MatDialogRef<CaucaSimpleDialogComponent>>(MatDialogRef);
+
+  public onClick(buttonIndex: number): void {
+    this.dialogRef.close(buttonIndex);
+  }
+}

package/src/lib/components/deprecated-components/cauca-slideshow/cauca-slideshow.component.html

@@ -0,0 +1,7 @@
+<div #container class="slideshow">
+  @for (url of images; track url; let index = $index) {
+    <div [class.active]="index === selectedIndex" [class.entering]="states[index] === 'in'" [class.leaving]="states[index] === 'out'">
+      <img [src]="url" />
+    </div>
+  }
+</div>

package/src/lib/components/deprecated-components/cauca-slideshow/cauca-slideshow.component.scss

@@ -0,0 +1,41 @@
+.slideshow {
+  margin: 0 auto;
+  position: relative;
+  overflow: hidden;
+}
+
+.slideshow > div {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  transition: transform 500ms ease-in, opacity 500ms ease-in;
+
+  /* Default state - off-screen to the right, ready to enter */
+  transform: translateX(100%);
+  opacity: 0;
+
+  &.active {
+    /* Active slide - centered */
+    transform: translateX(0%);
+    opacity: 1;
+  }
+
+  &.leaving {
+    /* Leaving slide - move off-screen to the left */
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+
+  &.entering {
+    /* Entering slide - animate from right to center */
+    transform: translateX(0%);
+    opacity: 1;
+  }
+}
+
+img {
+  max-height: 100%;
+  max-width: 100%;
+  margin: 0 auto;
+  display: block;
+}

package/src/lib/components/deprecated-components/cauca-slideshow/cauca-slideshow.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { CaucaSlideshowComponent } from './cauca-slideshow.component';
+
+describe('CaucaSlideshowComponent', () => {
+  let component: CaucaSlideshowComponent;
+  let fixture: ComponentFixture<CaucaSlideshowComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [ CaucaSlideshowComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CaucaSlideshowComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/deprecated-components/cauca-slideshow/cauca-slideshow.component.ts

@@ -0,0 +1,67 @@
+import { Component, OnInit, ElementRef, Input, ViewChild } from '@angular/core';
+
+
+@Component({
+    selector: 'cauca-slideshow',
+    templateUrl: './cauca-slideshow.component.html',
+    styleUrls: ['./cauca-slideshow.component.scss'],
+    imports: [],
+})
+export class CaucaSlideshowComponent implements OnInit {
+  @ViewChild('container', { static: true })
+  public container: ElementRef;
+  @Input()
+  public height = '150px';
+  @Input()
+  public autoPlay = true;
+  public states = [];
+  public selectedIndex = 0;
+
+  private timer = null;
+  private items = [];
+
+  @Input()
+  public set images(list: string[]) {
+    this.items = list;
+    this.restart();
+  }
+  public get images(): string[] {
+    return this.items;
+  }
+
+  public ngOnInit(): void {
+    this.container.nativeElement.style.height = this.height;
+    this.container.nativeElement.style.width = '100%';
+  }
+
+  public getState(index: number): string {
+    if (this.states[index]) {
+      return this.states[index];
+    }
+
+    return (this.selectedIndex === index ? 'in' : 'out');
+  }
+
+  public restart(): void {
+    if (this.timer) {
+      window.clearInterval(this.timer);
+    }
+    if (this.images && this.images.length) {
+      this.timer = window.setInterval(() => this.changed('next'), 5000);
+    }
+  }
+
+  public next(): void {
+    if (this.selectedIndex < this.items.length - 1) {
+      this.selectedIndex++;
+    } else {
+      this.selectedIndex = 0;
+    }
+  }
+
+  private changed(action: string): void {
+    this.states[this.selectedIndex] = 'out';
+    this[action]();
+    this.states[this.selectedIndex] = 'in';
+  }
+}

package/src/lib/components/deprecated-components/shared/models/menu-item.ts

@@ -0,0 +1,11 @@
+export class MenuItem {
+    public activated: boolean;
+    public childs: MenuItem[] = [];
+
+    public constructor(
+        public label: string,
+        public path: string,
+        public icon: string | string[] = '',
+    ) {
+    }
+}

package/src/lib/components/deprecated-components/shared/models/simple-dialog-data.ts

@@ -0,0 +1,5 @@
+export class SimpleDialogData {
+    public title: string;
+    public message: string;
+    public buttons: string[] = [];
+}

package/src/lib/components/dialogs/alert-dialog/alert-dialog.component.html

@@ -0,0 +1,10 @@
+<div mat-dialog-title>
+  <div class="h6">{{ title | translate }}</div>
+  <cauca-icon-button id="closeButton" (buttonClick)="closeClick()" icon="close" />
+</div>
+<div class="alert-dialog-content" mat-dialog-content>
+  <p>{{ message | translate }}</p>
+</div>
+<mat-dialog-actions align="end">
+  <cauca-raised-button id="okButton" label="ok" color="primary" (buttonClick)="closeClick()" />
+</mat-dialog-actions>

package/src/lib/components/dialogs/alert-dialog/alert-dialog.component.scss

@@ -0,0 +1,14 @@
+@use "../dialog-styles";
+
+:host > div:first-child {
+  display: flex;
+  align-items: center;
+
+  div:first-child {
+      flex: 1;
+  }
+}
+
+.alert-dialog-content {
+  white-space: pre-wrap;
+}

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

@@ -0,0 +1,90 @@
+import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
+
+import { AlertDialogComponent } from './alert-dialog.component';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { TranslateModule, TranslatePipe } from '@ngx-translate/core';
+import { MockComponents, MockModule, MockPipe, ngMocks } from 'ng-mocks';
+import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
+import { of } from 'rxjs';
+import { IconButtonComponent } from '../../buttons/icon-button/icon-button.component';
+import { RaisedButtonComponent } from '../../buttons/raised-button/raised-button.component';
+
+describe('AlertDialogComponent', () => {
+  let component: AlertDialogComponent;
+  let fixture: ComponentFixture<AlertDialogComponent>;
+  let mockMatDialog: any;
+  let breakpointObserverMock: jasmine.SpyObj<BreakpointObserver>;
+
+  beforeEach(async () => {
+    breakpointObserverMock = jasmine.createSpyObj('BreakpointObserver', ['observe']);
+    breakpointObserverMock.observe.and.returnValue(of({ matches: true, breakpoints: {} }));
+
+    mockMatDialog = jasmine.createSpyObj('MatDialogRef', ['close', 'addPanelClass', 'updateSize']);
+    await TestBed.configureTestingModule({
+      imports: [
+        AlertDialogComponent,
+        MockModule(TranslateModule)
+      ],
+      declarations: [
+        MockPipe(TranslatePipe, value => value),
+        ...MockComponents(IconButtonComponent, RaisedButtonComponent)
+      ],
+      providers: [
+        { provide: MatDialogRef, useValue: mockMatDialog },
+        { provide: MAT_DIALOG_DATA, useValue: [] },
+        { provide: BreakpointObserver, useValue: breakpointObserverMock },
+      ]
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(AlertDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should initially add a global style class', () => {
+    expect(mockMatDialog.addPanelClass).toHaveBeenCalledWith('dialog-global-style');
+  });
+
+  it('should update dialog size when breakpoint matches', fakeAsync(() => {
+    mockMatDialog.updateSize.calls.reset();
+    const breakpointState: BreakpointState = { matches: true, breakpoints: {} };
+    breakpointObserverMock.observe.and.returnValue(of(breakpointState));
+
+    TestBed.createComponent(AlertDialogComponent);
+    fixture.detectChanges();
+
+    expect(mockMatDialog.updateSize).toHaveBeenCalledWith('100vw');
+  }));
+
+  it('should update dialog size when breakpoint does not match', fakeAsync(() => {
+    mockMatDialog.updateSize.calls.reset();
+    const breakpointState: BreakpointState = { matches: false, breakpoints: {} };
+    breakpointObserverMock.observe.and.returnValue(of(breakpointState));
+
+    TestBed.createComponent(AlertDialogComponent);
+    fixture.detectChanges();
+
+    expect(mockMatDialog.updateSize).toHaveBeenCalledWith('auto');
+  }));
+
+  it('should close dialog when pressing ok', async () => {
+    const closeButton = ngMocks.find<RaisedButtonComponent>('#okButton', null)?.componentInstance;
+
+    closeButton.buttonClick.emit();
+
+    expect(mockMatDialog.close).toHaveBeenCalled();
+  });
+
+  it('should close dialog when pressing close', async () => {
+    const closeButton = ngMocks.find<IconButtonComponent>('#closeButton', null)?.componentInstance;
+
+    closeButton.buttonClick.emit();
+
+    expect(mockMatDialog.close).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,41 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { ConfirmationOptions } from '../services/dialog.service';
+import { TranslateModule } from '@ngx-translate/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { BreakpointObserver } from '@angular/cdk/layout';
+import { RaisedButtonComponent } from '../../buttons/raised-button/raised-button.component';
+import { IconButtonComponent } from '../../buttons/icon-button/icon-button.component';
+
+@Component({
+  selector: 'cauca-alert-dialog',
+  templateUrl: './alert-dialog.component.html',
+  styleUrls: ['./alert-dialog.component.scss'],
+  standalone: true,
+  imports: [TranslateModule, RaisedButtonComponent, IconButtonComponent, MatDialogModule]
+})
+export class AlertDialogComponent {
+
+  public title: string = '';
+  public message: string = '';
+
+  public constructor(
+    public dialogRef: MatDialogRef<AlertDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: AlertDialogData,
+    breakdownObserver: BreakpointObserver) {
+    this.title = data.title;
+    this.message = data.message;
+    dialogRef.addPanelClass("dialog-global-style");
+    breakdownObserver.observe('(max-width: 500px)').pipe(takeUntilDestroyed()).subscribe(result => dialogRef.updateSize(result.matches ? '100vw' : 'auto'));
+  }
+
+  public closeClick(): void {
+    this.dialogRef.close();
+  }
+}
+
+export interface AlertDialogData {
+  title: string;
+  message: string;
+  options: ConfirmationOptions;
+}

package/src/lib/components/dialogs/confirm-dialog/confirm-dialog.component.html

@@ -0,0 +1,11 @@
+<div mat-dialog-title>
+    <div class="h6 title">{{ title | translate: options.titleArgs }}</div>
+    <cauca-icon-button id="close-button" (buttonClick)="cancelClick()" icon="close" />
+  </div>
+  <div mat-dialog-content>
+    <p class="message">{{ message | translate: options.messageArgs }}</p>
+  </div>
+  <mat-dialog-actions align="end" class="action-buttons">
+    <cauca-stroked-button class="no-button" [label]="options.noText" [color]="options.noColor" (buttonClick)="noClick()" />
+    <cauca-raised-button class="yes-button" [label]="options.yesText" [color]="options.yesColor" (buttonClick)="yesClick()" />
+  </mat-dialog-actions>

package/src/lib/components/dialogs/confirm-dialog/confirm-dialog.component.scss

@@ -0,0 +1,29 @@
+@use "../dialog-styles";
+
+:host > div:first-child {
+    display: flex;
+    align-items: center;
+
+    div:first-child {
+        flex: 1;
+    }
+}
+
+.yes-button {
+    padding-left: 8px;
+}
+
+.message {
+    white-space: pre-wrap;
+}
+
+.title {
+    padding-top: 8px;
+}
+
+.action-buttons {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    gap: 8px;
+}