crdx-components 1.0.0 → 2.0.0

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

@@ -1,80 +0,0 @@
-.container {
-  height: 100dvh;
-  width: 100%;
-  max-height: 100dvh;
-  box-sizing: border-box;
-  background-color: var(--side-sheets-enabled-container-sheet-side-docked-standard-container-color, #f8f9fa);
-  border-radius: 8px 0px 0px 8px;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  animation: animationDialog 0.5s ease;
-}
-
-.side-modal__header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 1.5rem;
-  padding: 1rem 1rem 0;
-}
-
-.title {
-  color: var(--side-sheets-enabled-headline-sheet-side-docked-headline-color, #434749);
-  font-family: var(--side-sheets-enabled-headline-sheet-side-docked-headline-font, 'Heebo'), sans-serif;
-  font-size: var(--side-sheets-enabled-headline-sheet-side-docked-headline-size, 22px);
-  font-style: normal;
-  font-weight: var(--side-sheets-enabled-headline-sheet-side-docked-headline-weight, 400);
-  line-height: calc(var(--side-sheets-enabled-headline-sheet-side-docked-headline-line-height, 28) * 1px);
-  letter-spacing: var(--side-sheets-enabled-headline-sheet-side-docked-headline-tracking, 0px);
-  margin: 0;
-}
-
-.side-modal__header button {
-  background-color: transparent;
-  border: none;
-  height: 40px;
-  width: 40px;
-  min-width: 40px;
-  border-radius: 999px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  color: #696D6F;
-}
-
-.side-modal__header button mat-icon {
-  font-size: 24px;
-}
-
-.side-modal__icon-btn svg {
-  display: block;
-}
-
-.side-modal__content {
-  width: 100%;
-  box-sizing: border-box;
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
-.side-modal__footer {
-  width: 100%;
-  flex: 0 0 auto;
-}
-
-@keyframes animationDialog {
-  from {
-    transform: translateX(100%);
-  }
-
-  to {
-    transform: translateX(0);
-  }
-}

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

@@ -1,30 +0,0 @@
-<div class="container" [@dialogAnimation]="dialogState()" (@dialogAnimation.done)="onAnimationDone($event)">
-  <header class="side-modal__header">
-    <div style="display: flex; align-items: center;">
-      @if (shouldShowBack()) {
-        <button type="button" class="side-modal__icon-btn" (click)="onBackClick()" aria-label="Volver">
-          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
-            <path d="M14 6H3.83L8.41 1.41L7 0L0 7L7 14L8.41 12.59L3.83 8H14V6Z" fill="#434749" />
-          </svg>
-        </button>
-      }
-      <h4 class="title">{{title}}</h4>
-    </div>
-
-    <button type="button" class="side-modal__icon-btn" (click)="closeDialog()" aria-label="Cerrar">
-      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
-        <path d="M1.4 14L0 12.6L5.6 7L0 1.4L1.4 0L7 5.6L12.6 0L14 1.4L8.4 7L14 12.6L12.6 14L7 8.4L1.4 14Z"
-          fill="#434749" />
-      </svg>
-    </button>
-  </header>
-
-  <main class="side-modal__content container-content app-scrollbar-figma">
-    <ng-container *ngComponentOutlet="content"></ng-container>
-  </main>
-  @if (footer) {
-    <footer class="side-modal__footer">
-      <ng-container *ngComponentOutlet="footer"></ng-container>
-    </footer>
-  }
-</div>

package/src/lib/components/dialogs/side-modal/side-modal.state.ts

@@ -1,78 +0,0 @@
-import { Dialog, DialogRef } from '@angular/cdk/dialog';
-import { Overlay } from '@angular/cdk/overlay';
-import { inject, Injectable, signal, Type, WritableSignal } from '@angular/core';
-import { NavigationStart, Router } from '@angular/router';
-import { SideModal } from './side-modal';
-
-export interface SideModalHeaderConfig {
-  showBackButton?: () => boolean;
-  onBack?: () => void;
-}
-
-@Injectable({
-  providedIn: 'root'
-})
-export class SideModalStore {
-  private readonly dialog = inject(Dialog);
-  private readonly overlay = inject(Overlay);
-  private readonly dialogState: WritableSignal<'open' | 'closed' | 'action'> = signal('open');
-  private currentDialogRef?: DialogRef<unknown, unknown>;
-  private readonly router = inject(Router);
-
-  openSideModal(
-    content: Type<unknown>,
-    title: string,
-    width: string,
-    footer?: Type<unknown>,
-    headerConfig?: SideModalHeaderConfig
-  ): DialogRef<unknown, unknown> {
-    this.dialogState.set('open');
-    const positionBuilder = this.overlay.position();
-    const strategy = positionBuilder.global().end();
-
-    this.currentDialogRef = this.dialog.open<unknown>(SideModal, {
-      width: width,
-      height: '100%',
-      disableClose: true,
-      hasBackdrop: true,
-      backdropClass: 'lib-side-modal-backdrop',
-      positionStrategy: strategy,
-      data: {
-        title: title,
-        content,
-        dialogState: this.dialogState,
-        footer,
-        headerConfig,
-      },
-      closeOnNavigation: true
-    });
-
-    const sub = this.router.events.subscribe(event => {
-      if (event instanceof NavigationStart) {
-        this.closeSideModal();
-        sub.unsubscribe();
-      }
-    });
-
-    return this.currentDialogRef;
-  }
-
-  isOnAction(): boolean {
-    return this.dialogState() === 'action';
-  }
-
-  closeSideModal(_data?: unknown): void {
-    void _data;
-    if (this.currentDialogRef) {
-      this.currentDialogRef.close();
-      this.currentDialogRef = undefined;
-    }
-    this.dialogState.set('closed');
-  }
-
-  actionSideModal(): void {
-    this.dialogState.set('action');
-  }
-
-
-}

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

@@ -1,50 +0,0 @@
-import { animate, state, style, transition, trigger,AnimationEvent } from '@angular/animations';
-import { DialogRef,DIALOG_DATA } from '@angular/cdk/dialog';
-import { CommonModule, NgComponentOutlet } from '@angular/common';
-import { Component, inject, Type, WritableSignal } from '@angular/core';
-import { SideModalHeaderConfig } from './side-modal.state';
-
-
-@Component({
-  selector: 'lib-side-modal, app-side-modal',
-  imports: [CommonModule, NgComponentOutlet],
-  templateUrl: './side-modal.html',
-  styleUrl: './side-modal.css',
-  animations: [
-    trigger('dialogAnimation',[
-      state('closed', style({ transform: 'translateX(100%)' })),
-      state('open', style({ transform: 'translateX(0)'})),
-      transition('open => closed', [animate('0.5s ease')]),
-    ])
-  ]
-})
-export class SideModal {
-  readonly dialogData = inject(DIALOG_DATA);
-  readonly dialogRef = inject(DialogRef);
-
-  readonly content: Type<any> = this.dialogData.content;
-  readonly title:string = this.dialogData.title;
-  readonly footer: Type<any> | undefined = this.dialogData.footer;
-  readonly headerConfig: SideModalHeaderConfig | undefined = this.dialogData.headerConfig;
-  readonly dialogState:WritableSignal<'open' | 'closed'> = this.dialogData.dialogState;
-
-  closeDialog(): void {
-    this.dialogState.set('closed');
-  }
-
-  shouldShowBack(): boolean {
-    return this.headerConfig?.showBackButton?.() ?? false;
-  }
-
-  onBackClick(): void {
-    this.headerConfig?.onBack?.();
-  }
-
-  onAnimationDone(event: AnimationEvent): void {
-    if (event.toState === 'action' || event.toState === 'closed') {
-      this.dialogRef.close(true);
-    }
-  }
-
-
-}

package/src/lib/components/divider/divider.css

@@ -1,24 +0,0 @@
-/* Host como flex para que el divisor vertical (align-self: stretch) tome la altura del padre. */
-:host {
-  display: flex;
-  align-items: stretch;
-}
-
-.ui-divider {
-  flex-shrink: 0;
-  background: var(--divider-enabled-container-divider-color, #c3c7c9);
-}
-
-.ui-divider--horizontal {
-  width: 100%;
-  height: var(--divider-enabled-container-divider-thickness, 0.0625rem);
-  min-height: 0.0625rem;
-}
-
-.ui-divider--vertical {
-  width: var(--divider-enabled-container-divider-thickness, 0.0625rem);
-  min-width: 0.0625rem;
-  align-self: stretch;
-  /* Permite que stretch funcione en contenedores flex con min-height */
-  min-height: 0;
-}

package/src/lib/components/divider/divider.html

@@ -1,7 +0,0 @@
-<div
-  class="ui-divider"
-  [class.ui-divider--horizontal]="orientation() === 'horizontal'"
-  [class.ui-divider--vertical]="orientation() === 'vertical'"
-  role="separator"
-  [attr.aria-orientation]="orientation()"
-></div>

package/src/lib/components/divider/divider.ts

@@ -1,13 +0,0 @@
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
-
-@Component({
-  selector: 'lib-divider',
-  standalone: true,
-  templateUrl: './divider.html',
-  styleUrl: './divider.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class LibDividerComponent {
-  /** Orientación: horizontal (full width) o vertical (full height). Figma: Horizontal/Full-width, Vertical/Full-width */
-  orientation = input<'horizontal' | 'vertical'>('horizontal');
-}

package/src/lib/components/footer-actions/footer/footer-flow.store.ts

@@ -1,30 +0,0 @@
-import { Injectable, signal } from '@angular/core';
-
-@Injectable({ providedIn: 'root' })
-export class FooterFlowStore {
-  readonly totalSteps = signal(1);
-  readonly currentStep = signal(1);
-
-  setTotalSteps(total: number): void {
-    this.totalSteps.set(Math.max(1, total));
-    if (this.currentStep() > this.totalSteps()) {
-      this.currentStep.set(this.totalSteps());
-    }
-  }
-
-  reset(): void {
-    this.currentStep.set(1);
-  }
-
-  advance(): void {
-    if (this.currentStep() < this.totalSteps()) {
-      this.currentStep.update((step) => step + 1);
-    }
-  }
-
-  retreat(): void {
-    if (this.currentStep() > 1) {
-      this.currentStep.update((step) => step - 1);
-    }
-  }
-}

package/src/lib/components/footer-actions/footer/footer.html

@@ -1,14 +0,0 @@
-<lib-modal-footer-actions>
-  <lib-button
-    variant="outlined"
-    size="small"
-    [label]="'Cancelar' | translate"
-    (click)="onCancel()"
-  />
-  <lib-button
-    variant="filled"
-    size="small"
-    [label]="primaryLabel() | translate"
-    (click)="onContinue()"
-  />
-</lib-modal-footer-actions>

package/src/lib/components/footer-actions/footer/footer.ts

@@ -1,50 +0,0 @@
-import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
-import { ConfirmModalStore } from '../../dialogs/confirm-modal/confirm-modal.store';
-import { LibButtonComponent } from '../../button/button';
-import { ModalFooterActionsComponent } from '../modal-footer-actions/modal-footer-actions';
-import { SideModalStore } from '../../dialogs/side-modal/side-modal.state';
-import { TranslatePipe } from '@ngx-translate/core';
-import { FooterFlowStore } from './footer-flow.store';
-
-@Component({
-  selector: 'lib-side-modal-footer',
-  standalone: true,
-  imports: [ModalFooterActionsComponent, LibButtonComponent, TranslatePipe],
-  templateUrl: './footer.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class FooterComponent {
-  private readonly sideModalStore = inject(SideModalStore);
-  private readonly confirmModalStore = inject(ConfirmModalStore);
-  private readonly flowStore = inject(FooterFlowStore);
-
-  readonly primaryLabel = computed(() =>
-    this.flowStore.currentStep() < this.flowStore.totalSteps() ? 'NEXT' : 'SAVE'
-  );
-
-  onCancel(): void {
-    this.sideModalStore.closeSideModal();
-  }
-
-  onContinue(): void {
-    if (this.flowStore.currentStep() < this.flowStore.totalSteps()) {
-      this.flowStore.advance();
-      return;
-    }
-
-    const dialogRef = this.confirmModalStore.open(
-      '¿Guardar cambios?',
-      'Guardar',
-      '',
-      '',
-      'max-content',
-      'Cancelar',
-    );
-
-    dialogRef.closed.subscribe((result: unknown) => {
-      if (result === true) {
-        this.sideModalStore.closeSideModal({ step: this.flowStore.totalSteps(), saved: true });
-      }
-    });
-  }
-}

package/src/lib/components/footer-actions/modal-footer-actions/modal-footer-actions.css

@@ -1,44 +0,0 @@
-:host {
-  display: block;
-  width: 100%;
-}
-
-
-:host-context(.side-modal__content) {
-  width: calc(100% + 2rem);
-  margin-left: -1rem;
-  margin-right: -1rem;
-  margin-bottom: -1rem;
-}
-
-:host-context(.side-modal__content) .lib-modal-footer-actions__buttons {
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.lib-modal-footer-actions {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  width: 100%;
-  align-self: flex-end;
-  flex: 0 0 auto;
-  margin-top: auto;
-  background: var(--side-sheets-enabled-container-sheet-side-docked-standard-container-color,
-      var(--app-side-sheets-enabled-container-sheet-side-docked-standard-container-color, #F7FAFC));
-  z-index: 10;
-  position: sticky;
-  bottom: 0;
-}
-
-.lib-modal-footer-actions__buttons {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 0.75rem 1.5rem 1.25rem;
-}
-
-.lib-modal-footer-actions__buttons lib-mat-button,
-.lib-modal-footer-actions__buttons .lib-mat-btn {
-  width: auto;
-}

package/src/lib/components/footer-actions/modal-footer-actions/modal-footer-actions.html

@@ -1,7 +0,0 @@
-<div class="lib-modal-footer-actions">
-  <lib-divider orientation="horizontal" />
-  <div class="lib-modal-footer-actions__buttons">
-    <ng-content></ng-content>
-  </div>
-</div>
-

package/src/lib/components/footer-actions/modal-footer-actions/modal-footer-actions.ts

@@ -1,12 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { LibDividerComponent } from '../../divider/divider';
-
-@Component({
-  selector: 'lib-modal-footer-actions',
-  standalone: true,
-  imports: [LibDividerComponent],
-  templateUrl: './modal-footer-actions.html',
-  styleUrl: './modal-footer-actions.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ModalFooterActionsComponent {}

package/src/lib/components/footer-actions/page-footer-actions/page-footer-actions.css

@@ -1,31 +0,0 @@
-:host {
-  display: block;
-  width: 100%;
-}
-
-:host-context(.side-modal__content) {
-  width: calc(100% + 2rem);
-  margin-left: -1rem;
-  margin-right: -1rem;
-  margin-bottom: -1rem;
-}
-
-.lib-page-footer-actions {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  width: 100%;
-}
-
-.lib-page-footer-actions__buttons {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 24px 0;
-  justify-content: flex-end;
-}
-
-.lib-page-footer-actions__buttons lib-mat-button,
-.lib-page-footer-actions__buttons .lib-mat-btn {
-  width: auto;
-}

package/src/lib/components/footer-actions/page-footer-actions/page-footer-actions.html

@@ -1,7 +0,0 @@
-<div class="lib-page-footer-actions">
-  <lib-divider orientation="horizontal" />
-  <div class="lib-page-footer-actions__buttons">
-    <ng-content></ng-content>
-  </div>
-</div>
-

package/src/lib/components/footer-actions/page-footer-actions/page-footer-actions.ts

@@ -1,12 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { LibDividerComponent } from '../../divider/divider';
-
-@Component({
-  selector: 'lib-page-footer-actions',
-  standalone: true,
-  imports: [LibDividerComponent],
-  templateUrl: './page-footer-actions.html',
-  styleUrl: './page-footer-actions.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class PageFooterActionsComponent {}