crdx-components 1.0.0

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

@@ -0,0 +1,285 @@
+:host {
+  display: block;
+}
+
+:host(.lib-card-host--full-width) {
+  width: 100%;
+  min-width: 0;
+}
+
+.ui-card {
+  display: flex;
+  align-items: stretch;
+  overflow: hidden;
+  border-radius: calc(var(--app-cards-outlined-enabled-container-outlined-card-container-shape, 12) * 1px);
+  color: var(--app-pallete-scheme-surface-on-surface, #181c1e);
+  box-sizing: border-box;
+  cursor: pointer;
+  transition: box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease;
+  position: relative;
+  isolation: isolate;
+}
+
+.ui-card:focus-visible {
+  outline: none;
+}
+
+.ui-card:focus-visible .ui-card__focus-indicator {
+  display: block;
+}
+
+.ui-card--outlined {
+  border: 0;
+  outline: calc(var(--app-cards-outlined-enabled-outline-outlined-card-outline-width, 1) * 1px) solid
+    var(--app-cards-outlined-enabled-outline-outlined-card-outline-color, #c3c7c9);
+  outline-offset: -1px;
+  background: var(--app-cards-outlined-enabled-container-outlined-card-container-color, #f7fafc);
+}
+
+.ui-card--elevated {
+  border: 0;
+  background: var(--app-cards-elevated-enabled-container-elevated-card-container-color, #f1f4f6);
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+.ui-card--filled {
+  border: 0;
+  background: var(--app-cards-filled-enabled-container-filled-card-container-color, #e0e3e5);
+}
+
+.ui-card--active {
+  outline-color: var(--app-pallete-scheme-surface-outline-variant, #d4d7db);
+  background: var(--app-pallete-scheme-surface-outline-variant, #d4d7db);
+}
+
+.ui-card--disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+.ui-card__content {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 16px;
+  position: relative;
+  z-index: 2;
+}
+
+.ui-card__avatar {
+  width: 2.5rem;
+  height: 2.5rem;
+  flex: 0 0 auto;
+  border-radius: 100px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--app-pallete-scheme-primary-primary, #e42313);
+  color: var(--app-pallete-scheme-primary-on-primary, #fff);
+  font-family: var(--app-typescale-title-medium-font, Heebo), sans-serif;
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 1.5rem;
+  letter-spacing: 0.00625rem;
+}
+
+.ui-card__leading {
+  width: 2.5rem;
+  height: 2.5rem;
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ui-card__leading--icon img,
+.ui-card__leading--icon svg {
+  width: 2.08331rem;
+  height: 2.08331rem;
+  display: block;
+}
+
+.ui-card__leading--icon svg {
+  fill: currentColor;
+}
+
+.ui-card__text {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+  color: inherit;
+}
+
+.ui-card__title,
+.ui-card__subhead {
+  margin: 0;
+}
+
+.ui-card__title {
+  font-family: var(--app-typescale-title-medium-font, Heebo), sans-serif;
+  font-size: calc(var(--app-typescale-title-medium-size, 16) * 1px);
+  font-weight: var(--app-typescale-title-medium-weight, 500);
+  line-height: calc(var(--app-typescale-title-medium-line-height, 24) * 1px);
+  letter-spacing: calc(var(--app-typescale-title-medium-tracking, 0.15) * 1px);
+}
+
+.ui-card--title-emphasized .ui-card__title {
+  font-weight: var(--app-typescale-title-medium-weight-emphasized, 700);
+}
+
+.ui-card__subhead {
+  font-family: var(--app-typescale-body-medium-font, Heebo), sans-serif;
+  font-size: calc(var(--app-typescale-body-medium-size, 14) * 1px);
+  font-weight: var(--app-typescale-body-medium-weight, 400);
+  line-height: calc(var(--app-typescale-body-medium-line-height, 20) * 1px);
+  letter-spacing: calc(var(--app-typescale-body-medium-tracking, 0.25) * 1px);
+}
+
+.ui-card__media {
+  width: 5rem;
+  flex: 0 0 5rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-left: 1px solid var(--app-pallete-scheme-surface-outline-variant, #c3c7c9);
+  background: var(--app-schemes-surface-container-high, #ebe7e7);
+  position: relative;
+  z-index: 2;
+}
+
+.ui-card__media img,
+.ui-card__media svg {
+  width: 2.08331rem;
+  height: 2.08331rem;
+  display: block;
+}
+
+.ui-card__media svg {
+  fill: var(--app-schemes-outline, #b5b5b5);
+}
+
+.ui-card__media--empty {
+  opacity: 0.45;
+}
+
+.ui-card__state-layer {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 1;
+  opacity: 0;
+  background: transparent;
+}
+
+.ui-card__focus-indicator {
+  display: none;
+  position: absolute;
+  inset: -3px;
+  border-radius: 14px;
+  border: 3px solid var(--app-cards-outlined-focused-focus-indicator-outlined-card-focus-indicator-color, #5b5f61);
+  pointer-events: none;
+  z-index: 3;
+}
+
+.ui-card--state-focused .ui-card__focus-indicator {
+  display: block;
+}
+
+.ui-card--state-hovered .ui-card__state-layer,
+.ui-card:hover .ui-card__state-layer {
+  opacity: 1;
+}
+
+.ui-card--state-focused .ui-card__state-layer,
+.ui-card--state-pressed .ui-card__state-layer,
+.ui-card--state-dragged .ui-card__state-layer {
+  opacity: 1;
+}
+
+.ui-card--outlined.ui-card--state-hovered,
+.ui-card--outlined:hover {
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
+}
+
+.ui-card--outlined.ui-card--state-dragged {
+  box-shadow: 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+.ui-card--elevated.ui-card--state-hovered,
+.ui-card--elevated:hover {
+  box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+.ui-card--elevated.ui-card--state-pressed {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+.ui-card--elevated.ui-card--state-dragged {
+  box-shadow: 0 6px 10px 4px rgba(0, 0, 0, 0.15), 0 2px 3px rgba(0, 0, 0, 0.3);
+}
+
+.ui-card--filled.ui-card--state-hovered {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+.ui-card--filled.ui-card--state-dragged {
+  box-shadow: 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+.ui-card--outlined.ui-card--state-hovered .ui-card__state-layer,
+.ui-card--outlined:hover .ui-card__state-layer {
+  background: rgba(24, 28, 30, 0.08);
+}
+
+.ui-card--outlined.ui-card--state-focused .ui-card__state-layer {
+  background: rgba(24, 28, 30, 0.1);
+}
+
+.ui-card--outlined.ui-card--state-pressed .ui-card__state-layer {
+  background: rgba(24, 28, 30, 0.1);
+}
+
+.ui-card--outlined.ui-card--state-dragged .ui-card__state-layer {
+  background: rgba(24, 28, 30, 0.16);
+}
+
+.ui-card--elevated.ui-card--state-hovered .ui-card__state-layer,
+.ui-card--elevated:hover .ui-card__state-layer {
+  background: rgba(24, 28, 30, 0.08);
+}
+
+.ui-card--elevated.ui-card--state-focused .ui-card__state-layer {
+  background: rgba(24, 28, 30, 0.1);
+}
+
+.ui-card--elevated.ui-card--state-pressed .ui-card__state-layer {
+  background: rgba(24, 28, 30, 0.1);
+}
+
+.ui-card--elevated.ui-card--state-dragged .ui-card__state-layer {
+  background: rgba(24, 28, 30, 0.16);
+}
+
+.ui-card--filled.ui-card--state-hovered .ui-card__state-layer,
+.ui-card--filled:hover .ui-card__state-layer {
+  background: rgba(24, 28, 30, 0.08);
+}
+
+.ui-card--filled.ui-card--state-focused .ui-card__state-layer {
+  background: rgba(24, 28, 30, 0.1);
+}
+
+.ui-card--filled.ui-card--state-pressed .ui-card__state-layer {
+  background: rgba(24, 28, 30, 0.1);
+}
+
+.ui-card--filled.ui-card--state-dragged .ui-card__state-layer {
+  background: rgba(24, 28, 30, 0.16);
+}
+
+.ui-card--disabled .ui-card__state-layer {
+  display: none;
+}

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

@@ -0,0 +1,69 @@
+<div
+  [ngClass]="classes()"
+  [style.width]="fullWidth() ? '100%' : width()"
+  [style.min-width]="fullWidth() ? '0rem' : width()"
+  [style.height]="height()"
+  [style.min-height]="height()"
+  [attr.aria-disabled]="disabled()"
+  role="button"
+  tabindex="0"
+  (click)="onCardClick()"
+  (keydown)="onCardKeydown($event)"
+>
+  <div class="ui-card__content">
+    @if (leadingKind() === 'icon') {
+      <div
+        class="ui-card__leading ui-card__leading--icon"
+        aria-hidden="true"
+        [style.width]="leadingContainerSize()"
+        [style.height]="leadingContainerSize()"
+      >
+        @if (hasLeadingIcon()) {
+          @if (isLeadingImage()) {
+            <img [src]="leadingIcon()" alt="" [style.width]="leadingIconSize()" [style.height]="leadingIconSize()" />
+          } @else {
+            <svg
+              viewBox="0 0 24 24"
+              [style.width]="leadingIconSize()"
+              [style.height]="leadingIconSize()"
+            >
+              <g [innerHTML]="leadingIcon()"></g>
+            </svg>
+          }
+        } @else {
+          <span>{{ initial() }}</span>
+        }
+      </div>
+    } @else {
+      <div class="ui-card__avatar" aria-hidden="true">
+        {{ initial() }}
+      </div>
+    }
+
+    <div class="ui-card__text">
+      <p class="ui-card__title">{{ title() }}</p>
+      @if (subhead()) {
+        <p class="ui-card__subhead">{{ subhead() }}</p>
+      }
+    </div>
+  </div>
+
+  @if (showMedia()) {
+    <div class="ui-card__media" [class.ui-card__media--empty]="!hasMedia()">
+      @if (hasMedia()) {
+        @if (isMediaImage()) {
+          <img [src]="mediaIcon()" [alt]="mediaAlt()" />
+        } @else {
+          <svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
+            <g [innerHTML]="mediaIcon()"></g>
+          </svg>
+        }
+      }
+    </div>
+  }
+
+  <span class="ui-card__state-layer" aria-hidden="true"></span>
+  @if (state() === 'focused') {
+    <span class="ui-card__focus-indicator" aria-hidden="true"></span>
+  }
+</div>

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

@@ -0,0 +1,93 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  output,
+} from '@angular/core';
+import { NgClass } from '@angular/common';
+
+export type LibCardVariant = 'outlined' | 'elevated' | 'filled';
+export type LibCardState = 'enabled' | 'hovered' | 'focused' | 'pressed' | 'dragged';
+export type LibCardLeadingKind = 'avatar' | 'icon';
+
+@Component({
+  selector: 'lib-card',
+  standalone: true,
+  imports: [NgClass],
+  templateUrl: './card.html',
+  styleUrl: './card.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    '[class.lib-card-host--full-width]': 'fullWidth()',
+  },
+})
+export class LibCardComponent {
+  title = input('Header');
+  subhead = input('');
+  variant = input<LibCardVariant>('outlined');
+  state = input<LibCardState>('enabled');
+  leadingKind = input<LibCardLeadingKind>('avatar');
+  leadingIcon = input<string>('');
+  /** Tamaño del contenedor leading (Figma suele usar 2.5rem). */
+  leadingContainerSize = input('2.5rem');
+  /** Tamaño del icono leading. */
+  leadingIconSize = input('2.08331rem');
+  mediaIcon = input<string>('');
+  mediaAlt = input('Card media');
+  showMedia = input(false);
+  avatarText = input('');
+  width = input('20.5rem');
+  /** Alto del card. */
+  height = input('4.5rem');
+  /** Si es true, el card toma el 100% del ancho del contenedor padre. */
+  fullWidth = input(false);
+  active = input(false);
+  disabled = input(false);
+
+  readonly cardClick = output<void>();
+
+  readonly initial = computed(() => {
+    const text = this.avatarText().trim();
+    if (text.length) return text.slice(0, 1).toUpperCase();
+    const title = this.title().trim();
+    return title.length ? title.slice(0, 1).toUpperCase() : 'A';
+  });
+
+  readonly hasMedia = computed(() => this.mediaIcon().trim().length > 0);
+  readonly isMediaImage = computed(() => this.mediaIcon().trim().endsWith('.svg'));
+  readonly hasLeadingIcon = computed(() => this.leadingIcon().trim().length > 0);
+  readonly isLeadingImage = computed(() => this.leadingIcon().trim().endsWith('.svg'));
+  readonly hasSubhead = computed(() => this.subhead().trim().length > 0);
+
+  readonly classes = computed(() => ({
+    'ui-card': true,
+    'ui-card--outlined': this.variant() === 'outlined',
+    'ui-card--elevated': this.variant() === 'elevated',
+    'ui-card--filled': this.variant() === 'filled',
+    'ui-card--state-enabled': this.state() === 'enabled',
+    'ui-card--state-hovered': this.state() === 'hovered',
+    'ui-card--state-focused': this.state() === 'focused',
+    'ui-card--state-pressed': this.state() === 'pressed',
+    'ui-card--state-dragged': this.state() === 'dragged',
+    'ui-card--leading-avatar': this.leadingKind() === 'avatar',
+    'ui-card--leading-icon': this.leadingKind() === 'icon',
+    'ui-card--with-media': this.showMedia() && this.hasMedia(),
+    'ui-card--title-emphasized': !this.hasSubhead(),
+    'ui-card--active': this.active(),
+    'ui-card--disabled': this.disabled(),
+  }));
+
+  onCardClick(): void {
+    if (this.disabled()) return;
+    this.cardClick.emit();
+  }
+
+  onCardKeydown(event: KeyboardEvent): void {
+    if (this.disabled()) return;
+    if (event.code === 'Enter' || event.code === 'Space') {
+      event.preventDefault();
+      this.cardClick.emit();
+    }
+  }
+}

package/src/lib/components/checkbox/checkbox-showcase.component.css

@@ -0,0 +1,42 @@
+.lib-checkbox-showcase {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.lib-checkbox-showcase__title {
+  margin: 0 0 0.5rem;
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
+.lib-checkbox-showcase__group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.lib-checkbox-showcase__group > h3 {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 500;
+}
+
+.lib-checkbox-showcase__hint {
+  margin: 0;
+  font-size: 0.875rem;
+  color: #696d6f;
+}
+
+.lib-checkbox-showcase__row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 1rem 2.5rem;
+}
+
+.lib-checkbox-showcase__row lib-checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}

package/src/lib/components/checkbox/checkbox-showcase.component.html

@@ -0,0 +1,36 @@
+<section class="lib-checkbox-showcase">
+  <h2 class="lib-checkbox-showcase__title">Checkbox – estados (tokens Figma)</h2>
+
+  <div class="lib-checkbox-showcase__group">
+    <h3>Enabled</h3>
+    <div class="lib-checkbox-showcase__row">
+      <lib-checkbox>Unselected</lib-checkbox>
+      <lib-checkbox [checked]="true">Selected</lib-checkbox>
+      <lib-checkbox [indeterminate]="true">Indeterminate</lib-checkbox>
+      <lib-checkbox [error]="true">Error (unselected)</lib-checkbox>
+      <lib-checkbox [checked]="true" [error]="true">Error (selected)</lib-checkbox>
+    </div>
+  </div>
+
+  <div class="lib-checkbox-showcase__group">
+    <h3>Disabled</h3>
+    <div class="lib-checkbox-showcase__row">
+      <lib-checkbox [disabled]="true">Unselected</lib-checkbox>
+      <lib-checkbox [disabled]="true" [checked]="true">Selected</lib-checkbox>
+      <lib-checkbox [disabled]="true" [indeterminate]="true">Indeterminate</lib-checkbox>
+    </div>
+  </div>
+
+  <div class="lib-checkbox-showcase__group">
+    <h3>Interactive (hover / pressed)</h3>
+    <p class="lib-checkbox-showcase__hint">
+      Pasa el mouse y haz click para ver hover / pressed según tokens de Figma.
+    </p>
+    <div class="lib-checkbox-showcase__row">
+      <lib-checkbox>Unselected (hover / pressed)</lib-checkbox>
+      <lib-checkbox [checked]="true">Selected (hover / pressed)</lib-checkbox>
+      <lib-checkbox [indeterminate]="true">Indeterminate (hover / pressed)</lib-checkbox>
+    </div>
+  </div>
+</section>
+

package/src/lib/components/checkbox/checkbox-showcase.component.ts

@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { LibCheckboxComponent } from './checkbox';
+
+@Component({
+  selector: 'lib-checkbox-showcase',
+  standalone: true,
+  imports: [LibCheckboxComponent],
+  templateUrl: './checkbox-showcase.component.html',
+  styleUrls: ['./checkbox-showcase.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class LibCheckboxShowcaseComponent {}
+

package/src/lib/components/checkbox/checkbox.css

@@ -0,0 +1,10 @@
+/* Wrapper del mat-checkbox; solo ripple nativo de Material */
+.lib-checkbox__wrapper {
+  position: relative;
+  display: inline-flex;
+}
+
+.lib-checkbox__wrapper .mat-mdc-checkbox {
+  position: relative;
+  z-index: 1;
+}

package/src/lib/components/checkbox/checkbox.html

@@ -0,0 +1,13 @@
+<div
+  class="lib-checkbox__wrapper"
+  [class.lib-checkbox--disabled]="disabled()"
+>
+  <mat-checkbox
+    [checked]="checked()"
+    [indeterminate]="indeterminate()"
+    [disabled]="disabled()"
+    (change)="onMatCheckboxChange($event)"
+  >
+    <ng-content />
+  </mat-checkbox>
+</div>

package/src/lib/components/checkbox/checkbox.ts

@@ -0,0 +1,64 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  output,
+  computed,
+  HostBinding,
+} from '@angular/core';
+import { MatCheckboxChange } from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+
+@Component({
+  selector: 'lib-checkbox',
+  standalone: true,
+  imports: [MatCheckboxModule],
+  templateUrl: './checkbox.html',
+  styleUrl: './checkbox.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class LibCheckboxComponent {
+  checked = input(false);
+  indeterminate = input(false);
+  disabled = input(false);
+  error = input(false);
+  /** Id para asociar label (accesibilidad). Si no se pasa, se genera uno interno. */
+  labelId = input<string | null>(null);
+
+  readonly checkedChange = output<boolean>();
+  readonly indeterminateChange = output<boolean>();
+
+  @HostBinding('attr.aria-disabled') get ariaDisabled(): boolean | null {
+    return this.disabled() ? true : null;
+  }
+
+  protected readonly ariaChecked = computed(() => {
+    if (this.indeterminate()) return 'mixed';
+    return this.checked() ? 'true' : 'false';
+  });
+
+  protected onAction(event: Event): void {
+    event.preventDefault();
+    if (this.disabled()) return;
+    if (this.indeterminate()) {
+      this.indeterminateChange.emit(false);
+      this.checkedChange.emit(true);
+    } else {
+      this.checkedChange.emit(!this.checked());
+    }
+  }
+
+  protected onKeydown(event: KeyboardEvent): void {
+    if (event.key === ' ' || event.key === 'Enter') {
+      event.preventDefault();
+      this.onAction(event);
+    }
+  }
+
+  protected onMatCheckboxChange(event: MatCheckboxChange): void {
+    this.checkedChange.emit(event.checked);
+    if (event.checked && this.indeterminate()) {
+      this.indeterminateChange.emit(false);
+    }
+  }
+}