Merge branch 'main' into 857-858-fix-ion-popconfirm

projects/ion/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brisanet/ion",
-  "version": "0.0.75",
+  "version": "0.0.76",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Brisanet/ion.git"

projects/ion/src/core/bn-table/bn-table.spec.ts

@@ -1,4 +1,4 @@
-import { Observable, of } from 'rxjs';
+import { Observable, of, throwError } from 'rxjs';
 import BnTable, { IBnTable } from './bn-table';
 import { BnService, IResponse } from '../api/http.interfaces';
 import { SmartTableEvent } from '../../public-api';
@@ -26,6 +26,14 @@ class MockEmptyService implements BnService<MockItemData> {
   }
 }
 
+// Defina um erro de exemplo
+const mockError = new Error('Request Error');
+class MockServiceError implements BnService<MockItemData> {
+  list(): Observable<IResponse<MockItemData>> {
+    return throwError(mockError);
+  }
+}
+
 describe('BnTable', () => {
   let bnTable: BnTable<MockItemData>;
   const mockService: MockService = new MockService();
@@ -281,3 +289,20 @@ describe('BnTable', () => {
     });
   });
 });
+
+describe('BnTable Error', () => {
+  let bnTable: BnTable<MockItemData>;
+  const mockServiceWithError: MockServiceError = new MockServiceError();
+
+  it('should stop loading when receive an error', () => {
+    const config: IBnTable<MockItemData> = {
+      service: mockServiceWithError,
+      tableConfig: {
+        columns: [{ label: 'Name', key: 'name' }],
+        actions: [{ label: 'Remove', icon: 'trash' }],
+      },
+    };
+    bnTable = new BnTable<MockItemData>({ ...config });
+    expect(bnTable.configTable.loading).toBeFalsy();
+  });
+});

projects/ion/src/core/bn-table/bn-table.ts

@@ -1,5 +1,5 @@
 import { forkJoin, of } from 'rxjs';
-import { take } from 'rxjs/operators';
+import { finalize, take } from 'rxjs/operators';
 import { LIST_OF_PAGE_OPTIONS } from '../../lib/pagination/pagination.component';
 import { ConfigTable, EventTable } from '../../lib/table/utilsTable';
 import {
@@ -95,34 +95,34 @@ export default class BnTable<DataType> {
       .list({ ...this.payload, total: false })
       .pipe(take(1));
 
-    forkJoin([totalRequest$, dataRequest$]).subscribe(
-      (response) => {
-        this.configTable.loading = false;
-
-        const [totalResponse, dataResponse]: [
-          IResponse<DataType>,
-          IResponse<DataType>
-        ] = response;
-
-        if (totalResponse && totalResponse.total !== null) {
-          this.configTable.pagination = {
-            ...this.configTable.pagination,
-            total: totalResponse.total || 0,
-          };
-        }
-
-        this.configTable.data = dataResponse.dados || dataResponse.data || [];
-
-        if (this.formatData) {
-          this.configTable.data = this.formatData(this.configTable.data);
+    forkJoin([totalRequest$, dataRequest$])
+      .pipe(finalize(() => (this.configTable.loading = false)))
+      .subscribe(
+        (response) => {
+          const [totalResponse, dataResponse]: [
+            IResponse<DataType>,
+            IResponse<DataType>
+          ] = response;
+
+          if (totalResponse && totalResponse.total !== null) {
+            this.configTable.pagination = {
+              ...this.configTable.pagination,
+              total: totalResponse.total || 0,
+            };
+          }
+
+          this.configTable.data = dataResponse.dados || dataResponse.data || [];
+
+          if (this.formatData) {
+            this.configTable.data = this.formatData(this.configTable.data);
+          }
+        },
+        () => {
+          // TODO: add notification service
+          // const msg: string = error.msg || error.error.msg;
+          // this.notify.error('Erro', msg);
         }
-      },
-      (error) => {
-        // TODO: add notification service
-        // const msg: string = error.msg || error.error.msg;
-        // this.notify.error('Erro', msg);
-      }
-    );
+      );
   }
 
   events(event: SmartTableEvent): void {

projects/ion/src/lib/core/types/input-select.ts

@@ -0,0 +1,23 @@
+import { EventEmitter } from '@angular/core';
+import { DropdownItem } from './dropdown';
+
+export type ValueToEmmit = {
+  optionSelected: SelectOption;
+  firstValue: string;
+  secondValue?: string;
+};
+
+export interface SelectOption extends DropdownItem {
+  multiple?: boolean;
+  firstPlaceholder?: string;
+  secondPlaceholder?: string;
+}
+
+export interface IonInputSelectProps {
+  name: string;
+  disabled?: boolean;
+  value?: string;
+  secondValue?: string;
+  selectOptions?: SelectOption[];
+  valueChange?: EventEmitter<ValueToEmmit>;
+}

projects/ion/src/lib/core/types/input.ts

@@ -1,8 +1,9 @@
 import { EventEmitter } from '@angular/core';
 import { SafeAny } from '../../utils/safe-any';
 import { IconDirection } from './icon';
+import { IonButtonProps } from './button';
 
-export type InputType = 'text' | 'password';
+export type InputType = 'text' | 'password' | 'number' | 'email';
 
 export interface IonInputProps {
   placeholder?: string;
@@ -13,8 +14,8 @@ export interface IonInputProps {
   valid?: boolean;
   invalid?: boolean;
   inputButton?: boolean;
-  inputIconButton?: boolean;
   clickButton?: EventEmitter<SafeAny>;
+  inputButtonConfig?: IonButtonProps;
   value?: string;
   clearButton?: boolean;
   inputType?: InputType;

projects/ion/src/lib/icon/icon.component.html

@@ -5,5 +5,5 @@
   viewBox="0 0 24 24"
   xmlns="http://www.w3.org/2000/svg"
   [id]="'ion-icon-' + type"
-  [innerHTML]="getPath()"
+  #svgElement
 ></svg>

projects/ion/src/lib/icon/icon.component.ts

@@ -1,5 +1,11 @@
-import { Component, ElementRef, Input } from '@angular/core';
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  Input,
+  Renderer2,
+  ViewChild,
+} from '@angular/core';
 import { iconsPaths } from './svgs/icons';
 import { IconType } from '../core/types/icon';
 
@@ -8,14 +14,16 @@ import { IconType } from '../core/types/icon';
   templateUrl: './icon.component.html',
   styleUrls: ['./icon.component.scss'],
 })
-export class IonIconComponent {
+export class IonIconComponent implements AfterViewInit {
   @Input() type: IconType;
   @Input() size = 24;
   @Input() color = '#282b33';
 
-  constructor(private sanitizer: DomSanitizer, private el: ElementRef) {}
+  @ViewChild('svgElement', { static: true }) svgElement: ElementRef;
 
-  getPath(): SafeHtml {
+  constructor(private renderer: Renderer2) {}
+
+  ngAfterViewInit(): void {
     if (iconsPaths[this.type]) {
       const paths = iconsPaths[this.type].split('/>');
       const resultPaths = paths
@@ -25,7 +33,12 @@ export class IonIconComponent {
             : '';
         })
         .join('');
-      return this.sanitizer.bypassSecurityTrustHtml(resultPaths);
+
+      this.renderer.setProperty(
+        this.svgElement.nativeElement,
+        'innerHTML',
+        resultPaths
+      );
     }
   }
 }

projects/ion/src/lib/icon/mock/list-icons.module.ts

@@ -4,10 +4,30 @@ import { IonIconComponent } from '../icon.component';
 import { IonInputComponent } from '../../input/input.component';
 import { FormsModule } from '@angular/forms';
 import { IonNotificationComponent } from '../../notification/component/notification.component';
+import { IonButtonComponent } from '../../button/button.component';
+import { IonBadgeComponent } from '../../badge/badge.component';
+import { IonDropdownComponent } from '../../dropdown/dropdown.component';
+import { IonNoDataComponent } from '../../no-data/no-data.component';
 
 @NgModule({
-  declarations: [IonInputComponent, IonIconComponent, IonNotificationComponent],
+  declarations: [
+    IonInputComponent,
+    IonIconComponent,
+    IonNotificationComponent,
+    IonButtonComponent,
+    IonBadgeComponent,
+    IonDropdownComponent,
+    IonNoDataComponent,
+  ],
   imports: [CommonModule, FormsModule],
-  exports: [IonInputComponent, IonIconComponent, IonNotificationComponent],
+  exports: [
+    IonInputComponent,
+    IonIconComponent,
+    IonNotificationComponent,
+    IonButtonComponent,
+    IonBadgeComponent,
+    IonDropdownComponent,
+    IonNoDataComponent,
+  ],
 })
 export class ListIconsMockModule {}

projects/ion/src/lib/input-select/input-select.component.html

@@ -0,0 +1,60 @@
+<div class="input-wraper" data-testid="ion-input-select">
+  <div
+    class="input-select-container"
+    [class.multiple-input]="currentOption?.multiple"
+  >
+    <div class="dropdown-container" (clickOutside)="onClickOutside()">
+      <button
+        data-testid="ion-select-button"
+        (click)="handleClick()"
+        class="dropdown-container__button"
+        [disabled]="disabled"
+      >
+        <span>{{ currentOption?.label }}</span>
+        <ion-icon type="semi-down" color="#8D93A5"></ion-icon>
+      </button>
+
+      <div *ngIf="!!selectOptions && dropdownVisible" class="ion-btn-dropdown">
+        <ion-dropdown
+          [options]="selectOptions"
+          (selected)="handleSelect($event)"
+          [multiple]="false"
+          [required]="true"
+        >
+        </ion-dropdown>
+      </div>
+    </div>
+
+    <div class="input-container">
+      <div class="input first-input" [class.disabled]="disabled">
+        <input
+          data-testid="first-input"
+          [id]="name"
+          type="text"
+          class="my-input"
+          [attr.placeholder]="
+            currentOption?.firstPlaceholder || 'Digite o valor'
+          "
+          [disabled]="disabled"
+          [(ngModel)]="value"
+          (ngModelChange)="handleChange()"
+        />
+      </div>
+    </div>
+    <div *ngIf="currentOption?.multiple" class="separator">-</div>
+    <div *ngIf="currentOption?.multiple" class="input-container">
+      <div class="input second-input" [class.disabled]="disabled">
+        <input
+          data-testid="second-input"
+          [id]="name"
+          type="text"
+          class="my-input"
+          [attr.placeholder]="currentOption?.secondPlaceholder || 'Valor Final'"
+          [disabled]="disabled"
+          [(ngModel)]="secondValue"
+          (ngModelChange)="handleChange()"
+        />
+      </div>
+    </div>
+  </div>
+</div>

projects/ion/src/lib/input-select/input-select.component.scss

@@ -0,0 +1,78 @@
+@import '../input/input.component.scss';
+@import '../../styles/index.scss';
+
+.input-wraper {
+  display: flex;
+  flex-direction: column;
+  gap: spacing(0.5);
+
+  .input-select-container {
+    display: flex;
+
+    .input {
+      padding: 6px 12px;
+      border-radius: 0 spacing(1) spacing(1) 0;
+    }
+  }
+}
+
+.dropdown-container {
+  &__button {
+    cursor: pointer;
+    background-color: $neutral-2;
+
+    display: flex;
+    align-items: center;
+    gap: spacing(1);
+
+    padding: 6px 12px;
+    min-width: max-content;
+    border-radius: spacing(1) 0px 0px spacing(1);
+    border: 1px solid $neutral-5;
+    border-right: none;
+
+    @include font-size-sm;
+    font-weight: 400;
+    color: $neutral-7;
+  }
+}
+
+.multiple-input {
+  .first-input {
+    border-right: none;
+    border-radius: 0 !important;
+  }
+
+  .second-input {
+    border-left: none;
+  }
+
+  .first-input,
+  .second-input {
+    position: relative;
+    z-index: 2;
+    &:hover {
+      border: 1px solid $primary-4;
+    }
+
+    &:focus-within {
+      border: 1px solid $primary-4;
+      @include add-colors($primary-5, 2px solid, $primary-2);
+    }
+
+    &:active {
+      border: 1px solid $primary-4;
+      @include add-colors($primary-5, 2px solid, $primary-2);
+    }
+  }
+}
+
+.separator {
+  background-color: $neutral-1;
+  color: $neutral-5;
+  line-height: 20px;
+
+  border-top: 1px solid $neutral-5;
+  border-bottom: 1px solid $neutral-5;
+  padding: spacing(1) spacing(1.5);
+}