@dropi/ui-components 1.0.0

package/src/components-source/dropi-card-checkbox/dropi-card-checkbox.component.stories.ts

@@ -0,0 +1,209 @@
+/**
+ * @fileoverview CardCheckbox component stories for Storybook
+ * @description A card-style checkbox component with additional info display
+ */
+import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import '@dotlottie/player-component';
+import { DropiCardCheckboxComponent } from '../dropi-card-checkbox/dropi-card-checkbox.component';
+
+const meta: Meta<DropiCardCheckboxComponent> = {
+  title: 'UI Dropi/Card Checkbox',
+  component: DropiCardCheckboxComponent,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+# Card Checkbox Component
+
+A card-style checkbox with additional information display.
+
+## Key Features
+- **Two types**: Object and "with card" modes
+- **Extra info**: Display additional labels and descriptions
+- **States**: Default and checked states
+- **Rich content**: Title and description support
+        `,
+      },
+    },
+  },
+  decorators: [
+    moduleMetadata({
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    }),
+  ],
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['object', 'with card'],
+      description: 'Visual type of the card checkbox',
+    },
+    description: {
+      control: 'text',
+      description: 'Description text displayed below the title',
+    },
+    title: {
+      control: 'text',
+      description: 'Main title of the card',
+    },
+    extraInfo: {
+      control: 'text',
+      description: 'Additional info label',
+    },
+    extraInfoDescription: {
+      control: 'text',
+      description: 'Additional info value/description',
+    },
+    state: {
+      control: 'select',
+      options: ['default', 'checked'],
+      description: 'Current state of the checkbox',
+    },
+    onChange: {
+      action: 'onChange',
+      description: 'Event emitted when state changes',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<DropiCardCheckboxComponent>;
+
+/**
+ * Default card checkbox without card styling
+ */
+export const Default: Story = {
+  args: {},
+};
+
+/**
+ * Card checkbox with full card styling
+ */
+export const WithCard: Story = {
+  args: {
+    type: 'with card',
+    description: 'Short description',
+    extraInfo: 'Label',
+    extraInfoDescription: '83',
+    state: 'default',
+    title: 'Title',
+  },
+
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+         <app-dropi-card-checkbox
+            [type]="'with card'"
+            [description]="'Short description'"
+            [extraInfo]="'Label'"
+            [extraInfoDescription]="'83'"
+            [state]="'default'"
+            [title]="'Title'"
+
+          ></app-dropi-card-checkbox>
+      `,
+  }),
+};
+
+/**
+ * Card checkbox in checked state
+ */
+export const Checked: Story = {
+  args: {
+    type: 'with card',
+    description: 'Short description',
+    extraInfo: 'Label',
+    extraInfoDescription: '83',
+    state: 'checked',
+    title: 'Title',
+  },
+
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+         <app-dropi-card-checkbox
+            [type]="'with card'"
+            [description]="'descripcion corta'"
+            [extraInfo]="'Label'"
+            [extraInfoDescription]="'83'"
+            [state]="'checked'"
+            [title]="'Title'"
+
+          ></app-dropi-card-checkbox>
+      `,
+  }),
+};
+
+export const titleOnly: Story = {
+  args: {
+    title: 'Title',
+    type: 'with card',
+  },
+
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+        <app-dropi-card-checkbox
+        [title]="'Title'"
+        [type]="'with card'"
+          ></app-dropi-card-checkbox>
+      `,
+  }),
+};
+
+export const ExtraInfo: Story = {
+  args: {
+    title: 'Title',
+    type: 'with card',
+    extraInfo: 'Label',
+    extraInfoDescription: '83',
+  },
+
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+          <app-dropi-card-checkbox
+          [title]="title"
+          [type]="type"
+          [type]="type"
+            [extraInfo]="'Label'"
+        [extraInfoDescription]="'83'"
+            ></app-dropi-card-checkbox>
+        `,
+  }),
+};
+
+export const Disabled: Story = {
+  args: {
+    title: 'Card disabled',
+    type: 'with card',
+    extraInfo: 'Label',
+    extraInfoDescription: '83',
+    disabled: true,
+  },
+
+  render: (args) => ({
+    props: { ...args },
+    template: `
+      <app-dropi-card-checkbox
+        [title]="title"
+        [type]="type"
+        extraInfo="Label"
+        state="default"
+        description="descripcion corta"
+        extraInfoDescription="83"
+        [disabled]="true"
+      />
+    `,
+  }),
+};

package/src/components-source/dropi-card-checkbox/dropi-card-checkbox.component.ts

@@ -0,0 +1,41 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+import { DropiCheckboxComponent } from '../dropi-checkbox/dropi-checkbox.component';
+
+@Component({
+  selector: 'app-dropi-card-checkbox',
+  templateUrl: './dropi-card-checkbox.component.html',
+  styleUrls: ['./dropi-card-checkbox.component.scss'],
+  standalone: true,
+  imports: [CommonModule, DropiCheckboxComponent],
+})
+export class DropiCardCheckboxComponent implements OnInit {
+  @Input() type: 'default' | 'with card' = 'default';
+  @Input() title = 'Tittle';
+  @Input() description = '';
+  @Input() extraInfo = '';
+  @Input() extraInfoDescription = '';
+  @Input() state: 'checked' | 'default' = 'checked';
+  @Input() disabled: boolean = false;
+  @Output() onChange = new EventEmitter<boolean>();
+
+  styleLine = '';
+  styleChecked = '';
+
+  constructor() {}
+
+  ngOnInit() {
+    this.styleLine = this.type == 'default' ? 'default-card' : '';
+  }
+
+  changeCheck(e) {
+    this.state = e ? 'checked' : 'default';
+    this.onChange.emit(e);
+  }
+
+  clickFullWidth(e) {
+    if (this.disabled) return;
+    this.changeCheck(!e);
+  }
+}

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

@@ -0,0 +1,57 @@
+<div class="dropi-carousel-container" [class.vertical]="orientation === 'vertical'">
+  <div class="dropi-carousel-content">
+    <button
+      *ngIf="showNavigators"
+      class="dropi-carousel-nav dropi-carousel-prev"
+      [disabled]="!circular && isFirstPage()"
+      (click)="navBackward($event)"
+      [attr.aria-label]="'Anterior'"
+    >
+      <app-icon name="Dropdown-left" width="24px" height="24px" color="Gray-Gray-500"></app-icon>
+    </button>
+
+    <div class="dropi-carousel-items-content" #itemsContainer>
+      <div
+        class="dropi-carousel-items-container"
+        [style.transform]="transformValue"
+        [style.transition]="isAnimating ? 'transform 0.5s ease' : 'none'"
+      >
+        <div
+          *ngFor="let item of value; let i = index"
+          class="dropi-carousel-item"
+          [style.flex]="itemFlexBasis"
+        >
+          <ng-container *ngIf="itemTemplate; else defaultTemplate">
+            <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item, index: i }">
+            </ng-container>
+          </ng-container>
+          <ng-template #defaultTemplate>
+            <div class="dropi-default-item">
+              {{ item | json }}
+            </div>
+          </ng-template>
+        </div>
+      </div>
+    </div>
+
+    <button
+      *ngIf="showNavigators"
+      class="dropi-carousel-nav dropi-carousel-next"
+      [disabled]="!circular && isLastPage()"
+      (click)="navForward($event)"
+      [attr.aria-label]="'Siguiente'"
+    >
+      <app-icon name="Dropdown-Right" width="24px" height="24px" color="Gray-Gray-500"></app-icon>
+    </button>
+  </div>
+
+  <ul class="dropi-carousel-indicators" *ngIf="showIndicators">
+    <li
+      *ngFor="let page of totalPagesArray; let i = index"
+      [class.active]="i === currentPage"
+      (click)="onDotClick(i)"
+    >
+      <button type="button" [attr.aria-label]="'Ir a página ' + (i + 1)"></button>
+    </li>
+  </ul>
+</div>

package/src/components-source/dropi-carousel/dropi-carousel.component.scss

@@ -0,0 +1,156 @@
+.dropi-carousel-container {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.dropi-carousel-header,
+.dropi-carousel-footer {
+  padding: 1rem;
+  background: #f8f9fa;
+  border-bottom: 1px solid #dee2e6;
+}
+
+.dropi-carousel-footer {
+  border-top: 1px solid #dee2e6;
+  border-bottom: none;
+}
+
+.dropi-carousel-content {
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding: 1rem 0;
+  width: 100%;
+}
+
+.dropi-carousel-items-content {
+  overflow: hidden;
+  flex: 1;
+  padding: 0;
+  width: 100%;
+  max-width: 100%;
+}
+
+.dropi-carousel-items-container {
+  display: flex;
+  transition: transform 0.5s ease;
+  padding: 0 0.5rem var(--Size-3);
+
+  // En móvil, remover padding para cálculo exacto
+  @media (max-width: 768px) {
+    padding: 0;
+  }
+}
+
+.dropi-carousel-item {
+  flex: 0 0 auto;
+  padding: 0 0.5rem;
+  box-sizing: border-box;
+
+  // Asegurar que el contenido interno respete el tamaño
+  > * {
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  // En móvil, ajustar para que el ancho sea exacto
+  @media (max-width: 768px) {
+    padding: 0;
+  }
+}
+
+.dropi-default-item {
+  padding: 1rem;
+  background: #f8f9fa;
+  border-radius: 0.25rem;
+  text-align: center;
+  color: #6c757d;
+  font-size: 0.875rem;
+}
+
+.dropi-carousel-nav {
+  display: flex;
+  width: 40px;
+  height: 40px;
+  padding: var(--Size-4);
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  transition: all 0.2s;
+  flex-shrink: 0;
+  z-index: 1;
+  border-radius: var(--Border-5);
+  background: var(--White, #fff);
+  box-shadow: var(--Shadow-medium);
+  border: none;
+  appearance: none;
+}
+button:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: var(--Shadow-medium) !important;
+}
+.dropi-carousel-nav:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.dropi-carousel-prev {
+  margin-right: 1rem;
+}
+
+.dropi-carousel-next {
+  margin-left: 1rem;
+}
+
+.dropi-carousel-indicators {
+  display: flex;
+  justify-content: center;
+  gap: 0.5rem;
+  list-style: none;
+  padding: 1rem 0 0 0;
+  margin: 0;
+}
+
+.dropi-carousel-indicators li {
+  cursor: pointer;
+}
+
+.dropi-carousel-indicators li button {
+  width: 1rem;
+  height: 1rem;
+  border-radius: 50%;
+  border: 1px solid #dee2e6;
+  background: #fff;
+  cursor: pointer;
+  transition: all 0.2s;
+  padding: 0;
+}
+
+.dropi-carousel-indicators li.active button {
+  background: var(--Primary-Primary-500);
+  border-color: var(--Primary-Primary-500);
+}
+
+.dropi-carousel-indicators li:hover button {
+  background: var(--Gray-Gray-200);
+}
+
+.vertical .dropi-carousel-content {
+  flex-direction: column;
+}
+
+.vertical .dropi-carousel-items-container {
+  flex-direction: column;
+}
+
+.vertical .dropi-carousel-prev {
+  margin: 0 0 1rem 0;
+}
+
+.vertical .dropi-carousel-next {
+  margin: 1rem 0 0 0;
+}

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

@@ -0,0 +1,224 @@
+import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
+import { DropiCarouselComponent, CarouselResponsiveOptions } from './dropi-carousel.component';
+import { IconComponent } from '../icon/icon.component';
+import { DomSanitizer } from '@angular/platform-browser';
+import { mockDomSanitizer } from '../../../test-utils/jest-mocks';
+
+describe('DropiCarouselComponent', () => {
+  let component: DropiCarouselComponent;
+  let fixture: ComponentFixture<DropiCarouselComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DropiCarouselComponent, IconComponent],
+      providers: [{ provide: DomSanitizer, useValue: mockDomSanitizer }],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DropiCarouselComponent);
+    component = fixture.componentInstance;
+  });
+
+  describe('Inicialización del componente', () => {
+    it('should create', () => {
+      fixture.detectChanges();
+      expect(component).toBeTruthy();
+    });
+
+    it('should initialize with default values', () => {
+      expect(component.value).toEqual([]);
+      expect(component.page).toBe(0);
+      expect(component.numVisible).toBe(1);
+      expect(component.numScroll).toBe(1);
+      expect(component.orientation).toBe('horizontal');
+      expect(component.verticalViewPortHeight).toBe('300px');
+      expect(component.contentClass).toBe('');
+      expect(component.indicatorsContentClass).toBe('');
+      expect(component.showIndicators).toBe(true);
+      expect(component.showNavigators).toBe(true);
+      expect(component.autoplayInterval).toBe(0);
+      expect(component.circular).toBe(false);
+    });
+  });
+
+  describe('Propiedades de entrada', () => {
+    beforeEach(() => {
+      fixture.detectChanges();
+    });
+
+    it('should accept value array', () => {
+      const items = [{ id: 1 }, { id: 2 }, { id: 3 }];
+      component.value = items;
+      expect(component.value).toEqual(items);
+    });
+
+    it('should accept page number', () => {
+      component.page = 2;
+      expect(component.page).toBe(2);
+    });
+
+    it('should accept numVisible', () => {
+      component.numVisible = 3;
+      expect(component.numVisible).toBe(3);
+    });
+
+    it('should accept numScroll', () => {
+      component.numScroll = 2;
+      expect(component.numScroll).toBe(2);
+    });
+
+    it('should accept orientation horizontal', () => {
+      component.orientation = 'horizontal';
+      expect(component.orientation).toBe('horizontal');
+    });
+
+    it('should accept orientation vertical', () => {
+      component.orientation = 'vertical';
+      expect(component.orientation).toBe('vertical');
+    });
+
+    it('should accept verticalViewPortHeight', () => {
+      component.verticalViewPortHeight = '500px';
+      expect(component.verticalViewPortHeight).toBe('500px');
+    });
+
+    it('should accept contentClass', () => {
+      component.contentClass = 'custom-class';
+      expect(component.contentClass).toBe('custom-class');
+    });
+
+    it('should accept showIndicators', () => {
+      component.showIndicators = false;
+      expect(component.showIndicators).toBe(false);
+    });
+
+    it('should accept showNavigators', () => {
+      component.showNavigators = false;
+      expect(component.showNavigators).toBe(false);
+    });
+
+    it('should accept autoplayInterval', () => {
+      component.autoplayInterval = 3000;
+      expect(component.autoplayInterval).toBe(3000);
+    });
+
+    it('should accept circular', () => {
+      component.circular = true;
+      expect(component.circular).toBe(true);
+    });
+
+    it('should accept responsiveOptions', () => {
+      const options: CarouselResponsiveOptions[] = [
+        { breakpoint: '1024px', numVisible: 3, numScroll: 1 },
+        { breakpoint: '768px', numVisible: 2, numScroll: 1 },
+      ];
+      component.responsiveOptions = options;
+      expect(component.responsiveOptions).toEqual(options);
+    });
+  });
+
+  describe('Eventos de salida', () => {
+    beforeEach(() => {
+      fixture.detectChanges();
+    });
+
+    it('should emit pageChange event', () => {
+      const spy = jest.spyOn(component.pageChange, 'emit');
+      component.pageChange.emit(1);
+      expect(spy).toHaveBeenCalledWith(1);
+    });
+
+    it('should emit onPage event', () => {
+      const spy = jest.spyOn(component.onPage, 'emit');
+      const pageEvent = { page: 1 };
+      component.onPage.emit(pageEvent);
+      expect(spy).toHaveBeenCalledWith(pageEvent);
+    });
+  });
+
+  describe('Métodos de navegación', () => {
+    beforeEach(() => {
+      component.value = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }];
+      component.numVisible = 1;
+      component.numScroll = 1;
+      fixture.detectChanges();
+    });
+
+    it('should navigate to next page', () => {
+      component.currentPage = 0;
+      const mockEvent = { preventDefault: jest.fn() } as unknown as Event;
+      component.navForward(mockEvent);
+      expect(mockEvent.preventDefault).toHaveBeenCalled();
+    });
+
+    it('should navigate to previous page', () => {
+      component.currentPage = 1;
+      const mockEvent = { preventDefault: jest.fn() } as unknown as Event;
+      component.navBackward(mockEvent);
+      expect(mockEvent.preventDefault).toHaveBeenCalled();
+    });
+
+    it('should navigate to specific page via onDotClick', () => {
+      component.onDotClick(2);
+      expect(component.currentPage).toBe(2);
+    });
+  });
+
+  describe('Métodos de actualización', () => {
+    beforeEach(() => {
+      fixture.detectChanges();
+    });
+
+    it('should update total pages', () => {
+      component.value = [{ id: 1 }, { id: 2 }, { id: 3 }];
+      component.numVisible = 1;
+      component.updateTotalPages();
+      expect(component.totalPagesArray.length).toBeGreaterThan(0);
+    });
+
+    it('should update transform', () => {
+      component.updateTransform();
+      expect(component.transformValue).toBeDefined();
+    });
+
+    it('should update responsive options', () => {
+      component.updateResponsiveOptions();
+      expect(component.numVisibleItems).toBeDefined();
+      expect(component.numScrollItems).toBeDefined();
+    });
+  });
+
+  describe('Autoplay', () => {
+    beforeEach(() => {
+      fixture.detectChanges();
+    });
+
+    it('should start autoplay when interval is set', fakeAsync(() => {
+      component.autoplayInterval = 1000;
+      component.value = [{ id: 1 }, { id: 2 }];
+      component.startAutoplay();
+      tick(100);
+      component.stopAutoplay();
+    }));
+
+    it('should stop autoplay', () => {
+      component.stopAutoplay();
+      // No error should be thrown
+      expect(true).toBe(true);
+    });
+  });
+
+  describe('Lifecycle hooks', () => {
+    it('should call updateResponsiveOptions on ngOnInit', () => {
+      const spy = jest.spyOn(component, 'updateResponsiveOptions');
+      component.ngOnInit();
+      expect(spy).toHaveBeenCalled();
+    });
+
+    it('should cleanup on ngOnDestroy', () => {
+      const stopAutoplaySpy = jest.spyOn(component, 'stopAutoplay');
+      fixture.detectChanges();
+      component.ngOnDestroy();
+      expect(stopAutoplaySpy).toHaveBeenCalled();
+    });
+  });
+});