lib-common-angular 0.0.9 → 0.0.11

package/projects/lib-common-angular/src/lib/componentes/shared/atoms/button-action-delete1/button-action-delete1.component.html

@@ -0,0 +1,9 @@
+<p-button 
+  icon="pi pi-trash" 
+  [size]="size"
+  [rounded]="rounded" 
+  [outlined]="outlined" 
+  [disabled]="disabled"
+  severity="danger" 
+  [title]="'Delete item'"
+  (click)="onDelete()" />

package/projects/lib-common-angular/src/lib/componentes/shared/atoms/button-action-delete1/button-action-delete1.component.scss

@@ -0,0 +1,34 @@
+:host {
+  display: inline-block;
+}
+
+// Estilo para el botón de eliminación
+:host ::ng-deep .p-button {
+  transition: all 0.2s ease-in-out;
+  
+  &:hover {
+    transform: scale(1.05);
+    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
+  }
+  
+  &:active {
+    transform: scale(0.98);
+  }
+  
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    
+    &:hover {
+      transform: none;
+      box-shadow: none;
+    }
+  }
+}
+
+// Responsive behavior
+@media (max-width: 768px) {
+  :host ::ng-deep .p-button {
+    padding: 0.5rem;
+  }
+}

package/projects/lib-common-angular/src/lib/componentes/shared/atoms/button-action-delete1/button-action-delete1.component.ts

@@ -0,0 +1,33 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { PrimegModule } from '../../../../modulos/primeg.module';
+import { ComponentesDTO } from '@juliaosistem/core-dtos';
+
+@Component({
+  selector: 'lib-button-action-delete1',
+  standalone: true,
+  imports: [PrimegModule],
+  templateUrl: './button-action-delete1.component.html',
+  styleUrl: './button-action-delete1.component.scss'
+})
+export class ButtonActionDelete1Component {
+
+  componente: ComponentesDTO = {
+    id: 15,
+    nombreComponente: 'lib-button-action-delete1',
+    version: '1.0'
+  };
+
+  @Input() item: Record<string, unknown> = {};
+  @Input() disabled: boolean = false;
+  @Input() size: 'small' | 'large' | undefined = undefined;
+  @Input() outlined: boolean = true;
+  @Input() rounded: boolean = true;
+  
+  @Output() delete = new EventEmitter<Record<string, unknown>>();
+
+  onDelete() {
+    if (!this.disabled) {
+      this.delete.emit(this.item);
+    }
+  }
+}

package/projects/lib-common-angular/src/lib/componentes/shared/atoms/button-action-edit1/button-action-edit1.component.html

@@ -0,0 +1,9 @@
+<p-button 
+  icon="pi pi-pencil" 
+  [size]="size"
+  [rounded]="rounded" 
+  [outlined]="outlined" 
+  [disabled]="disabled"
+  severity="info" 
+  [title]="'Edit item'"
+  (click)="onEdit()" />

package/projects/lib-common-angular/src/lib/componentes/shared/atoms/button-action-edit1/button-action-edit1.component.scss

@@ -0,0 +1,34 @@
+:host {
+  display: inline-block;
+}
+
+// Estilo para el botón de edición
+:host ::ng-deep .p-button {
+  transition: all 0.2s ease-in-out;
+  
+  &:hover {
+    transform: scale(1.05);
+    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
+  }
+  
+  &:active {
+    transform: scale(0.98);
+  }
+  
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    
+    &:hover {
+      transform: none;
+      box-shadow: none;
+    }
+  }
+}
+
+// Responsive behavior
+@media (max-width: 768px) {
+  :host ::ng-deep .p-button {
+    padding: 0.5rem;
+  }
+}

package/projects/lib-common-angular/src/lib/componentes/shared/atoms/button-action-edit1/button-action-edit1.component.ts

@@ -0,0 +1,32 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { PrimegModule } from '../../../../modulos/primeg.module';
+import { ComponentesDTO } from '@juliaosistem/core-dtos';
+
+@Component({
+  selector: 'lib-button-action-edit1',
+  standalone: true,
+  imports: [PrimegModule],
+  templateUrl: './button-action-edit1.component.html',
+  styleUrls: ['./button-action-edit1.component.scss']
+})
+export class ButtonActionEdit1Component {
+  @Input() item: Record<string, unknown> = {};
+  @Input() disabled: boolean = false;
+  @Input() size: 'small' | 'large' | undefined = undefined;
+  @Input() outlined: boolean = true;
+  @Input() rounded: boolean = true;
+  
+  @Output() edit = new EventEmitter<Record<string, unknown>>();
+
+componente: ComponentesDTO = {
+    id: 14,
+    nombreComponente: 'lib-button-action-edit1',
+    version: '1.0'
+  };
+
+  onEdit() {
+    if (!this.disabled) {
+      this.edit.emit(this.item);
+    }
+  }
+}

package/projects/lib-common-angular/src/lib/componentes/shared/atoms/button-actions-row1/button-actions-row1.component.html

@@ -0,0 +1,17 @@
+<div class="actions-dropdown">
+    <p-button 
+        icon="pi pi-ellipsis-v" 
+        [text]="true"
+        [rounded]="true"
+        [disabled]="disabled"
+        size="small"
+        (click)="menu.toggle($event)" 
+        aria-label="Row actions"
+    />
+    <p-tieredmenu 
+        #menu 
+        [model]="items" 
+        [popup]="true"
+        appendTo="body"
+    />
+</div>

package/projects/lib-common-angular/src/lib/componentes/shared/atoms/button-actions-row1/button-actions-row1.component.scss

@@ -0,0 +1,9 @@
+.actions-dropdown {
+  position: relative;
+  display: inline-block;
+  
+  .p-button {
+    width: 2rem;
+    height: 2rem;
+  }
+}

package/projects/lib-common-angular/src/lib/componentes/shared/atoms/button-actions-row1/button-actions-row1.component.ts

@@ -0,0 +1,45 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { PrimegModule } from '../../../../modulos/primeg.module';
+import { FormsModule } from '@angular/forms';
+import { MenuItem } from 'primeng/api';
+import { ComponentesDTO } from '@juliaosistem/core-dtos';
+
+@Component({
+  selector: 'lib-button-actions-row1',
+  standalone: true,
+  imports: [PrimegModule, FormsModule],
+  templateUrl: './button-actions-row1.component.html',
+  styleUrl: './button-actions-row1.component.scss'
+})
+export class ButtonActionsRow1Component implements OnInit {
+
+  componente: ComponentesDTO = {
+    id: 24,
+    nombreComponente: 'lib-button-actions-row1',
+    version: '1.0',
+  };
+
+  @Input() item: Record<string, unknown> = {};
+  @Input() disabled: boolean = false;
+  
+  @Output() edit = new EventEmitter<Record<string, unknown>>();
+  
+  items: MenuItem[] = [];
+
+  ngOnInit() {
+    this.buildMenuItems();
+  }
+
+  buildMenuItems() {
+    this.items = [];
+    this.addEditAction();
+  }
+
+  private addEditAction() {
+    this.items.push({
+      label: 'Edit',
+      icon: 'pi pi-pencil',
+      command: () => this.edit.emit(this.item)
+    });
+  }
+}

package/projects/lib-common-angular/src/lib/componentes/shared/atoms/button-add-to-card1/button-add-to-card1.html

@@ -0,0 +1,40 @@
+@if (!showQuantitySelector) {
+    <p-button 
+        label="Agregar al carrito"
+        icon="pi pi-shopping-cart"
+        (onClick)="handleAddToCart()"
+        styleClass="w-full font-bold border-round-lg shadow-3 py-3 hover-zoom" 
+        class="w-full">
+    </p-button>
+}
+
+@if (showQuantitySelector) {
+    <div class="flex align-items-center justify-content-between surface-card p-2 border-round-xl shadow-3 w-full">
+        
+        <p-button 
+            icon="pi pi-minus" 
+            (onClick)="decrementQuantity()"
+            [rounded]="true"
+            [outlined]="true"
+            severity="secondary"
+            styleClass="w-3rem h-3rem border-2 border-400 text-500 p-0"
+        ></p-button>
+
+        <div class="flex align-items-center gap-2">
+            <span class="font-bold text-900">und.</span>
+            
+            <span class="w-3rem h-3rem text-900 flex align-items-center justify-content-center border-1 surface-border border-round text-xl font-semibold">
+                {{ selectedQuantity }}
+            </span>
+        </div>
+
+        <p-button 
+            icon="pi pi-plus" 
+            (onClick)="incrementQuantity()"
+            [rounded]="true"
+            [outlined]="true"
+            styleClass="w-3rem h-3rem border-2 border-orange-500 text-orange-500 p-0 hover:bg-orange-50"
+        ></p-button>
+
+    </div>
+}

package/projects/lib-common-angular/src/lib/componentes/shared/atoms/button-add-to-card1/button-add-to-card1.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ButtonAddToCard1 } from './button-add-to-card1';
+
+describe('ButtonAddToCard1', () => {
+  let component: ButtonAddToCard1;
+  let fixture: ComponentFixture<ButtonAddToCard1>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ButtonAddToCard1]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ButtonAddToCard1);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/projects/lib-common-angular/src/lib/componentes/shared/atoms/button-add-to-card1/button-add-to-card1.ts

@@ -0,0 +1,60 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { ComponentesDTO, ProductoDTO } from '@juliaosistem/core-dtos';
+import { CommonModule } from '@angular/common';
+import { PrimegModule } from '../../../../modulos/primeg.module';
+
+@Component({
+  selector: 'lib-button-add-to-card1',
+  imports: [CommonModule, PrimegModule],
+  templateUrl: './button-add-to-card1.html',
+  styleUrl: './button-add-to-card1.scss',
+  standalone: true
+})
+export class ButtonAddToCard1 {
+
+  @Input() product!: ProductoDTO;
+
+  @Output() addToCart = new EventEmitter<{ product: ProductoDTO; quantity: number }>();
+
+  componente: ComponentesDTO = {
+    id: 25,
+    nombreComponente: 'lib-button-add-to-card1',
+    version: '1.0',
+  };
+
+  showQuantitySelector: boolean = false;
+  selectedQuantity: number = 0;
+
+  handleAddToCart(): void {
+    this.selectedQuantity = 1;
+    this.showQuantitySelector = true;
+
+    this.emitAddToCart();
+  }
+
+  incrementQuantity(): void {
+    if (this.selectedQuantity < (this.product?.cantidad ?? 0)) {
+      this.selectedQuantity++;
+      this.emitAddToCart();
+    }
+  }
+
+  decrementQuantity(): void {
+    if (this.selectedQuantity > 0) {
+      this.selectedQuantity--;
+
+      if (this.selectedQuantity === 0) {
+        this.showQuantitySelector = false;
+      }
+
+      this.emitAddToCart();
+    }
+  }
+
+  private emitAddToCart(): void {
+    this.addToCart.emit({
+      product: this.product,
+      quantity: this.selectedQuantity
+    });
+  }
+}

package/projects/lib-common-angular/src/lib/componentes/shared/atoms/button-add1/button-add1.component.html

@@ -0,0 +1,11 @@
+<p-button 
+  [label]="label" 
+  [icon]="icon" 
+  [size]="size"
+  [rounded]="rounded" 
+  [outlined]="outlined" 
+  [disabled]="disabled"
+  [loading]="loading"
+  [severity]="severity" 
+  [title]="tooltip"
+  (click)="onAdd()" />

package/projects/lib-common-angular/src/lib/componentes/shared/atoms/button-add1/button-add1.component.scss

@@ -0,0 +1,40 @@
+:host {
+  display: inline-block;
+}
+
+// Estilo para el botón de agregar
+:host ::ng-deep .p-button {
+  transition: all 0.2s ease-in-out;
+  
+  &:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(25, 135, 84, 0.25);
+  }
+  
+  &:active {
+    transform: translateY(0);
+  }
+  
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    
+    &:hover {
+      transform: none;
+      box-shadow: none;
+    }
+  }
+}
+
+// Estilo específico para el icono
+:host ::ng-deep .p-button .p-button-icon {
+  margin-right: 0.5rem;
+}
+
+// Responsive behavior
+@media (max-width: 768px) {
+  :host ::ng-deep .p-button {
+    padding: 0.75rem 1rem;
+    font-size: 0.875rem;
+  }
+}

package/projects/lib-common-angular/src/lib/componentes/shared/atoms/button-add1/button-add1.component.ts

@@ -0,0 +1,36 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { PrimegModule } from '../../../../modulos/primeg.module';
+import { ComponentesDTO } from '@juliaosistem/core-dtos';
+@Component({
+  selector: 'lib-button-add1',
+  standalone: true,
+  imports: [PrimegModule],
+  templateUrl: './button-add1.component.html',
+  styleUrl: './button-add1.component.scss'
+})
+export class ButtonAdd1Component {
+
+  componente: ComponentesDTO = {
+    id: 9,
+    nombreComponente: 'lib-button-add1',
+    version: '1.0',
+  };
+
+  @Input() label: string = 'Add';
+  @Input() icon: string = 'pi pi-plus';
+  @Input() disabled: boolean = false;
+  @Input() size: 'small' | 'large' | undefined = undefined;
+  @Input() outlined: boolean = false;
+  @Input() rounded: boolean = false;
+  @Input() severity: 'success' | 'info' | 'warn' | 'danger' | 'help' | 'primary' | 'secondary' | 'contrast' | undefined = 'success';
+  @Input() tooltip: string = 'Add new item';
+  @Input() loading: boolean = false;
+  
+  @Output() add = new EventEmitter<void>();
+
+  onAdd() {
+    if (!this.disabled && !this.loading) {
+      this.add.emit();
+    }
+  }
+}

package/projects/lib-common-angular/src/lib/componentes/shared/atoms/button-card-view1/button-card-view1.component.html

@@ -0,0 +1 @@
+<ion-icon name="grid" size="large"></ion-icon>

package/projects/lib-common-angular/src/lib/componentes/shared/atoms/button-card-view1/button-card-view1.component.ts

@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+import { IonIcon } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { grid, apps } from 'ionicons/icons';
+import { ComponentesDTO } from '@juliaosistem/core-dtos';
+@Component({
+  selector: 'lib-button-card-view1',
+  standalone: true,
+  imports: [IonIcon],
+  templateUrl: './button-card-view1.component.html',
+  styleUrl: './button-card-view1.component.scss'
+})
+export class ButtonCardView1Component {
+
+  componente: ComponentesDTO = {
+    id: 10,
+    nombreComponente: 'lib-button-card-view1',
+    version: '1.0',
+  };
+
+  constructor() {
+    addIcons({ grid, apps });
+  }
+}

package/projects/lib-common-angular/src/lib/componentes/shared/atoms/button-delete1/button-delete1.component.html

@@ -0,0 +1,11 @@
+<p-button 
+  [label]="label" 
+  [icon]="icon" 
+  [size]="size"
+  [rounded]="rounded" 
+  [outlined]="outlined" 
+  [disabled]="disabled"
+  [loading]="loading"
+  [severity]="severity" 
+  [title]="tooltip"
+  (click)="onDelete()" />

package/projects/lib-common-angular/src/lib/componentes/shared/atoms/button-delete1/button-delete1.component.ts

@@ -0,0 +1,35 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { PrimegModule } from '../../../../modulos/primeg.module';
+import { ComponentesDTO } from '@juliaosistem/core-dtos';
+
+@Component({
+  selector: 'lib-button-delete1',
+  standalone: true,
+  imports: [PrimegModule],
+  templateUrl: './button-delete1.component.html',
+  styleUrl: './button-delete1.component.scss'
+})
+export class ButtonDelete1Component {
+
+  componente: ComponentesDTO = {
+    id: 22,
+    nombreComponente: 'lib-button-delete1',
+    version: '1.0',
+  };
+
+  @Input() label: string = 'Delete';
+  @Input() icon: string = 'pi pi-trash';
+  @Input() disabled: boolean = false;
+  @Input() size: 'small' | 'large' | undefined = undefined;
+  @Input() outlined: boolean = false;
+  @Input() rounded: boolean = false;
+  @Input() severity: 'success' | 'info' | 'warn' | 'danger' | 'help' | 'primary' | 'secondary' | 'contrast' | undefined = 'danger';
+  @Input() tooltip: string = 'Delete selected items';
+  @Input() loading: boolean = false;
+  
+  @Output() delete = new EventEmitter<void>();
+
+  onDelete(): void {
+    this.delete.emit();
+  }
+}

package/projects/lib-common-angular/src/lib/componentes/shared/atoms/button-options-table/button-options-table.component.html

@@ -0,0 +1,9 @@
+<div class="">
+    <p-button 
+        icon="pi pi-ellipsis-v" 
+        [text]="true"
+        [rounded]="true"
+        (click)="menu.toggle($event)" 
+    />
+    <p-tieredmenu #menu [model]="items" [popup]="true" />
+</div>

package/projects/lib-common-angular/src/lib/componentes/shared/atoms/button-options-table/button-options-table.component.ts

@@ -0,0 +1,90 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { PrimegModule } from '../../../../modulos/primeg.module';
+import { FormsModule } from '@angular/forms';
+import { MenuItem } from 'primeng/api';
+import { Menu } from 'primeng/menu';
+import { TablaDataSharedDTO } from 'juliaositembackenexpress/dist/api/dtos/componentes-common-lib-angular/tablaDataSharedDTO';
+import { ComponentesDTO } from '@juliaosistem/core-dtos';
+
+@Component({
+  selector: 'lib-button-options-table',
+  imports: [PrimegModule, FormsModule],
+  templateUrl: './button-options-table.component.html',
+  styleUrl: './button-options-table.component.scss',
+  standalone: true,
+})
+export class ButtonOptionsTableComponent implements OnInit {
+
+  componente: ComponentesDTO = {
+    id: 8,
+    nombreComponente: 'lib-button-options-table',
+    version: '1.0',
+  };
+
+  @Input() isAdd: boolean = true; 
+  @Input() isDelete: boolean = true;
+  @Input() isExportExcel: boolean = true;
+  @Input() selectedItem: unknown; // Producto seleccionado
+  
+  @Output() onAdd = new EventEmitter<void>();
+  @Output() onDelete = new EventEmitter<void>();
+  @Output() onExportExcel = new EventEmitter<void>();
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  @Input() tablaDataSharedDTO!: TablaDataSharedDTO<Menu, any>;
+  
+  items: MenuItem[]=[];
+
+  ngOnInit() {
+
+    this.addButtons()
+   
+  }
+
+  addButtons() {
+     this.addAddButton();
+     this.addButtonExportExcelOrPdf();
+     this.addDeleteButton();
+  }
+
+
+  addButtonExportExcelOrPdf(){
+      if (this.isExportExcel) {
+    this.items.push({ separator: true });
+    this.items.push({
+      label: 'Export',
+      icon: 'pi pi-download',
+      items: [
+        
+        ...(this.isExportExcel ? [{ 
+          label: 'Export to Excel', 
+          icon: 'pi pi-file-excel',
+          command: () => this.onExportExcel.emit()
+        }] : [])
+      ].filter(Boolean)
+    });
+  }}
+
+  
+  
+  
+  addAddButton(){
+    if(this.isAdd) {this.items.push({ 
+      label: 'Add', 
+      icon: 'pi pi-plus',
+      command: () => this.onAdd.emit() 
+    });}
+  }
+
+  addDeleteButton() {
+  if (this.isDelete){
+  this.items.push({ 
+    label: 'Delete Selected', 
+    icon: 'pi pi-trash',
+    command: () => { 
+      this.onDelete.emit(); // Solo emitir el evento, sin parámetros
+    } });
+  }
+}
+  
+}

package/projects/lib-common-angular/src/lib/componentes/shared/atoms/button-table-view1/button-table-view1.component.html

@@ -0,0 +1 @@
+<ion-icon name="list" size="large"></ion-icon>

package/projects/lib-common-angular/src/lib/componentes/shared/atoms/button-table-view1/button-table-view1.component.ts

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { IonIcon } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { grid, list } from 'ionicons/icons';
+import { ComponentesDTO } from '@juliaosistem/core-dtos';
+
+@Component({
+  selector: 'lib-button-table-view1',
+  standalone: true,
+  imports: [IonIcon],
+  templateUrl: './button-table-view1.component.html',
+  styleUrl: './button-table-view1.component.scss'
+})
+export class ButtonTableView1Component {
+
+  componente: ComponentesDTO = {
+    id: 12,
+    nombreComponente: 'lib-button-table-view1',
+    version: '1.0',
+  };
+
+  constructor() {
+    addIcons({ grid, list });
+  }
+}