@dropi/ui-components 1.0.0

package/src/components-source/dropi-switch/dropi-switch.component.spec.ts

@@ -0,0 +1,105 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DropiSwitchComponent } from './dropi-switch.component';
+import { DebugElement } from '@angular/core';
+import { By } from '@angular/platform-browser';
+
+describe('DropiSwitchComponent', () => {
+  let component: DropiSwitchComponent;
+  let fixture: ComponentFixture<DropiSwitchComponent>;
+  let debugElement: DebugElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DropiSwitchComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DropiSwitchComponent);
+    component = fixture.componentInstance;
+    debugElement = fixture.debugElement;
+    fixture.detectChanges();
+  });
+
+  describe('Inicialización del componente', () => {
+    it('should create', () => {
+      expect(component).toBeTruthy();
+    });
+
+    it('should initialize with default values', () => {
+      expect(component.isChecked).toBe(false);
+    });
+  });
+
+  describe('Propiedades de entrada', () => {
+    it('should accept isChecked as true', () => {
+      component.isChecked = true;
+      fixture.detectChanges();
+      expect(component.isChecked).toBe(true);
+    });
+
+    it('should accept isChecked as false', () => {
+      component.isChecked = false;
+      fixture.detectChanges();
+      expect(component.isChecked).toBe(false);
+    });
+  });
+
+  describe('Eventos de salida', () => {
+    it('should emit onChange event when toggled', () => {
+      const spy = jest.spyOn(component.onChange, 'emit');
+      const mockEvent = { target: { checked: true } };
+
+      component.onToggleChange(mockEvent);
+
+      expect(spy).toHaveBeenCalledWith(true);
+    });
+
+    it('should emit onChange with false when unchecked', () => {
+      const spy = jest.spyOn(component.onChange, 'emit');
+      const mockEvent = { target: { checked: false } };
+
+      component.onToggleChange(mockEvent);
+
+      expect(spy).toHaveBeenCalledWith(false);
+    });
+  });
+
+  describe('Interacciones de usuario', () => {
+    it('should handle toggle from unchecked to checked', () => {
+      component.isChecked = false;
+      const spy = jest.spyOn(component.onChange, 'emit');
+
+      const mockEvent = { target: { checked: true } };
+      component.onToggleChange(mockEvent);
+
+      expect(spy).toHaveBeenCalledWith(true);
+    });
+
+    it('should handle toggle from checked to unchecked', () => {
+      component.isChecked = true;
+      const spy = jest.spyOn(component.onChange, 'emit');
+
+      const mockEvent = { target: { checked: false } };
+      component.onToggleChange(mockEvent);
+
+      expect(spy).toHaveBeenCalledWith(false);
+    });
+  });
+
+  describe('Estados del componente', () => {
+    it('should maintain state when isChecked is updated', () => {
+      component.isChecked = true;
+      fixture.detectChanges();
+      expect(component.isChecked).toBe(true);
+
+      component.isChecked = false;
+      fixture.detectChanges();
+      expect(component.isChecked).toBe(false);
+    });
+  });
+
+  describe('ngOnInit', () => {
+    it('should call ngOnInit successfully', () => {
+      expect(() => component.ngOnInit()).not.toThrow();
+    });
+  });
+});

package/src/components-source/dropi-switch/dropi-switch.component.stories.ts

@@ -0,0 +1,106 @@
+import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import '@dotlottie/player-component';
+import { action } from '@storybook/addon-actions';
+import { DropiSwitchComponent } from './dropi-switch.component';
+
+/**
+ * # Switch Component
+ *
+ * A toggle switch component for binary on/off states.
+ * Use switches for settings that have an immediate effect when toggled.
+ *
+ * ## Features
+ * - **Instant feedback**: Visual state change on toggle
+ * - **Accessible**: Keyboard navigable with proper ARIA labels
+ * - **Animated**: Smooth transition animations
+ *
+ * ## Usage
+ * ```html
+ * <app-dropi-switch
+ *   [isChecked]="isEnabled"
+ *   (onChange)="toggleFeature($event)">
+ * </app-dropi-switch>
+ * ```
+ */
+const meta: Meta<DropiSwitchComponent> = {
+  title: 'UI Dropi/Switch',
+  component: DropiSwitchComponent,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+A toggle switch component for binary on/off states.
+Use switches for settings that have an immediate effect when toggled.
+
+### Key Features
+- **Instant feedback**: Visual state change on toggle
+- **Accessible**: Keyboard navigable with proper ARIA labels
+- **Animated**: Smooth transition animations
+
+### When to use
+- Settings that apply immediately
+- Feature toggles
+- Simple yes/no choices
+        `,
+      },
+    },
+  },
+  decorators: [
+    moduleMetadata({
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    }),
+  ],
+  argTypes: {
+    isChecked: {
+      control: 'boolean',
+      description: 'Controls the on/off state of the switch',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    onChange: {
+      action: 'onChange',
+      description: 'Event emitted when the switch state changes',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<DropiSwitchComponent>;
+
+/** Default switch in off state */
+export const Default: Story = {
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/ONiVQJJ2qrJ6tmJnpNrrKE/-WEB--components?node-id=91-14005&m=dev',
+    },
+    docs: {
+      description: {
+        story: 'Switch in its default off state. Click to toggle on.',
+      },
+    },
+  },
+};
+
+/** Switch in active/on state */
+export const Active: Story = {
+  args: {
+    isChecked: true,
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/ONiVQJJ2qrJ6tmJnpNrrKE/%5BWEB%5D-components?node-id=4-44&t=EuRj8hlk1N0zEhCV-1',
+    },
+    docs: {
+      description: {
+        story: 'Switch in active/on state. The feature or setting is currently enabled.',
+      },
+    },
+  },
+};

package/src/components-source/dropi-switch/dropi-switch.component.ts

@@ -0,0 +1,22 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-switch',
+  templateUrl: './dropi-switch.component.html',
+  styleUrls: ['./dropi-switch.component.scss'],
+  standalone:true,
+})
+export class DropiSwitchComponent implements OnInit {
+  @Input() isChecked: boolean = false;
+  @Output() onChange = new EventEmitter<boolean>();
+  constructor() { }
+
+  ngOnInit() { 
+  }
+
+  onToggleChange(event: any) {
+     this.onChange.emit(event.target.checked);
+  }
+
+
+}

package/src/components-source/dropi-table/dropi-table.component.html

@@ -0,0 +1,395 @@
+<ng-container *ngIf="dropiTableConfiguration">
+  <div class="table-container" *ngIf="!loading">
+    <div class="search-container" *ngIf="dropiTableConfiguration?.showSearch">
+      <h3 class="table-title">{{ dropiTableConfiguration?.title | translate }}</h3>
+      <app-input
+        [inputProperties]="{
+          label: 'Search',
+          placeholder: 'Search',
+          formControl: searchTerm,
+        }"
+      ></app-input>
+    </div>
+
+    <div class="table-wrapper" [ngClass]="hasActions ? 'width-actions' : 'width-no-actions'">
+      <table
+        class="custom-table"
+        [ngClass]="{
+          'has-checkbox': dropiTableConfiguration?.showCheckbox,
+        }"
+      >
+        <thead>
+          <tr>
+            <th class="checkbox-header" *ngIf="dropiTableConfiguration?.showCheckbox">
+              <app-dropi-checkbox (onChange)="onSelectAll($event)"></app-dropi-checkbox>
+            </th>
+            <th
+              *ngFor="let header of headers"
+              (click)="onSort(header)"
+              [ngClass]="{
+                sortable: header?.sortable,
+                'low-opacity': header?.disabledColumn,
+                'highlight-column': header?.highlightColumn,
+              }"
+              [style.text-align]="header?.align || 'left'"
+            >
+              <div class="headers-container">
+                <ng-container *ngIf="header?.imageUrl">
+                  <img [src]="header?.imageUrl" />
+                </ng-container>
+                <div class="headers">
+                  <span>
+                    {{ header.label | translate }}
+                  </span>
+
+                  <div *ngIf="header?.sortable" class="order-icons">
+                    <app-icon
+                      name="Caret-up"
+                      width="12px"
+                      height="12px"
+                      [color]="sortAsc ? 'Gray-Gray-500' : 'Gray-Gray-200'"
+                    ></app-icon>
+                    <app-icon
+                      name="Caret-down"
+                      width="12px"
+                      height="12px"
+                      [color]="!sortAsc ? 'Gray-Gray-500' : 'Gray-Gray-200'"
+                    ></app-icon>
+                  </div>
+                </div>
+              </div>
+            </th>
+            <th class="actions-header actions" *ngIf="hasActions">
+              {{ 'Actions' | translate }}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <ng-container *ngFor="let row of dataToShow; let i = index">
+            <ng-container
+              [ngTemplateOutlet]="recursiveRowTemplate"
+              [ngTemplateOutletContext]="{
+                rowData: row,
+                level: 0,
+                parentIndex: i,
+                childIndex: null,
+              }"
+            ></ng-container>
+          </ng-container>
+        </tbody>
+      </table>
+      <div class="empty-table" *ngIf="dataToShow?.length === 0 && !loading">
+        <div class="message-container">
+          <img src="\assets\utils\icon-not-found.png" alt="empty" />
+          <div class="message">
+            {{ dropiTableConfiguration.emptyMessage ?? 'no data' | translate }}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div
+      class="pagination"
+      *ngIf="dropiTableConfiguration?.showPaginator && !hidePaginator && !loading"
+    >
+      <div class="page-size-selector">
+        <label>{{ 'Show' | translate }}</label>
+        <select (change)="onChangePageSize($event.target.value)">
+          <option
+            *ngFor="let size of dropiTableConfiguration?.pageSizeConfiguration"
+            [selected]="pageSize === size"
+            [value]="size"
+          >
+            {{ size }}
+          </option>
+        </select>
+      </div>
+
+      <app-dropi-paginator
+        [totalPages]="totalPages"
+        [currentPage]="currentPage"
+        [isNotTotalPages]="isCursorPagination"
+        (pageChange)="goToPage($event)"
+      ></app-dropi-paginator>
+    </div>
+  </div>
+
+  <!-- Template recursivo para filas multinivel -->
+  <ng-template
+    #recursiveRowTemplate
+    let-rowData="rowData"
+    let-level="level"
+    let-parentIndex="parentIndex"
+    let-childIndex="childIndex"
+  >
+    <tr class="table-row" [ngClass]="{ 'sub-row': level > 0 }">
+      <td *ngIf="dropiTableConfiguration?.showCheckbox">
+        <app-dropi-checkbox
+          [disabled]="rowData?.disableCheckbox"
+          (onChange)="onSelectRow($event, rowData)"
+        ></app-dropi-checkbox>
+      </td>
+      <td
+        *ngFor="let header of headers"
+        [ngClass]="{
+          'low-opacity': header?.disabledColumn,
+          'highlight-column': header?.highlightColumn,
+        }"
+      >
+        <div class="cell-content" [style.text-align]="header?.align || 'left'">
+          <ng-container
+            [ngTemplateOutlet]="labelTypes"
+            [ngTemplateOutletContext]="{
+              item: rowData[header.key],
+            }"
+          ></ng-container>
+        </div>
+      </td>
+      <td
+        class="action-button actions"
+        [ngClass]="{
+          'short-actions': dropiTableConfiguration?.showActionsPerRow
+            ? rowData.actionsPerRow && rowData.actionsPerRow.length <= 3
+            : dropiTableConfiguration?.rowActions && dropiTableConfiguration.rowActions.length <= 3,
+        }"
+        *ngIf="hasActions"
+      >
+        <div
+          *ngIf="
+            dropiTableConfiguration?.showActionsPerRow
+              ? rowData?.actionsPerRow && rowData.actionsPerRow.length > 3
+              : dropiTableConfiguration?.rowActions &&
+                dropiTableConfiguration.rowActions.length > 3;
+            else shortActions
+          "
+          #actionsMenu
+        >
+          <app-icon
+            class="action-icon"
+            (click)="
+              toggleActions(
+                level === 0 ? parentIndex : parentIndex,
+                actionsMenu,
+                level > 0,
+                childIndex
+              )
+            "
+            name="Menu-dots-vertical"
+            width="24px"
+            height="24px"
+            color="Gray-Gray-500"
+          >
+          </app-icon>
+
+          <div class="actions-menu fade-in" *ngIf="rowData.showActions">
+            <div
+              class="action-item"
+              *ngFor="
+                let action of dropiTableConfiguration?.showActionsPerRow
+                  ? rowData.actionsPerRow
+                  : dropiTableConfiguration?.rowActions
+              "
+              (click)="onActionClicked(rowData, action, $event)"
+            >
+              <app-icon
+                [name]="action.icon"
+                width="20px"
+                height="20px"
+                [color]="action.iconColor || 'Gray-Gray-200'"
+              ></app-icon>
+              {{ action.label }}
+            </div>
+          </div>
+        </div>
+
+        <ng-template #shortActions>
+          <div
+            *ngFor="
+              let action of dropiTableConfiguration?.showActionsPerRow
+                ? rowData.actionsPerRow
+                : dropiTableConfiguration?.rowActions
+            "
+          >
+            <app-icon
+              class="action-icon"
+              [name]="action.icon"
+              width="24px"
+              height="24px"
+              [color]="action.iconColor || 'Gray-Gray-500'"
+              (click)="onActionClicked(rowData, action, $event)"
+              [pTooltip]="action.label | translate"
+              tooltipPosition="bottom"
+              tooltipStyleClass="my-custom-tooltip"
+            ></app-icon>
+          </div>
+        </ng-template>
+        &nbsp;
+        <button
+          *ngIf="
+            rowData.tot_child?.value &&
+            rowData.tot_child.value != 0 &&
+            rowData.tot_child.value != null
+          "
+          (click)="toggleTableRow(rowData, level > 0)"
+          class="child-arrow-btn"
+          [title]="
+            'Hijos: ' +
+            (rowData.children?.length || 0) +
+            ' | Expandido: ' +
+            (rowData.expanded || false)
+          "
+        >
+          <i class="fas fa-chevron-down" [class.rotated]="rowData.expanded"></i>
+        </button>
+      </td>
+    </tr>
+
+    <!-- Renderizado recursivo de children -->
+    <ng-container *ngIf="rowData.children && rowData.expanded">
+      <ng-container *ngFor="let childRow of rowData.children; let j = index">
+        <ng-container
+          [ngTemplateOutlet]="recursiveRowTemplate"
+          [ngTemplateOutletContext]="{
+            rowData: childRow,
+            level: level + 1,
+            parentIndex: parentIndex,
+            childIndex: j,
+          }"
+        ></ng-container>
+      </ng-container>
+    </ng-container>
+  </ng-template>
+
+  <!-- Tipos de celda -->
+
+  <ng-template #labelTypes let-item="item" let-type="type">
+    <ng-container [ngSwitch]="item.type">
+      <ng-container *ngSwitchCase="'text'">
+        <div class="container">
+          <span class="table-labels">
+            {{ item.value | translate }}
+          </span>
+          <span class="table-labels" *ngIf="item?.subtext">
+            {{ item.subtext | translate }}
+          </span>
+        </div>
+      </ng-container>
+
+      <ng-container *ngSwitchCase="'date'">
+        <div class="date-label">
+          <span>{{ item.value | date: 'dd-MM-yyyy' }} </span>
+          <span>{{ item.value | date: 'hh:mm a' }} </span>
+        </div>
+      </ng-container>
+
+      <ng-container *ngSwitchCase="'tag'">
+        <app-dropi-tag
+          type="secondary"
+          [state]="item.typeTag"
+          showIcon="false"
+          [text]="item.value | translate"
+        >
+        </app-dropi-tag>
+      </ng-container>
+
+      <ng-container *ngSwitchCase="'carrier'">
+        <div class="carrier-label">
+          <img [src]="item.value | carrierImageUrl" alt="carrier" />
+          <span>{{ item.value | translate | titlecase }}</span>
+        </div>
+      </ng-container>
+
+      <ng-container *ngSwitchCase="'currency'">
+        <currency class="table-labels" [value]="item.value"></currency>
+      </ng-container>
+
+      <ng-container *ngSwitchCase="'currencyColorMode'">
+        <currency
+          class="table-labels currency-color-mode"
+          [value]="item.value"
+          [ngStyle]="{ '--label-color-table': item.colorLabel }"
+        ></currency>
+      </ng-container>
+
+      <ng-container *ngSwitchCase="'textColorMode'">
+        <span
+          [ngStyle]="{ '--label-color-table': item.colorLabel }"
+          class="table-labels currency-color-mode"
+          >{{ item.value | translate }}</span
+        >
+      </ng-container>
+
+      <ng-container *ngSwitchCase="'textIcon'">
+        <div class="text-icon-label" [ngClass]="{ 'justify-center': !item?.value }">
+          <app-icon
+            [name]="item.icon"
+            width="24px"
+            height="24px"
+            [color]="item?.iconColor || 'Gray-Gray-500'"
+          ></app-icon>
+          <span *ngIf="item?.value">{{ item.value | translate }}</span>
+        </div>
+      </ng-container>
+
+      <ng-container *ngSwitchCase="'status'">
+        <div class="status-label">
+          <div class="status-dot">
+            <div [ngClass]="'dot dot-' + item.status.toLowerCase()"></div>
+            <span class="status-text">{{ item.status | translate }}</span>
+          </div>
+          <span *ngIf="item?.value" class="status-description">{{ item.value }}</span>
+        </div>
+      </ng-container>
+
+      <ng-container *ngSwitchCase="'textLink'">
+        <div class="conteiner-tex-link">
+          <div class="text-link-label">
+            <span *ngIf="item.value">{{ item.value | translate }}: </span>
+            <a [href]="item?.url" target="_blank">{{ item?.urlText }}</a>
+          </div>
+          <app-icon
+            *ngIf="item.icon"
+            [name]="item.icon"
+            width="18px"
+            height="18px"
+            color="Info-Info-500"
+          ></app-icon>
+        </div>
+      </ng-container>
+
+      <ng-container *ngSwitchCase="'image'">
+        <div class="image-label">
+          <div class="img-container">
+            <img [src]="item.imageUrl" alt="logo" />
+          </div>
+
+          <span class="Body-M-Medium">{{ item.value }}</span>
+        </div>
+      </ng-container>
+
+      <ng-container *ngSwitchCase="'country'">
+        <div class="flag-container">
+          <app-country-flags
+            *ngIf="item.flag"
+            [width]="24"
+            [height]="24"
+            [country]="item.flag"
+            [style]="'rectangle'"
+          ></app-country-flags>
+
+          <span class="Body-M-Regular">{{ item.value }}</span>
+        </div>
+      </ng-container>
+
+      <ng-container *ngSwitchDefault>
+        {{ item.value | translate }}
+      </ng-container>
+    </ng-container>
+  </ng-template>
+
+  <ng-container *ngIf="loading">
+    <div class="loading-container">
+      <app-spinner></app-spinner>
+    </div>
+  </ng-container>
+</ng-container>