b2b-tools 0.1.0 → 0.1.2

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

@@ -1,274 +0,0 @@
-.dt-grid {
-  width: 100%;
-}
-
-.dt-row {
-  display: grid;
-  align-items: stretch;
-  min-width: max-content;
-}
-
-.dt-xscroll {
-  overflow-x: auto;
-  overflow-y: hidden;
-}
-
-.dt-header {
-  background: var(--gray-white);
-  border-bottom: var(--border);
-  font-weight: 600;
-  color: var(--black);
-}
-
-.dt-cell--header {
-  user-select: none;
-}
-
-.dt-cell--sortable {
-  cursor: pointer;
-}
-
-.dt-filters {
-  background: var(--xxs-light-gray);
-  border-bottom: var(--border);
-}
-
-.dt-cell--filter {
-  padding: 8px 12px;
-}
-
-input {
-  width: 100%;
-  padding: 7px 8px;
-  border: 1px solid var(--light-gray);
-  border-radius: var(--radius-sm);
-  background: var(--white);
-  color: var(--black);
-  outline: none;
-}
-
-input::placeholder {
-  color: var(--xs-dark-gray);
-}
-
-input:focus {
-  border-color: var(--blue);
-  box-shadow: var(--focus-ring);
-}
-
-.dt-body {
-  overflow-y: auto;
-  overflow-x: hidden;
-  min-width: max-content;
-}
-
-@media (max-heicg: 900px) {
-  .dt-body {
-    max-height: none !important;
-    overflow-y: visible !important;
-    overflow-x: auto !important;
-  }
-}
-
-.dt-cell {
-  padding: 10px 12px;
-  min-height: 30px;
-  border-bottom: 1px solid var(--xxs-light-gray);
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: var(--black);
-}
-
-.dt-cell[data-align='left'] {
-  justify-content: flex-start;
-  text-align: left;
-}
-
-.dt-cell[data-align='center'] {
-  justify-content: center;
-  text-align: center;
-}
-
-.dt-cell[data-align='right'] {
-  justify-content: flex-end;
-  text-align: right;
-}
-
-.dt-cell--center {
-  justify-content: center;
-}
-
-.dt-select-col {
-  justify-content: center;
-}
-
-.dt-header-label {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.dt-sort {
-  margin-left: auto;
-  font-size: 12px;
-  opacity: 0.7;
-  color: var(--xs-dark-gray);
-}
-
-.dt-data:hover {
-  background: var(--gray);
-}
-
-.dt-text {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.dt-img {
-  width: 40px;
-  height: 40px;
-  object-fit: cover;
-  border-radius: var(--radius-sm);
-  border: 1px solid var(--xs-light-gray);
-  cursor: pointer;
-}
-
-.dt-img--full {
-  width: 100%;
-  height: auto;
-}
-
-.dt-link {
-  color: var(--blue);
-  text-decoration: none;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-  font: inherit;
-}
-
-.dt-link:hover {
-  text-decoration: underline;
-}
-
-.dt-badge {
-  padding: 4px 10px;
-  border-radius: 999px;
-  border: 1px solid var(--xs-light-gray);
-  font-size: 12px;
-  background: var(--xxs-light-gray);
-}
-
-.dt-badge[data-variant='success'] {
-  background: rgba(32, 139, 106, 0.12);
-  border-color: rgba(32, 139, 106, 0.35);
-}
-
-.dt-badge[data-variant='warn'] {
-  background: rgba(255, 188, 87, 0.2);
-  border-color: rgba(255, 188, 87, 0.45);
-}
-
-.dt-badge[data-variant='error'] {
-  background: rgba(230, 0, 24, 0.12);
-  border-color: rgba(230, 0, 24, 0.35);
-}
-
-.dt-badge[data-variant='info'] {
-  background: rgba(115, 144, 236, 0.14);
-  border-color: rgba(115, 144, 236, 0.35);
-}
-
-.dt-empty {
-  padding: 18px 12px;
-  color: var(--xs-dark-gray);
-}
-
-.dt-actions {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-}
-.dt-action-svg {
-  width: 24px;
-  height: 24px;
-  display: inline-flex;
-}
-
-.dt-action-svg svg {
-  width: 24px;
-  height: 24px;
-  color: inherit;
-}
-
-/* Base del botón */
-.dt-action-btn {
-  width: 32px;
-  height: 32px;
-  border: 1px solid var(--xs-light-gray);
-  border-radius: var(--radius-sm);
-  background: var(--white);
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-
-  /* default icon color */
-  color: var(--xs-dark-gray);
-}
-
-/* Hover general (NO tocar color aquí) */
-.dt-action-btn:hover:not(:disabled) {
-  background: var(--gray-white);
-  border-color: var(--dark-gray);
-}
-
-/* Edit */
-.dt-action-btn.dt-action--edit {
-  color: var(--blue);
-}
-.dt-action-btn.dt-action--edit:hover:not(:disabled) {
-  color: var(--white);
-  background-color: var(--blue);
-}
-
-/* Open */
-.dt-action-btn.dt-action--open {
-  color: var(--blue-medium);
-}
-.dt-action-btn.dt-action--open:hover:not(:disabled) {
-  color: var(--blue-dark);
-}
-
-/* Copy */
-.dt-action-btn.dt-action--copy {
-  color: var(--xs-dark-gray);
-}
-.dt-action-btn.dt-action--copy:hover:not(:disabled) {
-  color: var(--white);
-  background-color: var(--xs-dark-gray);
-}
-
-/* Delete */
-.dt-action-btn.dt-action--delete {
-  color: var(--red);
-}
-.dt-action-btn.dt-action--delete:hover:not(:disabled) {
-  color: var(--white);
-  background-color: var(--red);
-}
-
-/* Disabled */
-.dt-action-btn:disabled {
-  color: var(--disabled-text);
-  background: var(--soft-white);
-  cursor: not-allowed;
-}
-
-.dt-action-text {
-  font-size: 24px;
-  padding: 0 8px;
-}

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

@@ -1,168 +0,0 @@
-<div class="dt-grid">
-  <div class="dt-xscroll">
-    <!-- Header -->
-    <div class="dt-row dt-header" [style.gridTemplateColumns]="gridTemplateColumns()">
-      @if (showSelectionColumn()) {
-        <div class="dt-cell dt-cell--header dt-cell--center dt-select-col">
-          @if ((config().selectionMode ?? 'multiple') === 'multiple') {
-            <input
-              type="checkbox"
-              [checked]="isAllSelectedOnPage()"
-              (change)="onToggleAllOnPage()"
-              aria-label="Seleccionar todo"
-            />
-          }
-        </div>
-      }
-
-      @for (col of columns(); track col.key) {
-        <div
-          class="dt-cell dt-cell--header"
-          [class.dt-cell--sortable]="!!col.sortable"
-          [attr.data-align]="col.align ?? 'left'"
-          (click)="onHeaderClickSort(col)"
-          role="button"
-          tabindex="0"
-        >
-          <span class="dt-header-label">{{ col.label }}</span>
-          @if (col.sortable) {
-            <span class="dt-sort">{{ getSortIcon(col.key) }}</span>
-          }
-        </div>
-      }
-    </div>
-
-    <!-- Filters row (under header) -->
-    @if (config().columnFilters) {
-      <div class="dt-row dt-filters" [style.gridTemplateColumns]="gridTemplateColumns()">
-        @if (showSelectionColumn()) {
-          <div class="dt-cell dt-cell--filter dt-select-col"></div>
-        }
-
-        @for (col of columns(); track col.key) {
-          <div class="dt-cell dt-cell--filter" [attr.data-align]="col.align ?? 'left'">
-            @if (col.filterable) {
-              <input
-                type="text"
-                [value]="columnQueries()[col.key] ?? null"
-                (input)="onColumnQueryInput(col.key, $any($event.target).value)"
-                [placeholder]="'Filtrar ' + col.label"
-              />
-            }
-          </div>
-        }
-      </div>
-    }
-
-    <!-- Body -->
-    <div
-      class="dt-body"
-      [style.maxHeight.px]="config().scroll?.heightPx ?? null"
-      (scroll)="onBodyScroll($event)"
-    >
-      @if (rows().length === 0) {
-        <div class="dt-empty">
-          {{ config().emptyText ?? 'Sin resultados' }}
-        </div>
-      } @else {
-        @for (row of rows(); track getRowId(row)) {
-          <div class="dt-row dt-data" [style.gridTemplateColumns]="gridTemplateColumns()">
-            @if (showSelectionColumn()) {
-              <div class="dt-cell dt-cell--center dt-select-col">
-                <input
-                  type="checkbox"
-                  [checked]="isSelected(row)"
-                  (change)="onToggleRow(row)"
-                  aria-label="Seleccionar fila"
-                />
-              </div>
-            }
-
-            @for (col of columns(); track col.key) {
-              <div
-                class="dt-cell"
-                [attr.data-align]="col.align ?? 'left'"
-                (click)="onRowClick(row)"
-              >
-                @switch (col.type) {
-                  @case ('image') {
-                    @if ((col.options?.image?.hidden ?? false) === true) {
-                      <button
-                        type="button"
-                        class="dt-link"
-                        (click)="onOpenImage(getImageSrc(row, col), getImageAlt(row, col), $event)"
-                      >
-                        Ver imagen
-                      </button>
-                    } @else {
-                      <img
-                        class="dt-img"
-                        [class.dt-img--full]="!!col.options?.image?.showFull"
-                        [src]="getImageSrc(row, col)"
-                        [alt]="getImageAlt(row, col)"
-                        (click)="
-                          (col.options?.image?.openInModal ?? true) &&
-                            onOpenImage(getImageSrc(row, col), getImageAlt(row, col), $event)
-                        "
-                      />
-                    }
-                  }
-
-                  @case ('status') {
-                    <span class="dt-badge" [attr.data-variant]="getStatusClass(row, col)">
-                      {{ getDisplayText(row, col) }}
-                    </span>
-                  }
-
-                  @case ('link') {
-                    <a
-                      class="dt-link"
-                      [href]="getLinkHref(row, col)"
-                      [target]="col.options?.link?.target ?? '_blank'"
-                      (click)="$event.stopPropagation()"
-                    >
-                      {{ getLinkLabel(row, col) }}
-                    </a>
-                  }
-
-                  @case ('actions') {
-                    <div class="dt-actions">
-                      @for (action of getColumnActions(col); track action.id) {
-                        @if (isActionVisible(action, row)) {
-                          <button
-                            type="button"
-                            class="dt-action-btn"
-                            [class.dt-action--edit]="action.id === 'edit'"
-                            [class.dt-action--delete]="action.id === 'delete'"
-                            [class.dt-action--open]="action.id === 'open'"
-                            [class.dt-action--copy]="action.id === 'copy'"
-                            [disabled]="isActionDisabled(action, row)"
-                            [title]="action.tooltip ?? action.label"
-                            (click)="emitAction(action, row, $event)"
-                          >
-                            @if ((action.render ?? 'icon') === 'text') {
-                              <span class="dt-action-text">{{ action.label }}</span>
-                            } @else {
-                              <span
-                                class="dt-action-svg"
-                                [innerHTML]="getActionSvg(action)"
-                              ></span>
-                            }
-                          </button>
-                        }
-                      }
-                    </div>
-                  }
-
-                  @default {
-                    <span class="dt-text">{{ getDisplayText(row, col) }}</span>
-                  }
-                }
-              </div>
-            }
-          </div>
-        }
-      }
-    </div>
-  </div>
-</div>

package/src/lib/components/advanced-table/parts/table-grid/table-grid.component.ts

@@ -1,224 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, Component, computed, inject, input, output } from '@angular/core';
-import {
-  TableColumn,
-  TableConfig,
-  TableSortState,
-  RowId,
-  TableAction,
-  TableActionEvent,
-  SVG_ICONS
-} from '../../types/table.types';
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
-import { TimeZoneInfo, TIME_ZONES } from '../../types/time-zone.types';
-
-@Component({
-  selector: 'table-grid',
-  standalone: true,
-  imports: [CommonModule],
-  templateUrl: './table-grid.component.html',
-  styleUrls: ['./table-grid.component.css'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class TableGridComponent<T extends Record<string, any>> {
-  private sanitizer = inject(DomSanitizer);
-
-  // Inputs
-  readonly config = input<TableConfig>({});
-  readonly columns = input<TableColumn<T>[]>([]);
-  readonly rows = input<T[]>([]);
-  readonly gridTemplateColumns = input<string>('');
-  readonly columnQueries = input<Record<string, string>>({});
-  readonly sortState = input<TableSortState | null>(null);
-  readonly selectedIdsSet = input<Set<RowId>>(new Set<RowId>());
-  readonly timeZone = input<TimeZoneInfo>(TIME_ZONES.MEXICO_CITY);
-
-  // Outputs
-  readonly headerSort = output<TableColumn<T>>();
-  readonly columnQueryChange = output<{ key: string; value: string }>();
-  readonly rowClick = output<T>();
-  readonly toggleRow = output<T>();
-  readonly toggleAllOnPage = output<void>();
-  readonly openImage = output<{ src: string; alt: string }>();
-  readonly actionClick = output<TableActionEvent<T>>();
-  readonly bodyScroll = output<Event>();
-
-  // Derived
-  readonly showSelectionColumn = computed(() => !!this.config().selectable);
-
-  // Helpers
-  private getRowIdKey(): string {
-    return this.config().rowIdKey ?? 'id';
-  }
-
-  getRowId(row: T): RowId {
-    const getter = this.config().rowIdGetter;
-    if (getter) return getter(row);
-    const key = this.getRowIdKey();
-    return row?.[key];
-  }
-
-  isSelected(row: T): boolean {
-    return this.selectedIdsSet().has(this.getRowId(row));
-  }
-
-  isAllSelectedOnPage(): boolean {
-    const rows = this.rows();
-    if (!rows.length) return false;
-    const set = this.selectedIdsSet();
-    return rows.every((r) => set.has(this.getRowId(r)));
-  }
-
-  getSortIcon(colKey: string): string {
-    const sorted = this.sortState();
-    if (!sorted || sorted.key !== colKey) return '↕';
-    return sorted.dir === 'asc' ? '↑' : '↓';
-  }
-
-  getDisplayText(row: T, column: TableColumn<T>): string {
-    const value = this.getCellValue(row, column);
-
-    if (column.formatter) {
-      try {
-        return column.formatter(value, row);
-      } catch {
-        return '';
-      }
-    }
-
-    switch (column.type) {
-      case 'string':
-        return value == null ? '' : String(value);
-
-      case 'integer':
-      case 'decimal':
-      case 'currency': {
-        const currencyValue = Number(value);
-        if (!Number.isFinite(currencyValue)) return value == null ? '' : String(value);
-        if (column.type === 'currency') {
-          try {
-            return new Intl.NumberFormat(this.timeZone().locale, {
-              style: 'currency',
-              currency: column.options?.currency ?? this.timeZone().currency,
-              maximumFractionDigits: 2,
-            }).format(currencyValue);
-          } catch {
-            return String(currencyValue);
-          }
-        }
-        return String(currencyValue);
-      }
-
-      case 'date':
-      case 'datetime': {
-        const dateTime = value instanceof Date ? value : new Date(String(value));
-        if (Number.isNaN(dateTime.getTime())) return value == null ? '' : String(value);
-
-        const locale = this.timeZone().locale;
-        return column.type === 'datetime'
-          ? dateTime.toLocaleString(locale)
-          : dateTime.toLocaleDateString(locale);
-      }
-
-      case 'boolean':
-        return value ? 'Sí' : 'No';
-
-      default:
-        return value == null ? '' : String(value);
-    }
-  }
-
-  getImageSrc(row: T, col: TableColumn<T>): string {
-    return this.getCellString(row, col);
-  }
-
-  getImageAlt(row: T, col: TableColumn<T>): string {
-    const altFn = col.options?.image?.alt;
-    return altFn ? altFn(row) : col.label;
-  }
-
-  getStatusClass(row: T, col: TableColumn<T>): string {
-    const raw = this.getCellString(row, col);
-    return col.options?.status?.classMap?.[raw] ?? '';
-  }
-
-  getLinkHref(row: T, col: TableColumn<T>): string {
-    const getter = col.options?.link?.hrefGetter;
-    return getter ? getter(row) : this.getCellString(row, col);
-  }
-
-  getLinkLabel(row: T, col: TableColumn<T>): string {
-    const getter = col.options?.link?.labelGetter;
-    if (getter) return getter(row);
-    const cellValue = this.getCellValue(row, col);
-    return cellValue == null ? '' : String(cellValue);
-  }
-
-  getColumnActions(col: TableColumn<T>): TableAction<T>[] {
-    return col.actions ?? [];
-  }
-
-  isActionVisible(action: TableAction<T>, row: T): boolean {
-    return action.visible ? action.visible(row) : true;
-  }
-
-  isActionDisabled(action: TableAction<T>, row: T): boolean {
-    return action.disabled ? action.disabled(row) : false;
-  }
-
-  emitAction(action: TableAction<T>, row: T, event: Event) {
-    event.stopPropagation();
-    this.actionClick.emit({ actionId: action.id, row });
-  }
-
-  getActionSvg(action: TableAction<T>): SafeHtml | string {
-    const key = (action.icon ?? action.id).toLowerCase();
-    return this.sanitizer.bypassSecurityTrustHtml(SVG_ICONS[key] ?? '*');
-  }
-
-  onHeaderClickSort(column: TableColumn<T>) {
-    if (!column.sortable) return;
-    this.headerSort.emit(column);
-  }
-
-  onColumnQueryInput(key: string, value: string) {
-    this.columnQueryChange.emit({ key, value });
-  }
-
-  onRowClick(row: T) {
-    this.rowClick.emit(row);
-  }
-
-  onToggleRow(row: T) {
-    this.toggleRow.emit(row);
-  }
-
-  onToggleAllOnPage() {
-    this.toggleAllOnPage.emit();
-  }
-
-  onOpenImage(src: string, alt: string, event: Event) {
-    event.stopPropagation();
-    this.openImage.emit({ src, alt });
-  }
-
-  onBodyScroll(event: Event) {
-    this.bodyScroll.emit(event);
-  }
-
-  private getCellValue(row: T, col: TableColumn<T>): unknown {
-    if (col.valueGetter) {
-      try {
-        return col.valueGetter(row);
-      } catch {
-        return null;
-      }
-    }
-    return row?.[col.key];
-  }
-
-  private getCellString(row: T, col: TableColumn<T>): string {
-    const value = this.getCellValue(row, col);
-    return value == null ? '' : String(value);
-  }
-}

package/src/lib/components/advanced-table/parts/table-modal-image/table-modal-image.component.css

@@ -1,49 +0,0 @@
-.dt-modal-backdrop {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.55);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 18px;
-  z-index: 9999;
-}
-
-.dt-modal {
-  width: min(900px, 95vw);
-  max-height: 90vh;
-  background: var(--white);
-  border-radius: var(--radius-md);
-  border: var(--border);
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.dt-modal-header {
-  padding: 12px;
-  border-bottom: var(--border);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background: var(--gray-white);
-}
-
-.dt-modal-title {
-  font-weight: 600;
-  color: var(--black);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.dt-modal-body {
-  padding: 12px;
-  overflow: auto;
-}
-
-.dt-modal-img {
-  width: 100%;
-  height: auto;
-  border-radius: var(--radius-sm);
-}