crdx-components 1.0.0 → 1.0.1

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

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

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

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

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

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

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

@@ -1,10 +0,0 @@
-/* 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

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

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