crdx-components 1.0.0 → 1.0.1

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

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

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

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