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

package/src/lib/components/layout/sections/main-section/main-section.component.ts

@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component, InputSignal, input } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+    selector: 'cauca-main-section',
+    imports: [TranslateModule],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    templateUrl: './main-section.component.html',
+    styleUrl: './main-section.component.scss'
+})
+export class MainSectionComponent {
+  public title: InputSignal<string> = input('');
+}

package/src/lib/components/layout/sections/section-column/section-column.component.html

@@ -0,0 +1,3 @@
+<div class="section-columns" [class.big-gap]="showBigGap()">
+    <ng-content></ng-content>
+</div>

package/src/lib/components/layout/sections/section-column/section-column.component.scss

@@ -0,0 +1,18 @@
+:host {
+    flex: 1 0 0;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+}
+
+.section-columns {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+    flex: 1 0 0;
+}
+
+.big-gap {
+    gap: 16px;
+}

package/src/lib/components/layout/sections/section-column/section-column.component.spec.ts

@@ -0,0 +1,35 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SectionColumnComponent } from './section-column.component';
+
+describe('SectionColumnComponent', () => {
+  let component: SectionColumnComponent;
+  let fixture: ComponentFixture<SectionColumnComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SectionColumnComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SectionColumnComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should not add big-gap class if not specified', () => {
+    expect(fixture.nativeElement.querySelector('.section-columns')).not.toHaveClass('big-gap');
+  })
+
+  it('should not add big-gap class if specified', () => {
+    fixture.componentRef.setInput('showBigGap', true);
+
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('.section-columns')).toHaveClass('big-gap');
+  })
+});

package/src/lib/components/layout/sections/section-column/section-column.component.ts

@@ -0,0 +1,12 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+@Component({
+  selector: 'cauca-section-column',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: './section-column.component.html',
+  styleUrl: './section-column.component.scss'
+})
+export class SectionColumnComponent {
+  public showBigGap = input<boolean>(false);
+}

package/src/lib/components/layout/sections/section-field/section-field.component.html

@@ -0,0 +1,21 @@
+<div class="section-fields-line" [class.multi-line]="useMultipleValues()">
+    <div class="option-label body1" [class.link]="showLink()">
+        @if(autoTranslateLabel()) {
+            {{label()|translate}}
+        } @else {
+            {{label()}}
+        }
+        @if (showLink()) {
+            <mat-icon class="icon-link" (click)="linkClick.emit()" onkeypress="linkClick.emit()">link</mat-icon>
+        }:
+    </div>
+    <div class="option-value body2" [class.no-flex]="!splitEqually()">
+        @if (useMultipleValues()) {
+            @for(item of values(); track item) {
+                <span>{{fieldName() ? item[fieldName()] : item }}</span>
+            }
+        } @else {
+            {{value()}}
+        }
+    </div>
+</div>

package/src/lib/components/layout/sections/section-field/section-field.component.scss

@@ -0,0 +1,44 @@
+:host {
+    flex: 1 0 0;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    width: 100%;
+}
+
+.section-fields-line {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    align-self: stretch;
+    white-space: nowrap;
+    & > * {
+        flex: 1 0 0;
+    }
+}
+
+.option-value {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+    flex: 1 0 0;
+    white-space: wrap;
+    word-break: break-all;
+}
+
+.option-value.no-flex {
+    flex: unset;
+}
+
+.multi-line {
+    align-items: flex-start;
+}
+
+.icon-link {
+    cursor: pointer;
+}
+
+.link {
+    display: flex;
+}

package/src/lib/components/layout/sections/section-field/section-field.component.spec.ts

@@ -0,0 +1,74 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SectionFieldComponent } from './section-field.component';
+import { By } from '@angular/platform-browser';
+import { MockModule, MockPipe } from 'ng-mocks';
+import { TranslateModule, TranslatePipe } from '@ngx-translate/core';
+
+describe('SectionFieldComponent', () => {
+  let component: SectionFieldComponent;
+  let fixture: ComponentFixture<SectionFieldComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [MockPipe(TranslatePipe, () => 'translated')],
+      imports: [SectionFieldComponent, MockModule(TranslateModule)]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SectionFieldComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should display the specified label', () => {
+    fixture.componentRef.setInput('label', 'value');
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('.option-label').textContent).toContain('translated');
+  });
+
+  it('should not translate the label if translation is set to off', () => {
+    fixture.componentRef.setInput('label', 'someValue');
+    fixture.componentRef.setInput('autoTranslateLabel', false);
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('.option-label').textContent).toContain('someValue');
+  });
+
+  it('should display the specified value', () => {
+    const someValue = 'someValue';
+
+    fixture.componentRef.setInput('value', someValue);
+    fixture.detectChanges();
+
+    expect(component.useMultipleValues()).toBeFalse();
+    expect(fixture.nativeElement.querySelector('.option-value').textContent).toContain(someValue);
+    expect(fixture.nativeElement.querySelector('.section-fields-line')).not.toHaveClass('multi-line');
+  });
+
+  it('should display a list of value when values is specified', () => {
+    const someValues = ['value1', 'value2'];
+
+    fixture.componentRef.setInput('values', someValues);
+    fixture.detectChanges();
+
+    expect(component.useMultipleValues()).toBeTrue();
+    fixture.debugElement.query(By.css('.option-value')).children.forEach((node, index) => {
+      expect(node.nativeElement.textContent).toBe(someValues[index]);
+    });
+    expect(fixture.nativeElement.querySelector('.section-fields-line')).toHaveClass('multi-line');
+  });
+
+  it('should display link when showLink is true', () => {
+    fixture.componentRef.setInput('showLink', true);
+    fixture.detectChanges();
+
+    expect(fixture.debugElement.query(By.css('.icon-link'))).toBeDefined();
+    expect(fixture.nativeElement.querySelector('.option-label')).toHaveClass('link');
+  });
+});

package/src/lib/components/layout/sections/section-field/section-field.component.ts

@@ -0,0 +1,22 @@
+import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatIcon } from '@angular/material/icon';
+
+@Component({
+    selector: 'cauca-section-field',
+    imports: [TranslateModule, MatIcon],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    templateUrl: './section-field.component.html',
+    styleUrl: './section-field.component.scss'
+})
+export class SectionFieldComponent {
+  public autoTranslateLabel = input<boolean>(true);
+  public label = input<string>('');
+  public value = input<unknown>('');
+  public values = input<unknown[]>([]);
+  public fieldName = input<string>('');
+  public useMultipleValues = computed(() => this.values()?.length > 0);
+  public showLink = input<boolean>(false);
+  public linkClick = output<void>();
+  public splitEqually = input<boolean>(true);
+}

package/src/lib/components/list-paginator/list-paginator.component.html

@@ -0,0 +1,16 @@
+<div class="pages">
+    <cauca-icon-button class="page first" [isDisabled]="previousDisabled()" (buttonClick)="tryMoveToFirst()" icon="first_page" />
+    <cauca-icon-button class="page previous" [isDisabled]="previousDisabled()" (buttonClick)="tryMoveToPrevious()" icon="chevron_left" />
+
+    @for(page of pagesToShow(); track page) {
+        @if (page === pageSplitterValue) {
+            <div class="page">{{pageSplitter}}
+            </div>
+        } @else {
+            <cauca-round-button class="page specific" [class.selected]="page === currentPage()" (buttonClick)="changePage(page)" [translateLabel]="false" [label]="page.toString()" />
+        }
+    }
+
+    <cauca-icon-button class="page next" [isDisabled]="nextDisabled()" (buttonClick)="tryMoveToNext()" icon="chevron_right" />
+    <cauca-icon-button class="page last" [isDisabled]="nextDisabled()" (buttonClick)="tryMoveToLast()" icon="last_page" />
+</div>

package/src/lib/components/list-paginator/list-paginator.component.scss

@@ -0,0 +1,46 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.pages {
+    display: flex;
+    padding: 0px 6px;
+    align-items: flex-start;
+    gap: 6px;
+}
+
+.page {
+    display: flex;
+    width: 40px;
+    height: 40px;
+    justify-content: center;
+    align-items: center;
+    color: #121014;
+    cursor: pointer;
+}
+
+.page:hover:not(.disabled) {
+    background: rgba(18, 16, 20, 0.02);
+    border-radius: 100px;
+}
+
+.page:active:not(.disabled) {
+    background: rgba(18, 16, 20, 0.06);
+}
+
+.selected {
+    border-radius: 100px;
+    background: rgba(18, 16, 20, 0.08);
+}
+
+.disabled {
+    color: #12101448;
+
+    mat-icon {
+        color: #12101448;
+    }
+
+    cursor: default;
+}

package/src/lib/components/list-paginator/list-paginator.component.spec.ts

@@ -0,0 +1,248 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ListPaginatorComponent } from './list-paginator.component';
+import { By } from '@angular/platform-browser';
+import { MockComponents, ngMocks } from 'ng-mocks';
+import { IconButtonComponent } from '../buttons/icon-button/icon-button.component';
+import { RoundButtonComponent } from '../buttons/round-button/round-button.component';
+
+
+describe('ListPaginatorComponent', () => {
+  let component: ListPaginatorComponent;
+  let fixture: ComponentFixture<ListPaginatorComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ListPaginatorComponent,
+        ...MockComponents(IconButtonComponent, RoundButtonComponent)
+      ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ListPaginatorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should have one page when itemsCount is less than page size', () => {
+    fixture.componentRef.setInput('pageSize', 6);
+    fixture.componentRef.setInput('itemsCount', 3);
+
+    fixture.detectChanges();
+
+    expect(component.pageCount()).toBe(1);
+    expect(fixture.debugElement.queryAll(By.css('.specific')).length).toBe(1);
+  });
+
+  it('should have one page when itemsCount is exactly the page size ', () => {
+    fixture.componentRef.setInput('pageSize', 6);
+    fixture.componentRef.setInput('itemsCount', 6);
+
+    fixture.detectChanges();
+
+    expect(component.pageCount()).toBe(1);
+    expect(fixture.debugElement.queryAll(By.css('.specific')).length).toBe(1);
+  });
+
+  it('should have two pages when the itemsCount is slightly bigger than page size', () => {
+    fixture.componentRef.setInput('pageSize', 6);
+    fixture.componentRef.setInput('itemsCount', 7);
+
+    fixture.detectChanges();
+
+    expect(component.pageCount()).toBe(2);
+    expect(fixture.debugElement.queryAll(By.css('.specific')).length).toBe(2);
+  });
+
+  it('should disabled previous and first when current page is the first one', () => {
+    fixture.componentRef.setInput('pageSize', 6);
+    fixture.componentRef.setInput('itemsCount', 7);
+
+    component.currentPage.set(1);
+
+    expect(component.previousDisabled()).toBe(true);
+  });
+
+  it('should disabled next and last when current page is the last one', () => {
+    fixture.componentRef.setInput('pageSize', 6);
+    fixture.componentRef.setInput('itemsCount', 7);
+
+    component.currentPage.set(2);
+
+    expect(component.nextDisabled()).toBe(true);
+  });
+
+  it('should go to specified page when clicking on page button', () => {
+    fixture.componentRef.setInput('pageSize', 6);
+    fixture.componentRef.setInput('itemsCount', 7);
+    fixture.detectChanges();
+    const spy = spyOn(component.pageChange, 'emit');
+
+    const button = ngMocks.findInstances('.specific', RoundButtonComponent)[1];
+    button.buttonClick.emit();
+    fixture.detectChanges();
+
+    expect(component.currentPage()).toBe(2);
+    expect(spy).toHaveBeenCalledOnceWith(2);
+  });
+
+  it('should go to first page when clicking on first button', () => {
+    fixture.componentRef.setInput('pageSize', 6);
+    fixture.componentRef.setInput('itemsCount', 30);
+    component.currentPage.set(2);
+    const spy = spyOn(component.pageChange, 'emit');
+    fixture.detectChanges();
+
+    const button = ngMocks.findInstance('.first', IconButtonComponent);
+    button.buttonClick.emit();
+    fixture.detectChanges();
+
+    expect(component.currentPage()).toBe(1);
+    expect(spy).toHaveBeenCalledOnceWith(1);
+  });
+
+  it('should go to previous page when clicking on previous button', () => {
+    fixture.componentRef.setInput('pageSize', 6);
+    fixture.componentRef.setInput('itemsCount', 30);
+    component.currentPage.set(3);
+    fixture.detectChanges();
+    const spy = spyOn(component.pageChange, 'emit');
+
+    const button = ngMocks.findInstance('.previous', IconButtonComponent);
+    button.buttonClick.emit();
+    fixture.detectChanges();
+
+    expect(component.currentPage()).toBe(2);
+    expect(spy).toHaveBeenCalledOnceWith(2);
+  });
+
+  it('should go to last page when clicking on last button', () => {
+    fixture.componentRef.setInput('pageSize', 6);
+    fixture.componentRef.setInput('itemsCount', 30);
+    component.currentPage.set(1);
+    fixture.detectChanges();
+    const spy = spyOn(component.pageChange, 'emit');
+
+    const button = ngMocks.findInstance('.last', IconButtonComponent);
+    button.buttonClick.emit();
+    fixture.detectChanges();
+
+    expect(component.currentPage()).toBe(5);
+    expect(spy).toHaveBeenCalledOnceWith(5);
+  });
+
+  it('should go to next page when clicking on next button', () => {
+    fixture.componentRef.setInput('pageSize', 6);
+    fixture.componentRef.setInput('itemsCount', 30);
+    component.currentPage.set(1);
+    fixture.detectChanges();
+    const spy = spyOn(component.pageChange, 'emit');
+
+    const button = ngMocks.findInstance('.next', IconButtonComponent);
+    button.buttonClick.emit();
+    fixture.detectChanges();
+
+    expect(component.currentPage()).toBe(2);
+    expect(spy).toHaveBeenCalledOnceWith(2);
+  });
+
+  it('should be able to move to first page without emitting', () => {
+    fixture.componentRef.setInput('pageSize', 6);
+    fixture.componentRef.setInput('itemsCount', 30);
+    component.currentPage.set(2);
+    const spy = spyOn(component.pageChange, 'emit');
+
+    component.moveToFirst();
+
+    expect(component.currentPage()).toBe(1);
+    expect(spy).not.toHaveBeenCalled();
+  });
+
+  it('should always show first page button', () => {
+    fixture.componentRef.setInput('pageSize', 6);
+    fixture.componentRef.setInput('itemsCount', 300);
+    component.currentPage.set(30);
+    fixture.detectChanges();
+    const spy = spyOn(component.pageChange, 'emit');
+
+
+    const button = ngMocks.findInstances('.specific', RoundButtonComponent)[0];
+    button.buttonClick.emit();
+    fixture.detectChanges();
+
+    expect(component.currentPage()).toBe(1);
+    expect(spy).toHaveBeenCalledOnceWith(1);
+  });
+
+  it('should always show last page button', () => {
+    fixture.componentRef.setInput('pageSize', 6);
+    fixture.componentRef.setInput('itemsCount', 300);
+    component.currentPage.set(1);
+    fixture.detectChanges();
+    const spy = spyOn(component.pageChange, 'emit');
+
+    const buttons = ngMocks.findInstances('.specific', RoundButtonComponent);
+    const button = buttons[buttons.length - 1];
+    button.buttonClick.emit();
+    fixture.detectChanges();
+
+    expect(component.currentPage()).toBe(50);
+    expect(spy).toHaveBeenCalledOnceWith(50);
+  });
+
+  it('should not show more page than showTotalPage value excluding first page and last page', () => {
+    const pageCountWithFirstAndLastPagesIncluded = 6;
+    fixture.componentRef.setInput('pageSize', 6);
+    fixture.componentRef.setInput('itemsCount', 300);
+    fixture.componentRef.setInput('showTotalPage', pageCountWithFirstAndLastPagesIncluded - 2);
+    component.currentPage.set(20);
+    fixture.detectChanges();
+
+    const buttons = fixture.nativeElement.querySelectorAll('.specific');
+
+    expect(buttons.length).toBe(pageCountWithFirstAndLastPagesIncluded);
+  });
+
+  it('should show pages between the currentPage', () => {
+    const pageCountWithFirstAndLastPagesIncluded = 7;
+    fixture.componentRef.setInput('pageSize', 6);
+    fixture.componentRef.setInput('itemsCount', 300);
+    fixture.componentRef.setInput('showTotalPage', pageCountWithFirstAndLastPagesIncluded - 2);
+    component.currentPage.set(20);
+    fixture.detectChanges();
+
+    const pages = component.pagesToShow();
+
+    expect(pages).toEqual([1, -1, 18, 19, 20, 21, 22, -1, 50]);
+  });
+
+  it('should not show pages before the first', () => {
+    const pageCountWithFirstAndLastPagesIncluded = 6;
+    fixture.componentRef.setInput('pageSize', 6);
+    fixture.componentRef.setInput('itemsCount', 300);
+    fixture.componentRef.setInput('showTotalPage', pageCountWithFirstAndLastPagesIncluded - 2);
+    component.currentPage.set(1);
+    fixture.detectChanges();
+
+    const pages = component.pagesToShow();
+
+    expect(pages).toEqual([1,2,3,4,-1,50]);
+  });
+
+  it('should not show pages after the last', () => {
+    const pageCountWithFirstAndLastPagesIncluded = 6;
+    fixture.componentRef.setInput('pageSize', 6);
+    fixture.componentRef.setInput('itemsCount', 300);
+    fixture.componentRef.setInput('showTotalPage', pageCountWithFirstAndLastPagesIncluded - 2);
+    component.currentPage.set(49);
+    fixture.detectChanges();
+
+    const pages = component.pagesToShow();
+
+    expect(pages).toEqual([1, -1, 47, 48, 49, 50]);
+  });
+});

package/src/lib/components/list-paginator/list-paginator.component.ts

@@ -0,0 +1,81 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, InputSignal, Output, Signal, WritableSignal, computed, input, signal } from '@angular/core';
+import { RoundButtonComponent } from '../buttons/round-button/round-button.component';
+import { IconButtonComponent } from '../buttons/icon-button/icon-button.component';
+
+@Component({
+    selector: 'cauca-list-paginator',
+    imports: [IconButtonComponent, RoundButtonComponent],
+    templateUrl: './list-paginator.component.html',
+    styleUrl: './list-paginator.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ListPaginatorComponent {
+  public itemsCount: InputSignal<number> = input(0);
+  public showTotalPage: InputSignal<number> = input(9);
+  public pageSize: InputSignal<number> = input(50);
+  public pageCount: Signal<number> = computed(() => this.itemsCount() > 0 ? Math.ceil(this.itemsCount() / this.pageSize()) : 1);
+  public pages: Signal<number[]> = computed(() => [...Array(this.pageCount()).keys()]);
+  public currentPage: WritableSignal<number> = signal(1);
+  public previousDisabled: Signal<boolean> = computed(() => this.currentPage() === 1);
+  public nextDisabled: Signal<boolean> = computed(() => this.currentPage() === this.pageCount());
+
+  public pagesToShow: Signal<number[]> = computed(() => {
+    const pagesToShow: number[] = [];
+
+    const rangeStart = Math.max(this.currentPage() - Math.floor(this.showTotalPage() / 2), 1);
+    const rangeEnd = Math.min(rangeStart + this.showTotalPage() - 1, this.pageCount());
+
+    for (let index = rangeStart; index <= rangeEnd; index++) {
+      pagesToShow.push(index);
+    }
+
+    if (!pagesToShow.includes(1)) {
+      pagesToShow.unshift(1, -1);
+    }
+    if (!pagesToShow.includes(this.pageCount())) {
+      pagesToShow.push(-1, this.pageCount());
+    }
+
+    return pagesToShow;
+  });
+  @Output() public pageChange: EventEmitter<number> = new EventEmitter<number>();
+
+  public get pageSplitter(): string {
+    return '...';
+  }
+
+  public get pageSplitterValue(): number {
+    return -1;
+  }
+
+  public changePage(page: number): void {
+    if (page != this.currentPage()) {
+      this.currentPage.set(page);
+      this.pageChange.emit(this.currentPage());
+    }
+  }
+
+  public moveToFirst(): void {
+    this.currentPage.set(1);
+  }
+
+  public tryMoveToFirst(): void {
+    if (this.previousDisabled()) return;
+    this.changePage(1);
+  }
+
+  public tryMoveToLast(): void {
+    if (this.nextDisabled()) return;
+    this.changePage(this.pageCount());
+  }
+
+  public tryMoveToPrevious(): void {
+    if (this.previousDisabled()) return;
+    this.changePage(this.currentPage() - 1);
+  }
+
+  public tryMoveToNext(): void {
+    if (this.nextDisabled()) return;
+    this.changePage(this.currentPage() + 1);
+  }
+}

package/src/lib/components/misc/loading-error/loading-error.component.html

@@ -0,0 +1,11 @@
+@if (showError()) {
+    <cauca-snackbar
+        caption="generalError.loadingErrorAlertTitle"
+        type="error"
+        variant="standard"
+        [showButton]="true"
+        buttonLabel="generalError.retryButtonLabel"
+        (buttonClick)="retryRequest.emit()">
+    {{'generalError.loadingErrorAlertMessage' | translate}}
+    </cauca-snackbar>
+}