b2b-tools 0.1.0 → 0.1.2

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

@@ -1,265 +0,0 @@
-:host {
-  display: block;
-}
-
-.ac {
-  border: 1px solid #e5e7eb;
-  border-radius: 12px;
-  background: #fff;
-  box-shadow: 0 6px 18px rgba(17, 24, 39, 0.06);
-}
-
-.ac--hidden {
-  display: none;
-}
-
-/* Compact */
-.ac--compact {
-  padding: 14px 14px 12px;
-  cursor: pointer;
-  transition:
-    transform 0.12s ease,
-    box-shadow 0.12s ease;
-}
-.ac--compact:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 10px 24px rgba(17, 24, 39, 0.1);
-}
-
-.ac__header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 12px;
-}
-.ac__title {
-  margin: 0;
-  font-size: 18px;
-  font-weight: 700;
-  color: #111827;
-}
-.ac__subtitle {
-  margin: 2px 0 0;
-  font-size: 13px;
-  color: #6b7280;
-}
-
-.ac__highlights {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 10px;
-  margin-top: 12px;
-}
-.ac__hl {
-  border-top: 1px solid #f3f4f6;
-  padding-top: 10px;
-}
-.ac__hl-value {
-  font-size: 18px;
-  font-weight: 700;
-  color: #111827;
-}
-.ac__hl-label {
-  font-size: 12px;
-  color: #6b7280;
-}
-.ac__hl-hint {
-  color: #9ca3af;
-}
-
-.ac__footer {
-  margin-top: 12px;
-  display: flex;
-  justify-content: flex-end;
-}
-
-/* Expanded */
-.ac--expanded {
-  overflow: hidden;
-}
-.ac--full {
-  width: 100%;
-}
-
-.acx__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 12px 14px;
-  border-bottom: 1px solid #eef2f7;
-  background: #fff;
-}
-.acx__header--sticky {
-  position: sticky;
-  top: 0;
-  z-index: 5;
-}
-
-.acx__title {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-.acx__title-text {
-  margin: 0;
-  font-size: 18px;
-  font-weight: 800;
-  color: #111827;
-}
-
-.acx__actions {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-.acx__body {
-  padding: 14px;
-  display: grid;
-  gap: 12px;
-}
-
-.acx__summary {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 10px;
-}
-
-.block {
-  border: 1px solid #eef2f7;
-  border-radius: 10px;
-  padding: 10px;
-  background: #fafafa;
-}
-.block__title {
-  font-size: 13px;
-  font-weight: 700;
-  color: #111827;
-  margin-bottom: 8px;
-}
-.block__row {
-  display: flex;
-  justify-content: space-between;
-  gap: 10px;
-  padding: 4px 0;
-}
-.block__label {
-  font-size: 12px;
-  color: #6b7280;
-}
-.block__value {
-  font-size: 12px;
-  font-weight: 700;
-  color: #111827;
-}
-
-.acx__content {
-  border: 1px solid #eef2f7;
-  border-radius: 12px;
-  padding: 12px;
-  background: #fff;
-  min-height: 160px;
-}
-.acx__content-title {
-  font-size: 13px;
-  font-weight: 800;
-  color: #111827;
-  margin-bottom: 10px;
-}
-
-.badge {
-  font-size: 12px;
-  padding: 3px 10px;
-  border-radius: 999px;
-  border: 1px solid transparent;
-  font-weight: 700;
-  white-space: nowrap;
-}
-.badge--success {
-  background: #e8f7f2;
-  color: #0f766e;
-  border-color: #b7f0df;
-}
-.badge--warning {
-  background: #fff7ed;
-  color: #b45309;
-  border-color: #fed7aa;
-}
-.badge--danger {
-  background: #fef2f2;
-  color: #b91c1c;
-  border-color: #fecaca;
-}
-.badge--primary {
-  background: #eff6ff;
-  color: #1d4ed8;
-  border-color: #bfdbfe;
-}
-.badge--neutral {
-  background: #f3f4f6;
-  color: #374151;
-  border-color: #e5e7eb;
-}
-
-.btn {
-  border: 1px solid #d1d5db;
-  background: #fff;
-  color: #111827;
-  padding: 8px 12px;
-  border-radius: 10px;
-  font-weight: 700;
-  cursor: pointer;
-}
-.btn--primary {
-  border-color: #1d4ed8;
-  background: #1d4ed8;
-  color: #fff;
-}
-.btn--secondary {
-  background: #fff;
-}
-.btn--danger {
-  border-color: #dc2626;
-  background: #dc2626;
-  color: #fff;
-}
-.btn:disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
-}
-
-.btn__chev {
-  margin-left: 8px;
-  font-size: 16px;
-  line-height: 0;
-}
-
-.icon-btn {
-  border: 1px solid #e5e7eb;
-  background: #fff;
-  width: 36px;
-  height: 36px;
-  border-radius: 10px;
-  cursor: pointer;
-  font-weight: 900;
-}
-
-/* Responsive */
-@media (max-width: 1100px) {
-  .acx__summary {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-  .ac__highlights {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-@media (max-width: 640px) {
-  .ac__highlights {
-    grid-template-columns: 1fr;
-  }
-  .acx__actions {
-    justify-content: flex-end;
-  }
-}

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

@@ -1,117 +0,0 @@
-<!-- COMPACT -->
-<section
-  class="ac ac--compact"
-  [class.ac--hidden]="expanded()"
-  tabindex="0"
-  role="button"
-  (click)="expand()"
-  (keydown.enter)="expand()"
->
-  <header class="ac__header">
-    <div class="ac__title-wrap">
-      <h3 class="ac__title">{{ config().title }}</h3>
-      @if (config().subtitle) {
-        <p class="ac__subtitle">{{ config().subtitle }}</p>
-      }
-    </div>
-
-    @if (config().badge) {
-      <span [class]="badgeClass(config().badge?.tone)">
-        {{ config().badge?.label }}
-      </span>
-    }
-  </header>
-
-  @if (hasHighlights()) {
-    <div class="ac__highlights">
-      @for (highlight of config().highlights; track $index) {
-        <div class="ac__hl">
-          <div class="ac__hl-value">{{ highlight.value }}</div>
-          <div class="ac__hl-label">
-            {{ highlight.label }}
-            @if (highlight.hint) {
-              <span class="ac__hl-hint">· {{ highlight.hint }}</span>
-            }
-          </div>
-        </div>
-      }
-    </div>
-  }
-
-  <footer class="ac__footer">
-    <button type="button" class="btn btn--primary" (click)="expand(); $event.stopPropagation()">
-      {{ config().primaryCta?.label ?? 'Ver detalle' }}
-      <span class="btn__chev">›</span>
-    </button>
-  </footer>
-</section>
-
-<!-- EXPANDED (FULL WIDTH ROW) -->
-<section
-  class="ac ac--expanded"
-  [class.ac--full]="fullWidthOnExpand()"
-  [class.ac--hidden]="!expanded()"
-  aria-expanded="true"
->
-  <!-- Sticky header -->
-  <header class="acx__header" [class.acx__header--sticky]="stickyHeader()">
-    <div class="acx__title">
-      <h3 class="acx__title-text">{{ config().title }}</h3>
-      @if (config().badge) {
-        <span [class]="badgeClass(config().badge?.tone)">
-          {{ config().badge?.label }}
-        </span>
-      }
-    </div>
-
-    <div class="acx__actions">
-      @for (action of config().actions; track action) {
-        <button
-          type="button"
-          class="btn"
-          [class.btn--primary]="action.tone === 'primary'"
-          [class.btn--danger]="action.tone === 'danger'"
-          [class.btn--secondary]="!action.tone || action.tone === 'secondary'"
-          [disabled]="action.disabled"
-          (click)="onActionClick(action)"
-        >
-          {{ action.label }}
-        </button>
-      }
-
-      <button type="button" class="icon-btn" (click)="collapse()" aria-label="Cerrar">✕</button>
-    </div>
-  </header>
-
-  <div class="acx__body">
-    <!-- Summary blocks row -->
-    @if (hasSummaryBlocks()) {
-      <div class="acx__summary">
-        @for (summaryBlock of config().summaryBlocks; track summaryBlock) {
-          <div class="block">
-            <div class="block__title">{{ summaryBlock.title }}</div>
-            @for (row of summaryBlock.rows; track $index) {
-              <div class="block__row">
-                <span class="block__label">{{ row.label }}</span>
-                <span class="block__value">{{ row.value }}</span>
-              </div>
-            }
-          </div>
-        }
-      </div>
-    }
-
-    <!-- Placeholder “tabs/content area” (Fase 2 lo convertimos en tabs reales) -->
-    <div class="acx__content">
-      <div class="acx__content-title">Detalle</div>
-
-      <!-- Slot genérico para que metas tablas / cualquier cosa -->
-      <ng-content></ng-content>
-
-      <!-- Si no mandas contenido, muestra empty state -->
-      @if (false) {
-        <div class="empty">Sin contenido.</div>
-      }
-    </div>
-  </div>
-</section>

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

@@ -1,75 +0,0 @@
-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

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

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

@@ -1,37 +0,0 @@
-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

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

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

@@ -1,81 +0,0 @@
-: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

@@ -1,56 +0,0 @@
-<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>