crdx-components 1.0.0

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

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

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

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

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

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

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

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

@@ -0,0 +1,219 @@
+/*
+ * Confirm modal — Diseño desde Figma Tokens (node 323-2101).
+ * Tokens: --app-dialogs-basic-*, --app-colors-*, --app-font-*, --app-shape-*.
+ */
+.confirm-modal {
+  --confirm-container-color: var(--app-dialogs-basic-enabled-container-dialog-container-color, #f7fafc);
+  --confirm-container-elevation: var(--app-dialogs-basic-enabled-container-dialog-container-elevation, 6);
+  --confirm-container-shape: var(--app-dialogs-basic-enabled-container-dialog-container-shape, 28);
+  --confirm-headline-color: var(--app-dialogs-basic-enabled-headline-dialog-headline-color, #181c1e);
+  --confirm-headline-font: var(--app-dialogs-basic-enabled-headline-dialog-headline-font, Heebo);
+  --confirm-headline-size: var(--app-dialogs-basic-enabled-headline-dialog-headline-size, 24);
+  --confirm-headline-weight: var(--app-dialogs-basic-enabled-headline-dialog-headline-weight, 400);
+  --confirm-headline-line-height: var(--app-dialogs-basic-enabled-headline-dialog-headline-line-height, 32);
+  --confirm-supporting-color: var(--app-dialogs-basic-enabled-supporting-text-dialog-supporting-text-color, #434749);
+  --confirm-supporting-font: var(--app-dialogs-basic-enabled-supporting-text-dialog-supporting-text-font, Heebo);
+  --confirm-supporting-size: var(--app-dialogs-basic-enabled-supporting-text-dialog-supporting-text-size, 14);
+  --confirm-supporting-weight: var(--app-dialogs-basic-enabled-supporting-text-dialog-supporting-text-weight, 400);
+  --confirm-supporting-line-height: var(--app-dialogs-basic-enabled-supporting-text-dialog-supporting-text-line-height, 20);
+  --confirm-action-color: var(--app-dialogs-basic-enabled-label-text-dialog-action-label-text-color, #e42313);
+  --confirm-action-font: var(--app-dialogs-basic-enabled-label-text-dialog-action-label-text-font, Heebo);
+  --confirm-action-size: var(--app-dialogs-basic-enabled-label-text-dialog-action-label-text-size, 14);
+  --confirm-action-weight: var(--app-dialogs-basic-enabled-label-text-dialog-action-label-text-weight, 500);
+  --confirm-primary: var(--app-colors-rojo-primary-rojo-50, #e42313);
+  --confirm-primary-hover: var(--app-colors-rojo-primary-rojo-40, #bf0600);
+  --confirm-primary-on: var(--app-colors-rojo-primary-rojo-100, #ffffff);
+  --confirm-btn-shape: var(--app-shape-large, 16);
+
+  display: flex;
+  width: 100%;
+  background: var(--confirm-container-color);
+  border-radius: calc(var(--confirm-container-shape) * 1px);
+  box-shadow:
+    0 1px 3px 0 rgba(0, 0, 0, 0.3),
+    0 4px 8px 3px rgba(0, 0, 0, 0.15);
+  min-width: 280px;
+  max-width: 560px;
+}
+
+.confirm-modal__container {
+  display: flex;
+  padding: 1.5rem 1.5rem 1.25rem 1.5rem;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1.25rem;
+  align-self: stretch;
+  width: 100%;
+}
+
+.confirm-modal__top-icon {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  color: #5f6368;
+}
+
+.confirm-modal__top-icon .mat-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  font-size: 1.5rem;
+}
+
+.confirm-modal__header {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  align-items: flex-start;
+  align-self: stretch;
+  width: 100%;
+}
+
+.confirm-modal__title {
+  align-self: stretch;
+  color: var(--confirm-headline-color);
+  font-family: var(--confirm-headline-font), var(--app-font-type-brand, Heebo), sans-serif;
+  font-size: calc(var(--confirm-headline-size) * 1px);
+  font-weight: var(--confirm-headline-weight);
+  line-height: calc(var(--confirm-headline-line-height) * 1px);
+  text-align: start;
+  margin: 0;
+}
+
+.confirm-modal__reference,
+.confirm-modal__content {
+  align-self: stretch;
+  width: 100%;
+  color: var(--confirm-supporting-color);
+  font-family: var(--confirm-supporting-font), var(--app-font-type-plain, Heebo), sans-serif;
+  font-size: calc(var(--confirm-supporting-size) * 1px);
+  font-weight: var(--confirm-supporting-weight);
+  line-height: calc(var(--confirm-supporting-line-height) * 1px);
+  text-align: start;
+  margin: 0;
+}
+
+.confirm-modal__list {
+  width: 100%;
+  border-top: 1px solid #c4c7c5;
+  border-bottom: 1px solid #c4c7c5;
+}
+
+.confirm-modal__list--scrollable {
+  max-height: 14rem;
+  overflow-y: auto;
+}
+
+.confirm-modal__list-item {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 2.5rem 1fr auto auto;
+  align-items: center;
+  gap: 0.75rem;
+  border: 0;
+  border-bottom: 1px solid #c4c7c5;
+  background: transparent;
+  padding: 0.75rem 0;
+  text-align: left;
+  cursor: pointer;
+}
+
+.confirm-modal__list-item:last-child {
+  border-bottom: 0;
+}
+
+.confirm-modal__list-item-leading-icon {
+  color: #1f2328;
+  width: 1.25rem;
+  height: 1.25rem;
+  font-size: 1.25rem;
+}
+
+.confirm-modal__list-item-label {
+  color: #1d1b20;
+  font-size: 1.125rem;
+  line-height: 1.5rem;
+  font-weight: 400;
+}
+
+.confirm-modal__list-item-amount {
+  color: #5f6368;
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.confirm-modal__list-item-check {
+  color: #1f2328;
+  width: 1.25rem;
+  height: 1.25rem;
+  font-size: 1.25rem;
+}
+
+.confirm-modal__actions {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  align-self: stretch;
+  width: 100%;
+  min-width: 0;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}
+
+.confirm-modal__actions > * {
+  display: flex;
+  width: auto;
+  align-self: flex-end;
+}
+
+.confirm-modal__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem 1.5rem;
+  min-width: 120px;
+  font-family: var(--confirm-action-font), var(--app-font-type-brand, Heebo), sans-serif;
+  font-size: calc(var(--confirm-action-size) * 1px);
+  font-weight: var(--confirm-action-weight);
+  line-height: 1.25;
+  border-radius: calc(var(--confirm-btn-shape) * 1px);
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
+  box-shadow: none;
+  outline: none;
+}
+
+.confirm-modal__btn:focus-visible {
+  outline: 2px solid var(--confirm-primary);
+  outline-offset: 2px;
+}
+
+.confirm-modal__btn--cancel {
+  flex: 1;
+  max-width: 180px;
+  background: var(--confirm-container-color);
+  color: var(--confirm-action-color);
+  border: 1px solid var(--confirm-action-color);
+}
+
+.confirm-modal__btn--cancel:hover,
+.confirm-modal__btn--cancel:focus,
+.confirm-modal__btn--cancel:active {
+  background: var(--confirm-container-color);
+  color: var(--confirm-primary-hover);
+  border-color: var(--confirm-primary-hover);
+}
+
+.confirm-modal__btn--confirm {
+  flex: 1;
+  max-width: 180px;
+  background: var(--confirm-primary);
+  color: var(--confirm-primary-on);
+}
+
+.confirm-modal__btn--confirm:hover,
+.confirm-modal__btn--confirm:focus,
+.confirm-modal__btn--confirm:active {
+  background: var(--confirm-primary-hover);
+  color: var(--confirm-primary-on);
+}

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

@@ -0,0 +1,60 @@
+<div
+  class="confirm-modal"
+  role="dialog"
+  aria-modal="true"
+  aria-labelledby="confirm-modal-title"
+  [attr.aria-describedby]="supportingText || isListVariant ? 'confirm-modal-desc' : null"
+>
+  <div class="confirm-modal__container">
+    @if (data.showTopIcon) {
+      <div class="confirm-modal__top-icon" aria-hidden="true">
+        <mat-icon>{{ topIconName }}</mat-icon>
+      </div>
+    }
+
+    <header class="confirm-modal__header">
+      <h2 id="confirm-modal-title" class="confirm-modal__title">{{ data.title }}</h2>
+      @if (supportingText) {
+        <p id="confirm-modal-desc" class="confirm-modal__reference">{{ supportingText }}</p>
+      }
+    </header>
+
+    @if (isListVariant) {
+      <div
+        class="confirm-modal__list"
+        [class.confirm-modal__list--scrollable]="isScrollableList"
+        [attr.id]="!supportingText ? 'confirm-modal-desc' : null"
+      >
+        @for (item of listItems(); track item.id) {
+          <button type="button" class="confirm-modal__list-item" (click)="toggleListItem(item.id)">
+            <mat-icon class="confirm-modal__list-item-leading-icon" aria-hidden="true">error_outline</mat-icon>
+            <span class="confirm-modal__list-item-label">{{ item.label }}</span>
+            @if (item.amount) {
+              <span class="confirm-modal__list-item-amount">{{ item.amount }}</span>
+            }
+            <mat-icon class="confirm-modal__list-item-check" aria-hidden="true">
+              {{ item.selected ? 'check_box' : 'check_box_outline_blank' }}
+            </mat-icon>
+          </button>
+        }
+      </div>
+    }
+
+    <div class="confirm-modal__actions">
+      <lib-button
+        type="button"
+        variant="text"
+        (click)="onCancel()"
+        [label]="labelButtonCancel"
+        contentAlign="center"
+      ></lib-button>
+      <lib-button
+        type="button"
+        variant="text"
+        (click)="onConfirm()"
+        [label]="data.labelButtonConfirm"
+        contentAlign="center"
+      ></lib-button>
+    </div>
+  </div>
+</div>