crdx-components 1.0.0 → 2.0.0

package/src/lib/components/list-item/list-item.html

@@ -1,79 +0,0 @@
-<div
-  class="ui-list-item__container"
-  [style.width]="width() ?? '100%'"
-  [style.min-width]="width() ?? null"
-  [style.--lib-list-item-background]="backgroundColor() ?? null"
->
-  @if (headerTemplate()) {
-  <div class="ui-list-item__header">
-    <ng-container [ngTemplateOutlet]="headerTemplate()!" />
-  </div>
-}
-<mat-list role="list">
-  @for (item of items(); track trackById($index, item)) {
-    <mat-list-item
-      role="listitem"
-      class="ui-list-option"
-      [class.ui-list-item--disabled]="item.disabled ?? false"
-      [class.ui-list-item--selected]="showCheckbox() && isItemSelected(item)"
-      [class.ui-list-item--with-divider]="showDividers()"
-      [disableRipple]="true"
-      (click)="onRowClick(item, $event)"
-    >
-      @if (itemTemplate()) {
-        <ng-container [ngTemplateOutlet]="itemTemplate()!" [ngTemplateOutletContext]="{ $implicit: item }" />
-      } @else {
-        <div class="ui-list-item" [class.ui-list-item--with-divider]="showDividers()">
-          <span class="ui-list-item__state-layer"></span>
-
-          @if (showCheckbox() && checkboxPosition() === 'leading') {
-            <span class="ui-list-item__leading ui-list-item__leading--checkbox">
-              <mat-checkbox
-                [checked]="isItemSelected(item)"
-                [disabled]="item.disabled ?? disabled()"
-                (change)="onCheckboxChange(item, $event.checked)"
-                (click)="$event.stopPropagation()"
-              />
-            </span>
-          }
-
-          @if (showAvatar() && !showCheckbox()) {
-            <span class="ui-list-item__leading">
-              @if (item.avatarImage) {
-                <img
-                  class="ui-list-item__avatar-image"
-                  [src]="item.avatarImage"
-                  [attr.alt]="item.avatarAlt || item.label"
-                  loading="lazy"
-                />
-              } @else {
-                <span class="ui-list-item__avatar-text" aria-hidden="true">
-                  {{ avatarInitial(item) }}
-                </span>
-              }
-            </span>
-          }
-
-          <span class="ui-list-item__content">
-            <span class="ui-list-item__label">{{ item.label }}</span>
-            @if (item.description) {
-              <span class="ui-list-item__description">{{ item.description }}</span>
-            }
-          </span>
-
-          @if (showCheckbox() && checkboxPosition() === 'trailing') {
-            <span class="ui-list-item__trailing ui-list-item__trailing--checkbox">
-              <lib-checkbox
-                [checked]="isItemSelected(item)"
-                [disabled]="item.disabled ?? disabled()"
-                (checkedChange)="onCheckboxChange(item, $event)"
-                (click)="$event.stopPropagation()"
-              />
-            </span>
-          }
-        </div>
-      }
-    </mat-list-item>
-  }
-</mat-list>
-</div>

package/src/lib/components/list-item/list-item.ts

@@ -1,104 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  contentChild,
-  input,
-  output,
-  TemplateRef,
-} from '@angular/core';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatListModule } from '@angular/material/list';
-import { NgTemplateOutlet } from '@angular/common';
-import { LibCheckboxComponent } from '../checkbox/checkbox';
-
-export interface LibListItemData {
-  id: string;
-  label: string;
-  description?: string;
-  avatarText?: string | null;
-  avatarImage?: string | null;
-  avatarAlt?: string;
-  disabled?: boolean;
-}
-
-@Component({
-  selector: 'lib-list-item',
-  standalone: true,
-  imports: [MatListModule, MatCheckboxModule, LibCheckboxComponent, NgTemplateOutlet],
-  templateUrl: './list-item.html',
-  styleUrl: './list-item.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class LibListItemComponent {
-  items = input<LibListItemData[]>([]);
-  selectedIds = input<string[]>([]);
-  multiple = input(true);
-  disabled = input(false);
-  showCheckbox = input(true);
-  showAvatar = input(true);
-  showDividers = input(true);
-  /** Posición del checkbox: 'leading' (izquierda) o 'trailing' (derecha). Por defecto 'trailing' según diseño Figma. */
-  checkboxPosition = input<'leading' | 'trailing'>('trailing');
-
-  /** Ancho de la lista. Acepta valores CSS (ej: '18.8rem', '300px', '100%'). Si no se pasa, la lista ocupa el ancho disponible. */
-  width = input<string | undefined>(undefined);
-  /** Fondo personalizado de la lista/items. Si no se define, usa el fondo por defecto de tokens. */
-  backgroundColor = input<string | undefined>(undefined);
-
-  readonly selectionChange = output<string[]>();
-  readonly itemClick = output<LibListItemData>();
-
-  /** Template para proyectar contenido arriba de la lista (ej: checkbox, filtros) */
-  readonly headerTemplate = contentChild<TemplateRef<unknown>>('headerTemplate');
-
-  /** Template para proyectar el contenido personalizado de cada item. Usar: let-item para acceder al item */
-  readonly itemTemplate = contentChild<TemplateRef<{ $implicit: LibListItemData }>>('itemTemplate');
-
-  readonly selectedSet = computed(() => new Set(this.selectedIds()));
-
-  trackById(_index: number, item: LibListItemData): string {
-    return item.id;
-  }
-
-  avatarInitial(item: LibListItemData): string {
-    const explicit = item.avatarText?.trim();
-    if (explicit) {
-      return explicit.slice(0, 2).toUpperCase();
-    }
-
-    const label = item.label?.trim();
-    return label ? label.charAt(0).toUpperCase() : '';
-  }
-
-  isItemSelected(item: LibListItemData): boolean {
-    return this.selectedSet().has(item.id);
-  }
-
-  onCheckboxChange(item: LibListItemData, selected: boolean): void {
-    const current = new Set(this.selectedIds());
-    if (this.multiple()) {
-      if (selected) {
-        current.add(item.id);
-      } else {
-        current.delete(item.id);
-      }
-    } else {
-      this.selectionChange.emit(selected ? [item.id] : []);
-      return;
-    }
-    this.selectionChange.emit([...current]);
-  }
-
-  onRowClick(item: LibListItemData, _event: Event): void {
-    if (this.showCheckbox() && !(item.disabled ?? this.disabled())) {
-      const isSelected = this.isItemSelected(item);
-      this.onCheckboxChange(item, !isSelected);
-    }
-    this.itemClick.emit(item);
-  }
-
-  onItemClick(item: LibListItemData): void {
-    this.itemClick.emit(item);
-  }
-}

package/src/lib/components/menu/menu.css

@@ -1,39 +0,0 @@
-.lib-menu {
-  display: inline-flex;
-}
-
-.lib-menu__trigger {
-  display: inline-flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
-  min-width: 12rem;
-  padding-inline: 0.75rem;
-  text-transform: none;
-}
-
-.lib-menu__trigger-label {
-  font-size: 0.875rem;
-  color: rgba(0, 0, 0, 0.6);
-}
-
-.lib-menu__trigger-value {
-  flex: 1;
-  text-align: left;
-}
-
-.lib-menu__trigger-icon {
-  font-size: 20px;
-}
-
-.lib-menu__filter {
-  padding: 0.5rem 1rem 0.25rem;
-}
-
-.lib-menu__filter-field {
-  width: 100%;
-}
-
-.lib-menu__panel {
-  max-width: 20rem;
-}

package/src/lib/components/menu/menu.html

@@ -1,57 +0,0 @@
-<div class="lib-menu">
-  <button
-    mat-button
-    class="lib-menu__trigger"
-    [matMenuTriggerFor]="menu"
-    [disabled]="disabled() || disabledByControl()"
-    type="button"
-  >
-    <span class="lib-menu__trigger-label">
-      {{ label() || '' }}
-    </span>
-    <span class="lib-menu__trigger-value">
-      {{ triggerLabel() }}
-    </span>
-    <mat-icon class="lib-menu__trigger-icon">
-      {{ panelOpen() ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}
-    </mat-icon>
-  </button>
-
-  <mat-menu
-    #menu="matMenu"
-    class="lib-menu__panel"
-    (menuOpened)="onMenuOpened()"
-    (menuClosed)="onMenuClosed()"
-  >
-    @if (filterable()) {
-    <div class="lib-menu__filter">
-      <mat-form-field appearance="outline" class="lib-menu__filter-field">
-        <mat-label>Buscar</mat-label>
-        <input
-          matInput
-          type="text"
-          (input)="onFilterInput($event)"
-        />
-      </mat-form-field>
-    </div>
-    }
-
-    @for (opt of filteredOptions(); track opt.value) {
-    @if (isMultiple()) {
-    <button mat-menu-item (click)="onOptionClick(opt, $event)">
-      <mat-checkbox
-        [checked]="isSelected(opt.value)"
-        (click)="$event.stopPropagation()"
-      >
-        {{ opt.label }}
-      </mat-checkbox>
-    </button>
-    } @else {
-    <button mat-menu-item (click)="onOptionClick(opt, $event)">
-      <span>{{ opt.label }}</span>
-    </button>
-    }
-    }
-  </mat-menu>
-</div>
-

package/src/lib/components/menu/menu.ts

@@ -1,159 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  forwardRef,
-  input,
-  signal,
-} from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatButtonModule } from '@angular/material/button';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { MatIconModule } from '@angular/material/icon';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-
-export interface LibMenuOption<T = string> {
-  value: T;
-  label: string;
-}
-
-export type LibMenuMode = 'single' | 'multiple';
-
-@Component({
-  selector: 'lib-menu',
-  standalone: true,
-  imports: [
-    MatMenuModule,
-    MatButtonModule,
-    MatFormFieldModule,
-    MatInputModule,
-    MatIconModule,
-    MatCheckboxModule,
-  ],
-  templateUrl: './menu.html',
-  styleUrl: './menu.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => LibMenuComponent),
-      multi: true,
-    },
-  ],
-})
-/**
- * @deprecated Prefer `lib-select-field` for new implementations.
- * Kept for compatibility while migrating existing screens.
- */
-export class LibMenuComponent<T = string> implements ControlValueAccessor {
-  readonly label = input<string | null>(null);
-  readonly placeholder = input('Seleccionar');
-  readonly options = input<LibMenuOption<T>[]>([]);
-  readonly mode = input<LibMenuMode>('single');
-  readonly filterable = input(true);
-  readonly disabled = input(false);
-
-  readonly panelOpen = signal(false);
-  readonly filterTerm = signal('');
-  readonly disabledByControl = signal(false);
-
-  readonly valueSignal = signal<T | T[] | null>(null);
-
-  readonly isMultiple = computed(() => this.mode() === 'multiple');
-
-  readonly filteredOptions = computed(() => {
-    const opts = this.options();
-    const term = this.filterTerm().trim().toLowerCase();
-    if (!term) return opts;
-    return opts.filter((o) => o.label.toLowerCase().includes(term));
-  });
-
-  readonly triggerLabel = computed(() => {
-    const current = this.valueSignal();
-    const opts = this.options();
-    if (current == null) {
-      return this.placeholder();
-    }
-    if (Array.isArray(current)) {
-      if (!current.length) return this.placeholder();
-      const labels = current
-        .map((v) => opts.find((o) => o.value === v)?.label)
-        .filter((l): l is string => !!l);
-      if (!labels.length) return this.placeholder();
-      if (labels.length === 1) return labels[0];
-      const [first, ...rest] = labels;
-      return `${first} (+${rest.length})`;
-    }
-    const match = opts.find((o) => o.value === current);
-    return match?.label ?? this.placeholder();
-  });
-
-  onMenuOpened(): void {
-    this.panelOpen.set(true);
-  }
-
-  onMenuClosed(): void {
-    this.panelOpen.set(false);
-    this.filterTerm.set('');
-  }
-
-  onFilterInput(event: Event): void {
-    const el = event.target as HTMLInputElement;
-    this.filterTerm.set(el?.value ?? '');
-  }
-
-  onOptionClick(option: LibMenuOption<T>, event?: MouseEvent): void {
-    if (event) {
-      event.stopPropagation();
-      event.preventDefault();
-    }
-    if (this.isMultiple()) {
-      const current = this.valueSignal();
-      const asArray = Array.isArray(current) ? [...current] : [];
-      const index = asArray.findIndex((v) => v === option.value);
-      if (index >= 0) {
-        asArray.splice(index, 1);
-      } else {
-        asArray.push(option.value);
-      }
-      const next = asArray as T[];
-      this.valueSignal.set(next);
-      this.onChange(next);
-    } else {
-      const next = option.value;
-      this.valueSignal.set(next);
-      this.onChange(next);
-    }
-  }
-
-  isSelected(value: T): boolean {
-    const current = this.valueSignal();
-    if (Array.isArray(current)) {
-      return current.includes(value);
-    }
-    return current === value;
-  }
-
-  // ControlValueAccessor
-  private onChange: (value: T | T[] | null) => void = () => {};
-  private onTouched: () => void = () => {};
-
-  writeValue(value: T | T[] | null): void {
-    this.valueSignal.set(value);
-  }
-
-  registerOnChange(fn: (value: T | T[] | null) => void): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    this.disabledByControl.set(isDisabled);
-  }
-}
-

package/src/lib/components/shared-table/shared-table-cell-template.directive.ts

@@ -1,25 +0,0 @@
-import { Directive, Input, TemplateRef, inject } from '@angular/core';
-
-@Directive({
-  selector: 'ng-template[cellTemplate], ng-template[libCellTemplate]',
-  standalone: true,
-})
-export class SharedTableCellTemplateDirective {
-  readonly template = inject<TemplateRef<unknown>>(TemplateRef);
-  private legacyKey = '';
-  private modernKey = '';
-
-  @Input()
-  set cellTemplate(value: string | null | undefined) {
-    this.legacyKey = value ?? '';
-  }
-
-  @Input()
-  set libCellTemplate(value: string | null | undefined) {
-    this.modernKey = value ?? '';
-  }
-
-  get key(): string {
-    return this.modernKey || this.legacyKey;
-  }
-}

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

@@ -1,223 +0,0 @@
-:host {
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 0;
-  min-height: 0;
-  width: 100%;
-}
-
-.shared-table {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  margin: 0;
-  flex: 1 1 0;
-  min-height: 0;
-}
-
-/* Paginador en el flujo (como en el ejemplo de Material): el scroll termina justo donde empieza el paginador */
-.shared-table .mat-mdc-paginator {
-  flex-shrink: 0;
-}
-
-/* Selector de número de páginas: contenedor al tamaño del contenido para que el gap sea 2.12rem */
-:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select {
-  width: fit-content !important;
-  min-width: 0;
-  max-width: fit-content !important;
-  /* No crecer en el flex del paginador */
-  flex: 0 0 auto !important;
-  --mat-paginator-page-size-select-width: 100%;
-  --mat-paginator-page-size-select-touch-target-height: 100%;
-}
-
-:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-form-field {
-  position: relative;
-  width: fit-content !important;
-  min-width: 0;
-  max-width: fit-content !important;
-}
-
-:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-form-field,
-:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-form-field-flex,
-:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-form-field-subscript-wrapper,
-:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-form-field-infix,
-:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-select-trigger,
-:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-select-value {
-  border: none !important;
-  border-bottom: none !important;
-  box-shadow: none !important;
-  padding-left: 0 !important;
-  padding-right: 0 !important;
-}
-
-/* Solo selector de número de páginas: padding 0 en wrappers del text-field (Material) */
-:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-text-field-wrapper,
-:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mdc-text-field,
-:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mdc-text-field--outlined {
-  padding: 0 !important;
-}
-
-/* Contenedor del trigger como contexto de posicionamiento para que el touch target = mismo tamaño */
-:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-form-field-flex {
-  position: relative;
-  width: fit-content !important;
-  min-width: 0;
-  max-width: fit-content !important;
-}
-
-/* Evitar ancho fijo 180px del infix (Material) */
-:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-form-field-infix {
-  width: auto !important;
-  min-width: 0 !important;
-  flex: 0 0 auto !important;
-}
-
-/* Touch target solo del tamaño del selector (evitar 180px): topes máximos */
-:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-paginator-touch-target {
-  position: absolute !important;
-  inset: 0 !important;
-  width: 100% !important;
-  height: 100% !important;
-  max-width: 5rem !important;
-  max-height: 1.625rem !important;
-  box-sizing: border-box !important;
-}
-
-:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-select-value {
-  margin-right: 0 !important;
-}
-
-/* Trigger: min 2.0625rem x 1.625rem, se ensancha si el número es más largo */
-:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-select-trigger {
-  display: flex !important;
-  min-width: 2.0625rem !important;
-  width: max-content !important;
-  height: 1.625rem !important;
-  flex-direction: row !important;
-  align-items: center !important;
-  flex-shrink: 0;
-  gap: 0 !important;
-  border: none !important;
-  border-bottom: 0.0625rem solid var(--pallete-scheme-surface-outline-variant, #C3C7C9) !important;
-  box-shadow: none !important;
-  align-self: stretch;
-}
-
-:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mat-mdc-select-arrow-wrapper {
-  margin-left: 0 !important;
-}
-
-:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mdc-notched-outline,
-:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mdc-notched-outline__leading,
-:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mdc-notched-outline__notch,
-:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mdc-notched-outline__trailing,
-:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mdc-notched-outline .mat-mdc-notch-piece {
-  border: none !important;
-  border-width: 0 !important;
-}
-
-:host ::ng-deep .shared-table__paginator .mat-mdc-paginator-page-size-select .mdc-line-ripple {
-  display: none !important;
-}
-
-/* Tabla: ancho por contenido para que aparezca scroll horizontal con muchas columnas o pantalla estrecha */
-.shared-table__mat-table {
-  width: max-content;
-  min-width: 100%;
-  table-layout: auto;
-}
-
-.shared-table__caption {
-  margin-bottom: 16px;
-  font-weight: 600;
-  font-size: 1.125rem;
-}
-
-.shared-table__empty {
-  text-align: center;
-  padding: 24px 16px;
-  color: #6b7280;
-}
-
-/* Contenedor: solo esquinas superiores redondeadas, sin borde inferior */
-.shared-table__container {
-  --border-color: #E9E9E9;
-  --table-radius: 0.25rem;
-  flex: 1 1 0;
-  flex-grow: 1;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  overflow: hidden;
-  border-radius: var(--table-radius) var(--table-radius) 0 0;
-}
-
-/* Sin paginador: cerrar "card" de tabla con borde y radio inferior */
-.shared-table__container.shared-table__container--no-paginator {
-  border-radius: var(--table-radius) !important;
-  border-bottom: 1px solid var(--pallete-scheme-surface-outline-variant, #C3C7C9) !important;
-}
-
-.shared-table__container.shared-table__container--no-paginator .shared-table__body-wrap {
-  border-radius: 0 0 var(--table-radius) var(--table-radius);
-}
-
-/* Header: esquinas superiores redondeadas */
-.shared-table__header-wrap {
-  flex-shrink: 0;
-  overflow-x: auto;
-  overflow-y: hidden;
-  scrollbar-width: none;
-  border-radius: var(--table-radius) var(--table-radius) 0 0;
-}
-
-.shared-table__header-wrap::-webkit-scrollbar {
-  display: none;
-}
-
-/* Cuerpo: sin radio en esquinas inferiores */
-.shared-table__body-wrap {
-  flex: 1 1 0;
-  min-height: 0;
-  overflow: auto;
-  position: relative;
-}
-
-.shared-table__loading-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(255, 255, 255, 0.92);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 9999;
-}
-
-::ng-deep .shared-table__loading-spinner,
-::ng-deep .shared-table__loading-spinner .mat-mdc-circular-progress,
-::ng-deep .shared-table__loading-spinner .mdc-circular-progress,
-::ng-deep .shared-table__loading-spinner circle {
-  position: relative;
-  z-index: 10000;
-  color: #d32f2f !important;
-  stroke: #d32f2f !important;
-  stroke-opacity: 1 !important;
-  opacity: 1 !important;
-}
-
-::ng-deep .shared-table__loading-spinner .mdc-circular-progress__indicator,
-::ng-deep .shared-table__loading-spinner .mdc-circular-progress__indeterminate-outer-circle,
-::ng-deep .shared-table__loading-spinner .mdc-circular-progress__indeterminate-inner-circle {
-  stroke: #d32f2f !important;
-  stroke-width: 6 !important;
-}
-
-::ng-deep .shared-table__loading-spinner {
-  --mdc-circular-progress-active-indicator-color: #d32f2f !important;
-  --mdc-circular-progress-track-color: rgba(0, 0, 0, 0.1) !important;
-}