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

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

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

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

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

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

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

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

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

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

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

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

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

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