b2b-tools 0.0.3 → 0.1.1

package/src/lib/components/advanced-card/advanced-card.ts

@@ -0,0 +1,75 @@
+import { Component, computed, effect, HostListener, input, output, signal } from '@angular/core';
+import { AdvancedAction, AdvancedCardConfig, AdvancedTone } from './types';
+
+@Component({
+  selector: 'advanced-card',
+  imports: [],
+  templateUrl: './advanced-card.html',
+  styleUrl: './advanced-card.css',
+})
+export class AdvancedCard {
+  // Inputs (signals)
+  config = input.required<AdvancedCardConfig>();
+
+  // Controls (Fase 1)
+  fullWidthOnExpand = input(true);
+  stickyHeader = input(true);
+  closeOnEsc = input(true);
+
+  // Outputs
+  expandedChange = output<boolean>();
+  action = output<{ actionId: string; cardId: string }>();
+
+  // State (signals)
+  readonly expanded = signal(false);
+
+  // Computeds
+  readonly cardId = computed(() => this.config().id);
+  readonly hasHighlights = computed(() => (this.config().highlights?.length ?? 0) > 0);
+  readonly hasSummaryBlocks = computed(() => (this.config().summaryBlocks?.length ?? 0) > 0);
+
+  constructor() {
+    effect(() => {
+      // Notifica al exterior
+      this.expandedChange.emit(this.expanded());
+    });
+  }
+
+  toggleExpand(): void {
+    this.expanded.update((v) => !v);
+  }
+
+  expand(): void {
+    if (!this.expanded()) this.expanded.set(true);
+  }
+
+  collapse(): void {
+    if (this.expanded()) this.expanded.set(false);
+  }
+
+  onActionClick(a: AdvancedAction): void {
+    if (a.disabled) return;
+    this.action.emit({ actionId: a.id, cardId: this.cardId() });
+  }
+
+  badgeClass(tone: AdvancedTone | undefined): string {
+    switch (tone) {
+      case 'success':
+        return 'badge badge--success';
+      case 'warning':
+        return 'badge badge--warning';
+      case 'danger':
+        return 'badge badge--danger';
+      case 'primary':
+        return 'badge badge--primary';
+      default:
+        return 'badge badge--neutral';
+    }
+  }
+
+  @HostListener('document:keydown', ['$event'])
+  onKeydown(ev: KeyboardEvent): void {
+    if (!this.closeOnEsc()) return;
+    if (ev.key === 'Escape') this.collapse();
+  }
+}

package/src/lib/components/advanced-card/index.ts

@@ -0,0 +1,2 @@
+export * from './advanced-card';
+export * from './types';

package/src/lib/components/advanced-card/types/card.types.ts

@@ -0,0 +1,37 @@
+export type AdvancedTone = 'primary' | 'success' | 'warning' | 'danger' | 'neutral';
+
+export interface AdvancedBadge {
+  label: string;
+  tone?: AdvancedTone;
+}
+
+export interface AdvancedHighlight {
+  label: string;
+  value: string;
+  hint?: string;
+}
+
+export interface AdvancedAction {
+  id: string;
+  label: string;
+  tone?: 'primary' | 'secondary' | 'danger';
+  disabled?: boolean;
+}
+
+export interface AdvancedCardConfig {
+  id: string;
+  title: string;
+  subtitle?: string;
+  badge?: AdvancedBadge;
+
+  highlights?: AdvancedHighlight[]; // compact key info
+  summaryBlocks?: AdvancedSummaryBlock[]; // expanded top row blocks
+
+  primaryCta?: { label: string }; // compact CTA
+  actions?: AdvancedAction[]; // expanded header actions
+}
+
+export interface AdvancedSummaryBlock {
+  title: string;
+  rows: { label: string; value: string }[];
+}

package/src/lib/components/advanced-card/types/index.ts

@@ -0,0 +1 @@
+export * from './card.types';

package/src/lib/components/advanced-table/advanced-table.component.css

@@ -0,0 +1,81 @@
+:host {
+  display: block;
+  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
+
+  --black: #171717;
+  --black-light: #343434;
+  --black-dark: #000000;
+  --black-navy: #191a21;
+
+  --xs-dark-gray: #5A5A5A;
+  --dark-gray: #9E9E9E;
+  --medium-gray: #D5D5D5;
+  --gray: #F8F8F8;
+  --light-gray: #C6C6C6;
+  --xs-light-gray: #DFDFDF;
+  --gray-white: #F5F4F4;
+  --xxs-light-gray: #F2F2F2;
+  --soft-white: #EEEEEE;
+
+  --green-success: #208B6A;
+
+  --blue: #3360fa;
+  --blue-info: #7390EC;
+
+  --orange: #F77C00;
+  --yellow-warning: #FFBC57;
+
+  --red: #E60018;
+
+  --white: #FFFFFF;
+
+  --disabled: #C6C6C6;
+  --disabled-text: #9E9E9E;
+
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --border: 1px solid var(--xs-light-gray);
+  --focus-ring: 0 0 0 3px rgba(51, 96, 250, 0.18);
+}
+
+.dt-container {
+  border: var(--border);
+  border-radius: var(--radius-md);
+  background: var(--white);
+  overflow: hidden;
+}
+
+.dt-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  /* padding: 12px; */
+  border-bottom: var(--border);
+  background: var(--xxs-light-gray);
+}
+
+.dt-empty {
+  padding: 18px 12px;
+  color: var(--xs-dark-gray);
+}
+ 
+@media (max-width: 900px) {
+  .dt-toolbar {
+    flex-wrap: wrap;
+    align-items: flex-start;
+    row-gap: 10px;
+    padding: 10px 12px;
+  }
+
+  .dt-toolbar > b2b-table-toolbar {
+    flex: 1 1 100%;
+  }
+
+  .dt-toolbar > b2b-table-pagination {
+    flex: 1 1 100%;
+    display: flex;
+    justify-content: center;
+  }
+}
+

package/src/lib/components/advanced-table/advanced-table.component.html

@@ -0,0 +1,56 @@
+<div class="dt-container">
+  <div class="dt-toolbar">
+    <!-- Search and Clean -->
+    <table-toolbar
+      [enabled]="config().globalSearch ?? true"
+      [query]="globalQuery()"
+      placeholder="Buscar..."
+      [showClear]="true"
+      (queryChange)="setGlobalQuery($event)"
+      (clear)="clearFilters()"
+    />
+
+    <!-- Pagination -->
+    @if (config().pagination?.enabled) {
+      <table-pagination
+        [page]="page()"
+        [pageSize]="pageSize()"
+        [pageCount]="pageCount()"
+        [totalCount]="totalCount()"
+        [pagerItems]="pagerItems()"
+        [pageSizeOptions]="config().pagination!.pageSizeOptions ?? [10, 25, 50]"
+        (pageChange)="goToPage($event)"
+        (pageSizeChange)="onPageSizeChange($event)"
+      />
+    }
+  </div>
+
+  <div class="dt-grid">
+    <!-- Data Table -->
+    <table-grid
+      [config]="config()"
+      [columns]="visibleColumns()"
+      [rows]="pagedData()"
+      [gridTemplateColumns]="gridTemplateColumns()"
+      [columnQueries]="columnQueries()"
+      [sortState]="sortState()"
+      [selectedIdsSet]="selectedIdsSet()"
+      (headerSort)="onHeaderClickSort($event)"
+      (columnQueryChange)="setColumnQuery($event.key, $event.value)"
+      (rowClick)="onRowClick($event)"
+      (toggleRow)="toggleRowSelection($event)"
+      (toggleAllOnPage)="toggleSelectAllOnPage()"
+      (openImage)="openImageModal($event.src, $event.alt)"
+      (actionClick)="actionClick.emit($event)"
+      (bodyScroll)="onBodyScroll($event)"
+    />
+  </div>
+
+  <!-- Image Modal -->
+  <table-modal-image
+    [open]="modalOpen()"
+    [src]="modalImageSrc()"
+    [alt]="modalImageAlt()"
+    (close)="closeModal()"
+  />
+</div>