@dropi/ui-components 1.0.12 → 1.0.13

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

@@ -1,38 +1,56 @@
-import { CommonModule } from '@angular/common';
-import { Component, Input } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { IconComponent } from '../icon/icon.component';
-import { TranslateModule } from '@ngx-translate/core';
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  OnInit,
+  Inject,
+  CUSTOM_ELEMENTS_SCHEMA,
+} from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { TranslateModule } from "@ngx-translate/core";
+import { IconComponent } from "../icon/icon.component";
 
 export interface BreadcrumbItem {
   label: string;
-  /** Rutas internas con RouterLink */
-  routerLink?: string | any[];
-  /** (Opcional) Enlace externo si algún día lo necesitas */
   url?: string;
-  /** (Opcional) Deshabilitar el click */
   disabled?: boolean;
-  /** (Opcional) Query params / fragment para RouterLink */
   queryParams?: Record<string, any>;
   fragment?: string;
+  command?: (event?: any) => void; // Cambiado de 'click' para evitar conflictos de sintaxis
 }
+
 @Component({
-  selector: 'app-dropi-breadcrumb',
+  selector: "app-dropi-breadcrumb",
   standalone: true,
-   imports: [CommonModule, RouterModule, IconComponent, TranslateModule],
-  templateUrl: './dropi-breadcrumb.component.html',
-  styleUrls: ['./dropi-breadcrumb.component.scss']
+  imports: [CommonModule, TranslateModule, IconComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  templateUrl: "./dropi-breadcrumb.component.html",
+  styleUrls: ["./dropi-breadcrumb.component.scss"],
 })
-export class DropiBreadcrumbComponent {
-    /** Items desde la raíz → página actual (sin incluir home) */
-  @Input() items: BreadcrumbItem[] = [];
-  /** Home: solo ícono + ruta (RouterLink) */
-  @Input() homeRoute: string | any[] = '/';
-  @Input() homeIconName: string = 'Home';
-  @Input() lastItemClickable = false;
+export class DropiBreadcrumbComponent implements OnInit {
+  @Input() public items: BreadcrumbItem[] = [];
+  @Input() public ariaLabel: string = "Breadcrumb";
+  @Input() public homeIconName: string = "Home";
+  @Input() public lastItemClickable: boolean = false;
+
+  @Output() public onNavigate = new EventEmitter<BreadcrumbItem>();
+
+  constructor() {}
 
+  ngOnInit(): void {}
 
+  public navigate(item: BreadcrumbItem | null, isHome: boolean = false): void {
+    if (isHome) {
+      this.onNavigate.emit({ label: "Home", url: "/" });
+      return;
+    }
 
-/** ARIA label para accesibilidad */
-ariaLabel = 'Breadcrumb';
+    if (item && !item.disabled) {
+      if (item.command) {
+        item.command(item);
+      }
+      this.onNavigate.emit(item);
+    }
+  }
 }

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

@@ -4,7 +4,7 @@
  */
 import { type Meta, type StoryObj, applicationConfig } from '@storybook/angular';
 import { importProvidersFrom } from '@angular/core';
-import { RouterTestingModule } from '@angular/router/testing';
+import { anyTestingModule } from ' /testing';
 import { TranslateModule } from '@ngx-translate/core';
 
 import { DropiBreadcrumbComponent, type BreadcrumbItem } from './dropi-breadcrumb.component';
@@ -16,7 +16,7 @@ const meta: Meta<DropiBreadcrumbComponent> = {
   decorators: [
     applicationConfig({
       providers: [
-        importProvidersFrom(RouterTestingModule.withRoutes([]), TranslateModule.forRoot()),
+        importProvidersFrom(anyTestingModule.withRoutes([]), TranslateModule.forRoot()),
       ],
     }),
   ],
@@ -35,7 +35,7 @@ A navigation component showing the user's current location in the page hierarchy
 
 ## Key Features
 - **Home icon**: Customizable home route
-- **Router integration**: Works with Angular Router
+- **any integration**: Works with Angular any
 - **External links**: Support for external URLs
 - **Disabled items**: Items can be disabled
 - **Last item clickable**: Optional clickable last item
@@ -52,7 +52,7 @@ A navigation component showing the user's current location in the page hierarchy
     },
     homeRoute: {
       control: 'object',
-      description: 'Route (routerLink) for the Home icon.',
+      description: 'Route ( (click)) for the Home icon.',
     },
     homeIconName: {
       control: 'text',
@@ -76,8 +76,8 @@ export const Default: Story = {
     homeIconName: 'Home',
     lastItemClickable: false,
     items: [
-      { label: 'Catalog', routerLink: ['/catalog'] },
-      { label: 'Shoes', routerLink: ['/catalog/shoes'] },
+      { label: 'Catalog',  (click): ['/catalog'] },
+      { label: 'Shoes',  (click): ['/catalog/shoes'] },
       { label: 'Sports' }, // current
     ] as BreadcrumbItem[],
   },
@@ -89,9 +89,9 @@ export const LastItemClickable: Story = {
     homeIconName: 'Home',
     lastItemClickable: true,
     items: [
-      { label: 'Catalog', routerLink: ['/catalog'] },
-      { label: 'Shoes', routerLink: ['/catalog/shoes'] },
-      { label: 'Sports', routerLink: ['/catalog/shoes/sport'] },
+      { label: 'Catalog',  (click): ['/catalog'] },
+      { label: 'Shoes',  (click): ['/catalog/shoes'] },
+      { label: 'Sports',  (click): ['/catalog/shoes/sport'] },
     ] as BreadcrumbItem[],
   },
 };
@@ -113,7 +113,7 @@ export const WithDisabledItem: Story = {
     homeRoute: ['/'],
     homeIconName: 'Home',
     items: [
-      { label: 'Catalog', routerLink: ['/catalog'] },
+      { label: 'Catalog',  (click): ['/catalog'] },
       { label: 'Shoes', disabled: true },
       { label: 'Detail' }, // current
     ] as BreadcrumbItem[],
@@ -125,8 +125,8 @@ export const LongLabels: Story = {
     homeRoute: ['/'],
     homeIconName: 'Home',
     items: [
-      { label: 'Category with a very long name', routerLink: ['/c/very-long'] },
-      { label: 'Very long subsection to test ellipsis', routerLink: ['/c/very-long/sub'] },
+      { label: 'Category with a very long name',  (click): ['/c/very-long'] },
+      { label: 'Very long subsection to test ellipsis',  (click): ['/c/very-long/sub'] },
       { label: 'Page with extended title' },
     ] as BreadcrumbItem[],
   },

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

@@ -1,100 +1,35 @@
-import { CommonModule } from '@angular/common';
-import { Component, Input, OnInit } from '@angular/core';
-import { IconComponent } from '../icon/icon.component';
-import { trigger, transition, style, animate } from '@angular/animations';
+import {
+  Component,
+  Input,
+  OnInit,
+  CUSTOM_ELEMENTS_SCHEMA,
+} from "@angular/core";
+import { CommonModule } from "@angular/common";
 
 @Component({
-  selector: 'app-dropi-chips',
-  templateUrl: './dropi-chips.component.html',
-  styleUrls: ['./dropi-chips.component.scss'],
+  selector: "dropi-chips",
   standalone: true,
-  imports: [CommonModule, IconComponent],
-  animations: [
-    trigger('fade', [
-      transition(':enter', [
-        style({ opacity: 0, transform: 'scale(0.8)' }),
-        animate('200ms ease-out', style({ opacity: 1, transform: 'scale(1)' })),
-      ]),
-      transition(':leave', [
-        animate('150ms ease-in', style({ opacity: 0, transform: 'scale(0.8)' })),
-      ]),
-    ]),
-  ],
+  imports: [CommonModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  templateUrl: "./dropi-chips.component.html",
+  styleUrls: ["./dropi-chips.component.scss"],
 })
 export class DropiChipsComponent implements OnInit {
-  @Input() style: 'filtrers' | 'fill' = 'fill';
-  @Input() type: 'icon' | 'text' | 'avatar' = 'icon';
-  @Input() urlImg: string;
-  @Input() showIcon: boolean = false;
-  @Input() icon: string = '';
-  isVisible = true;
+  @Input() public value: any[] = [];
+  @Input() public type: "avatar" | "icon" | "default" = "default";
+  @Input() public urlImg: string = "";
+  @Input() public icon: string = "";
+  @Input() public fontColor: string = "currentColor";
+  @Input() public showIcon: boolean = false;
 
-  fontColor = 'Gray-Gray-600';
-
-  stylesChips = {
-    flitrers: {
-      bgc: 'var(--Gray-Gray-50)',
-      br: 'var(--Border-2)',
-      bs: 'solid',
-      bw: '1px',
-      bc: 'var(--Gray-Gray-200)',
-      cl: 'var(--Gray-Gray-600)',
-    },
-    fill: {
-      bgc: 'var(--Primary-Primary-50)',
-      br: 'var(--Border-2)',
-      bs: 'none',
-      bw: '1px',
-      bc: 'var(--Primary-Primary-200)',
-      cl: 'var(--Primary-Primary-500)',
-    },
-  };
-
-  styleToApply: {
-    'background-color': any;
-    'border-radius': any;
-    'border-style': any;
-    'border-width': any;
-    'border-color': any;
-    color: any;
-  };
+  public isVisible: boolean = true;
+  public styleToApply: any = {};
 
   constructor() {}
 
-  ngOnInit() {
-    if (!this.urlImg || this.urlImg == '') {
-      this.urlImg = 'assets/images/.Radio icon.png';
-    }
-    this.selectStyle();
-  }
-
-  selectStyle() {
-    if (this.stylesChips.hasOwnProperty(this.style)) {
-      const selectedStyle = this.stylesChips[this.style];
-
-      this.styleToApply = {
-        'background-color': selectedStyle.bgc,
-        'border-radius': selectedStyle.br,
-        'border-style': selectedStyle.bs,
-        'border-width': selectedStyle.bw,
-        'border-color': selectedStyle.bc,
-        color: selectedStyle.cl,
-      };
-
-      if (this.type == 'icon') {
-        this.styleToApply['padding'] = '0 8px';
-      }
-
-      this.setFontColor();
-    }
-  }
-
-  setFontColor() {
-    this.fontColor = this.styleToApply['color'];
-    this.fontColor = this.fontColor.substring(6, this.fontColor.length - 1);
-  }
+  ngOnInit(): void {}
 
-  closeChips() {
+  public closeChips(): void {
     this.isVisible = false;
   }
 }