valtech-components 2.0.787 → 2.0.795

package/src/lib/components/organisms/item-list/types.ts

@@ -0,0 +1,130 @@
+/**
+ * Tipos y metadatos para el componente ItemListComponent.
+ * Permiten definir la estructura de los elementos de la lista, acciones y estilos.
+ */
+import { Color } from '@ionic/core';
+import { ComponentState } from '../../types';
+
+/**
+ * Representa una acción disponible en un elemento de la lista.
+ * Ahora soporta contenido reactivo para la descripción.
+ * @property token Identificador único de la acción.
+ * @property icon (opcional) Icono a mostrar.
+ * @property description (opcional) Descripción estática de la acción.
+ * @property descriptionConfig (opcional) Configuración de contenido reactivo para la descripción.
+ * @property state Estado de la acción (habilitado, deshabilitado, trabajando, etc).
+ */
+export type ItemAction = {
+  token: string;
+  icon?: string;
+  description?: string;
+  descriptionConfig?: {
+    className?: string;
+    key: string;
+    fallback?: string;
+    interpolation?: Record<string, any>;
+  };
+  state: ComponentState;
+};
+
+/**
+ * Metadatos de un elemento individual de la lista.
+ * Ahora soporta contenido reactivo para todos los campos de texto.
+ * @property token (opcional) Identificador único del elemento.
+ * @property mode Modo de visualización ('justext', 'subtitule', 'avatar', 'icon', 'route', 'actionable').
+ * @property text (opcional) Texto estático principal del elemento.
+ * @property textConfig (opcional) Configuración de contenido reactivo para el texto principal.
+ * @property image (opcional) Imagen para modo avatar.
+ * @property icon (opcional) Icono para modo icon.
+ * @property comments (opcional) Comentarios estáticos.
+ * @property commentsConfig (opcional) Configuración de contenido reactivo para comentarios.
+ * @property subtitle (opcional) Subtítulo estático.
+ * @property subtitleConfig (opcional) Configuración de contenido reactivo para subtítulo.
+ * @property endNote (opcional) Nota estática al final del elemento.
+ * @property endNoteConfig (opcional) Configuración de contenido reactivo para la nota final.
+ * @property actions (opcional) Acciones disponibles para el elemento.
+ * @property color (opcional) Color personalizado.
+ * @property lines (opcional) Tipo de líneas ('full', 'inset', 'none').
+ * @property button (opcional) Si el elemento es un botón.
+ * @property detail (opcional) Si muestra detalles.
+ * @property clickable (opcional) Si es clicable.
+ * @property detailIcon (opcional) Icono de detalle.
+ * @property disabled (opcional) Si está deshabilitado.
+ * @property ellipsis (opcional) Si el texto debe cortarse con puntos suspensivos.
+ * @property href (opcional) Enlace externo.
+ * @property routerLink (opcional) Enlace de router Angular.
+ * @property unreadIndicator (opcional) Indicador de no leído.
+ */
+export interface ItemMetadata {
+  token?: string;
+  mode: 'justext' | 'subtitule' | 'avatar' | 'icon' | 'route' | 'actionable';
+  text?: string;
+  textConfig?: {
+    className?: string;
+    key: string;
+    fallback?: string;
+    interpolation?: Record<string, any>;
+  };
+  image?: string;
+  icon?: string;
+  comments?: string;
+  commentsConfig?: {
+    className?: string;
+    key: string;
+    fallback?: string;
+    interpolation?: Record<string, any>;
+  };
+  subtitle?: string;
+  subtitleConfig?: {
+    className?: string;
+    key: string;
+    fallback?: string;
+    interpolation?: Record<string, any>;
+  };
+  endNote?: string;
+  endNoteConfig?: {
+    className?: string;
+    key: string;
+    fallback?: string;
+    interpolation?: Record<string, any>;
+  };
+  actions?: ItemAction[];
+
+  color?: string;
+  lines?: 'full' | 'inset' | 'none';
+  button?: boolean;
+  detail?: boolean;
+  clickable?: boolean;
+  detailIcon?: string;
+  disabled?: boolean;
+  ellipsis?: boolean;
+  href?: string;
+  routerLink?: string | any[];
+  unreadIndicator?: boolean;
+}
+
+/**
+ * Metadatos de la lista de elementos.
+ * Ahora soporta contenido reactivo para el título.
+ * @property color Color principal de la lista.
+ * @property bordered Si la lista tiene borde.
+ * @property rounded Si la lista tiene bordes redondeados.
+ * @property shadowed Si la lista tiene sombra.
+ * @property title (opcional) Título estático de la lista.
+ * @property titleConfig (opcional) Configuración de contenido reactivo para el título.
+ * @property items Elementos a mostrar en la lista.
+ */
+export interface ListMetadata {
+  color: Color;
+  bordered: boolean;
+  rounded: boolean;
+  shadowed: boolean;
+  title?: string;
+  titleConfig?: {
+    className?: string;
+    key: string;
+    fallback?: string;
+    interpolation?: Record<string, any>;
+  };
+  items: ItemMetadata[];
+}

package/src/lib/components/organisms/login/login.component.html

@@ -0,0 +1,230 @@
+<div class="val-login" [class.val-login--card]="config.showCard">
+  <!-- Logo -->
+  @if (props.logo) {
+  <div class="logo-container">
+    <val-image [props]="props.logo" />
+  </div>
+  }
+
+  <!-- Login Form -->
+  <val-form [props]="loginFormProps()" (onSubmit)="loginHandler($event)" />
+
+  <!-- OAuth Section -->
+  @if (config.showOAuth && config.oauthProviders.length > 0) {
+  <div class="oauth-separator">
+    <span>{{ t('orContinueWith') }}</span>
+  </div>
+
+  <div class="oauth-buttons">
+    @for (provider of config.oauthProviders; track provider) {
+    <ion-button
+      expand="block"
+      fill="outline"
+      color="dark"
+      (click)="loginWithOAuth(provider)"
+      [disabled]="isOAuthLoading"
+    >
+      @switch (provider) { @case ('google') {
+      <ion-icon slot="start" name="logo-google"></ion-icon>
+      {{ isOAuthLoading ? t('connecting') : t('continueWithGoogle') }} } @case ('apple') {
+      <ion-icon slot="start" name="logo-apple"></ion-icon>
+      {{ isOAuthLoading ? t('connecting') : t('continueWithApple') }} } @case ('microsoft') {
+      <ion-icon slot="start" name="logo-microsoft"></ion-icon>
+      {{ isOAuthLoading ? t('connecting') : t('continueWithMicrosoft') }} } }
+    </ion-button>
+    }
+  </div>
+  }
+
+  <!-- Register Link -->
+  @if (config.showRegister) {
+  <div class="auth-link">
+    <ion-text color="dark">
+      {{ t('noAccount') }}
+      <a (click)="openRegisterModal()">{{ t('register') }}</a>
+    </ion-text>
+  </div>
+  }
+
+  <!-- Forgot Password Link -->
+  @if (config.showForgotPassword) {
+  <div class="auth-link forgot-password">
+    <ion-text color="dark">
+      {{ t('forgotLink') }}
+      <a (click)="openForgotPasswordModal()">{{ t('recoverPassword') }}</a>
+    </ion-text>
+  </div>
+  }
+
+  <!-- Legal Notice -->
+  @if (props.legal) {
+  <div class="legal-notice">
+    <ion-text color="dark">
+      <p>
+        {{ t('legalPrefix') }} @if (props.legal.companyLink) {
+        <a [href]="props.legal.companyLink"><strong>{{ props.legal.companyName }}</strong></a>
+        } @else {
+        <strong>{{ props.legal.companyName }}</strong>
+        } {{ t('legalSuffix') }} @if (props.legal.termsLink) {
+        <a [href]="props.legal.termsLink">{{ t('termsAndConditions') }}</a>
+        } @else {
+        <span>{{ t('termsAndConditions') }}</span>
+        } {{ t('and') }} @if (props.legal.privacyLink) {
+        <a [href]="props.legal.privacyLink">{{ t('privacyPolicy') }}</a>
+        } @else {
+        <span>{{ t('privacyPolicy') }}</span>
+        }.
+      </p>
+    </ion-text>
+  </div>
+  }
+</div>
+
+<!-- Register Modal -->
+<ion-modal [isOpen]="isRegisterModalOpen" (didDismiss)="closeRegisterModal()">
+  <ng-template>
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons slot="end">
+          <ion-button fill="clear" (click)="closeRegisterModal()">
+            <ion-icon name="close-outline"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <section class="modal-form-section">
+        @if (props.logo) {
+        <div class="logo-container">
+          <val-image [props]="props.logo" />
+        </div>
+        }
+        <val-form [props]="registerFormProps()" (onSubmit)="registerHandler($event)" />
+        <div class="auth-link">
+          <ion-text color="dark">
+            {{ t('hasAccount') }}
+            <a (click)="closeRegisterModal()">{{ t('signIn') }}</a>
+          </ion-text>
+        </div>
+      </section>
+    </ion-content>
+  </ng-template>
+</ion-modal>
+
+<!-- Verify Email Modal -->
+<ion-modal [isOpen]="isVerifyModalOpen" [backdropDismiss]="false">
+  <ng-template>
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons slot="end">
+          <ion-button fill="clear" (click)="closeVerifyModal()">
+            <ion-icon name="close-outline"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <section class="modal-form-section">
+        @if (props.logo) {
+        <div class="logo-container">
+          <val-image [props]="props.logo" />
+        </div>
+        }
+        <val-form [props]="verifyFormProps()" (onSubmit)="verifyHandler($event)" />
+        <div class="resend-link">
+          <ion-text color="dark">
+            {{ t('noCodeReceived') }} @if (resendCooldown > 0) {
+            <span class="cooldown">{{ t('resendIn', { seconds: resendCooldown.toString() }) }}</span>
+            } @else {
+            <a (click)="resendCode()">{{ t('resend') }}</a>
+            }
+          </ion-text>
+        </div>
+      </section>
+    </ion-content>
+  </ng-template>
+</ion-modal>
+
+<!-- Forgot Password Modal -->
+<ion-modal [isOpen]="isForgotPasswordModalOpen" (didDismiss)="closeForgotPasswordModal()">
+  <ng-template>
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons slot="end">
+          <ion-button fill="clear" (click)="closeForgotPasswordModal()">
+            <ion-icon name="close-outline"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <section class="modal-form-section">
+        @if (props.logo) {
+        <div class="logo-container">
+          <val-image [props]="props.logo" />
+        </div>
+        }
+        <val-form [props]="forgotPasswordFormProps()" (onSubmit)="forgotPasswordHandler($event)" />
+      </section>
+    </ion-content>
+  </ng-template>
+</ion-modal>
+
+<!-- Reset Password Modal -->
+<ion-modal [isOpen]="isResetPasswordModalOpen" [backdropDismiss]="false">
+  <ng-template>
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons slot="end">
+          <ion-button fill="clear" (click)="closeResetPasswordModal()">
+            <ion-icon name="close-outline"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <section class="modal-form-section">
+        @if (props.logo) {
+        <div class="logo-container">
+          <val-image [props]="props.logo" />
+        </div>
+        }
+        <val-form [props]="resetPasswordFormProps()" (onSubmit)="resetPasswordHandler($event)" />
+        <div class="resend-link">
+          <ion-text color="dark">
+            {{ t('noCodeReceived') }} @if (resetResendCooldown > 0) {
+            <span class="cooldown">{{ t('resendIn', { seconds: resetResendCooldown.toString() }) }}</span>
+            } @else {
+            <a (click)="resendResetCode()">{{ t('resend') }}</a>
+            }
+          </ion-text>
+        </div>
+      </section>
+    </ion-content>
+  </ng-template>
+</ion-modal>
+
+<!-- MFA Verify Modal -->
+<ion-modal [isOpen]="isMFAVerifyModalOpen" [backdropDismiss]="false">
+  <ng-template>
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons slot="end">
+          <ion-button fill="clear" (click)="closeMFAVerifyModal()">
+            <ion-icon name="close-outline"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <section class="modal-form-section">
+        @if (props.logo) {
+        <div class="logo-container">
+          <val-image [props]="props.logo" />
+        </div>
+        }
+        <val-form [props]="mfaVerifyFormProps()" (onSubmit)="verifyMFAHandler($event)" />
+      </section>
+    </ion-content>
+  </ng-template>
+</ion-modal>

package/src/lib/components/organisms/login/login.component.scss

@@ -0,0 +1,118 @@
+.val-login {
+  width: 100%;
+
+  // Card style variant
+  &--card {
+    padding: 1rem;
+    background: var(--ion-color-light);
+    border-radius: 16px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  }
+}
+
+.logo-container {
+  max-width: 130px;
+  margin-bottom: 1.5rem;
+}
+
+// Auth links
+.auth-link {
+  text-align: center;
+  margin-top: 1rem;
+  font-size: 0.9rem;
+
+  a {
+    color: var(--ion-color-primary);
+    text-decoration: none;
+    font-weight: 500;
+    cursor: pointer;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+// OAuth section
+.oauth-separator {
+  display: flex;
+  align-items: center;
+  margin: 1.5rem 0;
+
+  &::before,
+  &::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background: var(--ion-color-medium-tint);
+  }
+
+  span {
+    padding: 0 1rem;
+    color: var(--ion-color-dark);
+    font-size: 0.85rem;
+  }
+}
+
+.oauth-buttons {
+  margin-bottom: 1rem;
+
+  ion-button {
+    --border-radius: 8px;
+    --border-width: 1px;
+  }
+
+  ion-icon {
+    font-size: 1.2rem;
+    margin-right: 0.5rem;
+  }
+}
+
+// Legal notice
+.legal-notice {
+  margin-top: 1.5rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--ion-color-medium-tint);
+
+  p {
+    font-size: 0.75rem;
+    line-height: 1.5;
+    text-align: center;
+    margin: 0;
+  }
+
+  a {
+    color: var(--ion-color-primary);
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+// Modal sections
+.modal-form-section {
+  // padding: 1rem;
+}
+
+// Resend link with cooldown
+.resend-link {
+  text-align: center;
+  margin-top: 1rem;
+  font-size: 0.9rem;
+
+  a {
+    color: var(--ion-color-primary);
+    cursor: pointer;
+    font-weight: 500;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  .cooldown {
+    color: var(--ion-color-medium);
+  }
+}