@dropi/ui-components 1.0.0

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

@@ -0,0 +1,266 @@
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  OnInit,
+  AfterViewInit,
+  OnDestroy,
+  TemplateRef,
+  ContentChild,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IconComponent } from '../icon/icon.component';
+
+export interface CarouselResponsiveOptions {
+  breakpoint: string;
+  numVisible: number;
+  numScroll: number;
+}
+
+@Component({
+  selector: 'dropi-carousel',
+  standalone: true,
+  imports: [CommonModule, IconComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: './dropi-carousel.component.html',
+  styleUrls: ['./dropi-carousel.component.scss'],
+})
+export class DropiCarouselComponent implements OnInit, AfterViewInit, OnDestroy {
+  @Input() value: any[] = [];
+  @Input() page: number = 0;
+  @Input() numVisible: number = 1;
+  @Input() numScroll: number = 1;
+  @Input() responsiveOptions?: CarouselResponsiveOptions[];
+  @Input() orientation: 'horizontal' | 'vertical' = 'horizontal';
+  @Input() verticalViewPortHeight: string = '300px';
+  @Input() contentClass: string = '';
+  @Input() indicatorsContentClass: string = '';
+  @Input() showIndicators: boolean = true;
+  @Input() showNavigators: boolean = true;
+  @Input() autoplayInterval: number = 0;
+  @Input() circular: boolean = false;
+
+  @Output() pageChange = new EventEmitter<number>();
+  @Output() onPage = new EventEmitter<any>();
+
+  @ContentChild('item', { read: TemplateRef }) itemTemplate?: TemplateRef<any>; // ✅ Opcional, no obligatorio
+
+  currentPage: number = 0;
+  numVisibleItems: number = 1;
+  numScrollItems: number = 1;
+  isAnimating: boolean = true;
+  totalPagesArray: number[] = [];
+  transformValue: string = 'translateX(0%)';
+  itemFlexBasis: string = '0 0 100%';
+
+  private autoplayTimer?: any;
+  private resizeListener?: any;
+
+  constructor(private cdr: ChangeDetectorRef) {}
+
+  ngOnInit() {
+    this.currentPage = this.page;
+    this.updateResponsiveOptions();
+    this.updateTotalPages();
+    this.updateTransform();
+
+    // Listen to window resize
+    this.resizeListener = () => {
+      this.updateResponsiveOptions();
+      this.updateTransform();
+      this.cdr.markForCheck();
+    };
+    window.addEventListener('resize', this.resizeListener);
+  }
+
+  ngAfterViewInit() {
+    setTimeout(() => {
+      this.updateResponsiveOptions();
+      this.updateTotalPages();
+      this.updateTransform();
+      this.cdr.detectChanges();
+      this.startAutoplay();
+    }, 100);
+  }
+
+  ngOnDestroy() {
+    this.stopAutoplay();
+    if (this.resizeListener) {
+      window.removeEventListener('resize', this.resizeListener);
+    }
+  }
+
+  updateResponsiveOptions() {
+    this.numVisibleItems = this.numVisible;
+    this.numScrollItems = this.numScroll;
+
+    if (this.responsiveOptions && this.responsiveOptions.length > 0) {
+      const windowWidth = window.innerWidth;
+
+      // Ordenar de menor a mayor para aplicar desde el breakpoint más pequeño
+      const sorted = [...this.responsiveOptions].sort((a, b) => {
+        return parseInt(a.breakpoint) - parseInt(b.breakpoint);
+      });
+
+      // Aplicar la configuración correspondiente al tamaño de pantalla
+      for (let option of sorted) {
+        if (windowWidth <= parseInt(option.breakpoint)) {
+          this.numVisibleItems = option.numVisible || 1;
+          this.numScrollItems = option.numScroll || 1;
+          break; // Detener en el primer match
+        }
+      }
+    }
+
+    this.itemFlexBasis = `0 0 ${100 / this.numVisibleItems}%`;
+    this.updateTotalPages();
+  }
+
+  updateTransform() {
+    if (!this.value || this.value.length === 0) {
+      this.transformValue = this.orientation === 'vertical' ? 'translateY(0%)' : 'translateX(0%)';
+      return;
+    }
+
+    const itemsToShow = this.numVisibleItems;
+    const totalItems = this.value.length;
+
+    // Calcula el índice del primer item basado en la página actual y el scroll
+    // Para móvil con numVisible=1 y numScroll=1, cada página muestra 1 item
+    const itemsScrolled = this.currentPage * this.numScrollItems;
+
+    // Asegura que no se desborde más allá del último item visible completo
+    const maxScroll = Math.max(0, totalItems - itemsToShow);
+    const safeScroll = Math.min(itemsScrolled, maxScroll);
+
+    // Calcula el porcentaje de desplazamiento
+    // Cada item ocupa (100 / numVisibleItems)% del contenedor
+    // Por ejemplo: si numVisible=1, cada item es 100%
+    // Si numVisible=3, cada item es 33.33%
+    const itemWidth = 100 / this.numVisibleItems;
+    const translateValue = -(safeScroll * itemWidth);
+
+    this.transformValue =
+      this.orientation === 'vertical'
+        ? `translateY(${translateValue}%)`
+        : `translateX(${translateValue}%)`;
+  }
+
+  updateTotalPages() {
+    if (!this.value || this.value.length <= this.numVisibleItems) {
+      this.totalPagesArray = [0];
+      return;
+    }
+
+    const totalItems = this.value.length;
+    const itemsToShow = this.numVisibleItems;
+    const itemsPerScroll = this.numScrollItems;
+
+    // Calcula cuántas páginas son necesarias
+    // Para asegurar que todas las cards se muestren completas
+    const remainingItems = totalItems - itemsToShow;
+    const totalPages = Math.ceil(remainingItems / itemsPerScroll) + 1;
+
+    this.totalPagesArray = Array(totalPages).fill(0);
+  }
+
+  navForward(event: Event) {
+    event.preventDefault();
+    this.stopAutoplay();
+
+    if (this.circular || !this.isLastPage()) {
+      this.isAnimating = true;
+      this.currentPage = this.circular && this.isLastPage() ? 0 : this.currentPage + 1;
+      this.updateTransform();
+      this.emitPageChange();
+
+      setTimeout(() => {
+        this.isAnimating = false;
+        this.cdr.markForCheck();
+      }, 500);
+    }
+
+    this.startAutoplay();
+  }
+
+  navBackward(event: Event) {
+    event.preventDefault();
+    this.stopAutoplay();
+
+    if (this.circular || !this.isFirstPage()) {
+      this.isAnimating = true;
+      this.currentPage =
+        this.circular && this.isFirstPage()
+          ? this.totalPagesArray.length - 1
+          : this.currentPage - 1;
+      this.updateTransform();
+      this.emitPageChange();
+
+      setTimeout(() => {
+        this.isAnimating = false;
+        this.cdr.markForCheck();
+      }, 500);
+    }
+
+    this.startAutoplay();
+  }
+
+  onDotClick(index: number) {
+    this.stopAutoplay();
+    this.isAnimating = true;
+    this.currentPage = index;
+    this.updateTransform();
+    this.emitPageChange();
+
+    setTimeout(() => {
+      this.isAnimating = false;
+      this.cdr.markForCheck();
+    }, 500);
+
+    this.startAutoplay();
+  }
+
+  isFirstPage(): boolean {
+    return this.currentPage === 0;
+  }
+
+  isLastPage(): boolean {
+    return this.currentPage >= this.totalPagesArray.length - 1;
+  }
+
+  startAutoplay() {
+    if (this.autoplayInterval > 0) {
+      this.autoplayTimer = setInterval(() => {
+        if (this.circular || !this.isLastPage()) {
+          this.isAnimating = true;
+          this.currentPage = this.circular && this.isLastPage() ? 0 : this.currentPage + 1;
+          this.updateTransform();
+          this.emitPageChange();
+
+          setTimeout(() => {
+            this.isAnimating = false;
+            this.cdr.markForCheck();
+          }, 500);
+        }
+      }, this.autoplayInterval);
+    }
+  }
+
+  stopAutoplay() {
+    if (this.autoplayTimer) {
+      clearInterval(this.autoplayTimer);
+      this.autoplayTimer = null;
+    }
+  }
+
+  private emitPageChange() {
+    this.pageChange.emit(this.currentPage);
+    this.onPage.emit({
+      page: this.currentPage,
+    });
+    this.cdr.markForCheck();
+  }
+}

package/src/components-source/dropi-carousel/dropi-carousel.stories.ts

@@ -0,0 +1,365 @@
+import { type Meta, type StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { DropiCarouselComponent } from '@app/ui/dropi-carousel/dropi-carousel.component';
+import { IconComponent } from '@app/ui/icon/icon.component';
+
+const meta: Meta<DropiCarouselComponent> = {
+  title: 'UI DROPI/Carousel',
+  component: DropiCarouselComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [IconComponent],
+    }),
+  ],
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/ONiVQJJ2qrJ6tmJnpNrrKE/-WEB--components?node-id=CAROUSEL-NODE-ID&m=dev',
+    },
+    docs: {
+      description: {
+        component: `
+# Dropi Carousel Component
+
+The **Dropi Carousel** component displays content in a slideable carousel with navigation and pagination.
+
+## Key Features
+- **Navigation**: Previous/next buttons to navigate between items
+- **Indicators**: Pagination dots for quick navigation
+- **Responsive**: Support for different screen sizes with responsive options
+- **Autoplay**: Automatic playback with configurable interval
+- **Circular**: Optional infinite navigation
+- **Customizable template**: Use ng-template to customize each item's content
+- **Orientation**: Support for horizontal and vertical carousel
+
+## Advantages
+- **Flexible**: Adapts to any type of content
+- **Accessible**: Includes ARIA attributes for accessibility
+- **Performant**: Uses OnPush change detection
+- **Configurable**: Multiple customization options
+
+## Basic Usage
+\`\`\`html
+<!-- Simple carousel with default items -->
+<dropi-carousel
+  [value]="items"
+  [numVisible]="3"
+  [numScroll]="1"
+  [circular]="true">
+</dropi-carousel>
+
+<!-- Carousel with custom template -->
+<dropi-carousel
+  [value]="products"
+  [numVisible]="4"
+  [numScroll]="2"
+  [autoplayInterval]="3000"
+  [showIndicators]="true"
+  [showNavigators]="true">
+  <ng-template #item let-product let-i="index">
+    <div class="product-card">
+      <img [src]="product.image" [alt]="product.name">
+      <h3>{{ product.name }}</h3>
+      <p>{{ product.price }}</p>
+    </div>
+  </ng-template>
+</dropi-carousel>
+\`\`\`
+
+## Main Properties
+- **value**: Array of items to display in the carousel
+- **numVisible**: Number of items visible at once
+- **numScroll**: Number of items to scroll per navigation
+- **showNavigators**: Show/hide navigation buttons
+- **showIndicators**: Show/hide page indicators
+- **circular**: Enable circular (infinite) navigation
+- **autoplayInterval**: Interval in ms for autoplay (0 = disabled)
+- **orientation**: 'horizontal' or 'vertical'
+- **responsiveOptions**: Array of options for different breakpoints
+
+## Use Cases
+- **Landing page**: Display course list in dropi academy
+        `,
+      },
+    },
+  },
+  argTypes: {
+    value: {
+      control: 'object',
+      description: 'Array of items to display in the carousel',
+      table: {
+        type: { summary: 'any[]' },
+        defaultValue: { summary: '[]' },
+      },
+    },
+    numVisible: {
+      control: { type: 'number', min: 1, max: 10 },
+      description: 'Number of items visible simultaneously',
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '1' },
+      },
+    },
+    numScroll: {
+      control: { type: 'number', min: 1, max: 10 },
+      description: 'Number of items to scroll per navigation',
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '1' },
+      },
+    },
+    showNavigators: {
+      control: 'boolean',
+      description: 'Show previous/next navigation buttons',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+      },
+    },
+    showIndicators: {
+      control: 'boolean',
+      description: 'Show page indicators',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+      },
+    },
+    circular: {
+      control: 'boolean',
+      description: 'Enable circular (infinite) navigation',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    autoplayInterval: {
+      control: { type: 'number', min: 0, max: 10000, step: 1000 },
+      description: 'Intervalo de autoplay en milisegundos (0 para deshabilitado)',
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '0' },
+      },
+    },
+    orientation: {
+      control: 'select',
+      options: ['horizontal', 'vertical'],
+      description: 'Carousel orientation',
+      table: {
+        type: { summary: "'horizontal' | 'vertical'" },
+        defaultValue: { summary: "'horizontal'" },
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<DropiCarouselComponent>;
+
+// Sample data for stories
+const sampleItems = [
+  { id: 1, title: 'Item 1', description: 'Description of item 1', color: '#FF6B6B' },
+  { id: 2, title: 'Item 2', description: 'Description of item 2', color: '#4ECDC4' },
+  { id: 3, title: 'Item 3', description: 'Description of item 3', color: '#45B7D1' },
+  { id: 4, title: 'Item 4', description: 'Description of item 4', color: '#FFA07A' },
+  { id: 5, title: 'Item 5', description: 'Description of item 5', color: '#98D8C8' },
+  { id: 6, title: 'Item 6', description: 'Description of item 6', color: '#F7DC6F' },
+];
+
+/**
+ * Basic carousel with single item display
+ */
+export const Default: Story = {
+  args: {
+    value: sampleItems,
+    numVisible: 1,
+    numScroll: 1,
+    showNavigators: true,
+    showIndicators: true,
+    circular: false,
+    autoplayInterval: 0,
+    orientation: 'horizontal',
+  },
+  render: (args) => ({
+    props: args,
+    template: `
+      <div style="width: 100%; max-width: 800px; margin: 0 auto;">
+        <dropi-carousel
+          [value]="value"
+          [numVisible]="numVisible"
+          [numScroll]="numScroll"
+          [showNavigators]="showNavigators"
+          [showIndicators]="showIndicators"
+          [circular]="circular"
+          [autoplayInterval]="autoplayInterval"
+          [orientation]="orientation">
+          <ng-template #item let-item let-i="index">
+            <div style="padding: 20px; text-align: center; border-radius: 8px; height: 200px; display: flex; flex-direction: column; justify-content: center; align-items: center;" [style.background-color]="item.color">
+              <h3 style="color: white; margin: 0 0 10px 0;">{{ item.title }}</h3>
+              <p style="color: white; margin: 0;">{{ item.description }}</p>
+            </div>
+          </ng-template>
+        </dropi-carousel>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Carousel with multiple items visible at once
+ */
+export const MultipleVisible: Story = {
+  args: {
+    value: sampleItems,
+    numVisible: 3,
+    numScroll: 1,
+    showNavigators: true,
+    showIndicators: true,
+    circular: true,
+    autoplayInterval: 0,
+    orientation: 'horizontal',
+  },
+  render: (args) => ({
+    props: args,
+    template: `
+      <div style="width: 100%; max-width: 1200px; margin: 0 auto;">
+        <dropi-carousel
+          [value]="value"
+          [numVisible]="numVisible"
+          [numScroll]="numScroll"
+          [showNavigators]="showNavigators"
+          [showIndicators]="showIndicators"
+          [circular]="circular"
+          [autoplayInterval]="autoplayInterval"
+          [orientation]="orientation">
+          <ng-template #item let-item let-i="index">
+            <div style="padding: 20px; margin: 0 10px; text-align: center; border-radius: 8px; height: 200px; display: flex; flex-direction: column; justify-content: center; align-items: center;" [style.background-color]="item.color">
+              <h3 style="color: white; margin: 0 0 10px 0;">{{ item.title }}</h3>
+              <p style="color: white; margin: 0;">{{ item.description }}</p>
+            </div>
+          </ng-template>
+        </dropi-carousel>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Carousel with automatic slideshow
+ */
+export const WithAutoplay: Story = {
+  args: {
+    value: sampleItems,
+    numVisible: 1,
+    numScroll: 1,
+    showNavigators: true,
+    showIndicators: true,
+    circular: true,
+    autoplayInterval: 3000,
+    orientation: 'horizontal',
+  },
+  render: (args) => ({
+    props: args,
+    template: `
+      <div style="width: 100%; max-width: 800px; margin: 0 auto;">
+        <dropi-carousel
+          [value]="value"
+          [numVisible]="numVisible"
+          [numScroll]="numScroll"
+          [showNavigators]="showNavigators"
+          [showIndicators]="showIndicators"
+          [circular]="circular"
+          [autoplayInterval]="autoplayInterval"
+          [orientation]="orientation">
+          <ng-template #item let-item let-i="index">
+            <div style="padding: 20px; text-align: center; border-radius: 8px; height: 200px; display: flex; flex-direction: column; justify-content: center; align-items: center;" [style.background-color]="item.color">
+              <h3 style="color: white; margin: 0 0 10px 0;">{{ item.title }}</h3>
+              <p style="color: white; margin: 0;">{{ item.description }}</p>
+              <small style="color: white; opacity: 0.8; margin-top: 10px;">Autoplay every 3 seconds</small>
+            </div>
+          </ng-template>
+        </dropi-carousel>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Carousel without navigation arrows
+ */
+export const WithoutNavigators: Story = {
+  args: {
+    value: sampleItems,
+    numVisible: 2,
+    numScroll: 1,
+    showNavigators: false,
+    showIndicators: true,
+    circular: false,
+    autoplayInterval: 0,
+    orientation: 'horizontal',
+  },
+  render: (args) => ({
+    props: args,
+    template: `
+      <div style="width: 100%; max-width: 900px; margin: 0 auto;">
+        <dropi-carousel
+          [value]="value"
+          [numVisible]="numVisible"
+          [numScroll]="numScroll"
+          [showNavigators]="showNavigators"
+          [showIndicators]="showIndicators"
+          [circular]="circular"
+          [autoplayInterval]="autoplayInterval"
+          [orientation]="orientation">
+          <ng-template #item let-item let-i="index">
+            <div style="padding: 20px; margin: 0 10px; text-align: center; border-radius: 8px; height: 200px; display: flex; flex-direction: column; justify-content: center; align-items: center;" [style.background-color]="item.color">
+              <h3 style="color: white; margin: 0 0 10px 0;">{{ item.title }}</h3>
+              <p style="color: white; margin: 0;">{{ item.description }}</p>
+            </div>
+          </ng-template>
+        </dropi-carousel>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Carousel with circular/infinite navigation
+ */
+export const CircularMode: Story = {
+  args: {
+    value: sampleItems,
+    numVisible: 1,
+    numScroll: 1,
+    showNavigators: true,
+    showIndicators: true,
+    circular: true,
+    autoplayInterval: 0,
+    orientation: 'horizontal',
+  },
+  render: (args) => ({
+    props: args,
+    template: `
+      <div style="width: 100%; max-width: 800px; margin: 0 auto;">
+        <dropi-carousel
+          [value]="value"
+          [numVisible]="numVisible"
+          [numScroll]="numScroll"
+          [showNavigators]="showNavigators"
+          [showIndicators]="showIndicators"
+          [circular]="circular"
+          [autoplayInterval]="autoplayInterval"
+          [orientation]="orientation">
+          <ng-template #item let-item let-i="index">
+            <div style="padding: 20px; text-align: center; border-radius: 8px; height: 200px; display: flex; flex-direction: column; justify-content: center; align-items: center;" [style.background-color]="item.color">
+              <h3 style="color: white; margin: 0 0 10px 0;">{{ item.title }}</h3>
+              <p style="color: white; margin: 0;">{{ item.description }}</p>
+              <small style="color: white; opacity: 0.8; margin-top: 10px;">Infinite navigation enabled</small>
+            </div>
+          </ng-template>
+        </dropi-carousel>
+      </div>
+    `,
+  }),
+};

package/src/components-source/dropi-checkbox/dropi-checkbox.component.css

@@ -0,0 +1,39 @@
+.container-dropi-checkbox {
+  display: inline-block !important;
+}
+
+.check {
+  width: 20px;
+  height: 20px;
+  border-radius: var(--Border-1);
+  cursor: pointer;
+  transition:
+    background-color 0.3s ease-in-out,
+    border-style 0.3s ease-in-out;
+}
+
+.noCheck {
+  border-style: solid;
+  border-width: 2px;
+  border-color: var(--Gray-Gray-200);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.disabled{
+  background-color: var(--Gray-Gray-50);
+  border-color: var(--Gray-Gray-100);
+  cursor:not-allowed;
+}
+
+.noCheck svg {
+  visibility: hidden;
+}
+
+.isCheck {
+  display: flex;
+  background-color: var(--Primary-Primary-500);
+  justify-content: center;
+  align-items: center;
+}

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

@@ -0,0 +1,18 @@
+<div class="container-dropi-checkbox">
+  <div id="check" (click)="changeState()">
+    <div class="check" [ngClass]="{ isCheck: checked, noCheck: !checked, disabled: disabled }">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="12"
+        height="12"
+        viewBox="0 0 24 24"
+        fill="none"
+      >
+        <path
+          d="M20.5991 5.69251L9.08325 17.2075C9.00583 17.2852 8.91382 17.3469 8.8125 17.389C8.71118 17.4311 8.60255 17.4527 8.49283 17.4527C8.38312 17.4527 8.27449 17.4311 8.17317 17.389C8.07185 17.3469 7.97984 17.2852 7.90242 17.2075L3.44908 12.75C3.37166 12.6723 3.27965 12.6106 3.17833 12.5685C3.07701 12.5264 2.96838 12.5048 2.85867 12.5048C2.74896 12.5048 2.64032 12.5264 2.53901 12.5685C2.43769 12.6106 2.34568 12.6723 2.26825 12.75C2.19052 12.8274 2.12884 12.9194 2.08676 13.0208C2.04467 13.1221 2.02301 13.2307 2.02301 13.3404C2.02301 13.4501 2.04467 13.5588 2.08676 13.6601C2.12884 13.7614 2.19052 13.8534 2.26825 13.9308L6.72325 18.385C7.19321 18.8541 7.83008 19.1175 8.49408 19.1175C9.15809 19.1175 9.79496 18.8541 10.2649 18.385L21.7799 6.87251C21.8575 6.7951 21.9191 6.70314 21.9611 6.6019C22.0031 6.50065 22.0247 6.39212 22.0247 6.28251C22.0247 6.17289 22.0031 6.06436 21.9611 5.96312C21.9191 5.86188 21.8575 5.76992 21.7799 5.69251C21.7025 5.61478 21.6105 5.5531 21.5092 5.51101C21.4078 5.46893 21.2992 5.44727 21.1895 5.44727C21.0798 5.44727 20.9712 5.46893 20.8698 5.51101C20.7685 5.5531 20.6765 5.61478 20.5991 5.69251Z"
+          fill="#FFFFFF"
+        />
+      </svg>
+    </div>
+  </div>
+</div>