@cauca-911/material 21.0.1 → 21.0.3

package/src/lib/components/buttons/fab-button/fab-button.component.spec.ts

@@ -1,82 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { FabButtonComponent } from './fab-button.component';
-import { HarnessLoader } from '@angular/cdk/testing';
-import {MatIconHarness} from '@angular/material/icon/testing';
-import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
-import { MatButtonHarness } from '@angular/material/button/testing';
-
-describe('FabButtonComponent', () => {
-  let component: FabButtonComponent;
-  let fixture: ComponentFixture<FabButtonComponent>;
-  let loader: HarnessLoader;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [
-        FabButtonComponent,
-      ]
-    })
-      .compileComponents();
-
-    fixture = TestBed.createComponent(FabButtonComponent);
-    loader = TestbedHarnessEnvironment.loader(fixture);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should display the provided icon', async() => {
-    fixture.componentRef.setInput('icon', 'twidelidou');
-
-    fixture.detectChanges();
-
-    const icon = await loader.getHarness(MatIconHarness);
-    expect(await icon.getName()).toBe(component.icon());
-  });
-
-  it('should disable button when disabled is set', async () => {
-    fixture.componentRef.setInput('isDisabled', true);
-
-    const button = await loader.getHarnessOrNull(MatButtonHarness);
-    expect(await button.isDisabled()).toBeTrue();
-  });
-
-  it('should enable button when disabled is not set', async () => {
-    fixture.componentRef.setInput('isDisabled', false);
-
-    const button = await loader.getHarnessOrNull(MatButtonHarness);
-    expect(await button.isDisabled()).toBeFalse();
-  });
-
-  it('should disable button when disabled is not set and show load icon', async () => {
-    fixture.componentRef.setInput('isInProgress', true);
-
-    fixture.detectChanges();
-
-    const button = await loader.getHarnessOrNull(MatButtonHarness);
-    const icon = await button.getHarness(MatIconHarness);
-    expect(await button.isDisabled()).toBeTrue();
-    expect(await icon.getName()).toBe('update');
-  });
-
-  it('should not show any icon when not set', async () => {
-    fixture.componentRef.setInput('icon', null);
-
-    const button = await loader.getHarnessOrNull(MatButtonHarness);
-    const icon = await button.getHarnessOrNull(MatIconHarness);
-    expect(icon).toBe(null);
-  });
-
-  it('should emit buttonClick event when clicked', async () => {
-    const clickSpy = spyOn(component.buttonClick, 'emit');
-    const button = await loader.getHarness(MatButtonHarness);
-
-    await button.click();
-
-    expect(clickSpy).toHaveBeenCalled();
-  });
-});

package/src/lib/components/buttons/fab-button/fab-button.component.ts

@@ -1,16 +0,0 @@
-import { ChangeDetectionStrategy, Component, computed } from '@angular/core';
-import { MatButtonModule, } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { BaseButtonWithLabel } from '../base-button';
-
-@Component({
-  selector: 'cauca-fab-button',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [MatButtonModule, MatIconModule],
-  templateUrl: './fab-button.component.html',
-  styleUrl: './fab-button.component.scss',
-})
-export class FabButtonComponent extends BaseButtonWithLabel {
-  public iconColor = computed(() => this.color() === 'primary' ? 'white' : undefined);
-}

package/src/lib/components/buttons/flat-button/flat-button.component.html

@@ -1,5 +0,0 @@
-<button mat-flat-button [ngClass]="small() ? 'small-button' : ''" [color]="color()" onclick="this.blur()"  [disabled]="buttonDisabled()" (click)="buttonClick.emit();">
-    @if(showIcon() && iconAlignment() === 'left') { <mat-icon [class.button-spin]="isInProgress()">{{iconToShow()}}</mat-icon> }
-    @if (translateLabel()) {{{label()|translate}}} @else {{{label()}}}
-    @if(showIcon() && iconAlignment() === 'right') { <mat-icon [class.button-spin]="isInProgress()">{{iconToShow()}}</mat-icon> }
-</button>

package/src/lib/components/buttons/flat-button/flat-button.component.scss

@@ -1,12 +0,0 @@
-.mdc-button.mat-white,
-.mat-stroked-button.mat-white {
-    color: white;
-    border-color: white;
-}
-.mdc-button.mat-white:hover,
-.mat-mdc-outlined-button.mat-white:hover {
-  background-color: transparent;
-}
-mat-icon {
-  color: inherit;
-}

package/src/lib/components/buttons/flat-button/flat-button.component.spec.ts

@@ -1,106 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { FlatButtonComponent } from './flat-button.component';
-import { MatIconHarness } from '@angular/material/icon/testing';
-import { MatButtonHarness } from '@angular/material/button/testing';
-import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
-import { HarnessLoader } from '@angular/cdk/testing';
-import { TranslatePipe } from '@ngx-translate/core';
-import { MockPipe } from 'ng-mocks';
-
-describe('FlatButtonComponent', () => {
-  let component: FlatButtonComponent;
-  let fixture: ComponentFixture<FlatButtonComponent>;
-  let loader: HarnessLoader;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [
-        FlatButtonComponent,
-      ],
-      declarations: [MockPipe(TranslatePipe, key => key)]
-    })
-      .compileComponents();
-
-    fixture = TestBed.createComponent(FlatButtonComponent);
-    loader = TestbedHarnessEnvironment.loader(fixture);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should display the provided icon', async() => {
-    fixture.componentRef.setInput('icon', 'twidelidou');
-
-    fixture.detectChanges();
-
-    const icon = await loader.getHarness(MatIconHarness);
-    expect(await icon.getName()).toBe(component.icon());
-  });
-
-  it('should display the label', async () => {
-    fixture.componentRef.setInput('label', 'twidelidou');
-
-    fixture.detectChanges();
-
-    const button = await loader.getHarness(MatButtonHarness);
-    expect(await button.getText()).toContain(component.label());
-  });
-
-  it('should disable button when disabled is set', async () => {
-    fixture.componentRef.setInput('isDisabled', true);
-
-    const button = await loader.getHarnessOrNull(MatButtonHarness);
-    expect(await button.isDisabled()).toBeTrue();
-  });
-
-  it('should enable button when disabled is not set', async () => {
-    fixture.componentRef.setInput('isDisabled', false);
-
-    const button = await loader.getHarnessOrNull(MatButtonHarness);
-    expect(await button.isDisabled()).toBeFalse();
-  });
-
-  it('should disable button when disabled is not set and show load icon', async () => {
-    fixture.componentRef.setInput('isInProgress', true);
-
-    const button = await loader.getHarnessOrNull(MatButtonHarness);
-    const icon = await button.getHarness(MatIconHarness);
-    expect(await button.isDisabled()).toBeTrue();
-    expect(await icon.getName()).toBe('update');
-  });
-
-  it('should not show any icon when not set', async () => {
-    fixture.componentRef.setInput('icon', null);
-
-    const button = await loader.getHarnessOrNull(MatButtonHarness);
-    const icon = await button.getHarnessOrNull(MatIconHarness);
-    expect(icon).toBe(null);
-  });
-
-  it('should emit buttonClick event when clicked', async () => {
-    const clickSpy = spyOn(component.buttonClick, 'emit');
-    const button = await loader.getHarness(MatButtonHarness);
-
-    await button.click();
-
-    expect(clickSpy).toHaveBeenCalled();
-  });
-
-  it('should add small-button class when small is set', () => {
-    fixture.componentRef.setInput('small', false);
-
-    fixture.detectChanges();
-
-    expect(fixture.nativeElement.querySelector('button')).not.toHaveClass('small-button');
-
-    fixture.componentRef.setInput('small', true);
-
-    fixture.detectChanges();
-
-    expect(fixture.nativeElement.querySelector('button')).toHaveClass('small-button');
-  });
-});

package/src/lib/components/buttons/flat-button/flat-button.component.ts

@@ -1,17 +0,0 @@
-import { NgClass } from '@angular/common';
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { MatButton } from '@angular/material/button';
-import { MatIcon } from '@angular/material/icon';
-import { TranslateModule } from '@ngx-translate/core';
-import { BaseButtonWithLabel } from '../base-button';
-
-@Component({
-  selector: 'cauca-flat-button',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [MatIcon, MatButton, TranslateModule, NgClass],
-  templateUrl: './flat-button.component.html',
-  styleUrl: './flat-button.component.scss'
-})
-export class FlatButtonComponent extends BaseButtonWithLabel {
-}

package/src/lib/components/buttons/icon-button/icon-button.component.html

@@ -1,3 +0,0 @@
-<button (mouseenter)="onMouseEnter()" (mouseleave)="onMouseLeave()" mat-icon-button onclick="this.blur()" (click)="buttonClick.emit();" [disabled]="buttonDisabled()">
-    <mat-icon [style.color]="iconColor()" [class.button-spin]="isInProgress()">{{iconToShow()}}</mat-icon>
-</button>

package/src/lib/components/buttons/icon-button/icon-button.component.scss

@@ -1,23 +0,0 @@
-:host {
-  display: flex;
-}
-
-.mdc-button.mat-white,
-.mat-stroked-button.mat-white {
-    color: white;
-    border-color: white;
-}
-.mdc-button.mat-white:hover,
-.mat-mdc-outlined-button.mat-white:hover {
-  background-color: transparent;
-}
-
-mat-icon {
-  color: #006496;
-}
-
-.mat-mdc-button-disabled {
-  .mat-icon {
-    color: rgba(18, 16, 20, 0.38);
-  }
-}

package/src/lib/components/buttons/icon-button/icon-button.component.spec.ts

@@ -1,38 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { IconButtonComponent } from './icon-button.component';
-import { HarnessLoader } from '@angular/cdk/testing';
-import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
-import { MatIconHarness } from '@angular/material/icon/testing';
-
-describe('IconButtonComponent', () => {
-  let component: IconButtonComponent;
-  let fixture: ComponentFixture<IconButtonComponent>;
-  let loader: HarnessLoader;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [IconButtonComponent]
-    })
-      .compileComponents();
-
-    fixture = TestBed.createComponent(IconButtonComponent);
-    loader = TestbedHarnessEnvironment.loader(fixture);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should display the provided icon', async() => {
-    fixture.componentRef.setInput('icon', 'twidelidou');
-
-    fixture.detectChanges();
-
-    const icon = await loader.getHarness(MatIconHarness);
-    expect(await icon.getName()).toBe(component.icon());
-  });
-
-});

package/src/lib/components/buttons/icon-button/icon-button.component.ts

@@ -1,15 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { MatIconButton } from '@angular/material/button';
-import { MatIcon } from '@angular/material/icon';
-import { BaseButton } from '../base-button';
-
-@Component({
-  selector: 'cauca-icon-button',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [MatIconButton, MatIcon],
-  templateUrl: './icon-button.component.html',
-  styleUrl: './icon-button.component.scss'
-})
-export class IconButtonComponent extends BaseButton {
-}

package/src/lib/components/buttons/link-button/link-button.component.html

@@ -1 +0,0 @@
-<cauca-button class="link-button" icon="link" type="stroked" color="primary" (buttonClick)="copyLink()" [label]="'copyLink'|translate" />

package/src/lib/components/buttons/link-button/link-button.component.scss

@@ -1,3 +0,0 @@
-.link-button {
-  text-decoration: dashed;
-}

package/src/lib/components/buttons/link-button/link-button.component.spec.ts

@@ -1,97 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { Clipboard } from '@angular/cdk/clipboard';
-import { MockComponents, MockPipe, ngMocks } from 'ng-mocks';
-import { TranslatePipe } from '@ngx-translate/core';
-
-import { LinkButtonComponent } from './link-button.component';
-import { ButtonComponent } from '../../button/button.component';
-
-describe('LinkButtonComponent', () => {
-  let component: LinkButtonComponent;
-  let fixture: ComponentFixture<LinkButtonComponent>;
-  let clipboardSpy: jasmine.SpyObj<Clipboard>;
-
-  beforeEach(async () => {
-    const clipboard = jasmine.createSpyObj('Clipboard', ['copy']);
-
-    await TestBed.configureTestingModule({
-      imports: [
-        LinkButtonComponent,
-        ...MockComponents(ButtonComponent),
-        MockPipe(TranslatePipe, value => value)
-      ],
-      providers: [
-        { provide: Clipboard, useValue: clipboard }
-      ]
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(LinkButtonComponent);
-    component = fixture.componentInstance;
-    clipboardSpy = TestBed.inject(Clipboard) as jasmine.SpyObj<Clipboard>;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should render cauca-button with correct properties', () => {
-    const buttonElement = ngMocks.find(fixture.debugElement, ButtonComponent);
-    const buttonComponent = buttonElement.componentInstance;    expect(buttonComponent.icon).toBe('link');
-    expect(buttonComponent.type).toBe('stroked');
-    expect(buttonComponent.color).toBe('primary');
-    expect(buttonComponent.label).toBe('copyLink');
-  });
-
-  it('should have link-button class', () => {
-    const buttonElement = ngMocks.find(fixture.debugElement, 'cauca-button');
-
-    expect(buttonElement.nativeElement.classList).toContain('link-button');
-  });
-
-  describe('copyLink', () => {
-    it('should copy correct link when segments are provided', () => {
-      fixture.componentRef.setInput('segments', ['path1', 'path2', 'path3']);
-
-      component.copyLink();
-
-      const expectedUrl = `${location.origin}/path1/path2/path3`;
-      expect(clipboardSpy.copy).toHaveBeenCalledWith(expectedUrl);
-    });
-
-    it('should copy origin only when empty segments array is provided', () => {
-      fixture.componentRef.setInput('segments', []);
-
-      component.copyLink();
-
-      expect(clipboardSpy.copy).toHaveBeenCalledWith(location.origin);
-    });
-
-    it('should copy link with single segment', () => {
-      fixture.componentRef.setInput('segments', ['single-path']);
-
-      component.copyLink();
-
-      const expectedUrl = `${location.origin}/single-path`;
-      expect(clipboardSpy.copy).toHaveBeenCalledWith(expectedUrl);
-    });
-
-    it('should handle segments with special characters', () => {
-      fixture.componentRef.setInput('segments', ['path-with-dash', 'path_with_underscore', 'path123']);
-
-      component.copyLink();
-
-      const expectedUrl = `${location.origin}/path-with-dash/path_with_underscore/path123`;
-      expect(clipboardSpy.copy).toHaveBeenCalledWith(expectedUrl);
-    });
-  });
-
-  it('should call copyLink when button is clicked', () => {
-    spyOn(component, 'copyLink');
-    const buttonElement = ngMocks.find(fixture.debugElement, ButtonComponent);
-
-    buttonElement.componentInstance.buttonClick.emit();
-
-    expect(component.copyLink).toHaveBeenCalled();
-  });
-});

package/src/lib/components/buttons/link-button/link-button.component.ts

@@ -1,25 +0,0 @@
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
-import { Clipboard } from '@angular/cdk/clipboard';
-import { ButtonComponent } from '../../button/button.component';
-import { TranslatePipe } from '@ngx-translate/core';
-
-
-@Component({
-    selector: 'cauca-link-button',
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    templateUrl: './link-button.component.html',
-    styleUrls: ['./link-button.component.scss'],
-    imports: [ButtonComponent, TranslatePipe]
-})
-export class LinkButtonComponent {
-    public readonly segments = input<string[]>();
-
-    public constructor(
-        private readonly clipboard: Clipboard,
-    ) {}
-
-    public copyLink(): void {
-        const link = location.origin + this.segments().map((segment: string) => `/${segment}`).join('');
-        this.clipboard.copy(link);
-    }
-}

package/src/lib/components/buttons/menu-item/menu-item.component.html

@@ -1,5 +0,0 @@
-<button (mouseenter)="onMouseEnter()" (mouseleave)="onMouseLeave()" mat-menu-item [ngClass]="small() ? 'small-button' : ''" class="change-password-menu-item" [matMenuTriggerFor]="trigger()" [disabled]="buttonDisabled()" (click)="buttonClick.emit()">
-    @if(showIcon() && iconAlignment() === 'left') { <mat-icon [style.color]="iconColor()" [class.button-spin]="isInProgress()">{{iconToShow()}}</mat-icon> }
-    @if (translateLabel()) {{{label()|translate}}} @else {{{label()}}}
-    @if(showIcon() && iconAlignment() === 'right') { <mat-icon [style.color]="iconColor()" [class.button-spin]="isInProgress()">{{iconToShow()}}</mat-icon> }
-</button>

package/src/lib/components/buttons/menu-item/menu-item.component.scss

@@ -1,6 +0,0 @@
-.mat-mdc-menu-item .mat-icon-no-color {
-    color: #0000008F
-}
-mat-icon {
-    color: inherit;
-}

package/src/lib/components/buttons/menu-item/menu-item.component.spec.ts

@@ -1,66 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { MenuItemComponent } from './menu-item.component';
-import { HarnessLoader } from '@angular/cdk/testing';
-import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
-import { MatIconHarness } from '@angular/material/icon/testing';
-import { MatMenuItemHarness } from '@angular/material/menu/testing';
-import { TranslatePipe } from '@ngx-translate/core';
-import { MockPipe } from 'ng-mocks';
-
-describe('MenuItemComponent', () => {
-  let component: MenuItemComponent;
-  let fixture: ComponentFixture<MenuItemComponent>;
-  let loader: HarnessLoader;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [
-        MenuItemComponent,
-      ],
-      declarations: [MockPipe(TranslatePipe, key => key)]
-    })
-      .compileComponents();
-
-    fixture = TestBed.createComponent(MenuItemComponent);
-    loader = TestbedHarnessEnvironment.loader(fixture);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should display the provided icon', async() => {
-    fixture.componentRef.setInput('icon', 'twidelidou');
-
-    fixture.detectChanges();
-
-    const icon = await loader.getHarness(MatIconHarness);
-    expect(await icon.getName()).toBe(component.icon());
-  });
-
-  it('should display the label', async () => {
-    fixture.componentRef.setInput('label', 'twidelidou');
-
-    fixture.detectChanges();
-
-    const button = await loader.getHarness(MatMenuItemHarness);
-    expect(await button.getText()).toContain(component.label());
-  });
-
-  it('should add small-button class when small is set', () => {
-    fixture.componentRef.setInput('small', false);
-
-    fixture.detectChanges();
-
-    expect(fixture.nativeElement.querySelector('button')).not.toHaveClass('small-button');
-
-    fixture.componentRef.setInput('small', true);
-
-    fixture.detectChanges();
-
-    expect(fixture.nativeElement.querySelector('button')).toHaveClass('small-button');
-  });
-});

package/src/lib/components/buttons/menu-item/menu-item.component.ts

@@ -1,19 +0,0 @@
-import { ChangeDetectionStrategy, Component, InputSignal, input, } from '@angular/core';
-import { MatIcon } from '@angular/material/icon';
-import { MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
-import { TranslateModule } from '@ngx-translate/core';
-import { BaseButtonWithLabel } from '../base-button';
-import { NgClass } from '@angular/common';
-
-@Component({
-  selector: 'cauca-menu-item',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [MatMenuItem, TranslateModule, MatIcon, MatMenuTrigger, NgClass],
-  templateUrl: './menu-item.component.html',
-  styleUrl: './menu-item.component.scss',
-})
-export class MenuItemComponent extends BaseButtonWithLabel {
-  public translateLabel: InputSignal<boolean> = input(false);
-  public trigger: InputSignal<any> = input();
-}

package/src/lib/components/buttons/raised-button/raised-button.component.html

@@ -1,5 +0,0 @@
-<button mat-raised-button [ngClass]="small() ? 'small-button' : ''" [color]="color()" onclick="this.blur()" [disabled]="buttonDisabled()" (click)="buttonClick.emit()">
-    @if (showIcon() && iconAlignment() === 'left') { <mat-icon [class.button-spin]="isInProgress()">{{iconToShow()}}</mat-icon> }
-    @if (translateLabel()) {{{label()|translate}}} @else {{{label()}}}
-    @if (showIcon() && iconAlignment() === 'right') { <mat-icon [class.button-spin]="isInProgress()">{{iconToShow()}}</mat-icon> }
-</button>

package/src/lib/components/buttons/raised-button/raised-button.component.scss

@@ -1,12 +0,0 @@
-.mdc-button.mat-white,
-.mat-stroked-button.mat-white {
-    color: white;
-    border-color: white;
-}
-.mdc-button.mat-white:hover,
-.mat-mdc-outlined-button.mat-white:hover {
-  background-color: transparent;
-}
-mat-icon {
-  color: inherit;
-}