utn-cli 2.1.38 → 2.1.40

package/templates/frontend/src/app/Componentes/Nucleo/reordenar-menu/reordenar-menu.component.css

@@ -0,0 +1,65 @@
+.instruccion {
+  font-size: 0.875rem;
+  color: #555;
+  margin: 0 0 1rem 0;
+}
+
+.lista-items {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  min-width: 280px;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  border-radius: 8px;
+  background: #f5f8ff;
+  border-left: 4px solid #1976d2;
+}
+
+.handle {
+  color: #999;
+  cursor: grab;
+  flex-shrink: 0;
+}
+
+.handle:active {
+  cursor: grabbing;
+}
+
+.item-icono {
+  color: #1976d2;
+  flex-shrink: 0;
+}
+
+.item-etiqueta {
+  flex: 1;
+  font-size: 0.95rem;
+}
+
+.cdk-drag-preview {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  border-radius: 8px;
+  background: white;
+  border-left: 4px solid #1976d2;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+}
+
+.cdk-drag-placeholder {
+  opacity: 0.3;
+}
+
+.cdk-drag-animating {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.lista-items.cdk-drop-list-dragging .item:not(.cdk-drag-placeholder) {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}

package/templates/frontend/src/app/Componentes/Nucleo/reordenar-menu/reordenar-menu.component.html

@@ -0,0 +1,17 @@
+<h2 mat-dialog-title>Reordenar menú</h2>
+<mat-dialog-content>
+  <p class="instruccion">Arrastrá los elementos para cambiar el orden.</p>
+  <div cdkDropList (cdkDropListDropped)="drop($event)" class="lista-items">
+    @for (item of items; track item.id) {
+    <div cdkDrag class="item">
+      <mat-icon cdkDragHandle class="handle">drag_indicator</mat-icon>
+      <mat-icon class="item-icono">{{ item.icono }}</mat-icon>
+      <span class="item-etiqueta">{{ item.etiqueta }}</span>
+    </div>
+    }
+  </div>
+</mat-dialog-content>
+<mat-dialog-actions>
+  <button mat-button (click)="cancelar()">Cancelar</button>
+  <button mat-flat-button color="primary" (click)="guardar()">Guardar</button>
+</mat-dialog-actions>

package/templates/frontend/src/app/Componentes/Nucleo/reordenar-menu/reordenar-menu.component.ts

@@ -0,0 +1,41 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef, MatDialogTitle, MatDialogContent, MatDialogActions } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { DragDropModule, CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+
+export interface ItemDeMenuDialog {
+  id: string;
+  etiqueta: string;
+  icono: string;
+}
+
+@Component({
+  selector: 'app-reordenar-menu',
+  standalone: true,
+  imports: [MatDialogTitle, MatDialogContent, MatDialogActions, MatButtonModule, MatIconModule, DragDropModule],
+  templateUrl: './reordenar-menu.component.html',
+  styleUrl: './reordenar-menu.component.css'
+})
+export class ReordenarMenuComponent {
+  items: ItemDeMenuDialog[];
+
+  constructor(
+    @Inject(MAT_DIALOG_DATA) public data: { items: ItemDeMenuDialog[] },
+    private dialogRef: MatDialogRef<ReordenarMenuComponent>
+  ) {
+    this.items = [...data.items];
+  }
+
+  drop(event: CdkDragDrop<ItemDeMenuDialog[]>): void {
+    moveItemInArray(this.items, event.previousIndex, event.currentIndex);
+  }
+
+  guardar(): void {
+    this.dialogRef.close(this.items);
+  }
+
+  cancelar(): void {
+    this.dialogRef.close();
+  }
+}

package/templates/frontend/src/app/Paginas/Nucleo/accesibilidad/accesibilidad.component.css

@@ -0,0 +1,239 @@
+/* Layout */
+.acc-layout {
+  display: flex;
+  gap: 0;
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 24px 16px;
+  font-family: 'Roboto', sans-serif;
+}
+
+/* Índice lateral */
+.acc-toc {
+  width: 220px;
+  flex-shrink: 0;
+  position: sticky;
+  top: 16px;
+  align-self: flex-start;
+  background: #f4f7fb;
+  border-radius: 10px;
+  padding: 16px;
+  border: 1px solid #d0daea;
+  margin-right: 24px;
+}
+
+.toc-titulo {
+  font-weight: 700;
+  color: #002f6b;
+  font-size: 13px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin: 0 0 10px 0;
+}
+
+.toc-lista {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.toc-lista li {
+  margin-bottom: 4px;
+}
+
+.toc-enlace {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: #1976d2;
+  font-size: 13px;
+  text-align: left;
+  padding: 4px 6px;
+  border-radius: 5px;
+  width: 100%;
+  transition: background 0.15s, color 0.15s;
+  line-height: 1.4;
+}
+
+.toc-enlace:hover {
+  background: #dce8f8;
+  color: #0b4fce;
+}
+
+/* Contenido principal */
+.acc-main {
+  flex: 1;
+  min-width: 0;
+}
+
+/* Encabezado */
+.acc-encabezado {
+  display: flex;
+  align-items: flex-start;
+  gap: 14px;
+  padding: 20px 24px;
+  background: linear-gradient(135deg, #002f6b 0%, #1565c0 100%);
+  color: white;
+  border-radius: 12px;
+  margin-bottom: 28px;
+}
+
+.acc-icono-header {
+  font-size: 40px !important;
+  width: 40px !important;
+  height: 40px !important;
+  flex-shrink: 0;
+  margin-top: 4px;
+  opacity: 0.9;
+}
+
+.acc-encabezado h1 {
+  margin: 0 0 6px 0;
+  font-size: 22px;
+  font-weight: 700;
+}
+
+.acc-encabezado p {
+  margin: 0;
+  font-size: 14px;
+  opacity: 0.9;
+  line-height: 1.5;
+}
+
+/* Secciones */
+.acc-seccion {
+  margin-bottom: 36px;
+  scroll-margin-top: 16px;
+}
+
+.acc-titulo-seccion {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 18px;
+  font-weight: 700;
+  color: #002f6b;
+  border-bottom: 2px solid #002f6b;
+  padding-bottom: 8px;
+  margin-bottom: 16px;
+}
+
+.acc-titulo-seccion mat-icon {
+  font-size: 22px !important;
+  width: 22px !important;
+  height: 22px !important;
+  color: #1976d2;
+}
+
+.acc-subtitulo {
+  font-size: 15px;
+  font-weight: 600;
+  color: #1565c0;
+  margin: 20px 0 10px 0;
+}
+
+.acc-seccion > p {
+  color: #333;
+  line-height: 1.6;
+  margin: 0 0 14px 0;
+}
+
+/* Tablas */
+.acc-tabla {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 14px;
+  margin-bottom: 16px;
+}
+
+.acc-tabla th {
+  background-color: #002f6b;
+  color: white;
+  padding: 10px 14px;
+  text-align: left;
+  font-weight: 600;
+}
+
+.acc-tabla td {
+  padding: 9px 14px;
+  border-bottom: 1px solid #e0e7ef;
+  color: #333;
+  vertical-align: top;
+}
+
+.acc-tabla tr:nth-child(even) td {
+  background-color: #f4f7fb;
+}
+
+.acc-tabla tr:hover td {
+  background-color: #e8f0fb;
+}
+
+/* Teclas */
+kbd {
+  display: inline-block;
+  background: #f0f4f8;
+  border: 1px solid #b0bec5;
+  border-radius: 4px;
+  padding: 2px 7px;
+  font-size: 12px;
+  font-family: 'Roboto Mono', monospace;
+  color: #002f6b;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
+  white-space: nowrap;
+}
+
+/* Listas */
+.acc-lista {
+  padding-left: 20px;
+  margin: 0 0 16px 0;
+  line-height: 1.7;
+  color: #333;
+  font-size: 14px;
+}
+
+.acc-lista li {
+  margin-bottom: 6px;
+}
+
+/* Nota informativa */
+.acc-nota {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  background: #e8f4fd;
+  border-left: 4px solid #1976d2;
+  border-radius: 6px;
+  padding: 12px 16px;
+  margin: 16px 0;
+}
+
+.acc-nota mat-icon {
+  font-size: 20px !important;
+  width: 20px !important;
+  height: 20px !important;
+  color: #1976d2;
+  flex-shrink: 0;
+  margin-top: 1px;
+}
+
+.acc-nota p {
+  margin: 0;
+  font-size: 13px;
+  color: #333;
+  line-height: 1.6;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .acc-layout {
+    flex-direction: column;
+  }
+
+  .acc-toc {
+    width: auto;
+    position: static;
+    margin-right: 0;
+    margin-bottom: 20px;
+  }
+}

package/templates/frontend/src/app/Paginas/Nucleo/accesibilidad/accesibilidad.component.html

@@ -0,0 +1,289 @@
+<div class="acc-layout">
+
+  <!-- Índice lateral -->
+  <aside class="acc-toc" aria-label="Índice de accesibilidad">
+    <p class="toc-titulo">Contenido</p>
+    <nav>
+      <ul class="toc-lista">
+        @for (seccion of secciones; track seccion.id) {
+        <li>
+          <button class="toc-enlace" (click)="irA(seccion.id)" [title]="seccion.titulo">
+            {{ seccion.titulo }}
+          </button>
+        </li>
+        }
+      </ul>
+    </nav>
+  </aside>
+
+  <!-- Contenido principal -->
+  <main class="acc-main" role="main" aria-label="Guía de accesibilidad mediante teclado">
+
+    <header class="acc-encabezado">
+      <mat-icon class="acc-icono-header">accessibility_new</mat-icon>
+      <div>
+        <h1>Accesibilidad mediante teclado</h1>
+        <p>Esta sección documenta cómo navegar el módulo usando únicamente el teclado, los atajos disponibles según su
+          navegador y sistema operativo, y cómo usar el widget de accesibilidad UserWay.</p>
+      </div>
+    </header>
+
+    <!-- Sección 1 -->
+    <section id="navegacion-teclado" class="acc-seccion" aria-labelledby="titulo-navegacion">
+      <h2 id="titulo-navegacion" class="acc-titulo-seccion">
+        <mat-icon>keyboard</mat-icon> Navegación con teclado
+      </h2>
+      <p>Puede recorrer todos los elementos interactivos del módulo sin usar el ratón. Las teclas básicas son:</p>
+      <table class="acc-tabla" aria-label="Teclas de navegación básica">
+        <thead>
+          <tr>
+            <th scope="col">Tecla</th>
+            <th scope="col">Acción</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td><kbd>Tab</kbd></td>
+            <td>Avanzar al siguiente elemento interactivo (botón, enlace, campo de texto)</td>
+          </tr>
+          <tr>
+            <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td>
+            <td>Retroceder al elemento interactivo anterior</td>
+          </tr>
+          <tr>
+            <td><kbd>Enter</kbd></td>
+            <td>Activar el elemento con foco (botón, enlace, opción de menú)</td>
+          </tr>
+          <tr>
+            <td><kbd>Espacio</kbd></td>
+            <td>Activar botones y casillas de verificación; abrir menús desplegables</td>
+          </tr>
+          <tr>
+            <td><kbd>Escape</kbd></td>
+            <td>Cerrar diálogos, menús y paneles abiertos</td>
+          </tr>
+          <tr>
+            <td><kbd>↑</kbd> <kbd>↓</kbd></td>
+            <td>Navegar entre opciones de un menú desplegable o lista</td>
+          </tr>
+          <tr>
+            <td><kbd>←</kbd> <kbd>→</kbd></td>
+            <td>Navegar entre pestañas o controles de radio dentro de un grupo</td>
+          </tr>
+          <tr>
+            <td><kbd>Home</kbd></td>
+            <td>Ir al primer elemento de una lista o tabla</td>
+          </tr>
+          <tr>
+            <td><kbd>End</kbd></td>
+            <td>Ir al último elemento de una lista o tabla</td>
+          </tr>
+        </tbody>
+      </table>
+    </section>
+
+    <!-- Sección 2 -->
+    <section id="atajos-navegadores" class="acc-seccion" aria-labelledby="titulo-atajos">
+      <h2 id="titulo-atajos" class="acc-titulo-seccion">
+        <mat-icon>public</mat-icon> Atajos por navegador y sistema operativo
+      </h2>
+      <p>Los siguientes atajos son propios del navegador y del sistema operativo; no dependen del módulo.</p>
+
+      <h3 class="acc-subtitulo">Windows y Linux</h3>
+      <table class="acc-tabla" aria-label="Atajos de navegador en Windows y Linux">
+        <thead>
+          <tr>
+            <th scope="col">Atajo</th>
+            <th scope="col">Acción</th>
+            <th scope="col">Navegadores</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td><kbd>Alt</kbd> + <kbd>D</kbd></td>
+            <td>Mover el foco a la barra de direcciones</td>
+            <td>Chrome, Firefox, Edge</td>
+          </tr>
+          <tr>
+            <td><kbd>F6</kbd></td>
+            <td>Rotar el foco entre zonas principales de la ventana</td>
+            <td>Chrome, Edge</td>
+          </tr>
+          <tr>
+            <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td>
+            <td>Abrir la búsqueda en página</td>
+            <td>Chrome, Firefox, Edge</td>
+          </tr>
+          <tr>
+            <td><kbd>Ctrl</kbd> + <kbd>L</kbd></td>
+            <td>Mover el foco a la barra de direcciones</td>
+            <td>Chrome, Firefox, Edge</td>
+          </tr>
+          <tr>
+            <td><kbd>F5</kbd> / <kbd>Ctrl</kbd> + <kbd>R</kbd></td>
+            <td>Recargar la página</td>
+            <td>Chrome, Firefox, Edge</td>
+          </tr>
+          <tr>
+            <td><kbd>Ctrl</kbd> + <kbd>+</kbd> / <kbd>-</kbd></td>
+            <td>Aumentar / disminuir el zoom de la página</td>
+            <td>Chrome, Firefox, Edge</td>
+          </tr>
+          <tr>
+            <td><kbd>Ctrl</kbd> + <kbd>0</kbd></td>
+            <td>Restablecer el zoom al 100 %</td>
+            <td>Chrome, Firefox, Edge</td>
+          </tr>
+        </tbody>
+      </table>
+
+      <h3 class="acc-subtitulo">macOS</h3>
+      <table class="acc-tabla" aria-label="Atajos de navegador en macOS">
+        <thead>
+          <tr>
+            <th scope="col">Atajo</th>
+            <th scope="col">Acción</th>
+            <th scope="col">Navegadores</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td><kbd>⌘</kbd> + <kbd>L</kbd></td>
+            <td>Mover el foco a la barra de direcciones</td>
+            <td>Chrome, Firefox, Safari, Edge</td>
+          </tr>
+          <tr>
+            <td><kbd>⌘</kbd> + <kbd>F</kbd></td>
+            <td>Abrir la búsqueda en página</td>
+            <td>Chrome, Firefox, Safari, Edge</td>
+          </tr>
+          <tr>
+            <td><kbd>⌘</kbd> + <kbd>R</kbd></td>
+            <td>Recargar la página</td>
+            <td>Chrome, Firefox, Safari, Edge</td>
+          </tr>
+          <tr>
+            <td><kbd>⌘</kbd> + <kbd>+</kbd> / <kbd>-</kbd></td>
+            <td>Aumentar / disminuir el zoom de la página</td>
+            <td>Chrome, Firefox, Safari, Edge</td>
+          </tr>
+          <tr>
+            <td><kbd>⌘</kbd> + <kbd>0</kbd></td>
+            <td>Restablecer el zoom al 100 %</td>
+            <td>Chrome, Firefox, Safari, Edge</td>
+          </tr>
+        </tbody>
+      </table>
+
+      <div class="acc-nota" role="note">
+        <mat-icon>info</mat-icon>
+        <p>En <strong>Safari (macOS)</strong>, la navegación con <kbd>Tab</kbd> entre todos los elementos interactivos
+          requiere activar <em>Acceso completo al teclado</em>: vaya a <strong>Preferencias del Sistema → Teclado →
+            Atajos</strong> y active la opción <em>"Todos los controles"</em> al pie de la ventana (o presione
+          <kbd>Ctrl</kbd> + <kbd>F7</kbd>).
+        </p>
+      </div>
+    </section>
+
+    <!-- Sección 3 -->
+    <section id="widget-userway" class="acc-seccion" aria-labelledby="titulo-userway">
+      <h2 id="titulo-userway" class="acc-titulo-seccion">
+        <mat-icon>accessibility</mat-icon> Widget de accesibilidad (UserWay)
+      </h2>
+      <p>Este módulo incorpora el widget <strong>UserWay</strong>, que ofrece herramientas adicionales de
+        accesibilidad sin necesidad de modificar la configuración del navegador.</p>
+
+      <h3 class="acc-subtitulo">Cómo abrir el widget</h3>
+      <table class="acc-tabla" aria-label="Atajos para abrir UserWay">
+        <thead>
+          <tr>
+            <th scope="col">Sistema operativo</th>
+            <th scope="col">Atajo de teclado</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Windows / Linux</td>
+            <td><kbd>Alt</kbd> + <kbd>9</kbd></td>
+          </tr>
+          <tr>
+            <td>macOS</td>
+            <td><kbd>Option (⌥)</kbd> + <kbd>9</kbd></td>
+          </tr>
+        </tbody>
+      </table>
+
+      <h3 class="acc-subtitulo">Funciones disponibles en el widget</h3>
+      <ul class="acc-lista">
+        <li><strong>Contraste alto</strong> — aumenta el contraste de colores para mejorar la legibilidad.</li>
+        <li><strong>Tamaño de texto</strong> — incrementa o reduce el tamaño de la fuente en toda la página.</li>
+        <li><strong>Espaciado de texto</strong> — amplía el espaciado entre líneas y letras.</li>
+        <li><strong>Cursor grande</strong> — agranda el puntero del ratón para facilitar su localización visual.</li>
+        <li><strong>Lectura de pantalla</strong> — convierte el texto en voz al pasar el cursor o enfocar elementos.</li>
+        <li><strong>Modo daltonismo</strong> — ajusta la paleta de colores según distintos tipos de daltonismo.</li>
+        <li><strong>Resaltar enlaces</strong> — subraya y resalta todos los hipervínculos de la página.</li>
+        <li><strong>Detener animaciones</strong> — pausa las animaciones y transiciones de la interfaz.</li>
+      </ul>
+    </section>
+
+    <!-- Sección 4 -->
+    <section id="teclas-rapidas" class="acc-seccion" aria-labelledby="titulo-teclas">
+      <h2 id="titulo-teclas" class="acc-titulo-seccion">
+        <mat-icon>tune</mat-icon> Programación de teclas rápidas
+      </h2>
+      <p>UserWay permite personalizar los atajos de teclado del widget desde su panel de configuración:</p>
+      <ol class="acc-lista">
+        <li>Abra el widget con <kbd>Alt</kbd> + <kbd>9</kbd> (Windows) u <kbd>⌥</kbd> + <kbd>9</kbd> (macOS).</li>
+        <li>Seleccione el ícono de <strong>Configuración</strong> (engranaje) dentro del panel.</li>
+        <li>En la sección <em>Atajos de teclado</em>, podrá asignar teclas personalizadas a las funciones del
+          widget.</li>
+        <li>Guarde los cambios; la nueva configuración se mantendrá en ese navegador.</li>
+      </ol>
+
+      <div class="acc-nota" role="note">
+        <mat-icon>info</mat-icon>
+        <p>La configuración de teclas rápidas de UserWay se almacena localmente en el navegador. Si utiliza un
+          dispositivo o navegador diferente, deberá volver a configurarlas.</p>
+      </div>
+
+      <h3 class="acc-subtitulo">Atajos del sistema operativo para lectores de pantalla</h3>
+      <table class="acc-tabla" aria-label="Atajos de lectores de pantalla por sistema operativo">
+        <thead>
+          <tr>
+            <th scope="col">Sistema operativo</th>
+            <th scope="col">Lector de pantalla</th>
+            <th scope="col">Activación</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Windows</td>
+            <td>NVDA (gratuito)</td>
+            <td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>N</kbd> (instalado)</td>
+          </tr>
+          <tr>
+            <td>Windows</td>
+            <td>Narrador (integrado)</td>
+            <td><kbd>Win</kbd> + <kbd>Ctrl</kbd> + <kbd>Enter</kbd></td>
+          </tr>
+          <tr>
+            <td>macOS</td>
+            <td>VoiceOver (integrado)</td>
+            <td><kbd>⌘</kbd> + <kbd>F5</kbd> o triple clic en Touch ID</td>
+          </tr>
+          <tr>
+            <td>iOS</td>
+            <td>VoiceOver (integrado)</td>
+            <td>Triple clic en el botón lateral</td>
+          </tr>
+          <tr>
+            <td>Android</td>
+            <td>TalkBack (integrado)</td>
+            <td>Configuración → Accesibilidad → TalkBack</td>
+          </tr>
+        </tbody>
+      </table>
+    </section>
+
+  </main>
+</div>

package/templates/frontend/src/app/Paginas/Nucleo/accesibilidad/accesibilidad.component.ts

@@ -0,0 +1,28 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+
+interface SeccionToc {
+  id: string;
+  titulo: string;
+}
+
+@Component({
+  selector: 'app-accesibilidad',
+  standalone: true,
+  imports: [CommonModule, MatIconModule],
+  templateUrl: './accesibilidad.component.html',
+  styleUrl: './accesibilidad.component.css'
+})
+export class AccesibilidadComponent {
+  public secciones: SeccionToc[] = [
+    { id: 'navegacion-teclado', titulo: 'Navegación con teclado' },
+    { id: 'atajos-navegadores', titulo: 'Atajos por navegador y sistema operativo' },
+    { id: 'widget-userway', titulo: 'Widget de accesibilidad (UserWay)' },
+    { id: 'teclas-rapidas', titulo: 'Programación de teclas rápidas' },
+  ];
+
+  irA(id: string): void {
+    document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  }
+}