feat(context-tabs): novo componente

Implementa novo componente Context-Tabs

fixes contexts-tabs/DTHFUI-11652

Author: CSimoesJr

projects/ui/src/lib/components/components.module.ts

@@ -41,6 +41,7 @@ import { PoSearchModule } from './po-search';
 import { PoSlideModule } from './po-slide/po-slide.module';
 import { PoStepperModule } from './po-stepper/po-stepper.module';
 import { PoTableModule } from './po-table/po-table.module';
+import { PoContextTabsModule } from './po-context-tabs/po-context-tabs.module';
 import { PoTabsModule } from './po-tabs/po-tabs.module';
 import { PoTagModule } from './po-tag/po-tag.module';
 import { PoToolbarModule } from './po-toolbar/po-toolbar.module';
@@ -84,6 +85,7 @@ import { PoToasterModule } from './po-toaster';
     PoStepperModule,
     PoTableModule,
     PoTabsModule,
+    PoContextTabsModule,
     PoTagModule,
     PoToolbarModule,
     PoTreeViewModule,
@@ -132,6 +134,7 @@ import { PoToasterModule } from './po-toaster';
     PoSlideModule,
     PoStepperModule,
     PoTableModule,
+    PoContextTabsModule,
     PoTabsModule,
     PoTagModule,
     PoToolbarModule,

projects/ui/src/lib/components/index.ts

@@ -39,6 +39,7 @@ export * from './po-progress/index';
 export * from './po-slide/index';
 export * from './po-stepper/index';
 export * from './po-table/index';
+export * from './po-context-tabs/index';
 export * from './po-tabs/index';
 export * from './po-tag/index';
 export * from './po-toolbar/index';

projects/ui/src/lib/components/po-context-tabs/index.ts

@@ -0,0 +1,4 @@
+export * from './po-context-tab-button/po-context-tab-button.component';
+export * from './po-context-tabs.component';
+
+export * from './po-context-tabs.module';

projects/ui/src/lib/components/po-context-tabs/po-context-tab-button/po-context-tab-button.component.html

@@ -0,0 +1,37 @@
+<div
+  #tabButtom
+  role="tab"
+  [p-tooltip]="widthButton > 239 || showTooltip ? label : ''"
+  p-tooltip-position="top"
+  class="po-tab-button-default"
+  [id]="id"
+  [ngClass]="{ 'po-tab-focusable': !disabled && !hide }"
+  [attr.tabindex]="disabled ? null : 0"
+  [attr.aria-selected]="active"
+  [class.po-tab-button-active]="active"
+  [class.po-tab-button-disabled]="disabled"
+  (click)="onClick()"
+  (focusin)="onFocusIn()"
+  (focusout)="onFocusOut()"
+  (keyup.enter)="onClick()"
+>
+  <div class="po-tab-button-content">
+    <span [ngClass]="!hideClose ? 'po-context-tab-button-label' : 'po-tab-button-label'" class="po-text-ellipsis">
+      {{ label }}
+    </span>
+    <div
+      class="po-tab-button-content-close-icon"
+      *ngIf="!hideClose"
+      (click)="closeTab($event)"
+      (keydown)="closeTab($event)"
+    >
+      <po-icon
+        [tabIndex]="activeCloseIcon ? 0 : -1"
+        [attr.aria-label]="literals.close"
+        p-icon="ICON_CLOSE"
+        class="po-tab-button-icon-close"
+      ></po-icon>
+    </div>
+  </div>
+</div>
+<div [ngClass]="{ 'po-tab-border-active': active, 'po-tab-border-disabled': !active }"></div>

projects/ui/src/lib/components/po-context-tabs/po-context-tab-button/po-context-tab-button.component.spec.ts

@@ -0,0 +1,126 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { configureTestSuite } from '../../../util-test/util-expect.spec';
+import { PoContextTabButtonComponent } from './po-context-tab-button.component';
+
+describe('PoContextTabButtonComponent:', () => {
+  let component: PoContextTabButtonComponent;
+  let fixture: ComponentFixture<PoContextTabButtonComponent>;
+  let nativeElement: any;
+
+  configureTestSuite(() => {
+    TestBed.configureTestingModule({
+      declarations: [PoContextTabButtonComponent]
+    });
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PoContextTabButtonComponent);
+    component = fixture.componentInstance;
+
+    nativeElement = fixture.debugElement.nativeElement;
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('Methods:', () => {
+    it('afterViewInit: should apply initial properties', () => {
+      component.ngAfterViewInit();
+
+      expect(component.afterViewChecked).toBeTrue();
+    });
+
+    it('ngOnChanges: should emit `changeState` if hide currentValue is true', () => {
+      spyOn(component.changeState, 'emit');
+
+      component.ngOnChanges(<any>{ hide: { currentValue: true } });
+
+      expect(component.changeState.emit).toHaveBeenCalled();
+    });
+
+    it('ngOnChanges: should emit `changeState` if disabled currentValue is true', () => {
+      spyOn(component.changeState, 'emit');
+
+      component.ngOnChanges(<any>{ disabled: { currentValue: true } });
+
+      expect(component.changeState.emit).toHaveBeenCalled();
+    });
+
+    it('ngOnChanges: shouldn`t emit `changeState` if hide or disabled currentValue is false', () => {
+      spyOn(component.changeState, 'emit');
+
+      component.ngOnChanges(<any>{ disabled: { currentValue: false }, hide: { currentValue: false } });
+
+      expect(component.changeState.emit).not.toHaveBeenCalled();
+    });
+
+    it('ngOnChanges: should emit `changeVisible` if hide currentValue is true', () => {
+      spyOn(component.changeVisible, 'emit');
+
+      component.afterViewChecked = true;
+      component.ngOnChanges(<any>{ hide: { currentValue: true } });
+
+      expect(component.changeVisible.emit).toHaveBeenCalled();
+    });
+
+    it('should emit close when closeTab is called with Enter key and not disabled', () => {
+      const event = new KeyboardEvent('keydown', { key: 'Enter' });
+      spyOn(event, 'preventDefault');
+      spyOn(event, 'stopPropagation');
+      spyOn(component.close, 'emit');
+
+      component.disabled = false;
+
+      component.closeTab(event as any);
+
+      expect(event.preventDefault).toHaveBeenCalled();
+      expect(event.stopPropagation).toHaveBeenCalled();
+      expect(component.close.emit).toHaveBeenCalled();
+    });
+
+    it('should stopPropagation when closeTab is called with ArrowLeft or ArrowRight key', () => {
+      const event = new KeyboardEvent('keydown', { code: 'ArrowLeft', key: 'ArrowLeft' });
+      spyOn(event, 'preventDefault');
+      spyOn(event, 'stopPropagation');
+      spyOn(component.close, 'emit');
+
+      component.closeTab(event as any);
+
+      expect(event.preventDefault).toHaveBeenCalled();
+      expect(event.stopPropagation).toHaveBeenCalled();
+      expect(component.close.emit).not.toHaveBeenCalled();
+
+      const event2 = new KeyboardEvent('keydown', { code: 'ArrowRight', key: 'ArrowLeft' });
+      spyOn(event2, 'preventDefault');
+      spyOn(event2, 'stopPropagation');
+
+      component.closeTab(event2 as any);
+
+      expect(event2.preventDefault).toHaveBeenCalled();
+      expect(event2.stopPropagation).toHaveBeenCalled();
+    });
+
+    it('should not emit close if component is disabled', () => {
+      const event = new KeyboardEvent('keydown', { key: 'Enter' });
+      spyOn(component.close, 'emit');
+
+      component.disabled = true;
+
+      component.closeTab(event as any);
+
+      expect(component.close.emit).not.toHaveBeenCalled();
+    });
+
+    it('should activate close icon on focus in and deactivate on focus out', () => {
+      component.disabled = false;
+
+      component.onFocusIn();
+      expect(component.activeCloseIcon).toBeTrue();
+
+      component.onFocusOut();
+      expect(component.activeCloseIcon).toBeFalse();
+    });
+  });
+});

projects/ui/src/lib/components/po-context-tabs/po-context-tab-button/po-context-tab-button.component.ts

@@ -0,0 +1,67 @@
+import { AfterViewInit, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+
+import { PoTabButtonComponent } from '../../po-tabs/po-tab-button/po-tab-button.component';
+
+/**
+ * @docsPrivate
+ *
+ * @description
+ *
+ * Componente responsável por manipular os botões de aba.
+ */
+@Component({
+  selector: 'po-context-tab-button',
+  templateUrl: './po-context-tab-button.component.html',
+  standalone: false
+})
+export class PoContextTabButtonComponent extends PoTabButtonComponent implements OnChanges, AfterViewInit {
+  @Input('p-hide-close') hideClose: boolean = false;
+  @Input('p-show-tooltip') showTooltip: boolean = false;
+  @Input('p-literals') literals;
+  @Output('p-close') close: EventEmitter<any> = new EventEmitter<any>();
+
+  // Função sera emitida quando ocorre mudança da visibilidade da tab
+  @Output('p-change-visible') changeVisible = new EventEmitter();
+
+  activeCloseIcon = false;
+  afterViewChecked = false;
+
+  ngAfterViewInit(): void {
+    this.afterViewChecked = true;
+    this.widthButton = this.tabButtom.nativeElement.offsetWidth;
+    this.changeDetector.detectChanges();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.hide?.currentValue || changes.disabled?.currentValue) {
+      this.changeState.emit(this);
+    }
+
+    if (!changes.hide?.firstChange && changes.hide && this.afterViewChecked) {
+      this.changeVisible.emit(this);
+    }
+  }
+
+  closeTab(event) {
+    if (event.code === 'ArrowLeft' || event.code === 'ArrowRight') {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+
+    if ((!event.key || event?.key === 'Enter') && !this.disabled) {
+      event.preventDefault();
+      event.stopPropagation();
+      this.close.emit(this.tabButtom);
+    }
+  }
+
+  onFocusIn() {
+    if (!this.disabled) {
+      this.activeCloseIcon = true;
+    }
+  }
+
+  onFocusOut() {
+    this.activeCloseIcon = false;
+  }
+}

projects/ui/src/lib/components/po-context-tabs/po-context-tabs.component.html

@@ -0,0 +1,48 @@
+<div class="po-tabs-container">
+  <div #containerTabs class="po-tabs-header">
+    <div class="po-tabs-button-wrapper" role="tablist">
+      <ng-container *ngFor="let tab of tabs; trackBy: trackByFn">
+        <po-context-tab-button
+          *ngIf="!tab.removed"
+          #tabButton
+          class="po-tab-button"
+          [class.po-tab-button-aa]="size === 'small'"
+          [p-active]="tab.active"
+          [p-disabled]="tab.disabled"
+          [p-show-tooltip]="tab.showTooltip"
+          [p-hide]="tab.hide"
+          [p-id]="tab.id"
+          [hidden]="tab.hide"
+          [p-hide-close]="tab.hideClose"
+          [attr.disabled]="tab.disabled"
+          [p-label]="tab.label"
+          [p-literals]="literals"
+          [id]="tab.id"
+          (keyup.enter)="closeListbox()"
+          (p-activated)="onTabActive(tab)"
+          (p-change-state)="onTabChangeState(tab)"
+          (p-change-visible)="onChangeVisibilityTab(tab)"
+          (p-click)="selectedTab(tab)"
+          (p-close)="closeTab(tab)"
+        >
+        </po-context-tab-button>
+      </ng-container>
+
+      <po-tab-dropdown
+        #tabDropdown
+        *ngIf="isShowTabDropdown"
+        class="po-tab-dropdown"
+        [class.po-tab-dropdown-device]="!tabsDefault?.length"
+        [p-label]="literals.moreTabs"
+        [p-size]="size"
+        [p-tabs]="overflowedTabs"
+        (p-change-state)="onTabChangeState($event)"
+        (p-click)="onTabActiveByDropdown($event)"
+      >
+      </po-tab-dropdown>
+    </div>
+  </div>
+</div>
+<div class="po-tabs-content">
+  <ng-content></ng-content>
+</div>