agregar-programa.component.html

<!-- Importaciones necesarias -->
<link
  href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
  rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet" />

<div class="contenedor">
  <div class="sobremontado">
    <mat-icon>loyalty</mat-icon>
    <span class="titulo-texto">Gestión de Programas</span>
    <button class="volver" (click)="volver()">
      <mat-icon>keyboard_arrow_left</mat-icon>
    </button>
  </div>

  <div class="contenedor-dos">
    <mat-accordion>
      <!--perfil-->
      <mat-expansion-panel hideToggle expanded>
        <mat-expansion-panel-header>
          <mat-panel-title>
            Perfil
          </mat-panel-title>
        </mat-expansion-panel-header>

        <!--Datos Generales-->
        <mat-expansion-panel
          (opened)="contraccion = true"
          (closed)="contraccion = false">
          <mat-expansion-panel-header>
            <mat-panel-title>
              <mat-icon
                [ngClass]="{'expanded': contraccion, 'collapsed': !contraccion}">keyboard_arrow_right</mat-icon>
              Datos Generales
            </mat-panel-title>
          </mat-expansion-panel-header>

          <!--Datos generales internos-->

          <mat-expansion-panel
            (opened)="contraccion = true"
            (closed)="contraccion = false">
            <mat-expansion-panel-header>
              <mat-panel-title>
                <mat-icon
                  [ngClass]="{'expanded': contraccion, 'collapsed': !contraccion}">keyboard_arrow_right</mat-icon>
                1.1.- Datos Generales
              </mat-panel-title>
            </mat-expansion-panel-header>
            <!--Datos generales internos-->
            <vex-datos-generales></vex-datos-generales>
            <!--fin-->
          </mat-expansion-panel>

          <mat-expansion-panel
          (opened)="contraccion = true"
          (closed)="contraccion = false">
          <mat-expansion-panel-header>
            <mat-panel-title>
              <mat-icon
                [ngClass]="{'expanded': contraccion, 'collapsed': !contraccion}">keyboard_arrow_right</mat-icon>
              1.2.- Entidad Ejecutora
            </mat-panel-title>
          </mat-expansion-panel-header>
          <!--Datos generales internos-->
          <button mat-raised-button color="primary"
            (click)="mostrarFormulario = true">Agregar</button>
          <button mat-raised-button color="warn"
            (click)="cancelarFormulario()">Cancelar</button>
            <vex-entidad *ngIf="mostrarFormulario" (formularioGuardado)="ocultarFormulario()"></vex-entidad>
            <vex-edit-entidad *ngIf="editarEntidad"></vex-edit-entidad>
            <vex-entidad-list></vex-entidad-list>
          <!--fin-->
        </mat-expansion-panel>

        <mat-expansion-panel
          (opened)="contraccion = true"
          (closed)="contraccion = false">
          <mat-expansion-panel-header>
            <mat-panel-title>
              <mat-icon
                [ngClass]="{'expanded': contraccion, 'collapsed': !contraccion}">keyboard_arrow_right</mat-icon>
              1.3.-Cobertura y Localización
            </mat-panel-title>
          </mat-expansion-panel-header>
          <!--Datos generales internos-->
          <button mat-raised-button color="primary"
            (click)="mostrarCober = true">Editar</button>
          <button mat-raised-button color="warn"
            (click)="cancelarFormularioCobertura()">Cancelar</button>
          <vex-cobertura *ngIf="mostrarCober"></vex-cobertura>
          <vex-cobertura-list></vex-cobertura-list>
          <!--fin-->
        </mat-expansion-panel>

        <!--fin-->
      </mat-expansion-panel>

      <!--Introducción-->
      <mat-expansion-panel
        (opened)="contraccion = true"
        (closed)="contraccion = false">
        <mat-expansion-panel-header>
          <mat-panel-title>
            <mat-icon
              [ngClass]="{'expanded': contraccion, 'collapsed': !contraccion}">keyboard_arrow_right</mat-icon>
            2.- Introducción
          </mat-panel-title>
        </mat-expansion-panel-header>

        <!--primer submenu-->
        <mat-expansion-panel
          (opened)="contraccion = true"
          (closed)="contraccion = false">
          <mat-expansion-panel-header>
            <mat-panel-title>
              <mat-icon
                [ngClass]="{'expanded': contraccion, 'collapsed': !contraccion}">keyboard_arrow_right</mat-icon>
              2.1.- Objetivos del Plan Nacional del Buen Vivivr
            </mat-panel-title>
          </mat-expansion-panel-header>
          <!--Datos generales internos-->
          <button mat-raised-button color="primary"
            (click)="mostrarPLNBV = true">Agregar</button>
          <button mat-raised-button color="warn"
            (click)="cancelarFormularioPLNBV()">Cancelar</button>
          <vex-obj-p *ngIf="mostrarPLNBV" (formularioGuardado)="cancelarFormularioPLNBV()"></vex-obj-p>
          <vex-obj-p-list></vex-obj-p-list>
          <!--fin-->
        </mat-expansion-panel>

        <!--segundo submenu-->
        <mat-expansion-panel
          (opened)="contraccion = true"
          (closed)="contraccion = false">
          <mat-expansion-panel-header>
            <mat-panel-title>
              <mat-icon
                [ngClass]="{'expanded': contraccion, 'collapsed': !contraccion}">keyboard_arrow_right</mat-icon>
              2.2.- Objetivos Provinciales, Cantonales, Parroquiales
            </mat-panel-title>
          </mat-expansion-panel-header>
          <!--Datos generales internos-->
          <vex-obj-pc-p-list></vex-obj-pc-p-list>
          <!--fin-->
        </mat-expansion-panel>

        <!--tercer submenu-->
        <mat-expansion-panel
          (opened)="contraccion = true"
          (closed)="contraccion = false">
          <mat-expansion-panel-header>
            <mat-panel-title>
              <mat-icon
                [ngClass]="{'expanded': contraccion, 'collapsed': !contraccion}">keyboard_arrow_right</mat-icon>
                2.3.- Objetivos Estratégicos Institucionales
            </mat-panel-title>
          </mat-expansion-panel-header>
          <!--Datos generales internos-->
          <button mat-raised-button color="primary"
            (click)="mostrarInstObj = true">Editar</button>
          <button mat-raised-button color="warn"
            (click)="cancelarFormularioObjEstraInst()">Cancelar</button>
          <vex-obj-ei *ngIf="mostrarInstObj" (formularioGuardado)="cancelarFormularioObjEstraInst()"></vex-obj-ei>
          <vex-obj-ei-list></vex-obj-ei-list>
          <!--fin-->
        </mat-expansion-panel>


        <!--cuarto submenu-->
        <mat-expansion-panel
          (opened)="contraccion = true"
          (closed)="contraccion = false">
          <mat-expansion-panel-header>
            <mat-panel-title>
              <mat-icon
                [ngClass]="{'expanded': contraccion, 'collapsed': !contraccion}">keyboard_arrow_right</mat-icon>
              2.4.- Objetivos del Plan de Vinculación
            </mat-panel-title>
          </mat-expansion-panel-header>
          <!--Datos generales internos-->
          <button mat-raised-button color="primary"
            (click)="mostrarobjVinc = true">Editar</button>
          <button mat-raised-button color="warn"
            (click)="cancelarObjVinc()">Cancelar</button>
          <vex-add-obje-vincu *ngIf="mostrarobjVinc" (formularioGuardado)="cancelarObjVinc()"></vex-add-obje-vincu>
          <vex-list-obje-vincu></vex-list-obje-vincu>
          <!--fin-->
        </mat-expansion-panel>

        <mat-expansion-panel
          (opened)="contraccion = true"
          (closed)="contraccion = false">
          <mat-expansion-panel-header>
            <mat-panel-title>
              <mat-icon
                [ngClass]="{'expanded': contraccion, 'collapsed': !contraccion}">keyboard_arrow_right</mat-icon>
              2.5.- Estrategias del Plan de Vinculación
            </mat-panel-title>
          </mat-expansion-panel-header>
          <!--Datos generales internos-->
          <button mat-raised-button color="primary"
            (click)="mostrarestraVinc = true">Editar</button>
          <button mat-raised-button color="warn"
            (click)="cancelarEstraVinc()">Cancelar</button>
          <vex-add-estra-vincu *ngIf="mostrarestraVinc" (formularioGuardado)="cancelarEstraVinc()"></vex-add-estra-vincu>
          <vex-list-estra-vincu></vex-list-estra-vincu>
          <!--fin-->
        </mat-expansion-panel>

        <mat-expansion-panel
          (opened)="contraccion = true"
          (closed)="contraccion = false">
          <mat-expansion-panel-header>
            <mat-panel-title>
              <mat-icon
                [ngClass]="{'expanded': contraccion, 'collapsed': !contraccion}">keyboard_arrow_right</mat-icon>
              2.6.- Resumen del Programa
            </mat-panel-title>
          </mat-expansion-panel-header>
          <!--Datos generales internos-->
          <vex-resumen-progra></vex-resumen-progra>
          <!--fin-->
        </mat-expansion-panel>
        <!--fin del todo-->
      </mat-expansion-panel>

      <!--Diagnostico y problema-->
      <mat-expansion-panel
        (opened)="contraccion = true"
        (closed)="contraccion = false">
        <mat-expansion-panel-header>
          <mat-panel-title>
            <mat-icon
              [ngClass]="{'expanded': contraccion, 'collapsed': !contraccion}">keyboard_arrow_right</mat-icon>
            3.- Diagnostico y Problema
          </mat-panel-title>
        </mat-expansion-panel-header>

        <!--Datos generales internos-->
        <mat-expansion-panel
        (opened)="contraccion = true"
        (closed)="contraccion = false">
        <mat-expansion-panel-header>
          <mat-panel-title>
            <mat-icon
              [ngClass]="{'expanded': contraccion, 'collapsed': !contraccion}">keyboard_arrow_right</mat-icon>
            3.1.- Diagnostico y Problema
          </mat-panel-title>
        </mat-expansion-panel-header>
        <!--Datos generales internos-->
        <vex-diagnostico></vex-diagnostico>
        <!--fin-->
      </mat-expansion-panel>


        <!--fin-->
      </mat-expansion-panel>

      <!--Matriz de marco logico-->

      <mat-expansion-panel
        (opened)="contraccion = true"
        (closed)="contraccion = false">
        <mat-expansion-panel-header>
          <mat-panel-title>
            <mat-icon
              [ngClass]="{'expanded': contraccion, 'collapsed': !contraccion}">keyboard_arrow_right</mat-icon>
            4.- Matriz de Marco Lógico
          </mat-panel-title>
        </mat-expansion-panel-header>

        <!--Datos generales internos-->
        <vex-matriz-m></vex-matriz-m>
       <!--fin del expasion principal-->
      </mat-expansion-panel>

      <!--Estrategias para la ejecución del proyecto-->
      <mat-expansion-panel
        (opened)="contraccion = true"
        (closed)="contraccion = false">
        <mat-expansion-panel-header>
          <mat-panel-title>
            <mat-icon
              [ngClass]="{'expanded': contraccion, 'collapsed': !contraccion}">keyboard_arrow_right</mat-icon>
            5.- Estrategias para la ejecución del proyecto
          </mat-panel-title>
        </mat-expansion-panel-header>

        <!--Datos generales internos-->
        <vex-estra-e></vex-estra-e>
       <!--fin del expasion principal-->
      </mat-expansion-panel>

      <!--Viabilidad y plan de sostenibilidad-->
      <mat-expansion-panel
        (opened)="contraccion = true"
        (closed)="contraccion = false">
        <mat-expansion-panel-header>
          <mat-panel-title>
            <mat-icon
              [ngClass]="{'expanded': contraccion, 'collapsed': !contraccion}">keyboard_arrow_right</mat-icon>
            6.- Viabilidad y plan de sostenibilidad
          </mat-panel-title>
        </mat-expansion-panel-header>

        <!--Datos generales internos-->
        <vex-viabi-plan></vex-viabi-plan>
        <!--fin del expasion principal-->
      </mat-expansion-panel>

      <!--Proyectos Planificados-->
      <mat-expansion-panel
        (opened)="contraccion = true"
        (closed)="contraccion = false">
        <mat-expansion-panel-header>
          <mat-panel-title>
            <mat-icon
              [ngClass]="{'expanded': contraccion, 'collapsed': !contraccion}">keyboard_arrow_right</mat-icon>
            7.- Proyectos Planificados
          </mat-panel-title>
        </mat-expansion-panel-header>

        <!--Datos generales internos-->

       <!--fin del expasion principal-->
      </mat-expansion-panel>

      <!--Finalizar Perfil-->
      <mat-expansion-panel
        (opened)="contraccion = true"
        (closed)="contraccion = false">
        <mat-expansion-panel-header>
          <mat-panel-title>
            <mat-icon
              [ngClass]="{'expanded': contraccion, 'collapsed': !contraccion}">keyboard_arrow_right</mat-icon>
            8.- Finalizar perfil
          </mat-panel-title>
        </mat-expansion-panel-header>
        <vex-finalizar-p></vex-finalizar-p>
        <!--fin del expasion principal-->
      </mat-expansion-panel>

      <!--Stepper version dos-->
    </mat-expansion-panel>
    <!--Seguimiento-->
    <mat-expansion-panel hideToggle>
      <mat-expansion-panel-header>
        <mat-panel-title>
          Seguimiento
        </mat-panel-title>
      </mat-expansion-panel-header>
      <p>I'm visible because I am open</p>
    </mat-expansion-panel>
    <!--Cierre-->
    <mat-expansion-panel hideToggle>
      <mat-expansion-panel-header>
        <mat-panel-title>
          Cierre
        </mat-panel-title>
      </mat-expansion-panel-header>
      <p>I'm visible because I am open</p>
    </mat-expansion-panel>
    <!--Evaluación-->
    <mat-expansion-panel hideToggle>
      <mat-expansion-panel-header>
        <mat-panel-title>
          Evaluación
        </mat-panel-title>
      </mat-expansion-panel-header>
      <p>I'm visible because I am open</p>
    </mat-expansion-panel>
  </mat-accordion>

</div>
</div>