crdx-components 1.0.0

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

@@ -0,0 +1,122 @@
+/* Host: flex column para que el contenedor interno ocupe toda la altura y no quede hueco antes del padding. */
+:host {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-height: 0;
+}
+
+.ui-list-item__container {
+  display: flex;
+  flex-direction: column;
+  /* Ocupa toda la altura del host para no dejar espacio vacío antes del padding */
+  flex: 1 1 0;
+  min-height: 0;
+}
+
+.ui-list-item__header {
+  padding-bottom: 0.5rem;
+}
+
+/* Quitar padding del MDC list item; el padding lo define el diseño Figma en .ui-list-item. */
+:host ::ng-deep .ui-list-option.mdc-list-item {
+  padding: 0;
+  min-height: calc(var(--lists-wip-common-typography-one-line-list-item-container-height, 56) * 1px);
+  background-color: var(--lists-wip-common-color-enabled-list-list-item-container-color,
+      var(--app-pallete-scheme-surface-surface-container-lowest, #FFFFFF));
+}
+
+/* Layout interno del list-item según Figma (7878:52476, state-layer): gap 16px, padding 16px horizontal, 8px vertical. */
+.ui-list-item {
+  display: flex;
+  align-items: center;
+  padding: 8px 16px;
+  min-height: calc(var(--lists-wip-common-typography-one-line-list-item-container-height, 56) * 1px);
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/* Bordes entre items según Figma (List 7878:52476, Horizontal/Full-width divider).
+   Se aplica al contenedor del item para línea full-width entre cada elemento. */
+:host ::ng-deep mat-list .ui-list-option.ui-list-item--with-divider {
+  border-bottom: calc(var(--divider-enabled-container-divider-thickness, 1) * 1px) solid
+    var(--divider-enabled-container-divider-color, #c3c7c9);
+}
+
+/* Sin borde después del último item (diseño Figma). */
+:host ::ng-deep mat-list .ui-list-option.ui-list-item--with-divider:last-child {
+  border-bottom: none;
+}
+
+.ui-list-item__content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 0;
+  flex: 1;
+  min-width: 0;
+}
+
+/* Tipografía del label según __app-tokens (lists-wip + date-pickers-docked menu list item) */
+.ui-list-item__label {
+  color: var(--lists-wip-common-color-enabled-list-list-item-label-text-color, #181c1e);
+  font-family: var(--date-pickers-docked-enabled-label-text-menu-list-item-label-text-font, Heebo), sans-serif;
+  font-size: calc(var(--date-pickers-docked-enabled-label-text-menu-list-item-label-text-size, 16) * 1px);
+  font-style: normal;
+  font-weight: var(--date-pickers-docked-enabled-label-text-menu-list-item-label-text-weight, 400);
+  line-height: calc(var(--date-pickers-docked-enabled-label-text-menu-list-item-label-text-line-height, 24) * 1px);
+  letter-spacing: calc(var(--date-pickers-docked-enabled-label-text-menu-list-item-label-text-tracking, 0.5) * 1px);
+}
+
+.ui-list-item__description {
+  line-height: 1.25;
+}
+
+/* Estilos compartidos para checkbox (leading y trailing) — inlineados desde el placeholder @extend */
+.ui-list-item__leading--checkbox {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  align-self: center;
+}
+
+.ui-list-item__leading--checkbox .mat-mdc-checkbox {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ui-list-item__leading--checkbox .mat-mdc-checkbox .mdc-checkbox__ripple,
+.ui-list-item__leading--checkbox .mat-mdc-checkbox .mdc-checkbox__state-layer {
+  left: 50% !important;
+  top: 50% !important;
+  right: auto !important;
+  bottom: auto !important;
+  transform: translate(-50%, -50%) !important;
+}
+
+.ui-list-item__trailing--checkbox {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  align-self: center;
+  margin-left: auto;
+}
+
+.ui-list-item__trailing--checkbox .mat-mdc-checkbox {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ui-list-item__trailing--checkbox .mat-mdc-checkbox .mdc-checkbox__ripple,
+.ui-list-item__trailing--checkbox .mat-mdc-checkbox .mdc-checkbox__state-layer {
+  left: 50% !important;
+  top: 50% !important;
+  right: auto !important;
+  bottom: auto !important;
+  transform: translate(-50%, -50%) !important;
+}

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

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

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

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

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

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

@@ -0,0 +1,25 @@
+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;
+  }
+}