crdx-components 1.0.0

package/src/lib/components/dialogs/confirm-modal/confirm-modal.store.ts

@@ -0,0 +1,139 @@
+import { inject, Injectable, signal, WritableSignal } from '@angular/core';
+import { Dialog, DialogRef } from '@angular/cdk/dialog';
+import { Overlay } from '@angular/cdk/overlay';
+import { ConfirmModal, ConfirmModalData } from './confirm-modal';
+import { NavigationStart, Router } from '@angular/router';
+
+export interface ConfirmModalOpenOptions {
+  description?: string;
+  showTopIcon?: boolean;
+  topIconName?: string;
+  variant?: ConfirmModalData['variant'];
+  listItems?: ConfirmModalData['listItems'];
+  height?: string;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ConfirmModalStore {
+  readonly dialog = inject(Dialog);
+  private readonly overlay = inject(Overlay);
+  protected dialogState: WritableSignal<'open' | 'closed'> = signal('open');
+  private readonly router = inject(Router);
+  private currentDialogRef?: DialogRef<string, unknown>;
+
+  open(
+    title: string,
+    labelButtonConfirm: string,
+    reference = '',
+    content = '',
+    width = '19.5rem',
+    labelButtonCancel = 'Cancelar',
+    options: ConfirmModalOpenOptions = {}
+  ): DialogRef<string, unknown> {
+    this.dialogState.set('open');
+    const positionBuilder = this.overlay.position();
+    const strategy = positionBuilder.global().centerHorizontally().centerVertically();
+
+    this.currentDialogRef = this.dialog.open<string>(ConfirmModal, {
+      width,
+      height: options.height,
+      disableClose: true,
+      autoFocus: false,
+      positionStrategy: strategy,
+      panelClass: 'lib-confirm-modal-panel',
+      backdropClass: 'lib-confirm-modal-backdrop',
+      data: {
+        title: title,
+        reference: reference,
+        content: content,
+        description: options.description,
+        showTopIcon: options.showTopIcon,
+        topIconName: options.topIconName,
+        variant: options.variant,
+        listItems: options.listItems,
+        labelButtonConfirm: labelButtonConfirm,
+        labelButtonCancel: labelButtonCancel,
+      },
+      closeOnNavigation: true
+    });
+    const sub = this.router.events.subscribe(event => {
+      if (event instanceof NavigationStart) {
+        this.close();
+        sub.unsubscribe();
+      }
+    });
+    return this.currentDialogRef
+  }
+
+  openBasic(title: string, confirmLabel: string, cancelLabel = 'Cancelar'): DialogRef<string, unknown> {
+    return this.open(title, confirmLabel, '', '', '19.5rem', cancelLabel);
+  }
+
+  openWithDescription(
+    title: string,
+    description: string,
+    confirmLabel: string,
+    cancelLabel = 'Cancelar'
+  ): DialogRef<string, unknown> {
+    return this.open(title, confirmLabel, '', '', '19.5rem', cancelLabel, {
+      description,
+    });
+  }
+
+  openWithIcon(
+    title: string,
+    description: string,
+    confirmLabel: string,
+    cancelLabel = 'Cancelar',
+    topIconName = 'check_box'
+  ): DialogRef<string, unknown> {
+    return this.open(title, confirmLabel, '', '', '19.5rem', cancelLabel, {
+      description,
+      showTopIcon: true,
+      topIconName,
+    });
+  }
+
+  openWithList(
+    title: string,
+    description: string,
+    listItems: ConfirmModalData['listItems'],
+    confirmLabel: string,
+    cancelLabel = 'Cancelar',
+    showTopIcon = false
+  ): DialogRef<string, unknown> {
+    return this.open(title, confirmLabel, '', '', '19.5rem', cancelLabel, {
+      description,
+      showTopIcon,
+      variant: 'list',
+      listItems,
+    });
+  }
+
+  openWithScrollableList(
+    title: string,
+    description: string,
+    listItems: ConfirmModalData['listItems'],
+    confirmLabel: string,
+    cancelLabel = 'Cancelar',
+    showTopIcon = false
+  ): DialogRef<string, unknown> {
+    return this.open(title, confirmLabel, '', '', '19.5rem', cancelLabel, {
+      description,
+      showTopIcon,
+      variant: 'scrollable-list',
+      listItems,
+      height: 'auto',
+    });
+  }
+
+  close(): void {
+    if (this.currentDialogRef) {
+      this.currentDialogRef.close();
+      this.currentDialogRef = undefined;
+    }
+    this.dialogState.set('closed');
+  }
+}

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

@@ -0,0 +1,63 @@
+import { DIALOG_DATA, DialogRef } from '@angular/cdk/dialog';
+import { Component, inject, signal } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+
+import { LibButtonComponent } from '../../button/button';
+
+export type ConfirmModalVariant = 'basic' | 'list' | 'scrollable-list';
+
+export interface ConfirmModalListItem {
+  id: string;
+  label: string;
+  supportingText?: string;
+  amount?: string;
+  selected?: boolean;
+}
+
+export interface ConfirmModalData {
+  title: string;
+  reference?: string;
+  content?: string;
+  description?: string;
+  showTopIcon?: boolean;
+  topIconName?: string;
+  variant?: ConfirmModalVariant;
+  listItems?: ConfirmModalListItem[];
+  labelButtonCancel?: string;
+  labelButtonConfirm: string;
+}
+
+@Component({
+  selector: 'lib-confirm',
+  templateUrl: './confirm-modal.html',
+  imports: [LibButtonComponent, MatIconModule],
+  styleUrl: './confirm-modal.css',
+})
+export class ConfirmModal {
+  readonly dialogRef = inject(DialogRef);
+  readonly data: ConfirmModalData = inject(DIALOG_DATA) as ConfirmModalData;
+  readonly listItems = signal<ConfirmModalListItem[]>(this.data.listItems ?? []);
+
+  readonly labelButtonCancel = this.data.labelButtonCancel ?? 'Cancelar';
+
+  readonly supportingText = this.data.description ?? this.data.content ?? this.data.reference ?? '';
+
+  readonly isListVariant = this.data.variant === 'list' || this.data.variant === 'scrollable-list';
+  readonly isScrollableList = this.data.variant === 'scrollable-list';
+
+  readonly topIconName = this.data.topIconName ?? 'check_box';
+
+  toggleListItem(itemId: string): void {
+    this.listItems.update((items) =>
+      items.map((item) => (item.id === itemId ? { ...item, selected: !item.selected } : item))
+    );
+  }
+
+  onCancel(): void {
+    this.dialogRef.close(false);
+  }
+
+  onConfirm(): void {
+    this.dialogRef.close(true);
+  }
+}

package/src/lib/components/dialogs/container-custom/container-custom.css

@@ -0,0 +1,11 @@
+.container{
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    background-color: white;
+    border-radius: 8px;
+}
+
+.content{
+    width: 100%;
+}

package/src/lib/components/dialogs/container-custom/container-custom.html

@@ -0,0 +1,3 @@
+<div class="container">
+  <ng-content class="content" *ngComponentOutlet="content; injector: injector" ></ng-content>
+</div>

package/src/lib/components/dialogs/container-custom/container-custom.ts

@@ -0,0 +1,37 @@
+import { DIALOG_DATA, DialogRef } from '@angular/cdk/dialog';
+import { NgComponentOutlet } from '@angular/common';
+import { Component, effect, inject, Injector, Type, WritableSignal } from '@angular/core';
+
+@Component({
+  selector: 'lib-container-custom, app-container-custom',
+  imports: [NgComponentOutlet],
+  templateUrl: './container-custom.html',
+  styleUrl: './container-custom.css'
+})
+export class ContainerCustom {
+  private readonly dialogData = inject(DIALOG_DATA);
+  readonly content: Type<any> = this.dialogData.content;
+  readonly dialogState: WritableSignal<'open' | 'closed'> = this.dialogData.dialogState;
+  readonly injector:Injector;
+  private readonly dialogRef = inject(DialogRef);
+
+  constructor() {
+    effect(() => {
+      const state = this.dialogState();
+      if (state === 'closed') {
+        this.dialogRef.close();
+      }
+    });
+
+    this.injector = Injector.create({
+      providers: [
+        { provide: DIALOG_DATA, useValue: this.dialogData.modalData }
+      ]
+    });
+  }
+
+
+
+
+
+}

package/src/lib/components/dialogs/container-custom/custom-modal.state.ts

@@ -0,0 +1,57 @@
+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 { ContainerCustom } from './container-custom';
+
+export interface ModalData {
+  [key: string]: any;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CustomModalState {
+  private readonly dialog = inject(Dialog);
+  private readonly overlay = inject(Overlay);
+  readonly dialogState: WritableSignal<'open' | 'closed'> = signal('open');
+  private currentDialogRef?: DialogRef<any>;
+  private readonly router = inject(Router);
+
+  constructor() { }
+
+  openCustomModal(content: Type<any>, width: string, modalData?: {}): DialogRef<string, any> {
+    this.dialogState.set('open');
+    const positionBuilder = this.overlay.position();
+    const strategy = positionBuilder.global().centerHorizontally().centerVertically();
+
+    this.currentDialogRef = this.dialog.open<string>(ContainerCustom, {
+      width: width,
+      height: 'max-content',
+      disableClose: true,
+      positionStrategy: strategy,
+      data: {
+        content,
+        modalData,
+        dialogState: this.dialogState // Pasar el estado como dato en lugar de inyectar el servicio
+      },
+      closeOnNavigation: true
+    });
+    const sub = this.router.events.subscribe(event => {
+      if (event instanceof NavigationStart) {
+        this.closeCustomModal();
+        sub.unsubscribe();
+      }
+    });
+    return this.currentDialogRef;
+  }
+
+  closeCustomModal(): void {
+    if (this.currentDialogRef) {
+      this.currentDialogRef.close();
+      this.currentDialogRef = undefined;
+    }
+    this.dialogState.set('closed');
+  }
+
+}

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

@@ -0,0 +1,53 @@
+.container{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: #ffffff;
+    width: 100%;
+    height: 100%;
+    outline: none;
+    border: none;
+    padding: 40px 48px;
+    border-radius: 8px;
+}
+
+.container > *:not(:last-child):not(:first-child){
+    margin-top: 24px;
+}
+
+.container > *:last-child{
+    margin-top: 40px;
+}
+
+.container h5{
+    font-size: 24px;
+    font-weight: 700;
+    color: #3E3E3E;
+}
+
+.container p{
+    flex: 1;
+    font-size: 16px;
+    font-weight: 400;
+    color: #3E3E3E;
+    text-align: center;
+    font-style: normal;
+    line-height: 24px;
+}
+
+.container .icon{
+    width: 90px;
+    height: 90px;
+    font-size: 90px;
+    color: #FF4965;
+}
+
+.container button{
+    height: 56px;
+    width: 160px;
+    border-radius: 16px;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+}

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

@@ -0,0 +1,17 @@
+<div class="container">
+    <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="90" height="90" viewBox="0 0 90 90" fill="none">
+        <path d="M49.5 58.5L40.5 58.5L40.5 67.5H49.5L49.5 58.5ZM45 9C52.1201 9 59.0803 11.1114 65.0005 15.0671C70.9207 19.0228 75.5349 24.6453 78.2596 31.2234C80.9844 37.8015 81.6973 45.0399 80.3082 52.0233C78.9192 59.0066 75.4905 65.4212 70.4558 70.4558C65.4211 75.4905 59.0065 78.9192 52.0232 80.3083C45.0399 81.6973 37.8015 80.9844 31.2234 78.2597C24.6452 75.5349 19.0228 70.9207 15.0671 65.0005C11.1113 59.0804 8.99998 52.1201 8.99998 45C9.01093 35.4556 12.8073 26.3052 19.5562 19.5563C26.3052 12.8073 35.4555 9.01096 45 9ZM45 90C53.9001 90 62.6004 87.3608 70.0006 82.4161C77.4009 77.4715 83.1686 70.4434 86.5746 62.2208C89.9805 53.9981 90.8717 44.9501 89.1353 36.2209C87.399 27.4918 83.1131 19.4736 76.8198 13.1802C70.5264 6.88683 62.5082 2.601 53.779 0.864662C45.0499 -0.871674 36.0019 0.0194702 27.7792 3.42542C19.5565 6.83136 12.5285 12.5991 7.58385 19.9993C2.63918 27.3996 -2.28882e-05 36.0998 -2.28882e-05 45C-2.28882e-05 56.9347 4.74104 68.3807 13.1802 76.8198C21.6193 85.2589 33.0652 90 45 90V90ZM49.5 22.5H40.5V49.5H49.5V22.5Z" fill="#FF4965"/>
+    </svg>
+    <h5>Ocurrió un error inesperado</h5>
+    <p style="white-space: pre-wrap;" >
+        {{data.message}}
+    </p>
+    @if(data.detail){
+    <p>
+        Detalle: {{data.detail}}
+    </p>
+    }
+    <button matButton="filled" (click)="onConfirm()" >
+        Entendido
+    </button>
+</div>

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

@@ -0,0 +1,20 @@
+import { DIALOG_DATA, DialogRef } from '@angular/cdk/dialog';
+import { Component, inject } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+
+@Component({
+  selector: 'lib-error-modal, app-error-modal',
+  imports: [MatButtonModule],
+  templateUrl: './error-modal.html',
+  styleUrl: './error-modal.css'
+})
+export class ErrorModal {
+  private readonly dialogRef = inject(DialogRef);
+  readonly data = inject(DIALOG_DATA);
+
+  onConfirm(): void {
+    this.dialogRef.close(true);
+
+  }
+
+}

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

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

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

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

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

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

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