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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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