@clavisco/wizard-setup

Wizard Setup es una interfaz de usuario interactiva diseñada para guiar a los usuarios a través de un proceso de configuración paso a paso. Su propósito es simplificar tareas complejas, dividiendo el proceso en etapas o pasos ordenados que el usuario debe completar de manera secuencial. Usualmente, en cada paso se presentan opciones o configuraciones específicas que deben ser seleccionadas o ingresadas, y el diseño del wizard permite al usuario avanzar o retroceder entre los pasos sin perder el progreso.

Tabla de contenido

• Paquetes y dependencias requeridas
• Resumen de la versión
• Instalación
• ¿Cómo lo implemento?
• API de referencia

Paquetes y dependencias requeridas

• @angular/cdk ^13.2.5
• @angular/common ^13.0.0
• @angular/core ^13.0.0
• @angular/material ^13.2.5
• @clavisco/core ~0.2.4
• @clavisco/linker ~0.0.15

Resumen de la versión

• Mostrar configuraciones y pasos.
• Obtener cambios en configuraciones y pasos mediante linker.
• Abrir páginas de aplicación donde se deben realizar los ajustes de las configuraciones.

Instalación

npm i @clavisco/wizard-setup

¿Cómo lo implemento?

1. Instalar componentes npm i @clavisco/core@~0.2.4 @clavisco/linker@~0.0.15 @clavisco/wizard-setup.
2. Importaciones de modulos y servicios:
   • import { WizardSetupModule } from '@clavisco/wizard-setup';
   • import { MatExpansionModule } from '@angular/material/expansion';
   • import { LinkerService } from '@clavisco/linker';
   • import { MatIconModule } from '@angular/material/icon';
   • import { MatListModule } from '@angular/material/list';
   • import { MatTooltipModule } from '@angular/material/tooltip';
3. Agregar al array de imports los modulos y al array de providers los servicios.
4. En el componente donde vayamos a utilizar @clavisco/wizard-setup, debemos agregar esta etiqueta:

   my.component.ts

       @Component({
           selector: 'my-component',
           templateUrl: './my.component.html',
           styleUrls: ['./my.component.scss']
       })
       export class MyComponent implements OnInit, AfterViewInit {
           componentId: string = "wizardSetupComponentId";
       }

   my.component.html

       <cl-wizard-setup [componentId]="componentId" [shouldOpenInNewWindow]="true" [lazyLoading]="false" [editableConfigurations]="false" [alwaysRequestSteps]="false"></cl-wizard-setup>

   La propiedad componentIdrepresenta el identificador del wizard setup componente tanto en el DOM como en LinkerService. La propiedad shouldOpenInNewWindow indica si al redireccionar a la página de ajustes se debe hacer mediante una nueva ventana en el navegador o simplemente navengado sobre la ventana actual. La propiedad lazyLoading indica se deben consultar los steps de las configuraciones al expandirlas. La propiedad editableConfigurations habilita un boton que emite la información de la configuración que se requiere actualizar. La propiedad alwaysRequestSteps indica si debe consulta siempre los steps cada vez que se expanda un configuaración (Solo si lazyLoading esta habilitado)
5. Listo, así se implementa el componente wizard-setup.

Api de referencia

Esta sección muestra todas las características disponibles y especificaciónes del consumo de estas.

Clase: LinkerService
Nombre: Publish
Tipo de retorno: void
Descripción: Este canal es utilizado para agregar y renderizar las configuraciones disponibles. El objeto que debe recibir el metodo debe ser el siguiente:

| Parámetro | Tipo | Descripción | Defecto | Mandatorio | |:--------------|-----------------------|:----------------------------------------------------------------------|-----------|------------| | CallBack | CL_CHANNEL | Canal por el cual se va a realizar al comunicacion con le componente | INFLATE | Sí | | Data | string | Objeto @clavisco/wizard-setup.IConfiguration[] serializado | | Sí | | Target | string | Identificador del componente, valor pasado por la propiedad Id | | Sí |

Clase: LinkerService
Nombre: Publish
Tipo de retorno: void
Descripción: Este canal es utilizado para solicitar las configuarciones junto con los cambios al componente. El objeto que debe recibir el metodo debe ser el siguiente:

| Parámetro | Tipo | Descripción | Defecto | Mandatorio | |:--------------|-----------------------|:----------------------------------------------------------------------|---------------|------------| | CallBack | CL_CHANNEL | Canal por el cual se va a realizar al comunicacion con le componente | DATA_LINE_1 | Sí | | Data | string | Un string vacio | | Sí | | Target | string | Identificador del componente, valor pasado por la propiedad Id | | Sí |

Clase: LinkerService
Nombre: Publish
Tipo de retorno: void
Descripción: Este canal es utilizado para cargar los steps consultados al componente al recibir la respuesta de la solicitud emitida por el canal INPUT

| Parámetro | Tipo | Descripción | Defecto | Mandatorio | |:--------------|-----------------------|:----------------------------------------------------------------------|-----------|------------| | CallBack | CL_CHANNEL | Canal por el cual se va a realizar al comunicacion con le componente | INPUT_1 | Sí | | Data | string | Objeto @clavisco/wizard-setup.IConfigurationStep[] serializado | | Sí | | Target | string | Identificador del componente, valor pasado por la propiedad Id | | Sí |

Clase: Método global de @clavisco/linker
Nombre: Register
Tipo de retorno: void
Descripción: Este canal se ejecuta cada vez que un paso de la configuración es marcado o desmarcado

| Parámetro | Tipo | Descripción | Defecto | Mandatorio | |:------------------|-----------------------------------|:------------------------------------------------------------------------------------|----------|------------| | _componentId | string | Identificador del componente con el cual se va a comunicar | | Sí | | _action | CL_CHANNEL | Canal que se debe escuchar para manejar el marcado y desmarcado de configuraciones | OUTPUT | Sí | | _callback | Function | Función que se va a ejecutar como manejador del evento del canal OUTPUT | | Sí | | _interface | ICLCallbacksInterface<CL_CHANNEL> | Objeto utilizado para registrar el callback | | Sí |

Clase: Método global de @clavisco/linker
Nombre: Register
Tipo de retorno: void
Descripción: Este canal se ejecuta cuando se emita un evento mendiante el canal DATA_LINE_1 hacia el componente.

| Parámetro | Tipo | Descripción | Defecto | Mandatorio | |:------------------|-----------------------------------|:---------------------------------------------------------------------------------------|------------|------------| | _componentId | string | Identificador del componente con el cual se va a comunicar | | Sí | | _action | CL_CHANNEL | Canal que se debe escuchar para manejar la solicitud de configuraciones al componente | OUTPUT_2 | Sí | | _callback | Function | Función que se va a ejecutar como manejador del evento del canal OUTPUT_2 | | Sí | | _interface | ICLCallbacksInterface<CL_CHANNEL> | Objeto utilizado para registrar el callback | | Sí |

Clase: Método global de @clavisco/linker
Nombre: Register
Tipo de retorno: void
Descripción: Este canal se ejecuta cuando se expande una configuración, y solo si esta activo el lazyLoading y ademas si la configuracion no tiene steps cargados.

| Parámetro | Tipo | Descripción | Defecto | Mandatorio | |:------------------|-----------------------------------|:---------------------------------------------------------------------------------------|---------|------------| | _componentId | string | Identificador del componente con el cual se va a comunicar | | Sí | | _action | CL_CHANNEL | Canal que se debe escuchar para manejar la solicitud de consulta de steps | INPUT | Sí | | _callback | Function | Función que se va a ejecutar como manejador del evento del canal INPUT | | Sí | | _interface | ICLCallbacksInterface<CL_CHANNEL> | Objeto utilizado para registrar el callback | | Sí |

Clase: Método global de @clavisco/linker
Nombre: Register
Tipo de retorno: void
Descripción: Este canal se ejecuta cuando se presiona el boton de editar una configuración, y solo si esta activo el editableConfigurations.

| Parámetro | Tipo | Descripción | Defecto | Mandatorio | |:------------------|-----------------------------------|:---------------------------------------------------------------------------------------|------------|------------| | _componentId | string | Identificador del componente con el cual se va a comunicar | | Sí | | _action | CL_CHANNEL | Canal que se debe escuchar para manejar el evento de edicion de configuración | OUTPUT_3 | Sí | | _callback | Function | Función que se va a ejecutar como manejador del evento del canal OUTPUT_3 | | Sí | | _interface | ICLCallbacksInterface<CL_CHANNEL> | Objeto utilizado para registrar el callback | | Sí |

ClavisCo © - 2025

Keywords

setting configuration wizard-setup