crdx-components 1.0.0 → 2.0.0

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);
-    }
-  }
-}

package/src/lib/components/circular-progress-stepper/circular-progress-stepper.css

@@ -1,89 +0,0 @@
-@property --progress {
-  syntax: "<length-percentage>";
-  inherits: false;
-  initial-value: 0%;
-}
-
-.progressbar[role="progressbar"] {
-  --size: 64px;
-  --bar-width: 10px;
-  --color-bar-progress: #0BC626;
-  --shadow-color-bar-progress: #F0F0F0;
-
-  width: var(--size);
-  aspect-ratio: 1 / 1;
-  position: relative;
-  background: conic-gradient(
-    var(--color-bar-progress),
-    var(--color-bar-progress) var(--progress),
-    var(--shadow-color-bar-progress) 0%
-  );
-  border-radius: 50vmax;
-  display: grid;
-  place-items: center;
-  transition: --progress 500ms linear;
-}
-
-.progressbar[role="progressbar"] > span {
-  display: none;
-}
-
-.progressbar[role="progressbar"]::after {
-  content: '';
-  background: white;
-  position: absolute;
-  inset: calc(var(--bar-width) / 2);
-  aspect-ratio: 1;
-  border-radius: inherit;
-  display: grid;
-  place-items: center;
-  z-index: 0;
-}
-
-.progressbar:not([role="progressbar"]) {
-  position: relative;
-  width: var(--size, 132px);
-  aspect-ratio: 1 / 1;
-  margin: 2rem auto;
-  display: grid;
-  place-items: center;
-  background:
-#f3f4f6;
-  border-radius: 50%;
-}
-
-.progressbar:not([role="progressbar"])::after {
-  display: none;
-}
-
-.progressbar:not([role="progressbar"]) span {
-  font-size: 1rem;
-  text-align: center;
-  color: #059669;
-  padding: 1rem;
-}
-
-
-.progress-content {
-  position: absolute;
-  inset: 0;
-  z-index: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-}
-
-.progress-content .step-text {
-  font-size: 10px;
-  font-weight: 400;
-  color: #3E3E3E;
-}
-
-.progress-content .step-number {
-  font-size: 12px;
-  font-weight: 400;
-  color: #3E3E3E;
-}
-

package/src/lib/components/circular-progress-stepper/circular-progress-stepper.html

@@ -1,23 +0,0 @@
-<div
-  class="progressbar"
-  [class.no-js]="!jsEnabled()"
-  [attr.role]="jsEnabled() ? 'progressbar' : null"
-  [attr.aria-valuemin]="0"
-  [attr.aria-valuemax]="100"
-  [attr.aria-busy]="isAnimating()"
-  [attr.aria-live]="jsEnabled() ? 'polite' : null"
-  [style.--progress]="progressPercentage()"
-  [style.--size]="size()"
-  [style.--bar-width]="barWidth()"
-  [style.--color-bar-progress]="colorBarProgress()"
-  [style.--shadow-shadow-bar-progress]="shadowColorBarProgress()">
-
-  <div class="progress-content">
-    <span class="step-text">Paso</span>
-    <span class="step-number">{{ `${currentStep()} de ${totalsStep()}` }}</span>
-  </div>
-  @if (!jsEnabled()) {
-    <span>{{ noJsMessage() }}</span>
-  }
-
-</div>

package/src/lib/components/circular-progress-stepper/circular-progress-stepper.ts

@@ -1,40 +0,0 @@
-import { Component, computed, effect, input, signal } from '@angular/core';
-
-@Component({
-  selector: 'lib-circular-progress-stepper, circular-progress-stepper',
-  imports: [],
-  templateUrl: './circular-progress-stepper.html',
-  styleUrl: './circular-progress-stepper.css',
-})
-export class CircularProgressStepper {
-  currentStep = input<number>(0);
-  totalsStep = input<number>(0);
-  size = input<string>('64px');
-  barWidth = input<string>('10px');
-  colorBarProgress = input<string>('#0BC626');
-  shadowColorBarProgress = input<string>('#F0F0F0');
-  noJsMessage = input<string>('Esta función requiere JavaScript 😢');
-  animationDuration = input<number>(500);
-
-  progress = signal<number>(0);
-  isAnimating = signal<boolean>(false);
-  jsEnabled = signal<boolean>(true);
-  progressPercentage = computed(() => `${this.progress()}%`);
-
-
-  constructor() {
-    effect(() => {
-      this.updateProgress();
-    });
-  }
-
-  updateProgress(): void {
-    const previousStep = (this.currentStep() > 0) ? this.currentStep() - 1 : 0;
-    const previousProgress = (Math.round(previousStep) / Math.round(this.totalsStep())) * 100;
-    this.progress.set(Math.round(previousProgress));
-    const progress = (Math.round(this.currentStep()) / Math.round(this.totalsStep())) * 100;
-    setTimeout(() => {
-      this.progress.set(Math.round(progress));
-    }, 100);
-  }
-}

package/src/lib/components/dialogs/alert-modal/alert-modal.css

@@ -1,118 +0,0 @@
-.container {
-    --color: #FFFFFF;
-    --message-color: #3E3E3E;
-    --message-font-size: 32px;
-    --message-font-weight: 700;
-
-    background-color: var(--color);
-    padding: 40px 48px;
-    border-radius: 8px;
-    display: flex;
-    flex-direction: column;
-    gap: 40px;
-    text-align: center;
-}
-
-.container .message {
-    display: flex;
-    flex-direction: column;
-    gap: 24px;
-    align-items: center;
-    justify-content: center;
-    white-space: pre-line;
-}
-
-.container .message mat-icon {
-    display: flex;
-    font-size: 90px;
-    width: 90px;
-    height: 90px;
-    color: red;
-    justify-content: center;
-    align-items: center;
-}
-
-.container .extraBlock {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    gap: 8px;
-}
-
-.container .extraBlock.left {
-    align-items: flex-start;
-}
-
-.container .extraBlock.center {
-    align-items: center;
-}
-
-.container .extraBlock-content {
-    display: flex;
-    flex-wrap: wrap;
-    max-width: 100%;
-    color: var(--message-color);
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: normal;
-    gap: 8px;
-}
-
-.container .extraBlock-content.left {
-    justify-content: start;
-    padding-left: 16px;
-}
-
-.container .extraBlock-content.center {
-    justify-content: center;
-}
-
-.container .extra-block .word {
-    white-space: nowrap;
-}
-
-.container .extraBlock-content .separator {
-    color: #D2D2D2;
-}
-
-.container .title {
-    color: var(--message-color);
-    text-align: center;
-    font-size: var(--message-font-size);
-    font-style: normal;
-    font-weight: var(--message-font-weight);
-    line-height: normal;
-}
-
-.container .subtitle {
-    color: var(--message-color);
-    font-style: normal;
-    font-weight: var(--message-font-weight);
-    line-height: normal;
-}
-
-.container .content {
-    width: 712px;
-    color: var(--message-color);
-    text-align: center;
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: normal;
-}
-
-.container .actions {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    gap: 32px;
-}
-
-.container .actions button {
-    width: 120px;
-    height: 56px;
-    font-size: 16px;
-    font-weight: 500;
-    border-radius: 16px;
-}

package/src/lib/components/dialogs/alert-modal/alert-modal.html

@@ -1,29 +0,0 @@
-<div class="container">
-    <div class="message">
-        <mat-icon class="tab-icon" fontSet="material-icons-outlined" [ngStyle]="{'color': data.color}">info</mat-icon>
-        <p class="title">{{data.title}}</p>
-        @if(data.content){
-        <p class="content">{{data.content}}</p>
-        }
-    </div>
-    @if(data.extraBlock){
-    <div class="extraBlock" [ngClass]="data.subtitleAlign">
-        <p class="subtitle">{{data.subtitle}}</p>
-        <div class="extraBlock-content" [ngClass]="data.subtitleAlign">
-            <ng-container *ngFor="let word of data.extraBlock; let last = last">
-                <span class="word">{{ word }}</span>
-                <span *ngIf="!last" class="separator">|</span>
-            </ng-container>
-        </div>
-    </div>
-    }
-
-    <div class="actions">
-        @if(data.labelButtonCancel){
-        <button matButton="outlined" (click)="onCancel()">{{data.labelButtonCancel}}</button>
-        }
-        <button matButton="filled" fontSet="material-icons-outlined"
-            (click)="onConfirm()">{{data.labelButtonConfirm}}</button>
-
-    </div>
-</div>

package/src/lib/components/dialogs/alert-modal/alert-modal.ts

@@ -1,28 +0,0 @@
-import { DIALOG_DATA, DialogRef } from '@angular/cdk/dialog';
-import { CommonModule } from '@angular/common';
-import { Component, inject } from '@angular/core';
-import { MatButton } from '@angular/material/button';
-import { MatIcon } from '@angular/material/icon';
-
-@Component({
-  selector: 'lib-alert-modal, app-alert',
-  templateUrl: './alert-modal.html',
-  imports: [MatButton, MatIcon, CommonModule],
-  styleUrl: './alert-modal.css'
-})
-export class AlertModal {
-  readonly dialogRef = inject(DialogRef);
-  readonly data = inject(DIALOG_DATA);
-  readonly labelButtonCancel = 'Entendido';
-
-  onConfirm(): void {
-    this.dialogRef.close(true);
-
-  }
-   onCancel(): void {
-    this.dialogRef.close(false);
-
-  }
-
-
-}