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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,12 @@
+.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/raised-button/raised-button.component.spec.ts

@@ -0,0 +1,108 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RaisedButtonComponent } from './raised-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';
+import { TranslatePipe } from '@ngx-translate/core';
+import { MockPipe } from 'ng-mocks';
+
+describe('RaisedButtonComponent', () => {
+  let component: RaisedButtonComponent;
+  let fixture: ComponentFixture<RaisedButtonComponent>;
+  let loader: HarnessLoader;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        RaisedButtonComponent,
+      ],
+      declarations: [MockPipe(TranslatePipe, key => key)]
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(RaisedButtonComponent);
+    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);
+
+    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();
+  });
+
+  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/raised-button/raised-button.component.ts

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

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

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

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

@@ -0,0 +1,81 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TranslatePipe } from '@ngx-translate/core';
+import { MockComponent, MockPipe, ngMocks } from 'ng-mocks';
+import { RefreshButtonComponent } from './refresh-button.component';
+import { ButtonComponent } from '../../button/button.component';
+
+describe('RefreshButtonComponent', () => {
+    let component: RefreshButtonComponent;
+    let fixture: ComponentFixture<RefreshButtonComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [RefreshButtonComponent]
+        })
+        .overrideComponent(RefreshButtonComponent, {
+            remove: { imports: [ButtonComponent, TranslatePipe] },
+            add: { imports: [MockComponent(ButtonComponent), MockPipe(TranslatePipe, value => value)] }
+        })
+        .compileComponents();
+
+        fixture = TestBed.createComponent(RefreshButtonComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('should have correct button properties', () => {
+        const buttonDebugElement = ngMocks.find(fixture, 'cauca-button')?.componentInstance;
+
+        expect(buttonDebugElement).toBeDefined();
+        expect(buttonDebugElement.type).toBe('stroked');
+        expect(buttonDebugElement.icon).toBe('refresh');
+        expect(buttonDebugElement.label).toBe('refresh');
+    });
+
+    it('should emit refreshEvent when refresh method is called', () => {
+        spyOn(component.refreshEvent, 'emit');
+
+        component.refresh();
+
+        expect(component.refreshEvent.emit).toHaveBeenCalledWith();
+        expect(component.refreshEvent.emit).toHaveBeenCalledTimes(1);
+    });
+
+    it('should call refresh method when button is clicked', () => {
+        spyOn(component, 'refresh');
+        const buttonElement = ngMocks.find(fixture, ButtonComponent);
+
+        ngMocks.trigger(buttonElement, 'buttonClick');
+
+        expect(component.refresh).toHaveBeenCalledWith();
+        expect(component.refresh).toHaveBeenCalledTimes(1);
+    });
+
+    it('should emit refreshEvent when button is clicked', () => {
+        spyOn(component.refreshEvent, 'emit');
+        const buttonElement = ngMocks.find(fixture, ButtonComponent);
+
+        ngMocks.trigger(buttonElement, 'buttonClick');
+
+        expect(component.refreshEvent.emit).toHaveBeenCalledWith();
+        expect(component.refreshEvent.emit).toHaveBeenCalledTimes(1);
+    });    it('should render cauca-button with expected template', () => {
+        const buttonDebugElement = ngMocks.find(fixture, 'cauca-button');
+
+        // Check that the button component is rendered
+        expect(buttonDebugElement).toBeDefined();
+    });
+
+    it('should have EventEmitter as refreshEvent', () => {
+        expect(component.refreshEvent).toBeDefined();
+        expect(component.refreshEvent.constructor.name).toContain('EventEmitter');
+    });
+
+    it('should initialize with default values', () => {
+        expect(component.refreshEvent).toBeDefined();
+    });
+});

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

@@ -0,0 +1,19 @@
+import { Component, ChangeDetectionStrategy, EventEmitter, Output, Input } from '@angular/core';
+import { ButtonComponent } from '../../button/button.component';
+import { TranslatePipe } from '@ngx-translate/core';
+
+@Component({
+    selector: 'cauca-refresh-button',
+    imports: [ButtonComponent, TranslatePipe],
+    templateUrl: './refresh-button.component.html',
+    styleUrl: './refresh-button.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class RefreshButtonComponent {
+    @Input() public inProgress: boolean = false;
+    @Output() public refreshEvent: EventEmitter<void> = new EventEmitter<void>();
+
+    public refresh(): void {
+        this.refreshEvent.emit();
+    }
+}

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

@@ -0,0 +1,3 @@
+<button (mouseenter)="onMouseEnter()" (mouseleave)="onMouseLeave()" onclick="this.blur()" (click)="buttonClick.emit();" [disabled]="buttonDisabled()">
+    @if (translateLabel()) {{{label()|translate}}} @else {{{label()}}}
+</button>

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

@@ -0,0 +1,34 @@
+button {
+  border-radius: 100px;
+  background-color: inherit;
+  outline: none;
+  border-width: 0px;
+  height: 40px;
+  width: 40px;
+  cursor: pointer;
+}
+
+: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/round-button/round-button.component.spec.ts

@@ -0,0 +1,26 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RoundButtonComponent } from './round-button.component';
+import { MockModule, MockPipe } from 'ng-mocks';
+import { TranslateModule, TranslatePipe } from '@ngx-translate/core';
+
+describe('RoundButtonComponent', () => {
+  let component: RoundButtonComponent;
+  let fixture: ComponentFixture<RoundButtonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [RoundButtonComponent, MockModule(TranslateModule)],
+      declarations: [MockPipe(TranslatePipe, key => key)]
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(RoundButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,14 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { BaseButtonWithLabel } from '../base-button';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'cauca-round-button',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [TranslateModule],
+  templateUrl: './round-button.component.html',
+  styleUrl: './round-button.component.scss'
+})
+export class RoundButtonComponent extends BaseButtonWithLabel {
+}

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

@@ -0,0 +1,5 @@
+<button mat-stroked-button [ngClass]="small() ? 'small-button' : ''" [color]="color()" onclick="this.blur()" [disabled]="buttonDisabled()" (click)="buttonClick.emit()" [class.icon-only]="!label()">
+    @if(showIcon() && iconAlignment() === 'left') { <mat-icon [class.button-spin]="isInProgress()">{{iconToShow()}}</mat-icon> }
+    @if (label()) { @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/stroked-button/stroked-button.component.scss

@@ -0,0 +1,23 @@
+.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;
+}
+
+.icon-only {
+  width: 36px;
+  height: 36px;
+  min-width: 38px;
+  padding: 0px;
+}
+
+.icon-only mat-icon {
+  margin: 0;
+}
+mat-icon {
+  color: inherit;
+}