D-Net

    template: `

    <div id="tm-main" class=" uk-section  uk-margin-small-top tm-middle"   >

      <div uk-grid uk-grid>

       <div class="tm-main uk-width-1-1@s uk-width-1-1@m  uk-width-1-1@l uk-row-first ">

    <div class="uk-container uk-margin-top">

    <div class="uk-article-title">

        Link

    </div>

    <div class="uk-width-1-1">

      <helper position="top"></helper>

    </div>

    <div class="uk-grid  helper-grid">

      <helper position="left" styleName=" uk-width-1-5 uk-padding-left"></helper>

      <div class="uk-width-expand">

          <ul class="uk-breadcrumb">

              <li  [class]="(step==1)?'uk-active':''" ><a (click)="step=1;"><span class="step uk-text-large">1</span> Select Projects <span  >or  Communities <span ></span></span></a></li>

               <li [class]="(step==2)?'uk-active':''" ><a  (click)="step=2;"><span class="step uk-text-large">2</span> Select Research Results <span ></span></a></li>

              <li [class]="(step==3)?'uk-active':''" (click)="step=3;"><a [class]="(results.length == 0)?'uk-disabled':''"  (click)="show='claim';" ><span class="step uk-text-large">3</span> Review metadata</a></li>

          </ul>

          <!--start-over [results]="results" [contexts]="contexts" [projects]="projects" ></start-over-->

          <div class="uk-clearfix">

              <a  class="uk-float-right" uk-toggle="target: #selected; animation:  uk-animation-fade">

                <span class="uk-icon"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="my-box"  x="0px" y="0px" width="28px" height="28px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><g>	<path d="M480,320v128H32V320h78.859l64.016,96h162.25l64-96H480 M384,32H128L0,288v192h512V288L384,32L384,32z M35.781,288l112-224   h216.438l112,224H384l-64,96H192l-64.016-96H35.781L35.781,288z" fill="#b5b5b5"/></g>

                    </svg>

                  </span>

                 </a>

          </div>

          <div id="selected" class="uk-card uk-card-default uk-card-body uk-margin-small" hidden>

          <!--Close Button -->

            <!--div class="uk-clearfix">

             <a uk-toggle="target: #selected; animation:  uk-animation-fade" class="uk-float-right">

                <span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="1"><path fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.06" d="M16,4 L4,16"></path></svg>

            </span></a>

          </div-->

              <claim-selected-projects   title="link Projects" [projects]="projects" [show]="show" [linkType]=linkType

                (showChange)="showChange($event)"   > </claim-selected-projects>

             <claim-selected-contexts  title="link Communities" [contexts]="contexts"  [projects]="projects"  [results]="results" [inlineEntity] = "inlineResult" [show]="show" [linkType]=linkType

             (showChange)="showChange($event)"  > </claim-selected-contexts>

             <claim-selected-results *ngIf="step!=3"  title= "Selected Research Results" [results]="results"  [bulkMode]="bulkMode" showSearch=false  showAccessRights=false>

             </claim-selected-results>

         </div>

            <!--ul class="uk-pagination uk-margin-remove-bottom">

                <li  *ngIf="show != 'result' " (click)="prev()"><a><span class="uk-margin-small-right" uk-pagination-previous></span> Previous</a></li>

                <li *ngIf="show != 'claim' " (click)="next()"  class="uk-margin-auto-left"><a>Next <span class="uk-margin-small-left" uk-pagination-next></span></a></li>

                <li  *ngIf="show == 'claim' " (click)="next()"  class="uk-margin-auto-left">

                <claim-insert   [contexts]="contexts" [results]="results"  [projects]="projects" [show] = "show"

                  (showChange)="showChange($event)" ></claim-insert>

                </li>

            </ul-->

            <!-- link with Projects & Contexts -->

                    <!--div class="uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l uk-grid">

                       <div class="uk-width-1-1@s uk-width-1-2@m uk-width-1-2@l uk-width-1-2@xl "-->

                    <div *ngIf="step==1">

                       <ul class=" uk-tab " uk-tab="connect: #tabs; animation: uk-animation-fade">

                               <li>

                                  <a>Projects ({{projects.length}})</a>

                              </li>

                              <li>

                                 <a>Communities ({{contexts.length}})</a>

                             </li>

                        </ul>

                        <ul id="tabs" class="uk-switcher uk-margin-left uk-width-1-1">

                          <li>

                               <!--claim-selected-projects   title="link Projects" [projects]="projects" [show]="show" [linkType]=linkType

                                 (showChange)="showChange($event)"   > </claim-selected-projects-->

                                   <claim-projects-search-form     [(selectedProjects)]="projects"    > </claim-projects-search-form>

                         </li>

                          <li>

                              <!--claim-selected-contexts  title="link Communities" [contexts]="contexts"  [projects]="projects"  [results]="results" [inlineEntity] = "inlineResult" [show]="show" [linkType]=linkType

                              (showChange)="showChange($event)"  > </claim-selected-contexts-->

                              <claim-contexts-search-form    [(selectedList)]="contexts" [projects]="projects" [results]="results" [inlineEntity]="inlineResult" > </claim-contexts-search-form>

                          </li>

                      <!--/div>

                      <div class="uk-width-1-1@s uk-width-1-2@m uk-width-1-2@l uk-width-1-2@xl "-->

                  </ul>

                </div>

                      <!--/div-->

                    <!--/div-->

            <!--hr-->

            <!-- Research Results -->

            <div *ngIf="step==2 ">

                <div  class="uk-width-1-1     ">

                  <div class=" uk-padding-small uk-padding-remove-bottom  uk-panel uk-background-muted ">

                  <span *ngIf="bulkMode"   class=" uk-animation uk-float-right">

                    <span   title= "Bulk mode"><i  class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="upload" ratio="1"><polyline fill="none" stroke="#000" points="5 8 9.5 3.5 14 8 "></polyline><rect x="3" y="17" width="13" height="1"></rect><line fill="none" stroke="#000" x1="9.5" y1="15" x2="9.5" y2="4"></line></svg></i></span>

                    <a   title= "Switch to Search mode"  (click)="bulkMode = !bulkMode;"> <span class="uk-icon">

                        <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="search" ratio="1"><circle fill="none" stroke="#000" stroke-width="1.1" cx="9" cy="9" r="7"></circle><path fill="none" stroke="#000" stroke-width="1.1" d="M14,14 L18,18 L14,14 Z"></path></svg>

                        </span></a>

                  </span>

                  <span *ngIf="!bulkMode"   class=" uk-animation uk-float-right">

                    <a   title= "Switch to Bulk mode"   (click)="bulkMode = !bulkMode;"><i  class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="upload" ratio="1"><polyline fill="none" stroke="#000" points="5 8 9.5 3.5 14 8 "></polyline><rect x="3" y="17" width="13" height="1"></rect><line fill="none" stroke="#000" x1="9.5" y1="15" x2="9.5" y2="4"></line></svg></i></a>

                    <span   title= "Search mode"> <span class="uk-icon">

                        <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="search" ratio="1"><circle fill="none" stroke="#000" stroke-width="1.1" cx="9" cy="9" r="7"></circle><path fill="none" stroke="#000" stroke-width="1.1" d="M14,14 L18,18 L14,14 Z"></path></svg>

                        </span></span>

                  </span>

                  </div>

                  <claim-result-search-form *ngIf="!bulkMode"  [selectedResults]="results"   > </claim-result-search-form>

                  <bulk-claim  *ngIf="bulkMode" [results]="results" > </bulk-claim>

                </div>

            </div>

            <div *ngIf="step==3" class="uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l">

              <claim-selected-results   title= "Selected Research Results" [results]="results"  [bulkMode]="bulkMode" showSearch = false  showAccessRights = true>

              </claim-selected-results>

            </div>

            <ul class="uk-pagination">

                <li  *ngIf="step !=1 " (click)="step=step-1;"><a><span class="uk-margin-small-right" uk-pagination-previous></span> Previous</a></li>

                <!--li *ngIf="show != 'claim' && this.results.length > 0 " (click)="canProceedToMetadata()"  class="uk-margin-auto-left"><a> Review Metadata <span class="uk-margin-small-left" uk-pagination-next></span></a></li-->

                <li  *ngIf="step !=3 " (click)="step=step + 1;"  class="uk-margin-auto-left">

                  <a>Next <span class="uk-margin-small-left" uk-pagination-next></span></a>

                </li>

                <li  *ngIf=" step == 3  " (click)="next()"  class="uk-margin-auto-left uk-width-1-1">

                <claim-insert   [contexts]="contexts" [results]="results"  [projects]="projects" [show] = "show"

                  (showChange)="showChange($event)" ></claim-insert>

                </li>

            </ul>

          </div>

          <helper position="right" styleName=" uk-width-1-5"></helper>

        </div>

        <helper position="bottom"></helper>

 </div>

 </div>

</div>

</div>

`