@cauca-911/material 21.0.1 → 21.0.3

package/src/lib/components/inputs/select-with-search/select-with-search.component.spec.ts

@@ -1,215 +0,0 @@
-import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
-import { Component, Input } from '@angular/core';
-
-import { SelectWithSearchComponent } from './select-with-search.component';
-import { HarnessLoader } from '@angular/cdk/testing';
-import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
-import { MatFormFieldHarness } from '@angular/material/form-field/testing';
-import { MockModule, MockPipe } from 'ng-mocks';
-import { TranslateModule, TranslatePipe } from '@ngx-translate/core';
-import { MatSelectHarness } from '@angular/material/select/testing';
-
-// Mock the external search component to avoid FormControl timing side-effects in tests
-@Component({ selector: 'ngx-mat-select-search', template: '' })
-class MockNgxMatSelectSearchComponent {
-  @Input() public formControl: any;
-  @Input() public placeholderLabel?: string;
-  @Input() public noEntriesFoundLabel?: string;
-}
-
-describe('SelectWithSearchComponent', () => {
-  let component: SelectWithSearchComponent;
-  let fixture: ComponentFixture<SelectWithSearchComponent>;
-  let loader: HarnessLoader;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [SelectWithSearchComponent, MockModule(TranslateModule)],
-      declarations: [
-        MockPipe(TranslatePipe, value => value),
-        MockNgxMatSelectSearchComponent
-      ]
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(SelectWithSearchComponent);
-    loader = TestbedHarnessEnvironment.loader(fixture);
-    component = fixture.componentInstance;
-
-    fixture.componentRef.setInput('showClearOption', false);
-    fixture.componentRef.setInput('enableSearch', true);
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should show label received in input', fakeAsync(async () => {
-    const someLabel = 'ASuperLabel';
-
-    component.label = someLabel;
-    fixture.detectChanges();
-    tick();
-
-    const formField = await loader.getHarnessOrNull(MatFormFieldHarness);
-    expect(await formField.getLabel()).toBe(someLabel);
-  }));
-
-  it('should disable control when zero option are provided', async () => {
-    const formField = await loader.getHarnessOrNull(MatFormFieldHarness);
-
-    expect(await formField.isDisabled()).toBeTrue();
-  });
-
-  it('shouldn\'t disable control when options are provided', async () => {
-    component.options = [{id: '1', name: 'Super!'}];
-    fixture.detectChanges();
-    const formField = await loader.getHarnessOrNull(MatFormFieldHarness);
-
-    expect(await formField.isDisabled()).toBeFalse();
-  });
-
-  it('should always have ngx search mat-option', async () => {
-    const formField = await loader.getHarnessOrNull(MatSelectHarness);
-    component.options = [{ id: '1', name: 'Super!' }];
-    fixture.detectChanges();
-
-    await formField.open();
-
-    expect((await formField.getOptions()).length).toBe(2);
-  });
-
-  it('should show mat-option for each option provided', async () => {
-    component.options = [{ id: '1', name: 'Super!' }, { id: '2', name: 'Cool!'}];
-    const formField = await loader.getHarnessOrNull(MatSelectHarness);
-
-    fixture.detectChanges();
-    await formField.open();
-
-    expect((await formField.getOptions()).length).toBe(3);
-  });
-
-  it('should select option when value is provided', async () => {
-    const someOption = { id: '1', name: 'Super!' };
-    component.value = someOption.id;
-    component.options = [{ id: '2', name: 'Cool!' }, someOption];
-    const formField = await loader.getHarnessOrNull(MatSelectHarness);
-
-    fixture.detectChanges();
-    await formField.open();
-
-    expect(await formField.getValueText()).toBe(someOption.name);
-  });
-
-  it('should emit valueChanged when option change', async () => {
-    const someOption = { id: '1', name: 'Super!' };
-    component.options = [someOption, { id: '2', name: 'Cool!' }];
-    const formField = await loader.getHarnessOrNull(MatSelectHarness);
-
-    fixture.detectChanges();
-    await formField.open();
-    await formField.clickOptions({text: someOption.name});
-
-    expect(component.value).toBe(someOption.id);
-    expect(await formField.getValueText()).toBe(someOption.name);
-  });
-
-  it('should filter options when setting filter control value', fakeAsync(() => {
-    const someOption = { id: '1', name: 'Super!' };
-    component.options = [someOption, { id: '2', name: 'Cool!' }];
-
-    fixture.detectChanges();
-    tick();
-
-    expect(component.filteredOptions.value()?.length).toBe(2);
-
-    component.optionFilterControl.setValue('Co');
-    tick();
-    fixture.detectChanges();
-    tick();
-
-    expect(component.filteredOptions.value()?.length).toBe(1);
-    expect(component.filteredOptions.value()![0].name).toBe('Cool!');
-  }));
-
-  it('should select first option when selectFirstOptionByDefault is true', async () => {
-    const someOption = { id: '1', name: 'Super!' };
-    component.selectFirstOptionByDefault = true;
-    component.options = [someOption, { id: '2', name: 'Cool!' }];
-    const formField = await loader.getHarnessOrNull(MatSelectHarness);
-
-    expect(await formField.getValueText()).toBe(someOption.name);
-  });
-
-  it('shouldn\'t select first option when selectFirstOptionByDefault is false', async () => {
-    const someOption = { id: '1', name: 'Super!' };
-    component.selectFirstOptionByDefault = false;
-    component.options = [someOption, { id: '2', name: 'Cool!' }];
-    const formField = await loader.getHarnessOrNull(MatSelectHarness);
-
-    expect(await formField.getValueText()).toBeFalsy();
-  });
-
-  it('should show clear option when showClearOption is true', async () => {
-    fixture.componentRef.setInput('showClearOption', true);
-    component.options = [{ id: '1', name: 'Super!' }, { id: '2', name: 'Cool!' }];
-    const formField = await loader.getHarnessOrNull(MatSelectHarness);
-
-    fixture.detectChanges();
-    await formField.open();
-
-    expect((await formField.getOptions()).length).toBe(4);
-
-    const options = await formField.getOptions();
-    expect(await options[1].getText()).toBe('--');
-  });
-
-  it('should not show clear option when showClearOption is false', async () => {
-    fixture.componentRef.setInput('showClearOption', false);
-    component.options = [{ id: '1', name: 'Super!' }, { id: '2', name: 'Cool!' }];
-    const formField = await loader.getHarnessOrNull(MatSelectHarness);
-
-    fixture.detectChanges();
-    await formField.open();
-
-    // Should have search option + 2 regular options = 3 total
-    expect((await formField.getOptions()).length).toBe(3);
-  });
-
-  it('should clear selection when clear option is selected', async () => {
-    fixture.componentRef.setInput('showClearOption', true);
-    component.value = '1';
-    component.options = [{ id: '1', name: 'Super!' }, { id: '2', name: 'Cool!' }];
-    const formField = await loader.getHarnessOrNull(MatSelectHarness);
-
-    fixture.detectChanges();
-    await formField.open();
-    await formField.clickOptions({ text: '--' });
-
-    expect(component.value).toBeNull();
-  });
-
-  it('should always show clear option even when filtering', fakeAsync(() => {
-    fixture.componentRef.setInput('showClearOption', true);
-    component.options = [{ id: '1', name: 'Super!' }, { id: '2', name: 'Cool!' }];
-
-    fixture.detectChanges();
-    tick();
-
-    // With clear option enabled, the resource should include clear option at index 0
-    const initial = component.filteredOptions.value() || [];
-    expect(initial.length).toBe(3);
-    expect(initial[0].name).toBe('--');
-
-    // Filter and ensure the clear option remains present
-    component.optionFilterControl.setValue('Co');
-    tick();
-    fixture.detectChanges();
-    tick();
-
-    const filtered = component.filteredOptions.value() || [];
-    expect(filtered.length).toBe(2);
-    expect(filtered[0].name).toBe('--');
-    expect(filtered[1].name).toBe('Cool!');
-  }));
-});

package/src/lib/components/inputs/select-with-search/select-with-search.component.ts

@@ -1,108 +0,0 @@
-import { Component, computed, EventEmitter, input, Input, Output, resource, signal, ViewChild } from '@angular/core';
-import { ReactiveFormsModule, FormsModule, FormControl } from '@angular/forms';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatSelect, MatSelectModule } from '@angular/material/select';
-import { TranslateModule } from '@ngx-translate/core';
-import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
-import { toSignal } from '@angular/core/rxjs-interop';
-import { toLowerCaseAndWithoutDiacritics } from '@cauca-911/core';
-
-export interface Option {
-  id: string | null;
-  name: string;
-}
-
-@Component({
-  selector: 'cauca-select-with-search',
-  standalone: true,
-  imports: [MatSelectModule, TranslateModule, MatFormFieldModule, ReactiveFormsModule, FormsModule, NgxMatSelectSearchModule],
-  templateUrl: './select-with-search.component.html',
-  styleUrl: './select-with-search.component.scss'
-})
-export class SelectWithSearchComponent {
-  @Input({required: true}) public label: string;
-  @Input() public selectFirstOptionByDefault: boolean = false;
-
-  public optionFilterControl: FormControl<string> = new FormControl<string>('');
-  @ViewChild('singleSelect', { static: true }) public singleSelect: MatSelect;
-  public isDisabled = input<boolean>(false);
-  public hasOptions = signal<boolean>(false);
-  public disableControl = computed(() => this.isDisabled() || !this.hasOptions());
-  public allowMultiSelection = input<boolean>(false);
-  public showClearOption = input<boolean>(false);
-  public enableSearch = input<boolean>(true);
-
-  public filteredOptions = resource({
-    params: () => ({ filter: this.filterText(), options: this.allOptions(), showClear: this.showClearOption() }),
-    loader: ({ params }) => Promise.resolve(this.computeFilteredOptions(params))
-  });
-
-  @Output()
-  public valueChanged = new EventEmitter();
-
-  private selectedOptionId: string | null;
-  private readonly allOptions = signal<Option[]>([]);
-  private readonly filterText = toSignal(this.optionFilterControl.valueChanges, { initialValue: '' });
-
-  @Input()
-  public set options(newOptions: Option[]) {
-    if (newOptions) {
-      this.allOptions.set(newOptions);
-      this.hasOptions.set(newOptions.length >= 1);
-      this.setInitialSelectedOption();
-    } else {
-      this.allOptions.set([]);
-      this.hasOptions.set(false);
-    }
-  }
-  public get options(): Option[] {
-    return this.allOptions();
-  }
-
-  @Input()
-  public set value(newValue: string | null) {
-    if (newValue !== this.selectedOptionId) {
-      this.selectedOptionId = newValue;
-      this.valueChanged.emit(this.value);
-    }
-  }
-  public get value(): string | null {
-    return this.selectedOptionId;
-  }
-
-  private setInitialSelectedOption(): void {
-    if (this.value) {
-      const city = this.options.find((c: Option) => c.id === this.value);
-      if (!city) {
-        this.selectFirstOption();
-      }
-    } else if (this.options.length > 0 && this.selectFirstOptionByDefault) {
-      this.selectFirstOption();
-    }
-  }
-
-  private selectFirstOption(): void {
-    this.value = this.options[0].id;
-  }
-
-  private computeFilteredOptions(params: { filter: string, options: Option[], showClear: boolean }): Option[] {
-    const { filter, options, showClear } = params;
-    if (!options || !Array.isArray(options)) {
-      return [];
-    }
-    let filtered: Option[];
-
-    if (!filter) {
-      filtered = options.slice();
-    } else {
-      const filterLower = toLowerCaseAndWithoutDiacritics(filter);
-      filtered = options.filter(option => toLowerCaseAndWithoutDiacritics(option?.name ?? '').indexOf(filterLower) > -1);
-    }
-    if (showClear) {
-      const clearOption: Option = { id: null, name: '--' };
-      filtered = [clearOption, ...filtered];
-    }
-
-    return filtered;
-  }
-}

package/src/lib/components/layout/expandable-panel/expandable-panel.component.html

@@ -1,14 +0,0 @@
-<section>
-    <div class="expansion-button" (click)="changeState()">
-        <mat-icon [class.collapsed]="isCollapsed()">expand_less</mat-icon>
-        <div>
-            <div class="primary">{{caption()}}</div>
-            <div class="body2">{{subCaption()}}</div>
-        </div>
-    </div>
-    <div class="expansion-panel" [class.collapsed]="isCollapsed()">
-        <div class="expansion-panel-content">
-            <ng-content></ng-content>
-        </div>
-    </div>
-</section>

package/src/lib/components/layout/expandable-panel/expandable-panel.component.scss

@@ -1,48 +0,0 @@
-section {
-    display: flex;
-    padding: 16px 0px;
-}
-
-.primary {
-    font-weight: 600;
-}
-
-.body2 {
-    width: fit-content;
-    white-space: nowrap;
-}
-
-.expansion-button {
-    display: flex;
-    gap: 4px;
-    width: 240px;
-    padding: 0px 16px 8px 0px;
-    cursor: pointer;
-    height: fit-content;
-
-    mat-icon {
-        transition: transform 500ms ease-in-out;
-        &.collapsed {
-            transform: rotate(180deg);
-        }
-    }
-}
-
-.expansion-panel {
-    overflow: hidden;
-    flex: 1;
-    display: grid;
-    grid-template-rows: 1fr;
-    min-height: 0;
-    transition: grid-template-rows 500ms ease-in, opacity 500ms ease-in, visibility 500ms ease-in;
-
-    &.collapsed {
-        grid-template-rows: 0fr;
-        opacity: 0;
-        visibility: hidden;
-    }
-}
-
-.expansion-panel-content {
-    min-height: 0;
-}

package/src/lib/components/layout/expandable-panel/expandable-panel.component.spec.ts

@@ -1,48 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ExpandablePanelComponent } from './expandable-panel.component';
-
-describe('ExpandablePanelComponent', () => {
-  let component: ExpandablePanelComponent;
-  let fixture: ComponentFixture<ExpandablePanelComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [ExpandablePanelComponent],
-    })
-      .compileComponents();
-
-    fixture = TestBed.createComponent(ExpandablePanelComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should display the title and subtitle', () => {
-    const someTitle = 'someTitle';
-    const someSubTitle = 'someSubTitle';
-    fixture.componentRef.setInput('caption', someTitle);
-    fixture.componentRef.setInput('subCaption', someSubTitle);
-
-    fixture.detectChanges();
-
-    expect(component.subCaption()).toBe(someSubTitle);
-    expect(component.caption()).toBe(someTitle);
-    expect(fixture.nativeElement.querySelector('.primary').textContent).toBe(someTitle);
-    expect(fixture.nativeElement.querySelector('.body2').textContent).toBe(someSubTitle);
-  });
-
-  it('should be open by default', () => {
-    expect(component.isCollapsed()).toBeFalse();
-  });
-
-  it('should collapsed when clicking on the button', () => {
-    fixture.nativeElement.querySelector('.expansion-button').click();
-    fixture.detectChanges();
-
-    expect(component.isCollapsed()).toBeTrue();
-  });
-
-});

package/src/lib/components/layout/expandable-panel/expandable-panel.component.ts

@@ -1,19 +0,0 @@
-import { ChangeDetectionStrategy, Component, InputSignal, ModelSignal, input, model } from '@angular/core';
-import { MatIcon } from '@angular/material/icon';
-
-@Component({
-    selector: 'cauca-expandable-panel',
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    imports: [MatIcon],
-    templateUrl: './expandable-panel.component.html',
-    styleUrl: './expandable-panel.component.scss',
-})
-export class ExpandablePanelComponent {
-  public isCollapsed: ModelSignal<boolean> = model(false);
-  public caption: InputSignal<string> = input('');
-  public subCaption: InputSignal<string> = input('');
-
-  public changeState(): void {
-    this.isCollapsed.update(value => !value);
-  }
-}

package/src/lib/components/layout/group-container/group-container.component.html

@@ -1,6 +0,0 @@
-<div class="group-container">
-    <div class="group-container-title subtitle1">{{caption()|translate}}</div>
-    <div class="group-container-content">
-        <ng-content />
-    </div>
-</div>

package/src/lib/components/layout/group-container/group-container.component.scss

@@ -1,22 +0,0 @@
-.group-container {
-    display: flex;
-    align-items: flex-start;
-    align-self: stretch;
-}
-
-.group-container-title {
-    display: flex;
-    width: 300px;
-    max-width: 300px;
-    padding: 16px 0px;
-    flex-direction: column;
-    align-items: flex-start;
-}
-
-.group-container-content {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    flex: 1;
-    padding: 16px;
-}

package/src/lib/components/layout/group-container/group-container.component.spec.ts

@@ -1,34 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { GroupContainerComponent } from './group-container.component';
-import { MockModule, MockPipe } from 'ng-mocks';
-import { TranslateModule, TranslatePipe } from '@ngx-translate/core';
-
-describe('GroupContainerComponent', () => {
-  let component: GroupContainerComponent;
-  let fixture: ComponentFixture<GroupContainerComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [GroupContainerComponent, MockModule(TranslateModule)],
-      declarations: [MockPipe(TranslatePipe, value => value)],
-    })
-      .compileComponents();
-
-    fixture = TestBed.createComponent(GroupContainerComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should have display the caption', () =>{
-    fixture.componentRef.setInput('caption', 'Test Caption');
-
-    fixture.detectChanges();
-
-    expect(fixture.nativeElement.querySelector('.group-container-title').textContent).toContain('Test Caption');
-  });
-});

package/src/lib/components/layout/group-container/group-container.component.ts

@@ -1,14 +0,0 @@
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
-import { TranslateModule } from '@ngx-translate/core';
-
-@Component({
-  selector: 'cauca-group-container',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [TranslateModule],
-  templateUrl: './group-container.component.html',
-  styleUrl: './group-container.component.scss'
-})
-export class GroupContainerComponent {
-  public caption = input<string>();
-}

package/src/lib/components/layout/menu-expandable-panel/menu-expandable-panel.component.html

@@ -1,13 +0,0 @@
-<section [ngClass]="opened() ? 'bottom-padding' : ''" (click)="handleClick()">
-    <mat-icon>{{menuIcon()}}</mat-icon>
-    <div>
-        <div class="subtitle1">{{caption() | translate}}</div>
-        @if(subCaption()) {<div class="body2">{{subCaption() | translate}}</div>}
-    </div>
-    @if (showExpansionIcon()) {<mat-icon [class.opened]="opened()">arrow_forward_ios</mat-icon>}
-</section>
-@if(opened()) {
-    @for (item of items(); track item.title) {
-        <cauca-menu-expandable-panel-item [icon]="item.icon" [caption]="item.title" [route]="item.route" [isSubItem]="true" [action]="item.action" />
-    }
-}

package/src/lib/components/layout/menu-expandable-panel/menu-expandable-panel.component.scss

@@ -1,27 +0,0 @@
-:host {
-    padding: 10px 12px;
-    background-color: #FFFFFF;
-    cursor: pointer;
-    display: block;
-}
-
-section {
-    display: flex;
-    gap: 16px;
-    align-items: center;
-
-    mat-icon:last-child {
-        transition: transform 200ms ease-in-out;
-        &.opened {
-            transform: rotate(-90deg);
-        }
-    }
-}
-
-section.bottom-padding {
-    padding-bottom: 10px;
-}
-
-div {
-    flex: 1;
-}