@dropi/ui-components 1.0.0

package/src/components-source/radio-selection-list/radio-selection-list.component.html

@@ -0,0 +1,107 @@
+<div class="options-container">
+  <div class="search-container" *ngIf="showFilter">
+    <span class="input-icon">
+      <i class="pi pi-search"></i>
+      <input
+        type="text"
+        pInputText
+        [formControl]="searchControl"
+        [placeholder]="filterPlaceholder"
+      />
+    </span>
+  </div>
+
+  <div class="options">
+    <ng-container *ngFor="let option of filteredOptions">
+      <div
+        (click)="selectOption(option.id)"
+        (keyup)="selectOption(option.id)"
+        [ngClass]="{
+          selected: selectedOption === option.id,
+          'half-width': option.halfWidth!,
+          'full-width': !option.halfWidth,
+          disabled: option?.disabled
+        }"
+        [id]="'option-' + option.id"
+        class="option-container"
+      >
+        <div class="option">
+          <div class="selection" [ngClass]="{ box: typeLayout === 'description' }">
+            <div class="radio" [ngClass]="{ selected: selectedOption === option.id }">
+              <div class="circle" *ngIf="selectedOption === option.id"></div>
+            </div>
+            <div *ngIf="typeLayout !== 'description'" class="data-container">
+              <p *ngIf="typeLayout === 'default'" class="option-name">{{ option.name }}</p>
+              <div
+                class="description"
+                *ngIf="
+                  option.description && (selectedOption === option.id || alwaysShowDescription)
+                "
+              >
+                <p *ngIf="typeLayout !== 'description'" [innerHTML]="option.description"></p>
+              </div>
+            </div>
+
+            <ng-container *ngIf="typeLayout === 'description'">
+              <img [src]="option.iconImages[0].url" alt="img" class="img" />
+              <div class="Body-M-Regular">
+                <div class="Body-M-Regular">{{ option.name }}</div>
+                <div
+                  class="description-wrapper"
+                  [ngClass]="{ 'has-icons': option.descriptionIcons?.length > 0 }"
+                >
+                  <p class="description Body-S-Regular" [innerHTML]="option.description"></p>
+                  <div class="description-icons" *ngIf="option.descriptionIcons?.length > 0">
+                    <img
+                      *ngFor="let icon of option.descriptionIcons"
+                      [src]="icon.url"
+                      [alt]="icon.alt"
+                    />
+                  </div>
+                </div>
+                <!-- <div
+                  class="description"
+                  *ngIf="
+                    option.description && (selectedOption === option.id || alwaysShowDescription)
+                  "
+                ></div> -->
+              </div>
+            </ng-container>
+          </div>
+          <div
+            class="icons-container"
+            *ngIf="option?.iconImages?.length > 0 && typeLayout === 'default'"
+          >
+            <div class="icon" *ngFor="let icon of option.iconImages">
+              <img [src]="icon.url" [alt]="icon.alt" />
+            </div>
+          </div>
+        </div>
+
+        <div
+          class="table-contents description"
+          *ngIf="
+            option.table?.length > 0 && (selectedOption === option.id || alwaysShowDescription)
+          "
+        >
+          <div class="item-table" *ngFor="let item of option.table">
+            <div class="item-table-name">{{ item.name }}</div>
+            <div class="item-table-value">
+              {{ item.value }}
+              <!-- <currency
+            [value]="item.value"
+            ></currency> -->
+            </div>
+          </div>
+        </div>
+
+        <div class="tag" *ngIf="option.tag">
+          {{ option.tag }}
+        </div>
+      </div>
+      <ng-container *ngIf="option.id === withExtraContentId && extraContent">
+        <ng-container *ngTemplateOutlet="extraContent"></ng-container>
+      </ng-container>
+    </ng-container>
+  </div>
+</div>

package/src/components-source/radio-selection-list/radio-selection-list.component.scss

@@ -0,0 +1,280 @@
+.options-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  color: var(--Text-text-paragraph, #7b8190);
+  font-family: Inter, sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+}
+
+.option-container {
+  display: flex;
+  border: 1px solid var(--Gray-200, #c3c9d9);
+  border-radius: 8px;
+  flex-direction: column;
+  padding: var(--Size-4, 16px);
+  cursor: pointer;
+  transition: 0.4s all ease;
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+
+  &.half-width {
+    width: calc(50% - 8px);
+  }
+
+  &.selected {
+    border: 1px solid var(--Primary-Primary-500, #f49a3d);
+    background-color: var(--Primary-Primary-50, #fef8f1);
+  }
+
+  &:hover {
+    border: 1px solid var(--Primary-Primary-500, #f49a3d);
+    transition: 0.4s all ease;
+  }
+
+  .tag {
+    // height: 20px;
+    padding: 1px 8px;
+    position: absolute;
+    right: 16px;
+    top: 13px;
+    border-radius: var(--Border-5, 32px);
+    background: var(--Success-Success-500, #0abb87);
+    color: var(--White, #fff);
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 16px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+.options {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.option {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.selection {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.radio {
+  width: 20px;
+  height: 20px;
+  min-width: 20px;
+  min-height: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #fff;
+  border-radius: 50%;
+  border: 2px solid var(--Gray-200, #c3c9d9);
+  margin-right: var(--Size-3);
+
+  .circle {
+    border-radius: 50%;
+    background-color: var(--Primary-Primary-500, #f49a3d);
+    width: 12px;
+    height: 12px;
+  }
+
+  &.selected {
+    border-color: var(--Primary-Primary-500, #f49a3d);
+  }
+
+  i {
+    font-size: 9px;
+    font-weight: bold;
+  }
+}
+.img {
+  width: 48px;
+  height: 48px;
+  border-radius: 32px;
+}
+
+.option-name {
+  margin: 0px;
+  color: var(--Gray-Gray-700);
+}
+
+.icons-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.icon {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  background-color: #f5f6f8;
+  margin-left: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+
+  img {
+    max-width: 100%;
+  }
+}
+
+.description {
+  margin-bottom: 0;
+
+  p {
+    margin: 0px;
+    color: #525252;
+    font-size: 12px;
+    line-height: 16px;
+  }
+}
+
+.item-table {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-right: 20px;
+
+  div {
+    margin: 0px;
+    color: #495057;
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  .item-table-value {
+    font-weight: 700;
+  }
+}
+
+.search-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  align-self: stretch;
+  border-radius: 8px;
+  border: 1px solid var(--Gray-100, #e6eaf2);
+  background: var(--Gray-50, #f7f8fa);
+  padding-left: var(--Size-3, 12px);
+  margin-bottom: var(--Size-4, 16px);
+
+  .input-icon {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+
+    i {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+}
+
+::ng-deep {
+  .search-container {
+    .p-inputtext {
+      width: 100%;
+      text-overflow: ellipsis;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 150%;
+      border: none;
+      padding: 9px 0px;
+      background-color: transparent;
+      margin-left: 8px;
+
+      &::placeholder {
+        color: var(--Gray-500, #69738c);
+        font-family: Inter, sans-serif;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 150%;
+      }
+    }
+  }
+}
+
+@media (max-width: 500px) {
+  .option {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .icons-container {
+    margin-top: 10px;
+  }
+
+  .icon {
+    margin-left: 0px;
+    margin-right: 5px;
+  }
+
+  .description {
+    padding-left: 0px;
+  }
+
+  .option-container {
+    &.half-width {
+      width: 100%;
+    }
+  }
+}
+.box {
+  display: flex;
+  align-items: center;
+  gap: var(--Size-3, 12px);
+  width: 100%;
+}
+
+.data-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.description-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  &.has-icons {
+    margin-top: 8px;
+  }
+}
+
+.description-icons {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+
+  img {
+    width: auto;
+    height: 28px;
+    object-fit: contain;
+  }
+}

package/src/components-source/radio-selection-list/radio-selection-list.component.spec.ts

@@ -0,0 +1,243 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ReactiveFormsModule } from '@angular/forms';
+import { RadioSelectionListComponent } from './radio-selection-list.component';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { Option } from '@app/utilities/interfaces/ui/radio-selection-list.interface';
+import { SimpleChange, SimpleChanges } from '@angular/core';
+
+// Mock TranslateService
+const mockTranslateService = {
+  instant: jest.fn((key: string) => key),
+  get: jest.fn((key: string) => ({ subscribe: jest.fn() })),
+};
+
+describe('RadioSelectionListComponent', () => {
+  let component: RadioSelectionListComponent;
+  let fixture: ComponentFixture<RadioSelectionListComponent>;
+
+  const mockOptions: Option[] = [
+    { id: 'option-1', name: 'Option 1', description: 'Description 1' },
+    { id: 'option-2', name: 'Option 2', description: 'Description 2' },
+    { id: 'option-3', name: 'Option 3', description: 'Description 3' },
+  ];
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [RadioSelectionListComponent, ReactiveFormsModule, TranslateModule.forRoot()],
+      providers: [{ provide: TranslateService, useValue: mockTranslateService }],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(RadioSelectionListComponent);
+    component = fixture.componentInstance;
+  });
+
+  describe('Inicialización del componente', () => {
+    it('should create', () => {
+      fixture.detectChanges();
+      expect(component).toBeTruthy();
+    });
+
+    it('should initialize with default values', () => {
+      expect(component.options).toEqual([]);
+      expect(component.typeLayout).toBe('default');
+      expect(component.alwaysShowDescription).toBe(true);
+      expect(component.selectedOption).toBeNull();
+      expect(component.showFilter).toBe(false);
+      expect(component.searchDelay).toBe(100);
+    });
+  });
+
+  describe('Propiedad options', () => {
+    it('should accept options array', () => {
+      component.options = mockOptions;
+      fixture.detectChanges();
+      expect(component.options).toEqual(mockOptions);
+    });
+
+    it('should accept empty options array', () => {
+      component.options = [];
+      fixture.detectChanges();
+      expect(component.options).toEqual([]);
+    });
+  });
+
+  describe('Propiedad typeLayout', () => {
+    it('should accept "default" layout', () => {
+      component.typeLayout = 'default';
+      expect(component.typeLayout).toBe('default');
+    });
+
+    it('should accept "description" layout', () => {
+      component.typeLayout = 'description';
+      expect(component.typeLayout).toBe('description');
+    });
+  });
+
+  describe('Propiedad alwaysShowDescription', () => {
+    it('should accept true value', () => {
+      component.alwaysShowDescription = true;
+      expect(component.alwaysShowDescription).toBe(true);
+    });
+
+    it('should accept false value', () => {
+      component.alwaysShowDescription = false;
+      expect(component.alwaysShowDescription).toBe(false);
+    });
+  });
+
+  describe('Propiedad selectedOption', () => {
+    it('should accept option id', () => {
+      component.selectedOption = 'option-1';
+      expect(component.selectedOption).toBe('option-1');
+    });
+
+    it('should accept null', () => {
+      component.selectedOption = null;
+      expect(component.selectedOption).toBeNull();
+    });
+  });
+
+  describe('Propiedad showFilter', () => {
+    it('should accept true value', () => {
+      component.showFilter = true;
+      expect(component.showFilter).toBe(true);
+    });
+
+    it('should accept false value', () => {
+      component.showFilter = false;
+      expect(component.showFilter).toBe(false);
+    });
+  });
+
+  describe('Propiedad searchDelay', () => {
+    it('should accept custom delay', () => {
+      component.searchDelay = 500;
+      expect(component.searchDelay).toBe(500);
+    });
+  });
+
+  describe('ngOnInit', () => {
+    it('should set filteredOptions to options', () => {
+      component.options = mockOptions;
+      fixture.detectChanges();
+      expect(component.filteredOptions).toEqual(mockOptions);
+    });
+  });
+
+  describe('ngOnChanges', () => {
+    it('should update filteredOptions when options change', () => {
+      component.options = mockOptions;
+      fixture.detectChanges();
+
+      const newOptions: Option[] = [{ id: 'new-option', name: 'New Option' }];
+      component.options = newOptions;
+
+      const changes: SimpleChanges = {
+        options: new SimpleChange(mockOptions, newOptions, false),
+      };
+
+      component.ngOnChanges(changes);
+      expect(component.filteredOptions).toEqual(newOptions);
+    });
+  });
+
+  describe('Método filterOption', () => {
+    beforeEach(() => {
+      component.options = mockOptions;
+      fixture.detectChanges();
+    });
+
+    it('should filter options by name', () => {
+      component.filterOption('Option 1');
+      expect(component.filteredOptions.length).toBe(1);
+      expect(component.filteredOptions[0].id).toBe('option-1');
+    });
+
+    it('should filter options case insensitively', () => {
+      component.filterOption('option 2');
+      expect(component.filteredOptions.length).toBe(1);
+      expect(component.filteredOptions[0].id).toBe('option-2');
+    });
+
+    it('should return all options when search is empty', () => {
+      component.filterOption('');
+      expect(component.filteredOptions).toEqual(mockOptions);
+    });
+
+    it('should return filtered options when search is whitespace (implementation filters)', () => {
+      component.filterOption('   ');
+      // The implementation filters by whitespace, resulting in empty array
+      expect(component.filteredOptions).toEqual([]);
+    });
+
+    it('should return empty array when no matches', () => {
+      component.filterOption('nonexistent');
+      expect(component.filteredOptions.length).toBe(0);
+    });
+  });
+
+  describe('Método selectOption', () => {
+    beforeEach(() => {
+      component.options = mockOptions;
+      fixture.detectChanges();
+    });
+
+    it('should set selectedOption', () => {
+      component.selectOption('option-2');
+      expect(component.selectedOption).toBe('option-2');
+    });
+
+    it('should emit valueChange event', () => {
+      const spy = jest.spyOn(component.valueChange, 'emit');
+      component.selectOption('option-3');
+      expect(spy).toHaveBeenCalledWith('option-3');
+    });
+  });
+
+  describe('Output valueChange', () => {
+    it('should emit when option is selected', () => {
+      const spy = jest.spyOn(component.valueChange, 'emit');
+      component.options = mockOptions;
+      fixture.detectChanges();
+
+      component.selectOption('option-1');
+      expect(spy).toHaveBeenCalledWith('option-1');
+    });
+  });
+
+  describe('Output onSearch', () => {
+    it('should emit when search value changes', (done) => {
+      component.options = mockOptions;
+      component.searchDelay = 0; // Disable delay for testing
+      fixture.detectChanges();
+
+      const spy = jest.spyOn(component.onSearch, 'emit');
+
+      component.searchControl.setValue('Option');
+
+      setTimeout(() => {
+        expect(spy).toHaveBeenCalled();
+        done();
+      }, 150);
+    });
+  });
+
+  describe('Propiedad extraContent', () => {
+    it('should accept null', () => {
+      component.extraContent = null;
+      expect(component.extraContent).toBeNull();
+    });
+  });
+
+  describe('Propiedad withExtraContentId', () => {
+    it('should accept id string', () => {
+      component.withExtraContentId = 'option-1';
+      expect(component.withExtraContentId).toBe('option-1');
+    });
+
+    it('should accept null', () => {
+      component.withExtraContentId = null;
+      expect(component.withExtraContentId).toBeNull();
+    });
+  });
+});